@zanichelli/albe-web-components 19.3.0-RC4 → 19.3.0-RC6

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

@@ -1,42 +1,36 @@
-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() {
-        this.typingtimeout = 300;
+        /** the id of the input element */
         this.htmlid = `id-${randomId()}`;
-        this.type = undefined;
-        this.name = undefined;
-        this.label = undefined;
+        /** the input aria-label */
         this.ariaLabel = "";
+        /** the input aria-expaded: available for text, password, number, email */
         this.htmlAriaExpanded = "";
-        this.htmlAriaControls = undefined;
-        this.htmlAriaAutocomplete = undefined;
-        this.htmlAriaActivedescendant = undefined;
-        this.value = undefined;
+        /** the input is disabled */
         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;
-        this.placeholder = undefined;
-        this.htmltitle = undefined;
-        this.status = undefined;
+        /** input helper message (optional): available for text, password, number, email, textarea - if set to `false` message won't be displayed */
         this.message = true;
+        /** the input label position: available for checkbox, radio */
         this.labelPosition = LabelPosition.RIGHT;
-        this.autocomplete = undefined;
+        /** the input role */
         this.role = "";
+        /** render clear icon when typing (optional): available for text */
         this.hasclearicon = true;
-        this.icon = undefined;
-        this.min = undefined;
-        this.minlength = undefined;
-        this.max = undefined;
-        this.maxlength = undefined;
-        this.step = undefined;
-        this.pattern = undefined;
+        /** Available sizes: `big`, `small` and `x-small`. Defaults to `big`. */
         this.size = ControlSize.BIG;
         this.isTyping = false;
         this.passwordHidden = true;
+        this.typingtimeout = 300;
     }
     inputCheckListener(e) {
         const data = e.detail;
@@ -151,17 +145,27 @@ export class ZInput {
             pattern: this.pattern,
         };
     }
-    getRoleAttribute() {
-        return this.role ? { role: this.role } : {};
+    inputHasMessage() {
+        if (boolean(this.message) === false || boolean(this.message) === true) {
+            return false;
+        }
+        return true;
     }
-    getAriaAttrubutes() {
+    getAriaAttributes() {
+        return Object.assign(Object.assign(Object.assign({}, (this.role ? { role: this.role } : {})), (this.htmlAriaDescribedBy ? { "aria-describedby": this.htmlAriaDescribedBy } : {})), (this.htmlAriaLabelledby ? { "aria-labelledby": this.htmlAriaLabelledby } : {}));
+    }
+    getTextAriaAttributes() {
         const expanded = this.htmlAriaExpanded ? { "aria-expanded": this.htmlAriaExpanded } : {};
         const controls = this.htmlAriaControls ? { "aria-controls": this.htmlAriaControls } : {};
         const autocomplete = this.htmlAriaAutocomplete ? { "aria-autocomplete": this.htmlAriaAutocomplete } : {};
         const activedescendant = this.htmlAriaActivedescendant
             ? { "aria-activedescendant": this.htmlAriaActivedescendant }
             : {};
-        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(Object.assign({}, this.getAriaAttributes()), expanded), controls), autocomplete), activedescendant), ariaDescribedby), ariaInvalid);
     }
     getFocusBlurAttributes() {
         return {
@@ -171,7 +175,7 @@ export class ZInput {
     }
     renderInputText(type = InputType.TEXT) {
         const ariaLabel = this.ariaLabel ? { "aria-label": this.ariaLabel } : {};
-        const attr = Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, this.getTextAttributes()), this.getNumberAttributes(type)), this.getPatternAttribute(type)), ariaLabel), this.getRoleAttribute()), this.getAriaAttrubutes()), this.getFocusBlurAttributes());
+        const attr = Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, this.getTextAttributes()), this.getNumberAttributes(type)), this.getPatternAttribute(type)), ariaLabel), this.getTextAriaAttributes()), this.getFocusBlurAttributes());
         if (this.icon || type === InputType.PASSWORD) {
             Object.assign(attr.class, { "has-icon": true });
         }
@@ -206,6 +210,7 @@ export class ZInput {
         return (h("button", { type: "button", class: { "reset-icon": true, "input-icon": true, hidden }, "aria-label": "cancella il contenuto dell'input", onClick: () => {
                 this.inputRef.value = "";
                 this.emitInputChange("");
+                this.inputRef.focus();
             } }, h("z-icon", { name: "multiply", class: this.size })));
     }
     renderShowHidePassword() {
@@ -215,13 +220,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.getTextAriaAttributes();
+        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.renderMessage()));
     }
     /* END textarea */
     handleCheck(ev) {
@@ -230,7 +236,7 @@ export class ZInput {
     }
     /* START checkbox */
     renderCheckbox() {
-        return (h("div", { class: "checkbox-wrapper" }, h("input", Object.assign({ id: this.htmlid, type: "checkbox", name: this.name, checked: this.checked, disabled: this.disabled, readonly: this.readonly, required: this.required, onChange: this.handleCheck.bind(this), value: this.value }, this.getRoleAttribute(), this.getFocusBlurAttributes())), h("label", { htmlFor: this.htmlid, class: {
+        return (h("div", { class: "checkbox-wrapper" }, h("input", Object.assign({ id: this.htmlid, type: "checkbox", name: this.name, checked: this.checked, disabled: this.disabled, readonly: this.readonly, required: this.required, onChange: this.handleCheck.bind(this), value: this.value }, this.getAriaAttributes(), this.getFocusBlurAttributes())), h("label", { htmlFor: this.htmlid, class: {
                 "checkbox-label": true,
                 "after": this.labelPosition === LabelPosition.RIGHT,
                 "before": this.labelPosition === LabelPosition.LEFT,
@@ -239,7 +245,7 @@ export class ZInput {
     /* END checkbox */
     /* START radio */
     renderRadio() {
-        return (h("div", { class: "radio-wrapper" }, h("input", Object.assign({ id: this.htmlid, type: "radio", name: this.name, checked: this.checked, disabled: this.disabled, readonly: this.readonly, onChange: this.handleCheck.bind(this), value: this.value }, this.getRoleAttribute(), this.getFocusBlurAttributes())), h("label", { htmlFor: this.htmlid, class: {
+        return (h("div", { class: "radio-wrapper" }, h("input", Object.assign({ id: this.htmlid, type: "radio", name: this.name, checked: this.checked, disabled: this.disabled, readonly: this.readonly, onChange: this.handleCheck.bind(this), value: this.value }, this.getAriaAttributes(), this.getFocusBlurAttributes())), h("label", { htmlFor: this.htmlid, class: {
                 "radio-label": true,
                 "after": this.labelPosition === LabelPosition.RIGHT,
                 "before": this.labelPosition === LabelPosition.LEFT,
@@ -261,18 +267,18 @@ export class ZInput {
             default:
                 input = this.renderInputText(this.type);
         }
-        return h(Host, { key: '12e6993a9f2e94db2300ccce3df5b839db56b09b' }, input);
+        return h(Host, { key: '2536f6387f2325190522fc8cc4f788147bead800' }, input);
     }
     static get is() { return "z-input"; }
     static get encapsulation() { return "scoped"; }
     static get originalStyleUrls() {
         return {
-            "$": ["styles.css"]
+            "$": ["styles-general.css", "styles-text.css", "styles-textarea.css", "styles-checkbox-radio.css"]
         };
     }
     static get styleUrls() {
         return {
-            "$": ["styles.css"]
+            "$": ["styles-general.css", "styles-text.css", "styles-textarea.css", "styles-checkbox-radio.css"]
         };
     }
     static get properties() {
@@ -291,8 +297,10 @@ export class ZInput {
                     "tags": [],
                     "text": "the id of the input element"
                 },
-                "attribute": "htmlid",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "htmlid",
                 "defaultValue": "`id-${randomId()}`"
             },
             "type": {
@@ -305,7 +313,8 @@ export class ZInput {
                         "InputType": {
                             "location": "import",
                             "path": "../../beans",
-                            "id": "src/beans/index.tsx::InputType"
+                            "id": "src/beans/index.tsx::InputType",
+                            "referenceLocation": "InputType"
                         }
                     }
                 },
@@ -315,8 +324,10 @@ export class ZInput {
                     "tags": [],
                     "text": "input types"
                 },
-                "attribute": "type",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "type"
             },
             "name": {
                 "type": "string",
@@ -332,8 +343,10 @@ export class ZInput {
                     "tags": [],
                     "text": "the input name"
                 },
-                "attribute": "name",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "name"
             },
             "label": {
                 "type": "string",
@@ -349,8 +362,10 @@ export class ZInput {
                     "tags": [],
                     "text": "the input label"
                 },
-                "attribute": "label",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label"
             },
             "ariaLabel": {
                 "type": "string",
@@ -366,8 +381,10 @@ export class ZInput {
                     "tags": [],
                     "text": "the input aria-label"
                 },
-                "attribute": "aria-label",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "aria-label",
                 "defaultValue": "\"\""
             },
             "htmlAriaExpanded": {
@@ -384,8 +401,10 @@ export class ZInput {
                     "tags": [],
                     "text": "the input aria-expaded: available for text, password, number, email"
                 },
-                "attribute": "html-aria-expanded",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "html-aria-expanded",
                 "defaultValue": "\"\""
             },
             "htmlAriaControls": {
@@ -402,8 +421,10 @@ export class ZInput {
                     "tags": [],
                     "text": "the input aria-controls (optional): available for text, password, number, email"
                 },
-                "attribute": "html-aria-controls",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "html-aria-controls"
             },
             "htmlAriaAutocomplete": {
                 "type": "string",
@@ -419,8 +440,10 @@ export class ZInput {
                     "tags": [],
                     "text": "the input aria-autocomplete (optional): available for text, password, number, email"
                 },
-                "attribute": "html-aria-autocomplete",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "html-aria-autocomplete"
             },
             "htmlAriaActivedescendant": {
                 "type": "string",
@@ -436,8 +459,48 @@ export class ZInput {
                     "tags": [],
                     "text": "the input aria-activedescendant (optional): available for text, password, number, email"
                 },
-                "attribute": "html-aria-activedescendant",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "html-aria-activedescendant"
+            },
+            "htmlAriaDescribedBy": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "the input aria-describedby (optional)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "html-aria-described-by"
+            },
+            "htmlAriaLabelledby": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "the input aria-labelledby (optional)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "html-aria-labelledby"
             },
             "value": {
                 "type": "string",
@@ -453,8 +516,10 @@ export class ZInput {
                     "tags": [],
                     "text": "the input value"
                 },
-                "attribute": "value",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "value"
             },
             "disabled": {
                 "type": "boolean",
@@ -470,8 +535,10 @@ export class ZInput {
                     "tags": [],
                     "text": "the input is disabled"
                 },
-                "attribute": "disabled",
+                "getter": false,
+                "setter": false,
                 "reflect": true,
+                "attribute": "disabled",
                 "defaultValue": "false"
             },
             "readonly": {
@@ -488,8 +555,10 @@ export class ZInput {
                     "tags": [],
                     "text": "the input is readonly"
                 },
-                "attribute": "readonly",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "readonly",
                 "defaultValue": "false"
             },
             "required": {
@@ -506,8 +575,10 @@ export class ZInput {
                     "tags": [],
                     "text": "the input is required (optional): available for text, password, number, email, textarea, checkbox"
                 },
-                "attribute": "required",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "required",
                 "defaultValue": "false"
             },
             "checked": {
@@ -524,8 +595,10 @@ export class ZInput {
                     "tags": [],
                     "text": "checked: available for checkbox, radio"
                 },
-                "attribute": "checked",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "checked",
                 "defaultValue": "false"
             },
             "placeholder": {
@@ -542,8 +615,10 @@ export class ZInput {
                     "tags": [],
                     "text": "the input placeholder (optional)"
                 },
-                "attribute": "placeholder",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "placeholder"
             },
             "htmltitle": {
                 "type": "string",
@@ -559,8 +634,10 @@ export class ZInput {
                     "tags": [],
                     "text": "the input html title (optional)"
                 },
-                "attribute": "htmltitle",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "htmltitle"
             },
             "status": {
                 "type": "string",
@@ -572,7 +649,8 @@ export class ZInput {
                         "InputStatus": {
                             "location": "import",
                             "path": "../../beans",
-                            "id": "src/beans/index.tsx::InputStatus"
+                            "id": "src/beans/index.tsx::InputStatus",
+                            "referenceLocation": "InputStatus"
                         }
                     }
                 },
@@ -582,8 +660,10 @@ export class ZInput {
                     "tags": [],
                     "text": "the input status (optional): available for text, password, number, email, textarea"
                 },
-                "attribute": "status",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "status"
             },
             "message": {
                 "type": "any",
@@ -599,8 +679,10 @@ 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"
                 },
-                "attribute": "message",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "message",
                 "defaultValue": "true"
             },
             "labelPosition": {
@@ -613,7 +695,8 @@ export class ZInput {
                         "LabelPosition": {
                             "location": "import",
                             "path": "../../beans",
-                            "id": "src/beans/index.tsx::LabelPosition"
+                            "id": "src/beans/index.tsx::LabelPosition",
+                            "referenceLocation": "LabelPosition"
                         }
                     }
                 },
@@ -623,8 +706,10 @@ export class ZInput {
                     "tags": [],
                     "text": "the input label position: available for checkbox, radio"
                 },
-                "attribute": "label-position",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "label-position",
                 "defaultValue": "LabelPosition.RIGHT"
             },
             "autocomplete": {
@@ -641,8 +726,10 @@ export class ZInput {
                     "tags": [],
                     "text": "the input has autocomplete option (optional): available for text, password, number, email"
                 },
-                "attribute": "autocomplete",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "autocomplete"
             },
             "role": {
                 "type": "string",
@@ -658,8 +745,10 @@ export class ZInput {
                     "tags": [],
                     "text": "the input role"
                 },
-                "attribute": "role",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "role",
                 "defaultValue": "\"\""
             },
             "hasclearicon": {
@@ -676,8 +765,10 @@ export class ZInput {
                     "tags": [],
                     "text": "render clear icon when typing (optional): available for text"
                 },
-                "attribute": "hasclearicon",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "hasclearicon",
                 "defaultValue": "true"
             },
             "icon": {
@@ -694,8 +785,10 @@ export class ZInput {
                     "tags": [],
                     "text": "render icon (optional): available for text"
                 },
-                "attribute": "icon",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "icon"
             },
             "min": {
                 "type": "number",
@@ -711,8 +804,10 @@ export class ZInput {
                     "tags": [],
                     "text": "min number value (optional): available for number"
                 },
-                "attribute": "min",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "min"
             },
             "minlength": {
                 "type": "number",
@@ -728,8 +823,10 @@ export class ZInput {
                     "tags": [],
                     "text": "Min length value (optional): available for text"
                 },
-                "attribute": "minlength",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "minlength"
             },
             "max": {
                 "type": "number",
@@ -745,8 +842,10 @@ export class ZInput {
                     "tags": [],
                     "text": "max number value (optional): available for number"
                 },
-                "attribute": "max",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "max"
             },
             "maxlength": {
                 "type": "number",
@@ -762,8 +861,10 @@ export class ZInput {
                     "tags": [],
                     "text": "Max length value (optional): available for text"
                 },
-                "attribute": "maxlength",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "maxlength"
             },
             "step": {
                 "type": "number",
@@ -779,8 +880,10 @@ export class ZInput {
                     "tags": [],
                     "text": "step number value (optional): available for number"
                 },
-                "attribute": "step",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "step"
             },
             "pattern": {
                 "type": "string",
@@ -796,8 +899,10 @@ export class ZInput {
                     "tags": [],
                     "text": "pattern value (optional): available for tel, text, search, url, email, password"
                 },
-                "attribute": "pattern",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "pattern"
             },
             "size": {
                 "type": "string",
@@ -809,7 +914,8 @@ export class ZInput {
                         "ControlSize": {
                             "location": "import",
                             "path": "../../beans",
-                            "id": "src/beans/index.tsx::ControlSize"
+                            "id": "src/beans/index.tsx::ControlSize",
+                            "referenceLocation": "ControlSize"
                         }
                     }
                 },
@@ -819,8 +925,10 @@ export class ZInput {
                     "tags": [],
                     "text": "Available sizes: `big`, `small` and `x-small`. Defaults to `big`."
                 },
-                "attribute": "size",
+                "getter": false,
+                "setter": false,
                 "reflect": true,
+                "attribute": "size",
                 "defaultValue": "ControlSize.BIG"
             }
         };
@@ -956,4 +1064,3 @@ export class ZInput {
             }];
     }
 }
-//# sourceMappingURL=index.js.map