@shoper/phoenix_design_system 1.18.12-0 → 1.18.12-1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (11) hide show
  1. package/build/cjs/packages/phoenix/src/components/accordion/accordion_content.js +22 -76
  2. package/build/cjs/packages/phoenix/src/components/accordion/accordion_content.js.map +1 -1
  3. package/build/cjs/packages/phoenix/src/components/form/select/select.js +45 -5
  4. package/build/cjs/packages/phoenix/src/components/form/select/select.js.map +1 -1
  5. package/build/esm/packages/phoenix/src/components/accordion/accordion_content.d.ts +2 -7
  6. package/build/esm/packages/phoenix/src/components/accordion/accordion_content.js +22 -76
  7. package/build/esm/packages/phoenix/src/components/accordion/accordion_content.js.map +1 -1
  8. package/build/esm/packages/phoenix/src/components/form/select/select.d.ts +4 -0
  9. package/build/esm/packages/phoenix/src/components/form/select/select.js +45 -5
  10. package/build/esm/packages/phoenix/src/components/form/select/select.js.map +1 -1
  11. package/package.json +1 -1
package/build/cjs/packages/phoenix/src/components/accordion/accordion_content.js CHANGED
@@ -18,23 +18,9 @@ exports.HAccordionContent = class HAccordionContent extends phoenix_light_lit_el
18
18
  constructor() {
19
19
  super();
20
20
  this.transitionName = 'accordion-toggle';
21
- this.isDevAccordionOptimizationFlagEnabled = false;
22
- this._resizeObserver = null;
23
- this._isTransitioning = false;
24
21
  this._resizeDebounceTimer = null;
25
22
  this._mutationDebounceTimer = null;
26
23
  this._mutationObserver = null;
27
- this._handleResizeObserver = () => {
28
- if (this._isTransitioning || this.hidden || this.style.height === '0px')
29
- return;
30
- this._setOriginalHeightValue(this.scrollHeight);
31
- };
32
- this._updateOriginalHeight = () => {
33
- const previousDisplay = this.style.display;
34
- this.style.setProperty('display', 'block', 'important');
35
- this._setOriginalHeightValue(this.scrollHeight);
36
- this.style.display = previousDisplay;
37
- };
38
24
  this._handleResize = () => {
39
25
  if (this._resizeDebounceTimer !== null) {
40
26
  window.cancelAnimationFrame(this._resizeDebounceTimer);
@@ -51,17 +37,12 @@ exports.HAccordionContent = class HAccordionContent extends phoenix_light_lit_el
51
37
  this.style.setProperty('display', 'block', 'important');
52
38
  this.style.height = 'auto';
53
39
  requestAnimationFrame(() => {
54
- this._setOriginalHeightValue(this.getBoundingClientRect().height);
40
+ this._setOriginalHeightValue();
55
41
  this.style.display = previousDisplay;
56
42
  this.style.height = this.hidden ? '0px' : this._originalHeight;
57
43
  });
58
44
  });
59
45
  };
60
- this._setOriginalHeightValue = (height) => {
61
- if (height !== 0 || this.children.length === 0) {
62
- this._originalHeight = `${height}px`;
63
- }
64
- };
65
46
  this._handleMutation = () => {
66
47
  if (this._mutationDebounceTimer !== null) {
67
48
  window.clearTimeout(this._mutationDebounceTimer);
@@ -70,7 +51,7 @@ exports.HAccordionContent = class HAccordionContent extends phoenix_light_lit_el
70
51
  requestAnimationFrame(() => {
71
52
  this.style.height = 'auto';
72
53
  requestAnimationFrame(() => {
73
- this._setOriginalHeightValue(this.getBoundingClientRect().height);
54
+ this._setOriginalHeightValue();
74
55
  if (this.hidden) {
75
56
  this.style.height = '0px';
76
57
  }
@@ -81,43 +62,31 @@ exports.HAccordionContent = class HAccordionContent extends phoenix_light_lit_el
81
62
  });
82
63
  }, MUTATION_DEBOUNCE_MS);
83
64
  };
84
- this._expand = () => {
85
- if (this.isDevAccordionOptimizationFlagEnabled) {
86
- this._setOriginalHeightValue(this.scrollHeight);
87
- this._isTransitioning = true;
65
+ this._setOriginalHeightValue = () => {
66
+ const newHeight = this.getBoundingClientRect().height;
67
+ if (newHeight !== 0 || this.children.length === 0) {
68
+ this._originalHeight = `${newHeight}px`;
88
69
  }
70
+ };
71
+ this._expand = () => {
89
72
  this._setHeight(this._originalHeight);
90
73
  };
91
74
  this._handleTransitionEnd = (e) => {
92
75
  if (e.propertyName !== 'height' || e.target !== this) {
93
76
  return;
94
77
  }
95
- if (this.isDevAccordionOptimizationFlagEnabled) {
96
- this._isTransitioning = false;
97
- }
98
78
  if (!this.hidden && this.style.height !== '0px') {
99
79
  this.style.height = 'auto';
100
80
  }
101
81
  };
102
82
  this._collapse = () => {
103
- if (this.isDevAccordionOptimizationFlagEnabled) {
104
- this._isTransitioning = true;
105
- }
106
83
  const currentHeight = this.getBoundingClientRect().height;
107
84
  this._setHeight(`${currentHeight}px`);
108
- if (this.isDevAccordionOptimizationFlagEnabled) {
109
- void this.offsetHeight;
85
+ requestAnimationFrame(() => {
110
86
  requestAnimationFrame(() => {
111
87
  this._setHeight('0px');
112
88
  });
113
- }
114
- else {
115
- requestAnimationFrame(() => {
116
- requestAnimationFrame(() => {
117
- this._setHeight('0px');
118
- });
119
- });
120
- }
89
+ });
121
90
  };
122
91
  this.setAttribute('role', 'region');
123
92
  this._boundHandleTransitionEnd = this._handleTransitionEnd.bind(this);
@@ -127,24 +96,12 @@ exports.HAccordionContent = class HAccordionContent extends phoenix_light_lit_el
127
96
  this._contextConsumer = new context_consumer_controller.ContextConsumerController(this);
128
97
  this._transitionController = new transition_controller.TransitionController(this, this.transitionName);
129
98
  this._subscribeObserver();
130
- if (this.isDevAccordionOptimizationFlagEnabled) {
131
- this._resizeObserver = new ResizeObserver(this._handleResizeObserver);
132
- this._resizeObserver.observe(this);
133
- }
134
- else {
135
- window.addEventListener('resize', this._handleResize, { passive: true });
136
- }
99
+ window.addEventListener('resize', this._handleResize, { passive: true });
137
100
  this.addEventListener('transitionend', this._boundHandleTransitionEnd);
138
101
  }
139
102
  firstUpdated(props) {
140
103
  super.firstUpdated(props);
141
- if (this.isDevAccordionOptimizationFlagEnabled) {
142
- this._updateOriginalHeight();
143
- this.style.height = this.hidden ? '0px' : this._originalHeight;
144
- }
145
- else {
146
- this._setStylingOptions();
147
- }
104
+ this._setStylingOptions();
148
105
  }
149
106
  async _subscribeObserver() {
150
107
  this._accordionGroupProps = await this._contextConsumer.consumeAsync(accordion_constants.ACCORDION_CONTEXTS.accordionGroupProps);
@@ -153,10 +110,8 @@ exports.HAccordionContent = class HAccordionContent extends phoenix_light_lit_el
153
110
  accordionProps.opened ? this._transitionController.show(this._expand) : this._transitionController.hide(this._collapse);
154
111
  });
155
112
  this._accordionGroupProps.subscribe(this._accordionGroupPropsObserver);
156
- if (!this.isDevAccordionOptimizationFlagEnabled) {
157
- this._mutationObserver = new MutationObserver(this._handleMutation);
158
- this._mutationObserver.observe(this, { childList: true, subtree: true });
159
- }
113
+ this._mutationObserver = new MutationObserver(this._handleMutation);
114
+ this._mutationObserver.observe(this, { childList: true, subtree: true });
160
115
  }
161
116
  _setHeight(height) {
162
117
  this.style.height = height;
@@ -166,33 +121,24 @@ exports.HAccordionContent = class HAccordionContent extends phoenix_light_lit_el
166
121
  this.setAttribute('labelledby', regionId);
167
122
  }
168
123
  disconnectedCallback() {
169
- var _a, _b, _c;
124
+ var _a, _b;
170
125
  super.disconnectedCallback();
171
126
  (_a = this._accordionGroupProps) === null || _a === void 0 ? void 0 : _a.unsubscribe(this._accordionGroupPropsObserver);
172
- if (this.isDevAccordionOptimizationFlagEnabled) {
173
- (_b = this._resizeObserver) === null || _b === void 0 ? void 0 : _b.disconnect();
127
+ (_b = this._mutationObserver) === null || _b === void 0 ? void 0 : _b.disconnect();
128
+ window.removeEventListener('resize', this._handleResize);
129
+ this.removeEventListener('transitionend', this._boundHandleTransitionEnd);
130
+ if (this._resizeDebounceTimer !== null) {
131
+ window.cancelAnimationFrame(this._resizeDebounceTimer);
174
132
  }
175
- else {
176
- (_c = this._mutationObserver) === null || _c === void 0 ? void 0 : _c.disconnect();
177
- window.removeEventListener('resize', this._handleResize);
178
- if (this._resizeDebounceTimer !== null) {
179
- window.cancelAnimationFrame(this._resizeDebounceTimer);
180
- }
181
- if (this._mutationDebounceTimer !== null) {
182
- window.clearTimeout(this._mutationDebounceTimer);
183
- }
133
+ if (this._mutationDebounceTimer !== null) {
134
+ window.clearTimeout(this._mutationDebounceTimer);
184
135
  }
185
- this.removeEventListener('transitionend', this._boundHandleTransitionEnd);
186
136
  }
187
137
  };
188
138
  tslib_es6.__decorate([
189
139
  decorators.property(),
190
140
  tslib_es6.__metadata("design:type", Object)
191
141
  ], exports.HAccordionContent.prototype, "transitionName", void 0);
192
- tslib_es6.__decorate([
193
- decorators.property({ type: Boolean, attribute: 'is-dev-accordion-optimization-flag-enabled' }),
194
- tslib_es6.__metadata("design:type", Boolean)
195
- ], exports.HAccordionContent.prototype, "isDevAccordionOptimizationFlagEnabled", void 0);
196
142
  exports.HAccordionContent = tslib_es6.__decorate([
197
143
  phoenix_custom_element.phoenixCustomElement('h-accordion-content'),
198
144
  tslib_es6.__metadata("design:paramtypes", [])
package/build/cjs/packages/phoenix/src/components/accordion/accordion_content.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA,wBAAwB,4CAAgD;AACxE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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,4CAAgD;AACxE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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
@@ -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 = '';
@@ -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) {
@@ -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
  }
@@ -345,6 +352,33 @@ 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
+ var _a;
358
+ let shouldUpdate = false;
359
+ for (const mutation of mutations) {
360
+ const target = mutation.target;
361
+ if (mutation.type === 'attributes' && mutation.attributeName === 'selected' && ((_a = target.tagName) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === 'h-option') {
362
+ shouldUpdate = true;
363
+ break;
364
+ }
365
+ }
366
+ if (shouldUpdate) {
367
+ const currentElements = Array.from(this._$options.values());
368
+ const options = currentElements.map(($el) => select_option_mapper.SelectOptionMapper.toModel($el));
369
+ this._selectController.options$.notify(options);
370
+ const selectedOptions = options.filter((opt) => opt.selected);
371
+ this._selectController.selectedOptions$.notify(selectedOptions);
372
+ }
373
+ });
374
+ if (this._$optionsList.value) {
375
+ this._optionsMutationObserver.observe(this._$optionsList.value, {
376
+ attributes: true,
377
+ attributeFilter: ['selected'],
378
+ subtree: true
379
+ });
380
+ }
381
+ }
348
382
  _appendNewHTMLOption(option, position) {
349
383
  const $list = this._$optionsList.value;
350
384
  if (!$list)
@@ -405,9 +439,11 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
405
439
  this._selectController.select(option);
406
440
  }
407
441
  disconnectedCallback() {
442
+ var _a;
408
443
  super.disconnectedCallback();
409
444
  this._selectController.options$.unsubscribe(this._optionsObserver);
410
445
  this._$options.clear();
446
+ (_a = this._optionsMutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
411
447
  }
412
448
  _getClonedPlaceholderElement() {
413
449
  return this.$placeholder instanceof HTMLElement ? this.$placeholder.cloneNode(true) : this.$placeholder;
@@ -459,9 +495,9 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
459
495
  <h-select-close-btn class="${select_constants.SELECT_CSS_CLASSES.selectCloseMobileButton}" @close=${this._closeSelect}></h-select-close-btn>
460
496
 
461
497
  <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()}`}
498
+ ${this.isDevSelectPlaceholderFlagEnabled
499
+ ? (_b = this.$searchLabel) === null || _b === void 0 ? void 0 : _b.cloneNode(true)
500
+ : lit.html `${this._getClonedPlaceholderElement()}`}
465
501
  </div>
466
502
 
467
503
  ${isSearchEnabled
@@ -581,6 +617,10 @@ tslib_es6.__decorate([
581
617
  decorators_js.property({ type: Boolean, attribute: 'is-dev-select-placeholder-flag-enabled' }),
582
618
  tslib_es6.__metadata("design:type", Boolean)
583
619
  ], exports.HSelect.prototype, "isDevSelectPlaceholderFlagEnabled", void 0);
620
+ tslib_es6.__decorate([
621
+ decorators_js.property({ type: Boolean, attribute: 'is-reactive-selection-flag-enabled' }),
622
+ tslib_es6.__metadata("design:type", Boolean)
623
+ ], exports.HSelect.prototype, "isReactiveSelectionFlagEnabled", void 0);
584
624
  tslib_es6.__decorate([
585
625
  decorators_js.property({
586
626
  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;"}
package/build/esm/packages/phoenix/src/components/accordion/accordion_content.d.ts CHANGED
@@ -2,14 +2,11 @@ import { PhoenixLightLitElement } from "../../core/phoenix_light_lit_element/pho
2
2
  import { PropertyValues } from 'lit';
3
3
  export declare class HAccordionContent extends PhoenixLightLitElement {
4
4
  transitionName: string;
5
- isDevAccordionOptimizationFlagEnabled: boolean;
6
5
  private _transitionController;
7
6
  private _contextConsumer;
8
7
  private _accordionGroupProps;
9
8
  private _accordionGroupPropsObserver;
10
9
  private _originalHeight;
11
- private _resizeObserver;
12
- private _isTransitioning;
13
10
  private _resizeDebounceTimer;
14
11
  private _mutationDebounceTimer;
15
12
  private _mutationObserver;
@@ -17,13 +14,11 @@ export declare class HAccordionContent extends PhoenixLightLitElement {
17
14
  constructor();
18
15
  connectedCallback(): void;
19
16
  firstUpdated(props: PropertyValues): void;
20
- private _handleResizeObserver;
21
- private _updateOriginalHeight;
22
17
  private _handleResize;
23
18
  private _setStylingOptions;
24
- private _setOriginalHeightValue;
25
- private _handleMutation;
26
19
  private _subscribeObserver;
20
+ private _handleMutation;
21
+ private _setOriginalHeightValue;
27
22
  private _expand;
28
23
  private _handleTransitionEnd;
29
24
  private _collapse;
package/build/esm/packages/phoenix/src/components/accordion/accordion_content.js CHANGED
@@ -14,23 +14,9 @@ let HAccordionContent = class HAccordionContent extends PhoenixLightLitElement {
14
14
  constructor() {
15
15
  super();
16
16
  this.transitionName = 'accordion-toggle';
17
- this.isDevAccordionOptimizationFlagEnabled = false;
18
- this._resizeObserver = null;
19
- this._isTransitioning = false;
20
17
  this._resizeDebounceTimer = null;
21
18
  this._mutationDebounceTimer = null;
22
19
  this._mutationObserver = null;
23
- this._handleResizeObserver = () => {
24
- if (this._isTransitioning || this.hidden || this.style.height === '0px')
25
- return;
26
- this._setOriginalHeightValue(this.scrollHeight);
27
- };
28
- this._updateOriginalHeight = () => {
29
- const previousDisplay = this.style.display;
30
- this.style.setProperty('display', 'block', 'important');
31
- this._setOriginalHeightValue(this.scrollHeight);
32
- this.style.display = previousDisplay;
33
- };
34
20
  this._handleResize = () => {
35
21
  if (this._resizeDebounceTimer !== null) {
36
22
  window.cancelAnimationFrame(this._resizeDebounceTimer);
@@ -47,17 +33,12 @@ let HAccordionContent = class HAccordionContent extends PhoenixLightLitElement {
47
33
  this.style.setProperty('display', 'block', 'important');
48
34
  this.style.height = 'auto';
49
35
  requestAnimationFrame(() => {
50
- this._setOriginalHeightValue(this.getBoundingClientRect().height);
36
+ this._setOriginalHeightValue();
51
37
  this.style.display = previousDisplay;
52
38
  this.style.height = this.hidden ? '0px' : this._originalHeight;
53
39
  });
54
40
  });
55
41
  };
56
- this._setOriginalHeightValue = (height) => {
57
- if (height !== 0 || this.children.length === 0) {
58
- this._originalHeight = `${height}px`;
59
- }
60
- };
61
42
  this._handleMutation = () => {
62
43
  if (this._mutationDebounceTimer !== null) {
63
44
  window.clearTimeout(this._mutationDebounceTimer);
@@ -66,7 +47,7 @@ let HAccordionContent = class HAccordionContent extends PhoenixLightLitElement {
66
47
  requestAnimationFrame(() => {
67
48
  this.style.height = 'auto';
68
49
  requestAnimationFrame(() => {
69
- this._setOriginalHeightValue(this.getBoundingClientRect().height);
50
+ this._setOriginalHeightValue();
70
51
  if (this.hidden) {
71
52
  this.style.height = '0px';
72
53
  }
@@ -77,43 +58,31 @@ let HAccordionContent = class HAccordionContent extends PhoenixLightLitElement {
77
58
  });
78
59
  }, MUTATION_DEBOUNCE_MS);
79
60
  };
80
- this._expand = () => {
81
- if (this.isDevAccordionOptimizationFlagEnabled) {
82
- this._setOriginalHeightValue(this.scrollHeight);
83
- this._isTransitioning = true;
61
+ this._setOriginalHeightValue = () => {
62
+ const newHeight = this.getBoundingClientRect().height;
63
+ if (newHeight !== 0 || this.children.length === 0) {
64
+ this._originalHeight = `${newHeight}px`;
84
65
  }
66
+ };
67
+ this._expand = () => {
85
68
  this._setHeight(this._originalHeight);
86
69
  };
87
70
  this._handleTransitionEnd = (e) => {
88
71
  if (e.propertyName !== 'height' || e.target !== this) {
89
72
  return;
90
73
  }
91
- if (this.isDevAccordionOptimizationFlagEnabled) {
92
- this._isTransitioning = false;
93
- }
94
74
  if (!this.hidden && this.style.height !== '0px') {
95
75
  this.style.height = 'auto';
96
76
  }
97
77
  };
98
78
  this._collapse = () => {
99
- if (this.isDevAccordionOptimizationFlagEnabled) {
100
- this._isTransitioning = true;
101
- }
102
79
  const currentHeight = this.getBoundingClientRect().height;
103
80
  this._setHeight(`${currentHeight}px`);
104
- if (this.isDevAccordionOptimizationFlagEnabled) {
105
- void this.offsetHeight;
81
+ requestAnimationFrame(() => {
106
82
  requestAnimationFrame(() => {
107
83
  this._setHeight('0px');
108
84
  });
109
- }
110
- else {
111
- requestAnimationFrame(() => {
112
- requestAnimationFrame(() => {
113
- this._setHeight('0px');
114
- });
115
- });
116
- }
85
+ });
117
86
  };
118
87
  this.setAttribute('role', 'region');
119
88
  this._boundHandleTransitionEnd = this._handleTransitionEnd.bind(this);
@@ -123,24 +92,12 @@ let HAccordionContent = class HAccordionContent extends PhoenixLightLitElement {
123
92
  this._contextConsumer = new ContextConsumerController(this);
124
93
  this._transitionController = new TransitionController(this, this.transitionName);
125
94
  this._subscribeObserver();
126
- if (this.isDevAccordionOptimizationFlagEnabled) {
127
- this._resizeObserver = new ResizeObserver(this._handleResizeObserver);
128
- this._resizeObserver.observe(this);
129
- }
130
- else {
131
- window.addEventListener('resize', this._handleResize, { passive: true });
132
- }
95
+ window.addEventListener('resize', this._handleResize, { passive: true });
133
96
  this.addEventListener('transitionend', this._boundHandleTransitionEnd);
134
97
  }
135
98
  firstUpdated(props) {
136
99
  super.firstUpdated(props);
137
- if (this.isDevAccordionOptimizationFlagEnabled) {
138
- this._updateOriginalHeight();
139
- this.style.height = this.hidden ? '0px' : this._originalHeight;
140
- }
141
- else {
142
- this._setStylingOptions();
143
- }
100
+ this._setStylingOptions();
144
101
  }
145
102
  async _subscribeObserver() {
146
103
  this._accordionGroupProps = await this._contextConsumer.consumeAsync(ACCORDION_CONTEXTS.accordionGroupProps);
@@ -149,10 +106,8 @@ let HAccordionContent = class HAccordionContent extends PhoenixLightLitElement {
149
106
  accordionProps.opened ? this._transitionController.show(this._expand) : this._transitionController.hide(this._collapse);
150
107
  });
151
108
  this._accordionGroupProps.subscribe(this._accordionGroupPropsObserver);
152
- if (!this.isDevAccordionOptimizationFlagEnabled) {
153
- this._mutationObserver = new MutationObserver(this._handleMutation);
154
- this._mutationObserver.observe(this, { childList: true, subtree: true });
155
- }
109
+ this._mutationObserver = new MutationObserver(this._handleMutation);
110
+ this._mutationObserver.observe(this, { childList: true, subtree: true });
156
111
  }
157
112
  _setHeight(height) {
158
113
  this.style.height = height;
@@ -162,33 +117,24 @@ let HAccordionContent = class HAccordionContent extends PhoenixLightLitElement {
162
117
  this.setAttribute('labelledby', regionId);
163
118
  }
164
119
  disconnectedCallback() {
165
- var _a, _b, _c;
120
+ var _a, _b;
166
121
  super.disconnectedCallback();
167
122
  (_a = this._accordionGroupProps) === null || _a === void 0 ? void 0 : _a.unsubscribe(this._accordionGroupPropsObserver);
168
- if (this.isDevAccordionOptimizationFlagEnabled) {
169
- (_b = this._resizeObserver) === null || _b === void 0 ? void 0 : _b.disconnect();
123
+ (_b = this._mutationObserver) === null || _b === void 0 ? void 0 : _b.disconnect();
124
+ window.removeEventListener('resize', this._handleResize);
125
+ this.removeEventListener('transitionend', this._boundHandleTransitionEnd);
126
+ if (this._resizeDebounceTimer !== null) {
127
+ window.cancelAnimationFrame(this._resizeDebounceTimer);
170
128
  }
171
- else {
172
- (_c = this._mutationObserver) === null || _c === void 0 ? void 0 : _c.disconnect();
173
- window.removeEventListener('resize', this._handleResize);
174
- if (this._resizeDebounceTimer !== null) {
175
- window.cancelAnimationFrame(this._resizeDebounceTimer);
176
- }
177
- if (this._mutationDebounceTimer !== null) {
178
- window.clearTimeout(this._mutationDebounceTimer);
179
- }
129
+ if (this._mutationDebounceTimer !== null) {
130
+ window.clearTimeout(this._mutationDebounceTimer);
180
131
  }
181
- this.removeEventListener('transitionend', this._boundHandleTransitionEnd);
182
132
  }
183
133
  };
184
134
  __decorate([
185
135
  property(),
186
136
  __metadata("design:type", Object)
187
137
  ], HAccordionContent.prototype, "transitionName", void 0);
188
- __decorate([
189
- property({ type: Boolean, attribute: 'is-dev-accordion-optimization-flag-enabled' }),
190
- __metadata("design:type", Boolean)
191
- ], HAccordionContent.prototype, "isDevAccordionOptimizationFlagEnabled", void 0);
192
138
  HAccordionContent = __decorate([
193
139
  phoenixCustomElement('h-accordion-content'),
194
140
  __metadata("design:paramtypes", [])
package/build/esm/packages/phoenix/src/components/accordion/accordion_content.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,uCAAuC,4CAAgD;AACvF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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,4CAAgD;AACvF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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 = '';
@@ -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) {
@@ -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
  }
@@ -341,6 +348,33 @@ 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
+ var _a;
354
+ let shouldUpdate = false;
355
+ for (const mutation of mutations) {
356
+ const target = mutation.target;
357
+ if (mutation.type === 'attributes' && mutation.attributeName === 'selected' && ((_a = target.tagName) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === 'h-option') {
358
+ shouldUpdate = true;
359
+ break;
360
+ }
361
+ }
362
+ if (shouldUpdate) {
363
+ const currentElements = Array.from(this._$options.values());
364
+ const options = currentElements.map(($el) => SelectOptionMapper.toModel($el));
365
+ this._selectController.options$.notify(options);
366
+ const selectedOptions = options.filter((opt) => opt.selected);
367
+ this._selectController.selectedOptions$.notify(selectedOptions);
368
+ }
369
+ });
370
+ if (this._$optionsList.value) {
371
+ this._optionsMutationObserver.observe(this._$optionsList.value, {
372
+ attributes: true,
373
+ attributeFilter: ['selected'],
374
+ subtree: true
375
+ });
376
+ }
377
+ }
344
378
  _appendNewHTMLOption(option, position) {
345
379
  const $list = this._$optionsList.value;
346
380
  if (!$list)
@@ -401,9 +435,11 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
401
435
  this._selectController.select(option);
402
436
  }
403
437
  disconnectedCallback() {
438
+ var _a;
404
439
  super.disconnectedCallback();
405
440
  this._selectController.options$.unsubscribe(this._optionsObserver);
406
441
  this._$options.clear();
442
+ (_a = this._optionsMutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
407
443
  }
408
444
  _getClonedPlaceholderElement() {
409
445
  return this.$placeholder instanceof HTMLElement ? this.$placeholder.cloneNode(true) : this.$placeholder;
@@ -455,9 +491,9 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
455
491
  <h-select-close-btn class="${SELECT_CSS_CLASSES.selectCloseMobileButton}" @close=${this._closeSelect}></h-select-close-btn>
456
492
 
457
493
  <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()}`}
494
+ ${this.isDevSelectPlaceholderFlagEnabled
495
+ ? (_b = this.$searchLabel) === null || _b === void 0 ? void 0 : _b.cloneNode(true)
496
+ : html `${this._getClonedPlaceholderElement()}`}
461
497
  </div>
462
498
 
463
499
  ${isSearchEnabled
@@ -577,6 +613,10 @@ __decorate([
577
613
  property({ type: Boolean, attribute: 'is-dev-select-placeholder-flag-enabled' }),
578
614
  __metadata("design:type", Boolean)
579
615
  ], HSelect.prototype, "isDevSelectPlaceholderFlagEnabled", void 0);
616
+ __decorate([
617
+ property({ type: Boolean, attribute: 'is-reactive-selection-flag-enabled' }),
618
+ __metadata("design:type", Boolean)
619
+ ], HSelect.prototype, "isReactiveSelectionFlagEnabled", void 0);
580
620
  __decorate([
581
621
  property({
582
622
  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;"}
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.12-0",
5
+ "version": "1.18.12-1",
6
6
  "description": "phoenix design system",
7
7
  "author": "zefirek",
8
8
  "license": "MIT",