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

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;
@@ -154,6 +148,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 } : {};
@@ -161,7 +161,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 {
@@ -215,13 +219,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) {
@@ -261,18 +266,18 @@ export class ZInput {
             default:
                 input = this.renderInputText(this.type);
         }
-        return h(Host, { key: '12e6993a9f2e94db2300ccce3df5b839db56b09b' }, input);
+        return h(Host, { key: '0b363c20732600ca303b84a78e36bdc710c411e2' }, 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 +296,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 +312,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 +323,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 +342,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 +361,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 +380,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 +400,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 +420,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 +439,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 +458,10 @@ 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"
             },
             "value": {
                 "type": "string",
@@ -453,8 +477,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 +496,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 +516,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 +536,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 +556,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 +576,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 +595,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 +610,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 +621,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,10 +640,31 @@ 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"
             },
+            "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"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "html-aria-described-by"
+            },
             "labelPosition": {
                 "type": "string",
                 "mutable": false,
@@ -613,7 +675,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 +686,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 +706,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 +725,10 @@ export class ZInput {
                     "tags": [],
                     "text": "the input role"
                 },
-                "attribute": "role",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "role",
                 "defaultValue": "\"\""
             },
             "hasclearicon": {
@@ -676,8 +745,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 +765,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 +784,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 +803,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 +822,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 +841,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 +860,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 +879,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 +894,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 +905,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 +1044,3 @@ export class ZInput {
             }];
     }
 }
-//# sourceMappingURL=index.js.map

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

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