@zanichelli/albe-web-components 20.0.0-RC1 → 20.0.1
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.
- package/CHANGELOG.md +42 -0
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/cjs/web-components-library.cjs.js +1 -1
- package/dist/cjs/z-app-header_12.cjs.entry.js +29 -7
- package/dist/cjs/z-app-header_12.cjs.entry.js.map +1 -1
- package/dist/cjs/z-book-card.cjs.entry.js +6 -2
- package/dist/cjs/z-book-card.cjs.entry.js.map +1 -1
- package/dist/cjs/z-combobox.cjs.entry.js +6 -4
- package/dist/cjs/z-combobox.cjs.entry.js.map +1 -1
- package/dist/cjs/z-dragdrop-area_2.cjs.entry.js +2 -2
- package/dist/cjs/z-file.cjs.entry.js +1 -1
- package/dist/cjs/z-table.cjs.entry.js +1 -1
- package/dist/cjs/z-table.cjs.entry.js.map +1 -1
- package/dist/cjs/z-tbody.cjs.entry.js +1 -1
- package/dist/cjs/z-tbody.cjs.entry.js.map +1 -1
- package/dist/cjs/z-td.cjs.entry.js +1 -1
- package/dist/cjs/z-td.cjs.entry.js.map +1 -1
- package/dist/cjs/z-tfoot.cjs.entry.js +1 -1
- package/dist/cjs/z-tfoot.cjs.entry.js.map +1 -1
- package/dist/cjs/z-th.cjs.entry.js +1 -1
- package/dist/cjs/z-th.cjs.entry.js.map +1 -1
- package/dist/cjs/z-thead.cjs.entry.js +1 -1
- package/dist/cjs/z-thead.cjs.entry.js.map +1 -1
- package/dist/cjs/z-tr.cjs.entry.js +1 -1
- package/dist/cjs/z-tr.cjs.entry.js.map +1 -1
- package/dist/cjs/z-tree-list.cjs.entry.js +1 -1
- package/dist/collection/collection-manifest.json +7 -7
- package/dist/collection/components/book-card/z-book-card/index.js +7 -3
- package/dist/collection/components/book-card/z-book-card/index.js.map +1 -1
- package/dist/collection/components/{table → deprecated/table}/cells/z-td/index.js +6 -6
- package/dist/collection/components/deprecated/table/cells/z-td/index.js.map +1 -0
- package/dist/collection/components/{table → deprecated/table}/cells/z-th/index.js +8 -8
- package/dist/collection/components/deprecated/table/cells/z-th/index.js.map +1 -0
- package/dist/collection/components/{table → deprecated/table}/z-table/index.js +3 -3
- package/dist/collection/components/deprecated/table/z-table/index.js.map +1 -0
- package/dist/collection/components/{table → deprecated/table}/z-tbody/index.js +3 -3
- package/dist/collection/components/deprecated/table/z-tbody/index.js.map +1 -0
- package/dist/collection/components/{table → deprecated/table}/z-tfoot/index.js +3 -3
- package/dist/collection/components/deprecated/table/z-tfoot/index.js.map +1 -0
- package/dist/collection/components/{table → deprecated/table}/z-thead/index.js +3 -3
- package/dist/collection/components/deprecated/table/z-thead/index.js.map +1 -0
- package/dist/collection/components/{table → deprecated/table}/z-tr/index.js +4 -4
- package/dist/collection/components/deprecated/table/z-tr/index.js.map +1 -0
- package/dist/collection/components/file-upload/z-dragdrop-area/index.js +2 -2
- package/dist/collection/components/file-upload/z-file/index.js +1 -1
- package/dist/collection/components/list/z-list/index.js +1 -1
- package/dist/collection/components/list/z-list-element/index.js +1 -1
- package/dist/collection/components/list/z-list-group/index.js +2 -2
- package/dist/collection/components/list/z-tree-list/index.js +1 -1
- package/dist/collection/components/z-combobox/index.js +5 -3
- package/dist/collection/components/z-combobox/index.js.map +1 -1
- package/dist/collection/components/z-combobox/styles.css +1 -1
- package/dist/collection/components/z-input/index.js +45 -2
- package/dist/collection/components/z-input/index.js.map +1 -1
- package/dist/collection/components/z-input/styles-checkbox-radio.css +2 -2
- package/dist/components/index.d.ts +7 -7
- package/dist/components/index10.js +1 -1
- package/dist/components/index19.js +1 -1
- package/dist/components/index6.js +1 -1
- package/dist/components/index6.js.map +1 -1
- package/dist/components/index8.js +1 -1
- package/dist/components/index9.js +1 -1
- package/dist/components/z-book-card.js +1 -1
- package/dist/components/z-book-card.js.map +1 -1
- package/dist/components/z-combobox.js +1 -1
- package/dist/components/z-combobox.js.map +1 -1
- package/dist/components/z-file.js +1 -1
- package/dist/components/z-table.js +1 -1
- package/dist/components/z-table.js.map +1 -1
- package/dist/components/z-tbody.js +1 -1
- package/dist/components/z-tbody.js.map +1 -1
- package/dist/components/z-td.js +1 -1
- package/dist/components/z-td.js.map +1 -1
- package/dist/components/z-tfoot.js +1 -1
- package/dist/components/z-tfoot.js.map +1 -1
- package/dist/components/z-th.js +1 -1
- package/dist/components/z-th.js.map +1 -1
- package/dist/components/z-thead.js +1 -1
- package/dist/components/z-thead.js.map +1 -1
- package/dist/components/z-tr.js +1 -1
- package/dist/components/z-tr.js.map +1 -1
- package/dist/components/z-tree-list.js +1 -1
- package/dist/esm/loader.js +1 -1
- package/dist/esm/web-components-library.js +1 -1
- package/dist/esm/z-app-header_12.entry.js +29 -7
- package/dist/esm/z-app-header_12.entry.js.map +1 -1
- package/dist/esm/z-book-card.entry.js +6 -2
- package/dist/esm/z-book-card.entry.js.map +1 -1
- package/dist/esm/z-combobox.entry.js +6 -4
- package/dist/esm/z-combobox.entry.js.map +1 -1
- package/dist/esm/z-dragdrop-area_2.entry.js +2 -2
- package/dist/esm/z-file.entry.js +1 -1
- package/dist/esm/z-table.entry.js +1 -1
- package/dist/esm/z-table.entry.js.map +1 -1
- package/dist/esm/z-tbody.entry.js +1 -1
- package/dist/esm/z-tbody.entry.js.map +1 -1
- package/dist/esm/z-td.entry.js +1 -1
- package/dist/esm/z-td.entry.js.map +1 -1
- package/dist/esm/z-tfoot.entry.js +1 -1
- package/dist/esm/z-tfoot.entry.js.map +1 -1
- package/dist/esm/z-th.entry.js +1 -1
- package/dist/esm/z-th.entry.js.map +1 -1
- package/dist/esm/z-thead.entry.js +1 -1
- package/dist/esm/z-thead.entry.js.map +1 -1
- package/dist/esm/z-tr.entry.js +1 -1
- package/dist/esm/z-tr.entry.js.map +1 -1
- package/dist/esm/z-tree-list.entry.js +1 -1
- package/dist/types/components/book-card/z-book-card/index.d.ts +5 -1
- package/dist/types/components/{table → deprecated/table}/cells/z-td/index.d.ts +2 -2
- package/dist/types/components/{table → deprecated/table}/cells/z-th/index.d.ts +2 -2
- package/dist/types/components/{table → deprecated/table}/z-table/index.d.ts +1 -1
- package/dist/types/components/{table → deprecated/table}/z-tbody/index.d.ts +1 -1
- package/dist/types/components/{table → deprecated/table}/z-tfoot/index.d.ts +1 -1
- package/dist/types/components/{table → deprecated/table}/z-thead/index.d.ts +1 -1
- package/dist/types/components/{table → deprecated/table}/z-tr/index.d.ts +1 -1
- package/dist/types/components/z-input/index.d.ts +4 -0
- package/dist/types/components.d.ts +13 -2
- package/dist/web-components-library/p-1bd296f5.entry.js +2 -0
- package/dist/web-components-library/p-1bd296f5.entry.js.map +1 -0
- package/dist/web-components-library/p-1d050092.entry.js +2 -0
- package/dist/web-components-library/{p-b7620e80.entry.js → p-2cc3ac9f.entry.js} +2 -2
- package/dist/web-components-library/p-2cc3ac9f.entry.js.map +1 -0
- package/dist/web-components-library/{p-8f4fcd01.entry.js → p-2e398b4d.entry.js} +2 -2
- package/dist/web-components-library/p-3f787c19.entry.js +2 -0
- package/dist/web-components-library/p-3f787c19.entry.js.map +1 -0
- package/dist/web-components-library/{p-121f224a.entry.js → p-53943e9a.entry.js} +2 -2
- package/dist/web-components-library/{p-51ebf661.entry.js → p-59651b67.entry.js} +2 -2
- package/dist/web-components-library/p-59651b67.entry.js.map +1 -0
- package/{www/build/p-ccedd440.entry.js → dist/web-components-library/p-65c404bc.entry.js} +2 -2
- package/dist/web-components-library/p-65c404bc.entry.js.map +1 -0
- package/{www/build/p-53c51bf4.entry.js → dist/web-components-library/p-6b816b15.entry.js} +2 -2
- package/{www/build/p-53c51bf4.entry.js.map → dist/web-components-library/p-6b816b15.entry.js.map} +1 -1
- package/dist/web-components-library/{p-1ef66142.entry.js → p-6e49b67e.entry.js} +2 -2
- package/dist/web-components-library/p-6e49b67e.entry.js.map +1 -0
- package/dist/web-components-library/{p-3748979c.entry.js → p-8e1363c6.entry.js} +2 -2
- package/dist/web-components-library/p-8e1363c6.entry.js.map +1 -0
- package/dist/web-components-library/{p-a52b3dd1.entry.js → p-a1eb1dfd.entry.js} +2 -2
- package/dist/web-components-library/p-a1eb1dfd.entry.js.map +1 -0
- package/{www/build/p-904c7fdd.entry.js → dist/web-components-library/p-f841b50f.entry.js} +2 -2
- package/dist/web-components-library/p-f841b50f.entry.js.map +1 -0
- package/dist/web-components-library/web-components-library.esm.js +1 -1
- package/package.json +2 -3
- package/www/build/p-1bd296f5.entry.js +2 -0
- package/www/build/p-1bd296f5.entry.js.map +1 -0
- package/www/build/p-1d050092.entry.js +2 -0
- package/www/build/{p-b7620e80.entry.js → p-2cc3ac9f.entry.js} +2 -2
- package/www/build/p-2cc3ac9f.entry.js.map +1 -0
- package/www/build/{p-8f4fcd01.entry.js → p-2e398b4d.entry.js} +2 -2
- package/www/build/p-3f787c19.entry.js +2 -0
- package/www/build/p-3f787c19.entry.js.map +1 -0
- package/www/build/{p-121f224a.entry.js → p-53943e9a.entry.js} +2 -2
- package/www/build/{p-51ebf661.entry.js → p-59651b67.entry.js} +2 -2
- package/www/build/p-59651b67.entry.js.map +1 -0
- package/{dist/web-components-library/p-ccedd440.entry.js → www/build/p-65c404bc.entry.js} +2 -2
- package/www/build/p-65c404bc.entry.js.map +1 -0
- package/{dist/web-components-library/p-53c51bf4.entry.js → www/build/p-6b816b15.entry.js} +2 -2
- package/{dist/web-components-library/p-53c51bf4.entry.js.map → www/build/p-6b816b15.entry.js.map} +1 -1
- package/www/build/{p-1ef66142.entry.js → p-6e49b67e.entry.js} +2 -2
- package/www/build/p-6e49b67e.entry.js.map +1 -0
- package/www/build/{p-3748979c.entry.js → p-8e1363c6.entry.js} +2 -2
- package/www/build/p-8e1363c6.entry.js.map +1 -0
- package/www/build/p-955f0d65.js +2 -0
- package/www/build/{p-a52b3dd1.entry.js → p-a1eb1dfd.entry.js} +2 -2
- package/www/build/p-a1eb1dfd.entry.js.map +1 -0
- package/{dist/web-components-library/p-904c7fdd.entry.js → www/build/p-f841b50f.entry.js} +2 -2
- package/www/build/p-f841b50f.entry.js.map +1 -0
- package/www/build/web-components-library.esm.js +1 -1
- package/www/index.html +1 -1
- package/dist/collection/components/table/cells/z-td/index.js.map +0 -1
- package/dist/collection/components/table/cells/z-th/index.js.map +0 -1
- package/dist/collection/components/table/z-table/index.js.map +0 -1
- package/dist/collection/components/table/z-tbody/index.js.map +0 -1
- package/dist/collection/components/table/z-tfoot/index.js.map +0 -1
- package/dist/collection/components/table/z-thead/index.js.map +0 -1
- package/dist/collection/components/table/z-tr/index.js.map +0 -1
- package/dist/web-components-library/p-02fb0bf9.entry.js +0 -2
- package/dist/web-components-library/p-1ef66142.entry.js.map +0 -1
- package/dist/web-components-library/p-3748979c.entry.js.map +0 -1
- package/dist/web-components-library/p-51ebf661.entry.js.map +0 -1
- package/dist/web-components-library/p-5a43af47.entry.js +0 -2
- package/dist/web-components-library/p-5a43af47.entry.js.map +0 -1
- package/dist/web-components-library/p-8d2704ee.entry.js +0 -2
- package/dist/web-components-library/p-8d2704ee.entry.js.map +0 -1
- package/dist/web-components-library/p-904c7fdd.entry.js.map +0 -1
- package/dist/web-components-library/p-a52b3dd1.entry.js.map +0 -1
- package/dist/web-components-library/p-b7620e80.entry.js.map +0 -1
- package/dist/web-components-library/p-ccedd440.entry.js.map +0 -1
- package/www/build/p-02fb0bf9.entry.js +0 -2
- package/www/build/p-1ef66142.entry.js.map +0 -1
- package/www/build/p-3748979c.entry.js.map +0 -1
- package/www/build/p-51ebf661.entry.js.map +0 -1
- package/www/build/p-5a1df5b1.js +0 -2
- package/www/build/p-5a43af47.entry.js +0 -2
- package/www/build/p-5a43af47.entry.js.map +0 -1
- package/www/build/p-8d2704ee.entry.js +0 -2
- package/www/build/p-8d2704ee.entry.js.map +0 -1
- package/www/build/p-904c7fdd.entry.js.map +0 -1
- package/www/build/p-a52b3dd1.entry.js.map +0 -1
- package/www/build/p-b7620e80.entry.js.map +0 -1
- package/www/build/p-ccedd440.entry.js.map +0 -1
- /package/dist/collection/components/{table → deprecated/table}/cells/z-table-cells.css +0 -0
- /package/dist/collection/components/{table → deprecated/table}/cells/z-th/styles.css +0 -0
- /package/dist/collection/components/{table → deprecated/table}/z-table/styles.css +0 -0
- /package/dist/collection/components/{table → deprecated/table}/z-tbody/styles.css +0 -0
- /package/dist/collection/components/{table → deprecated/table}/z-tfoot/styles.css +0 -0
- /package/dist/collection/components/{table → deprecated/table}/z-thead/styles.css +0 -0
- /package/dist/collection/components/{table → deprecated/table}/z-tr/styles.css +0 -0
- /package/dist/web-components-library/{p-02fb0bf9.entry.js.map → p-1d050092.entry.js.map} +0 -0
- /package/dist/web-components-library/{p-8f4fcd01.entry.js.map → p-2e398b4d.entry.js.map} +0 -0
- /package/dist/web-components-library/{p-121f224a.entry.js.map → p-53943e9a.entry.js.map} +0 -0
- /package/www/build/{p-02fb0bf9.entry.js.map → p-1d050092.entry.js.map} +0 -0
- /package/www/build/{p-8f4fcd01.entry.js.map → p-2e398b4d.entry.js.map} +0 -0
- /package/www/build/{p-121f224a.entry.js.map → p-53943e9a.entry.js.map} +0 -0
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/z-input/index.tsx"],"names":[],"mappings":"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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {\n Component,\n ComponentInterface,\n Element,\n Event,\n EventEmitter,\n Listen,\n Method,\n Prop,\n State,\n h,\n} from \"@stencil/core\";\nimport {Fragment, 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 implements ComponentInterface {\n @Element() hostElement: HTMLZInputElement;\n\n /** the id of the input element */\n @Prop()\n htmlid = `id-${randomId()}`;\n\n /** Input type */\n @Prop()\n type: InputType = InputType.TEXT;\n\n /** the input `name` attribute */\n @Prop()\n name?: string;\n\n /** the input label */\n @Prop()\n label?: string;\n\n /** the input `aria-label` */\n @Prop()\n htmlAriaLabel?: string;\n\n /** the input `aria-expanded`: available for text, password, number, email */\n @Prop()\n htmlAriaExpanded?: string;\n\n /** the input `aria-controls` (optional): available for text, password, number, email */\n @Prop()\n htmlAriaControls?: string;\n\n /** the input `aria-autocomplete` (optional): available for text, password, number, email */\n @Prop()\n htmlAriaAutocomplete?: string;\n\n /** the input `aria-activedescendant` (optional): available for text, password, number, email */\n @Prop()\n htmlAriaActivedescendant?: string;\n\n /** the input `aria-describedby` (optional) */\n @Prop()\n htmlAriaDescribedby?: string;\n\n /** the input `aria-labelledby` (optional) */\n @Prop()\n htmlAriaLabelledby?: 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 htmlRole?: string;\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 },\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 inputHasMessage(): boolean {\n if (typeof boolean(this.message) === \"boolean\") {\n return false;\n }\n\n return true;\n }\n\n private getAriaAttributes(): Record<string, string | undefined> {\n return {\n \"role\": this.htmlRole || undefined,\n \"aria-describedby\": this.htmlAriaDescribedby || undefined,\n \"aria-labelledby\": this.htmlAriaLabelledby || undefined,\n };\n }\n\n private getTextAriaAttributes(): Record<string, string | undefined> {\n return {\n ...this.getAriaAttributes(),\n \"aria-expanded\": this.htmlAriaExpanded || undefined,\n \"aria-controls\": this.htmlAriaControls || undefined,\n \"aria-autocomplete\": this.htmlAriaAutocomplete || undefined,\n \"aria-activedescendant\": this.htmlAriaActivedescendant || undefined,\n \"aria-describedby\":\n this.htmlAriaDescribedby || this.inputHasMessage()\n ? this.htmlAriaDescribedby || `${this.htmlid}-message`\n : undefined,\n \"aria-invalid\": this.status === InputStatus.ERROR ? \"true\" : undefined,\n \"aria-required\": this.required ? \"true\" : undefined,\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 attr = {\n ...this.getTextAttributes(),\n ...this.getNumberAttributes(type),\n ...this.getPatternAttribute(type),\n ...this.getTextAriaAttributes(),\n ...this.getFocusBlurAttributes(),\n \"aria-label\": this.htmlAriaLabel || undefined,\n };\n\n attr.class = {\n ...(attr.class as {[className: string]: boolean}),\n \"has-icon\": !!this.icon || type === InputType.PASSWORD,\n \"has-clear-icon\": this.hasclearicon && type != InputType.NUMBER,\n };\n\n return (\n <div class=\"text-wrapper\">\n {this.renderLabel()}\n <div>\n <input\n {...attr}\n type={type === InputType.PASSWORD && !this.passwordHidden ? InputType.TEXT : type}\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=\"z-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 <z-icon\n name={this.icon}\n class={{[this.size]: true, \"input-icon\": true}}\n />\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={{\"reset-icon\": true, \"input-icon\": true, hidden}}\n aria-label=\"cancella il contenuto dell'input\"\n onClick={() => {\n this.inputRef.value = \"\";\n this.emitInputChange(\"\");\n this.inputRef.focus();\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=\"input-icon toggle-password-icon\"\n disabled={this.disabled}\n aria-label=\"mostra password\"\n aria-pressed={!this.passwordHidden ? \"true\" : \"false\"}\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 html-id={`${this.htmlid}-message`}\n message={boolean(this.message) === true ? undefined : (this.message as string)}\n status={this.status}\n class={this.size}\n disabled={this.disabled}\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 ariaAttributes = this.getTextAriaAttributes();\n\n return (\n <Fragment>\n {this.renderLabel()}\n <div\n class={{\n ...(attributes.class as {[className: string]: boolean}),\n \"textarea-wrapper\": true,\n \"readonly\": !!attributes.readonly,\n }}\n >\n <textarea\n {...attributes}\n {...ariaAttributes}\n class={{\n ...(attributes.class as {[className: string]: boolean}),\n \"z-scrollbar\": true,\n }}\n aria-label={this.htmlAriaLabel || undefined}\n ></textarea>\n </div>\n {this.renderMessage()}\n </Fragment>\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 const ariaRequired = this.required ? {\"aria-required\": \"true\"} : {};\n\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 {...ariaRequired}\n {...this.getAriaAttributes()}\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 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 const ariaRequired = this.required ? {\"aria-required\": \"true\"} : {};\n\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 required={this.required}\n onChange={this.handleCheck.bind(this)}\n value={this.value}\n {...this.getAriaAttributes()}\n {...this.getFocusBlurAttributes()}\n {...ariaRequired}\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 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 switch (this.type) {\n case InputType.TEXTAREA:\n return this.renderTextarea();\n case InputType.CHECKBOX:\n return this.renderCheckbox();\n case InputType.RADIO:\n return this.renderRadio();\n case InputType.TEXT:\n default:\n return this.renderInputText(this.type);\n }\n }\n}\n"]}
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/z-input/index.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n Component,\n ComponentInterface,\n Element,\n Event,\n EventEmitter,\n Listen,\n Method,\n Prop,\n State,\n Watch,\n h,\n} from \"@stencil/core\";\nimport {Fragment, 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 implements ComponentInterface {\n @Element() hostElement: HTMLZInputElement;\n\n /** the id of the input element */\n @Prop()\n htmlid = `id-${randomId()}`;\n\n /** Input type */\n @Prop()\n type: InputType = InputType.TEXT;\n\n /** the input `name` attribute */\n @Prop()\n name?: string;\n\n /** the input label */\n @Prop()\n label?: string;\n\n /** the input `aria-label` */\n @Prop()\n htmlAriaLabel?: string;\n\n /** the input `aria-expanded`: available for text, password, number, email */\n @Prop()\n htmlAriaExpanded?: string;\n\n /** the input `aria-controls` (optional): available for text, password, number, email */\n @Prop()\n htmlAriaControls?: string;\n\n /** the input `aria-autocomplete` (optional): available for text, password, number, email */\n @Prop()\n htmlAriaAutocomplete?: string;\n\n /** the input `aria-activedescendant` (optional): available for text, password, number, email */\n @Prop()\n htmlAriaActivedescendant?: string;\n\n /** the input `aria-describedby` (optional) */\n @Prop()\n htmlAriaDescribedby?: string;\n\n /** the input `aria-labelledby` (optional) */\n @Prop()\n htmlAriaLabelledby?: 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 /** indeterminate: available for checkbox */\n @Prop({mutable: true})\n indeterminate?: 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 htmlRole?: string;\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 @Watch(\"indeterminate\")\n watchIndeterminate(): void {\n this.syncCheckboxIndeterminate();\n }\n\n private syncCheckboxIndeterminate(): void {\n if (this.type !== InputType.CHECKBOX || !this.inputRef) {\n return;\n }\n\n this.inputRef.indeterminate = !!this.indeterminate;\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 },\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 inputHasMessage(): boolean {\n if (typeof boolean(this.message) === \"boolean\") {\n return false;\n }\n\n return true;\n }\n\n private getAriaAttributes(): Record<string, string | undefined> {\n return {\n \"role\": this.htmlRole || undefined,\n \"aria-describedby\": this.htmlAriaDescribedby || undefined,\n \"aria-labelledby\": this.htmlAriaLabelledby || undefined,\n };\n }\n\n private getTextAriaAttributes(): Record<string, string | undefined> {\n return {\n ...this.getAriaAttributes(),\n \"aria-expanded\": this.htmlAriaExpanded || undefined,\n \"aria-controls\": this.htmlAriaControls || undefined,\n \"aria-autocomplete\": this.htmlAriaAutocomplete || undefined,\n \"aria-activedescendant\": this.htmlAriaActivedescendant || undefined,\n \"aria-describedby\":\n this.htmlAriaDescribedby || this.inputHasMessage()\n ? this.htmlAriaDescribedby || `${this.htmlid}-message`\n : undefined,\n \"aria-invalid\": this.status === InputStatus.ERROR ? \"true\" : undefined,\n \"aria-required\": this.required ? \"true\" : undefined,\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 attr = {\n ...this.getTextAttributes(),\n ...this.getNumberAttributes(type),\n ...this.getPatternAttribute(type),\n ...this.getTextAriaAttributes(),\n ...this.getFocusBlurAttributes(),\n \"aria-label\": this.htmlAriaLabel || undefined,\n };\n\n attr.class = {\n ...(attr.class as {[className: string]: boolean}),\n \"has-icon\": !!this.icon || type === InputType.PASSWORD,\n \"has-clear-icon\": this.hasclearicon && type != InputType.NUMBER,\n };\n\n return (\n <div class=\"text-wrapper\">\n {this.renderLabel()}\n <div>\n <input\n {...attr}\n type={type === InputType.PASSWORD && !this.passwordHidden ? InputType.TEXT : type}\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=\"z-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 <z-icon\n name={this.icon}\n class={{[this.size]: true, \"input-icon\": true}}\n />\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={{\"reset-icon\": true, \"input-icon\": true, hidden}}\n aria-label=\"cancella il contenuto dell'input\"\n onClick={() => {\n this.inputRef.value = \"\";\n this.emitInputChange(\"\");\n this.inputRef.focus();\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=\"input-icon toggle-password-icon\"\n disabled={this.disabled}\n aria-label=\"mostra password\"\n aria-pressed={!this.passwordHidden ? \"true\" : \"false\"}\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 html-id={`${this.htmlid}-message`}\n message={boolean(this.message) === true ? undefined : (this.message as string)}\n status={this.status}\n class={this.size}\n disabled={this.disabled}\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 ariaAttributes = this.getTextAriaAttributes();\n\n return (\n <Fragment>\n {this.renderLabel()}\n <div\n class={{\n ...(attributes.class as {[className: string]: boolean}),\n \"textarea-wrapper\": true,\n \"readonly\": !!attributes.readonly,\n }}\n >\n <textarea\n {...attributes}\n {...ariaAttributes}\n class={{\n ...(attributes.class as {[className: string]: boolean}),\n \"z-scrollbar\": true,\n }}\n aria-label={this.htmlAriaLabel || undefined}\n ></textarea>\n </div>\n {this.renderMessage()}\n </Fragment>\n );\n }\n\n /* END textarea */\n\n private handleCheck(ev: Event): void {\n if (this.type === InputType.CHECKBOX && this.indeterminate) {\n this.indeterminate = false;\n }\n\n this.checked = (ev.target as HTMLInputElement).checked;\n this.emitInputCheck(this.checked);\n }\n\n /* START checkbox */\n private renderCheckbox(): HTMLDivElement {\n const ariaRequired = this.required ? {\"aria-required\": \"true\"} : {};\n\n return (\n <div class=\"checkbox-wrapper\">\n <input\n id={this.htmlid}\n type=\"checkbox\"\n name={this.name}\n checked={this.indeterminate ? false : 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 {...ariaRequired}\n {...this.getAriaAttributes()}\n {...this.getFocusBlurAttributes()}\n ref={(el) => {\n this.inputRef = el;\n this.syncCheckboxIndeterminate();\n }}\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.indeterminate ? \"indeterminated-checkbox\" : this.checked ? \"checkbox-checked\" : \"checkbox\"}\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 const ariaRequired = this.required ? {\"aria-required\": \"true\"} : {};\n\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 required={this.required}\n onChange={this.handleCheck.bind(this)}\n value={this.value}\n {...this.getAriaAttributes()}\n {...this.getFocusBlurAttributes()}\n {...ariaRequired}\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 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 switch (this.type) {\n case InputType.TEXTAREA:\n return this.renderTextarea();\n case InputType.CHECKBOX:\n return this.renderCheckbox();\n case InputType.RADIO:\n return this.renderRadio();\n case InputType.TEXT:\n default:\n return this.renderInputText(this.type);\n }\n }\n}\n"]}
|
|
@@ -5,7 +5,7 @@
|
|
|
5
5
|
flex-direction: row;
|
|
6
6
|
align-items: center;
|
|
7
7
|
color: var(--color-default-text);
|
|
8
|
-
fill: var(--color-primary01);
|
|
8
|
+
fill: var(--color-primary01-icon);
|
|
9
9
|
font-family: var(--font-family-sans);
|
|
10
10
|
}
|
|
11
11
|
|
|
@@ -128,5 +128,5 @@
|
|
|
128
128
|
.radio-wrapper > input:disabled + .radio-label > z-icon,
|
|
129
129
|
.checkbox-wrapper > input:disabled + .checkbox-label > z-icon {
|
|
130
130
|
cursor: default;
|
|
131
|
-
fill: var(--color-
|
|
131
|
+
fill: var(--color-disabled03-icon);
|
|
132
132
|
}
|
|
@@ -95,19 +95,19 @@ export { ZStepper as ZStepper } from '../types/components/z-stepper/index';
|
|
|
95
95
|
export { defineCustomElement as defineCustomElementZStepper } from './z-stepper';
|
|
96
96
|
export { ZStepperItem as ZStepperItem } from '../types/components/z-stepper-item/index';
|
|
97
97
|
export { defineCustomElement as defineCustomElementZStepperItem } from './z-stepper-item';
|
|
98
|
-
export { ZTable as ZTable } from '../types/components/table/z-table/index';
|
|
98
|
+
export { ZTable as ZTable } from '../types/components/deprecated/table/z-table/index';
|
|
99
99
|
export { defineCustomElement as defineCustomElementZTable } from './z-table';
|
|
100
100
|
export { ZTag as ZTag } from '../types/components/z-tag/index';
|
|
101
101
|
export { defineCustomElement as defineCustomElementZTag } from './z-tag';
|
|
102
|
-
export { ZTbody as ZTbody } from '../types/components/table/z-tbody/index';
|
|
102
|
+
export { ZTbody as ZTbody } from '../types/components/deprecated/table/z-tbody/index';
|
|
103
103
|
export { defineCustomElement as defineCustomElementZTbody } from './z-tbody';
|
|
104
|
-
export { ZTd as ZTd } from '../types/components/table/cells/z-td/index';
|
|
104
|
+
export { ZTd as ZTd } from '../types/components/deprecated/table/cells/z-td/index';
|
|
105
105
|
export { defineCustomElement as defineCustomElementZTd } from './z-td';
|
|
106
|
-
export { ZTfoot as ZTfoot } from '../types/components/table/z-tfoot/index';
|
|
106
|
+
export { ZTfoot as ZTfoot } from '../types/components/deprecated/table/z-tfoot/index';
|
|
107
107
|
export { defineCustomElement as defineCustomElementZTfoot } from './z-tfoot';
|
|
108
|
-
export { ZTh as ZTh } from '../types/components/table/cells/z-th/index';
|
|
108
|
+
export { ZTh as ZTh } from '../types/components/deprecated/table/cells/z-th/index';
|
|
109
109
|
export { defineCustomElement as defineCustomElementZTh } from './z-th';
|
|
110
|
-
export { ZThead as ZThead } from '../types/components/table/z-thead/index';
|
|
110
|
+
export { ZThead as ZThead } from '../types/components/deprecated/table/z-thead/index';
|
|
111
111
|
export { defineCustomElement as defineCustomElementZThead } from './z-thead';
|
|
112
112
|
export { ZToastNotification as ZToastNotification } from '../types/components/z-toast-notification/index';
|
|
113
113
|
export { defineCustomElement as defineCustomElementZToastNotification } from './z-toast-notification';
|
|
@@ -121,7 +121,7 @@ export { ZToolbar as ZToolbar } from '../types/components/z-toolbar/index';
|
|
|
121
121
|
export { defineCustomElement as defineCustomElementZToolbar } from './z-toolbar';
|
|
122
122
|
export { ZTooltip as ZTooltip } from '../types/components/z-tooltip/index';
|
|
123
123
|
export { defineCustomElement as defineCustomElementZTooltip } from './z-tooltip';
|
|
124
|
-
export { ZTr as ZTr } from '../types/components/table/z-tr/index';
|
|
124
|
+
export { ZTr as ZTr } from '../types/components/deprecated/table/z-tr/index';
|
|
125
125
|
export { defineCustomElement as defineCustomElementZTr } from './z-tr';
|
|
126
126
|
export { ZTreeList as ZTreeList } from '../types/components/list/z-tree-list/index';
|
|
127
127
|
export { defineCustomElement as defineCustomElementZTreeList } from './z-tree-list';
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{proxyCustomElement as e,HTMLElement as t,h as i,Host as s,transformTag as r}from"@stencil/core/internal/client";import{i as o,l as
|
|
1
|
+
import{proxyCustomElement as e,HTMLElement as t,h as i,Host as s,transformTag as r}from"@stencil/core/internal/client";import{i as o,l as d,D as a,m as n}from"./index2.js";import{d as h}from"./index5.js";const l=()=>`:host{font-family:var(--font-family-sans);font-weight:var(--font-rg)}:host>.z-list-group-header-container{color:var(--gray700);font-size:var(--font-size-2);font-weight:var(--font-sb) !important;letter-spacing:0.16px;line-height:1.4}:host>.z-list-group-header-container.has-header{padding-top:calc(var(--space-unit) * 1.5);padding-bottom:var(--space-unit)}:host>.z-list-group-header-container.has-header>z-divider{margin-top:var(--space-unit)}:host>.grouped-tree-list-header{padding-top:calc(var(--space-unit) * 1.5);padding-bottom:var(--space-unit)}`;const c=e(class e extends t{constructor(e){super();if(e!==false){this.__registerHost()}this.__attachShadow();this.size=o.MEDIUM;this.dividerType=d.NONE;this.dividerSize=a.SMALL;this.dividerColor="gray200";this.listType=n.NONE;this.htmlRole="group"}onRoleChange(e){this.htmlRole=e}setChildrenProps(){Array.from(this.host.children).filter((e=>e.tagName.toLowerCase()==="z-list-element")).forEach(((e,t,i)=>{e.size=this.size;e.listType=this.listType;e.listElementPosition=t.toString();if(t<i.length-1){e.dividerType=this.dividerType;e.dividerSize=this.dividerSize;e.dividerColor=this.dividerColor}}))}componentWillLoad(){this.hasHeader=!!this.host.querySelector('[slot="header-title"]')}render(){return i(s,{key:"5c18efadefea41fd7dd73e276f1c70d99966cc27",role:this.htmlRole},i("div",{key:"39780a5f98c4a63c2dfbc5561b7c08dd47f87872",class:{"z-list-group-header-container":true,"has-header":this.hasHeader&&!this.hasTreeItems,"grouped-tree-list-header":this.hasTreeItems}},i("slot",{key:"b9598bd340a6c17f1dc900f061a6aa05dcbcbf19",name:"header-title"}),this.dividerType===d.HEADER&&i("z-divider",{key:"5646b13db4813f862f9b028491ef4ff9f878ac9c",color:this.dividerColor,size:this.dividerSize})),i("slot",{key:"b89f293df5f95fb83bc23e1725cb2d24a7b5c15b"}))}get host(){return this}static get watchers(){return{role:[{onRoleChange:1}],size:[{setChildrenProps:1}],listType:[{setChildrenProps:1}],dividerType:[{setChildrenProps:1}],dividerSize:[{setChildrenProps:1}],dividerColor:[{setChildrenProps:1}]}}static get style(){return l()}},[257,"z-list-group",{size:[513],dividerType:[513,"divider-type"],dividerSize:[513,"divider-size"],dividerColor:[513,"divider-color"],listType:[513,"list-type"],hasTreeItems:[4,"has-tree-items"],htmlRole:[32]},undefined,{role:[{onRoleChange:1}],size:[{setChildrenProps:1}],listType:[{setChildrenProps:1}],dividerType:[{setChildrenProps:1}],dividerSize:[{setChildrenProps:1}],dividerColor:[{setChildrenProps:1}]}]);function p(){if(typeof customElements==="undefined"){return}const e=["z-list-group","z-divider"];e.forEach((e=>{switch(e){case"z-list-group":if(!customElements.get(r(e))){customElements.define(r(e),c)}break;case"z-divider":if(!customElements.get(r(e))){h()}break}}))}export{c as Z,p as d};
|
|
2
2
|
//# sourceMappingURL=index10.js.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{proxyCustomElement as r,HTMLElement as e,createEvent as a,h as t,Host as o,transformTag as n}from"@stencil/core/internal/client";import{d as s}from"./index4.js";import{d as
|
|
1
|
+
import{proxyCustomElement as r,HTMLElement as e,createEvent as a,h as t,Host as o,transformTag as n}from"@stencil/core/internal/client";import{d as s}from"./index4.js";import{d as c}from"./index3.js";const i=()=>`:host{position:relative;display:flex;width:100%;height:232px;flex-direction:column;align-items:center;padding:calc(var(--space-unit) * 3);background-color:var(--color-surface02);background-image:repeating-linear-gradient( 0deg, var(--color-surface03), var(--color-surface03) 12px, transparent 12px, transparent 20px ), repeating-linear-gradient( 90deg, var(--color-surface03), var(--color-surface03) 12px, transparent 12px, transparent 20px ), repeating-linear-gradient( 180deg, var(--color-surface03), var(--color-surface03) 12px, transparent 12px, transparent 20px ), repeating-linear-gradient( 270deg, var(--color-surface03), var(--color-surface03) 12px, transparent 12px, transparent 20px );background-position:0 0, 0 0, 100% 0, 0 100%;background-repeat:no-repeat;background-size:2px 100%, 100% 2px, 2px 100%, 100% 2px;border-radius:var(--border-radius-small);color:var(--color-default-text);font-family:var(--font-family-sans);font-weight:var(--font-rg)}:host,*{box-sizing:border-box}:host(.dragover) *{pointer-events:none}.dragover-container{position:absolute;z-index:1;top:0;left:0;display:none;width:100%;height:100%;background-color:var(--color-primary03);box-shadow:var(--shadow-focus-primary)}:host(.dragover) .dragover-container{display:flex;align-items:center;justify-content:center}`;const d=r(class r extends e{constructor(r){super();if(r!==false){this.__registerHost()}this.__attachShadow();this.fileDropped=a(this,"fileDropped",7);this.dragging=false}onDrop(r){r.preventDefault();this.dragging=false;if(r.dataTransfer.files.length){this.fileDropped.emit(r.dataTransfer.files)}}render(){return t(o,{key:"ecf49da8d38f797026ccc5a56c6ccb8f99aa48ce",class:{dragover:this.dragging},onDragOver:r=>{r.preventDefault();this.dragging=true},onDragLeave:()=>{this.dragging=false},onDrop:this.onDrop.bind(this)},t("div",{key:"ef15b62b3e7ab7b0f243c4b3c6138ecacda1c06d",class:"dragover-container"},t("z-button",{key:"ccbc9c3c422bf6603fbe89f48c5fe79c001921e1"},this.dragAndDropLabel)),t("slot",{key:"8478b1c1e7c4f7be161ad95af6a4879a24a05d26"}))}static get style(){return i()}},[257,"z-dragdrop-area",{dragAndDropLabel:[1,"drag-and-drop-label"],dragging:[32]}]);function p(){if(typeof customElements==="undefined"){return}const r=["z-dragdrop-area","z-button","z-icon"];r.forEach((r=>{switch(r){case"z-dragdrop-area":if(!customElements.get(n(r))){customElements.define(n(r),d)}break;case"z-button":if(!customElements.get(n(r))){s()}break;case"z-icon":if(!customElements.get(n(r))){c()}break}}))}export{d as Z,p as d};
|
|
2
2
|
//# sourceMappingURL=index19.js.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{proxyCustomElement as i,HTMLElement as t,createEvent as e,h as s,Fragment as r,transformTag as n}from"@stencil/core/internal/client";import{I as c,k as a,e as p,f as o}from"./index2.js";import{r as u,d as l}from"./utils.js";import{d as h}from"./index3.js";import{d}from"./index7.js";const z=()=>`.sc-z-input-h{display:inline-block;width:inherit}.sc-z-input-h *.sc-z-input{box-sizing:border-box}input.sc-z-input::-ms-clear,input.sc-z-input::-ms-reveal{display:none}input[type="search"].sc-z-input::-webkit-search-decoration,input[type="search"].sc-z-input::-webkit-search-cancel-button,input[type="search"].sc-z-input::-webkit-search-results-button,input[type="search"].sc-z-input::-webkit-search-results-decoration{display:none}input.sc-z-input,textarea.sc-z-input{background:var(--color-form-background);fill:var(--color-form-default-icon);font-family:var(--font-family-sans);font-size:var(--font-size-3);font-weight:var(--font-rg);outline:none}input.sc-z-input,.textarea-wrapper.sc-z-input{border:var(--border-size-small) solid var(--color-form-surface04);border-radius:var(--border-radius-small);color:var(--color-form-default-text)}[size="small"].sc-z-input-h input.sc-z-input,[size="small"].sc-z-input-h textarea.sc-z-input,[size="x-small"].sc-z-input-h input.sc-z-input,[size="x-small"].sc-z-input-h textarea.sc-z-input{font-size:var(--font-size-2)}.cursor-select.sc-z-input-h input.sc-z-input{cursor:pointer}input.sc-z-input:not([readonly]):hover,.textarea-wrapper.sc-z-input:not(.readonly):hover{outline:var(--border-size-medium) solid var(--color-surface04);outline-offset:-2px}.sc-z-input-h:not(.active-select) input.sc-z-input:focus:focus-visible,.sc-z-input-h:not([readonly="true"]) .textarea-wrapper.sc-z-input:focus-within{border-color:var(--color-form-active-primary);box-shadow:var(--shadow-focus-primary);color:var(--color-form-active-primary)}.sc-z-input-h input.sc-z-input:focus:focus-visible:hover,.textarea-wrapper.sc-z-input:not(.readonly):focus-within:hover{outline-color:var(--color-form-active-primary)}.sc-z-input-h input.sc-z-input:focus:focus-visible+.icons-wrapper.sc-z-input{fill:var(--color-form-active-primary)}.active-select.sc-z-input-h input.sc-z-input{border:var(--border-size-small) solid var(--color-form-active-primary)}.cursor-select.sc-z-input-h input.sc-z-input:focus:focus-visible{box-shadow:var(--shadow-focus-primary)}.sc-z-input-h input[readonly].sc-z-input:focus:focus-visible{border-color:var(--color-form-surface03);box-shadow:none}.input-success.sc-z-input{border-color:var(--color-form-success01);background:var(--color-form-inverse-success)}.input-success.sc-z-input:focus:focus-visible+.icons-wrapper.sc-z-input,.input-success.sc-z-input+.icons-wrapper.sc-z-input{fill:var(--color-form-success01)}.input-error.sc-z-input{border-color:var(--color-form-hover-error);background:var(--color-form-inverse-error)}.input-error.sc-z-input:focus:focus-visible+.icons-wrapper.sc-z-input,.input-error.sc-z-input+.icons-wrapper.sc-z-input{fill:var(--color-form-hover-error)}.input-warning.sc-z-input{border-color:var(--color-form-hover-warning);background:var(--color-form-inverse-warning)}.input-warning.sc-z-input:focus:focus-visible+.icons-wrapper.sc-z-input,.input-warning.sc-z-input+.icons-wrapper.sc-z-input{fill:var(--color-form-hover-warning)}.sc-z-input:is(.input-success,.input-error.sc-z-input,.input-warning).sc-z-input:focus:focus-visible{color:var(--color-form-default-text)}.sc-z-input-h:not(.active-select) input[readonly].sc-z-input,.textarea-wrapper.readonly.sc-z-input{border-color:var(--color-form-surface03);fill:var(--color-form-disabled01-icon);pointer-events:none}[disabled].sc-z-input-h:not([disabled="false"]) input.sc-z-input,[disabled].sc-z-input-h:not([disabled="false"]) .textarea-wrapper.sc-z-input,[disabled].sc-z-input-h:not([disabled="false"]) z-icon.sc-z-input{border-color:var(--color-form-disabled03);box-shadow:none;color:var(--color-form-disabled-text);fill:var(--color-form-disabled01-icon);pointer-events:none}[disabled].sc-z-input-h:not([disabled="false"]) input.sc-z-input:hover{border-width:var(--border-size-small)}input.sc-z-input::placeholder,textarea.sc-z-input::placeholder{color:var(--color-form-placeholder-text)}.sc-z-input::-webkit-textarea-placeholder{color:var(--color-form-placeholder-text)}.sc-z-input:-ms-textarea-placeholder{color:var(--color-form-placeholder-text)}.sc-z-input::placeholder{color:var(--color-form-placeholder-text)}[disabled].sc-z-input-h:not([disabled="false"]) label.z-label.sc-z-input{color:var(--color-disabled03)}`;const b=()=>`.text-wrapper.sc-z-input>div.sc-z-input{position:relative;z-index:1;fill:var(--color-form-default-icon)}.text-wrapper.sc-z-input>div.sc-z-input>input.sc-z-input{width:100%;height:calc(var(--space-unit) * 5.5);box-sizing:border-box;padding:0 calc(var(--space-unit) * 1.5);margin:0}[size="small"].sc-z-input-h .text-wrapper.sc-z-input>div.sc-z-input>input.sc-z-input{height:calc(var(--space-unit) * 4.5)}[size="x-small"].sc-z-input-h .text-wrapper.sc-z-input>div.sc-z-input>input.sc-z-input{height:calc(var(--space-unit) * 4)}.text-wrapper.sc-z-input>div.sc-z-input>input.has-icon.sc-z-input,.text-wrapper.sc-z-input>div.sc-z-input>input.has-clear-icon.sc-z-input{padding-right:calc(var(--space-unit) * 5.25)}.text-wrapper.sc-z-input>div.sc-z-input>input.has-icon.has-clear-icon.sc-z-input{padding-right:calc(var(--space-unit) * 8)}.text-wrapper.sc-z-input .icons-wrapper.sc-z-input{position:absolute;z-index:2;top:50%;right:calc(var(--space-unit) * 1.5);display:flex;pointer-events:none;transform:translateY(-50%)}.text-wrapper.sc-z-input .icons-wrapper.sc-z-input>button.input-icon.sc-z-input{display:flex;padding:0;border:0;background:none;color:inherit;font:inherit;pointer-events:initial}.text-wrapper.sc-z-input .icons-wrapper.sc-z-input>.input-icon.sc-z-input+.input-icon.sc-z-input{margin-left:calc(var(--space-unit) * 0.5)}.text-wrapper.sc-z-input .icons-wrapper.sc-z-input>button.input-icon.hidden.sc-z-input{display:none}.text-wrapper.sc-z-input .icons-wrapper.sc-z-input>button.reset-icon.sc-z-input,.text-wrapper.sc-z-input .icons-wrapper.sc-z-input>button.toggle-password-icon.sc-z-input{display:flex;min-width:24px;min-height:24px;align-items:center;justify-content:center;cursor:pointer}.text-wrapper.sc-z-input .icons-wrapper.sc-z-input>.input-icon.sc-z-input{--z-icon-width:18px;--z-icon-height:18px;display:block}.text-wrapper.sc-z-input .icons-wrapper.sc-z-input>.input-icon.small.sc-z-input,.text-wrapper.sc-z-input .icons-wrapper.sc-z-input>.input-icon.x-small.sc-z-input{--z-icon-width:16px;--z-icon-height:16px}.text-wrapper.sc-z-input .icons-wrapper.sc-z-input>button.input-icon.sc-z-input:focus{box-shadow:var(--shadow-focus-primary);outline:none !important}.text-wrapper.sc-z-input>div.sc-z-input>input.sc-z-input:-webkit-autofill{-webkit-box-shadow:0 0 0 1000px #fff inset;-webkit-text-fill-color:currentcolor}`;const f=()=>`.textarea-wrapper.sc-z-input{width:100%;height:100%;padding:calc(var(--space-unit) * 1.5)}.textarea-wrapper.sc-z-input:not(.input-error,.input-success.sc-z-input,.input-warning).sc-z-input{background-color:var(--color-form-background)}textarea.sc-z-input{width:100%;min-height:132px;padding:0;border:none;margin:0;color:currentcolor;resize:none}`;const m=()=>`.radio-wrapper.sc-z-input,.checkbox-wrapper.sc-z-input{position:relative;display:inline-flex;flex-direction:row;align-items:center;color:var(--color-default-text);fill:var(--color-primary01);font-family:var(--font-family-sans)}.radio-wrapper.sc-z-input:hover,.checkbox-wrapper.sc-z-input:hover{color:var(--color-hover-primary);fill:var(--color-hover-primary-icon)}.radio-wrapper.sc-z-input>input.sc-z-input,.checkbox-wrapper.sc-z-input>input.sc-z-input{position:absolute;z-index:-1;opacity:0;pointer-events:none}.radio-wrapper.sc-z-input .radio-label.sc-z-input,.checkbox-wrapper.sc-z-input .checkbox-label.sc-z-input{display:inline-flex;min-height:24px;align-items:center;padding:3px 0;margin:0;color:inherit;font-family:inherit;font-size:inherit;font-weight:inherit;line-height:1;text-transform:inherit}.radio-wrapper.sc-z-input input.sc-z-input:not(:disabled)+.radio-label.sc-z-input,.checkbox-wrapper.sc-z-input input.sc-z-input:not(:disabled)+.checkbox-label.sc-z-input{cursor:pointer}.radio-wrapper.sc-z-input .radio-label.sc-z-input z-icon.sc-z-input,.checkbox-wrapper.sc-z-input .checkbox-label.sc-z-input z-icon.sc-z-input{cursor:pointer;fill:inherit}[size="small"].sc-z-input-h .radio-wrapper.sc-z-input .radio-label.sc-z-input z-icon.sc-z-input,[size="small"].sc-z-input-h .checkbox-wrapper.sc-z-input .checkbox-label.sc-z-input z-icon.sc-z-input{--z-icon-width:16px;--z-icon-height:16px}[size="small"].sc-z-input-h .radio-wrapper.sc-z-input .radio-label.sc-z-input,[size="small"].sc-z-input-h .checkbox-wrapper.sc-z-input .checkbox-label.sc-z-input{font-size:var(--font-size-2)}[size="x-small"].sc-z-input-h .radio-wrapper.sc-z-input .radio-label.sc-z-input z-icon.sc-z-input,[size="x-small"].sc-z-input-h .checkbox-wrapper.sc-z-input .checkbox-label.sc-z-input z-icon.sc-z-input{--z-icon-width:14px;--z-icon-height:14px}[size="x-small"].sc-z-input-h .radio-wrapper.sc-z-input .radio-label.sc-z-input,[size="x-small"].sc-z-input-h .checkbox-wrapper.sc-z-input .checkbox-label.sc-z-input{font-size:var(--font-size-1)}.radio-wrapper.sc-z-input .radio-label.after.sc-z-input,.checkbox-wrapper.sc-z-input .checkbox-label.after.sc-z-input{flex-direction:row}.radio-wrapper.sc-z-input .radio-label.before.sc-z-input,.checkbox-wrapper.sc-z-input .checkbox-label.before.sc-z-input{flex-direction:row-reverse}.radio-wrapper.sc-z-input .radio-label.after.sc-z-input>span.sc-z-input,.checkbox-wrapper.sc-z-input .checkbox-label.after.sc-z-input>span.sc-z-input{margin-left:var(--space-unit)}.radio-wrapper.sc-z-input .radio-label.before.sc-z-input>span.sc-z-input,.checkbox-wrapper.sc-z-input .checkbox-label.before.sc-z-input>span.sc-z-input{margin-right:var(--space-unit)}[size="small"].sc-z-input-h .radio-wrapper.sc-z-input .radio-label.after.sc-z-input>span.sc-z-input,[size="small"].sc-z-input-h .checkbox-wrapper.sc-z-input .checkbox-label.after.sc-z-input>span.sc-z-input,[size="x-small"].sc-z-input-h .radio-wrapper.sc-z-input .radio-label.after.sc-z-input>span.sc-z-input,[size="x-small"].sc-z-input-h .checkbox-wrapper.sc-z-input .checkbox-label.after.sc-z-input>span.sc-z-input{margin-left:calc(var(--space-unit) * 0.5)}[size="small"].sc-z-input-h .radio-wrapper.sc-z-input .radio-label.before.sc-z-input>span.sc-z-input,[size="small"].sc-z-input-h .checkbox-wrapper.sc-z-input .checkbox-label.before.sc-z-input>span.sc-z-input,[size="x-small"].sc-z-input-h .radio-wrapper.sc-z-input .radio-label.before.sc-z-input>span.sc-z-input,[size="x-small"].sc-z-input-h .checkbox-wrapper.sc-z-input .checkbox-label.before.sc-z-input>span.sc-z-input{margin-right:calc(var(--space-unit) * 0.5)}.radio-wrapper.sc-z-input>input.sc-z-input:focus:focus-visible+.radio-label.sc-z-input>z-icon.sc-z-input{border-radius:50%}.checkbox-wrapper.sc-z-input>input.sc-z-input:focus:focus-visible+.checkbox-label.sc-z-input>z-icon.sc-z-input{border-radius:var(--border-radius-small)}.radio-wrapper.sc-z-input>input.sc-z-input:focus:focus-visible+.radio-label.sc-z-input>z-icon.sc-z-input,.checkbox-wrapper.sc-z-input>input.sc-z-input:focus:focus-visible+.checkbox-label.sc-z-input>z-icon.sc-z-input{box-shadow:var(--shadow-focus-primary)}.radio-wrapper.sc-z-input>input.sc-z-input:disabled+.radio-label.sc-z-input,.checkbox-wrapper.sc-z-input>input.sc-z-input:disabled+.checkbox-label.sc-z-input{color:var(--color-disabled03)}.radio-wrapper.sc-z-input>input.sc-z-input:disabled+.radio-label.sc-z-input>z-icon.sc-z-input,.checkbox-wrapper.sc-z-input>input.sc-z-input:disabled+.checkbox-label.sc-z-input>z-icon.sc-z-input{cursor:default;fill:var(--color-disabled01)}`;const x=i(class i extends t{constructor(i){super();if(i!==false){this.__registerHost()}this.inputChange=e(this,"inputChange",7);this.startTyping=e(this,"startTyping",7);this.stopTyping=e(this,"stopTyping",7);this.inputCheck=e(this,"inputCheck",7);this.inputFocus=e(this,"inputFocus",7);this.inputBlur=e(this,"inputBlur",7);this.htmlid=`id-${u()}`;this.type=c.TEXT;this.disabled=false;this.readonly=false;this.required=false;this.checked=false;this.message=true;this.labelPosition=a.RIGHT;this.hasclearicon=true;this.size=p.BIG;this.isTyping=false;this.passwordHidden=true;this.typingtimeout=300}inputCheckListener(i){const t=i.detail;switch(this.type){case c.RADIO:if(t.type===c.RADIO&&t.name===this.name&&t.id!==this.htmlid){this.checked=false}break}}async isChecked(){switch(this.type){case c.CHECKBOX:case c.RADIO:return this.checked;default:console.warn("`isChecked` method is only available for type `checkbox` and `radio`");return false}}emitInputChange(i){if(!this.isTyping){this.emitStartTyping()}let t;if(this.type===c.TEXTAREA){t=this.getValidity("textarea")}else{t=this.getValidity("input")}this.value=i;this.inputChange.emit({value:i,validity:t});clearTimeout(this.timer);this.timer=setTimeout((()=>{this.emitStopTyping(this.value,t)}),this.typingtimeout)}emitStartTyping(){this.isTyping=true;this.startTyping.emit()}emitStopTyping(i,t){this.isTyping=false;this.stopTyping.emit({value:i,validity:t})}emitInputCheck(i){this.inputCheck.emit({id:this.htmlid,checked:i,type:this.type,name:this.name,value:this.value,validity:this.getValidity("input")})}emitInputFocus(){this.inputFocus.emit({id:this.htmlid})}emitInputBlur(){this.inputBlur.emit({id:this.htmlid})}getValidity(i){const t=this.hostElement.querySelector(i);return t.validity}getTextAttributes(){return{id:this.htmlid,name:this.name,placeholder:this.placeholder,value:this.value,disabled:this.disabled,readonly:this.readonly,required:this.required,title:this.htmltitle,minlength:this.minlength,maxlength:this.maxlength,class:{[`input-${this.status}`]:!!this.status},autocomplete:this.autocomplete,onInput:i=>this.emitInputChange(i.target.value)}}getNumberAttributes(i){if(i!=c.NUMBER){return}return{min:this.min,max:this.max,step:this.step}}getPatternAttribute(i){if(i!=c.PASSWORD&&i!=c.TEXT&&i!=c.TEL&&i!=c.SEARCH&&i!=c.URL&&i!=c.EMAIL){return}return{pattern:this.pattern}}inputHasMessage(){if(typeof l(this.message)==="boolean"){return false}return true}getAriaAttributes(){return{role:this.htmlRole||undefined,"aria-describedby":this.htmlAriaDescribedby||undefined,"aria-labelledby":this.htmlAriaLabelledby||undefined}}getTextAriaAttributes(){return Object.assign(Object.assign({},this.getAriaAttributes()),{"aria-expanded":this.htmlAriaExpanded||undefined,"aria-controls":this.htmlAriaControls||undefined,"aria-autocomplete":this.htmlAriaAutocomplete||undefined,"aria-activedescendant":this.htmlAriaActivedescendant||undefined,"aria-describedby":this.htmlAriaDescribedby||this.inputHasMessage()?this.htmlAriaDescribedby||`${this.htmlid}-message`:undefined,"aria-invalid":this.status===o.ERROR?"true":undefined,"aria-required":this.required?"true":undefined})}getFocusBlurAttributes(){return{onFocus:()=>this.emitInputFocus(),onBlur:()=>this.emitInputBlur()}}renderInputText(i=c.TEXT){const t=Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({},this.getTextAttributes()),this.getNumberAttributes(i)),this.getPatternAttribute(i)),this.getTextAriaAttributes()),this.getFocusBlurAttributes()),{"aria-label":this.htmlAriaLabel||undefined});t.class=Object.assign(Object.assign({},t.class),{"has-icon":!!this.icon||i===c.PASSWORD,"has-clear-icon":this.hasclearicon&&i!=c.NUMBER});return s("div",{class:"text-wrapper"},this.renderLabel(),s("div",null,s("input",Object.assign({},t,{type:i===c.PASSWORD&&!this.passwordHidden?c.TEXT:i,ref:i=>this.inputRef=i})),this.renderIcons()),this.renderMessage())}renderLabel(){if(!this.label){return}return s("label",{class:"z-label body-5-sb",id:`${this.htmlid}_label`,htmlFor:this.htmlid},this.label)}renderIcons(){return s("span",{class:"icons-wrapper"},this.renderResetIcon(),this.renderIcon())}renderIcon(){if(this.type===c.PASSWORD){return this.renderShowHidePassword()}if(!this.icon){return}return s("z-icon",{name:this.icon,class:{[this.size]:true,"input-icon":true}})}renderResetIcon(){let i=false;if(!this.hasclearicon||!this.value||this.disabled||this.readonly||this.type==c.NUMBER){i=true}return s("button",{type:"button",class:{"reset-icon":true,"input-icon":true,hidden:i},"aria-label":"cancella il contenuto dell'input",onClick:()=>{this.inputRef.value="";this.emitInputChange("");this.inputRef.focus()}},s("z-icon",{name:"multiply",class:this.size}))}renderShowHidePassword(){return s("button",{type:"button",class:"input-icon toggle-password-icon",disabled:this.disabled,"aria-label":"mostra password","aria-pressed":!this.passwordHidden?"true":"false",onClick:()=>this.passwordHidden=!this.passwordHidden},s("z-icon",{name:this.passwordHidden?"view-filled":"view-off-filled",class:this.size}))}renderMessage(){if(l(this.message)===false){return}return s("z-input-message",{"html-id":`${this.htmlid}-message`,message:l(this.message)===true?undefined:this.message,status:this.status,class:this.size,disabled:this.disabled})}renderTextarea(){const i=this.getTextAttributes();const t=this.getTextAriaAttributes();return s(r,null,this.renderLabel(),s("div",{class:Object.assign(Object.assign({},i.class),{"textarea-wrapper":true,readonly:!!i.readonly})},s("textarea",Object.assign({},i,t,{class:Object.assign(Object.assign({},i.class),{"z-scrollbar":true}),"aria-label":this.htmlAriaLabel||undefined}))),this.renderMessage())}handleCheck(i){this.checked=i.target.checked;this.emitInputCheck(this.checked)}renderCheckbox(){const i=this.required?{"aria-required":"true"}:{};return s("div",{class:"checkbox-wrapper"},s("input",Object.assign({id:this.htmlid,type:"checkbox",name:this.name,checked:this.checked,disabled:this.disabled,readonly:this.readonly,required:this.required,onChange:this.handleCheck.bind(this),value:this.value},i,this.getAriaAttributes(),this.getFocusBlurAttributes())),s("label",{htmlFor:this.htmlid,class:{"checkbox-label":true,after:this.labelPosition===a.RIGHT,before:this.labelPosition===a.LEFT}},s("z-icon",{name:this.checked?"checkbox-checked":"checkbox",class:this.size}),this.label&&s("span",{innerHTML:this.label})))}renderRadio(){const i=this.required?{"aria-required":"true"}:{};return s("div",{class:"radio-wrapper"},s("input",Object.assign({id:this.htmlid,type:"radio",name:this.name,checked:this.checked,disabled:this.disabled,readonly:this.readonly,required:this.required,onChange:this.handleCheck.bind(this),value:this.value},this.getAriaAttributes(),this.getFocusBlurAttributes(),i)),s("label",{htmlFor:this.htmlid,class:{"radio-label":true,after:this.labelPosition===a.RIGHT,before:this.labelPosition===a.LEFT}},s("z-icon",{name:this.checked?"radio-button-checked":"radio-button",class:this.size}),this.label&&s("span",{innerHTML:this.label})))}render(){switch(this.type){case c.TEXTAREA:return this.renderTextarea();case c.CHECKBOX:return this.renderCheckbox();case c.RADIO:return this.renderRadio();case c.TEXT:default:return this.renderInputText(this.type)}}get hostElement(){return this}static get style(){return z()+(b()+(f()+m()))}},[2,"z-input",{htmlid:[1],type:[1],name:[1],label:[1],htmlAriaLabel:[1,"html-aria-label"],htmlAriaExpanded:[1,"html-aria-expanded"],htmlAriaControls:[1,"html-aria-controls"],htmlAriaAutocomplete:[1,"html-aria-autocomplete"],htmlAriaActivedescendant:[1,"html-aria-activedescendant"],htmlAriaDescribedby:[1,"html-aria-describedby"],htmlAriaLabelledby:[1,"html-aria-labelledby"],value:[1025],disabled:[516],readonly:[4],required:[4],checked:[1028],placeholder:[1],htmltitle:[1],status:[1],message:[8],labelPosition:[1,"label-position"],autocomplete:[1],htmlRole:[1,"html-role"],hasclearicon:[4],icon:[1],min:[2],minlength:[2],max:[2],maxlength:[2],step:[2],pattern:[1],size:[513],isTyping:[32],passwordHidden:[32],isChecked:[64]},[[4,"inputCheck","inputCheckListener"]]]);function w(){if(typeof customElements==="undefined"){return}const i=["z-input","z-icon","z-input-message"];i.forEach((i=>{switch(i){case"z-input":if(!customElements.get(n(i))){customElements.define(n(i),x)}break;case"z-icon":if(!customElements.get(n(i))){h()}break;case"z-input-message":if(!customElements.get(n(i))){d()}break}}))}export{x as Z,w as d};
|
|
1
|
+
import{proxyCustomElement as i,HTMLElement as t,createEvent as e,h as s,Fragment as r,transformTag as n}from"@stencil/core/internal/client";import{I as c,k as a,e as p,f as o}from"./index2.js";import{r as u,d as l}from"./utils.js";import{d as h}from"./index3.js";import{d}from"./index7.js";const z=()=>`.sc-z-input-h{display:inline-block;width:inherit}.sc-z-input-h *.sc-z-input{box-sizing:border-box}input.sc-z-input::-ms-clear,input.sc-z-input::-ms-reveal{display:none}input[type="search"].sc-z-input::-webkit-search-decoration,input[type="search"].sc-z-input::-webkit-search-cancel-button,input[type="search"].sc-z-input::-webkit-search-results-button,input[type="search"].sc-z-input::-webkit-search-results-decoration{display:none}input.sc-z-input,textarea.sc-z-input{background:var(--color-form-background);fill:var(--color-form-default-icon);font-family:var(--font-family-sans);font-size:var(--font-size-3);font-weight:var(--font-rg);outline:none}input.sc-z-input,.textarea-wrapper.sc-z-input{border:var(--border-size-small) solid var(--color-form-surface04);border-radius:var(--border-radius-small);color:var(--color-form-default-text)}[size="small"].sc-z-input-h input.sc-z-input,[size="small"].sc-z-input-h textarea.sc-z-input,[size="x-small"].sc-z-input-h input.sc-z-input,[size="x-small"].sc-z-input-h textarea.sc-z-input{font-size:var(--font-size-2)}.cursor-select.sc-z-input-h input.sc-z-input{cursor:pointer}input.sc-z-input:not([readonly]):hover,.textarea-wrapper.sc-z-input:not(.readonly):hover{outline:var(--border-size-medium) solid var(--color-surface04);outline-offset:-2px}.sc-z-input-h:not(.active-select) input.sc-z-input:focus:focus-visible,.sc-z-input-h:not([readonly="true"]) .textarea-wrapper.sc-z-input:focus-within{border-color:var(--color-form-active-primary);box-shadow:var(--shadow-focus-primary);color:var(--color-form-active-primary)}.sc-z-input-h input.sc-z-input:focus:focus-visible:hover,.textarea-wrapper.sc-z-input:not(.readonly):focus-within:hover{outline-color:var(--color-form-active-primary)}.sc-z-input-h input.sc-z-input:focus:focus-visible+.icons-wrapper.sc-z-input{fill:var(--color-form-active-primary)}.active-select.sc-z-input-h input.sc-z-input{border:var(--border-size-small) solid var(--color-form-active-primary)}.cursor-select.sc-z-input-h input.sc-z-input:focus:focus-visible{box-shadow:var(--shadow-focus-primary)}.sc-z-input-h input[readonly].sc-z-input:focus:focus-visible{border-color:var(--color-form-surface03);box-shadow:none}.input-success.sc-z-input{border-color:var(--color-form-success01);background:var(--color-form-inverse-success)}.input-success.sc-z-input:focus:focus-visible+.icons-wrapper.sc-z-input,.input-success.sc-z-input+.icons-wrapper.sc-z-input{fill:var(--color-form-success01)}.input-error.sc-z-input{border-color:var(--color-form-hover-error);background:var(--color-form-inverse-error)}.input-error.sc-z-input:focus:focus-visible+.icons-wrapper.sc-z-input,.input-error.sc-z-input+.icons-wrapper.sc-z-input{fill:var(--color-form-hover-error)}.input-warning.sc-z-input{border-color:var(--color-form-hover-warning);background:var(--color-form-inverse-warning)}.input-warning.sc-z-input:focus:focus-visible+.icons-wrapper.sc-z-input,.input-warning.sc-z-input+.icons-wrapper.sc-z-input{fill:var(--color-form-hover-warning)}.sc-z-input:is(.input-success,.input-error.sc-z-input,.input-warning).sc-z-input:focus:focus-visible{color:var(--color-form-default-text)}.sc-z-input-h:not(.active-select) input[readonly].sc-z-input,.textarea-wrapper.readonly.sc-z-input{border-color:var(--color-form-surface03);fill:var(--color-form-disabled01-icon);pointer-events:none}[disabled].sc-z-input-h:not([disabled="false"]) input.sc-z-input,[disabled].sc-z-input-h:not([disabled="false"]) .textarea-wrapper.sc-z-input,[disabled].sc-z-input-h:not([disabled="false"]) z-icon.sc-z-input{border-color:var(--color-form-disabled03);box-shadow:none;color:var(--color-form-disabled-text);fill:var(--color-form-disabled01-icon);pointer-events:none}[disabled].sc-z-input-h:not([disabled="false"]) input.sc-z-input:hover{border-width:var(--border-size-small)}input.sc-z-input::placeholder,textarea.sc-z-input::placeholder{color:var(--color-form-placeholder-text)}.sc-z-input::-webkit-textarea-placeholder{color:var(--color-form-placeholder-text)}.sc-z-input:-ms-textarea-placeholder{color:var(--color-form-placeholder-text)}.sc-z-input::placeholder{color:var(--color-form-placeholder-text)}[disabled].sc-z-input-h:not([disabled="false"]) label.z-label.sc-z-input{color:var(--color-disabled03)}`;const b=()=>`.text-wrapper.sc-z-input>div.sc-z-input{position:relative;z-index:1;fill:var(--color-form-default-icon)}.text-wrapper.sc-z-input>div.sc-z-input>input.sc-z-input{width:100%;height:calc(var(--space-unit) * 5.5);box-sizing:border-box;padding:0 calc(var(--space-unit) * 1.5);margin:0}[size="small"].sc-z-input-h .text-wrapper.sc-z-input>div.sc-z-input>input.sc-z-input{height:calc(var(--space-unit) * 4.5)}[size="x-small"].sc-z-input-h .text-wrapper.sc-z-input>div.sc-z-input>input.sc-z-input{height:calc(var(--space-unit) * 4)}.text-wrapper.sc-z-input>div.sc-z-input>input.has-icon.sc-z-input,.text-wrapper.sc-z-input>div.sc-z-input>input.has-clear-icon.sc-z-input{padding-right:calc(var(--space-unit) * 5.25)}.text-wrapper.sc-z-input>div.sc-z-input>input.has-icon.has-clear-icon.sc-z-input{padding-right:calc(var(--space-unit) * 8)}.text-wrapper.sc-z-input .icons-wrapper.sc-z-input{position:absolute;z-index:2;top:50%;right:calc(var(--space-unit) * 1.5);display:flex;pointer-events:none;transform:translateY(-50%)}.text-wrapper.sc-z-input .icons-wrapper.sc-z-input>button.input-icon.sc-z-input{display:flex;padding:0;border:0;background:none;color:inherit;font:inherit;pointer-events:initial}.text-wrapper.sc-z-input .icons-wrapper.sc-z-input>.input-icon.sc-z-input+.input-icon.sc-z-input{margin-left:calc(var(--space-unit) * 0.5)}.text-wrapper.sc-z-input .icons-wrapper.sc-z-input>button.input-icon.hidden.sc-z-input{display:none}.text-wrapper.sc-z-input .icons-wrapper.sc-z-input>button.reset-icon.sc-z-input,.text-wrapper.sc-z-input .icons-wrapper.sc-z-input>button.toggle-password-icon.sc-z-input{display:flex;min-width:24px;min-height:24px;align-items:center;justify-content:center;cursor:pointer}.text-wrapper.sc-z-input .icons-wrapper.sc-z-input>.input-icon.sc-z-input{--z-icon-width:18px;--z-icon-height:18px;display:block}.text-wrapper.sc-z-input .icons-wrapper.sc-z-input>.input-icon.small.sc-z-input,.text-wrapper.sc-z-input .icons-wrapper.sc-z-input>.input-icon.x-small.sc-z-input{--z-icon-width:16px;--z-icon-height:16px}.text-wrapper.sc-z-input .icons-wrapper.sc-z-input>button.input-icon.sc-z-input:focus{box-shadow:var(--shadow-focus-primary);outline:none !important}.text-wrapper.sc-z-input>div.sc-z-input>input.sc-z-input:-webkit-autofill{-webkit-box-shadow:0 0 0 1000px #fff inset;-webkit-text-fill-color:currentcolor}`;const f=()=>`.textarea-wrapper.sc-z-input{width:100%;height:100%;padding:calc(var(--space-unit) * 1.5)}.textarea-wrapper.sc-z-input:not(.input-error,.input-success.sc-z-input,.input-warning).sc-z-input{background-color:var(--color-form-background)}textarea.sc-z-input{width:100%;min-height:132px;padding:0;border:none;margin:0;color:currentcolor;resize:none}`;const m=()=>`.radio-wrapper.sc-z-input,.checkbox-wrapper.sc-z-input{position:relative;display:inline-flex;flex-direction:row;align-items:center;color:var(--color-default-text);fill:var(--color-primary01-icon);font-family:var(--font-family-sans)}.radio-wrapper.sc-z-input:hover,.checkbox-wrapper.sc-z-input:hover{color:var(--color-hover-primary);fill:var(--color-hover-primary-icon)}.radio-wrapper.sc-z-input>input.sc-z-input,.checkbox-wrapper.sc-z-input>input.sc-z-input{position:absolute;z-index:-1;opacity:0;pointer-events:none}.radio-wrapper.sc-z-input .radio-label.sc-z-input,.checkbox-wrapper.sc-z-input .checkbox-label.sc-z-input{display:inline-flex;min-height:24px;align-items:center;padding:3px 0;margin:0;color:inherit;font-family:inherit;font-size:inherit;font-weight:inherit;line-height:1;text-transform:inherit}.radio-wrapper.sc-z-input input.sc-z-input:not(:disabled)+.radio-label.sc-z-input,.checkbox-wrapper.sc-z-input input.sc-z-input:not(:disabled)+.checkbox-label.sc-z-input{cursor:pointer}.radio-wrapper.sc-z-input .radio-label.sc-z-input z-icon.sc-z-input,.checkbox-wrapper.sc-z-input .checkbox-label.sc-z-input z-icon.sc-z-input{cursor:pointer;fill:inherit}[size="small"].sc-z-input-h .radio-wrapper.sc-z-input .radio-label.sc-z-input z-icon.sc-z-input,[size="small"].sc-z-input-h .checkbox-wrapper.sc-z-input .checkbox-label.sc-z-input z-icon.sc-z-input{--z-icon-width:16px;--z-icon-height:16px}[size="small"].sc-z-input-h .radio-wrapper.sc-z-input .radio-label.sc-z-input,[size="small"].sc-z-input-h .checkbox-wrapper.sc-z-input .checkbox-label.sc-z-input{font-size:var(--font-size-2)}[size="x-small"].sc-z-input-h .radio-wrapper.sc-z-input .radio-label.sc-z-input z-icon.sc-z-input,[size="x-small"].sc-z-input-h .checkbox-wrapper.sc-z-input .checkbox-label.sc-z-input z-icon.sc-z-input{--z-icon-width:14px;--z-icon-height:14px}[size="x-small"].sc-z-input-h .radio-wrapper.sc-z-input .radio-label.sc-z-input,[size="x-small"].sc-z-input-h .checkbox-wrapper.sc-z-input .checkbox-label.sc-z-input{font-size:var(--font-size-1)}.radio-wrapper.sc-z-input .radio-label.after.sc-z-input,.checkbox-wrapper.sc-z-input .checkbox-label.after.sc-z-input{flex-direction:row}.radio-wrapper.sc-z-input .radio-label.before.sc-z-input,.checkbox-wrapper.sc-z-input .checkbox-label.before.sc-z-input{flex-direction:row-reverse}.radio-wrapper.sc-z-input .radio-label.after.sc-z-input>span.sc-z-input,.checkbox-wrapper.sc-z-input .checkbox-label.after.sc-z-input>span.sc-z-input{margin-left:var(--space-unit)}.radio-wrapper.sc-z-input .radio-label.before.sc-z-input>span.sc-z-input,.checkbox-wrapper.sc-z-input .checkbox-label.before.sc-z-input>span.sc-z-input{margin-right:var(--space-unit)}[size="small"].sc-z-input-h .radio-wrapper.sc-z-input .radio-label.after.sc-z-input>span.sc-z-input,[size="small"].sc-z-input-h .checkbox-wrapper.sc-z-input .checkbox-label.after.sc-z-input>span.sc-z-input,[size="x-small"].sc-z-input-h .radio-wrapper.sc-z-input .radio-label.after.sc-z-input>span.sc-z-input,[size="x-small"].sc-z-input-h .checkbox-wrapper.sc-z-input .checkbox-label.after.sc-z-input>span.sc-z-input{margin-left:calc(var(--space-unit) * 0.5)}[size="small"].sc-z-input-h .radio-wrapper.sc-z-input .radio-label.before.sc-z-input>span.sc-z-input,[size="small"].sc-z-input-h .checkbox-wrapper.sc-z-input .checkbox-label.before.sc-z-input>span.sc-z-input,[size="x-small"].sc-z-input-h .radio-wrapper.sc-z-input .radio-label.before.sc-z-input>span.sc-z-input,[size="x-small"].sc-z-input-h .checkbox-wrapper.sc-z-input .checkbox-label.before.sc-z-input>span.sc-z-input{margin-right:calc(var(--space-unit) * 0.5)}.radio-wrapper.sc-z-input>input.sc-z-input:focus:focus-visible+.radio-label.sc-z-input>z-icon.sc-z-input{border-radius:50%}.checkbox-wrapper.sc-z-input>input.sc-z-input:focus:focus-visible+.checkbox-label.sc-z-input>z-icon.sc-z-input{border-radius:var(--border-radius-small)}.radio-wrapper.sc-z-input>input.sc-z-input:focus:focus-visible+.radio-label.sc-z-input>z-icon.sc-z-input,.checkbox-wrapper.sc-z-input>input.sc-z-input:focus:focus-visible+.checkbox-label.sc-z-input>z-icon.sc-z-input{box-shadow:var(--shadow-focus-primary)}.radio-wrapper.sc-z-input>input.sc-z-input:disabled+.radio-label.sc-z-input,.checkbox-wrapper.sc-z-input>input.sc-z-input:disabled+.checkbox-label.sc-z-input{color:var(--color-disabled03)}.radio-wrapper.sc-z-input>input.sc-z-input:disabled+.radio-label.sc-z-input>z-icon.sc-z-input,.checkbox-wrapper.sc-z-input>input.sc-z-input:disabled+.checkbox-label.sc-z-input>z-icon.sc-z-input{cursor:default;fill:var(--color-disabled03-icon)}`;const x=i(class i extends t{constructor(i){super();if(i!==false){this.__registerHost()}this.inputChange=e(this,"inputChange",7);this.startTyping=e(this,"startTyping",7);this.stopTyping=e(this,"stopTyping",7);this.inputCheck=e(this,"inputCheck",7);this.inputFocus=e(this,"inputFocus",7);this.inputBlur=e(this,"inputBlur",7);this.htmlid=`id-${u()}`;this.type=c.TEXT;this.disabled=false;this.readonly=false;this.required=false;this.checked=false;this.indeterminate=false;this.message=true;this.labelPosition=a.RIGHT;this.hasclearicon=true;this.size=p.BIG;this.isTyping=false;this.passwordHidden=true;this.typingtimeout=300}inputCheckListener(i){const t=i.detail;switch(this.type){case c.RADIO:if(t.type===c.RADIO&&t.name===this.name&&t.id!==this.htmlid){this.checked=false}break}}watchIndeterminate(){this.syncCheckboxIndeterminate()}syncCheckboxIndeterminate(){if(this.type!==c.CHECKBOX||!this.inputRef){return}this.inputRef.indeterminate=!!this.indeterminate}async isChecked(){switch(this.type){case c.CHECKBOX:case c.RADIO:return this.checked;default:console.warn("`isChecked` method is only available for type `checkbox` and `radio`");return false}}emitInputChange(i){if(!this.isTyping){this.emitStartTyping()}let t;if(this.type===c.TEXTAREA){t=this.getValidity("textarea")}else{t=this.getValidity("input")}this.value=i;this.inputChange.emit({value:i,validity:t});clearTimeout(this.timer);this.timer=setTimeout((()=>{this.emitStopTyping(this.value,t)}),this.typingtimeout)}emitStartTyping(){this.isTyping=true;this.startTyping.emit()}emitStopTyping(i,t){this.isTyping=false;this.stopTyping.emit({value:i,validity:t})}emitInputCheck(i){this.inputCheck.emit({id:this.htmlid,checked:i,type:this.type,name:this.name,value:this.value,validity:this.getValidity("input")})}emitInputFocus(){this.inputFocus.emit({id:this.htmlid})}emitInputBlur(){this.inputBlur.emit({id:this.htmlid})}getValidity(i){const t=this.hostElement.querySelector(i);return t.validity}getTextAttributes(){return{id:this.htmlid,name:this.name,placeholder:this.placeholder,value:this.value,disabled:this.disabled,readonly:this.readonly,required:this.required,title:this.htmltitle,minlength:this.minlength,maxlength:this.maxlength,class:{[`input-${this.status}`]:!!this.status},autocomplete:this.autocomplete,onInput:i=>this.emitInputChange(i.target.value)}}getNumberAttributes(i){if(i!=c.NUMBER){return}return{min:this.min,max:this.max,step:this.step}}getPatternAttribute(i){if(i!=c.PASSWORD&&i!=c.TEXT&&i!=c.TEL&&i!=c.SEARCH&&i!=c.URL&&i!=c.EMAIL){return}return{pattern:this.pattern}}inputHasMessage(){if(typeof l(this.message)==="boolean"){return false}return true}getAriaAttributes(){return{role:this.htmlRole||undefined,"aria-describedby":this.htmlAriaDescribedby||undefined,"aria-labelledby":this.htmlAriaLabelledby||undefined}}getTextAriaAttributes(){return Object.assign(Object.assign({},this.getAriaAttributes()),{"aria-expanded":this.htmlAriaExpanded||undefined,"aria-controls":this.htmlAriaControls||undefined,"aria-autocomplete":this.htmlAriaAutocomplete||undefined,"aria-activedescendant":this.htmlAriaActivedescendant||undefined,"aria-describedby":this.htmlAriaDescribedby||this.inputHasMessage()?this.htmlAriaDescribedby||`${this.htmlid}-message`:undefined,"aria-invalid":this.status===o.ERROR?"true":undefined,"aria-required":this.required?"true":undefined})}getFocusBlurAttributes(){return{onFocus:()=>this.emitInputFocus(),onBlur:()=>this.emitInputBlur()}}renderInputText(i=c.TEXT){const t=Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({},this.getTextAttributes()),this.getNumberAttributes(i)),this.getPatternAttribute(i)),this.getTextAriaAttributes()),this.getFocusBlurAttributes()),{"aria-label":this.htmlAriaLabel||undefined});t.class=Object.assign(Object.assign({},t.class),{"has-icon":!!this.icon||i===c.PASSWORD,"has-clear-icon":this.hasclearicon&&i!=c.NUMBER});return s("div",{class:"text-wrapper"},this.renderLabel(),s("div",null,s("input",Object.assign({},t,{type:i===c.PASSWORD&&!this.passwordHidden?c.TEXT:i,ref:i=>this.inputRef=i})),this.renderIcons()),this.renderMessage())}renderLabel(){if(!this.label){return}return s("label",{class:"z-label body-5-sb",id:`${this.htmlid}_label`,htmlFor:this.htmlid},this.label)}renderIcons(){return s("span",{class:"icons-wrapper"},this.renderResetIcon(),this.renderIcon())}renderIcon(){if(this.type===c.PASSWORD){return this.renderShowHidePassword()}if(!this.icon){return}return s("z-icon",{name:this.icon,class:{[this.size]:true,"input-icon":true}})}renderResetIcon(){let i=false;if(!this.hasclearicon||!this.value||this.disabled||this.readonly||this.type==c.NUMBER){i=true}return s("button",{type:"button",class:{"reset-icon":true,"input-icon":true,hidden:i},"aria-label":"cancella il contenuto dell'input",onClick:()=>{this.inputRef.value="";this.emitInputChange("");this.inputRef.focus()}},s("z-icon",{name:"multiply",class:this.size}))}renderShowHidePassword(){return s("button",{type:"button",class:"input-icon toggle-password-icon",disabled:this.disabled,"aria-label":"mostra password","aria-pressed":!this.passwordHidden?"true":"false",onClick:()=>this.passwordHidden=!this.passwordHidden},s("z-icon",{name:this.passwordHidden?"view-filled":"view-off-filled",class:this.size}))}renderMessage(){if(l(this.message)===false){return}return s("z-input-message",{"html-id":`${this.htmlid}-message`,message:l(this.message)===true?undefined:this.message,status:this.status,class:this.size,disabled:this.disabled})}renderTextarea(){const i=this.getTextAttributes();const t=this.getTextAriaAttributes();return s(r,null,this.renderLabel(),s("div",{class:Object.assign(Object.assign({},i.class),{"textarea-wrapper":true,readonly:!!i.readonly})},s("textarea",Object.assign({},i,t,{class:Object.assign(Object.assign({},i.class),{"z-scrollbar":true}),"aria-label":this.htmlAriaLabel||undefined}))),this.renderMessage())}handleCheck(i){if(this.type===c.CHECKBOX&&this.indeterminate){this.indeterminate=false}this.checked=i.target.checked;this.emitInputCheck(this.checked)}renderCheckbox(){const i=this.required?{"aria-required":"true"}:{};return s("div",{class:"checkbox-wrapper"},s("input",Object.assign({id:this.htmlid,type:"checkbox",name:this.name,checked:this.indeterminate?false:this.checked,disabled:this.disabled,readonly:this.readonly,required:this.required,onChange:this.handleCheck.bind(this),value:this.value},i,this.getAriaAttributes(),this.getFocusBlurAttributes(),{ref:i=>{this.inputRef=i;this.syncCheckboxIndeterminate()}})),s("label",{htmlFor:this.htmlid,class:{"checkbox-label":true,after:this.labelPosition===a.RIGHT,before:this.labelPosition===a.LEFT}},s("z-icon",{name:this.indeterminate?"indeterminated-checkbox":this.checked?"checkbox-checked":"checkbox",class:this.size}),this.label&&s("span",{innerHTML:this.label})))}renderRadio(){const i=this.required?{"aria-required":"true"}:{};return s("div",{class:"radio-wrapper"},s("input",Object.assign({id:this.htmlid,type:"radio",name:this.name,checked:this.checked,disabled:this.disabled,readonly:this.readonly,required:this.required,onChange:this.handleCheck.bind(this),value:this.value},this.getAriaAttributes(),this.getFocusBlurAttributes(),i)),s("label",{htmlFor:this.htmlid,class:{"radio-label":true,after:this.labelPosition===a.RIGHT,before:this.labelPosition===a.LEFT}},s("z-icon",{name:this.checked?"radio-button-checked":"radio-button",class:this.size}),this.label&&s("span",{innerHTML:this.label})))}render(){switch(this.type){case c.TEXTAREA:return this.renderTextarea();case c.CHECKBOX:return this.renderCheckbox();case c.RADIO:return this.renderRadio();case c.TEXT:default:return this.renderInputText(this.type)}}get hostElement(){return this}static get watchers(){return{indeterminate:[{watchIndeterminate:0}]}}static get style(){return z()+(b()+(f()+m()))}},[2,"z-input",{htmlid:[1],type:[1],name:[1],label:[1],htmlAriaLabel:[1,"html-aria-label"],htmlAriaExpanded:[1,"html-aria-expanded"],htmlAriaControls:[1,"html-aria-controls"],htmlAriaAutocomplete:[1,"html-aria-autocomplete"],htmlAriaActivedescendant:[1,"html-aria-activedescendant"],htmlAriaDescribedby:[1,"html-aria-describedby"],htmlAriaLabelledby:[1,"html-aria-labelledby"],value:[1025],disabled:[516],readonly:[4],required:[4],checked:[1028],indeterminate:[1028],placeholder:[1],htmltitle:[1],status:[1],message:[8],labelPosition:[1,"label-position"],autocomplete:[1],htmlRole:[1,"html-role"],hasclearicon:[4],icon:[1],min:[2],minlength:[2],max:[2],maxlength:[2],step:[2],pattern:[1],size:[513],isTyping:[32],passwordHidden:[32],isChecked:[64]},[[4,"inputCheck","inputCheckListener"]],{indeterminate:[{watchIndeterminate:0}]}]);function w(){if(typeof customElements==="undefined"){return}const i=["z-input","z-icon","z-input-message"];i.forEach((i=>{switch(i){case"z-input":if(!customElements.get(n(i))){customElements.define(n(i),x)}break;case"z-icon":if(!customElements.get(n(i))){h()}break;case"z-input-message":if(!customElements.get(n(i))){d()}break}}))}export{x as Z,w as d};
|
|
2
2
|
//# sourceMappingURL=index6.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["stylesGeneralCss","stylesTextCss","stylesTextareaCss","stylesCheckboxRadioCss","ZInput","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","htmlid","randomId","type","InputType","TEXT","disabled","readonly","required","checked","message","labelPosition","LabelPosition","RIGHT","hasclearicon","size","ControlSize","BIG","isTyping","passwordHidden","typingtimeout","inputCheckListener","e","data","detail","RADIO","name","id","isChecked","CHECKBOX","console","warn","emitInputChange","value","emitStartTyping","validity","TEXTAREA","getValidity","inputChange","emit","clearTimeout","timer","setTimeout","emitStopTyping","startTyping","stopTyping","emitInputCheck","inputCheck","emitInputFocus","inputFocus","emitInputBlur","inputBlur","input","hostElement","querySelector","getTextAttributes","placeholder","title","htmltitle","minlength","maxlength","class","status","autocomplete","onInput","target","getNumberAttributes","NUMBER","min","max","step","getPatternAttribute","PASSWORD","TEL","SEARCH","URL","EMAIL","pattern","inputHasMessage","boolean","getAriaAttributes","role","htmlRole","undefined","htmlAriaDescribedby","htmlAriaLabelledby","getTextAriaAttributes","Object","assign","htmlAriaExpanded","htmlAriaControls","htmlAriaAutocomplete","htmlAriaActivedescendant","InputStatus","ERROR","getFocusBlurAttributes","onFocus","onBlur","renderInputText","attr","htmlAriaLabel","icon","h","renderLabel","ref","el","inputRef","renderIcons","renderMessage","label","htmlFor","renderResetIcon","renderIcon","renderShowHidePassword","hidden","onClick","focus","renderTextarea","attributes","ariaAttributes","Fragment","handleCheck","ev","renderCheckbox","ariaRequired","onChange","bind","after","before","LEFT","innerHTML","renderRadio","render"],"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\n:host * {\n box-sizing: border-box;\n}\n\n/* GENERAL */\ninput::-ms-clear,\ninput::-ms-reveal {\n display: none;\n}\n\ninput[type=\"search\"]::-webkit-search-decoration,\ninput[type=\"search\"]::-webkit-search-cancel-button,\ninput[type=\"search\"]::-webkit-search-results-button,\ninput[type=\"search\"]::-webkit-search-results-decoration {\n display: none;\n}\n\ninput,\ntextarea {\n background: var(--color-form-background);\n fill: var(--color-form-default-icon);\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\ninput,\n.textarea-wrapper {\n border: var(--border-size-small) solid var(--color-form-surface04);\n border-radius: var(--border-radius-small);\n color: var(--color-form-default-text);\n}\n\n:host([size=\"small\"]) input,\n:host([size=\"small\"]) textarea,\n:host([size=\"x-small\"]) input,\n:host([size=\"x-small\"]) textarea {\n font-size: var(--font-size-2);\n}\n\n:host.cursor-select input {\n cursor: pointer;\n}\n\n/* HOVER */\ninput:not([readonly]):hover,\n.textarea-wrapper:not(.readonly):hover {\n outline: var(--border-size-medium) solid var(--color-surface04);\n outline-offset: -2px;\n}\n\n/* FOCUS */\n:host:not(.active-select) input:focus:focus-visible,\n:host:not([readonly=\"true\"]) .textarea-wrapper:focus-within {\n border-color: var(--color-form-active-primary);\n box-shadow: var(--shadow-focus-primary);\n color: var(--color-form-active-primary);\n}\n\n:host input:focus:focus-visible:hover,\n.textarea-wrapper:not(.readonly):focus-within:hover {\n outline-color: var(--color-form-active-primary);\n}\n\n:host input:focus:focus-visible + .icons-wrapper {\n fill: var(--color-form-active-primary);\n}\n\n:host.active-select input {\n border: var(--border-size-small) solid var(--color-form-active-primary);\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 border-color: var(--color-form-surface03);\n box-shadow: none;\n}\n\n/* STATUSES (success, warning, error) */\n.input-success {\n border-color: var(--color-form-success01);\n background: var(--color-form-inverse-success);\n}\n\n.input-success:focus:focus-visible + .icons-wrapper,\n.input-success + .icons-wrapper {\n fill: var(--color-form-success01);\n}\n\n.input-error {\n border-color: var(--color-form-hover-error);\n background: var(--color-form-inverse-error);\n}\n\n.input-error:focus:focus-visible + .icons-wrapper,\n.input-error + .icons-wrapper {\n fill: var(--color-form-hover-error);\n}\n\n.input-warning {\n border-color: var(--color-form-hover-warning);\n background: var(--color-form-inverse-warning);\n}\n\n.input-warning:focus:focus-visible + .icons-wrapper,\n.input-warning + .icons-wrapper {\n fill: var(--color-form-hover-warning);\n}\n\n:is(.input-success, .input-error, .input-warning):focus:focus-visible {\n color: var(--color-form-default-text);\n}\n\n/* READONLY */\n:host:not(.active-select) input[readonly],\n.textarea-wrapper.readonly {\n border-color: var(--color-form-surface03);\n fill: var(--color-form-disabled01-icon);\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-form-disabled03);\n box-shadow: none;\n color: var(--color-form-disabled-text);\n fill: var(--color-form-disabled01-icon);\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-form-placeholder-text);\n}\n\n::-webkit-textarea-placeholder {\n color: var(--color-form-placeholder-text);\n}\n\n:-ms-textarea-placeholder {\n color: var(--color-form-placeholder-text);\n}\n\n::placeholder {\n color: var(--color-form-placeholder-text);\n}\n\n:host([disabled]:not([disabled=\"false\"])) label.z-label {\n color: var(--color-disabled03);\n}\n",".text-wrapper > div {\n position: relative;\n z-index: 1;\n fill: var(--color-form-default-icon);\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.input-icon {\n display: flex;\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 > .input-icon + .input-icon {\n margin-left: calc(var(--space-unit) * 0.5);\n}\n\n.text-wrapper .icons-wrapper > button.input-icon.hidden {\n display: none;\n}\n\n.text-wrapper .icons-wrapper > button.reset-icon,\n.text-wrapper .icons-wrapper > button.toggle-password-icon {\n display: flex;\n min-width: 24px;\n min-height: 24px;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n}\n\n.text-wrapper .icons-wrapper > .input-icon {\n --z-icon-width: 18px;\n --z-icon-height: 18px;\n\n display: block;\n}\n\n.text-wrapper .icons-wrapper > .input-icon.small,\n.text-wrapper .icons-wrapper > .input-icon.x-small {\n --z-icon-width: 16px;\n --z-icon-height: 16px;\n}\n\n.text-wrapper .icons-wrapper > button.input-icon:focus {\n box-shadow: var(--shadow-focus-primary);\n outline: none !important;\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 width: 100%;\n height: 100%;\n padding: calc(var(--space-unit) * 1.5);\n}\n\n.textarea-wrapper:not(.input-error, .input-success, .input-warning) {\n background-color: var(--color-form-background);\n}\n\ntextarea {\n width: 100%;\n min-height: 132px;\n padding: 0;\n border: none;\n margin: 0;\n color: currentcolor;\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: var(--color-hover-primary-icon);\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 min-height: 24px;\n align-items: center;\n padding: 3px 0;\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 border-radius: 50%;\n}\n\n.checkbox-wrapper > input:focus:focus-visible + .checkbox-label > z-icon {\n border-radius: var(--border-radius-small);\n}\n\n.radio-wrapper > input:focus:focus-visible + .radio-label > z-icon,\n.checkbox-wrapper > input:focus:focus-visible + .checkbox-label > z-icon {\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 {\n Component,\n ComponentInterface,\n Element,\n Event,\n EventEmitter,\n Listen,\n Method,\n Prop,\n State,\n h,\n} from \"@stencil/core\";\nimport {Fragment, 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 implements ComponentInterface {\n @Element() hostElement: HTMLZInputElement;\n\n /** the id of the input element */\n @Prop()\n htmlid = `id-${randomId()}`;\n\n /** Input type */\n @Prop()\n type: InputType = InputType.TEXT;\n\n /** the input `name` attribute */\n @Prop()\n name?: string;\n\n /** the input label */\n @Prop()\n label?: string;\n\n /** the input `aria-label` */\n @Prop()\n htmlAriaLabel?: string;\n\n /** the input `aria-expanded`: available for text, password, number, email */\n @Prop()\n htmlAriaExpanded?: string;\n\n /** the input `aria-controls` (optional): available for text, password, number, email */\n @Prop()\n htmlAriaControls?: string;\n\n /** the input `aria-autocomplete` (optional): available for text, password, number, email */\n @Prop()\n htmlAriaAutocomplete?: string;\n\n /** the input `aria-activedescendant` (optional): available for text, password, number, email */\n @Prop()\n htmlAriaActivedescendant?: string;\n\n /** the input `aria-describedby` (optional) */\n @Prop()\n htmlAriaDescribedby?: string;\n\n /** the input `aria-labelledby` (optional) */\n @Prop()\n htmlAriaLabelledby?: 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 htmlRole?: string;\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 },\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 inputHasMessage(): boolean {\n if (typeof boolean(this.message) === \"boolean\") {\n return false;\n }\n\n return true;\n }\n\n private getAriaAttributes(): Record<string, string | undefined> {\n return {\n \"role\": this.htmlRole || undefined,\n \"aria-describedby\": this.htmlAriaDescribedby || undefined,\n \"aria-labelledby\": this.htmlAriaLabelledby || undefined,\n };\n }\n\n private getTextAriaAttributes(): Record<string, string | undefined> {\n return {\n ...this.getAriaAttributes(),\n \"aria-expanded\": this.htmlAriaExpanded || undefined,\n \"aria-controls\": this.htmlAriaControls || undefined,\n \"aria-autocomplete\": this.htmlAriaAutocomplete || undefined,\n \"aria-activedescendant\": this.htmlAriaActivedescendant || undefined,\n \"aria-describedby\":\n this.htmlAriaDescribedby || this.inputHasMessage()\n ? this.htmlAriaDescribedby || `${this.htmlid}-message`\n : undefined,\n \"aria-invalid\": this.status === InputStatus.ERROR ? \"true\" : undefined,\n \"aria-required\": this.required ? \"true\" : undefined,\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 attr = {\n ...this.getTextAttributes(),\n ...this.getNumberAttributes(type),\n ...this.getPatternAttribute(type),\n ...this.getTextAriaAttributes(),\n ...this.getFocusBlurAttributes(),\n \"aria-label\": this.htmlAriaLabel || undefined,\n };\n\n attr.class = {\n ...(attr.class as {[className: string]: boolean}),\n \"has-icon\": !!this.icon || type === InputType.PASSWORD,\n \"has-clear-icon\": this.hasclearicon && type != InputType.NUMBER,\n };\n\n return (\n <div class=\"text-wrapper\">\n {this.renderLabel()}\n <div>\n <input\n {...attr}\n type={type === InputType.PASSWORD && !this.passwordHidden ? InputType.TEXT : type}\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=\"z-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 <z-icon\n name={this.icon}\n class={{[this.size]: true, \"input-icon\": true}}\n />\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={{\"reset-icon\": true, \"input-icon\": true, hidden}}\n aria-label=\"cancella il contenuto dell'input\"\n onClick={() => {\n this.inputRef.value = \"\";\n this.emitInputChange(\"\");\n this.inputRef.focus();\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=\"input-icon toggle-password-icon\"\n disabled={this.disabled}\n aria-label=\"mostra password\"\n aria-pressed={!this.passwordHidden ? \"true\" : \"false\"}\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 html-id={`${this.htmlid}-message`}\n message={boolean(this.message) === true ? undefined : (this.message as string)}\n status={this.status}\n class={this.size}\n disabled={this.disabled}\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 ariaAttributes = this.getTextAriaAttributes();\n\n return (\n <Fragment>\n {this.renderLabel()}\n <div\n class={{\n ...(attributes.class as {[className: string]: boolean}),\n \"textarea-wrapper\": true,\n \"readonly\": !!attributes.readonly,\n }}\n >\n <textarea\n {...attributes}\n {...ariaAttributes}\n class={{\n ...(attributes.class as {[className: string]: boolean}),\n \"z-scrollbar\": true,\n }}\n aria-label={this.htmlAriaLabel || undefined}\n ></textarea>\n </div>\n {this.renderMessage()}\n </Fragment>\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 const ariaRequired = this.required ? {\"aria-required\": \"true\"} : {};\n\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 {...ariaRequired}\n {...this.getAriaAttributes()}\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 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 const ariaRequired = this.required ? {\"aria-required\": \"true\"} : {};\n\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 required={this.required}\n onChange={this.handleCheck.bind(this)}\n value={this.value}\n {...this.getAriaAttributes()}\n {...this.getFocusBlurAttributes()}\n {...ariaRequired}\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 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 switch (this.type) {\n case InputType.TEXTAREA:\n return this.renderTextarea();\n case InputType.CHECKBOX:\n return this.renderCheckbox();\n case InputType.RADIO:\n return this.renderRadio();\n case InputType.TEXT:\n default:\n return this.renderInputText(this.type);\n }\n }\n}\n"],"mappings":"kSAAA,MAAMA,EAAmB,IAAM,kpICA/B,MAAMC,EAAgB,IAAM,myECA5B,MAAMC,EAAoB,IAAM,4VCAhC,MAAMC,EAAyB,IAAM,28I,MCsBxBC,EAAMC,EAAA,MAAAD,UAAAE,EANnB,WAAAC,CAAAC,G,wRAWEC,KAAAC,OAAS,MAAMC,MAIfF,KAAAG,KAAkBC,EAAUC,KA4C5BL,KAAAM,SAAqB,MAIrBN,KAAAO,SAAqB,MAIrBP,KAAAQ,SAAqB,MAIrBR,KAAAS,QAAoB,MAgBpBT,KAAAU,QAA6B,KAI7BV,KAAAW,cAAgCC,EAAcC,MAY9Cb,KAAAc,aAAyB,KAgCzBd,KAAAe,KAAqBC,EAAYC,IAGjCjB,KAAAkB,SAAW,MAGXlB,KAAAmB,eAAiB,KAITnB,KAAAoB,cAAgB,GAqdzB,CAhdC,kBAAAC,CAAmBC,GACjB,MAAMC,EAAOD,EAAEE,OACf,OAAQxB,KAAKG,MACX,KAAKC,EAAUqB,MACb,GAAIF,EAAKpB,OAASC,EAAUqB,OAASF,EAAKG,OAAS1B,KAAK0B,MAAQH,EAAKI,KAAO3B,KAAKC,OAAQ,CACvFD,KAAKS,QAAU,K,CAEjB,M,CAMN,eAAMmB,GACJ,OAAQ5B,KAAKG,MACX,KAAKC,EAAUyB,SACf,KAAKzB,EAAUqB,MACb,OAAOzB,KAAKS,QACd,QACEqB,QAAQC,KAAK,wEAEb,OAAO,M,CAQL,eAAAC,CAAgBC,GACtB,IAAKjC,KAAKkB,SAAU,CAClBlB,KAAKkC,iB,CAGP,IAAIC,EACJ,GAAInC,KAAKG,OAASC,EAAUgC,SAAU,CACpCD,EAAWnC,KAAKqC,YAAY,W,KACvB,CACLF,EAAWnC,KAAKqC,YAAY,Q,CAE9BrC,KAAKiC,MAAQA,EACbjC,KAAKsC,YAAYC,KAAK,CAACN,QAAOE,aAE9BK,aAAaxC,KAAKyC,OAClBzC,KAAKyC,MAAQC,YAAW,KACtB1C,KAAK2C,eAAe3C,KAAKiC,MAAOE,EAAS,GACxCnC,KAAKoB,c,CAOF,eAAAc,GACNlC,KAAKkB,SAAW,KAChBlB,KAAK4C,YAAYL,M,CAOX,cAAAI,CAAeV,EAAeE,GACpCnC,KAAKkB,SAAW,MAChBlB,KAAK6C,WAAWN,KAAK,CACnBN,MAAOA,EACPE,SAAUA,G,CAQN,cAAAW,CAAerC,GACrBT,KAAK+C,WAAWR,KAAK,CACnBZ,GAAI3B,KAAKC,OACTQ,QAASA,EACTN,KAAMH,KAAKG,KACXuB,KAAM1B,KAAK0B,KACXO,MAAOjC,KAAKiC,MACZE,SAAUnC,KAAKqC,YAAY,U,CAQvB,cAAAW,GACNhD,KAAKiD,WAAWV,KAAK,CAACZ,GAAI3B,KAAKC,Q,CAOzB,aAAAiD,GACNlD,KAAKmD,UAAUZ,KAAK,CAACZ,GAAI3B,KAAKC,Q,CAGxB,WAAAoC,CAAYlC,GAClB,MAAMiD,EAAQpD,KAAKqD,YAAYC,cAAcnD,GAE7C,OAAOiD,EAAMjB,Q,CAKP,iBAAAoB,GACN,MAAO,CACL5B,GAAI3B,KAAKC,OACTyB,KAAM1B,KAAK0B,KACX8B,YAAaxD,KAAKwD,YAClBvB,MAAOjC,KAAKiC,MACZ3B,SAAUN,KAAKM,SACfC,SAAUP,KAAKO,SACfC,SAAUR,KAAKQ,SACfiD,MAAOzD,KAAK0D,UACZC,UAAW3D,KAAK2D,UAChBC,UAAW5D,KAAK4D,UAChBC,MAAO,CACL,CAAC,SAAS7D,KAAK8D,YAAa9D,KAAK8D,QAEnCC,aAAc/D,KAAK+D,aACnBC,QAAU1C,GAAkBtB,KAAKgC,gBAAiBV,EAAE2C,OAA4BhC,O,CAI5E,mBAAAiC,CAAoB/D,GAC1B,GAAIA,GAAQC,EAAU+D,OAAQ,CAC5B,M,CAGF,MAAO,CACLC,IAAKpE,KAAKoE,IACVC,IAAKrE,KAAKqE,IACVC,KAAMtE,KAAKsE,K,CAIP,mBAAAC,CAAoBpE,GAC1B,GACEA,GAAQC,EAAUoE,UAClBrE,GAAQC,EAAUC,MAClBF,GAAQC,EAAUqE,KAClBtE,GAAQC,EAAUsE,QAClBvE,GAAQC,EAAUuE,KAClBxE,GAAQC,EAAUwE,MAClB,CACA,M,CAGF,MAAO,CACLC,QAAS7E,KAAK6E,Q,CAIV,eAAAC,GACN,UAAWC,EAAQ/E,KAAKU,WAAa,UAAW,CAC9C,OAAO,K,CAGT,OAAO,I,CAGD,iBAAAsE,GACN,MAAO,CACLC,KAAQjF,KAAKkF,UAAYC,UACzB,mBAAoBnF,KAAKoF,qBAAuBD,UAChD,kBAAmBnF,KAAKqF,oBAAsBF,U,CAI1C,qBAAAG,GACN,OAAAC,OAAAC,OAAAD,OAAAC,OAAA,GACKxF,KAAKgF,qBAAmB,CAC3B,gBAAiBhF,KAAKyF,kBAAoBN,UAC1C,gBAAiBnF,KAAK0F,kBAAoBP,UAC1C,oBAAqBnF,KAAK2F,sBAAwBR,UAClD,wBAAyBnF,KAAK4F,0BAA4BT,UAC1D,mBACEnF,KAAKoF,qBAAuBpF,KAAK8E,kBAC7B9E,KAAKoF,qBAAuB,GAAGpF,KAAKC,iBACpCkF,UACN,eAAgBnF,KAAK8D,SAAW+B,EAAYC,MAAQ,OAASX,UAC7D,gBAAiBnF,KAAKQ,SAAW,OAAS2E,W,CAItC,sBAAAY,GACN,MAAO,CACLC,QAAS,IAAMhG,KAAKgD,iBACpBiD,OAAQ,IAAMjG,KAAKkD,gB,CAIf,eAAAgD,CAAgB/F,EAAkBC,EAAUC,MAClD,MAAM8F,EAAIZ,OAAAC,OAAAD,OAAAC,OAAAD,OAAAC,OAAAD,OAAAC,OAAAD,OAAAC,OAAAD,OAAAC,OAAA,GACLxF,KAAKuD,qBACLvD,KAAKkE,oBAAoB/D,IACzBH,KAAKuE,oBAAoBpE,IACzBH,KAAKsF,yBACLtF,KAAK+F,0BAAwB,CAChC,aAAc/F,KAAKoG,eAAiBjB,YAGtCgB,EAAKtC,MAAK0B,OAAAC,OAAAD,OAAAC,OAAA,GACJW,EAAKtC,OAAwC,CACjD,aAAc7D,KAAKqG,MAAQlG,IAASC,EAAUoE,SAC9C,iBAAkBxE,KAAKc,cAAgBX,GAAQC,EAAU+D,SAG3D,OACEmC,EAAA,OAAKzC,MAAM,gBACR7D,KAAKuG,cACND,EAAA,WACEA,EAAA,QAAAf,OAAAC,OAAA,GACMW,EAAI,CACRhG,KAAMA,IAASC,EAAUoE,WAAaxE,KAAKmB,eAAiBf,EAAUC,KAAOF,EAC7EqG,IAAMC,GAAQzG,KAAK0G,SAAWD,KAE/BzG,KAAK2G,eAEP3G,KAAK4G,gB,CAKJ,WAAAL,GACN,IAAKvG,KAAK6G,MAAO,CACf,M,CAGF,OACEP,EAAA,SACEzC,MAAM,oBACNlC,GAAI,GAAG3B,KAAKC,eACZ6G,QAAS9G,KAAKC,QAEbD,KAAK6G,M,CAKJ,WAAAF,GACN,OACEL,EAAA,QAAMzC,MAAM,iBACT7D,KAAK+G,kBACL/G,KAAKgH,a,CAKJ,UAAAA,GACN,GAAIhH,KAAKG,OAASC,EAAUoE,SAAU,CACpC,OAAOxE,KAAKiH,wB,CAGd,IAAKjH,KAAKqG,KAAM,CACd,M,CAGF,OACEC,EAAA,UACE5E,KAAM1B,KAAKqG,KACXxC,MAAO,CAAC,CAAC7D,KAAKe,MAAO,KAAM,aAAc,O,CAKvC,eAAAgG,GACN,IAAIG,EAAS,MACb,IAAKlH,KAAKc,eAAiBd,KAAKiC,OAASjC,KAAKM,UAAYN,KAAKO,UAAYP,KAAKG,MAAQC,EAAU+D,OAAQ,CACxG+C,EAAS,I,CAGX,OACEZ,EAAA,UACEnG,KAAK,SACL0D,MAAO,CAAC,aAAc,KAAM,aAAc,KAAMqD,UAAO,aAC5C,mCACXC,QAAS,KACPnH,KAAK0G,SAASzE,MAAQ,GACtBjC,KAAKgC,gBAAgB,IACrBhC,KAAK0G,SAASU,OAAO,GAGvBd,EAAA,UACE5E,KAAK,WACLmC,MAAO7D,KAAKe,O,CAMZ,sBAAAkG,GACN,OACEX,EAAA,UACEnG,KAAK,SACL0D,MAAM,kCACNvD,SAAUN,KAAKM,SAAQ,aACZ,kBAAiB,gBACbN,KAAKmB,eAAiB,OAAS,QAC9CgG,QAAS,IAAOnH,KAAKmB,gBAAkBnB,KAAKmB,gBAE5CmF,EAAA,UACE5E,KAAM1B,KAAKmB,eAAiB,cAAgB,kBAC5C0C,MAAO7D,KAAKe,O,CAMZ,aAAA6F,GACN,GAAI7B,EAAQ/E,KAAKU,WAAa,MAAO,CACnC,M,CAGF,OACE4F,EAAA,6BACW,GAAGtG,KAAKC,iBACjBS,QAASqE,EAAQ/E,KAAKU,WAAa,KAAOyE,UAAanF,KAAKU,QAC5DoD,OAAQ9D,KAAK8D,OACbD,MAAO7D,KAAKe,KACZT,SAAUN,KAAKM,U,CASb,cAAA+G,GACN,MAAMC,EAAatH,KAAKuD,oBACxB,MAAMgE,EAAiBvH,KAAKsF,wBAE5B,OACEgB,EAACkB,EAAQ,KACNxH,KAAKuG,cACND,EAAA,OACEzC,MAAK0B,OAAAC,OAAAD,OAAAC,OAAA,GACC8B,EAAWzD,OAAwC,CACvD,mBAAoB,KACpBtD,WAAc+G,EAAW/G,YAG3B+F,EAAA,WAAAf,OAAAC,OAAA,GACM8B,EACAC,EAAc,CAClB1D,MAAK0B,OAAAC,OAAAD,OAAAC,OAAA,GACC8B,EAAWzD,OAAwC,CACvD,cAAe,OAAI,aAET7D,KAAKoG,eAAiBjB,cAGrCnF,KAAK4G,gB,CAOJ,WAAAa,CAAYC,GAClB1H,KAAKS,QAAWiH,EAAGzD,OAA4BxD,QAC/CT,KAAK8C,eAAe9C,KAAKS,Q,CAInB,cAAAkH,GACN,MAAMC,EAAe5H,KAAKQ,SAAW,CAAC,gBAAiB,QAAU,GAEjE,OACE8F,EAAA,OAAKzC,MAAM,oBACTyC,EAAA,QAAAf,OAAAC,OAAA,CACE7D,GAAI3B,KAAKC,OACTE,KAAK,WACLuB,KAAM1B,KAAK0B,KACXjB,QAAST,KAAKS,QACdH,SAAUN,KAAKM,SACfC,SAAUP,KAAKO,SACfC,SAAUR,KAAKQ,SACfqH,SAAU7H,KAAKyH,YAAYK,KAAK9H,MAChCiC,MAAOjC,KAAKiC,OACR2F,EACA5H,KAAKgF,oBACLhF,KAAK+F,2BAGXO,EAAA,SACEQ,QAAS9G,KAAKC,OACd4D,MAAO,CACL,iBAAkB,KAClBkE,MAAS/H,KAAKW,gBAAkBC,EAAcC,MAC9CmH,OAAUhI,KAAKW,gBAAkBC,EAAcqH,OAGjD3B,EAAA,UACE5E,KAAM1B,KAAKS,QAAU,mBAAqB,WAC1CoD,MAAO7D,KAAKe,OAEbf,KAAK6G,OAASP,EAAA,QAAM4B,UAAWlI,KAAK6G,S,CASrC,WAAAsB,GACN,MAAMP,EAAe5H,KAAKQ,SAAW,CAAC,gBAAiB,QAAU,GAEjE,OACE8F,EAAA,OAAKzC,MAAM,iBACTyC,EAAA,QAAAf,OAAAC,OAAA,CACE7D,GAAI3B,KAAKC,OACTE,KAAK,QACLuB,KAAM1B,KAAK0B,KACXjB,QAAST,KAAKS,QACdH,SAAUN,KAAKM,SACfC,SAAUP,KAAKO,SACfC,SAAUR,KAAKQ,SACfqH,SAAU7H,KAAKyH,YAAYK,KAAK9H,MAChCiC,MAAOjC,KAAKiC,OACRjC,KAAKgF,oBACLhF,KAAK+F,yBACL6B,IAGNtB,EAAA,SACEQ,QAAS9G,KAAKC,OACd4D,MAAO,CACL,cAAe,KACfkE,MAAS/H,KAAKW,gBAAkBC,EAAcC,MAC9CmH,OAAUhI,KAAKW,gBAAkBC,EAAcqH,OAGjD3B,EAAA,UACE5E,KAAM1B,KAAKS,QAAU,uBAAyB,eAC9CoD,MAAO7D,KAAKe,OAEbf,KAAK6G,OAASP,EAAA,QAAM4B,UAAWlI,KAAK6G,S,CAO7C,MAAAuB,GACE,OAAQpI,KAAKG,MACX,KAAKC,EAAUgC,SACb,OAAOpC,KAAKqH,iBACd,KAAKjH,EAAUyB,SACb,OAAO7B,KAAK2H,iBACd,KAAKvH,EAAUqB,MACb,OAAOzB,KAAKmI,cACd,KAAK/H,EAAUC,KACf,QACE,OAAOL,KAAKkG,gBAAgBlG,KAAKG,M","ignoreList":[]}
|
|
1
|
+
{"version":3,"names":["stylesGeneralCss","stylesTextCss","stylesTextareaCss","stylesCheckboxRadioCss","ZInput","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","htmlid","randomId","type","InputType","TEXT","disabled","readonly","required","checked","indeterminate","message","labelPosition","LabelPosition","RIGHT","hasclearicon","size","ControlSize","BIG","isTyping","passwordHidden","typingtimeout","inputCheckListener","e","data","detail","RADIO","name","id","watchIndeterminate","syncCheckboxIndeterminate","CHECKBOX","inputRef","isChecked","console","warn","emitInputChange","value","emitStartTyping","validity","TEXTAREA","getValidity","inputChange","emit","clearTimeout","timer","setTimeout","emitStopTyping","startTyping","stopTyping","emitInputCheck","inputCheck","emitInputFocus","inputFocus","emitInputBlur","inputBlur","input","hostElement","querySelector","getTextAttributes","placeholder","title","htmltitle","minlength","maxlength","class","status","autocomplete","onInput","target","getNumberAttributes","NUMBER","min","max","step","getPatternAttribute","PASSWORD","TEL","SEARCH","URL","EMAIL","pattern","inputHasMessage","boolean","getAriaAttributes","role","htmlRole","undefined","htmlAriaDescribedby","htmlAriaLabelledby","getTextAriaAttributes","Object","assign","htmlAriaExpanded","htmlAriaControls","htmlAriaAutocomplete","htmlAriaActivedescendant","InputStatus","ERROR","getFocusBlurAttributes","onFocus","onBlur","renderInputText","attr","htmlAriaLabel","icon","h","renderLabel","ref","el","renderIcons","renderMessage","label","htmlFor","renderResetIcon","renderIcon","renderShowHidePassword","hidden","onClick","focus","renderTextarea","attributes","ariaAttributes","Fragment","handleCheck","ev","renderCheckbox","ariaRequired","onChange","bind","after","before","LEFT","innerHTML","renderRadio","render"],"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\n:host * {\n box-sizing: border-box;\n}\n\n/* GENERAL */\ninput::-ms-clear,\ninput::-ms-reveal {\n display: none;\n}\n\ninput[type=\"search\"]::-webkit-search-decoration,\ninput[type=\"search\"]::-webkit-search-cancel-button,\ninput[type=\"search\"]::-webkit-search-results-button,\ninput[type=\"search\"]::-webkit-search-results-decoration {\n display: none;\n}\n\ninput,\ntextarea {\n background: var(--color-form-background);\n fill: var(--color-form-default-icon);\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\ninput,\n.textarea-wrapper {\n border: var(--border-size-small) solid var(--color-form-surface04);\n border-radius: var(--border-radius-small);\n color: var(--color-form-default-text);\n}\n\n:host([size=\"small\"]) input,\n:host([size=\"small\"]) textarea,\n:host([size=\"x-small\"]) input,\n:host([size=\"x-small\"]) textarea {\n font-size: var(--font-size-2);\n}\n\n:host.cursor-select input {\n cursor: pointer;\n}\n\n/* HOVER */\ninput:not([readonly]):hover,\n.textarea-wrapper:not(.readonly):hover {\n outline: var(--border-size-medium) solid var(--color-surface04);\n outline-offset: -2px;\n}\n\n/* FOCUS */\n:host:not(.active-select) input:focus:focus-visible,\n:host:not([readonly=\"true\"]) .textarea-wrapper:focus-within {\n border-color: var(--color-form-active-primary);\n box-shadow: var(--shadow-focus-primary);\n color: var(--color-form-active-primary);\n}\n\n:host input:focus:focus-visible:hover,\n.textarea-wrapper:not(.readonly):focus-within:hover {\n outline-color: var(--color-form-active-primary);\n}\n\n:host input:focus:focus-visible + .icons-wrapper {\n fill: var(--color-form-active-primary);\n}\n\n:host.active-select input {\n border: var(--border-size-small) solid var(--color-form-active-primary);\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 border-color: var(--color-form-surface03);\n box-shadow: none;\n}\n\n/* STATUSES (success, warning, error) */\n.input-success {\n border-color: var(--color-form-success01);\n background: var(--color-form-inverse-success);\n}\n\n.input-success:focus:focus-visible + .icons-wrapper,\n.input-success + .icons-wrapper {\n fill: var(--color-form-success01);\n}\n\n.input-error {\n border-color: var(--color-form-hover-error);\n background: var(--color-form-inverse-error);\n}\n\n.input-error:focus:focus-visible + .icons-wrapper,\n.input-error + .icons-wrapper {\n fill: var(--color-form-hover-error);\n}\n\n.input-warning {\n border-color: var(--color-form-hover-warning);\n background: var(--color-form-inverse-warning);\n}\n\n.input-warning:focus:focus-visible + .icons-wrapper,\n.input-warning + .icons-wrapper {\n fill: var(--color-form-hover-warning);\n}\n\n:is(.input-success, .input-error, .input-warning):focus:focus-visible {\n color: var(--color-form-default-text);\n}\n\n/* READONLY */\n:host:not(.active-select) input[readonly],\n.textarea-wrapper.readonly {\n border-color: var(--color-form-surface03);\n fill: var(--color-form-disabled01-icon);\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-form-disabled03);\n box-shadow: none;\n color: var(--color-form-disabled-text);\n fill: var(--color-form-disabled01-icon);\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-form-placeholder-text);\n}\n\n::-webkit-textarea-placeholder {\n color: var(--color-form-placeholder-text);\n}\n\n:-ms-textarea-placeholder {\n color: var(--color-form-placeholder-text);\n}\n\n::placeholder {\n color: var(--color-form-placeholder-text);\n}\n\n:host([disabled]:not([disabled=\"false\"])) label.z-label {\n color: var(--color-disabled03);\n}\n",".text-wrapper > div {\n position: relative;\n z-index: 1;\n fill: var(--color-form-default-icon);\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.input-icon {\n display: flex;\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 > .input-icon + .input-icon {\n margin-left: calc(var(--space-unit) * 0.5);\n}\n\n.text-wrapper .icons-wrapper > button.input-icon.hidden {\n display: none;\n}\n\n.text-wrapper .icons-wrapper > button.reset-icon,\n.text-wrapper .icons-wrapper > button.toggle-password-icon {\n display: flex;\n min-width: 24px;\n min-height: 24px;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n}\n\n.text-wrapper .icons-wrapper > .input-icon {\n --z-icon-width: 18px;\n --z-icon-height: 18px;\n\n display: block;\n}\n\n.text-wrapper .icons-wrapper > .input-icon.small,\n.text-wrapper .icons-wrapper > .input-icon.x-small {\n --z-icon-width: 16px;\n --z-icon-height: 16px;\n}\n\n.text-wrapper .icons-wrapper > button.input-icon:focus {\n box-shadow: var(--shadow-focus-primary);\n outline: none !important;\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 width: 100%;\n height: 100%;\n padding: calc(var(--space-unit) * 1.5);\n}\n\n.textarea-wrapper:not(.input-error, .input-success, .input-warning) {\n background-color: var(--color-form-background);\n}\n\ntextarea {\n width: 100%;\n min-height: 132px;\n padding: 0;\n border: none;\n margin: 0;\n color: currentcolor;\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-icon);\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: var(--color-hover-primary-icon);\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 min-height: 24px;\n align-items: center;\n padding: 3px 0;\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 border-radius: 50%;\n}\n\n.checkbox-wrapper > input:focus:focus-visible + .checkbox-label > z-icon {\n border-radius: var(--border-radius-small);\n}\n\n.radio-wrapper > input:focus:focus-visible + .radio-label > z-icon,\n.checkbox-wrapper > input:focus:focus-visible + .checkbox-label > z-icon {\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-disabled03-icon);\n}\n","import {\n Component,\n ComponentInterface,\n Element,\n Event,\n EventEmitter,\n Listen,\n Method,\n Prop,\n State,\n Watch,\n h,\n} from \"@stencil/core\";\nimport {Fragment, 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 implements ComponentInterface {\n @Element() hostElement: HTMLZInputElement;\n\n /** the id of the input element */\n @Prop()\n htmlid = `id-${randomId()}`;\n\n /** Input type */\n @Prop()\n type: InputType = InputType.TEXT;\n\n /** the input `name` attribute */\n @Prop()\n name?: string;\n\n /** the input label */\n @Prop()\n label?: string;\n\n /** the input `aria-label` */\n @Prop()\n htmlAriaLabel?: string;\n\n /** the input `aria-expanded`: available for text, password, number, email */\n @Prop()\n htmlAriaExpanded?: string;\n\n /** the input `aria-controls` (optional): available for text, password, number, email */\n @Prop()\n htmlAriaControls?: string;\n\n /** the input `aria-autocomplete` (optional): available for text, password, number, email */\n @Prop()\n htmlAriaAutocomplete?: string;\n\n /** the input `aria-activedescendant` (optional): available for text, password, number, email */\n @Prop()\n htmlAriaActivedescendant?: string;\n\n /** the input `aria-describedby` (optional) */\n @Prop()\n htmlAriaDescribedby?: string;\n\n /** the input `aria-labelledby` (optional) */\n @Prop()\n htmlAriaLabelledby?: 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 /** indeterminate: available for checkbox */\n @Prop({mutable: true})\n indeterminate?: 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 htmlRole?: string;\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 @Watch(\"indeterminate\")\n watchIndeterminate(): void {\n this.syncCheckboxIndeterminate();\n }\n\n private syncCheckboxIndeterminate(): void {\n if (this.type !== InputType.CHECKBOX || !this.inputRef) {\n return;\n }\n\n this.inputRef.indeterminate = !!this.indeterminate;\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 },\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 inputHasMessage(): boolean {\n if (typeof boolean(this.message) === \"boolean\") {\n return false;\n }\n\n return true;\n }\n\n private getAriaAttributes(): Record<string, string | undefined> {\n return {\n \"role\": this.htmlRole || undefined,\n \"aria-describedby\": this.htmlAriaDescribedby || undefined,\n \"aria-labelledby\": this.htmlAriaLabelledby || undefined,\n };\n }\n\n private getTextAriaAttributes(): Record<string, string | undefined> {\n return {\n ...this.getAriaAttributes(),\n \"aria-expanded\": this.htmlAriaExpanded || undefined,\n \"aria-controls\": this.htmlAriaControls || undefined,\n \"aria-autocomplete\": this.htmlAriaAutocomplete || undefined,\n \"aria-activedescendant\": this.htmlAriaActivedescendant || undefined,\n \"aria-describedby\":\n this.htmlAriaDescribedby || this.inputHasMessage()\n ? this.htmlAriaDescribedby || `${this.htmlid}-message`\n : undefined,\n \"aria-invalid\": this.status === InputStatus.ERROR ? \"true\" : undefined,\n \"aria-required\": this.required ? \"true\" : undefined,\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 attr = {\n ...this.getTextAttributes(),\n ...this.getNumberAttributes(type),\n ...this.getPatternAttribute(type),\n ...this.getTextAriaAttributes(),\n ...this.getFocusBlurAttributes(),\n \"aria-label\": this.htmlAriaLabel || undefined,\n };\n\n attr.class = {\n ...(attr.class as {[className: string]: boolean}),\n \"has-icon\": !!this.icon || type === InputType.PASSWORD,\n \"has-clear-icon\": this.hasclearicon && type != InputType.NUMBER,\n };\n\n return (\n <div class=\"text-wrapper\">\n {this.renderLabel()}\n <div>\n <input\n {...attr}\n type={type === InputType.PASSWORD && !this.passwordHidden ? InputType.TEXT : type}\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=\"z-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 <z-icon\n name={this.icon}\n class={{[this.size]: true, \"input-icon\": true}}\n />\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={{\"reset-icon\": true, \"input-icon\": true, hidden}}\n aria-label=\"cancella il contenuto dell'input\"\n onClick={() => {\n this.inputRef.value = \"\";\n this.emitInputChange(\"\");\n this.inputRef.focus();\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=\"input-icon toggle-password-icon\"\n disabled={this.disabled}\n aria-label=\"mostra password\"\n aria-pressed={!this.passwordHidden ? \"true\" : \"false\"}\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 html-id={`${this.htmlid}-message`}\n message={boolean(this.message) === true ? undefined : (this.message as string)}\n status={this.status}\n class={this.size}\n disabled={this.disabled}\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 ariaAttributes = this.getTextAriaAttributes();\n\n return (\n <Fragment>\n {this.renderLabel()}\n <div\n class={{\n ...(attributes.class as {[className: string]: boolean}),\n \"textarea-wrapper\": true,\n \"readonly\": !!attributes.readonly,\n }}\n >\n <textarea\n {...attributes}\n {...ariaAttributes}\n class={{\n ...(attributes.class as {[className: string]: boolean}),\n \"z-scrollbar\": true,\n }}\n aria-label={this.htmlAriaLabel || undefined}\n ></textarea>\n </div>\n {this.renderMessage()}\n </Fragment>\n );\n }\n\n /* END textarea */\n\n private handleCheck(ev: Event): void {\n if (this.type === InputType.CHECKBOX && this.indeterminate) {\n this.indeterminate = false;\n }\n\n this.checked = (ev.target as HTMLInputElement).checked;\n this.emitInputCheck(this.checked);\n }\n\n /* START checkbox */\n private renderCheckbox(): HTMLDivElement {\n const ariaRequired = this.required ? {\"aria-required\": \"true\"} : {};\n\n return (\n <div class=\"checkbox-wrapper\">\n <input\n id={this.htmlid}\n type=\"checkbox\"\n name={this.name}\n checked={this.indeterminate ? false : 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 {...ariaRequired}\n {...this.getAriaAttributes()}\n {...this.getFocusBlurAttributes()}\n ref={(el) => {\n this.inputRef = el;\n this.syncCheckboxIndeterminate();\n }}\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.indeterminate ? \"indeterminated-checkbox\" : this.checked ? \"checkbox-checked\" : \"checkbox\"}\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 const ariaRequired = this.required ? {\"aria-required\": \"true\"} : {};\n\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 required={this.required}\n onChange={this.handleCheck.bind(this)}\n value={this.value}\n {...this.getAriaAttributes()}\n {...this.getFocusBlurAttributes()}\n {...ariaRequired}\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 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 switch (this.type) {\n case InputType.TEXTAREA:\n return this.renderTextarea();\n case InputType.CHECKBOX:\n return this.renderCheckbox();\n case InputType.RADIO:\n return this.renderRadio();\n case InputType.TEXT:\n default:\n return this.renderInputText(this.type);\n }\n }\n}\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{proxyCustomElement as e,HTMLElement as t,h as s,Host as i,transformTag as n}from"@stencil/core/internal/client";import{i as r,m as o}from"./index2.js";const l=()=>`:host{display:flex;flex-direction:column;font-family:var(--font-family-sans);font-weight:var(--font-rg)}`;const
|
|
1
|
+
import{proxyCustomElement as e,HTMLElement as t,h as s,Host as i,transformTag as n}from"@stencil/core/internal/client";import{i as r,m as o}from"./index2.js";const l=()=>`:host{display:flex;flex-direction:column;font-family:var(--font-family-sans);font-weight:var(--font-rg)}`;const c=e(class e extends t{constructor(e){super();if(e!==false){this.__registerHost()}this.__attachShadow();this.size=r.MEDIUM;this.listType=o.NONE;this.htmlRole="list"}onRoleChange(e){this.htmlRole=e}setChildrenProps(){Array.from(this.host.children).filter((e=>e.tagName.toLowerCase()==="z-list-element")).forEach(((e,t)=>{e.size=this.size;e.listType=this.listType;e.listElementPosition=`${t+1}`}))}render(){return s(i,{key:"ac29d5323be6b26a03f8477d7be07de92e66b08e",role:this.htmlRole},s("slot",{key:"4ae10c8bc8c8d1d11c3bffc751b86882b5f6f21c"}))}get host(){return this}static get watchers(){return{role:[{onRoleChange:1}],size:[{setChildrenProps:1}],listType:[{setChildrenProps:1}]}}static get style(){return l()}},[257,"z-list",{size:[513],listType:[513,"list-type"],htmlRole:[32]},undefined,{role:[{onRoleChange:1}],size:[{setChildrenProps:1}],listType:[{setChildrenProps:1}]}]);function a(){if(typeof customElements==="undefined"){return}const e=["z-list"];e.forEach((e=>{switch(e){case"z-list":if(!customElements.get(n(e))){customElements.define(n(e),c)}break}}))}export{c as Z,a as d};
|
|
2
2
|
//# sourceMappingURL=index8.js.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{proxyCustomElement as e,HTMLElement as t,createEvent as i,h as n,Host as s,transformTag as a}from"@stencil/core/internal/client";import{j as o,l,D as r,E as c,i as h,m as d,g as u}from"./index2.js";import{d as
|
|
1
|
+
import{proxyCustomElement as e,HTMLElement as t,createEvent as i,h as n,Host as s,transformTag as a}from"@stencil/core/internal/client";import{j as o,l,D as r,E as c,i as h,m as d,g as u}from"./index2.js";import{d as m}from"./index5.js";import{d as b}from"./index3.js";const f=()=>`:host{outline:none}:host>.container{display:flex;box-sizing:border-box;flex-direction:column;justify-content:center;background-color:var(--background-color-list-element, var(--color-surface01));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="medium"])>.tree-element-container{padding-top:0;padding-bottom: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, var(--color-background))}:host([expandable]:focus:focus-visible)>.container,:host([clickable]:focus:focus-visible)>.container{position:relative;z-index:1;box-shadow:var(--shadow-focus-primary)}:host([expandable]:active)>.container,:host([clickable]:active)>.container{background-color:var(--background-active-color-list-element, var(--color-background))}: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}:host .z-tree-list-divider{position:absolute;z-index:100;left:0}:host([disabled])>.container{color:var(--color-form-disabled03);cursor:default}`;const p=e(class e extends t{accessibleFocusHandler(e){if(this.listElementId===e.detail){const t=this.host.shadowRoot.getElementById(`z-list-element-id-${e.detail}`);t.focus()}}constructor(e){super();if(e!==false){this.__registerHost()}this.__attachShadow();this.accessibleFocus=i(this,"accessibleFocus",7);this.ariaDescendantFocus=i(this,"ariaDescendantFocus",7);this.clickItem=i(this,"clickItem",7);this.alignButton=o.LEFT;this.clickable=false;this.dividerColor="color-surface03";this.dividerType=l.NONE;this.dividerSize=r.SMALL;this.expandable=false;this.expandableStyle=c.ACCORDION;this.size=h.MEDIUM;this.color="none";this.disabled=false;this.listElementPosition="0";this.listType=d.NONE;this.htmlTabindex=0;this.showInnerContent=false;this.htmlRole="listitem";this.openElementConfig={accordion:{open:"minus-circled",close:"plus-circled"},menu:{open:"chevron-up",close:"chevron-down"}};this.handleClick=this.handleClick.bind(this);this.handleKeyDown=this.handleKeyDown.bind(this)}handleClick(){if(this.disabled){return}this.clickItem.emit(this.listElementId);if(!this.expandable){return}this.showInnerContent=!this.showInnerContent}handleKeyDown(e){const t=e.code===u.ENTER;switch(e.code){case u.ARROW_DOWN:e.preventDefault();this.accessibleFocus.emit(this.listElementId+1);break;case u.ARROW_UP:e.preventDefault();this.accessibleFocus.emit(this.listElementId-1);break;case u.ENTER:e.preventDefault();this.clickItem.emit(this.listElementId);break}if(!this.expandable||!t){return}this.showInnerContent=!this.showInnerContent}onRoleChange(e){this.htmlRole=e}renderExpandableButton(){if(!this.expandable){return null}return n("z-icon",{name:this.showInnerContent?this.openElementConfig[this.expandableStyle].open:this.openElementConfig[this.expandableStyle].close})}renderExpandedContent(){if(!this.expandable){return null}return n("div",{class:{"z-list-element-inner-container":true,expanded:this.showInnerContent}},n("slot",{name:"inner-content"}))}renderContent(){if(this.listType===d.NONE){return n("slot",null)}if(this.listType===d.ORDERED){return n("div",{class:"z-list-content-container"},n("div",null,this.listElementPosition,". "),n("slot",null))}if(this.listType===d.UNORDERED){return n("div",{class:"z-list-content-container"},n("span",null,"• "),n("slot",null))}}render(){return n(s,{key:"16ec312858869df48a86d54f62362de1a753338b","aria-expanded":this.expandable?this.showInnerContent:null,onClick:this.handleClick,onFocus:()=>this.ariaDescendantFocus.emit(this.listElementId),onKeyDown:this.handleKeyDown,clickable:this.clickable&&!this.disabled,tabIndex:this.hasTreeItems?undefined:this.htmlTabindex,role:this.hasTreeItems?"none":this.htmlRole},n("div",{key:"e9fa7223b93db9e37d260ff9296c2db068a13d61",class:this.hasTreeItems?"tree-element-container":"container",style:!this.disabled&&{color:`var(--${this.color})`},tabindex:"-1",id:`z-list-element-id-${this.listElementId}`,part:"list-item-container"},n("div",{key:"4b1763e2c9b7409473e6dece33c603d9b1bb5206",class:"z-list-element-container"},this.renderExpandableButton(),this.renderContent()),this.renderExpandedContent()),this.dividerType===l.ELEMENT&&n("z-divider",{key:"4f8008af808226331324ff26d7c46f805a3f7ff3",class:{"z-tree-list-divider":this.hasTreeItems},color:this.dividerColor,size:this.dividerSize}))}get host(){return this}static get watchers(){return{role:[{onRoleChange:1}]}}static get style(){return f()}},[257,"z-list-element",{alignButton:[513,"align-button"],clickable:[516],dividerColor:[1,"divider-color"],dividerType:[1,"divider-type"],dividerSize:[1,"divider-size"],expandable:[516],expandableStyle:[1,"expandable-style"],listElementId:[514,"list-element-id"],size:[513],color:[513],disabled:[516],listElementPosition:[513,"list-element-position"],listType:[513,"list-type"],hasTreeItems:[4,"has-tree-items"],htmlTabindex:[2,"html-tabindex"],showInnerContent:[32],htmlRole:[32]},[[4,"accessibleFocus","accessibleFocusHandler"]],{role:[{onRoleChange:1}]}]);function v(){if(typeof customElements==="undefined"){return}const e=["z-list-element","z-divider","z-icon"];e.forEach((e=>{switch(e){case"z-list-element":if(!customElements.get(a(e))){customElements.define(a(e),p)}break;case"z-divider":if(!customElements.get(a(e))){m()}break;case"z-icon":if(!customElements.get(a(e))){b()}break}}))}export{p as Z,v as d};
|
|
2
2
|
//# sourceMappingURL=index9.js.map
|