@shoper/phoenix_design_system 1.18.19 → 1.18.20

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