@zanichelli/albe-web-components 19.2.4 → 19.2.6-RC1

package/dist/components/index12.js

@@ -1,355 +1 @@
-import { proxyCustomElement, HTMLElement, createEvent, h, Fragment, Host } from '@stencil/core/internal/client';
-import { k as LabelPosition, e as ControlSize, I as InputType, f as InputStatus } from './index2.js';
-import { r as randomId, d as boolean } from './utils.js';
-import { d as defineCustomElement$2 } from './index10.js';
-import { d as defineCustomElement$1 } from './index13.js';
-
-const stylesCss = ".sc-z-input-h{display:inline-block;width:inherit}.sc-z-input-h *.sc-z-input{box-sizing:border-box}input.sc-z-input::-ms-clear,input.sc-z-input::-ms-reveal{display:none}input[type=\"search\"].sc-z-input::-webkit-search-decoration,input[type=\"search\"].sc-z-input::-webkit-search-cancel-button,input[type=\"search\"].sc-z-input::-webkit-search-results-button,input[type=\"search\"].sc-z-input::-webkit-search-results-decoration{display:none}input.sc-z-input,textarea.sc-z-input{background:var(--color-form-background);fill:var(--color-form-default-icon);font-family:var(--font-family-sans);font-size:var(--font-size-3);font-weight:var(--font-rg);outline:none}input.sc-z-input,.textarea-wrapper.sc-z-input{border:var(--border-size-small) solid var(--color-form-surface04);border-radius:var(--border-radius-small);color:var(--color-form-default-text)}[size=\"small\"].sc-z-input-h input.sc-z-input,[size=\"small\"].sc-z-input-h textarea.sc-z-input,[size=\"x-small\"].sc-z-input-h input.sc-z-input,[size=\"x-small\"].sc-z-input-h textarea.sc-z-input{font-size:var(--font-size-2)}.cursor-select.sc-z-input-h input.sc-z-input{cursor:pointer}input.sc-z-input:not([readonly]):hover,.textarea-wrapper.sc-z-input:not(.readonly):hover{outline:var(--border-size-medium) solid var(--color-surface04);outline-offset:-2px}.sc-z-input-h:not(.active-select) input.sc-z-input:focus:focus-visible,.sc-z-input-h:not([readonly=\"true\"]) .textarea-wrapper.sc-z-input:focus-within{border-color:var(--color-form-active-primary);box-shadow:var(--shadow-focus-primary);color:var(--color-form-active-primary)}.sc-z-input-h input.sc-z-input:focus:focus-visible:hover,.textarea-wrapper.sc-z-input:not(.readonly):focus-within:hover{outline-color:var(--color-form-active-primary)}.sc-z-input-h input.sc-z-input:focus:focus-visible+.icons-wrapper.sc-z-input{fill:var(--color-form-active-primary)}.active-select.sc-z-input-h input.sc-z-input{border:var(--border-size-small) solid var(--color-form-active-primary)}.cursor-select.sc-z-input-h input.sc-z-input:focus:focus-visible{box-shadow:var(--shadow-focus-primary)}.sc-z-input-h input[readonly].sc-z-input:focus:focus-visible{border-color:var(--color-form-surface03);box-shadow:none}.input-success.sc-z-input{border-color:var(--color-form-success01);background:var(--color-form-inverse-success)}.input-success.sc-z-input:focus:focus-visible+.icons-wrapper.sc-z-input,.input-success.sc-z-input+.icons-wrapper.sc-z-input{fill:var(--color-form-success01)}.input-error.sc-z-input{border-color:var(--color-form-hover-error);background:var(--color-form-inverse-error)}.input-error.sc-z-input:focus:focus-visible+.icons-wrapper.sc-z-input,.input-error.sc-z-input+.icons-wrapper.sc-z-input{fill:var(--color-form-hover-error)}.input-warning.sc-z-input{border-color:var(--color-form-hover-warning);background:var(--color-form-inverse-warning)}.input-warning.sc-z-input:focus:focus-visible+.icons-wrapper.sc-z-input,.input-warning.sc-z-input+.icons-wrapper.sc-z-input{fill:var(--color-form-hover-warning)}.sc-z-input:is(.input-success,.input-error.sc-z-input,.input-warning).sc-z-input:focus:focus-visible{color:var(--color-form-default-text)}.sc-z-input-h:not(.active-select) input[readonly].sc-z-input,.textarea-wrapper.readonly.sc-z-input{border-color:var(--color-form-surface03);fill:var(--color-form-disabled01-icon);pointer-events:none}[disabled].sc-z-input-h:not([disabled=\"false\"]) input.sc-z-input,[disabled].sc-z-input-h:not([disabled=\"false\"]) .textarea-wrapper.sc-z-input,[disabled].sc-z-input-h:not([disabled=\"false\"]) z-icon.sc-z-input{border-color:var(--color-form-disabled03);box-shadow:none;color:var(--color-form-disabled-text);fill:var(--color-form-disabled01-icon);pointer-events:none}[disabled].sc-z-input-h:not([disabled=\"false\"]) input.sc-z-input:hover{border-width:var(--border-size-small)}input.sc-z-input::placeholder,textarea.sc-z-input::placeholder{color:var(--color-form-placeholder-text)}.sc-z-input::-webkit-textarea-placeholder{color:var(--color-form-placeholder-text)}.sc-z-input:-ms-textarea-placeholder{color:var(--color-form-placeholder-text)}.sc-z-input::placeholder{color:var(--color-form-placeholder-text)}[disabled].sc-z-input-h:not([disabled=\"false\"]) label.z-label.sc-z-input{color:var(--color-disabled03)}.text-wrapper.sc-z-input>div.sc-z-input{position:relative;z-index:1;fill:var(--color-form-default-icon)}.text-wrapper.sc-z-input>div.sc-z-input>input.sc-z-input{width:100%;height:calc(var(--space-unit) * 5.5);box-sizing:border-box;padding:0 calc(var(--space-unit) * 1.5);margin:0}[size=\"small\"].sc-z-input-h .text-wrapper.sc-z-input>div.sc-z-input>input.sc-z-input{height:calc(var(--space-unit) * 4.5)}[size=\"x-small\"].sc-z-input-h .text-wrapper.sc-z-input>div.sc-z-input>input.sc-z-input{height:calc(var(--space-unit) * 4)}.text-wrapper.sc-z-input>div.sc-z-input>input.has-icon.sc-z-input,.text-wrapper.sc-z-input>div.sc-z-input>input.has-clear-icon.sc-z-input{padding-right:calc(var(--space-unit) * 5.25)}.text-wrapper.sc-z-input>div.sc-z-input>input.has-icon.has-clear-icon.sc-z-input{padding-right:calc(var(--space-unit) * 8)}.text-wrapper.sc-z-input .icons-wrapper.sc-z-input{position:absolute;z-index:2;top:50%;right:calc(var(--space-unit) * 1.5);display:flex;pointer-events:none;transform:translateY(-50%)}.text-wrapper.sc-z-input .icons-wrapper.sc-z-input>button.input-icon.sc-z-input{display:flex;padding:0;border:0;background:none;color:inherit;font:inherit;pointer-events:initial}.text-wrapper.sc-z-input .icons-wrapper.sc-z-input>.input-icon.sc-z-input+.input-icon.sc-z-input{margin-left:calc(var(--space-unit) * 0.5)}.text-wrapper.sc-z-input .icons-wrapper.sc-z-input>button.input-icon.hidden.sc-z-input{display:none}.text-wrapper.sc-z-input .icons-wrapper.sc-z-input>button.reset-icon.sc-z-input,.text-wrapper.sc-z-input .icons-wrapper.sc-z-input>button.toggle-password-icon.sc-z-input{cursor:pointer}.text-wrapper.sc-z-input .icons-wrapper.sc-z-input>.input-icon.sc-z-input{--z-icon-width:18px;--z-icon-height:18px;display:block}.text-wrapper.sc-z-input .icons-wrapper.sc-z-input>.input-icon.small.sc-z-input,.text-wrapper.sc-z-input .icons-wrapper.sc-z-input>.input-icon.x-small.sc-z-input{--z-icon-width:16px;--z-icon-height:16px}.text-wrapper.sc-z-input .icons-wrapper.sc-z-input>button.input-icon.sc-z-input:focus{box-shadow:var(--shadow-focus-primary);outline:none !important}.text-wrapper.sc-z-input>div.sc-z-input>input.sc-z-input:-webkit-autofill{-webkit-box-shadow:0 0 0 1000px #fff inset;-webkit-text-fill-color:currentcolor}.textarea-wrapper.sc-z-input{width:100%;height:100%;padding:calc(var(--space-unit) * 1.5)}.textarea-wrapper.sc-z-input:not(.input-error,.input-success.sc-z-input,.input-warning).sc-z-input{background-color:var(--color-form-background)}textarea.sc-z-input{width:100%;min-height:132px;padding:0;border:none;margin:0;color:currentcolor;resize:none}.radio-wrapper.sc-z-input,.checkbox-wrapper.sc-z-input{position:relative;display:inline-flex;flex-direction:row;align-items:center;color:var(--color-default-text);fill:var(--color-primary01);font-family:var(--font-family-sans)}.radio-wrapper.sc-z-input:hover,.checkbox-wrapper.sc-z-input:hover{color:var(--color-hover-primary);fill:var(--color-hover-primary-icon)}.radio-wrapper.sc-z-input>input.sc-z-input,.checkbox-wrapper.sc-z-input>input.sc-z-input{position:absolute;z-index:-1;opacity:0;pointer-events:none}.radio-wrapper.sc-z-input .radio-label.sc-z-input,.checkbox-wrapper.sc-z-input .checkbox-label.sc-z-input{display:inline-flex;align-items:center;margin:0;color:inherit;font-family:inherit;font-size:inherit;font-weight:inherit;line-height:1;text-transform:inherit}.radio-wrapper.sc-z-input input.sc-z-input:not(:disabled)+.radio-label.sc-z-input,.checkbox-wrapper.sc-z-input input.sc-z-input:not(:disabled)+.checkbox-label.sc-z-input{cursor:pointer}.radio-wrapper.sc-z-input .radio-label.sc-z-input z-icon.sc-z-input,.checkbox-wrapper.sc-z-input .checkbox-label.sc-z-input z-icon.sc-z-input{cursor:pointer;fill:inherit}[size=\"small\"].sc-z-input-h .radio-wrapper.sc-z-input .radio-label.sc-z-input z-icon.sc-z-input,[size=\"small\"].sc-z-input-h .checkbox-wrapper.sc-z-input .checkbox-label.sc-z-input z-icon.sc-z-input{--z-icon-width:16px;--z-icon-height:16px}[size=\"small\"].sc-z-input-h .radio-wrapper.sc-z-input .radio-label.sc-z-input,[size=\"small\"].sc-z-input-h .checkbox-wrapper.sc-z-input .checkbox-label.sc-z-input{font-size:var(--font-size-2)}[size=\"x-small\"].sc-z-input-h .radio-wrapper.sc-z-input .radio-label.sc-z-input z-icon.sc-z-input,[size=\"x-small\"].sc-z-input-h .checkbox-wrapper.sc-z-input .checkbox-label.sc-z-input z-icon.sc-z-input{--z-icon-width:14px;--z-icon-height:14px}[size=\"x-small\"].sc-z-input-h .radio-wrapper.sc-z-input .radio-label.sc-z-input,[size=\"x-small\"].sc-z-input-h .checkbox-wrapper.sc-z-input .checkbox-label.sc-z-input{font-size:var(--font-size-1)}.radio-wrapper.sc-z-input .radio-label.after.sc-z-input,.checkbox-wrapper.sc-z-input .checkbox-label.after.sc-z-input{flex-direction:row}.radio-wrapper.sc-z-input .radio-label.before.sc-z-input,.checkbox-wrapper.sc-z-input .checkbox-label.before.sc-z-input{flex-direction:row-reverse}.radio-wrapper.sc-z-input .radio-label.after.sc-z-input>span.sc-z-input,.checkbox-wrapper.sc-z-input .checkbox-label.after.sc-z-input>span.sc-z-input{margin-left:var(--space-unit)}.radio-wrapper.sc-z-input .radio-label.before.sc-z-input>span.sc-z-input,.checkbox-wrapper.sc-z-input .checkbox-label.before.sc-z-input>span.sc-z-input{margin-right:var(--space-unit)}[size=\"small\"].sc-z-input-h .radio-wrapper.sc-z-input .radio-label.after.sc-z-input>span.sc-z-input,[size=\"small\"].sc-z-input-h .checkbox-wrapper.sc-z-input .checkbox-label.after.sc-z-input>span.sc-z-input,[size=\"x-small\"].sc-z-input-h .radio-wrapper.sc-z-input .radio-label.after.sc-z-input>span.sc-z-input,[size=\"x-small\"].sc-z-input-h .checkbox-wrapper.sc-z-input .checkbox-label.after.sc-z-input>span.sc-z-input{margin-left:calc(var(--space-unit) * 0.5)}[size=\"small\"].sc-z-input-h .radio-wrapper.sc-z-input .radio-label.before.sc-z-input>span.sc-z-input,[size=\"small\"].sc-z-input-h .checkbox-wrapper.sc-z-input .checkbox-label.before.sc-z-input>span.sc-z-input,[size=\"x-small\"].sc-z-input-h .radio-wrapper.sc-z-input .radio-label.before.sc-z-input>span.sc-z-input,[size=\"x-small\"].sc-z-input-h .checkbox-wrapper.sc-z-input .checkbox-label.before.sc-z-input>span.sc-z-input{margin-right:calc(var(--space-unit) * 0.5)}.radio-wrapper.sc-z-input>input.sc-z-input:focus:focus-visible+.radio-label.sc-z-input>z-icon.sc-z-input{border-radius:50%}.checkbox-wrapper.sc-z-input>input.sc-z-input:focus:focus-visible+.checkbox-label.sc-z-input>z-icon.sc-z-input{border-radius:var(--border-radius-small)}.radio-wrapper.sc-z-input>input.sc-z-input:focus:focus-visible+.radio-label.sc-z-input>z-icon.sc-z-input,.checkbox-wrapper.sc-z-input>input.sc-z-input:focus:focus-visible+.checkbox-label.sc-z-input>z-icon.sc-z-input{box-shadow:var(--shadow-focus-primary)}.radio-wrapper.sc-z-input>input.sc-z-input:disabled+.radio-label.sc-z-input,.checkbox-wrapper.sc-z-input>input.sc-z-input:disabled+.checkbox-label.sc-z-input{color:var(--color-disabled03)}.radio-wrapper.sc-z-input>input.sc-z-input:disabled+.radio-label.sc-z-input>z-icon.sc-z-input,.checkbox-wrapper.sc-z-input>input.sc-z-input:disabled+.checkbox-label.sc-z-input>z-icon.sc-z-input{cursor:default;fill:var(--color-disabled01)}";
-const ZInputStyle0 = stylesCss;
-
-const ZInput = /*@__PURE__*/ proxyCustomElement(class ZInput extends HTMLElement {
-    constructor() {
-        super();
-        this.__registerHost();
-        this.inputChange = createEvent(this, "inputChange", 7);
-        this.startTyping = createEvent(this, "startTyping", 7);
-        this.stopTyping = createEvent(this, "stopTyping", 7);
-        this.inputCheck = createEvent(this, "inputCheck", 7);
-        this.inputFocus = createEvent(this, "inputFocus", 7);
-        this.inputBlur = createEvent(this, "inputBlur", 7);
-        this.typingtimeout = 300;
-        this.htmlid = `id-${randomId()}`;
-        this.type = undefined;
-        this.name = undefined;
-        this.label = undefined;
-        this.ariaLabel = "";
-        this.htmlAriaExpanded = "";
-        this.htmlAriaControls = undefined;
-        this.htmlAriaAutocomplete = undefined;
-        this.htmlAriaActivedescendant = undefined;
-        this.value = undefined;
-        this.disabled = false;
-        this.readonly = false;
-        this.required = false;
-        this.checked = false;
-        this.placeholder = undefined;
-        this.htmltitle = undefined;
-        this.status = undefined;
-        this.message = true;
-        this.htmlAriaDescribedBy = undefined;
-        this.labelPosition = LabelPosition.RIGHT;
-        this.autocomplete = undefined;
-        this.role = "";
-        this.hasclearicon = true;
-        this.icon = undefined;
-        this.min = undefined;
-        this.minlength = undefined;
-        this.max = undefined;
-        this.maxlength = undefined;
-        this.step = undefined;
-        this.pattern = undefined;
-        this.size = ControlSize.BIG;
-        this.isTyping = false;
-        this.passwordHidden = true;
-    }
-    inputCheckListener(e) {
-        const data = e.detail;
-        switch (this.type) {
-            case InputType.RADIO:
-                if (data.type === InputType.RADIO && data.name === this.name && data.id !== this.htmlid) {
-                    this.checked = false;
-                }
-                break;
-        }
-    }
-    /** get checked status */
-    async isChecked() {
-        switch (this.type) {
-            case InputType.CHECKBOX:
-            case InputType.RADIO:
-                return this.checked;
-            default:
-                console.warn("`isChecked` method is only available for type `checkbox` and `radio`");
-                return false;
-        }
-    }
-    emitInputChange(value) {
-        if (!this.isTyping) {
-            this.emitStartTyping();
-        }
-        let validity;
-        if (this.type === InputType.TEXTAREA) {
-            validity = this.getValidity("textarea");
-        }
-        else {
-            validity = this.getValidity("input");
-        }
-        this.value = value;
-        this.inputChange.emit({ value, validity });
-        clearTimeout(this.timer);
-        this.timer = setTimeout(() => {
-            this.emitStopTyping(this.value, validity);
-        }, this.typingtimeout);
-    }
-    emitStartTyping() {
-        this.isTyping = true;
-        this.startTyping.emit();
-    }
-    emitStopTyping(value, validity) {
-        this.isTyping = false;
-        this.stopTyping.emit({
-            value: value,
-            validity: validity,
-        });
-    }
-    emitInputCheck(checked) {
-        this.inputCheck.emit({
-            id: this.htmlid,
-            checked: checked,
-            type: this.type,
-            name: this.name,
-            value: this.value,
-            validity: this.getValidity("input"),
-        });
-    }
-    emitInputFocus() {
-        this.inputFocus.emit({ id: this.htmlid });
-    }
-    emitInputBlur() {
-        this.inputBlur.emit({ id: this.htmlid });
-    }
-    getValidity(type) {
-        const input = this.hostElement.querySelector(type);
-        return input.validity;
-    }
-    /* START text/password/email/number */
-    getTextAttributes() {
-        return {
-            id: this.htmlid,
-            name: this.name,
-            placeholder: this.placeholder,
-            value: this.value,
-            disabled: this.disabled,
-            readonly: this.readonly,
-            required: this.required,
-            title: this.htmltitle,
-            minlength: this.minlength,
-            maxlength: this.maxlength,
-            class: {
-                [`input-${this.status}`]: !!this.status,
-            },
-            autocomplete: this.autocomplete,
-            onInput: (e) => this.emitInputChange(e.target.value),
-        };
-    }
-    getNumberAttributes(type) {
-        if (type != InputType.NUMBER) {
-            return;
-        }
-        return {
-            min: this.min,
-            max: this.max,
-            step: this.step,
-        };
-    }
-    getPatternAttribute(type) {
-        if (type != InputType.PASSWORD &&
-            type != InputType.TEXT &&
-            type != InputType.TEL &&
-            type != InputType.SEARCH &&
-            type != InputType.URL &&
-            type != InputType.EMAIL) {
-            return;
-        }
-        return {
-            pattern: this.pattern,
-        };
-    }
-    getRoleAttribute() {
-        return this.role ? { role: this.role } : {};
-    }
-    inputHasMessage() {
-        if (boolean(this.message) === false || boolean(this.message) === true) {
-            return false;
-        }
-        return true;
-    }
-    getAriaAttrubutes() {
-        const expanded = this.htmlAriaExpanded ? { "aria-expanded": this.htmlAriaExpanded } : {};
-        const controls = this.htmlAriaControls ? { "aria-controls": this.htmlAriaControls } : {};
-        const autocomplete = this.htmlAriaAutocomplete ? { "aria-autocomplete": this.htmlAriaAutocomplete } : {};
-        const activedescendant = this.htmlAriaActivedescendant
-            ? { "aria-activedescendant": this.htmlAriaActivedescendant }
-            : {};
-        const ariaDescribedby = this.htmlAriaDescribedBy || this.inputHasMessage()
-            ? { "aria-describedby": this.htmlAriaDescribedBy || `${this.htmlid}-message` }
-            : {};
-        const ariaInvalid = this.status === InputStatus.ERROR ? { "aria-invalid": "true" } : {};
-        return Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, expanded), controls), autocomplete), activedescendant), ariaDescribedby), ariaInvalid);
-    }
-    getFocusBlurAttributes() {
-        return {
-            onFocus: () => this.emitInputFocus(),
-            onBlur: () => this.emitInputBlur(),
-        };
-    }
-    renderInputText(type = InputType.TEXT) {
-        const ariaLabel = this.ariaLabel ? { "aria-label": this.ariaLabel } : {};
-        const attr = Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, this.getTextAttributes()), this.getNumberAttributes(type)), this.getPatternAttribute(type)), ariaLabel), this.getRoleAttribute()), this.getAriaAttrubutes()), this.getFocusBlurAttributes());
-        if (this.icon || type === InputType.PASSWORD) {
-            Object.assign(attr.class, { "has-icon": true });
-        }
-        if (this.hasclearicon && type != InputType.NUMBER) {
-            Object.assign(attr.class, { "has-clear-icon": true });
-        }
-        return (h("div", { class: "text-wrapper" }, this.renderLabel(), h("div", null, h("input", Object.assign({ type: type === InputType.PASSWORD && !this.passwordHidden ? InputType.TEXT : type }, attr, { ref: (el) => (this.inputRef = el) })), this.renderIcons()), this.renderMessage()));
-    }
-    renderLabel() {
-        if (!this.label) {
-            return;
-        }
-        return (h("label", { class: "z-label body-5-sb", id: `${this.htmlid}_label`, htmlFor: this.htmlid }, this.label));
-    }
-    renderIcons() {
-        return (h("span", { class: "icons-wrapper" }, this.renderResetIcon(), this.renderIcon()));
-    }
-    renderIcon() {
-        if (this.type === InputType.PASSWORD) {
-            return this.renderShowHidePassword();
-        }
-        if (!this.icon) {
-            return;
-        }
-        return (h("z-icon", { name: this.icon, class: { [this.size]: true, "input-icon": true } }));
-    }
-    renderResetIcon() {
-        let hidden = false;
-        if (!this.hasclearicon || !this.value || this.disabled || this.readonly || this.type == InputType.NUMBER) {
-            hidden = true;
-        }
-        return (h("button", { type: "button", class: { "reset-icon": true, "input-icon": true, hidden }, "aria-label": "cancella il contenuto dell'input", onClick: () => {
-                this.inputRef.value = "";
-                this.emitInputChange("");
-            } }, h("z-icon", { name: "multiply", class: this.size })));
-    }
-    renderShowHidePassword() {
-        return (h("button", { type: "button", class: "input-icon toggle-password-icon", disabled: this.disabled, "aria-label": this.passwordHidden ? "mostra password" : "nascondi password", onClick: () => (this.passwordHidden = !this.passwordHidden) }, h("z-icon", { name: this.passwordHidden ? "view-filled" : "view-off-filled", class: this.size })));
-    }
-    renderMessage() {
-        if (boolean(this.message) === false) {
-            return;
-        }
-        return (h("z-input-message", { "html-id": `${this.htmlid}-message`, message: boolean(this.message) === true ? undefined : this.message, status: this.status, class: this.size, disabled: this.disabled }));
-    }
-    /* END text/password/email/number */
-    /* START textarea */
-    renderTextarea() {
-        const attributes = this.getTextAttributes();
-        const ariaAttributes = this.getAriaAttrubutes();
-        return (h(Fragment, null, this.renderLabel(), h("div", { class: Object.assign(Object.assign({}, attributes.class), { "textarea-wrapper": true, "readonly": !!attributes.readonly }) }, h("textarea", Object.assign({}, attributes, ariaAttributes, { class: Object.assign(Object.assign({}, attributes.class), { "z-scrollbar": true }), "aria-label": this.ariaLabel || undefined }, this.getRoleAttribute()))), this.renderMessage()));
-    }
-    /* END textarea */
-    handleCheck(ev) {
-        this.checked = ev.target.checked;
-        this.emitInputCheck(this.checked);
-    }
-    /* START checkbox */
-    renderCheckbox() {
-        return (h("div", { class: "checkbox-wrapper" }, h("input", Object.assign({ id: this.htmlid, type: "checkbox", name: this.name, checked: this.checked, disabled: this.disabled, readonly: this.readonly, required: this.required, onChange: this.handleCheck.bind(this), value: this.value }, this.getRoleAttribute(), this.getFocusBlurAttributes())), h("label", { htmlFor: this.htmlid, class: {
-                "checkbox-label": true,
-                "after": this.labelPosition === LabelPosition.RIGHT,
-                "before": this.labelPosition === LabelPosition.LEFT,
-            } }, h("z-icon", { name: this.checked ? "checkbox-checked" : "checkbox", class: this.size }), this.label && h("span", { innerHTML: this.label }))));
-    }
-    /* END checkbox */
-    /* START radio */
-    renderRadio() {
-        return (h("div", { class: "radio-wrapper" }, h("input", Object.assign({ id: this.htmlid, type: "radio", name: this.name, checked: this.checked, disabled: this.disabled, readonly: this.readonly, onChange: this.handleCheck.bind(this), value: this.value }, this.getRoleAttribute(), this.getFocusBlurAttributes())), h("label", { htmlFor: this.htmlid, class: {
-                "radio-label": true,
-                "after": this.labelPosition === LabelPosition.RIGHT,
-                "before": this.labelPosition === LabelPosition.LEFT,
-            } }, h("z-icon", { name: this.checked ? "radio-button-checked" : "radio-button", class: this.size }), this.label && h("span", { innerHTML: this.label }))));
-    }
-    /* END radio */
-    render() {
-        let input;
-        switch (this.type) {
-            case InputType.TEXTAREA:
-                input = this.renderTextarea();
-                break;
-            case InputType.CHECKBOX:
-                input = this.renderCheckbox();
-                break;
-            case InputType.RADIO:
-                input = this.renderRadio();
-                break;
-            default:
-                input = this.renderInputText(this.type);
-        }
-        return h(Host, { key: '5947648f0faeea551f24f57b685f0872cdabe77e' }, input);
-    }
-    get hostElement() { return this; }
-    static get style() { return ZInputStyle0; }
-}, [2, "z-input", {
-        "htmlid": [1],
-        "type": [1],
-        "name": [1],
-        "label": [1],
-        "ariaLabel": [1, "aria-label"],
-        "htmlAriaExpanded": [1, "html-aria-expanded"],
-        "htmlAriaControls": [1, "html-aria-controls"],
-        "htmlAriaAutocomplete": [1, "html-aria-autocomplete"],
-        "htmlAriaActivedescendant": [1, "html-aria-activedescendant"],
-        "value": [1025],
-        "disabled": [516],
-        "readonly": [4],
-        "required": [4],
-        "checked": [1028],
-        "placeholder": [1],
-        "htmltitle": [1],
-        "status": [1],
-        "message": [8],
-        "htmlAriaDescribedBy": [1, "html-aria-described-by"],
-        "labelPosition": [1, "label-position"],
-        "autocomplete": [1],
-        "role": [1],
-        "hasclearicon": [4],
-        "icon": [1],
-        "min": [2],
-        "minlength": [2],
-        "max": [2],
-        "maxlength": [2],
-        "step": [2],
-        "pattern": [1],
-        "size": [513],
-        "isTyping": [32],
-        "passwordHidden": [32],
-        "isChecked": [64]
-    }, [[4, "inputCheck", "inputCheckListener"]]]);
-function defineCustomElement() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["z-input", "z-icon", "z-input-message"];
-    components.forEach(tagName => { switch (tagName) {
-        case "z-input":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, ZInput);
-            }
-            break;
-        case "z-icon":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$2();
-            }
-            break;
-        case "z-input-message":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$1();
-            }
-            break;
-    } });
-}
-
-export { ZInput as Z, defineCustomElement as d };
-
-//# sourceMappingURL=index12.js.map
+import{proxyCustomElement as n,HTMLElement as a,createEvent as t,h as s,Host as i,transformTag as o}from"@stencil/core/internal/client";import{O as c,u as e,g as r}from"./index2.js";const f=n(class extends a{constructor(n){super(),!1!==n&&this.__registerHost(),this.canvasOpenStatusChanged=t(this,"canvasOpenStatusChanged",7),this.variant=c.PUSHCONTENT,this.open=!1,this.transitiondirection=e.LEFT,this.skipLoadAnimation=!1,this.showBackdrop=!0,this.skipAnimation=!1,this.allFocusableElements=[],this.previouslyFocusedElement=null}getFocusableElements(){return this.canvasContent?Array.from(this.canvasContent.querySelectorAll("*")).filter((n=>{const a=n.getAttribute("tabindex");return!n.hasAttribute("disabled")&&!(null===n.offsetParent)&&(n.tabIndex>=0||"0"===a)})):[]}trapFocus(n){if(!this.allFocusableElements.length)return;const a=this.allFocusableElements[0],t=this.allFocusableElements[this.allFocusableElements.length-1],s=document.activeElement;n.shiftKey&&s===a&&(n.preventDefault(),t.focus()),n.shiftKey||s!==t||(n.preventDefault(),a.focus())}handleKeyDown(n){if(this.open)return n.key===r.ESC?(n.preventDefault(),void(this.open=!1)):void(n.key===r.TAB&&this.trapFocus(n))}stopEvent(n){this.open||(n.preventDefault(),n.stopPropagation())}handlePageOverflow(){document.body.style[this.variant===c.OVERLAY||this.transitiondirection===e.UP?"overflow-y":"overflow-x"]=this.open?"hidden":""}onOpenChanged(){var n,a,t;if(this.canvasOpenStatusChanged.emit(this.open),this.open)this.previouslyFocusedElement=document.activeElement,this.allFocusableElements.length>0?this.allFocusableElements[0].focus():null===(n=this.canvasContent)||void 0===n||n.focus(),this.handlePageOverflow();else{null===(a=this.previouslyFocusedElement)||void 0===a||a.focus();const n=()=>{this.handlePageOverflow(),this.canvasContainer.removeEventListener("transitionend",n)};null===(t=this.canvasContainer)||void 0===t||t.addEventListener("transitionend",n)}}componentWillLoad(){this.open&&(this.skipAnimation=!0)}componentDidLoad(){this.handlePageOverflow()}componentDidRender(){this.skipAnimation=!1,this.allFocusableElements=this.getFocusableElements()}connectedCallback(){this.handlePageOverflow()}disconnectedCallback(){this.open=!1}render(){return s(i,{key:"4a7d050590730574ccb25ecd1f93032fac113549","skip-animation":this.skipAnimation,"aria-hidden":this.open?null:"true"},s("div",{key:"4507bf74ea9c8b097173ed048cd52af0704b8fb6",class:"canvas-container",role:"presentation",ref:n=>this.canvasContainer=n},s("div",{key:"79c69732bcdf90d5dc25713bdec66034b595f75d",class:"canvas-content z-scrollbar",role:"presentation",ref:n=>this.canvasContent=n},s("slot",{key:"f133b7048d147138f4db154f2591070b5c74bd8a",name:"canvasContent"}))),(this.variant==c.OVERLAY||this.transitiondirection===e.UP)&&this.showBackdrop&&s("div",{key:"885eeed8b2ebd31467366f208c5f66eace44ad0c",class:"backdrop",onClick:()=>this.open=!1}))}static get watchers(){return{variant:[{handlePageOverflow:0}],open:[{onOpenChanged:0}]}}static get style(){return'.sc-z-offcanvas-h{font-family:var(--font-family-sans);font-weight:var(--font-rg)}[variant="pushcontent"].sc-z-offcanvas-h:not([transitiondirection="up"]){overflow:hidden}.canvas-container.sc-z-offcanvas{display:flex;overflow:hidden;min-width:100%;height:100%;background:var(--color-surface01);transform:translateX(0);transition:transform 0.4s ease-out}.sc-z-offcanvas-h>*.sc-z-offcanvas{position:fixed;top:var(--z-offcanvas--top-space, 0);right:0;bottom:0;left:0}[open].sc-z-offcanvas-h>*.sc-z-offcanvas{height:calc(100% - var(--z-offcanvas--top-space, 0px))}[transitiondirection="right"].sc-z-offcanvas-h>.canvas-container.sc-z-offcanvas{transform:translateX(-100%)}[transitiondirection="left"].sc-z-offcanvas-h>.canvas-container.sc-z-offcanvas{transform:translateX(100%)}[open][transitiondirection="right"].sc-z-offcanvas-h>.canvas-container.sc-z-offcanvas,[open][transitiondirection="left"].sc-z-offcanvas-h>.canvas-container.sc-z-offcanvas{transform:translateX(0)}[transitiondirection="up"].sc-z-offcanvas-h>.canvas-container.sc-z-offcanvas{top:auto;bottom:0;height:var(--z-offcanvas--container-height, 90%);transform:translateY(100%)}[transitiondirection="up"].sc-z-offcanvas-h>.canvas-container.sc-z-offcanvas,[variant="overlay"].sc-z-offcanvas-h>.canvas-container.sc-z-offcanvas{z-index:1001}[open][transitiondirection="up"].sc-z-offcanvas-h>.canvas-container.sc-z-offcanvas{transform:translateY(0)}[variant="pushcontent"].sc-z-offcanvas-h:not([transitiondirection="up"])>.canvas-container.sc-z-offcanvas{position:relative;height:100%}[variant="pushcontent"].sc-z-offcanvas-h:not([open]){display:none}[skip-animation].sc-z-offcanvas-h>.canvas-container.sc-z-offcanvas{transition:none}.backdrop.sc-z-offcanvas{z-index:1000;width:100%;height:100%;background-color:var(--gray900);opacity:0;pointer-events:none;transition:opacity 0.4s ease-out}[open].sc-z-offcanvas-h>.backdrop.sc-z-offcanvas{opacity:0.7;pointer-events:unset}.canvas-container.sc-z-offcanvas>.canvas-content.sc-z-offcanvas{overflow:hidden auto;flex:1 auto;padding:0 calc(var(--space-unit) * 2);margin:calc(var(--space-unit) * 2) calc(var(--space-unit) / 2) calc(var(--space-unit) * 2) 0}@media (min-width: 768px){[variant="pushcontent"].sc-z-offcanvas-h:not([transitiondirection="up"]){flex:none}.canvas-container.sc-z-offcanvas{width:var(--z-offcanvas--container-width, 375px);min-width:var(--z-offcanvas--container-width, 375px)}[transitiondirection="up"].sc-z-offcanvas-h>.canvas-container.sc-z-offcanvas{width:100%}[transitiondirection="right"].sc-z-offcanvas-h>.canvas-container.sc-z-offcanvas{right:auto;left:0}[transitiondirection="left"].sc-z-offcanvas-h>.canvas-container.sc-z-offcanvas{right:0;left:auto}}'}},[262,"z-offcanvas",{variant:[513],open:[1540],transitiondirection:[513],skipLoadAnimation:[4,"skip-load-animation"],showBackdrop:[4,"show-backdrop"],skipAnimation:[32]},[[4,"keydown","handleKeyDown"],[2,"click","stopEvent"],[2,"focusin","stopEvent"]],{variant:[{handlePageOverflow:0}],open:[{onOpenChanged:0}]}]);function h(){"undefined"!=typeof customElements&&["z-offcanvas"].forEach((n=>{"z-offcanvas"===n&&(customElements.get(o(n))||customElements.define(o(n),f))}))}export{f as Z,h as d}

package/dist/components/index13.js

@@ -1,73 +1 @@
-import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { r as randomId } from './utils.js';
-import { d as defineCustomElement$1 } from './index10.js';
-
-const stylesCss = ":host{display:flex;min-height:calc(var(--space-unit) * 2.5);align-items:start;margin-top:var(--space-unit);color:var(--color-default-text);fill:currentcolor;font-family:var(--font-family-sans);font-size:var(--font-size-2);letter-spacing:0.16px}:host(.small),:host(.x-small){margin-top:calc(var(--space-unit) * 0.5);font-size:var(--font-size-1)}:host([status=\"success\"]){color:var(--color-hover-success)}:host([status=\"error\"]){color:var(--color-hover-error)}:host([status=\"warning\"]){color:var(--color-hover-warning)}:host(:focus){outline:none}:host>z-icon{--z-icon-width:calc(var(--space-unit) * 2);--z-icon-height:calc(var(--space-unit) * 2);--z-icon-right-margin:var(--space-unit);margin-top:calc(var(--space-unit) * 0.25)}:host(.small)>z-icon,:host(.x-small)>z-icon{--z-icon-width:14px;--z-icon-height:14px;--z-icon-right-margin:calc(var(--space-unit) * 0.5)}:host([disabled]){color:var(--color-disabled03);fill:var(--color-disabled03)}";
-const ZInputMessageStyle0 = stylesCss;
-
-const ZInputMessage = /*@__PURE__*/ proxyCustomElement(class ZInputMessage extends HTMLElement {
-    constructor() {
-        super();
-        this.__registerHost();
-        this.__attachShadow();
-        this.statusIcons = {
-            success: "checkmark-circle",
-            error: "multiply-circled",
-            warning: "exclamation-circle",
-        };
-        this.message = undefined;
-        this.htmlId = `id-${randomId()}`;
-        this.htmlRole = "alert";
-        this.status = undefined;
-        this.disabled = undefined;
-        this.statusRole = {};
-    }
-    onMessageChange() {
-        this.statusRole = this.htmlRole && this.message && this.status ? { role: this.htmlRole } : {};
-    }
-    componentWillLoad() {
-        this.onMessageChange();
-    }
-    render() {
-        return (h(Host, Object.assign({ key: 'a6cb5b864526575f19104d915c2bcc88398c9527' }, this.statusRole), this.statusIcons[this.status] && this.message && h("z-icon", { key: '879a934edeeed730605f3cc5be1ef0f29c1800dc', name: this.statusIcons[this.status] }), h("span", { key: '7eb24ba2327d030e9ed3d562000958857fc5e095', id: this.htmlId, innerHTML: this.message })));
-    }
-    static get watchers() { return {
-        "message": ["onMessageChange"],
-        "status": ["onMessageChange"],
-        "htmlRole": ["onMessageChange"]
-    }; }
-    static get style() { return ZInputMessageStyle0; }
-}, [1, "z-input-message", {
-        "message": [1],
-        "htmlId": [1, "html-id"],
-        "htmlRole": [1, "html-role"],
-        "status": [513],
-        "disabled": [516],
-        "statusRole": [32]
-    }, undefined, {
-        "message": ["onMessageChange"],
-        "status": ["onMessageChange"],
-        "htmlRole": ["onMessageChange"]
-    }]);
-function defineCustomElement() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["z-input-message", "z-icon"];
-    components.forEach(tagName => { switch (tagName) {
-        case "z-input-message":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, ZInputMessage);
-            }
-            break;
-        case "z-icon":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$1();
-            }
-            break;
-    } });
-}
-
-export { ZInputMessage as Z, defineCustomElement as d };
-
-//# sourceMappingURL=index13.js.map
+import{proxyCustomElement as t,HTMLElement as e,createEvent as s,h as i,Host as l,transformTag as r}from"@stencil/core/internal/client";import{e as a,B as o,p as n,l as h,g as c}from"./index2.js";import{r as u,g as d,m}from"./utils.js";import{d as p}from"./index5.js";import{d as v}from"./index6.js";import{d as b}from"./index3.js";import{d as g}from"./index7.js";import{d as z}from"./index8.js";import{d as f}from"./index9.js";import{d as x}from"./index10.js";import{d as w}from"./index11.js";import{d as y}from"./index14.js";const k=t(class extends e{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow(),this.searchSubmit=s(this,"searchSubmit",7),this.searchTyping=s(this,"searchTyping",7),this.searchItemClick=s(this,"searchItemClick",7),this.htmlid=`searchbar-${u()}`,this.preventSubmit=!1,this.autocomplete=!1,this.autocompleteMinChars=3,this.searchHelperLabel="Cerca {searchString}",this.sortResultsItems=!1,this.showSearchButton=!1,this.searchButtonIconOnly=!1,this.size=a.BIG,this.variant=o.PRIMARY,this.searchString=this.value,this.currResultsCount=0,this.showResults=!1,this.isMobile=!1,this.resultsItemsList=null,this.items=[]}emitSearchSubmit(){this.searchSubmit.emit(this.inputRef.value)}emitSearchTyping(t){this.searchTyping.emit(t)}emitSearchItemClick(t){this.searchItemClick.emit(t),this.selectedItem=t,this.searchString=""}watchItems(){this.resultsItemsList=this.getResultsItemsList()}watchResultsCount(){this.currResultsCount=this.resultsCount}watchValue(){this.searchString=this.value}watchSearchString(){this.emitSearchTyping(this.searchString),this.items=[],this.searchString||(this.currResultsCount=this.resultsCount)}watchShowResults(){this.showResults||(this.items=[])}disconnectedCallback(){var t;null===(t=this.resizeObserver)||void 0===t||t.disconnect()}componentDidLoad(){this.resizeObserver=new ResizeObserver((()=>{d()!==n.MOBILE||this.isMobile||(this.isMobile=!0),d()!==n.MOBILE&&this.isMobile&&(this.isMobile=!1)})),this.resizeObserver.observe(this.element)}componentWillLoad(){this.resultsItemsList=this.getResultsItemsList(),this.currResultsCount=this.resultsCount}getResultsItemsList(){return"string"==typeof this.resultsItems?JSON.parse(this.resultsItems):this.resultsItems}getGroupedItems(t){const e={};return t.forEach((t=>{var s;const i=`${null==t?void 0:t.category}${null==t?void 0:t.subcategory}`;e[i]=null!==(s=e[i])&&void 0!==s?s:{category:null==t?void 0:t.category,subcategory:null==t?void 0:t.subcategory,items:[]},e[i].items.push(t)})),this.sortResultsItems?Object.keys(e).sort().reduce(((t,s)=>(t[s]=Object.assign(Object.assign({},e[s]),{items:e[s].items.sort(((t,e)=>{const s=t.label.toUpperCase(),i=e.label.toUpperCase();return s<i?-1:s>i?1:0}))}),t)),{}):e}checkResultsCount(t){return!this.currResultsCount||t<this.currResultsCount}handleStopTyping(t){t.stopPropagation(),this.searchString=t.detail.value,this.selectedItem&&(this.selectedItem=void 0)}handleSubmit(){this.preventSubmit||this.emitSearchSubmit()}handleOutsideClick(t){const e=t.composedPath(),s=e.find((t=>"Z-SEARCHBAR"===t.nodeName));this.showResults=!(!s||s.htmlid!==this.htmlid||!e.find((t=>{var e;return"Z-INPUT"===(null==t?void 0:t.nodeName)||(null===(e=null==t?void 0:t.classList)||void 0===e?void 0:e.contains("results"))})))}renderInput(){var t;return i("z-input",{ref:t=>{this.inputRef=t},htmlid:`input-${this.htmlid}`,message:!1,placeholder:this.placeholder,onStopTyping:t=>this.handleStopTyping(t),onKeyUp:t=>{m(t,(()=>this.handleSubmit())),this.handleArrowsNavigation(t)},value:this.searchString||(null===(t=this.selectedItem)||void 0===t?void 0:t.label),size:this.size,label:this.label,"aria-label":this.htmlAriaLabel||this.placeholder})}renderButton(){if(!this.showSearchButton)return null;const t=this.searchButtonIconOnly?"":"CERCA",e=this.searchButtonIconOnly?{"aria-label":"CERCA"}:null,s=Object.assign(Object.assign({disabled:this.preventSubmit,variant:this.variant,size:this.size,onClick:()=>this.handleSubmit()},this.searchButtonIconOnly?{icon:"search"}:null),e);return i("z-button",Object.assign({},s),t)}renderResults(){return this.showResults&&this.autocomplete&&this.searchString&&!(this.searchString.length<this.autocompleteMinChars)&&this.resultsItemsList?i("div",{class:"results-wrapper"},i("div",{class:"results"},this.renderResultsList())):null}renderResultsList(){var t,e;return this.preventSubmit&&!(null===(t=this.resultsItemsList)||void 0===t?void 0:t.length)?i("span",{class:"item item-no-results"},"Non abbiamo trovato risultati per ",i("b",null,this.searchString),i("br",null),i("br",null),"Cosa puoi fare?",i("ul",null,i("li",null,"Verificare di aver scritto bene"),i("li",null,"Provare a cercare un'altra parola"),i("li",null,"Provare a cercare qualcosa di più generico"))):i("z-list",{role:"listbox",id:`list-${this.htmlid}`,"aria-label":this.htmlAriaLabel||this.label},this.renderSearchHelper(!!(null===(e=this.resultsItemsList)||void 0===e?void 0:e.length)),this.renderItems(),this.renderShowAllResults())}renderItems(){var t;if(!(null===(t=this.resultsItemsList)||void 0===t?void 0:t.length))return[];const e=this.getGroupedItems(this.resultsItemsList),s=[];let l=0;return Object.values(e).forEach(((t,e,r)=>{if(this.checkResultsCount(l)){const a=[];t.items.forEach(((t,s,i)=>{this.checkResultsCount(l)&&a.push(this.renderItem(t,s,!(e===r.length-1&&s===i.length-1))),l++})),a.length&&s.push(i("z-list-group",{"divider-type":h.ELEMENT},this.renderItemCategory(t),a))}})),s}handleArrowsNavigation(t){const e=t.target;if(![c.ARROW_DOWN,c.ARROW_UP].includes(t.key))return void t.preventDefault();if(!this.items.length){const t=this.element.shadowRoot.querySelector("z-list");if(!t)return;this.items=Array.from(t.querySelectorAll(".list-element"))}this.items.forEach((t=>{t.classList.toggle("focused",!1)}));const s=this.items.indexOf(e);if(t.key===c.ARROW_DOWN){t.preventDefault();const e=s+1;e<this.items.length&&(this.items[e].focus(),this.items[e].classList.add("focused"))}if(t.key===c.ARROW_UP){t.preventDefault();const e=s-1;e<0&&(this.element.shadowRoot.querySelector("input").focus(),this.element.shadowRoot.querySelector("input").setSelectionRange(this.inputRef.value.length,this.inputRef.value.length)),e>=0&&(this.items[e].focus(),this.items[e].classList.add("focused"))}}renderItem(t,e,s){return i("z-list-element",{id:`list-item-${this.htmlid}-${e}`,tabIndex:0,role:"option",dividerType:s?h.ELEMENT:void 0,onKeyDown:t=>this.handleArrowsNavigation(t)},i("div",{class:"list-element",tabIndex:0,onClick:()=>this.emitSearchItemClick(t),onKeyDown:e=>m(e,(()=>this.emitSearchItemClick(t))),onMouseEnter:t=>{t.target.classList.add("hovered")},onMouseLeave:t=>{t.target.classList.toggle("hovered",!1)}},i("span",{class:"item ellipsis"},(null==t?void 0:t.icon)&&i("z-icon",{class:"item-icon",name:t.icon}),i("span",{class:"item-label",title:t.label,innerHTML:this.renderItemLabel(t.label)})),(null==t?void 0:t.tag)&&i("z-tag",{icon:t.tag.icon},this.isMobile?"":t.tag.text)),t.children&&t.children.length>0?i("z-list",null,i("div",{class:"children-node"},t.children.map(((t,e)=>this.renderItem(t,e,!1))))):null)}renderItemLabel(t){return this.searchString?t.replace(new RegExp(this.searchString.replace(/[.*+?^${}()|[\]\\]/g,"\\$&"),"gmi"),(t=>`<mark>${t}</mark>`)):t}renderItemCategory(t){return(null==t?void 0:t.category)?i("span",{class:"category-heading",slot:"header-title"},i("span",{class:"category"},t.category),(null==t?void 0:t.subcategory)&&i("span",{class:"subcategory"},t.subcategory)):null}renderSearchHelper(t=!0){return this.autocomplete&&!this.preventSubmit&&this.searchString?i("z-list-element",{role:"option",dividerType:t?h.ELEMENT:void 0,id:`list-item-${this.htmlid}-search`,onKeyDown:t=>this.handleArrowsNavigation(t)},i("div",{tabindex:0,onClick:()=>this.emitSearchSubmit(),onKeyDown:t=>m(t,(()=>this.emitSearchSubmit())),class:"list-element"},i("span",{class:"item item-search"},i("z-icon",{class:"search-icon",name:"left-magnifying-glass"}),i("span",{class:"item-label",innerHTML:this.searchHelperLabel.replace("{searchString}",`<mark>${this.searchString}</mark>`)})))):null}renderShowAllResults(){var t,e;return!this.currResultsCount||!this.searchString||!(null===(t=this.resultsItemsList)||void 0===t?void 0:t.length)||this.currResultsCount>=(null===(e=this.resultsItemsList)||void 0===e?void 0:e.length)?null:i("z-list-element",{role:"option",tabindex:0,clickable:!0,id:`list-item-${this.htmlid}-show-all`,onClickItem:()=>this.currResultsCount=0,color:"color-primary01"},i("div",{class:"item-show-all"},"Vedi tutti i risultati"))}render(){return i(l,{key:"6ccdb51d39d0e211de9b79cbbed90f4597b2c25b",onFocus:()=>this.showResults=!0,onClick:t=>this.handleOutsideClick(t),class:{"has-submit":this.showSearchButton,"has-results":this.autocomplete}},i("div",{key:"90e51c50fe4b06429aad4d222cb26e5789183c30",class:"input-container"},this.renderInput(),this.renderResults()),this.renderButton())}get element(){return this}static get watchers(){return{resultsItems:[{watchItems:0}],resultsCount:[{watchResultsCount:0}],value:[{watchValue:0}],searchString:[{watchSearchString:0}],showResults:[{watchShowResults:0}]}}static get style(){return':host{--z-searchbar-tag-text-color:var(--color-primary03);--z-searchbar-tag-bg:var(--color-hover-primary);--z-searchbar-item-height:44px;z-index:15;display:flex;column-gap:calc(var(--space-unit) * 2);font-family:var(--font-family-sans);font-weight:var(--font-rg)}:host,*{box-sizing:border-box}:host::part(list-item-container){display:block;min-height:unset;padding:0}.input-container{position:relative;display:flex;width:100%;flex-direction:column}.results-wrapper{position:absolute;top:calc(100% - 1px);left:0;width:100%;padding:calc(var(--space-unit) / 4);border:var(--border-size-small) solid var(--color-surface03);border-top:none;background:var(--color-surface01)}.results{overflow:auto;max-height:var(--z-searchbar-results-height, 540px);padding:calc(var(--space-unit) / 2) calc(var(--space-unit) * 1.5)}.results::-webkit-scrollbar{width:6px;background:linear-gradient(to right, transparent 0 1px, var(--gray200) 1px 5px, transparent 5px 6px)}.results::-webkit-scrollbar-thumb{background-color:var(--color-primary01)}.results::-webkit-scrollbar-thumb:hover{background-color:var(--color-hover-primary)}@supports not selector(.results::-webkit-scrollbar-track){.results{scrollbar-color:var(--color-primary01) transparent}}.results .category-heading{display:block;font-size:var(--font-size-2);font-weight:var(--font-rg);line-height:var(--font-size-3)}.results .category-heading>*{display:block}.results .category-heading>.category{color:var(--color-text05);font-style:italic}.results .category-heading>.subcategory{margin-top:var(--space-unit);color:var(--color-default-text);text-transform:uppercase}.results z-list-element{position:relative;display:block}z-list-element>.item-search{padding:var(--space-unit) 0}z-list z-list-element::before{position:absolute;z-index:100;top:5px;left:-20px;width:8px;height:1em;border-bottom:1px solid var(--color-disabled01-icon);border-left:1px solid var(--color-disabled01-icon);content:"";cursor:pointer}z-list z-list-element::after{position:absolute;z-index:100;top:5px;left:-20px;width:8px;height:100%;border-left:1px solid var(--color-disabled01-icon);content:"";cursor:pointer}z-list z-list-element:last-child::after{display:none}z-list>z-list-element::before,z-list>z-list-element::after,z-list>z-list-group>z-list-element::before,z-list>z-list-group>z-list-element::after{display:none}z-list>div.children-node{padding-left:calc(var(--space-unit) * 3)}.results z-list-element>.list-element{display:flex;justify-content:space-between;padding:calc(var(--space-unit) * 1.25) 0;cursor:pointer}.results z-list-element>.list-element:focus-visible{box-shadow:var(--shadow-focus-primary);outline:none}.results z-list-element>.list-element .item.ellipsis{overflow:hidden}.results z-list-element .list-element::after{position:absolute;top:0;right:0;display:block;width:100%;height:44px;content:"";transform:translateX(-100%)}.results z-list-element .list-element.focused.hovered::after{padding-left:6px}.results z-list-element>.list-element:hover,.results z-list-element>.list-element:hover::after{background-color:var(--color-background);cursor:pointer}.results z-list-element>.list-element>z-tag{border:1px solid var(--gray800);font-size:var(--font-size-1);font-weight:var(--font-sb);--z-tag-bg:var(--z-searchbar-tag-bg);--z-tag-text-color:var(--z-searchbar-tag-text-color)}.results .item{--z-icon-height:12px;--z-icon-width:12px;display:flex;flex-flow:row nowrap;align-items:center;justify-content:flex-start;color:var(--color-default-text);column-gap:calc(var(--space-unit) * 1.5);fill:var(--color-default-icon);font-size:var(--font-size-2);line-height:var(--font-size-6)}.results .item.ellipsis>.item-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.results .item>.item-label mark{background:var(--color-primary03)}.results .item.item-search{--z-icon-height:16px;--z-icon-width:16px}.results .item-show-all{text-align:center}.results .item-no-results{display:block;font-size:var(--font-size-2);font-style:italic;line-height:var(--font-size-5)}.results .item-no-results>ul{padding-left:calc(var(--space-unit) * 2);margin:var(--space-unit)}@media (min-width: 768px){.results .category-heading{font-size:var(--font-size-3);line-height:var(--font-size-6)}.results .item{font-size:var(--font-size-3);line-height:var(--font-size-6)}.results .item.item-search{--z-icon-height:18px;--z-icon-width:18px}.results .item.ellipsis>.item-label{height:1.5rem}.results z-list-element>.list-element>z-tag{min-width:max-content}}@media (min-width: 1152px){.results .item{cursor:pointer}.results .item-no-results{cursor:default;font-size:var(--font-size-3);line-height:var(--font-size-6)}}:host([size="small"]) .results :is(.item,.category-heading),:host([size="x-small"]) .results :is(.item,.category-heading){font-size:var(--font-size-2)}:host([size="small"]) .results .item:not(.has-category),:host([size="x-small"]) .results .item:not(.has-category){--z-icon-height:16px;--z-icon-width:16px}:host([size="small"]) z-list-element>.list-element,:host([size="small"]) z-list-element>.item-search{padding:calc(var(--space-unit) * 0.75) 0}:host([size="x-small"]) z-list-element>.list-element,:host([size="x-small"]) z-list-element>.item-search{padding:calc(var(--space-unit) / 2) 0}:host([size="small"]) z-list-element .list-element::after{height:36px}:host([size="x-small"]) z-list-element .list-element::after{height:32px}.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}'}},[1,"z-searchbar",{htmlid:[513],preventSubmit:[4,"prevent-submit"],label:[1],htmlAriaLabel:[1,"html-aria-label"],value:[1],placeholder:[1],autocomplete:[4],autocompleteMinChars:[2,"autocomplete-min-chars"],resultsCount:[2,"results-count"],searchHelperLabel:[1,"search-helper-label"],resultsItems:[1,"results-items"],sortResultsItems:[4,"sort-results-items"],showSearchButton:[4,"show-search-button"],searchButtonIconOnly:[4,"search-button-icon-only"],size:[1],variant:[1],searchString:[32],currResultsCount:[32],showResults:[32],isMobile:[32],selectedItem:[32]},[[4,"click","handleOutsideClick"]],{resultsItems:[{watchItems:0}],resultsCount:[{watchResultsCount:0}],value:[{watchValue:0}],searchString:[{watchSearchString:0}],showResults:[{watchShowResults:0}]}]);function S(){"undefined"!=typeof customElements&&["z-searchbar","z-button","z-divider","z-icon","z-input","z-input-message","z-list","z-list-element","z-list-group","z-tag"].forEach((t=>{switch(t){case"z-searchbar":customElements.get(r(t))||customElements.define(r(t),k);break;case"z-button":customElements.get(r(t))||p();break;case"z-divider":customElements.get(r(t))||v();break;case"z-icon":customElements.get(r(t))||b();break;case"z-input":customElements.get(r(t))||g();break;case"z-input-message":customElements.get(r(t))||z();break;case"z-list":customElements.get(r(t))||f();break;case"z-list-element":customElements.get(r(t))||x();break;case"z-list-group":customElements.get(r(t))||w();break;case"z-tag":customElements.get(r(t))||y()}}))}export{k as Z,S as d}

package/dist/components/index14.js

@@ -1,53 +1 @@
-import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { i as ListSize, m as ListType } from './index2.js';
-
-const stylesCss = ":host{display:flex;flex-direction:column;font-family:var(--font-family-sans);font-weight:var(--font-rg)}";
-const ZListStyle0 = stylesCss;
-
-const ZList = /*@__PURE__*/ proxyCustomElement(class ZList extends HTMLElement {
-    constructor() {
-        super();
-        this.__registerHost();
-        this.__attachShadow();
-        this.size = ListSize.MEDIUM;
-        this.listType = ListType.NONE;
-        this.role = "list";
-    }
-    setChildrenSizeType() {
-        const children = this.host.children;
-        for (let i = 0; i < children.length; i++) {
-            children[i].setAttribute("size", this.size);
-            children[i].setAttribute("list-type", this.listType);
-            children[i].setAttribute("list-element-position", (i + 1).toString());
-        }
-    }
-    componentDidLoad() {
-        this.setChildrenSizeType();
-    }
-    render() {
-        return (h(Host, { key: '004f6ec917edd3b8a3f0f50809543a7cb357daba' }, h("slot", { key: '6f55271632a504df1e044da28be26cf2e5e7fb1b' })));
-    }
-    get host() { return this; }
-    static get style() { return ZListStyle0; }
-}, [1, "z-list", {
-        "size": [513],
-        "listType": [513, "list-type"],
-        "role": [513]
-    }]);
-function defineCustomElement() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["z-list"];
-    components.forEach(tagName => { switch (tagName) {
-        case "z-list":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, ZList);
-            }
-            break;
-    } });
-}
-
-export { ZList as Z, defineCustomElement as d };
-
-//# sourceMappingURL=index14.js.map
+import{proxyCustomElement as t,HTMLElement as e,h as a,Host as i,transformTag as s}from"@stencil/core/internal/client";import{d as n}from"./index3.js";const r=t(class extends e{constructor(t){super(),!1!==t&&this.__registerHost()}render(){return a(i,{key:"79058b7bd9a1c161e6bc55fc0a737e6f2f3c8a06",class:{expandable:this.expandable&&!!this.icon,"has-text":!!this.host.textContent.trim()}},this.icon&&a("z-icon",{key:"ac25c974cbb40a04bb83adabe53011bb4dd89dd3",name:this.icon}),a("div",{key:"4150a1f6301110f690a595c5e2b5169d90aa4802"},a("slot",{key:"d3f2e88bf2635ec142a71c5752f264cd9e0077f7"})))}get host(){return this}static get style(){return".sc-z-tag-h{--z-icon-width:14px;--z-icon-height:14px;display:flex;width:fit-content;max-width:inherit;height:fit-content;max-height:inherit;align-items:flex-start;padding:calc(var(--space-unit) / 2);background-color:var(--z-tag-bg, var(--color-hover-primary));border-radius:var(--border-radius);color:var(--z-tag-text-color, var(--color-text-inverse));fill:currentcolor;font-family:var(--font-family-sans);font-size:var(--font-size-1);font-weight:var(--font-sb);letter-spacing:0.32px;line-height:14px;text-transform:uppercase}.sc-z-tag-h>z-icon.sc-z-tag{margin-right:0;transition:margin-right 0.3s ease-out}.has-text.sc-z-tag-h:not(.expandable)>z-icon.sc-z-tag{margin-right:var(--space-unit)}.has-text.expandable.sc-z-tag-h:hover>z-icon.sc-z-tag{margin-right:var(--space-unit)}.expandable.sc-z-tag-h>div.sc-z-tag{overflow:hidden;max-width:0;max-height:0}.expandable.sc-z-tag-h:hover>div.sc-z-tag{max-width:100%;max-height:100%}"}},[262,"z-tag",{icon:[1],expandable:[4]}]);function c(){"undefined"!=typeof customElements&&["z-tag","z-icon"].forEach((t=>{switch(t){case"z-tag":customElements.get(s(t))||customElements.define(s(t),r);break;case"z-icon":customElements.get(s(t))||n()}}))}export{r as Z,c as d}