vicowa-web-components/dist/vicowa-notify/vicowa-notify-box.js

Various web components

import{WebComponentBaseClass as t}from"/third_party/web-component-base-class/dist/web-component-base-class.js";export const DEFAULT_LEVELS=Object.freeze({INFO:"INFO",WARNING:"WARNING",ERROR:"ERROR"});window.customElements.define("vicowa-notify-box",class VicowaNotifyBox extends t{#t;constructor(){super(),this.#t={timeoutId:void 0}}static get properties(){return{message:{type:String,value:"",reflectToAttribute:!0,notify:t=>{t.#o()}},level:{type:String,value:DEFAULT_LEVELS.INFO,reflectToAttribute:!0,notify:t=>{t.#e()}},duration:{type:Number,value:2e3,reflectToAttribute:!0}}}attached(){this.#o(),this.#e(),this.#t.timeoutId=setTimeout((()=>this.#n()),this.duration),this.addAutoEventListener(this.$.close,"click",(()=>this.#n())),this.addAutoEventListener(this.$.box,"transitionend",(()=>{this.$.box.classList.contains("closing")&&!this.$.box.classList.contains("collapsing")?this.$.box.classList.add("collapsing"):this.$.box.classList.contains("closing")&&this.$.box.classList.contains("collapsing")&&this.parentElement.removeChild(this)}))}detached(){this.#n()}#n(){this.$.box.classList.add("closing"),clearTimeout(this.#t.timeoutId),this.#t.timeoutId=void 0}#o(){this.$.message.string=this.message}#e(){Object.values(DEFAULT_LEVELS).filter((t=>t!==this.level)).forEach((t=>this.$.box.classList.remove(`level-${t.toLowerCase()}`))),this.$.box.classList.add(`level-${this.level.toLowerCase()}`)}static get template(){return'\n            <style>\n                #box {\n                \tbox-sizing: border-box;\n                \tmargin: 0.3em 0;\n                \tpadding: 0.2em 1em;\n                \ttransition-property: opacity;\n                \ttransition-duration:  1000ms;\n                \tmax-height: var(--vicowa-notify-max-height, 30px);\n                \tdisplay: flex;\n                \talign-content: space-between;\n                \tborder-radius: var(--vicowa-notify-border-radius, .3em);\n                \tborder-width: var(--vicowa-notify-border-width, 2px);\n                \tborder-style: var(--vicowa-notify-border-style: solid);\n                }\n                \n                #box > div {\n\t                flex: 1 1 auto;\n\t                padding: 2px 1em;\n\t                display: flex;\n\t                justify-content: center;\n\t                align-items: center;\n                }\n                \n                #box.closing {\n                \topacity: 0;\n                }\n                #box.collapsing {\n                \ttransition-property: max-height, margin, border-width;\n                \ttransition-duration:  500ms;\n                \ttransition-timing-function: ease-out;\n                \tmax-height: 0;\n                \tmargin: 0;\n                \tborder-width: 0;\n                }\n                #close {\n                \tbackground: var(--vicowa-notify-close-button-background, transparent);\n                \tborder: var(--vicowa-notify-close-button-border, none);\n                \tfont-weight: var(--vicowa-notify-close-button-font-weight, bold);\n                \tpointer-events: all;\n                }\n                #box.level-info {\n                \tbackground: var(--vicowa-notify-info-background, black);\n                \tcolor: var(--vicowa-notify-info-color, white);\n                \tborder-color: var(--vicowa-notify-info-border-color, white);\n                }\n                #box.level-info #close {\n                \tcolor: var(--vicowa-notify-info-close-button-color, white);\n                }\n                #box.level-warning {\n                \tbackground: var(--vicowa-notify-warning-background, yellow);\n                \tcolor: var(--vicowa-notify-warning-color, black);\n                \tborder-color: var(--vicowa-notify-warning-border-color, black);\n                }\n                #box.level-warning #close {\n                \tcolor: var(--vicowa-notify-warning-close-button-color, black);\n                }\n                #box.level-error {\n                \tbackground: var(--vicowa-notify-error-background, red);\n                \tcolor: var(--vicowa-notify-error-color, white);\n                \tborder-color: var(--vicowa-notify-error-border-color, white);\n                }\n                #box.level-error #close {\n                \tcolor: var(--vicowa-notify-error-close-button-color, white);\n                }\n            </style>\n            <div id="box">\n          \t\t<div><vicowa-string id="message"></vicowa-string></div><button id="close">x</button>\n\t\t\t</div>\n        '}});
//# sourceMappingURL=vicowa-notify-box.js.map