@shoper/phoenix_design_system 1.18.13 → 1.18.14

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 +57 -10
  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 +5 -0
  4. package/build/esm/packages/phoenix/src/components/accordion/accordion_content.js +57 -10
  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,6 +18,7 @@ exports.HAccordionContent = class HAccordionContent extends phoenix_light_lit_el
18
18
  constructor() {
19
19
  super();
20
20
  this.transitionName = 'accordion-toggle';
21
+ this.isDevAccordionHeightFixFlagEnabled = false;
21
22
  this._resizeDebounceTimer = null;
22
23
  this._mutationDebounceTimer = null;
23
24
  this._mutationObserver = null;
@@ -48,18 +49,23 @@ exports.HAccordionContent = class HAccordionContent extends phoenix_light_lit_el
48
49
  window.clearTimeout(this._mutationDebounceTimer);
49
50
  }
50
51
  this._mutationDebounceTimer = window.setTimeout(() => {
51
- requestAnimationFrame(() => {
52
- this.style.height = 'auto';
52
+ if (this.isDevAccordionHeightFixFlagEnabled) {
53
+ this._forceHeightRecalculation();
54
+ }
55
+ else {
53
56
  requestAnimationFrame(() => {
54
- this._setOriginalHeightValue();
55
- if (this.hidden) {
56
- this.style.height = '0px';
57
- }
58
- else {
59
- this.style.height = this._originalHeight;
60
- }
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
+ });
61
67
  });
62
- });
68
+ }
63
69
  }, MUTATION_DEBOUNCE_MS);
64
70
  };
65
71
  this._setOriginalHeightValue = () => {
@@ -90,6 +96,7 @@ exports.HAccordionContent = class HAccordionContent extends phoenix_light_lit_el
90
96
  };
91
97
  this.setAttribute('role', 'region');
92
98
  this._boundHandleTransitionEnd = this._handleTransitionEnd.bind(this);
99
+ this._boundHandleImageLoad = this._handleImageLoad.bind(this);
93
100
  }
94
101
  connectedCallback() {
95
102
  super.connectedCallback();
@@ -98,6 +105,9 @@ exports.HAccordionContent = class HAccordionContent extends phoenix_light_lit_el
98
105
  this._subscribeObserver();
99
106
  window.addEventListener('resize', this._handleResize, { passive: true });
100
107
  this.addEventListener('transitionend', this._boundHandleTransitionEnd);
108
+ if (this.isDevAccordionHeightFixFlagEnabled) {
109
+ this._setupImageLoadListeners();
110
+ }
101
111
  }
102
112
  firstUpdated(props) {
103
113
  super.firstUpdated(props);
@@ -113,6 +123,32 @@ exports.HAccordionContent = class HAccordionContent extends phoenix_light_lit_el
113
123
  this._mutationObserver = new MutationObserver(this._handleMutation);
114
124
  this._mutationObserver.observe(this, { childList: true, subtree: true });
115
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();
151
+ }
116
152
  _setHeight(height) {
117
153
  this.style.height = height;
118
154
  }
@@ -125,6 +161,13 @@ exports.HAccordionContent = class HAccordionContent extends phoenix_light_lit_el
125
161
  super.disconnectedCallback();
126
162
  (_a = this._accordionGroupProps) === null || _a === void 0 ? void 0 : _a.unsubscribe(this._accordionGroupPropsObserver);
127
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
+ });
170
+ }
128
171
  window.removeEventListener('resize', this._handleResize);
129
172
  this.removeEventListener('transitionend', this._boundHandleTransitionEnd);
130
173
  if (this._resizeDebounceTimer !== null) {
@@ -139,6 +182,10 @@ tslib_es6.__decorate([
139
182
  decorators.property(),
140
183
  tslib_es6.__metadata("design:type", Object)
141
184
  ], exports.HAccordionContent.prototype, "transitionName", void 0);
185
+ tslib_es6.__decorate([
186
+ decorators.property({ type: Boolean, attribute: 'dev_accordion_height_fix' }),
187
+ tslib_es6.__metadata("design:type", Boolean)
188
+ ], exports.HAccordionContent.prototype, "isDevAccordionHeightFixFlagEnabled", void 0);
142
189
  exports.HAccordionContent = tslib_es6.__decorate([
143
190
  phoenix_custom_element.phoenixCustomElement('h-accordion-content'),
144
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;"}
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,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
+ isDevAccordionHeightFixFlagEnabled: boolean;
5
6
  private _transitionController;
6
7
  private _contextConsumer;
7
8
  private _accordionGroupProps;
@@ -11,6 +12,7 @@ export declare class HAccordionContent extends PhoenixLightLitElement {
11
12
  private _mutationDebounceTimer;
12
13
  private _mutationObserver;
13
14
  private _boundHandleTransitionEnd;
15
+ private _boundHandleImageLoad;
14
16
  constructor();
15
17
  connectedCallback(): void;
16
18
  firstUpdated(props: PropertyValues): void;
@@ -18,6 +20,9 @@ export declare class HAccordionContent extends PhoenixLightLitElement {
18
20
  private _setStylingOptions;
19
21
  private _subscribeObserver;
20
22
  private _handleMutation;
23
+ private _forceHeightRecalculation;
24
+ private _setupImageLoadListeners;
25
+ private _handleImageLoad;
21
26
  private _setOriginalHeightValue;
22
27
  private _expand;
23
28
  private _handleTransitionEnd;
package/build/esm/packages/phoenix/src/components/accordion/accordion_content.js CHANGED
@@ -14,6 +14,7 @@ let HAccordionContent = class HAccordionContent extends PhoenixLightLitElement {
14
14
  constructor() {
15
15
  super();
16
16
  this.transitionName = 'accordion-toggle';
17
+ this.isDevAccordionHeightFixFlagEnabled = false;
17
18
  this._resizeDebounceTimer = null;
18
19
  this._mutationDebounceTimer = null;
19
20
  this._mutationObserver = null;
@@ -44,18 +45,23 @@ let HAccordionContent = class HAccordionContent extends PhoenixLightLitElement {
44
45
  window.clearTimeout(this._mutationDebounceTimer);
45
46
  }
46
47
  this._mutationDebounceTimer = window.setTimeout(() => {
47
- requestAnimationFrame(() => {
48
- this.style.height = 'auto';
48
+ if (this.isDevAccordionHeightFixFlagEnabled) {
49
+ this._forceHeightRecalculation();
50
+ }
51
+ else {
49
52
  requestAnimationFrame(() => {
50
- this._setOriginalHeightValue();
51
- if (this.hidden) {
52
- this.style.height = '0px';
53
- }
54
- else {
55
- this.style.height = this._originalHeight;
56
- }
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
+ });
57
63
  });
58
- });
64
+ }
59
65
  }, MUTATION_DEBOUNCE_MS);
60
66
  };
61
67
  this._setOriginalHeightValue = () => {
@@ -86,6 +92,7 @@ let HAccordionContent = class HAccordionContent extends PhoenixLightLitElement {
86
92
  };
87
93
  this.setAttribute('role', 'region');
88
94
  this._boundHandleTransitionEnd = this._handleTransitionEnd.bind(this);
95
+ this._boundHandleImageLoad = this._handleImageLoad.bind(this);
89
96
  }
90
97
  connectedCallback() {
91
98
  super.connectedCallback();
@@ -94,6 +101,9 @@ let HAccordionContent = class HAccordionContent extends PhoenixLightLitElement {
94
101
  this._subscribeObserver();
95
102
  window.addEventListener('resize', this._handleResize, { passive: true });
96
103
  this.addEventListener('transitionend', this._boundHandleTransitionEnd);
104
+ if (this.isDevAccordionHeightFixFlagEnabled) {
105
+ this._setupImageLoadListeners();
106
+ }
97
107
  }
98
108
  firstUpdated(props) {
99
109
  super.firstUpdated(props);
@@ -109,6 +119,32 @@ let HAccordionContent = class HAccordionContent extends PhoenixLightLitElement {
109
119
  this._mutationObserver = new MutationObserver(this._handleMutation);
110
120
  this._mutationObserver.observe(this, { childList: true, subtree: true });
111
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();
147
+ }
112
148
  _setHeight(height) {
113
149
  this.style.height = height;
114
150
  }
@@ -121,6 +157,13 @@ let HAccordionContent = class HAccordionContent extends PhoenixLightLitElement {
121
157
  super.disconnectedCallback();
122
158
  (_a = this._accordionGroupProps) === null || _a === void 0 ? void 0 : _a.unsubscribe(this._accordionGroupPropsObserver);
123
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
+ });
166
+ }
124
167
  window.removeEventListener('resize', this._handleResize);
125
168
  this.removeEventListener('transitionend', this._boundHandleTransitionEnd);
126
169
  if (this._resizeDebounceTimer !== null) {
@@ -135,6 +178,10 @@ __decorate([
135
178
  property(),
136
179
  __metadata("design:type", Object)
137
180
  ], HAccordionContent.prototype, "transitionName", void 0);
181
+ __decorate([
182
+ property({ type: Boolean, attribute: 'dev_accordion_height_fix' }),
183
+ __metadata("design:type", Boolean)
184
+ ], HAccordionContent.prototype, "isDevAccordionHeightFixFlagEnabled", void 0);
138
185
  HAccordionContent = __decorate([
139
186
  phoenixCustomElement('h-accordion-content'),
140
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;"}
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.13",
5
+ "version": "1.18.14",
6
6
  "description": "phoenix design system",
7
7
  "author": "zefirek",
8
8
  "license": "MIT",