{"version":3,"sources":["components/notifications.js"],"names":["dmx","Component","attributes","position","type","String","default","enum","align","offsetX","Number","offsetY","spacing","opacity","timeout","extendedTimeout","showAnimation","showDuration","hideAnimation","hideDuration","closeAnimation","closeDuration","closeIcon","closable","Boolean","infoBackground","infoColor","infoIcon","successIcon","successBackground","successColor","warningIcon","warningBackground","warningColor","dangerIcon","dangerBackground","dangerColor","methods","clear","this","_clear","msg","message","options","_show","info","Object","assign","icon","props","color","background","success","warning","danger","events","click","CustomEvent","init","_alignMap","left","right","full","start","center","end","stretch","render","node","classList","add","setAttribute","_update","performUpdate","updatedProps","$node","textContent","style","setProperty","_template","tpl","title","_create","template","div","document","createElement","innerHTML","firstChild","notify","addEventListener","dispatchEvent","bind","detail","querySelector","_close","_pause","_continue","timeoutId","setTimeout","_hide","insertBefore","remove","once","clearTimeout"],"mappings":";;;;;;AAAAA,IAAAC,UAAA,gBAAA,CAEAC,WAAA,CACAC,SAAA,CACAC,KAAAC,OACAC,QAAA,MACAC,KAAA,CAAA,MAAA,WAGAC,MAAA,CACAJ,KAAAC,OACAC,QAAA,MACAC,KAAA,CAAA,OAAA,QAAA,OAAA,QAAA,SAAA,MAAA,YAIAE,QAAA,CACAL,KAAAM,OACAJ,QAAA,IAGAK,QAAA,CACAP,KAAAM,OACAJ,QAAA,IAGAM,QAAA,CACAR,KAAAM,OACAJ,QAAA,IAGAO,QAAA,CACAT,KAAAM,OACAJ,QAAA,IAGAQ,QAAA,CACAV,KAAAM,OACAJ,QAAA,KAGAS,gBAAA,CACAX,KAAAM,OACAJ,QAAA,KAGAU,cAAA,CACAZ,KAAAC,OACAC,QAAA,UAGAW,aAAA,CACAb,KAAAM,OACAJ,QAAA,KAGAY,cAAA,CACAd,KAAAC,OACAC,QAAA,WAGAa,aAAA,CACAf,KAAAM,OACAJ,QAAA,KAGAc,eAAA,CACAhB,KAAAC,OACAC,QAAA,WAGAe,cAAA,CACAjB,KAAAM,OACAJ,QAAA,KAGAgB,UAAA,CACAlB,KAAAC,OACAC,QAAA,eAGAiB,SAAA,CACAnB,KAAAoB,QACAlB,SAAA,GAGAmB,eAAA,CACArB,KAAAC,OACAC,QAAA,WAGAoB,UAAA,CACAtB,KAAAC,OACAC,QAAA,QAGAqB,SAAA,CACAvB,KAAAC,OACAC,QAAA,cAGAsB,YAAA,CACAxB,KAAAC,OACAC,QAAA,eAGAuB,kBAAA,CACAzB,KAAAC,OACAC,QAAA,WAGAwB,aAAA,CACA1B,KAAAC,OACAC,QAAA,QAGAyB,YAAA,CACA3B,KAAAC,OACAC,QAAA,qBAGA0B,kBAAA,CACA5B,KAAAC,OACAC,QAAA,WAGA2B,aAAA,CACA7B,KAAAC,OACAC,QAAA,QAGA4B,WAAA,CACA9B,KAAAC,OACAC,QAAA,iBAGA6B,iBAAA,CACA/B,KAAAC,OACAC,QAAA,WAGA8B,YAAA,CACAhC,KAAAC,OACAC,QAAA,SAIA+B,QAAA,CACAC,QACAC,KAAAC,QACA,EAEAC,IAAAC,EAAAC,GACAJ,KAAAK,MAAA,MAAAF,EAAAC,EACA,EAEAE,KAAAH,EAAAC,GACAJ,KAAAK,MACA,OACAF,EACAI,OAAAC,OACA,CACAC,KAAAT,KAAAU,MAAAtB,SACAuB,MAAAX,KAAAU,MAAAvB,UACAyB,WAAAZ,KAAAU,MAAAxB,gBAEAkB,GAGA,EAEAS,QAAAV,EAAAC,GACAJ,KAAAK,MACA,UACAF,EACAI,OAAAC,OACA,CACAC,KAAAT,KAAAU,MAAArB,YACAsB,MAAAX,KAAAU,MAAAnB,aACAqB,WAAAZ,KAAAU,MAAApB,mBAEAc,GAGA,EAEAU,QAAAX,EAAAC,GACAJ,KAAAK,MACA,UACAF,EACAI,OAAAC,OACA,CACAC,KAAAT,KAAAU,MAAAlB,YACAmB,MAAAX,KAAAU,MAAAhB,aACAkB,WAAAZ,KAAAU,MAAAjB,mBAEAW,GAGA,EAEAW,OAAA,SAAAZ,EAAAC,GACAJ,KAAAK,MACA,SACAF,EACAI,OAAAC,OACA,CACAC,KAAAT,KAAAU,MAAAf,WACAgB,MAAAX,KAAAU,MAAAb,YACAe,WAAAZ,KAAAU,MAAAd,kBAEAQ,GAGA,GAGAY,OAAA,CACAC,MAAAC,aAGAC,OACAnB,KAAAoB,UAAA,CACAC,KAAA,aACAC,MAAA,WACAC,KAAA,UACAC,MAAA,aACAC,OAAA,SACAC,IAAA,WACAC,QAAA,UAEA,EAEAC,OAAAC,GACAA,EAAAC,UAAAC,IAAA,qBACAF,EAAAG,aAAA,YAAA,UACAH,EAAAG,aAAA,cAAA,QAEAhC,KAAAC,SACAD,KAAAiC,SACA,EAEAC,cAAAC,GACAnC,KAAAiC,SACA,EAEAhC,OAAA,WACAD,KAAAoC,MAAAC,YAAA,EACA,EAEAJ,UACAjC,KAAAoC,MAAAE,MAAAC,YAAA,wBAAAvC,KAAAU,MAAAxC,QAAA,MACA8B,KAAAoC,MAAAE,MAAAC,YAAA,wBAAAvC,KAAAU,MAAAtC,QAAA,MACA4B,KAAAoC,MAAAE,MAAAC,YAAA,qBAAAvC,KAAAoB,UAAApB,KAAAU,MAAAzC,QACA+B,KAAAoC,MAAAE,MAAAC,YAAA,mBAAAvC,KAAAU,MAAArC,QAAA,MACA2B,KAAAoC,MAAAE,MAAAC,YAAA,yBAAA,OAAAvC,KAAAU,MAAA9C,SAAA,SAAA,iBACA,EAEA4E,UAAApC,GACA,IAAAqC,EAAA,iHAAArC,EAAAQ,mCAAAR,EAAAO,gCAAAP,EAAA9B,YASA,OARA8B,EAAAK,OAAAgC,GAAA,0CAAArC,EAAAK,oBACAgC,GAAA,gCACArC,EAAAsC,QAAAD,GAAA,iCAAArC,EAAAsC,eACAtC,EAAAD,UAAAsC,GAAA,mCAAArC,EAAAD,iBACAsC,GAAA,SACArC,EAAApB,WAAAyD,GAAA,+EAAArC,EAAArB,4BACA0D,GAAA,SAEAA,CACA,EAEAE,QAAA,SAAAvC,GACA,IAAAwC,EAAA5C,KAAAwC,UAAApC,GACAyC,EAAAC,SAAAC,cAAA,OAEA,OADAF,EAAAG,UAAAJ,EACAC,EAAAI,UACA,EAEA5C,MAAA,SAAAxC,EAAAsC,EAAAC,GACAA,EAAAG,OAAAC,OACA,CAAA3C,KAAAA,EAAAsC,QAAAA,EAAAS,WAAA,OAAAD,MAAA,QACAX,KAAAU,MACAN,GAGA,IAAA8C,EAAAlD,KAAA2C,QAAAvC,GAEA8C,EAAAZ,MAAAC,YAAA,iBAAAnC,EAAA3B,eACAyE,EAAAZ,MAAAC,YAAA,qBAAAnC,EAAA1B,aAAA,MAEAwE,EAAAC,iBAAA,QAAAnD,KAAAoD,cAAAC,KAAArD,KAAA,QAAA,CAAAsD,OAAAlD,KAEAA,EAAApB,SACAkE,EAAAK,cAAA,qBAAAJ,iBAAA,QAAAnD,KAAAwD,OAAAH,KAAArD,KAAAkD,EAAA9C,IACAA,EAAA7B,UAEA6B,EAAA7B,QAAA,KAGA6B,EAAA7B,UACA2E,EAAAC,iBAAA,aAAAnD,KAAAyD,OAAAJ,KAAArD,KAAAkD,EAAA9C,IACA8C,EAAAC,iBAAA,aAAAnD,KAAA0D,UAAAL,KAAArD,KAAAkD,EAAA9C,IACA8C,EAAAS,UAAAC,WAAA5D,KAAA6D,MAAAR,KAAArD,KAAAkD,EAAA9C,GAAAA,EAAA1B,aAAA0B,EAAA7B,UAGAyB,KAAAoC,MAAA0B,aAAAZ,EAAAlD,KAAAoC,MAAAa,WACA,EAEAY,MAAA,SAAAX,EAAA9C,GACAA,EAAAzB,eAAAyB,EAAAxB,cACAsE,EAAAZ,MAAAC,YAAA,iBAAAnC,EAAAzB,eACAuE,EAAAZ,MAAAC,YAAA,qBAAAnC,EAAAxB,aAAA,MACAsE,EAAAC,iBAAA,gBAAA,IAAAD,EAAAa,UAAA,CAAAC,MAAA,KAEAd,EAAAa,QAEA,EAEAP,OAAA,SAAAN,EAAA9C,GACAA,EAAAvB,gBAAAuB,EAAAtB,eACAoE,EAAAZ,MAAAC,YAAA,iBAAAnC,EAAAvB,gBACAqE,EAAAZ,MAAAC,YAAA,qBAAAnC,EAAAtB,cAAA,MACAoE,EAAAC,iBAAA,gBAAA,IAAAD,EAAAa,UAAA,CAAAC,MAAA,KAEAd,EAAAa,QAEA,EAEAN,OAAA,SAAAP,EAAA9C,GACA6D,aAAAf,EAAAS,UACA,EAEAD,UAAA,SAAAR,EAAA9C,IACAA,EAAA7B,SAAA6B,EAAA5B,mBACA0E,EAAAS,UAAAC,WAAA5D,KAAA6D,MAAAR,KAAArD,KAAAkD,EAAA9C,GAAAA,EAAA5B,iBAEA","file":"dmxNotifications.js","sourcesContent":["dmx.Component('notifications', {\r\n\r\n  attributes: {\r\n    position: {\r\n      type: String,\r\n      default: 'top',\r\n      enum: ['top', 'bottom'],\r\n    },\r\n\r\n    align: {\r\n      type: String,\r\n      default: 'end',\r\n      enum: ['left', 'right', 'full', 'start', 'center', 'end', 'stretch'],\r\n      // start, end, center, stretch are new options, left, right and are deprecated but still supported\r\n    },\r\n\r\n    offsetX: {\r\n      type: Number,\r\n      default: 15,\r\n    },\r\n\r\n    offsetY: {\r\n      type: Number,\r\n      default: 15,\r\n    },\r\n\r\n    spacing: {\r\n      type: Number,\r\n      default: 10,\r\n    },\r\n\r\n    opacity: {\r\n      type: Number,\r\n      default: 0.8,\r\n    },\r\n\r\n    timeout: {\r\n      type: Number,\r\n      default: 5000, // How long the notify will display without any interaction (0 to make sticky)\r\n    },\r\n\r\n    extendedTimeout: {\r\n      type: Number,\r\n      default: 1000,\r\n    },\r\n\r\n    showAnimation: {\r\n      type: String,\r\n      default: 'fadeIn',\r\n    },\r\n\r\n    showDuration: {\r\n      type: Number,\r\n      default: 400,\r\n    },\r\n\r\n    hideAnimation: {\r\n      type: String,\r\n      default: 'fadeOut',\r\n    },\r\n\r\n    hideDuration: {\r\n      type: Number,\r\n      default: 400,\r\n    },\r\n\r\n    closeAnimation: {\r\n      type: String,\r\n      default: 'fadeOut',\r\n    },\r\n\r\n    closeDuration: {\r\n      type: Number,\r\n      default: 400,\r\n    },\r\n\r\n    closeIcon: {\r\n      type: String,\r\n      default: 'fa fa-times',\r\n    },\r\n\r\n    closable: {\r\n      type: Boolean,\r\n      default: false,\r\n    },\r\n\r\n    infoBackground: {\r\n      type: String,\r\n      default: '#2f96b4',\r\n    },\r\n\r\n    infoColor: {\r\n      type: String,\r\n      default: '#fff',\r\n    },\r\n\r\n    infoIcon: {\r\n      type: String,\r\n      default: 'fa fa-info',\r\n    },\r\n\r\n    successIcon: {\r\n      type: String,\r\n      default: 'fa fa-check',\r\n    },\r\n\r\n    successBackground: {\r\n      type: String,\r\n      default: '#51a351',\r\n    },\r\n\r\n    successColor: {\r\n      type: String,\r\n      default: '#fff',\r\n    },\r\n\r\n    warningIcon: {\r\n      type: String,\r\n      default: 'fa fa-exclamation',\r\n    },\r\n\r\n    warningBackground: {\r\n      type: String,\r\n      default: '#f89406',\r\n    },\r\n\r\n    warningColor: {\r\n      type: String,\r\n      default: '#fff',\r\n    },\r\n\r\n    dangerIcon: {\r\n      type: String,\r\n      default: 'fa fa-warning',\r\n    },\r\n\r\n    dangerBackground: {\r\n      type: String,\r\n      default: '#bd362f',\r\n    },\r\n\r\n    dangerColor: {\r\n      type: String,\r\n      default: '#fff',\r\n    },\r\n  },\r\n\r\n  methods: {\r\n    clear () {\r\n      this._clear();\r\n    },\r\n\r\n    msg (message, options) {\r\n      this._show('msg', message, options);\r\n    },\r\n\r\n    info (message, options) {\r\n      this._show(\r\n        'info',\r\n        message,\r\n        Object.assign(\r\n          {\r\n            icon: this.props.infoIcon,\r\n            color: this.props.infoColor,\r\n            background: this.props.infoBackground,\r\n          },\r\n          options\r\n        )\r\n      );\r\n    },\r\n\r\n    success (message, options) {\r\n      this._show(\r\n        'success',\r\n        message,\r\n        Object.assign(\r\n          {\r\n            icon: this.props.successIcon,\r\n            color: this.props.successColor,\r\n            background: this.props.successBackground,\r\n          },\r\n          options\r\n        )\r\n      );\r\n    },\r\n\r\n    warning (message, options) {\r\n      this._show(\r\n        'warning',\r\n        message,\r\n        Object.assign(\r\n          {\r\n            icon: this.props.warningIcon,\r\n            color: this.props.warningColor,\r\n            background: this.props.warningBackground,\r\n          },\r\n          options\r\n        )\r\n      );\r\n    },\r\n\r\n    danger: function (message, options) {\r\n      this._show(\r\n        'danger',\r\n        message,\r\n        Object.assign(\r\n          {\r\n            icon: this.props.dangerIcon,\r\n            color: this.props.dangerColor,\r\n            background: this.props.dangerBackground,\r\n          },\r\n          options\r\n        )\r\n      );\r\n    },\r\n  },\r\n\r\n  events: {\r\n    click: CustomEvent,\r\n  },\r\n\r\n  init () {\r\n    this._alignMap = {\r\n      left: 'flex-start',\r\n      right: 'flex-end',\r\n      full: 'stretch',\r\n      start: 'flex-start',\r\n      center: 'center',\r\n      end: 'flex-end',\r\n      stretch: 'stretch',\r\n    };\r\n  },\r\n\r\n  render (node) {\r\n    node.classList.add('dmx-notifications');\r\n    node.setAttribute('aria-live', 'polite');\r\n    node.setAttribute('aria-atomic', 'true');\r\n\r\n    this._clear();\r\n    this._update();\r\n  },\r\n\r\n  performUpdate (updatedProps) {\r\n    this._update();\r\n  },\r\n\r\n  _clear: function () {\r\n    this.$node.textContent = '';\r\n  },\r\n\r\n  _update () {\r\n    this.$node.style.setProperty('--dmx-notify-offset-x', this.props.offsetX + 'px');\r\n    this.$node.style.setProperty('--dmx-notify-offset-y', this.props.offsetY + 'px');\r\n    this.$node.style.setProperty('--dmx-notify-align', this._alignMap[this.props.align]);\r\n    this.$node.style.setProperty('--dmx-notify-gap', this.props.spacing + 'px');\r\n    this.$node.style.setProperty('--dmx-notify-direction', this.props.position == 'top' ? 'column' : 'column-reverse');\r\n  },\r\n\r\n  _template (options) {\r\n    let tpl = `<div class=\"dmx-notify\" role=\"alert\" aria-live=\"assertive\" aria-atomic=\"true\" style=\"--dmx-notify-background: ${options.background}; --dmx-notify-color: ${options.color}; --dmx-notify-opacity: ${options.opacity}\">`;\r\n    if (options.icon) tpl += `<div class=\"dmx-notify-icon\"><i class=\"${options.icon}\"></i></div>`;\r\n    tpl += `<div class=\"dmx-notify-body\">`;\r\n    if (options.title) tpl += `<div class=\"dmx-notify-title\">${options.title}</div>`;\r\n    if (options.message) tpl += `<div class=\"dmx-notify-message\">${options.message}</div>`;\r\n    tpl += `</div>`;\r\n    if (options.closable) tpl += `<button type=\"button\" aria-label=\"Close\" class=\"dmx-notify-close\"><i class=\"${options.closeIcon}\"></i></button>`;\r\n    tpl += `</div>`;\r\n\r\n    return tpl;\r\n  },\r\n\r\n  _create: function (options) {\r\n    var template = this._template(options);\r\n    var div = document.createElement('div');\r\n    div.innerHTML = template;\r\n    return div.firstChild;\r\n  },\r\n\r\n  _show: function (type, message, options) {\r\n    options = Object.assign(\r\n      { type: type, message: message, background: '#eee', color: '#333' },\r\n      this.props,\r\n      options\r\n    );\r\n\r\n    var notify = this._create(options);\r\n\r\n    notify.style.setProperty('animation-name', options.showAnimation);\r\n    notify.style.setProperty('animation-duration', options.showDuration + 'ms');\r\n\r\n    notify.addEventListener('click', this.dispatchEvent.bind(this, 'click', { detail: options }));\r\n\r\n    if (options.closable) {\r\n      notify.querySelector('.dmx-notify-close').addEventListener('click', this._close.bind(this, notify, options));\r\n    } else if (!options.timeout) {\r\n      // if not closable and not timeout, hide after 5 seconds\r\n      options.timeout = 5000;\r\n    }\r\n\r\n    if (options.timeout) {\r\n      notify.addEventListener('mouseenter', this._pause.bind(this, notify, options));\r\n      notify.addEventListener('mouseleave', this._continue.bind(this, notify, options));\r\n      notify.timeoutId = setTimeout(this._hide.bind(this, notify, options), options.showDuration + options.timeout);\r\n    }\r\n\r\n    this.$node.insertBefore(notify, this.$node.firstChild);\r\n  },\r\n\r\n  _hide: function (notify, options) {\r\n    if (options.hideAnimation && options.hideDuration) {\r\n      notify.style.setProperty('animation-name', options.hideAnimation);\r\n      notify.style.setProperty('animation-duration', options.hideDuration + 'ms');\r\n      notify.addEventListener('animationend', () => notify.remove(), { once: true });\r\n    } else {\r\n      notify.remove();\r\n    }\r\n  },\r\n\r\n  _close: function (notify, options) {\r\n    if (options.closeAnimation && options.closeDuration) {\r\n      notify.style.setProperty('animation-name', options.closeAnimation);\r\n      notify.style.setProperty('animation-duration', options.closeDuration + 'ms');\r\n      notify.addEventListener('animationend', () => notify.remove(), { once: true });\r\n    } else {\r\n      notify.remove();\r\n    }\r\n  },\r\n\r\n  _pause: function (notify, options) {\r\n    clearTimeout(notify.timeoutId);\r\n  },\r\n\r\n  _continue: function (notify, options) {\r\n    if (options.timeout || options.extendedTimeout) {\r\n      notify.timeoutId = setTimeout(this._hide.bind(this, notify, options), options.extendedTimeout);\r\n    }\r\n  },\r\n});\r\n"]}