@shoper/phoenix_design_system 0.14.0 → 0.14.2

package/build/esm/packages/phoenix/src/controllers/relative_position_controller/relative_position_calculator.d.ts

@@ -1,10 +1,11 @@
 import { TRelativePositionCalculatorConstructorOptions, TRelativePositionControllerPositionData } from "./relative_position_controller_types";
 export declare class PositionCalculator {
     #private;
-    constructor({ direction, relativeElementRect, positionElementRect, container, nearestNonStaticElementFromElementToPositionRect }: TRelativePositionCalculatorConstructorOptions);
+    constructor({ direction, relativeElementRect, positionElementRect, container, nearestNonStaticElementFromElementToPositionRect, disableRepositioning }: TRelativePositionCalculatorConstructorOptions);
     calculatePosition(): TRelativePositionControllerPositionData;
     private _canFitTopSide;
     private _canFitBottomSide;
+    private _canFitCenter;
     private _calculateSidePosition;
     private calculateAlignmentPosition;
 }

package/build/esm/packages/phoenix/src/controllers/relative_position_controller/relative_position_calculator.js

@@ -1,19 +1,25 @@
 import { __classPrivateFieldSet, __classPrivateFieldGet } from '../../../../../external/tslib/tslib.es6.js';
 import { CALCULATOR_DIRECTIONS } from './relative_position_controller_constants.js';
 
-var _PositionCalculator_direction, _PositionCalculator_relativeElementRect, _PositionCalculator_positionElementRect, _PositionCalculator_nearestNonStaticElementFromElementToPositionRect, _PositionCalculator_containerRect;
+var _PositionCalculator_direction, _PositionCalculator_relativeElementRect, _PositionCalculator_positionElementRect, _PositionCalculator_nearestNonStaticElementFromElementToPositionRect, _PositionCalculator_containerRect, _PositionCalculator_documentHeight, _PositionCalculator_disableRepositioning;
 class PositionCalculator {
-    constructor({ direction, relativeElementRect, positionElementRect, container = document.body, nearestNonStaticElementFromElementToPositionRect }) {
+    constructor({ direction, relativeElementRect, positionElementRect, container = document.body, nearestNonStaticElementFromElementToPositionRect, disableRepositioning }) {
         _PositionCalculator_direction.set(this, void 0);
         _PositionCalculator_relativeElementRect.set(this, void 0);
         _PositionCalculator_positionElementRect.set(this, void 0);
         _PositionCalculator_nearestNonStaticElementFromElementToPositionRect.set(this, void 0);
         _PositionCalculator_containerRect.set(this, void 0);
+        _PositionCalculator_documentHeight.set(this, void 0);
+        _PositionCalculator_disableRepositioning.set(this, void 0);
         __classPrivateFieldSet(this, _PositionCalculator_direction, direction, "f");
         __classPrivateFieldSet(this, _PositionCalculator_relativeElementRect, relativeElementRect, "f");
         __classPrivateFieldSet(this, _PositionCalculator_positionElementRect, positionElementRect, "f");
         __classPrivateFieldSet(this, _PositionCalculator_nearestNonStaticElementFromElementToPositionRect, nearestNonStaticElementFromElementToPositionRect, "f");
         __classPrivateFieldSet(this, _PositionCalculator_containerRect, container.getBoundingClientRect(), "f");
+        __classPrivateFieldSet(this, _PositionCalculator_disableRepositioning, !!disableRepositioning, "f");
+        const body = document.body;
+        const documentElement = document.documentElement;
+        __classPrivateFieldSet(this, _PositionCalculator_documentHeight, Math.max(body.scrollHeight, body.offsetHeight, documentElement.clientHeight, documentElement.scrollHeight, documentElement.offsetHeight), "f");
     }
     calculatePosition() {
         const [side, alignment = CALCULATOR_DIRECTIONS.center] = __classPrivateFieldGet(this, _PositionCalculator_direction, "f").split('-');
@@ -21,7 +27,8 @@ class PositionCalculator {
         const alignmentPosition = this.calculateAlignmentPosition(alignment);
         return {
             ...sidePosition,
-            ...alignmentPosition
+            ...alignmentPosition,
+            calculatedSide: `${sidePosition.calculatedSide || ''}-${alignmentPosition.calculatedSide || ''}`
         };
     }
     _canFitTopSide() {
@@ -30,7 +37,10 @@ class PositionCalculator {
     }
     _canFitBottomSide() {
         const elementPositionBottom = __classPrivateFieldGet(this, _PositionCalculator_relativeElementRect, "f").bottom + __classPrivateFieldGet(this, _PositionCalculator_positionElementRect, "f").height;
-        return elementPositionBottom < __classPrivateFieldGet(this, _PositionCalculator_containerRect, "f").bottom && elementPositionBottom < window.innerHeight;
+        return elementPositionBottom < __classPrivateFieldGet(this, _PositionCalculator_containerRect, "f").bottom && elementPositionBottom < __classPrivateFieldGet(this, _PositionCalculator_documentHeight, "f");
+    }
+    _canFitCenter(centerPosition) {
+        return centerPosition + __classPrivateFieldGet(this, _PositionCalculator_positionElementRect, "f").height - window.scrollY < window.innerHeight && centerPosition - window.scrollY > 0;
     }
     _calculateSidePosition(side) {
         const topSideOfRelativeElement = __classPrivateFieldGet(this, _PositionCalculator_relativeElementRect, "f").top - __classPrivateFieldGet(this, _PositionCalculator_nearestNonStaticElementFromElementToPositionRect, "f").top - __classPrivateFieldGet(this, _PositionCalculator_positionElementRect, "f").height;
@@ -38,17 +48,27 @@ class PositionCalculator {
         const centerOfRelativeElement = (topSideOfRelativeElement + bottomSideOfRelativeElement) / 2;
         switch (side) {
             case CALCULATOR_DIRECTIONS.top:
+                if (__classPrivateFieldGet(this, _PositionCalculator_disableRepositioning, "f"))
+                    return { top: topSideOfRelativeElement, calculatedSide: CALCULATOR_DIRECTIONS.top };
+                if (!this._canFitTopSide() && !this._canFitBottomSide() && !this._canFitCenter(centerOfRelativeElement))
+                    return { top: bottomSideOfRelativeElement, calculatedSide: CALCULATOR_DIRECTIONS.bottom, shrinkMode: true };
                 if (!this._canFitTopSide() && !this._canFitBottomSide())
-                    return { top: centerOfRelativeElement };
+                    return { top: centerOfRelativeElement, calculatedSide: CALCULATOR_DIRECTIONS.center };
                 if (!this._canFitTopSide())
-                    return { top: bottomSideOfRelativeElement };
-                return { top: topSideOfRelativeElement };
+                    return { top: bottomSideOfRelativeElement, calculatedSide: CALCULATOR_DIRECTIONS.bottom };
+                return { top: topSideOfRelativeElement, calculatedSide: CALCULATOR_DIRECTIONS.top };
             case CALCULATOR_DIRECTIONS.bottom:
+                if (__classPrivateFieldGet(this, _PositionCalculator_disableRepositioning, "f"))
+                    return { top: bottomSideOfRelativeElement, calculatedSide: CALCULATOR_DIRECTIONS.bottom };
+                if (!this._canFitTopSide() && !this._canFitBottomSide() && !this._canFitCenter(centerOfRelativeElement))
+                    return { top: bottomSideOfRelativeElement, calculatedSide: CALCULATOR_DIRECTIONS.bottom, shrinkMode: true };
                 if (!this._canFitTopSide() && !this._canFitBottomSide())
-                    return { top: centerOfRelativeElement };
+                    return { top: centerOfRelativeElement, calculatedSide: CALCULATOR_DIRECTIONS.center };
                 if (!this._canFitBottomSide())
-                    return { top: topSideOfRelativeElement };
-                return { top: bottomSideOfRelativeElement };
+                    return { top: topSideOfRelativeElement, calculatedSide: CALCULATOR_DIRECTIONS.top };
+                return { top: bottomSideOfRelativeElement, calculatedSide: CALCULATOR_DIRECTIONS.bottom };
+            case CALCULATOR_DIRECTIONS.center:
+                return { top: centerOfRelativeElement, calculatedSide: CALCULATOR_DIRECTIONS.center };
             case CALCULATOR_DIRECTIONS.left:
                 // do zaimplementowania
                 return { top: 0 };
@@ -71,17 +91,17 @@ class PositionCalculator {
                 // do zaimplementowania
                 return { left: 0 };
             case CALCULATOR_DIRECTIONS.left:
-                return { left: alignmentToLeftSide };
+                return { left: alignmentToLeftSide, calculatedSide: CALCULATOR_DIRECTIONS.left };
             case CALCULATOR_DIRECTIONS.right:
-                return { left: alignmentToRightSide };
+                return { left: alignmentToRightSide, calculatedSide: CALCULATOR_DIRECTIONS.right };
             case CALCULATOR_DIRECTIONS.center:
-                return { left: alignmentToCenter };
+                return { left: alignmentToCenter, calculatedSide: CALCULATOR_DIRECTIONS.center };
             default:
                 return { left: 0 };
         }
     }
 }
-_PositionCalculator_direction = new WeakMap(), _PositionCalculator_relativeElementRect = new WeakMap(), _PositionCalculator_positionElementRect = new WeakMap(), _PositionCalculator_nearestNonStaticElementFromElementToPositionRect = new WeakMap(), _PositionCalculator_containerRect = new WeakMap();
+_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();
 
 export { PositionCalculator };
 //# sourceMappingURL=relative_position_calculator.js.map

package/build/esm/packages/phoenix/src/controllers/relative_position_controller/relative_position_calculator.js.map

@@ -1 +1 @@
-{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,+DAA+D,4CAAgD;AAC/G;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,+DAA+D,4CAAgD;AAC/G;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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.d.ts

@@ -4,7 +4,7 @@ export declare class RelativePositionController implements IRelativePositionCont
     constructor({ host, container, direction, relativeElement, elementToPosition, shouldDisablePositioning, portalElementsNames }: TRelativePositionControllerConstructorOptions);
     hostConnected(): void;
     hostDisconnected(): void;
-    position(): void;
+    position(disableRepositioning?: boolean): void;
     private _findNearestScrollableElement;
     private _findContainer;
     private _findParentBasedOnStyle;

package/build/esm/packages/phoenix/src/controllers/relative_position_controller/relative_position_controller.js

@@ -1,10 +1,11 @@
 import { __classPrivateFieldGet, __classPrivateFieldSet } from '../../../../../external/tslib/tslib.es6.js';
-import 'lit';
-import { DEFAULT_THROTTLE_WAIT_TIME, DEFAULT_SCROLL_THROTTLE_WAIT_TIME, OVERFLOW_SCROLL, OVERFLOW_AUTO, NON_STATIC_POSITIONS } from './relative_position_controller_constants.js';
+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';
 import { PositionCalculator } from './relative_position_calculator.js';
+import 'lit';
+import { SCROLLABLE_CLASS_NAME } from '../../global_constants.js';
 import lodash from '../../../../../external/lodash/lodash.js';
 
-var _RelativePositionController_host, _RelativePositionController_container, _RelativePositionController_nearestNonStaticElementFromElementToPosition, _RelativePositionController_direction, _RelativePositionController_nearestScrollableElement, _RelativePositionController_relativeElement, _RelativePositionController_elementToPosition, _RelativePositionController_shouldDisablePositioning, _RelativePositionController_portalElementsNames, _RelativePositionController_throttledReposition, _RelativePositionController_throttledRepositionForScroll;
+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;
 class RelativePositionController {
     constructor({ host, container, direction, relativeElement, elementToPosition, shouldDisablePositioning, portalElementsNames = [] }) {
         _RelativePositionController_host.set(this, void 0);
@@ -16,19 +17,23 @@ class RelativePositionController {
         _RelativePositionController_elementToPosition.set(this, void 0);
         _RelativePositionController_shouldDisablePositioning.set(this, void 0);
         _RelativePositionController_portalElementsNames.set(this, void 0);
+        _RelativePositionController_isInitiallyScrollable.set(this, void 0);
+        _RelativePositionController_initialMaxHeight.set(this, void 0);
+        _RelativePositionController_initialHeight.set(this, void 0);
+        _RelativePositionController_calculatedDirection.set(this, void 0);
         _RelativePositionController_throttledReposition.set(this, lodash.throttle(() => {
             if (!__classPrivateFieldGet(this, _RelativePositionController_shouldDisablePositioning, "f")) {
-                this.position();
+                this.position(true);
                 return;
             }
-            __classPrivateFieldGet(this, _RelativePositionController_shouldDisablePositioning, "f").call(this) ? this.disableRelativePositioning() : this.position();
+            __classPrivateFieldGet(this, _RelativePositionController_shouldDisablePositioning, "f").call(this) ? this.disableRelativePositioning() : this.position(true);
         }, DEFAULT_THROTTLE_WAIT_TIME));
         _RelativePositionController_throttledRepositionForScroll.set(this, lodash.throttle(() => {
             if (!__classPrivateFieldGet(this, _RelativePositionController_shouldDisablePositioning, "f")) {
-                this.position();
+                this.position(true);
                 return;
             }
-            __classPrivateFieldGet(this, _RelativePositionController_shouldDisablePositioning, "f").call(this) ? this.disableRelativePositioning() : this.position();
+            __classPrivateFieldGet(this, _RelativePositionController_shouldDisablePositioning, "f").call(this) ? this.disableRelativePositioning() : this.position(true);
         }, DEFAULT_SCROLL_THROTTLE_WAIT_TIME));
         __classPrivateFieldSet(this, _RelativePositionController_host, host, "f");
         __classPrivateFieldSet(this, _RelativePositionController_container, container, "f");
@@ -37,6 +42,8 @@ class RelativePositionController {
         __classPrivateFieldSet(this, _RelativePositionController_elementToPosition, elementToPosition, "f");
         __classPrivateFieldSet(this, _RelativePositionController_shouldDisablePositioning, shouldDisablePositioning, "f");
         __classPrivateFieldSet(this, _RelativePositionController_portalElementsNames, portalElementsNames, "f");
+        __classPrivateFieldSet(this, _RelativePositionController_isInitiallyScrollable, elementToPosition.classList.contains(SCROLLABLE_CLASS_NAME), "f");
+        __classPrivateFieldSet(this, _RelativePositionController_initialMaxHeight, getComputedStyle(elementToPosition).maxHeight, "f");
         __classPrivateFieldGet(this, _RelativePositionController_host, "f").addController(this);
     }
     hostConnected() {
@@ -53,19 +60,28 @@ class RelativePositionController {
         if (__classPrivateFieldGet(this, _RelativePositionController_nearestScrollableElement, "f"))
             __classPrivateFieldGet(this, _RelativePositionController_nearestScrollableElement, "f").removeEventListener('scroll', __classPrivateFieldGet(this, _RelativePositionController_throttledRepositionForScroll, "f"));
     }
-    position() {
+    position(disableRepositioning = false) {
         if (!__classPrivateFieldGet(this, _RelativePositionController_relativeElement, "f") || !__classPrivateFieldGet(this, _RelativePositionController_elementToPosition, "f"))
             return;
         __classPrivateFieldSet(this, _RelativePositionController_nearestNonStaticElementFromElementToPosition, this._findContainer(__classPrivateFieldGet(this, _RelativePositionController_elementToPosition, "f")), "f");
         if (!__classPrivateFieldGet(this, _RelativePositionController_container, "f"))
             __classPrivateFieldSet(this, _RelativePositionController_container, __classPrivateFieldGet(this, _RelativePositionController_nearestNonStaticElementFromElementToPosition, "f"), "f");
+        const positionElementRect = __classPrivateFieldGet(this, _RelativePositionController_initialHeight, "f")
+            ? {
+                ...__classPrivateFieldGet(this, _RelativePositionController_elementToPosition, "f").getBoundingClientRect().toJSON(),
+                height: __classPrivateFieldGet(this, _RelativePositionController_initialHeight, "f")
+            }
+            : __classPrivateFieldGet(this, _RelativePositionController_elementToPosition, "f").getBoundingClientRect();
         const position = new PositionCalculator({
-            direction: __classPrivateFieldGet(this, _RelativePositionController_direction, "f"),
+            direction: disableRepositioning && __classPrivateFieldGet(this, _RelativePositionController_calculatedDirection, "f") ? __classPrivateFieldGet(this, _RelativePositionController_calculatedDirection, "f") : __classPrivateFieldGet(this, _RelativePositionController_direction, "f"),
             relativeElementRect: __classPrivateFieldGet(this, _RelativePositionController_relativeElement, "f").getBoundingClientRect(),
-            positionElementRect: __classPrivateFieldGet(this, _RelativePositionController_elementToPosition, "f").getBoundingClientRect(),
+            positionElementRect,
             nearestNonStaticElementFromElementToPositionRect: __classPrivateFieldGet(this, _RelativePositionController_nearestNonStaticElementFromElementToPosition, "f").getBoundingClientRect(),
-            container: __classPrivateFieldGet(this, _RelativePositionController_container, "f")
+            container: __classPrivateFieldGet(this, _RelativePositionController_container, "f"),
+            disableRepositioning
         }).calculatePosition();
+        if (!disableRepositioning)
+            __classPrivateFieldSet(this, _RelativePositionController_calculatedDirection, position.calculatedSide, "f");
         this._setElementPosition(position);
     }
     _findNearestScrollableElement(element) {
@@ -88,7 +104,7 @@ class RelativePositionController {
         return this._findParentBasedOnStyle(parent, styles, callback);
     }
     _setElementPosition(position) {
-        if (!__classPrivateFieldGet(this, _RelativePositionController_elementToPosition, "f"))
+        if (!__classPrivateFieldGet(this, _RelativePositionController_elementToPosition, "f") || !__classPrivateFieldGet(this, _RelativePositionController_relativeElement, "f"))
             return;
         const { style: elementStyle } = __classPrivateFieldGet(this, _RelativePositionController_elementToPosition, "f");
         if (elementStyle.position !== 'absolute')
@@ -98,6 +114,17 @@ class RelativePositionController {
         if (elementStyle.left !== '0')
             elementStyle.left = '0';
         __classPrivateFieldGet(this, _RelativePositionController_elementToPosition, "f").style.transform = `translate3d(${position.left}px, ${position.top}px, 0)`;
+        if (!position.shrinkMode) {
+            if (!__classPrivateFieldGet(this, _RelativePositionController_isInitiallyScrollable, "f"))
+                __classPrivateFieldGet(this, _RelativePositionController_elementToPosition, "f").classList.remove(SCROLLABLE_CLASS_NAME);
+            elementStyle.maxHeight = __classPrivateFieldGet(this, _RelativePositionController_initialMaxHeight, "f") !== 'none' ? __classPrivateFieldGet(this, _RelativePositionController_initialMaxHeight, "f") : '';
+            return;
+        }
+        if (!__classPrivateFieldGet(this, _RelativePositionController_initialHeight, "f"))
+            __classPrivateFieldSet(this, _RelativePositionController_initialHeight, __classPrivateFieldGet(this, _RelativePositionController_elementToPosition, "f").getBoundingClientRect().height, "f");
+        __classPrivateFieldGet(this, _RelativePositionController_elementToPosition, "f").classList.add(SCROLLABLE_CLASS_NAME);
+        const shrinkModeMaxHeight = window.innerHeight - __classPrivateFieldGet(this, _RelativePositionController_relativeElement, "f").getBoundingClientRect().bottom - SHRINK_MODE_BOTTOM_MARGIN;
+        elementStyle.maxHeight = `${shrinkModeMaxHeight > SHRINK_MODE_MIN_HEIGHT ? shrinkModeMaxHeight : SHRINK_MODE_MIN_HEIGHT}px`;
     }
     disableRelativePositioning() {
         if (!__classPrivateFieldGet(this, _RelativePositionController_elementToPosition, "f"))
@@ -107,7 +134,7 @@ class RelativePositionController {
         elementStyle.transform = '';
     }
 }
-_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_throttledReposition = new WeakMap(), _RelativePositionController_throttledRepositionForScroll = new WeakMap();
+_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();
 
 export { RelativePositionController };
 //# sourceMappingURL=relative_position_controller.js.map

package/build/esm/packages/phoenix/src/controllers/relative_position_controller/relative_position_controller.js.map

@@ -1 +1 @@
-{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,+DAA+D,4CAAgD;AAC/G;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;"}
+{"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;"}

package/build/esm/packages/phoenix/src/controllers/relative_position_controller/relative_position_controller_constants.d.ts

@@ -24,3 +24,5 @@ export declare const OVERFLOW_SCROLL = "scroll";
 export declare const OVERFLOW_AUTO = "auto";
 export declare const DEFAULT_THROTTLE_WAIT_TIME = 300;
 export declare const DEFAULT_SCROLL_THROTTLE_WAIT_TIME = 15;
+export declare const SHRINK_MODE_BOTTOM_MARGIN = 20;
+export declare const SHRINK_MODE_MIN_HEIGHT = 80;

package/build/esm/packages/phoenix/src/controllers/relative_position_controller/relative_position_controller_constants.js

@@ -23,7 +23,9 @@ const NON_STATIC_POSITIONS = ['relative', 'absolute', 'fixed', 'sticky'];
 const OVERFLOW_SCROLL = 'scroll';
 const OVERFLOW_AUTO = 'auto';
 const DEFAULT_THROTTLE_WAIT_TIME = 300;
-const DEFAULT_SCROLL_THROTTLE_WAIT_TIME = 15;
+const DEFAULT_SCROLL_THROTTLE_WAIT_TIME = 15;
+const SHRINK_MODE_BOTTOM_MARGIN = 20;
+const SHRINK_MODE_MIN_HEIGHT = 80;
 
-export { CALCULATOR_DIRECTIONS, DEFAULT_SCROLL_THROTTLE_WAIT_TIME, DEFAULT_THROTTLE_WAIT_TIME, DIRECTIONS, NON_STATIC_POSITIONS, OVERFLOW_AUTO, OVERFLOW_SCROLL };
+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 };
 //# sourceMappingURL=relative_position_controller_constants.js.map

package/build/esm/packages/phoenix/src/controllers/relative_position_controller/relative_position_controller_constants.js.map

@@ -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;"}
+{"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;"}

package/build/esm/packages/phoenix/src/controllers/relative_position_controller/relative_position_controller_types.d.ts

@@ -2,8 +2,7 @@ import { CALCULATOR_DIRECTIONS, DIRECTIONS } from "./relative_position_controlle
 import { ReactiveController, ReactiveControllerHost } from 'lit';
 import { Any } from 'ts-toolbelt';
 export declare type TDirection = Any.Keys<typeof DIRECTIONS>;
-export declare type TSideDirection = Any.Keys<Pick<typeof CALCULATOR_DIRECTIONS, 'left' | 'right' | 'top' | 'bottom'>>;
-export declare type TAlignmentDirection = Any.Keys<typeof CALCULATOR_DIRECTIONS>;
+export declare type TCalculatorDirection = Any.Keys<typeof CALCULATOR_DIRECTIONS>;
 export declare type TRelativePositionControllerConstructorOptions = {
     host: ReactiveControllerHost & HTMLElement;
     direction: TDirection;
@@ -19,6 +18,11 @@ export interface IRelativePositionController extends ReactiveController {
 export declare type TRelativePositionControllerPositionData = {
     left: number;
     top: number;
+    calculatedSide: TDirection;
+    shrinkMode?: boolean;
+};
+export declare type TPartialPositionControllerPositionData = Omit<TRelativePositionControllerPositionData, 'calculatedSide'> & {
+    calculatedSide: TCalculatorDirection;
 };
 export declare type TRelativePositionCalculatorConstructorOptions = {
     direction: TDirection;
@@ -26,4 +30,5 @@ export declare type TRelativePositionCalculatorConstructorOptions = {
     positionElementRect: DOMRect;
     nearestNonStaticElementFromElementToPositionRect: DOMRect;
     container?: HTMLElement;
+    disableRepositioning?: boolean;
 };

package/build/esm/packages/phoenix/src/core/context/context_consumer_controller.js

@@ -1,7 +1,7 @@
 import { __classPrivateFieldSet, __classPrivateFieldGet } from '../../../../../external/tslib/tslib.es6.js';
+import { CONTEXT_ASYNC_CONSUMER_DEFAULT_INTERVAL_RATE, CONTEXT_ASYNC_CONSUMER_DFAULT_MAX_WAITING_TIME } from './context_constants.js';
 import 'lit';
 import { WEB_COMPONENT_CONTEXT_EVENTS } from './context_consumer_messages_names.js';
-import { CONTEXT_ASYNC_CONSUMER_DEFAULT_INTERVAL_RATE, CONTEXT_ASYNC_CONSUMER_DFAULT_MAX_WAITING_TIME } from './context_constants.js';
 
 var _ContextConsumerController_host, _ContextConsumerController_asyncConsumerSentinelId, _ContextConsumerController_asyncConsumerIntervalId;
 class ContextConsumerController {

package/build/esm/packages/phoenix/src/global_constants.d.ts

@@ -6,3 +6,4 @@ export declare const BREAKPOINTS: {
     xl: number;
     xxl: number;
 };
+export declare const SCROLLABLE_CLASS_NAME = "scrollable";

package/build/esm/packages/phoenix/src/global_constants.js

@@ -5,7 +5,8 @@ const BREAKPOINTS = {
     lg: 1200,
     xl: 1440,
     xxl: 1920
-};
+};
+const SCROLLABLE_CLASS_NAME = 'scrollable';
 
-export { BREAKPOINTS };
+export { BREAKPOINTS, SCROLLABLE_CLASS_NAME };
 //# sourceMappingURL=global_constants.js.map

package/build/esm/packages/phoenix/src/global_constants.js.map

@@ -1 +1 @@
-{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

package/build/esm/packages/phoenix/src/index.js

@@ -1,54 +1,54 @@
 export { ContextProviderController } from './core/context/context_provider_controller.js';
 export { ContextConsumerController } from './core/context/context_consumer_controller.js';
 export { PhoenixLightLitElement } from './core/phoenix_light_lit_element.js';
-export { HPortalTarget } from './components/portal/portal_target.js';
 export { HPortal } from './components/portal/portal.js';
+export { HPortalTarget } from './components/portal/portal_target.js';
 export { HModal } from './components/modal/modal.js';
 export { HModalOpener } from './components/modal/modal_opener.js';
 export { HModalBody } from './components/modal/modal_body.js';
 export { HModalFooter } from './components/modal/modal_footer.js';
 export { HModalHeader } from './components/modal/modal_header.js';
 export { HModalClose } from './components/modal/modal_close.js';
-export { ADDITIONAL_CONTENT_TYPE_TO_CSS_CLASSES_MAP, CONTROL_ADDITIONAL_CONTENT_TYPES, CONTROL_CONTENT_SIZES, FORM_CONTROLS_CSS_CLASSES } from './components/form/control/control_constatns.js';
 export { HControl } from './components/form/control/control.js';
 export { HControlErrors } from './components/form/control/control_errors.js';
 export { HControlContent } from './components/form/control/control_content.js';
 export { HControlElement } from './components/form/control/control_element.js';
 export { HControlLabel } from './components/form/control/control_label.js';
 export { HControlAdditionalContent } from './components/form/control/control_additional_content.js';
-export { INPUT_CONTROL_CSS_CLASSES, INPUT_CONTROL_EVENTS, INPUT_CONTROL_SIZES, INPUT_CONTROL_TYPES, INPUT_PROPS_TO_SYNC } from './components/form/input/input_constants.js';
+export { ADDITIONAL_CONTENT_TYPE_TO_CSS_CLASSES_MAP, CONTROL_ADDITIONAL_CONTENT_TYPES, CONTROL_CONTENT_SIZES, FORM_CONTROLS_CSS_CLASSES } from './components/form/control/control_constatns.js';
 export { HInput } from './components/form/input/input.js';
 export { HInputControl } from './components/form/input/input_control.js';
 export { HInputIcon } from './components/form/input/input_icon.js';
 export { HInputUnit } from './components/form/input/input_unit.js';
-export { CHECKBOX_CONTROL_CSS_CLASSES, CHECKBOX_CONTROL_EVENTS, CHECKBOX_PROPS_TO_SYNC, CHECKBOX_SLOTS } from './components/form/checkbox/checkbox_constants.js';
+export { INPUT_CONTROL_CSS_CLASSES, INPUT_CONTROL_EVENTS, INPUT_CONTROL_SIZES, INPUT_CONTROL_TYPES, INPUT_PROPS_TO_SYNC } from './components/form/input/input_constants.js';
 export { HCheckbox } from './components/form/checkbox/checkbox.js';
-export { LABEL_CSS_CLASSES } from './components/form/label/label_constants.js';
 export { HCheckboxContent } from './components/form/checkbox/checkbox_content.js';
 export { HCheckboxControl } from './components/form/checkbox/checkbox_control.js';
-export { SWITCH_CONTROL_CSS_CLASSES, SWITCH_CONTROL_EVENTS, SWITCH_SLOTS } from './components/form/switch/switch_constants.js';
+export { CHECKBOX_CONTROL_CSS_CLASSES, CHECKBOX_CONTROL_EVENTS, CHECKBOX_PROPS_TO_SYNC, CHECKBOX_SLOTS } from './components/form/checkbox/checkbox_constants.js';
 export { HSwitch } from './components/form/switch/switch.js';
 export { HSwitchContent } from './components/form/switch/switch_content.js';
 export { HSwitchControl } from './components/form/switch/switch_control.js';
-export { RADIO_CONTROL_CSS_CLASSES, RADIO_CONTROL_EVENTS, RADIO_SLOTS } from './components/form/radio/radio_constants.js';
+export { SWITCH_CONTROL_CSS_CLASSES, SWITCH_CONTROL_EVENTS, SWITCH_SLOTS } from './components/form/switch/switch_constants.js';
 export { HRadio } from './components/form/radio/radio.js';
 export { HRadioContent } from './components/form/radio/radio_content.js';
 export { HRadioControl } from './components/form/radio/radio_control.js';
-export { TEXTAREA_CONTROL_CSS_CLASSES, TEXTAREA_CONTROL_EVENTS, TEXTAREA_PROPS_TO_SYNC, TEXTAREA_SLOTS } from './components/form/textarea/textarea_constants.js';
+export { RADIO_CONTROL_CSS_CLASSES, RADIO_CONTROL_EVENTS, RADIO_SLOTS } from './components/form/radio/radio_constants.js';
 export { HTextarea } from './components/form/textarea/textarea.js';
 export { HTextareaControl } from './components/form/textarea/textarea_control.js';
-export { ACCORDION_CONTEXTS, ACCORDION_EVENTS, ACCORDION_MODE } from './components/accordion/accordion_constants.js';
+export { TEXTAREA_CONTROL_CSS_CLASSES, TEXTAREA_CONTROL_EVENTS, TEXTAREA_PROPS_TO_SYNC, TEXTAREA_SLOTS } from './components/form/textarea/textarea_constants.js';
+export { LABEL_CSS_CLASSES } from './components/form/label/label_constants.js';
 export { HAccordion } from './components/accordion/accordion.js';
 export { HAccordionGroup } from './components/accordion/accordion_group.js';
-export { KeystrokesController } from './controllers/keystrokes_controller/keystrokes_controller.js';
-export { BtnController } from './controllers/btn_controller.js';
-export { HAccordionContent } from './components/accordion/accordion_content.js';
 export { HAccordionToggler } from './components/accordion/accordion_toggler.js';
-export { ClickOutsideController } from './controllers/click_outside_controller/click_outside_controller.js';
+export { HAccordionContent } from './components/accordion/accordion_content.js';
+export { ACCORDION_CONTEXTS, ACCORDION_EVENTS, ACCORDION_MODE } from './components/accordion/accordion_constants.js';
+export { BtnController } from './controllers/btn_controller.js';
+export { HDropdown } from './components/dropdown/dropdown.js';
+export { HDropdownToggler } from './components/dropdown/dropdown_toggler.js';
 export { HDropdownContent } from './components/dropdown/dropdown_content.js';
+export { ClickOutsideController } from './controllers/click_outside_controller/click_outside_controller.js';
+export { KeystrokesController } from './controllers/keystrokes_controller/keystrokes_controller.js';
 export { RelativePositionController } from './controllers/relative_position_controller/relative_position_controller.js';
-export { HDropdown } from './components/dropdown/dropdown.js';
 export { ToggleElementAriaController } from './controllers/toggle_element_aria_controller/toggle_element_aria_controller.js';
-export { HDropdownToggler } from './components/dropdown/dropdown_toggler.js';
 export { HBackdrop } from './components/backdrop/backdrop.js';
 //# sourceMappingURL=index.js.map

package/package.json

@@ -2,7 +2,7 @@
   "name": "@shoper/phoenix_design_system",
   "packageManager": "yarn@3.2.0",
   "sideEffects": false,
-  "version": "0.14.0",
+  "version": "0.14.2",
   "description": "phoenix design system",
   "author": "zefirek",
   "license": "MIT",