@shoper/phoenix_design_system 1.18.21 → 1.18.22

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 +113 -59
  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 -3
  4. package/build/esm/packages/phoenix/src/components/accordion/accordion_content.js +113 -59
  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,10 +18,24 @@ 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;
21
22
  this.isDevAccordionHeightFixFlagEnabled = false;
23
+ this._resizeObserver = null;
24
+ this._isTransitioning = false;
22
25
  this._resizeDebounceTimer = null;
23
26
  this._mutationDebounceTimer = null;
24
27
  this._mutationObserver = null;
28
+ this._handleResizeObserver = () => {
29
+ if (this._isTransitioning || this.hidden || this.style.height === '0px')
30
+ return;
31
+ this._setOriginalHeightValue(this.scrollHeight);
32
+ };
33
+ this._updateOriginalHeight = () => {
34
+ const previousDisplay = this.style.display;
35
+ this.style.setProperty('display', 'block', 'important');
36
+ this._setOriginalHeightValue(this.scrollHeight);
37
+ this.style.display = previousDisplay;
38
+ };
25
39
  this._handleResize = () => {
26
40
  if (this._resizeDebounceTimer !== null) {
27
41
  window.cancelAnimationFrame(this._resizeDebounceTimer);
@@ -38,61 +52,73 @@ exports.HAccordionContent = class HAccordionContent extends phoenix_light_lit_el
38
52
  this.style.setProperty('display', 'block', 'important');
39
53
  this.style.height = 'auto';
40
54
  requestAnimationFrame(() => {
41
- this._setOriginalHeightValue();
55
+ this._setOriginalHeightValue(this.getBoundingClientRect().height);
42
56
  this.style.display = previousDisplay;
43
57
  this.style.height = this.hidden ? '0px' : this._originalHeight;
44
58
  });
45
59
  });
46
60
  };
61
+ this._setOriginalHeightValue = (height) => {
62
+ if (height !== 0 || this.children.length === 0) {
63
+ this._originalHeight = `${height}px`;
64
+ }
65
+ };
47
66
  this._handleMutation = () => {
48
67
  if (this._mutationDebounceTimer !== null) {
49
68
  window.clearTimeout(this._mutationDebounceTimer);
50
69
  }
51
70
  this._mutationDebounceTimer = window.setTimeout(() => {
52
- if (this.isDevAccordionHeightFixFlagEnabled) {
53
- this._forceHeightRecalculation();
54
- }
55
- else {
71
+ requestAnimationFrame(() => {
72
+ this.style.height = 'auto';
56
73
  requestAnimationFrame(() => {
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
- });
74
+ this._setOriginalHeightValue(this.getBoundingClientRect().height);
75
+ if (this.hidden) {
76
+ this.style.height = '0px';
77
+ }
78
+ else {
79
+ this.style.height = this._originalHeight;
80
+ }
67
81
  });
68
- }
82
+ });
69
83
  }, MUTATION_DEBOUNCE_MS);
70
84
  };
71
- this._setOriginalHeightValue = () => {
72
- const newHeight = this.getBoundingClientRect().height;
73
- if (newHeight !== 0 || this.children.length === 0) {
74
- this._originalHeight = `${newHeight}px`;
75
- }
76
- };
77
85
  this._expand = () => {
86
+ if (this.isDevAccordionOptimizationFlagEnabled) {
87
+ this._setOriginalHeightValue(this.scrollHeight);
88
+ this._isTransitioning = true;
89
+ }
78
90
  this._setHeight(this._originalHeight);
79
91
  };
80
92
  this._handleTransitionEnd = (e) => {
81
93
  if (e.propertyName !== 'height' || e.target !== this) {
82
94
  return;
83
95
  }
96
+ if (this.isDevAccordionOptimizationFlagEnabled) {
97
+ this._isTransitioning = false;
98
+ }
84
99
  if (!this.hidden && this.style.height !== '0px') {
85
100
  this.style.height = 'auto';
86
101
  }
87
102
  };
88
103
  this._collapse = () => {
104
+ if (this.isDevAccordionOptimizationFlagEnabled) {
105
+ this._isTransitioning = true;
106
+ }
89
107
  const currentHeight = this.getBoundingClientRect().height;
90
108
  this._setHeight(`${currentHeight}px`);
91
- requestAnimationFrame(() => {
109
+ if (this.isDevAccordionOptimizationFlagEnabled) {
110
+ void this.offsetHeight;
92
111
  requestAnimationFrame(() => {
93
112
  this._setHeight('0px');
94
113
  });
95
- });
114
+ }
115
+ else {
116
+ requestAnimationFrame(() => {
117
+ requestAnimationFrame(() => {
118
+ this._setHeight('0px');
119
+ });
120
+ });
121
+ }
96
122
  };
97
123
  this.setAttribute('role', 'region');
98
124
  this._boundHandleTransitionEnd = this._handleTransitionEnd.bind(this);
@@ -103,7 +129,13 @@ exports.HAccordionContent = class HAccordionContent extends phoenix_light_lit_el
103
129
  this._contextConsumer = new context_consumer_controller.ContextConsumerController(this);
104
130
  this._transitionController = new transition_controller.TransitionController(this, this.transitionName);
105
131
  this._subscribeObserver();
106
- window.addEventListener('resize', this._handleResize, { passive: true });
132
+ if (this.isDevAccordionOptimizationFlagEnabled) {
133
+ this._resizeObserver = new ResizeObserver(this._handleResizeObserver);
134
+ this._resizeObserver.observe(this);
135
+ }
136
+ else {
137
+ window.addEventListener('resize', this._handleResize, { passive: true });
138
+ }
107
139
  this.addEventListener('transitionend', this._boundHandleTransitionEnd);
108
140
  if (this.isDevAccordionHeightFixFlagEnabled) {
109
141
  this._setupImageLoadListeners();
@@ -111,31 +143,13 @@ exports.HAccordionContent = class HAccordionContent extends phoenix_light_lit_el
111
143
  }
112
144
  firstUpdated(props) {
113
145
  super.firstUpdated(props);
114
- this._setStylingOptions();
115
- }
116
- async _subscribeObserver() {
117
- this._accordionGroupProps = await this._contextConsumer.consumeAsync(accordion_constants.ACCORDION_CONTEXTS.accordionGroupProps);
118
- this._accordionGroupPropsObserver = new observer.Observer((accordionProps) => {
119
- this._setAttributes(accordionProps);
120
- accordionProps.opened ? this._transitionController.show(this._expand) : this._transitionController.hide(this._collapse);
121
- });
122
- this._accordionGroupProps.subscribe(this._accordionGroupPropsObserver);
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
- });
146
+ if (this.isDevAccordionOptimizationFlagEnabled) {
147
+ this._updateOriginalHeight();
148
+ this.style.height = this.hidden ? '0px' : this._originalHeight;
149
+ }
150
+ else {
151
+ this._setStylingOptions();
152
+ }
139
153
  }
140
154
  _setupImageLoadListeners() {
141
155
  const images = this.querySelectorAll('img');
@@ -147,7 +161,37 @@ exports.HAccordionContent = class HAccordionContent extends phoenix_light_lit_el
147
161
  });
148
162
  }
149
163
  _handleImageLoad() {
150
- this._forceHeightRecalculation();
164
+ if (this.isDevAccordionOptimizationFlagEnabled) {
165
+ if (!this._isTransitioning) {
166
+ this._setOriginalHeightValue(this.scrollHeight);
167
+ }
168
+ }
169
+ else {
170
+ requestAnimationFrame(() => {
171
+ this.style.height = 'auto';
172
+ requestAnimationFrame(() => {
173
+ this._setOriginalHeightValue(this.getBoundingClientRect().height);
174
+ if (this.hidden) {
175
+ this.style.height = '0px';
176
+ }
177
+ else {
178
+ this.style.height = this._originalHeight;
179
+ }
180
+ });
181
+ });
182
+ }
183
+ }
184
+ async _subscribeObserver() {
185
+ this._accordionGroupProps = await this._contextConsumer.consumeAsync(accordion_constants.ACCORDION_CONTEXTS.accordionGroupProps);
186
+ this._accordionGroupPropsObserver = new observer.Observer((accordionProps) => {
187
+ this._setAttributes(accordionProps);
188
+ accordionProps.opened ? this._transitionController.show(this._expand) : this._transitionController.hide(this._collapse);
189
+ });
190
+ this._accordionGroupProps.subscribe(this._accordionGroupPropsObserver);
191
+ if (!this.isDevAccordionOptimizationFlagEnabled) {
192
+ this._mutationObserver = new MutationObserver(this._handleMutation);
193
+ this._mutationObserver.observe(this, { childList: true, subtree: true });
194
+ }
151
195
  }
152
196
  _setHeight(height) {
153
197
  this.style.height = height;
@@ -157,10 +201,22 @@ exports.HAccordionContent = class HAccordionContent extends phoenix_light_lit_el
157
201
  this.setAttribute('labelledby', regionId);
158
202
  }
159
203
  disconnectedCallback() {
160
- var _a, _b;
204
+ var _a, _b, _c;
161
205
  super.disconnectedCallback();
162
206
  (_a = this._accordionGroupProps) === null || _a === void 0 ? void 0 : _a.unsubscribe(this._accordionGroupPropsObserver);
163
- (_b = this._mutationObserver) === null || _b === void 0 ? void 0 : _b.disconnect();
207
+ if (this.isDevAccordionOptimizationFlagEnabled) {
208
+ (_b = this._resizeObserver) === null || _b === void 0 ? void 0 : _b.disconnect();
209
+ }
210
+ else {
211
+ (_c = this._mutationObserver) === null || _c === void 0 ? void 0 : _c.disconnect();
212
+ window.removeEventListener('resize', this._handleResize);
213
+ if (this._resizeDebounceTimer !== null) {
214
+ window.cancelAnimationFrame(this._resizeDebounceTimer);
215
+ }
216
+ if (this._mutationDebounceTimer !== null) {
217
+ window.clearTimeout(this._mutationDebounceTimer);
218
+ }
219
+ }
164
220
  if (this.isDevAccordionHeightFixFlagEnabled) {
165
221
  const images = this.querySelectorAll('img');
166
222
  images.forEach((img) => {
@@ -170,18 +226,16 @@ exports.HAccordionContent = class HAccordionContent extends phoenix_light_lit_el
170
226
  }
171
227
  window.removeEventListener('resize', this._handleResize);
172
228
  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
- }
179
229
  }
180
230
  };
181
231
  tslib_es6.__decorate([
182
232
  decorators.property(),
183
233
  tslib_es6.__metadata("design:type", Object)
184
234
  ], exports.HAccordionContent.prototype, "transitionName", void 0);
235
+ tslib_es6.__decorate([
236
+ decorators.property({ type: Boolean, attribute: 'is-dev-accordion-optimization-flag-enabled' }),
237
+ tslib_es6.__metadata("design:type", Boolean)
238
+ ], exports.HAccordionContent.prototype, "isDevAccordionOptimizationFlagEnabled", void 0);
185
239
  tslib_es6.__decorate([
186
240
  decorators.property({ type: Boolean, attribute: 'dev_accordion_height_fix' }),
187
241
  tslib_es6.__metadata("design:type", Boolean)
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;"}
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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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,12 +2,15 @@ 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
6
  isDevAccordionHeightFixFlagEnabled: boolean;
6
7
  private _transitionController;
7
8
  private _contextConsumer;
8
9
  private _accordionGroupProps;
9
10
  private _accordionGroupPropsObserver;
10
11
  private _originalHeight;
12
+ private _resizeObserver;
13
+ private _isTransitioning;
11
14
  private _resizeDebounceTimer;
12
15
  private _mutationDebounceTimer;
13
16
  private _mutationObserver;
@@ -16,14 +19,15 @@ export declare class HAccordionContent extends PhoenixLightLitElement {
16
19
  constructor();
17
20
  connectedCallback(): void;
18
21
  firstUpdated(props: PropertyValues): void;
22
+ private _handleResizeObserver;
23
+ private _updateOriginalHeight;
19
24
  private _handleResize;
20
25
  private _setStylingOptions;
21
- private _subscribeObserver;
26
+ private _setOriginalHeightValue;
22
27
  private _handleMutation;
23
- private _forceHeightRecalculation;
24
28
  private _setupImageLoadListeners;
25
29
  private _handleImageLoad;
26
- private _setOriginalHeightValue;
30
+ private _subscribeObserver;
27
31
  private _expand;
28
32
  private _handleTransitionEnd;
29
33
  private _collapse;
package/build/esm/packages/phoenix/src/components/accordion/accordion_content.js CHANGED
@@ -14,10 +14,24 @@ let HAccordionContent = class HAccordionContent extends PhoenixLightLitElement {
14
14
  constructor() {
15
15
  super();
16
16
  this.transitionName = 'accordion-toggle';
17
+ this.isDevAccordionOptimizationFlagEnabled = false;
17
18
  this.isDevAccordionHeightFixFlagEnabled = false;
19
+ this._resizeObserver = null;
20
+ this._isTransitioning = false;
18
21
  this._resizeDebounceTimer = null;
19
22
  this._mutationDebounceTimer = null;
20
23
  this._mutationObserver = null;
24
+ this._handleResizeObserver = () => {
25
+ if (this._isTransitioning || this.hidden || this.style.height === '0px')
26
+ return;
27
+ this._setOriginalHeightValue(this.scrollHeight);
28
+ };
29
+ this._updateOriginalHeight = () => {
30
+ const previousDisplay = this.style.display;
31
+ this.style.setProperty('display', 'block', 'important');
32
+ this._setOriginalHeightValue(this.scrollHeight);
33
+ this.style.display = previousDisplay;
34
+ };
21
35
  this._handleResize = () => {
22
36
  if (this._resizeDebounceTimer !== null) {
23
37
  window.cancelAnimationFrame(this._resizeDebounceTimer);
@@ -34,61 +48,73 @@ let HAccordionContent = class HAccordionContent extends PhoenixLightLitElement {
34
48
  this.style.setProperty('display', 'block', 'important');
35
49
  this.style.height = 'auto';
36
50
  requestAnimationFrame(() => {
37
- this._setOriginalHeightValue();
51
+ this._setOriginalHeightValue(this.getBoundingClientRect().height);
38
52
  this.style.display = previousDisplay;
39
53
  this.style.height = this.hidden ? '0px' : this._originalHeight;
40
54
  });
41
55
  });
42
56
  };
57
+ this._setOriginalHeightValue = (height) => {
58
+ if (height !== 0 || this.children.length === 0) {
59
+ this._originalHeight = `${height}px`;
60
+ }
61
+ };
43
62
  this._handleMutation = () => {
44
63
  if (this._mutationDebounceTimer !== null) {
45
64
  window.clearTimeout(this._mutationDebounceTimer);
46
65
  }
47
66
  this._mutationDebounceTimer = window.setTimeout(() => {
48
- if (this.isDevAccordionHeightFixFlagEnabled) {
49
- this._forceHeightRecalculation();
50
- }
51
- else {
67
+ requestAnimationFrame(() => {
68
+ this.style.height = 'auto';
52
69
  requestAnimationFrame(() => {
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
- });
70
+ this._setOriginalHeightValue(this.getBoundingClientRect().height);
71
+ if (this.hidden) {
72
+ this.style.height = '0px';
73
+ }
74
+ else {
75
+ this.style.height = this._originalHeight;
76
+ }
63
77
  });
64
- }
78
+ });
65
79
  }, MUTATION_DEBOUNCE_MS);
66
80
  };
67
- this._setOriginalHeightValue = () => {
68
- const newHeight = this.getBoundingClientRect().height;
69
- if (newHeight !== 0 || this.children.length === 0) {
70
- this._originalHeight = `${newHeight}px`;
71
- }
72
- };
73
81
  this._expand = () => {
82
+ if (this.isDevAccordionOptimizationFlagEnabled) {
83
+ this._setOriginalHeightValue(this.scrollHeight);
84
+ this._isTransitioning = true;
85
+ }
74
86
  this._setHeight(this._originalHeight);
75
87
  };
76
88
  this._handleTransitionEnd = (e) => {
77
89
  if (e.propertyName !== 'height' || e.target !== this) {
78
90
  return;
79
91
  }
92
+ if (this.isDevAccordionOptimizationFlagEnabled) {
93
+ this._isTransitioning = false;
94
+ }
80
95
  if (!this.hidden && this.style.height !== '0px') {
81
96
  this.style.height = 'auto';
82
97
  }
83
98
  };
84
99
  this._collapse = () => {
100
+ if (this.isDevAccordionOptimizationFlagEnabled) {
101
+ this._isTransitioning = true;
102
+ }
85
103
  const currentHeight = this.getBoundingClientRect().height;
86
104
  this._setHeight(`${currentHeight}px`);
87
- requestAnimationFrame(() => {
105
+ if (this.isDevAccordionOptimizationFlagEnabled) {
106
+ void this.offsetHeight;
88
107
  requestAnimationFrame(() => {
89
108
  this._setHeight('0px');
90
109
  });
91
- });
110
+ }
111
+ else {
112
+ requestAnimationFrame(() => {
113
+ requestAnimationFrame(() => {
114
+ this._setHeight('0px');
115
+ });
116
+ });
117
+ }
92
118
  };
93
119
  this.setAttribute('role', 'region');
94
120
  this._boundHandleTransitionEnd = this._handleTransitionEnd.bind(this);
@@ -99,7 +125,13 @@ let HAccordionContent = class HAccordionContent extends PhoenixLightLitElement {
99
125
  this._contextConsumer = new ContextConsumerController(this);
100
126
  this._transitionController = new TransitionController(this, this.transitionName);
101
127
  this._subscribeObserver();
102
- window.addEventListener('resize', this._handleResize, { passive: true });
128
+ if (this.isDevAccordionOptimizationFlagEnabled) {
129
+ this._resizeObserver = new ResizeObserver(this._handleResizeObserver);
130
+ this._resizeObserver.observe(this);
131
+ }
132
+ else {
133
+ window.addEventListener('resize', this._handleResize, { passive: true });
134
+ }
103
135
  this.addEventListener('transitionend', this._boundHandleTransitionEnd);
104
136
  if (this.isDevAccordionHeightFixFlagEnabled) {
105
137
  this._setupImageLoadListeners();
@@ -107,31 +139,13 @@ let HAccordionContent = class HAccordionContent extends PhoenixLightLitElement {
107
139
  }
108
140
  firstUpdated(props) {
109
141
  super.firstUpdated(props);
110
- this._setStylingOptions();
111
- }
112
- async _subscribeObserver() {
113
- this._accordionGroupProps = await this._contextConsumer.consumeAsync(ACCORDION_CONTEXTS.accordionGroupProps);
114
- this._accordionGroupPropsObserver = new Observer((accordionProps) => {
115
- this._setAttributes(accordionProps);
116
- accordionProps.opened ? this._transitionController.show(this._expand) : this._transitionController.hide(this._collapse);
117
- });
118
- this._accordionGroupProps.subscribe(this._accordionGroupPropsObserver);
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
- });
142
+ if (this.isDevAccordionOptimizationFlagEnabled) {
143
+ this._updateOriginalHeight();
144
+ this.style.height = this.hidden ? '0px' : this._originalHeight;
145
+ }
146
+ else {
147
+ this._setStylingOptions();
148
+ }
135
149
  }
136
150
  _setupImageLoadListeners() {
137
151
  const images = this.querySelectorAll('img');
@@ -143,7 +157,37 @@ let HAccordionContent = class HAccordionContent extends PhoenixLightLitElement {
143
157
  });
144
158
  }
145
159
  _handleImageLoad() {
146
- this._forceHeightRecalculation();
160
+ if (this.isDevAccordionOptimizationFlagEnabled) {
161
+ if (!this._isTransitioning) {
162
+ this._setOriginalHeightValue(this.scrollHeight);
163
+ }
164
+ }
165
+ else {
166
+ requestAnimationFrame(() => {
167
+ this.style.height = 'auto';
168
+ requestAnimationFrame(() => {
169
+ this._setOriginalHeightValue(this.getBoundingClientRect().height);
170
+ if (this.hidden) {
171
+ this.style.height = '0px';
172
+ }
173
+ else {
174
+ this.style.height = this._originalHeight;
175
+ }
176
+ });
177
+ });
178
+ }
179
+ }
180
+ async _subscribeObserver() {
181
+ this._accordionGroupProps = await this._contextConsumer.consumeAsync(ACCORDION_CONTEXTS.accordionGroupProps);
182
+ this._accordionGroupPropsObserver = new Observer((accordionProps) => {
183
+ this._setAttributes(accordionProps);
184
+ accordionProps.opened ? this._transitionController.show(this._expand) : this._transitionController.hide(this._collapse);
185
+ });
186
+ this._accordionGroupProps.subscribe(this._accordionGroupPropsObserver);
187
+ if (!this.isDevAccordionOptimizationFlagEnabled) {
188
+ this._mutationObserver = new MutationObserver(this._handleMutation);
189
+ this._mutationObserver.observe(this, { childList: true, subtree: true });
190
+ }
147
191
  }
148
192
  _setHeight(height) {
149
193
  this.style.height = height;
@@ -153,10 +197,22 @@ let HAccordionContent = class HAccordionContent extends PhoenixLightLitElement {
153
197
  this.setAttribute('labelledby', regionId);
154
198
  }
155
199
  disconnectedCallback() {
156
- var _a, _b;
200
+ var _a, _b, _c;
157
201
  super.disconnectedCallback();
158
202
  (_a = this._accordionGroupProps) === null || _a === void 0 ? void 0 : _a.unsubscribe(this._accordionGroupPropsObserver);
159
- (_b = this._mutationObserver) === null || _b === void 0 ? void 0 : _b.disconnect();
203
+ if (this.isDevAccordionOptimizationFlagEnabled) {
204
+ (_b = this._resizeObserver) === null || _b === void 0 ? void 0 : _b.disconnect();
205
+ }
206
+ else {
207
+ (_c = this._mutationObserver) === null || _c === void 0 ? void 0 : _c.disconnect();
208
+ window.removeEventListener('resize', this._handleResize);
209
+ if (this._resizeDebounceTimer !== null) {
210
+ window.cancelAnimationFrame(this._resizeDebounceTimer);
211
+ }
212
+ if (this._mutationDebounceTimer !== null) {
213
+ window.clearTimeout(this._mutationDebounceTimer);
214
+ }
215
+ }
160
216
  if (this.isDevAccordionHeightFixFlagEnabled) {
161
217
  const images = this.querySelectorAll('img');
162
218
  images.forEach((img) => {
@@ -166,18 +222,16 @@ let HAccordionContent = class HAccordionContent extends PhoenixLightLitElement {
166
222
  }
167
223
  window.removeEventListener('resize', this._handleResize);
168
224
  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
- }
175
225
  }
176
226
  };
177
227
  __decorate([
178
228
  property(),
179
229
  __metadata("design:type", Object)
180
230
  ], HAccordionContent.prototype, "transitionName", void 0);
231
+ __decorate([
232
+ property({ type: Boolean, attribute: 'is-dev-accordion-optimization-flag-enabled' }),
233
+ __metadata("design:type", Boolean)
234
+ ], HAccordionContent.prototype, "isDevAccordionOptimizationFlagEnabled", void 0);
181
235
  __decorate([
182
236
  property({ type: Boolean, attribute: 'dev_accordion_height_fix' }),
183
237
  __metadata("design:type", Boolean)
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;"}
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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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.21",
5
+ "version": "1.18.22",
6
6
  "description": "phoenix design system",
7
7
  "author": "zefirek",
8
8
  "license": "MIT",