@shoper/phoenix_design_system 0.19.0 → 0.19.2

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 (10) hide show
  1. package/build/cjs/packages/phoenix/src/components/dropdown/dropdown.js +21 -19
  2. package/build/cjs/packages/phoenix/src/components/dropdown/dropdown.js.map +1 -1
  3. package/build/cjs/packages/phoenix/src/controllers/relative_position_controller/relative_position_controller.js +14 -2
  4. package/build/cjs/packages/phoenix/src/controllers/relative_position_controller/relative_position_controller.js.map +1 -1
  5. package/build/esm/packages/phoenix/src/components/dropdown/dropdown.d.ts +2 -2
  6. package/build/esm/packages/phoenix/src/components/dropdown/dropdown.js +22 -20
  7. package/build/esm/packages/phoenix/src/components/dropdown/dropdown.js.map +1 -1
  8. package/build/esm/packages/phoenix/src/controllers/relative_position_controller/relative_position_controller.js +14 -2
  9. package/build/esm/packages/phoenix/src/controllers/relative_position_controller/relative_position_controller.js.map +1 -1
  10. package/package.json +1 -1
package/build/cjs/packages/phoenix/src/components/dropdown/dropdown.js CHANGED
@@ -27,17 +27,17 @@ exports.HDropdown = HDropdown_1 = class HDropdown extends phoenix_light_lit_elem
27
27
  this.transition = 'direction';
28
28
  this.portalTarget = dropdown_constants.DEFAULT_DROPDOWN_PORTAL_NAME;
29
29
  this._backdropController = new backdrop_controller.BackdropController();
30
- this._handleClickOutside = (target) => {
30
+ this._handleClickOutside = async (target) => {
31
31
  var _a, _b;
32
32
  if (!this.opened)
33
33
  return;
34
34
  const clickedWithinNestedDropdown = (_a = this.$nestedDropdownContentElements) === null || _a === void 0 ? void 0 : _a.find((element) => element.contains(target));
35
35
  const shouldHideElements = !((_b = this.$dropdownContent) === null || _b === void 0 ? void 0 : _b.contains(target)) && !this.contains(target) && !clickedWithinNestedDropdown;
36
36
  if (shouldHideElements)
37
- this.hide();
37
+ await this._hideDropdownsSequentially();
38
38
  };
39
- this.toggle = () => {
40
- this.opened ? this.hide() : this.show();
39
+ this.toggle = async () => {
40
+ this.opened ? await this._hideDropdownsSequentially() : await this.show();
41
41
  };
42
42
  this.show = async () => {
43
43
  return new Promise((resolve) => {
@@ -70,6 +70,18 @@ exports.HDropdown = HDropdown_1 = class HDropdown extends phoenix_light_lit_elem
70
70
  return;
71
71
  this._backdropController.show();
72
72
  };
73
+ this._hideDropdownsSequentially = async () => {
74
+ if (!this.$nestedDropdownContentElements) {
75
+ await this.hide();
76
+ return;
77
+ }
78
+ for (const { name: dropdownName } of this.$nestedDropdownContentElements.slice().reverse()) {
79
+ const $currentDropdown = document.querySelector(`${dropdown_constants.DROPDOWN_CONTAINER_NAME}[name="${dropdownName}"]`);
80
+ if ($currentDropdown && $currentDropdown.opened)
81
+ await $currentDropdown.hide();
82
+ }
83
+ await this.hide();
84
+ };
73
85
  this.hide = async () => new Promise((resolve) => {
74
86
  var _a;
75
87
  (_a = this.$dropdownToggler) === null || _a === void 0 ? void 0 : _a.setAttribute('aria-expanded', 'false');
@@ -124,16 +136,8 @@ exports.HDropdown = HDropdown_1 = class HDropdown extends phoenix_light_lit_elem
124
136
  await this.show();
125
137
  return;
126
138
  }
127
- if (!isHoveredWithinDropdown && this.opened) {
128
- if (!this.$hoverableDropdownContentElements) {
129
- await this.hide();
130
- return;
131
- }
132
- this.$hoverableDropdownContentElements.forEach(async ({ name: dropdownName }) => {
133
- const dropdown = document.querySelector(`${dropdown_constants.DROPDOWN_CONTAINER_NAME}[name="${dropdownName}"]`);
134
- await dropdown.hide();
135
- });
136
- }
139
+ if (!isHoveredWithinDropdown && this.opened)
140
+ await this._hideDropdownsSequentially();
137
141
  };
138
142
  this._positionDropdownContent = () => {
139
143
  requestAnimationFrame(() => {
@@ -159,7 +163,7 @@ exports.HDropdown = HDropdown_1 = class HDropdown extends phoenix_light_lit_elem
159
163
  direction: this.direction,
160
164
  relativeElement: this.$dropdownToggler,
161
165
  elementToPosition: this.$dropdownContent,
162
- disablePositioningOnCondition: () => window.innerWidth < global_constants.BREAKPOINTS.xs,
166
+ disablePositioningOnCondition: () => window.innerWidth < global_constants.BREAKPOINTS.xs || !this.opened,
163
167
  portalElementsNames: [dropdown_constants.DROPDOWN_CONTENT_NAME]
164
168
  });
165
169
  if (!this._clickOutsideController)
@@ -169,9 +173,6 @@ exports.HDropdown = HDropdown_1 = class HDropdown extends phoenix_light_lit_elem
169
173
  name: this.name,
170
174
  action: this._handleClickOutside
171
175
  });
172
- if (this.toggleOnHover && !this.$hoverableDropdownContentElements) {
173
- this.$hoverableDropdownContentElements = [...this.querySelectorAll(dropdown_constants.DROPDOWN_CONTENT_NAME)];
174
- }
175
176
  this._setupListeners();
176
177
  this._setupInitialDropdownProperties();
177
178
  }
@@ -210,6 +211,7 @@ exports.HDropdown = HDropdown_1 = class HDropdown extends phoenix_light_lit_elem
210
211
  }
211
212
  }
212
213
  _isHoveredWithinDropdown(element) {
214
+ var _a;
213
215
  if (element === this)
214
216
  return true;
215
217
  if (element === this.$dropdownContent)
@@ -220,7 +222,7 @@ exports.HDropdown = HDropdown_1 = class HDropdown extends phoenix_light_lit_elem
220
222
  const $closestDropdownContent = element.closest(dropdown_constants.DROPDOWN_CONTENT_NAME);
221
223
  const isDescendantOfContent = this.$dropdownContent &&
222
224
  $closestDropdownContent !== null &&
223
- !!this.$hoverableDropdownContentElements.find((content) => content.name === $closestDropdownContent.name);
225
+ !!((_a = this.$nestedDropdownContentElements) === null || _a === void 0 ? void 0 : _a.find((content) => content.name === $closestDropdownContent.name));
224
226
  if (isDescendantOfContent)
225
227
  return true;
226
228
  return false;
package/build/cjs/packages/phoenix/src/components/dropdown/dropdown.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,uBAAuB,4CAAgD;AACvE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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,uBAAuB,4CAAgD;AACvE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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/cjs/packages/phoenix/src/controllers/relative_position_controller/relative_position_controller.js CHANGED
@@ -28,10 +28,22 @@ class RelativePositionController {
28
28
  _RelativePositionController_hasPositioningBeenDisabled.set(this, void 0);
29
29
  _RelativePositionController_doesCurrentlyHaveShrinkMode.set(this, void 0);
30
30
  _RelativePositionController_throttledReposition.set(this, throttle['default'](() => {
31
- tslib_es6.__classPrivateFieldGet(this, _RelativePositionController_disablePositioningOnCondition, "f").call(this) ? this.disableRelativePositioning() : this.position(true);
31
+ if (tslib_es6.__classPrivateFieldGet(this, _RelativePositionController_disablePositioningOnCondition, "f").call(this)) {
32
+ this.disableRelativePositioning();
33
+ window.removeEventListener('resize', tslib_es6.__classPrivateFieldGet(this, _RelativePositionController_throttledReposition, "f"));
34
+ return;
35
+ }
36
+ this.position(true);
37
+ window.addEventListener('resize', tslib_es6.__classPrivateFieldGet(this, _RelativePositionController_throttledReposition, "f"));
32
38
  }, relative_position_controller_constants.DEFAULT_THROTTLE_WAIT_TIME));
33
39
  _RelativePositionController_throttledRepositionForScroll.set(this, throttle['default'](() => {
34
- tslib_es6.__classPrivateFieldGet(this, _RelativePositionController_disablePositioningOnCondition, "f").call(this) ? this.disableRelativePositioning() : this.position(true);
40
+ if (tslib_es6.__classPrivateFieldGet(this, _RelativePositionController_disablePositioningOnCondition, "f").call(this)) {
41
+ this.disableRelativePositioning();
42
+ window.removeEventListener('resize', tslib_es6.__classPrivateFieldGet(this, _RelativePositionController_throttledRepositionForScroll, "f"));
43
+ return;
44
+ }
45
+ this.position(true);
46
+ window.addEventListener('resize', tslib_es6.__classPrivateFieldGet(this, _RelativePositionController_throttledRepositionForScroll, "f"));
35
47
  }, relative_position_controller_constants.DEFAULT_SCROLL_THROTTLE_WAIT_TIME));
36
48
  tslib_es6.__classPrivateFieldSet(this, _RelativePositionController_host, host, "f");
37
49
  tslib_es6.__classPrivateFieldSet(this, _RelativePositionController_container, container, "f");
package/build/cjs/packages/phoenix/src/controllers/relative_position_controller/relative_position_controller.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,uBAAuB,4CAAgD;AACvE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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,uBAAuB,4CAAgD;AACvE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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/dropdown/dropdown.d.ts CHANGED
@@ -13,7 +13,6 @@ export declare class HDropdown extends PhoenixLightLitElement implements IDropdo
13
13
  $dropdownToggler: HDropdownToggler | null;
14
14
  $dropdownContent: HDropdownContent | null;
15
15
  $nestedDropdownContentElements?: HDropdownContent[];
16
- $hoverableDropdownContentElements: HDropdownContent[];
17
16
  private _positionController;
18
17
  private _clickOutsideController;
19
18
  private _dropdownContentChildrenHeight;
@@ -23,9 +22,10 @@ export declare class HDropdown extends PhoenixLightLitElement implements IDropdo
23
22
  private static _appendDropdownPortal;
24
23
  private _setupListeners;
25
24
  private _handleClickOutside;
26
- toggle: () => void;
25
+ toggle: () => Promise<void>;
27
26
  show: () => Promise<void>;
28
27
  private _dispatchShowDropdownEvent;
28
+ private _hideDropdownsSequentially;
29
29
  hide: () => Promise<void>;
30
30
  private _dispatchHideDropdownEvent;
31
31
  private _handleDisabledPositioning;
package/build/esm/packages/phoenix/src/components/dropdown/dropdown.js CHANGED
@@ -6,7 +6,7 @@ import { html } from 'lit-html';
6
6
  import { BackdropController } from '../backdrop/controller/backdrop_controller.js';
7
7
  import { property } from '@lit/reactive-element/decorators.js';
8
8
  import { BREAKPOINTS, SCROLLABLE_CLASS_NAME } from '../../global_constants.js';
9
- import { DEFAULT_DROPDOWN_PORTAL_NAME, DROPDOWN_CONTENT_VISIBLE_CLASS, DROPDOWN_CONTENT_SHOW, DROPDOWN_EVENTS, DROPDOWN_CONTENT_HIDE, DROPDOWN_CONTAINER_NAME, DROPDOWN_CONTENT_NAME, DROPDOWN_TOGGLER_NAME } from './dropdown_constants.js';
9
+ import { DEFAULT_DROPDOWN_PORTAL_NAME, DROPDOWN_CONTENT_VISIBLE_CLASS, DROPDOWN_CONTENT_SHOW, DROPDOWN_EVENTS, DROPDOWN_CONTAINER_NAME, DROPDOWN_CONTENT_HIDE, DROPDOWN_CONTENT_NAME, DROPDOWN_TOGGLER_NAME } from './dropdown_constants.js';
10
10
  import { DIRECTIONS, RELATIVE_POSITION_CONTROLLER_EVENTS, DEFAULT_THROTTLE_WAIT_TIME } from '../../controllers/relative_position_controller/relative_position_controller_constants.js';
11
11
  import { ClickOutsideController } from '../../controllers/click_outside_controller/click_outside_controller.js';
12
12
  import throttle_1 from '../../../../../external/lodash/throttle.js';
@@ -23,17 +23,17 @@ let HDropdown = HDropdown_1 = class HDropdown extends PhoenixLightLitElement {
23
23
  this.transition = 'direction';
24
24
  this.portalTarget = DEFAULT_DROPDOWN_PORTAL_NAME;
25
25
  this._backdropController = new BackdropController();
26
- this._handleClickOutside = (target) => {
26
+ this._handleClickOutside = async (target) => {
27
27
  var _a, _b;
28
28
  if (!this.opened)
29
29
  return;
30
30
  const clickedWithinNestedDropdown = (_a = this.$nestedDropdownContentElements) === null || _a === void 0 ? void 0 : _a.find((element) => element.contains(target));
31
31
  const shouldHideElements = !((_b = this.$dropdownContent) === null || _b === void 0 ? void 0 : _b.contains(target)) && !this.contains(target) && !clickedWithinNestedDropdown;
32
32
  if (shouldHideElements)
33
- this.hide();
33
+ await this._hideDropdownsSequentially();
34
34
  };
35
- this.toggle = () => {
36
- this.opened ? this.hide() : this.show();
35
+ this.toggle = async () => {
36
+ this.opened ? await this._hideDropdownsSequentially() : await this.show();
37
37
  };
38
38
  this.show = async () => {
39
39
  return new Promise((resolve) => {
@@ -66,6 +66,18 @@ let HDropdown = HDropdown_1 = class HDropdown extends PhoenixLightLitElement {
66
66
  return;
67
67
  this._backdropController.show();
68
68
  };
69
+ this._hideDropdownsSequentially = async () => {
70
+ if (!this.$nestedDropdownContentElements) {
71
+ await this.hide();
72
+ return;
73
+ }
74
+ for (const { name: dropdownName } of this.$nestedDropdownContentElements.slice().reverse()) {
75
+ const $currentDropdown = document.querySelector(`${DROPDOWN_CONTAINER_NAME}[name="${dropdownName}"]`);
76
+ if ($currentDropdown && $currentDropdown.opened)
77
+ await $currentDropdown.hide();
78
+ }
79
+ await this.hide();
80
+ };
69
81
  this.hide = async () => new Promise((resolve) => {
70
82
  var _a;
71
83
  (_a = this.$dropdownToggler) === null || _a === void 0 ? void 0 : _a.setAttribute('aria-expanded', 'false');
@@ -120,16 +132,8 @@ let HDropdown = HDropdown_1 = class HDropdown extends PhoenixLightLitElement {
120
132
  await this.show();
121
133
  return;
122
134
  }
123
- if (!isHoveredWithinDropdown && this.opened) {
124
- if (!this.$hoverableDropdownContentElements) {
125
- await this.hide();
126
- return;
127
- }
128
- this.$hoverableDropdownContentElements.forEach(async ({ name: dropdownName }) => {
129
- const dropdown = document.querySelector(`${DROPDOWN_CONTAINER_NAME}[name="${dropdownName}"]`);
130
- await dropdown.hide();
131
- });
132
- }
135
+ if (!isHoveredWithinDropdown && this.opened)
136
+ await this._hideDropdownsSequentially();
133
137
  };
134
138
  this._positionDropdownContent = () => {
135
139
  requestAnimationFrame(() => {
@@ -155,7 +159,7 @@ let HDropdown = HDropdown_1 = class HDropdown extends PhoenixLightLitElement {
155
159
  direction: this.direction,
156
160
  relativeElement: this.$dropdownToggler,
157
161
  elementToPosition: this.$dropdownContent,
158
- disablePositioningOnCondition: () => window.innerWidth < BREAKPOINTS.xs,
162
+ disablePositioningOnCondition: () => window.innerWidth < BREAKPOINTS.xs || !this.opened,
159
163
  portalElementsNames: [DROPDOWN_CONTENT_NAME]
160
164
  });
161
165
  if (!this._clickOutsideController)
@@ -165,9 +169,6 @@ let HDropdown = HDropdown_1 = class HDropdown extends PhoenixLightLitElement {
165
169
  name: this.name,
166
170
  action: this._handleClickOutside
167
171
  });
168
- if (this.toggleOnHover && !this.$hoverableDropdownContentElements) {
169
- this.$hoverableDropdownContentElements = [...this.querySelectorAll(DROPDOWN_CONTENT_NAME)];
170
- }
171
172
  this._setupListeners();
172
173
  this._setupInitialDropdownProperties();
173
174
  }
@@ -206,6 +207,7 @@ let HDropdown = HDropdown_1 = class HDropdown extends PhoenixLightLitElement {
206
207
  }
207
208
  }
208
209
  _isHoveredWithinDropdown(element) {
210
+ var _a;
209
211
  if (element === this)
210
212
  return true;
211
213
  if (element === this.$dropdownContent)
@@ -216,7 +218,7 @@ let HDropdown = HDropdown_1 = class HDropdown extends PhoenixLightLitElement {
216
218
  const $closestDropdownContent = element.closest(DROPDOWN_CONTENT_NAME);
217
219
  const isDescendantOfContent = this.$dropdownContent &&
218
220
  $closestDropdownContent !== null &&
219
- !!this.$hoverableDropdownContentElements.find((content) => content.name === $closestDropdownContent.name);
221
+ !!((_a = this.$nestedDropdownContentElements) === null || _a === void 0 ? void 0 : _a.find((content) => content.name === $closestDropdownContent.name));
220
222
  if (isDescendantOfContent)
221
223
  return true;
222
224
  return false;
package/build/esm/packages/phoenix/src/components/dropdown/dropdown.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,uBAAuB,4CAAgD;AACvE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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,uBAAuB,4CAAgD;AACvE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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/controllers/relative_position_controller/relative_position_controller.js CHANGED
@@ -24,10 +24,22 @@ class RelativePositionController {
24
24
  _RelativePositionController_hasPositioningBeenDisabled.set(this, void 0);
25
25
  _RelativePositionController_doesCurrentlyHaveShrinkMode.set(this, void 0);
26
26
  _RelativePositionController_throttledReposition.set(this, throttle_1(() => {
27
- __classPrivateFieldGet(this, _RelativePositionController_disablePositioningOnCondition, "f").call(this) ? this.disableRelativePositioning() : this.position(true);
27
+ if (__classPrivateFieldGet(this, _RelativePositionController_disablePositioningOnCondition, "f").call(this)) {
28
+ this.disableRelativePositioning();
29
+ window.removeEventListener('resize', __classPrivateFieldGet(this, _RelativePositionController_throttledReposition, "f"));
30
+ return;
31
+ }
32
+ this.position(true);
33
+ window.addEventListener('resize', __classPrivateFieldGet(this, _RelativePositionController_throttledReposition, "f"));
28
34
  }, DEFAULT_THROTTLE_WAIT_TIME));
29
35
  _RelativePositionController_throttledRepositionForScroll.set(this, throttle_1(() => {
30
- __classPrivateFieldGet(this, _RelativePositionController_disablePositioningOnCondition, "f").call(this) ? this.disableRelativePositioning() : this.position(true);
36
+ if (__classPrivateFieldGet(this, _RelativePositionController_disablePositioningOnCondition, "f").call(this)) {
37
+ this.disableRelativePositioning();
38
+ window.removeEventListener('resize', __classPrivateFieldGet(this, _RelativePositionController_throttledRepositionForScroll, "f"));
39
+ return;
40
+ }
41
+ this.position(true);
42
+ window.addEventListener('resize', __classPrivateFieldGet(this, _RelativePositionController_throttledRepositionForScroll, "f"));
31
43
  }, DEFAULT_SCROLL_THROTTLE_WAIT_TIME));
32
44
  __classPrivateFieldSet(this, _RelativePositionController_host, host, "f");
33
45
  __classPrivateFieldSet(this, _RelativePositionController_container, container, "f");
package/build/esm/packages/phoenix/src/controllers/relative_position_controller/relative_position_controller.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,+DAA+D,4CAAgD;AAC/G;AACA;AACA;AACA;AACA,uBAAuB,4CAAgD;AACvE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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,+DAA+D,4CAAgD;AAC/G;AACA;AACA;AACA;AACA,uBAAuB,4CAAgD;AACvE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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": "0.19.0",
5
+ "version": "0.19.2",
6
6
  "description": "phoenix design system",
7
7
  "author": "zefirek",
8
8
  "license": "MIT",