@shoper/phoenix_design_system 1.18.8-0 → 1.18.8-2

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