@zanichelli/albe-web-components 6.3.4 → 6.5.0-offcanvasTest

package/dist/esm/z-app-header.entry.js

@@ -0,0 +1,129 @@
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-a2ca4b97.js';
+
+const stylesCss = ":host{--app-header-height:auto;--app-header-typography-1-size:24px;--app-header-typography-2-size:28px;--app-header-typography-3-size:32px;--app-header-typography-4-size:36px;--app-header-typography-5-size:42px;--app-header-typography-6-size:48px;--app-header-typography-7-size:54px;--app-header-typography-8-size:60px;--app-header-typography-9-size:68px;--app-header-typography-10-size:76px;--app-header-typography-11-size:84px;--app-header-typography-12-size:92px;--app-header-typography-1-lineheight:1.33;--app-header-typography-2-lineheight:1.29;--app-header-typography-3-lineheight:1.25;--app-header-typography-4-lineheight:1.24;--app-header-typography-5-lineheight:1.24;--app-header-typography-6-lineheight:1.25;--app-header-typography-7-lineheight:1.2;--app-header-typography-8-lineheight:1.26;--app-header-typography-9-lineheight:1.24;--app-header-typography-10-lineheight:1.26;--app-header-typography-11-lineheight:1.2;--app-header-typography-12-lineheight:1.2;--app-header-typography-1-tracking:calc(-0.2 / 1em);--app-header-typography-2-tracking:calc(-0.4 / 1em);--app-header-typography-3-tracking:calc(-0.6 / 1em);--app-header-typography-4-tracking:calc(-0.8 / 1em);--app-header-typography-5-tracking:calc(-1 / 1em);--app-header-typography-6-tracking:calc(-1.2 / 1em);--app-header-typography-7-tracking:calc(-1.4 / 1em);--app-header-typography-8-tracking:calc(-1.6 / 1em);--app-header-typography-9-tracking:calc(-1.8 / 1em);--app-header-typography-10-tracking:calc(-2 / 1em);--app-header-typography-11-tracking:calc(-2.2 / 1em);--app-header-typography-12-tracking:calc(-2.4 / 1em);--app-header-top-offset:48px;--app-header-drawer-trigger-size:calc(var(--space-unit) * 4);--app-header-bg:var(--color-white);--app-header-stucked-bg:var(--color-white);--app-header-text-color:var(--gray800);--app-header-stucked-text-color:var(--gray800);display:block;color:var(--app-header-text-color)}:host,*{box-sizing:border-box}.heading-panel{position:relative;display:flex;width:100%;height:var(--app-header-height);flex-direction:column;flex-grow:0;flex-shrink:0;align-items:baseline;justify-content:flex-start;padding:calc(var(--space-unit) * 2) var(--grid-mobile-margin);background:var(--app-header-bg)}:host(:empty) .heading-panel{padding:0}.heading-title{display:flex;max-width:100%;flex-direction:row;align-items:center}:host(:not([menu-length=\"0\"])) .heading-subtitle{padding-left:calc(var(--app-header-drawer-trigger-size) + (var(--space-unit) * 1.5))}.heading-stucked{position:fixed;z-index:20;top:var(--app-header-top-offset);left:0;display:flex;width:100%;max-width:100%;flex-direction:row;padding:var(--space-unit) var(--grid-mobile-margin);animation:slide-stucked-heading-in 250ms ease-out;background:var(--app-header-stucked-bg);box-shadow:var(--shadow-2);color:var(--app-header-stucked-text-color)}.heading-stucked .heading-title,.heading-stucked .heading-title>*,.heading-stucked .heading-title ::slotted([slot=\"stucked-title\"]){display:block;overflow:hidden;line-height:1.2;text-overflow:ellipsis;white-space:nowrap}.heading-stucked .heading-title>*,::slotted([slot=\"title\"]),::slotted([slot=\"stucked-title\"]){margin:0;font-family:\"IBM Plex Serif\", serif;font-size:var(--app-header-typography-3-size);font-weight:700;letter-spacing:var(--app-header-typography-3-tracking)}::slotted([slot=\"title\"]){line-height:1}::slotted([slot=\"subtitle\"]){margin:var(--space-unit) 0 0;font-family:var(--font-family-sans);font-size:20px;font-style:italic;font-weight:500;line-height:1.2}.heading-container{position:relative;z-index:1;display:flex;max-width:100%;flex-direction:column;align-items:flex-start;justify-content:flex-start;margin-right:auto}.menu-container{display:none;flex-flow:row wrap;align-items:baseline}.menu-container ::slotted([open]){position:relative;z-index:3}.menu-container ::slotted(*:not(:last-of-type)){margin-right:calc(var(--space-unit) * 4.5)}.drawer-trigger{padding:0;border:0;margin:0 calc(var(--space-unit) * 1.5) 0 0;appearance:none;background:none;border-radius:0;color:inherit;cursor:pointer}.drawer-trigger z-icon{--z-icon-width:var(--app-header-drawer-trigger-size);--z-icon-height:var(--app-header-drawer-trigger-size);fill:currentcolor}.drawer-container{position:fixed;z-index:100;top:var(--app-header-top-offset);left:0;width:100%;height:100%;pointer-events:none}.drawer-container .drawer-overlay{position:absolute;z-index:1;top:0;left:0;display:block;width:100%;height:100%;background:var(--gray900);opacity:0;pointer-events:none;transition:opacity 400ms ease-out}.drawer-panel{position:absolute;z-index:2;top:0;left:0;display:flex;width:375px;max-width:100%;height:100%;flex-direction:column;align-items:flex-start;padding:calc(var(--space-unit) * 2) var(--space-unit);background:var(--color-white);color:var(--gray800);pointer-events:none;transform:translate3d(-100%, 0, 0);transition:transform 400ms ease-out}.drawer-content{display:flex;overflow:auto;width:100%;flex:1 auto;flex-direction:column;padding:calc(var(--space-unit) * 0.5) var(--space-unit)}.drawer-content::-webkit-scrollbar{width:10px;background:linear-gradient(to right, transparent 0 3px, var(--gray200) 3px 7px, transparent 7px 10px);border-radius:var(--border-radius)}.drawer-content::-webkit-scrollbar-track{background-color:transparent}.drawer-content::-webkit-scrollbar-thumb{width:10px;background-color:var(--color-primary01);border-radius:var(--border-radius)}.drawer-content::-webkit-scrollbar-thumb:hover{background-color:var(--color-hover-primary)}.drawer-content ::slotted(z-menu){width:100%}.drawer-content ::slotted(z-menu:not(:last-of-type)){margin-bottom:calc(var(--space-unit) * 2.5)}.drawer-close{--z-icon-width:var(--app-header-drawer-trigger-size);--z-icon-height:var(--app-header-drawer-trigger-size);padding:0;border:0;margin:0 0 calc(var(--space-unit) * 2.5) var(--space-unit);appearance:none;background:transparent;border-radius:0;color:inherit;cursor:pointer;fill:currentcolor;font-size:inherit;outline:none}.drawer-close:focus-visible{box-shadow:var(--shadow-focus-primary)}:host([drawer-open]) .drawer-container .drawer-overlay{opacity:0.7;pointer-events:all}:host([drawer-open]) .drawer-container .drawer-panel{pointer-events:all;transform:none}.hero-container{position:absolute;z-index:0;top:0;left:0;width:100%;height:100%}:host([overlay]) .heading-panel .drawer-trigger z-icon,:host([overlay]) .heading-panel .heading-container,:host([overlay]) .heading-panel .menu-container{color:var(--color-white);fill:var(--color-white)}:host([overlay]) .heading-panel .menu-container ::slotted(z-menu:not([open])){--color-surface05:var(--color-white)}:host([overlay]) .hero-container::after{position:absolute;z-index:0;top:0;left:0;width:100%;height:100%;background:var(--color-black);content:\"\";opacity:0.5}.hero-container img,.hero-container ::slotted(*){position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;object-position:top center;-webkit-user-drag:none}@media only screen and (min-width: 768px){.heading-panel{padding:calc(var(--space-unit) * 3) var(--grid-tablet-margin)}.heading-stucked{padding-right:var(--grid-tablet-margin);padding-left:var(--grid-tablet-margin)}:host(:not([flow=\"offcanvas\"])) .heading-subtitle{padding-left:0}:host(:not([flow=\"offcanvas\"])) .menu-container{display:flex}:host(:not([flow=\"offcanvas\"])) .heading-container .drawer-trigger{display:none}:host(:not([flow=\"offcanvas\"],[menu-length=\"0\"])) .heading-container:not(:last-child){margin-bottom:calc(var(--space-unit) * 3)}::slotted([slot=\"title\"]){font-size:var(--app-header-typography-6-size);letter-spacing:var(--app-header-typography-6-tracking)}::slotted([slot=\"subtitle\"]){margin-top:calc(var(--space-unit) * 1.5)}}@media only screen and (min-width: 1152px){.heading-panel,.heading-stucked{padding-right:var(--grid-desktop-margin);padding-left:var(--grid-desktop-margin)}:host(:not([flow=\"stack\"])) .heading-panel{flex-flow:row wrap}::slotted([slot=\"title\"]){margin-right:var(--grid-desktop-gutter);font-size:var(--app-header-typography-7-size);letter-spacing:var(--app-header-typography-7-tracking)}:host(:not([flow=\"offcanvas\"],[menu-length=\"0\"])) .heading-container:not(:last-child){margin-bottom:calc(var(--space-unit) * 2)}.menu-container{margin-top:var(--space-unit)}}@media only screen and (min-width: 1366px){.heading-panel,.heading-stucked{padding-right:var(--grid-wide-margin);padding-left:var(--grid-wide-margin)}::slotted([slot=\"title\"]){margin-right:var(--grid-wide-gutter);font-size:var(--app-header-typography-9-size);letter-spacing:var(--app-header-typography-9-tracking)}:host(:not([flow=\"offcanvas\"],[menu-length=\"0\"])) .heading-container:not(:last-child){margin-bottom:0}}@keyframes slide-stucked-heading-in{0%{transform:translate3d(0, -100%, 0)}100%{transform:none}}";
+
+const SUPPORT_INTERSECTION_OBSERVER = typeof IntersectionObserver !== "undefined";
+const ZAppHeader = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.sticking = createEvent(this, "sticking", 7);
+    /**
+     * Stuck mode for the header.
+     * You can programmatically set it using an IntersectionObserver.
+     * **Optional**
+     */
+    this.stuck = false;
+    /**
+     * Should place an overlay over the hero image.
+     * Useful for legibility purpose.
+     * **Optional**
+     */
+    this.overlay = false;
+    /**
+     * Control menu bar position in the header.
+     * - auto: the menu bar is positioned near the title
+     * - stack: the menu bar is positioned below the title
+     * - offcanvas: the menu bar is not displayed and a burger icon appears to open the offcanvas menu
+     *
+     * **Optional**
+     */
+    this.flow = "auto";
+    /**
+     * The opening state of the drawer.
+     */
+    this.drawerOpen = false;
+    /**
+     * The stucked state of the bar.
+     */
+    this.stucked = false;
+    this.observer = SUPPORT_INTERSECTION_OBSERVER &&
+      new IntersectionObserver(([entry]) => {
+        this.stucked = !entry.isIntersecting;
+      }, {
+        threshold: 0.5,
+      });
+    this.openDrawer = this.openDrawer.bind(this);
+    this.closeDrawer = this.closeDrawer.bind(this);
+    this.collectMenuElements.bind(this);
+  }
+  emitStickingEvent() {
+    this.sticking.emit(this.stucked);
+  }
+  componentDidLoad() {
+    this.collectMenuElements();
+    this.onStuckMode();
+  }
+  get title() {
+    const titleElement = this.hostElement.querySelector('[slot="title"]');
+    if (titleElement === null) {
+      return "";
+    }
+    return titleElement.textContent.trim();
+  }
+  get scrollParent() {
+    const parent = this.hostElement.offsetParent;
+    if (parent === document.body || parent === document.documentElement) {
+      return window;
+    }
+    return parent;
+  }
+  collectMenuElements() {
+    const menuElements = (this.menuElements = this.hostElement.querySelectorAll('[slot="menu"]'));
+    this.menuLength = menuElements.length;
+    this.setMenuFloatingMode();
+  }
+  onStuckMode() {
+    if (this.stuck) {
+      this.enableStuckObserver();
+    }
+    else {
+      this.disableStuckMode();
+    }
+  }
+  enableStuckObserver() {
+    if (this.observer) {
+      this.observer.observe(this.container);
+    }
+  }
+  disableStuckMode() {
+    this.stucked = false;
+    if (this.observer) {
+      this.observer.unobserve(this.container);
+    }
+  }
+  onStucked() {
+    const scrollParent = this.scrollParent;
+    if (!scrollParent) {
+      return;
+    }
+    this.emitStickingEvent();
+  }
+  setMenuFloatingMode() {
+    if (this.menuElements.length === 0) {
+      return;
+    }
+    const elements = this.menuElements;
+    for (let i = 0, len = elements.length; i < len; i++) {
+      elements[i].open = false;
+      elements[i].floating = !this.drawerOpen;
+    }
+  }
+  render() {
+    return (h(Host, { "menu-length": this.menuLength }, h("div", { class: "heading-panel", ref: (el) => (this.container = el) }, h("div", { class: "hero-container" }, h("slot", { name: "hero" }, this.hero && (h("img", { alt: "", src: this.hero })))), h("div", { class: "heading-container" }, h("div", { class: "heading-title" }, this.menuLength > 0 && (h("button", { class: "drawer-trigger", "aria-label": "Apri menu", onClick: this.openDrawer }, h("z-icon", { name: "burger-menu" }))), h("slot", { name: "title" })), h("div", { class: "heading-subtitle" }, h("slot", { name: "subtitle" }))), h("div", { class: "menu-container" }, !this.drawerOpen && this.flow !== "offcanvas" && (h("slot", { name: "menu", onSlotchange: () => this.collectMenuElements() })))), h("div", { class: "drawer-container" }, h("div", { class: "drawer-overlay", onClick: this.closeDrawer }), h("div", { class: "drawer-panel" }, h("button", { class: "drawer-close", "aria-label": "Chiudi menu", onClick: this.closeDrawer }, h("z-icon", { name: "close" })), h("div", { class: "drawer-content" }, this.drawerOpen && (h("slot", { name: "menu", onSlotchange: () => this.collectMenuElements() }))))), this.stucked && (h("div", { class: "heading-stucked" }, this.menuLength > 0 && (h("button", { class: "drawer-trigger", "aria-label": "Apri menu", onClick: this.openDrawer }, h("z-icon", { name: "burger-menu" }))), h("div", { class: "heading-title" }, h("slot", { name: "stucked-title" }, this.title))))));
+  }
+  openDrawer() {
+    this.drawerOpen = true;
+  }
+  closeDrawer() {
+    this.drawerOpen = false;
+  }
+  get hostElement() { return getElement(this); }
+  static get watchers() { return {
+    "stuck": ["onStuckMode"],
+    "stucked": ["onStucked"],
+    "drawerOpen": ["setMenuFloatingMode"]
+  }; }
+};
+ZAppHeader.style = stylesCss;
+
+export { ZAppHeader as z_app_header };

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

@@ -1,5 +1,5 @@
 import { r as registerInstance, c as createEvent, h } from './index-a2ca4b97.js';
-import { I as InputType, K as KeyboardKeyCode } from './index-968a240f.js';
+import { I as InputType, K as KeyboardKeyCode, k as ListDividerType } from './index-968a240f.js';
 import { h as handleKeyboardSubmit } from './utils-ccb4d66f.js';
 import './breakpoints-c386984e.js';
 
@@ -123,6 +123,9 @@ const ZCombobox = class {
     }
     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 }, 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 })));
+  }
   renderList(items) {
     if (!items) {
       return;
@@ -130,10 +133,27 @@ const ZCombobox = class {
     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 (h("z-myz-list-item", { id: item.id, listitemid: item.id, action: `combo-li-${this.inputid}`, underlined: i !== items.length - 1 }, 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 })));
+      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("z-body", { class: "z-list-group-title", level: 3, slot: "header-title", variant: "semibold" }, 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" })));
   }

package/dist/esm/z-file-upload.entry.js

@@ -53,8 +53,9 @@ const ZFileUpload = class {
     return this.files;
   }
   getType() {
-    if (getDevice() !== Device.DESKTOP)
+    if (getDevice() !== Device.DESKTOP) {
       return ZFileUploadType.DEFAULT;
+    }
     return this.type;
   }
   handleAccessibility() {

package/dist/esm/{z-offcanvas.entry.js → z-icon_2.entry.js}

@@ -1,6 +1,25 @@
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-a2ca4b97.js';
+import { r as registerInstance, h, c as createEvent, H as Host, g as getElement } from './index-a2ca4b97.js';
+import { I as ICONS } from './icons-56ca282c.js';
 import { O as OffCanvasVariant, u as TransitionDirection } from './index-968a240f.js';
 
+const stylesCss$1 = ":host{margin-right:var(--z-icon-right-margin, 0);margin-left:var(--z-icon-left-margin, 0);line-height:0;vertical-align:middle}:host svg:not([width]){width:var(--z-icon-width, 18px)}:host svg:not([height]){height:var(--z-icon-height, 18px)}";
+
+const ZIcon = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+  }
+  selectPathOrPolygon(iconValue) {
+    if (iconValue === null || iconValue === void 0 ? void 0 : iconValue.startsWith("M")) {
+      return h("path", { d: ICONS[this.name] });
+    }
+    return h("polygon", { points: ICONS[this.name] });
+  }
+  render() {
+    return (h("svg", { viewBox: "0 0 1000 1000", width: this.width, height: this.height, id: this.iconid, fill: this.fill ? `var(--${this.fill})` : "" }, this.selectPathOrPolygon(ICONS[this.name])));
+  }
+};
+ZIcon.style = stylesCss$1;
+
 const stylesCss = ".sc-z-offcanvas-h{--z-offcanvas--container-width:375px;--z-offcanvas--top-space:0;display:none;min-width:100%;height:100%;justify-content:end;font-family:var(--font-family-sans);font-weight:var(--font-rg)}.canvas-container.sc-z-offcanvas{display:flex;overflow:-moz-scrollbars-none;overflow:hidden;min-width:100%;height:100%;flex-direction:column;background:var(--color-surface01);transform:translateX(100%)}@keyframes enter-right{from{transform:translateX(100%)}to{transform:translateX(0)}}[open].sc-z-offcanvas-h>.canvas-container.sc-z-offcanvas{animation-duration:0.4s;animation-name:enter-right;animation-timing-function:ease-out;transform:translateX(0)}@keyframes exit-right{from{transform:translateX(0)}to{transform:translateX(100%)}}.sc-z-offcanvas-h:not([open])[variant=\"overlay\"]>.canvas-container.sc-z-offcanvas{animation-duration:0.4s;animation-name:exit-right;animation-timing-function:ease-out;transform:translateX(100%)}[variant=\"overlay\"].sc-z-offcanvas-h{position:fixed;z-index:1000;top:var(--z-offcanvas--top-space);right:0;bottom:0;left:0;height:calc(100% - var(--z-offcanvas--top-space))}[variant=\"overlay\"].sc-z-offcanvas-h>.canvas-container.sc-z-offcanvas{z-index:1010}[variant=\"overlay\"].sc-z-offcanvas-h .canvas-background.sc-z-offcanvas{position:absolute;left:0;width:100%;height:100%;background-color:var(--gray900);opacity:0.7}[transitiondirection=\"right\"].sc-z-offcanvas-h{justify-content:start}[transitiondirection=\"right\"].sc-z-offcanvas-h>.canvas-container.sc-z-offcanvas{transform:translateX(-100%)}@keyframes enter-left{from{transform:translateX(-100%)}to{transform:translateX(0)}}[transitiondirection=\"right\"][open].sc-z-offcanvas-h>.canvas-container.sc-z-offcanvas{animation-duration:0.4s;animation-name:enter-left;animation-timing-function:ease-out;transform:translateX(0)}@keyframes exit-left{from{transform:translateX(0)}to{transform:translateX(-100%)}}.sc-z-offcanvas-h:not([open])[variant=\"overlay\"][transitiondirection=\"right\"]>.canvas-container.sc-z-offcanvas{animation-duration:0.4s;animation-name:exit-left;animation-timing-function:ease-out;transform:translateX(-100%)}.canvas-container.sc-z-offcanvas>.canvas-content.sc-z-offcanvas{overflow:auto;flex:1 auto;padding:0 calc(var(--space-unit) * 2);margin:calc(var(--space-unit) * 2) calc(var(--space-unit) / 2) calc(var(--space-unit) * 2) 0;overflow-x:hidden}.canvas-container.sc-z-offcanvas .canvas-content.sc-z-offcanvas::-webkit-scrollbar{width:10px;background:linear-gradient(to right, transparent 0 3px, var(--gray200) 3px 7px, transparent 7px 10px);border-radius:var(--border-radius)}.canvas-container.sc-z-offcanvas .canvas-content.sc-z-offcanvas::-webkit-scrollbar-track{background-color:transparent}.canvas-container.sc-z-offcanvas .canvas-content.sc-z-offcanvas::-webkit-scrollbar-thumb{width:10px;background-color:var(--color-primary01);border-radius:var(--border-radius)}.canvas-container.sc-z-offcanvas .canvas-content.sc-z-offcanvas::-webkit-scrollbar-thumb:hover{background-color:var(--color-hover-primary)}.canvas-container.sc-z-offcanvas .canvas-content.sc-z-offcanvas{scrollbar-color:var(--color-primary01) transparent}@media only screen and (min-width: 768px){.sc-z-offcanvas-h{min-width:auto}.canvas-container.sc-z-offcanvas{width:auto;min-width:max(var(--z-offcanvas--container-width), 375px);max-width:max(var(--z-offcanvas--container-width), 375px);height:auto;min-height:calc(var(--space-unit) * 40)}@keyframes grow{from{width:0}to{width:max(var(--z-offcanvas--container-width), 375px)}}.sc-z-offcanvas-h:not([variant=\"overlay\"])[open]{width:auto;animation-duration:0.4s;animation-name:grow;animation-timing-function:ease-out}}";
 
 const ZOffcanvas = class {
@@ -16,16 +35,17 @@ const ZOffcanvas = class {
     /** open component. Default: false */
     this.open = false;
     /** open content transitioning in a specified direction left | right. Default: left */
-    this.transitiondirection = TransitionDirection.LEFT;
+    this.transitionDirection = TransitionDirection.LEFT;
   }
   componentWillLoad() {
     this.handleOpenStatus();
   }
   onOpenChanged() {
     this.handleOpenStatus();
-    this.canvasOpenStatusChanged.emit(this.open);
+    // this.canvasOpenStatusChanged.emit(this.open);
   }
   handleOpenStatus() {
+    console.log("OC handleOpenStatus open", this.open);
     if (this.open) {
       this.hostElement.style.display = "flex";
     }
@@ -35,6 +55,8 @@ const ZOffcanvas = class {
     }
   }
   handleAnimationEnd() {
+    console.log("OC animationEnd open", this.open);
+    this.canvasOpenStatusChanged.emit(this.open);
     if (this.hostElement.hasAttribute("open")) {
       this.hostElement.querySelector(`.canvas-content`).focus();
     }
@@ -53,4 +75,4 @@ const ZOffcanvas = class {
 };
 ZOffcanvas.style = stylesCss;
 
-export { ZOffcanvas as z_offcanvas };
+export { ZIcon as z_icon, ZOffcanvas as z_offcanvas };

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

@@ -3,7 +3,7 @@ import { j as LabelPosition, I as InputType } from './index-968a240f.js';
 import { r as randomId, d as boolean } from './utils-ccb4d66f.js';
 import './breakpoints-c386984e.js';
 
-const stylesCss$1 = ".sc-z-input-h{display:inline-block;width:inherit}input.sc-z-input::-ms-clear,input.sc-z-input::-ms-reveal{display:none}.sc-z-input-h input.sc-z-input::-ms-clear,.sc-z-input-h input.sc-z-input::-ms-reveal{display:none}input.sc-z-input,textarea.sc-z-input,.textarea-wrapper.sc-z-input{box-sizing:border-box;border:var(--border-size-small) solid var(--color-surface04);background:var(--color-input-field01);border-radius:var(--border-radius-small);color:var(--color-text02);fill:var(--color-icon02);font-family:var(--font-family-sans);font-size:var(--font-size-3);font-weight:var(--font-rg);outline:none}input.sc-z-input:focus:focus-visible,.textarea-wrapper.sc-z-input:focus-within{box-shadow:var(--shadow-focus-primary)}input.sc-z-input:focus:focus-visible,textarea.sc-z-input:focus:focus-visible{color:var(--color-primary01)}.filled.sc-z-input{border-color:var(--color-surface05)}.input-success.sc-z-input{border-color:var(--color-success01);background:var(--color-success-inverse);fill:var(--color-success01)}.input-error.sc-z-input{border-color:var(--color-error01);background:var(--color-error-inverse);fill:var(--color-error01)}.input-warning.sc-z-input{border-color:var(--color-warning01);background:var(--color-warning-inverse);fill:var(--color-warning01)}input.sc-z-input:hover,.textarea-wrapper.sc-z-input:hover{outline:var(--border-size-medium) solid var(--color-surface04);outline-offset:-2px}input[readonly].sc-z-input,.readonly.sc-z-input{border-color:var(--color-disabled01);fill:var(--color-disabled01);pointer-events:none}[disabled].sc-z-input-h:not([disabled=\"false\"]) input.sc-z-input,[disabled].sc-z-input-h:not([disabled=\"false\"]) .textarea-wrapper.sc-z-input,[disabled].sc-z-input-h:not([disabled=\"false\"]) z-icon.sc-z-input{border-color:var(--color-disabled01);box-shadow:none;color:var(--color-disabled02);fill:var(--color-disabled01);pointer-events:none}[disabled].sc-z-input-h:not([disabled=\"false\"]) input.sc-z-input:hover{border-width:var(--border-size-small)}input.sc-z-input::placeholder,textarea.sc-z-input::placeholder{color:var(--color-text05)}.sc-z-input::-webkit-textarea-placeholder{color:var(--color-text05)}.sc-z-input:-ms-textarea-placeholder{color:var(--color-text05)}.sc-z-input::placeholder{color:var(--color-text05)}.sc-z-input:placeholder{color:var(--color-text05)}label.input-label.sc-z-input{display:block;padding-bottom:var(--space-unit);color:var(--color-text02);font-family:var(--font-family-sans);font-size:var(--font-size-1);font-weight:var(--font-sb);text-align:left;text-transform:uppercase}[disabled].sc-z-input-h:not([disabled=\"false\"]) label.input-label.sc-z-input{color:var(--color-disabled02)}.text-wrapper.sc-z-input>div.sc-z-input{position:relative;z-index:1;fill:var(--color-icon02)}.text-wrapper.sc-z-input>div.sc-z-input>input.sc-z-input{width:100%;height:calc(var(--space-unit) * 5.5);box-sizing:border-box;padding:0 calc(var(--space-unit) * 1.5);margin:0}.text-wrapper.sc-z-input>div.sc-z-input>input.has-icon.sc-z-input,.text-wrapper.sc-z-input>div.sc-z-input>input.has-clear-icon.sc-z-input{padding-right:calc(var(--space-unit) * 5.25)}.text-wrapper.sc-z-input>div.sc-z-input>input.has-icon.has-clear-icon.sc-z-input{padding-right:calc(var(--space-unit) * 8)}.text-wrapper.sc-z-input .icons-wrapper.sc-z-input{position:absolute;z-index:2;top:50%;right:calc(var(--space-unit) * 1.5);display:flex;pointer-events:none;transform:translateY(-50%)}.text-wrapper.sc-z-input .icons-wrapper.sc-z-input>button.icon-button.sc-z-input{padding:0;border:0;background:none;color:inherit;font:inherit;pointer-events:initial}.text-wrapper.sc-z-input .icons-wrapper.sc-z-input>button.icon-button.sc-z-input+button.icon-button.sc-z-input{margin-left:calc(var(--space-unit) * 0.5)}.text-wrapper.sc-z-input .icons-wrapper.sc-z-input>button.icon-button.reset-icon.sc-z-input,.text-wrapper.sc-z-input .icons-wrapper.sc-z-input>button.icon-button.toggle-password-icon.sc-z-input{cursor:pointer}.text-wrapper.sc-z-input .icons-wrapper.sc-z-input>button.icon-button.sc-z-input>z-icon.sc-z-input{--z-icon-width:18px;--z-icon-height:18px;display:block}.text-wrapper.sc-z-input>div.sc-z-input>input.sc-z-input:-webkit-autofill,.text-wrapper.sc-z-input>div.sc-z-input>input.sc-z-input:-webkit-autofill:hover,.text-wrapper.sc-z-input>div.sc-z-input>input.sc-z-input:-webkit-autofill:focus,.text-wrapper.sc-z-input>div.sc-z-input>input.sc-z-input:-webkit-autofill:active{background-clip:text !important}.textarea-wrapper.sc-z-input{padding:calc(var(--space-unit) * 1.5);scrollbar-color:var(--color-primary01) transparent}textarea.sc-z-input::-webkit-scrollbar{width:10px;background:linear-gradient(to right, transparent 0 3px, var(--gray200) 3px 7px, transparent 7px 10px);border-radius:var(--border-radius)}textarea.sc-z-input::-webkit-scrollbar-track{background-color:transparent}textarea.sc-z-input::-webkit-scrollbar-thumb{width:10px;background-color:var(--color-primary01);border-radius:var(--border-radius)}textarea.sc-z-input::-webkit-scrollbar-thumb:hover{background-color:var(--color-hover-primary)}textarea.sc-z-input{width:100%;min-height:132px;padding:0;border:none;margin:0;resize:none}.radio-wrapper.sc-z-input,.checkbox-wrapper.sc-z-input{position:relative;display:inline-flex;flex-direction:row;align-items:center;color:var(--color-text01);fill:var(--color-primary01);font-family:var(--font-family-sans)}.radio-wrapper.sc-z-input:hover,.checkbox-wrapper.sc-z-input:hover{color:var(--color-hover-primary);fill:currentcolor}.radio-wrapper.sc-z-input>input.sc-z-input,.checkbox-wrapper.sc-z-input>input.sc-z-input{position:absolute;z-index:-1;opacity:0;pointer-events:none}.radio-wrapper.sc-z-input .radio-label.sc-z-input,.checkbox-wrapper.sc-z-input .checkbox-label.sc-z-input{display:inline-flex;align-items:center;margin:0;color:inherit;font-family:inherit;font-size:inherit;font-weight:inherit;line-height:1;text-transform:inherit}.radio-wrapper.sc-z-input input.sc-z-input:not(:disabled)+.radio-label.sc-z-input,.checkbox-wrapper.sc-z-input input.sc-z-input:not(:disabled)+.checkbox-label.sc-z-input{cursor:pointer}.radio-wrapper.sc-z-input .radio-label.sc-z-input z-icon.sc-z-input,.checkbox-wrapper.sc-z-input .checkbox-label.sc-z-input z-icon.sc-z-input{cursor:pointer;fill:inherit}.radio-wrapper.sc-z-input .radio-label.after.sc-z-input,.checkbox-wrapper.sc-z-input .checkbox-label.after.sc-z-input{flex-direction:row}.radio-wrapper.sc-z-input .radio-label.before.sc-z-input,.checkbox-wrapper.sc-z-input .checkbox-label.before.sc-z-input{flex-direction:row-reverse}.radio-wrapper.sc-z-input .radio-label.after.sc-z-input>span.sc-z-input,.checkbox-wrapper.sc-z-input .checkbox-label.after.sc-z-input>span.sc-z-input{margin-left:var(--space-unit)}.radio-wrapper.sc-z-input .radio-label.before.sc-z-input>span.sc-z-input,.checkbox-wrapper.sc-z-input .checkbox-label.before.sc-z-input>span.sc-z-input{margin-right:var(--space-unit)}.radio-wrapper.sc-z-input>input.sc-z-input:focus:focus-visible+.radio-label.sc-z-input>z-icon.sc-z-input,.checkbox-wrapper.sc-z-input>input.sc-z-input:focus:focus-visible+.checkbox-label.sc-z-input>z-icon.sc-z-input{border-radius:var(--border-radius-small);box-shadow:var(--shadow-focus-primary)}.radio-wrapper.sc-z-input>input.sc-z-input:disabled+.radio-label.sc-z-input,.checkbox-wrapper.sc-z-input>input.sc-z-input:disabled+.checkbox-label.sc-z-input{color:var(--color-disabled02)}.radio-wrapper.sc-z-input>input.sc-z-input:disabled+.radio-label.sc-z-input>z-icon.sc-z-input,.checkbox-wrapper.sc-z-input>input.sc-z-input:disabled+.checkbox-label.sc-z-input>z-icon.sc-z-input{cursor:default;fill:var(--color-disabled01)}";
+const stylesCss$1 = ".sc-z-input-h{display:inline-block;width:inherit}input.sc-z-input::-ms-clear,input.sc-z-input::-ms-reveal{display:none}.sc-z-input-h input.sc-z-input::-ms-clear,.sc-z-input-h input.sc-z-input::-ms-reveal{display:none}input.sc-z-input,textarea.sc-z-input,.textarea-wrapper.sc-z-input{box-sizing:border-box;border:var(--border-size-small) solid var(--color-surface04);background:var(--color-input-field01);border-radius:var(--border-radius-small);color:var(--color-text01);fill:var(--color-icon02);font-family:var(--font-family-sans);font-size:var(--font-size-3);font-weight:var(--font-rg);outline:none}input.sc-z-input:focus:focus-visible,.textarea-wrapper.sc-z-input:focus-within{box-shadow:var(--shadow-focus-primary)}input.sc-z-input:focus:focus-visible,textarea.sc-z-input:focus:focus-visible{color:var(--color-primary02)}.filled.sc-z-input{border-color:var(--color-surface05)}.input-success.sc-z-input{border-color:var(--color-success01);background:var(--color-success-inverse);fill:var(--color-success01)}.input-error.sc-z-input{border-color:var(--color-error01);background:var(--color-error-inverse);fill:var(--color-error01)}.input-warning.sc-z-input{border-color:var(--color-warning01);background:var(--color-warning-inverse);fill:var(--color-warning01)}input.sc-z-input:hover,.textarea-wrapper.sc-z-input:hover{outline:var(--border-size-medium) solid var(--color-surface04);outline-offset:-2px}input[readonly].sc-z-input,.readonly.sc-z-input{border-color:var(--color-disabled01);fill:var(--color-disabled01);pointer-events:none}[disabled].sc-z-input-h:not([disabled=\"false\"]) input.sc-z-input,[disabled].sc-z-input-h:not([disabled=\"false\"]) .textarea-wrapper.sc-z-input,[disabled].sc-z-input-h:not([disabled=\"false\"]) z-icon.sc-z-input{border-color:var(--color-disabled01);box-shadow:none;color:var(--color-disabled02);fill:var(--color-disabled01);pointer-events:none}[disabled].sc-z-input-h:not([disabled=\"false\"]) input.sc-z-input:hover{border-width:var(--border-size-small)}input.sc-z-input::placeholder,textarea.sc-z-input::placeholder{color:var(--color-text05)}.sc-z-input::-webkit-textarea-placeholder{color:var(--color-text05)}.sc-z-input:-ms-textarea-placeholder{color:var(--color-text05)}.sc-z-input::placeholder{color:var(--color-text05)}.sc-z-input:placeholder{color:var(--color-text05)}label.input-label.sc-z-input{display:block;padding-bottom:var(--space-unit);color:var(--color-text02);font-family:var(--font-family-sans);font-size:var(--font-size-1);font-weight:var(--font-sb);text-align:left;text-transform:uppercase}[disabled].sc-z-input-h:not([disabled=\"false\"]) label.input-label.sc-z-input{color:var(--color-disabled02)}.text-wrapper.sc-z-input>div.sc-z-input{position:relative;z-index:1;fill:var(--color-icon02)}.text-wrapper.sc-z-input>div.sc-z-input>input.sc-z-input{width:100%;height:calc(var(--space-unit) * 5.5);box-sizing:border-box;padding:0 calc(var(--space-unit) * 1.5);margin:0}.text-wrapper.sc-z-input>div.sc-z-input>input.has-icon.sc-z-input,.text-wrapper.sc-z-input>div.sc-z-input>input.has-clear-icon.sc-z-input{padding-right:calc(var(--space-unit) * 5.25)}.text-wrapper.sc-z-input>div.sc-z-input>input.has-icon.has-clear-icon.sc-z-input{padding-right:calc(var(--space-unit) * 8)}.text-wrapper.sc-z-input .icons-wrapper.sc-z-input{position:absolute;z-index:2;top:50%;right:calc(var(--space-unit) * 1.5);display:flex;pointer-events:none;transform:translateY(-50%)}.text-wrapper.sc-z-input .icons-wrapper.sc-z-input>button.icon-button.sc-z-input{padding:0;border:0;background:none;color:inherit;font:inherit;pointer-events:initial}.text-wrapper.sc-z-input .icons-wrapper.sc-z-input>button.icon-button.sc-z-input+button.icon-button.sc-z-input{margin-left:calc(var(--space-unit) * 0.5)}.text-wrapper.sc-z-input .icons-wrapper.sc-z-input>button.icon-button.reset-icon.sc-z-input,.text-wrapper.sc-z-input .icons-wrapper.sc-z-input>button.icon-button.toggle-password-icon.sc-z-input{cursor:pointer}.text-wrapper.sc-z-input .icons-wrapper.sc-z-input>button.icon-button.sc-z-input>z-icon.sc-z-input{--z-icon-width:18px;--z-icon-height:18px;display:block}.text-wrapper.sc-z-input>div.sc-z-input>input.sc-z-input:-webkit-autofill,.text-wrapper.sc-z-input>div.sc-z-input>input.sc-z-input:-webkit-autofill:hover,.text-wrapper.sc-z-input>div.sc-z-input>input.sc-z-input:-webkit-autofill:focus,.text-wrapper.sc-z-input>div.sc-z-input>input.sc-z-input:-webkit-autofill:active{background-clip:text !important}.textarea-wrapper.sc-z-input{padding:calc(var(--space-unit) * 1.5);scrollbar-color:var(--color-primary01) transparent}textarea.sc-z-input::-webkit-scrollbar{width:10px;background:linear-gradient(to right, transparent 0 3px, var(--gray200) 3px 7px, transparent 7px 10px);border-radius:var(--border-radius)}textarea.sc-z-input::-webkit-scrollbar-track{background-color:transparent}textarea.sc-z-input::-webkit-scrollbar-thumb{width:10px;background-color:var(--color-primary01);border-radius:var(--border-radius)}textarea.sc-z-input::-webkit-scrollbar-thumb:hover{background-color:var(--color-hover-primary)}textarea.sc-z-input{width:100%;min-height:132px;padding:0;border:none;margin:0;resize:none}.radio-wrapper.sc-z-input,.checkbox-wrapper.sc-z-input{position:relative;display:inline-flex;flex-direction:row;align-items:center;color:var(--color-text01);fill:var(--color-primary01);font-family:var(--font-family-sans)}.radio-wrapper.sc-z-input:hover,.checkbox-wrapper.sc-z-input:hover{color:var(--color-hover-primary);fill:currentcolor}.radio-wrapper.sc-z-input>input.sc-z-input,.checkbox-wrapper.sc-z-input>input.sc-z-input{position:absolute;z-index:-1;opacity:0;pointer-events:none}.radio-wrapper.sc-z-input .radio-label.sc-z-input,.checkbox-wrapper.sc-z-input .checkbox-label.sc-z-input{display:inline-flex;align-items:center;margin:0;color:inherit;font-family:inherit;font-size:inherit;font-weight:inherit;line-height:1;text-transform:inherit}.radio-wrapper.sc-z-input input.sc-z-input:not(:disabled)+.radio-label.sc-z-input,.checkbox-wrapper.sc-z-input input.sc-z-input:not(:disabled)+.checkbox-label.sc-z-input{cursor:pointer}.radio-wrapper.sc-z-input .radio-label.sc-z-input z-icon.sc-z-input,.checkbox-wrapper.sc-z-input .checkbox-label.sc-z-input z-icon.sc-z-input{cursor:pointer;fill:inherit}.radio-wrapper.sc-z-input .radio-label.after.sc-z-input,.checkbox-wrapper.sc-z-input .checkbox-label.after.sc-z-input{flex-direction:row}.radio-wrapper.sc-z-input .radio-label.before.sc-z-input,.checkbox-wrapper.sc-z-input .checkbox-label.before.sc-z-input{flex-direction:row-reverse}.radio-wrapper.sc-z-input .radio-label.after.sc-z-input>span.sc-z-input,.checkbox-wrapper.sc-z-input .checkbox-label.after.sc-z-input>span.sc-z-input{margin-left:var(--space-unit)}.radio-wrapper.sc-z-input .radio-label.before.sc-z-input>span.sc-z-input,.checkbox-wrapper.sc-z-input .checkbox-label.before.sc-z-input>span.sc-z-input{margin-right:var(--space-unit)}.radio-wrapper.sc-z-input>input.sc-z-input:focus:focus-visible+.radio-label.sc-z-input>z-icon.sc-z-input,.checkbox-wrapper.sc-z-input>input.sc-z-input:focus:focus-visible+.checkbox-label.sc-z-input>z-icon.sc-z-input{border-radius:var(--border-radius-small);box-shadow:var(--shadow-focus-primary)}.radio-wrapper.sc-z-input>input.sc-z-input:disabled+.radio-label.sc-z-input,.checkbox-wrapper.sc-z-input>input.sc-z-input:disabled+.checkbox-label.sc-z-input{color:var(--color-disabled02)}.radio-wrapper.sc-z-input>input.sc-z-input:disabled+.radio-label.sc-z-input>z-icon.sc-z-input,.checkbox-wrapper.sc-z-input>input.sc-z-input:disabled+.checkbox-label.sc-z-input>z-icon.sc-z-input{cursor:default;fill:var(--color-disabled01)}";
 
 const ZInput = class {
   constructor(hostRef) {

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

@@ -227,26 +227,29 @@ const ZSelect = class {
         readonly: this.readonly,
         filled: !!this.selectedItem,
         [`input-${this.status}`]: !this.isOpen && !!this.status,
-      } }, this.hasGroupItems ? this.renderSelectGroupItems() : this.renderSelectUlItems()))));
+      } }, this.renderSelectUlItems()))));
+  }
+  renderItem(item, key, lastItem) {
+    return (h("z-list-element", { clickable: !item.disabled, disabled: item.disabled, dividerType: lastItem ? ListDividerType.HEADER : ListDividerType.ELEMENT, role: "option", tabindex: item.disabled || !this.isOpen ? -1 : 0, "aria-selected": !!item.selected, id: `${this.htmlid}_${key}`, onClickItem: () => this.selectItem(item, true), onKeyDown: (e) => this.arrowsSelectNav(e, key) }, h("span", { class: { selected: !!item.selected }, innerHTML: item.name })));
   }
   renderSelectUlItems() {
     if (!this.itemsList.length) {
       return this.renderNoSearchResults();
     }
+    if (this.hasGroupItems) {
+      return this.renderSelectGroupItems();
+    }
     return this.itemsList.map((item, key, array) => {
       const lastItem = array.length === key + 1;
-      return (h("z-list-element", { clickable: !item.disabled, disabled: item.disabled, dividerType: lastItem ? ListDividerType.HEADER : ListDividerType.ELEMENT, role: "option", tabindex: item.disabled || !this.isOpen ? -1 : 0, "aria-selected": !!item.selected, id: `${this.htmlid}_${key}`, onClickItem: () => this.selectItem(item, true), onKeyDown: (e) => this.arrowsSelectNav(e, key) }, h("span", { class: { selected: !!item.selected }, innerHTML: item.name })));
+      return this.renderItem(item, key, lastItem);
     });
   }
   renderSelectGroupItems() {
-    if (!this.itemsList.length) {
-      return this.renderNoSearchResults();
-    }
     const newData = this.itemsList.reduce((group, item, index, array) => {
       var _a;
       const { category } = item;
       const lastItem = array.length === index + 1;
-      const zListItem = (h("z-list-element", { clickable: !item.disabled, disabled: item.disabled, dividerType: lastItem ? ListDividerType.HEADER : ListDividerType.ELEMENT, role: "option", tabindex: item.disabled || !this.isOpen ? -1 : 0, "aria-selected": !!item.selected, id: `${this.htmlid}_${index}`, onClickItem: () => this.selectItem(item, true), onKeyDown: (e) => this.arrowsSelectNav(e, index) }, h("span", { class: { selected: !!item.selected }, innerHTML: item.name })));
+      const zListItem = this.renderItem(item, index, lastItem);
       group[category] = (_a = group[category]) !== null && _a !== void 0 ? _a : [];
       group[category].push(zListItem);
       return group;

package/dist/types/beans/index.d.ts

@@ -79,6 +79,7 @@ export declare type ComboItem = {
   id: string;
   name: string;
   checked: boolean;
+  category?: string;
 };
 export declare enum ButtonVariant {
   PRIMARY = "primary",

package/dist/types/components/inputs/z-combobox/index.d.ts

@@ -31,6 +31,8 @@ export declare class ZCombobox {
   uncheckalltext?: string;
   /** max number of checkable items (0 = unlimited) */
   maxcheckableitems: number;
+  /** group items by category */
+  hasgroupitems?: boolean;
   searchValue: string;
   selectedCounter: number;
   renderItemsList: ComboItem[];
@@ -52,7 +54,9 @@ export declare class ZCombobox {
   private renderHeader;
   private renderContent;
   private renderItems;
+  private renderItem;
   private renderList;
+  private renderGroups;
   private renderNoSearchResults;
   private renderCloseButton;
   private renderSearchInput;

package/dist/types/components/inputs/z-select/index.d.ts

@@ -62,6 +62,7 @@ export declare class ZSelect {
   private scrollToLetter;
   private renderInput;
   private renderSelectUl;
+  private renderItem;
   private renderSelectUlItems;
   private renderSelectGroupItems;
   private renderNoSearchResults;

package/dist/types/components/z-offcanvas/index.d.ts

@@ -14,7 +14,7 @@ export declare class ZOffcanvas {
   /** open component. Default: false */
   open: boolean;
   /** open content transitioning in a specified direction left | right. Default: left */
-  transitiondirection?: TransitionDirection;
+  transitionDirection?: TransitionDirection;
   /** emitted when open prop changes */
   canvasOpenStatusChanged: EventEmitter;
   componentWillLoad(): void;

package/dist/types/components.d.ts

@@ -265,6 +265,10 @@ export namespace Components {
           * show "check all" checkbox (optional)
          */
         "hascheckall"?: boolean;
+        /**
+          * group items by category
+         */
+        "hasgroupitems"?: boolean;
         /**
           * show search input flag (optional)
          */
@@ -1147,7 +1151,7 @@ export namespace Components {
         /**
           * open content transitioning in a specified direction left | right. Default: left
          */
-        "transitiondirection"?: TransitionDirection;
+        "transitionDirection"?: TransitionDirection;
         /**
           * Offcanvas variant. Can be one of "overlay", "pushcontent" Default variant: pushcontent
          */
@@ -2824,6 +2828,10 @@ declare namespace LocalJSX {
           * show "check all" checkbox (optional)
          */
         "hascheckall"?: boolean;
+        /**
+          * group items by category
+         */
+        "hasgroupitems"?: boolean;
         /**
           * show search input flag (optional)
          */
@@ -3838,7 +3846,7 @@ declare namespace LocalJSX {
         /**
           * open content transitioning in a specified direction left | right. Default: left
          */
-        "transitiondirection"?: TransitionDirection;
+        "transitionDirection"?: TransitionDirection;
         /**
           * Offcanvas variant. Can be one of "overlay", "pushcontent" Default variant: pushcontent
          */

package/dist/web-components-library/p-3d9ecc23.entry.js

@@ -0,0 +1 @@
+import{r as t,c as e,h as s,g as i}from"./p-d17ebc2f.js";import{e as r,k as l}from"./p-a23e9115.js";import{r as c,d as a,a as o,h as n,b as h}from"./p-cd43f80d.js";import"./p-d69e14fb.js";const p=class{constructor(s){t(this,s),this.optionSelect=e(this,"optionSelect",7),this.htmlid=`id-${c()}`,this.ariaLabel="",this.disabled=!1,this.readonly=!1,this.message=!0,this.autocomplete=!1,this.noresultslabel="Nessun risultato",this.isOpen=!1,this.selectedItem=null,this.itemsList=[],this.toggleSelectUl=this.toggleSelectUl.bind(this),this.selectItem=this.selectItem.bind(this),this.handleSelectFocus=this.handleSelectFocus.bind(this)}watchItems(){this.itemsList=this.getInitialItemsArray(),this.selectedItem=this.itemsList.find((t=>t.selected))}async getSelectedItem(){return this.selectedItem}async getValue(){return this.getSelectedValue()}async setValue(t){let e=[];"string"==typeof t?e.push(t):e=t,this.selectedItem=this.itemsList.find((t=>e.includes(t.id)))}emitOptionSelect(){this.optionSelect.emit({id:this.htmlid,selected:this.getSelectedValue()})}componentWillLoad(){this.watchItems()}componentWillRender(){this.filterItems(this.searchString)}getInitialItemsArray(){return"string"==typeof this.items?JSON.parse(this.items):this.items}mapSelectedItemToItemsArray(){return this.getInitialItemsArray().map((t=>{var e;return t.selected=t.id===(null===(e=this.selectedItem)||void 0===e?void 0:e.id),t}))}getSelectedValue(){var t;return null===(t=this.selectedItem)||void 0===t?void 0:t.id}filterItems(t){const e=this.mapSelectedItemToItemsArray();this.itemsList=(null==t?void 0:t.length)?e.filter((e=>e.name.toUpperCase().includes(t.toUpperCase()))).map((e=>{const s=e.name.toUpperCase().indexOf(t.toUpperCase()),i=s+t.length,r=e.name.substring(0,s)+`<strong>${e.name.substring(s,i)}</strong>`+e.name.substring(i,e.name.length);return e.name=r,e})):e}hasAutocomplete(){return!0===a(this.autocomplete)}handleInputChange(t){this.searchString=t.detail.value,this.isOpen||this.toggleSelectUl()}selectItem(t,e){t&&t.disabled||(this.itemsList=this.mapSelectedItemToItemsArray(),this.itemsList=this.itemsList.map((s=>(s.selected=!1,s.id===(null==t?void 0:t.id)&&(s.selected=e),s))),this.selectedItem=this.itemsList.find((t=>t.selected)),this.emitOptionSelect(),this.searchString&&(this.searchString=null))}arrowsSelectNav(t,e){if(![r.ARROW_DOWN,r.ARROW_UP].includes(t.key))return;let s;t.preventDefault(),t.stopPropagation(),this.isOpen||this.toggleSelectUl(),t.key===r.ARROW_DOWN?s=e+1===this.itemsList.length?0:e+1:t.key===r.ARROW_UP&&(s=e<=0?this.itemsList.length-1:e-1),this.focusSelectItem(s)}focusSelectItem(t){const e=this.element.querySelector(`#${this.htmlid}_${t}`);e&&e.focus()}toggleSelectUl(t=!1){this.disabled||this.readonly||(this.isOpen?(document.removeEventListener("click",this.handleSelectFocus),document.removeEventListener("keyup",this.handleSelectFocus),t&&this.element.querySelector(`#${this.htmlid}_input`).focus()):(document.addEventListener("click",this.handleSelectFocus),document.addEventListener("keyup",this.handleSelectFocus)),this.isOpen=!this.isOpen)}handleInputClick(t){t.composedPath().find((t=>t.classList&&t.classList.contains("reset-icon")))?t.stopPropagation():this.toggleSelectUl()}handleSelectFocus(t){if(t instanceof KeyboardEvent&&t.key===r.ESC)return t.stopPropagation(),this.toggleSelectUl(!0);t instanceof KeyboardEvent&&t.key!==r.TAB&&t.key!==r.ENTER||o(h()).find((t=>"z-input"===t.nodeName.toLowerCase()&&t.id===`${this.htmlid}_input`))||this.toggleSelectUl(t instanceof MouseEvent)}scrollToLetter(t){const e=this.itemsList.find((e=>e.name.charAt(0)===t));e&&this.focusSelectItem(this.itemsList.indexOf(e))}renderInput(){return s("z-input",{id:`${this.htmlid}_input`,htmlid:`${this.htmlid}_input`,placeholder:this.placeholder,value:!this.isOpen&&this.selectedItem?this.selectedItem.name.replace(/<[^>]+>/g,""):null,label:this.label,"aria-label":this.ariaLabel,icon:this.isOpen?"caret-up":"caret-down",hasclearicon:this.hasAutocomplete(),message:!1,disabled:this.disabled,readonly:this.readonly||!this.hasAutocomplete()&&this.isOpen,status:this.isOpen?void 0:this.status,autocomplete:"off",onClick:t=>{this.handleInputClick(t)},onKeyUp:t=>{13!==t.keyCode&&t.preventDefault(),n(t,this.toggleSelectUl)},onKeyDown:t=>this.arrowsSelectNav(t,this.selectedItem?this.itemsList.indexOf(this.selectedItem):-1),onInputChange:t=>{this.handleInputChange(t)},onKeyPress:t=>{this.hasAutocomplete()||(t.preventDefault(),this.scrollToLetter(String.fromCharCode(t.keyCode)))}})}renderSelectUl(){var t;return s("div",{class:this.isOpen?"open":"closed",tabindex:"-1"},s("div",{class:"ul-scroll-wrapper",tabindex:"-1"},s("z-list",{role:"listbox",tabindex:this.disabled||this.readonly||!this.isOpen?-1:0,id:this.htmlid,"aria-activedescendant":null===(t=this.selectedItem)||void 0===t?void 0:t.id,"aria-multiselectable":!1,class:{disabled:this.disabled,readonly:this.readonly,filled:!!this.selectedItem,[`input-${this.status}`]:!this.isOpen&&!!this.status}},this.renderSelectUlItems())))}renderItem(t,e,i){return s("z-list-element",{clickable:!t.disabled,disabled:t.disabled,dividerType:i?l.HEADER:l.ELEMENT,role:"option",tabindex:t.disabled||!this.isOpen?-1:0,"aria-selected":!!t.selected,id:`${this.htmlid}_${e}`,onClickItem:()=>this.selectItem(t,!0),onKeyDown:t=>this.arrowsSelectNav(t,e)},s("span",{class:{selected:!!t.selected},innerHTML:t.name}))}renderSelectUlItems(){return this.itemsList.length?this.hasGroupItems?this.renderSelectGroupItems():this.itemsList.map(((t,e,s)=>this.renderItem(t,e,s.length===e+1))):this.renderNoSearchResults()}renderSelectGroupItems(){const t=this.itemsList.reduce(((t,e,s,i)=>{var r;const{category:l}=e,c=this.renderItem(e,s,i.length===s+1);return t[l]=null!==(r=t[l])&&void 0!==r?r:[],t[l].push(c),t}),{});return Object.entries(t).map((([t,e])=>s("z-list-group",{"divider-type":l.ELEMENT},s("z-body",{class:"z-list-group-title",level:3,slot:"header-title",variant:"semibold"},t),e.map((t=>t)))))}renderNoSearchResults(){return s("z-list-element",{color:"blue500",class:"no-results"},s("z-icon",{name:"multiply-circle",fill:"blue500"}),this.noresultslabel)}renderMessage(){if(!1!==a(this.message))return s("z-input-message",{message:!0===a(this.message)?void 0:this.message,status:this.status})}render(){return s("div",{class:"select-wrapper"},this.renderInput(),this.renderSelectUl(),this.renderMessage())}get element(){return i(this)}static get watchers(){return{items:["watchItems"]}}};p.style=".sc-z-select-h{display:inline-block;width:inherit;color:var(--color-text02);font-family:var(--font-family-sans);font-size:var(--font-size-3);font-weight:var(--font-rg)}.select-wrapper.sc-z-select>z-input.sc-z-select{width:100%}.select-wrapper.sc-z-select>div.sc-z-select{position:relative}.select-wrapper.sc-z-select>div.closed.sc-z-select{overflow:hidden;height:0}.select-wrapper.sc-z-select .ul-scroll-wrapper.sc-z-select{position:absolute;width:100%;box-sizing:border-box;padding:calc(var(--space-unit) * 0.5) var(--space-unit);border:var(--border-size-small) solid var(--gray200);border-top:none;background:var(--color-surface01);outline:none}.select-wrapper.sc-z-select .closed.sc-z-select .ul-scroll-wrapper.sc-z-select{z-index:10}.select-wrapper.sc-z-select .open.sc-z-select .ul-scroll-wrapper.sc-z-select{z-index:20}.select-wrapper.sc-z-select .ul-scroll-wrapper.sc-z-select>z-list.sc-z-select{position:relative;overflow:auto;max-height:240px;padding:calc(var(--space-unit) * 0.5);outline:none;scrollbar-color:var(--color-primary01) transparent}.select-wrapper.sc-z-select .ul-scroll-wrapper.sc-z-select>z-list.sc-z-select::-webkit-scrollbar{width:10px;background:linear-gradient(to right, transparent 0 3px, var(--gray200) 3px 7px, transparent 7px 10px);border-radius:var(--border-radius)}.select-wrapper.sc-z-select .ul-scroll-wrapper.sc-z-select>z-list.sc-z-select::-webkit-scrollbar-track{background-color:transparent}.select-wrapper.sc-z-select .ul-scroll-wrapper.sc-z-select>z-list.sc-z-select::-webkit-scrollbar-thumb{width:10px;background-color:var(--color-primary01);border-radius:var(--border-radius)}.select-wrapper.sc-z-select .ul-scroll-wrapper.sc-z-select>z-list.sc-z-select::-webkit-scrollbar-thumb:hover{background-color:var(--color-hover-primary)}.select-wrapper.sc-z-select .ul-scroll-wrapper.sc-z-select z-list.sc-z-select z-list-element.sc-z-select span.sc-z-select{display:block;padding:0 calc(var(--space-unit) * 1.5)}.select-wrapper.sc-z-select .ul-scroll-wrapper.sc-z-select z-list.sc-z-select z-list-element.sc-z-select span.selected.sc-z-select{font-weight:bold}.select-wrapper.sc-z-select .ul-scroll-wrapper.sc-z-select .no-results.sc-z-select z-icon.sc-z-select{margin-right:var(--space-unit)}.z-list-group-title.sc-z-select{color:var(--gray800)}";export{p as z_select}

package/dist/web-components-library/p-547d3b1f.entry.js

@@ -0,0 +1 @@
+import{r as t,c as i,h as e}from"./p-d17ebc2f.js";import{I as s,K as r,k as o}from"./p-a23e9115.js";import{h as a}from"./p-cd43f80d.js";import"./p-d69e14fb.js";const h=class{constructor(e){t(this,e),this.comboboxChange=i(this,"comboboxChange",7),this.hassearch=!1,this.noresultslabel="Nessun risultato",this.isopen=!1,this.isfixed=!1,this.closesearchtext="Chiudi",this.hascheckall=!1,this.checkalltext="Seleziona tutti",this.uncheckalltext="Deseleziona tutti",this.maxcheckableitems=0,this.renderItemsList=[],this.itemsList=[],this.inputType=s.TEXT,this.toggleComboBox=this.toggleComboBox.bind(this),this.closeFilterItems=this.closeFilterItems.bind(this)}watchItems(){this.itemsList="string"==typeof this.items?JSON.parse(this.items):this.items,this.selectedCounter=this.itemsList.filter((t=>t.checked)).length,this.searchValue?this.filterItems(this.searchValue):this.resetRenderItemsList()}inputCheckListener(t){const i=t.detail.id.replace(`combo-checkbox-${this.inputid}-`,"");if("check-all"===i&&(!this.maxcheckableitems||this.maxcheckableitems>=this.itemsList.length))return this.checkAll(t.detail.checked);this.itemsList=this.itemsList.map((e=>(e.id===i&&(e.checked=t.detail.checked),e))),this.resetRenderItemsList(),this.emitComboboxChange()}emitComboboxChange(){this.comboboxChange.emit({id:this.inputid,items:this.itemsList})}componentWillLoad(){this.watchItems()}componentWillRender(){this.selectedCounter=this.itemsList.filter((t=>t.checked)).length,this.searchValue&&this.filterItems(this.searchValue)}resetRenderItemsList(){const t=[];this.itemsList.forEach((i=>{t.push(Object.assign({},i))})),this.renderItemsList=t}filterItems(t){if(!t)return this.closeFilterItems();this.searchValue=t,this.resetRenderItemsList(),this.renderItemsList=this.renderItemsList.filter((i=>{const e=i.name.toUpperCase().indexOf(t.toUpperCase()),s=e+t.length,r=i.name.substring(0,e)+i.name.substring(e,s).bold()+i.name.substring(s,i.name.length);return i.name=r,e>=0}))}checkAll(t=!0){this.itemsList=this.itemsList.map((i=>Object.assign(Object.assign({},i),{checked:t}))),this.resetRenderItemsList(),this.emitComboboxChange()}closeFilterItems(){this.searchValue="",this.resetRenderItemsList()}toggleComboBox(){this.isopen=!this.isopen}renderHeader(){return e("div",{class:"header",onClick:()=>this.toggleComboBox(),onKeyDown:t=>{t.keyCode===r.SPACE&&t.preventDefault()},onKeyUp:t=>a(t,this.toggleComboBox),role:"button",tabindex:0},e("z-body",{level:3,component:"p"},this.label,e("span",null,this.selectedCounter>0&&` (${this.selectedCounter})`)),e("z-icon",{name:"caret-down",width:18,height:18}))}renderContent(){if(this.isopen)return e("div",{class:"open-combo-data"},this.hassearch&&this.renderSearchInput(),this.hascheckall&&this.renderCheckAll(),this.renderItems())}renderItems(){if(this.isopen)return e("div",{class:this.searchValue&&"search",tabindex:-1},this.renderList(this.renderItemsList),this.searchValue&&this.renderCloseButton())}renderItem(t,i,r){return e("z-myz-list-item",{id:t.id,listitemid:t.id,action:`combo-li-${this.inputid}`,underlined:i!==r-1},e("z-input",{type:s.CHECKBOX,checked:t.checked,htmlid:`combo-checkbox-${this.inputid}-${t.id}`,label:t.name,disabled:!t.checked&&this.maxcheckableitems&&this.maxcheckableitems===this.selectedCounter}))}renderList(t){if(t)return!t.length&&this.searchValue?this.renderNoSearchResults():this.hasgroupitems?this.renderGroups(this.itemsList):e("ul",null,t.map(((i,e)=>this.renderItem(i,e,t.length))))}renderGroups(t){const i=t.reduce(((i,e,s)=>{var r;const{category:o}=e,a=this.renderItem(e,s,t.length);return i[o]=null!==(r=i[o])&&void 0!==r?r:[],i[o].push(a),i}),{}),s=Object.entries(i).map((([t,i])=>e("z-list-group",{"divider-type":o.ELEMENT},e("z-body",{class:"z-list-group-title",level:3,slot:"header-title",variant:"semibold"},t),i.map((t=>t)))));return e("ul",null,s)}renderNoSearchResults(){return e("ul",null,e("z-myz-list-item",{id:"no-results",text:this.noresultslabel,listitemid:"no-results",icon:"multiply-circle"}))}renderCloseButton(){return e("div",null,e("a",{onClick:()=>this.closeFilterItems(),onKeyUp:t=>a(t,this.closeFilterItems),role:"button",tabindex:0},this.closesearchtext))}renderSearchInput(){if(this.isopen)return e("z-input",{htmlid:`${this.inputid}_search`,label:this.searchlabel,placeholder:this.searchplaceholder,htmltitle:this.searchtitle,type:this.inputType,value:this.searchValue,message:!1,onInputChange:t=>{if(27===t.detail.keycode)return this.closeFilterItems();this.filterItems(t.detail.value)}})}renderCheckAll(){if(this.searchValue)return;const t=this.selectedCounter===this.itemsList.length;return e("div",{class:"check-all-wrapper"},e("z-input",{type:s.CHECKBOX,checked:t,htmlid:`combo-checkbox-${this.inputid}-check-all`,label:t?this.uncheckalltext:this.checkalltext,disabled:this.maxcheckableitems&&this.maxcheckableitems<this.itemsList.length}))}render(){return e("div",{"data-action":`combo-${this.inputid}`,class:{open:this.isopen,fixed:this.isfixed},id:this.inputid},this.renderHeader(),this.renderContent())}static get watchers(){return{items:["watchItems"]}}};h.style=":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) * 2);border:var(--border-size-small) solid var(--bg-grey-700);margin:0;background-color:var(--bg-white);border-radius:var(--border-radius-small);cursor:pointer}:host>div>.header:focus:focus-visible{border:var(--border-size-small) solid var(--blue500);box-shadow:var(--shadow-focus-primary);outline:none}:host>div>.header>z-body{padding:var(--space-unit) 0;margin:0;color:var(--text-grey-800)}:host>div>.header>z-body>span{font-weight:var(--font-sb)}:host>div>.header>z-icon{fill:var(--text-grey-800);transform:rotate(360deg);transition:all 200ms linear}:host>div.open>.header{border:var(--border-size-small) solid var(--blue500);border-radius:var(border-radius-small) var(border-radius-small) 0 0}:host>div.open>.header>z-icon{fill:var(--text-grey-800);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(--bg-white);border-radius:0}:host>div.open>div.open-combo-data>div{overflow:auto;max-height:235px;padding:0;scrollbar-color:var(--myz-blue) var(--gray200);scrollbar-width:thin}: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(90deg, var(--bg-white) 2px, var(--bg-grey-200) 4px, var(--bg-white) 8px);border-radius:var(--border-radius)}::-webkit-scrollbar-thumb{width:10px;background-color:var(--myz-blue);border-radius:var(--border-radius)}:host>div.open>z-input{position:relative;z-index:1;width:238px;margin:0 calc(var(--space-unit) * 2);color:var(--myz-blue)}: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(--myz-blue) var(--bg-grey-200);scrollbar-width:thin}: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(--myz-blue);cursor:pointer;font-family:var(--dashboard-font);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);text-align:left}";export{h as z_combobox}

package/{www/build/p-db3c8e3e.entry.js → dist/web-components-library/p-98c94e81.entry.js}

@@ -1 +1 @@
-import{r as t,c as i,h as r,g as e,H as s}from"./p-d17ebc2f.js";import{j as n,I as a}from"./p-a23e9115.js";import{r as c,d as o}from"./p-cd43f80d.js";import"./p-d69e14fb.js";const p=class{constructor(r){t(this,r),this.inputChange=i(this,"inputChange",7),this.startTyping=i(this,"startTyping",7),this.stopTyping=i(this,"stopTyping",7),this.inputCheck=i(this,"inputCheck",7),this.htmlid=`id-${c()}`,this.ariaLabel="",this.disabled=!1,this.readonly=!1,this.required=!1,this.checked=!1,this.message=!0,this.labelPosition=n.RIGHT,this.hasclearicon=!0,this.isTyping=!1,this.passwordHidden=!0,this.typingtimeout=300}inputCheckListener(t){const i=t.detail;switch(this.type){case a.RADIO:i.type===a.RADIO&&i.name===this.name&&i.id!==this.htmlid&&(this.checked=!1)}}async isChecked(){switch(this.type){case a.CHECKBOX:case a.RADIO:return this.checked;default:return console.warn("`isChecked` method is only available for type `checkbox` and `radio`"),!1}}emitInputChange(t){let i;this.isTyping||this.emitStartTyping(),i=this.getValidity(this.type===a.TEXTAREA?"textarea":"input"),this.value=t,this.inputChange.emit({value:t,validity:i}),clearTimeout(this.timer),this.timer=setTimeout((()=>{this.emitStopTyping(this.value,i)}),this.typingtimeout)}emitStartTyping(){this.isTyping=!0,this.startTyping.emit()}emitStopTyping(t,i){this.isTyping=!1,this.stopTyping.emit({value:t,validity:i})}emitInputCheck(t){this.inputCheck.emit({id:this.htmlid,checked:t,type:this.type,name:this.name,value:this.value,validity:this.getValidity("input")})}getValidity(t){return this.hostElement.querySelector(t).validity}getTextAttributes(){return{id:this.htmlid,name:this.name,placeholder:this.placeholder,value:this.value,disabled:this.disabled,readonly:this.readonly,required:this.required,title:this.htmltitle,class:{[`input-${this.status}`]:!!this.status,filled:!!this.value},autocomplete:this.autocomplete,onInput:t=>this.emitInputChange(t.target.value)}}getNumberAttributes(t){if(t==a.NUMBER)return{min:this.min,max:this.max,step:this.step}}getPatternAttribute(t){if(t==a.PASSWORD||t==a.TEXT||t==a.TEL||t==a.SEARCH||t==a.URL||t==a.EMAIL)return{pattern:this.pattern}}renderInputText(t=a.TEXT){const i=Object.assign(Object.assign(Object.assign({},this.getTextAttributes()),this.getNumberAttributes(t)),this.getPatternAttribute(t));return(this.icon||t===a.PASSWORD)&&Object.assign(i.class,{"has-icon":!0}),this.hasclearicon&&t!=a.NUMBER&&Object.assign(i.class,{"has-clear-icon":!0}),r("div",{class:"text-wrapper"},this.renderLabel(),r("div",null,r("input",Object.assign({type:t!==a.PASSWORD||this.passwordHidden?t:a.TEXT},i,{"aria-label":this.ariaLabel||this.label})),this.renderIcons()),this.renderMessage())}renderLabel(){if(this.label)return r("label",{class:"input-label body-5-sb",id:`${this.htmlid}_label`,htmlFor:this.htmlid,"aria-label":this.label},this.label)}renderIcons(){return r("span",{class:"icons-wrapper"},this.renderResetIcon(),this.renderIcon())}renderIcon(){return this.type===a.PASSWORD?this.renderShowHidePassword():this.icon?r("button",{type:"button",class:"icon-button input-icon",tabIndex:-1},r("z-icon",{name:this.icon})):void 0}renderResetIcon(){if(this.hasclearicon&&this.value&&!this.disabled&&!this.readonly&&this.type!=a.NUMBER)return r("button",{type:"button",class:"icon-button reset-icon","aria-label":"cancella il contenuto dell'input",onClick:()=>this.emitInputChange("")},r("z-icon",{name:"multiply"}))}renderShowHidePassword(){return r("button",{type:"button",class:"icon-button toggle-password-icon",disabled:this.disabled,"aria-label":this.passwordHidden?"mostra password":"nascondi password",onClick:()=>this.passwordHidden=!this.passwordHidden},r("z-icon",{name:this.passwordHidden?"view-filled":"view-off-filled"}))}renderMessage(){if(!1!==o(this.message))return r("z-input-message",{message:!0===o(this.message)?void 0:this.message,status:this.status})}renderTextarea(){const t=this.getTextAttributes();return r("div",{class:"text-wrapper"},this.renderLabel(),r("div",{class:Object.assign(Object.assign({},t.class),{"textarea-wrapper":!0,readonly:t.readonly})},r("textarea",Object.assign({},t,{"aria-label":this.ariaLabel||this.label}))),this.renderMessage())}handleCheck(t){this.checked=t.target.checked,this.emitInputCheck(this.checked)}renderCheckbox(){return r("div",{class:"checkbox-wrapper"},r("input",{id:this.htmlid,type:"checkbox",name:this.name,checked:this.checked,disabled:this.disabled,readonly:this.readonly,required:this.required,onChange:this.handleCheck.bind(this),value:this.value}),r("label",{htmlFor:this.htmlid,class:{"checkbox-label":!0,after:this.labelPosition===n.RIGHT,before:this.labelPosition===n.LEFT}},r("z-icon",{name:this.checked?"checkbox-checked":"checkbox","aria-hidden":"true"}),this.label&&r("span",{innerHTML:this.label})))}renderRadio(){return r("div",{class:"radio-wrapper"},r("input",{id:this.htmlid,type:"radio",name:this.name,checked:this.checked,disabled:this.disabled,readonly:this.readonly,onChange:this.handleCheck.bind(this),value:this.value}),r("label",{htmlFor:this.htmlid,class:{"radio-label":!0,after:this.labelPosition===n.RIGHT,before:this.labelPosition===n.LEFT}},r("z-icon",{name:this.checked?"radio-button-checked":"radio-button","aria-hidden":"true"}),this.label&&r("span",{innerHTML:this.label})))}render(){switch(this.type){case a.TEXTAREA:return this.renderTextarea();case a.CHECKBOX:return this.renderCheckbox();case a.RADIO:return this.renderRadio();default:return this.renderInputText(this.type)}}get hostElement(){return e(this)}};p.style='.sc-z-input-h{display:inline-block;width:inherit}input.sc-z-input::-ms-clear,input.sc-z-input::-ms-reveal{display:none}.sc-z-input-h input.sc-z-input::-ms-clear,.sc-z-input-h input.sc-z-input::-ms-reveal{display:none}input.sc-z-input,textarea.sc-z-input,.textarea-wrapper.sc-z-input{box-sizing:border-box;border:var(--border-size-small) solid var(--color-surface04);background:var(--color-input-field01);border-radius:var(--border-radius-small);color:var(--color-text02);fill:var(--color-icon02);font-family:var(--font-family-sans);font-size:var(--font-size-3);font-weight:var(--font-rg);outline:none}input.sc-z-input:focus:focus-visible,.textarea-wrapper.sc-z-input:focus-within{box-shadow:var(--shadow-focus-primary)}input.sc-z-input:focus:focus-visible,textarea.sc-z-input:focus:focus-visible{color:var(--color-primary01)}.filled.sc-z-input{border-color:var(--color-surface05)}.input-success.sc-z-input{border-color:var(--color-success01);background:var(--color-success-inverse);fill:var(--color-success01)}.input-error.sc-z-input{border-color:var(--color-error01);background:var(--color-error-inverse);fill:var(--color-error01)}.input-warning.sc-z-input{border-color:var(--color-warning01);background:var(--color-warning-inverse);fill:var(--color-warning01)}input.sc-z-input:hover,.textarea-wrapper.sc-z-input:hover{outline:var(--border-size-medium) solid var(--color-surface04);outline-offset:-2px}input[readonly].sc-z-input,.readonly.sc-z-input{border-color:var(--color-disabled01);fill:var(--color-disabled01);pointer-events:none}[disabled].sc-z-input-h:not([disabled="false"]) input.sc-z-input,[disabled].sc-z-input-h:not([disabled="false"]) .textarea-wrapper.sc-z-input,[disabled].sc-z-input-h:not([disabled="false"]) z-icon.sc-z-input{border-color:var(--color-disabled01);box-shadow:none;color:var(--color-disabled02);fill:var(--color-disabled01);pointer-events:none}[disabled].sc-z-input-h:not([disabled="false"]) input.sc-z-input:hover{border-width:var(--border-size-small)}input.sc-z-input::placeholder,textarea.sc-z-input::placeholder{color:var(--color-text05)}.sc-z-input::-webkit-textarea-placeholder{color:var(--color-text05)}.sc-z-input:-ms-textarea-placeholder{color:var(--color-text05)}.sc-z-input::placeholder{color:var(--color-text05)}.sc-z-input:placeholder{color:var(--color-text05)}label.input-label.sc-z-input{display:block;padding-bottom:var(--space-unit);color:var(--color-text02);font-family:var(--font-family-sans);font-size:var(--font-size-1);font-weight:var(--font-sb);text-align:left;text-transform:uppercase}[disabled].sc-z-input-h:not([disabled="false"]) label.input-label.sc-z-input{color:var(--color-disabled02)}.text-wrapper.sc-z-input>div.sc-z-input{position:relative;z-index:1;fill:var(--color-icon02)}.text-wrapper.sc-z-input>div.sc-z-input>input.sc-z-input{width:100%;height:calc(var(--space-unit) * 5.5);box-sizing:border-box;padding:0 calc(var(--space-unit) * 1.5);margin:0}.text-wrapper.sc-z-input>div.sc-z-input>input.has-icon.sc-z-input,.text-wrapper.sc-z-input>div.sc-z-input>input.has-clear-icon.sc-z-input{padding-right:calc(var(--space-unit) * 5.25)}.text-wrapper.sc-z-input>div.sc-z-input>input.has-icon.has-clear-icon.sc-z-input{padding-right:calc(var(--space-unit) * 8)}.text-wrapper.sc-z-input .icons-wrapper.sc-z-input{position:absolute;z-index:2;top:50%;right:calc(var(--space-unit) * 1.5);display:flex;pointer-events:none;transform:translateY(-50%)}.text-wrapper.sc-z-input .icons-wrapper.sc-z-input>button.icon-button.sc-z-input{padding:0;border:0;background:none;color:inherit;font:inherit;pointer-events:initial}.text-wrapper.sc-z-input .icons-wrapper.sc-z-input>button.icon-button.sc-z-input+button.icon-button.sc-z-input{margin-left:calc(var(--space-unit) * 0.5)}.text-wrapper.sc-z-input .icons-wrapper.sc-z-input>button.icon-button.reset-icon.sc-z-input,.text-wrapper.sc-z-input .icons-wrapper.sc-z-input>button.icon-button.toggle-password-icon.sc-z-input{cursor:pointer}.text-wrapper.sc-z-input .icons-wrapper.sc-z-input>button.icon-button.sc-z-input>z-icon.sc-z-input{--z-icon-width:18px;--z-icon-height:18px;display:block}.text-wrapper.sc-z-input>div.sc-z-input>input.sc-z-input:-webkit-autofill,.text-wrapper.sc-z-input>div.sc-z-input>input.sc-z-input:-webkit-autofill:hover,.text-wrapper.sc-z-input>div.sc-z-input>input.sc-z-input:-webkit-autofill:focus,.text-wrapper.sc-z-input>div.sc-z-input>input.sc-z-input:-webkit-autofill:active{background-clip:text !important}.textarea-wrapper.sc-z-input{padding:calc(var(--space-unit) * 1.5);scrollbar-color:var(--color-primary01) transparent}textarea.sc-z-input::-webkit-scrollbar{width:10px;background:linear-gradient(to right, transparent 0 3px, var(--gray200) 3px 7px, transparent 7px 10px);border-radius:var(--border-radius)}textarea.sc-z-input::-webkit-scrollbar-track{background-color:transparent}textarea.sc-z-input::-webkit-scrollbar-thumb{width:10px;background-color:var(--color-primary01);border-radius:var(--border-radius)}textarea.sc-z-input::-webkit-scrollbar-thumb:hover{background-color:var(--color-hover-primary)}textarea.sc-z-input{width:100%;min-height:132px;padding:0;border:none;margin:0;resize:none}.radio-wrapper.sc-z-input,.checkbox-wrapper.sc-z-input{position:relative;display:inline-flex;flex-direction:row;align-items:center;color:var(--color-text01);fill:var(--color-primary01);font-family:var(--font-family-sans)}.radio-wrapper.sc-z-input:hover,.checkbox-wrapper.sc-z-input:hover{color:var(--color-hover-primary);fill:currentcolor}.radio-wrapper.sc-z-input>input.sc-z-input,.checkbox-wrapper.sc-z-input>input.sc-z-input{position:absolute;z-index:-1;opacity:0;pointer-events:none}.radio-wrapper.sc-z-input .radio-label.sc-z-input,.checkbox-wrapper.sc-z-input .checkbox-label.sc-z-input{display:inline-flex;align-items:center;margin:0;color:inherit;font-family:inherit;font-size:inherit;font-weight:inherit;line-height:1;text-transform:inherit}.radio-wrapper.sc-z-input input.sc-z-input:not(:disabled)+.radio-label.sc-z-input,.checkbox-wrapper.sc-z-input input.sc-z-input:not(:disabled)+.checkbox-label.sc-z-input{cursor:pointer}.radio-wrapper.sc-z-input .radio-label.sc-z-input z-icon.sc-z-input,.checkbox-wrapper.sc-z-input .checkbox-label.sc-z-input z-icon.sc-z-input{cursor:pointer;fill:inherit}.radio-wrapper.sc-z-input .radio-label.after.sc-z-input,.checkbox-wrapper.sc-z-input .checkbox-label.after.sc-z-input{flex-direction:row}.radio-wrapper.sc-z-input .radio-label.before.sc-z-input,.checkbox-wrapper.sc-z-input .checkbox-label.before.sc-z-input{flex-direction:row-reverse}.radio-wrapper.sc-z-input .radio-label.after.sc-z-input>span.sc-z-input,.checkbox-wrapper.sc-z-input .checkbox-label.after.sc-z-input>span.sc-z-input{margin-left:var(--space-unit)}.radio-wrapper.sc-z-input .radio-label.before.sc-z-input>span.sc-z-input,.checkbox-wrapper.sc-z-input .checkbox-label.before.sc-z-input>span.sc-z-input{margin-right:var(--space-unit)}.radio-wrapper.sc-z-input>input.sc-z-input:focus:focus-visible+.radio-label.sc-z-input>z-icon.sc-z-input,.checkbox-wrapper.sc-z-input>input.sc-z-input:focus:focus-visible+.checkbox-label.sc-z-input>z-icon.sc-z-input{border-radius:var(--border-radius-small);box-shadow:var(--shadow-focus-primary)}.radio-wrapper.sc-z-input>input.sc-z-input:disabled+.radio-label.sc-z-input,.checkbox-wrapper.sc-z-input>input.sc-z-input:disabled+.checkbox-label.sc-z-input{color:var(--color-disabled02)}.radio-wrapper.sc-z-input>input.sc-z-input:disabled+.radio-label.sc-z-input>z-icon.sc-z-input,.checkbox-wrapper.sc-z-input>input.sc-z-input:disabled+.checkbox-label.sc-z-input>z-icon.sc-z-input{cursor:default;fill:var(--color-disabled01)}';const l=class{constructor(i){t(this,i),this.statusIcons={success:"checkmark-circle",error:"multiply-circled",warning:"exclamation-circle"}}render(){return r(s,{role:"alert","aria-label":this.message,tabindex:this.message?0:-1},this.statusIcons[this.status]&&this.message&&r("z-icon",{name:this.statusIcons[this.status]}),r("span",{innerHTML:this.message}))}};l.style=':host{display:flex;min-height:calc(var(--space-unit) * 2.5);align-items:start;margin-top:var(--space-unit);color:var(--color-text05);fill:currentcolor;font-family:var(--font-family-sans);font-size:var(--font-size-2);letter-spacing:0.16px}:host([status="success"]){color:var(--color-text-success)}:host([status="error"]){color:var(--color-text-error)}:host([status="warning"]){color:var(--color-warning02)}:host(:focus){outline:none}:host>z-icon{--z-icon-width:calc(var(--space-unit) * 2);--z-icon-height:calc(var(--space-unit) * 2);--z-icon-right-margin:var(--space-unit)}';export{p as z_input,l as z_input_message}
+import{r as t,c as i,h as r,g as e,H as s}from"./p-d17ebc2f.js";import{j as n,I as a}from"./p-a23e9115.js";import{r as c,d as o}from"./p-cd43f80d.js";import"./p-d69e14fb.js";const p=class{constructor(r){t(this,r),this.inputChange=i(this,"inputChange",7),this.startTyping=i(this,"startTyping",7),this.stopTyping=i(this,"stopTyping",7),this.inputCheck=i(this,"inputCheck",7),this.htmlid=`id-${c()}`,this.ariaLabel="",this.disabled=!1,this.readonly=!1,this.required=!1,this.checked=!1,this.message=!0,this.labelPosition=n.RIGHT,this.hasclearicon=!0,this.isTyping=!1,this.passwordHidden=!0,this.typingtimeout=300}inputCheckListener(t){const i=t.detail;switch(this.type){case a.RADIO:i.type===a.RADIO&&i.name===this.name&&i.id!==this.htmlid&&(this.checked=!1)}}async isChecked(){switch(this.type){case a.CHECKBOX:case a.RADIO:return this.checked;default:return console.warn("`isChecked` method is only available for type `checkbox` and `radio`"),!1}}emitInputChange(t){let i;this.isTyping||this.emitStartTyping(),i=this.getValidity(this.type===a.TEXTAREA?"textarea":"input"),this.value=t,this.inputChange.emit({value:t,validity:i}),clearTimeout(this.timer),this.timer=setTimeout((()=>{this.emitStopTyping(this.value,i)}),this.typingtimeout)}emitStartTyping(){this.isTyping=!0,this.startTyping.emit()}emitStopTyping(t,i){this.isTyping=!1,this.stopTyping.emit({value:t,validity:i})}emitInputCheck(t){this.inputCheck.emit({id:this.htmlid,checked:t,type:this.type,name:this.name,value:this.value,validity:this.getValidity("input")})}getValidity(t){return this.hostElement.querySelector(t).validity}getTextAttributes(){return{id:this.htmlid,name:this.name,placeholder:this.placeholder,value:this.value,disabled:this.disabled,readonly:this.readonly,required:this.required,title:this.htmltitle,class:{[`input-${this.status}`]:!!this.status,filled:!!this.value},autocomplete:this.autocomplete,onInput:t=>this.emitInputChange(t.target.value)}}getNumberAttributes(t){if(t==a.NUMBER)return{min:this.min,max:this.max,step:this.step}}getPatternAttribute(t){if(t==a.PASSWORD||t==a.TEXT||t==a.TEL||t==a.SEARCH||t==a.URL||t==a.EMAIL)return{pattern:this.pattern}}renderInputText(t=a.TEXT){const i=Object.assign(Object.assign(Object.assign({},this.getTextAttributes()),this.getNumberAttributes(t)),this.getPatternAttribute(t));return(this.icon||t===a.PASSWORD)&&Object.assign(i.class,{"has-icon":!0}),this.hasclearicon&&t!=a.NUMBER&&Object.assign(i.class,{"has-clear-icon":!0}),r("div",{class:"text-wrapper"},this.renderLabel(),r("div",null,r("input",Object.assign({type:t!==a.PASSWORD||this.passwordHidden?t:a.TEXT},i,{"aria-label":this.ariaLabel||this.label})),this.renderIcons()),this.renderMessage())}renderLabel(){if(this.label)return r("label",{class:"input-label body-5-sb",id:`${this.htmlid}_label`,htmlFor:this.htmlid,"aria-label":this.label},this.label)}renderIcons(){return r("span",{class:"icons-wrapper"},this.renderResetIcon(),this.renderIcon())}renderIcon(){return this.type===a.PASSWORD?this.renderShowHidePassword():this.icon?r("button",{type:"button",class:"icon-button input-icon",tabIndex:-1},r("z-icon",{name:this.icon})):void 0}renderResetIcon(){if(this.hasclearicon&&this.value&&!this.disabled&&!this.readonly&&this.type!=a.NUMBER)return r("button",{type:"button",class:"icon-button reset-icon","aria-label":"cancella il contenuto dell'input",onClick:()=>this.emitInputChange("")},r("z-icon",{name:"multiply"}))}renderShowHidePassword(){return r("button",{type:"button",class:"icon-button toggle-password-icon",disabled:this.disabled,"aria-label":this.passwordHidden?"mostra password":"nascondi password",onClick:()=>this.passwordHidden=!this.passwordHidden},r("z-icon",{name:this.passwordHidden?"view-filled":"view-off-filled"}))}renderMessage(){if(!1!==o(this.message))return r("z-input-message",{message:!0===o(this.message)?void 0:this.message,status:this.status})}renderTextarea(){const t=this.getTextAttributes();return r("div",{class:"text-wrapper"},this.renderLabel(),r("div",{class:Object.assign(Object.assign({},t.class),{"textarea-wrapper":!0,readonly:t.readonly})},r("textarea",Object.assign({},t,{"aria-label":this.ariaLabel||this.label}))),this.renderMessage())}handleCheck(t){this.checked=t.target.checked,this.emitInputCheck(this.checked)}renderCheckbox(){return r("div",{class:"checkbox-wrapper"},r("input",{id:this.htmlid,type:"checkbox",name:this.name,checked:this.checked,disabled:this.disabled,readonly:this.readonly,required:this.required,onChange:this.handleCheck.bind(this),value:this.value}),r("label",{htmlFor:this.htmlid,class:{"checkbox-label":!0,after:this.labelPosition===n.RIGHT,before:this.labelPosition===n.LEFT}},r("z-icon",{name:this.checked?"checkbox-checked":"checkbox","aria-hidden":"true"}),this.label&&r("span",{innerHTML:this.label})))}renderRadio(){return r("div",{class:"radio-wrapper"},r("input",{id:this.htmlid,type:"radio",name:this.name,checked:this.checked,disabled:this.disabled,readonly:this.readonly,onChange:this.handleCheck.bind(this),value:this.value}),r("label",{htmlFor:this.htmlid,class:{"radio-label":!0,after:this.labelPosition===n.RIGHT,before:this.labelPosition===n.LEFT}},r("z-icon",{name:this.checked?"radio-button-checked":"radio-button","aria-hidden":"true"}),this.label&&r("span",{innerHTML:this.label})))}render(){switch(this.type){case a.TEXTAREA:return this.renderTextarea();case a.CHECKBOX:return this.renderCheckbox();case a.RADIO:return this.renderRadio();default:return this.renderInputText(this.type)}}get hostElement(){return e(this)}};p.style='.sc-z-input-h{display:inline-block;width:inherit}input.sc-z-input::-ms-clear,input.sc-z-input::-ms-reveal{display:none}.sc-z-input-h input.sc-z-input::-ms-clear,.sc-z-input-h input.sc-z-input::-ms-reveal{display:none}input.sc-z-input,textarea.sc-z-input,.textarea-wrapper.sc-z-input{box-sizing:border-box;border:var(--border-size-small) solid var(--color-surface04);background:var(--color-input-field01);border-radius:var(--border-radius-small);color:var(--color-text01);fill:var(--color-icon02);font-family:var(--font-family-sans);font-size:var(--font-size-3);font-weight:var(--font-rg);outline:none}input.sc-z-input:focus:focus-visible,.textarea-wrapper.sc-z-input:focus-within{box-shadow:var(--shadow-focus-primary)}input.sc-z-input:focus:focus-visible,textarea.sc-z-input:focus:focus-visible{color:var(--color-primary02)}.filled.sc-z-input{border-color:var(--color-surface05)}.input-success.sc-z-input{border-color:var(--color-success01);background:var(--color-success-inverse);fill:var(--color-success01)}.input-error.sc-z-input{border-color:var(--color-error01);background:var(--color-error-inverse);fill:var(--color-error01)}.input-warning.sc-z-input{border-color:var(--color-warning01);background:var(--color-warning-inverse);fill:var(--color-warning01)}input.sc-z-input:hover,.textarea-wrapper.sc-z-input:hover{outline:var(--border-size-medium) solid var(--color-surface04);outline-offset:-2px}input[readonly].sc-z-input,.readonly.sc-z-input{border-color:var(--color-disabled01);fill:var(--color-disabled01);pointer-events:none}[disabled].sc-z-input-h:not([disabled="false"]) input.sc-z-input,[disabled].sc-z-input-h:not([disabled="false"]) .textarea-wrapper.sc-z-input,[disabled].sc-z-input-h:not([disabled="false"]) z-icon.sc-z-input{border-color:var(--color-disabled01);box-shadow:none;color:var(--color-disabled02);fill:var(--color-disabled01);pointer-events:none}[disabled].sc-z-input-h:not([disabled="false"]) input.sc-z-input:hover{border-width:var(--border-size-small)}input.sc-z-input::placeholder,textarea.sc-z-input::placeholder{color:var(--color-text05)}.sc-z-input::-webkit-textarea-placeholder{color:var(--color-text05)}.sc-z-input:-ms-textarea-placeholder{color:var(--color-text05)}.sc-z-input::placeholder{color:var(--color-text05)}.sc-z-input:placeholder{color:var(--color-text05)}label.input-label.sc-z-input{display:block;padding-bottom:var(--space-unit);color:var(--color-text02);font-family:var(--font-family-sans);font-size:var(--font-size-1);font-weight:var(--font-sb);text-align:left;text-transform:uppercase}[disabled].sc-z-input-h:not([disabled="false"]) label.input-label.sc-z-input{color:var(--color-disabled02)}.text-wrapper.sc-z-input>div.sc-z-input{position:relative;z-index:1;fill:var(--color-icon02)}.text-wrapper.sc-z-input>div.sc-z-input>input.sc-z-input{width:100%;height:calc(var(--space-unit) * 5.5);box-sizing:border-box;padding:0 calc(var(--space-unit) * 1.5);margin:0}.text-wrapper.sc-z-input>div.sc-z-input>input.has-icon.sc-z-input,.text-wrapper.sc-z-input>div.sc-z-input>input.has-clear-icon.sc-z-input{padding-right:calc(var(--space-unit) * 5.25)}.text-wrapper.sc-z-input>div.sc-z-input>input.has-icon.has-clear-icon.sc-z-input{padding-right:calc(var(--space-unit) * 8)}.text-wrapper.sc-z-input .icons-wrapper.sc-z-input{position:absolute;z-index:2;top:50%;right:calc(var(--space-unit) * 1.5);display:flex;pointer-events:none;transform:translateY(-50%)}.text-wrapper.sc-z-input .icons-wrapper.sc-z-input>button.icon-button.sc-z-input{padding:0;border:0;background:none;color:inherit;font:inherit;pointer-events:initial}.text-wrapper.sc-z-input .icons-wrapper.sc-z-input>button.icon-button.sc-z-input+button.icon-button.sc-z-input{margin-left:calc(var(--space-unit) * 0.5)}.text-wrapper.sc-z-input .icons-wrapper.sc-z-input>button.icon-button.reset-icon.sc-z-input,.text-wrapper.sc-z-input .icons-wrapper.sc-z-input>button.icon-button.toggle-password-icon.sc-z-input{cursor:pointer}.text-wrapper.sc-z-input .icons-wrapper.sc-z-input>button.icon-button.sc-z-input>z-icon.sc-z-input{--z-icon-width:18px;--z-icon-height:18px;display:block}.text-wrapper.sc-z-input>div.sc-z-input>input.sc-z-input:-webkit-autofill,.text-wrapper.sc-z-input>div.sc-z-input>input.sc-z-input:-webkit-autofill:hover,.text-wrapper.sc-z-input>div.sc-z-input>input.sc-z-input:-webkit-autofill:focus,.text-wrapper.sc-z-input>div.sc-z-input>input.sc-z-input:-webkit-autofill:active{background-clip:text !important}.textarea-wrapper.sc-z-input{padding:calc(var(--space-unit) * 1.5);scrollbar-color:var(--color-primary01) transparent}textarea.sc-z-input::-webkit-scrollbar{width:10px;background:linear-gradient(to right, transparent 0 3px, var(--gray200) 3px 7px, transparent 7px 10px);border-radius:var(--border-radius)}textarea.sc-z-input::-webkit-scrollbar-track{background-color:transparent}textarea.sc-z-input::-webkit-scrollbar-thumb{width:10px;background-color:var(--color-primary01);border-radius:var(--border-radius)}textarea.sc-z-input::-webkit-scrollbar-thumb:hover{background-color:var(--color-hover-primary)}textarea.sc-z-input{width:100%;min-height:132px;padding:0;border:none;margin:0;resize:none}.radio-wrapper.sc-z-input,.checkbox-wrapper.sc-z-input{position:relative;display:inline-flex;flex-direction:row;align-items:center;color:var(--color-text01);fill:var(--color-primary01);font-family:var(--font-family-sans)}.radio-wrapper.sc-z-input:hover,.checkbox-wrapper.sc-z-input:hover{color:var(--color-hover-primary);fill:currentcolor}.radio-wrapper.sc-z-input>input.sc-z-input,.checkbox-wrapper.sc-z-input>input.sc-z-input{position:absolute;z-index:-1;opacity:0;pointer-events:none}.radio-wrapper.sc-z-input .radio-label.sc-z-input,.checkbox-wrapper.sc-z-input .checkbox-label.sc-z-input{display:inline-flex;align-items:center;margin:0;color:inherit;font-family:inherit;font-size:inherit;font-weight:inherit;line-height:1;text-transform:inherit}.radio-wrapper.sc-z-input input.sc-z-input:not(:disabled)+.radio-label.sc-z-input,.checkbox-wrapper.sc-z-input input.sc-z-input:not(:disabled)+.checkbox-label.sc-z-input{cursor:pointer}.radio-wrapper.sc-z-input .radio-label.sc-z-input z-icon.sc-z-input,.checkbox-wrapper.sc-z-input .checkbox-label.sc-z-input z-icon.sc-z-input{cursor:pointer;fill:inherit}.radio-wrapper.sc-z-input .radio-label.after.sc-z-input,.checkbox-wrapper.sc-z-input .checkbox-label.after.sc-z-input{flex-direction:row}.radio-wrapper.sc-z-input .radio-label.before.sc-z-input,.checkbox-wrapper.sc-z-input .checkbox-label.before.sc-z-input{flex-direction:row-reverse}.radio-wrapper.sc-z-input .radio-label.after.sc-z-input>span.sc-z-input,.checkbox-wrapper.sc-z-input .checkbox-label.after.sc-z-input>span.sc-z-input{margin-left:var(--space-unit)}.radio-wrapper.sc-z-input .radio-label.before.sc-z-input>span.sc-z-input,.checkbox-wrapper.sc-z-input .checkbox-label.before.sc-z-input>span.sc-z-input{margin-right:var(--space-unit)}.radio-wrapper.sc-z-input>input.sc-z-input:focus:focus-visible+.radio-label.sc-z-input>z-icon.sc-z-input,.checkbox-wrapper.sc-z-input>input.sc-z-input:focus:focus-visible+.checkbox-label.sc-z-input>z-icon.sc-z-input{border-radius:var(--border-radius-small);box-shadow:var(--shadow-focus-primary)}.radio-wrapper.sc-z-input>input.sc-z-input:disabled+.radio-label.sc-z-input,.checkbox-wrapper.sc-z-input>input.sc-z-input:disabled+.checkbox-label.sc-z-input{color:var(--color-disabled02)}.radio-wrapper.sc-z-input>input.sc-z-input:disabled+.radio-label.sc-z-input>z-icon.sc-z-input,.checkbox-wrapper.sc-z-input>input.sc-z-input:disabled+.checkbox-label.sc-z-input>z-icon.sc-z-input{cursor:default;fill:var(--color-disabled01)}';const l=class{constructor(i){t(this,i),this.statusIcons={success:"checkmark-circle",error:"multiply-circled",warning:"exclamation-circle"}}render(){return r(s,{role:"alert","aria-label":this.message,tabindex:this.message?0:-1},this.statusIcons[this.status]&&this.message&&r("z-icon",{name:this.statusIcons[this.status]}),r("span",{innerHTML:this.message}))}};l.style=':host{display:flex;min-height:calc(var(--space-unit) * 2.5);align-items:start;margin-top:var(--space-unit);color:var(--color-text05);fill:currentcolor;font-family:var(--font-family-sans);font-size:var(--font-size-2);letter-spacing:0.16px}:host([status="success"]){color:var(--color-text-success)}:host([status="error"]){color:var(--color-text-error)}:host([status="warning"]){color:var(--color-warning02)}:host(:focus){outline:none}:host>z-icon{--z-icon-width:calc(var(--space-unit) * 2);--z-icon-height:calc(var(--space-unit) * 2);--z-icon-right-margin:var(--space-unit)}';export{p as z_input,l as z_input_message}

package/dist/web-components-library/p-d2e22f6a.entry.js

@@ -0,0 +1 @@
+import{r as a,h as n,c as t,H as o,g as s}from"./p-d17ebc2f.js";import{I as i}from"./p-b2d16b41.js";import{O as r,u as c}from"./p-a23e9115.js";const e=class{constructor(n){a(this,n)}selectPathOrPolygon(a){return(null==a?void 0:a.startsWith("M"))?n("path",{d:i[this.name]}):n("polygon",{points:i[this.name]})}render(){return n("svg",{viewBox:"0 0 1000 1000",width:this.width,height:this.height,id:this.iconid,fill:this.fill?`var(--${this.fill})`:""},this.selectPathOrPolygon(i[this.name]))}};e.style=":host{margin-right:var(--z-icon-right-margin, 0);margin-left:var(--z-icon-left-margin, 0);line-height:0;vertical-align:middle}:host svg:not([width]){width:var(--z-icon-width, 18px)}:host svg:not([height]){height:var(--z-icon-height, 18px)}";const f=class{constructor(n){a(this,n),this.canvasOpenStatusChanged=t(this,"canvasOpenStatusChanged",7),this.variant=r.PUSHCONTENT,this.open=!1,this.transitionDirection=c.LEFT}componentWillLoad(){this.handleOpenStatus()}onOpenChanged(){this.handleOpenStatus()}handleOpenStatus(){console.log("OC handleOpenStatus open",this.open),this.open?this.hostElement.style.display="flex":this.variant===r.PUSHCONTENT&&(this.hostElement.style.display="none",document.body.style.overflowX="hidden")}handleAnimationEnd(){console.log("OC animationEnd open",this.open),this.canvasOpenStatusChanged.emit(this.open),this.hostElement.hasAttribute("open")?this.hostElement.querySelector(".canvas-content").focus():this.variant===r.OVERLAY&&(this.hostElement.style.display="none",document.body.style.overflowX="initial")}render(){return n(o,null,n("div",{class:"canvas-container",onAnimationEnd:()=>this.handleAnimationEnd()},n("div",{class:"canvas-content"},n("slot",{name:"canvasContent"}))),n("div",{class:"canvas-background","data-action":"canvasBackground",onClick:()=>this.open=!1}))}get hostElement(){return s(this)}static get watchers(){return{open:["onOpenChanged"]}}};f.style='.sc-z-offcanvas-h{--z-offcanvas--container-width:375px;--z-offcanvas--top-space:0;display:none;min-width:100%;height:100%;justify-content:end;font-family:var(--font-family-sans);font-weight:var(--font-rg)}.canvas-container.sc-z-offcanvas{display:flex;overflow:-moz-scrollbars-none;overflow:hidden;min-width:100%;height:100%;flex-direction:column;background:var(--color-surface01);transform:translateX(100%)}@keyframes enter-right{from{transform:translateX(100%)}to{transform:translateX(0)}}[open].sc-z-offcanvas-h>.canvas-container.sc-z-offcanvas{animation-duration:0.4s;animation-name:enter-right;animation-timing-function:ease-out;transform:translateX(0)}@keyframes exit-right{from{transform:translateX(0)}to{transform:translateX(100%)}}.sc-z-offcanvas-h:not([open])[variant="overlay"]>.canvas-container.sc-z-offcanvas{animation-duration:0.4s;animation-name:exit-right;animation-timing-function:ease-out;transform:translateX(100%)}[variant="overlay"].sc-z-offcanvas-h{position:fixed;z-index:1000;top:var(--z-offcanvas--top-space);right:0;bottom:0;left:0;height:calc(100% - var(--z-offcanvas--top-space))}[variant="overlay"].sc-z-offcanvas-h>.canvas-container.sc-z-offcanvas{z-index:1010}[variant="overlay"].sc-z-offcanvas-h .canvas-background.sc-z-offcanvas{position:absolute;left:0;width:100%;height:100%;background-color:var(--gray900);opacity:0.7}[transitiondirection="right"].sc-z-offcanvas-h{justify-content:start}[transitiondirection="right"].sc-z-offcanvas-h>.canvas-container.sc-z-offcanvas{transform:translateX(-100%)}@keyframes enter-left{from{transform:translateX(-100%)}to{transform:translateX(0)}}[transitiondirection="right"][open].sc-z-offcanvas-h>.canvas-container.sc-z-offcanvas{animation-duration:0.4s;animation-name:enter-left;animation-timing-function:ease-out;transform:translateX(0)}@keyframes exit-left{from{transform:translateX(0)}to{transform:translateX(-100%)}}.sc-z-offcanvas-h:not([open])[variant="overlay"][transitiondirection="right"]>.canvas-container.sc-z-offcanvas{animation-duration:0.4s;animation-name:exit-left;animation-timing-function:ease-out;transform:translateX(-100%)}.canvas-container.sc-z-offcanvas>.canvas-content.sc-z-offcanvas{overflow:auto;flex:1 auto;padding:0 calc(var(--space-unit) * 2);margin:calc(var(--space-unit) * 2) calc(var(--space-unit) / 2) calc(var(--space-unit) * 2) 0;overflow-x:hidden}.canvas-container.sc-z-offcanvas .canvas-content.sc-z-offcanvas::-webkit-scrollbar{width:10px;background:linear-gradient(to right, transparent 0 3px, var(--gray200) 3px 7px, transparent 7px 10px);border-radius:var(--border-radius)}.canvas-container.sc-z-offcanvas .canvas-content.sc-z-offcanvas::-webkit-scrollbar-track{background-color:transparent}.canvas-container.sc-z-offcanvas .canvas-content.sc-z-offcanvas::-webkit-scrollbar-thumb{width:10px;background-color:var(--color-primary01);border-radius:var(--border-radius)}.canvas-container.sc-z-offcanvas .canvas-content.sc-z-offcanvas::-webkit-scrollbar-thumb:hover{background-color:var(--color-hover-primary)}.canvas-container.sc-z-offcanvas .canvas-content.sc-z-offcanvas{scrollbar-color:var(--color-primary01) transparent}@media only screen and (min-width: 768px){.sc-z-offcanvas-h{min-width:auto}.canvas-container.sc-z-offcanvas{width:auto;min-width:max(var(--z-offcanvas--container-width), 375px);max-width:max(var(--z-offcanvas--container-width), 375px);height:auto;min-height:calc(var(--space-unit) * 40)}@keyframes grow{from{width:0}to{width:max(var(--z-offcanvas--container-width), 375px)}}.sc-z-offcanvas-h:not([variant="overlay"])[open]{width:auto;animation-duration:0.4s;animation-name:grow;animation-timing-function:ease-out}}';export{e as z_icon,f as z_offcanvas}

package/dist/web-components-library/p-edf0195b.entry.js

@@ -0,0 +1 @@
+import{r as e,c as t,h as a,H as r,g as i}from"./p-d17ebc2f.js";const n="undefined"!=typeof IntersectionObserver,o=class{constructor(a){e(this,a),this.sticking=t(this,"sticking",7),this.stuck=!1,this.overlay=!1,this.flow="auto",this.drawerOpen=!1,this.stucked=!1,this.observer=n&&new IntersectionObserver((([e])=>{this.stucked=!e.isIntersecting}),{threshold:.5}),this.openDrawer=this.openDrawer.bind(this),this.closeDrawer=this.closeDrawer.bind(this),this.collectMenuElements.bind(this)}emitStickingEvent(){this.sticking.emit(this.stucked)}componentDidLoad(){this.collectMenuElements(),this.onStuckMode()}get title(){const e=this.hostElement.querySelector('[slot="title"]');return null===e?"":e.textContent.trim()}get scrollParent(){const e=this.hostElement.offsetParent;return e===document.body||e===document.documentElement?window:e}collectMenuElements(){const e=this.menuElements=this.hostElement.querySelectorAll('[slot="menu"]');this.menuLength=e.length,this.setMenuFloatingMode()}onStuckMode(){this.stuck?this.enableStuckObserver():this.disableStuckMode()}enableStuckObserver(){this.observer&&this.observer.observe(this.container)}disableStuckMode(){this.stucked=!1,this.observer&&this.observer.unobserve(this.container)}onStucked(){this.scrollParent&&this.emitStickingEvent()}setMenuFloatingMode(){if(0===this.menuElements.length)return;const e=this.menuElements;for(let t=0,a=e.length;t<a;t++)e[t].open=!1,e[t].floating=!this.drawerOpen}render(){return a(r,{"menu-length":this.menuLength},a("div",{class:"heading-panel",ref:e=>this.container=e},a("div",{class:"hero-container"},a("slot",{name:"hero"},this.hero&&a("img",{alt:"",src:this.hero}))),a("div",{class:"heading-container"},a("div",{class:"heading-title"},this.menuLength>0&&a("button",{class:"drawer-trigger","aria-label":"Apri menu",onClick:this.openDrawer},a("z-icon",{name:"burger-menu"})),a("slot",{name:"title"})),a("div",{class:"heading-subtitle"},a("slot",{name:"subtitle"}))),a("div",{class:"menu-container"},!this.drawerOpen&&"offcanvas"!==this.flow&&a("slot",{name:"menu",onSlotchange:()=>this.collectMenuElements()}))),a("div",{class:"drawer-container"},a("div",{class:"drawer-overlay",onClick:this.closeDrawer}),a("div",{class:"drawer-panel"},a("button",{class:"drawer-close","aria-label":"Chiudi menu",onClick:this.closeDrawer},a("z-icon",{name:"close"})),a("div",{class:"drawer-content"},this.drawerOpen&&a("slot",{name:"menu",onSlotchange:()=>this.collectMenuElements()})))),this.stucked&&a("div",{class:"heading-stucked"},this.menuLength>0&&a("button",{class:"drawer-trigger","aria-label":"Apri menu",onClick:this.openDrawer},a("z-icon",{name:"burger-menu"})),a("div",{class:"heading-title"},a("slot",{name:"stucked-title"},this.title))))}openDrawer(){this.drawerOpen=!0}closeDrawer(){this.drawerOpen=!1}get hostElement(){return i(this)}static get watchers(){return{stuck:["onStuckMode"],stucked:["onStucked"],drawerOpen:["setMenuFloatingMode"]}}};o.style=':host{--app-header-height:auto;--app-header-typography-1-size:24px;--app-header-typography-2-size:28px;--app-header-typography-3-size:32px;--app-header-typography-4-size:36px;--app-header-typography-5-size:42px;--app-header-typography-6-size:48px;--app-header-typography-7-size:54px;--app-header-typography-8-size:60px;--app-header-typography-9-size:68px;--app-header-typography-10-size:76px;--app-header-typography-11-size:84px;--app-header-typography-12-size:92px;--app-header-typography-1-lineheight:1.33;--app-header-typography-2-lineheight:1.29;--app-header-typography-3-lineheight:1.25;--app-header-typography-4-lineheight:1.24;--app-header-typography-5-lineheight:1.24;--app-header-typography-6-lineheight:1.25;--app-header-typography-7-lineheight:1.2;--app-header-typography-8-lineheight:1.26;--app-header-typography-9-lineheight:1.24;--app-header-typography-10-lineheight:1.26;--app-header-typography-11-lineheight:1.2;--app-header-typography-12-lineheight:1.2;--app-header-typography-1-tracking:calc(-0.2 / 1em);--app-header-typography-2-tracking:calc(-0.4 / 1em);--app-header-typography-3-tracking:calc(-0.6 / 1em);--app-header-typography-4-tracking:calc(-0.8 / 1em);--app-header-typography-5-tracking:calc(-1 / 1em);--app-header-typography-6-tracking:calc(-1.2 / 1em);--app-header-typography-7-tracking:calc(-1.4 / 1em);--app-header-typography-8-tracking:calc(-1.6 / 1em);--app-header-typography-9-tracking:calc(-1.8 / 1em);--app-header-typography-10-tracking:calc(-2 / 1em);--app-header-typography-11-tracking:calc(-2.2 / 1em);--app-header-typography-12-tracking:calc(-2.4 / 1em);--app-header-top-offset:48px;--app-header-drawer-trigger-size:calc(var(--space-unit) * 4);--app-header-bg:var(--color-white);--app-header-stucked-bg:var(--color-white);--app-header-text-color:var(--gray800);--app-header-stucked-text-color:var(--gray800);display:block;color:var(--app-header-text-color)}:host,*{box-sizing:border-box}.heading-panel{position:relative;display:flex;width:100%;height:var(--app-header-height);flex-direction:column;flex-grow:0;flex-shrink:0;align-items:baseline;justify-content:flex-start;padding:calc(var(--space-unit) * 2) var(--grid-mobile-margin);background:var(--app-header-bg)}:host(:empty) .heading-panel{padding:0}.heading-title{display:flex;max-width:100%;flex-direction:row;align-items:center}:host(:not([menu-length="0"])) .heading-subtitle{padding-left:calc(var(--app-header-drawer-trigger-size) + (var(--space-unit) * 1.5))}.heading-stucked{position:fixed;z-index:20;top:var(--app-header-top-offset);left:0;display:flex;width:100%;max-width:100%;flex-direction:row;padding:var(--space-unit) var(--grid-mobile-margin);animation:slide-stucked-heading-in 250ms ease-out;background:var(--app-header-stucked-bg);box-shadow:var(--shadow-2);color:var(--app-header-stucked-text-color)}.heading-stucked .heading-title,.heading-stucked .heading-title>*,.heading-stucked .heading-title ::slotted([slot="stucked-title"]){display:block;overflow:hidden;line-height:1.2;text-overflow:ellipsis;white-space:nowrap}.heading-stucked .heading-title>*,::slotted([slot="title"]),::slotted([slot="stucked-title"]){margin:0;font-family:"IBM Plex Serif", serif;font-size:var(--app-header-typography-3-size);font-weight:700;letter-spacing:var(--app-header-typography-3-tracking)}::slotted([slot="title"]){line-height:1}::slotted([slot="subtitle"]){margin:var(--space-unit) 0 0;font-family:var(--font-family-sans);font-size:20px;font-style:italic;font-weight:500;line-height:1.2}.heading-container{position:relative;z-index:1;display:flex;max-width:100%;flex-direction:column;align-items:flex-start;justify-content:flex-start;margin-right:auto}.menu-container{display:none;flex-flow:row wrap;align-items:baseline}.menu-container ::slotted([open]){position:relative;z-index:3}.menu-container ::slotted(*:not(:last-of-type)){margin-right:calc(var(--space-unit) * 4.5)}.drawer-trigger{padding:0;border:0;margin:0 calc(var(--space-unit) * 1.5) 0 0;appearance:none;background:none;border-radius:0;color:inherit;cursor:pointer}.drawer-trigger z-icon{--z-icon-width:var(--app-header-drawer-trigger-size);--z-icon-height:var(--app-header-drawer-trigger-size);fill:currentcolor}.drawer-container{position:fixed;z-index:100;top:var(--app-header-top-offset);left:0;width:100%;height:100%;pointer-events:none}.drawer-container .drawer-overlay{position:absolute;z-index:1;top:0;left:0;display:block;width:100%;height:100%;background:var(--gray900);opacity:0;pointer-events:none;transition:opacity 400ms ease-out}.drawer-panel{position:absolute;z-index:2;top:0;left:0;display:flex;width:375px;max-width:100%;height:100%;flex-direction:column;align-items:flex-start;padding:calc(var(--space-unit) * 2) var(--space-unit);background:var(--color-white);color:var(--gray800);pointer-events:none;transform:translate3d(-100%, 0, 0);transition:transform 400ms ease-out}.drawer-content{display:flex;overflow:auto;width:100%;flex:1 auto;flex-direction:column;padding:calc(var(--space-unit) * 0.5) var(--space-unit)}.drawer-content::-webkit-scrollbar{width:10px;background:linear-gradient(to right, transparent 0 3px, var(--gray200) 3px 7px, transparent 7px 10px);border-radius:var(--border-radius)}.drawer-content::-webkit-scrollbar-track{background-color:transparent}.drawer-content::-webkit-scrollbar-thumb{width:10px;background-color:var(--color-primary01);border-radius:var(--border-radius)}.drawer-content::-webkit-scrollbar-thumb:hover{background-color:var(--color-hover-primary)}.drawer-content ::slotted(z-menu){width:100%}.drawer-content ::slotted(z-menu:not(:last-of-type)){margin-bottom:calc(var(--space-unit) * 2.5)}.drawer-close{--z-icon-width:var(--app-header-drawer-trigger-size);--z-icon-height:var(--app-header-drawer-trigger-size);padding:0;border:0;margin:0 0 calc(var(--space-unit) * 2.5) var(--space-unit);appearance:none;background:transparent;border-radius:0;color:inherit;cursor:pointer;fill:currentcolor;font-size:inherit;outline:none}.drawer-close:focus-visible{box-shadow:var(--shadow-focus-primary)}:host([drawer-open]) .drawer-container .drawer-overlay{opacity:0.7;pointer-events:all}:host([drawer-open]) .drawer-container .drawer-panel{pointer-events:all;transform:none}.hero-container{position:absolute;z-index:0;top:0;left:0;width:100%;height:100%}:host([overlay]) .heading-panel .drawer-trigger z-icon,:host([overlay]) .heading-panel .heading-container,:host([overlay]) .heading-panel .menu-container{color:var(--color-white);fill:var(--color-white)}:host([overlay]) .heading-panel .menu-container ::slotted(z-menu:not([open])){--color-surface05:var(--color-white)}:host([overlay]) .hero-container::after{position:absolute;z-index:0;top:0;left:0;width:100%;height:100%;background:var(--color-black);content:"";opacity:0.5}.hero-container img,.hero-container ::slotted(*){position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;object-position:top center;-webkit-user-drag:none}@media only screen and (min-width: 768px){.heading-panel{padding:calc(var(--space-unit) * 3) var(--grid-tablet-margin)}.heading-stucked{padding-right:var(--grid-tablet-margin);padding-left:var(--grid-tablet-margin)}:host(:not([flow="offcanvas"])) .heading-subtitle{padding-left:0}:host(:not([flow="offcanvas"])) .menu-container{display:flex}:host(:not([flow="offcanvas"])) .heading-container .drawer-trigger{display:none}:host(:not([flow="offcanvas"],[menu-length="0"])) .heading-container:not(:last-child){margin-bottom:calc(var(--space-unit) * 3)}::slotted([slot="title"]){font-size:var(--app-header-typography-6-size);letter-spacing:var(--app-header-typography-6-tracking)}::slotted([slot="subtitle"]){margin-top:calc(var(--space-unit) * 1.5)}}@media only screen and (min-width: 1152px){.heading-panel,.heading-stucked{padding-right:var(--grid-desktop-margin);padding-left:var(--grid-desktop-margin)}:host(:not([flow="stack"])) .heading-panel{flex-flow:row wrap}::slotted([slot="title"]){margin-right:var(--grid-desktop-gutter);font-size:var(--app-header-typography-7-size);letter-spacing:var(--app-header-typography-7-tracking)}:host(:not([flow="offcanvas"],[menu-length="0"])) .heading-container:not(:last-child){margin-bottom:calc(var(--space-unit) * 2)}.menu-container{margin-top:var(--space-unit)}}@media only screen and (min-width: 1366px){.heading-panel,.heading-stucked{padding-right:var(--grid-wide-margin);padding-left:var(--grid-wide-margin)}::slotted([slot="title"]){margin-right:var(--grid-wide-gutter);font-size:var(--app-header-typography-9-size);letter-spacing:var(--app-header-typography-9-tracking)}:host(:not([flow="offcanvas"],[menu-length="0"])) .heading-container:not(:last-child){margin-bottom:0}}@keyframes slide-stucked-heading-in{0%{transform:translate3d(0, -100%, 0)}100%{transform:none}}';export{o as z_app_header}