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

package/dist/components/z-section-title.js

@@ -0,0 +1,52 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { y as ZSectionTitleDividerPosition, D as DividerSize } from './index2.js';
+import { d as defineCustomElement$2 } from './index6.js';
+
+const stylesCss = ":host{--z-section-title--divider-color:var(--red500);display:flex;width:fit-content;flex-direction:column;align-items:flex-start;font-family:var(--font-family-sans)}:host,:host ::slotted(*){box-sizing:border-box}::slotted(*){margin:0}::slotted([slot=\"secondary-title\"]){padding-bottom:calc(var(--space-unit) / 2);border-bottom:var(--border-size-large) solid var(--z-section-title--divider-color);font-size:var(--font-size-3);font-weight:var(--font-sb);line-height:1.5rem;text-transform:uppercase}::slotted([slot=\"primary-title\"]){font-size:var(--font-size-6);font-weight:var(--font-sb);line-height:2rem}:host([uppercase]:not([uppercase=\"false\"])) ::slotted([slot=\"primary-title\"]){text-transform:uppercase}@media (min-width: 1152px){::slotted([slot=\"primary-title\"]){font-size:var(--font-size-7);line-height:2.25rem}}";
+const ZSectionTitleStyle0 = stylesCss;
+
+const ZSectionTitle$1 = /*@__PURE__*/ proxyCustomElement(class ZSectionTitle extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.dividerPosition = ZSectionTitleDividerPosition.BEFORE;
+        this.uppercase = true;
+    }
+    componentWillRender() {
+        this.hasSecondaryTitle = !!this.host.querySelector("[slot=secondary-title]");
+    }
+    render() {
+        return (h(Host, { key: '73bb5aa52dd0ebf377b6dc6c341a6fe856689753' }, h("slot", { key: '69342bb343240b870f387b2f8b81433d6c44adcd', name: "secondary-title" }), !this.hasSecondaryTitle && this.dividerPosition === ZSectionTitleDividerPosition.BEFORE && (h("z-divider", { size: DividerSize.LARGE, color: "z-section-title--divider-color" })), h("slot", { key: 'b13fc5c19b76b950806457e9ccd93cc21b850bc0', name: "primary-title" }), !this.hasSecondaryTitle && this.dividerPosition === ZSectionTitleDividerPosition.AFTER && (h("z-divider", { size: DividerSize.LARGE, color: "z-section-title--divider-color" }))));
+    }
+    get host() { return this; }
+    static get style() { return ZSectionTitleStyle0; }
+}, [1, "z-section-title", {
+        "dividerPosition": [1, "divider-position"],
+        "uppercase": [516]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["z-section-title", "z-divider"];
+    components.forEach(tagName => { switch (tagName) {
+        case "z-section-title":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, ZSectionTitle$1);
+            }
+            break;
+        case "z-divider":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+    } });
+}
+
+const ZSectionTitle = ZSectionTitle$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { ZSectionTitle, defineCustomElement };
+
+//# sourceMappingURL=z-section-title.js.map

package/dist/components/z-section-title.js.map

@@ -0,0 +1 @@
+{"file":"z-section-title.js","mappings":";;;;AAAA,MAAM,SAAS,GAAG,6zBAA6zB,CAAC;AACh1B,4BAAe,SAAS;;MCgBXA,eAAa;;;;;+BAMwB,4BAA4B,CAAC,MAAM;yBAMvE,IAAI;;IAMhB,mBAAmB;QACjB,IAAI,CAAC,iBAAiB,GAAG,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,wBAAwB,CAAC,CAAC;KAC9E;IAED,MAAM;QACJ,QACE,EAAC,IAAI,uDACH,6DAAM,IAAI,EAAC,iBAAiB,GAAG,EAC9B,CAAC,IAAI,CAAC,iBAAiB,IAAI,IAAI,CAAC,eAAe,KAAK,4BAA4B,CAAC,MAAM,KACtF,iBACE,IAAI,EAAE,WAAW,CAAC,KAAK,EACvB,KAAK,EAAC,gCAAgC,GACtC,CACH,EACD,6DAAM,IAAI,EAAC,eAAe,GAAG,EAC5B,CAAC,IAAI,CAAC,iBAAiB,IAAI,IAAI,CAAC,eAAe,KAAK,4BAA4B,CAAC,KAAK,KACrF,iBACE,IAAI,EAAE,WAAW,CAAC,KAAK,EACvB,KAAK,EAAC,gCAAgC,GACtC,CACH,CACI,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["ZSectionTitle"],"sources":["src/components/z-section-title/styles.css?tag=z-section-title&encapsulation=shadow","src/components/z-section-title/index.tsx"],"sourcesContent":[":host {\n  --z-section-title--divider-color: var(--red500);\n\n  display: flex;\n  width: fit-content;\n  flex-direction: column;\n  align-items: flex-start;\n  font-family: var(--font-family-sans);\n}\n\n:host,\n:host ::slotted(*) {\n  box-sizing: border-box;\n}\n\n::slotted(*) {\n  margin: 0;\n}\n\n::slotted([slot=\"secondary-title\"]) {\n  padding-bottom: calc(var(--space-unit) / 2);\n  border-bottom: var(--border-size-large) solid var(--z-section-title--divider-color);\n  font-size: var(--font-size-3);\n  font-weight: var(--font-sb);\n  line-height: 1.5rem;\n  text-transform: uppercase;\n}\n\n::slotted([slot=\"primary-title\"]) {\n  font-size: var(--font-size-6);\n  font-weight: var(--font-sb);\n  line-height: 2rem;\n}\n\n:host([uppercase]:not([uppercase=\"false\"])) ::slotted([slot=\"primary-title\"]) {\n  text-transform: uppercase;\n}\n\n/* Desktop breakpoint */\n@media (min-width: 1152px) {\n  ::slotted([slot=\"primary-title\"]) {\n    font-size: var(--font-size-7);\n    line-height: 2.25rem;\n  }\n}\n","import {Component, Element, h, Host, Prop} from \"@stencil/core\";\nimport {DividerSize, ZSectionTitleDividerPosition} from \"../../beans\";\n\n/**\n * Section title component.\n * An optional secondary title can be put over the primary one.\n *\n * @slot secondary-title - Slot for the secondary title. When present, the divider is always displayed under it,\n * following its width and removing the one for the primary title.\n * @slot primary-title - Slot for the primary title.\n * @cssprop --z-section-title--divider-color - Color of the divider. Use a CSS prop string like `\"--red500\"`. Default is `\"--red500\"`.\n */\n@Component({\n  tag: \"z-section-title\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZSectionTitle {\n  /**\n   * Divider position for the primary title.\n   * This prop only works if the secondary title is not set.\n   */\n  @Prop()\n  dividerPosition: ZSectionTitleDividerPosition = ZSectionTitleDividerPosition.BEFORE;\n\n  /**\n   * Whether the primary title text is uppercase.\n   */\n  @Prop({reflect: true})\n  uppercase = true;\n\n  @Element() host: HTMLZSectionTitleElement;\n\n  private hasSecondaryTitle: boolean;\n\n  componentWillRender(): void {\n    this.hasSecondaryTitle = !!this.host.querySelector(\"[slot=secondary-title]\");\n  }\n\n  render(): HTMLZSectionTitleElement {\n    return (\n      <Host>\n        <slot name=\"secondary-title\" />\n        {!this.hasSecondaryTitle && this.dividerPosition === ZSectionTitleDividerPosition.BEFORE && (\n          <z-divider\n            size={DividerSize.LARGE}\n            color=\"z-section-title--divider-color\"\n          />\n        )}\n        <slot name=\"primary-title\" />\n        {!this.hasSecondaryTitle && this.dividerPosition === ZSectionTitleDividerPosition.AFTER && (\n          <z-divider\n            size={DividerSize.LARGE}\n            color=\"z-section-title--divider-color\"\n          />\n        )}\n      </Host>\n    );\n  }\n}\n"],"version":3}

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

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

package/dist/components/z-select.js

@@ -0,0 +1,421 @@
+import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
+import { e as ControlSize, g as KeyboardCode, l as ListDividerType, i as ListSize } from './index2.js';
+import { r as randomId, b as boolean, a as getElementTree, h as handleKeyboardSubmit, d as getClickedElement } from './utils.js';
+import { d as defineCustomElement$8 } from './index6.js';
+import { d as defineCustomElement$7 } from './index9.js';
+import { d as defineCustomElement$6 } from './index10.js';
+import { d as defineCustomElement$5 } from './index11.js';
+import { d as defineCustomElement$4 } from './index12.js';
+import { d as defineCustomElement$3 } from './index13.js';
+import { d as defineCustomElement$2 } from './index14.js';
+
+const stylesCss = ".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)}[size=\"small\"].sc-z-select-h,[size=\"x-small\"].sc-z-select-h{font-size:var(--font-size-2)}.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.fixed.sc-z-select{position:static}.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 .list-element-container.sc-z-select{display:flex;align-items:center;padding-left: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 .list-element-container.sc-z-select .list-element-content.sc-z-select{display:block;padding:calc(var(--space-unit) * 0.5) 0}.select-wrapper.sc-z-select .ul-scroll-wrapper.sc-z-select z-list.sc-z-select z-list-element.sc-z-select .list-element-container.sc-z-select>z-icon.sc-z-select+.list-element-content.sc-z-select{display:block;padding:calc(var(--space-unit) * 0.5) var(--space-unit)}[size=\"x-small\"].sc-z-select-h .select-wrapper.sc-z-select .ul-scroll-wrapper.sc-z-select z-list.sc-z-select z-list-element.sc-z-select .list-element-container.sc-z-select .list-element-content.sc-z-select{padding:0}[size=\"small\"].sc-z-select-h .select-wrapper.sc-z-select .ul-scroll-wrapper.sc-z-select z-list.sc-z-select z-list-element.sc-z-select .list-element-container.sc-z-select>z-icon.sc-z-select{--z-icon-width:16px;--z-icon-height:16px}[size=\"x-small\"].sc-z-select-h .select-wrapper.sc-z-select .ul-scroll-wrapper.sc-z-select z-list.sc-z-select z-list-element.sc-z-select .list-element-container.sc-z-select>z-icon.sc-z-select{--z-icon-width:14px;--z-icon-height:14px}[size=\"x-small\"].sc-z-select-h .select-wrapper.sc-z-select .ul-scroll-wrapper.sc-z-select z-list.sc-z-select z-list-element.sc-z-select .list-element-container.sc-z-select>z-icon.sc-z-select+.list-element-content.sc-z-select{padding:0 var(--space-unit)}.select-wrapper.sc-z-select .ul-scroll-wrapper.sc-z-select z-list.sc-z-select z-list-element.sc-z-select .list-element-container.sc-z-select .list-element-content.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)}.reset-item.sc-z-select{color:var(--color-primary01);fill:var(--color-primary01)}.reset-item-content.sc-z-select{display:flex;align-items:center}.reset-item.reset-item-margin.sc-z-select .reset-item-content.sc-z-select{margin-left:calc(var(--space-unit))}.reset-item.sc-z-select .reset-item-content.sc-z-select>z-icon.sc-z-select{margin-right:var(--space-unit)}.reset-item.hide.sc-z-select{display:none}";
+const ZSelectStyle0 = stylesCss;
+
+const ZSelect$1 = /*@__PURE__*/ proxyCustomElement(class ZSelect extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.optionSelect = createEvent(this, "optionSelect", 7);
+        this.resetSelect = createEvent(this, "resetSelect", 7);
+        this.itemsList = [];
+        this.htmlid = `id-${randomId()}`;
+        this.items = undefined;
+        this.name = undefined;
+        this.label = undefined;
+        this.ariaLabel = "";
+        this.disabled = false;
+        this.readonly = false;
+        this.placeholder = undefined;
+        this.htmltitle = undefined;
+        this.status = undefined;
+        this.message = true;
+        this.autocomplete = false;
+        this.noresultslabel = "Nessun risultato";
+        this.hasGroupItems = undefined;
+        this.isfixed = false;
+        this.resetItem = undefined;
+        this.size = ControlSize.BIG;
+        this.isOpen = false;
+        this.selectedItem = null;
+        this.focusedItemId = undefined;
+        this.searchString = undefined;
+        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((item) => item.selected);
+    }
+    getFocusedItemHandler(e) {
+        this.focusedItemId = e.target.id;
+    }
+    /** get the input selected options */
+    async getSelectedItem() {
+        return this.selectedItem;
+    }
+    /** get the input value */
+    async getValue() {
+        return this.getSelectedValue();
+    }
+    /** set the input value */
+    async setValue(value) {
+        let values = [];
+        if (typeof value === "string") {
+            values.push(value);
+        }
+        else {
+            values = value;
+        }
+        this.selectedItem = this.itemsList.find((item) => values.includes(item.id));
+    }
+    emitOptionSelect() {
+        this.optionSelect.emit({
+            id: this.htmlid,
+            selected: this.getSelectedValue(),
+        });
+    }
+    emitResetSelect() {
+        this.resetSelect.emit({
+            id: this.htmlid,
+        });
+    }
+    componentWillLoad() {
+        this.watchItems();
+    }
+    componentWillRender() {
+        this.filterItems(this.searchString);
+    }
+    getInitialItemsArray() {
+        return typeof this.items === "string" ? JSON.parse(this.items) : this.items;
+    }
+    mapSelectedItemToItemsArray() {
+        const initialItemsList = this.getInitialItemsArray();
+        return initialItemsList.map((item) => {
+            var _a;
+            item.selected = item.id === ((_a = this.selectedItem) === null || _a === void 0 ? void 0 : _a.id);
+            return item;
+        });
+    }
+    getSelectedValue() {
+        var _a;
+        return (_a = this.selectedItem) === null || _a === void 0 ? void 0 : _a.id;
+    }
+    filterItems(searchString) {
+        const prevList = this.mapSelectedItemToItemsArray();
+        if (!(searchString === null || searchString === void 0 ? void 0 : searchString.length)) {
+            this.itemsList = prevList;
+        }
+        else {
+            this.itemsList = prevList
+                .filter((item) => {
+                return item.name.toUpperCase().includes(searchString.toUpperCase());
+            })
+                .map((item) => {
+                const start = item.name.toUpperCase().indexOf(searchString.toUpperCase());
+                const end = start + searchString.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 item;
+            });
+        }
+    }
+    hasAutocomplete() {
+        return boolean(this.autocomplete) === true;
+    }
+    handleInputChange(e) {
+        this.searchString = e.detail.value;
+        if (!this.isOpen) {
+            this.toggleSelectUl();
+        }
+    }
+    selectItem(item, selected) {
+        if (item && item.disabled) {
+            return;
+        }
+        this.itemsList = this.mapSelectedItemToItemsArray();
+        this.itemsList = this.itemsList.map((i) => {
+            i.selected = false;
+            if (i.id === (item === null || item === void 0 ? void 0 : item.id)) {
+                i.selected = selected;
+            }
+            return i;
+        });
+        this.selectedItem = this.itemsList.find((item) => item.selected);
+        this.emitOptionSelect();
+        if (this.searchString) {
+            this.searchString = null;
+        }
+    }
+    arrowsSelectNav(e, key) {
+        const showResetIcon = this.resetItem && !!this.selectedItem;
+        const arrows = [KeyboardCode.ARROW_DOWN, KeyboardCode.ARROW_UP];
+        if (!arrows.includes(e.key)) {
+            return;
+        }
+        e.preventDefault();
+        e.stopPropagation();
+        if (!this.isOpen) {
+            this.toggleSelectUl();
+        }
+        let index;
+        if (this.resetItem) {
+            if (e.key === KeyboardCode.ARROW_DOWN) {
+                index = key + 1 === this.itemsList.length + 1 ? +!showResetIcon : key + 1;
+            }
+            else if (e.key === KeyboardCode.ARROW_UP) {
+                index = key <= +!showResetIcon ? this.itemsList.length : key - 1;
+            }
+        }
+        if (!this.resetItem) {
+            if (e.key === KeyboardCode.ARROW_DOWN) {
+                index = key + 1 === this.itemsList.length ? 0 : key + 1;
+            }
+            else if (e.key === KeyboardCode.ARROW_UP) {
+                index = key <= 0 ? this.itemsList.length - 1 : key - 1;
+            }
+        }
+        this.focusSelectItem(index);
+    }
+    focusSelectItem(index) {
+        const focusElem = this.element.querySelector(`#${this.htmlid}_${index}`);
+        if (focusElem) {
+            focusElem.focus();
+        }
+    }
+    toggleSelectUl(selfFocusOnClose = false) {
+        if (this.disabled || this.readonly) {
+            return;
+        }
+        if (!this.isOpen) {
+            document.addEventListener("click", this.handleSelectFocus);
+            document.addEventListener("keyup", this.handleSelectFocus);
+        }
+        else {
+            document.removeEventListener("click", this.handleSelectFocus);
+            document.removeEventListener("keyup", this.handleSelectFocus);
+            if (selfFocusOnClose) {
+                this.element.querySelector(`#${this.htmlid}_input`).focus();
+            }
+        }
+        this.focusedItemId = "";
+        this.isOpen = !this.isOpen;
+    }
+    handleInputClick(e) {
+        const cp = e.composedPath();
+        const clearIcon = cp.find((item) => item.classList && item.classList.contains("reset-icon"));
+        if (clearIcon) {
+            e.stopPropagation();
+            return;
+        }
+        this.toggleSelectUl();
+    }
+    handleSelectFocus(e) {
+        if (e instanceof KeyboardEvent && e.key === KeyboardCode.ESC) {
+            e.stopPropagation();
+            return this.toggleSelectUl(true);
+        }
+        if (e instanceof KeyboardEvent && e.key !== KeyboardCode.TAB && e.key !== KeyboardCode.ENTER) {
+            return;
+        }
+        const tree = getElementTree(getClickedElement());
+        const parent = tree.find((elem) => {
+            return elem.nodeName.toLowerCase() === "z-input" && elem.id === `${this.htmlid}_input`;
+        });
+        if (!parent) {
+            this.toggleSelectUl(e instanceof MouseEvent ? true : false);
+        }
+    }
+    scrollToLetter(letter) {
+        const foundItem = this.itemsList.find((item) => item.name.charAt(0) === letter);
+        if (foundItem) {
+            this.focusSelectItem(this.itemsList.indexOf(foundItem));
+        }
+    }
+    renderInput() {
+        return (h("z-input", { class: {
+                "active-select": this.isOpen,
+                "cursor-select": !this.autocomplete,
+            }, id: `${this.htmlid}_input`, htmlid: `${this.htmlid}_select_input`, placeholder: this.placeholder, value: !this.isOpen && this.selectedItem ? this.selectedItem.name.replace(/<[^>]+>/g, "") : null, label: this.label, "aria-expanded": this.isOpen ? "true" : "false", "aria-label": this.ariaLabel, "aria-controls": `${this.htmlid}_list`, "aria-autocomplete": this.hasAutocomplete() ? "list" : "none", "aria-activedescendant": this.isOpen ? this.focusedItemId : "", icon: this.isOpen ? "caret-up" : "caret-down", hasclearicon: this.hasAutocomplete(), message: false, disabled: this.disabled, readonly: this.readonly || (!this.hasAutocomplete() && this.isOpen), status: this.isOpen ? undefined : this.status, role: "combobox", size: this.size, onClick: (e) => {
+                this.handleInputClick(e);
+            }, onKeyUp: (e) => {
+                if (e.keyCode !== 13) {
+                    e.preventDefault();
+                }
+                handleKeyboardSubmit(e, this.toggleSelectUl);
+            }, onKeyDown: (e) => {
+                return this.arrowsSelectNav(e, this.selectedItem ? this.itemsList.indexOf(this.selectedItem) : this.resetItem ? 0 : -1);
+            }, onInputChange: (e) => {
+                this.handleInputChange(e);
+            }, onKeyPress: (e) => {
+                if (!this.hasAutocomplete()) {
+                    e.preventDefault();
+                    this.scrollToLetter(String.fromCharCode(e.keyCode));
+                }
+            } }));
+    }
+    renderSelectUl() {
+        return (h("div", { class: this.isOpen ? "open" : "closed", tabindex: "-1" }, h("div", { class: {
+                "ul-scroll-wrapper": true,
+                "fixed": this.isfixed,
+            }, tabindex: "-1" }, h("z-list", { role: "listbox", "aria-label": this.ariaLabel || this.label, tabindex: this.disabled || this.readonly || !this.isOpen ? -1 : 0, id: `${this.htmlid}_list`, "aria-multiselectable": false, size: this.listSizeType(), class: {
+                disabled: this.disabled,
+                readonly: this.readonly,
+                filled: !!this.selectedItem,
+                [`input-${this.status}`]: !this.isOpen && !!this.status,
+            } }, this.resetItem && this.renderResetItem(), this.renderSelectUlItems()))));
+    }
+    renderResetItem() {
+        return (h("z-list-element", { class: {
+                "hide": !this.selectedItem || !this.resetItem,
+                "reset-item": true,
+                "reset-item-margin": !this.hasGroupItems,
+            }, clickable: true, disabled: false, dividerType: ListDividerType.ELEMENT, role: "option", tabindex: "0", "aria-selected": "false", id: `${this.htmlid}_${this.resetItem ? "0" : "none"}`, size: this.listSizeType(), onClickItem: () => {
+                this.selectedItem = null;
+                this.searchString = null;
+                this.emitResetSelect();
+            }, onKeyDown: (e) => this.arrowsSelectNav(e, 0) }, h("div", { class: "reset-item-content" }, h("z-icon", { name: "multiply-circled" }), h("span", null, this.resetItem))));
+    }
+    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 ? "true" : "false", id: `${this.htmlid}_${key}`, size: this.listSizeType(), onClickItem: () => this.selectItem(item, true), onKeyDown: (e) => this.arrowsSelectNav(e, key) }, h("div", { class: "list-element-container" }, item.icon && h("z-icon", { name: item.icon }), h("span", { class: {
+                "selected": !!item.selected,
+                "list-element-content": true,
+            }, innerHTML: item.name }))));
+    }
+    listSizeType() {
+        if (this.size === ControlSize.SMALL || this.size === ControlSize.X_SMALL) {
+            return ListSize.SMALL;
+        }
+        return ListSize.MEDIUM;
+    }
+    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;
+            const itemKey = this.resetItem ? key + 1 : key;
+            return this.renderItem(item, itemKey, lastItem);
+        });
+    }
+    renderSelectGroupItems() {
+        const newData = this.itemsList.reduce((group, item, index, array) => {
+            var _a;
+            const { category } = item;
+            const lastItem = array.length === index + 1;
+            const itemKey = this.resetItem ? index + 1 : index;
+            const zListItem = this.renderItem(item, itemKey, lastItem);
+            group[category] = (_a = group[category]) !== null && _a !== void 0 ? _a : [];
+            group[category].push(zListItem);
+            return group;
+        }, {});
+        return 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)));
+        });
+    }
+    renderNoSearchResults() {
+        return (h("z-list-element", { color: "blue500", class: "no-results", size: this.listSizeType() }, h("z-icon", { name: "multiply-circle", fill: "blue500" }), this.noresultslabel));
+    }
+    renderMessage() {
+        if (boolean(this.message) === false) {
+            return;
+        }
+        return (h("z-input-message", { message: boolean(this.message) === true ? undefined : this.message, status: this.status, class: this.size }));
+    }
+    render() {
+        return (h("div", { key: '5566ddc949ae9fee8724ebd22bb2ae21dfc0d19e', class: "select-wrapper" }, this.renderInput(), this.renderSelectUl(), this.renderMessage()));
+    }
+    get element() { return this; }
+    static get watchers() { return {
+        "items": ["watchItems"]
+    }; }
+    static get style() { return ZSelectStyle0; }
+}, [2, "z-select", {
+        "htmlid": [1],
+        "items": [1],
+        "name": [1],
+        "label": [1],
+        "ariaLabel": [1, "aria-label"],
+        "disabled": [4],
+        "readonly": [4],
+        "placeholder": [1],
+        "htmltitle": [1],
+        "status": [1],
+        "message": [8],
+        "autocomplete": [4],
+        "noresultslabel": [1],
+        "hasGroupItems": [4, "has-group-items"],
+        "isfixed": [4],
+        "resetItem": [1, "reset-item"],
+        "size": [1],
+        "isOpen": [32],
+        "selectedItem": [32],
+        "focusedItemId": [32],
+        "searchString": [32],
+        "getSelectedItem": [64],
+        "getValue": [64],
+        "setValue": [64]
+    }, [[0, "ariaDescendantFocus", "getFocusedItemHandler"]], {
+        "items": ["watchItems"]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["z-select", "z-divider", "z-icon", "z-input", "z-input-message", "z-list", "z-list-element", "z-list-group"];
+    components.forEach(tagName => { switch (tagName) {
+        case "z-select":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, ZSelect$1);
+            }
+            break;
+        case "z-divider":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$8();
+            }
+            break;
+        case "z-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$7();
+            }
+            break;
+        case "z-input":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$6();
+            }
+            break;
+        case "z-input-message":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$5();
+            }
+            break;
+        case "z-list":
+            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 ZSelect = ZSelect$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { ZSelect, defineCustomElement };
+
+//# sourceMappingURL=z-select.js.map

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

@@ -0,0 +1 @@
+{"file":"z-select.js","mappings":"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","names":["ZSelect"],"sources":["src/components/inputs/z-select/styles.css?tag=z-select&encapsulation=scoped","src/components/inputs/z-select/index.tsx"],"sourcesContent":[":host {\n  display: inline-block;\n  width: inherit;\n  color: var(--color-text02);\n  font-family: var(--font-family-sans);\n  font-size: var(--font-size-3);\n  font-weight: var(--font-rg);\n}\n\n:host([size=\"small\"]),\n:host([size=\"x-small\"]) {\n  font-size: var(--font-size-2);\n}\n\n.select-wrapper > z-input {\n  width: 100%;\n}\n\n.select-wrapper > div {\n  position: relative;\n}\n\n.select-wrapper > div.closed {\n  overflow: hidden;\n  height: 0;\n}\n\n.select-wrapper .ul-scroll-wrapper {\n  position: absolute;\n  width: 100%;\n  box-sizing: border-box;\n  padding: calc(var(--space-unit) * 0.5) var(--space-unit);\n  border: var(--border-size-small) solid var(--gray200);\n  border-top: none;\n  background: var(--color-surface01);\n  outline: none;\n}\n\n.select-wrapper .closed .ul-scroll-wrapper {\n  z-index: 10;\n}\n\n.select-wrapper .open .ul-scroll-wrapper {\n  z-index: 20;\n}\n\n.select-wrapper .ul-scroll-wrapper.fixed {\n  position: static;\n}\n\n.select-wrapper .ul-scroll-wrapper > z-list {\n  position: relative;\n  overflow: auto;\n  max-height: 240px;\n  padding: calc(var(--space-unit) * 0.5);\n  outline: none;\n\n  /* Firefox scrollbar */\n  scrollbar-color: var(--color-primary01) transparent;\n}\n\n.select-wrapper .ul-scroll-wrapper > z-list::-webkit-scrollbar {\n  width: 10px;\n  background: linear-gradient(to right, transparent 0 3px, var(--gray200) 3px 7px, transparent 7px 10px);\n  border-radius: var(--border-radius);\n}\n\n.select-wrapper .ul-scroll-wrapper > z-list::-webkit-scrollbar-track {\n  background-color: transparent;\n}\n\n.select-wrapper .ul-scroll-wrapper > z-list::-webkit-scrollbar-thumb {\n  width: 10px;\n  background-color: var(--color-primary01);\n  border-radius: var(--border-radius);\n}\n\n.select-wrapper .ul-scroll-wrapper > z-list::-webkit-scrollbar-thumb:hover {\n  background-color: var(--color-hover-primary);\n}\n\n.select-wrapper .ul-scroll-wrapper z-list z-list-element .list-element-container {\n  display: flex;\n  align-items: center;\n  padding-left: calc(var(--space-unit) * 1.5);\n}\n\n.select-wrapper .ul-scroll-wrapper z-list z-list-element .list-element-container .list-element-content {\n  display: block;\n  padding: calc(var(--space-unit) * 0.5) 0;\n}\n\n.select-wrapper .ul-scroll-wrapper z-list z-list-element .list-element-container > z-icon + .list-element-content {\n  display: block;\n  padding: calc(var(--space-unit) * 0.5) var(--space-unit);\n}\n\n:host([size=\"x-small\"])\n  .select-wrapper\n  .ul-scroll-wrapper\n  z-list\n  z-list-element\n  .list-element-container\n  .list-element-content {\n  padding: 0;\n}\n\n:host([size=\"small\"]) .select-wrapper .ul-scroll-wrapper z-list z-list-element .list-element-container > z-icon {\n  --z-icon-width: 16px;\n  --z-icon-height: 16px;\n}\n\n:host([size=\"x-small\"]) .select-wrapper .ul-scroll-wrapper z-list z-list-element .list-element-container > z-icon {\n  --z-icon-width: 14px;\n  --z-icon-height: 14px;\n}\n\n:host([size=\"x-small\"])\n  .select-wrapper\n  .ul-scroll-wrapper\n  z-list\n  z-list-element\n  .list-element-container\n  > z-icon\n  + .list-element-content {\n  padding: 0 var(--space-unit);\n}\n\n.select-wrapper .ul-scroll-wrapper z-list z-list-element .list-element-container .list-element-content.selected {\n  font-weight: bold;\n}\n\n.select-wrapper .ul-scroll-wrapper .no-results z-icon {\n  margin-right: var(--space-unit);\n}\n\n.z-list-group-title {\n  color: var(--gray800);\n}\n\n.reset-item {\n  color: var(--color-primary01);\n  fill: var(--color-primary01);\n}\n\n.reset-item-content {\n  display: flex;\n  align-items: center;\n}\n\n.reset-item.reset-item-margin .reset-item-content {\n  margin-left: calc(var(--space-unit));\n}\n\n.reset-item .reset-item-content > z-icon {\n  margin-right: var(--space-unit);\n}\n\n.reset-item.hide {\n  display: none;\n}\n","import {Component, Prop, State, h, Event, EventEmitter, Watch, Element, Method, Listen} from \"@stencil/core\";\nimport {SelectItem, ListDividerType, KeyboardCode, InputStatus, ControlSize, ListSize} from \"../../../beans\";\nimport {randomId, handleKeyboardSubmit, getClickedElement, getElementTree, boolean} from \"../../../utils/utils\";\n\n@Component({\n  tag: \"z-select\",\n  styleUrl: \"styles.css\",\n  shadow: false,\n  scoped: true,\n})\nexport class ZSelect {\n  @Element() element: HTMLZSelectElement;\n\n  /** the id of the input element */\n  @Prop()\n  htmlid = `id-${randomId()}`;\n\n  /** the input select options */\n  @Prop()\n  items: SelectItem[] | string;\n\n  /** the input name */\n  @Prop()\n  name?: string;\n\n  /** the input label */\n  @Prop()\n  label?: string;\n\n  /** the input aria-label */\n  @Prop()\n  ariaLabel = \"\";\n\n  /** the input is disabled */\n  @Prop()\n  disabled?: boolean = false;\n\n  /** the input is readonly */\n  @Prop()\n  readonly?: boolean = false;\n\n  /** the input placeholder (optional) */\n  @Prop()\n  placeholder?: string;\n\n  /** the input html title (optional) */\n  @Prop()\n  htmltitle?: string;\n\n  /** the input status (optional) */\n  @Prop()\n  status?: InputStatus;\n\n  /** input helper message (optional) - if set to `false` message won't be displayed */\n  @Prop()\n  message?: string | boolean = true;\n\n  /** the input has autocomplete option */\n  @Prop()\n  autocomplete?: boolean = false;\n\n  /** no result text message */\n  @Prop()\n  noresultslabel?: string = \"Nessun risultato\";\n\n  /** */\n  @Prop()\n  hasGroupItems?: boolean;\n\n  /** When fixed, it occupies space and pushes down next elements. */\n  @Prop()\n  isfixed?: boolean = false;\n\n  /** */\n  @Prop()\n  resetItem?: string;\n\n  /** Available sizes: `big`, `small` and `x-small`. Defaults to `big`. */\n  @Prop()\n  size?: ControlSize = ControlSize.BIG;\n\n  @State()\n  isOpen = false;\n\n  @State()\n  selectedItem: null | SelectItem = null;\n\n  @State()\n  focusedItemId: string;\n\n  @State()\n  searchString: null | string;\n\n  private itemsList: SelectItem[] = [];\n\n  constructor() {\n    this.toggleSelectUl = this.toggleSelectUl.bind(this);\n    this.selectItem = this.selectItem.bind(this);\n    this.handleSelectFocus = this.handleSelectFocus.bind(this);\n  }\n\n  @Watch(\"items\")\n  watchItems(): void {\n    this.itemsList = this.getInitialItemsArray();\n    this.selectedItem = this.itemsList.find((item: SelectItem) => item.selected);\n  }\n\n  @Listen(\"ariaDescendantFocus\")\n  getFocusedItemHandler(e: CustomEvent): void {\n    this.focusedItemId = (e.target as Element).id;\n  }\n\n  /** get the input selected options */\n  @Method()\n  async getSelectedItem(): Promise<SelectItem> {\n    return this.selectedItem;\n  }\n\n  /** get the input value */\n  @Method()\n  async getValue(): Promise<string> {\n    return this.getSelectedValue();\n  }\n\n  /** set the input value */\n  @Method()\n  async setValue(value: string | string[]): Promise<void> {\n    let values: string[] = [];\n    if (typeof value === \"string\") {\n      values.push(value);\n    } else {\n      values = value;\n    }\n\n    this.selectedItem = this.itemsList.find((item: SelectItem) => values.includes(item.id));\n  }\n\n  /** Emitted on select option selection, returns select id, selected item id */\n  @Event()\n  optionSelect: EventEmitter;\n\n  private emitOptionSelect(): void {\n    this.optionSelect.emit({\n      id: this.htmlid,\n      selected: this.getSelectedValue(),\n    });\n  }\n\n  /** Emitted on reset selected item, returns select id, selected item id */\n  @Event()\n  resetSelect: EventEmitter;\n\n  private emitResetSelect(): void {\n    this.resetSelect.emit({\n      id: this.htmlid,\n    });\n  }\n\n  componentWillLoad(): void {\n    this.watchItems();\n  }\n\n  componentWillRender(): void {\n    this.filterItems(this.searchString);\n  }\n\n  private getInitialItemsArray(): SelectItem[] {\n    return typeof this.items === \"string\" ? JSON.parse(this.items) : this.items;\n  }\n\n  private mapSelectedItemToItemsArray(): SelectItem[] {\n    const initialItemsList = this.getInitialItemsArray();\n\n    return initialItemsList.map((item: SelectItem) => {\n      item.selected = item.id === this.selectedItem?.id;\n\n      return item;\n    });\n  }\n\n  private getSelectedValue(): string {\n    return this.selectedItem?.id;\n  }\n\n  private filterItems(searchString: string): void {\n    const prevList = this.mapSelectedItemToItemsArray();\n    if (!searchString?.length) {\n      this.itemsList = prevList;\n    } else {\n      this.itemsList = prevList\n        .filter((item: SelectItem) => {\n          return item.name.toUpperCase().includes(searchString.toUpperCase());\n        })\n        .map((item: SelectItem) => {\n          const start = item.name.toUpperCase().indexOf(searchString.toUpperCase());\n          const end = start + searchString.length;\n          const newName =\n            item.name.substring(0, start) +\n            `<strong>${item.name.substring(start, end)}</strong>` +\n            item.name.substring(end, item.name.length);\n          item.name = newName;\n\n          return item;\n        });\n    }\n  }\n\n  private hasAutocomplete(): boolean {\n    return boolean(this.autocomplete) === true;\n  }\n\n  private handleInputChange(e: CustomEvent): void {\n    this.searchString = e.detail.value;\n    if (!this.isOpen) {\n      this.toggleSelectUl();\n    }\n  }\n\n  private selectItem(item: null | SelectItem, selected: boolean): void {\n    if (item && item.disabled) {\n      return;\n    }\n\n    this.itemsList = this.mapSelectedItemToItemsArray();\n    this.itemsList = this.itemsList.map((i: SelectItem) => {\n      i.selected = false;\n      if (i.id === item?.id) {\n        i.selected = selected;\n      }\n\n      return i;\n    });\n\n    this.selectedItem = this.itemsList.find((item: SelectItem) => item.selected);\n\n    this.emitOptionSelect();\n\n    if (this.searchString) {\n      this.searchString = null;\n    }\n  }\n\n  private arrowsSelectNav(e: KeyboardEvent, key: number): void {\n    const showResetIcon = this.resetItem && !!this.selectedItem;\n    const arrows = [KeyboardCode.ARROW_DOWN, KeyboardCode.ARROW_UP];\n    if (!arrows.includes(e.key as KeyboardCode)) {\n      return;\n    }\n\n    e.preventDefault();\n    e.stopPropagation();\n\n    if (!this.isOpen) {\n      this.toggleSelectUl();\n    }\n\n    let index: number;\n\n    if (this.resetItem) {\n      if (e.key === KeyboardCode.ARROW_DOWN) {\n        index = key + 1 === this.itemsList.length + 1 ? +!showResetIcon : key + 1;\n      } else if (e.key === KeyboardCode.ARROW_UP) {\n        index = key <= +!showResetIcon ? this.itemsList.length : key - 1;\n      }\n    }\n\n    if (!this.resetItem) {\n      if (e.key === KeyboardCode.ARROW_DOWN) {\n        index = key + 1 === this.itemsList.length ? 0 : key + 1;\n      } else if (e.key === KeyboardCode.ARROW_UP) {\n        index = key <= 0 ? this.itemsList.length - 1 : key - 1;\n      }\n    }\n\n    this.focusSelectItem(index);\n  }\n\n  private focusSelectItem(index: number): void {\n    const focusElem: HTMLLIElement = this.element.querySelector(`#${this.htmlid}_${index}`);\n    if (focusElem) {\n      focusElem.focus();\n    }\n  }\n\n  private toggleSelectUl(selfFocusOnClose = false): void {\n    if (this.disabled || this.readonly) {\n      return;\n    }\n\n    if (!this.isOpen) {\n      document.addEventListener(\"click\", this.handleSelectFocus);\n      document.addEventListener(\"keyup\", this.handleSelectFocus);\n    } else {\n      document.removeEventListener(\"click\", this.handleSelectFocus);\n      document.removeEventListener(\"keyup\", this.handleSelectFocus);\n      if (selfFocusOnClose) {\n        (this.element.querySelector(`#${this.htmlid}_input`) as HTMLInputElement).focus();\n      }\n    }\n\n    this.focusedItemId = \"\";\n    this.isOpen = !this.isOpen;\n  }\n\n  private handleInputClick(e: MouseEvent | KeyboardEvent): void {\n    const cp = e.composedPath();\n    const clearIcon = cp.find((item: HTMLElement) => item.classList && item.classList.contains(\"reset-icon\"));\n    if (clearIcon) {\n      e.stopPropagation();\n\n      return;\n    }\n\n    this.toggleSelectUl();\n  }\n\n  private handleSelectFocus(e: MouseEvent | KeyboardEvent): void {\n    if (e instanceof KeyboardEvent && e.key === KeyboardCode.ESC) {\n      e.stopPropagation();\n\n      return this.toggleSelectUl(true);\n    }\n\n    if (e instanceof KeyboardEvent && e.key !== KeyboardCode.TAB && e.key !== KeyboardCode.ENTER) {\n      return;\n    }\n\n    const tree = getElementTree(getClickedElement());\n    const parent = tree.find((elem: HTMLElement) => {\n      return elem.nodeName.toLowerCase() === \"z-input\" && elem.id === `${this.htmlid}_input`;\n    });\n\n    if (!parent) {\n      this.toggleSelectUl(e instanceof MouseEvent ? true : false);\n    }\n  }\n\n  private scrollToLetter(letter: string): void {\n    const foundItem = this.itemsList.find((item: SelectItem) => item.name.charAt(0) === letter);\n    if (foundItem) {\n      this.focusSelectItem(this.itemsList.indexOf(foundItem));\n    }\n  }\n\n  private renderInput(): HTMLZInputElement {\n    return (\n      <z-input\n        class={{\n          \"active-select\": this.isOpen,\n          \"cursor-select\": !this.autocomplete,\n        }}\n        id={`${this.htmlid}_input`}\n        htmlid={`${this.htmlid}_select_input`}\n        placeholder={this.placeholder}\n        value={!this.isOpen && this.selectedItem ? this.selectedItem.name.replace(/<[^>]+>/g, \"\") : null}\n        label={this.label}\n        aria-expanded={this.isOpen ? \"true\" : \"false\"}\n        aria-label={this.ariaLabel}\n        aria-controls={`${this.htmlid}_list`}\n        aria-autocomplete={this.hasAutocomplete() ? \"list\" : \"none\"}\n        aria-activedescendant={this.isOpen ? this.focusedItemId : \"\"}\n        icon={this.isOpen ? \"caret-up\" : \"caret-down\"}\n        hasclearicon={this.hasAutocomplete()}\n        message={false}\n        disabled={this.disabled}\n        readonly={this.readonly || (!this.hasAutocomplete() && this.isOpen)}\n        status={this.isOpen ? undefined : this.status}\n        role=\"combobox\"\n        size={this.size}\n        onClick={(e: MouseEvent) => {\n          this.handleInputClick(e);\n        }}\n        onKeyUp={(e: KeyboardEvent) => {\n          if (e.keyCode !== 13) {\n            e.preventDefault();\n          }\n          handleKeyboardSubmit(e, this.toggleSelectUl);\n        }}\n        onKeyDown={(e: KeyboardEvent) => {\n          return this.arrowsSelectNav(\n            e,\n            this.selectedItem ? this.itemsList.indexOf(this.selectedItem) : this.resetItem ? 0 : -1\n          );\n        }}\n        onInputChange={(e: CustomEvent) => {\n          this.handleInputChange(e);\n        }}\n        onKeyPress={(e: KeyboardEvent) => {\n          if (!this.hasAutocomplete()) {\n            e.preventDefault();\n            this.scrollToLetter(String.fromCharCode(e.keyCode));\n          }\n        }}\n      />\n    );\n  }\n\n  private renderSelectUl(): HTMLDivElement {\n    return (\n      <div\n        class={this.isOpen ? \"open\" : \"closed\"}\n        tabindex=\"-1\"\n      >\n        <div\n          class={{\n            \"ul-scroll-wrapper\": true,\n            \"fixed\": this.isfixed,\n          }}\n          tabindex=\"-1\"\n        >\n          <z-list\n            role=\"listbox\"\n            aria-label={this.ariaLabel || this.label}\n            tabindex={this.disabled || this.readonly || !this.isOpen ? -1 : 0}\n            id={`${this.htmlid}_list`}\n            aria-multiselectable={false}\n            size={this.listSizeType()}\n            class={{\n              disabled: this.disabled,\n              readonly: this.readonly,\n              filled: !!this.selectedItem,\n              [`input-${this.status}`]: !this.isOpen && !!this.status,\n            }}\n          >\n            {this.resetItem && this.renderResetItem()}\n            {this.renderSelectUlItems()}\n          </z-list>\n        </div>\n      </div>\n    );\n  }\n\n  private renderResetItem(): HTMLZListElementElement {\n    return (\n      <z-list-element\n        class={{\n          \"hide\": !this.selectedItem || !this.resetItem,\n          \"reset-item\": true,\n          \"reset-item-margin\": !this.hasGroupItems,\n        }}\n        clickable={true}\n        disabled={false}\n        dividerType={ListDividerType.ELEMENT}\n        role=\"option\"\n        tabindex=\"0\"\n        aria-selected=\"false\"\n        id={`${this.htmlid}_${this.resetItem ? \"0\" : \"none\"}`}\n        size={this.listSizeType()}\n        onClickItem={() => {\n          this.selectedItem = null;\n          this.searchString = null;\n          this.emitResetSelect();\n        }}\n        onKeyDown={(e: KeyboardEvent) => this.arrowsSelectNav(e, 0)}\n      >\n        <div class=\"reset-item-content\">\n          <z-icon name=\"multiply-circled\" />\n          <span>{this.resetItem}</span>\n        </div>\n      </z-list-element>\n    );\n  }\n\n  private renderItem(item: SelectItem, key: number, lastItem: boolean): HTMLZListElementElement {\n    return (\n      <z-list-element\n        clickable={!item.disabled}\n        disabled={item.disabled}\n        dividerType={lastItem ? ListDividerType.HEADER : ListDividerType.ELEMENT}\n        role=\"option\"\n        tabindex={item.disabled || !this.isOpen ? -1 : 0}\n        aria-selected={item.selected ? \"true\" : \"false\"}\n        id={`${this.htmlid}_${key}`}\n        size={this.listSizeType()}\n        onClickItem={() => this.selectItem(item, true)}\n        onKeyDown={(e: KeyboardEvent) => this.arrowsSelectNav(e, key)}\n      >\n        <div class=\"list-element-container\">\n          {item.icon && <z-icon name={item.icon} />}\n          <span\n            class={{\n              \"selected\": !!item.selected,\n              \"list-element-content\": true,\n            }}\n            innerHTML={item.name}\n          />\n        </div>\n      </z-list-element>\n    );\n  }\n\n  private listSizeType(): ListSize {\n    if (this.size === ControlSize.SMALL || this.size === ControlSize.X_SMALL) {\n      return ListSize.SMALL;\n    }\n\n    return ListSize.MEDIUM;\n  }\n\n  private renderSelectUlItems(): HTMLZListElementElement | HTMLZListElementElement[] {\n    if (!this.itemsList.length) {\n      return this.renderNoSearchResults();\n    }\n\n    if (this.hasGroupItems) {\n      return this.renderSelectGroupItems();\n    }\n\n    return this.itemsList.map((item: SelectItem, key, array) => {\n      const lastItem = array.length === key + 1;\n      const itemKey = this.resetItem ? key + 1 : key;\n\n      return this.renderItem(item, itemKey, lastItem);\n    });\n  }\n\n  private renderSelectGroupItems(): HTMLZListElementElement | HTMLZListElementElement[] {\n    const newData = this.itemsList.reduce((group, item, index, array) => {\n      const {category} = item;\n      const lastItem = array.length === index + 1;\n      const itemKey = this.resetItem ? index + 1 : index;\n      const zListItem = this.renderItem(item, itemKey, lastItem);\n\n      group[category] = group[category] ?? [];\n      group[category].push(zListItem);\n\n      return group;\n    }, {});\n\n    return Object.entries(newData as {[key: string]: HTMLZListElementElement[]}).map(([key, value]) => {\n      return (\n        <z-list-group divider-type={ListDividerType.ELEMENT}>\n          <span\n            class=\"body-3-sb z-list-group-title\"\n            slot=\"header-title\"\n          >\n            {key}\n          </span>\n          {value.map((item) => item)}\n        </z-list-group>\n      );\n    });\n  }\n\n  private renderNoSearchResults(): HTMLZListElementElement {\n    return (\n      <z-list-element\n        color=\"blue500\"\n        class=\"no-results\"\n        size={this.listSizeType()}\n      >\n        <z-icon\n          name=\"multiply-circle\"\n          fill=\"blue500\"\n        />\n        {this.noresultslabel}\n      </z-list-element>\n    );\n  }\n\n  private renderMessage(): HTMLZInputMessageElement {\n    if (boolean(this.message) === false) {\n      return;\n    }\n\n    return (\n      <z-input-message\n        message={boolean(this.message) === true ? undefined : (this.message as string)}\n        status={this.status}\n        class={this.size}\n      />\n    );\n  }\n\n  render(): HTMLDivElement {\n    return (\n      <div class=\"select-wrapper\">\n        {this.renderInput()}\n        {this.renderSelectUl()}\n        {this.renderMessage()}\n      </div>\n    );\n  }\n}\n"],"version":3}

package/dist/components/z-skip-to-content.d.ts

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