npm - @zanichelli/albe-web-components - Versions diffs - 19.2.3-RC1 → 19.2.3 - Mend

@zanichelli/albe-web-components 19.2.3-RC1 → 19.2.3

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

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

@@ -1,30 +1,28 @@
-import { r as registerInstance, c as createEvent, h, H as Host, d as getElement } from './index-ByN2sYu6.js';
-import { Q as CarouselArrowsPosition, R as CarouselProgressMode, B as ButtonVariant } from './index-BKCj6NR2.js';
+import { r as registerInstance, c as createEvent, h, a as Host, g as getElement } from './index-c8ceadeb.js';
+import { Q as CarouselArrowsPosition, R as CarouselProgressMode, B as ButtonVariant } from './index-106473a8.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;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 typographyCss = () => `:root{--font-family-sans:"IBM Plex Sans", sans-serif;--font-family-serif:"IBM Plex Serif", serif;--font-lt:300;--font-rg:400;--font-sb:600;--font-bd:700;--font-size-1:0.75rem;--font-size-2:0.875rem;--font-size-3:1rem;--font-size-4:1.125rem;--font-size-5:1.25rem;--font-size-6:1.5rem;--font-size-7:1.75rem;--font-size-8:2rem;--font-size-9:2.25rem;--font-size-10:2.625rem;--font-size-11:3rem;--font-size-12:3.375rem;--font-size-13:3.75rem;--font-size-14:4.25rem;--font-size-15:4.75rem;--font-size-16:5.25rem;--font-size-17:5.75rem;--section-title-1:var(--font-sb) var(--font-size-11) / 1.083 var(--font-family-serif);--section-title-2:var(--font-sb) var(--font-size-10) / 1.142 var(--font-family-serif);--section-title-3:var(--font-sb) var(--font-size-9) / 1.222 var(--font-family-serif);--section-title-4:var(--font-sb) var(--font-size-8) / 1.25 var(--font-family-serif);--section-title-5:var(--font-sb) var(--font-size-7) / 1.2857 var(--font-family-serif);--section-title-6:var(--font-sb) var(--font-size-6) / 1.333 var(--font-family-serif)}.heading-1,.heading-1-sb,.heading-1-lt{font-size:var(--font-size-7);font-weight:var(--font-rg);line-height:1.28}.heading-2,.heading-2-sb,.heading-2-lt{font-size:var(--font-size-6);font-weight:var(--font-rg);line-height:1.333}.heading-3,.heading-3-sb,.heading-3-lt{font-size:var(--font-size-6);font-weight:var(--font-rg);line-height:1.333}.heading-4,.heading-4-sb,.heading-4-lt{font-size:var(--font-size-5);font-weight:var(--font-rg);line-height:1.4}.body-1,.body-1-sb{font-size:var(--font-size-5);font-weight:var(--font-rg);line-height:1.4}.body-2,.body-2-sb{font-size:var(--font-size-4);font-weight:var(--font-rg);line-height:1.5}.body-3,.body-3-sb{font-size:var(--font-size-3);font-weight:var(--font-rg);line-height:1.5}.body-4,.body-4-sb{font-size:var(--font-size-2);font-weight:var(--font-rg);letter-spacing:0.16px;line-height:1.4}.body-5,.body-5-sb{font-size:var(--font-size-1);font-weight:var(--font-rg);letter-spacing:0.32px;line-height:1.333}.interactive-1,.interactive-1-sb{font-size:var(--font-size-3);font-weight:var(--font-rg);line-height:1.5}.interactive-2,.interactive-2-sb{font-size:var(--font-size-2);font-weight:var(--font-rg);letter-spacing:0.16px;line-height:1.4}.interactive-3,.interactive-3-sb{font-size:var(--font-size-1);font-weight:var(--font-rg);letter-spacing:0.32px;line-height:1.333}.helper,.helper-sb{font-size:var(--font-size-1);font-style:italic;font-weight:var(--font-rg);letter-spacing:0.32px;line-height:1.333}.section-title-1{font:var(--section-title-1)}.section-title-2{font:var(--section-title-2)}.section-title-3{font:var(--section-title-3)}.section-title-4{font:var(--section-title-4)}.section-title-5{font:var(--section-title-5)}.section-title-6{font:var(--section-title-6)}@media (min-width: 1152px){.heading-1,.heading-1-sb,.heading-1-lt{font-size:var(--font-size-8);font-weight:var(--font-rg);line-height:1.25}.heading-2,.heading-2-sb,.heading-2-lt{font-size:var(--font-size-7);font-weight:var(--font-rg);line-height:1.28}}@media (max-width: 767px){.mobile-heading-1,.mobile-heading-1-sb,.mobile-heading-1-lt{font-size:var(--font-size-7);font-weight:var(--font-rg);line-height:1.28}.mobile-heading-2,.mobile-heading-2-sb,.mobile-heading-2-lt{font-size:var(--font-size-6);font-weight:var(--font-rg);line-height:1.333}.mobile-heading-3,.mobile-heading-3-sb,.mobile-heading-3-lt{font-size:var(--font-size-6);font-weight:var(--font-rg);line-height:1.333}.mobile-heading-4,.mobile-heading-4-sb,.mobile-heading-4-lt{font-size:var(--font-size-5);font-weight:var(--font-rg);line-height:1.4}.mobile-body-1,.mobile-body-1-sb{font-size:var(--font-size-5);font-weight:var(--font-rg);line-height:1.4}.mobile-body-2,.mobile-body-2-sb{font-size:var(--font-size-4);font-weight:var(--font-rg);line-height:1.5}.mobile-body-3,.mobile-body-3-sb{font-size:var(--font-size-3);font-weight:var(--font-rg);line-height:1.5}.mobile-body-4,.mobile-body-4-sb{font-size:var(--font-size-2);font-weight:var(--font-rg);letter-spacing:0.16px;line-height:1.4}.mobile-body-5,.mobile-body-5-sb{font-size:var(--font-size-1);font-weight:var(--font-rg);letter-spacing:0.32px;line-height:1.333}.mobile-interactive-1,.mobile-interactive-1-sb{font-size:var(--font-size-3);font-weight:var(--font-rg);line-height:1.5}.mobile-interactive-2,.mobile-interactive-2-sb{font-size:var(--font-size-2);font-weight:var(--font-rg);letter-spacing:0.16px;line-height:1.4}.mobile-interactive-3,.mobile-interactive-3-sb{font-size:var(--font-size-1);font-weight:var(--font-rg);letter-spacing:0.32px;line-height:1.333}.mobile-section-title-1{font:var(--section-title-1)}.mobile-section-title-2{font:var(--section-title-2)}.mobile-section-title-3{font:var(--section-title-3)}.mobile-section-title-4{font:var(--section-title-4)}.mobile-section-title-5{font:var(--section-title-5)}.mobile-section-title-6{font:var(--section-title-6)}.mobile-heading-1-lt,.mobile-heading-2-lt,.mobile-heading-3-lt,.mobile-heading-4-lt{font-weight:var(--font-lt)}.mobile-heading-1-sb,.mobile-heading-2-sb,.mobile-heading-3-sb,.mobile-heading-4-sb,.mobile-body-1-sb,.mobile-body-2-sb,.mobile-body-3-sb,.mobile-body-4-sb,.mobile-body-5-sb,.mobile-interactive-1-sb,.mobile-interactive-2-sb,.mobile-interactive-3-sb{font-weight:var(--font-sb)}}@media (min-width: 768px) and (max-width: 1151px){.tablet-heading-1,.tablet-heading-1-sb,.tablet-heading-1-lt{font-size:var(--font-size-7);font-weight:var(--font-rg);line-height:1.28}.tablet-heading-2,.tablet-heading-2-sb,.tablet-heading-2-lt{font-size:var(--font-size-6);font-weight:var(--font-rg);line-height:1.333}.tablet-heading-3,.tablet-heading-3-sb,.tablet-heading-3-lt{font-size:var(--font-size-6);font-weight:var(--font-rg);line-height:1.333}.tablet-heading-4,.tablet-heading-4-sb,.tablet-heading-4-lt{font-size:var(--font-size-5);font-weight:var(--font-rg);line-height:1.4}.tablet-body-1,.tablet-body-1-sb{font-size:var(--font-size-5);font-weight:var(--font-rg);line-height:1.4}.tablet-body-2,.tablet-body-2-sb{font-size:var(--font-size-4);font-weight:var(--font-rg);line-height:1.5}.tablet-body-3,.tablet-body-3-sb{font-size:var(--font-size-3);font-weight:var(--font-rg);line-height:1.5}.tablet-body-4,.tablet-body-4-sb{font-size:var(--font-size-2);font-weight:var(--font-rg);letter-spacing:0.16px;line-height:1.4}.tablet-body-5,.tablet-body-5-sb{font-size:var(--font-size-1);font-weight:var(--font-rg);letter-spacing:0.32px;line-height:1.333}.tablet-interactive-1,.tablet-interactive-1-sb{font-size:var(--font-size-3);font-weight:var(--font-rg);line-height:1.5}.tablet-interactive-2,.tablet-interactive-2-sb{font-size:var(--font-size-2);font-weight:var(--font-rg);letter-spacing:0.16px;line-height:1.4}.tablet-interactive-3,.tablet-interactive-3-sb{font-size:var(--font-size-1);font-weight:var(--font-rg);letter-spacing:0.32px;line-height:1.333}.tablet-section-title-1{font:var(--section-title-1)}.tablet-section-title-2{font:var(--section-title-2)}.tablet-section-title-3{font:var(--section-title-3)}.tablet-section-title-4{font:var(--section-title-4)}.tablet-section-title-5{font:var(--section-title-5)}.tablet-section-title-6{font:var(--section-title-6)}.tablet-heading-1-lt,.tablet-heading-2-lt,.tablet-heading-3-lt,.tablet-heading-4-lt{font-weight:var(--font-lt)}.tablet-heading-1-sb,.tablet-heading-2-sb,.tablet-heading-3-sb,.tablet-heading-4-sb,.tablet-body-1-sb,.tablet-body-2-sb,.tablet-body-3-sb,.tablet-body-4-sb,.tablet-body-5-sb,.tablet-interactive-1-sb,.tablet-interactive-2-sb,.tablet-interactive-3-sb{font-weight:var(--font-sb)}}@media (min-width: 1152px) and (max-width: 1365px){.desktop-heading-1,.desktop-heading-1-sb,.desktop-heading-1-lt{font-size:var(--font-size-8);font-weight:var(--font-rg);line-height:1.25}.desktop-heading-2,.desktop-heading-2-sb,.desktop-heading-2-lt{font-size:var(--font-size-7);font-weight:var(--font-rg);line-height:1.28}.desktop-heading-3,.desktop-heading-3-sb,.desktop-heading-3-lt{font-size:var(--font-size-6);font-weight:var(--font-rg);line-height:1.333}.desktop-heading-4,.desktop-heading-4-sb,.desktop-heading-4-lt{font-size:var(--font-size-5);font-weight:var(--font-rg);line-height:1.4}.desktop-body-1,.desktop-body-1-sb{font-size:var(--font-size-5);font-weight:var(--font-rg);line-height:1.4}.desktop-body-2,.desktop-body-2-sb{font-size:var(--font-size-4);font-weight:var(--font-rg);line-height:1.5}.desktop-body-3,.desktop-body-3-sb{font-size:var(--font-size-3);font-weight:var(--font-rg);line-height:1.5}.desktop-body-4,.desktop-body-4-sb{font-size:var(--font-size-2);font-weight:var(--font-rg);letter-spacing:0.16px;line-height:1.4}.desktop-body-5,.desktop-body-5-sb{font-size:var(--font-size-1);font-weight:var(--font-rg);letter-spacing:0.32px;line-height:1.333}.desktop-interactive-1,.desktop-interactive-1-sb{font-size:var(--font-size-3);font-weight:var(--font-rg);line-height:1.5}.desktop-interactive-2,.desktop-interactive-2-sb{font-size:var(--font-size-2);font-weight:var(--font-rg);letter-spacing:0.16px;line-height:1.4}.desktop-interactive-3,.desktop-interactive-3-sb{font-size:var(--font-size-1);font-weight:var(--font-rg);letter-spacing:0.32px;line-height:1.333}.desktop-section-title-1{font:var(--section-title-1)}.desktop-section-title-2{font:var(--section-title-2)}.desktop-section-title-3{font:var(--section-title-3)}.desktop-section-title-4{font:var(--section-title-4)}.desktop-section-title-5{font:var(--section-title-5)}.desktop-section-title-6{font:var(--section-title-6)}.desktop-heading-1-lt,.desktop-heading-2-lt,.desktop-heading-3-lt,.desktop-heading-4-lt{font-weight:var(--font-lt)}.desktop-heading-1-sb,.desktop-heading-2-sb,.desktop-heading-3-sb,.desktop-heading-4-sb,.desktop-body-1-sb,.desktop-body-2-sb,.desktop-body-3-sb,.desktop-body-4-sb,.desktop-body-5-sb,.desktop-interactive-1-sb,.desktop-interactive-2-sb,.desktop-interactive-3-sb{font-weight:var(--font-sb)}}@media (min-width: 1366px){.wide-heading-1,.wide-heading-1-sb,.wide-heading-1-lt{font-size:var(--font-size-8);font-weight:var(--font-rg);line-height:1.25}.wide-heading-2,.wide-heading-2-sb,.wide-heading-2-lt{font-size:var(--font-size-7);font-weight:var(--font-rg);line-height:1.28}.wide-heading-3,.wide-heading-3-sb,.wide-heading-3-lt{font-size:var(--font-size-6);font-weight:var(--font-rg);line-height:1.333}.wide-heading-4,.wide-heading-4-sb,.wide-heading-4-lt{font-size:var(--font-size-5);font-weight:var(--font-rg);line-height:1.4}.wide-body-1,.wide-body-1-sb{font-size:var(--font-size-5);font-weight:var(--font-rg);line-height:1.4}.wide-body-2,.wide-body-2-sb{font-size:var(--font-size-4);font-weight:var(--font-rg);line-height:1.5}.wide-body-3,.wide-body-3-sb{font-size:var(--font-size-3);font-weight:var(--font-rg);line-height:1.5}.wide-body-4,.wide-body-4-sb{font-size:var(--font-size-2);font-weight:var(--font-rg);letter-spacing:0.16px;line-height:1.4}.wide-body-5,.wide-body-5-sb{font-size:var(--font-size-1);font-weight:var(--font-rg);letter-spacing:0.32px;line-height:1.333}.wide-interactive-1,.wide-interactive-1-sb{font-size:var(--font-size-3);font-weight:var(--font-rg);line-height:1.5}.wide-interactive-2,.wide-interactive-2-sb{font-size:var(--font-size-2);font-weight:var(--font-rg);letter-spacing:0.16px;line-height:1.4}.wide-interactive-3,.wide-interactive-3-sb{font-size:var(--font-size-1);font-weight:var(--font-rg);letter-spacing:0.32px;line-height:1.333}.wide-section-title-1{font:var(--section-title-1)}.wide-section-title-2{font:var(--section-title-2)}.wide-section-title-3{font:var(--section-title-3)}.wide-section-title-4{font:var(--section-title-4)}.wide-section-title-5{font:var(--section-title-5)}.wide-section-title-6{font:var(--section-title-6)}.wide-heading-1-lt,.wide-heading-2-lt,.wide-heading-3-lt,.wide-heading-4-lt{font-weight:var(--font-lt)}.wide-heading-1-sb,.wide-heading-2-sb,.wide-heading-3-sb,.wide-heading-4-sb,.wide-body-1-sb,.wide-body-2-sb,.wide-body-3-sb,.wide-body-4-sb,.wide-body-5-sb,.wide-interactive-1-sb,.wide-interactive-2-sb,.wide-interactive-3-sb{font-weight:var(--font-sb)}}.heading-1-lt,.heading-2-lt,.heading-3-lt,.heading-4-lt{font-weight:var(--font-lt)}.heading-1-sb,.heading-2-sb,.heading-3-sb,.heading-4-sb,.body-1-sb,.body-2-sb,.body-3-sb,.body-4-sb,.body-5-sb,.interactive-1-sb,.interactive-2-sb,.interactive-3-sb,.helper-sb{font-weight:var(--font-sb)}`;
+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 {
     constructor(hostRef) {
         registerInstance(this, hostRef);
         this.indexChange = createEvent(this, "indexChange", 7);
-        /** Shows only one content at a time */
+        /** 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;
-        /**
-         * Whether the navigation arrow buttons over the items are always visible or only on mouse hover.
-         * If set to `false`, the arrows will not be visible on mobile.
-         * Only meaningful with `arrowsPosition` set to `OVER`.
-         */
+        this.arrowsPosition = undefined;
+        this.progressMode = undefined;
         this.fixedArrows = true;
-        /** The height of the ghost loader (only visible when `isLoading` is set to `true`) */
         this.ghostLoadingHeight = 100;
-        /** When enabled, navigating next the last item will go back to the first item and vice versa. */
         this.infinite = false;
-        /** Current item index for single mode. */
         this.current = 0;
-        /** Flag indicating the items container is about to scroll programmatically towards the stored index. */
-        this.scrollingTo = null;
+        this.items = undefined;
+        this.highlightedIndicator = undefined;
+        this.canNavigatePrev = undefined;
+        this.canNavigateNext = undefined;
     }
     onIndexChange() {
         this.indexChange.emit({ currentItem: this.current });
@@ -37,24 +35,6 @@ const ZCarousel = class {
     onInfiniteModeChange() {
         this.checkNavigationValidity();
     }
-    onLoadingChange() {
-        if (!this.isLoading) {
-            // when loading is finished, we need to set up things with the real items that were not present during the loading phase
-            this.setupObserversAndListeners();
-        }
-    }
-    /** Set up all observers and listeners related to the rendered items. */
-    setupObserversAndListeners() {
-        var _a;
-        this.setupItems();
-        (_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);
-        if (this.single) {
-            this.setIntersectionObserver();
-        }
-        this.checkNavigationValidity();
-    }
     /**
      * Set an intersection observer to:
      * - highlight the indicator of the intersecting item during scroll
@@ -166,10 +146,15 @@ const ZCarousel = class {
         });
     }
     componentDidLoad() {
-        if (this.isLoading) {
-            return;
+        var _a, _b;
+        (_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));
+        (_b = this.resizeObserver) === null || _b === void 0 ? void 0 : _b.observe(this.itemsContainer);
+        this.setupItems();
+        if (this.single) {
+            this.setIntersectionObserver();
         }
-        this.setupObserversAndListeners();
+        this.checkNavigationValidity();
     }
     disconnectedCallback() {
         var _a;
@@ -183,20 +168,13 @@ const ZCarousel = class {
     }
     get host() { return getElement(this); }
     static get watchers() { return {
-        "current": [{
-                "onIndexChange": 0
-            }],
-        "single": [{
-                "onSingleModeChange": 0
-            }],
-        "infinite": [{
-                "onInfiniteModeChange": 0
-            }],
-        "isLoading": [{
-                "onLoadingChange": 0
-            }]
+        "current": ["onIndexChange"],
+        "single": ["onSingleModeChange"],
+        "infinite": ["onInfiniteModeChange"]
     }; }
 };
-ZCarousel.style = stylesCss() + typographyCss();
+ZCarousel.style = ZCarouselStyle0;
 export { ZCarousel as z_carousel };
+//# sourceMappingURL=z-carousel.entry.js.map

package/dist/esm/z-carousel.entry.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"file":"z-carousel.entry.js","mappings":"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","names":[],"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, Element, Event, EventEmitter, Host, Prop, State, Watch, h} from \"@stencil/core\";\nimport {ButtonVariant, CarouselArrowsPosition, CarouselProgressMode} 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(\"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 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/esm/z-chip.entry.js CHANGED Viewed

@@ -1,28 +1,30 @@
-import { r as registerInstance, c as createEvent, h, d as getElement } from './index-ByN2sYu6.js';
-import { w as ZChipType } from './index-BKCj6NR2.js';
+import { r as registerInstance, c as createEvent, h, g as getElement } from './index-c8ceadeb.js';
+import { w as ZChipType } from './index-106473a8.js';
-const stylesCss = () => `.sc-z-chip-h>.z-chip-container.sc-z-chip{display:inline-flex;min-height:28px;align-items:center;padding:0 calc(var(--space-unit) * 1.5);border:var(--border-size-small) solid var(--color-surface03);background-color:var(--color-surface01);border-radius:14px;color:var(--color-default-text);fill:var(--color-default-icon);font-family:var(--font-family-sans);font-size:14px;line-height:28px}.sc-z-chip-h>.z-chip-interactive.sc-z-chip{font-weight:var(--font-sb)}.sc-z-chip-h>.z-chip-container.sc-z-chip>button.sc-z-chip{padding:0;border:none;margin-left:var(--space-unit);background-color:transparent;cursor:pointer}.sc-z-chip-h>.z-chip-container.sc-z-chip>z-icon.sc-z-chip:first-child{margin-right:calc(var(--space-unit) / 2)}.sc-z-chip-h>.z-chip-container.sc-z-chip .interactive-icon.sc-z-chip{fill:var(--color-primary01-icon)}.sc-z-chip-h>.z-chip-container.sc-z-chip:not([aria-disabled]) .interactive-icon.sc-z-chip:hover{color:var(--color-hover-primary);fill:var(--color-hover-primary)}.sc-z-chip-h>.z-chip-container[aria-disabled].sc-z-chip,.sc-z-chip-h>.z-chip-container[aria-disabled].sc-z-chip z-icon.sc-z-chip{color:var(--color-disabled03);cursor:auto;fill:var(--color-disabled03)}.sc-z-chip-h>.z-chip-container[aria-disabled].sc-z-chip{border:var(--border-size-small) solid var(--color-disabled01)}.sc-z-chip-h>.z-chip-container.sc-z-chip>button.sc-z-chip:focus:focus-visible{border-radius:100%;box-shadow:var(--shadow-focus-primary);outline:none}.sc-z-chip-h>button.sc-z-chip:not([disabled]):active:hover .interactive-icon.sc-z-chip{color:var(--color-primary01);fill:var(--color-primary01-icon)}.sc-z-chip-h>.z-chip-container.sc-z-chip>z-icon.sc-z-chip,.sc-z-chip-h>.z-chip-container.sc-z-chip .interactive-icon.sc-z-chip{--z-icon-width:22px;--z-icon-height:22px}.sc-z-chip-h>.z-chip-container.default.sc-z-chip{min-height:44px;border-radius:22px;line-height:44px}.sc-z-chip-h>.z-chip-container.medium.sc-z-chip{min-height:40px;border-radius:22px;line-height:40px}.sc-z-chip-h>.z-chip-container.small.sc-z-chip{min-height:36px;border-radius:22px;line-height:36px}@media (min-width: 1152px){.sc-z-chip-h>.z-chip-container.sc-z-chip{font-size:12px}.sc-z-chip-h>.z-chip-container.default.sc-z-chip{min-height:32px;border-radius:16px;line-height:32px}.sc-z-chip-h>.z-chip-container.medium.sc-z-chip{min-height:28px;border-radius:16px;line-height:28px}.sc-z-chip-h>.z-chip-container.small.sc-z-chip{min-height:24px;border-radius:16px;line-height:24px}.sc-z-chip-h>.z-chip-container.sc-z-chip>z-icon.sc-z-chip,.sc-z-chip-h>.z-chip-container.sc-z-chip .interactive-icon.sc-z-chip{--z-icon-width:14px;--z-icon-height:14px}}`;
+const stylesCss = ".sc-z-chip-h>.z-chip-container.sc-z-chip{display:inline-flex;min-height:28px;align-items:center;padding:0 calc(var(--space-unit) * 1.5);border:var(--border-size-small) solid var(--color-surface03);background-color:var(--color-surface01);border-radius:14px;color:var(--color-default-text);fill:var(--color-default-icon);font-family:var(--font-family-sans);font-size:14px;line-height:28px}.sc-z-chip-h>.z-chip-interactive.sc-z-chip{font-weight:var(--font-sb)}.sc-z-chip-h>.z-chip-container.sc-z-chip>button.sc-z-chip{padding:0;border:none;margin-left:var(--space-unit);background-color:transparent;cursor:pointer}.sc-z-chip-h>.z-chip-container.sc-z-chip>z-icon.sc-z-chip:first-child{margin-right:calc(var(--space-unit) / 2)}.sc-z-chip-h>.z-chip-container.sc-z-chip .interactive-icon.sc-z-chip{fill:var(--color-primary01-icon)}.sc-z-chip-h>.z-chip-container.sc-z-chip:not([aria-disabled]) .interactive-icon.sc-z-chip:hover{color:var(--color-hover-primary);fill:var(--color-hover-primary)}.sc-z-chip-h>.z-chip-container[aria-disabled].sc-z-chip,.sc-z-chip-h>.z-chip-container[aria-disabled].sc-z-chip z-icon.sc-z-chip{color:var(--color-disabled03);cursor:auto;fill:var(--color-disabled03)}.sc-z-chip-h>.z-chip-container[aria-disabled].sc-z-chip{border:var(--border-size-small) solid var(--color-disabled01)}.sc-z-chip-h>.z-chip-container.sc-z-chip>button.sc-z-chip:focus:focus-visible{border-radius:100%;box-shadow:var(--shadow-focus-primary);outline:none}.sc-z-chip-h>button.sc-z-chip:not([disabled]):active:hover .interactive-icon.sc-z-chip{color:var(--color-primary01);fill:var(--color-primary01-icon)}.sc-z-chip-h>.z-chip-container.sc-z-chip>z-icon.sc-z-chip,.sc-z-chip-h>.z-chip-container.sc-z-chip .interactive-icon.sc-z-chip{--z-icon-width:22px;--z-icon-height:22px}.sc-z-chip-h>.z-chip-container.default.sc-z-chip{min-height:44px;border-radius:22px;line-height:44px}.sc-z-chip-h>.z-chip-container.medium.sc-z-chip{min-height:40px;border-radius:22px;line-height:40px}.sc-z-chip-h>.z-chip-container.small.sc-z-chip{min-height:36px;border-radius:22px;line-height:36px}@media (min-width: 1152px){.sc-z-chip-h>.z-chip-container.sc-z-chip{font-size:12px}.sc-z-chip-h>.z-chip-container.default.sc-z-chip{min-height:32px;border-radius:16px;line-height:32px}.sc-z-chip-h>.z-chip-container.medium.sc-z-chip{min-height:28px;border-radius:16px;line-height:28px}.sc-z-chip-h>.z-chip-container.small.sc-z-chip{min-height:24px;border-radius:16px;line-height:24px}.sc-z-chip-h>.z-chip-container.sc-z-chip>z-icon.sc-z-chip,.sc-z-chip-h>.z-chip-container.sc-z-chip .interactive-icon.sc-z-chip{--z-icon-width:14px;--z-icon-height:14px}}";
+const ZChipStyle0 = stylesCss;
 const ZChip = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
         this.interactiveIconClick = createEvent(this, "interactiveIconClick", 7);
-        /** z-chip size type, can be default, medium or small */
+        this.icon = undefined;
         this.type = ZChipType.DEFAULT;
-        /** set z-chip as disabled */
+        this.interactiveIcon = undefined;
         this.disabled = false;
-        /** z-chip aria-label string */
         this.ariaLabel = "";
     }
     render() {
-        return (h("div", { key: '0f8834160a0c8e3ffd107233e2c5de6db6ab6df2', class: {
+        return (h("div", { key: '7dd8f9f2d4c632559d1e9b3b04e2d139d3cdd1ce', class: {
                 "z-chip-container": true,
                 "z-chip-interactive": !!this.interactiveIcon,
                 [this.type]: true,
-            }, "aria-disabled": this.disabled }, this.icon && h("z-icon", { key: '51451c287eb3c450f4cc8a59f40e0d2e71fe95e2', name: this.icon }), h("slot", { key: 'd1c6dce40bf102ab19ca5bfc06fdbc342c97e68e' }), this.interactiveIcon && (h("button", { key: '3274d75df1f052aab16bfb8b663292160757acc8', type: "button", onClick: () => this.interactiveIconClick.emit(), "aria-label": this.ariaLabel, disabled: this.disabled }, h("z-icon", { key: '23605e0639429a9ac5d66eb3394a1a3c9740d601', class: "interactive-icon", name: this.interactiveIcon })))));
+            }, "aria-disabled": this.disabled }, this.icon && h("z-icon", { key: 'af4721aa7ef2e3c8381685bb2eadd19a35effc81', name: this.icon }), h("slot", { key: '521b4fc72980f48dec8ee49c6fc3c06df3c9bf9a' }), this.interactiveIcon && (h("button", { key: '15cb6244073a9402ee3cb147f74cf3763b2a02cd', type: "button", onClick: () => this.interactiveIconClick.emit(), "aria-label": this.ariaLabel, disabled: this.disabled }, h("z-icon", { key: 'a7c434efafd9891a5262dffa24136724acc0f791', class: "interactive-icon", name: this.interactiveIcon })))));
     }
     get el() { return getElement(this); }
 };
-ZChip.style = stylesCss();
+ZChip.style = ZChipStyle0;
 export { ZChip as z_chip };
+//# sourceMappingURL=z-chip.entry.js.map

package/dist/esm/z-chip.entry.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"file":"z-chip.entry.js","mappings":";;;AAAA,MAAM,SAAS,GAAG,+jFAA+jF,CAAC;AACllF,oBAAe,SAAS;;MCQX,KAAK;;;;;oBASG,SAAS,CAAC,OAAO;;wBAQf,KAAK;yBAId,EAAE;;IAMd,MAAM;QACJ,QACE,4DACE,KAAK,EAAE;gBACL,kBAAkB,EAAE,IAAI;gBACxB,oBAAoB,EAAE,CAAC,CAAC,IAAI,CAAC,eAAe;gBAC5C,CAAC,IAAI,CAAC,IAAI,GAAG,IAAI;aAClB,mBACc,IAAI,CAAC,QAAQ,IAE3B,IAAI,CAAC,IAAI,IAAI,+DAAQ,IAAI,EAAE,IAAI,CAAC,IAAI,GAAI,EACzC,8DAAQ,EACP,IAAI,CAAC,eAAe,KACnB,+DACE,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,MAAM,IAAI,CAAC,oBAAoB,CAAC,IAAI,EAAE,gBACnC,IAAI,CAAC,SAAS,EAC1B,QAAQ,EAAE,IAAI,CAAC,QAAQ,IAEvB,+DACE,KAAK,EAAC,kBAAkB,EACxB,IAAI,EAAE,IAAI,CAAC,eAAe,GAC1B,CACK,CACV,CACG,EACN;KACH;;;;;;;","names":[],"sources":["src/components/z-chip/styles.css?tag=z-chip&encapsulation=scoped","src/components/z-chip/index.tsx"],"sourcesContent":[":host > .z-chip-container {\n display: inline-flex;\n min-height: 28px;\n align-items: center;\n padding: 0 calc(var(--space-unit) * 1.5);\n border: var(--border-size-small) solid var(--color-surface03);\n background-color: var(--color-surface01);\n border-radius: 14px;\n color: var(--color-default-text);\n fill: var(--color-default-icon);\n font-family: var(--font-family-sans);\n font-size: 14px;\n line-height: 28px;\n}\n\n:host > .z-chip-interactive {\n font-weight: var(--font-sb);\n}\n\n:host > .z-chip-container > button {\n padding: 0;\n border: none;\n margin-left: var(--space-unit);\n background-color: transparent;\n cursor: pointer;\n}\n\n:host > .z-chip-container > z-icon:first-child {\n margin-right: calc(var(--space-unit) / 2);\n}\n\n:host > .z-chip-container .interactive-icon {\n fill: var(--color-primary01-icon);\n}\n\n:host > .z-chip-container:not([aria-disabled]) .interactive-icon:hover {\n color: var(--color-hover-primary);\n fill: var(--color-hover-primary);\n}\n\n:host > .z-chip-container[aria-disabled],\n:host > .z-chip-container[aria-disabled] z-icon {\n color: var(--color-disabled03);\n cursor: auto;\n fill: var(--color-disabled03);\n}\n\n:host > .z-chip-container[aria-disabled] {\n border: var(--border-size-small) solid var(--color-disabled01);\n}\n\n:host > .z-chip-container > button:focus:focus-visible {\n border-radius: 100%;\n box-shadow: var(--shadow-focus-primary);\n outline: none;\n}\n\n:host > button:not([disabled]):active:hover .interactive-icon {\n color: var(--color-primary01);\n fill: var(--color-primary01-icon);\n}\n\n:host > .z-chip-container > z-icon,\n:host > .z-chip-container .interactive-icon {\n --z-icon-width: 22px;\n --z-icon-height: 22px;\n}\n\n/* :host type */\n:host > .z-chip-container.default {\n min-height: 44px;\n border-radius: 22px;\n line-height: 44px;\n}\n\n:host > .z-chip-container.medium {\n min-height: 40px;\n border-radius: 22px;\n line-height: 40px;\n}\n\n:host > .z-chip-container.small {\n min-height: 36px;\n border-radius: 22px;\n line-height: 36px;\n}\n\n/* Desktop breakpoint */\n@media (min-width: 1152px) {\n :host > .z-chip-container {\n font-size: 12px;\n }\n\n /* :host type */\n :host > .z-chip-container.default {\n min-height: 32px;\n border-radius: 16px;\n line-height: 32px;\n }\n\n :host > .z-chip-container.medium {\n min-height: 28px;\n border-radius: 16px;\n line-height: 28px;\n }\n\n :host > .z-chip-container.small {\n min-height: 24px;\n border-radius: 16px;\n line-height: 24px;\n }\n\n :host > .z-chip-container > z-icon,\n :host > .z-chip-container .interactive-icon {\n --z-icon-width: 14px;\n --z-icon-height: 14px;\n }\n}\n","import {Component, Element, Event, EventEmitter, Prop, h} from \"@stencil/core\";\nimport {ZChipType} from \"../../beans\";\n\n@Component({\n tag: \"z-chip\",\n styleUrl: \"styles.css\",\n shadow: false,\n scoped: true,\n})\nexport class ZChip {\n @Element() el: HTMLZChipElement;\n\n /** Non interactive icon */\n @Prop()\n icon?: string;\n\n /** z-chip size type, can be default, medium or small */\n @Prop({reflect: true})\n type?: ZChipType = ZChipType.DEFAULT;\n\n /** z-chip interactive icon */\n @Prop({reflect: true})\n interactiveIcon?: string;\n\n /** set z-chip as disabled */\n @Prop({reflect: true})\n disabled?: boolean = false;\n\n /** z-chip aria-label string */\n @Prop()\n ariaLabel = \"\";\n\n /** click on interactive icon */\n @Event()\n interactiveIconClick: EventEmitter;\n\n render(): HTMLDivElement {\n return (\n <div\n class={{\n \"z-chip-container\": true,\n \"z-chip-interactive\": !!this.interactiveIcon,\n [this.type]: true,\n }}\n aria-disabled={this.disabled}\n >\n {this.icon && <z-icon name={this.icon} />}\n <slot />\n {this.interactiveIcon && (\n <button\n type=\"button\"\n onClick={() => this.interactiveIconClick.emit()}\n aria-label={this.ariaLabel}\n disabled={this.disabled}\n >\n <z-icon\n class=\"interactive-icon\"\n name={this.interactiveIcon}\n />\n </button>\n )}\n </div>\n );\n }\n}\n"],"version":3}

package/dist/esm/z-color-picker.entry.js CHANGED Viewed

@@ -1,9 +1,10 @@
-import { r as registerInstance, c as createEvent, h, H as Host, d as getElement } from './index-ByN2sYu6.js';
-import { a0 as ColorPickerPalette } from './index-BKCj6NR2.js';
-import { a as containsElement } from './utils-0PByxJyN.js';
-import './breakpoints-Q-tWjk7P.js';
+import { r as registerInstance, c as createEvent, h, a as Host, g as getElement } from './index-c8ceadeb.js';
+import { a0 as ColorPickerPalette } from './index-106473a8.js';
+import { a as containsElement } from './utils-8d6ca808.js';
+import './breakpoints-d148bfde.js';
-const stylesCss = () => `:host{display:grid;width:fit-content;padding:calc(var(--space-unit) * 2);background:var(--color-surface01);gap:var(--space-unit);grid-template-columns:repeat(9, calc(var(--space-unit) * 3));grid-template-rows:repeat(5, calc(var(--space-unit) * 3))}:host,*{box-sizing:border-box}button{--border-color:var(--color-surface05);padding:0;border:none;appearance:none;background:none;border-radius:var(--border-radius);cursor:pointer}button[data-color="#FFFFFF00"]{position:relative}button[data-color="#FFFFFF00"]::after{position:absolute;top:0;right:0;width:100%;height:100%;background:linear-gradient(     -45deg,     transparent 48%,     var(--border-color) 48%,     var(--border-color) 52%,     transparent 52%   );border-radius:var(--border-radius);content:""}button[aria-selected="true"]{box-shadow:0 0 0 1px var(--color-white),     0 0 0 3px var(--color-active-primary)}button:focus-visible{box-shadow:var(--shadow-focus-primary)}button .color-swatch{width:calc(var(--space-unit) * 3);height:calc(var(--space-unit) * 3);border:var(--border-size-small) solid var(--border-color);border-radius:var(--border-radius)}button[data-color="#FFFFFF00"]:disabled{--border-color:var(--color-disabled01-icon);cursor:not-allowed}button[data-color="#FFFFFF00"]:disabled .color-swatch{background-color:var(--color-disabled02)}`;
+const stylesCss = ":host{display:grid;width:fit-content;padding:calc(var(--space-unit) * 2);background:var(--color-surface01);gap:var(--space-unit);grid-template-columns:repeat(9, calc(var(--space-unit) * 3));grid-template-rows:repeat(5, calc(var(--space-unit) * 3))}:host,*{box-sizing:border-box}button{--border-color:var(--color-surface05);padding:0;border:none;appearance:none;background:none;border-radius:var(--border-radius);cursor:pointer}button[data-color=\"#FFFFFF00\"]{position:relative}button[data-color=\"#FFFFFF00\"]::after{position:absolute;top:0;right:0;width:100%;height:100%;background:linear-gradient(\n    -45deg,\n    transparent 48%,\n    var(--border-color) 48%,\n    var(--border-color) 52%,\n    transparent 52%\n  );border-radius:var(--border-radius);content:\"\"}button[aria-selected=\"true\"]{box-shadow:0 0 0 1px var(--color-white),\n    0 0 0 3px var(--color-active-primary)}button:focus-visible{box-shadow:var(--shadow-focus-primary)}button .color-swatch{width:calc(var(--space-unit) * 3);height:calc(var(--space-unit) * 3);border:var(--border-size-small) solid var(--border-color);border-radius:var(--border-radius)}button[data-color=\"#FFFFFF00\"]:disabled{--border-color:var(--color-disabled01-icon);cursor:not-allowed}button[data-color=\"#FFFFFF00\"]:disabled .color-swatch{background-color:var(--color-disabled02)}";
+const ZColorPickerStyle0 = stylesCss;
 const LOCALES = {
     it: {
@@ -23,20 +24,15 @@ const ZColorPicker = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
         this.colorSelected = createEvent(this, "colorSelected", 7);
-        /**
-         * The language for the aria labels inside the color picker.
-         */
-        this.lng = "it";
-        /**
-         * Disables the transparent color option.
-         * Setting `selectedColor` prop to `#FFFFFF00` while `disableTransparent` is true will default to `#333333` ("dark gray 2").
-         */
-        this.disableTransparent = false;
         /**
          * The color keys arranged in row-major order for rendering and navigation.
          */
         this.colorKeysByRow = [];
         this._colorButtons = [];
+        this.selectedColor = undefined;
+        this.lng = "it";
+        this.htmlAriaLabel = undefined;
+        this.disableTransparent = false;
     }
     get colorButtons() {
         if (!this._colorButtons.length) {
@@ -194,23 +190,19 @@ const ZColorPicker = class {
         this.colorKeysByRow = this.sortColorKeysByRow();
     }
     render() {
-        return (h(Host, { key: 'c834820884acc8c3bdf4571379cbe6da74e7ea89', role: "listbox", "aria-label": this.htmlAriaLabel || LOCALES[this.lng]["Select a color"], tabIndex: 0 }, this.colorKeysByRow.map((colorKey) => {
+        return (h(Host, { key: '24f0e76aecda9731ed826e8228f49ca5e08a14a5', role: "listbox", "aria-label": this.htmlAriaLabel || LOCALES[this.lng]["Select a color"], tabIndex: 0 }, this.colorKeysByRow.map((colorKey) => {
             var _a;
             return (h("button", { class: "color-swatch", "data-color": colorKey, role: "option", "aria-selected": ((_a = this.selectedColor) === null || _a === void 0 ? void 0 : _a.toUpperCase()) === colorKey.toUpperCase() ? "true" : "false", tabIndex: -1, onClick: () => (this.selectedColor = colorKey), disabled: this.disableTransparent && colorKey === "#FFFFFF00" }, h("div", { class: "color-swatch", role: "img", "aria-roledescription": LOCALES[this.lng]["Color swatch"], "aria-label": ColorPickerPalette[colorKey][this.lng], title: ColorPickerPalette[colorKey][this.lng], style: { backgroundColor: colorKey } })));
         })));
     }
     get host() { return getElement(this); }
     static get watchers() { return {
-        "disableTransparent": [{
-                "validateTransparentSelection": 0
-            }],
-        "selectedColor": [{
-                "validateTransparentSelection": 0
-            }, {
-                "emitColorSelected": 0
-            }]
+        "disableTransparent": ["validateTransparentSelection"],
+        "selectedColor": ["validateTransparentSelection", "emitColorSelected"]
     }; }
 };
-ZColorPicker.style = stylesCss();
+ZColorPicker.style = ZColorPickerStyle0;
 export { ZColorPicker as z_color_picker };
+//# sourceMappingURL=z-color-picker.entry.js.map

package/dist/esm/z-color-picker.entry.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"file":"z-color-picker.entry.js","mappings":"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","names":[],"sources":["src/components/z-color-picker/styles.css?tag=z-color-picker&encapsulation=shadow","src/components/z-color-picker/index.tsx"],"sourcesContent":[":host {\n display: grid;\n width: fit-content;\n padding: calc(var(--space-unit) * 2);\n background: var(--color-surface01);\n gap: var(--space-unit);\n grid-template-columns: repeat(9, calc(var(--space-unit) * 3));\n grid-template-rows: repeat(5, calc(var(--space-unit) * 3));\n}\n\n:host,\n* {\n box-sizing: border-box;\n}\n\nbutton {\n --border-color: var(--color-surface05);\n\n padding: 0;\n border: none;\n appearance: none;\n background: none;\n border-radius: var(--border-radius);\n cursor: pointer;\n}\n\nbutton[data-color=\"#FFFFFF00\"] {\n position: relative;\n}\n\n/* draw a diagonal line from top right corner */\nbutton[data-color=\"#FFFFFF00\"]::after {\n position: absolute;\n top: 0;\n right: 0;\n width: 100%;\n height: 100%;\n background: linear-gradient(\n -45deg,\n transparent 48%,\n var(--border-color) 48%,\n var(--border-color) 52%,\n transparent 52%\n );\n border-radius: var(--border-radius);\n content: \"\";\n}\n\nbutton[aria-selected=\"true\"] {\n box-shadow:\n 0 0 0 1px var(--color-white),\n 0 0 0 3px var(--color-active-primary);\n}\n\nbutton:focus-visible {\n box-shadow: var(--shadow-focus-primary);\n}\n\nbutton .color-swatch {\n width: calc(var(--space-unit) * 3);\n height: calc(var(--space-unit) * 3);\n border: var(--border-size-small) solid var(--border-color);\n border-radius: var(--border-radius);\n}\n\nbutton[data-color=\"#FFFFFF00\"]:disabled {\n --border-color: var(--color-disabled01-icon);\n\n cursor: not-allowed;\n}\n\nbutton[data-color=\"#FFFFFF00\"]:disabled .color-swatch {\n background-color: var(--color-disabled02);\n}\n","import {Component, Element, Event, EventEmitter, Host, Listen, Method, Prop, Watch, h} from \"@stencil/core\";\nimport {ColorPickerPalette} from \"../../beans\";\nimport {containsElement} from \"../../utils/utils\";\n\nconst LOCALES = {\n it: {\n \"Select a color\": \"Seleziona un colore\",\n \"Color swatch\": \"Campione di colore\",\n },\n en: {\n \"Select a color\": \"Select a color\",\n \"Color swatch\": \"Color swatch\",\n },\n} as const;\n\n/** Number of colors in each group (column) of the grid. */\nconst COLOR_GROUP_SIZE = 5;\n\n/** Number of color groups (columns) in the grid. */\nconst COLOR_GROUPS = 9;\n\n/**\n * Color picker component.\n * This component allows the user to pick a color from a predefined set.\n */\n@Component({\n tag: \"z-color-picker\",\n styleUrl: \"styles.css\",\n shadow: true,\n})\nexport class ZColorPicker {\n @Element() host: HTMLZColorPickerElement;\n\n /**\n * The selected color to highlight.\n */\n @Prop({mutable: true})\n selectedColor: ColorPickerPalette;\n\n /**\n * The language for the aria labels inside the color picker.\n */\n @Prop()\n lng: \"it\" | \"en\" = \"it\";\n\n /**\n * The aria-label for the color picker, e.g. \"Select a background color for the label\".\n */\n @Prop()\n htmlAriaLabel: string;\n\n /**\n * Disables the transparent color option.\n * Setting `selectedColor` prop to `#FFFFFF00` while `disableTransparent` is true will default to `#333333` (\"dark gray 2\").\n */\n @Prop()\n disableTransparent = false;\n\n /**\n * Event emitted when a color is selected.\n */\n @Event()\n colorSelected: EventEmitter<ColorPickerPalette>;\n\n /**\n * The color keys arranged in row-major order for rendering and navigation.\n */\n private colorKeysByRow: ColorPickerPalette[] = [];\n\n private _colorButtons: HTMLButtonElement[] = [];\n\n private get colorButtons(): HTMLButtonElement[] {\n if (!this._colorButtons.length) {\n this._colorButtons = Array.from(this.host.shadowRoot.querySelectorAll(\"button\")) as HTMLButtonElement[];\n }\n\n return this._colorButtons;\n }\n\n /**\n * Reorders color keys from column-major (the format of the `ColorPickerPalette` object) to row-major (visual/navigation order).\n * This ensures button indices in the DOM match their visual position in the grid.\n */\n private sortColorKeysByRow(): ColorPickerPalette[] {\n const allKeys = Object.keys(ColorPickerPalette) as ColorPickerPalette[];\n const ordered: ColorPickerPalette[] = [];\n\n // Iterate through visual positions (row by row, left to right)\n for (let row = 0; row < COLOR_GROUP_SIZE; row++) {\n for (let col = 0; col < COLOR_GROUPS; col++) {\n const columnMajorIndex = col * COLOR_GROUP_SIZE + row;\n if (columnMajorIndex < allKeys.length) {\n ordered.push(allKeys[columnMajorIndex]);\n }\n }\n }\n\n return ordered;\n }\n\n /** Move focus to the specified color button by index. */\n private moveFocusTo(index: number): void {\n // Reset tabindex of other buttons and set tabindex to 0 on selected button\n this.colorButtons.forEach((btn, i) => (btn.tabIndex = i === index ? 0 : -1));\n this.colorButtons[index].focus();\n }\n\n @Watch(\"disableTransparent\")\n @Watch(\"selectedColor\")\n validateTransparentSelection(): void {\n if (this.disableTransparent && this.selectedColor === \"#FFFFFF00\") {\n this.selectedColor = \"#333333\"; // Default to dark gray 2 if transparent is disabled and currently selected\n }\n }\n\n @Watch(\"selectedColor\")\n emitColorSelected(): void {\n this.colorSelected.emit(this.selectedColor);\n }\n\n /**\n * Focuses the selected or first enabled color button and makes the container non-tabbable.\n */\n @Listen(\"focus\")\n @Method()\n async setFocus(): Promise<void> {\n // Reset tabindex of all buttons\n this.colorButtons.forEach((btn) => (btn.tabIndex = -1));\n const firstSelectedOrEnabled =\n this.colorButtons.find((btn) => btn.ariaSelected === \"true\") || this.colorButtons.find((btn) => !btn.disabled);\n if (!firstSelectedOrEnabled) {\n return;\n }\n\n firstSelectedOrEnabled.tabIndex = 0;\n setTimeout(() => {\n firstSelectedOrEnabled.focus();\n }, 50);\n // Set container as non-tabbable\n this.host.tabIndex = -1;\n }\n\n /**\n * Compute next index in row-major grid according to keyboard direction.\n */\n private getNextIndexByKey(currentIndex: number, key: string, totalColors: number): number {\n const row = Math.floor(currentIndex / COLOR_GROUPS);\n const col = currentIndex % COLOR_GROUPS;\n let newIndex = currentIndex;\n\n switch (key) {\n case \"ArrowRight\": {\n const newCol = col + 1;\n const newRow = newCol >= COLOR_GROUPS ? (row + 1) % COLOR_GROUP_SIZE : row;\n newIndex = newRow * COLOR_GROUPS + (newCol % COLOR_GROUPS);\n if (newIndex >= totalColors) {\n newIndex = 0; // Wrap to first item\n }\n\n break;\n }\n case \"ArrowLeft\": {\n const newCol = col - 1;\n const newRow = newCol < 0 ? (row - 1 + COLOR_GROUP_SIZE) % COLOR_GROUP_SIZE : row;\n newIndex = newRow * COLOR_GROUPS + ((newCol + COLOR_GROUPS) % COLOR_GROUPS);\n if (newIndex >= totalColors) {\n newIndex = totalColors - 1; // Wrap to last item\n }\n\n break;\n }\n case \"ArrowDown\": {\n let newRow = row + 1;\n let newCol = col;\n if (newRow >= COLOR_GROUP_SIZE) {\n // Wrap to first item of next column\n newRow = 0;\n newCol = (col + 1) % COLOR_GROUPS;\n }\n newIndex = newRow * COLOR_GROUPS + newCol;\n if (newIndex >= totalColors) {\n newIndex = 0; // Wrap to first item\n }\n\n break;\n }\n case \"ArrowUp\": {\n let newRow = row - 1;\n let newCol = col;\n if (newRow < 0) {\n // Wrap to last item of previous column\n newRow = COLOR_GROUP_SIZE - 1;\n newCol = (col - 1 + COLOR_GROUPS) % COLOR_GROUPS;\n }\n newIndex = newRow * COLOR_GROUPS + newCol;\n if (newIndex >= totalColors) {\n newIndex = totalColors - 1; // Wrap to last item\n }\n\n break;\n }\n }\n\n return newIndex;\n }\n\n /**\n * Handle keyboard navigation within the color picker.\n * Arrow keys move focus in the expected direction, wrapping around edges. The grid is navigated in row-major order.\n */\n @Listen(\"keydown\")\n handleKeyDown(event: KeyboardEvent): void {\n const target = event.composedPath()[0] as HTMLElement;\n if (!target.dataset.color) {\n return;\n }\n\n const currentIndex = this.colorButtons.indexOf(target as HTMLButtonElement);\n const totalColors = this.colorButtons.length;\n if (currentIndex < 0 || ![\"ArrowRight\", \"ArrowLeft\", \"ArrowDown\", \"ArrowUp\"].includes(event.key)) {\n return;\n }\n\n let newIndex = currentIndex;\n let attempts = 0;\n\n do {\n newIndex = this.getNextIndexByKey(newIndex, event.key, totalColors);\n attempts++;\n } while (attempts < totalColors && this.colorButtons[newIndex]?.disabled);\n\n if (\n newIndex !== currentIndex &&\n newIndex >= 0 &&\n newIndex < totalColors &&\n !this.colorButtons[newIndex]?.disabled\n ) {\n this.moveFocusTo(newIndex);\n event.preventDefault();\n event.stopPropagation();\n }\n }\n\n /**\n * When focus leaves the color picker (e.g. user tabs away), reset all buttons to non-tabbable and make the container tabbable again.\n */\n @Listen(\"blur\")\n handleBlur(event: FocusEvent): void {\n const relatedTarget = event.relatedTarget as HTMLElement;\n if (!containsElement(this.host, relatedTarget)) {\n this.host.tabIndex = 0;\n this.colorButtons.forEach((btn) => (btn.tabIndex = -1));\n }\n }\n\n componentWillLoad(): void {\n this.colorKeysByRow = this.sortColorKeysByRow();\n }\n\n render(): HTMLZColorPickerElement {\n return (\n <Host\n role=\"listbox\"\n aria-label={this.htmlAriaLabel || LOCALES[this.lng][\"Select a color\"]}\n tabIndex={0}\n >\n {this.colorKeysByRow.map((colorKey: ColorPickerPalette) => (\n <button\n class=\"color-swatch\"\n data-color={colorKey}\n role=\"option\"\n aria-selected={this.selectedColor?.toUpperCase() === colorKey.toUpperCase() ? \"true\" : \"false\"}\n tabIndex={-1}\n onClick={() => (this.selectedColor = colorKey)}\n disabled={this.disableTransparent && colorKey === \"#FFFFFF00\"}\n >\n <div\n class=\"color-swatch\"\n role=\"img\"\n aria-roledescription={LOCALES[this.lng][\"Color swatch\"]}\n aria-label={ColorPickerPalette[colorKey][this.lng]}\n title={ColorPickerPalette[colorKey][this.lng]}\n style={{backgroundColor: colorKey}}\n ></div>\n </button>\n ))}\n </Host>\n );\n }\n}\n"],"version":3}

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

@@ -1,9 +1,10 @@
-import { r as registerInstance, c as createEvent, h, d as getElement } from './index-ByN2sYu6.js';
-import { e as ControlSize, I as InputType, i as ListSize, g as KeyboardCode, l as ListDividerType } from './index-BKCj6NR2.js';
-import { r as randomId, b as getPlainText } from './utils-0PByxJyN.js';
-import './breakpoints-Q-tWjk7P.js';
+import { r as registerInstance, c as createEvent, h, g as getElement } from './index-c8ceadeb.js';
+import { I as InputType, e as ControlSize, i as ListSize, g as KeyboardCode, l as ListDividerType } from './index-106473a8.js';
+import { r as randomId, e as getPlainText } from './utils-8d6ca808.js';
+import './breakpoints-d148bfde.js';
-const stylesCss = () => `.z-label{display:block;padding-bottom:var(--space-unit);color:var(--color-default-text);font-family:var(--font-family-sans);font-size:var(--font-size-1);font-weight:var(--font-sb);text-align:left;text-transform:uppercase}:host{display:block;min-width:290px;color:var(--color-form-default-text);fill:var(--color-form-default-icon);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-form-surface04);margin:0;background-color:var(--color-form-background);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>div>.header:hover{outline:var(--border-size-medium) solid var(--color-form-surface04);outline-offset:-2px}:host>div>div.header:focus:focus-visible{z-index:16;box-shadow:var(--shadow-focus-primary);outline:none}:host>div>.header>span.body-3>span{font-weight:var(--font-sb)}:host>div>.header>z-icon{fill:var(--color-form-default-icon);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-form-active-primary);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-form-disabled03);fill:var(--color-form-disabled01-icon)}:host>div.disabled .header>span.body-3{color:var(--color-form-disabled03)}:host>div.disabled .header>z-icon:last-child{fill:var(--color-form-disabled01-icon)}:host>div.open>.header>z-icon{fill:var(--color-form-default-icon);transform:rotate(180deg);transition:all 200ms linear}:host>div>div.open-combo-data{display:none}:host>div.open>div.open-combo-data{position:relative;z-index:12;display:block;padding:var(--space-unit) calc(var(--space-unit) * 2);border:var(--border-size-small) solid var(--color-form-surface03);border-top:0;background-color:var(--color-form-background);border-radius:0;box-shadow:var(--shadow-2)}:host .open .open-combo-data z-input .z-label{color:var(--color-form-default-text)}:host>div.open>div.open-combo-data>div>div{overflow:auto;max-height:235px;padding:0;padding-left:var(--space-unit);margin-left:calc(var(--space-unit) * -1);}: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 calc(var(--space-unit) * 0.5);margin:0}:host .open-combo-data z-list-element{--background-color-list-element:var(--color-form-background);--background-hover-color-list-element:var(--color-form-surface03);--background-active-color-list-element:var(--color-form-surface03)}:host .open-combo-data z-list-element[disabled]{pointer-events:none}:host .open-combo-data z-list-element .option-wrap{display:flex;flex-direction:row;align-items:center;cursor:pointer;gap:var(--space-unit)}:host .open-combo-data z-list-element[size="medium"] .option-wrap,:host .open-combo-data z-list-element[size="small"] .option-wrap{--z-icon-width:16px;--z-icon-height:16px;font-size:var(--font-size-2);gap:calc(var(--space-unit) / 2)}:host .open-combo-data z-list-element .option-wrap>z-icon{fill:var(--color-primary01)}:host .open-combo-data z-list-element[disabled] .option-wrap>z-icon{fill:var(--color-disabled01)}:host .open-combo-data z-list-element .option-wrap>z-icon.focused{border-radius:var(--border-radius-small);box-shadow:var(--shadow-focus-primary);outline:none}:host .open-combo-data z-list-element .option-wrap>[role="option"]:focus,:host .open-combo-data z-list-element .option-wrap>[role="option"]:focus-visible{outline:none}::-webkit-scrollbar{width:6px;background:linear-gradient(to right, transparent 0 1px, var(--gray200) 1px 5px, transparent 5px 6px)}::-webkit-scrollbar-thumb{background-color:var(--color-primary01)}::-webkit-scrollbar-thumb:hover{background-color:var(--color-hover-primary)}@supports not selector(::-webkit-scrollbar-track){:host{scrollbar-color:var(--color-primary01) transparent}}:host>div.open>z-input{position:relative;z-index:1;width:238px;margin:0 calc(var(--space-unit) * 2);color:var(--color-form-active-primary)}:host>div.open>div.open-combo-data>div>div.search{overflow:hidden;max-height:none;margin-top:0}: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)}:host .open .open-combo-data .search .no-results{display:flex;align-items:center;column-gap:var(--space-unit)}:host>.open>.open-combo-data .search .close-search{display:flex;justify-content:center}:host>div.open>div.open-combo-data>div>div.search .close-search>a{display:inline-block;height:44px;color:var(--color-form-active-primary);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.search .close-search>a:focus:focus-visible{box-shadow:var(--shadow-focus-primary);outline:none}:host>div.open>div.open-combo-data>div>div.check-all-wrapper{padding:calc(var(--space-unit) * 2) calc(var(--space-unit) * 0.5) calc(var(--space-unit) * 2)     calc(var(--space-unit) * 1.5);border-bottom:var(--border-size-small) solid var(--gray800);margin-bottom:var(--space-unit);margin-left:calc(var(--space-unit) * -1);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 = ".z-label{display:block;padding-bottom:var(--space-unit);color:var(--color-default-text);font-family:var(--font-family-sans);font-size:var(--font-size-1);font-weight:var(--font-sb);text-align:left;text-transform:uppercase}:host{display:block;min-width:290px;color:var(--color-form-default-text);fill:var(--color-form-default-icon);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-form-surface04);margin:0;background-color:var(--color-form-background);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>div>.header:hover{outline:var(--border-size-medium) solid var(--color-form-surface04);outline-offset:-2px}:host>div>div.header:focus:focus-visible{z-index:16;box-shadow:var(--shadow-focus-primary);outline:none}:host>div>.header>span.body-3>span{font-weight:var(--font-sb)}:host>div>.header>z-icon{fill:var(--color-form-default-icon);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-form-active-primary);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-form-disabled03);fill:var(--color-form-disabled01-icon)}:host>div.disabled .header>span.body-3{color:var(--color-form-disabled03)}:host>div.disabled .header>z-icon:last-child{fill:var(--color-form-disabled01-icon)}:host>div.open>.header>z-icon{fill:var(--color-form-default-icon);transform:rotate(180deg);transition:all 200ms linear}:host>div>div.open-combo-data{display:none}:host>div.open>div.open-combo-data{position:relative;z-index:12;display:block;padding:var(--space-unit) calc(var(--space-unit) * 2);border:var(--border-size-small) solid var(--color-form-surface03);border-top:0;background-color:var(--color-form-background);border-radius:0;box-shadow:var(--shadow-2)}:host .open .open-combo-data z-input .z-label{color:var(--color-form-default-text)}:host>div.open>div.open-combo-data>div>div{overflow:auto;max-height:235px;padding:0;padding-left:var(--space-unit);margin-left:calc(var(--space-unit) * -1);}: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 calc(var(--space-unit) * 0.5);margin:0}:host .open-combo-data z-list-element{--background-color-list-element:var(--color-form-background);--background-hover-color-list-element:var(--color-form-surface03);--background-active-color-list-element:var(--color-form-surface03)}:host .open-combo-data z-list-element[disabled]{pointer-events:none}:host .open-combo-data z-list-element .option-wrap{display:flex;flex-direction:row;align-items:center;cursor:pointer;gap:var(--space-unit)}:host .open-combo-data z-list-element[size=\"medium\"] .option-wrap,:host .open-combo-data z-list-element[size=\"small\"] .option-wrap{--z-icon-width:16px;--z-icon-height:16px;font-size:var(--font-size-2);gap:calc(var(--space-unit) / 2)}:host .open-combo-data z-list-element .option-wrap>z-icon{fill:var(--color-primary01)}:host .open-combo-data z-list-element[disabled] .option-wrap>z-icon{fill:var(--color-disabled01)}:host .open-combo-data z-list-element .option-wrap>z-icon.focused{border-radius:var(--border-radius-small);box-shadow:var(--shadow-focus-primary);outline:none}:host .open-combo-data z-list-element .option-wrap>[role=\"option\"]:focus,:host .open-combo-data z-list-element .option-wrap>[role=\"option\"]:focus-visible{outline:none}::-webkit-scrollbar{width:6px;background:linear-gradient(to right, transparent 0 1px, var(--gray200) 1px 5px, transparent 5px 6px)}::-webkit-scrollbar-thumb{background-color:var(--color-primary01)}::-webkit-scrollbar-thumb:hover{background-color:var(--color-hover-primary)}@supports not selector(::-webkit-scrollbar-track){:host{scrollbar-color:var(--color-primary01) transparent}}:host>div.open>z-input{position:relative;z-index:1;width:238px;margin:0 calc(var(--space-unit) * 2);color:var(--color-form-active-primary)}:host>div.open>div.open-combo-data>div>div.search{overflow:hidden;max-height:none;margin-top:0}: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)}:host .open .open-combo-data .search .no-results{display:flex;align-items:center;column-gap:var(--space-unit)}:host>.open>.open-combo-data .search .close-search{display:flex;justify-content:center}:host>div.open>div.open-combo-data>div>div.search .close-search>a{display:inline-block;height:44px;color:var(--color-form-active-primary);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.search .close-search>a:focus:focus-visible{box-shadow:var(--shadow-focus-primary);outline:none}:host>div.open>div.open-combo-data>div>div.check-all-wrapper{padding:calc(var(--space-unit) * 2) calc(var(--space-unit) * 0.5) calc(var(--space-unit) * 2)\n    calc(var(--space-unit) * 1.5);border-bottom:var(--border-size-small) solid var(--gray800);margin-bottom:var(--space-unit);margin-left:calc(var(--space-unit) * -1);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 ZComboboxStyle0 = stylesCss;
 const ZCombobox = class {
     watchItems() {
@@ -20,32 +21,30 @@ const ZCombobox = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
         this.comboboxChange = createEvent(this, "comboboxChange", 7);
-        /** input unique id */
+        this.itemsList = [];
+        this.inputType = InputType.TEXT;
         this.inputid = `combo-${randomId()}`;
-        /** the combobox is disabled */
+        this.items = undefined;
+        this.label = undefined;
         this.disabled = false;
-        /** show search input flag (optional) */
         this.hassearch = false;
-        /** no result text message */
+        this.searchlabel = undefined;
+        this.searchplaceholder = undefined;
+        this.searchtitle = undefined;
         this.noresultslabel = "Nessun risultato";
-        /** toggle combo list opening flag */
         this.isopen = false;
-        /** fixed style flag */
         this.isfixed = false;
-        /** show "check all" checkbox (optional) */
         this.hascheckall = false;
-        /** check all label (optional) */
         this.checkalltext = "Seleziona tutti";
-        /** uncheck all label (optional) */
         this.uncheckalltext = "Deseleziona tutti";
-        /** max number of checkable items (0 = unlimited) */
         this.maxcheckableitems = 0;
-        /** Available sizes: `big`, `small` and `x-small`. Defaults to `big`. */
+        this.hasgroupitems = undefined;
         this.size = ControlSize.BIG;
-        this.renderItemsList = []; // used for render only
+        this.htmlAriaLabel = undefined;
+        this.searchValue = undefined;
+        this.selectedCounter = undefined;
+        this.renderItemsList = [];
         this.focusedItemId = "";
-        this.itemsList = [];
-        this.inputType = InputType.TEXT;
         this.toggleComboBox = this.toggleComboBox.bind(this);
         this.closeFilterItems = this.closeFilterItems.bind(this);
     }
@@ -300,18 +299,16 @@ const ZCombobox = class {
         return (h("z-list-element", { class: "check-all-wrapper", role: "presentation", htmlTabindex: -1, dividerType: ListDividerType.ELEMENT, dividerColor: "gray800", size: this.getControlToListSize(), disabled: !!isDisabled }, h("span", { class: "option-wrap", role: "presentation", onClick: () => this.checkOption(optionId) }, h("z-icon", { name: allChecked ? "checkbox-checked" : "checkbox", class: this.focusedItemId === optionId ? "focused" : "" }), h("span", { id: optionId, role: isDisabled ? "presentation" : "option", "aria-selected": allChecked ? "true" : "false" }, allChecked ? this.uncheckalltext : this.checkalltext))));
     }
     render() {
-        return (h("div", { key: 'f65a92eded2c6cd7d4bb42ddc5f667806a4f5582', "data-action": `combo-${this.inputid}`, class: { open: this.isopen, fixed: this.isfixed, disabled: this.disabled }, id: this.inputid }, this.renderHeader(), !this.disabled && this.renderContent()));
+        return (h("div", { key: '3d2a5f02bd730efb2ff1390c4e21e96224a4e552', "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 getElement(this); }
     static get watchers() { return {
-        "items": [{
-                "watchItems": 0
-            }],
-        "searchValue": [{
-                "watchSearchValue": 0
-            }]
+        "items": ["watchItems"],
+        "searchValue": ["watchSearchValue"]
     }; }
 };
-ZCombobox.style = stylesCss();
+ZCombobox.style = ZComboboxStyle0;
 export { ZCombobox as z_combobox };
+//# sourceMappingURL=z-combobox.entry.js.map

package/dist/esm/z-combobox.entry.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"file":"z-combobox.entry.js","mappings":"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","names":[],"sources":["src/components/z-combobox/styles.css?tag=z-combobox&encapsulation=shadow","src/components/z-combobox/index.tsx"],"sourcesContent":["@import \"../css-components/z-label/styles.css\";\n\n:host {\n display: block;\n min-width: 290px;\n color: var(--color-form-default-text);\n fill: var(--color-form-default-icon);\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-form-surface04);\n margin: 0;\n background-color: var(--color-form-background);\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 > div > .header:hover {\n outline: var(--border-size-medium) solid var(--color-form-surface04);\n outline-offset: -2px;\n}\n\n:host > div > div.header:focus:focus-visible {\n z-index: 16;\n box-shadow: var(--shadow-focus-primary);\n outline: none;\n}\n\n:host > div > .header > span.body-3 > span {\n font-weight: var(--font-sb);\n}\n\n:host > div > .header > z-icon {\n fill: var(--color-form-default-icon);\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-form-active-primary);\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-form-disabled03);\n fill: var(--color-form-disabled01-icon);\n}\n\n:host > div.disabled .header > span.body-3 {\n color: var(--color-form-disabled03);\n}\n\n:host > div.disabled .header > z-icon:last-child {\n fill: var(--color-form-disabled01-icon);\n}\n\n:host > div.open > .header > z-icon {\n fill: var(--color-form-default-icon);\n transform: rotate(180deg);\n transition: all 200ms linear;\n}\n\n:host > div > div.open-combo-data {\n display: none;\n}\n\n:host > div.open > div.open-combo-data {\n position: relative;\n z-index: 12;\n display: block;\n padding: var(--space-unit) calc(var(--space-unit) * 2);\n border: var(--border-size-small) solid var(--color-form-surface03);\n border-top: 0;\n background-color: var(--color-form-background);\n border-radius: 0;\n box-shadow: var(--shadow-2);\n}\n\n:host .open .open-combo-data z-input .z-label {\n color: var(--color-form-default-text);\n}\n\n:host > div.open > div.open-combo-data > div > div {\n overflow: auto;\n max-height: 235px;\n padding: 0;\n padding-left: var(--space-unit); /* padding left and negative margin in order to enable focus */\n margin-left: calc(var(--space-unit) * -1); /* padding left and negative margin in order to enable focus */\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 calc(var(--space-unit) * 0.5); /* needed for checkbox focus shadow */\n margin: 0;\n}\n\n:host .open-combo-data z-list-element {\n --background-color-list-element: var(--color-form-background);\n --background-hover-color-list-element: var(--color-form-surface03);\n --background-active-color-list-element: var(--color-form-surface03);\n}\n\n:host .open-combo-data z-list-element[disabled] {\n pointer-events: none;\n}\n\n:host .open-combo-data z-list-element .option-wrap {\n display: flex;\n flex-direction: row;\n align-items: center;\n cursor: pointer;\n gap: var(--space-unit);\n}\n\n:host .open-combo-data z-list-element[size=\"medium\"] .option-wrap,\n:host .open-combo-data z-list-element[size=\"small\"] .option-wrap {\n --z-icon-width: 16px;\n --z-icon-height: 16px;\n\n font-size: var(--font-size-2);\n gap: calc(var(--space-unit) / 2);\n}\n\n:host .open-combo-data z-list-element .option-wrap > z-icon {\n fill: var(--color-primary01);\n}\n\n:host .open-combo-data z-list-element[disabled] .option-wrap > z-icon {\n fill: var(--color-disabled01);\n}\n\n:host .open-combo-data z-list-element .option-wrap > z-icon.focused {\n border-radius: var(--border-radius-small);\n box-shadow: var(--shadow-focus-primary);\n outline: none;\n}\n\n:host .open-combo-data z-list-element .option-wrap > [role=\"option\"]:focus,\n:host .open-combo-data z-list-element .option-wrap > [role=\"option\"]:focus-visible {\n outline: none;\n}\n\n::-webkit-scrollbar {\n width: 6px;\n background: linear-gradient(to right, transparent 0 1px, var(--gray200) 1px 5px, transparent 5px 6px);\n}\n\n::-webkit-scrollbar-thumb {\n background-color: var(--color-primary01);\n}\n\n::-webkit-scrollbar-thumb:hover {\n background-color: var(--color-hover-primary);\n}\n\n/* Firefox scrollbar */\n@supports not selector(::-webkit-scrollbar-track) {\n :host {\n scrollbar-color: var(--color-primary01) transparent;\n }\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-form-active-primary);\n}\n\n:host > div.open > div.open-combo-data > div > div.search {\n overflow: hidden;\n max-height: none;\n margin-top: 0;\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}\n\n:host .open .open-combo-data .search .no-results {\n display: flex;\n align-items: center;\n column-gap: var(--space-unit);\n}\n\n:host > .open > .open-combo-data .search .close-search {\n display: flex;\n justify-content: center;\n}\n\n:host > div.open > div.open-combo-data > div > div.search .close-search > a {\n display: inline-block;\n height: 44px;\n color: var(--color-form-active-primary);\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.search .close-search > a:focus:focus-visible {\n box-shadow: var(--shadow-focus-primary);\n outline: none;\n}\n\n:host > div.open > div.open-combo-data > div > div.check-all-wrapper {\n /* padding left and negative margin in order to enable focus */\n padding: calc(var(--space-unit) * 2) calc(var(--space-unit) * 0.5) calc(var(--space-unit) * 2)\n calc(var(--space-unit) * 1.5);\n border-bottom: var(--border-size-small) solid var(--gray800);\n margin-bottom: var(--space-unit);\n margin-left: calc(var(--space-unit) * -1);\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, Element, Event, EventEmitter, Prop, State, Watch, h} from \"@stencil/core\";\nimport {ComboItem, ControlSize, InputType, KeyboardCode, ListDividerType, ListSize} from \"../../beans\";\nimport {getPlainText, randomId} from \"../../utils/utils\";\nimport {ZInput} from \"../z-input\";\n\n@Component({\n tag: \"z-combobox\",\n styleUrl: \"styles.css\",\n shadow: true,\n})\nexport class ZCombobox {\n @Element() element: HTMLZComboboxElement;\n\n /** input unique id */\n @Prop()\n inputid = `combo-${randomId()}`;\n\n /** list items array */\n @Prop()\n items: ComboItem[] | string;\n\n /** label text */\n @Prop()\n label: string;\n\n /** the combobox is disabled */\n @Prop({reflect: true})\n disabled?: boolean = false;\n\n /** show search input flag (optional) */\n @Prop()\n hassearch?: boolean = false;\n\n /** search input label text (optional) */\n @Prop()\n searchlabel?: string;\n\n /** search input placeholder text (optional) */\n @Prop()\n searchplaceholder?: string;\n\n /** search input title text (optional) */\n @Prop()\n searchtitle?: string;\n\n /** no result text message */\n @Prop()\n noresultslabel?: string = \"Nessun risultato\";\n\n /** toggle combo list opening flag */\n @Prop({mutable: true})\n isopen = false;\n\n /** fixed style flag */\n @Prop()\n isfixed = false;\n\n /** show \"check all\" checkbox (optional) */\n @Prop()\n hascheckall?: boolean = false;\n\n /** check all label (optional) */\n @Prop()\n checkalltext?: string = \"Seleziona tutti\";\n\n /** uncheck all label (optional) */\n @Prop()\n uncheckalltext?: string = \"Deseleziona tutti\";\n\n /** max number of checkable items (0 = unlimited) */\n @Prop()\n maxcheckableitems = 0;\n\n /** group items by category */\n @Prop()\n hasgroupitems?: boolean;\n\n /** Available sizes: `big`, `small` and `x-small`. Defaults to `big`. */\n @Prop()\n size?: ControlSize = ControlSize.BIG;\n\n /** the combobox aria-label */\n @Prop()\n htmlAriaLabel?: string;\n\n @State()\n searchValue: string;\n\n @State()\n selectedCounter: number;\n\n @State()\n renderItemsList: ComboItem[] = []; // used for render only\n\n @State()\n focusedItemId = \"\";\n\n private itemsList: ComboItem[] = [];\n\n private inputType: InputType = InputType.TEXT;\n\n @Watch(\"items\")\n watchItems(): void {\n this.itemsList = typeof this.items === \"string\" ? JSON.parse(this.items) : this.items;\n this.selectedCounter = this.itemsList.filter((item) => item.checked).length;\n this.updateRenderItemsList();\n }\n\n @Watch(\"searchValue\")\n watchSearchValue(): void {\n this.filterItems(this.searchValue);\n }\n\n /** Emitted when value is checked/unchecked. Returns id, items. */\n @Event()\n comboboxChange: EventEmitter;\n\n private emitComboboxChange(): void {\n this.comboboxChange.emit({id: this.inputid, items: this.itemsList});\n }\n\n constructor() {\n this.toggleComboBox = this.toggleComboBox.bind(this);\n this.closeFilterItems = this.closeFilterItems.bind(this);\n }\n\n componentWillLoad(): void {\n this.watchItems();\n }\n\n componentWillRender(): void {\n this.selectedCounter = this.itemsList.filter((item) => item.checked).length;\n }\n\n private getControlToListSize(): ListSize {\n switch (this.size) {\n case ControlSize.X_SMALL:\n return ListSize.SMALL;\n case ControlSize.SMALL:\n return ListSize.MEDIUM;\n default:\n return ListSize.LARGE;\n }\n }\n\n private getOptionId(itemId: string): string {\n return `${this.inputid}-option-${itemId}`;\n }\n\n private getCheckAllOptionId(): string {\n return `${this.inputid}-check-all`;\n }\n\n private allOptionsSelected(): boolean {\n return this.selectedCounter === this.itemsList.length;\n }\n\n private hasReachedMaxSelections(): boolean {\n return !!(this.maxcheckableitems && this.selectedCounter >= this.maxcheckableitems);\n }\n\n private handleHeaderKeyDown(e: KeyboardEvent): void {\n if (e.code === KeyboardCode.ENTER && !this.focusedItemId) {\n this.toggleComboBox();\n }\n\n if (!this.isopen || this.hassearch) {\n return;\n }\n\n switch (e.code as KeyboardCode) {\n case KeyboardCode.SPACE:\n case KeyboardCode.ENTER:\n if (this.focusedItemId) {\n e.preventDefault();\n this.checkOption(this.focusedItemId);\n }\n break;\n case KeyboardCode.ESC:\n if (this.focusedItemId) {\n this.focusedItemId = \"\";\n }\n break;\n case KeyboardCode.ARROW_DOWN:\n case KeyboardCode.ARROW_UP:\n this.handleArrowsNavigation(e);\n break;\n }\n }\n\n private handleInputKeyDown(e: KeyboardEvent): void {\n switch (e.code as KeyboardCode) {\n case KeyboardCode.ENTER:\n case KeyboardCode.SPACE:\n if (this.focusedItemId) {\n e.preventDefault();\n this.checkOption(this.focusedItemId);\n break;\n }\n break;\n case KeyboardCode.ARROW_DOWN:\n case KeyboardCode.ARROW_UP:\n this.handleArrowsNavigation(e);\n break;\n case KeyboardCode.ESC:\n if (this.focusedItemId) {\n this.focusedItemId = \"\";\n break;\n }\n this.closeFilterItems();\n break;\n case KeyboardCode.TAB:\n this.focusedItemId = \"\";\n break;\n }\n }\n\n private checkOption(optionId: string): void {\n if (optionId === this.getCheckAllOptionId()) {\n this.itemsList = this.itemsList.map((item: ComboItem) => ({\n ...item,\n checked: !this.allOptionsSelected(),\n }));\n\n this.focusedItemId = this.getCheckAllOptionId();\n } else {\n this.itemsList = this.itemsList.map((i: ComboItem) => {\n if (optionId === this.getOptionId(i.id)) {\n i.checked = !i.checked;\n }\n\n return i;\n });\n }\n\n this.updateRenderItemsList();\n this.emitComboboxChange();\n }\n\n private handleArrowsNavigation(e: KeyboardEvent): void {\n if (![KeyboardCode.ARROW_DOWN, KeyboardCode.ARROW_UP].includes(e.code as KeyboardCode) || !this.isopen) {\n return;\n }\n\n e.preventDefault();\n e.stopPropagation();\n\n const currElem = this.focusedItemId ? this.element.shadowRoot.querySelector(`#${this.focusedItemId}`) : null;\n const options = Array.from(this.element.shadowRoot.querySelectorAll('[role=\"option\"]'));\n\n if (!options.length) {\n return;\n }\n\n const currElemIndex = currElem ? options.indexOf(currElem) : null;\n const firstElemIndex = 0;\n const lastElemIndex = options.length - 1;\n\n let nextElem = null;\n if (e.code === KeyboardCode.ARROW_DOWN) {\n nextElem =\n currElemIndex === null ? options[firstElemIndex] : options[currElemIndex + 1] || options[lastElemIndex];\n } else if (e.code === KeyboardCode.ARROW_UP) {\n nextElem =\n currElemIndex === null ? options[lastElemIndex] : options[currElemIndex - 1] || options[firstElemIndex];\n }\n\n this.focusedItemId = nextElem.id;\n nextElem.scrollIntoView({block: \"nearest\", container: \"nearest\"});\n }\n\n private updateRenderItemsList(): void {\n if (this.searchValue) {\n this.filterItems(this.searchValue);\n } else {\n this.resetRenderItemsList();\n }\n }\n\n private resetRenderItemsList(): void {\n const renderItemsList = [];\n this.itemsList.forEach((item: ComboItem) => {\n renderItemsList.push({...item});\n });\n this.renderItemsList = renderItemsList;\n }\n\n private filterItems(value: string): void {\n if (!value) {\n return this.closeFilterItems();\n }\n\n this.resetRenderItemsList();\n this.renderItemsList = this.renderItemsList.filter((item) => {\n const start = item.name.toUpperCase().indexOf(value.toUpperCase());\n const end = start + value.length;\n const newName =\n item.name.substring(0, start) +\n \"<strong>\" +\n item.name.substring(start, end) +\n \"</strong>\" +\n item.name.substring(end, item.name.length);\n\n item.name = newName;\n\n return start >= 0;\n });\n }\n\n private closeFilterItems(): void {\n this.searchValue = \"\";\n this.resetRenderItemsList();\n }\n\n private toggleComboBox(): void {\n this.isopen = !this.isopen;\n }\n\n private getComboboxA11yAttributes(isZInput: boolean): Record<string, string> {\n const role = \"combobox\";\n const ariaLabel = this.htmlAriaLabel;\n const ariaExpanded = this.isopen ? \"true\" : \"false\";\n const ariaActivedescendant = this.isopen ? this.focusedItemId : \"\";\n const ariaControls = `${this.inputid}_list`;\n\n if (isZInput) {\n return {\n \"role\": role,\n \"aria-label\": ariaLabel,\n \"html-aria-expanded\": ariaExpanded,\n \"html-aria-activedescendant\": ariaActivedescendant,\n \"html-aria-controls\": ariaControls,\n };\n }\n\n return {\n \"role\": role,\n \"aria-label\": ariaLabel,\n \"aria-expanded\": ariaExpanded,\n \"aria-activedescendant\": ariaActivedescendant,\n \"aria-controls\": ariaControls,\n };\n }\n\n private renderHeader(): HTMLDivElement {\n const comboboxA11yAttributes = !this.hassearch ? this.getComboboxA11yAttributes(false) : {};\n\n return (\n <div\n class=\"header\"\n onClick={() => this.toggleComboBox()}\n onKeyDown={(e: KeyboardEvent) => this.handleHeaderKeyDown(e)}\n role=\"button\"\n tabindex={0}\n aria-controls=\"open-combo-data\"\n aria-expanded={this.isopen ? \"true\" : \"false\"}\n {...comboboxA11yAttributes}\n >\n <span\n class=\"body-3\"\n aria-label={\n this.label\n ? `${this.label}${this.selectedCounter > 0 ? ` - ${this.selectedCounter} selezionati` : ``}`\n : undefined\n }\n >\n {this.label}\n <span>{this.selectedCounter > 0 && ` (${this.selectedCounter})`}</span>\n </span>\n <z-icon\n name=\"caret-down\"\n class={this.size}\n />\n </div>\n );\n }\n\n private renderContent(): HTMLDivElement {\n return (\n <div\n id=\"open-combo-data\"\n class=\"open-combo-data\"\n >\n {this.hassearch && this.renderSearchInput()}\n <div\n role=\"listbox\"\n aria-label={this.label}\n aria-multiselectable=\"true\"\n id={`${this.inputid}_list`}\n aria-owns={`${this.hascheckall ? `${this.getCheckAllOptionId()} ` : ``}${this.itemsList.map((item) => this.getOptionId(item.id)).join(\" \")}`}\n >\n {this.renderItems()}\n </div>\n </div>\n );\n }\n\n private renderItems(): HTMLDivElement {\n return (\n <div\n class={this.searchValue && \"search\"}\n tabIndex={-1}\n role=\"presentation\"\n >\n {this.renderList(this.renderItemsList)}\n </div>\n );\n }\n\n private renderItem(item: ComboItem, index: number, length: number): HTMLZListElement {\n const optionId = this.getOptionId(item.id);\n const isDisabled = !item.checked && this.hasReachedMaxSelections();\n\n return (\n <z-list-element\n htmlTabindex={-1}\n dividerType={index !== length - 1 ? ListDividerType.ELEMENT : ListDividerType.NONE}\n size={this.getControlToListSize()}\n role=\"presentation\"\n disabled={!!isDisabled}\n >\n <span\n class=\"option-wrap\"\n role=\"presentation\"\n onClick={() => {\n this.focusedItemId = \"\";\n this.checkOption(optionId);\n }}\n >\n <z-icon\n name={item.checked ? \"checkbox-checked\" : \"checkbox\"}\n class={this.focusedItemId === optionId ? \"focused\" : \"\"}\n />\n <span\n id={optionId}\n role={isDisabled ? \"presentation\" : \"option\"}\n aria-selected={item.checked ? \"true\" : \"false\"}\n aria-label={isDisabled ? undefined : getPlainText(item.name)}\n >\n <span\n aria-hidden=\"true\"\n innerHTML={item.name}\n />\n </span>\n </span>\n </z-list-element>\n );\n }\n\n private renderList(items: ComboItem[]): HTMLUListElement {\n if (!items) {\n return;\n }\n if (!items.length && this.searchValue) {\n return this.renderNoSearchResults();\n }\n\n if (this.hasgroupitems) {\n return this.renderGroups(items);\n }\n\n return (\n <ul role=\"presentation\">\n {this.renderCheckAll()}\n {items.map((item, i) => {\n return this.renderItem(item, i, items.length);\n })}\n </ul>\n );\n }\n\n private renderGroups(items: ComboItem[]): HTMLUListElement {\n const newData = items.reduce((group, item, index) => {\n const category = item.category || \"Altra categoria\";\n const zListItem = this.renderItem(item, index, items.length);\n\n group[category] = group[category] ?? [];\n group[category].push(zListItem);\n\n return group;\n }, {});\n\n const listGroups = Object.entries(newData as {[key: string]: HTMLZListElementElement[]}).map(\n ([key, value], index) => {\n return (\n <z-list-group\n size={this.getControlToListSize()}\n divider-type={ListDividerType.ELEMENT}\n aria-labelledby={`${this.inputid}_list_group_${index}`}\n >\n <span\n class=\"body-3-sb z-list-group-title\"\n slot=\"header-title\"\n id={`${this.inputid}_list_group_${index}`}\n aria-hidden=\"true\"\n >\n {key}\n </span>\n {value.map((item) => item)}\n </z-list-group>\n );\n }\n );\n\n return (\n <ul role=\"presentation\">\n {this.renderCheckAll()}\n {listGroups}\n </ul>\n );\n }\n\n private renderNoSearchResults(): HTMLUListElement {\n return (\n <div class=\"no-results\">\n <span>{this.noresultslabel}</span>\n </div>\n );\n }\n\n private renderSearchInput(): ZInput {\n return (\n <z-input\n htmlid={`${this.inputid}_search`}\n label={this.searchlabel}\n placeholder={this.searchplaceholder}\n htmltitle={this.searchtitle}\n type={this.inputType}\n value={this.searchValue}\n message={false}\n size={this.size}\n html-aria-autocomplete=\"list\"\n {...this.getComboboxA11yAttributes(true)}\n onKeyDown={(e: KeyboardEvent) => this.handleInputKeyDown(e)}\n onInputChange={(e: CustomEvent) => {\n this.searchValue = e.detail.value;\n this.focusedItemId = \"\";\n }}\n />\n );\n }\n\n private renderCheckAll(): HTMLDivElement {\n if (!this.hascheckall || this.searchValue) {\n return;\n }\n\n const optionId = this.getCheckAllOptionId();\n const allChecked = this.allOptionsSelected();\n const isDisabled =\n this.hasReachedMaxSelections() || (this.maxcheckableitems && this.maxcheckableitems < this.itemsList.length);\n\n return (\n <z-list-element\n class=\"check-all-wrapper\"\n role=\"presentation\"\n htmlTabindex={-1}\n dividerType={ListDividerType.ELEMENT}\n dividerColor=\"gray800\"\n size={this.getControlToListSize()}\n disabled={!!isDisabled}\n >\n <span\n class=\"option-wrap\"\n role=\"presentation\"\n onClick={() => this.checkOption(optionId)}\n >\n <z-icon\n name={allChecked ? \"checkbox-checked\" : \"checkbox\"}\n class={this.focusedItemId === optionId ? \"focused\" : \"\"}\n />\n <span\n id={optionId}\n role={isDisabled ? \"presentation\" : \"option\"}\n aria-selected={allChecked ? \"true\" : \"false\"}\n >\n {allChecked ? this.uncheckalltext : this.checkalltext}\n </span>\n </span>\n </z-list-element>\n );\n }\n\n render(): HTMLDivElement {\n return (\n <div\n data-action={`combo-${this.inputid}`}\n class={{open: this.isopen, fixed: this.isfixed, disabled: this.disabled}}\n id={this.inputid}\n >\n {this.renderHeader()}\n {!this.disabled && this.renderContent()}\n </div>\n );\n }\n}\n"],"version":3}