@shoper/phoenix_design_system 1.18.2-9 → 1.18.3

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 (19) hide show
  1. package/build/cjs/packages/phoenix/src/components/accordion/accordion_content.js +74 -20
  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/model/select_option_mapper.js +1 -2
  4. package/build/cjs/packages/phoenix/src/components/form/select/model/select_option_mapper.js.map +1 -1
  5. package/build/cjs/packages/phoenix/src/components/form/select/select.js +1 -36
  6. package/build/cjs/packages/phoenix/src/components/form/select/select.js.map +1 -1
  7. package/build/cjs/packages/phoenix/src/controllers/visibility_controller/visibility_controller.js +14 -4
  8. package/build/cjs/packages/phoenix/src/controllers/visibility_controller/visibility_controller.js.map +1 -1
  9. package/build/esm/packages/phoenix/src/components/accordion/accordion_content.d.ts +7 -1
  10. package/build/esm/packages/phoenix/src/components/accordion/accordion_content.js +74 -20
  11. package/build/esm/packages/phoenix/src/components/accordion/accordion_content.js.map +1 -1
  12. package/build/esm/packages/phoenix/src/components/form/select/model/select_option_mapper.js +1 -2
  13. package/build/esm/packages/phoenix/src/components/form/select/model/select_option_mapper.js.map +1 -1
  14. package/build/esm/packages/phoenix/src/components/form/select/select.d.ts +0 -1
  15. package/build/esm/packages/phoenix/src/components/form/select/select.js +1 -36
  16. package/build/esm/packages/phoenix/src/components/form/select/select.js.map +1 -1
  17. package/build/esm/packages/phoenix/src/controllers/visibility_controller/visibility_controller.js +14 -4
  18. package/build/esm/packages/phoenix/src/controllers/visibility_controller/visibility_controller.js.map +1 -1
  19. package/package.json +1 -1
package/build/cjs/packages/phoenix/src/components/accordion/accordion_content.js CHANGED
@@ -12,43 +12,92 @@ var context_consumer_controller = require('../../core/context/context_consumer_c
12
12
  var accordion_constants = require('./accordion_constants.js');
13
13
  var transition_controller = require('../../controllers/transition_controller/transition_controller.js');
14
14
 
15
+ const RESIZE_DEBOUNCE_MS = 150;
16
+ const MUTATION_DEBOUNCE_MS = 100;
15
17
  exports.HAccordionContent = class HAccordionContent extends phoenix_light_lit_element.PhoenixLightLitElement {
16
18
  constructor() {
17
19
  super();
18
20
  this.transitionName = 'accordion-toggle';
21
+ this._resizeDebounceTimer = null;
22
+ this._mutationDebounceTimer = null;
23
+ this._mutationObserver = null;
24
+ this._handleResize = () => {
25
+ if (this._resizeDebounceTimer !== null) {
26
+ window.cancelAnimationFrame(this._resizeDebounceTimer);
27
+ }
28
+ this._resizeDebounceTimer = window.requestAnimationFrame(() => {
29
+ setTimeout(() => {
30
+ this._setStylingOptions();
31
+ }, RESIZE_DEBOUNCE_MS);
32
+ });
33
+ };
19
34
  this._setStylingOptions = () => {
20
- this.style.setProperty('display', 'block', 'important');
21
- this.style.height = 'auto';
22
- this._setOriginalHeightValue();
23
- this.style.display = '';
24
- this.style.height = this._originalHeight;
35
+ requestAnimationFrame(() => {
36
+ const previousDisplay = this.style.display;
37
+ this.style.display = 'block';
38
+ this.style.height = 'auto';
39
+ requestAnimationFrame(() => {
40
+ this._setOriginalHeightValue();
41
+ this.style.display = previousDisplay;
42
+ this.style.height = this.hidden ? '0px' : this._originalHeight;
43
+ });
44
+ });
45
+ };
46
+ this._handleMutation = () => {
47
+ if (this._mutationDebounceTimer !== null) {
48
+ window.clearTimeout(this._mutationDebounceTimer);
49
+ }
50
+ this._mutationDebounceTimer = window.setTimeout(() => {
51
+ requestAnimationFrame(() => {
52
+ this.style.height = 'auto';
53
+ requestAnimationFrame(() => {
54
+ this._setOriginalHeightValue();
55
+ if (this.hidden) {
56
+ this.style.height = '0px';
57
+ }
58
+ else {
59
+ this.style.height = this._originalHeight;
60
+ }
61
+ });
62
+ });
63
+ }, MUTATION_DEBOUNCE_MS);
25
64
  };
26
65
  this._setOriginalHeightValue = () => {
27
66
  const newHeight = this.getBoundingClientRect().height;
28
- if (newHeight !== 0 || this.children.length === 0)
67
+ if (newHeight !== 0 || this.children.length === 0) {
29
68
  this._originalHeight = `${newHeight}px`;
69
+ }
30
70
  };
31
71
  this._expand = () => {
32
72
  this._setHeight(this._originalHeight);
33
- setTimeout(() => {
73
+ };
74
+ this._handleTransitionEnd = (e) => {
75
+ if (e.propertyName !== 'height' || e.target !== this) {
76
+ return;
77
+ }
78
+ if (!this.hidden && this.style.height !== '0px') {
34
79
  this.style.height = 'auto';
35
- }, this._transitionDuration);
80
+ }
36
81
  };
37
82
  this._collapse = () => {
38
- this._setHeight(this._originalHeight);
83
+ const currentHeight = this.getBoundingClientRect().height;
84
+ this._setHeight(`${currentHeight}px`);
39
85
  requestAnimationFrame(() => {
40
- this._setHeight('0px');
86
+ requestAnimationFrame(() => {
87
+ this._setHeight('0px');
88
+ });
41
89
  });
42
90
  };
43
91
  this.setAttribute('role', 'region');
92
+ this._boundHandleTransitionEnd = this._handleTransitionEnd.bind(this);
44
93
  }
45
94
  connectedCallback() {
46
95
  super.connectedCallback();
47
96
  this._contextConsumer = new context_consumer_controller.ContextConsumerController(this);
48
97
  this._transitionController = new transition_controller.TransitionController(this, this.transitionName);
49
98
  this._subscribeObserver();
50
- window.addEventListener('resize', this._setStylingOptions);
51
- this._transitionDuration = parseFloat(getComputedStyle(this).transitionDuration) * 1000;
99
+ window.addEventListener('resize', this._handleResize, { passive: true });
100
+ this.addEventListener('transitionend', this._boundHandleTransitionEnd);
52
101
  }
53
102
  firstUpdated(props) {
54
103
  super.firstUpdated(props);
@@ -61,12 +110,8 @@ exports.HAccordionContent = class HAccordionContent extends phoenix_light_lit_el
61
110
  accordionProps.opened ? this._transitionController.show(this._expand) : this._transitionController.hide(this._collapse);
62
111
  });
63
112
  this._accordionGroupProps.subscribe(this._accordionGroupPropsObserver);
64
- const mutationObserver = new MutationObserver(() => {
65
- this.style.height = 'auto';
66
- this._setOriginalHeightValue();
67
- this.hidden ? this._collapse() : this._expand();
68
- });
69
- mutationObserver.observe(this, { childList: true, subtree: true });
113
+ this._mutationObserver = new MutationObserver(this._handleMutation);
114
+ this._mutationObserver.observe(this, { childList: true, subtree: true });
70
115
  }
71
116
  _setHeight(height) {
72
117
  this.style.height = height;
@@ -76,9 +121,18 @@ exports.HAccordionContent = class HAccordionContent extends phoenix_light_lit_el
76
121
  this.setAttribute('labelledby', regionId);
77
122
  }
78
123
  disconnectedCallback() {
124
+ var _a, _b;
79
125
  super.disconnectedCallback();
80
- this._accordionGroupProps.unsubscribe(this._accordionGroupPropsObserver);
81
- window.removeEventListener('resize', this._setStylingOptions);
126
+ (_a = this._accordionGroupProps) === null || _a === void 0 ? void 0 : _a.unsubscribe(this._accordionGroupPropsObserver);
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);
132
+ }
133
+ if (this._mutationDebounceTimer !== null) {
134
+ window.clearTimeout(this._mutationDebounceTimer);
135
+ }
82
136
  }
83
137
  };
84
138
  tslib_es6.__decorate([
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;"}
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/model/select_option_mapper.js CHANGED
@@ -10,8 +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
- // Allow empty string for placeholder option, but not null/undefined
14
- if (value === null || value === undefined)
13
+ if (!value)
15
14
  throw new Error('h-option must contain a unique value');
16
15
  if (!optionContentText)
17
16
  throw new Error('h-options must contains a h-option-content element inside');
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
@@ -57,8 +57,7 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
57
57
  const $options = this._getOptions();
58
58
  this._$options = $options.reduce((acc, $option) => {
59
59
  const value = $option.getAttribute('value');
60
- // Allow empty string for placeholder option, but not null/undefined
61
- if (value === null || value === undefined)
60
+ if (!value)
62
61
  throw Error('Select option must hava a value');
63
62
  if (acc.has(value))
64
63
  throw Error('Select options must hava a unique values.');
@@ -218,7 +217,6 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
218
217
  }
219
218
  if (changedProperties.has('optionsList')) {
220
219
  this._updateOptions();
221
- this._addPlaceholderOptionIfNeeded();
222
220
  }
223
221
  if (this._$optionsList.value) {
224
222
  (_a = this.listBoxController) === null || _a === void 0 ? void 0 : _a.hostDisconnected();
@@ -267,7 +265,6 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
267
265
  this._selectedOptionsAriaObserver = new observer.Observer((selectedOptions) => this._updateLabelAria(selectedOptions));
268
266
  this._selectController.selectedOptions$.subscribe(this._selectedOptionsAriaObserver);
269
267
  this._updateOptions();
270
- this._addPlaceholderOptionIfNeeded();
271
268
  this._setupEvents();
272
269
  }
273
270
  attributeChangedCallback(name, _old, value) {
@@ -280,38 +277,6 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
280
277
  this.disabled ? this.classList.add(select_constants.SELECT_CSS_CLASSES.selectDisabled) : this.classList.remove(select_constants.SELECT_CSS_CLASSES.selectDisabled);
281
278
  }
282
279
  }
283
- _addPlaceholderOptionIfNeeded() {
284
- if (this.multiple)
285
- return;
286
- const selectedOptions = this._selectController.selectedOptions$.getValue();
287
- if (selectedOptions && selectedOptions.length > 0)
288
- return;
289
- const $existingPlaceholder = this.querySelector('h-option[data-placeholder]');
290
- if ($existingPlaceholder)
291
- return;
292
- const $placeholderOption = document.createElement('h-option');
293
- $placeholderOption.value = '';
294
- $placeholderOption.selected = true;
295
- $placeholderOption.setAttribute('data-placeholder', 'true');
296
- $placeholderOption.setAttribute('slot', select_constants.SELECT_SLOT_NAMES.content);
297
- $placeholderOption.setAttribute('disabled', 'true');
298
- const $optionContent = document.createElement(select_components_constatns.SELECT_RELATED_COMPONENTS_NAMES.optionContent);
299
- if (typeof this.$placeholder === 'string') {
300
- $optionContent.textContent = this.$placeholder;
301
- }
302
- else {
303
- $optionContent.innerHTML = this.$placeholder.innerHTML;
304
- }
305
- $placeholderOption.appendChild($optionContent);
306
- const firstOption = this.querySelector(select_components_constatns.SELECT_RELATED_COMPONENTS_NAMES.option);
307
- if (firstOption) {
308
- this.insertBefore($placeholderOption, firstOption);
309
- }
310
- else {
311
- this.appendChild($placeholderOption);
312
- }
313
- this._updateOptions();
314
- }
315
280
  _setupEvents() {
316
281
  this.addEventListener(select_constants.SELECT_EVENT_NAMES.deselectOption, this._handleOptionDeselect);
317
282
  this.addEventListener(select_components_constatns.SELECT_CLOSE_BTN_EVENT_NAMES.close, this._closeSelect);
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;"}
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;"}
package/build/cjs/packages/phoenix/src/controllers/visibility_controller/visibility_controller.js CHANGED
@@ -10,17 +10,21 @@ var _VisibilityController_host;
10
10
  class VisibilityController {
11
11
  constructor(host) {
12
12
  _VisibilityController_host.set(this, void 0);
13
- this._handleResize = debounce['default'](this._setVisibilityValue, 100);
13
+ this._handleResize = debounce['default'](() => {
14
+ this._setVisibilityValue();
15
+ }, 100);
14
16
  tslib_es6.__classPrivateFieldSet(this, _VisibilityController_host, host, "f");
15
17
  tslib_es6.__classPrivateFieldGet(this, _VisibilityController_host, "f").addController(this);
16
18
  }
17
19
  hostConnected() {
18
- this._setVisibilityValue();
19
- this.initialVisibilityState = this._isVisibleBasedOnCssStyle();
20
+ const isVisibleBasedOnCssStyle = this._isVisibleBasedOnCssStyle();
21
+ this.initialVisibilityState = isVisibleBasedOnCssStyle;
22
+ const isVisible = isVisibleBasedOnCssStyle && !tslib_es6.__classPrivateFieldGet(this, _VisibilityController_host, "f").hasAttribute('hidden');
23
+ isVisible ? this.show() : this.hide();
20
24
  tslib_es6.__classPrivateFieldGet(this, _VisibilityController_host, "f").addEventListener('resize', this._handleResize);
21
25
  }
22
26
  _setVisibilityValue() {
23
- const isVisible = this._isVisibleBasedOnCssStyle() && !tslib_es6.__classPrivateFieldGet(this, _VisibilityController_host, "f").getAttribute('hidden');
27
+ const isVisible = this._isVisibleBasedOnCssStyle() && !tslib_es6.__classPrivateFieldGet(this, _VisibilityController_host, "f").hasAttribute('hidden');
24
28
  isVisible ? this.show() : this.hide();
25
29
  }
26
30
  _isVisibleBasedOnCssStyle() {
@@ -29,10 +33,16 @@ class VisibilityController {
29
33
  }
30
34
  hide() {
31
35
  this.isVisible = false;
36
+ if (tslib_es6.__classPrivateFieldGet(this, _VisibilityController_host, "f").hasAttribute('hidden')) {
37
+ return;
38
+ }
32
39
  tslib_es6.__classPrivateFieldGet(this, _VisibilityController_host, "f").setAttribute('hidden', '');
33
40
  }
34
41
  show() {
35
42
  this.isVisible = true;
43
+ if (!tslib_es6.__classPrivateFieldGet(this, _VisibilityController_host, "f").hasAttribute('hidden')) {
44
+ return;
45
+ }
36
46
  tslib_es6.__classPrivateFieldGet(this, _VisibilityController_host, "f").removeAttribute('hidden');
37
47
  }
38
48
  hostDisconnected() {
package/build/cjs/packages/phoenix/src/controllers/visibility_controller/visibility_controller.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,uBAAuB,4CAAgD;AACvE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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,uBAAuB,4CAAgD;AACvE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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
@@ -7,14 +7,20 @@ export declare class HAccordionContent extends PhoenixLightLitElement {
7
7
  private _accordionGroupProps;
8
8
  private _accordionGroupPropsObserver;
9
9
  private _originalHeight;
10
- private _transitionDuration;
10
+ private _resizeDebounceTimer;
11
+ private _mutationDebounceTimer;
12
+ private _mutationObserver;
13
+ private _boundHandleTransitionEnd;
11
14
  constructor();
12
15
  connectedCallback(): void;
13
16
  firstUpdated(props: PropertyValues): void;
17
+ private _handleResize;
14
18
  private _setStylingOptions;
15
19
  private _subscribeObserver;
20
+ private _handleMutation;
16
21
  private _setOriginalHeightValue;
17
22
  private _expand;
23
+ private _handleTransitionEnd;
18
24
  private _collapse;
19
25
  private _setHeight;
20
26
  private _setAttributes;
package/build/esm/packages/phoenix/src/components/accordion/accordion_content.js CHANGED
@@ -8,43 +8,92 @@ import { ContextConsumerController } from '../../core/context/context_consumer_c
8
8
  import { ACCORDION_CONTEXTS } from './accordion_constants.js';
9
9
  import { TransitionController } from '../../controllers/transition_controller/transition_controller.js';
10
10
 
11
+ const RESIZE_DEBOUNCE_MS = 150;
12
+ const MUTATION_DEBOUNCE_MS = 100;
11
13
  let HAccordionContent = class HAccordionContent extends PhoenixLightLitElement {
12
14
  constructor() {
13
15
  super();
14
16
  this.transitionName = 'accordion-toggle';
17
+ this._resizeDebounceTimer = null;
18
+ this._mutationDebounceTimer = null;
19
+ this._mutationObserver = null;
20
+ this._handleResize = () => {
21
+ if (this._resizeDebounceTimer !== null) {
22
+ window.cancelAnimationFrame(this._resizeDebounceTimer);
23
+ }
24
+ this._resizeDebounceTimer = window.requestAnimationFrame(() => {
25
+ setTimeout(() => {
26
+ this._setStylingOptions();
27
+ }, RESIZE_DEBOUNCE_MS);
28
+ });
29
+ };
15
30
  this._setStylingOptions = () => {
16
- this.style.setProperty('display', 'block', 'important');
17
- this.style.height = 'auto';
18
- this._setOriginalHeightValue();
19
- this.style.display = '';
20
- this.style.height = this._originalHeight;
31
+ requestAnimationFrame(() => {
32
+ const previousDisplay = this.style.display;
33
+ this.style.display = 'block';
34
+ this.style.height = 'auto';
35
+ requestAnimationFrame(() => {
36
+ this._setOriginalHeightValue();
37
+ this.style.display = previousDisplay;
38
+ this.style.height = this.hidden ? '0px' : this._originalHeight;
39
+ });
40
+ });
41
+ };
42
+ this._handleMutation = () => {
43
+ if (this._mutationDebounceTimer !== null) {
44
+ window.clearTimeout(this._mutationDebounceTimer);
45
+ }
46
+ this._mutationDebounceTimer = window.setTimeout(() => {
47
+ requestAnimationFrame(() => {
48
+ this.style.height = 'auto';
49
+ requestAnimationFrame(() => {
50
+ this._setOriginalHeightValue();
51
+ if (this.hidden) {
52
+ this.style.height = '0px';
53
+ }
54
+ else {
55
+ this.style.height = this._originalHeight;
56
+ }
57
+ });
58
+ });
59
+ }, MUTATION_DEBOUNCE_MS);
21
60
  };
22
61
  this._setOriginalHeightValue = () => {
23
62
  const newHeight = this.getBoundingClientRect().height;
24
- if (newHeight !== 0 || this.children.length === 0)
63
+ if (newHeight !== 0 || this.children.length === 0) {
25
64
  this._originalHeight = `${newHeight}px`;
65
+ }
26
66
  };
27
67
  this._expand = () => {
28
68
  this._setHeight(this._originalHeight);
29
- setTimeout(() => {
69
+ };
70
+ this._handleTransitionEnd = (e) => {
71
+ if (e.propertyName !== 'height' || e.target !== this) {
72
+ return;
73
+ }
74
+ if (!this.hidden && this.style.height !== '0px') {
30
75
  this.style.height = 'auto';
31
- }, this._transitionDuration);
76
+ }
32
77
  };
33
78
  this._collapse = () => {
34
- this._setHeight(this._originalHeight);
79
+ const currentHeight = this.getBoundingClientRect().height;
80
+ this._setHeight(`${currentHeight}px`);
35
81
  requestAnimationFrame(() => {
36
- this._setHeight('0px');
82
+ requestAnimationFrame(() => {
83
+ this._setHeight('0px');
84
+ });
37
85
  });
38
86
  };
39
87
  this.setAttribute('role', 'region');
88
+ this._boundHandleTransitionEnd = this._handleTransitionEnd.bind(this);
40
89
  }
41
90
  connectedCallback() {
42
91
  super.connectedCallback();
43
92
  this._contextConsumer = new ContextConsumerController(this);
44
93
  this._transitionController = new TransitionController(this, this.transitionName);
45
94
  this._subscribeObserver();
46
- window.addEventListener('resize', this._setStylingOptions);
47
- this._transitionDuration = parseFloat(getComputedStyle(this).transitionDuration) * 1000;
95
+ window.addEventListener('resize', this._handleResize, { passive: true });
96
+ this.addEventListener('transitionend', this._boundHandleTransitionEnd);
48
97
  }
49
98
  firstUpdated(props) {
50
99
  super.firstUpdated(props);
@@ -57,12 +106,8 @@ let HAccordionContent = class HAccordionContent extends PhoenixLightLitElement {
57
106
  accordionProps.opened ? this._transitionController.show(this._expand) : this._transitionController.hide(this._collapse);
58
107
  });
59
108
  this._accordionGroupProps.subscribe(this._accordionGroupPropsObserver);
60
- const mutationObserver = new MutationObserver(() => {
61
- this.style.height = 'auto';
62
- this._setOriginalHeightValue();
63
- this.hidden ? this._collapse() : this._expand();
64
- });
65
- mutationObserver.observe(this, { childList: true, subtree: true });
109
+ this._mutationObserver = new MutationObserver(this._handleMutation);
110
+ this._mutationObserver.observe(this, { childList: true, subtree: true });
66
111
  }
67
112
  _setHeight(height) {
68
113
  this.style.height = height;
@@ -72,9 +117,18 @@ let HAccordionContent = class HAccordionContent extends PhoenixLightLitElement {
72
117
  this.setAttribute('labelledby', regionId);
73
118
  }
74
119
  disconnectedCallback() {
120
+ var _a, _b;
75
121
  super.disconnectedCallback();
76
- this._accordionGroupProps.unsubscribe(this._accordionGroupPropsObserver);
77
- window.removeEventListener('resize', this._setStylingOptions);
122
+ (_a = this._accordionGroupProps) === null || _a === void 0 ? void 0 : _a.unsubscribe(this._accordionGroupPropsObserver);
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);
128
+ }
129
+ if (this._mutationDebounceTimer !== null) {
130
+ window.clearTimeout(this._mutationDebounceTimer);
131
+ }
78
132
  }
79
133
  };
80
134
  __decorate([
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;"}
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/model/select_option_mapper.js CHANGED
@@ -6,8 +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
- // Allow empty string for placeholder option, but not null/undefined
10
- if (value === null || value === undefined)
9
+ if (!value)
11
10
  throw new Error('h-option must contain a unique value');
12
11
  if (!optionContentText)
13
12
  throw new Error('h-options must contains a h-option-content element inside');
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/select.d.ts CHANGED
@@ -53,7 +53,6 @@ export declare class HSelect extends PhoenixLightLitElement {
53
53
  attributeChangedCallback(name: string, _old: string | null, value: string | null): void;
54
54
  private _updateOptions;
55
55
  private _getOptions;
56
- private _addPlaceholderOptionIfNeeded;
57
56
  private _setupEvents;
58
57
  private _handleOptionDeselect;
59
58
  private _updateOptionsView;
package/build/esm/packages/phoenix/src/components/form/select/select.js CHANGED
@@ -53,8 +53,7 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
53
53
  const $options = this._getOptions();
54
54
  this._$options = $options.reduce((acc, $option) => {
55
55
  const value = $option.getAttribute('value');
56
- // Allow empty string for placeholder option, but not null/undefined
57
- if (value === null || value === undefined)
56
+ if (!value)
58
57
  throw Error('Select option must hava a value');
59
58
  if (acc.has(value))
60
59
  throw Error('Select options must hava a unique values.');
@@ -214,7 +213,6 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
214
213
  }
215
214
  if (changedProperties.has('optionsList')) {
216
215
  this._updateOptions();
217
- this._addPlaceholderOptionIfNeeded();
218
216
  }
219
217
  if (this._$optionsList.value) {
220
218
  (_a = this.listBoxController) === null || _a === void 0 ? void 0 : _a.hostDisconnected();
@@ -263,7 +261,6 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
263
261
  this._selectedOptionsAriaObserver = new Observer((selectedOptions) => this._updateLabelAria(selectedOptions));
264
262
  this._selectController.selectedOptions$.subscribe(this._selectedOptionsAriaObserver);
265
263
  this._updateOptions();
266
- this._addPlaceholderOptionIfNeeded();
267
264
  this._setupEvents();
268
265
  }
269
266
  attributeChangedCallback(name, _old, value) {
@@ -276,38 +273,6 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
276
273
  this.disabled ? this.classList.add(SELECT_CSS_CLASSES.selectDisabled) : this.classList.remove(SELECT_CSS_CLASSES.selectDisabled);
277
274
  }
278
275
  }
279
- _addPlaceholderOptionIfNeeded() {
280
- if (this.multiple)
281
- return;
282
- const selectedOptions = this._selectController.selectedOptions$.getValue();
283
- if (selectedOptions && selectedOptions.length > 0)
284
- return;
285
- const $existingPlaceholder = this.querySelector('h-option[data-placeholder]');
286
- if ($existingPlaceholder)
287
- return;
288
- const $placeholderOption = document.createElement('h-option');
289
- $placeholderOption.value = '';
290
- $placeholderOption.selected = true;
291
- $placeholderOption.setAttribute('data-placeholder', 'true');
292
- $placeholderOption.setAttribute('slot', SELECT_SLOT_NAMES.content);
293
- $placeholderOption.setAttribute('disabled', 'true');
294
- const $optionContent = document.createElement(SELECT_RELATED_COMPONENTS_NAMES.optionContent);
295
- if (typeof this.$placeholder === 'string') {
296
- $optionContent.textContent = this.$placeholder;
297
- }
298
- else {
299
- $optionContent.innerHTML = this.$placeholder.innerHTML;
300
- }
301
- $placeholderOption.appendChild($optionContent);
302
- const firstOption = this.querySelector(SELECT_RELATED_COMPONENTS_NAMES.option);
303
- if (firstOption) {
304
- this.insertBefore($placeholderOption, firstOption);
305
- }
306
- else {
307
- this.appendChild($placeholderOption);
308
- }
309
- this._updateOptions();
310
- }
311
276
  _setupEvents() {
312
277
  this.addEventListener(SELECT_EVENT_NAMES.deselectOption, this._handleOptionDeselect);
313
278
  this.addEventListener(SELECT_CLOSE_BTN_EVENT_NAMES.close, this._closeSelect);
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;"}
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;"}
package/build/esm/packages/phoenix/src/controllers/visibility_controller/visibility_controller.js CHANGED
@@ -6,17 +6,21 @@ var _VisibilityController_host;
6
6
  class VisibilityController {
7
7
  constructor(host) {
8
8
  _VisibilityController_host.set(this, void 0);
9
- this._handleResize = debounce_1(this._setVisibilityValue, 100);
9
+ this._handleResize = debounce_1(() => {
10
+ this._setVisibilityValue();
11
+ }, 100);
10
12
  __classPrivateFieldSet(this, _VisibilityController_host, host, "f");
11
13
  __classPrivateFieldGet(this, _VisibilityController_host, "f").addController(this);
12
14
  }
13
15
  hostConnected() {
14
- this._setVisibilityValue();
15
- this.initialVisibilityState = this._isVisibleBasedOnCssStyle();
16
+ const isVisibleBasedOnCssStyle = this._isVisibleBasedOnCssStyle();
17
+ this.initialVisibilityState = isVisibleBasedOnCssStyle;
18
+ const isVisible = isVisibleBasedOnCssStyle && !__classPrivateFieldGet(this, _VisibilityController_host, "f").hasAttribute('hidden');
19
+ isVisible ? this.show() : this.hide();
16
20
  __classPrivateFieldGet(this, _VisibilityController_host, "f").addEventListener('resize', this._handleResize);
17
21
  }
18
22
  _setVisibilityValue() {
19
- const isVisible = this._isVisibleBasedOnCssStyle() && !__classPrivateFieldGet(this, _VisibilityController_host, "f").getAttribute('hidden');
23
+ const isVisible = this._isVisibleBasedOnCssStyle() && !__classPrivateFieldGet(this, _VisibilityController_host, "f").hasAttribute('hidden');
20
24
  isVisible ? this.show() : this.hide();
21
25
  }
22
26
  _isVisibleBasedOnCssStyle() {
@@ -25,10 +29,16 @@ class VisibilityController {
25
29
  }
26
30
  hide() {
27
31
  this.isVisible = false;
32
+ if (__classPrivateFieldGet(this, _VisibilityController_host, "f").hasAttribute('hidden')) {
33
+ return;
34
+ }
28
35
  __classPrivateFieldGet(this, _VisibilityController_host, "f").setAttribute('hidden', '');
29
36
  }
30
37
  show() {
31
38
  this.isVisible = true;
39
+ if (!__classPrivateFieldGet(this, _VisibilityController_host, "f").hasAttribute('hidden')) {
40
+ return;
41
+ }
32
42
  __classPrivateFieldGet(this, _VisibilityController_host, "f").removeAttribute('hidden');
33
43
  }
34
44
  hostDisconnected() {
package/build/esm/packages/phoenix/src/controllers/visibility_controller/visibility_controller.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,+DAA+D,4CAAgD;AAC/G;AACA,uBAAuB,4CAAgD;AACvE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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,+DAA+D,4CAAgD;AAC/G;AACA,uBAAuB,4CAAgD;AACvE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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.2-9",
5
+ "version": "1.18.3",
6
6
  "description": "phoenix design system",
7
7
  "author": "zefirek",
8
8
  "license": "MIT",