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

package/dist/collection/components/z-input/index.js

@@ -1,36 +1,43 @@
-import { h, } from "@stencil/core";
+import { h } from "@stencil/core";
 import { Fragment, Host } from "@stencil/core/internal";
-import { ControlSize, InputType, LabelPosition } from "../../beans";
+import { ControlSize, InputStatus, InputType, LabelPosition } from "../../beans";
 import { boolean, randomId } from "../../utils/utils";
 export class ZInput {
     constructor() {
-        /** the id of the input element */
+        this.typingtimeout = 300;
         this.htmlid = `id-${randomId()}`;
-        /** the input aria-label */
+        this.type = undefined;
+        this.name = undefined;
+        this.label = undefined;
         this.ariaLabel = "";
-        /** the input aria-expaded: available for text, password, number, email */
         this.htmlAriaExpanded = "";
-        /** the input is disabled */
+        this.htmlAriaControls = undefined;
+        this.htmlAriaAutocomplete = undefined;
+        this.htmlAriaActivedescendant = undefined;
+        this.value = undefined;
         this.disabled = false;
-        /** the input is readonly */
         this.readonly = false;
-        /** the input is required (optional): available for text, password, number, email, textarea, checkbox */
         this.required = false;
-        /** checked: available for checkbox, radio */
         this.checked = false;
-        /** input helper message (optional): available for text, password, number, email, textarea - if set to `false` message won't be displayed */
+        this.placeholder = undefined;
+        this.htmltitle = undefined;
+        this.status = undefined;
         this.message = true;
-        /** the input label position: available for checkbox, radio */
+        this.htmlAriaDescribedBy = undefined;
         this.labelPosition = LabelPosition.RIGHT;
-        /** the input role */
+        this.autocomplete = undefined;
         this.role = "";
-        /** render clear icon when typing (optional): available for text */
         this.hasclearicon = true;
-        /** Available sizes: `big`, `small` and `x-small`. Defaults to `big`. */
+        this.icon = undefined;
+        this.min = undefined;
+        this.minlength = undefined;
+        this.max = undefined;
+        this.maxlength = undefined;
+        this.step = undefined;
+        this.pattern = undefined;
         this.size = ControlSize.BIG;
         this.isTyping = false;
         this.passwordHidden = true;
-        this.typingtimeout = 300;
     }
     inputCheckListener(e) {
         const data = e.detail;
@@ -148,6 +155,12 @@ export class ZInput {
     getRoleAttribute() {
         return this.role ? { role: this.role } : {};
     }
+    inputHasMessage() {
+        if (boolean(this.message) === false || boolean(this.message) === true) {
+            return false;
+        }
+        return true;
+    }
     getAriaAttrubutes() {
         const expanded = this.htmlAriaExpanded ? { "aria-expanded": this.htmlAriaExpanded } : {};
         const controls = this.htmlAriaControls ? { "aria-controls": this.htmlAriaControls } : {};
@@ -155,7 +168,11 @@ export class ZInput {
         const activedescendant = this.htmlAriaActivedescendant
             ? { "aria-activedescendant": this.htmlAriaActivedescendant }
             : {};
-        return Object.assign(Object.assign(Object.assign(Object.assign({}, expanded), controls), autocomplete), activedescendant);
+        const ariaDescribedby = this.htmlAriaDescribedBy || this.inputHasMessage()
+            ? { "aria-describedby": this.htmlAriaDescribedBy || `${this.htmlid}-message` }
+            : {};
+        const ariaInvalid = this.status === InputStatus.ERROR ? { "aria-invalid": "true" } : {};
+        return Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, expanded), controls), autocomplete), activedescendant), ariaDescribedby), ariaInvalid);
     }
     getFocusBlurAttributes() {
         return {
@@ -209,13 +226,14 @@ export class ZInput {
         if (boolean(this.message) === false) {
             return;
         }
-        return (h("z-input-message", { message: boolean(this.message) === true ? undefined : this.message, status: this.status, class: this.size, disabled: this.disabled }));
+        return (h("z-input-message", { "html-id": `${this.htmlid}-message`, message: boolean(this.message) === true ? undefined : this.message, status: this.status, class: this.size, disabled: this.disabled }));
     }
     /* END text/password/email/number */
     /* START textarea */
     renderTextarea() {
         const attributes = this.getTextAttributes();
-        return (h(Fragment, null, this.renderLabel(), h("div", { class: Object.assign(Object.assign({}, attributes.class), { "textarea-wrapper": true, "readonly": !!attributes.readonly }) }, h("textarea", Object.assign({}, attributes, { class: Object.assign(Object.assign({}, attributes.class), { "z-scrollbar": true }), "aria-label": this.ariaLabel || undefined }, this.getRoleAttribute()))), this.renderMessage()));
+        const ariaAttributes = this.getAriaAttrubutes();
+        return (h(Fragment, null, this.renderLabel(), h("div", { class: Object.assign(Object.assign({}, attributes.class), { "textarea-wrapper": true, "readonly": !!attributes.readonly }) }, h("textarea", Object.assign({}, attributes, ariaAttributes, { class: Object.assign(Object.assign({}, attributes.class), { "z-scrollbar": true }), "aria-label": this.ariaLabel || undefined }, this.getRoleAttribute()))), this.renderMessage()));
     }
     /* END textarea */
     handleCheck(ev) {
@@ -255,7 +273,7 @@ export class ZInput {
             default:
                 input = this.renderInputText(this.type);
         }
-        return h(Host, { key: '297666cbd11a46261053bac95c9289d61b55a10a' }, input);
+        return h(Host, { key: '5947648f0faeea551f24f57b685f0872cdabe77e' }, input);
     }
     static get is() { return "z-input"; }
     static get encapsulation() { return "scoped"; }
@@ -285,10 +303,8 @@ export class ZInput {
                     "tags": [],
                     "text": "the id of the input element"
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
                 "attribute": "htmlid",
+                "reflect": false,
                 "defaultValue": "`id-${randomId()}`"
             },
             "type": {
@@ -301,8 +317,7 @@ export class ZInput {
                         "InputType": {
                             "location": "import",
                             "path": "../../beans",
-                            "id": "src/beans/index.tsx::InputType",
-                            "referenceLocation": "InputType"
+                            "id": "src/beans/index.tsx::InputType"
                         }
                     }
                 },
@@ -312,10 +327,8 @@ export class ZInput {
                     "tags": [],
                     "text": "input types"
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "type"
+                "attribute": "type",
+                "reflect": false
             },
             "name": {
                 "type": "string",
@@ -331,10 +344,8 @@ export class ZInput {
                     "tags": [],
                     "text": "the input name"
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "name"
+                "attribute": "name",
+                "reflect": false
             },
             "label": {
                 "type": "string",
@@ -350,10 +361,8 @@ export class ZInput {
                     "tags": [],
                     "text": "the input label"
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "label"
+                "attribute": "label",
+                "reflect": false
             },
             "ariaLabel": {
                 "type": "string",
@@ -369,10 +378,8 @@ export class ZInput {
                     "tags": [],
                     "text": "the input aria-label"
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
                 "attribute": "aria-label",
+                "reflect": false,
                 "defaultValue": "\"\""
             },
             "htmlAriaExpanded": {
@@ -389,10 +396,8 @@ export class ZInput {
                     "tags": [],
                     "text": "the input aria-expaded: available for text, password, number, email"
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
                 "attribute": "html-aria-expanded",
+                "reflect": false,
                 "defaultValue": "\"\""
             },
             "htmlAriaControls": {
@@ -409,10 +414,8 @@ export class ZInput {
                     "tags": [],
                     "text": "the input aria-controls (optional): available for text, password, number, email"
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "html-aria-controls"
+                "attribute": "html-aria-controls",
+                "reflect": false
             },
             "htmlAriaAutocomplete": {
                 "type": "string",
@@ -428,10 +431,8 @@ export class ZInput {
                     "tags": [],
                     "text": "the input aria-autocomplete (optional): available for text, password, number, email"
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "html-aria-autocomplete"
+                "attribute": "html-aria-autocomplete",
+                "reflect": false
             },
             "htmlAriaActivedescendant": {
                 "type": "string",
@@ -447,10 +448,8 @@ export class ZInput {
                     "tags": [],
                     "text": "the input aria-activedescendant (optional): available for text, password, number, email"
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "html-aria-activedescendant"
+                "attribute": "html-aria-activedescendant",
+                "reflect": false
             },
             "value": {
                 "type": "string",
@@ -466,10 +465,8 @@ export class ZInput {
                     "tags": [],
                     "text": "the input value"
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "value"
+                "attribute": "value",
+                "reflect": false
             },
             "disabled": {
                 "type": "boolean",
@@ -485,10 +482,8 @@ export class ZInput {
                     "tags": [],
                     "text": "the input is disabled"
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": true,
                 "attribute": "disabled",
+                "reflect": true,
                 "defaultValue": "false"
             },
             "readonly": {
@@ -505,10 +500,8 @@ export class ZInput {
                     "tags": [],
                     "text": "the input is readonly"
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
                 "attribute": "readonly",
+                "reflect": false,
                 "defaultValue": "false"
             },
             "required": {
@@ -525,10 +518,8 @@ export class ZInput {
                     "tags": [],
                     "text": "the input is required (optional): available for text, password, number, email, textarea, checkbox"
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
                 "attribute": "required",
+                "reflect": false,
                 "defaultValue": "false"
             },
             "checked": {
@@ -545,10 +536,8 @@ export class ZInput {
                     "tags": [],
                     "text": "checked: available for checkbox, radio"
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
                 "attribute": "checked",
+                "reflect": false,
                 "defaultValue": "false"
             },
             "placeholder": {
@@ -565,10 +554,8 @@ export class ZInput {
                     "tags": [],
                     "text": "the input placeholder (optional)"
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "placeholder"
+                "attribute": "placeholder",
+                "reflect": false
             },
             "htmltitle": {
                 "type": "string",
@@ -584,10 +571,8 @@ export class ZInput {
                     "tags": [],
                     "text": "the input html title (optional)"
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "htmltitle"
+                "attribute": "htmltitle",
+                "reflect": false
             },
             "status": {
                 "type": "string",
@@ -599,8 +584,7 @@ export class ZInput {
                         "InputStatus": {
                             "location": "import",
                             "path": "../../beans",
-                            "id": "src/beans/index.tsx::InputStatus",
-                            "referenceLocation": "InputStatus"
+                            "id": "src/beans/index.tsx::InputStatus"
                         }
                     }
                 },
@@ -610,10 +594,8 @@ export class ZInput {
                     "tags": [],
                     "text": "the input status (optional): available for text, password, number, email, textarea"
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "status"
+                "attribute": "status",
+                "reflect": false
             },
             "message": {
                 "type": "any",
@@ -629,12 +611,27 @@ export class ZInput {
                     "tags": [],
                     "text": "input helper message (optional): available for text, password, number, email, textarea - if set to `false` message won't be displayed"
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
                 "attribute": "message",
+                "reflect": false,
                 "defaultValue": "true"
             },
+            "htmlAriaDescribedBy": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "input helper message id (optional): available for text, password, number, email, textarea - if set, it will be used to populate the aria-describedby attribute, otherwise the attribute (if present) will be populated with an auto-generated value"
+                },
+                "attribute": "html-aria-described-by",
+                "reflect": false
+            },
             "labelPosition": {
                 "type": "string",
                 "mutable": false,
@@ -645,8 +642,7 @@ export class ZInput {
                         "LabelPosition": {
                             "location": "import",
                             "path": "../../beans",
-                            "id": "src/beans/index.tsx::LabelPosition",
-                            "referenceLocation": "LabelPosition"
+                            "id": "src/beans/index.tsx::LabelPosition"
                         }
                     }
                 },
@@ -656,10 +652,8 @@ export class ZInput {
                     "tags": [],
                     "text": "the input label position: available for checkbox, radio"
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
                 "attribute": "label-position",
+                "reflect": false,
                 "defaultValue": "LabelPosition.RIGHT"
             },
             "autocomplete": {
@@ -676,10 +670,8 @@ export class ZInput {
                     "tags": [],
                     "text": "the input has autocomplete option (optional): available for text, password, number, email"
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "autocomplete"
+                "attribute": "autocomplete",
+                "reflect": false
             },
             "role": {
                 "type": "string",
@@ -695,10 +687,8 @@ export class ZInput {
                     "tags": [],
                     "text": "the input role"
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
                 "attribute": "role",
+                "reflect": false,
                 "defaultValue": "\"\""
             },
             "hasclearicon": {
@@ -715,10 +705,8 @@ export class ZInput {
                     "tags": [],
                     "text": "render clear icon when typing (optional): available for text"
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
                 "attribute": "hasclearicon",
+                "reflect": false,
                 "defaultValue": "true"
             },
             "icon": {
@@ -735,10 +723,8 @@ export class ZInput {
                     "tags": [],
                     "text": "render icon (optional): available for text"
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "icon"
+                "attribute": "icon",
+                "reflect": false
             },
             "min": {
                 "type": "number",
@@ -754,10 +740,8 @@ export class ZInput {
                     "tags": [],
                     "text": "min number value (optional): available for number"
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "min"
+                "attribute": "min",
+                "reflect": false
             },
             "minlength": {
                 "type": "number",
@@ -773,10 +757,8 @@ export class ZInput {
                     "tags": [],
                     "text": "Min length value (optional): available for text"
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "minlength"
+                "attribute": "minlength",
+                "reflect": false
             },
             "max": {
                 "type": "number",
@@ -792,10 +774,8 @@ export class ZInput {
                     "tags": [],
                     "text": "max number value (optional): available for number"
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "max"
+                "attribute": "max",
+                "reflect": false
             },
             "maxlength": {
                 "type": "number",
@@ -811,10 +791,8 @@ export class ZInput {
                     "tags": [],
                     "text": "Max length value (optional): available for text"
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "maxlength"
+                "attribute": "maxlength",
+                "reflect": false
             },
             "step": {
                 "type": "number",
@@ -830,10 +808,8 @@ export class ZInput {
                     "tags": [],
                     "text": "step number value (optional): available for number"
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "step"
+                "attribute": "step",
+                "reflect": false
             },
             "pattern": {
                 "type": "string",
@@ -849,10 +825,8 @@ export class ZInput {
                     "tags": [],
                     "text": "pattern value (optional): available for tel, text, search, url, email, password"
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "pattern"
+                "attribute": "pattern",
+                "reflect": false
             },
             "size": {
                 "type": "string",
@@ -864,8 +838,7 @@ export class ZInput {
                         "ControlSize": {
                             "location": "import",
                             "path": "../../beans",
-                            "id": "src/beans/index.tsx::ControlSize",
-                            "referenceLocation": "ControlSize"
+                            "id": "src/beans/index.tsx::ControlSize"
                         }
                     }
                 },
@@ -875,10 +848,8 @@ export class ZInput {
                     "tags": [],
                     "text": "Available sizes: `big`, `small` and `x-small`. Defaults to `big`."
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": true,
                 "attribute": "size",
+                "reflect": true,
                 "defaultValue": "ControlSize.BIG"
             }
         };
@@ -1014,3 +985,4 @@ export class ZInput {
             }];
     }
 }
+//# sourceMappingURL=index.js.map

package/dist/collection/components/z-input/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/z-input/index.tsx"],"names":[],"mappings":"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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {Component, Element, Event, EventEmitter, Listen, Method, Prop, State, h} from \"@stencil/core\";\nimport {Fragment, 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  htmlAriaExpanded = \"\";\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 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  /** input helper message id (optional): available for text, password, number, email, textarea - if set, it will be used to populate the aria-describedby attribute, otherwise the attribute (if present) will be populated with an auto-generated value */\n  @Prop()\n  htmlAriaDescribedBy?: string;\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      },\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 inputHasMessage(): boolean {\n    if (boolean(this.message) === false || boolean(this.message) === true) {\n      return false;\n    }\n\n    return true;\n  }\n\n  private getAriaAttrubutes(): Record<string, unknown> {\n    const expanded = this.htmlAriaExpanded ? {\"aria-expanded\": this.htmlAriaExpanded} : {};\n    const controls = this.htmlAriaControls ? {\"aria-controls\": this.htmlAriaControls} : {};\n    const autocomplete = this.htmlAriaAutocomplete ? {\"aria-autocomplete\": this.htmlAriaAutocomplete} : {};\n    const activedescendant = this.htmlAriaActivedescendant\n      ? {\"aria-activedescendant\": this.htmlAriaActivedescendant}\n      : {};\n    const ariaDescribedby =\n      this.htmlAriaDescribedBy || this.inputHasMessage()\n        ? {\"aria-describedby\": this.htmlAriaDescribedBy || `${this.htmlid}-message`}\n        : {};\n\n    const ariaInvalid = this.status === InputStatus.ERROR ? {\"aria-invalid\": \"true\"} : {};\n\n    return {\n      ...expanded,\n      ...controls,\n      ...autocomplete,\n      ...activedescendant,\n      ...ariaDescribedby,\n      ...ariaInvalid,\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=\"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        }}\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={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        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.getAriaAttrubutes();\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.ariaLabel || undefined}\n            {...this.getRoleAttribute()}\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    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            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            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"]}

package/dist/collection/components/z-input/index.stories.js

@@ -291,3 +291,4 @@ export const ZInputNumber = {
     ></z-input>
   `,
 };
+//# sourceMappingURL=index.stories.js.map

package/dist/collection/components/z-input/index.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.stories.js","sourceRoot":"","sources":["../../../../src/components/z-input/index.stories.ts"],"names":[],"mappings":"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","sourcesContent":["import {Meta, StoryObj} from \"@storybook/web-components\";\nimport {html} from \"lit\";\nimport {ZInput} from \".\";\nimport {ControlSize, InputStatus, InputType, LabelPosition} from \"../../beans\";\nimport \"./index\";\n\nconst StoryMeta = {\n  title: \"ZInput\",\n  component: \"z-input\",\n  argTypes: {\n    type: {\n      control: {\n        type: \"inline-radio\",\n      },\n      options: Object.values(InputType),\n    },\n    labelPosition: {\n      control: {\n        type: \"inline-radio\",\n      },\n      options: Object.values(LabelPosition),\n    },\n    size: {\n      control: {\n        type: \"inline-radio\",\n      },\n      options: Object.values(ControlSize),\n    },\n    status: {\n      control: {\n        type: \"inline-radio\",\n        labels: {\n          null: \"-\",\n        },\n      },\n      options: [null, ...Object.values(InputStatus)],\n    },\n  },\n  args: {\n    type: InputType.TEXT,\n    label: \"this is the input label\",\n    ariaLabel: \"\",\n    labelPosition: LabelPosition.RIGHT,\n    placeholder: \"input placeholder text\",\n    value: \"\",\n    size: ControlSize.BIG,\n    name: \"\",\n    status: null,\n    message: \"helper text\",\n    icon: \"\",\n    disabled: false,\n    readonly: false,\n    required: false,\n    checked: false,\n    hasclearicon: true,\n    htmlid: \"input-id\",\n    htmltitle: \"\",\n    autocomplete: \"\",\n    min: 1,\n    minlength: 1,\n    max: 10,\n    maxlength: 10,\n    step: 1,\n    pattern: \"\",\n  },\n} satisfies Meta<ZInput>;\n\nexport default StoryMeta;\n\ntype Story = StoryObj<ZInput>;\n\nexport const AllProps = {\n  render: (args) => html`\n    <z-input\n      type=${args.type}\n      label=${args.label}\n      aria-label=${args.ariaLabel}\n      .labelPosition=${args.labelPosition}\n      placeholder=${args.placeholder}\n      value=${args.value}\n      name=${args.name}\n      status=${args.status}\n      message=${args.message}\n      icon=${args.icon}\n      .disabled=${args.disabled}\n      .readonly=${args.readonly}\n      .required=${args.required}\n      .checked=${args.checked}\n      hasclearicon=${args.hasclearicon}\n      htmlid=${args.htmlid}\n      htmltitle=${args.htmltitle}\n      .autocomplete=${args.autocomplete}\n      min=${args.min}\n      minlength=${args.minlength}\n      max=${args.max}\n      maxlength=${args.maxlength}\n      step=${args.step}\n      pattern=${args.pattern}\n      size=${args.size}\n    ></z-input>\n  `,\n} satisfies Story;\n\nexport const ZInputText = {\n  render: (args) => html`\n    <z-input\n      type=${args.type}\n      label=${args.label}\n      aria-label=${args.ariaLabel}\n      placeholder=${args.placeholder}\n      value=${args.value}\n      name=${args.name}\n      status=${args.status}\n      message=${args.message}\n      icon=${args.icon}\n      .disabled=${args.disabled}\n      .readonly=${args.readonly}\n      .required=${args.required}\n      hasclearicon=${args.hasclearicon}\n      htmlid=${args.htmlid}\n      htmltitle=${args.htmltitle}\n      .autocomplete=${args.autocomplete}\n      size=${args.size}\n      minlength=${args.minlength}\n      maxlength=${args.maxlength}\n    ></z-input>\n  `,\n  parameters: {\n    controls: {\n      include: [\n        \"type\",\n        \"label\",\n        \"ariaLabel\",\n        \"placeholder\",\n        \"value\",\n        \"name\",\n        \"status\",\n        \"message\",\n        \"icon\",\n        \"disabled\",\n        \"readonly\",\n        \"required\",\n        \"hasclearicon\",\n        \"htmlid\",\n        \"htmltitle\",\n        \"autocomplete\",\n        \"size\",\n        \"minlength\",\n        \"maxlength\",\n      ],\n    },\n  },\n  argTypes: {\n    type: {\n      options: Object.values(InputType).filter((type) => [\"text\", \"password\", \"number\", \"email\"].includes(type)),\n    },\n  },\n} satisfies Story;\n\nexport const ZInputTextarea = {\n  render: (args) => html`\n    <z-input\n      type=${args.type}\n      label=${args.label}\n      aria-label=${args.ariaLabel}\n      placeholder=${args.placeholder}\n      value=${args.value}\n      name=${args.name}\n      status=${args.status}\n      message=${args.message}\n      .disabled=${args.disabled}\n      .readonly=${args.readonly}\n      .required=${args.required}\n      htmlid=${args.htmlid}\n      htmltitle=${args.htmltitle}\n      size=${args.size}\n    ></z-input>\n  `,\n  parameters: {\n    controls: {\n      include: [\n        \"type\",\n        \"label\",\n        \"ariaLabel\",\n        \"placeholder\",\n        \"value\",\n        \"name\",\n        \"status\",\n        \"message\",\n        \"disabled\",\n        \"readonly\",\n        \"required\",\n        \"htmlid\",\n        \"htmltitle\",\n        \"size\",\n      ],\n    },\n  },\n  args: {\n    type: InputType.TEXTAREA,\n  },\n} satisfies Story;\n\nexport const ZInputCheckbox = {\n  parameters: {\n    controls: {\n      include: [\n        \"label\",\n        \"ariaLabel\",\n        \"labelPosition\",\n        \"name\",\n        \"disabled\",\n        \"readonly\",\n        \"required\",\n        \"checked\",\n        \"htmlid\",\n        \"htmltitle\",\n        \"size\",\n      ],\n    },\n  },\n  args: {\n    type: InputType.CHECKBOX,\n  },\n  render: (args) => html`\n    <z-input\n      type=\"${args.type}\"\n      label=${args.label}\n      aria-label=${args.ariaLabel}\n      .labelPosition=${args.labelPosition}\n      name=${args.name}\n      .disabled=${args.disabled}\n      .readonly=${args.readonly}\n      .required=${args.required}\n      .checked=${args.checked}\n      htmlid=${args.htmlid}\n      htmltitle=${args.htmltitle}\n      size=${args.size}\n    ></z-input>\n  `,\n} satisfies Story;\n\nexport const ZInputRadio = {\n  parameters: {\n    controls: {\n      include: [\n        \"label\",\n        \"ariaLabel\",\n        \"labelPosition\",\n        \"name\",\n        \"value\",\n        \"disabled\",\n        \"readonly\",\n        \"required\",\n        \"checked\",\n        \"htmlid\",\n        \"htmltitle\",\n        \"size\",\n      ],\n    },\n  },\n  args: {\n    type: InputType.RADIO,\n  },\n  render: (args) => html`\n    <z-input\n      type=${args.type}\n      label=${args.label}\n      aria-label=${args.ariaLabel}\n      .labelPosition=${args.labelPosition}\n      name=${args.name}\n      value=${args.value}\n      .disabled=${args.disabled}\n      .readonly=${args.readonly}\n      .required=${args.required}\n      .checked=${args.checked}\n      htmlid=${args.htmlid}\n      htmltitle=${args.htmltitle}\n      size=${args.size}\n    ></z-input>\n  `,\n} satisfies Story;\n\nexport const ZInputNumber = {\n  parameters: {\n    controls: {\n      include: [\"min\", \"max\", \"step\", \"value\", \"hasclearicon\"],\n    },\n  },\n  args: {\n    type: InputType.NUMBER,\n    value: \"1\",\n    hasclearicon: false,\n  },\n  render: (args) => html`\n    <z-input\n      type=${args.type}\n      value=${args.value}\n      min=${args.min}\n      max=${args.max}\n      step=${args.step}\n      .hasclearicon=${args.hasclearicon}\n    ></z-input>\n  `,\n} satisfies Story;\n"]}