@scania/tegel 1.23.0-value-prop.beta.5 → 1.24.0-fix-CDEP-264-button-allow-boolean-props-testing-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-button.cjs.entry.js +3 -3
- package/dist/cjs/tds-dropdown_2.cjs.entry.js +188 -136
- package/dist/cjs/tegel.cjs.js +1 -1
- package/dist/collection/components/button/button.js +3 -3
- package/dist/collection/components/dropdown/dropdown.js +239 -211
- package/dist/components/{p-98a2c82d.js → p-4f1aa84f.js} +193 -144
- package/dist/components/tds-button.js +3 -3
- package/dist/components/tds-dropdown.js +1 -1
- package/dist/components/tds-table-footer.js +1 -1
- package/dist/esm/loader.js +1 -1
- package/dist/esm/tds-button.entry.js +3 -3
- package/dist/esm/tds-dropdown_2.entry.js +188 -136
- package/dist/esm/tegel.js +1 -1
- package/dist/tegel/{p-2dd309cb.entry.js → p-14f12f43.entry.js} +1 -1
- package/dist/tegel/p-9ed00e8f.entry.js +1 -0
- package/dist/tegel/tegel.esm.js +1 -1
- package/dist/types/components/dropdown/dropdown.d.ts +36 -26
- package/dist/types/components.d.ts +11 -21
- package/package.json +1 -1
- package/dist/tegel/p-845e1fca.entry.js +0 -1
|
@@ -71,16 +71,35 @@ const TdsDropdown = /*@__PURE__*/ proxyCustomElement(class TdsDropdown extends H
|
|
|
71
71
|
this.tdsFocus = createEvent(this, "tdsFocus", 6);
|
|
72
72
|
this.tdsBlur = createEvent(this, "tdsBlur", 6);
|
|
73
73
|
this.tdsInput = createEvent(this, "tdsInput", 6);
|
|
74
|
-
this.tdsValueChange = createEvent(this, "tdsValueChange", 6);
|
|
75
74
|
this.setDefaultOption = () => {
|
|
76
75
|
if (this.defaultValue) {
|
|
76
|
+
const children = Array.from(this.host.children).filter((element) => element.tagName === 'TDS-DROPDOWN-OPTION');
|
|
77
|
+
if (children.length === 0) {
|
|
78
|
+
console.warn('TDS DROPDOWN: No options found. Disregard if loading data asynchronously.');
|
|
79
|
+
return;
|
|
80
|
+
}
|
|
77
81
|
const defaultValues = this.multiselect
|
|
78
82
|
? new Set(this.defaultValue.split(','))
|
|
79
83
|
: [this.defaultValue];
|
|
80
|
-
const
|
|
81
|
-
|
|
84
|
+
const childrenMap = new Map(children.map((element) => [element.value, element]));
|
|
85
|
+
const matchedValues = Array.from(defaultValues).filter((value) => {
|
|
86
|
+
const element = childrenMap.get(value);
|
|
87
|
+
if (element) {
|
|
88
|
+
element.setSelected(true);
|
|
89
|
+
return true;
|
|
90
|
+
}
|
|
91
|
+
return false;
|
|
92
|
+
});
|
|
93
|
+
if (matchedValues.length > 0) {
|
|
94
|
+
this.value = [...new Set(this.value ? [...this.value, ...matchedValues] : matchedValues)];
|
|
95
|
+
this.setValueAttribute();
|
|
96
|
+
}
|
|
97
|
+
else {
|
|
98
|
+
console.warn(`TDS DROPDOWN: No matching option found for defaultValue "${this.defaultValue}"`);
|
|
99
|
+
}
|
|
82
100
|
}
|
|
83
101
|
};
|
|
102
|
+
/* Returns a list of all children that are tds-dropdown-option elements */
|
|
84
103
|
this.getChildren = () => {
|
|
85
104
|
const tdsDropdownOptions = Array.from(this.host.children).filter((element) => element.tagName === 'TDS-DROPDOWN-OPTION');
|
|
86
105
|
if (tdsDropdownOptions.length === 0) {
|
|
@@ -89,36 +108,6 @@ const TdsDropdown = /*@__PURE__*/ proxyCustomElement(class TdsDropdown extends H
|
|
|
89
108
|
else
|
|
90
109
|
return tdsDropdownOptions;
|
|
91
110
|
};
|
|
92
|
-
this.getSelectedChildren = () => {
|
|
93
|
-
if (this.selectedOptions.length === 0)
|
|
94
|
-
return [];
|
|
95
|
-
return this.selectedOptions
|
|
96
|
-
.map((stringValue) => {
|
|
97
|
-
var _a;
|
|
98
|
-
const matchingElement = (_a = this.getChildren()) === null || _a === void 0 ? void 0 : _a.find((element) => element.value === stringValue);
|
|
99
|
-
return matchingElement;
|
|
100
|
-
})
|
|
101
|
-
.filter(Boolean);
|
|
102
|
-
};
|
|
103
|
-
this.getSelectedChildrenLabels = () => {
|
|
104
|
-
var _a;
|
|
105
|
-
return (_a = this.getSelectedChildren()) === null || _a === void 0 ? void 0 : _a.map((element) => element.textContent.trim());
|
|
106
|
-
};
|
|
107
|
-
this.getValue = () => {
|
|
108
|
-
const labels = this.getSelectedChildrenLabels();
|
|
109
|
-
if (!labels) {
|
|
110
|
-
return '';
|
|
111
|
-
}
|
|
112
|
-
return labels === null || labels === void 0 ? void 0 : labels.join(', ');
|
|
113
|
-
};
|
|
114
|
-
this.setValueAttribute = () => {
|
|
115
|
-
if (this.selectedOptions.length === 0) {
|
|
116
|
-
this.host.removeAttribute('value');
|
|
117
|
-
}
|
|
118
|
-
else {
|
|
119
|
-
this.host.setAttribute('value', this.selectedOptions.join(','));
|
|
120
|
-
}
|
|
121
|
-
};
|
|
122
111
|
this.getOpenDirection = () => {
|
|
123
112
|
var _a, _b, _c, _d, _e;
|
|
124
113
|
if (this.openDirection === 'auto' || !this.openDirection) {
|
|
@@ -132,6 +121,7 @@ const TdsDropdown = /*@__PURE__*/ proxyCustomElement(class TdsDropdown extends H
|
|
|
132
121
|
}
|
|
133
122
|
return this.openDirection;
|
|
134
123
|
};
|
|
124
|
+
/* Toggles the open state of the Dropdown and sets focus to the input element */
|
|
135
125
|
this.handleToggleOpen = () => {
|
|
136
126
|
if (!this.disabled) {
|
|
137
127
|
this.open = !this.open;
|
|
@@ -140,10 +130,38 @@ const TdsDropdown = /*@__PURE__*/ proxyCustomElement(class TdsDropdown extends H
|
|
|
140
130
|
}
|
|
141
131
|
}
|
|
142
132
|
};
|
|
133
|
+
/* Focuses the input element in the Dropdown, if the reference is present. */
|
|
143
134
|
this.focusInputElement = () => {
|
|
144
135
|
if (this.inputElement)
|
|
145
136
|
this.inputElement.focus();
|
|
146
137
|
};
|
|
138
|
+
this.getSelectedChildren = () => {
|
|
139
|
+
var _a;
|
|
140
|
+
return (_a = this.value) === null || _a === void 0 ? void 0 : _a.map((stringValue) => {
|
|
141
|
+
const matchingElement = this.getChildren().find((element) => element.value === stringValue);
|
|
142
|
+
return matchingElement;
|
|
143
|
+
}).filter(Boolean);
|
|
144
|
+
};
|
|
145
|
+
this.getSelectedChildrenLabels = () => {
|
|
146
|
+
var _a;
|
|
147
|
+
return (_a = this.getSelectedChildren()) === null || _a === void 0 ? void 0 : _a.map((element) => element.textContent.trim());
|
|
148
|
+
};
|
|
149
|
+
this.getValue = () => {
|
|
150
|
+
const labels = this.getSelectedChildrenLabels();
|
|
151
|
+
if (!labels) {
|
|
152
|
+
return '';
|
|
153
|
+
}
|
|
154
|
+
return labels === null || labels === void 0 ? void 0 : labels.join(', ');
|
|
155
|
+
};
|
|
156
|
+
this.setValueAttribute = () => {
|
|
157
|
+
var _a;
|
|
158
|
+
if (!this.value || ((_a = this.value) === null || _a === void 0 ? void 0 : _a.toString()) === '') {
|
|
159
|
+
this.host.removeAttribute('value');
|
|
160
|
+
}
|
|
161
|
+
else {
|
|
162
|
+
this.host.setAttribute('value', this.value.map((val) => val).toString());
|
|
163
|
+
}
|
|
164
|
+
};
|
|
147
165
|
this.handleFilter = (event) => {
|
|
148
166
|
this.tdsInput.emit(event);
|
|
149
167
|
const query = event.target.value.toLowerCase();
|
|
@@ -174,10 +192,8 @@ const TdsDropdown = /*@__PURE__*/ proxyCustomElement(class TdsDropdown extends H
|
|
|
174
192
|
this.handleFilterReset = () => {
|
|
175
193
|
this.reset();
|
|
176
194
|
this.inputElement.value = '';
|
|
177
|
-
this.handleFilter({ target: { value:
|
|
195
|
+
this.handleFilter({ target: { value: this.inputElement.value } });
|
|
178
196
|
this.inputElement.focus();
|
|
179
|
-
// Add this line to ensure internal value is cleared
|
|
180
|
-
this.internalValue = '';
|
|
181
197
|
};
|
|
182
198
|
this.handleFocus = (event) => {
|
|
183
199
|
this.open = true;
|
|
@@ -191,6 +207,13 @@ const TdsDropdown = /*@__PURE__*/ proxyCustomElement(class TdsDropdown extends H
|
|
|
191
207
|
this.handleBlur = (event) => {
|
|
192
208
|
this.tdsBlur.emit(event);
|
|
193
209
|
};
|
|
210
|
+
this.handleChange = () => {
|
|
211
|
+
var _a, _b;
|
|
212
|
+
this.tdsChange.emit({
|
|
213
|
+
name: this.name,
|
|
214
|
+
value: (_b = (_a = this.value) === null || _a === void 0 ? void 0 : _a.map((value) => value).toString()) !== null && _b !== void 0 ? _b : null,
|
|
215
|
+
});
|
|
216
|
+
};
|
|
194
217
|
this.resetInput = () => {
|
|
195
218
|
const inputEl = this.host.querySelector('input');
|
|
196
219
|
if (inputEl) {
|
|
@@ -213,99 +236,107 @@ const TdsDropdown = /*@__PURE__*/ proxyCustomElement(class TdsDropdown extends H
|
|
|
213
236
|
this.normalizeText = true;
|
|
214
237
|
this.noResultText = 'No result';
|
|
215
238
|
this.defaultValue = undefined;
|
|
216
|
-
this.value = null;
|
|
217
239
|
this.open = false;
|
|
218
|
-
this.
|
|
240
|
+
this.value = undefined;
|
|
219
241
|
this.filterResult = undefined;
|
|
220
242
|
this.filterFocus = undefined;
|
|
221
|
-
this.selectedOptions = [];
|
|
222
|
-
}
|
|
223
|
-
handleValueChange(newValue) {
|
|
224
|
-
// Normalize to array
|
|
225
|
-
const normalizedValue = this.normalizeValue(newValue);
|
|
226
|
-
// Only update if actually changed
|
|
227
|
-
if (this.hasValueChanged(normalizedValue, this.selectedOptions)) {
|
|
228
|
-
this.updateDropdownState(normalizedValue);
|
|
229
|
-
}
|
|
230
|
-
}
|
|
231
|
-
normalizeValue(value) {
|
|
232
|
-
if (!value || value === '')
|
|
233
|
-
return []; // Handle both null and empty string
|
|
234
|
-
// For multiselect, keep array. For single select, wrap in array
|
|
235
|
-
if (this.multiselect) {
|
|
236
|
-
return Array.isArray(value) ? value : value.split(',').filter((v) => v !== '');
|
|
237
|
-
}
|
|
238
|
-
return Array.isArray(value) ? value : [value];
|
|
239
243
|
}
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
|
|
244
|
+
/** Method that resets the Dropdown, marks all children as non-selected and resets the value to null. */
|
|
245
|
+
async reset() {
|
|
246
|
+
this.dropdownList.scrollTop = 0;
|
|
247
|
+
this.internalReset();
|
|
248
|
+
this.handleChange();
|
|
244
249
|
}
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
this.
|
|
248
|
-
|
|
249
|
-
this.value = this.multiselect ? this.selectedOptions : this.selectedOptions[0] || null;
|
|
250
|
-
// Update DOM
|
|
251
|
-
this.updateOptionElements();
|
|
252
|
-
// Update display value
|
|
253
|
-
this.updateDisplayValue();
|
|
254
|
-
// Emit change event
|
|
255
|
-
this.emitChange();
|
|
256
|
-
// Update value attribute
|
|
257
|
-
this.setValueAttribute();
|
|
250
|
+
/** Method that forces focus on the input element. */
|
|
251
|
+
async focusElement() {
|
|
252
|
+
this.focusInputElement();
|
|
253
|
+
this.handleFocus({});
|
|
258
254
|
}
|
|
259
|
-
|
|
260
|
-
|
|
261
|
-
|
|
262
|
-
|
|
263
|
-
|
|
264
|
-
|
|
255
|
+
/** Method for setting the value of the Dropdown.
|
|
256
|
+
*
|
|
257
|
+
* Single selection example:
|
|
258
|
+
*
|
|
259
|
+
* <code>
|
|
260
|
+
* dropdown.setValue('option-1', 'Option 1');
|
|
261
|
+
* </code>
|
|
262
|
+
*
|
|
263
|
+
* Multiselect example:
|
|
264
|
+
*
|
|
265
|
+
* <code>
|
|
266
|
+
* dropdown.setValue(['option-1', 'option-2']);
|
|
267
|
+
* </code>
|
|
268
|
+
*/
|
|
269
|
+
// The label is optional here ONLY to not break the API. Should be removed for 2.0.
|
|
270
|
+
// @ts-ignore
|
|
271
|
+
// eslint-disable-next-line no-unused-vars, @typescript-eslint/no-unused-vars
|
|
272
|
+
async setValue(value, label) {
|
|
273
|
+
let nextValue;
|
|
274
|
+
if (typeof value === 'string')
|
|
275
|
+
nextValue = [value];
|
|
276
|
+
else
|
|
277
|
+
nextValue = value;
|
|
278
|
+
if (!this.multiselect && nextValue.length > 1) {
|
|
279
|
+
console.warn('Tried to select multiple items, but multiselect is not enabled.');
|
|
280
|
+
nextValue = [nextValue[0]];
|
|
281
|
+
}
|
|
282
|
+
nextValue = [...new Set(nextValue)];
|
|
283
|
+
this.internalReset();
|
|
284
|
+
for (let i = 0; i < nextValue.length; i++) {
|
|
285
|
+
const optionExist = this.getChildren().some((element) => element.value === nextValue[i]);
|
|
286
|
+
if (!optionExist) {
|
|
287
|
+
nextValue.splice(i, 1);
|
|
265
288
|
}
|
|
266
|
-
return isValid;
|
|
267
|
-
});
|
|
268
|
-
}
|
|
269
|
-
updateOptionElements() {
|
|
270
|
-
var _a;
|
|
271
|
-
(_a = this.getChildren()) === null || _a === void 0 ? void 0 : _a.forEach((element) => {
|
|
272
|
-
element.setSelected(this.selectedOptions.includes(element.value));
|
|
273
|
-
});
|
|
274
|
-
}
|
|
275
|
-
updateDisplayValue() {
|
|
276
|
-
this.internalValue = this.getSelectedChildrenLabels().join(', ');
|
|
277
|
-
if (this.filter && this.inputElement) {
|
|
278
|
-
this.inputElement.value = this.internalValue;
|
|
279
289
|
}
|
|
280
|
-
|
|
281
|
-
|
|
282
|
-
|
|
283
|
-
|
|
284
|
-
|
|
285
|
-
|
|
286
|
-
|
|
287
|
-
value: value !== null && value !== void 0 ? value : null,
|
|
288
|
-
});
|
|
289
|
-
}
|
|
290
|
-
async setValue(value) {
|
|
291
|
-
const normalizedValue = this.normalizeValue(value);
|
|
292
|
-
this.updateDropdownState(normalizedValue);
|
|
293
|
-
return this.getSelectedChildren().map((element) => ({
|
|
290
|
+
this.value = nextValue;
|
|
291
|
+
this.setValueAttribute();
|
|
292
|
+
this.selectChildrenAsSelectedBasedOnSelectionProp();
|
|
293
|
+
this.handleChange();
|
|
294
|
+
/* This returns an array of object with a value and label pair. This is ONLY to not break the API. Should be removed for 2.0. */
|
|
295
|
+
/* https://tegel.atlassian.net/browse/CDEP-2703 */
|
|
296
|
+
const selection = this.getSelectedChildren().map((element) => ({
|
|
294
297
|
value: element.value,
|
|
295
298
|
label: element.textContent.trim(),
|
|
296
299
|
}));
|
|
300
|
+
// Update inputElement value and placeholder text
|
|
301
|
+
if (this.filter) {
|
|
302
|
+
this.inputElement.value = this.getValue();
|
|
303
|
+
}
|
|
304
|
+
return selection;
|
|
297
305
|
}
|
|
298
|
-
|
|
299
|
-
|
|
306
|
+
/**
|
|
307
|
+
* @internal
|
|
308
|
+
*/
|
|
309
|
+
async appendValue(value) {
|
|
310
|
+
if (this.multiselect && this.value) {
|
|
311
|
+
this.setValue([...this.value, value]);
|
|
312
|
+
}
|
|
313
|
+
else {
|
|
314
|
+
this.setValue(value);
|
|
315
|
+
}
|
|
300
316
|
}
|
|
317
|
+
/** Method for removing a selected value in the Dropdown. */
|
|
301
318
|
async removeValue(oldValue) {
|
|
302
|
-
|
|
303
|
-
|
|
304
|
-
|
|
305
|
-
|
|
306
|
-
|
|
307
|
-
|
|
308
|
-
|
|
319
|
+
var _a, _b;
|
|
320
|
+
let label;
|
|
321
|
+
if (this.multiselect) {
|
|
322
|
+
(_a = this.getChildren()) === null || _a === void 0 ? void 0 : _a.forEach((element) => {
|
|
323
|
+
var _a;
|
|
324
|
+
if (element.value === oldValue) {
|
|
325
|
+
this.value = (_a = this.value) === null || _a === void 0 ? void 0 : _a.filter((value) => value !== element.value);
|
|
326
|
+
label = element.textContent.trim();
|
|
327
|
+
element.setSelected(false);
|
|
328
|
+
}
|
|
329
|
+
return element;
|
|
330
|
+
});
|
|
331
|
+
}
|
|
332
|
+
else {
|
|
333
|
+
this.reset();
|
|
334
|
+
}
|
|
335
|
+
this.handleChange();
|
|
336
|
+
this.setValueAttribute();
|
|
337
|
+
/* This returns an array of object with a value and label pair. This is ONLY to not break the API. Should be removed for 2.0. */
|
|
338
|
+
/* https://tegel.atlassian.net/browse/CDEP-2703 */
|
|
339
|
+
return (_b = this.value) === null || _b === void 0 ? void 0 : _b.map((value) => ({ value, label }));
|
|
309
340
|
}
|
|
310
341
|
/** Method for closing the Dropdown. */
|
|
311
342
|
async close() {
|
|
@@ -354,15 +385,12 @@ const TdsDropdown = /*@__PURE__*/ proxyCustomElement(class TdsDropdown extends H
|
|
|
354
385
|
handleOpenState() {
|
|
355
386
|
if (this.filter && this.multiselect) {
|
|
356
387
|
if (!this.open) {
|
|
357
|
-
this.inputElement.value = this.
|
|
388
|
+
this.inputElement.value = this.getValue();
|
|
358
389
|
}
|
|
359
390
|
}
|
|
360
391
|
}
|
|
361
392
|
componentWillLoad() {
|
|
362
|
-
|
|
363
|
-
const initialValue = this.multiselect ? this.defaultValue.split(',') : [this.defaultValue];
|
|
364
|
-
this.updateDropdownState(initialValue);
|
|
365
|
-
}
|
|
393
|
+
this.setDefaultOption();
|
|
366
394
|
}
|
|
367
395
|
/** Method to handle slot changes */
|
|
368
396
|
handleSlotChange() {
|
|
@@ -372,13 +400,29 @@ const TdsDropdown = /*@__PURE__*/ proxyCustomElement(class TdsDropdown extends H
|
|
|
372
400
|
normalizeString(text) {
|
|
373
401
|
return this.normalizeText ? text.normalize('NFD').replace(/\p{Diacritic}/gu, '') : text;
|
|
374
402
|
}
|
|
375
|
-
|
|
376
|
-
|
|
377
|
-
|
|
378
|
-
|
|
379
|
-
|
|
380
|
-
|
|
381
|
-
|
|
403
|
+
/** Method that resets the dropdown without emitting an event. */
|
|
404
|
+
internalReset() {
|
|
405
|
+
this.getChildren().forEach((element) => {
|
|
406
|
+
element.setSelected(false);
|
|
407
|
+
return element;
|
|
408
|
+
});
|
|
409
|
+
this.value = null;
|
|
410
|
+
this.setValueAttribute();
|
|
411
|
+
}
|
|
412
|
+
selectChildrenAsSelectedBasedOnSelectionProp() {
|
|
413
|
+
this.getChildren().forEach((element) => {
|
|
414
|
+
this.value.forEach((selection) => {
|
|
415
|
+
if (element.value !== selection) {
|
|
416
|
+
// If not multiselect, we need to unselect all other options.
|
|
417
|
+
if (!this.multiselect) {
|
|
418
|
+
element.setSelected(false);
|
|
419
|
+
}
|
|
420
|
+
}
|
|
421
|
+
else {
|
|
422
|
+
element.setSelected(true);
|
|
423
|
+
}
|
|
424
|
+
});
|
|
425
|
+
});
|
|
382
426
|
}
|
|
383
427
|
componentDidRender() {
|
|
384
428
|
const form = this.host.closest('form');
|
|
@@ -393,8 +437,9 @@ const TdsDropdown = /*@__PURE__*/ proxyCustomElement(class TdsDropdown extends H
|
|
|
393
437
|
}
|
|
394
438
|
}
|
|
395
439
|
render() {
|
|
396
|
-
|
|
397
|
-
|
|
440
|
+
var _a, _b, _c, _d;
|
|
441
|
+
appendHiddenInput(this.host, this.name, (_a = this.value) === null || _a === void 0 ? void 0 : _a.map((value) => value).toString(), this.disabled);
|
|
442
|
+
return (h(Host, { key: 'b452aebe0997ce114fff5c7527d7305e97bf6462', role: "select", class: `${this.modeVariant ? `tds-mode-variant-${this.modeVariant}` : ''}` }, this.label && this.labelPosition === 'outside' && (h("div", { key: '356273d3065daebba4d72a7f30f745dab1eb803e', class: `label-outside ${this.disabled ? 'disabled' : ''}` }, this.label)), h("div", { key: 'c8b617da62a01e0432fee90c243723edde5fecca', class: `dropdown-select ${this.size} ${this.disabled ? 'disabled' : ''}` }, this.filter ? (h("div", { class: {
|
|
398
443
|
filter: true,
|
|
399
444
|
focus: this.filterFocus,
|
|
400
445
|
disabled: this.disabled,
|
|
@@ -402,7 +447,7 @@ const TdsDropdown = /*@__PURE__*/ proxyCustomElement(class TdsDropdown extends H
|
|
|
402
447
|
} }, h("div", { class: "value-wrapper" }, this.label && this.labelPosition === 'inside' && this.placeholder && (h("div", { class: `label-inside ${this.size}` }, this.label)), this.label && this.labelPosition === 'inside' && !this.placeholder && (h("div", { class: `
|
|
403
448
|
label-inside-as-placeholder
|
|
404
449
|
${this.size}
|
|
405
|
-
${this.
|
|
450
|
+
${((_b = this.value) === null || _b === void 0 ? void 0 : _b.length) ? 'selected' : ''}
|
|
406
451
|
` }, this.label)), h("input", {
|
|
407
452
|
// eslint-disable-next-line no-return-assign
|
|
408
453
|
ref: (inputEl) => (this.inputElement = inputEl), class: `${this.labelPosition === 'inside' ? 'placeholder' : ''}`, type: "text", placeholder: this.filterFocus ? '' : this.placeholder, value: this.multiselect && this.filterFocus ? '' : this.getValue(), disabled: this.disabled, onInput: (event) => this.handleFilter(event), onBlur: (event) => {
|
|
@@ -411,7 +456,15 @@ const TdsDropdown = /*@__PURE__*/ proxyCustomElement(class TdsDropdown extends H
|
|
|
411
456
|
this.inputElement.value = this.getValue();
|
|
412
457
|
}
|
|
413
458
|
this.handleBlur(event);
|
|
414
|
-
}, onFocus: (event) =>
|
|
459
|
+
}, onFocus: (event) => {
|
|
460
|
+
this.open = true;
|
|
461
|
+
this.filterFocus = true;
|
|
462
|
+
if (this.multiselect) {
|
|
463
|
+
this.inputElement.value = '';
|
|
464
|
+
}
|
|
465
|
+
this.handleFocus(event);
|
|
466
|
+
this.handleFilter({ target: { value: '' } });
|
|
467
|
+
}, onKeyDown: (event) => {
|
|
415
468
|
if (event.key === 'Escape') {
|
|
416
469
|
this.open = false;
|
|
417
470
|
}
|
|
@@ -429,14 +482,14 @@ const TdsDropdown = /*@__PURE__*/ proxyCustomElement(class TdsDropdown extends H
|
|
|
429
482
|
this.open = false;
|
|
430
483
|
}
|
|
431
484
|
}, class: `
|
|
432
|
-
${this.
|
|
485
|
+
${this.value ? 'value' : 'placeholder'}
|
|
433
486
|
${this.open ? 'open' : 'closed'}
|
|
434
487
|
${this.error ? 'error' : ''}
|
|
435
488
|
`, disabled: this.disabled }, h("div", { class: `value-wrapper ${this.size}` }, this.label && this.labelPosition === 'inside' && this.placeholder && (h("div", { class: `label-inside ${this.size}` }, this.label)), this.label && this.labelPosition === 'inside' && !this.placeholder && (h("div", { class: `
|
|
436
489
|
label-inside-as-placeholder
|
|
437
490
|
${this.size}
|
|
438
|
-
${this.
|
|
439
|
-
` }, this.label)), h("div", { class: `placeholder ${this.size}` }, this.
|
|
491
|
+
${((_c = this.value) === null || _c === void 0 ? void 0 : _c.length) ? 'selected' : ''}
|
|
492
|
+
` }, this.label)), h("div", { class: `placeholder ${this.size}` }, ((_d = this.value) === null || _d === void 0 ? void 0 : _d.length) ? this.getValue() : this.placeholder), h("tds-icon", { "aria-label": "Open/Close dropdown", svgTitle: "Open/Close dropdown", class: `menu-icon ${this.open ? 'open' : 'closed'}`, name: "chevron_down", size: "16px" }))))), h("div", { key: 'bd702f67929bfd42350b11a9680e007dd74e4bad', ref: (element) => (this.dropdownList = element), class: {
|
|
440
493
|
'dropdown-list': true,
|
|
441
494
|
[this.size]: true,
|
|
442
495
|
[this.getOpenDirection()]: true,
|
|
@@ -445,11 +498,10 @@ const TdsDropdown = /*@__PURE__*/ proxyCustomElement(class TdsDropdown extends H
|
|
|
445
498
|
'closed': !this.open,
|
|
446
499
|
[`animation-enter-${this.animation}`]: this.animation !== 'none' && this.open,
|
|
447
500
|
[`animation-exit-${this.animation}`]: this.animation !== 'none' && !this.open,
|
|
448
|
-
} }, h("slot", { key: '
|
|
501
|
+
} }, h("slot", { key: '64c67c8aa6aa68089c59de1fdedb915ea4beb3af', onSlotchange: () => this.handleSlotChange() }), this.filterResult === 0 && this.noResultText !== '' && (h("div", { key: '2152a99732579e2c2f7e82d450743e67d8b9f263', class: `no-result ${this.size}` }, this.noResultText))), this.helper && (h("div", { key: 'fbc4ebc39a4ca4fc49a77ea1160042ad1de005ec', class: `helper ${this.error ? 'error' : ''} ${this.disabled ? 'disabled' : ''}` }, this.error && h("tds-icon", { key: '318107cbe939b82250bb97bfbceae4017e438ba1', name: "error", size: "16px" }), this.helper))));
|
|
449
502
|
}
|
|
450
503
|
get host() { return this; }
|
|
451
504
|
static get watchers() { return {
|
|
452
|
-
"value": ["handleValueChange"],
|
|
453
505
|
"open": ["handleOpenState"]
|
|
454
506
|
}; }
|
|
455
507
|
static get style() { return TdsDropdownStyle0; }
|
|
@@ -470,20 +522,17 @@ const TdsDropdown = /*@__PURE__*/ proxyCustomElement(class TdsDropdown extends H
|
|
|
470
522
|
"normalizeText": [4, "normalize-text"],
|
|
471
523
|
"noResultText": [1, "no-result-text"],
|
|
472
524
|
"defaultValue": [1, "default-value"],
|
|
473
|
-
"value": [1025],
|
|
474
525
|
"open": [32],
|
|
475
|
-
"
|
|
526
|
+
"value": [32],
|
|
476
527
|
"filterResult": [32],
|
|
477
528
|
"filterFocus": [32],
|
|
478
|
-
"selectedOptions": [32],
|
|
479
|
-
"setValue": [64],
|
|
480
529
|
"reset": [64],
|
|
481
|
-
"removeValue": [64],
|
|
482
530
|
"focusElement": [64],
|
|
483
|
-
"
|
|
484
|
-
"appendValue": [64]
|
|
531
|
+
"setValue": [64],
|
|
532
|
+
"appendValue": [64],
|
|
533
|
+
"removeValue": [64],
|
|
534
|
+
"close": [64]
|
|
485
535
|
}, [[9, "mousedown", "onAnyClick"], [0, "keydown", "onKeyDown"]], {
|
|
486
|
-
"value": ["handleValueChange"],
|
|
487
536
|
"open": ["handleOpenState"]
|
|
488
537
|
}]);
|
|
489
538
|
function defineCustomElement() {
|
|
@@ -24,7 +24,7 @@ const TdsButton$1 = /*@__PURE__*/ proxyCustomElement(class TdsButton extends H {
|
|
|
24
24
|
if (!this.text && !hasLabelSlot) {
|
|
25
25
|
this.onlyIcon = true;
|
|
26
26
|
}
|
|
27
|
-
return (h(Host, { key: '
|
|
27
|
+
return (h(Host, { key: '71db429108d29c9ef020624d0c244c4cd2edef57', class: `${this.modeVariant !== null ? `tds-mode-variant-${this.modeVariant}` : ''} `, disabled: this.disabled || undefined }, h("button", { key: '41b359a556677c4cd742307f3cb1a2069369ea34', type: this.type, disabled: this.disabled || undefined, class: {
|
|
28
28
|
'primary': this.variant === 'primary',
|
|
29
29
|
'secondary': this.variant === 'secondary',
|
|
30
30
|
'ghost': this.variant === 'ghost',
|
|
@@ -33,12 +33,12 @@ const TdsButton$1 = /*@__PURE__*/ proxyCustomElement(class TdsButton extends H {
|
|
|
33
33
|
'md': this.size === 'md',
|
|
34
34
|
'sm': this.size === 'sm',
|
|
35
35
|
'xs': this.size === 'xs',
|
|
36
|
-
'disabled': this.disabled,
|
|
36
|
+
'disabled': this.disabled || undefined,
|
|
37
37
|
'fullbleed': this.fullbleed,
|
|
38
38
|
'icon': hasIconSlot,
|
|
39
39
|
'only-icon': this.onlyIcon,
|
|
40
40
|
[`animation-${this.animation}`]: this.animation !== 'none',
|
|
41
|
-
} }, this.text, hasLabelSlot && !this.onlyIcon && h("slot", { key: '
|
|
41
|
+
} }, this.text, hasLabelSlot && !this.onlyIcon && h("slot", { key: 'a29ec965d4a8a53537422d057b7af6465257fd91', name: "label" }), hasIconSlot && h("slot", { key: 'cd5bc2189d57461155487a6b4c26b0a89ba22226', name: "icon" }))));
|
|
42
42
|
}
|
|
43
43
|
get host() { return this; }
|
|
44
44
|
static get style() { return TdsButtonStyle0; }
|
|
@@ -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-d921fe75.js';
|
|
3
|
-
import { d as defineCustomElement$4 } from './p-
|
|
3
|
+
import { d as defineCustomElement$4 } from './p-4f1aa84f.js';
|
|
4
4
|
import { d as defineCustomElement$3 } from './p-4030e9bc.js';
|
|
5
5
|
import { d as defineCustomElement$2 } from './p-e323cd2a.js';
|
|
6
6
|
|