npm - @zanichelli/albe-web-components - Versions diffs - 17.0.5-RC1 → 17.0.5 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1437) hide show

package/www/index.html CHANGED Viewed

@@ -1,3 +1,3 @@
-<!doctype html><html dir="ltr" lang="en"><head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0"> <title>Albe test application</title> <link rel="stylesheet" type="text/css" href="/build/p-0c3d324c.css"> <link rel="modulepreload" href="/build/p-9fe1e807.js"><link rel="modulepreload" href="/build/p-5145a606.js"><link rel="modulepreload" href="/build/p-75c4a726.js"><link rel="modulepreload" href="/build/p-b34993de.js"><link rel="modulepreload" href="/build/p-e691c0b8.js"><script type="module" src="/build/p-9fe1e807.js" data-stencil data-resources-url="/build/" data-stencil-namespace="web-components-library"></script> <script nomodule="" src="/build/web-components-library.js" data-stencil></script> </head> <body> <header> <z-app-header> <h1 slot="title">Albe test app</h1> </z-app-header> </header> <main></main> <style>body {
+<!doctype html><html dir="ltr" lang="en"><head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0"> <title>Albe test application</title> <link rel="stylesheet" type="text/css" href="/build/p-a35437c8.css"> <link rel="modulepreload" href="/build/p-44929c67.js"><link rel="modulepreload" href="/build/p-5145a606.js"><link rel="modulepreload" href="/build/p-75c4a726.js"><link rel="modulepreload" href="/build/p-b34993de.js"><link rel="modulepreload" href="/build/p-e691c0b8.js"><script type="module" src="/build/p-44929c67.js" data-stencil data-resources-url="/build/" data-stencil-namespace="web-components-library"></script> <script nomodule="" src="/build/web-components-library.js" data-stencil></script> </head> <body> <header> <z-app-header> <h1 slot="title">Albe test app</h1> </z-app-header> </header> <main></main> <style>body {
       margin: 0;
     }</style> </body></html>

package/dist/cjs/index-0b836780.js DELETED Viewed

@@ -1,21 +0,0 @@
-'use strict';
-const index = require('./index-96af6326.js');
-const stylesCss = ":host{display:block;-webkit-box-sizing:border-box;box-sizing:border-box;border-top:1px solid var(--color-surface03);border-bottom:1px solid var(--color-surface03)}:host([sticky]){position:-webkit-sticky;position:sticky;z-index:1;bottom:0;background-color:var(--color-surface01)}";
-const ZTfootStyle0 = stylesCss;
-const ZTfoot = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-        this.sticky = false;
-    }
-    render() {
-        return (index.h(index.Host, { key: '86efe92f23250e482ef7e9c0b646d28f294214c6', role: "rowgroup" }, index.h("slot", { key: '07ff4d3ad791419325d865160a229b228d9f0626' })));
-    }
-};
-ZTfoot.style = ZTfootStyle0;
-exports.ZTfoot = ZTfoot;
-//# sourceMappingURL=index-0b836780.js.map

package/dist/cjs/index-0b836780.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"file":"index-0b836780.js","mappings":";;;;AAAA,MAAM,SAAS,GAAG,wRAAwR,CAAC;AAC3S,qBAAe,SAAS;;MCUX,MAAM;;;sBAKR,KAAK;;IAEd,MAAM;QACJ,QACEA,QAACC,UAAI,qDAAC,IAAI,EAAC,UAAU,IACnBD,oEAAa,CACR,EACP;KACH;;;;;;","names":["h","Host"],"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 role=\"rowgroup\">\n <slot></slot>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/cjs/index-32d5273a.js DELETED Viewed

@@ -1,21 +0,0 @@
-'use strict';
-const index = require('./index-96af6326.js');
-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;-webkit-box-sizing:border-box;box-sizing:border-box}:host([sticky]){position:-webkit-sticky;position:sticky;z-index:2;top:0;-webkit-box-shadow:0 2px 4px -2px var(--shadow-color-base);box-shadow:0 2px 4px -2px var(--shadow-color-base)}";
-const ZTheadStyle0 = stylesCss;
-const ZThead = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-        this.sticky = false;
-    }
-    render() {
-        return (index.h(index.Host, { key: 'ef0a3c17f7163b6bdb0d43d21cb1ac6607f53e7c', role: "rowgroup" }, index.h("slot", { key: '80b4a406f26e0c637972e663d99707431d39e9a4' })));
-    }
-};
-ZThead.style = ZTheadStyle0;
-exports.ZThead = ZThead;
-//# sourceMappingURL=index-32d5273a.js.map

package/dist/cjs/index-32d5273a.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"file":"index-32d5273a.js","mappings":";;;;AAAA,MAAM,SAAS,GAAG,sYAAsY,CAAC;AACzZ,qBAAe,SAAS;;MCUX,MAAM;;;sBAKR,KAAK;;IAEd,MAAM;QACJ,QACEA,QAACC,UAAI,qDAAC,IAAI,EAAC,UAAU,IACnBD,oEAAa,CACR,EACP;KACH;;;;;;","names":["h","Host"],"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","import {Component, 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 /**\n * If true, the header will be stuck to the top of the table.\n */\n @Prop({reflect: true})\n sticky = false;\n\n render(): HTMLZTheadElement {\n return (\n <Host role=\"rowgroup\">\n <slot></slot>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/cjs/index-6c84c7e8.js DELETED Viewed

@@ -1,47 +0,0 @@
-'use strict';
-const index = require('./index-96af6326.js');
-const index$1 = require('./index-f5ebcaa2.js');
-const stylesCss = ":host{position:relative;display:-ms-flexbox;display:flex;max-width:100%;-ms-flex-align:center;align-items:center;padding: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,*{-webkit-box-sizing:border-box;box-sizing:border-box}:host([sticky]){position:-webkit-sticky;position:sticky;z-index:1;top:0;left:0;-webkit-box-shadow:8px 0 16px -8px var(--shadow-color-base);box-shadow:8px 0 16px -8px var(--shadow-color-base)}:host([menu-open]){z-index:2}.cell--content{display:-ms-flexbox;display:flex;width:100%;height:100%;-ms-flex-align:center;align-items:center}:host([show-menu]) .cell--content{-webkit-column-gap:var(--space-unit);-moz-column-gap:var(--space-unit);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 = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-        this.colspanChange = index.createEvent(this, "colspanChange", 6);
-        this.colspan = undefined;
-        this.sticky = false;
-        this.showMenu = null;
-        this.popoverPosition = index$1.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 (index.h(index.Host, { key: 'f7de551489427a62939270e957e45f4dbfd2e276', role: "cell", "menu-open": this.isMenuOpen }, index.h("div", { key: 'c3bab70a1017dcf030e0a57d36da2a46472b6d94', class: "cell--content" }, index.h("slot", { key: 'bab52a837654d4d72d34a04a6fac360f46d00485' }), this.showMenu && (index.h("div", { key: '657f551215f6b9c6cdcc0a5c3727dc1270fa5fe5', class: "cell--menu-container prevent-expand" }, index.h("z-button", { key: '42b96474d307462bf80defd4014e94dc479fde65', 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: '02c317216820acbc543100ca4368a2f441eaae9f', 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: 'b765e4b58ed69fe10a8337e929b0dc156cfce650', name: "contextual-menu" })))))));
-    }
-    get host() { return index.getElement(this); }
-    static get watchers() { return {
-        "colspan": ["updateColspan"]
-    }; }
-};
-ZTd.style = ZTdStyle0;
-exports.ZTd = ZTd;
-//# sourceMappingURL=index-6c84c7e8.js.map

package/dist/cjs/index-6c84c7e8.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"file":"index-6c84c7e8.js","mappings":";;;;;AAAA,MAAM,SAAS,GAAG,wyCAAwyC,CAAC;AAC3zC,kBAAe,SAAS;;MCWX,GAAG;;;;;sBAaL,KAAK;wBAQkB,IAAI;+BAMAA,uBAAe,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,QACEC,QAACC,UAAI,qDACH,IAAI,EAAC,MAAM,eACA,IAAI,CAAC,UAAU,IAE1BD,kEAAK,KAAK,EAAC,eAAe,IACxBA,oEAAa,EACZ,IAAI,CAAC,QAAQ,KACZA,kEAAK,KAAK,EAAC,qCAAqC,IAC9CA,uEACE,OAAO,EAAEE,qBAAa,CAAC,QAAQ,EAC/B,IAAI,EAAC,iBAAiB,EACtB,IAAI,EAAEC,mBAAW,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,EACFH,wEACE,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,IAE9BA,mEAAM,IAAI,EAAC,iBAAiB,GAAQ,CAC1B,CACR,CACP,CACG,CACD,EACP;KACH;;;;;;;;;;","names":["PopoverPosition","h","Host","ButtonVariant","ControlSize"],"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/cjs/index-72dcc0c1.js DELETED Viewed

@@ -1,67 +0,0 @@
-'use strict';
-const index = require('./index-96af6326.js');
-const index$1 = require('./index-f5ebcaa2.js');
-const stylesCss = ":host{position:relative;display:-ms-flexbox;display:flex;max-width:100%;-ms-flex-align:center;align-items:center;padding: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,*{-webkit-box-sizing:border-box;box-sizing:border-box}:host([sticky]){position:-webkit-sticky;position:sticky;z-index:1;top:0;left:0;-webkit-box-shadow:8px 0 16px -8px var(--shadow-color-base);box-shadow:8px 0 16px -8px var(--shadow-color-base)}:host([menu-open]){z-index:2}.cell--content{display:-ms-flexbox;display:flex;width:100%;height:100%;-ms-flex-align:center;align-items:center}:host([show-menu]) .cell--content{-webkit-column-gap:var(--space-unit);-moz-column-gap:var(--space-unit);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{-webkit-column-gap:var(--space-unit);-moz-column-gap:var(--space-unit);column-gap:var(--space-unit)}.z-th--sort-button{padding:0;border:none;background-color:transparent;cursor:pointer;outline:none}@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:\"\"}:host([sorted]) .z-th--sort-button::after,.z-th--sort-button:focus:focus-visible::after{-webkit-box-shadow:var(--shadow-focus-primary);box-shadow:var(--shadow-focus-primary)}";
-const ZThStyle0 = stylesCss;
-const ZTh = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-        this.sort = index.createEvent(this, "sort", 7);
-        this.colspan = undefined;
-        this.showMenu = null;
-        this.showSorting = null;
-        this.sticky = false;
-        this.sortDirection = undefined;
-        this.sorted = false;
-        this.popoverPosition = index$1.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 === 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: '29d00b9cca980ef969f1e5437497fb8d3813fcc0', role: "columnheader", "menu-open": this.isMenuOpen, "aria-sort": this.ariaSortDirection, sortable: this.showSorting }, index.h("div", { key: 'e1aa40618413575fedcc7e627280669e064054f8', class: "cell--content" }, index.h("slot", { key: '842da5d5c6c500e8706203ed07a0dd243d26b42c' }), this.showSorting && (index.h("button", { key: 'ef2473dc91e989eb398a667c8a73bb7579082258', class: "z-th--sort-button", type: "button", onClick: this.handleSort.bind(this) }, index.h("z-icon", { key: '17c11e9ada49d94c13173380fafeaff4deae1ec9', name: this.sortDirection === index$1.SortDirection.DESC ? "arrow-simple-up" : "arrow-simple-down", width: 14, height: 14 }))), this.showMenu && (index.h("div", { key: 'db09ba4db62162a09966b0554d80bcc4f1e254a8', class: "cell--menu-container" }, index.h("z-button", { key: 'fb3027cdca8658a2616a5612b02641f8a5dafeb0', 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: '25c3d7bd294a9384e606220930073e530db7c0ae', ref: (el) => (this.popoverEl = el), bindTo: this.menuTrigger, onOpenChange: (event) => (this.isMenuOpen = event.detail.open), position: this.popoverPosition }, index.h("slot", { key: '95be7b90aee8feb2904a982fe59355e461df9c46', name: "contextual-menu" })))))));
-    }
-    get host() { return index.getElement(this); }
-    static get watchers() { return {
-        "colspan": ["updateColspan"]
-    }; }
-};
-ZTh.style = ZThStyle0;
-exports.ZTh = ZTh;
-//# sourceMappingURL=index-72dcc0c1.js.map

package/dist/cjs/index-72dcc0c1.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"file":"index-72dcc0c1.js","mappings":";;;;;AAAA,MAAM,SAAS,GAAG,qlFAAqlF,CAAC;AACxmF,kBAAe,SAAS;;MCYX,GAAG;;;;;wBAekB,IAAI;2BAQD,IAAI;sBAM9B,KAAK;;sBAYW,KAAK;+BAMZA,uBAAe,CAAC,IAAI;0BAMzB,KAAK;;;;;IAiBlB,IAAY,iBAAiB;QAC3B,IAAI,CAAC,IAAI,CAAC,aAAa,EAAE;YACvB,OAAO,IAAI,CAAC;SACb;QAED,OAAO,IAAI,CAAC,aAAa,KAAKC,qBAAa,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,KAAKA,qBAAa,CAAC,GAAG,GAAGA,qBAAa,CAAC,IAAI,GAAGA,qBAAa,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,QACEC,QAACC,UAAI,qDACH,IAAI,EAAC,cAAc,eACR,IAAI,CAAC,UAAU,eACf,IAAI,CAAC,iBAAiB,EACjC,QAAQ,EAAE,IAAI,CAAC,WAAW,IAE1BD,kEAAK,KAAK,EAAC,eAAe,IACxBA,oEAAa,EACZ,IAAI,CAAC,WAAW,KACfA,qEACE,KAAK,EAAC,mBAAmB,EACzB,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,IAEnCA,qEACE,IAAI,EAAE,IAAI,CAAC,aAAa,KAAKD,qBAAa,CAAC,IAAI,GAAG,iBAAiB,GAAG,mBAAmB,EACzF,KAAK,EAAE,EAAE,EACT,MAAM,EAAE,EAAE,GACV,CACK,CACV,EACA,IAAI,CAAC,QAAQ,KACZC,kEAAK,KAAK,EAAC,sBAAsB,IAC/BA,uEACE,OAAO,EAAEE,qBAAa,CAAC,QAAQ,EAC/B,IAAI,EAAC,iBAAiB,EACtB,IAAI,EAAEC,mBAAW,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,EACFH,wEACE,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,IAE9BA,mEAAM,IAAI,EAAC,iBAAiB,GAAQ,CAC1B,CACR,CACP,CACG,CACD,EACP;KACH;;;;;;;;;;","names":["PopoverPosition","SortDirection","h","Host","ButtonVariant","ControlSize"],"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 padding: 0;\n border: none;\n background-color: transparent;\n cursor: pointer;\n outline: none;\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\n:host([sorted]) .z-th--sort-button::after,\n.z-th--sort-button:focus:focus-visible::after {\n box-shadow: var(--shadow-focus-primary);\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/cjs/index-b69475c3.js DELETED Viewed

@@ -1,20 +0,0 @@
-'use strict';
-const index = require('./index-96af6326.js');
-const stylesCss = ":host{display:block;-webkit-box-sizing:border-box;box-sizing:border-box}";
-const ZTbodyStyle0 = stylesCss;
-const ZTbody = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-    }
-    render() {
-        return (index.h(index.Host, { key: 'b704110bd5823c470d18953bc24db09da7c66e8a', role: "rowgroup" }, index.h("slot", { key: 'd71e881ccc992ac2a8e97efa8617d33c63ae1003' })));
-    }
-};
-ZTbody.style = ZTbodyStyle0;
-exports.ZTbody = ZTbody;
-//# sourceMappingURL=index-b69475c3.js.map

package/dist/cjs/index-b69475c3.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"file":"index-b69475c3.js","mappings":";;;;AAAA,MAAM,SAAS,GAAG,0EAA0E,CAAC;AAC7F,qBAAe,SAAS;;MCUX,MAAM;;;;IACjB,MAAM;QACJ,QACEA,QAACC,UAAI,qDAAC,IAAI,EAAC,UAAU,IACnBD,oEAAa,CACR,EACP;KACH;;;;;;","names":["h","Host"],"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/cjs/index-c286015f.js DELETED Viewed

@@ -1,59 +0,0 @@
-'use strict';
-const index = require('./index-96af6326.js');
-const utils = require('./utils-d08d4b80.js');
-require('./index-6c84c7e8.js');
-require('./index-72dcc0c1.js');
-const stylesCss = ":host{--columns:1;display:grid;-webkit-box-sizing:border-box;box-sizing:border-box;grid-auto-flow:column;grid-template-columns:var(--z-table--expand-button-size, 0) repeat(var(--columns), minmax(128px, 1fr))}*{-webkit-box-sizing:border-box;box-sizing:border-box}.z-tr--expand-button-container,::slotted(*){border-bottom:var(--z-table--cells-bottom-border-size, var(--border-size-small)) solid var(--color-surface03)}::slotted(*:not(:last-child)){border-right:var(--z-table--cell-left-border, none)}:host([expandable]){--show-expandable-button:visible;cursor:pointer}:host([expandable]) ::slotted(*){grid-row:1}:host([expandable]) ::slotted(:nth-last-child(2)){border-right:none}:host([expandable]) ::slotted(*:last-child){border-left:0;grid-column:1 / span calc(var(--columns) + 1);grid-row:2}:host([expandable]:not([expanded])) ::slotted(*:last-child){display:none}:host([expanded]){margin-bottom:4px;-webkit-box-shadow:0 4px 4px -2px var(--shadow-color-base);box-shadow:0 4px 4px -2px var(--shadow-color-base)}:host([expanded]) .z-tr--expand-button-container,:host([expanded]) ::slotted(*){background-color:var(--color-background)}.z-tr--expand-button-container{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;background-color:var(--z-table--cells-background, var(--color-surface01))}.z-tr--expand-button-container button{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;padding:0;border:none;margin:auto;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;cursor:pointer;visibility:var(--show-expandable-button, hidden)}.z-tr--expand-button-container button:focus{-webkit-box-shadow:var(--shadow-focus-primary);box-shadow:var(--shadow-focus-primary);outline:none}.z-tr--expand-button-container button z-icon{--z-icon-width:16px;--z-icon-height:16px}";
-const ZTrStyle0 = stylesCss;
-const ZTr = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-        this.expand = index.createEvent(this, "expand", 7);
-        this.expandable = false;
-        this.expanded = false;
-        this.expandableContentId = undefined;
-    }
-    updateColumns() {
-        const cells = Array.from(this.host.querySelectorAll("z-td, z-th"));
-        if (this.expandable) {
-            cells.pop();
-        }
-        const columns = cells.map((cell) => cell.colspan || 1).reduce((a, b) => a + b, 0);
-        this.host.style.setProperty("--columns", `${columns}`);
-        if (this.expandable) {
-            const expandableContent = cells.pop();
-            expandableContent.id = expandableContent.id || `z-tr-expandable-content-${utils.randomId()}`;
-            this.expandableContentId = expandableContent.id;
-        }
-    }
-    /**
-     * Handle click on row.
-     * Skip expansion if the click is on a element with `prevent-expand` css class.
-     */
-    onRowClick(event) {
-        const preventExpand = event.target.closest(".prevent-expand");
-        if (!this.expandable || preventExpand) {
-            return;
-        }
-        this.expanded = !this.expanded;
-        this.expand.emit({ expanded: this.expanded });
-    }
-    componentWillLoad() {
-        this.updateColumns();
-    }
-    render() {
-        return (index.h(index.Host, { key: '467c0a01f3c28851b85d47bd178e6555cbb3f57f', role: "row", onClick: this.onRowClick.bind(this), expanded: this.expanded }, index.h("div", { key: 'ff2c7ecbc7775ee60951a3df3e7ecf67a6d77362', class: "z-tr--expand-button-container" }, this.expandable && (index.h("button", { key: 'fe1297aafa51d66acd09794bf47333079bc90604', "aria-expanded": this.expanded ? "true" : "false", "aria-label": this.expanded ? "Comprimi riga" : "Espandi riga", "aria-controls": this.expandableContentId, type: "button" }, index.h("z-icon", { key: '517ffd66223d3ca7dc093aaa730455a02e6a61fd', name: this.expanded ? "minus-circled" : "plus-circled" })))), index.h("slot", { key: 'cead9ff3b1da3cf20982bdc87413414925264c40', onSlotchange: this.updateColumns.bind(this) })));
-    }
-    get host() { return index.getElement(this); }
-    static get watchers() { return {
-        "expandable": ["updateColumns"]
-    }; }
-};
-ZTr.style = ZTrStyle0;
-exports.ZTr = ZTr;
-//# sourceMappingURL=index-c286015f.js.map

package/dist/cjs/index-c286015f.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"file":"index-c286015f.js","mappings":";;;;;;;AAAA,MAAM,SAAS,GAAG,q4DAAq4D,CAAC;AACx5D,kBAAe,SAAS;;MCeX,GAAG;;;;0BAaD,KAAK;wBAMP,KAAK;;;IAeN,aAAa;QACrB,MAAM,KAAK,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAkC,YAAY,CAAC,CAAC,CAAC;QACpG,IAAI,IAAI,CAAC,UAAU,EAAE;YACnB,KAAK,CAAC,GAAG,EAAE,CAAC;SACb;QAED,MAAM,OAAO,GAAG,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,KAAK,IAAI,CAAC,OAAO,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC,CAAC;QAClF,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,WAAW,EAAE,GAAG,OAAO,EAAE,CAAC,CAAC;QAEvD,IAAI,IAAI,CAAC,UAAU,EAAE;YACnB,MAAM,iBAAiB,GAAG,KAAK,CAAC,GAAG,EAAE,CAAC;YACtC,iBAAiB,CAAC,EAAE,GAAG,iBAAiB,CAAC,EAAE,IAAI,2BAA2BA,cAAQ,EAAE,EAAE,CAAC;YACvF,IAAI,CAAC,mBAAmB,GAAG,iBAAiB,CAAC,EAAE,CAAC;SACjD;KACF;;;;;IAMO,UAAU,CAAC,KAAiB;QAClC,MAAM,aAAa,GAAI,KAAK,CAAC,MAAsB,CAAC,OAAO,CAAC,iBAAiB,CAAC,CAAC;QAC/E,IAAI,CAAC,IAAI,CAAC,UAAU,IAAI,aAAa,EAAE;YACrC,OAAO;SACR;QAED,IAAI,CAAC,QAAQ,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC;QAC/B,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,EAAC,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAC,CAAC,CAAC;KAC7C;IAED,iBAAiB;QACf,IAAI,CAAC,aAAa,EAAE,CAAC;KACtB;IAED,MAAM;QACJ,QACEC,QAACC,UAAI,qDACH,IAAI,EAAC,KAAK,EACV,OAAO,EAAE,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,EACnC,QAAQ,EAAE,IAAI,CAAC,QAAQ,IAEvBD,kEAAK,KAAK,EAAC,+BAA+B,IACvC,IAAI,CAAC,UAAU,KACdA,sFACiB,IAAI,CAAC,QAAQ,GAAG,MAAM,GAAG,OAAO,gBACnC,IAAI,CAAC,QAAQ,GAAG,eAAe,GAAG,cAAc,mBAC7C,IAAI,CAAC,mBAAmB,EACvC,IAAI,EAAC,QAAQ,IAEbA,qEAAQ,IAAI,EAAE,IAAI,CAAC,QAAQ,GAAG,eAAe,GAAG,cAAc,GAAW,CAClE,CACV,CACG,EACNA,mEAAM,YAAY,EAAE,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,GAAS,CACrD,EACP;KACH;;;;;;;;;;","names":["randomId","h","Host"],"sources":["src/components/table/z-tr/styles.css?tag=z-tr&encapsulation=shadow","src/components/table/z-tr/index.tsx"],"sourcesContent":[":host {\n /* number of columns of the row. will be set in component's ts code */\n --columns: 1;\n\n display: grid;\n box-sizing: border-box;\n grid-auto-flow: column;\n grid-template-columns: var(--z-table--expand-button-size, 0) repeat(var(--columns), minmax(128px, 1fr));\n}\n\n* {\n box-sizing: border-box;\n}\n\n.z-tr--expand-button-container,\n::slotted(*) {\n border-bottom: var(--z-table--cells-bottom-border-size, var(--border-size-small)) solid var(--color-surface03);\n}\n\n::slotted(*:not(:last-child)) {\n border-right: var(--z-table--cell-left-border, none);\n}\n\n:host([expandable]) {\n --show-expandable-button: visible;\n\n cursor: pointer;\n}\n\n:host([expandable]) ::slotted(*) {\n grid-row: 1;\n}\n\n:host([expandable]) ::slotted(:nth-last-child(2)) {\n border-right: none;\n}\n\n:host([expandable]) ::slotted(*:last-child) {\n border-left: 0;\n grid-column: 1 / span calc(var(--columns) + 1);\n grid-row: 2;\n}\n\n:host([expandable]:not([expanded])) ::slotted(*:last-child) {\n display: none;\n}\n\n:host([expanded]) {\n margin-bottom: 4px; /* prevents shadow to be cut by the next element */\n box-shadow: 0 4px 4px -2px var(--shadow-color-base);\n}\n\n:host([expanded]) .z-tr--expand-button-container,\n:host([expanded]) ::slotted(*) {\n background-color: var(--color-background);\n}\n\n.z-tr--expand-button-container {\n display: flex;\n align-items: center;\n justify-content: center;\n background-color: var(--z-table--cells-background, var(--color-surface01));\n}\n\n.z-tr--expand-button-container button {\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 0;\n border: none;\n margin: auto;\n appearance: none;\n background: transparent;\n cursor: pointer;\n visibility: var(--show-expandable-button, hidden);\n}\n\n.z-tr--expand-button-container button:focus {\n box-shadow: var(--shadow-focus-primary);\n outline: none;\n}\n\n.z-tr--expand-button-container button z-icon {\n --z-icon-width: 16px;\n --z-icon-height: 16px;\n}\n","import {Component, Element, Event, EventEmitter, Host, Listen, Prop, State, Watch, h} from \"@stencil/core\";\nimport {randomId} from \"../../../utils/utils\";\nimport \"../cells/z-td/index\";\nimport \"../cells/z-th/index\";\n\n/**\n * ZTr component.\n * When the row is `expandable`, you can set the `prevent-expand` css class on an interactive element inside the row\n * to prevent the row from expanding.\n * @slot - ZTr content (`z-td` or `z-th`).\n */\n@Component({\n tag: \"z-tr\",\n styleUrl: \"styles.css\",\n shadow: true,\n})\nexport class ZTr {\n @Element() host: HTMLZTrElement;\n\n /**\n * Whether the row is expandable.\n * Use a `z-td` as the last cell of the row for the additional content.\n * It will show a button to expand/collapse the row.\n * The last cell will be hidden until the button or row is clicked.\n *\n * If some element inside the expandable row contains the `prevent-expand` css class,\n * the row will not expand by clicking that element.\n */\n @Prop({reflect: true})\n expandable = false;\n\n /**\n * Whether the row is currently expanded.\n */\n @State()\n expanded = false;\n\n /**\n * HTML Id of the expandable content.\n * It is used to link the button to the content through the `aria-controls` attribute.\n */\n @State()\n expandableContentId: string;\n\n /** Row has been expanded */\n @Event()\n expand: EventEmitter;\n\n @Watch(\"expandable\")\n @Listen(\"colspanchange\")\n protected updateColumns(): void {\n const cells = Array.from(this.host.querySelectorAll<HTMLZTdElement | HTMLZThElement>(\"z-td, z-th\"));\n if (this.expandable) {\n cells.pop();\n }\n\n const columns = cells.map((cell) => cell.colspan || 1).reduce((a, b) => a + b, 0);\n this.host.style.setProperty(\"--columns\", `${columns}`);\n\n if (this.expandable) {\n const expandableContent = cells.pop();\n expandableContent.id = expandableContent.id || `z-tr-expandable-content-${randomId()}`;\n this.expandableContentId = expandableContent.id;\n }\n }\n\n /**\n * Handle click on row.\n * Skip expansion if the click is on a element with `prevent-expand` css class.\n */\n private onRowClick(event: MouseEvent): void {\n const preventExpand = (event.target as HTMLElement).closest(\".prevent-expand\");\n if (!this.expandable || preventExpand) {\n return;\n }\n\n this.expanded = !this.expanded;\n this.expand.emit({expanded: this.expanded});\n }\n\n componentWillLoad(): void {\n this.updateColumns();\n }\n\n render(): HTMLZTrElement {\n return (\n <Host\n role=\"row\"\n onClick={this.onRowClick.bind(this)}\n expanded={this.expanded}\n >\n <div class=\"z-tr--expand-button-container\">\n {this.expandable && (\n <button\n aria-expanded={this.expanded ? \"true\" : \"false\"}\n aria-label={this.expanded ? \"Comprimi riga\" : \"Espandi riga\"}\n aria-controls={this.expandableContentId}\n type=\"button\"\n >\n <z-icon name={this.expanded ? \"minus-circled\" : \"plus-circled\"}></z-icon>\n </button>\n )}\n </div>\n <slot onSlotchange={this.updateColumns.bind(this)}></slot>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/esm/index-08bf4c13.js DELETED Viewed

@@ -1,18 +0,0 @@
-import { r as registerInstance, h, a as Host } from './index-c8ceadeb.js';
-const stylesCss = ":host{display:block;-webkit-box-sizing:border-box;box-sizing:border-box}";
-const ZTbodyStyle0 = stylesCss;
-const ZTbody = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-    }
-    render() {
-        return (h(Host, { key: 'b704110bd5823c470d18953bc24db09da7c66e8a', role: "rowgroup" }, h("slot", { key: 'd71e881ccc992ac2a8e97efa8617d33c63ae1003' })));
-    }
-};
-ZTbody.style = ZTbodyStyle0;
-export { ZTbody as Z };
-//# sourceMappingURL=index-08bf4c13.js.map

package/dist/esm/index-08bf4c13.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"file":"index-08bf4c13.js","mappings":";;AAAA,MAAM,SAAS,GAAG,0EAA0E,CAAC;AAC7F,qBAAe,SAAS;;MCUX,MAAM;;;;IACjB,MAAM;QACJ,QACE,EAAC,IAAI,qDAAC,IAAI,EAAC,UAAU,IACnB,8DAAa,CACR,EACP;KACH;;;;;;","names":[],"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/esm/index-2a6f56f8.js DELETED Viewed

@@ -1,65 +0,0 @@
-import { r as registerInstance, c as createEvent, h, a as Host, g as getElement } from './index-c8ceadeb.js';
-import { P as PopoverPosition, S as SortDirection, B as ButtonVariant, e as ControlSize } from './index-ee40e66b.js';
-const stylesCss = ":host{position:relative;display:-ms-flexbox;display:flex;max-width:100%;-ms-flex-align:center;align-items:center;padding: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,*{-webkit-box-sizing:border-box;box-sizing:border-box}:host([sticky]){position:-webkit-sticky;position:sticky;z-index:1;top:0;left:0;-webkit-box-shadow:8px 0 16px -8px var(--shadow-color-base);box-shadow:8px 0 16px -8px var(--shadow-color-base)}:host([menu-open]){z-index:2}.cell--content{display:-ms-flexbox;display:flex;width:100%;height:100%;-ms-flex-align:center;align-items:center}:host([show-menu]) .cell--content{-webkit-column-gap:var(--space-unit);-moz-column-gap:var(--space-unit);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{-webkit-column-gap:var(--space-unit);-moz-column-gap:var(--space-unit);column-gap:var(--space-unit)}.z-th--sort-button{padding:0;border:none;background-color:transparent;cursor:pointer;outline:none}@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:\"\"}:host([sorted]) .z-th--sort-button::after,.z-th--sort-button:focus:focus-visible::after{-webkit-box-shadow:var(--shadow-focus-primary);box-shadow:var(--shadow-focus-primary)}";
-const ZThStyle0 = stylesCss;
-const ZTh = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        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: '29d00b9cca980ef969f1e5437497fb8d3813fcc0', role: "columnheader", "menu-open": this.isMenuOpen, "aria-sort": this.ariaSortDirection, sortable: this.showSorting }, h("div", { key: 'e1aa40618413575fedcc7e627280669e064054f8', class: "cell--content" }, h("slot", { key: '842da5d5c6c500e8706203ed07a0dd243d26b42c' }), this.showSorting && (h("button", { key: 'ef2473dc91e989eb398a667c8a73bb7579082258', class: "z-th--sort-button", type: "button", onClick: this.handleSort.bind(this) }, h("z-icon", { key: '17c11e9ada49d94c13173380fafeaff4deae1ec9', name: this.sortDirection === SortDirection.DESC ? "arrow-simple-up" : "arrow-simple-down", width: 14, height: 14 }))), this.showMenu && (h("div", { key: 'db09ba4db62162a09966b0554d80bcc4f1e254a8', class: "cell--menu-container" }, h("z-button", { key: 'fb3027cdca8658a2616a5612b02641f8a5dafeb0', 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: '25c3d7bd294a9384e606220930073e530db7c0ae', ref: (el) => (this.popoverEl = el), bindTo: this.menuTrigger, onOpenChange: (event) => (this.isMenuOpen = event.detail.open), position: this.popoverPosition }, h("slot", { key: '95be7b90aee8feb2904a982fe59355e461df9c46', name: "contextual-menu" })))))));
-    }
-    get host() { return getElement(this); }
-    static get watchers() { return {
-        "colspan": ["updateColspan"]
-    }; }
-};
-ZTh.style = ZThStyle0;
-export { ZTh as Z };
-//# sourceMappingURL=index-2a6f56f8.js.map

package/dist/esm/index-2a6f56f8.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"file":"index-2a6f56f8.js","mappings":";;;AAAA,MAAM,SAAS,GAAG,qlFAAqlF,CAAC;AACxmF,kBAAe,SAAS;;MCYX,GAAG;;;;;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":[],"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 padding: 0;\n border: none;\n background-color: transparent;\n cursor: pointer;\n outline: none;\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\n:host([sorted]) .z-th--sort-button::after,\n.z-th--sort-button:focus:focus-visible::after {\n box-shadow: var(--shadow-focus-primary);\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/esm/index-2d88cd2a.js DELETED Viewed

@@ -1,19 +0,0 @@
-import { r as registerInstance, h, a as Host } from './index-c8ceadeb.js';
-const stylesCss = ":host{display:block;-webkit-box-sizing:border-box;box-sizing:border-box;border-top:1px solid var(--color-surface03);border-bottom:1px solid var(--color-surface03)}:host([sticky]){position:-webkit-sticky;position:sticky;z-index:1;bottom:0;background-color:var(--color-surface01)}";
-const ZTfootStyle0 = stylesCss;
-const ZTfoot = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        this.sticky = false;
-    }
-    render() {
-        return (h(Host, { key: '86efe92f23250e482ef7e9c0b646d28f294214c6', role: "rowgroup" }, h("slot", { key: '07ff4d3ad791419325d865160a229b228d9f0626' })));
-    }
-};
-ZTfoot.style = ZTfootStyle0;
-export { ZTfoot as Z };
-//# sourceMappingURL=index-2d88cd2a.js.map

package/dist/esm/index-2d88cd2a.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"file":"index-2d88cd2a.js","mappings":";;AAAA,MAAM,SAAS,GAAG,wRAAwR,CAAC;AAC3S,qBAAe,SAAS;;MCUX,MAAM;;;sBAKR,KAAK;;IAEd,MAAM;QACJ,QACE,EAAC,IAAI,qDAAC,IAAI,EAAC,UAAU,IACnB,8DAAa,CACR,EACP;KACH;;;;;;","names":[],"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 role=\"rowgroup\">\n <slot></slot>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/esm/index-72c3946c.js DELETED Viewed

@@ -1,19 +0,0 @@
-import { r as registerInstance, h, a as Host } from './index-c8ceadeb.js';
-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;-webkit-box-sizing:border-box;box-sizing:border-box}:host([sticky]){position:-webkit-sticky;position:sticky;z-index:2;top:0;-webkit-box-shadow:0 2px 4px -2px var(--shadow-color-base);box-shadow:0 2px 4px -2px var(--shadow-color-base)}";
-const ZTheadStyle0 = stylesCss;
-const ZThead = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        this.sticky = false;
-    }
-    render() {
-        return (h(Host, { key: 'ef0a3c17f7163b6bdb0d43d21cb1ac6607f53e7c', role: "rowgroup" }, h("slot", { key: '80b4a406f26e0c637972e663d99707431d39e9a4' })));
-    }
-};
-ZThead.style = ZTheadStyle0;
-export { ZThead as Z };
-//# sourceMappingURL=index-72c3946c.js.map

package/dist/esm/index-72c3946c.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"file":"index-72c3946c.js","mappings":";;AAAA,MAAM,SAAS,GAAG,sYAAsY,CAAC;AACzZ,qBAAe,SAAS;;MCUX,MAAM;;;sBAKR,KAAK;;IAEd,MAAM;QACJ,QACE,EAAC,IAAI,qDAAC,IAAI,EAAC,UAAU,IACnB,8DAAa,CACR,EACP;KACH;;;;;;","names":[],"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","import {Component, 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 /**\n * If true, the header will be stuck to the top of the table.\n */\n @Prop({reflect: true})\n sticky = false;\n\n render(): HTMLZTheadElement {\n return (\n <Host role=\"rowgroup\">\n <slot></slot>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/esm/index-821e1d1c.js DELETED Viewed

@@ -1,57 +0,0 @@
-import { r as registerInstance, c as createEvent, h, a as Host, g as getElement } from './index-c8ceadeb.js';
-import { r as randomId } from './utils-b924649f.js';
-import './index-fd99721b.js';
-import './index-2a6f56f8.js';
-const stylesCss = ":host{--columns:1;display:grid;-webkit-box-sizing:border-box;box-sizing:border-box;grid-auto-flow:column;grid-template-columns:var(--z-table--expand-button-size, 0) repeat(var(--columns), minmax(128px, 1fr))}*{-webkit-box-sizing:border-box;box-sizing:border-box}.z-tr--expand-button-container,::slotted(*){border-bottom:var(--z-table--cells-bottom-border-size, var(--border-size-small)) solid var(--color-surface03)}::slotted(*:not(:last-child)){border-right:var(--z-table--cell-left-border, none)}:host([expandable]){--show-expandable-button:visible;cursor:pointer}:host([expandable]) ::slotted(*){grid-row:1}:host([expandable]) ::slotted(:nth-last-child(2)){border-right:none}:host([expandable]) ::slotted(*:last-child){border-left:0;grid-column:1 / span calc(var(--columns) + 1);grid-row:2}:host([expandable]:not([expanded])) ::slotted(*:last-child){display:none}:host([expanded]){margin-bottom:4px;-webkit-box-shadow:0 4px 4px -2px var(--shadow-color-base);box-shadow:0 4px 4px -2px var(--shadow-color-base)}:host([expanded]) .z-tr--expand-button-container,:host([expanded]) ::slotted(*){background-color:var(--color-background)}.z-tr--expand-button-container{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;background-color:var(--z-table--cells-background, var(--color-surface01))}.z-tr--expand-button-container button{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;padding:0;border:none;margin:auto;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;cursor:pointer;visibility:var(--show-expandable-button, hidden)}.z-tr--expand-button-container button:focus{-webkit-box-shadow:var(--shadow-focus-primary);box-shadow:var(--shadow-focus-primary);outline:none}.z-tr--expand-button-container button z-icon{--z-icon-width:16px;--z-icon-height:16px}";
-const ZTrStyle0 = stylesCss;
-const ZTr = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        this.expand = createEvent(this, "expand", 7);
-        this.expandable = false;
-        this.expanded = false;
-        this.expandableContentId = undefined;
-    }
-    updateColumns() {
-        const cells = Array.from(this.host.querySelectorAll("z-td, z-th"));
-        if (this.expandable) {
-            cells.pop();
-        }
-        const columns = cells.map((cell) => cell.colspan || 1).reduce((a, b) => a + b, 0);
-        this.host.style.setProperty("--columns", `${columns}`);
-        if (this.expandable) {
-            const expandableContent = cells.pop();
-            expandableContent.id = expandableContent.id || `z-tr-expandable-content-${randomId()}`;
-            this.expandableContentId = expandableContent.id;
-        }
-    }
-    /**
-     * Handle click on row.
-     * Skip expansion if the click is on a element with `prevent-expand` css class.
-     */
-    onRowClick(event) {
-        const preventExpand = event.target.closest(".prevent-expand");
-        if (!this.expandable || preventExpand) {
-            return;
-        }
-        this.expanded = !this.expanded;
-        this.expand.emit({ expanded: this.expanded });
-    }
-    componentWillLoad() {
-        this.updateColumns();
-    }
-    render() {
-        return (h(Host, { key: '467c0a01f3c28851b85d47bd178e6555cbb3f57f', role: "row", onClick: this.onRowClick.bind(this), expanded: this.expanded }, h("div", { key: 'ff2c7ecbc7775ee60951a3df3e7ecf67a6d77362', class: "z-tr--expand-button-container" }, this.expandable && (h("button", { key: 'fe1297aafa51d66acd09794bf47333079bc90604', "aria-expanded": this.expanded ? "true" : "false", "aria-label": this.expanded ? "Comprimi riga" : "Espandi riga", "aria-controls": this.expandableContentId, type: "button" }, h("z-icon", { key: '517ffd66223d3ca7dc093aaa730455a02e6a61fd', name: this.expanded ? "minus-circled" : "plus-circled" })))), h("slot", { key: 'cead9ff3b1da3cf20982bdc87413414925264c40', onSlotchange: this.updateColumns.bind(this) })));
-    }
-    get host() { return getElement(this); }
-    static get watchers() { return {
-        "expandable": ["updateColumns"]
-    }; }
-};
-ZTr.style = ZTrStyle0;
-export { ZTr as Z };
-//# sourceMappingURL=index-821e1d1c.js.map

package/dist/esm/index-821e1d1c.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"file":"index-821e1d1c.js","mappings":";;;;;AAAA,MAAM,SAAS,GAAG,q4DAAq4D,CAAC;AACx5D,kBAAe,SAAS;;MCeX,GAAG;;;;0BAaD,KAAK;wBAMP,KAAK;;;IAeN,aAAa;QACrB,MAAM,KAAK,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAkC,YAAY,CAAC,CAAC,CAAC;QACpG,IAAI,IAAI,CAAC,UAAU,EAAE;YACnB,KAAK,CAAC,GAAG,EAAE,CAAC;SACb;QAED,MAAM,OAAO,GAAG,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,KAAK,IAAI,CAAC,OAAO,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC,CAAC;QAClF,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,WAAW,EAAE,GAAG,OAAO,EAAE,CAAC,CAAC;QAEvD,IAAI,IAAI,CAAC,UAAU,EAAE;YACnB,MAAM,iBAAiB,GAAG,KAAK,CAAC,GAAG,EAAE,CAAC;YACtC,iBAAiB,CAAC,EAAE,GAAG,iBAAiB,CAAC,EAAE,IAAI,2BAA2B,QAAQ,EAAE,EAAE,CAAC;YACvF,IAAI,CAAC,mBAAmB,GAAG,iBAAiB,CAAC,EAAE,CAAC;SACjD;KACF;;;;;IAMO,UAAU,CAAC,KAAiB;QAClC,MAAM,aAAa,GAAI,KAAK,CAAC,MAAsB,CAAC,OAAO,CAAC,iBAAiB,CAAC,CAAC;QAC/E,IAAI,CAAC,IAAI,CAAC,UAAU,IAAI,aAAa,EAAE;YACrC,OAAO;SACR;QAED,IAAI,CAAC,QAAQ,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC;QAC/B,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,EAAC,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAC,CAAC,CAAC;KAC7C;IAED,iBAAiB;QACf,IAAI,CAAC,aAAa,EAAE,CAAC;KACtB;IAED,MAAM;QACJ,QACE,EAAC,IAAI,qDACH,IAAI,EAAC,KAAK,EACV,OAAO,EAAE,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,EACnC,QAAQ,EAAE,IAAI,CAAC,QAAQ,IAEvB,4DAAK,KAAK,EAAC,+BAA+B,IACvC,IAAI,CAAC,UAAU,KACd,gFACiB,IAAI,CAAC,QAAQ,GAAG,MAAM,GAAG,OAAO,gBACnC,IAAI,CAAC,QAAQ,GAAG,eAAe,GAAG,cAAc,mBAC7C,IAAI,CAAC,mBAAmB,EACvC,IAAI,EAAC,QAAQ,IAEb,+DAAQ,IAAI,EAAE,IAAI,CAAC,QAAQ,GAAG,eAAe,GAAG,cAAc,GAAW,CAClE,CACV,CACG,EACN,6DAAM,YAAY,EAAE,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,GAAS,CACrD,EACP;KACH;;;;;;;;;;","names":[],"sources":["src/components/table/z-tr/styles.css?tag=z-tr&encapsulation=shadow","src/components/table/z-tr/index.tsx"],"sourcesContent":[":host {\n /* number of columns of the row. will be set in component's ts code */\n --columns: 1;\n\n display: grid;\n box-sizing: border-box;\n grid-auto-flow: column;\n grid-template-columns: var(--z-table--expand-button-size, 0) repeat(var(--columns), minmax(128px, 1fr));\n}\n\n* {\n box-sizing: border-box;\n}\n\n.z-tr--expand-button-container,\n::slotted(*) {\n border-bottom: var(--z-table--cells-bottom-border-size, var(--border-size-small)) solid var(--color-surface03);\n}\n\n::slotted(*:not(:last-child)) {\n border-right: var(--z-table--cell-left-border, none);\n}\n\n:host([expandable]) {\n --show-expandable-button: visible;\n\n cursor: pointer;\n}\n\n:host([expandable]) ::slotted(*) {\n grid-row: 1;\n}\n\n:host([expandable]) ::slotted(:nth-last-child(2)) {\n border-right: none;\n}\n\n:host([expandable]) ::slotted(*:last-child) {\n border-left: 0;\n grid-column: 1 / span calc(var(--columns) + 1);\n grid-row: 2;\n}\n\n:host([expandable]:not([expanded])) ::slotted(*:last-child) {\n display: none;\n}\n\n:host([expanded]) {\n margin-bottom: 4px; /* prevents shadow to be cut by the next element */\n box-shadow: 0 4px 4px -2px var(--shadow-color-base);\n}\n\n:host([expanded]) .z-tr--expand-button-container,\n:host([expanded]) ::slotted(*) {\n background-color: var(--color-background);\n}\n\n.z-tr--expand-button-container {\n display: flex;\n align-items: center;\n justify-content: center;\n background-color: var(--z-table--cells-background, var(--color-surface01));\n}\n\n.z-tr--expand-button-container button {\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 0;\n border: none;\n margin: auto;\n appearance: none;\n background: transparent;\n cursor: pointer;\n visibility: var(--show-expandable-button, hidden);\n}\n\n.z-tr--expand-button-container button:focus {\n box-shadow: var(--shadow-focus-primary);\n outline: none;\n}\n\n.z-tr--expand-button-container button z-icon {\n --z-icon-width: 16px;\n --z-icon-height: 16px;\n}\n","import {Component, Element, Event, EventEmitter, Host, Listen, Prop, State, Watch, h} from \"@stencil/core\";\nimport {randomId} from \"../../../utils/utils\";\nimport \"../cells/z-td/index\";\nimport \"../cells/z-th/index\";\n\n/**\n * ZTr component.\n * When the row is `expandable`, you can set the `prevent-expand` css class on an interactive element inside the row\n * to prevent the row from expanding.\n * @slot - ZTr content (`z-td` or `z-th`).\n */\n@Component({\n tag: \"z-tr\",\n styleUrl: \"styles.css\",\n shadow: true,\n})\nexport class ZTr {\n @Element() host: HTMLZTrElement;\n\n /**\n * Whether the row is expandable.\n * Use a `z-td` as the last cell of the row for the additional content.\n * It will show a button to expand/collapse the row.\n * The last cell will be hidden until the button or row is clicked.\n *\n * If some element inside the expandable row contains the `prevent-expand` css class,\n * the row will not expand by clicking that element.\n */\n @Prop({reflect: true})\n expandable = false;\n\n /**\n * Whether the row is currently expanded.\n */\n @State()\n expanded = false;\n\n /**\n * HTML Id of the expandable content.\n * It is used to link the button to the content through the `aria-controls` attribute.\n */\n @State()\n expandableContentId: string;\n\n /** Row has been expanded */\n @Event()\n expand: EventEmitter;\n\n @Watch(\"expandable\")\n @Listen(\"colspanchange\")\n protected updateColumns(): void {\n const cells = Array.from(this.host.querySelectorAll<HTMLZTdElement | HTMLZThElement>(\"z-td, z-th\"));\n if (this.expandable) {\n cells.pop();\n }\n\n const columns = cells.map((cell) => cell.colspan || 1).reduce((a, b) => a + b, 0);\n this.host.style.setProperty(\"--columns\", `${columns}`);\n\n if (this.expandable) {\n const expandableContent = cells.pop();\n expandableContent.id = expandableContent.id || `z-tr-expandable-content-${randomId()}`;\n this.expandableContentId = expandableContent.id;\n }\n }\n\n /**\n * Handle click on row.\n * Skip expansion if the click is on a element with `prevent-expand` css class.\n */\n private onRowClick(event: MouseEvent): void {\n const preventExpand = (event.target as HTMLElement).closest(\".prevent-expand\");\n if (!this.expandable || preventExpand) {\n return;\n }\n\n this.expanded = !this.expanded;\n this.expand.emit({expanded: this.expanded});\n }\n\n componentWillLoad(): void {\n this.updateColumns();\n }\n\n render(): HTMLZTrElement {\n return (\n <Host\n role=\"row\"\n onClick={this.onRowClick.bind(this)}\n expanded={this.expanded}\n >\n <div class=\"z-tr--expand-button-container\">\n {this.expandable && (\n <button\n aria-expanded={this.expanded ? \"true\" : \"false\"}\n aria-label={this.expanded ? \"Comprimi riga\" : \"Espandi riga\"}\n aria-controls={this.expandableContentId}\n type=\"button\"\n >\n <z-icon name={this.expanded ? \"minus-circled\" : \"plus-circled\"}></z-icon>\n </button>\n )}\n </div>\n <slot onSlotchange={this.updateColumns.bind(this)}></slot>\n </Host>\n );\n }\n}\n"],"version":3}