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

package/dist/cjs/z-stepper-item.cjs.entry.js

@@ -1,20 +1,12 @@
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
+var index = require('./index-2H1EJ2Tl.js');
 
-const index = require('./index-96af6326.js');
-
-const stylesCss = ":host{position:relative;width:calc(var(--space-unit) * 5);font-family:var(--font-family-sans);font-weight:var(--font-rg);--z-icon-width:20px;--z-icon-height:20px}:host(:not(:last-child)){flex:1}:host(:not(:last-child))::after{position:absolute;z-index:1;top:calc(var(--space-unit) * 4 - var(--border-size-medium) / 2);right:calc(var(--space-unit) * 2);left:calc(var(--space-unit) * 3);display:block;width:auto;border-bottom:var(--border-size-medium) solid var(--color-disabled03);margin:0 calc(var(--space-unit) * -2) 0 calc(var(--space-unit) * 2);content:\"\"}.stepper-item{display:flex;width:calc(var(--space-unit) * 5);flex-direction:column;align-items:center;padding:0;border:0;appearance:none;background:transparent;color:inherit;font-family:inherit;font-size:12px;line-height:16px;outline:0;text-decoration:none}.stepper-item span{display:none;width:calc(100% + calc(var(--space-unit) * 4));color:var(--color-default-text);text-align:center}:host([href]:not([disabled],[pressed])) .stepper-item{cursor:pointer}:host([disabled]) .stepper-item{pointer-events:none}:host([pressed]),:host([pressed]) .stepper-item{pointer-events:none}.indicator{display:flex;width:calc(var(--space-unit) * 4);height:calc(var(--space-unit) * 4);box-sizing:border-box;align-items:center;justify-content:center;border:var(--border-size-medium) solid var(--color-primary01);margin:calc(var(--space-unit) * 2);background:var(--color-surface01);border-radius:50%;color:var(--color-primary01);content:counter(stepper);font-size:14px;font-weight:var(--font-sb);line-height:1}:host([pressed]:not([disabled])) .indicator{border-color:var(--color-hover-primary);background:var(--color-hover-primary);color:var(--color-text-inverse)}:host([href]:not([disabled]):focus-within) .indicator{box-shadow:var(--shadow-focus-primary)}:host([href]:not([disabled],[pressed],[checked])) .indicator:hover{border-color:var(--color-hover-primary);color:var(--color-hover-primary)}:host([disabled]) .indicator{border-color:var(--color-disabled02);background:var(--color-disabled01);color:var(--color-disabled03)}:host([checked]:not([disabled])) .indicator{border-color:var(--color-default-success);color:var(--color-default-success)}:host([checked]:not([disabled])) .indicator z-icon{fill:var(--color-default-success)}:host([checked]) .indicator z-icon>svg{width:24px;height:24px}@media (min-width: 768px){.stepper-item span{display:block}}@media (min-width: 1152px){:host{width:calc(var(--space-unit) * 10);--z-icon-width:24px;--z-icon-height:24px}:host(:not(:last-child))::after{top:calc(var(--space-unit) * 5 - var(--border-size-medium) / 2);left:calc(var(--space-unit) * 8)}.stepper-item{width:calc(var(--space-unit) * 10);font-size:18px;line-height:28px}.indicator{width:calc(var(--space-unit) * 6);height:calc(var(--space-unit) * 6);font-size:16px}}";
-const ZStepperItemStyle0 = stylesCss;
+const stylesCss = () => `:host{position:relative;width:calc(var(--space-unit) * 5);font-family:var(--font-family-sans);font-weight:var(--font-rg);--z-icon-width:20px;--z-icon-height:20px}:host(:not(:last-child)){flex:1}:host(:not(:last-child))::after{position:absolute;z-index:1;top:calc(var(--space-unit) * 4 - var(--border-size-medium) / 2);right:calc(var(--space-unit) * 2);left:calc(var(--space-unit) * 3);display:block;width:auto;border-bottom:var(--border-size-medium) solid var(--color-disabled03);margin:0 calc(var(--space-unit) * -2) 0 calc(var(--space-unit) * 2);content:""}.stepper-item{display:flex;width:calc(var(--space-unit) * 5);flex-direction:column;align-items:center;padding:0;border:0;appearance:none;background:transparent;color:inherit;font-family:inherit;font-size:12px;line-height:16px;outline:0;text-decoration:none}.stepper-item span{display:none;width:calc(100% + calc(var(--space-unit) * 4));color:var(--color-default-text);text-align:center}:host([href]:not([disabled],[pressed])) .stepper-item{cursor:pointer}:host([disabled]) .stepper-item{pointer-events:none}:host([pressed]),:host([pressed]) .stepper-item{pointer-events:none}.indicator{display:flex;width:calc(var(--space-unit) * 4);height:calc(var(--space-unit) * 4);box-sizing:border-box;align-items:center;justify-content:center;border:var(--border-size-medium) solid var(--color-primary01);margin:calc(var(--space-unit) * 2);background:var(--color-surface01);border-radius:50%;color:var(--color-primary01);content:counter(stepper);font-size:14px;font-weight:var(--font-sb);line-height:1}:host([pressed]:not([disabled])) .indicator{border-color:var(--color-hover-primary);background:var(--color-hover-primary);color:var(--color-text-inverse)}:host([href]:not([disabled]):focus-within) .indicator{box-shadow:var(--shadow-focus-primary)}:host([href]:not([disabled],[pressed],[checked])) .indicator:hover{border-color:var(--color-hover-primary);color:var(--color-hover-primary)}:host([disabled]) .indicator{border-color:var(--color-disabled02);background:var(--color-disabled01);color:var(--color-disabled03)}:host([checked]:not([disabled])) .indicator{border-color:var(--color-default-success);color:var(--color-default-success)}:host([checked]:not([disabled])) .indicator z-icon{fill:var(--color-default-success)}:host([checked]) .indicator z-icon>svg{width:24px;height:24px}@media (min-width: 768px){.stepper-item span{display:block}}@media (min-width: 1152px){:host{width:calc(var(--space-unit) * 10);--z-icon-width:24px;--z-icon-height:24px}:host(:not(:last-child))::after{top:calc(var(--space-unit) * 5 - var(--border-size-medium) / 2);left:calc(var(--space-unit) * 8)}.stepper-item{width:calc(var(--space-unit) * 10);font-size:18px;line-height:28px}.indicator{width:calc(var(--space-unit) * 6);height:calc(var(--space-unit) * 6);font-size:16px}}`;
 
 const ZStepperItem = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
-        this.index = undefined;
-        this.href = undefined;
-        this.pressed = undefined;
-        this.checked = undefined;
-        this.disabled = undefined;
     }
     getAttributes() {
         const href = this.href && !this.pressed && !this.disabled ? { onClick: () => (location.href = this.href) } : undefined;
@@ -24,11 +16,9 @@ const ZStepperItem = class {
         return Object.assign(Object.assign(Object.assign(Object.assign({}, href), role), current), tabindex);
     }
     render() {
-        return (index.h(index.Host, { key: 'eee285538af50ff09c49ead53e0589f20f810567', role: "listitem" }, index.h("button", Object.assign({ key: '0b354bc4e0ad809044e1cf0beb80a6259b2df43a', class: "stepper-item", disabled: this.disabled }, this.getAttributes()), index.h("div", { key: '3227f3ce382e6340cfc9bec365cb2d7b79dba2ed', class: "indicator" }, this.checked ? index.h("z-icon", { name: "checkmark" }) : this.index), index.h("span", { key: '1099214dda81271f48d2453d1e111042a79207af' }, index.h("slot", { key: '50262e5fbb88d2b628de778243d52087225eec7b' })))));
+        return (index.h(index.Host, { key: 'acd637314062ec1e9700fcc22e0ced7c5dd653fa', role: "listitem" }, index.h("button", Object.assign({ key: 'aef1782ce8d72fc5a5379ab6b2abe3f29d3e4531', class: "stepper-item", disabled: this.disabled }, this.getAttributes()), index.h("div", { key: 'bbe3ac96d02e98a5434fbde7a9426698dd7fe6a3', class: "indicator" }, this.checked ? index.h("z-icon", { name: "checkmark" }) : this.index), index.h("span", { key: 'c78b4f569cbe831b4ed2ecb2276c4f357d44b46a' }, index.h("slot", { key: '725a59150a00624f3ae3e742b34100b475b496e8' })))));
     }
 };
-ZStepperItem.style = ZStepperItemStyle0;
+ZStepperItem.style = stylesCss();
 
 exports.z_stepper_item = ZStepperItem;
-
-//# sourceMappingURL=z-stepper-item.cjs.entry.js.map

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

@@ -1,22 +1,17 @@
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
+var index = require('./index-2H1EJ2Tl.js');
 
-const index = require('./index-96af6326.js');
-
-const stylesCss = ":host{position:relative;display:flex;width:100%;max-width:100%;box-sizing:border-box;flex-direction:row;padding:0;margin:0;font-family:var(--font-family-sans);font-weight:var(--font-rg);list-style:none}@media (min-width: 768px){:host{padding:0 calc(var(--space-unit) * 2)}}";
-const ZStepperStyle0 = stylesCss;
+const stylesCss = () => `:host{position:relative;display:flex;width:100%;max-width:100%;box-sizing:border-box;flex-direction:row;padding:0;margin:0;font-family:var(--font-family-sans);font-weight:var(--font-rg);list-style:none}@media (min-width: 768px){:host{padding:0 calc(var(--space-unit) * 2)}}`;
 
 const ZStepper = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h(index.Host, { key: 'aa8c3ef6cca54442496944c748d1c224814ecc1a', role: "navigation" }, index.h("slot", { key: '9065c4077e08c252406e618e548f13aac5ed40d9' })));
+        return (index.h(index.Host, { key: 'a2304ed385101b23b71ec650438bea2d10213186', role: "navigation" }, index.h("slot", { key: '4ddfd1b462d8d5b959cd05d3a7ba9f868b416c4c' })));
     }
 };
-ZStepper.style = ZStepperStyle0;
+ZStepper.style = stylesCss();
 
 exports.z_stepper = ZStepper;
-
-//# sourceMappingURL=z-stepper.cjs.entry.js.map

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

@@ -1,25 +1,28 @@
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
+var index = require('./index-2H1EJ2Tl.js');
+require('./z-tbody.cjs.entry.js');
+require('./z-tfoot.cjs.entry.js');
+require('./z-thead.cjs.entry.js');
+require('./z-tr.cjs.entry.js');
+require('./utils-Ctc6JP2n.js');
+require('./index-wGaSHN1_.js');
+require('./breakpoints-B7vFm-3T.js');
+require('./z-td.cjs.entry.js');
+require('./z-th.cjs.entry.js');
 
-const index = require('./index-96af6326.js');
-require('./index-2dff20f5.js');
-require('./index-012853a0.js');
-require('./index-86a8a3a4.js');
-require('./index-c38e5b9e.js');
-require('./utils-b1859d65.js');
-require('./index-e30d0503.js');
-require('./breakpoints-8a1e87e0.js');
-require('./index-cb280932.js');
-require('./index-1d7a50cc.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 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 ZTable = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
+        /**
+         * Whether the table cells should show a border between them.
+         */
         this.bordered = false;
+        /**
+         * Whether the table contains some expandable rows.
+         */
         this.expandable = false;
     }
     updateExpandable() {
@@ -45,12 +48,10 @@ const ZTable = class {
         (_a = this.expandableMutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
     }
     render() {
-        return (index.h(index.Host, { key: 'a37bf2d018aedf198e11248d9952c062deddc545', expandable: this.expandable }, index.h("div", { key: 'a769b79ee55eb5425bb6c72059437f051967c3b3', class: "table", role: "table" }, index.h("slot", { key: '0ba782144cc2f139484954747d530d6f1c606a0d' }))));
+        return (index.h(index.Host, { key: '19ac617eed1f9fc7c962e5f34e30c1c0feb0fa87', expandable: this.expandable }, index.h("div", { key: '648951c6bb94c6cc149f593ca42a50eafa287337', class: "table", role: "table" }, index.h("slot", { key: '08fb16a4c3ee50be9634833b2227593ba8651c01' }))));
     }
     get host() { return index.getElement(this); }
 };
-ZTable.style = ZTableStyle0;
+ZTable.style = stylesCss();
 
 exports.z_table = ZTable;
-
-//# sourceMappingURL=z-table.cjs.entry.js.map

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

@@ -1,12 +1,17 @@
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
+var index = require('./index-2H1EJ2Tl.js');
 
-const index = require('./index-2dff20f5.js');
-require('./index-96af6326.js');
+const stylesCss = () => `:host{display:block;box-sizing:border-box}`;
 
+const ZTbody = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+    }
+    render() {
+        return (index.h(index.Host, { key: '62b5b227fbdaac2918101db68c60cb68ae9e1ed8', role: "rowgroup" }, index.h("slot", { key: 'ecfc5c26435fb7f03b5e9ea89111499b3b75f3ca' })));
+    }
+};
+ZTbody.style = stylesCss();
 
-
-exports.z_tbody = index.ZTbody;
-
-//# sourceMappingURL=z-tbody.cjs.entry.js.map
+exports.z_tbody = ZTbody;

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

@@ -1,13 +1,59 @@
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
+var index = require('./index-2H1EJ2Tl.js');
+var index$1 = require('./index-wGaSHN1_.js');
 
-const index = require('./index-cb280932.js');
-require('./index-96af6326.js');
-require('./index-e30d0503.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 ZTd = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.colspanChange = index.createEvent(this, "colspanChange", 6);
+        /**
+         * Whether the cell should stick.
+         */
+        this.sticky = false;
+        /**
+         * Enables the contextual menu.
+         * Can be set to "hover" or "always" to show the button only on cell hover or always.
+         * Set a nullish value to hide the menu button.
+         */
+        this.showMenu = null;
+        /**
+         * Set the popover position, the default is "auto".
+         */
+        this.popoverPosition = index$1.PopoverPosition.AUTO;
+        /**
+         * Store the open state of the menu.
+         */
+        this.isMenuOpen = false;
+    }
+    updateColspan() {
+        if (this.colspan) {
+            this.host.style.gridColumn = `span ${this.colspan}`;
+        }
+        else {
+            this.host.style.removeProperty("grid-column");
+        }
+        this.colspanChange.emit(this.colspan || 1);
+    }
+    onMenuButtonClick(ev) {
+        ev.stopPropagation();
+        this.popoverEl.open = !this.popoverEl.open;
+    }
+    componentWillLoad() {
+        this.updateColspan();
+    }
+    render() {
+        return (index.h(index.Host, { key: '65102becbf97d8f480c9e9c140965963e1b829a3', role: "cell", "menu-open": this.isMenuOpen }, index.h("div", { key: 'a91b370f73c8684038a75db6483ec88dd8b3f4d6', class: "cell--content" }, index.h("slot", { key: '2a9451f11c23f2dae4047b360d8af92606ce3e76' }), this.showMenu && (index.h("div", { key: '0a4f91d75fce51604253ada3775f06ec9c230ce0', class: "cell--menu-container prevent-expand" }, index.h("z-button", { key: 'fe6623726d645f2796ff88246bd887b2e5ec9396', variant: index$1.ButtonVariant.TERTIARY, icon: "contextual-menu", size: index$1.ControlSize.X_SMALL, ref: (el) => (this.menuTrigger = el), onClick: this.onMenuButtonClick.bind(this) }), index.h("z-popover", { key: '1ce2729d0209e5218515c52f4425c3f02b05c1bd', class: "cell-popover", ref: (el) => (this.popoverEl = el), bindTo: this.menuTrigger, onOpenChange: (event) => (this.isMenuOpen = event.detail.open), position: this.popoverPosition }, index.h("slot", { key: 'b060d20d5e15380360f8bab9d502f85eb70a7995', name: "contextual-menu" })))))));
+    }
+    get host() { return index.getElement(this); }
+    static get watchers() { return {
+        "colspan": [{
+                "updateColspan": 0
+            }]
+    }; }
+};
+ZTd.style = stylesCss();
 
-
-exports.z_td = index.ZTd;
-
-//# sourceMappingURL=z-td.cjs.entry.js.map
+exports.z_td = ZTd;

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

@@ -1,12 +1,21 @@
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
+var index = require('./index-2H1EJ2Tl.js');
 
-const index = require('./index-012853a0.js');
-require('./index-96af6326.js');
+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 ZTfoot = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        /**
+         * If true, the footer will be stuck to the bottom of the table.
+         */
+        this.sticky = false;
+    }
+    render() {
+        return (index.h(index.Host, { key: '0ecae481f9b2e870d3f4d8898755d15e561154b7', role: "rowgroup", tabIndex: -1 }, index.h("slot", { key: '7d028233f9e6ff2bfdbcc5b00841db5eb5020643' })));
+    }
+};
+ZTfoot.style = stylesCss();
 
-
-exports.z_tfoot = index.ZTfoot;
-
-//# sourceMappingURL=z-tfoot.cjs.entry.js.map
+exports.z_tfoot = ZTfoot;

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

@@ -1,13 +1,86 @@
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
+var index = require('./index-2H1EJ2Tl.js');
+var index$1 = require('./index-wGaSHN1_.js');
 
-const index = require('./index-1d7a50cc.js');
-require('./index-96af6326.js');
-require('./index-e30d0503.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 ZTh = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.sort = index.createEvent(this, "sort", 7);
+        /**
+         * Enables the contextual menu.
+         * Can be set to "hover" or "always" to show the button only on cell hover or always.
+         * Set a nullish value to hide the menu button.
+         */
+        this.showMenu = null;
+        /**
+         * Enables the sorting button.
+         * Can be set to "hover" or "always" to show the button only on cell hover or always.
+         * Set a nullish value to hide the sort button.
+         */
+        this.showSorting = null;
+        /**
+         * Whether the cell should stick.
+         */
+        this.sticky = false;
+        /**
+         * Sorted state of the column.
+         */
+        this.sorted = false;
+        /**
+         * Set popover position.
+         */
+        this.popoverPosition = index$1.PopoverPosition.AUTO;
+        /**
+         * Store the open state of the menu.
+         */
+        this.isMenuOpen = false;
+    }
+    /**
+     * Get the value to set to the `aria-sort` attribute based on the current sort direction.
+     */
+    get ariaSortDirection() {
+        if (!this.sortDirection) {
+            return null;
+        }
+        return this.sortDirection === index$1.SortDirection.ASC ? "ascending" : "descending";
+    }
+    /**
+     * Handle the click on the sort button.
+     * @fires sort
+     */
+    handleSort() {
+        if (!this.sortDirection) {
+            this.sorted = false;
+            return;
+        }
+        this.sortDirection = this.sortDirection === index$1.SortDirection.ASC ? index$1.SortDirection.DESC : index$1.SortDirection.ASC;
+        this.sorted = true;
+        this.sort.emit({ sortDirection: this.sortDirection });
+    }
+    updateColspan() {
+        if (this.colspan) {
+            this.host.style.gridColumn = `span ${this.colspan}`;
+        }
+        else {
+            this.host.style.removeProperty("grid-column");
+        }
+    }
+    componentWillLoad() {
+        this.updateColspan();
+    }
+    render() {
+        return (index.h(index.Host, { key: '326c1c5968ebd22021f5bc88d3c98cd558c31783', role: "columnheader", "menu-open": this.isMenuOpen, "aria-sort": this.ariaSortDirection, sortable: this.showSorting }, index.h("div", { key: '935a692b283f76362fe5e3cc7cc2f8e38424f407', class: "cell--content" }, index.h("slot", { key: 'cce03a04640d1ee72e2e202f7526203136f4bb50' }), this.showSorting && (index.h("button", { key: 'c161a473f0b4e6d6b1a478ad0530c6d0938fc1a1', class: "z-th--sort-button", type: "button", onClick: this.handleSort.bind(this) }, index.h("z-icon", { key: '4b9b3aab3b0ce9f14c2a181860c834098077dee3', name: this.sortDirection === index$1.SortDirection.DESC ? "arrow-simple-up" : "arrow-simple-down", width: 14, height: 14 }))), this.showMenu && (index.h("div", { key: 'cd3b0e8a851c8a414229f4976b8a227d99981ce0', class: "cell--menu-container" }, index.h("z-button", { key: '3d37441174ff3ea540c0aec582bc91c7c644c818', variant: index$1.ButtonVariant.TERTIARY, icon: "contextual-menu", size: index$1.ControlSize.X_SMALL, ref: (el) => (this.menuTrigger = el), onClick: () => (this.popoverEl.open = !this.popoverEl.open) }), index.h("z-popover", { key: '59de83e276e82705588041660e7612080b6636e8', ref: (el) => (this.popoverEl = el), bindTo: this.menuTrigger, onOpenChange: (event) => (this.isMenuOpen = event.detail.open), position: this.popoverPosition }, index.h("slot", { key: 'c92e8e0a5c617251dc6741ff4d9cbe943f224111', name: "contextual-menu" })))))));
+    }
+    get host() { return index.getElement(this); }
+    static get watchers() { return {
+        "colspan": [{
+                "updateColspan": 0
+            }]
+    }; }
+};
+ZTh.style = stylesCss();
 
-
-exports.z_th = index.ZTh;
-
-//# sourceMappingURL=z-th.cjs.entry.js.map
+exports.z_th = ZTh;

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

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

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

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