@zanichelli/albe-web-components 15.1.2 → 15.1.3
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 +2 -0
- package/dist/cjs/z-app-header_12.cjs.entry.js +16 -26
- package/dist/cjs/z-app-header_12.cjs.entry.js.map +1 -1
- package/dist/collection/components/z-input/index.js +3 -3
- package/dist/collection/components/z-input/index.js.map +1 -1
- package/dist/collection/components/z-input/styles.css +409 -0
- package/dist/collection/components/z-tag/index.js +3 -4
- package/dist/collection/components/z-tag/index.js.map +1 -1
- package/dist/collection/components/z-tag/index.spec.js +10 -10
- package/dist/collection/components/z-tag/index.spec.js.map +1 -1
- package/dist/collection/components/z-tag/styles.css +9 -12
- package/dist/components/index10.js +4 -13
- package/dist/components/index10.js.map +1 -1
- package/dist/components/index27.js +4 -5
- package/dist/components/index27.js.map +1 -1
- package/dist/esm/z-app-header_12.entry.js +16 -26
- package/dist/esm/z-app-header_12.entry.js.map +1 -1
- package/dist/esm-es5/z-app-header_12.entry.js +1 -1
- package/dist/esm-es5/z-app-header_12.entry.js.map +1 -1
- package/dist/web-components-library/{p-1c765d26.system.entry.js → p-a0e6fe95.system.entry.js} +2 -2
- package/dist/web-components-library/p-a0e6fe95.system.entry.js.map +1 -0
- package/{www/build/p-a2873cf1.entry.js → dist/web-components-library/p-d225d94f.entry.js} +2 -2
- package/dist/web-components-library/p-d225d94f.entry.js.map +1 -0
- package/dist/web-components-library/p-f530271b.system.js +1 -1
- package/dist/web-components-library/web-components-library.esm.js +1 -1
- package/package.json +1 -1
- package/www/build/{p-1c765d26.system.entry.js → p-a0e6fe95.system.entry.js} +2 -2
- package/www/build/p-a0e6fe95.system.entry.js.map +1 -0
- package/{dist/web-components-library/p-a2873cf1.entry.js → www/build/p-d225d94f.entry.js} +2 -2
- package/www/build/p-d225d94f.entry.js.map +1 -0
- package/www/build/{p-2cf65310.js → p-e04dfd70.js} +1 -1
- package/www/build/p-f530271b.system.js +1 -1
- package/www/build/web-components-library.esm.js +1 -1
- package/www/index.html +1 -1
- package/dist/collection/components/z-input/styles-checkbox-radio.css +0 -130
- package/dist/collection/components/z-input/styles-general.css +0 -154
- package/dist/collection/components/z-input/styles-text.css +0 -86
- package/dist/collection/components/z-input/styles-textarea.css +0 -35
- package/dist/web-components-library/p-1c765d26.system.entry.js.map +0 -1
- package/dist/web-components-library/p-a2873cf1.entry.js.map +0 -1
- package/www/build/p-1c765d26.system.entry.js.map +0 -1
- package/www/build/p-a2873cf1.entry.js.map +0 -1
|
@@ -261,18 +261,18 @@ export class ZInput {
|
|
|
261
261
|
default:
|
|
262
262
|
input = this.renderInputText(this.type);
|
|
263
263
|
}
|
|
264
|
-
return h(Host, { key: '
|
|
264
|
+
return h(Host, { key: '72a37f109e4ea99c470c43a29a86c267466f719e' }, input);
|
|
265
265
|
}
|
|
266
266
|
static get is() { return "z-input"; }
|
|
267
267
|
static get encapsulation() { return "scoped"; }
|
|
268
268
|
static get originalStyleUrls() {
|
|
269
269
|
return {
|
|
270
|
-
"$": ["styles
|
|
270
|
+
"$": ["styles.css"]
|
|
271
271
|
};
|
|
272
272
|
}
|
|
273
273
|
static get styleUrls() {
|
|
274
274
|
return {
|
|
275
|
-
"$": ["styles
|
|
275
|
+
"$": ["styles.css"]
|
|
276
276
|
};
|
|
277
277
|
}
|
|
278
278
|
static get properties() {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/z-input/index.tsx"],"names":[],"mappings":"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","sourcesContent":["import {Component, Element, Event, EventEmitter, Listen, Method, Prop, State, h} from \"@stencil/core\";\nimport {Host, JSXBase} from \"@stencil/core/internal\";\nimport {ControlSize, InputStatus, InputType, LabelPosition} from \"../../beans\";\nimport {boolean, randomId} from \"../../utils/utils\";\n\n@Component({\n tag: \"z-input\",\n styleUrls: [\"styles-general.css\", \"styles-text.css\", \"styles-textarea.css\", \"styles-checkbox-radio.css\"],\n shadow: false,\n scoped: true,\n})\nexport class ZInput {\n @Element() hostElement: HTMLZInputElement;\n\n /** the id of the input element */\n @Prop()\n htmlid = `id-${randomId()}`;\n\n /** input types */\n @Prop()\n type: InputType;\n\n /** the input name */\n @Prop()\n name?: string;\n\n /** the input label */\n @Prop()\n label?: string;\n\n /** the input aria-label */\n @Prop()\n ariaLabel = \"\";\n\n /** the input aria-expaded: available for text, password, number, email */\n @Prop()\n ariaExpanded = \"\";\n\n /** the input aria-controls (optional): available for text, password, number, email */\n @Prop()\n ariaControls?: string;\n\n /** the input aria-autocomplete (optional): available for text, password, number, email */\n @Prop()\n ariaAutocomplete?: string;\n\n /** the input aria-activedescendant (optional): available for text, password, number, email */\n @Prop()\n ariaActivedescendant?: string;\n\n /** the input value */\n @Prop({mutable: true})\n value?: string;\n\n /** the input is disabled */\n @Prop({reflect: true})\n disabled?: boolean = false;\n\n /** the input is readonly */\n @Prop()\n readonly?: boolean = false;\n\n /** the input is required (optional): available for text, password, number, email, textarea, checkbox */\n @Prop()\n required?: boolean = false;\n\n /** checked: available for checkbox, radio */\n @Prop({mutable: true})\n checked?: boolean = false;\n\n /** the input placeholder (optional) */\n @Prop()\n placeholder?: string;\n\n /** the input html title (optional) */\n @Prop()\n htmltitle?: string;\n\n /** the input status (optional): available for text, password, number, email, textarea */\n @Prop()\n status?: InputStatus;\n\n /** input helper message (optional): available for text, password, number, email, textarea - if set to `false` message won't be displayed */\n @Prop()\n message?: string | boolean = true;\n\n /** the input label position: available for checkbox, radio */\n @Prop()\n labelPosition?: LabelPosition = LabelPosition.RIGHT;\n\n /** the input has autocomplete option (optional): available for text, password, number, email */\n @Prop()\n autocomplete?: string;\n\n /** the input role */\n @Prop()\n role = \"\";\n\n /** render clear icon when typing (optional): available for text */\n @Prop()\n hasclearicon?: boolean = true;\n\n /** render icon (optional): available for text */\n @Prop()\n icon?: string;\n\n /** min number value (optional): available for number */\n @Prop()\n min?: number;\n\n /** Min length value (optional): available for text */\n @Prop()\n minlength?: number;\n\n /** max number value (optional): available for number */\n @Prop()\n max?: number;\n\n /** Max length value (optional): available for text */\n @Prop()\n maxlength?: number;\n\n /** step number value (optional): available for number */\n @Prop()\n step?: number;\n\n /** pattern value (optional): available for tel, text, search, url, email, password*/\n @Prop()\n pattern?: string;\n\n /** Available sizes: `big`, `small` and `x-small`. Defaults to `big`. */\n @Prop({reflect: true})\n size?: ControlSize = ControlSize.BIG;\n\n @State()\n isTyping = false;\n\n @State()\n passwordHidden = true;\n\n private timer;\n\n private typingtimeout = 300;\n\n private inputRef: HTMLInputElement;\n\n @Listen(\"inputCheck\", {target: \"document\"})\n inputCheckListener(e: CustomEvent): void {\n const data = e.detail;\n switch (this.type) {\n case InputType.RADIO:\n if (data.type === InputType.RADIO && data.name === this.name && data.id !== this.htmlid) {\n this.checked = false;\n }\n break;\n }\n }\n\n /** get checked status */\n @Method()\n async isChecked(): Promise<boolean> {\n switch (this.type) {\n case InputType.CHECKBOX:\n case InputType.RADIO:\n return this.checked;\n default:\n console.warn(\"`isChecked` method is only available for type `checkbox` and `radio`\");\n\n return false;\n }\n }\n\n /** Emitted on input value change, returns value, validity */\n @Event()\n inputChange: EventEmitter;\n\n private emitInputChange(value: string): void {\n if (!this.isTyping) {\n this.emitStartTyping();\n }\n\n let validity: ValidityState;\n if (this.type === InputType.TEXTAREA) {\n validity = this.getValidity(\"textarea\");\n } else {\n validity = this.getValidity(\"input\");\n }\n this.value = value;\n this.inputChange.emit({value, validity});\n\n clearTimeout(this.timer);\n this.timer = setTimeout(() => {\n this.emitStopTyping(this.value, validity);\n }, this.typingtimeout);\n }\n\n /** Emitted when user starts typing */\n @Event()\n startTyping: EventEmitter;\n\n private emitStartTyping(): void {\n this.isTyping = true;\n this.startTyping.emit();\n }\n\n /** Emitted when user stops typing, returns value, validity */\n @Event()\n stopTyping: EventEmitter;\n\n private emitStopTyping(value: string, validity: ValidityState): void {\n this.isTyping = false;\n this.stopTyping.emit({\n value: value,\n validity: validity,\n });\n }\n\n /** Emitted on checkbox check/uncheck, returns id, checked, type, name, value, validity */\n @Event()\n inputCheck: EventEmitter;\n\n private emitInputCheck(checked: boolean): void {\n this.inputCheck.emit({\n id: this.htmlid,\n checked: checked,\n type: this.type,\n name: this.name,\n value: this.value,\n validity: this.getValidity(\"input\"),\n });\n }\n\n /** Emitted on input focus */\n @Event()\n inputFocus: EventEmitter;\n\n private emitInputFocus(): void {\n this.inputFocus.emit({id: this.htmlid});\n }\n\n /** Emitted on input blur */\n @Event()\n inputBlur: EventEmitter;\n\n private emitInputBlur(): void {\n this.inputBlur.emit({id: this.htmlid});\n }\n\n private getValidity(type: string): ValidityState {\n const input = this.hostElement.querySelector(type) as HTMLInputElement;\n\n return input.validity;\n }\n\n /* START text/password/email/number */\n\n private getTextAttributes(): JSXBase.InputHTMLAttributes<HTMLInputElement | HTMLTextAreaElement> {\n return {\n id: this.htmlid,\n name: this.name,\n placeholder: this.placeholder,\n value: this.value,\n disabled: this.disabled,\n readonly: this.readonly,\n required: this.required,\n title: this.htmltitle,\n minlength: this.minlength,\n maxlength: this.maxlength,\n class: {\n [`input-${this.status}`]: !!this.status,\n filled: !!this.value,\n },\n autocomplete: this.autocomplete,\n onInput: (e: InputEvent) => this.emitInputChange((e.target as HTMLInputElement).value),\n };\n }\n\n private getNumberAttributes(type: InputType): JSXBase.InputHTMLAttributes<HTMLInputElement> {\n if (type != InputType.NUMBER) {\n return;\n }\n\n return {\n min: this.min,\n max: this.max,\n step: this.step,\n };\n }\n\n private getPatternAttribute(type: InputType): JSXBase.InputHTMLAttributes<HTMLInputElement> {\n if (\n type != InputType.PASSWORD &&\n type != InputType.TEXT &&\n type != InputType.TEL &&\n type != InputType.SEARCH &&\n type != InputType.URL &&\n type != InputType.EMAIL\n ) {\n return;\n }\n\n return {\n pattern: this.pattern,\n };\n }\n\n private getRoleAttribute(): JSXBase.InputHTMLAttributes<HTMLInputElement | HTMLTextAreaElement> {\n return this.role ? {role: this.role} : {};\n }\n\n private getAriaAttrubutes(): Record<string, unknown> {\n const expanded = this.ariaExpanded ? {\"aria-expanded\": this.ariaExpanded} : {};\n const controls = this.ariaControls ? {\"aria-controls\": this.ariaControls} : {};\n const autocomplete = this.ariaAutocomplete ? {\"aria-autocomplete\": this.ariaAutocomplete} : {};\n const activedescendant = this.ariaActivedescendant ? {\"aria-activedescendant\": this.ariaActivedescendant} : {};\n\n return {\n ...expanded,\n ...controls,\n ...autocomplete,\n ...activedescendant,\n };\n }\n\n private getFocusBlurAttributes(): JSXBase.InputHTMLAttributes<HTMLInputElement | HTMLTextAreaElement> {\n return {\n onFocus: () => this.emitInputFocus(),\n onBlur: () => this.emitInputBlur(),\n };\n }\n\n private renderInputText(type: InputType = InputType.TEXT): HTMLDivElement {\n const ariaLabel = this.ariaLabel ? {\"aria-label\": this.ariaLabel} : {};\n const attr = {\n ...this.getTextAttributes(),\n ...this.getNumberAttributes(type),\n ...this.getPatternAttribute(type),\n ...ariaLabel,\n ...this.getRoleAttribute(),\n ...this.getAriaAttrubutes(),\n ...this.getFocusBlurAttributes(),\n };\n if (this.icon || type === InputType.PASSWORD) {\n Object.assign(attr.class, {\"has-icon\": true});\n }\n if (this.hasclearicon && type != InputType.NUMBER) {\n Object.assign(attr.class, {\"has-clear-icon\": true});\n }\n\n return (\n <div class=\"text-wrapper\">\n {this.renderLabel()}\n <div>\n <input\n type={type === InputType.PASSWORD && !this.passwordHidden ? InputType.TEXT : type}\n {...attr}\n ref={(el) => (this.inputRef = el)}\n />\n {this.renderIcons()}\n </div>\n {this.renderMessage()}\n </div>\n );\n }\n\n private renderLabel(): HTMLLabelElement {\n if (!this.label) {\n return;\n }\n\n return (\n <label\n class=\"input-label body-5-sb\"\n id={`${this.htmlid}_label`}\n htmlFor={this.htmlid}\n >\n {this.label}\n </label>\n );\n }\n\n private renderIcons(): HTMLSpanElement {\n return (\n <span class=\"icons-wrapper\">\n {this.renderResetIcon()}\n {this.renderIcon()}\n </span>\n );\n }\n\n private renderIcon(): HTMLButtonElement {\n if (this.type === InputType.PASSWORD) {\n return this.renderShowHidePassword();\n }\n\n if (!this.icon) {\n return;\n }\n\n return (\n <button\n type=\"button\"\n class=\"icon-button input-icon\"\n tabIndex={-1}\n aria-hidden=\"true\"\n >\n <z-icon\n name={this.icon}\n class={this.size}\n />\n </button>\n );\n }\n\n private renderResetIcon(): HTMLButtonElement {\n let hidden = false;\n if (!this.hasclearicon || !this.value || this.disabled || this.readonly || this.type == InputType.NUMBER) {\n hidden = true;\n }\n\n return (\n <button\n type=\"button\"\n class={`icon-button reset-icon ${hidden ? \"hidden\" : \"\"}`}\n aria-label=\"cancella il contenuto dell'input\"\n onClick={() => {\n this.inputRef.value = \"\";\n this.emitInputChange(\"\");\n }}\n >\n <z-icon\n name=\"multiply\"\n class={this.size}\n />\n </button>\n );\n }\n\n private renderShowHidePassword(): HTMLButtonElement {\n return (\n <button\n type=\"button\"\n class=\"icon-button toggle-password-icon\"\n disabled={this.disabled}\n aria-label={this.passwordHidden ? \"mostra password\" : \"nascondi password\"}\n onClick={() => (this.passwordHidden = !this.passwordHidden)}\n >\n <z-icon\n name={this.passwordHidden ? \"view-filled\" : \"view-off-filled\"}\n class={this.size}\n />\n </button>\n );\n }\n\n private renderMessage(): HTMLZInputMessageElement {\n if (boolean(this.message) === false) {\n return;\n }\n\n return (\n <z-input-message\n message={boolean(this.message) === true ? undefined : (this.message as string)}\n status={this.status}\n class={this.size}\n />\n );\n }\n\n /* END text/password/email/number */\n\n /* START textarea */\n\n private renderTextarea(): HTMLDivElement {\n const attributes = this.getTextAttributes();\n const ariaLabel = this.ariaLabel ? {\"aria-label\": this.ariaLabel} : {};\n\n return (\n <div class=\"text-wrapper\">\n {this.renderLabel()}\n <div\n class={{\n ...(attributes.class as Record<string, boolean>),\n \"textarea-wrapper\": true,\n \"readonly\": attributes.readonly as boolean,\n }}\n >\n <textarea\n {...attributes}\n {...ariaLabel}\n {...this.getRoleAttribute()}\n ></textarea>\n </div>\n {this.renderMessage()}\n </div>\n );\n }\n\n /* END textarea */\n\n private handleCheck(ev: Event): void {\n this.checked = (ev.target as HTMLInputElement).checked;\n this.emitInputCheck(this.checked);\n }\n\n /* START checkbox */\n private renderCheckbox(): HTMLDivElement {\n return (\n <div class=\"checkbox-wrapper\">\n <input\n id={this.htmlid}\n type=\"checkbox\"\n name={this.name}\n checked={this.checked}\n disabled={this.disabled}\n readonly={this.readonly}\n required={this.required}\n onChange={this.handleCheck.bind(this)}\n value={this.value}\n {...this.getRoleAttribute()}\n {...this.getFocusBlurAttributes()}\n />\n\n <label\n htmlFor={this.htmlid}\n class={{\n \"checkbox-label\": true,\n \"after\": this.labelPosition === LabelPosition.RIGHT,\n \"before\": this.labelPosition === LabelPosition.LEFT,\n }}\n >\n <z-icon\n name={this.checked ? \"checkbox-checked\" : \"checkbox\"}\n aria-hidden=\"true\"\n class={this.size}\n />\n {this.label && <span innerHTML={this.label}></span>}\n </label>\n </div>\n );\n }\n\n /* END checkbox */\n\n /* START radio */\n private renderRadio(): HTMLDivElement {\n return (\n <div class=\"radio-wrapper\">\n <input\n id={this.htmlid}\n type=\"radio\"\n name={this.name}\n checked={this.checked}\n disabled={this.disabled}\n readonly={this.readonly}\n onChange={this.handleCheck.bind(this)}\n value={this.value}\n {...this.getRoleAttribute()}\n {...this.getFocusBlurAttributes()}\n />\n\n <label\n htmlFor={this.htmlid}\n class={{\n \"radio-label\": true,\n \"after\": this.labelPosition === LabelPosition.RIGHT,\n \"before\": this.labelPosition === LabelPosition.LEFT,\n }}\n >\n <z-icon\n name={this.checked ? \"radio-button-checked\" : \"radio-button\"}\n aria-hidden=\"true\"\n class={this.size}\n />\n {this.label && <span innerHTML={this.label} />}\n </label>\n </div>\n );\n }\n /* END radio */\n\n render(): HTMLInputElement | HTMLDivElement {\n let input;\n switch (this.type) {\n case InputType.TEXTAREA:\n input = this.renderTextarea();\n break;\n case InputType.CHECKBOX:\n input = this.renderCheckbox();\n break;\n case InputType.RADIO:\n input = this.renderRadio();\n break;\n default:\n input = this.renderInputText(this.type);\n }\n\n return <Host>{input}</Host>;\n }\n}\n"]}
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/z-input/index.tsx"],"names":[],"mappings":"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","sourcesContent":["import {Component, Element, Event, EventEmitter, Listen, Method, Prop, State, h} from \"@stencil/core\";\nimport {Host, JSXBase} from \"@stencil/core/internal\";\nimport {ControlSize, InputStatus, InputType, LabelPosition} from \"../../beans\";\nimport {boolean, randomId} from \"../../utils/utils\";\n\n@Component({\n tag: \"z-input\",\n styleUrl: \"styles.css\",\n shadow: false,\n scoped: true,\n})\nexport class ZInput {\n @Element() hostElement: HTMLZInputElement;\n\n /** the id of the input element */\n @Prop()\n htmlid = `id-${randomId()}`;\n\n /** input types */\n @Prop()\n type: InputType;\n\n /** the input name */\n @Prop()\n name?: string;\n\n /** the input label */\n @Prop()\n label?: string;\n\n /** the input aria-label */\n @Prop()\n ariaLabel = \"\";\n\n /** the input aria-expaded: available for text, password, number, email */\n @Prop()\n ariaExpanded = \"\";\n\n /** the input aria-controls (optional): available for text, password, number, email */\n @Prop()\n ariaControls?: string;\n\n /** the input aria-autocomplete (optional): available for text, password, number, email */\n @Prop()\n ariaAutocomplete?: string;\n\n /** the input aria-activedescendant (optional): available for text, password, number, email */\n @Prop()\n ariaActivedescendant?: string;\n\n /** the input value */\n @Prop({mutable: true})\n value?: string;\n\n /** the input is disabled */\n @Prop({reflect: true})\n disabled?: boolean = false;\n\n /** the input is readonly */\n @Prop()\n readonly?: boolean = false;\n\n /** the input is required (optional): available for text, password, number, email, textarea, checkbox */\n @Prop()\n required?: boolean = false;\n\n /** checked: available for checkbox, radio */\n @Prop({mutable: true})\n checked?: boolean = false;\n\n /** the input placeholder (optional) */\n @Prop()\n placeholder?: string;\n\n /** the input html title (optional) */\n @Prop()\n htmltitle?: string;\n\n /** the input status (optional): available for text, password, number, email, textarea */\n @Prop()\n status?: InputStatus;\n\n /** input helper message (optional): available for text, password, number, email, textarea - if set to `false` message won't be displayed */\n @Prop()\n message?: string | boolean = true;\n\n /** the input label position: available for checkbox, radio */\n @Prop()\n labelPosition?: LabelPosition = LabelPosition.RIGHT;\n\n /** the input has autocomplete option (optional): available for text, password, number, email */\n @Prop()\n autocomplete?: string;\n\n /** the input role */\n @Prop()\n role = \"\";\n\n /** render clear icon when typing (optional): available for text */\n @Prop()\n hasclearicon?: boolean = true;\n\n /** render icon (optional): available for text */\n @Prop()\n icon?: string;\n\n /** min number value (optional): available for number */\n @Prop()\n min?: number;\n\n /** Min length value (optional): available for text */\n @Prop()\n minlength?: number;\n\n /** max number value (optional): available for number */\n @Prop()\n max?: number;\n\n /** Max length value (optional): available for text */\n @Prop()\n maxlength?: number;\n\n /** step number value (optional): available for number */\n @Prop()\n step?: number;\n\n /** pattern value (optional): available for tel, text, search, url, email, password*/\n @Prop()\n pattern?: string;\n\n /** Available sizes: `big`, `small` and `x-small`. Defaults to `big`. */\n @Prop({reflect: true})\n size?: ControlSize = ControlSize.BIG;\n\n @State()\n isTyping = false;\n\n @State()\n passwordHidden = true;\n\n private timer;\n\n private typingtimeout = 300;\n\n private inputRef: HTMLInputElement;\n\n @Listen(\"inputCheck\", {target: \"document\"})\n inputCheckListener(e: CustomEvent): void {\n const data = e.detail;\n switch (this.type) {\n case InputType.RADIO:\n if (data.type === InputType.RADIO && data.name === this.name && data.id !== this.htmlid) {\n this.checked = false;\n }\n break;\n }\n }\n\n /** get checked status */\n @Method()\n async isChecked(): Promise<boolean> {\n switch (this.type) {\n case InputType.CHECKBOX:\n case InputType.RADIO:\n return this.checked;\n default:\n console.warn(\"`isChecked` method is only available for type `checkbox` and `radio`\");\n\n return false;\n }\n }\n\n /** Emitted on input value change, returns value, validity */\n @Event()\n inputChange: EventEmitter;\n\n private emitInputChange(value: string): void {\n if (!this.isTyping) {\n this.emitStartTyping();\n }\n\n let validity: ValidityState;\n if (this.type === InputType.TEXTAREA) {\n validity = this.getValidity(\"textarea\");\n } else {\n validity = this.getValidity(\"input\");\n }\n this.value = value;\n this.inputChange.emit({value, validity});\n\n clearTimeout(this.timer);\n this.timer = setTimeout(() => {\n this.emitStopTyping(this.value, validity);\n }, this.typingtimeout);\n }\n\n /** Emitted when user starts typing */\n @Event()\n startTyping: EventEmitter;\n\n private emitStartTyping(): void {\n this.isTyping = true;\n this.startTyping.emit();\n }\n\n /** Emitted when user stops typing, returns value, validity */\n @Event()\n stopTyping: EventEmitter;\n\n private emitStopTyping(value: string, validity: ValidityState): void {\n this.isTyping = false;\n this.stopTyping.emit({\n value: value,\n validity: validity,\n });\n }\n\n /** Emitted on checkbox check/uncheck, returns id, checked, type, name, value, validity */\n @Event()\n inputCheck: EventEmitter;\n\n private emitInputCheck(checked: boolean): void {\n this.inputCheck.emit({\n id: this.htmlid,\n checked: checked,\n type: this.type,\n name: this.name,\n value: this.value,\n validity: this.getValidity(\"input\"),\n });\n }\n\n /** Emitted on input focus */\n @Event()\n inputFocus: EventEmitter;\n\n private emitInputFocus(): void {\n this.inputFocus.emit({id: this.htmlid});\n }\n\n /** Emitted on input blur */\n @Event()\n inputBlur: EventEmitter;\n\n private emitInputBlur(): void {\n this.inputBlur.emit({id: this.htmlid});\n }\n\n private getValidity(type: string): ValidityState {\n const input = this.hostElement.querySelector(type) as HTMLInputElement;\n\n return input.validity;\n }\n\n /* START text/password/email/number */\n\n private getTextAttributes(): JSXBase.InputHTMLAttributes<HTMLInputElement | HTMLTextAreaElement> {\n return {\n id: this.htmlid,\n name: this.name,\n placeholder: this.placeholder,\n value: this.value,\n disabled: this.disabled,\n readonly: this.readonly,\n required: this.required,\n title: this.htmltitle,\n minlength: this.minlength,\n maxlength: this.maxlength,\n class: {\n [`input-${this.status}`]: !!this.status,\n filled: !!this.value,\n },\n autocomplete: this.autocomplete,\n onInput: (e: InputEvent) => this.emitInputChange((e.target as HTMLInputElement).value),\n };\n }\n\n private getNumberAttributes(type: InputType): JSXBase.InputHTMLAttributes<HTMLInputElement> {\n if (type != InputType.NUMBER) {\n return;\n }\n\n return {\n min: this.min,\n max: this.max,\n step: this.step,\n };\n }\n\n private getPatternAttribute(type: InputType): JSXBase.InputHTMLAttributes<HTMLInputElement> {\n if (\n type != InputType.PASSWORD &&\n type != InputType.TEXT &&\n type != InputType.TEL &&\n type != InputType.SEARCH &&\n type != InputType.URL &&\n type != InputType.EMAIL\n ) {\n return;\n }\n\n return {\n pattern: this.pattern,\n };\n }\n\n private getRoleAttribute(): JSXBase.InputHTMLAttributes<HTMLInputElement | HTMLTextAreaElement> {\n return this.role ? {role: this.role} : {};\n }\n\n private getAriaAttrubutes(): Record<string, unknown> {\n const expanded = this.ariaExpanded ? {\"aria-expanded\": this.ariaExpanded} : {};\n const controls = this.ariaControls ? {\"aria-controls\": this.ariaControls} : {};\n const autocomplete = this.ariaAutocomplete ? {\"aria-autocomplete\": this.ariaAutocomplete} : {};\n const activedescendant = this.ariaActivedescendant ? {\"aria-activedescendant\": this.ariaActivedescendant} : {};\n\n return {\n ...expanded,\n ...controls,\n ...autocomplete,\n ...activedescendant,\n };\n }\n\n private getFocusBlurAttributes(): JSXBase.InputHTMLAttributes<HTMLInputElement | HTMLTextAreaElement> {\n return {\n onFocus: () => this.emitInputFocus(),\n onBlur: () => this.emitInputBlur(),\n };\n }\n\n private renderInputText(type: InputType = InputType.TEXT): HTMLDivElement {\n const ariaLabel = this.ariaLabel ? {\"aria-label\": this.ariaLabel} : {};\n const attr = {\n ...this.getTextAttributes(),\n ...this.getNumberAttributes(type),\n ...this.getPatternAttribute(type),\n ...ariaLabel,\n ...this.getRoleAttribute(),\n ...this.getAriaAttrubutes(),\n ...this.getFocusBlurAttributes(),\n };\n if (this.icon || type === InputType.PASSWORD) {\n Object.assign(attr.class, {\"has-icon\": true});\n }\n if (this.hasclearicon && type != InputType.NUMBER) {\n Object.assign(attr.class, {\"has-clear-icon\": true});\n }\n\n return (\n <div class=\"text-wrapper\">\n {this.renderLabel()}\n <div>\n <input\n type={type === InputType.PASSWORD && !this.passwordHidden ? InputType.TEXT : type}\n {...attr}\n ref={(el) => (this.inputRef = el)}\n />\n {this.renderIcons()}\n </div>\n {this.renderMessage()}\n </div>\n );\n }\n\n private renderLabel(): HTMLLabelElement {\n if (!this.label) {\n return;\n }\n\n return (\n <label\n class=\"input-label body-5-sb\"\n id={`${this.htmlid}_label`}\n htmlFor={this.htmlid}\n >\n {this.label}\n </label>\n );\n }\n\n private renderIcons(): HTMLSpanElement {\n return (\n <span class=\"icons-wrapper\">\n {this.renderResetIcon()}\n {this.renderIcon()}\n </span>\n );\n }\n\n private renderIcon(): HTMLButtonElement {\n if (this.type === InputType.PASSWORD) {\n return this.renderShowHidePassword();\n }\n\n if (!this.icon) {\n return;\n }\n\n return (\n <button\n type=\"button\"\n class=\"icon-button input-icon\"\n tabIndex={-1}\n aria-hidden=\"true\"\n >\n <z-icon\n name={this.icon}\n class={this.size}\n />\n </button>\n );\n }\n\n private renderResetIcon(): HTMLButtonElement {\n let hidden = false;\n if (!this.hasclearicon || !this.value || this.disabled || this.readonly || this.type == InputType.NUMBER) {\n hidden = true;\n }\n\n return (\n <button\n type=\"button\"\n class={`icon-button reset-icon ${hidden ? \"hidden\" : \"\"}`}\n aria-label=\"cancella il contenuto dell'input\"\n onClick={() => {\n this.inputRef.value = \"\";\n this.emitInputChange(\"\");\n }}\n >\n <z-icon\n name=\"multiply\"\n class={this.size}\n />\n </button>\n );\n }\n\n private renderShowHidePassword(): HTMLButtonElement {\n return (\n <button\n type=\"button\"\n class=\"icon-button toggle-password-icon\"\n disabled={this.disabled}\n aria-label={this.passwordHidden ? \"mostra password\" : \"nascondi password\"}\n onClick={() => (this.passwordHidden = !this.passwordHidden)}\n >\n <z-icon\n name={this.passwordHidden ? \"view-filled\" : \"view-off-filled\"}\n class={this.size}\n />\n </button>\n );\n }\n\n private renderMessage(): HTMLZInputMessageElement {\n if (boolean(this.message) === false) {\n return;\n }\n\n return (\n <z-input-message\n message={boolean(this.message) === true ? undefined : (this.message as string)}\n status={this.status}\n class={this.size}\n />\n );\n }\n\n /* END text/password/email/number */\n\n /* START textarea */\n\n private renderTextarea(): HTMLDivElement {\n const attributes = this.getTextAttributes();\n const ariaLabel = this.ariaLabel ? {\"aria-label\": this.ariaLabel} : {};\n\n return (\n <div class=\"text-wrapper\">\n {this.renderLabel()}\n <div\n class={{\n ...(attributes.class as Record<string, boolean>),\n \"textarea-wrapper\": true,\n \"readonly\": attributes.readonly as boolean,\n }}\n >\n <textarea\n {...attributes}\n {...ariaLabel}\n {...this.getRoleAttribute()}\n ></textarea>\n </div>\n {this.renderMessage()}\n </div>\n );\n }\n\n /* END textarea */\n\n private handleCheck(ev: Event): void {\n this.checked = (ev.target as HTMLInputElement).checked;\n this.emitInputCheck(this.checked);\n }\n\n /* START checkbox */\n private renderCheckbox(): HTMLDivElement {\n return (\n <div class=\"checkbox-wrapper\">\n <input\n id={this.htmlid}\n type=\"checkbox\"\n name={this.name}\n checked={this.checked}\n disabled={this.disabled}\n readonly={this.readonly}\n required={this.required}\n onChange={this.handleCheck.bind(this)}\n value={this.value}\n {...this.getRoleAttribute()}\n {...this.getFocusBlurAttributes()}\n />\n\n <label\n htmlFor={this.htmlid}\n class={{\n \"checkbox-label\": true,\n \"after\": this.labelPosition === LabelPosition.RIGHT,\n \"before\": this.labelPosition === LabelPosition.LEFT,\n }}\n >\n <z-icon\n name={this.checked ? \"checkbox-checked\" : \"checkbox\"}\n aria-hidden=\"true\"\n class={this.size}\n />\n {this.label && <span innerHTML={this.label}></span>}\n </label>\n </div>\n );\n }\n\n /* END checkbox */\n\n /* START radio */\n private renderRadio(): HTMLDivElement {\n return (\n <div class=\"radio-wrapper\">\n <input\n id={this.htmlid}\n type=\"radio\"\n name={this.name}\n checked={this.checked}\n disabled={this.disabled}\n readonly={this.readonly}\n onChange={this.handleCheck.bind(this)}\n value={this.value}\n {...this.getRoleAttribute()}\n {...this.getFocusBlurAttributes()}\n />\n\n <label\n htmlFor={this.htmlid}\n class={{\n \"radio-label\": true,\n \"after\": this.labelPosition === LabelPosition.RIGHT,\n \"before\": this.labelPosition === LabelPosition.LEFT,\n }}\n >\n <z-icon\n name={this.checked ? \"radio-button-checked\" : \"radio-button\"}\n aria-hidden=\"true\"\n class={this.size}\n />\n {this.label && <span innerHTML={this.label} />}\n </label>\n </div>\n );\n }\n /* END radio */\n\n render(): HTMLInputElement | HTMLDivElement {\n let input;\n switch (this.type) {\n case InputType.TEXTAREA:\n input = this.renderTextarea();\n break;\n case InputType.CHECKBOX:\n input = this.renderCheckbox();\n break;\n case InputType.RADIO:\n input = this.renderRadio();\n break;\n default:\n input = this.renderInputText(this.type);\n }\n\n return <Host>{input}</Host>;\n }\n}\n"]}
|
|
@@ -0,0 +1,409 @@
|
|
|
1
|
+
:host {
|
|
2
|
+
display: inline-block;
|
|
3
|
+
width: inherit;
|
|
4
|
+
}
|
|
5
|
+
|
|
6
|
+
input::-ms-clear,
|
|
7
|
+
input::-ms-reveal {
|
|
8
|
+
display: none;
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
/* GENERAL */
|
|
12
|
+
:host input::-ms-clear,
|
|
13
|
+
:host input::-ms-reveal {
|
|
14
|
+
display: none;
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
input,
|
|
18
|
+
textarea,
|
|
19
|
+
.textarea-wrapper {
|
|
20
|
+
box-sizing: border-box;
|
|
21
|
+
border: var(--border-size-small) solid var(--gray700);
|
|
22
|
+
background: var(--color-input-field01);
|
|
23
|
+
border-radius: var(--border-radius-small);
|
|
24
|
+
color: var(--gray900);
|
|
25
|
+
fill: var(--gray900);
|
|
26
|
+
font-family: var(--font-family-sans);
|
|
27
|
+
font-size: var(--font-size-3);
|
|
28
|
+
font-weight: var(--font-rg);
|
|
29
|
+
outline: none;
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
:host([size="small"]) input,
|
|
33
|
+
:host([size="small"]) textarea,
|
|
34
|
+
:host([size="small"]) .textarea-wrapper,
|
|
35
|
+
:host([size="x-small"]) input,
|
|
36
|
+
:host([size="x-small"]) textarea,
|
|
37
|
+
:host([size="x-small"]) .textarea-wrapper {
|
|
38
|
+
font-size: var(--font-size-2);
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
:host.cursor-select input {
|
|
42
|
+
cursor: pointer;
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
/* FOCUS */
|
|
46
|
+
:host:not(.active-select) input:focus:focus-visible,
|
|
47
|
+
:host:not([readonly="true"]) .textarea-wrapper:focus-within {
|
|
48
|
+
box-shadow: var(--shadow-focus-primary);
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
input:focus:focus-visible,
|
|
52
|
+
textarea:focus:focus-visible {
|
|
53
|
+
color: var(--color-input-field02);
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
:host.active-select input {
|
|
57
|
+
border: var(--border-size-small) solid var(--color-primary01);
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
:host.cursor-select input:focus:focus-visible {
|
|
61
|
+
box-shadow: var(--shadow-focus-primary);
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
:host input[readonly]:focus:focus-visible {
|
|
65
|
+
box-shadow: none;
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
/* FILLED */
|
|
69
|
+
.filled {
|
|
70
|
+
border-color: var(--color-surface05);
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
/* STATUSES (success, warning, error) */
|
|
74
|
+
.input-success {
|
|
75
|
+
border-color: var(--color-success01);
|
|
76
|
+
background: var(--color-success-inverse);
|
|
77
|
+
fill: var(--color-success01);
|
|
78
|
+
}
|
|
79
|
+
|
|
80
|
+
.input-error {
|
|
81
|
+
border-color: var(--color-error01);
|
|
82
|
+
background: var(--color-error-inverse);
|
|
83
|
+
fill: var(--color-error01);
|
|
84
|
+
}
|
|
85
|
+
|
|
86
|
+
.input-warning {
|
|
87
|
+
border-color: var(--color-warning01);
|
|
88
|
+
background: var(--color-warning-inverse);
|
|
89
|
+
fill: var(--color-warning01);
|
|
90
|
+
}
|
|
91
|
+
|
|
92
|
+
/* HOVER */
|
|
93
|
+
input:not([readonly]):hover,
|
|
94
|
+
.textarea-wrapper:hover {
|
|
95
|
+
outline: var(--border-size-medium) solid var(--gray700);
|
|
96
|
+
outline-offset: -2px;
|
|
97
|
+
}
|
|
98
|
+
|
|
99
|
+
/* READONLY */
|
|
100
|
+
:host:not(.active-select) input[readonly],
|
|
101
|
+
.readonly {
|
|
102
|
+
border-color: var(--color-disabled01);
|
|
103
|
+
fill: var(--color-disabled01);
|
|
104
|
+
pointer-events: none;
|
|
105
|
+
}
|
|
106
|
+
|
|
107
|
+
/* DISABLED */
|
|
108
|
+
:host([disabled]:not([disabled="false"])) input,
|
|
109
|
+
:host([disabled]:not([disabled="false"])) .textarea-wrapper,
|
|
110
|
+
:host([disabled]:not([disabled="false"])) z-icon {
|
|
111
|
+
border-color: var(--color-disabled01);
|
|
112
|
+
box-shadow: none;
|
|
113
|
+
color: var(--color-disabled03);
|
|
114
|
+
fill: var(--color-disabled01);
|
|
115
|
+
pointer-events: none;
|
|
116
|
+
}
|
|
117
|
+
|
|
118
|
+
:host([disabled]:not([disabled="false"])) input:hover {
|
|
119
|
+
border-width: var(--border-size-small);
|
|
120
|
+
}
|
|
121
|
+
|
|
122
|
+
/* PLACEHOLDER */
|
|
123
|
+
input::placeholder,
|
|
124
|
+
textarea::placeholder {
|
|
125
|
+
color: var(--color-text05);
|
|
126
|
+
}
|
|
127
|
+
|
|
128
|
+
::-webkit-textarea-placeholder {
|
|
129
|
+
color: var(--color-text05);
|
|
130
|
+
}
|
|
131
|
+
|
|
132
|
+
:-ms-textarea-placeholder {
|
|
133
|
+
color: var(--color-text05);
|
|
134
|
+
}
|
|
135
|
+
|
|
136
|
+
::placeholder {
|
|
137
|
+
color: var(--color-text05);
|
|
138
|
+
}
|
|
139
|
+
|
|
140
|
+
/* LABEL */
|
|
141
|
+
label.input-label {
|
|
142
|
+
display: block;
|
|
143
|
+
padding-bottom: var(--space-unit);
|
|
144
|
+
color: var(--color-default-text);
|
|
145
|
+
font-family: var(--font-family-sans);
|
|
146
|
+
font-size: var(--font-size-1);
|
|
147
|
+
font-weight: var(--font-sb);
|
|
148
|
+
text-align: left;
|
|
149
|
+
text-transform: uppercase;
|
|
150
|
+
}
|
|
151
|
+
|
|
152
|
+
:host([disabled]:not([disabled="false"])) label.input-label {
|
|
153
|
+
color: var(--color-disabled03);
|
|
154
|
+
}
|
|
155
|
+
|
|
156
|
+
.text-wrapper > div {
|
|
157
|
+
position: relative;
|
|
158
|
+
z-index: 1;
|
|
159
|
+
fill: var(--gray900);
|
|
160
|
+
}
|
|
161
|
+
|
|
162
|
+
.text-wrapper > div > input {
|
|
163
|
+
width: 100%;
|
|
164
|
+
height: calc(var(--space-unit) * 5.5);
|
|
165
|
+
box-sizing: border-box;
|
|
166
|
+
padding: 0 calc(var(--space-unit) * 1.5);
|
|
167
|
+
margin: 0;
|
|
168
|
+
}
|
|
169
|
+
|
|
170
|
+
:host([size="small"]) .text-wrapper > div > input {
|
|
171
|
+
height: calc(var(--space-unit) * 4.5);
|
|
172
|
+
}
|
|
173
|
+
|
|
174
|
+
:host([size="x-small"]) .text-wrapper > div > input {
|
|
175
|
+
height: calc(var(--space-unit) * 4);
|
|
176
|
+
}
|
|
177
|
+
|
|
178
|
+
.text-wrapper > div > input.has-icon,
|
|
179
|
+
.text-wrapper > div > input.has-clear-icon {
|
|
180
|
+
padding-right: calc(var(--space-unit) * 5.25);
|
|
181
|
+
}
|
|
182
|
+
|
|
183
|
+
.text-wrapper > div > input.has-icon.has-clear-icon {
|
|
184
|
+
padding-right: calc(var(--space-unit) * 8);
|
|
185
|
+
}
|
|
186
|
+
|
|
187
|
+
.text-wrapper .icons-wrapper {
|
|
188
|
+
position: absolute;
|
|
189
|
+
z-index: 2;
|
|
190
|
+
top: 50%;
|
|
191
|
+
right: calc(var(--space-unit) * 1.5);
|
|
192
|
+
display: flex;
|
|
193
|
+
pointer-events: none;
|
|
194
|
+
transform: translateY(-50%);
|
|
195
|
+
}
|
|
196
|
+
|
|
197
|
+
.text-wrapper .icons-wrapper > button.icon-button {
|
|
198
|
+
padding: 0;
|
|
199
|
+
border: 0;
|
|
200
|
+
background: none;
|
|
201
|
+
color: inherit;
|
|
202
|
+
font: inherit;
|
|
203
|
+
pointer-events: initial;
|
|
204
|
+
}
|
|
205
|
+
|
|
206
|
+
.text-wrapper .icons-wrapper > button.icon-button + button.icon-button {
|
|
207
|
+
margin-left: calc(var(--space-unit) * 0.5);
|
|
208
|
+
}
|
|
209
|
+
|
|
210
|
+
.text-wrapper .icons-wrapper > button.icon-button.hidden {
|
|
211
|
+
display: none;
|
|
212
|
+
}
|
|
213
|
+
|
|
214
|
+
.text-wrapper .icons-wrapper > button.icon-button.reset-icon,
|
|
215
|
+
.text-wrapper .icons-wrapper > button.icon-button.toggle-password-icon {
|
|
216
|
+
cursor: pointer;
|
|
217
|
+
}
|
|
218
|
+
|
|
219
|
+
.text-wrapper .icons-wrapper > button.icon-button > z-icon {
|
|
220
|
+
--z-icon-width: 18px;
|
|
221
|
+
--z-icon-height: 18px;
|
|
222
|
+
|
|
223
|
+
display: block;
|
|
224
|
+
}
|
|
225
|
+
|
|
226
|
+
.text-wrapper .icons-wrapper > button.icon-button > z-icon.small,
|
|
227
|
+
.text-wrapper .icons-wrapper > button.icon-button > z-icon.x-small {
|
|
228
|
+
--z-icon-width: 16px;
|
|
229
|
+
--z-icon-height: 16px;
|
|
230
|
+
}
|
|
231
|
+
|
|
232
|
+
.text-wrapper .icons-wrapper > button.icon-button:focus {
|
|
233
|
+
box-shadow: var(--shadow-focus-primary);
|
|
234
|
+
outline: none !important;
|
|
235
|
+
}
|
|
236
|
+
|
|
237
|
+
/* stylelint-disable property-no-vendor-prefix */
|
|
238
|
+
.text-wrapper > div > input:-webkit-autofill {
|
|
239
|
+
-webkit-box-shadow: 0 0 0 1000px #fff inset;
|
|
240
|
+
-webkit-text-fill-color: currentcolor;
|
|
241
|
+
}
|
|
242
|
+
|
|
243
|
+
.textarea-wrapper {
|
|
244
|
+
padding: calc(var(--space-unit) * 1.5);
|
|
245
|
+
|
|
246
|
+
/* Firefox scrollbar */
|
|
247
|
+
scrollbar-color: var(--color-primary01) transparent;
|
|
248
|
+
}
|
|
249
|
+
|
|
250
|
+
textarea::-webkit-scrollbar {
|
|
251
|
+
width: 10px;
|
|
252
|
+
background: linear-gradient(to right, transparent 0 3px, var(--gray200) 3px 7px, transparent 7px 10px);
|
|
253
|
+
border-radius: var(--border-radius);
|
|
254
|
+
}
|
|
255
|
+
|
|
256
|
+
textarea::-webkit-scrollbar-track {
|
|
257
|
+
background-color: transparent;
|
|
258
|
+
}
|
|
259
|
+
|
|
260
|
+
textarea::-webkit-scrollbar-thumb {
|
|
261
|
+
width: 10px;
|
|
262
|
+
background-color: var(--color-primary01);
|
|
263
|
+
border-radius: var(--border-radius);
|
|
264
|
+
}
|
|
265
|
+
|
|
266
|
+
textarea::-webkit-scrollbar-thumb:hover {
|
|
267
|
+
background-color: var(--color-hover-primary);
|
|
268
|
+
}
|
|
269
|
+
|
|
270
|
+
textarea {
|
|
271
|
+
width: 100%;
|
|
272
|
+
min-height: 132px;
|
|
273
|
+
padding: 0;
|
|
274
|
+
border: none;
|
|
275
|
+
margin: 0;
|
|
276
|
+
resize: none;
|
|
277
|
+
}
|
|
278
|
+
|
|
279
|
+
.radio-wrapper,
|
|
280
|
+
.checkbox-wrapper {
|
|
281
|
+
position: relative;
|
|
282
|
+
display: inline-flex;
|
|
283
|
+
flex-direction: row;
|
|
284
|
+
align-items: center;
|
|
285
|
+
color: var(--color-default-text);
|
|
286
|
+
fill: var(--color-primary01);
|
|
287
|
+
font-family: var(--font-family-sans);
|
|
288
|
+
}
|
|
289
|
+
|
|
290
|
+
.radio-wrapper:hover,
|
|
291
|
+
.checkbox-wrapper:hover {
|
|
292
|
+
color: var(--color-hover-primary);
|
|
293
|
+
fill: currentcolor;
|
|
294
|
+
}
|
|
295
|
+
|
|
296
|
+
.radio-wrapper > input,
|
|
297
|
+
.checkbox-wrapper > input {
|
|
298
|
+
position: absolute;
|
|
299
|
+
z-index: -1;
|
|
300
|
+
opacity: 0;
|
|
301
|
+
pointer-events: none;
|
|
302
|
+
}
|
|
303
|
+
|
|
304
|
+
.radio-wrapper .radio-label,
|
|
305
|
+
.checkbox-wrapper .checkbox-label {
|
|
306
|
+
display: inline-flex;
|
|
307
|
+
align-items: center;
|
|
308
|
+
margin: 0;
|
|
309
|
+
color: inherit;
|
|
310
|
+
font-family: inherit;
|
|
311
|
+
font-size: inherit;
|
|
312
|
+
font-weight: inherit;
|
|
313
|
+
line-height: 1;
|
|
314
|
+
text-transform: inherit;
|
|
315
|
+
}
|
|
316
|
+
|
|
317
|
+
.radio-wrapper input:not(:disabled) + .radio-label,
|
|
318
|
+
.checkbox-wrapper input:not(:disabled) + .checkbox-label {
|
|
319
|
+
cursor: pointer;
|
|
320
|
+
}
|
|
321
|
+
|
|
322
|
+
.radio-wrapper .radio-label z-icon,
|
|
323
|
+
.checkbox-wrapper .checkbox-label z-icon {
|
|
324
|
+
cursor: pointer;
|
|
325
|
+
fill: inherit;
|
|
326
|
+
}
|
|
327
|
+
|
|
328
|
+
:host([size="small"]) .radio-wrapper .radio-label z-icon,
|
|
329
|
+
:host([size="small"]) .checkbox-wrapper .checkbox-label z-icon {
|
|
330
|
+
--z-icon-width: 16px;
|
|
331
|
+
--z-icon-height: 16px;
|
|
332
|
+
}
|
|
333
|
+
|
|
334
|
+
:host([size="small"]) .radio-wrapper .radio-label,
|
|
335
|
+
:host([size="small"]) .checkbox-wrapper .checkbox-label {
|
|
336
|
+
font-size: var(--font-size-2);
|
|
337
|
+
}
|
|
338
|
+
|
|
339
|
+
:host([size="x-small"]) .radio-wrapper .radio-label z-icon,
|
|
340
|
+
:host([size="x-small"]) .checkbox-wrapper .checkbox-label z-icon {
|
|
341
|
+
--z-icon-width: 14px;
|
|
342
|
+
--z-icon-height: 14px;
|
|
343
|
+
}
|
|
344
|
+
|
|
345
|
+
:host([size="x-small"]) .radio-wrapper .radio-label,
|
|
346
|
+
:host([size="x-small"]) .checkbox-wrapper .checkbox-label {
|
|
347
|
+
font-size: var(--font-size-1);
|
|
348
|
+
}
|
|
349
|
+
|
|
350
|
+
.radio-wrapper .radio-label.after,
|
|
351
|
+
.checkbox-wrapper .checkbox-label.after {
|
|
352
|
+
flex-direction: row;
|
|
353
|
+
}
|
|
354
|
+
|
|
355
|
+
.radio-wrapper .radio-label.before,
|
|
356
|
+
.checkbox-wrapper .checkbox-label.before {
|
|
357
|
+
flex-direction: row-reverse;
|
|
358
|
+
}
|
|
359
|
+
|
|
360
|
+
.radio-wrapper .radio-label.after > span,
|
|
361
|
+
.checkbox-wrapper .checkbox-label.after > span {
|
|
362
|
+
margin-left: var(--space-unit);
|
|
363
|
+
}
|
|
364
|
+
|
|
365
|
+
.radio-wrapper .radio-label.before > span,
|
|
366
|
+
.checkbox-wrapper .checkbox-label.before > span {
|
|
367
|
+
margin-right: var(--space-unit);
|
|
368
|
+
}
|
|
369
|
+
|
|
370
|
+
:host([size="small"]) .radio-wrapper .radio-label.after > span,
|
|
371
|
+
:host([size="small"]) .checkbox-wrapper .checkbox-label.after > span,
|
|
372
|
+
:host([size="x-small"]) .radio-wrapper .radio-label.after > span,
|
|
373
|
+
:host([size="x-small"]) .checkbox-wrapper .checkbox-label.after > span {
|
|
374
|
+
margin-left: calc(var(--space-unit) * 0.5);
|
|
375
|
+
}
|
|
376
|
+
|
|
377
|
+
:host([size="small"]) .radio-wrapper .radio-label.before > span,
|
|
378
|
+
:host([size="small"]) .checkbox-wrapper .checkbox-label.before > span,
|
|
379
|
+
:host([size="x-small"]) .radio-wrapper .radio-label.before > span,
|
|
380
|
+
:host([size="x-small"]) .checkbox-wrapper .checkbox-label.before > span {
|
|
381
|
+
margin-right: calc(var(--space-unit) * 0.5);
|
|
382
|
+
}
|
|
383
|
+
|
|
384
|
+
/* focus */
|
|
385
|
+
.radio-wrapper > input:focus:focus-visible + .radio-label > z-icon {
|
|
386
|
+
border-radius: 50%;
|
|
387
|
+
}
|
|
388
|
+
|
|
389
|
+
.checkbox-wrapper > input:focus:focus-visible + .checkbox-label > z-icon {
|
|
390
|
+
border-radius: var(--border-radius-small);
|
|
391
|
+
}
|
|
392
|
+
|
|
393
|
+
.radio-wrapper > input:focus:focus-visible + .radio-label > z-icon,
|
|
394
|
+
.checkbox-wrapper > input:focus:focus-visible + .checkbox-label > z-icon {
|
|
395
|
+
box-shadow: var(--shadow-focus-primary);
|
|
396
|
+
}
|
|
397
|
+
|
|
398
|
+
/* disabled */
|
|
399
|
+
.radio-wrapper > input:disabled + .radio-label,
|
|
400
|
+
.checkbox-wrapper > input:disabled + .checkbox-label {
|
|
401
|
+
color: var(--color-disabled03);
|
|
402
|
+
}
|
|
403
|
+
|
|
404
|
+
.radio-wrapper > input:disabled + .radio-label > z-icon,
|
|
405
|
+
.checkbox-wrapper > input:disabled + .checkbox-label > z-icon {
|
|
406
|
+
cursor: default;
|
|
407
|
+
fill: var(--color-disabled01);
|
|
408
|
+
}
|
|
409
|
+
|
|
@@ -11,10 +11,9 @@ export class ZTag {
|
|
|
11
11
|
this.expandable = undefined;
|
|
12
12
|
}
|
|
13
13
|
render() {
|
|
14
|
-
return (h(Host, { key: '
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
} }, this.icon && h("z-icon", { key: '1ce99af72a0ee664304ffc0a0fd401e98e043788', name: this.icon }), h("div", { key: 'fb9aee905ab56d5c086ee850eaf7f7cb8fa10dfe' }, h("slot", { key: '8f1d8bb919793b9570fb49a0761be534b6e454ce' }))));
|
|
14
|
+
return (h(Host, { key: '2b457c2a7462afa36499c0991a32436751b2b6d1', class: {
|
|
15
|
+
expandable: this.expandable && !!this.icon,
|
|
16
|
+
} }, this.icon && h("z-icon", { key: '3f6b461a15c9221c658221894f62895bdbd8e108', name: this.icon }), h("div", { key: '0bb11571e1f99587a62e9d345fc731bf795656e5' }, h("slot", { key: '46ccbc8282a3611e7a3188651bbe96df1aacb5b2' }))));
|
|
18
17
|
}
|
|
19
18
|
static get is() { return "z-tag"; }
|
|
20
19
|
static get encapsulation() { return "scoped"; }
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/z-tag/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAC,MAAM,eAAe,CAAC;AAEvD;;;;;GAKG;AAOH,MAAM,OAAO,IAAI;;;;;IASf,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDACH,KAAK,EAAE;gBACL,
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/z-tag/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAC,MAAM,eAAe,CAAC;AAEvD;;;;;GAKG;AAOH,MAAM,OAAO,IAAI;;;;;IASf,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDACH,KAAK,EAAE;gBACL,UAAU,EAAE,IAAI,CAAC,UAAU,IAAI,CAAC,CAAC,IAAI,CAAC,IAAI;aAC3C;YAEA,IAAI,CAAC,IAAI,IAAI,+DAAQ,IAAI,EAAE,IAAI,CAAC,IAAI,GAAI;YACzC;gBACE,8DAAQ,CACJ,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {Component, Host, Prop, h} from \"@stencil/core\";\n\n/**\n * Ztag component.\n * @slot - The text of the z-tag.\n * @cssprop --z-tag-text-color - text and icon color using tokens.\n * @cssprop --z-tag-bg - background color of the z-tag.\n */\n@Component({\n tag: \"z-tag\",\n styleUrl: \"styles.css\",\n shadow: false,\n scoped: true,\n})\nexport class ZTag {\n /** [optional] Tag icon */\n @Prop()\n icon?: string;\n\n /** [optional] Hide the text and show it on hover*/\n @Prop()\n expandable?: boolean;\n\n render(): HTMLZTagElement {\n return (\n <Host\n class={{\n expandable: this.expandable && !!this.icon,\n }}\n >\n {this.icon && <z-icon name={this.icon} />}\n <div>\n <slot />\n </div>\n </Host>\n );\n }\n}\n"]}
|
|
@@ -4,17 +4,17 @@ describe("Suite test ZTag", () => {
|
|
|
4
4
|
it("Test render z-tag empty", async () => {
|
|
5
5
|
const page = await newSpecPage({
|
|
6
6
|
components: [ZTag],
|
|
7
|
-
html: `<z-tag
|
|
7
|
+
html: `<z-tag></z-tag>`,
|
|
8
8
|
});
|
|
9
|
-
expect(page.root).toEqualHtml(`<z-tag
|
|
9
|
+
expect(page.root).toEqualHtml(`<z-tag><div></div></z-tag>`);
|
|
10
10
|
});
|
|
11
11
|
it("Test render z-tag with icon", async () => {
|
|
12
12
|
const page = await newSpecPage({
|
|
13
13
|
components: [ZTag],
|
|
14
|
-
html: `<z-tag
|
|
14
|
+
html: `<z-tag icon="gear"></z-tag>`,
|
|
15
15
|
});
|
|
16
16
|
expect(page.root).toEqualHtml(`
|
|
17
|
-
<z-tag
|
|
17
|
+
<z-tag icon="gear">
|
|
18
18
|
<z-icon name="gear"></z-icon>
|
|
19
19
|
<div></div>
|
|
20
20
|
</z-tag>`);
|
|
@@ -22,10 +22,10 @@ describe("Suite test ZTag", () => {
|
|
|
22
22
|
it("Test render z-tag with text", async () => {
|
|
23
23
|
const page = await newSpecPage({
|
|
24
24
|
components: [ZTag],
|
|
25
|
-
html: `<z-tag
|
|
25
|
+
html: `<z-tag>my custom element</z-tag>`,
|
|
26
26
|
});
|
|
27
27
|
expect(page.root).toEqualHtml(`
|
|
28
|
-
<z-tag
|
|
28
|
+
<z-tag>
|
|
29
29
|
<div>my custom element</div>
|
|
30
30
|
</z-tag>
|
|
31
31
|
`);
|
|
@@ -33,10 +33,10 @@ describe("Suite test ZTag", () => {
|
|
|
33
33
|
it("Test render z-tag with icon and text", async () => {
|
|
34
34
|
const page = await newSpecPage({
|
|
35
35
|
components: [ZTag],
|
|
36
|
-
html: `<z-tag
|
|
36
|
+
html: `<z-tag icon="gear">my custom element</z-tag>`,
|
|
37
37
|
});
|
|
38
38
|
expect(page.root).toEqualHtml(`
|
|
39
|
-
<z-tag
|
|
39
|
+
<z-tag icon="gear" >
|
|
40
40
|
<z-icon name="gear"></z-icon>
|
|
41
41
|
<div>my custom element</div>
|
|
42
42
|
</z-tag>
|
|
@@ -45,10 +45,10 @@ describe("Suite test ZTag", () => {
|
|
|
45
45
|
it("Test render z-tag with icon and text with Token", async () => {
|
|
46
46
|
const page = await newSpecPage({
|
|
47
47
|
components: [ZTag],
|
|
48
|
-
html: `<z-tag
|
|
48
|
+
html: `<z-tag icon="gear" style="--z-tag-text-color: var(--color-white); --z-tag-bg: var(--avatar-C19);">my custom element</z-tag>`,
|
|
49
49
|
});
|
|
50
50
|
expect(page.root).toEqualHtml(`
|
|
51
|
-
<z-tag
|
|
51
|
+
<z-tag icon="gear" style="--z-tag-text-color: var(--color-white); --z-tag-bg: var(--avatar-C19);">
|
|
52
52
|
<z-icon name="gear"></z-icon>
|
|
53
53
|
<div>my custom element</div>
|
|
54
54
|
</z-tag>
|