@zanichelli/albe-web-components 19.3.0-RC4 → 19.3.0-RC6

package/dist/components/z-tfoot.js

@@ -1,39 +1 @@
-import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-
-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 ZTfootStyle0 = stylesCss;
-
-const ZTfoot$1 = /*@__PURE__*/ proxyCustomElement(class ZTfoot extends HTMLElement {
-    constructor() {
-        super();
-        this.__registerHost();
-        this.__attachShadow();
-        this.sticky = false;
-    }
-    render() {
-        return (h(Host, { key: '0c62e2be78670a3ca9b2b82ab61c79f9cbd8937d', role: "rowgroup", tabIndex: -1 }, h("slot", { key: '1f5e6f45de8205da130383070df5082b36be9d87' })));
-    }
-    static get style() { return ZTfootStyle0; }
-}, [1, "z-tfoot", {
-        "sticky": [516]
-    }]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["z-tfoot"];
-    components.forEach(tagName => { switch (tagName) {
-        case "z-tfoot":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, ZTfoot$1);
-            }
-            break;
-    } });
-}
-
-const ZTfoot = ZTfoot$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { ZTfoot, defineCustomElement };
-
-//# sourceMappingURL=z-tfoot.js.map
+import{proxyCustomElement as t,HTMLElement as e,h as o,Host as r,transformTag as l}from"@stencil/core/internal/client";const a=t(class extends e{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow(),this.sticky=!1}render(){return o(r,{key:"cdd4d2841caada167b8818ff534744445e0d8979",role:"rowgroup",tabIndex:-1},o("slot",{key:"5cf911121ea09dcc13744e9d1d730be92f20cbf4"}))}static get style(){return":host{display:block;box-sizing:border-box;margin-top:-1px}:host([sticky]){position:sticky;z-index:1;bottom:0;background-color:var(--color-surface01)}z-table,table.z-table{background-color:var(--color-surface01);--z-table--cells-padding:calc(var(--space-unit) * 2)}table.z-table{border-collapse:collapse}z-thead,table.z-table thead{background-color:var(--color-background);--z-table--cells-bottom-border-size:var(--border-size-medium)}z-tfoot,table.z-table tfoot{border-top:var(--border-size-medium) solid var(--color-surface03);border-bottom:var(--border-size-medium) solid var(--color-surface03)}z-tfoot z-tr,table.z-table tfoot tr{border-bottom:calc(var(--z-table--cells-bottom-border-size)) solid var(--color-surface03) !important}z-tr,table.z-table tr{border-bottom:var(--z-table--cells-bottom-border-size, var(--border-size-small)) solid var(--color-surface03)}z-td,z-th,table.z-table td,table.z-table th{padding:var(--z-table--cells-padding, calc(var(--space-unit) * 2));text-align:left}z-th:not(:first-child),z-td:not(:first-child),table.z-table th:not(:first-child),table.z-table td:not(:first-child){border-left:var(--z-table--cell-left-border, none)}z-table[bordered],table.z-table.z-table-bordered{--z-table--cell-left-border:1px solid var(--color-surface03)}table.z-table-hover tr:hover>td,table.z-table-hover tr:hover>th{background-color:var(--color-surface02);box-shadow:inset 0 var(--border-size-small) 0 var(--color-surface04),     inset 0 calc(var(--border-size-small) * -1) 0 var(--color-surface04)}"}},[257,"z-tfoot",{sticky:[516]}]),b=a,c=function(){"undefined"!=typeof customElements&&["z-tfoot"].forEach((t=>{"z-tfoot"===t&&(customElements.get(l(t))||customElements.define(l(t),a))}))};export{b as ZTfoot,c as defineCustomElement}

package/dist/components/z-th.js

@@ -1,112 +1 @@
-import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { P as PopoverPosition, S as SortDirection, B as ButtonVariant, e as ControlSize } from './index2.js';
-import { d as defineCustomElement$4 } from './index5.js';
-import { d as defineCustomElement$3 } from './index10.js';
-import { d as defineCustomElement$2 } from './index24.js';
-
-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 ZThStyle0 = stylesCss;
-
-const ZTh$1 = /*@__PURE__*/ proxyCustomElement(class ZTh extends HTMLElement {
-    constructor() {
-        super();
-        this.__registerHost();
-        this.__attachShadow();
-        this.sort = createEvent(this, "sort", 7);
-        this.colspan = undefined;
-        this.showMenu = null;
-        this.showSorting = null;
-        this.sticky = false;
-        this.sortDirection = undefined;
-        this.sorted = false;
-        this.popoverPosition = PopoverPosition.AUTO;
-        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 === 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 === SortDirection.ASC ? SortDirection.DESC : 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 (h(Host, { key: '411a78aacd4b76ea9180828a7567aaaa92f9a3fa', role: "columnheader", "menu-open": this.isMenuOpen, "aria-sort": this.ariaSortDirection, sortable: this.showSorting }, h("div", { key: 'a4d93cc27f9e8e69cffac93180ac54c9a6f79a21', class: "cell--content" }, h("slot", { key: 'b205cd6628dbfd09638a23ea6ad4bbe577303a87' }), this.showSorting && (h("button", { key: 'e28f86801a946cd89a30c9b8e289a653916299da', class: "z-th--sort-button", type: "button", onClick: this.handleSort.bind(this) }, h("z-icon", { key: 'fbbb4bb4ff4cfba7958afbf05edad06b5e8c725c', name: this.sortDirection === SortDirection.DESC ? "arrow-simple-up" : "arrow-simple-down", width: 14, height: 14 }))), this.showMenu && (h("div", { key: '0d288653fbaef390090c540d4c3ac707d30a05c2', class: "cell--menu-container" }, h("z-button", { key: 'ff413fe7178f5d072fdee95f42ca37f06b6b7a92', variant: ButtonVariant.TERTIARY, icon: "contextual-menu", size: ControlSize.X_SMALL, ref: (el) => (this.menuTrigger = el), onClick: () => (this.popoverEl.open = !this.popoverEl.open) }), h("z-popover", { key: '675231832d5e2adf277f470b476ca7e4d5579272', ref: (el) => (this.popoverEl = el), bindTo: this.menuTrigger, onOpenChange: (event) => (this.isMenuOpen = event.detail.open), position: this.popoverPosition }, h("slot", { key: '6f3dba38c66701f7bf169a35b6793a09388c6bb2', name: "contextual-menu" })))))));
-    }
-    get host() { return this; }
-    static get watchers() { return {
-        "colspan": ["updateColspan"]
-    }; }
-    static get style() { return ZThStyle0; }
-}, [1, "z-th", {
-        "colspan": [2],
-        "showMenu": [513, "show-menu"],
-        "showSorting": [513, "show-sorting"],
-        "sticky": [516],
-        "sortDirection": [1025, "sort-direction"],
-        "sorted": [1540],
-        "popoverPosition": [1, "popover-position"],
-        "isMenuOpen": [32]
-    }, undefined, {
-        "colspan": ["updateColspan"]
-    }]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["z-th", "z-button", "z-icon", "z-popover"];
-    components.forEach(tagName => { switch (tagName) {
-        case "z-th":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, ZTh$1);
-            }
-            break;
-        case "z-button":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$4();
-            }
-            break;
-        case "z-icon":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$3();
-            }
-            break;
-        case "z-popover":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$2();
-            }
-            break;
-    } });
-}
-
-const ZTh = ZTh$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { ZTh, defineCustomElement };
-
-//# sourceMappingURL=z-th.js.map
+import{proxyCustomElement as t,HTMLElement as o,createEvent as e,h as s,Host as r,transformTag as a}from"@stencil/core/internal/client";import{P as n,S as i,e as l,B as c}from"./index2.js";import{d as h}from"./index5.js";import{d}from"./index3.js";import{d as b}from"./index17.js";const u=t(class extends o{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow(),this.sort=e(this,"sort",7),this.showMenu=null,this.showSorting=null,this.sticky=!1,this.sorted=!1,this.popoverPosition=n.AUTO,this.isMenuOpen=!1}get ariaSortDirection(){return this.sortDirection?this.sortDirection===i.ASC?"ascending":"descending":null}handleSort(){this.sortDirection?(this.sortDirection=this.sortDirection===i.ASC?i.DESC:i.ASC,this.sorted=!0,this.sort.emit({sortDirection:this.sortDirection})):this.sorted=!1}updateColspan(){this.colspan?this.host.style.gridColumn="span "+this.colspan:this.host.style.removeProperty("grid-column")}componentWillLoad(){this.updateColspan()}render(){return s(r,{key:"aef115e04b8a8c37c749a568bcb24250e062008b",role:"columnheader","menu-open":this.isMenuOpen,"aria-sort":this.ariaSortDirection,sortable:this.showSorting},s("div",{key:"5b78767c1d65440363c06d5e4b7137598e74d8b4",class:"cell--content"},s("slot",{key:"340210db9182785b89ed01a26d6dc60558aa9f4f"}),this.showSorting&&s("button",{key:"2c6f42cbf3a2c1d37af04182731503accfe67362",class:"z-th--sort-button",type:"button",onClick:this.handleSort.bind(this)},s("z-icon",{key:"ad73a2838da75772e84e431c36256e77bdf39157",name:this.sortDirection===i.DESC?"arrow-simple-up":"arrow-simple-down",width:14,height:14})),this.showMenu&&s("div",{key:"d4c23d3a5b05ccea94a03efa6b10efc65e4a0cf4",class:"cell--menu-container"},s("z-button",{key:"fb0930c50cd3ac363e764ded3d7be227678a5d2d",variant:c.TERTIARY,icon:"contextual-menu",size:l.X_SMALL,ref:t=>this.menuTrigger=t,onClick:()=>this.popoverEl.open=!this.popoverEl.open}),s("z-popover",{key:"b720485c31c2070d77e33bceacd5be582516ae38",ref:t=>this.popoverEl=t,bindTo:this.menuTrigger,onOpenChange:t=>this.isMenuOpen=t.detail.open,position:this.popoverPosition},s("slot",{key:"7372fa0d1ca9773ebbf8b6c8ec581133967aafdf",name:"contextual-menu"})))))}get host(){return this}static get watchers(){return{colspan:[{updateColspan:0}]}}static get style(){return':host{position:relative;display:flex;max-width:100%;align-items:center;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)}: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:""}z-table,table.z-table{background-color:var(--color-surface01);--z-table--cells-padding:calc(var(--space-unit) * 2)}table.z-table{border-collapse:collapse}z-thead,table.z-table thead{background-color:var(--color-background);--z-table--cells-bottom-border-size:var(--border-size-medium)}z-tfoot,table.z-table tfoot{border-top:var(--border-size-medium) solid var(--color-surface03);border-bottom:var(--border-size-medium) solid var(--color-surface03)}z-tfoot z-tr,table.z-table tfoot tr{border-bottom:calc(var(--z-table--cells-bottom-border-size)) solid var(--color-surface03) !important}z-tr,table.z-table tr{border-bottom:var(--z-table--cells-bottom-border-size, var(--border-size-small)) solid var(--color-surface03)}z-td,z-th,table.z-table td,table.z-table th{padding:var(--z-table--cells-padding, calc(var(--space-unit) * 2));text-align:left}z-th:not(:first-child),z-td:not(:first-child),table.z-table th:not(:first-child),table.z-table td:not(:first-child){border-left:var(--z-table--cell-left-border, none)}z-table[bordered],table.z-table.z-table-bordered{--z-table--cell-left-border:1px solid var(--color-surface03)}table.z-table-hover tr:hover>td,table.z-table-hover tr:hover>th{background-color:var(--color-surface02);box-shadow:inset 0 var(--border-size-small) 0 var(--color-surface04),     inset 0 calc(var(--border-size-small) * -1) 0 var(--color-surface04)}'}},[257,"z-th",{colspan:[2],showMenu:[513,"show-menu"],showSorting:[513,"show-sorting"],sticky:[516],sortDirection:[1025,"sort-direction"],sorted:[1540],popoverPosition:[1,"popover-position"],isMenuOpen:[32]},void 0,{colspan:[{updateColspan:0}]}]),p=u,m=function(){"undefined"!=typeof customElements&&["z-th","z-button","z-icon","z-popover"].forEach((t=>{switch(t){case"z-th":customElements.get(a(t))||customElements.define(a(t),u);break;case"z-button":customElements.get(a(t))||h();break;case"z-icon":customElements.get(a(t))||d();break;case"z-popover":customElements.get(a(t))||b()}}))};export{p as ZTh,m as defineCustomElement}

package/dist/components/z-thead.js

@@ -1,42 +1 @@
-import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-
-const stylesCss = ":host{--z-table--cells-bottom-border-size:var(\n    --border-size-medium\n  );--z-table--cells-background:var(\n    --color-background\n  );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 ZTheadStyle0 = stylesCss;
-
-const ZThead$1 = /*@__PURE__*/ proxyCustomElement(class ZThead extends HTMLElement {
-    constructor() {
-        super();
-        this.__registerHost();
-        this.__attachShadow();
-        this.sticky = false;
-        this.isFocusable = false;
-    }
-    render() {
-        return (h(Host, { key: 'd1b3529f75bb0ab8fcd19a309052fc2f19f5bbb2', role: "rowgroup", tabIndex: this.isFocusable ? 0 : -1 }, h("slot", { key: '5e767d3b959c2d295e4987843451dbeb5e5fca85' })));
-    }
-    get host() { return this; }
-    static get style() { return ZTheadStyle0; }
-}, [1, "z-thead", {
-        "sticky": [516],
-        "isFocusable": [516, "is-focusable"]
-    }]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["z-thead"];
-    components.forEach(tagName => { switch (tagName) {
-        case "z-thead":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, ZThead$1);
-            }
-            break;
-    } });
-}
-
-const ZThead = ZThead$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { ZThead, defineCustomElement };
-
-//# sourceMappingURL=z-thead.js.map
+import{proxyCustomElement as e,HTMLElement as t,h as o,Host as r,transformTag as a}from"@stencil/core/internal/client";const l=e(class extends t{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.sticky=!1,this.isFocusable=!1}render(){return o(r,{key:"0e43e10373817b9ee5e4f1574fb0d46b232c510d",role:"rowgroup",tabIndex:this.isFocusable?0:-1},o("slot",{key:"aefd2ed2698efb7deabd11284f3d6cae95800e50"}))}get host(){return this}static get style(){return":host{--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}z-table,table.z-table{background-color:var(--color-surface01);--z-table--cells-padding:calc(var(--space-unit) * 2)}table.z-table{border-collapse:collapse}z-thead,table.z-table thead{background-color:var(--color-background);--z-table--cells-bottom-border-size:var(--border-size-medium)}z-tfoot,table.z-table tfoot{border-top:var(--border-size-medium) solid var(--color-surface03);border-bottom:var(--border-size-medium) solid var(--color-surface03)}z-tfoot z-tr,table.z-table tfoot tr{border-bottom:calc(var(--z-table--cells-bottom-border-size)) solid var(--color-surface03) !important}z-tr,table.z-table tr{border-bottom:var(--z-table--cells-bottom-border-size, var(--border-size-small)) solid var(--color-surface03)}z-td,z-th,table.z-table td,table.z-table th{padding:var(--z-table--cells-padding, calc(var(--space-unit) * 2));text-align:left}z-th:not(:first-child),z-td:not(:first-child),table.z-table th:not(:first-child),table.z-table td:not(:first-child){border-left:var(--z-table--cell-left-border, none)}z-table[bordered],table.z-table.z-table-bordered{--z-table--cell-left-border:1px solid var(--color-surface03)}table.z-table-hover tr:hover>td,table.z-table-hover tr:hover>th{background-color:var(--color-surface02);box-shadow:inset 0 var(--border-size-small) 0 var(--color-surface04),     inset 0 calc(var(--border-size-small) * -1) 0 var(--color-surface04)}"}},[257,"z-thead",{sticky:[516],isFocusable:[516,"is-focusable"]}]),b=l,s=function(){"undefined"!=typeof customElements&&["z-thead"].forEach((e=>{"z-thead"===e&&(customElements.get(a(e))||customElements.define(a(e),l))}))};export{b as ZThead,s as defineCustomElement}

package/dist/components/z-toast-notification-list.js

@@ -1,79 +1 @@
-import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
-import { s as ToastNotificationPosition } from './index2.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$1 = /*@__PURE__*/ proxyCustomElement(class ZToastNotificationList extends HTMLElement {
-    constructor() {
-        super();
-        this.__registerHost();
-        this.__attachShadow();
-        this.notificationArray = [];
-        this.position = ToastNotificationPosition.TOP_RIGHT;
-        this.newestontop = true;
-    }
-    watchPropNewestontop(newValue) {
-        this.hostElement.append(...this.notificationArray.reverse());
-        if (newValue) {
-            this.hostElement.shadowRoot.addEventListener("slotchange", this.slotChangeHandler);
-        }
-        else {
-            this.hostElement.shadowRoot.removeEventListener("slotchange", this.slotChangeHandler);
-        }
-    }
-    componentWillLoad() {
-        if (this.newestontop) {
-            this.handleNewestOnTop();
-        }
-    }
-    handleNewestOnTop() {
-        this.notificationArray = Array.from(this.hostElement.children);
-        this.hostElement.append(...this.notificationArray.reverse());
-        this.hostElement.shadowRoot.addEventListener("slotchange", this.slotChangeHandler.bind(this));
-    }
-    slotChangeHandler() {
-        const difference = Array.from(this.hostElement.children).filter((elem) => !this.notificationArray.includes(elem));
-        if (difference) {
-            difference.forEach((elem) => {
-                this.notificationArray.push(elem);
-                const newElem = elem;
-                elem.remove();
-                this.hostElement.prepend(newElem);
-            });
-        }
-    }
-    render() {
-        return h("slot", { key: 'b05c58feada71e3eb2fcfcbd5a5f465b91c39ac3', name: "toasts" });
-    }
-    get hostElement() { return this; }
-    static get watchers() { return {
-        "newestontop": ["watchPropNewestontop"]
-    }; }
-    static get style() { return ZToastNotificationListStyle0; }
-}, [1, "z-toast-notification-list", {
-        "position": [513],
-        "newestontop": [4]
-    }, undefined, {
-        "newestontop": ["watchPropNewestontop"]
-    }]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["z-toast-notification-list"];
-    components.forEach(tagName => { switch (tagName) {
-        case "z-toast-notification-list":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, ZToastNotificationList$1);
-            }
-            break;
-    } });
-}
-
-const ZToastNotificationList = ZToastNotificationList$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { ZToastNotificationList, defineCustomElement };
-
-//# sourceMappingURL=z-toast-notification-list.js.map
+import{proxyCustomElement as t,HTMLElement as o,h as i,transformTag as s}from"@stencil/core/internal/client";import{s as n}from"./index2.js";const e=t(class extends o{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow(),this.position=n.TOP_RIGHT,this.newestontop=!0,this.notificationArray=[]}watchPropNewestontop(t){this.hostElement.append(...this.notificationArray.reverse()),t?this.hostElement.shadowRoot.addEventListener("slotchange",this.slotChangeHandler):this.hostElement.shadowRoot.removeEventListener("slotchange",this.slotChangeHandler)}componentWillLoad(){this.newestontop&&this.handleNewestOnTop()}handleNewestOnTop(){this.notificationArray=Array.from(this.hostElement.children),this.hostElement.append(...this.notificationArray.reverse()),this.hostElement.shadowRoot.addEventListener("slotchange",this.slotChangeHandler.bind(this))}slotChangeHandler(){const t=Array.from(this.hostElement.children).filter((t=>!this.notificationArray.includes(t)));t&&t.forEach((t=>{this.notificationArray.push(t);const o=t;t.remove(),this.hostElement.prepend(o)}))}render(){return i("slot",{key:"0566f651d80145e7781e792714aab742850714f7",name:"toasts"})}get hostElement(){return this}static get watchers(){return{newestontop:[{watchPropNewestontop:0}]}}static get style(){return':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}}'}},[257,"z-toast-notification-list",{position:[513],newestontop:[4]},void 0,{newestontop:[{watchPropNewestontop:0}]}]),a=e,l=function(){"undefined"!=typeof customElements&&["z-toast-notification-list"].forEach((t=>{"z-toast-notification-list"===t&&(customElements.get(s(t))||customElements.define(s(t),e))}))};export{a as ZToastNotificationList,l as defineCustomElement}