@shoper/phoenix_design_system 1.18.15 → 1.18.16

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 (6) hide show
  1. package/build/cjs/packages/phoenix/src/components/form/select/select.js +74 -14
  2. package/build/cjs/packages/phoenix/src/components/form/select/select.js.map +1 -1
  3. package/build/esm/packages/phoenix/src/components/form/select/select.d.ts +4 -0
  4. package/build/esm/packages/phoenix/src/components/form/select/select.js +74 -14
  5. package/build/esm/packages/phoenix/src/components/form/select/select.js.map +1 -1
  6. package/package.json +1 -1
package/build/cjs/packages/phoenix/src/components/form/select/select.js CHANGED
@@ -44,6 +44,7 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
44
44
  this.noDeselect = false;
45
45
  this.assistiveTitleId = '';
46
46
  this.isDevSelectPlaceholderFlagEnabled = false;
47
+ this.isReactiveSelectionFlagEnabled = false;
47
48
  this.translations = {};
48
49
  this._selectOptionsId = v4['default']();
49
50
  this._searchValue = '';
@@ -59,9 +60,9 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
59
60
  this._$options = $options.reduce((acc, $option) => {
60
61
  const value = $option.getAttribute('value');
61
62
  if (value === null || value === undefined)
62
- throw Error('Select option must hava a value');
63
+ throw Error('Select option must have a value');
63
64
  if (acc.has(value))
64
- throw Error('Select options must hava a unique values.');
65
+ throw Error('Select options must have a unique values.');
65
66
  return acc.set(value, $option);
66
67
  }, new Map());
67
68
  const options = $options.map(select_option_mapper.SelectOptionMapper.toModel);
@@ -185,7 +186,7 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
185
186
  const $options = Array.from(this.querySelectorAll(select_components_constatns.SELECT_RELATED_COMPONENTS_NAMES.option));
186
187
  $options.forEach(($option) => $option.setAttribute('slot', select_constants.SELECT_SLOT_NAMES.content));
187
188
  const $placeholderEl = this.querySelector(`[slot="${select_components_constatns.SELECT_INPUT_PLACEHOLDER_SLOT_NAME}"]`);
188
- this.$placeholder = ($placeholderEl && ((_a = $placeholderEl.textContent) === null || _a === void 0 ? void 0 : _a.trim())) ? $placeholderEl : 'Select';
189
+ this.$placeholder = $placeholderEl && ((_a = $placeholderEl.textContent) === null || _a === void 0 ? void 0 : _a.trim()) ? $placeholderEl : 'Select';
189
190
  if (this.multiple)
190
191
  this.type = select_constants.SELECT_TYPES.multiple;
191
192
  }
@@ -287,6 +288,12 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
287
288
  }
288
289
  this._setupEvents();
289
290
  }
291
+ firstUpdated(changedProperties) {
292
+ super.firstUpdated(changedProperties);
293
+ if (this.isReactiveSelectionFlagEnabled) {
294
+ this._setupMutationObserver();
295
+ }
296
+ }
290
297
  attributeChangedCallback(name, _old, value) {
291
298
  super.attributeChangedCallback(name, _old, value);
292
299
  switch (name) {
@@ -305,19 +312,19 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
305
312
  this._updateOptions();
306
313
  }
307
314
  get _canAddPlaceholder() {
308
- var _a;
309
315
  if (this.multiple || this.required)
310
316
  return false;
311
- const hasSelection = (((_a = this._selectController.selectedOptions$.getValue()) === null || _a === void 0 ? void 0 : _a.length) || 0) > 0;
312
- if (hasSelection)
313
- return false;
314
317
  const hasExistingPlaceholder = !!this.querySelector('h-option[placeholder]');
315
318
  return !hasExistingPlaceholder;
316
319
  }
317
320
  _createPlaceholderOption() {
321
+ var _a;
318
322
  const $option = document.createElement('h-option');
319
323
  $option.setAttribute('value', '');
320
- $option.setAttribute('selected', 'true');
324
+ const hasSelection = (((_a = this._selectController.selectedOptions$.getValue()) === null || _a === void 0 ? void 0 : _a.length) || 0) > 0;
325
+ if (!hasSelection) {
326
+ $option.setAttribute('selected', 'true');
327
+ }
321
328
  $option.setAttribute('placeholder', 'true');
322
329
  $option.setAttribute('slot', select_constants.SELECT_SLOT_NAMES.content);
323
330
  const $content = document.createElement(select_components_constatns.SELECT_RELATED_COMPONENTS_NAMES.optionContent);
@@ -325,7 +332,7 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
325
332
  $content.textContent = this.$placeholder;
326
333
  }
327
334
  else if (this.$placeholder instanceof Node) {
328
- Array.from(this.$placeholder.childNodes).forEach(node => {
335
+ Array.from(this.$placeholder.childNodes).forEach((node) => {
329
336
  $content.appendChild(node.cloneNode(true));
330
337
  });
331
338
  }
@@ -334,8 +341,8 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
334
341
  }
335
342
  _injectOptionIntoDOM($option) {
336
343
  const $firstOption = this.querySelector(select_components_constatns.SELECT_RELATED_COMPONENTS_NAMES.option);
337
- if ($firstOption) {
338
- this.insertBefore($option, $firstOption);
344
+ if ($firstOption && $firstOption.parentNode) {
345
+ $firstOption.parentNode.insertBefore($option, $firstOption);
339
346
  }
340
347
  else {
341
348
  this.appendChild($option);
@@ -345,6 +352,53 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
345
352
  this.addEventListener(select_constants.SELECT_EVENT_NAMES.deselectOption, this._handleOptionDeselect);
346
353
  this.addEventListener(select_components_constatns.SELECT_CLOSE_BTN_EVENT_NAMES.close, this._closeSelect);
347
354
  }
355
+ _setupMutationObserver() {
356
+ this._optionsMutationObserver = new MutationObserver((mutations) => {
357
+ let shouldUpdate = false;
358
+ let newlySelectedValue = null;
359
+ for (const mutation of mutations) {
360
+ const target = mutation.target;
361
+ if (mutation.type === 'attributes' &&
362
+ mutation.attributeName === 'selected' &&
363
+ target.tagName &&
364
+ target.tagName.toLowerCase() === 'h-option') {
365
+ shouldUpdate = true;
366
+ if (target.hasAttribute('selected')) {
367
+ newlySelectedValue = target.getAttribute('value');
368
+ }
369
+ }
370
+ }
371
+ if (shouldUpdate) {
372
+ const options = Array.from(this._$options.values()).map(($el) => select_option_mapper.SelectOptionMapper.toModel($el));
373
+ if (!this.multiple && newlySelectedValue !== null) {
374
+ options.forEach((opt) => {
375
+ opt.selected = opt.value === newlySelectedValue;
376
+ });
377
+ }
378
+ this._selectController.options$.notify(options);
379
+ let selectedOptions = options.filter((opt) => opt.selected);
380
+ if (selectedOptions.length === 0) {
381
+ const placeholder = options.find((opt) => opt.isPlaceholder);
382
+ if (placeholder) {
383
+ placeholder.selected = true;
384
+ const $placeholderHtml = this._$options.get(placeholder.value);
385
+ if ($placeholderHtml) {
386
+ $placeholderHtml.setAttribute('selected', 'true');
387
+ }
388
+ selectedOptions = [placeholder];
389
+ }
390
+ }
391
+ this._selectController.selectedOptions$.notify(selectedOptions);
392
+ }
393
+ });
394
+ if (this._$optionsList.value) {
395
+ this._optionsMutationObserver.observe(this._$optionsList.value, {
396
+ attributes: true,
397
+ attributeFilter: ['selected'],
398
+ subtree: true
399
+ });
400
+ }
401
+ }
348
402
  _appendNewHTMLOption(option, position) {
349
403
  const $list = this._$optionsList.value;
350
404
  if (!$list)
@@ -405,9 +459,11 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
405
459
  this._selectController.select(option);
406
460
  }
407
461
  disconnectedCallback() {
462
+ var _a;
408
463
  super.disconnectedCallback();
409
464
  this._selectController.options$.unsubscribe(this._optionsObserver);
410
465
  this._$options.clear();
466
+ (_a = this._optionsMutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
411
467
  }
412
468
  _getClonedPlaceholderElement() {
413
469
  return this.$placeholder instanceof HTMLElement ? this.$placeholder.cloneNode(true) : this.$placeholder;
@@ -459,9 +515,9 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
459
515
  <h-select-close-btn class="${select_constants.SELECT_CSS_CLASSES.selectCloseMobileButton}" @close=${this._closeSelect}></h-select-close-btn>
460
516
 
461
517
  <div class=${select_constants.SELECT_CSS_CLASSES.selectLabel}>
462
- ${this.isDevSelectPlaceholderFlagEnabled ?
463
- (_b = this.$searchLabel) === null || _b === void 0 ? void 0 : _b.cloneNode(true) :
464
- lit.html `${this._getClonedPlaceholderElement()}`}
518
+ ${this.isDevSelectPlaceholderFlagEnabled
519
+ ? (_b = this.$searchLabel) === null || _b === void 0 ? void 0 : _b.cloneNode(true)
520
+ : lit.html `${this._getClonedPlaceholderElement()}`}
465
521
  </div>
466
522
 
467
523
  ${isSearchEnabled
@@ -581,6 +637,10 @@ tslib_es6.__decorate([
581
637
  decorators_js.property({ type: Boolean, attribute: 'is-dev-select-placeholder-flag-enabled' }),
582
638
  tslib_es6.__metadata("design:type", Boolean)
583
639
  ], exports.HSelect.prototype, "isDevSelectPlaceholderFlagEnabled", void 0);
640
+ tslib_es6.__decorate([
641
+ decorators_js.property({ type: Boolean, attribute: 'is-reactive-selection-flag-enabled' }),
642
+ tslib_es6.__metadata("design:type", Boolean)
643
+ ], exports.HSelect.prototype, "isReactiveSelectionFlagEnabled", void 0);
584
644
  tslib_es6.__decorate([
585
645
  decorators_js.property({
586
646
  converter: {
package/build/cjs/packages/phoenix/src/components/form/select/select.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA,wBAAwB,+CAAmD;AAC3E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,iBAAiB,wDAA4D;AAC7E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
1
+ {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA,wBAAwB,+CAAmD;AAC3E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,iBAAiB,wDAA4D;AAC7E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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.d.ts CHANGED
@@ -24,6 +24,7 @@ export declare class HSelect extends PhoenixLightLitElement {
24
24
  noDeselect: boolean;
25
25
  assistiveTitleId: string;
26
26
  isDevSelectPlaceholderFlagEnabled: boolean;
27
+ isReactiveSelectionFlagEnabled: boolean;
27
28
  translations: Record<string, string>;
28
29
  private _selectOptionsId;
29
30
  get selectedIndex(): number;
@@ -47,10 +48,12 @@ export declare class HSelect extends PhoenixLightLitElement {
47
48
  private _selectedOptionsAriaObserver;
48
49
  private $placeholder;
49
50
  private $searchLabel;
51
+ private _optionsMutationObserver?;
50
52
  constructor();
51
53
  updated(changedProperties: PropertyValues): void;
52
54
  private _focusElementAfterSelectOpened;
53
55
  connectedCallback(): void;
56
+ firstUpdated(changedProperties: PropertyValues): void;
54
57
  attributeChangedCallback(name: string, _old: string | null, value: string | null): void;
55
58
  private _updateOptions;
56
59
  private _getOptions;
@@ -59,6 +62,7 @@ export declare class HSelect extends PhoenixLightLitElement {
59
62
  private _createPlaceholderOption;
60
63
  private _injectOptionIntoDOM;
61
64
  private _setupEvents;
65
+ private _setupMutationObserver;
62
66
  private _handleOptionDeselect;
63
67
  private _updateOptionsView;
64
68
  private _updateLabelAria;
package/build/esm/packages/phoenix/src/components/form/select/select.js CHANGED
@@ -40,6 +40,7 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
40
40
  this.noDeselect = false;
41
41
  this.assistiveTitleId = '';
42
42
  this.isDevSelectPlaceholderFlagEnabled = false;
43
+ this.isReactiveSelectionFlagEnabled = false;
43
44
  this.translations = {};
44
45
  this._selectOptionsId = v4();
45
46
  this._searchValue = '';
@@ -55,9 +56,9 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
55
56
  this._$options = $options.reduce((acc, $option) => {
56
57
  const value = $option.getAttribute('value');
57
58
  if (value === null || value === undefined)
58
- throw Error('Select option must hava a value');
59
+ throw Error('Select option must have a value');
59
60
  if (acc.has(value))
60
- throw Error('Select options must hava a unique values.');
61
+ throw Error('Select options must have a unique values.');
61
62
  return acc.set(value, $option);
62
63
  }, new Map());
63
64
  const options = $options.map(SelectOptionMapper.toModel);
@@ -181,7 +182,7 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
181
182
  const $options = Array.from(this.querySelectorAll(SELECT_RELATED_COMPONENTS_NAMES.option));
182
183
  $options.forEach(($option) => $option.setAttribute('slot', SELECT_SLOT_NAMES.content));
183
184
  const $placeholderEl = this.querySelector(`[slot="${SELECT_INPUT_PLACEHOLDER_SLOT_NAME}"]`);
184
- this.$placeholder = ($placeholderEl && ((_a = $placeholderEl.textContent) === null || _a === void 0 ? void 0 : _a.trim())) ? $placeholderEl : 'Select';
185
+ this.$placeholder = $placeholderEl && ((_a = $placeholderEl.textContent) === null || _a === void 0 ? void 0 : _a.trim()) ? $placeholderEl : 'Select';
185
186
  if (this.multiple)
186
187
  this.type = SELECT_TYPES.multiple;
187
188
  }
@@ -283,6 +284,12 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
283
284
  }
284
285
  this._setupEvents();
285
286
  }
287
+ firstUpdated(changedProperties) {
288
+ super.firstUpdated(changedProperties);
289
+ if (this.isReactiveSelectionFlagEnabled) {
290
+ this._setupMutationObserver();
291
+ }
292
+ }
286
293
  attributeChangedCallback(name, _old, value) {
287
294
  super.attributeChangedCallback(name, _old, value);
288
295
  switch (name) {
@@ -301,19 +308,19 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
301
308
  this._updateOptions();
302
309
  }
303
310
  get _canAddPlaceholder() {
304
- var _a;
305
311
  if (this.multiple || this.required)
306
312
  return false;
307
- const hasSelection = (((_a = this._selectController.selectedOptions$.getValue()) === null || _a === void 0 ? void 0 : _a.length) || 0) > 0;
308
- if (hasSelection)
309
- return false;
310
313
  const hasExistingPlaceholder = !!this.querySelector('h-option[placeholder]');
311
314
  return !hasExistingPlaceholder;
312
315
  }
313
316
  _createPlaceholderOption() {
317
+ var _a;
314
318
  const $option = document.createElement('h-option');
315
319
  $option.setAttribute('value', '');
316
- $option.setAttribute('selected', 'true');
320
+ const hasSelection = (((_a = this._selectController.selectedOptions$.getValue()) === null || _a === void 0 ? void 0 : _a.length) || 0) > 0;
321
+ if (!hasSelection) {
322
+ $option.setAttribute('selected', 'true');
323
+ }
317
324
  $option.setAttribute('placeholder', 'true');
318
325
  $option.setAttribute('slot', SELECT_SLOT_NAMES.content);
319
326
  const $content = document.createElement(SELECT_RELATED_COMPONENTS_NAMES.optionContent);
@@ -321,7 +328,7 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
321
328
  $content.textContent = this.$placeholder;
322
329
  }
323
330
  else if (this.$placeholder instanceof Node) {
324
- Array.from(this.$placeholder.childNodes).forEach(node => {
331
+ Array.from(this.$placeholder.childNodes).forEach((node) => {
325
332
  $content.appendChild(node.cloneNode(true));
326
333
  });
327
334
  }
@@ -330,8 +337,8 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
330
337
  }
331
338
  _injectOptionIntoDOM($option) {
332
339
  const $firstOption = this.querySelector(SELECT_RELATED_COMPONENTS_NAMES.option);
333
- if ($firstOption) {
334
- this.insertBefore($option, $firstOption);
340
+ if ($firstOption && $firstOption.parentNode) {
341
+ $firstOption.parentNode.insertBefore($option, $firstOption);
335
342
  }
336
343
  else {
337
344
  this.appendChild($option);
@@ -341,6 +348,53 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
341
348
  this.addEventListener(SELECT_EVENT_NAMES.deselectOption, this._handleOptionDeselect);
342
349
  this.addEventListener(SELECT_CLOSE_BTN_EVENT_NAMES.close, this._closeSelect);
343
350
  }
351
+ _setupMutationObserver() {
352
+ this._optionsMutationObserver = new MutationObserver((mutations) => {
353
+ let shouldUpdate = false;
354
+ let newlySelectedValue = null;
355
+ for (const mutation of mutations) {
356
+ const target = mutation.target;
357
+ if (mutation.type === 'attributes' &&
358
+ mutation.attributeName === 'selected' &&
359
+ target.tagName &&
360
+ target.tagName.toLowerCase() === 'h-option') {
361
+ shouldUpdate = true;
362
+ if (target.hasAttribute('selected')) {
363
+ newlySelectedValue = target.getAttribute('value');
364
+ }
365
+ }
366
+ }
367
+ if (shouldUpdate) {
368
+ const options = Array.from(this._$options.values()).map(($el) => SelectOptionMapper.toModel($el));
369
+ if (!this.multiple && newlySelectedValue !== null) {
370
+ options.forEach((opt) => {
371
+ opt.selected = opt.value === newlySelectedValue;
372
+ });
373
+ }
374
+ this._selectController.options$.notify(options);
375
+ let selectedOptions = options.filter((opt) => opt.selected);
376
+ if (selectedOptions.length === 0) {
377
+ const placeholder = options.find((opt) => opt.isPlaceholder);
378
+ if (placeholder) {
379
+ placeholder.selected = true;
380
+ const $placeholderHtml = this._$options.get(placeholder.value);
381
+ if ($placeholderHtml) {
382
+ $placeholderHtml.setAttribute('selected', 'true');
383
+ }
384
+ selectedOptions = [placeholder];
385
+ }
386
+ }
387
+ this._selectController.selectedOptions$.notify(selectedOptions);
388
+ }
389
+ });
390
+ if (this._$optionsList.value) {
391
+ this._optionsMutationObserver.observe(this._$optionsList.value, {
392
+ attributes: true,
393
+ attributeFilter: ['selected'],
394
+ subtree: true
395
+ });
396
+ }
397
+ }
344
398
  _appendNewHTMLOption(option, position) {
345
399
  const $list = this._$optionsList.value;
346
400
  if (!$list)
@@ -401,9 +455,11 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
401
455
  this._selectController.select(option);
402
456
  }
403
457
  disconnectedCallback() {
458
+ var _a;
404
459
  super.disconnectedCallback();
405
460
  this._selectController.options$.unsubscribe(this._optionsObserver);
406
461
  this._$options.clear();
462
+ (_a = this._optionsMutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
407
463
  }
408
464
  _getClonedPlaceholderElement() {
409
465
  return this.$placeholder instanceof HTMLElement ? this.$placeholder.cloneNode(true) : this.$placeholder;
@@ -455,9 +511,9 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
455
511
  <h-select-close-btn class="${SELECT_CSS_CLASSES.selectCloseMobileButton}" @close=${this._closeSelect}></h-select-close-btn>
456
512
 
457
513
  <div class=${SELECT_CSS_CLASSES.selectLabel}>
458
- ${this.isDevSelectPlaceholderFlagEnabled ?
459
- (_b = this.$searchLabel) === null || _b === void 0 ? void 0 : _b.cloneNode(true) :
460
- html `${this._getClonedPlaceholderElement()}`}
514
+ ${this.isDevSelectPlaceholderFlagEnabled
515
+ ? (_b = this.$searchLabel) === null || _b === void 0 ? void 0 : _b.cloneNode(true)
516
+ : html `${this._getClonedPlaceholderElement()}`}
461
517
  </div>
462
518
 
463
519
  ${isSearchEnabled
@@ -577,6 +633,10 @@ __decorate([
577
633
  property({ type: Boolean, attribute: 'is-dev-select-placeholder-flag-enabled' }),
578
634
  __metadata("design:type", Boolean)
579
635
  ], HSelect.prototype, "isDevSelectPlaceholderFlagEnabled", void 0);
636
+ __decorate([
637
+ property({ type: Boolean, attribute: 'is-reactive-selection-flag-enabled' }),
638
+ __metadata("design:type", Boolean)
639
+ ], HSelect.prototype, "isReactiveSelectionFlagEnabled", void 0);
580
640
  __decorate([
581
641
  property({
582
642
  converter: {
package/build/esm/packages/phoenix/src/components/form/select/select.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,uCAAuC,+CAAmD;AAC1F;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,eAAe,wDAA4D;AAC3E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
1
+ {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,uCAAuC,+CAAmD;AAC1F;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,eAAe,wDAA4D;AAC3E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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.15",
5
+ "version": "1.18.16",
6
6
  "description": "phoenix design system",
7
7
  "author": "zefirek",
8
8
  "license": "MIT",