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

@zanichelli/albe-web-components 16.3.0 → 16.3.1

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

package/dist/collection/components/deprecated/z-menu-section-deprecated/index.stories.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.stories.js","sourceRoot":"","sources":["~~../../../../../~~src/components/deprecated/z-menu-section-deprecated/index.stories.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,IAAI,EAAC,MAAM,KAAK,CAAC;AAEzB,OAAO,SAAS,CAAC;AAEjB,MAAM,SAAS,GAAG;IAChB,KAAK,EAAE,yBAAyB;IAChC,SAAS,EAAE,2BAA2B;IACtC,IAAI,EAAE;QACJ,MAAM,EAAE,KAAK;KACd;CACqC,CAAC;AAEzC,eAAe,SAAS,CAAC;AAIzB,MAAM,CAAC,MAAM,SAAS,GAAG;IACvB,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAA;yCACiB,IAAI,CAAC,MAAM;;;;;;;;;;;;;;;;;;;GAmBjD;CACc,CAAC;AAElB,MAAM,CAAC,MAAM,YAAY,GAAG;IAC1B,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAA;yCACiB,IAAI,CAAC,MAAM;;;GAGjD;CACc,CAAC","sourcesContent":["import {Meta, StoryObj} from \"@storybook/web-components\";\nimport {html} from \"lit\";\nimport {type ZMenuSectionDeprecated} from \".\";\nimport \"./index\";\n\nconst StoryMeta = {\n title: \"Deprecated/ZMenuSection\",\n component: \"z-menu-section-deprecated\",\n args: {\n active: false,\n },\n} satisfies Meta<ZMenuSectionDeprecated>;\n\nexport default StoryMeta;\n\ntype Story = StoryObj<ZMenuSectionDeprecated>;\n\nexport const WithItems = {\n render: (args) => html`\n <z-menu-section-deprecated .active=${args.active}>\n <h3>Label</h3>\n <a\n href=\"\"\n slot=\"item\"\n >Item 1</a\n >\n <a\n href=\"\"\n slot=\"item\"\n >Item 2</a\n >\n <a\n href=\"\"\n slot=\"item\"\n active\n >Item 3 - active</a\n >\n </z-menu-section-deprecated>\n `,\n} satisfies Story;\n\nexport const WithoutItems = {\n render: (args) => html`\n <z-menu-section-deprecated .active=${args.active}>\n <h3>Label</h3>\n </z-menu-section-deprecated>\n `,\n} satisfies Story;\n"]}
1	+ {"version":3,"file":"index.stories.js","sourceRoot":"","sources":["../../../../src/components/deprecated/z-menu-section-deprecated/index.stories.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,IAAI,EAAC,MAAM,KAAK,CAAC;AAEzB,OAAO,SAAS,CAAC;AAEjB,MAAM,SAAS,GAAG;IAChB,KAAK,EAAE,yBAAyB;IAChC,SAAS,EAAE,2BAA2B;IACtC,IAAI,EAAE;QACJ,MAAM,EAAE,KAAK;KACd;CACqC,CAAC;AAEzC,eAAe,SAAS,CAAC;AAIzB,MAAM,CAAC,MAAM,SAAS,GAAG;IACvB,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAA;yCACiB,IAAI,CAAC,MAAM;;;;;;;;;;;;;;;;;;;GAmBjD;CACc,CAAC;AAElB,MAAM,CAAC,MAAM,YAAY,GAAG;IAC1B,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAA;yCACiB,IAAI,CAAC,MAAM;;;GAGjD;CACc,CAAC","sourcesContent":["import {Meta, StoryObj} from \"@storybook/web-components\";\nimport {html} from \"lit\";\nimport {type ZMenuSectionDeprecated} from \".\";\nimport \"./index\";\n\nconst StoryMeta = {\n title: \"Deprecated/ZMenuSection\",\n component: \"z-menu-section-deprecated\",\n args: {\n active: false,\n },\n} satisfies Meta<ZMenuSectionDeprecated>;\n\nexport default StoryMeta;\n\ntype Story = StoryObj<ZMenuSectionDeprecated>;\n\nexport const WithItems = {\n render: (args) => html`\n <z-menu-section-deprecated .active=${args.active}>\n <h3>Label</h3>\n <a\n href=\"\"\n slot=\"item\"\n >Item 1</a\n >\n <a\n href=\"\"\n slot=\"item\"\n >Item 2</a\n >\n <a\n href=\"\"\n slot=\"item\"\n active\n >Item 3 - active</a\n >\n </z-menu-section-deprecated>\n `,\n} satisfies Story;\n\nexport const WithoutItems = {\n render: (args) => html`\n <z-menu-section-deprecated .active=${args.active}>\n <h3>Label</h3>\n </z-menu-section-deprecated>\n `,\n} satisfies Story;\n"]}

package/dist/collection/components/file-upload/z-dragdrop-area/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","sourceRoot":"","sources":["~~../../../../../~~src/components/file-upload/z-dragdrop-area/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAE,KAAK,EAAgB,IAAI,EAAE,CAAC,EAAC,MAAM,eAAe,CAAC;AAOtE,MAAM,OAAO,aAAa;;;;IAShB,kBAAkB,CAAC,KAAe;QACxC,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IAC/B,CAAC;IAIO,uBAAuB;QAC7B,OAAO,CACL,WAAK,KAAK,EAAC,oBAAoB;YAC7B,WAAK,KAAK,EAAC,kBAAkB;gBAC3B,YAAM,KAAK,EAAC,WAAW,IAAE,IAAI,CAAC,gBAAgB,CAAQ,CAClD,CACF,CACP,CAAC;IACJ,CAAC;IAED,MAAM;QACJ,OAAO,CACL,4DACE,QAAQ,EAAE,CAAC,EACX,GAAG,EAAE,CAAC,GAAG,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,iBAAiB,GAAG,GAAG,CAAC,EAC5C,KAAK,EAAC,UAAU,EAChB,UAAU,EAAE,CAAC,CAAC,EAAE,EAAE;gBAChB,CAAC,CAAC,cAAc,EAAE,CAAC;gBACnB,IAAI,CAAC,iBAAiB,CAAC,SAAS,CAAC,GAAG,CAAC,UAAU,CAAC,CAAC;YACnD,CAAC,EACD,WAAW,EAAE,GAAG,EAAE;gBAChB,IAAI,CAAC,iBAAiB,CAAC,SAAS,CAAC,MAAM,CAAC,UAAU,CAAC,CAAC;YACtD,CAAC,EACD,MAAM,EAAE,CAAC,CAAC,EAAE,EAAE;gBACZ,CAAC,CAAC,cAAc,EAAE,CAAC;gBACnB,IAAI,CAAC,CAAC,YAAY,CAAC,KAAK,CAAC,MAAM,EAAE,CAAC;oBAChC,IAAI,CAAC,iBAAiB,CAAC,SAAS,CAAC,MAAM,CAAC,UAAU,CAAC,CAAC;oBACpD,IAAI,CAAC,kBAAkB,CAAC,CAAC,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC;gBAChD,CAAC;YACH,CAAC;YAEA,IAAI,CAAC,uBAAuB,EAAE;YAC/B,8DAAQ,CACJ,CACP,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {Component, Event, EventEmitter, Prop, h} from \"@stencil/core\";\n\n@Component({\n tag: \"z-dragdrop-area\",\n styleUrl: \"styles.css\",\n shadow: true,\n})\nexport class ZDragdropArea {\n /** drag & drop button label /\n @Prop()\n dragAndDropLabel: string;\n\n /* Emitted when user drop one or more files */\n @Event()\n fileDropped: EventEmitter;\n\n private fileDroppedHandler(files: FileList): void {\n this.fileDropped.emit(files);\n }\n\n private dragDropContainer: HTMLDivElement;\n\n private renderOnDragOverMessage(): HTMLDivElement {\n return (\n <div class=\"dragover-container\">\n <div class=\"dragover-message\">\n <span class=\"body-2-sb\">{this.dragAndDropLabel}</span>\n </div>\n </div>\n );\n }\n\n render(): HTMLDivElement {\n return (\n <div\n tabIndex={0}\n ref={(val) => (this.dragDropContainer = val)}\n class=\"dragdrop\"\n onDragOver={(e) => {\n e.preventDefault();\n this.dragDropContainer.classList.add(\"dragover\");\n }}\n onDragLeave={() => {\n this.dragDropContainer.classList.remove(\"dragover\");\n }}\n onDrop={(e) => {\n e.preventDefault();\n if (e.dataTransfer.files.length) {\n this.dragDropContainer.classList.remove(\"dragover\");\n this.fileDroppedHandler(e.dataTransfer.files);\n }\n }}\n >\n {this.renderOnDragOverMessage()}\n <slot />\n </div>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/file-upload/z-dragdrop-area/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAE,KAAK,EAAgB,IAAI,EAAE,CAAC,EAAC,MAAM,eAAe,CAAC;AAOtE,MAAM,OAAO,aAAa;;;;IAShB,kBAAkB,CAAC,KAAe;QACxC,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IAC/B,CAAC;IAIO,uBAAuB;QAC7B,OAAO,CACL,WAAK,KAAK,EAAC,oBAAoB;YAC7B,WAAK,KAAK,EAAC,kBAAkB;gBAC3B,YAAM,KAAK,EAAC,WAAW,IAAE,IAAI,CAAC,gBAAgB,CAAQ,CAClD,CACF,CACP,CAAC;IACJ,CAAC;IAED,MAAM;QACJ,OAAO,CACL,4DACE,QAAQ,EAAE,CAAC,EACX,GAAG,EAAE,CAAC,GAAG,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,iBAAiB,GAAG,GAAG,CAAC,EAC5C,KAAK,EAAC,UAAU,EAChB,UAAU,EAAE,CAAC,CAAC,EAAE,EAAE;gBAChB,CAAC,CAAC,cAAc,EAAE,CAAC;gBACnB,IAAI,CAAC,iBAAiB,CAAC,SAAS,CAAC,GAAG,CAAC,UAAU,CAAC,CAAC;YACnD,CAAC,EACD,WAAW,EAAE,GAAG,EAAE;gBAChB,IAAI,CAAC,iBAAiB,CAAC,SAAS,CAAC,MAAM,CAAC,UAAU,CAAC,CAAC;YACtD,CAAC,EACD,MAAM,EAAE,CAAC,CAAC,EAAE,EAAE;gBACZ,CAAC,CAAC,cAAc,EAAE,CAAC;gBACnB,IAAI,CAAC,CAAC,YAAY,CAAC,KAAK,CAAC,MAAM,EAAE,CAAC;oBAChC,IAAI,CAAC,iBAAiB,CAAC,SAAS,CAAC,MAAM,CAAC,UAAU,CAAC,CAAC;oBACpD,IAAI,CAAC,kBAAkB,CAAC,CAAC,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC;gBAChD,CAAC;YACH,CAAC;YAEA,IAAI,CAAC,uBAAuB,EAAE;YAC/B,8DAAQ,CACJ,CACP,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {Component, Event, EventEmitter, Prop, h} from \"@stencil/core\";\n\n@Component({\n tag: \"z-dragdrop-area\",\n styleUrl: \"styles.css\",\n shadow: true,\n})\nexport class ZDragdropArea {\n /** drag & drop button label /\n @Prop()\n dragAndDropLabel: string;\n\n /* Emitted when user drop one or more files */\n @Event()\n fileDropped: EventEmitter;\n\n private fileDroppedHandler(files: FileList): void {\n this.fileDropped.emit(files);\n }\n\n private dragDropContainer: HTMLDivElement;\n\n private renderOnDragOverMessage(): HTMLDivElement {\n return (\n <div class=\"dragover-container\">\n <div class=\"dragover-message\">\n <span class=\"body-2-sb\">{this.dragAndDropLabel}</span>\n </div>\n </div>\n );\n }\n\n render(): HTMLDivElement {\n return (\n <div\n tabIndex={0}\n ref={(val) => (this.dragDropContainer = val)}\n class=\"dragdrop\"\n onDragOver={(e) => {\n e.preventDefault();\n this.dragDropContainer.classList.add(\"dragover\");\n }}\n onDragLeave={() => {\n this.dragDropContainer.classList.remove(\"dragover\");\n }}\n onDrop={(e) => {\n e.preventDefault();\n if (e.dataTransfer.files.length) {\n this.dragDropContainer.classList.remove(\"dragover\");\n this.fileDroppedHandler(e.dataTransfer.files);\n }\n }}\n >\n {this.renderOnDragOverMessage()}\n <slot />\n </div>\n );\n }\n}\n"]}

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

@@ -1,6 +1,6 @@
 import { Host, h } from "@stencil/core";
 import { PopoverPosition, ZChipType } from "../../../beans";
-import { tabletBreakpoint } from "../../../constants/breakpoints";
+import { Breakpoints } from "../../../constants/breakpoints";
 export class ZFile {
     constructor() {
         this.fileNumber = undefined;
@@ -23,7 +23,7 @@ export class ZFile {
     }
     componentDidLoad() {
         var _a, _b;
-        if (this.elementHasEllipsis() && window.innerWidth > tabletBreakpoint) {
+        if (this.elementHasEllipsis() && window.innerWidth > Breakpoints.TABLET) {
             this.allowPopover = true;
         }
         (_b = (_a = this.icon) === null || _a === void 0 ? void 0 : _a.focus) === null || _b === void 0 ? void 0 : _b.call(_a);
@@ -32,7 +32,7 @@ export class ZFile {
         return this.ellipsis.offsetWidth < this.ellipsis.scrollWidth;
     }
     render() {
-        return (h(Host, { key: 'fd8490c60c3266c39e2b4fa7b3cc4097da8222cf' }, this.allowPopover && (h("z-popover", { key: 'af7c9370bdaa644ecfb50e1ae69fd425b1347b36', open: this.popoverVisible, position: PopoverPosition.AUTO, bindTo: this.chip }, h("span", { key: 'faa8e08ffbae25222396effe24db44e53ccfb892', class: "body-5 tooltip-content" }, this.ellipsis.innerText))), h("z-chip", { key: 'ed790fdb2b1639e4f44cde4da98daa101a44abb0', ref: (el) => (this.chip = el), id: `chip-${this.fileNumber}`, interactiveIcon: "multiply-circled", type: ZChipType.DEFAULT }, h("span", { key: '0bae3bda90db4e3793a22629b30439017e3543a3', ref: (el) => (this.ellipsis = el), tabIndex: -1 }, this.fileName))));
+        return (h(Host, { key: '0d6f3522b4d6be820d8b96a3cd96fc4abb38d41c' }, this.allowPopover && (h("z-popover", { key: 'da950fcf5b1be6fc291895aeb0e2223275cab8fa', open: this.popoverVisible, position: PopoverPosition.AUTO, bindTo: this.chip }, h("span", { key: '54363fac4eb3b6a723c7841bb29415b0bd763e9a', class: "body-5 tooltip-content" }, this.ellipsis.innerText))), h("z-chip", { key: '2842d206ffa531c93838e885ba545176554dd7e3', ref: (el) => (this.chip = el), id: `chip-${this.fileNumber}`, interactiveIcon: "multiply-circled", type: ZChipType.DEFAULT }, h("span", { key: 'e6d0322525bf9ae3d2d09d4110a5414c25ab211b', ref: (el) => (this.ellipsis = el), tabIndex: -1 }, this.fileName))));
     }
     static get is() { return "z-file"; }
     static get encapsulation() { return "scoped"; }

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

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","sourceRoot":"","sources":["~~../../../../../~~src/components/file-upload/z-file/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAE,OAAO,EAAE,KAAK,EAAgB,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC,EAAC,MAAM,eAAe,CAAC;AACpG,OAAO,EAAC,eAAe,EAAE,SAAS,EAAC,MAAM,gBAAgB,CAAC;AAC1D,OAAO,EAAC,~~gBAAgB~~,EAAC,MAAM,gCAAgC,CAAC;~~AAQhE~~,MAAM,OAAO,KAAK;;;;4BAgBD,KAAK;8BAGH,KAAK;;IAQd,iBAAiB;QACvB,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,EAAC,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAC,CAAC,CAAC;QAChD,IAAI,CAAC,EAAE,CAAC,MAAM,EAAE,CAAC;IACnB,CAAC;IAGD,WAAW;QACT,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC;IAC7B,CAAC;IAGD,YAAY;QACV,IAAI,CAAC,cAAc,GAAG,KAAK,CAAC;IAC9B,CAAC;IAGD,sBAAsB;QACpB,IAAI,CAAC,iBAAiB,EAAE,CAAC;IAC3B,CAAC;IAED,gBAAgB;;QACd,IAAI,IAAI,CAAC,kBAAkB,EAAE,IAAI,MAAM,CAAC,UAAU,GAAG,~~gBAAgB~~,EAAE,CAAC;~~YACtE~~,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC;QAC3B,CAAC;QAED,MAAA,MAAA,IAAI,CAAC,IAAI,0CAAE,KAAK,kDAAI,CAAC;IACvB,CAAC;IAEO,kBAAkB;QACxB,OAAO,IAAI,CAAC,QAAQ,CAAC,WAAW,GAAG,IAAI,CAAC,QAAQ,CAAC,WAAW,CAAC;IAC/D,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACF,IAAI,CAAC,YAAY,IAAI,CACpB,kEACE,IAAI,EAAE,IAAI,CAAC,cAAc,EACzB,QAAQ,EAAE,eAAe,CAAC,IAAI,EAC9B,MAAM,EAAE,IAAI,CAAC,IAAI;gBAEjB,6DAAM,KAAK,EAAC,wBAAwB,IAAE,IAAI,CAAC,QAAQ,CAAC,SAAS,CAAQ,CAC3D,CACb;YACD,+DACE,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,IAAI,GAAG,EAAsB,CAAC,EACjD,EAAE,EAAE,QAAQ,IAAI,CAAC,UAAU,EAAE,EAC7B,eAAe,EAAC,kBAAkB,EAClC,IAAI,EAAE,SAAS,CAAC,OAAO;gBAEvB,6DACE,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,QAAQ,GAAG,EAAqB,CAAC,EACpD,QAAQ,EAAE,CAAC,CAAC,IAEX,IAAI,CAAC,QAAQ,CACT,CACA,CACJ,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {Component, Element, Event, EventEmitter, Host, Listen, Prop, State, h} from \"@stencil/core\";\nimport {PopoverPosition, ZChipType} from \"../../../beans\";\nimport {~~tabletBreakpoint~~} from \"../../../constants/breakpoints\";\n\n@Component({\n tag: \"z-file\",\n styleUrl: \"styles.css\",\n shadow: false,\n scoped: true,\n})\nexport class ZFile {\n private icon: HTMLElement;\n\n private ellipsis?: HTMLSpanElement;\n\n private chip?: HTMLZChipElement;\n\n /** File chip id /\n @Prop()\n fileNumber: number;\n\n /* File name /\n @Prop()\n fileName: string;\n\n @State()\n allowPopover = false;\n\n @State()\n popoverVisible = false;\n\n @Element() el: HTMLZFileElement;\n\n /* Emitted when a z-file component is removed from the DOM */\n @Event()\n removeFile: EventEmitter;\n\n private removeFileHandler(): void {\n this.removeFile.emit({fileName: this.fileName});\n this.el.remove();\n }\n\n @Listen(\"mouseover\")\n onMouseOver(): void {\n this.popoverVisible = true;\n }\n\n @Listen(\"mouseleave\")\n onMouseLeave(): void {\n this.popoverVisible = false;\n }\n\n @Listen(\"interactiveIconClick\")\n onInteractiveIconClick(): void {\n this.removeFileHandler();\n }\n\n componentDidLoad(): void {\n if (this.elementHasEllipsis() && window.innerWidth > ~~tabletBreakpoint~~) {\n this.allowPopover = true;\n }\n\n this.icon?.focus?.();\n }\n\n private elementHasEllipsis(): boolean {\n return this.ellipsis.offsetWidth < this.ellipsis.scrollWidth;\n }\n\n render(): HTMLZFileElement {\n return (\n <Host>\n {this.allowPopover && (\n <z-popover\n open={this.popoverVisible}\n position={PopoverPosition.AUTO}\n bindTo={this.chip}\n >\n <span class=\"body-5 tooltip-content\">{this.ellipsis.innerText}</span>\n </z-popover>\n )}\n <z-chip\n ref={(el) => (this.chip = el as HTMLZChipElement)}\n id={`chip-${this.fileNumber}`}\n interactiveIcon=\"multiply-circled\"\n type={ZChipType.DEFAULT}\n >\n <span\n ref={(el) => (this.ellipsis = el as HTMLSpanElement)}\n tabIndex={-1}\n >\n {this.fileName}\n </span>\n </z-chip>\n </Host>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/file-upload/z-file/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAE,OAAO,EAAE,KAAK,EAAgB,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC,EAAC,MAAM,eAAe,CAAC;AACpG,OAAO,EAAC,eAAe,EAAE,SAAS,EAAC,MAAM,gBAAgB,CAAC;AAC1D,OAAO,EAAC,WAAW,EAAC,MAAM,gCAAgC,CAAC;AAQ3D,MAAM,OAAO,KAAK;;;;4BAgBD,KAAK;8BAGH,KAAK;;IAQd,iBAAiB;QACvB,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,EAAC,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAC,CAAC,CAAC;QAChD,IAAI,CAAC,EAAE,CAAC,MAAM,EAAE,CAAC;IACnB,CAAC;IAGD,WAAW;QACT,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC;IAC7B,CAAC;IAGD,YAAY;QACV,IAAI,CAAC,cAAc,GAAG,KAAK,CAAC;IAC9B,CAAC;IAGD,sBAAsB;QACpB,IAAI,CAAC,iBAAiB,EAAE,CAAC;IAC3B,CAAC;IAED,gBAAgB;;QACd,IAAI,IAAI,CAAC,kBAAkB,EAAE,IAAI,MAAM,CAAC,UAAU,GAAG,WAAW,CAAC,MAAM,EAAE,CAAC;YACxE,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC;QAC3B,CAAC;QAED,MAAA,MAAA,IAAI,CAAC,IAAI,0CAAE,KAAK,kDAAI,CAAC;IACvB,CAAC;IAEO,kBAAkB;QACxB,OAAO,IAAI,CAAC,QAAQ,CAAC,WAAW,GAAG,IAAI,CAAC,QAAQ,CAAC,WAAW,CAAC;IAC/D,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACF,IAAI,CAAC,YAAY,IAAI,CACpB,kEACE,IAAI,EAAE,IAAI,CAAC,cAAc,EACzB,QAAQ,EAAE,eAAe,CAAC,IAAI,EAC9B,MAAM,EAAE,IAAI,CAAC,IAAI;gBAEjB,6DAAM,KAAK,EAAC,wBAAwB,IAAE,IAAI,CAAC,QAAQ,CAAC,SAAS,CAAQ,CAC3D,CACb;YACD,+DACE,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,IAAI,GAAG,EAAsB,CAAC,EACjD,EAAE,EAAE,QAAQ,IAAI,CAAC,UAAU,EAAE,EAC7B,eAAe,EAAC,kBAAkB,EAClC,IAAI,EAAE,SAAS,CAAC,OAAO;gBAEvB,6DACE,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,QAAQ,GAAG,EAAqB,CAAC,EACpD,QAAQ,EAAE,CAAC,CAAC,IAEX,IAAI,CAAC,QAAQ,CACT,CACA,CACJ,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {Component, Element, Event, EventEmitter, Host, Listen, Prop, State, h} from \"@stencil/core\";\nimport {PopoverPosition, ZChipType} from \"../../../beans\";\nimport {Breakpoints} from \"../../../constants/breakpoints\";\n\n@Component({\n tag: \"z-file\",\n styleUrl: \"styles.css\",\n shadow: false,\n scoped: true,\n})\nexport class ZFile {\n private icon: HTMLElement;\n\n private ellipsis?: HTMLSpanElement;\n\n private chip?: HTMLZChipElement;\n\n /** File chip id /\n @Prop()\n fileNumber: number;\n\n /* File name /\n @Prop()\n fileName: string;\n\n @State()\n allowPopover = false;\n\n @State()\n popoverVisible = false;\n\n @Element() el: HTMLZFileElement;\n\n /* Emitted when a z-file component is removed from the DOM */\n @Event()\n removeFile: EventEmitter;\n\n private removeFileHandler(): void {\n this.removeFile.emit({fileName: this.fileName});\n this.el.remove();\n }\n\n @Listen(\"mouseover\")\n onMouseOver(): void {\n this.popoverVisible = true;\n }\n\n @Listen(\"mouseleave\")\n onMouseLeave(): void {\n this.popoverVisible = false;\n }\n\n @Listen(\"interactiveIconClick\")\n onInteractiveIconClick(): void {\n this.removeFileHandler();\n }\n\n componentDidLoad(): void {\n if (this.elementHasEllipsis() && window.innerWidth > Breakpoints.TABLET) {\n this.allowPopover = true;\n }\n\n this.icon?.focus?.();\n }\n\n private elementHasEllipsis(): boolean {\n return this.ellipsis.offsetWidth < this.ellipsis.scrollWidth;\n }\n\n render(): HTMLZFileElement {\n return (\n <Host>\n {this.allowPopover && (\n <z-popover\n open={this.popoverVisible}\n position={PopoverPosition.AUTO}\n bindTo={this.chip}\n >\n <span class=\"body-5 tooltip-content\">{this.ellipsis.innerText}</span>\n </z-popover>\n )}\n <z-chip\n ref={(el) => (this.chip = el as HTMLZChipElement)}\n id={`chip-${this.fileNumber}`}\n interactiveIcon=\"multiply-circled\"\n type={ZChipType.DEFAULT}\n >\n <span\n ref={(el) => (this.ellipsis = el as HTMLSpanElement)}\n tabIndex={-1}\n >\n {this.fileName}\n </span>\n </z-chip>\n </Host>\n );\n }\n}\n"]}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"index.stories.js","sourceRoot":"","sources":["~~../../../../../~~src/components/file-upload/z-file/index.stories.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,IAAI,EAAC,MAAM,KAAK,CAAC;AAEzB,OAAO,SAAS,CAAC;AAEjB,eAAe;IACb,KAAK,EAAE,OAAO;IACd,SAAS,EAAE,QAAQ;CACE,CAAC;AAExB,MAAM,CAAC,MAAM,OAAO,GAAG;IACrB,IAAI,EAAE;QACJ,UAAU,EAAE,CAAC;QACb,QAAQ,EAAE,wBAAwB;KACnC;IACD,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CACf,IAAI,CAAA;qBACa,IAAI,CAAC,UAAU;mBACjB,IAAI,CAAC,QAAQ;eACjB;CACY,CAAC","sourcesContent":["import {Meta, StoryObj} from \"@storybook/web-components\";\nimport {html} from \"lit\";\nimport {type ZFile} from \".\";\nimport \"./index\";\n\nexport default {\n title: \"ZFile\",\n component: \"z-file\",\n} satisfies Meta<ZFile>;\n\nexport const Default = {\n args: {\n fileNumber: 1,\n fileName: \"abcdefghilmnopqrst.jpg\",\n },\n render: (args) =>\n html`<z-file\n file-number=\"${args.fileNumber}\"\n file-name=\"${args.fileName}\"\n ></z-file>`,\n} satisfies StoryObj<ZFile>;\n"]}
1	+ {"version":3,"file":"index.stories.js","sourceRoot":"","sources":["../../../../src/components/file-upload/z-file/index.stories.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,IAAI,EAAC,MAAM,KAAK,CAAC;AAEzB,OAAO,SAAS,CAAC;AAEjB,eAAe;IACb,KAAK,EAAE,OAAO;IACd,SAAS,EAAE,QAAQ;CACE,CAAC;AAExB,MAAM,CAAC,MAAM,OAAO,GAAG;IACrB,IAAI,EAAE;QACJ,UAAU,EAAE,CAAC;QACb,QAAQ,EAAE,wBAAwB;KACnC;IACD,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CACf,IAAI,CAAA;qBACa,IAAI,CAAC,UAAU;mBACjB,IAAI,CAAC,QAAQ;eACjB;CACY,CAAC","sourcesContent":["import {Meta, StoryObj} from \"@storybook/web-components\";\nimport {html} from \"lit\";\nimport {type ZFile} from \".\";\nimport \"./index\";\n\nexport default {\n title: \"ZFile\",\n component: \"z-file\",\n} satisfies Meta<ZFile>;\n\nexport const Default = {\n args: {\n fileNumber: 1,\n fileName: \"abcdefghilmnopqrst.jpg\",\n },\n render: (args) =>\n html`<z-file\n file-number=\"${args.fileNumber}\"\n file-name=\"${args.fileName}\"\n ></z-file>`,\n} satisfies StoryObj<ZFile>;\n"]}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/components/file-upload/z-file-upload/index.tsx"],"names":[],"mappings":"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","sourcesContent":["import {Component, Element, Event, EventEmitter, Host, Listen, Method, Prop, State, h} from \"@stencil/core\";\nimport {ButtonVariant, Device, DividerSize, ZFileUploadType} from \"../../../beans\";\nimport {getDevice} from \"../../../utils/utils\";\n\n@Component({\n tag: \"z-file-upload\",\n styleUrl: \"styles.css\",\n shadow: true,\n})\nexport class ZFileUpload {\n /** Prop indicating the file upload type - can be default or dragdrop /\n @Prop({reflect: true})\n type: ZFileUploadType = ZFileUploadType.DEFAULT;\n\n /* Prop indicating the button variant/\n @Prop()\n buttonVariant?: ButtonVariant;\n\n /* Prop indicating the accepted file type: ex \".pdf, .doc, .jpg\" /\n @Prop()\n acceptedFormat?: string;\n\n /* Max file dimension in Megabyte /\n @Prop()\n fileMaxSize?: number;\n\n /* Title /\n @Prop()\n mainTitle?: string;\n\n /* Description /\n @Prop()\n description?: string;\n\n /* Files added by the user /\n @State()\n files: File[] = [];\n\n /* upoload button label /\n @Prop()\n uploadBtnLabel?: string = \"allega\";\n\n /* drag & drop button label /\n @Prop()\n dragAndDropLabel?: string = \"Rilascia i file in questa area per allegarli.\";\n\n /* allowed file message /\n @Prop()\n allowedFilesMessage?: string;\n\n /* upload clickable message /\n @Prop()\n uploadClickableMessage?: string = \"Carica\";\n\n /* upload message /\n @Prop()\n uploadMessage?: string = \"o trascina dal tuo computer\";\n\n /* error modal title /\n @Prop()\n errorModalTitle?: string = \"Errore di caricamento\";\n\n /* error modal message /\n @Prop()\n errorModalMessage?: string;\n\n /* loaded files label /\n @Prop()\n uploadedFilesLabel?: string = \"File appena caricati\";\n\n /* uploaded files history rendering /\n @Prop()\n hasFileSection?: boolean = true;\n\n /* List of files not allowed to be uploaded /\n @State()\n invalidFiles: Map<string, string[]>;\n\n @Element() el: HTMLZFileUploadElement;\n\n private input: HTMLInputElement;\n\n private button: HTMLZButtonElement;\n\n private errorModal: HTMLZModalElement;\n\n private uploadLink: HTMLSpanElement;\n\n private inputAttributes = {\n type: \"file\",\n id: \"file-elem\",\n multiple: true,\n };\n\n /* Listen removeFile event sent from z-file component /\n @Listen(\"removeFile\")\n removeFileListener(e: CustomEvent): void {\n this.removeFileHandler(e.detail);\n }\n\n /* Listen fileDropped event sent from z-dragdrop-area component /\n @Listen(\"fileDropped\")\n fileDroppedListener(e: CustomEvent): void {\n this.input.files = e.detail;\n this.fileInputHandler();\n }\n\n componentDidUpdate(): void {\n this.handleAccessibility();\n this.invalidFiles.size && this.errorModal.focus();\n }\n\n componentWillLoad(): void {\n this.invalidFiles = new Map<string, string[]>();\n }\n\n /* Emitted when user select one or more files /\n @Event()\n fileInput: EventEmitter;\n\n private fileInputHandler(): void {\n if (this.input.files.length) {\n this.invalidFiles = this.checkFiles(Array.from(this.input.files));\n }\n }\n\n /* get array of uploaded files /\n @Method()\n async getFiles(): Promise<File[]> {\n return this.files;\n }\n\n /* remove file from the array */\n @Method()\n async removeFile(fileName: string): Promise<void> {\n this.removeFileHandler(fileName);\n }\n\n private removeFileHandler(fileName: string): void {\n const files = this.files;\n const file = files.find((file) => file.name === fileName);\n if (file) {\n const index = files.indexOf(file);\n if (index >= 0) {\n files.splice(index, 1);\n this.files = [...files];\n }\n }\n }\n\n private getType(): ZFileUploadType {\n if (getDevice() !== Device.DESKTOP && getDevice() !== Device.DESKTOP_WIDE) {\n return ZFileUploadType.DEFAULT;\n }\n\n return this.type;\n }\n\n private handleAccessibility(): void {\n const lastFile = this.el.querySelector(\"z-file:last-child z-chip button\");\n if (this.files.length > 0 && lastFile) {\n (lastFile as HTMLElement).focus();\n } else {\n this.getType() === ZFileUploadType.DEFAULT\n ? this.button.querySelector(\"button\").focus()\n : this.uploadLink.focus();\n }\n }\n\n private checkFiles(files: File[]): Map<string, string[]> {\n const errors = new Map<string, string[]>();\n const sizeErrorString = `supera il limite di ${this.fileMaxSize}MB`;\n const formatErrorString = \" ha un formato non supportato\";\n files.forEach((file: File) => {\n const fileSize = file.size / 1024 / 1024;\n const fileFormatOk = this.acceptedFormat\n .split(\",\")\n .some((ext: string) => file.name.toLowerCase().endsWith(ext.trim()));\n const fileSizeOk = fileSize <= this.fileMaxSize;\n if (fileSizeOk && fileFormatOk) {\n if (!this.files.find((f) => f.name === file.name)) {\n this.files.push(file);\n this.fileInput.emit(file);\n this.input.value = \"\";\n }\n\n return;\n }\n errors.set(file.name, []);\n if (!fileSizeOk) {\n errors.get(file.name).push(sizeErrorString);\n }\n if (!fileFormatOk) {\n errors.get(file.name).push(formatErrorString);\n }\n });\n\n return errors;\n }\n\n private renderTitle(): HTMLElement {\n return <span id=\"title\">{this.mainTitle}</span>;\n }\n\n private renderDescription(cssClass): HTMLElement {\n return <span class={cssClass}>{this.description}</span>;\n }\n\n private renderAllowedFileExtensions(): HTMLElement {\n let fileFormatString = \"\";\n let fileWeightString = \"\";\n\n if (this.acceptedFormat) {\n const fileFormat = this.acceptedFormat\n .split(\", \")\n .map((string) => string.substring(1).toUpperCase())\n .join(\", \");\n fileFormatString = ` nei formati ${fileFormat}`;\n }\n\n if (this.fileMaxSize) {\n fileWeightString = ` per un massimo di ${this.fileMaxSize}MB di peso`;\n }\n\n const finalString = `Puoi allegare file${fileFormatString}${fileWeightString}.`;\n\n return (\n <span class=\"body-3\">\n {this.allowedFilesMessage\n ? this.allowedFilesMessage\n : fileFormatString \|\| fileWeightString\n ? finalString\n : null}\n </span>\n );\n }\n\n private renderFileSection(): HTMLElement {\n if (!this.hasFileSection) {\n return;\n }\n\n return (\n <section class={`files-container ${!this.files.length ? \"hidden\" : \"\"}`}>\n <span class=\"heading-4-sb\">{this.uploadedFilesLabel}</span>\n <div class=\"files-wrapper\">\n <slot name=\"files\" />\n </div>\n <z-divider size={DividerSize.MEDIUM} />\n </section>\n );\n }\n\n private renderInput(): HTMLInputElement {\n return (\n <input\n {...this.inputAttributes}\n onChange={() => this.fileInputHandler()}\n accept={this.acceptedFormat}\n ref={(val) => (this.input = val)}\n />\n );\n }\n\n private renderUploadButton(): unknown[] {\n return [\n this.renderInput(),\n <z-button\n onClick={() => this.input.click()}\n onKeyPress={(e) => {\n if (e.code == \"Space\" \|\| e.code == \"Enter\") {\n e.preventDefault();\n this.input.click();\n }\n }}\n id=\"fileSelect\"\n variant={this.buttonVariant}\n icon=\"upload\"\n ref={(val) => (this.button = val)}\n >\n {this.uploadBtnLabel}\n </z-button>,\n ];\n }\n\n private renderUploadLink(): unknown[] {\n return [\n this.renderInput(),\n <span class=\"body-1 upload-link-text\">\n <span\n tabIndex={0}\n class=\"body-1-sb upload-link\"\n onClick={() => this.input.click()}\n onKeyPress={(e) => {\n if (e.code == \"Space\" \|\| e.code == \"Enter\") {\n e.preventDefault();\n this.input.click();\n }\n }}\n ref={(val) => (this.uploadLink = val)}\n >\n {this.uploadClickableMessage}\n </span>{\" \"}\n {this.uploadMessage}\n </span>,\n ];\n }\n\n private renderDefaultMode(): unknown[] {\n return [\n this.renderDescription(\"body-3-sb\"),\n this.renderAllowedFileExtensions(),\n this.renderFileSection(),\n this.renderUploadButton(),\n ];\n }\n\n private renderDragDropMode(): unknown[] {\n return [\n this.renderFileSection(),\n <z-dragdrop-area drag-and-drop-label={this.dragAndDropLabel}>\n <div class=\"text-container\">\n {this.renderDescription(\"body-1\")}\n {this.renderUploadLink()}\n {this.renderAllowedFileExtensions()}\n </div>\n </z-dragdrop-area>,\n ];\n }\n\n private formatErrorString(key, value): string {\n const bothErrors = value[0] && value[1] ? \" e \" : \"\";\n\n return (\n <span class=\"error-message\">\n Il file <span class=\"file-name\">{key}</span> {value[1] ?? \"\"}\n {bothErrors}\n {value[0] ?? \"\"}.\n </span>\n );\n }\n\n private handleErrorModalContent(): HTMLDivElement {\n return (\n <div slot=\"modalContent\">\n <div class=\"modal-wrapper\">\n <div class=\"files\">\n {this.errorModalMessage ? (\n <span class=\"body-3\">{this.errorModalMessage}</span>\n ) : (\n Array.from(this.invalidFiles).map(([key, value]) => {\n return <span class=\"body-3\">{this.formatErrorString(key, value)}</span>;\n })\n )}\n </div>\n </div>\n </div>\n );\n }\n\n render(): HTMLZFileUploadElement {\n return (\n <Host>\n <div class={`container ${this.getType()}`}>\n {this.mainTitle && this.renderTitle()}\n {this.getType() == ZFileUploadType.DEFAULT ? this.renderDefaultMode() : this.renderDragDropMode()}\n </div>\n {!!this.invalidFiles.size && (\n <z-modal\n modalid={`file-upload-${this.type}-error-modal`}\n tabIndex={0}\n ref={(val) => (this.errorModal = val)}\n modaltitle={this.errorModalTitle}\n onModalClose={() => (this.invalidFiles = new Map<string, string[]>())}\n onModalBackgroundClick={() => (this.invalidFiles = new Map<string, string[]>())}\n >\n {this.handleErrorModalContent()}\n </z-modal>\n )}\n </Host>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/file-upload/z-file-upload/index.tsx"],"names":[],"mappings":"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","sourcesContent":["import {Component, Element, Event, EventEmitter, Host, Listen, Method, Prop, State, h} from \"@stencil/core\";\nimport {ButtonVariant, Device, DividerSize, ZFileUploadType} from \"../../../beans\";\nimport {getDevice} from \"../../../utils/utils\";\n\n@Component({\n tag: \"z-file-upload\",\n styleUrl: \"styles.css\",\n shadow: true,\n})\nexport class ZFileUpload {\n /** Prop indicating the file upload type - can be default or dragdrop /\n @Prop({reflect: true})\n type: ZFileUploadType = ZFileUploadType.DEFAULT;\n\n /* Prop indicating the button variant/\n @Prop()\n buttonVariant?: ButtonVariant;\n\n /* Prop indicating the accepted file type: ex \".pdf, .doc, .jpg\" /\n @Prop()\n acceptedFormat?: string;\n\n /* Max file dimension in Megabyte /\n @Prop()\n fileMaxSize?: number;\n\n /* Title /\n @Prop()\n mainTitle?: string;\n\n /* Description /\n @Prop()\n description?: string;\n\n /* Files added by the user /\n @State()\n files: File[] = [];\n\n /* upoload button label /\n @Prop()\n uploadBtnLabel?: string = \"allega\";\n\n /* drag & drop button label /\n @Prop()\n dragAndDropLabel?: string = \"Rilascia i file in questa area per allegarli.\";\n\n /* allowed file message /\n @Prop()\n allowedFilesMessage?: string;\n\n /* upload clickable message /\n @Prop()\n uploadClickableMessage?: string = \"Carica\";\n\n /* upload message /\n @Prop()\n uploadMessage?: string = \"o trascina dal tuo computer\";\n\n /* error modal title /\n @Prop()\n errorModalTitle?: string = \"Errore di caricamento\";\n\n /* error modal message /\n @Prop()\n errorModalMessage?: string;\n\n /* loaded files label /\n @Prop()\n uploadedFilesLabel?: string = \"File appena caricati\";\n\n /* uploaded files history rendering /\n @Prop()\n hasFileSection?: boolean = true;\n\n /* List of files not allowed to be uploaded /\n @State()\n invalidFiles: Map<string, string[]>;\n\n @Element() el: HTMLZFileUploadElement;\n\n private input: HTMLInputElement;\n\n private button: HTMLZButtonElement;\n\n private errorModal: HTMLZModalElement;\n\n private uploadLink: HTMLSpanElement;\n\n private inputAttributes = {\n type: \"file\",\n id: \"file-elem\",\n multiple: true,\n };\n\n /* Listen removeFile event sent from z-file component /\n @Listen(\"removeFile\")\n removeFileListener(e: CustomEvent): void {\n this.removeFileHandler(e.detail);\n }\n\n /* Listen fileDropped event sent from z-dragdrop-area component /\n @Listen(\"fileDropped\")\n fileDroppedListener(e: CustomEvent): void {\n this.input.files = e.detail;\n this.fileInputHandler();\n }\n\n componentDidUpdate(): void {\n this.handleAccessibility();\n this.invalidFiles.size && this.errorModal.focus();\n }\n\n componentWillLoad(): void {\n this.invalidFiles = new Map<string, string[]>();\n }\n\n /* Emitted when user select one or more files /\n @Event()\n fileInput: EventEmitter;\n\n private fileInputHandler(): void {\n if (this.input.files.length) {\n this.invalidFiles = this.checkFiles(Array.from(this.input.files));\n }\n }\n\n /* get array of uploaded files /\n @Method()\n async getFiles(): Promise<File[]> {\n return this.files;\n }\n\n /* remove file from the array */\n @Method()\n async removeFile(fileName: string): Promise<void> {\n this.removeFileHandler(fileName);\n }\n\n private removeFileHandler(fileName: string): void {\n const files = this.files;\n const file = files.find((file) => file.name === fileName);\n if (file) {\n const index = files.indexOf(file);\n if (index >= 0) {\n files.splice(index, 1);\n this.files = [...files];\n }\n }\n }\n\n private getType(): ZFileUploadType {\n if (getDevice() !== Device.DESKTOP && getDevice() !== Device.DESKTOP_WIDE) {\n return ZFileUploadType.DEFAULT;\n }\n\n return this.type;\n }\n\n private handleAccessibility(): void {\n const lastFile = this.el.querySelector(\"z-file:last-child z-chip button\");\n if (this.files.length > 0 && lastFile) {\n (lastFile as HTMLElement).focus();\n } else {\n this.getType() === ZFileUploadType.DEFAULT\n ? this.button.querySelector(\"button\").focus()\n : this.uploadLink.focus();\n }\n }\n\n private checkFiles(files: File[]): Map<string, string[]> {\n const errors = new Map<string, string[]>();\n const sizeErrorString = `supera il limite di ${this.fileMaxSize}MB`;\n const formatErrorString = \" ha un formato non supportato\";\n files.forEach((file: File) => {\n const fileSize = file.size / 1024 / 1024;\n const fileFormatOk = this.acceptedFormat\n .split(\",\")\n .some((ext: string) => file.name.toLowerCase().endsWith(ext.trim()));\n const fileSizeOk = fileSize <= this.fileMaxSize;\n if (fileSizeOk && fileFormatOk) {\n if (!this.files.find((f) => f.name === file.name)) {\n this.files.push(file);\n this.fileInput.emit(file);\n this.input.value = \"\";\n }\n\n return;\n }\n errors.set(file.name, []);\n if (!fileSizeOk) {\n errors.get(file.name).push(sizeErrorString);\n }\n if (!fileFormatOk) {\n errors.get(file.name).push(formatErrorString);\n }\n });\n\n return errors;\n }\n\n private renderTitle(): HTMLElement {\n return <span id=\"title\">{this.mainTitle}</span>;\n }\n\n private renderDescription(cssClass): HTMLElement {\n return <span class={cssClass}>{this.description}</span>;\n }\n\n private renderAllowedFileExtensions(): HTMLElement {\n let fileFormatString = \"\";\n let fileWeightString = \"\";\n\n if (this.acceptedFormat) {\n const fileFormat = this.acceptedFormat\n .split(\", \")\n .map((string) => string.substring(1).toUpperCase())\n .join(\", \");\n fileFormatString = ` nei formati ${fileFormat}`;\n }\n\n if (this.fileMaxSize) {\n fileWeightString = ` per un massimo di ${this.fileMaxSize}MB di peso`;\n }\n\n const finalString = `Puoi allegare file${fileFormatString}${fileWeightString}.`;\n\n return (\n <span class=\"body-3\">\n {this.allowedFilesMessage\n ? this.allowedFilesMessage\n : fileFormatString \|\| fileWeightString\n ? finalString\n : null}\n </span>\n );\n }\n\n private renderFileSection(): HTMLElement {\n if (!this.hasFileSection) {\n return;\n }\n\n return (\n <section class={`files-container ${!this.files.length ? \"hidden\" : \"\"}`}>\n <span class=\"heading-4-sb\">{this.uploadedFilesLabel}</span>\n <div class=\"files-wrapper\">\n <slot name=\"files\" />\n </div>\n <z-divider size={DividerSize.MEDIUM} />\n </section>\n );\n }\n\n private renderInput(): HTMLInputElement {\n return (\n <input\n {...this.inputAttributes}\n onChange={() => this.fileInputHandler()}\n accept={this.acceptedFormat}\n ref={(val) => (this.input = val)}\n />\n );\n }\n\n private renderUploadButton(): unknown[] {\n return [\n this.renderInput(),\n <z-button\n onClick={() => this.input.click()}\n onKeyPress={(e) => {\n if (e.code == \"Space\" \|\| e.code == \"Enter\") {\n e.preventDefault();\n this.input.click();\n }\n }}\n id=\"fileSelect\"\n variant={this.buttonVariant}\n icon=\"upload\"\n ref={(val) => (this.button = val)}\n >\n {this.uploadBtnLabel}\n </z-button>,\n ];\n }\n\n private renderUploadLink(): unknown[] {\n return [\n this.renderInput(),\n <span class=\"body-1 upload-link-text\">\n <span\n tabIndex={0}\n class=\"body-1-sb upload-link\"\n onClick={() => this.input.click()}\n onKeyPress={(e) => {\n if (e.code == \"Space\" \|\| e.code == \"Enter\") {\n e.preventDefault();\n this.input.click();\n }\n }}\n ref={(val) => (this.uploadLink = val)}\n >\n {this.uploadClickableMessage}\n </span>{\" \"}\n {this.uploadMessage}\n </span>,\n ];\n }\n\n private renderDefaultMode(): unknown[] {\n return [\n this.renderDescription(\"body-3-sb\"),\n this.renderAllowedFileExtensions(),\n this.renderFileSection(),\n this.renderUploadButton(),\n ];\n }\n\n private renderDragDropMode(): unknown[] {\n return [\n this.renderFileSection(),\n <z-dragdrop-area drag-and-drop-label={this.dragAndDropLabel}>\n <div class=\"text-container\">\n {this.renderDescription(\"body-1\")}\n {this.renderUploadLink()}\n {this.renderAllowedFileExtensions()}\n </div>\n </z-dragdrop-area>,\n ];\n }\n\n private formatErrorString(key, value): string {\n const bothErrors = value[0] && value[1] ? \" e \" : \"\";\n\n return (\n <span class=\"error-message\">\n Il file <span class=\"file-name\">{key}</span> {value[1] ?? \"\"}\n {bothErrors}\n {value[0] ?? \"\"}.\n </span>\n );\n }\n\n private handleErrorModalContent(): HTMLDivElement {\n return (\n <div slot=\"modalContent\">\n <div class=\"modal-wrapper\">\n <div class=\"files\">\n {this.errorModalMessage ? (\n <span class=\"body-3\">{this.errorModalMessage}</span>\n ) : (\n Array.from(this.invalidFiles).map(([key, value]) => {\n return <span class=\"body-3\">{this.formatErrorString(key, value)}</span>;\n })\n )}\n </div>\n </div>\n </div>\n );\n }\n\n render(): HTMLZFileUploadElement {\n return (\n <Host>\n <div class={`container ${this.getType()}`}>\n {this.mainTitle && this.renderTitle()}\n {this.getType() == ZFileUploadType.DEFAULT ? this.renderDefaultMode() : this.renderDragDropMode()}\n </div>\n {!!this.invalidFiles.size && (\n <z-modal\n modalid={`file-upload-${this.type}-error-modal`}\n tabIndex={0}\n ref={(val) => (this.errorModal = val)}\n modaltitle={this.errorModalTitle}\n onModalClose={() => (this.invalidFiles = new Map<string, string[]>())}\n onModalBackgroundClick={() => (this.invalidFiles = new Map<string, string[]>())}\n >\n {this.handleErrorModalContent()}\n </z-modal>\n )}\n </Host>\n );\n }\n}\n"]}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"index.stories.js","sourceRoot":"","sources":["~~../../../../../~~src/components/file-upload/z-file-upload/index.stories.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,IAAI,EAAC,MAAM,KAAK,CAAC;AAEzB,OAAO,EAAC,aAAa,EAAE,eAAe,EAAC,MAAM,gBAAgB,CAAC;AAC9D,OAAO,SAAS,CAAC;AAEjB,MAAM,SAAS,GAAG;IAChB,KAAK,EAAE,aAAa;IACpB,SAAS,EAAE,eAAe;IAC1B,QAAQ,EAAE;QACR,IAAI,EAAE;YACJ,OAAO,EAAE,MAAM,CAAC,MAAM,CAAC,eAAe,CAAC;YACvC,OAAO,EAAE;gBACP,IAAI,EAAE,cAAc;aACrB;SACF;QACD,aAAa,EAAE;YACb,OAAO,EAAE,MAAM,CAAC,MAAM,CAAC,aAAa,CAAC;YACrC,OAAO,EAAE;gBACP,IAAI,EAAE,cAAc;aACrB;SACF;KACF;IACD,IAAI,EAAE;QACJ,WAAW,EAAE,EAAE;QACf,cAAc,EAAE,+BAA+B;QAC/C,SAAS,EAAE,gBAAgB;QAC3B,WAAW,EAAE,6DAA6D;QAC1E,cAAc,EAAE,QAAQ;QACxB,cAAc,EAAE,IAAI;KACrB;CAC0B,CAAC;AAE9B,eAAe,SAAS,CAAC;AAIzB,MAAM,CAAC,MAAM,OAAO,GAAG;IACrB,IAAI,EAAE;QACJ,aAAa,EAAE,aAAa,CAAC,OAAO;KACrC;IACD,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CACf,IAAI,CAAA;;;;;eAKO,eAAe,CAAC,OAAO;0BACZ,IAAI,CAAC,cAAc;uBACtB,IAAI,CAAC,WAAW;yBACd,IAAI,CAAC,aAAa;uBACpB,IAAI,CAAC,WAAW;0BACb,IAAI,CAAC,cAAc;qBACxB,IAAI,CAAC,SAAS;0BACT,IAAI,CAAC,cAAc;;;;;;;;;;;;;;;gBAe7B;CACC,CAAC;AAElB,MAAM,CAAC,MAAM,QAAQ,GAAG;IACtB,IAAI,EAAE;QACJ,gBAAgB,EAAE,+CAA+C;KAClE;IACD,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CACf,IAAI,CAAA;;;;;;eAMO,eAAe,CAAC,QAAQ;0BACb,IAAI,CAAC,cAAc;uBACtB,IAAI,CAAC,WAAW;uBAChB,IAAI,CAAC,WAAW;0BACb,IAAI,CAAC,cAAc;qBACxB,IAAI,CAAC,SAAS;4BACP,IAAI,CAAC,gBAAgB;;;;;;;;;;;;;gBAajC;CACC,CAAC;AAElB,MAAM,CAAC,MAAM,eAAe,GAAG;IAC7B,IAAI,EAAE;QACJ,SAAS,EAAE,eAAe;QAC1B,WAAW,EAAE,uDAAuD;QACpE,cAAc,EAAE,QAAQ;QACxB,gBAAgB,EAAE,qBAAqB;QACvC,mBAAmB,EAAE,mFAAmF;QACxG,sBAAsB,EAAE,MAAM;QAC9B,aAAa,EAAE,4BAA4B;QAC3C,eAAe,EAAE,eAAe;QAChC,iBAAiB,EAAE,mDAAmD;QACtE,kBAAkB,EAAE,gBAAgB;KACrC;IACD,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CACf,IAAI,CAAA;;;;;;eAMO,eAAe,CAAC,QAAQ;0BACb,IAAI,CAAC,cAAc;uBACtB,IAAI,CAAC,WAAW;uBAChB,IAAI,CAAC,WAAW;0BACb,IAAI,CAAC,cAAc;qBACxB,IAAI,CAAC,SAAS;4BACP,IAAI,CAAC,gBAAgB;+BAClB,IAAI,CAAC,mBAAmB;kCACrB,IAAI,CAAC,sBAAsB;yBACpC,IAAI,CAAC,aAAa;2BAChB,IAAI,CAAC,eAAe;6BAClB,IAAI,CAAC,iBAAiB;8BACrB,IAAI,CAAC,kBAAkB;0BAC3B,IAAI,CAAC,cAAc;;;;;;;;;;;;;gBAa7B;CACC,CAAC","sourcesContent":["import {Meta, StoryObj} from \"@storybook/web-components\";\nimport {html} from \"lit\";\nimport {type ZFileUpload} from \".\";\nimport {ButtonVariant, ZFileUploadType} from \"../../../beans\";\nimport \"./index\";\n\nconst StoryMeta = {\n title: \"ZFileUpload\",\n component: \"z-file-upload\",\n argTypes: {\n type: {\n options: Object.values(ZFileUploadType),\n control: {\n type: \"inline-radio\",\n },\n },\n buttonVariant: {\n options: Object.values(ButtonVariant),\n control: {\n type: \"inline-radio\",\n },\n },\n },\n args: {\n fileMaxSize: 50,\n acceptedFormat: \".pdf, .doc, .tiff, .png, .jpg\",\n mainTitle: \"Allega un file\",\n description: \"Vuoi allegare un file per chiarire meglio la tua richiesta?\",\n uploadBtnLabel: \"allega\",\n hasFileSection: true,\n },\n} satisfies Meta<ZFileUpload>;\n\nexport default StoryMeta;\n\ntype Story = StoryObj<ZFileUpload>;\n\nexport const Default = {\n args: {\n buttonVariant: ButtonVariant.PRIMARY,\n },\n render: (args) =>\n html`<h4 class=\"heading-4\">\n This story embeds a piece of js script to allow the component to work properly. Please refresh the page before\n using it!\n </h4>\n <z-file-upload\n type=${ZFileUploadType.DEFAULT}\n .hasFileSection=${args.hasFileSection}\n description=\"${args.description}\"\n .buttonVariant=${args.buttonVariant}\n .fileMaxSize=${args.fileMaxSize}\n .acceptedFormat=${args.acceptedFormat}\n .mainTitle=${args.mainTitle}\n .uploadBtnLabel=${args.uploadBtnLabel}\n >\n </z-file-upload>\n <script>\n let uploaderDefault = document.querySelector(\"z-file-upload\");\n let fileNumber = 0;\n document.addEventListener(\"fileInput\", (e) => {\n fileNumber++;\n const item = e.detail;\n const chip = document.createElement(\"Z-FILE\");\n chip.setAttribute(\"slot\", \"files\");\n chip.setAttribute(\"file-number\", fileNumber);\n chip.setAttribute(\"file-name\", item.name);\n uploaderDefault.appendChild(chip);\n });\n </script>`,\n} satisfies Story;\n\nexport const Dragdrop = {\n args: {\n dragAndDropLabel: \"Rilascia i file in questa area per allegarli.\",\n },\n render: (args) =>\n html`<h4 class=\"heading-4\">\n This story embeds a piece of js script to allow the component to work properly. Please refresh the page before\n using it!\n </h4>\n <br />\n <z-file-upload\n type=${ZFileUploadType.DRAGDROP}\n .hasFileSection=${args.hasFileSection}\n description=\"${args.description}\"\n .fileMaxSize=${args.fileMaxSize}\n .acceptedFormat=${args.acceptedFormat}\n .mainTitle=${args.mainTitle}\n .dragAndDropLabel=${args.dragAndDropLabel}\n >\n </z-file-upload>\n <script>\n const uploaderDragdrop = document.querySelector(\"z-file-upload\");\n document.addEventListener(\"fileInput\", (e) => {\n const item = e.detail;\n const chip = document.createElement(\"Z-FILE\");\n chip.setAttribute(\"slot\", \"files\");\n chip.setAttribute(\"filetype\", item.type);\n chip.setAttribute(\"file-name\", item.name);\n uploaderDragdrop.appendChild(chip);\n });\n </script>`,\n} satisfies Story;\n\nexport const DragdropEnglish = {\n args: {\n mainTitle: \"Attach a file\",\n description: \"Do you want to attach a file to clarify your request?\",\n uploadBtnLabel: \"Attach\",\n dragAndDropLabel: \"Drop the image here\",\n allowedFilesMessage: \"You can upload files in the format PDF, DOC, TIFF, PNG, JPG for a maximum of 50MB\",\n uploadClickableMessage: \"Load\",\n uploadMessage: \"or drag from your computer\",\n errorModalTitle: \"Loading error\",\n errorModalMessage: \"The file does not respect the allowed parameters.\",\n uploadedFilesLabel: \"Uploaded files\",\n },\n render: (args) =>\n html`<h4 class=\"heading-4\">\n This story embeds a piece of js script to allow the component to work properly. Please refresh the page before\n using it!\n </h4>\n <br />\n <z-file-upload\n type=${ZFileUploadType.DRAGDROP}\n .hasFileSection=${args.hasFileSection}\n description=\"${args.description}\"\n .fileMaxSize=${args.fileMaxSize}\n .acceptedFormat=${args.acceptedFormat}\n .mainTitle=${args.mainTitle}\n .dragAndDropLabel=${args.dragAndDropLabel}\n .allowedFilesMessage=${args.allowedFilesMessage}\n .uploadClickableMessage=${args.uploadClickableMessage}\n .uploadMessage=${args.uploadMessage}\n .errorModalTitle=${args.errorModalTitle}\n .errorModalMessage=${args.errorModalMessage}\n .uploadedFilesLabel=${args.uploadedFilesLabel}\n .uploadBtnLabel=${args.uploadBtnLabel}\n >\n </z-file-upload>\n <script>\n const uploaderDragdrop = document.querySelector(\"z-file-upload\");\n document.addEventListener(\"fileInput\", (e) => {\n const item = e.detail;\n const chip = document.createElement(\"Z-FILE\");\n chip.setAttribute(\"slot\", \"files\");\n chip.setAttribute(\"filetype\", item.type);\n chip.setAttribute(\"file-name\", item.name);\n uploaderDragdrop.appendChild(chip);\n });\n </script>`,\n} satisfies Story;\n"]}
1	+ {"version":3,"file":"index.stories.js","sourceRoot":"","sources":["../../../../src/components/file-upload/z-file-upload/index.stories.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,IAAI,EAAC,MAAM,KAAK,CAAC;AAEzB,OAAO,EAAC,aAAa,EAAE,eAAe,EAAC,MAAM,gBAAgB,CAAC;AAC9D,OAAO,SAAS,CAAC;AAEjB,MAAM,SAAS,GAAG;IAChB,KAAK,EAAE,aAAa;IACpB,SAAS,EAAE,eAAe;IAC1B,QAAQ,EAAE;QACR,IAAI,EAAE;YACJ,OAAO,EAAE,MAAM,CAAC,MAAM,CAAC,eAAe,CAAC;YACvC,OAAO,EAAE;gBACP,IAAI,EAAE,cAAc;aACrB;SACF;QACD,aAAa,EAAE;YACb,OAAO,EAAE,MAAM,CAAC,MAAM,CAAC,aAAa,CAAC;YACrC,OAAO,EAAE;gBACP,IAAI,EAAE,cAAc;aACrB;SACF;KACF;IACD,IAAI,EAAE;QACJ,WAAW,EAAE,EAAE;QACf,cAAc,EAAE,+BAA+B;QAC/C,SAAS,EAAE,gBAAgB;QAC3B,WAAW,EAAE,6DAA6D;QAC1E,cAAc,EAAE,QAAQ;QACxB,cAAc,EAAE,IAAI;KACrB;CAC0B,CAAC;AAE9B,eAAe,SAAS,CAAC;AAIzB,MAAM,CAAC,MAAM,OAAO,GAAG;IACrB,IAAI,EAAE;QACJ,aAAa,EAAE,aAAa,CAAC,OAAO;KACrC;IACD,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CACf,IAAI,CAAA;;;;;eAKO,eAAe,CAAC,OAAO;0BACZ,IAAI,CAAC,cAAc;uBACtB,IAAI,CAAC,WAAW;yBACd,IAAI,CAAC,aAAa;uBACpB,IAAI,CAAC,WAAW;0BACb,IAAI,CAAC,cAAc;qBACxB,IAAI,CAAC,SAAS;0BACT,IAAI,CAAC,cAAc;;;;;;;;;;;;;;;gBAe7B;CACC,CAAC;AAElB,MAAM,CAAC,MAAM,QAAQ,GAAG;IACtB,IAAI,EAAE;QACJ,gBAAgB,EAAE,+CAA+C;KAClE;IACD,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CACf,IAAI,CAAA;;;;;;eAMO,eAAe,CAAC,QAAQ;0BACb,IAAI,CAAC,cAAc;uBACtB,IAAI,CAAC,WAAW;uBAChB,IAAI,CAAC,WAAW;0BACb,IAAI,CAAC,cAAc;qBACxB,IAAI,CAAC,SAAS;4BACP,IAAI,CAAC,gBAAgB;;;;;;;;;;;;;gBAajC;CACC,CAAC;AAElB,MAAM,CAAC,MAAM,eAAe,GAAG;IAC7B,IAAI,EAAE;QACJ,SAAS,EAAE,eAAe;QAC1B,WAAW,EAAE,uDAAuD;QACpE,cAAc,EAAE,QAAQ;QACxB,gBAAgB,EAAE,qBAAqB;QACvC,mBAAmB,EAAE,mFAAmF;QACxG,sBAAsB,EAAE,MAAM;QAC9B,aAAa,EAAE,4BAA4B;QAC3C,eAAe,EAAE,eAAe;QAChC,iBAAiB,EAAE,mDAAmD;QACtE,kBAAkB,EAAE,gBAAgB;KACrC;IACD,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CACf,IAAI,CAAA;;;;;;eAMO,eAAe,CAAC,QAAQ;0BACb,IAAI,CAAC,cAAc;uBACtB,IAAI,CAAC,WAAW;uBAChB,IAAI,CAAC,WAAW;0BACb,IAAI,CAAC,cAAc;qBACxB,IAAI,CAAC,SAAS;4BACP,IAAI,CAAC,gBAAgB;+BAClB,IAAI,CAAC,mBAAmB;kCACrB,IAAI,CAAC,sBAAsB;yBACpC,IAAI,CAAC,aAAa;2BAChB,IAAI,CAAC,eAAe;6BAClB,IAAI,CAAC,iBAAiB;8BACrB,IAAI,CAAC,kBAAkB;0BAC3B,IAAI,CAAC,cAAc;;;;;;;;;;;;;gBAa7B;CACC,CAAC","sourcesContent":["import {Meta, StoryObj} from \"@storybook/web-components\";\nimport {html} from \"lit\";\nimport {type ZFileUpload} from \".\";\nimport {ButtonVariant, ZFileUploadType} from \"../../../beans\";\nimport \"./index\";\n\nconst StoryMeta = {\n title: \"ZFileUpload\",\n component: \"z-file-upload\",\n argTypes: {\n type: {\n options: Object.values(ZFileUploadType),\n control: {\n type: \"inline-radio\",\n },\n },\n buttonVariant: {\n options: Object.values(ButtonVariant),\n control: {\n type: \"inline-radio\",\n },\n },\n },\n args: {\n fileMaxSize: 50,\n acceptedFormat: \".pdf, .doc, .tiff, .png, .jpg\",\n mainTitle: \"Allega un file\",\n description: \"Vuoi allegare un file per chiarire meglio la tua richiesta?\",\n uploadBtnLabel: \"allega\",\n hasFileSection: true,\n },\n} satisfies Meta<ZFileUpload>;\n\nexport default StoryMeta;\n\ntype Story = StoryObj<ZFileUpload>;\n\nexport const Default = {\n args: {\n buttonVariant: ButtonVariant.PRIMARY,\n },\n render: (args) =>\n html`<h4 class=\"heading-4\">\n This story embeds a piece of js script to allow the component to work properly. Please refresh the page before\n using it!\n </h4>\n <z-file-upload\n type=${ZFileUploadType.DEFAULT}\n .hasFileSection=${args.hasFileSection}\n description=\"${args.description}\"\n .buttonVariant=${args.buttonVariant}\n .fileMaxSize=${args.fileMaxSize}\n .acceptedFormat=${args.acceptedFormat}\n .mainTitle=${args.mainTitle}\n .uploadBtnLabel=${args.uploadBtnLabel}\n >\n </z-file-upload>\n <script>\n let uploaderDefault = document.querySelector(\"z-file-upload\");\n let fileNumber = 0;\n document.addEventListener(\"fileInput\", (e) => {\n fileNumber++;\n const item = e.detail;\n const chip = document.createElement(\"Z-FILE\");\n chip.setAttribute(\"slot\", \"files\");\n chip.setAttribute(\"file-number\", fileNumber);\n chip.setAttribute(\"file-name\", item.name);\n uploaderDefault.appendChild(chip);\n });\n </script>`,\n} satisfies Story;\n\nexport const Dragdrop = {\n args: {\n dragAndDropLabel: \"Rilascia i file in questa area per allegarli.\",\n },\n render: (args) =>\n html`<h4 class=\"heading-4\">\n This story embeds a piece of js script to allow the component to work properly. Please refresh the page before\n using it!\n </h4>\n <br />\n <z-file-upload\n type=${ZFileUploadType.DRAGDROP}\n .hasFileSection=${args.hasFileSection}\n description=\"${args.description}\"\n .fileMaxSize=${args.fileMaxSize}\n .acceptedFormat=${args.acceptedFormat}\n .mainTitle=${args.mainTitle}\n .dragAndDropLabel=${args.dragAndDropLabel}\n >\n </z-file-upload>\n <script>\n const uploaderDragdrop = document.querySelector(\"z-file-upload\");\n document.addEventListener(\"fileInput\", (e) => {\n const item = e.detail;\n const chip = document.createElement(\"Z-FILE\");\n chip.setAttribute(\"slot\", \"files\");\n chip.setAttribute(\"filetype\", item.type);\n chip.setAttribute(\"file-name\", item.name);\n uploaderDragdrop.appendChild(chip);\n });\n </script>`,\n} satisfies Story;\n\nexport const DragdropEnglish = {\n args: {\n mainTitle: \"Attach a file\",\n description: \"Do you want to attach a file to clarify your request?\",\n uploadBtnLabel: \"Attach\",\n dragAndDropLabel: \"Drop the image here\",\n allowedFilesMessage: \"You can upload files in the format PDF, DOC, TIFF, PNG, JPG for a maximum of 50MB\",\n uploadClickableMessage: \"Load\",\n uploadMessage: \"or drag from your computer\",\n errorModalTitle: \"Loading error\",\n errorModalMessage: \"The file does not respect the allowed parameters.\",\n uploadedFilesLabel: \"Uploaded files\",\n },\n render: (args) =>\n html`<h4 class=\"heading-4\">\n This story embeds a piece of js script to allow the component to work properly. Please refresh the page before\n using it!\n </h4>\n <br />\n <z-file-upload\n type=${ZFileUploadType.DRAGDROP}\n .hasFileSection=${args.hasFileSection}\n description=\"${args.description}\"\n .fileMaxSize=${args.fileMaxSize}\n .acceptedFormat=${args.acceptedFormat}\n .mainTitle=${args.mainTitle}\n .dragAndDropLabel=${args.dragAndDropLabel}\n .allowedFilesMessage=${args.allowedFilesMessage}\n .uploadClickableMessage=${args.uploadClickableMessage}\n .uploadMessage=${args.uploadMessage}\n .errorModalTitle=${args.errorModalTitle}\n .errorModalMessage=${args.errorModalMessage}\n .uploadedFilesLabel=${args.uploadedFilesLabel}\n .uploadBtnLabel=${args.uploadBtnLabel}\n >\n </z-file-upload>\n <script>\n const uploaderDragdrop = document.querySelector(\"z-file-upload\");\n document.addEventListener(\"fileInput\", (e) => {\n const item = e.detail;\n const chip = document.createElement(\"Z-FILE\");\n chip.setAttribute(\"slot\", \"files\");\n chip.setAttribute(\"filetype\", item.type);\n chip.setAttribute(\"file-name\", item.name);\n uploaderDragdrop.appendChild(chip);\n });\n </script>`,\n} satisfies Story;\n"]}

package/dist/collection/components/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","sourceRoot":"","sources":["~~../../../~~src/components/index.ts"],"names":[],"mappings":"AAAA,EAAE;AACF,mBAAmB;AACnB,EAAE;AACF,oEAAoE;AACpE,iDAAiD;AACjD,EAAE;AACF,gBAAgB;AAChB,EAAE","sourcesContent":["//\n// Temp workaround:\n//\n// Empty file to prevent errors when importing beans in stencil apps\n// Stencil apps with React bindings will not work\n//\n// Must be fixed\n//\n"]}
1	+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA,EAAE;AACF,mBAAmB;AACnB,EAAE;AACF,oEAAoE;AACpE,iDAAiD;AACjD,EAAE;AACF,gBAAgB;AAChB,EAAE","sourcesContent":["//\n// Temp workaround:\n//\n// Empty file to prevent errors when importing beans in stencil apps\n// Stencil apps with React bindings will not work\n//\n// Must be fixed\n//\n"]}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","sourceRoot":"","sources":["~~../../../../../~~src/components/list/z-list/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAE,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAC,MAAM,eAAe,CAAC;AAChE,OAAO,EAAC,QAAQ,EAAE,QAAQ,EAAC,MAAM,gBAAgB,CAAC;AAOlD,MAAM,OAAO,KAAK;;oBAOE,QAAQ,CAAC,MAAM;wBAMX,QAAQ,CAAC,IAAI;oBAM5B,MAAM;;IAEL,mBAAmB;QACzB,MAAM,QAAQ,GAAG,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC;QACpC,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,QAAQ,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE,CAAC;YACzC,QAAQ,CAAC,CAAC,CAAC,CAAC,YAAY,CAAC,MAAM,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC;YAC5C,QAAQ,CAAC,CAAC,CAAC,CAAC,YAAY,CAAC,WAAW,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC;YACrD,QAAQ,CAAC,CAAC,CAAC,CAAC,YAAY,CAAC,uBAAuB,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,QAAQ,EAAE,CAAC,CAAC;QACxE,CAAC;IACH,CAAC;IAED,gBAAgB;QACd,IAAI,CAAC,mBAAmB,EAAE,CAAC;IAC7B,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACH,8DAAQ,CACH,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {Component, Element, Host, Prop, h} from \"@stencil/core\";\nimport {ListSize, ListType} from \"../../../beans\";\n\n@Component({\n tag: \"z-list\",\n styleUrl: \"styles.css\",\n shadow: true,\n})\nexport class ZList {\n @Element() host: HTMLZListElement;\n\n /*\n [optional] Sets size of inside elements.\n /\n @Prop({reflect: true})\n size?: ListSize = ListSize.MEDIUM;\n\n /\n [optional] type of the list marker for each element\n /\n @Prop({reflect: true})\n listType?: ListType = ListType.NONE;\n\n /\n Sets role of the element.\n */\n @Prop({reflect: true})\n role = \"list\";\n\n private setChildrenSizeType(): void {\n const children = this.host.children;\n for (let i = 0; i < children.length; i++) {\n children[i].setAttribute(\"size\", this.size);\n children[i].setAttribute(\"list-type\", this.listType);\n children[i].setAttribute(\"list-element-position\", (i + 1).toString());\n }\n }\n\n componentDidLoad(): void {\n this.setChildrenSizeType();\n }\n\n render(): HTMLZListElement {\n return (\n <Host>\n <slot />\n </Host>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/list/z-list/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAE,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAC,MAAM,eAAe,CAAC;AAChE,OAAO,EAAC,QAAQ,EAAE,QAAQ,EAAC,MAAM,gBAAgB,CAAC;AAOlD,MAAM,OAAO,KAAK;;oBAOE,QAAQ,CAAC,MAAM;wBAMX,QAAQ,CAAC,IAAI;oBAM5B,MAAM;;IAEL,mBAAmB;QACzB,MAAM,QAAQ,GAAG,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC;QACpC,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,QAAQ,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE,CAAC;YACzC,QAAQ,CAAC,CAAC,CAAC,CAAC,YAAY,CAAC,MAAM,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC;YAC5C,QAAQ,CAAC,CAAC,CAAC,CAAC,YAAY,CAAC,WAAW,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC;YACrD,QAAQ,CAAC,CAAC,CAAC,CAAC,YAAY,CAAC,uBAAuB,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,QAAQ,EAAE,CAAC,CAAC;QACxE,CAAC;IACH,CAAC;IAED,gBAAgB;QACd,IAAI,CAAC,mBAAmB,EAAE,CAAC;IAC7B,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACH,8DAAQ,CACH,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {Component, Element, Host, Prop, h} from \"@stencil/core\";\nimport {ListSize, ListType} from \"../../../beans\";\n\n@Component({\n tag: \"z-list\",\n styleUrl: \"styles.css\",\n shadow: true,\n})\nexport class ZList {\n @Element() host: HTMLZListElement;\n\n /*\n [optional] Sets size of inside elements.\n /\n @Prop({reflect: true})\n size?: ListSize = ListSize.MEDIUM;\n\n /\n [optional] type of the list marker for each element\n /\n @Prop({reflect: true})\n listType?: ListType = ListType.NONE;\n\n /\n Sets role of the element.\n */\n @Prop({reflect: true})\n role = \"list\";\n\n private setChildrenSizeType(): void {\n const children = this.host.children;\n for (let i = 0; i < children.length; i++) {\n children[i].setAttribute(\"size\", this.size);\n children[i].setAttribute(\"list-type\", this.listType);\n children[i].setAttribute(\"list-element-position\", (i + 1).toString());\n }\n }\n\n componentDidLoad(): void {\n this.setChildrenSizeType();\n }\n\n render(): HTMLZListElement {\n return (\n <Host>\n <slot />\n </Host>\n );\n }\n}\n"]}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"index.stories.js","sourceRoot":"","sources":["~~../../../../../~~src/components/list/z-list/index.stories.ts"],"names":[],"mappings":"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","sourcesContent":["import {Meta, StoryObj} from \"@storybook/web-components\";\nimport {html} from \"lit\";\nimport {ZList} from \".\";\nimport {ListSize, ListType} from \"../../../beans\";\nimport \"../z-list-element/index\";\nimport \"../z-list-group/index\";\nimport \"./index\";\n\nconst StoryMeta = {\n title: \"ZList/ZList\",\n component: \"z-list\",\n argTypes: {\n size: {\n control: {\n type: \"select\",\n },\n options: Object.values(ListSize),\n },\n listType: {\n control: {\n type: \"select\",\n },\n options: Object.values(ListType),\n },\n },\n args: {\n size: ListSize.MEDIUM,\n listType: ListType.NONE,\n },\n render: (args) => html`\n <z-list\n .listType=${args.listType}\n size=${args.size}\n >\n <z-list-element\n .listType=${args.listType}\n size=${args.size}\n >Elemento 1</z-list-element\n >\n <z-list-element\n .listType=${args.listType}\n size=${args.size}\n >Elemento 2</z-list-element\n >\n <z-list-element\n .listType=${args.listType}\n size=${args.size}\n >Elemento 3</z-list-element\n >\n </z-list>\n `,\n} satisfies Meta<ZList>;\n\nexport default StoryMeta;\n\ntype Story = StoryObj<ZList>;\n\nexport const Default = {} satisfies Story;\n\nexport const HeaderDivider = {\n render: (args) =>\n html`<z-list>\n <z-list-group divider-type=\"header\">\n <div slot=\"header-title\">Gruppo 1</div>\n <z-list-element\n .listType=${args.listType}\n size=${args.size}\n >Elemento 1</z-list-element\n >\n <z-list-element\n .listType=${args.listType}\n size=${args.size}\n >Elemento 2</z-list-element\n >\n <z-list-element\n .listType=${args.listType}\n size=${args.size}\n >Elemento 3</z-list-element\n >\n </z-list-group>\n <z-list-group divider-type=\"header\">\n <div slot=\"header-title\">Gruppo 2</div>\n <z-list-element\n .listType=${args.listType}\n size=${args.size}\n >Elemento 1</z-list-element\n >\n <z-list-element\n .listType=${args.listType}\n size=${args.size}\n >Elemento 2</z-list-element\n >\n <z-list-element\n .listType=${args.listType}\n size=${args.size}\n >Elemento 3</z-list-element\n >\n </z-list-group>\n </z-list>`,\n} satisfies Story;\n\nexport const ElementDivider = {\n render: (args) =>\n html`<z-list>\n <z-list-group divider-type=\"element\">\n <div slot=\"header-title\">Gruppo 1</div>\n <z-list-element\n .listType=${args.listType}\n size=${args.size}\n >Elemento 1</z-list-element\n >\n <z-list-element\n .listType=${args.listType}\n size=${args.size}\n >Elemento 2</z-list-element\n >\n <z-list-element\n .listType=${args.listType}\n size=${args.size}\n >Elemento 3</z-list-element\n >\n </z-list-group>\n <z-list-group divider-type=\"element\">\n <div slot=\"header-title\">Gruppo 2</div>\n <z-list-element\n .listType=${args.listType}\n size=${args.size}\n >Elemento 1</z-list-element\n >\n <z-list-element\n .listType=${args.listType}\n size=${args.size}\n >Elemento 2</z-list-element\n >\n <z-list-element\n .listType=${args.listType}\n size=${args.size}\n >Elemento 3</z-list-element\n >\n </z-list-group>\n </z-list>`,\n} satisfies Story;\n\nexport const ClickableElements = {\n render: () =>\n html`<z-list>\n <z-list-group>\n <z-list-element clickable>Elemento 1</z-list-element>\n <z-list-element clickable>Elemento 2</z-list-element>\n <z-list-element clickable>Elemento 3</z-list-element>\n </z-list-group>\n </z-list>`,\n} satisfies Story;\n\nexport const ExpandableElements = {\n render: () =>\n html`<z-list size=\"large\">\n <z-list-group divider-type=\"element\">\n <z-list-element\n expandable\n align-button=\"left\"\n expandable-style=\"accordion\"\n ><span>Elemento 1</span><span slot=\"inner-content\">INNER CONTENT 1 BUTTON LEFT</span></z-list-element\n >\n <z-list-element\n expandable\n align-button=\"right\"\n expandable-style=\"menu\"\n ><span>Elemento 2</span><span slot=\"inner-content\">INNER CONTENT 2</span></z-list-element\n >\n <z-list-element\n expandable\n align-button=\"right\"\n expandable-style=\"menu\"\n ><span>Elemento 3</span><span slot=\"inner-content\">INNER CONTENT 3</span></z-list-element\n >\n </z-list-group>\n </z-list>`,\n} satisfies Story;\n\nexport const UnorderedIndex = {\n parameters: {\n controls: {\n exclude: [\"size\", \"listType\"],\n },\n },\n args: {\n listType: ListType.UNORDERED,\n },\n} satisfies Story;\n\nexport const OrderedIndex = {\n parameters: {\n controls: {\n exclude: [\"size\", \"listType\"],\n },\n },\n args: {\n listType: ListType.ORDERED,\n },\n} satisfies Story;\n"]}
1	+ {"version":3,"file":"index.stories.js","sourceRoot":"","sources":["../../../../src/components/list/z-list/index.stories.ts"],"names":[],"mappings":"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","sourcesContent":["import {Meta, StoryObj} from \"@storybook/web-components\";\nimport {html} from \"lit\";\nimport {ZList} from \".\";\nimport {ListSize, ListType} from \"../../../beans\";\nimport \"../z-list-element/index\";\nimport \"../z-list-group/index\";\nimport \"./index\";\n\nconst StoryMeta = {\n title: \"ZList/ZList\",\n component: \"z-list\",\n argTypes: {\n size: {\n control: {\n type: \"select\",\n },\n options: Object.values(ListSize),\n },\n listType: {\n control: {\n type: \"select\",\n },\n options: Object.values(ListType),\n },\n },\n args: {\n size: ListSize.MEDIUM,\n listType: ListType.NONE,\n },\n render: (args) => html`\n <z-list\n .listType=${args.listType}\n size=${args.size}\n >\n <z-list-element\n .listType=${args.listType}\n size=${args.size}\n >Elemento 1</z-list-element\n >\n <z-list-element\n .listType=${args.listType}\n size=${args.size}\n >Elemento 2</z-list-element\n >\n <z-list-element\n .listType=${args.listType}\n size=${args.size}\n >Elemento 3</z-list-element\n >\n </z-list>\n `,\n} satisfies Meta<ZList>;\n\nexport default StoryMeta;\n\ntype Story = StoryObj<ZList>;\n\nexport const Default = {} satisfies Story;\n\nexport const HeaderDivider = {\n render: (args) =>\n html`<z-list>\n <z-list-group divider-type=\"header\">\n <div slot=\"header-title\">Gruppo 1</div>\n <z-list-element\n .listType=${args.listType}\n size=${args.size}\n >Elemento 1</z-list-element\n >\n <z-list-element\n .listType=${args.listType}\n size=${args.size}\n >Elemento 2</z-list-element\n >\n <z-list-element\n .listType=${args.listType}\n size=${args.size}\n >Elemento 3</z-list-element\n >\n </z-list-group>\n <z-list-group divider-type=\"header\">\n <div slot=\"header-title\">Gruppo 2</div>\n <z-list-element\n .listType=${args.listType}\n size=${args.size}\n >Elemento 1</z-list-element\n >\n <z-list-element\n .listType=${args.listType}\n size=${args.size}\n >Elemento 2</z-list-element\n >\n <z-list-element\n .listType=${args.listType}\n size=${args.size}\n >Elemento 3</z-list-element\n >\n </z-list-group>\n </z-list>`,\n} satisfies Story;\n\nexport const ElementDivider = {\n render: (args) =>\n html`<z-list>\n <z-list-group divider-type=\"element\">\n <div slot=\"header-title\">Gruppo 1</div>\n <z-list-element\n .listType=${args.listType}\n size=${args.size}\n >Elemento 1</z-list-element\n >\n <z-list-element\n .listType=${args.listType}\n size=${args.size}\n >Elemento 2</z-list-element\n >\n <z-list-element\n .listType=${args.listType}\n size=${args.size}\n >Elemento 3</z-list-element\n >\n </z-list-group>\n <z-list-group divider-type=\"element\">\n <div slot=\"header-title\">Gruppo 2</div>\n <z-list-element\n .listType=${args.listType}\n size=${args.size}\n >Elemento 1</z-list-element\n >\n <z-list-element\n .listType=${args.listType}\n size=${args.size}\n >Elemento 2</z-list-element\n >\n <z-list-element\n .listType=${args.listType}\n size=${args.size}\n >Elemento 3</z-list-element\n >\n </z-list-group>\n </z-list>`,\n} satisfies Story;\n\nexport const ClickableElements = {\n render: () =>\n html`<z-list>\n <z-list-group>\n <z-list-element clickable>Elemento 1</z-list-element>\n <z-list-element clickable>Elemento 2</z-list-element>\n <z-list-element clickable>Elemento 3</z-list-element>\n </z-list-group>\n </z-list>`,\n} satisfies Story;\n\nexport const ExpandableElements = {\n render: () =>\n html`<z-list size=\"large\">\n <z-list-group divider-type=\"element\">\n <z-list-element\n expandable\n align-button=\"left\"\n expandable-style=\"accordion\"\n ><span>Elemento 1</span><span slot=\"inner-content\">INNER CONTENT 1 BUTTON LEFT</span></z-list-element\n >\n <z-list-element\n expandable\n align-button=\"right\"\n expandable-style=\"menu\"\n ><span>Elemento 2</span><span slot=\"inner-content\">INNER CONTENT 2</span></z-list-element\n >\n <z-list-element\n expandable\n align-button=\"right\"\n expandable-style=\"menu\"\n ><span>Elemento 3</span><span slot=\"inner-content\">INNER CONTENT 3</span></z-list-element\n >\n </z-list-group>\n </z-list>`,\n} satisfies Story;\n\nexport const UnorderedIndex = {\n parameters: {\n controls: {\n exclude: [\"size\", \"listType\"],\n },\n },\n args: {\n listType: ListType.UNORDERED,\n },\n} satisfies Story;\n\nexport const OrderedIndex = {\n parameters: {\n controls: {\n exclude: [\"size\", \"listType\"],\n },\n },\n args: {\n listType: ListType.ORDERED,\n },\n} satisfies Story;\n"]}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/components/list/z-list-element/index.tsx"],"names":[],"mappings":"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","sourcesContent":["import {Component, Element, Event, EventEmitter, h, Host, Listen, Prop, State} from \"@stencil/core\";\nimport {\n DividerSize,\n ExpandableListButtonAlign,\n ExpandableListStyle,\n KeyboardCode,\n ListDividerType,\n ListSize,\n ListType,\n} from \"../../../beans\";\n\n@Component({\n tag: \"z-list-element\",\n styleUrl: \"styles.css\",\n shadow: true,\n})\nexport class ZListElement {\n @Element() host: HTMLZListElementElement;\n\n /** remove filter click event, returns filterid /\n @Event({\n eventName: \"accessibleFocus\",\n composed: true,\n cancelable: true,\n bubbles: true,\n })\n accessibleFocus: EventEmitter<number>;\n\n /* set parent aria-activedescendant on focus event, returns filterid /\n @Event({\n eventName: \"ariaDescendantFocus\",\n composed: true,\n cancelable: true,\n bubbles: true,\n })\n ariaDescendantFocus: EventEmitter<number>;\n\n /* remove filter click event, returns filterid /\n @Event({\n eventName: \"clickItem\",\n composed: true,\n cancelable: true,\n bubbles: true,\n })\n clickItem: EventEmitter;\n\n @Listen(\"accessibleFocus\", {target: \"document\"})\n accessibleFocusHandler(e: CustomEvent): void {\n if (this.listElementId === e.detail) {\n const toFocus = this.host.shadowRoot.getElementById(`z-list-element-id-${e.detail}`);\n toFocus.focus();\n }\n }\n\n /\n [optional] Align expandable button left or right.\n /\n @Prop({reflect: true})\n alignButton?: ExpandableListButtonAlign = ExpandableListButtonAlign.LEFT;\n\n /\n [optional] Sets element clickable.\n /\n @Prop({reflect: true})\n clickable?: boolean = false;\n\n /\n [optional] Sets the divider color.\n /\n @Prop()\n dividerColor?: string = \"color-surface03\";\n\n /\n [optional] Sets the position where to insert the divider.\n /\n @Prop()\n dividerType?: ListDividerType = ListDividerType.NONE;\n\n /\n [optional] Sets the divider size.\n /\n @Prop()\n dividerSize?: DividerSize = DividerSize.SMALL;\n\n /\n [optional] Sets element as expandable.\n /\n @Prop({reflect: true})\n expandable?: boolean = false;\n\n /\n [optional] Sets expandable style to element.\n /\n @Prop()\n expandableStyle?: ExpandableListStyle = ExpandableListStyle.ACCORDION;\n\n /\n [optional] List element id.\n /\n @Prop({reflect: true})\n listElementId?: number;\n\n /\n [optional] Sets size of inside elements.\n /\n @Prop({reflect: true})\n size?: ListSize = ListSize.MEDIUM;\n\n /\n [optional] Sets text color of the element.\n /\n @Prop({reflect: true})\n color?: string = \"none\";\n\n /\n [optional] Sets disabled style of the element.\n /\n @Prop({reflect: true})\n disabled?: boolean = false;\n\n /\n [optional] position of the list element inside the list or the group\n /\n @Prop({reflect: true})\n listElementPosition?: string = \"0\";\n\n /\n [optional] type of the list marker for each element\n /\n @Prop({reflect: true})\n listType?: ListType = ListType.NONE;\n\n /\n Sets element role.\n /\n @Prop({reflect: true})\n role = \"listitem\";\n\n /* set tabindex to Host tag (optional). Defaults to 0. /\n @Prop()\n htmlTabindex?: number \| null = 0;\n\n @State()\n showInnerContent = false;\n\n private openElementConfig = {\n accordion: {\n open: \"minus-circled\",\n close: \"plus-circled\",\n },\n menu: {\n open: \"chevron-up\",\n close: \"chevron-down\",\n },\n };\n\n /\n Constructor.\n /\n constructor() {\n this.handleClick = this.handleClick.bind(this);\n this.handleKeyDown = this.handleKeyDown.bind(this);\n }\n\n /\n Handler for click on element. If element is expandable, change state.\n * @returns void\n /\n private handleClick(): void {\n this.clickItem.emit(this.listElementId);\n if (!this.expandable) {\n return;\n }\n this.showInnerContent = !this.showInnerContent;\n }\n\n private handleKeyDown(event): void {\n const expandByKey = event.code === KeyboardCode.ENTER;\n switch (event.code) {\n case KeyboardCode.ARROW_DOWN:\n event.preventDefault();\n this.accessibleFocus.emit(this.listElementId + 1);\n break;\n case KeyboardCode.ARROW_UP:\n event.preventDefault();\n this.accessibleFocus.emit(this.listElementId - 1);\n break;\n case KeyboardCode.ENTER:\n event.preventDefault();\n this.clickItem.emit(this.listElementId);\n break;\n default:\n break;\n }\n\n if (!this.expandable \|\| !expandByKey) {\n return;\n }\n this.showInnerContent = !this.showInnerContent;\n }\n\n /\n Renders button to expand element.\n * @returns expadable button\n /\n private renderExpandableButton(): HTMLZIconElement {\n if (!this.expandable) {\n return null;\n }\n\n return (\n <z-icon\n name={\n this.showInnerContent\n ? this.openElementConfig[this.expandableStyle].open\n : this.openElementConfig[this.expandableStyle].close\n }\n />\n );\n }\n\n /\n Renders expanded content if element is expandable.\n * @returns expanded content\n /\n private renderExpandedContent(): HTMLDivElement {\n if (!this.expandable) {\n return null;\n }\n\n return (\n <div\n class={{\n \"z-list-element-inner-container\": true,\n \"expanded\": this.showInnerContent,\n }}\n >\n <slot name=\"inner-content\" />\n </div>\n );\n }\n\n /\n Renders content of the z-list-element\n * @returns list content\n */\n private renderContent(): HTMLDivElement {\n if (this.listType === ListType.NONE) {\n return <slot />;\n }\n\n if (this.listType === ListType.ORDERED) {\n return (\n <div class=\"z-list-content-container\">\n <div>{this.listElementPosition}.&emsp;</div>\n <slot />\n </div>\n );\n }\n\n if (this.listType === ListType.UNORDERED) {\n return (\n <div class=\"z-list-content-container\">\n <span>•&emsp;</span>\n <slot />\n </div>\n );\n }\n }\n\n render(): HTMLZListElementElement {\n return (\n <Host\n aria-expanded={this.expandable ? this.showInnerContent : null}\n onClick={this.handleClick}\n onFocus={() => this.ariaDescendantFocus.emit(this.listElementId)}\n onKeyDown={this.handleKeyDown}\n clickable={this.clickable && !this.disabled}\n tabIndex={this.htmlTabindex}\n >\n <div\n class=\"container\"\n style={{color: `var(--${this.color})`}}\n tabindex=\"-1\"\n id={`z-list-element-id-${this.listElementId}`}\n part=\"list-item-container\"\n >\n <div class=\"z-list-element-container\">\n {this.renderExpandableButton()}\n {this.renderContent()}\n </div>\n {this.renderExpandedContent()}\n </div>\n {this.dividerType === ListDividerType.ELEMENT && (\n <z-divider\n color={this.dividerColor}\n size={this.dividerSize}\n />\n )}\n </Host>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/list/z-list-element/index.tsx"],"names":[],"mappings":"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","sourcesContent":["import {Component, Element, Event, EventEmitter, h, Host, Listen, Prop, State} from \"@stencil/core\";\nimport {\n DividerSize,\n ExpandableListButtonAlign,\n ExpandableListStyle,\n KeyboardCode,\n ListDividerType,\n ListSize,\n ListType,\n} from \"../../../beans\";\n\n@Component({\n tag: \"z-list-element\",\n styleUrl: \"styles.css\",\n shadow: true,\n})\nexport class ZListElement {\n @Element() host: HTMLZListElementElement;\n\n /** remove filter click event, returns filterid /\n @Event({\n eventName: \"accessibleFocus\",\n composed: true,\n cancelable: true,\n bubbles: true,\n })\n accessibleFocus: EventEmitter<number>;\n\n /* set parent aria-activedescendant on focus event, returns filterid /\n @Event({\n eventName: \"ariaDescendantFocus\",\n composed: true,\n cancelable: true,\n bubbles: true,\n })\n ariaDescendantFocus: EventEmitter<number>;\n\n /* remove filter click event, returns filterid /\n @Event({\n eventName: \"clickItem\",\n composed: true,\n cancelable: true,\n bubbles: true,\n })\n clickItem: EventEmitter;\n\n @Listen(\"accessibleFocus\", {target: \"document\"})\n accessibleFocusHandler(e: CustomEvent): void {\n if (this.listElementId === e.detail) {\n const toFocus = this.host.shadowRoot.getElementById(`z-list-element-id-${e.detail}`);\n toFocus.focus();\n }\n }\n\n /\n [optional] Align expandable button left or right.\n /\n @Prop({reflect: true})\n alignButton?: ExpandableListButtonAlign = ExpandableListButtonAlign.LEFT;\n\n /\n [optional] Sets element clickable.\n /\n @Prop({reflect: true})\n clickable?: boolean = false;\n\n /\n [optional] Sets the divider color.\n /\n @Prop()\n dividerColor?: string = \"color-surface03\";\n\n /\n [optional] Sets the position where to insert the divider.\n /\n @Prop()\n dividerType?: ListDividerType = ListDividerType.NONE;\n\n /\n [optional] Sets the divider size.\n /\n @Prop()\n dividerSize?: DividerSize = DividerSize.SMALL;\n\n /\n [optional] Sets element as expandable.\n /\n @Prop({reflect: true})\n expandable?: boolean = false;\n\n /\n [optional] Sets expandable style to element.\n /\n @Prop()\n expandableStyle?: ExpandableListStyle = ExpandableListStyle.ACCORDION;\n\n /\n [optional] List element id.\n /\n @Prop({reflect: true})\n listElementId?: number;\n\n /\n [optional] Sets size of inside elements.\n /\n @Prop({reflect: true})\n size?: ListSize = ListSize.MEDIUM;\n\n /\n [optional] Sets text color of the element.\n /\n @Prop({reflect: true})\n color?: string = \"none\";\n\n /\n [optional] Sets disabled style of the element.\n /\n @Prop({reflect: true})\n disabled?: boolean = false;\n\n /\n [optional] position of the list element inside the list or the group\n /\n @Prop({reflect: true})\n listElementPosition?: string = \"0\";\n\n /\n [optional] type of the list marker for each element\n /\n @Prop({reflect: true})\n listType?: ListType = ListType.NONE;\n\n /\n Sets element role.\n /\n @Prop({reflect: true})\n role = \"listitem\";\n\n /* set tabindex to Host tag (optional). Defaults to 0. /\n @Prop()\n htmlTabindex?: number \| null = 0;\n\n @State()\n showInnerContent = false;\n\n private openElementConfig = {\n accordion: {\n open: \"minus-circled\",\n close: \"plus-circled\",\n },\n menu: {\n open: \"chevron-up\",\n close: \"chevron-down\",\n },\n };\n\n /\n Constructor.\n /\n constructor() {\n this.handleClick = this.handleClick.bind(this);\n this.handleKeyDown = this.handleKeyDown.bind(this);\n }\n\n /\n Handler for click on element. If element is expandable, change state.\n * @returns void\n /\n private handleClick(): void {\n this.clickItem.emit(this.listElementId);\n if (!this.expandable) {\n return;\n }\n this.showInnerContent = !this.showInnerContent;\n }\n\n private handleKeyDown(event): void {\n const expandByKey = event.code === KeyboardCode.ENTER;\n switch (event.code) {\n case KeyboardCode.ARROW_DOWN:\n event.preventDefault();\n this.accessibleFocus.emit(this.listElementId + 1);\n break;\n case KeyboardCode.ARROW_UP:\n event.preventDefault();\n this.accessibleFocus.emit(this.listElementId - 1);\n break;\n case KeyboardCode.ENTER:\n event.preventDefault();\n this.clickItem.emit(this.listElementId);\n break;\n default:\n break;\n }\n\n if (!this.expandable \|\| !expandByKey) {\n return;\n }\n this.showInnerContent = !this.showInnerContent;\n }\n\n /\n Renders button to expand element.\n * @returns expadable button\n /\n private renderExpandableButton(): HTMLZIconElement {\n if (!this.expandable) {\n return null;\n }\n\n return (\n <z-icon\n name={\n this.showInnerContent\n ? this.openElementConfig[this.expandableStyle].open\n : this.openElementConfig[this.expandableStyle].close\n }\n />\n );\n }\n\n /\n Renders expanded content if element is expandable.\n * @returns expanded content\n /\n private renderExpandedContent(): HTMLDivElement {\n if (!this.expandable) {\n return null;\n }\n\n return (\n <div\n class={{\n \"z-list-element-inner-container\": true,\n \"expanded\": this.showInnerContent,\n }}\n >\n <slot name=\"inner-content\" />\n </div>\n );\n }\n\n /\n Renders content of the z-list-element\n * @returns list content\n */\n private renderContent(): HTMLDivElement {\n if (this.listType === ListType.NONE) {\n return <slot />;\n }\n\n if (this.listType === ListType.ORDERED) {\n return (\n <div class=\"z-list-content-container\">\n <div>{this.listElementPosition}.&emsp;</div>\n <slot />\n </div>\n );\n }\n\n if (this.listType === ListType.UNORDERED) {\n return (\n <div class=\"z-list-content-container\">\n <span>•&emsp;</span>\n <slot />\n </div>\n );\n }\n }\n\n render(): HTMLZListElementElement {\n return (\n <Host\n aria-expanded={this.expandable ? this.showInnerContent : null}\n onClick={this.handleClick}\n onFocus={() => this.ariaDescendantFocus.emit(this.listElementId)}\n onKeyDown={this.handleKeyDown}\n clickable={this.clickable && !this.disabled}\n tabIndex={this.htmlTabindex}\n >\n <div\n class=\"container\"\n style={{color: `var(--${this.color})`}}\n tabindex=\"-1\"\n id={`z-list-element-id-${this.listElementId}`}\n part=\"list-item-container\"\n >\n <div class=\"z-list-element-container\">\n {this.renderExpandableButton()}\n {this.renderContent()}\n </div>\n {this.renderExpandedContent()}\n </div>\n {this.dividerType === ListDividerType.ELEMENT && (\n <z-divider\n color={this.dividerColor}\n size={this.dividerSize}\n />\n )}\n </Host>\n );\n }\n}\n"]}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"index.stories.js","sourceRoot":"","sources":["~~../../../../../~~src/components/list/z-list-element/index.stories.ts"],"names":[],"mappings":"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","sourcesContent":["import {Meta, StoryObj} from \"@storybook/web-components\";\nimport {html} from \"lit\";\nimport {ZListElement} from \".\";\nimport {\n DividerSize,\n ExpandableListButtonAlign,\n ExpandableListStyle,\n ListDividerType,\n ListSize,\n ListType,\n} from \"../../../beans\";\nimport {getColorTokens} from \"../../../utils/storybook-utils\";\nimport \"../z-list/index\";\nimport \"./index\";\n\nconst StoryMeta = {\n title: \"ZList/ZListElement\",\n component: \"z-list-element\",\n argTypes: {\n alignButton: {\n control: {\n type: \"inline-radio\",\n },\n options: Object.values(ExpandableListButtonAlign),\n },\n dividerColor: {\n control: {\n type: \"select\",\n },\n options: getColorTokens().map((token) => token.replace(\"--\", \"\")),\n },\n dividerType: {\n control: {\n type: \"inline-radio\",\n },\n options: Object.values(ListDividerType),\n },\n dividerSize: {\n control: {\n type: \"inline-radio\",\n },\n options: Object.values(DividerSize),\n },\n expandableStyle: {\n control: {\n type: \"inline-radio\",\n },\n options: Object.values(ExpandableListStyle),\n },\n size: {\n control: {\n type: \"inline-radio\",\n },\n options: Object.values(ListSize),\n },\n color: {\n control: {\n type: \"select\",\n },\n options: getColorTokens().map((token) => token.replace(\"--\", \"\")),\n },\n listType: {\n control: {\n type: \"inline-radio\",\n },\n options: Object.values(ListType),\n },\n },\n args: {\n alignButton: ExpandableListButtonAlign.LEFT,\n clickable: false,\n dividerColor: \"color-surface03\",\n dividerType: ListDividerType.NONE,\n dividerSize: DividerSize.SMALL,\n expandable: false,\n expandableStyle: ExpandableListStyle.ACCORDION,\n listElementId: 0,\n size: ListSize.MEDIUM,\n color: \"color-default-text\",\n disabled: true,\n listElementPosition: \"0\",\n listType: ListType.NONE,\n },\n} satisfies Meta<ZListElement>;\n\nexport default StoryMeta;\n\nexport const Default = {\n render: (args) =>\n html`<z-list>\n <z-list-element\n align-button=${args.alignButton}\n clickable=${args.clickable}\n divider-color=${args.dividerColor}\n divider-type=${args.dividerType}\n divider-size=${args.dividerSize}\n expandable=${args.expandable}\n expandable-style=${args.expandableStyle}\n list-element-id=${args.listElementId}\n size=${args.size}\n color=${args.color}\n disabled=${args.disabled}\n list-element-position=${args.listElementPosition}\n list-type=${args.listType}\n ><span>Elemento 1</span><span slot=\"inner-content\">Inner content</span></z-list-element\n >\n <z-list-element\n align-button=${args.alignButton}\n clickable=${args.clickable}\n divider-color=${args.dividerColor}\n divider-type=${args.dividerType}\n divider-size=${args.dividerSize}\n expandable=${args.expandable}\n expandable-style=${args.expandableStyle}\n list-element-id=${args.listElementId}\n size=${args.size}\n color=${args.color}\n disabled=${args.disabled}\n list-element-position=${args.listElementPosition}\n list-type=${args.listType}\n >Elemento 2</z-list-element\n >\n <z-list-element\n align-button=${args.alignButton}\n clickable=${args.clickable}\n divider-color=${args.dividerColor}\n divider-type=${args.dividerType}\n divider-size=${args.dividerSize}\n expandable=${args.expandable}\n expandable-style=${args.expandableStyle}\n list-element-id=${args.listElementId}\n size=${args.size}\n color=${args.color}\n disabled=${args.disabled}\n list-element-position=${args.listElementPosition}\n list-type=${args.listType}\n >Elemento 3</z-list-element\n >\n </z-list>`,\n} satisfies StoryObj<ZListElement>;\n"]}
1	+ {"version":3,"file":"index.stories.js","sourceRoot":"","sources":["../../../../src/components/list/z-list-element/index.stories.ts"],"names":[],"mappings":"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","sourcesContent":["import {Meta, StoryObj} from \"@storybook/web-components\";\nimport {html} from \"lit\";\nimport {ZListElement} from \".\";\nimport {\n DividerSize,\n ExpandableListButtonAlign,\n ExpandableListStyle,\n ListDividerType,\n ListSize,\n ListType,\n} from \"../../../beans\";\nimport {getColorTokens} from \"../../../utils/storybook-utils\";\nimport \"../z-list/index\";\nimport \"./index\";\n\nconst StoryMeta = {\n title: \"ZList/ZListElement\",\n component: \"z-list-element\",\n argTypes: {\n alignButton: {\n control: {\n type: \"inline-radio\",\n },\n options: Object.values(ExpandableListButtonAlign),\n },\n dividerColor: {\n control: {\n type: \"select\",\n },\n options: getColorTokens().map((token) => token.replace(\"--\", \"\")),\n },\n dividerType: {\n control: {\n type: \"inline-radio\",\n },\n options: Object.values(ListDividerType),\n },\n dividerSize: {\n control: {\n type: \"inline-radio\",\n },\n options: Object.values(DividerSize),\n },\n expandableStyle: {\n control: {\n type: \"inline-radio\",\n },\n options: Object.values(ExpandableListStyle),\n },\n size: {\n control: {\n type: \"inline-radio\",\n },\n options: Object.values(ListSize),\n },\n color: {\n control: {\n type: \"select\",\n },\n options: getColorTokens().map((token) => token.replace(\"--\", \"\")),\n },\n listType: {\n control: {\n type: \"inline-radio\",\n },\n options: Object.values(ListType),\n },\n },\n args: {\n alignButton: ExpandableListButtonAlign.LEFT,\n clickable: false,\n dividerColor: \"color-surface03\",\n dividerType: ListDividerType.NONE,\n dividerSize: DividerSize.SMALL,\n expandable: false,\n expandableStyle: ExpandableListStyle.ACCORDION,\n listElementId: 0,\n size: ListSize.MEDIUM,\n color: \"color-default-text\",\n disabled: true,\n listElementPosition: \"0\",\n listType: ListType.NONE,\n },\n} satisfies Meta<ZListElement>;\n\nexport default StoryMeta;\n\nexport const Default = {\n render: (args) =>\n html`<z-list>\n <z-list-element\n align-button=${args.alignButton}\n clickable=${args.clickable}\n divider-color=${args.dividerColor}\n divider-type=${args.dividerType}\n divider-size=${args.dividerSize}\n expandable=${args.expandable}\n expandable-style=${args.expandableStyle}\n list-element-id=${args.listElementId}\n size=${args.size}\n color=${args.color}\n disabled=${args.disabled}\n list-element-position=${args.listElementPosition}\n list-type=${args.listType}\n ><span>Elemento 1</span><span slot=\"inner-content\">Inner content</span></z-list-element\n >\n <z-list-element\n align-button=${args.alignButton}\n clickable=${args.clickable}\n divider-color=${args.dividerColor}\n divider-type=${args.dividerType}\n divider-size=${args.dividerSize}\n expandable=${args.expandable}\n expandable-style=${args.expandableStyle}\n list-element-id=${args.listElementId}\n size=${args.size}\n color=${args.color}\n disabled=${args.disabled}\n list-element-position=${args.listElementPosition}\n list-type=${args.listType}\n >Elemento 2</z-list-element\n >\n <z-list-element\n align-button=${args.alignButton}\n clickable=${args.clickable}\n divider-color=${args.dividerColor}\n divider-type=${args.dividerType}\n divider-size=${args.dividerSize}\n expandable=${args.expandable}\n expandable-style=${args.expandableStyle}\n list-element-id=${args.listElementId}\n size=${args.size}\n color=${args.color}\n disabled=${args.disabled}\n list-element-position=${args.listElementPosition}\n list-type=${args.listType}\n >Elemento 3</z-list-element\n >\n </z-list>`,\n} satisfies StoryObj<ZListElement>;\n"]}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","sourceRoot":"","sources":["~~../../../../../~~src/components/list/z-list-group/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAE,OAAO,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAC,MAAM,eAAe,CAAC;AAChE,OAAO,EAAC,WAAW,EAAE,eAAe,EAAE,QAAQ,EAAE,QAAQ,EAAC,MAAM,gBAAgB,CAAC;AAOhF,MAAM,OAAO,UAAU;;oBAOH,QAAQ,CAAC,MAAM;2BAMD,eAAe,CAAC,IAAI;2BAMxB,WAAW,CAAC,KAAK;4BAMrB,SAAS;wBAMX,QAAQ,CAAC,IAAI;;IAInC,gBAAgB;QACd,MAAM,QAAQ,GAAG,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC;QACpC,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,QAAQ,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE,CAAC;YACzC,IAAI,QAAQ,CAAC,MAAM,GAAG,CAAC,GAAG,CAAC,EAAE,CAAC;gBAC5B,QAAQ,CAAC,CAAC,CAAC,CAAC,YAAY,CAAC,cAAc,EAAE,IAAI,CAAC,WAAW,CAAC,CAAC;gBAC3D,QAAQ,CAAC,CAAC,CAAC,CAAC,YAAY,CAAC,cAAc,EAAE,IAAI,CAAC,WAAW,CAAC,CAAC;gBAC3D,QAAQ,CAAC,CAAC,CAAC,CAAC,YAAY,CAAC,eAAe,EAAE,IAAI,CAAC,YAAY,CAAC,CAAC;YAC/D,CAAC;YACD,QAAQ,CAAC,CAAC,CAAC,CAAC,YAAY,CAAC,MAAM,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC;YAC5C,QAAQ,CAAC,CAAC,CAAC,CAAC,YAAY,CAAC,WAAW,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC;YACrD,QAAQ,CAAC,CAAC,CAAC,CAAC,YAAY,CAAC,uBAAuB,EAAE,CAAC,CAAC,QAAQ,EAAE,CAAC,CAAC;QAClE,CAAC;IACH,CAAC;IAED,iBAAiB;QACf,IAAI,CAAC,SAAS,GAAG,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,uBAAuB,CAAC,CAAC;IACtE,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDAAC,IAAI,EAAC,OAAO;YAChB,4DACE,KAAK,EAAE;oBACL,+BAA+B,EAAE,IAAI;oBACrC,YAAY,EAAE,IAAI,CAAC,SAAS;iBAC7B;gBAED,6DAAM,IAAI,EAAC,cAAc,GAAG;gBAC3B,IAAI,CAAC,WAAW,KAAK,eAAe,CAAC,MAAM,IAAI,CAC9C,kEACE,KAAK,EAAE,IAAI,CAAC,YAAY,EACxB,IAAI,EAAE,IAAI,CAAC,WAAW,GACtB,CACH,CACG;YACN,8DAAQ,CACH,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {Component, Element, h, Host, Prop} from \"@stencil/core\";\nimport {DividerSize, ListDividerType, ListSize, ListType} from \"../../../beans\";\n\n@Component({\n tag: \"z-list-group\",\n styleUrl: \"styles.css\",\n shadow: true,\n})\nexport class ZListGroup {\n @Element() host: HTMLZListGroupElement;\n\n /*\n [optional] Sets size of inside elements.\n /\n @Prop({reflect: true})\n size?: ListSize = ListSize.MEDIUM;\n\n /\n [optional] Sets the position where to insert the divider.\n /\n @Prop({reflect: true})\n dividerType?: ListDividerType = ListDividerType.NONE;\n\n /\n [optional] Sets the divider size.\n /\n @Prop({reflect: true})\n dividerSize?: DividerSize = DividerSize.SMALL;\n\n /\n [optional] Sets the divider color.\n /\n @Prop({reflect: true})\n dividerColor?: string = \"gray200\";\n\n /\n [optional] type of the list marker for each element\n */\n @Prop({reflect: true})\n listType?: ListType = ListType.NONE;\n\n private hasHeader: boolean;\n\n componentDidLoad(): void {\n const children = this.host.children;\n for (let i = 0; i < children.length; i++) {\n if (children.length - 1 > i) {\n children[i].setAttribute(\"divider-type\", this.dividerType);\n children[i].setAttribute(\"divider-size\", this.dividerSize);\n children[i].setAttribute(\"divider-color\", this.dividerColor);\n }\n children[i].setAttribute(\"size\", this.size);\n children[i].setAttribute(\"list-type\", this.listType);\n children[i].setAttribute(\"list-element-position\", i.toString());\n }\n }\n\n componentWillLoad(): void {\n this.hasHeader = !!this.host.querySelector('[slot=\"header-title\"]');\n }\n\n render(): HTMLZListGroupElement {\n return (\n <Host role=\"group\">\n <div\n class={{\n \"z-list-group-header-container\": true,\n \"has-header\": this.hasHeader,\n }}\n >\n <slot name=\"header-title\" />\n {this.dividerType === ListDividerType.HEADER && (\n <z-divider\n color={this.dividerColor}\n size={this.dividerSize}\n />\n )}\n </div>\n <slot />\n </Host>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/list/z-list-group/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAE,OAAO,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAC,MAAM,eAAe,CAAC;AAChE,OAAO,EAAC,WAAW,EAAE,eAAe,EAAE,QAAQ,EAAE,QAAQ,EAAC,MAAM,gBAAgB,CAAC;AAOhF,MAAM,OAAO,UAAU;;oBAOH,QAAQ,CAAC,MAAM;2BAMD,eAAe,CAAC,IAAI;2BAMxB,WAAW,CAAC,KAAK;4BAMrB,SAAS;wBAMX,QAAQ,CAAC,IAAI;;IAInC,gBAAgB;QACd,MAAM,QAAQ,GAAG,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC;QACpC,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,QAAQ,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE,CAAC;YACzC,IAAI,QAAQ,CAAC,MAAM,GAAG,CAAC,GAAG,CAAC,EAAE,CAAC;gBAC5B,QAAQ,CAAC,CAAC,CAAC,CAAC,YAAY,CAAC,cAAc,EAAE,IAAI,CAAC,WAAW,CAAC,CAAC;gBAC3D,QAAQ,CAAC,CAAC,CAAC,CAAC,YAAY,CAAC,cAAc,EAAE,IAAI,CAAC,WAAW,CAAC,CAAC;gBAC3D,QAAQ,CAAC,CAAC,CAAC,CAAC,YAAY,CAAC,eAAe,EAAE,IAAI,CAAC,YAAY,CAAC,CAAC;YAC/D,CAAC;YACD,QAAQ,CAAC,CAAC,CAAC,CAAC,YAAY,CAAC,MAAM,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC;YAC5C,QAAQ,CAAC,CAAC,CAAC,CAAC,YAAY,CAAC,WAAW,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC;YACrD,QAAQ,CAAC,CAAC,CAAC,CAAC,YAAY,CAAC,uBAAuB,EAAE,CAAC,CAAC,QAAQ,EAAE,CAAC,CAAC;QAClE,CAAC;IACH,CAAC;IAED,iBAAiB;QACf,IAAI,CAAC,SAAS,GAAG,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,uBAAuB,CAAC,CAAC;IACtE,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDAAC,IAAI,EAAC,OAAO;YAChB,4DACE,KAAK,EAAE;oBACL,+BAA+B,EAAE,IAAI;oBACrC,YAAY,EAAE,IAAI,CAAC,SAAS;iBAC7B;gBAED,6DAAM,IAAI,EAAC,cAAc,GAAG;gBAC3B,IAAI,CAAC,WAAW,KAAK,eAAe,CAAC,MAAM,IAAI,CAC9C,kEACE,KAAK,EAAE,IAAI,CAAC,YAAY,EACxB,IAAI,EAAE,IAAI,CAAC,WAAW,GACtB,CACH,CACG;YACN,8DAAQ,CACH,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {Component, Element, h, Host, Prop} from \"@stencil/core\";\nimport {DividerSize, ListDividerType, ListSize, ListType} from \"../../../beans\";\n\n@Component({\n tag: \"z-list-group\",\n styleUrl: \"styles.css\",\n shadow: true,\n})\nexport class ZListGroup {\n @Element() host: HTMLZListGroupElement;\n\n /*\n [optional] Sets size of inside elements.\n /\n @Prop({reflect: true})\n size?: ListSize = ListSize.MEDIUM;\n\n /\n [optional] Sets the position where to insert the divider.\n /\n @Prop({reflect: true})\n dividerType?: ListDividerType = ListDividerType.NONE;\n\n /\n [optional] Sets the divider size.\n /\n @Prop({reflect: true})\n dividerSize?: DividerSize = DividerSize.SMALL;\n\n /\n [optional] Sets the divider color.\n /\n @Prop({reflect: true})\n dividerColor?: string = \"gray200\";\n\n /\n [optional] type of the list marker for each element\n */\n @Prop({reflect: true})\n listType?: ListType = ListType.NONE;\n\n private hasHeader: boolean;\n\n componentDidLoad(): void {\n const children = this.host.children;\n for (let i = 0; i < children.length; i++) {\n if (children.length - 1 > i) {\n children[i].setAttribute(\"divider-type\", this.dividerType);\n children[i].setAttribute(\"divider-size\", this.dividerSize);\n children[i].setAttribute(\"divider-color\", this.dividerColor);\n }\n children[i].setAttribute(\"size\", this.size);\n children[i].setAttribute(\"list-type\", this.listType);\n children[i].setAttribute(\"list-element-position\", i.toString());\n }\n }\n\n componentWillLoad(): void {\n this.hasHeader = !!this.host.querySelector('[slot=\"header-title\"]');\n }\n\n render(): HTMLZListGroupElement {\n return (\n <Host role=\"group\">\n <div\n class={{\n \"z-list-group-header-container\": true,\n \"has-header\": this.hasHeader,\n }}\n >\n <slot name=\"header-title\" />\n {this.dividerType === ListDividerType.HEADER && (\n <z-divider\n color={this.dividerColor}\n size={this.dividerSize}\n />\n )}\n </div>\n <slot />\n </Host>\n );\n }\n}\n"]}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"index.stories.js","sourceRoot":"","sources":["~~../../../../../~~src/components/list/z-list-group/index.stories.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,IAAI,EAAC,MAAM,KAAK,CAAC;AAEzB,OAAO,EAAC,WAAW,EAAE,eAAe,EAAE,QAAQ,EAAE,QAAQ,EAAC,MAAM,gBAAgB,CAAC;AAChF,OAAO,EAAC,sBAAsB,EAAC,MAAM,gCAAgC,CAAC;AACtE,OAAO,yBAAyB,CAAC;AACjC,OAAO,iBAAiB,CAAC;AACzB,OAAO,SAAS,CAAC;AAEjB,MAAM,SAAS,GAAG;IAChB,KAAK,EAAE,kBAAkB;IACzB,SAAS,EAAE,cAAc;IACzB,QAAQ,EAAE;QACR,IAAI,EAAE;YACJ,OAAO,EAAE;gBACP,IAAI,EAAE,cAAc;aACrB;YACD,OAAO,EAAE,MAAM,CAAC,MAAM,CAAC,QAAQ,CAAC;SACjC;QACD,WAAW,EAAE;YACX,OAAO,EAAE;gBACP,IAAI,EAAE,cAAc;aACrB;YACD,OAAO,EAAE,MAAM,CAAC,MAAM,CAAC,eAAe,CAAC;SACxC;QACD,WAAW,EAAE;YACX,OAAO,EAAE;gBACP,IAAI,EAAE,cAAc;aACrB;YACD,OAAO,EAAE,MAAM,CAAC,MAAM,CAAC,WAAW,CAAC;SACpC;QACD,YAAY,EAAE,sBAAsB,EAAE;QACtC,QAAQ,EAAE;YACR,OAAO,EAAE;gBACP,IAAI,EAAE,cAAc;aACrB;YACD,OAAO,EAAE,MAAM,CAAC,MAAM,CAAC,QAAQ,CAAC;SACjC;KACF;IACD,IAAI,EAAE;QACJ,IAAI,EAAE,QAAQ,CAAC,KAAK;QACpB,WAAW,EAAE,eAAe,CAAC,MAAM;QACnC,WAAW,EAAE,WAAW,CAAC,KAAK;QAC9B,YAAY,EAAE,SAAS;QACvB,QAAQ,EAAE,QAAQ,CAAC,IAAI;KACxB;CACyB,CAAC;AAC7B,eAAe,SAAS,CAAC;AAEzB,MAAM,CAAC,MAAM,OAAO,GAAG;IACrB,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAA;;;eAGT,IAAI,CAAC,IAAI;uBACD,IAAI,CAAC,WAAW;uBAChB,IAAI,CAAC,WAAW;wBACf,IAAI,CAAC,YAAY;oBACrB,IAAI,CAAC,QAAQ;;;;iBAIhB,IAAI,CAAC,IAAI;sBACJ,IAAI,CAAC,QAAQ;yBACV,IAAI,CAAC,WAAW;yBAChB,IAAI,CAAC,WAAW;0BACf,IAAI,CAAC,YAAY;;;;iBAI1B,IAAI,CAAC,IAAI;sBACJ,IAAI,CAAC,QAAQ;yBACV,IAAI,CAAC,WAAW;yBAChB,IAAI,CAAC,WAAW;0BACf,IAAI,CAAC,YAAY;;;;iBAI1B,IAAI,CAAC,IAAI;sBACJ,IAAI,CAAC,QAAQ;yBACV,IAAI,CAAC,WAAW;yBAChB,IAAI,CAAC,WAAW;0BACf,IAAI,CAAC,YAAY;;;;;eAK5B,IAAI,CAAC,IAAI;uBACD,IAAI,CAAC,WAAW;uBAChB,IAAI,CAAC,WAAW;wBACf,IAAI,CAAC,YAAY;oBACrB,IAAI,CAAC,QAAQ;;;;iBAIhB,IAAI,CAAC,IAAI;sBACJ,IAAI,CAAC,QAAQ;yBACV,IAAI,CAAC,WAAW;yBAChB,IAAI,CAAC,WAAW;0BACf,IAAI,CAAC,YAAY;;;;iBAI1B,IAAI,CAAC,IAAI;sBACJ,IAAI,CAAC,QAAQ;yBACV,IAAI,CAAC,WAAW;yBAChB,IAAI,CAAC,WAAW;0BACf,IAAI,CAAC,YAAY;;;;iBAI1B,IAAI,CAAC,IAAI;sBACJ,IAAI,CAAC,QAAQ;yBACV,IAAI,CAAC,WAAW;yBAChB,IAAI,CAAC,WAAW;0BACf,IAAI,CAAC,YAAY;;;;;GAKxC;CACF,CAAC","sourcesContent":["import {Meta} from \"@storybook/web-components\";\nimport {html} from \"lit\";\nimport {ZListGroup} from \".\";\nimport {DividerSize, ListDividerType, ListSize, ListType} from \"../../../beans\";\nimport {getColorTokenArgConfig} from \"../../../utils/storybook-utils\";\nimport \"../z-list-element/index\";\nimport \"../z-list/index\";\nimport \"./index\";\n\nconst StoryMeta = {\n title: \"ZList/ZListGroup\",\n component: \"z-list-group\",\n argTypes: {\n size: {\n control: {\n type: \"inline-radio\",\n },\n options: Object.values(ListSize),\n },\n dividerType: {\n control: {\n type: \"inline-radio\",\n },\n options: Object.values(ListDividerType),\n },\n dividerSize: {\n control: {\n type: \"inline-radio\",\n },\n options: Object.values(DividerSize),\n },\n dividerColor: getColorTokenArgConfig(),\n listType: {\n control: {\n type: \"inline-radio\",\n },\n options: Object.values(ListType),\n },\n },\n args: {\n size: ListSize.SMALL,\n dividerType: ListDividerType.HEADER,\n dividerSize: DividerSize.SMALL,\n dividerColor: \"gray200\",\n listType: ListType.NONE,\n },\n} satisfies Meta<ZListGroup>;\nexport default StoryMeta;\n\nexport const Default = {\n render: (args) => html`\n <z-list>\n <z-list-group\n size=${args.size}\n divider-type=${args.dividerType}\n divider-size=${args.dividerSize}\n divider-color=${args.dividerColor}\n list-type=${args.listType}\n >\n <div slot=\"header-title\">Gruppo 1</div>\n <z-list-element\n size=${args.size}\n list-type=${args.listType}\n divider-type=${args.dividerType}\n divider-size=${args.dividerSize}\n divider-color=${args.dividerColor}\n >Elemento 1</z-list-element\n >\n <z-list-element\n size=${args.size}\n list-type=${args.listType}\n divider-type=${args.dividerType}\n divider-size=${args.dividerSize}\n divider-color=${args.dividerColor}\n >Elemento 2</z-list-element\n >\n <z-list-element\n size=${args.size}\n list-type=${args.listType}\n divider-type=${args.dividerType}\n divider-size=${args.dividerSize}\n divider-color=${args.dividerColor}\n >Elemento 3</z-list-element\n >\n </z-list-group>\n <z-list-group\n size=${args.size}\n divider-type=${args.dividerType}\n divider-size=${args.dividerSize}\n divider-color=${args.dividerColor}\n list-type=${args.listType}\n >\n <div slot=\"header-title\">Gruppo 1</div>\n <z-list-element\n size=${args.size}\n list-type=${args.listType}\n divider-type=${args.dividerType}\n divider-size=${args.dividerSize}\n divider-color=${args.dividerColor}\n >Elemento 1</z-list-element\n >\n <z-list-element\n size=${args.size}\n list-type=${args.listType}\n divider-type=${args.dividerType}\n divider-size=${args.dividerSize}\n divider-color=${args.dividerColor}\n >Elemento 2</z-list-element\n >\n <z-list-element\n size=${args.size}\n list-type=${args.listType}\n divider-type=${args.dividerType}\n divider-size=${args.dividerSize}\n divider-color=${args.dividerColor}\n >Elemento 3</z-list-element\n >\n </z-list-group>\n </z-list>\n `,\n};\n"]}
1	+ {"version":3,"file":"index.stories.js","sourceRoot":"","sources":["../../../../src/components/list/z-list-group/index.stories.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,IAAI,EAAC,MAAM,KAAK,CAAC;AAEzB,OAAO,EAAC,WAAW,EAAE,eAAe,EAAE,QAAQ,EAAE,QAAQ,EAAC,MAAM,gBAAgB,CAAC;AAChF,OAAO,EAAC,sBAAsB,EAAC,MAAM,gCAAgC,CAAC;AACtE,OAAO,yBAAyB,CAAC;AACjC,OAAO,iBAAiB,CAAC;AACzB,OAAO,SAAS,CAAC;AAEjB,MAAM,SAAS,GAAG;IAChB,KAAK,EAAE,kBAAkB;IACzB,SAAS,EAAE,cAAc;IACzB,QAAQ,EAAE;QACR,IAAI,EAAE;YACJ,OAAO,EAAE;gBACP,IAAI,EAAE,cAAc;aACrB;YACD,OAAO,EAAE,MAAM,CAAC,MAAM,CAAC,QAAQ,CAAC;SACjC;QACD,WAAW,EAAE;YACX,OAAO,EAAE;gBACP,IAAI,EAAE,cAAc;aACrB;YACD,OAAO,EAAE,MAAM,CAAC,MAAM,CAAC,eAAe,CAAC;SACxC;QACD,WAAW,EAAE;YACX,OAAO,EAAE;gBACP,IAAI,EAAE,cAAc;aACrB;YACD,OAAO,EAAE,MAAM,CAAC,MAAM,CAAC,WAAW,CAAC;SACpC;QACD,YAAY,EAAE,sBAAsB,EAAE;QACtC,QAAQ,EAAE;YACR,OAAO,EAAE;gBACP,IAAI,EAAE,cAAc;aACrB;YACD,OAAO,EAAE,MAAM,CAAC,MAAM,CAAC,QAAQ,CAAC;SACjC;KACF;IACD,IAAI,EAAE;QACJ,IAAI,EAAE,QAAQ,CAAC,KAAK;QACpB,WAAW,EAAE,eAAe,CAAC,MAAM;QACnC,WAAW,EAAE,WAAW,CAAC,KAAK;QAC9B,YAAY,EAAE,SAAS;QACvB,QAAQ,EAAE,QAAQ,CAAC,IAAI;KACxB;CACyB,CAAC;AAC7B,eAAe,SAAS,CAAC;AAEzB,MAAM,CAAC,MAAM,OAAO,GAAG;IACrB,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAA;;;eAGT,IAAI,CAAC,IAAI;uBACD,IAAI,CAAC,WAAW;uBAChB,IAAI,CAAC,WAAW;wBACf,IAAI,CAAC,YAAY;oBACrB,IAAI,CAAC,QAAQ;;;;iBAIhB,IAAI,CAAC,IAAI;sBACJ,IAAI,CAAC,QAAQ;yBACV,IAAI,CAAC,WAAW;yBAChB,IAAI,CAAC,WAAW;0BACf,IAAI,CAAC,YAAY;;;;iBAI1B,IAAI,CAAC,IAAI;sBACJ,IAAI,CAAC,QAAQ;yBACV,IAAI,CAAC,WAAW;yBAChB,IAAI,CAAC,WAAW;0BACf,IAAI,CAAC,YAAY;;;;iBAI1B,IAAI,CAAC,IAAI;sBACJ,IAAI,CAAC,QAAQ;yBACV,IAAI,CAAC,WAAW;yBAChB,IAAI,CAAC,WAAW;0BACf,IAAI,CAAC,YAAY;;;;;eAK5B,IAAI,CAAC,IAAI;uBACD,IAAI,CAAC,WAAW;uBAChB,IAAI,CAAC,WAAW;wBACf,IAAI,CAAC,YAAY;oBACrB,IAAI,CAAC,QAAQ;;;;iBAIhB,IAAI,CAAC,IAAI;sBACJ,IAAI,CAAC,QAAQ;yBACV,IAAI,CAAC,WAAW;yBAChB,IAAI,CAAC,WAAW;0BACf,IAAI,CAAC,YAAY;;;;iBAI1B,IAAI,CAAC,IAAI;sBACJ,IAAI,CAAC,QAAQ;yBACV,IAAI,CAAC,WAAW;yBAChB,IAAI,CAAC,WAAW;0BACf,IAAI,CAAC,YAAY;;;;iBAI1B,IAAI,CAAC,IAAI;sBACJ,IAAI,CAAC,QAAQ;yBACV,IAAI,CAAC,WAAW;yBAChB,IAAI,CAAC,WAAW;0BACf,IAAI,CAAC,YAAY;;;;;GAKxC;CACF,CAAC","sourcesContent":["import {Meta} from \"@storybook/web-components\";\nimport {html} from \"lit\";\nimport {ZListGroup} from \".\";\nimport {DividerSize, ListDividerType, ListSize, ListType} from \"../../../beans\";\nimport {getColorTokenArgConfig} from \"../../../utils/storybook-utils\";\nimport \"../z-list-element/index\";\nimport \"../z-list/index\";\nimport \"./index\";\n\nconst StoryMeta = {\n title: \"ZList/ZListGroup\",\n component: \"z-list-group\",\n argTypes: {\n size: {\n control: {\n type: \"inline-radio\",\n },\n options: Object.values(ListSize),\n },\n dividerType: {\n control: {\n type: \"inline-radio\",\n },\n options: Object.values(ListDividerType),\n },\n dividerSize: {\n control: {\n type: \"inline-radio\",\n },\n options: Object.values(DividerSize),\n },\n dividerColor: getColorTokenArgConfig(),\n listType: {\n control: {\n type: \"inline-radio\",\n },\n options: Object.values(ListType),\n },\n },\n args: {\n size: ListSize.SMALL,\n dividerType: ListDividerType.HEADER,\n dividerSize: DividerSize.SMALL,\n dividerColor: \"gray200\",\n listType: ListType.NONE,\n },\n} satisfies Meta<ZListGroup>;\nexport default StoryMeta;\n\nexport const Default = {\n render: (args) => html`\n <z-list>\n <z-list-group\n size=${args.size}\n divider-type=${args.dividerType}\n divider-size=${args.dividerSize}\n divider-color=${args.dividerColor}\n list-type=${args.listType}\n >\n <div slot=\"header-title\">Gruppo 1</div>\n <z-list-element\n size=${args.size}\n list-type=${args.listType}\n divider-type=${args.dividerType}\n divider-size=${args.dividerSize}\n divider-color=${args.dividerColor}\n >Elemento 1</z-list-element\n >\n <z-list-element\n size=${args.size}\n list-type=${args.listType}\n divider-type=${args.dividerType}\n divider-size=${args.dividerSize}\n divider-color=${args.dividerColor}\n >Elemento 2</z-list-element\n >\n <z-list-element\n size=${args.size}\n list-type=${args.listType}\n divider-type=${args.dividerType}\n divider-size=${args.dividerSize}\n divider-color=${args.dividerColor}\n >Elemento 3</z-list-element\n >\n </z-list-group>\n <z-list-group\n size=${args.size}\n divider-type=${args.dividerType}\n divider-size=${args.dividerSize}\n divider-color=${args.dividerColor}\n list-type=${args.listType}\n >\n <div slot=\"header-title\">Gruppo 1</div>\n <z-list-element\n size=${args.size}\n list-type=${args.listType}\n divider-type=${args.dividerType}\n divider-size=${args.dividerSize}\n divider-color=${args.dividerColor}\n >Elemento 1</z-list-element\n >\n <z-list-element\n size=${args.size}\n list-type=${args.listType}\n divider-type=${args.dividerType}\n divider-size=${args.dividerSize}\n divider-color=${args.dividerColor}\n >Elemento 2</z-list-element\n >\n <z-list-element\n size=${args.size}\n list-type=${args.listType}\n divider-type=${args.dividerType}\n divider-size=${args.dividerSize}\n divider-color=${args.dividerColor}\n >Elemento 3</z-list-element\n >\n </z-list-group>\n </z-list>\n `,\n};\n"]}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","sourceRoot":"","sources":["~~../../../../../../~~src/components/table/cells/z-td/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,mBAAmB,EAAC,MAAM,mBAAmB,CAAC;AAEnG;;;GAGG;AAMH,MAAM,OAAO,GAAG;;;sBAaL,KAAK;wBAQkB,IAAI;+BAMA,eAAe,CAAC,IAAI;0BAM3C,KAAK;;IAgBR,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;QAED,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,IAAI,CAAC,CAAC,CAAC;IAC7C,CAAC;IAEO,iBAAiB,CAAC,EAAc;QACtC,EAAE,CAAC,eAAe,EAAE,CAAC;QACrB,IAAI,CAAC,SAAS,CAAC,IAAI,GAAG,CAAC,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC;IAC7C,CAAC;IAED,iBAAiB;QACf,IAAI,CAAC,aAAa,EAAE,CAAC;IACvB,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDACH,IAAI,EAAC,MAAM,eACA,IAAI,CAAC,UAAU;YAE1B,8DAAa;YACZ,IAAI,CAAC,QAAQ,IAAI,CAChB,4DAAK,KAAK,EAAC,qCAAqC;gBAC9C,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,EAAwB,CAAC,EAC1D,OAAO,EAAE,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,IAAI,CAAC,GAC1C;gBACF,kEACE,KAAK,EAAC,cAAc,EACpB,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,SAAS,GAAG,EAAyB,CAAC,EACzD,MAAM,EAAE,IAAI,CAAC,WAA0B,EACvC,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, VisibilityCondition} from \"../../../../beans\";\n\n/*\n ZTd component.\n * @slot - ZTd content.\n /\n@Component({\n tag: \"z-td\",\n styleUrl: \"styles.css\",\n shadow: true,\n})\nexport class ZTd {\n @Element() host: HTMLZTdElement;\n\n /\n Number of columns that the cell should span.\n /\n @Prop()\n colspan: number;\n\n /\n Whether the cell should stick.\n /\n @Prop({reflect: true})\n sticky = false;\n\n /\n Enables the contextual menu.\n * Can be set to \"hover\" or \"always\" to show the button only on cell hover or always.\n * Set a nullish value to hide the menu button.\n /\n @Prop({reflect: true})\n showMenu: VisibilityCondition = null;\n\n /\n Set the popover position, the default is \"auto\".\n /\n @Prop()\n popoverPosition?: PopoverPosition = PopoverPosition.AUTO;\n\n /\n Store the open state of the menu.\n /\n @State()\n isMenuOpen = false;\n\n private menuTrigger: HTMLZButtonElement;\n\n private popoverEl: HTMLZPopoverElement;\n\n /\n Emitted when the value of the `colspan` changes.\n */\n @Event({\n bubbles: true,\n cancelable: false,\n })\n colspanChange: EventEmitter<number>;\n\n @Watch(\"colspan\")\n protected updateColspan(): void {\n if (this.colspan) {\n this.host.style.gridColumn = `span ${this.colspan}`;\n } else {\n this.host.style.removeProperty(\"grid-column\");\n }\n\n this.colspanChange.emit(this.colspan \|\| 1);\n }\n\n private onMenuButtonClick(ev: MouseEvent): void {\n ev.stopPropagation();\n this.popoverEl.open = !this.popoverEl.open;\n }\n\n componentWillLoad(): void {\n this.updateColspan();\n }\n\n render(): HTMLZTdElement {\n return (\n <Host\n role=\"cell\"\n menu-open={this.isMenuOpen}\n >\n <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 </Host>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/components/table/cells/z-td/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,mBAAmB,EAAC,MAAM,mBAAmB,CAAC;AAEnG;;;GAGG;AAMH,MAAM,OAAO,GAAG;;;sBAaL,KAAK;wBAQkB,IAAI;+BAMA,eAAe,CAAC,IAAI;0BAM3C,KAAK;;IAgBR,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;QAED,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,IAAI,CAAC,CAAC,CAAC;IAC7C,CAAC;IAEO,iBAAiB,CAAC,EAAc;QACtC,EAAE,CAAC,eAAe,EAAE,CAAC;QACrB,IAAI,CAAC,SAAS,CAAC,IAAI,GAAG,CAAC,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC;IAC7C,CAAC;IAED,iBAAiB;QACf,IAAI,CAAC,aAAa,EAAE,CAAC;IACvB,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDACH,IAAI,EAAC,MAAM,eACA,IAAI,CAAC,UAAU;YAE1B,8DAAa;YACZ,IAAI,CAAC,QAAQ,IAAI,CAChB,4DAAK,KAAK,EAAC,qCAAqC;gBAC9C,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,EAAwB,CAAC,EAC1D,OAAO,EAAE,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,IAAI,CAAC,GAC1C;gBACF,kEACE,KAAK,EAAC,cAAc,EACpB,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,SAAS,GAAG,EAAyB,CAAC,EACzD,MAAM,EAAE,IAAI,CAAC,WAA0B,EACvC,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, VisibilityCondition} from \"../../../../beans\";\n\n/*\n ZTd component.\n * @slot - ZTd content.\n /\n@Component({\n tag: \"z-td\",\n styleUrl: \"styles.css\",\n shadow: true,\n})\nexport class ZTd {\n @Element() host: HTMLZTdElement;\n\n /\n Number of columns that the cell should span.\n /\n @Prop()\n colspan: number;\n\n /\n Whether the cell should stick.\n /\n @Prop({reflect: true})\n sticky = false;\n\n /\n Enables the contextual menu.\n * Can be set to \"hover\" or \"always\" to show the button only on cell hover or always.\n * Set a nullish value to hide the menu button.\n /\n @Prop({reflect: true})\n showMenu: VisibilityCondition = null;\n\n /\n Set the popover position, the default is \"auto\".\n /\n @Prop()\n popoverPosition?: PopoverPosition = PopoverPosition.AUTO;\n\n /\n Store the open state of the menu.\n /\n @State()\n isMenuOpen = false;\n\n private menuTrigger: HTMLZButtonElement;\n\n private popoverEl: HTMLZPopoverElement;\n\n /\n Emitted when the value of the `colspan` changes.\n */\n @Event({\n bubbles: true,\n cancelable: false,\n })\n colspanChange: EventEmitter<number>;\n\n @Watch(\"colspan\")\n protected updateColspan(): void {\n if (this.colspan) {\n this.host.style.gridColumn = `span ${this.colspan}`;\n } else {\n this.host.style.removeProperty(\"grid-column\");\n }\n\n this.colspanChange.emit(this.colspan \|\| 1);\n }\n\n private onMenuButtonClick(ev: MouseEvent): void {\n ev.stopPropagation();\n this.popoverEl.open = !this.popoverEl.open;\n }\n\n componentWillLoad(): void {\n this.updateColspan();\n }\n\n render(): HTMLZTdElement {\n return (\n <Host\n role=\"cell\"\n menu-open={this.isMenuOpen}\n >\n <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 </Host>\n );\n }\n}\n"]}

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":"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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 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 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"]}

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"]}