@scania/tegel 1.40.0-stencil-core-4.38.1-beta.0 → 1.40.0-ts-strict-mode-beta.0

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

@@ -9,39 +9,27 @@ import { getAriaInvalid } from "../../utils/getAriaInvalid";
 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 = '';
-        /** Placeholder text */
+        this.min = undefined;
+        this.max = undefined;
+        this.helper = undefined;
         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';
-        /** Autofocus for input */
+        this.maxLength = undefined;
         this.autofocus = false;
-        /** Makes the text field required */
+        this.tdsAriaLabel = undefined;
         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) {
@@ -67,7 +55,8 @@ export class TdsTextField {
     }
     /** Set the input as focus when clicking the whole Text Field with suffix/prefix */
     handleFocus(event) {
-        this.textInput.focus();
+        var _a;
+        (_a = this.textInput) === null || _a === void 0 ? void 0 : _a.focus();
         this.focusInput = true;
         this.tdsFocus.emit(event);
     }
@@ -86,7 +75,7 @@ export class TdsTextField {
         var _a;
         const usesPrefixSlot = hasSlot('prefix', this.host);
         const usesSuffixSlot = hasSlot('suffix', this.host);
-        return (h("div", { key: '3a072497874b410339fc3368f49b9048fdcc6641', class: {
+        return (h("div", { key: 'bcc403b4abba73fb457719e3205070f56d91c2cd', class: {
                 'form-text-field': true,
                 'form-text-field-nomin': this.noMinWidth,
                 'text-field-focus': this.focusInput && !this.disabled,
@@ -104,12 +93,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: '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: {
+            } }, this.labelPosition === 'outside' && (h("div", { key: '0133120eb1b74bb2244dd122afe1b2df7d54383b', class: "text-field-label-outside" }, h("label", { key: 'd1805d76b9ba9cd36bddbc546dd2081e4c891905', htmlFor: `text-field-input-element-${this.uuid}` }, this.label))), h("div", { key: '227c0581da20afcb1a55c2c3fc7f1458a0daf06f', onClick: () => { var _a; return (_a = this.textInput) === null || _a === void 0 ? void 0 : _a.focus(); }, class: "text-field-container" }, usesPrefixSlot && (h("div", { key: '913b945ec6d9898c22e3577ada5ce9782af3ec0a', 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: 'f397647f1458b1d132080cb15b92be60e2942459', name: "prefix" }))), h("div", { key: '33674576cce732cc66e7ca830669b7535aea7f00', class: "text-field-input-container" }, h("input", { key: 'a27eca3e8862b099475fd46c2182f86d7d110533', ref: (inputEl) => {
+            } }, h("slot", { key: 'ebaa7a7bb48ef059e013fe48f9aa4ca2677d9021', name: "prefix" }))), h("div", { key: 'f7cca070bf5a514b4bc75fbf14438609bdc1fd2f', class: "text-field-input-container" }, h("input", { key: '23ce48510d1b9516d7fffb7fd1b30b7a18bb5a4f', ref: (inputEl) => {
                 this.textInput = inputEl;
             }, class: {
                 'text-field-input': true,
@@ -124,13 +113,13 @@ export class TdsTextField {
                 if (!this.readOnly) {
                     this.handleBlur(event);
                 }
-            }, "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: {
+            }, "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: 'ee49db21967cb8eec227464fe6fbcb7e0e0c2531', class: "text-field-label-inside", htmlFor: `text-field-input-element-${this.uuid}` }, this.label))), usesSuffixSlot && (h("div", { key: '7c59f424bb444e58ec36650dadf56457ea58e12a', 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: '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: {
+            } }, h("slot", { key: 'b7e43d945a4b6c5769422635bc43ced38c535f14', name: "suffix" }))), this.readOnly && !this.hideReadOnlyIcon && (h("span", { key: 'f9981c3d95da264abc0a44d399b6d6686038f82d', class: "text-field-icon__readonly" }, h("tds-tooltip", { key: 'a72d52738bd5ad69025acae3b2adbda71f9131c4', placement: "top-end", text: "This field is non-editable", selector: "#readonly-tooltip" }), h("tds-icon", { key: 'cd407a27027ee56bb8cfa24a83871b63c637867a', id: "readonly-tooltip", name: "edit_inactive", size: "20px" })))), h("div", { key: '61dc2389d69774e47535a3c6a464353bf1db78b3', "aria-live": "assertive" }, (this.helper || this.maxLength > 0) && (h("div", { key: '1ddabddbcd537b04cd9fec9314ff5ea6ddfcd591', class: "text-field-helper", id: `text-field-helper-element-${this.uuid}` }, this.state === 'error' && (h("div", { key: 'ce671b297fa5f058162270bc931870df89c22daf', class: "text-field-helper-error-state" }, !this.readOnly && h("tds-icon", { key: '875cc35361dec4bb2b9ed33ef454e3ae670b0f62', name: "error", size: "16px" }), this.helper)), this.state !== 'error' && this.helper, !this.readOnly && this.maxLength > 0 && (h("span", { key: 'ea47b420f3d3ec1c08bb47c5b615e6727cd7a3ed', 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)))))));
@@ -163,10 +152,8 @@ export class TdsTextField {
                     "tags": [],
                     "text": "Which input type, text, password or similar"
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": true,
                 "attribute": "type",
+                "reflect": true,
                 "defaultValue": "'text'"
             },
             "labelPosition": {
@@ -183,10 +170,8 @@ export class TdsTextField {
                     "tags": [],
                     "text": "Position of the label for the Text Field."
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
                 "attribute": "label-position",
+                "reflect": false,
                 "defaultValue": "'no-label'"
             },
             "label": {
@@ -203,10 +188,8 @@ export class TdsTextField {
                     "tags": [],
                     "text": "Label text"
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
                 "attribute": "label",
+                "reflect": false,
                 "defaultValue": "''"
             },
             "min": {
@@ -223,10 +206,8 @@ export class TdsTextField {
                     "tags": [],
                     "text": "Min allowed value for input type number"
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "min"
+                "attribute": "min",
+                "reflect": false
             },
             "max": {
                 "type": "any",
@@ -242,10 +223,8 @@ export class TdsTextField {
                     "tags": [],
                     "text": "Max allowed value for input type number"
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "max"
+                "attribute": "max",
+                "reflect": false
             },
             "helper": {
                 "type": "string",
@@ -261,10 +240,8 @@ export class TdsTextField {
                     "tags": [],
                     "text": "Helper text"
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "helper"
+                "attribute": "helper",
+                "reflect": false
             },
             "placeholder": {
                 "type": "string",
@@ -280,10 +257,8 @@ export class TdsTextField {
                     "tags": [],
                     "text": "Placeholder text"
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
                 "attribute": "placeholder",
+                "reflect": false,
                 "defaultValue": "''"
             },
             "value": {
@@ -300,10 +275,8 @@ export class TdsTextField {
                     "tags": [],
                     "text": "Value of the input text"
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": true,
                 "attribute": "value",
+                "reflect": true,
                 "defaultValue": "''"
             },
             "disabled": {
@@ -320,10 +293,8 @@ export class TdsTextField {
                     "tags": [],
                     "text": "Set input in disabled state"
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
                 "attribute": "disabled",
+                "reflect": false,
                 "defaultValue": "false"
             },
             "readOnly": {
@@ -340,10 +311,8 @@ export class TdsTextField {
                     "tags": [],
                     "text": "Set input in readonly state"
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
                 "attribute": "read-only",
+                "reflect": false,
                 "defaultValue": "false"
             },
             "hideReadOnlyIcon": {
@@ -360,10 +329,8 @@ export class TdsTextField {
                     "tags": [],
                     "text": "Hides the read-only icon in the Text Field. Requires Read Only to be enabled."
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
                 "attribute": "hide-read-only-icon",
+                "reflect": false,
                 "defaultValue": "false"
             },
             "size": {
@@ -380,18 +347,16 @@ export class TdsTextField {
                     "tags": [],
                     "text": "Size of the input"
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
                 "attribute": "size",
+                "reflect": false,
                 "defaultValue": "'lg'"
             },
             "modeVariant": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "'primary' | 'secondary'",
-                    "resolved": "\"primary\" | \"secondary\"",
+                    "original": "'primary' | 'secondary' | null",
+                    "resolved": "\"primary\" | \"secondary\" | null",
                     "references": {}
                 },
                 "required": false,
@@ -400,10 +365,8 @@ export class TdsTextField {
                     "tags": [],
                     "text": "Mode variant of the Text Field"
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
                 "attribute": "mode-variant",
+                "reflect": false,
                 "defaultValue": "null"
             },
             "noMinWidth": {
@@ -420,10 +383,8 @@ export class TdsTextField {
                     "tags": [],
                     "text": "Unset minimum width of 208px."
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
                 "attribute": "no-min-width",
+                "reflect": false,
                 "defaultValue": "false"
             },
             "name": {
@@ -440,10 +401,8 @@ export class TdsTextField {
                     "tags": [],
                     "text": "Name property"
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
                 "attribute": "name",
+                "reflect": false,
                 "defaultValue": "''"
             },
             "state": {
@@ -460,10 +419,8 @@ export class TdsTextField {
                     "tags": [],
                     "text": "Error state of input"
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
                 "attribute": "state",
+                "reflect": false,
                 "defaultValue": "'default'"
             },
             "maxLength": {
@@ -480,10 +437,8 @@ export class TdsTextField {
                     "tags": [],
                     "text": "Max length of input"
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "max-length"
+                "attribute": "max-length",
+                "reflect": false
             },
             "autofocus": {
                 "type": "boolean",
@@ -499,10 +454,8 @@ export class TdsTextField {
                     "tags": [],
                     "text": "Autofocus for input"
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
                 "attribute": "autofocus",
+                "reflect": false,
                 "defaultValue": "false"
             },
             "tdsAriaLabel": {
@@ -519,10 +472,8 @@ 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."
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "tds-aria-label"
+                "attribute": "tds-aria-label",
+                "reflect": false
             },
             "required": {
                 "type": "boolean",
@@ -538,10 +489,8 @@ export class TdsTextField {
                     "tags": [],
                     "text": "Makes the text field required"
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
                 "attribute": "required",
+                "reflect": false,
                 "defaultValue": "false"
             },
             "autocomplete": {
@@ -558,10 +507,8 @@ export class TdsTextField {
                     "tags": [],
                     "text": "Value to be used for the text field's autocomplete attribute"
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
                 "attribute": "autocomplete",
+                "reflect": false,
                 "defaultValue": "'off'"
             }
         };

package/dist/collection/components/textarea/textarea.js

@@ -4,30 +4,24 @@ import { getAriaInvalid } from "../../utils/getAriaInvalid";
 export class TdsTextarea {
     constructor() {
         this.uuid = generateUniqueId();
-        /** Label text */
         this.label = '';
-        /** Name attribute */
         this.name = '';
-        /** Position of the label for the Textarea. */
+        this.helper = undefined;
+        this.cols = undefined;
+        this.rows = undefined;
         this.labelPosition = 'no-label';
-        /** 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;
-        /** Hide the readonly icon */
         this.hideReadOnlyIcon = false;
-        /** Error state of input */
         this.state = 'default';
-        /** Mode variant of the Textarea */
+        this.maxLength = undefined;
         this.modeVariant = null;
-        /** Control of autofocus */
         this.autofocus = false;
-        /** Unset minimum width of 208px. */
         this.noMinWidth = false;
+        this.tdsAriaLabel = undefined;
+        this.focusInput = undefined;
     }
     handleChange(event) {
         this.tdsChange.emit(event);
@@ -45,7 +39,8 @@ export class TdsTextarea {
     }
     /* Set the input as focus when clicking the whole textarea with suffix/prefix */
     handleFocus(event) {
-        this.textEl.focus();
+        var _a;
+        (_a = this.textEl) === null || _a === void 0 ? void 0 : _a.focus();
         this.focusInput = true;
         this.tdsFocus.emit(event);
     }
@@ -67,7 +62,7 @@ export class TdsTextarea {
     }
     render() {
         var _a;
-        return (h("div", { key: '0e1e8c392e63be0a7e1724f3351e4859eb6501a7', class: {
+        return (h("div", { key: 'ab345d2f34e48367b2040556b9b3a6564add939d', class: {
                 'textarea-container': true,
                 'textarea-label-inside': this.labelPosition === 'inside',
                 'textarea-focus': this.focusInput,
@@ -77,7 +72,7 @@ export class TdsTextarea {
                 'textarea-data': this.value !== '',
                 [`textarea-${this.state}`]: this.state === 'error' || this.state === 'success',
                 'no-min-width': this.noMinWidth,
-            } }, this.labelPosition !== 'no-label' && (h("label", { key: '674206c9897b2e6f8ed4742e4bf4b9db5740a302', htmlFor: `textarea-element-${this.uuid}`, class: 'textarea-label' }, this.label)), h("div", { key: '808b87787dbdb3386bdf528051eb7ab991259e30', class: "textarea-wrapper" }, h("textarea", { key: 'bb9871a2b0f4d88ac150fb8b550c2d5001b9cc2d', id: `textarea-element-${this.uuid}`, class: 'textarea-input', ref: (inputEl) => {
+            } }, this.labelPosition !== 'no-label' && (h("label", { key: 'c8290eb384aff2b8a8d7c2495b69167066e76415', htmlFor: `textarea-element-${this.uuid}`, class: 'textarea-label' }, this.label)), h("div", { key: '43cd7476de0402a1aab5eaf2d930678422aaf40e', class: "textarea-wrapper" }, h("textarea", { key: '265bd91d6cb4ca7009d0bc60f3db15c0e6bb47bc', id: `textarea-element-${this.uuid}`, class: 'textarea-input', ref: (inputEl) => {
                 this.textEl = inputEl;
             }, disabled: this.disabled, readonly: !this.disabled && this.readOnly, placeholder: this.placeholder, value: this.value, name: this.name, autofocus: this.autofocus, maxlength: this.maxLength, cols: this.cols, rows: this.rows, onFocus: (event) => {
                 if (!this.readOnly) {
@@ -87,7 +82,7 @@ export class TdsTextarea {
                 if (!this.readOnly) {
                     this.handleBlur(event);
                 }
-            }, onInput: (event) => this.handleInput(event), onChange: (event) => this.handleChange(event), "aria-invalid": getAriaInvalid(this.host, this.state), "aria-readonly": this.readOnly ? 'true' : 'false', "aria-label": this.tdsAriaLabel ? this.tdsAriaLabel : this.label, "aria-describedby": `textarea-helper-element-${this.uuid}` }), h("span", { key: 'f9fc9c3136ec57b6f0becd8602c6353f0c8848dd', class: "textarea-resizer-icon" }, h("svg", { key: '8b7f6fe75e111c7d4de27a1a6d30c430cd136753', width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: 'f5857808dfc21333fc8d95c38c0a8e69823a6229', "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M11.8536 0.853553C12.0488 0.658291 12.0488 0.341709 11.8536 0.146447C11.6583 -0.0488155 11.3417 -0.0488155 11.1464 0.146447L0.146447 11.1464C-0.0488155 11.3417 -0.0488155 11.6583 0.146447 11.8536C0.341709 12.0488 0.658291 12.0488 0.853553 11.8536L11.8536 0.853553ZM11.8536 4.64645C12.0488 4.84171 12.0488 5.15829 11.8536 5.35355L5.35355 11.8536C5.15829 12.0488 4.84171 12.0488 4.64645 11.8536C4.45118 11.6583 4.45118 11.3417 4.64645 11.1464L11.1464 4.64645C11.3417 4.45118 11.6583 4.45118 11.8536 4.64645ZM11.8536 8.64645C12.0488 8.84171 12.0488 9.15829 11.8536 9.35355L9.35355 11.8536C9.15829 12.0488 8.84171 12.0488 8.64645 11.8536C8.45118 11.6583 8.45118 11.3417 8.64645 11.1464L11.1464 8.64645C11.3417 8.45118 11.6583 8.45118 11.8536 8.64645Z", fill: "currentColor" }))), !this.disabled && !this.hideReadOnlyIcon && this.readOnly && (h("span", { key: 'df897e9b418dc4b7a2fefc152f0f850278695211', class: "textarea-icon__readonly" }, h("tds-tooltip", { key: 'd350ce47947ccd11fea39f06b5ae6e7cdba84ca9', placement: "top-end", text: "This field is non-editable", selector: "#readonly-tooltip" }), h("tds-icon", { key: '327fd5153c188dcc171d6cbed2727716148157b1', id: "readonly-tooltip", name: "edit_inactive", svgTitle: "inactive" })))), h("span", { key: '5625f2580ce1724b5462e00c8024fb7b9c3f3107', class: 'textarea-helper', "aria-live": "assertive", id: `textarea-helper-element-${this.uuid}` }, this.state === 'error' && this.helper && !this.readOnly && (h("tds-icon", { key: '2873a82b45675d1e09a07de357386b0ea83ed054', name: "error", size: "16px" })), this.helper), this.maxLength > 0 && (h("div", { key: '0a54c37e440f4740e373943bfd48001e8f8f39e6', class: 'textarea-textcounter' }, this.value === null ? 0 : (_a = this.value) === null || _a === void 0 ? void 0 : _a.length, h("span", { key: '53f25f455440e8383bd1dabba20cce266fe78074', class: "textfield-textcounter-divider" }, " / "), " ", this.maxLength))));
+            }, onInput: (event) => this.handleInput(event), onChange: (event) => this.handleChange(event), "aria-invalid": getAriaInvalid(this.host, this.state), "aria-readonly": this.readOnly ? 'true' : 'false', "aria-label": this.tdsAriaLabel ? this.tdsAriaLabel : this.label, "aria-describedby": `textarea-helper-element-${this.uuid}` }), h("span", { key: '682632eb45587ee86e48fa7dd42946d97db7da13', class: "textarea-resizer-icon" }, h("svg", { key: '7631ef268be5ec867452ba449f769e45c099d574', width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: 'ba27459f776dc0d6a6d0570420e4610ee08d6b9e', "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M11.8536 0.853553C12.0488 0.658291 12.0488 0.341709 11.8536 0.146447C11.6583 -0.0488155 11.3417 -0.0488155 11.1464 0.146447L0.146447 11.1464C-0.0488155 11.3417 -0.0488155 11.6583 0.146447 11.8536C0.341709 12.0488 0.658291 12.0488 0.853553 11.8536L11.8536 0.853553ZM11.8536 4.64645C12.0488 4.84171 12.0488 5.15829 11.8536 5.35355L5.35355 11.8536C5.15829 12.0488 4.84171 12.0488 4.64645 11.8536C4.45118 11.6583 4.45118 11.3417 4.64645 11.1464L11.1464 4.64645C11.3417 4.45118 11.6583 4.45118 11.8536 4.64645ZM11.8536 8.64645C12.0488 8.84171 12.0488 9.15829 11.8536 9.35355L9.35355 11.8536C9.15829 12.0488 8.84171 12.0488 8.64645 11.8536C8.45118 11.6583 8.45118 11.3417 8.64645 11.1464L11.1464 8.64645C11.3417 8.45118 11.6583 8.45118 11.8536 8.64645Z", fill: "currentColor" }))), !this.disabled && !this.hideReadOnlyIcon && this.readOnly && (h("span", { key: '34f0c79ee333e2e0b0e27dc63d4be1e93b7fc6e4', class: "textarea-icon__readonly" }, h("tds-tooltip", { key: '0aa6ad6c681f5abe6ba19a28f80125d002543fc4', placement: "top-end", text: "This field is non-editable", selector: "#readonly-tooltip" }), h("tds-icon", { key: '780fe72cff253212d79820c29a701258c55da508', id: "readonly-tooltip", name: "edit_inactive", svgTitle: "inactive" })))), h("span", { key: '657766f8f89e07aaac65daece6fc1162b925986a', class: 'textarea-helper', "aria-live": "assertive", id: `textarea-helper-element-${this.uuid}` }, this.state === 'error' && this.helper && !this.readOnly && (h("tds-icon", { key: 'ce5e472fb172d53cb45e9dab4c317fb38dbd05eb', name: "error", size: "16px" })), this.helper), this.maxLength > 0 && (h("div", { key: '919a5471cfad225cefe6c30e88f782cdfc913b2f', class: 'textarea-textcounter' }, this.value === null ? 0 : (_a = this.value) === null || _a === void 0 ? void 0 : _a.length, h("span", { key: '338ef9cdac06151d4fd092208764e3812c2d4f01', class: "textfield-textcounter-divider" }, " / "), " ", this.maxLength))));
     }
     static get is() { return "tds-textarea"; }
     static get encapsulation() { return "scoped"; }
@@ -117,10 +112,8 @@ export class TdsTextarea {
                     "tags": [],
                     "text": "Label text"
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
                 "attribute": "label",
+                "reflect": false,
                 "defaultValue": "''"
             },
             "name": {
@@ -137,10 +130,8 @@ export class TdsTextarea {
                     "tags": [],
                     "text": "Name attribute"
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
                 "attribute": "name",
+                "reflect": false,
                 "defaultValue": "''"
             },
             "helper": {
@@ -157,10 +148,8 @@ export class TdsTextarea {
                     "tags": [],
                     "text": "Helper text"
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "helper"
+                "attribute": "helper",
+                "reflect": false
             },
             "cols": {
                 "type": "number",
@@ -176,10 +165,8 @@ export class TdsTextarea {
                     "tags": [],
                     "text": "Textarea cols attribute"
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "cols"
+                "attribute": "cols",
+                "reflect": false
             },
             "rows": {
                 "type": "number",
@@ -195,10 +182,8 @@ export class TdsTextarea {
                     "tags": [],
                     "text": "Textarea rows attribute"
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "rows"
+                "attribute": "rows",
+                "reflect": false
             },
             "labelPosition": {
                 "type": "string",
@@ -214,10 +199,8 @@ export class TdsTextarea {
                     "tags": [],
                     "text": "Position of the label for the Textarea."
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
                 "attribute": "label-position",
+                "reflect": false,
                 "defaultValue": "'no-label'"
             },
             "placeholder": {
@@ -234,10 +217,8 @@ export class TdsTextarea {
                     "tags": [],
                     "text": "Placeholder text"
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
                 "attribute": "placeholder",
+                "reflect": false,
                 "defaultValue": "''"
             },
             "value": {
@@ -254,10 +235,8 @@ export class TdsTextarea {
                     "tags": [],
                     "text": "Value of the input text"
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
                 "attribute": "value",
+                "reflect": false,
                 "defaultValue": "''"
             },
             "disabled": {
@@ -274,10 +253,8 @@ export class TdsTextarea {
                     "tags": [],
                     "text": "Set input in disabled state"
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
                 "attribute": "disabled",
+                "reflect": false,
                 "defaultValue": "false"
             },
             "readOnly": {
@@ -294,10 +271,8 @@ export class TdsTextarea {
                     "tags": [],
                     "text": "Set input in readonly state"
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
                 "attribute": "read-only",
+                "reflect": false,
                 "defaultValue": "false"
             },
             "hideReadOnlyIcon": {
@@ -314,10 +289,8 @@ export class TdsTextarea {
                     "tags": [],
                     "text": "Hide the readonly icon"
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
                 "attribute": "hide-read-only-icon",
+                "reflect": false,
                 "defaultValue": "false"
             },
             "state": {
@@ -334,10 +307,8 @@ export class TdsTextarea {
                     "tags": [],
                     "text": "Error state of input"
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
                 "attribute": "state",
+                "reflect": false,
                 "defaultValue": "'default'"
             },
             "maxLength": {
@@ -354,17 +325,15 @@ export class TdsTextarea {
                     "tags": [],
                     "text": "Max length of input"
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "max-length"
+                "attribute": "max-length",
+                "reflect": false
             },
             "modeVariant": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "'primary' | 'secondary'",
-                    "resolved": "\"primary\" | \"secondary\"",
+                    "original": "'primary' | 'secondary' | null",
+                    "resolved": "\"primary\" | \"secondary\" | null",
                     "references": {}
                 },
                 "required": false,
@@ -373,10 +342,8 @@ export class TdsTextarea {
                     "tags": [],
                     "text": "Mode variant of the Textarea"
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
                 "attribute": "mode-variant",
+                "reflect": false,
                 "defaultValue": "null"
             },
             "autofocus": {
@@ -393,10 +360,8 @@ export class TdsTextarea {
                     "tags": [],
                     "text": "Control of autofocus"
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
                 "attribute": "autofocus",
+                "reflect": false,
                 "defaultValue": "false"
             },
             "noMinWidth": {
@@ -413,10 +378,8 @@ export class TdsTextarea {
                     "tags": [],
                     "text": "Unset minimum width of 208px."
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
                 "attribute": "no-min-width",
+                "reflect": false,
                 "defaultValue": "false"
             },
             "tdsAriaLabel": {
@@ -433,10 +396,8 @@ export class TdsTextarea {
                     "tags": [],
                     "text": "Value to be used for the aria-label attribute. Can be used for announcing that readOnly prop is set to true."
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "tds-aria-label"
+                "attribute": "tds-aria-label",
+                "reflect": false
             }
         };
     }