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

@zanichelli/albe-web-components 13.2.0-rc1 → 13.2.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 (126) hide show

package/dist/cjs/z-carousel.cjs.entry.js CHANGED Viewed

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-dc60bee7.js');
 const index$1 = require('./index-39ce4edf.js');
-const stylesCss = ":host{font-family:var(--font-family-sans);font-weight:var(--font-rg);--z-carousel-gutter:0}:host([single]){display:flex;flex-direction:column;align-items:center;justify-content:center}:host([single]) .z-carousel-container{width:fit-content;max-width:100%}.z-carousel-container{display:flex;flex-direction:column}.z-carousel-title{margin-bottom:calc(var(--space-unit) * 2)}.z-carousel-wrapper{position:relative}.z-carousel-items-container{display:flex;max-width:100%;flex-direction:row;margin:0;column-gap:var(--z-carousel-gutter);list-style:none;-ms-overflow-style:none;overflow-x:scroll;padding-inline-start:0;scroll-behavior:smooth;scroll-snap-type:x mandatory;scrollbar-width:none;}.z-carousel-items-container::-webkit-scrollbar{display:none}.z-carousel-items-container ::slotted(*){scroll-snap-align:center}.z-carousel-navigation-arrow[hidden]{display:none}.z-carousel-navigation-arrow[data-direction]{position:absolute;bottom:50%;transform:translateY(50%)}.z-carousel-navigation-arrow[data-direction=\"next\"]{right:0}:host(:not([fixed-arrows])) .z-carousel-wrapper .z-carousel-navigation-arrow{display:none}.z-carousel-footer{display:flex;flex-direction:row;align-items:center;justify-content:center;column-gap:calc(var(--space-unit) * 3)}:host([arrows-position=\"bottom\"]) .z-carousel-footer{margin-top:calc(var(--space-unit) * 0.75)}.z-carousel-footer .numbers-progress,.z-carousel-footer .dots-progress{display:flex;align-items:center;justify-content:center}.z-carousel-footer .dots-progress{column-gap:calc(var(--space-unit) * 3)}:host(:not([arrows-position=\"bottom\"])) .z-carousel-footer .dots-progress{margin-top:calc(var(--space-unit) * 2)}.z-carousel-footer .dots-progress button{display:flex;width:calc(var(--space-unit) * 3);height:calc(var(--space-unit) * 3);align-items:center;padding:0;border:none;margin:0;background-color:var(--color-surface03);border-radius:calc(var(--space-unit) * 3)}.z-carousel-footer .dots-progress button.current{background-color:var(--color-primary01)}.z-carousel-footer .dots-progress button:focus:focus-visible{box-shadow:var(--shadow-focus-primary);outline:none}.z-carousel-footer .dots-progress button:not(.current){cursor:pointer}.z-carousel-footer .numbers-progress{column-gap:calc(var(--space-unit) / 2)}:host(:not([arrows-position=\"bottom\"])) .z-carousel-footer .numbers-progress{margin-top:var(--space-unit)}.z-carousel-footer .numbers-progress .current{font-weight:var(--font-sb)}@media (min-width: 768px){:host(:not([fixed-arrows])) .z-carousel-wrapper:hover .z-carousel-navigation-arrow:not([hidden]){display:flex}}";
+const stylesCss = ":host{font-family:var(--font-family-sans);font-weight:var(--font-rg);--z-carousel-gutter:0;}:host([single]){display:flex;flex-direction:column;align-items:center;justify-content:center}:host([single]) .z-carousel-container{width:fit-content;max-width:100%}.z-carousel-container{display:flex;flex-direction:column}.z-carousel-title{margin-bottom:calc(var(--space-unit) * 2)}.z-carousel-wrapper{position:relative}.z-carousel-items-container{display:flex;max-width:100%;flex-direction:row;margin:0;box-shadow:var(--z-carousel-items-shadow, none);column-gap:var(--z-carousel-gutter);list-style:none;-ms-overflow-style:none;overflow-x:scroll;padding-inline-start:0;scroll-behavior:smooth;scroll-snap-type:x mandatory;scrollbar-width:none;}.z-carousel-items-container::-webkit-scrollbar{display:none}.z-carousel-items-container ::slotted(*){scroll-snap-align:center}.z-carousel-navigation-arrow[hidden]{display:none}.z-carousel-navigation-arrow[data-direction]{position:absolute;z-index:1;bottom:50%;transform:translateY(50%)}.z-carousel-navigation-arrow[data-direction=\"next\"]{right:0}:host(:not([fixed-arrows])) .z-carousel-wrapper .z-carousel-navigation-arrow{display:none}.z-carousel-footer{display:flex;flex-direction:row;align-items:center;justify-content:center;column-gap:calc(var(--space-unit) * 3)}:host([arrows-position=\"bottom\"]) .z-carousel-footer{margin-top:calc(var(--space-unit) * 0.75)}.z-carousel-footer .numbers-progress,.z-carousel-footer .dots-progress{display:flex;align-items:center;justify-content:center}.z-carousel-footer .dots-progress{column-gap:calc(var(--space-unit) * 3)}:host(:not([arrows-position=\"bottom\"])) .z-carousel-footer .dots-progress{margin-top:calc(var(--space-unit) * 2)}.z-carousel-footer .dots-progress button{display:flex;width:calc(var(--space-unit) * 3);height:calc(var(--space-unit) * 3);align-items:center;padding:0;border:none;margin:0;background-color:var(--color-surface03);border-radius:calc(var(--space-unit) * 3)}.z-carousel-footer .dots-progress button.current{background-color:var(--color-primary01)}.z-carousel-footer .dots-progress button:focus:focus-visible{box-shadow:var(--shadow-focus-primary);outline:none}.z-carousel-footer .dots-progress button:not(.current){cursor:pointer}.z-carousel-footer .numbers-progress{column-gap:calc(var(--space-unit) / 2)}:host(:not([arrows-position=\"bottom\"])) .z-carousel-footer .numbers-progress{margin-top:var(--space-unit)}.z-carousel-footer .numbers-progress .current{font-weight:var(--font-sb)}@media (min-width: 768px){:host(:not([fixed-arrows])) .z-carousel-wrapper:hover .z-carousel-navigation-arrow:not([hidden]){display:flex}}";
 const ZCarouselStyle0 = stylesCss;
 const ZCarousel = class {
@@ -151,7 +151,8 @@ const ZCarousel = class {
         });
     }
     componentDidLoad() {
-        this.itemsContainer.addEventListener("scroll", this.checkNavigationValidity.bind(this), { passive: true });
+        var _a;
+        (_a = this.itemsContainer) === null || _a === void 0 ? void 0 : _a.addEventListener("scroll", this.checkNavigationValidity.bind(this), { passive: true });
         this.resizeObserver = new ResizeObserver(this.checkNavigationValidity.bind(this));
         this.resizeObserver.observe(this.itemsContainer);
         this.setupItems();

package/dist/cjs/z-carousel.cjs.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"z-carousel.entry.cjs.js","mappings":"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","names":["CarouselArrowsPosition","CarouselProgressMode","h","Host","ButtonVariant","index"],"sources":["src/components/z-carousel/styles.css?tag=z-carousel&encapsulation=shadow","src/components/z-carousel/index.tsx"],"sourcesContent":[":host {\n font-family: var(--font-family-sans);\n font-weight: var(--font-rg);\n\n --z-carousel-gutter: 0;\n}\n\n:host([single]) {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n}\n\n:host([single]) .z-carousel-container {\n width: fit-content;\n max-width: 100%;\n}\n\n.z-carousel-container {\n display: flex;\n flex-direction: column;\n}\n\n.z-carousel-title {\n margin-bottom: calc(var(--space-unit) * 2);\n}\n\n.z-carousel-wrapper {\n position: relative;\n}\n\n.z-carousel-items-container {\n display: flex;\n max-width: 100%;\n flex-direction: row;\n margin: 0;\n column-gap: var(--z-carousel-gutter);\n list-style: none;\n -ms-overflow-style: none; /* IE and Edge /\n overflow-x: scroll;\n padding-inline-start: 0;\n scroll-behavior: smooth;\n scroll-snap-type: x mandatory;\n\n / Hide scrollbar for IE, Edge and Firefox /\n scrollbar-width: none; / Firefox /\n}\n\n/ Hide scrollbar for Chrome, Safari and Opera /\n.z-carousel-items-container::-webkit-scrollbar {\n display: none;\n}\n\n.z-carousel-items-container ::slotted() {\n scroll-snap-align: center;\n}\n\n.z-carousel-navigation-arrow[hidden] {\n display: none;\n}\n\n.z-carousel-navigation-arrow[data-direction] {\n position: absolute;\n bottom: 50%;\n transform: translateY(50%);\n}\n\n.z-carousel-navigation-arrow[data-direction=\"next\"] {\n right: 0;\n}\n\n:host(:not([fixed-arrows])) .z-carousel-wrapper .z-carousel-navigation-arrow {\n display: none;\n}\n\n.z-carousel-footer {\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: center;\n column-gap: calc(var(--space-unit) * 3);\n}\n\n:host([arrows-position=\"bottom\"]) .z-carousel-footer {\n margin-top: calc(var(--space-unit) * 0.75);\n}\n\n.z-carousel-footer .numbers-progress,\n.z-carousel-footer .dots-progress {\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.z-carousel-footer .dots-progress {\n column-gap: calc(var(--space-unit) * 3);\n}\n\n:host(:not([arrows-position=\"bottom\"])) .z-carousel-footer .dots-progress {\n margin-top: calc(var(--space-unit) * 2);\n}\n\n.z-carousel-footer .dots-progress button {\n display: flex;\n width: calc(var(--space-unit) * 3);\n height: calc(var(--space-unit) * 3);\n align-items: center;\n padding: 0;\n border: none;\n margin: 0;\n background-color: var(--color-surface03);\n border-radius: calc(var(--space-unit) * 3);\n}\n\n.z-carousel-footer .dots-progress button.current {\n background-color: var(--color-primary01);\n}\n\n.z-carousel-footer .dots-progress button:focus:focus-visible {\n box-shadow: var(--shadow-focus-primary);\n outline: none;\n}\n\n.z-carousel-footer .dots-progress button:not(.current) {\n cursor: pointer;\n}\n\n.z-carousel-footer .numbers-progress {\n column-gap: calc(var(--space-unit) / 2);\n}\n\n:host(:not([arrows-position=\"bottom\"])) .z-carousel-footer .numbers-progress {\n margin-top: var(--space-unit);\n}\n\n.z-carousel-footer .numbers-progress .current {\n font-weight: var(--font-sb);\n}\n\n@media (min-width: 768px) {\n :host(:not([fixed-arrows])) .z-carousel-wrapper:hover .z-carousel-navigation-arrow:not([hidden]) {\n display: flex;\n }\n}\n","import {Component, h, Prop, Element, Watch, Event, EventEmitter, State, Host} from \"@stencil/core\";\nimport {CarouselArrowsPosition, CarouselProgressMode, ButtonVariant} from \"../../beans\";\n\n/*\n ZCarousel component.\n * @cssprop --z-carousel-gutter - The gutter between items.\n * @slot - Carousel items. Use `<li>` elements inside this slot.\n /\n@Component({\n tag: \"z-carousel\",\n styleUrl: \"styles.css\",\n shadow: true,\n})\nexport class ZCarousel {\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 /\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(\"role\", \"group\");\n item.setAttribute(\"aria-roledescription\", \"slide\");\n });\n }\n\n componentDidLoad(): void {\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 this.setupItems();\n if (this.single) {\n this.setIntersectionObserver();\n }\n this.checkNavigationValidity();\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 role=\"group\"\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"],"version":3}
1	+ {"file":"z-carousel.entry.cjs.js","mappings":"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","names":["CarouselArrowsPosition","CarouselProgressMode","h","Host","ButtonVariant","index"],"sources":["src/components/z-carousel/styles.css?tag=z-carousel&encapsulation=shadow","src/components/z-carousel/index.tsx"],"sourcesContent":[":host {\n font-family: var(--font-family-sans);\n font-weight: var(--font-rg);\n\n --z-carousel-gutter: 0;\n --z-carousel-items-shadow: ;\n}\n\n:host([single]) {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n}\n\n:host([single]) .z-carousel-container {\n width: fit-content;\n max-width: 100%;\n}\n\n.z-carousel-container {\n display: flex;\n flex-direction: column;\n}\n\n.z-carousel-title {\n margin-bottom: calc(var(--space-unit) * 2);\n}\n\n.z-carousel-wrapper {\n position: relative;\n}\n\n.z-carousel-items-container {\n display: flex;\n max-width: 100%;\n flex-direction: row;\n margin: 0;\n box-shadow: var(--z-carousel-items-shadow, none);\n column-gap: var(--z-carousel-gutter);\n list-style: none;\n -ms-overflow-style: none; /* IE and Edge /\n overflow-x: scroll;\n padding-inline-start: 0;\n scroll-behavior: smooth;\n scroll-snap-type: x mandatory;\n\n / Hide scrollbar for IE, Edge and Firefox /\n scrollbar-width: none; / Firefox /\n}\n\n/ Hide scrollbar for Chrome, Safari and Opera /\n.z-carousel-items-container::-webkit-scrollbar {\n display: none;\n}\n\n.z-carousel-items-container ::slotted() {\n scroll-snap-align: center;\n}\n\n.z-carousel-navigation-arrow[hidden] {\n display: none;\n}\n\n.z-carousel-navigation-arrow[data-direction] {\n position: absolute;\n z-index: 1;\n bottom: 50%;\n transform: translateY(50%);\n}\n\n.z-carousel-navigation-arrow[data-direction=\"next\"] {\n right: 0;\n}\n\n:host(:not([fixed-arrows])) .z-carousel-wrapper .z-carousel-navigation-arrow {\n display: none;\n}\n\n.z-carousel-footer {\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: center;\n column-gap: calc(var(--space-unit) * 3);\n}\n\n:host([arrows-position=\"bottom\"]) .z-carousel-footer {\n margin-top: calc(var(--space-unit) * 0.75);\n}\n\n.z-carousel-footer .numbers-progress,\n.z-carousel-footer .dots-progress {\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.z-carousel-footer .dots-progress {\n column-gap: calc(var(--space-unit) * 3);\n}\n\n:host(:not([arrows-position=\"bottom\"])) .z-carousel-footer .dots-progress {\n margin-top: calc(var(--space-unit) * 2);\n}\n\n.z-carousel-footer .dots-progress button {\n display: flex;\n width: calc(var(--space-unit) * 3);\n height: calc(var(--space-unit) * 3);\n align-items: center;\n padding: 0;\n border: none;\n margin: 0;\n background-color: var(--color-surface03);\n border-radius: calc(var(--space-unit) * 3);\n}\n\n.z-carousel-footer .dots-progress button.current {\n background-color: var(--color-primary01);\n}\n\n.z-carousel-footer .dots-progress button:focus:focus-visible {\n box-shadow: var(--shadow-focus-primary);\n outline: none;\n}\n\n.z-carousel-footer .dots-progress button:not(.current) {\n cursor: pointer;\n}\n\n.z-carousel-footer .numbers-progress {\n column-gap: calc(var(--space-unit) / 2);\n}\n\n:host(:not([arrows-position=\"bottom\"])) .z-carousel-footer .numbers-progress {\n margin-top: var(--space-unit);\n}\n\n.z-carousel-footer .numbers-progress .current {\n font-weight: var(--font-sb);\n}\n\n@media (min-width: 768px) {\n :host(:not([fixed-arrows])) .z-carousel-wrapper:hover .z-carousel-navigation-arrow:not([hidden]) {\n display: flex;\n }\n}\n","import {Component, h, Prop, Element, Watch, Event, EventEmitter, State, Host} from \"@stencil/core\";\nimport {CarouselArrowsPosition, CarouselProgressMode, ButtonVariant} from \"../../beans\";\n\n/*\n ZCarousel component.\n * @cssprop --z-carousel-gutter - The gutter between items.\n * @cssprop --z-carousel-items-shadow - The shadow around the items.\n * @slot - Carousel items. Use `<li>` elements inside this slot.\n /\n@Component({\n tag: \"z-carousel\",\n styleUrl: \"styles.css\",\n shadow: true,\n})\nexport class ZCarousel {\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 /\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(\"role\", \"group\");\n item.setAttribute(\"aria-roledescription\", \"slide\");\n });\n }\n\n componentDidLoad(): void {\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 this.setupItems();\n if (this.single) {\n this.setIntersectionObserver();\n }\n this.checkNavigationValidity();\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 role=\"group\"\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"],"version":3}

package/dist/cjs/z-combobox.cjs.entry.js CHANGED Viewed

@@ -7,7 +7,7 @@ const index$1 = require('./index-39ce4edf.js');
 const utils = require('./utils-d0b10736.js');
 require('./breakpoints-5c22092a.js');
-const stylesCss = ":host{display:block;font-family:var(--font-family-sans)}:host>div.fixed{position:relative}:host>div>.header{position:relative;z-index:10;display:flex;min-height:42px;align-items:center;justify-content:space-between;padding:0 calc(var(--space-unit) * 1.5);border:var(--border-size-small) solid var(--color-surface04);margin:0;background-color:var(--color-input-field01);border-radius:var(--border-radius-small);cursor:pointer}:host([size=\"small\"])>div>.header{min-height:34px;font-size:var(--font-size-2)}:host([size=\"x-small\"])>div>.header{min-height:30px;font-size:var(--font-size-2)}:host([size=\"x-small\"])>div>.header p.body-3{padding:calc(var(--space-unit) * 0.5) 0}:host>div>.header:hover{outline:var(--border-size-medium) solid var(--color-surface04);outline-offset:-2px}:host>div.open>div.header:focus:focus-visible{box-shadow:none}:host>div>div.header:focus:focus-visible{box-shadow:var(--shadow-focus-primary);outline:none}:host>div>.header>p.body-3{padding:var(--space-unit) 0;margin:0;color:var(--color-text01)}:host>div>.header>p.body-3>span{font-weight:var(--font-sb)}:host>div>.header>z-icon{fill:var(--color-icon02);transform:rotate(360deg);transition:all 200ms linear}:host>div>.header>z-icon.small,:host>div>.header>z-icon.x-small{--z-icon-width:16px;--z-icon-height:16px}:host>div.open>.header{border:var(--border-size-small) solid var(--color-primary01);border-radius:var(--border-radius-small) var(--border-radius-small) 0 0}:host>div.disabled{pointer-events:none}:host>div.disabled .header{border-color:var(--color-disabled01);fill:var(--color-disabled01)}:host>div.disabled .header>p.body-3{color:var(--color-disabled02)}:host>div.disabled .header>z-icon:last-child{fill:var(--color-disabled01)}:host>div.open>.header>z-icon{fill:var(--color-icon02);transform:rotate(180deg);transition:all 200ms linear}:host>div.open>div.open-combo-data{position:relative;z-index:12;padding:var(--space-unit) calc(var(--space-unit) * 2);border:var(--border-size-small) solid var(--gray200);border-top:0;background-color:var(--color-input-field01);border-radius:0}:host>div.open>div.open-combo-data>div>div{overflow:auto;max-height:235px;padding:0;scrollbar-color:var(--color-primary01) transparent}:host>div.open>div.open-combo-data>z-input{width:100%;margin-bottom:calc(var(--space-unit) * 2)}:host>div.open>div.open-combo-data>div>div>ul{max-height:235px;padding:0 3px;margin:0}::-webkit-scrollbar{width:10px;background:linear-gradient(to right, transparent 0 3px, var(--gray200) 3px 7px, transparent 7px 10px);border-radius:var(--border-radius)}::-webkit-scrollbar-thumb{width:10px;background-color:var(--color-primary01)}:host>div.open>z-input{position:relative;z-index:1;width:238px;margin:0 calc(var(--space-unit) * 2);color:var(--color-primary01)}:host>div.open>div.open-combo-data>div>div.search{overflow:hidden;max-height:auto;margin-top:0;box-shadow:1px 1px 4px 2px rgb(217 222 227 / 50%)}:host>div.open>div.open-combo-data>div>div.search>ul{overflow:auto;max-height:180px;padding:var(--space-unit) calc(var(--space-unit) * 2);scrollbar-color:var(--color-primary01) transparent}:host>div.open>div.open-combo-data>div>div.search>div{display:flex;justify-content:center}:host>div.open>div.open-combo-data>div>div.search>div>a{display:inline-block;height:44px;color:var(--color-primary01);cursor:pointer;font-size:14px;font-weight:var(--font-sb);line-height:44px;text-align:center;text-transform:uppercase}: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);margin-bottom:var(--space-unit);text-align:left}:host([size=\"small\"])>div.open>div.open-combo-data>div>div.check-all-wrapper{padding:calc(var(--space-unit) * 1.5) calc(var(--space-unit) * 0.5)}:host([size=\"x-small\"])>div.open>div.open-combo-data>div>div.check-all-wrapper{padding:var(--space-unit) calc(var(--space-unit) * 0.5)}";
+const stylesCss = ":host{display:block}:host>div.fixed{position:relative}:host>div>.header{position:relative;z-index:10;display:flex;min-height:42px;align-items:center;justify-content:space-between;padding:0 calc(var(--space-unit) * 1.5);border:var(--border-size-small) solid var(--color-surface04);margin:0;background-color:var(--color-input-field01);border-radius:var(--border-radius-small);cursor:pointer}:host([size=\"small\"])>div>.header{min-height:34px;font-size:var(--font-size-2)}:host([size=\"x-small\"])>div>.header{min-height:30px;font-size:var(--font-size-2)}:host([size=\"x-small\"])>div>.header p.body-3{padding:calc(var(--space-unit) * 0.5) 0}:host>div>.header:hover{outline:var(--border-size-medium) solid var(--color-surface04);outline-offset:-2px}:host>div.open>div.header:focus:focus-visible{box-shadow:none}:host>div>div.header:focus:focus-visible{box-shadow:var(--shadow-focus-primary);outline:none}:host>div>.header>p.body-3{padding:var(--space-unit) 0;margin:0;color:var(--color-text01)}:host>div>.header>p.body-3>span{font-weight:var(--font-sb)}:host>div>.header>z-icon{fill:var(--color-icon02);transform:rotate(360deg);transition:all 200ms linear}:host>div>.header>z-icon.small,:host>div>.header>z-icon.x-small{--z-icon-width:16px;--z-icon-height:16px}:host>div.open>.header{border:var(--border-size-small) solid var(--color-primary01);border-radius:var(--border-radius-small) var(--border-radius-small) 0 0}:host>div.disabled{pointer-events:none}:host>div.disabled .header{border-color:var(--color-disabled01);fill:var(--color-disabled01)}:host>div.disabled .header>p.body-3{color:var(--color-disabled02)}:host>div.disabled .header>z-icon:last-child{fill:var(--color-disabled01)}:host>div.open>.header>z-icon{fill:var(--color-icon02);transform:rotate(180deg);transition:all 200ms linear}:host>div.open>div.open-combo-data{position:relative;z-index:12;padding:var(--space-unit) calc(var(--space-unit) * 2);border:var(--border-size-small) solid var(--gray200);border-top:0;background-color:var(--color-input-field01);border-radius:0}:host>div.open>div.open-combo-data>div{overflow:auto;max-height:235px;padding:0;scrollbar-color:var(--color-primary01) transparent}:host>div.open>div.open-combo-data>z-input{width:100%;margin-bottom:calc(var(--space-unit) * 2)}:host>div.open>div.open-combo-data>div>ul{max-height:235px;padding:0 3px;margin:0}::-webkit-scrollbar{width:10px;background:linear-gradient(to right, transparent 0 3px, var(--gray200) 3px 7px, transparent 7px 10px);border-radius:var(--border-radius)}::-webkit-scrollbar-thumb{width:10px;background-color:var(--color-primary01)}:host>div.open>z-input{position:relative;z-index:1;width:238px;margin:0 calc(var(--space-unit) * 2);color:var(--color-primary01)}:host>div.open>div.open-combo-data>div.search{overflow:hidden;max-height:auto;margin-top:0;box-shadow:1px 1px 4px 2px rgb(217 222 227 / 50%)}:host>div.open>div.open-combo-data>div.search>ul{overflow:auto;max-height:180px;padding:var(--space-unit) calc(var(--space-unit) * 2);scrollbar-color:var(--color-primary01) transparent}:host>div.open>div.open-combo-data>div.search>div{display:flex;justify-content:center}:host>div.open>div.open-combo-data>div.search>div>a{display:inline-block;height:44px;color:var(--color-primary01);cursor:pointer;font-family:var(--font-family-sans);font-size:14px;font-weight:var(--font-sb);line-height:44px;text-align:center;text-transform:uppercase}:host>div.open>div.open-combo-data>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);margin-bottom:var(--space-unit);text-align:left}:host([size=\"small\"])>div.open>div.open-combo-data>div.check-all-wrapper{padding:calc(var(--space-unit) * 1.5) calc(var(--space-unit) * 0.5)}:host([size=\"x-small\"])>div.open>div.open-combo-data>div.check-all-wrapper{padding:var(--space-unit) calc(var(--space-unit) * 0.5)}";
 const ZComboboxStyle0 = stylesCss;
 const ZCombobox = class {
@@ -18,13 +18,20 @@ const ZCombobox = class {
     }
     watchSearchValue() {
         this.filterItems(this.searchValue);
-        const elem = this.element.shadowRoot.querySelector(`.${this.getCheckboxClass()} input`);
-        if (elem) {
-            elem.setAttribute("tabindex", "0");
-        }
     }
-    getFocusedItemHandler(e) {
-        this.focusedItemId = e.detail;
+    inputCheckListener(e) {
+        const id = e.detail.id.replace(`combo-checkbox-${this.inputid}-`, "");
+        if (id === "check-all" && (!this.maxcheckableitems || this.maxcheckableitems >= this.itemsList.length)) {
+            return this.checkAll(e.detail.checked);
+        }
+        this.itemsList = this.itemsList.map((item) => {
+            if (item.id === id) {
+                item.checked = e.detail.checked;
+            }
+            return item;
+        });
+        this.updateRenderItemsList();
+        this.emitComboboxChange();
     }
     emitComboboxChange() {
         this.comboboxChange.emit({ id: this.inputid, items: this.itemsList });
@@ -55,7 +62,6 @@ const ZCombobox = class {
         this.searchValue = undefined;
         this.selectedCounter = undefined;
         this.renderItemsList = [];
-        this.focusedItemId = undefined;
         this.toggleComboBox = this.toggleComboBox.bind(this);
         this.closeFilterItems = this.closeFilterItems.bind(this);
     }
@@ -65,101 +71,6 @@ const ZCombobox = class {
     componentWillRender() {
         this.selectedCounter = this.itemsList.filter((item) => item.checked).length;
     }
-    getControlToListSize() {
-        let size;
-        switch (this.size) {
-            case index$1.ControlSize.BIG:
-                size = index$1.ListSize.LARGE;
-                break;
-            case index$1.ControlSize.SMALL:
-                size = index$1.ListSize.SMALL;
-                break;
-            case index$1.ControlSize.X_SMALL:
-                size = index$1.ListSize.SMALL;
-                break;
-            default:
-                size = index$1.ListSize.MEDIUM;
-        }
-        return size;
-    }
-    getItemId(item) {
-        return `combo-checkbox-${this.inputid}-${item.id}`;
-    }
-    getCheckboxClass() {
-        return `combo-item-checkbox-input-${this.inputid}`;
-    }
-    getCheckAllId() {
-        return `combo-checkbox-${this.inputid}-check-all`;
-    }
-    hasCheckAllDisabled() {
-        return this.maxcheckableitems && this.maxcheckableitems < this.itemsList.length;
-    }
-    resetInputTabIndex() {
-        this.element.shadowRoot.querySelectorAll(`.${this.getCheckboxClass()} input`).forEach(function (item) {
-            item.setAttribute("tabindex", "-1");
-        });
-    }
-    setInputTabIndex(itemId, index) {
-        if (index === 0) {
-            if (!this.hascheckall ||
-                (this.hascheckall && this.searchValue) ||
-                (this.hascheckall && this.hasCheckAllDisabled())) {
-                return 0;
-            }
-        }
-        return itemId === this.focusedItemId ? 0 : -1;
-    }
-    handleSelectArrowsNavigation(e, key) {
-        let index = key;
-        this.resetInputTabIndex();
-        this.focusComboboxItem(index);
-        const arrows = [index$1.KeyboardCode.ARROW_DOWN, index$1.KeyboardCode.ARROW_UP];
-        if (!arrows.includes(e.key) || !this.isopen) {
-            return;
-        }
-        e.preventDefault();
-        e.stopPropagation();
-        const firstCheckbox = this.hascheckall && !this.hasCheckAllDisabled() && !this.searchValue ? -1 : 0;
-        const itemsLentgh = this.renderItemsList.length - 1;
-        if (e.key === index$1.KeyboardCode.ARROW_DOWN) {
-            index = index === itemsLentgh ? firstCheckbox : key + 1;
-        }
-        else if (e.key === index$1.KeyboardCode.ARROW_UP) {
-            if (this.hascheckall && !this.searchValue) {
-                index = index < 0 ? itemsLentgh : key - 1;
-            }
-            else {
-                index = index === 0 ? itemsLentgh : key - 1;
-            }
-        }
-        this.resetInputTabIndex();
-        this.focusComboboxItem(index);
-    }
-    handleHeaderKeyboardEvent(ev) {
-        if (ev.key === index$1.KeyboardCode.SPACE) {
-            ev.preventDefault();
-        }
-        if ((ev.key === index$1.KeyboardCode.ARROW_DOWN && !this.isopen) || (ev.key === index$1.KeyboardCode.ARROW_UP && this.isopen)) {
-            this.toggleComboBox();
-        }
-    }
-    focusComboboxItem(index) {
-        let focusElem;
-        if (index < 0) {
-            focusElem = this.element.shadowRoot.querySelector(`#${this.getCheckAllId()}`);
-        }
-        else {
-            const item = this.renderItemsList[index];
-            if (!item) {
-                return;
-            }
-            focusElem = this.element.shadowRoot.querySelector(`#${this.getItemId(item)}`);
-        }
-        if (focusElem) {
-            focusElem.setAttribute("tabindex", "0");
-            focusElem.focus();
-        }
-    }
     updateRenderItemsList() {
         if (this.searchValue) {
             this.filterItems(this.searchValue);
@@ -184,9 +95,7 @@ const ZCombobox = class {
             const start = item.name.toUpperCase().indexOf(value.toUpperCase());
             const end = start + value.length;
             const newName = item.name.substring(0, start) +
-                "<strong>" +
-                item.name.substring(start, end) +
-                "</strong>" +
+                item.name.substring(start, end).bold() +
                 item.name.substring(end, item.name.length);
             item.name = newName;
             return start >= 0;
@@ -203,35 +112,28 @@ const ZCombobox = class {
     }
     toggleComboBox() {
         this.isopen = !this.isopen;
-        this.focusedItemId = "";
     }
     renderHeader() {
         return (index.h("div", { class: "header", onClick: () => this.toggleComboBox(), onKeyDown: (ev) => {
-                this.handleHeaderKeyboardEvent(ev);
-            }, onKeyUp: (ev) => utils.handleKeyboardSubmit(ev, this.toggleComboBox), role: "button", tabindex: 0, "aria-expanded": this.isopen ? "true" : "false" }, index.h("p", { class: "body-3" }, this.label, index.h("span", null, this.selectedCounter > 0 && ` (${this.selectedCounter})`)), index.h("z-icon", { name: "caret-down", class: this.size })));
+                if (ev.keyCode === index$1.KeyboardKeyCode.SPACE) {
+                    ev.preventDefault();
+                }
+            }, onKeyUp: (ev) => utils.handleKeyboardSubmit(ev, this.toggleComboBox), role: "button", tabindex: 0 }, index.h("p", { class: "body-3" }, this.label, index.h("span", null, this.selectedCounter > 0 && ` (${this.selectedCounter})`)), index.h("z-icon", { name: "caret-down", class: this.size })));
     }
     renderContent() {
         if (!this.isopen) {
             return;
         }
-        return (index.h("div", { class: "open-combo-data" }, this.hassearch && this.renderSearchInput(), !this.hassearch ? index.h("span", Object.assign({}, this.getComboboxA11yAttributes())) : null, index.h("div", { role: "listbox", "aria-multiselectable": true, id: `${this.inputid}_list`, "aria-owns": `${this.hascheckall ? `${this.getCheckAllId()} ` : ``}${this.itemsList
-                .map((item) => this.getItemId(item))
-                .join(" ")}` }, this.hascheckall && this.renderCheckAll(), this.renderItems())));
+        return (index.h("div", { class: "open-combo-data" }, this.hassearch && this.renderSearchInput(), this.hascheckall && this.renderCheckAll(), this.renderItems()));
     }
     renderItems() {
-        return (index.h("div", { class: this.searchValue && "search" }, this.renderList(this.renderItemsList), this.searchValue && this.renderCloseButton()));
+        if (!this.isopen) {
+            return;
+        }
+        return (index.h("div", { class: this.searchValue && "search", tabindex: -1 }, this.renderList(this.renderItemsList), this.searchValue && this.renderCloseButton()));
     }
     renderItem(item, index$2, length) {
-        return (index.h("z-list-element", { id: item.id, htmlTabindex: null, dividerType: index$2 !== length - 1 ? index$1.ListDividerType.ELEMENT : index$1.ListDividerType.NONE, size: this.getControlToListSize() }, index.h("z-input", { innerTabIndex: this.setInputTabIndex(item.id, index$2), type: index$1.InputType.CHECKBOX, checked: item.checked, htmlid: this.getItemId(item), label: item.name, class: this.getCheckboxClass(), disabled: !item.checked && this.maxcheckableitems && this.maxcheckableitems === this.selectedCounter, size: this.size === index$1.ControlSize.X_SMALL ? index$1.ControlSize.SMALL : this.size, role: "option", "aria-selected": item.checked ? "true" : "false", onKeyDown: (e) => this.handleSelectArrowsNavigation(e, index$2), onInputCheck: (e) => {
-                this.itemsList = this.itemsList.map((i) => {
-                    if (item.id === i.id) {
-                        i.checked = e.detail.checked;
-                    }
-                    return i;
-                });
-                this.updateRenderItemsList();
-                this.emitComboboxChange();
-            } })));
+        return (index.h("z-myz-list-item", { id: item.id, listitemid: item.id, action: `combo-li-${this.inputid}`, underlined: index$2 !== length - 1, class: this.size }, index.h("z-input", { type: index$1.InputType.CHECKBOX, checked: item.checked, htmlid: `combo-checkbox-${this.inputid}-${item.id}`, label: item.name, disabled: !item.checked && this.maxcheckableitems && this.maxcheckableitems === this.selectedCounter, size: this.size === index$1.ControlSize.X_SMALL ? index$1.ControlSize.SMALL : this.size })));
     }
     renderList(items) {
         if (!items) {
@@ -241,9 +143,9 @@ const ZCombobox = class {
             return this.renderNoSearchResults();
         }
         if (this.hasgroupitems) {
-            return this.renderGroups(items);
+            return this.renderGroups(this.itemsList);
         }
-        return (index.h("ul", { role: "none" }, items.map((item, i) => {
+        return (index.h("ul", null, items.map((item, i) => {
             return this.renderItem(item, i, items.length);
         })));
     }
@@ -259,44 +161,35 @@ const ZCombobox = class {
         const listGroups = Object.entries(newData).map(([key, value]) => {
             return (index.h("z-list-group", { "divider-type": index$1.ListDividerType.ELEMENT }, index.h("span", { class: "body-3-sb z-list-group-title", slot: "header-title" }, key), value.map((item) => item)));
         });
-        return index.h("ul", { role: "none" }, listGroups);
+        return index.h("ul", null, listGroups);
     }
     renderNoSearchResults() {
-        return (index.h("ul", { role: "none" }, index.h("z-myz-list-item", { id: "no-results", text: this.noresultslabel, listitemid: "no-results", icon: "multiply-circle", class: this.size })));
+        return (index.h("ul", null, index.h("z-myz-list-item", { id: "no-results", text: this.noresultslabel, listitemid: "no-results", icon: "multiply-circle", class: this.size })));
     }
     renderCloseButton() {
         return (index.h("div", null, index.h("a", { onClick: () => this.closeFilterItems(), onKeyUp: (e) => utils.handleKeyboardSubmit(e, this.closeFilterItems), role: "button", tabindex: 0 }, this.closesearchtext)));
     }
-    getComboboxA11yAttributes() {
-        return {
-            "role": "combobox",
-            "aria-expanded": this.isopen ? "true" : "false",
-            "aria-activedescendant": this.isopen ? this.focusedItemId : "",
-            "aria-controls": `${this.inputid}_list`,
-        };
-    }
     renderSearchInput() {
-        return (index.h("z-input", Object.assign({ htmlid: `${this.inputid}_search`, label: this.searchlabel, placeholder: this.searchplaceholder, htmltitle: this.searchtitle, type: this.inputType, value: this.searchValue, message: false, size: this.size, "aria-autocomplete": "list" }, this.getComboboxA11yAttributes(), { onKeyUp: (e) => {
-                if (e.key === index$1.KeyboardCode.ESC) {
-                    this.closeFilterItems();
+        if (!this.isopen) {
+            return;
+        }
+        return (index.h("z-input", { htmlid: `${this.inputid}_search`, label: this.searchlabel, placeholder: this.searchplaceholder, htmltitle: this.searchtitle, type: this.inputType, value: this.searchValue, message: false, size: this.size, onInputChange: (e) => {
+                if (e.detail.keycode === 27) {
+                    return this.closeFilterItems();
                 }
-            }, onInputChange: (e) => {
                 this.searchValue = e.detail.value;
-            } })));
+            } }));
     }
     renderCheckAll() {
         if (this.searchValue) {
             return;
         }
         const allChecked = this.selectedCounter === this.itemsList.length;
-        return (index.h("div", { class: "check-all-wrapper" }, index.h("z-input", { type: index$1.InputType.CHECKBOX, checked: allChecked, htmlid: this.getCheckAllId(), class: this.getCheckboxClass(), label: allChecked ? this.uncheckalltext : this.checkalltext, disabled: this.hasCheckAllDisabled(), size: this.size === index$1.ControlSize.X_SMALL ? index$1.ControlSize.SMALL : this.size, role: "option", "aria-selected": allChecked ? "true" : "false", onKeyDown: (e) => this.handleSelectArrowsNavigation(e, -1), onInputCheck: (e) => {
-                this.checkAll(e.detail.checked);
-            } })));
+        return (index.h("div", { class: "check-all-wrapper" }, index.h("z-input", { type: index$1.InputType.CHECKBOX, checked: allChecked, htmlid: `combo-checkbox-${this.inputid}-check-all`, label: allChecked ? this.uncheckalltext : this.checkalltext, disabled: this.maxcheckableitems && this.maxcheckableitems < this.itemsList.length, size: this.size === index$1.ControlSize.X_SMALL ? index$1.ControlSize.SMALL : this.size })));
     }
     render() {
-        return (index.h("div", { key: 'c12854ede2b8c8c8301ff18831e51f974ae00a3d', "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 (index.h("div", { key: '60fd65ff74672014003f4f0bfe8187a3b9688e72', "data-action": `combo-${this.inputid}`, class: { open: this.isopen, fixed: this.isfixed, disabled: this.disabled }, id: this.inputid }, this.renderHeader(), !this.disabled && this.renderContent()));
     }
-    get element() { return index.getElement(this); }
     static get watchers() { return {
         "items": ["watchItems"],
         "searchValue": ["watchSearchValue"]

package/dist/cjs/z-combobox.cjs.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"z-combobox.entry.cjs.js","mappings":";;;;;;;;;AAAA,MAAM,SAAS,GAAG,02HAA02H,CAAC;AAC73H,wBAAe,SAAS;;MCUX,SAAS;IA4FpB,UAAU;QACR,IAAI,CAAC,SAAS,GAAG,OAAO,IAAI,CAAC,KAAK,KAAK,QAAQ,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC;QACtF,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,CAAC,IAAI,KAAK,IAAI,CAAC,OAAO,CAAC,CAAC,MAAM,CAAC;QAC5E,IAAI,CAAC,qBAAqB,EAAE,CAAC;KAC9B;IAGD,gBAAgB;QACd,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;QACnC,MAAM,IAAI,GAAG,IAAI,CAAC,OAAO,CAAC,UAAU,CAAC,aAAa,CAAC,IAAI,IAAI,CAAC,gBAAgB,EAAE,QAAQ,CAAC,CAAC;QACxF,IAAI,IAAI,EAAE;YACR,IAAI,CAAC,YAAY,CAAC,UAAU,EAAE,GAAG,CAAC,CAAC;SACpC;KACF;IAGD,qBAAqB,CAAC,CAAc;QAClC,IAAI,CAAC,aAAa,GAAG,CAAC,CAAC,MAAM,CAAC;KAC/B;IAMO,kBAAkB;QACxB,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,EAAC,EAAE,EAAE,IAAI,CAAC,OAAO,EAAE,KAAK,EAAE,IAAI,CAAC,SAAS,EAAC,CAAC,CAAC;KACrE;IAED;;;QAjCQ,cAAS,GAAgB,EAAE,CAAC;QAE5B,cAAS,GAAcA,iBAAS,CAAC,IAAI,CAAC;;;;wBAxEzB,KAAK;yBAIJ,KAAK;;;;8BAgBD,kBAAkB;sBAInC,KAAK;uBAIJ,KAAK;+BAIY,QAAQ;2BAIX,KAAK;4BAIL,iBAAiB;8BAIf,mBAAmB;iCAIzB,CAAC;;oBAQAC,mBAAW,CAAC,GAAG;;;+BASL,EAAE;;QAuC/B,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QACrD,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;KAC1D;IAED,iBAAiB;QACf,IAAI,CAAC,UAAU,EAAE,CAAC;KACnB;IAED,mBAAmB;QACjB,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,CAAC,IAAI,KAAK,IAAI,CAAC,OAAO,CAAC,CAAC,MAAM,CAAC;KAC7E;IAEO,oBAAoB;QAC1B,IAAI,IAAI,CAAC;QACT,QAAQ,IAAI,CAAC,IAAI;YACf,KAAKA,mBAAW,CAAC,GAAG;gBAClB,IAAI,GAAGC,gBAAQ,CAAC,KAAK,CAAC;gBACtB,MAAM;YACR,KAAKD,mBAAW,CAAC,KAAK;gBACpB,IAAI,GAAGC,gBAAQ,CAAC,KAAK,CAAC;gBACtB,MAAM;YACR,KAAKD,mBAAW,CAAC,OAAO;gBACtB,IAAI,GAAGC,gBAAQ,CAAC,KAAK,CAAC;gBACtB,MAAM;YACR;gBACE,IAAI,GAAGA,gBAAQ,CAAC,MAAM,CAAC;SAC1B;QAED,OAAO,IAAI,CAAC;KACb;IAEO,SAAS,CAAC,IAAe;QAC/B,OAAO,kBAAkB,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,EAAE,EAAE,CAAC;KACpD;IAEO,gBAAgB;QACtB,OAAO,6BAA6B,IAAI,CAAC,OAAO,EAAE,CAAC;KACpD;IAEO,aAAa;QACnB,OAAO,kBAAkB,IAAI,CAAC,OAAO,YAAY,CAAC;KACnD;IAEO,mBAAmB;QACzB,OAAO,IAAI,CAAC,iBAAiB,IAAI,IAAI,CAAC,iBAAiB,GAAG,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC;KACjF;IAEO,kBAAkB;QACxB,IAAI,CAAC,OAAO,CAAC,UAAU,CAAC,gBAAgB,CAAC,IAAI,IAAI,CAAC,gBAAgB,EAAE,QAAQ,CAAC,CAAC,OAAO,CAAC,UAAU,IAAI;YAClG,IAAI,CAAC,YAAY,CAAC,UAAU,EAAE,IAAI,CAAC,CAAC;SACrC,CAAC,CAAC;KACJ;IAEO,gBAAgB,CAAC,MAAM,EAAE,KAAK;QACpC,IAAI,KAAK,KAAK,CAAC,EAAE;YACf,IACE,CAAC,IAAI,CAAC,WAAW;iBAChB,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,WAAW,CAAC;iBACrC,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,mBAAmB,EAAE,CAAC,EAChD;gBACA,OAAO,CAAC,CAAC;aACV;SACF;QAED,OAAO,MAAM,KAAK,IAAI,CAAC,aAAa,GAAG,CAAC,GAAG,CAAC,CAAC,CAAC;KAC/C;IAEO,4BAA4B,CAAC,CAAgB,EAAE,GAAW;QAChE,IAAI,KAAK,GAAG,GAAG,CAAC;QAEhB,IAAI,CAAC,kBAAkB,EAAE,CAAC;QAC1B,IAAI,CAAC,iBAAiB,CAAC,KAAK,CAAC,CAAC;QAE9B,MAAM,MAAM,GAAG,CAACC,oBAAY,CAAC,UAAU,EAAEA,oBAAY,CAAC,QAAQ,CAAC,CAAC;QAChE,IAAI,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC,CAAC,GAAmB,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,EAAE;YAC3D,OAAO;SACR;QAED,CAAC,CAAC,cAAc,EAAE,CAAC;QACnB,CAAC,CAAC,eAAe,EAAE,CAAC;QACpB,MAAM,aAAa,GAAG,IAAI,CAAC,WAAW,IAAI,CAAC,IAAI,CAAC,mBAAmB,EAAE,IAAI,CAAC,IAAI,CAAC,WAAW,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC;QACpG,MAAM,WAAW,GAAG,IAAI,CAAC,eAAe,CAAC,MAAM,GAAG,CAAC,CAAC;QAEpD,IAAI,CAAC,CAAC,GAAG,KAAKA,oBAAY,CAAC,UAAU,EAAE;YACrC,KAAK,GAAG,KAAK,KAAK,WAAW,GAAG,aAAa,GAAG,GAAG,GAAG,CAAC,CAAC;SACzD;aAAM,IAAI,CAAC,CAAC,GAAG,KAAKA,oBAAY,CAAC,QAAQ,EAAE;YAC1C,IAAI,IAAI,CAAC,WAAW,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE;gBACzC,KAAK,GAAG,KAAK,GAAG,CAAC,GAAG,WAAW,GAAG,GAAG,GAAG,CAAC,CAAC;aAC3C;iBAAM;gBACL,KAAK,GAAG,KAAK,KAAK,CAAC,GAAG,WAAW,GAAG,GAAG,GAAG,CAAC,CAAC;aAC7C;SACF;QAED,IAAI,CAAC,kBAAkB,EAAE,CAAC;QAC1B,IAAI,CAAC,iBAAiB,CAAC,KAAK,CAAC,CAAC;KAC/B;IAEO,yBAAyB,CAAC,EAAiB;QACjD,IAAI,EAAE,CAAC,GAAG,KAAKA,oBAAY,CAAC,KAAK,EAAE;YACjC,EAAE,CAAC,cAAc,EAAE,CAAC;SACrB;QACD,IAAI,CAAC,EAAE,CAAC,GAAG,KAAKA,oBAAY,CAAC,UAAU,IAAI,CAAC,IAAI,CAAC,MAAM,MAAM,EAAE,CAAC,GAAG,KAAKA,oBAAY,CAAC,QAAQ,IAAI,IAAI,CAAC,MAAM,CAAC,EAAE;YAC7G,IAAI,CAAC,cAAc,EAAE,CAAC;SACvB;KACF;IAEO,iBAAiB,CAAC,KAAa;QACrC,IAAI,SAAsB,CAAC;QAE3B,IAAI,KAAK,GAAG,CAAC,EAAE;YACb,SAAS,GAAG,IAAI,CAAC,OAAO,CAAC,UAAU,CAAC,aAAa,CAAC,IAAI,IAAI,CAAC,aAAa,EAAE,EAAE,CAAC,CAAC;SAC/E;aAAM;YACL,MAAM,IAAI,GAAG,IAAI,CAAC,eAAe,CAAC,KAAK,CAAC,CAAC;YAEzC,IAAI,CAAC,IAAI,EAAE;gBACT,OAAO;aACR;YAED,SAAS,GAAG,IAAI,CAAC,OAAO,CAAC,UAAU,CAAC,aAAa,CAAC,IAAI,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;SAC/E;QAED,IAAI,SAAS,EAAE;YACb,SAAS,CAAC,YAAY,CAAC,UAAU,EAAE,GAAG,CAAC,CAAC;YACxC,SAAS,CAAC,KAAK,EAAE,CAAC;SACnB;KACF;IAEO,qBAAqB;QAC3B,IAAI,IAAI,CAAC,WAAW,EAAE;YACpB,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;SACpC;aAAM;YACL,IAAI,CAAC,oBAAoB,EAAE,CAAC;SAC7B;KACF;IAEO,oBAAoB;QAC1B,MAAM,eAAe,GAAG,EAAE,CAAC;QAC3B,IAAI,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC,IAAe;YACrC,eAAe,CAAC,IAAI,mBAAK,IAAI,EAAE,CAAC;SACjC,CAAC,CAAC;QACH,IAAI,CAAC,eAAe,GAAG,eAAe,CAAC;KACxC;IAEO,WAAW,CAAC,KAAa;QAC/B,IAAI,CAAC,KAAK,EAAE;YACV,OAAO,IAAI,CAAC,gBAAgB,EAAE,CAAC;SAChC;QAED,IAAI,CAAC,oBAAoB,EAAE,CAAC;QAC5B,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,eAAe,CAAC,MAAM,CAAC,CAAC,IAAI;YACtD,MAAM,KAAK,GAAG,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE,CAAC,OAAO,CAAC,KAAK,CAAC,WAAW,EAAE,CAAC,CAAC;YACnE,MAAM,GAAG,GAAG,KAAK,GAAG,KAAK,CAAC,MAAM,CAAC;YACjC,MAAM,OAAO,GACX,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,EAAE,KAAK,CAAC;gBAC7B,UAAU;gBACV,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC,KAAK,EAAE,GAAG,CAAC;gBAC/B,WAAW;gBACX,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC,GAAG,EAAE,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;YAE7C,IAAI,CAAC,IAAI,GAAG,OAAO,CAAC;YAEpB,OAAO,KAAK,IAAI,CAAC,CAAC;SACnB,CAAC,CAAC;KACJ;IAEO,QAAQ,CAAC,OAAO,GAAG,IAAI;QAC7B,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,CAAC,IAAe,sCAC/C,IAAI,KACP,OAAO,EAAE,OAAO,IAChB,CAAC,CAAC;QACJ,IAAI,CAAC,oBAAoB,EAAE,CAAC;QAC5B,IAAI,CAAC,kBAAkB,EAAE,CAAC;KAC3B;IAEO,gBAAgB;QACtB,IAAI,CAAC,WAAW,GAAG,EAAE,CAAC;QACtB,IAAI,CAAC,oBAAoB,EAAE,CAAC;KAC7B;IAEO,cAAc;QACpB,IAAI,CAAC,MAAM,GAAG,CAAC,IAAI,CAAC,MAAM,CAAC;QAC3B,IAAI,CAAC,aAAa,GAAG,EAAE,CAAC;KACzB;IAEO,YAAY;QAClB,QACEC,iBACE,KAAK,EAAC,QAAQ,EACd,OAAO,EAAE,MAAM,IAAI,CAAC,cAAc,EAAE,EACpC,SAAS,EAAE,CAAC,EAAiB;gBAC3B,IAAI,CAAC,yBAAyB,CAAC,EAAE,CAAC,CAAC;aACpC,EACD,OAAO,EAAE,CAAC,EAAiB,KAAKC,0BAAoB,CAAC,EAAE,EAAE,IAAI,CAAC,cAAc,CAAC,EAC7E,IAAI,EAAC,QAAQ,EACb,QAAQ,EAAE,CAAC,mBACI,IAAI,CAAC,MAAM,GAAG,MAAM,GAAG,OAAO,IAE7CD,eAAG,KAAK,EAAC,QAAQ,IACd,IAAI,CAAC,KAAK,EACXA,sBAAO,IAAI,CAAC,eAAe,GAAG,CAAC,IAAI,KAAK,IAAI,CAAC,eAAe,GAAG,CAAQ,CACrE,EACJA,oBACE,IAAI,EAAC,YAAY,EACjB,KAAK,EAAE,IAAI,CAAC,IAAI,GAChB,CACE,EACN;KACH;IAEO,aAAa;QACnB,IAAI,CAAC,IAAI,CAAC,MAAM,EAAE;YAChB,OAAO;SACR;QAED,QACEA,iBAAK,KAAK,EAAC,iBAAiB,IACzB,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,iBAAiB,EAAE,EAC1C,CAAC,IAAI,CAAC,SAAS,GAAGA,kCAAU,IAAI,CAAC,yBAAyB,EAAE,EAAI,GAAG,IAAI,EACxEA,iBACE,IAAI,EAAC,SAAS,0BACQ,IAAI,EAC1B,EAAE,EAAE,GAAG,IAAI,CAAC,OAAO,OAAO,eACf,GAAG,IAAI,CAAC,WAAW,GAAG,GAAG,IAAI,CAAC,aAAa,EAAE,GAAG,GAAG,EAAE,GAAG,IAAI,CAAC,SAAS;iBAC9E,GAAG,CAAC,CAAC,IAAI,KAAK,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC;iBACnC,IAAI,CAAC,GAAG,CAAC,EAAE,IAEb,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,cAAc,EAAE,EACzC,IAAI,CAAC,WAAW,EAAE,CACf,CACF,EACN;KACH;IAEO,WAAW;QACjB,QACEA,iBAAK,KAAK,EAAE,IAAI,CAAC,WAAW,IAAI,QAAQ,IACrC,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,eAAe,CAAC,EACrC,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,iBAAiB,EAAE,CACzC,EACN;KACH;IAEO,UAAU,CAAC,IAAe,EAAEE,OAAa,EAAE,MAAc;QAC/D,QACEF,4BACE,EAAE,EAAE,IAAI,CAAC,EAAE,EACX,YAAY,EAAE,IAAI,EAClB,WAAW,EAAEE,OAAK,KAAK,MAAM,GAAG,CAAC,GAAGC,uBAAe,CAAC,OAAO,GAAGA,uBAAe,CAAC,IAAI,EAClF,IAAI,EAAE,IAAI,CAAC,oBAAoB,EAAE,IAEjCH,qBACE,aAAa,EAAE,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,EAAE,EAAEE,OAAK,CAAC,EACpD,IAAI,EAAEN,iBAAS,CAAC,QAAQ,EACxB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,MAAM,EAAE,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,EAC5B,KAAK,EAAE,IAAI,CAAC,IAAI,EAChB,KAAK,EAAE,IAAI,CAAC,gBAAgB,EAAE,EAC9B,QAAQ,EAAE,CAAC,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,iBAAiB,IAAI,IAAI,CAAC,iBAAiB,KAAK,IAAI,CAAC,eAAe,EACpG,IAAI,EAAE,IAAI,CAAC,IAAI,KAAKC,mBAAW,CAAC,OAAO,GAAGA,mBAAW,CAAC,KAAK,GAAG,IAAI,CAAC,IAAI,EACvE,IAAI,EAAC,QAAQ,mBACE,IAAI,CAAC,OAAO,GAAG,MAAM,GAAG,OAAO,EAC9C,SAAS,EAAE,CAAC,CAAgB,KAAK,IAAI,CAAC,4BAA4B,CAAC,CAAC,EAAEK,OAAK,CAAC,EAC5E,YAAY,EAAE,CAAC,CAAc;gBAC3B,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,CAAC,CAAY;oBAC/C,IAAI,IAAI,CAAC,EAAE,KAAK,CAAC,CAAC,EAAE,EAAE;wBACpB,CAAC,CAAC,OAAO,GAAG,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC;qBAC9B;oBAED,OAAO,CAAC,CAAC;iBACV,CAAC,CAAC;gBACH,IAAI,CAAC,qBAAqB,EAAE,CAAC;gBAC7B,IAAI,CAAC,kBAAkB,EAAE,CAAC;aAC3B,GACD,CACa,EACjB;KACH;IAEO,UAAU,CAAC,KAAkB;QACnC,IAAI,CAAC,KAAK,EAAE;YACV,OAAO;SACR;QACD,IAAI,CAAC,KAAK,CAAC,MAAM,IAAI,IAAI,CAAC,WAAW,EAAE;YACrC,OAAO,IAAI,CAAC,qBAAqB,EAAE,CAAC;SACrC;QAED,IAAI,IAAI,CAAC,aAAa,EAAE;YACtB,OAAO,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC;SACjC;QAED,QACEF,gBAAI,IAAI,EAAC,MAAM,IACZ,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,CAAC;YACjB,OAAO,IAAI,CAAC,UAAU,CAAC,IAAI,EAAE,CAAC,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC;SAC/C,CAAC,CACC,EACL;KACH;IAEO,YAAY,CAAC,KAAkB;QACrC,MAAM,OAAO,GAAG,KAAK,CAAC,MAAM,CAAC,CAAC,KAAK,EAAE,IAAI,EAAE,KAAK;;YAC9C,MAAM,EAAC,QAAQ,EAAC,GAAG,IAAI,CAAC;YACxB,MAAM,SAAS,GAAG,IAAI,CAAC,UAAU,CAAC,IAAI,EAAE,KAAK,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC;YAE7D,KAAK,CAAC,QAAQ,CAAC,GAAG,MAAA,KAAK,CAAC,QAAQ,CAAC,mCAAI,EAAE,CAAC;YACxC,KAAK,CAAC,QAAQ,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;YAEhC,OAAO,KAAK,CAAC;SACd,EAAE,EAAE,CAAC,CAAC;QAEP,MAAM,UAAU,GAAG,MAAM,CAAC,OAAO,CAAC,OAAqD,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,EAAE,KAAK,CAAC;YACxG,QACEA,0CAA4BG,uBAAe,CAAC,OAAO,IACjDH,kBACE,KAAK,EAAC,8BAA8B,EACpC,IAAI,EAAC,cAAc,IAElB,GAAG,CACC,EACN,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,KAAK,IAAI,CAAC,CACb,EACf;SACH,CAAC,CAAC;QAEH,OAAOA,gBAAI,IAAI,EAAC,MAAM,IAAE,UAAU,CAAM,CAAC;KAC1C;IAEO,qBAAqB;QAC3B,QACEA,gBAAI,IAAI,EAAC,MAAM,IACbA,6BACE,EAAE,EAAC,YAAY,EACf,IAAI,EAAE,IAAI,CAAC,cAAc,EACzB,UAAU,EAAC,YAAY,EACvB,IAAI,EAAC,iBAAiB,EACtB,KAAK,EAAE,IAAI,CAAC,IAAI,GAChB,CACC,EACL;KACH;IAEO,iBAAiB;QACvB,QACEA,qBACEA,eACE,OAAO,EAAE,MAAM,IAAI,CAAC,gBAAgB,EAAE,EACtC,OAAO,EAAE,CAAC,CAAgB,KAAKC,0BAAoB,CAAC,CAAC,EAAE,IAAI,CAAC,gBAAgB,CAAC,EAC7E,IAAI,EAAC,QAAQ,EACb,QAAQ,EAAE,CAAC,IAEV,IAAI,CAAC,eAAe,CACnB,CACA,EACN;KACH;IAEO,yBAAyB;QAC/B,OAAO;YACL,MAAM,EAAE,UAAU;YAClB,eAAe,EAAE,IAAI,CAAC,MAAM,GAAG,MAAM,GAAG,OAAO;YAC/C,uBAAuB,EAAE,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,aAAa,GAAG,EAAE;YAC9D,eAAe,EAAE,GAAG,IAAI,CAAC,OAAO,OAAO;SACxC,CAAC;KACH;IAEO,iBAAiB;QACvB,QACED,mCACE,MAAM,EAAE,GAAG,IAAI,CAAC,OAAO,SAAS,EAChC,KAAK,EAAE,IAAI,CAAC,WAAW,EACvB,WAAW,EAAE,IAAI,CAAC,iBAAiB,EACnC,SAAS,EAAE,IAAI,CAAC,WAAW,EAC3B,IAAI,EAAE,IAAI,CAAC,SAAS,EACpB,KAAK,EAAE,IAAI,CAAC,WAAW,EACvB,OAAO,EAAE,KAAK,EACd,IAAI,EAAE,IAAI,CAAC,IAAI,uBACG,MAAM,IACpB,IAAI,CAAC,yBAAyB,EAAE,IACpC,OAAO,EAAE,CAAC,CAAgB;gBACxB,IAAI,CAAC,CAAC,GAAG,KAAKD,oBAAY,CAAC,GAAG,EAAE;oBAC9B,IAAI,CAAC,gBAAgB,EAAE,CAAC;iBACzB;aACF,EACD,aAAa,EAAE,CAAC,CAAc;gBAC5B,IAAI,CAAC,WAAW,GAAG,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC;aACnC,IACD,EACF;KACH;IAEO,cAAc;QACpB,IAAI,IAAI,CAAC,WAAW,EAAE;YACpB,OAAO;SACR;QAED,MAAM,UAAU,GAAG,IAAI,CAAC,eAAe,KAAK,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC;QAElE,QACEC,iBAAK,KAAK,EAAC,mBAAmB,IAC5BA,qBACE,IAAI,EAAEJ,iBAAS,CAAC,QAAQ,EACxB,OAAO,EAAE,UAAU,EACnB,MAAM,EAAE,IAAI,CAAC,aAAa,EAAE,EAC5B,KAAK,EAAE,IAAI,CAAC,gBAAgB,EAAE,EAC9B,KAAK,EAAE,UAAU,GAAG,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC,YAAY,EAC3D,QAAQ,EAAE,IAAI,CAAC,mBAAmB,EAAE,EACpC,IAAI,EAAE,IAAI,CAAC,IAAI,KAAKC,mBAAW,CAAC,OAAO,GAAGA,mBAAW,CAAC,KAAK,GAAG,IAAI,CAAC,IAAI,EACvE,IAAI,EAAC,QAAQ,mBACE,UAAU,GAAG,MAAM,GAAG,OAAO,EAC5C,SAAS,EAAE,CAAC,CAAgB,KAAK,IAAI,CAAC,4BAA4B,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EACzE,YAAY,EAAE,CAAC,CAAc;gBAC3B,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC;aACjC,GACD,CACE,EACN;KACH;IAED,MAAM;QACJ,QACEG,iFACe,SAAS,IAAI,CAAC,OAAO,EAAE,EACpC,KAAK,EAAE,EAAC,IAAI,EAAE,IAAI,CAAC,MAAM,EAAE,KAAK,EAAE,IAAI,CAAC,OAAO,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAC,EACxE,EAAE,EAAE,IAAI,CAAC,OAAO,IAEf,IAAI,CAAC,YAAY,EAAE,EACnB,CAAC,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,aAAa,EAAE,CACnC,EACN;KACH;;;;;;;;;;;","names":["InputType","ControlSize","ListSize","KeyboardCode","h","handleKeyboardSubmit","index","ListDividerType"],"sources":["src/components/inputs/z-combobox/styles.css?tag=z-combobox&encapsulation=shadow","src/components/inputs/z-combobox/index.tsx"],"sourcesContent":[":host {\n display: block;\n font-family: var(--font-family-sans);\n}\n\n:host > div.fixed {\n position: relative;\n}\n\n:host > div > .header {\n position: relative;\n z-index: 10;\n display: flex;\n min-height: 42px;\n align-items: center;\n justify-content: space-between;\n padding: 0 calc(var(--space-unit) * 1.5);\n border: var(--border-size-small) solid var(--color-surface04);\n margin: 0;\n background-color: var(--color-input-field01);\n border-radius: var(--border-radius-small);\n cursor: pointer;\n}\n\n:host([size=\"small\"]) > div > .header {\n min-height: 34px;\n font-size: var(--font-size-2);\n}\n\n:host([size=\"x-small\"]) > div > .header {\n min-height: 30px;\n font-size: var(--font-size-2);\n}\n\n:host([size=\"x-small\"]) > div > .header p.body-3 {\n padding: calc(var(--space-unit) * 0.5) 0;\n}\n\n:host > div > .header:hover {\n outline: var(--border-size-medium) solid var(--color-surface04);\n outline-offset: -2px;\n}\n\n:host > div.open > div.header:focus:focus-visible {\n box-shadow: none;\n}\n\n:host > div > div.header:focus:focus-visible {\n box-shadow: var(--shadow-focus-primary);\n outline: none;\n}\n\n:host > div > .header > p.body-3 {\n padding: var(--space-unit) 0;\n margin: 0;\n color: var(--color-text01);\n}\n\n:host > div > .header > p.body-3 > span {\n font-weight: var(--font-sb);\n}\n\n:host > div > .header > z-icon {\n fill: var(--color-icon02);\n transform: rotate(360deg);\n transition: all 200ms linear;\n}\n\n:host > div > .header > z-icon.small,\n:host > div > .header > z-icon.x-small {\n --z-icon-width: 16px;\n --z-icon-height: 16px;\n}\n\n:host > div.open > .header {\n border: var(--border-size-small) solid var(--color-primary01);\n border-radius: var(--border-radius-small) var(--border-radius-small) 0 0;\n}\n\n:host > div.disabled {\n pointer-events: none;\n}\n\n:host > div.disabled .header {\n border-color: var(--color-disabled01);\n fill: var(--color-disabled01);\n}\n\n:host > div.disabled .header > p.body-3 {\n color: var(--color-disabled02);\n}\n\n:host > div.disabled .header > z-icon:last-child {\n fill: var(--color-disabled01);\n}\n\n:host > div.open > .header > z-icon {\n fill: var(--color-icon02);\n transform: rotate(180deg);\n transition: all 200ms linear;\n}\n\n:host > div.open > div.open-combo-data {\n position: relative;\n z-index: 12;\n padding: var(--space-unit) calc(var(--space-unit) * 2);\n border: var(--border-size-small) solid var(--gray200);\n border-top: 0;\n background-color: var(--color-input-field01);\n border-radius: 0;\n}\n\n:host > div.open > div.open-combo-data > div > div {\n overflow: auto;\n max-height: 235px;\n padding: 0;\n scrollbar-color: var(--color-primary01) transparent;\n}\n\n:host > div.open > div.open-combo-data > z-input {\n width: 100%;\n margin-bottom: calc(var(--space-unit) * 2);\n}\n\n:host > div.open > div.open-combo-data > div > div > ul {\n max-height: 235px;\n padding: 0 3px; /* needed for checkbox focus shadow /\n margin: 0;\n}\n\n::-webkit-scrollbar {\n width: 10px;\n background: linear-gradient(to right, transparent 0 3px, var(--gray200) 3px 7px, transparent 7px 10px);\n border-radius: var(--border-radius);\n}\n\n::-webkit-scrollbar-thumb {\n width: 10px;\n background-color: var(--color-primary01);\n}\n\n:host > div.open > z-input {\n position: relative;\n z-index: 1;\n width: 238px;\n margin: 0 calc(var(--space-unit) 2);\n color: var(--color-primary01);\n}\n\n:host > div.open > div.open-combo-data > div > div.search {\n overflow: hidden;\n max-height: auto;\n margin-top: 0;\n box-shadow: 1px 1px 4px 2px rgb(217 222 227 / 50%);\n}\n\n:host > div.open > div.open-combo-data > div > div.search > ul {\n overflow: auto;\n max-height: 180px;\n padding: var(--space-unit) calc(var(--space-unit) * 2);\n scrollbar-color: var(--color-primary01) transparent;\n}\n\n:host > div.open > div.open-combo-data > div > div.search > div {\n display: flex;\n justify-content: center;\n}\n\n:host > div.open > div.open-combo-data > div > div.search > div > a {\n display: inline-block;\n height: 44px;\n color: var(--color-primary01);\n cursor: pointer;\n font-size: 14px;\n font-weight: var(--font-sb);\n line-height: 44px;\n text-align: center;\n text-transform: uppercase;\n}\n\n:host > div.open > div.open-combo-data > div > div.check-all-wrapper {\n padding: calc(var(--space-unit) * 2) calc(var(--space-unit) * 0.5);\n border-bottom: var(--border-size-small) solid var(--gray800);\n margin-bottom: var(--space-unit);\n text-align: left;\n}\n\n:host([size=\"small\"]) > div.open > div.open-combo-data > div > div.check-all-wrapper {\n padding: calc(var(--space-unit) * 1.5) calc(var(--space-unit) * 0.5);\n}\n\n:host([size=\"x-small\"]) > div.open > div.open-combo-data > div > div.check-all-wrapper {\n padding: var(--space-unit) calc(var(--space-unit) * 0.5);\n}\n","import {Component, Prop, h, State, Listen, Watch, Event, Element, EventEmitter} from \"@stencil/core\";\nimport {ComboItem, InputType, ListDividerType, ControlSize, KeyboardCode, ListSize} from \"../../../beans\";\nimport {ZInput} from \"../z-input\";\nimport {handleKeyboardSubmit} from \"../../../utils/utils\";\nimport {ZMyzListItem} from \"../../../snowflakes/myz/list/z-myz-list-item\";\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: string;\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 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 const elem = this.element.shadowRoot.querySelector(`.${this.getCheckboxClass()} input`);\n if (elem) {\n elem.setAttribute(\"tabindex\", \"0\");\n }\n }\n\n @Listen(\"ariaDescendantFocus\")\n getFocusedItemHandler(e: CustomEvent): void {\n this.focusedItemId = e.detail;\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 let size;\n switch (this.size) {\n case ControlSize.BIG:\n size = ListSize.LARGE;\n break;\n case ControlSize.SMALL:\n size = ListSize.SMALL;\n break;\n case ControlSize.X_SMALL:\n size = ListSize.SMALL;\n break;\n default:\n size = ListSize.MEDIUM;\n }\n\n return size;\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 getCheckAllId(): string {\n return `combo-checkbox-${this.inputid}-check-all`;\n }\n\n private hasCheckAllDisabled(): boolean {\n return this.maxcheckableitems && this.maxcheckableitems < this.itemsList.length;\n }\n\n private resetInputTabIndex(): void {\n this.element.shadowRoot.querySelectorAll(`.${this.getCheckboxClass()} input`).forEach(function (item) {\n item.setAttribute(\"tabindex\", \"-1\");\n });\n }\n\n private setInputTabIndex(itemId, index): number {\n if (index === 0) {\n if (\n !this.hascheckall \|\|\n (this.hascheckall && this.searchValue) \|\|\n (this.hascheckall && this.hasCheckAllDisabled())\n ) {\n return 0;\n }\n }\n\n return itemId === this.focusedItemId ? 0 : -1;\n }\n\n private handleSelectArrowsNavigation(e: KeyboardEvent, key: number): void {\n let index = key;\n\n this.resetInputTabIndex();\n this.focusComboboxItem(index);\n\n const arrows = [KeyboardCode.ARROW_DOWN, KeyboardCode.ARROW_UP];\n if (!arrows.includes(e.key as KeyboardCode) \|\| !this.isopen) {\n return;\n }\n\n e.preventDefault();\n e.stopPropagation();\n const firstCheckbox = this.hascheckall && !this.hasCheckAllDisabled() && !this.searchValue ? -1 : 0;\n const itemsLentgh = this.renderItemsList.length - 1;\n\n if (e.key === KeyboardCode.ARROW_DOWN) {\n index = index === itemsLentgh ? firstCheckbox : key + 1;\n } else if (e.key === KeyboardCode.ARROW_UP) {\n if (this.hascheckall && !this.searchValue) {\n index = index < 0 ? itemsLentgh : key - 1;\n } else {\n index = index === 0 ? itemsLentgh : key - 1;\n }\n }\n\n this.resetInputTabIndex();\n this.focusComboboxItem(index);\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 focusComboboxItem(index: number): void {\n let focusElem: HTMLElement;\n\n if (index < 0) {\n focusElem = this.element.shadowRoot.querySelector(`#${this.getCheckAllId()}`);\n } else {\n const item = this.renderItemsList[index];\n\n if (!item) {\n return;\n }\n\n focusElem = this.element.shadowRoot.querySelector(`#${this.getItemId(item)}`);\n }\n\n if (focusElem) {\n focusElem.setAttribute(\"tabindex\", \"0\");\n focusElem.focus();\n }\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 this.focusedItemId = \"\";\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-multiselectable={true}\n id={`${this.inputid}_list`}\n aria-owns={`${this.hascheckall ? `${this.getCheckAllId()} ` : ``}${this.itemsList\n .map((item) => this.getItemId(item))\n .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 innerTabIndex={this.setInputTabIndex(item.id, index)}\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.maxcheckableitems === this.selectedCounter}\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, index)}\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 />\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 getComboboxA11yAttributes(): Record<string, unknown> {\n return {\n \"role\": \"combobox\",\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 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 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={this.getCheckAllId()}\n class={this.getCheckboxClass()}\n label={allChecked ? this.uncheckalltext : this.checkalltext}\n disabled={this.hasCheckAllDisabled()}\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, -1)}\n onInputCheck={(e: CustomEvent) => {\n this.checkAll(e.detail.checked);\n }}\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"],"version":3}
1	+ {"file":"z-combobox.entry.cjs.js","mappings":"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","names":["InputType","ControlSize","h","KeyboardKeyCode","handleKeyboardSubmit","index","ListDividerType"],"sources":["src/components/inputs/z-combobox/styles.css?tag=z-combobox&encapsulation=shadow","src/components/inputs/z-combobox/index.tsx"],"sourcesContent":[":host {\n display: block;\n}\n\n:host > div.fixed {\n position: relative;\n}\n\n:host > div > .header {\n position: relative;\n z-index: 10;\n display: flex;\n min-height: 42px;\n align-items: center;\n justify-content: space-between;\n padding: 0 calc(var(--space-unit) * 1.5);\n border: var(--border-size-small) solid var(--color-surface04);\n margin: 0;\n background-color: var(--color-input-field01);\n border-radius: var(--border-radius-small);\n cursor: pointer;\n}\n\n:host([size=\"small\"]) > div > .header {\n min-height: 34px;\n font-size: var(--font-size-2);\n}\n\n:host([size=\"x-small\"]) > div > .header {\n min-height: 30px;\n font-size: var(--font-size-2);\n}\n\n:host([size=\"x-small\"]) > div > .header p.body-3 {\n padding: calc(var(--space-unit) * 0.5) 0;\n}\n\n:host > div > .header:hover {\n outline: var(--border-size-medium) solid var(--color-surface04);\n outline-offset: -2px;\n}\n\n:host > div.open > div.header:focus:focus-visible {\n box-shadow: none;\n}\n\n:host > div > div.header:focus:focus-visible {\n box-shadow: var(--shadow-focus-primary);\n outline: none;\n}\n\n:host > div > .header > p.body-3 {\n padding: var(--space-unit) 0;\n margin: 0;\n color: var(--color-text01);\n}\n\n:host > div > .header > p.body-3 > span {\n font-weight: var(--font-sb);\n}\n\n:host > div > .header > z-icon {\n fill: var(--color-icon02);\n transform: rotate(360deg);\n transition: all 200ms linear;\n}\n\n:host > div > .header > z-icon.small,\n:host > div > .header > z-icon.x-small {\n --z-icon-width: 16px;\n --z-icon-height: 16px;\n}\n\n:host > div.open > .header {\n border: var(--border-size-small) solid var(--color-primary01);\n border-radius: var(--border-radius-small) var(--border-radius-small) 0 0;\n}\n\n:host > div.disabled {\n pointer-events: none;\n}\n\n:host > div.disabled .header {\n border-color: var(--color-disabled01);\n fill: var(--color-disabled01);\n}\n\n:host > div.disabled .header > p.body-3 {\n color: var(--color-disabled02);\n}\n\n:host > div.disabled .header > z-icon:last-child {\n fill: var(--color-disabled01);\n}\n\n:host > div.open > .header > z-icon {\n fill: var(--color-icon02);\n transform: rotate(180deg);\n transition: all 200ms linear;\n}\n\n:host > div.open > div.open-combo-data {\n position: relative;\n z-index: 12;\n padding: var(--space-unit) calc(var(--space-unit) * 2);\n border: var(--border-size-small) solid var(--gray200);\n border-top: 0;\n background-color: var(--color-input-field01);\n border-radius: 0;\n}\n\n:host > div.open > div.open-combo-data > div {\n overflow: auto;\n max-height: 235px;\n padding: 0;\n scrollbar-color: var(--color-primary01) transparent;\n}\n\n:host > div.open > div.open-combo-data > z-input {\n width: 100%;\n margin-bottom: calc(var(--space-unit) * 2);\n}\n\n:host > div.open > div.open-combo-data > div > ul {\n max-height: 235px;\n padding: 0 3px; /* needed for checkbox focus shadow /\n margin: 0;\n}\n\n::-webkit-scrollbar {\n width: 10px;\n background: linear-gradient(to right, transparent 0 3px, var(--gray200) 3px 7px, transparent 7px 10px);\n border-radius: var(--border-radius);\n}\n\n::-webkit-scrollbar-thumb {\n width: 10px;\n background-color: var(--color-primary01);\n}\n\n:host > div.open > z-input {\n position: relative;\n z-index: 1;\n width: 238px;\n margin: 0 calc(var(--space-unit) 2);\n color: var(--color-primary01);\n}\n\n:host > div.open > div.open-combo-data > div.search {\n overflow: hidden;\n max-height: auto;\n margin-top: 0;\n box-shadow: 1px 1px 4px 2px rgb(217 222 227 / 50%);\n}\n\n:host > div.open > div.open-combo-data > div.search > ul {\n overflow: auto;\n max-height: 180px;\n padding: var(--space-unit) calc(var(--space-unit) * 2);\n scrollbar-color: var(--color-primary01) transparent;\n}\n\n:host > div.open > div.open-combo-data > div.search > div {\n display: flex;\n justify-content: center;\n}\n\n:host > div.open > div.open-combo-data > div.search > div > a {\n display: inline-block;\n height: 44px;\n color: var(--color-primary01);\n cursor: pointer;\n font-family: var(--font-family-sans);\n font-size: 14px;\n font-weight: var(--font-sb);\n line-height: 44px;\n text-align: center;\n text-transform: uppercase;\n}\n\n:host > div.open > div.open-combo-data > div.check-all-wrapper {\n padding: calc(var(--space-unit) * 2) calc(var(--space-unit) * 0.5);\n border-bottom: var(--border-size-small) solid var(--gray800);\n margin-bottom: var(--space-unit);\n text-align: left;\n}\n\n:host([size=\"small\"]) > div.open > div.open-combo-data > div.check-all-wrapper {\n padding: calc(var(--space-unit) * 1.5) calc(var(--space-unit) * 0.5);\n}\n\n:host([size=\"x-small\"]) > div.open > div.open-combo-data > div.check-all-wrapper {\n padding: var(--space-unit) calc(var(--space-unit) * 0.5);\n}\n","import {Component, Prop, h, State, Listen, Watch, Event, EventEmitter} from \"@stencil/core\";\nimport {ComboItem, InputType, KeyboardKeyCode, ListDividerType, ControlSize} from \"../../../beans\";\nimport {ZInput} from \"../z-input\";\nimport {handleKeyboardSubmit} from \"../../../utils/utils\";\nimport {ZMyzListItem} from \"../../../snowflakes/myz/list/z-myz-list-item\";\n\n@Component({\n tag: \"z-combobox\",\n styleUrl: \"styles.css\",\n shadow: true,\n})\nexport class ZCombobox {\n /** input unique id /\n @Prop()\n inputid: string;\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 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 @Listen(\"inputCheck\")\n inputCheckListener(e: CustomEvent): void {\n const id = e.detail.id.replace(`combo-checkbox-${this.inputid}-`, \"\");\n\n if (id === \"check-all\" && (!this.maxcheckableitems \|\| this.maxcheckableitems >= this.itemsList.length)) {\n return this.checkAll(e.detail.checked);\n }\n\n this.itemsList = this.itemsList.map((item: ComboItem) => {\n if (item.id === id) {\n item.checked = e.detail.checked;\n }\n\n return item;\n });\n this.updateRenderItemsList();\n this.emitComboboxChange();\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 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 item.name.substring(start, end).bold() +\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 renderHeader(): HTMLDivElement {\n return (\n <div\n class=\"header\"\n onClick={() => this.toggleComboBox()}\n onKeyDown={(ev: KeyboardEvent) => {\n if (ev.keyCode === KeyboardKeyCode.SPACE) {\n ev.preventDefault();\n }\n }}\n onKeyUp={(ev: KeyboardEvent) => handleKeyboardSubmit(ev, this.toggleComboBox)}\n role=\"button\"\n tabindex={0}\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.hascheckall && this.renderCheckAll()}\n {this.renderItems()}\n </div>\n );\n }\n\n private renderItems(): HTMLDivElement {\n if (!this.isopen) {\n return;\n }\n\n return (\n <div\n class={this.searchValue && \"search\"}\n tabindex={-1}\n >\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-myz-list-item\n id={item.id}\n listitemid={item.id}\n action={`combo-li-${this.inputid}`}\n underlined={index !== length - 1}\n class={this.size}\n >\n <z-input\n type={InputType.CHECKBOX}\n checked={item.checked}\n htmlid={`combo-checkbox-${this.inputid}-${item.id}`}\n label={item.name}\n disabled={!item.checked && this.maxcheckableitems && this.maxcheckableitems === this.selectedCounter}\n size={this.size === ControlSize.X_SMALL ? ControlSize.SMALL : this.size}\n />\n </z-myz-list-item>\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(this.itemsList);\n }\n\n return (\n <ul>\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>{listGroups}</ul>;\n }\n\n private renderNoSearchResults(): HTMLUListElement {\n return (\n <ul>\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 if (!this.isopen) {\n return;\n }\n\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 onInputChange={(e: CustomEvent) => {\n if (e.detail.keycode === 27) {\n return this.closeFilterItems();\n }\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 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={`combo-checkbox-${this.inputid}-check-all`}\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 />\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"],"version":3}