npm - @zanichelli/albe-web-components - Versions diffs - 19.3.0 → 19.5.0 - Mend

@zanichelli/albe-web-components 19.3.0 → 19.5.0

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 (619) hide show

package/dist/esm/z-table.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"z-table.entry.js","sources":["src/components/table/z-table/styles.css?tag=z-table&encapsulation=shadow","src/components/table/z-table/index.tsx"],"sourcesContent":[":host {\n /*\n @prop --z-table--cells-padding: Padding of the cells.\n /\n ~~--z-table--cells-padding: calc(var(--space-unit) 2);\n~~\n position: relative;\n display: block;\n overflow: auto;\n min-width: max-content;\n max-width: 100%;\n box-sizing: border-box;\n padding: var(--space-unit);\n background-color: var(--color-surface01);\n}\n\n:~~host~~(~~[expandable]~~) {\n --z-table--~~expand~~-~~button~~-size: ~~40px~~;\n}\n\n:~~host~~([bordered]) {\n --z-table--cell-left-border: 1px solid var(--color-surface03);\n}\n","import {Component, ComponentInterface, Element, Host, Prop, State, h} from \"@stencil/core\";\nimport \"../z-tbody/index\";\nimport \"../z-tfoot/index\";\nimport \"../z-thead/index\";\nimport \"../z-tr/index\";\n\n/*\n ZTable component.\n * @slot - Table content (`z-thead`, `z-tbody`, `z-tfoot`, `z-tr`).\n /\n@Component({\n tag: \"z-table\",\n ~~styleUrl~~: \"styles.css\",\n shadow: true,\n})\nexport class ZTable implements ComponentInterface {\n @Element() host: HTMLZTableElement;\n\n /\n Whether the table cells should show a border between them.\n /\n @Prop({reflect: true})\n bordered = false;\n\n /\n Whether the table contains some expandable rows.\n /\n @State()\n expandable = false;\n\n private updateExpandable(): void {\n this.expandable = this.host.querySelectorAll(\"z-tr[expandable]\").length > 0;\n }\n\n private expandableMutationObserver: MutationObserver;\n\n /\n Setup the table creating a mutation observer for the expandable attribute.\n */\n componentWillLoad(): void {\n this.expandableMutationObserver = new MutationObserver(() => {\n this.updateExpandable();\n });\n this.expandableMutationObserver.observe(this.host, {\n childList: true,\n subtree: true,\n attributes: true,\n attributeFilter: [\"expandable\"],\n attributeOldValue: false,\n });\n }\n\n disconnectedCallback(): void {\n this.expandableMutationObserver?.disconnect();\n }\n\n render(): HTMLZTableElement {\n return (\n <Host expandable={this.expandable}>\n <div\n class=\"table\"\n role=\"table\"\n >\n <slot></slot>\n </div>\n </Host>\n );\n }\n}\n"],"names":[],"mappings":";;;;;;;;;;;AAAA,MAAM,SAAS,GAAG,MAAM,CAAC,~~4WAA4W~~,CAAC;;~~MCezX~~,MAAM,GAAA,MAAA;AALnB,IAAA,WAAA,CAAA,OAAA,EAAA;;AAQE;;AAEG;AAEH,QAAA,IAAA,CAAA,QAAQ,GAAG,KAAK;AAEhB;;AAEG;AAEH,QAAA,IAAA,CAAA,UAAU,GAAG,KAAK;AAwCnB;IAtCS,gBAAgB,GAAA;AACtB,QAAA,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAC,kBAAkB,CAAC,CAAC,MAAM,GAAG,CAAC;;AAK7E;;AAEG;IACH,iBAAiB,GAAA;AACf,QAAA,IAAI,CAAC,0BAA0B,GAAG,IAAI,gBAAgB,CAAC,MAAK;YAC1D,IAAI,CAAC,gBAAgB,EAAE;AACzB,SAAC,CAAC;QACF,IAAI,CAAC,0BAA0B,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,EAAE;AACjD,YAAA,SAAS,EAAE,IAAI;AACf,YAAA,OAAO,EAAE,IAAI;AACb,YAAA,UAAU,EAAE,IAAI;YAChB,eAAe,EAAE,CAAC,YAAY,CAAC;AAC/B,YAAA,iBAAiB,EAAE,KAAK;AACzB,SAAA,CAAC;;IAGJ,oBAAoB,GAAA;;QAClB,CAAA,EAAA,GAAA,IAAI,CAAC,0BAA0B,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAE,UAAU,EAAE;;IAG/C,MAAM,GAAA;QACJ,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAC,UAAU,EAAE,IAAI,CAAC,UAAU,EAAA,EAC/B,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAC,OAAO,EACb,IAAI,EAAC,OAAO,EAAA,EAEZ,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAa,CACT,CACD;;;;;;;;"}
1	+ {"version":3,"file":"z-table.entry.js","sources":["src/components/table/z-table/styles.css?tag=z-table&encapsulation=shadow","src/components/css-components/z-table/styles.css?tag=z-table&encapsulation=shadow","src/components/table/z-table/index.tsx"],"sourcesContent":[":host {\n /*\n @prop --z-table--cells-padding: Padding of the cells.\n /\n\n position: relative;\n display: block;\n overflow: auto;\n min-width: max-content;\n max-width: 100%;\n box-sizing: border-box;\n padding: var(--space-unit);\n}\n\n:host([expandable]) {\n --z-table--expand-button-size: 40px;\n}\n","z-table,\ntable.z-table {\n background-color: var(--color-surface01);\n\n --z-table--cells-padding: calc(var(--space-unit) 2);\n}\n\ntable.z-table {\n border-collapse: collapse;\n}\n\nz-thead,\ntable.z-table thead {\n background-color: var(--color-background);\n\n --z-table--cells-bottom-border-size: var(--border-size-medium);\n}\n\nz-tfoot,\ntable.z-table tfoot {\n border-top: var(--border-size-medium) solid var(--color-surface03);\n border-bottom: var(--border-size-medium) solid var(--color-surface03);\n}\n\nz-tfoot z-tr,\ntable.z-table tfoot tr {\n border-bottom: calc(var(--z-table--cells-bottom-border-size)) solid var(--color-surface03) !important;\n}\n\nz-tr,\ntable.z-table tr {\n border-bottom: var(--z-table--cells-bottom-border-size, var(--border-size-small)) solid var(--color-surface03);\n}\n\nz-td,\nz-th,\ntable.z-table td,\ntable.z-table th {\n padding: var(--z-table--cells-padding, calc(var(--space-unit) * 2));\n text-align: left;\n}\n\nz-th:not(:first-child),\nz-td:not(:first-child),\ntable.z-table th:not(:first-child),\ntable.z-table td:not(:first-child) {\n border-left: var(--z-table--cell-left-border, none);\n}\n\nz-table[bordered],\ntable.z-table.z-table-bordered {\n --z-table--cell-left-border: 1px solid var(--color-surface03);\n}\n\ntable.z-table-hover > tbody > tr:hover > td,\ntable.z-table-hover > tfoot > tr:hover > td {\n position: relative;\n background-color: var(--color-surface02);\n}\n\ntable.z-table-hover > tbody > tr:hover > td::after,\ntable.z-table-hover > tfoot > tr:hover > td::after {\n position: absolute;\n z-index: 1;\n top: 0;\n right: 0;\n bottom: 0;\n left: -1px;\n box-shadow:\n inset 0 var(--border-size-small) 0 var(--color-surface04),\n inset 0 calc(var(--border-size-small) * -1) 0 var(--color-surface04);\n content: \"\";\n}\n\ntable.z-table-hover > tbody > tr:hover > td:first-child::after,\ntable.z-table-hover > thead > tr:hover > th:first-child::after,\ntable.z-table-hover > tfoot > tr:hover > td:first-child::after {\n left: 0;\n}\n","import {Component, ComponentInterface, Element, Host, Prop, State, h} from \"@stencil/core\";\nimport \"../z-tbody/index\";\nimport \"../z-tfoot/index\";\nimport \"../z-thead/index\";\nimport \"../z-tr/index\";\n\n/*\n ZTable component.\n * @slot - Table content (`z-thead`, `z-tbody`, `z-tfoot`, `z-tr`).\n /\n@Component({\n tag: \"z-table\",\n styleUrls: [\"styles.css\", \"../../css-components/z-table/styles.css\"],\n shadow: true,\n})\nexport class ZTable implements ComponentInterface {\n @Element() host: HTMLZTableElement;\n\n /\n Whether the table cells should show a border between them.\n /\n @Prop({reflect: true})\n bordered = false;\n\n /\n Whether the table contains some expandable rows.\n /\n @State()\n expandable = false;\n\n private updateExpandable(): void {\n this.expandable = this.host.querySelectorAll(\"z-tr[expandable]\").length > 0;\n }\n\n private expandableMutationObserver: MutationObserver;\n\n /\n Setup the table creating a mutation observer for the expandable attribute.\n */\n componentWillLoad(): void {\n this.expandableMutationObserver = new MutationObserver(() => {\n this.updateExpandable();\n });\n this.expandableMutationObserver.observe(this.host, {\n childList: true,\n subtree: true,\n attributes: true,\n attributeFilter: [\"expandable\"],\n attributeOldValue: false,\n });\n }\n\n disconnectedCallback(): void {\n this.expandableMutationObserver?.disconnect();\n }\n\n render(): HTMLZTableElement {\n return (\n <Host expandable={this.expandable}>\n <div\n class=\"table\"\n role=\"table\"\n >\n <slot></slot>\n </div>\n </Host>\n );\n }\n}\n"],"names":["stylesCss"],"mappings":";;;;;;;;;;;AAAA,MAAMA,WAAS,GAAG,MAAM,CAAC,gMAAgM,CAAC;;ACA1N,MAAM,SAAS,GAAG,MAAM,CAAC,0sDAA0sD,CAAC;;MCevtD,MAAM,GAAA,MAAA;AALnB,IAAA,WAAA,CAAA,OAAA,EAAA;;AAQE;;AAEG;AAEH,QAAA,IAAA,CAAA,QAAQ,GAAG,KAAK;AAEhB;;AAEG;AAEH,QAAA,IAAA,CAAA,UAAU,GAAG,KAAK;AAwCnB;IAtCS,gBAAgB,GAAA;AACtB,QAAA,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAC,kBAAkB,CAAC,CAAC,MAAM,GAAG,CAAC;;AAK7E;;AAEG;IACH,iBAAiB,GAAA;AACf,QAAA,IAAI,CAAC,0BAA0B,GAAG,IAAI,gBAAgB,CAAC,MAAK;YAC1D,IAAI,CAAC,gBAAgB,EAAE;AACzB,SAAC,CAAC;QACF,IAAI,CAAC,0BAA0B,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,EAAE;AACjD,YAAA,SAAS,EAAE,IAAI;AACf,YAAA,OAAO,EAAE,IAAI;AACb,YAAA,UAAU,EAAE,IAAI;YAChB,eAAe,EAAE,CAAC,YAAY,CAAC;AAC/B,YAAA,iBAAiB,EAAE,KAAK;AACzB,SAAA,CAAC;;IAGJ,oBAAoB,GAAA;;QAClB,CAAA,EAAA,GAAA,IAAI,CAAC,0BAA0B,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAE,UAAU,EAAE;;IAG/C,MAAM,GAAA;QACJ,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAC,UAAU,EAAE,IAAI,CAAC,UAAU,EAAA,EAC/B,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAC,OAAO,EACb,IAAI,EAAC,OAAO,EAAA,EAEZ,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAa,CACT,CACD;;;;;;;;"}

package/dist/esm/z-tbody.entry.js CHANGED Viewed

@@ -1,16 +1,18 @@
-import { r as registerInstance, h, H as Host } from './index-BEHxru6n.js';
+import { r as registerInstance, h, H as Host } from './index-BcDWN4F1.js';
-const stylesCss = () => `:host{display:block;box-sizing:border-box}`;
+const stylesCss$1 = () => `:host{display:block;box-sizing:border-box}`;
+const stylesCss = () => `z-table,table.z-table{background-color:var(--color-surface01);--z-table--cells-padding:calc(var(--space-unit) * 2)}table.z-table{border-collapse:collapse}z-thead,table.z-table thead{background-color:var(--color-background);--z-table--cells-bottom-border-size:var(--border-size-medium)}z-tfoot,table.z-table tfoot{border-top:var(--border-size-medium) solid var(--color-surface03);border-bottom:var(--border-size-medium) solid var(--color-surface03)}z-tfoot z-tr,table.z-table tfoot tr{border-bottom:calc(var(--z-table--cells-bottom-border-size)) solid var(--color-surface03) !important}z-tr,table.z-table tr{border-bottom:var(--z-table--cells-bottom-border-size, var(--border-size-small)) solid var(--color-surface03)}z-td,z-th,table.z-table td,table.z-table th{padding:var(--z-table--cells-padding, calc(var(--space-unit) * 2));text-align:left}z-th:not(:first-child),z-td:not(:first-child),table.z-table th:not(:first-child),table.z-table td:not(:first-child){border-left:var(--z-table--cell-left-border, none)}z-table[bordered],table.z-table.z-table-bordered{--z-table--cell-left-border:1px solid var(--color-surface03)}table.z-table-hover>tbody>tr:hover>td,table.z-table-hover>tfoot>tr:hover>td{position:relative;background-color:var(--color-surface02)}table.z-table-hover>tbody>tr:hover>td::after,table.z-table-hover>tfoot>tr:hover>td::after{position:absolute;z-index:1;top:0;right:0;bottom:0;left:-1px;box-shadow:inset 0 var(--border-size-small) 0 var(--color-surface04),     inset 0 calc(var(--border-size-small) * -1) 0 var(--color-surface04);content:""}table.z-table-hover>tbody>tr:hover>td:first-child::after,table.z-table-hover>thead>tr:hover>th:first-child::after,table.z-table-hover>tfoot>tr:hover>td:first-child::after{left:0}`;
 const ZTbody = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
     }
     render() {
-        return (h(Host, { key: '9ffbee51d10b3318d8044e8f4f45beff637ce8a3', role: "rowgroup" }, h("slot", { key: '5143bbe7239e2804d24e634dba17e60060d1c6d0' })));
+        return (h(Host, { key: 'ff5da26d4d754ab4da901422be45d9cd546807b9', role: "rowgroup" }, h("slot", { key: 'fe0a17ad217ca1eb372f9f176df75534a3971aa9' })));
     }
 };
-ZTbody.style = stylesCss();
+ZTbody.style = stylesCss$1() + stylesCss();
 export { ZTbody as z_tbody };
 //# sourceMappingURL=z-tbody.entry.js.map

package/dist/esm/z-tbody.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"z-tbody.entry.js","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, ComponentInterface, 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 implements ComponentInterface {\n render(): HTMLZTbodyElement {\n return (\n <Host role=\"rowgroup\">\n <slot></slot>\n </Host>\n );\n }\n}\n"],"names":[],"mappings":";;AAAA,MAAM,SAAS,GAAG,MAAM,CAAC,~~0CAA0C~~,CAAC;;~~MCWvD~~,MAAM,GAAA,MAAA;;;;IACjB,MAAM,GAAA;QACJ,QACE,CAAA,CAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAC,IAAI,EAAC,UAAU,EAAA,EACnB,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAa,CACR;;;;;;;"}
1	+ {"version":3,"file":"z-tbody.entry.js","sources":["src/components/table/z-tbody/styles.css?tag=z-tbody&encapsulation=shadow","src/components/css-components/z-table/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","z-table,\ntable.z-table {\n background-color: var(--color-surface01);\n\n --z-table--cells-padding: calc(var(--space-unit) * 2);\n}\n\ntable.z-table {\n border-collapse: collapse;\n}\n\nz-thead,\ntable.z-table thead {\n background-color: var(--color-background);\n\n --z-table--cells-bottom-border-size: var(--border-size-medium);\n}\n\nz-tfoot,\ntable.z-table tfoot {\n border-top: var(--border-size-medium) solid var(--color-surface03);\n border-bottom: var(--border-size-medium) solid var(--color-surface03);\n}\n\nz-tfoot z-tr,\ntable.z-table tfoot tr {\n border-bottom: calc(var(--z-table--cells-bottom-border-size)) solid var(--color-surface03) !important;\n}\n\nz-tr,\ntable.z-table tr {\n border-bottom: var(--z-table--cells-bottom-border-size, var(--border-size-small)) solid var(--color-surface03);\n}\n\nz-td,\nz-th,\ntable.z-table td,\ntable.z-table th {\n padding: var(--z-table--cells-padding, calc(var(--space-unit) * 2));\n text-align: left;\n}\n\nz-th:not(:first-child),\nz-td:not(:first-child),\ntable.z-table th:not(:first-child),\ntable.z-table td:not(:first-child) {\n border-left: var(--z-table--cell-left-border, none);\n}\n\nz-table[bordered],\ntable.z-table.z-table-bordered {\n --z-table--cell-left-border: 1px solid var(--color-surface03);\n}\n\ntable.z-table-hover > tbody > tr:hover > td,\ntable.z-table-hover > tfoot > tr:hover > td {\n position: relative;\n background-color: var(--color-surface02);\n}\n\ntable.z-table-hover > tbody > tr:hover > td::after,\ntable.z-table-hover > tfoot > tr:hover > td::after {\n position: absolute;\n z-index: 1;\n top: 0;\n right: 0;\n bottom: 0;\n left: -1px;\n box-shadow:\n inset 0 var(--border-size-small) 0 var(--color-surface04),\n inset 0 calc(var(--border-size-small) * -1) 0 var(--color-surface04);\n content: \"\";\n}\n\ntable.z-table-hover > tbody > tr:hover > td:first-child::after,\ntable.z-table-hover > thead > tr:hover > th:first-child::after,\ntable.z-table-hover > tfoot > tr:hover > td:first-child::after {\n left: 0;\n}\n","import {Component, ComponentInterface, Host, h} from \"@stencil/core\";\n\n/*\n ZTbody component.\n * @slot - ZTbody content (`z-tr`).\n */\n@Component({\n tag: \"z-tbody\",\n styleUrls: [\"styles.css\", \"../../css-components/z-table/styles.css\"],\n shadow: true,\n})\nexport class ZTbody implements ComponentInterface {\n render(): HTMLZTbodyElement {\n return (\n <Host role=\"rowgroup\">\n <slot></slot>\n </Host>\n );\n }\n}\n"],"names":["stylesCss"],"mappings":";;AAAA,MAAMA,WAAS,GAAG,MAAM,CAAC,0CAA0C,CAAC;;ACApE,MAAM,SAAS,GAAG,MAAM,CAAC,0sDAA0sD,CAAC;;MCWvtD,MAAM,GAAA,MAAA;;;;IACjB,MAAM,GAAA;QACJ,QACE,CAAA,CAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAC,IAAI,EAAC,UAAU,EAAA,EACnB,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAa,CACR;;;;;;;"}

package/dist/esm/z-td.entry.js CHANGED Viewed

@@ -1,7 +1,9 @@
-import { r as registerInstance, c as createEvent, h, H as Host, d as getElement } from './index-BEHxru6n.js';
-import { P as PopoverPosition, e as ControlSize, B as ButtonVariant } from './index-B3nR3-Jw.js';
+import { r as registerInstance, c as createEvent, h, H as Host, d as getElement } from './index-BcDWN4F1.js';
+import { P as PopoverPosition, e as ControlSize, B as ButtonVariant } from './index-DdetsoIY.js';
-const zTableCellsCss = () => `: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 zTableCellsCss = () => `:host{position:relative;display:flex;max-width:100%;align-items:center;background-color:var(--color-surface01);gap:calc(var(--space-unit) * 2) var(--space-unit)}:host,*{box-sizing:border-box}:host([sticky]){position:sticky;z-index:1;top:0;left:0;box-shadow:8px 0 16px -8px var(--shadow-color-base)}:host([menu-open]){z-index:2}.cell--content{display:flex;width:100%;height:100%;align-items:center}:host([show-menu]) .cell--content{column-gap:var(--space-unit)}.cell--menu-container{margin-left:auto}:host(:not([show-menu])) .cell--menu-container{opacity:0;pointer-events:none}:host(:is([show-menu],[menu-open])) .cell--menu-container,:host([show-menu]) .cell--menu-container:focus-within{z-index:1;opacity:1;pointer-events:all}:host .cell-popover{z-index:100}@media (min-width: 768px) and (hover: hover){:host([show-menu="hover"]) .cell--menu-container{opacity:0;pointer-events:none}:host([show-menu="hover"]:hover) .cell--menu-container{z-index:1;opacity:1;pointer-events:all}}`;
+const stylesCss = () => `z-table,table.z-table{background-color:var(--color-surface01);--z-table--cells-padding:calc(var(--space-unit) * 2)}table.z-table{border-collapse:collapse}z-thead,table.z-table thead{background-color:var(--color-background);--z-table--cells-bottom-border-size:var(--border-size-medium)}z-tfoot,table.z-table tfoot{border-top:var(--border-size-medium) solid var(--color-surface03);border-bottom:var(--border-size-medium) solid var(--color-surface03)}z-tfoot z-tr,table.z-table tfoot tr{border-bottom:calc(var(--z-table--cells-bottom-border-size)) solid var(--color-surface03) !important}z-tr,table.z-table tr{border-bottom:var(--z-table--cells-bottom-border-size, var(--border-size-small)) solid var(--color-surface03)}z-td,z-th,table.z-table td,table.z-table th{padding:var(--z-table--cells-padding, calc(var(--space-unit) * 2));text-align:left}z-th:not(:first-child),z-td:not(:first-child),table.z-table th:not(:first-child),table.z-table td:not(:first-child){border-left:var(--z-table--cell-left-border, none)}z-table[bordered],table.z-table.z-table-bordered{--z-table--cell-left-border:1px solid var(--color-surface03)}table.z-table-hover>tbody>tr:hover>td,table.z-table-hover>tfoot>tr:hover>td{position:relative;background-color:var(--color-surface02)}table.z-table-hover>tbody>tr:hover>td::after,table.z-table-hover>tfoot>tr:hover>td::after{position:absolute;z-index:1;top:0;right:0;bottom:0;left:-1px;box-shadow:inset 0 var(--border-size-small) 0 var(--color-surface04),     inset 0 calc(var(--border-size-small) * -1) 0 var(--color-surface04);content:""}table.z-table-hover>tbody>tr:hover>td:first-child::after,table.z-table-hover>thead>tr:hover>th:first-child::after,table.z-table-hover>tfoot>tr:hover>td:first-child::after{left:0}`;
 const ZTd = class {
     constructor(hostRef) {
@@ -43,7 +45,7 @@ const ZTd = class {
         this.updateColspan();
     }
     render() {
-        return (h(Host, { key: '1058d07bd54d368be4c3ac73bbcb44efd8a1705b', role: "cell", "menu-open": this.isMenuOpen }, h("div", { key: '3cd22ea20154c545d48ed73063feb9b1534df313', class: "cell--content" }, h("slot", { key: '6b14788ea5f25d84609bb9e5e60aa450507a44e6' }), this.showMenu && (h("div", { key: 'a35b449393363b0c36cb9baf93e930eb832eb7ec', class: "cell--menu-container prevent-expand" }, h("z-button", { key: 'ff31b6ad5a6c104f9c6e9ef565119d5f81d3f91a', variant: ButtonVariant.TERTIARY, icon: "contextual-menu", size: ControlSize.X_SMALL, ref: (el) => (this.menuTrigger = el), onClick: this.onMenuButtonClick.bind(this) }), h("z-popover", { key: '919445e5e5d477795a6e21fa7d69c1974da6b05e', class: "cell-popover", ref: (el) => (this.popoverEl = el), bindTo: this.menuTrigger, onOpenChange: (event) => (this.isMenuOpen = event.detail.open), position: this.popoverPosition }, h("slot", { key: '637935f871e288248376025f899d2c2490dead9c', name: "contextual-menu" })))))));
+        return (h(Host, { key: '2c3552c5c30611595ac619e6ca3a1e93b3d37366', role: "cell", "menu-open": this.isMenuOpen }, h("div", { key: 'd13012a1f16aaa6ab44b4eea1dafa63cf1ebbd3a', class: "cell--content" }, h("slot", { key: 'b4571116c24bb99dc6ec76486fc948da89a5393b' }), this.showMenu && (h("div", { key: '6ebd3bfc1fcf8dce3afb91931309c4644efc2e49', class: "cell--menu-container prevent-expand" }, h("z-button", { key: '3d01c8956127276eb765c3a9f4aabb4ed710b404', variant: ButtonVariant.TERTIARY, icon: "contextual-menu", size: ControlSize.X_SMALL, ref: (el) => (this.menuTrigger = el), onClick: this.onMenuButtonClick.bind(this) }), h("z-popover", { key: 'd04c06677e2e8efb5d80bfbfd7cc91c9cbff7231', class: "cell-popover", ref: (el) => (this.popoverEl = el), bindTo: this.menuTrigger, onOpenChange: (event) => (this.isMenuOpen = event.detail.open), position: this.popoverPosition }, h("slot", { key: 'c389c6fdf131aeef86eae687df9c2f7fb6fbc3be', name: "contextual-menu" })))))));
     }
     get host() { return getElement(this); }
     static get watchers() { return {
@@ -52,7 +54,7 @@ const ZTd = class {
             }]
     }; }
 };
-ZTd.style = zTableCellsCss();
+ZTd.style = zTableCellsCss() + stylesCss();
 export { ZTd as z_td };
 //# sourceMappingURL=z-td.entry.js.map

package/dist/esm/z-td.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"z-td.entry.js","sources":["src/components/table/cells/z-table-cells.css?tag=z-td&encapsulation=shadow","src/components/table/cells/z-td/index.tsx"],"sourcesContent":[":host {\n position: relative;\n display: flex;\n max-width: 100%;\n align-items: center;\n ~~padding: calc(var(--z-table--cells-padding, calc(var(--space-unit) * 2)));\n~~ background-color: var(--color-surface01);\n gap: calc(var(--space-unit) * 2) var(--space-unit);\n}\n\n:host,\n* {\n box-sizing: border-box;\n}\n\n:host([sticky]) {\n position: sticky;\n z-index: 1;\n top: 0;\n left: 0;\n box-shadow: 8px 0 16px -8px var(--shadow-color-base);\n}\n\n:host([menu-open]) {\n z-index: 2;\n}\n\n.cell--content {\n display: flex;\n width: 100%;\n height: 100%;\n align-items: center;\n}\n\n:host([show-menu]) .cell--content {\n column-gap: var(--space-unit);\n}\n\n.cell--menu-container {\n margin-left: auto;\n}\n\n:host(:not([show-menu])) .cell--menu-container {\n opacity: 0;\n pointer-events: none;\n}\n\n:host(:is([show-menu], [menu-open])) .cell--menu-container,\n:host([show-menu]) .cell--menu-container:focus-within {\n z-index: 1;\n opacity: 1;\n pointer-events: all;\n}\n\n:host .cell-popover {\n z-index: 100;\n}\n\n@media (min-width: 768px) and (hover: hover) {\n :host([show-menu=\"hover\"]) .cell--menu-container {\n opacity: 0;\n pointer-events: none;\n }\n\n :host([show-menu=\"hover\"]:hover) .cell--menu-container {\n z-index: 1;\n opacity: 1;\n pointer-events: all;\n }\n}\n","import {Component, ComponentInterface, 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~~: \"../z-table-cells.css\",\n shadow: true,\n})\nexport class ZTd implements ComponentInterface {\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"],"names":[],"mappings":";;;AAAA,MAAM,cAAc,GAAG,MAAM,CAAC,~~2hCAA2hC~~,CAAC;;~~MCY7iC~~,GAAG,GAAA,MAAA;AALhB,IAAA,WAAA,CAAA,OAAA,EAAA;;;AAcE;;AAEG;AAEH,QAAA,IAAA,CAAA,MAAM,GAAG,KAAK;AAEd;;;;AAIG;AAEH,QAAA,IAAA,CAAA,QAAQ,GAAwB,IAAI;AAEpC;;AAEG;AAEH,QAAA,IAAA,CAAA,eAAe,GAAqB,eAAe,CAAC,IAAI;AAExD;;AAEG;AAEH,QAAA,IAAA,CAAA,UAAU,GAAG,KAAK;AAmEnB;IAnDW,aAAa,GAAA;AACrB,QAAA,IAAI,IAAI,CAAC,OAAO,EAAE;AAChB,YAAA,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,UAAU,GAAG,CAAA,KAAA,EAAQ,IAAI,CAAC,OAAO,CAAA,CAAE;;aAC9C;YACL,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,aAAa,CAAC;;QAG/C,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,IAAI,CAAC,CAAC;;AAGpC,IAAA,iBAAiB,CAAC,EAAc,EAAA;QACtC,EAAE,CAAC,eAAe,EAAE;QACpB,IAAI,CAAC,SAAS,CAAC,IAAI,GAAG,CAAC,IAAI,CAAC,SAAS,CAAC,IAAI;;IAG5C,iBAAiB,GAAA;QACf,IAAI,CAAC,aAAa,EAAE;;IAGtB,MAAM,GAAA;QACJ,QACE,CAAA,CAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EACH,IAAI,EAAC,MAAM,EAAA,WAAA,EACA,IAAI,CAAC,UAAU,EAAA,EAE1B,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,eAAe,EAAA,EACxB,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAa,EACZ,IAAI,CAAC,QAAQ,KACZ,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,qCAAqC,EAAA,EAC9C,CAAA,CAAA,UAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,OAAO,EAAE,aAAa,CAAC,QAAQ,EAC/B,IAAI,EAAC,iBAAiB,EACtB,IAAI,EAAE,WAAW,CAAC,OAAO,EACzB,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,WAAW,GAAG,EAAwB,CAAC,EAC1D,OAAO,EAAE,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,IAAI,CAAC,EAAA,CAC1C,EACF,CAAA,CAAA,WAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,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,EAAA,EAE9B,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,iBAAiB,EAAA,CAAQ,CAC1B,CACR,CACP,CACG,CACD;;;;;;;;;;;;;"}
1	+ {"version":3,"file":"z-td.entry.js","sources":["src/components/table/cells/z-table-cells.css?tag=z-td&encapsulation=shadow","src/components/css-components/z-table/styles.css?tag=z-td&encapsulation=shadow","src/components/table/cells/z-td/index.tsx"],"sourcesContent":[":host {\n position: relative;\n display: flex;\n max-width: 100%;\n align-items: center;\n background-color: var(--color-surface01);\n gap: calc(var(--space-unit) * 2) var(--space-unit);\n}\n\n:host,\n* {\n box-sizing: border-box;\n}\n\n:host([sticky]) {\n position: sticky;\n z-index: 1;\n top: 0;\n left: 0;\n box-shadow: 8px 0 16px -8px var(--shadow-color-base);\n}\n\n:host([menu-open]) {\n z-index: 2;\n}\n\n.cell--content {\n display: flex;\n width: 100%;\n height: 100%;\n align-items: center;\n}\n\n:host([show-menu]) .cell--content {\n column-gap: var(--space-unit);\n}\n\n.cell--menu-container {\n margin-left: auto;\n}\n\n:host(:not([show-menu])) .cell--menu-container {\n opacity: 0;\n pointer-events: none;\n}\n\n:host(:is([show-menu], [menu-open])) .cell--menu-container,\n:host([show-menu]) .cell--menu-container:focus-within {\n z-index: 1;\n opacity: 1;\n pointer-events: all;\n}\n\n:host .cell-popover {\n z-index: 100;\n}\n\n@media (min-width: 768px) and (hover: hover) {\n :host([show-menu=\"hover\"]) .cell--menu-container {\n opacity: 0;\n pointer-events: none;\n }\n\n :host([show-menu=\"hover\"]:hover) .cell--menu-container {\n z-index: 1;\n opacity: 1;\n pointer-events: all;\n }\n}\n","z-table,\ntable.z-table {\n background-color: var(--color-surface01);\n\n --z-table--cells-padding: calc(var(--space-unit) * 2);\n}\n\ntable.z-table {\n border-collapse: collapse;\n}\n\nz-thead,\ntable.z-table thead {\n background-color: var(--color-background);\n\n --z-table--cells-bottom-border-size: var(--border-size-medium);\n}\n\nz-tfoot,\ntable.z-table tfoot {\n border-top: var(--border-size-medium) solid var(--color-surface03);\n border-bottom: var(--border-size-medium) solid var(--color-surface03);\n}\n\nz-tfoot z-tr,\ntable.z-table tfoot tr {\n border-bottom: calc(var(--z-table--cells-bottom-border-size)) solid var(--color-surface03) !important;\n}\n\nz-tr,\ntable.z-table tr {\n border-bottom: var(--z-table--cells-bottom-border-size, var(--border-size-small)) solid var(--color-surface03);\n}\n\nz-td,\nz-th,\ntable.z-table td,\ntable.z-table th {\n padding: var(--z-table--cells-padding, calc(var(--space-unit) * 2));\n text-align: left;\n}\n\nz-th:not(:first-child),\nz-td:not(:first-child),\ntable.z-table th:not(:first-child),\ntable.z-table td:not(:first-child) {\n border-left: var(--z-table--cell-left-border, none);\n}\n\nz-table[bordered],\ntable.z-table.z-table-bordered {\n --z-table--cell-left-border: 1px solid var(--color-surface03);\n}\n\ntable.z-table-hover > tbody > tr:hover > td,\ntable.z-table-hover > tfoot > tr:hover > td {\n position: relative;\n background-color: var(--color-surface02);\n}\n\ntable.z-table-hover > tbody > tr:hover > td::after,\ntable.z-table-hover > tfoot > tr:hover > td::after {\n position: absolute;\n z-index: 1;\n top: 0;\n right: 0;\n bottom: 0;\n left: -1px;\n box-shadow:\n inset 0 var(--border-size-small) 0 var(--color-surface04),\n inset 0 calc(var(--border-size-small) * -1) 0 var(--color-surface04);\n content: \"\";\n}\n\ntable.z-table-hover > tbody > tr:hover > td:first-child::after,\ntable.z-table-hover > thead > tr:hover > th:first-child::after,\ntable.z-table-hover > tfoot > tr:hover > td:first-child::after {\n left: 0;\n}\n","import {Component, ComponentInterface, 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 styleUrls: [\"../z-table-cells.css\", \"../../../css-components/z-table/styles.css\"],\n shadow: true,\n})\nexport class ZTd implements ComponentInterface {\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"],"names":[],"mappings":";;;AAAA,MAAM,cAAc,GAAG,MAAM,CAAC,k9BAAk9B,CAAC;;ACAj/B,MAAM,SAAS,GAAG,MAAM,CAAC,0sDAA0sD,CAAC;;MCYvtD,GAAG,GAAA,MAAA;AALhB,IAAA,WAAA,CAAA,OAAA,EAAA;;;AAcE;;AAEG;AAEH,QAAA,IAAA,CAAA,MAAM,GAAG,KAAK;AAEd;;;;AAIG;AAEH,QAAA,IAAA,CAAA,QAAQ,GAAwB,IAAI;AAEpC;;AAEG;AAEH,QAAA,IAAA,CAAA,eAAe,GAAqB,eAAe,CAAC,IAAI;AAExD;;AAEG;AAEH,QAAA,IAAA,CAAA,UAAU,GAAG,KAAK;AAmEnB;IAnDW,aAAa,GAAA;AACrB,QAAA,IAAI,IAAI,CAAC,OAAO,EAAE;AAChB,YAAA,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,UAAU,GAAG,CAAA,KAAA,EAAQ,IAAI,CAAC,OAAO,CAAA,CAAE;;aAC9C;YACL,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,aAAa,CAAC;;QAG/C,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,IAAI,CAAC,CAAC;;AAGpC,IAAA,iBAAiB,CAAC,EAAc,EAAA;QACtC,EAAE,CAAC,eAAe,EAAE;QACpB,IAAI,CAAC,SAAS,CAAC,IAAI,GAAG,CAAC,IAAI,CAAC,SAAS,CAAC,IAAI;;IAG5C,iBAAiB,GAAA;QACf,IAAI,CAAC,aAAa,EAAE;;IAGtB,MAAM,GAAA;QACJ,QACE,CAAA,CAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EACH,IAAI,EAAC,MAAM,EAAA,WAAA,EACA,IAAI,CAAC,UAAU,EAAA,EAE1B,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,eAAe,EAAA,EACxB,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAa,EACZ,IAAI,CAAC,QAAQ,KACZ,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,qCAAqC,EAAA,EAC9C,CAAA,CAAA,UAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,OAAO,EAAE,aAAa,CAAC,QAAQ,EAC/B,IAAI,EAAC,iBAAiB,EACtB,IAAI,EAAE,WAAW,CAAC,OAAO,EACzB,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,WAAW,GAAG,EAAwB,CAAC,EAC1D,OAAO,EAAE,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,IAAI,CAAC,EAAA,CAC1C,EACF,CAAA,CAAA,WAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,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,EAAA,EAE9B,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,iBAAiB,EAAA,CAAQ,CAC1B,CACR,CACP,CACG,CACD;;;;;;;;;;;;;"}

package/dist/esm/z-tfoot.entry.js CHANGED Viewed

@@ -1,6 +1,8 @@
-import { r as registerInstance, h, H as Host } from './index-BEHxru6n.js';
+import { r as registerInstance, h, H as Host } from './index-BcDWN4F1.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 stylesCss$1 = () => `:host{display:block;box-sizing:border-box;margin-top:-1px}:host([sticky]){position:sticky;z-index:1;bottom:0;background-color:var(--color-surface01)}`;
+const stylesCss = () => `z-table,table.z-table{background-color:var(--color-surface01);--z-table--cells-padding:calc(var(--space-unit) * 2)}table.z-table{border-collapse:collapse}z-thead,table.z-table thead{background-color:var(--color-background);--z-table--cells-bottom-border-size:var(--border-size-medium)}z-tfoot,table.z-table tfoot{border-top:var(--border-size-medium) solid var(--color-surface03);border-bottom:var(--border-size-medium) solid var(--color-surface03)}z-tfoot z-tr,table.z-table tfoot tr{border-bottom:calc(var(--z-table--cells-bottom-border-size)) solid var(--color-surface03) !important}z-tr,table.z-table tr{border-bottom:var(--z-table--cells-bottom-border-size, var(--border-size-small)) solid var(--color-surface03)}z-td,z-th,table.z-table td,table.z-table th{padding:var(--z-table--cells-padding, calc(var(--space-unit) * 2));text-align:left}z-th:not(:first-child),z-td:not(:first-child),table.z-table th:not(:first-child),table.z-table td:not(:first-child){border-left:var(--z-table--cell-left-border, none)}z-table[bordered],table.z-table.z-table-bordered{--z-table--cell-left-border:1px solid var(--color-surface03)}table.z-table-hover>tbody>tr:hover>td,table.z-table-hover>tfoot>tr:hover>td{position:relative;background-color:var(--color-surface02)}table.z-table-hover>tbody>tr:hover>td::after,table.z-table-hover>tfoot>tr:hover>td::after{position:absolute;z-index:1;top:0;right:0;bottom:0;left:-1px;box-shadow:inset 0 var(--border-size-small) 0 var(--color-surface04),     inset 0 calc(var(--border-size-small) * -1) 0 var(--color-surface04);content:""}table.z-table-hover>tbody>tr:hover>td:first-child::after,table.z-table-hover>thead>tr:hover>th:first-child::after,table.z-table-hover>tfoot>tr:hover>td:first-child::after{left:0}`;
 const ZTfoot = class {
     constructor(hostRef) {
@@ -11,10 +13,10 @@ const ZTfoot = class {
         this.sticky = false;
     }
     render() {
-        return (h(Host, { key: 'e200294dd24c6a58722245df0b90b8b562fd7293', role: "rowgroup", tabIndex: -1 }, h("slot", { key: '0db022a1de8dcbe5457598ab55aacd7b07b9dcb4' })));
+        return (h(Host, { key: 'cdd4d2841caada167b8818ff534744445e0d8979', role: "rowgroup", tabIndex: -1 }, h("slot", { key: '5cf911121ea09dcc13744e9d1d730be92f20cbf4' })));
     }
 };
-ZTfoot.style = stylesCss();
+ZTfoot.style = stylesCss$1() + stylesCss();
 export { ZTfoot as z_tfoot };
 //# sourceMappingURL=z-tfoot.entry.js.map

package/dist/esm/z-tfoot.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"z-tfoot.entry.js","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, ComponentInterface, 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 implements ComponentInterface {\n /\n If true, the footer will be stuck to the bottom of the table.\n */\n @Prop({reflect: true})\n sticky = false;\n\n render(): void {\n return (\n <Host\n role=\"rowgroup\"\n tabIndex={-1}\n >\n <slot></slot>\n </Host>\n );\n }\n}\n"],"names":[],"mappings":";;AAAA,MAAM,SAAS,GAAG,MAAM,CAAC,~~gOAAgO~~,CAAC;;~~MCW7O~~,MAAM,GAAA,MAAA;AALnB,IAAA,WAAA,CAAA,OAAA,EAAA;;AAME;;AAEG;AAEH,QAAA,IAAA,CAAA,MAAM,GAAG,KAAK;AAYf;IAVC,MAAM,GAAA;AACJ,QAAA,QACE,CAAA,CAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EACH,IAAI,EAAC,UAAU,EACf,QAAQ,EAAE,EAAE,EAAA,EAEZ,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAa,CACR;;;;;;;"}
1	+ {"version":3,"file":"z-tfoot.entry.js","sources":["src/components/table/z-tfoot/styles.css?tag=z-tfoot&encapsulation=shadow","src/components/css-components/z-table/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 margin-top: -1px;\n}\n\n:host([sticky]) {\n position: sticky;\n z-index: 1;\n bottom: 0;\n background-color: var(--color-surface01);\n}\n","z-table,\ntable.z-table {\n background-color: var(--color-surface01);\n\n --z-table--cells-padding: calc(var(--space-unit) * 2);\n}\n\ntable.z-table {\n border-collapse: collapse;\n}\n\nz-thead,\ntable.z-table thead {\n background-color: var(--color-background);\n\n --z-table--cells-bottom-border-size: var(--border-size-medium);\n}\n\nz-tfoot,\ntable.z-table tfoot {\n border-top: var(--border-size-medium) solid var(--color-surface03);\n border-bottom: var(--border-size-medium) solid var(--color-surface03);\n}\n\nz-tfoot z-tr,\ntable.z-table tfoot tr {\n border-bottom: calc(var(--z-table--cells-bottom-border-size)) solid var(--color-surface03) !important;\n}\n\nz-tr,\ntable.z-table tr {\n border-bottom: var(--z-table--cells-bottom-border-size, var(--border-size-small)) solid var(--color-surface03);\n}\n\nz-td,\nz-th,\ntable.z-table td,\ntable.z-table th {\n padding: var(--z-table--cells-padding, calc(var(--space-unit) * 2));\n text-align: left;\n}\n\nz-th:not(:first-child),\nz-td:not(:first-child),\ntable.z-table th:not(:first-child),\ntable.z-table td:not(:first-child) {\n border-left: var(--z-table--cell-left-border, none);\n}\n\nz-table[bordered],\ntable.z-table.z-table-bordered {\n --z-table--cell-left-border: 1px solid var(--color-surface03);\n}\n\ntable.z-table-hover > tbody > tr:hover > td,\ntable.z-table-hover > tfoot > tr:hover > td {\n position: relative;\n background-color: var(--color-surface02);\n}\n\ntable.z-table-hover > tbody > tr:hover > td::after,\ntable.z-table-hover > tfoot > tr:hover > td::after {\n position: absolute;\n z-index: 1;\n top: 0;\n right: 0;\n bottom: 0;\n left: -1px;\n box-shadow:\n inset 0 var(--border-size-small) 0 var(--color-surface04),\n inset 0 calc(var(--border-size-small) * -1) 0 var(--color-surface04);\n content: \"\";\n}\n\ntable.z-table-hover > tbody > tr:hover > td:first-child::after,\ntable.z-table-hover > thead > tr:hover > th:first-child::after,\ntable.z-table-hover > tfoot > tr:hover > td:first-child::after {\n left: 0;\n}\n","import {Component, ComponentInterface, 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 styleUrls: [\"styles.css\", \"../../css-components/z-table/styles.css\"],\n shadow: true,\n})\nexport class ZTfoot implements ComponentInterface {\n /\n If true, the footer will be stuck to the bottom of the table.\n */\n @Prop({reflect: true})\n sticky = false;\n\n render(): void {\n return (\n <Host\n role=\"rowgroup\"\n tabIndex={-1}\n >\n <slot></slot>\n </Host>\n );\n }\n}\n"],"names":["stylesCss"],"mappings":";;AAAA,MAAMA,WAAS,GAAG,MAAM,CAAC,qJAAqJ,CAAC;;ACA/K,MAAM,SAAS,GAAG,MAAM,CAAC,0sDAA0sD,CAAC;;MCWvtD,MAAM,GAAA,MAAA;AALnB,IAAA,WAAA,CAAA,OAAA,EAAA;;AAME;;AAEG;AAEH,QAAA,IAAA,CAAA,MAAM,GAAG,KAAK;AAYf;IAVC,MAAM,GAAA;AACJ,QAAA,QACE,CAAA,CAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EACH,IAAI,EAAC,UAAU,EACf,QAAQ,EAAE,EAAE,EAAA,EAEZ,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAa,CACR;;;;;;;"}

package/dist/esm/z-th.entry.js CHANGED Viewed

@@ -1,9 +1,11 @@
-import { r as registerInstance, c as createEvent, h, H as Host, d as getElement } from './index-BEHxru6n.js';
-import { P as PopoverPosition, S as SortDirection, e as ControlSize, B as ButtonVariant } from './index-B3nR3-Jw.js';
+import { r as registerInstance, c as createEvent, h, H as Host, d as getElement } from './index-BcDWN4F1.js';
+import { P as PopoverPosition, S as SortDirection, e as ControlSize, B as ButtonVariant } from './index-DdetsoIY.js';
-const zTableCellsCss = () => `: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 zTableCellsCss = () => `:host{position:relative;display:flex;max-width:100%;align-items:center;background-color:var(--color-surface01);gap:calc(var(--space-unit) * 2) var(--space-unit)}:host,*{box-sizing:border-box}:host([sticky]){position:sticky;z-index:1;top:0;left:0;box-shadow:8px 0 16px -8px var(--shadow-color-base)}:host([menu-open]){z-index:2}.cell--content{display:flex;width:100%;height:100%;align-items:center}:host([show-menu]) .cell--content{column-gap:var(--space-unit)}.cell--menu-container{margin-left:auto}:host(:not([show-menu])) .cell--menu-container{opacity:0;pointer-events:none}:host(:is([show-menu],[menu-open])) .cell--menu-container,:host([show-menu]) .cell--menu-container:focus-within{z-index:1;opacity:1;pointer-events:all}:host .cell-popover{z-index:100}@media (min-width: 768px) and (hover: hover){:host([show-menu="hover"]) .cell--menu-container{opacity:0;pointer-events:none}:host([show-menu="hover"]:hover) .cell--menu-container{z-index:1;opacity:1;pointer-events:all}}`;
-const stylesCss = () => `: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 stylesCss$1 = () => `:host{z-index:1;padding:0;background-color:var(--color-background);font-weight:var(--font-sb)}:host([show-sorting]) .cell--content{column-gap:var(--space-unit)}.z-th--sort-button{position:relative;padding:0;border:none;background-color:transparent;cursor:pointer;outline:none}.z-th--sort-button:focus,.z-th--sort-button:focus-visible{box-shadow:var(--shadow-focus-primary);opacity:1;outline:none;pointer-events:all}@media (min-width: 768px) and (hover: hover){:host([show-sorting="hover"]) .z-th--sort-button{opacity:0;pointer-events:none}:host([show-sorting="hover"]:hover) .z-th--sort-button,:host([show-sorting="hover"]) .z-th--sort-button:focus:focus-visible,:host([show-sorting="always"]) .z-th--sort-button,:host([sorted]) .z-th--sort-button{opacity:1;pointer-events:all}}:host([show-sorting="hover"]:hover) .z-th--sort-button::after,:host([show-sorting="hover"]) .z-th--sort-button:focus:focus-visible::after,:host([show-sorting="always"]) .z-th--sort-button::after,:host([sorted]) .z-th--sort-button::after{position:absolute;top:6px;left:6px;width:calc(100% - 12px);height:calc(100% - 10px);background-color:transparent;content:""}`;
+const stylesCss = () => `z-table,table.z-table{background-color:var(--color-surface01);--z-table--cells-padding:calc(var(--space-unit) * 2)}table.z-table{border-collapse:collapse}z-thead,table.z-table thead{background-color:var(--color-background);--z-table--cells-bottom-border-size:var(--border-size-medium)}z-tfoot,table.z-table tfoot{border-top:var(--border-size-medium) solid var(--color-surface03);border-bottom:var(--border-size-medium) solid var(--color-surface03)}z-tfoot z-tr,table.z-table tfoot tr{border-bottom:calc(var(--z-table--cells-bottom-border-size)) solid var(--color-surface03) !important}z-tr,table.z-table tr{border-bottom:var(--z-table--cells-bottom-border-size, var(--border-size-small)) solid var(--color-surface03)}z-td,z-th,table.z-table td,table.z-table th{padding:var(--z-table--cells-padding, calc(var(--space-unit) * 2));text-align:left}z-th:not(:first-child),z-td:not(:first-child),table.z-table th:not(:first-child),table.z-table td:not(:first-child){border-left:var(--z-table--cell-left-border, none)}z-table[bordered],table.z-table.z-table-bordered{--z-table--cell-left-border:1px solid var(--color-surface03)}table.z-table-hover>tbody>tr:hover>td,table.z-table-hover>tfoot>tr:hover>td{position:relative;background-color:var(--color-surface02)}table.z-table-hover>tbody>tr:hover>td::after,table.z-table-hover>tfoot>tr:hover>td::after{position:absolute;z-index:1;top:0;right:0;bottom:0;left:-1px;box-shadow:inset 0 var(--border-size-small) 0 var(--color-surface04),     inset 0 calc(var(--border-size-small) * -1) 0 var(--color-surface04);content:""}table.z-table-hover>tbody>tr:hover>td:first-child::after,table.z-table-hover>thead>tr:hover>th:first-child::after,table.z-table-hover>tfoot>tr:hover>td:first-child::after{left:0}`;
 const ZTh = class {
     constructor(hostRef) {
@@ -72,7 +74,7 @@ const ZTh = class {
         this.updateColspan();
     }
     render() {
-        return (h(Host, { key: '029656c92d8e6abda98ecb1c1f8f37df5561993b', role: "columnheader", "menu-open": this.isMenuOpen, "aria-sort": this.ariaSortDirection, sortable: this.showSorting }, h("div", { key: 'a00a37619da7fba5ce5f0ff00644c321f6324d3d', class: "cell--content" }, h("slot", { key: '427c778843968776001f3a8486df91a32a51a620' }), this.showSorting && (h("button", { key: '77d2f3841e1398e9df475d91445a9ccd52133335', class: "z-th--sort-button", type: "button", onClick: this.handleSort.bind(this) }, h("z-icon", { key: '3e29de562c699e7ea2b1acab0273d759f80f5b1f', name: this.sortDirection === SortDirection.DESC ? "arrow-simple-up" : "arrow-simple-down", width: 14, height: 14 }))), this.showMenu && (h("div", { key: 'a6fe1bc8e02e9f5238835c57f32a2a17b5f3e5a2', class: "cell--menu-container" }, h("z-button", { key: '7df03bf2a1411aa5357a9f31f2812572a9e564df', 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: '73ecdad7bc49295072fa2163e6c94413e269755e', ref: (el) => (this.popoverEl = el), bindTo: this.menuTrigger, onOpenChange: (event) => (this.isMenuOpen = event.detail.open), position: this.popoverPosition }, h("slot", { key: 'c5cb377cc2304e37f508589f818fb97037d9935d', name: "contextual-menu" })))))));
+        return (h(Host, { key: 'aef115e04b8a8c37c749a568bcb24250e062008b', role: "columnheader", "menu-open": this.isMenuOpen, "aria-sort": this.ariaSortDirection, sortable: this.showSorting }, h("div", { key: '5b78767c1d65440363c06d5e4b7137598e74d8b4', class: "cell--content" }, h("slot", { key: '340210db9182785b89ed01a26d6dc60558aa9f4f' }), this.showSorting && (h("button", { key: '2c6f42cbf3a2c1d37af04182731503accfe67362', class: "z-th--sort-button", type: "button", onClick: this.handleSort.bind(this) }, h("z-icon", { key: 'ad73a2838da75772e84e431c36256e77bdf39157', name: this.sortDirection === SortDirection.DESC ? "arrow-simple-up" : "arrow-simple-down", width: 14, height: 14 }))), this.showMenu && (h("div", { key: 'd4c23d3a5b05ccea94a03efa6b10efc65e4a0cf4', class: "cell--menu-container" }, h("z-button", { key: 'fb0930c50cd3ac363e764ded3d7be227678a5d2d', 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: 'b720485c31c2070d77e33bceacd5be582516ae38', ref: (el) => (this.popoverEl = el), bindTo: this.menuTrigger, onOpenChange: (event) => (this.isMenuOpen = event.detail.open), position: this.popoverPosition }, h("slot", { key: '7372fa0d1ca9773ebbf8b6c8ec581133967aafdf', name: "contextual-menu" })))))));
     }
     get host() { return getElement(this); }
     static get watchers() { return {
@@ -81,7 +83,7 @@ const ZTh = class {
             }]
     }; }
 };
-ZTh.style = zTableCellsCss() + stylesCss();
+ZTh.style = zTableCellsCss() + (stylesCss$1() + stylesCss());
 export { ZTh as z_th };
 //# sourceMappingURL=z-th.entry.js.map

package/dist/esm/z-th.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"z-th.entry.js","sources":["src/components/table/cells/z-table-cells.css?tag=z-th&encapsulation=shadow","src/components/table/cells/z-th/styles.css?tag=z-th&encapsulation=shadow","src/components/table/cells/z-th/index.tsx"],"sourcesContent":[":host {\n position: relative;\n display: flex;\n max-width: 100%;\n align-items: center;\n padding: calc(var(--z-table--cells-padding, calc(var(--space-unit) * 2)));\n background-color: var(--color-surface01);\n gap: calc(var(--space-unit) * 2) var(--space-unit);\n}\n\n:host,\n* {\n box-sizing: border-box;\n}\n\n:host([sticky]) {\n position: sticky;\n z-index: 1;\n top: 0;\n left: 0;\n box-shadow: 8px 0 16px -8px var(--shadow-color-base);\n}\n\n:host([menu-open]) {\n z-index: 2;\n}\n\n.cell--content {\n display: flex;\n width: 100%;\n height: 100%;\n align-items: center;\n}\n\n:host([show-menu]) .cell--content {\n column-gap: var(--space-unit);\n}\n\n.cell--menu-container {\n margin-left: auto;\n}\n\n:host(:not([show-menu])) .cell--menu-container {\n opacity: 0;\n pointer-events: none;\n}\n\n:host(:is([show-menu], [menu-open])) .cell--menu-container,\n:host([show-menu]) .cell--menu-container:focus-within {\n z-index: 1;\n opacity: 1;\n pointer-events: all;\n}\n\n:host .cell-popover {\n z-index: 100;\n}\n\n@media (min-width: 768px) and (hover: hover) {\n :host([show-menu=\"hover\"]) .cell--menu-container {\n opacity: 0;\n pointer-events: none;\n }\n\n :host([show-menu=\"hover\"]:hover) .cell--menu-container {\n z-index: 1;\n opacity: 1;\n pointer-events: all;\n }\n}\n",":host {\n z-index: 1;\n padding: 0;\n background-color: var(--color-background);\n font-weight: var(--font-sb);\n}\n\n.cell--content {\n padding: var(--z-table--cells-padding, calc(var(--space-unit) * 2));\n}\n\n:host([show-sorting]) .cell--content {\n column-gap: var(--space-unit);\n}\n\n.z-th--sort-button {\n position: relative;\n padding: 0;\n border: none;\n background-color: transparent;\n cursor: pointer;\n outline: none;\n}\n\n.z-th--sort-button:focus,\n.z-th--sort-button:focus-visible {\n box-shadow: var(--shadow-focus-primary);\n opacity: 1;\n outline: none;\n pointer-events: all;\n}\n\n@media (min-width: 768px) and (hover: hover) {\n :host([show-sorting=\"hover\"]) .z-th--sort-button {\n opacity: 0;\n pointer-events: none;\n }\n\n :host([show-sorting=\"hover\"]:hover) .z-th--sort-button,\n :host([show-sorting=\"hover\"]) .z-th--sort-button:focus:focus-visible,\n :host([show-sorting=\"always\"]) .z-th--sort-button,\n :host([sorted]) .z-th--sort-button {\n opacity: 1;\n pointer-events: all;\n }\n}\n\n:host([show-sorting=\"hover\"]:hover) .z-th--sort-button::after,\n:host([show-sorting=\"hover\"]) .z-th--sort-button:focus:focus-visible::after,\n:host([show-sorting=\"always\"]) .z-th--sort-button::after,\n:host([sorted]) .z-th--sort-button::after {\n position: absolute;\n top: 6px;\n left: 6px;\n width: calc(100% - 12px);\n height: calc(100% - 10px);\n background-color: transparent;\n content: \"\";\n}\n","import {Component, ComponentInterface, 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 styleUrls: [\"../z-table-cells.css\", \"styles.css\"],\n shadow: true,\n})\nexport class ZTh implements ComponentInterface {\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"],"names":[],"mappings":"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"}
1	+ {"version":3,"file":"z-th.entry.js","sources":["src/components/table/cells/z-table-cells.css?tag=z-th&encapsulation=shadow","src/components/table/cells/z-th/styles.css?tag=z-th&encapsulation=shadow","src/components/css-components/z-table/styles.css?tag=z-th&encapsulation=shadow","src/components/table/cells/z-th/index.tsx"],"sourcesContent":[":host {\n position: relative;\n display: flex;\n max-width: 100%;\n align-items: center;\n background-color: var(--color-surface01);\n gap: calc(var(--space-unit) * 2) var(--space-unit);\n}\n\n:host,\n* {\n box-sizing: border-box;\n}\n\n:host([sticky]) {\n position: sticky;\n z-index: 1;\n top: 0;\n left: 0;\n box-shadow: 8px 0 16px -8px var(--shadow-color-base);\n}\n\n:host([menu-open]) {\n z-index: 2;\n}\n\n.cell--content {\n display: flex;\n width: 100%;\n height: 100%;\n align-items: center;\n}\n\n:host([show-menu]) .cell--content {\n column-gap: var(--space-unit);\n}\n\n.cell--menu-container {\n margin-left: auto;\n}\n\n:host(:not([show-menu])) .cell--menu-container {\n opacity: 0;\n pointer-events: none;\n}\n\n:host(:is([show-menu], [menu-open])) .cell--menu-container,\n:host([show-menu]) .cell--menu-container:focus-within {\n z-index: 1;\n opacity: 1;\n pointer-events: all;\n}\n\n:host .cell-popover {\n z-index: 100;\n}\n\n@media (min-width: 768px) and (hover: hover) {\n :host([show-menu=\"hover\"]) .cell--menu-container {\n opacity: 0;\n pointer-events: none;\n }\n\n :host([show-menu=\"hover\"]:hover) .cell--menu-container {\n z-index: 1;\n opacity: 1;\n pointer-events: all;\n }\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:host([show-sorting]) .cell--content {\n column-gap: var(--space-unit);\n}\n\n.z-th--sort-button {\n position: relative;\n padding: 0;\n border: none;\n background-color: transparent;\n cursor: pointer;\n outline: none;\n}\n\n.z-th--sort-button:focus,\n.z-th--sort-button:focus-visible {\n box-shadow: var(--shadow-focus-primary);\n opacity: 1;\n outline: none;\n pointer-events: all;\n}\n\n@media (min-width: 768px) and (hover: hover) {\n :host([show-sorting=\"hover\"]) .z-th--sort-button {\n opacity: 0;\n pointer-events: none;\n }\n\n :host([show-sorting=\"hover\"]:hover) .z-th--sort-button,\n :host([show-sorting=\"hover\"]) .z-th--sort-button:focus:focus-visible,\n :host([show-sorting=\"always\"]) .z-th--sort-button,\n :host([sorted]) .z-th--sort-button {\n opacity: 1;\n pointer-events: all;\n }\n}\n\n:host([show-sorting=\"hover\"]:hover) .z-th--sort-button::after,\n:host([show-sorting=\"hover\"]) .z-th--sort-button:focus:focus-visible::after,\n:host([show-sorting=\"always\"]) .z-th--sort-button::after,\n:host([sorted]) .z-th--sort-button::after {\n position: absolute;\n top: 6px;\n left: 6px;\n width: calc(100% - 12px);\n height: calc(100% - 10px);\n background-color: transparent;\n content: \"\";\n}\n","z-table,\ntable.z-table {\n background-color: var(--color-surface01);\n\n --z-table--cells-padding: calc(var(--space-unit) * 2);\n}\n\ntable.z-table {\n border-collapse: collapse;\n}\n\nz-thead,\ntable.z-table thead {\n background-color: var(--color-background);\n\n --z-table--cells-bottom-border-size: var(--border-size-medium);\n}\n\nz-tfoot,\ntable.z-table tfoot {\n border-top: var(--border-size-medium) solid var(--color-surface03);\n border-bottom: var(--border-size-medium) solid var(--color-surface03);\n}\n\nz-tfoot z-tr,\ntable.z-table tfoot tr {\n border-bottom: calc(var(--z-table--cells-bottom-border-size)) solid var(--color-surface03) !important;\n}\n\nz-tr,\ntable.z-table tr {\n border-bottom: var(--z-table--cells-bottom-border-size, var(--border-size-small)) solid var(--color-surface03);\n}\n\nz-td,\nz-th,\ntable.z-table td,\ntable.z-table th {\n padding: var(--z-table--cells-padding, calc(var(--space-unit) * 2));\n text-align: left;\n}\n\nz-th:not(:first-child),\nz-td:not(:first-child),\ntable.z-table th:not(:first-child),\ntable.z-table td:not(:first-child) {\n border-left: var(--z-table--cell-left-border, none);\n}\n\nz-table[bordered],\ntable.z-table.z-table-bordered {\n --z-table--cell-left-border: 1px solid var(--color-surface03);\n}\n\ntable.z-table-hover > tbody > tr:hover > td,\ntable.z-table-hover > tfoot > tr:hover > td {\n position: relative;\n background-color: var(--color-surface02);\n}\n\ntable.z-table-hover > tbody > tr:hover > td::after,\ntable.z-table-hover > tfoot > tr:hover > td::after {\n position: absolute;\n z-index: 1;\n top: 0;\n right: 0;\n bottom: 0;\n left: -1px;\n box-shadow:\n inset 0 var(--border-size-small) 0 var(--color-surface04),\n inset 0 calc(var(--border-size-small) * -1) 0 var(--color-surface04);\n content: \"\";\n}\n\ntable.z-table-hover > tbody > tr:hover > td:first-child::after,\ntable.z-table-hover > thead > tr:hover > th:first-child::after,\ntable.z-table-hover > tfoot > tr:hover > td:first-child::after {\n left: 0;\n}\n","import {Component, ComponentInterface, 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 styleUrls: [\"../z-table-cells.css\", \"styles.css\", \"../../../css-components/z-table/styles.css\"],\n shadow: true,\n})\nexport class ZTh implements ComponentInterface {\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"],"names":["stylesCss"],"mappings":"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"}

package/dist/esm/z-thead.entry.js CHANGED Viewed

@@ -1,6 +1,8 @@
-import { r as registerInstance, h, H as Host, d as getElement } from './index-BEHxru6n.js';
+import { r as registerInstance, h, H as Host, d as getElement } from './index-BcDWN4F1.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 stylesCss$1 = () => `:host{--z-table--cells-background:var(     --color-background   );display:block;box-sizing:border-box}:host([sticky]){position:sticky;z-index:2;top:0;box-shadow:0 2px 4px -2px var(--shadow-color-base)}:host(:focus-visible){box-shadow:none;outline:none}`;
+const stylesCss = () => `z-table,table.z-table{background-color:var(--color-surface01);--z-table--cells-padding:calc(var(--space-unit) * 2)}table.z-table{border-collapse:collapse}z-thead,table.z-table thead{background-color:var(--color-background);--z-table--cells-bottom-border-size:var(--border-size-medium)}z-tfoot,table.z-table tfoot{border-top:var(--border-size-medium) solid var(--color-surface03);border-bottom:var(--border-size-medium) solid var(--color-surface03)}z-tfoot z-tr,table.z-table tfoot tr{border-bottom:calc(var(--z-table--cells-bottom-border-size)) solid var(--color-surface03) !important}z-tr,table.z-table tr{border-bottom:var(--z-table--cells-bottom-border-size, var(--border-size-small)) solid var(--color-surface03)}z-td,z-th,table.z-table td,table.z-table th{padding:var(--z-table--cells-padding, calc(var(--space-unit) * 2));text-align:left}z-th:not(:first-child),z-td:not(:first-child),table.z-table th:not(:first-child),table.z-table td:not(:first-child){border-left:var(--z-table--cell-left-border, none)}z-table[bordered],table.z-table.z-table-bordered{--z-table--cell-left-border:1px solid var(--color-surface03)}table.z-table-hover>tbody>tr:hover>td,table.z-table-hover>tfoot>tr:hover>td{position:relative;background-color:var(--color-surface02)}table.z-table-hover>tbody>tr:hover>td::after,table.z-table-hover>tfoot>tr:hover>td::after{position:absolute;z-index:1;top:0;right:0;bottom:0;left:-1px;box-shadow:inset 0 var(--border-size-small) 0 var(--color-surface04),     inset 0 calc(var(--border-size-small) * -1) 0 var(--color-surface04);content:""}table.z-table-hover>tbody>tr:hover>td:first-child::after,table.z-table-hover>thead>tr:hover>th:first-child::after,table.z-table-hover>tfoot>tr:hover>td:first-child::after{left:0}`;
 const ZThead = class {
     constructor(hostRef) {
@@ -15,11 +17,11 @@ const ZThead = class {
         this.isFocusable = false;
     }
     render() {
-        return (h(Host, { key: 'c32f2b2d2921e034d18d3b7121f59ee7b3b7b398', role: "rowgroup", tabIndex: this.isFocusable ? 0 : -1 }, h("slot", { key: 'f74ef0383c4111415134df8ae1492fda11da8568' })));
+        return (h(Host, { key: '0e43e10373817b9ee5e4f1574fb0d46b232c510d', role: "rowgroup", tabIndex: this.isFocusable ? 0 : -1 }, h("slot", { key: 'aefd2ed2698efb7deabd11284f3d6cae95800e50' })));
     }
     get host() { return getElement(this); }
 };
-ZThead.style = stylesCss();
+ZThead.style = stylesCss$1() + stylesCss();
 export { ZThead as z_thead };
 //# sourceMappingURL=z-thead.entry.js.map

package/dist/esm/z-thead.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"z-thead.entry.js","sources":["src/components/table/z-thead/styles.css?tag=z-thead&encapsulation=shadow","src/components/table/z-thead/index.tsx"],"sourcesContent":[":host {\n --z-table--cells-~~bottom-border-size: var(\n --border-size-medium\n ); /* Needed to handle the border of the expand button cell /\n\n --z-table--cells-~~background: var(\n --color-background\n ); / Needed to handle the background-color of the expand button cell /\n\n display: block;\n box-sizing: border-box;\n}\n\n:host([sticky]) {\n position: sticky;\n z-index: 2;\n top: 0;\n box-shadow: 0 2px 4px -2px var(--shadow-color-base);\n}\n\n:host(:focus-visible) {\n box-shadow: none;\n outline: none;\n}\n","import {Component, ComponentInterface, Element, Host, Prop, h} from \"@stencil/core\";\n\n/\n ZThead component.\n * @slot - ZThead content (`z-tr`).\n /\n@Component({\n tag: \"z-thead\",\n ~~styleUrl~~: \"styles.css\",\n shadow: true,\n})\nexport class ZThead implements ComponentInterface {\n @Element() host: HTMLZTheadElement;\n\n /\n If true, the header will be stuck to the top of the table.\n /\n @Prop({reflect: true})\n sticky = false;\n\n /\n The element is focusable\n */\n @Prop({reflect: true})\n isFocusable = false;\n\n render(): HTMLZTheadElement {\n return (\n <Host\n role=\"rowgroup\"\n tabIndex={this.isFocusable ? 0 : -1}\n >\n <slot></slot>\n </Host>\n );\n }\n}\n"],"names":[],"mappings":";;AAAA,MAAM,SAAS,GAAG,MAAM,CAAC,~~kUAAkU~~,CAAC;;~~MCW/U~~,MAAM,GAAA,MAAA;AALnB,IAAA,WAAA,CAAA,OAAA,EAAA;;AAQE;;AAEG;AAEH,QAAA,IAAA,CAAA,MAAM,GAAG,KAAK;AAEd;;AAEG;AAEH,QAAA,IAAA,CAAA,WAAW,GAAG,KAAK;AAYpB;IAVC,MAAM,GAAA;AACJ,QAAA,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EACH,IAAI,EAAC,UAAU,EACf,QAAQ,EAAE,IAAI,CAAC,WAAW,GAAG,CAAC,GAAG,EAAE,EAAA,EAEnC,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAa,CACR;;;;;;;;"}
1	+ {"version":3,"file":"z-thead.entry.js","sources":["src/components/table/z-thead/styles.css?tag=z-thead&encapsulation=shadow","src/components/css-components/z-table/styles.css?tag=z-thead&encapsulation=shadow","src/components/table/z-thead/index.tsx"],"sourcesContent":[":host {\n --z-table--cells-background: var(\n --color-background\n ); /* Needed to handle the background-color of the expand button cell /\n\n display: block;\n box-sizing: border-box;\n}\n\n:host([sticky]) {\n position: sticky;\n z-index: 2;\n top: 0;\n box-shadow: 0 2px 4px -2px var(--shadow-color-base);\n}\n\n:host(:focus-visible) {\n box-shadow: none;\n outline: none;\n}\n","z-table,\ntable.z-table {\n background-color: var(--color-surface01);\n\n --z-table--cells-padding: calc(var(--space-unit) 2);\n}\n\ntable.z-table {\n border-collapse: collapse;\n}\n\nz-thead,\ntable.z-table thead {\n background-color: var(--color-background);\n\n --z-table--cells-bottom-border-size: var(--border-size-medium);\n}\n\nz-tfoot,\ntable.z-table tfoot {\n border-top: var(--border-size-medium) solid var(--color-surface03);\n border-bottom: var(--border-size-medium) solid var(--color-surface03);\n}\n\nz-tfoot z-tr,\ntable.z-table tfoot tr {\n border-bottom: calc(var(--z-table--cells-bottom-border-size)) solid var(--color-surface03) !important;\n}\n\nz-tr,\ntable.z-table tr {\n border-bottom: var(--z-table--cells-bottom-border-size, var(--border-size-small)) solid var(--color-surface03);\n}\n\nz-td,\nz-th,\ntable.z-table td,\ntable.z-table th {\n padding: var(--z-table--cells-padding, calc(var(--space-unit) * 2));\n text-align: left;\n}\n\nz-th:not(:first-child),\nz-td:not(:first-child),\ntable.z-table th:not(:first-child),\ntable.z-table td:not(:first-child) {\n border-left: var(--z-table--cell-left-border, none);\n}\n\nz-table[bordered],\ntable.z-table.z-table-bordered {\n --z-table--cell-left-border: 1px solid var(--color-surface03);\n}\n\ntable.z-table-hover > tbody > tr:hover > td,\ntable.z-table-hover > tfoot > tr:hover > td {\n position: relative;\n background-color: var(--color-surface02);\n}\n\ntable.z-table-hover > tbody > tr:hover > td::after,\ntable.z-table-hover > tfoot > tr:hover > td::after {\n position: absolute;\n z-index: 1;\n top: 0;\n right: 0;\n bottom: 0;\n left: -1px;\n box-shadow:\n inset 0 var(--border-size-small) 0 var(--color-surface04),\n inset 0 calc(var(--border-size-small) * -1) 0 var(--color-surface04);\n content: \"\";\n}\n\ntable.z-table-hover > tbody > tr:hover > td:first-child::after,\ntable.z-table-hover > thead > tr:hover > th:first-child::after,\ntable.z-table-hover > tfoot > tr:hover > td:first-child::after {\n left: 0;\n}\n","import {Component, ComponentInterface, Element, Host, Prop, h} from \"@stencil/core\";\n\n/*\n ZThead component.\n * @slot - ZThead content (`z-tr`).\n /\n@Component({\n tag: \"z-thead\",\n styleUrls: [\"styles.css\", \"../../css-components/z-table/styles.css\"],\n shadow: true,\n})\nexport class ZThead implements ComponentInterface {\n @Element() host: HTMLZTheadElement;\n\n /\n If true, the header will be stuck to the top of the table.\n /\n @Prop({reflect: true})\n sticky = false;\n\n /\n The element is focusable\n */\n @Prop({reflect: true})\n isFocusable = false;\n\n render(): HTMLZTheadElement {\n return (\n <Host\n role=\"rowgroup\"\n tabIndex={this.isFocusable ? 0 : -1}\n >\n <slot></slot>\n </Host>\n );\n }\n}\n"],"names":["stylesCss"],"mappings":";;AAAA,MAAMA,WAAS,GAAG,MAAM,CAAC,4PAA4P,CAAC;;ACAtR,MAAM,SAAS,GAAG,MAAM,CAAC,0sDAA0sD,CAAC;;MCWvtD,MAAM,GAAA,MAAA;AALnB,IAAA,WAAA,CAAA,OAAA,EAAA;;AAQE;;AAEG;AAEH,QAAA,IAAA,CAAA,MAAM,GAAG,KAAK;AAEd;;AAEG;AAEH,QAAA,IAAA,CAAA,WAAW,GAAG,KAAK;AAYpB;IAVC,MAAM,GAAA;AACJ,QAAA,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EACH,IAAI,EAAC,UAAU,EACf,QAAQ,EAAE,IAAI,CAAC,WAAW,GAAG,CAAC,GAAG,EAAE,EAAA,EAEnC,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAa,CACR;;;;;;;;"}

package/dist/esm/z-toast-notification-list.entry.js CHANGED Viewed

@@ -1,5 +1,5 @@
-import { r as registerInstance, h, d as getElement } from './index-BEHxru6n.js';
-import { s as ToastNotificationPosition } from './index-B3nR3-Jw.js';
+import { r as registerInstance, h, d as getElement } from './index-BcDWN4F1.js';
+import { s as ToastNotificationPosition } from './index-DdetsoIY.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}}`;

package/dist/esm/z-toast-notification.entry.js CHANGED Viewed

@@ -1,5 +1,5 @@
-import { r as registerInstance, c as createEvent, h, H as Host, d as getElement } from './index-BEHxru6n.js';
-import { r as ToastNotificationTransition, g as KeyboardCode } from './index-B3nR3-Jw.js';
+import { r as registerInstance, c as createEvent, h, H as Host, d as getElement } from './index-BcDWN4F1.js';
+import { r as ToastNotificationTransition, g as KeyboardCode } from './index-DdetsoIY.js';
 import { g as getDefaultExportFromCjs } from './_commonjsHelpers-B85MJLTf.js';
 /*! @license DOMPurify 3.4.0 | (c) Cure53 and other contributors | Released under the Apache license 2.0 and Mozilla Public License 2.0 | github.com/cure53/DOMPurify/blob/3.4.0/LICENSE */

package/dist/esm/z-toggle-button.entry.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h } from './index-BEHxru6n.js';
+import { r as registerInstance, c as createEvent, h } from './index-BcDWN4F1.js';
 const stylesCss = () => `button{display:flex;height:36px;align-items:center;padding-right:calc(var(--space-unit) * 2);padding-left:0;border:var(--border-size-medium) solid;border-color:transparent;background-color:var(--color-surface01);border-radius:var(--border-radius);box-shadow:var(--shadow-2);color:var(--color-primary01);cursor:pointer;fill:var(--color-primary01);font-family:var(--font-family-sans);font-size:14px;font-weight:var(--font-sb);outline:none;text-transform:uppercase}button::-moz-focus-inner{border:0}button:hover{color:var(--color-hover-primary);fill:var(--color-hover-primary)}button:focus{box-shadow:var(--shadow-focus-primary)}button:active{border-color:var(--color-pressed-primary);box-shadow:var(--shadow-2);color:var(--color-pressed-primary);fill:var(--color-pressed-primary)}button:disabled{color:var(--color-disabled03);fill:var(--color-disabled03)}z-icon{display:inline-block;margin:0 var(--space-unit) 0 calc(var(--space-unit) * 2);transform:rotate(360deg);transition:all 200ms linear}button.isopen{top:-20px}button.avoid-clicks{pointer-events:none}`;

package/dist/esm/z-toggle-switch.entry.js CHANGED Viewed

@@ -1,6 +1,6 @@
-import { r as registerInstance, c as createEvent, h, H as Host } from './index-BEHxru6n.js';
-import { k as LabelPosition } from './index-B3nR3-Jw.js';
-import { r as randomId } from './utils-C9lc3rtK.js';
+import { r as registerInstance, c as createEvent, h, H as Host } from './index-BcDWN4F1.js';
+import { k as LabelPosition } from './index-DdetsoIY.js';
+import { r as randomId } from './utils-CEdyahRZ.js';
 import './breakpoints-Q-tWjk7P.js';
 const stylesCss = () => `.sc-z-toggle-switch-h{position:relative;display:inline-flex;font-family:var(--font-family-sans);font-weight:var(--font-rg)}label.sc-z-toggle-switch{display:flex;flex-direction:row;align-items:center;cursor:pointer}label.disabled.sc-z-toggle-switch{cursor:default}label.right.sc-z-toggle-switch{flex-direction:row-reverse}label.sc-z-toggle-switch>span.sc-z-toggle-switch:first-child{color:var(--color-default-text);letter-spacing:0}label.left.sc-z-toggle-switch>span.sc-z-toggle-switch:first-child{margin-right:var(--space-unit)}label.right.sc-z-toggle-switch>span.sc-z-toggle-switch:first-child{margin-left:var(--space-unit)}label.sc-z-toggle-switch>span.container.sc-z-toggle-switch{position:relative;top:1px;left:1px;display:flex;width:calc(var(--space-unit) * 4);height:18px;align-items:center;background-color:var(--gray500);border-radius:var(--space-unit);color:var(--gray500);cursor:pointer}label.sc-z-toggle-switch>span.container.disabled.sc-z-toggle-switch,label.sc-z-toggle-switch>span.container.checked.disabled.sc-z-toggle-switch{background-color:var(--color-disabled01);cursor:default}label.sc-z-toggle-switch>span.container.checked.disabled.sc-z-toggle-switch>span.circle.sc-z-toggle-switch>z-icon.sc-z-toggle-switch{fill:var(--color-disabled01)}label.sc-z-toggle-switch>span.container.checked.sc-z-toggle-switch{background-color:var(--color-primary01);fill:var(--color-primary01)}input.sc-z-toggle-switch:focus:focus-visible+label.sc-z-toggle-switch>span.container.sc-z-toggle-switch:not(.disabled){box-shadow:var(--shadow-focus-primary);outline:none}input.sc-z-toggle-switch:focus:focus-visible+label.sc-z-toggle-switch>span.container.disabled.sc-z-toggle-switch{outline:none}label.sc-z-toggle-switch>span.container.sc-z-toggle-switch:not(.disabled):hover{background-color:var(--color-hover-primary);fill:var(--color-hover-primary)}label.sc-z-toggle-switch>span.container.sc-z-toggle-switch>span.circle.sc-z-toggle-switch{position:absolute;top:1px;left:1px;display:flex;width:calc(var(--space-unit) * 2);height:calc(var(--space-unit) * 2);align-items:center;justify-content:center;margin:0;background-color:var(--color-white);border-radius:7px;box-shadow:var(--shadow-1);transition:transform 0.3s ease}label.sc-z-toggle-switch>span.container.checked.sc-z-toggle-switch>span.circle.sc-z-toggle-switch{transform:translateX(calc(100% - 2px))}input[type="checkbox"].sc-z-toggle-switch{position:absolute;z-index:-1;opacity:0;pointer-events:none}`;

package/dist/esm/z-tool.entry.js CHANGED Viewed

@@ -1,6 +1,6 @@
-import { r as registerInstance, c as createEvent, h, H as Host, d as getElement } from './index-BEHxru6n.js';
-import { P as PopoverPosition, g as KeyboardCode } from './index-B3nR3-Jw.js';
-import { a as containsElement } from './utils-C9lc3rtK.js';
+import { r as registerInstance, c as createEvent, h, H as Host, d as getElement } from './index-BcDWN4F1.js';
+import { P as PopoverPosition, g as KeyboardCode } from './index-DdetsoIY.js';
+import { a as containsElement } from './utils-CEdyahRZ.js';
 import './breakpoints-Q-tWjk7P.js';
 const stylesCss = () => `:host,*{box-sizing:border-box}.z-tool{--z-tool-size:calc(var(--space-unit) * 5.5);--z-tool-icon-size:calc(var(--space-unit) * 2.5);position:relative;display:inline-flex;width:var(--z-tool-size);height:var(--z-tool-size);align-items:center;justify-content:center;padding:0;border:none;margin:0;background-color:var(--color-surface01);border-radius:var(--border-radius);cursor:pointer}:host(:is([active],[open])) .z-tool{box-shadow:inset 0 0 0 2px var(--color-primary01)}:host([open]) .z-tool{background:var(--color-primary03)}@media (hover: hover){:host(:hover),:host(.z-tool-tooltip-open){z-index:1}:host(:not([disabled])) .z-tool:hover{background-color:var(--color-primary03)}}.z-tool:focus:focus-visible{background-color:var(--color-primary03);outline:none}z-icon{--z-icon-width:var(--z-tool-icon-size);--z-icon-height:var(--z-tool-icon-size);display:block;fill:var(--color-default-icon)}:host([disabled]) .z-tool{color:var(--color-disabled01-icon);cursor:not-allowed}:host([disabled]) z-icon{fill:var(--color-disabled01-icon)}.z-tool-tooltip{--z-tooltip-padding:calc(var(--space-unit) * 1.5) calc(var(--space-unit) * 2);--z-tooltip-shadow-filter:drop-shadow(0 4px 8px var(--shadow-color-base));position:relative;z-index:2;font-family:var(--font-family-sans);white-space:nowrap}.z-tool-submenu{z-index:3;border-radius:calc(var(--border-radius) + var(--border-size-small))}.z-tool-submenu ::slotted(z-color-picker){border:var(--border-size-small) solid var(--color-surface03);border-radius:var(--border-radius)}@media (max-width: 767px) and (hover: none){.z-tool-tooltip{display:none !important}}`;

package/dist/esm/z-toolbar.entry.js CHANGED Viewed

@@ -1,5 +1,5 @@
-import { r as registerInstance, h, H as Host, d as getElement } from './index-BEHxru6n.js';
-import { g as KeyboardCode } from './index-B3nR3-Jw.js';
+import { r as registerInstance, h, H as Host, d as getElement } from './index-BcDWN4F1.js';
+import { g as KeyboardCode } from './index-DdetsoIY.js';
 const stylesCss = () => `:host,*{box-sizing:border-box}:host{display:flex;width:fit-content;align-items:center;padding:0;border:var(--border-size-small) solid var(--color-surface03);background-color:var(--color-surface01);border-radius:calc(var(--border-radius) + var(--border-size-small));box-shadow:var(--shadow-4);gap:calc(var(--space-unit) / 2)}::slotted(z-divider){height:calc(var(--space-unit) * 4.5) !important}@media (max-width: 767px){:host{--z-toolbar-columns:6;position:relative;display:grid;max-width:100%;background:repeating-linear-gradient(         to bottom,         transparent 0,         transparent calc(var(--space-unit) * 5.5),         var(--color-surface03) calc(var(--space-unit) * 5.5),         var(--color-surface03) calc(var(--space-unit) * 5.5 + 1px)       )       center / calc(100% - var(--space-unit)) 100% no-repeat var(--color-surface01);gap:var(--border-size-small) calc(var(--space-unit) / 2);grid-template-columns:repeat(var(--z-toolbar-columns, auto-fill), minmax(44px, auto))}::slotted(z-divider){display:none !important}}`;

package/dist/esm/z-tooltip.entry.js CHANGED Viewed

@@ -1,5 +1,5 @@
-import { r as registerInstance, c as createEvent, h } from './index-BEHxru6n.js';
-import { P as PopoverPosition } from './index-B3nR3-Jw.js';
+import { r as registerInstance, c as createEvent, h } from './index-BcDWN4F1.js';
+import { P as PopoverPosition } from './index-DdetsoIY.js';
 const stylesCss = () => `:host{--z-tooltip-theme--surface:var(--color-surface01);--z-tooltip-theme--text:var(--color-default-text);--z-tooltip-shadow-filter:drop-shadow(0 1px 2px var(--shadow-color-base));--z-tooltip-padding:var(--space-unit)}z-popover{--z-popover-theme--surface:var(--z-tooltip-theme--surface);--z-popover-theme--text:var(--z-tooltip-theme--text);--z-popover-padding:var(--z-tooltip-padding);--z-popover-shadow-filter:var(--z-tooltip-shadow-filter)}:host([dark]) z-popover{--z-popover-theme--surface:var(--color-surface05);--z-popover-theme--text:var(--color-text-inverse)}`;

package/dist/esm/z-tr.entry.js CHANGED Viewed

@@ -1,11 +1,13 @@
-import { r as registerInstance, c as createEvent, h, H as Host, d as getElement } from './index-BEHxru6n.js';
-import { r as randomId } from './utils-C9lc3rtK.js';
+import { r as registerInstance, c as createEvent, h, H as Host, d as getElement } from './index-BcDWN4F1.js';
+import { r as randomId } from './utils-CEdyahRZ.js';
 import './z-td.entry.js';
 import './z-th.entry.js';
-import './index-B3nR3-Jw.js';
+import './index-DdetsoIY.js';
 import './breakpoints-Q-tWjk7P.js';
-const stylesCss = () => `:host{position:relative;display:grid;width:100%;box-sizing:border-box;grid-auto-flow:column;grid-template-columns:var(--z-table--expand-button-size, 0) repeat(var(--columns), minmax(128px, 1fr));--columns:1}*{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;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)}:host(:hover):has([tabIndex]) ::slotted(z-td),:host(:hover):has([tabIndex]) ::slotted(z-th){border-top:var(--border-size-small) solid var(--color-surface04);border-bottom:var(--border-size-small) solid var(--color-surface04);background-color:var(--color-surface02)}:host(:focus){position:relative;z-index:20;box-shadow:var(--shadow-focus-primary);outline:none}.z-tr--expand-button-container{display:flex;align-items:center;justify-content:center;background-color:var(--z-table--cells-background, var(--color-surface01))}.z-tr--expand-button-container button{display:flex;align-items:center;justify-content:center;padding:0;border:none;margin:auto;appearance:none;background:transparent;cursor:pointer;visibility:var(--show-expandable-button, hidden)}.z-tr--expand-button-container button z-icon{--z-icon-width:16px;--z-icon-height:16px}.z-tr--focus-overlay{position:absolute;z-index:30;right:0;left:0;width:100%;border-radius:4px;box-shadow:none;inset:0;outline:none;pointer-events:none;transition:box-shadow 0.2s}:host(:focus) .z-tr--focus-overlay{box-shadow:0 0 0 2px var(--shadow-focus-primary),     var(--shadow-focus-primary);outline:none}:host(:focus) ::slotted(*){border-bottom:none}:host(:focus) .z-tr--expand-button-container{border-bottom:none}`;
+const stylesCss$1 = () => `:host{position:relative;display:grid;width:100%;box-sizing:border-box;grid-auto-flow:column;grid-template-columns:var(--z-table--expand-button-size, 0) repeat(var(--columns), minmax(128px, 1fr));--columns:1}*{box-sizing:border-box}: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-top:var(--border-size-small) solid var(--color-surface03);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;box-shadow:0 4px 4px -2px var(--shadow-color-base)}:host([expanded]) .z-tr--expand-button-container,:host([expanded]) ::slotted(*){border-left:0 !important;background-color:var(--color-background)}:host([tabIndex]:hover) ::slotted(z-td),:host([tabIndex]:hover) ::slotted(z-th),:host([tabIndex]:hover) .z-tr--expand-button-container{background-color:var(--color-surface02)}:host([tabIndex]:hover) .z-tr--focus-overlay{border-top:var(--border-size-small) solid var(--color-surface04);border-bottom:var(--border-size-small) solid var(--color-surface04)}:host(:focus){position:relative;z-index:20;border:none !important;box-shadow:var(--shadow-focus-primary);outline:none}.z-tr--expand-button-container{display:flex;align-items:center;justify-content:center;background-color:var(--z-table--cells-background, var(--color-surface01))}.z-tr--expand-button-container button{display:flex;align-items:center;justify-content:center;padding:0;border:none;margin:auto;appearance:none;background:transparent;cursor:pointer;visibility:var(--show-expandable-button, hidden)}.z-tr--expand-button-container button z-icon{--z-icon-width:16px;--z-icon-height:16px}.z-tr--focus-overlay{position:absolute;z-index:30;top:calc(var(--border-size-small) * -1);bottom:0;left:0;width:100%;height:calc(100% + (var(--border-size-small) * 2));box-shadow:none;outline:none;pointer-events:none;transition:box-shadow 0.2s}:host(:focus) .z-tr--focus-overlay{box-shadow:0 0 0 2px var(--shadow-focus-primary),     var(--shadow-focus-primary);outline:none}:host(:focus) ::slotted(*){border-bottom:none}:host(:focus) .z-tr--expand-button-container{border-bottom:none}`;
+const stylesCss = () => `z-table,table.z-table{background-color:var(--color-surface01);--z-table--cells-padding:calc(var(--space-unit) * 2)}table.z-table{border-collapse:collapse}z-thead,table.z-table thead{background-color:var(--color-background);--z-table--cells-bottom-border-size:var(--border-size-medium)}z-tfoot,table.z-table tfoot{border-top:var(--border-size-medium) solid var(--color-surface03);border-bottom:var(--border-size-medium) solid var(--color-surface03)}z-tfoot z-tr,table.z-table tfoot tr{border-bottom:calc(var(--z-table--cells-bottom-border-size)) solid var(--color-surface03) !important}z-tr,table.z-table tr{border-bottom:var(--z-table--cells-bottom-border-size, var(--border-size-small)) solid var(--color-surface03)}z-td,z-th,table.z-table td,table.z-table th{padding:var(--z-table--cells-padding, calc(var(--space-unit) * 2));text-align:left}z-th:not(:first-child),z-td:not(:first-child),table.z-table th:not(:first-child),table.z-table td:not(:first-child){border-left:var(--z-table--cell-left-border, none)}z-table[bordered],table.z-table.z-table-bordered{--z-table--cell-left-border:1px solid var(--color-surface03)}table.z-table-hover>tbody>tr:hover>td,table.z-table-hover>tfoot>tr:hover>td{position:relative;background-color:var(--color-surface02)}table.z-table-hover>tbody>tr:hover>td::after,table.z-table-hover>tfoot>tr:hover>td::after{position:absolute;z-index:1;top:0;right:0;bottom:0;left:-1px;box-shadow:inset 0 var(--border-size-small) 0 var(--color-surface04),     inset 0 calc(var(--border-size-small) * -1) 0 var(--color-surface04);content:""}table.z-table-hover>tbody>tr:hover>td:first-child::after,table.z-table-hover>thead>tr:hover>th:first-child::after,table.z-table-hover>tfoot>tr:hover>td:first-child::after{left:0}`;
 const ZTr = class {
     constructor(hostRef) {
@@ -28,16 +30,13 @@ const ZTr = class {
     }
     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;
         }
+        const columns = cells.map((cell) => cell.colspan || 1).reduce((a, b) => a + b, 0);
+        this.host.style.setProperty("--columns", `${columns}`);
     }
     /**
      * Handle click on row.
@@ -69,7 +68,7 @@ const ZTr = class {
         this.updateColumns();
     }
     render() {
-        return (h(Host, { key: '92be779ec3e863cc85336fcedb02f718fa3a19fa', role: "row", tabIndex: this.expandable ? 0 : undefined, expanded: this.expanded, onClick: this.onRowClick.bind(this), onKeyDown: this.onKeyDown.bind(this) }, h("div", { key: '720c8209c21104e78129cbd76c12a6cdf8806ca2', class: "z-tr--focus-overlay", "aria-hidden": "true" }), h("div", { key: '3bb4f4d2e5ae60da5c105d1c8a99d6ff0fa59302', class: "z-tr--expand-button-container" }, this.expandable && (h("button", { key: 'd27d18c1a4515ac055ce7db13ec3efdfc7d0314d', tabIndex: -1, "aria-expanded": this.expanded ? "true" : "false", "aria-label": this.expanded ? "Comprimi riga" : "Espandi riga", "aria-controls": this.expandableContentId, type: "button" }, h("z-icon", { key: '9fd14fcab4ea512b42c63928c3e2dabb83fd1da3', name: this.expanded ? "minus-circled" : "plus-circled" })))), h("slot", { key: 'c5fcb7a2f92eb8401c4d27d28e5b68a5001616b7', onSlotchange: this.updateColumns.bind(this) })));
+        return (h(Host, { key: 'ffd8e071015ace61e51c603988d84dae42a047bb', role: "row", tabIndex: this.expandable ? 0 : undefined, expanded: this.expanded, onClick: this.onRowClick.bind(this), onKeyDown: this.onKeyDown.bind(this) }, h("div", { key: '49539d360bab6d865958910fd21f5c407fc0a16b', class: "z-tr--focus-overlay", "aria-hidden": "true" }), h("div", { key: '94c5f36a5f220a7403d0c6057faf41cf0509f68e', class: "z-tr--expand-button-container" }, this.expandable && (h("button", { key: 'ee46bd7dd59d27c6be18716fc3a46092cdac5eb6', tabIndex: -1, "aria-expanded": this.expanded ? "true" : "false", "aria-label": this.expanded ? "Comprimi riga" : "Espandi riga", "aria-controls": this.expandableContentId, type: "button" }, h("z-icon", { key: 'ce6fc941625f48f13edc7df3a43da159cf6f064d', name: this.expanded ? "minus-circled" : "plus-circled" })))), h("slot", { key: 'c41ca74f6026dda7813605940e6910a56cd576fb', onSlotchange: this.updateColumns.bind(this) })));
     }
     get host() { return getElement(this); }
     static get watchers() { return {
@@ -78,7 +77,7 @@ const ZTr = class {
             }]
     }; }
 };
-ZTr.style = stylesCss();
+ZTr.style = stylesCss$1() + stylesCss();
 export { ZTr as z_tr };
 //# sourceMappingURL=z-tr.entry.js.map

package/dist/esm/z-tr.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"z-tr.entry.js","sources":["src/components/table/z-tr/styles.css?tag=z-tr&encapsulation=shadow","src/components/table/z-tr/index.tsx"],"sourcesContent":[":host {\n position: relative;\n display: grid;\n width: 100%;\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 --columns: 1;\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:host(:hover):has([tabIndex]) ::slotted(z-td),\n:host(:hover):has([tabIndex]) ::slotted(z-th) {\n border-top: var(--border-size-small) solid var(--color-surface04);\n border-bottom: var(--border-size-small) solid var(--color-surface04);\n background-color: var(--color-surface02);\n}\n\n:host(:focus) {\n position: relative;\n z-index: 20;\n box-shadow: var(--shadow-focus-primary);\n outline: none;\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 z-icon {\n --z-icon-width: 16px;\n --z-icon-height: 16px;\n}\n\n.z-tr--focus-overlay {\n position: absolute;\n z-index: 30;\n right: 0;\n left: 0;\n width: 100%;\n border-radius: 4px;\n box-shadow: none;\n inset: 0;\n outline: none;\n pointer-events: none;\n transition: box-shadow 0.2s;\n}\n\n:host(:focus) .z-tr--focus-overlay {\n box-shadow:\n 0 0 0 2px var(--shadow-focus-primary),\n var(--shadow-focus-primary);\n outline: none;\n}\n\n:host(:focus) ::slotted() {\n border-bottom: none;\n}\n\n:host(:focus) .z-tr--expand-button-container {\n border-bottom: none;\n}\n","import {\n Component,\n ComponentInterface,\n Element,\n Event,\n EventEmitter,\n Host,\n Listen,\n Prop,\n State,\n Watch,\n h,\n} 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 implements ComponentInterface {\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 private onKeyDown(event: KeyboardEvent): void {\n if (!this.expandable) {\n return;\n }\n\n const active = document.activeElement;\n if (active !== this.host) {\n return;\n }\n\n if (event.key === \"Enter\" \|\| event.key === \" \") {\n event.preventDefault();\n this.expanded = !this.expanded;\n this.expand.emit({expanded: this.expanded});\n }\n }\n\n componentWillLoad(): void {\n this.updateColumns();\n }\n\n render(): HTMLZTrElement {\n return (\n <Host\n role=\"row\"\n tabIndex={this.expandable ? 0 : undefined}\n expanded={this.expanded}\n onClick={this.onRowClick.bind(this)}\n onKeyDown={this.onKeyDown.bind(this)}\n >\n <div\n class=\"z-tr--focus-overlay\"\n aria-hidden=\"true\"\n ></div>\n <div class=\"z-tr--expand-button-container\">\n {this.expandable && (\n <button\n tabIndex={-1}\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"],"names":[],"mappings":"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"}
1	+ {"version":3,"file":"z-tr.entry.js","sources":["src/components/table/z-tr/styles.css?tag=z-tr&encapsulation=shadow","src/components/css-components/z-table/styles.css?tag=z-tr&encapsulation=shadow","src/components/table/z-tr/index.tsx"],"sourcesContent":[":host {\n position: relative;\n display: grid;\n width: 100%;\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 --columns: 1;\n}\n\n* {\n box-sizing: border-box;\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-top: var(--border-size-small) solid var(--color-surface03);\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 border-left: 0 !important;\n background-color: var(--color-background);\n}\n\n:host([tabIndex]:hover) ::slotted(z-td),\n:host([tabIndex]:hover) ::slotted(z-th),\n:host([tabIndex]:hover) .z-tr--expand-button-container {\n background-color: var(--color-surface02);\n}\n\n:host([tabIndex]:hover) .z-tr--focus-overlay {\n border-top: var(--border-size-small) solid var(--color-surface04);\n border-bottom: var(--border-size-small) solid var(--color-surface04);\n}\n\n:host(:focus) {\n position: relative;\n z-index: 20;\n border: none !important;\n box-shadow: var(--shadow-focus-primary);\n outline: none;\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 z-icon {\n --z-icon-width: 16px;\n --z-icon-height: 16px;\n}\n\n.z-tr--focus-overlay {\n position: absolute;\n z-index: 30;\n top: calc(var(--border-size-small) * -1);\n bottom: 0;\n left: 0;\n width: 100%;\n height: calc(100% + (var(--border-size-small) * 2));\n box-shadow: none;\n outline: none;\n pointer-events: none;\n transition: box-shadow 0.2s;\n}\n\n:host(:focus) .z-tr--focus-overlay {\n box-shadow:\n 0 0 0 2px var(--shadow-focus-primary),\n var(--shadow-focus-primary);\n outline: none;\n}\n\n:host(:focus) ::slotted() {\n border-bottom: none;\n}\n\n:host(:focus) .z-tr--expand-button-container {\n border-bottom: none;\n}\n","z-table,\ntable.z-table {\n background-color: var(--color-surface01);\n\n --z-table--cells-padding: calc(var(--space-unit) 2);\n}\n\ntable.z-table {\n border-collapse: collapse;\n}\n\nz-thead,\ntable.z-table thead {\n background-color: var(--color-background);\n\n --z-table--cells-bottom-border-size: var(--border-size-medium);\n}\n\nz-tfoot,\ntable.z-table tfoot {\n border-top: var(--border-size-medium) solid var(--color-surface03);\n border-bottom: var(--border-size-medium) solid var(--color-surface03);\n}\n\nz-tfoot z-tr,\ntable.z-table tfoot tr {\n border-bottom: calc(var(--z-table--cells-bottom-border-size)) solid var(--color-surface03) !important;\n}\n\nz-tr,\ntable.z-table tr {\n border-bottom: var(--z-table--cells-bottom-border-size, var(--border-size-small)) solid var(--color-surface03);\n}\n\nz-td,\nz-th,\ntable.z-table td,\ntable.z-table th {\n padding: var(--z-table--cells-padding, calc(var(--space-unit) * 2));\n text-align: left;\n}\n\nz-th:not(:first-child),\nz-td:not(:first-child),\ntable.z-table th:not(:first-child),\ntable.z-table td:not(:first-child) {\n border-left: var(--z-table--cell-left-border, none);\n}\n\nz-table[bordered],\ntable.z-table.z-table-bordered {\n --z-table--cell-left-border: 1px solid var(--color-surface03);\n}\n\ntable.z-table-hover > tbody > tr:hover > td,\ntable.z-table-hover > tfoot > tr:hover > td {\n position: relative;\n background-color: var(--color-surface02);\n}\n\ntable.z-table-hover > tbody > tr:hover > td::after,\ntable.z-table-hover > tfoot > tr:hover > td::after {\n position: absolute;\n z-index: 1;\n top: 0;\n right: 0;\n bottom: 0;\n left: -1px;\n box-shadow:\n inset 0 var(--border-size-small) 0 var(--color-surface04),\n inset 0 calc(var(--border-size-small) * -1) 0 var(--color-surface04);\n content: \"\";\n}\n\ntable.z-table-hover > tbody > tr:hover > td:first-child::after,\ntable.z-table-hover > thead > tr:hover > th:first-child::after,\ntable.z-table-hover > tfoot > tr:hover > td:first-child::after {\n left: 0;\n}\n","import {\n Component,\n ComponentInterface,\n Element,\n Event,\n EventEmitter,\n Host,\n Listen,\n Prop,\n State,\n Watch,\n h,\n} 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 styleUrls: [\"styles.css\", \"../../css-components/z-table/styles.css\"],\n shadow: true,\n})\nexport class ZTr implements ComponentInterface {\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\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 const columns = cells.map((cell) => cell.colspan \|\| 1).reduce((a, b) => a + b, 0);\n this.host.style.setProperty(\"--columns\", `${columns}`);\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 private onKeyDown(event: KeyboardEvent): void {\n if (!this.expandable) {\n return;\n }\n\n const active = document.activeElement;\n if (active !== this.host) {\n return;\n }\n\n if (event.key === \"Enter\" \|\| event.key === \" \") {\n event.preventDefault();\n this.expanded = !this.expanded;\n this.expand.emit({expanded: this.expanded});\n }\n }\n\n componentWillLoad(): void {\n this.updateColumns();\n }\n\n render(): HTMLZTrElement {\n return (\n <Host\n role=\"row\"\n tabIndex={this.expandable ? 0 : undefined}\n expanded={this.expanded}\n onClick={this.onRowClick.bind(this)}\n onKeyDown={this.onKeyDown.bind(this)}\n >\n <div\n class=\"z-tr--focus-overlay\"\n aria-hidden=\"true\"\n ></div>\n <div class=\"z-tr--expand-button-container\">\n {this.expandable && (\n <button\n tabIndex={-1}\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"],"names":["stylesCss"],"mappings":"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"}

package/dist/esm/z-tree-list.entry.js CHANGED Viewed

@@ -1,5 +1,5 @@
-import { r as registerInstance, c as createEvent, h, H as Host, d as getElement } from './index-BEHxru6n.js';
-import { g as KeyboardCode } from './index-B3nR3-Jw.js';
+import { r as registerInstance, c as createEvent, h, H as Host, d as getElement } from './index-BcDWN4F1.js';
+import { g as KeyboardCode } from './index-DdetsoIY.js';
 const stylesCss = () => `:host{font-family:var(--font-family-sans)}z-list-element{position:relative;display:block;padding-top:var(--space-unit)}z-list-element::before,z-list-element::after{position:absolute;z-index:100;top:0.125rem;left:-0.5rem;content:""}z-list z-list-element::before{width:var(--space-unit);height:calc(var(--space-unit) * 2);border-bottom:var(--border-size-small) solid var(--color-disabled01-icon);border-left:var(--border-size-small) solid var(--color-disabled01-icon)}z-list z-list-element::after{width:var(--space-unit);height:100%;border-left:var(--border-size-small) solid var(--color-disabled01-icon)}z-list z-list-element:last-child::after,z-list>z-list-element::before,z-list>z-list-element::after,z-list>z-list-group>z-list-element::before,z-list>z-list-group>z-list-element::after{display:none}z-list>div.children-node{padding-left:calc(var(--space-unit) * 2)}z-list-element>.list-element{z-index:100;display:flex;justify-content:space-between;padding:0;color:var(--color-default-text);font-size:var(--font-size-2);font-style:normal;font-weight:var(--font-rg);text-decoration:none}z-list-element>.list-element.link-clickable{color:var(--color-primary01)}z-list-element>.list-element.link-clickable:hover{text-decoration:underline}z-list-element>.list-element .item.ellipsis{overflow:hidden}z-list-element .list-element::after{position:absolute;top:0;right:-0.0625rem;display:block;width:100%;height:calc(var(--space-unit) * 5);content:"";transform:translateX(-100%)}.item-label{overflow:hidden;flex-grow:1;font-size:var(--font-size-2);font-style:normal;font-weight:var(--font-rg);letter-spacing:0.0032rem;line-height:1.25rem;text-overflow:ellipsis;white-space:nowrap}.item-label.bold-item{font-weight:var(--font-sb)}.item.ellipsis{display:flex;overflow:hidden;max-width:100%;text-overflow:ellipsis;white-space:nowrap}.children-node>z-list-element{padding:0;padding-top:0.125;padding-left:calc(var(--space-unit) * 1.25)}.item-icon{margin-right:var(--space-unit)}.no-icon-label{padding-left:var(--space-unit)}.children-node>z-list-element.no-icon-elm{padding-left:0}z-list-element>.list-element:focus:focus-visible{position:relative;z-index:200;box-shadow:var(--shadow-focus-primary);outline:none}@media (max-width: 767px){z-list-element::before,z-list-element::after{top:0.1875rem}z-list z-list-element::before{height:calc(var(--space-unit) * 2.5)}.children-node>z-list-element{padding-top:var(--space-unit)}}`;

package/dist/esm/z-visually-hidden.entry.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { r as registerInstance, h } from './index-BEHxru6n.js';
+import { r as registerInstance, h } from './index-BcDWN4F1.js';
 const stylesCss = () => `:host{position:absolute;overflow:hidden;width:1px;height:1px;padding:0;border:0;margin:0 -1px -1px 0;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}`;