@shoper/phoenix_design_system 1.18.8-0 → 1.18.8-1
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/build/cjs/packages/phoenix/src/components/form/select/model/select_option.js +2 -1
- package/build/cjs/packages/phoenix/src/components/form/select/model/select_option.js.map +1 -1
- package/build/cjs/packages/phoenix/src/components/form/select/model/select_option_mapper.js +3 -2
- package/build/cjs/packages/phoenix/src/components/form/select/model/select_option_mapper.js.map +1 -1
- package/build/cjs/packages/phoenix/src/components/form/select/select.js +87 -47
- package/build/cjs/packages/phoenix/src/components/form/select/select.js.map +1 -1
- package/build/cjs/packages/phoenix/src/components/form/select/select_utils.js +22 -2
- package/build/cjs/packages/phoenix/src/components/form/select/select_utils.js.map +1 -1
- package/build/esm/packages/phoenix/src/components/form/select/model/select_option.d.ts +1 -0
- package/build/esm/packages/phoenix/src/components/form/select/model/select_option.js +2 -1
- package/build/esm/packages/phoenix/src/components/form/select/model/select_option.js.map +1 -1
- package/build/esm/packages/phoenix/src/components/form/select/model/select_option_mapper.js +3 -2
- package/build/esm/packages/phoenix/src/components/form/select/model/select_option_mapper.js.map +1 -1
- package/build/esm/packages/phoenix/src/components/form/select/model/select_option_types.d.ts +1 -0
- package/build/esm/packages/phoenix/src/components/form/select/select.d.ts +5 -3
- package/build/esm/packages/phoenix/src/components/form/select/select.js +87 -47
- package/build/esm/packages/phoenix/src/components/form/select/select.js.map +1 -1
- package/build/esm/packages/phoenix/src/components/form/select/select_utils.d.ts +1 -0
- package/build/esm/packages/phoenix/src/components/form/select/select_utils.js +22 -2
- package/build/esm/packages/phoenix/src/components/form/select/select_utils.js.map +1 -1
- package/package.json +2 -2
|
@@ -3,13 +3,14 @@
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
5
|
class SelectOption {
|
|
6
|
-
constructor({ selected = false, hidden = false, disabled = false, value, content, inactive = false }) {
|
|
6
|
+
constructor({ selected = false, hidden = false, disabled = false, value, content, inactive = false, isPlaceholder = false }) {
|
|
7
7
|
this.value = value;
|
|
8
8
|
this.selected = selected;
|
|
9
9
|
this.hidden = hidden;
|
|
10
10
|
this.disabled = disabled;
|
|
11
11
|
this.content = content;
|
|
12
12
|
this.inactive = inactive;
|
|
13
|
+
this.isPlaceholder = isPlaceholder;
|
|
13
14
|
}
|
|
14
15
|
static create(options) {
|
|
15
16
|
return new SelectOption(options);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
|
|
1
|
+
{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
|
|
@@ -10,7 +10,7 @@ class SelectOptionMapper {
|
|
|
10
10
|
const $optionContent = $option.querySelector(select_components_constatns.SELECT_RELATED_COMPONENTS_NAMES.optionContent);
|
|
11
11
|
const optionContentText = ($optionContent === null || $optionContent === void 0 ? void 0 : $optionContent.textContent) || ($optionContent === null || $optionContent === void 0 ? void 0 : $optionContent.innerText);
|
|
12
12
|
const value = $option.getAttribute('value');
|
|
13
|
-
if (
|
|
13
|
+
if (value === null || value === undefined)
|
|
14
14
|
throw new Error('h-option must contain a unique value');
|
|
15
15
|
if (!optionContentText)
|
|
16
16
|
throw new Error('h-options must contains a h-option-content element inside');
|
|
@@ -20,7 +20,8 @@ class SelectOptionMapper {
|
|
|
20
20
|
hidden: $option.hasAttribute('hidden'),
|
|
21
21
|
inactive: $option.hasAttribute('inactive'),
|
|
22
22
|
content: optionContentText,
|
|
23
|
-
selected: $option.hasAttribute('selected')
|
|
23
|
+
selected: $option.hasAttribute('selected'),
|
|
24
|
+
isPlaceholder: $option.hasAttribute('placeholder')
|
|
24
25
|
});
|
|
25
26
|
}
|
|
26
27
|
}
|
package/build/cjs/packages/phoenix/src/components/form/select/model/select_option_mapper.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
|
|
1
|
+
{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
|
|
@@ -43,8 +43,8 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
|
|
|
43
43
|
this.type = select_constants.SELECT_TYPES.select;
|
|
44
44
|
this.noDeselect = false;
|
|
45
45
|
this.assistiveTitleId = '';
|
|
46
|
+
this.isDevSelectPlaceholderFlagEnabled = false;
|
|
46
47
|
this.translations = {};
|
|
47
|
-
this.isSelectedIndexReactive = false;
|
|
48
48
|
this._selectOptionsId = v4['default']();
|
|
49
49
|
this._searchValue = '';
|
|
50
50
|
this._$options = new Map();
|
|
@@ -58,7 +58,7 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
|
|
|
58
58
|
const $options = this._getOptions();
|
|
59
59
|
this._$options = $options.reduce((acc, $option) => {
|
|
60
60
|
const value = $option.getAttribute('value');
|
|
61
|
-
if (
|
|
61
|
+
if (value === null || value === undefined)
|
|
62
62
|
throw Error('Select option must hava a value');
|
|
63
63
|
if (acc.has(value))
|
|
64
64
|
throw Error('Select options must hava a unique values.');
|
|
@@ -115,12 +115,24 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
|
|
|
115
115
|
if (!this.$searchLabel)
|
|
116
116
|
return;
|
|
117
117
|
(_a = this.$searchLabel.querySelector(`[id="value-label"]`)) === null || _a === void 0 ? void 0 : _a.remove();
|
|
118
|
-
this
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
118
|
+
if (this.isDevSelectPlaceholderFlagEnabled) {
|
|
119
|
+
const hasValidOptions = options.some((option) => !option.isPlaceholder);
|
|
120
|
+
if (!hasValidOptions)
|
|
121
|
+
return;
|
|
122
|
+
const valueLabelSpan = document.createElement('span');
|
|
123
|
+
valueLabelSpan.id = 'value-label';
|
|
124
|
+
valueLabelSpan.className = 'sr-only';
|
|
125
|
+
valueLabelSpan.textContent = options.reduce((totalSelectedContent, currentOption) => totalSelectedContent + currentOption.content, '');
|
|
126
|
+
this.$searchLabel.appendChild(valueLabelSpan);
|
|
127
|
+
}
|
|
128
|
+
else {
|
|
129
|
+
this.$searchLabel.innerHTML = `
|
|
130
|
+
${(_b = this.$searchLabel) === null || _b === void 0 ? void 0 : _b.innerHTML}
|
|
131
|
+
<span id="value-label" class="sr-only">
|
|
132
|
+
${options.reduce((totalSelectedContent, currentOption) => (totalSelectedContent += currentOption.content), '')}
|
|
133
|
+
</span>
|
|
134
|
+
`;
|
|
135
|
+
}
|
|
124
136
|
};
|
|
125
137
|
this._handleOptionClicked = ({ detail }) => {
|
|
126
138
|
if (!(detail === null || detail === void 0 ? void 0 : detail.$option))
|
|
@@ -186,11 +198,9 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
|
|
|
186
198
|
: select_utils.SelectControlUtils.getLastIndexOfSelectedOption(htmlOptions);
|
|
187
199
|
}
|
|
188
200
|
set selectedIndex(index) {
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
}
|
|
193
|
-
this._applySelectedIndex(index);
|
|
201
|
+
const option = Array.from(this._$options.values()).filter(($option) => !$option.hidden)[index];
|
|
202
|
+
option ? this._selectOption(option.value) : this._selectController.deselectAll();
|
|
203
|
+
Array.from(this._$options.values()).forEach(($option) => this.updateOptionAriaAttribute($option));
|
|
194
204
|
}
|
|
195
205
|
get selectedOptions() {
|
|
196
206
|
var _a;
|
|
@@ -206,13 +216,6 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
|
|
|
206
216
|
get options() {
|
|
207
217
|
return Array.from(this._$options.values());
|
|
208
218
|
}
|
|
209
|
-
_applySelectedIndex(index) {
|
|
210
|
-
if (!this._selectController)
|
|
211
|
-
return;
|
|
212
|
-
const option = Array.from(this._$options.values()).filter(($option) => !$option.hidden)[index];
|
|
213
|
-
option ? this._selectOption(option.value) : this._selectController.deselectAll();
|
|
214
|
-
Array.from(this._$options.values()).forEach(($option) => this.updateOptionAriaAttribute($option));
|
|
215
|
-
}
|
|
216
219
|
updated(changedProperties) {
|
|
217
220
|
var _a, _b;
|
|
218
221
|
super.updated(changedProperties);
|
|
@@ -227,11 +230,8 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
|
|
|
227
230
|
}
|
|
228
231
|
if (changedProperties.has('optionsList')) {
|
|
229
232
|
this._updateOptions();
|
|
230
|
-
if (this.
|
|
231
|
-
|
|
232
|
-
if (this._reactiveSelectedIndexValue !== actualIndex) {
|
|
233
|
-
this._reactiveSelectedIndexValue = actualIndex === -1 ? undefined : actualIndex;
|
|
234
|
-
}
|
|
233
|
+
if (this.isDevSelectPlaceholderFlagEnabled) {
|
|
234
|
+
this._addPlaceholderOptionIfNeeded();
|
|
235
235
|
}
|
|
236
236
|
}
|
|
237
237
|
if (this._$optionsList.value) {
|
|
@@ -252,14 +252,6 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
|
|
|
252
252
|
$list: this._$optionsList.value
|
|
253
253
|
});
|
|
254
254
|
}
|
|
255
|
-
if (this.isSelectedIndexReactive &&
|
|
256
|
-
changedProperties.has('_reactiveSelectedIndexValue') &&
|
|
257
|
-
this._reactiveSelectedIndexValue !== undefined) {
|
|
258
|
-
const currentIndex = this.selectedIndex;
|
|
259
|
-
if (this._reactiveSelectedIndexValue !== currentIndex) {
|
|
260
|
-
this._applySelectedIndex(this._reactiveSelectedIndexValue);
|
|
261
|
-
}
|
|
262
|
-
}
|
|
263
255
|
}
|
|
264
256
|
_focusElementAfterSelectOpened() {
|
|
265
257
|
var _a;
|
|
@@ -289,6 +281,9 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
|
|
|
289
281
|
this._selectedOptionsAriaObserver = new observer.Observer((selectedOptions) => this._updateLabelAria(selectedOptions));
|
|
290
282
|
this._selectController.selectedOptions$.subscribe(this._selectedOptionsAriaObserver);
|
|
291
283
|
this._updateOptions();
|
|
284
|
+
if (this.isDevSelectPlaceholderFlagEnabled) {
|
|
285
|
+
this._addPlaceholderOptionIfNeeded();
|
|
286
|
+
}
|
|
292
287
|
this._setupEvents();
|
|
293
288
|
}
|
|
294
289
|
attributeChangedCallback(name, _old, value) {
|
|
@@ -301,6 +296,50 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
|
|
|
301
296
|
this.disabled ? this.classList.add(select_constants.SELECT_CSS_CLASSES.selectDisabled) : this.classList.remove(select_constants.SELECT_CSS_CLASSES.selectDisabled);
|
|
302
297
|
}
|
|
303
298
|
}
|
|
299
|
+
_addPlaceholderOptionIfNeeded() {
|
|
300
|
+
if (!this._canAddPlaceholder)
|
|
301
|
+
return;
|
|
302
|
+
const $placeholderOption = this._createPlaceholderOption();
|
|
303
|
+
this._injectOptionIntoDOM($placeholderOption);
|
|
304
|
+
this._updateOptions();
|
|
305
|
+
}
|
|
306
|
+
get _canAddPlaceholder() {
|
|
307
|
+
var _a;
|
|
308
|
+
if (this.multiple || this.required)
|
|
309
|
+
return false;
|
|
310
|
+
const hasSelection = (((_a = this._selectController.selectedOptions$.getValue()) === null || _a === void 0 ? void 0 : _a.length) || 0) > 0;
|
|
311
|
+
if (hasSelection)
|
|
312
|
+
return false;
|
|
313
|
+
const hasExistingPlaceholder = !!this.querySelector('h-option[placeholder]');
|
|
314
|
+
return !hasExistingPlaceholder;
|
|
315
|
+
}
|
|
316
|
+
_createPlaceholderOption() {
|
|
317
|
+
const $option = document.createElement('h-option');
|
|
318
|
+
$option.setAttribute('value', '');
|
|
319
|
+
$option.setAttribute('selected', 'true');
|
|
320
|
+
$option.setAttribute('placeholder', 'true');
|
|
321
|
+
$option.setAttribute('slot', select_constants.SELECT_SLOT_NAMES.content);
|
|
322
|
+
const $content = document.createElement(select_components_constatns.SELECT_RELATED_COMPONENTS_NAMES.optionContent);
|
|
323
|
+
if (typeof this.$placeholder === 'string') {
|
|
324
|
+
$content.textContent = this.$placeholder;
|
|
325
|
+
}
|
|
326
|
+
else if (this.$placeholder instanceof Node) {
|
|
327
|
+
Array.from(this.$placeholder.childNodes).forEach(node => {
|
|
328
|
+
$content.appendChild(node.cloneNode(true));
|
|
329
|
+
});
|
|
330
|
+
}
|
|
331
|
+
$option.appendChild($content);
|
|
332
|
+
return $option;
|
|
333
|
+
}
|
|
334
|
+
_injectOptionIntoDOM($option) {
|
|
335
|
+
const $firstOption = this.querySelector(select_components_constatns.SELECT_RELATED_COMPONENTS_NAMES.option);
|
|
336
|
+
if ($firstOption) {
|
|
337
|
+
this.insertBefore($option, $firstOption);
|
|
338
|
+
}
|
|
339
|
+
else {
|
|
340
|
+
this.appendChild($option);
|
|
341
|
+
}
|
|
342
|
+
}
|
|
304
343
|
_setupEvents() {
|
|
305
344
|
this.addEventListener(select_constants.SELECT_EVENT_NAMES.deselectOption, this._handleOptionDeselect);
|
|
306
345
|
this.addEventListener(select_components_constatns.SELECT_CLOSE_BTN_EVENT_NAMES.close, this._closeSelect);
|
|
@@ -381,7 +420,7 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
|
|
|
381
420
|
return fragment;
|
|
382
421
|
}
|
|
383
422
|
render() {
|
|
384
|
-
var _a, _b, _c, _d, _e;
|
|
423
|
+
var _a, _b, _c, _d, _e, _f;
|
|
385
424
|
const options = (_a = this._selectController.options$.getValue()) !== null && _a !== void 0 ? _a : [];
|
|
386
425
|
const isSearchEnabled = !this.searchDisabled && options.length > select_constants.MIN_NUMBER_OF_OPTIONS_TO_SHOW_SEARCH;
|
|
387
426
|
return lit.html `
|
|
@@ -405,6 +444,7 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
|
|
|
405
444
|
aria-activedescendant
|
|
406
445
|
role="combobox"
|
|
407
446
|
aria-controls="${this._selectOptionsId}"
|
|
447
|
+
aria-labelledby="${this.assistiveTitleId}"
|
|
408
448
|
>
|
|
409
449
|
${this.getSlot(select_constants.SELECT_SLOT_NAMES.toggler)}
|
|
410
450
|
</h-dropdown-toggler>
|
|
@@ -417,14 +457,18 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
|
|
|
417
457
|
>
|
|
418
458
|
<h-select-close-btn class="${select_constants.SELECT_CSS_CLASSES.selectCloseMobileButton}" @close=${this._closeSelect}></h-select-close-btn>
|
|
419
459
|
|
|
420
|
-
<div class=${select_constants.SELECT_CSS_CLASSES.selectLabel}
|
|
460
|
+
<div class=${select_constants.SELECT_CSS_CLASSES.selectLabel}>
|
|
461
|
+
${this.isDevSelectPlaceholderFlagEnabled ?
|
|
462
|
+
(_b = this.$searchLabel) === null || _b === void 0 ? void 0 : _b.cloneNode(true) :
|
|
463
|
+
lit.html `${this._getClonedPlaceholderElement()}`}
|
|
464
|
+
</div>
|
|
421
465
|
|
|
422
466
|
${isSearchEnabled
|
|
423
467
|
? lit.html ` <h-select-search
|
|
424
468
|
class=${select_constants.SELECT_CSS_CLASSES.selectSearch}
|
|
425
469
|
${ref_js.ref(this.$search)}
|
|
426
470
|
.value=${this._searchValue}
|
|
427
|
-
placeholder=${((
|
|
471
|
+
placeholder=${((_c = this.translations) === null || _c === void 0 ? void 0 : _c.search) || select_constants.SELECT_DEFAULT_TRANSLATIONS.SEARCH}
|
|
428
472
|
@search=${this._handleSearch}
|
|
429
473
|
></h-select-search>`
|
|
430
474
|
: lit.nothing}
|
|
@@ -445,7 +489,7 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
|
|
|
445
489
|
${this._searchNoResult()
|
|
446
490
|
? lit.html ` <div>
|
|
447
491
|
<p class=${select_constants.SELECT_CSS_CLASSES.selectNoResult}>
|
|
448
|
-
${((
|
|
492
|
+
${((_d = this.translations) === null || _d === void 0 ? void 0 : _d.noResultsFor) || select_constants.SELECT_DEFAULT_TRANSLATIONS.NO_RESULTS_FOR}:
|
|
449
493
|
<em class=${select_constants.SELECT_CSS_CLASSES.selectSearchedPhrase}>"${this._searchValue}"</em>
|
|
450
494
|
</p>
|
|
451
495
|
</div>`
|
|
@@ -454,11 +498,11 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
|
|
|
454
498
|
? lit.html `
|
|
455
499
|
<section class=${select_constants.SELECT_CSS_CLASSES.selectFooter}>
|
|
456
500
|
<button class="${select_constants.SELECT_CSS_CLASSES.selectClearButton}" @click=${this._clearOptions}>
|
|
457
|
-
${((
|
|
501
|
+
${((_e = this.translations) === null || _e === void 0 ? void 0 : _e.reset) || select_constants.SELECT_DEFAULT_TRANSLATIONS.RESET}
|
|
458
502
|
</button>
|
|
459
503
|
<h-select-close-btn class="${select_constants.SELECT_CSS_CLASSES.selectCloseButton}" @close=${this._closeSelect}
|
|
460
504
|
><span slot=${select_components_constatns.SELECT_CLOSE_BUTTON_CONTENT_SLOT_NAME}
|
|
461
|
-
>${((
|
|
505
|
+
>${((_f = this.translations) === null || _f === void 0 ? void 0 : _f.choose) || select_constants.SELECT_DEFAULT_TRANSLATIONS.CHOOSE}</span
|
|
462
506
|
>
|
|
463
507
|
</h-select-close-btn>
|
|
464
508
|
</section>
|
|
@@ -532,6 +576,10 @@ tslib_es6.__decorate([
|
|
|
532
576
|
decorators_js.property({ type: String, attribute: 'assistive-title-id' }),
|
|
533
577
|
tslib_es6.__metadata("design:type", String)
|
|
534
578
|
], exports.HSelect.prototype, "assistiveTitleId", void 0);
|
|
579
|
+
tslib_es6.__decorate([
|
|
580
|
+
decorators_js.property({ type: Boolean, attribute: 'is-dev-select-placeholder-flag-enabled' }),
|
|
581
|
+
tslib_es6.__metadata("design:type", Boolean)
|
|
582
|
+
], exports.HSelect.prototype, "isDevSelectPlaceholderFlagEnabled", void 0);
|
|
535
583
|
tslib_es6.__decorate([
|
|
536
584
|
decorators_js.property({
|
|
537
585
|
converter: {
|
|
@@ -553,14 +601,6 @@ tslib_es6.__decorate([
|
|
|
553
601
|
}),
|
|
554
602
|
tslib_es6.__metadata("design:type", Object)
|
|
555
603
|
], exports.HSelect.prototype, "translations", void 0);
|
|
556
|
-
tslib_es6.__decorate([
|
|
557
|
-
decorators_js.property({ type: Boolean, attribute: 'is-selected-index-reactive' }),
|
|
558
|
-
tslib_es6.__metadata("design:type", Boolean)
|
|
559
|
-
], exports.HSelect.prototype, "isSelectedIndexReactive", void 0);
|
|
560
|
-
tslib_es6.__decorate([
|
|
561
|
-
decorators_js.property({ type: Number, attribute: false }),
|
|
562
|
-
tslib_es6.__metadata("design:type", Number)
|
|
563
|
-
], exports.HSelect.prototype, "_reactiveSelectedIndexValue", void 0);
|
|
564
604
|
tslib_es6.__decorate([
|
|
565
605
|
decorators.state(),
|
|
566
606
|
tslib_es6.__metadata("design:type", String)
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA,wBAAwB,+CAAmD;AAC3E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,iBAAiB,wDAA4D;AAC7E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
|
|
1
|
+
{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA,wBAAwB,+CAAmD;AAC3E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,iBAAiB,wDAA4D;AAC7E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
|
|
@@ -6,7 +6,7 @@ var select_components_constatns = require('./components/select_components_consta
|
|
|
6
6
|
|
|
7
7
|
class SelectControlUtils {
|
|
8
8
|
static createHTMLOption(option) {
|
|
9
|
-
const { selected, value, disabled, hidden, content } = option;
|
|
9
|
+
const { selected, value, disabled, hidden, content, isPlaceholder } = option;
|
|
10
10
|
const $option = document.createElement(select_components_constatns.SELECT_RELATED_COMPONENTS_NAMES.option);
|
|
11
11
|
$option.setAttribute('value', String(value));
|
|
12
12
|
const $optionContent = document.createElement(select_components_constatns.SELECT_RELATED_COMPONENTS_NAMES.optionContent);
|
|
@@ -18,14 +18,17 @@ class SelectControlUtils {
|
|
|
18
18
|
$option.setAttribute('disabled', '');
|
|
19
19
|
if (hidden)
|
|
20
20
|
$option.setAttribute('hidden', '');
|
|
21
|
+
if (isPlaceholder)
|
|
22
|
+
$option.setAttribute('placeholder', 'true');
|
|
21
23
|
return $option;
|
|
22
24
|
}
|
|
23
25
|
static syncHTMLOptionWithModel(option, $option) {
|
|
24
|
-
const { selected, value, disabled, hidden } = option;
|
|
26
|
+
const { selected, value, disabled, hidden, isPlaceholder } = option;
|
|
25
27
|
$option.selected = selected;
|
|
26
28
|
$option.value = value;
|
|
27
29
|
$option.disabled = disabled;
|
|
28
30
|
$option.hidden = hidden;
|
|
31
|
+
$option.toggleAttribute('placeholder', isPlaceholder);
|
|
29
32
|
}
|
|
30
33
|
static removeHTMLOptions($options, optionsValuesThatExists) {
|
|
31
34
|
return $options.reduce((acc, $option) => {
|
|
@@ -50,6 +53,23 @@ class SelectControlUtils {
|
|
|
50
53
|
const firstIndexInReversed = [...options].reverse().findIndex((option) => option.selected);
|
|
51
54
|
return options.length - firstIndexInReversed - 1;
|
|
52
55
|
}
|
|
56
|
+
static extractSelectValue($select) {
|
|
57
|
+
var _a;
|
|
58
|
+
const { selectedOptions } = $select;
|
|
59
|
+
const selectedValues = Array.from(selectedOptions).map((option) => option.value);
|
|
60
|
+
if (selectedValues.length === 0) {
|
|
61
|
+
return undefined;
|
|
62
|
+
}
|
|
63
|
+
const isPlaceholder = !$select.multiple && selectedOptions.length === 1 && ((_a = selectedOptions[0]) === null || _a === void 0 ? void 0 : _a.hasAttribute('placeholder'));
|
|
64
|
+
const isSingleEmptyValue = selectedValues.length === 1 && selectedValues[0] === '';
|
|
65
|
+
if (isPlaceholder && isSingleEmptyValue) {
|
|
66
|
+
return null;
|
|
67
|
+
}
|
|
68
|
+
if ($select.multiple) {
|
|
69
|
+
return selectedValues;
|
|
70
|
+
}
|
|
71
|
+
return selectedValues[0];
|
|
72
|
+
}
|
|
53
73
|
}
|
|
54
74
|
|
|
55
75
|
exports.SelectControlUtils = SelectControlUtils;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
|
|
1
|
+
{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
|
|
@@ -1,11 +1,12 @@
|
|
|
1
1
|
class SelectOption {
|
|
2
|
-
constructor({ selected = false, hidden = false, disabled = false, value, content, inactive = false }) {
|
|
2
|
+
constructor({ selected = false, hidden = false, disabled = false, value, content, inactive = false, isPlaceholder = false }) {
|
|
3
3
|
this.value = value;
|
|
4
4
|
this.selected = selected;
|
|
5
5
|
this.hidden = hidden;
|
|
6
6
|
this.disabled = disabled;
|
|
7
7
|
this.content = content;
|
|
8
8
|
this.inactive = inactive;
|
|
9
|
+
this.isPlaceholder = isPlaceholder;
|
|
9
10
|
}
|
|
10
11
|
static create(options) {
|
|
11
12
|
return new SelectOption(options);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
|
|
1
|
+
{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
|
|
@@ -6,7 +6,7 @@ class SelectOptionMapper {
|
|
|
6
6
|
const $optionContent = $option.querySelector(SELECT_RELATED_COMPONENTS_NAMES.optionContent);
|
|
7
7
|
const optionContentText = ($optionContent === null || $optionContent === void 0 ? void 0 : $optionContent.textContent) || ($optionContent === null || $optionContent === void 0 ? void 0 : $optionContent.innerText);
|
|
8
8
|
const value = $option.getAttribute('value');
|
|
9
|
-
if (
|
|
9
|
+
if (value === null || value === undefined)
|
|
10
10
|
throw new Error('h-option must contain a unique value');
|
|
11
11
|
if (!optionContentText)
|
|
12
12
|
throw new Error('h-options must contains a h-option-content element inside');
|
|
@@ -16,7 +16,8 @@ class SelectOptionMapper {
|
|
|
16
16
|
hidden: $option.hasAttribute('hidden'),
|
|
17
17
|
inactive: $option.hasAttribute('inactive'),
|
|
18
18
|
content: optionContentText,
|
|
19
|
-
selected: $option.hasAttribute('selected')
|
|
19
|
+
selected: $option.hasAttribute('selected'),
|
|
20
|
+
isPlaceholder: $option.hasAttribute('placeholder')
|
|
20
21
|
});
|
|
21
22
|
}
|
|
22
23
|
}
|
package/build/esm/packages/phoenix/src/components/form/select/model/select_option_mapper.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
|
|
1
|
+
{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
|
|
@@ -23,9 +23,8 @@ export declare class HSelect extends PhoenixLightLitElement {
|
|
|
23
23
|
optionsList?: TSelectOption[];
|
|
24
24
|
noDeselect: boolean;
|
|
25
25
|
assistiveTitleId: string;
|
|
26
|
+
isDevSelectPlaceholderFlagEnabled: boolean;
|
|
26
27
|
translations: Record<string, string>;
|
|
27
|
-
isSelectedIndexReactive: boolean;
|
|
28
|
-
_reactiveSelectedIndexValue?: number;
|
|
29
28
|
private _selectOptionsId;
|
|
30
29
|
get selectedIndex(): number;
|
|
31
30
|
set selectedIndex(index: number);
|
|
@@ -49,13 +48,16 @@ export declare class HSelect extends PhoenixLightLitElement {
|
|
|
49
48
|
private $placeholder;
|
|
50
49
|
private $searchLabel;
|
|
51
50
|
constructor();
|
|
52
|
-
private _applySelectedIndex;
|
|
53
51
|
updated(changedProperties: PropertyValues): void;
|
|
54
52
|
private _focusElementAfterSelectOpened;
|
|
55
53
|
connectedCallback(): void;
|
|
56
54
|
attributeChangedCallback(name: string, _old: string | null, value: string | null): void;
|
|
57
55
|
private _updateOptions;
|
|
58
56
|
private _getOptions;
|
|
57
|
+
private _addPlaceholderOptionIfNeeded;
|
|
58
|
+
private get _canAddPlaceholder();
|
|
59
|
+
private _createPlaceholderOption;
|
|
60
|
+
private _injectOptionIntoDOM;
|
|
59
61
|
private _setupEvents;
|
|
60
62
|
private _handleOptionDeselect;
|
|
61
63
|
private _updateOptionsView;
|
|
@@ -39,8 +39,8 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
|
|
|
39
39
|
this.type = SELECT_TYPES.select;
|
|
40
40
|
this.noDeselect = false;
|
|
41
41
|
this.assistiveTitleId = '';
|
|
42
|
+
this.isDevSelectPlaceholderFlagEnabled = false;
|
|
42
43
|
this.translations = {};
|
|
43
|
-
this.isSelectedIndexReactive = false;
|
|
44
44
|
this._selectOptionsId = v4();
|
|
45
45
|
this._searchValue = '';
|
|
46
46
|
this._$options = new Map();
|
|
@@ -54,7 +54,7 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
|
|
|
54
54
|
const $options = this._getOptions();
|
|
55
55
|
this._$options = $options.reduce((acc, $option) => {
|
|
56
56
|
const value = $option.getAttribute('value');
|
|
57
|
-
if (
|
|
57
|
+
if (value === null || value === undefined)
|
|
58
58
|
throw Error('Select option must hava a value');
|
|
59
59
|
if (acc.has(value))
|
|
60
60
|
throw Error('Select options must hava a unique values.');
|
|
@@ -111,12 +111,24 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
|
|
|
111
111
|
if (!this.$searchLabel)
|
|
112
112
|
return;
|
|
113
113
|
(_a = this.$searchLabel.querySelector(`[id="value-label"]`)) === null || _a === void 0 ? void 0 : _a.remove();
|
|
114
|
-
this
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
114
|
+
if (this.isDevSelectPlaceholderFlagEnabled) {
|
|
115
|
+
const hasValidOptions = options.some((option) => !option.isPlaceholder);
|
|
116
|
+
if (!hasValidOptions)
|
|
117
|
+
return;
|
|
118
|
+
const valueLabelSpan = document.createElement('span');
|
|
119
|
+
valueLabelSpan.id = 'value-label';
|
|
120
|
+
valueLabelSpan.className = 'sr-only';
|
|
121
|
+
valueLabelSpan.textContent = options.reduce((totalSelectedContent, currentOption) => totalSelectedContent + currentOption.content, '');
|
|
122
|
+
this.$searchLabel.appendChild(valueLabelSpan);
|
|
123
|
+
}
|
|
124
|
+
else {
|
|
125
|
+
this.$searchLabel.innerHTML = `
|
|
126
|
+
${(_b = this.$searchLabel) === null || _b === void 0 ? void 0 : _b.innerHTML}
|
|
127
|
+
<span id="value-label" class="sr-only">
|
|
128
|
+
${options.reduce((totalSelectedContent, currentOption) => (totalSelectedContent += currentOption.content), '')}
|
|
129
|
+
</span>
|
|
130
|
+
`;
|
|
131
|
+
}
|
|
120
132
|
};
|
|
121
133
|
this._handleOptionClicked = ({ detail }) => {
|
|
122
134
|
if (!(detail === null || detail === void 0 ? void 0 : detail.$option))
|
|
@@ -182,11 +194,9 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
|
|
|
182
194
|
: SelectControlUtils.getLastIndexOfSelectedOption(htmlOptions);
|
|
183
195
|
}
|
|
184
196
|
set selectedIndex(index) {
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
}
|
|
189
|
-
this._applySelectedIndex(index);
|
|
197
|
+
const option = Array.from(this._$options.values()).filter(($option) => !$option.hidden)[index];
|
|
198
|
+
option ? this._selectOption(option.value) : this._selectController.deselectAll();
|
|
199
|
+
Array.from(this._$options.values()).forEach(($option) => this.updateOptionAriaAttribute($option));
|
|
190
200
|
}
|
|
191
201
|
get selectedOptions() {
|
|
192
202
|
var _a;
|
|
@@ -202,13 +212,6 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
|
|
|
202
212
|
get options() {
|
|
203
213
|
return Array.from(this._$options.values());
|
|
204
214
|
}
|
|
205
|
-
_applySelectedIndex(index) {
|
|
206
|
-
if (!this._selectController)
|
|
207
|
-
return;
|
|
208
|
-
const option = Array.from(this._$options.values()).filter(($option) => !$option.hidden)[index];
|
|
209
|
-
option ? this._selectOption(option.value) : this._selectController.deselectAll();
|
|
210
|
-
Array.from(this._$options.values()).forEach(($option) => this.updateOptionAriaAttribute($option));
|
|
211
|
-
}
|
|
212
215
|
updated(changedProperties) {
|
|
213
216
|
var _a, _b;
|
|
214
217
|
super.updated(changedProperties);
|
|
@@ -223,11 +226,8 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
|
|
|
223
226
|
}
|
|
224
227
|
if (changedProperties.has('optionsList')) {
|
|
225
228
|
this._updateOptions();
|
|
226
|
-
if (this.
|
|
227
|
-
|
|
228
|
-
if (this._reactiveSelectedIndexValue !== actualIndex) {
|
|
229
|
-
this._reactiveSelectedIndexValue = actualIndex === -1 ? undefined : actualIndex;
|
|
230
|
-
}
|
|
229
|
+
if (this.isDevSelectPlaceholderFlagEnabled) {
|
|
230
|
+
this._addPlaceholderOptionIfNeeded();
|
|
231
231
|
}
|
|
232
232
|
}
|
|
233
233
|
if (this._$optionsList.value) {
|
|
@@ -248,14 +248,6 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
|
|
|
248
248
|
$list: this._$optionsList.value
|
|
249
249
|
});
|
|
250
250
|
}
|
|
251
|
-
if (this.isSelectedIndexReactive &&
|
|
252
|
-
changedProperties.has('_reactiveSelectedIndexValue') &&
|
|
253
|
-
this._reactiveSelectedIndexValue !== undefined) {
|
|
254
|
-
const currentIndex = this.selectedIndex;
|
|
255
|
-
if (this._reactiveSelectedIndexValue !== currentIndex) {
|
|
256
|
-
this._applySelectedIndex(this._reactiveSelectedIndexValue);
|
|
257
|
-
}
|
|
258
|
-
}
|
|
259
251
|
}
|
|
260
252
|
_focusElementAfterSelectOpened() {
|
|
261
253
|
var _a;
|
|
@@ -285,6 +277,9 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
|
|
|
285
277
|
this._selectedOptionsAriaObserver = new Observer((selectedOptions) => this._updateLabelAria(selectedOptions));
|
|
286
278
|
this._selectController.selectedOptions$.subscribe(this._selectedOptionsAriaObserver);
|
|
287
279
|
this._updateOptions();
|
|
280
|
+
if (this.isDevSelectPlaceholderFlagEnabled) {
|
|
281
|
+
this._addPlaceholderOptionIfNeeded();
|
|
282
|
+
}
|
|
288
283
|
this._setupEvents();
|
|
289
284
|
}
|
|
290
285
|
attributeChangedCallback(name, _old, value) {
|
|
@@ -297,6 +292,50 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
|
|
|
297
292
|
this.disabled ? this.classList.add(SELECT_CSS_CLASSES.selectDisabled) : this.classList.remove(SELECT_CSS_CLASSES.selectDisabled);
|
|
298
293
|
}
|
|
299
294
|
}
|
|
295
|
+
_addPlaceholderOptionIfNeeded() {
|
|
296
|
+
if (!this._canAddPlaceholder)
|
|
297
|
+
return;
|
|
298
|
+
const $placeholderOption = this._createPlaceholderOption();
|
|
299
|
+
this._injectOptionIntoDOM($placeholderOption);
|
|
300
|
+
this._updateOptions();
|
|
301
|
+
}
|
|
302
|
+
get _canAddPlaceholder() {
|
|
303
|
+
var _a;
|
|
304
|
+
if (this.multiple || this.required)
|
|
305
|
+
return false;
|
|
306
|
+
const hasSelection = (((_a = this._selectController.selectedOptions$.getValue()) === null || _a === void 0 ? void 0 : _a.length) || 0) > 0;
|
|
307
|
+
if (hasSelection)
|
|
308
|
+
return false;
|
|
309
|
+
const hasExistingPlaceholder = !!this.querySelector('h-option[placeholder]');
|
|
310
|
+
return !hasExistingPlaceholder;
|
|
311
|
+
}
|
|
312
|
+
_createPlaceholderOption() {
|
|
313
|
+
const $option = document.createElement('h-option');
|
|
314
|
+
$option.setAttribute('value', '');
|
|
315
|
+
$option.setAttribute('selected', 'true');
|
|
316
|
+
$option.setAttribute('placeholder', 'true');
|
|
317
|
+
$option.setAttribute('slot', SELECT_SLOT_NAMES.content);
|
|
318
|
+
const $content = document.createElement(SELECT_RELATED_COMPONENTS_NAMES.optionContent);
|
|
319
|
+
if (typeof this.$placeholder === 'string') {
|
|
320
|
+
$content.textContent = this.$placeholder;
|
|
321
|
+
}
|
|
322
|
+
else if (this.$placeholder instanceof Node) {
|
|
323
|
+
Array.from(this.$placeholder.childNodes).forEach(node => {
|
|
324
|
+
$content.appendChild(node.cloneNode(true));
|
|
325
|
+
});
|
|
326
|
+
}
|
|
327
|
+
$option.appendChild($content);
|
|
328
|
+
return $option;
|
|
329
|
+
}
|
|
330
|
+
_injectOptionIntoDOM($option) {
|
|
331
|
+
const $firstOption = this.querySelector(SELECT_RELATED_COMPONENTS_NAMES.option);
|
|
332
|
+
if ($firstOption) {
|
|
333
|
+
this.insertBefore($option, $firstOption);
|
|
334
|
+
}
|
|
335
|
+
else {
|
|
336
|
+
this.appendChild($option);
|
|
337
|
+
}
|
|
338
|
+
}
|
|
300
339
|
_setupEvents() {
|
|
301
340
|
this.addEventListener(SELECT_EVENT_NAMES.deselectOption, this._handleOptionDeselect);
|
|
302
341
|
this.addEventListener(SELECT_CLOSE_BTN_EVENT_NAMES.close, this._closeSelect);
|
|
@@ -377,7 +416,7 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
|
|
|
377
416
|
return fragment;
|
|
378
417
|
}
|
|
379
418
|
render() {
|
|
380
|
-
var _a, _b, _c, _d, _e;
|
|
419
|
+
var _a, _b, _c, _d, _e, _f;
|
|
381
420
|
const options = (_a = this._selectController.options$.getValue()) !== null && _a !== void 0 ? _a : [];
|
|
382
421
|
const isSearchEnabled = !this.searchDisabled && options.length > MIN_NUMBER_OF_OPTIONS_TO_SHOW_SEARCH;
|
|
383
422
|
return html `
|
|
@@ -401,6 +440,7 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
|
|
|
401
440
|
aria-activedescendant
|
|
402
441
|
role="combobox"
|
|
403
442
|
aria-controls="${this._selectOptionsId}"
|
|
443
|
+
aria-labelledby="${this.assistiveTitleId}"
|
|
404
444
|
>
|
|
405
445
|
${this.getSlot(SELECT_SLOT_NAMES.toggler)}
|
|
406
446
|
</h-dropdown-toggler>
|
|
@@ -413,14 +453,18 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
|
|
|
413
453
|
>
|
|
414
454
|
<h-select-close-btn class="${SELECT_CSS_CLASSES.selectCloseMobileButton}" @close=${this._closeSelect}></h-select-close-btn>
|
|
415
455
|
|
|
416
|
-
<div class=${SELECT_CSS_CLASSES.selectLabel}
|
|
456
|
+
<div class=${SELECT_CSS_CLASSES.selectLabel}>
|
|
457
|
+
${this.isDevSelectPlaceholderFlagEnabled ?
|
|
458
|
+
(_b = this.$searchLabel) === null || _b === void 0 ? void 0 : _b.cloneNode(true) :
|
|
459
|
+
html `${this._getClonedPlaceholderElement()}`}
|
|
460
|
+
</div>
|
|
417
461
|
|
|
418
462
|
${isSearchEnabled
|
|
419
463
|
? html ` <h-select-search
|
|
420
464
|
class=${SELECT_CSS_CLASSES.selectSearch}
|
|
421
465
|
${ref(this.$search)}
|
|
422
466
|
.value=${this._searchValue}
|
|
423
|
-
placeholder=${((
|
|
467
|
+
placeholder=${((_c = this.translations) === null || _c === void 0 ? void 0 : _c.search) || SELECT_DEFAULT_TRANSLATIONS.SEARCH}
|
|
424
468
|
@search=${this._handleSearch}
|
|
425
469
|
></h-select-search>`
|
|
426
470
|
: nothing}
|
|
@@ -441,7 +485,7 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
|
|
|
441
485
|
${this._searchNoResult()
|
|
442
486
|
? html ` <div>
|
|
443
487
|
<p class=${SELECT_CSS_CLASSES.selectNoResult}>
|
|
444
|
-
${((
|
|
488
|
+
${((_d = this.translations) === null || _d === void 0 ? void 0 : _d.noResultsFor) || SELECT_DEFAULT_TRANSLATIONS.NO_RESULTS_FOR}:
|
|
445
489
|
<em class=${SELECT_CSS_CLASSES.selectSearchedPhrase}>"${this._searchValue}"</em>
|
|
446
490
|
</p>
|
|
447
491
|
</div>`
|
|
@@ -450,11 +494,11 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
|
|
|
450
494
|
? html `
|
|
451
495
|
<section class=${SELECT_CSS_CLASSES.selectFooter}>
|
|
452
496
|
<button class="${SELECT_CSS_CLASSES.selectClearButton}" @click=${this._clearOptions}>
|
|
453
|
-
${((
|
|
497
|
+
${((_e = this.translations) === null || _e === void 0 ? void 0 : _e.reset) || SELECT_DEFAULT_TRANSLATIONS.RESET}
|
|
454
498
|
</button>
|
|
455
499
|
<h-select-close-btn class="${SELECT_CSS_CLASSES.selectCloseButton}" @close=${this._closeSelect}
|
|
456
500
|
><span slot=${SELECT_CLOSE_BUTTON_CONTENT_SLOT_NAME}
|
|
457
|
-
>${((
|
|
501
|
+
>${((_f = this.translations) === null || _f === void 0 ? void 0 : _f.choose) || SELECT_DEFAULT_TRANSLATIONS.CHOOSE}</span
|
|
458
502
|
>
|
|
459
503
|
</h-select-close-btn>
|
|
460
504
|
</section>
|
|
@@ -528,6 +572,10 @@ __decorate([
|
|
|
528
572
|
property({ type: String, attribute: 'assistive-title-id' }),
|
|
529
573
|
__metadata("design:type", String)
|
|
530
574
|
], HSelect.prototype, "assistiveTitleId", void 0);
|
|
575
|
+
__decorate([
|
|
576
|
+
property({ type: Boolean, attribute: 'is-dev-select-placeholder-flag-enabled' }),
|
|
577
|
+
__metadata("design:type", Boolean)
|
|
578
|
+
], HSelect.prototype, "isDevSelectPlaceholderFlagEnabled", void 0);
|
|
531
579
|
__decorate([
|
|
532
580
|
property({
|
|
533
581
|
converter: {
|
|
@@ -549,14 +597,6 @@ __decorate([
|
|
|
549
597
|
}),
|
|
550
598
|
__metadata("design:type", Object)
|
|
551
599
|
], HSelect.prototype, "translations", void 0);
|
|
552
|
-
__decorate([
|
|
553
|
-
property({ type: Boolean, attribute: 'is-selected-index-reactive' }),
|
|
554
|
-
__metadata("design:type", Boolean)
|
|
555
|
-
], HSelect.prototype, "isSelectedIndexReactive", void 0);
|
|
556
|
-
__decorate([
|
|
557
|
-
property({ type: Number, attribute: false }),
|
|
558
|
-
__metadata("design:type", Number)
|
|
559
|
-
], HSelect.prototype, "_reactiveSelectedIndexValue", void 0);
|
|
560
600
|
__decorate([
|
|
561
601
|
state(),
|
|
562
602
|
__metadata("design:type", String)
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,uCAAuC,+CAAmD;AAC1F;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,eAAe,wDAA4D;AAC3E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
|
|
1
|
+
{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,uCAAuC,+CAAmD;AAC1F;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,eAAe,wDAA4D;AAC3E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
|
|
@@ -8,4 +8,5 @@ export declare class SelectControlUtils {
|
|
|
8
8
|
static appendHTMLOption($option: HOption, $list: HOptions, position?: number): void;
|
|
9
9
|
static getFirstIndexSelectedOption(options: HOption[]): number;
|
|
10
10
|
static getLastIndexOfSelectedOption(options: HOption[]): number;
|
|
11
|
+
static extractSelectValue($select: HTMLSelectElement): string | string[] | null | undefined;
|
|
11
12
|
}
|
|
@@ -2,7 +2,7 @@ import { SELECT_RELATED_COMPONENTS_NAMES } from './components/select_components_
|
|
|
2
2
|
|
|
3
3
|
class SelectControlUtils {
|
|
4
4
|
static createHTMLOption(option) {
|
|
5
|
-
const { selected, value, disabled, hidden, content } = option;
|
|
5
|
+
const { selected, value, disabled, hidden, content, isPlaceholder } = option;
|
|
6
6
|
const $option = document.createElement(SELECT_RELATED_COMPONENTS_NAMES.option);
|
|
7
7
|
$option.setAttribute('value', String(value));
|
|
8
8
|
const $optionContent = document.createElement(SELECT_RELATED_COMPONENTS_NAMES.optionContent);
|
|
@@ -14,14 +14,17 @@ class SelectControlUtils {
|
|
|
14
14
|
$option.setAttribute('disabled', '');
|
|
15
15
|
if (hidden)
|
|
16
16
|
$option.setAttribute('hidden', '');
|
|
17
|
+
if (isPlaceholder)
|
|
18
|
+
$option.setAttribute('placeholder', 'true');
|
|
17
19
|
return $option;
|
|
18
20
|
}
|
|
19
21
|
static syncHTMLOptionWithModel(option, $option) {
|
|
20
|
-
const { selected, value, disabled, hidden } = option;
|
|
22
|
+
const { selected, value, disabled, hidden, isPlaceholder } = option;
|
|
21
23
|
$option.selected = selected;
|
|
22
24
|
$option.value = value;
|
|
23
25
|
$option.disabled = disabled;
|
|
24
26
|
$option.hidden = hidden;
|
|
27
|
+
$option.toggleAttribute('placeholder', isPlaceholder);
|
|
25
28
|
}
|
|
26
29
|
static removeHTMLOptions($options, optionsValuesThatExists) {
|
|
27
30
|
return $options.reduce((acc, $option) => {
|
|
@@ -46,6 +49,23 @@ class SelectControlUtils {
|
|
|
46
49
|
const firstIndexInReversed = [...options].reverse().findIndex((option) => option.selected);
|
|
47
50
|
return options.length - firstIndexInReversed - 1;
|
|
48
51
|
}
|
|
52
|
+
static extractSelectValue($select) {
|
|
53
|
+
var _a;
|
|
54
|
+
const { selectedOptions } = $select;
|
|
55
|
+
const selectedValues = Array.from(selectedOptions).map((option) => option.value);
|
|
56
|
+
if (selectedValues.length === 0) {
|
|
57
|
+
return undefined;
|
|
58
|
+
}
|
|
59
|
+
const isPlaceholder = !$select.multiple && selectedOptions.length === 1 && ((_a = selectedOptions[0]) === null || _a === void 0 ? void 0 : _a.hasAttribute('placeholder'));
|
|
60
|
+
const isSingleEmptyValue = selectedValues.length === 1 && selectedValues[0] === '';
|
|
61
|
+
if (isPlaceholder && isSingleEmptyValue) {
|
|
62
|
+
return null;
|
|
63
|
+
}
|
|
64
|
+
if ($select.multiple) {
|
|
65
|
+
return selectedValues;
|
|
66
|
+
}
|
|
67
|
+
return selectedValues[0];
|
|
68
|
+
}
|
|
49
69
|
}
|
|
50
70
|
|
|
51
71
|
export { SelectControlUtils };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
|
|
1
|
+
{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
|
package/package.json
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
"name": "@shoper/phoenix_design_system",
|
|
3
3
|
"packageManager": "yarn@3.2.0",
|
|
4
4
|
"sideEffects": false,
|
|
5
|
-
"version": "1.18.8-
|
|
5
|
+
"version": "1.18.8-1",
|
|
6
6
|
"description": "phoenix design system",
|
|
7
7
|
"author": "zefirek",
|
|
8
8
|
"license": "MIT",
|
|
@@ -31,7 +31,7 @@
|
|
|
31
31
|
"@splidejs/splide-extension-auto-scroll": "0.5.3"
|
|
32
32
|
},
|
|
33
33
|
"devDependencies": {
|
|
34
|
-
"@dreamcommerce/utilities": "^1.23.1",
|
|
34
|
+
"@dreamcommerce/utilities": "^1.23.1-3",
|
|
35
35
|
"@shoper/jest_config": "^0.0.0",
|
|
36
36
|
"@shoper/tsconfig": "^0.0.0",
|
|
37
37
|
"@splidejs/splide": "4.0.7",
|