@shoper/phoenix_design_system 0.14.2 → 0.14.3

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 (20) hide show
  1. package/build/cjs/packages/phoenix/src/components/dropdown/dropdown.js +25 -14
  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_calculator.js +7 -7
  4. package/build/cjs/packages/phoenix/src/controllers/relative_position_controller/relative_position_controller.js +52 -47
  5. package/build/cjs/packages/phoenix/src/controllers/relative_position_controller/relative_position_controller.js.map +1 -1
  6. package/build/cjs/packages/phoenix/src/controllers/relative_position_controller/relative_position_controller_constants.js +7 -1
  7. package/build/cjs/packages/phoenix/src/controllers/relative_position_controller/relative_position_controller_constants.js.map +1 -1
  8. package/build/esm/packages/phoenix/src/components/dropdown/dropdown.d.ts +3 -0
  9. package/build/esm/packages/phoenix/src/components/dropdown/dropdown.js +26 -15
  10. package/build/esm/packages/phoenix/src/components/dropdown/dropdown.js.map +1 -1
  11. package/build/esm/packages/phoenix/src/controllers/relative_position_controller/relative_position_calculator.d.ts +1 -1
  12. package/build/esm/packages/phoenix/src/controllers/relative_position_controller/relative_position_calculator.js +7 -7
  13. package/build/esm/packages/phoenix/src/controllers/relative_position_controller/relative_position_controller.d.ts +5 -2
  14. package/build/esm/packages/phoenix/src/controllers/relative_position_controller/relative_position_controller.js +53 -48
  15. package/build/esm/packages/phoenix/src/controllers/relative_position_controller/relative_position_controller.js.map +1 -1
  16. package/build/esm/packages/phoenix/src/controllers/relative_position_controller/relative_position_controller_constants.d.ts +4 -0
  17. package/build/esm/packages/phoenix/src/controllers/relative_position_controller/relative_position_controller_constants.js +7 -2
  18. package/build/esm/packages/phoenix/src/controllers/relative_position_controller/relative_position_controller_constants.js.map +1 -1
  19. package/build/esm/packages/phoenix/src/controllers/relative_position_controller/relative_position_controller_types.d.ts +2 -2
  20. package/package.json +1 -1
package/build/cjs/packages/phoenix/src/components/dropdown/dropdown.js CHANGED
@@ -59,10 +59,7 @@ exports.HDropdown = HDropdown_1 = class HDropdown extends phoenix_light_lit_elem
59
59
  this.dispatchEvent(showDropdownEvent);
60
60
  if (window.innerWidth >= global_constants.BREAKPOINTS.xs)
61
61
  return;
62
- const showBackdropEvent = new Event(backdrop_constants.BACKDROP_EVENTS.show, {
63
- bubbles: true
64
- });
65
- document.dispatchEvent(showBackdropEvent);
62
+ this._showBackdrop();
66
63
  };
67
64
  this.hide = async () => new Promise((resolve) => {
68
65
  var _a;
@@ -88,10 +85,7 @@ exports.HDropdown = HDropdown_1 = class HDropdown extends phoenix_light_lit_elem
88
85
  this.dispatchEvent(hideDropdownEvent);
89
86
  if (window.innerWidth >= global_constants.BREAKPOINTS.xs)
90
87
  return;
91
- const hideBackdropEvent = new Event(backdrop_constants.BACKDROP_EVENTS.hide, {
92
- bubbles: true
93
- });
94
- document.dispatchEvent(hideBackdropEvent);
88
+ this._hideBackdrop();
95
89
  };
96
90
  this._observeScrollToggling = lodash["default"].throttle(() => {
97
91
  this._toggleScroll();
@@ -143,7 +137,7 @@ exports.HDropdown = HDropdown_1 = class HDropdown extends phoenix_light_lit_elem
143
137
  direction: this.direction,
144
138
  relativeElement: this.$dropdownToggler,
145
139
  elementToPosition: this.$dropdownContent,
146
- shouldDisablePositioning: () => window.innerWidth < global_constants.BREAKPOINTS.xs,
140
+ disablePositioningOnCondition: () => window.innerWidth < global_constants.BREAKPOINTS.xs,
147
141
  portalElementsNames: [dropdown_constants.DROPDOWN_CONTENT_NAME]
148
142
  });
149
143
  if (!this._clickOutsideController)
@@ -169,6 +163,8 @@ exports.HDropdown = HDropdown_1 = class HDropdown extends phoenix_light_lit_elem
169
163
  _setupListeners() {
170
164
  var _a;
171
165
  this.addEventListener(click_outside_controller_messages.CLICK_OUTSIDE_CONTROLLER_MESSAGES.clickedOutside, this._handleClickOutside);
166
+ this.addEventListener(relative_position_controller_constants.RELATIVE_POSITION_CONTROLLER_EVENTS.disabledPositioning, this._handleDisabledPositioning);
167
+ this.addEventListener(relative_position_controller_constants.RELATIVE_POSITION_CONTROLLER_EVENTS.enabledPositioning, this._hideBackdrop);
172
168
  (_a = this.$dropdownToggler) === null || _a === void 0 ? void 0 : _a.addEventListener('toggle', this.toggle);
173
169
  window.addEventListener('resize', this._observeScrollToggling);
174
170
  if (this.toggleOnHover)
@@ -184,6 +180,22 @@ exports.HDropdown = HDropdown_1 = class HDropdown extends phoenix_light_lit_elem
184
180
  if (shouldHideElements)
185
181
  this.hide();
186
182
  }
183
+ _handleDisabledPositioning() {
184
+ if (this.opened)
185
+ this._showBackdrop();
186
+ }
187
+ _showBackdrop() {
188
+ const showBackdropEvent = new Event(backdrop_constants.BACKDROP_EVENTS.show, {
189
+ bubbles: true
190
+ });
191
+ document.dispatchEvent(showBackdropEvent);
192
+ }
193
+ _hideBackdrop() {
194
+ const hideBackdropEvent = new Event(backdrop_constants.BACKDROP_EVENTS.hide, {
195
+ bubbles: true
196
+ });
197
+ document.dispatchEvent(hideBackdropEvent);
198
+ }
187
199
  _toggleScroll() {
188
200
  var _a, _b;
189
201
  if (window.innerWidth >= global_constants.BREAKPOINTS.xs && this._hasScrollableClassInitially)
@@ -192,6 +204,10 @@ exports.HDropdown = HDropdown_1 = class HDropdown extends phoenix_light_lit_elem
192
204
  (_a = this.$dropdownContent) === null || _a === void 0 ? void 0 : _a.classList.remove(global_constants.SCROLLABLE_CLASS_NAME);
193
205
  return;
194
206
  }
207
+ if (!this._dropdownContentChildrenHeight && this.$dropdownContent)
208
+ this._dropdownContentChildrenHeight = [...this.$dropdownContent.children].reduce((totalHeight, currentChild) => {
209
+ return totalHeight + (parseInt(getComputedStyle(currentChild).height.replace('px', '')) || 0);
210
+ }, 0);
195
211
  if (this._dropdownContentChildrenHeight > window.innerHeight && !this._hasScrollableClassInitially) {
196
212
  (_b = this.$dropdownContent) === null || _b === void 0 ? void 0 : _b.classList.add(global_constants.SCROLLABLE_CLASS_NAME);
197
213
  }
@@ -215,11 +231,6 @@ exports.HDropdown = HDropdown_1 = class HDropdown extends phoenix_light_lit_elem
215
231
  _setupInitialDropdownProperties() {
216
232
  if (!this.$dropdownContent)
217
233
  return;
218
- const $dropdownContentChildrenArray = [...this.$dropdownContent.children];
219
- if (!this._dropdownContentChildrenHeight)
220
- this._dropdownContentChildrenHeight = $dropdownContentChildrenArray.reduce((totalHeight, currentChild) => {
221
- return totalHeight + (parseInt(getComputedStyle(currentChild).height.replace('px', '')) || 0);
222
- }, 0);
223
234
  if (!this._hasScrollableClassInitially)
224
235
  this._hasScrollableClassInitially = this.$dropdownContent.classList.contains(global_constants.SCROLLABLE_CLASS_NAME);
225
236
  }
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;AACA;AACA,qBAAqB,0CAA8C;AACnE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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,qBAAqB,0CAA8C;AACnE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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_calculator.js CHANGED
@@ -5,22 +5,22 @@ Object.defineProperty(exports, '__esModule', { value: true });
5
5
  var tslib_es6 = require('../../../../../external/tslib/tslib.es6.js');
6
6
  var relative_position_controller_constants = require('./relative_position_controller_constants.js');
7
7
 
8
- var _PositionCalculator_direction, _PositionCalculator_relativeElementRect, _PositionCalculator_positionElementRect, _PositionCalculator_nearestNonStaticElementFromElementToPositionRect, _PositionCalculator_containerRect, _PositionCalculator_documentHeight, _PositionCalculator_disableRepositioning;
8
+ var _PositionCalculator_direction, _PositionCalculator_relativeElementRect, _PositionCalculator_positionElementRect, _PositionCalculator_nearestNonStaticElementFromElementToPositionRect, _PositionCalculator_containerRect, _PositionCalculator_documentHeight, _PositionCalculator_shouldNotReposition;
9
9
  class PositionCalculator {
10
- constructor({ direction, relativeElementRect, positionElementRect, container = document.body, nearestNonStaticElementFromElementToPositionRect, disableRepositioning }) {
10
+ constructor({ direction, relativeElementRect, positionElementRect, container = document.body, nearestNonStaticElementFromElementToPositionRect, shouldNotReposition }) {
11
11
  _PositionCalculator_direction.set(this, void 0);
12
12
  _PositionCalculator_relativeElementRect.set(this, void 0);
13
13
  _PositionCalculator_positionElementRect.set(this, void 0);
14
14
  _PositionCalculator_nearestNonStaticElementFromElementToPositionRect.set(this, void 0);
15
15
  _PositionCalculator_containerRect.set(this, void 0);
16
16
  _PositionCalculator_documentHeight.set(this, void 0);
17
- _PositionCalculator_disableRepositioning.set(this, void 0);
17
+ _PositionCalculator_shouldNotReposition.set(this, void 0);
18
18
  tslib_es6.__classPrivateFieldSet(this, _PositionCalculator_direction, direction, "f");
19
19
  tslib_es6.__classPrivateFieldSet(this, _PositionCalculator_relativeElementRect, relativeElementRect, "f");
20
20
  tslib_es6.__classPrivateFieldSet(this, _PositionCalculator_positionElementRect, positionElementRect, "f");
21
21
  tslib_es6.__classPrivateFieldSet(this, _PositionCalculator_nearestNonStaticElementFromElementToPositionRect, nearestNonStaticElementFromElementToPositionRect, "f");
22
22
  tslib_es6.__classPrivateFieldSet(this, _PositionCalculator_containerRect, container.getBoundingClientRect(), "f");
23
- tslib_es6.__classPrivateFieldSet(this, _PositionCalculator_disableRepositioning, !!disableRepositioning, "f");
23
+ tslib_es6.__classPrivateFieldSet(this, _PositionCalculator_shouldNotReposition, !!shouldNotReposition, "f");
24
24
  const body = document.body;
25
25
  const documentElement = document.documentElement;
26
26
  tslib_es6.__classPrivateFieldSet(this, _PositionCalculator_documentHeight, Math.max(body.scrollHeight, body.offsetHeight, documentElement.clientHeight, documentElement.scrollHeight, documentElement.offsetHeight), "f");
@@ -52,7 +52,7 @@ class PositionCalculator {
52
52
  const centerOfRelativeElement = (topSideOfRelativeElement + bottomSideOfRelativeElement) / 2;
53
53
  switch (side) {
54
54
  case relative_position_controller_constants.CALCULATOR_DIRECTIONS.top:
55
- if (tslib_es6.__classPrivateFieldGet(this, _PositionCalculator_disableRepositioning, "f"))
55
+ if (tslib_es6.__classPrivateFieldGet(this, _PositionCalculator_shouldNotReposition, "f"))
56
56
  return { top: topSideOfRelativeElement, calculatedSide: relative_position_controller_constants.CALCULATOR_DIRECTIONS.top };
57
57
  if (!this._canFitTopSide() && !this._canFitBottomSide() && !this._canFitCenter(centerOfRelativeElement))
58
58
  return { top: bottomSideOfRelativeElement, calculatedSide: relative_position_controller_constants.CALCULATOR_DIRECTIONS.bottom, shrinkMode: true };
@@ -62,7 +62,7 @@ class PositionCalculator {
62
62
  return { top: bottomSideOfRelativeElement, calculatedSide: relative_position_controller_constants.CALCULATOR_DIRECTIONS.bottom };
63
63
  return { top: topSideOfRelativeElement, calculatedSide: relative_position_controller_constants.CALCULATOR_DIRECTIONS.top };
64
64
  case relative_position_controller_constants.CALCULATOR_DIRECTIONS.bottom:
65
- if (tslib_es6.__classPrivateFieldGet(this, _PositionCalculator_disableRepositioning, "f"))
65
+ if (tslib_es6.__classPrivateFieldGet(this, _PositionCalculator_shouldNotReposition, "f"))
66
66
  return { top: bottomSideOfRelativeElement, calculatedSide: relative_position_controller_constants.CALCULATOR_DIRECTIONS.bottom };
67
67
  if (!this._canFitTopSide() && !this._canFitBottomSide() && !this._canFitCenter(centerOfRelativeElement))
68
68
  return { top: bottomSideOfRelativeElement, calculatedSide: relative_position_controller_constants.CALCULATOR_DIRECTIONS.bottom, shrinkMode: true };
@@ -105,7 +105,7 @@ class PositionCalculator {
105
105
  }
106
106
  }
107
107
  }
108
- _PositionCalculator_direction = new WeakMap(), _PositionCalculator_relativeElementRect = new WeakMap(), _PositionCalculator_positionElementRect = new WeakMap(), _PositionCalculator_nearestNonStaticElementFromElementToPositionRect = new WeakMap(), _PositionCalculator_containerRect = new WeakMap(), _PositionCalculator_documentHeight = new WeakMap(), _PositionCalculator_disableRepositioning = new WeakMap();
108
+ _PositionCalculator_direction = new WeakMap(), _PositionCalculator_relativeElementRect = new WeakMap(), _PositionCalculator_positionElementRect = new WeakMap(), _PositionCalculator_nearestNonStaticElementFromElementToPositionRect = new WeakMap(), _PositionCalculator_containerRect = new WeakMap(), _PositionCalculator_documentHeight = new WeakMap(), _PositionCalculator_shouldNotReposition = new WeakMap();
109
109
 
110
110
  exports.PositionCalculator = PositionCalculator;
111
111
  //# sourceMappingURL=relative_position_calculator.js.map
package/build/cjs/packages/phoenix/src/controllers/relative_position_controller/relative_position_controller.js CHANGED
@@ -9,9 +9,9 @@ require('lit');
9
9
  var global_constants = require('../../global_constants.js');
10
10
  var lodash = require('../../../../../external/lodash/lodash.js');
11
11
 
12
- var _RelativePositionController_host, _RelativePositionController_container, _RelativePositionController_nearestNonStaticElementFromElementToPosition, _RelativePositionController_direction, _RelativePositionController_nearestScrollableElement, _RelativePositionController_relativeElement, _RelativePositionController_elementToPosition, _RelativePositionController_shouldDisablePositioning, _RelativePositionController_portalElementsNames, _RelativePositionController_isInitiallyScrollable, _RelativePositionController_initialMaxHeight, _RelativePositionController_initialHeight, _RelativePositionController_calculatedDirection, _RelativePositionController_throttledReposition, _RelativePositionController_throttledRepositionForScroll;
12
+ var _RelativePositionController_host, _RelativePositionController_container, _RelativePositionController_nearestNonStaticElementFromElementToPosition, _RelativePositionController_direction, _RelativePositionController_nearestScrollableElement, _RelativePositionController_relativeElement, _RelativePositionController_elementToPosition, _RelativePositionController_disablePositioningOnCondition, _RelativePositionController_portalElementsNames, _RelativePositionController_isInitiallyScrollable, _RelativePositionController_initialMaxHeight, _RelativePositionController_initialHeight, _RelativePositionController_calculatedDirection, _RelativePositionController_hasPositioningBeenDisabled, _RelativePositionController_doesCurrentlyHaveShrinkMode, _RelativePositionController_throttledReposition, _RelativePositionController_throttledRepositionForScroll;
13
13
  class RelativePositionController {
14
- constructor({ host, container, direction, relativeElement, elementToPosition, shouldDisablePositioning, portalElementsNames = [] }) {
14
+ constructor({ host, container, direction, relativeElement, elementToPosition, disablePositioningOnCondition = () => true, portalElementsNames = [] }) {
15
15
  _RelativePositionController_host.set(this, void 0);
16
16
  _RelativePositionController_container.set(this, void 0);
17
17
  _RelativePositionController_nearestNonStaticElementFromElementToPosition.set(this, void 0);
@@ -19,40 +19,32 @@ class RelativePositionController {
19
19
  _RelativePositionController_nearestScrollableElement.set(this, void 0);
20
20
  _RelativePositionController_relativeElement.set(this, void 0);
21
21
  _RelativePositionController_elementToPosition.set(this, void 0);
22
- _RelativePositionController_shouldDisablePositioning.set(this, void 0);
22
+ _RelativePositionController_disablePositioningOnCondition.set(this, void 0);
23
23
  _RelativePositionController_portalElementsNames.set(this, void 0);
24
24
  _RelativePositionController_isInitiallyScrollable.set(this, void 0);
25
25
  _RelativePositionController_initialMaxHeight.set(this, void 0);
26
26
  _RelativePositionController_initialHeight.set(this, void 0);
27
27
  _RelativePositionController_calculatedDirection.set(this, void 0);
28
+ _RelativePositionController_hasPositioningBeenDisabled.set(this, void 0);
29
+ _RelativePositionController_doesCurrentlyHaveShrinkMode.set(this, void 0);
28
30
  _RelativePositionController_throttledReposition.set(this, lodash["default"].throttle(() => {
29
- if (!tslib_es6.__classPrivateFieldGet(this, _RelativePositionController_shouldDisablePositioning, "f")) {
30
- this.position(true);
31
- return;
32
- }
33
- tslib_es6.__classPrivateFieldGet(this, _RelativePositionController_shouldDisablePositioning, "f").call(this) ? this.disableRelativePositioning() : this.position(true);
31
+ tslib_es6.__classPrivateFieldGet(this, _RelativePositionController_disablePositioningOnCondition, "f").call(this) ? this.disableRelativePositioning() : this.position(true);
34
32
  }, relative_position_controller_constants.DEFAULT_THROTTLE_WAIT_TIME));
35
33
  _RelativePositionController_throttledRepositionForScroll.set(this, lodash["default"].throttle(() => {
36
- if (!tslib_es6.__classPrivateFieldGet(this, _RelativePositionController_shouldDisablePositioning, "f")) {
37
- this.position(true);
38
- return;
39
- }
40
- tslib_es6.__classPrivateFieldGet(this, _RelativePositionController_shouldDisablePositioning, "f").call(this) ? this.disableRelativePositioning() : this.position(true);
34
+ tslib_es6.__classPrivateFieldGet(this, _RelativePositionController_disablePositioningOnCondition, "f").call(this) ? this.disableRelativePositioning() : this.position(true);
41
35
  }, relative_position_controller_constants.DEFAULT_SCROLL_THROTTLE_WAIT_TIME));
42
36
  tslib_es6.__classPrivateFieldSet(this, _RelativePositionController_host, host, "f");
43
37
  tslib_es6.__classPrivateFieldSet(this, _RelativePositionController_container, container, "f");
44
38
  tslib_es6.__classPrivateFieldSet(this, _RelativePositionController_direction, direction, "f");
45
39
  tslib_es6.__classPrivateFieldSet(this, _RelativePositionController_relativeElement, relativeElement, "f");
46
40
  tslib_es6.__classPrivateFieldSet(this, _RelativePositionController_elementToPosition, elementToPosition, "f");
47
- tslib_es6.__classPrivateFieldSet(this, _RelativePositionController_shouldDisablePositioning, shouldDisablePositioning, "f");
41
+ tslib_es6.__classPrivateFieldSet(this, _RelativePositionController_disablePositioningOnCondition, disablePositioningOnCondition, "f");
48
42
  tslib_es6.__classPrivateFieldSet(this, _RelativePositionController_portalElementsNames, portalElementsNames, "f");
49
43
  tslib_es6.__classPrivateFieldSet(this, _RelativePositionController_isInitiallyScrollable, elementToPosition.classList.contains(global_constants.SCROLLABLE_CLASS_NAME), "f");
50
44
  tslib_es6.__classPrivateFieldSet(this, _RelativePositionController_initialMaxHeight, getComputedStyle(elementToPosition).maxHeight, "f");
51
45
  tslib_es6.__classPrivateFieldGet(this, _RelativePositionController_host, "f").addController(this);
52
46
  }
53
47
  hostConnected() {
54
- if (!tslib_es6.__classPrivateFieldGet(this, _RelativePositionController_relativeElement, "f"))
55
- return;
56
48
  if (!tslib_es6.__classPrivateFieldGet(this, _RelativePositionController_nearestScrollableElement, "f")) {
57
49
  tslib_es6.__classPrivateFieldSet(this, _RelativePositionController_nearestScrollableElement, this._findNearestScrollableElement(tslib_es6.__classPrivateFieldGet(this, _RelativePositionController_relativeElement, "f")), "f");
58
50
  }
@@ -64,29 +56,42 @@ class RelativePositionController {
64
56
  if (tslib_es6.__classPrivateFieldGet(this, _RelativePositionController_nearestScrollableElement, "f"))
65
57
  tslib_es6.__classPrivateFieldGet(this, _RelativePositionController_nearestScrollableElement, "f").removeEventListener('scroll', tslib_es6.__classPrivateFieldGet(this, _RelativePositionController_throttledRepositionForScroll, "f"));
66
58
  }
67
- position(disableRepositioning = false) {
68
- if (!tslib_es6.__classPrivateFieldGet(this, _RelativePositionController_relativeElement, "f") || !tslib_es6.__classPrivateFieldGet(this, _RelativePositionController_elementToPosition, "f"))
69
- return;
70
- tslib_es6.__classPrivateFieldSet(this, _RelativePositionController_nearestNonStaticElementFromElementToPosition, this._findContainer(tslib_es6.__classPrivateFieldGet(this, _RelativePositionController_elementToPosition, "f")), "f");
59
+ position(shouldNotReposition = false) {
60
+ if (tslib_es6.__classPrivateFieldGet(this, _RelativePositionController_hasPositioningBeenDisabled, "f"))
61
+ this._dispatchReenabledPositioningEvent();
62
+ if (!tslib_es6.__classPrivateFieldGet(this, _RelativePositionController_nearestNonStaticElementFromElementToPosition, "f"))
63
+ tslib_es6.__classPrivateFieldSet(this, _RelativePositionController_nearestNonStaticElementFromElementToPosition, this._findContainer(tslib_es6.__classPrivateFieldGet(this, _RelativePositionController_elementToPosition, "f")), "f");
71
64
  if (!tslib_es6.__classPrivateFieldGet(this, _RelativePositionController_container, "f"))
72
65
  tslib_es6.__classPrivateFieldSet(this, _RelativePositionController_container, tslib_es6.__classPrivateFieldGet(this, _RelativePositionController_nearestNonStaticElementFromElementToPosition, "f"), "f");
73
66
  const positionElementRect = tslib_es6.__classPrivateFieldGet(this, _RelativePositionController_initialHeight, "f")
74
- ? {
75
- ...tslib_es6.__classPrivateFieldGet(this, _RelativePositionController_elementToPosition, "f").getBoundingClientRect().toJSON(),
76
- height: tslib_es6.__classPrivateFieldGet(this, _RelativePositionController_initialHeight, "f")
77
- }
67
+ ? { ...tslib_es6.__classPrivateFieldGet(this, _RelativePositionController_elementToPosition, "f").getBoundingClientRect().toJSON(), height: tslib_es6.__classPrivateFieldGet(this, _RelativePositionController_initialHeight, "f") }
78
68
  : tslib_es6.__classPrivateFieldGet(this, _RelativePositionController_elementToPosition, "f").getBoundingClientRect();
79
69
  const position = new relative_position_calculator.PositionCalculator({
80
- direction: disableRepositioning && tslib_es6.__classPrivateFieldGet(this, _RelativePositionController_calculatedDirection, "f") ? tslib_es6.__classPrivateFieldGet(this, _RelativePositionController_calculatedDirection, "f") : tslib_es6.__classPrivateFieldGet(this, _RelativePositionController_direction, "f"),
70
+ direction: shouldNotReposition && tslib_es6.__classPrivateFieldGet(this, _RelativePositionController_calculatedDirection, "f") ? tslib_es6.__classPrivateFieldGet(this, _RelativePositionController_calculatedDirection, "f") : tslib_es6.__classPrivateFieldGet(this, _RelativePositionController_direction, "f"),
81
71
  relativeElementRect: tslib_es6.__classPrivateFieldGet(this, _RelativePositionController_relativeElement, "f").getBoundingClientRect(),
82
72
  positionElementRect,
83
73
  nearestNonStaticElementFromElementToPositionRect: tslib_es6.__classPrivateFieldGet(this, _RelativePositionController_nearestNonStaticElementFromElementToPosition, "f").getBoundingClientRect(),
84
74
  container: tslib_es6.__classPrivateFieldGet(this, _RelativePositionController_container, "f"),
85
- disableRepositioning
75
+ shouldNotReposition
86
76
  }).calculatePosition();
87
- if (!disableRepositioning)
88
- tslib_es6.__classPrivateFieldSet(this, _RelativePositionController_calculatedDirection, position.calculatedSide, "f");
89
77
  this._setElementPosition(position);
78
+ const isRepositioningDisabled = shouldNotReposition && tslib_es6.__classPrivateFieldGet(this, _RelativePositionController_doesCurrentlyHaveShrinkMode, "f");
79
+ if (isRepositioningDisabled)
80
+ return;
81
+ tslib_es6.__classPrivateFieldSet(this, _RelativePositionController_calculatedDirection, position.calculatedSide, "f");
82
+ tslib_es6.__classPrivateFieldSet(this, _RelativePositionController_doesCurrentlyHaveShrinkMode, !!position.shrinkMode, "f");
83
+ if (!position.shrinkMode) {
84
+ this._disableShrinkMode();
85
+ return;
86
+ }
87
+ this._enableShrinkMode();
88
+ }
89
+ _dispatchReenabledPositioningEvent() {
90
+ tslib_es6.__classPrivateFieldSet(this, _RelativePositionController_hasPositioningBeenDisabled, false, "f");
91
+ const enabledPositioningEvent = new CustomEvent(relative_position_controller_constants.RELATIVE_POSITION_CONTROLLER_EVENTS.enabledPositioning, {
92
+ bubbles: true
93
+ });
94
+ tslib_es6.__classPrivateFieldGet(this, _RelativePositionController_host, "f").dispatchEvent(enabledPositioningEvent);
90
95
  }
91
96
  _findNearestScrollableElement(element) {
92
97
  const overflowArray = ['overflow', 'overflowY', 'overflowX'];
@@ -108,37 +113,37 @@ class RelativePositionController {
108
113
  return this._findParentBasedOnStyle(parent, styles, callback);
109
114
  }
110
115
  _setElementPosition(position) {
111
- if (!tslib_es6.__classPrivateFieldGet(this, _RelativePositionController_elementToPosition, "f") || !tslib_es6.__classPrivateFieldGet(this, _RelativePositionController_relativeElement, "f"))
112
- return;
113
- const { style: elementStyle } = tslib_es6.__classPrivateFieldGet(this, _RelativePositionController_elementToPosition, "f");
114
- if (elementStyle.position !== 'absolute')
115
- elementStyle.position = 'absolute';
116
- if (elementStyle.top !== '0')
117
- elementStyle.top = '0';
118
- if (elementStyle.left !== '0')
119
- elementStyle.left = '0';
116
+ tslib_es6.__classPrivateFieldGet(this, _RelativePositionController_elementToPosition, "f").style.position = 'absolute';
117
+ tslib_es6.__classPrivateFieldGet(this, _RelativePositionController_elementToPosition, "f").style.top = '0';
118
+ tslib_es6.__classPrivateFieldGet(this, _RelativePositionController_elementToPosition, "f").style.left = '0';
120
119
  tslib_es6.__classPrivateFieldGet(this, _RelativePositionController_elementToPosition, "f").style.transform = `translate3d(${position.left}px, ${position.top}px, 0)`;
121
- if (!position.shrinkMode) {
122
- if (!tslib_es6.__classPrivateFieldGet(this, _RelativePositionController_isInitiallyScrollable, "f"))
123
- tslib_es6.__classPrivateFieldGet(this, _RelativePositionController_elementToPosition, "f").classList.remove(global_constants.SCROLLABLE_CLASS_NAME);
124
- elementStyle.maxHeight = tslib_es6.__classPrivateFieldGet(this, _RelativePositionController_initialMaxHeight, "f") !== 'none' ? tslib_es6.__classPrivateFieldGet(this, _RelativePositionController_initialMaxHeight, "f") : '';
125
- return;
126
- }
120
+ }
121
+ _disableShrinkMode() {
122
+ if (!tslib_es6.__classPrivateFieldGet(this, _RelativePositionController_isInitiallyScrollable, "f"))
123
+ tslib_es6.__classPrivateFieldGet(this, _RelativePositionController_elementToPosition, "f").classList.remove(global_constants.SCROLLABLE_CLASS_NAME);
124
+ tslib_es6.__classPrivateFieldGet(this, _RelativePositionController_elementToPosition, "f").style.maxHeight = tslib_es6.__classPrivateFieldGet(this, _RelativePositionController_initialMaxHeight, "f") !== 'none' ? tslib_es6.__classPrivateFieldGet(this, _RelativePositionController_initialMaxHeight, "f") : '';
125
+ }
126
+ _enableShrinkMode() {
127
127
  if (!tslib_es6.__classPrivateFieldGet(this, _RelativePositionController_initialHeight, "f"))
128
128
  tslib_es6.__classPrivateFieldSet(this, _RelativePositionController_initialHeight, tslib_es6.__classPrivateFieldGet(this, _RelativePositionController_elementToPosition, "f").getBoundingClientRect().height, "f");
129
129
  tslib_es6.__classPrivateFieldGet(this, _RelativePositionController_elementToPosition, "f").classList.add(global_constants.SCROLLABLE_CLASS_NAME);
130
130
  const shrinkModeMaxHeight = window.innerHeight - tslib_es6.__classPrivateFieldGet(this, _RelativePositionController_relativeElement, "f").getBoundingClientRect().bottom - relative_position_controller_constants.SHRINK_MODE_BOTTOM_MARGIN;
131
- elementStyle.maxHeight = `${shrinkModeMaxHeight > relative_position_controller_constants.SHRINK_MODE_MIN_HEIGHT ? shrinkModeMaxHeight : relative_position_controller_constants.SHRINK_MODE_MIN_HEIGHT}px`;
131
+ tslib_es6.__classPrivateFieldGet(this, _RelativePositionController_elementToPosition, "f").style.maxHeight = `${shrinkModeMaxHeight > relative_position_controller_constants.SHRINK_MODE_MIN_HEIGHT ? shrinkModeMaxHeight : relative_position_controller_constants.SHRINK_MODE_MIN_HEIGHT}px`;
132
132
  }
133
133
  disableRelativePositioning() {
134
- if (!tslib_es6.__classPrivateFieldGet(this, _RelativePositionController_elementToPosition, "f"))
135
- return;
134
+ if (!tslib_es6.__classPrivateFieldGet(this, _RelativePositionController_hasPositioningBeenDisabled, "f")) {
135
+ tslib_es6.__classPrivateFieldSet(this, _RelativePositionController_hasPositioningBeenDisabled, true, "f");
136
+ const disabledPositioningEvent = new CustomEvent(relative_position_controller_constants.RELATIVE_POSITION_CONTROLLER_EVENTS.disabledPositioning, {
137
+ bubbles: true
138
+ });
139
+ tslib_es6.__classPrivateFieldGet(this, _RelativePositionController_host, "f").dispatchEvent(disabledPositioningEvent);
140
+ }
136
141
  const { style: elementStyle } = tslib_es6.__classPrivateFieldGet(this, _RelativePositionController_elementToPosition, "f");
137
142
  elementStyle.position = '';
138
143
  elementStyle.transform = '';
139
144
  }
140
145
  }
141
- _RelativePositionController_host = new WeakMap(), _RelativePositionController_container = new WeakMap(), _RelativePositionController_nearestNonStaticElementFromElementToPosition = new WeakMap(), _RelativePositionController_direction = new WeakMap(), _RelativePositionController_nearestScrollableElement = new WeakMap(), _RelativePositionController_relativeElement = new WeakMap(), _RelativePositionController_elementToPosition = new WeakMap(), _RelativePositionController_shouldDisablePositioning = new WeakMap(), _RelativePositionController_portalElementsNames = new WeakMap(), _RelativePositionController_isInitiallyScrollable = new WeakMap(), _RelativePositionController_initialMaxHeight = new WeakMap(), _RelativePositionController_initialHeight = new WeakMap(), _RelativePositionController_calculatedDirection = new WeakMap(), _RelativePositionController_throttledReposition = new WeakMap(), _RelativePositionController_throttledRepositionForScroll = new WeakMap();
146
+ _RelativePositionController_host = new WeakMap(), _RelativePositionController_container = new WeakMap(), _RelativePositionController_nearestNonStaticElementFromElementToPosition = new WeakMap(), _RelativePositionController_direction = new WeakMap(), _RelativePositionController_nearestScrollableElement = new WeakMap(), _RelativePositionController_relativeElement = new WeakMap(), _RelativePositionController_elementToPosition = new WeakMap(), _RelativePositionController_disablePositioningOnCondition = new WeakMap(), _RelativePositionController_portalElementsNames = new WeakMap(), _RelativePositionController_isInitiallyScrollable = new WeakMap(), _RelativePositionController_initialMaxHeight = new WeakMap(), _RelativePositionController_initialHeight = new WeakMap(), _RelativePositionController_calculatedDirection = new WeakMap(), _RelativePositionController_hasPositioningBeenDisabled = new WeakMap(), _RelativePositionController_doesCurrentlyHaveShrinkMode = new WeakMap(), _RelativePositionController_throttledReposition = new WeakMap(), _RelativePositionController_throttledRepositionForScroll = new WeakMap();
142
147
 
143
148
  exports.RelativePositionController = RelativePositionController;
144
149
  //# sourceMappingURL=relative_position_controller.js.map
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,qBAAqB,0CAA8C;AACnE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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,qBAAqB,0CAA8C;AACnE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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_constants.js CHANGED
@@ -29,7 +29,12 @@ const OVERFLOW_AUTO = 'auto';
29
29
  const DEFAULT_THROTTLE_WAIT_TIME = 300;
30
30
  const DEFAULT_SCROLL_THROTTLE_WAIT_TIME = 15;
31
31
  const SHRINK_MODE_BOTTOM_MARGIN = 20;
32
- const SHRINK_MODE_MIN_HEIGHT = 80;
32
+ const SHRINK_MODE_MIN_HEIGHT = 80;
33
+ const RELATIVE_POSITION_CONTROLLER_EVENT_NAME = 'relative_position_controller';
34
+ const RELATIVE_POSITION_CONTROLLER_EVENTS = {
35
+ enabledPositioning: `${RELATIVE_POSITION_CONTROLLER_EVENT_NAME}.enabledPositioning`,
36
+ disabledPositioning: `${RELATIVE_POSITION_CONTROLLER_EVENT_NAME}.disabledPositioning`
37
+ };
33
38
 
34
39
  exports.CALCULATOR_DIRECTIONS = CALCULATOR_DIRECTIONS;
35
40
  exports.DEFAULT_SCROLL_THROTTLE_WAIT_TIME = DEFAULT_SCROLL_THROTTLE_WAIT_TIME;
@@ -38,6 +43,7 @@ exports.DIRECTIONS = DIRECTIONS;
38
43
  exports.NON_STATIC_POSITIONS = NON_STATIC_POSITIONS;
39
44
  exports.OVERFLOW_AUTO = OVERFLOW_AUTO;
40
45
  exports.OVERFLOW_SCROLL = OVERFLOW_SCROLL;
46
+ exports.RELATIVE_POSITION_CONTROLLER_EVENTS = RELATIVE_POSITION_CONTROLLER_EVENTS;
41
47
  exports.SHRINK_MODE_BOTTOM_MARGIN = SHRINK_MODE_BOTTOM_MARGIN;
42
48
  exports.SHRINK_MODE_MIN_HEIGHT = SHRINK_MODE_MIN_HEIGHT;
43
49
  //# sourceMappingURL=relative_position_controller_constants.js.map
package/build/cjs/packages/phoenix/src/controllers/relative_position_controller/relative_position_controller_constants.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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
@@ -26,6 +26,9 @@ export declare class HDropdown extends PhoenixLightLitElement implements IDropdo
26
26
  private _dispatchShowDropdownEvent;
27
27
  hide: () => Promise<void>;
28
28
  private _dispatchHideDropdownEvent;
29
+ private _handleDisabledPositioning;
30
+ private _showBackdrop;
31
+ private _hideBackdrop;
29
32
  private _observeScrollToggling;
30
33
  private _toggleScroll;
31
34
  private _hoverToggle;
package/build/esm/packages/phoenix/src/components/dropdown/dropdown.js CHANGED
@@ -1,7 +1,7 @@
1
1
  import { __decorate, __metadata } from '../../../../../external/tslib/tslib.es6.js';
2
2
  import { BREAKPOINTS, SCROLLABLE_CLASS_NAME } from '../../global_constants.js';
3
3
  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';
4
- import { DIRECTIONS, DEFAULT_THROTTLE_WAIT_TIME } from '../../controllers/relative_position_controller/relative_position_controller_constants.js';
4
+ import { DIRECTIONS, DEFAULT_THROTTLE_WAIT_TIME, RELATIVE_POSITION_CONTROLLER_EVENTS } from '../../controllers/relative_position_controller/relative_position_controller_constants.js';
5
5
  import { PORTAL_TARGET_COMPONENT_NAME, PORTAL_TARGET_NAME_PROP } from '../portal/portal_constants.js';
6
6
  import { html } from 'lit';
7
7
  import { BACKDROP_EVENTS } from '../backdrop/backdrop_constants.js';
@@ -55,10 +55,7 @@ let HDropdown = HDropdown_1 = class HDropdown extends PhoenixLightLitElement {
55
55
  this.dispatchEvent(showDropdownEvent);
56
56
  if (window.innerWidth >= BREAKPOINTS.xs)
57
57
  return;
58
- const showBackdropEvent = new Event(BACKDROP_EVENTS.show, {
59
- bubbles: true
60
- });
61
- document.dispatchEvent(showBackdropEvent);
58
+ this._showBackdrop();
62
59
  };
63
60
  this.hide = async () => new Promise((resolve) => {
64
61
  var _a;
@@ -84,10 +81,7 @@ let HDropdown = HDropdown_1 = class HDropdown extends PhoenixLightLitElement {
84
81
  this.dispatchEvent(hideDropdownEvent);
85
82
  if (window.innerWidth >= BREAKPOINTS.xs)
86
83
  return;
87
- const hideBackdropEvent = new Event(BACKDROP_EVENTS.hide, {
88
- bubbles: true
89
- });
90
- document.dispatchEvent(hideBackdropEvent);
84
+ this._hideBackdrop();
91
85
  };
92
86
  this._observeScrollToggling = lodash.throttle(() => {
93
87
  this._toggleScroll();
@@ -139,7 +133,7 @@ let HDropdown = HDropdown_1 = class HDropdown extends PhoenixLightLitElement {
139
133
  direction: this.direction,
140
134
  relativeElement: this.$dropdownToggler,
141
135
  elementToPosition: this.$dropdownContent,
142
- shouldDisablePositioning: () => window.innerWidth < BREAKPOINTS.xs,
136
+ disablePositioningOnCondition: () => window.innerWidth < BREAKPOINTS.xs,
143
137
  portalElementsNames: [DROPDOWN_CONTENT_NAME]
144
138
  });
145
139
  if (!this._clickOutsideController)
@@ -165,6 +159,8 @@ let HDropdown = HDropdown_1 = class HDropdown extends PhoenixLightLitElement {
165
159
  _setupListeners() {
166
160
  var _a;
167
161
  this.addEventListener(CLICK_OUTSIDE_CONTROLLER_MESSAGES.clickedOutside, this._handleClickOutside);
162
+ this.addEventListener(RELATIVE_POSITION_CONTROLLER_EVENTS.disabledPositioning, this._handleDisabledPositioning);
163
+ this.addEventListener(RELATIVE_POSITION_CONTROLLER_EVENTS.enabledPositioning, this._hideBackdrop);
168
164
  (_a = this.$dropdownToggler) === null || _a === void 0 ? void 0 : _a.addEventListener('toggle', this.toggle);
169
165
  window.addEventListener('resize', this._observeScrollToggling);
170
166
  if (this.toggleOnHover)
@@ -180,6 +176,22 @@ let HDropdown = HDropdown_1 = class HDropdown extends PhoenixLightLitElement {
180
176
  if (shouldHideElements)
181
177
  this.hide();
182
178
  }
179
+ _handleDisabledPositioning() {
180
+ if (this.opened)
181
+ this._showBackdrop();
182
+ }
183
+ _showBackdrop() {
184
+ const showBackdropEvent = new Event(BACKDROP_EVENTS.show, {
185
+ bubbles: true
186
+ });
187
+ document.dispatchEvent(showBackdropEvent);
188
+ }
189
+ _hideBackdrop() {
190
+ const hideBackdropEvent = new Event(BACKDROP_EVENTS.hide, {
191
+ bubbles: true
192
+ });
193
+ document.dispatchEvent(hideBackdropEvent);
194
+ }
183
195
  _toggleScroll() {
184
196
  var _a, _b;
185
197
  if (window.innerWidth >= BREAKPOINTS.xs && this._hasScrollableClassInitially)
@@ -188,6 +200,10 @@ let HDropdown = HDropdown_1 = class HDropdown extends PhoenixLightLitElement {
188
200
  (_a = this.$dropdownContent) === null || _a === void 0 ? void 0 : _a.classList.remove(SCROLLABLE_CLASS_NAME);
189
201
  return;
190
202
  }
203
+ if (!this._dropdownContentChildrenHeight && this.$dropdownContent)
204
+ this._dropdownContentChildrenHeight = [...this.$dropdownContent.children].reduce((totalHeight, currentChild) => {
205
+ return totalHeight + (parseInt(getComputedStyle(currentChild).height.replace('px', '')) || 0);
206
+ }, 0);
191
207
  if (this._dropdownContentChildrenHeight > window.innerHeight && !this._hasScrollableClassInitially) {
192
208
  (_b = this.$dropdownContent) === null || _b === void 0 ? void 0 : _b.classList.add(SCROLLABLE_CLASS_NAME);
193
209
  }
@@ -211,11 +227,6 @@ let HDropdown = HDropdown_1 = class HDropdown extends PhoenixLightLitElement {
211
227
  _setupInitialDropdownProperties() {
212
228
  if (!this.$dropdownContent)
213
229
  return;
214
- const $dropdownContentChildrenArray = [...this.$dropdownContent.children];
215
- if (!this._dropdownContentChildrenHeight)
216
- this._dropdownContentChildrenHeight = $dropdownContentChildrenArray.reduce((totalHeight, currentChild) => {
217
- return totalHeight + (parseInt(getComputedStyle(currentChild).height.replace('px', '')) || 0);
218
- }, 0);
219
230
  if (!this._hasScrollableClassInitially)
220
231
  this._hasScrollableClassInitially = this.$dropdownContent.classList.contains(SCROLLABLE_CLASS_NAME);
221
232
  }
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;AACA;AACA,mBAAmB,0CAA8C;AACjE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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,mBAAmB,0CAA8C;AACjE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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_calculator.d.ts CHANGED
@@ -1,7 +1,7 @@
1
1
  import { TRelativePositionCalculatorConstructorOptions, TRelativePositionControllerPositionData } from "./relative_position_controller_types";
2
2
  export declare class PositionCalculator {
3
3
  #private;
4
- constructor({ direction, relativeElementRect, positionElementRect, container, nearestNonStaticElementFromElementToPositionRect, disableRepositioning }: TRelativePositionCalculatorConstructorOptions);
4
+ constructor({ direction, relativeElementRect, positionElementRect, container, nearestNonStaticElementFromElementToPositionRect, shouldNotReposition }: TRelativePositionCalculatorConstructorOptions);
5
5
  calculatePosition(): TRelativePositionControllerPositionData;
6
6
  private _canFitTopSide;
7
7
  private _canFitBottomSide;
package/build/esm/packages/phoenix/src/controllers/relative_position_controller/relative_position_calculator.js CHANGED
@@ -1,22 +1,22 @@
1
1
  import { __classPrivateFieldSet, __classPrivateFieldGet } from '../../../../../external/tslib/tslib.es6.js';
2
2
  import { CALCULATOR_DIRECTIONS } from './relative_position_controller_constants.js';
3
3
 
4
- var _PositionCalculator_direction, _PositionCalculator_relativeElementRect, _PositionCalculator_positionElementRect, _PositionCalculator_nearestNonStaticElementFromElementToPositionRect, _PositionCalculator_containerRect, _PositionCalculator_documentHeight, _PositionCalculator_disableRepositioning;
4
+ var _PositionCalculator_direction, _PositionCalculator_relativeElementRect, _PositionCalculator_positionElementRect, _PositionCalculator_nearestNonStaticElementFromElementToPositionRect, _PositionCalculator_containerRect, _PositionCalculator_documentHeight, _PositionCalculator_shouldNotReposition;
5
5
  class PositionCalculator {
6
- constructor({ direction, relativeElementRect, positionElementRect, container = document.body, nearestNonStaticElementFromElementToPositionRect, disableRepositioning }) {
6
+ constructor({ direction, relativeElementRect, positionElementRect, container = document.body, nearestNonStaticElementFromElementToPositionRect, shouldNotReposition }) {
7
7
  _PositionCalculator_direction.set(this, void 0);
8
8
  _PositionCalculator_relativeElementRect.set(this, void 0);
9
9
  _PositionCalculator_positionElementRect.set(this, void 0);
10
10
  _PositionCalculator_nearestNonStaticElementFromElementToPositionRect.set(this, void 0);
11
11
  _PositionCalculator_containerRect.set(this, void 0);
12
12
  _PositionCalculator_documentHeight.set(this, void 0);
13
- _PositionCalculator_disableRepositioning.set(this, void 0);
13
+ _PositionCalculator_shouldNotReposition.set(this, void 0);
14
14
  __classPrivateFieldSet(this, _PositionCalculator_direction, direction, "f");
15
15
  __classPrivateFieldSet(this, _PositionCalculator_relativeElementRect, relativeElementRect, "f");
16
16
  __classPrivateFieldSet(this, _PositionCalculator_positionElementRect, positionElementRect, "f");
17
17
  __classPrivateFieldSet(this, _PositionCalculator_nearestNonStaticElementFromElementToPositionRect, nearestNonStaticElementFromElementToPositionRect, "f");
18
18
  __classPrivateFieldSet(this, _PositionCalculator_containerRect, container.getBoundingClientRect(), "f");
19
- __classPrivateFieldSet(this, _PositionCalculator_disableRepositioning, !!disableRepositioning, "f");
19
+ __classPrivateFieldSet(this, _PositionCalculator_shouldNotReposition, !!shouldNotReposition, "f");
20
20
  const body = document.body;
21
21
  const documentElement = document.documentElement;
22
22
  __classPrivateFieldSet(this, _PositionCalculator_documentHeight, Math.max(body.scrollHeight, body.offsetHeight, documentElement.clientHeight, documentElement.scrollHeight, documentElement.offsetHeight), "f");
@@ -48,7 +48,7 @@ class PositionCalculator {
48
48
  const centerOfRelativeElement = (topSideOfRelativeElement + bottomSideOfRelativeElement) / 2;
49
49
  switch (side) {
50
50
  case CALCULATOR_DIRECTIONS.top:
51
- if (__classPrivateFieldGet(this, _PositionCalculator_disableRepositioning, "f"))
51
+ if (__classPrivateFieldGet(this, _PositionCalculator_shouldNotReposition, "f"))
52
52
  return { top: topSideOfRelativeElement, calculatedSide: CALCULATOR_DIRECTIONS.top };
53
53
  if (!this._canFitTopSide() && !this._canFitBottomSide() && !this._canFitCenter(centerOfRelativeElement))
54
54
  return { top: bottomSideOfRelativeElement, calculatedSide: CALCULATOR_DIRECTIONS.bottom, shrinkMode: true };
@@ -58,7 +58,7 @@ class PositionCalculator {
58
58
  return { top: bottomSideOfRelativeElement, calculatedSide: CALCULATOR_DIRECTIONS.bottom };
59
59
  return { top: topSideOfRelativeElement, calculatedSide: CALCULATOR_DIRECTIONS.top };
60
60
  case CALCULATOR_DIRECTIONS.bottom:
61
- if (__classPrivateFieldGet(this, _PositionCalculator_disableRepositioning, "f"))
61
+ if (__classPrivateFieldGet(this, _PositionCalculator_shouldNotReposition, "f"))
62
62
  return { top: bottomSideOfRelativeElement, calculatedSide: CALCULATOR_DIRECTIONS.bottom };
63
63
  if (!this._canFitTopSide() && !this._canFitBottomSide() && !this._canFitCenter(centerOfRelativeElement))
64
64
  return { top: bottomSideOfRelativeElement, calculatedSide: CALCULATOR_DIRECTIONS.bottom, shrinkMode: true };
@@ -101,7 +101,7 @@ class PositionCalculator {
101
101
  }
102
102
  }
103
103
  }
104
- _PositionCalculator_direction = new WeakMap(), _PositionCalculator_relativeElementRect = new WeakMap(), _PositionCalculator_positionElementRect = new WeakMap(), _PositionCalculator_nearestNonStaticElementFromElementToPositionRect = new WeakMap(), _PositionCalculator_containerRect = new WeakMap(), _PositionCalculator_documentHeight = new WeakMap(), _PositionCalculator_disableRepositioning = new WeakMap();
104
+ _PositionCalculator_direction = new WeakMap(), _PositionCalculator_relativeElementRect = new WeakMap(), _PositionCalculator_positionElementRect = new WeakMap(), _PositionCalculator_nearestNonStaticElementFromElementToPositionRect = new WeakMap(), _PositionCalculator_containerRect = new WeakMap(), _PositionCalculator_documentHeight = new WeakMap(), _PositionCalculator_shouldNotReposition = new WeakMap();
105
105
 
106
106
  export { PositionCalculator };
107
107
  //# sourceMappingURL=relative_position_calculator.js.map
package/build/esm/packages/phoenix/src/controllers/relative_position_controller/relative_position_controller.d.ts CHANGED
@@ -1,13 +1,16 @@
1
1
  import { IRelativePositionController, TRelativePositionControllerConstructorOptions } from "./relative_position_controller_types";
2
2
  export declare class RelativePositionController implements IRelativePositionController {
3
3
  #private;
4
- constructor({ host, container, direction, relativeElement, elementToPosition, shouldDisablePositioning, portalElementsNames }: TRelativePositionControllerConstructorOptions);
4
+ constructor({ host, container, direction, relativeElement, elementToPosition, disablePositioningOnCondition, portalElementsNames }: TRelativePositionControllerConstructorOptions);
5
5
  hostConnected(): void;
6
6
  hostDisconnected(): void;
7
- position(disableRepositioning?: boolean): void;
7
+ position(shouldNotReposition?: boolean): void;
8
+ private _dispatchReenabledPositioningEvent;
8
9
  private _findNearestScrollableElement;
9
10
  private _findContainer;
10
11
  private _findParentBasedOnStyle;
11
12
  private _setElementPosition;
13
+ private _disableShrinkMode;
14
+ private _enableShrinkMode;
12
15
  disableRelativePositioning(): void;
13
16
  }
package/build/esm/packages/phoenix/src/controllers/relative_position_controller/relative_position_controller.js CHANGED
@@ -1,13 +1,13 @@
1
1
  import { __classPrivateFieldGet, __classPrivateFieldSet } from '../../../../../external/tslib/tslib.es6.js';
2
- import { DEFAULT_THROTTLE_WAIT_TIME, DEFAULT_SCROLL_THROTTLE_WAIT_TIME, OVERFLOW_SCROLL, OVERFLOW_AUTO, NON_STATIC_POSITIONS, SHRINK_MODE_BOTTOM_MARGIN, SHRINK_MODE_MIN_HEIGHT } from './relative_position_controller_constants.js';
2
+ import { DEFAULT_THROTTLE_WAIT_TIME, DEFAULT_SCROLL_THROTTLE_WAIT_TIME, RELATIVE_POSITION_CONTROLLER_EVENTS, OVERFLOW_SCROLL, OVERFLOW_AUTO, NON_STATIC_POSITIONS, SHRINK_MODE_BOTTOM_MARGIN, SHRINK_MODE_MIN_HEIGHT } from './relative_position_controller_constants.js';
3
3
  import { PositionCalculator } from './relative_position_calculator.js';
4
4
  import 'lit';
5
5
  import { SCROLLABLE_CLASS_NAME } from '../../global_constants.js';
6
6
  import lodash from '../../../../../external/lodash/lodash.js';
7
7
 
8
- var _RelativePositionController_host, _RelativePositionController_container, _RelativePositionController_nearestNonStaticElementFromElementToPosition, _RelativePositionController_direction, _RelativePositionController_nearestScrollableElement, _RelativePositionController_relativeElement, _RelativePositionController_elementToPosition, _RelativePositionController_shouldDisablePositioning, _RelativePositionController_portalElementsNames, _RelativePositionController_isInitiallyScrollable, _RelativePositionController_initialMaxHeight, _RelativePositionController_initialHeight, _RelativePositionController_calculatedDirection, _RelativePositionController_throttledReposition, _RelativePositionController_throttledRepositionForScroll;
8
+ var _RelativePositionController_host, _RelativePositionController_container, _RelativePositionController_nearestNonStaticElementFromElementToPosition, _RelativePositionController_direction, _RelativePositionController_nearestScrollableElement, _RelativePositionController_relativeElement, _RelativePositionController_elementToPosition, _RelativePositionController_disablePositioningOnCondition, _RelativePositionController_portalElementsNames, _RelativePositionController_isInitiallyScrollable, _RelativePositionController_initialMaxHeight, _RelativePositionController_initialHeight, _RelativePositionController_calculatedDirection, _RelativePositionController_hasPositioningBeenDisabled, _RelativePositionController_doesCurrentlyHaveShrinkMode, _RelativePositionController_throttledReposition, _RelativePositionController_throttledRepositionForScroll;
9
9
  class RelativePositionController {
10
- constructor({ host, container, direction, relativeElement, elementToPosition, shouldDisablePositioning, portalElementsNames = [] }) {
10
+ constructor({ host, container, direction, relativeElement, elementToPosition, disablePositioningOnCondition = () => true, portalElementsNames = [] }) {
11
11
  _RelativePositionController_host.set(this, void 0);
12
12
  _RelativePositionController_container.set(this, void 0);
13
13
  _RelativePositionController_nearestNonStaticElementFromElementToPosition.set(this, void 0);
@@ -15,40 +15,32 @@ class RelativePositionController {
15
15
  _RelativePositionController_nearestScrollableElement.set(this, void 0);
16
16
  _RelativePositionController_relativeElement.set(this, void 0);
17
17
  _RelativePositionController_elementToPosition.set(this, void 0);
18
- _RelativePositionController_shouldDisablePositioning.set(this, void 0);
18
+ _RelativePositionController_disablePositioningOnCondition.set(this, void 0);
19
19
  _RelativePositionController_portalElementsNames.set(this, void 0);
20
20
  _RelativePositionController_isInitiallyScrollable.set(this, void 0);
21
21
  _RelativePositionController_initialMaxHeight.set(this, void 0);
22
22
  _RelativePositionController_initialHeight.set(this, void 0);
23
23
  _RelativePositionController_calculatedDirection.set(this, void 0);
24
+ _RelativePositionController_hasPositioningBeenDisabled.set(this, void 0);
25
+ _RelativePositionController_doesCurrentlyHaveShrinkMode.set(this, void 0);
24
26
  _RelativePositionController_throttledReposition.set(this, lodash.throttle(() => {
25
- if (!__classPrivateFieldGet(this, _RelativePositionController_shouldDisablePositioning, "f")) {
26
- this.position(true);
27
- return;
28
- }
29
- __classPrivateFieldGet(this, _RelativePositionController_shouldDisablePositioning, "f").call(this) ? this.disableRelativePositioning() : this.position(true);
27
+ __classPrivateFieldGet(this, _RelativePositionController_disablePositioningOnCondition, "f").call(this) ? this.disableRelativePositioning() : this.position(true);
30
28
  }, DEFAULT_THROTTLE_WAIT_TIME));
31
29
  _RelativePositionController_throttledRepositionForScroll.set(this, lodash.throttle(() => {
32
- if (!__classPrivateFieldGet(this, _RelativePositionController_shouldDisablePositioning, "f")) {
33
- this.position(true);
34
- return;
35
- }
36
- __classPrivateFieldGet(this, _RelativePositionController_shouldDisablePositioning, "f").call(this) ? this.disableRelativePositioning() : this.position(true);
30
+ __classPrivateFieldGet(this, _RelativePositionController_disablePositioningOnCondition, "f").call(this) ? this.disableRelativePositioning() : this.position(true);
37
31
  }, DEFAULT_SCROLL_THROTTLE_WAIT_TIME));
38
32
  __classPrivateFieldSet(this, _RelativePositionController_host, host, "f");
39
33
  __classPrivateFieldSet(this, _RelativePositionController_container, container, "f");
40
34
  __classPrivateFieldSet(this, _RelativePositionController_direction, direction, "f");
41
35
  __classPrivateFieldSet(this, _RelativePositionController_relativeElement, relativeElement, "f");
42
36
  __classPrivateFieldSet(this, _RelativePositionController_elementToPosition, elementToPosition, "f");
43
- __classPrivateFieldSet(this, _RelativePositionController_shouldDisablePositioning, shouldDisablePositioning, "f");
37
+ __classPrivateFieldSet(this, _RelativePositionController_disablePositioningOnCondition, disablePositioningOnCondition, "f");
44
38
  __classPrivateFieldSet(this, _RelativePositionController_portalElementsNames, portalElementsNames, "f");
45
39
  __classPrivateFieldSet(this, _RelativePositionController_isInitiallyScrollable, elementToPosition.classList.contains(SCROLLABLE_CLASS_NAME), "f");
46
40
  __classPrivateFieldSet(this, _RelativePositionController_initialMaxHeight, getComputedStyle(elementToPosition).maxHeight, "f");
47
41
  __classPrivateFieldGet(this, _RelativePositionController_host, "f").addController(this);
48
42
  }
49
43
  hostConnected() {
50
- if (!__classPrivateFieldGet(this, _RelativePositionController_relativeElement, "f"))
51
- return;
52
44
  if (!__classPrivateFieldGet(this, _RelativePositionController_nearestScrollableElement, "f")) {
53
45
  __classPrivateFieldSet(this, _RelativePositionController_nearestScrollableElement, this._findNearestScrollableElement(__classPrivateFieldGet(this, _RelativePositionController_relativeElement, "f")), "f");
54
46
  }
@@ -60,29 +52,42 @@ class RelativePositionController {
60
52
  if (__classPrivateFieldGet(this, _RelativePositionController_nearestScrollableElement, "f"))
61
53
  __classPrivateFieldGet(this, _RelativePositionController_nearestScrollableElement, "f").removeEventListener('scroll', __classPrivateFieldGet(this, _RelativePositionController_throttledRepositionForScroll, "f"));
62
54
  }
63
- position(disableRepositioning = false) {
64
- if (!__classPrivateFieldGet(this, _RelativePositionController_relativeElement, "f") || !__classPrivateFieldGet(this, _RelativePositionController_elementToPosition, "f"))
65
- return;
66
- __classPrivateFieldSet(this, _RelativePositionController_nearestNonStaticElementFromElementToPosition, this._findContainer(__classPrivateFieldGet(this, _RelativePositionController_elementToPosition, "f")), "f");
55
+ position(shouldNotReposition = false) {
56
+ if (__classPrivateFieldGet(this, _RelativePositionController_hasPositioningBeenDisabled, "f"))
57
+ this._dispatchReenabledPositioningEvent();
58
+ if (!__classPrivateFieldGet(this, _RelativePositionController_nearestNonStaticElementFromElementToPosition, "f"))
59
+ __classPrivateFieldSet(this, _RelativePositionController_nearestNonStaticElementFromElementToPosition, this._findContainer(__classPrivateFieldGet(this, _RelativePositionController_elementToPosition, "f")), "f");
67
60
  if (!__classPrivateFieldGet(this, _RelativePositionController_container, "f"))
68
61
  __classPrivateFieldSet(this, _RelativePositionController_container, __classPrivateFieldGet(this, _RelativePositionController_nearestNonStaticElementFromElementToPosition, "f"), "f");
69
62
  const positionElementRect = __classPrivateFieldGet(this, _RelativePositionController_initialHeight, "f")
70
- ? {
71
- ...__classPrivateFieldGet(this, _RelativePositionController_elementToPosition, "f").getBoundingClientRect().toJSON(),
72
- height: __classPrivateFieldGet(this, _RelativePositionController_initialHeight, "f")
73
- }
63
+ ? { ...__classPrivateFieldGet(this, _RelativePositionController_elementToPosition, "f").getBoundingClientRect().toJSON(), height: __classPrivateFieldGet(this, _RelativePositionController_initialHeight, "f") }
74
64
  : __classPrivateFieldGet(this, _RelativePositionController_elementToPosition, "f").getBoundingClientRect();
75
65
  const position = new PositionCalculator({
76
- direction: disableRepositioning && __classPrivateFieldGet(this, _RelativePositionController_calculatedDirection, "f") ? __classPrivateFieldGet(this, _RelativePositionController_calculatedDirection, "f") : __classPrivateFieldGet(this, _RelativePositionController_direction, "f"),
66
+ direction: shouldNotReposition && __classPrivateFieldGet(this, _RelativePositionController_calculatedDirection, "f") ? __classPrivateFieldGet(this, _RelativePositionController_calculatedDirection, "f") : __classPrivateFieldGet(this, _RelativePositionController_direction, "f"),
77
67
  relativeElementRect: __classPrivateFieldGet(this, _RelativePositionController_relativeElement, "f").getBoundingClientRect(),
78
68
  positionElementRect,
79
69
  nearestNonStaticElementFromElementToPositionRect: __classPrivateFieldGet(this, _RelativePositionController_nearestNonStaticElementFromElementToPosition, "f").getBoundingClientRect(),
80
70
  container: __classPrivateFieldGet(this, _RelativePositionController_container, "f"),
81
- disableRepositioning
71
+ shouldNotReposition
82
72
  }).calculatePosition();
83
- if (!disableRepositioning)
84
- __classPrivateFieldSet(this, _RelativePositionController_calculatedDirection, position.calculatedSide, "f");
85
73
  this._setElementPosition(position);
74
+ const isRepositioningDisabled = shouldNotReposition && __classPrivateFieldGet(this, _RelativePositionController_doesCurrentlyHaveShrinkMode, "f");
75
+ if (isRepositioningDisabled)
76
+ return;
77
+ __classPrivateFieldSet(this, _RelativePositionController_calculatedDirection, position.calculatedSide, "f");
78
+ __classPrivateFieldSet(this, _RelativePositionController_doesCurrentlyHaveShrinkMode, !!position.shrinkMode, "f");
79
+ if (!position.shrinkMode) {
80
+ this._disableShrinkMode();
81
+ return;
82
+ }
83
+ this._enableShrinkMode();
84
+ }
85
+ _dispatchReenabledPositioningEvent() {
86
+ __classPrivateFieldSet(this, _RelativePositionController_hasPositioningBeenDisabled, false, "f");
87
+ const enabledPositioningEvent = new CustomEvent(RELATIVE_POSITION_CONTROLLER_EVENTS.enabledPositioning, {
88
+ bubbles: true
89
+ });
90
+ __classPrivateFieldGet(this, _RelativePositionController_host, "f").dispatchEvent(enabledPositioningEvent);
86
91
  }
87
92
  _findNearestScrollableElement(element) {
88
93
  const overflowArray = ['overflow', 'overflowY', 'overflowX'];
@@ -104,37 +109,37 @@ class RelativePositionController {
104
109
  return this._findParentBasedOnStyle(parent, styles, callback);
105
110
  }
106
111
  _setElementPosition(position) {
107
- if (!__classPrivateFieldGet(this, _RelativePositionController_elementToPosition, "f") || !__classPrivateFieldGet(this, _RelativePositionController_relativeElement, "f"))
108
- return;
109
- const { style: elementStyle } = __classPrivateFieldGet(this, _RelativePositionController_elementToPosition, "f");
110
- if (elementStyle.position !== 'absolute')
111
- elementStyle.position = 'absolute';
112
- if (elementStyle.top !== '0')
113
- elementStyle.top = '0';
114
- if (elementStyle.left !== '0')
115
- elementStyle.left = '0';
112
+ __classPrivateFieldGet(this, _RelativePositionController_elementToPosition, "f").style.position = 'absolute';
113
+ __classPrivateFieldGet(this, _RelativePositionController_elementToPosition, "f").style.top = '0';
114
+ __classPrivateFieldGet(this, _RelativePositionController_elementToPosition, "f").style.left = '0';
116
115
  __classPrivateFieldGet(this, _RelativePositionController_elementToPosition, "f").style.transform = `translate3d(${position.left}px, ${position.top}px, 0)`;
117
- if (!position.shrinkMode) {
118
- if (!__classPrivateFieldGet(this, _RelativePositionController_isInitiallyScrollable, "f"))
119
- __classPrivateFieldGet(this, _RelativePositionController_elementToPosition, "f").classList.remove(SCROLLABLE_CLASS_NAME);
120
- elementStyle.maxHeight = __classPrivateFieldGet(this, _RelativePositionController_initialMaxHeight, "f") !== 'none' ? __classPrivateFieldGet(this, _RelativePositionController_initialMaxHeight, "f") : '';
121
- return;
122
- }
116
+ }
117
+ _disableShrinkMode() {
118
+ if (!__classPrivateFieldGet(this, _RelativePositionController_isInitiallyScrollable, "f"))
119
+ __classPrivateFieldGet(this, _RelativePositionController_elementToPosition, "f").classList.remove(SCROLLABLE_CLASS_NAME);
120
+ __classPrivateFieldGet(this, _RelativePositionController_elementToPosition, "f").style.maxHeight = __classPrivateFieldGet(this, _RelativePositionController_initialMaxHeight, "f") !== 'none' ? __classPrivateFieldGet(this, _RelativePositionController_initialMaxHeight, "f") : '';
121
+ }
122
+ _enableShrinkMode() {
123
123
  if (!__classPrivateFieldGet(this, _RelativePositionController_initialHeight, "f"))
124
124
  __classPrivateFieldSet(this, _RelativePositionController_initialHeight, __classPrivateFieldGet(this, _RelativePositionController_elementToPosition, "f").getBoundingClientRect().height, "f");
125
125
  __classPrivateFieldGet(this, _RelativePositionController_elementToPosition, "f").classList.add(SCROLLABLE_CLASS_NAME);
126
126
  const shrinkModeMaxHeight = window.innerHeight - __classPrivateFieldGet(this, _RelativePositionController_relativeElement, "f").getBoundingClientRect().bottom - SHRINK_MODE_BOTTOM_MARGIN;
127
- elementStyle.maxHeight = `${shrinkModeMaxHeight > SHRINK_MODE_MIN_HEIGHT ? shrinkModeMaxHeight : SHRINK_MODE_MIN_HEIGHT}px`;
127
+ __classPrivateFieldGet(this, _RelativePositionController_elementToPosition, "f").style.maxHeight = `${shrinkModeMaxHeight > SHRINK_MODE_MIN_HEIGHT ? shrinkModeMaxHeight : SHRINK_MODE_MIN_HEIGHT}px`;
128
128
  }
129
129
  disableRelativePositioning() {
130
- if (!__classPrivateFieldGet(this, _RelativePositionController_elementToPosition, "f"))
131
- return;
130
+ if (!__classPrivateFieldGet(this, _RelativePositionController_hasPositioningBeenDisabled, "f")) {
131
+ __classPrivateFieldSet(this, _RelativePositionController_hasPositioningBeenDisabled, true, "f");
132
+ const disabledPositioningEvent = new CustomEvent(RELATIVE_POSITION_CONTROLLER_EVENTS.disabledPositioning, {
133
+ bubbles: true
134
+ });
135
+ __classPrivateFieldGet(this, _RelativePositionController_host, "f").dispatchEvent(disabledPositioningEvent);
136
+ }
132
137
  const { style: elementStyle } = __classPrivateFieldGet(this, _RelativePositionController_elementToPosition, "f");
133
138
  elementStyle.position = '';
134
139
  elementStyle.transform = '';
135
140
  }
136
141
  }
137
- _RelativePositionController_host = new WeakMap(), _RelativePositionController_container = new WeakMap(), _RelativePositionController_nearestNonStaticElementFromElementToPosition = new WeakMap(), _RelativePositionController_direction = new WeakMap(), _RelativePositionController_nearestScrollableElement = new WeakMap(), _RelativePositionController_relativeElement = new WeakMap(), _RelativePositionController_elementToPosition = new WeakMap(), _RelativePositionController_shouldDisablePositioning = new WeakMap(), _RelativePositionController_portalElementsNames = new WeakMap(), _RelativePositionController_isInitiallyScrollable = new WeakMap(), _RelativePositionController_initialMaxHeight = new WeakMap(), _RelativePositionController_initialHeight = new WeakMap(), _RelativePositionController_calculatedDirection = new WeakMap(), _RelativePositionController_throttledReposition = new WeakMap(), _RelativePositionController_throttledRepositionForScroll = new WeakMap();
142
+ _RelativePositionController_host = new WeakMap(), _RelativePositionController_container = new WeakMap(), _RelativePositionController_nearestNonStaticElementFromElementToPosition = new WeakMap(), _RelativePositionController_direction = new WeakMap(), _RelativePositionController_nearestScrollableElement = new WeakMap(), _RelativePositionController_relativeElement = new WeakMap(), _RelativePositionController_elementToPosition = new WeakMap(), _RelativePositionController_disablePositioningOnCondition = new WeakMap(), _RelativePositionController_portalElementsNames = new WeakMap(), _RelativePositionController_isInitiallyScrollable = new WeakMap(), _RelativePositionController_initialMaxHeight = new WeakMap(), _RelativePositionController_initialHeight = new WeakMap(), _RelativePositionController_calculatedDirection = new WeakMap(), _RelativePositionController_hasPositioningBeenDisabled = new WeakMap(), _RelativePositionController_doesCurrentlyHaveShrinkMode = new WeakMap(), _RelativePositionController_throttledReposition = new WeakMap(), _RelativePositionController_throttledRepositionForScroll = new WeakMap();
138
143
 
139
144
  export { RelativePositionController };
140
145
  //# sourceMappingURL=relative_position_controller.js.map
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,mBAAmB,0CAA8C;AACjE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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,mBAAmB,0CAA8C;AACjE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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_constants.d.ts CHANGED
@@ -26,3 +26,7 @@ export declare const DEFAULT_THROTTLE_WAIT_TIME = 300;
26
26
  export declare const DEFAULT_SCROLL_THROTTLE_WAIT_TIME = 15;
27
27
  export declare const SHRINK_MODE_BOTTOM_MARGIN = 20;
28
28
  export declare const SHRINK_MODE_MIN_HEIGHT = 80;
29
+ export declare const RELATIVE_POSITION_CONTROLLER_EVENTS: {
30
+ enabledPositioning: string;
31
+ disabledPositioning: string;
32
+ };
package/build/esm/packages/phoenix/src/controllers/relative_position_controller/relative_position_controller_constants.js CHANGED
@@ -25,7 +25,12 @@ const OVERFLOW_AUTO = 'auto';
25
25
  const DEFAULT_THROTTLE_WAIT_TIME = 300;
26
26
  const DEFAULT_SCROLL_THROTTLE_WAIT_TIME = 15;
27
27
  const SHRINK_MODE_BOTTOM_MARGIN = 20;
28
- const SHRINK_MODE_MIN_HEIGHT = 80;
28
+ const SHRINK_MODE_MIN_HEIGHT = 80;
29
+ const RELATIVE_POSITION_CONTROLLER_EVENT_NAME = 'relative_position_controller';
30
+ const RELATIVE_POSITION_CONTROLLER_EVENTS = {
31
+ enabledPositioning: `${RELATIVE_POSITION_CONTROLLER_EVENT_NAME}.enabledPositioning`,
32
+ disabledPositioning: `${RELATIVE_POSITION_CONTROLLER_EVENT_NAME}.disabledPositioning`
33
+ };
29
34
 
30
- export { CALCULATOR_DIRECTIONS, DEFAULT_SCROLL_THROTTLE_WAIT_TIME, DEFAULT_THROTTLE_WAIT_TIME, DIRECTIONS, NON_STATIC_POSITIONS, OVERFLOW_AUTO, OVERFLOW_SCROLL, SHRINK_MODE_BOTTOM_MARGIN, SHRINK_MODE_MIN_HEIGHT };
35
+ export { CALCULATOR_DIRECTIONS, DEFAULT_SCROLL_THROTTLE_WAIT_TIME, DEFAULT_THROTTLE_WAIT_TIME, DIRECTIONS, NON_STATIC_POSITIONS, OVERFLOW_AUTO, OVERFLOW_SCROLL, RELATIVE_POSITION_CONTROLLER_EVENTS, SHRINK_MODE_BOTTOM_MARGIN, SHRINK_MODE_MIN_HEIGHT };
31
36
  //# sourceMappingURL=relative_position_controller_constants.js.map
package/build/esm/packages/phoenix/src/controllers/relative_position_controller/relative_position_controller_constants.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;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;AACA;AACA;AACA;AACA;AACA;AACA;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_types.d.ts CHANGED
@@ -9,7 +9,7 @@ export declare type TRelativePositionControllerConstructorOptions = {
9
9
  container?: HTMLElement;
10
10
  relativeElement: HTMLElement;
11
11
  elementToPosition: HTMLElement;
12
- shouldDisablePositioning?: () => boolean;
12
+ disablePositioningOnCondition?: () => boolean;
13
13
  portalElementsNames?: string[];
14
14
  };
15
15
  export interface IRelativePositionController extends ReactiveController {
@@ -30,5 +30,5 @@ export declare type TRelativePositionCalculatorConstructorOptions = {
30
30
  positionElementRect: DOMRect;
31
31
  nearestNonStaticElementFromElementToPositionRect: DOMRect;
32
32
  container?: HTMLElement;
33
- disableRepositioning?: boolean;
33
+ shouldNotReposition?: boolean;
34
34
  };
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.14.2",
5
+ "version": "0.14.3",
6
6
  "description": "phoenix design system",
7
7
  "author": "zefirek",
8
8
  "license": "MIT",