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

@zanichelli/albe-web-components 16.3.0-rc1 → 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 (1111) hide show

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

	@@ -1 +1 @@
1	- {"version":3,"file":"index.stories.js","sourceRoot":"","sources":["~~../../../../~~src/components/z-carousel/index.stories.ts"],"names":[],"mappings":"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","sourcesContent":["import {Meta, StoryObj} from \"@storybook/web-components\";\nimport {html} from \"lit\";\nimport {repeat} from \"lit/directives/repeat.js\";\nimport {type ZCarousel} from \".\";\nimport {CarouselArrowsPosition, CarouselProgressMode} from \"../../beans\";\nimport {CSSVarsArguments} from \"../../utils/storybook-utils\";\nimport \"../z-ghost-loading/index\";\nimport \"./index\";\nimport \"./index.stories.css\";\n\ntype ZCarouselStoriesArgs = ZCarousel & {itemsCount: number} & CSSVarsArguments<\"z-carousel-gutter\">;\n\n/*\n This component was conceived as a list of elements to respect the rules of accessibility (https://www.w3.org/WAI/tutorials/carousels/working-example/).\n * Pass any number of elements inside its main `slot`.\n * @example```html\n * <z-carousel>\n * <li>element</li>\n * <li>element</li>\n * <li>element</li>\n * </z-carousel>\n * ```\n * > Note: always use `li` elements as direct children of `z-carousel`, as it wraps them with an `ul` element.\n * You can set the gutter between the elements by using the `--z-carousel-gutter` custom property.\n * @example```css\n * z-carousel {\n * --z-carousel-gutter: calc(var(--space-unit) * 2);\n * }```\n /\nconst StoryMeta = {\n title: \"ZCarousel\",\n component: \"z-carousel\",\n decorators: [(Story) => html`<div class=\"z-carousel-story-container\">${Story()}</div>`],\n} satisfies Meta<ZCarouselStoriesArgs>;\n\nexport default StoryMeta;\n\ntype Story = StoryObj<ZCarouselStoriesArgs>;\n\nexport const SlideshowWithArrowsOver = {\n args: {\n \"label\": \"\",\n \"--z-carousel-gutter\": \"var(--space-unit)\",\n \"infinite\": false,\n \"fixedArrows\": true,\n \"itemsCount\": 8,\n },\n render: (args) =>\n html`<z-carousel\n .arrowsPosition=${CarouselArrowsPosition.OVER}\n .fixedArrows=${args.fixedArrows}\n .infinite=${args.infinite}\n label=${args.label}\n style=\"--z-carousel-gutter: ${args[\"--z-carousel-gutter\"]}\"\n >\n ${repeat(\n [...new Array(args.itemsCount)].map((_, i) => i),\n (i) => i,\n (_, index) => html`<li><div class=\"carousel-box\">${index + 1}</div></li>`\n )}\n </z-carousel>`,\n} satisfies Story;\n\nexport const SingleMode = {\n parameters: {\n layout: \"centered\",\n },\n argTypes: {\n arrowsPosition: {\n control: {\n type: \"inline-radio\",\n },\n options: Object.values(CarouselArrowsPosition),\n },\n progressMode: {\n control: {\n type: \"inline-radio\",\n },\n options: Object.values(CarouselProgressMode),\n },\n },\n args: {\n label: \"Carousel title\",\n progressMode: CarouselProgressMode.DOTS,\n arrowsPosition: CarouselArrowsPosition.BOTTOM,\n infinite: false,\n fixedArrows: true,\n itemsCount: 8,\n },\n render: (args) =>\n html`<z-carousel\n .arrowsPosition=${args.arrowsPosition}\n .fixedArrows=${args.fixedArrows}\n .infinite=${args.infinite}\n .progressMode=${args.progressMode}\n .single=${true}\n label=${args.label}\n >\n ${repeat(\n [...new Array(args.itemsCount)].map((_, i) => i),\n (i) => i,\n (_, index) => html`<li><div class=\"carousel-box\">${index + 1}</div></li>`\n )}\n </z-carousel>`,\n} satisfies Story;\n\n/\n You can handle ghost loading for the whole z-carousel by setting two properties:\n * - `isLoading` (boolean): to show a `z-ghost-loading` component instead of the carousel content.\n * - `ghostLoadingHeight` (number): to set the height of the `z-ghost-loading` component.\n * You can also manually handle ghost loading by putting <z-ghost-loading> elements as items.\n */\nexport const GhostLoading = {\n args: {\n label: \"Carousel title\",\n ghostLoadingHeight: 265,\n },\n parameters: {\n controls: {\n exclude: [\"infinite\"],\n },\n },\n render: (args) =>\n html`<z-carousel\n label=${args.label}\n .isLoading=${true}\n .ghostLoadingHeight=${args.ghostLoadingHeight}\n ></z-carousel>`,\n} satisfies Story;\n\nexport const LoadingItems = {\n args: {\n \"label\": \"Carousel title\",\n \"--z-carousel-gutter\": \"8px\",\n },\n parameters: {\n controls: {\n exclude: [\"infinite\"],\n },\n },\n render: (args) =>\n html`<z-carousel\n label=${args.label}\n .infinite=${args.infinite}\n style=\"--z-carousel-gutter: ${args[\"--z-carousel-gutter\"]}\"\n >\n ${repeat(\n new Array(8),\n () =>\n html`<li>\n <div class=\"carousel-box-loading\">\n <z-ghost-loading></z-ghost-loading>\n </div>\n </li>`\n )}\n </z-carousel>`,\n} satisfies Story;\n"]}
1	+ {"version":3,"file":"index.stories.js","sourceRoot":"","sources":["../../../src/components/z-carousel/index.stories.ts"],"names":[],"mappings":"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","sourcesContent":["import {Meta, StoryObj} from \"@storybook/web-components\";\nimport {html} from \"lit\";\nimport {repeat} from \"lit/directives/repeat.js\";\nimport {type ZCarousel} from \".\";\nimport {CarouselArrowsPosition, CarouselProgressMode} from \"../../beans\";\nimport {CSSVarsArguments} from \"../../utils/storybook-utils\";\nimport \"../z-ghost-loading/index\";\nimport \"./index\";\nimport \"./index.stories.css\";\n\ntype ZCarouselStoriesArgs = ZCarousel & {itemsCount: number} & CSSVarsArguments<\"z-carousel-gutter\">;\n\n/*\n This component was conceived as a list of elements to respect the rules of accessibility (https://www.w3.org/WAI/tutorials/carousels/working-example/).\n * Pass any number of elements inside its main `slot`.\n * @example```html\n * <z-carousel>\n * <li>element</li>\n * <li>element</li>\n * <li>element</li>\n * </z-carousel>\n * ```\n * > Note: always use `li` elements as direct children of `z-carousel`, as it wraps them with an `ul` element.\n * You can set the gutter between the elements by using the `--z-carousel-gutter` custom property.\n * @example```css\n * z-carousel {\n * --z-carousel-gutter: calc(var(--space-unit) * 2);\n * }```\n /\nconst StoryMeta = {\n title: \"ZCarousel\",\n component: \"z-carousel\",\n decorators: [(Story) => html`<div class=\"z-carousel-story-container\">${Story()}</div>`],\n} satisfies Meta<ZCarouselStoriesArgs>;\n\nexport default StoryMeta;\n\ntype Story = StoryObj<ZCarouselStoriesArgs>;\n\nexport const SlideshowWithArrowsOver = {\n args: {\n \"label\": \"\",\n \"--z-carousel-gutter\": \"var(--space-unit)\",\n \"infinite\": false,\n \"fixedArrows\": true,\n \"itemsCount\": 8,\n },\n render: (args) =>\n html`<z-carousel\n .arrowsPosition=${CarouselArrowsPosition.OVER}\n .fixedArrows=${args.fixedArrows}\n .infinite=${args.infinite}\n label=${args.label}\n style=\"--z-carousel-gutter: ${args[\"--z-carousel-gutter\"]}\"\n >\n ${repeat(\n [...new Array(args.itemsCount)].map((_, i) => i),\n (i) => i,\n (_, index) => html`<li><div class=\"carousel-box\">${index + 1}</div></li>`\n )}\n </z-carousel>`,\n} satisfies Story;\n\nexport const SingleMode = {\n parameters: {\n layout: \"centered\",\n },\n argTypes: {\n arrowsPosition: {\n control: {\n type: \"inline-radio\",\n },\n options: Object.values(CarouselArrowsPosition),\n },\n progressMode: {\n control: {\n type: \"inline-radio\",\n },\n options: Object.values(CarouselProgressMode),\n },\n },\n args: {\n label: \"Carousel title\",\n progressMode: CarouselProgressMode.DOTS,\n arrowsPosition: CarouselArrowsPosition.BOTTOM,\n infinite: false,\n fixedArrows: true,\n itemsCount: 8,\n },\n render: (args) =>\n html`<z-carousel\n .arrowsPosition=${args.arrowsPosition}\n .fixedArrows=${args.fixedArrows}\n .infinite=${args.infinite}\n .progressMode=${args.progressMode}\n .single=${true}\n label=${args.label}\n >\n ${repeat(\n [...new Array(args.itemsCount)].map((_, i) => i),\n (i) => i,\n (_, index) => html`<li><div class=\"carousel-box\">${index + 1}</div></li>`\n )}\n </z-carousel>`,\n} satisfies Story;\n\n/\n You can handle ghost loading for the whole z-carousel by setting two properties:\n * - `isLoading` (boolean): to show a `z-ghost-loading` component instead of the carousel content.\n * - `ghostLoadingHeight` (number): to set the height of the `z-ghost-loading` component.\n * You can also manually handle ghost loading by putting <z-ghost-loading> elements as items.\n */\nexport const GhostLoading = {\n args: {\n label: \"Carousel title\",\n ghostLoadingHeight: 265,\n },\n parameters: {\n controls: {\n exclude: [\"infinite\"],\n },\n },\n render: (args) =>\n html`<z-carousel\n label=${args.label}\n .isLoading=${true}\n .ghostLoadingHeight=${args.ghostLoadingHeight}\n ></z-carousel>`,\n} satisfies Story;\n\nexport const LoadingItems = {\n args: {\n \"label\": \"Carousel title\",\n \"--z-carousel-gutter\": \"8px\",\n },\n parameters: {\n controls: {\n exclude: [\"infinite\"],\n },\n },\n render: (args) =>\n html`<z-carousel\n label=${args.label}\n .infinite=${args.infinite}\n style=\"--z-carousel-gutter: ${args[\"--z-carousel-gutter\"]}\"\n >\n ${repeat(\n new Array(8),\n () =>\n html`<li>\n <div class=\"carousel-box-loading\">\n <z-ghost-loading></z-ghost-loading>\n </div>\n </li>`\n )}\n </z-carousel>`,\n} satisfies Story;\n"]}

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

@@ -9,11 +9,11 @@ export class ZChip {
         this.ariaLabel = "";
     }
     render() {
-        return (h("div", { key: '0f797663b7a934dcb990db5782e9df5e8fa192c0', class: {
+        return (h("div", { key: '6e341c6b23f7ec91070af8e6790832baa2065338', class: {
                 "z-chip-container": true,
                 "z-chip-interactive": !!this.interactiveIcon,
                 [this.type]: true,
-            }, "aria-disabled": this.disabled }, this.icon && h("z-icon", { key: 'f64c81514c49e4b03d7bf2cdc62f8bc03580f8cc', name: this.icon }), h("slot", { key: '0edcc5e0273724b5c4174a665e4fa134de224835' }), this.interactiveIcon && (h("button", { key: '987b1d2a9aa44885c2cabee2b334c6e217810edf', type: "button", onClick: () => this.interactiveIconClick.emit(), "aria-label": this.ariaLabel, disabled: this.disabled }, h("z-icon", { key: 'e48611813e874ccab4233635fdd4cfd3a8932aee', class: "interactive-icon", name: this.interactiveIcon })))));
+            }, "aria-disabled": this.disabled }, this.icon && h("z-icon", { key: '8340f5866aa0b7ae4eefe07fd528d93be8fe6a53', name: this.icon }), h("slot", { key: '36b769d7fd5e8485d4583b094bb6f7d28362a503' }), this.interactiveIcon && (h("button", { key: '1859652a7c22fa0449f6f246d83b20ca3b063aa8', type: "button", onClick: () => this.interactiveIconClick.emit(), "aria-label": this.ariaLabel, disabled: this.disabled }, h("z-icon", { key: '1f21cc01c122a3d605b038cbc12d43294cac838b', class: "interactive-icon", name: this.interactiveIcon })))));
     }
     static get is() { return "z-chip"; }
     static get encapsulation() { return "scoped"; }

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

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","sourceRoot":"","sources":["~~../../../../~~src/components/z-chip/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAE,OAAO,EAAE,KAAK,EAAgB,IAAI,EAAE,CAAC,EAAC,MAAM,eAAe,CAAC;AAC/E,OAAO,EAAC,SAAS,EAAC,MAAM,aAAa,CAAC;AAQtC,MAAM,OAAO,KAAK;;;oBASG,SAAS,CAAC,OAAO;;wBAQf,KAAK;yBAId,EAAE;;IAMd,MAAM;QACJ,OAAO,CACL,4DACE,KAAK,EAAE;gBACL,kBAAkB,EAAE,IAAI;gBACxB,oBAAoB,EAAE,CAAC,CAAC,IAAI,CAAC,eAAe;gBAC5C,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,IAAI;aAClB,mBACc,IAAI,CAAC,QAAQ;YAE3B,IAAI,CAAC,IAAI,IAAI,+DAAQ,IAAI,EAAE,IAAI,CAAC,IAAI,GAAI;YACzC,8DAAQ;YACP,IAAI,CAAC,eAAe,IAAI,CACvB,+DACE,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,oBAAoB,CAAC,IAAI,EAAE,gBACnC,IAAI,CAAC,SAAS,EAC1B,QAAQ,EAAE,IAAI,CAAC,QAAQ;gBAEvB,+DACE,KAAK,EAAC,kBAAkB,EACxB,IAAI,EAAE,IAAI,CAAC,eAAe,GAC1B,CACK,CACV,CACG,CACP,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {Component, Element, Event, EventEmitter, Prop, h} from \"@stencil/core\";\nimport {ZChipType} from \"../../beans\";\n\n@Component({\n tag: \"z-chip\",\n styleUrl: \"styles.css\",\n shadow: false,\n scoped: true,\n})\nexport class ZChip {\n @Element() el: HTMLZChipElement;\n\n /** Non interactive icon /\n @Prop()\n icon?: string;\n\n /* z-chip size type, can be default, medium or small /\n @Prop({reflect: true})\n type?: ZChipType = ZChipType.DEFAULT;\n\n /* z-chip interactive icon /\n @Prop({reflect: true})\n interactiveIcon?: string;\n\n /* set z-chip as disabled /\n @Prop({reflect: true})\n disabled?: boolean = false;\n\n /* z-chip aria-label string /\n @Prop()\n ariaLabel = \"\";\n\n /* click on interactive icon */\n @Event()\n interactiveIconClick: EventEmitter;\n\n render(): HTMLDivElement {\n return (\n <div\n class={{\n \"z-chip-container\": true,\n \"z-chip-interactive\": !!this.interactiveIcon,\n [this.type]: true,\n }}\n aria-disabled={this.disabled}\n >\n {this.icon && <z-icon name={this.icon} />}\n <slot />\n {this.interactiveIcon && (\n <button\n type=\"button\"\n onClick={() => this.interactiveIconClick.emit()}\n aria-label={this.ariaLabel}\n disabled={this.disabled}\n >\n <z-icon\n class=\"interactive-icon\"\n name={this.interactiveIcon}\n />\n </button>\n )}\n </div>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/z-chip/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAE,OAAO,EAAE,KAAK,EAAgB,IAAI,EAAE,CAAC,EAAC,MAAM,eAAe,CAAC;AAC/E,OAAO,EAAC,SAAS,EAAC,MAAM,aAAa,CAAC;AAQtC,MAAM,OAAO,KAAK;;;oBASG,SAAS,CAAC,OAAO;;wBAQf,KAAK;yBAId,EAAE;;IAMd,MAAM;QACJ,OAAO,CACL,4DACE,KAAK,EAAE;gBACL,kBAAkB,EAAE,IAAI;gBACxB,oBAAoB,EAAE,CAAC,CAAC,IAAI,CAAC,eAAe;gBAC5C,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,IAAI;aAClB,mBACc,IAAI,CAAC,QAAQ;YAE3B,IAAI,CAAC,IAAI,IAAI,+DAAQ,IAAI,EAAE,IAAI,CAAC,IAAI,GAAI;YACzC,8DAAQ;YACP,IAAI,CAAC,eAAe,IAAI,CACvB,+DACE,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,oBAAoB,CAAC,IAAI,EAAE,gBACnC,IAAI,CAAC,SAAS,EAC1B,QAAQ,EAAE,IAAI,CAAC,QAAQ;gBAEvB,+DACE,KAAK,EAAC,kBAAkB,EACxB,IAAI,EAAE,IAAI,CAAC,eAAe,GAC1B,CACK,CACV,CACG,CACP,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {Component, Element, Event, EventEmitter, Prop, h} from \"@stencil/core\";\nimport {ZChipType} from \"../../beans\";\n\n@Component({\n tag: \"z-chip\",\n styleUrl: \"styles.css\",\n shadow: false,\n scoped: true,\n})\nexport class ZChip {\n @Element() el: HTMLZChipElement;\n\n /** Non interactive icon /\n @Prop()\n icon?: string;\n\n /* z-chip size type, can be default, medium or small /\n @Prop({reflect: true})\n type?: ZChipType = ZChipType.DEFAULT;\n\n /* z-chip interactive icon /\n @Prop({reflect: true})\n interactiveIcon?: string;\n\n /* set z-chip as disabled /\n @Prop({reflect: true})\n disabled?: boolean = false;\n\n /* z-chip aria-label string /\n @Prop()\n ariaLabel = \"\";\n\n /* click on interactive icon */\n @Event()\n interactiveIconClick: EventEmitter;\n\n render(): HTMLDivElement {\n return (\n <div\n class={{\n \"z-chip-container\": true,\n \"z-chip-interactive\": !!this.interactiveIcon,\n [this.type]: true,\n }}\n aria-disabled={this.disabled}\n >\n {this.icon && <z-icon name={this.icon} />}\n <slot />\n {this.interactiveIcon && (\n <button\n type=\"button\"\n onClick={() => this.interactiveIconClick.emit()}\n aria-label={this.ariaLabel}\n disabled={this.disabled}\n >\n <z-icon\n class=\"interactive-icon\"\n name={this.interactiveIcon}\n />\n </button>\n )}\n </div>\n );\n }\n}\n"]}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"index.stories.js","sourceRoot":"","sources":["~~../../../../~~src/components/z-chip/index.stories.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,IAAI,EAAC,MAAM,KAAK,CAAC;AAEzB,OAAO,EAAC,SAAS,EAAC,MAAM,aAAa,CAAC;AACtC,OAAO,EAAC,KAAK,EAAC,MAAM,yBAAyB,CAAC;AAC9C,OAAO,SAAS,CAAC;AAEjB,MAAM,SAAS,GAAG;IAChB,KAAK,EAAE,OAAO;IACd,QAAQ,EAAE;QACR,IAAI,EAAE;YACJ,OAAO,EAAE,MAAM,CAAC,MAAM,CAAC,SAAS,CAAC;YACjC,OAAO,EAAE;gBACP,IAAI,EAAE,OAAO;aACd;SACF;KACF;IACD,IAAI,EAAE;QACJ,IAAI,EAAE,SAAS,CAAC,OAAO;QACvB,IAAI,EAAE,KAAK;KACZ;CACoB,CAAC;AAExB,eAAe,SAAS,CAAC;AAIzB,MAAM,CAAC,MAAM,OAAO,GAAG;IACrB,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAA;;aAEX,IAAI,CAAC,IAAI;aACT,IAAI,CAAC,IAAI;;;GAGnB;CACc,CAAC;AAElB,MAAM,CAAC,MAAM,mBAAmB,GAAG;IACjC,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAA;;aAEX,IAAI,CAAC,IAAI;aACT,IAAI,CAAC,IAAI;;;;;GAKnB;CACc,CAAC;AAElB,MAAM,CAAC,MAAM,eAAe,GAAG;IAC7B,QAAQ,EAAE;QACR,IAAI,EAAE;YACJ,OAAO,EAAE,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC;YAC3B,OAAO,EAAE;gBACP,IAAI,EAAE,QAAQ;aACf;SACF;QACD,eAAe,EAAE;YACf,OAAO,EAAE,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC;YAC3B,OAAO,EAAE;gBACP,IAAI,EAAE,QAAQ;aACf;SACF;KACF;IACD,IAAI,EAAE;QACJ,eAAe,EAAE,kBAAkB;QACnC,QAAQ,EAAE,KAAK;KAChB;IACD,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAA;;aAEX,IAAI,CAAC,IAAI;aACT,IAAI,CAAC,IAAI;iBACL,IAAI,CAAC,QAAQ;yBACL,IAAI,CAAC,eAAe;;;GAG1C;CACc,CAAC","sourcesContent":["import {Meta, StoryObj} from \"@storybook/web-components\";\nimport {html} from \"lit\";\nimport {type ZChip} from \".\";\nimport {ZChipType} from \"../../beans\";\nimport {ICONS} from \"../../constants/iconset\";\nimport \"./index\";\n\nconst StoryMeta = {\n title: \"ZChip\",\n argTypes: {\n type: {\n options: Object.values(ZChipType),\n control: {\n type: \"radio\",\n },\n },\n },\n args: {\n type: ZChipType.DEFAULT,\n icon: \"pdf\",\n },\n} satisfies Meta<ZChip>;\n\nexport default StoryMeta;\n\ntype Story = StoryObj<ZChip>;\n\nexport const Default = {\n render: (args) => html`\n <z-chip\n type=${args.type}\n icon=${args.icon}\n >my custom element</z-chip\n >\n `,\n} satisfies Story;\n\nexport const DifferentFontWeight = {\n render: (args) => html`\n <z-chip\n type=${args.type}\n icon=${args.icon}\n >\n <strong>my</strong>\n <span style=\"margin-left: 4px\">custom element</span>\n </z-chip>\n `,\n} satisfies Story;\n\nexport const InteractiveIcon = {\n argTypes: {\n icon: {\n options: Object.keys(ICONS),\n control: {\n type: \"select\",\n },\n },\n interactiveIcon: {\n options: Object.keys(ICONS),\n control: {\n type: \"select\",\n },\n },\n },\n args: {\n interactiveIcon: \"multiply-circled\",\n disabled: false,\n },\n render: (args) => html`\n <z-chip\n type=${args.type}\n icon=${args.icon}\n disabled=${args.disabled}\n .interactiveIcon=${args.interactiveIcon}\n >my custom element</z-chip\n >\n `,\n} satisfies Story;\n"]}
1	+ {"version":3,"file":"index.stories.js","sourceRoot":"","sources":["../../../src/components/z-chip/index.stories.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,IAAI,EAAC,MAAM,KAAK,CAAC;AAEzB,OAAO,EAAC,SAAS,EAAC,MAAM,aAAa,CAAC;AACtC,OAAO,EAAC,KAAK,EAAC,MAAM,yBAAyB,CAAC;AAC9C,OAAO,SAAS,CAAC;AAEjB,MAAM,SAAS,GAAG;IAChB,KAAK,EAAE,OAAO;IACd,QAAQ,EAAE;QACR,IAAI,EAAE;YACJ,OAAO,EAAE,MAAM,CAAC,MAAM,CAAC,SAAS,CAAC;YACjC,OAAO,EAAE;gBACP,IAAI,EAAE,OAAO;aACd;SACF;KACF;IACD,IAAI,EAAE;QACJ,IAAI,EAAE,SAAS,CAAC,OAAO;QACvB,IAAI,EAAE,KAAK;KACZ;CACoB,CAAC;AAExB,eAAe,SAAS,CAAC;AAIzB,MAAM,CAAC,MAAM,OAAO,GAAG;IACrB,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAA;;aAEX,IAAI,CAAC,IAAI;aACT,IAAI,CAAC,IAAI;;;GAGnB;CACc,CAAC;AAElB,MAAM,CAAC,MAAM,mBAAmB,GAAG;IACjC,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAA;;aAEX,IAAI,CAAC,IAAI;aACT,IAAI,CAAC,IAAI;;;;;GAKnB;CACc,CAAC;AAElB,MAAM,CAAC,MAAM,eAAe,GAAG;IAC7B,QAAQ,EAAE;QACR,IAAI,EAAE;YACJ,OAAO,EAAE,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC;YAC3B,OAAO,EAAE;gBACP,IAAI,EAAE,QAAQ;aACf;SACF;QACD,eAAe,EAAE;YACf,OAAO,EAAE,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC;YAC3B,OAAO,EAAE;gBACP,IAAI,EAAE,QAAQ;aACf;SACF;KACF;IACD,IAAI,EAAE;QACJ,eAAe,EAAE,kBAAkB;QACnC,QAAQ,EAAE,KAAK;KAChB;IACD,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAA;;aAEX,IAAI,CAAC,IAAI;aACT,IAAI,CAAC,IAAI;iBACL,IAAI,CAAC,QAAQ;yBACL,IAAI,CAAC,eAAe;;;GAG1C;CACc,CAAC","sourcesContent":["import {Meta, StoryObj} from \"@storybook/web-components\";\nimport {html} from \"lit\";\nimport {type ZChip} from \".\";\nimport {ZChipType} from \"../../beans\";\nimport {ICONS} from \"../../constants/iconset\";\nimport \"./index\";\n\nconst StoryMeta = {\n title: \"ZChip\",\n argTypes: {\n type: {\n options: Object.values(ZChipType),\n control: {\n type: \"radio\",\n },\n },\n },\n args: {\n type: ZChipType.DEFAULT,\n icon: \"pdf\",\n },\n} satisfies Meta<ZChip>;\n\nexport default StoryMeta;\n\ntype Story = StoryObj<ZChip>;\n\nexport const Default = {\n render: (args) => html`\n <z-chip\n type=${args.type}\n icon=${args.icon}\n >my custom element</z-chip\n >\n `,\n} satisfies Story;\n\nexport const DifferentFontWeight = {\n render: (args) => html`\n <z-chip\n type=${args.type}\n icon=${args.icon}\n >\n <strong>my</strong>\n <span style=\"margin-left: 4px\">custom element</span>\n </z-chip>\n `,\n} satisfies Story;\n\nexport const InteractiveIcon = {\n argTypes: {\n icon: {\n options: Object.keys(ICONS),\n control: {\n type: \"select\",\n },\n },\n interactiveIcon: {\n options: Object.keys(ICONS),\n control: {\n type: \"select\",\n },\n },\n },\n args: {\n interactiveIcon: \"multiply-circled\",\n disabled: false,\n },\n render: (args) => html`\n <z-chip\n type=${args.type}\n icon=${args.icon}\n disabled=${args.disabled}\n .interactiveIcon=${args.interactiveIcon}\n >my custom element</z-chip\n >\n `,\n} satisfies Story;\n"]}

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

@@ -251,7 +251,7 @@ export class ZCombobox {
         return (h("div", { class: "check-all-wrapper" }, h("z-input", { type: InputType.CHECKBOX, checked: allChecked, htmlid: checkAllId, class: this.getCheckboxClass(), label: allChecked ? this.uncheckalltext : this.checkalltext, disabled: this.maxcheckableitems && this.maxcheckableitems < this.itemsList.length, size: this.size === ControlSize.X_SMALL ? ControlSize.SMALL : this.size, role: "option", "aria-selected": allChecked ? "true" : "false", onKeyDown: (e) => this.handleSelectArrowsNavigation(e, checkAllId), onInputCheck: (e) => this.checkAll(e.detail.checked), onInputFocus: (e) => this.handleCheckboxFocus(e.detail.id) })));
     }
     render() {
-        return (h("div", { key: '2e564b2458489f06134e2de89b175be82aaebd11', "data-action": `combo-${this.inputid}`, class: { open: this.isopen, fixed: this.isfixed, disabled: this.disabled }, id: this.inputid }, this.renderHeader(), !this.disabled && this.renderContent()));
+        return (h("div", { key: '75e48688980a202cd06c3613cd337264f4b42496', "data-action": `combo-${this.inputid}`, class: { open: this.isopen, fixed: this.isfixed, disabled: this.disabled }, id: this.inputid }, this.renderHeader(), !this.disabled && this.renderContent()));
     }
     static get is() { return "z-combobox"; }
     static get encapsulation() { return "shadow"; }

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

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/z-combobox/index.tsx"],"names":[],"mappings":"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","sourcesContent":["import {Component, Element, Event, EventEmitter, Prop, State, Watch, h} from \"@stencil/core\";\nimport {ComboItem, ControlSize, InputType, KeyboardCode, ListDividerType, ListSize} from \"../../beans\";\nimport {ZMyzListItem} from \"../../snowflakes/myz/list/z-myz-list-item\";\nimport {handleKeyboardSubmit, randomId} from \"../../utils/utils\";\nimport {ZInput} from \"../z-input\";\n\n@Component({\n tag: \"z-combobox\",\n styleUrl: \"styles.css\",\n shadow: true,\n})\nexport class ZCombobox {\n @Element() element: HTMLZComboboxElement;\n\n /** input unique id /\n @Prop()\n inputid = `combo-${randomId()}`;\n\n /* list items array /\n @Prop()\n items: ComboItem[] \| string;\n\n /* label text /\n @Prop()\n label: string;\n\n /* the combobox is disabled /\n @Prop({reflect: true})\n disabled?: boolean = false;\n\n /* show search input flag (optional) /\n @Prop()\n hassearch?: boolean = false;\n\n /* search input label text (optional) /\n @Prop()\n searchlabel?: string;\n\n /* search input placeholder text (optional) /\n @Prop()\n searchplaceholder?: string;\n\n /* search input title text (optional) /\n @Prop()\n searchtitle?: string;\n\n /* no result text message /\n @Prop()\n noresultslabel?: string = \"Nessun risultato\";\n\n /* toggle combo list opening flag /\n @Prop({mutable: true})\n isopen = false;\n\n /* fixed style flag /\n @Prop()\n isfixed = false;\n\n /* close combobox list text /\n @Prop()\n closesearchtext?: string = \"Chiudi\";\n\n /* show \"check all\" checkbox (optional) /\n @Prop()\n hascheckall?: boolean = false;\n\n /* check all label (optional) /\n @Prop()\n checkalltext?: string = \"Seleziona tutti\";\n\n /* uncheck all label (optional) /\n @Prop()\n uncheckalltext?: string = \"Deseleziona tutti\";\n\n /* max number of checkable items (0 = unlimited) /\n @Prop()\n maxcheckableitems = 0;\n\n /* group items by category /\n @Prop()\n hasgroupitems?: boolean;\n\n /* Available sizes: `big`, `small` and `x-small`. Defaults to `big`. /\n @Prop()\n size?: ControlSize = ControlSize.BIG;\n\n @State()\n searchValue: string;\n\n @State()\n selectedCounter: number;\n\n @State()\n renderItemsList: ComboItem[] = []; // used for render only\n\n @State()\n focusedItemId: string;\n\n @State()\n checkboxes: HTMLInputElement[] = [];\n\n private itemsList: ComboItem[] = [];\n\n private inputType: InputType = InputType.TEXT;\n\n @Watch(\"items\")\n watchItems(): void {\n this.itemsList = typeof this.items === \"string\" ? JSON.parse(this.items) : this.items;\n this.selectedCounter = this.itemsList.filter((item) => item.checked).length;\n this.updateRenderItemsList();\n }\n\n @Watch(\"searchValue\")\n watchSearchValue(): void {\n this.filterItems(this.searchValue);\n }\n\n @Watch(\"checkboxes\")\n watchCheckboxes(): void {\n this.checkboxes.forEach((item, index) => item.setAttribute(\"tabindex\", index === 0 ? \"0\" : \"-1\"));\n }\n\n /* Emitted when value is checked/unchecked. Returns id, items. */\n @Event()\n comboboxChange: EventEmitter;\n\n private emitComboboxChange(): void {\n this.comboboxChange.emit({id: this.inputid, items: this.itemsList});\n }\n\n constructor() {\n this.toggleComboBox = this.toggleComboBox.bind(this);\n this.closeFilterItems = this.closeFilterItems.bind(this);\n }\n\n componentWillLoad(): void {\n this.watchItems();\n }\n\n componentWillRender(): void {\n this.selectedCounter = this.itemsList.filter((item) => item.checked).length;\n }\n\n componentDidRender(): void {\n const checkboxes = this.getAllCheckboxes();\n if (JSON.stringify(checkboxes) !== JSON.stringify(this.checkboxes)) {\n this.checkboxes = checkboxes;\n }\n }\n\n private getItemId(item: ComboItem): string {\n return `combo-checkbox-${this.inputid}-${item.id}`;\n }\n\n private getCheckboxClass(): string {\n return `combo-item-checkbox-input-${this.inputid}`;\n }\n\n private getAllCheckboxes(): HTMLInputElement[] {\n return Array.from(\n this.element.shadowRoot.querySelectorAll(`.${this.getCheckboxClass()} input:not([disabled])`)\n ) as HTMLInputElement[];\n }\n\n private getControlToListSize(): ListSize {\n switch (this.size) {\n case ControlSize.X_SMALL:\n return ListSize.SMALL;\n case ControlSize.SMALL:\n return ListSize.MEDIUM;\n default:\n return ListSize.LARGE;\n }\n }\n\n private handleSelectArrowsNavigation(e: KeyboardEvent, currId: string): void {\n if (![KeyboardCode.ARROW_DOWN, KeyboardCode.ARROW_UP].includes(e.key as KeyboardCode) \|\| !this.isopen) {\n return;\n }\n\n e.preventDefault();\n e.stopPropagation();\n\n const currElem = this.element.shadowRoot.querySelector(`#${currId}`) as HTMLInputElement;\n if (!currElem) {\n return;\n }\n\n const checkboxes = this.checkboxes;\n if (!checkboxes.length) {\n return;\n }\n\n const currElemIndex = checkboxes.indexOf(currElem);\n const firstElemIndex = 0;\n const lastElemIndex = checkboxes.length - 1;\n\n let nextElem = null;\n if (e.key === KeyboardCode.ARROW_DOWN) {\n nextElem = currElemIndex === lastElemIndex ? checkboxes[firstElemIndex] : checkboxes[currElemIndex + 1];\n } else if (e.key === KeyboardCode.ARROW_UP) {\n nextElem = currElemIndex === firstElemIndex ? checkboxes[lastElemIndex] : checkboxes[currElemIndex - 1];\n }\n\n this.focusComboboxItem(nextElem);\n }\n\n private handleHeaderKeyboardEvent(ev: KeyboardEvent): void {\n if (ev.key === KeyboardCode.SPACE) {\n ev.preventDefault();\n }\n if ((ev.key === KeyboardCode.ARROW_DOWN && !this.isopen) \|\| (ev.key === KeyboardCode.ARROW_UP && this.isopen)) {\n this.toggleComboBox();\n }\n }\n\n private handleCheckboxFocus(id: string): void {\n this.focusedItemId = id;\n }\n\n private focusComboboxItem(elem): void {\n this.checkboxes.forEach(function (item) {\n item.setAttribute(\"tabindex\", \"-1\");\n });\n\n elem.setAttribute(\"tabindex\", \"0\");\n elem.focus();\n }\n\n private updateRenderItemsList(): void {\n if (this.searchValue) {\n this.filterItems(this.searchValue);\n } else {\n this.resetRenderItemsList();\n }\n }\n\n private resetRenderItemsList(): void {\n const renderItemsList = [];\n this.itemsList.forEach((item: ComboItem) => {\n renderItemsList.push({...item});\n });\n this.renderItemsList = renderItemsList;\n }\n\n private filterItems(value: string): void {\n if (!value) {\n return this.closeFilterItems();\n }\n\n this.resetRenderItemsList();\n this.renderItemsList = this.renderItemsList.filter((item) => {\n const start = item.name.toUpperCase().indexOf(value.toUpperCase());\n const end = start + value.length;\n const newName =\n item.name.substring(0, start) +\n \"<strong>\" +\n item.name.substring(start, end) +\n \"</strong>\" +\n item.name.substring(end, item.name.length);\n\n item.name = newName;\n\n return start >= 0;\n });\n }\n\n private checkAll(checked = true): void {\n this.itemsList = this.itemsList.map((item: ComboItem) => ({\n ...item,\n checked: checked,\n }));\n this.resetRenderItemsList();\n this.emitComboboxChange();\n }\n\n private closeFilterItems(): void {\n this.searchValue = \"\";\n this.resetRenderItemsList();\n }\n\n private toggleComboBox(): void {\n this.isopen = !this.isopen;\n }\n\n private getComboboxA11yAttributes(): Record<string, unknown> {\n return {\n \"role\": \"combobox\",\n \"aria-label\": this.label,\n \"aria-expanded\": this.isopen ? \"true\" : \"false\",\n \"aria-activedescendant\": this.isopen ? this.focusedItemId : \"\",\n \"aria-controls\": `${this.inputid}_list`,\n };\n }\n\n private renderHeader(): HTMLDivElement {\n return (\n <div\n class=\"header\"\n onClick={() => this.toggleComboBox()}\n onKeyDown={(ev: KeyboardEvent) => {\n this.handleHeaderKeyboardEvent(ev);\n }}\n onKeyUp={(ev: KeyboardEvent) => handleKeyboardSubmit(ev, this.toggleComboBox)}\n role=\"button\"\n tabindex={0}\n aria-expanded={this.isopen ? \"true\" : \"false\"}\n >\n <p class=\"body-3\">\n {this.label}\n <span>{this.selectedCounter > 0 && ` (${this.selectedCounter})`}</span>\n </p>\n <z-icon\n name=\"caret-down\"\n class={this.size}\n />\n </div>\n );\n }\n\n private renderContent(): HTMLDivElement {\n if (!this.isopen) {\n return;\n }\n\n return (\n <div class=\"open-combo-data\">\n {this.hassearch && this.renderSearchInput()}\n {!this.hassearch ? <span {...this.getComboboxA11yAttributes()} /> : null}\n <div\n role=\"listbox\"\n aria-label={this.label}\n aria-multiselectable={true}\n id={`${this.inputid}_list`}\n aria-owns={`${this.checkboxes.map((item) => item.id).join(\" \")}`}\n >\n {this.hascheckall && this.renderCheckAll()}\n {this.renderItems()}\n </div>\n </div>\n );\n }\n\n private renderItems(): HTMLDivElement {\n return (\n <div class={this.searchValue && \"search\"}>\n {this.renderList(this.renderItemsList)}\n {this.searchValue && this.renderCloseButton()}\n </div>\n );\n }\n\n private renderItem(item: ComboItem, index: number, length: number): ZMyzListItem {\n return (\n <z-list-element\n id={item.id}\n htmlTabindex={null}\n dividerType={index !== length - 1 ? ListDividerType.ELEMENT : ListDividerType.NONE}\n size={this.getControlToListSize()}\n >\n <z-input\n type={InputType.CHECKBOX}\n checked={item.checked}\n htmlid={this.getItemId(item)}\n label={item.name}\n class={this.getCheckboxClass()}\n disabled={!item.checked && this.maxcheckableitems && this.selectedCounter >= this.maxcheckableitems}\n size={this.size === ControlSize.X_SMALL ? ControlSize.SMALL : this.size}\n role=\"option\"\n aria-selected={item.checked ? \"true\" : \"false\"}\n onKeyDown={(e: KeyboardEvent) => this.handleSelectArrowsNavigation(e, this.getItemId(item))}\n onInputCheck={(e: CustomEvent) => {\n this.itemsList = this.itemsList.map((i: ComboItem) => {\n if (item.id === i.id) {\n i.checked = e.detail.checked;\n }\n\n return i;\n });\n this.updateRenderItemsList();\n this.emitComboboxChange();\n }}\n onInputFocus={(e: CustomEvent) => this.handleCheckboxFocus(e.detail.id)}\n />\n </z-list-element>\n );\n }\n\n private renderList(items: ComboItem[]): HTMLUListElement {\n if (!items) {\n return;\n }\n if (!items.length && this.searchValue) {\n return this.renderNoSearchResults();\n }\n\n if (this.hasgroupitems) {\n return this.renderGroups(items);\n }\n\n return (\n <ul role=\"none\">\n {items.map((item, i) => {\n return this.renderItem(item, i, items.length);\n })}\n </ul>\n );\n }\n\n private renderGroups(items: ComboItem[]): HTMLUListElement {\n const newData = items.reduce((group, item, index) => {\n const {category} = item;\n const zListItem = this.renderItem(item, index, items.length);\n\n group[category] = group[category] ?? [];\n group[category].push(zListItem);\n\n return group;\n }, {});\n\n const listGroups = Object.entries(newData as {[key: string]: HTMLZListElementElement[]}).map(([key, value]) => {\n return (\n <z-list-group divider-type={ListDividerType.ELEMENT}>\n <span\n class=\"body-3-sb z-list-group-title\"\n slot=\"header-title\"\n >\n {key}\n </span>\n {value.map((item) => item)}\n </z-list-group>\n );\n });\n\n return <ul role=\"none\">{listGroups}</ul>;\n }\n\n private renderNoSearchResults(): HTMLUListElement {\n return (\n <ul role=\"none\">\n <z-myz-list-item\n id=\"no-results\"\n text={this.noresultslabel}\n listitemid=\"no-results\"\n icon=\"multiply-circle\"\n class={this.size}\n />\n </ul>\n );\n }\n\n private renderCloseButton(): HTMLDivElement {\n return (\n <div>\n <a\n onClick={() => this.closeFilterItems()}\n onKeyUp={(e: KeyboardEvent) => handleKeyboardSubmit(e, this.closeFilterItems)}\n role=\"button\"\n tabindex={0}\n >\n {this.closesearchtext}\n </a>\n </div>\n );\n }\n\n private renderSearchInput(): ZInput {\n return (\n <z-input\n htmlid={`${this.inputid}_search`}\n label={this.searchlabel}\n placeholder={this.searchplaceholder}\n htmltitle={this.searchtitle}\n type={this.inputType}\n value={this.searchValue}\n message={false}\n size={this.size}\n aria-autocomplete=\"list\"\n {...this.getComboboxA11yAttributes()}\n onKeyUp={(e: KeyboardEvent) => {\n if (e.key === KeyboardCode.ESC) {\n this.closeFilterItems();\n }\n }}\n onInputChange={(e: CustomEvent) => {\n this.searchValue = e.detail.value;\n }}\n />\n );\n }\n\n private renderCheckAll(): HTMLDivElement {\n if (this.searchValue) {\n return;\n }\n\n const checkAllId = `combo-checkbox-${this.inputid}-check-all`;\n const allChecked = this.selectedCounter === this.itemsList.length;\n\n return (\n <div class=\"check-all-wrapper\">\n <z-input\n type={InputType.CHECKBOX}\n checked={allChecked}\n htmlid={checkAllId}\n class={this.getCheckboxClass()}\n label={allChecked ? this.uncheckalltext : this.checkalltext}\n disabled={this.maxcheckableitems && this.maxcheckableitems < this.itemsList.length}\n size={this.size === ControlSize.X_SMALL ? ControlSize.SMALL : this.size}\n role=\"option\"\n aria-selected={allChecked ? \"true\" : \"false\"}\n onKeyDown={(e: KeyboardEvent) => this.handleSelectArrowsNavigation(e, checkAllId)}\n onInputCheck={(e: CustomEvent) => this.checkAll(e.detail.checked)}\n onInputFocus={(e: CustomEvent) => this.handleCheckboxFocus(e.detail.id)}\n />\n </div>\n );\n }\n\n render(): HTMLDivElement {\n return (\n <div\n data-action={`combo-${this.inputid}`}\n class={{open: this.isopen, fixed: this.isfixed, disabled: this.disabled}}\n id={this.inputid}\n >\n {this.renderHeader()}\n {!this.disabled && this.renderContent()}\n </div>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/z-combobox/index.tsx"],"names":[],"mappings":"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","sourcesContent":["import {Component, Element, Event, EventEmitter, Prop, State, Watch, h} from \"@stencil/core\";\nimport {ComboItem, ControlSize, InputType, KeyboardCode, ListDividerType, ListSize} from \"../../beans\";\nimport {ZMyzListItem} from \"../../snowflakes/myz/list/z-myz-list-item\";\nimport {handleKeyboardSubmit, randomId} from \"../../utils/utils\";\nimport {ZInput} from \"../z-input\";\n\n@Component({\n tag: \"z-combobox\",\n styleUrl: \"styles.css\",\n shadow: true,\n})\nexport class ZCombobox {\n @Element() element: HTMLZComboboxElement;\n\n /** input unique id /\n @Prop()\n inputid = `combo-${randomId()}`;\n\n /* list items array /\n @Prop()\n items: ComboItem[] \| string;\n\n /* label text /\n @Prop()\n label: string;\n\n /* the combobox is disabled /\n @Prop({reflect: true})\n disabled?: boolean = false;\n\n /* show search input flag (optional) /\n @Prop()\n hassearch?: boolean = false;\n\n /* search input label text (optional) /\n @Prop()\n searchlabel?: string;\n\n /* search input placeholder text (optional) /\n @Prop()\n searchplaceholder?: string;\n\n /* search input title text (optional) /\n @Prop()\n searchtitle?: string;\n\n /* no result text message /\n @Prop()\n noresultslabel?: string = \"Nessun risultato\";\n\n /* toggle combo list opening flag /\n @Prop({mutable: true})\n isopen = false;\n\n /* fixed style flag /\n @Prop()\n isfixed = false;\n\n /* close combobox list text /\n @Prop()\n closesearchtext?: string = \"Chiudi\";\n\n /* show \"check all\" checkbox (optional) /\n @Prop()\n hascheckall?: boolean = false;\n\n /* check all label (optional) /\n @Prop()\n checkalltext?: string = \"Seleziona tutti\";\n\n /* uncheck all label (optional) /\n @Prop()\n uncheckalltext?: string = \"Deseleziona tutti\";\n\n /* max number of checkable items (0 = unlimited) /\n @Prop()\n maxcheckableitems = 0;\n\n /* group items by category /\n @Prop()\n hasgroupitems?: boolean;\n\n /* Available sizes: `big`, `small` and `x-small`. Defaults to `big`. /\n @Prop()\n size?: ControlSize = ControlSize.BIG;\n\n @State()\n searchValue: string;\n\n @State()\n selectedCounter: number;\n\n @State()\n renderItemsList: ComboItem[] = []; // used for render only\n\n @State()\n focusedItemId: string;\n\n @State()\n checkboxes: HTMLInputElement[] = [];\n\n private itemsList: ComboItem[] = [];\n\n private inputType: InputType = InputType.TEXT;\n\n @Watch(\"items\")\n watchItems(): void {\n this.itemsList = typeof this.items === \"string\" ? JSON.parse(this.items) : this.items;\n this.selectedCounter = this.itemsList.filter((item) => item.checked).length;\n this.updateRenderItemsList();\n }\n\n @Watch(\"searchValue\")\n watchSearchValue(): void {\n this.filterItems(this.searchValue);\n }\n\n @Watch(\"checkboxes\")\n watchCheckboxes(): void {\n this.checkboxes.forEach((item, index) => item.setAttribute(\"tabindex\", index === 0 ? \"0\" : \"-1\"));\n }\n\n /* Emitted when value is checked/unchecked. Returns id, items. */\n @Event()\n comboboxChange: EventEmitter;\n\n private emitComboboxChange(): void {\n this.comboboxChange.emit({id: this.inputid, items: this.itemsList});\n }\n\n constructor() {\n this.toggleComboBox = this.toggleComboBox.bind(this);\n this.closeFilterItems = this.closeFilterItems.bind(this);\n }\n\n componentWillLoad(): void {\n this.watchItems();\n }\n\n componentWillRender(): void {\n this.selectedCounter = this.itemsList.filter((item) => item.checked).length;\n }\n\n componentDidRender(): void {\n const checkboxes = this.getAllCheckboxes();\n if (JSON.stringify(checkboxes) !== JSON.stringify(this.checkboxes)) {\n this.checkboxes = checkboxes;\n }\n }\n\n private getItemId(item: ComboItem): string {\n return `combo-checkbox-${this.inputid}-${item.id}`;\n }\n\n private getCheckboxClass(): string {\n return `combo-item-checkbox-input-${this.inputid}`;\n }\n\n private getAllCheckboxes(): HTMLInputElement[] {\n return Array.from(\n this.element.shadowRoot.querySelectorAll(`.${this.getCheckboxClass()} input:not([disabled])`)\n ) as HTMLInputElement[];\n }\n\n private getControlToListSize(): ListSize {\n switch (this.size) {\n case ControlSize.X_SMALL:\n return ListSize.SMALL;\n case ControlSize.SMALL:\n return ListSize.MEDIUM;\n default:\n return ListSize.LARGE;\n }\n }\n\n private handleSelectArrowsNavigation(e: KeyboardEvent, currId: string): void {\n if (![KeyboardCode.ARROW_DOWN, KeyboardCode.ARROW_UP].includes(e.key as KeyboardCode) \|\| !this.isopen) {\n return;\n }\n\n e.preventDefault();\n e.stopPropagation();\n\n const currElem = this.element.shadowRoot.querySelector(`#${currId}`) as HTMLInputElement;\n if (!currElem) {\n return;\n }\n\n const checkboxes = this.checkboxes;\n if (!checkboxes.length) {\n return;\n }\n\n const currElemIndex = checkboxes.indexOf(currElem);\n const firstElemIndex = 0;\n const lastElemIndex = checkboxes.length - 1;\n\n let nextElem = null;\n if (e.key === KeyboardCode.ARROW_DOWN) {\n nextElem = currElemIndex === lastElemIndex ? checkboxes[firstElemIndex] : checkboxes[currElemIndex + 1];\n } else if (e.key === KeyboardCode.ARROW_UP) {\n nextElem = currElemIndex === firstElemIndex ? checkboxes[lastElemIndex] : checkboxes[currElemIndex - 1];\n }\n\n this.focusComboboxItem(nextElem);\n }\n\n private handleHeaderKeyboardEvent(ev: KeyboardEvent): void {\n if (ev.key === KeyboardCode.SPACE) {\n ev.preventDefault();\n }\n if ((ev.key === KeyboardCode.ARROW_DOWN && !this.isopen) \|\| (ev.key === KeyboardCode.ARROW_UP && this.isopen)) {\n this.toggleComboBox();\n }\n }\n\n private handleCheckboxFocus(id: string): void {\n this.focusedItemId = id;\n }\n\n private focusComboboxItem(elem): void {\n this.checkboxes.forEach(function (item) {\n item.setAttribute(\"tabindex\", \"-1\");\n });\n\n elem.setAttribute(\"tabindex\", \"0\");\n elem.focus();\n }\n\n private updateRenderItemsList(): void {\n if (this.searchValue) {\n this.filterItems(this.searchValue);\n } else {\n this.resetRenderItemsList();\n }\n }\n\n private resetRenderItemsList(): void {\n const renderItemsList = [];\n this.itemsList.forEach((item: ComboItem) => {\n renderItemsList.push({...item});\n });\n this.renderItemsList = renderItemsList;\n }\n\n private filterItems(value: string): void {\n if (!value) {\n return this.closeFilterItems();\n }\n\n this.resetRenderItemsList();\n this.renderItemsList = this.renderItemsList.filter((item) => {\n const start = item.name.toUpperCase().indexOf(value.toUpperCase());\n const end = start + value.length;\n const newName =\n item.name.substring(0, start) +\n \"<strong>\" +\n item.name.substring(start, end) +\n \"</strong>\" +\n item.name.substring(end, item.name.length);\n\n item.name = newName;\n\n return start >= 0;\n });\n }\n\n private checkAll(checked = true): void {\n this.itemsList = this.itemsList.map((item: ComboItem) => ({\n ...item,\n checked: checked,\n }));\n this.resetRenderItemsList();\n this.emitComboboxChange();\n }\n\n private closeFilterItems(): void {\n this.searchValue = \"\";\n this.resetRenderItemsList();\n }\n\n private toggleComboBox(): void {\n this.isopen = !this.isopen;\n }\n\n private getComboboxA11yAttributes(): Record<string, unknown> {\n return {\n \"role\": \"combobox\",\n \"aria-label\": this.label,\n \"aria-expanded\": this.isopen ? \"true\" : \"false\",\n \"aria-activedescendant\": this.isopen ? this.focusedItemId : \"\",\n \"aria-controls\": `${this.inputid}_list`,\n };\n }\n\n private renderHeader(): HTMLDivElement {\n return (\n <div\n class=\"header\"\n onClick={() => this.toggleComboBox()}\n onKeyDown={(ev: KeyboardEvent) => {\n this.handleHeaderKeyboardEvent(ev);\n }}\n onKeyUp={(ev: KeyboardEvent) => handleKeyboardSubmit(ev, this.toggleComboBox)}\n role=\"button\"\n tabindex={0}\n aria-expanded={this.isopen ? \"true\" : \"false\"}\n >\n <p class=\"body-3\">\n {this.label}\n <span>{this.selectedCounter > 0 && ` (${this.selectedCounter})`}</span>\n </p>\n <z-icon\n name=\"caret-down\"\n class={this.size}\n />\n </div>\n );\n }\n\n private renderContent(): HTMLDivElement {\n if (!this.isopen) {\n return;\n }\n\n return (\n <div class=\"open-combo-data\">\n {this.hassearch && this.renderSearchInput()}\n {!this.hassearch ? <span {...this.getComboboxA11yAttributes()} /> : null}\n <div\n role=\"listbox\"\n aria-label={this.label}\n aria-multiselectable={true}\n id={`${this.inputid}_list`}\n aria-owns={`${this.checkboxes.map((item) => item.id).join(\" \")}`}\n >\n {this.hascheckall && this.renderCheckAll()}\n {this.renderItems()}\n </div>\n </div>\n );\n }\n\n private renderItems(): HTMLDivElement {\n return (\n <div class={this.searchValue && \"search\"}>\n {this.renderList(this.renderItemsList)}\n {this.searchValue && this.renderCloseButton()}\n </div>\n );\n }\n\n private renderItem(item: ComboItem, index: number, length: number): ZMyzListItem {\n return (\n <z-list-element\n id={item.id}\n htmlTabindex={null}\n dividerType={index !== length - 1 ? ListDividerType.ELEMENT : ListDividerType.NONE}\n size={this.getControlToListSize()}\n >\n <z-input\n type={InputType.CHECKBOX}\n checked={item.checked}\n htmlid={this.getItemId(item)}\n label={item.name}\n class={this.getCheckboxClass()}\n disabled={!item.checked && this.maxcheckableitems && this.selectedCounter >= this.maxcheckableitems}\n size={this.size === ControlSize.X_SMALL ? ControlSize.SMALL : this.size}\n role=\"option\"\n aria-selected={item.checked ? \"true\" : \"false\"}\n onKeyDown={(e: KeyboardEvent) => this.handleSelectArrowsNavigation(e, this.getItemId(item))}\n onInputCheck={(e: CustomEvent) => {\n this.itemsList = this.itemsList.map((i: ComboItem) => {\n if (item.id === i.id) {\n i.checked = e.detail.checked;\n }\n\n return i;\n });\n this.updateRenderItemsList();\n this.emitComboboxChange();\n }}\n onInputFocus={(e: CustomEvent) => this.handleCheckboxFocus(e.detail.id)}\n />\n </z-list-element>\n );\n }\n\n private renderList(items: ComboItem[]): HTMLUListElement {\n if (!items) {\n return;\n }\n if (!items.length && this.searchValue) {\n return this.renderNoSearchResults();\n }\n\n if (this.hasgroupitems) {\n return this.renderGroups(items);\n }\n\n return (\n <ul role=\"none\">\n {items.map((item, i) => {\n return this.renderItem(item, i, items.length);\n })}\n </ul>\n );\n }\n\n private renderGroups(items: ComboItem[]): HTMLUListElement {\n const newData = items.reduce((group, item, index) => {\n const {category} = item;\n const zListItem = this.renderItem(item, index, items.length);\n\n group[category] = group[category] ?? [];\n group[category].push(zListItem);\n\n return group;\n }, {});\n\n const listGroups = Object.entries(newData as {[key: string]: HTMLZListElementElement[]}).map(([key, value]) => {\n return (\n <z-list-group divider-type={ListDividerType.ELEMENT}>\n <span\n class=\"body-3-sb z-list-group-title\"\n slot=\"header-title\"\n >\n {key}\n </span>\n {value.map((item) => item)}\n </z-list-group>\n );\n });\n\n return <ul role=\"none\">{listGroups}</ul>;\n }\n\n private renderNoSearchResults(): HTMLUListElement {\n return (\n <ul role=\"none\">\n <z-myz-list-item\n id=\"no-results\"\n text={this.noresultslabel}\n listitemid=\"no-results\"\n icon=\"multiply-circle\"\n class={this.size}\n />\n </ul>\n );\n }\n\n private renderCloseButton(): HTMLDivElement {\n return (\n <div>\n <a\n onClick={() => this.closeFilterItems()}\n onKeyUp={(e: KeyboardEvent) => handleKeyboardSubmit(e, this.closeFilterItems)}\n role=\"button\"\n tabindex={0}\n >\n {this.closesearchtext}\n </a>\n </div>\n );\n }\n\n private renderSearchInput(): ZInput {\n return (\n <z-input\n htmlid={`${this.inputid}_search`}\n label={this.searchlabel}\n placeholder={this.searchplaceholder}\n htmltitle={this.searchtitle}\n type={this.inputType}\n value={this.searchValue}\n message={false}\n size={this.size}\n aria-autocomplete=\"list\"\n {...this.getComboboxA11yAttributes()}\n onKeyUp={(e: KeyboardEvent) => {\n if (e.key === KeyboardCode.ESC) {\n this.closeFilterItems();\n }\n }}\n onInputChange={(e: CustomEvent) => {\n this.searchValue = e.detail.value;\n }}\n />\n );\n }\n\n private renderCheckAll(): HTMLDivElement {\n if (this.searchValue) {\n return;\n }\n\n const checkAllId = `combo-checkbox-${this.inputid}-check-all`;\n const allChecked = this.selectedCounter === this.itemsList.length;\n\n return (\n <div class=\"check-all-wrapper\">\n <z-input\n type={InputType.CHECKBOX}\n checked={allChecked}\n htmlid={checkAllId}\n class={this.getCheckboxClass()}\n label={allChecked ? this.uncheckalltext : this.checkalltext}\n disabled={this.maxcheckableitems && this.maxcheckableitems < this.itemsList.length}\n size={this.size === ControlSize.X_SMALL ? ControlSize.SMALL : this.size}\n role=\"option\"\n aria-selected={allChecked ? \"true\" : \"false\"}\n onKeyDown={(e: KeyboardEvent) => this.handleSelectArrowsNavigation(e, checkAllId)}\n onInputCheck={(e: CustomEvent) => this.checkAll(e.detail.checked)}\n onInputFocus={(e: CustomEvent) => this.handleCheckboxFocus(e.detail.id)}\n />\n </div>\n );\n }\n\n render(): HTMLDivElement {\n return (\n <div\n data-action={`combo-${this.inputid}`}\n class={{open: this.isopen, fixed: this.isfixed, disabled: this.disabled}}\n id={this.inputid}\n >\n {this.renderHeader()}\n {!this.disabled && this.renderContent()}\n </div>\n );\n }\n}\n"]}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"index.stories.js","sourceRoot":"","sources":["~~../../../../~~src/components/z-combobox/index.stories.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,IAAI,EAAC,MAAM,KAAK,CAAC;AAEzB,OAAO,EAAY,WAAW,EAAC,MAAM,aAAa,CAAC;AACnD,OAAO,SAAS,CAAC;AAEjB,MAAM,SAAS,GAAG;IAChB,KAAK,EAAE,WAAW;IAClB,SAAS,EAAE,YAAY;IACvB,QAAQ,EAAE;QACR,KAAK,EAAE;YACL,OAAO,EAAE;gBACP,IAAI,EAAE,QAAQ;aACf;SACF;QACD,IAAI,EAAE;YACJ,OAAO,EAAE;gBACP,IAAI,EAAE,cAAc;aACrB;YACD,OAAO,EAAE,MAAM,CAAC,MAAM,CAAC,WAAW,CAAC;SACpC;KACF;IACD,IAAI,EAAE;QACJ,KAAK,EAAE;YACL,EAAC,EAAE,EAAE,SAAS,EAAE,IAAI,EAAE,YAAY,EAAE,OAAO,EAAE,KAAK,EAAE,QAAQ,EAAE,UAAU,EAAC;YACzE,EAAC,EAAE,EAAE,SAAS,EAAE,IAAI,EAAE,aAAa,EAAE,OAAO,EAAE,KAAK,EAAE,QAAQ,EAAE,UAAU,EAAC;YAC1E,EAAC,EAAE,EAAE,SAAS,EAAE,IAAI,EAAE,YAAY,EAAE,OAAO,EAAE,KAAK,EAAE,QAAQ,EAAE,UAAU,EAAC;YACzE,EAAC,EAAE,EAAE,UAAU,EAAE,IAAI,EAAE,WAAW,EAAE,OAAO,EAAE,KAAK,EAAE,QAAQ,EAAE,UAAU,EAAC;SACpD;QACvB,YAAY,EAAE,YAAY;QAC1B,eAAe,EAAE,OAAO;QACxB,QAAQ,EAAE,KAAK;QACf,WAAW,EAAE,IAAI;QACjB,SAAS,EAAE,IAAI;QACf,OAAO,EAAE,SAAS;QAClB,OAAO,EAAE,IAAI;QACb,MAAM,EAAE,IAAI;QACZ,KAAK,EAAE,gBAAgB;QACvB,iBAAiB,EAAE,CAAC;QACpB,aAAa,EAAE,KAAK;QACpB,cAAc,EAAE,UAAU;QAC1B,WAAW,EAAE,cAAc;QAC3B,iBAAiB,EAAE,oBAAoB;QACvC,WAAW,EAAE,cAAc;QAC3B,cAAc,EAAE,aAAa;QAC7B,IAAI,EAAE,WAAW,CAAC,GAAG;KACtB;IACD,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CACf,IAAI,CAAA;qBACa,IAAI,CAAC,YAAY;wBACd,IAAI,CAAC,eAAe;iBAC3B,IAAI,CAAC,QAAQ;oBACV,IAAI,CAAC,WAAW;kBAClB,IAAI,CAAC,SAAS;gBAChB,IAAI,CAAC,OAAO;gBACZ,IAAI,CAAC,OAAO;eACb,IAAI,CAAC,MAAM;eACX,IAAI,CAAC,KAAK;cACX,IAAI,CAAC,KAAK;0BACE,IAAI,CAAC,iBAAiB;sBAC1B,IAAI,CAAC,aAAa;uBACjB,IAAI,CAAC,cAAc;oBACtB,IAAI,CAAC,WAAW;0BACV,IAAI,CAAC,iBAAiB;oBAC5B,IAAI,CAAC,WAAW;uBACb,IAAI,CAAC,cAAc;aAC7B,IAAI,CAAC,IAAI;OACf;CACoB,CAAC;AAE5B,eAAe,SAAS,CAAC;AAEzB,MAAM,CAAC,MAAM,OAAO,GAAG,EAAE,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG;IACpB,IAAI,EAAE;QACJ,aAAa,EAAE,IAAI;KACpB;CACc,CAAC;AAElB,MAAM,CAAC,MAAM,QAAQ,GAAG;IACtB,IAAI,EAAE;QACJ,QAAQ,EAAE,IAAI;KACf;CACc,CAAC","sourcesContent":["import {Meta, StoryObj} from \"@storybook/web-components\";\nimport {html} from \"lit\";\nimport {ZCombobox} from \".\";\nimport {ComboItem, ControlSize} from \"../../beans\";\nimport \"./index\";\n\nconst StoryMeta = {\n title: \"ZCombobox\",\n component: \"z-combobox\",\n argTypes: {\n items: {\n control: {\n type: \"object\",\n },\n },\n size: {\n control: {\n type: \"inline-radio\",\n },\n options: Object.values(ControlSize),\n },\n },\n args: {\n items: [\n {id: \"ite_m_1\", name: \"First item\", checked: false, category: \"Gruppo 1\"},\n {id: \"ite_m_2\", name: \"Second item\", checked: false, category: \"Gruppo 1\"},\n {id: \"it_em_3\", name: \"Other item\", checked: false, category: \"Gruppo 2\"},\n {id: \"it_e_m_5\", name: \"Last item\", checked: false, category: \"Gruppo 3\"},\n ] satisfies ComboItem[],\n checkalltext: \"Select all\",\n closesearchtext: \"Close\",\n disabled: false,\n hascheckall: true,\n hassearch: true,\n inputid: \"combo_1\",\n isfixed: true,\n isopen: true,\n label: \"Combobox Label\",\n maxcheckableitems: 4,\n hasgroupitems: false,\n noresultslabel: \"No items\",\n searchlabel: \"Search Label\",\n searchplaceholder: \"Search Placeholder\",\n searchtitle: \"Search Title\",\n uncheckalltext: \"Uncheck All\",\n size: ControlSize.BIG,\n },\n render: (args) =>\n html`<z-combobox\n checkalltext=${args.checkalltext}\n closesearchtext=${args.closesearchtext}\n disabled=${args.disabled}\n hascheckall=${args.hascheckall}\n hassearch=${args.hassearch}\n inputid=${args.inputid}\n isfixed=${args.isfixed}\n isopen=${args.isopen}\n .items=${args.items}\n label=${args.label}\n maxcheckableitems=${args.maxcheckableitems}\n hasgroupitems=${args.hasgroupitems}\n noresultslabel=${args.noresultslabel}\n searchlabel=${args.searchlabel}\n searchplaceholder=${args.searchplaceholder}\n searchtitle=${args.searchtitle}\n uncheckalltext=${args.uncheckalltext}\n size=${args.size}\n />`,\n} satisfies Meta<ZCombobox>;\n\nexport default StoryMeta;\ntype Story = StoryObj<ZCombobox>;\nexport const Default = {};\n\nexport const Groups = {\n args: {\n hasgroupitems: true,\n },\n} satisfies Story;\n\nexport const Disabled = {\n args: {\n disabled: true,\n },\n} satisfies Story;\n"]}
1	+ {"version":3,"file":"index.stories.js","sourceRoot":"","sources":["../../../src/components/z-combobox/index.stories.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,IAAI,EAAC,MAAM,KAAK,CAAC;AAEzB,OAAO,EAAY,WAAW,EAAC,MAAM,aAAa,CAAC;AACnD,OAAO,SAAS,CAAC;AAEjB,MAAM,SAAS,GAAG;IAChB,KAAK,EAAE,WAAW;IAClB,SAAS,EAAE,YAAY;IACvB,QAAQ,EAAE;QACR,KAAK,EAAE;YACL,OAAO,EAAE;gBACP,IAAI,EAAE,QAAQ;aACf;SACF;QACD,IAAI,EAAE;YACJ,OAAO,EAAE;gBACP,IAAI,EAAE,cAAc;aACrB;YACD,OAAO,EAAE,MAAM,CAAC,MAAM,CAAC,WAAW,CAAC;SACpC;KACF;IACD,IAAI,EAAE;QACJ,KAAK,EAAE;YACL,EAAC,EAAE,EAAE,SAAS,EAAE,IAAI,EAAE,YAAY,EAAE,OAAO,EAAE,KAAK,EAAE,QAAQ,EAAE,UAAU,EAAC;YACzE,EAAC,EAAE,EAAE,SAAS,EAAE,IAAI,EAAE,aAAa,EAAE,OAAO,EAAE,KAAK,EAAE,QAAQ,EAAE,UAAU,EAAC;YAC1E,EAAC,EAAE,EAAE,SAAS,EAAE,IAAI,EAAE,YAAY,EAAE,OAAO,EAAE,KAAK,EAAE,QAAQ,EAAE,UAAU,EAAC;YACzE,EAAC,EAAE,EAAE,UAAU,EAAE,IAAI,EAAE,WAAW,EAAE,OAAO,EAAE,KAAK,EAAE,QAAQ,EAAE,UAAU,EAAC;SACpD;QACvB,YAAY,EAAE,YAAY;QAC1B,eAAe,EAAE,OAAO;QACxB,QAAQ,EAAE,KAAK;QACf,WAAW,EAAE,IAAI;QACjB,SAAS,EAAE,IAAI;QACf,OAAO,EAAE,SAAS;QAClB,OAAO,EAAE,IAAI;QACb,MAAM,EAAE,IAAI;QACZ,KAAK,EAAE,gBAAgB;QACvB,iBAAiB,EAAE,CAAC;QACpB,aAAa,EAAE,KAAK;QACpB,cAAc,EAAE,UAAU;QAC1B,WAAW,EAAE,cAAc;QAC3B,iBAAiB,EAAE,oBAAoB;QACvC,WAAW,EAAE,cAAc;QAC3B,cAAc,EAAE,aAAa;QAC7B,IAAI,EAAE,WAAW,CAAC,GAAG;KACtB;IACD,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CACf,IAAI,CAAA;qBACa,IAAI,CAAC,YAAY;wBACd,IAAI,CAAC,eAAe;iBAC3B,IAAI,CAAC,QAAQ;oBACV,IAAI,CAAC,WAAW;kBAClB,IAAI,CAAC,SAAS;gBAChB,IAAI,CAAC,OAAO;gBACZ,IAAI,CAAC,OAAO;eACb,IAAI,CAAC,MAAM;eACX,IAAI,CAAC,KAAK;cACX,IAAI,CAAC,KAAK;0BACE,IAAI,CAAC,iBAAiB;sBAC1B,IAAI,CAAC,aAAa;uBACjB,IAAI,CAAC,cAAc;oBACtB,IAAI,CAAC,WAAW;0BACV,IAAI,CAAC,iBAAiB;oBAC5B,IAAI,CAAC,WAAW;uBACb,IAAI,CAAC,cAAc;aAC7B,IAAI,CAAC,IAAI;OACf;CACoB,CAAC;AAE5B,eAAe,SAAS,CAAC;AAEzB,MAAM,CAAC,MAAM,OAAO,GAAG,EAAE,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG;IACpB,IAAI,EAAE;QACJ,aAAa,EAAE,IAAI;KACpB;CACc,CAAC;AAElB,MAAM,CAAC,MAAM,QAAQ,GAAG;IACtB,IAAI,EAAE;QACJ,QAAQ,EAAE,IAAI;KACf;CACc,CAAC","sourcesContent":["import {Meta, StoryObj} from \"@storybook/web-components\";\nimport {html} from \"lit\";\nimport {ZCombobox} from \".\";\nimport {ComboItem, ControlSize} from \"../../beans\";\nimport \"./index\";\n\nconst StoryMeta = {\n title: \"ZCombobox\",\n component: \"z-combobox\",\n argTypes: {\n items: {\n control: {\n type: \"object\",\n },\n },\n size: {\n control: {\n type: \"inline-radio\",\n },\n options: Object.values(ControlSize),\n },\n },\n args: {\n items: [\n {id: \"ite_m_1\", name: \"First item\", checked: false, category: \"Gruppo 1\"},\n {id: \"ite_m_2\", name: \"Second item\", checked: false, category: \"Gruppo 1\"},\n {id: \"it_em_3\", name: \"Other item\", checked: false, category: \"Gruppo 2\"},\n {id: \"it_e_m_5\", name: \"Last item\", checked: false, category: \"Gruppo 3\"},\n ] satisfies ComboItem[],\n checkalltext: \"Select all\",\n closesearchtext: \"Close\",\n disabled: false,\n hascheckall: true,\n hassearch: true,\n inputid: \"combo_1\",\n isfixed: true,\n isopen: true,\n label: \"Combobox Label\",\n maxcheckableitems: 4,\n hasgroupitems: false,\n noresultslabel: \"No items\",\n searchlabel: \"Search Label\",\n searchplaceholder: \"Search Placeholder\",\n searchtitle: \"Search Title\",\n uncheckalltext: \"Uncheck All\",\n size: ControlSize.BIG,\n },\n render: (args) =>\n html`<z-combobox\n checkalltext=${args.checkalltext}\n closesearchtext=${args.closesearchtext}\n disabled=${args.disabled}\n hascheckall=${args.hascheckall}\n hassearch=${args.hassearch}\n inputid=${args.inputid}\n isfixed=${args.isfixed}\n isopen=${args.isopen}\n .items=${args.items}\n label=${args.label}\n maxcheckableitems=${args.maxcheckableitems}\n hasgroupitems=${args.hasgroupitems}\n noresultslabel=${args.noresultslabel}\n searchlabel=${args.searchlabel}\n searchplaceholder=${args.searchplaceholder}\n searchtitle=${args.searchtitle}\n uncheckalltext=${args.uncheckalltext}\n size=${args.size}\n />`,\n} satisfies Meta<ZCombobox>;\n\nexport default StoryMeta;\ntype Story = StoryObj<ZCombobox>;\nexport const Default = {};\n\nexport const Groups = {\n args: {\n hasgroupitems: true,\n },\n} satisfies Story;\n\nexport const Disabled = {\n args: {\n disabled: true,\n },\n} satisfies Story;\n"]}

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

@@ -41,11 +41,8 @@
   outline-offset: -2px;
 }
-:host > div.open > div.header:focus:focus-visible {
-  box-shadow: none;
-}
 :host > div > div.header:focus:focus-visible {
+  z-index: 16;
   box-shadow: var(--shadow-focus-primary);
   outline: none;
 }
@@ -178,6 +175,11 @@
   text-transform: uppercase;
 }
+:host > div.open > div.open-combo-data > div > div.search > div > a:focus:focus-visible {
+  box-shadow: var(--shadow-focus-primary);
+  outline: none;
+}
 :host > div.open > div.open-combo-data > div > div.check-all-wrapper {
   padding: calc(var(--space-unit) * 2) calc(var(--space-unit) * 0.5);
   border-bottom: var(--border-size-small) solid var(--gray800);

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

@@ -35,9 +35,9 @@ export class ZCoverHero {
         return (h("div", { class: "content-container" }, h("slot", { name: "content" })));
     }
     render() {
-        return (h(Host, { key: '3ca1daae49161dbf205360cd220d36c3b817a011' }, this.variant === CoverHeroVariant.STACKED &&
+        return (h(Host, { key: 'b8db9df129ba92efc6c254a1058a9b89186fc6ca' }, this.variant === CoverHeroVariant.STACKED &&
             this.contentPosition === CoverHeroContentPosition.TOP &&
-            this.renderContent(), h("div", { key: 'f63e349e0b7f78c78f43771cf5795a945e1a7f8d', class: "main-container" }, h("div", { key: 'a350f5951ca6f6be672d1de2d3690c19ae44b341', class: "cover-container" }, h("slot", { key: '78d0f8e49581568cb371f61e7b7f8b44bb19034b', name: "cover" })), h("slot", { key: '54c6fc3a7dfa2a0642ad6853a22ff2a5783cacc2', name: "info-reveal" }), this.variant === CoverHeroVariant.OVERLAY && this.renderContent()), this.variant === CoverHeroVariant.STACKED &&
+            this.renderContent(), h("div", { key: '8b959ffe0c0c4fbddacb20ced4401234a8482ba3', class: "main-container" }, h("div", { key: '87918b02dc80974fb17400a64ffc3fdd277d8a14', class: "cover-container" }, h("slot", { key: '311401325e923d2f944b2f2989b2f2dc95971413', name: "cover" })), h("slot", { key: '7137546741734ea302b8fb00eea39f334c6780d2', name: "info-reveal" }), this.variant === CoverHeroVariant.OVERLAY && this.renderContent()), this.variant === CoverHeroVariant.STACKED &&
             this.contentPosition === CoverHeroContentPosition.BOTTOM &&
             this.renderContent()));
     }

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

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","sourceRoot":"","sources":["~~../../../../~~src/components/z-cover-hero/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,CAAC,EAAC,MAAM,eAAe,CAAC;AACxE,OAAO,EAAC,wBAAwB,EAAE,gBAAgB,EAAC,MAAM,aAAa,CAAC;AAEvE;;;;;;;;;;GAUG;AAMH,MAAM,OAAO,UAAU;;uBAOO,gBAAgB,CAAC,OAAO;+BAMR,wBAAwB,CAAC,GAAG;mCASlD,IAAI;;IAE1B;;;;OAIG;IAEO,SAAS,CAAC,EAAC,MAAM,EAAQ;QACjC,IAAI,MAAM,YAAY,KAAK,IAAI,MAAM,CAAC,OAAO,CAAC,cAAc,CAAC,EAAE,CAAC;YAC9D,MAAM,KAAK,GAAG,MAAM,CAAC,YAAY,GAAG,MAAM,CAAC,aAAa,CAAC;YACzD,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,sBAAsB,EAAE,KAAK,CAAC,QAAQ,EAAE,CAAC,CAAC;QACxE,CAAC;IACH,CAAC;IAED;;OAEG;IACK,aAAa;QACnB,OAAO,CACL,WAAK,KAAK,EAAC,mBAAmB;YAC5B,YAAM,IAAI,EAAC,SAAS,GAAQ,CACxB,CACP,CAAC;IACJ,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACF,IAAI,CAAC,OAAO,KAAK,gBAAgB,CAAC,OAAO;gBACxC,IAAI,CAAC,eAAe,KAAK,wBAAwB,CAAC,GAAG;gBACrD,IAAI,CAAC,aAAa,EAAE;YACtB,4DAAK,KAAK,EAAC,gBAAgB;gBACzB,4DAAK,KAAK,EAAC,iBAAiB;oBAC1B,6DAAM,IAAI,EAAC,OAAO,GAAQ,CACtB;gBACN,6DAAM,IAAI,EAAC,aAAa,GAAQ;gBAC/B,IAAI,CAAC,OAAO,KAAK,gBAAgB,CAAC,OAAO,IAAI,IAAI,CAAC,aAAa,EAAE,CAC9D;YACL,IAAI,CAAC,OAAO,KAAK,gBAAgB,CAAC,OAAO;gBACxC,IAAI,CAAC,eAAe,KAAK,wBAAwB,CAAC,MAAM;gBACxD,IAAI,CAAC,aAAa,EAAE,CACjB,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {Component, Element, Host, Listen, Prop, h} from \"@stencil/core\";\nimport {CoverHeroContentPosition, CoverHeroVariant} from \"../../beans\";\n\n/*\n Cover hero component.\n * Component to display a hero image with content.\n \n @slot cover - slot for the cover image.\n * @slot content - slot for the content.\n * @slot info-reveal - slot for the info reveal.\n * @cssprop --cover-hero-overlay - overlay color of the cover hero (CSS `background` property). Default: `linear-gradient(270deg, #0000 0%, #000000e6 100%)`.\n * @cssprop --cover-hero-text-color - color of the text.\n * @cssprop --cover-hero-aspect-ratio - aspect ratio to use for the image. You can pass a fraction or a number representing the ratio. Default: the intrinsic aspect ratio of the slotted image or `16/9`.\n /\n@Component({\n tag: \"z-cover-hero\",\n styleUrl: \"styles.css\",\n shadow: true,\n})\nexport class ZCoverHero {\n @Element() host: HTMLZCoverHeroElement;\n\n /\n Cover hero variant. Can be `OVERLAY` or `STACKED`.\n /\n @Prop({reflect: true})\n variant: CoverHeroVariant = CoverHeroVariant.OVERLAY;\n\n /\n Vertical content position (for `STACKED` variant).\n /\n @Prop({reflect: true})\n contentPosition: CoverHeroContentPosition = CoverHeroContentPosition.TOP;\n\n /\n Whether to keep the image aspect ratio.\n * If set to `false`, the cssprop `--cover-hero-aspect-ratio` will not affect the component's size;\n * instead, the height of the component follows the content's one.\n * Note: it may be necessary to set a min and/or max height to the component.\n /\n @Prop({reflect: true})\n preserveAspectRatio = true;\n\n /\n Store the intrinsic aspect ratio of the slotted image when loaded,\n * to have a default when `--cover-hero-aspect-ratio` is not set.\n * @param target The event target\n /\n @Listen(\"load\", {capture: true})\n protected onImgLoad({target}: Event): void {\n if (target instanceof Image && target.closest(\"[slot=cover]\")) {\n const ratio = target.naturalWidth / target.naturalHeight;\n this.host.style.setProperty(\"--image-aspect-ratio\", ratio.toString());\n }\n }\n\n /\n Template for the content.\n */\n private renderContent(): HTMLDivElement {\n return (\n <div class=\"content-container\">\n <slot name=\"content\"></slot>\n </div>\n );\n }\n\n render(): HTMLZCoverHeroElement {\n return (\n <Host>\n {this.variant === CoverHeroVariant.STACKED &&\n this.contentPosition === CoverHeroContentPosition.TOP &&\n this.renderContent()}\n <div class=\"main-container\">\n <div class=\"cover-container\">\n <slot name=\"cover\"></slot>\n </div>\n <slot name=\"info-reveal\"></slot>\n {this.variant === CoverHeroVariant.OVERLAY && this.renderContent()}\n </div>\n {this.variant === CoverHeroVariant.STACKED &&\n this.contentPosition === CoverHeroContentPosition.BOTTOM &&\n this.renderContent()}\n </Host>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/z-cover-hero/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,CAAC,EAAC,MAAM,eAAe,CAAC;AACxE,OAAO,EAAC,wBAAwB,EAAE,gBAAgB,EAAC,MAAM,aAAa,CAAC;AAEvE;;;;;;;;;;GAUG;AAMH,MAAM,OAAO,UAAU;;uBAOO,gBAAgB,CAAC,OAAO;+BAMR,wBAAwB,CAAC,GAAG;mCASlD,IAAI;;IAE1B;;;;OAIG;IAEO,SAAS,CAAC,EAAC,MAAM,EAAQ;QACjC,IAAI,MAAM,YAAY,KAAK,IAAI,MAAM,CAAC,OAAO,CAAC,cAAc,CAAC,EAAE,CAAC;YAC9D,MAAM,KAAK,GAAG,MAAM,CAAC,YAAY,GAAG,MAAM,CAAC,aAAa,CAAC;YACzD,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,sBAAsB,EAAE,KAAK,CAAC,QAAQ,EAAE,CAAC,CAAC;QACxE,CAAC;IACH,CAAC;IAED;;OAEG;IACK,aAAa;QACnB,OAAO,CACL,WAAK,KAAK,EAAC,mBAAmB;YAC5B,YAAM,IAAI,EAAC,SAAS,GAAQ,CACxB,CACP,CAAC;IACJ,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACF,IAAI,CAAC,OAAO,KAAK,gBAAgB,CAAC,OAAO;gBACxC,IAAI,CAAC,eAAe,KAAK,wBAAwB,CAAC,GAAG;gBACrD,IAAI,CAAC,aAAa,EAAE;YACtB,4DAAK,KAAK,EAAC,gBAAgB;gBACzB,4DAAK,KAAK,EAAC,iBAAiB;oBAC1B,6DAAM,IAAI,EAAC,OAAO,GAAQ,CACtB;gBACN,6DAAM,IAAI,EAAC,aAAa,GAAQ;gBAC/B,IAAI,CAAC,OAAO,KAAK,gBAAgB,CAAC,OAAO,IAAI,IAAI,CAAC,aAAa,EAAE,CAC9D;YACL,IAAI,CAAC,OAAO,KAAK,gBAAgB,CAAC,OAAO;gBACxC,IAAI,CAAC,eAAe,KAAK,wBAAwB,CAAC,MAAM;gBACxD,IAAI,CAAC,aAAa,EAAE,CACjB,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {Component, Element, Host, Listen, Prop, h} from \"@stencil/core\";\nimport {CoverHeroContentPosition, CoverHeroVariant} from \"../../beans\";\n\n/*\n Cover hero component.\n * Component to display a hero image with content.\n \n @slot cover - slot for the cover image.\n * @slot content - slot for the content.\n * @slot info-reveal - slot for the info reveal.\n * @cssprop --cover-hero-overlay - overlay color of the cover hero (CSS `background` property). Default: `linear-gradient(270deg, #0000 0%, #000000e6 100%)`.\n * @cssprop --cover-hero-text-color - color of the text.\n * @cssprop --cover-hero-aspect-ratio - aspect ratio to use for the image. You can pass a fraction or a number representing the ratio. Default: the intrinsic aspect ratio of the slotted image or `16/9`.\n /\n@Component({\n tag: \"z-cover-hero\",\n styleUrl: \"styles.css\",\n shadow: true,\n})\nexport class ZCoverHero {\n @Element() host: HTMLZCoverHeroElement;\n\n /\n Cover hero variant. Can be `OVERLAY` or `STACKED`.\n /\n @Prop({reflect: true})\n variant: CoverHeroVariant = CoverHeroVariant.OVERLAY;\n\n /\n Vertical content position (for `STACKED` variant).\n /\n @Prop({reflect: true})\n contentPosition: CoverHeroContentPosition = CoverHeroContentPosition.TOP;\n\n /\n Whether to keep the image aspect ratio.\n * If set to `false`, the cssprop `--cover-hero-aspect-ratio` will not affect the component's size;\n * instead, the height of the component follows the content's one.\n * Note: it may be necessary to set a min and/or max height to the component.\n /\n @Prop({reflect: true})\n preserveAspectRatio = true;\n\n /\n Store the intrinsic aspect ratio of the slotted image when loaded,\n * to have a default when `--cover-hero-aspect-ratio` is not set.\n * @param target The event target\n /\n @Listen(\"load\", {capture: true})\n protected onImgLoad({target}: Event): void {\n if (target instanceof Image && target.closest(\"[slot=cover]\")) {\n const ratio = target.naturalWidth / target.naturalHeight;\n this.host.style.setProperty(\"--image-aspect-ratio\", ratio.toString());\n }\n }\n\n /\n Template for the content.\n */\n private renderContent(): HTMLDivElement {\n return (\n <div class=\"content-container\">\n <slot name=\"content\"></slot>\n </div>\n );\n }\n\n render(): HTMLZCoverHeroElement {\n return (\n <Host>\n {this.variant === CoverHeroVariant.STACKED &&\n this.contentPosition === CoverHeroContentPosition.TOP &&\n this.renderContent()}\n <div class=\"main-container\">\n <div class=\"cover-container\">\n <slot name=\"cover\"></slot>\n </div>\n <slot name=\"info-reveal\"></slot>\n {this.variant === CoverHeroVariant.OVERLAY && this.renderContent()}\n </div>\n {this.variant === CoverHeroVariant.STACKED &&\n this.contentPosition === CoverHeroContentPosition.BOTTOM &&\n this.renderContent()}\n </Host>\n );\n }\n}\n"]}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"index.stories.js","sourceRoot":"","sources":["../../../../src/components/z-cover-hero/index.stories.ts"],"names":[],"mappings":"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","sourcesContent":["import {Meta, StoryObj} from \"@storybook/web-components\";\nimport {html} from \"lit\";\nimport {styleMap} from \"lit/directives/style-map.js\";\nimport {type ZCoverHero} from \".\";\nimport {CoverHeroContentPosition, CoverHeroVariant} from \"../../beans\";\nimport {CSSVarsArguments, getColorTokenArgConfig} from \"../../utils/storybook-utils\";\nimport \"../z-button/index\";\nimport \"../z-info-reveal/index\";\nimport \"./index\";\nimport \"./index.stories.css\";\n\ntype ZCoverHeroStoriesArgs = ZCoverHero &\n CSSVarsArguments<\"cover-hero-text-color\" \| \"cover-hero-overlay\" \| \"cover-hero-aspect-ratio\">;\n\nconst StoryMeta = {\n title: \"ZCoverHero\",\n component: \"z-cover-hero\",\n argTypes: {\n \"variant\": {\n control: {\n type: \"inline-radio\",\n },\n options: Object.values(CoverHeroVariant),\n },\n \"contentPosition\": {\n if: {\n arg: \"variant\",\n eq: CoverHeroVariant.STACKED,\n },\n control: {\n type: \"inline-radio\",\n },\n options: Object.values(CoverHeroContentPosition),\n },\n \"--cover-hero-text-color\": getColorTokenArgConfig(),\n \"--cover-hero-overlay\": {\n if: {\n arg: \"variant\",\n eq: CoverHeroVariant.OVERLAY,\n },\n },\n \"--cover-hero-aspect-ratio\": {\n if: {\n arg: \"preserveAspectRatio\",\n },\n control: {\n type: \"text\",\n },\n },\n },\n args: {\n \"variant\": CoverHeroVariant.OVERLAY,\n \"contentPosition\": CoverHeroContentPosition.TOP,\n \"preserveAspectRatio\": true,\n \"--cover-hero-aspect-ratio\": undefined,\n \"--cover-hero-overlay\": \"linear-gradient(270deg, #0000 0%, #000000e6 100%)\",\n \"--cover-hero-text-color\": \"var(--color-text-inverse)\",\n },\n} satisfies Meta<ZCoverHeroStoriesArgs>;\n\nexport default StoryMeta;\n\ntype Story = StoryObj<ZCoverHeroStoriesArgs>;\n\nexport const Default = {\n render: (args) => html`\n <div class=\"z-cover-hero-story-container\">\n <z-cover-hero\n .contentPosition=${args.contentPosition}\n .variant=${args.variant}\n .preserveAspectRatio=${args.preserveAspectRatio}\n style=${styleMap({\n \"--cover-hero-overlay\": args[\"--cover-hero-overlay\"],\n \"--cover-hero-text-color\": args[\"--cover-hero-text-color\"],\n \"--cover-hero-aspect-ratio\": args[\"--cover-hero-aspect-ratio\"],\n })}\n >\n <img\n slot=\"cover\"\n src=\"https://images.pexels.com/photos/10323759/pexels-photo-10323759.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2\"\n alt=\"\"\n />\n <div slot=\"content\">\n <div>\n Lorem ipsum dolor sit amet, consectetur adipisci elit, sed do eiusmod tempor incidunt ut labore et dolore\n magna aliqua. Ut enim ad minim veniam, quis nostrum exercitationem ullamco laboriosam, nisi ut aliquid ex ea\n commodi consequatur. Duis aute irure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla\n pariatur.\n </div>\n <div class=\"buttons\">\n <z-button variant=\"primary\">Primary</z-button>\n <z-button variant=\"secondary\">Secondary</z-button>\n </div>\n </div>\n <z-info-reveal\n slot=\"info-reveal\"\n position=\"bottom_right\"\n >\n <span>Lorem ipsum dolor sit amet.</span>\n </z-info-reveal>\n </z-cover-hero>\n </div>\n `,\n} satisfies Story;\n\nexport const CustomAspectRatio = {\n parameters: {\n controls: {\n exclude: [\"variant\", \"preserveAspectRatio\"],\n },\n },\n args: {\n \"--cover-hero-aspect-ratio\": \"16/8\",\n },\n render: (args) => html`\n <div class=\"z-cover-hero-story-container\">\n <z-cover-hero\n style=${styleMap({\n \"--cover-hero-overlay\": args[\"--cover-hero-overlay\"],\n \"--cover-hero-text-color\": args[\"--cover-hero-text-color\"],\n \"--cover-hero-aspect-ratio\": args[\"--cover-hero-aspect-ratio\"],\n })}\n >\n <img\n slot=\"cover\"\n src=\"https://images.pexels.com/photos/10323759/pexels-photo-10323759.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2\"\n alt=\"\"\n />\n <div slot=\"content\">\n <div>\n Lorem ipsum dolor sit amet, consectetur adipisci elit, sed do eiusmod tempor incidunt ut labore et dolore\n magna aliqua. Ut enim ad minim veniam, quis nostrum exercitationem ullamco laboriosam, nisi ut aliquid ex ea\n commodi consequatur. Duis aute irure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla\n pariatur.\n </div>\n <div class=\"buttons\">\n <z-button variant=\"primary\">Primary</z-button>\n <z-button variant=\"secondary\">Secondary</z-button>\n </div>\n </div>\n <z-info-reveal\n slot=\"info-reveal\"\n position=\"bottom_right\"\n >\n <span>Lorem ipsum dolor sit amet.</span>\n </z-info-reveal>\n </z-cover-hero>\n </div>\n `,\n};\n\nexport const AutoAspectRatio = {\n parameters: {\n controls: {\n exclude: [\"variant\", \"preserveAspectRatio\"],\n },\n },\n args: {\n \"--cover-hero-aspect-ratio\": \"\",\n },\n render: (args) => html`\n <div class=\"z-cover-hero-story-container z-cover-hero-auto-ratio\">\n <z-cover-hero\n style=${styleMap({\n \"--cover-hero-overlay\": args[\"--cover-hero-overlay\"],\n \"--cover-hero-text-color\": args[\"--cover-hero-text-color\"],\n \"--cover-hero-aspect-ratio\": args[\"--cover-hero-aspect-ratio\"],\n })}\n >\n <img\n slot=\"cover\"\n src=\"https://images.pexels.com/photos/4934920/pexels-photo-4934920.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2\"\n alt=\"\"\n />\n <div slot=\"content\">\n <div>\n Lorem ipsum dolor sit amet, consectetur adipisci elit, sed do eiusmod tempor incidunt ut labore et dolore\n magna aliqua. Ut enim ad minim veniam, quis nostrum exercitationem ullamco laboriosam, nisi ut aliquid ex ea\n commodi consequatur. Duis aute irure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla\n pariatur.\n </div>\n <div class=\"buttons\">\n <z-button variant=\"primary\">Primary</z-button>\n <z-button variant=\"secondary\">Secondary</z-button>\n </div>\n </div>\n </z-cover-hero>\n </div>\n `,\n};\n\nexport const WithoutPreservingAspectRatio = {\n argTypes: {\n \"variant\": {table: {disable: true}},\n \"preserveAspectRatio\": {table: {disable: true}},\n \"--cover-hero-aspect-ratio\": {table: {disable: true}},\n },\n args: {\n textContent:\n \"Lorem ipsum dolor sit amet, consectetur adipisci elit, sed do eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrum exercitationem ullamco laboriosam, nisi ut aliquid ex ea commodi consequatur. Duis aute irure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.\",\n },\n render: (args) => html`\n <div class=\"z-cover-hero-story-container\">\n <z-cover-hero\n .preserveAspectRatio=${false}\n style=${styleMap({\n \"--cover-hero-overlay\": args[\"--cover-hero-overlay\"],\n \"--cover-hero-text-color\": args[\"--cover-hero-text-color\"],\n })}\n >\n <img\n slot=\"cover\"\n src=\"https://images.pexels.com/photos/10323759/pexels-photo-10323759.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2\"\n alt=\"\"\n />\n <div slot=\"content\">\n <div>${args.textContent}</div>\n <div class=\"buttons\">\n <z-button variant=\"primary\">Primary</z-button>\n <z-button variant=\"secondary\">Secondary</z-button>\n </div>\n </div>\n </z-cover-hero>\n </div>\n `,\n};\n\nexport const StackedVariant = {\n parameters: {\n controls: {\n exclude: [\"variant\", \"preserveAspectRatio\", \"--cover-hero-aspect-ratio\", \"--cover-hero-text-color\"],\n },\n },\n args: {\n variant: CoverHeroVariant.STACKED,\n },\n render: (args) => html`\n <div class=\"z-cover-hero-story-container\">\n <z-cover-hero\n .contentPosition=${args.contentPosition}\n .preserveAspectRatio=${args.preserveAspectRatio}\n .variant=${args.variant}\n >\n <img\n slot=\"cover\"\n src=\"https://images.pexels.com/photos/10323759/pexels-photo-10323759.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2\"\n alt=\"\"\n />\n <div slot=\"content\">\n <div>\n Lorem ipsum dolor sit amet, consectetur adipisci elit, sed do eiusmod tempor incidunt ut labore et dolore\n magna aliqua. Ut enim ad minim veniam, quis nostrum exercitationem ullamco laboriosam, nisi ut aliquid ex ea\n commodi consequatur. Duis aute irure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla\n pariatur.\n </div>\n <div class=\"buttons\">\n <z-button variant=\"primary\">Primary</z-button>\n <z-button variant=\"secondary\">Secondary</z-button>\n </div>\n </div>\n <z-info-reveal\n slot=\"info-reveal\"\n position=\"bottom_right\"\n >\n <span>Lorem ipsum dolor sit amet.</span>\n </z-info-reveal>\n </z-cover-hero>\n </div>\n `,\n};\n"]}
1	+ {"version":3,"file":"index.stories.js","sourceRoot":"","sources":["../../../src/components/z-cover-hero/index.stories.ts"],"names":[],"mappings":"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","sourcesContent":["import {Meta, StoryObj} from \"@storybook/web-components\";\nimport {html} from \"lit\";\nimport {styleMap} from \"lit/directives/style-map.js\";\nimport {type ZCoverHero} from \".\";\nimport {CoverHeroContentPosition, CoverHeroVariant} from \"../../beans\";\nimport {CSSVarsArguments, getColorTokenArgConfig} from \"../../utils/storybook-utils\";\nimport \"../z-button/index\";\nimport \"../z-info-reveal/index\";\nimport \"./index\";\nimport \"./index.stories.css\";\n\ntype ZCoverHeroStoriesArgs = ZCoverHero &\n CSSVarsArguments<\"cover-hero-text-color\" \| \"cover-hero-overlay\" \| \"cover-hero-aspect-ratio\">;\n\nconst StoryMeta = {\n title: \"ZCoverHero\",\n component: \"z-cover-hero\",\n argTypes: {\n \"variant\": {\n control: {\n type: \"inline-radio\",\n },\n options: Object.values(CoverHeroVariant),\n },\n \"contentPosition\": {\n if: {\n arg: \"variant\",\n eq: CoverHeroVariant.STACKED,\n },\n control: {\n type: \"inline-radio\",\n },\n options: Object.values(CoverHeroContentPosition),\n },\n \"--cover-hero-text-color\": getColorTokenArgConfig(),\n \"--cover-hero-overlay\": {\n if: {\n arg: \"variant\",\n eq: CoverHeroVariant.OVERLAY,\n },\n },\n \"--cover-hero-aspect-ratio\": {\n if: {\n arg: \"preserveAspectRatio\",\n },\n control: {\n type: \"text\",\n },\n },\n },\n args: {\n \"variant\": CoverHeroVariant.OVERLAY,\n \"contentPosition\": CoverHeroContentPosition.TOP,\n \"preserveAspectRatio\": true,\n \"--cover-hero-aspect-ratio\": undefined,\n \"--cover-hero-overlay\": \"linear-gradient(270deg, #0000 0%, #000000e6 100%)\",\n \"--cover-hero-text-color\": \"var(--color-text-inverse)\",\n },\n} satisfies Meta<ZCoverHeroStoriesArgs>;\n\nexport default StoryMeta;\n\ntype Story = StoryObj<ZCoverHeroStoriesArgs>;\n\nexport const Default = {\n render: (args) => html`\n <div class=\"z-cover-hero-story-container\">\n <z-cover-hero\n .contentPosition=${args.contentPosition}\n .variant=${args.variant}\n .preserveAspectRatio=${args.preserveAspectRatio}\n style=${styleMap({\n \"--cover-hero-overlay\": args[\"--cover-hero-overlay\"],\n \"--cover-hero-text-color\": args[\"--cover-hero-text-color\"],\n \"--cover-hero-aspect-ratio\": args[\"--cover-hero-aspect-ratio\"],\n })}\n >\n <img\n slot=\"cover\"\n src=\"https://images.pexels.com/photos/10323759/pexels-photo-10323759.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2\"\n alt=\"\"\n />\n <div slot=\"content\">\n <div>\n Lorem ipsum dolor sit amet, consectetur adipisci elit, sed do eiusmod tempor incidunt ut labore et dolore\n magna aliqua. Ut enim ad minim veniam, quis nostrum exercitationem ullamco laboriosam, nisi ut aliquid ex ea\n commodi consequatur. Duis aute irure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla\n pariatur.\n </div>\n <div class=\"buttons\">\n <z-button variant=\"primary\">Primary</z-button>\n <z-button variant=\"secondary\">Secondary</z-button>\n </div>\n </div>\n <z-info-reveal\n slot=\"info-reveal\"\n position=\"bottom_right\"\n >\n <span>Lorem ipsum dolor sit amet.</span>\n </z-info-reveal>\n </z-cover-hero>\n </div>\n `,\n} satisfies Story;\n\nexport const CustomAspectRatio = {\n parameters: {\n controls: {\n exclude: [\"variant\", \"preserveAspectRatio\"],\n },\n },\n args: {\n \"--cover-hero-aspect-ratio\": \"16/8\",\n },\n render: (args) => html`\n <div class=\"z-cover-hero-story-container\">\n <z-cover-hero\n style=${styleMap({\n \"--cover-hero-overlay\": args[\"--cover-hero-overlay\"],\n \"--cover-hero-text-color\": args[\"--cover-hero-text-color\"],\n \"--cover-hero-aspect-ratio\": args[\"--cover-hero-aspect-ratio\"],\n })}\n >\n <img\n slot=\"cover\"\n src=\"https://images.pexels.com/photos/10323759/pexels-photo-10323759.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2\"\n alt=\"\"\n />\n <div slot=\"content\">\n <div>\n Lorem ipsum dolor sit amet, consectetur adipisci elit, sed do eiusmod tempor incidunt ut labore et dolore\n magna aliqua. Ut enim ad minim veniam, quis nostrum exercitationem ullamco laboriosam, nisi ut aliquid ex ea\n commodi consequatur. Duis aute irure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla\n pariatur.\n </div>\n <div class=\"buttons\">\n <z-button variant=\"primary\">Primary</z-button>\n <z-button variant=\"secondary\">Secondary</z-button>\n </div>\n </div>\n <z-info-reveal\n slot=\"info-reveal\"\n position=\"bottom_right\"\n >\n <span>Lorem ipsum dolor sit amet.</span>\n </z-info-reveal>\n </z-cover-hero>\n </div>\n `,\n};\n\nexport const AutoAspectRatio = {\n parameters: {\n controls: {\n exclude: [\"variant\", \"preserveAspectRatio\"],\n },\n },\n args: {\n \"--cover-hero-aspect-ratio\": \"\",\n },\n render: (args) => html`\n <div class=\"z-cover-hero-story-container z-cover-hero-auto-ratio\">\n <z-cover-hero\n style=${styleMap({\n \"--cover-hero-overlay\": args[\"--cover-hero-overlay\"],\n \"--cover-hero-text-color\": args[\"--cover-hero-text-color\"],\n \"--cover-hero-aspect-ratio\": args[\"--cover-hero-aspect-ratio\"],\n })}\n >\n <img\n slot=\"cover\"\n src=\"https://images.pexels.com/photos/4934920/pexels-photo-4934920.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2\"\n alt=\"\"\n />\n <div slot=\"content\">\n <div>\n Lorem ipsum dolor sit amet, consectetur adipisci elit, sed do eiusmod tempor incidunt ut labore et dolore\n magna aliqua. Ut enim ad minim veniam, quis nostrum exercitationem ullamco laboriosam, nisi ut aliquid ex ea\n commodi consequatur. Duis aute irure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla\n pariatur.\n </div>\n <div class=\"buttons\">\n <z-button variant=\"primary\">Primary</z-button>\n <z-button variant=\"secondary\">Secondary</z-button>\n </div>\n </div>\n </z-cover-hero>\n </div>\n `,\n};\n\nexport const WithoutPreservingAspectRatio = {\n argTypes: {\n \"variant\": {table: {disable: true}},\n \"preserveAspectRatio\": {table: {disable: true}},\n \"--cover-hero-aspect-ratio\": {table: {disable: true}},\n },\n args: {\n textContent:\n \"Lorem ipsum dolor sit amet, consectetur adipisci elit, sed do eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrum exercitationem ullamco laboriosam, nisi ut aliquid ex ea commodi consequatur. Duis aute irure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.\",\n },\n render: (args) => html`\n <div class=\"z-cover-hero-story-container\">\n <z-cover-hero\n .preserveAspectRatio=${false}\n style=${styleMap({\n \"--cover-hero-overlay\": args[\"--cover-hero-overlay\"],\n \"--cover-hero-text-color\": args[\"--cover-hero-text-color\"],\n })}\n >\n <img\n slot=\"cover\"\n src=\"https://images.pexels.com/photos/10323759/pexels-photo-10323759.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2\"\n alt=\"\"\n />\n <div slot=\"content\">\n <div>${args.textContent}</div>\n <div class=\"buttons\">\n <z-button variant=\"primary\">Primary</z-button>\n <z-button variant=\"secondary\">Secondary</z-button>\n </div>\n </div>\n </z-cover-hero>\n </div>\n `,\n};\n\nexport const StackedVariant = {\n parameters: {\n controls: {\n exclude: [\"variant\", \"preserveAspectRatio\", \"--cover-hero-aspect-ratio\", \"--cover-hero-text-color\"],\n },\n },\n args: {\n variant: CoverHeroVariant.STACKED,\n },\n render: (args) => html`\n <div class=\"z-cover-hero-story-container\">\n <z-cover-hero\n .contentPosition=${args.contentPosition}\n .preserveAspectRatio=${args.preserveAspectRatio}\n .variant=${args.variant}\n >\n <img\n slot=\"cover\"\n src=\"https://images.pexels.com/photos/10323759/pexels-photo-10323759.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2\"\n alt=\"\"\n />\n <div slot=\"content\">\n <div>\n Lorem ipsum dolor sit amet, consectetur adipisci elit, sed do eiusmod tempor incidunt ut labore et dolore\n magna aliqua. Ut enim ad minim veniam, quis nostrum exercitationem ullamco laboriosam, nisi ut aliquid ex ea\n commodi consequatur. Duis aute irure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla\n pariatur.\n </div>\n <div class=\"buttons\">\n <z-button variant=\"primary\">Primary</z-button>\n <z-button variant=\"secondary\">Secondary</z-button>\n </div>\n </div>\n <z-info-reveal\n slot=\"info-reveal\"\n position=\"bottom_right\"\n >\n <span>Lorem ipsum dolor sit amet.</span>\n </z-info-reveal>\n </z-cover-hero>\n </div>\n `,\n};\n"]}

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

@@ -7,7 +7,7 @@ export class ZDivider {
         this.orientation = DividerOrientation.HORIZONTAL;
     }
     render() {
-        return (h(Host, { key: '4e9067465f4ab27ae504ae05dda8592fa0374e5f', class: `divider-${this.size} divider-${this.orientation}`, style: { backgroundColor: `var(--${this.color})` } }));
+        return (h(Host, { key: '4612250289778d2d13742de66a2d4d5fd1d35450', class: `divider-${this.size} divider-${this.orientation}`, style: { backgroundColor: `var(--${this.color})` } }));
     }
     static get is() { return "z-divider"; }
     static get encapsulation() { return "scoped"; }

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

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","sourceRoot":"","sources":["~~../../../../~~src/components/z-divider/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAC,MAAM,eAAe,CAAC;AACvD,OAAO,EAAC,kBAAkB,EAAE,WAAW,EAAC,MAAM,aAAa,CAAC;AAO5D,MAAM,OAAO,QAAQ;;oBAGE,WAAW,CAAC,KAAK;qBAIrB,SAAS;2BAIS,kBAAkB,CAAC,UAAU;;IAEhE,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDACH,KAAK,EAAE,WAAW,IAAI,CAAC,IAAI,YAAY,IAAI,CAAC,WAAW,EAAE,EACzD,KAAK,EAAE,EAAC,eAAe,EAAE,SAAS,IAAI,CAAC,KAAK,GAAG,EAAC,GAChD,CACH,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {Component, Host, Prop, h} from \"@stencil/core\";\nimport {DividerOrientation, DividerSize} from \"../../beans\";\n@Component({\n tag: \"z-divider\",\n styleUrl: \"styles.css\",\n shadow: false,\n scoped: true,\n})\nexport class ZDivider {\n /** [optional] Divider size /\n @Prop()\n size?: DividerSize = DividerSize.SMALL;\n\n /* [optional] Divider color /\n @Prop()\n color?: string = \"gray200\";\n\n /* [optional] Divider orintation */\n @Prop()\n orientation?: DividerOrientation = DividerOrientation.HORIZONTAL;\n\n render(): HTMLZDividerElement {\n return (\n <Host\n class={`divider-${this.size} divider-${this.orientation}`}\n style={{backgroundColor: `var(--${this.color})`}}\n />\n );\n }\n}\n"]}
1	+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/z-divider/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAC,MAAM,eAAe,CAAC;AACvD,OAAO,EAAC,kBAAkB,EAAE,WAAW,EAAC,MAAM,aAAa,CAAC;AAO5D,MAAM,OAAO,QAAQ;;oBAGE,WAAW,CAAC,KAAK;qBAIrB,SAAS;2BAIS,kBAAkB,CAAC,UAAU;;IAEhE,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDACH,KAAK,EAAE,WAAW,IAAI,CAAC,IAAI,YAAY,IAAI,CAAC,WAAW,EAAE,EACzD,KAAK,EAAE,EAAC,eAAe,EAAE,SAAS,IAAI,CAAC,KAAK,GAAG,EAAC,GAChD,CACH,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {Component, Host, Prop, h} from \"@stencil/core\";\nimport {DividerOrientation, DividerSize} from \"../../beans\";\n@Component({\n tag: \"z-divider\",\n styleUrl: \"styles.css\",\n shadow: false,\n scoped: true,\n})\nexport class ZDivider {\n /** [optional] Divider size /\n @Prop()\n size?: DividerSize = DividerSize.SMALL;\n\n /* [optional] Divider color /\n @Prop()\n color?: string = \"gray200\";\n\n /* [optional] Divider orintation */\n @Prop()\n orientation?: DividerOrientation = DividerOrientation.HORIZONTAL;\n\n render(): HTMLZDividerElement {\n return (\n <Host\n class={`divider-${this.size} divider-${this.orientation}`}\n style={{backgroundColor: `var(--${this.color})`}}\n />\n );\n }\n}\n"]}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"index.stories.js","sourceRoot":"","sources":["~~../../../../~~src/components/z-divider/index.stories.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,IAAI,EAAC,MAAM,KAAK,CAAC;AAEzB,OAAO,EAAC,kBAAkB,EAAE,WAAW,EAAC,MAAM,aAAa,CAAC;AAC5D,OAAO,EAAC,cAAc,EAAC,MAAM,6BAA6B,CAAC;AAC3D,OAAO,SAAS,CAAC;AAEjB,MAAM,SAAS,GAAG;IAChB,KAAK,EAAE,UAAU;IACjB,SAAS,EAAE,WAAW;IACtB,QAAQ,EAAE;QACR,IAAI,EAAE;YACJ,OAAO,EAAE;gBACP,IAAI,EAAE,QAAQ;aACf;YACD,OAAO,EAAE,MAAM,CAAC,MAAM,CAAC,WAAW,CAAC;SACpC;QACD,WAAW,EAAE;YACX,OAAO,EAAE;gBACP,IAAI,EAAE,QAAQ;aACf;YACD,OAAO,EAAE,MAAM,CAAC,MAAM,CAAC,kBAAkB,CAAC;SAC3C;QACD,KAAK,EAAE;YACL,OAAO,EAAE;gBACP,IAAI,EAAE,QAAQ;aACf;YACD,OAAO,EAAE,cAAc,EAAE,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,OAAO,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC;SAClE;KACF;IACD,IAAI,EAAE;QACJ,IAAI,EAAE,WAAW,CAAC,KAAK;QACvB,KAAK,EAAE,SAAS;QAChB,WAAW,EAAE,kBAAkB,CAAC,UAAU;KAC3C;CACuB,CAAC;AAC3B,eAAe,SAAS,CAAC;AAEzB,MAAM,CAAC,MAAM,OAAO,GAAG;IACrB,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CACf,IAAI,CAAA;;gBAEQ,IAAI,CAAC,IAAI;iBACR,IAAI,CAAC,KAAK;uBACJ,IAAI,CAAC,WAAW;;WAE5B;IACT,IAAI,EAAE,UAAU;CACY,CAAC","sourcesContent":["import {Meta, StoryObj} from \"@storybook/web-components\";\nimport {html} from \"lit\";\nimport {ZDivider} from \".\";\nimport {DividerOrientation, DividerSize} from \"../../beans\";\nimport {getColorTokens} from \"../../utils/storybook-utils\";\nimport \"./index\";\n\nconst StoryMeta = {\n title: \"ZDivider\",\n component: \"z-divider\",\n argTypes: {\n size: {\n control: {\n type: \"select\",\n },\n options: Object.values(DividerSize),\n },\n orientation: {\n control: {\n type: \"select\",\n },\n options: Object.values(DividerOrientation),\n },\n color: {\n control: {\n type: \"select\",\n },\n options: getColorTokens().map((token) => token.replace(\"--\", \"\")),\n },\n },\n args: {\n size: DividerSize.SMALL,\n color: \"gray200\",\n orientation: DividerOrientation.HORIZONTAL,\n },\n} satisfies Meta<ZDivider>;\nexport default StoryMeta;\n\nexport const Default = {\n render: (args) =>\n html`<div style=\"height: 300px; padding: 24px\">\n <z-divider\n size=\"${args.size}\"\n color=\"${args.color}\"\n orientation=\"${args.orientation}\"\n ></z-divider>\n </div>`,\n name: \"ZDivider\",\n} satisfies StoryObj<ZDivider>;\n"]}
1	+ {"version":3,"file":"index.stories.js","sourceRoot":"","sources":["../../../src/components/z-divider/index.stories.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,IAAI,EAAC,MAAM,KAAK,CAAC;AAEzB,OAAO,EAAC,kBAAkB,EAAE,WAAW,EAAC,MAAM,aAAa,CAAC;AAC5D,OAAO,EAAC,cAAc,EAAC,MAAM,6BAA6B,CAAC;AAC3D,OAAO,SAAS,CAAC;AAEjB,MAAM,SAAS,GAAG;IAChB,KAAK,EAAE,UAAU;IACjB,SAAS,EAAE,WAAW;IACtB,QAAQ,EAAE;QACR,IAAI,EAAE;YACJ,OAAO,EAAE;gBACP,IAAI,EAAE,QAAQ;aACf;YACD,OAAO,EAAE,MAAM,CAAC,MAAM,CAAC,WAAW,CAAC;SACpC;QACD,WAAW,EAAE;YACX,OAAO,EAAE;gBACP,IAAI,EAAE,QAAQ;aACf;YACD,OAAO,EAAE,MAAM,CAAC,MAAM,CAAC,kBAAkB,CAAC;SAC3C;QACD,KAAK,EAAE;YACL,OAAO,EAAE;gBACP,IAAI,EAAE,QAAQ;aACf;YACD,OAAO,EAAE,cAAc,EAAE,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,OAAO,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC;SAClE;KACF;IACD,IAAI,EAAE;QACJ,IAAI,EAAE,WAAW,CAAC,KAAK;QACvB,KAAK,EAAE,SAAS;QAChB,WAAW,EAAE,kBAAkB,CAAC,UAAU;KAC3C;CACuB,CAAC;AAC3B,eAAe,SAAS,CAAC;AAEzB,MAAM,CAAC,MAAM,OAAO,GAAG;IACrB,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CACf,IAAI,CAAA;;gBAEQ,IAAI,CAAC,IAAI;iBACR,IAAI,CAAC,KAAK;uBACJ,IAAI,CAAC,WAAW;;WAE5B;IACT,IAAI,EAAE,UAAU;CACY,CAAC","sourcesContent":["import {Meta, StoryObj} from \"@storybook/web-components\";\nimport {html} from \"lit\";\nimport {ZDivider} from \".\";\nimport {DividerOrientation, DividerSize} from \"../../beans\";\nimport {getColorTokens} from \"../../utils/storybook-utils\";\nimport \"./index\";\n\nconst StoryMeta = {\n title: \"ZDivider\",\n component: \"z-divider\",\n argTypes: {\n size: {\n control: {\n type: \"select\",\n },\n options: Object.values(DividerSize),\n },\n orientation: {\n control: {\n type: \"select\",\n },\n options: Object.values(DividerOrientation),\n },\n color: {\n control: {\n type: \"select\",\n },\n options: getColorTokens().map((token) => token.replace(\"--\", \"\")),\n },\n },\n args: {\n size: DividerSize.SMALL,\n color: \"gray200\",\n orientation: DividerOrientation.HORIZONTAL,\n },\n} satisfies Meta<ZDivider>;\nexport default StoryMeta;\n\nexport const Default = {\n render: (args) =>\n html`<div style=\"height: 300px; padding: 24px\">\n <z-divider\n size=\"${args.size}\"\n color=\"${args.color}\"\n orientation=\"${args.orientation}\"\n ></z-divider>\n </div>`,\n name: \"ZDivider\",\n} satisfies StoryObj<ZDivider>;\n"]}

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

@@ -1,7 +1,7 @@
 import { h, Host } from "@stencil/core";
 export class ZGhostLoading {
     render() {
-        return h(Host, { key: '02b753d5f7c972860fe6f49844b5c5333977b0e5' });
+        return h(Host, { key: '2881f3b25dedc311f34cd76911ff96f2fdfc0c41' });
     }
     static get is() { return "z-ghost-loading"; }
     static get encapsulation() { return "shadow"; }

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

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","sourceRoot":"","sources":["~~../../../../~~src/components/z-ghost-loading/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAE,CAAC,EAAE,IAAI,EAAC,MAAM,eAAe,CAAC;AAMjD,MAAM,OAAO,aAAa;IACxB,MAAM;QACJ,OAAO,EAAC,IAAI,sDAAG,CAAC;IAClB,CAAC;;;;;;;;;CACF","sourcesContent":["import {Component, h, Host} from \"@stencil/core\";\n@Component({\n tag: \"z-ghost-loading\",\n styleUrl: \"styles.css\",\n shadow: true,\n})\nexport class ZGhostLoading {\n render(): HTMLZGhostLoadingElement {\n return <Host />;\n }\n}\n"]}
1	+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/z-ghost-loading/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAE,CAAC,EAAE,IAAI,EAAC,MAAM,eAAe,CAAC;AAMjD,MAAM,OAAO,aAAa;IACxB,MAAM;QACJ,OAAO,EAAC,IAAI,sDAAG,CAAC;IAClB,CAAC;;;;;;;;;CACF","sourcesContent":["import {Component, h, Host} from \"@stencil/core\";\n@Component({\n tag: \"z-ghost-loading\",\n styleUrl: \"styles.css\",\n shadow: true,\n})\nexport class ZGhostLoading {\n render(): HTMLZGhostLoadingElement {\n return <Host />;\n }\n}\n"]}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"index.stories.js","sourceRoot":"","sources":["~~../../../../~~src/components/z-ghost-loading/index.stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,IAAI,EAAC,MAAM,KAAK,CAAC;AACzB,OAAO,SAAS,CAAC;AAEjB,eAAe;IACb,KAAK,EAAE,eAAe;IACtB,SAAS,EAAE,iBAAiB;CAC7B,CAAC;AAEF,MAAM,CAAC,MAAM,aAAa,GAAG;IAC3B,MAAM,EAAE,GAAG,EAAE,CACX,IAAI,CAAA;;;;;;;;;;;;aAYK;CACZ,CAAC","sourcesContent":["import {html} from \"lit\";\nimport \"./index\";\n\nexport default {\n title: \"ZGhostLoading\",\n component: \"z-ghost-loading\",\n};\n\nexport const ZGhostLoading = {\n render: () =>\n html`<div style=\"height:24px; padding-bottom:8px;\"><z-ghost-loading></z-ghost-loading></div>\n <div style=\"width:50%; height:24px\"><z-ghost-loading></z-ghost-loading></div>\n <br /><br />\n <div style=\"height:12px; padding-bottom:8px;\"><z-ghost-loading></z-ghost-loading></div>\n <div style=\"height:12px; padding-bottom:8px;\"><z-ghost-loading></z-ghost-loading></div>\n <div style=\"height:12px; padding-bottom:8px;\"><z-ghost-loading></z-ghost-loading></div>\n <div style=\"width:50%; height:12px\"><z-ghost-loading></z-ghost-loading></div>\n <br /><br />\n <div style=\"display:flex\">\n <div style=\"width:30%; height:50px; padding-right:20px\"><z-ghost-loading></z-ghost-loading></div>\n <div style=\"width:30%; height:50px; padding-right:20px\"><z-ghost-loading></z-ghost-loading></div>\n <div style=\"width:30%; height:50px;\"><z-ghost-loading></z-ghost-loading></div>\n </div>`,\n};\n"]}
1	+ {"version":3,"file":"index.stories.js","sourceRoot":"","sources":["../../../src/components/z-ghost-loading/index.stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,IAAI,EAAC,MAAM,KAAK,CAAC;AACzB,OAAO,SAAS,CAAC;AAEjB,eAAe;IACb,KAAK,EAAE,eAAe;IACtB,SAAS,EAAE,iBAAiB;CAC7B,CAAC;AAEF,MAAM,CAAC,MAAM,aAAa,GAAG;IAC3B,MAAM,EAAE,GAAG,EAAE,CACX,IAAI,CAAA;;;;;;;;;;;;aAYK;CACZ,CAAC","sourcesContent":["import {html} from \"lit\";\nimport \"./index\";\n\nexport default {\n title: \"ZGhostLoading\",\n component: \"z-ghost-loading\",\n};\n\nexport const ZGhostLoading = {\n render: () =>\n html`<div style=\"height:24px; padding-bottom:8px;\"><z-ghost-loading></z-ghost-loading></div>\n <div style=\"width:50%; height:24px\"><z-ghost-loading></z-ghost-loading></div>\n <br /><br />\n <div style=\"height:12px; padding-bottom:8px;\"><z-ghost-loading></z-ghost-loading></div>\n <div style=\"height:12px; padding-bottom:8px;\"><z-ghost-loading></z-ghost-loading></div>\n <div style=\"height:12px; padding-bottom:8px;\"><z-ghost-loading></z-ghost-loading></div>\n <div style=\"width:50%; height:12px\"><z-ghost-loading></z-ghost-loading></div>\n <br /><br />\n <div style=\"display:flex\">\n <div style=\"width:30%; height:50px; padding-right:20px\"><z-ghost-loading></z-ghost-loading></div>\n <div style=\"width:30%; height:50px; padding-right:20px\"><z-ghost-loading></z-ghost-loading></div>\n <div style=\"width:30%; height:50px;\"><z-ghost-loading></z-ghost-loading></div>\n </div>`,\n};\n"]}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","sourceRoot":"","sources":["~~../../../../~~src/components/z-icon/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAC,MAAM,eAAe,CAAC;AACvD,OAAO,EAAC,KAAK,EAAC,MAAM,yBAAyB,CAAC;AAO9C,MAAM,OAAO,KAAK;;;;;;;;IAqBR,mBAAmB,CAAC,SAAiB;QAC3C,IAAI,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAE,UAAU,CAAC,GAAG,CAAC,EAAE,CAAC;YAC/B,OAAO,YAAM,CAAC,EAAE,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,GAAS,CAAC;QAC5C,CAAC;QAED,OAAO,eAAS,MAAM,EAAE,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,GAAY,CAAC;IACvD,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,oEAAa,MAAM;YACtB,4DACE,OAAO,EAAC,eAAe,EACvB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,EAAE,EAAE,IAAI,CAAC,MAAM,EACf,IAAI,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,SAAS,IAAI,CAAC,IAAI,GAAG,CAAC,CAAC,CAAC,EAAE,IAE3C,IAAI,CAAC,mBAAmB,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CACvC,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {Component, Host, Prop, h} from \"@stencil/core\";\nimport {ICONS} from \"../../constants/iconset\";\n\n@Component({\n tag: \"z-icon\",\n styleUrl: \"styles.css\",\n shadow: true,\n})\nexport class ZIcon {\n /** icon name /\n @Prop()\n name: string;\n\n /* icon height (optional) /\n @Prop()\n height?: number;\n\n /* icon width (optional) /\n @Prop()\n width?: number;\n\n /* icon id (optional) /\n @Prop()\n iconid?: string;\n\n /* icon fill (optional) */\n @Prop()\n fill?: string;\n\n private selectPathOrPolygon(iconValue: string): SVGPathElement \| SVGPolygonElement {\n if (iconValue?.startsWith(\"M\")) {\n return <path d={ICONS[this.name]}></path>;\n }\n\n return <polygon points={ICONS[this.name]}></polygon>;\n }\n\n render(): SVGElement {\n return (\n <Host aria-hidden=\"true\">\n <svg\n viewBox=\"0 0 1000 1000\"\n width={this.width}\n height={this.height}\n id={this.iconid}\n fill={this.fill ? `var(--${this.fill})` : \"\"}\n >\n {this.selectPathOrPolygon(ICONS[this.name])}\n </svg>\n </Host>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/z-icon/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAC,MAAM,eAAe,CAAC;AACvD,OAAO,EAAC,KAAK,EAAC,MAAM,yBAAyB,CAAC;AAO9C,MAAM,OAAO,KAAK;;;;;;;;IAqBR,mBAAmB,CAAC,SAAiB;QAC3C,IAAI,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAE,UAAU,CAAC,GAAG,CAAC,EAAE,CAAC;YAC/B,OAAO,YAAM,CAAC,EAAE,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,GAAS,CAAC;QAC5C,CAAC;QAED,OAAO,eAAS,MAAM,EAAE,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,GAAY,CAAC;IACvD,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,oEAAa,MAAM;YACtB,4DACE,OAAO,EAAC,eAAe,EACvB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,EAAE,EAAE,IAAI,CAAC,MAAM,EACf,IAAI,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,SAAS,IAAI,CAAC,IAAI,GAAG,CAAC,CAAC,CAAC,EAAE,IAE3C,IAAI,CAAC,mBAAmB,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CACvC,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {Component, Host, Prop, h} from \"@stencil/core\";\nimport {ICONS} from \"../../constants/iconset\";\n\n@Component({\n tag: \"z-icon\",\n styleUrl: \"styles.css\",\n shadow: true,\n})\nexport class ZIcon {\n /** icon name /\n @Prop()\n name: string;\n\n /* icon height (optional) /\n @Prop()\n height?: number;\n\n /* icon width (optional) /\n @Prop()\n width?: number;\n\n /* icon id (optional) /\n @Prop()\n iconid?: string;\n\n /* icon fill (optional) */\n @Prop()\n fill?: string;\n\n private selectPathOrPolygon(iconValue: string): SVGPathElement \| SVGPolygonElement {\n if (iconValue?.startsWith(\"M\")) {\n return <path d={ICONS[this.name]}></path>;\n }\n\n return <polygon points={ICONS[this.name]}></polygon>;\n }\n\n render(): SVGElement {\n return (\n <Host aria-hidden=\"true\">\n <svg\n viewBox=\"0 0 1000 1000\"\n width={this.width}\n height={this.height}\n id={this.iconid}\n fill={this.fill ? `var(--${this.fill})` : \"\"}\n >\n {this.selectPathOrPolygon(ICONS[this.name])}\n </svg>\n </Host>\n );\n }\n}\n"]}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"index.stories.js","sourceRoot":"","sources":["~~../../../../~~src/components/z-icon/index.stories.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,IAAI,EAAC,MAAM,KAAK,CAAC;AAEzB,OAAO,EAAC,cAAc,EAAC,MAAM,6BAA6B,CAAC;AAC3D,OAAO,SAAS,CAAC;AAEjB,eAAe;IACb,KAAK,EAAE,OAAO;IACd,SAAS,EAAE,QAAQ;IACnB,QAAQ,EAAE;QACR,IAAI,EAAE;YACJ,OAAO,EAAE,cAAc,EAAE,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,OAAO,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC;YACjE,OAAO,EAAE;gBACP,IAAI,EAAE,QAAQ;aACf;SACF;KACF;IACD,IAAI,EAAE;QACJ,IAAI,EAAE,UAAU;QAChB,MAAM,EAAE,EAAE;QACV,KAAK,EAAE,EAAE;QACT,IAAI,EAAE,iBAAiB;KACxB;CACoB,CAAC;AAExB,MAAM,CAAC,MAAM,OAAO,GAAG;IACrB,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CACf,IAAI,CAAA;cACM,IAAI,CAAC,IAAI;gBACP,IAAI,CAAC,MAAM;eACZ,IAAI,CAAC,KAAK;cACX,IAAI,CAAC,IAAI;eACR;CACd,CAAC","sourcesContent":["import {Meta} from \"@storybook/web-components\";\nimport {html} from \"lit\";\nimport {type ZIcon} from \".\";\nimport {getColorTokens} from \"../../utils/storybook-utils\";\nimport \"./index\";\n\nexport default {\n title: \"ZIcon\",\n component: \"z-icon\",\n argTypes: {\n fill: {\n options: getColorTokens().map((token) => token.replace(\"--\", \"\")),\n control: {\n type: \"select\",\n },\n },\n },\n args: {\n name: \"download\",\n height: 24,\n width: 24,\n fill: \"color-primary01\",\n },\n} satisfies Meta<ZIcon>;\n\nexport const Default = {\n render: (args) =>\n html`<z-icon\n name=\"${args.name}\"\n height=\"${args.height}\"\n width=\"${args.width}\"\n fill=\"${args.fill}\"\n ></z-icon>`,\n};\n"]}
1	+ {"version":3,"file":"index.stories.js","sourceRoot":"","sources":["../../../src/components/z-icon/index.stories.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,IAAI,EAAC,MAAM,KAAK,CAAC;AAEzB,OAAO,EAAC,cAAc,EAAC,MAAM,6BAA6B,CAAC;AAC3D,OAAO,SAAS,CAAC;AAEjB,eAAe;IACb,KAAK,EAAE,OAAO;IACd,SAAS,EAAE,QAAQ;IACnB,QAAQ,EAAE;QACR,IAAI,EAAE;YACJ,OAAO,EAAE,cAAc,EAAE,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,OAAO,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC;YACjE,OAAO,EAAE;gBACP,IAAI,EAAE,QAAQ;aACf;SACF;KACF;IACD,IAAI,EAAE;QACJ,IAAI,EAAE,UAAU;QAChB,MAAM,EAAE,EAAE;QACV,KAAK,EAAE,EAAE;QACT,IAAI,EAAE,iBAAiB;KACxB;CACoB,CAAC;AAExB,MAAM,CAAC,MAAM,OAAO,GAAG;IACrB,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CACf,IAAI,CAAA;cACM,IAAI,CAAC,IAAI;gBACP,IAAI,CAAC,MAAM;eACZ,IAAI,CAAC,KAAK;cACX,IAAI,CAAC,IAAI;eACR;CACd,CAAC","sourcesContent":["import {Meta} from \"@storybook/web-components\";\nimport {html} from \"lit\";\nimport {type ZIcon} from \".\";\nimport {getColorTokens} from \"../../utils/storybook-utils\";\nimport \"./index\";\n\nexport default {\n title: \"ZIcon\",\n component: \"z-icon\",\n argTypes: {\n fill: {\n options: getColorTokens().map((token) => token.replace(\"--\", \"\")),\n control: {\n type: \"select\",\n },\n },\n },\n args: {\n name: \"download\",\n height: 24,\n width: 24,\n fill: \"color-primary01\",\n },\n} satisfies Meta<ZIcon>;\n\nexport const Default = {\n render: (args) =>\n html`<z-icon\n name=\"${args.name}\"\n height=\"${args.height}\"\n width=\"${args.width}\"\n fill=\"${args.fill}\"\n ></z-icon>`,\n};\n"]}

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

@@ -11,7 +11,7 @@ export class ZInfoBox {
         this.infoBoxClose.emit({ boxid: this.boxid });
     }
     render() {
-        return (h("div", { key: '251424a0983aba678d28fd2cec9b46dfe80b9613', id: this.boxid }, h("slot", { key: 'a35e75f792de72b447e808a9463d97709c359ef1', name: "content" }), this.isclosable && (h("z-icon", { key: 'b8a0b8a1d727a85eb32508e3def74a468991beca', name: "multiply", "data-action": "infoBoxClose", onClick: () => this.emitInfoBoxClose() }))));
+        return (h("div", { key: '2f83796cb61288f4250b00847fe63005e9d62f5c', id: this.boxid }, h("slot", { key: '7531c58a7563a6e30f68df36a0a92650ee19b3b5', name: "content" }), this.isclosable && (h("z-icon", { key: 'ac0ae6e8195f62c776b2ee7da5dac09a0f17b703', name: "multiply", "data-action": "infoBoxClose", onClick: () => this.emitInfoBoxClose() }))));
     }
     static get is() { return "z-info-box"; }
     static get encapsulation() { return "shadow"; }

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

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","sourceRoot":"","sources":["~~../../../../~~src/components/z-info-box/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAE,KAAK,EAAgB,IAAI,EAAE,CAAC,EAAC,MAAM,eAAe,CAAC;AAEtE;;GAEG;AAMH,MAAM,OAAO,QAAQ;;;0BAON,IAAI;;IAMT,gBAAgB;QACtB,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,EAAC,KAAK,EAAE,IAAI,CAAC,KAAK,EAAC,CAAC,CAAC;IAC9C,CAAC;IAED,MAAM;QACJ,OAAO,CACL,4DAAK,EAAE,EAAE,IAAI,CAAC,KAAK;YACjB,6DAAM,IAAI,EAAC,SAAS,GAAG;YACtB,IAAI,CAAC,UAAU,IAAI,CAClB,+DACE,IAAI,EAAC,UAAU,iBACH,cAAc,EAC1B,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,gBAAgB,EAAE,GACtC,CACH,CACG,CACP,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {Component, Event, EventEmitter, Prop, h} from \"@stencil/core\";\n\n/*\n @slot content - set the info box content\n /\n@Component({\n tag: \"z-info-box\",\n styleUrl: \"styles.css\",\n shadow: true,\n})\nexport class ZInfoBox {\n /* info box unique id /\n @Prop()\n boxid: string;\n\n /* render close icon flag /\n @Prop()\n isclosable = true;\n\n /* emitted on close icon click */\n @Event()\n infoBoxClose: EventEmitter;\n\n private emitInfoBoxClose(): void {\n this.infoBoxClose.emit({boxid: this.boxid});\n }\n\n render(): HTMLDivElement {\n return (\n <div id={this.boxid}>\n <slot name=\"content\" />\n {this.isclosable && (\n <z-icon\n name=\"multiply\"\n data-action=\"infoBoxClose\"\n onClick={() => this.emitInfoBoxClose()}\n />\n )}\n </div>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/z-info-box/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAE,KAAK,EAAgB,IAAI,EAAE,CAAC,EAAC,MAAM,eAAe,CAAC;AAEtE;;GAEG;AAMH,MAAM,OAAO,QAAQ;;;0BAON,IAAI;;IAMT,gBAAgB;QACtB,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,EAAC,KAAK,EAAE,IAAI,CAAC,KAAK,EAAC,CAAC,CAAC;IAC9C,CAAC;IAED,MAAM;QACJ,OAAO,CACL,4DAAK,EAAE,EAAE,IAAI,CAAC,KAAK;YACjB,6DAAM,IAAI,EAAC,SAAS,GAAG;YACtB,IAAI,CAAC,UAAU,IAAI,CAClB,+DACE,IAAI,EAAC,UAAU,iBACH,cAAc,EAC1B,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,gBAAgB,EAAE,GACtC,CACH,CACG,CACP,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {Component, Event, EventEmitter, Prop, h} from \"@stencil/core\";\n\n/*\n @slot content - set the info box content\n /\n@Component({\n tag: \"z-info-box\",\n styleUrl: \"styles.css\",\n shadow: true,\n})\nexport class ZInfoBox {\n /* info box unique id /\n @Prop()\n boxid: string;\n\n /* render close icon flag /\n @Prop()\n isclosable = true;\n\n /* emitted on close icon click */\n @Event()\n infoBoxClose: EventEmitter;\n\n private emitInfoBoxClose(): void {\n this.infoBoxClose.emit({boxid: this.boxid});\n }\n\n render(): HTMLDivElement {\n return (\n <div id={this.boxid}>\n <slot name=\"content\" />\n {this.isclosable && (\n <z-icon\n name=\"multiply\"\n data-action=\"infoBoxClose\"\n onClick={() => this.emitInfoBoxClose()}\n />\n )}\n </div>\n );\n }\n}\n"]}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"index.stories.js","sourceRoot":"","sources":["~~../../../../~~src/components/z-info-box/index.stories.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,IAAI,EAAC,MAAM,KAAK,CAAC;AAEzB,OAAO,SAAS,CAAC;AAEjB,MAAM,SAAS,GAAG;IAChB,KAAK,EAAE,UAAU;IACjB,SAAS,EAAE,YAAY;IACvB,IAAI,EAAE;QACJ,UAAU,EAAE,IAAI;KACjB;CACuB,CAAC;AAC3B,eAAe,SAAS,CAAC;AAEzB,MAAM,CAAC,MAAM,OAAO,GAAG;IACrB,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CACf,IAAI,CAAA,2BAA2B,IAAI,CAAC,UAAU;;;;;;kBAMhC;CACjB,CAAC","sourcesContent":["import {Meta} from \"@storybook/web-components\";\nimport {html} from \"lit\";\nimport {type ZInfoBox} from \".\";\nimport \"./index\";\n\nconst StoryMeta = {\n title: \"ZInfoBox\",\n component: \"z-info-box\",\n args: {\n isclosable: true,\n },\n} satisfies Meta<ZInfoBox>;\nexport default StoryMeta;\n\nexport const Default = {\n render: (args) =>\n html`<z-info-box isclosable=\"${args.isclosable}\">\n <span slot=\"content\"\n >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque fermentum convallis ex, eu faucibus velit\n dignissim in. Quisque at risus accumsan, auctor enim a, varius tortor. Donec egestas sodales mi at imperdiet.\n Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</span\n >\n </z-info-box>`,\n};\n"]}
1	+ {"version":3,"file":"index.stories.js","sourceRoot":"","sources":["../../../src/components/z-info-box/index.stories.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,IAAI,EAAC,MAAM,KAAK,CAAC;AAEzB,OAAO,SAAS,CAAC;AAEjB,MAAM,SAAS,GAAG;IAChB,KAAK,EAAE,UAAU;IACjB,SAAS,EAAE,YAAY;IACvB,IAAI,EAAE;QACJ,UAAU,EAAE,IAAI;KACjB;CACuB,CAAC;AAC3B,eAAe,SAAS,CAAC;AAEzB,MAAM,CAAC,MAAM,OAAO,GAAG;IACrB,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CACf,IAAI,CAAA,2BAA2B,IAAI,CAAC,UAAU;;;;;;kBAMhC;CACjB,CAAC","sourcesContent":["import {Meta} from \"@storybook/web-components\";\nimport {html} from \"lit\";\nimport {type ZInfoBox} from \".\";\nimport \"./index\";\n\nconst StoryMeta = {\n title: \"ZInfoBox\",\n component: \"z-info-box\",\n args: {\n isclosable: true,\n },\n} satisfies Meta<ZInfoBox>;\nexport default StoryMeta;\n\nexport const Default = {\n render: (args) =>\n html`<z-info-box isclosable=\"${args.isclosable}\">\n <span slot=\"content\"\n >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque fermentum convallis ex, eu faucibus velit\n dignissim in. Quisque at risus accumsan, auctor enim a, varius tortor. Donec egestas sodales mi at imperdiet.\n Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</span\n >\n </z-info-box>`,\n};\n"]}

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

@@ -47,7 +47,7 @@ export class ZInfoReveal {
         }
     }
     render() {
-        return (h(Host, { key: 'ea58b3ebf4f3409a322a69e255b66267ea64b6f9', open: this.open }, h("button", { key: 'f7bfacd0f57366a843e3492aa3c141c9cbf47353', class: "z-info-reveal-trigger", type: "button", onClick: this.togglePanel.bind(this), "aria-label": !this.label ? this.ariaLabel : undefined, "aria-expanded": this.open ? "true" : "false", "aria-controls": "z-info-reveal-panel" }, this.icon && h("z-icon", { key: 'fa496e51ce6c773fd6a1a18ba9f90784ec9f22b0', name: this.icon }), this.label && h("span", { key: 'dca043100cd2e938208c71b9f48620e16cf658cb', class: "z-info-reveal-label" }, this.label)), h("div", { key: 'a13a0334421a332b9e2853bc999b25bc7fc651cf', class: "z-info-reveal-panel", id: "z-info-reveal-panel", ref: (el) => (this.panel = el), hidden: !this.open }, h("slot", { key: '44ce4ce5b237f0f28d90cab399caff11f6bccdab' }), h("button", { key: '6453242c98c7056d0394e47315879ab1688a7eb4', class: "z-info-reveal-close", type: "button", onClick: this.closePanel.bind(this), "aria-label": "Chiudi pannello informazioni" }, h("z-icon", { key: 'cf114e18289ebf61595f6ec2bbbcdb6d20490242', name: "multiply" })))));
+        return (h(Host, { key: '26f1289a1592702b470934f4d9fe38c34039a013', open: this.open }, h("button", { key: '970af3aaf1e9460ee380249de460389f1bdfdfda', class: "z-info-reveal-trigger", type: "button", onClick: this.togglePanel.bind(this), "aria-label": !this.label ? this.ariaLabel : undefined, "aria-expanded": this.open ? "true" : "false", "aria-controls": "z-info-reveal-panel" }, this.icon && h("z-icon", { key: '396653feab94053d64b2157d4a79699d54cf5cf5', name: this.icon }), this.label && h("span", { key: '785319a805aecdf9f8c2ffa5f451c0f2868c5df3', class: "z-info-reveal-label" }, this.label)), h("div", { key: '729762b03fd3d2fb73914ed9a46d2634ff6b8d0b', class: "z-info-reveal-panel", id: "z-info-reveal-panel", ref: (el) => (this.panel = el), hidden: !this.open }, h("slot", { key: 'a16a68e1e7c4b1bcb10e69d1fe48fbe5f8dfda26' }), h("button", { key: 'e91b170b87e62dab979876413aad47bdb5e9d758', class: "z-info-reveal-close", type: "button", onClick: this.closePanel.bind(this), "aria-label": "Chiudi pannello informazioni" }, h("z-icon", { key: '772445e4bc3895c5c0328a5e7adca8994324c471', name: "multiply" })))));
     }
     static get is() { return "z-info-reveal"; }
     static get encapsulation() { return "shadow"; }