@shoper/phoenix_design_system 1.18.7-6 → 1.18.7-8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (20) hide show
  1. package/build/cjs/packages/phoenix/src/components/form/select/model/select_option.js +2 -1
  2. package/build/cjs/packages/phoenix/src/components/form/select/model/select_option.js.map +1 -1
  3. package/build/cjs/packages/phoenix/src/components/form/select/model/select_option_mapper.js +3 -2
  4. package/build/cjs/packages/phoenix/src/components/form/select/model/select_option_mapper.js.map +1 -1
  5. package/build/cjs/packages/phoenix/src/components/form/select/select.js +84 -57
  6. package/build/cjs/packages/phoenix/src/components/form/select/select.js.map +1 -1
  7. package/build/cjs/packages/phoenix/src/components/form/select/select_utils.js +5 -2
  8. package/build/cjs/packages/phoenix/src/components/form/select/select_utils.js.map +1 -1
  9. package/build/esm/packages/phoenix/src/components/form/select/model/select_option.d.ts +1 -0
  10. package/build/esm/packages/phoenix/src/components/form/select/model/select_option.js +2 -1
  11. package/build/esm/packages/phoenix/src/components/form/select/model/select_option.js.map +1 -1
  12. package/build/esm/packages/phoenix/src/components/form/select/model/select_option_mapper.js +3 -2
  13. package/build/esm/packages/phoenix/src/components/form/select/model/select_option_mapper.js.map +1 -1
  14. package/build/esm/packages/phoenix/src/components/form/select/model/select_option_types.d.ts +1 -0
  15. package/build/esm/packages/phoenix/src/components/form/select/select.d.ts +5 -5
  16. package/build/esm/packages/phoenix/src/components/form/select/select.js +84 -57
  17. package/build/esm/packages/phoenix/src/components/form/select/select.js.map +1 -1
  18. package/build/esm/packages/phoenix/src/components/form/select/select_utils.js +5 -2
  19. package/build/esm/packages/phoenix/src/components/form/select/select_utils.js.map +1 -1
  20. package/package.json +1 -1
package/build/cjs/packages/phoenix/src/components/form/select/model/select_option.js CHANGED
@@ -3,13 +3,14 @@
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
5
  class SelectOption {
6
- constructor({ selected = false, hidden = false, disabled = false, value, content, inactive = false }) {
6
+ constructor({ selected = false, hidden = false, disabled = false, value, content, inactive = false, isPlaceholder = false }) {
7
7
  this.value = value;
8
8
  this.selected = selected;
9
9
  this.hidden = hidden;
10
10
  this.disabled = disabled;
11
11
  this.content = content;
12
12
  this.inactive = inactive;
13
+ this.isPlaceholder = isPlaceholder;
13
14
  }
14
15
  static create(options) {
15
16
  return new SelectOption(options);
package/build/cjs/packages/phoenix/src/components/form/select/model/select_option.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
1
+ {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
package/build/cjs/packages/phoenix/src/components/form/select/model/select_option_mapper.js CHANGED
@@ -10,7 +10,7 @@ class SelectOptionMapper {
10
10
  const $optionContent = $option.querySelector(select_components_constatns.SELECT_RELATED_COMPONENTS_NAMES.optionContent);
11
11
  const optionContentText = ($optionContent === null || $optionContent === void 0 ? void 0 : $optionContent.textContent) || ($optionContent === null || $optionContent === void 0 ? void 0 : $optionContent.innerText);
12
12
  const value = $option.getAttribute('value');
13
- if (!value)
13
+ if (value === null || value === undefined)
14
14
  throw new Error('h-option must contain a unique value');
15
15
  if (!optionContentText)
16
16
  throw new Error('h-options must contains a h-option-content element inside');
@@ -20,7 +20,8 @@ class SelectOptionMapper {
20
20
  hidden: $option.hasAttribute('hidden'),
21
21
  inactive: $option.hasAttribute('inactive'),
22
22
  content: optionContentText,
23
- selected: $option.hasAttribute('selected')
23
+ selected: $option.hasAttribute('selected'),
24
+ isPlaceholder: $option.hasAttribute('placeholder')
24
25
  });
25
26
  }
26
27
  }
package/build/cjs/packages/phoenix/src/components/form/select/model/select_option_mapper.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
1
+ {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
package/build/cjs/packages/phoenix/src/components/form/select/select.js CHANGED
@@ -43,8 +43,8 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
43
43
  this.type = select_constants.SELECT_TYPES.select;
44
44
  this.noDeselect = false;
45
45
  this.assistiveTitleId = '';
46
+ this.isDevSelectPlaceholderFlagEnabled = false;
46
47
  this.translations = {};
47
- this.reactiveSelectedIndex = false;
48
48
  this._selectOptionsId = v4['default']();
49
49
  this._searchValue = '';
50
50
  this._$options = new Map();
@@ -58,7 +58,7 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
58
58
  const $options = this._getOptions();
59
59
  this._$options = $options.reduce((acc, $option) => {
60
60
  const value = $option.getAttribute('value');
61
- if (!value)
61
+ if (value === null || value === undefined)
62
62
  throw Error('Select option must hava a value');
63
63
  if (acc.has(value))
64
64
  throw Error('Select options must hava a unique values.');
@@ -115,12 +115,12 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
115
115
  if (!this.$searchLabel)
116
116
  return;
117
117
  (_a = this.$searchLabel.querySelector(`[id="value-label"]`)) === null || _a === void 0 ? void 0 : _a.remove();
118
- this.$searchLabel.innerHTML = `
119
- ${(_b = this.$searchLabel) === null || _b === void 0 ? void 0 : _b.innerHTML}
120
- <span id="value-label" class="sr-only">
118
+ const valueLabel = options.some((option) => !option.isPlaceholder)
119
+ ? `<span id="value-label" class="sr-only">
121
120
  ${options.reduce((totalSelectedContent, currentOption) => (totalSelectedContent += currentOption.content), '')}
122
- </span>
123
- `;
121
+ </span>`
122
+ : '';
123
+ this.$searchLabel.innerHTML = `${(_b = this.$searchLabel) === null || _b === void 0 ? void 0 : _b.innerHTML} ${valueLabel}`;
124
124
  };
125
125
  this._handleOptionClicked = ({ detail }) => {
126
126
  if (!(detail === null || detail === void 0 ? void 0 : detail.$option))
@@ -177,20 +177,18 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
177
177
  this.type = select_constants.SELECT_TYPES.multiple;
178
178
  }
179
179
  get selectedIndex() {
180
- if (this.reactiveSelectedIndex) {
181
- return this._reactiveSelectedIndexValue !== undefined ? this._reactiveSelectedIndexValue : this._getSelectedIndex();
182
- }
183
- return this._getSelectedIndex();
180
+ const selectedOptions = this._selectController.selectedOptions$.getValue();
181
+ if (!selectedOptions || selectedOptions.length === 0)
182
+ return -1;
183
+ const htmlOptions = Array.from(this._$options.values());
184
+ return this.multiple
185
+ ? select_utils.SelectControlUtils.getFirstIndexSelectedOption(htmlOptions)
186
+ : select_utils.SelectControlUtils.getLastIndexOfSelectedOption(htmlOptions);
184
187
  }
185
188
  set selectedIndex(index) {
186
- if (this.reactiveSelectedIndex) {
187
- const oldValue = this._reactiveSelectedIndexValue;
188
- this._reactiveSelectedIndexValue = index;
189
- this.requestUpdate('selectedIndex', oldValue);
190
- }
191
- else {
192
- this._applySelectedIndex(index);
193
- }
189
+ const option = Array.from(this._$options.values()).filter(($option) => !$option.hidden)[index];
190
+ option ? this._selectOption(option.value) : this._selectController.deselectAll();
191
+ Array.from(this._$options.values()).forEach(($option) => this.updateOptionAriaAttribute($option));
194
192
  }
195
193
  get selectedOptions() {
196
194
  var _a;
@@ -206,20 +204,6 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
206
204
  get options() {
207
205
  return Array.from(this._$options.values());
208
206
  }
209
- _getSelectedIndex() {
210
- const selectedOptions = this._selectController.selectedOptions$.getValue();
211
- if (!selectedOptions || selectedOptions.length === 0)
212
- return -1;
213
- const htmlOptions = Array.from(this._$options.values());
214
- return this.multiple
215
- ? select_utils.SelectControlUtils.getFirstIndexSelectedOption(htmlOptions)
216
- : select_utils.SelectControlUtils.getLastIndexOfSelectedOption(htmlOptions);
217
- }
218
- _applySelectedIndex(index) {
219
- const option = Array.from(this._$options.values()).filter(($option) => !$option.hidden)[index];
220
- option ? this._selectOption(option.value) : this._selectController.deselectAll();
221
- Array.from(this._$options.values()).forEach(($option) => this.updateOptionAriaAttribute($option));
222
- }
223
207
  updated(changedProperties) {
224
208
  var _a, _b;
225
209
  super.updated(changedProperties);
@@ -234,6 +218,9 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
234
218
  }
235
219
  if (changedProperties.has('optionsList')) {
236
220
  this._updateOptions();
221
+ if (this.isDevSelectPlaceholderFlagEnabled) {
222
+ this._addPlaceholderOptionIfNeeded();
223
+ }
237
224
  }
238
225
  if (this._$optionsList.value) {
239
226
  (_a = this.listBoxController) === null || _a === void 0 ? void 0 : _a.hostDisconnected();
@@ -253,12 +240,6 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
253
240
  $list: this._$optionsList.value
254
241
  });
255
242
  }
256
- if (this.reactiveSelectedIndex && changedProperties.has('selectedIndex') && this.selectedIndex !== undefined) {
257
- const currentIndex = this._getSelectedIndex();
258
- if (this.selectedIndex !== currentIndex) {
259
- this._applySelectedIndex(this.selectedIndex);
260
- }
261
- }
262
243
  }
263
244
  _focusElementAfterSelectOpened() {
264
245
  var _a;
@@ -288,6 +269,9 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
288
269
  this._selectedOptionsAriaObserver = new observer.Observer((selectedOptions) => this._updateLabelAria(selectedOptions));
289
270
  this._selectController.selectedOptions$.subscribe(this._selectedOptionsAriaObserver);
290
271
  this._updateOptions();
272
+ if (this.isDevSelectPlaceholderFlagEnabled) {
273
+ this._addPlaceholderOptionIfNeeded();
274
+ }
291
275
  this._setupEvents();
292
276
  }
293
277
  attributeChangedCallback(name, _old, value) {
@@ -300,6 +284,56 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
300
284
  this.disabled ? this.classList.add(select_constants.SELECT_CSS_CLASSES.selectDisabled) : this.classList.remove(select_constants.SELECT_CSS_CLASSES.selectDisabled);
301
285
  }
302
286
  }
287
+ _addPlaceholderOptionIfNeeded() {
288
+ if (!this._canAddPlaceholder)
289
+ return;
290
+ const $placeholderOption = this._createPlaceholderOption();
291
+ this._injectOptionIntoDOM($placeholderOption);
292
+ this._updateOptions();
293
+ }
294
+ get _canAddPlaceholder() {
295
+ var _a;
296
+ if (this.multiple || this.required)
297
+ return false;
298
+ const hasSelection = (((_a = this._selectController.selectedOptions$.getValue()) === null || _a === void 0 ? void 0 : _a.length) || 0) > 0;
299
+ if (hasSelection)
300
+ return false;
301
+ const hasExistingPlaceholder = !!this.querySelector('h-option[placeholder]');
302
+ return !hasExistingPlaceholder;
303
+ }
304
+ _createPlaceholderOption() {
305
+ const $option = document.createElement('h-option');
306
+ $option.setAttribute('value', '');
307
+ $option.setAttribute('selected', 'true');
308
+ $option.setAttribute('placeholder', 'true');
309
+ $option.setAttribute('slot', select_constants.SELECT_SLOT_NAMES.content);
310
+ const $content = document.createElement(select_components_constatns.SELECT_RELATED_COMPONENTS_NAMES.optionContent);
311
+ if (typeof this.$placeholder === 'string') {
312
+ $content.textContent = this.$placeholder;
313
+ }
314
+ else {
315
+ $content.innerHTML = this.$placeholder.innerHTML;
316
+ }
317
+ if (typeof this.$placeholder === 'string') {
318
+ $content.textContent = this.$placeholder;
319
+ }
320
+ else if (this.$placeholder instanceof Element) {
321
+ Array.from(this.$placeholder.childNodes).forEach(node => {
322
+ $content.appendChild(node.cloneNode(true));
323
+ });
324
+ }
325
+ $option.appendChild($content);
326
+ return $option;
327
+ }
328
+ _injectOptionIntoDOM($option) {
329
+ const $firstOption = this.querySelector(select_components_constatns.SELECT_RELATED_COMPONENTS_NAMES.option);
330
+ if ($firstOption) {
331
+ this.insertBefore($option, $firstOption);
332
+ }
333
+ else {
334
+ this.appendChild($option);
335
+ }
336
+ }
303
337
  _setupEvents() {
304
338
  this.addEventListener(select_constants.SELECT_EVENT_NAMES.deselectOption, this._handleOptionDeselect);
305
339
  this.addEventListener(select_components_constatns.SELECT_CLOSE_BTN_EVENT_NAMES.close, this._closeSelect);
@@ -368,9 +402,6 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
368
402
  this._selectController.options$.unsubscribe(this._optionsObserver);
369
403
  this._$options.clear();
370
404
  }
371
- _getClonedPlaceholderElement() {
372
- return this.$placeholder instanceof HTMLElement ? this.$placeholder.cloneNode(true) : this.$placeholder;
373
- }
374
405
  _searchNoResult() {
375
406
  return Boolean(!this._selectController.visibleOptionsCount && Array.from(this._$options.keys()).length);
376
407
  }
@@ -380,7 +411,7 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
380
411
  return fragment;
381
412
  }
382
413
  render() {
383
- var _a, _b, _c, _d, _e;
414
+ var _a, _b, _c, _d, _e, _f;
384
415
  const options = (_a = this._selectController.options$.getValue()) !== null && _a !== void 0 ? _a : [];
385
416
  const isSearchEnabled = !this.searchDisabled && options.length > select_constants.MIN_NUMBER_OF_OPTIONS_TO_SHOW_SEARCH;
386
417
  return lit.html `
@@ -404,6 +435,7 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
404
435
  aria-activedescendant
405
436
  role="combobox"
406
437
  aria-controls="${this._selectOptionsId}"
438
+ aria-labelledby="${this.assistiveTitleId}"
407
439
  >
408
440
  ${this.getSlot(select_constants.SELECT_SLOT_NAMES.toggler)}
409
441
  </h-dropdown-toggler>
@@ -416,14 +448,14 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
416
448
  >
417
449
  <h-select-close-btn class="${select_constants.SELECT_CSS_CLASSES.selectCloseMobileButton}" @close=${this._closeSelect}></h-select-close-btn>
418
450
 
419
- <div class=${select_constants.SELECT_CSS_CLASSES.selectLabel}>${lit.html `${this._getClonedPlaceholderElement()}`}</div>
451
+ <div class=${select_constants.SELECT_CSS_CLASSES.selectLabel}>${(_b = this.$searchLabel) === null || _b === void 0 ? void 0 : _b.cloneNode(true)}</div>
420
452
 
421
453
  ${isSearchEnabled
422
454
  ? lit.html ` <h-select-search
423
455
  class=${select_constants.SELECT_CSS_CLASSES.selectSearch}
424
456
  ${ref_js.ref(this.$search)}
425
457
  .value=${this._searchValue}
426
- placeholder=${((_b = this.translations) === null || _b === void 0 ? void 0 : _b.search) || select_constants.SELECT_DEFAULT_TRANSLATIONS.SEARCH}
458
+ placeholder=${((_c = this.translations) === null || _c === void 0 ? void 0 : _c.search) || select_constants.SELECT_DEFAULT_TRANSLATIONS.SEARCH}
427
459
  @search=${this._handleSearch}
428
460
  ></h-select-search>`
429
461
  : lit.nothing}
@@ -444,7 +476,7 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
444
476
  ${this._searchNoResult()
445
477
  ? lit.html ` <div>
446
478
  <p class=${select_constants.SELECT_CSS_CLASSES.selectNoResult}>
447
- ${((_c = this.translations) === null || _c === void 0 ? void 0 : _c.noResultsFor) || select_constants.SELECT_DEFAULT_TRANSLATIONS.NO_RESULTS_FOR}:
479
+ ${((_d = this.translations) === null || _d === void 0 ? void 0 : _d.noResultsFor) || select_constants.SELECT_DEFAULT_TRANSLATIONS.NO_RESULTS_FOR}:
448
480
  <em class=${select_constants.SELECT_CSS_CLASSES.selectSearchedPhrase}>"${this._searchValue}"</em>
449
481
  </p>
450
482
  </div>`
@@ -453,11 +485,11 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
453
485
  ? lit.html `
454
486
  <section class=${select_constants.SELECT_CSS_CLASSES.selectFooter}>
455
487
  <button class="${select_constants.SELECT_CSS_CLASSES.selectClearButton}" @click=${this._clearOptions}>
456
- ${((_d = this.translations) === null || _d === void 0 ? void 0 : _d.reset) || select_constants.SELECT_DEFAULT_TRANSLATIONS.RESET}
488
+ ${((_e = this.translations) === null || _e === void 0 ? void 0 : _e.reset) || select_constants.SELECT_DEFAULT_TRANSLATIONS.RESET}
457
489
  </button>
458
490
  <h-select-close-btn class="${select_constants.SELECT_CSS_CLASSES.selectCloseButton}" @close=${this._closeSelect}
459
491
  ><span slot=${select_components_constatns.SELECT_CLOSE_BUTTON_CONTENT_SLOT_NAME}
460
- >${((_e = this.translations) === null || _e === void 0 ? void 0 : _e.choose) || select_constants.SELECT_DEFAULT_TRANSLATIONS.CHOOSE}</span
492
+ >${((_f = this.translations) === null || _f === void 0 ? void 0 : _f.choose) || select_constants.SELECT_DEFAULT_TRANSLATIONS.CHOOSE}</span
461
493
  >
462
494
  </h-select-close-btn>
463
495
  </section>
@@ -531,6 +563,10 @@ tslib_es6.__decorate([
531
563
  decorators_js.property({ type: String, attribute: 'assistive-title-id' }),
532
564
  tslib_es6.__metadata("design:type", String)
533
565
  ], exports.HSelect.prototype, "assistiveTitleId", void 0);
566
+ tslib_es6.__decorate([
567
+ decorators_js.property({ type: Boolean, attribute: 'is-dev-select-placeholder-flag-enabled' }),
568
+ tslib_es6.__metadata("design:type", Boolean)
569
+ ], exports.HSelect.prototype, "isDevSelectPlaceholderFlagEnabled", void 0);
534
570
  tslib_es6.__decorate([
535
571
  decorators_js.property({
536
572
  converter: {
@@ -552,15 +588,6 @@ tslib_es6.__decorate([
552
588
  }),
553
589
  tslib_es6.__metadata("design:type", Object)
554
590
  ], exports.HSelect.prototype, "translations", void 0);
555
- tslib_es6.__decorate([
556
- decorators_js.property({ type: Boolean, attribute: 'reactive-selected-index' }),
557
- tslib_es6.__metadata("design:type", Boolean)
558
- ], exports.HSelect.prototype, "reactiveSelectedIndex", void 0);
559
- tslib_es6.__decorate([
560
- decorators_js.property({ type: Number, attribute: false }),
561
- tslib_es6.__metadata("design:type", Number),
562
- tslib_es6.__metadata("design:paramtypes", [Number])
563
- ], exports.HSelect.prototype, "selectedIndex", null);
564
591
  tslib_es6.__decorate([
565
592
  decorators.state(),
566
593
  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;"}
package/build/cjs/packages/phoenix/src/components/form/select/select_utils.js CHANGED
@@ -6,7 +6,7 @@ var select_components_constatns = require('./components/select_components_consta
6
6
 
7
7
  class SelectControlUtils {
8
8
  static createHTMLOption(option) {
9
- const { selected, value, disabled, hidden, content } = option;
9
+ const { selected, value, disabled, hidden, content, isPlaceholder } = option;
10
10
  const $option = document.createElement(select_components_constatns.SELECT_RELATED_COMPONENTS_NAMES.option);
11
11
  $option.setAttribute('value', String(value));
12
12
  const $optionContent = document.createElement(select_components_constatns.SELECT_RELATED_COMPONENTS_NAMES.optionContent);
@@ -18,14 +18,17 @@ class SelectControlUtils {
18
18
  $option.setAttribute('disabled', '');
19
19
  if (hidden)
20
20
  $option.setAttribute('hidden', '');
21
+ if (isPlaceholder)
22
+ $option.setAttribute('placeholder', 'true');
21
23
  return $option;
22
24
  }
23
25
  static syncHTMLOptionWithModel(option, $option) {
24
- const { selected, value, disabled, hidden } = option;
26
+ const { selected, value, disabled, hidden, isPlaceholder } = option;
25
27
  $option.selected = selected;
26
28
  $option.value = value;
27
29
  $option.disabled = disabled;
28
30
  $option.hidden = hidden;
31
+ $option.toggleAttribute('placeholder', isPlaceholder);
29
32
  }
30
33
  static removeHTMLOptions($options, optionsValuesThatExists) {
31
34
  return $options.reduce((acc, $option) => {
package/build/cjs/packages/phoenix/src/components/form/select/select_utils.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
1
+ {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
package/build/esm/packages/phoenix/src/components/form/select/model/select_option.d.ts CHANGED
@@ -6,6 +6,7 @@ export declare class SelectOption {
6
6
  inactive: boolean;
7
7
  hidden: boolean;
8
8
  content: string;
9
+ isPlaceholder: boolean;
9
10
  private constructor();
10
11
  static create(options: TSelectOptionConstructorOptions): SelectOption;
11
12
  }
package/build/esm/packages/phoenix/src/components/form/select/model/select_option.js CHANGED
@@ -1,11 +1,12 @@
1
1
  class SelectOption {
2
- constructor({ selected = false, hidden = false, disabled = false, value, content, inactive = false }) {
2
+ constructor({ selected = false, hidden = false, disabled = false, value, content, inactive = false, isPlaceholder = false }) {
3
3
  this.value = value;
4
4
  this.selected = selected;
5
5
  this.hidden = hidden;
6
6
  this.disabled = disabled;
7
7
  this.content = content;
8
8
  this.inactive = inactive;
9
+ this.isPlaceholder = isPlaceholder;
9
10
  }
10
11
  static create(options) {
11
12
  return new SelectOption(options);
package/build/esm/packages/phoenix/src/components/form/select/model/select_option.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
1
+ {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
package/build/esm/packages/phoenix/src/components/form/select/model/select_option_mapper.js CHANGED
@@ -6,7 +6,7 @@ class SelectOptionMapper {
6
6
  const $optionContent = $option.querySelector(SELECT_RELATED_COMPONENTS_NAMES.optionContent);
7
7
  const optionContentText = ($optionContent === null || $optionContent === void 0 ? void 0 : $optionContent.textContent) || ($optionContent === null || $optionContent === void 0 ? void 0 : $optionContent.innerText);
8
8
  const value = $option.getAttribute('value');
9
- if (!value)
9
+ if (value === null || value === undefined)
10
10
  throw new Error('h-option must contain a unique value');
11
11
  if (!optionContentText)
12
12
  throw new Error('h-options must contains a h-option-content element inside');
@@ -16,7 +16,8 @@ class SelectOptionMapper {
16
16
  hidden: $option.hasAttribute('hidden'),
17
17
  inactive: $option.hasAttribute('inactive'),
18
18
  content: optionContentText,
19
- selected: $option.hasAttribute('selected')
19
+ selected: $option.hasAttribute('selected'),
20
+ isPlaceholder: $option.hasAttribute('placeholder')
20
21
  });
21
22
  }
22
23
  }
package/build/esm/packages/phoenix/src/components/form/select/model/select_option_mapper.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
1
+ {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
package/build/esm/packages/phoenix/src/components/form/select/model/select_option_types.d.ts CHANGED
@@ -5,5 +5,6 @@ export declare type TSelectOption = {
5
5
  disabled?: boolean;
6
6
  hidden?: boolean;
7
7
  inactive?: boolean;
8
+ isPlaceholder?: boolean;
8
9
  };
9
10
  export declare type TSelectOptionConstructorOptions = TSelectOption;
package/build/esm/packages/phoenix/src/components/form/select/select.d.ts CHANGED
@@ -23,9 +23,8 @@ export declare class HSelect extends PhoenixLightLitElement {
23
23
  optionsList?: TSelectOption[];
24
24
  noDeselect: boolean;
25
25
  assistiveTitleId: string;
26
+ isDevSelectPlaceholderFlagEnabled: boolean;
26
27
  translations: Record<string, string>;
27
- reactiveSelectedIndex: boolean;
28
- private _reactiveSelectedIndexValue?;
29
28
  private _selectOptionsId;
30
29
  get selectedIndex(): number;
31
30
  set selectedIndex(index: number);
@@ -49,14 +48,16 @@ export declare class HSelect extends PhoenixLightLitElement {
49
48
  private $placeholder;
50
49
  private $searchLabel;
51
50
  constructor();
52
- private _getSelectedIndex;
53
- private _applySelectedIndex;
54
51
  updated(changedProperties: PropertyValues): void;
55
52
  private _focusElementAfterSelectOpened;
56
53
  connectedCallback(): void;
57
54
  attributeChangedCallback(name: string, _old: string | null, value: string | null): void;
58
55
  private _updateOptions;
59
56
  private _getOptions;
57
+ private _addPlaceholderOptionIfNeeded;
58
+ private get _canAddPlaceholder();
59
+ private _createPlaceholderOption;
60
+ private _injectOptionIntoDOM;
60
61
  private _setupEvents;
61
62
  private _handleOptionDeselect;
62
63
  private _updateOptionsView;
@@ -80,7 +81,6 @@ export declare class HSelect extends PhoenixLightLitElement {
80
81
  getOption(value: string): SelectOption | undefined;
81
82
  select(option: SelectOption): void;
82
83
  disconnectedCallback(): void;
83
- private _getClonedPlaceholderElement;
84
84
  private _searchNoResult;
85
85
  private _renderOption;
86
86
  protected render(): TemplateResult;
package/build/esm/packages/phoenix/src/components/form/select/select.js CHANGED
@@ -39,8 +39,8 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
39
39
  this.type = SELECT_TYPES.select;
40
40
  this.noDeselect = false;
41
41
  this.assistiveTitleId = '';
42
+ this.isDevSelectPlaceholderFlagEnabled = false;
42
43
  this.translations = {};
43
- this.reactiveSelectedIndex = false;
44
44
  this._selectOptionsId = v4();
45
45
  this._searchValue = '';
46
46
  this._$options = new Map();
@@ -54,7 +54,7 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
54
54
  const $options = this._getOptions();
55
55
  this._$options = $options.reduce((acc, $option) => {
56
56
  const value = $option.getAttribute('value');
57
- if (!value)
57
+ if (value === null || value === undefined)
58
58
  throw Error('Select option must hava a value');
59
59
  if (acc.has(value))
60
60
  throw Error('Select options must hava a unique values.');
@@ -111,12 +111,12 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
111
111
  if (!this.$searchLabel)
112
112
  return;
113
113
  (_a = this.$searchLabel.querySelector(`[id="value-label"]`)) === null || _a === void 0 ? void 0 : _a.remove();
114
- this.$searchLabel.innerHTML = `
115
- ${(_b = this.$searchLabel) === null || _b === void 0 ? void 0 : _b.innerHTML}
116
- <span id="value-label" class="sr-only">
114
+ const valueLabel = options.some((option) => !option.isPlaceholder)
115
+ ? `<span id="value-label" class="sr-only">
117
116
  ${options.reduce((totalSelectedContent, currentOption) => (totalSelectedContent += currentOption.content), '')}
118
- </span>
119
- `;
117
+ </span>`
118
+ : '';
119
+ this.$searchLabel.innerHTML = `${(_b = this.$searchLabel) === null || _b === void 0 ? void 0 : _b.innerHTML} ${valueLabel}`;
120
120
  };
121
121
  this._handleOptionClicked = ({ detail }) => {
122
122
  if (!(detail === null || detail === void 0 ? void 0 : detail.$option))
@@ -173,20 +173,18 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
173
173
  this.type = SELECT_TYPES.multiple;
174
174
  }
175
175
  get selectedIndex() {
176
- if (this.reactiveSelectedIndex) {
177
- return this._reactiveSelectedIndexValue !== undefined ? this._reactiveSelectedIndexValue : this._getSelectedIndex();
178
- }
179
- return this._getSelectedIndex();
176
+ const selectedOptions = this._selectController.selectedOptions$.getValue();
177
+ if (!selectedOptions || selectedOptions.length === 0)
178
+ return -1;
179
+ const htmlOptions = Array.from(this._$options.values());
180
+ return this.multiple
181
+ ? SelectControlUtils.getFirstIndexSelectedOption(htmlOptions)
182
+ : SelectControlUtils.getLastIndexOfSelectedOption(htmlOptions);
180
183
  }
181
184
  set selectedIndex(index) {
182
- if (this.reactiveSelectedIndex) {
183
- const oldValue = this._reactiveSelectedIndexValue;
184
- this._reactiveSelectedIndexValue = index;
185
- this.requestUpdate('selectedIndex', oldValue);
186
- }
187
- else {
188
- this._applySelectedIndex(index);
189
- }
185
+ const option = Array.from(this._$options.values()).filter(($option) => !$option.hidden)[index];
186
+ option ? this._selectOption(option.value) : this._selectController.deselectAll();
187
+ Array.from(this._$options.values()).forEach(($option) => this.updateOptionAriaAttribute($option));
190
188
  }
191
189
  get selectedOptions() {
192
190
  var _a;
@@ -202,20 +200,6 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
202
200
  get options() {
203
201
  return Array.from(this._$options.values());
204
202
  }
205
- _getSelectedIndex() {
206
- const selectedOptions = this._selectController.selectedOptions$.getValue();
207
- if (!selectedOptions || selectedOptions.length === 0)
208
- return -1;
209
- const htmlOptions = Array.from(this._$options.values());
210
- return this.multiple
211
- ? SelectControlUtils.getFirstIndexSelectedOption(htmlOptions)
212
- : SelectControlUtils.getLastIndexOfSelectedOption(htmlOptions);
213
- }
214
- _applySelectedIndex(index) {
215
- const option = Array.from(this._$options.values()).filter(($option) => !$option.hidden)[index];
216
- option ? this._selectOption(option.value) : this._selectController.deselectAll();
217
- Array.from(this._$options.values()).forEach(($option) => this.updateOptionAriaAttribute($option));
218
- }
219
203
  updated(changedProperties) {
220
204
  var _a, _b;
221
205
  super.updated(changedProperties);
@@ -230,6 +214,9 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
230
214
  }
231
215
  if (changedProperties.has('optionsList')) {
232
216
  this._updateOptions();
217
+ if (this.isDevSelectPlaceholderFlagEnabled) {
218
+ this._addPlaceholderOptionIfNeeded();
219
+ }
233
220
  }
234
221
  if (this._$optionsList.value) {
235
222
  (_a = this.listBoxController) === null || _a === void 0 ? void 0 : _a.hostDisconnected();
@@ -249,12 +236,6 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
249
236
  $list: this._$optionsList.value
250
237
  });
251
238
  }
252
- if (this.reactiveSelectedIndex && changedProperties.has('selectedIndex') && this.selectedIndex !== undefined) {
253
- const currentIndex = this._getSelectedIndex();
254
- if (this.selectedIndex !== currentIndex) {
255
- this._applySelectedIndex(this.selectedIndex);
256
- }
257
- }
258
239
  }
259
240
  _focusElementAfterSelectOpened() {
260
241
  var _a;
@@ -284,6 +265,9 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
284
265
  this._selectedOptionsAriaObserver = new Observer((selectedOptions) => this._updateLabelAria(selectedOptions));
285
266
  this._selectController.selectedOptions$.subscribe(this._selectedOptionsAriaObserver);
286
267
  this._updateOptions();
268
+ if (this.isDevSelectPlaceholderFlagEnabled) {
269
+ this._addPlaceholderOptionIfNeeded();
270
+ }
287
271
  this._setupEvents();
288
272
  }
289
273
  attributeChangedCallback(name, _old, value) {
@@ -296,6 +280,56 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
296
280
  this.disabled ? this.classList.add(SELECT_CSS_CLASSES.selectDisabled) : this.classList.remove(SELECT_CSS_CLASSES.selectDisabled);
297
281
  }
298
282
  }
283
+ _addPlaceholderOptionIfNeeded() {
284
+ if (!this._canAddPlaceholder)
285
+ return;
286
+ const $placeholderOption = this._createPlaceholderOption();
287
+ this._injectOptionIntoDOM($placeholderOption);
288
+ this._updateOptions();
289
+ }
290
+ get _canAddPlaceholder() {
291
+ var _a;
292
+ if (this.multiple || this.required)
293
+ return false;
294
+ const hasSelection = (((_a = this._selectController.selectedOptions$.getValue()) === null || _a === void 0 ? void 0 : _a.length) || 0) > 0;
295
+ if (hasSelection)
296
+ return false;
297
+ const hasExistingPlaceholder = !!this.querySelector('h-option[placeholder]');
298
+ return !hasExistingPlaceholder;
299
+ }
300
+ _createPlaceholderOption() {
301
+ const $option = document.createElement('h-option');
302
+ $option.setAttribute('value', '');
303
+ $option.setAttribute('selected', 'true');
304
+ $option.setAttribute('placeholder', 'true');
305
+ $option.setAttribute('slot', SELECT_SLOT_NAMES.content);
306
+ const $content = document.createElement(SELECT_RELATED_COMPONENTS_NAMES.optionContent);
307
+ if (typeof this.$placeholder === 'string') {
308
+ $content.textContent = this.$placeholder;
309
+ }
310
+ else {
311
+ $content.innerHTML = this.$placeholder.innerHTML;
312
+ }
313
+ if (typeof this.$placeholder === 'string') {
314
+ $content.textContent = this.$placeholder;
315
+ }
316
+ else if (this.$placeholder instanceof Element) {
317
+ Array.from(this.$placeholder.childNodes).forEach(node => {
318
+ $content.appendChild(node.cloneNode(true));
319
+ });
320
+ }
321
+ $option.appendChild($content);
322
+ return $option;
323
+ }
324
+ _injectOptionIntoDOM($option) {
325
+ const $firstOption = this.querySelector(SELECT_RELATED_COMPONENTS_NAMES.option);
326
+ if ($firstOption) {
327
+ this.insertBefore($option, $firstOption);
328
+ }
329
+ else {
330
+ this.appendChild($option);
331
+ }
332
+ }
299
333
  _setupEvents() {
300
334
  this.addEventListener(SELECT_EVENT_NAMES.deselectOption, this._handleOptionDeselect);
301
335
  this.addEventListener(SELECT_CLOSE_BTN_EVENT_NAMES.close, this._closeSelect);
@@ -364,9 +398,6 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
364
398
  this._selectController.options$.unsubscribe(this._optionsObserver);
365
399
  this._$options.clear();
366
400
  }
367
- _getClonedPlaceholderElement() {
368
- return this.$placeholder instanceof HTMLElement ? this.$placeholder.cloneNode(true) : this.$placeholder;
369
- }
370
401
  _searchNoResult() {
371
402
  return Boolean(!this._selectController.visibleOptionsCount && Array.from(this._$options.keys()).length);
372
403
  }
@@ -376,7 +407,7 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
376
407
  return fragment;
377
408
  }
378
409
  render() {
379
- var _a, _b, _c, _d, _e;
410
+ var _a, _b, _c, _d, _e, _f;
380
411
  const options = (_a = this._selectController.options$.getValue()) !== null && _a !== void 0 ? _a : [];
381
412
  const isSearchEnabled = !this.searchDisabled && options.length > MIN_NUMBER_OF_OPTIONS_TO_SHOW_SEARCH;
382
413
  return html `
@@ -400,6 +431,7 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
400
431
  aria-activedescendant
401
432
  role="combobox"
402
433
  aria-controls="${this._selectOptionsId}"
434
+ aria-labelledby="${this.assistiveTitleId}"
403
435
  >
404
436
  ${this.getSlot(SELECT_SLOT_NAMES.toggler)}
405
437
  </h-dropdown-toggler>
@@ -412,14 +444,14 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
412
444
  >
413
445
  <h-select-close-btn class="${SELECT_CSS_CLASSES.selectCloseMobileButton}" @close=${this._closeSelect}></h-select-close-btn>
414
446
 
415
- <div class=${SELECT_CSS_CLASSES.selectLabel}>${html `${this._getClonedPlaceholderElement()}`}</div>
447
+ <div class=${SELECT_CSS_CLASSES.selectLabel}>${(_b = this.$searchLabel) === null || _b === void 0 ? void 0 : _b.cloneNode(true)}</div>
416
448
 
417
449
  ${isSearchEnabled
418
450
  ? html ` <h-select-search
419
451
  class=${SELECT_CSS_CLASSES.selectSearch}
420
452
  ${ref(this.$search)}
421
453
  .value=${this._searchValue}
422
- placeholder=${((_b = this.translations) === null || _b === void 0 ? void 0 : _b.search) || SELECT_DEFAULT_TRANSLATIONS.SEARCH}
454
+ placeholder=${((_c = this.translations) === null || _c === void 0 ? void 0 : _c.search) || SELECT_DEFAULT_TRANSLATIONS.SEARCH}
423
455
  @search=${this._handleSearch}
424
456
  ></h-select-search>`
425
457
  : nothing}
@@ -440,7 +472,7 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
440
472
  ${this._searchNoResult()
441
473
  ? html ` <div>
442
474
  <p class=${SELECT_CSS_CLASSES.selectNoResult}>
443
- ${((_c = this.translations) === null || _c === void 0 ? void 0 : _c.noResultsFor) || SELECT_DEFAULT_TRANSLATIONS.NO_RESULTS_FOR}:
475
+ ${((_d = this.translations) === null || _d === void 0 ? void 0 : _d.noResultsFor) || SELECT_DEFAULT_TRANSLATIONS.NO_RESULTS_FOR}:
444
476
  <em class=${SELECT_CSS_CLASSES.selectSearchedPhrase}>"${this._searchValue}"</em>
445
477
  </p>
446
478
  </div>`
@@ -449,11 +481,11 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
449
481
  ? html `
450
482
  <section class=${SELECT_CSS_CLASSES.selectFooter}>
451
483
  <button class="${SELECT_CSS_CLASSES.selectClearButton}" @click=${this._clearOptions}>
452
- ${((_d = this.translations) === null || _d === void 0 ? void 0 : _d.reset) || SELECT_DEFAULT_TRANSLATIONS.RESET}
484
+ ${((_e = this.translations) === null || _e === void 0 ? void 0 : _e.reset) || SELECT_DEFAULT_TRANSLATIONS.RESET}
453
485
  </button>
454
486
  <h-select-close-btn class="${SELECT_CSS_CLASSES.selectCloseButton}" @close=${this._closeSelect}
455
487
  ><span slot=${SELECT_CLOSE_BUTTON_CONTENT_SLOT_NAME}
456
- >${((_e = this.translations) === null || _e === void 0 ? void 0 : _e.choose) || SELECT_DEFAULT_TRANSLATIONS.CHOOSE}</span
488
+ >${((_f = this.translations) === null || _f === void 0 ? void 0 : _f.choose) || SELECT_DEFAULT_TRANSLATIONS.CHOOSE}</span
457
489
  >
458
490
  </h-select-close-btn>
459
491
  </section>
@@ -527,6 +559,10 @@ __decorate([
527
559
  property({ type: String, attribute: 'assistive-title-id' }),
528
560
  __metadata("design:type", String)
529
561
  ], HSelect.prototype, "assistiveTitleId", void 0);
562
+ __decorate([
563
+ property({ type: Boolean, attribute: 'is-dev-select-placeholder-flag-enabled' }),
564
+ __metadata("design:type", Boolean)
565
+ ], HSelect.prototype, "isDevSelectPlaceholderFlagEnabled", void 0);
530
566
  __decorate([
531
567
  property({
532
568
  converter: {
@@ -548,15 +584,6 @@ __decorate([
548
584
  }),
549
585
  __metadata("design:type", Object)
550
586
  ], HSelect.prototype, "translations", void 0);
551
- __decorate([
552
- property({ type: Boolean, attribute: 'reactive-selected-index' }),
553
- __metadata("design:type", Boolean)
554
- ], HSelect.prototype, "reactiveSelectedIndex", void 0);
555
- __decorate([
556
- property({ type: Number, attribute: false }),
557
- __metadata("design:type", Number),
558
- __metadata("design:paramtypes", [Number])
559
- ], HSelect.prototype, "selectedIndex", null);
560
587
  __decorate([
561
588
  state(),
562
589
  __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;"}
package/build/esm/packages/phoenix/src/components/form/select/select_utils.js CHANGED
@@ -2,7 +2,7 @@ import { SELECT_RELATED_COMPONENTS_NAMES } from './components/select_components_
2
2
 
3
3
  class SelectControlUtils {
4
4
  static createHTMLOption(option) {
5
- const { selected, value, disabled, hidden, content } = option;
5
+ const { selected, value, disabled, hidden, content, isPlaceholder } = option;
6
6
  const $option = document.createElement(SELECT_RELATED_COMPONENTS_NAMES.option);
7
7
  $option.setAttribute('value', String(value));
8
8
  const $optionContent = document.createElement(SELECT_RELATED_COMPONENTS_NAMES.optionContent);
@@ -14,14 +14,17 @@ class SelectControlUtils {
14
14
  $option.setAttribute('disabled', '');
15
15
  if (hidden)
16
16
  $option.setAttribute('hidden', '');
17
+ if (isPlaceholder)
18
+ $option.setAttribute('placeholder', 'true');
17
19
  return $option;
18
20
  }
19
21
  static syncHTMLOptionWithModel(option, $option) {
20
- const { selected, value, disabled, hidden } = option;
22
+ const { selected, value, disabled, hidden, isPlaceholder } = option;
21
23
  $option.selected = selected;
22
24
  $option.value = value;
23
25
  $option.disabled = disabled;
24
26
  $option.hidden = hidden;
27
+ $option.toggleAttribute('placeholder', isPlaceholder);
25
28
  }
26
29
  static removeHTMLOptions($options, optionsValuesThatExists) {
27
30
  return $options.reduce((acc, $option) => {
package/build/esm/packages/phoenix/src/components/form/select/select_utils.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
1
+ {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
package/package.json CHANGED
@@ -2,7 +2,7 @@
2
2
  "name": "@shoper/phoenix_design_system",
3
3
  "packageManager": "yarn@3.2.0",
4
4
  "sideEffects": false,
5
- "version": "1.18.7-6",
5
+ "version": "1.18.7-8",
6
6
  "description": "phoenix design system",
7
7
  "author": "zefirek",
8
8
  "license": "MIT",