npm - @zanichelli/albe-web-components - Versions diffs - 16.3.0 → 16.3.1-rc1 - Mend

@zanichelli/albe-web-components 16.3.0 → 16.3.1-rc1

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

package/dist/collection/components/table/cells/z-th/index.js CHANGED Viewed

@@ -9,10 +9,12 @@ export class ZTh {
     constructor() {
         this.colspan = undefined;
         this.showMenu = null;
+        this.showSorting = null;
         this.sticky = false;
         this.sortDirection = undefined;
         this.popoverPosition = PopoverPosition.AUTO;
         this.isMenuOpen = false;
+        this.isSortingActive = false;
     }
     /**
      * Get the value to set to the `aria-sort` attribute based on the current sort direction.
@@ -25,16 +27,17 @@ export class ZTh {
     }
     /**
      * Handle the click on the sort button.
+     * This method will also handle the z-index logic.
      * @fires sort
      */
     handleSort() {
         if (!this.sortDirection) {
+            this.isSortingActive = false;
             return;
         }
         this.sortDirection = this.sortDirection === SortDirection.ASC ? SortDirection.DESC : SortDirection.ASC;
-        this.sort.emit({
-            sortDirection: this.sortDirection,
-        });
+        this.isSortingActive = true;
+        this.sort.emit({ sortDirection: this.sortDirection });
     }
     updateColspan() {
         if (this.colspan) {
@@ -48,7 +51,10 @@ export class ZTh {
         this.updateColspan();
     }
     render() {
-        return (h(Host, { key: '222509e3075cd7a6668301f8b54cebd3af7bd843', role: "columnheader", "menu-open": this.isMenuOpen, "aria-sort": this.ariaSortDirection }, h("slot", { key: '728dffd6851b3b9f6647a136c0d84d0da10c894b' }), this.sortDirection && (h("button", { key: 'a75b468b0057f404fdfcafd77cf63f10999f274a', class: "z-th--sort-button", type: "button", onClick: this.handleSort.bind(this) }, h("z-icon", { key: '9d4ac199ba40228afd8b4ac087effde4ae37f55b', name: this.sortDirection === SortDirection.ASC ? "arrow-simple-up" : "arrow-simple-down", width: 14, height: 14 }))), this.showMenu && (h("div", { key: '4769a6dfa1e6222448b1d409746dbe1f6420cc5d', class: "cell--menu-container" }, h("z-button", { key: '90951859a7fdcaddec8769e95d8a65de5c7e5ff7', 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: '3066d766feab4b810d41b78a5f3801cbffa5688d', ref: (el) => (this.popoverEl = el), bindTo: this.menuTrigger, onOpenChange: (event) => (this.isMenuOpen = event.detail.open), position: this.popoverPosition }, h("slot", { key: '9bf90081ba6d5c82cdd9c69f0dd536bda756b8af', name: "contextual-menu" }))))));
+        return (h(Host, { key: '857c07ccf4b5852fadc24cf8e841285c62f6510d', role: "columnheader", "menu-open": this.isMenuOpen, "aria-sort": this.ariaSortDirection, sortable: this.showSorting }, h("div", { key: 'aa16c497962365ce91fe97161fa4efbc13010280', class: "cell--content" }, h("slot", { key: '78ede301744ec00611c4ded135d8bc69fa6e1caf' }), this.showSorting && (h("button", { key: 'c5578d4029981256383e114cbf6b909e4d7d6960', class: {
+                "z-th--sort-button": true,
+                "z-th--sort-button--active": this.isSortingActive,
+            }, type: "button", onClick: this.handleSort.bind(this) }, h("z-icon", { key: 'd120d4b16086dd45cc218f02d1a098c7f60aff45', name: this.sortDirection === SortDirection.DESC ? "arrow-simple-up" : "arrow-simple-down", width: 14, height: 14 }))), this.showMenu && (h("div", { key: '730770a6fd13fe34cc20bfe5e85e55d801374c54', class: "cell--menu-container" }, h("z-button", { key: '695d20baf42216dca156e842108e71af89b042dd', 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: '381fae18767cd54cf88d05acd468d58b84988e59', ref: (el) => (this.popoverEl = el), bindTo: this.menuTrigger, onOpenChange: (event) => (this.isMenuOpen = event.detail.open), position: this.popoverPosition }, h("slot", { key: '570614fdf3d0e5ef44efc7040d8472a4244ed409', name: "contextual-menu" })))))));
     }
     static get is() { return "z-th"; }
     static get encapsulation() { return "shadow"; }
@@ -105,6 +111,30 @@ export class ZTh {
                 "reflect": true,
                 "defaultValue": "null"
             },
+            "showSorting": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "VisibilityCondition",
+                    "resolved": "VisibilityCondition.ALWAYS | VisibilityCondition.HOVER",
+                    "references": {
+                        "VisibilityCondition": {
+                            "location": "import",
+                            "path": "../../../../beans",
+                            "id": "src/beans/index.tsx::VisibilityCondition"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Enables the sorting button.\nCan be set to \"hover\" or \"always\" to show the button only on cell hover or always.\nSet a nullish value to hide the sort button."
+                },
+                "attribute": "show-sorting",
+                "reflect": true,
+                "defaultValue": "null"
+            },
             "sticky": {
                 "type": "boolean",
                 "mutable": false,
@@ -174,7 +204,8 @@ export class ZTh {
     }
     static get states() {
         return {
-            "isMenuOpen": {}
+            "isMenuOpen": {},
+            "isSortingActive": {}
         };
     }
     static get events() {

package/dist/collection/components/table/cells/z-th/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","sourceRoot":"","sources":["~~../../../../../../~~src/components/table/cells/z-th/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAE,OAAO,EAAE,KAAK,EAAgB,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,CAAC,EAAC,MAAM,eAAe,CAAC;AACnG,OAAO,EAAC,aAAa,EAAE,WAAW,EAAE,eAAe,EAAE,aAAa,EAAE,mBAAmB,EAAC,MAAM,mBAAmB,CAAC;AAElH;;;;GAIG;AAMH,MAAM,OAAO,GAAG;;;wBAekB,IAAI;~~sBAM3B~~,KAAK;;+BAaI,eAAe,CAAC,IAAI;0BAMzB,KAAK;;~~IAclB~~;;OAEG;IACH,IAAY,iBAAiB;QAC3B,IAAI,CAAC,IAAI,CAAC,aAAa,EAAE,CAAC;YACxB,OAAO,IAAI,CAAC;QACd,CAAC;QAED,OAAO,IAAI,CAAC,aAAa,KAAK,aAAa,CAAC,GAAG,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,YAAY,CAAC;IAC/E,CAAC;IAED~~;;;OAGG~~;IACK,UAAU;QAChB,IAAI,CAAC,IAAI,CAAC,aAAa,EAAE,CAAC;YACxB,OAAO;QACT,CAAC;QAED,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,aAAa,KAAK,aAAa,CAAC,GAAG,CAAC,CAAC,CAAC,aAAa,CAAC,IAAI,CAAC,CAAC,CAAC,aAAa,CAAC,GAAG,CAAC;QACvG,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC~~;YACb~~,aAAa,EAAE,IAAI,CAAC,aAAa~~;SAClC~~,CAAC,CAAC;~~IACL~~,CAAC;IAGS,aAAa;QACrB,IAAI,IAAI,CAAC,OAAO,EAAE,CAAC;YACjB,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,UAAU,GAAG,QAAQ,IAAI,CAAC,OAAO,EAAE,CAAC;QACtD,CAAC;aAAM,CAAC;YACN,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,aAAa,CAAC,CAAC;QAChD,CAAC;IACH,CAAC;IAED,iBAAiB;QACf,IAAI,CAAC,aAAa,EAAE,CAAC;IACvB,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDACH,IAAI,EAAC,cAAc,eACR,IAAI,CAAC,UAAU,eACf,IAAI,CAAC,iBAAiB;~~YAEjC~~,8DAAa;~~YACZ~~,IAAI,CAAC,~~aAAa~~,IAAI,~~CACrB~~,+DACE,KAAK,~~EAAC~~,mBAAmB,~~EACzB~~,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC;~~gBAEnC~~,+DACE,IAAI,EAAE,IAAI,CAAC,aAAa,KAAK,aAAa,CAAC,~~GAAG~~,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,mBAAmB,~~EACxF~~,KAAK,EAAE,EAAE,EACT,MAAM,EAAE,EAAE,GACV,CACK,CACV;~~YACA~~,IAAI,CAAC,QAAQ,IAAI,CAChB,4DAAK,KAAK,EAAC,sBAAsB;~~gBAC~~/B,iEACE,OAAO,EAAE,aAAa,CAAC,QAAQ,EAC/B,IAAI,EAAC,iBAAiB,EACtB,IAAI,EAAE,WAAW,CAAC,OAAO,EACzB,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,WAAW,GAAG,EAAiB,CAAC,EACnD,OAAO,EAAE,GAAG,EAAE,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,IAAI,GAAG,CAAC,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,GAC3D;~~gBACF~~,kEACE,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,SAAS,GAAG,EAAyB,CAAC,EACzD,MAAM,EAAE,IAAI,CAAC,WAAW,EACxB,YAAY,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,UAAU,GAAG,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,EAC9D,QAAQ,EAAE,IAAI,CAAC,eAAe;~~oBAE9B~~,6DAAM,IAAI,EAAC,iBAAiB,GAAQ,CAC1B,CACR,CACP,~~CACI~~,CACR,CAAC;IACJ,CAAC~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~CACF","sourcesContent":["import {Component, Element, Event, EventEmitter, Host, Prop, State, Watch, h} from \"@stencil/core\";\nimport {ButtonVariant, ControlSize, PopoverPosition, SortDirection, VisibilityCondition} from \"../../../../beans\";\n\n/*\n ZTh component.\n * @slot - ZTh content.\n * @slot contextual-menu - Contextual menu content. Only visible when `showMenu` is true.\n /\n@Component({\n tag: \"z-th\",\n styleUrl: \"styles.css\",\n shadow: true,\n})\nexport class ZTh {\n @Element() host: HTMLZThElement;\n\n /\n Number of columns that the cell should span.\n /\n @Prop()\n colspan: number;\n\n /\n Enables the contextual menu.\n * Can be set to \"hover\" or \"always\" to show the button only on cell hover or always.\n * Set a nullish value to hide the menu button.\n /\n @Prop({reflect: true})\n showMenu: VisibilityCondition = null;\n\n /\n Whether the cell should stick.\n /\n @Prop({reflect: true})\n sticky = false;\n\n /\n Current sorting direction.\n * Set `SortDirection.ASC` or `SortDirection.DESC` to show the sort icon.\n /\n @Prop({mutable: true})\n sortDirection?: SortDirection;\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 return;\n }\n\n this.sortDirection = this.sortDirection === SortDirection.ASC ? SortDirection.DESC : SortDirection.ASC;\n this.sort.emit({\n sortDirection: this.sortDirection~~,\n~~ });\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 >\n <slot></slot>\n {this.~~sortDirection~~ && (\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.~~ASC~~ ? \"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 </Host>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/components/table/cells/z-th/index.tsx"],"names":[],"mappings":"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","sourcesContent":["import {Component, Element, Event, EventEmitter, Host, Prop, State, Watch, h} from \"@stencil/core\";\nimport {ButtonVariant, ControlSize, PopoverPosition, SortDirection, VisibilityCondition} from \"../../../../beans\";\n\n/*\n ZTh component.\n * @slot - ZTh content.\n * @slot contextual-menu - Contextual menu content. Only visible when `showMenu` is true.\n /\n@Component({\n tag: \"z-th\",\n styleUrl: \"styles.css\",\n shadow: true,\n})\nexport class ZTh {\n @Element() host: HTMLZThElement;\n\n /\n Number of columns that the cell should span.\n /\n @Prop()\n colspan: number;\n\n /\n Enables the contextual menu.\n * Can be set to \"hover\" or \"always\" to show the button only on cell hover or always.\n * Set a nullish value to hide the menu button.\n /\n @Prop({reflect: true})\n showMenu: VisibilityCondition = null;\n\n /\n Enables the sorting button.\n * Can be set to \"hover\" or \"always\" to show the button only on cell hover or always.\n * Set a nullish value to hide the sort button.\n /\n @Prop({reflect: true})\n showSorting: VisibilityCondition = null;\n\n /\n Whether the cell should stick.\n /\n @Prop({reflect: true})\n sticky = false;\n\n /\n Current sorting direction.\n * Set `SortDirection.ASC` or `SortDirection.DESC` to show the sort icon.\n /\n @Prop({mutable: true})\n sortDirection?: SortDirection;\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 Store the active state for sorting.\n /\n @State()\n isSortingActive = 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 * This method will also handle the z-index logic.\n * @fires sort\n */\n private handleSort(): void {\n if (!this.sortDirection) {\n this.isSortingActive = false;\n\n return;\n }\n\n this.sortDirection = this.sortDirection === SortDirection.ASC ? SortDirection.DESC : SortDirection.ASC;\n this.isSortingActive = 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={{\n \"z-th--sort-button\": true,\n \"z-th--sort-button--active\": this.isSortingActive,\n }}\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"]}

package/dist/collection/components/table/cells/z-th/styles.css CHANGED Viewed

@@ -1,14 +1,18 @@
 :host {
   position: relative;
   display: flex;
-  min-width: 128px;
-  box-sizing: border-box;
+  max-width: 100%;
   align-items: center;
   padding: var(--z-table--cells-padding, calc(var(--space-unit) * 2));
   background-color: var(--color-surface01);
   gap: calc(var(--space-unit) * 2) var(--space-unit);
 }
+:host,
+* {
+  box-sizing: border-box;
+}
 :host([sticky]) {
   position: sticky;
   z-index: 1;
@@ -17,21 +21,23 @@
   box-shadow: 8px 0 16px -8px var(--shadow-color-base);
 }
-/* Leave the space for the menu button */
-:host([show-menu])::after {
-  display: inline-block;
+:host([menu-open]) {
+  z-index: 2;
+}
+.cell--content {
+  display: flex;
+  width: 100%;
   height: 100%;
-  margin-right: calc(var(--space-unit) * 4);
-  background: transparent;
-  content: "";
-  user-select: none;
+  align-items: center;
+}
+:host([show-menu]) .cell--content {
+  column-gap: var(--space-unit);
 }
 .cell--menu-container {
-  position: absolute;
-  z-index: 1;
-  top: var(--space-unit);
-  right: var(--space-unit);
+  margin-left: auto;
 }
 :host(:not([show-menu])) .cell--menu-container {
@@ -41,6 +47,7 @@
 :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;
 }
@@ -56,6 +63,7 @@
   }
   :host([show-menu="hover"]:hover) .cell--menu-container {
+    z-index: 1;
     opacity: 1;
     pointer-events: all;
   }
@@ -63,30 +71,55 @@
 :host {
+  z-index: 1;
+  padding: 0;
   background-color: var(--color-surface02);
   font-weight: var(--font-sb);
 }
-/* :host([sticky]) {
-  background-color: var(--color-surface02);
-} */
+.cell--content {
+  padding: calc(var(--space-unit) * 2);
+}
-:host([sortable]) {
-  cursor: pointer;
+:host([show-sorting]) .cell--content {
+  column-gap: var(--space-unit);
 }
 .z-th--sort-button {
-  display: flex;
-  align-items: center;
-  justify-content: center;
   padding: 0;
   border: none;
-  margin-top: auto;
   background-color: transparent;
   cursor: pointer;
+  outline: none;
 }
-.z-th--sort-button:focus {
+@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 {
+    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 {
+  position: absolute;
+  top: 6px;
+  left: 6px;
+  width: calc(100% - 12px);
+  height: calc(100% - 10px);
+  background-color: transparent;
+  content: "";
+}
+.z-th--sort-button:focus:focus-visible::after,
+.z-th--sort-button--active::after {
   box-shadow: var(--shadow-focus-primary);
-  outline: none;
 }

package/dist/collection/components/table/z-table/index.js CHANGED Viewed

@@ -36,7 +36,7 @@ export class ZTable {
         (_a = this.expandableMutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
     }
     render() {
-        return (h(Host, { key: '2d8e50a74ff7ccf3c6dc4f5324a512177ad52f45', expandable: this.expandable }, h("div", { key: '5e1d9d44dc90ac06683bf5306f7eecadffe807fe', class: "table", role: "table" }, h("slot", { key: '12a615e336a4ad50390a2ab0b12b2d20b3503f06' }))));
+        return (h(Host, { key: '6fa1464a9d96267c0a1a45078a7b19e15930b2be', expandable: this.expandable }, h("div", { key: '9436f4627cab2b6c474bbfc803b64514cd152fb3', class: "table", role: "table" }, h("slot", { key: 'b9cf927ccd915cf55f4bb2e5a8943ceff347f9f7' }))));
     }
     static get is() { return "z-table"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/table/z-table/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","sourceRoot":"","sources":["~~../../../../../~~src/components/table/z-table/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAE,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC,EAAC,MAAM,eAAe,CAAC;AACvE,OAAO,kBAAkB,CAAC;AAC1B,OAAO,kBAAkB,CAAC;AAC1B,OAAO,kBAAkB,CAAC;AAC1B,OAAO,eAAe,CAAC;AAEvB;;;;GAIG;AAMH,MAAM,OAAO,MAAM;;wBAON,KAAK;0BAMH,KAAK;;IAEV,gBAAgB;QACtB,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAC,kBAAkB,CAAC,CAAC,MAAM,GAAG,CAAC,CAAC;IAC9E,CAAC;IAID;;OAEG;IACH,iBAAiB;QACf,IAAI,CAAC,0BAA0B,GAAG,IAAI,gBAAgB,CAAC,GAAG,EAAE;YAC1D,IAAI,CAAC,gBAAgB,EAAE,CAAC;QAC1B,CAAC,CAAC,CAAC;QACH,IAAI,CAAC,0BAA0B,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,EAAE;YACjD,SAAS,EAAE,IAAI;YACf,OAAO,EAAE,IAAI;YACb,UAAU,EAAE,IAAI;YAChB,eAAe,EAAE,CAAC,YAAY,CAAC;YAC/B,iBAAiB,EAAE,KAAK;SACzB,CAAC,CAAC;IACL,CAAC;IAED,oBAAoB;;QAClB,MAAA,IAAI,CAAC,0BAA0B,0CAAE,UAAU,EAAE,CAAC;IAChD,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDAAC,UAAU,EAAE,IAAI,CAAC,UAAU;YAC/B,4DACE,KAAK,EAAC,OAAO,EACb,IAAI,EAAC,OAAO;gBAEZ,8DAAa,CACT,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {Component, Element, Host, Prop, State, h} from \"@stencil/core\";\nimport \"../z-tbody/index\";\nimport \"../z-tfoot/index\";\nimport \"../z-thead/index\";\nimport \"../z-tr/index\";\n\n/*\n ZTable component.\n * @slot - Table content (`z-thead`, `z-tbody`, `z-tfoot`, `z-tr`).\n * @cssprop --z-table--cells-padding - Padding of the cells.\n /\n@Component({\n tag: \"z-table\",\n styleUrl: \"styles.css\",\n shadow: true,\n})\nexport class ZTable {\n @Element() host: HTMLZTableElement;\n\n /\n Whether the table cells should show a border between them.\n /\n @Prop({reflect: true})\n bordered = false;\n\n /\n Whether the table contains some expandable rows.\n /\n @State()\n expandable = false;\n\n private updateExpandable(): void {\n this.expandable = this.host.querySelectorAll(\"z-tr[expandable]\").length > 0;\n }\n\n private expandableMutationObserver: MutationObserver;\n\n /\n Setup the table creating a mutation observer for the expandable attribute.\n */\n componentWillLoad(): void {\n this.expandableMutationObserver = new MutationObserver(() => {\n this.updateExpandable();\n });\n this.expandableMutationObserver.observe(this.host, {\n childList: true,\n subtree: true,\n attributes: true,\n attributeFilter: [\"expandable\"],\n attributeOldValue: false,\n });\n }\n\n disconnectedCallback(): void {\n this.expandableMutationObserver?.disconnect();\n }\n\n render(): HTMLZTableElement {\n return (\n <Host expandable={this.expandable}>\n <div\n class=\"table\"\n role=\"table\"\n >\n <slot></slot>\n </div>\n </Host>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/table/z-table/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAE,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC,EAAC,MAAM,eAAe,CAAC;AACvE,OAAO,kBAAkB,CAAC;AAC1B,OAAO,kBAAkB,CAAC;AAC1B,OAAO,kBAAkB,CAAC;AAC1B,OAAO,eAAe,CAAC;AAEvB;;;;GAIG;AAMH,MAAM,OAAO,MAAM;;wBAON,KAAK;0BAMH,KAAK;;IAEV,gBAAgB;QACtB,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAC,kBAAkB,CAAC,CAAC,MAAM,GAAG,CAAC,CAAC;IAC9E,CAAC;IAID;;OAEG;IACH,iBAAiB;QACf,IAAI,CAAC,0BAA0B,GAAG,IAAI,gBAAgB,CAAC,GAAG,EAAE;YAC1D,IAAI,CAAC,gBAAgB,EAAE,CAAC;QAC1B,CAAC,CAAC,CAAC;QACH,IAAI,CAAC,0BAA0B,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,EAAE;YACjD,SAAS,EAAE,IAAI;YACf,OAAO,EAAE,IAAI;YACb,UAAU,EAAE,IAAI;YAChB,eAAe,EAAE,CAAC,YAAY,CAAC;YAC/B,iBAAiB,EAAE,KAAK;SACzB,CAAC,CAAC;IACL,CAAC;IAED,oBAAoB;;QAClB,MAAA,IAAI,CAAC,0BAA0B,0CAAE,UAAU,EAAE,CAAC;IAChD,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDAAC,UAAU,EAAE,IAAI,CAAC,UAAU;YAC/B,4DACE,KAAK,EAAC,OAAO,EACb,IAAI,EAAC,OAAO;gBAEZ,8DAAa,CACT,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {Component, Element, Host, Prop, State, h} from \"@stencil/core\";\nimport \"../z-tbody/index\";\nimport \"../z-tfoot/index\";\nimport \"../z-thead/index\";\nimport \"../z-tr/index\";\n\n/*\n ZTable component.\n * @slot - Table content (`z-thead`, `z-tbody`, `z-tfoot`, `z-tr`).\n * @cssprop --z-table--cells-padding - Padding of the cells.\n /\n@Component({\n tag: \"z-table\",\n styleUrl: \"styles.css\",\n shadow: true,\n})\nexport class ZTable {\n @Element() host: HTMLZTableElement;\n\n /\n Whether the table cells should show a border between them.\n /\n @Prop({reflect: true})\n bordered = false;\n\n /\n Whether the table contains some expandable rows.\n /\n @State()\n expandable = false;\n\n private updateExpandable(): void {\n this.expandable = this.host.querySelectorAll(\"z-tr[expandable]\").length > 0;\n }\n\n private expandableMutationObserver: MutationObserver;\n\n /\n Setup the table creating a mutation observer for the expandable attribute.\n */\n componentWillLoad(): void {\n this.expandableMutationObserver = new MutationObserver(() => {\n this.updateExpandable();\n });\n this.expandableMutationObserver.observe(this.host, {\n childList: true,\n subtree: true,\n attributes: true,\n attributeFilter: [\"expandable\"],\n attributeOldValue: false,\n });\n }\n\n disconnectedCallback(): void {\n this.expandableMutationObserver?.disconnect();\n }\n\n render(): HTMLZTableElement {\n return (\n <Host expandable={this.expandable}>\n <div\n class=\"table\"\n role=\"table\"\n >\n <slot></slot>\n </div>\n </Host>\n );\n }\n}\n"]}

package/dist/collection/components/table/z-table/index.stories.js CHANGED Viewed

@@ -236,6 +236,17 @@ export const CellsWithContextualMenu = {
  * Clicking the button will fire the `sort` event with the `sortDirection` as detail.
  */
 export const SortAction = {
+    argTypes: {
+        showSorting: {
+            options: Object.values(VisibilityCondition),
+            control: {
+                type: "inline-radio",
+            },
+        },
+    },
+    args: {
+        showSorting: VisibilityCondition.HOVER,
+    },
     render: (args) => html `<z-table
       class="z-table-demo"
       .bordered=${args.bordered}
@@ -245,15 +256,20 @@ export const SortAction = {
     >
       <z-thead>
         <z-tr>
-          <z-th>Colonna 1</z-th>
           <z-th
             .sortDirection=${SortDirection.ASC}
             .showMenu=${VisibilityCondition.HOVER}
+            .showSorting=${args.showSorting}
           >
-            Colonna 2 con menu e sorting
+            Colonna 1 con menu e sorting
             <div slot="contextual-menu">Contenuto del popover</div>
           </z-th>
-          <z-th .sortDirection=${SortDirection.DESC}>Colonna 3 con sorting</z-th>
+          <z-th>Colonna 2</z-th>
+          <z-th
+            .sortDirection=${SortDirection.DESC}
+            .showSorting=${args.showSorting}
+            >Colonna 3 con sorting</z-th
+          >
         </z-tr>
       </z-thead>
       <z-tbody>${repeat([...new Array(3)], () => html `<z-tr>${cellsTemplate(3)}</z-tr>`)}</z-tbody>

package/dist/collection/components/table/z-table/index.stories.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.stories.js","sourceRoot":"","sources":["../../../../../src/components/table/z-table/index.stories.ts"],"names":[],"mappings":"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","sourcesContent":["import {Meta} from \"@storybook/web-components\";\nimport {html, type TemplateResult} from \"lit\";\nimport {repeat} from \"lit/directives/repeat.js\";\nimport {styleMap} from \"lit/directives/style-map.js\";\nimport {type ZTable} from \".\";\nimport {PopoverPosition, SortDirection, VisibilityCondition} from \"../../../beans\";\nimport {CSSVarsArguments} from \"../../../utils/storybook-utils\";\nimport \"../../z-button/index\";\nimport \"./index\";\nimport \"./index.stories.css\";\n\ntype ZTableStoriesArgs = ZTable & CSSVarsArguments<\"z-table--cells-padding\">;\n\n/*\n ## Accessibility\n \n The `ZTable` and its related components comes with a set of roles and ARIA attributes to help screen readers to understand the table structure and its content.\n * The roles are mainly used to identify the table parts, since they are not the native HTML table elements.\n * The ARIA attributes used are the following:\n * - [`aria-sort`](https://www.w3.org/TR/wai-aria-1.1/#aria-sort) to identify the sorting direction of a column when sorting is enabled\n * - [`aria-expanded`](https://www.w3.org/TR/wai-aria-1.1/#aria-expanded) to identify if a row is expanded or not when expandable rows are enabled. The attribute is set on the button that expands the row, as explained in the [docs](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-expanded)\n * - [`aria-controls`](https://www.w3.org/TR/wai-aria-1.1/#aria-controls) is used on the expandable row button to identify the content that is controlled by the button itself, as explained in the [docs](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-controls). Maybe the `aria-owns` attribute were more appropriate, but it is not supported on MacOS and iOS with VoiceOver, so we used `aria-controls` instead.\n * - [`aria-label`](https://www.w3.org/TR/wai-aria-1.1/#aria-label) is used on the expandable row button to provide a label for the button, since the button doesn't have any text content.\n /\nconst StoryMeta = {\n title: \"ZTable\",\n component: \"z-table\",\n args: {\n \"bordered\": true,\n \"--z-table--cells-padding\": \"16px\",\n },\n} satisfies Meta<ZTableStoriesArgs>;\n\nexport default StoryMeta;\n\nconst cellsTemplate = (count = 1): TemplateResult =>\n html`${repeat([...new Array(count)], () => html`<z-td>Contenuto cella</z-td>`)}`;\n\nexport const Default = {\n render: (args) =>\n html`<z-table\n class=\"z-table-demo\"\n .bordered=${args.bordered}\n style=${styleMap({\n \"--z-table--cells-padding\": args[\"--z-table--cells-padding\"],\n })}\n >\n <z-thead>\n <z-tr>${repeat([...new Array(8)], () => html`<z-th>Titolo colonna</z-th>`)}</z-tr>\n </z-thead>\n <z-tbody>${repeat([...new Array(5)], () => html`<z-tr>${cellsTemplate(8)}</z-tr>`)}</z-tbody>\n <z-tfoot>\n <z-tr>\n <z-td colspan=\"8\">Table footer</z-td>\n </z-tr>\n </z-tfoot>\n </z-table>`,\n};\n\n/\n Just set `expandable` prop on the `z-tr` element to make it expandable, then put an additional `z-td` as extended content.\n * If you put a clickable item as a child cell of a z-tr with `expandable` set to `true`, you need to set a \"prevent-expand\" class on that item, in order to prevent unwanted row expansions.\n /\nexport const ExpandableRows = {\n render: (args) =>\n html`<z-table\n class=\"z-table-demo\"\n .bordered=${args.bordered}\n style=${styleMap({\n \"--z-table--cells-padding\": args[\"--z-table--cells-padding\"],\n })}\n >\n <z-thead>\n <z-tr>${repeat([...new Array(8)], (_, index) => html`<z-th>Colonna ${index + 1}</z-th>`)}</z-tr>\n </z-thead>\n <z-tbody>\n <z-tr>\n <z-td>Contenuto cella</z-td>\n <z-td>Contenuto cella</z-td>\n <z-td show-menu>\n <span>Contenuto cella con menu</span>\n <div slot=\"contextual-menu\">Contenuto del popover</div></z-td\n >\n ${cellsTemplate(5)}\n </z-tr>\n <z-tr>${repeat([...new Array(8)], () => html`<z-td>Contenuto cella</z-td>`)}</z-tr>\n <z-tr expandable>\n <z-td>Contenuto cella</z-td>\n <z-td>Contenuto cella</z-td>\n <z-td>\n <span>Contenuto cella</span>\n <z-button\n class=\"prevent-expand\"\n onclick=\"alert('button clicked without expanding the row')\"\n icon=\"plus\"\n size=\"x-small\"\n ></z-button\n ></z-td>\n ${cellsTemplate(5)}\n <z-td>Contenuto espanso</z-td>\n </z-tr>\n <z-tr>${cellsTemplate(8)}</z-tr>\n <z-tr expandable>\n <z-td>Contenuto cella</z-td>\n <z-td show-menu=\"always\">\n <span>Contenuto cella con menu</span>\n <div slot=\"contextual-menu\">Contenuto del popover</div></z-td\n >\n ${cellsTemplate(6)}\n <z-td>Contenuto espanso</z-td>\n </z-tr>\n </z-tbody>\n <z-tfoot>\n <z-tr>\n <z-td colspan=\"8\">Table footer</z-td>\n </z-tr>\n </z-tfoot>\n </z-table>`,\n};\n\n/\n To make a column sticky, you need to set the `sticky` prop on the `z-th` and/or `z-td` elements of the same column.\n * For the header or footer, just set the `sticky` prop on the `z-thead` or `z-tfoot` element.\n /\nexport const Sticky = {\n args: {\n stickyHeader: true,\n stickyFooter: true,\n stickFirstColumn: true,\n },\n render: (args) =>\n html`<z-table\n class=\"z-table-demo\"\n .bordered=${args.bordered}\n style=${styleMap({\n \"--z-table--cells-padding\": args[\"--z-table--cells-padding\"],\n \"height\": \"400px\",\n })}\n >\n <z-thead .sticky=${args.stickyHeader}>\n <z-tr>\n <z-th .sticky=${args.stickFirstColumn}>Colonna 1</z-th>\n ${repeat([...new Array(7)], (_, index) => html`<z-th>Colonna ${index + 2}</z-th>`)}\n </z-tr>\n </z-thead>\n <z-tbody>\n <z-tr>\n <z-td .sticky=${args.stickFirstColumn}>Contenuto cella 1</z-td>\n <z-td>Contenuto cella</z-td>\n <z-td>Contenuto cella</z-td>\n <z-td show-menu>\n <span>Contenuto cella con menu</span>\n <div slot=\"contextual-menu\">Contenuto del popover</div></z-td\n >\n ${cellsTemplate(4)}\n </z-tr>\n ${repeat(\n [...new Array(5)],\n () =>\n html`<z-tr>\n <z-td .sticky=${args.stickFirstColumn}>Contenuto cella 1</z-td>\n ${cellsTemplate(7)}\n </z-tr>`\n )}\n <z-tr expandable>\n <z-td .sticky=${args.stickFirstColumn}>Contenuto cella 1</z-td>\n ${cellsTemplate(6)}\n <z-td>\n <span>Contenuto cella</span>\n <z-button\n class=\"prevent-expand\"\n onclick=\"alert('button clicked')\"\n icon=\"plus\"\n size=\"x-small\"\n ></z-button\n ></z-td>\n <z-td>Contenuto espanso</z-td>\n </z-tr>\n <z-tr expandable>\n <z-td .sticky=${args.stickFirstColumn}>Contenuto cella 1</z-td>\n ${cellsTemplate(7)}\n <z-td>Contenuto espanso</z-td>\n </z-tr>\n </z-tbody>\n <z-tfoot .sticky=${args.stickyFooter}>\n <z-tr>\n <z-td colspan=\"8\">Table footer</z-td>\n </z-tr>\n </z-tfoot>\n </z-table>`,\n};\n\n/\n Use the `showMenu` prop on `z-td` or `z-th`, setting a value of the enum `VisibilityCondition` (`HOVER` or `ALWAYS`), to show a contextual menu button on the cell. The content of the menu must be placed using the slot `contextual-menu`.\n * Use `popoverPosition` prop on `z-th` to set the position of contextual menu, default is `auto`.\n /\nexport const CellsWithContextualMenu = {\n argTypes: {\n showMenu: {\n control: {\n type: \"inline-radio\",\n labels: {\n null: \"hidden\",\n },\n },\n popoverPosition: {\n options: Object.values(PopoverPosition),\n control: {\n type: \"select\",\n },\n },\n options: [null, ...Object.values(VisibilityCondition)],\n },\n },\n args: {\n showMenu: VisibilityCondition.HOVER,\n popoverPosition: PopoverPosition.AUTO,\n },\n render: (args) =>\n html`<z-table\n class=\"z-table-demo\"\n .bordered=${args.bordered}\n style=${styleMap({\n \"--z-table--cells-padding\": args[\"--z-table--cells-padding\"],\n })}\n >\n <z-thead>\n <z-tr>\n <z-th>Colonna 1</z-th>\n <z-th\n .showMenu=${args.showMenu}\n .popoverPosition=${args.popoverPosition}\n >\n Heading con menu\n <div slot=\"contextual-menu\">Contenuto del popover</div>\n </z-th>\n <z-th>Colonna 2</z-th>\n </z-tr>\n </z-thead>\n <z-tbody>\n ${repeat(\n [...new Array(3)],\n () =>\n html`<z-tr>\n <z-td .showMenu=${args.showMenu}>\n <span>Contenuto cella con menu</span>\n <div slot=\"contextual-menu\">Contenuto del popover</div>\n </z-td>\n <z-td>Contenuto cella</z-td>\n <z-td .showMenu=${args.showMenu}>\n <span>Contenuto cella con menu</span>\n <div slot=\"contextual-menu\">Contenuto del popover</div>\n </z-td>\n </z-tr>`\n )}\n </z-tbody>\n </z-table>`,\n};\n\n/\n Set the `sortDirection` prop to `SortDirection.ASC` or `SortDirection.DESC` to enable sorting and show the sort button.\n * Clicking the button will fire the `sort` event with the `sortDirection` as detail.\n */\nexport const SortAction = {\n render: (args) =>\n html`<z-table\n class=\"z-table-demo\"\n .bordered=${args.bordered}\n style=${styleMap({\n \"--z-table--cells-padding\": args[\"--z-table--cells-padding\"],\n })}\n >\n <z-thead>\n <z-tr>\n <z-th>Colonna 1</z-th>\n <z-th\n .sortDirection=${SortDirection.ASC}\n .showMenu=${VisibilityCondition.HOVER}\n >\n Colonna 2 con menu e sorting\n <div slot=\"contextual-menu\">Contenuto del popover</div>\n </z-th>\n <z-th .sortDirection=${SortDirection.DESC}>Colonna 3 con sorting</z-th>\n </z-tr>\n </z-thead>\n <z-tbody>${repeat([...new Array(3)], () => html`<z-tr>${cellsTemplate(3)}</z-tr>`)}</z-tbody>\n </z-table>`,\n};\n"]}
1	+ {"version":3,"file":"index.stories.js","sourceRoot":"","sources":["../../../../src/components/table/z-table/index.stories.ts"],"names":[],"mappings":"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","sourcesContent":["import {Meta} from \"@storybook/web-components\";\nimport {html, type TemplateResult} from \"lit\";\nimport {repeat} from \"lit/directives/repeat.js\";\nimport {styleMap} from \"lit/directives/style-map.js\";\nimport {type ZTable} from \".\";\nimport {PopoverPosition, SortDirection, VisibilityCondition} from \"../../../beans\";\nimport {CSSVarsArguments} from \"../../../utils/storybook-utils\";\nimport \"../../z-button/index\";\nimport \"./index\";\nimport \"./index.stories.css\";\n\ntype ZTableStoriesArgs = ZTable & CSSVarsArguments<\"z-table--cells-padding\">;\n\n/*\n ## Accessibility\n \n The `ZTable` and its related components comes with a set of roles and ARIA attributes to help screen readers to understand the table structure and its content.\n * The roles are mainly used to identify the table parts, since they are not the native HTML table elements.\n * The ARIA attributes used are the following:\n * - [`aria-sort`](https://www.w3.org/TR/wai-aria-1.1/#aria-sort) to identify the sorting direction of a column when sorting is enabled\n * - [`aria-expanded`](https://www.w3.org/TR/wai-aria-1.1/#aria-expanded) to identify if a row is expanded or not when expandable rows are enabled. The attribute is set on the button that expands the row, as explained in the [docs](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-expanded)\n * - [`aria-controls`](https://www.w3.org/TR/wai-aria-1.1/#aria-controls) is used on the expandable row button to identify the content that is controlled by the button itself, as explained in the [docs](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-controls). Maybe the `aria-owns` attribute were more appropriate, but it is not supported on MacOS and iOS with VoiceOver, so we used `aria-controls` instead.\n * - [`aria-label`](https://www.w3.org/TR/wai-aria-1.1/#aria-label) is used on the expandable row button to provide a label for the button, since the button doesn't have any text content.\n /\nconst StoryMeta = {\n title: \"ZTable\",\n component: \"z-table\",\n args: {\n \"bordered\": true,\n \"--z-table--cells-padding\": \"16px\",\n },\n} satisfies Meta<ZTableStoriesArgs>;\n\nexport default StoryMeta;\n\nconst cellsTemplate = (count = 1): TemplateResult =>\n html`${repeat([...new Array(count)], () => html`<z-td>Contenuto cella</z-td>`)}`;\n\nexport const Default = {\n render: (args) =>\n html`<z-table\n class=\"z-table-demo\"\n .bordered=${args.bordered}\n style=${styleMap({\n \"--z-table--cells-padding\": args[\"--z-table--cells-padding\"],\n })}\n >\n <z-thead>\n <z-tr>${repeat([...new Array(8)], () => html`<z-th>Titolo colonna</z-th>`)}</z-tr>\n </z-thead>\n <z-tbody>${repeat([...new Array(5)], () => html`<z-tr>${cellsTemplate(8)}</z-tr>`)}</z-tbody>\n <z-tfoot>\n <z-tr>\n <z-td colspan=\"8\">Table footer</z-td>\n </z-tr>\n </z-tfoot>\n </z-table>`,\n};\n\n/\n Just set `expandable` prop on the `z-tr` element to make it expandable, then put an additional `z-td` as extended content.\n * If you put a clickable item as a child cell of a z-tr with `expandable` set to `true`, you need to set a \"prevent-expand\" class on that item, in order to prevent unwanted row expansions.\n /\nexport const ExpandableRows = {\n render: (args) =>\n html`<z-table\n class=\"z-table-demo\"\n .bordered=${args.bordered}\n style=${styleMap({\n \"--z-table--cells-padding\": args[\"--z-table--cells-padding\"],\n })}\n >\n <z-thead>\n <z-tr>${repeat([...new Array(8)], (_, index) => html`<z-th>Colonna ${index + 1}</z-th>`)}</z-tr>\n </z-thead>\n <z-tbody>\n <z-tr>\n <z-td>Contenuto cella</z-td>\n <z-td>Contenuto cella</z-td>\n <z-td show-menu>\n <span>Contenuto cella con menu</span>\n <div slot=\"contextual-menu\">Contenuto del popover</div></z-td\n >\n ${cellsTemplate(5)}\n </z-tr>\n <z-tr>${repeat([...new Array(8)], () => html`<z-td>Contenuto cella</z-td>`)}</z-tr>\n <z-tr expandable>\n <z-td>Contenuto cella</z-td>\n <z-td>Contenuto cella</z-td>\n <z-td>\n <span>Contenuto cella</span>\n <z-button\n class=\"prevent-expand\"\n onclick=\"alert('button clicked without expanding the row')\"\n icon=\"plus\"\n size=\"x-small\"\n ></z-button\n ></z-td>\n ${cellsTemplate(5)}\n <z-td>Contenuto espanso</z-td>\n </z-tr>\n <z-tr>${cellsTemplate(8)}</z-tr>\n <z-tr expandable>\n <z-td>Contenuto cella</z-td>\n <z-td show-menu=\"always\">\n <span>Contenuto cella con menu</span>\n <div slot=\"contextual-menu\">Contenuto del popover</div></z-td\n >\n ${cellsTemplate(6)}\n <z-td>Contenuto espanso</z-td>\n </z-tr>\n </z-tbody>\n <z-tfoot>\n <z-tr>\n <z-td colspan=\"8\">Table footer</z-td>\n </z-tr>\n </z-tfoot>\n </z-table>`,\n};\n\n/\n To make a column sticky, you need to set the `sticky` prop on the `z-th` and/or `z-td` elements of the same column.\n * For the header or footer, just set the `sticky` prop on the `z-thead` or `z-tfoot` element.\n /\nexport const Sticky = {\n args: {\n stickyHeader: true,\n stickyFooter: true,\n stickFirstColumn: true,\n },\n render: (args) =>\n html`<z-table\n class=\"z-table-demo\"\n .bordered=${args.bordered}\n style=${styleMap({\n \"--z-table--cells-padding\": args[\"--z-table--cells-padding\"],\n \"height\": \"400px\",\n })}\n >\n <z-thead .sticky=${args.stickyHeader}>\n <z-tr>\n <z-th .sticky=${args.stickFirstColumn}>Colonna 1</z-th>\n ${repeat([...new Array(7)], (_, index) => html`<z-th>Colonna ${index + 2}</z-th>`)}\n </z-tr>\n </z-thead>\n <z-tbody>\n <z-tr>\n <z-td .sticky=${args.stickFirstColumn}>Contenuto cella 1</z-td>\n <z-td>Contenuto cella</z-td>\n <z-td>Contenuto cella</z-td>\n <z-td show-menu>\n <span>Contenuto cella con menu</span>\n <div slot=\"contextual-menu\">Contenuto del popover</div></z-td\n >\n ${cellsTemplate(4)}\n </z-tr>\n ${repeat(\n [...new Array(5)],\n () =>\n html`<z-tr>\n <z-td .sticky=${args.stickFirstColumn}>Contenuto cella 1</z-td>\n ${cellsTemplate(7)}\n </z-tr>`\n )}\n <z-tr expandable>\n <z-td .sticky=${args.stickFirstColumn}>Contenuto cella 1</z-td>\n ${cellsTemplate(6)}\n <z-td>\n <span>Contenuto cella</span>\n <z-button\n class=\"prevent-expand\"\n onclick=\"alert('button clicked')\"\n icon=\"plus\"\n size=\"x-small\"\n ></z-button\n ></z-td>\n <z-td>Contenuto espanso</z-td>\n </z-tr>\n <z-tr expandable>\n <z-td .sticky=${args.stickFirstColumn}>Contenuto cella 1</z-td>\n ${cellsTemplate(7)}\n <z-td>Contenuto espanso</z-td>\n </z-tr>\n </z-tbody>\n <z-tfoot .sticky=${args.stickyFooter}>\n <z-tr>\n <z-td colspan=\"8\">Table footer</z-td>\n </z-tr>\n </z-tfoot>\n </z-table>`,\n};\n\n/\n Use the `showMenu` prop on `z-td` or `z-th`, setting a value of the enum `VisibilityCondition` (`HOVER` or `ALWAYS`), to show a contextual menu button on the cell. The content of the menu must be placed using the slot `contextual-menu`.\n * Use `popoverPosition` prop on `z-th` to set the position of contextual menu, default is `auto`.\n /\nexport const CellsWithContextualMenu = {\n argTypes: {\n showMenu: {\n control: {\n type: \"inline-radio\",\n labels: {\n null: \"hidden\",\n },\n },\n popoverPosition: {\n options: Object.values(PopoverPosition),\n control: {\n type: \"select\",\n },\n },\n options: [null, ...Object.values(VisibilityCondition)],\n },\n },\n args: {\n showMenu: VisibilityCondition.HOVER,\n popoverPosition: PopoverPosition.AUTO,\n },\n render: (args) =>\n html`<z-table\n class=\"z-table-demo\"\n .bordered=${args.bordered}\n style=${styleMap({\n \"--z-table--cells-padding\": args[\"--z-table--cells-padding\"],\n })}\n >\n <z-thead>\n <z-tr>\n <z-th>Colonna 1</z-th>\n <z-th\n .showMenu=${args.showMenu}\n .popoverPosition=${args.popoverPosition}\n >\n Heading con menu\n <div slot=\"contextual-menu\">Contenuto del popover</div>\n </z-th>\n <z-th>Colonna 2</z-th>\n </z-tr>\n </z-thead>\n <z-tbody>\n ${repeat(\n [...new Array(3)],\n () =>\n html`<z-tr>\n <z-td .showMenu=${args.showMenu}>\n <span>Contenuto cella con menu</span>\n <div slot=\"contextual-menu\">Contenuto del popover</div>\n </z-td>\n <z-td>Contenuto cella</z-td>\n <z-td .showMenu=${args.showMenu}>\n <span>Contenuto cella con menu</span>\n <div slot=\"contextual-menu\">Contenuto del popover</div>\n </z-td>\n </z-tr>`\n )}\n </z-tbody>\n </z-table>`,\n};\n\n/\n Set the `sortDirection` prop to `SortDirection.ASC` or `SortDirection.DESC` to enable sorting and show the sort button.\n * Clicking the button will fire the `sort` event with the `sortDirection` as detail.\n */\nexport const SortAction = {\n argTypes: {\n showSorting: {\n options: Object.values(VisibilityCondition),\n control: {\n type: \"inline-radio\",\n },\n },\n },\n args: {\n showSorting: VisibilityCondition.HOVER,\n },\n render: (args) =>\n html`<z-table\n class=\"z-table-demo\"\n .bordered=${args.bordered}\n style=${styleMap({\n \"--z-table--cells-padding\": args[\"--z-table--cells-padding\"],\n })}\n >\n <z-thead>\n <z-tr>\n <z-th\n .sortDirection=${SortDirection.ASC}\n .showMenu=${VisibilityCondition.HOVER}\n .showSorting=${args.showSorting}\n >\n Colonna 1 con menu e sorting\n <div slot=\"contextual-menu\">Contenuto del popover</div>\n </z-th>\n <z-th>Colonna 2</z-th>\n <z-th\n .sortDirection=${SortDirection.DESC}\n .showSorting=${args.showSorting}\n >Colonna 3 con sorting</z-th\n >\n </z-tr>\n </z-thead>\n <z-tbody>${repeat([...new Array(3)], () => html`<z-tr>${cellsTemplate(3)}</z-tr>`)}</z-tbody>\n </z-table>`,\n};\n"]}

package/dist/collection/components/table/z-table/styles.css CHANGED Viewed

@@ -16,7 +16,3 @@
 :host([bordered]) {
   --z-table--cell-left-border: 1px solid var(--color-surface03);
 }
-.table {
-  min-width: max-content;
-}

package/dist/collection/components/table/z-tbody/index.js CHANGED Viewed

@@ -5,7 +5,7 @@ import { Host, h } from "@stencil/core";
  */
 export class ZTbody {
     render() {
-        return (h(Host, { key: 'f3e13d724ae83c0117eafa2bd141a1b9319f0331', role: "rowgroup" }, h("slot", { key: 'f84d2b79230cb6b8305c0b01f4a48f8811634421' })));
+        return (h(Host, { key: '8520398deeb7fec7d7aee91d87e39775f93355c6', role: "rowgroup" }, h("slot", { key: 'a73aff9d76af07fa46c373e362ac102349c844ed' })));
     }
     static get is() { return "z-tbody"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/table/z-tbody/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","sourceRoot":"","sources":["~~../../../../../~~src/components/table/z-tbody/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAE,IAAI,EAAE,CAAC,EAAC,MAAM,eAAe,CAAC;AAEjD;;;GAGG;AAMH,MAAM,OAAO,MAAM;IACjB,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDAAC,IAAI,EAAC,UAAU;YACnB,8DAAa,CACR,CACR,CAAC;IACJ,CAAC;;;;;;;;;CACF","sourcesContent":["import {Component, Host, h} from \"@stencil/core\";\n\n/*\n ZTbody component.\n * @slot - ZTbody content (`z-tr`).\n */\n@Component({\n tag: \"z-tbody\",\n styleUrl: \"styles.css\",\n shadow: true,\n})\nexport class ZTbody {\n render(): HTMLZTbodyElement {\n return (\n <Host role=\"rowgroup\">\n <slot></slot>\n </Host>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/table/z-tbody/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAE,IAAI,EAAE,CAAC,EAAC,MAAM,eAAe,CAAC;AAEjD;;;GAGG;AAMH,MAAM,OAAO,MAAM;IACjB,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDAAC,IAAI,EAAC,UAAU;YACnB,8DAAa,CACR,CACR,CAAC;IACJ,CAAC;;;;;;;;;CACF","sourcesContent":["import {Component, Host, h} from \"@stencil/core\";\n\n/*\n ZTbody component.\n * @slot - ZTbody content (`z-tr`).\n */\n@Component({\n tag: \"z-tbody\",\n styleUrl: \"styles.css\",\n shadow: true,\n})\nexport class ZTbody {\n render(): HTMLZTbodyElement {\n return (\n <Host role=\"rowgroup\">\n <slot></slot>\n </Host>\n );\n }\n}\n"]}

package/dist/collection/components/table/z-tfoot/index.js CHANGED Viewed

@@ -8,7 +8,7 @@ export class ZTfoot {
         this.sticky = false;
     }
     render() {
-        return (h(Host, { key: 'b872f68fd9e643528d02adb7bd76f8377a59fcdc', role: "rowgroup" }, h("slot", { key: '6ebdc491ee2459d415a53fb96e5f27405704a99f' })));
+        return (h(Host, { key: 'ad89fa705c3e70275166d5146ab915a286feedfe', role: "rowgroup" }, h("slot", { key: 'cb66c0a5c01972c54100efade79a91241baadc9a' })));
     }
     static get is() { return "z-tfoot"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/table/z-tfoot/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","sourceRoot":"","sources":["~~../../../../../~~src/components/table/z-tfoot/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAC,MAAM,eAAe,CAAC;AAEvD;;;GAGG;AAMH,MAAM,OAAO,MAAM;;sBAKR,KAAK;;IAEd,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDAAC,IAAI,EAAC,UAAU;YACnB,8DAAa,CACR,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {Component, Host, Prop, h} from \"@stencil/core\";\n\n/*\n ZTFoot component.\n * @slot - ZTFoot content (`z-tr`).\n /\n@Component({\n tag: \"z-tfoot\",\n styleUrl: \"styles.css\",\n shadow: true,\n})\nexport class ZTfoot {\n /\n If true, the footer will be stuck to the bottom of the table.\n */\n @Prop({reflect: true})\n sticky = false;\n\n render(): void {\n return (\n <Host role=\"rowgroup\">\n <slot></slot>\n </Host>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/table/z-tfoot/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAC,MAAM,eAAe,CAAC;AAEvD;;;GAGG;AAMH,MAAM,OAAO,MAAM;;sBAKR,KAAK;;IAEd,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDAAC,IAAI,EAAC,UAAU;YACnB,8DAAa,CACR,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {Component, Host, Prop, h} from \"@stencil/core\";\n\n/*\n ZTFoot component.\n * @slot - ZTFoot content (`z-tr`).\n /\n@Component({\n tag: \"z-tfoot\",\n styleUrl: \"styles.css\",\n shadow: true,\n})\nexport class ZTfoot {\n /\n If true, the footer will be stuck to the bottom of the table.\n */\n @Prop({reflect: true})\n sticky = false;\n\n render(): void {\n return (\n <Host role=\"rowgroup\">\n <slot></slot>\n </Host>\n );\n }\n}\n"]}

package/dist/collection/components/table/z-thead/index.js CHANGED Viewed

@@ -8,7 +8,7 @@ export class ZThead {
         this.sticky = false;
     }
     render() {
-        return (h(Host, { key: '44bbf57a110328328c65171e6463a5128d0be2e7', role: "rowgroup" }, h("slot", { key: '1953f6a0c9d96f3cbf66ed0e856391d19e985e20' })));
+        return (h(Host, { key: 'ba72ed16202c8dbcc0176254347cdbdbc9d11418', role: "rowgroup" }, h("slot", { key: '4c2f8a0ee4fbd2718796cc254dd3d689403782cf' })));
     }
     static get is() { return "z-thead"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/table/z-thead/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","sourceRoot":"","sources":["~~../../../../../~~src/components/table/z-thead/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAC,MAAM,eAAe,CAAC;AAEvD;;;GAGG;AAMH,MAAM,OAAO,MAAM;;sBAKR,KAAK;;IAEd,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDAAC,IAAI,EAAC,UAAU;YACnB,8DAAa,CACR,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {Component, Host, Prop, h} from \"@stencil/core\";\n\n/*\n ZThead component.\n * @slot - ZThead content (`z-tr`).\n /\n@Component({\n tag: \"z-thead\",\n styleUrl: \"styles.css\",\n shadow: true,\n})\nexport class ZThead {\n /\n If true, the header will be stuck to the top of the table.\n */\n @Prop({reflect: true})\n sticky = false;\n\n render(): HTMLZTheadElement {\n return (\n <Host role=\"rowgroup\">\n <slot></slot>\n </Host>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/table/z-thead/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAC,MAAM,eAAe,CAAC;AAEvD;;;GAGG;AAMH,MAAM,OAAO,MAAM;;sBAKR,KAAK;;IAEd,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDAAC,IAAI,EAAC,UAAU;YACnB,8DAAa,CACR,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {Component, Host, Prop, h} from \"@stencil/core\";\n\n/*\n ZThead component.\n * @slot - ZThead content (`z-tr`).\n /\n@Component({\n tag: \"z-thead\",\n styleUrl: \"styles.css\",\n shadow: true,\n})\nexport class ZThead {\n /\n If true, the header will be stuck to the top of the table.\n */\n @Prop({reflect: true})\n sticky = false;\n\n render(): HTMLZTheadElement {\n return (\n <Host role=\"rowgroup\">\n <slot></slot>\n </Host>\n );\n }\n}\n"]}

package/dist/collection/components/table/z-tr/index.js CHANGED Viewed

@@ -43,7 +43,7 @@ export class ZTr {
         this.updateColumns();
     }
     render() {
-        return (h(Host, { key: '1048c6109f085ef7d6a2c80ee1f821378f1419eb', role: "row", onClick: this.onRowClick.bind(this), expanded: this.expanded }, h("div", { key: 'b4333edd3915db24134ec862e61e42af75544544', class: "z-tr--expand-button-container" }, this.expandable && (h("button", { key: 'f5d0233257d0ffd2d1221b850f9d33565b882bfe', "aria-expanded": this.expanded ? "true" : "false", "aria-label": this.expanded ? "Comprimi riga" : "Espandi riga", "aria-controls": this.expandableContentId, type: "button" }, h("z-icon", { key: '0c0e51bac7a95bab954450447b2bce3dfa0079b6', name: this.expanded ? "minus-circled" : "plus-circled" })))), h("slot", { key: 'f7af8227af6ec842ead9b12ad13a6d1df448c9a6', onSlotchange: this.updateColumns.bind(this) })));
+        return (h(Host, { key: 'f4ec553131b472795ba58de3d2dfecd217774879', role: "row", onClick: this.onRowClick.bind(this), expanded: this.expanded }, h("div", { key: '746b4cef2f63c5b0c0c38a2b83606d81c0dd17cf', class: "z-tr--expand-button-container" }, this.expandable && (h("button", { key: '96c12982390416514e22a25ebb8f889ee4795bea', "aria-expanded": this.expanded ? "true" : "false", "aria-label": this.expanded ? "Comprimi riga" : "Espandi riga", "aria-controls": this.expandableContentId, type: "button" }, h("z-icon", { key: 'c0570b8d6d1fd6e7759a6f9d170dc3c5f932dc88', name: this.expanded ? "minus-circled" : "plus-circled" })))), h("slot", { key: 'aa2d374dbd6a2dda118df9884c0a03c3234a2d01', onSlotchange: this.updateColumns.bind(this) })));
     }
     static get is() { return "z-tr"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/table/z-tr/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","sourceRoot":"","sources":["~~../../../../../~~src/components/table/z-tr/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAE,OAAO,EAAE,KAAK,EAAgB,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,CAAC,EAAC,MAAM,eAAe,CAAC;AAC3G,OAAO,EAAC,QAAQ,EAAC,MAAM,sBAAsB,CAAC;AAC9C,OAAO,qBAAqB,CAAC;AAC7B,OAAO,qBAAqB,CAAC;AAE7B;;;;;GAKG;AAMH,MAAM,OAAO,GAAG;;0BAaD,KAAK;wBAMP,KAAK;;;IAeN,aAAa;QACrB,MAAM,KAAK,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAkC,YAAY,CAAC,CAAC,CAAC;QACpG,IAAI,IAAI,CAAC,UAAU,EAAE,CAAC;YACpB,KAAK,CAAC,GAAG,EAAE,CAAC;QACd,CAAC;QAED,MAAM,OAAO,GAAG,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,OAAO,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC,CAAC;QAClF,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,WAAW,EAAE,GAAG,OAAO,EAAE,CAAC,CAAC;QAEvD,IAAI,IAAI,CAAC,UAAU,EAAE,CAAC;YACpB,MAAM,iBAAiB,GAAG,KAAK,CAAC,GAAG,EAAE,CAAC;YACtC,iBAAiB,CAAC,EAAE,GAAG,iBAAiB,CAAC,EAAE,IAAI,2BAA2B,QAAQ,EAAE,EAAE,CAAC;YACvF,IAAI,CAAC,mBAAmB,GAAG,iBAAiB,CAAC,EAAE,CAAC;QAClD,CAAC;IACH,CAAC;IAED;;;OAGG;IACK,UAAU,CAAC,KAAiB;QAClC,MAAM,aAAa,GAAI,KAAK,CAAC,MAAsB,CAAC,OAAO,CAAC,iBAAiB,CAAC,CAAC;QAC/E,IAAI,CAAC,IAAI,CAAC,UAAU,IAAI,aAAa,EAAE,CAAC;YACtC,OAAO;QACT,CAAC;QAED,IAAI,CAAC,QAAQ,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC;QAC/B,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,EAAC,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAC,CAAC,CAAC;IAC9C,CAAC;IAED,iBAAiB;QACf,IAAI,CAAC,aAAa,EAAE,CAAC;IACvB,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDACH,IAAI,EAAC,KAAK,EACV,OAAO,EAAE,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,EACnC,QAAQ,EAAE,IAAI,CAAC,QAAQ;YAEvB,4DAAK,KAAK,EAAC,+BAA+B,IACvC,IAAI,CAAC,UAAU,IAAI,CAClB,gFACiB,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,gBACnC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,cAAc,mBAC7C,IAAI,CAAC,mBAAmB,EACvC,IAAI,EAAC,QAAQ;gBAEb,+DAAQ,IAAI,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,cAAc,GAAW,CAClE,CACV,CACG;YACN,6DAAM,YAAY,EAAE,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,GAAS,CACrD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {Component, Element, Event, EventEmitter, Host, Listen, Prop, State, Watch, h} from \"@stencil/core\";\nimport {randomId} from \"../../../utils/utils\";\nimport \"../cells/z-td/index\";\nimport \"../cells/z-th/index\";\n\n/*\n ZTr component.\n * When the row is `expandable`, you can set the `prevent-expand` css class on an interactive element inside the row\n * to prevent the row from expanding.\n * @slot - ZTr content (`z-td` or `z-th`).\n /\n@Component({\n tag: \"z-tr\",\n styleUrl: \"styles.css\",\n shadow: true,\n})\nexport class ZTr {\n @Element() host: HTMLZTrElement;\n\n /\n Whether the row is expandable.\n * Use a `z-td` as the last cell of the row for the additional content.\n * It will show a button to expand/collapse the row.\n * The last cell will be hidden until the button or row is clicked.\n \n If some element inside the expandable row contains the `prevent-expand` css class,\n * the row will not expand by clicking that element.\n /\n @Prop({reflect: true})\n expandable = false;\n\n /\n Whether the row is currently expanded.\n /\n @State()\n expanded = false;\n\n /\n HTML Id of the expandable content.\n * It is used to link the button to the content through the `aria-controls` attribute.\n /\n @State()\n expandableContentId: string;\n\n /* Row has been expanded /\n @Event()\n expand: EventEmitter;\n\n @Watch(\"expandable\")\n @Listen(\"colspanchange\")\n protected updateColumns(): void {\n const cells = Array.from(this.host.querySelectorAll<HTMLZTdElement \| HTMLZThElement>(\"z-td, z-th\"));\n if (this.expandable) {\n cells.pop();\n }\n\n const columns = cells.map((cell) => cell.colspan \|\| 1).reduce((a, b) => a + b, 0);\n this.host.style.setProperty(\"--columns\", `${columns}`);\n\n if (this.expandable) {\n const expandableContent = cells.pop();\n expandableContent.id = expandableContent.id \|\| `z-tr-expandable-content-${randomId()}`;\n this.expandableContentId = expandableContent.id;\n }\n }\n\n /\n Handle click on row.\n * Skip expansion if the click is on a element with `prevent-expand` css class.\n */\n private onRowClick(event: MouseEvent): void {\n const preventExpand = (event.target as HTMLElement).closest(\".prevent-expand\");\n if (!this.expandable \|\| preventExpand) {\n return;\n }\n\n this.expanded = !this.expanded;\n this.expand.emit({expanded: this.expanded});\n }\n\n componentWillLoad(): void {\n this.updateColumns();\n }\n\n render(): HTMLZTrElement {\n return (\n <Host\n role=\"row\"\n onClick={this.onRowClick.bind(this)}\n expanded={this.expanded}\n >\n <div class=\"z-tr--expand-button-container\">\n {this.expandable && (\n <button\n aria-expanded={this.expanded ? \"true\" : \"false\"}\n aria-label={this.expanded ? \"Comprimi riga\" : \"Espandi riga\"}\n aria-controls={this.expandableContentId}\n type=\"button\"\n >\n <z-icon name={this.expanded ? \"minus-circled\" : \"plus-circled\"}></z-icon>\n </button>\n )}\n </div>\n <slot onSlotchange={this.updateColumns.bind(this)}></slot>\n </Host>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/table/z-tr/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAE,OAAO,EAAE,KAAK,EAAgB,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,CAAC,EAAC,MAAM,eAAe,CAAC;AAC3G,OAAO,EAAC,QAAQ,EAAC,MAAM,sBAAsB,CAAC;AAC9C,OAAO,qBAAqB,CAAC;AAC7B,OAAO,qBAAqB,CAAC;AAE7B;;;;;GAKG;AAMH,MAAM,OAAO,GAAG;;0BAaD,KAAK;wBAMP,KAAK;;;IAeN,aAAa;QACrB,MAAM,KAAK,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAkC,YAAY,CAAC,CAAC,CAAC;QACpG,IAAI,IAAI,CAAC,UAAU,EAAE,CAAC;YACpB,KAAK,CAAC,GAAG,EAAE,CAAC;QACd,CAAC;QAED,MAAM,OAAO,GAAG,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,OAAO,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC,CAAC;QAClF,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,WAAW,EAAE,GAAG,OAAO,EAAE,CAAC,CAAC;QAEvD,IAAI,IAAI,CAAC,UAAU,EAAE,CAAC;YACpB,MAAM,iBAAiB,GAAG,KAAK,CAAC,GAAG,EAAE,CAAC;YACtC,iBAAiB,CAAC,EAAE,GAAG,iBAAiB,CAAC,EAAE,IAAI,2BAA2B,QAAQ,EAAE,EAAE,CAAC;YACvF,IAAI,CAAC,mBAAmB,GAAG,iBAAiB,CAAC,EAAE,CAAC;QAClD,CAAC;IACH,CAAC;IAED;;;OAGG;IACK,UAAU,CAAC,KAAiB;QAClC,MAAM,aAAa,GAAI,KAAK,CAAC,MAAsB,CAAC,OAAO,CAAC,iBAAiB,CAAC,CAAC;QAC/E,IAAI,CAAC,IAAI,CAAC,UAAU,IAAI,aAAa,EAAE,CAAC;YACtC,OAAO;QACT,CAAC;QAED,IAAI,CAAC,QAAQ,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC;QAC/B,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,EAAC,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAC,CAAC,CAAC;IAC9C,CAAC;IAED,iBAAiB;QACf,IAAI,CAAC,aAAa,EAAE,CAAC;IACvB,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDACH,IAAI,EAAC,KAAK,EACV,OAAO,EAAE,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,EACnC,QAAQ,EAAE,IAAI,CAAC,QAAQ;YAEvB,4DAAK,KAAK,EAAC,+BAA+B,IACvC,IAAI,CAAC,UAAU,IAAI,CAClB,gFACiB,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,gBACnC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,cAAc,mBAC7C,IAAI,CAAC,mBAAmB,EACvC,IAAI,EAAC,QAAQ;gBAEb,+DAAQ,IAAI,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,cAAc,GAAW,CAClE,CACV,CACG;YACN,6DAAM,YAAY,EAAE,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,GAAS,CACrD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {Component, Element, Event, EventEmitter, Host, Listen, Prop, State, Watch, h} from \"@stencil/core\";\nimport {randomId} from \"../../../utils/utils\";\nimport \"../cells/z-td/index\";\nimport \"../cells/z-th/index\";\n\n/*\n ZTr component.\n * When the row is `expandable`, you can set the `prevent-expand` css class on an interactive element inside the row\n * to prevent the row from expanding.\n * @slot - ZTr content (`z-td` or `z-th`).\n /\n@Component({\n tag: \"z-tr\",\n styleUrl: \"styles.css\",\n shadow: true,\n})\nexport class ZTr {\n @Element() host: HTMLZTrElement;\n\n /\n Whether the row is expandable.\n * Use a `z-td` as the last cell of the row for the additional content.\n * It will show a button to expand/collapse the row.\n * The last cell will be hidden until the button or row is clicked.\n \n If some element inside the expandable row contains the `prevent-expand` css class,\n * the row will not expand by clicking that element.\n /\n @Prop({reflect: true})\n expandable = false;\n\n /\n Whether the row is currently expanded.\n /\n @State()\n expanded = false;\n\n /\n HTML Id of the expandable content.\n * It is used to link the button to the content through the `aria-controls` attribute.\n /\n @State()\n expandableContentId: string;\n\n /* Row has been expanded /\n @Event()\n expand: EventEmitter;\n\n @Watch(\"expandable\")\n @Listen(\"colspanchange\")\n protected updateColumns(): void {\n const cells = Array.from(this.host.querySelectorAll<HTMLZTdElement \| HTMLZThElement>(\"z-td, z-th\"));\n if (this.expandable) {\n cells.pop();\n }\n\n const columns = cells.map((cell) => cell.colspan \|\| 1).reduce((a, b) => a + b, 0);\n this.host.style.setProperty(\"--columns\", `${columns}`);\n\n if (this.expandable) {\n const expandableContent = cells.pop();\n expandableContent.id = expandableContent.id \|\| `z-tr-expandable-content-${randomId()}`;\n this.expandableContentId = expandableContent.id;\n }\n }\n\n /\n Handle click on row.\n * Skip expansion if the click is on a element with `prevent-expand` css class.\n */\n private onRowClick(event: MouseEvent): void {\n const preventExpand = (event.target as HTMLElement).closest(\".prevent-expand\");\n if (!this.expandable \|\| preventExpand) {\n return;\n }\n\n this.expanded = !this.expanded;\n this.expand.emit({expanded: this.expanded});\n }\n\n componentWillLoad(): void {\n this.updateColumns();\n }\n\n render(): HTMLZTrElement {\n return (\n <Host\n role=\"row\"\n onClick={this.onRowClick.bind(this)}\n expanded={this.expanded}\n >\n <div class=\"z-tr--expand-button-container\">\n {this.expandable && (\n <button\n aria-expanded={this.expanded ? \"true\" : \"false\"}\n aria-label={this.expanded ? \"Comprimi riga\" : \"Espandi riga\"}\n aria-controls={this.expandableContentId}\n type=\"button\"\n >\n <z-icon name={this.expanded ? \"minus-circled\" : \"plus-circled\"}></z-icon>\n </button>\n )}\n </div>\n <slot onSlotchange={this.updateColumns.bind(this)}></slot>\n </Host>\n );\n }\n}\n"]}

package/dist/collection/components/table/z-tr/styles.css CHANGED Viewed

@@ -3,7 +3,6 @@
   --columns: 1;
   display: grid;
-  min-width: max-content;
   box-sizing: border-box;
   grid-auto-flow: column;
   grid-template-columns: var(--z-table--expand-button-size, 0) repeat(var(--columns), minmax(128px, 1fr));

package/dist/collection/components/z-accordion/index.js CHANGED Viewed

@@ -47,7 +47,7 @@ export class ZAccordion {
         this.toggled.emit(this.open);
     }
     render() {
-        return (h("details", { key: '56a50ae163d1cb527d90732d637d0a657641cff7', ref: (elm) => (this.detailsElm = elm), onToggle: this.onDetailsToggle.bind(this), open: this.open }, h("summary", { key: '22095c950d00c43d6ddfc3eaea13c804e24fbb37', tabIndex: this.isDisabled ? -1 : null, part: "summary" }, this.icon && (h("z-icon", { key: '40f7b6d5dec14284aba76ca8884740b81f4d43a0', class: "z-accordion-label-icon", name: this.icon })), h("span", { key: '781a5720488ab4972e685d3ac4efafaf25cb1a20', class: "z-accordion-label" }, this.label), h("span", { key: '83fbad7e915391654344591231db512b13ccd1bb', class: "z-accordion-tags" }, h("slot", { key: 'd02d6e89bf46e606fdf229906036fbf3ebdbff05', name: "tag" })), h("z-icon", { key: 'd239c54b1187939517baf24809cab9c5168afa2a', class: "z-accordion-chevron", name: this.open ? "chevron-up" : "chevron-down" })), !this.isDisabled && (h("div", { key: '750de9f238fad34d4d380f585cc948067f229f8a', class: "z-accordion-content", part: "content" }, h("slot", { key: '41568aa9d4e561b1f7f43fbf2bf9cb7ab0c1a713' })))));
+        return (h("details", { key: '6cbbf8aca4848416bbc95fb8114fe2ebeb857a35', ref: (elm) => (this.detailsElm = elm), onToggle: this.onDetailsToggle.bind(this), open: this.open }, h("summary", { key: '983d8f605375d5ddce8a4a51b5b63fa8e405a483', tabIndex: this.isDisabled ? -1 : null, part: "summary" }, this.icon && (h("z-icon", { key: '595a91626c910b3dd13360bb5ad9fb09a147facc', class: "z-accordion-label-icon", name: this.icon })), h("span", { key: '30f72bedfb26e6150853c06e0e7a3e9a21afcd11', class: "z-accordion-label" }, this.label), h("span", { key: 'bfbf51e33e0114ada33cad9ea49f878cb5f39d41', class: "z-accordion-tags" }, h("slot", { key: '027530202366a508b0b434b7cf02b7e4fe6763dd', name: "tag" })), h("z-icon", { key: '8f02c3ea045b217b0b3edc08eb0c768bf98db040', class: "z-accordion-chevron", name: this.open ? "chevron-up" : "chevron-down" })), !this.isDisabled && (h("div", { key: '1b03e279c9a10fcbfd753c6d364e21e78b663fdd', class: "z-accordion-content", part: "content" }, h("slot", { key: '278b1775544aad10d9a8eb4df69b370b6542291f' })))));
     }
     static get is() { return "z-accordion"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/z-accordion/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","sourceRoot":"","sources":["~~../../../../~~src/components/z-accordion/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAE,KAAK,EAAgB,IAAI,EAAE,KAAK,EAAE,CAAC,EAAC,MAAM,eAAe,CAAC;AAC7E,OAAO,EAAC,gBAAgB,EAAE,WAAW,EAAC,MAAM,aAAa,CAAC;AAE1D;;;;;;;;;;;;;;;GAeG;AAMH,MAAM,OAAO,UAAU;;;;oBAiBd,WAAW,CAAC,GAAG;0BAMT,KAAK;oBAMX,KAAK;yBAMA,KAAK;uBAMW,gBAAgB,CAAC,OAAO;sBAM3C,IAAI;;IASH,gBAAgB;QACxB,IAAI,IAAI,CAAC,UAAU,EAAE,CAAC;YACpB,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;QACpB,CAAC;IACH,CAAC;IAID;;;;OAIG;IACK,eAAe;QACrB,IAAI,IAAI,CAAC,UAAU,EAAE,CAAC;YACpB,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;YAClB,IAAI,CAAC,UAAU,CAAC,IAAI,GAAG,KAAK,CAAC;YAE7B,OAAO;QACT,CAAC;QAED,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC;QACjC,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAC/B,CAAC;IAED,MAAM;QACJ,OAAO,CACL,gEACE,GAAG,EAAE,CAAC,GAAuB,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,UAAU,GAAG,GAAG,CAAC,EACzD,QAAQ,EAAE,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,IAAI,CAAC,EACzC,IAAI,EAAE,IAAI,CAAC,IAAI;YAEf,gEACE,QAAQ,EAAE,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,EACrC,IAAI,EAAC,SAAS;gBAEb,IAAI,CAAC,IAAI,IAAI,CACZ,+DACE,KAAK,EAAC,wBAAwB,EAC9B,IAAI,EAAE,IAAI,CAAC,IAAI,GACf,CACH;gBACD,6DAAM,KAAK,EAAC,mBAAmB,IAAE,IAAI,CAAC,KAAK,CAAQ;gBACnD,6DAAM,KAAK,EAAC,kBAAkB;oBAC5B,6DAAM,IAAI,EAAC,KAAK,GAAG,CACd;gBACP,+DACE,KAAK,EAAC,qBAAqB,EAC3B,IAAI,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,cAAc,GAC/C,CACM;YACT,CAAC,IAAI,CAAC,UAAU,IAAI,CACnB,4DACE,KAAK,EAAC,qBAAqB,EAC3B,IAAI,EAAC,SAAS;gBAEd,8DAAQ,CACJ,CACP,CACO,CACX,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {Component, Event, EventEmitter, Prop, Watch, h} from \"@stencil/core\";\nimport {AccordionVariant, ControlSize} from \"../../beans\";\n\n/*\n Accordion component.\n \n @slot - Slot for the main content.\n * @slot tag - Slot for tags.\n * @cssprop --z-accordion-highlight-color - Color of the highlight band on the summary's left edge. Only applies when `highlight` is true. Default: `transparent`.\n * @cssprop --z-accordion-bg - Background color of the summary. Default: `--color-surface02`.\n * @cssprop --z-accordion-label-color - Label color. Default: `--color-default-text`.\n * @cssprop --z-accordion-disabled-label-color - Label color when disabled. Default: `--color-text03`.\n * @cssprop --z-accordion-content-bg - Background color of the accordion. Default: `--color-surface02`.\n * @cssprop --z-accordion-content-fg - Content text color. Default: `--color-default-text`.\n * @cssprop --z-accordion-hover-color - Hover color of the summary. Default: `--color-surface03`.\n * @cssprop --z-accordion-left-padding - Left padding of the summary. Default: `--space-unit` * 2.\n * @cssprop --z-accordion-right-padding - Right padding of the summary. Default: `--space-unit`.\n * @cssprop --z-accordion-label-font-weight - Font weight of the summary label. Default: `--font-sb`.\n /\n@Component({\n tag: \"z-accordion\",\n styleUrl: \"styles.css\",\n shadow: true,\n})\nexport class ZAccordion {\n /\n Text label.\n /\n @Prop()\n label: string;\n\n /\n Name of the z-icon to display before the label's text.\n /\n @Prop()\n icon: string;\n\n /\n Size of the component.\n /\n @Prop({reflect: true})\n size = ControlSize.BIG;\n\n /\n Disabled state of the accordion.\n /\n @Prop({reflect: true})\n isDisabled = false;\n\n /\n The open state of the accordion.\n /\n @Prop({reflect: true, mutable: true})\n open = false;\n\n /\n Enable highlight band on the `summary`'s left edge.\n /\n @Prop({reflect: true})\n highlight = false;\n\n /\n Accordion variant.\n /\n @Prop({reflect: true})\n variant: AccordionVariant = AccordionVariant.DEFAULT;\n\n /\n Enable box-shadow on the accordion. Only applies when `variant` is `BACKGROUND`.\n /\n @Prop({reflect: true})\n shadow = true;\n\n /\n Event fired when the accordion is toggled.\n /\n @Event()\n toggled: EventEmitter<boolean>;\n\n @Watch(\"isDisabled\")\n protected onDisabledChange(): void {\n if (this.isDisabled) {\n this.open = false;\n }\n }\n\n private detailsElm: HTMLDetailsElement;\n\n /\n Handle `details` element toggle.\n * If currently disabled, prevent toggling by forcing the `open` state to `false`.\n * Unfortunately the \"toggle\" event is not cancelable and when catched, the `open` state is already changed.\n */\n private onDetailsToggle(): void {\n if (this.isDisabled) {\n this.open = false;\n this.detailsElm.open = false;\n\n return;\n }\n\n this.open = this.detailsElm.open;\n this.toggled.emit(this.open);\n }\n\n render(): HTMLDetailsElement {\n return (\n <details\n ref={(elm: HTMLDetailsElement) => (this.detailsElm = elm)}\n onToggle={this.onDetailsToggle.bind(this)}\n open={this.open}\n >\n <summary\n tabIndex={this.isDisabled ? -1 : null}\n part=\"summary\"\n >\n {this.icon && (\n <z-icon\n class=\"z-accordion-label-icon\"\n name={this.icon}\n />\n )}\n <span class=\"z-accordion-label\">{this.label}</span>\n <span class=\"z-accordion-tags\">\n <slot name=\"tag\" />\n </span>\n <z-icon\n class=\"z-accordion-chevron\"\n name={this.open ? \"chevron-up\" : \"chevron-down\"}\n />\n </summary>\n {!this.isDisabled && (\n <div\n class=\"z-accordion-content\"\n part=\"content\"\n >\n <slot />\n </div>\n )}\n </details>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/z-accordion/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAE,KAAK,EAAgB,IAAI,EAAE,KAAK,EAAE,CAAC,EAAC,MAAM,eAAe,CAAC;AAC7E,OAAO,EAAC,gBAAgB,EAAE,WAAW,EAAC,MAAM,aAAa,CAAC;AAE1D;;;;;;;;;;;;;;;GAeG;AAMH,MAAM,OAAO,UAAU;;;;oBAiBd,WAAW,CAAC,GAAG;0BAMT,KAAK;oBAMX,KAAK;yBAMA,KAAK;uBAMW,gBAAgB,CAAC,OAAO;sBAM3C,IAAI;;IASH,gBAAgB;QACxB,IAAI,IAAI,CAAC,UAAU,EAAE,CAAC;YACpB,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;QACpB,CAAC;IACH,CAAC;IAID;;;;OAIG;IACK,eAAe;QACrB,IAAI,IAAI,CAAC,UAAU,EAAE,CAAC;YACpB,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;YAClB,IAAI,CAAC,UAAU,CAAC,IAAI,GAAG,KAAK,CAAC;YAE7B,OAAO;QACT,CAAC;QAED,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC;QACjC,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAC/B,CAAC;IAED,MAAM;QACJ,OAAO,CACL,gEACE,GAAG,EAAE,CAAC,GAAuB,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,UAAU,GAAG,GAAG,CAAC,EACzD,QAAQ,EAAE,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,IAAI,CAAC,EACzC,IAAI,EAAE,IAAI,CAAC,IAAI;YAEf,gEACE,QAAQ,EAAE,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,EACrC,IAAI,EAAC,SAAS;gBAEb,IAAI,CAAC,IAAI,IAAI,CACZ,+DACE,KAAK,EAAC,wBAAwB,EAC9B,IAAI,EAAE,IAAI,CAAC,IAAI,GACf,CACH;gBACD,6DAAM,KAAK,EAAC,mBAAmB,IAAE,IAAI,CAAC,KAAK,CAAQ;gBACnD,6DAAM,KAAK,EAAC,kBAAkB;oBAC5B,6DAAM,IAAI,EAAC,KAAK,GAAG,CACd;gBACP,+DACE,KAAK,EAAC,qBAAqB,EAC3B,IAAI,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,cAAc,GAC/C,CACM;YACT,CAAC,IAAI,CAAC,UAAU,IAAI,CACnB,4DACE,KAAK,EAAC,qBAAqB,EAC3B,IAAI,EAAC,SAAS;gBAEd,8DAAQ,CACJ,CACP,CACO,CACX,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {Component, Event, EventEmitter, Prop, Watch, h} from \"@stencil/core\";\nimport {AccordionVariant, ControlSize} from \"../../beans\";\n\n/*\n Accordion component.\n \n @slot - Slot for the main content.\n * @slot tag - Slot for tags.\n * @cssprop --z-accordion-highlight-color - Color of the highlight band on the summary's left edge. Only applies when `highlight` is true. Default: `transparent`.\n * @cssprop --z-accordion-bg - Background color of the summary. Default: `--color-surface02`.\n * @cssprop --z-accordion-label-color - Label color. Default: `--color-default-text`.\n * @cssprop --z-accordion-disabled-label-color - Label color when disabled. Default: `--color-text03`.\n * @cssprop --z-accordion-content-bg - Background color of the accordion. Default: `--color-surface02`.\n * @cssprop --z-accordion-content-fg - Content text color. Default: `--color-default-text`.\n * @cssprop --z-accordion-hover-color - Hover color of the summary. Default: `--color-surface03`.\n * @cssprop --z-accordion-left-padding - Left padding of the summary. Default: `--space-unit` * 2.\n * @cssprop --z-accordion-right-padding - Right padding of the summary. Default: `--space-unit`.\n * @cssprop --z-accordion-label-font-weight - Font weight of the summary label. Default: `--font-sb`.\n /\n@Component({\n tag: \"z-accordion\",\n styleUrl: \"styles.css\",\n shadow: true,\n})\nexport class ZAccordion {\n /\n Text label.\n /\n @Prop()\n label: string;\n\n /\n Name of the z-icon to display before the label's text.\n /\n @Prop()\n icon: string;\n\n /\n Size of the component.\n /\n @Prop({reflect: true})\n size = ControlSize.BIG;\n\n /\n Disabled state of the accordion.\n /\n @Prop({reflect: true})\n isDisabled = false;\n\n /\n The open state of the accordion.\n /\n @Prop({reflect: true, mutable: true})\n open = false;\n\n /\n Enable highlight band on the `summary`'s left edge.\n /\n @Prop({reflect: true})\n highlight = false;\n\n /\n Accordion variant.\n /\n @Prop({reflect: true})\n variant: AccordionVariant = AccordionVariant.DEFAULT;\n\n /\n Enable box-shadow on the accordion. Only applies when `variant` is `BACKGROUND`.\n /\n @Prop({reflect: true})\n shadow = true;\n\n /\n Event fired when the accordion is toggled.\n /\n @Event()\n toggled: EventEmitter<boolean>;\n\n @Watch(\"isDisabled\")\n protected onDisabledChange(): void {\n if (this.isDisabled) {\n this.open = false;\n }\n }\n\n private detailsElm: HTMLDetailsElement;\n\n /\n Handle `details` element toggle.\n * If currently disabled, prevent toggling by forcing the `open` state to `false`.\n * Unfortunately the \"toggle\" event is not cancelable and when catched, the `open` state is already changed.\n */\n private onDetailsToggle(): void {\n if (this.isDisabled) {\n this.open = false;\n this.detailsElm.open = false;\n\n return;\n }\n\n this.open = this.detailsElm.open;\n this.toggled.emit(this.open);\n }\n\n render(): HTMLDetailsElement {\n return (\n <details\n ref={(elm: HTMLDetailsElement) => (this.detailsElm = elm)}\n onToggle={this.onDetailsToggle.bind(this)}\n open={this.open}\n >\n <summary\n tabIndex={this.isDisabled ? -1 : null}\n part=\"summary\"\n >\n {this.icon && (\n <z-icon\n class=\"z-accordion-label-icon\"\n name={this.icon}\n />\n )}\n <span class=\"z-accordion-label\">{this.label}</span>\n <span class=\"z-accordion-tags\">\n <slot name=\"tag\" />\n </span>\n <z-icon\n class=\"z-accordion-chevron\"\n name={this.open ? \"chevron-up\" : \"chevron-down\"}\n />\n </summary>\n {!this.isDisabled && (\n <div\n class=\"z-accordion-content\"\n part=\"content\"\n >\n <slot />\n </div>\n )}\n </details>\n );\n }\n}\n"]}