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

package/dist/components/z-color-picker.js

@@ -1,234 +1 @@
-import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { a0 as ColorPickerPalette } from './index2.js';
-import { a as containsElement } from './utils.js';
-
-const stylesCss = ":host{display:grid;width:fit-content;padding:calc(var(--space-unit) * 2);background:var(--color-surface01);gap:var(--space-unit);grid-template-columns:repeat(9, calc(var(--space-unit) * 3));grid-template-rows:repeat(5, calc(var(--space-unit) * 3))}:host,*{box-sizing:border-box}button{--border-color:var(--color-surface05);padding:0;border:none;appearance:none;background:none;border-radius:var(--border-radius);cursor:pointer}button[data-color=\"#FFFFFF00\"]{position:relative}button[data-color=\"#FFFFFF00\"]::after{position:absolute;top:0;right:0;width:100%;height:100%;background:linear-gradient(\n    -45deg,\n    transparent 48%,\n    var(--border-color) 48%,\n    var(--border-color) 52%,\n    transparent 52%\n  );border-radius:var(--border-radius);content:\"\"}button[aria-selected=\"true\"]{box-shadow:0 0 0 1px var(--color-white),\n    0 0 0 3px var(--color-active-primary)}button:focus-visible{box-shadow:var(--shadow-focus-primary)}button .color-swatch{width:calc(var(--space-unit) * 3);height:calc(var(--space-unit) * 3);border:var(--border-size-small) solid var(--border-color);border-radius:var(--border-radius)}button[data-color=\"#FFFFFF00\"]:disabled{--border-color:var(--color-disabled01-icon);cursor:not-allowed}button[data-color=\"#FFFFFF00\"]:disabled .color-swatch{background-color:var(--color-disabled02)}";
-const ZColorPickerStyle0 = stylesCss;
-
-const LOCALES = {
-    it: {
-        "Select a color": "Seleziona un colore",
-        "Color swatch": "Campione di colore",
-    },
-    en: {
-        "Select a color": "Select a color",
-        "Color swatch": "Color swatch",
-    },
-};
-/** Number of colors in each group (column) of the grid. */
-const COLOR_GROUP_SIZE = 5;
-/** Number of color groups (columns) in the grid. */
-const COLOR_GROUPS = 9;
-const ZColorPicker$1 = /*@__PURE__*/ proxyCustomElement(class ZColorPicker extends HTMLElement {
-    constructor() {
-        super();
-        this.__registerHost();
-        this.__attachShadow();
-        this.colorSelected = createEvent(this, "colorSelected", 7);
-        /**
-         * The color keys arranged in row-major order for rendering and navigation.
-         */
-        this.colorKeysByRow = [];
-        this._colorButtons = [];
-        this.selectedColor = undefined;
-        this.lng = "it";
-        this.htmlAriaLabel = undefined;
-        this.disableTransparent = false;
-    }
-    get colorButtons() {
-        if (!this._colorButtons.length) {
-            this._colorButtons = Array.from(this.host.shadowRoot.querySelectorAll("button"));
-        }
-        return this._colorButtons;
-    }
-    /**
-     * Reorders color keys from column-major (the format of the `ColorPickerPalette` object) to row-major (visual/navigation order).
-     * This ensures button indices in the DOM match their visual position in the grid.
-     */
-    sortColorKeysByRow() {
-        const allKeys = Object.keys(ColorPickerPalette);
-        const ordered = [];
-        // Iterate through visual positions (row by row, left to right)
-        for (let row = 0; row < COLOR_GROUP_SIZE; row++) {
-            for (let col = 0; col < COLOR_GROUPS; col++) {
-                const columnMajorIndex = col * COLOR_GROUP_SIZE + row;
-                if (columnMajorIndex < allKeys.length) {
-                    ordered.push(allKeys[columnMajorIndex]);
-                }
-            }
-        }
-        return ordered;
-    }
-    /** Move focus to the specified color button by index. */
-    moveFocusTo(index) {
-        // Reset tabindex of other buttons and set tabindex to 0 on selected button
-        this.colorButtons.forEach((btn, i) => (btn.tabIndex = i === index ? 0 : -1));
-        this.colorButtons[index].focus();
-    }
-    validateTransparentSelection() {
-        if (this.disableTransparent && this.selectedColor === "#FFFFFF00") {
-            this.selectedColor = "#333333"; // Default to dark gray 2 if transparent is disabled and currently selected
-        }
-    }
-    emitColorSelected() {
-        this.colorSelected.emit(this.selectedColor);
-    }
-    /**
-     * Focuses the selected or first enabled color button and makes the container non-tabbable.
-     */
-    async setFocus() {
-        // Reset tabindex of all buttons
-        this.colorButtons.forEach((btn) => (btn.tabIndex = -1));
-        const firstSelectedOrEnabled = this.colorButtons.find((btn) => btn.ariaSelected === "true") || this.colorButtons.find((btn) => !btn.disabled);
-        if (!firstSelectedOrEnabled) {
-            return;
-        }
-        firstSelectedOrEnabled.tabIndex = 0;
-        setTimeout(() => {
-            firstSelectedOrEnabled.focus();
-        }, 50);
-        // Set container as non-tabbable
-        this.host.tabIndex = -1;
-    }
-    /**
-     * Compute next index in row-major grid according to keyboard direction.
-     */
-    getNextIndexByKey(currentIndex, key, totalColors) {
-        const row = Math.floor(currentIndex / COLOR_GROUPS);
-        const col = currentIndex % COLOR_GROUPS;
-        let newIndex = currentIndex;
-        switch (key) {
-            case "ArrowRight": {
-                const newCol = col + 1;
-                const newRow = newCol >= COLOR_GROUPS ? (row + 1) % COLOR_GROUP_SIZE : row;
-                newIndex = newRow * COLOR_GROUPS + (newCol % COLOR_GROUPS);
-                if (newIndex >= totalColors) {
-                    newIndex = 0; // Wrap to first item
-                }
-                break;
-            }
-            case "ArrowLeft": {
-                const newCol = col - 1;
-                const newRow = newCol < 0 ? (row - 1 + COLOR_GROUP_SIZE) % COLOR_GROUP_SIZE : row;
-                newIndex = newRow * COLOR_GROUPS + ((newCol + COLOR_GROUPS) % COLOR_GROUPS);
-                if (newIndex >= totalColors) {
-                    newIndex = totalColors - 1; // Wrap to last item
-                }
-                break;
-            }
-            case "ArrowDown": {
-                let newRow = row + 1;
-                let newCol = col;
-                if (newRow >= COLOR_GROUP_SIZE) {
-                    // Wrap to first item of next column
-                    newRow = 0;
-                    newCol = (col + 1) % COLOR_GROUPS;
-                }
-                newIndex = newRow * COLOR_GROUPS + newCol;
-                if (newIndex >= totalColors) {
-                    newIndex = 0; // Wrap to first item
-                }
-                break;
-            }
-            case "ArrowUp": {
-                let newRow = row - 1;
-                let newCol = col;
-                if (newRow < 0) {
-                    // Wrap to last item of previous column
-                    newRow = COLOR_GROUP_SIZE - 1;
-                    newCol = (col - 1 + COLOR_GROUPS) % COLOR_GROUPS;
-                }
-                newIndex = newRow * COLOR_GROUPS + newCol;
-                if (newIndex >= totalColors) {
-                    newIndex = totalColors - 1; // Wrap to last item
-                }
-                break;
-            }
-        }
-        return newIndex;
-    }
-    /**
-     * Handle keyboard navigation within the color picker.
-     * Arrow keys move focus in the expected direction, wrapping around edges. The grid is navigated in row-major order.
-     */
-    handleKeyDown(event) {
-        var _a, _b;
-        const target = event.composedPath()[0];
-        if (!target.dataset.color) {
-            return;
-        }
-        const currentIndex = this.colorButtons.indexOf(target);
-        const totalColors = this.colorButtons.length;
-        if (currentIndex < 0 || !["ArrowRight", "ArrowLeft", "ArrowDown", "ArrowUp"].includes(event.key)) {
-            return;
-        }
-        let newIndex = currentIndex;
-        let attempts = 0;
-        do {
-            newIndex = this.getNextIndexByKey(newIndex, event.key, totalColors);
-            attempts++;
-        } while (attempts < totalColors && ((_a = this.colorButtons[newIndex]) === null || _a === void 0 ? void 0 : _a.disabled));
-        if (newIndex !== currentIndex &&
-            newIndex >= 0 &&
-            newIndex < totalColors &&
-            !((_b = this.colorButtons[newIndex]) === null || _b === void 0 ? void 0 : _b.disabled)) {
-            this.moveFocusTo(newIndex);
-            event.preventDefault();
-            event.stopPropagation();
-        }
-    }
-    /**
-     * When focus leaves the color picker (e.g. user tabs away), reset all buttons to non-tabbable and make the container tabbable again.
-     */
-    handleBlur(event) {
-        const relatedTarget = event.relatedTarget;
-        if (!containsElement(this.host, relatedTarget)) {
-            this.host.tabIndex = 0;
-            this.colorButtons.forEach((btn) => (btn.tabIndex = -1));
-        }
-    }
-    componentWillLoad() {
-        this.colorKeysByRow = this.sortColorKeysByRow();
-    }
-    render() {
-        return (h(Host, { key: '24f0e76aecda9731ed826e8228f49ca5e08a14a5', role: "listbox", "aria-label": this.htmlAriaLabel || LOCALES[this.lng]["Select a color"], tabIndex: 0 }, this.colorKeysByRow.map((colorKey) => {
-            var _a;
-            return (h("button", { class: "color-swatch", "data-color": colorKey, role: "option", "aria-selected": ((_a = this.selectedColor) === null || _a === void 0 ? void 0 : _a.toUpperCase()) === colorKey.toUpperCase() ? "true" : "false", tabIndex: -1, onClick: () => (this.selectedColor = colorKey), disabled: this.disableTransparent && colorKey === "#FFFFFF00" }, h("div", { class: "color-swatch", role: "img", "aria-roledescription": LOCALES[this.lng]["Color swatch"], "aria-label": ColorPickerPalette[colorKey][this.lng], title: ColorPickerPalette[colorKey][this.lng], style: { backgroundColor: colorKey } })));
-        })));
-    }
-    get host() { return this; }
-    static get watchers() { return {
-        "disableTransparent": ["validateTransparentSelection"],
-        "selectedColor": ["validateTransparentSelection", "emitColorSelected"]
-    }; }
-    static get style() { return ZColorPickerStyle0; }
-}, [1, "z-color-picker", {
-        "selectedColor": [1025, "selected-color"],
-        "lng": [1],
-        "htmlAriaLabel": [1, "html-aria-label"],
-        "disableTransparent": [4, "disable-transparent"],
-        "setFocus": [64]
-    }, [[0, "focus", "setFocus"], [0, "keydown", "handleKeyDown"], [0, "blur", "handleBlur"]], {
-        "disableTransparent": ["validateTransparentSelection"],
-        "selectedColor": ["validateTransparentSelection", "emitColorSelected"]
-    }]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["z-color-picker"];
-    components.forEach(tagName => { switch (tagName) {
-        case "z-color-picker":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, ZColorPicker$1);
-            }
-            break;
-    } });
-}
-
-const ZColorPicker = ZColorPicker$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { ZColorPicker, defineCustomElement };
-
-//# sourceMappingURL=z-color-picker.js.map
+import{proxyCustomElement as t,HTMLElement as r,createEvent as e,h as o,Host as a,transformTag as s}from"@stencil/core/internal/client";import{a0 as i}from"./index2.js";import{a as l}from"./utils.js";const c={it:{"Select a color":"Seleziona un colore","Color swatch":"Campione di colore"},en:{"Select a color":"Select a color","Color swatch":"Color swatch"}},n=t(class extends r{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow(),this.colorSelected=e(this,"colorSelected",7),this.lng="it",this.disableTransparent=!1,this.colorKeysByRow=[],this._colorButtons=[]}get colorButtons(){return this._colorButtons.length||(this._colorButtons=Array.from(this.host.shadowRoot.querySelectorAll("button"))),this._colorButtons}sortColorKeysByRow(){const t=Object.keys(i),r=[];for(let e=0;e<5;e++)for(let o=0;o<9;o++){const a=5*o+e;a<t.length&&r.push(t[a])}return r}moveFocusTo(t){this.colorButtons.forEach(((r,e)=>r.tabIndex=e===t?0:-1)),this.colorButtons[t].focus()}validateTransparentSelection(){this.disableTransparent&&"#FFFFFF00"===this.selectedColor&&(this.selectedColor="#333333")}emitColorSelected(){this.colorSelected.emit(this.selectedColor)}async setFocus(){this.colorButtons.forEach((t=>t.tabIndex=-1));const t=this.colorButtons.find((t=>"true"===t.ariaSelected))||this.colorButtons.find((t=>!t.disabled));t&&(t.tabIndex=0,setTimeout((()=>{t.focus()}),50),this.host.tabIndex=-1)}getNextIndexByKey(t,r,e){const o=Math.floor(t/9),a=t%9;let s=t;switch(r){case"ArrowRight":{const t=a+1;s=9*(t>=9?(o+1)%5:o)+t%9,s>=e&&(s=0);break}case"ArrowLeft":{const t=a-1;s=9*(t<0?(o-1+5)%5:o)+(t+9)%9,s>=e&&(s=e-1);break}case"ArrowDown":{let t=o+1,r=a;t>=5&&(t=0,r=(a+1)%9),s=9*t+r,s>=e&&(s=0);break}case"ArrowUp":{let t=o-1,r=a;t<0&&(t=4,r=(a-1+9)%9),s=9*t+r,s>=e&&(s=e-1);break}}return s}handleKeyDown(t){var r,e;const o=t.composedPath()[0];if(!o.dataset.color)return;const a=this.colorButtons.indexOf(o),s=this.colorButtons.length;if(a<0||!["ArrowRight","ArrowLeft","ArrowDown","ArrowUp"].includes(t.key))return;let i=a,l=0;do{i=this.getNextIndexByKey(i,t.key,s),l++}while(l<s&&(null===(r=this.colorButtons[i])||void 0===r?void 0:r.disabled));i!==a&&i>=0&&i<s&&!(null===(e=this.colorButtons[i])||void 0===e?void 0:e.disabled)&&(this.moveFocusTo(i),t.preventDefault(),t.stopPropagation())}handleBlur(t){l(this.host,t.relatedTarget)||(this.host.tabIndex=0,this.colorButtons.forEach((t=>t.tabIndex=-1)))}componentWillLoad(){this.colorKeysByRow=this.sortColorKeysByRow()}render(){return o(a,{key:"c834820884acc8c3bdf4571379cbe6da74e7ea89",role:"listbox","aria-label":this.htmlAriaLabel||c[this.lng]["Select a color"],tabIndex:0},this.colorKeysByRow.map((t=>{var r;return o("button",{class:"color-swatch","data-color":t,role:"option","aria-selected":(null===(r=this.selectedColor)||void 0===r?void 0:r.toUpperCase())===t.toUpperCase()?"true":"false",tabIndex:-1,onClick:()=>this.selectedColor=t,disabled:this.disableTransparent&&"#FFFFFF00"===t},o("div",{class:"color-swatch",role:"img","aria-roledescription":c[this.lng]["Color swatch"],"aria-label":i[t][this.lng],title:i[t][this.lng],style:{backgroundColor:t}}))})))}get host(){return this}static get watchers(){return{disableTransparent:[{validateTransparentSelection:0}],selectedColor:[{validateTransparentSelection:0},{emitColorSelected:0}]}}static get style(){return':host{display:grid;width:fit-content;padding:calc(var(--space-unit) * 2);background:var(--color-surface01);gap:var(--space-unit);grid-template-columns:repeat(9, calc(var(--space-unit) * 3));grid-template-rows:repeat(5, calc(var(--space-unit) * 3))}:host,*{box-sizing:border-box}button{--border-color:var(--color-surface05);padding:0;border:none;appearance:none;background:none;border-radius:var(--border-radius);cursor:pointer}button[data-color="#FFFFFF00"]{position:relative}button[data-color="#FFFFFF00"]::after{position:absolute;top:0;right:0;width:100%;height:100%;background:linear-gradient(     -45deg,     transparent 48%,     var(--border-color) 48%,     var(--border-color) 52%,     transparent 52%   );border-radius:var(--border-radius);content:""}button[aria-selected="true"]{box-shadow:0 0 0 1px var(--color-white),     0 0 0 3px var(--color-active-primary)}button:focus-visible{box-shadow:var(--shadow-focus-primary)}button .color-swatch{width:calc(var(--space-unit) * 3);height:calc(var(--space-unit) * 3);border:var(--border-size-small) solid var(--border-color);border-radius:var(--border-radius)}button[data-color="#FFFFFF00"]:disabled{--border-color:var(--color-disabled01-icon);cursor:not-allowed}button[data-color="#FFFFFF00"]:disabled .color-swatch{background-color:var(--color-disabled02)}'}},[1,"z-color-picker",{selectedColor:[1025,"selected-color"],lng:[1],htmlAriaLabel:[1,"html-aria-label"],disableTransparent:[4,"disable-transparent"],setFocus:[64]},[[0,"focus","setFocus"],[0,"keydown","handleKeyDown"],[0,"blur","handleBlur"]],{disableTransparent:[{validateTransparentSelection:0}],selectedColor:[{validateTransparentSelection:0},{emitColorSelected:0}]}]),d=n,h=function(){"undefined"!=typeof customElements&&["z-color-picker"].forEach((t=>{"z-color-picker"===t&&(customElements.get(s(t))||customElements.define(s(t),n))}))};export{d as ZColorPicker,h as defineCustomElement}

package/dist/components/z-combobox.js

@@ -1,365 +1 @@
-import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
-import { I as InputType, e as ControlSize, i as ListSize, g as KeyboardCode, l as ListDividerType } from './index2.js';
-import { r as randomId, h as handleKeyboardSubmit } from './utils.js';
-import { d as defineCustomElement$7 } from './index7.js';
-import { d as defineCustomElement$6 } from './index10.js';
-import { d as defineCustomElement$5 } from './index12.js';
-import { d as defineCustomElement$4 } from './index13.js';
-import { d as defineCustomElement$3 } from './index15.js';
-import { d as defineCustomElement$2 } from './index16.js';
-
-const stylesCss = ".z-label{display:block;padding-bottom:var(--space-unit);color:var(--color-default-text);font-family:var(--font-family-sans);font-size:var(--font-size-1);font-weight:var(--font-sb);text-align:left;text-transform:uppercase}:host{display:block;color:var(--color-form-default-text);fill:var(--color-form-default-icon);font-family:var(--font-family-sans)}:host>div.fixed{position:relative}:host>div>.header{position:relative;z-index:10;display:flex;min-height:42px;align-items:center;justify-content:space-between;padding:0 calc(var(--space-unit) * 1.5);border:var(--border-size-small) solid var(--color-form-surface04);margin:0;background-color:var(--color-form-background);border-radius:var(--border-radius-small);cursor:pointer}:host([size=\"small\"])>div>.header{min-height:34px;font-size:var(--font-size-2)}:host([size=\"x-small\"])>div>.header{min-height:30px;font-size:var(--font-size-2)}:host>div>.header:hover{outline:var(--border-size-medium) solid var(--color-form-surface04);outline-offset:-2px}:host>div>div.header:focus:focus-visible{z-index:16;box-shadow:var(--shadow-focus-primary);outline:none}:host>div>.header>span.body-3>span{font-weight:var(--font-sb)}:host>div>.header>z-icon{fill:var(--color-form-default-icon);transform:rotate(360deg);transition:all 200ms linear}:host>div>.header>z-icon.small,:host>div>.header>z-icon.x-small{--z-icon-width:16px;--z-icon-height:16px}:host>div.open>.header{border:var(--border-size-small) solid var(--color-form-active-primary);border-radius:var(--border-radius-small) var(--border-radius-small) 0 0}:host>div.disabled{pointer-events:none}:host>div.disabled .header{border-color:var(--color-form-disabled03);fill:var(--color-form-disabled01-icon)}:host>div.disabled .header>span.body-3{color:var(--color-form-disabled03)}:host>div.disabled .header>z-icon:last-child{fill:var(--color-form-disabled01-icon)}:host>div.open>.header>z-icon{fill:var(--color-form-default-icon);transform:rotate(180deg);transition:all 200ms linear}:host>div>div.open-combo-data{display:none}:host>div.open>div.open-combo-data{position:relative;z-index:12;display:block;padding:var(--space-unit) calc(var(--space-unit) * 2);border:var(--border-size-small) solid var(--color-form-surface03);border-top:0;background-color:var(--color-form-background);border-radius:0;box-shadow:var(--shadow-2)}:host .open .open-combo-data z-input .z-label{color:var(--color-form-default-text)}:host>div.open>div.open-combo-data>div>div{overflow:auto;max-height:235px;padding:0;padding-left:var(--space-unit);margin-left:calc(var(--space-unit) * -1);}:host>div.open>div.open-combo-data>z-input{width:100%;margin-bottom:calc(var(--space-unit) * 2)}:host>div.open>div.open-combo-data>div>div>ul{max-height:235px;padding:0 calc(var(--space-unit) * 0.5);margin:0}:host .open-combo-data z-list-element{--background-color-list-element:var(--color-form-background);--background-hover-color-list-element:var(--color-form-surface03);--background-active-color-list-element:var(--color-form-surface03)}::-webkit-scrollbar{width:6px;background:linear-gradient(to right, transparent 0 1px, var(--gray200) 1px 5px, transparent 5px 6px)}::-webkit-scrollbar-thumb{background-color:var(--color-primary01)}::-webkit-scrollbar-thumb:hover{background-color:var(--color-hover-primary)}@supports not selector(::-webkit-scrollbar-track){:host{scrollbar-color:var(--color-primary01) transparent}}:host>div.open>z-input{position:relative;z-index:1;width:238px;margin:0 calc(var(--space-unit) * 2);color:var(--color-form-active-primary)}:host>div.open>div.open-combo-data>div>div.search{overflow:hidden;max-height:none;margin-top:0}:host>div.open>div.open-combo-data>div>div.search>ul{overflow:auto;max-height:180px;padding:var(--space-unit) calc(var(--space-unit) * 2)}:host .open .open-combo-data .search .no-results{display:flex;align-items:center;column-gap:var(--space-unit)}:host>.open>.open-combo-data .search .close-search{display:flex;justify-content:center}:host>div.open>div.open-combo-data>div>div.search .close-search>a{display:inline-block;height:44px;color:var(--color-form-active-primary);cursor:pointer;font-size:14px;font-weight:var(--font-sb);line-height:44px;text-align:center;text-transform:uppercase}:host>div.open>div.open-combo-data>div>div.search .close-search>a:focus:focus-visible{box-shadow:var(--shadow-focus-primary);outline:none}:host>div.open>div.open-combo-data>div>div.check-all-wrapper{padding:calc(var(--space-unit) * 2) calc(var(--space-unit) * 0.5) calc(var(--space-unit) * 2)\n    calc(var(--space-unit) * 1.5);border-bottom:var(--border-size-small) solid var(--gray800);margin-bottom:var(--space-unit);margin-left:calc(var(--space-unit) * -1);text-align:left}:host([size=\"small\"])>div.open>div.open-combo-data>div>div.check-all-wrapper{padding:calc(var(--space-unit) * 1.5) calc(var(--space-unit) * 0.5)}:host([size=\"x-small\"])>div.open>div.open-combo-data>div>div.check-all-wrapper{padding:var(--space-unit) calc(var(--space-unit) * 0.5)}";
-const ZComboboxStyle0 = stylesCss;
-
-const ZCombobox$1 = /*@__PURE__*/ proxyCustomElement(class ZCombobox extends HTMLElement {
-    watchItems() {
-        this.itemsList = typeof this.items === "string" ? JSON.parse(this.items) : this.items;
-        this.selectedCounter = this.itemsList.filter((item) => item.checked).length;
-        this.updateRenderItemsList();
-    }
-    watchSearchValue() {
-        this.filterItems(this.searchValue);
-    }
-    watchCheckboxes() {
-        this.checkboxes.forEach((item, index) => item.setAttribute("tabindex", index === 0 ? "0" : "-1"));
-    }
-    emitComboboxChange() {
-        this.comboboxChange.emit({ id: this.inputid, items: this.itemsList });
-    }
-    constructor() {
-        super();
-        this.__registerHost();
-        this.__attachShadow();
-        this.comboboxChange = createEvent(this, "comboboxChange", 7);
-        this.itemsList = [];
-        this.inputType = InputType.TEXT;
-        this.inputid = `combo-${randomId()}`;
-        this.items = undefined;
-        this.label = undefined;
-        this.disabled = false;
-        this.hassearch = false;
-        this.searchlabel = undefined;
-        this.searchplaceholder = undefined;
-        this.searchtitle = undefined;
-        this.noresultslabel = "Nessun risultato";
-        this.isopen = false;
-        this.isfixed = false;
-        this.hascheckall = false;
-        this.checkalltext = "Seleziona tutti";
-        this.uncheckalltext = "Deseleziona tutti";
-        this.maxcheckableitems = 0;
-        this.hasgroupitems = undefined;
-        this.size = ControlSize.BIG;
-        this.searchValue = undefined;
-        this.selectedCounter = undefined;
-        this.renderItemsList = [];
-        this.focusedItemId = undefined;
-        this.checkboxes = [];
-        this.toggleComboBox = this.toggleComboBox.bind(this);
-        this.closeFilterItems = this.closeFilterItems.bind(this);
-    }
-    componentWillLoad() {
-        this.watchItems();
-    }
-    componentWillRender() {
-        this.selectedCounter = this.itemsList.filter((item) => item.checked).length;
-    }
-    componentDidRender() {
-        const checkboxes = this.getAllCheckboxes();
-        if (JSON.stringify(checkboxes) !== JSON.stringify(this.checkboxes)) {
-            this.checkboxes = checkboxes;
-        }
-    }
-    getItemId(item) {
-        return `combo-checkbox-${this.inputid}-${item.id}`;
-    }
-    getCheckboxClass() {
-        return `combo-item-checkbox-input-${this.inputid}`;
-    }
-    getAllCheckboxes() {
-        return Array.from(this.element.shadowRoot.querySelectorAll(`.${this.getCheckboxClass()} input:not([disabled])`));
-    }
-    getControlToListSize() {
-        switch (this.size) {
-            case ControlSize.X_SMALL:
-                return ListSize.SMALL;
-            case ControlSize.SMALL:
-                return ListSize.MEDIUM;
-            default:
-                return ListSize.LARGE;
-        }
-    }
-    handleSelectArrowsNavigation(e, currId) {
-        if (![KeyboardCode.ARROW_DOWN, KeyboardCode.ARROW_UP].includes(e.key) || !this.isopen) {
-            return;
-        }
-        e.preventDefault();
-        e.stopPropagation();
-        const currElem = this.element.shadowRoot.querySelector(`#${currId}`);
-        const checkboxes = this.checkboxes;
-        if (!checkboxes.length) {
-            return;
-        }
-        const currElemIndex = currElem ? checkboxes.indexOf(currElem) : null;
-        const firstElemIndex = 0;
-        const lastElemIndex = checkboxes.length - 1;
-        let nextElem = null;
-        if (e.key === KeyboardCode.ARROW_DOWN) {
-            nextElem =
-                currElemIndex === null || currElemIndex === lastElemIndex
-                    ? checkboxes[firstElemIndex]
-                    : checkboxes[currElemIndex + 1];
-        }
-        else if (e.key === KeyboardCode.ARROW_UP) {
-            nextElem =
-                currElemIndex === null || currElemIndex === firstElemIndex
-                    ? checkboxes[lastElemIndex]
-                    : checkboxes[currElemIndex - 1];
-        }
-        this.focusComboboxItem(nextElem);
-    }
-    handleHeaderKeyboardEvent(ev) {
-        if (ev.key === KeyboardCode.SPACE) {
-            ev.preventDefault();
-        }
-        if ((ev.key === KeyboardCode.ARROW_DOWN && !this.isopen) || (ev.key === KeyboardCode.ARROW_UP && this.isopen)) {
-            this.toggleComboBox();
-        }
-    }
-    handleCheckboxFocus(id) {
-        this.focusedItemId = id;
-    }
-    focusComboboxItem(elem) {
-        this.checkboxes.forEach(function (item) {
-            item.setAttribute("tabindex", "-1");
-        });
-        elem.setAttribute("tabindex", "0");
-        elem.focus();
-    }
-    updateRenderItemsList() {
-        if (this.searchValue) {
-            this.filterItems(this.searchValue);
-        }
-        else {
-            this.resetRenderItemsList();
-        }
-    }
-    resetRenderItemsList() {
-        const renderItemsList = [];
-        this.itemsList.forEach((item) => {
-            renderItemsList.push(Object.assign({}, item));
-        });
-        this.renderItemsList = renderItemsList;
-    }
-    filterItems(value) {
-        if (!value) {
-            return this.closeFilterItems();
-        }
-        this.resetRenderItemsList();
-        this.renderItemsList = this.renderItemsList.filter((item) => {
-            const start = item.name.toUpperCase().indexOf(value.toUpperCase());
-            const end = start + value.length;
-            const newName = item.name.substring(0, start) +
-                "<strong>" +
-                item.name.substring(start, end) +
-                "</strong>" +
-                item.name.substring(end, item.name.length);
-            item.name = newName;
-            return start >= 0;
-        });
-    }
-    checkAll(checked = true) {
-        this.itemsList = this.itemsList.map((item) => (Object.assign(Object.assign({}, item), { checked: checked })));
-        this.resetRenderItemsList();
-        this.emitComboboxChange();
-    }
-    closeFilterItems() {
-        this.searchValue = "";
-        this.resetRenderItemsList();
-    }
-    toggleComboBox() {
-        this.isopen = !this.isopen;
-    }
-    getComboboxA11yAttributes(isZInput) {
-        const role = "combobox";
-        const ariaExpanded = this.isopen ? "true" : "false";
-        const ariaActivedescendant = this.isopen ? this.focusedItemId : "";
-        const ariaControls = `${this.inputid}_list`;
-        if (isZInput) {
-            return {
-                "role": role,
-                "html-aria-expanded": ariaExpanded,
-                "html-aria-activedescendant": ariaActivedescendant,
-                "html-aria-controls": ariaControls,
-            };
-        }
-        return {
-            "role": role,
-            "aria-expanded": ariaExpanded,
-            "aria-activedescendant": ariaActivedescendant,
-            "aria-controls": ariaControls,
-        };
-    }
-    renderHeader() {
-        return (h("div", { class: "header", onClick: () => this.toggleComboBox(), onKeyDown: (ev) => {
-                this.handleHeaderKeyboardEvent(ev);
-            }, onKeyUp: (ev) => handleKeyboardSubmit(ev, this.toggleComboBox), role: "button", tabindex: 0, "aria-controls": "open-combo-data", "aria-expanded": this.isopen ? "true" : "false" }, h("span", { class: "body-3" }, this.label, h("span", null, this.selectedCounter > 0 && ` (${this.selectedCounter})`)), h("z-icon", { name: "caret-down", class: this.size })));
-    }
-    renderContent() {
-        return (h("div", { id: "open-combo-data", class: "open-combo-data" }, this.hassearch && this.renderSearchInput(), !this.hassearch ? h("span", Object.assign({}, this.getComboboxA11yAttributes(false))) : null, h("div", { role: "listbox", "aria-label": this.label, "aria-multiselectable": "true", id: `${this.inputid}_list`, "aria-owns": Array.from(this.element.shadowRoot.querySelectorAll("[role='option']"))
-                .map((item) => item.id)
-                .join(" ") }, this.hascheckall && this.renderCheckAll(), this.renderItems())));
-    }
-    renderItems() {
-        return (h("div", { class: this.searchValue && "search", tabIndex: -1, role: "presentation" }, this.renderList(this.renderItemsList)));
-    }
-    renderItem(item, index, length) {
-        const isDisabled = !item.checked && this.maxcheckableitems && this.selectedCounter >= this.maxcheckableitems;
-        return (h("z-list-element", { id: `option-${item.id}`, htmlTabindex: null, dividerType: index !== length - 1 ? ListDividerType.ELEMENT : ListDividerType.NONE, size: this.getControlToListSize(), role: isDisabled ? "presentation" : "option", "aria-selected": item.checked ? "true" : "false" }, h("z-input", { type: InputType.CHECKBOX, checked: item.checked, htmlid: this.getItemId(item), label: item.name, class: this.getCheckboxClass(), disabled: isDisabled, size: this.size === ControlSize.X_SMALL ? ControlSize.SMALL : this.size, onKeyDown: (e) => this.handleSelectArrowsNavigation(e, this.getItemId(item)), onInputCheck: (e) => {
-                this.itemsList = this.itemsList.map((i) => {
-                    if (item.id === i.id) {
-                        i.checked = e.detail.checked;
-                    }
-                    return i;
-                });
-                this.updateRenderItemsList();
-                this.emitComboboxChange();
-            }, onInputFocus: (e) => this.handleCheckboxFocus(e.detail.id) })));
-    }
-    renderList(items) {
-        if (!items) {
-            return;
-        }
-        if (!items.length && this.searchValue) {
-            return this.renderNoSearchResults();
-        }
-        if (this.hasgroupitems) {
-            return this.renderGroups(items);
-        }
-        return (h("ul", { role: "presentation" }, items.map((item, i) => {
-            return this.renderItem(item, i, items.length);
-        })));
-    }
-    renderGroups(items) {
-        const newData = items.reduce((group, item, index) => {
-            var _a;
-            const { category } = item;
-            const zListItem = this.renderItem(item, index, items.length);
-            group[category] = (_a = group[category]) !== null && _a !== void 0 ? _a : [];
-            group[category].push(zListItem);
-            return group;
-        }, {});
-        const listGroups = Object.entries(newData).map(([key, value]) => {
-            return (h("z-list-group", { "divider-type": ListDividerType.ELEMENT }, h("span", { class: "body-3-sb z-list-group-title", slot: "header-title" }, key), value.map((item) => item)));
-        });
-        return h("ul", { role: "presentation" }, listGroups);
-    }
-    renderNoSearchResults() {
-        return (h("div", { class: "no-results" }, h("span", null, this.noresultslabel)));
-    }
-    renderSearchInput() {
-        return (h("z-input", Object.assign({ htmlid: `${this.inputid}_search`, label: this.searchlabel, placeholder: this.searchplaceholder, htmltitle: this.searchtitle, type: this.inputType, value: this.searchValue, message: false, size: this.size, "html-aria-autocomplete": "list" }, this.getComboboxA11yAttributes(true), { onKeyUp: (e) => {
-                if (e.key === KeyboardCode.ESC) {
-                    this.closeFilterItems();
-                }
-                this.handleSelectArrowsNavigation(e);
-            }, onInputChange: (e) => {
-                this.searchValue = e.detail.value;
-            } })));
-    }
-    renderCheckAll() {
-        if (this.searchValue) {
-            return;
-        }
-        const checkAllId = `combo-checkbox-${this.inputid}-check-all`;
-        const allChecked = this.selectedCounter === this.itemsList.length;
-        return (h("div", { class: "check-all-wrapper", id: "option-check-all", role: "option" }, h("z-input", { type: InputType.CHECKBOX, checked: allChecked, htmlid: checkAllId, class: this.getCheckboxClass(), label: allChecked ? this.uncheckalltext : this.checkalltext, disabled: this.maxcheckableitems && this.maxcheckableitems < this.itemsList.length, size: this.size === ControlSize.X_SMALL ? ControlSize.SMALL : this.size, onKeyDown: (e) => this.handleSelectArrowsNavigation(e, checkAllId), onInputCheck: (e) => this.checkAll(e.detail.checked), onInputFocus: (e) => this.handleCheckboxFocus(e.detail.id) })));
-    }
-    render() {
-        return (h("div", { key: '6cb14e4919c53bae374f2c9441b0524a06a4233d', "data-action": `combo-${this.inputid}`, class: { open: this.isopen, fixed: this.isfixed, disabled: this.disabled }, id: this.inputid }, this.renderHeader(), !this.disabled && this.renderContent()));
-    }
-    get element() { return this; }
-    static get watchers() { return {
-        "items": ["watchItems"],
-        "searchValue": ["watchSearchValue"],
-        "checkboxes": ["watchCheckboxes"]
-    }; }
-    static get style() { return ZComboboxStyle0; }
-}, [1, "z-combobox", {
-        "inputid": [1],
-        "items": [1],
-        "label": [1],
-        "disabled": [516],
-        "hassearch": [4],
-        "searchlabel": [1],
-        "searchplaceholder": [1],
-        "searchtitle": [1],
-        "noresultslabel": [1],
-        "isopen": [1028],
-        "isfixed": [4],
-        "hascheckall": [4],
-        "checkalltext": [1],
-        "uncheckalltext": [1],
-        "maxcheckableitems": [2],
-        "hasgroupitems": [4],
-        "size": [1],
-        "searchValue": [32],
-        "selectedCounter": [32],
-        "renderItemsList": [32],
-        "focusedItemId": [32],
-        "checkboxes": [32]
-    }, undefined, {
-        "items": ["watchItems"],
-        "searchValue": ["watchSearchValue"],
-        "checkboxes": ["watchCheckboxes"]
-    }]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["z-combobox", "z-divider", "z-icon", "z-input", "z-input-message", "z-list-element", "z-list-group"];
-    components.forEach(tagName => { switch (tagName) {
-        case "z-combobox":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, ZCombobox$1);
-            }
-            break;
-        case "z-divider":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$7();
-            }
-            break;
-        case "z-icon":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$6();
-            }
-            break;
-        case "z-input":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$5();
-            }
-            break;
-        case "z-input-message":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$4();
-            }
-            break;
-        case "z-list-element":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$3();
-            }
-            break;
-        case "z-list-group":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$2();
-            }
-            break;
-    } });
-}
-
-const ZCombobox = ZCombobox$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { ZCombobox, defineCustomElement };
-
-//# sourceMappingURL=z-combobox.js.map
+import{proxyCustomElement as e,HTMLElement as t,createEvent as i,h as s,transformTag as o}from"@stencil/core/internal/client";import{e as a,I as r,i as n,g as l,l as c}from"./index2.js";import{r as h,b as d}from"./utils.js";import{d as p}from"./index6.js";import{d as m}from"./index3.js";import{d as u}from"./index7.js";import{d as b}from"./index8.js";import{d as v}from"./index10.js";import{d as f}from"./index11.js";const g=e(class extends t{watchItems(){this.itemsList="string"==typeof this.items?JSON.parse(this.items):this.items,this.selectedCounter=this.itemsList.filter((e=>e.checked)).length,this.updateRenderItemsList()}watchSearchValue(){this.filterItems(this.searchValue)}emitComboboxChange(){this.comboboxChange.emit({id:this.inputid,items:this.itemsList})}constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.comboboxChange=i(this,"comboboxChange",7),this.inputid="combo-"+h(),this.disabled=!1,this.hassearch=!1,this.noresultslabel="Nessun risultato",this.isopen=!1,this.isfixed=!1,this.hascheckall=!1,this.checkalltext="Seleziona tutti",this.uncheckalltext="Deseleziona tutti",this.maxcheckableitems=0,this.size=a.BIG,this.renderItemsList=[],this.focusedItemId="",this.itemsList=[],this.inputType=r.TEXT,this.toggleComboBox=this.toggleComboBox.bind(this),this.closeFilterItems=this.closeFilterItems.bind(this)}componentWillLoad(){this.watchItems()}componentWillRender(){this.selectedCounter=this.itemsList.filter((e=>e.checked)).length}getControlToListSize(){switch(this.size){case a.X_SMALL:return n.SMALL;case a.SMALL:return n.MEDIUM;default:return n.LARGE}}getOptionId(e){return`${this.inputid}-option-${e}`}getCheckAllOptionId(){return this.inputid+"-check-all"}allOptionsSelected(){return this.selectedCounter===this.itemsList.length}hasReachedMaxSelections(){return!!(this.maxcheckableitems&&this.selectedCounter>=this.maxcheckableitems)}handleHeaderKeyDown(e){if(e.code!==l.ENTER||this.focusedItemId||this.toggleComboBox(),this.isopen&&!this.hassearch)switch(e.code){case l.SPACE:case l.ENTER:this.focusedItemId&&(e.preventDefault(),this.checkOption(this.focusedItemId));break;case l.ESC:this.focusedItemId&&(this.focusedItemId="");break;case l.ARROW_DOWN:case l.ARROW_UP:this.handleArrowsNavigation(e)}}handleInputKeyDown(e){switch(e.code){case l.ENTER:case l.SPACE:if(this.focusedItemId){e.preventDefault(),this.checkOption(this.focusedItemId);break}break;case l.ARROW_DOWN:case l.ARROW_UP:this.handleArrowsNavigation(e);break;case l.ESC:if(this.focusedItemId){this.focusedItemId="";break}this.closeFilterItems();break;case l.TAB:this.focusedItemId=""}}checkOption(e){e===this.getCheckAllOptionId()?(this.itemsList=this.itemsList.map((e=>Object.assign(Object.assign({},e),{checked:!this.allOptionsSelected()}))),this.focusedItemId=this.getCheckAllOptionId()):this.itemsList=this.itemsList.map((t=>(e===this.getOptionId(t.id)&&(t.checked=!t.checked),t))),this.updateRenderItemsList(),this.emitComboboxChange()}handleArrowsNavigation(e){if(![l.ARROW_DOWN,l.ARROW_UP].includes(e.code)||!this.isopen)return;e.preventDefault(),e.stopPropagation();const t=this.focusedItemId?this.element.shadowRoot.querySelector("#"+this.focusedItemId):null,i=Array.from(this.element.shadowRoot.querySelectorAll('[role="option"]'));if(!i.length)return;const s=t?i.indexOf(t):null,o=i.length-1;let a=null;e.code===l.ARROW_DOWN?a=null===s?i[0]:i[s+1]||i[o]:e.code===l.ARROW_UP&&(a=null===s?i[o]:i[s-1]||i[0]),this.focusedItemId=a.id,a.scrollIntoView({block:"nearest",container:"nearest"})}updateRenderItemsList(){this.searchValue?this.filterItems(this.searchValue):this.resetRenderItemsList()}resetRenderItemsList(){const e=[];this.itemsList.forEach((t=>{e.push(Object.assign({},t))})),this.renderItemsList=e}filterItems(e){if(!e)return this.closeFilterItems();this.resetRenderItemsList(),this.renderItemsList=this.renderItemsList.filter((t=>{const i=t.name.toUpperCase().indexOf(e.toUpperCase()),s=i+e.length,o=t.name.substring(0,i)+"<strong>"+t.name.substring(i,s)+"</strong>"+t.name.substring(s,t.name.length);return t.name=o,i>=0}))}closeFilterItems(){this.searchValue="",this.resetRenderItemsList()}toggleComboBox(){this.isopen=!this.isopen}getComboboxA11yAttributes(e){const t="combobox",i=this.htmlAriaLabel,s=this.isopen?"true":"false",o=this.isopen?this.focusedItemId:"",a=this.inputid+"_list";return e?{role:t,"aria-label":i,"html-aria-expanded":s,"html-aria-activedescendant":o,"html-aria-controls":a}:{role:t,"aria-label":i,"aria-expanded":s,"aria-activedescendant":o,"aria-controls":a}}renderHeader(){const e=this.hassearch?{}:this.getComboboxA11yAttributes(!1);return s("div",Object.assign({class:"header",onClick:()=>this.toggleComboBox(),onKeyDown:e=>this.handleHeaderKeyDown(e),role:"button",tabindex:0,"aria-controls":"open-combo-data","aria-expanded":this.isopen?"true":"false"},e),s("span",{class:"body-3","aria-label":this.label?`${this.label}${this.selectedCounter>0?` - ${this.selectedCounter} selezionati`:""}`:void 0},this.label,s("span",null,this.selectedCounter>0&&` (${this.selectedCounter})`)),s("z-icon",{name:"caret-down",class:this.size}))}renderContent(){return s("div",{id:"open-combo-data",class:"open-combo-data"},this.hassearch&&this.renderSearchInput(),s("div",{role:"listbox","aria-label":this.label,"aria-multiselectable":"true",id:this.inputid+"_list","aria-owns":`${this.hascheckall?this.getCheckAllOptionId()+" ":""}${this.itemsList.map((e=>this.getOptionId(e.id))).join(" ")}`},this.renderItems()))}renderItems(){return s("div",{class:this.searchValue&&"search",tabIndex:-1,role:"presentation"},this.renderList(this.renderItemsList))}renderItem(e,t,i){const o=this.getOptionId(e.id),a=!e.checked&&this.hasReachedMaxSelections();return s("z-list-element",{htmlTabindex:-1,dividerType:t!==i-1?c.ELEMENT:c.NONE,size:this.getControlToListSize(),role:"presentation",disabled:!!a},s("span",{class:"option-wrap",role:"presentation",onClick:()=>{this.focusedItemId="",this.checkOption(o)}},s("z-icon",{name:e.checked?"checkbox-checked":"checkbox",class:this.focusedItemId===o?"focused":""}),s("span",{id:o,role:a?"presentation":"option","aria-selected":e.checked?"true":"false","aria-label":a?void 0:d(e.name)},s("span",{"aria-hidden":"true",innerHTML:e.name}))))}renderList(e){if(e)return!e.length&&this.searchValue?this.renderNoSearchResults():this.hasgroupitems?this.renderGroups(e):s("ul",{role:"presentation"},this.renderCheckAll(),e.map(((t,i)=>this.renderItem(t,i,e.length))))}renderGroups(e){const t=e.reduce(((t,i,s)=>{var o;const a=i.category||"Altra categoria",r=this.renderItem(i,s,e.length);return t[a]=null!==(o=t[a])&&void 0!==o?o:[],t[a].push(r),t}),{}),i=Object.entries(t).map((([e,t],i)=>s("z-list-group",{size:this.getControlToListSize(),"divider-type":c.ELEMENT,"aria-labelledby":`${this.inputid}_list_group_${i}`},s("span",{class:"body-3-sb z-list-group-title",slot:"header-title",id:`${this.inputid}_list_group_${i}`,"aria-hidden":"true"},e),t.map((e=>e)))));return s("ul",{role:"presentation"},this.renderCheckAll(),i)}renderNoSearchResults(){return s("div",{class:"no-results"},s("span",null,this.noresultslabel))}renderSearchInput(){return s("z-input",Object.assign({htmlid:this.inputid+"_search",label:this.searchlabel,placeholder:this.searchplaceholder,htmltitle:this.searchtitle,type:this.inputType,value:this.searchValue,message:!1,size:this.size,"html-aria-autocomplete":"list"},this.getComboboxA11yAttributes(!0),{onKeyDown:e=>this.handleInputKeyDown(e),onInputChange:e=>{this.searchValue=e.detail.value,this.focusedItemId=""}}))}renderCheckAll(){if(!this.hascheckall||this.searchValue)return;const e=this.getCheckAllOptionId(),t=this.allOptionsSelected(),i=this.hasReachedMaxSelections()||this.maxcheckableitems&&this.maxcheckableitems<this.itemsList.length;return s("z-list-element",{class:"check-all-wrapper",role:"presentation",htmlTabindex:-1,dividerType:c.ELEMENT,dividerColor:"gray800",size:this.getControlToListSize(),disabled:!!i},s("span",{class:"option-wrap",role:"presentation",onClick:()=>this.checkOption(e)},s("z-icon",{name:t?"checkbox-checked":"checkbox",class:this.focusedItemId===e?"focused":""}),s("span",{id:e,role:i?"presentation":"option","aria-selected":t?"true":"false"},t?this.uncheckalltext:this.checkalltext)))}render(){return s("div",{key:"f65a92eded2c6cd7d4bb42ddc5f667806a4f5582","data-action":"combo-"+this.inputid,class:{open:this.isopen,fixed:this.isfixed,disabled:this.disabled},id:this.inputid},this.renderHeader(),!this.disabled&&this.renderContent())}get element(){return this}static get watchers(){return{items:[{watchItems:0}],searchValue:[{watchSearchValue:0}]}}static get style(){return'.z-label{display:block;padding-bottom:var(--space-unit);color:var(--color-default-text);font-family:var(--font-family-sans);font-size:var(--font-size-1);font-weight:var(--font-sb);text-align:left;text-transform:uppercase}:host{display:block;min-width:290px;color:var(--color-form-default-text);fill:var(--color-form-default-icon);font-family:var(--font-family-sans)}:host>div.fixed{position:relative}:host>div>.header{position:relative;z-index:10;display:flex;min-height:42px;align-items:center;justify-content:space-between;padding:0 calc(var(--space-unit) * 1.5);border:var(--border-size-small) solid var(--color-form-surface04);margin:0;background-color:var(--color-form-background);border-radius:var(--border-radius-small);cursor:pointer}:host([size="small"])>div>.header{min-height:34px;font-size:var(--font-size-2)}:host([size="x-small"])>div>.header{min-height:30px;font-size:var(--font-size-2)}:host>div>.header:hover{outline:var(--border-size-medium) solid var(--color-form-surface04);outline-offset:-2px}:host>div>div.header:focus:focus-visible{z-index:16;box-shadow:var(--shadow-focus-primary);outline:none}:host>div>.header>span.body-3>span{font-weight:var(--font-sb)}:host>div>.header>z-icon{fill:var(--color-form-default-icon);transform:rotate(360deg);transition:all 200ms linear}:host>div>.header>z-icon.small,:host>div>.header>z-icon.x-small{--z-icon-width:16px;--z-icon-height:16px}:host>div.open>.header{border:var(--border-size-small) solid var(--color-form-active-primary);border-radius:var(--border-radius-small) var(--border-radius-small) 0 0}:host>div.disabled{pointer-events:none}:host>div.disabled .header{border-color:var(--color-form-disabled03);fill:var(--color-form-disabled01-icon)}:host>div.disabled .header>span.body-3{color:var(--color-form-disabled03)}:host>div.disabled .header>z-icon:last-child{fill:var(--color-form-disabled01-icon)}:host>div.open>.header>z-icon{fill:var(--color-form-default-icon);transform:rotate(180deg);transition:all 200ms linear}:host>div>div.open-combo-data{display:none}:host>div.open>div.open-combo-data{position:relative;z-index:12;display:block;padding:var(--space-unit) calc(var(--space-unit) * 2);border:var(--border-size-small) solid var(--color-form-surface03);border-top:0;background-color:var(--color-form-background);border-radius:0;box-shadow:var(--shadow-2)}:host .open .open-combo-data z-input .z-label{color:var(--color-form-default-text)}:host>div.open>div.open-combo-data>div>div{overflow:auto;max-height:235px;padding:0;padding-left:var(--space-unit);margin-left:calc(var(--space-unit) * -1);}:host>div.open>div.open-combo-data>z-input{width:100%;margin-bottom:calc(var(--space-unit) * 2)}:host>div.open>div.open-combo-data>div>div>ul{max-height:235px;padding:0 calc(var(--space-unit) * 0.5);margin:0}:host .open-combo-data z-list-element{--background-color-list-element:var(--color-form-background);--background-hover-color-list-element:var(--color-form-surface03);--background-active-color-list-element:var(--color-form-surface03)}:host .open-combo-data z-list-element[disabled]{pointer-events:none}:host .open-combo-data z-list-element .option-wrap{display:flex;flex-direction:row;align-items:center;cursor:pointer;gap:var(--space-unit)}:host .open-combo-data z-list-element[size="medium"] .option-wrap,:host .open-combo-data z-list-element[size="small"] .option-wrap{--z-icon-width:16px;--z-icon-height:16px;font-size:var(--font-size-2);gap:calc(var(--space-unit) / 2)}:host .open-combo-data z-list-element .option-wrap>z-icon{fill:var(--color-primary01)}:host .open-combo-data z-list-element[disabled] .option-wrap>z-icon{fill:var(--color-disabled01)}:host .open-combo-data z-list-element .option-wrap>z-icon.focused{border-radius:var(--border-radius-small);box-shadow:var(--shadow-focus-primary);outline:none}:host .open-combo-data z-list-element .option-wrap>[role="option"]:focus,:host .open-combo-data z-list-element .option-wrap>[role="option"]:focus-visible{outline:none}::-webkit-scrollbar{width:6px;background:linear-gradient(to right, transparent 0 1px, var(--gray200) 1px 5px, transparent 5px 6px)}::-webkit-scrollbar-thumb{background-color:var(--color-primary01)}::-webkit-scrollbar-thumb:hover{background-color:var(--color-hover-primary)}@supports not selector(::-webkit-scrollbar-track){:host{scrollbar-color:var(--color-primary01) transparent}}:host>div.open>z-input{position:relative;z-index:1;width:238px;margin:0 calc(var(--space-unit) * 2);color:var(--color-form-active-primary)}:host>div.open>div.open-combo-data>div>div.search{overflow:hidden;max-height:none;margin-top:0}:host>div.open>div.open-combo-data>div>div.search>ul{overflow:auto;max-height:180px;padding:var(--space-unit) calc(var(--space-unit) * 2)}:host .open .open-combo-data .search .no-results{display:flex;align-items:center;column-gap:var(--space-unit)}:host>.open>.open-combo-data .search .close-search{display:flex;justify-content:center}:host>div.open>div.open-combo-data>div>div.search .close-search>a{display:inline-block;height:44px;color:var(--color-form-active-primary);cursor:pointer;font-size:14px;font-weight:var(--font-sb);line-height:44px;text-align:center;text-transform:uppercase}:host>div.open>div.open-combo-data>div>div.search .close-search>a:focus:focus-visible{box-shadow:var(--shadow-focus-primary);outline:none}:host>div.open>div.open-combo-data>div>div.check-all-wrapper{padding:calc(var(--space-unit) * 2) calc(var(--space-unit) * 0.5) calc(var(--space-unit) * 2)     calc(var(--space-unit) * 1.5);border-bottom:var(--border-size-small) solid var(--gray800);margin-bottom:var(--space-unit);margin-left:calc(var(--space-unit) * -1);text-align:left}:host([size="small"])>div.open>div.open-combo-data>div>div.check-all-wrapper{padding:calc(var(--space-unit) * 1.5) calc(var(--space-unit) * 0.5)}:host([size="x-small"])>div.open>div.open-combo-data>div>div.check-all-wrapper{padding:var(--space-unit) calc(var(--space-unit) * 0.5)}'}},[1,"z-combobox",{inputid:[1],items:[1],label:[1],disabled:[516],hassearch:[4],searchlabel:[1],searchplaceholder:[1],searchtitle:[1],noresultslabel:[1],isopen:[1028],isfixed:[4],hascheckall:[4],checkalltext:[1],uncheckalltext:[1],maxcheckableitems:[2],hasgroupitems:[4],size:[1],htmlAriaLabel:[1,"html-aria-label"],searchValue:[32],selectedCounter:[32],renderItemsList:[32],focusedItemId:[32]},void 0,{items:[{watchItems:0}],searchValue:[{watchSearchValue:0}]}]),x=g,z=function(){"undefined"!=typeof customElements&&["z-combobox","z-divider","z-icon","z-input","z-input-message","z-list-element","z-list-group"].forEach((e=>{switch(e){case"z-combobox":customElements.get(o(e))||customElements.define(o(e),g);break;case"z-divider":customElements.get(o(e))||p();break;case"z-icon":customElements.get(o(e))||m();break;case"z-input":customElements.get(o(e))||u();break;case"z-input-message":customElements.get(o(e))||b();break;case"z-list-element":customElements.get(o(e))||v();break;case"z-list-group":customElements.get(o(e))||f()}}))};export{x as ZCombobox,z as defineCustomElement}