@scania/tegel 1.41.0 → 1.42.0-input-decimal-fix-beta.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.
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/cjs/tds-dropdown_2.cjs.entry.js +1 -1
- package/dist/cjs/tds-text-field.cjs.entry.js +45 -20
- package/dist/cjs/tegel.cjs.js +1 -1
- package/dist/collection/components/dropdown/dropdown.css +2 -1
- package/dist/collection/components/text-field/text-field.css +8 -0
- package/dist/collection/components/text-field/text-field.js +93 -19
- package/dist/components/{p-3a7e4d0d.js → p-152b0078.js} +47 -20
- package/dist/components/{p-3f475529.js → p-5ea0ae00.js} +1 -1
- package/dist/components/tds-dropdown.js +1 -1
- package/dist/components/tds-slider.js +1 -1
- package/dist/components/tds-table-footer.js +1 -1
- package/dist/components/tds-text-field.js +1 -1
- package/dist/esm/loader.js +1 -1
- package/dist/esm/tds-dropdown_2.entry.js +1 -1
- package/dist/esm/tds-text-field.entry.js +45 -20
- package/dist/esm/tegel.js +1 -1
- package/dist/tegel/{p-8eccfe32.entry.js → p-379df59b.entry.js} +1 -1
- package/dist/tegel/p-f7e8b26c.entry.js +1 -0
- package/dist/tegel/tegel.css +2 -2
- package/dist/tegel/tegel.esm.js +1 -1
- package/dist/types/components/text-field/text-field.d.ts +12 -1
- package/dist/types/components.d.ts +21 -0
- package/package.json +1 -1
- package/dist/tegel/p-0c9a51d9.entry.js +0 -1
|
@@ -14,6 +14,7 @@ export class TdsTextField {
|
|
|
14
14
|
this.label = '';
|
|
15
15
|
this.min = undefined;
|
|
16
16
|
this.max = undefined;
|
|
17
|
+
this.step = undefined;
|
|
17
18
|
this.helper = undefined;
|
|
18
19
|
this.placeholder = '';
|
|
19
20
|
this.value = '';
|
|
@@ -30,26 +31,16 @@ export class TdsTextField {
|
|
|
30
31
|
this.tdsAriaLabel = undefined;
|
|
31
32
|
this.required = false;
|
|
32
33
|
this.autocomplete = 'off';
|
|
34
|
+
this.hideNumberArrows = false;
|
|
33
35
|
this.focusInput = false;
|
|
34
36
|
}
|
|
35
37
|
handleChange(event) {
|
|
36
38
|
this.tdsChange.emit(event);
|
|
37
39
|
}
|
|
38
|
-
|
|
40
|
+
/** Data input event in value prop */
|
|
39
41
|
handleInput(event) {
|
|
40
42
|
const inputEl = event.target;
|
|
41
|
-
|
|
42
|
-
// Custom handling of number inputs when min/max are set
|
|
43
|
-
if (this.type === 'number') {
|
|
44
|
-
const numericValue = Number(value);
|
|
45
|
-
if (this.min !== undefined && numericValue < Number(this.min)) {
|
|
46
|
-
value = String(this.min);
|
|
47
|
-
}
|
|
48
|
-
if (this.max !== undefined && numericValue > Number(this.max)) {
|
|
49
|
-
value = String(this.max);
|
|
50
|
-
}
|
|
51
|
-
inputEl.value = value;
|
|
52
|
-
}
|
|
43
|
+
const { value } = inputEl;
|
|
53
44
|
this.value = value;
|
|
54
45
|
this.tdsInput.emit(event);
|
|
55
46
|
}
|
|
@@ -62,6 +53,38 @@ export class TdsTextField {
|
|
|
62
53
|
/** Set the input as focus when clicking the whole Text Field with suffix/prefix */
|
|
63
54
|
handleBlur(event) {
|
|
64
55
|
this.focusInput = false;
|
|
56
|
+
/** Custom handling of number inputs when min/max are set */
|
|
57
|
+
if (this.type === 'number' && this.textInput) {
|
|
58
|
+
const numericValue = this.textInput.valueAsNumber;
|
|
59
|
+
const minNum = this.min !== undefined ? Number(this.min) : undefined;
|
|
60
|
+
const maxNum = this.max !== undefined ? Number(this.max) : undefined;
|
|
61
|
+
if (minNum !== undefined && maxNum !== undefined && minNum > maxNum) {
|
|
62
|
+
console.warn('tds-text-field: min value is greater than max value');
|
|
63
|
+
return;
|
|
64
|
+
}
|
|
65
|
+
if (!isNaN(numericValue)) {
|
|
66
|
+
const originalValue = this.textInput.value;
|
|
67
|
+
let clampedValue = originalValue;
|
|
68
|
+
let clampReason = null;
|
|
69
|
+
if (minNum !== undefined && numericValue < minNum) {
|
|
70
|
+
clampedValue = String(this.min);
|
|
71
|
+
clampReason = 'min';
|
|
72
|
+
}
|
|
73
|
+
if (maxNum !== undefined && numericValue > maxNum) {
|
|
74
|
+
clampedValue = String(this.max);
|
|
75
|
+
clampReason = 'max';
|
|
76
|
+
}
|
|
77
|
+
if (clampedValue !== originalValue && clampReason) {
|
|
78
|
+
this.textInput.value = clampedValue;
|
|
79
|
+
this.value = clampedValue;
|
|
80
|
+
this.tdsError.emit({
|
|
81
|
+
originalValue,
|
|
82
|
+
clampedValue,
|
|
83
|
+
reason: clampReason,
|
|
84
|
+
});
|
|
85
|
+
}
|
|
86
|
+
}
|
|
87
|
+
}
|
|
65
88
|
this.tdsBlur.emit(event);
|
|
66
89
|
}
|
|
67
90
|
/** Method to handle focus */
|
|
@@ -74,7 +97,7 @@ export class TdsTextField {
|
|
|
74
97
|
var _a;
|
|
75
98
|
const usesPrefixSlot = hasSlot('prefix', this.host);
|
|
76
99
|
const usesSuffixSlot = hasSlot('suffix', this.host);
|
|
77
|
-
return (h("div", { key: '
|
|
100
|
+
return (h("div", { key: '239058e8fa4566bcaac961d2728d03e1d74a4644', class: {
|
|
78
101
|
'form-text-field': true,
|
|
79
102
|
'form-text-field-nomin': this.noMinWidth,
|
|
80
103
|
'text-field-focus': this.focusInput && !this.disabled,
|
|
@@ -92,19 +115,20 @@ export class TdsTextField {
|
|
|
92
115
|
'form-text-field-sm': this.size === 'sm',
|
|
93
116
|
'form-text-field-error': this.state === 'error',
|
|
94
117
|
'form-text-field-success': this.state === 'success',
|
|
95
|
-
} }, this.labelPosition === 'outside' && (h("div", { key: '
|
|
118
|
+
} }, 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: {
|
|
96
119
|
'text-field-slot-wrap-prefix': true,
|
|
97
120
|
'text-field-error': this.state === 'error',
|
|
98
121
|
'text-field-success': this.state === 'success',
|
|
99
122
|
'text-field-default': this.state === 'default',
|
|
100
|
-
} }, h("slot", { key: '
|
|
123
|
+
} }, h("slot", { key: '1279f4e56ead7d764f44d5279c14e77799d6131e', name: "prefix" }))), h("div", { key: '4dfc16dfa22b536c9f76a44df0b1ca19dcb3b829', class: "text-field-input-container" }, h("input", { key: '2249c7cbfe60eb973ae57b8d21bac9f73577773d', ref: (inputEl) => {
|
|
101
124
|
this.textInput = inputEl;
|
|
102
125
|
}, class: {
|
|
103
126
|
'text-field-input': true,
|
|
104
127
|
'text-field-input-sm': this.size === 'sm',
|
|
105
128
|
'text-field-input-md': this.size === 'md',
|
|
106
129
|
'text-field-input-lg': this.size === 'lg',
|
|
107
|
-
|
|
130
|
+
'text-field-input-no-arrows': this.hideNumberArrows,
|
|
131
|
+
}, 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) => {
|
|
108
132
|
if (!this.readOnly) {
|
|
109
133
|
this.handleFocus(event);
|
|
110
134
|
}
|
|
@@ -112,13 +136,13 @@ export class TdsTextField {
|
|
|
112
136
|
if (!this.readOnly) {
|
|
113
137
|
this.handleBlur(event);
|
|
114
138
|
}
|
|
115
|
-
}, "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: '
|
|
139
|
+
}, "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: {
|
|
116
140
|
'text-field-slot-wrap-suffix': true,
|
|
117
141
|
'text-field-error': this.state === 'error',
|
|
118
142
|
'text-field-success': this.state === 'success',
|
|
119
143
|
'text-field-default': this.state === 'default',
|
|
120
144
|
'tds-u-display-none': this.readOnly,
|
|
121
|
-
} }, h("slot", { key: '
|
|
145
|
+
} }, 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: {
|
|
122
146
|
'text-field-textcounter-divider': true,
|
|
123
147
|
'text-field-textcounter-disabled': this.disabled,
|
|
124
148
|
} }, this.value === null ? 0 : (_a = this.value) === null || _a === void 0 ? void 0 : _a.length, " / ", this.maxLength)))))));
|
|
@@ -225,6 +249,23 @@ export class TdsTextField {
|
|
|
225
249
|
"attribute": "max",
|
|
226
250
|
"reflect": false
|
|
227
251
|
},
|
|
252
|
+
"step": {
|
|
253
|
+
"type": "any",
|
|
254
|
+
"mutable": false,
|
|
255
|
+
"complexType": {
|
|
256
|
+
"original": "string | number",
|
|
257
|
+
"resolved": "number | string",
|
|
258
|
+
"references": {}
|
|
259
|
+
},
|
|
260
|
+
"required": false,
|
|
261
|
+
"optional": false,
|
|
262
|
+
"docs": {
|
|
263
|
+
"tags": [],
|
|
264
|
+
"text": "Step value for input type number"
|
|
265
|
+
},
|
|
266
|
+
"attribute": "step",
|
|
267
|
+
"reflect": false
|
|
268
|
+
},
|
|
228
269
|
"helper": {
|
|
229
270
|
"type": "string",
|
|
230
271
|
"mutable": false,
|
|
@@ -509,6 +550,24 @@ export class TdsTextField {
|
|
|
509
550
|
"attribute": "autocomplete",
|
|
510
551
|
"reflect": false,
|
|
511
552
|
"defaultValue": "'off'"
|
|
553
|
+
},
|
|
554
|
+
"hideNumberArrows": {
|
|
555
|
+
"type": "boolean",
|
|
556
|
+
"mutable": false,
|
|
557
|
+
"complexType": {
|
|
558
|
+
"original": "boolean",
|
|
559
|
+
"resolved": "boolean",
|
|
560
|
+
"references": {}
|
|
561
|
+
},
|
|
562
|
+
"required": false,
|
|
563
|
+
"optional": false,
|
|
564
|
+
"docs": {
|
|
565
|
+
"tags": [],
|
|
566
|
+
"text": "Hides the native arrows on number input type"
|
|
567
|
+
},
|
|
568
|
+
"attribute": "hide-number-arrows",
|
|
569
|
+
"reflect": false,
|
|
570
|
+
"defaultValue": "false"
|
|
512
571
|
}
|
|
513
572
|
};
|
|
514
573
|
}
|
|
@@ -593,6 +652,21 @@ export class TdsTextField {
|
|
|
593
652
|
}
|
|
594
653
|
}
|
|
595
654
|
}
|
|
655
|
+
}, {
|
|
656
|
+
"method": "tdsError",
|
|
657
|
+
"name": "tdsError",
|
|
658
|
+
"bubbles": true,
|
|
659
|
+
"cancelable": false,
|
|
660
|
+
"composed": true,
|
|
661
|
+
"docs": {
|
|
662
|
+
"tags": [],
|
|
663
|
+
"text": "Error event for the Text Field - emitted when value is clamped to min/max"
|
|
664
|
+
},
|
|
665
|
+
"complexType": {
|
|
666
|
+
"original": "{ originalValue: string; clampedValue: string; reason: 'min' | 'max' }",
|
|
667
|
+
"resolved": "{ originalValue: string; clampedValue: string; reason: \"max\" | \"min\"; }",
|
|
668
|
+
"references": {}
|
|
669
|
+
}
|
|
596
670
|
}];
|
|
597
671
|
}
|
|
598
672
|
static get methods() {
|
|
@@ -6,7 +6,7 @@ import { d as defineCustomElement$3 } from './p-f7d94947.js';
|
|
|
6
6
|
import { d as defineCustomElement$2 } from './p-3308d5fa.js';
|
|
7
7
|
import { d as defineCustomElement$1 } from './p-04a014cf.js';
|
|
8
8
|
|
|
9
|
-
const textFieldCss = ".text-field-input-lg.sc-tds-text-field{all:unset;border-radius:4px 4px 0 0;width:100%;box-sizing:border-box;margin:0;border:none;outline:none;height:100%;color:var(--tds-text-field-color);background-color:var(--tds-text-field-background);font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls);padding:var(--tds-spacing-element-20) var(--tds-spacing-element-16)}.text-field-input-lg.sc-tds-text-field::placeholder{color:var(--tds-text-field-placeholder)}.text-field-input-lg.sc-tds-text-field:disabled{user-select:none;pointer-events:none;background-color:var(--tds-text-field-background-disabled);color:var(--tds-text-field-color-disabled)}.text-field-input-lg.sc-tds-text-field:disabled::placeholder{color:var(--tds-text-field-placeholder-disabled)}.text-field-input-lg.sc-tds-text-field:disabled~.text-field-label-inside.sc-tds-text-field{color:var(--tds-text-field-label-disabled)}.text-field-input-md.sc-tds-text-field{all:unset;border-radius:4px 4px 0 0;width:100%;box-sizing:border-box;margin:0;border:none;outline:none;height:100%;color:var(--tds-text-field-color);background-color:var(--tds-text-field-background);font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls);padding:var(--tds-spacing-element-16)}.text-field-input-md.sc-tds-text-field::placeholder{color:var(--tds-text-field-placeholder)}.text-field-input-md.sc-tds-text-field:disabled{user-select:none;pointer-events:none;background-color:var(--tds-text-field-background-disabled);color:var(--tds-text-field-color-disabled)}.text-field-input-md.sc-tds-text-field:disabled::placeholder{color:var(--tds-text-field-placeholder-disabled)}.text-field-input-md.sc-tds-text-field:disabled~.text-field-label-inside.sc-tds-text-field{color:var(--tds-text-field-label-disabled)}.text-field-input-sm.sc-tds-text-field{all:unset;border-radius:4px 4px 0 0;width:100%;box-sizing:border-box;margin:0;border:none;outline:none;height:100%;color:var(--tds-text-field-color);background-color:var(--tds-text-field-background);font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls);padding:var(--tds-spacing-element-16)}.text-field-input-sm.sc-tds-text-field::placeholder{color:var(--tds-text-field-placeholder)}.text-field-input-sm.sc-tds-text-field:disabled{user-select:none;pointer-events:none;background-color:var(--tds-text-field-background-disabled);color:var(--tds-text-field-color-disabled)}.text-field-input-sm.sc-tds-text-field:disabled::placeholder{color:var(--tds-text-field-placeholder-disabled)}.text-field-input-sm.sc-tds-text-field:disabled~.text-field-label-inside.sc-tds-text-field{color:var(--tds-text-field-label-disabled)}.text-field-container.sc-tds-text-field{border-radius:4px 4px 0 0;display:flex;position:relative;height:56px;box-sizing:border-box;background-color:var(--tds-text-field-background);border-bottom:1px solid var(--tds-text-field-border-bottom);border-top:1px solid transparent;transition:border-bottom-color 200ms ease}.text-field-container.sc-tds-text-field:hover{border-bottom-color:var(--tds-text-field-border-bottom-hover)}.form-text-field-md.sc-tds-text-field .text-field-container.sc-tds-text-field{height:48px}.form-text-field-sm.sc-tds-text-field .text-field-container.sc-tds-text-field{height:40px}.text-field-container.sc-tds-text-field:focus-within{border:2px solid var(--tds-focus-outline-color);margin:0 -2px}.text-field-input-container.sc-tds-text-field{position:relative;width:100%}.text-field-data.sc-tds-text-field,.text-field-input.sc-tds-text-field{color:var(--tds-text-field-data-color)}.text-field-label-outside.sc-tds-text-field>*.sc-tds-text-field{font:var(--tds-detail-05);letter-spacing:var(--tds-detail-05-ls);display:block;margin-bottom:var(--tds-spacing-element-8);color:var(--tds-text-field-label-color)}.text-field-label-inside.sc-tds-text-field{font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls);position:absolute;pointer-events:none;color:var(--tds-text-field-label-inside-color);left:16px}.form-text-field.sc-tds-text-field{display:block;min-width:208px}.form-text-field-nomin.sc-tds-text-field{min-width:auto}.form-text-field.text-field-container-label-inside.sc-tds-text-field .text-field-input-lg.sc-tds-text-field{padding-top:var(--tds-spacing-element-24);padding-bottom:15px}.form-text-field.text-field-container-label-inside.sc-tds-text-field .text-field-input-lg.sc-tds-text-field~.text-field-label-inside.sc-tds-text-field{top:20px}.form-text-field.text-field-container-label-inside.sc-tds-text-field .text-field-input-lg.sc-tds-text-field::placeholder{color:transparent}.form-text-field.text-field-container-label-inside.sc-tds-text-field .text-field-input-lg.sc-tds-text-field .sc-tds-text-field::placeholder{color:transparent}.form-text-field.text-field-container-label-inside.sc-tds-text-field .text-field-input-lg.sc-tds-text-field:focus::placeholder{transition:color 0.35s ease;color:var(--tds-text-field-placeholder)}.form-text-field.text-field-container-label-inside.sc-tds-text-field .text-field-input-md.sc-tds-text-field{padding-top:var(--tds-spacing-element-20);padding-bottom:11px}.form-text-field.text-field-container-label-inside.sc-tds-text-field .text-field-input-md.sc-tds-text-field~.text-field-label-inside.sc-tds-text-field{top:16px}.form-text-field.text-field-container-label-inside.sc-tds-text-field .text-field-input-md.sc-tds-text-field::placeholder{color:transparent}.form-text-field.text-field-container-label-inside.sc-tds-text-field .text-field-input-md.sc-tds-text-field .sc-tds-text-field::placeholder{color:transparent}.form-text-field.text-field-container-label-inside.sc-tds-text-field .text-field-input-md.sc-tds-text-field:focus::placeholder{transition:color 0.35s ease;color:var(--tds-text-field-placeholder)}.form-text-field.text-field-container-label-inside.sc-tds-text-field .text-field-input-sm.sc-tds-text-field{padding-top:var(--tds-spacing-element-20);padding-bottom:11px}.form-text-field.text-field-container-label-inside.sc-tds-text-field .text-field-input-sm.sc-tds-text-field~.text-field-label-inside.sc-tds-text-field{top:16px}.form-text-field.text-field-container-label-inside.sc-tds-text-field .text-field-input-sm.sc-tds-text-field::placeholder{color:transparent}.form-text-field.text-field-container-label-inside.sc-tds-text-field .text-field-input-sm.sc-tds-text-field .sc-tds-text-field::placeholder{color:transparent}.form-text-field.text-field-container-label-inside.sc-tds-text-field .text-field-input-sm.sc-tds-text-field:focus::placeholder{transition:color 0.35s ease;color:var(--tds-text-field-placeholder)}.form-text-field.text-field-container-label-inside.text-field-focus.sc-tds-text-field .text-field-input-sm.sc-tds-text-field~.text-field-label-inside.sc-tds-text-field,.form-text-field.text-field-container-label-inside.text-field-data.sc-tds-text-field .text-field-input-sm.sc-tds-text-field~.text-field-label-inside.sc-tds-text-field{font:var(--tds-detail-07);letter-spacing:var(--tds-detail-07-ls);transition:0.1s ease all;top:8px}.form-text-field.text-field-container-label-inside.text-field-focus.sc-tds-text-field .text-field-input-md.sc-tds-text-field~.text-field-label-inside.sc-tds-text-field,.form-text-field.text-field-container-label-inside.text-field-data.sc-tds-text-field .text-field-input-md.sc-tds-text-field~.text-field-label-inside.sc-tds-text-field{font:var(--tds-detail-07);letter-spacing:var(--tds-detail-07-ls);transition:0.1s ease all;top:8px}.form-text-field.text-field-container-label-inside.text-field-focus.sc-tds-text-field .text-field-input-lg.sc-tds-text-field~.text-field-label-inside.sc-tds-text-field,.form-text-field.text-field-container-label-inside.text-field-data.sc-tds-text-field .text-field-input-lg.sc-tds-text-field~.text-field-label-inside.sc-tds-text-field{font:var(--tds-detail-07);letter-spacing:var(--tds-detail-07-ls);transition:0.1s ease all;top:12px}.text-field-helper.sc-tds-text-field{font:var(--tds-detail-05);letter-spacing:var(--tds-detail-05-ls);display:flex;gap:8px;justify-content:space-between;flex-basis:100%;padding-top:var(--tds-spacing-element-4);color:var(--tds-text-field-helper)}.text-field-helper.sc-tds-text-field .text-field-textcounter.sc-tds-text-field{margin-left:auto}.form-text-field-disabled.sc-tds-text-field .text-field-container.sc-tds-text-field{cursor:not-allowed;border-bottom-color:transparent}.form-text-field-disabled.sc-tds-text-field .text-field-slot-wrap-prefix.sc-tds-text-field>*.sc-tds-text-field,.form-text-field-disabled.sc-tds-text-field .text-field-slot-wrap-suffix.sc-tds-text-field>*.sc-tds-text-field{color:var(--tds-text-field-ps-color-disabled)}.form-text-field-disabled.sc-tds-text-field .text-field-label-outside.sc-tds-text-field>*.sc-tds-text-field{color:var(--tds-text-field-label-disabled)}.form-text-field-disabled.sc-tds-text-field .text-field-helper.sc-tds-text-field{color:var(--tds-text-field-helper-disabled)}.text-field-icon__readonly.sc-tds-text-field{display:none;position:absolute;right:18px;top:50%;transform:translateY(-50%);color:var(--tds-text-field-icon-read-only-label-color)}.text-field-icon__readonly.sc-tds-text-field .tds-tooltip.sc-tds-text-field{min-width:150px}.form-text-field-readonly.sc-tds-text-field{user-select:auto;caret-color:transparent;cursor:default}.form-text-field-readonly.sc-tds-text-field .text-field-container.sc-tds-text-field{border-bottom-color:var(--tds-text-field-border-bottom-readonly)}.form-text-field-readonly.sc-tds-text-field .text-field-icon__readonly.sc-tds-text-field{display:block}.form-text-field-readonly.sc-tds-text-field .text-field-icon__readonly.sc-tds-text-field:hover~.text-field-icon__readonly-label.sc-tds-text-field{display:block}.form-text-field-readonly.sc-tds-text-field .text-field-input.sc-tds-text-field{background-color:transparent}.form-text-field-readonly.sc-tds-text-field:has(.text-field-icon__readonly) .text-field-input.sc-tds-text-field{padding-right:54px}.form-text-field-success.sc-tds-text-field:not(.form-text-field-readonly) .text-field-container.sc-tds-text-field{border-bottom-color:var(--tds-text-field-border-bottom-success)}.form-text-field-error.sc-tds-text-field:not(.form-text-field-readonly) .text-field-helper.sc-tds-text-field{color:var(--tds-text-field-helper-error)}.form-text-field-error.sc-tds-text-field:not(.form-text-field-readonly) .text-field-container.sc-tds-text-field{border-bottom-color:var(--tds-text-field-border-bottom-error)}.text-field-helper-error-state.sc-tds-text-field{display:flex;gap:8px;flex-wrap:nowrap}.text-field-textcounter-disabled.sc-tds-text-field{color:var(--tds-text-field-textcounter-disabled)}.text-field-textcounter.sc-tds-text-field{font:var(--tds-detail-05);letter-spacing:var(--tds-detail-05-ls);color:var(--tds-text-field-textcounter);float:right}.text-field-textcounter.text-field-textcounter-disabled.sc-tds-text-field{color:var(--tds-text-field-textcounter-disabled)}.text-field-textcounter.text-field-textcounter-divider.sc-tds-text-field{color:var(--tds-text-field-textcounter-divider)}.text-field-textcounter.text-field-textcounter-divider-disabled.sc-tds-text-field{color:var(--tds-text-field-textcounter-divider-disabled)}.text-field-slot-wrap-prefix.sc-tds-text-field,.text-field-slot-wrap-suffix.sc-tds-text-field{align-self:center;font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls);margin:0 0 0 14px;color:var(--tds-text-field-ps-color)}.text-field-slot-wrap-prefix.sc-tds-text-field-s>:not(tds-icon),.text-field-slot-wrap-suffix.sc-tds-text-field-s>:not(tds-icon){margin:0 0 0 2px}.text-field-slot-wrap-prefix.text-field-error.sc-tds-text-field,.text-field-slot-wrap-suffix.text-field-error.sc-tds-text-field{color:var(--tds-text-field-ps-color-error)}.text-field-slot-wrap-suffix.sc-tds-text-field{margin:0 14px 0 0}.text-field-slot-wrap-suffix.sc-tds-text-field-s>:not(tds-icon){margin:0 2px 0 0}";
|
|
9
|
+
const textFieldCss = ".text-field-input-lg.sc-tds-text-field{all:unset;border-radius:4px 4px 0 0;width:100%;box-sizing:border-box;margin:0;border:none;outline:none;height:100%;color:var(--tds-text-field-color);background-color:var(--tds-text-field-background);font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls);padding:var(--tds-spacing-element-20) var(--tds-spacing-element-16)}.text-field-input-lg.sc-tds-text-field::placeholder{color:var(--tds-text-field-placeholder)}.text-field-input-lg.sc-tds-text-field:disabled{user-select:none;pointer-events:none;background-color:var(--tds-text-field-background-disabled);color:var(--tds-text-field-color-disabled)}.text-field-input-lg.sc-tds-text-field:disabled::placeholder{color:var(--tds-text-field-placeholder-disabled)}.text-field-input-lg.sc-tds-text-field:disabled~.text-field-label-inside.sc-tds-text-field{color:var(--tds-text-field-label-disabled)}.text-field-input-md.sc-tds-text-field{all:unset;border-radius:4px 4px 0 0;width:100%;box-sizing:border-box;margin:0;border:none;outline:none;height:100%;color:var(--tds-text-field-color);background-color:var(--tds-text-field-background);font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls);padding:var(--tds-spacing-element-16)}.text-field-input-md.sc-tds-text-field::placeholder{color:var(--tds-text-field-placeholder)}.text-field-input-md.sc-tds-text-field:disabled{user-select:none;pointer-events:none;background-color:var(--tds-text-field-background-disabled);color:var(--tds-text-field-color-disabled)}.text-field-input-md.sc-tds-text-field:disabled::placeholder{color:var(--tds-text-field-placeholder-disabled)}.text-field-input-md.sc-tds-text-field:disabled~.text-field-label-inside.sc-tds-text-field{color:var(--tds-text-field-label-disabled)}.text-field-input-sm.sc-tds-text-field{all:unset;border-radius:4px 4px 0 0;width:100%;box-sizing:border-box;margin:0;border:none;outline:none;height:100%;color:var(--tds-text-field-color);background-color:var(--tds-text-field-background);font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls);padding:var(--tds-spacing-element-16)}.text-field-input-sm.sc-tds-text-field::placeholder{color:var(--tds-text-field-placeholder)}.text-field-input-sm.sc-tds-text-field:disabled{user-select:none;pointer-events:none;background-color:var(--tds-text-field-background-disabled);color:var(--tds-text-field-color-disabled)}.text-field-input-sm.sc-tds-text-field:disabled::placeholder{color:var(--tds-text-field-placeholder-disabled)}.text-field-input-sm.sc-tds-text-field:disabled~.text-field-label-inside.sc-tds-text-field{color:var(--tds-text-field-label-disabled)}.text-field-container.sc-tds-text-field{border-radius:4px 4px 0 0;display:flex;position:relative;height:56px;box-sizing:border-box;background-color:var(--tds-text-field-background);border-bottom:1px solid var(--tds-text-field-border-bottom);border-top:1px solid transparent;transition:border-bottom-color 200ms ease}.text-field-container.sc-tds-text-field:hover{border-bottom-color:var(--tds-text-field-border-bottom-hover)}.form-text-field-md.sc-tds-text-field .text-field-container.sc-tds-text-field{height:48px}.form-text-field-sm.sc-tds-text-field .text-field-container.sc-tds-text-field{height:40px}.text-field-container.sc-tds-text-field:focus-within{border:2px solid var(--tds-focus-outline-color);margin:0 -2px}.text-field-input-container.sc-tds-text-field{position:relative;width:100%}.text-field-data.sc-tds-text-field,.text-field-input.sc-tds-text-field{color:var(--tds-text-field-data-color)}.text-field-label-outside.sc-tds-text-field>*.sc-tds-text-field{font:var(--tds-detail-05);letter-spacing:var(--tds-detail-05-ls);display:block;margin-bottom:var(--tds-spacing-element-8);color:var(--tds-text-field-label-color)}.text-field-label-inside.sc-tds-text-field{font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls);position:absolute;pointer-events:none;color:var(--tds-text-field-label-inside-color);left:16px}.form-text-field.sc-tds-text-field{display:block;min-width:208px}.form-text-field-nomin.sc-tds-text-field{min-width:auto}.form-text-field.text-field-container-label-inside.sc-tds-text-field .text-field-input-lg.sc-tds-text-field{padding-top:var(--tds-spacing-element-24);padding-bottom:15px}.form-text-field.text-field-container-label-inside.sc-tds-text-field .text-field-input-lg.sc-tds-text-field~.text-field-label-inside.sc-tds-text-field{top:20px}.form-text-field.text-field-container-label-inside.sc-tds-text-field .text-field-input-lg.sc-tds-text-field::placeholder{color:transparent}.form-text-field.text-field-container-label-inside.sc-tds-text-field .text-field-input-lg.sc-tds-text-field .sc-tds-text-field::placeholder{color:transparent}.form-text-field.text-field-container-label-inside.sc-tds-text-field .text-field-input-lg.sc-tds-text-field:focus::placeholder{transition:color 0.35s ease;color:var(--tds-text-field-placeholder)}.form-text-field.text-field-container-label-inside.sc-tds-text-field .text-field-input-md.sc-tds-text-field{padding-top:var(--tds-spacing-element-20);padding-bottom:11px}.form-text-field.text-field-container-label-inside.sc-tds-text-field .text-field-input-md.sc-tds-text-field~.text-field-label-inside.sc-tds-text-field{top:16px}.form-text-field.text-field-container-label-inside.sc-tds-text-field .text-field-input-md.sc-tds-text-field::placeholder{color:transparent}.form-text-field.text-field-container-label-inside.sc-tds-text-field .text-field-input-md.sc-tds-text-field .sc-tds-text-field::placeholder{color:transparent}.form-text-field.text-field-container-label-inside.sc-tds-text-field .text-field-input-md.sc-tds-text-field:focus::placeholder{transition:color 0.35s ease;color:var(--tds-text-field-placeholder)}.form-text-field.text-field-container-label-inside.sc-tds-text-field .text-field-input-sm.sc-tds-text-field{padding-top:var(--tds-spacing-element-20);padding-bottom:11px}.form-text-field.text-field-container-label-inside.sc-tds-text-field .text-field-input-sm.sc-tds-text-field~.text-field-label-inside.sc-tds-text-field{top:16px}.form-text-field.text-field-container-label-inside.sc-tds-text-field .text-field-input-sm.sc-tds-text-field::placeholder{color:transparent}.form-text-field.text-field-container-label-inside.sc-tds-text-field .text-field-input-sm.sc-tds-text-field .sc-tds-text-field::placeholder{color:transparent}.form-text-field.text-field-container-label-inside.sc-tds-text-field .text-field-input-sm.sc-tds-text-field:focus::placeholder{transition:color 0.35s ease;color:var(--tds-text-field-placeholder)}.form-text-field.text-field-container-label-inside.text-field-focus.sc-tds-text-field .text-field-input-sm.sc-tds-text-field~.text-field-label-inside.sc-tds-text-field,.form-text-field.text-field-container-label-inside.text-field-data.sc-tds-text-field .text-field-input-sm.sc-tds-text-field~.text-field-label-inside.sc-tds-text-field{font:var(--tds-detail-07);letter-spacing:var(--tds-detail-07-ls);transition:0.1s ease all;top:8px}.form-text-field.text-field-container-label-inside.text-field-focus.sc-tds-text-field .text-field-input-md.sc-tds-text-field~.text-field-label-inside.sc-tds-text-field,.form-text-field.text-field-container-label-inside.text-field-data.sc-tds-text-field .text-field-input-md.sc-tds-text-field~.text-field-label-inside.sc-tds-text-field{font:var(--tds-detail-07);letter-spacing:var(--tds-detail-07-ls);transition:0.1s ease all;top:8px}.form-text-field.text-field-container-label-inside.text-field-focus.sc-tds-text-field .text-field-input-lg.sc-tds-text-field~.text-field-label-inside.sc-tds-text-field,.form-text-field.text-field-container-label-inside.text-field-data.sc-tds-text-field .text-field-input-lg.sc-tds-text-field~.text-field-label-inside.sc-tds-text-field{font:var(--tds-detail-07);letter-spacing:var(--tds-detail-07-ls);transition:0.1s ease all;top:12px}.text-field-helper.sc-tds-text-field{font:var(--tds-detail-05);letter-spacing:var(--tds-detail-05-ls);display:flex;gap:8px;justify-content:space-between;flex-basis:100%;padding-top:var(--tds-spacing-element-4);color:var(--tds-text-field-helper)}.text-field-helper.sc-tds-text-field .text-field-textcounter.sc-tds-text-field{margin-left:auto}.form-text-field-disabled.sc-tds-text-field .text-field-container.sc-tds-text-field{cursor:not-allowed;border-bottom-color:transparent}.form-text-field-disabled.sc-tds-text-field .text-field-slot-wrap-prefix.sc-tds-text-field>*.sc-tds-text-field,.form-text-field-disabled.sc-tds-text-field .text-field-slot-wrap-suffix.sc-tds-text-field>*.sc-tds-text-field{color:var(--tds-text-field-ps-color-disabled)}.form-text-field-disabled.sc-tds-text-field .text-field-label-outside.sc-tds-text-field>*.sc-tds-text-field{color:var(--tds-text-field-label-disabled)}.form-text-field-disabled.sc-tds-text-field .text-field-helper.sc-tds-text-field{color:var(--tds-text-field-helper-disabled)}.text-field-icon__readonly.sc-tds-text-field{display:none;position:absolute;right:18px;top:50%;transform:translateY(-50%);color:var(--tds-text-field-icon-read-only-label-color)}.text-field-icon__readonly.sc-tds-text-field .tds-tooltip.sc-tds-text-field{min-width:150px}.form-text-field-readonly.sc-tds-text-field{user-select:auto;caret-color:transparent;cursor:default}.form-text-field-readonly.sc-tds-text-field .text-field-container.sc-tds-text-field{border-bottom-color:var(--tds-text-field-border-bottom-readonly)}.form-text-field-readonly.sc-tds-text-field .text-field-icon__readonly.sc-tds-text-field{display:block}.form-text-field-readonly.sc-tds-text-field .text-field-icon__readonly.sc-tds-text-field:hover~.text-field-icon__readonly-label.sc-tds-text-field{display:block}.form-text-field-readonly.sc-tds-text-field .text-field-input.sc-tds-text-field{background-color:transparent}.form-text-field-readonly.sc-tds-text-field:has(.text-field-icon__readonly) .text-field-input.sc-tds-text-field{padding-right:54px}.form-text-field-success.sc-tds-text-field:not(.form-text-field-readonly) .text-field-container.sc-tds-text-field{border-bottom-color:var(--tds-text-field-border-bottom-success)}.form-text-field-error.sc-tds-text-field:not(.form-text-field-readonly) .text-field-helper.sc-tds-text-field{color:var(--tds-text-field-helper-error)}.form-text-field-error.sc-tds-text-field:not(.form-text-field-readonly) .text-field-container.sc-tds-text-field{border-bottom-color:var(--tds-text-field-border-bottom-error)}.text-field-helper-error-state.sc-tds-text-field{display:flex;gap:8px;flex-wrap:nowrap}.text-field-textcounter-disabled.sc-tds-text-field{color:var(--tds-text-field-textcounter-disabled)}.text-field-textcounter.sc-tds-text-field{font:var(--tds-detail-05);letter-spacing:var(--tds-detail-05-ls);color:var(--tds-text-field-textcounter);float:right}.text-field-textcounter.text-field-textcounter-disabled.sc-tds-text-field{color:var(--tds-text-field-textcounter-disabled)}.text-field-textcounter.text-field-textcounter-divider.sc-tds-text-field{color:var(--tds-text-field-textcounter-divider)}.text-field-textcounter.text-field-textcounter-divider-disabled.sc-tds-text-field{color:var(--tds-text-field-textcounter-divider-disabled)}.text-field-slot-wrap-prefix.sc-tds-text-field,.text-field-slot-wrap-suffix.sc-tds-text-field{align-self:center;font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls);margin:0 0 0 14px;color:var(--tds-text-field-ps-color)}.text-field-slot-wrap-prefix.sc-tds-text-field-s>:not(tds-icon),.text-field-slot-wrap-suffix.sc-tds-text-field-s>:not(tds-icon){margin:0 0 0 2px}.text-field-slot-wrap-prefix.text-field-error.sc-tds-text-field,.text-field-slot-wrap-suffix.text-field-error.sc-tds-text-field{color:var(--tds-text-field-ps-color-error)}.text-field-slot-wrap-suffix.sc-tds-text-field{margin:0 14px 0 0}.text-field-slot-wrap-suffix.sc-tds-text-field-s>:not(tds-icon){margin:0 2px 0 0}.text-field-input-no-arrows.sc-tds-text-field{appearance:textfield}.text-field-input-no-arrows.sc-tds-text-field::-webkit-outer-spin-button,.text-field-input-no-arrows.sc-tds-text-field::-webkit-inner-spin-button{appearance:none;margin:0}";
|
|
10
10
|
const TdsTextFieldStyle0 = textFieldCss;
|
|
11
11
|
|
|
12
12
|
const TdsTextField = /*@__PURE__*/ proxyCustomElement(class TdsTextField extends H {
|
|
@@ -17,12 +17,14 @@ const TdsTextField = /*@__PURE__*/ proxyCustomElement(class TdsTextField extends
|
|
|
17
17
|
this.tdsInput = createEvent(this, "tdsInput", 6);
|
|
18
18
|
this.tdsFocus = createEvent(this, "tdsFocus", 6);
|
|
19
19
|
this.tdsBlur = createEvent(this, "tdsBlur", 6);
|
|
20
|
+
this.tdsError = createEvent(this, "tdsError", 6);
|
|
20
21
|
this.uuid = generateUniqueId();
|
|
21
22
|
this.type = 'text';
|
|
22
23
|
this.labelPosition = 'no-label';
|
|
23
24
|
this.label = '';
|
|
24
25
|
this.min = undefined;
|
|
25
26
|
this.max = undefined;
|
|
27
|
+
this.step = undefined;
|
|
26
28
|
this.helper = undefined;
|
|
27
29
|
this.placeholder = '';
|
|
28
30
|
this.value = '';
|
|
@@ -39,26 +41,16 @@ const TdsTextField = /*@__PURE__*/ proxyCustomElement(class TdsTextField extends
|
|
|
39
41
|
this.tdsAriaLabel = undefined;
|
|
40
42
|
this.required = false;
|
|
41
43
|
this.autocomplete = 'off';
|
|
44
|
+
this.hideNumberArrows = false;
|
|
42
45
|
this.focusInput = false;
|
|
43
46
|
}
|
|
44
47
|
handleChange(event) {
|
|
45
48
|
this.tdsChange.emit(event);
|
|
46
49
|
}
|
|
47
|
-
|
|
50
|
+
/** Data input event in value prop */
|
|
48
51
|
handleInput(event) {
|
|
49
52
|
const inputEl = event.target;
|
|
50
|
-
|
|
51
|
-
// Custom handling of number inputs when min/max are set
|
|
52
|
-
if (this.type === 'number') {
|
|
53
|
-
const numericValue = Number(value);
|
|
54
|
-
if (this.min !== undefined && numericValue < Number(this.min)) {
|
|
55
|
-
value = String(this.min);
|
|
56
|
-
}
|
|
57
|
-
if (this.max !== undefined && numericValue > Number(this.max)) {
|
|
58
|
-
value = String(this.max);
|
|
59
|
-
}
|
|
60
|
-
inputEl.value = value;
|
|
61
|
-
}
|
|
53
|
+
const { value } = inputEl;
|
|
62
54
|
this.value = value;
|
|
63
55
|
this.tdsInput.emit(event);
|
|
64
56
|
}
|
|
@@ -71,6 +63,38 @@ const TdsTextField = /*@__PURE__*/ proxyCustomElement(class TdsTextField extends
|
|
|
71
63
|
/** Set the input as focus when clicking the whole Text Field with suffix/prefix */
|
|
72
64
|
handleBlur(event) {
|
|
73
65
|
this.focusInput = false;
|
|
66
|
+
/** Custom handling of number inputs when min/max are set */
|
|
67
|
+
if (this.type === 'number' && this.textInput) {
|
|
68
|
+
const numericValue = this.textInput.valueAsNumber;
|
|
69
|
+
const minNum = this.min !== undefined ? Number(this.min) : undefined;
|
|
70
|
+
const maxNum = this.max !== undefined ? Number(this.max) : undefined;
|
|
71
|
+
if (minNum !== undefined && maxNum !== undefined && minNum > maxNum) {
|
|
72
|
+
console.warn('tds-text-field: min value is greater than max value');
|
|
73
|
+
return;
|
|
74
|
+
}
|
|
75
|
+
if (!isNaN(numericValue)) {
|
|
76
|
+
const originalValue = this.textInput.value;
|
|
77
|
+
let clampedValue = originalValue;
|
|
78
|
+
let clampReason = null;
|
|
79
|
+
if (minNum !== undefined && numericValue < minNum) {
|
|
80
|
+
clampedValue = String(this.min);
|
|
81
|
+
clampReason = 'min';
|
|
82
|
+
}
|
|
83
|
+
if (maxNum !== undefined && numericValue > maxNum) {
|
|
84
|
+
clampedValue = String(this.max);
|
|
85
|
+
clampReason = 'max';
|
|
86
|
+
}
|
|
87
|
+
if (clampedValue !== originalValue && clampReason) {
|
|
88
|
+
this.textInput.value = clampedValue;
|
|
89
|
+
this.value = clampedValue;
|
|
90
|
+
this.tdsError.emit({
|
|
91
|
+
originalValue,
|
|
92
|
+
clampedValue,
|
|
93
|
+
reason: clampReason,
|
|
94
|
+
});
|
|
95
|
+
}
|
|
96
|
+
}
|
|
97
|
+
}
|
|
74
98
|
this.tdsBlur.emit(event);
|
|
75
99
|
}
|
|
76
100
|
/** Method to handle focus */
|
|
@@ -83,7 +107,7 @@ const TdsTextField = /*@__PURE__*/ proxyCustomElement(class TdsTextField extends
|
|
|
83
107
|
var _a;
|
|
84
108
|
const usesPrefixSlot = hasSlot('prefix', this.host);
|
|
85
109
|
const usesSuffixSlot = hasSlot('suffix', this.host);
|
|
86
|
-
return (h("div", { key: '
|
|
110
|
+
return (h("div", { key: '239058e8fa4566bcaac961d2728d03e1d74a4644', class: {
|
|
87
111
|
'form-text-field': true,
|
|
88
112
|
'form-text-field-nomin': this.noMinWidth,
|
|
89
113
|
'text-field-focus': this.focusInput && !this.disabled,
|
|
@@ -101,19 +125,20 @@ const TdsTextField = /*@__PURE__*/ proxyCustomElement(class TdsTextField extends
|
|
|
101
125
|
'form-text-field-sm': this.size === 'sm',
|
|
102
126
|
'form-text-field-error': this.state === 'error',
|
|
103
127
|
'form-text-field-success': this.state === 'success',
|
|
104
|
-
} }, this.labelPosition === 'outside' && (h("div", { key: '
|
|
128
|
+
} }, 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: {
|
|
105
129
|
'text-field-slot-wrap-prefix': true,
|
|
106
130
|
'text-field-error': this.state === 'error',
|
|
107
131
|
'text-field-success': this.state === 'success',
|
|
108
132
|
'text-field-default': this.state === 'default',
|
|
109
|
-
} }, h("slot", { key: '
|
|
133
|
+
} }, h("slot", { key: '1279f4e56ead7d764f44d5279c14e77799d6131e', name: "prefix" }))), h("div", { key: '4dfc16dfa22b536c9f76a44df0b1ca19dcb3b829', class: "text-field-input-container" }, h("input", { key: '2249c7cbfe60eb973ae57b8d21bac9f73577773d', ref: (inputEl) => {
|
|
110
134
|
this.textInput = inputEl;
|
|
111
135
|
}, class: {
|
|
112
136
|
'text-field-input': true,
|
|
113
137
|
'text-field-input-sm': this.size === 'sm',
|
|
114
138
|
'text-field-input-md': this.size === 'md',
|
|
115
139
|
'text-field-input-lg': this.size === 'lg',
|
|
116
|
-
|
|
140
|
+
'text-field-input-no-arrows': this.hideNumberArrows,
|
|
141
|
+
}, 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) => {
|
|
117
142
|
if (!this.readOnly) {
|
|
118
143
|
this.handleFocus(event);
|
|
119
144
|
}
|
|
@@ -121,13 +146,13 @@ const TdsTextField = /*@__PURE__*/ proxyCustomElement(class TdsTextField extends
|
|
|
121
146
|
if (!this.readOnly) {
|
|
122
147
|
this.handleBlur(event);
|
|
123
148
|
}
|
|
124
|
-
}, "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: '
|
|
149
|
+
}, "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: {
|
|
125
150
|
'text-field-slot-wrap-suffix': true,
|
|
126
151
|
'text-field-error': this.state === 'error',
|
|
127
152
|
'text-field-success': this.state === 'success',
|
|
128
153
|
'text-field-default': this.state === 'default',
|
|
129
154
|
'tds-u-display-none': this.readOnly,
|
|
130
|
-
} }, h("slot", { key: '
|
|
155
|
+
} }, 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: {
|
|
131
156
|
'text-field-textcounter-divider': true,
|
|
132
157
|
'text-field-textcounter-disabled': this.disabled,
|
|
133
158
|
} }, this.value === null ? 0 : (_a = this.value) === null || _a === void 0 ? void 0 : _a.length, " / ", this.maxLength)))))));
|
|
@@ -140,6 +165,7 @@ const TdsTextField = /*@__PURE__*/ proxyCustomElement(class TdsTextField extends
|
|
|
140
165
|
"label": [1],
|
|
141
166
|
"min": [8],
|
|
142
167
|
"max": [8],
|
|
168
|
+
"step": [8],
|
|
143
169
|
"helper": [1],
|
|
144
170
|
"placeholder": [1],
|
|
145
171
|
"value": [513],
|
|
@@ -156,6 +182,7 @@ const TdsTextField = /*@__PURE__*/ proxyCustomElement(class TdsTextField extends
|
|
|
156
182
|
"tdsAriaLabel": [1, "tds-aria-label"],
|
|
157
183
|
"required": [4],
|
|
158
184
|
"autocomplete": [1],
|
|
185
|
+
"hideNumberArrows": [4, "hide-number-arrows"],
|
|
159
186
|
"focusInput": [32],
|
|
160
187
|
"focusElement": [64]
|
|
161
188
|
}]);
|
|
@@ -61,7 +61,7 @@ const appendHiddenInput = (element, name, value, disabled, additionalAttributes)
|
|
|
61
61
|
input.value = value || '';
|
|
62
62
|
};
|
|
63
63
|
|
|
64
|
-
const dropdownCss = "@charset \"UTF-8\";:host button{all:unset;height:100%;width:100%;background-color:var(--tds-dropdown-bg);border-bottom:1px solid var(--tds-dropdown-border-bottom);border-radius:var(--tds-dropdown-border-radius)}:host button:hover{border-bottom:1px solid var(--tds-dropdown-border-bottom-hover)}:host button .value-wrapper{padding:0 16px;display:flex;align-items:center;justify-content:space-between}:host button.placeholder{color:var(--tds-dropdown-placeholder-color);line-height:1.3}:host button.value{color:var(--tds-dropdown-value-color);font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls);line-height:1.3}:host button:focus{border-bottom:0}:host button.error{border-bottom:1px solid var(--tds-dropdown-error)}:host button.error:focus{border-bottom-color:transparent}:host button.error:focus::before{content:\"\";position:absolute;bottom:0;left:0;width:100%;height:1px;background:var(--tds-dropdown-error)}:host button:disabled{color:var(--tds-dropdown-disabled-color);border-bottom:1px solid transparent}:host button .menu-icon{margin-right:0}:host .dropdown-select:focus-within{outline:2px solid var(--tds-focus-outline-color);box-shadow:0 0 0 1px var(--tds-white);outline-offset:1px;z-index:1}:host .filter{display:flex;align-items:center;justify-content:space-between;height:100%;background-color:var(--tds-dropdown-bg);border-bottom:1px solid var(--tds-dropdown-border-bottom);padding-left:16px;border-radius:4px 4px 0 0}:host .filter:hover{border-bottom:1px solid var(--tds-dropdown-border-bottom-hover)}:host .filter.disabled{color:var(--tds-dropdown-disabled-color);border-bottom:1px solid transparent}:host .filter.disabled .value-wrapper input{color:var(--tds-dropdown-disabled-color)}:host .filter .value-wrapper{display:flex;width:100%;height:100%}:host .filter .value-wrapper input{color:var(--tds-dropdown-filter-input-color)}:host .filter .label-inside-as-placeholder{position:absolute;font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls);line-height:1.3;color:var(--tds-dropdown-placeholder-color)}:host .filter .label-inside-as-placeholder.lg{top:20px}:host .filter .label-inside-as-placeholder.md{top:16px}:host .filter .label-inside-as-placeholder.sm{display:none}:host .filter .label-inside-as-placeholder.selected{font:var(--tds-detail-07);letter-spacing:var(--tds-detail-07-ls);transition:all 0.2s ease-in-out}:host .filter .label-inside-as-placeholder.selected.lg{top:12px}:host .filter .label-inside-as-placeholder.selected.md{top:8px}:host .filter .label-inside-as-placeholder.selected.sm{display:none}:host .filter .label-inside-as-placeholder.selected+.placeholder:not(.sm){margin-top:8px}:host .filter.focus{border-bottom:0}:host .filter.focus:hover{border-bottom:0}:host .filter.error{border-bottom:1px solid var(--tds-dropdown-error)}:host .filter.error.focus{border-bottom-color:transparent}:host .filter.error.focus::before{content:\"\";position:absolute;bottom:0;left:0;width:100%;height:1px;background:var(--tds-dropdown-error)}:host .filter input{flex:1;all:unset;width:100%}:host .filter input::placeholder{color:var(--tds-dropdown-placeholder-color)}:host .filter input:disabled::placeholder{color:var(--tds-dropdown-disabled-color)}:host .filter tds-icon{cursor:pointer}:host .filter .menu-icon{margin-right:16px}:host .filter .clear-icon{margin:0 8px;color:var(--tds-dropdown-clear-icon-color);padding-right:8px;border-right:1px solid var(--tds-dropdown-clear-icon-color)}:host .filter .clear-icon:hover{color:var(--tds-dropdown-clear-icon-hover-color)}:host .filter .clear-icon.hide{display:none;visibility:hidden}:host{--tds-scrollbar-width-standard:thin;--tds-scrollbar-width:10px;--tds-scrollbar-height:10px;--tds-scrollbar-thumb-border-width:3px;--tds-scrollbar-thumb-border-hover-width:2px}body{scrollbar-width:thin}:host{display:block;position:relative;font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls)}:host .label-outside{font:var(--tds-detail-05);letter-spacing:var(--tds-detail-05-ls);color:var(--tds-dropdown-label-color);margin-bottom:8px}:host .label-outside.disabled{color:var(--tds-dropdown-disabled-color)}:host .dropdown-select{position:relative}:host .dropdown-select button:focus{outline:2px solid var(--tds-focus-outline-color);box-shadow:0 0 0 1px var(--tds-white);outline-offset:1px;z-index:1;border-radius:0}:host .dropdown-select button{transition:border-bottom-color var(--tds-motion-duration-fast-02) var(--tds-motion-easing-scania)}:host .dropdown-select button:hover{border-bottom-color:var(--tds-dropdown-border-bottom-hover)}:host .dropdown-select button{border-bottom-color:var(--tds-dropdown-border-bottom)}:host .dropdown-select button.error{border-bottom-color:var(--tds-dropdown-error)}:host .dropdown-select button.error:focus{border-bottom-color:transparent}:host .dropdown-select.disabled .label-inside,:host .dropdown-select.disabled .placeholder,:host .dropdown-select.disabled .label-inside-as-placeholder,:host .dropdown-select.disabled .value-wrapper{color:var(--tds-dropdown-disabled-color)}:host .dropdown-select.disabled button{border:none}:host .dropdown-select .label-inside{position:absolute;font:var(--tds-detail-07);letter-spacing:var(--tds-detail-07-ls);color:var(--tds-dropdown-label-inside-color)}:host .dropdown-select .label-inside.lg{top:12px;left:16px}:host .dropdown-select .label-inside.md{top:8px;left:16px}:host .dropdown-select .label-inside.sm{display:none}:host .dropdown-select .label-inside.xs{display:none}:host .dropdown-select .label-inside+.placeholder:not(.sm){margin-top:8px}:host .dropdown-select .placeholder{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-right:var(--tds-placeholder-margin);}:host .dropdown-select .placeholder.xs{line-height:1}:host .dropdown-select .label-inside-as-placeholder{color:var(--tds-dropdown-placeholder-color)}:host .dropdown-select .label-inside-as-placeholder.selected{position:absolute;font:var(--tds-detail-07);letter-spacing:var(--tds-detail-07-ls);transition:all 0.2s ease-in-out}:host .dropdown-select .label-inside-as-placeholder.selected.lg{top:12px}:host .dropdown-select .label-inside-as-placeholder.selected.md{top:8px}:host .dropdown-select .label-inside-as-placeholder.selected.sm{display:none}:host .dropdown-select .label-inside-as-placeholder.selected+.placeholder:not(.sm){margin-top:8px}:host .dropdown-select.lg{height:55px}:host .dropdown-select.md{height:47px}:host .dropdown-select.sm{height:39px}:host .dropdown-select.xs{height:29px}:host .helper{margin-top:4px;color:var(--tds-dropdown-helper-color);font:var(--tds-detail-05);letter-spacing:var(--tds-detail-05-ls);display:flex;align-items:center;gap:8px}:host .helper.error{color:var(--tds-dropdown-error)}:host .helper.disabled{color:var(--tds-dropdown-disabled-color)}:host .dropdown-list{z-index:100;position:absolute;width:100%;transform-origin:top;box-shadow:0 2px 3px 0 rgba(0, 0, 0, 0.1);border-radius:var(--tds-dropdown-list-border-radius-down);overflow-y:auto;transform:scaleY(0);pointer-events:none;background-color:var(--tds-dropdown-bg)}:host .dropdown-list:hover::-webkit-scrollbar-thumb{border:var(--tds-scrollbar-thumb-border-hover-width) solid transparent;background:var(--tds-scrollbar-hover-thumb-color);background-clip:padding-box}:host .dropdown-list::-webkit-scrollbar{width:var(--tds-scrollbar-width)}:host .dropdown-list::-webkit-scrollbar-track{background:var(--tds-scrollbar-track-color)}:host .dropdown-list::-webkit-scrollbar-thumb{border-radius:40px;background:var(--tds-scrollbar-thumb-color);border:var(--tds-scrollbar-thumb-border-width) solid transparent;background-clip:padding-box}:host .dropdown-list::-webkit-scrollbar-button{height:0;width:0}@supports not selector(::-webkit-scrollbar){:host .dropdown-list{scrollbar-color:var(--tds-scrollbar-thumb-color) var(--tds-scrollbar-track-color);scrollbar-width:var(--tds-scrollbar-width-standard)}}:host .dropdown-list.lg{max-height:312px}:host .dropdown-list.md{max-height:312px}:host .dropdown-list.sm{max-height:260px}:host .dropdown-list.xs{max-height:260px}:host .dropdown-list.up{bottom:100%;margin-top:0;margin-bottom:1px;transform-origin:bottom;display:flex;flex-direction:column-reverse;border-radius:var(--tds-dropdown-list-border-radius-up)}:host .dropdown-list.up.label-outside{bottom:calc(100% - 24px)}:host .dropdown-list.closed{transform:scaleY(0);pointer-events:none}:host .dropdown-list.open{transform:scaleY(1);visibility:visible;opacity:1;pointer-events:auto}:host .dropdown-list.animation-enter-slide{transition:transform var(--tds-motion-duration-moderate-01) var(--tds-motion-easing-enter)}:host .dropdown-list.animation-exit-slide{transition:transform var(--tds-motion-duration-moderate-01) var(--tds-motion-easing-exit)}:host .dropdown-list .no-result{font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls);display:flex;align-items:center;padding:0 16px;background-color:var(--tds-dropdown-bg)}:host .dropdown-list .no-result.lg{height:56px}:host .dropdown-list .no-result.md{height:48px}:host .dropdown-list .no-result.sm{height:40px}:host .dropdown-list .no-result.xs{height:40px}:host .menu-icon{color:var(--tds-dropdown-menu-icon-color)}:host tds-icon{transition:transform var(--tds-motion-duration-fast-02) var(--tds-motion-easing-scania)}:host tds-icon.open{transform:rotateZ(180deg)}";
|
|
64
|
+
const dropdownCss = "@charset \"UTF-8\";:host button{all:unset;height:100%;width:100%;background-color:var(--tds-dropdown-bg);border-bottom:1px solid var(--tds-dropdown-border-bottom);border-radius:var(--tds-dropdown-border-radius)}:host button:hover{border-bottom:1px solid var(--tds-dropdown-border-bottom-hover)}:host button .value-wrapper{padding:0 16px;display:flex;align-items:center;justify-content:space-between}:host button.placeholder{color:var(--tds-dropdown-placeholder-color);line-height:1.3}:host button.value{color:var(--tds-dropdown-value-color);font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls);line-height:1.3}:host button:focus{border-bottom:0}:host button.error{border-bottom:1px solid var(--tds-dropdown-error)}:host button.error:focus{border-bottom-color:transparent}:host button.error:focus::before{content:\"\";position:absolute;bottom:0;left:0;width:100%;height:1px;background:var(--tds-dropdown-error)}:host button:disabled{color:var(--tds-dropdown-disabled-color);border-bottom:1px solid transparent}:host button .menu-icon{margin-right:0}:host .dropdown-select:focus-within{outline:2px solid var(--tds-focus-outline-color);box-shadow:0 0 0 1px var(--tds-white);outline-offset:1px;z-index:1}:host .filter{display:flex;align-items:center;justify-content:space-between;height:100%;background-color:var(--tds-dropdown-bg);border-bottom:1px solid var(--tds-dropdown-border-bottom);padding-left:16px;border-radius:4px 4px 0 0}:host .filter:hover{border-bottom:1px solid var(--tds-dropdown-border-bottom-hover)}:host .filter.disabled{color:var(--tds-dropdown-disabled-color);border-bottom:1px solid transparent}:host .filter.disabled .value-wrapper input{color:var(--tds-dropdown-disabled-color)}:host .filter .value-wrapper{display:flex;width:100%;height:100%}:host .filter .value-wrapper input{color:var(--tds-dropdown-filter-input-color)}:host .filter .label-inside-as-placeholder{position:absolute;font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls);line-height:1.3;color:var(--tds-dropdown-placeholder-color)}:host .filter .label-inside-as-placeholder.lg{top:20px}:host .filter .label-inside-as-placeholder.md{top:16px}:host .filter .label-inside-as-placeholder.sm{display:none}:host .filter .label-inside-as-placeholder.selected{font:var(--tds-detail-07);letter-spacing:var(--tds-detail-07-ls);transition:all 0.2s ease-in-out}:host .filter .label-inside-as-placeholder.selected.lg{top:12px}:host .filter .label-inside-as-placeholder.selected.md{top:8px}:host .filter .label-inside-as-placeholder.selected.sm{display:none}:host .filter .label-inside-as-placeholder.selected+.placeholder:not(.sm){margin-top:8px}:host .filter.focus{border-bottom:0}:host .filter.focus:hover{border-bottom:0}:host .filter.error{border-bottom:1px solid var(--tds-dropdown-error)}:host .filter.error.focus{border-bottom-color:transparent}:host .filter.error.focus::before{content:\"\";position:absolute;bottom:0;left:0;width:100%;height:1px;background:var(--tds-dropdown-error)}:host .filter input{flex:1;all:unset;width:100%}:host .filter input::placeholder{color:var(--tds-dropdown-placeholder-color)}:host .filter input:disabled::placeholder{color:var(--tds-dropdown-disabled-color)}:host .filter tds-icon{cursor:pointer}:host .filter .menu-icon{margin-right:16px}:host .filter .clear-icon{margin:0 8px;color:var(--tds-dropdown-clear-icon-color);padding-right:8px;border-right:1px solid var(--tds-dropdown-clear-icon-color)}:host .filter .clear-icon:hover{color:var(--tds-dropdown-clear-icon-hover-color)}:host .filter .clear-icon.hide{display:none;visibility:hidden}:host{--tds-scrollbar-width-standard:thin;--tds-scrollbar-width:10px;--tds-scrollbar-height:10px;--tds-scrollbar-thumb-border-width:3px;--tds-scrollbar-thumb-border-hover-width:2px}body{scrollbar-width:thin}:host{display:block;position:relative;font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls)}:host .label-outside{font:var(--tds-detail-05);letter-spacing:var(--tds-detail-05-ls);color:var(--tds-dropdown-label-color);margin-bottom:8px}:host .label-outside.disabled{color:var(--tds-dropdown-disabled-color)}:host .dropdown-select{position:relative}:host .dropdown-select button:focus{outline:2px solid var(--tds-focus-outline-color);box-shadow:0 0 0 1px var(--tds-white);outline-offset:1px;z-index:1;border-radius:0}:host .dropdown-select button{transition:border-bottom-color var(--tds-motion-duration-fast-02) var(--tds-motion-easing-scania)}:host .dropdown-select button:hover{border-bottom-color:var(--tds-dropdown-border-bottom-hover)}:host .dropdown-select button{border-bottom-color:var(--tds-dropdown-border-bottom)}:host .dropdown-select button.error{border-bottom-color:var(--tds-dropdown-error)}:host .dropdown-select button.error:focus{border-bottom-color:transparent}:host .dropdown-select.disabled .label-inside,:host .dropdown-select.disabled .placeholder,:host .dropdown-select.disabled .label-inside-as-placeholder,:host .dropdown-select.disabled .value-wrapper,:host .dropdown-select.disabled .menu-icon{color:var(--tds-dropdown-disabled-color)}:host .dropdown-select.disabled button{border:none}:host .dropdown-select .label-inside{position:absolute;font:var(--tds-detail-07);letter-spacing:var(--tds-detail-07-ls);color:var(--tds-dropdown-label-inside-color)}:host .dropdown-select .label-inside.lg{top:12px;left:16px}:host .dropdown-select .label-inside.md{top:8px;left:16px}:host .dropdown-select .label-inside.sm{display:none}:host .dropdown-select .label-inside.xs{display:none}:host .dropdown-select .label-inside+.placeholder:not(.sm){margin-top:8px}:host .dropdown-select .placeholder{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-right:var(--tds-placeholder-margin);}:host .dropdown-select .placeholder.xs{line-height:1}:host .dropdown-select .label-inside-as-placeholder{color:var(--tds-dropdown-placeholder-color)}:host .dropdown-select .label-inside-as-placeholder.selected{position:absolute;font:var(--tds-detail-07);letter-spacing:var(--tds-detail-07-ls);transition:all 0.2s ease-in-out}:host .dropdown-select .label-inside-as-placeholder.selected.lg{top:12px}:host .dropdown-select .label-inside-as-placeholder.selected.md{top:8px}:host .dropdown-select .label-inside-as-placeholder.selected.sm{display:none}:host .dropdown-select .label-inside-as-placeholder.selected+.placeholder:not(.sm){margin-top:8px}:host .dropdown-select.lg{height:55px}:host .dropdown-select.md{height:47px}:host .dropdown-select.sm{height:39px}:host .dropdown-select.xs{height:29px}:host .helper{margin-top:4px;color:var(--tds-dropdown-helper-color);font:var(--tds-detail-05);letter-spacing:var(--tds-detail-05-ls);display:flex;align-items:center;gap:8px}:host .helper.error{color:var(--tds-dropdown-error)}:host .helper.disabled{color:var(--tds-dropdown-disabled-color)}:host .dropdown-list{z-index:100;position:absolute;width:100%;transform-origin:top;box-shadow:0 2px 3px 0 rgba(0, 0, 0, 0.1);border-radius:var(--tds-dropdown-list-border-radius-down);overflow-y:auto;transform:scaleY(0);pointer-events:none;background-color:var(--tds-dropdown-bg)}:host .dropdown-list:hover::-webkit-scrollbar-thumb{border:var(--tds-scrollbar-thumb-border-hover-width) solid transparent;background:var(--tds-scrollbar-hover-thumb-color);background-clip:padding-box}:host .dropdown-list::-webkit-scrollbar{width:var(--tds-scrollbar-width)}:host .dropdown-list::-webkit-scrollbar-track{background:var(--tds-scrollbar-track-color)}:host .dropdown-list::-webkit-scrollbar-thumb{border-radius:40px;background:var(--tds-scrollbar-thumb-color);border:var(--tds-scrollbar-thumb-border-width) solid transparent;background-clip:padding-box}:host .dropdown-list::-webkit-scrollbar-button{height:0;width:0}@supports not selector(::-webkit-scrollbar){:host .dropdown-list{scrollbar-color:var(--tds-scrollbar-thumb-color) var(--tds-scrollbar-track-color);scrollbar-width:var(--tds-scrollbar-width-standard)}}:host .dropdown-list.lg{max-height:312px}:host .dropdown-list.md{max-height:312px}:host .dropdown-list.sm{max-height:260px}:host .dropdown-list.xs{max-height:260px}:host .dropdown-list.up{bottom:100%;margin-top:0;margin-bottom:1px;transform-origin:bottom;display:flex;flex-direction:column-reverse;border-radius:var(--tds-dropdown-list-border-radius-up)}:host .dropdown-list.up.label-outside{bottom:calc(100% - 24px)}:host .dropdown-list.closed{transform:scaleY(0);pointer-events:none}:host .dropdown-list.open{transform:scaleY(1);visibility:visible;opacity:1;pointer-events:auto}:host .dropdown-list.animation-enter-slide{transition:transform var(--tds-motion-duration-moderate-01) var(--tds-motion-easing-enter)}:host .dropdown-list.animation-exit-slide{transition:transform var(--tds-motion-duration-moderate-01) var(--tds-motion-easing-exit)}:host .dropdown-list .no-result{font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls);display:flex;align-items:center;padding:0 16px;background-color:var(--tds-dropdown-bg)}:host .dropdown-list .no-result.lg{height:56px}:host .dropdown-list .no-result.md{height:48px}:host .dropdown-list .no-result.sm{height:40px}:host .dropdown-list .no-result.xs{height:40px}:host .menu-icon{color:var(--tds-dropdown-menu-icon-color)}:host tds-icon{transition:transform var(--tds-motion-duration-fast-02) var(--tds-motion-easing-scania)}:host tds-icon.open{transform:rotateZ(180deg)}";
|
|
65
65
|
const TdsDropdownStyle0 = dropdownCss;
|
|
66
66
|
|
|
67
67
|
function hasValueChanged(newValue, currentValue) {
|
|
@@ -2,7 +2,7 @@ import { p as proxyCustomElement, H, d as createEvent, h } from './p-28ef5186.js
|
|
|
2
2
|
import { g as generateUniqueId } from './p-11648030.js';
|
|
3
3
|
import { d as defineCustomElement$5 } from './p-f7d94947.js';
|
|
4
4
|
import { d as defineCustomElement$4 } from './p-3308d5fa.js';
|
|
5
|
-
import { d as defineCustomElement$3 } from './p-
|
|
5
|
+
import { d as defineCustomElement$3 } from './p-152b0078.js';
|
|
6
6
|
import { d as defineCustomElement$2 } from './p-04a014cf.js';
|
|
7
7
|
|
|
8
8
|
const sliderCss = "tds-slider{box-sizing:border-box;width:100%}tds-slider *{box-sizing:border-box}tds-slider input[type=range].tds-slider-native-element{display:none}tds-slider .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0}.tds-slider-wrapper{width:100%}.tds-slider-wrapper.read-only{pointer-events:none}.tds-slider{width:100%;display:flex;flex-wrap:nowrap;padding-top:65px}.tds-slider .tds-slider-inner{width:100%;height:20px;position:relative}.tds-slider .tds-slider-inner:focus-within .tds-slider__thumb-inner{outline:var(--tds-slider-thumb-focus-outline);box-shadow:var(--tds-slider-thumb-focus-box-shadow);outline-offset:var(--tds-slider-thumb-focus-outline-offset);z-index:1}.tds-slider .tds-slider__controls{position:relative;top:-25px}.tds-slider .tds-slider__controls .tds-slider__control{cursor:pointer}.tds-slider .tds-slider__controls .tds-slider__control.tds-slider__control-minus{padding:18px 18px 18px 0}.tds-slider .tds-slider__controls .tds-slider__control.tds-slider__control-plus{padding:18px 0 18px 18px}.tds-slider .tds-slider__input-values{position:relative;top:-25px;display:flex;flex-wrap:nowrap;align-items:center}.tds-slider .tds-slider__input-values .tds-slider__input-value{user-select:none;padding:18px;color:var(--tds-slider-input-value-color);font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls)}.tds-slider .tds-slider__input-values .tds-slider__input-value.min-value{padding-left:0}.tds-slider .tds-slider__input-values .tds-slider__input-field-wrapper{background-color:var(--tds-slider-inputfield-background);display:flex;align-items:center;justify-content:center;border-radius:4px 4px 0 0}.tds-slider .tds-slider__input-values .tds-slider__input-field-wrapper tds-text-field .text-field-input[type=number]{width:auto;padding:12px;text-align:center;appearance:textfield}.tds-slider .tds-slider__input-values .tds-slider__input-field-wrapper tds-text-field .text-field-input[type=number]::-webkit-outer-spin-button,.tds-slider .tds-slider__input-values .tds-slider__input-field-wrapper tds-text-field .text-field-input[type=number]::-webkit-inner-spin-button{appearance:none;margin:0}.tds-slider .tds-slider__input-values .tds-slider__input-field-wrapper tds-text-field .text-field-input:read-only{text-align:left}.tds-slider .tds-slider__input-values .tds-slider__input-field-wrapper tds-text-field .text-field-icon__readonly{right:12px}.tds-slider label{font:var(--tds-detail-05);letter-spacing:var(--tds-detail-05-ls);user-select:none;position:absolute;color:var(--tds-slider-label-color);padding-bottom:16px;transform:translateY(-100%)}.tds-slider label.offset{padding-bottom:34px}.tds-slider .tds-slider__value{font:var(--tds-detail-01);letter-spacing:var(--tds-detail-01-ls);user-select:none;border-radius:4px;padding:8px 11px;position:absolute;transform:translate(-50%, -100%);top:-24px;background-color:var(--tds-slider-value-tooltip-background);color:var(--tds-slider-value-tooltip-color)}.tds-slider .tds-slider__value svg{color:var(--tds-slider-value-tooltip-background);position:absolute;left:50%;transform:translateX(-50%);top:34px}.tds-slider .tds-slider__thumb{position:absolute}.tds-slider .tds-slider__thumb:hover .tds-slider__value{display:block}.tds-slider .tds-slider__thumb .tds-slider__thumb-inner{width:20px;height:20px;border-radius:100%;background-color:var(--tds-slider-thumb-color);position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);cursor:pointer}.tds-slider .tds-slider__thumb .tds-slider__thumb-inner::before{content:\" \";display:none;width:48px;height:48px;background-color:var(--tds-slider-thumb-color);position:absolute;border-radius:100%;top:50%;left:50%;transform:translate(-50%, -50%)}.tds-slider .tds-slider__thumb .tds-slider__thumb-inner:hover::before{display:block;background-color:var(--tds-slider-thumb-hover)}.tds-slider .tds-slider__thumb .tds-slider__thumb-inner.pressed{width:24px;height:24px}.tds-slider .tds-slider__thumb .tds-slider__thumb-inner.pressed::before{display:block;background-color:var(--tds-slider-thumb-pressed)}.tds-slider .tds-slider__value-dividers-wrapper{position:relative;width:100%;pointer-events:none}.tds-slider .tds-slider__value-dividers{pointer-events:none;position:absolute;display:flex;justify-content:space-between;width:100%}.tds-slider .tds-slider__value-dividers .tds-slider__value-divider{transform:translateY(-50%);height:16px;background-color:var(--tds-slider-divider-color);color:var(--tds-slider-divider-values-color);width:1px}.tds-slider .tds-slider__value-dividers .tds-slider__value-divider span{display:block;user-select:none;color:var(-tds-grey-700);font:var(--tds-detail-05);letter-spacing:var(--tds-detail-05-ls);position:relative;top:-7px;left:50%;transform:translate(-50%, -100%);width:50px;text-align:center}.tds-slider .tds-slider__track{width:100%;height:2px;border-radius:1px;background-color:var(--tds-slider-track-color);position:relative;cursor:pointer}.tds-slider .tds-slider__track::after{content:\"\";position:absolute;left:0;right:0;top:-10px;bottom:-10px;cursor:pointer;z-index:0}.tds-slider .tds-slider__track:focus{outline:0}.tds-slider .tds-slider__track:focus .tds-slider__thumb .tds-slider__thumb-inner{width:24px;height:24px}.tds-slider .tds-slider__track:focus .tds-slider__thumb .tds-slider__thumb-inner::before{display:block;opacity:0.08}.tds-slider .tds-slider__track .tds-slider__track-fill{background-color:var(--tds-slider-track-fill-color);border-radius:2px;height:4px;position:absolute;left:0;top:-1px}.tds-slider .tds-slider__track .tds-slider__thumb{z-index:1}.tds-slider.disabled{cursor:not-allowed}.tds-slider.disabled>*{pointer-events:none}.tds-slider.disabled label{color:var(--tds-slider-label-disabled)}.tds-slider.disabled .tds-slider__controls .tds-slider__control{cursor:default}.tds-slider.disabled .tds-slider__input-values .tds-slider__input-value{color:var(--tds-slider-input-value-disabled)}.tds-slider.disabled .tds-slider__input-values .tds-slider__input-field-wrapper{pointer-events:none}.tds-slider.disabled .tds-slider__input-values .tds-slider__input-field-wrapper input.tds-slider__input-field{color:var(--tds-slider-inputfield-number-disabled);box-shadow:none;pointer-events:none;background:var(--tds-slider-inputfield-background-disabled)}.tds-slider.disabled .tds-slider__value{display:none}.tds-slider.disabled .tds-slider__track{cursor:not-allowed;background-color:var(--tds-slider-track-disabled)}.tds-slider.disabled .tds-slider__track .tds-slider__track-fill{background-color:var(--tds-slider-track-disabled)}.tds-slider.disabled .tds-slider__value-dividers .tds-slider__value-divider{background-color:var(--tds-slider-divider-disabled)}.tds-slider.disabled .tds-slider__value-dividers .tds-slider__value-divider span{color:var(--tds-slider-divider-values-disabled)}.tds-slider.disabled .tds-slider__thumb{pointer-events:none}.tds-slider.disabled .tds-slider__thumb .tds-slider__thumb-inner{background-color:var(--tds-slider-thumb-disabled);cursor:default}.tds-slider.tds-slider-small .tds-slider__thumb .tds-slider__thumb-inner{width:16px;height:16px}.tds-slider.tds-slider-small .tds-slider__thumb .tds-slider__thumb-inner::before{width:40px;height:40px}.tds-slider.tds-slider-small .tds-slider__thumb .tds-slider__thumb-inner.pressed{width:20px;height:20px}.tds-slider .tds-slider__controls .tds-slider__control{cursor:pointer}.tds-slider .tds-slider__controls .tds-slider__control.tds-slider__control-minus tds-icon,.tds-slider .tds-slider__controls .tds-slider__control.tds-slider__control-plus tds-icon{color:var(--tds-slider-controls-color)}.tds-slider.disabled .tds-slider__controls .tds-slider__control{cursor:default}.tds-slider.disabled .tds-slider__controls .tds-slider__control.tds-slider__control-minus tds-icon,.tds-slider.disabled .tds-slider__controls .tds-slider__control.tds-slider__control-plus tds-icon{color:var(--tds-slider-controls-disabled)}";
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { p as proxyCustomElement, H, d as createEvent, h, c as Host } from './p-28ef5186.js';
|
|
2
2
|
import { d as defineCustomElement$5 } from './p-44f5b5e1.js';
|
|
3
|
-
import { d as defineCustomElement$4 } from './p-
|
|
3
|
+
import { d as defineCustomElement$4 } from './p-5ea0ae00.js';
|
|
4
4
|
import { d as defineCustomElement$3 } from './p-6ef207b2.js';
|
|
5
5
|
import { d as defineCustomElement$2 } from './p-f7d94947.js';
|
|
6
6
|
|