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

package/dist/components/z-table.js

@@ -1 +1,68 @@
-import{proxyCustomElement as e,HTMLElement as t,h as a,Host as s,transformTag as i}from"@stencil/core/internal/client";import"./index2.js";import"./breakpoints.js";import"./iconset.js";import"./index17.js";const o=e(class extends t{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.bordered=!1,this.expandable=!1}updateExpandable(){this.expandable=this.host.querySelectorAll("z-tr[expandable]").length>0}componentWillLoad(){this.expandableMutationObserver=new MutationObserver((()=>{this.updateExpandable()})),this.expandableMutationObserver.observe(this.host,{childList:!0,subtree:!0,attributes:!0,attributeFilter:["expandable"],attributeOldValue:!1})}disconnectedCallback(){var e;null===(e=this.expandableMutationObserver)||void 0===e||e.disconnect()}render(){return a(s,{key:"19ac617eed1f9fc7c962e5f34e30c1c0feb0fa87",expandable:this.expandable},a("div",{key:"648951c6bb94c6cc149f593ca42a50eafa287337",class:"table",role:"table"},a("slot",{key:"08fb16a4c3ee50be9634833b2227593ba8651c01"})))}get host(){return this}static get style(){return":host{--z-table--cells-padding:calc(var(--space-unit) * 2);position:relative;display:block;overflow:auto;min-width:max-content;max-width:100%;box-sizing:border-box;padding:var(--space-unit);background-color:var(--color-surface01)}:host([expandable]){--z-table--expand-button-size:40px}:host([bordered]){--z-table--cell-left-border:1px solid var(--color-surface03)}"}},[257,"z-table",{bordered:[516],expandable:[32]}]),r=o,l=function(){"undefined"!=typeof customElements&&["z-table"].forEach((e=>{"z-table"===e&&(customElements.get(i(e))||customElements.define(i(e),o))}))};export{r as ZTable,l as defineCustomElement}
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import './index2.js';
+import './breakpoints.js';
+import './iconset.js';
+import './index24.js';
+
+const stylesCss = ":host{--z-table--cells-padding:calc(var(--space-unit) * 2);position:relative;display:block;overflow:auto;min-width:max-content;max-width:100%;box-sizing:border-box;padding:var(--space-unit);background-color:var(--color-surface01)}:host([expandable]){--z-table--expand-button-size:40px}:host([bordered]){--z-table--cell-left-border:1px solid var(--color-surface03)}";
+const ZTableStyle0 = stylesCss;
+
+const ZTable$1 = /*@__PURE__*/ proxyCustomElement(class ZTable extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.bordered = false;
+        this.expandable = false;
+    }
+    updateExpandable() {
+        this.expandable = this.host.querySelectorAll("z-tr[expandable]").length > 0;
+    }
+    /**
+     * Setup the table creating a mutation observer for the expandable attribute.
+     */
+    componentWillLoad() {
+        this.expandableMutationObserver = new MutationObserver(() => {
+            this.updateExpandable();
+        });
+        this.expandableMutationObserver.observe(this.host, {
+            childList: true,
+            subtree: true,
+            attributes: true,
+            attributeFilter: ["expandable"],
+            attributeOldValue: false,
+        });
+    }
+    disconnectedCallback() {
+        var _a;
+        (_a = this.expandableMutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+    }
+    render() {
+        return (h(Host, { key: 'a37bf2d018aedf198e11248d9952c062deddc545', expandable: this.expandable }, h("div", { key: 'a769b79ee55eb5425bb6c72059437f051967c3b3', class: "table", role: "table" }, h("slot", { key: '0ba782144cc2f139484954747d530d6f1c606a0d' }))));
+    }
+    get host() { return this; }
+    static get style() { return ZTableStyle0; }
+}, [1, "z-table", {
+        "bordered": [516],
+        "expandable": [32]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["z-table"];
+    components.forEach(tagName => { switch (tagName) {
+        case "z-table":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, ZTable$1);
+            }
+            break;
+    } });
+}
+
+const ZTable = ZTable$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { ZTable, defineCustomElement };
+
+//# sourceMappingURL=z-table.js.map

package/dist/components/z-table.js.map

@@ -0,0 +1 @@
+{"file":"z-table.js","mappings":";;;;;;AAAA,MAAM,SAAS,GAAG,8WAA8W,CAAC;AACjY,qBAAe,SAAS;;MCeXA,QAAM;;;;;wBAON,KAAK;0BAMH,KAAK;;IAEV,gBAAgB;QACtB,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAC,kBAAkB,CAAC,CAAC,MAAM,GAAG,CAAC,CAAC;KAC7E;;;;IAOD,iBAAiB;QACf,IAAI,CAAC,0BAA0B,GAAG,IAAI,gBAAgB,CAAC;YACrD,IAAI,CAAC,gBAAgB,EAAE,CAAC;SACzB,CAAC,CAAC;QACH,IAAI,CAAC,0BAA0B,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,EAAE;YACjD,SAAS,EAAE,IAAI;YACf,OAAO,EAAE,IAAI;YACb,UAAU,EAAE,IAAI;YAChB,eAAe,EAAE,CAAC,YAAY,CAAC;YAC/B,iBAAiB,EAAE,KAAK;SACzB,CAAC,CAAC;KACJ;IAED,oBAAoB;;QAClB,MAAA,IAAI,CAAC,0BAA0B,0CAAE,UAAU,EAAE,CAAC;KAC/C;IAED,MAAM;QACJ,QACE,EAAC,IAAI,qDAAC,UAAU,EAAE,IAAI,CAAC,UAAU,IAC/B,4DACE,KAAK,EAAC,OAAO,EACb,IAAI,EAAC,OAAO,IAEZ,8DAAa,CACT,CACD,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["ZTable"],"sources":["src/components/table/z-table/styles.css?tag=z-table&encapsulation=shadow","src/components/table/z-table/index.tsx"],"sourcesContent":[":host {\n  --z-table--cells-padding: calc(var(--space-unit) * 2);\n\n  position: relative;\n  display: block;\n  overflow: auto;\n  min-width: max-content;\n  max-width: 100%;\n  box-sizing: border-box;\n  padding: var(--space-unit);\n  background-color: var(--color-surface01);\n}\n\n:host([expandable]) {\n  --z-table--expand-button-size: 40px;\n}\n\n:host([bordered]) {\n  --z-table--cell-left-border: 1px solid var(--color-surface03);\n}\n","import {Component, Element, Host, Prop, State, h} from \"@stencil/core\";\nimport \"../z-tbody/index\";\nimport \"../z-tfoot/index\";\nimport \"../z-thead/index\";\nimport \"../z-tr/index\";\n\n/**\n * ZTable component.\n * @slot - Table content (`z-thead`, `z-tbody`, `z-tfoot`, `z-tr`).\n * @cssprop --z-table--cells-padding - Padding of the cells.\n */\n@Component({\n  tag: \"z-table\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZTable {\n  @Element() host: HTMLZTableElement;\n\n  /**\n   * Whether the table cells should show a border between them.\n   */\n  @Prop({reflect: true})\n  bordered = false;\n\n  /**\n   * Whether the table contains some expandable rows.\n   */\n  @State()\n  expandable = false;\n\n  private updateExpandable(): void {\n    this.expandable = this.host.querySelectorAll(\"z-tr[expandable]\").length > 0;\n  }\n\n  private expandableMutationObserver: MutationObserver;\n\n  /**\n   * Setup the table creating a mutation observer for the expandable attribute.\n   */\n  componentWillLoad(): void {\n    this.expandableMutationObserver = new MutationObserver(() => {\n      this.updateExpandable();\n    });\n    this.expandableMutationObserver.observe(this.host, {\n      childList: true,\n      subtree: true,\n      attributes: true,\n      attributeFilter: [\"expandable\"],\n      attributeOldValue: false,\n    });\n  }\n\n  disconnectedCallback(): void {\n    this.expandableMutationObserver?.disconnect();\n  }\n\n  render(): HTMLZTableElement {\n    return (\n      <Host expandable={this.expandable}>\n        <div\n          class=\"table\"\n          role=\"table\"\n        >\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/z-tag.js

@@ -1 +1,8 @@
-import{Z as o,d as s}from"./index14.js";const r=o,t=s;export{r as ZTag,t as defineCustomElement}
+import { Z as ZTag$1, d as defineCustomElement$1 } from './index26.js';
+
+const ZTag = ZTag$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { ZTag, defineCustomElement };
+
+//# sourceMappingURL=z-tag.js.map

package/dist/components/z-tag.js.map

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

package/dist/components/z-tbody.js

@@ -1 +1,36 @@
-import{proxyCustomElement as e,HTMLElement as t,h as o,Host as s,transformTag as c}from"@stencil/core/internal/client";const r=e(class extends t{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow()}render(){return o(s,{key:"62b5b227fbdaac2918101db68c60cb68ae9e1ed8",role:"rowgroup"},o("slot",{key:"ecfc5c26435fb7f03b5e9ea89111499b3b75f3ca"}))}static get style(){return":host{display:block;box-sizing:border-box}"}},[257,"z-tbody"]),n=r,b=function(){"undefined"!=typeof customElements&&["z-tbody"].forEach((e=>{"z-tbody"===e&&(customElements.get(c(e))||customElements.define(c(e),r))}))};export{n as ZTbody,b as defineCustomElement}
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+
+const stylesCss = ":host{display:block;box-sizing:border-box}";
+const ZTbodyStyle0 = stylesCss;
+
+const ZTbody$1 = /*@__PURE__*/ proxyCustomElement(class ZTbody extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+    }
+    render() {
+        return (h(Host, { key: 'a23a8d2225c5872c1ad1f646944b3ad4ba79f5fd', role: "rowgroup" }, h("slot", { key: '984be981a195644ec52026d7cc012326480210a6' })));
+    }
+    static get style() { return ZTbodyStyle0; }
+}, [1, "z-tbody"]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["z-tbody"];
+    components.forEach(tagName => { switch (tagName) {
+        case "z-tbody":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, ZTbody$1);
+            }
+            break;
+    } });
+}
+
+const ZTbody = ZTbody$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { ZTbody, defineCustomElement };
+
+//# sourceMappingURL=z-tbody.js.map

package/dist/components/z-tbody.js.map

@@ -0,0 +1 @@
+{"file":"z-tbody.js","mappings":";;AAAA,MAAM,SAAS,GAAG,4CAA4C,CAAC;AAC/D,qBAAe,SAAS;;MCUXA,QAAM;;;;;;IACjB,MAAM;QACJ,QACE,EAAC,IAAI,qDAAC,IAAI,EAAC,UAAU,IACnB,8DAAa,CACR,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;","names":["ZTbody"],"sources":["src/components/table/z-tbody/styles.css?tag=z-tbody&encapsulation=shadow","src/components/table/z-tbody/index.tsx"],"sourcesContent":[":host {\n  display: block;\n  box-sizing: border-box;\n}\n","import {Component, Host, h} from \"@stencil/core\";\n\n/**\n * ZTbody component.\n * @slot - ZTbody content (`z-tr`).\n */\n@Component({\n  tag: \"z-tbody\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZTbody {\n  render(): HTMLZTbodyElement {\n    return (\n      <Host role=\"rowgroup\">\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/z-td.js

@@ -1 +1,89 @@
-import{proxyCustomElement as e,HTMLElement as t,createEvent as n,h as o,Host as s,transformTag as i}from"@stencil/core/internal/client";import{P as c,e as a,B as l}from"./index2.js";import{d as r}from"./index5.js";import{d as p}from"./index3.js";import{d as h}from"./index17.js";const d=e(class extends t{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.colspanChange=n(this,"colspanChange",6),this.sticky=!1,this.showMenu=null,this.popoverPosition=c.AUTO,this.isMenuOpen=!1}updateColspan(){this.colspan?this.host.style.gridColumn="span "+this.colspan:this.host.style.removeProperty("grid-column"),this.colspanChange.emit(this.colspan||1)}onMenuButtonClick(e){e.stopPropagation(),this.popoverEl.open=!this.popoverEl.open}componentWillLoad(){this.updateColspan()}render(){return o(s,{key:"65102becbf97d8f480c9e9c140965963e1b829a3",role:"cell","menu-open":this.isMenuOpen},o("div",{key:"a91b370f73c8684038a75db6483ec88dd8b3f4d6",class:"cell--content"},o("slot",{key:"2a9451f11c23f2dae4047b360d8af92606ce3e76"}),this.showMenu&&o("div",{key:"0a4f91d75fce51604253ada3775f06ec9c230ce0",class:"cell--menu-container prevent-expand"},o("z-button",{key:"fe6623726d645f2796ff88246bd887b2e5ec9396",variant:l.TERTIARY,icon:"contextual-menu",size:a.X_SMALL,ref:e=>this.menuTrigger=e,onClick:this.onMenuButtonClick.bind(this)}),o("z-popover",{key:"1ce2729d0209e5218515c52f4425c3f02b05c1bd",class:"cell-popover",ref:e=>this.popoverEl=e,bindTo:this.menuTrigger,onOpenChange:e=>this.isMenuOpen=e.detail.open,position:this.popoverPosition},o("slot",{key:"b060d20d5e15380360f8bab9d502f85eb70a7995",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;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}}'}},[257,"z-td",{colspan:[2],sticky:[516],showMenu:[513,"show-menu"],popoverPosition:[1,"popover-position"],isMenuOpen:[32]},void 0,{colspan:[{updateColspan:0}]}]),u=d,m=function(){"undefined"!=typeof customElements&&["z-td","z-button","z-icon","z-popover"].forEach((e=>{switch(e){case"z-td":customElements.get(i(e))||customElements.define(i(e),d);break;case"z-button":customElements.get(i(e))||r();break;case"z-icon":customElements.get(i(e))||p();break;case"z-popover":customElements.get(i(e))||h()}}))};export{u as ZTd,m as defineCustomElement}
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { P as PopoverPosition, 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}}";
+const ZTdStyle0 = stylesCss;
+
+const ZTd$1 = /*@__PURE__*/ proxyCustomElement(class ZTd extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.colspanChange = createEvent(this, "colspanChange", 6);
+        this.colspan = undefined;
+        this.sticky = false;
+        this.showMenu = null;
+        this.popoverPosition = PopoverPosition.AUTO;
+        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 (h(Host, { key: '293116a05abf815d72c5febe88387a672bc44a32', role: "cell", "menu-open": this.isMenuOpen }, h("div", { key: '2edc2b6dcc67342e33dbb9dd7115ecc851c3fc73', class: "cell--content" }, h("slot", { key: 'a5bb48ca5dc5e37ce0b152c02c697cc421b60989' }), this.showMenu && (h("div", { key: 'e72f327a63b7b76e99b50b1ca8d9a971bd731ce3', class: "cell--menu-container prevent-expand" }, h("z-button", { key: 'cf6c1dc39f04221e9a96e405ad44e2e089e5787e', variant: ButtonVariant.TERTIARY, icon: "contextual-menu", size: ControlSize.X_SMALL, ref: (el) => (this.menuTrigger = el), onClick: this.onMenuButtonClick.bind(this) }), h("z-popover", { key: '149e73ef108f4c4e02c254a047dd1f500049015a', class: "cell-popover", ref: (el) => (this.popoverEl = el), bindTo: this.menuTrigger, onOpenChange: (event) => (this.isMenuOpen = event.detail.open), position: this.popoverPosition }, h("slot", { key: '115d26fe844d42fd2de0cbf2e241be44ae35e46d', name: "contextual-menu" })))))));
+    }
+    get host() { return this; }
+    static get watchers() { return {
+        "colspan": ["updateColspan"]
+    }; }
+    static get style() { return ZTdStyle0; }
+}, [1, "z-td", {
+        "colspan": [2],
+        "sticky": [516],
+        "showMenu": [513, "show-menu"],
+        "popoverPosition": [1, "popover-position"],
+        "isMenuOpen": [32]
+    }, undefined, {
+        "colspan": ["updateColspan"]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["z-td", "z-button", "z-icon", "z-popover"];
+    components.forEach(tagName => { switch (tagName) {
+        case "z-td":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, ZTd$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 ZTd = ZTd$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { ZTd, defineCustomElement };
+
+//# sourceMappingURL=z-td.js.map

package/dist/components/z-td.js.map

@@ -0,0 +1 @@
+{"file":"z-td.js","mappings":";;;;;;AAAA,MAAM,SAAS,GAAG,iiCAAiiC,CAAC;AACpjC,kBAAe,SAAS;;MCWXA,KAAG;;;;;;;sBAaL,KAAK;wBAQkB,IAAI;+BAMA,eAAe,CAAC,IAAI;0BAM3C,KAAK;;IAgBR,aAAa;QACrB,IAAI,IAAI,CAAC,OAAO,EAAE;YAChB,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,UAAU,GAAG,QAAQ,IAAI,CAAC,OAAO,EAAE,CAAC;SACrD;aAAM;YACL,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,aAAa,CAAC,CAAC;SAC/C;QAED,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,IAAI,CAAC,CAAC,CAAC;KAC5C;IAEO,iBAAiB,CAAC,EAAc;QACtC,EAAE,CAAC,eAAe,EAAE,CAAC;QACrB,IAAI,CAAC,SAAS,CAAC,IAAI,GAAG,CAAC,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC;KAC5C;IAED,iBAAiB;QACf,IAAI,CAAC,aAAa,EAAE,CAAC;KACtB;IAED,MAAM;QACJ,QACE,EAAC,IAAI,qDACH,IAAI,EAAC,MAAM,eACA,IAAI,CAAC,UAAU,IAE1B,4DAAK,KAAK,EAAC,eAAe,IACxB,8DAAa,EACZ,IAAI,CAAC,QAAQ,KACZ,4DAAK,KAAK,EAAC,qCAAqC,IAC9C,iEACE,OAAO,EAAE,aAAa,CAAC,QAAQ,EAC/B,IAAI,EAAC,iBAAiB,EACtB,IAAI,EAAE,WAAW,CAAC,OAAO,EACzB,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,WAAW,GAAG,EAAwB,CAAC,EAC1D,OAAO,EAAE,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,IAAI,CAAC,GAC1C,EACF,kEACE,KAAK,EAAC,cAAc,EACpB,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,SAAS,GAAG,EAAyB,CAAC,EACzD,MAAM,EAAE,IAAI,CAAC,WAA0B,EACvC,YAAY,EAAE,CAAC,KAAK,MAAM,IAAI,CAAC,UAAU,GAAG,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,EAC9D,QAAQ,EAAE,IAAI,CAAC,eAAe,IAE9B,6DAAM,IAAI,EAAC,iBAAiB,GAAQ,CAC1B,CACR,CACP,CACG,CACD,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["ZTd"],"sources":["src/components/table/cells/z-td/styles.css?tag=z-td&encapsulation=shadow","src/components/table/cells/z-td/index.tsx"],"sourcesContent":["@import \"../z-table-cells.css\";\n","import {Component, Element, Event, EventEmitter, Host, Prop, State, Watch, h} from \"@stencil/core\";\nimport {ButtonVariant, ControlSize, PopoverPosition, VisibilityCondition} from \"../../../../beans\";\n\n/**\n * ZTd component.\n * @slot - ZTd content.\n */\n@Component({\n  tag: \"z-td\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZTd {\n  @Element() host: HTMLZTdElement;\n\n  /**\n   * Number of columns that the cell should span.\n   */\n  @Prop()\n  colspan: number;\n\n  /**\n   * Whether the cell should stick.\n   */\n  @Prop({reflect: true})\n  sticky = false;\n\n  /**\n   * Enables the contextual menu.\n   * Can be set to \"hover\" or \"always\" to show the button only on cell hover or always.\n   * Set a nullish value to hide the menu button.\n   */\n  @Prop({reflect: true})\n  showMenu: VisibilityCondition = null;\n\n  /**\n   * Set the popover position, the default is \"auto\".\n   */\n  @Prop()\n  popoverPosition?: PopoverPosition = PopoverPosition.AUTO;\n\n  /**\n   * Store the open state of the menu.\n   */\n  @State()\n  isMenuOpen = false;\n\n  private menuTrigger: HTMLZButtonElement;\n\n  private popoverEl: HTMLZPopoverElement;\n\n  /**\n   * Emitted when the value of the `colspan` changes.\n   */\n  @Event({\n    bubbles: true,\n    cancelable: false,\n  })\n  colspanChange: EventEmitter<number>;\n\n  @Watch(\"colspan\")\n  protected updateColspan(): void {\n    if (this.colspan) {\n      this.host.style.gridColumn = `span ${this.colspan}`;\n    } else {\n      this.host.style.removeProperty(\"grid-column\");\n    }\n\n    this.colspanChange.emit(this.colspan || 1);\n  }\n\n  private onMenuButtonClick(ev: MouseEvent): void {\n    ev.stopPropagation();\n    this.popoverEl.open = !this.popoverEl.open;\n  }\n\n  componentWillLoad(): void {\n    this.updateColspan();\n  }\n\n  render(): HTMLZTdElement {\n    return (\n      <Host\n        role=\"cell\"\n        menu-open={this.isMenuOpen}\n      >\n        <div class=\"cell--content\">\n          <slot></slot>\n          {this.showMenu && (\n            <div class=\"cell--menu-container prevent-expand\">\n              <z-button\n                variant={ButtonVariant.TERTIARY}\n                icon=\"contextual-menu\"\n                size={ControlSize.X_SMALL}\n                ref={(el) => (this.menuTrigger = el as HTMLZButtonElement)}\n                onClick={this.onMenuButtonClick.bind(this)}\n              />\n              <z-popover\n                class=\"cell-popover\"\n                ref={(el) => (this.popoverEl = el as HTMLZPopoverElement)}\n                bindTo={this.menuTrigger as HTMLElement}\n                onOpenChange={(event) => (this.isMenuOpen = event.detail.open)}\n                position={this.popoverPosition}\n              >\n                <slot name=\"contextual-menu\"></slot>\n              </z-popover>\n            </div>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/z-tfoot.js

@@ -1 +1,39 @@
-import{proxyCustomElement as o,HTMLElement as t,h as e,Host as r,transformTag as s}from"@stencil/core/internal/client";const c=o(class extends t{constructor(o){super(),!1!==o&&this.__registerHost(),this.__attachShadow(),this.sticky=!1}render(){return e(r,{key:"0ecae481f9b2e870d3f4d8898755d15e561154b7",role:"rowgroup",tabIndex:-1},e("slot",{key:"7d028233f9e6ff2bfdbcc5b00841db5eb5020643"}))}static get style(){return":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)}"}},[257,"z-tfoot",{sticky:[516]}]),n=c,i=function(){"undefined"!=typeof customElements&&["z-tfoot"].forEach((o=>{"z-tfoot"===o&&(customElements.get(s(o))||customElements.define(s(o),c))}))};export{n as ZTfoot,i as defineCustomElement}
+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: 'f8e7bef1397f6a4d7f776321421eb8f8c69ceb7d', role: "rowgroup", tabIndex: -1 }, h("slot", { key: 'd0e56e8d36cc4ca21d79b9d2a2546b19a0ac27e0' })));
+    }
+    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

package/dist/components/z-tfoot.js.map

@@ -0,0 +1 @@
+{"file":"z-tfoot.js","mappings":";;AAAA,MAAM,SAAS,GAAG,kOAAkO,CAAC;AACrP,qBAAe,SAAS;;MCUXA,QAAM;;;;;sBAKR,KAAK;;IAEd,MAAM;QACJ,QACE,EAAC,IAAI,qDACH,IAAI,EAAC,UAAU,EACf,QAAQ,EAAE,CAAC,CAAC,IAEZ,8DAAa,CACR,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;","names":["ZTfoot"],"sources":["src/components/table/z-tfoot/styles.css?tag=z-tfoot&encapsulation=shadow","src/components/table/z-tfoot/index.tsx"],"sourcesContent":[":host {\n  display: block;\n  box-sizing: border-box;\n  border-top: 1px solid var(--color-surface03);\n  border-bottom: 1px solid var(--color-surface03);\n}\n\n:host([sticky]) {\n  position: sticky;\n  z-index: 1;\n  bottom: 0;\n  background-color: var(--color-surface01);\n}\n","import {Component, Host, Prop, h} from \"@stencil/core\";\n\n/**\n * ZTFoot component.\n * @slot - ZTFoot content (`z-tr`).\n */\n@Component({\n  tag: \"z-tfoot\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZTfoot {\n  /**\n   * If true, the footer will be stuck to the bottom of the table.\n   */\n  @Prop({reflect: true})\n  sticky = false;\n\n  render(): void {\n    return (\n      <Host\n        role=\"rowgroup\"\n        tabIndex={-1}\n      >\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/z-th.js

@@ -1 +1,112 @@
-import{proxyCustomElement as t,HTMLElement as o,createEvent as e,h as s,Host as n,transformTag as i}from"@stencil/core/internal/client";import{P as r,S as c,e as a,B as h}from"./index2.js";import{d as l}from"./index5.js";import{d as p}from"./index3.js";import{d as u}from"./index17.js";const d=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=r.AUTO,this.isMenuOpen=!1}get ariaSortDirection(){return this.sortDirection?this.sortDirection===c.ASC?"ascending":"descending":null}handleSort(){this.sortDirection?(this.sortDirection=this.sortDirection===c.ASC?c.DESC:c.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(n,{key:"326c1c5968ebd22021f5bc88d3c98cd558c31783",role:"columnheader","menu-open":this.isMenuOpen,"aria-sort":this.ariaSortDirection,sortable:this.showSorting},s("div",{key:"935a692b283f76362fe5e3cc7cc2f8e38424f407",class:"cell--content"},s("slot",{key:"cce03a04640d1ee72e2e202f7526203136f4bb50"}),this.showSorting&&s("button",{key:"c161a473f0b4e6d6b1a478ad0530c6d0938fc1a1",class:"z-th--sort-button",type:"button",onClick:this.handleSort.bind(this)},s("z-icon",{key:"4b9b3aab3b0ce9f14c2a181860c834098077dee3",name:this.sortDirection===c.DESC?"arrow-simple-up":"arrow-simple-down",width:14,height:14})),this.showMenu&&s("div",{key:"cd3b0e8a851c8a414229f4976b8a227d99981ce0",class:"cell--menu-container"},s("z-button",{key:"3d37441174ff3ea540c0aec582bc91c7c644c818",variant:h.TERTIARY,icon:"contextual-menu",size:a.X_SMALL,ref:t=>this.menuTrigger=t,onClick:()=>this.popoverEl.open=!this.popoverEl.open}),s("z-popover",{key:"59de83e276e82705588041660e7612080b6636e8",ref:t=>this.popoverEl=t,bindTo:this.menuTrigger,onOpenChange:t=>this.isMenuOpen=t.detail.open,position:this.popoverPosition},s("slot",{key:"c92e8e0a5c617251dc6741ff4d9cbe943f224111",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;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:""}'}},[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}]}]),m=d,b=function(){"undefined"!=typeof customElements&&["z-th","z-button","z-icon","z-popover"].forEach((t=>{switch(t){case"z-th":customElements.get(i(t))||customElements.define(i(t),d);break;case"z-button":customElements.get(i(t))||l();break;case"z-icon":customElements.get(i(t))||p();break;case"z-popover":customElements.get(i(t))||u()}}))};export{m as ZTh,b as defineCustomElement}
+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: '03fc52e539b5d4b353707a3065be9d522c0aed93', role: "columnheader", "menu-open": this.isMenuOpen, "aria-sort": this.ariaSortDirection, sortable: this.showSorting }, h("div", { key: '2253ed45163efb0508ef0c291d33f386c53d8fbb', class: "cell--content" }, h("slot", { key: '3d17a384cb6d39c3672eb2c6c44a0e491214ed50' }), this.showSorting && (h("button", { key: 'e32ce07f7193628e19e0e20bcc56fe309c48c6f3', class: "z-th--sort-button", type: "button", onClick: this.handleSort.bind(this) }, h("z-icon", { key: '6a96bf249ecb191f6f0b71ce8b5186ee1e109a91', name: this.sortDirection === SortDirection.DESC ? "arrow-simple-up" : "arrow-simple-down", width: 14, height: 14 }))), this.showMenu && (h("div", { key: 'a490f573b3d07dc6ca74190cb81be4075fc85d97', class: "cell--menu-container" }, h("z-button", { key: 'ae1cd376be6fb4e13674277ab927d9542a469bbc', 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: 'bb9ee43bf68dce8a8046b88bf9bf993ff519816d', ref: (el) => (this.popoverEl = el), bindTo: this.menuTrigger, onOpenChange: (event) => (this.isMenuOpen = event.detail.open), position: this.popoverPosition }, h("slot", { key: 'b1d46d09c33c4f957ea1d6984428b2ba55763e66', 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

package/dist/components/z-th.js.map

@@ -0,0 +1 @@
+{"file":"z-th.js","mappings":";;;;;;AAAA,MAAM,SAAS,GAAG,svEAAsvE,CAAC;AACzwE,kBAAe,SAAS;;MCYXA,KAAG;;;;;;;wBAekB,IAAI;2BAQD,IAAI;sBAM9B,KAAK;;sBAYW,KAAK;+BAMZ,eAAe,CAAC,IAAI;0BAMzB,KAAK;;;;;IAiBlB,IAAY,iBAAiB;QAC3B,IAAI,CAAC,IAAI,CAAC,aAAa,EAAE;YACvB,OAAO,IAAI,CAAC;SACb;QAED,OAAO,IAAI,CAAC,aAAa,KAAK,aAAa,CAAC,GAAG,GAAG,WAAW,GAAG,YAAY,CAAC;KAC9E;;;;;IAMO,UAAU;QAChB,IAAI,CAAC,IAAI,CAAC,aAAa,EAAE;YACvB,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;YAEpB,OAAO;SACR;QAED,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,aAAa,KAAK,aAAa,CAAC,GAAG,GAAG,aAAa,CAAC,IAAI,GAAG,aAAa,CAAC,GAAG,CAAC;QACvG,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC;QAEnB,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,EAAC,aAAa,EAAE,IAAI,CAAC,aAAa,EAAC,CAAC,CAAC;KACrD;IAGS,aAAa;QACrB,IAAI,IAAI,CAAC,OAAO,EAAE;YAChB,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,UAAU,GAAG,QAAQ,IAAI,CAAC,OAAO,EAAE,CAAC;SACrD;aAAM;YACL,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,aAAa,CAAC,CAAC;SAC/C;KACF;IAED,iBAAiB;QACf,IAAI,CAAC,aAAa,EAAE,CAAC;KACtB;IAED,MAAM;QACJ,QACE,EAAC,IAAI,qDACH,IAAI,EAAC,cAAc,eACR,IAAI,CAAC,UAAU,eACf,IAAI,CAAC,iBAAiB,EACjC,QAAQ,EAAE,IAAI,CAAC,WAAW,IAE1B,4DAAK,KAAK,EAAC,eAAe,IACxB,8DAAa,EACZ,IAAI,CAAC,WAAW,KACf,+DACE,KAAK,EAAC,mBAAmB,EACzB,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,IAEnC,+DACE,IAAI,EAAE,IAAI,CAAC,aAAa,KAAK,aAAa,CAAC,IAAI,GAAG,iBAAiB,GAAG,mBAAmB,EACzF,KAAK,EAAE,EAAE,EACT,MAAM,EAAE,EAAE,GACV,CACK,CACV,EACA,IAAI,CAAC,QAAQ,KACZ,4DAAK,KAAK,EAAC,sBAAsB,IAC/B,iEACE,OAAO,EAAE,aAAa,CAAC,QAAQ,EAC/B,IAAI,EAAC,iBAAiB,EACtB,IAAI,EAAE,WAAW,CAAC,OAAO,EACzB,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,WAAW,GAAG,EAAiB,CAAC,EACnD,OAAO,EAAE,OAAO,IAAI,CAAC,SAAS,CAAC,IAAI,GAAG,CAAC,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,GAC3D,EACF,kEACE,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,SAAS,GAAG,EAAyB,CAAC,EACzD,MAAM,EAAE,IAAI,CAAC,WAAW,EACxB,YAAY,EAAE,CAAC,KAAK,MAAM,IAAI,CAAC,UAAU,GAAG,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,EAC9D,QAAQ,EAAE,IAAI,CAAC,eAAe,IAE9B,6DAAM,IAAI,EAAC,iBAAiB,GAAQ,CAC1B,CACR,CACP,CACG,CACD,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["ZTh"],"sources":["src/components/table/cells/z-th/styles.css?tag=z-th&encapsulation=shadow","src/components/table/cells/z-th/index.tsx"],"sourcesContent":["@import \"../z-table-cells.css\";\n\n:host {\n  z-index: 1;\n  padding: 0;\n  background-color: var(--color-background);\n  font-weight: var(--font-sb);\n}\n\n.cell--content {\n  padding: var(--z-table--cells-padding, calc(var(--space-unit) * 2));\n}\n\n:host([show-sorting]) .cell--content {\n  column-gap: var(--space-unit);\n}\n\n.z-th--sort-button {\n  position: relative;\n  padding: 0;\n  border: none;\n  background-color: transparent;\n  cursor: pointer;\n  outline: none;\n}\n\n.z-th--sort-button:focus,\n.z-th--sort-button:focus-visible {\n  box-shadow: var(--shadow-focus-primary);\n  opacity: 1;\n  outline: none;\n  pointer-events: all;\n}\n\n@media (min-width: 768px) and (hover: hover) {\n  :host([show-sorting=\"hover\"]) .z-th--sort-button {\n    opacity: 0;\n    pointer-events: none;\n  }\n\n  :host([show-sorting=\"hover\"]:hover) .z-th--sort-button,\n  :host([show-sorting=\"hover\"]) .z-th--sort-button:focus:focus-visible,\n  :host([show-sorting=\"always\"]) .z-th--sort-button,\n  :host([sorted]) .z-th--sort-button {\n    opacity: 1;\n    pointer-events: all;\n  }\n}\n\n:host([show-sorting=\"hover\"]:hover) .z-th--sort-button::after,\n:host([show-sorting=\"hover\"]) .z-th--sort-button:focus:focus-visible::after,\n:host([show-sorting=\"always\"]) .z-th--sort-button::after,\n:host([sorted]) .z-th--sort-button::after {\n  position: absolute;\n  top: 6px;\n  left: 6px;\n  width: calc(100% - 12px);\n  height: calc(100% - 10px);\n  background-color: transparent;\n  content: \"\";\n}\n","import {Component, Element, Event, EventEmitter, Host, Prop, State, Watch, h} from \"@stencil/core\";\nimport {ButtonVariant, ControlSize, PopoverPosition, SortDirection, VisibilityCondition} from \"../../../../beans\";\n\n/**\n * ZTh component.\n * @slot - ZTh content.\n * @slot contextual-menu - Contextual menu content. Only visible when `showMenu` is true.\n */\n@Component({\n  tag: \"z-th\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZTh {\n  @Element() host: HTMLZThElement;\n\n  /**\n   * Number of columns that the cell should span.\n   */\n  @Prop()\n  colspan: number;\n\n  /**\n   * Enables the contextual menu.\n   * Can be set to \"hover\" or \"always\" to show the button only on cell hover or always.\n   * Set a nullish value to hide the menu button.\n   */\n  @Prop({reflect: true})\n  showMenu: VisibilityCondition = null;\n\n  /**\n   * Enables the sorting button.\n   * Can be set to \"hover\" or \"always\" to show the button only on cell hover or always.\n   * Set a nullish value to hide the sort button.\n   */\n  @Prop({reflect: true})\n  showSorting: VisibilityCondition = null;\n\n  /**\n   * Whether the cell should stick.\n   */\n  @Prop({reflect: true})\n  sticky = false;\n\n  /**\n   * Current sorting direction.\n   */\n  @Prop({mutable: true})\n  sortDirection?: SortDirection;\n\n  /**\n   * Sorted state of the column.\n   */\n  @Prop({reflect: true, mutable: true})\n  sorted: boolean | null = false;\n\n  /**\n   * Set popover position.\n   */\n  @Prop()\n  popoverPosition = PopoverPosition.AUTO;\n\n  /**\n   * Store the open state of the menu.\n   */\n  @State()\n  isMenuOpen = false;\n\n  /**\n   * Sort event fired when the user clicks on the sort button.\n   * The sorting logic must be implemented by the app.\n   * You can set an `id` on the `z-th` to easly identify the column in the event listener.\n   */\n  @Event()\n  private sort: EventEmitter;\n\n  private menuTrigger: HTMLElement;\n\n  private popoverEl: HTMLZPopoverElement;\n\n  /**\n   * Get the value to set to the `aria-sort` attribute based on the current sort direction.\n   */\n  private get ariaSortDirection(): string {\n    if (!this.sortDirection) {\n      return null;\n    }\n\n    return this.sortDirection === SortDirection.ASC ? \"ascending\" : \"descending\";\n  }\n\n  /**\n   * Handle the click on the sort button.\n   * @fires sort\n   */\n  private handleSort(): void {\n    if (!this.sortDirection) {\n      this.sorted = false;\n\n      return;\n    }\n\n    this.sortDirection = this.sortDirection === SortDirection.ASC ? SortDirection.DESC : SortDirection.ASC;\n    this.sorted = true;\n\n    this.sort.emit({sortDirection: this.sortDirection});\n  }\n\n  @Watch(\"colspan\")\n  protected updateColspan(): void {\n    if (this.colspan) {\n      this.host.style.gridColumn = `span ${this.colspan}`;\n    } else {\n      this.host.style.removeProperty(\"grid-column\");\n    }\n  }\n\n  componentWillLoad(): void {\n    this.updateColspan();\n  }\n\n  render(): HTMLZThElement {\n    return (\n      <Host\n        role=\"columnheader\"\n        menu-open={this.isMenuOpen}\n        aria-sort={this.ariaSortDirection}\n        sortable={this.showSorting}\n      >\n        <div class=\"cell--content\">\n          <slot></slot>\n          {this.showSorting && (\n            <button\n              class=\"z-th--sort-button\"\n              type=\"button\"\n              onClick={this.handleSort.bind(this)}\n            >\n              <z-icon\n                name={this.sortDirection === SortDirection.DESC ? \"arrow-simple-up\" : \"arrow-simple-down\"}\n                width={14}\n                height={14}\n              />\n            </button>\n          )}\n          {this.showMenu && (\n            <div class=\"cell--menu-container\">\n              <z-button\n                variant={ButtonVariant.TERTIARY}\n                icon=\"contextual-menu\"\n                size={ControlSize.X_SMALL}\n                ref={(el) => (this.menuTrigger = el as HTMLElement)}\n                onClick={() => (this.popoverEl.open = !this.popoverEl.open)}\n              />\n              <z-popover\n                ref={(el) => (this.popoverEl = el as HTMLZPopoverElement)}\n                bindTo={this.menuTrigger}\n                onOpenChange={(event) => (this.isMenuOpen = event.detail.open)}\n                position={this.popoverPosition}\n              >\n                <slot name=\"contextual-menu\"></slot>\n              </z-popover>\n            </div>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/z-thead.js

@@ -1 +1,42 @@
-import{proxyCustomElement as e,HTMLElement as t,h as o,Host as s,transformTag as c}from"@stencil/core/internal/client";const r=e(class extends t{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.sticky=!1,this.isFocusable=!1}render(){return o(s,{key:"a41caa6571e3a2e4c0b46df9c28507d347011c52",role:"rowgroup",tabIndex:this.isFocusable?0:-1},o("slot",{key:"fbe9305e97ac906ce0296b871d65d33c75749bd1"}))}get host(){return this}static get style(){return":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}"}},[257,"z-thead",{sticky:[516],isFocusable:[516,"is-focusable"]}]),i=r,n=function(){"undefined"!=typeof customElements&&["z-thead"].forEach((e=>{"z-thead"===e&&(customElements.get(c(e))||customElements.define(c(e),r))}))};export{i as ZThead,n as defineCustomElement}
+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: 'd975481f3702161c0d76f42c47d6194c39d08f42', role: "rowgroup", tabIndex: this.isFocusable ? 0 : -1 }, h("slot", { key: '97e675dc4bbefd4aac970d10dc4499c4bc80ac23' })));
+    }
+    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

package/dist/components/z-thead.js.map

@@ -0,0 +1 @@
+{"file":"z-thead.js","mappings":";;AAAA,MAAM,SAAS,GAAG,wUAAwU,CAAC;AAC3V,qBAAe,SAAS;;MCUXA,QAAM;;;;;sBAOR,KAAK;2BAMA,KAAK;;IAEnB,MAAM;QACJ,QACE,EAAC,IAAI,qDACH,IAAI,EAAC,UAAU,EACf,QAAQ,EAAE,IAAI,CAAC,WAAW,GAAG,CAAC,GAAG,CAAC,CAAC,IAEnC,8DAAa,CACR,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["ZThead"],"sources":["src/components/table/z-thead/styles.css?tag=z-thead&encapsulation=shadow","src/components/table/z-thead/index.tsx"],"sourcesContent":[":host {\n  --z-table--cells-bottom-border-size: var(\n    --border-size-medium\n  ); /* Needed to handle the border of the expand button cell */\n\n  --z-table--cells-background: var(\n    --color-background\n  ); /* Needed to handle the background-color of the expand button cell */\n\n  display: block;\n  box-sizing: border-box;\n}\n\n:host([sticky]) {\n  position: sticky;\n  z-index: 2;\n  top: 0;\n  box-shadow: 0 2px 4px -2px var(--shadow-color-base);\n}\n\n:host(:focus-visible) {\n  box-shadow: none;\n  outline: none;\n}\n","import {Component, Element, Host, Prop, h} from \"@stencil/core\";\n\n/**\n * ZThead component.\n * @slot - ZThead content (`z-tr`).\n */\n@Component({\n  tag: \"z-thead\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZThead {\n  @Element() host: HTMLZTheadElement;\n\n  /**\n   * If true, the header will be stuck to the top of the table.\n   */\n  @Prop({reflect: true})\n  sticky = false;\n\n  /**\n   * The element is focusable\n   */\n  @Prop({reflect: true})\n  isFocusable = false;\n\n  render(): HTMLZTheadElement {\n    return (\n      <Host\n        role=\"rowgroup\"\n        tabIndex={this.isFocusable ? 0 : -1}\n      >\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"],"version":3}

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

@@ -1 +1,79 @@
-import{proxyCustomElement as t,HTMLElement as o,h as i,transformTag as s}from"@stencil/core/internal/client";import{s as e}from"./index2.js";const n=t(class extends o{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow(),this.position=e.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:"e039a28729e3d350f3db450429acd01ff47b5afe",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=n,l=function(){"undefined"!=typeof customElements&&["z-toast-notification-list"].forEach((t=>{"z-toast-notification-list"===t&&(customElements.get(s(t))||customElements.define(s(t),n))}))};export{a as ZToastNotificationList,l as defineCustomElement}
+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: '188e85fc561b690f63f4f66edbbf63a0ed434cdf', 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

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

@@ -0,0 +1 @@
+{"file":"z-toast-notification-list.js","mappings":";;;AAAA,MAAM,SAAS,GAAG,0/CAA0/C,CAAC;AAC7gD,qCAAe,SAAS;;MCOXA,wBAAsB;;;;;QAWzB,sBAAiB,GAAc,EAAE,CAAC;wBANJ,yBAAyB,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,OAAO,6DAAM,IAAI,EAAC,QAAQ,GAAQ,CAAC;KACpC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["ZToastNotificationList"],"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}