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

Various web components

import{WebComponentBaseClass as t}from"/third_party/web-component-base-class/dist/web-component-base-class.js";import"../vicowa-string/vicowa-string.js";import"../vicowa-button/vicowa-button.js";import{DEFAULT_LEVELS as e}from"./vicowa-notify-box.js";export const DEFAULT_LOCATIONS=Object.freeze({START:"START",CENTER:"CENTER",END:"END"});window.customElements.define("vicowa-notify",class VicowaNotify extends t{constructor(){super()}static get properties(){return{locationX:{type:String,value:DEFAULT_LOCATIONS.CENTER,reflectToAttribute:!0,observer:t=>t.#t()},locationY:{type:String,value:DEFAULT_LOCATIONS.END,reflectToAttribute:!0,observer:t=>t.#t()},alignControl:{type:Object,value:void 0,reflectToAttribute:!1,observer:t=>t.#t()}}}info(t){this.#e({duration:2e3,..."string"==typeof t?{message:t}:t},e.INFO)}warning(t){this.#e({duration:3500,..."string"==typeof t?{message:t}:t},e.WARNING)}error(t){this.#e({duration:5e3,..."string"==typeof t?{message:t}:t},e.ERROR)}#e(t,e){"string"==typeof t&&(t={message:t}),t={level:e,...t};const n=document.createElement("vicowa-notify-box");n.message=t.message,n.level=t.level,n.duration=t.duration,this.$.container.insertBefore(n,this.$.container.firstChild)}#t(){if(this.alignControl instanceof HTMLElement){const t=this.alignControl.getBoundingClientRect();this.$.container.style.left=`${t.left}px`,this.$.container.style.top=`${t.top+t.height}px`,this.$.container.style.position="absolute"}else this.$.container.style.left="",this.$.container.style.top="",this.$.container.style.position="relative",Object.values(DEFAULT_LOCATIONS).includes(this.locationX)||(this.$.container.style.left=`${this.locationX}px`,this.$.container.style.position="absolute"),Object.values(DEFAULT_LOCATIONS).includes(this.locationY)||(this.$.container.style.top=`${this.locationY}px`,this.$.container.style.position="absolute")}static get template(){return'\n            <style>\n                #main-box {\n                \tdisplay: flex;\n                \tposition: fixed;\n                \tz-index: var(--vicowa-notify-z-index, 1000);\n                \tleft: 0;\n                \ttop: 0;\n                \tbottom: 0;\n                \tright: 0;\n                \tpadding: var(--vicowa-notify-padding, 1em);\n                \tpointer-events: none;\n                }\n\n                #container {\n                \tdisplay: flex;\n                \tflex-direction: column;\n                \talign-items: center;\n                }\n                \n\t\t\t\t:host([location-X="BEGIN"]) #main-box { justify-content: flex-start; }\n\t\t\t\t:host([location-X="CENTER"]) #main-box { justify-content: center; }\n\t\t\t\t:host([location-X="END"]) #main-box { justify-content: flex-end; }\n\t\t\t\t:host([location-Y="BEGIN"]) #main-box { align-items: flex-start; }\n\t\t\t\t:host([location-Y="CENTER"]) #main-box { align-items: center; }\n\t\t\t\t:host([location-Y="END"]) #main-box { align-items: flex-end; }\n                \n            </style>\n            <div id="main-box">\n            \t<div id="container">\n            </div>\n\t\t\t</div>\n        '}});
//# sourceMappingURL=vicowa-notify.js.map