@scania/tegel 1.41.0-stencil-core-beta.0 → 1.42.0-input-decimal-fix-beta.0

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

@@ -9,59 +9,38 @@ 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.step = 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.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);
     }
@@ -74,6 +53,38 @@ export class TdsTextField {
     /** 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 */
@@ -86,7 +97,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: '239058e8fa4566bcaac961d2728d03e1d74a4644', class: {
                 'form-text-field': true,
                 'form-text-field-nomin': this.noMinWidth,
                 'text-field-focus': this.focusInput && !this.disabled,
@@ -104,19 +115,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: 'ee7d33be796f6cb2f685c2a1be7d3d4331a08e4e', class: "text-field-label-outside" }, h("label", { key: '584092c02eb2f3f17cc9575e0f5d835edf315ea2', htmlFor: `text-field-input-element-${this.uuid}` }, this.label))), h("div", { key: '29e48147e55c8072dd352f16c7fad49d6f89b95d', onClick: () => this.textInput.focus(), class: "text-field-container" }, usesPrefixSlot && (h("div", { key: 'db0868e75c40a0b3aa87f469e0218cfcc4992132', 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: '1279f4e56ead7d764f44d5279c14e77799d6131e', name: "prefix" }))), h("div", { key: '4dfc16dfa22b536c9f76a44df0b1ca19dcb3b829', class: "text-field-input-container" }, h("input", { key: '2249c7cbfe60eb973ae57b8d21bac9f73577773d', 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);
                 }
@@ -124,13 +136,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: 'f6794afbc2af6b83b256b592269e027499f54018', class: "text-field-label-inside", htmlFor: `text-field-input-element-${this.uuid}` }, this.label))), usesSuffixSlot && (h("div", { key: '62b76aebd06453bc33894a7b47fbf9bdf39cd812', 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: 'e2bc34b143e216cbdeca5bc80c09a3f368b5cad9', name: "suffix" }))), this.readOnly && !this.hideReadOnlyIcon && (h("span", { key: 'bb35e3014174bd1a51967d441fcf4b5a8fe232e0', class: "text-field-icon__readonly" }, h("tds-tooltip", { key: '053b761a1dc735ca256ebfc4dc5bb7f880bf40f8', placement: "top-end", text: "This field is non-editable", selector: "#readonly-tooltip" }), h("tds-icon", { key: '0e280200126f005bcce7f7eaab7a3019cd4dd28f', id: "readonly-tooltip", name: "edit_inactive", size: "20px" })))), h("div", { key: '4aee7ad22d89c8201bb80d247240368648c4f00a', "aria-live": "assertive" }, (this.helper || this.maxLength > 0) && (h("div", { key: '0e2682a8ab149540b66fbbedb6c9beeffc642cab', class: "text-field-helper", id: `text-field-helper-element-${this.uuid}` }, this.state === 'error' && (h("div", { key: '27ed349a67adb18acac3250ada772c9ca670044b', class: "text-field-helper-error-state" }, !this.readOnly && h("tds-icon", { key: '766eb0f160496337137316dc5c9d7756f7217b0f', name: "error", size: "16px" }), this.helper)), this.state !== 'error' && this.helper, !this.readOnly && this.maxLength > 0 && (h("span", { key: '1698c0261b4b74cca76be07f2137a8f7a26ba601', 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 +175,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 +193,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 +211,8 @@ export class TdsTextField {
                     "tags": [],
                     "text": "Label text"
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
                 "attribute": "label",
+                "reflect": false,
                 "defaultValue": "''"
             },
             "min": {
@@ -223,10 +229,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 +246,25 @@ export class TdsTextField {
                     "tags": [],
                     "text": "Max allowed value for input type number"
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "max"
+                "attribute": "max",
+                "reflect": false
+            },
+            "step": {
+                "type": "any",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | number",
+                    "resolved": "number | string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Step value for input type number"
+                },
+                "attribute": "step",
+                "reflect": false
             },
             "helper": {
                 "type": "string",
@@ -261,10 +280,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 +297,8 @@ export class TdsTextField {
                     "tags": [],
                     "text": "Placeholder text"
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
                 "attribute": "placeholder",
+                "reflect": false,
                 "defaultValue": "''"
             },
             "value": {
@@ -300,10 +315,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 +333,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 +351,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 +369,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,10 +387,8 @@ export class TdsTextField {
                     "tags": [],
                     "text": "Size of the input"
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
                 "attribute": "size",
+                "reflect": false,
                 "defaultValue": "'lg'"
             },
             "modeVariant": {
@@ -400,10 +405,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 +423,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 +441,8 @@ export class TdsTextField {
                     "tags": [],
                     "text": "Name property"
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
                 "attribute": "name",
+                "reflect": false,
                 "defaultValue": "''"
             },
             "state": {
@@ -460,10 +459,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 +477,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 +494,8 @@ export class TdsTextField {
                     "tags": [],
                     "text": "Autofocus for input"
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
                 "attribute": "autofocus",
+                "reflect": false,
                 "defaultValue": "false"
             },
             "tdsAriaLabel": {
@@ -519,10 +512,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 +529,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,11 +547,27 @@ 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'"
+            },
+            "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"
             }
         };
     }
@@ -647,6 +652,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() {