@shoper/phoenix_design_system 1.18.11-15 → 1.18.11-16

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/build/cjs/packages/phoenix/src/components/accordion/accordion_content.js +75 -91
  2. package/build/cjs/packages/phoenix/src/components/accordion/accordion_content.js.map +1 -1
  3. package/build/esm/packages/phoenix/src/components/accordion/accordion_content.d.ts +7 -8
  4. package/build/esm/packages/phoenix/src/components/accordion/accordion_content.js +75 -91
  5. package/build/esm/packages/phoenix/src/components/accordion/accordion_content.js.map +1 -1
  6. package/package.json +1 -1
package/build/cjs/packages/phoenix/src/components/accordion/accordion_content.js CHANGED
@@ -18,31 +18,10 @@ 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;
21
+ this.isDevAccordionHeightFixFlagEnabled = false;
24
22
  this._resizeDebounceTimer = null;
25
23
  this._mutationDebounceTimer = null;
26
24
  this._mutationObserver = null;
27
- this._handleResizeObserver = () => {
28
- if (this._isTransitioning)
29
- return;
30
- if (this.hidden || this.style.height === '0px')
31
- return;
32
- this._cacheScrollHeight();
33
- };
34
- this._measureOriginalHeight = () => {
35
- const previousDisplay = this.style.display;
36
- this.style.setProperty('display', 'block', 'important');
37
- this._cacheScrollHeight();
38
- this.style.display = previousDisplay;
39
- };
40
- this._cacheScrollHeight = () => {
41
- const newHeight = this.scrollHeight;
42
- if (newHeight !== 0 || this.children.length === 0) {
43
- this._originalHeight = `${newHeight}px`;
44
- }
45
- };
46
25
  this._handleResize = () => {
47
26
  if (this._resizeDebounceTimer !== null) {
48
27
  window.cancelAnimationFrame(this._resizeDebounceTimer);
@@ -65,95 +44,74 @@ exports.HAccordionContent = class HAccordionContent extends phoenix_light_lit_el
65
44
  });
66
45
  });
67
46
  };
68
- this._setOriginalHeightValue = () => {
69
- const newHeight = this.getBoundingClientRect().height;
70
- if (newHeight !== 0 || this.children.length === 0) {
71
- this._originalHeight = `${newHeight}px`;
72
- }
73
- };
74
47
  this._handleMutation = () => {
75
48
  if (this._mutationDebounceTimer !== null) {
76
49
  window.clearTimeout(this._mutationDebounceTimer);
77
50
  }
78
51
  this._mutationDebounceTimer = window.setTimeout(() => {
79
- requestAnimationFrame(() => {
80
- this.style.height = 'auto';
52
+ if (this.isDevAccordionHeightFixFlagEnabled) {
53
+ this._forceHeightRecalculation();
54
+ }
55
+ else {
81
56
  requestAnimationFrame(() => {
82
- this._setOriginalHeightValue();
83
- if (this.hidden) {
84
- this.style.height = '0px';
85
- }
86
- else {
87
- this.style.height = this._originalHeight;
88
- }
57
+ this.style.height = 'auto';
58
+ requestAnimationFrame(() => {
59
+ this._setOriginalHeightValue();
60
+ if (this.hidden) {
61
+ this.style.height = '0px';
62
+ }
63
+ else {
64
+ this.style.height = this._originalHeight;
65
+ }
66
+ });
89
67
  });
90
- });
68
+ }
91
69
  }, MUTATION_DEBOUNCE_MS);
92
70
  };
93
- this._expand = () => {
94
- if (this.isDevAccordionOptimizationFlagEnabled) {
95
- this._cacheScrollHeight();
96
- this._isTransitioning = true;
71
+ this._setOriginalHeightValue = () => {
72
+ const newHeight = this.getBoundingClientRect().height;
73
+ if (newHeight !== 0 || this.children.length === 0) {
74
+ this._originalHeight = `${newHeight}px`;
97
75
  }
76
+ };
77
+ this._expand = () => {
98
78
  this._setHeight(this._originalHeight);
99
79
  };
100
80
  this._handleTransitionEnd = (e) => {
101
81
  if (e.propertyName !== 'height' || e.target !== this) {
102
82
  return;
103
83
  }
104
- if (this.isDevAccordionOptimizationFlagEnabled) {
105
- this._isTransitioning = false;
106
- }
107
84
  if (!this.hidden && this.style.height !== '0px') {
108
85
  this.style.height = 'auto';
109
86
  }
110
87
  };
111
88
  this._collapse = () => {
112
- if (this.isDevAccordionOptimizationFlagEnabled) {
113
- this._isTransitioning = true;
114
- }
115
89
  const currentHeight = this.getBoundingClientRect().height;
116
90
  this._setHeight(`${currentHeight}px`);
117
- if (this.isDevAccordionOptimizationFlagEnabled) {
118
- void this.offsetHeight;
91
+ requestAnimationFrame(() => {
119
92
  requestAnimationFrame(() => {
120
93
  this._setHeight('0px');
121
94
  });
122
- }
123
- else {
124
- requestAnimationFrame(() => {
125
- requestAnimationFrame(() => {
126
- this._setHeight('0px');
127
- });
128
- });
129
- }
95
+ });
130
96
  };
131
97
  this.setAttribute('role', 'region');
132
98
  this._boundHandleTransitionEnd = this._handleTransitionEnd.bind(this);
99
+ this._boundHandleImageLoad = this._handleImageLoad.bind(this);
133
100
  }
134
101
  connectedCallback() {
135
102
  super.connectedCallback();
136
103
  this._contextConsumer = new context_consumer_controller.ContextConsumerController(this);
137
104
  this._transitionController = new transition_controller.TransitionController(this, this.transitionName);
138
105
  this._subscribeObserver();
139
- if (this.isDevAccordionOptimizationFlagEnabled) {
140
- this._resizeObserver = new ResizeObserver(this._handleResizeObserver);
141
- this._resizeObserver.observe(this);
142
- }
143
- else {
144
- window.addEventListener('resize', this._handleResize, { passive: true });
145
- }
106
+ window.addEventListener('resize', this._handleResize, { passive: true });
146
107
  this.addEventListener('transitionend', this._boundHandleTransitionEnd);
108
+ if (this.isDevAccordionHeightFixFlagEnabled) {
109
+ this._setupImageLoadListeners();
110
+ }
147
111
  }
148
112
  firstUpdated(props) {
149
113
  super.firstUpdated(props);
150
- if (this.isDevAccordionOptimizationFlagEnabled) {
151
- this._measureOriginalHeight();
152
- this.style.height = this.hidden ? '0px' : this._originalHeight;
153
- }
154
- else {
155
- this._setStylingOptions();
156
- }
114
+ this._setStylingOptions();
157
115
  }
158
116
  async _subscribeObserver() {
159
117
  this._accordionGroupProps = await this._contextConsumer.consumeAsync(accordion_constants.ACCORDION_CONTEXTS.accordionGroupProps);
@@ -162,10 +120,34 @@ exports.HAccordionContent = class HAccordionContent extends phoenix_light_lit_el
162
120
  accordionProps.opened ? this._transitionController.show(this._expand) : this._transitionController.hide(this._collapse);
163
121
  });
164
122
  this._accordionGroupProps.subscribe(this._accordionGroupPropsObserver);
165
- if (!this.isDevAccordionOptimizationFlagEnabled) {
166
- this._mutationObserver = new MutationObserver(this._handleMutation);
167
- this._mutationObserver.observe(this, { childList: true, subtree: true });
168
- }
123
+ this._mutationObserver = new MutationObserver(this._handleMutation);
124
+ this._mutationObserver.observe(this, { childList: true, subtree: true });
125
+ }
126
+ _forceHeightRecalculation() {
127
+ requestAnimationFrame(() => {
128
+ this.style.height = 'auto';
129
+ requestAnimationFrame(() => {
130
+ this._setOriginalHeightValue();
131
+ if (this.hidden) {
132
+ this.style.height = '0px';
133
+ }
134
+ else {
135
+ this.style.height = this._originalHeight;
136
+ }
137
+ });
138
+ });
139
+ }
140
+ _setupImageLoadListeners() {
141
+ const images = this.querySelectorAll('img');
142
+ images.forEach((img) => {
143
+ if (!img.complete) {
144
+ img.addEventListener('load', this._boundHandleImageLoad, { once: true });
145
+ img.addEventListener('error', this._boundHandleImageLoad, { once: true });
146
+ }
147
+ });
148
+ }
149
+ _handleImageLoad() {
150
+ this._forceHeightRecalculation();
169
151
  }
170
152
  _setHeight(height) {
171
153
  this.style.height = height;
@@ -175,23 +157,25 @@ exports.HAccordionContent = class HAccordionContent extends phoenix_light_lit_el
175
157
  this.setAttribute('labelledby', regionId);
176
158
  }
177
159
  disconnectedCallback() {
178
- var _a, _b, _c;
160
+ var _a, _b;
179
161
  super.disconnectedCallback();
180
162
  (_a = this._accordionGroupProps) === null || _a === void 0 ? void 0 : _a.unsubscribe(this._accordionGroupPropsObserver);
181
- if (this.isDevAccordionOptimizationFlagEnabled) {
182
- (_b = this._resizeObserver) === null || _b === void 0 ? void 0 : _b.disconnect();
183
- }
184
- else {
185
- (_c = this._mutationObserver) === null || _c === void 0 ? void 0 : _c.disconnect();
186
- window.removeEventListener('resize', this._handleResize);
187
- if (this._resizeDebounceTimer !== null) {
188
- window.cancelAnimationFrame(this._resizeDebounceTimer);
189
- }
190
- if (this._mutationDebounceTimer !== null) {
191
- window.clearTimeout(this._mutationDebounceTimer);
192
- }
163
+ (_b = this._mutationObserver) === null || _b === void 0 ? void 0 : _b.disconnect();
164
+ if (this.isDevAccordionHeightFixFlagEnabled) {
165
+ const images = this.querySelectorAll('img');
166
+ images.forEach((img) => {
167
+ img.removeEventListener('load', this._boundHandleImageLoad);
168
+ img.removeEventListener('error', this._boundHandleImageLoad);
169
+ });
193
170
  }
171
+ window.removeEventListener('resize', this._handleResize);
194
172
  this.removeEventListener('transitionend', this._boundHandleTransitionEnd);
173
+ if (this._resizeDebounceTimer !== null) {
174
+ window.cancelAnimationFrame(this._resizeDebounceTimer);
175
+ }
176
+ if (this._mutationDebounceTimer !== null) {
177
+ window.clearTimeout(this._mutationDebounceTimer);
178
+ }
195
179
  }
196
180
  };
197
181
  tslib_es6.__decorate([
@@ -199,9 +183,9 @@ tslib_es6.__decorate([
199
183
  tslib_es6.__metadata("design:type", Object)
200
184
  ], exports.HAccordionContent.prototype, "transitionName", void 0);
201
185
  tslib_es6.__decorate([
202
- decorators.property({ type: Boolean, attribute: 'is-dev-accordion-optimization-flag-enabled' }),
186
+ decorators.property({ type: Boolean, attribute: 'dev_accordion_height_fix' }),
203
187
  tslib_es6.__metadata("design:type", Boolean)
204
- ], exports.HAccordionContent.prototype, "isDevAccordionOptimizationFlagEnabled", void 0);
188
+ ], exports.HAccordionContent.prototype, "isDevAccordionHeightFixFlagEnabled", void 0);
205
189
  exports.HAccordionContent = tslib_es6.__decorate([
206
190
  phoenix_custom_element.phoenixCustomElement('h-accordion-content'),
207
191
  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;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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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,29 +2,28 @@ 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;
5
+ isDevAccordionHeightFixFlagEnabled: boolean;
6
6
  private _transitionController;
7
7
  private _contextConsumer;
8
8
  private _accordionGroupProps;
9
9
  private _accordionGroupPropsObserver;
10
10
  private _originalHeight;
11
- private _resizeObserver;
12
- private _isTransitioning;
13
11
  private _resizeDebounceTimer;
14
12
  private _mutationDebounceTimer;
15
13
  private _mutationObserver;
16
14
  private _boundHandleTransitionEnd;
15
+ private _boundHandleImageLoad;
17
16
  constructor();
18
17
  connectedCallback(): void;
19
18
  firstUpdated(props: PropertyValues): void;
20
- private _handleResizeObserver;
21
- private _measureOriginalHeight;
22
- private _cacheScrollHeight;
23
19
  private _handleResize;
24
20
  private _setStylingOptions;
25
- private _setOriginalHeightValue;
26
- private _handleMutation;
27
21
  private _subscribeObserver;
22
+ private _handleMutation;
23
+ private _forceHeightRecalculation;
24
+ private _setupImageLoadListeners;
25
+ private _handleImageLoad;
26
+ private _setOriginalHeightValue;
28
27
  private _expand;
29
28
  private _handleTransitionEnd;
30
29
  private _collapse;
package/build/esm/packages/phoenix/src/components/accordion/accordion_content.js CHANGED
@@ -14,31 +14,10 @@ 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;
17
+ this.isDevAccordionHeightFixFlagEnabled = false;
20
18
  this._resizeDebounceTimer = null;
21
19
  this._mutationDebounceTimer = null;
22
20
  this._mutationObserver = null;
23
- this._handleResizeObserver = () => {
24
- if (this._isTransitioning)
25
- return;
26
- if (this.hidden || this.style.height === '0px')
27
- return;
28
- this._cacheScrollHeight();
29
- };
30
- this._measureOriginalHeight = () => {
31
- const previousDisplay = this.style.display;
32
- this.style.setProperty('display', 'block', 'important');
33
- this._cacheScrollHeight();
34
- this.style.display = previousDisplay;
35
- };
36
- this._cacheScrollHeight = () => {
37
- const newHeight = this.scrollHeight;
38
- if (newHeight !== 0 || this.children.length === 0) {
39
- this._originalHeight = `${newHeight}px`;
40
- }
41
- };
42
21
  this._handleResize = () => {
43
22
  if (this._resizeDebounceTimer !== null) {
44
23
  window.cancelAnimationFrame(this._resizeDebounceTimer);
@@ -61,95 +40,74 @@ let HAccordionContent = class HAccordionContent extends PhoenixLightLitElement {
61
40
  });
62
41
  });
63
42
  };
64
- this._setOriginalHeightValue = () => {
65
- const newHeight = this.getBoundingClientRect().height;
66
- if (newHeight !== 0 || this.children.length === 0) {
67
- this._originalHeight = `${newHeight}px`;
68
- }
69
- };
70
43
  this._handleMutation = () => {
71
44
  if (this._mutationDebounceTimer !== null) {
72
45
  window.clearTimeout(this._mutationDebounceTimer);
73
46
  }
74
47
  this._mutationDebounceTimer = window.setTimeout(() => {
75
- requestAnimationFrame(() => {
76
- this.style.height = 'auto';
48
+ if (this.isDevAccordionHeightFixFlagEnabled) {
49
+ this._forceHeightRecalculation();
50
+ }
51
+ else {
77
52
  requestAnimationFrame(() => {
78
- this._setOriginalHeightValue();
79
- if (this.hidden) {
80
- this.style.height = '0px';
81
- }
82
- else {
83
- this.style.height = this._originalHeight;
84
- }
53
+ this.style.height = 'auto';
54
+ requestAnimationFrame(() => {
55
+ this._setOriginalHeightValue();
56
+ if (this.hidden) {
57
+ this.style.height = '0px';
58
+ }
59
+ else {
60
+ this.style.height = this._originalHeight;
61
+ }
62
+ });
85
63
  });
86
- });
64
+ }
87
65
  }, MUTATION_DEBOUNCE_MS);
88
66
  };
89
- this._expand = () => {
90
- if (this.isDevAccordionOptimizationFlagEnabled) {
91
- this._cacheScrollHeight();
92
- this._isTransitioning = true;
67
+ this._setOriginalHeightValue = () => {
68
+ const newHeight = this.getBoundingClientRect().height;
69
+ if (newHeight !== 0 || this.children.length === 0) {
70
+ this._originalHeight = `${newHeight}px`;
93
71
  }
72
+ };
73
+ this._expand = () => {
94
74
  this._setHeight(this._originalHeight);
95
75
  };
96
76
  this._handleTransitionEnd = (e) => {
97
77
  if (e.propertyName !== 'height' || e.target !== this) {
98
78
  return;
99
79
  }
100
- if (this.isDevAccordionOptimizationFlagEnabled) {
101
- this._isTransitioning = false;
102
- }
103
80
  if (!this.hidden && this.style.height !== '0px') {
104
81
  this.style.height = 'auto';
105
82
  }
106
83
  };
107
84
  this._collapse = () => {
108
- if (this.isDevAccordionOptimizationFlagEnabled) {
109
- this._isTransitioning = true;
110
- }
111
85
  const currentHeight = this.getBoundingClientRect().height;
112
86
  this._setHeight(`${currentHeight}px`);
113
- if (this.isDevAccordionOptimizationFlagEnabled) {
114
- void this.offsetHeight;
87
+ requestAnimationFrame(() => {
115
88
  requestAnimationFrame(() => {
116
89
  this._setHeight('0px');
117
90
  });
118
- }
119
- else {
120
- requestAnimationFrame(() => {
121
- requestAnimationFrame(() => {
122
- this._setHeight('0px');
123
- });
124
- });
125
- }
91
+ });
126
92
  };
127
93
  this.setAttribute('role', 'region');
128
94
  this._boundHandleTransitionEnd = this._handleTransitionEnd.bind(this);
95
+ this._boundHandleImageLoad = this._handleImageLoad.bind(this);
129
96
  }
130
97
  connectedCallback() {
131
98
  super.connectedCallback();
132
99
  this._contextConsumer = new ContextConsumerController(this);
133
100
  this._transitionController = new TransitionController(this, this.transitionName);
134
101
  this._subscribeObserver();
135
- if (this.isDevAccordionOptimizationFlagEnabled) {
136
- this._resizeObserver = new ResizeObserver(this._handleResizeObserver);
137
- this._resizeObserver.observe(this);
138
- }
139
- else {
140
- window.addEventListener('resize', this._handleResize, { passive: true });
141
- }
102
+ window.addEventListener('resize', this._handleResize, { passive: true });
142
103
  this.addEventListener('transitionend', this._boundHandleTransitionEnd);
104
+ if (this.isDevAccordionHeightFixFlagEnabled) {
105
+ this._setupImageLoadListeners();
106
+ }
143
107
  }
144
108
  firstUpdated(props) {
145
109
  super.firstUpdated(props);
146
- if (this.isDevAccordionOptimizationFlagEnabled) {
147
- this._measureOriginalHeight();
148
- this.style.height = this.hidden ? '0px' : this._originalHeight;
149
- }
150
- else {
151
- this._setStylingOptions();
152
- }
110
+ this._setStylingOptions();
153
111
  }
154
112
  async _subscribeObserver() {
155
113
  this._accordionGroupProps = await this._contextConsumer.consumeAsync(ACCORDION_CONTEXTS.accordionGroupProps);
@@ -158,10 +116,34 @@ let HAccordionContent = class HAccordionContent extends PhoenixLightLitElement {
158
116
  accordionProps.opened ? this._transitionController.show(this._expand) : this._transitionController.hide(this._collapse);
159
117
  });
160
118
  this._accordionGroupProps.subscribe(this._accordionGroupPropsObserver);
161
- if (!this.isDevAccordionOptimizationFlagEnabled) {
162
- this._mutationObserver = new MutationObserver(this._handleMutation);
163
- this._mutationObserver.observe(this, { childList: true, subtree: true });
164
- }
119
+ this._mutationObserver = new MutationObserver(this._handleMutation);
120
+ this._mutationObserver.observe(this, { childList: true, subtree: true });
121
+ }
122
+ _forceHeightRecalculation() {
123
+ requestAnimationFrame(() => {
124
+ this.style.height = 'auto';
125
+ requestAnimationFrame(() => {
126
+ this._setOriginalHeightValue();
127
+ if (this.hidden) {
128
+ this.style.height = '0px';
129
+ }
130
+ else {
131
+ this.style.height = this._originalHeight;
132
+ }
133
+ });
134
+ });
135
+ }
136
+ _setupImageLoadListeners() {
137
+ const images = this.querySelectorAll('img');
138
+ images.forEach((img) => {
139
+ if (!img.complete) {
140
+ img.addEventListener('load', this._boundHandleImageLoad, { once: true });
141
+ img.addEventListener('error', this._boundHandleImageLoad, { once: true });
142
+ }
143
+ });
144
+ }
145
+ _handleImageLoad() {
146
+ this._forceHeightRecalculation();
165
147
  }
166
148
  _setHeight(height) {
167
149
  this.style.height = height;
@@ -171,23 +153,25 @@ let HAccordionContent = class HAccordionContent extends PhoenixLightLitElement {
171
153
  this.setAttribute('labelledby', regionId);
172
154
  }
173
155
  disconnectedCallback() {
174
- var _a, _b, _c;
156
+ var _a, _b;
175
157
  super.disconnectedCallback();
176
158
  (_a = this._accordionGroupProps) === null || _a === void 0 ? void 0 : _a.unsubscribe(this._accordionGroupPropsObserver);
177
- if (this.isDevAccordionOptimizationFlagEnabled) {
178
- (_b = this._resizeObserver) === null || _b === void 0 ? void 0 : _b.disconnect();
179
- }
180
- else {
181
- (_c = this._mutationObserver) === null || _c === void 0 ? void 0 : _c.disconnect();
182
- window.removeEventListener('resize', this._handleResize);
183
- if (this._resizeDebounceTimer !== null) {
184
- window.cancelAnimationFrame(this._resizeDebounceTimer);
185
- }
186
- if (this._mutationDebounceTimer !== null) {
187
- window.clearTimeout(this._mutationDebounceTimer);
188
- }
159
+ (_b = this._mutationObserver) === null || _b === void 0 ? void 0 : _b.disconnect();
160
+ if (this.isDevAccordionHeightFixFlagEnabled) {
161
+ const images = this.querySelectorAll('img');
162
+ images.forEach((img) => {
163
+ img.removeEventListener('load', this._boundHandleImageLoad);
164
+ img.removeEventListener('error', this._boundHandleImageLoad);
165
+ });
189
166
  }
167
+ window.removeEventListener('resize', this._handleResize);
190
168
  this.removeEventListener('transitionend', this._boundHandleTransitionEnd);
169
+ if (this._resizeDebounceTimer !== null) {
170
+ window.cancelAnimationFrame(this._resizeDebounceTimer);
171
+ }
172
+ if (this._mutationDebounceTimer !== null) {
173
+ window.clearTimeout(this._mutationDebounceTimer);
174
+ }
191
175
  }
192
176
  };
193
177
  __decorate([
@@ -195,9 +179,9 @@ __decorate([
195
179
  __metadata("design:type", Object)
196
180
  ], HAccordionContent.prototype, "transitionName", void 0);
197
181
  __decorate([
198
- property({ type: Boolean, attribute: 'is-dev-accordion-optimization-flag-enabled' }),
182
+ property({ type: Boolean, attribute: 'dev_accordion_height_fix' }),
199
183
  __metadata("design:type", Boolean)
200
- ], HAccordionContent.prototype, "isDevAccordionOptimizationFlagEnabled", void 0);
184
+ ], HAccordionContent.prototype, "isDevAccordionHeightFixFlagEnabled", void 0);
201
185
  HAccordionContent = __decorate([
202
186
  phoenixCustomElement('h-accordion-content'),
203
187
  __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;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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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.11-15",
5
+ "version": "1.18.11-16",
6
6
  "description": "phoenix design system",
7
7
  "author": "zefirek",
8
8
  "license": "MIT",