@shoper/phoenix_design_system 1.18.11-3 → 1.18.11-5

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 +32 -44
  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 +4 -3
  4. package/build/esm/packages/phoenix/src/components/accordion/accordion_content.js +32 -44
  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
@@ -21,8 +21,6 @@ exports.HAccordionContent = class HAccordionContent extends phoenix_light_lit_el
21
21
  this._resizeDebounceTimer = null;
22
22
  this._mutationDebounceTimer = null;
23
23
  this._mutationObserver = null;
24
- this._resizeObserver = null;
25
- this._resizeObserverDebounceTimer = null;
26
24
  this._handleResize = () => {
27
25
  if (this._resizeDebounceTimer !== null) {
28
26
  window.cancelAnimationFrame(this._resizeDebounceTimer);
@@ -50,41 +48,7 @@ exports.HAccordionContent = class HAccordionContent extends phoenix_light_lit_el
50
48
  window.clearTimeout(this._mutationDebounceTimer);
51
49
  }
52
50
  this._mutationDebounceTimer = window.setTimeout(() => {
53
- requestAnimationFrame(() => {
54
- this.style.height = 'auto';
55
- requestAnimationFrame(() => {
56
- this._setOriginalHeightValue();
57
- if (this.hidden) {
58
- this.style.height = '0px';
59
- }
60
- else {
61
- this.style.height = this._originalHeight;
62
- }
63
- });
64
- });
65
- }, MUTATION_DEBOUNCE_MS);
66
- };
67
- this._handleContentResize = (entries) => {
68
- if (this._resizeObserverDebounceTimer !== null) {
69
- window.clearTimeout(this._resizeObserverDebounceTimer);
70
- }
71
- this._resizeObserverDebounceTimer = window.setTimeout(() => {
72
- var _a, _b, _c;
73
- const entry = entries[0];
74
- if (!entry)
75
- return;
76
- const newHeight = (_c = (_b = (_a = entry.borderBoxSize) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.blockSize) !== null && _c !== void 0 ? _c : entry.contentRect.height;
77
- requestAnimationFrame(() => {
78
- if (newHeight !== 0 || this.children.length === 0) {
79
- this._originalHeight = `${newHeight}px`;
80
- }
81
- if (this.hidden) {
82
- this.style.height = '0px';
83
- }
84
- else {
85
- this.style.height = this._originalHeight;
86
- }
87
- });
51
+ this._forceHeightRecalculation();
88
52
  }, MUTATION_DEBOUNCE_MS);
89
53
  };
90
54
  this._setOriginalHeightValue = () => {
@@ -115,6 +79,7 @@ exports.HAccordionContent = class HAccordionContent extends phoenix_light_lit_el
115
79
  };
116
80
  this.setAttribute('role', 'region');
117
81
  this._boundHandleTransitionEnd = this._handleTransitionEnd.bind(this);
82
+ this._boundHandleImageLoad = this._handleImageLoad.bind(this);
118
83
  }
119
84
  connectedCallback() {
120
85
  super.connectedCallback();
@@ -137,8 +102,30 @@ exports.HAccordionContent = class HAccordionContent extends phoenix_light_lit_el
137
102
  this._accordionGroupProps.subscribe(this._accordionGroupPropsObserver);
138
103
  this._mutationObserver = new MutationObserver(this._handleMutation);
139
104
  this._mutationObserver.observe(this, { childList: true, subtree: true });
140
- this._resizeObserver = new ResizeObserver(this._handleContentResize);
141
- this._resizeObserver.observe(this);
105
+ this._setupImageLoadListeners();
106
+ }
107
+ _forceHeightRecalculation() {
108
+ if (this.hidden)
109
+ return;
110
+ requestAnimationFrame(() => {
111
+ this.style.height = 'auto';
112
+ requestAnimationFrame(() => {
113
+ this._setOriginalHeightValue();
114
+ this.style.height = this._originalHeight;
115
+ });
116
+ });
117
+ }
118
+ _setupImageLoadListeners() {
119
+ const images = this.querySelectorAll('img');
120
+ images.forEach((img) => {
121
+ if (!img.complete) {
122
+ img.addEventListener('load', this._boundHandleImageLoad, { once: true });
123
+ img.addEventListener('error', this._boundHandleImageLoad, { once: true });
124
+ }
125
+ });
126
+ }
127
+ _handleImageLoad() {
128
+ this._forceHeightRecalculation();
142
129
  }
143
130
  _setHeight(height) {
144
131
  this.style.height = height;
@@ -148,11 +135,15 @@ exports.HAccordionContent = class HAccordionContent extends phoenix_light_lit_el
148
135
  this.setAttribute('labelledby', regionId);
149
136
  }
150
137
  disconnectedCallback() {
151
- var _a, _b, _c;
138
+ var _a, _b;
152
139
  super.disconnectedCallback();
153
140
  (_a = this._accordionGroupProps) === null || _a === void 0 ? void 0 : _a.unsubscribe(this._accordionGroupPropsObserver);
154
141
  (_b = this._mutationObserver) === null || _b === void 0 ? void 0 : _b.disconnect();
155
- (_c = this._resizeObserver) === null || _c === void 0 ? void 0 : _c.disconnect();
142
+ const images = this.querySelectorAll('img');
143
+ images.forEach((img) => {
144
+ img.removeEventListener('load', this._boundHandleImageLoad);
145
+ img.removeEventListener('error', this._boundHandleImageLoad);
146
+ });
156
147
  window.removeEventListener('resize', this._handleResize);
157
148
  this.removeEventListener('transitionend', this._boundHandleTransitionEnd);
158
149
  if (this._resizeDebounceTimer !== null) {
@@ -161,9 +152,6 @@ exports.HAccordionContent = class HAccordionContent extends phoenix_light_lit_el
161
152
  if (this._mutationDebounceTimer !== null) {
162
153
  window.clearTimeout(this._mutationDebounceTimer);
163
154
  }
164
- if (this._resizeObserverDebounceTimer !== null) {
165
- window.clearTimeout(this._resizeObserverDebounceTimer);
166
- }
167
155
  }
168
156
  };
169
157
  tslib_es6.__decorate([
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;"}
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;"}
package/build/esm/packages/phoenix/src/components/accordion/accordion_content.d.ts CHANGED
@@ -10,9 +10,8 @@ export declare class HAccordionContent extends PhoenixLightLitElement {
10
10
  private _resizeDebounceTimer;
11
11
  private _mutationDebounceTimer;
12
12
  private _mutationObserver;
13
- private _resizeObserver;
14
- private _resizeObserverDebounceTimer;
15
13
  private _boundHandleTransitionEnd;
14
+ private _boundHandleImageLoad;
16
15
  constructor();
17
16
  connectedCallback(): void;
18
17
  firstUpdated(props: PropertyValues): void;
@@ -20,7 +19,9 @@ export declare class HAccordionContent extends PhoenixLightLitElement {
20
19
  private _setStylingOptions;
21
20
  private _subscribeObserver;
22
21
  private _handleMutation;
23
- private _handleContentResize;
22
+ private _forceHeightRecalculation;
23
+ private _setupImageLoadListeners;
24
+ private _handleImageLoad;
24
25
  private _setOriginalHeightValue;
25
26
  private _expand;
26
27
  private _handleTransitionEnd;
package/build/esm/packages/phoenix/src/components/accordion/accordion_content.js CHANGED
@@ -17,8 +17,6 @@ let HAccordionContent = class HAccordionContent extends PhoenixLightLitElement {
17
17
  this._resizeDebounceTimer = null;
18
18
  this._mutationDebounceTimer = null;
19
19
  this._mutationObserver = null;
20
- this._resizeObserver = null;
21
- this._resizeObserverDebounceTimer = null;
22
20
  this._handleResize = () => {
23
21
  if (this._resizeDebounceTimer !== null) {
24
22
  window.cancelAnimationFrame(this._resizeDebounceTimer);
@@ -46,41 +44,7 @@ let HAccordionContent = class HAccordionContent extends PhoenixLightLitElement {
46
44
  window.clearTimeout(this._mutationDebounceTimer);
47
45
  }
48
46
  this._mutationDebounceTimer = window.setTimeout(() => {
49
- requestAnimationFrame(() => {
50
- this.style.height = 'auto';
51
- requestAnimationFrame(() => {
52
- this._setOriginalHeightValue();
53
- if (this.hidden) {
54
- this.style.height = '0px';
55
- }
56
- else {
57
- this.style.height = this._originalHeight;
58
- }
59
- });
60
- });
61
- }, MUTATION_DEBOUNCE_MS);
62
- };
63
- this._handleContentResize = (entries) => {
64
- if (this._resizeObserverDebounceTimer !== null) {
65
- window.clearTimeout(this._resizeObserverDebounceTimer);
66
- }
67
- this._resizeObserverDebounceTimer = window.setTimeout(() => {
68
- var _a, _b, _c;
69
- const entry = entries[0];
70
- if (!entry)
71
- return;
72
- const newHeight = (_c = (_b = (_a = entry.borderBoxSize) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.blockSize) !== null && _c !== void 0 ? _c : entry.contentRect.height;
73
- requestAnimationFrame(() => {
74
- if (newHeight !== 0 || this.children.length === 0) {
75
- this._originalHeight = `${newHeight}px`;
76
- }
77
- if (this.hidden) {
78
- this.style.height = '0px';
79
- }
80
- else {
81
- this.style.height = this._originalHeight;
82
- }
83
- });
47
+ this._forceHeightRecalculation();
84
48
  }, MUTATION_DEBOUNCE_MS);
85
49
  };
86
50
  this._setOriginalHeightValue = () => {
@@ -111,6 +75,7 @@ let HAccordionContent = class HAccordionContent extends PhoenixLightLitElement {
111
75
  };
112
76
  this.setAttribute('role', 'region');
113
77
  this._boundHandleTransitionEnd = this._handleTransitionEnd.bind(this);
78
+ this._boundHandleImageLoad = this._handleImageLoad.bind(this);
114
79
  }
115
80
  connectedCallback() {
116
81
  super.connectedCallback();
@@ -133,8 +98,30 @@ let HAccordionContent = class HAccordionContent extends PhoenixLightLitElement {
133
98
  this._accordionGroupProps.subscribe(this._accordionGroupPropsObserver);
134
99
  this._mutationObserver = new MutationObserver(this._handleMutation);
135
100
  this._mutationObserver.observe(this, { childList: true, subtree: true });
136
- this._resizeObserver = new ResizeObserver(this._handleContentResize);
137
- this._resizeObserver.observe(this);
101
+ this._setupImageLoadListeners();
102
+ }
103
+ _forceHeightRecalculation() {
104
+ if (this.hidden)
105
+ return;
106
+ requestAnimationFrame(() => {
107
+ this.style.height = 'auto';
108
+ requestAnimationFrame(() => {
109
+ this._setOriginalHeightValue();
110
+ this.style.height = this._originalHeight;
111
+ });
112
+ });
113
+ }
114
+ _setupImageLoadListeners() {
115
+ const images = this.querySelectorAll('img');
116
+ images.forEach((img) => {
117
+ if (!img.complete) {
118
+ img.addEventListener('load', this._boundHandleImageLoad, { once: true });
119
+ img.addEventListener('error', this._boundHandleImageLoad, { once: true });
120
+ }
121
+ });
122
+ }
123
+ _handleImageLoad() {
124
+ this._forceHeightRecalculation();
138
125
  }
139
126
  _setHeight(height) {
140
127
  this.style.height = height;
@@ -144,11 +131,15 @@ let HAccordionContent = class HAccordionContent extends PhoenixLightLitElement {
144
131
  this.setAttribute('labelledby', regionId);
145
132
  }
146
133
  disconnectedCallback() {
147
- var _a, _b, _c;
134
+ var _a, _b;
148
135
  super.disconnectedCallback();
149
136
  (_a = this._accordionGroupProps) === null || _a === void 0 ? void 0 : _a.unsubscribe(this._accordionGroupPropsObserver);
150
137
  (_b = this._mutationObserver) === null || _b === void 0 ? void 0 : _b.disconnect();
151
- (_c = this._resizeObserver) === null || _c === void 0 ? void 0 : _c.disconnect();
138
+ const images = this.querySelectorAll('img');
139
+ images.forEach((img) => {
140
+ img.removeEventListener('load', this._boundHandleImageLoad);
141
+ img.removeEventListener('error', this._boundHandleImageLoad);
142
+ });
152
143
  window.removeEventListener('resize', this._handleResize);
153
144
  this.removeEventListener('transitionend', this._boundHandleTransitionEnd);
154
145
  if (this._resizeDebounceTimer !== null) {
@@ -157,9 +148,6 @@ let HAccordionContent = class HAccordionContent extends PhoenixLightLitElement {
157
148
  if (this._mutationDebounceTimer !== null) {
158
149
  window.clearTimeout(this._mutationDebounceTimer);
159
150
  }
160
- if (this._resizeObserverDebounceTimer !== null) {
161
- window.clearTimeout(this._resizeObserverDebounceTimer);
162
- }
163
151
  }
164
152
  };
165
153
  __decorate([
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;"}
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;"}
package/package.json CHANGED
@@ -2,7 +2,7 @@
2
2
  "name": "@shoper/phoenix_design_system",
3
3
  "packageManager": "yarn@3.2.0",
4
4
  "sideEffects": false,
5
- "version": "1.18.11-3",
5
+ "version": "1.18.11-5",
6
6
  "description": "phoenix design system",
7
7
  "author": "zefirek",
8
8
  "license": "MIT",