npm - @zanichelli/albe-web-components - Versions diffs - 14.6.1 → 15.0.0-rc2 - Mend

@zanichelli/albe-web-components 14.6.1 → 15.0.0-rc2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1390) hide show

package/dist/components/index10.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"index10.js","mappings":"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","names":[],"sources":["src/components/z-input/styles-general.css?tag=z-input&encapsulation=scoped","src/components/z-input/styles-text.css?tag=z-input&encapsulation=scoped","src/components/z-input/styles-textarea.css?tag=z-input&encapsulation=scoped","src/components/z-input/styles-checkbox-radio.css?tag=z-input&encapsulation=scoped","src/components/z-input/index.tsx"],"sourcesContent":[":host {\n display: inline-block;\n width: inherit;\n}\n\ninput::-ms-clear,\ninput::-ms-reveal {\n display: none;\n}\n\n/* GENERAL /\n:host input::-ms-clear,\n:host input::-ms-reveal {\n display: none;\n}\n\ninput,\ntextarea,\n.textarea-wrapper {\n box-sizing: border-box;\n border: var(--border-size-small) solid var(--gray700);\n background: var(--color-input-field01);\n border-radius: var(--border-radius-small);\n color: var(--gray900);\n fill: var(--gray900);\n font-family: var(--font-family-sans);\n font-size: var(--font-size-3);\n font-weight: var(--font-rg);\n outline: none;\n}\n\n:host([size=\"small\"]) input,\n:host([size=\"small\"]) textarea,\n:host([size=\"small\"]) .textarea-wrapper,\n:host([size=\"x-small\"]) input,\n:host([size=\"x-small\"]) textarea,\n:host([size=\"x-small\"]) .textarea-wrapper {\n font-size: var(--font-size-2);\n}\n\n:host.cursor-select input {\n cursor: pointer;\n}\n\n/ FOCUS /\n:host:not(.active-select) input:focus:focus-visible,\n:host([readonly=\"false\"]) .textarea-wrapper:focus-within {\n box-shadow: var(--shadow-focus-primary);\n}\n\ninput:focus:focus-visible,\ntextarea:focus:focus-visible {\n color: var(--color-input-field02);\n}\n\n:host.active-select input {\n border: var(--border-size-small) solid var(--color-primary01);\n}\n\n:host.cursor-select input:focus:focus-visible {\n box-shadow: var(--shadow-focus-primary);\n}\n\n:host input[readonly]:focus:focus-visible {\n box-shadow: none;\n}\n\n/ FILLED /\n.filled {\n border-color: var(--color-surface05);\n}\n\n/ STATUSES (success, warning, error) /\n.input-success {\n border-color: var(--color-success01);\n background: var(--color-success-inverse);\n fill: var(--color-success01);\n}\n\n.input-error {\n border-color: var(--color-error01);\n background: var(--color-error-inverse);\n fill: var(--color-error01);\n}\n\n.input-warning {\n border-color: var(--color-warning01);\n background: var(--color-warning-inverse);\n fill: var(--color-warning01);\n}\n\n/ HOVER /\ninput:not([readonly]):hover,\n.textarea-wrapper:hover {\n outline: var(--border-size-medium) solid var(--gray700);\n outline-offset: -2px;\n}\n\n/ READONLY /\n:host:not(.active-select) input[readonly],\n.readonly {\n border-color: var(--color-disabled01);\n fill: var(--color-disabled01);\n pointer-events: none;\n}\n\n/ DISABLED /\n:host([disabled]:not([disabled=\"false\"])) input,\n:host([disabled]:not([disabled=\"false\"])) .textarea-wrapper,\n:host([disabled]:not([disabled=\"false\"])) z-icon {\n border-color: var(--color-disabled01);\n box-shadow: none;\n color: var(--color-disabled03);\n fill: var(--color-disabled01);\n pointer-events: none;\n}\n\n:host([disabled]:not([disabled=\"false\"])) input:hover {\n border-width: var(--border-size-small);\n}\n\n/ PLACEHOLDER /\ninput::placeholder,\ntextarea::placeholder {\n color: var(--color-text05);\n}\n\n::-webkit-textarea-placeholder {\n color: var(--color-text05);\n}\n\n:-ms-textarea-placeholder {\n color: var(--color-text05);\n}\n\n::placeholder {\n color: var(--color-text05);\n}\n\n/ LABEL /\nlabel.input-label {\n display: block;\n padding-bottom: var(--space-unit);\n color: var(--color-default-text);\n font-family: var(--font-family-sans);\n font-size: var(--font-size-1);\n font-weight: var(--font-sb);\n text-align: left;\n text-transform: uppercase;\n}\n\n:host([disabled]:not([disabled=\"false\"])) label.input-label {\n color: var(--color-disabled03);\n}\n",".text-wrapper > div {\n position: relative;\n z-index: 1;\n fill: var(--gray900);\n}\n\n.text-wrapper > div > input {\n width: 100%;\n height: calc(var(--space-unit) 5.5);\n box-sizing: border-box;\n padding: 0 calc(var(--space-unit) * 1.5);\n margin: 0;\n}\n\n:host([size=\"small\"]) .text-wrapper > div > input {\n height: calc(var(--space-unit) * 4.5);\n}\n\n:host([size=\"x-small\"]) .text-wrapper > div > input {\n height: calc(var(--space-unit) * 4);\n}\n\n.text-wrapper > div > input.has-icon,\n.text-wrapper > div > input.has-clear-icon {\n padding-right: calc(var(--space-unit) * 5.25);\n}\n\n.text-wrapper > div > input.has-icon.has-clear-icon {\n padding-right: calc(var(--space-unit) * 8);\n}\n\n.text-wrapper .icons-wrapper {\n position: absolute;\n z-index: 2;\n top: 50%;\n right: calc(var(--space-unit) * 1.5);\n display: flex;\n pointer-events: none;\n transform: translateY(-50%);\n}\n\n.text-wrapper .icons-wrapper > button.icon-button {\n padding: 0;\n border: 0;\n background: none;\n color: inherit;\n font: inherit;\n pointer-events: initial;\n}\n\n.text-wrapper .icons-wrapper > button.icon-button + button.icon-button {\n margin-left: calc(var(--space-unit) * 0.5);\n}\n\n.text-wrapper .icons-wrapper > button.icon-button.hidden {\n display: none;\n}\n\n.text-wrapper .icons-wrapper > button.icon-button.reset-icon,\n.text-wrapper .icons-wrapper > button.icon-button.toggle-password-icon {\n cursor: pointer;\n}\n\n.text-wrapper .icons-wrapper > button.icon-button > z-icon {\n --z-icon-width: 18px;\n --z-icon-height: 18px;\n\n display: block;\n}\n\n.text-wrapper .icons-wrapper > button.icon-button > z-icon.small,\n.text-wrapper .icons-wrapper > button.icon-button > z-icon.x-small {\n --z-icon-width: 16px;\n --z-icon-height: 16px;\n}\n\n/* stylelint-disable property-no-vendor-prefix /\n.text-wrapper > div > input:-webkit-autofill {\n -webkit-box-shadow: 0 0 0 1000px #fff inset;\n -webkit-text-fill-color: currentcolor;\n}\n",".textarea-wrapper {\n padding: calc(var(--space-unit) 1.5);\n\n /* Firefox scrollbar /\n scrollbar-color: var(--color-primary01) transparent;\n}\n\ntextarea::-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\ntextarea::-webkit-scrollbar-track {\n background-color: transparent;\n}\n\ntextarea::-webkit-scrollbar-thumb {\n width: 10px;\n background-color: var(--color-primary01);\n border-radius: var(--border-radius);\n}\n\ntextarea::-webkit-scrollbar-thumb:hover {\n background-color: var(--color-hover-primary);\n}\n\ntextarea {\n width: 100%;\n min-height: 132px;\n padding: 0;\n border: none;\n margin: 0;\n resize: none;\n}\n",".radio-wrapper,\n.checkbox-wrapper {\n position: relative;\n display: inline-flex;\n flex-direction: row;\n align-items: center;\n color: var(--color-default-text);\n fill: var(--color-primary01);\n font-family: var(--font-family-sans);\n}\n\n.radio-wrapper:hover,\n.checkbox-wrapper:hover {\n color: var(--color-hover-primary);\n fill: currentcolor;\n}\n\n.radio-wrapper > input,\n.checkbox-wrapper > input {\n position: absolute;\n z-index: -1;\n opacity: 0;\n pointer-events: none;\n}\n\n.radio-wrapper .radio-label,\n.checkbox-wrapper .checkbox-label {\n display: inline-flex;\n align-items: center;\n margin: 0;\n color: inherit;\n font-family: inherit;\n font-size: inherit;\n font-weight: inherit;\n line-height: 1;\n text-transform: inherit;\n}\n\n.radio-wrapper input:not(:disabled) + .radio-label,\n.checkbox-wrapper input:not(:disabled) + .checkbox-label {\n cursor: pointer;\n}\n\n.radio-wrapper .radio-label z-icon,\n.checkbox-wrapper .checkbox-label z-icon {\n cursor: pointer;\n fill: inherit;\n}\n\n:host([size=\"small\"]) .radio-wrapper .radio-label z-icon,\n:host([size=\"small\"]) .checkbox-wrapper .checkbox-label z-icon {\n --z-icon-width: 16px;\n --z-icon-height: 16px;\n}\n\n:host([size=\"small\"]) .radio-wrapper .radio-label,\n:host([size=\"small\"]) .checkbox-wrapper .checkbox-label {\n font-size: var(--font-size-2);\n}\n\n:host([size=\"x-small\"]) .radio-wrapper .radio-label z-icon,\n:host([size=\"x-small\"]) .checkbox-wrapper .checkbox-label z-icon {\n --z-icon-width: 14px;\n --z-icon-height: 14px;\n}\n\n:host([size=\"x-small\"]) .radio-wrapper .radio-label,\n:host([size=\"x-small\"]) .checkbox-wrapper .checkbox-label {\n font-size: var(--font-size-1);\n}\n\n.radio-wrapper .radio-label.after,\n.checkbox-wrapper .checkbox-label.after {\n flex-direction: row;\n}\n\n.radio-wrapper .radio-label.before,\n.checkbox-wrapper .checkbox-label.before {\n flex-direction: row-reverse;\n}\n\n.radio-wrapper .radio-label.after > span,\n.checkbox-wrapper .checkbox-label.after > span {\n margin-left: var(--space-unit);\n}\n\n.radio-wrapper .radio-label.before > span,\n.checkbox-wrapper .checkbox-label.before > span {\n margin-right: var(--space-unit);\n}\n\n:host([size=\"small\"]) .radio-wrapper .radio-label.after > span,\n:host([size=\"small\"]) .checkbox-wrapper .checkbox-label.after > span,\n:host([size=\"x-small\"]) .radio-wrapper .radio-label.after > span,\n:host([size=\"x-small\"]) .checkbox-wrapper .checkbox-label.after > span {\n margin-left: calc(var(--space-unit) 0.5);\n}\n\n:host([size=\"small\"]) .radio-wrapper .radio-label.before > span,\n:host([size=\"small\"]) .checkbox-wrapper .checkbox-label.before > span,\n:host([size=\"x-small\"]) .radio-wrapper .radio-label.before > span,\n:host([size=\"x-small\"]) .checkbox-wrapper .checkbox-label.before > span {\n margin-right: calc(var(--space-unit) * 0.5);\n}\n\n/* focus /\n.radio-wrapper > input:focus:focus-visible + .radio-label > z-icon,\n.checkbox-wrapper > input:focus:focus-visible + .checkbox-label > z-icon {\n border-radius: var(--border-radius-small);\n box-shadow: var(--shadow-focus-primary);\n}\n\n/ disabled /\n.radio-wrapper > input:disabled + .radio-label,\n.checkbox-wrapper > input:disabled + .checkbox-label {\n color: var(--color-disabled03);\n}\n\n.radio-wrapper > input:disabled + .radio-label > z-icon,\n.checkbox-wrapper > input:disabled + .checkbox-label > z-icon {\n cursor: default;\n fill: var(--color-disabled01);\n}\n","import {Component, Element, Event, EventEmitter, Listen, Method, Prop, State, h} from \"@stencil/core\";\nimport {Host, JSXBase} from \"@stencil/core/internal\";\nimport {ControlSize, InputStatus, InputType, LabelPosition} from \"../../beans\";\nimport {boolean, randomId} from \"../../utils/utils\";\n\n@Component({\n tag: \"z-input\",\n styleUrls: [\"styles-general.css\", \"styles-text.css\", \"styles-textarea.css\", \"styles-checkbox-radio.css\"],\n shadow: false,\n scoped: true,\n})\nexport class ZInput {\n @Element() hostElement: HTMLZInputElement;\n\n /* the id of the input element /\n @Prop()\n htmlid = `id-${randomId()}`;\n\n /* input types /\n @Prop()\n type: InputType;\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 aria-expaded: available for text, password, number, email /\n @Prop()\n ariaExpanded = \"\";\n\n /* the input aria-controls (optional): available for text, password, number, email /\n @Prop()\n ariaControls?: string;\n\n /* the input aria-autocomplete (optional): available for text, password, number, email /\n @Prop()\n ariaAutocomplete?: string;\n\n /* the input aria-activedescendant (optional): available for text, password, number, email /\n @Prop()\n ariaActivedescendant?: string;\n\n /* the input value /\n @Prop({mutable: true})\n value?: string;\n\n /* the input is disabled /\n @Prop({reflect: true})\n disabled?: boolean = false;\n\n /* the input is readonly /\n @Prop()\n readonly?: boolean = false;\n\n /* the input is required (optional): available for text, password, number, email, textarea, checkbox /\n @Prop()\n required?: boolean = false;\n\n /* checked: available for checkbox, radio /\n @Prop({mutable: true})\n checked?: 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): available for text, password, number, email, textarea /\n @Prop()\n status?: InputStatus;\n\n /* input helper message (optional): available for text, password, number, email, textarea - if set to `false` message won't be displayed /\n @Prop()\n message?: string \| boolean = true;\n\n /* the input label position: available for checkbox, radio /\n @Prop()\n labelPosition?: LabelPosition = LabelPosition.RIGHT;\n\n /* the input has autocomplete option (optional): available for text, password, number, email /\n @Prop()\n autocomplete?: string;\n\n /* the input role /\n @Prop()\n role = \"\";\n\n /* render clear icon when typing (optional): available for text /\n @Prop()\n hasclearicon?: boolean = true;\n\n /* render icon (optional): available for text /\n @Prop()\n icon?: string;\n\n /* min number value (optional): available for number /\n @Prop()\n min?: number;\n\n /* Min length value (optional): available for text /\n @Prop()\n minlength?: number;\n\n /* max number value (optional): available for number /\n @Prop()\n max?: number;\n\n /* Max length value (optional): available for text /\n @Prop()\n maxlength?: number;\n\n /* step number value (optional): available for number /\n @Prop()\n step?: number;\n\n /* pattern value (optional): available for tel, text, search, url, email, password/\n @Prop()\n pattern?: string;\n\n /* Available sizes: `big`, `small` and `x-small`. Defaults to `big`. /\n @Prop({reflect: true})\n size?: ControlSize = ControlSize.BIG;\n\n @State()\n isTyping = false;\n\n @State()\n passwordHidden = true;\n\n private timer;\n\n private typingtimeout = 300;\n\n private inputRef: HTMLInputElement;\n\n @Listen(\"inputCheck\", {target: \"document\"})\n inputCheckListener(e: CustomEvent): void {\n const data = e.detail;\n switch (this.type) {\n case InputType.RADIO:\n if (data.type === InputType.RADIO && data.name === this.name && data.id !== this.htmlid) {\n this.checked = false;\n }\n break;\n }\n }\n\n /* get checked status /\n @Method()\n async isChecked(): Promise<boolean> {\n switch (this.type) {\n case InputType.CHECKBOX:\n case InputType.RADIO:\n return this.checked;\n default:\n console.warn(\"`isChecked` method is only available for type `checkbox` and `radio`\");\n\n return false;\n }\n }\n\n /* Emitted on input value change, returns value, validity /\n @Event()\n inputChange: EventEmitter;\n\n private emitInputChange(value: string): void {\n if (!this.isTyping) {\n this.emitStartTyping();\n }\n\n let validity: ValidityState;\n if (this.type === InputType.TEXTAREA) {\n validity = this.getValidity(\"textarea\");\n } else {\n validity = this.getValidity(\"input\");\n }\n this.value = value;\n this.inputChange.emit({value, validity});\n\n clearTimeout(this.timer);\n this.timer = setTimeout(() => {\n this.emitStopTyping(this.value, validity);\n }, this.typingtimeout);\n }\n\n /* Emitted when user starts typing /\n @Event()\n startTyping: EventEmitter;\n\n private emitStartTyping(): void {\n this.isTyping = true;\n this.startTyping.emit();\n }\n\n /* Emitted when user stops typing, returns value, validity /\n @Event()\n stopTyping: EventEmitter;\n\n private emitStopTyping(value: string, validity: ValidityState): void {\n this.isTyping = false;\n this.stopTyping.emit({\n value: value,\n validity: validity,\n });\n }\n\n /* Emitted on checkbox check/uncheck, returns id, checked, type, name, value, validity /\n @Event()\n inputCheck: EventEmitter;\n\n private emitInputCheck(checked: boolean): void {\n this.inputCheck.emit({\n id: this.htmlid,\n checked: checked,\n type: this.type,\n name: this.name,\n value: this.value,\n validity: this.getValidity(\"input\"),\n });\n }\n\n /* Emitted on input focus /\n @Event()\n inputFocus: EventEmitter;\n\n private emitInputFocus(): void {\n this.inputFocus.emit({id: this.htmlid});\n }\n\n /* Emitted on input blur /\n @Event()\n inputBlur: EventEmitter;\n\n private emitInputBlur(): void {\n this.inputBlur.emit({id: this.htmlid});\n }\n\n private getValidity(type: string): ValidityState {\n const input = this.hostElement.querySelector(type) as HTMLInputElement;\n\n return input.validity;\n }\n\n / START text/password/email/number /\n\n private getTextAttributes(): JSXBase.InputHTMLAttributes<HTMLInputElement \| HTMLTextAreaElement> {\n return {\n id: this.htmlid,\n name: this.name,\n placeholder: this.placeholder,\n value: this.value,\n disabled: this.disabled,\n readonly: this.readonly,\n required: this.required,\n title: this.htmltitle,\n minlength: this.minlength,\n maxlength: this.maxlength,\n class: {\n [`input-${this.status}`]: !!this.status,\n filled: !!this.value,\n },\n autocomplete: this.autocomplete,\n onInput: (e: InputEvent) => this.emitInputChange((e.target as HTMLInputElement).value),\n };\n }\n\n private getNumberAttributes(type: InputType): JSXBase.InputHTMLAttributes<HTMLInputElement> {\n if (type != InputType.NUMBER) {\n return;\n }\n\n return {\n min: this.min,\n max: this.max,\n step: this.step,\n };\n }\n\n private getPatternAttribute(type: InputType): JSXBase.InputHTMLAttributes<HTMLInputElement> {\n if (\n type != InputType.PASSWORD &&\n type != InputType.TEXT &&\n type != InputType.TEL &&\n type != InputType.SEARCH &&\n type != InputType.URL &&\n type != InputType.EMAIL\n ) {\n return;\n }\n\n return {\n pattern: this.pattern,\n };\n }\n\n private getRoleAttribute(): JSXBase.InputHTMLAttributes<HTMLInputElement \| HTMLTextAreaElement> {\n return this.role ? {role: this.role} : {};\n }\n\n private getAriaAttrubutes(): Record<string, unknown> {\n const expanded = this.ariaExpanded ? {\"aria-expanded\": this.ariaExpanded} : {};\n const controls = this.ariaControls ? {\"aria-controls\": this.ariaControls} : {};\n const autocomplete = this.ariaAutocomplete ? {\"aria-autocomplete\": this.ariaAutocomplete} : {};\n const activedescendant = this.ariaActivedescendant ? {\"aria-activedescendant\": this.ariaActivedescendant} : {};\n\n return {\n ...expanded,\n ...controls,\n ...autocomplete,\n ...activedescendant,\n };\n }\n\n private getFocusBlurAttributes(): JSXBase.InputHTMLAttributes<HTMLInputElement \| HTMLTextAreaElement> {\n return {\n onFocus: () => this.emitInputFocus(),\n onBlur: () => this.emitInputBlur(),\n };\n }\n\n private renderInputText(type: InputType = InputType.TEXT): HTMLDivElement {\n const ariaLabel = this.ariaLabel ? {\"aria-label\": this.ariaLabel} : {};\n const attr = {\n ...this.getTextAttributes(),\n ...this.getNumberAttributes(type),\n ...this.getPatternAttribute(type),\n ...ariaLabel,\n ...this.getRoleAttribute(),\n ...this.getAriaAttrubutes(),\n ...this.getFocusBlurAttributes(),\n };\n if (this.icon \|\| type === InputType.PASSWORD) {\n Object.assign(attr.class, {\"has-icon\": true});\n }\n if (this.hasclearicon && type != InputType.NUMBER) {\n Object.assign(attr.class, {\"has-clear-icon\": true});\n }\n\n return (\n <div class=\"text-wrapper\">\n {this.renderLabel()}\n <div>\n <input\n type={type === InputType.PASSWORD && !this.passwordHidden ? InputType.TEXT : type}\n {...attr}\n ref={(el) => (this.inputRef = el)}\n />\n {this.renderIcons()}\n </div>\n {this.renderMessage()}\n </div>\n );\n }\n\n private renderLabel(): HTMLLabelElement {\n if (!this.label) {\n return;\n }\n\n return (\n <label\n class=\"input-label body-5-sb\"\n id={`${this.htmlid}_label`}\n htmlFor={this.htmlid}\n >\n {this.label}\n </label>\n );\n }\n\n private renderIcons(): HTMLSpanElement {\n return (\n <span class=\"icons-wrapper\">\n {this.renderResetIcon()}\n {this.renderIcon()}\n </span>\n );\n }\n\n private renderIcon(): HTMLButtonElement {\n if (this.type === InputType.PASSWORD) {\n return this.renderShowHidePassword();\n }\n\n if (!this.icon) {\n return;\n }\n\n return (\n <button\n type=\"button\"\n class=\"icon-button input-icon\"\n tabIndex={-1}\n aria-hidden=\"true\"\n >\n <z-icon\n name={this.icon}\n class={this.size}\n />\n </button>\n );\n }\n\n private renderResetIcon(): HTMLButtonElement {\n let hidden = false;\n if (!this.hasclearicon \|\| !this.value \|\| this.disabled \|\| this.readonly \|\| this.type == InputType.NUMBER) {\n hidden = true;\n }\n\n return (\n <button\n type=\"button\"\n class={`icon-button reset-icon ${hidden ? \"hidden\" : \"\"}`}\n aria-label=\"cancella il contenuto dell'input\"\n onClick={() => {\n this.inputRef.value = \"\";\n this.emitInputChange(\"\");\n }}\n >\n <z-icon\n name=\"multiply\"\n class={this.size}\n />\n </button>\n );\n }\n\n private renderShowHidePassword(): HTMLButtonElement {\n return (\n <button\n type=\"button\"\n class=\"icon-button toggle-password-icon\"\n disabled={this.disabled}\n aria-label={this.passwordHidden ? \"mostra password\" : \"nascondi password\"}\n onClick={() => (this.passwordHidden = !this.passwordHidden)}\n >\n <z-icon\n name={this.passwordHidden ? \"view-filled\" : \"view-off-filled\"}\n class={this.size}\n />\n </button>\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 / END text/password/email/number /\n\n / START textarea /\n\n private renderTextarea(): HTMLDivElement {\n const attributes = this.getTextAttributes();\n const ariaLabel = this.ariaLabel ? {\"aria-label\": this.ariaLabel} : {};\n\n return (\n <div class=\"text-wrapper\">\n {this.renderLabel()}\n <div\n class={{\n ...(attributes.class as Record<string, boolean>),\n \"textarea-wrapper\": true,\n \"readonly\": attributes.readonly as boolean,\n }}\n >\n <textarea\n {...attributes}\n {...ariaLabel}\n {...this.getRoleAttribute()}\n ></textarea>\n </div>\n {this.renderMessage()}\n </div>\n );\n }\n\n / END textarea /\n\n private handleCheck(ev: Event): void {\n this.checked = (ev.target as HTMLInputElement).checked;\n this.emitInputCheck(this.checked);\n }\n\n / START checkbox /\n private renderCheckbox(): HTMLDivElement {\n return (\n <div class=\"checkbox-wrapper\">\n <input\n id={this.htmlid}\n type=\"checkbox\"\n name={this.name}\n checked={this.checked}\n disabled={this.disabled}\n readonly={this.readonly}\n required={this.required}\n onChange={this.handleCheck.bind(this)}\n value={this.value}\n {...this.getRoleAttribute()}\n {...this.getFocusBlurAttributes()}\n />\n\n <label\n htmlFor={this.htmlid}\n class={{\n \"checkbox-label\": true,\n \"after\": this.labelPosition === LabelPosition.RIGHT,\n \"before\": this.labelPosition === LabelPosition.LEFT,\n }}\n >\n <z-icon\n name={this.checked ? \"checkbox-checked\" : \"checkbox\"}\n aria-hidden=\"true\"\n class={this.size}\n />\n {this.label && <span innerHTML={this.label}></span>}\n </label>\n </div>\n );\n }\n\n / END checkbox /\n\n / START radio /\n private renderRadio(): HTMLDivElement {\n return (\n <div class=\"radio-wrapper\">\n <input\n id={this.htmlid}\n type=\"radio\"\n name={this.name}\n checked={this.checked}\n disabled={this.disabled}\n readonly={this.readonly}\n onChange={this.handleCheck.bind(this)}\n value={this.value}\n {...this.getRoleAttribute()}\n {...this.getFocusBlurAttributes()}\n />\n\n <label\n htmlFor={this.htmlid}\n class={{\n \"radio-label\": true,\n \"after\": this.labelPosition === LabelPosition.RIGHT,\n \"before\": this.labelPosition === LabelPosition.LEFT,\n }}\n >\n <z-icon\n name={this.checked ? \"radio-button-checked\" : \"radio-button\"}\n aria-hidden=\"true\"\n class={this.size}\n />\n {this.label && <span innerHTML={this.label} />}\n </label>\n </div>\n );\n }\n / END radio */\n\n render(): HTMLInputElement \| HTMLDivElement {\n let input;\n switch (this.type) {\n case InputType.TEXTAREA:\n input = this.renderTextarea();\n break;\n case InputType.CHECKBOX:\n input = this.renderCheckbox();\n break;\n case InputType.RADIO:\n input = this.renderRadio();\n break;\n default:\n input = this.renderInputText(this.type);\n }\n\n return <Host>{input}</Host>;\n }\n}\n"],"version":3}
1	+ {"file":"index10.js","mappings":"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","names":[],"sources":["src/components/z-input/styles-general.css?tag=z-input&encapsulation=scoped","src/components/z-input/styles-text.css?tag=z-input&encapsulation=scoped","src/components/z-input/styles-textarea.css?tag=z-input&encapsulation=scoped","src/components/z-input/styles-checkbox-radio.css?tag=z-input&encapsulation=scoped","src/components/z-input/index.tsx"],"sourcesContent":[":host {\n display: inline-block;\n width: inherit;\n}\n\ninput::-ms-clear,\ninput::-ms-reveal {\n display: none;\n}\n\n/* GENERAL /\n:host input::-ms-clear,\n:host input::-ms-reveal {\n display: none;\n}\n\ninput,\ntextarea,\n.textarea-wrapper {\n box-sizing: border-box;\n border: var(--border-size-small) solid var(--gray700);\n background: var(--color-input-field01);\n border-radius: var(--border-radius-small);\n color: var(--gray900);\n fill: var(--gray900);\n font-family: var(--font-family-sans);\n font-size: var(--font-size-3);\n font-weight: var(--font-rg);\n outline: none;\n}\n\n:host([size=\"small\"]) input,\n:host([size=\"small\"]) textarea,\n:host([size=\"small\"]) .textarea-wrapper,\n:host([size=\"x-small\"]) input,\n:host([size=\"x-small\"]) textarea,\n:host([size=\"x-small\"]) .textarea-wrapper {\n font-size: var(--font-size-2);\n}\n\n:host.cursor-select input {\n cursor: pointer;\n}\n\n/ FOCUS /\n:host:not(.active-select) input:focus:focus-visible,\n:host([readonly=\"false\"]) .textarea-wrapper:focus-within {\n box-shadow: var(--shadow-focus-primary);\n}\n\ninput:focus:focus-visible,\ntextarea:focus:focus-visible {\n color: var(--color-input-field02);\n}\n\n:host.active-select input {\n border: var(--border-size-small) solid var(--color-primary01);\n}\n\n:host.cursor-select input:focus:focus-visible {\n box-shadow: var(--shadow-focus-primary);\n}\n\n:host input[readonly]:focus:focus-visible {\n box-shadow: none;\n}\n\n/ FILLED /\n.filled {\n border-color: var(--color-surface05);\n}\n\n/ STATUSES (success, warning, error) /\n.input-success {\n border-color: var(--color-success01);\n background: var(--color-success-inverse);\n fill: var(--color-success01);\n}\n\n.input-error {\n border-color: var(--color-error01);\n background: var(--color-error-inverse);\n fill: var(--color-error01);\n}\n\n.input-warning {\n border-color: var(--color-warning01);\n background: var(--color-warning-inverse);\n fill: var(--color-warning01);\n}\n\n/ HOVER /\ninput:not([readonly]):hover,\n.textarea-wrapper:hover {\n outline: var(--border-size-medium) solid var(--gray700);\n outline-offset: -2px;\n}\n\n/ READONLY /\n:host:not(.active-select) input[readonly],\n.readonly {\n border-color: var(--color-disabled01);\n fill: var(--color-disabled01);\n pointer-events: none;\n}\n\n/ DISABLED /\n:host([disabled]:not([disabled=\"false\"])) input,\n:host([disabled]:not([disabled=\"false\"])) .textarea-wrapper,\n:host([disabled]:not([disabled=\"false\"])) z-icon {\n border-color: var(--color-disabled01);\n box-shadow: none;\n color: var(--color-disabled03);\n fill: var(--color-disabled01);\n pointer-events: none;\n}\n\n:host([disabled]:not([disabled=\"false\"])) input:hover {\n border-width: var(--border-size-small);\n}\n\n/ PLACEHOLDER /\ninput::placeholder,\ntextarea::placeholder {\n color: var(--color-text05);\n}\n\n::-webkit-textarea-placeholder {\n color: var(--color-text05);\n}\n\n:-ms-textarea-placeholder {\n color: var(--color-text05);\n}\n\n::placeholder {\n color: var(--color-text05);\n}\n\n/ LABEL /\nlabel.input-label {\n display: block;\n padding-bottom: var(--space-unit);\n color: var(--color-default-text);\n font-family: var(--font-family-sans);\n font-size: var(--font-size-1);\n font-weight: var(--font-sb);\n text-align: left;\n text-transform: uppercase;\n}\n\n:host([disabled]:not([disabled=\"false\"])) label.input-label {\n color: var(--color-disabled03);\n}\n",".text-wrapper > div {\n position: relative;\n z-index: 1;\n fill: var(--gray900);\n}\n\n.text-wrapper > div > input {\n width: 100%;\n height: calc(var(--space-unit) 5.5);\n box-sizing: border-box;\n padding: 0 calc(var(--space-unit) * 1.5);\n margin: 0;\n}\n\n:host([size=\"small\"]) .text-wrapper > div > input {\n height: calc(var(--space-unit) * 4.5);\n}\n\n:host([size=\"x-small\"]) .text-wrapper > div > input {\n height: calc(var(--space-unit) * 4);\n}\n\n.text-wrapper > div > input.has-icon,\n.text-wrapper > div > input.has-clear-icon {\n padding-right: calc(var(--space-unit) * 5.25);\n}\n\n.text-wrapper > div > input.has-icon.has-clear-icon {\n padding-right: calc(var(--space-unit) * 8);\n}\n\n.text-wrapper .icons-wrapper {\n position: absolute;\n z-index: 2;\n top: 50%;\n right: calc(var(--space-unit) * 1.5);\n display: flex;\n pointer-events: none;\n transform: translateY(-50%);\n}\n\n.text-wrapper .icons-wrapper > button.icon-button {\n padding: 0;\n border: 0;\n background: none;\n color: inherit;\n font: inherit;\n pointer-events: initial;\n}\n\n.text-wrapper .icons-wrapper > button.icon-button + button.icon-button {\n margin-left: calc(var(--space-unit) * 0.5);\n}\n\n.text-wrapper .icons-wrapper > button.icon-button.hidden {\n display: none;\n}\n\n.text-wrapper .icons-wrapper > button.icon-button.reset-icon,\n.text-wrapper .icons-wrapper > button.icon-button.toggle-password-icon {\n cursor: pointer;\n}\n\n.text-wrapper .icons-wrapper > button.icon-button > z-icon {\n --z-icon-width: 18px;\n --z-icon-height: 18px;\n\n display: block;\n}\n\n.text-wrapper .icons-wrapper > button.icon-button > z-icon.small,\n.text-wrapper .icons-wrapper > button.icon-button > z-icon.x-small {\n --z-icon-width: 16px;\n --z-icon-height: 16px;\n}\n\n/* stylelint-disable property-no-vendor-prefix /\n.text-wrapper > div > input:-webkit-autofill {\n -webkit-box-shadow: 0 0 0 1000px #fff inset;\n -webkit-text-fill-color: currentcolor;\n}\n",".textarea-wrapper {\n padding: calc(var(--space-unit) 1.5);\n\n /* Firefox scrollbar /\n scrollbar-color: var(--color-primary01) transparent;\n}\n\ntextarea::-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\ntextarea::-webkit-scrollbar-track {\n background-color: transparent;\n}\n\ntextarea::-webkit-scrollbar-thumb {\n width: 10px;\n background-color: var(--color-primary01);\n border-radius: var(--border-radius);\n}\n\ntextarea::-webkit-scrollbar-thumb:hover {\n background-color: var(--color-hover-primary);\n}\n\ntextarea {\n width: 100%;\n min-height: 132px;\n padding: 0;\n border: none;\n margin: 0;\n resize: none;\n}\n",".radio-wrapper,\n.checkbox-wrapper {\n position: relative;\n display: inline-flex;\n flex-direction: row;\n align-items: center;\n color: var(--color-default-text);\n fill: var(--color-primary01);\n font-family: var(--font-family-sans);\n}\n\n.radio-wrapper:hover,\n.checkbox-wrapper:hover {\n color: var(--color-hover-primary);\n fill: currentcolor;\n}\n\n.radio-wrapper > input,\n.checkbox-wrapper > input {\n position: absolute;\n z-index: -1;\n opacity: 0;\n pointer-events: none;\n}\n\n.radio-wrapper .radio-label,\n.checkbox-wrapper .checkbox-label {\n display: inline-flex;\n align-items: center;\n margin: 0;\n color: inherit;\n font-family: inherit;\n font-size: inherit;\n font-weight: inherit;\n line-height: 1;\n text-transform: inherit;\n}\n\n.radio-wrapper input:not(:disabled) + .radio-label,\n.checkbox-wrapper input:not(:disabled) + .checkbox-label {\n cursor: pointer;\n}\n\n.radio-wrapper .radio-label z-icon,\n.checkbox-wrapper .checkbox-label z-icon {\n cursor: pointer;\n fill: inherit;\n}\n\n:host([size=\"small\"]) .radio-wrapper .radio-label z-icon,\n:host([size=\"small\"]) .checkbox-wrapper .checkbox-label z-icon {\n --z-icon-width: 16px;\n --z-icon-height: 16px;\n}\n\n:host([size=\"small\"]) .radio-wrapper .radio-label,\n:host([size=\"small\"]) .checkbox-wrapper .checkbox-label {\n font-size: var(--font-size-2);\n}\n\n:host([size=\"x-small\"]) .radio-wrapper .radio-label z-icon,\n:host([size=\"x-small\"]) .checkbox-wrapper .checkbox-label z-icon {\n --z-icon-width: 14px;\n --z-icon-height: 14px;\n}\n\n:host([size=\"x-small\"]) .radio-wrapper .radio-label,\n:host([size=\"x-small\"]) .checkbox-wrapper .checkbox-label {\n font-size: var(--font-size-1);\n}\n\n.radio-wrapper .radio-label.after,\n.checkbox-wrapper .checkbox-label.after {\n flex-direction: row;\n}\n\n.radio-wrapper .radio-label.before,\n.checkbox-wrapper .checkbox-label.before {\n flex-direction: row-reverse;\n}\n\n.radio-wrapper .radio-label.after > span,\n.checkbox-wrapper .checkbox-label.after > span {\n margin-left: var(--space-unit);\n}\n\n.radio-wrapper .radio-label.before > span,\n.checkbox-wrapper .checkbox-label.before > span {\n margin-right: var(--space-unit);\n}\n\n:host([size=\"small\"]) .radio-wrapper .radio-label.after > span,\n:host([size=\"small\"]) .checkbox-wrapper .checkbox-label.after > span,\n:host([size=\"x-small\"]) .radio-wrapper .radio-label.after > span,\n:host([size=\"x-small\"]) .checkbox-wrapper .checkbox-label.after > span {\n margin-left: calc(var(--space-unit) 0.5);\n}\n\n:host([size=\"small\"]) .radio-wrapper .radio-label.before > span,\n:host([size=\"small\"]) .checkbox-wrapper .checkbox-label.before > span,\n:host([size=\"x-small\"]) .radio-wrapper .radio-label.before > span,\n:host([size=\"x-small\"]) .checkbox-wrapper .checkbox-label.before > span {\n margin-right: calc(var(--space-unit) * 0.5);\n}\n\n/* focus /\n.radio-wrapper > input:focus:focus-visible + .radio-label > z-icon,\n.checkbox-wrapper > input:focus:focus-visible + .checkbox-label > z-icon {\n border-radius: var(--border-radius-small);\n box-shadow: var(--shadow-focus-primary);\n}\n\n/ disabled /\n.radio-wrapper > input:disabled + .radio-label,\n.checkbox-wrapper > input:disabled + .checkbox-label {\n color: var(--color-disabled03);\n}\n\n.radio-wrapper > input:disabled + .radio-label > z-icon,\n.checkbox-wrapper > input:disabled + .checkbox-label > z-icon {\n cursor: default;\n fill: var(--color-disabled01);\n}\n","import {Component, Element, Event, EventEmitter, Listen, Method, Prop, State, h} from \"@stencil/core\";\nimport {Host, JSXBase} from \"@stencil/core/internal\";\nimport {ControlSize, InputStatus, InputType, LabelPosition} from \"../../beans\";\nimport {boolean, randomId} from \"../../utils/utils\";\n\n@Component({\n tag: \"z-input\",\n styleUrls: [\"styles-general.css\", \"styles-text.css\", \"styles-textarea.css\", \"styles-checkbox-radio.css\"],\n shadow: false,\n scoped: true,\n})\nexport class ZInput {\n @Element() hostElement: HTMLZInputElement;\n\n /* the id of the input element /\n @Prop()\n htmlid = `id-${randomId()}`;\n\n /* input types /\n @Prop()\n type: InputType;\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 aria-expaded: available for text, password, number, email /\n @Prop()\n ariaExpanded = \"\";\n\n /* the input aria-controls (optional): available for text, password, number, email /\n @Prop()\n ariaControls?: string;\n\n /* the input aria-autocomplete (optional): available for text, password, number, email /\n @Prop()\n ariaAutocomplete?: string;\n\n /* the input aria-activedescendant (optional): available for text, password, number, email /\n @Prop()\n ariaActivedescendant?: string;\n\n /* the input value /\n @Prop({mutable: true})\n value?: string;\n\n /* the input is disabled /\n @Prop({reflect: true})\n disabled?: boolean = false;\n\n /* the input is readonly /\n @Prop()\n readonly?: boolean = false;\n\n /* the input is required (optional): available for text, password, number, email, textarea, checkbox /\n @Prop()\n required?: boolean = false;\n\n /* checked: available for checkbox, radio /\n @Prop({mutable: true})\n checked?: 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): available for text, password, number, email, textarea /\n @Prop()\n status?: InputStatus;\n\n /* input helper message (optional): available for text, password, number, email, textarea - if set to `false` message won't be displayed /\n @Prop()\n message?: string \| boolean = true;\n\n /* the input label position: available for checkbox, radio /\n @Prop()\n labelPosition?: LabelPosition = LabelPosition.RIGHT;\n\n /* the input has autocomplete option (optional): available for text, password, number, email /\n @Prop()\n autocomplete?: string;\n\n /* the input role /\n @Prop()\n role = \"\";\n\n /* render clear icon when typing (optional): available for text /\n @Prop()\n hasclearicon?: boolean = true;\n\n /* render icon (optional): available for text /\n @Prop()\n icon?: string;\n\n /* min number value (optional): available for number /\n @Prop()\n min?: number;\n\n /* Min length value (optional): available for text /\n @Prop()\n minlength?: number;\n\n /* max number value (optional): available for number /\n @Prop()\n max?: number;\n\n /* Max length value (optional): available for text /\n @Prop()\n maxlength?: number;\n\n /* step number value (optional): available for number /\n @Prop()\n step?: number;\n\n /* pattern value (optional): available for tel, text, search, url, email, password/\n @Prop()\n pattern?: string;\n\n /* Available sizes: `big`, `small` and `x-small`. Defaults to `big`. /\n @Prop({reflect: true})\n size?: ControlSize = ControlSize.BIG;\n\n @State()\n isTyping = false;\n\n @State()\n passwordHidden = true;\n\n private timer;\n\n private typingtimeout = 300;\n\n private inputRef: HTMLInputElement;\n\n @Listen(\"inputCheck\", {target: \"document\"})\n inputCheckListener(e: CustomEvent): void {\n const data = e.detail;\n switch (this.type) {\n case InputType.RADIO:\n if (data.type === InputType.RADIO && data.name === this.name && data.id !== this.htmlid) {\n this.checked = false;\n }\n break;\n }\n }\n\n /* get checked status /\n @Method()\n async isChecked(): Promise<boolean> {\n switch (this.type) {\n case InputType.CHECKBOX:\n case InputType.RADIO:\n return this.checked;\n default:\n console.warn(\"`isChecked` method is only available for type `checkbox` and `radio`\");\n\n return false;\n }\n }\n\n /* Emitted on input value change, returns value, validity /\n @Event()\n inputChange: EventEmitter;\n\n private emitInputChange(value: string): void {\n if (!this.isTyping) {\n this.emitStartTyping();\n }\n\n let validity: ValidityState;\n if (this.type === InputType.TEXTAREA) {\n validity = this.getValidity(\"textarea\");\n } else {\n validity = this.getValidity(\"input\");\n }\n this.value = value;\n this.inputChange.emit({value, validity});\n\n clearTimeout(this.timer);\n this.timer = setTimeout(() => {\n this.emitStopTyping(this.value, validity);\n }, this.typingtimeout);\n }\n\n /* Emitted when user starts typing /\n @Event()\n startTyping: EventEmitter;\n\n private emitStartTyping(): void {\n this.isTyping = true;\n this.startTyping.emit();\n }\n\n /* Emitted when user stops typing, returns value, validity /\n @Event()\n stopTyping: EventEmitter;\n\n private emitStopTyping(value: string, validity: ValidityState): void {\n this.isTyping = false;\n this.stopTyping.emit({\n value: value,\n validity: validity,\n });\n }\n\n /* Emitted on checkbox check/uncheck, returns id, checked, type, name, value, validity /\n @Event()\n inputCheck: EventEmitter;\n\n private emitInputCheck(checked: boolean): void {\n this.inputCheck.emit({\n id: this.htmlid,\n checked: checked,\n type: this.type,\n name: this.name,\n value: this.value,\n validity: this.getValidity(\"input\"),\n });\n }\n\n /* Emitted on input focus /\n @Event()\n inputFocus: EventEmitter;\n\n private emitInputFocus(): void {\n this.inputFocus.emit({id: this.htmlid});\n }\n\n /* Emitted on input blur /\n @Event()\n inputBlur: EventEmitter;\n\n private emitInputBlur(): void {\n this.inputBlur.emit({id: this.htmlid});\n }\n\n private getValidity(type: string): ValidityState {\n const input = this.hostElement.querySelector(type) as HTMLInputElement;\n\n return input.validity;\n }\n\n / START text/password/email/number /\n\n private getTextAttributes(): JSXBase.InputHTMLAttributes<HTMLInputElement \| HTMLTextAreaElement> {\n return {\n id: this.htmlid,\n name: this.name,\n placeholder: this.placeholder,\n value: this.value,\n disabled: this.disabled,\n readonly: this.readonly,\n required: this.required,\n title: this.htmltitle,\n minlength: this.minlength,\n maxlength: this.maxlength,\n class: {\n [`input-${this.status}`]: !!this.status,\n filled: !!this.value,\n },\n autocomplete: this.autocomplete,\n onInput: (e: InputEvent) => this.emitInputChange((e.target as HTMLInputElement).value),\n };\n }\n\n private getNumberAttributes(type: InputType): JSXBase.InputHTMLAttributes<HTMLInputElement> {\n if (type != InputType.NUMBER) {\n return;\n }\n\n return {\n min: this.min,\n max: this.max,\n step: this.step,\n };\n }\n\n private getPatternAttribute(type: InputType): JSXBase.InputHTMLAttributes<HTMLInputElement> {\n if (\n type != InputType.PASSWORD &&\n type != InputType.TEXT &&\n type != InputType.TEL &&\n type != InputType.SEARCH &&\n type != InputType.URL &&\n type != InputType.EMAIL\n ) {\n return;\n }\n\n return {\n pattern: this.pattern,\n };\n }\n\n private getRoleAttribute(): JSXBase.InputHTMLAttributes<HTMLInputElement \| HTMLTextAreaElement> {\n return this.role ? {role: this.role} : {};\n }\n\n private getAriaAttrubutes(): Record<string, unknown> {\n const expanded = this.ariaExpanded ? {\"aria-expanded\": this.ariaExpanded} : {};\n const controls = this.ariaControls ? {\"aria-controls\": this.ariaControls} : {};\n const autocomplete = this.ariaAutocomplete ? {\"aria-autocomplete\": this.ariaAutocomplete} : {};\n const activedescendant = this.ariaActivedescendant ? {\"aria-activedescendant\": this.ariaActivedescendant} : {};\n\n return {\n ...expanded,\n ...controls,\n ...autocomplete,\n ...activedescendant,\n };\n }\n\n private getFocusBlurAttributes(): JSXBase.InputHTMLAttributes<HTMLInputElement \| HTMLTextAreaElement> {\n return {\n onFocus: () => this.emitInputFocus(),\n onBlur: () => this.emitInputBlur(),\n };\n }\n\n private renderInputText(type: InputType = InputType.TEXT): HTMLDivElement {\n const ariaLabel = this.ariaLabel ? {\"aria-label\": this.ariaLabel} : {};\n const attr = {\n ...this.getTextAttributes(),\n ...this.getNumberAttributes(type),\n ...this.getPatternAttribute(type),\n ...ariaLabel,\n ...this.getRoleAttribute(),\n ...this.getAriaAttrubutes(),\n ...this.getFocusBlurAttributes(),\n };\n if (this.icon \|\| type === InputType.PASSWORD) {\n Object.assign(attr.class, {\"has-icon\": true});\n }\n if (this.hasclearicon && type != InputType.NUMBER) {\n Object.assign(attr.class, {\"has-clear-icon\": true});\n }\n\n return (\n <div class=\"text-wrapper\">\n {this.renderLabel()}\n <div>\n <input\n type={type === InputType.PASSWORD && !this.passwordHidden ? InputType.TEXT : type}\n {...attr}\n ref={(el) => (this.inputRef = el)}\n />\n {this.renderIcons()}\n </div>\n {this.renderMessage()}\n </div>\n );\n }\n\n private renderLabel(): HTMLLabelElement {\n if (!this.label) {\n return;\n }\n\n return (\n <label\n class=\"input-label body-5-sb\"\n id={`${this.htmlid}_label`}\n htmlFor={this.htmlid}\n >\n {this.label}\n </label>\n );\n }\n\n private renderIcons(): HTMLSpanElement {\n return (\n <span class=\"icons-wrapper\">\n {this.renderResetIcon()}\n {this.renderIcon()}\n </span>\n );\n }\n\n private renderIcon(): HTMLButtonElement {\n if (this.type === InputType.PASSWORD) {\n return this.renderShowHidePassword();\n }\n\n if (!this.icon) {\n return;\n }\n\n return (\n <button\n type=\"button\"\n class=\"icon-button input-icon\"\n tabIndex={-1}\n aria-hidden=\"true\"\n >\n <z-icon\n name={this.icon}\n class={this.size}\n />\n </button>\n );\n }\n\n private renderResetIcon(): HTMLButtonElement {\n let hidden = false;\n if (!this.hasclearicon \|\| !this.value \|\| this.disabled \|\| this.readonly \|\| this.type == InputType.NUMBER) {\n hidden = true;\n }\n\n return (\n <button\n type=\"button\"\n class={`icon-button reset-icon ${hidden ? \"hidden\" : \"\"}`}\n aria-label=\"cancella il contenuto dell'input\"\n onClick={() => {\n this.inputRef.value = \"\";\n this.emitInputChange(\"\");\n }}\n >\n <z-icon\n name=\"multiply\"\n class={this.size}\n />\n </button>\n );\n }\n\n private renderShowHidePassword(): HTMLButtonElement {\n return (\n <button\n type=\"button\"\n class=\"icon-button toggle-password-icon\"\n disabled={this.disabled}\n aria-label={this.passwordHidden ? \"mostra password\" : \"nascondi password\"}\n onClick={() => (this.passwordHidden = !this.passwordHidden)}\n >\n <z-icon\n name={this.passwordHidden ? \"view-filled\" : \"view-off-filled\"}\n class={this.size}\n />\n </button>\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 / END text/password/email/number /\n\n / START textarea /\n\n private renderTextarea(): HTMLDivElement {\n const attributes = this.getTextAttributes();\n const ariaLabel = this.ariaLabel ? {\"aria-label\": this.ariaLabel} : {};\n\n return (\n <div class=\"text-wrapper\">\n {this.renderLabel()}\n <div\n class={{\n ...(attributes.class as Record<string, boolean>),\n \"textarea-wrapper\": true,\n \"readonly\": attributes.readonly as boolean,\n }}\n >\n <textarea\n {...attributes}\n {...ariaLabel}\n {...this.getRoleAttribute()}\n ></textarea>\n </div>\n {this.renderMessage()}\n </div>\n );\n }\n\n / END textarea /\n\n private handleCheck(ev: Event): void {\n this.checked = (ev.target as HTMLInputElement).checked;\n this.emitInputCheck(this.checked);\n }\n\n / START checkbox /\n private renderCheckbox(): HTMLDivElement {\n return (\n <div class=\"checkbox-wrapper\">\n <input\n id={this.htmlid}\n type=\"checkbox\"\n name={this.name}\n checked={this.checked}\n disabled={this.disabled}\n readonly={this.readonly}\n required={this.required}\n onChange={this.handleCheck.bind(this)}\n value={this.value}\n {...this.getRoleAttribute()}\n {...this.getFocusBlurAttributes()}\n />\n\n <label\n htmlFor={this.htmlid}\n class={{\n \"checkbox-label\": true,\n \"after\": this.labelPosition === LabelPosition.RIGHT,\n \"before\": this.labelPosition === LabelPosition.LEFT,\n }}\n >\n <z-icon\n name={this.checked ? \"checkbox-checked\" : \"checkbox\"}\n aria-hidden=\"true\"\n class={this.size}\n />\n {this.label && <span innerHTML={this.label}></span>}\n </label>\n </div>\n );\n }\n\n / END checkbox /\n\n / START radio /\n private renderRadio(): HTMLDivElement {\n return (\n <div class=\"radio-wrapper\">\n <input\n id={this.htmlid}\n type=\"radio\"\n name={this.name}\n checked={this.checked}\n disabled={this.disabled}\n readonly={this.readonly}\n onChange={this.handleCheck.bind(this)}\n value={this.value}\n {...this.getRoleAttribute()}\n {...this.getFocusBlurAttributes()}\n />\n\n <label\n htmlFor={this.htmlid}\n class={{\n \"radio-label\": true,\n \"after\": this.labelPosition === LabelPosition.RIGHT,\n \"before\": this.labelPosition === LabelPosition.LEFT,\n }}\n >\n <z-icon\n name={this.checked ? \"radio-button-checked\" : \"radio-button\"}\n aria-hidden=\"true\"\n class={this.size}\n />\n {this.label && <span innerHTML={this.label} />}\n </label>\n </div>\n );\n }\n / END radio */\n\n render(): HTMLInputElement \| HTMLDivElement {\n let input;\n switch (this.type) {\n case InputType.TEXTAREA:\n input = this.renderTextarea();\n break;\n case InputType.CHECKBOX:\n input = this.renderCheckbox();\n break;\n case InputType.RADIO:\n input = this.renderRadio();\n break;\n default:\n input = this.renderInputText(this.type);\n }\n\n return <Host>{input}</Host>;\n }\n}\n"],"version":3}

package/dist/components/index11.js CHANGED Viewed

@@ -1,7 +1,7 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 import { d as defineCustomElement$1 } from './index9.js';
-const stylesCss = ":host{display:-ms-flexbox;display:flex;min-height:calc(var(--space-unit) * 2.5);-ms-flex-align:start;align-items:start;margin-top:var(--space-unit);color:var(--color-text05);fill:currentcolor;font-family:var(--font-family-sans);font-size:var(--font-size-2);letter-spacing:0.16px}:host(.small),:host(.x-small){margin-top:calc(var(--space-unit) * 0.5);font-size:var(--font-size-1)}:host([status=\"success\"]){color:var(--color-text-success)}:host([status=\"error\"]){color:var(--color-text-error)}:host([status=\"warning\"]){color:var(--color-warning02)}:host(:focus){outline:none}:host>z-icon{--z-icon-width:calc(var(--space-unit) * 2);--z-icon-height:calc(var(--space-unit) * 2);--z-icon-right-margin:var(--space-unit);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)}";
+const stylesCss = ":host{display:flex;min-height:calc(var(--space-unit) * 2.5);align-items:start;margin-top:var(--space-unit);color:var(--color-text05);fill:currentcolor;font-family:var(--font-family-sans);font-size:var(--font-size-2);letter-spacing:0.16px}:host(.small),:host(.x-small){margin-top:calc(var(--space-unit) * 0.5);font-size:var(--font-size-1)}:host([status=\"success\"]){color:var(--color-text-success)}:host([status=\"error\"]){color:var(--color-text-error)}:host([status=\"warning\"]){color:var(--color-warning02)}:host(:focus){outline:none}:host>z-icon{--z-icon-width:calc(var(--space-unit) * 2);--z-icon-height:calc(var(--space-unit) * 2);--z-icon-right-margin:var(--space-unit);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)}";
 const ZInputMessageStyle0 = stylesCss;
 const ZInputMessage = /*@__PURE__*/ proxyCustomElement(class ZInputMessage extends HTMLElement {

package/dist/components/index11.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"index11.js","mappings":";;;AAAA,MAAM,SAAS,GAAG,~~o4BAAo4B~~,CAAC;~~AACv5B~~,4BAAe,SAAS;;MCOX,aAAa;;;;;QAShB,gBAAW,GAAG;YACpB,OAAO,EAAE,kBAAkB;YAC3B,KAAK,EAAE,kBAAkB;YACzB,OAAO,EAAE,oBAAoB;SAC9B,CAAC;;;0BAGW,EAAE;;IAIf,eAAe;QACb,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,MAAM,GAAG,EAAC,IAAI,EAAE,OAAO,EAAC,GAAG,EAAE,CAAC;KACtE;IAED,iBAAiB;QACf,IAAI,CAAC,eAAe,EAAE,CAAC;KACxB;IAED,MAAM;QACJ,QACE,EAAC,IAAI,qEACC,IAAI,CAAC,UAAU,kBACP,IAAI,CAAC,OAAO,KAEvB,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,MAAM,CAAC,IAAI,IAAI,CAAC,OAAO,IAAI,+DAAQ,IAAI,EAAE,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,MAAM,CAAC,GAAW,EACxG,6DAAM,SAAS,EAAE,IAAI,CAAC,OAAO,GAAI,CAC5B,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/z-input-message/styles.css?tag=z-input-message&encapsulation=shadow","src/components/z-input-message/index.tsx"],"sourcesContent":[":host {\n display: flex;\n min-height: calc(var(--space-unit) * 2.5);\n align-items: start;\n margin-top: var(--space-unit);\n color: var(--color-text05);\n fill: currentcolor;\n font-family: var(--font-family-sans);\n font-size: var(--font-size-2);\n letter-spacing: 0.16px;\n}\n\n:host(.small),\n:host(.x-small) {\n margin-top: calc(var(--space-unit) * 0.5);\n font-size: var(--font-size-1);\n}\n\n:host([status=\"success\"]) {\n color: var(--color-text-success);\n}\n\n:host([status=\"error\"]) {\n color: var(--color-text-error);\n}\n\n:host([status=\"warning\"]) {\n color: var(--color-warning02);\n}\n\n:host(:focus) {\n outline: none;\n}\n\n:host > z-icon {\n --z-icon-width: calc(var(--space-unit) * 2);\n --z-icon-height: calc(var(--space-unit) * 2);\n --z-icon-right-margin: var(--space-unit);\n\n margin-top: calc(var(--space-unit) * 0.25);\n}\n\n:host(.small) > z-icon,\n:host(.x-small) > z-icon {\n --z-icon-width: 14px;\n --z-icon-height: 14px;\n --z-icon-right-margin: calc(var(--space-unit) * 0.5);\n}\n","import {Component, Host, Prop, State, Watch, h} from \"@stencil/core\";\nimport {InputStatus} from \"../../beans\";\n\n@Component({\n tag: \"z-input-message\",\n styleUrl: \"styles.css\",\n shadow: true,\n})\nexport class ZInputMessage {\n /** input helper message /\n @Prop()\n message: string;\n\n /* input status (optional) */\n @Prop({reflect: true})\n status?: InputStatus;\n\n private statusIcons = {\n success: \"checkmark-circle\",\n error: \"multiply-circled\",\n warning: \"exclamation-circle\",\n };\n\n @State()\n statusRole = {};\n\n @Watch(\"message\")\n @Watch(\"status\")\n onMessageChange(): void {\n this.statusRole = this.message && this.status ? {role: \"alert\"} : {};\n }\n\n componentWillLoad(): void {\n this.onMessageChange();\n }\n\n render(): HTMLZInputMessageElement {\n return (\n <Host\n {...this.statusRole}\n aria-label={this.message}\n >\n {this.statusIcons[this.status] && this.message && <z-icon name={this.statusIcons[this.status]}></z-icon>}\n <span innerHTML={this.message} />\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"index11.js","mappings":";;;AAAA,MAAM,SAAS,GAAG,21BAA21B,CAAC;AAC92B,4BAAe,SAAS;;MCOX,aAAa;;;;;QAShB,gBAAW,GAAG;YACpB,OAAO,EAAE,kBAAkB;YAC3B,KAAK,EAAE,kBAAkB;YACzB,OAAO,EAAE,oBAAoB;SAC9B,CAAC;;;0BAGW,EAAE;;IAIf,eAAe;QACb,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,MAAM,GAAG,EAAC,IAAI,EAAE,OAAO,EAAC,GAAG,EAAE,CAAC;KACtE;IAED,iBAAiB;QACf,IAAI,CAAC,eAAe,EAAE,CAAC;KACxB;IAED,MAAM;QACJ,QACE,EAAC,IAAI,qEACC,IAAI,CAAC,UAAU,kBACP,IAAI,CAAC,OAAO,KAEvB,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,MAAM,CAAC,IAAI,IAAI,CAAC,OAAO,IAAI,+DAAQ,IAAI,EAAE,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,MAAM,CAAC,GAAW,EACxG,6DAAM,SAAS,EAAE,IAAI,CAAC,OAAO,GAAI,CAC5B,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/z-input-message/styles.css?tag=z-input-message&encapsulation=shadow","src/components/z-input-message/index.tsx"],"sourcesContent":[":host {\n display: flex;\n min-height: calc(var(--space-unit) * 2.5);\n align-items: start;\n margin-top: var(--space-unit);\n color: var(--color-text05);\n fill: currentcolor;\n font-family: var(--font-family-sans);\n font-size: var(--font-size-2);\n letter-spacing: 0.16px;\n}\n\n:host(.small),\n:host(.x-small) {\n margin-top: calc(var(--space-unit) * 0.5);\n font-size: var(--font-size-1);\n}\n\n:host([status=\"success\"]) {\n color: var(--color-text-success);\n}\n\n:host([status=\"error\"]) {\n color: var(--color-text-error);\n}\n\n:host([status=\"warning\"]) {\n color: var(--color-warning02);\n}\n\n:host(:focus) {\n outline: none;\n}\n\n:host > z-icon {\n --z-icon-width: calc(var(--space-unit) * 2);\n --z-icon-height: calc(var(--space-unit) * 2);\n --z-icon-right-margin: var(--space-unit);\n\n margin-top: calc(var(--space-unit) * 0.25);\n}\n\n:host(.small) > z-icon,\n:host(.x-small) > z-icon {\n --z-icon-width: 14px;\n --z-icon-height: 14px;\n --z-icon-right-margin: calc(var(--space-unit) * 0.5);\n}\n","import {Component, Host, Prop, State, Watch, h} from \"@stencil/core\";\nimport {InputStatus} from \"../../beans\";\n\n@Component({\n tag: \"z-input-message\",\n styleUrl: \"styles.css\",\n shadow: true,\n})\nexport class ZInputMessage {\n /** input helper message /\n @Prop()\n message: string;\n\n /* input status (optional) */\n @Prop({reflect: true})\n status?: InputStatus;\n\n private statusIcons = {\n success: \"checkmark-circle\",\n error: \"multiply-circled\",\n warning: \"exclamation-circle\",\n };\n\n @State()\n statusRole = {};\n\n @Watch(\"message\")\n @Watch(\"status\")\n onMessageChange(): void {\n this.statusRole = this.message && this.status ? {role: \"alert\"} : {};\n }\n\n componentWillLoad(): void {\n this.onMessageChange();\n }\n\n render(): HTMLZInputMessageElement {\n return (\n <Host\n {...this.statusRole}\n aria-label={this.message}\n >\n {this.statusIcons[this.status] && this.message && <z-icon name={this.statusIcons[this.status]}></z-icon>}\n <span innerHTML={this.message} />\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/components/index12.js CHANGED Viewed

@@ -1,7 +1,7 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 import { i as ListSize, m as ListType } from './index2.js';
-const stylesCss = ":host{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;font-family:var(--font-family-sans);font-weight:var(--font-rg)}";
+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 {

package/dist/components/index12.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"index12.js","mappings":";;;AAAA,MAAM,SAAS,GAAG,~~wJAAwJ~~,CAAC;~~AAC3K~~,oBAAe,SAAS;;MCOX,KAAK;;;;;oBAOE,QAAQ,CAAC,MAAM;wBAMX,QAAQ,CAAC,IAAI;oBAM5B,MAAM;;IAEL,mBAAmB;QACzB,MAAM,QAAQ,GAAG,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC;QACpC,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,QAAQ,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;YACxC,QAAQ,CAAC,CAAC,CAAC,CAAC,YAAY,CAAC,MAAM,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC;YAC5C,QAAQ,CAAC,CAAC,CAAC,CAAC,YAAY,CAAC,WAAW,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC;YACrD,QAAQ,CAAC,CAAC,CAAC,CAAC,YAAY,CAAC,uBAAuB,EAAE,CAAC,CAAC,GAAG,CAAC,EAAE,QAAQ,EAAE,CAAC,CAAC;SACvE;KACF;IAED,gBAAgB;QACd,IAAI,CAAC,mBAAmB,EAAE,CAAC;KAC5B;IAED,MAAM;QACJ,QACE,EAAC,IAAI,uDACH,8DAAQ,CACH,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/list/z-list/styles.css?tag=z-list&encapsulation=shadow","src/components/list/z-list/index.tsx"],"sourcesContent":[":host {\n display: flex;\n flex-direction: column;\n font-family: var(--font-family-sans);\n font-weight: var(--font-rg);\n}\n","import {Component, Element, Host, Prop, h} from \"@stencil/core\";\nimport {ListSize, ListType} from \"../../../beans\";\n\n@Component({\n tag: \"z-list\",\n styleUrl: \"styles.css\",\n shadow: true,\n})\nexport class ZList {\n @Element() host: HTMLZListElement;\n\n /*\n [optional] Sets size of inside elements.\n /\n @Prop({reflect: true})\n size?: ListSize = ListSize.MEDIUM;\n\n /\n [optional] type of the list marker for each element\n /\n @Prop({reflect: true})\n listType?: ListType = ListType.NONE;\n\n /\n Sets role of the element.\n */\n @Prop({reflect: true})\n role = \"list\";\n\n private setChildrenSizeType(): void {\n const children = this.host.children;\n for (let i = 0; i < children.length; i++) {\n children[i].setAttribute(\"size\", this.size);\n children[i].setAttribute(\"list-type\", this.listType);\n children[i].setAttribute(\"list-element-position\", (i + 1).toString());\n }\n }\n\n componentDidLoad(): void {\n this.setChildrenSizeType();\n }\n\n render(): HTMLZListElement {\n return (\n <Host>\n <slot />\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"index12.js","mappings":";;;AAAA,MAAM,SAAS,GAAG,0GAA0G,CAAC;AAC7H,oBAAe,SAAS;;MCOX,KAAK;;;;;oBAOE,QAAQ,CAAC,MAAM;wBAMX,QAAQ,CAAC,IAAI;oBAM5B,MAAM;;IAEL,mBAAmB;QACzB,MAAM,QAAQ,GAAG,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC;QACpC,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,QAAQ,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;YACxC,QAAQ,CAAC,CAAC,CAAC,CAAC,YAAY,CAAC,MAAM,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC;YAC5C,QAAQ,CAAC,CAAC,CAAC,CAAC,YAAY,CAAC,WAAW,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC;YACrD,QAAQ,CAAC,CAAC,CAAC,CAAC,YAAY,CAAC,uBAAuB,EAAE,CAAC,CAAC,GAAG,CAAC,EAAE,QAAQ,EAAE,CAAC,CAAC;SACvE;KACF;IAED,gBAAgB;QACd,IAAI,CAAC,mBAAmB,EAAE,CAAC;KAC5B;IAED,MAAM;QACJ,QACE,EAAC,IAAI,uDACH,8DAAQ,CACH,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/list/z-list/styles.css?tag=z-list&encapsulation=shadow","src/components/list/z-list/index.tsx"],"sourcesContent":[":host {\n display: flex;\n flex-direction: column;\n font-family: var(--font-family-sans);\n font-weight: var(--font-rg);\n}\n","import {Component, Element, Host, Prop, h} from \"@stencil/core\";\nimport {ListSize, ListType} from \"../../../beans\";\n\n@Component({\n tag: \"z-list\",\n styleUrl: \"styles.css\",\n shadow: true,\n})\nexport class ZList {\n @Element() host: HTMLZListElement;\n\n /*\n [optional] Sets size of inside elements.\n /\n @Prop({reflect: true})\n size?: ListSize = ListSize.MEDIUM;\n\n /\n [optional] type of the list marker for each element\n /\n @Prop({reflect: true})\n listType?: ListType = ListType.NONE;\n\n /\n Sets role of the element.\n */\n @Prop({reflect: true})\n role = \"list\";\n\n private setChildrenSizeType(): void {\n const children = this.host.children;\n for (let i = 0; i < children.length; i++) {\n children[i].setAttribute(\"size\", this.size);\n children[i].setAttribute(\"list-type\", this.listType);\n children[i].setAttribute(\"list-element-position\", (i + 1).toString());\n }\n }\n\n componentDidLoad(): void {\n this.setChildrenSizeType();\n }\n\n render(): HTMLZListElement {\n return (\n <Host>\n <slot />\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/components/index13.js CHANGED Viewed

@@ -3,7 +3,7 @@ import { j as ExpandableListButtonAlign, l as ListDividerType, D as DividerSize,
 import { d as defineCustomElement$2 } from './index6.js';
 import { d as defineCustomElement$1 } from './index9.js';
-const stylesCss = ":host{outline:none}:host>.container{--background-color-list-element:var(--color-surface01);--background-hover-color-list-element:var(--color-surface02);--background-active-color-list-element:var(--color-surface02);display:-ms-flexbox;display:flex;-webkit-box-sizing:border-box;box-sizing:border-box;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:center;justify-content:center;font-family:var(--font-family-sans);font-weight:var(--font-rg);outline:none}:host([size=\"small\"])>.container{min-height:calc(var(--space-unit) * 4);padding:calc(var(--space-unit) / 2) 0}:host([size=\"medium\"])>.container{min-height:calc(var(--space-unit) * 5);padding:var(--space-unit) 0}:host([size=\"large\"])>.container{min-height:calc(var(--space-unit) * 7);padding:calc(var(--space-unit) * 2) 0}:host([size=\"x-large\"])>.container{min-height:calc(var(--space-unit) * 9);padding:calc(var(--space-unit) * 3) 0}:host([expandable])>.container,:host([clickable])>.container{cursor:pointer}:host([expandable]:hover)>.container,:host([clickable]:hover)>.container{background-color:var(--background-hover-color-list-element)}:host([expandable]:focus:focus-visible)>.container,:host([clickable]:focus:focus-visible)>.container{-webkit-box-shadow:var(--shadow-focus-primary);box-shadow:var(--shadow-focus-primary)}:host([clickable]:not([expandable]))>.container.clicked{-webkit-box-shadow:var(--shadow-focus-primary);box-shadow:var(--shadow-focus-primary)}:host([expandable]:active)>.container,:host([clickable]:active)>.container{background-color:var(--background-active-color-list-element)}:host([align-button=\"left\"][expandable])>.container>.z-list-element-container{display:-ms-flexbox;display:flex}:host([align-button=\"right\"][expandable])>.container>.z-list-element-container{display:-ms-flexbox;display:flex;-ms-flex-direction:row-reverse;flex-direction:row-reverse;-ms-flex-pack:justify;justify-content:space-between}:host([align-button=\"left\"][expandable])>.container>.z-list-element-container>z-icon{margin-right:var(--space-unit)}:host([align-button=\"right\"][expandable])>.container>.z-list-element-container>z-icon{margin-left:var(--space-unit)}:host>.container>.z-list-element-inner-container{display:none}:host>.container>.z-list-element-inner-container.expanded{display:block}.z-list-content-container{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}";
+const stylesCss = ":host{outline:none}:host>.container{--background-color-list-element:var(--color-surface01);--background-hover-color-list-element:var(--color-surface02);--background-active-color-list-element:var(--color-surface02);display:flex;box-sizing:border-box;flex-direction:column;justify-content:center;font-family:var(--font-family-sans);font-weight:var(--font-rg);outline:none}:host([size=\"small\"])>.container{min-height:calc(var(--space-unit) * 4);padding:calc(var(--space-unit) / 2) 0}:host([size=\"medium\"])>.container{min-height:calc(var(--space-unit) * 5);padding:var(--space-unit) 0}:host([size=\"large\"])>.container{min-height:calc(var(--space-unit) * 7);padding:calc(var(--space-unit) * 2) 0}:host([size=\"x-large\"])>.container{min-height:calc(var(--space-unit) * 9);padding:calc(var(--space-unit) * 3) 0}:host([expandable])>.container,:host([clickable])>.container{cursor:pointer}:host([expandable]:hover)>.container,:host([clickable]:hover)>.container{background-color:var(--background-hover-color-list-element)}:host([expandable]:focus:focus-visible)>.container,:host([clickable]:focus:focus-visible)>.container{box-shadow:var(--shadow-focus-primary)}:host([clickable]:not([expandable]))>.container.clicked{box-shadow:var(--shadow-focus-primary)}:host([expandable]:active)>.container,:host([clickable]:active)>.container{background-color:var(--background-active-color-list-element)}:host([align-button=\"left\"][expandable])>.container>.z-list-element-container{display:flex}:host([align-button=\"right\"][expandable])>.container>.z-list-element-container{display:flex;flex-direction:row-reverse;justify-content:space-between}:host([align-button=\"left\"][expandable])>.container>.z-list-element-container>z-icon{margin-right:var(--space-unit)}:host([align-button=\"right\"][expandable])>.container>.z-list-element-container>z-icon{margin-left:var(--space-unit)}:host>.container>.z-list-element-inner-container{display:none}:host>.container>.z-list-element-inner-container.expanded{display:block}.z-list-content-container{display:flex;align-items:center}";
 const ZListElementStyle0 = stylesCss;
 const ZListElement = /*@__PURE__*/ proxyCustomElement(class ZListElement extends HTMLElement {

package/dist/components/index13.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"index13.js","mappings":"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","names":[],"sources":["src/components/list/z-list-element/styles.css?tag=z-list-element&encapsulation=shadow","src/components/list/z-list-element/index.tsx"],"sourcesContent":[":host {\n outline: none;\n}\n\n:host > .container {\n --background-color-list-element: var(--color-surface01);\n --background-hover-color-list-element: var(--color-surface02);\n --background-active-color-list-element: var(--color-surface02);\n\n display: flex;\n box-sizing: border-box;\n flex-direction: column;\n justify-content: center;\n font-family: var(--font-family-sans);\n font-weight: var(--font-rg);\n outline: none;\n}\n\n/* z-list-element size /\n\n:host([size=\"small\"]) > .container {\n min-height: calc(var(--space-unit) 4);\n padding: calc(var(--space-unit) / 2) 0;\n}\n\n:host([size=\"medium\"]) > .container {\n min-height: calc(var(--space-unit) * 5);\n padding: var(--space-unit) 0;\n}\n\n:host([size=\"large\"]) > .container {\n min-height: calc(var(--space-unit) * 7);\n padding: calc(var(--space-unit) * 2) 0;\n}\n\n:host([size=\"x-large\"]) > .container {\n min-height: calc(var(--space-unit) * 9);\n padding: calc(var(--space-unit) * 3) 0;\n}\n\n/* ----------------- /\n\n:host([expandable]) > .container,\n:host([clickable]) > .container {\n cursor: pointer;\n}\n\n:host([expandable]:hover) > .container,\n:host([clickable]:hover) > .container {\n background-color: var(--background-hover-color-list-element);\n}\n\n:host([expandable]:focus:focus-visible) > .container,\n:host([clickable]:focus:focus-visible) > .container {\n box-shadow: var(--shadow-focus-primary);\n}\n\n:host([clickable]:not([expandable])) > .container.clicked {\n box-shadow: var(--shadow-focus-primary);\n}\n\n:host([expandable]:active) > .container,\n:host([clickable]:active) > .container {\n background-color: var(--background-active-color-list-element);\n}\n\n:host([align-button=\"left\"][expandable]) > .container > .z-list-element-container {\n display: flex;\n}\n\n:host([align-button=\"right\"][expandable]) > .container > .z-list-element-container {\n display: flex;\n flex-direction: row-reverse;\n justify-content: space-between;\n}\n\n:host([align-button=\"left\"][expandable]) > .container > .z-list-element-container > z-icon {\n margin-right: var(--space-unit);\n}\n\n:host([align-button=\"right\"][expandable]) > .container > .z-list-element-container > z-icon {\n margin-left: var(--space-unit);\n}\n\n:host > .container > .z-list-element-inner-container {\n display: none;\n}\n\n:host > .container > .z-list-element-inner-container.expanded {\n display: block;\n}\n\n.z-list-content-container {\n display: flex;\n align-items: center;\n}\n","import {Component, Element, Event, EventEmitter, h, Host, Listen, Prop, State} from \"@stencil/core\";\nimport {\n DividerSize,\n ExpandableListButtonAlign,\n ExpandableListStyle,\n KeyboardCode,\n ListDividerType,\n ListSize,\n ListType,\n} from \"../../../beans\";\n\n@Component({\n tag: \"z-list-element\",\n styleUrl: \"styles.css\",\n shadow: true,\n})\nexport class ZListElement {\n @Element() host: HTMLZListElementElement;\n\n /* remove filter click event, returns filterid /\n @Event({\n eventName: \"accessibleFocus\",\n composed: true,\n cancelable: true,\n bubbles: true,\n })\n accessibleFocus: EventEmitter<number>;\n\n /* set parent aria-activedescendant on focus event, returns filterid /\n @Event({\n eventName: \"ariaDescendantFocus\",\n composed: true,\n cancelable: true,\n bubbles: true,\n })\n ariaDescendantFocus: EventEmitter<number>;\n\n /* remove filter click event, returns filterid /\n @Event({\n eventName: \"clickItem\",\n composed: true,\n cancelable: true,\n bubbles: true,\n })\n clickItem: EventEmitter;\n\n @Listen(\"accessibleFocus\", {target: \"document\"})\n accessibleFocusHandler(e: CustomEvent): void {\n if (this.listElementId === e.detail) {\n const toFocus = this.host.shadowRoot.getElementById(`z-list-element-id-${e.detail}`);\n toFocus.focus();\n }\n }\n\n /\n [optional] Align expandable button left or right.\n /\n @Prop({reflect: true})\n alignButton?: ExpandableListButtonAlign = ExpandableListButtonAlign.LEFT;\n\n /\n [optional] Sets element clickable.\n /\n @Prop({reflect: true})\n clickable?: boolean = false;\n\n /\n [optional] Sets the divider color.\n /\n @Prop()\n dividerColor?: string = \"color-surface03\";\n\n /\n [optional] Sets the position where to insert the divider.\n /\n @Prop()\n dividerType?: ListDividerType = ListDividerType.NONE;\n\n /\n [optional] Sets the divider size.\n /\n @Prop()\n dividerSize?: DividerSize = DividerSize.SMALL;\n\n /\n [optional] Sets element as expandable.\n /\n @Prop({reflect: true})\n expandable?: boolean = false;\n\n /\n [optional] Sets expandable style to element.\n /\n @Prop()\n expandableStyle?: ExpandableListStyle = ExpandableListStyle.ACCORDION;\n\n /\n [optional] List element id.\n /\n @Prop({reflect: true})\n listElementId?: number;\n\n /\n [optional] Sets size of inside elements.\n /\n @Prop({reflect: true})\n size?: ListSize = ListSize.MEDIUM;\n\n /\n [optional] Sets text color of the element.\n /\n @Prop({reflect: true})\n color?: string = \"none\";\n\n /\n [optional] Sets disabled style of the element.\n /\n @Prop({reflect: true})\n disabled?: boolean = false;\n\n /\n [optional] position of the list element inside the list or the group\n /\n @Prop({reflect: true})\n listElementPosition?: string = \"0\";\n\n /\n [optional] type of the list marker for each element\n /\n @Prop({reflect: true})\n listType?: ListType = ListType.NONE;\n\n /\n Sets element role.\n /\n @Prop({reflect: true})\n role = \"listitem\";\n\n /* set tabindex to Host tag (optional). Defaults to 0. /\n @Prop()\n htmlTabindex?: number \| null = 0;\n\n @State()\n showInnerContent = false;\n\n private openElementConfig = {\n accordion: {\n open: \"minus-circled\",\n close: \"plus-circled\",\n },\n menu: {\n open: \"chevron-up\",\n close: \"chevron-down\",\n },\n };\n\n /\n Constructor.\n /\n constructor() {\n this.handleClick = this.handleClick.bind(this);\n this.handleKeyDown = this.handleKeyDown.bind(this);\n }\n\n /\n Handler for click on element. If element is expandable, change state.\n * @returns void\n /\n private handleClick(): void {\n this.clickItem.emit(this.listElementId);\n if (!this.expandable) {\n return;\n }\n this.showInnerContent = !this.showInnerContent;\n }\n\n private handleKeyDown(event): void {\n const expandByKey = event.code === KeyboardCode.ENTER;\n switch (event.code) {\n case KeyboardCode.ARROW_DOWN:\n event.preventDefault();\n this.accessibleFocus.emit(this.listElementId + 1);\n break;\n case KeyboardCode.ARROW_UP:\n event.preventDefault();\n this.accessibleFocus.emit(this.listElementId - 1);\n break;\n case KeyboardCode.ENTER:\n event.preventDefault();\n this.clickItem.emit(this.listElementId);\n break;\n default:\n break;\n }\n\n if (!this.expandable \|\| !expandByKey) {\n return;\n }\n this.showInnerContent = !this.showInnerContent;\n }\n\n /\n Renders button to expand element.\n * @returns expadable button\n /\n private renderExpandableButton(): HTMLZIconElement {\n if (!this.expandable) {\n return null;\n }\n\n return (\n <z-icon\n name={\n this.showInnerContent\n ? this.openElementConfig[this.expandableStyle].open\n : this.openElementConfig[this.expandableStyle].close\n }\n />\n );\n }\n\n /\n Renders expanded content if element is expandable.\n * @returns expanded content\n /\n private renderExpandedContent(): HTMLDivElement {\n if (!this.expandable) {\n return null;\n }\n\n return (\n <div\n class={{\n \"z-list-element-inner-container\": true,\n \"expanded\": this.showInnerContent,\n }}\n >\n <slot name=\"inner-content\" />\n </div>\n );\n }\n\n /\n Renders content of the z-list-element\n * @returns list content\n */\n private renderContent(): HTMLDivElement {\n if (this.listType === ListType.NONE) {\n return <slot />;\n }\n\n if (this.listType === ListType.ORDERED) {\n return (\n <div class=\"z-list-content-container\">\n <div>{this.listElementPosition}.&emsp;</div>\n <slot />\n </div>\n );\n }\n\n if (this.listType === ListType.UNORDERED) {\n return (\n <div class=\"z-list-content-container\">\n <span>•&emsp;</span>\n <slot />\n </div>\n );\n }\n }\n\n render(): HTMLZListElementElement {\n return (\n <Host\n aria-expanded={this.expandable ? this.showInnerContent : null}\n onClick={this.handleClick}\n onFocus={() => this.ariaDescendantFocus.emit(this.listElementId)}\n onKeyDown={this.handleKeyDown}\n clickable={this.clickable && !this.disabled}\n tabIndex={this.htmlTabindex}\n >\n <div\n class=\"container\"\n style={{color: `var(--${this.color})`}}\n tabindex=\"-1\"\n id={`z-list-element-id-${this.listElementId}`}\n part=\"list-item-container\"\n >\n <div class=\"z-list-element-container\">\n {this.renderExpandableButton()}\n {this.renderContent()}\n </div>\n {this.renderExpandedContent()}\n </div>\n {this.dividerType === ListDividerType.ELEMENT && (\n <z-divider\n color={this.dividerColor}\n size={this.dividerSize}\n />\n )}\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"index13.js","mappings":"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","names":[],"sources":["src/components/list/z-list-element/styles.css?tag=z-list-element&encapsulation=shadow","src/components/list/z-list-element/index.tsx"],"sourcesContent":[":host {\n outline: none;\n}\n\n:host > .container {\n --background-color-list-element: var(--color-surface01);\n --background-hover-color-list-element: var(--color-surface02);\n --background-active-color-list-element: var(--color-surface02);\n\n display: flex;\n box-sizing: border-box;\n flex-direction: column;\n justify-content: center;\n font-family: var(--font-family-sans);\n font-weight: var(--font-rg);\n outline: none;\n}\n\n/* z-list-element size /\n\n:host([size=\"small\"]) > .container {\n min-height: calc(var(--space-unit) 4);\n padding: calc(var(--space-unit) / 2) 0;\n}\n\n:host([size=\"medium\"]) > .container {\n min-height: calc(var(--space-unit) * 5);\n padding: var(--space-unit) 0;\n}\n\n:host([size=\"large\"]) > .container {\n min-height: calc(var(--space-unit) * 7);\n padding: calc(var(--space-unit) * 2) 0;\n}\n\n:host([size=\"x-large\"]) > .container {\n min-height: calc(var(--space-unit) * 9);\n padding: calc(var(--space-unit) * 3) 0;\n}\n\n/* ----------------- /\n\n:host([expandable]) > .container,\n:host([clickable]) > .container {\n cursor: pointer;\n}\n\n:host([expandable]:hover) > .container,\n:host([clickable]:hover) > .container {\n background-color: var(--background-hover-color-list-element);\n}\n\n:host([expandable]:focus:focus-visible) > .container,\n:host([clickable]:focus:focus-visible) > .container {\n box-shadow: var(--shadow-focus-primary);\n}\n\n:host([clickable]:not([expandable])) > .container.clicked {\n box-shadow: var(--shadow-focus-primary);\n}\n\n:host([expandable]:active) > .container,\n:host([clickable]:active) > .container {\n background-color: var(--background-active-color-list-element);\n}\n\n:host([align-button=\"left\"][expandable]) > .container > .z-list-element-container {\n display: flex;\n}\n\n:host([align-button=\"right\"][expandable]) > .container > .z-list-element-container {\n display: flex;\n flex-direction: row-reverse;\n justify-content: space-between;\n}\n\n:host([align-button=\"left\"][expandable]) > .container > .z-list-element-container > z-icon {\n margin-right: var(--space-unit);\n}\n\n:host([align-button=\"right\"][expandable]) > .container > .z-list-element-container > z-icon {\n margin-left: var(--space-unit);\n}\n\n:host > .container > .z-list-element-inner-container {\n display: none;\n}\n\n:host > .container > .z-list-element-inner-container.expanded {\n display: block;\n}\n\n.z-list-content-container {\n display: flex;\n align-items: center;\n}\n","import {Component, Element, Event, EventEmitter, h, Host, Listen, Prop, State} from \"@stencil/core\";\nimport {\n DividerSize,\n ExpandableListButtonAlign,\n ExpandableListStyle,\n KeyboardCode,\n ListDividerType,\n ListSize,\n ListType,\n} from \"../../../beans\";\n\n@Component({\n tag: \"z-list-element\",\n styleUrl: \"styles.css\",\n shadow: true,\n})\nexport class ZListElement {\n @Element() host: HTMLZListElementElement;\n\n /* remove filter click event, returns filterid /\n @Event({\n eventName: \"accessibleFocus\",\n composed: true,\n cancelable: true,\n bubbles: true,\n })\n accessibleFocus: EventEmitter<number>;\n\n /* set parent aria-activedescendant on focus event, returns filterid /\n @Event({\n eventName: \"ariaDescendantFocus\",\n composed: true,\n cancelable: true,\n bubbles: true,\n })\n ariaDescendantFocus: EventEmitter<number>;\n\n /* remove filter click event, returns filterid /\n @Event({\n eventName: \"clickItem\",\n composed: true,\n cancelable: true,\n bubbles: true,\n })\n clickItem: EventEmitter;\n\n @Listen(\"accessibleFocus\", {target: \"document\"})\n accessibleFocusHandler(e: CustomEvent): void {\n if (this.listElementId === e.detail) {\n const toFocus = this.host.shadowRoot.getElementById(`z-list-element-id-${e.detail}`);\n toFocus.focus();\n }\n }\n\n /\n [optional] Align expandable button left or right.\n /\n @Prop({reflect: true})\n alignButton?: ExpandableListButtonAlign = ExpandableListButtonAlign.LEFT;\n\n /\n [optional] Sets element clickable.\n /\n @Prop({reflect: true})\n clickable?: boolean = false;\n\n /\n [optional] Sets the divider color.\n /\n @Prop()\n dividerColor?: string = \"color-surface03\";\n\n /\n [optional] Sets the position where to insert the divider.\n /\n @Prop()\n dividerType?: ListDividerType = ListDividerType.NONE;\n\n /\n [optional] Sets the divider size.\n /\n @Prop()\n dividerSize?: DividerSize = DividerSize.SMALL;\n\n /\n [optional] Sets element as expandable.\n /\n @Prop({reflect: true})\n expandable?: boolean = false;\n\n /\n [optional] Sets expandable style to element.\n /\n @Prop()\n expandableStyle?: ExpandableListStyle = ExpandableListStyle.ACCORDION;\n\n /\n [optional] List element id.\n /\n @Prop({reflect: true})\n listElementId?: number;\n\n /\n [optional] Sets size of inside elements.\n /\n @Prop({reflect: true})\n size?: ListSize = ListSize.MEDIUM;\n\n /\n [optional] Sets text color of the element.\n /\n @Prop({reflect: true})\n color?: string = \"none\";\n\n /\n [optional] Sets disabled style of the element.\n /\n @Prop({reflect: true})\n disabled?: boolean = false;\n\n /\n [optional] position of the list element inside the list or the group\n /\n @Prop({reflect: true})\n listElementPosition?: string = \"0\";\n\n /\n [optional] type of the list marker for each element\n /\n @Prop({reflect: true})\n listType?: ListType = ListType.NONE;\n\n /\n Sets element role.\n /\n @Prop({reflect: true})\n role = \"listitem\";\n\n /* set tabindex to Host tag (optional). Defaults to 0. /\n @Prop()\n htmlTabindex?: number \| null = 0;\n\n @State()\n showInnerContent = false;\n\n private openElementConfig = {\n accordion: {\n open: \"minus-circled\",\n close: \"plus-circled\",\n },\n menu: {\n open: \"chevron-up\",\n close: \"chevron-down\",\n },\n };\n\n /\n Constructor.\n /\n constructor() {\n this.handleClick = this.handleClick.bind(this);\n this.handleKeyDown = this.handleKeyDown.bind(this);\n }\n\n /\n Handler for click on element. If element is expandable, change state.\n * @returns void\n /\n private handleClick(): void {\n this.clickItem.emit(this.listElementId);\n if (!this.expandable) {\n return;\n }\n this.showInnerContent = !this.showInnerContent;\n }\n\n private handleKeyDown(event): void {\n const expandByKey = event.code === KeyboardCode.ENTER;\n switch (event.code) {\n case KeyboardCode.ARROW_DOWN:\n event.preventDefault();\n this.accessibleFocus.emit(this.listElementId + 1);\n break;\n case KeyboardCode.ARROW_UP:\n event.preventDefault();\n this.accessibleFocus.emit(this.listElementId - 1);\n break;\n case KeyboardCode.ENTER:\n event.preventDefault();\n this.clickItem.emit(this.listElementId);\n break;\n default:\n break;\n }\n\n if (!this.expandable \|\| !expandByKey) {\n return;\n }\n this.showInnerContent = !this.showInnerContent;\n }\n\n /\n Renders button to expand element.\n * @returns expadable button\n /\n private renderExpandableButton(): HTMLZIconElement {\n if (!this.expandable) {\n return null;\n }\n\n return (\n <z-icon\n name={\n this.showInnerContent\n ? this.openElementConfig[this.expandableStyle].open\n : this.openElementConfig[this.expandableStyle].close\n }\n />\n );\n }\n\n /\n Renders expanded content if element is expandable.\n * @returns expanded content\n /\n private renderExpandedContent(): HTMLDivElement {\n if (!this.expandable) {\n return null;\n }\n\n return (\n <div\n class={{\n \"z-list-element-inner-container\": true,\n \"expanded\": this.showInnerContent,\n }}\n >\n <slot name=\"inner-content\" />\n </div>\n );\n }\n\n /\n Renders content of the z-list-element\n * @returns list content\n */\n private renderContent(): HTMLDivElement {\n if (this.listType === ListType.NONE) {\n return <slot />;\n }\n\n if (this.listType === ListType.ORDERED) {\n return (\n <div class=\"z-list-content-container\">\n <div>{this.listElementPosition}.&emsp;</div>\n <slot />\n </div>\n );\n }\n\n if (this.listType === ListType.UNORDERED) {\n return (\n <div class=\"z-list-content-container\">\n <span>•&emsp;</span>\n <slot />\n </div>\n );\n }\n }\n\n render(): HTMLZListElementElement {\n return (\n <Host\n aria-expanded={this.expandable ? this.showInnerContent : null}\n onClick={this.handleClick}\n onFocus={() => this.ariaDescendantFocus.emit(this.listElementId)}\n onKeyDown={this.handleKeyDown}\n clickable={this.clickable && !this.disabled}\n tabIndex={this.htmlTabindex}\n >\n <div\n class=\"container\"\n style={{color: `var(--${this.color})`}}\n tabindex=\"-1\"\n id={`z-list-element-id-${this.listElementId}`}\n part=\"list-item-container\"\n >\n <div class=\"z-list-element-container\">\n {this.renderExpandableButton()}\n {this.renderContent()}\n </div>\n {this.renderExpandedContent()}\n </div>\n {this.dividerType === ListDividerType.ELEMENT && (\n <z-divider\n color={this.dividerColor}\n size={this.dividerSize}\n />\n )}\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/components/index15.js CHANGED Viewed

@@ -859,7 +859,7 @@ if (window.HTMLDialogElement === undefined) {
   HTMLFormElement.prototype.submit = replacementFormSubmit;
 }
-const stylesCss = ":host{font-family:var(--font-family-sans);font-weight:var(--font-rg)}:host>dialog{padding:0;border:none;margin:0;background-color:transparent}:host>dialog:modal{width:100%;max-width:100%;max-height:100%}:host>dialog::-webkit-backdrop{display:none}:host>dialog::-ms-backdrop{display:none}:host>dialog::backdrop{display:none}:host>dialog+.backdrop{display:none}:host>dialog:not([open]){display:none}:host>dialog[open]{display:block}.modal-container{z-index:1010;display:-ms-flexbox;display:flex;overflow:-moz-scrollbars-none;width:100%;height:100vh;-ms-flex-direction:column;flex-direction:column}.modal-container>.modal-content-scroll-outside{overflow:auto;background:var(--color-surface01)}.modal-container>header{padding:calc(var(--space-unit) * 2 - 2px) calc(var(--space-unit) * 2);background:var(--color-surface02)}.modal-container>header button{padding:0;border:none;margin:0;margin-left:auto;background:transparent;cursor:pointer}.modal-container>header z-icon{--z-icon-width:calc(var(--space-unit) * 2.5);--z-icon-height:calc(var(--space-unit) * 2.5);display:-ms-flexbox;display:flex;fill:var(--color-primary01-icon)}.modal-container>header>div{display:-ms-flexbox;display:flex;width:100%;-ms-flex-align:center;align-items:center;margin-right:calc(var(--space-unit) * 2)}.modal-container>header h1,.modal-container>header .subtitle{padding:0;margin:0;color:var(--color-default-text);font-weight:var(--font-rg)}.modal-container>header h1{font-size:var(--font-size-5);letter-spacing:0;line-height:1.4}.modal-container>header .subtitle{font-size:var(--font-size-3);letter-spacing:0;line-height:1.5}.modal-container>header>div>h1 *:empty{display:none}.modal-container>header h1+.subtitle{margin-top:calc(var(--space-unit) * 0.5)}.modal-container-scroll-inside>.modal-content-scroll-inside{overflow:hidden auto;-ms-flex:1 auto;flex:1 auto;background:var(--color-surface01)}.modal-container-scroll-inside>.modal-content-scroll-inside::-webkit-scrollbar,.modal-container-scroll-outside>.modal-content-scroll-outside::-webkit-scrollbar{width:10px;background:linear-gradient(to right, transparent 0 3px, var(--gray200) 3px 7px, transparent 7px 10px);border-radius:var(--border-radius)}.modal-container-scroll-inside>.modal-content-scroll-inside::-webkit-scrollbar-thumb,.modal-container-scroll-outside>.modal-content-scroll-outside::-webkit-scrollbar-thumb{width:10px;background-color:var(--color-primary01)}.modal-container-scroll-inside>.modal-content-scroll-inside::-webkit-scrollbar-thumb:hover,.modal-container-scroll-outside>.modal-content-scroll-outside::-webkit-scrollbar-thumb:hover{background-color:var(--color-hover-primary)}.modal-container-scroll-inside .modal-content-scroll-inside,.modal-container-scroll-outside .modal-content-scroll-outside{scrollbar-color:var(--color-primary01) transparent}@media only screen and (min-width: 768px){.modal-background{position:fixed;top:0;left:0;overflow:hidden;width:100vw;height:100vh;background-color:var(--gray900);opacity:0.7}.modal-background.modal-background-scroll-outside{position:-webkit-sticky;position:sticky}.modal-container-scroll-inside{position:fixed;top:calc(var(--space-unit) * 6);left:50%;overflow:hidden;width:auto;min-width:calc(var(--space-unit) * 40);height:auto;min-height:calc(var(--space-unit) * 40);max-height:calc(100vh - calc(var(--space-unit) * 6 * 2));border-radius:var(--border-radius);-webkit-transform:translateX(-50%);transform:translateX(-50%)}.modal-container-scroll-outside{position:absolute;top:calc(var(--space-unit) * 6);left:50%;display:block;overflow:initial;width:auto;min-width:calc(var(--space-unit) * 40);height:auto;min-height:calc(var(--space-unit) * 40);max-height:calc(100vh - calc(var(--space-unit) * 6 * 2));-webkit-transform:translateX(-50%);transform:translateX(-50%)}.modal-container>.modal-content-scroll-outside{overflow:initial}.modal-container-scroll-outside>header,.modal-container-scroll-inside>header{border-top-left-radius:var(--border-radius);border-top-right-radius:var(--border-radius)}.modal-container-scroll-outside::after{display:block;height:calc(var(--space-unit) * 6);content:\" \"}.modal-dialog{position:fixed;top:0;left:0;height:auto;overflow-x:hidden;overflow-y:auto}.modal-content-scroll-outside{border-bottom-left-radius:var(--border-radius);border-bottom-right-radius:var(--border-radius)}.modal-dialog::-webkit-scrollbar{display:none}.modal-container>header z-icon{--z-icon-width:calc(var(--space-unit) * 3);--z-icon-height:calc(var(--space-unit) * 3)}}@media only screen and (min-width: 768px) and (max-width: 1151px){.modal-container>header{padding:calc(var(--space-unit) * 3 - 2px) calc(var(--space-unit) * 3)}}@media only screen and (min-width: 1152px){.modal-container>header{padding:calc(var(--space-unit) * 4 - 4px) calc(var(--space-unit) * 4)}.modal-container>header h1{font-size:var(--font-size-6);letter-spacing:0;line-height:1.33}.modal-container>header .subtitle{font-size:var(--font-size-4);letter-spacing:0;line-height:1.5}.modal-container>header h1+.subtitle{margin-top:0}}";
+const stylesCss = ":host{font-family:var(--font-family-sans);font-weight:var(--font-rg)}:host>dialog{padding:0;border:none;margin:0;background-color:transparent}:host>dialog:modal{width:100%;max-width:100%;max-height:100%}:host>dialog::backdrop{display:none}:host>dialog+.backdrop{display:none}:host>dialog:not([open]){display:none}:host>dialog[open]{display:block}.modal-container{z-index:1010;display:flex;overflow:-moz-scrollbars-none;width:100%;height:100vh;flex-direction:column}.modal-container>.modal-content-scroll-outside{overflow:auto;background:var(--color-surface01)}.modal-container>header{padding:calc(var(--space-unit) * 2 - 2px) calc(var(--space-unit) * 2);background:var(--color-surface02)}.modal-container>header button{padding:0;border:none;margin:0;margin-left:auto;background:transparent;cursor:pointer}.modal-container>header z-icon{--z-icon-width:calc(var(--space-unit) * 2.5);--z-icon-height:calc(var(--space-unit) * 2.5);display:flex;fill:var(--color-primary01-icon)}.modal-container>header>div{display:flex;width:100%;align-items:center;margin-right:calc(var(--space-unit) * 2)}.modal-container>header h1,.modal-container>header .subtitle{padding:0;margin:0;color:var(--color-default-text);font-weight:var(--font-rg)}.modal-container>header h1{font-size:var(--font-size-5);letter-spacing:0;line-height:1.4}.modal-container>header .subtitle{font-size:var(--font-size-3);letter-spacing:0;line-height:1.5}.modal-container>header>div>h1 *:empty{display:none}.modal-container>header h1+.subtitle{margin-top:calc(var(--space-unit) * 0.5)}.modal-container-scroll-inside>.modal-content-scroll-inside{overflow:hidden auto;flex:1 auto;background:var(--color-surface01)}.modal-container-scroll-inside>.modal-content-scroll-inside::-webkit-scrollbar,.modal-container-scroll-outside>.modal-content-scroll-outside::-webkit-scrollbar{width:10px;background:linear-gradient(to right, transparent 0 3px, var(--gray200) 3px 7px, transparent 7px 10px);border-radius:var(--border-radius)}.modal-container-scroll-inside>.modal-content-scroll-inside::-webkit-scrollbar-thumb,.modal-container-scroll-outside>.modal-content-scroll-outside::-webkit-scrollbar-thumb{width:10px;background-color:var(--color-primary01)}.modal-container-scroll-inside>.modal-content-scroll-inside::-webkit-scrollbar-thumb:hover,.modal-container-scroll-outside>.modal-content-scroll-outside::-webkit-scrollbar-thumb:hover{background-color:var(--color-hover-primary)}.modal-container-scroll-inside .modal-content-scroll-inside,.modal-container-scroll-outside .modal-content-scroll-outside{scrollbar-color:var(--color-primary01) transparent}@media only screen and (min-width: 768px){.modal-background{position:fixed;top:0;left:0;overflow:hidden;width:100vw;height:100vh;background-color:var(--gray900);opacity:0.7}.modal-background.modal-background-scroll-outside{position:sticky}.modal-container-scroll-inside{position:fixed;top:calc(var(--space-unit) * 6);left:50%;overflow:hidden;width:auto;min-width:calc(var(--space-unit) * 40);height:auto;min-height:calc(var(--space-unit) * 40);max-height:calc(100vh - calc(var(--space-unit) * 6 * 2));border-radius:var(--border-radius);transform:translateX(-50%)}.modal-container-scroll-outside{position:absolute;top:calc(var(--space-unit) * 6);left:50%;display:block;overflow:initial;width:auto;min-width:calc(var(--space-unit) * 40);height:auto;min-height:calc(var(--space-unit) * 40);max-height:calc(100vh - calc(var(--space-unit) * 6 * 2));transform:translateX(-50%)}.modal-container>.modal-content-scroll-outside{overflow:initial}.modal-container-scroll-outside>header,.modal-container-scroll-inside>header{border-top-left-radius:var(--border-radius);border-top-right-radius:var(--border-radius)}.modal-container-scroll-outside::after{display:block;height:calc(var(--space-unit) * 6);content:\" \"}.modal-dialog{position:fixed;top:0;left:0;height:auto;overflow-x:hidden;overflow-y:auto}.modal-content-scroll-outside{border-bottom-left-radius:var(--border-radius);border-bottom-right-radius:var(--border-radius)}.modal-dialog::-webkit-scrollbar{display:none}.modal-container>header z-icon{--z-icon-width:calc(var(--space-unit) * 3);--z-icon-height:calc(var(--space-unit) * 3)}}@media only screen and (min-width: 768px) and (max-width: 1151px){.modal-container>header{padding:calc(var(--space-unit) * 3 - 2px) calc(var(--space-unit) * 3)}}@media only screen and (min-width: 1152px){.modal-container>header{padding:calc(var(--space-unit) * 4 - 4px) calc(var(--space-unit) * 4)}.modal-container>header h1{font-size:var(--font-size-6);letter-spacing:0;line-height:1.33}.modal-container>header .subtitle{font-size:var(--font-size-4);letter-spacing:0;line-height:1.5}.modal-container>header h1+.subtitle{margin-top:0}}";
 const ZModalStyle0 = stylesCss;
 const FOCUSABLE_ELEMENTS_SELECTOR = ':is(button, input, select, textarea, [contenteditable=""], [contenteditable="true"], a[href], [tabindex], summary):not([disabled], [disabled=""], [tabindex="-1"], [aria-hidden="true"], [hidden])';