{"version":3,"sources":["components/notifications.js"],"names":["dmx","Component","attributes","position","type","String","default","align","offset-x","Number","offset-y","spacing","opacity","timeout","extended-timeout","newest-on-top","Boolean","show-animation","show-duration","hide-animation","hide-duration","close-animation","close-duration","close-icon","closable","info-background","info-color","info-icon","success-icon","success-background","success-color","warning-icon","warning-background","warning-color","danger-icon","danger-background","danger-color","methods","clear","this","msg","message","options","show","info","Object","assign","icon","props","color","background","success","warning","danger","events","click","CustomEvent","positionClasses","render","node","$node","textContent","classList","add","update","style","removeProperty","setProperty","create","template","title","replace","a","b","div","document","createElement","innerHTML","firstChild","notify","addEventListener","pause","bind","continue","dispatchEvent","detail","querySelector","close","timeoutId","setTimeout","hide","insertBefore","appendChild","remove","clearTimeout"],"mappings":";;;;;;AAAAA,IAAAC,UAAA,gBAAA,CAEAC,WAAA,CACAC,SAAA,CACAC,KAAAC,OACAC,QAAA,OAGAC,MAAA,CACAH,KAAAC,OACAC,QAAA,SAGAE,WAAA,CACAJ,KAAAK,OACAH,QAAA,IAGAI,WAAA,CACAN,KAAAK,OACAH,QAAA,IAGAK,QAAA,CACAP,KAAAK,OACAH,QAAA,IAGAM,QAAA,CACAR,KAAAK,OACAH,QAAA,IAGAO,QAAA,CACAT,KAAAK,OACAH,QAAA,KAGAQ,mBAAA,CACAV,KAAAK,OACAH,QAAA,KAGAS,gBAAA,CACAX,KAAAY,QACAV,SAAA,GAGAW,iBAAA,CACAb,KAAAC,OACAC,QAAA,UAGAY,gBAAA,CACAd,KAAAK,OACAH,QAAA,KAGAa,iBAAA,CACAf,KAAAC,OACAC,QAAA,WAGAc,gBAAA,CACAhB,KAAAK,OACAH,QAAA,KAGAe,kBAAA,CACAjB,KAAAC,OACAC,QAAA,MAGAgB,iBAAA,CACAlB,KAAAK,OACAH,QAAA,GAGAiB,aAAA,CACAnB,KAAAC,OACAC,QAAA,eAGAkB,SAAA,CACApB,KAAAY,QACAV,SAAA,GAGAmB,kBAAA,CACArB,KAAAC,OACAC,QAAA,WAGAoB,aAAA,CACAtB,KAAAC,OACAC,QAAA,QAGAqB,YAAA,CACAvB,KAAAC,OACAC,QAAA,cAGAsB,eAAA,CACAxB,KAAAC,OACAC,QAAA,eAGAuB,qBAAA,CACAzB,KAAAC,OACAC,QAAA,WAGAwB,gBAAA,CACA1B,KAAAC,OACAC,QAAA,QAGAyB,eAAA,CACA3B,KAAAC,OACAC,QAAA,qBAGA0B,qBAAA,CACA5B,KAAAC,OACAC,QAAA,WAGA2B,gBAAA,CACA7B,KAAAC,OACAC,QAAA,QAGA4B,cAAA,CACA9B,KAAAC,OACAC,QAAA,iBAGA6B,oBAAA,CACA/B,KAAAC,OACAC,QAAA,WAGA8B,eAAA,CACAhC,KAAAC,OACAC,QAAA,SAIA+B,QAAA,CACAC,MAAA,WACAC,KAAAD,SAGAE,IAAA,SAAAC,EAAAC,GACAH,KAAAI,KAAA,MAAAF,EAAAC,IAGAE,KAAA,SAAAH,EAAAC,GACAH,KAAAI,KAAA,OAAAF,EAAAI,OAAAC,OAAA,CACAC,KAAAR,KAAAS,MAAA,aACAC,MAAAV,KAAAS,MAAA,cACAE,WAAAX,KAAAS,MAAA,oBACAN,KAGAS,QAAA,SAAAV,EAAAC,GACAH,KAAAI,KAAA,UAAAF,EAAAI,OAAAC,OAAA,CACAC,KAAAR,KAAAS,MAAA,gBACAC,MAAAV,KAAAS,MAAA,iBACAE,WAAAX,KAAAS,MAAA,uBACAN,KAGAU,QAAA,SAAAX,EAAAC,GACAH,KAAAI,KAAA,UAAAF,EAAAI,OAAAC,OAAA,CACAC,KAAAR,KAAAS,MAAA,gBACAC,MAAAV,KAAAS,MAAA,iBACAE,WAAAX,KAAAS,MAAA,uBACAN,KAGAW,OAAA,SAAAZ,EAAAC,GACAH,KAAAI,KAAA,SAAAF,EAAAI,OAAAC,OAAA,CACAC,KAAAR,KAAAS,MAAA,eACAC,MAAAV,KAAAS,MAAA,gBACAE,WAAAX,KAAAS,MAAA,sBACAN,MAIAY,OAAA,CACAC,MAAAC,aAGAC,gBAAA,CAAA,MAAA,SAAA,OAAA,QAAA,QAEAC,OAAA,SAAAC,IACApB,KAAAqB,MAAAD,GACAE,YAAA,GACAF,EAAAG,UAAAC,IAAA,qBACAxB,KAAAyB,OAAA,KAGAA,OAAA,SAAAhB,GACAT,KAAAS,MAAA7C,UAAA6C,EAAA7C,UAAAoC,KAAAS,MAAA,aAAAA,EAAA,aAAAT,KAAAS,MAAA,aAAAA,EAAA,cACAT,KAAAqB,MAAAK,MAAAC,eAAA,OACA3B,KAAAqB,MAAAK,MAAAC,eAAA,UACA3B,KAAAqB,MAAAK,MAAAE,YAAA5B,KAAAS,MAAA7C,SAAAoC,KAAAS,MAAA,YAAA,MACAT,KAAAqB,MAAAK,MAAAE,YAAA,OAAA5B,KAAAS,MAAA,YAAA,MACAT,KAAAqB,MAAAK,MAAAE,YAAA,QAAA5B,KAAAS,MAAA,YAAA,QAIAV,MAAA,WACAC,KAAAqB,MAAAC,YAAA,IAGAO,OAAA,SAAA1B,GACA,IAAA2B,EAAA,2BACAA,GAAA,mFACA3B,EAAAlB,WAAA6C,GAAA,sGACA3B,EAAAK,OAAAsB,GAAA,wDACA3B,EAAA4B,QAAAD,GAAA,0CACA3B,EAAAD,UAAA4B,GAAA,8CAGAA,GAFAA,GAAA,gBAEAE,QAAA,iBAAA,SAAAC,EAAAC,GACA,OAAA/B,EAAA+B,KAGA,IAAAC,EAAAC,SAAAC,cAAA,OAEA,OADAF,EAAAG,UAAAR,EACAK,EAAAI,YAGAnC,KAAA,SAAAvC,EAAAqC,EAAAC,GACAA,EAAAG,OAAAC,OAAA,CAAA1C,KAAAA,EAAAqC,QAAAA,EAAAS,WAAA,UAAAD,MAAA,QAAAV,KAAAS,MAAAN,GAEA,IAAAqC,EAAAxC,KAAA6B,OAAA1B,GAEAqC,EAAAd,MAAAE,YAAA,OAAAzB,EAAAvC,SAAA,gBAAA,aAAAuC,EAAA/B,QAAA,MAEAoE,EAAAd,MAAAE,YAAA,QAAAzB,EAAAnC,OACAwE,EAAAd,MAAAE,YAAA,QAAAzB,EAAAnC,OACAwE,EAAAd,MAAAE,YAAA,iBAAAzB,EAAA,mBACAqC,EAAAd,MAAAE,YAAA,qBAAAzB,EAAA,iBAAA,MAEAqC,EAAAC,iBAAA,aAAAzC,KAAA0C,MAAAC,KAAA3C,KAAAwC,EAAArC,IACAqC,EAAAC,iBAAA,aAAAzC,KAAA4C,SAAAD,KAAA3C,KAAAwC,EAAArC,IACAqC,EAAAC,iBAAA,QAAAzC,KAAA6C,cAAAF,KAAA3C,KAAA,QAAA,CAAA8C,OAAA3C,KAEAA,EAAAlB,UACAuD,EAAAO,cAAA,cAAAN,iBAAA,QAAAzC,KAAAgD,MAAAL,KAAA3C,KAAAwC,EAAArC,IAGAA,EAAA7B,UACAkE,EAAAS,UAAAC,WAAAlD,KAAAmD,KAAAR,KAAA3C,KAAAwC,EAAArC,GAAAA,EAAA,iBAAAA,EAAA7B,UAGA6B,EAAA,iBACAH,KAAAqB,MAAA+B,aAAAZ,EAAAxC,KAAAqB,MAAAkB,YAEAvC,KAAAqB,MAAAgC,YAAAb,IAIAW,KAAA,SAAAX,EAAArC,GACAA,EAAA,mBAAAA,EAAA,kBACAqC,EAAAd,MAAAE,YAAA,iBAAAzB,EAAA,mBACAqC,EAAAd,MAAAE,YAAA,qBAAAzB,EAAA,iBAAA,MACA+C,WAAA,WAAAV,EAAAc,UAAAnD,EAAA,mBAEAqC,EAAAc,UAIAN,MAAA,SAAAR,EAAArC,GACAA,EAAA,oBAAAA,EAAA,mBACAqC,EAAAd,MAAAE,YAAA,iBAAAzB,EAAA,oBACAqC,EAAAd,MAAAE,YAAA,qBAAAzB,EAAA,kBAAA,MACA+C,WAAA,WAAAV,EAAAc,UAAAnD,EAAA,oBAEAqC,EAAAc,UAIAZ,MAAA,SAAAF,EAAArC,GACAoD,aAAAf,EAAAS,YAGAL,SAAA,SAAAJ,EAAArC,IACAA,EAAA7B,SAAA6B,EAAA,uBACAqC,EAAAS,UAAAC,WAAAlD,KAAAmD,KAAAR,KAAA3C,KAAAwC,EAAArC,GAAAA,EAAA","file":"../dmxNotifications/dmxNotifications.js","sourcesContent":["dmx.Component('notifications', {\r\n\r\n  attributes: {\r\n    position: {\r\n      type: String,\r\n      default: 'top' // top, bottom\r\n    },\r\n\r\n    align: {\r\n      type: String,\r\n      default: 'right' // left, right, full\r\n    },\r\n\r\n    'offset-x': {\r\n      type: Number,\r\n      default: 15\r\n    },\r\n\r\n    'offset-y': {\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: .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    'extended-timeout': {\r\n      type: Number,\r\n      default: 1000\r\n    },\r\n\r\n    'newest-on-top': {\r\n      type: Boolean,\r\n      default: false\r\n    },\r\n\r\n    'show-animation': {\r\n      type: String,\r\n      default: 'fadeIn'\r\n    },\r\n\r\n    'show-duration': {\r\n      type: Number,\r\n      default: 1000\r\n    },\r\n\r\n    'hide-animation': {\r\n      type: String,\r\n      default: 'fadeOut'\r\n    },\r\n\r\n    'hide-duration': {\r\n      type: Number,\r\n      default: 1000\r\n    },\r\n\r\n    'close-animation': {\r\n      type: String,\r\n      default: null\r\n    },\r\n\r\n    'close-duration': {\r\n      type: Number,\r\n      default: 0\r\n    },\r\n\r\n    'close-icon': {\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    'info-background': {\r\n      type: String,\r\n      default: '#2f96b4'\r\n    },\r\n\r\n    'info-color': {\r\n      type: String,\r\n      default: '#fff'\r\n    },\r\n\r\n    'info-icon': {\r\n      type: String,\r\n      default: 'fa fa-info'\r\n    },\r\n\r\n    'success-icon': {\r\n      type: String,\r\n      default: 'fa fa-check'\r\n    },\r\n\r\n    'success-background': {\r\n      type: String,\r\n      default: '#51a351'\r\n    },\r\n\r\n    'success-color': {\r\n      type: String,\r\n      default: '#fff'\r\n    },\r\n\r\n    'warning-icon': {\r\n      type: String,\r\n      default: 'fa fa-exclamation'\r\n    },\r\n\r\n    'warning-background': {\r\n      type: String,\r\n      default: '#f89406'\r\n    },\r\n\r\n    'warning-color': {\r\n      type: String,\r\n      default: '#fff'\r\n    },\r\n\r\n    'danger-icon': {\r\n      type: String,\r\n      default: 'fa fa-warning'\r\n    },\r\n\r\n    'danger-background': {\r\n      type: String,\r\n      default: '#bd362f'\r\n    },\r\n\r\n    'danger-color': {\r\n      type: String,\r\n      default: '#fff'\r\n    }\r\n  },\r\n\r\n  methods: {\r\n    clear: function() {\r\n      this.clear();\r\n    },\r\n\r\n    msg: function(message, options) {\r\n      this.show('msg', message, options);\r\n    },\r\n\r\n    info: function(message, options) {\r\n      this.show('info', message, Object.assign({\r\n        icon: this.props['info-icon'],\r\n        color: this.props['info-color'],\r\n        background: this.props['info-background']\r\n      }, options));\r\n    },\r\n\r\n    success: function(message, options) {\r\n      this.show('success', message, Object.assign({\r\n        icon: this.props['success-icon'],\r\n        color: this.props['success-color'],\r\n        background: this.props['success-background']\r\n      }, options));\r\n    },\r\n\r\n    warning: function(message, options) {\r\n      this.show('warning', message, Object.assign({\r\n        icon: this.props['warning-icon'],\r\n        color: this.props['warning-color'],\r\n        background: this.props['warning-background']\r\n      }, options));\r\n    },\r\n\r\n    danger: function(message, options) {\r\n      this.show('danger', message, Object.assign({\r\n        icon: this.props['danger-icon'],\r\n        color: this.props['danger-color'],\r\n        background: this.props['danger-background']\r\n      }, options));\r\n    }\r\n  },\r\n\r\n  events: {\r\n    click: CustomEvent\r\n  },\r\n\r\n  positionClasses: ['top', 'bottom', 'left', 'right', 'full'],\r\n\r\n  render: function(node) {\r\n    this.$node = node;\r\n    node.textContent = '';\r\n    node.classList.add('dmx-notifications');\r\n    this.update({});\r\n  },\r\n\r\n  update: function(props) {\r\n    if (this.props.position != props.position || this.props['offset-x'] != props['offset-x'] || this.props['offset-y'] != props['offset-y']) {\r\n      this.$node.style.removeProperty('top');\r\n      this.$node.style.removeProperty('bottom');\r\n      this.$node.style.setProperty(this.props.position, this.props['offset-y'] + 'px');\r\n      this.$node.style.setProperty('left', this.props['offset-x'] + 'px');\r\n      this.$node.style.setProperty('right', this.props['offset-x'] + 'px');\r\n    }\r\n  },\r\n\r\n  clear: function() {\r\n    this.$node.textContent = '';\r\n  },\r\n\r\n  create: function(options) {\r\n    var template = '<div class=\"dmx-notify\">';\r\n    template += '<div style=\"background: {{background}}; color: {{color}}; opacity: {{opacity}}\">'\r\n    if (options.closable) template += '<button type=\"button\" aria-hidden=\"true\" class=\"dmx-close\"><i class=\"{{close-icon}}\"></i></button>';\r\n    if (options.icon) template += '<div class=\"dmx-icon\"><i class=\"{{icon}}\"></i></div>';\r\n    if (options.title) template += '<div class=\"dmx-title\">{{title}}</div>';\r\n    if (options.message) template += '<div class=\"dmx-message\">{{message}}</div>';\r\n    template += '</div></div>';\r\n\r\n    template = template.replace(/\\{\\{(.*?)\\}\\}/g, function(a, b) {\r\n      return options[b];\r\n    });\r\n\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({ type: type, message: message, background: '#f1f1f1', color: '#333' }, this.props, options);\r\n\r\n    var notify = this.create(options);\r\n\r\n    notify.style.setProperty(options.position == 'top' ? 'margin-bottom' : 'margin-top', options.spacing + 'px');\r\n\r\n    notify.style.setProperty('float', options.align);\r\n    notify.style.setProperty('clear', options.align);\r\n    notify.style.setProperty('animation-name', options['show-animation']);\r\n    notify.style.setProperty('animation-duration', options['show-duration'] + 'ms');\r\n\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.addEventListener('click', this.dispatchEvent.bind(this, 'click', { detail: options }));\r\n\r\n    if (options.closable) {\r\n      notify.querySelector('.dmx-close').addEventListener('click', this.close.bind(this, notify, options));\r\n    }\r\n\r\n    if (options.timeout) {\r\n      notify.timeoutId = setTimeout(this.hide.bind(this, notify, options), options['show-duration'] + options.timeout);\r\n    }\r\n\r\n    if (options['newest-on-top']) {\r\n      this.$node.insertBefore(notify, this.$node.firstChild);\r\n    } else {\r\n      this.$node.appendChild(notify);\r\n    }\r\n  },\r\n\r\n  hide: function(notify, options) {\r\n    if (options['hide-animation'] && options['hide-duration']) {\r\n      notify.style.setProperty('animation-name', options['hide-animation']);\r\n      notify.style.setProperty('animation-duration', options['hide-duration'] + 'ms');\r\n      setTimeout(function() { notify.remove(); }, options['hide-duration']);\r\n    } else {\r\n      notify.remove();\r\n    }\r\n  },\r\n\r\n  close: function(notify, options) {\r\n    if (options['close-animation'] && options['close-duration']) {\r\n      notify.style.setProperty('animation-name', options['close-animation']);\r\n      notify.style.setProperty('animation-duration', options['close-duration'] + 'ms');\r\n      setTimeout(function() { notify.remove(); }, options['close-duration']);\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['extended-timeout']) {\r\n      notify.timeoutId = setTimeout(this.hide.bind(this, notify, options), options['extended-timeout']);\r\n    }\r\n  }\r\n\r\n});\r\n"]}