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

@zanichelli/albe-web-components 19.3.0-rc1 → 19.4.0

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

Files changed (1501) hide show

package/dist/collection/components/z-card/index.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/z-card/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAsB,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC,EAAC,MAAM,eAAe,CAAC;AAC3F,OAAO,EAAC,WAAW,EAAC,MAAM,aAAa,CAAC;AAExC;;;;;;;;;GASG;AAMH,MAAM,OAAO,KAAK;IALlB;QAkBE,qCAAqC;QAErC,eAAU,GAAG,KAAK,CAAC;QAEnB;;;WAGG;QAEH,cAAS,GAAG,KAAK,CAAC;KAwEnB;IAjEC,iBAAiB;QACf,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IAC1E,CAAC;IAED;;;OAGG;IACK,oBAAoB;QAC1B,OAAO;YACL,WAAK,KAAK,EAAC,iBAAiB;gBAC1B,WAAK,KAAK,EAAC,aAAa;oBACtB,WAAK,KAAK,EAAC,eAAe;wBACxB,YAAM,IAAI,EAAC,UAAU,GAAQ;wBAC7B,YAAM,IAAI,EAAC,OAAO,GAAQ,CACtB,CACF,CACF;YACN,WAAK,KAAK,EAAC,SAAS;gBAClB,YAAM,IAAI,EAAC,MAAM,GAAQ;gBACzB,WAAK,KAAK,EAAC,SAAS;oBAClB,YAAM,IAAI,EAAC,QAAQ,GAAQ,CACvB,CACF;SACP,CAAC;IACJ,CAAC;IAED;;OAEG;IACK,aAAa;QACnB,OAAO,CACL,WAAK,KAAK,EAAC,SAAS;YAClB,YAAM,IAAI,EAAC,UAAU,GAAQ;YAC7B,YAAM,IAAI,EAAC,OAAO,GAAQ;YAC1B,YAAM,IAAI,EAAC,MAAM,GAAQ;YACzB,WAAK,KAAK,EAAC,SAAS;gBAClB,YAAM,IAAI,EAAC,QAAQ,GAAQ,CACvB,CACF,CACP,CAAC;IACJ,CAAC;IAED,MAAM;QACJ,IAAI,IAAI,CAAC,OAAO,KAAK,WAAW,CAAC,IAAI,EAAE,CAAC;YACtC,OAAO,EAAC,IAAI,QAAE,IAAI,CAAC,aAAa,EAAE,CAAQ,CAAC;QAC7C,CAAC;QAED,IAAI,IAAI,CAAC,OAAO,KAAK,WAAW,CAAC,OAAO,IAAI,IAAI,CAAC,aAAa,EAAE,CAAC;YAC/D,OAAO,CACL,EAAC,IAAI;gBACH,WAAK,KAAK,EAAC,iBAAiB;oBACzB,IAAI,CAAC,aAAa,IAAI;wBACrB,YAAM,IAAI,EAAC,OAAO,GAAQ;wBAC1B,IAAI,CAAC,OAAO,KAAK,WAAW,CAAC,OAAO,IAAI,IAAI,CAAC,SAAS,IAAI,cAAQ,IAAI,EAAE,IAAI,CAAC,SAAS,GAAW;qBAClG;oBACA,CAAC,IAAI,CAAC,aAAa,IAAI,WAAK,KAAK,EAAC,aAAa,GAAO,CACnD;gBACL,IAAI,CAAC,aAAa,EAAE,CAChB,CACR,CAAC;QACJ,CAAC;QAED,OAAO,EAAC,IAAI,QAAE,IAAI,CAAC,oBAAoB,EAAE,CAAQ,CAAC;IACpD,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {Component, ComponentInterface, Element, Host, Prop, State, h} from \"@stencil/core\";\nimport {CardVariant} from \"../../beans\";\n\n/**\n * ZCard component.\n * The width of the card must be set by its container, following the grid indications of the design.\n *\n * @slot cover - Image cover\n * @slot metadata - Metadata\n * @slot title - Using an `<a>` tag here will make the whole card clickable as if the link was wrapping it.\n * @slot text\n * @slot action - Interactive elements to place at the bottom of the card. To put non-interactive elements here when using an `<a>` tag in the `title` slot, and use this as a sort of \"footer\", set `z-index: 0` on each of those elements.\n */\n@Component({\n tag: \"z-card\",\n styleUrl: \"styles.css\",\n shadow: true,\n})\nexport class ZCard implements ComponentInterface {\n /**\n * Card variant.\n * Can be one of \"text\", \"border\", \"shadow\", \"overlay\".\n * Leave it undefined for the default card.\n */\n @Prop({reflect: true})\n variant?: CardVariant;\n\n /** Name of the icon to place over the image cover */\n @Prop()\n coverIcon: string;\n\n /** Enable shadow. Default: false. */\n @Prop({reflect: true})\n showShadow = false;\n\n /**\n * Enable \"clickable\" styles like hover background and cursor, focus shadow on the whole card, etc.\n * Always set this to `true` when putting an `<a>` tag in the `title` slot.\n */\n @Prop({reflect: true})\n clickable = false;\n\n @Element() host: HTMLZCardElement;\n\n @State()\n hasCoverImage: boolean;\n\n componentWillLoad(): void {\n this.hasCoverImage = this.host.querySelector('[slot=\"cover\"]') !== null;\n }\n\n /**\n * Template for a card without image cover.\n * A colored background replaces the image and some data is moved over it.\n */\n private renderColorCoverCard(): HTMLDivElement[] {\n return [\n <div class=\"cover-container\">\n <div class=\"color-cover\">\n <div class=\"cover-content\">\n <slot name=\"metadata\"></slot>\n <slot name=\"title\"></slot>\n </div>\n </div>\n </div>,\n <div class=\"content\">\n <slot name=\"text\"></slot>\n <div class=\"actions\">\n <slot name=\"action\"></slot>\n </div>\n </div>,\n ];\n }\n\n /**\n * Template for the content.\n */\n private renderContent(): HTMLDivElement {\n return (\n <div class=\"content\">\n <slot name=\"metadata\"></slot>\n <slot name=\"title\"></slot>\n <slot name=\"text\"></slot>\n <div class=\"actions\">\n <slot name=\"action\"></slot>\n </div>\n </div>\n );\n }\n\n render(): HTMLZCardElement {\n if (this.variant === CardVariant.TEXT) {\n return <Host>{this.renderContent()}</Host>;\n }\n\n if (this.variant === CardVariant.OVERLAY || this.hasCoverImage) {\n return (\n <Host>\n <div class=\"cover-container\">\n {this.hasCoverImage && [\n <slot name=\"cover\"></slot>,\n this.variant !== CardVariant.OVERLAY && this.coverIcon && <z-icon name={this.coverIcon}></z-icon>,\n ]}\n {!this.hasCoverImage && <div class=\"color-cover\"></div>}\n </div>\n {this.renderContent()}\n </Host>\n );\n }\n\n return <Host>{this.renderColorCoverCard()}</Host>;\n }\n}\n"]}

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

@@ -1,4 +1,13 @@
 :host {
+  /**
+   * @prop --aspect-ratio: Cover aspect ratio. Default: `1.62`
+   * @prop --z-card--border-color: Default: `var(--gray200)`
+   * @prop --z-card--color-cover-background: Cover color. Default: `var(--color-surface01)`
+   * @prop --z-card--text-background: Background color for the `text` variant. Default: `var(--color-surface01)`
+   * @prop --z-card--text-border-radius: Default: `none`
+   * @prop --z-card--text-border: Configure CSS `border`. Default: `none`
+   * @prop --z-card--text-padding: Configure CSS `padding`. Default: `none`
+   */
   --aspect-ratio: 1.62;
   --z-card--border-color: var(--gray200);
   --z-card--color-cover-background: var(--color-surface01);

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

@@ -2,8 +2,6 @@ import { Host, h } from "@stencil/core";
 import { ButtonVariant, CarouselArrowsPosition, CarouselProgressMode } from "../../beans";
 /**
  * ZCarousel component.
- * @cssprop --z-carousel-gutter - The gutter between items.
- * @cssprop --z-carousel-items-shadow - The shadow around the items.
  * @slot - Carousel items. Use `<li>` elements inside this slot.
  */
 export class ZCarousel {
@@ -410,3 +408,4 @@ export class ZCarousel {
             }];
     }
 }
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@

+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/z-carousel/index.tsx"],"names":[],"mappings":"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","sourcesContent":["import {Component, ComponentInterface, Element, Event, EventEmitter, Host, Prop, State, Watch, h} from \"@stencil/core\";\nimport {ButtonVariant, CarouselArrowsPosition, CarouselProgressMode} from \"../../beans\";\n\n/**\n * ZCarousel component.\n * @slot - Carousel items. Use `<li>` elements inside this slot.\n */\n@Component({\n tag: \"z-carousel\",\n styleUrls: [\"styles.css\", \"../../tokens/typography.css\"],\n shadow: true,\n})\nexport class ZCarousel implements ComponentInterface {\n @Element() host: HTMLZCarouselElement;\n\n /** The z-carousel is on loading state */\n @Prop()\n isLoading: boolean;\n\n /** The z-carousel title */\n @Prop()\n label?: string;\n\n /** Shows only one content at a time */\n @Prop({reflect: true})\n single = false;\n\n /** Arrow buttons position */\n @Prop({reflect: true})\n arrowsPosition?: CarouselArrowsPosition;\n\n /** Progress indicator type. Only available for `single` mode */\n @Prop()\n progressMode?: CarouselProgressMode;\n\n /**\n * Whether the navigation arrow buttons over the items are always visible or only on mouse hover.\n * If set to `false`, the arrows will not be visible on mobile.\n * Only meaningful with `arrowsPosition` set to `OVER`.\n */\n @Prop({reflect: true})\n fixedArrows = true;\n\n /** The height of the ghost loader (only visible when `isLoading` is set to `true`) */\n @Prop()\n ghostLoadingHeight = 100;\n\n /** When enabled, navigating next the last item will go back to the first item and vice versa. */\n @Prop()\n infinite = false;\n\n /** Current item index for single mode. */\n @State()\n current = 0;\n\n /** Items on the slider. */\n @State()\n items: HTMLLIElement[];\n\n /** Index of the indicator to highlight. */\n @State()\n highlightedIndicator: number;\n\n @State()\n canNavigatePrev: boolean;\n\n @State()\n canNavigateNext: boolean;\n\n /** Reference for the items container element. */\n protected itemsContainer: HTMLUListElement;\n\n /** Observer that handles current index change when scrolling on single mode. */\n private intersectionObserver: IntersectionObserver;\n\n /** Observer to check if navigation can still be enabled/showed when the size of the items' container changes */\n private resizeObserver: ResizeObserver;\n\n /** Flag indicating the items container is about to scroll programmatically towards the stored index. */\n private scrollingTo: number = null;\n\n /** Emitted on index change and only in `single` mode. */\n @Event()\n indexChange: EventEmitter<{currentItem: number}>;\n\n @Watch(\"current\")\n onIndexChange(): void {\n this.indexChange.emit({currentItem: this.current});\n }\n\n @Watch(\"single\")\n onSingleModeChange(): void {\n if (this.single && !this.intersectionObserver) {\n this.setIntersectionObserver();\n }\n }\n\n @Watch(\"infinite\")\n onInfiniteModeChange(): void {\n this.checkNavigationValidity();\n }\n\n @Watch(\"isLoading\")\n onLoadingChange(): void {\n if (!this.isLoading) {\n // when loading is finished, we need to set up things with the real items that were not present during the loading phase\n this.setupObserversAndListeners();\n }\n }\n\n /** Set up all observers and listeners related to the rendered items. */\n private setupObserversAndListeners(): void {\n this.setupItems();\n this.itemsContainer?.addEventListener(\"scroll\", this.checkNavigationValidity.bind(this), {passive: true});\n this.resizeObserver = new ResizeObserver(this.checkNavigationValidity.bind(this));\n this.resizeObserver.observe(this.itemsContainer);\n if (this.single) {\n this.setIntersectionObserver();\n }\n this.checkNavigationValidity();\n }\n\n /**\n * Set an intersection observer to:\n * - highlight the indicator of the intersecting item during scroll\n * - set the current item to the last intersecting item\n */\n private setIntersectionObserver(): void {\n this.intersectionObserver = new IntersectionObserver(\n (entries) => {\n const entry = entries.find(({isIntersecting}) => isIntersecting);\n if (!entry) {\n return;\n }\n\n const entryIndex = this.items.findIndex((item) => item === entry.target);\n this.highlightedIndicator = entryIndex;\n\n /* skip setting the current item if intersection has been triggered by a programmatic scroll\n (@see `goTo` function) and the final index has not been reached */\n if (this.scrollingTo !== null && entryIndex !== this.scrollingTo) {\n return;\n }\n\n this.scrollingTo = null;\n this.current = entryIndex;\n },\n {\n root: this.itemsContainer,\n threshold: 0.5,\n }\n );\n\n this.items.forEach((element) => this.intersectionObserver.observe(element));\n }\n\n /** Update items' list and check conditions to allow navigation */\n private onSlotChange(): void {\n this.items = Array.from(this.host.children) as HTMLLIElement[];\n this.checkNavigationValidity();\n this.setIntersectionObserver();\n this.goTo(this.current);\n }\n\n private onPrev(): void {\n if (this.single) {\n this.goTo(this.infinite && this.current - 1 < 0 ? this.items.length - 1 : Math.max(0, this.current - 1));\n\n return;\n }\n\n this.itemsContainer.scrollBy({\n left:\n this.infinite && this.itemsContainer.scrollLeft == 0\n ? this.itemsContainer.scrollWidth - this.itemsContainer.clientWidth\n : -this.itemsContainer.clientWidth / 2,\n behavior: \"smooth\",\n });\n }\n\n private onNext(): void {\n if (this.single) {\n const next =\n this.infinite && this.current + 1 > this.items.length - 1\n ? 0\n : Math.min(this.current + 1, this.items.length - 1);\n\n return this.goTo(next);\n }\n\n this.itemsContainer.scrollBy({\n left:\n this.infinite &&\n this.itemsContainer.scrollLeft == this.itemsContainer.scrollWidth - this.itemsContainer.clientWidth\n ? -this.itemsContainer.scrollWidth\n : this.itemsContainer.clientWidth / 2,\n behavior: \"smooth\",\n });\n }\n\n /**\n * Check if navigation buttons can be enabled and set the related local states.\n */\n private checkNavigationValidity(): void {\n if (this.single) {\n this.canNavigatePrev = this.current > 0;\n this.canNavigateNext = this.current < this.items.length - 1;\n\n return;\n }\n\n this.canNavigatePrev = this.itemsContainer.scrollLeft > 0;\n this.canNavigateNext =\n this.itemsContainer.scrollLeft < this.itemsContainer.scrollWidth - this.itemsContainer.clientWidth;\n }\n\n /**\n * Check if footer has to be rendered.\n */\n private canShowFooter(): boolean {\n if (!this.canNavigatePrev && !this.canNavigateNext) {\n return false;\n }\n\n return (\n this.arrowsPosition === CarouselArrowsPosition.BOTTOM ||\n this.progressMode === CarouselProgressMode.DOTS ||\n this.progressMode === CarouselProgressMode.NUMBERS\n );\n }\n\n /**\n * Set current item to passed index.\n * @param index Index to set\n */\n private goTo(index: number): void {\n if (this.current === index) {\n return;\n }\n\n this.scrollingTo = index;\n const left = this.items.slice(0, index).reduce((acc, item) => (acc += item.clientWidth), 0);\n // the scroll will trigger the IntersectionObserver and set the current item\n this.itemsContainer.scroll({\n left,\n behavior: \"smooth\",\n });\n }\n\n /** Check if navigation of at least one direction is enabled */\n private get canNavigate(): boolean {\n return this.canNavigatePrev || this.canNavigateNext;\n }\n\n private setupItems(): void {\n this.items = Array.from(this.host.children) as HTMLLIElement[];\n this.items.forEach((item) => {\n item.setAttribute(\"aria-roledescription\", \"slide\");\n });\n }\n\n componentDidLoad(): void {\n if (this.isLoading) {\n return;\n }\n\n this.setupObserversAndListeners();\n }\n\n disconnectedCallback(): void {\n this.resizeObserver?.disconnect();\n }\n\n render(): HTMLDivElement | HTMLZCarouselElement {\n if (this.isLoading) {\n return (\n <div class=\"z-carousel-container\">\n {this.label && <div class=\"heading-3-sb z-carousel-title\">{this.label}</div>}\n <div style={{height: `${this.ghostLoadingHeight}px`}}>\n <z-ghost-loading></z-ghost-loading>\n </div>\n </div>\n );\n }\n\n return (\n <Host>\n <div\n class=\"z-carousel-container\"\n aria-roledescription=\"carousel\"\n aria-label={this.label || \"Carousel\"}\n >\n {this.label && <div class=\"z-carousel-title heading-3-sb\">{this.label}</div>}\n <div class=\"z-carousel-wrapper\">\n <z-button\n class=\"z-carousel-navigation-arrow\"\n variant={ButtonVariant.SECONDARY}\n data-direction=\"prev\"\n icon=\"arrow-left\"\n onClick={this.onPrev.bind(this)}\n disabled={!this.infinite && !this.canNavigatePrev}\n hidden={this.arrowsPosition !== CarouselArrowsPosition.OVER || !this.canNavigate}\n ariaLabel={this.single ? \"Mostra l'elemento precedente\" : \"Mostra gli elementi precedenti\"}\n />\n <ul\n class=\"z-carousel-items-container\"\n aria-atomic=\"false\"\n aria-live=\"polite\"\n ref={(el) => (this.itemsContainer = el)}\n >\n <slot onSlotchange={this.onSlotChange.bind(this)} />\n </ul>\n <z-button\n class=\"z-carousel-navigation-arrow\"\n variant={ButtonVariant.SECONDARY}\n data-direction=\"next\"\n icon=\"arrow-right\"\n onClick={this.onNext.bind(this)}\n disabled={!this.infinite && !this.canNavigateNext}\n hidden={this.arrowsPosition !== CarouselArrowsPosition.OVER || !this.canNavigate}\n ariaLabel={this.single ? \"Mostra l'elemento successivo\" : \"Mostra gli elementi successivi\"}\n />\n </div>\n </div>\n\n {this.canShowFooter() && (\n <div class=\"z-carousel-footer\">\n {this.arrowsPosition === CarouselArrowsPosition.BOTTOM && (\n <z-button\n class=\"z-carousel-navigation-arrow\"\n variant={ButtonVariant.TERTIARY}\n icon=\"arrow-left\"\n onClick={this.onPrev.bind(this)}\n disabled={!this.infinite && !this.canNavigatePrev}\n ariaLabel={this.single ? \"Mostra l'elemento precedente\" : \"Mostra gli elementi precedenti\"}\n />\n )}\n {this.progressMode === CarouselProgressMode.DOTS && this.single && this.items && (\n <div class=\"dots-progress\">\n {this.items.map((_, index) => (\n <button\n type=\"button\"\n class={{current: this.highlightedIndicator === index}}\n aria-label={\n this.highlightedIndicator === index ? \"Elemento corrente\" : `Spostati all'elemento ${index + 1}`\n }\n onClick={() => this.goTo(index)}\n />\n ))}\n </div>\n )}\n {this.progressMode === CarouselProgressMode.NUMBERS && this.single && this.items && (\n <div class=\"numbers-progress interactive-1\">\n <span class=\"current\">{this.current + 1}</span>\n <span>di</span>\n <span>{this.items.length}</span>\n </div>\n )}\n {this.arrowsPosition === CarouselArrowsPosition.BOTTOM && (\n <z-button\n class=\"z-carousel-navigation-arrow\"\n variant={ButtonVariant.TERTIARY}\n icon=\"arrow-right\"\n onClick={this.onNext.bind(this)}\n disabled={!this.infinite && !this.canNavigateNext}\n ariaLabel={this.single ? \"Mostra l'elemento successivo\" : \"Mostra gli elementi successivi\"}\n />\n )}\n </div>\n )}\n </Host>\n );\n }\n}\n"]}

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

@@ -1,9 +1,13 @@
 :host {
-  font-family: var(--font-family-sans);
-  font-weight: var(--font-rg);
+  /**
+   * @prop --z-carousel-gutter: The gutter between items.
+   * @prop --z-carousel-items-shadow: The shadow around the items.
+   */
   --z-carousel-gutter: 0;
   --z-carousel-items-shadow: ;
+  font-family: var(--font-family-sans);
+  font-weight: var(--font-rg);
 }
 :host([single]) {

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

@@ -10,11 +10,11 @@ export class ZChip {
         this.ariaLabel = "";
     }
     render() {
-        return (h("div", { key: '0f8834160a0c8e3ffd107233e2c5de6db6ab6df2', class: {
+        return (h("div", { key: '7ff5bc2ca7ac9e73c3bb6e31a4795d8f275b0217', class: {
                 "z-chip-container": true,
                 "z-chip-interactive": !!this.interactiveIcon,
                 [this.type]: true,
-            }, "aria-disabled": this.disabled }, this.icon && h("z-icon", { key: '51451c287eb3c450f4cc8a59f40e0d2e71fe95e2', name: this.icon }), h("slot", { key: 'd1c6dce40bf102ab19ca5bfc06fdbc342c97e68e' }), this.interactiveIcon && (h("button", { key: '3274d75df1f052aab16bfb8b663292160757acc8', type: "button", onClick: () => this.interactiveIconClick.emit(), "aria-label": this.ariaLabel, disabled: this.disabled }, h("z-icon", { key: '23605e0639429a9ac5d66eb3394a1a3c9740d601', class: "interactive-icon", name: this.interactiveIcon })))));
+            }, "aria-disabled": this.disabled }, this.icon && h("z-icon", { key: 'b96b42e01a624a43a0419e163b79512374540255', name: this.icon }), h("slot", { key: 'e613a251dccdedf4f2633361b5a22d6baf69173f' }), this.interactiveIcon && (h("button", { key: '4c8557d1a21c33a1e329f8f01dcd7aa1a2881096', type: "button", onClick: () => this.interactiveIconClick.emit(), "aria-label": this.ariaLabel, disabled: this.disabled }, h("z-icon", { key: 'a66b4a32af2c1a3283cdb80843b526ff375d34f7', class: "interactive-icon", name: this.interactiveIcon })))));
     }
     static get is() { return "z-chip"; }
     static get encapsulation() { return "scoped"; }
@@ -157,3 +157,4 @@ export class ZChip {
     }
     static get elementRef() { return "el"; }
 }
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@

+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/z-chip/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAsB,OAAO,EAAE,KAAK,EAAgB,IAAI,EAAE,CAAC,EAAC,MAAM,eAAe,CAAC;AACnG,OAAO,EAAC,SAAS,EAAC,MAAM,aAAa,CAAC;AAQtC,MAAM,OAAO,KAAK;IANlB;QAaE,wDAAwD;QAExD,SAAI,GAAe,SAAS,CAAC,OAAO,CAAC;QAMrC,6BAA6B;QAE7B,aAAQ,GAAa,KAAK,CAAC;QAE3B,+BAA+B;QAE/B,cAAS,GAAG,EAAE,CAAC;KAkChB;IA5BC,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, ComponentInterface, 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 implements ComponentInterface {\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-color-picker/index.js CHANGED Viewed

@@ -192,7 +192,7 @@ export class ZColorPicker {
         this.colorKeysByRow = this.sortColorKeysByRow();
     }
     render() {
-        return (h(Host, { key: 'c834820884acc8c3bdf4571379cbe6da74e7ea89', role: "listbox", "aria-label": this.htmlAriaLabel || LOCALES[this.lng]["Select a color"], tabIndex: 0 }, this.colorKeysByRow.map((colorKey) => {
+        return (h(Host, { key: '8ab27c4b68bd295e1bda15e78f1f41bfbfc66b47', role: "listbox", "aria-label": this.htmlAriaLabel || LOCALES[this.lng]["Select a color"], tabIndex: 0 }, this.colorKeysByRow.map((colorKey) => {
             var _a;
             return (h("button", { class: "color-swatch", "data-color": colorKey, role: "option", "aria-selected": ((_a = this.selectedColor) === null || _a === void 0 ? void 0 : _a.toUpperCase()) === colorKey.toUpperCase() ? "true" : "false", tabIndex: -1, onClick: () => (this.selectedColor = colorKey), disabled: this.disableTransparent && colorKey === "#FFFFFF00" }, h("div", { class: "color-swatch", role: "img", "aria-roledescription": LOCALES[this.lng]["Color swatch"], "aria-label": ColorPickerPalette[colorKey][this.lng], title: ColorPickerPalette[colorKey][this.lng], style: { backgroundColor: colorKey } })));
         })));
@@ -379,3 +379,4 @@ export class ZColorPicker {
             }];
     }
 }
+//# sourceMappingURL=index.js.map

package/dist/collection/components/z-color-picker/index.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/z-color-picker/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,EAET,OAAO,EACP,KAAK,EAEL,IAAI,EACJ,MAAM,EACN,MAAM,EACN,IAAI,EACJ,KAAK,EACL,CAAC,GACF,MAAM,eAAe,CAAC;AACvB,OAAO,EAAC,kBAAkB,EAAC,MAAM,aAAa,CAAC;AAC/C,OAAO,EAAC,eAAe,EAAC,MAAM,mBAAmB,CAAC;AAElD,MAAM,OAAO,GAAG;IACd,EAAE,EAAE;QACF,gBAAgB,EAAE,qBAAqB;QACvC,cAAc,EAAE,oBAAoB;KACrC;IACD,EAAE,EAAE;QACF,gBAAgB,EAAE,gBAAgB;QAClC,cAAc,EAAE,cAAc;KAC/B;CACO,CAAC;AAEX,2DAA2D;AAC3D,MAAM,gBAAgB,GAAG,CAAC,CAAC;AAE3B,oDAAoD;AACpD,MAAM,YAAY,GAAG,CAAC,CAAC;AAEvB;;;GAGG;AAMH,MAAM,OAAO,YAAY;IALzB;QAcE;;WAEG;QAEH,QAAG,GAAgB,IAAI,CAAC;QAQxB;;;WAGG;QAEH,uBAAkB,GAAG,KAAK,CAAC;QAQ3B;;WAEG;QACK,mBAAc,GAAyB,EAAE,CAAC;QAE1C,kBAAa,GAAwB,EAAE,CAAC;KA4NjD;IA1NC,IAAY,YAAY;QACtB,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,MAAM,EAAE,CAAC;YAC/B,IAAI,CAAC,aAAa,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,gBAAgB,CAAC,QAAQ,CAAC,CAAwB,CAAC;QAC1G,CAAC;QAED,OAAO,IAAI,CAAC,aAAa,CAAC;IAC5B,CAAC;IAED;;;OAGG;IACK,kBAAkB;QACxB,MAAM,OAAO,GAAG,MAAM,CAAC,IAAI,CAAC,kBAAkB,CAAyB,CAAC;QACxE,MAAM,OAAO,GAAyB,EAAE,CAAC;QAEzC,+DAA+D;QAC/D,KAAK,IAAI,GAAG,GAAG,CAAC,EAAE,GAAG,GAAG,gBAAgB,EAAE,GAAG,EAAE,EAAE,CAAC;YAChD,KAAK,IAAI,GAAG,GAAG,CAAC,EAAE,GAAG,GAAG,YAAY,EAAE,GAAG,EAAE,EAAE,CAAC;gBAC5C,MAAM,gBAAgB,GAAG,GAAG,GAAG,gBAAgB,GAAG,GAAG,CAAC;gBACtD,IAAI,gBAAgB,GAAG,OAAO,CAAC,MAAM,EAAE,CAAC;oBACtC,OAAO,CAAC,IAAI,CAAC,OAAO,CAAC,gBAAgB,CAAC,CAAC,CAAC;gBAC1C,CAAC;YACH,CAAC;QACH,CAAC;QAED,OAAO,OAAO,CAAC;IACjB,CAAC;IAED,yDAAyD;IACjD,WAAW,CAAC,KAAa;QAC/B,2EAA2E;QAC3E,IAAI,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC,GAAG,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,GAAG,CAAC,QAAQ,GAAG,CAAC,KAAK,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;QAC7E,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC,KAAK,EAAE,CAAC;IACnC,CAAC;IAID,4BAA4B;QAC1B,IAAI,IAAI,CAAC,kBAAkB,IAAI,IAAI,CAAC,aAAa,KAAK,WAAW,EAAE,CAAC;YAClE,IAAI,CAAC,aAAa,GAAG,SAAS,CAAC,CAAC,2EAA2E;QAC7G,CAAC;IACH,CAAC;IAGD,iBAAiB;QACf,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;IAC9C,CAAC;IAED;;OAEG;IAGH,KAAK,CAAC,QAAQ;QACZ,gCAAgC;QAChC,IAAI,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,CAAC,GAAG,CAAC,QAAQ,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC;QACxD,MAAM,sBAAsB,GAC1B,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,GAAG,CAAC,YAAY,KAAK,MAAM,CAAC,IAAI,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC;QACjH,IAAI,CAAC,sBAAsB,EAAE,CAAC;YAC5B,OAAO;QACT,CAAC;QAED,sBAAsB,CAAC,QAAQ,GAAG,CAAC,CAAC;QACpC,UAAU,CAAC,GAAG,EAAE;YACd,sBAAsB,CAAC,KAAK,EAAE,CAAC;QACjC,CAAC,EAAE,EAAE,CAAC,CAAC;QACP,gCAAgC;QAChC,IAAI,CAAC,IAAI,CAAC,QAAQ,GAAG,CAAC,CAAC,CAAC;IAC1B,CAAC;IAED;;OAEG;IACK,iBAAiB,CAAC,YAAoB,EAAE,GAAW,EAAE,WAAmB;QAC9E,MAAM,GAAG,GAAG,IAAI,CAAC,KAAK,CAAC,YAAY,GAAG,YAAY,CAAC,CAAC;QACpD,MAAM,GAAG,GAAG,YAAY,GAAG,YAAY,CAAC;QACxC,IAAI,QAAQ,GAAG,YAAY,CAAC;QAE5B,QAAQ,GAAG,EAAE,CAAC;YACZ,KAAK,YAAY,CAAC,CAAC,CAAC;gBAClB,MAAM,MAAM,GAAG,GAAG,GAAG,CAAC,CAAC;gBACvB,MAAM,MAAM,GAAG,MAAM,IAAI,YAAY,CAAC,CAAC,CAAC,CAAC,GAAG,GAAG,CAAC,CAAC,GAAG,gBAAgB,CAAC,CAAC,CAAC,GAAG,CAAC;gBAC3E,QAAQ,GAAG,MAAM,GAAG,YAAY,GAAG,CAAC,MAAM,GAAG,YAAY,CAAC,CAAC;gBAC3D,IAAI,QAAQ,IAAI,WAAW,EAAE,CAAC;oBAC5B,QAAQ,GAAG,CAAC,CAAC,CAAC,qBAAqB;gBACrC,CAAC;gBAED,MAAM;YACR,CAAC;YACD,KAAK,WAAW,CAAC,CAAC,CAAC;gBACjB,MAAM,MAAM,GAAG,GAAG,GAAG,CAAC,CAAC;gBACvB,MAAM,MAAM,GAAG,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,GAAG,CAAC,GAAG,gBAAgB,CAAC,GAAG,gBAAgB,CAAC,CAAC,CAAC,GAAG,CAAC;gBAClF,QAAQ,GAAG,MAAM,GAAG,YAAY,GAAG,CAAC,CAAC,MAAM,GAAG,YAAY,CAAC,GAAG,YAAY,CAAC,CAAC;gBAC5E,IAAI,QAAQ,IAAI,WAAW,EAAE,CAAC;oBAC5B,QAAQ,GAAG,WAAW,GAAG,CAAC,CAAC,CAAC,oBAAoB;gBAClD,CAAC;gBAED,MAAM;YACR,CAAC;YACD,KAAK,WAAW,CAAC,CAAC,CAAC;gBACjB,IAAI,MAAM,GAAG,GAAG,GAAG,CAAC,CAAC;gBACrB,IAAI,MAAM,GAAG,GAAG,CAAC;gBACjB,IAAI,MAAM,IAAI,gBAAgB,EAAE,CAAC;oBAC/B,oCAAoC;oBACpC,MAAM,GAAG,CAAC,CAAC;oBACX,MAAM,GAAG,CAAC,GAAG,GAAG,CAAC,CAAC,GAAG,YAAY,CAAC;gBACpC,CAAC;gBACD,QAAQ,GAAG,MAAM,GAAG,YAAY,GAAG,MAAM,CAAC;gBAC1C,IAAI,QAAQ,IAAI,WAAW,EAAE,CAAC;oBAC5B,QAAQ,GAAG,CAAC,CAAC,CAAC,qBAAqB;gBACrC,CAAC;gBAED,MAAM;YACR,CAAC;YACD,KAAK,SAAS,CAAC,CAAC,CAAC;gBACf,IAAI,MAAM,GAAG,GAAG,GAAG,CAAC,CAAC;gBACrB,IAAI,MAAM,GAAG,GAAG,CAAC;gBACjB,IAAI,MAAM,GAAG,CAAC,EAAE,CAAC;oBACf,uCAAuC;oBACvC,MAAM,GAAG,gBAAgB,GAAG,CAAC,CAAC;oBAC9B,MAAM,GAAG,CAAC,GAAG,GAAG,CAAC,GAAG,YAAY,CAAC,GAAG,YAAY,CAAC;gBACnD,CAAC;gBACD,QAAQ,GAAG,MAAM,GAAG,YAAY,GAAG,MAAM,CAAC;gBAC1C,IAAI,QAAQ,IAAI,WAAW,EAAE,CAAC;oBAC5B,QAAQ,GAAG,WAAW,GAAG,CAAC,CAAC,CAAC,oBAAoB;gBAClD,CAAC;gBAED,MAAM;YACR,CAAC;QACH,CAAC;QAED,OAAO,QAAQ,CAAC;IAClB,CAAC;IAED;;;OAGG;IAEH,aAAa,CAAC,KAAoB;;QAChC,MAAM,MAAM,GAAG,KAAK,CAAC,YAAY,EAAE,CAAC,CAAC,CAAgB,CAAC;QACtD,IAAI,CAAC,MAAM,CAAC,OAAO,CAAC,KAAK,EAAE,CAAC;YAC1B,OAAO;QACT,CAAC;QAED,MAAM,YAAY,GAAG,IAAI,CAAC,YAAY,CAAC,OAAO,CAAC,MAA2B,CAAC,CAAC;QAC5E,MAAM,WAAW,GAAG,IAAI,CAAC,YAAY,CAAC,MAAM,CAAC;QAC7C,IAAI,YAAY,GAAG,CAAC,IAAI,CAAC,CAAC,YAAY,EAAE,WAAW,EAAE,WAAW,EAAE,SAAS,CAAC,CAAC,QAAQ,CAAC,KAAK,CAAC,GAAG,CAAC,EAAE,CAAC;YACjG,OAAO;QACT,CAAC;QAED,IAAI,QAAQ,GAAG,YAAY,CAAC;QAC5B,IAAI,QAAQ,GAAG,CAAC,CAAC;QAEjB,GAAG,CAAC;YACF,QAAQ,GAAG,IAAI,CAAC,iBAAiB,CAAC,QAAQ,EAAE,KAAK,CAAC,GAAG,EAAE,WAAW,CAAC,CAAC;YACpE,QAAQ,EAAE,CAAC;QACb,CAAC,QAAQ,QAAQ,GAAG,WAAW,KAAI,MAAA,IAAI,CAAC,YAAY,CAAC,QAAQ,CAAC,0CAAE,QAAQ,CAAA,EAAE;QAE1E,IACE,QAAQ,KAAK,YAAY;YACzB,QAAQ,IAAI,CAAC;YACb,QAAQ,GAAG,WAAW;YACtB,CAAC,CAAA,MAAA,IAAI,CAAC,YAAY,CAAC,QAAQ,CAAC,0CAAE,QAAQ,CAAA,EACtC,CAAC;YACD,IAAI,CAAC,WAAW,CAAC,QAAQ,CAAC,CAAC;YAC3B,KAAK,CAAC,cAAc,EAAE,CAAC;YACvB,KAAK,CAAC,eAAe,EAAE,CAAC;QAC1B,CAAC;IACH,CAAC;IAED;;OAEG;IAEH,UAAU,CAAC,KAAiB;QAC1B,MAAM,aAAa,GAAG,KAAK,CAAC,aAA4B,CAAC;QACzD,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,IAAI,EAAE,aAAa,CAAC,EAAE,CAAC;YAC/C,IAAI,CAAC,IAAI,CAAC,QAAQ,GAAG,CAAC,CAAC;YACvB,IAAI,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,CAAC,GAAG,CAAC,QAAQ,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC;QAC1D,CAAC;IACH,CAAC;IAED,iBAAiB;QACf,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC,kBAAkB,EAAE,CAAC;IAClD,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDACH,IAAI,EAAC,SAAS,gBACF,IAAI,CAAC,aAAa,IAAI,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,gBAAgB,CAAC,EACrE,QAAQ,EAAE,CAAC,IAEV,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,CAAC,QAA4B,EAAE,EAAE;;YAAC,OAAA,CACzD,cACE,KAAK,EAAC,cAAc,gBACR,QAAQ,EACpB,IAAI,EAAC,QAAQ,mBACE,CAAA,MAAA,IAAI,CAAC,aAAa,0CAAE,WAAW,EAAE,MAAK,QAAQ,CAAC,WAAW,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,EAC9F,QAAQ,EAAE,CAAC,CAAC,EACZ,OAAO,EAAE,GAAG,EAAE,CAAC,CAAC,IAAI,CAAC,aAAa,GAAG,QAAQ,CAAC,EAC9C,QAAQ,EAAE,IAAI,CAAC,kBAAkB,IAAI,QAAQ,KAAK,WAAW;gBAE7D,WACE,KAAK,EAAC,cAAc,EACpB,IAAI,EAAC,KAAK,0BACY,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,cAAc,CAAC,gBAC3C,kBAAkB,CAAC,QAAQ,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,EAClD,KAAK,EAAE,kBAAkB,CAAC,QAAQ,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,EAC7C,KAAK,EAAE,EAAC,eAAe,EAAE,QAAQ,EAAC,GAC7B,CACA,CACV,CAAA;SAAA,CAAC,CACG,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {\n Component,\n ComponentInterface,\n Element,\n Event,\n EventEmitter,\n Host,\n Listen,\n Method,\n Prop,\n Watch,\n h,\n} from \"@stencil/core\";\nimport {ColorPickerPalette} from \"../../beans\";\nimport {containsElement} from \"../../utils/utils\";\n\nconst LOCALES = {\n it: {\n \"Select a color\": \"Seleziona un colore\",\n \"Color swatch\": \"Campione di colore\",\n },\n en: {\n \"Select a color\": \"Select a color\",\n \"Color swatch\": \"Color swatch\",\n },\n} as const;\n\n/** Number of colors in each group (column) of the grid. */\nconst COLOR_GROUP_SIZE = 5;\n\n/** Number of color groups (columns) in the grid. */\nconst COLOR_GROUPS = 9;\n\n/**\n * Color picker component.\n * This component allows the user to pick a color from a predefined set.\n */\n@Component({\n tag: \"z-color-picker\",\n styleUrl: \"styles.css\",\n shadow: true,\n})\nexport class ZColorPicker implements ComponentInterface {\n @Element() host: HTMLZColorPickerElement;\n\n /**\n * The selected color to highlight.\n */\n @Prop({mutable: true})\n selectedColor: ColorPickerPalette;\n\n /**\n * The language for the aria labels inside the color picker.\n */\n @Prop()\n lng: \"it\" | \"en\" = \"it\";\n\n /**\n * The aria-label for the color picker, e.g. \"Select a background color for the label\".\n */\n @Prop()\n htmlAriaLabel: string;\n\n /**\n * Disables the transparent color option.\n * Setting `selectedColor` prop to `#FFFFFF00` while `disableTransparent` is true will default to `#333333` (\"dark gray 2\").\n */\n @Prop()\n disableTransparent = false;\n\n /**\n * Event emitted when a color is selected.\n */\n @Event()\n colorSelected: EventEmitter<ColorPickerPalette>;\n\n /**\n * The color keys arranged in row-major order for rendering and navigation.\n */\n private colorKeysByRow: ColorPickerPalette[] = [];\n\n private _colorButtons: HTMLButtonElement[] = [];\n\n private get colorButtons(): HTMLButtonElement[] {\n if (!this._colorButtons.length) {\n this._colorButtons = Array.from(this.host.shadowRoot.querySelectorAll(\"button\")) as HTMLButtonElement[];\n }\n\n return this._colorButtons;\n }\n\n /**\n * Reorders color keys from column-major (the format of the `ColorPickerPalette` object) to row-major (visual/navigation order).\n * This ensures button indices in the DOM match their visual position in the grid.\n */\n private sortColorKeysByRow(): ColorPickerPalette[] {\n const allKeys = Object.keys(ColorPickerPalette) as ColorPickerPalette[];\n const ordered: ColorPickerPalette[] = [];\n\n // Iterate through visual positions (row by row, left to right)\n for (let row = 0; row < COLOR_GROUP_SIZE; row++) {\n for (let col = 0; col < COLOR_GROUPS; col++) {\n const columnMajorIndex = col * COLOR_GROUP_SIZE + row;\n if (columnMajorIndex < allKeys.length) {\n ordered.push(allKeys[columnMajorIndex]);\n }\n }\n }\n\n return ordered;\n }\n\n /** Move focus to the specified color button by index. */\n private moveFocusTo(index: number): void {\n // Reset tabindex of other buttons and set tabindex to 0 on selected button\n this.colorButtons.forEach((btn, i) => (btn.tabIndex = i === index ? 0 : -1));\n this.colorButtons[index].focus();\n }\n\n @Watch(\"disableTransparent\")\n @Watch(\"selectedColor\")\n validateTransparentSelection(): void {\n if (this.disableTransparent && this.selectedColor === \"#FFFFFF00\") {\n this.selectedColor = \"#333333\"; // Default to dark gray 2 if transparent is disabled and currently selected\n }\n }\n\n @Watch(\"selectedColor\")\n emitColorSelected(): void {\n this.colorSelected.emit(this.selectedColor);\n }\n\n /**\n * Focuses the selected or first enabled color button and makes the container non-tabbable.\n */\n @Listen(\"focus\")\n @Method()\n async setFocus(): Promise<void> {\n // Reset tabindex of all buttons\n this.colorButtons.forEach((btn) => (btn.tabIndex = -1));\n const firstSelectedOrEnabled =\n this.colorButtons.find((btn) => btn.ariaSelected === \"true\") || this.colorButtons.find((btn) => !btn.disabled);\n if (!firstSelectedOrEnabled) {\n return;\n }\n\n firstSelectedOrEnabled.tabIndex = 0;\n setTimeout(() => {\n firstSelectedOrEnabled.focus();\n }, 50);\n // Set container as non-tabbable\n this.host.tabIndex = -1;\n }\n\n /**\n * Compute next index in row-major grid according to keyboard direction.\n */\n private getNextIndexByKey(currentIndex: number, key: string, totalColors: number): number {\n const row = Math.floor(currentIndex / COLOR_GROUPS);\n const col = currentIndex % COLOR_GROUPS;\n let newIndex = currentIndex;\n\n switch (key) {\n case \"ArrowRight\": {\n const newCol = col + 1;\n const newRow = newCol >= COLOR_GROUPS ? (row + 1) % COLOR_GROUP_SIZE : row;\n newIndex = newRow * COLOR_GROUPS + (newCol % COLOR_GROUPS);\n if (newIndex >= totalColors) {\n newIndex = 0; // Wrap to first item\n }\n\n break;\n }\n case \"ArrowLeft\": {\n const newCol = col - 1;\n const newRow = newCol < 0 ? (row - 1 + COLOR_GROUP_SIZE) % COLOR_GROUP_SIZE : row;\n newIndex = newRow * COLOR_GROUPS + ((newCol + COLOR_GROUPS) % COLOR_GROUPS);\n if (newIndex >= totalColors) {\n newIndex = totalColors - 1; // Wrap to last item\n }\n\n break;\n }\n case \"ArrowDown\": {\n let newRow = row + 1;\n let newCol = col;\n if (newRow >= COLOR_GROUP_SIZE) {\n // Wrap to first item of next column\n newRow = 0;\n newCol = (col + 1) % COLOR_GROUPS;\n }\n newIndex = newRow * COLOR_GROUPS + newCol;\n if (newIndex >= totalColors) {\n newIndex = 0; // Wrap to first item\n }\n\n break;\n }\n case \"ArrowUp\": {\n let newRow = row - 1;\n let newCol = col;\n if (newRow < 0) {\n // Wrap to last item of previous column\n newRow = COLOR_GROUP_SIZE - 1;\n newCol = (col - 1 + COLOR_GROUPS) % COLOR_GROUPS;\n }\n newIndex = newRow * COLOR_GROUPS + newCol;\n if (newIndex >= totalColors) {\n newIndex = totalColors - 1; // Wrap to last item\n }\n\n break;\n }\n }\n\n return newIndex;\n }\n\n /**\n * Handle keyboard navigation within the color picker.\n * Arrow keys move focus in the expected direction, wrapping around edges. The grid is navigated in row-major order.\n */\n @Listen(\"keydown\")\n handleKeyDown(event: KeyboardEvent): void {\n const target = event.composedPath()[0] as HTMLElement;\n if (!target.dataset.color) {\n return;\n }\n\n const currentIndex = this.colorButtons.indexOf(target as HTMLButtonElement);\n const totalColors = this.colorButtons.length;\n if (currentIndex < 0 || ![\"ArrowRight\", \"ArrowLeft\", \"ArrowDown\", \"ArrowUp\"].includes(event.key)) {\n return;\n }\n\n let newIndex = currentIndex;\n let attempts = 0;\n\n do {\n newIndex = this.getNextIndexByKey(newIndex, event.key, totalColors);\n attempts++;\n } while (attempts < totalColors && this.colorButtons[newIndex]?.disabled);\n\n if (\n newIndex !== currentIndex &&\n newIndex >= 0 &&\n newIndex < totalColors &&\n !this.colorButtons[newIndex]?.disabled\n ) {\n this.moveFocusTo(newIndex);\n event.preventDefault();\n event.stopPropagation();\n }\n }\n\n /**\n * When focus leaves the color picker (e.g. user tabs away), reset all buttons to non-tabbable and make the container tabbable again.\n */\n @Listen(\"blur\")\n handleBlur(event: FocusEvent): void {\n const relatedTarget = event.relatedTarget as HTMLElement;\n if (!containsElement(this.host, relatedTarget)) {\n this.host.tabIndex = 0;\n this.colorButtons.forEach((btn) => (btn.tabIndex = -1));\n }\n }\n\n componentWillLoad(): void {\n this.colorKeysByRow = this.sortColorKeysByRow();\n }\n\n render(): HTMLZColorPickerElement {\n return (\n <Host\n role=\"listbox\"\n aria-label={this.htmlAriaLabel || LOCALES[this.lng][\"Select a color\"]}\n tabIndex={0}\n >\n {this.colorKeysByRow.map((colorKey: ColorPickerPalette) => (\n <button\n class=\"color-swatch\"\n data-color={colorKey}\n role=\"option\"\n aria-selected={this.selectedColor?.toUpperCase() === colorKey.toUpperCase() ? \"true\" : \"false\"}\n tabIndex={-1}\n onClick={() => (this.selectedColor = colorKey)}\n disabled={this.disableTransparent && colorKey === \"#FFFFFF00\"}\n >\n <div\n class=\"color-swatch\"\n role=\"img\"\n aria-roledescription={LOCALES[this.lng][\"Color swatch\"]}\n aria-label={ColorPickerPalette[colorKey][this.lng]}\n title={ColorPickerPalette[colorKey][this.lng]}\n style={{backgroundColor: colorKey}}\n ></div>\n </button>\n ))}\n </Host>\n );\n }\n}\n"]}

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

@@ -1,6 +1,6 @@
 import { h } from "@stencil/core";
 import { ControlSize, InputType, KeyboardCode, ListDividerType, ListSize } from "../../beans";
-import { getPlainText, randomId } from "../../utils/utils";
+import { encodeString, getPlainText, randomId } from "../../utils/utils";
 export class ZCombobox {
     watchItems() {
         this.itemsList = typeof this.items === "string" ? JSON.parse(this.items) : this.items;
@@ -59,8 +59,8 @@ export class ZCombobox {
                 return ListSize.LARGE;
         }
     }
-    getOptionId(itemId) {
-        return `${this.inputid}-option-${itemId}`;
+    getOptionId(item) {
+        return `${this.inputid}-option-${item.id ? encodeString(`${item.id}`) : encodeString(`${item.name}`)}`;
     }
     getCheckAllOptionId() {
         return `${this.inputid}-check-all`;
@@ -130,7 +130,7 @@ export class ZCombobox {
         }
         else {
             this.itemsList = this.itemsList.map((i) => {
-                if (optionId === this.getOptionId(i.id)) {
+                if (optionId === this.getOptionId(i)) {
                     i.checked = !i.checked;
                 }
                 return i;
@@ -204,16 +204,22 @@ export class ZCombobox {
     toggleComboBox() {
         this.isopen = !this.isopen;
     }
+    getHeaderAriaLabel() {
+        if (!this.label || this.selectedCounter <= 0) {
+            return undefined;
+        }
+        const suffix = this.selectedCounter === 1 ? "elemento selezionato" : "elementi selezionati";
+        return `${this.label}: ${this.selectedCounter} ${suffix}`;
+    }
     getComboboxA11yAttributes(isZInput) {
         const role = "combobox";
-        const ariaLabel = this.htmlAriaLabel;
         const ariaExpanded = this.isopen ? "true" : "false";
         const ariaActivedescendant = this.isopen ? this.focusedItemId : "";
         const ariaControls = `${this.inputid}_list`;
         if (isZInput) {
             return {
                 "role": role,
-                "aria-label": ariaLabel,
+                "aria-label": this.htmlAriaLabel,
                 "html-aria-expanded": ariaExpanded,
                 "html-aria-activedescendant": ariaActivedescendant,
                 "html-aria-controls": ariaControls,
@@ -221,7 +227,6 @@ export class ZCombobox {
         }
         return {
             "role": role,
-            "aria-label": ariaLabel,
             "aria-expanded": ariaExpanded,
             "aria-activedescendant": ariaActivedescendant,
             "aria-controls": ariaControls,
@@ -229,18 +234,16 @@ export class ZCombobox {
     }
     renderHeader() {
         const comboboxA11yAttributes = !this.hassearch ? this.getComboboxA11yAttributes(false) : {};
-        return (h("div", Object.assign({ class: "header", onClick: () => this.toggleComboBox(), onKeyDown: (e) => this.handleHeaderKeyDown(e), role: "button", tabindex: 0, "aria-controls": "open-combo-data", "aria-expanded": this.isopen ? "true" : "false" }, comboboxA11yAttributes), h("span", { class: "body-3", "aria-label": this.label
-                ? `${this.label}${this.selectedCounter > 0 ? ` - ${this.selectedCounter} selezionati` : ``}`
-                : undefined }, this.label, h("span", null, this.selectedCounter > 0 && ` (${this.selectedCounter})`)), h("z-icon", { name: "caret-down", class: this.size })));
+        return (h("div", Object.assign({ class: "header", onClick: () => this.toggleComboBox(), onKeyDown: (e) => this.handleHeaderKeyDown(e), role: "button", tabindex: 0, "aria-controls": "open-combo-data", "aria-expanded": this.isopen ? "true" : "false", "aria-label": this.getHeaderAriaLabel() }, comboboxA11yAttributes), h("span", { class: "body-3" }, this.label, h("span", null, this.selectedCounter > 0 && ` (${this.selectedCounter})`)), h("z-icon", { name: "caret-down", class: this.size })));
     }
     renderContent() {
-        return (h("div", { id: "open-combo-data", class: "open-combo-data" }, this.hassearch && this.renderSearchInput(), h("div", { role: "listbox", "aria-label": this.label, "aria-multiselectable": "true", id: `${this.inputid}_list`, "aria-owns": `${this.hascheckall ? `${this.getCheckAllOptionId()} ` : ``}${this.itemsList.map((item) => this.getOptionId(item.id)).join(" ")}` }, this.renderItems())));
+        return (h("div", { id: "open-combo-data", class: "open-combo-data" }, this.hassearch && this.renderSearchInput(), h("div", { role: "listbox", "aria-label": this.label, "aria-multiselectable": "true", id: `${this.inputid}_list`, "aria-owns": `${this.hascheckall ? `${this.getCheckAllOptionId()} ` : ``}${this.itemsList.map((item) => this.getOptionId(item)).join(" ")}` }, this.renderItems())));
     }
     renderItems() {
         return (h("div", { class: this.searchValue && "search", tabIndex: -1, role: "presentation" }, this.renderList(this.renderItemsList)));
     }
     renderItem(item, index, length) {
-        const optionId = this.getOptionId(item.id);
+        const optionId = this.getOptionId(item);
         const isDisabled = !item.checked && this.hasReachedMaxSelections();
         return (h("z-list-element", { htmlTabindex: -1, dividerType: index !== length - 1 ? ListDividerType.ELEMENT : ListDividerType.NONE, size: this.getControlToListSize(), role: "presentation", disabled: !!isDisabled }, h("span", { class: "option-wrap", role: "presentation", onClick: () => {
                 this.focusedItemId = "";
@@ -294,7 +297,7 @@ export class ZCombobox {
         return (h("z-list-element", { class: "check-all-wrapper", role: "presentation", htmlTabindex: -1, dividerType: ListDividerType.ELEMENT, dividerColor: "gray800", size: this.getControlToListSize(), disabled: !!isDisabled }, h("span", { class: "option-wrap", role: "presentation", onClick: () => this.checkOption(optionId) }, h("z-icon", { name: allChecked ? "checkbox-checked" : "checkbox", class: this.focusedItemId === optionId ? "focused" : "" }), h("span", { id: optionId, role: isDisabled ? "presentation" : "option", "aria-selected": allChecked ? "true" : "false" }, allChecked ? this.uncheckalltext : this.checkalltext))));
     }
     render() {
-        return (h("div", { key: '23cd031ec2894308960df94374713e9395521a56', "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: '6ada0f3dc9aebeb5c97843c18935199f6c981e28', "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"; }
@@ -716,3 +719,4 @@ export class ZCombobox {
             }];
     }
 }
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@

+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/z-combobox/index.tsx"],"names":[],"mappings":"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","sourcesContent":["import {Component, ComponentInterface, Element, Event, EventEmitter, Prop, State, Watch, h} from \"@stencil/core\";\nimport {ComboItem, ControlSize, InputType, KeyboardCode, ListDividerType, ListSize} from \"../../beans\";\nimport {encodeString, getPlainText, randomId} from \"../../utils/utils\";\nimport {ZInput} from \"../z-input\";\n\n@Component({\n tag: \"z-combobox\",\n styleUrls: [\"../css-components/z-label/styles.css\", \"styles.css\"],\n shadow: true,\n})\nexport class ZCombobox implements ComponentInterface {\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 /** 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 /** the combobox aria-label */\n @Prop()\n htmlAriaLabel?: string;\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 = \"\";\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 /** 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 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 getOptionId(item: ComboItem): string {\n return `${this.inputid}-option-${item.id ? encodeString(`${item.id}`) : encodeString(`${item.name}`)}`;\n }\n\n private getCheckAllOptionId(): string {\n return `${this.inputid}-check-all`;\n }\n\n private allOptionsSelected(): boolean {\n return this.selectedCounter === this.itemsList.length;\n }\n\n private hasReachedMaxSelections(): boolean {\n return !!(this.maxcheckableitems && this.selectedCounter >= this.maxcheckableitems);\n }\n\n private handleHeaderKeyDown(e: KeyboardEvent): void {\n if (e.code === KeyboardCode.ENTER && !this.focusedItemId) {\n this.toggleComboBox();\n }\n\n if (!this.isopen || this.hassearch) {\n return;\n }\n\n switch (e.code as KeyboardCode) {\n case KeyboardCode.SPACE:\n case KeyboardCode.ENTER:\n if (this.focusedItemId) {\n e.preventDefault();\n this.checkOption(this.focusedItemId);\n }\n break;\n case KeyboardCode.ESC:\n if (this.focusedItemId) {\n this.focusedItemId = \"\";\n }\n break;\n case KeyboardCode.ARROW_DOWN:\n case KeyboardCode.ARROW_UP:\n this.handleArrowsNavigation(e);\n break;\n }\n }\n\n private handleInputKeyDown(e: KeyboardEvent): void {\n switch (e.code as KeyboardCode) {\n case KeyboardCode.ENTER:\n case KeyboardCode.SPACE:\n if (this.focusedItemId) {\n e.preventDefault();\n this.checkOption(this.focusedItemId);\n break;\n }\n break;\n case KeyboardCode.ARROW_DOWN:\n case KeyboardCode.ARROW_UP:\n this.handleArrowsNavigation(e);\n break;\n case KeyboardCode.ESC:\n if (this.focusedItemId) {\n this.focusedItemId = \"\";\n break;\n }\n this.closeFilterItems();\n break;\n case KeyboardCode.TAB:\n this.focusedItemId = \"\";\n break;\n }\n }\n\n private checkOption(optionId: string): void {\n if (optionId === this.getCheckAllOptionId()) {\n this.itemsList = this.itemsList.map((item: ComboItem) => ({\n ...item,\n checked: !this.allOptionsSelected(),\n }));\n\n this.focusedItemId = this.getCheckAllOptionId();\n } else {\n this.itemsList = this.itemsList.map((i: ComboItem) => {\n if (optionId === this.getOptionId(i)) {\n i.checked = !i.checked;\n }\n\n return i;\n });\n }\n\n this.updateRenderItemsList();\n this.emitComboboxChange();\n }\n\n private handleArrowsNavigation(e: KeyboardEvent): void {\n if (![KeyboardCode.ARROW_DOWN, KeyboardCode.ARROW_UP].includes(e.code as KeyboardCode) || !this.isopen) {\n return;\n }\n\n e.preventDefault();\n e.stopPropagation();\n\n const currElem = this.focusedItemId ? this.element.shadowRoot.querySelector(`#${this.focusedItemId}`) : null;\n const options = Array.from(this.element.shadowRoot.querySelectorAll('[role=\"option\"]'));\n\n if (!options.length) {\n return;\n }\n\n const currElemIndex = currElem ? options.indexOf(currElem) : null;\n const firstElemIndex = 0;\n const lastElemIndex = options.length - 1;\n\n let nextElem = null;\n if (e.code === KeyboardCode.ARROW_DOWN) {\n nextElem =\n currElemIndex === null ? options[firstElemIndex] : options[currElemIndex + 1] || options[lastElemIndex];\n } else if (e.code === KeyboardCode.ARROW_UP) {\n nextElem =\n currElemIndex === null ? options[lastElemIndex] : options[currElemIndex - 1] || options[firstElemIndex];\n }\n\n this.focusedItemId = nextElem.id;\n nextElem.scrollIntoView({block: \"nearest\", container: \"nearest\"});\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 closeFilterItems(): void {\n this.searchValue = \"\";\n this.resetRenderItemsList();\n }\n\n private toggleComboBox(): void {\n this.isopen = !this.isopen;\n }\n\n private getHeaderAriaLabel(): string | undefined {\n if (!this.label || this.selectedCounter <= 0) {\n return undefined;\n }\n\n const suffix = this.selectedCounter === 1 ? \"elemento selezionato\" : \"elementi selezionati\";\n\n return `${this.label}: ${this.selectedCounter} ${suffix}`;\n }\n\n private getComboboxA11yAttributes(isZInput: boolean): Record<string, string> {\n const role = \"combobox\";\n const ariaExpanded = this.isopen ? \"true\" : \"false\";\n const ariaActivedescendant = this.isopen ? this.focusedItemId : \"\";\n const ariaControls = `${this.inputid}_list`;\n\n if (isZInput) {\n return {\n \"role\": role,\n \"aria-label\": this.htmlAriaLabel,\n \"html-aria-expanded\": ariaExpanded,\n \"html-aria-activedescendant\": ariaActivedescendant,\n \"html-aria-controls\": ariaControls,\n };\n }\n\n return {\n \"role\": role,\n \"aria-expanded\": ariaExpanded,\n \"aria-activedescendant\": ariaActivedescendant,\n \"aria-controls\": ariaControls,\n };\n }\n\n private renderHeader(): HTMLDivElement {\n const comboboxA11yAttributes = !this.hassearch ? this.getComboboxA11yAttributes(false) : {};\n\n return (\n <div\n class=\"header\"\n onClick={() => this.toggleComboBox()}\n onKeyDown={(e: KeyboardEvent) => this.handleHeaderKeyDown(e)}\n role=\"button\"\n tabindex={0}\n aria-controls=\"open-combo-data\"\n aria-expanded={this.isopen ? \"true\" : \"false\"}\n aria-label={this.getHeaderAriaLabel()}\n {...comboboxA11yAttributes}\n >\n <span class=\"body-3\">\n {this.label}\n <span>{this.selectedCounter > 0 && ` (${this.selectedCounter})`}</span>\n </span>\n <z-icon\n name=\"caret-down\"\n class={this.size}\n />\n </div>\n );\n }\n\n private renderContent(): HTMLDivElement {\n return (\n <div\n id=\"open-combo-data\"\n class=\"open-combo-data\"\n >\n {this.hassearch && this.renderSearchInput()}\n <div\n role=\"listbox\"\n aria-label={this.label}\n aria-multiselectable=\"true\"\n id={`${this.inputid}_list`}\n aria-owns={`${this.hascheckall ? `${this.getCheckAllOptionId()} ` : ``}${this.itemsList.map((item) => this.getOptionId(item)).join(\" \")}`}\n >\n {this.renderItems()}\n </div>\n </div>\n );\n }\n\n private renderItems(): HTMLDivElement {\n return (\n <div\n class={this.searchValue && \"search\"}\n tabIndex={-1}\n role=\"presentation\"\n >\n {this.renderList(this.renderItemsList)}\n </div>\n );\n }\n\n private renderItem(item: ComboItem, index: number, length: number): HTMLZListElement {\n const optionId = this.getOptionId(item);\n const isDisabled = !item.checked && this.hasReachedMaxSelections();\n\n return (\n <z-list-element\n htmlTabindex={-1}\n dividerType={index !== length - 1 ? ListDividerType.ELEMENT : ListDividerType.NONE}\n size={this.getControlToListSize()}\n role=\"presentation\"\n disabled={!!isDisabled}\n >\n <span\n class=\"option-wrap\"\n role=\"presentation\"\n onClick={() => {\n this.focusedItemId = \"\";\n this.checkOption(optionId);\n }}\n >\n <z-icon\n name={item.checked ? \"checkbox-checked\" : \"checkbox\"}\n class={this.focusedItemId === optionId ? \"focused\" : \"\"}\n />\n <span\n id={optionId}\n role={isDisabled ? \"presentation\" : \"option\"}\n aria-selected={item.checked ? \"true\" : \"false\"}\n aria-label={isDisabled ? undefined : getPlainText(item.name)}\n >\n <span\n aria-hidden=\"true\"\n innerHTML={item.name}\n />\n </span>\n </span>\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=\"presentation\">\n {this.renderCheckAll()}\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.category || \"Altra categoria\";\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(\n ([key, value], index) => {\n return (\n <z-list-group\n size={this.getControlToListSize()}\n divider-type={ListDividerType.ELEMENT}\n aria-labelledby={`${this.inputid}_list_group_${index}`}\n >\n <span\n class=\"body-3-sb z-list-group-title\"\n slot=\"header-title\"\n id={`${this.inputid}_list_group_${index}`}\n aria-hidden=\"true\"\n >\n {key}\n </span>\n {value.map((item) => item)}\n </z-list-group>\n );\n }\n );\n\n return (\n <ul role=\"presentation\">\n {this.renderCheckAll()}\n {listGroups}\n </ul>\n );\n }\n\n private renderNoSearchResults(): HTMLUListElement {\n return (\n <div class=\"no-results\">\n <span>{this.noresultslabel}</span>\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 html-aria-autocomplete=\"list\"\n {...this.getComboboxA11yAttributes(true)}\n onKeyDown={(e: KeyboardEvent) => this.handleInputKeyDown(e)}\n onInputChange={(e: CustomEvent) => {\n this.searchValue = e.detail.value;\n this.focusedItemId = \"\";\n }}\n />\n );\n }\n\n private renderCheckAll(): HTMLDivElement {\n if (!this.hascheckall || this.searchValue) {\n return;\n }\n\n const optionId = this.getCheckAllOptionId();\n const allChecked = this.allOptionsSelected();\n const isDisabled =\n this.hasReachedMaxSelections() || (this.maxcheckableitems && this.maxcheckableitems < this.itemsList.length);\n\n return (\n <z-list-element\n class=\"check-all-wrapper\"\n role=\"presentation\"\n htmlTabindex={-1}\n dividerType={ListDividerType.ELEMENT}\n dividerColor=\"gray800\"\n size={this.getControlToListSize()}\n disabled={!!isDisabled}\n >\n <span\n class=\"option-wrap\"\n role=\"presentation\"\n onClick={() => this.checkOption(optionId)}\n >\n <z-icon\n name={allChecked ? \"checkbox-checked\" : \"checkbox\"}\n class={this.focusedItemId === optionId ? \"focused\" : \"\"}\n />\n <span\n id={optionId}\n role={isDisabled ? \"presentation\" : \"option\"}\n aria-selected={allChecked ? \"true\" : \"false\"}\n >\n {allChecked ? this.uncheckalltext : this.checkalltext}\n </span>\n </span>\n </z-list-element>\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-cover-hero/index.js CHANGED Viewed

@@ -7,9 +7,6 @@ import { CoverHeroContentPosition, CoverHeroVariant } from "../../beans";
  * @slot cover - slot for the cover image.
  * @slot content - slot for the content.
  * @slot info-reveal - slot for the info reveal.
- * @cssprop --cover-hero-overlay - overlay color of the cover hero (CSS `background` property). **Default**: `linear-gradient(270deg, #0000 0%, #000000e6 100%)`.
- * @cssprop --cover-hero-text-color - color of the text.
- * @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`.
  */
 export class ZCoverHero {
     constructor() {
@@ -47,9 +44,9 @@ export class ZCoverHero {
         return (h("div", { class: "content-container" }, h("slot", { name: "content" })));
     }
     render() {
-        return (h(Host, { key: '0e8ec76a2293bbf7044d2a5d0ec951ac096adcd1' }, this.variant === CoverHeroVariant.STACKED &&
+        return (h(Host, { key: 'bb147f3b614268218fba165360012031572ec76b' }, this.variant === CoverHeroVariant.STACKED &&
             this.contentPosition === CoverHeroContentPosition.TOP &&
-            this.renderContent(), h("div", { key: 'e2dd8963eb05d5a1a602b05d6275d52c01b8dbc9', class: "main-container" }, h("div", { key: '3b537c3b07906fd72795b105e4189252bf876b51', class: "cover-container" }, h("slot", { key: 'f99228a940cfc96ae4ff98a6b79df622d033e00d', name: "cover" })), h("slot", { key: '86b43980717df411f76b098628d83fa80c8dcff6', name: "info-reveal" }), this.variant === CoverHeroVariant.OVERLAY && this.renderContent()), this.variant === CoverHeroVariant.STACKED &&
+            this.renderContent(), h("div", { key: '94c697c41b4d98ea9f5be00634a3de1fd214ea72', class: "main-container" }, h("div", { key: 'e1a181735381dbc2472085c7e1d7082e1564185a', class: "cover-container" }, h("slot", { key: '1692cfa7f6a9ee926a262e04e8912a72f5a95cca', name: "cover" })), h("slot", { key: 'c13a059c162d85e46d3f116a8b1fd9e3a6e363f7', name: "info-reveal" }), this.variant === CoverHeroVariant.OVERLAY && this.renderContent()), this.variant === CoverHeroVariant.STACKED &&
             this.contentPosition === CoverHeroContentPosition.BOTTOM &&
             this.renderContent()));
     }
@@ -154,3 +151,4 @@ export class ZCoverHero {
             }];
     }
 }
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@

+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/z-cover-hero/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAsB,OAAO,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,CAAC,EAAC,MAAM,eAAe,CAAC;AAC5F,OAAO,EAAC,wBAAwB,EAAE,gBAAgB,EAAC,MAAM,aAAa,CAAC;AAEvE;;;;;;;GAOG;AAMH,MAAM,OAAO,UAAU;IALvB;QAQE;;WAEG;QAEH,YAAO,GAAqB,gBAAgB,CAAC,OAAO,CAAC;QAErD;;WAEG;QAEH,oBAAe,GAA6B,wBAAwB,CAAC,GAAG,CAAC;QAEzE;;;;;WAKG;QAEH,wBAAmB,GAAG,IAAI,CAAC;KA6C5B;IA3CC;;;;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, ComponentInterface, 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 */\n@Component({\n tag: \"z-cover-hero\",\n styleUrl: \"styles.css\",\n shadow: true,\n})\nexport class ZCoverHero implements ComponentInterface {\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/styles.css CHANGED Viewed

@@ -1,4 +1,9 @@
 :host {
+  /**
+   * @prop --cover-hero-overlay: overlay color of the cover hero (CSS `background` property). **Default**: `linear-gradient(270deg, #0000 0%, #000000e6 100%)`.
+   * @prop --cover-hero-text-color: color of the text.
+   * @prop --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`.
+   */
   --cover-hero-overlay: linear-gradient(270deg, #0000 0%, #000000e6 100%);
   --cover-hero-text-color: var(--color-text-inverse);
   --cover-hero-aspect-ratio: ;

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

@@ -10,7 +10,7 @@ export class ZDivider {
         this.orientation = DividerOrientation.HORIZONTAL;
     }
     render() {
-        return (h(Host, { key: '2be45be46ca78f9c49d78bb39d88a49a3e226074', class: `divider-${this.size} divider-${this.orientation}`, style: { backgroundColor: `var(--${this.color})` } }));
+        return (h(Host, { key: 'ad8d9a15195becf87ba4a03e73a279ecee4d4b93', class: `divider-${this.size} divider-${this.orientation}`, style: { backgroundColor: `var(--${this.color})` } }));
     }
     static get is() { return "z-divider"; }
     static get encapsulation() { return "scoped"; }
@@ -103,3 +103,4 @@ export class ZDivider {
         };
     }
 }
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@

+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/z-divider/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAsB,IAAI,EAAE,IAAI,EAAE,CAAC,EAAC,MAAM,eAAe,CAAC;AAC3E,OAAO,EAAC,kBAAkB,EAAE,WAAW,EAAC,MAAM,aAAa,CAAC;AAO5D,MAAM,OAAO,QAAQ;IANrB;QAOE,8BAA8B;QAE9B,SAAI,GAAiB,WAAW,CAAC,KAAK,CAAC;QAEvC,+BAA+B;QAE/B,UAAK,GAAY,SAAS,CAAC;QAE3B,oCAAoC;QAEpC,gBAAW,GAAwB,kBAAkB,CAAC,UAAU,CAAC;KAUlE;IARC,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, ComponentInterface, 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 implements ComponentInterface {\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-ghost-loading/index.js CHANGED Viewed

@@ -1,7 +1,7 @@
 import { h, Host } from "@stencil/core";
 export class ZGhostLoading {
     render() {
-        return h(Host, { key: 'a966fb0e58408172c56e7bb48deb1b5c0e5e0bb8' });
+        return h(Host, { key: '36459896003d9c65cc0e969a184987ddcac8c962' });
     }
     static get is() { return "z-ghost-loading"; }
     static get encapsulation() { return "shadow"; }
@@ -16,3 +16,4 @@ export class ZGhostLoading {
         };
     }
 }
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@

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

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

@@ -1,5 +1,7 @@
 import { Host, h } from "@stencil/core";
 import { COLOR_INDICATOR_ICONS, ICONS } from "../../constants/iconset";
+// https://regex101.com/r/ZnoZQ5/3
+const ICON_NAME_SUFFIX_REGEX = /^(.+?)(-transparent)?(-filled|-button)?$/;
 /**
  * Component to render an SVG icon from the internal icon set, selected by `name`.
  * This component automatically recognizes icons that have an indicator (e.g. `bg-color`, `font-color`, etc.), that can be filled with a custom color via the `indicatorColor` prop.
@@ -15,11 +17,38 @@ export class ZIcon {
         }
         return h("polygon", { points: iconValue });
     }
+    get hasColorIndicator() {
+        return COLOR_INDICATOR_ICONS.includes(this.name);
+    }
+    get needsTransparentIndicator() {
+        var _a;
+        return ["transparent", "#ffffff00"].includes((_a = this.indicatorColor) === null || _a === void 0 ? void 0 : _a.toLowerCase());
+    }
+    /**
+     * For icons with a color indicator, if `indicatorColor` is set to transparent, use a specific icon version without the color indicator.
+     * Using the icon without the color indicator prevents visual ambiguity between a transparent indicator and one filled with the background color.
+     * @returns The name of the corresponding icon without the indicator, or the original icon name if no transparent version is needed or available.
+     */
+    getTransparentIndicatorIconIfNeeded() {
+        var _a;
+        const transparentIconName = (_a = this.name) === null || _a === void 0 ? void 0 : _a.replace(ICON_NAME_SUFFIX_REGEX, "$1-transparent$3");
+        if (!this.hasColorIndicator || !this.needsTransparentIndicator || !ICONS[transparentIconName]) {
+            return this.name;
+        }
+        return transparentIconName;
+    }
+    /**
+     * Render the icon with the color indicator.
+     * The indicator is rendered as a separate SVG element behind the main icon, filled with the `indicatorColor`.
+     */
+    renderColorIndicator() {
+        return (h("svg", { class: "color-indicator", fill: this.indicatorColor || "#FFFFFF00", viewBox: "0 0 1000 1000", width: this.width, height: this.height, "aria-hidden": "true" }, this.selectPathOrPolygon(ICONS["picker-color"])));
+    }
     renderBaseIcon() {
-        return (h("svg", { id: this.iconid || undefined, fill: this.fill ? `var(--${this.fill})` : undefined, viewBox: "0 0 1000 1000", width: this.width, height: this.height }, this.selectPathOrPolygon(ICONS[this.name])));
+        return (h("svg", { id: this.iconid || undefined, fill: this.fill ? `var(--${this.fill})` : undefined, viewBox: "0 0 1000 1000", width: this.width, height: this.height, "aria-hidden": "true" }, this.selectPathOrPolygon(ICONS[this.getTransparentIndicatorIconIfNeeded()])));
     }
     render() {
-        return (h(Host, { key: '65da13cefdf22f1935d9e1dbc171522955b24f1b', "aria-hidden": "true" }, COLOR_INDICATOR_ICONS.includes(this.name) ? (h("div", { class: "icon-wrapper" }, h("svg", { class: "color-indicator", fill: this.indicatorColor || "#FFFFFF00", viewBox: "0 0 1000 1000", width: this.width, height: this.height }, this.selectPathOrPolygon(ICONS["picker-color"])), this.renderBaseIcon())) : (this.renderBaseIcon())));
+        return (h(Host, { key: 'a25f6701cc68dc9fbf9d14b4e8747d4ead9ee44b', "aria-hidden": "true" }, this.hasColorIndicator && !this.needsTransparentIndicator ? (h("div", { class: "icon-wrapper" }, this.renderColorIndicator(), this.renderBaseIcon())) : (this.renderBaseIcon())));
     }
     static get is() { return "z-icon"; }
     static get encapsulation() { return "shadow"; }
@@ -152,3 +181,4 @@ export class ZIcon {
         };
     }
 }
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@

+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/z-icon/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAsB,IAAI,EAAE,IAAI,EAAE,CAAC,EAAC,MAAM,eAAe,CAAC;AAC3E,OAAO,EAAC,qBAAqB,EAAE,KAAK,EAAC,MAAM,yBAAyB,CAAC;AAErE,kCAAkC;AAClC,MAAM,sBAAsB,GAAG,0CAA0C,CAAC;AAE1E;;;GAGG;AAMH,MAAM,OAAO,KAAK;IA6BhB;;;OAGG;IACK,mBAAmB,CAAC,SAAiB;QAC3C,IAAI,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAE,UAAU,CAAC,GAAG,CAAC,EAAE,CAAC;YAC/B,OAAO,YAAM,CAAC,EAAE,SAAS,GAAS,CAAC;QACrC,CAAC;QAED,OAAO,eAAS,MAAM,EAAE,SAAS,GAAY,CAAC;IAChD,CAAC;IAED,IAAY,iBAAiB;QAC3B,OAAO,qBAAqB,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IACnD,CAAC;IAED,IAAY,yBAAyB;;QACnC,OAAO,CAAC,aAAa,EAAE,WAAW,CAAC,CAAC,QAAQ,CAAC,MAAA,IAAI,CAAC,cAAc,0CAAE,WAAW,EAAE,CAAC,CAAC;IACnF,CAAC;IAED;;;;OAIG;IACK,mCAAmC;;QACzC,MAAM,mBAAmB,GAAG,MAAA,IAAI,CAAC,IAAI,0CAAE,OAAO,CAAC,sBAAsB,EAAE,kBAAkB,CAAC,CAAC;QAC3F,IAAI,CAAC,IAAI,CAAC,iBAAiB,IAAI,CAAC,IAAI,CAAC,yBAAyB,IAAI,CAAC,KAAK,CAAC,mBAAmB,CAAC,EAAE,CAAC;YAC9F,OAAO,IAAI,CAAC,IAAI,CAAC;QACnB,CAAC;QAED,OAAO,mBAAmB,CAAC;IAC7B,CAAC;IAED;;;OAGG;IACK,oBAAoB;QAC1B,OAAO,CACL,WACE,KAAK,EAAC,iBAAiB,EACvB,IAAI,EAAE,IAAI,CAAC,cAAc,IAAI,WAAW,EACxC,OAAO,EAAC,eAAe,EACvB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,MAAM,EAAE,IAAI,CAAC,MAAM,iBACP,MAAM,IAEjB,IAAI,CAAC,mBAAmB,CAAC,KAAK,CAAC,cAAc,CAAC,CAAC,CAC5C,CACP,CAAC;IACJ,CAAC;IAEO,cAAc;QACpB,OAAO,CACL,WACE,EAAE,EAAE,IAAI,CAAC,MAAM,IAAI,SAAS,EAC5B,IAAI,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,SAAS,IAAI,CAAC,IAAI,GAAG,CAAC,CAAC,CAAC,SAAS,EACnD,OAAO,EAAC,eAAe,EACvB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,MAAM,EAAE,IAAI,CAAC,MAAM,iBACP,MAAM,IAEjB,IAAI,CAAC,mBAAmB,CAAC,KAAK,CAAC,IAAI,CAAC,mCAAmC,EAAE,CAAC,CAAC,CACxE,CACP,CAAC;IACJ,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,oEAAa,MAAM,IACrB,IAAI,CAAC,iBAAiB,IAAI,CAAC,IAAI,CAAC,yBAAyB,CAAC,CAAC,CAAC,CAC3D,WAAK,KAAK,EAAC,cAAc;YACtB,IAAI,CAAC,oBAAoB,EAAE;YAC3B,IAAI,CAAC,cAAc,EAAE,CAClB,CACP,CAAC,CAAC,CAAC,CACF,IAAI,CAAC,cAAc,EAAE,CACtB,CACI,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {Component, ComponentInterface, Host, Prop, h} from \"@stencil/core\";\nimport {COLOR_INDICATOR_ICONS, ICONS} from \"../../constants/iconset\";\n\n// https://regex101.com/r/ZnoZQ5/3\nconst ICON_NAME_SUFFIX_REGEX = /^(.+?)(-transparent)?(-filled|-button)?$/;\n\n/**\n * Component to render an SVG icon from the internal icon set, selected by `name`.\n * This component automatically recognizes icons that have an indicator (e.g. `bg-color`, `font-color`, etc.), that can be filled with a custom color via the `indicatorColor` prop.\n */\n@Component({\n tag: \"z-icon\",\n styleUrl: \"styles.css\",\n shadow: true,\n})\nexport class ZIcon implements ComponentInterface {\n /** Icon name */\n @Prop()\n name: string;\n\n /** Icon height (optional) */\n @Prop()\n height?: number | string;\n\n /** Icon width (optional) */\n @Prop()\n width?: number | string;\n\n /** HTML `id` attribute (optional) */\n @Prop()\n iconid?: string;\n\n /** Name of the CSS color token to use for the icon fill color (e.g. `blue500`). */\n @Prop()\n fill?: string;\n\n /**\n * Color to use to fill the icon's color indicator, if it has one.\n * Can be any valid value for the `fill` svg attribute.\n * If the icon passed through the `name` prop doesn't have a color indicator, this prop has no effect.\n */\n @Prop()\n indicatorColor?: string;\n\n /**\n * Selects either a `<path>` or `<polygon>` element based on the format of the icon data.\n * @param iconValue The SVG path data or polygon points from the ICONS set.\n */\n private selectPathOrPolygon(iconValue: string): SVGPathElement | SVGPolygonElement {\n if (iconValue?.startsWith(\"M\")) {\n return <path d={iconValue}></path>;\n }\n\n return <polygon points={iconValue}></polygon>;\n }\n\n private get hasColorIndicator(): boolean {\n return COLOR_INDICATOR_ICONS.includes(this.name);\n }\n\n private get needsTransparentIndicator(): boolean {\n return [\"transparent\", \"#ffffff00\"].includes(this.indicatorColor?.toLowerCase());\n }\n\n /**\n * For icons with a color indicator, if `indicatorColor` is set to transparent, use a specific icon version without the color indicator.\n * Using the icon without the color indicator prevents visual ambiguity between a transparent indicator and one filled with the background color.\n * @returns The name of the corresponding icon without the indicator, or the original icon name if no transparent version is needed or available.\n */\n private getTransparentIndicatorIconIfNeeded(): string {\n const transparentIconName = this.name?.replace(ICON_NAME_SUFFIX_REGEX, \"$1-transparent$3\");\n if (!this.hasColorIndicator || !this.needsTransparentIndicator || !ICONS[transparentIconName]) {\n return this.name;\n }\n\n return transparentIconName;\n }\n\n /**\n * Render the icon with the color indicator.\n * The indicator is rendered as a separate SVG element behind the main icon, filled with the `indicatorColor`.\n */\n private renderColorIndicator(): SVGElement {\n return (\n <svg\n class=\"color-indicator\"\n fill={this.indicatorColor || \"#FFFFFF00\"}\n viewBox=\"0 0 1000 1000\"\n width={this.width}\n height={this.height}\n aria-hidden=\"true\"\n >\n {this.selectPathOrPolygon(ICONS[\"picker-color\"])}\n </svg>\n );\n }\n\n private renderBaseIcon(): SVGElement {\n return (\n <svg\n id={this.iconid || undefined}\n fill={this.fill ? `var(--${this.fill})` : undefined}\n viewBox=\"0 0 1000 1000\"\n width={this.width}\n height={this.height}\n aria-hidden=\"true\"\n >\n {this.selectPathOrPolygon(ICONS[this.getTransparentIndicatorIconIfNeeded()])}\n </svg>\n );\n }\n\n render(): HTMLZIconElement {\n return (\n <Host aria-hidden=\"true\">\n {this.hasColorIndicator && !this.needsTransparentIndicator ? (\n <div class=\"icon-wrapper\">\n {this.renderColorIndicator()}\n {this.renderBaseIcon()}\n </div>\n ) : (\n this.renderBaseIcon()\n )}\n </Host>\n );\n }\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: 'fd98793fba98d03112f68de408227ecc8576ff1d', id: this.boxid }, h("slot", { key: '2bee1952cbc660bb9ff8bdbd0945e01f9204e019', name: "content" }), this.isclosable && (h("z-icon", { key: 'ec6380fd48bb52fb1aabca5d22af5641be539cf4', name: "multiply", "data-action": "infoBoxClose", onClick: () => this.emitInfoBoxClose() }))));
+        return (h("div", { key: 'c3062d082fff5558ebcc44b6c15feaa9d4fdf9f9', id: this.boxid }, h("slot", { key: 'd4d4b0bdb644a777c22489afa52c990748bf1da7', name: "content" }), this.isclosable && (h("z-icon", { key: '4b02226c9a11e800ad1ac956471683f4546d39c3', name: "multiply", "data-action": "infoBoxClose", onClick: () => this.emitInfoBoxClose() }))));
     }
     static get is() { return "z-info-box"; }
     static get encapsulation() { return "shadow"; }
@@ -87,3 +87,4 @@ export class ZInfoBox {
             }];
     }
 }
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@

+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/z-info-box/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAsB,KAAK,EAAgB,IAAI,EAAE,CAAC,EAAC,MAAM,eAAe,CAAC;AAE1F;;GAEG;AAMH,MAAM,OAAO,QAAQ;IALrB;QAUE,6BAA6B;QAE7B,eAAU,GAAG,IAAI,CAAC;KAwBnB;IAlBS,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, ComponentInterface, 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 implements ComponentInterface {\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-reveal/index.js CHANGED Viewed

@@ -4,10 +4,6 @@ import { ControlSize, InfoRevealPosition } from "../../beans";
  * Info reveal component.
  *
  * @slot - content of the info panel.
- * @cssprop --z-info-reveal-panel-width - Width of the info panel.
- * @cssprop --trigger-icon-size - Size of the trigger icon for big size.
- * @cssprop --trigger-icon-size-small - Size of the trigger icon for small size.
- * @cssprop --trigger-icon-size-x-small - Size of the trigger icon for x-small size.
  */
 export class ZInfoReveal {
     constructor() {
@@ -58,7 +54,7 @@ export class ZInfoReveal {
         }
     }
     render() {
-        return (h(Host, { key: '50e7cc3742371ca616f404374f63ccb337c3dc39', open: this.open }, h("button", { key: '906bdf2f949f4ae715ecc746e6e1feab8bf4d797', 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: 'a4e890d446384c742df05db58a906b89e536f4e4', name: this.icon }), this.label && h("span", { key: 'b9955cb8ed95ecef6904d1cd4c8c9d08205b33c3', class: "z-info-reveal-label" }, this.label)), h("div", { key: '8c1d601f8e15f7f6dcd9cf235ff00ad251aaec54', class: "z-info-reveal-panel", id: "z-info-reveal-panel", ref: (el) => (this.panel = el), hidden: !this.open }, h("slot", { key: 'c0f217e35810e1463d1f0761337353ea3940cc2b' }), h("button", { key: '6e507a1e6424c88dc90bf3fb9a841565d5bc6c6c', class: "z-info-reveal-close", type: "button", onClick: this.closePanel.bind(this), "aria-label": "Chiudi pannello informazioni" }, h("z-icon", { key: 'd743f3aae62e253580122d556b933936b316c391', name: "multiply" })))));
+        return (h(Host, { key: 'f9bc69d9bdbc9b2e30687f54877b241b51df3e45', open: this.open }, h("button", { key: 'f0dc5ceaf6f24d5597699b3158074403bac8f641', 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: '5cddcacfd8d9e5f3dc8a1c171aa50621d6e2b044', name: this.icon }), this.label && h("span", { key: '5417e101306098a399a9f8e6a39d1637be4f8901', class: "z-info-reveal-label" }, this.label)), h("div", { key: 'bd57a9686560c17c5d670a6fa87396a509ffb50a', class: "z-info-reveal-panel", id: "z-info-reveal-panel", ref: (el) => (this.panel = el), hidden: !this.open }, h("slot", { key: 'bd5fd2a1cf9c2a95fbb9ea966a0f09ec1940c9f9' }), h("button", { key: '73a9178e3ea240abad5d91f2fd82879313d2df24', class: "z-info-reveal-close", type: "button", onClick: this.closePanel.bind(this), "aria-label": "Chiudi pannello informazioni" }, h("z-icon", { key: 'de404809d5ea1fd51b36abc74518448c7502927e', name: "multiply" })))));
     }
     static get is() { return "z-info-reveal"; }
     static get encapsulation() { return "shadow"; }
@@ -220,3 +216,4 @@ export class ZInfoReveal {
             }];
     }
 }
+//# sourceMappingURL=index.js.map