@shoper/phoenix_design_system 1.18.11-14 → 1.18.11-15
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.
- package/build/cjs/packages/phoenix/src/components/accordion/accordion_content.js +112 -14
- package/build/cjs/packages/phoenix/src/components/accordion/accordion_content.js.map +1 -1
- package/build/esm/packages/phoenix/src/components/accordion/accordion_content.d.ts +8 -0
- package/build/esm/packages/phoenix/src/components/accordion/accordion_content.js +112 -14
- package/build/esm/packages/phoenix/src/components/accordion/accordion_content.js.map +1 -1
- package/package.json +1 -1
|
@@ -12,12 +12,18 @@ 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.isDevAccordionOptimizationFlagEnabled = false;
|
|
19
22
|
this._resizeObserver = null;
|
|
20
23
|
this._isTransitioning = false;
|
|
24
|
+
this._resizeDebounceTimer = null;
|
|
25
|
+
this._mutationDebounceTimer = null;
|
|
26
|
+
this._mutationObserver = null;
|
|
21
27
|
this._handleResizeObserver = () => {
|
|
22
28
|
if (this._isTransitioning)
|
|
23
29
|
return;
|
|
@@ -37,28 +43,90 @@ exports.HAccordionContent = class HAccordionContent extends phoenix_light_lit_el
|
|
|
37
43
|
this._originalHeight = `${newHeight}px`;
|
|
38
44
|
}
|
|
39
45
|
};
|
|
46
|
+
this._handleResize = () => {
|
|
47
|
+
if (this._resizeDebounceTimer !== null) {
|
|
48
|
+
window.cancelAnimationFrame(this._resizeDebounceTimer);
|
|
49
|
+
}
|
|
50
|
+
this._resizeDebounceTimer = window.requestAnimationFrame(() => {
|
|
51
|
+
setTimeout(() => {
|
|
52
|
+
this._setStylingOptions();
|
|
53
|
+
}, RESIZE_DEBOUNCE_MS);
|
|
54
|
+
});
|
|
55
|
+
};
|
|
56
|
+
this._setStylingOptions = () => {
|
|
57
|
+
requestAnimationFrame(() => {
|
|
58
|
+
const previousDisplay = this.style.display;
|
|
59
|
+
this.style.setProperty('display', 'block', 'important');
|
|
60
|
+
this.style.height = 'auto';
|
|
61
|
+
requestAnimationFrame(() => {
|
|
62
|
+
this._setOriginalHeightValue();
|
|
63
|
+
this.style.display = previousDisplay;
|
|
64
|
+
this.style.height = this.hidden ? '0px' : this._originalHeight;
|
|
65
|
+
});
|
|
66
|
+
});
|
|
67
|
+
};
|
|
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
|
+
this._handleMutation = () => {
|
|
75
|
+
if (this._mutationDebounceTimer !== null) {
|
|
76
|
+
window.clearTimeout(this._mutationDebounceTimer);
|
|
77
|
+
}
|
|
78
|
+
this._mutationDebounceTimer = window.setTimeout(() => {
|
|
79
|
+
requestAnimationFrame(() => {
|
|
80
|
+
this.style.height = 'auto';
|
|
81
|
+
requestAnimationFrame(() => {
|
|
82
|
+
this._setOriginalHeightValue();
|
|
83
|
+
if (this.hidden) {
|
|
84
|
+
this.style.height = '0px';
|
|
85
|
+
}
|
|
86
|
+
else {
|
|
87
|
+
this.style.height = this._originalHeight;
|
|
88
|
+
}
|
|
89
|
+
});
|
|
90
|
+
});
|
|
91
|
+
}, MUTATION_DEBOUNCE_MS);
|
|
92
|
+
};
|
|
40
93
|
this._expand = () => {
|
|
41
|
-
this.
|
|
42
|
-
|
|
94
|
+
if (this.isDevAccordionOptimizationFlagEnabled) {
|
|
95
|
+
this._cacheScrollHeight();
|
|
96
|
+
this._isTransitioning = true;
|
|
97
|
+
}
|
|
43
98
|
this._setHeight(this._originalHeight);
|
|
44
99
|
};
|
|
45
100
|
this._handleTransitionEnd = (e) => {
|
|
46
101
|
if (e.propertyName !== 'height' || e.target !== this) {
|
|
47
102
|
return;
|
|
48
103
|
}
|
|
49
|
-
this.
|
|
104
|
+
if (this.isDevAccordionOptimizationFlagEnabled) {
|
|
105
|
+
this._isTransitioning = false;
|
|
106
|
+
}
|
|
50
107
|
if (!this.hidden && this.style.height !== '0px') {
|
|
51
108
|
this.style.height = 'auto';
|
|
52
109
|
}
|
|
53
110
|
};
|
|
54
111
|
this._collapse = () => {
|
|
55
|
-
this.
|
|
112
|
+
if (this.isDevAccordionOptimizationFlagEnabled) {
|
|
113
|
+
this._isTransitioning = true;
|
|
114
|
+
}
|
|
56
115
|
const currentHeight = this.getBoundingClientRect().height;
|
|
57
116
|
this._setHeight(`${currentHeight}px`);
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
117
|
+
if (this.isDevAccordionOptimizationFlagEnabled) {
|
|
118
|
+
void this.offsetHeight;
|
|
119
|
+
requestAnimationFrame(() => {
|
|
120
|
+
this._setHeight('0px');
|
|
121
|
+
});
|
|
122
|
+
}
|
|
123
|
+
else {
|
|
124
|
+
requestAnimationFrame(() => {
|
|
125
|
+
requestAnimationFrame(() => {
|
|
126
|
+
this._setHeight('0px');
|
|
127
|
+
});
|
|
128
|
+
});
|
|
129
|
+
}
|
|
62
130
|
};
|
|
63
131
|
this.setAttribute('role', 'region');
|
|
64
132
|
this._boundHandleTransitionEnd = this._handleTransitionEnd.bind(this);
|
|
@@ -68,14 +136,24 @@ exports.HAccordionContent = class HAccordionContent extends phoenix_light_lit_el
|
|
|
68
136
|
this._contextConsumer = new context_consumer_controller.ContextConsumerController(this);
|
|
69
137
|
this._transitionController = new transition_controller.TransitionController(this, this.transitionName);
|
|
70
138
|
this._subscribeObserver();
|
|
71
|
-
|
|
72
|
-
|
|
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
|
+
}
|
|
73
146
|
this.addEventListener('transitionend', this._boundHandleTransitionEnd);
|
|
74
147
|
}
|
|
75
148
|
firstUpdated(props) {
|
|
76
149
|
super.firstUpdated(props);
|
|
77
|
-
this.
|
|
78
|
-
|
|
150
|
+
if (this.isDevAccordionOptimizationFlagEnabled) {
|
|
151
|
+
this._measureOriginalHeight();
|
|
152
|
+
this.style.height = this.hidden ? '0px' : this._originalHeight;
|
|
153
|
+
}
|
|
154
|
+
else {
|
|
155
|
+
this._setStylingOptions();
|
|
156
|
+
}
|
|
79
157
|
}
|
|
80
158
|
async _subscribeObserver() {
|
|
81
159
|
this._accordionGroupProps = await this._contextConsumer.consumeAsync(accordion_constants.ACCORDION_CONTEXTS.accordionGroupProps);
|
|
@@ -84,6 +162,10 @@ exports.HAccordionContent = class HAccordionContent extends phoenix_light_lit_el
|
|
|
84
162
|
accordionProps.opened ? this._transitionController.show(this._expand) : this._transitionController.hide(this._collapse);
|
|
85
163
|
});
|
|
86
164
|
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
|
+
}
|
|
87
169
|
}
|
|
88
170
|
_setHeight(height) {
|
|
89
171
|
this.style.height = height;
|
|
@@ -93,10 +175,22 @@ exports.HAccordionContent = class HAccordionContent extends phoenix_light_lit_el
|
|
|
93
175
|
this.setAttribute('labelledby', regionId);
|
|
94
176
|
}
|
|
95
177
|
disconnectedCallback() {
|
|
96
|
-
var _a, _b;
|
|
178
|
+
var _a, _b, _c;
|
|
97
179
|
super.disconnectedCallback();
|
|
98
180
|
(_a = this._accordionGroupProps) === null || _a === void 0 ? void 0 : _a.unsubscribe(this._accordionGroupPropsObserver);
|
|
99
|
-
(
|
|
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
|
+
}
|
|
193
|
+
}
|
|
100
194
|
this.removeEventListener('transitionend', this._boundHandleTransitionEnd);
|
|
101
195
|
}
|
|
102
196
|
};
|
|
@@ -104,6 +198,10 @@ tslib_es6.__decorate([
|
|
|
104
198
|
decorators.property(),
|
|
105
199
|
tslib_es6.__metadata("design:type", Object)
|
|
106
200
|
], exports.HAccordionContent.prototype, "transitionName", void 0);
|
|
201
|
+
tslib_es6.__decorate([
|
|
202
|
+
decorators.property({ type: Boolean, attribute: 'is-dev-accordion-optimization-flag-enabled' }),
|
|
203
|
+
tslib_es6.__metadata("design:type", Boolean)
|
|
204
|
+
], exports.HAccordionContent.prototype, "isDevAccordionOptimizationFlagEnabled", void 0);
|
|
107
205
|
exports.HAccordionContent = tslib_es6.__decorate([
|
|
108
206
|
phoenix_custom_element.phoenixCustomElement('h-accordion-content'),
|
|
109
207
|
tslib_es6.__metadata("design:paramtypes", [])
|
|
@@ -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;"}
|
|
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;"}
|
|
@@ -2,6 +2,7 @@ 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
|
private _transitionController;
|
|
6
7
|
private _contextConsumer;
|
|
7
8
|
private _accordionGroupProps;
|
|
@@ -9,6 +10,9 @@ export declare class HAccordionContent extends PhoenixLightLitElement {
|
|
|
9
10
|
private _originalHeight;
|
|
10
11
|
private _resizeObserver;
|
|
11
12
|
private _isTransitioning;
|
|
13
|
+
private _resizeDebounceTimer;
|
|
14
|
+
private _mutationDebounceTimer;
|
|
15
|
+
private _mutationObserver;
|
|
12
16
|
private _boundHandleTransitionEnd;
|
|
13
17
|
constructor();
|
|
14
18
|
connectedCallback(): void;
|
|
@@ -16,6 +20,10 @@ export declare class HAccordionContent extends PhoenixLightLitElement {
|
|
|
16
20
|
private _handleResizeObserver;
|
|
17
21
|
private _measureOriginalHeight;
|
|
18
22
|
private _cacheScrollHeight;
|
|
23
|
+
private _handleResize;
|
|
24
|
+
private _setStylingOptions;
|
|
25
|
+
private _setOriginalHeightValue;
|
|
26
|
+
private _handleMutation;
|
|
19
27
|
private _subscribeObserver;
|
|
20
28
|
private _expand;
|
|
21
29
|
private _handleTransitionEnd;
|
|
@@ -8,12 +8,18 @@ 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.isDevAccordionOptimizationFlagEnabled = false;
|
|
15
18
|
this._resizeObserver = null;
|
|
16
19
|
this._isTransitioning = false;
|
|
20
|
+
this._resizeDebounceTimer = null;
|
|
21
|
+
this._mutationDebounceTimer = null;
|
|
22
|
+
this._mutationObserver = null;
|
|
17
23
|
this._handleResizeObserver = () => {
|
|
18
24
|
if (this._isTransitioning)
|
|
19
25
|
return;
|
|
@@ -33,28 +39,90 @@ let HAccordionContent = class HAccordionContent extends PhoenixLightLitElement {
|
|
|
33
39
|
this._originalHeight = `${newHeight}px`;
|
|
34
40
|
}
|
|
35
41
|
};
|
|
42
|
+
this._handleResize = () => {
|
|
43
|
+
if (this._resizeDebounceTimer !== null) {
|
|
44
|
+
window.cancelAnimationFrame(this._resizeDebounceTimer);
|
|
45
|
+
}
|
|
46
|
+
this._resizeDebounceTimer = window.requestAnimationFrame(() => {
|
|
47
|
+
setTimeout(() => {
|
|
48
|
+
this._setStylingOptions();
|
|
49
|
+
}, RESIZE_DEBOUNCE_MS);
|
|
50
|
+
});
|
|
51
|
+
};
|
|
52
|
+
this._setStylingOptions = () => {
|
|
53
|
+
requestAnimationFrame(() => {
|
|
54
|
+
const previousDisplay = this.style.display;
|
|
55
|
+
this.style.setProperty('display', 'block', 'important');
|
|
56
|
+
this.style.height = 'auto';
|
|
57
|
+
requestAnimationFrame(() => {
|
|
58
|
+
this._setOriginalHeightValue();
|
|
59
|
+
this.style.display = previousDisplay;
|
|
60
|
+
this.style.height = this.hidden ? '0px' : this._originalHeight;
|
|
61
|
+
});
|
|
62
|
+
});
|
|
63
|
+
};
|
|
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
|
+
this._handleMutation = () => {
|
|
71
|
+
if (this._mutationDebounceTimer !== null) {
|
|
72
|
+
window.clearTimeout(this._mutationDebounceTimer);
|
|
73
|
+
}
|
|
74
|
+
this._mutationDebounceTimer = window.setTimeout(() => {
|
|
75
|
+
requestAnimationFrame(() => {
|
|
76
|
+
this.style.height = 'auto';
|
|
77
|
+
requestAnimationFrame(() => {
|
|
78
|
+
this._setOriginalHeightValue();
|
|
79
|
+
if (this.hidden) {
|
|
80
|
+
this.style.height = '0px';
|
|
81
|
+
}
|
|
82
|
+
else {
|
|
83
|
+
this.style.height = this._originalHeight;
|
|
84
|
+
}
|
|
85
|
+
});
|
|
86
|
+
});
|
|
87
|
+
}, MUTATION_DEBOUNCE_MS);
|
|
88
|
+
};
|
|
36
89
|
this._expand = () => {
|
|
37
|
-
this.
|
|
38
|
-
|
|
90
|
+
if (this.isDevAccordionOptimizationFlagEnabled) {
|
|
91
|
+
this._cacheScrollHeight();
|
|
92
|
+
this._isTransitioning = true;
|
|
93
|
+
}
|
|
39
94
|
this._setHeight(this._originalHeight);
|
|
40
95
|
};
|
|
41
96
|
this._handleTransitionEnd = (e) => {
|
|
42
97
|
if (e.propertyName !== 'height' || e.target !== this) {
|
|
43
98
|
return;
|
|
44
99
|
}
|
|
45
|
-
this.
|
|
100
|
+
if (this.isDevAccordionOptimizationFlagEnabled) {
|
|
101
|
+
this._isTransitioning = false;
|
|
102
|
+
}
|
|
46
103
|
if (!this.hidden && this.style.height !== '0px') {
|
|
47
104
|
this.style.height = 'auto';
|
|
48
105
|
}
|
|
49
106
|
};
|
|
50
107
|
this._collapse = () => {
|
|
51
|
-
this.
|
|
108
|
+
if (this.isDevAccordionOptimizationFlagEnabled) {
|
|
109
|
+
this._isTransitioning = true;
|
|
110
|
+
}
|
|
52
111
|
const currentHeight = this.getBoundingClientRect().height;
|
|
53
112
|
this._setHeight(`${currentHeight}px`);
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
113
|
+
if (this.isDevAccordionOptimizationFlagEnabled) {
|
|
114
|
+
void this.offsetHeight;
|
|
115
|
+
requestAnimationFrame(() => {
|
|
116
|
+
this._setHeight('0px');
|
|
117
|
+
});
|
|
118
|
+
}
|
|
119
|
+
else {
|
|
120
|
+
requestAnimationFrame(() => {
|
|
121
|
+
requestAnimationFrame(() => {
|
|
122
|
+
this._setHeight('0px');
|
|
123
|
+
});
|
|
124
|
+
});
|
|
125
|
+
}
|
|
58
126
|
};
|
|
59
127
|
this.setAttribute('role', 'region');
|
|
60
128
|
this._boundHandleTransitionEnd = this._handleTransitionEnd.bind(this);
|
|
@@ -64,14 +132,24 @@ let HAccordionContent = class HAccordionContent extends PhoenixLightLitElement {
|
|
|
64
132
|
this._contextConsumer = new ContextConsumerController(this);
|
|
65
133
|
this._transitionController = new TransitionController(this, this.transitionName);
|
|
66
134
|
this._subscribeObserver();
|
|
67
|
-
|
|
68
|
-
|
|
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
|
+
}
|
|
69
142
|
this.addEventListener('transitionend', this._boundHandleTransitionEnd);
|
|
70
143
|
}
|
|
71
144
|
firstUpdated(props) {
|
|
72
145
|
super.firstUpdated(props);
|
|
73
|
-
this.
|
|
74
|
-
|
|
146
|
+
if (this.isDevAccordionOptimizationFlagEnabled) {
|
|
147
|
+
this._measureOriginalHeight();
|
|
148
|
+
this.style.height = this.hidden ? '0px' : this._originalHeight;
|
|
149
|
+
}
|
|
150
|
+
else {
|
|
151
|
+
this._setStylingOptions();
|
|
152
|
+
}
|
|
75
153
|
}
|
|
76
154
|
async _subscribeObserver() {
|
|
77
155
|
this._accordionGroupProps = await this._contextConsumer.consumeAsync(ACCORDION_CONTEXTS.accordionGroupProps);
|
|
@@ -80,6 +158,10 @@ let HAccordionContent = class HAccordionContent extends PhoenixLightLitElement {
|
|
|
80
158
|
accordionProps.opened ? this._transitionController.show(this._expand) : this._transitionController.hide(this._collapse);
|
|
81
159
|
});
|
|
82
160
|
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
|
+
}
|
|
83
165
|
}
|
|
84
166
|
_setHeight(height) {
|
|
85
167
|
this.style.height = height;
|
|
@@ -89,10 +171,22 @@ let HAccordionContent = class HAccordionContent extends PhoenixLightLitElement {
|
|
|
89
171
|
this.setAttribute('labelledby', regionId);
|
|
90
172
|
}
|
|
91
173
|
disconnectedCallback() {
|
|
92
|
-
var _a, _b;
|
|
174
|
+
var _a, _b, _c;
|
|
93
175
|
super.disconnectedCallback();
|
|
94
176
|
(_a = this._accordionGroupProps) === null || _a === void 0 ? void 0 : _a.unsubscribe(this._accordionGroupPropsObserver);
|
|
95
|
-
(
|
|
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
|
+
}
|
|
189
|
+
}
|
|
96
190
|
this.removeEventListener('transitionend', this._boundHandleTransitionEnd);
|
|
97
191
|
}
|
|
98
192
|
};
|
|
@@ -100,6 +194,10 @@ __decorate([
|
|
|
100
194
|
property(),
|
|
101
195
|
__metadata("design:type", Object)
|
|
102
196
|
], HAccordionContent.prototype, "transitionName", void 0);
|
|
197
|
+
__decorate([
|
|
198
|
+
property({ type: Boolean, attribute: 'is-dev-accordion-optimization-flag-enabled' }),
|
|
199
|
+
__metadata("design:type", Boolean)
|
|
200
|
+
], HAccordionContent.prototype, "isDevAccordionOptimizationFlagEnabled", void 0);
|
|
103
201
|
HAccordionContent = __decorate([
|
|
104
202
|
phoenixCustomElement('h-accordion-content'),
|
|
105
203
|
__metadata("design:paramtypes", [])
|
|
@@ -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;"}
|
|
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;"}
|
package/package.json
CHANGED