@shoper/phoenix_design_system 1.18.7-8 → 1.18.7-9

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