@shoper/phoenix_design_system 0.10.0 → 0.10.1-1

package/build/esm/packages/phoenix/src/components/modal/modal.js

@@ -6,6 +6,7 @@ import { phoenixCustomElement } from '../../core/decorators/phoenix_custom_eleme
 import { PORTAL_TARGET_NAME_PROP } from '../portal/portal_constants.js';
 import { MODAL_OPENED_PROP, FOCUSABLE_ELEMENTS_WITHIN_MODAL, MODALS_PORTAL_NAME, MODAL_EVENTS } from './modal_constants.js';
 import { createRef as e, ref as n } from '../../../../../external/lit-html/directives/ref.js';
+import { BACKDROP_EVENTS } from '../backdrop/backdrop_constants.js';
 
 var HModal_1;
 let HModal = HModal_1 = class HModal extends PhoenixLightLitElement {
@@ -89,26 +90,21 @@ let HModal = HModal_1 = class HModal extends PhoenixLightLitElement {
             document.body.appendChild($portalTarget);
         }
     }
-    static _appendModalsBackdrop() {
-        const $modalsBackdrop = document.querySelector('h-modal-backdrop');
-        if (!$modalsBackdrop) {
-            const $backdrop = document.createElement('h-modal-backdrop');
-            document.body.appendChild($backdrop);
-        }
-    }
     static isSomeModalOpen() {
         return HModal_1.openModals.some((modal) => modal.opened);
     }
     connectedCallback() {
         super.connectedCallback();
         HModal_1._appendModalsPortal();
-        HModal_1._appendModalsBackdrop();
         document.addEventListener('keydown', this._keepFocusWithinModal);
         document.addEventListener(MODAL_EVENTS.close, this._handleCloseFromCloseComponent);
     }
     disconnectedCallback() {
         super.disconnectedCallback();
-        this[MODAL_OPENED_PROP] = false;
+        if (this[MODAL_OPENED_PROP]) {
+            this[MODAL_OPENED_PROP] = false;
+            this._dispatchModalClosedEvent();
+        }
         document.removeEventListener(MODAL_EVENTS.close, this._handleCloseFromCloseComponent);
         document.removeEventListener('keydown', this._bindCloseOnEsc);
     }
@@ -135,7 +131,6 @@ let HModal = HModal_1 = class HModal extends PhoenixLightLitElement {
                 setTimeout(() => {
                     var _a;
                     this[MODAL_OPENED_PROP] = true;
-                    this._dispatchModalOpenedEvent();
                     (_a = this._contentRef.value) === null || _a === void 0 ? void 0 : _a.classList.remove(`modal_show-${this.transition}-start`, `modal_show-${this.transition}-end`);
                     resolve();
                 }, transitionDuration);
@@ -147,6 +142,10 @@ let HModal = HModal_1 = class HModal extends PhoenixLightLitElement {
             bubbles: true
         });
         this.dispatchEvent(openModalEvent);
+        const openBackdropEvent = new CustomEvent(BACKDROP_EVENTS.show, {
+            bubbles: true
+        });
+        document.dispatchEvent(openBackdropEvent);
     }
     async close() {
         return new Promise((resolve) => {
@@ -170,6 +169,10 @@ let HModal = HModal_1 = class HModal extends PhoenixLightLitElement {
             bubbles: true
         });
         this.dispatchEvent(closeModalEvent);
+        const closeBackdropEvent = new CustomEvent(BACKDROP_EVENTS.hide, {
+            bubbles: true
+        });
+        document.dispatchEvent(closeBackdropEvent);
     }
     render() {
         return html `

package/build/esm/packages/phoenix/src/components/modal/modal.js.map

@@ -1 +1 @@
-{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,uCAAuC,4CAAgD;AACvF;AACA;AACA;AACA;AACA;AACA;AACA,yCAAyC,oDAAwD;AACjG;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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,uCAAuC,4CAAgD;AACvF;AACA;AACA;AACA;AACA;AACA;AACA,yCAAyC,oDAAwD;AACjG;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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/click_outside_controller/click_outside_controller.js

@@ -15,8 +15,10 @@ class ClickOutsideController {
                     name: this._name
                 }
             });
-            const { target } = ev;
-            if (target.contains(__classPrivateFieldGet(this, _ClickOutsideController_container, "f"))) {
+            const target = ev.target;
+            const isContainerWithinTarget = target.contains(__classPrivateFieldGet(this, _ClickOutsideController_container, "f")) && target !== __classPrivateFieldGet(this, _ClickOutsideController_container, "f");
+            const isTargetWithinContainer = __classPrivateFieldGet(this, _ClickOutsideController_container, "f").contains(target);
+            if (isContainerWithinTarget || !isTargetWithinContainer) {
                 __classPrivateFieldGet(this, _ClickOutsideController_host, "f").dispatchEvent(clickedOutsideEvent);
             }
         };

package/build/esm/packages/phoenix/src/controllers/click_outside_controller/click_outside_controller.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;"}
+{"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;"}

package/build/esm/packages/phoenix/src/controllers/click_outside_controller/click_outside_controller_types.d.ts

@@ -4,3 +4,7 @@ export declare type TClickOutsideControllerProps = {
     container: HTMLElement;
     name?: string;
 };
+export declare type TClickOutsideEvent = {
+    target: EventTarget | null;
+    name?: string;
+};

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

@@ -25,11 +25,11 @@ class PositionCalculator {
         };
     }
     _canFitTopSide() {
-        const elementTop = __classPrivateFieldGet(this, _PositionCalculator_relativeElementRect, "f").top - __classPrivateFieldGet(this, _PositionCalculator_nearestNonStaticElementFromElementToPositionRect, "f").top - __classPrivateFieldGet(this, _PositionCalculator_positionElementRect, "f").height;
+        const elementTop = __classPrivateFieldGet(this, _PositionCalculator_relativeElementRect, "f").top - __classPrivateFieldGet(this, _PositionCalculator_positionElementRect, "f").height;
         return elementTop > __classPrivateFieldGet(this, _PositionCalculator_containerRect, "f").top && elementTop > 0;
     }
     _canFitBottomSide() {
-        const elementBottom = __classPrivateFieldGet(this, _PositionCalculator_relativeElementRect, "f").bottom - __classPrivateFieldGet(this, _PositionCalculator_nearestNonStaticElementFromElementToPositionRect, "f").top + __classPrivateFieldGet(this, _PositionCalculator_positionElementRect, "f").height;
+        const elementBottom = __classPrivateFieldGet(this, _PositionCalculator_relativeElementRect, "f").bottom + __classPrivateFieldGet(this, _PositionCalculator_positionElementRect, "f").height;
         return elementBottom < __classPrivateFieldGet(this, _PositionCalculator_containerRect, "f").bottom && elementBottom < window.innerHeight;
     }
     _calculateSidePosition(side) {

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

@@ -1,7 +1,7 @@
 import { IRelativePositionController, TRelativePositionControllerConstructorOptions } from "./relative_position_controller_types";
 export declare class RelativePositionController implements IRelativePositionController {
     #private;
-    constructor({ host, container, direction, relativeElement, elementToPosition }: TRelativePositionControllerConstructorOptions);
+    constructor({ host, container, direction, relativeElement, elementToPosition, shouldDisablePositioning, portalElementsNames }: TRelativePositionControllerConstructorOptions);
     hostConnected(): void;
     hostDisconnected(): void;
     position(): void;
@@ -9,4 +9,5 @@ export declare class RelativePositionController implements IRelativePositionCont
     private _findContainer;
     private _findParentBasedOnStyle;
     private _setElementPosition;
+    disableRelativePositioning(): void;
 }

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

@@ -1,12 +1,12 @@
-import { __classPrivateFieldSet, __classPrivateFieldGet } from '../../../../../external/tslib/tslib.es6.js';
+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 { PositionCalculator } from './relative_position_calculator.js';
 import lodash from '../../../../../external/lodash/lodash.js';
 
-var _RelativePositionController_host, _RelativePositionController_container, _RelativePositionController_nearestNonStaticElementFromElementToPosition, _RelativePositionController_direction, _RelativePositionController_nearestScrollableElement, _RelativePositionController_relativeElement, _RelativePositionController_elementToPosition, _RelativePositionController_throttledReposition, _RelativePositionController_throttledRepositionForScroll;
+var _RelativePositionController_host, _RelativePositionController_container, _RelativePositionController_nearestNonStaticElementFromElementToPosition, _RelativePositionController_direction, _RelativePositionController_nearestScrollableElement, _RelativePositionController_relativeElement, _RelativePositionController_elementToPosition, _RelativePositionController_shouldDisablePositioning, _RelativePositionController_portalElementsNames, _RelativePositionController_throttledReposition, _RelativePositionController_throttledRepositionForScroll;
 class RelativePositionController {
-    constructor({ host, container, direction, relativeElement, elementToPosition }) {
+    constructor({ host, container, direction, relativeElement, elementToPosition, shouldDisablePositioning, portalElementsNames = [] }) {
         _RelativePositionController_host.set(this, void 0);
         _RelativePositionController_container.set(this, void 0);
         _RelativePositionController_nearestNonStaticElementFromElementToPosition.set(this, void 0);
@@ -14,30 +14,42 @@ class RelativePositionController {
         _RelativePositionController_nearestScrollableElement.set(this, void 0);
         _RelativePositionController_relativeElement.set(this, void 0);
         _RelativePositionController_elementToPosition.set(this, void 0);
+        _RelativePositionController_shouldDisablePositioning.set(this, void 0);
+        _RelativePositionController_portalElementsNames.set(this, void 0);
         _RelativePositionController_throttledReposition.set(this, lodash.throttle(() => {
-            this.position();
+            if (!__classPrivateFieldGet(this, _RelativePositionController_shouldDisablePositioning, "f")) {
+                this.position();
+                return;
+            }
+            __classPrivateFieldGet(this, _RelativePositionController_shouldDisablePositioning, "f").call(this) ? this.disableRelativePositioning() : this.position();
         }, DEFAULT_THROTTLE_WAIT_TIME));
         _RelativePositionController_throttledRepositionForScroll.set(this, lodash.throttle(() => {
-            this.position();
+            if (!__classPrivateFieldGet(this, _RelativePositionController_shouldDisablePositioning, "f")) {
+                this.position();
+                return;
+            }
+            __classPrivateFieldGet(this, _RelativePositionController_shouldDisablePositioning, "f").call(this) ? this.disableRelativePositioning() : this.position();
         }, DEFAULT_SCROLL_THROTTLE_WAIT_TIME));
         __classPrivateFieldSet(this, _RelativePositionController_host, host, "f");
         __classPrivateFieldSet(this, _RelativePositionController_container, container, "f");
         __classPrivateFieldSet(this, _RelativePositionController_direction, direction, "f");
         __classPrivateFieldSet(this, _RelativePositionController_relativeElement, relativeElement, "f");
         __classPrivateFieldSet(this, _RelativePositionController_elementToPosition, elementToPosition, "f");
+        __classPrivateFieldSet(this, _RelativePositionController_shouldDisablePositioning, shouldDisablePositioning, "f");
+        __classPrivateFieldSet(this, _RelativePositionController_portalElementsNames, portalElementsNames, "f");
         __classPrivateFieldGet(this, _RelativePositionController_host, "f").addController(this);
     }
     hostConnected() {
-        __classPrivateFieldGet(this, _RelativePositionController_host, "f").addEventListener('resize', __classPrivateFieldGet(this, _RelativePositionController_throttledReposition, "f"));
         if (!__classPrivateFieldGet(this, _RelativePositionController_relativeElement, "f"))
             return;
         if (!__classPrivateFieldGet(this, _RelativePositionController_nearestScrollableElement, "f")) {
             __classPrivateFieldSet(this, _RelativePositionController_nearestScrollableElement, this._findNearestScrollableElement(__classPrivateFieldGet(this, _RelativePositionController_relativeElement, "f")), "f");
         }
+        window.addEventListener('resize', __classPrivateFieldGet(this, _RelativePositionController_throttledReposition, "f"));
         __classPrivateFieldGet(this, _RelativePositionController_nearestScrollableElement, "f").addEventListener('scroll', __classPrivateFieldGet(this, _RelativePositionController_throttledRepositionForScroll, "f"));
     }
     hostDisconnected() {
-        __classPrivateFieldGet(this, _RelativePositionController_host, "f").removeEventListener('resize', __classPrivateFieldGet(this, _RelativePositionController_throttledReposition, "f"));
+        window.removeEventListener('resize', __classPrivateFieldGet(this, _RelativePositionController_throttledReposition, "f"));
         if (__classPrivateFieldGet(this, _RelativePositionController_nearestScrollableElement, "f"))
             __classPrivateFieldGet(this, _RelativePositionController_nearestScrollableElement, "f").removeEventListener('scroll', __classPrivateFieldGet(this, _RelativePositionController_throttledRepositionForScroll, "f"));
     }
@@ -58,7 +70,8 @@ class RelativePositionController {
     }
     _findNearestScrollableElement(element) {
         const overflowArray = ['overflow', 'overflowY', 'overflowX'];
-        return this._findParentBasedOnStyle(element, overflowArray, (overflowArray) => overflowArray.includes(OVERFLOW_SCROLL) || overflowArray.includes(OVERFLOW_AUTO));
+        const scrollableElement = this._findParentBasedOnStyle(element, overflowArray, (overflowArray) => overflowArray.includes(OVERFLOW_SCROLL) || overflowArray.includes(OVERFLOW_AUTO));
+        return scrollableElement !== document.body ? scrollableElement : window;
     }
     _findContainer(element) {
         return this._findParentBasedOnStyle(element, ['position'], ([position]) => NON_STATIC_POSITIONS.includes(position));
@@ -70,7 +83,7 @@ class RelativePositionController {
         const parentStyles = styles.reduce((styles, currentStyle) => {
             return [...styles, window.getComputedStyle(parent)[currentStyle]];
         }, []);
-        if (callback(parentStyles) || parent === document.body)
+        if ((callback(parentStyles) || parent === document.body) && !__classPrivateFieldGet(this, _RelativePositionController_portalElementsNames, "f").includes(parent.localName))
             return parent;
         return this._findParentBasedOnStyle(parent, styles, callback);
     }
@@ -86,8 +99,15 @@ class RelativePositionController {
             elementStyle.left = '0';
         __classPrivateFieldGet(this, _RelativePositionController_elementToPosition, "f").style.transform = `translate3d(${position.left}px, ${position.top}px, 0)`;
     }
+    disableRelativePositioning() {
+        if (!__classPrivateFieldGet(this, _RelativePositionController_elementToPosition, "f"))
+            return;
+        const { style: elementStyle } = __classPrivateFieldGet(this, _RelativePositionController_elementToPosition, "f");
+        elementStyle.position = '';
+        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_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_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;"}
+{"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;"}

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

@@ -10,6 +10,8 @@ export declare type TRelativePositionControllerConstructorOptions = {
     container?: HTMLElement;
     relativeElement: HTMLElement;
     elementToPosition: HTMLElement;
+    shouldDisablePositioning?: () => boolean;
+    portalElementsNames?: string[];
 };
 export interface IRelativePositionController extends ReactiveController {
     position(): void;

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

@@ -0,0 +1,8 @@
+export declare const BREAKPOINTS: {
+    xs: number;
+    sm: number;
+    md: number;
+    lg: number;
+    xl: number;
+    xxl: number;
+};

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

@@ -0,0 +1,11 @@
+const BREAKPOINTS = {
+    xs: 576,
+    sm: 768,
+    md: 1000,
+    lg: 1200,
+    xl: 1440,
+    xxl: 1920
+};
+
+export { BREAKPOINTS };
+//# sourceMappingURL=global_constants.js.map

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

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

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

@@ -7,7 +7,6 @@ export { HPortal } from './components/portal/portal';
 export { HPortalTarget } from './components/portal/portal_target';
 export { HModal } from './components/modal/modal';
 export { HModalOpener } from './components/modal/modal_opener';
-export { HModalBackdrop } from './components/modal/modal_backdrop';
 export { HModalBody } from './components/modal/modal_body';
 export { HModalFooter } from './components/modal/modal_footer';
 export { HModalHeader } from './components/modal/modal_header';
@@ -30,3 +29,4 @@ export { ClickOutsideController } from './controllers/click_outside_controller/c
 export { KeystrokesController } from './controllers/keystrokes_controller/keystrokes_controller';
 export { RelativePositionController } from './controllers/relative_position_controller/relative_position_controller';
 export { ToggleElementAriaController } from './controllers/toggle_element_aria_controller/toggle_element_aria_controller';
+export { HBackdrop } from './components/backdrop/backdrop';

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

@@ -6,7 +6,6 @@ export { HPortalTarget } from './components/portal/portal_target.js';
 export { HPortal } from './components/portal/portal.js';
 export { HModal } from './components/modal/modal.js';
 export { HModalOpener } from './components/modal/modal_opener.js';
-export { HModalBackdrop } from './components/modal/modal_backdrop.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';
@@ -24,9 +23,10 @@ export { BtnController } from './controllers/btn_controller.js';
 export { HAccordionToggler } from './components/accordion/accordion_toggler.js';
 export { HAccordion } from './components/accordion/accordion.js';
 export { ClickOutsideController } from './controllers/click_outside_controller/click_outside_controller.js';
+export { HDropdownContent } from './components/dropdown/dropdown_content.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 { HDropdownContent } from './components/dropdown/dropdown_content.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.10.0",
+  "version": "0.10.1-1",
   "description": "phoenix design system",
   "author": "zefirek",
   "license": "MIT",

package/build/cjs/packages/phoenix/src/components/modal/modal_backdrop.js

@@ -1,66 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var tslib_es6 = require('../../../../../external/tslib/tslib.es6.js');
-var lit = require('lit');
-var decorators = require('lit/decorators');
-var phoenix_light_lit_element = require('../../core/phoenix_light_lit_element.js');
-var phoenix_custom_element = require('../../core/decorators/phoenix_custom_element.js');
-var modal_constants = require('./modal_constants.js');
-var modal = require('./modal.js');
-
-exports.HModalBackdrop = class HModalBackdrop extends phoenix_light_lit_element.PhoenixLightLitElement {
-    constructor() {
-        super(...arguments);
-        this.visible = false;
-        this._show = () => {
-            if (!this.visible) {
-                this.visible = true;
-            }
-        };
-        this._hide = () => {
-            if (!modal.HModal.isSomeModalOpen()) {
-                this.visible = false;
-            }
-        };
-    }
-    connectedCallback() {
-        super.connectedCallback();
-        document.addEventListener(modal_constants.MODAL_EVENTS.opened, this._show);
-        document.addEventListener(modal_constants.MODAL_EVENTS.closed, this._hide);
-    }
-    disconnectedCallback() {
-        super.disconnectedCallback();
-        document.removeEventListener(modal_constants.MODAL_EVENTS.opened, this._show);
-        document.removeEventListener(modal_constants.MODAL_EVENTS.closed, this._hide);
-    }
-    updated() {
-        if (modal.HModal.isSomeModalOpen()) {
-            this.visible = true;
-            this._disableScrolling();
-        }
-        else {
-            this._enableScrolling();
-        }
-    }
-    _disableScrolling() {
-        document.body.style.overflow = 'hidden';
-        document.body.style.paddingRight = '15px';
-    }
-    _enableScrolling() {
-        document.body.style.removeProperty('overflow');
-        document.body.style.removeProperty('padding-right');
-    }
-    render() {
-        return lit.html ` <div aria-hidden="true" ?hidden="${!this.visible}" class="modal-backdrop"></div>`;
-    }
-};
-tslib_es6.__decorate([
-    decorators.property({ type: Boolean }),
-    tslib_es6.__metadata("design:type", Object)
-], exports.HModalBackdrop.prototype, "visible", void 0);
-exports.HModalBackdrop = tslib_es6.__decorate([
-    phoenix_custom_element.phoenixCustomElement('h-modal-backdrop')
-], exports.HModalBackdrop);
-//# sourceMappingURL=modal_backdrop.js.map

package/build/esm/packages/phoenix/src/components/modal/modal_backdrop.d.ts

@@ -1,12 +0,0 @@
-import { PhoenixLightLitElement } from "../../core/phoenix_light_lit_element";
-export declare class HModalBackdrop extends PhoenixLightLitElement {
-    visible: boolean;
-    connectedCallback(): void;
-    disconnectedCallback(): void;
-    private _show;
-    private _hide;
-    protected updated(): void;
-    private _disableScrolling;
-    private _enableScrolling;
-    render(): import("lit-html").TemplateResult<1>;
-}

package/build/esm/packages/phoenix/src/components/modal/modal_backdrop.js

@@ -1,64 +0,0 @@
-import { __decorate, __metadata } from '../../../../../external/tslib/tslib.es6.js';
-import { html } from 'lit';
-import { property } from 'lit/decorators';
-import { PhoenixLightLitElement } from '../../core/phoenix_light_lit_element.js';
-import { phoenixCustomElement } from '../../core/decorators/phoenix_custom_element.js';
-import { MODAL_EVENTS } from './modal_constants.js';
-import { HModal } from './modal.js';
-
-let HModalBackdrop = class HModalBackdrop extends PhoenixLightLitElement {
-    constructor() {
-        super(...arguments);
-        this.visible = false;
-        this._show = () => {
-            if (!this.visible) {
-                this.visible = true;
-            }
-        };
-        this._hide = () => {
-            if (!HModal.isSomeModalOpen()) {
-                this.visible = false;
-            }
-        };
-    }
-    connectedCallback() {
-        super.connectedCallback();
-        document.addEventListener(MODAL_EVENTS.opened, this._show);
-        document.addEventListener(MODAL_EVENTS.closed, this._hide);
-    }
-    disconnectedCallback() {
-        super.disconnectedCallback();
-        document.removeEventListener(MODAL_EVENTS.opened, this._show);
-        document.removeEventListener(MODAL_EVENTS.closed, this._hide);
-    }
-    updated() {
-        if (HModal.isSomeModalOpen()) {
-            this.visible = true;
-            this._disableScrolling();
-        }
-        else {
-            this._enableScrolling();
-        }
-    }
-    _disableScrolling() {
-        document.body.style.overflow = 'hidden';
-        document.body.style.paddingRight = '15px';
-    }
-    _enableScrolling() {
-        document.body.style.removeProperty('overflow');
-        document.body.style.removeProperty('padding-right');
-    }
-    render() {
-        return html ` <div aria-hidden="true" ?hidden="${!this.visible}" class="modal-backdrop"></div>`;
-    }
-};
-__decorate([
-    property({ type: Boolean }),
-    __metadata("design:type", Object)
-], HModalBackdrop.prototype, "visible", void 0);
-HModalBackdrop = __decorate([
-    phoenixCustomElement('h-modal-backdrop')
-], HModalBackdrop);
-
-export { HModalBackdrop };
-//# sourceMappingURL=modal_backdrop.js.map