@shoper/phoenix_design_system 1.7.0 → 1.7.1

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 +13 -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 +1 -0
  4. package/build/esm/packages/phoenix/src/components/accordion/accordion_content.js +13 -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
@@ -23,20 +23,22 @@ exports.HAccordionContent = class HAccordionContent extends phoenix_light_lit_el
23
23
  this.style.display = '';
24
24
  this.style.height = this._originalHeight;
25
25
  };
26
- this._setOriginalHeightValue = (rewriteHeight = false) => {
27
- const shouldApplyNewHeight = !this._originalHeight || rewriteHeight;
28
- if (!shouldApplyNewHeight)
29
- return;
26
+ this._setOriginalHeightValue = () => {
30
27
  const newHeight = this.getBoundingClientRect().height;
31
- if (newHeight === 0 && this.children.length > 0)
32
- return;
33
- this._originalHeight = `${newHeight}px`;
28
+ if (newHeight !== 0 || this.children.length === 0)
29
+ this._originalHeight = `${newHeight}px`;
34
30
  };
35
31
  this._expand = () => {
36
32
  this._setHeight(this._originalHeight);
33
+ setTimeout(() => {
34
+ this.style.height = 'auto';
35
+ }, this._transitionDuration);
37
36
  };
38
37
  this._collapse = () => {
39
- this._setHeight('0px');
38
+ this._setHeight(this._originalHeight);
39
+ requestAnimationFrame(() => {
40
+ this._setHeight('0px');
41
+ });
40
42
  };
41
43
  this.setAttribute('role', 'region');
42
44
  }
@@ -46,6 +48,7 @@ exports.HAccordionContent = class HAccordionContent extends phoenix_light_lit_el
46
48
  this._transitionController = new transition_controller.TransitionController(this, this.transitionName);
47
49
  this._subscribeObserver();
48
50
  window.addEventListener('resize', this._setStylingOptions);
51
+ this._transitionDuration = parseFloat(getComputedStyle(this).transitionDuration) * 1000;
49
52
  }
50
53
  firstUpdated(props) {
51
54
  super.firstUpdated(props);
@@ -59,8 +62,8 @@ exports.HAccordionContent = class HAccordionContent extends phoenix_light_lit_el
59
62
  });
60
63
  this._accordionGroupProps.subscribe(this._accordionGroupPropsObserver);
61
64
  const mutationObserver = new MutationObserver(() => {
62
- this.style.height = '';
63
- this._setOriginalHeightValue(true);
65
+ this.style.height = 'auto';
66
+ this._setOriginalHeightValue();
64
67
  this.hidden ? this._collapse() : this._expand();
65
68
  });
66
69
  mutationObserver.observe(this, { childList: true, subtree: true });
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;"}
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;"}
package/build/esm/packages/phoenix/src/components/accordion/accordion_content.d.ts CHANGED
@@ -7,6 +7,7 @@ export declare class HAccordionContent extends PhoenixLightLitElement {
7
7
  private _accordionGroupProps;
8
8
  private _accordionGroupPropsObserver;
9
9
  private _originalHeight;
10
+ private _transitionDuration;
10
11
  constructor();
11
12
  connectedCallback(): void;
12
13
  firstUpdated(props: PropertyValues): void;
package/build/esm/packages/phoenix/src/components/accordion/accordion_content.js CHANGED
@@ -19,20 +19,22 @@ let HAccordionContent = class HAccordionContent extends PhoenixLightLitElement {
19
19
  this.style.display = '';
20
20
  this.style.height = this._originalHeight;
21
21
  };
22
- this._setOriginalHeightValue = (rewriteHeight = false) => {
23
- const shouldApplyNewHeight = !this._originalHeight || rewriteHeight;
24
- if (!shouldApplyNewHeight)
25
- return;
22
+ this._setOriginalHeightValue = () => {
26
23
  const newHeight = this.getBoundingClientRect().height;
27
- if (newHeight === 0 && this.children.length > 0)
28
- return;
29
- this._originalHeight = `${newHeight}px`;
24
+ if (newHeight !== 0 || this.children.length === 0)
25
+ this._originalHeight = `${newHeight}px`;
30
26
  };
31
27
  this._expand = () => {
32
28
  this._setHeight(this._originalHeight);
29
+ setTimeout(() => {
30
+ this.style.height = 'auto';
31
+ }, this._transitionDuration);
33
32
  };
34
33
  this._collapse = () => {
35
- this._setHeight('0px');
34
+ this._setHeight(this._originalHeight);
35
+ requestAnimationFrame(() => {
36
+ this._setHeight('0px');
37
+ });
36
38
  };
37
39
  this.setAttribute('role', 'region');
38
40
  }
@@ -42,6 +44,7 @@ let HAccordionContent = class HAccordionContent extends PhoenixLightLitElement {
42
44
  this._transitionController = new TransitionController(this, this.transitionName);
43
45
  this._subscribeObserver();
44
46
  window.addEventListener('resize', this._setStylingOptions);
47
+ this._transitionDuration = parseFloat(getComputedStyle(this).transitionDuration) * 1000;
45
48
  }
46
49
  firstUpdated(props) {
47
50
  super.firstUpdated(props);
@@ -55,8 +58,8 @@ let HAccordionContent = class HAccordionContent extends PhoenixLightLitElement {
55
58
  });
56
59
  this._accordionGroupProps.subscribe(this._accordionGroupPropsObserver);
57
60
  const mutationObserver = new MutationObserver(() => {
58
- this.style.height = '';
59
- this._setOriginalHeightValue(true);
61
+ this.style.height = 'auto';
62
+ this._setOriginalHeightValue();
60
63
  this.hidden ? this._collapse() : this._expand();
61
64
  });
62
65
  mutationObserver.observe(this, { childList: true, subtree: true });
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;"}
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;"}
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.7.0",
5
+ "version": "1.7.1",
6
6
  "description": "phoenix design system",
7
7
  "author": "zefirek",
8
8
  "license": "MIT",