@shoper/phoenix_design_system 1.18.7 → 1.18.8-1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (23) hide show
  1. package/build/cjs/packages/phoenix/src/components/accordion/accordion_content.js +1 -1
  2. package/build/cjs/packages/phoenix/src/components/form/select/model/select_option.js +2 -1
  3. package/build/cjs/packages/phoenix/src/components/form/select/model/select_option.js.map +1 -1
  4. package/build/cjs/packages/phoenix/src/components/form/select/model/select_option_mapper.js +3 -2
  5. package/build/cjs/packages/phoenix/src/components/form/select/model/select_option_mapper.js.map +1 -1
  6. package/build/cjs/packages/phoenix/src/components/form/select/select.js +85 -13
  7. package/build/cjs/packages/phoenix/src/components/form/select/select.js.map +1 -1
  8. package/build/cjs/packages/phoenix/src/components/form/select/select_utils.js +22 -2
  9. package/build/cjs/packages/phoenix/src/components/form/select/select_utils.js.map +1 -1
  10. package/build/esm/packages/phoenix/src/components/accordion/accordion_content.js +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 -0
  18. package/build/esm/packages/phoenix/src/components/form/select/select.js +85 -13
  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/package.json +2 -2
package/build/cjs/packages/phoenix/src/components/accordion/accordion_content.js CHANGED
@@ -34,7 +34,7 @@ exports.HAccordionContent = class HAccordionContent extends phoenix_light_lit_el
34
34
  this._setStylingOptions = () => {
35
35
  requestAnimationFrame(() => {
36
36
  const previousDisplay = this.style.display;
37
- this.style.display = 'block';
37
+ this.style.setProperty('display', 'block', 'important');
38
38
  this.style.height = 'auto';
39
39
  requestAnimationFrame(() => {
40
40
  this._setOriginalHeightValue();
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,6 +43,7 @@ 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
48
  this._selectOptionsId = v4['default']();
48
49
  this._searchValue = '';
@@ -57,7 +58,7 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
57
58
  const $options = this._getOptions();
58
59
  this._$options = $options.reduce((acc, $option) => {
59
60
  const value = $option.getAttribute('value');
60
- if (!value)
61
+ if (value === null || value === undefined)
61
62
  throw Error('Select option must hava a value');
62
63
  if (acc.has(value))
63
64
  throw Error('Select options must hava a unique values.');
@@ -114,12 +115,24 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
114
115
  if (!this.$searchLabel)
115
116
  return;
116
117
  (_a = this.$searchLabel.querySelector(`[id="value-label"]`)) === null || _a === void 0 ? void 0 : _a.remove();
117
- this.$searchLabel.innerHTML = `
118
- ${(_b = this.$searchLabel) === null || _b === void 0 ? void 0 : _b.innerHTML}
119
- <span id="value-label" class="sr-only">
120
- ${options.reduce((totalSelectedContent, currentOption) => (totalSelectedContent += currentOption.content), '')}
121
- </span>
122
- `;
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
+ }
123
136
  };
124
137
  this._handleOptionClicked = ({ detail }) => {
125
138
  if (!(detail === null || detail === void 0 ? void 0 : detail.$option))
@@ -217,6 +230,9 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
217
230
  }
218
231
  if (changedProperties.has('optionsList')) {
219
232
  this._updateOptions();
233
+ if (this.isDevSelectPlaceholderFlagEnabled) {
234
+ this._addPlaceholderOptionIfNeeded();
235
+ }
220
236
  }
221
237
  if (this._$optionsList.value) {
222
238
  (_a = this.listBoxController) === null || _a === void 0 ? void 0 : _a.hostDisconnected();
@@ -265,6 +281,9 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
265
281
  this._selectedOptionsAriaObserver = new observer.Observer((selectedOptions) => this._updateLabelAria(selectedOptions));
266
282
  this._selectController.selectedOptions$.subscribe(this._selectedOptionsAriaObserver);
267
283
  this._updateOptions();
284
+ if (this.isDevSelectPlaceholderFlagEnabled) {
285
+ this._addPlaceholderOptionIfNeeded();
286
+ }
268
287
  this._setupEvents();
269
288
  }
270
289
  attributeChangedCallback(name, _old, value) {
@@ -277,6 +296,50 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
277
296
  this.disabled ? this.classList.add(select_constants.SELECT_CSS_CLASSES.selectDisabled) : this.classList.remove(select_constants.SELECT_CSS_CLASSES.selectDisabled);
278
297
  }
279
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
+ }
280
343
  _setupEvents() {
281
344
  this.addEventListener(select_constants.SELECT_EVENT_NAMES.deselectOption, this._handleOptionDeselect);
282
345
  this.addEventListener(select_components_constatns.SELECT_CLOSE_BTN_EVENT_NAMES.close, this._closeSelect);
@@ -357,7 +420,7 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
357
420
  return fragment;
358
421
  }
359
422
  render() {
360
- var _a, _b, _c, _d, _e;
423
+ var _a, _b, _c, _d, _e, _f;
361
424
  const options = (_a = this._selectController.options$.getValue()) !== null && _a !== void 0 ? _a : [];
362
425
  const isSearchEnabled = !this.searchDisabled && options.length > select_constants.MIN_NUMBER_OF_OPTIONS_TO_SHOW_SEARCH;
363
426
  return lit.html `
@@ -381,6 +444,7 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
381
444
  aria-activedescendant
382
445
  role="combobox"
383
446
  aria-controls="${this._selectOptionsId}"
447
+ aria-labelledby="${this.assistiveTitleId}"
384
448
  >
385
449
  ${this.getSlot(select_constants.SELECT_SLOT_NAMES.toggler)}
386
450
  </h-dropdown-toggler>
@@ -393,14 +457,18 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
393
457
  >
394
458
  <h-select-close-btn class="${select_constants.SELECT_CSS_CLASSES.selectCloseMobileButton}" @close=${this._closeSelect}></h-select-close-btn>
395
459
 
396
- <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>
397
465
 
398
466
  ${isSearchEnabled
399
467
  ? lit.html ` <h-select-search
400
468
  class=${select_constants.SELECT_CSS_CLASSES.selectSearch}
401
469
  ${ref_js.ref(this.$search)}
402
470
  .value=${this._searchValue}
403
- 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}
404
472
  @search=${this._handleSearch}
405
473
  ></h-select-search>`
406
474
  : lit.nothing}
@@ -421,7 +489,7 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
421
489
  ${this._searchNoResult()
422
490
  ? lit.html ` <div>
423
491
  <p class=${select_constants.SELECT_CSS_CLASSES.selectNoResult}>
424
- ${((_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}:
425
493
  <em class=${select_constants.SELECT_CSS_CLASSES.selectSearchedPhrase}>"${this._searchValue}"</em>
426
494
  </p>
427
495
  </div>`
@@ -430,11 +498,11 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
430
498
  ? lit.html `
431
499
  <section class=${select_constants.SELECT_CSS_CLASSES.selectFooter}>
432
500
  <button class="${select_constants.SELECT_CSS_CLASSES.selectClearButton}" @click=${this._clearOptions}>
433
- ${((_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}
434
502
  </button>
435
503
  <h-select-close-btn class="${select_constants.SELECT_CSS_CLASSES.selectCloseButton}" @close=${this._closeSelect}
436
504
  ><span slot=${select_components_constatns.SELECT_CLOSE_BUTTON_CONTENT_SLOT_NAME}
437
- >${((_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
438
506
  >
439
507
  </h-select-close-btn>
440
508
  </section>
@@ -508,6 +576,10 @@ tslib_es6.__decorate([
508
576
  decorators_js.property({ type: String, attribute: 'assistive-title-id' }),
509
577
  tslib_es6.__metadata("design:type", String)
510
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);
511
583
  tslib_es6.__decorate([
512
584
  decorators_js.property({
513
585
  converter: {
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;"}
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/esm/packages/phoenix/src/components/accordion/accordion_content.js CHANGED
@@ -30,7 +30,7 @@ let HAccordionContent = class HAccordionContent extends PhoenixLightLitElement {
30
30
  this._setStylingOptions = () => {
31
31
  requestAnimationFrame(() => {
32
32
  const previousDisplay = this.style.display;
33
- this.style.display = 'block';
33
+ this.style.setProperty('display', 'block', 'important');
34
34
  this.style.height = 'auto';
35
35
  requestAnimationFrame(() => {
36
36
  this._setOriginalHeightValue();
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,6 +23,7 @@ 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
28
  private _selectOptionsId;
28
29
  get selectedIndex(): number;
@@ -53,6 +54,10 @@ export declare class HSelect extends PhoenixLightLitElement {
53
54
  attributeChangedCallback(name: string, _old: string | null, value: string | null): void;
54
55
  private _updateOptions;
55
56
  private _getOptions;
57
+ private _addPlaceholderOptionIfNeeded;
58
+ private get _canAddPlaceholder();
59
+ private _createPlaceholderOption;
60
+ private _injectOptionIntoDOM;
56
61
  private _setupEvents;
57
62
  private _handleOptionDeselect;
58
63
  private _updateOptionsView;
package/build/esm/packages/phoenix/src/components/form/select/select.js CHANGED
@@ -39,6 +39,7 @@ 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
44
  this._selectOptionsId = v4();
44
45
  this._searchValue = '';
@@ -53,7 +54,7 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
53
54
  const $options = this._getOptions();
54
55
  this._$options = $options.reduce((acc, $option) => {
55
56
  const value = $option.getAttribute('value');
56
- if (!value)
57
+ if (value === null || value === undefined)
57
58
  throw Error('Select option must hava a value');
58
59
  if (acc.has(value))
59
60
  throw Error('Select options must hava a unique values.');
@@ -110,12 +111,24 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
110
111
  if (!this.$searchLabel)
111
112
  return;
112
113
  (_a = this.$searchLabel.querySelector(`[id="value-label"]`)) === null || _a === void 0 ? void 0 : _a.remove();
113
- this.$searchLabel.innerHTML = `
114
- ${(_b = this.$searchLabel) === null || _b === void 0 ? void 0 : _b.innerHTML}
115
- <span id="value-label" class="sr-only">
116
- ${options.reduce((totalSelectedContent, currentOption) => (totalSelectedContent += currentOption.content), '')}
117
- </span>
118
- `;
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
+ }
119
132
  };
120
133
  this._handleOptionClicked = ({ detail }) => {
121
134
  if (!(detail === null || detail === void 0 ? void 0 : detail.$option))
@@ -213,6 +226,9 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
213
226
  }
214
227
  if (changedProperties.has('optionsList')) {
215
228
  this._updateOptions();
229
+ if (this.isDevSelectPlaceholderFlagEnabled) {
230
+ this._addPlaceholderOptionIfNeeded();
231
+ }
216
232
  }
217
233
  if (this._$optionsList.value) {
218
234
  (_a = this.listBoxController) === null || _a === void 0 ? void 0 : _a.hostDisconnected();
@@ -261,6 +277,9 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
261
277
  this._selectedOptionsAriaObserver = new Observer((selectedOptions) => this._updateLabelAria(selectedOptions));
262
278
  this._selectController.selectedOptions$.subscribe(this._selectedOptionsAriaObserver);
263
279
  this._updateOptions();
280
+ if (this.isDevSelectPlaceholderFlagEnabled) {
281
+ this._addPlaceholderOptionIfNeeded();
282
+ }
264
283
  this._setupEvents();
265
284
  }
266
285
  attributeChangedCallback(name, _old, value) {
@@ -273,6 +292,50 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
273
292
  this.disabled ? this.classList.add(SELECT_CSS_CLASSES.selectDisabled) : this.classList.remove(SELECT_CSS_CLASSES.selectDisabled);
274
293
  }
275
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
+ }
276
339
  _setupEvents() {
277
340
  this.addEventListener(SELECT_EVENT_NAMES.deselectOption, this._handleOptionDeselect);
278
341
  this.addEventListener(SELECT_CLOSE_BTN_EVENT_NAMES.close, this._closeSelect);
@@ -353,7 +416,7 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
353
416
  return fragment;
354
417
  }
355
418
  render() {
356
- var _a, _b, _c, _d, _e;
419
+ var _a, _b, _c, _d, _e, _f;
357
420
  const options = (_a = this._selectController.options$.getValue()) !== null && _a !== void 0 ? _a : [];
358
421
  const isSearchEnabled = !this.searchDisabled && options.length > MIN_NUMBER_OF_OPTIONS_TO_SHOW_SEARCH;
359
422
  return html `
@@ -377,6 +440,7 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
377
440
  aria-activedescendant
378
441
  role="combobox"
379
442
  aria-controls="${this._selectOptionsId}"
443
+ aria-labelledby="${this.assistiveTitleId}"
380
444
  >
381
445
  ${this.getSlot(SELECT_SLOT_NAMES.toggler)}
382
446
  </h-dropdown-toggler>
@@ -389,14 +453,18 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
389
453
  >
390
454
  <h-select-close-btn class="${SELECT_CSS_CLASSES.selectCloseMobileButton}" @close=${this._closeSelect}></h-select-close-btn>
391
455
 
392
- <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>
393
461
 
394
462
  ${isSearchEnabled
395
463
  ? html ` <h-select-search
396
464
  class=${SELECT_CSS_CLASSES.selectSearch}
397
465
  ${ref(this.$search)}
398
466
  .value=${this._searchValue}
399
- 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}
400
468
  @search=${this._handleSearch}
401
469
  ></h-select-search>`
402
470
  : nothing}
@@ -417,7 +485,7 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
417
485
  ${this._searchNoResult()
418
486
  ? html ` <div>
419
487
  <p class=${SELECT_CSS_CLASSES.selectNoResult}>
420
- ${((_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}:
421
489
  <em class=${SELECT_CSS_CLASSES.selectSearchedPhrase}>"${this._searchValue}"</em>
422
490
  </p>
423
491
  </div>`
@@ -426,11 +494,11 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
426
494
  ? html `
427
495
  <section class=${SELECT_CSS_CLASSES.selectFooter}>
428
496
  <button class="${SELECT_CSS_CLASSES.selectClearButton}" @click=${this._clearOptions}>
429
- ${((_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}
430
498
  </button>
431
499
  <h-select-close-btn class="${SELECT_CSS_CLASSES.selectCloseButton}" @close=${this._closeSelect}
432
500
  ><span slot=${SELECT_CLOSE_BUTTON_CONTENT_SLOT_NAME}
433
- >${((_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
434
502
  >
435
503
  </h-select-close-btn>
436
504
  </section>
@@ -504,6 +572,10 @@ __decorate([
504
572
  property({ type: String, attribute: 'assistive-title-id' }),
505
573
  __metadata("design:type", String)
506
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);
507
579
  __decorate([
508
580
  property({
509
581
  converter: {
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;"}
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/package.json CHANGED
@@ -2,7 +2,7 @@
2
2
  "name": "@shoper/phoenix_design_system",
3
3
  "packageManager": "yarn@3.2.0",
4
4
  "sideEffects": false,
5
- "version": "1.18.7",
5
+ "version": "1.18.8-1",
6
6
  "description": "phoenix design system",
7
7
  "author": "zefirek",
8
8
  "license": "MIT",
@@ -31,7 +31,7 @@
31
31
  "@splidejs/splide-extension-auto-scroll": "0.5.3"
32
32
  },
33
33
  "devDependencies": {
34
- "@dreamcommerce/utilities": "^1.23.1",
34
+ "@dreamcommerce/utilities": "^1.23.1-3",
35
35
  "@shoper/jest_config": "^0.0.0",
36
36
  "@shoper/tsconfig": "^0.0.0",
37
37
  "@splidejs/splide": "4.0.7",