@zanichelli/albe-web-components 12.1.3-rc.0 → 12.1.3

package/dist/components/z-carousel.js

@@ -1,204 +0,0 @@
-import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { R as CarouselArrowsPosition, U as CarouselProgressMode, e as ControlSize, B as ButtonVariant } from './index2.js';
-import { d as defineCustomElement$4 } from './index4.js';
-import { d as defineCustomElement$3 } from './index8.js';
-import { d as defineCustomElement$2 } from './index9.js';
-
-const stylesCss = "z-carousel{font-family:var(--font-family-sans);font-weight:var(--font-rg);--z-carousel-gutter:0}z-carousel[single],z-carousel[single=\"true\"]{display:flex;flex-direction:column;align-items:center;justify-content:center}z-carousel[single=\"true\"] .z-carousel-container,z-carousel[single] .z-carousel-container{width:fit-content;max-width:100%}z-carousel .loading-items-container{display:none}z-carousel .z-carousel-container{display:flex;flex-direction:column}z-carousel .z-carousel-wrapper{position:relative}z-carousel .z-carousel-title{margin-bottom:var(--space-unit);color:var(--gray800)}z-carousel .z-carousel-items-container{display:flex;max-width:100%;flex-direction:row;margin:0;list-style:none;-ms-overflow-style:none;overflow-x:scroll;padding-inline-start:0;scroll-snap-type:x mandatory;scrollbar-width:none;}z-carousel .z-carousel-items-container::-webkit-scrollbar{display:none}z-carousel .z-carousel-items-container>*:not(:last-child){margin-right:var(--z-carousel-gutter)}z-carousel[single=\"true\"] .z-carousel-items-container>*:not(:last-child),z-carousel[single] .z-carousel-items-container>*:not(:last-child){margin-right:0}z-carousel .z-carousel-items-container>li{scroll-snap-align:center}z-button[data-direction]{--z-icon-width:32px;--z-icon-height:32px;position:absolute;bottom:50%;transform:translateY(50%)}z-button[data-direction=\"next\"]{right:0}z-carousel .z-carousel-footer{display:flex;flex-direction:row;align-items:center;justify-content:center;margin-top:var(--space-unit)}z-carousel .z-carousel-footer .numbers-progress,z-carousel .z-carousel-footer .dots-progress{display:flex;align-items:center;justify-content:center}z-carousel .z-carousel-footer .dots-progress button{display:flex;align-items:center;padding:0;border:none;margin:0;background-color:transparent}z-carousel .z-carousel-footer .dots-progress button:not(.current){cursor:pointer}z-carousel .z-carousel-footer .numbers-progress{margin:0 calc(var(--space-unit) / 2);column-gap:calc(var(--space-unit) / 2)}z-carousel .z-carousel-footer .numbers-progress .current{font-weight:var(--font-sb)}z-carousel .z-carousel-footer .dots-progress button.current z-icon{fill:var(--gray800)}z-carousel .z-carousel-footer .dots-progress button:not(.current) z-icon{fill:var(--gray200)}";
-const ZCarouselStyle0 = stylesCss;
-
-const ZCarousel$1 = /*@__PURE__*/ proxyCustomElement(class ZCarousel extends HTMLElement {
-    constructor() {
-        super();
-        this.__registerHost();
-        this.indexChange = createEvent(this, "indexChange", 7);
-        /** Flag indicating the items container is about to scroll programmatically towards the stored index. */
-        this.scrollingTo = null;
-        this.isLoading = undefined;
-        this.label = undefined;
-        this.single = false;
-        this.arrowsPosition = undefined;
-        this.progressMode = undefined;
-        this.ghostLoadingHeight = 100;
-        this.current = 0;
-        this.items = undefined;
-        this.highlightedIndicator = undefined;
-        this.canNavigatePrev = undefined;
-        this.canNavigateNext = undefined;
-    }
-    onIndexChange() {
-        this.indexChange.emit({ currentItem: this.current });
-    }
-    onSingleModeChange() {
-        if (this.single && !this.intersectionObserver) {
-            this.setIntersectionObserver();
-        }
-    }
-    /**
-     * Set an intersection observer to:
-     * - highlight the indicator of the intersecting item during scroll
-     * - set the current item to the last intersecting item
-     */
-    setIntersectionObserver() {
-        this.intersectionObserver = new window.IntersectionObserver((entries) => {
-            const entry = entries.find((entry) => entry.isIntersecting);
-            if (!entry) {
-                return;
-            }
-            const entryIndex = this.items.findIndex((item) => item === entry.target);
-            this.highlightedIndicator = entryIndex;
-            /* skip setting the current item if intersection has been triggered by a programmatic scroll
-            (@see `goTo` function) and the final index has not been reached */
-            if (this.scrollingTo !== null && entryIndex !== this.scrollingTo) {
-                return;
-            }
-            this.scrollingTo = null;
-            this.current = entryIndex;
-        }, {
-            root: this.itemsContainer,
-            threshold: 0.5,
-        });
-        this.items.forEach((element) => this.intersectionObserver.observe(element));
-    }
-    onPrev() {
-        if (this.single) {
-            this.goTo(Math.max(0, this.current - 1));
-            return;
-        }
-        const scroller = this.itemsContainer;
-        if (!scroller) {
-            return;
-        }
-        scroller.scrollBy({
-            left: -scroller.clientWidth / 2,
-            behavior: "smooth",
-        });
-    }
-    onNext() {
-        if (this.single) {
-            this.goTo(Math.min(this.current + 1, this.items.length - 1));
-            return;
-        }
-        const scroller = this.itemsContainer;
-        if (!scroller) {
-            return;
-        }
-        scroller.scrollBy({
-            left: scroller.clientWidth / 2,
-            behavior: "smooth",
-        });
-    }
-    /**
-     * Check if navigation buttons can be enabled or not and set local states.
-     */
-    checkNavigationValidity() {
-        if (this.single) {
-            this.canNavigatePrev = this.current > 1;
-            this.canNavigateNext = this.current < this.items.length - 1;
-        }
-        this.canNavigatePrev = this.itemsContainer.scrollLeft > 0;
-        this.canNavigateNext =
-            this.itemsContainer.scrollLeft < this.itemsContainer.scrollWidth - this.itemsContainer.clientWidth;
-    }
-    /**
-     * Check if footer can be rendered.
-     */
-    canShowFooter() {
-        return (this.arrowsPosition === CarouselArrowsPosition.BOTTOM ||
-            this.progressMode === CarouselProgressMode.DOTS ||
-            this.progressMode === CarouselProgressMode.NUMBERS);
-    }
-    /**
-     * Set current item to passed index.
-     * @param {number} index Index to set
-     */
-    goTo(index) {
-        if (this.current === index) {
-            return;
-        }
-        this.scrollingTo = index;
-        // the scroll will trigger the IntersectionObserver and set the current item
-        this.itemsContainer.scroll({
-            left: this.items[index].offsetLeft,
-            behavior: "smooth",
-        });
-    }
-    componentDidLoad() {
-        this.itemsContainer = this.hostElement.querySelector(".z-carousel-items-container");
-        if (!this.itemsContainer) {
-            return;
-        }
-        this.items = Array.from(this.itemsContainer.querySelectorAll(":scope > li"));
-        if (this.single) {
-            this.setIntersectionObserver();
-        }
-        this.itemsContainer.addEventListener("scroll", this.checkNavigationValidity.bind(this), { passive: true });
-        this.checkNavigationValidity();
-        this.items.forEach((item) => {
-            item.setAttribute("role", "group");
-            item.setAttribute("aria-roledescription", "slide");
-        });
-    }
-    render() {
-        if (this.isLoading) {
-            return (h(Host, null, this.label && h("div", { class: "heading-4 z-carousel-title" }, this.label), h("div", { style: { height: `${this.ghostLoadingHeight}px` } }, h("z-ghost-loading", null), h("div", { class: "loading-items-container" }, h("slot", null)))));
-        }
-        return (h(Host, null, h("div", { class: "z-carousel-container", role: "group", "aria-roledescription": "carousel", "aria-label": this.label || "Carousel" }, this.label && h("div", { class: "heading-4 z-carousel-title" }, this.label), h("div", { class: "z-carousel-wrapper" }, this.arrowsPosition === CarouselArrowsPosition.OVER && (h("z-button", { size: ControlSize.SMALL, "data-direction": "prev", icon: "chevron-left", onClick: this.onPrev.bind(this), disabled: !this.canNavigatePrev, ariaLabel: this.single ? "Mostra l'elemento precedente" : "Mostra gli elementi precedenti" })), h("ul", { class: "z-carousel-items-container", "aria-atomic": "false", "aria-live": "polite" }, h("slot", null)), this.arrowsPosition === CarouselArrowsPosition.OVER && (h("z-button", { size: ControlSize.SMALL, "data-direction": "next", icon: "chevron-right", onClick: this.onNext.bind(this), disabled: !this.canNavigateNext, ariaLabel: this.single ? "Mostra l'elemento successivo" : "Mostra gli elementi successivi" })))), this.canShowFooter() && (h("div", { class: "z-carousel-footer" }, this.arrowsPosition === CarouselArrowsPosition.BOTTOM && (h("z-button", { size: ControlSize.SMALL, variant: ButtonVariant.TERTIARY, icon: "arrow-simple-left-filled", onClick: this.onPrev.bind(this), disabled: !this.canNavigatePrev, ariaLabel: this.single ? "Mostra l'elemento precedente" : "Mostra gli elementi precedenti" })), this.progressMode === CarouselProgressMode.DOTS && this.single && this.items && (h("div", { class: "dots-progress" }, this.items.map((_item, key) => (h("button", { type: "button", class: { current: this.highlightedIndicator === key }, "aria-label": this.highlightedIndicator === key ? "Elemento corrente" : `Spostati all'elemento ${key + 1}`, onClick: () => this.goTo(key) }, h("z-icon", { name: this.highlightedIndicator === key ? "white-circle-filled" : "black-circle-filled" })))))), this.progressMode === CarouselProgressMode.NUMBERS && this.single && this.items && (h("div", { class: "numbers-progress interactive-3" }, h("span", { class: "current" }, this.current + 1), h("span", null, "di"), h("span", null, this.items.length))), this.arrowsPosition === CarouselArrowsPosition.BOTTOM && (h("z-button", { size: ControlSize.SMALL, variant: ButtonVariant.TERTIARY, icon: "arrow-simple-right-filled", onClick: this.onNext.bind(this), disabled: !this.canNavigateNext, ariaLabel: this.single ? "Mostra l'elemento successivo" : "Mostra gli elementi successivi" }))))));
-    }
-    get hostElement() { return this; }
-    static get watchers() { return {
-        "current": ["onIndexChange"],
-        "single": ["onSingleModeChange"]
-    }; }
-    static get style() { return ZCarouselStyle0; }
-}, [4, "z-carousel", {
-        "isLoading": [4, "is-loading"],
-        "label": [1],
-        "single": [4],
-        "arrowsPosition": [1, "arrows-position"],
-        "progressMode": [1, "progress-mode"],
-        "ghostLoadingHeight": [2, "ghost-loading-height"],
-        "current": [32],
-        "items": [32],
-        "highlightedIndicator": [32],
-        "canNavigatePrev": [32],
-        "canNavigateNext": [32]
-    }, undefined, {
-        "current": ["onIndexChange"],
-        "single": ["onSingleModeChange"]
-    }]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["z-carousel", "z-button", "z-ghost-loading", "z-icon"];
-    components.forEach(tagName => { switch (tagName) {
-        case "z-carousel":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, ZCarousel$1);
-            }
-            break;
-        case "z-button":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$4();
-            }
-            break;
-        case "z-ghost-loading":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$3();
-            }
-            break;
-        case "z-icon":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$2();
-            }
-            break;
-    } });
-}
-
-const ZCarousel = ZCarousel$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { ZCarousel, defineCustomElement };
-
-//# sourceMappingURL=z-carousel.js.map

package/dist/components/z-carousel.js.map

@@ -1 +0,0 @@
-{"file":"z-carousel.js","mappings":"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","names":["ZCarousel"],"sources":["src/components/z-carousel/styles.css?tag=z-carousel","src/components/z-carousel/index.tsx"],"sourcesContent":["z-carousel {\n  font-family: var(--font-family-sans);\n  font-weight: var(--font-rg);\n\n  --z-carousel-gutter: 0;\n}\n\nz-carousel[single],\nz-carousel[single=\"true\"] {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n}\n\nz-carousel[single=\"true\"] .z-carousel-container,\nz-carousel[single] .z-carousel-container {\n  width: fit-content;\n  max-width: 100%;\n}\n\nz-carousel .loading-items-container {\n  display: none;\n}\n\nz-carousel .z-carousel-container {\n  display: flex;\n  flex-direction: column;\n}\n\nz-carousel .z-carousel-wrapper {\n  position: relative;\n}\n\nz-carousel .z-carousel-title {\n  margin-bottom: var(--space-unit);\n  color: var(--gray800);\n}\n\nz-carousel .z-carousel-items-container {\n  display: flex;\n  max-width: 100%;\n  flex-direction: row;\n  margin: 0;\n  list-style: none;\n  -ms-overflow-style: none; /* IE and Edge */\n  overflow-x: scroll;\n  padding-inline-start: 0;\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 */\nz-carousel .z-carousel-items-container::-webkit-scrollbar {\n  display: none;\n}\n\nz-carousel .z-carousel-items-container > *:not(:last-child) {\n  margin-right: var(--z-carousel-gutter);\n}\n\nz-carousel[single=\"true\"] .z-carousel-items-container > *:not(:last-child),\nz-carousel[single] .z-carousel-items-container > *:not(:last-child) {\n  margin-right: 0;\n}\n\nz-carousel .z-carousel-items-container > li {\n  scroll-snap-align: center;\n}\n\nz-button[data-direction] {\n  --z-icon-width: 32px;\n  --z-icon-height: 32px;\n\n  position: absolute;\n  bottom: 50%;\n  transform: translateY(50%);\n}\n\nz-button[data-direction=\"next\"] {\n  right: 0;\n}\n\nz-carousel .z-carousel-footer {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: center;\n  margin-top: var(--space-unit);\n}\n\nz-carousel .z-carousel-footer .numbers-progress,\nz-carousel .z-carousel-footer .dots-progress {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\nz-carousel .z-carousel-footer .dots-progress button {\n  display: flex;\n  align-items: center;\n  padding: 0;\n  border: none;\n  margin: 0;\n  background-color: transparent;\n}\n\nz-carousel .z-carousel-footer .dots-progress button:not(.current) {\n  cursor: pointer;\n}\n\nz-carousel .z-carousel-footer .numbers-progress {\n  margin: 0 calc(var(--space-unit) / 2);\n  column-gap: calc(var(--space-unit) / 2);\n}\n\nz-carousel .z-carousel-footer .numbers-progress .current {\n  font-weight: var(--font-sb);\n}\n\nz-carousel .z-carousel-footer .dots-progress button.current z-icon {\n  fill: var(--gray800);\n}\n\nz-carousel .z-carousel-footer .dots-progress button:not(.current) z-icon {\n  fill: var(--gray200);\n}\n","import {Component, h, Prop, Element, Watch, Event, EventEmitter, State, Host} from \"@stencil/core\";\nimport {CarouselArrowsPosition, CarouselProgressMode, ButtonVariant, ControlSize} 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 as it is wrapped inside an `<ul>`\n */\n@Component({\n  tag: \"z-carousel\",\n  styleUrl: \"styles.css\",\n  shadow: false,\n})\nexport class ZCarousel {\n  @Element() hostElement: HTMLZCarouselElement;\n\n  /** The z-carousel is on loading state */\n  @Prop()\n  isLoading: boolean;\n\n  /** The z-carousel title, if given. */\n  @Prop()\n  label?: string;\n\n  /** Shows only one content at a time */\n  @Prop()\n  single = false;\n\n  /** Arrow buttons position */\n  @Prop()\n  arrowsPosition?: CarouselArrowsPosition;\n\n  /** Progress indicator. Only available for `single` mode */\n  @Prop()\n  progressMode?: CarouselProgressMode;\n\n  /** The height of z-carousel ghost loading, this prop is mandatory when isloading is set to true, as otherwise the component won't show. */\n  @Prop()\n  ghostLoadingHeight = 100;\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  private itemsContainer: HTMLUListElement;\n\n  /** Observer that handles current index change when scrolling on single mode. */\n  private intersectionObserver: IntersectionObserver;\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;\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  /**\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 window.IntersectionObserver(\n      (entries) => {\n        const entry = entries.find((entry) => entry.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  private onPrev(): void {\n    if (this.single) {\n      this.goTo(Math.max(0, this.current - 1));\n\n      return;\n    }\n\n    const scroller = this.itemsContainer;\n    if (!scroller) {\n      return;\n    }\n\n    scroller.scrollBy({\n      left: -scroller.clientWidth / 2,\n      behavior: \"smooth\",\n    });\n  }\n\n  private onNext(): void {\n    if (this.single) {\n      this.goTo(Math.min(this.current + 1, this.items.length - 1));\n\n      return;\n    }\n\n    const scroller = this.itemsContainer;\n    if (!scroller) {\n      return;\n    }\n\n    scroller.scrollBy({\n      left: scroller.clientWidth / 2,\n      behavior: \"smooth\",\n    });\n  }\n\n  /**\n   * Check if navigation buttons can be enabled or not and set local states.\n   */\n  private checkNavigationValidity(): void {\n    if (this.single) {\n      this.canNavigatePrev = this.current > 1;\n      this.canNavigateNext = this.current < this.items.length - 1;\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 can be rendered.\n   */\n  private canShowFooter(): boolean {\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 {number} index Index to set\n   */\n  private goTo(index): void {\n    if (this.current === index) {\n      return;\n    }\n\n    this.scrollingTo = index;\n    // the scroll will trigger the IntersectionObserver and set the current item\n    this.itemsContainer.scroll({\n      left: this.items[index].offsetLeft,\n      behavior: \"smooth\",\n    });\n  }\n\n  componentDidLoad(): void {\n    this.itemsContainer = this.hostElement.querySelector(\".z-carousel-items-container\");\n    if (!this.itemsContainer) {\n      return;\n    }\n\n    this.items = Array.from(this.itemsContainer.querySelectorAll(\":scope > li\"));\n\n    if (this.single) {\n      this.setIntersectionObserver();\n    }\n\n    this.itemsContainer.addEventListener(\"scroll\", this.checkNavigationValidity.bind(this), {passive: true});\n    this.checkNavigationValidity();\n\n    this.items.forEach((item) => {\n      item.setAttribute(\"role\", \"group\");\n      item.setAttribute(\"aria-roledescription\", \"slide\");\n    });\n  }\n\n  render(): HTMLZCarouselElement {\n    if (this.isLoading) {\n      return (\n        <Host>\n          {this.label && <div class=\"heading-4 z-carousel-title\">{this.label}</div>}\n          <div style={{height: `${this.ghostLoadingHeight}px`}}>\n            <z-ghost-loading></z-ghost-loading>\n            <div class=\"loading-items-container\">\n              <slot />\n            </div>\n          </div>\n        </Host>\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=\"heading-4 z-carousel-title\">{this.label}</div>}\n          <div class=\"z-carousel-wrapper\">\n            {this.arrowsPosition === CarouselArrowsPosition.OVER && (\n              <z-button\n                size={ControlSize.SMALL}\n                data-direction=\"prev\"\n                icon=\"chevron-left\"\n                onClick={this.onPrev.bind(this)}\n                disabled={!this.canNavigatePrev}\n                ariaLabel={this.single ? \"Mostra l'elemento precedente\" : \"Mostra gli elementi precedenti\"}\n              />\n            )}\n            <ul\n              class=\"z-carousel-items-container\"\n              aria-atomic=\"false\"\n              aria-live=\"polite\"\n            >\n              <slot />\n            </ul>\n            {this.arrowsPosition === CarouselArrowsPosition.OVER && (\n              <z-button\n                size={ControlSize.SMALL}\n                data-direction=\"next\"\n                icon=\"chevron-right\"\n                onClick={this.onNext.bind(this)}\n                disabled={!this.canNavigateNext}\n                ariaLabel={this.single ? \"Mostra l'elemento successivo\" : \"Mostra gli elementi successivi\"}\n              />\n            )}\n          </div>\n        </div>\n\n        {this.canShowFooter() && (\n          <div class=\"z-carousel-footer\">\n            {this.arrowsPosition === CarouselArrowsPosition.BOTTOM && (\n              <z-button\n                size={ControlSize.SMALL}\n                variant={ButtonVariant.TERTIARY}\n                icon=\"arrow-simple-left-filled\"\n                onClick={this.onPrev.bind(this)}\n                disabled={!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((_item, key) => (\n                  <button\n                    type=\"button\"\n                    class={{current: this.highlightedIndicator === key}}\n                    aria-label={\n                      this.highlightedIndicator === key ? \"Elemento corrente\" : `Spostati all'elemento ${key + 1}`\n                    }\n                    onClick={() => this.goTo(key)}\n                  >\n                    <z-icon name={this.highlightedIndicator === key ? \"white-circle-filled\" : \"black-circle-filled\"} />\n                  </button>\n                ))}\n              </div>\n            )}\n            {this.progressMode === CarouselProgressMode.NUMBERS && this.single && this.items && (\n              <div class=\"numbers-progress interactive-3\">\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                size={ControlSize.SMALL}\n                variant={ButtonVariant.TERTIARY}\n                icon=\"arrow-simple-right-filled\"\n                onClick={this.onNext.bind(this)}\n                disabled={!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/components/z-chip.d.ts

@@ -1,11 +0,0 @@
-import type { Components, JSX } from "../types/components";
-
-interface ZChip extends Components.ZChip, HTMLElement {}
-export const ZChip: {
-    prototype: ZChip;
-    new (): ZChip;
-};
-/**
- * Used to define this component and all nested components recursively.
- */
-export const defineCustomElement: () => void;

package/dist/components/z-chip.js

@@ -1,8 +0,0 @@
-import { Z as ZChip$1, d as defineCustomElement$1 } from './index5.js';
-
-const ZChip = ZChip$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { ZChip, defineCustomElement };
-
-//# sourceMappingURL=z-chip.js.map

package/dist/components/z-chip.js.map

@@ -1 +0,0 @@
-{"file":"z-chip.js","mappings":";;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}

package/dist/components/z-combobox.d.ts

@@ -1,11 +0,0 @@
-import type { Components, JSX } from "../types/components";
-
-interface ZCombobox extends Components.ZCombobox, HTMLElement {}
-export const ZCombobox: {
-    prototype: ZCombobox;
-    new (): ZCombobox;
-};
-/**
- * Used to define this component and all nested components recursively.
- */
-export const defineCustomElement: () => void;

package/dist/components/z-combobox.js

@@ -1,276 +0,0 @@
-import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
-import { I as InputType, e as ControlSize, K as KeyboardKeyCode, l as ListDividerType } from './index2.js';
-import { h as handleKeyboardSubmit } from './utils.js';
-import { d as defineCustomElement$7 } from './index6.js';
-import { d as defineCustomElement$6 } from './index9.js';
-import { d as defineCustomElement$5 } from './index10.js';
-import { d as defineCustomElement$4 } from './index11.js';
-import { d as defineCustomElement$3 } from './index14.js';
-import { d as defineCustomElement$2 } from './index20.js';
-
-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$1 = /*@__PURE__*/ proxyCustomElement(class ZCombobox extends HTMLElement {
-    watchItems() {
-        this.itemsList = typeof this.items === "string" ? JSON.parse(this.items) : this.items;
-        this.selectedCounter = this.itemsList.filter((item) => item.checked).length;
-        this.updateRenderItemsList();
-    }
-    watchSearchValue() {
-        this.filterItems(this.searchValue);
-    }
-    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 });
-    }
-    constructor() {
-        super();
-        this.__registerHost();
-        this.__attachShadow();
-        this.comboboxChange = createEvent(this, "comboboxChange", 7);
-        this.itemsList = [];
-        this.inputType = InputType.TEXT;
-        this.inputid = undefined;
-        this.items = undefined;
-        this.label = undefined;
-        this.disabled = false;
-        this.hassearch = false;
-        this.searchlabel = undefined;
-        this.searchplaceholder = undefined;
-        this.searchtitle = undefined;
-        this.noresultslabel = "Nessun risultato";
-        this.isopen = false;
-        this.isfixed = false;
-        this.closesearchtext = "Chiudi";
-        this.hascheckall = false;
-        this.checkalltext = "Seleziona tutti";
-        this.uncheckalltext = "Deseleziona tutti";
-        this.maxcheckableitems = 0;
-        this.hasgroupitems = undefined;
-        this.size = ControlSize.BIG;
-        this.searchValue = undefined;
-        this.selectedCounter = undefined;
-        this.renderItemsList = [];
-        this.toggleComboBox = this.toggleComboBox.bind(this);
-        this.closeFilterItems = this.closeFilterItems.bind(this);
-    }
-    componentWillLoad() {
-        this.watchItems();
-    }
-    componentWillRender() {
-        this.selectedCounter = this.itemsList.filter((item) => item.checked).length;
-    }
-    updateRenderItemsList() {
-        if (this.searchValue) {
-            this.filterItems(this.searchValue);
-        }
-        else {
-            this.resetRenderItemsList();
-        }
-    }
-    resetRenderItemsList() {
-        const renderItemsList = [];
-        this.itemsList.forEach((item) => {
-            renderItemsList.push(Object.assign({}, item));
-        });
-        this.renderItemsList = renderItemsList;
-    }
-    filterItems(value) {
-        if (!value) {
-            return this.closeFilterItems();
-        }
-        this.resetRenderItemsList();
-        this.renderItemsList = this.renderItemsList.filter((item) => {
-            const start = item.name.toUpperCase().indexOf(value.toUpperCase());
-            const end = start + value.length;
-            const newName = item.name.substring(0, start) +
-                item.name.substring(start, end).bold() +
-                item.name.substring(end, item.name.length);
-            item.name = newName;
-            return start >= 0;
-        });
-    }
-    checkAll(checked = true) {
-        this.itemsList = this.itemsList.map((item) => (Object.assign(Object.assign({}, item), { checked: checked })));
-        this.resetRenderItemsList();
-        this.emitComboboxChange();
-    }
-    closeFilterItems() {
-        this.searchValue = "";
-        this.resetRenderItemsList();
-    }
-    toggleComboBox() {
-        this.isopen = !this.isopen;
-    }
-    renderHeader() {
-        return (h("div", { class: "header", onClick: () => this.toggleComboBox(), onKeyDown: (ev) => {
-                if (ev.keyCode === KeyboardKeyCode.SPACE) {
-                    ev.preventDefault();
-                }
-            }, onKeyUp: (ev) => handleKeyboardSubmit(ev, this.toggleComboBox), role: "button", tabindex: 0 }, h("p", { class: "body-3" }, this.label, h("span", null, this.selectedCounter > 0 && ` (${this.selectedCounter})`)), h("z-icon", { name: "caret-down", class: this.size })));
-    }
-    renderContent() {
-        if (!this.isopen) {
-            return;
-        }
-        return (h("div", { class: "open-combo-data" }, this.hassearch && this.renderSearchInput(), this.hascheckall && this.renderCheckAll(), this.renderItems()));
-    }
-    renderItems() {
-        if (!this.isopen) {
-            return;
-        }
-        return (h("div", { class: this.searchValue && "search", tabindex: -1 }, this.renderList(this.renderItemsList), this.searchValue && this.renderCloseButton()));
-    }
-    renderItem(item, index, length) {
-        return (h("z-myz-list-item", { id: item.id, listitemid: item.id, action: `combo-li-${this.inputid}`, underlined: index !== length - 1, class: this.size }, h("z-input", { type: 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 === ControlSize.X_SMALL ? ControlSize.SMALL : this.size })));
-    }
-    renderList(items) {
-        if (!items) {
-            return;
-        }
-        if (!items.length && this.searchValue) {
-            return this.renderNoSearchResults();
-        }
-        if (this.hasgroupitems) {
-            return this.renderGroups(this.itemsList);
-        }
-        return (h("ul", null, items.map((item, i) => {
-            return this.renderItem(item, i, items.length);
-        })));
-    }
-    renderGroups(items) {
-        const newData = items.reduce((group, item, index) => {
-            var _a;
-            const { category } = item;
-            const zListItem = this.renderItem(item, index, items.length);
-            group[category] = (_a = group[category]) !== null && _a !== void 0 ? _a : [];
-            group[category].push(zListItem);
-            return group;
-        }, {});
-        const listGroups = Object.entries(newData).map(([key, value]) => {
-            return (h("z-list-group", { "divider-type": ListDividerType.ELEMENT }, h("span", { class: "body-3-sb z-list-group-title", slot: "header-title" }, key), value.map((item) => item)));
-        });
-        return h("ul", null, listGroups);
-    }
-    renderNoSearchResults() {
-        return (h("ul", null, h("z-myz-list-item", { id: "no-results", text: this.noresultslabel, listitemid: "no-results", icon: "multiply-circle", class: this.size })));
-    }
-    renderCloseButton() {
-        return (h("div", null, h("a", { onClick: () => this.closeFilterItems(), onKeyUp: (e) => handleKeyboardSubmit(e, this.closeFilterItems), role: "button", tabindex: 0 }, this.closesearchtext)));
-    }
-    renderSearchInput() {
-        if (!this.isopen) {
-            return;
-        }
-        return (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();
-                }
-                this.searchValue = e.detail.value;
-            } }));
-    }
-    renderCheckAll() {
-        if (this.searchValue) {
-            return;
-        }
-        const allChecked = this.selectedCounter === this.itemsList.length;
-        return (h("div", { class: "check-all-wrapper" }, h("z-input", { type: 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 === ControlSize.X_SMALL ? ControlSize.SMALL : this.size })));
-    }
-    render() {
-        return (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()));
-    }
-    static get watchers() { return {
-        "items": ["watchItems"],
-        "searchValue": ["watchSearchValue"]
-    }; }
-    static get style() { return ZComboboxStyle0; }
-}, [1, "z-combobox", {
-        "inputid": [1],
-        "items": [1],
-        "label": [1],
-        "disabled": [516],
-        "hassearch": [4],
-        "searchlabel": [1],
-        "searchplaceholder": [1],
-        "searchtitle": [1],
-        "noresultslabel": [1],
-        "isopen": [1028],
-        "isfixed": [4],
-        "closesearchtext": [1],
-        "hascheckall": [4],
-        "checkalltext": [1],
-        "uncheckalltext": [1],
-        "maxcheckableitems": [2],
-        "hasgroupitems": [4],
-        "size": [1],
-        "searchValue": [32],
-        "selectedCounter": [32],
-        "renderItemsList": [32]
-    }, [[0, "inputCheck", "inputCheckListener"]], {
-        "items": ["watchItems"],
-        "searchValue": ["watchSearchValue"]
-    }]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["z-combobox", "z-divider", "z-icon", "z-input", "z-input-message", "z-list-group", "z-myz-list-item"];
-    components.forEach(tagName => { switch (tagName) {
-        case "z-combobox":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, ZCombobox$1);
-            }
-            break;
-        case "z-divider":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$7();
-            }
-            break;
-        case "z-icon":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$6();
-            }
-            break;
-        case "z-input":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$5();
-            }
-            break;
-        case "z-input-message":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$4();
-            }
-            break;
-        case "z-list-group":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$3();
-            }
-            break;
-        case "z-myz-list-item":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$2();
-            }
-            break;
-    } });
-}
-
-const ZCombobox = ZCombobox$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { ZCombobox, defineCustomElement };
-
-//# sourceMappingURL=z-combobox.js.map

package/dist/components/z-combobox.js.map

@@ -1 +0,0 @@
-{"file":"z-combobox.js","mappings":"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","names":["ZCombobox"],"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}

package/dist/components/z-contextual-menu.d.ts

@@ -1,11 +0,0 @@
-import type { Components, JSX } from "../types/components";
-
-interface ZContextualMenu extends Components.ZContextualMenu, HTMLElement {}
-export const ZContextualMenu: {
-    prototype: ZContextualMenu;
-    new (): ZContextualMenu;
-};
-/**
- * Used to define this component and all nested components recursively.
- */
-export const defineCustomElement: () => void;