@zanichelli/albe-web-components 19.2.3-RC1 → 19.2.3

package/dist/cjs/z-td.cjs.entry.js

@@ -1,59 +1,13 @@
 'use strict';
 
-var index = require('./index-2H1EJ2Tl.js');
-var index$1 = require('./index-wGaSHN1_.js');
+Object.defineProperty(exports, '__esModule', { value: true });
 
-const stylesCss = () => `:host{position:relative;display:flex;max-width:100%;align-items:center;padding:calc(var(--z-table--cells-padding, calc(var(--space-unit) * 2)));background-color:var(--color-surface01);gap:calc(var(--space-unit) * 2) var(--space-unit)}:host,*{box-sizing:border-box}:host([sticky]){position:sticky;z-index:1;top:0;left:0;box-shadow:8px 0 16px -8px var(--shadow-color-base)}:host([menu-open]){z-index:2}.cell--content{display:flex;width:100%;height:100%;align-items:center}:host([show-menu]) .cell--content{column-gap:var(--space-unit)}.cell--menu-container{margin-left:auto}:host(:not([show-menu])) .cell--menu-container{opacity:0;pointer-events:none}:host(:is([show-menu],[menu-open])) .cell--menu-container,:host([show-menu]) .cell--menu-container:focus-within{z-index:1;opacity:1;pointer-events:all}:host .cell-popover{z-index:100}@media (min-width: 768px) and (hover: hover){:host([show-menu="hover"]) .cell--menu-container{opacity:0;pointer-events:none}:host([show-menu="hover"]:hover) .cell--menu-container{z-index:1;opacity:1;pointer-events:all}}`;
+const index = require('./index-cb280932.js');
+require('./index-96af6326.js');
+require('./index-e30d0503.js');
 
-const ZTd = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-        this.colspanChange = index.createEvent(this, "colspanChange", 6);
-        /**
-         * Whether the cell should stick.
-         */
-        this.sticky = false;
-        /**
-         * Enables the contextual menu.
-         * Can be set to "hover" or "always" to show the button only on cell hover or always.
-         * Set a nullish value to hide the menu button.
-         */
-        this.showMenu = null;
-        /**
-         * Set the popover position, the default is "auto".
-         */
-        this.popoverPosition = index$1.PopoverPosition.AUTO;
-        /**
-         * Store the open state of the menu.
-         */
-        this.isMenuOpen = false;
-    }
-    updateColspan() {
-        if (this.colspan) {
-            this.host.style.gridColumn = `span ${this.colspan}`;
-        }
-        else {
-            this.host.style.removeProperty("grid-column");
-        }
-        this.colspanChange.emit(this.colspan || 1);
-    }
-    onMenuButtonClick(ev) {
-        ev.stopPropagation();
-        this.popoverEl.open = !this.popoverEl.open;
-    }
-    componentWillLoad() {
-        this.updateColspan();
-    }
-    render() {
-        return (index.h(index.Host, { key: '65102becbf97d8f480c9e9c140965963e1b829a3', role: "cell", "menu-open": this.isMenuOpen }, index.h("div", { key: 'a91b370f73c8684038a75db6483ec88dd8b3f4d6', class: "cell--content" }, index.h("slot", { key: '2a9451f11c23f2dae4047b360d8af92606ce3e76' }), this.showMenu && (index.h("div", { key: '0a4f91d75fce51604253ada3775f06ec9c230ce0', class: "cell--menu-container prevent-expand" }, index.h("z-button", { key: 'fe6623726d645f2796ff88246bd887b2e5ec9396', variant: index$1.ButtonVariant.TERTIARY, icon: "contextual-menu", size: index$1.ControlSize.X_SMALL, ref: (el) => (this.menuTrigger = el), onClick: this.onMenuButtonClick.bind(this) }), index.h("z-popover", { key: '1ce2729d0209e5218515c52f4425c3f02b05c1bd', class: "cell-popover", ref: (el) => (this.popoverEl = el), bindTo: this.menuTrigger, onOpenChange: (event) => (this.isMenuOpen = event.detail.open), position: this.popoverPosition }, index.h("slot", { key: 'b060d20d5e15380360f8bab9d502f85eb70a7995', name: "contextual-menu" })))))));
-    }
-    get host() { return index.getElement(this); }
-    static get watchers() { return {
-        "colspan": [{
-                "updateColspan": 0
-            }]
-    }; }
-};
-ZTd.style = stylesCss();
 
-exports.z_td = ZTd;
+
+exports.z_td = index.ZTd;
+
+//# sourceMappingURL=z-td.cjs.entry.js.map

package/dist/cjs/z-td.cjs.entry.js.map

@@ -0,0 +1 @@
+{"file":"z-td.entry.cjs.js","mappings":";;;;;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}

package/dist/cjs/z-tfoot.cjs.entry.js

@@ -1,21 +1,12 @@
 'use strict';
 
-var index = require('./index-2H1EJ2Tl.js');
+Object.defineProperty(exports, '__esModule', { value: true });
 
-const stylesCss = () => `:host{display:block;box-sizing:border-box;border-top:1px solid var(--color-surface03);border-bottom:1px solid var(--color-surface03)}:host([sticky]){position:sticky;z-index:1;bottom:0;background-color:var(--color-surface01)}`;
+const index = require('./index-012853a0.js');
+require('./index-96af6326.js');
 
-const ZTfoot = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-        /**
-         * If true, the footer will be stuck to the bottom of the table.
-         */
-        this.sticky = false;
-    }
-    render() {
-        return (index.h(index.Host, { key: '0ecae481f9b2e870d3f4d8898755d15e561154b7', role: "rowgroup", tabIndex: -1 }, index.h("slot", { key: '7d028233f9e6ff2bfdbcc5b00841db5eb5020643' })));
-    }
-};
-ZTfoot.style = stylesCss();
 
-exports.z_tfoot = ZTfoot;
+
+exports.z_tfoot = index.ZTfoot;
+
+//# sourceMappingURL=z-tfoot.cjs.entry.js.map

package/dist/cjs/z-tfoot.cjs.entry.js.map

@@ -0,0 +1 @@
+{"file":"z-tfoot.entry.cjs.js","mappings":";;;;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}

package/dist/cjs/z-th.cjs.entry.js

@@ -1,86 +1,13 @@
 'use strict';
 
-var index = require('./index-2H1EJ2Tl.js');
-var index$1 = require('./index-wGaSHN1_.js');
+Object.defineProperty(exports, '__esModule', { value: true });
 
-const stylesCss = () => `:host{position:relative;display:flex;max-width:100%;align-items:center;padding:calc(var(--z-table--cells-padding, calc(var(--space-unit) * 2)));background-color:var(--color-surface01);gap:calc(var(--space-unit) * 2) var(--space-unit)}:host,*{box-sizing:border-box}:host([sticky]){position:sticky;z-index:1;top:0;left:0;box-shadow:8px 0 16px -8px var(--shadow-color-base)}:host([menu-open]){z-index:2}.cell--content{display:flex;width:100%;height:100%;align-items:center}:host([show-menu]) .cell--content{column-gap:var(--space-unit)}.cell--menu-container{margin-left:auto}:host(:not([show-menu])) .cell--menu-container{opacity:0;pointer-events:none}:host(:is([show-menu],[menu-open])) .cell--menu-container,:host([show-menu]) .cell--menu-container:focus-within{z-index:1;opacity:1;pointer-events:all}:host .cell-popover{z-index:100}@media (min-width: 768px) and (hover: hover){:host([show-menu="hover"]) .cell--menu-container{opacity:0;pointer-events:none}:host([show-menu="hover"]:hover) .cell--menu-container{z-index:1;opacity:1;pointer-events:all}}:host{z-index:1;padding:0;background-color:var(--color-background);font-weight:var(--font-sb)}.cell--content{padding:var(--z-table--cells-padding, calc(var(--space-unit) * 2))}:host([show-sorting]) .cell--content{column-gap:var(--space-unit)}.z-th--sort-button{position:relative;padding:0;border:none;background-color:transparent;cursor:pointer;outline:none}.z-th--sort-button:focus,.z-th--sort-button:focus-visible{box-shadow:var(--shadow-focus-primary);opacity:1;outline:none;pointer-events:all}@media (min-width: 768px) and (hover: hover){:host([show-sorting="hover"]) .z-th--sort-button{opacity:0;pointer-events:none}:host([show-sorting="hover"]:hover) .z-th--sort-button,:host([show-sorting="hover"]) .z-th--sort-button:focus:focus-visible,:host([show-sorting="always"]) .z-th--sort-button,:host([sorted]) .z-th--sort-button{opacity:1;pointer-events:all}}:host([show-sorting="hover"]:hover) .z-th--sort-button::after,:host([show-sorting="hover"]) .z-th--sort-button:focus:focus-visible::after,:host([show-sorting="always"]) .z-th--sort-button::after,:host([sorted]) .z-th--sort-button::after{position:absolute;top:6px;left:6px;width:calc(100% - 12px);height:calc(100% - 10px);background-color:transparent;content:""}`;
+const index = require('./index-1d7a50cc.js');
+require('./index-96af6326.js');
+require('./index-e30d0503.js');
 
-const ZTh = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-        this.sort = index.createEvent(this, "sort", 7);
-        /**
-         * Enables the contextual menu.
-         * Can be set to "hover" or "always" to show the button only on cell hover or always.
-         * Set a nullish value to hide the menu button.
-         */
-        this.showMenu = null;
-        /**
-         * Enables the sorting button.
-         * Can be set to "hover" or "always" to show the button only on cell hover or always.
-         * Set a nullish value to hide the sort button.
-         */
-        this.showSorting = null;
-        /**
-         * Whether the cell should stick.
-         */
-        this.sticky = false;
-        /**
-         * Sorted state of the column.
-         */
-        this.sorted = false;
-        /**
-         * Set popover position.
-         */
-        this.popoverPosition = index$1.PopoverPosition.AUTO;
-        /**
-         * Store the open state of the menu.
-         */
-        this.isMenuOpen = false;
-    }
-    /**
-     * Get the value to set to the `aria-sort` attribute based on the current sort direction.
-     */
-    get ariaSortDirection() {
-        if (!this.sortDirection) {
-            return null;
-        }
-        return this.sortDirection === index$1.SortDirection.ASC ? "ascending" : "descending";
-    }
-    /**
-     * Handle the click on the sort button.
-     * @fires sort
-     */
-    handleSort() {
-        if (!this.sortDirection) {
-            this.sorted = false;
-            return;
-        }
-        this.sortDirection = this.sortDirection === index$1.SortDirection.ASC ? index$1.SortDirection.DESC : index$1.SortDirection.ASC;
-        this.sorted = true;
-        this.sort.emit({ sortDirection: this.sortDirection });
-    }
-    updateColspan() {
-        if (this.colspan) {
-            this.host.style.gridColumn = `span ${this.colspan}`;
-        }
-        else {
-            this.host.style.removeProperty("grid-column");
-        }
-    }
-    componentWillLoad() {
-        this.updateColspan();
-    }
-    render() {
-        return (index.h(index.Host, { key: '326c1c5968ebd22021f5bc88d3c98cd558c31783', role: "columnheader", "menu-open": this.isMenuOpen, "aria-sort": this.ariaSortDirection, sortable: this.showSorting }, index.h("div", { key: '935a692b283f76362fe5e3cc7cc2f8e38424f407', class: "cell--content" }, index.h("slot", { key: 'cce03a04640d1ee72e2e202f7526203136f4bb50' }), this.showSorting && (index.h("button", { key: 'c161a473f0b4e6d6b1a478ad0530c6d0938fc1a1', class: "z-th--sort-button", type: "button", onClick: this.handleSort.bind(this) }, index.h("z-icon", { key: '4b9b3aab3b0ce9f14c2a181860c834098077dee3', name: this.sortDirection === index$1.SortDirection.DESC ? "arrow-simple-up" : "arrow-simple-down", width: 14, height: 14 }))), this.showMenu && (index.h("div", { key: 'cd3b0e8a851c8a414229f4976b8a227d99981ce0', class: "cell--menu-container" }, index.h("z-button", { key: '3d37441174ff3ea540c0aec582bc91c7c644c818', variant: index$1.ButtonVariant.TERTIARY, icon: "contextual-menu", size: index$1.ControlSize.X_SMALL, ref: (el) => (this.menuTrigger = el), onClick: () => (this.popoverEl.open = !this.popoverEl.open) }), index.h("z-popover", { key: '59de83e276e82705588041660e7612080b6636e8', ref: (el) => (this.popoverEl = el), bindTo: this.menuTrigger, onOpenChange: (event) => (this.isMenuOpen = event.detail.open), position: this.popoverPosition }, index.h("slot", { key: 'c92e8e0a5c617251dc6741ff4d9cbe943f224111', name: "contextual-menu" })))))));
-    }
-    get host() { return index.getElement(this); }
-    static get watchers() { return {
-        "colspan": [{
-                "updateColspan": 0
-            }]
-    }; }
-};
-ZTh.style = stylesCss();
 
-exports.z_th = ZTh;
+
+exports.z_th = index.ZTh;
+
+//# sourceMappingURL=z-th.cjs.entry.js.map

package/dist/cjs/z-th.cjs.entry.js.map

@@ -0,0 +1 @@
+{"file":"z-th.entry.cjs.js","mappings":";;;;;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}

package/dist/cjs/z-thead.cjs.entry.js

@@ -1,26 +1,12 @@
 'use strict';
 
-var index = require('./index-2H1EJ2Tl.js');
+Object.defineProperty(exports, '__esModule', { value: true });
 
-const stylesCss = () => `:host{--z-table--cells-bottom-border-size:var(     --border-size-medium   );--z-table--cells-background:var(     --color-background   );display:block;box-sizing:border-box}:host([sticky]){position:sticky;z-index:2;top:0;box-shadow:0 2px 4px -2px var(--shadow-color-base)}:host(:focus-visible){box-shadow:none;outline:none}`;
+const index = require('./index-86a8a3a4.js');
+require('./index-96af6326.js');
 
-const ZThead = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-        /**
-         * If true, the header will be stuck to the top of the table.
-         */
-        this.sticky = false;
-        /**
-         * The element is focusable
-         */
-        this.isFocusable = false;
-    }
-    render() {
-        return (index.h(index.Host, { key: 'a41caa6571e3a2e4c0b46df9c28507d347011c52', role: "rowgroup", tabIndex: this.isFocusable ? 0 : -1 }, index.h("slot", { key: 'fbe9305e97ac906ce0296b871d65d33c75749bd1' })));
-    }
-    get host() { return index.getElement(this); }
-};
-ZThead.style = stylesCss();
 
-exports.z_thead = ZThead;
+
+exports.z_thead = index.ZThead;
+
+//# sourceMappingURL=z-thead.cjs.entry.js.map

package/dist/cjs/z-thead.cjs.entry.js.map

@@ -0,0 +1 @@
+{"file":"z-thead.entry.cjs.js","mappings":";;;;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}

package/dist/cjs/z-toast-notification-list.cjs.entry.js

@@ -1,18 +1,19 @@
 'use strict';
 
-var index = require('./index-2H1EJ2Tl.js');
-var index$1 = require('./index-wGaSHN1_.js');
+Object.defineProperty(exports, '__esModule', { value: true });
 
-const stylesCss = () => `:host{position:fixed;z-index:10000;display:flex;flex-flow:column nowrap;margin-top:calc(var(--space-unit) * 2);margin-bottom:calc(var(--space-unit) * 2);font-family:var(--font-family-sans);font-weight:var(--font-rg)}::slotted(z-toast-notification){width:100vw}::slotted(:not(:last-child)){margin-bottom:calc(var(--space-unit) * 1)}:host([position="bottom-centre"]),:host([position="bottom-right"]),:host([position="bottom-left"]){bottom:0;align-items:flex-end;justify-content:flex-end}:host([position="top-left"]),:host([position="top-right"]),:host([position="top-centre"]){top:0;align-items:flex-start;justify-content:flex-start}@media only screen and (min-width: 768px){:host{margin:calc(var(--space-unit) * 3)}:host([position="top-centre"]){top:0;left:50%;align-items:center;justify-content:flex-start;transform:translateX(-50%)}:host([position="top-left"]){top:0;left:0;align-items:flex-start;justify-content:flex-start}:host([position="top-right"]){top:0;right:0;align-items:flex-end;justify-content:flex-start}:host([position="bottom-centre"]){bottom:0;left:50%;align-items:center;justify-content:flex-end;transform:translateX(-50%)}:host([position="bottom-right"]){right:0;bottom:0;align-items:flex-end;justify-content:flex-end}:host([position="bottom-left"]){bottom:0;left:0;align-items:flex-start;justify-content:flex-end}::slotted(z-toast-notification){width:50vw}}@media only screen and (min-width: 1366px){:host{margin:calc(var(--space-unit) * 4)}::slotted(z-toast-notification){width:33vw}}`;
+const index = require('./index-96af6326.js');
+const index$1 = require('./index-e30d0503.js');
+
+const stylesCss = ":host{position:fixed;z-index:10000;display:flex;flex-flow:column nowrap;margin-top:calc(var(--space-unit) * 2);margin-bottom:calc(var(--space-unit) * 2);font-family:var(--font-family-sans);font-weight:var(--font-rg)}::slotted(z-toast-notification){width:100vw}::slotted(:not(:last-child)){margin-bottom:calc(var(--space-unit) * 1)}:host([position=\"bottom-centre\"]),:host([position=\"bottom-right\"]),:host([position=\"bottom-left\"]){bottom:0;align-items:flex-end;justify-content:flex-end}:host([position=\"top-left\"]),:host([position=\"top-right\"]),:host([position=\"top-centre\"]){top:0;align-items:flex-start;justify-content:flex-start}@media only screen and (min-width: 768px){:host{margin:calc(var(--space-unit) * 3)}:host([position=\"top-centre\"]){top:0;left:50%;align-items:center;justify-content:flex-start;transform:translateX(-50%)}:host([position=\"top-left\"]){top:0;left:0;align-items:flex-start;justify-content:flex-start}:host([position=\"top-right\"]){top:0;right:0;align-items:flex-end;justify-content:flex-start}:host([position=\"bottom-centre\"]){bottom:0;left:50%;align-items:center;justify-content:flex-end;transform:translateX(-50%)}:host([position=\"bottom-right\"]){right:0;bottom:0;align-items:flex-end;justify-content:flex-end}:host([position=\"bottom-left\"]){bottom:0;left:0;align-items:flex-start;justify-content:flex-end}::slotted(z-toast-notification){width:50vw}}@media only screen and (min-width: 1366px){:host{margin:calc(var(--space-unit) * 4)}::slotted(z-toast-notification){width:33vw}}";
+const ZToastNotificationListStyle0 = stylesCss;
 
 const ZToastNotificationList = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
-        /**Set the position of toast notification list - top-left, top-centre, top-right, bottom-left, bottom-centre, bottom-right */
+        this.notificationArray = [];
         this.position = index$1.ToastNotificationPosition.TOP_RIGHT;
-        /**Set the entry position of new notification in the list */
         this.newestontop = true;
-        this.notificationArray = [];
     }
     watchPropNewestontop(newValue) {
         this.hostElement.append(...this.notificationArray.reverse());
@@ -45,15 +46,15 @@ const ZToastNotificationList = class {
         }
     }
     render() {
-        return index.h("slot", { key: 'e039a28729e3d350f3db450429acd01ff47b5afe', name: "toasts" });
+        return index.h("slot", { key: '188e85fc561b690f63f4f66edbbf63a0ed434cdf', name: "toasts" });
     }
     get hostElement() { return index.getElement(this); }
     static get watchers() { return {
-        "newestontop": [{
-                "watchPropNewestontop": 0
-            }]
+        "newestontop": ["watchPropNewestontop"]
     }; }
 };
-ZToastNotificationList.style = stylesCss();
+ZToastNotificationList.style = ZToastNotificationListStyle0;
 
 exports.z_toast_notification_list = ZToastNotificationList;
+
+//# sourceMappingURL=z-toast-notification-list.cjs.entry.js.map

package/dist/cjs/z-toast-notification-list.cjs.entry.js.map

@@ -0,0 +1 @@
+{"file":"z-toast-notification-list.entry.cjs.js","mappings":";;;;;;;AAAA,MAAM,SAAS,GAAG,0/CAA0/C,CAAC;AAC7gD,qCAAe,SAAS;;MCOX,sBAAsB;;;QAWzB,sBAAiB,GAAc,EAAE,CAAC;wBANJA,iCAAyB,CAAC,SAAS;2BAIjD,IAAI;;IAK5B,oBAAoB,CAAC,QAAiB;QACpC,IAAI,CAAC,WAAW,CAAC,MAAM,CAAC,GAAG,IAAI,CAAC,iBAAiB,CAAC,OAAO,EAAE,CAAC,CAAC;QAC7D,IAAI,QAAQ,EAAE;YACZ,IAAI,CAAC,WAAW,CAAC,UAAU,CAAC,gBAAgB,CAAC,YAAY,EAAE,IAAI,CAAC,iBAAiB,CAAC,CAAC;SACpF;aAAM;YACL,IAAI,CAAC,WAAW,CAAC,UAAU,CAAC,mBAAmB,CAAC,YAAY,EAAE,IAAI,CAAC,iBAAiB,CAAC,CAAC;SACvF;KACF;IAED,iBAAiB;QACf,IAAI,IAAI,CAAC,WAAW,EAAE;YACpB,IAAI,CAAC,iBAAiB,EAAE,CAAC;SAC1B;KACF;IAEO,iBAAiB;QACvB,IAAI,CAAC,iBAAiB,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,QAAQ,CAAC,CAAC;QAC/D,IAAI,CAAC,WAAW,CAAC,MAAM,CAAC,GAAG,IAAI,CAAC,iBAAiB,CAAC,OAAO,EAAE,CAAC,CAAC;QAC7D,IAAI,CAAC,WAAW,CAAC,UAAU,CAAC,gBAAgB,CAAC,YAAY,EAAE,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC;KAC/F;IAEO,iBAAiB;QACvB,MAAM,UAAU,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,QAAQ,CAAC,CAAC,MAAM,CAAC,CAAC,IAAI,KAAK,CAAC,IAAI,CAAC,iBAAiB,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC,CAAC;QAClH,IAAI,UAAU,EAAE;YACd,UAAU,CAAC,OAAO,CAAC,CAAC,IAAI;gBACtB,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;gBAClC,MAAM,OAAO,GAAG,IAAI,CAAC;gBACrB,IAAI,CAAC,MAAM,EAAE,CAAC;gBACd,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC;aACnC,CAAC,CAAC;SACJ;KACF;IAED,MAAM;QACJ,OAAOC,mEAAM,IAAI,EAAC,QAAQ,GAAQ,CAAC;KACpC;;;;;;;;;;","names":["ToastNotificationPosition","h"],"sources":["src/components/z-toast-notification-list/styles.css?tag=z-toast-notification-list&encapsulation=shadow","src/components/z-toast-notification-list/index.tsx"],"sourcesContent":[":host {\n  position: fixed;\n  z-index: 10000;\n  display: flex;\n  flex-flow: column nowrap;\n  margin-top: calc(var(--space-unit) * 2);\n  margin-bottom: calc(var(--space-unit) * 2);\n  font-family: var(--font-family-sans);\n  font-weight: var(--font-rg);\n}\n\n::slotted(z-toast-notification) {\n  width: 100vw;\n}\n\n::slotted(:not(:last-child)) {\n  margin-bottom: calc(var(--space-unit) * 1);\n}\n\n:host([position=\"bottom-centre\"]),\n:host([position=\"bottom-right\"]),\n:host([position=\"bottom-left\"]) {\n  bottom: 0;\n  align-items: flex-end;\n  justify-content: flex-end;\n}\n\n:host([position=\"top-left\"]),\n:host([position=\"top-right\"]),\n:host([position=\"top-centre\"]) {\n  top: 0;\n  align-items: flex-start;\n  justify-content: flex-start;\n}\n\n/* Tablet breakpoint */\n@media only screen and (min-width: 768px) {\n  :host {\n    margin: calc(var(--space-unit) * 3);\n  }\n\n  :host([position=\"top-centre\"]) {\n    top: 0;\n    left: 50%;\n    align-items: center;\n    justify-content: flex-start;\n    transform: translateX(-50%);\n  }\n\n  :host([position=\"top-left\"]) {\n    top: 0;\n    left: 0;\n    align-items: flex-start;\n    justify-content: flex-start;\n  }\n\n  :host([position=\"top-right\"]) {\n    top: 0;\n    right: 0;\n    align-items: flex-end;\n    justify-content: flex-start;\n  }\n\n  :host([position=\"bottom-centre\"]) {\n    bottom: 0;\n    left: 50%;\n    align-items: center;\n    justify-content: flex-end;\n    transform: translateX(-50%);\n  }\n\n  :host([position=\"bottom-right\"]) {\n    right: 0;\n    bottom: 0;\n    align-items: flex-end;\n    justify-content: flex-end;\n  }\n\n  :host([position=\"bottom-left\"]) {\n    bottom: 0;\n    left: 0;\n    align-items: flex-start;\n    justify-content: flex-end;\n  }\n\n  ::slotted(z-toast-notification) {\n    width: 50vw;\n  }\n}\n\n/* Wide breakpoint */\n@media only screen and (min-width: 1366px) {\n  :host {\n    margin: calc(var(--space-unit) * 4);\n  }\n\n  ::slotted(z-toast-notification) {\n    width: 33vw;\n  }\n}\n","import {Component, Element, Prop, Watch, h} from \"@stencil/core\";\nimport {ToastNotificationPosition} from \"../../beans\";\n\n@Component({\n  tag: \"z-toast-notification-list\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZToastNotificationList {\n  @Element() hostElement: HTMLZToastNotificationListElement;\n\n  /**Set the position of toast notification list - top-left, top-centre, top-right, bottom-left, bottom-centre, bottom-right */\n  @Prop({reflect: true})\n  position: ToastNotificationPosition = ToastNotificationPosition.TOP_RIGHT;\n\n  /**Set the entry position of new notification in the list */\n  @Prop()\n  newestontop?: boolean = true;\n\n  private notificationArray: Element[] = [];\n\n  @Watch(\"newestontop\")\n  watchPropNewestontop(newValue: boolean): void {\n    this.hostElement.append(...this.notificationArray.reverse());\n    if (newValue) {\n      this.hostElement.shadowRoot.addEventListener(\"slotchange\", this.slotChangeHandler);\n    } else {\n      this.hostElement.shadowRoot.removeEventListener(\"slotchange\", this.slotChangeHandler);\n    }\n  }\n\n  componentWillLoad(): void {\n    if (this.newestontop) {\n      this.handleNewestOnTop();\n    }\n  }\n\n  private handleNewestOnTop(): void {\n    this.notificationArray = Array.from(this.hostElement.children);\n    this.hostElement.append(...this.notificationArray.reverse());\n    this.hostElement.shadowRoot.addEventListener(\"slotchange\", this.slotChangeHandler.bind(this));\n  }\n\n  private slotChangeHandler(): void {\n    const difference = Array.from(this.hostElement.children).filter((elem) => !this.notificationArray.includes(elem));\n    if (difference) {\n      difference.forEach((elem) => {\n        this.notificationArray.push(elem);\n        const newElem = elem;\n        elem.remove();\n        this.hostElement.prepend(newElem);\n      });\n    }\n  }\n\n  render(): HTMLSlotElement {\n    return <slot name=\"toasts\"></slot>;\n  }\n}\n"],"version":3}