@zanichelli/albe-web-components 12.1.4-rc → 12.2.0

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

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

package/dist/esm/z-chip.entry.js

@@ -0,0 +1,28 @@
+import { r as registerInstance, c as createEvent, h, g as getElement } from './index-4968ce56.js';
+import { x as ZChipType } from './index-47f23745.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(--gray400);background-color:var(--color-surface01);border-radius:14px;color:var(--color-text01);fill:var(--color-text01);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:not([aria-disabled]):hover>z-icon.sc-z-chip:first-child{fill:var(--color-icon02)}.sc-z-chip-h>.z-chip-container.sc-z-chip .interactive-icon.sc-z-chip{fill:var(--color-primary01)}.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)}.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 ZChip = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.interactiveIconClick = createEvent(this, "interactiveIconClick", 7);
+    /** z-chip size type, can be default, medium or small */
+    this.type = ZChipType.DEFAULT;
+    /** set z-chip as disabled */
+    this.disabled = false;
+    /** z-chip aria-label string */
+    this.ariaLabel = "";
+  }
+  render() {
+    return (h("div", { class: {
+        "z-chip-container": true,
+        "z-chip-interactive": !!this.interactiveIcon,
+        [this.type]: true,
+      }, "aria-disabled": this.disabled }, this.icon && h("z-icon", { name: this.icon }), h("slot", null), this.interactiveIcon && (h("button", { type: "button", onClick: () => this.interactiveIconClick.emit(), onKeyUp: () => this.interactiveIconClick.emit(), "aria-label": this.ariaLabel, disabled: this.disabled }, h("z-icon", { class: "interactive-icon", name: this.interactiveIcon })))));
+  }
+  get el() { return getElement(this); }
+};
+ZChip.style = stylesCss;
+
+export { ZChip as z_chip };

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

@@ -0,0 +1,197 @@
+import { r as registerInstance, c as createEvent, h } from './index-4968ce56.js';
+import { e as ControlSize, I as InputType, K as KeyboardKeyCode, l as ListDividerType } from './index-47f23745.js';
+import { a as handleKeyboardSubmit } from './utils-2a4ef29d.js';
+import './breakpoints-9b81eb1b.js';
+
+const stylesCss = ":host{display:block}:host>div.fixed{position:relative}:host>div>.header{position:relative;z-index:10;display:flex;min-height:42px;align-items:center;justify-content:space-between;padding:0 calc(var(--space-unit) * 1.5);border:var(--border-size-small) solid var(--color-surface04);margin:0;background-color:var(--color-input-field01);border-radius:var(--border-radius-small);cursor:pointer}:host([size=\"small\"])>div>.header{min-height:34px;font-size:var(--font-size-2)}:host([size=\"x-small\"])>div>.header{min-height:30px;font-size:var(--font-size-2)}:host([size=\"x-small\"])>div>.header p.body-3{padding:calc(var(--space-unit) * 0.5) 0}:host>div>.header:hover{outline:var(--border-size-medium) solid var(--color-surface04);outline-offset:-2px}:host>div.open>div.header:focus:focus-visible{box-shadow:none}:host>div>div.header:focus:focus-visible{box-shadow:var(--shadow-focus-primary);outline:none}:host>div>.header>p.body-3{padding:var(--space-unit) 0;margin:0;color:var(--color-text01)}:host>div>.header>p.body-3>span{font-weight:var(--font-sb)}:host>div>.header>z-icon{fill:var(--color-icon02);transform:rotate(360deg);transition:all 200ms linear}:host>div>.header>z-icon.small,:host>div>.header>z-icon.x-small{--z-icon-width:16px;--z-icon-height:16px}:host>div.open>.header{border:var(--border-size-small) solid var(--color-primary01);border-radius:var(--border-radius-small) var(--border-radius-small) 0 0}:host>div.disabled{pointer-events:none}:host>div.disabled .header{border-color:var(--color-disabled01);fill:var(--color-disabled01)}:host>div.disabled .header>p.body-3{color:var(--color-disabled02)}:host>div.disabled .header>z-icon:last-child{fill:var(--color-disabled01)}:host>div.open>.header>z-icon{fill:var(--color-icon02);transform:rotate(180deg);transition:all 200ms linear}:host>div.open>div.open-combo-data{position:relative;z-index:12;padding:var(--space-unit) calc(var(--space-unit) * 2);border:var(--border-size-small) solid var(--gray200);border-top:0;background-color:var(--color-input-field01);border-radius:0}:host>div.open>div.open-combo-data>div{overflow:auto;max-height:235px;padding:0;scrollbar-color:var(--color-primary01) transparent}:host>div.open>div.open-combo-data>z-input{width:100%;margin-bottom:calc(var(--space-unit) * 2)}:host>div.open>div.open-combo-data>div>ul{max-height:235px;padding:0 3px;margin:0}::-webkit-scrollbar{width:10px;background:linear-gradient(to right, transparent 0 3px, var(--gray200) 3px 7px, transparent 7px 10px);border-radius:var(--border-radius)}::-webkit-scrollbar-thumb{width:10px;background-color:var(--color-primary01)}:host>div.open>z-input{position:relative;z-index:1;width:238px;margin:0 calc(var(--space-unit) * 2);color:var(--color-primary01)}:host>div.open>div.open-combo-data>div.search{overflow:hidden;max-height:auto;margin-top:0;box-shadow:1px 1px 4px 2px rgb(217 222 227 / 50%)}:host>div.open>div.open-combo-data>div.search>ul{overflow:auto;max-height:180px;padding:var(--space-unit) calc(var(--space-unit) * 2);scrollbar-color:var(--color-primary01) transparent}:host>div.open>div.open-combo-data>div.search>div{display:flex;justify-content:center}:host>div.open>div.open-combo-data>div.search>div>a{display:inline-block;height:44px;color:var(--color-primary01);cursor:pointer;font-family:var(--font-family-sans);font-size:14px;font-weight:var(--font-sb);line-height:44px;text-align:center;text-transform:uppercase}:host>div.open>div.open-combo-data>div.check-all-wrapper{padding:calc(var(--space-unit) * 2) calc(var(--space-unit) * 0.5);border-bottom:var(--border-size-small) solid var(--gray800);margin-bottom:var(--space-unit);text-align:left}:host([size=\"small\"])>div.open>div.open-combo-data>div.check-all-wrapper{padding:calc(var(--space-unit) * 1.5) calc(var(--space-unit) * 0.5)}:host([size=\"x-small\"])>div.open>div.open-combo-data>div.check-all-wrapper{padding:var(--space-unit) calc(var(--space-unit) * 0.5)}";
+
+const ZCombobox = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.comboboxChange = createEvent(this, "comboboxChange", 7);
+    /** the combobox is disabled */
+    this.disabled = false;
+    /** show search input flag (optional) */
+    this.hassearch = false;
+    /** no result text message */
+    this.noresultslabel = "Nessun risultato";
+    /** toggle combo list opening flag */
+    this.isopen = false;
+    /** fixed style flag */
+    this.isfixed = false;
+    /** close combobox list text */
+    this.closesearchtext = "Chiudi";
+    /** 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.size = ControlSize.BIG;
+    this.renderItemsList = []; // used for render only
+    this.itemsList = [];
+    this.inputType = InputType.TEXT;
+    this.toggleComboBox = this.toggleComboBox.bind(this);
+    this.closeFilterItems = this.closeFilterItems.bind(this);
+  }
+  watchItems() {
+    this.itemsList = typeof this.items === "string" ? JSON.parse(this.items) : this.items;
+    this.selectedCounter = this.itemsList.filter((item) => item.checked).length;
+    this.updateRenderItemsList();
+  }
+  watchSearchValue() {
+    this.filterItems(this.searchValue);
+  }
+  inputCheckListener(e) {
+    const id = e.detail.id.replace(`combo-checkbox-${this.inputid}-`, "");
+    if (id === "check-all" && (!this.maxcheckableitems || this.maxcheckableitems >= this.itemsList.length)) {
+      return this.checkAll(e.detail.checked);
+    }
+    this.itemsList = this.itemsList.map((item) => {
+      if (item.id === id) {
+        item.checked = e.detail.checked;
+      }
+      return item;
+    });
+    this.updateRenderItemsList();
+    this.emitComboboxChange();
+  }
+  emitComboboxChange() {
+    this.comboboxChange.emit({ id: this.inputid, items: this.itemsList });
+  }
+  componentWillLoad() {
+    this.watchItems();
+  }
+  componentWillRender() {
+    this.selectedCounter = this.itemsList.filter((item) => item.checked).length;
+  }
+  updateRenderItemsList() {
+    if (this.searchValue) {
+      this.filterItems(this.searchValue);
+    }
+    else {
+      this.resetRenderItemsList();
+    }
+  }
+  resetRenderItemsList() {
+    const renderItemsList = [];
+    this.itemsList.forEach((item) => {
+      renderItemsList.push(Object.assign({}, item));
+    });
+    this.renderItemsList = renderItemsList;
+  }
+  filterItems(value) {
+    if (!value) {
+      return this.closeFilterItems();
+    }
+    this.resetRenderItemsList();
+    this.renderItemsList = this.renderItemsList.filter((item) => {
+      const start = item.name.toUpperCase().indexOf(value.toUpperCase());
+      const end = start + value.length;
+      const newName = item.name.substring(0, start) +
+        item.name.substring(start, end).bold() +
+        item.name.substring(end, item.name.length);
+      item.name = newName;
+      return start >= 0;
+    });
+  }
+  checkAll(checked = true) {
+    this.itemsList = this.itemsList.map((item) => (Object.assign(Object.assign({}, item), { checked: checked })));
+    this.resetRenderItemsList();
+    this.emitComboboxChange();
+  }
+  closeFilterItems() {
+    this.searchValue = "";
+    this.resetRenderItemsList();
+  }
+  toggleComboBox() {
+    this.isopen = !this.isopen;
+  }
+  renderHeader() {
+    return (h("div", { class: "header", onClick: () => this.toggleComboBox(), onKeyDown: (ev) => {
+        if (ev.keyCode === KeyboardKeyCode.SPACE) {
+          ev.preventDefault();
+        }
+      }, onKeyUp: (ev) => handleKeyboardSubmit(ev, this.toggleComboBox), role: "button", tabindex: 0 }, h("p", { class: "body-3" }, this.label, h("span", null, this.selectedCounter > 0 && ` (${this.selectedCounter})`)), h("z-icon", { name: "caret-down", class: this.size })));
+  }
+  renderContent() {
+    if (!this.isopen) {
+      return;
+    }
+    return (h("div", { class: "open-combo-data" }, this.hassearch && this.renderSearchInput(), this.hascheckall && this.renderCheckAll(), this.renderItems()));
+  }
+  renderItems() {
+    if (!this.isopen) {
+      return;
+    }
+    return (h("div", { class: this.searchValue && "search", tabindex: -1 }, this.renderList(this.renderItemsList), this.searchValue && this.renderCloseButton()));
+  }
+  renderItem(item, index, length) {
+    return (h("z-myz-list-item", { id: item.id, listitemid: item.id, action: `combo-li-${this.inputid}`, underlined: index !== length - 1, class: this.size }, h("z-input", { type: InputType.CHECKBOX, checked: item.checked, htmlid: `combo-checkbox-${this.inputid}-${item.id}`, label: item.name, disabled: !item.checked && this.maxcheckableitems && this.maxcheckableitems === this.selectedCounter, size: this.size === ControlSize.X_SMALL ? ControlSize.SMALL : this.size })));
+  }
+  renderList(items) {
+    if (!items) {
+      return;
+    }
+    if (!items.length && this.searchValue) {
+      return this.renderNoSearchResults();
+    }
+    if (this.hasgroupitems) {
+      return this.renderGroups(this.itemsList);
+    }
+    return (h("ul", null, items.map((item, i) => {
+      return this.renderItem(item, i, items.length);
+    })));
+  }
+  renderGroups(items) {
+    const newData = items.reduce((group, item, index) => {
+      var _a;
+      const { category } = item;
+      const zListItem = this.renderItem(item, index, items.length);
+      group[category] = (_a = group[category]) !== null && _a !== void 0 ? _a : [];
+      group[category].push(zListItem);
+      return group;
+    }, {});
+    const listGroups = Object.entries(newData).map(([key, value]) => {
+      return (h("z-list-group", { "divider-type": ListDividerType.ELEMENT }, h("span", { class: "body-3-sb z-list-group-title", slot: "header-title" }, key), value.map((item) => item)));
+    });
+    return h("ul", null, listGroups);
+  }
+  renderNoSearchResults() {
+    return (h("ul", null, h("z-myz-list-item", { id: "no-results", text: this.noresultslabel, listitemid: "no-results", icon: "multiply-circle", class: this.size })));
+  }
+  renderCloseButton() {
+    return (h("div", null, h("a", { onClick: () => this.closeFilterItems(), onKeyUp: (e) => handleKeyboardSubmit(e, this.closeFilterItems), role: "button", tabindex: 0 }, this.closesearchtext)));
+  }
+  renderSearchInput() {
+    if (!this.isopen) {
+      return;
+    }
+    return (h("z-input", { htmlid: `${this.inputid}_search`, label: this.searchlabel, placeholder: this.searchplaceholder, htmltitle: this.searchtitle, type: this.inputType, value: this.searchValue, message: false, size: this.size, onInputChange: (e) => {
+        if (e.detail.keycode === 27) {
+          return this.closeFilterItems();
+        }
+        this.searchValue = e.detail.value;
+      } }));
+  }
+  renderCheckAll() {
+    if (this.searchValue) {
+      return;
+    }
+    const allChecked = this.selectedCounter === this.itemsList.length;
+    return (h("div", { class: "check-all-wrapper" }, h("z-input", { type: InputType.CHECKBOX, checked: allChecked, htmlid: `combo-checkbox-${this.inputid}-check-all`, label: allChecked ? this.uncheckalltext : this.checkalltext, disabled: this.maxcheckableitems && this.maxcheckableitems < this.itemsList.length, size: this.size === ControlSize.X_SMALL ? ControlSize.SMALL : this.size })));
+  }
+  render() {
+    return (h("div", { "data-action": `combo-${this.inputid}`, class: { open: this.isopen, fixed: this.isfixed, disabled: this.disabled }, id: this.inputid }, this.renderHeader(), !this.disabled && this.renderContent()));
+  }
+  static get watchers() { return {
+    "items": ["watchItems"],
+    "searchValue": ["watchSearchValue"]
+  }; }
+};
+ZCombobox.style = stylesCss;
+
+export { ZCombobox as z_combobox };

package/dist/esm/z-contextual-menu.entry.js

@@ -0,0 +1,42 @@
+import { r as registerInstance, c as createEvent, h, H as Host } from './index-4968ce56.js';
+import { P as PopoverPosition } from './index-47f23745.js';
+
+const stylesCss = ":host{position:relative;display:flex;align-items:center;justify-content:center;font-family:var(--font-family-sans);font-weight:var(--font-rg)}button{width:100%;height:100%;padding:0;border:none;background:transparent;cursor:pointer}z-popover{overflow:hidden}.popover-content-container{position:relative;min-width:112px;max-width:280px;background-color:var(--color-surface02);box-shadow:var(--shadow-2);white-space:nowrap}.element-container:hover{color:var(--color-hover-primary);fill:var(--color-hover-primary)}.element-text{overflow:hidden;font-size:14px;text-overflow:ellipsis}.element-container,.disabled-element-container{display:flex;min-height:calc(var(--space-unit) * 4);box-sizing:border-box;align-items:center;padding:calc(var(--space-unit) / 2) var(--space-unit);fill:var(--color-disabled03);gap:var(--space-unit)}.element-container{fill:var(--color-primary01)}.element-icon{display:flex}";
+
+const ZContextualMenu = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.clickContextualMenu = createEvent(this, "clickContextualMenu", 7);
+    /**
+     * [optional] Sets text color of ZContextualMenu's content
+     */
+    this.color = "color-primary01";
+    /**
+     * [optional] Sets the position of the popover
+     */
+    this.popoverPosition = PopoverPosition.BOTTOM_RIGHT;
+  }
+  componentWillRender() {
+    if (this.elements) {
+      this.jsonElements = JSON.parse(this.elements.replace(/"/g, '"'));
+    }
+  }
+  componentDidLoad() {
+    this.popoverEl.bindTo = this.triggerButton;
+  }
+  showIcon() {
+    return !this.jsonElements.some((element) => !element.icon);
+  }
+  togglePopover() {
+    if (!this.popoverEl.open) {
+      this.popoverEl.open = true;
+    }
+  }
+  render() {
+    var _a, _b;
+    return (h(Host, null, h("button", { ref: (el) => (this.triggerButton = el), "aria-label": ((_a = this.popoverEl) === null || _a === void 0 ? void 0 : _a.open) ? "chiudi menu contestuale" : "apri menu contestuale", onClick: () => this.togglePopover() }, h("z-icon", { name: "contextual-menu", fill: this.color })), h("z-popover", { ref: (el) => (this.popoverEl = el), position: this.popoverPosition }, h("div", { class: "popover-content-container" }, h("z-list", null, h("z-list-group", { "divider-type": "element" }, (_b = this.jsonElements) === null || _b === void 0 ? void 0 : _b.map((element, index) => (h("z-list-element", { clickable: !element.disabled, class: "my-z-list-element", "align-button": "left", "expandable-style": "accordion", color: element.disabled ? `color-disabled03` : this.color, isContextualMenu: true, listElementId: index, onClickItem: (event) => this.clickContextualMenu.emit(event.detail) }, h("div", { class: element.disabled ? "disabled-element-container" : "element-container" }, this.showIcon() && (h("div", { class: "element-icon" }, h("z-icon", { name: element.icon, width: 16, height: 16 }))), h("div", { class: "element-text" }, h("span", null, element.text))))))))))));
+  }
+};
+ZContextualMenu.style = stylesCss;
+
+export { ZContextualMenu as z_contextual_menu };

package/dist/esm/z-cover-hero.entry.js

@@ -0,0 +1,53 @@
+import { r as registerInstance, h, H as Host, g as getElement } from './index-4968ce56.js';
+import { M as CoverHeroVariant, Q as CoverHeroContentPosition } from './index-47f23745.js';
+
+const stylesCss = ":host{--cover-hero-overlay:linear-gradient(270deg, #0000 0%, #000000e6 100%);--cover-hero-text-color:var(--color-text-inverse);display:block;overflow:hidden}:host,*{box-sizing:border-box}:host .main-container{position:relative;width:100%;align-items:baseline}:host .content-container{color:var(--cover-hero-text-color);fill:var(--cover-hero-text-color)}:host .main-container .cover-container{position:relative;width:100%;padding-top:calc(100% / (var(--cover-hero-aspect-ratio, var(--image-aspect-ratio, 16/9))));background-color:var(--gray600)}::slotted([slot=\"cover\"]){position:absolute;display:block;width:100%;height:100%;inset:0;object-fit:cover;object-position:top center}::slotted(z-info-reveal){position:absolute;z-index:1;right:var(--grid-margin);bottom:var(--grid-margin)}:host([variant=\"overlay\"]:not([preserve-aspect-ratio=\"\"],[preserve-aspect-ratio=\"true\"])) .main-container{height:100%}:host([variant=\"overlay\"]:not([preserve-aspect-ratio=\"\"],[preserve-aspect-ratio=\"true\"])) .main-container .cover-container{position:absolute;z-index:-1;height:100%;padding:0}:host([variant=\"overlay\"]) .main-container .cover-container::after{position:absolute;top:0;left:0;width:100%;height:100%;background:var(--cover-hero-overlay);content:\"\"}:host([variant=\"overlay\"]:is([preserve-aspect-ratio=\"\"],[preserve-aspect-ratio=\"true\"])) .main-container .content-container{position:absolute;inset:0}:host([variant=\"overlay\"]) .main-container .content-container{height:100%;padding:var(--grid-margin)}:host([variant=\"stacked\"]){--cover-hero-text-color:var(--color-text01)}:host([variant=\"stacked\"]) .content-container ::slotted(*){padding:var(--grid-margin) 0}";
+
+const ZCoverHero = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    /**
+     * Cover hero variant. Can be `OVERLAY` or `STACKED`.
+     */
+    this.variant = CoverHeroVariant.OVERLAY;
+    /**
+     * Vertical content position (for `STACKED` variant).
+     */
+    this.contentPosition = CoverHeroContentPosition.TOP;
+    /**
+     * Whether to keep the image aspect ratio.
+     * If set to `false`, the cssprop `--cover-hero-aspect-ratio` will not affect the component's size;
+     * instead, the height of the component follows the content's one.
+     * Note: it may be necessary to set a min and/or max height to the component.
+     */
+    this.preserveAspectRatio = true;
+  }
+  /**
+   * Store the intrinsic aspect ratio of the slotted image when loaded,
+   * to have a default when `--cover-hero-aspect-ratio` is not set.
+   * @param target The event target
+   */
+  onImgLoad({ target }) {
+    if (target instanceof Image && target.closest("[slot=cover]")) {
+      const ratio = target.naturalWidth / target.naturalHeight;
+      this.host.style.setProperty("--image-aspect-ratio", ratio.toString());
+    }
+  }
+  /**
+   * Template for the content.
+   */
+  renderContent() {
+    return (h("div", { class: "content-container" }, h("slot", { name: "content" })));
+  }
+  render() {
+    return (h(Host, null, this.variant === CoverHeroVariant.STACKED &&
+      this.contentPosition === CoverHeroContentPosition.TOP &&
+      this.renderContent(), h("div", { class: "main-container" }, h("div", { class: "cover-container" }, h("slot", { name: "cover" })), h("slot", { name: "info-reveal" }), this.variant === CoverHeroVariant.OVERLAY && this.renderContent()), this.variant === CoverHeroVariant.STACKED &&
+      this.contentPosition === CoverHeroContentPosition.BOTTOM &&
+      this.renderContent()));
+  }
+  get host() { return getElement(this); }
+};
+ZCoverHero.style = stylesCss;
+
+export { ZCoverHero as z_cover_hero };