@shoper/phoenix_design_system 1.18.7-6 → 1.18.7-7

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 +2 -1
  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 +3 -2
  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 +76 -57
  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 +5 -2
  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 +1 -0
  10. package/build/esm/packages/phoenix/src/components/form/select/model/select_option.js +2 -1
  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 +3 -2
  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 +1 -0
  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 +76 -57
  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 +5 -2
  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,13 +3,14 @@
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
5
  class SelectOption {
6
- constructor({ selected = false, hidden = false, disabled = false, value, content, inactive = false }) {
6
+ constructor({ selected = false, hidden = false, disabled = false, value, content, inactive = false, isPlaceholder = false }) {
7
7
  this.value = value;
8
8
  this.selected = selected;
9
9
  this.hidden = hidden;
10
10
  this.disabled = disabled;
11
11
  this.content = content;
12
12
  this.inactive = inactive;
13
+ this.isPlaceholder = isPlaceholder;
13
14
  }
14
15
  static create(options) {
15
16
  return new SelectOption(options);
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;"}
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;"}
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)
13
+ if (value === null || value === undefined)
14
14
  throw new Error('h-option must contain a unique value');
15
15
  if (!optionContentText)
16
16
  throw new Error('h-options must contains a h-option-content element inside');
@@ -20,7 +20,8 @@ class SelectOptionMapper {
20
20
  hidden: $option.hasAttribute('hidden'),
21
21
  inactive: $option.hasAttribute('inactive'),
22
22
  content: optionContentText,
23
- selected: $option.hasAttribute('selected')
23
+ selected: $option.hasAttribute('selected'),
24
+ isPlaceholder: $option.hasAttribute('placeholder')
24
25
  });
25
26
  }
26
27
  }
package/build/cjs/packages/phoenix/src/components/form/select/model/select_option_mapper.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
1
+ {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
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;
46
47
  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)
61
+ if (value === null || value === undefined)
62
62
  throw Error('Select option must hava a value');
63
63
  if (acc.has(value))
64
64
  throw Error('Select options must hava a unique values.');
@@ -115,12 +115,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
- this.$searchLabel.innerHTML = `
119
- ${(_b = this.$searchLabel) === null || _b === void 0 ? void 0 : _b.innerHTML}
120
- <span id="value-label" class="sr-only">
118
+ const valueLabel = options.some((option) => !option.isPlaceholder)
119
+ ? `<span id="value-label" class="sr-only">
121
120
  ${options.reduce((totalSelectedContent, currentOption) => (totalSelectedContent += currentOption.content), '')}
122
- </span>
123
- `;
121
+ </span>`
122
+ : '';
123
+ this.$searchLabel.innerHTML = `${(_b = this.$searchLabel) === null || _b === void 0 ? void 0 : _b.innerHTML} ${valueLabel}`;
124
124
  };
125
125
  this._handleOptionClicked = ({ detail }) => {
126
126
  if (!(detail === null || detail === void 0 ? void 0 : detail.$option))
@@ -177,20 +177,18 @@ 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._reactiveSelectedIndexValue !== undefined ? this._reactiveSelectedIndexValue : this._getSelectedIndex();
182
- }
183
- return this._getSelectedIndex();
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);
184
187
  }
185
188
  set selectedIndex(index) {
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
- }
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));
194
192
  }
195
193
  get selectedOptions() {
196
194
  var _a;
@@ -206,20 +204,6 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
206
204
  get options() {
207
205
  return Array.from(this._$options.values());
208
206
  }
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
- }
223
207
  updated(changedProperties) {
224
208
  var _a, _b;
225
209
  super.updated(changedProperties);
@@ -234,6 +218,9 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
234
218
  }
235
219
  if (changedProperties.has('optionsList')) {
236
220
  this._updateOptions();
221
+ if (this.isDevSelectPlaceholderFlagEnabled) {
222
+ this._addPlaceholderOptionIfNeeded();
223
+ }
237
224
  }
238
225
  if (this._$optionsList.value) {
239
226
  (_a = this.listBoxController) === null || _a === void 0 ? void 0 : _a.hostDisconnected();
@@ -253,12 +240,6 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
253
240
  $list: this._$optionsList.value
254
241
  });
255
242
  }
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
- }
262
243
  }
263
244
  _focusElementAfterSelectOpened() {
264
245
  var _a;
@@ -288,6 +269,9 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
288
269
  this._selectedOptionsAriaObserver = new observer.Observer((selectedOptions) => this._updateLabelAria(selectedOptions));
289
270
  this._selectController.selectedOptions$.subscribe(this._selectedOptionsAriaObserver);
290
271
  this._updateOptions();
272
+ if (this.isDevSelectPlaceholderFlagEnabled) {
273
+ this._addPlaceholderOptionIfNeeded();
274
+ }
291
275
  this._setupEvents();
292
276
  }
293
277
  attributeChangedCallback(name, _old, value) {
@@ -300,6 +284,48 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
300
284
  this.disabled ? this.classList.add(select_constants.SELECT_CSS_CLASSES.selectDisabled) : this.classList.remove(select_constants.SELECT_CSS_CLASSES.selectDisabled);
301
285
  }
302
286
  }
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
+ }
303
329
  _setupEvents() {
304
330
  this.addEventListener(select_constants.SELECT_EVENT_NAMES.deselectOption, this._handleOptionDeselect);
305
331
  this.addEventListener(select_components_constatns.SELECT_CLOSE_BTN_EVENT_NAMES.close, this._closeSelect);
@@ -368,9 +394,6 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
368
394
  this._selectController.options$.unsubscribe(this._optionsObserver);
369
395
  this._$options.clear();
370
396
  }
371
- _getClonedPlaceholderElement() {
372
- return this.$placeholder instanceof HTMLElement ? this.$placeholder.cloneNode(true) : this.$placeholder;
373
- }
374
397
  _searchNoResult() {
375
398
  return Boolean(!this._selectController.visibleOptionsCount && Array.from(this._$options.keys()).length);
376
399
  }
@@ -380,7 +403,7 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
380
403
  return fragment;
381
404
  }
382
405
  render() {
383
- var _a, _b, _c, _d, _e;
406
+ var _a, _b, _c, _d, _e, _f;
384
407
  const options = (_a = this._selectController.options$.getValue()) !== null && _a !== void 0 ? _a : [];
385
408
  const isSearchEnabled = !this.searchDisabled && options.length > select_constants.MIN_NUMBER_OF_OPTIONS_TO_SHOW_SEARCH;
386
409
  return lit.html `
@@ -404,6 +427,7 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
404
427
  aria-activedescendant
405
428
  role="combobox"
406
429
  aria-controls="${this._selectOptionsId}"
430
+ aria-labelledby="${this.assistiveTitleId}"
407
431
  >
408
432
  ${this.getSlot(select_constants.SELECT_SLOT_NAMES.toggler)}
409
433
  </h-dropdown-toggler>
@@ -416,14 +440,14 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
416
440
  >
417
441
  <h-select-close-btn class="${select_constants.SELECT_CSS_CLASSES.selectCloseMobileButton}" @close=${this._closeSelect}></h-select-close-btn>
418
442
 
419
- <div class=${select_constants.SELECT_CSS_CLASSES.selectLabel}>${lit.html `${this._getClonedPlaceholderElement()}`}</div>
443
+ <div class=${select_constants.SELECT_CSS_CLASSES.selectLabel}>${(_b = this.$searchLabel) === null || _b === void 0 ? void 0 : _b.cloneNode(true)}</div>
420
444
 
421
445
  ${isSearchEnabled
422
446
  ? lit.html ` <h-select-search
423
447
  class=${select_constants.SELECT_CSS_CLASSES.selectSearch}
424
448
  ${ref_js.ref(this.$search)}
425
449
  .value=${this._searchValue}
426
- placeholder=${((_b = this.translations) === null || _b === void 0 ? void 0 : _b.search) || select_constants.SELECT_DEFAULT_TRANSLATIONS.SEARCH}
450
+ placeholder=${((_c = this.translations) === null || _c === void 0 ? void 0 : _c.search) || select_constants.SELECT_DEFAULT_TRANSLATIONS.SEARCH}
427
451
  @search=${this._handleSearch}
428
452
  ></h-select-search>`
429
453
  : lit.nothing}
@@ -444,7 +468,7 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
444
468
  ${this._searchNoResult()
445
469
  ? lit.html ` <div>
446
470
  <p class=${select_constants.SELECT_CSS_CLASSES.selectNoResult}>
447
- ${((_c = this.translations) === null || _c === void 0 ? void 0 : _c.noResultsFor) || select_constants.SELECT_DEFAULT_TRANSLATIONS.NO_RESULTS_FOR}:
471
+ ${((_d = this.translations) === null || _d === void 0 ? void 0 : _d.noResultsFor) || select_constants.SELECT_DEFAULT_TRANSLATIONS.NO_RESULTS_FOR}:
448
472
  <em class=${select_constants.SELECT_CSS_CLASSES.selectSearchedPhrase}>"${this._searchValue}"</em>
449
473
  </p>
450
474
  </div>`
@@ -453,11 +477,11 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
453
477
  ? lit.html `
454
478
  <section class=${select_constants.SELECT_CSS_CLASSES.selectFooter}>
455
479
  <button class="${select_constants.SELECT_CSS_CLASSES.selectClearButton}" @click=${this._clearOptions}>
456
- ${((_d = this.translations) === null || _d === void 0 ? void 0 : _d.reset) || select_constants.SELECT_DEFAULT_TRANSLATIONS.RESET}
480
+ ${((_e = this.translations) === null || _e === void 0 ? void 0 : _e.reset) || select_constants.SELECT_DEFAULT_TRANSLATIONS.RESET}
457
481
  </button>
458
482
  <h-select-close-btn class="${select_constants.SELECT_CSS_CLASSES.selectCloseButton}" @close=${this._closeSelect}
459
483
  ><span slot=${select_components_constatns.SELECT_CLOSE_BUTTON_CONTENT_SLOT_NAME}
460
- >${((_e = this.translations) === null || _e === void 0 ? void 0 : _e.choose) || select_constants.SELECT_DEFAULT_TRANSLATIONS.CHOOSE}</span
484
+ >${((_f = this.translations) === null || _f === void 0 ? void 0 : _f.choose) || select_constants.SELECT_DEFAULT_TRANSLATIONS.CHOOSE}</span
461
485
  >
462
486
  </h-select-close-btn>
463
487
  </section>
@@ -531,6 +555,10 @@ tslib_es6.__decorate([
531
555
  decorators_js.property({ type: String, attribute: 'assistive-title-id' }),
532
556
  tslib_es6.__metadata("design:type", String)
533
557
  ], 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);
534
562
  tslib_es6.__decorate([
535
563
  decorators_js.property({
536
564
  converter: {
@@ -552,15 +580,6 @@ tslib_es6.__decorate([
552
580
  }),
553
581
  tslib_es6.__metadata("design:type", Object)
554
582
  ], 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);
564
583
  tslib_es6.__decorate([
565
584
  decorators.state(),
566
585
  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;"}
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;"}
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 } = option;
9
+ const { selected, value, disabled, hidden, content, isPlaceholder } = option;
10
10
  const $option = document.createElement(select_components_constatns.SELECT_RELATED_COMPONENTS_NAMES.option);
11
11
  $option.setAttribute('value', String(value));
12
12
  const $optionContent = document.createElement(select_components_constatns.SELECT_RELATED_COMPONENTS_NAMES.optionContent);
@@ -18,14 +18,17 @@ class SelectControlUtils {
18
18
  $option.setAttribute('disabled', '');
19
19
  if (hidden)
20
20
  $option.setAttribute('hidden', '');
21
+ if (isPlaceholder)
22
+ $option.setAttribute('placeholder', 'true');
21
23
  return $option;
22
24
  }
23
25
  static syncHTMLOptionWithModel(option, $option) {
24
- const { selected, value, disabled, hidden } = option;
26
+ const { selected, value, disabled, hidden, isPlaceholder } = option;
25
27
  $option.selected = selected;
26
28
  $option.value = value;
27
29
  $option.disabled = disabled;
28
30
  $option.hidden = hidden;
31
+ $option.toggleAttribute('placeholder', isPlaceholder);
29
32
  }
30
33
  static removeHTMLOptions($options, optionsValuesThatExists) {
31
34
  return $options.reduce((acc, $option) => {
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;"}
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;"}
package/build/esm/packages/phoenix/src/components/form/select/model/select_option.d.ts CHANGED
@@ -6,6 +6,7 @@ export declare class SelectOption {
6
6
  inactive: boolean;
7
7
  hidden: boolean;
8
8
  content: string;
9
+ isPlaceholder: boolean;
9
10
  private constructor();
10
11
  static create(options: TSelectOptionConstructorOptions): SelectOption;
11
12
  }
package/build/esm/packages/phoenix/src/components/form/select/model/select_option.js CHANGED
@@ -1,11 +1,12 @@
1
1
  class SelectOption {
2
- constructor({ selected = false, hidden = false, disabled = false, value, content, inactive = false }) {
2
+ constructor({ selected = false, hidden = false, disabled = false, value, content, inactive = false, isPlaceholder = false }) {
3
3
  this.value = value;
4
4
  this.selected = selected;
5
5
  this.hidden = hidden;
6
6
  this.disabled = disabled;
7
7
  this.content = content;
8
8
  this.inactive = inactive;
9
+ this.isPlaceholder = isPlaceholder;
9
10
  }
10
11
  static create(options) {
11
12
  return new SelectOption(options);
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;"}
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;"}
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)
9
+ if (value === null || value === undefined)
10
10
  throw new Error('h-option must contain a unique value');
11
11
  if (!optionContentText)
12
12
  throw new Error('h-options must contains a h-option-content element inside');
@@ -16,7 +16,8 @@ class SelectOptionMapper {
16
16
  hidden: $option.hasAttribute('hidden'),
17
17
  inactive: $option.hasAttribute('inactive'),
18
18
  content: optionContentText,
19
- selected: $option.hasAttribute('selected')
19
+ selected: $option.hasAttribute('selected'),
20
+ isPlaceholder: $option.hasAttribute('placeholder')
20
21
  });
21
22
  }
22
23
  }
package/build/esm/packages/phoenix/src/components/form/select/model/select_option_mapper.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
1
+ {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
package/build/esm/packages/phoenix/src/components/form/select/model/select_option_types.d.ts CHANGED
@@ -5,5 +5,6 @@ export declare type TSelectOption = {
5
5
  disabled?: boolean;
6
6
  hidden?: boolean;
7
7
  inactive?: boolean;
8
+ isPlaceholder?: boolean;
8
9
  };
9
10
  export declare type TSelectOptionConstructorOptions = TSelectOption;
package/build/esm/packages/phoenix/src/components/form/select/select.d.ts CHANGED
@@ -23,9 +23,8 @@ export declare class HSelect extends PhoenixLightLitElement {
23
23
  optionsList?: TSelectOption[];
24
24
  noDeselect: boolean;
25
25
  assistiveTitleId: string;
26
+ isDevSelectPlaceholderFlagEnabled: boolean;
26
27
  translations: Record<string, string>;
27
- reactiveSelectedIndex: boolean;
28
- private _reactiveSelectedIndexValue?;
29
28
  private _selectOptionsId;
30
29
  get selectedIndex(): number;
31
30
  set selectedIndex(index: number);
@@ -49,14 +48,16 @@ export declare class HSelect extends PhoenixLightLitElement {
49
48
  private $placeholder;
50
49
  private $searchLabel;
51
50
  constructor();
52
- private _getSelectedIndex;
53
- private _applySelectedIndex;
54
51
  updated(changedProperties: PropertyValues): void;
55
52
  private _focusElementAfterSelectOpened;
56
53
  connectedCallback(): void;
57
54
  attributeChangedCallback(name: string, _old: string | null, value: string | null): void;
58
55
  private _updateOptions;
59
56
  private _getOptions;
57
+ private _addPlaceholderOptionIfNeeded;
58
+ private get _canAddPlaceholder();
59
+ private _createPlaceholderOption;
60
+ private _injectOptionIntoDOM;
60
61
  private _setupEvents;
61
62
  private _handleOptionDeselect;
62
63
  private _updateOptionsView;
@@ -80,7 +81,6 @@ export declare class HSelect extends PhoenixLightLitElement {
80
81
  getOption(value: string): SelectOption | undefined;
81
82
  select(option: SelectOption): void;
82
83
  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;
42
43
  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)
57
+ if (value === null || value === undefined)
58
58
  throw Error('Select option must hava a value');
59
59
  if (acc.has(value))
60
60
  throw Error('Select options must hava a unique values.');
@@ -111,12 +111,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
- this.$searchLabel.innerHTML = `
115
- ${(_b = this.$searchLabel) === null || _b === void 0 ? void 0 : _b.innerHTML}
116
- <span id="value-label" class="sr-only">
114
+ const valueLabel = options.some((option) => !option.isPlaceholder)
115
+ ? `<span id="value-label" class="sr-only">
117
116
  ${options.reduce((totalSelectedContent, currentOption) => (totalSelectedContent += currentOption.content), '')}
118
- </span>
119
- `;
117
+ </span>`
118
+ : '';
119
+ this.$searchLabel.innerHTML = `${(_b = this.$searchLabel) === null || _b === void 0 ? void 0 : _b.innerHTML} ${valueLabel}`;
120
120
  };
121
121
  this._handleOptionClicked = ({ detail }) => {
122
122
  if (!(detail === null || detail === void 0 ? void 0 : detail.$option))
@@ -173,20 +173,18 @@ 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._reactiveSelectedIndexValue !== undefined ? this._reactiveSelectedIndexValue : this._getSelectedIndex();
178
- }
179
- return this._getSelectedIndex();
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);
180
183
  }
181
184
  set selectedIndex(index) {
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
- }
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));
190
188
  }
191
189
  get selectedOptions() {
192
190
  var _a;
@@ -202,20 +200,6 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
202
200
  get options() {
203
201
  return Array.from(this._$options.values());
204
202
  }
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
- }
219
203
  updated(changedProperties) {
220
204
  var _a, _b;
221
205
  super.updated(changedProperties);
@@ -230,6 +214,9 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
230
214
  }
231
215
  if (changedProperties.has('optionsList')) {
232
216
  this._updateOptions();
217
+ if (this.isDevSelectPlaceholderFlagEnabled) {
218
+ this._addPlaceholderOptionIfNeeded();
219
+ }
233
220
  }
234
221
  if (this._$optionsList.value) {
235
222
  (_a = this.listBoxController) === null || _a === void 0 ? void 0 : _a.hostDisconnected();
@@ -249,12 +236,6 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
249
236
  $list: this._$optionsList.value
250
237
  });
251
238
  }
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
- }
258
239
  }
259
240
  _focusElementAfterSelectOpened() {
260
241
  var _a;
@@ -284,6 +265,9 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
284
265
  this._selectedOptionsAriaObserver = new Observer((selectedOptions) => this._updateLabelAria(selectedOptions));
285
266
  this._selectController.selectedOptions$.subscribe(this._selectedOptionsAriaObserver);
286
267
  this._updateOptions();
268
+ if (this.isDevSelectPlaceholderFlagEnabled) {
269
+ this._addPlaceholderOptionIfNeeded();
270
+ }
287
271
  this._setupEvents();
288
272
  }
289
273
  attributeChangedCallback(name, _old, value) {
@@ -296,6 +280,48 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
296
280
  this.disabled ? this.classList.add(SELECT_CSS_CLASSES.selectDisabled) : this.classList.remove(SELECT_CSS_CLASSES.selectDisabled);
297
281
  }
298
282
  }
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
+ }
299
325
  _setupEvents() {
300
326
  this.addEventListener(SELECT_EVENT_NAMES.deselectOption, this._handleOptionDeselect);
301
327
  this.addEventListener(SELECT_CLOSE_BTN_EVENT_NAMES.close, this._closeSelect);
@@ -364,9 +390,6 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
364
390
  this._selectController.options$.unsubscribe(this._optionsObserver);
365
391
  this._$options.clear();
366
392
  }
367
- _getClonedPlaceholderElement() {
368
- return this.$placeholder instanceof HTMLElement ? this.$placeholder.cloneNode(true) : this.$placeholder;
369
- }
370
393
  _searchNoResult() {
371
394
  return Boolean(!this._selectController.visibleOptionsCount && Array.from(this._$options.keys()).length);
372
395
  }
@@ -376,7 +399,7 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
376
399
  return fragment;
377
400
  }
378
401
  render() {
379
- var _a, _b, _c, _d, _e;
402
+ var _a, _b, _c, _d, _e, _f;
380
403
  const options = (_a = this._selectController.options$.getValue()) !== null && _a !== void 0 ? _a : [];
381
404
  const isSearchEnabled = !this.searchDisabled && options.length > MIN_NUMBER_OF_OPTIONS_TO_SHOW_SEARCH;
382
405
  return html `
@@ -400,6 +423,7 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
400
423
  aria-activedescendant
401
424
  role="combobox"
402
425
  aria-controls="${this._selectOptionsId}"
426
+ aria-labelledby="${this.assistiveTitleId}"
403
427
  >
404
428
  ${this.getSlot(SELECT_SLOT_NAMES.toggler)}
405
429
  </h-dropdown-toggler>
@@ -412,14 +436,14 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
412
436
  >
413
437
  <h-select-close-btn class="${SELECT_CSS_CLASSES.selectCloseMobileButton}" @close=${this._closeSelect}></h-select-close-btn>
414
438
 
415
- <div class=${SELECT_CSS_CLASSES.selectLabel}>${html `${this._getClonedPlaceholderElement()}`}</div>
439
+ <div class=${SELECT_CSS_CLASSES.selectLabel}>${(_b = this.$searchLabel) === null || _b === void 0 ? void 0 : _b.cloneNode(true)}</div>
416
440
 
417
441
  ${isSearchEnabled
418
442
  ? html ` <h-select-search
419
443
  class=${SELECT_CSS_CLASSES.selectSearch}
420
444
  ${ref(this.$search)}
421
445
  .value=${this._searchValue}
422
- placeholder=${((_b = this.translations) === null || _b === void 0 ? void 0 : _b.search) || SELECT_DEFAULT_TRANSLATIONS.SEARCH}
446
+ placeholder=${((_c = this.translations) === null || _c === void 0 ? void 0 : _c.search) || SELECT_DEFAULT_TRANSLATIONS.SEARCH}
423
447
  @search=${this._handleSearch}
424
448
  ></h-select-search>`
425
449
  : nothing}
@@ -440,7 +464,7 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
440
464
  ${this._searchNoResult()
441
465
  ? html ` <div>
442
466
  <p class=${SELECT_CSS_CLASSES.selectNoResult}>
443
- ${((_c = this.translations) === null || _c === void 0 ? void 0 : _c.noResultsFor) || SELECT_DEFAULT_TRANSLATIONS.NO_RESULTS_FOR}:
467
+ ${((_d = this.translations) === null || _d === void 0 ? void 0 : _d.noResultsFor) || SELECT_DEFAULT_TRANSLATIONS.NO_RESULTS_FOR}:
444
468
  <em class=${SELECT_CSS_CLASSES.selectSearchedPhrase}>"${this._searchValue}"</em>
445
469
  </p>
446
470
  </div>`
@@ -449,11 +473,11 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
449
473
  ? html `
450
474
  <section class=${SELECT_CSS_CLASSES.selectFooter}>
451
475
  <button class="${SELECT_CSS_CLASSES.selectClearButton}" @click=${this._clearOptions}>
452
- ${((_d = this.translations) === null || _d === void 0 ? void 0 : _d.reset) || SELECT_DEFAULT_TRANSLATIONS.RESET}
476
+ ${((_e = this.translations) === null || _e === void 0 ? void 0 : _e.reset) || SELECT_DEFAULT_TRANSLATIONS.RESET}
453
477
  </button>
454
478
  <h-select-close-btn class="${SELECT_CSS_CLASSES.selectCloseButton}" @close=${this._closeSelect}
455
479
  ><span slot=${SELECT_CLOSE_BUTTON_CONTENT_SLOT_NAME}
456
- >${((_e = this.translations) === null || _e === void 0 ? void 0 : _e.choose) || SELECT_DEFAULT_TRANSLATIONS.CHOOSE}</span
480
+ >${((_f = this.translations) === null || _f === void 0 ? void 0 : _f.choose) || SELECT_DEFAULT_TRANSLATIONS.CHOOSE}</span
457
481
  >
458
482
  </h-select-close-btn>
459
483
  </section>
@@ -527,6 +551,10 @@ __decorate([
527
551
  property({ type: String, attribute: 'assistive-title-id' }),
528
552
  __metadata("design:type", String)
529
553
  ], 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);
530
558
  __decorate([
531
559
  property({
532
560
  converter: {
@@ -548,15 +576,6 @@ __decorate([
548
576
  }),
549
577
  __metadata("design:type", Object)
550
578
  ], 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);
560
579
  __decorate([
561
580
  state(),
562
581
  __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;"}
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;"}
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 } = option;
5
+ const { selected, value, disabled, hidden, content, isPlaceholder } = option;
6
6
  const $option = document.createElement(SELECT_RELATED_COMPONENTS_NAMES.option);
7
7
  $option.setAttribute('value', String(value));
8
8
  const $optionContent = document.createElement(SELECT_RELATED_COMPONENTS_NAMES.optionContent);
@@ -14,14 +14,17 @@ class SelectControlUtils {
14
14
  $option.setAttribute('disabled', '');
15
15
  if (hidden)
16
16
  $option.setAttribute('hidden', '');
17
+ if (isPlaceholder)
18
+ $option.setAttribute('placeholder', 'true');
17
19
  return $option;
18
20
  }
19
21
  static syncHTMLOptionWithModel(option, $option) {
20
- const { selected, value, disabled, hidden } = option;
22
+ const { selected, value, disabled, hidden, isPlaceholder } = option;
21
23
  $option.selected = selected;
22
24
  $option.value = value;
23
25
  $option.disabled = disabled;
24
26
  $option.hidden = hidden;
27
+ $option.toggleAttribute('placeholder', isPlaceholder);
25
28
  }
26
29
  static removeHTMLOptions($options, optionsValuesThatExists) {
27
30
  return $options.reduce((acc, $option) => {
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;"}
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;"}
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-6",
5
+ "version": "1.18.7-7",
6
6
  "description": "phoenix design system",
7
7
  "author": "zefirek",
8
8
  "license": "MIT",