npm - @scania/tegel - Versions diffs - 1.42.0 → 1.44.0-sonarcloud-0 - Mend

@scania/tegel 1.42.0 → 1.44.0-sonarcloud-0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (499) hide show

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

@@ -14,6 +14,7 @@ export class TdsTextField {
         this.label = '';
         this.min = undefined;
         this.max = undefined;
+        this.step = undefined;
         this.helper = undefined;
         this.placeholder = '';
         this.value = '';
@@ -30,38 +31,61 @@ export class TdsTextField {
         this.tdsAriaLabel = undefined;
         this.required = false;
         this.autocomplete = 'off';
+        this.hideNumberArrows = false;
         this.focusInput = false;
     }
     handleChange(event) {
         this.tdsChange.emit(event);
     }
-    // Data input event in value prop
+    /** Data input event in value prop */
     handleInput(event) {
         const inputEl = event.target;
-        let { value } = inputEl;
-        // Custom handling of number inputs when min/max are set
-        if (this.type === 'number') {
-            const numericValue = Number(value);
-            if (this.min !== undefined && numericValue < Number(this.min)) {
-                value = String(this.min);
-            }
-            if (this.max !== undefined && numericValue > Number(this.max)) {
-                value = String(this.max);
-            }
-            inputEl.value = value;
-        }
+        const { value } = inputEl;
         this.value = value;
         this.tdsInput.emit(event);
     }
     /** 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);
     }
     /** Set the input as focus when clicking the whole Text Field with suffix/prefix */
     handleBlur(event) {
         this.focusInput = false;
+        /** Custom handling of number inputs when min/max are set */
+        if (this.type === 'number' && this.textInput) {
+            const numericValue = this.textInput.valueAsNumber;
+            const minNum = this.min !== undefined ? Number(this.min) : undefined;
+            const maxNum = this.max !== undefined ? Number(this.max) : undefined;
+            if (minNum !== undefined && maxNum !== undefined && minNum > maxNum) {
+                console.warn('tds-text-field: min value is greater than max value');
+                return;
+            }
+            if (!isNaN(numericValue)) {
+                const originalValue = this.textInput.value;
+                let clampedValue = originalValue;
+                let clampReason = null;
+                if (minNum !== undefined && numericValue < minNum) {
+                    clampedValue = String(this.min);
+                    clampReason = 'min';
+                }
+                if (maxNum !== undefined && numericValue > maxNum) {
+                    clampedValue = String(this.max);
+                    clampReason = 'max';
+                }
+                if (clampedValue !== originalValue && clampReason) {
+                    this.textInput.value = clampedValue;
+                    this.value = clampedValue;
+                    this.tdsError.emit({
+                        originalValue,
+                        clampedValue,
+                        reason: clampReason,
+                    });
+                }
+            }
+        }
         this.tdsBlur.emit(event);
     }
     /** Method to handle focus */
@@ -71,10 +95,10 @@ export class TdsTextField {
         }
     }
     render() {
-        var _a;
+        var _a, _b, _c, _d;
         const usesPrefixSlot = hasSlot('prefix', this.host);
         const usesSuffixSlot = hasSlot('suffix', this.host);
-        return (h("div", { key: '3a072497874b410339fc3368f49b9048fdcc6641', class: {
+        return (h("div", { key: '362cc8ca714fab4d75f8b594494413ce8b9ce210', class: {
                 'form-text-field': true,
                 'form-text-field-nomin': this.noMinWidth,
                 'text-field-focus': this.focusInput && !this.disabled,
@@ -92,19 +116,20 @@ 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: 'ace1a48203813254c9d316b78723bb89d4aa5f06', class: "text-field-label-outside" }, h("label", { key: '3fd1cab7e1862cd718d3e54ae5ff89b227e53419', htmlFor: `text-field-input-element-${this.uuid}` }, this.label))), h("div", { key: '6250d6c3318b7ce36156304e8e7d780f91a3821e', onClick: () => { var _a; return (_a = this.textInput) === null || _a === void 0 ? void 0 : _a.focus(); }, class: "text-field-container" }, usesPrefixSlot && (h("div", { key: 'a891ed40d4d99129f126054fd79ce6c12d60b7f4', 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: '12ba7d529a5b5402f55d232697fd7db6a9efcfa2', name: "prefix" }))), h("div", { key: 'c191e5733ddfa074915a9ba2fbb1f99784334ca6', class: "text-field-input-container" }, h("input", { key: '692af173c615cddc90dd3306b993f216ca6eedee', ref: (inputEl) => {
                 this.textInput = inputEl;
             }, class: {
                 'text-field-input': true,
                 'text-field-input-sm': this.size === 'sm',
                 'text-field-input-md': this.size === 'md',
                 'text-field-input-lg': this.size === 'lg',
-            }, type: this.type, disabled: this.disabled, readonly: this.disabled ? false : this.readOnly, placeholder: this.placeholder, value: this.value, autofocus: this.autofocus, maxlength: this.maxLength, name: this.name, min: this.min, max: this.max, onInput: (event) => this.handleInput(event), onChange: (event) => this.handleChange(event), onFocus: (event) => {
+                'text-field-input-no-arrows': this.hideNumberArrows,
+            }, type: this.type, disabled: this.disabled, readonly: this.disabled ? false : this.readOnly, placeholder: this.placeholder, value: this.value, autofocus: this.autofocus, maxlength: this.maxLength, name: this.name, min: this.min, max: this.max, step: this.step, onInput: (event) => this.handleInput(event), onChange: (event) => this.handleChange(event), onFocus: (event) => {
                 if (!this.readOnly) {
                     this.handleFocus(event);
                 }
@@ -112,16 +137,16 @@ 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: 'bb62115ec19d0b6cfb499f3928bc39f77e510bbb', class: "text-field-label-inside", htmlFor: `text-field-input-element-${this.uuid}` }, this.label))), usesSuffixSlot && (h("div", { key: '2125a08f72b015aa35bb66586d18d10c234bb212', 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: 'debdf5549b04c05a65913c8cea4723b5287cdbc8', name: "suffix" }))), this.readOnly && !this.hideReadOnlyIcon && (h("span", { key: '22153b085a22b54a48610d965dbb1a571985e987', class: "text-field-icon__readonly" }, h("tds-tooltip", { key: '3a49b98a5ab420f58a834f871d40bdf98da5a8c7', placement: "top-end", text: "This field is non-editable", selector: "#readonly-tooltip" }), h("tds-icon", { key: '4be0d74de59aa0c552d951c051ca19a35e186510', id: "readonly-tooltip", name: "edit_inactive", size: "20px" })))), h("div", { key: 'a9f23d11c8cea0a7e3cdc1f81402d81f48853458', "aria-live": "assertive" }, (this.helper || ((_a = this.maxLength) !== null && _a !== void 0 ? _a : 0) > 0) && (h("div", { key: '8d65fbefc728f29279b2fceedfef0bec0fb17fb3', class: "text-field-helper", id: `text-field-helper-element-${this.uuid}` }, this.state === 'error' && (h("div", { key: '5dd1fb8023341c1ef1f794ce8ee472ab476f866f', class: "text-field-helper-error-state" }, !this.readOnly && h("tds-icon", { key: 'a6e87371003644f090b02c7e5e0823f4b44dfc62', name: "error", size: "16px" }), this.helper)), this.state !== 'error' && this.helper, !this.readOnly && ((_b = this.maxLength) !== null && _b !== void 0 ? _b : 0) > 0 && (h("span", { key: '4790188e2a7bc819ce1eb5239950d432193bd083', 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)))))));
+            } }, this.value === null ? 0 : (_c = this.value) === null || _c === void 0 ? void 0 : _c.length, " / ", (_d = this.maxLength) !== null && _d !== void 0 ? _d : 0)))))));
     }
     static get is() { return "tds-text-field"; }
     static get encapsulation() { return "scoped"; }
@@ -196,11 +221,11 @@ export class TdsTextField {
                 "mutable": false,
                 "complexType": {
                     "original": "string | number",
-                    "resolved": "number | string",
+                    "resolved": "number | string | undefined",
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": "Min allowed value for input type number"
@@ -213,11 +238,11 @@ export class TdsTextField {
                 "mutable": false,
                 "complexType": {
                     "original": "string | number",
-                    "resolved": "number | string",
+                    "resolved": "number | string | undefined",
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": "Max allowed value for input type number"
@@ -225,16 +250,33 @@ export class TdsTextField {
                 "attribute": "max",
                 "reflect": false
             },
+            "step": {
+                "type": "any",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | number",
+                    "resolved": "number | string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Step value for input type number"
+                },
+                "attribute": "step",
+                "reflect": false
+            },
             "helper": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
-                    "resolved": "string",
+                    "resolved": "string | undefined",
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": "Helper text"
@@ -354,8 +396,8 @@ export class TdsTextField {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "'primary' | 'secondary'",
-                    "resolved": "\"primary\" | \"secondary\"",
+                    "original": "'primary' | 'secondary' | null",
+                    "resolved": "\"primary\" | \"secondary\" | null",
                     "references": {}
                 },
                 "required": false,
@@ -427,11 +469,11 @@ export class TdsTextField {
                 "mutable": false,
                 "complexType": {
                     "original": "number",
-                    "resolved": "number",
+                    "resolved": "number | undefined",
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": "Max length of input"
@@ -462,11 +504,11 @@ export class TdsTextField {
                 "mutable": false,
                 "complexType": {
                     "original": "string",
-                    "resolved": "string",
+                    "resolved": "string | undefined",
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": "Value to be used for the aria-label attribute. Can be used for announcing that readOnly prop is set to true."
@@ -509,6 +551,24 @@ export class TdsTextField {
                 "attribute": "autocomplete",
                 "reflect": false,
                 "defaultValue": "'off'"
+            },
+            "hideNumberArrows": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Hides the native arrows on number input type"
+                },
+                "attribute": "hide-number-arrows",
+                "reflect": false,
+                "defaultValue": "false"
             }
         };
     }
@@ -593,6 +653,21 @@ export class TdsTextField {
                         }
                     }
                 }
+            }, {
+                "method": "tdsError",
+                "name": "tdsError",
+                "bubbles": true,
+                "cancelable": false,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Error event for the Text Field - emitted when value is clamped to min/max"
+                },
+                "complexType": {
+                    "original": "{ originalValue: string; clampedValue: string; reason: 'min' | 'max' }",
+                    "resolved": "{ originalValue: string; clampedValue: string; reason: \"max\" | \"min\"; }",
+                    "references": {}
+                }
             }];
     }
     static get methods() {

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

@@ -21,7 +21,7 @@ export class TdsTextarea {
         this.autofocus = false;
         this.noMinWidth = false;
         this.tdsAriaLabel = undefined;
-        this.focusInput = undefined;
+        this.focusInput = false;
     }
     handleChange(event) {
         this.tdsChange.emit(event);
@@ -39,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);
     }
@@ -60,8 +61,8 @@ export class TdsTextarea {
         return modeVariant;
     }
     render() {
-        var _a;
-        return (h("div", { key: '0e1e8c392e63be0a7e1724f3351e4859eb6501a7', class: {
+        var _a, _b;
+        return (h("div", { key: 'd7cf9dcacedf2b147de04a8e7a3bf3be9a3795a3', class: {
                 'textarea-container': true,
                 'textarea-label-inside': this.labelPosition === 'inside',
                 'textarea-focus': this.focusInput,
@@ -71,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: 'cb98c61db81f4efc7b72c50cc56ca121f3d449c8', htmlFor: `textarea-element-${this.uuid}`, class: 'textarea-label' }, this.label)), h("div", { key: '8cfd739439df3a7a29ac73054c789f137b6aceb1', class: "textarea-wrapper" }, h("textarea", { key: 'd0d4eae432b70f1a5704e7d5c0fa351be37cf3b7', 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) {
@@ -81,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: 'ea26d42ffcc583c3047101200f3abcdcc731bda7', class: "textarea-resizer-icon" }, h("svg", { key: 'b61a4cda00dde41c07961ba320b996b14b04ce80', width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '33118433cdc99ce54347f6720912302d0d3e8c58', "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: 'b399c8b24f70b6f12b54045cc526fb858f162a06', class: "textarea-icon__readonly" }, h("tds-tooltip", { key: '61e7fa6193e2046a8d619078265cae1b0d43b482', placement: "top-end", text: "This field is non-editable", selector: "#readonly-tooltip" }), h("tds-icon", { key: 'e3e74b086fb69ced9d59be3802038e055b9a08d5', id: "readonly-tooltip", name: "edit_inactive", svgTitle: "inactive" })))), h("span", { key: 'be3f5a580e3b741229c61326c0e03df53b1510ee', class: 'textarea-helper', "aria-live": "assertive", id: `textarea-helper-element-${this.uuid}` }, this.state === 'error' && this.helper && !this.readOnly && (h("tds-icon", { key: '2e201cf5e459f0b295ec32a25e1fd1d71e8491df', name: "error", size: "16px" })), this.helper), ((_a = this.maxLength) !== null && _a !== void 0 ? _a : 0) > 0 && (h("div", { key: 'bf7060e27d93495f349771d8b1cc5fb6d0f81e01', class: 'textarea-textcounter' }, this.value === null ? 0 : (_b = this.value) === null || _b === void 0 ? void 0 : _b.length, h("span", { key: 'fd01defdf5a5a3e854b082ed0f6e68e5c943151b', class: "textfield-textcounter-divider" }, " / "), " ", this.maxLength))));
     }
     static get is() { return "tds-textarea"; }
     static get encapsulation() { return "scoped"; }
@@ -138,11 +139,11 @@ export class TdsTextarea {
                 "mutable": false,
                 "complexType": {
                     "original": "string",
-                    "resolved": "string",
+                    "resolved": "string | undefined",
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": "Helper text"
@@ -155,11 +156,11 @@ export class TdsTextarea {
                 "mutable": false,
                 "complexType": {
                     "original": "number",
-                    "resolved": "number",
+                    "resolved": "number | undefined",
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": "Textarea cols attribute"
@@ -172,11 +173,11 @@ export class TdsTextarea {
                 "mutable": false,
                 "complexType": {
                     "original": "number",
-                    "resolved": "number",
+                    "resolved": "number | undefined",
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": "Textarea rows attribute"
@@ -315,11 +316,11 @@ export class TdsTextarea {
                 "mutable": false,
                 "complexType": {
                     "original": "number",
-                    "resolved": "number",
+                    "resolved": "number | undefined",
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": "Max length of input"
@@ -331,8 +332,8 @@ export class TdsTextarea {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "'primary' | 'secondary'",
-                    "resolved": "\"primary\" | \"secondary\"",
+                    "original": "'primary' | 'secondary' | null",
+                    "resolved": "\"primary\" | \"secondary\" | null",
                     "references": {}
                 },
                 "required": false,
@@ -386,11 +387,11 @@ export class TdsTextarea {
                 "mutable": false,
                 "complexType": {
                     "original": "string",
-                    "resolved": "string",
+                    "resolved": "string | undefined",
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": "Value to be used for the aria-label attribute. Can be used for announcing that readOnly prop is set to true."

package/dist/collection/components/toast/toast.js CHANGED Viewed

@@ -65,12 +65,12 @@ export class TdsToast {
         const usesHeaderSlot = hasSlot('header', this.host);
         const usesSubheaderSlot = hasSlot('subheader', this.host);
         const usesActionsSlot = hasSlot('actions', this.host);
-        return (h(Host, { key: '09db24b58ba05daeba3e00ae880e86e700a43c2d', "aria-live": this.tdsAriaLive, toastRole: this.toastRole, "aria-describedby": this.host.getAttribute('aria-describedby'), class: {
+        return (h(Host, { key: 'c486cb86a0e94181135e304cbda2b1bbbb20da22', "aria-live": this.tdsAriaLive, toastRole: this.toastRole, "aria-describedby": this.host.getAttribute('aria-describedby'), class: {
                 hide: this.hidden,
                 show: !this.hidden,
-            } }, h("div", { key: '253a018ec0eea9e17f72200f52a38e71802f2902', class: `
+            } }, h("div", { key: '946ba38a6c95e3450936014cc46c1eb43f927f0d', class: `
             wrapper
-            ${this.variant}` }, h("tds-icon", { key: '953f414876c38ffb05bc0c684850ab53df124b5e', name: this.getIconName(), size: "20px", svgTitle: this.getIconName() }), h("div", { key: 'eb1ec8eb50cf3e05ecd880c427804626d9e4c51b', class: `content` }, h("div", { key: '97a0f4cb5ec278ad6a22051328461a9e0e1ce0ff', class: "header-subheader" }, this.header && h("div", { key: 'b3ae30e072257f4a74e748e24991bbab72a80c01', class: "header" }, this.header), usesHeaderSlot && h("slot", { key: '761fac1eda5bedd6c36d00be0548109c4f774af9', name: "header" }), this.subheader && h("div", { key: 'b4916a19416d8c0bfbdc0ef3d98fefda6ea96c86', class: "subheader" }, this.subheader), usesSubheaderSlot && h("slot", { key: '62813da86efbf2ddf089a4931e11f774d6d27491', name: "subheader" })), usesActionsSlot && (h("div", { key: '93ec29dca445466da32ea2dc1c04bef76b8dc79e', class: `toast-bottom ${usesSubheaderSlot || this.subheader ? 'subheader' : 'no-subheader'}` }, h("slot", { key: 'fa9aeb95c9c569e77f85e3b65d993064e35dad81', name: "actions" })))), this.closable && (h("button", { key: '0d0aad78ebd983647774a2afdb593a7aa4e2dbf9', id: "my-button", "aria-label": this.tdsCloseAriaLabel, onClick: this.handleClose, class: "close" }, h("tds-icon", { key: 'df6e7efeef43689bf44c101d23e5ce725d087951', name: "cross", size: "20px", svgTitle: "cross" }))))));
+            ${this.variant}` }, h("tds-icon", { key: '3af328a28e80e1b3f69ec0f4dda31f9d9c7c8571', name: this.getIconName(), size: "20px", svgTitle: this.getIconName() }), h("div", { key: 'eec58153da1bc4dee5955e2393f0610db40242c1', class: `content` }, h("div", { key: 'd40f9433b851fbd3dcfd0d60099d5035a87af2e0', class: "header-subheader" }, this.header && h("div", { key: '7748dda823fc8c17f4a7eb94d15140ba4301fa83', class: "header" }, this.header), usesHeaderSlot && h("slot", { key: '880576822af000000c972125aea031c73569768d', name: "header" }), this.subheader && h("div", { key: 'cc9dee1cef953cce966ebee2ed6c82f693f21dc1', class: "subheader" }, this.subheader), usesSubheaderSlot && h("slot", { key: '01f596caf428985a0bb4dbc97282dead449fef61', name: "subheader" })), usesActionsSlot && (h("div", { key: '81e666f0d9810a0baf008782e6fee3f731b04ab2', class: `toast-bottom ${usesSubheaderSlot || this.subheader ? 'subheader' : 'no-subheader'}` }, h("slot", { key: '085aab762cc590904d6531fcf7e969d1fa0f4eca', name: "actions" })))), this.closable && (h("button", { key: '6e1c909296a175d3a994caccb57f59ab5da9eae2', id: "my-button", "aria-label": this.tdsCloseAriaLabel, onClick: this.handleClose, class: "close" }, h("tds-icon", { key: 'a1e5a6c21070afea181f6b5f20000458b50dbb45', name: "cross", size: "20px", svgTitle: "cross" }))))));
     }
     static get is() { return "tds-toast"; }
     static get encapsulation() { return "shadow"; }
@@ -109,11 +109,11 @@ export class TdsToast {
                 "mutable": false,
                 "complexType": {
                     "original": "string",
-                    "resolved": "string",
+                    "resolved": "string | undefined",
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": "Header text for the component."
@@ -126,11 +126,11 @@ export class TdsToast {
                 "mutable": false,
                 "complexType": {
                     "original": "string",
-                    "resolved": "string",
+                    "resolved": "string | undefined",
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": "Subheader text for the component."
@@ -215,11 +215,11 @@ export class TdsToast {
                 "mutable": false,
                 "complexType": {
                     "original": "string",
-                    "resolved": "string",
+                    "resolved": "string | undefined",
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": "Provides an accessible name for the components close button"

package/dist/collection/components/toggle/toggle.js CHANGED Viewed

@@ -39,12 +39,13 @@ export class TdsToggle {
         this.labelSlot = this.host.querySelector("[slot='label']");
     }
     render() {
-        return (h("div", { key: 'c3317c42904e33fd2936aa01ce064f87d33786e3', class: "tds-toggle" }, this.headline && (h("div", { key: '9c2280058b2fbc09e0663dc5e92d4d3dd413cc83', class: {
+        return (h("div", { key: '18b73a45ee7d84119fa92e0510a6bc6aa0629dcd', class: "tds-toggle" }, this.headline && (h("div", { key: 'eac54354b87c7c825d0ad7fb162ec371ad88f24d', class: {
                 'toggle-headline': true,
                 'disabled': this.disabled,
-            } }, this.headline)), h("input", { key: 'b5e5cfee5c3115c1039e816bbd6f7751cf6a5f6c', ref: (inputEl) => {
-                this.inputElement = inputEl;
-            }, "aria-label": this.tdsAriaLabel, "aria-describedby": this.host.getAttribute('aria-describedby'), "aria-labelledby": this.host.getAttribute('aria-labelledby'), "aria-checked": this.checked, "aria-required": this.required, onChange: () => this.handleToggle(), class: `${this.size}`, checked: this.checked, disabled: this.disabled, required: this.required, type: "checkbox", name: this.name, id: this.toggleId, role: "switch" }), this.labelSlot && (h("label", { key: '9eedb6f2c2a0494e2b59f392764c27b143dcecee', class: { disabled: this.disabled }, htmlFor: this.toggleId }, h("slot", { key: '11346fe1d7f4ea0da665b153ae25af9e084a0602', name: "label" })))));
+            } }, this.headline)), h("input", { key: '516d60fa34dad6fee640af0e3caad199e3408140', ref: (inputEl) => {
+                if (inputEl)
+                    this.inputElement = inputEl;
+            }, "aria-label": this.tdsAriaLabel, "aria-describedby": this.host.getAttribute('aria-describedby'), "aria-labelledby": this.host.getAttribute('aria-labelledby'), "aria-checked": this.checked, "aria-required": this.required, onChange: () => this.handleToggle(), class: `${this.size}`, checked: this.checked, disabled: this.disabled, required: this.required, type: "checkbox", name: this.name, id: this.toggleId, role: "switch" }), this.labelSlot && (h("label", { key: '48aca635f98f92bcb669dcdae4accb2f5822fe42', class: { disabled: this.disabled }, htmlFor: this.toggleId }, h("slot", { key: '66a1c7fbd981dd02ccfe5e69f76b978ddca596ea', name: "label" })))));
     }
     static get is() { return "tds-toggle"; }
     static get encapsulation() { return "scoped"; }
@@ -119,11 +120,11 @@ export class TdsToggle {
                 "mutable": false,
                 "complexType": {
                     "original": "string",
-                    "resolved": "string",
+                    "resolved": "string | undefined",
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": "Name of the toggle's input element"
@@ -136,11 +137,11 @@ export class TdsToggle {
                 "mutable": false,
                 "complexType": {
                     "original": "string",
-                    "resolved": "string",
+                    "resolved": "string | undefined",
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": "Headline for the Toggle"
@@ -189,11 +190,11 @@ export class TdsToggle {
                 "mutable": false,
                 "complexType": {
                     "original": "string",
-                    "resolved": "string",
+                    "resolved": "string | undefined",
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": "Defines aria-label attribute for input"