@shoper/phoenix_design_system 1.18.7-7 → 1.18.7-9

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (20) hide show
  1. package/build/cjs/packages/phoenix/src/components/form/select/model/select_option.js +1 -2
  2. package/build/cjs/packages/phoenix/src/components/form/select/model/select_option.js.map +1 -1
  3. package/build/cjs/packages/phoenix/src/components/form/select/model/select_option_mapper.js +2 -3
  4. package/build/cjs/packages/phoenix/src/components/form/select/model/select_option_mapper.js.map +1 -1
  5. package/build/cjs/packages/phoenix/src/components/form/select/select.js +60 -65
  6. package/build/cjs/packages/phoenix/src/components/form/select/select.js.map +1 -1
  7. package/build/cjs/packages/phoenix/src/components/form/select/select_utils.js +2 -5
  8. package/build/cjs/packages/phoenix/src/components/form/select/select_utils.js.map +1 -1
  9. package/build/esm/packages/phoenix/src/components/form/select/model/select_option.d.ts +0 -1
  10. package/build/esm/packages/phoenix/src/components/form/select/model/select_option.js +1 -2
  11. package/build/esm/packages/phoenix/src/components/form/select/model/select_option.js.map +1 -1
  12. package/build/esm/packages/phoenix/src/components/form/select/model/select_option_mapper.js +2 -3
  13. package/build/esm/packages/phoenix/src/components/form/select/model/select_option_mapper.js.map +1 -1
  14. package/build/esm/packages/phoenix/src/components/form/select/model/select_option_types.d.ts +0 -1
  15. package/build/esm/packages/phoenix/src/components/form/select/select.d.ts +5 -5
  16. package/build/esm/packages/phoenix/src/components/form/select/select.js +60 -65
  17. package/build/esm/packages/phoenix/src/components/form/select/select.js.map +1 -1
  18. package/build/esm/packages/phoenix/src/components/form/select/select_utils.js +2 -5
  19. package/build/esm/packages/phoenix/src/components/form/select/select_utils.js.map +1 -1
  20. package/package.json +1 -1
package/build/cjs/packages/phoenix/src/components/form/select/model/select_option.js CHANGED
@@ -3,14 +3,13 @@
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, isPlaceholder = false }) {
6
+ constructor({ selected = false, hidden = false, disabled = false, value, content, inactive = 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;
14
13
  }
15
14
  static create(options) {
16
15
  return new SelectOption(options);
package/build/cjs/packages/phoenix/src/components/form/select/model/select_option.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;"}
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;"}
package/build/cjs/packages/phoenix/src/components/form/select/model/select_option_mapper.js CHANGED
@@ -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 (value === null || value === undefined)
13
+ if (!value)
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,8 +20,7 @@ class SelectOptionMapper {
20
20
  hidden: $option.hasAttribute('hidden'),
21
21
  inactive: $option.hasAttribute('inactive'),
22
22
  content: optionContentText,
23
- selected: $option.hasAttribute('selected'),
24
- isPlaceholder: $option.hasAttribute('placeholder')
23
+ selected: $option.hasAttribute('selected')
25
24
  });
26
25
  }
27
26
  }
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;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;"}
package/build/cjs/packages/phoenix/src/components/form/select/select.js CHANGED
@@ -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;
47
46
  this.translations = {};
47
+ this.reactiveSelectedIndex = 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 (value === null || value === undefined)
61
+ if (!value)
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,12 @@ 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
- const valueLabel = options.some((option) => !option.isPlaceholder)
119
- ? `<span id="value-label" class="sr-only">
118
+ this.$searchLabel.innerHTML = `
119
+ ${(_b = this.$searchLabel) === null || _b === void 0 ? void 0 : _b.innerHTML}
120
+ <span id="value-label" class="sr-only">
120
121
  ${options.reduce((totalSelectedContent, currentOption) => (totalSelectedContent += currentOption.content), '')}
121
- </span>`
122
- : '';
123
- this.$searchLabel.innerHTML = `${(_b = this.$searchLabel) === null || _b === void 0 ? void 0 : _b.innerHTML} ${valueLabel}`;
122
+ </span>
123
+ `;
124
124
  };
125
125
  this._handleOptionClicked = ({ detail }) => {
126
126
  if (!(detail === null || detail === void 0 ? void 0 : detail.$option))
@@ -177,6 +177,9 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
177
177
  this.type = select_constants.SELECT_TYPES.multiple;
178
178
  }
179
179
  get selectedIndex() {
180
+ if (this.reactiveSelectedIndex) {
181
+ return this._getSelectedIndex();
182
+ }
180
183
  const selectedOptions = this._selectController.selectedOptions$.getValue();
181
184
  if (!selectedOptions || selectedOptions.length === 0)
182
185
  return -1;
@@ -186,6 +189,12 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
186
189
  : select_utils.SelectControlUtils.getLastIndexOfSelectedOption(htmlOptions);
187
190
  }
188
191
  set selectedIndex(index) {
192
+ if (this.reactiveSelectedIndex) {
193
+ this._reactiveSelectedIndexValue = index;
194
+ return;
195
+ }
196
+ if (!this._selectController)
197
+ return;
189
198
  const option = Array.from(this._$options.values()).filter(($option) => !$option.hidden)[index];
190
199
  option ? this._selectOption(option.value) : this._selectController.deselectAll();
191
200
  Array.from(this._$options.values()).forEach(($option) => this.updateOptionAriaAttribute($option));
@@ -204,6 +213,20 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
204
213
  get options() {
205
214
  return Array.from(this._$options.values());
206
215
  }
216
+ _getSelectedIndex() {
217
+ const selectedOptions = this._selectController.selectedOptions$.getValue();
218
+ if (!selectedOptions || selectedOptions.length === 0)
219
+ return -1;
220
+ const htmlOptions = Array.from(this._$options.values());
221
+ return this.multiple
222
+ ? select_utils.SelectControlUtils.getFirstIndexSelectedOption(htmlOptions)
223
+ : select_utils.SelectControlUtils.getLastIndexOfSelectedOption(htmlOptions);
224
+ }
225
+ _applySelectedIndex(index) {
226
+ const option = Array.from(this._$options.values()).filter(($option) => !$option.hidden)[index];
227
+ option ? this._selectOption(option.value) : this._selectController.deselectAll();
228
+ Array.from(this._$options.values()).forEach(($option) => this.updateOptionAriaAttribute($option));
229
+ }
207
230
  updated(changedProperties) {
208
231
  var _a, _b;
209
232
  super.updated(changedProperties);
@@ -218,8 +241,11 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
218
241
  }
219
242
  if (changedProperties.has('optionsList')) {
220
243
  this._updateOptions();
221
- if (this.isDevSelectPlaceholderFlagEnabled) {
222
- this._addPlaceholderOptionIfNeeded();
244
+ if (this.reactiveSelectedIndex && this._reactiveSelectedIndexValue !== undefined) {
245
+ const actualIndex = this._getSelectedIndex();
246
+ if (this._reactiveSelectedIndexValue !== actualIndex) {
247
+ this._reactiveSelectedIndexValue = actualIndex === -1 ? undefined : actualIndex;
248
+ }
223
249
  }
224
250
  }
225
251
  if (this._$optionsList.value) {
@@ -240,6 +266,14 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
240
266
  $list: this._$optionsList.value
241
267
  });
242
268
  }
269
+ if (this.reactiveSelectedIndex &&
270
+ changedProperties.has('_reactiveSelectedIndexValue') &&
271
+ this._reactiveSelectedIndexValue !== undefined) {
272
+ const currentIndex = this._getSelectedIndex();
273
+ if (this._reactiveSelectedIndexValue !== currentIndex) {
274
+ this._applySelectedIndex(this._reactiveSelectedIndexValue);
275
+ }
276
+ }
243
277
  }
244
278
  _focusElementAfterSelectOpened() {
245
279
  var _a;
@@ -269,9 +303,6 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
269
303
  this._selectedOptionsAriaObserver = new observer.Observer((selectedOptions) => this._updateLabelAria(selectedOptions));
270
304
  this._selectController.selectedOptions$.subscribe(this._selectedOptionsAriaObserver);
271
305
  this._updateOptions();
272
- if (this.isDevSelectPlaceholderFlagEnabled) {
273
- this._addPlaceholderOptionIfNeeded();
274
- }
275
306
  this._setupEvents();
276
307
  }
277
308
  attributeChangedCallback(name, _old, value) {
@@ -284,48 +315,6 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
284
315
  this.disabled ? this.classList.add(select_constants.SELECT_CSS_CLASSES.selectDisabled) : this.classList.remove(select_constants.SELECT_CSS_CLASSES.selectDisabled);
285
316
  }
286
317
  }
287
- _addPlaceholderOptionIfNeeded() {
288
- if (!this._canAddPlaceholder)
289
- return;
290
- const $placeholderOption = this._createPlaceholderOption();
291
- this._injectOptionIntoDOM($placeholderOption);
292
- this._updateOptions();
293
- }
294
- get _canAddPlaceholder() {
295
- var _a;
296
- if (this.multiple || this.required)
297
- return false;
298
- const hasSelection = (((_a = this._selectController.selectedOptions$.getValue()) === null || _a === void 0 ? void 0 : _a.length) || 0) > 0;
299
- if (hasSelection)
300
- return false;
301
- const hasExistingPlaceholder = !!this.querySelector('h-option[placeholder]');
302
- return !hasExistingPlaceholder;
303
- }
304
- _createPlaceholderOption() {
305
- const $option = document.createElement('h-option');
306
- $option.setAttribute('value', '');
307
- $option.setAttribute('selected', 'true');
308
- $option.setAttribute('placeholder', 'true');
309
- $option.setAttribute('slot', select_constants.SELECT_SLOT_NAMES.content);
310
- const $content = document.createElement(select_components_constatns.SELECT_RELATED_COMPONENTS_NAMES.optionContent);
311
- if (typeof this.$placeholder === 'string') {
312
- $content.textContent = this.$placeholder;
313
- }
314
- else {
315
- $content.innerHTML = this.$placeholder.innerHTML;
316
- }
317
- $option.appendChild($content);
318
- return $option;
319
- }
320
- _injectOptionIntoDOM($option) {
321
- const $firstOption = this.querySelector(select_components_constatns.SELECT_RELATED_COMPONENTS_NAMES.option);
322
- if ($firstOption) {
323
- this.insertBefore($option, $firstOption);
324
- }
325
- else {
326
- this.appendChild($option);
327
- }
328
- }
329
318
  _setupEvents() {
330
319
  this.addEventListener(select_constants.SELECT_EVENT_NAMES.deselectOption, this._handleOptionDeselect);
331
320
  this.addEventListener(select_components_constatns.SELECT_CLOSE_BTN_EVENT_NAMES.close, this._closeSelect);
@@ -394,6 +383,9 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
394
383
  this._selectController.options$.unsubscribe(this._optionsObserver);
395
384
  this._$options.clear();
396
385
  }
386
+ _getClonedPlaceholderElement() {
387
+ return this.$placeholder instanceof HTMLElement ? this.$placeholder.cloneNode(true) : this.$placeholder;
388
+ }
397
389
  _searchNoResult() {
398
390
  return Boolean(!this._selectController.visibleOptionsCount && Array.from(this._$options.keys()).length);
399
391
  }
@@ -403,7 +395,7 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
403
395
  return fragment;
404
396
  }
405
397
  render() {
406
- var _a, _b, _c, _d, _e, _f;
398
+ var _a, _b, _c, _d, _e;
407
399
  const options = (_a = this._selectController.options$.getValue()) !== null && _a !== void 0 ? _a : [];
408
400
  const isSearchEnabled = !this.searchDisabled && options.length > select_constants.MIN_NUMBER_OF_OPTIONS_TO_SHOW_SEARCH;
409
401
  return lit.html `
@@ -427,7 +419,6 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
427
419
  aria-activedescendant
428
420
  role="combobox"
429
421
  aria-controls="${this._selectOptionsId}"
430
- aria-labelledby="${this.assistiveTitleId}"
431
422
  >
432
423
  ${this.getSlot(select_constants.SELECT_SLOT_NAMES.toggler)}
433
424
  </h-dropdown-toggler>
@@ -440,14 +431,14 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
440
431
  >
441
432
  <h-select-close-btn class="${select_constants.SELECT_CSS_CLASSES.selectCloseMobileButton}" @close=${this._closeSelect}></h-select-close-btn>
442
433
 
443
- <div class=${select_constants.SELECT_CSS_CLASSES.selectLabel}>${(_b = this.$searchLabel) === null || _b === void 0 ? void 0 : _b.cloneNode(true)}</div>
434
+ <div class=${select_constants.SELECT_CSS_CLASSES.selectLabel}>${lit.html `${this._getClonedPlaceholderElement()}`}</div>
444
435
 
445
436
  ${isSearchEnabled
446
437
  ? lit.html ` <h-select-search
447
438
  class=${select_constants.SELECT_CSS_CLASSES.selectSearch}
448
439
  ${ref_js.ref(this.$search)}
449
440
  .value=${this._searchValue}
450
- placeholder=${((_c = this.translations) === null || _c === void 0 ? void 0 : _c.search) || select_constants.SELECT_DEFAULT_TRANSLATIONS.SEARCH}
441
+ placeholder=${((_b = this.translations) === null || _b === void 0 ? void 0 : _b.search) || select_constants.SELECT_DEFAULT_TRANSLATIONS.SEARCH}
451
442
  @search=${this._handleSearch}
452
443
  ></h-select-search>`
453
444
  : lit.nothing}
@@ -468,7 +459,7 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
468
459
  ${this._searchNoResult()
469
460
  ? lit.html ` <div>
470
461
  <p class=${select_constants.SELECT_CSS_CLASSES.selectNoResult}>
471
- ${((_d = this.translations) === null || _d === void 0 ? void 0 : _d.noResultsFor) || select_constants.SELECT_DEFAULT_TRANSLATIONS.NO_RESULTS_FOR}:
462
+ ${((_c = this.translations) === null || _c === void 0 ? void 0 : _c.noResultsFor) || select_constants.SELECT_DEFAULT_TRANSLATIONS.NO_RESULTS_FOR}:
472
463
  <em class=${select_constants.SELECT_CSS_CLASSES.selectSearchedPhrase}>"${this._searchValue}"</em>
473
464
  </p>
474
465
  </div>`
@@ -477,11 +468,11 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
477
468
  ? lit.html `
478
469
  <section class=${select_constants.SELECT_CSS_CLASSES.selectFooter}>
479
470
  <button class="${select_constants.SELECT_CSS_CLASSES.selectClearButton}" @click=${this._clearOptions}>
480
- ${((_e = this.translations) === null || _e === void 0 ? void 0 : _e.reset) || select_constants.SELECT_DEFAULT_TRANSLATIONS.RESET}
471
+ ${((_d = this.translations) === null || _d === void 0 ? void 0 : _d.reset) || select_constants.SELECT_DEFAULT_TRANSLATIONS.RESET}
481
472
  </button>
482
473
  <h-select-close-btn class="${select_constants.SELECT_CSS_CLASSES.selectCloseButton}" @close=${this._closeSelect}
483
474
  ><span slot=${select_components_constatns.SELECT_CLOSE_BUTTON_CONTENT_SLOT_NAME}
484
- >${((_f = this.translations) === null || _f === void 0 ? void 0 : _f.choose) || select_constants.SELECT_DEFAULT_TRANSLATIONS.CHOOSE}</span
475
+ >${((_e = this.translations) === null || _e === void 0 ? void 0 : _e.choose) || select_constants.SELECT_DEFAULT_TRANSLATIONS.CHOOSE}</span
485
476
  >
486
477
  </h-select-close-btn>
487
478
  </section>
@@ -555,10 +546,6 @@ tslib_es6.__decorate([
555
546
  decorators_js.property({ type: String, attribute: 'assistive-title-id' }),
556
547
  tslib_es6.__metadata("design:type", String)
557
548
  ], exports.HSelect.prototype, "assistiveTitleId", void 0);
558
- tslib_es6.__decorate([
559
- decorators_js.property({ type: Boolean, attribute: 'is-dev-select-placeholder-flag-enabled' }),
560
- tslib_es6.__metadata("design:type", Boolean)
561
- ], exports.HSelect.prototype, "isDevSelectPlaceholderFlagEnabled", void 0);
562
549
  tslib_es6.__decorate([
563
550
  decorators_js.property({
564
551
  converter: {
@@ -580,6 +567,14 @@ tslib_es6.__decorate([
580
567
  }),
581
568
  tslib_es6.__metadata("design:type", Object)
582
569
  ], exports.HSelect.prototype, "translations", void 0);
570
+ tslib_es6.__decorate([
571
+ decorators_js.property({ type: Boolean, attribute: 'reactive-selected-index' }),
572
+ tslib_es6.__metadata("design:type", Boolean)
573
+ ], exports.HSelect.prototype, "reactiveSelectedIndex", void 0);
574
+ tslib_es6.__decorate([
575
+ decorators_js.property({ type: Number, attribute: false }),
576
+ tslib_es6.__metadata("design:type", Number)
577
+ ], exports.HSelect.prototype, "_reactiveSelectedIndexValue", void 0);
583
578
  tslib_es6.__decorate([
584
579
  decorators.state(),
585
580
  tslib_es6.__metadata("design:type", String)
package/build/cjs/packages/phoenix/src/components/form/select/select.js.map CHANGED
@@ -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;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;"}
package/build/cjs/packages/phoenix/src/components/form/select/select_utils.js CHANGED
@@ -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, isPlaceholder } = option;
9
+ const { selected, value, disabled, hidden, content } = 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,17 +18,14 @@ class SelectControlUtils {
18
18
  $option.setAttribute('disabled', '');
19
19
  if (hidden)
20
20
  $option.setAttribute('hidden', '');
21
- if (isPlaceholder)
22
- $option.setAttribute('placeholder', 'true');
23
21
  return $option;
24
22
  }
25
23
  static syncHTMLOptionWithModel(option, $option) {
26
- const { selected, value, disabled, hidden, isPlaceholder } = option;
24
+ const { selected, value, disabled, hidden } = option;
27
25
  $option.selected = selected;
28
26
  $option.value = value;
29
27
  $option.disabled = disabled;
30
28
  $option.hidden = hidden;
31
- $option.toggleAttribute('placeholder', isPlaceholder);
32
29
  }
33
30
  static removeHTMLOptions($options, optionsValuesThatExists) {
34
31
  return $options.reduce((acc, $option) => {
package/build/cjs/packages/phoenix/src/components/form/select/select_utils.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;AACA;AACA;AACA;AACA;AACA;AACA;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;"}
package/build/esm/packages/phoenix/src/components/form/select/model/select_option.d.ts CHANGED
@@ -6,7 +6,6 @@ export declare class SelectOption {
6
6
  inactive: boolean;
7
7
  hidden: boolean;
8
8
  content: string;
9
- isPlaceholder: boolean;
10
9
  private constructor();
11
10
  static create(options: TSelectOptionConstructorOptions): SelectOption;
12
11
  }
package/build/esm/packages/phoenix/src/components/form/select/model/select_option.js CHANGED
@@ -1,12 +1,11 @@
1
1
  class SelectOption {
2
- constructor({ selected = false, hidden = false, disabled = false, value, content, inactive = false, isPlaceholder = false }) {
2
+ constructor({ selected = false, hidden = false, disabled = false, value, content, inactive = 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;
10
9
  }
11
10
  static create(options) {
12
11
  return new SelectOption(options);
package/build/esm/packages/phoenix/src/components/form/select/model/select_option.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;"}
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;"}
package/build/esm/packages/phoenix/src/components/form/select/model/select_option_mapper.js CHANGED
@@ -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 (value === null || value === undefined)
9
+ if (!value)
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,8 +16,7 @@ class SelectOptionMapper {
16
16
  hidden: $option.hasAttribute('hidden'),
17
17
  inactive: $option.hasAttribute('inactive'),
18
18
  content: optionContentText,
19
- selected: $option.hasAttribute('selected'),
20
- isPlaceholder: $option.hasAttribute('placeholder')
19
+ selected: $option.hasAttribute('selected')
21
20
  });
22
21
  }
23
22
  }
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;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;"}
package/build/esm/packages/phoenix/src/components/form/select/model/select_option_types.d.ts CHANGED
@@ -5,6 +5,5 @@ export declare type TSelectOption = {
5
5
  disabled?: boolean;
6
6
  hidden?: boolean;
7
7
  inactive?: boolean;
8
- isPlaceholder?: boolean;
9
8
  };
10
9
  export declare type TSelectOptionConstructorOptions = TSelectOption;
package/build/esm/packages/phoenix/src/components/form/select/select.d.ts CHANGED
@@ -23,8 +23,9 @@ export declare class HSelect extends PhoenixLightLitElement {
23
23
  optionsList?: TSelectOption[];
24
24
  noDeselect: boolean;
25
25
  assistiveTitleId: string;
26
- isDevSelectPlaceholderFlagEnabled: boolean;
27
26
  translations: Record<string, string>;
27
+ reactiveSelectedIndex: boolean;
28
+ _reactiveSelectedIndexValue?: number;
28
29
  private _selectOptionsId;
29
30
  get selectedIndex(): number;
30
31
  set selectedIndex(index: number);
@@ -48,16 +49,14 @@ export declare class HSelect extends PhoenixLightLitElement {
48
49
  private $placeholder;
49
50
  private $searchLabel;
50
51
  constructor();
52
+ private _getSelectedIndex;
53
+ private _applySelectedIndex;
51
54
  updated(changedProperties: PropertyValues): void;
52
55
  private _focusElementAfterSelectOpened;
53
56
  connectedCallback(): void;
54
57
  attributeChangedCallback(name: string, _old: string | null, value: string | null): void;
55
58
  private _updateOptions;
56
59
  private _getOptions;
57
- private _addPlaceholderOptionIfNeeded;
58
- private get _canAddPlaceholder();
59
- private _createPlaceholderOption;
60
- private _injectOptionIntoDOM;
61
60
  private _setupEvents;
62
61
  private _handleOptionDeselect;
63
62
  private _updateOptionsView;
@@ -81,6 +80,7 @@ export declare class HSelect extends PhoenixLightLitElement {
81
80
  getOption(value: string): SelectOption | undefined;
82
81
  select(option: SelectOption): void;
83
82
  disconnectedCallback(): void;
83
+ private _getClonedPlaceholderElement;
84
84
  private _searchNoResult;
85
85
  private _renderOption;
86
86
  protected render(): TemplateResult;
package/build/esm/packages/phoenix/src/components/form/select/select.js CHANGED
@@ -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;
43
42
  this.translations = {};
43
+ this.reactiveSelectedIndex = 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 (value === null || value === undefined)
57
+ if (!value)
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,12 @@ 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
- const valueLabel = options.some((option) => !option.isPlaceholder)
115
- ? `<span id="value-label" class="sr-only">
114
+ this.$searchLabel.innerHTML = `
115
+ ${(_b = this.$searchLabel) === null || _b === void 0 ? void 0 : _b.innerHTML}
116
+ <span id="value-label" class="sr-only">
116
117
  ${options.reduce((totalSelectedContent, currentOption) => (totalSelectedContent += currentOption.content), '')}
117
- </span>`
118
- : '';
119
- this.$searchLabel.innerHTML = `${(_b = this.$searchLabel) === null || _b === void 0 ? void 0 : _b.innerHTML} ${valueLabel}`;
118
+ </span>
119
+ `;
120
120
  };
121
121
  this._handleOptionClicked = ({ detail }) => {
122
122
  if (!(detail === null || detail === void 0 ? void 0 : detail.$option))
@@ -173,6 +173,9 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
173
173
  this.type = SELECT_TYPES.multiple;
174
174
  }
175
175
  get selectedIndex() {
176
+ if (this.reactiveSelectedIndex) {
177
+ return this._getSelectedIndex();
178
+ }
176
179
  const selectedOptions = this._selectController.selectedOptions$.getValue();
177
180
  if (!selectedOptions || selectedOptions.length === 0)
178
181
  return -1;
@@ -182,6 +185,12 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
182
185
  : SelectControlUtils.getLastIndexOfSelectedOption(htmlOptions);
183
186
  }
184
187
  set selectedIndex(index) {
188
+ if (this.reactiveSelectedIndex) {
189
+ this._reactiveSelectedIndexValue = index;
190
+ return;
191
+ }
192
+ if (!this._selectController)
193
+ return;
185
194
  const option = Array.from(this._$options.values()).filter(($option) => !$option.hidden)[index];
186
195
  option ? this._selectOption(option.value) : this._selectController.deselectAll();
187
196
  Array.from(this._$options.values()).forEach(($option) => this.updateOptionAriaAttribute($option));
@@ -200,6 +209,20 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
200
209
  get options() {
201
210
  return Array.from(this._$options.values());
202
211
  }
212
+ _getSelectedIndex() {
213
+ const selectedOptions = this._selectController.selectedOptions$.getValue();
214
+ if (!selectedOptions || selectedOptions.length === 0)
215
+ return -1;
216
+ const htmlOptions = Array.from(this._$options.values());
217
+ return this.multiple
218
+ ? SelectControlUtils.getFirstIndexSelectedOption(htmlOptions)
219
+ : SelectControlUtils.getLastIndexOfSelectedOption(htmlOptions);
220
+ }
221
+ _applySelectedIndex(index) {
222
+ const option = Array.from(this._$options.values()).filter(($option) => !$option.hidden)[index];
223
+ option ? this._selectOption(option.value) : this._selectController.deselectAll();
224
+ Array.from(this._$options.values()).forEach(($option) => this.updateOptionAriaAttribute($option));
225
+ }
203
226
  updated(changedProperties) {
204
227
  var _a, _b;
205
228
  super.updated(changedProperties);
@@ -214,8 +237,11 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
214
237
  }
215
238
  if (changedProperties.has('optionsList')) {
216
239
  this._updateOptions();
217
- if (this.isDevSelectPlaceholderFlagEnabled) {
218
- this._addPlaceholderOptionIfNeeded();
240
+ if (this.reactiveSelectedIndex && this._reactiveSelectedIndexValue !== undefined) {
241
+ const actualIndex = this._getSelectedIndex();
242
+ if (this._reactiveSelectedIndexValue !== actualIndex) {
243
+ this._reactiveSelectedIndexValue = actualIndex === -1 ? undefined : actualIndex;
244
+ }
219
245
  }
220
246
  }
221
247
  if (this._$optionsList.value) {
@@ -236,6 +262,14 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
236
262
  $list: this._$optionsList.value
237
263
  });
238
264
  }
265
+ if (this.reactiveSelectedIndex &&
266
+ changedProperties.has('_reactiveSelectedIndexValue') &&
267
+ this._reactiveSelectedIndexValue !== undefined) {
268
+ const currentIndex = this._getSelectedIndex();
269
+ if (this._reactiveSelectedIndexValue !== currentIndex) {
270
+ this._applySelectedIndex(this._reactiveSelectedIndexValue);
271
+ }
272
+ }
239
273
  }
240
274
  _focusElementAfterSelectOpened() {
241
275
  var _a;
@@ -265,9 +299,6 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
265
299
  this._selectedOptionsAriaObserver = new Observer((selectedOptions) => this._updateLabelAria(selectedOptions));
266
300
  this._selectController.selectedOptions$.subscribe(this._selectedOptionsAriaObserver);
267
301
  this._updateOptions();
268
- if (this.isDevSelectPlaceholderFlagEnabled) {
269
- this._addPlaceholderOptionIfNeeded();
270
- }
271
302
  this._setupEvents();
272
303
  }
273
304
  attributeChangedCallback(name, _old, value) {
@@ -280,48 +311,6 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
280
311
  this.disabled ? this.classList.add(SELECT_CSS_CLASSES.selectDisabled) : this.classList.remove(SELECT_CSS_CLASSES.selectDisabled);
281
312
  }
282
313
  }
283
- _addPlaceholderOptionIfNeeded() {
284
- if (!this._canAddPlaceholder)
285
- return;
286
- const $placeholderOption = this._createPlaceholderOption();
287
- this._injectOptionIntoDOM($placeholderOption);
288
- this._updateOptions();
289
- }
290
- get _canAddPlaceholder() {
291
- var _a;
292
- if (this.multiple || this.required)
293
- return false;
294
- const hasSelection = (((_a = this._selectController.selectedOptions$.getValue()) === null || _a === void 0 ? void 0 : _a.length) || 0) > 0;
295
- if (hasSelection)
296
- return false;
297
- const hasExistingPlaceholder = !!this.querySelector('h-option[placeholder]');
298
- return !hasExistingPlaceholder;
299
- }
300
- _createPlaceholderOption() {
301
- const $option = document.createElement('h-option');
302
- $option.setAttribute('value', '');
303
- $option.setAttribute('selected', 'true');
304
- $option.setAttribute('placeholder', 'true');
305
- $option.setAttribute('slot', SELECT_SLOT_NAMES.content);
306
- const $content = document.createElement(SELECT_RELATED_COMPONENTS_NAMES.optionContent);
307
- if (typeof this.$placeholder === 'string') {
308
- $content.textContent = this.$placeholder;
309
- }
310
- else {
311
- $content.innerHTML = this.$placeholder.innerHTML;
312
- }
313
- $option.appendChild($content);
314
- return $option;
315
- }
316
- _injectOptionIntoDOM($option) {
317
- const $firstOption = this.querySelector(SELECT_RELATED_COMPONENTS_NAMES.option);
318
- if ($firstOption) {
319
- this.insertBefore($option, $firstOption);
320
- }
321
- else {
322
- this.appendChild($option);
323
- }
324
- }
325
314
  _setupEvents() {
326
315
  this.addEventListener(SELECT_EVENT_NAMES.deselectOption, this._handleOptionDeselect);
327
316
  this.addEventListener(SELECT_CLOSE_BTN_EVENT_NAMES.close, this._closeSelect);
@@ -390,6 +379,9 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
390
379
  this._selectController.options$.unsubscribe(this._optionsObserver);
391
380
  this._$options.clear();
392
381
  }
382
+ _getClonedPlaceholderElement() {
383
+ return this.$placeholder instanceof HTMLElement ? this.$placeholder.cloneNode(true) : this.$placeholder;
384
+ }
393
385
  _searchNoResult() {
394
386
  return Boolean(!this._selectController.visibleOptionsCount && Array.from(this._$options.keys()).length);
395
387
  }
@@ -399,7 +391,7 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
399
391
  return fragment;
400
392
  }
401
393
  render() {
402
- var _a, _b, _c, _d, _e, _f;
394
+ var _a, _b, _c, _d, _e;
403
395
  const options = (_a = this._selectController.options$.getValue()) !== null && _a !== void 0 ? _a : [];
404
396
  const isSearchEnabled = !this.searchDisabled && options.length > MIN_NUMBER_OF_OPTIONS_TO_SHOW_SEARCH;
405
397
  return html `
@@ -423,7 +415,6 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
423
415
  aria-activedescendant
424
416
  role="combobox"
425
417
  aria-controls="${this._selectOptionsId}"
426
- aria-labelledby="${this.assistiveTitleId}"
427
418
  >
428
419
  ${this.getSlot(SELECT_SLOT_NAMES.toggler)}
429
420
  </h-dropdown-toggler>
@@ -436,14 +427,14 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
436
427
  >
437
428
  <h-select-close-btn class="${SELECT_CSS_CLASSES.selectCloseMobileButton}" @close=${this._closeSelect}></h-select-close-btn>
438
429
 
439
- <div class=${SELECT_CSS_CLASSES.selectLabel}>${(_b = this.$searchLabel) === null || _b === void 0 ? void 0 : _b.cloneNode(true)}</div>
430
+ <div class=${SELECT_CSS_CLASSES.selectLabel}>${html `${this._getClonedPlaceholderElement()}`}</div>
440
431
 
441
432
  ${isSearchEnabled
442
433
  ? html ` <h-select-search
443
434
  class=${SELECT_CSS_CLASSES.selectSearch}
444
435
  ${ref(this.$search)}
445
436
  .value=${this._searchValue}
446
- placeholder=${((_c = this.translations) === null || _c === void 0 ? void 0 : _c.search) || SELECT_DEFAULT_TRANSLATIONS.SEARCH}
437
+ placeholder=${((_b = this.translations) === null || _b === void 0 ? void 0 : _b.search) || SELECT_DEFAULT_TRANSLATIONS.SEARCH}
447
438
  @search=${this._handleSearch}
448
439
  ></h-select-search>`
449
440
  : nothing}
@@ -464,7 +455,7 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
464
455
  ${this._searchNoResult()
465
456
  ? html ` <div>
466
457
  <p class=${SELECT_CSS_CLASSES.selectNoResult}>
467
- ${((_d = this.translations) === null || _d === void 0 ? void 0 : _d.noResultsFor) || SELECT_DEFAULT_TRANSLATIONS.NO_RESULTS_FOR}:
458
+ ${((_c = this.translations) === null || _c === void 0 ? void 0 : _c.noResultsFor) || SELECT_DEFAULT_TRANSLATIONS.NO_RESULTS_FOR}:
468
459
  <em class=${SELECT_CSS_CLASSES.selectSearchedPhrase}>"${this._searchValue}"</em>
469
460
  </p>
470
461
  </div>`
@@ -473,11 +464,11 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
473
464
  ? html `
474
465
  <section class=${SELECT_CSS_CLASSES.selectFooter}>
475
466
  <button class="${SELECT_CSS_CLASSES.selectClearButton}" @click=${this._clearOptions}>
476
- ${((_e = this.translations) === null || _e === void 0 ? void 0 : _e.reset) || SELECT_DEFAULT_TRANSLATIONS.RESET}
467
+ ${((_d = this.translations) === null || _d === void 0 ? void 0 : _d.reset) || SELECT_DEFAULT_TRANSLATIONS.RESET}
477
468
  </button>
478
469
  <h-select-close-btn class="${SELECT_CSS_CLASSES.selectCloseButton}" @close=${this._closeSelect}
479
470
  ><span slot=${SELECT_CLOSE_BUTTON_CONTENT_SLOT_NAME}
480
- >${((_f = this.translations) === null || _f === void 0 ? void 0 : _f.choose) || SELECT_DEFAULT_TRANSLATIONS.CHOOSE}</span
471
+ >${((_e = this.translations) === null || _e === void 0 ? void 0 : _e.choose) || SELECT_DEFAULT_TRANSLATIONS.CHOOSE}</span
481
472
  >
482
473
  </h-select-close-btn>
483
474
  </section>
@@ -551,10 +542,6 @@ __decorate([
551
542
  property({ type: String, attribute: 'assistive-title-id' }),
552
543
  __metadata("design:type", String)
553
544
  ], HSelect.prototype, "assistiveTitleId", void 0);
554
- __decorate([
555
- property({ type: Boolean, attribute: 'is-dev-select-placeholder-flag-enabled' }),
556
- __metadata("design:type", Boolean)
557
- ], HSelect.prototype, "isDevSelectPlaceholderFlagEnabled", void 0);
558
545
  __decorate([
559
546
  property({
560
547
  converter: {
@@ -576,6 +563,14 @@ __decorate([
576
563
  }),
577
564
  __metadata("design:type", Object)
578
565
  ], HSelect.prototype, "translations", void 0);
566
+ __decorate([
567
+ property({ type: Boolean, attribute: 'reactive-selected-index' }),
568
+ __metadata("design:type", Boolean)
569
+ ], HSelect.prototype, "reactiveSelectedIndex", void 0);
570
+ __decorate([
571
+ property({ type: Number, attribute: false }),
572
+ __metadata("design:type", Number)
573
+ ], HSelect.prototype, "_reactiveSelectedIndexValue", void 0);
579
574
  __decorate([
580
575
  state(),
581
576
  __metadata("design:type", String)
package/build/esm/packages/phoenix/src/components/form/select/select.js.map CHANGED
@@ -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;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;"}
package/build/esm/packages/phoenix/src/components/form/select/select_utils.js CHANGED
@@ -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, isPlaceholder } = option;
5
+ const { selected, value, disabled, hidden, content } = 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,17 +14,14 @@ class SelectControlUtils {
14
14
  $option.setAttribute('disabled', '');
15
15
  if (hidden)
16
16
  $option.setAttribute('hidden', '');
17
- if (isPlaceholder)
18
- $option.setAttribute('placeholder', 'true');
19
17
  return $option;
20
18
  }
21
19
  static syncHTMLOptionWithModel(option, $option) {
22
- const { selected, value, disabled, hidden, isPlaceholder } = option;
20
+ const { selected, value, disabled, hidden } = option;
23
21
  $option.selected = selected;
24
22
  $option.value = value;
25
23
  $option.disabled = disabled;
26
24
  $option.hidden = hidden;
27
- $option.toggleAttribute('placeholder', isPlaceholder);
28
25
  }
29
26
  static removeHTMLOptions($options, optionsValuesThatExists) {
30
27
  return $options.reduce((acc, $option) => {
package/build/esm/packages/phoenix/src/components/form/select/select_utils.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;AACA;AACA;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;"}
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.7-7",
5
+ "version": "1.18.7-9",
6
6
  "description": "phoenix design system",
7
7
  "author": "zefirek",
8
8
  "license": "MIT",