@shoper/phoenix_design_system 1.18.7-5 → 1.18.7-6

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 +57 -76
  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 +57 -76
  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,18 +177,20 @@ 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
- const selectedOptions = this._selectController.selectedOptions$.getValue();
181
- if (!selectedOptions || selectedOptions.length === 0)
182
- return -1;
183
- const htmlOptions = Array.from(this._$options.values());
184
- return this.multiple
185
- ? select_utils.SelectControlUtils.getFirstIndexSelectedOption(htmlOptions)
186
- : select_utils.SelectControlUtils.getLastIndexOfSelectedOption(htmlOptions);
180
+ if (this.reactiveSelectedIndex) {
181
+ return this._reactiveSelectedIndexValue !== undefined ? this._reactiveSelectedIndexValue : this._getSelectedIndex();
182
+ }
183
+ return this._getSelectedIndex();
187
184
  }
188
185
  set selectedIndex(index) {
189
- const option = Array.from(this._$options.values()).filter(($option) => !$option.hidden)[index];
190
- option ? this._selectOption(option.value) : this._selectController.deselectAll();
191
- Array.from(this._$options.values()).forEach(($option) => this.updateOptionAriaAttribute($option));
186
+ if (this.reactiveSelectedIndex) {
187
+ const oldValue = this._reactiveSelectedIndexValue;
188
+ this._reactiveSelectedIndexValue = index;
189
+ this.requestUpdate('selectedIndex', oldValue);
190
+ }
191
+ else {
192
+ this._applySelectedIndex(index);
193
+ }
192
194
  }
193
195
  get selectedOptions() {
194
196
  var _a;
@@ -204,6 +206,20 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
204
206
  get options() {
205
207
  return Array.from(this._$options.values());
206
208
  }
209
+ _getSelectedIndex() {
210
+ const selectedOptions = this._selectController.selectedOptions$.getValue();
211
+ if (!selectedOptions || selectedOptions.length === 0)
212
+ return -1;
213
+ const htmlOptions = Array.from(this._$options.values());
214
+ return this.multiple
215
+ ? select_utils.SelectControlUtils.getFirstIndexSelectedOption(htmlOptions)
216
+ : select_utils.SelectControlUtils.getLastIndexOfSelectedOption(htmlOptions);
217
+ }
218
+ _applySelectedIndex(index) {
219
+ const option = Array.from(this._$options.values()).filter(($option) => !$option.hidden)[index];
220
+ option ? this._selectOption(option.value) : this._selectController.deselectAll();
221
+ Array.from(this._$options.values()).forEach(($option) => this.updateOptionAriaAttribute($option));
222
+ }
207
223
  updated(changedProperties) {
208
224
  var _a, _b;
209
225
  super.updated(changedProperties);
@@ -218,9 +234,6 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
218
234
  }
219
235
  if (changedProperties.has('optionsList')) {
220
236
  this._updateOptions();
221
- if (this.isDevSelectPlaceholderFlagEnabled) {
222
- this._addPlaceholderOptionIfNeeded();
223
- }
224
237
  }
225
238
  if (this._$optionsList.value) {
226
239
  (_a = this.listBoxController) === null || _a === void 0 ? void 0 : _a.hostDisconnected();
@@ -240,6 +253,12 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
240
253
  $list: this._$optionsList.value
241
254
  });
242
255
  }
256
+ if (this.reactiveSelectedIndex && changedProperties.has('selectedIndex') && this.selectedIndex !== undefined) {
257
+ const currentIndex = this._getSelectedIndex();
258
+ if (this.selectedIndex !== currentIndex) {
259
+ this._applySelectedIndex(this.selectedIndex);
260
+ }
261
+ }
243
262
  }
244
263
  _focusElementAfterSelectOpened() {
245
264
  var _a;
@@ -269,9 +288,6 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
269
288
  this._selectedOptionsAriaObserver = new observer.Observer((selectedOptions) => this._updateLabelAria(selectedOptions));
270
289
  this._selectController.selectedOptions$.subscribe(this._selectedOptionsAriaObserver);
271
290
  this._updateOptions();
272
- if (this.isDevSelectPlaceholderFlagEnabled) {
273
- this._addPlaceholderOptionIfNeeded();
274
- }
275
291
  this._setupEvents();
276
292
  }
277
293
  attributeChangedCallback(name, _old, value) {
@@ -284,48 +300,6 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
284
300
  this.disabled ? this.classList.add(select_constants.SELECT_CSS_CLASSES.selectDisabled) : this.classList.remove(select_constants.SELECT_CSS_CLASSES.selectDisabled);
285
301
  }
286
302
  }
287
- _addPlaceholderOptionIfNeeded() {
288
- if (!this._canAddPlaceholder)
289
- return;
290
- const $placeholderOption = this._createPlaceholderOptionFactory();
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
- _createPlaceholderOptionFactory() {
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
303
  _setupEvents() {
330
304
  this.addEventListener(select_constants.SELECT_EVENT_NAMES.deselectOption, this._handleOptionDeselect);
331
305
  this.addEventListener(select_components_constatns.SELECT_CLOSE_BTN_EVENT_NAMES.close, this._closeSelect);
@@ -394,6 +368,9 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
394
368
  this._selectController.options$.unsubscribe(this._optionsObserver);
395
369
  this._$options.clear();
396
370
  }
371
+ _getClonedPlaceholderElement() {
372
+ return this.$placeholder instanceof HTMLElement ? this.$placeholder.cloneNode(true) : this.$placeholder;
373
+ }
397
374
  _searchNoResult() {
398
375
  return Boolean(!this._selectController.visibleOptionsCount && Array.from(this._$options.keys()).length);
399
376
  }
@@ -403,7 +380,7 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
403
380
  return fragment;
404
381
  }
405
382
  render() {
406
- var _a, _b, _c, _d, _e, _f;
383
+ var _a, _b, _c, _d, _e;
407
384
  const options = (_a = this._selectController.options$.getValue()) !== null && _a !== void 0 ? _a : [];
408
385
  const isSearchEnabled = !this.searchDisabled && options.length > select_constants.MIN_NUMBER_OF_OPTIONS_TO_SHOW_SEARCH;
409
386
  return lit.html `
@@ -427,7 +404,6 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
427
404
  aria-activedescendant
428
405
  role="combobox"
429
406
  aria-controls="${this._selectOptionsId}"
430
- aria-labelledby="${this.assistiveTitleId}"
431
407
  >
432
408
  ${this.getSlot(select_constants.SELECT_SLOT_NAMES.toggler)}
433
409
  </h-dropdown-toggler>
@@ -440,14 +416,14 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
440
416
  >
441
417
  <h-select-close-btn class="${select_constants.SELECT_CSS_CLASSES.selectCloseMobileButton}" @close=${this._closeSelect}></h-select-close-btn>
442
418
 
443
- <div class=${select_constants.SELECT_CSS_CLASSES.selectLabel}>${(_b = this.$searchLabel) === null || _b === void 0 ? void 0 : _b.cloneNode(true)}</div>
419
+ <div class=${select_constants.SELECT_CSS_CLASSES.selectLabel}>${lit.html `${this._getClonedPlaceholderElement()}`}</div>
444
420
 
445
421
  ${isSearchEnabled
446
422
  ? lit.html ` <h-select-search
447
423
  class=${select_constants.SELECT_CSS_CLASSES.selectSearch}
448
424
  ${ref_js.ref(this.$search)}
449
425
  .value=${this._searchValue}
450
- placeholder=${((_c = this.translations) === null || _c === void 0 ? void 0 : _c.search) || select_constants.SELECT_DEFAULT_TRANSLATIONS.SEARCH}
426
+ placeholder=${((_b = this.translations) === null || _b === void 0 ? void 0 : _b.search) || select_constants.SELECT_DEFAULT_TRANSLATIONS.SEARCH}
451
427
  @search=${this._handleSearch}
452
428
  ></h-select-search>`
453
429
  : lit.nothing}
@@ -468,7 +444,7 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
468
444
  ${this._searchNoResult()
469
445
  ? lit.html ` <div>
470
446
  <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}:
447
+ ${((_c = this.translations) === null || _c === void 0 ? void 0 : _c.noResultsFor) || select_constants.SELECT_DEFAULT_TRANSLATIONS.NO_RESULTS_FOR}:
472
448
  <em class=${select_constants.SELECT_CSS_CLASSES.selectSearchedPhrase}>"${this._searchValue}"</em>
473
449
  </p>
474
450
  </div>`
@@ -477,11 +453,11 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
477
453
  ? lit.html `
478
454
  <section class=${select_constants.SELECT_CSS_CLASSES.selectFooter}>
479
455
  <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}
456
+ ${((_d = this.translations) === null || _d === void 0 ? void 0 : _d.reset) || select_constants.SELECT_DEFAULT_TRANSLATIONS.RESET}
481
457
  </button>
482
458
  <h-select-close-btn class="${select_constants.SELECT_CSS_CLASSES.selectCloseButton}" @close=${this._closeSelect}
483
459
  ><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
460
+ >${((_e = this.translations) === null || _e === void 0 ? void 0 : _e.choose) || select_constants.SELECT_DEFAULT_TRANSLATIONS.CHOOSE}</span
485
461
  >
486
462
  </h-select-close-btn>
487
463
  </section>
@@ -555,10 +531,6 @@ tslib_es6.__decorate([
555
531
  decorators_js.property({ type: String, attribute: 'assistive-title-id' }),
556
532
  tslib_es6.__metadata("design:type", String)
557
533
  ], 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
534
  tslib_es6.__decorate([
563
535
  decorators_js.property({
564
536
  converter: {
@@ -580,6 +552,15 @@ tslib_es6.__decorate([
580
552
  }),
581
553
  tslib_es6.__metadata("design:type", Object)
582
554
  ], exports.HSelect.prototype, "translations", void 0);
555
+ tslib_es6.__decorate([
556
+ decorators_js.property({ type: Boolean, attribute: 'reactive-selected-index' }),
557
+ tslib_es6.__metadata("design:type", Boolean)
558
+ ], exports.HSelect.prototype, "reactiveSelectedIndex", void 0);
559
+ tslib_es6.__decorate([
560
+ decorators_js.property({ type: Number, attribute: false }),
561
+ tslib_es6.__metadata("design:type", Number),
562
+ tslib_es6.__metadata("design:paramtypes", [Number])
563
+ ], exports.HSelect.prototype, "selectedIndex", null);
583
564
  tslib_es6.__decorate([
584
565
  decorators.state(),
585
566
  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;"}
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
+ private _reactiveSelectedIndexValue?;
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 _createPlaceholderOptionFactory;
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,18 +173,20 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
173
173
  this.type = SELECT_TYPES.multiple;
174
174
  }
175
175
  get selectedIndex() {
176
- const selectedOptions = this._selectController.selectedOptions$.getValue();
177
- if (!selectedOptions || selectedOptions.length === 0)
178
- return -1;
179
- const htmlOptions = Array.from(this._$options.values());
180
- return this.multiple
181
- ? SelectControlUtils.getFirstIndexSelectedOption(htmlOptions)
182
- : SelectControlUtils.getLastIndexOfSelectedOption(htmlOptions);
176
+ if (this.reactiveSelectedIndex) {
177
+ return this._reactiveSelectedIndexValue !== undefined ? this._reactiveSelectedIndexValue : this._getSelectedIndex();
178
+ }
179
+ return this._getSelectedIndex();
183
180
  }
184
181
  set selectedIndex(index) {
185
- const option = Array.from(this._$options.values()).filter(($option) => !$option.hidden)[index];
186
- option ? this._selectOption(option.value) : this._selectController.deselectAll();
187
- Array.from(this._$options.values()).forEach(($option) => this.updateOptionAriaAttribute($option));
182
+ if (this.reactiveSelectedIndex) {
183
+ const oldValue = this._reactiveSelectedIndexValue;
184
+ this._reactiveSelectedIndexValue = index;
185
+ this.requestUpdate('selectedIndex', oldValue);
186
+ }
187
+ else {
188
+ this._applySelectedIndex(index);
189
+ }
188
190
  }
189
191
  get selectedOptions() {
190
192
  var _a;
@@ -200,6 +202,20 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
200
202
  get options() {
201
203
  return Array.from(this._$options.values());
202
204
  }
205
+ _getSelectedIndex() {
206
+ const selectedOptions = this._selectController.selectedOptions$.getValue();
207
+ if (!selectedOptions || selectedOptions.length === 0)
208
+ return -1;
209
+ const htmlOptions = Array.from(this._$options.values());
210
+ return this.multiple
211
+ ? SelectControlUtils.getFirstIndexSelectedOption(htmlOptions)
212
+ : SelectControlUtils.getLastIndexOfSelectedOption(htmlOptions);
213
+ }
214
+ _applySelectedIndex(index) {
215
+ const option = Array.from(this._$options.values()).filter(($option) => !$option.hidden)[index];
216
+ option ? this._selectOption(option.value) : this._selectController.deselectAll();
217
+ Array.from(this._$options.values()).forEach(($option) => this.updateOptionAriaAttribute($option));
218
+ }
203
219
  updated(changedProperties) {
204
220
  var _a, _b;
205
221
  super.updated(changedProperties);
@@ -214,9 +230,6 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
214
230
  }
215
231
  if (changedProperties.has('optionsList')) {
216
232
  this._updateOptions();
217
- if (this.isDevSelectPlaceholderFlagEnabled) {
218
- this._addPlaceholderOptionIfNeeded();
219
- }
220
233
  }
221
234
  if (this._$optionsList.value) {
222
235
  (_a = this.listBoxController) === null || _a === void 0 ? void 0 : _a.hostDisconnected();
@@ -236,6 +249,12 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
236
249
  $list: this._$optionsList.value
237
250
  });
238
251
  }
252
+ if (this.reactiveSelectedIndex && changedProperties.has('selectedIndex') && this.selectedIndex !== undefined) {
253
+ const currentIndex = this._getSelectedIndex();
254
+ if (this.selectedIndex !== currentIndex) {
255
+ this._applySelectedIndex(this.selectedIndex);
256
+ }
257
+ }
239
258
  }
240
259
  _focusElementAfterSelectOpened() {
241
260
  var _a;
@@ -265,9 +284,6 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
265
284
  this._selectedOptionsAriaObserver = new Observer((selectedOptions) => this._updateLabelAria(selectedOptions));
266
285
  this._selectController.selectedOptions$.subscribe(this._selectedOptionsAriaObserver);
267
286
  this._updateOptions();
268
- if (this.isDevSelectPlaceholderFlagEnabled) {
269
- this._addPlaceholderOptionIfNeeded();
270
- }
271
287
  this._setupEvents();
272
288
  }
273
289
  attributeChangedCallback(name, _old, value) {
@@ -280,48 +296,6 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
280
296
  this.disabled ? this.classList.add(SELECT_CSS_CLASSES.selectDisabled) : this.classList.remove(SELECT_CSS_CLASSES.selectDisabled);
281
297
  }
282
298
  }
283
- _addPlaceholderOptionIfNeeded() {
284
- if (!this._canAddPlaceholder)
285
- return;
286
- const $placeholderOption = this._createPlaceholderOptionFactory();
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
- _createPlaceholderOptionFactory() {
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
299
  _setupEvents() {
326
300
  this.addEventListener(SELECT_EVENT_NAMES.deselectOption, this._handleOptionDeselect);
327
301
  this.addEventListener(SELECT_CLOSE_BTN_EVENT_NAMES.close, this._closeSelect);
@@ -390,6 +364,9 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
390
364
  this._selectController.options$.unsubscribe(this._optionsObserver);
391
365
  this._$options.clear();
392
366
  }
367
+ _getClonedPlaceholderElement() {
368
+ return this.$placeholder instanceof HTMLElement ? this.$placeholder.cloneNode(true) : this.$placeholder;
369
+ }
393
370
  _searchNoResult() {
394
371
  return Boolean(!this._selectController.visibleOptionsCount && Array.from(this._$options.keys()).length);
395
372
  }
@@ -399,7 +376,7 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
399
376
  return fragment;
400
377
  }
401
378
  render() {
402
- var _a, _b, _c, _d, _e, _f;
379
+ var _a, _b, _c, _d, _e;
403
380
  const options = (_a = this._selectController.options$.getValue()) !== null && _a !== void 0 ? _a : [];
404
381
  const isSearchEnabled = !this.searchDisabled && options.length > MIN_NUMBER_OF_OPTIONS_TO_SHOW_SEARCH;
405
382
  return html `
@@ -423,7 +400,6 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
423
400
  aria-activedescendant
424
401
  role="combobox"
425
402
  aria-controls="${this._selectOptionsId}"
426
- aria-labelledby="${this.assistiveTitleId}"
427
403
  >
428
404
  ${this.getSlot(SELECT_SLOT_NAMES.toggler)}
429
405
  </h-dropdown-toggler>
@@ -436,14 +412,14 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
436
412
  >
437
413
  <h-select-close-btn class="${SELECT_CSS_CLASSES.selectCloseMobileButton}" @close=${this._closeSelect}></h-select-close-btn>
438
414
 
439
- <div class=${SELECT_CSS_CLASSES.selectLabel}>${(_b = this.$searchLabel) === null || _b === void 0 ? void 0 : _b.cloneNode(true)}</div>
415
+ <div class=${SELECT_CSS_CLASSES.selectLabel}>${html `${this._getClonedPlaceholderElement()}`}</div>
440
416
 
441
417
  ${isSearchEnabled
442
418
  ? html ` <h-select-search
443
419
  class=${SELECT_CSS_CLASSES.selectSearch}
444
420
  ${ref(this.$search)}
445
421
  .value=${this._searchValue}
446
- placeholder=${((_c = this.translations) === null || _c === void 0 ? void 0 : _c.search) || SELECT_DEFAULT_TRANSLATIONS.SEARCH}
422
+ placeholder=${((_b = this.translations) === null || _b === void 0 ? void 0 : _b.search) || SELECT_DEFAULT_TRANSLATIONS.SEARCH}
447
423
  @search=${this._handleSearch}
448
424
  ></h-select-search>`
449
425
  : nothing}
@@ -464,7 +440,7 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
464
440
  ${this._searchNoResult()
465
441
  ? html ` <div>
466
442
  <p class=${SELECT_CSS_CLASSES.selectNoResult}>
467
- ${((_d = this.translations) === null || _d === void 0 ? void 0 : _d.noResultsFor) || SELECT_DEFAULT_TRANSLATIONS.NO_RESULTS_FOR}:
443
+ ${((_c = this.translations) === null || _c === void 0 ? void 0 : _c.noResultsFor) || SELECT_DEFAULT_TRANSLATIONS.NO_RESULTS_FOR}:
468
444
  <em class=${SELECT_CSS_CLASSES.selectSearchedPhrase}>"${this._searchValue}"</em>
469
445
  </p>
470
446
  </div>`
@@ -473,11 +449,11 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
473
449
  ? html `
474
450
  <section class=${SELECT_CSS_CLASSES.selectFooter}>
475
451
  <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}
452
+ ${((_d = this.translations) === null || _d === void 0 ? void 0 : _d.reset) || SELECT_DEFAULT_TRANSLATIONS.RESET}
477
453
  </button>
478
454
  <h-select-close-btn class="${SELECT_CSS_CLASSES.selectCloseButton}" @close=${this._closeSelect}
479
455
  ><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
456
+ >${((_e = this.translations) === null || _e === void 0 ? void 0 : _e.choose) || SELECT_DEFAULT_TRANSLATIONS.CHOOSE}</span
481
457
  >
482
458
  </h-select-close-btn>
483
459
  </section>
@@ -551,10 +527,6 @@ __decorate([
551
527
  property({ type: String, attribute: 'assistive-title-id' }),
552
528
  __metadata("design:type", String)
553
529
  ], 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
530
  __decorate([
559
531
  property({
560
532
  converter: {
@@ -576,6 +548,15 @@ __decorate([
576
548
  }),
577
549
  __metadata("design:type", Object)
578
550
  ], HSelect.prototype, "translations", void 0);
551
+ __decorate([
552
+ property({ type: Boolean, attribute: 'reactive-selected-index' }),
553
+ __metadata("design:type", Boolean)
554
+ ], HSelect.prototype, "reactiveSelectedIndex", void 0);
555
+ __decorate([
556
+ property({ type: Number, attribute: false }),
557
+ __metadata("design:type", Number),
558
+ __metadata("design:paramtypes", [Number])
559
+ ], HSelect.prototype, "selectedIndex", null);
579
560
  __decorate([
580
561
  state(),
581
562
  __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;"}
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-5",
5
+ "version": "1.18.7-6",
6
6
  "description": "phoenix design system",
7
7
  "author": "zefirek",
8
8
  "license": "MIT",