@scania/tegel 1.38.0 → 1.40.0-stencil-core-4.38.1-beta.0

package/dist/collection/components/text-field/text-field.js

@@ -1,6 +1,7 @@
 import { h } from "@stencil/core";
 import hasSlot from "../../utils/hasSlot";
 import generateUniqueId from "../../utils/generateUniqueId";
+import { getAriaInvalid } from "../../utils/getAriaInvalid";
 /**
  * @slot prefix - Slot for the prefix in the component.
  * @slot suffix - Slot for the suffix in the component. Suffix is hidden when the input is in readonly state.
@@ -8,25 +9,39 @@ import generateUniqueId from "../../utils/generateUniqueId";
 export class TdsTextField {
     constructor() {
         this.uuid = generateUniqueId();
+        /** Which input type, text, password or similar */
         this.type = 'text';
+        /** Position of the label for the Text Field. */
         this.labelPosition = 'no-label';
+        /** Label text */
         this.label = '';
-        this.min = undefined;
-        this.max = undefined;
-        this.helper = undefined;
+        /** Placeholder text */
         this.placeholder = '';
+        /** Value of the input text */
         this.value = '';
+        /** Set input in disabled state */
         this.disabled = false;
+        /** Set input in readonly state */
         this.readOnly = false;
+        /** Hides the read-only icon in the Text Field. Requires Read Only to be enabled. */
         this.hideReadOnlyIcon = false;
+        /** Size of the input */
         this.size = 'lg';
+        /** Mode variant of the Text Field */
         this.modeVariant = null;
+        /** Unset minimum width of 208px. */
         this.noMinWidth = false;
+        /** Name property */
         this.name = '';
+        /** Error state of input */
         this.state = 'default';
-        this.maxLength = undefined;
+        /** Autofocus for input */
         this.autofocus = false;
-        this.tdsAriaLabel = undefined;
+        /** Makes the text field required */
+        this.required = false;
+        /** Value to be used for the text field's autocomplete attribute */
+        this.autocomplete = 'off';
+        /** Listen to the focus state of the input */
         this.focusInput = false;
     }
     handleChange(event) {
@@ -71,7 +86,7 @@ export class TdsTextField {
         var _a;
         const usesPrefixSlot = hasSlot('prefix', this.host);
         const usesSuffixSlot = hasSlot('suffix', this.host);
-        return (h("div", { key: 'b9fa2b03ce2a0b196dc6083614420d6f83675e3d', class: {
+        return (h("div", { key: '3a072497874b410339fc3368f49b9048fdcc6641', class: {
                 'form-text-field': true,
                 'form-text-field-nomin': this.noMinWidth,
                 'text-field-focus': this.focusInput && !this.disabled,
@@ -89,12 +104,12 @@ export class TdsTextField {
                 'form-text-field-sm': this.size === 'sm',
                 'form-text-field-error': this.state === 'error',
                 'form-text-field-success': this.state === 'success',
-            } }, this.labelPosition === 'outside' && (h("div", { key: '7110b867aba9a9ba62b796f67caeccf22a4a8060', class: "text-field-label-outside" }, h("label", { key: '6b0b6c7d17bb236f1203dfaf793ba0a3bc2d8efb', htmlFor: `text-field-input-element-${this.uuid}` }, this.label))), h("div", { key: '5603d3e78b290a78d7c482a0dac7e1f0efb9af7f', onClick: () => this.textInput.focus(), class: "text-field-container" }, usesPrefixSlot && (h("div", { key: '9accb59dffa061d7947d4392310cb1717a395363', class: {
+            } }, this.labelPosition === 'outside' && (h("div", { key: '190b617811d0993b85b3df6951a41678bc51879e', class: "text-field-label-outside" }, h("label", { key: '6e5099cc43259b790d83d3f127e85463e58c9ac2', htmlFor: `text-field-input-element-${this.uuid}` }, this.label))), h("div", { key: 'd5064e04015238d38a70b09c9eba4cbbb1da19cb', onClick: () => this.textInput.focus(), class: "text-field-container" }, usesPrefixSlot && (h("div", { key: '69af0c24b21e3edda262749538cc9775c501e115', class: {
                 'text-field-slot-wrap-prefix': true,
                 'text-field-error': this.state === 'error',
                 'text-field-success': this.state === 'success',
                 'text-field-default': this.state === 'default',
-            } }, h("slot", { key: '739e089cdb9798dc108b68c4858c90bf75e18958', name: "prefix" }))), h("div", { key: 'e4229be4e4bf421319184e798b98afcbaa361413', class: "text-field-input-container" }, h("input", { key: 'f462b4c0d49e4e070090f6a14df52af66b87648d', ref: (inputEl) => {
+            } }, h("slot", { key: 'f397647f1458b1d132080cb15b92be60e2942459', name: "prefix" }))), h("div", { key: '33674576cce732cc66e7ca830669b7535aea7f00', class: "text-field-input-container" }, h("input", { key: 'a27eca3e8862b099475fd46c2182f86d7d110533', ref: (inputEl) => {
                 this.textInput = inputEl;
             }, class: {
                 'text-field-input': true,
@@ -109,13 +124,13 @@ export class TdsTextField {
                 if (!this.readOnly) {
                     this.handleBlur(event);
                 }
-            }, "aria-label": this.tdsAriaLabel ? this.tdsAriaLabel : this.label, "aria-describedby": `text-field-helper-element-${this.uuid}`, "aria-readonly": this.readOnly, id: `text-field-input-element-${this.uuid}` }), this.labelPosition === 'inside' && this.size !== 'sm' && (h("label", { key: 'ac16cff7856d65503fa30f7eb23d2936377e72d4', class: "text-field-label-inside", htmlFor: `text-field-input-element-${this.uuid}` }, this.label))), usesSuffixSlot && (h("div", { key: 'b70453ec36ca62f584b26b0e6dc4b3f0cde2ff54', class: {
+            }, "aria-invalid": getAriaInvalid(this.host, this.state), "aria-label": this.tdsAriaLabel ? this.tdsAriaLabel : this.label, "aria-describedby": `text-field-helper-element-${this.uuid}`, "aria-readonly": this.readOnly, id: `text-field-input-element-${this.uuid}`, required: this.required, autocomplete: this.autocomplete }), this.labelPosition === 'inside' && this.size !== 'sm' && (h("label", { key: '7671a287273c976a1ad73032020838d6c4cedab0', class: "text-field-label-inside", htmlFor: `text-field-input-element-${this.uuid}` }, this.label))), usesSuffixSlot && (h("div", { key: '19a93786e8647aa1d2e5b9a9b80c71c250330d8d', class: {
                 'text-field-slot-wrap-suffix': true,
                 'text-field-error': this.state === 'error',
                 'text-field-success': this.state === 'success',
                 'text-field-default': this.state === 'default',
                 'tds-u-display-none': this.readOnly,
-            } }, h("slot", { key: '7e50b20d90a68f9af583b8f2ade5c742e2d52351', name: "suffix" }))), this.readOnly && !this.hideReadOnlyIcon && (h("span", { key: '72e2cf4f2872d247ac6f28e935e8185aafef6dec', class: "text-field-icon__readonly" }, h("tds-tooltip", { key: '171bdde8535c6bbd08eec60d87d9aa5bae1f98bd', placement: "top-end", text: "This field is non-editable", selector: "#readonly-tooltip" }), h("tds-icon", { key: '05e7e8898ee3fcf81fb011aa2141092e8b749e37', id: "readonly-tooltip", name: "edit_inactive", size: "20px" })))), h("div", { key: '0c16d399b376d9aebed2aabf759cb7319c5745cf', "aria-live": "assertive" }, (this.helper || this.maxLength > 0) && (h("div", { key: '280eed9185c8cffa29e3cf62425f1f1f377f3abc', class: "text-field-helper", id: `text-field-helper-element-${this.uuid}` }, this.state === 'error' && (h("div", { key: 'ddf07e469173a574a848cd2ff816bcc535940340', class: "text-field-helper-error-state" }, !this.readOnly && h("tds-icon", { key: 'b5b06dba13fb8911828153341b631facfc016c88', name: "error", size: "16px" }), this.helper)), this.state !== 'error' && this.helper, !this.readOnly && this.maxLength > 0 && (h("span", { key: 'a4c41817f19b32e575423d5bbe19c28a38031e6e', class: {
+            } }, h("slot", { key: 'dd76e5bb941bc791caa395206be040319e00a708', name: "suffix" }))), this.readOnly && !this.hideReadOnlyIcon && (h("span", { key: '2ba57774f40412b9a337ef7bf47ce65bcf44a704', class: "text-field-icon__readonly" }, h("tds-tooltip", { key: 'bfb0f704470e77f9ce6e11fe3d01af3dd8569015', placement: "top-end", text: "This field is non-editable", selector: "#readonly-tooltip" }), h("tds-icon", { key: '28ded9080cb2abfe6a06b284af3807584f4dda02', id: "readonly-tooltip", name: "edit_inactive", size: "20px" })))), h("div", { key: '636205c9e69b3a2602ea0b8817a585e5cd4e16b2', "aria-live": "assertive" }, (this.helper || this.maxLength > 0) && (h("div", { key: '4ece49df31864f53d0fadc3709cd06d34da6830a', class: "text-field-helper", id: `text-field-helper-element-${this.uuid}` }, this.state === 'error' && (h("div", { key: 'ba1e7f916ebbfa6775b46febed47e4bf55af9fd3', class: "text-field-helper-error-state" }, !this.readOnly && h("tds-icon", { key: '45eb885352b32dd3483a1c01f4dbaa49fcfda8ba', name: "error", size: "16px" }), this.helper)), this.state !== 'error' && this.helper, !this.readOnly && this.maxLength > 0 && (h("span", { key: '9934f078456a0af683b0d1f8a997c5484e58868c', class: {
                 'text-field-textcounter-divider': true,
                 'text-field-textcounter-disabled': this.disabled,
             } }, this.value === null ? 0 : (_a = this.value) === null || _a === void 0 ? void 0 : _a.length, " / ", this.maxLength)))))));
@@ -138,8 +153,8 @@ export class TdsTextField {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "'text' | 'password' | 'number'",
-                    "resolved": "\"number\" | \"password\" | \"text\"",
+                    "original": "'text' | 'password' | 'number' | 'email' | 'tel'",
+                    "resolved": "\"email\" | \"number\" | \"password\" | \"tel\" | \"text\"",
                     "references": {}
                 },
                 "required": false,
@@ -148,8 +163,10 @@ export class TdsTextField {
                     "tags": [],
                     "text": "Which input type, text, password or similar"
                 },
-                "attribute": "type",
+                "getter": false,
+                "setter": false,
                 "reflect": true,
+                "attribute": "type",
                 "defaultValue": "'text'"
             },
             "labelPosition": {
@@ -166,8 +183,10 @@ export class TdsTextField {
                     "tags": [],
                     "text": "Position of the label for the Text Field."
                 },
-                "attribute": "label-position",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "label-position",
                 "defaultValue": "'no-label'"
             },
             "label": {
@@ -184,8 +203,10 @@ export class TdsTextField {
                     "tags": [],
                     "text": "Label text"
                 },
-                "attribute": "label",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "label",
                 "defaultValue": "''"
             },
             "min": {
@@ -202,8 +223,10 @@ export class TdsTextField {
                     "tags": [],
                     "text": "Min allowed value for input type number"
                 },
-                "attribute": "min",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "min"
             },
             "max": {
                 "type": "any",
@@ -219,8 +242,10 @@ export class TdsTextField {
                     "tags": [],
                     "text": "Max allowed value for input type number"
                 },
-                "attribute": "max",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "max"
             },
             "helper": {
                 "type": "string",
@@ -236,8 +261,10 @@ export class TdsTextField {
                     "tags": [],
                     "text": "Helper text"
                 },
-                "attribute": "helper",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "helper"
             },
             "placeholder": {
                 "type": "string",
@@ -253,8 +280,10 @@ export class TdsTextField {
                     "tags": [],
                     "text": "Placeholder text"
                 },
-                "attribute": "placeholder",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "placeholder",
                 "defaultValue": "''"
             },
             "value": {
@@ -271,8 +300,10 @@ export class TdsTextField {
                     "tags": [],
                     "text": "Value of the input text"
                 },
-                "attribute": "value",
+                "getter": false,
+                "setter": false,
                 "reflect": true,
+                "attribute": "value",
                 "defaultValue": "''"
             },
             "disabled": {
@@ -289,8 +320,10 @@ export class TdsTextField {
                     "tags": [],
                     "text": "Set input in disabled state"
                 },
-                "attribute": "disabled",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "disabled",
                 "defaultValue": "false"
             },
             "readOnly": {
@@ -307,8 +340,10 @@ export class TdsTextField {
                     "tags": [],
                     "text": "Set input in readonly state"
                 },
-                "attribute": "read-only",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "read-only",
                 "defaultValue": "false"
             },
             "hideReadOnlyIcon": {
@@ -325,8 +360,10 @@ export class TdsTextField {
                     "tags": [],
                     "text": "Hides the read-only icon in the Text Field. Requires Read Only to be enabled."
                 },
-                "attribute": "hide-read-only-icon",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "hide-read-only-icon",
                 "defaultValue": "false"
             },
             "size": {
@@ -343,8 +380,10 @@ export class TdsTextField {
                     "tags": [],
                     "text": "Size of the input"
                 },
-                "attribute": "size",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "size",
                 "defaultValue": "'lg'"
             },
             "modeVariant": {
@@ -361,8 +400,10 @@ export class TdsTextField {
                     "tags": [],
                     "text": "Mode variant of the Text Field"
                 },
-                "attribute": "mode-variant",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "mode-variant",
                 "defaultValue": "null"
             },
             "noMinWidth": {
@@ -379,8 +420,10 @@ export class TdsTextField {
                     "tags": [],
                     "text": "Unset minimum width of 208px."
                 },
-                "attribute": "no-min-width",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "no-min-width",
                 "defaultValue": "false"
             },
             "name": {
@@ -397,8 +440,10 @@ export class TdsTextField {
                     "tags": [],
                     "text": "Name property"
                 },
-                "attribute": "name",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "name",
                 "defaultValue": "''"
             },
             "state": {
@@ -415,8 +460,10 @@ export class TdsTextField {
                     "tags": [],
                     "text": "Error state of input"
                 },
-                "attribute": "state",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "state",
                 "defaultValue": "'default'"
             },
             "maxLength": {
@@ -433,8 +480,10 @@ export class TdsTextField {
                     "tags": [],
                     "text": "Max length of input"
                 },
-                "attribute": "max-length",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "max-length"
             },
             "autofocus": {
                 "type": "boolean",
@@ -450,8 +499,10 @@ export class TdsTextField {
                     "tags": [],
                     "text": "Autofocus for input"
                 },
-                "attribute": "autofocus",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "autofocus",
                 "defaultValue": "false"
             },
             "tdsAriaLabel": {
@@ -468,8 +519,50 @@ export class TdsTextField {
                     "tags": [],
                     "text": "Value to be used for the aria-label attribute. Can be used for announcing that readOnly prop is set to true."
                 },
-                "attribute": "tds-aria-label",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "tds-aria-label"
+            },
+            "required": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Makes the text field required"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "required",
+                "defaultValue": "false"
+            },
+            "autocomplete": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Value to be used for the text field's autocomplete attribute"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "autocomplete",
+                "defaultValue": "'off'"
             }
         };
     }