@shoper/phoenix_design_system 0.8.1 → 0.8.3-0

package/build/esm/packages/phoenix/src/components/backdrop/backdrop_types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"backdrop_types.js","sourceRoot":"","sources":["../../../../../../../src/components/backdrop/backdrop_types.ts"],"names":[],"mappings":""}

package/build/esm/packages/phoenix/src/components/dropdown/dropdown.d.ts

@@ -10,18 +10,20 @@ export declare class HDropdown extends PhoenixLightLitElement implements IDropdo
     portalTarget: string;
     $dropdownToggler: HTMLElement | null;
     $dropdownContent: HTMLElement | null;
+    $nestedDropdownContent: HTMLElement | null;
     private _positionController;
     private _clickOutsideController;
     connectedCallback(): void;
     private _appendDropdownPortal;
-    private _appendDropdownBackdrop;
     private _setupListeners;
     private _handleClickOutside;
     toggle: () => void;
     show: () => Promise<void>;
+    private _dispatchShowDropdownEvent;
     hide: () => Promise<void>;
+    private _dispatchHideDropdownEvent;
     private _hoverToggle;
-    private _isDescendantOfParent;
+    private _isHoveredWithinDropdown;
     private _positionDropdownContent;
     disconnectedCallback(): void;
     render(): TemplateResult;

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

@@ -4,11 +4,12 @@ import { property } from 'lit/decorators';
 import { PhoenixLightLitElement } from '../../core/phoenix_light_lit_element.js';
 import { phoenixCustomElement } from '../../core/decorators/phoenix_custom_element.js';
 import { PORTAL_TARGET_COMPONENT_NAME, PORTAL_TARGET_NAME_PROP } from '../portal/portal_constants.js';
-import { DEFAULT_DROPDOWN_PORTAL_NAME, DROPDOWN_EVENTS, DROPDOWN_CONTENT_VISIBLE_CLASS, DROPDOWN_CONTENT_SHOW, DROPDOWN_CONTENT_HIDE, DROPDOWN_CONTENT_NAME, DROPDOWN_TOGGLER_NAME, DROPDOWN_BACKDROP_NAME } from './dropdown_constants.js';
+import { BACKDROP_EVENTS } from '../backdrop/backdrop_constants.js';
+import { DEFAULT_DROPDOWN_PORTAL_NAME, DROPDOWN_CONTENT_VISIBLE_CLASS, DROPDOWN_CONTENT_SHOW, DROPDOWN_EVENTS, DROPDOWN_CONTENT_HIDE, DROPDOWN_CONTENT_NAME, DROPDOWN_TOGGLER_NAME, DROPDOWN_CONTAINER_NAME } from './dropdown_constants.js';
+import { BREAKPOINTS } from '../../global_constants.js';
 import { CLICK_OUTSIDE_CONTROLLER_MESSAGES } from '../../controllers/click_outside_controller/click_outside_controller_messages.js';
 import { ClickOutsideController } from '../../controllers/click_outside_controller/click_outside_controller.js';
 import { DIRECTIONS } from '../../controllers/relative_position_controller/relative_position_controller_constants.js';
-import { MOBILE_SCREEN_WIDTH } from '../../global_constants.js';
 import { RelativePositionController } from '../../controllers/relative_position_controller/relative_position_controller.js';
 
 let HDropdown = class HDropdown extends PhoenixLightLitElement {
@@ -24,10 +25,6 @@ let HDropdown = class HDropdown extends PhoenixLightLitElement {
             this.opened ? this.hide() : this.show();
         };
         this.show = async () => {
-            const showDropdownEvent = new Event(DROPDOWN_EVENTS.show, {
-                bubbles: true
-            });
-            this.dispatchEvent(showDropdownEvent);
             return new Promise((resolve) => {
                 var _a;
                 (_a = this.$dropdownContent) === null || _a === void 0 ? void 0 : _a.classList.add(DROPDOWN_CONTENT_VISIBLE_CLASS, `${DROPDOWN_CONTENT_SHOW}-${this.transition}-start`);
@@ -40,42 +37,60 @@ let HDropdown = class HDropdown extends PhoenixLightLitElement {
                     setTimeout(() => {
                         var _a;
                         this.opened = true;
-                        this.dispatchEvent(showDropdownEvent);
+                        this._dispatchShowDropdownEvent();
                         (_a = this.$dropdownContent) === null || _a === void 0 ? void 0 : _a.classList.remove(`${DROPDOWN_CONTENT_SHOW}-${this.transition}-start`, `${DROPDOWN_CONTENT_SHOW}-${this.transition}-end`);
                         resolve();
                     }, transitionDuration);
                 });
             });
         };
-        this.hide = async () => {
+        this._dispatchShowDropdownEvent = () => {
+            const showDropdownEvent = new Event(DROPDOWN_EVENTS.show, {
+                bubbles: true
+            });
+            this.dispatchEvent(showDropdownEvent);
+            if (window.innerWidth >= BREAKPOINTS.xs)
+                return;
+            const showBackdropEvent = new Event(BACKDROP_EVENTS.show, {
+                bubbles: true
+            });
+            document.dispatchEvent(showBackdropEvent);
+        };
+        this.hide = async () => new Promise((resolve) => {
+            const transitionDuration = parseFloat(getComputedStyle(this.$dropdownContent || this).transitionDuration) * 1000;
+            window.requestAnimationFrame(() => {
+                var _a, _b;
+                (_a = this.$dropdownContent) === null || _a === void 0 ? void 0 : _a.classList.remove(`${DROPDOWN_CONTENT_HIDE}-${this.transition}-start`);
+                (_b = this.$dropdownContent) === null || _b === void 0 ? void 0 : _b.classList.add(`${DROPDOWN_CONTENT_HIDE}-${this.transition}-end`);
+                setTimeout(() => {
+                    var _a;
+                    (_a = this.$dropdownContent) === null || _a === void 0 ? void 0 : _a.classList.remove(`${DROPDOWN_CONTENT_HIDE}-${this.transition}-start`, `${DROPDOWN_CONTENT_HIDE}-${this.transition}-end`);
+                    this.opened = false;
+                    this._dispatchHideDropdownEvent();
+                    resolve();
+                }, transitionDuration);
+            });
+        });
+        this._dispatchHideDropdownEvent = () => {
             const hideDropdownEvent = new Event(DROPDOWN_EVENTS.hide, {
                 bubbles: true
             });
-            return new Promise((resolve) => {
-                const transitionDuration = parseFloat(getComputedStyle(this.$dropdownContent || this).transitionDuration) * 1000;
-                window.requestAnimationFrame(() => {
-                    var _a, _b;
-                    (_a = this.$dropdownContent) === null || _a === void 0 ? void 0 : _a.classList.remove(`${DROPDOWN_CONTENT_HIDE}-${this.transition}-start`);
-                    (_b = this.$dropdownContent) === null || _b === void 0 ? void 0 : _b.classList.add(`${DROPDOWN_CONTENT_HIDE}-${this.transition}-end`);
-                    setTimeout(() => {
-                        var _a;
-                        (_a = this.$dropdownContent) === null || _a === void 0 ? void 0 : _a.classList.remove(`${DROPDOWN_CONTENT_HIDE}-${this.transition}-start`, `${DROPDOWN_CONTENT_HIDE}-${this.transition}-end`);
-                        this.opened = false;
-                        this.dispatchEvent(hideDropdownEvent);
-                        resolve();
-                    }, transitionDuration);
-                });
+            this.dispatchEvent(hideDropdownEvent);
+            if (window.innerWidth >= BREAKPOINTS.xs)
+                return;
+            const hideBackdropEvent = new Event(BACKDROP_EVENTS.hide, {
+                bubbles: true
             });
+            document.dispatchEvent(hideBackdropEvent);
         };
         this._hoverToggle = async (ev) => {
+            if (window.innerWidth < BREAKPOINTS.xs)
+                return;
             if (!ev.target) {
                 await this.hide();
                 return;
             }
-            const isHoveredWithinDropdown = this._isDescendantOfParent(this, ev.target) ||
-                (this.$dropdownContent && this._isDescendantOfParent(this.$dropdownContent, ev.target)) ||
-                ev.target === this ||
-                ev.target === this.$dropdownContent;
+            const isHoveredWithinDropdown = this._isHoveredWithinDropdown(ev.target);
             if (isHoveredWithinDropdown && !this.opened) {
                 await this.show();
                 return;
@@ -85,15 +100,6 @@ let HDropdown = class HDropdown extends PhoenixLightLitElement {
                 return;
             }
         };
-        this._isDescendantOfParent = function (parent, child) {
-            let parentNode = child.parentNode;
-            while (parentNode) {
-                if (parentNode === parent)
-                    return true;
-                parentNode = parentNode.parentNode;
-            }
-            return false;
-        };
         this._positionDropdownContent = () => {
             requestAnimationFrame(() => {
                 this.opened && this._positionController.position();
@@ -103,11 +109,13 @@ let HDropdown = class HDropdown extends PhoenixLightLitElement {
     connectedCallback() {
         super.connectedCallback();
         this._appendDropdownPortal();
-        this._appendDropdownBackdrop();
         if (!this.$dropdownContent)
             this.$dropdownContent = this.querySelector(DROPDOWN_CONTENT_NAME);
         if (!this.$dropdownToggler)
             this.$dropdownToggler = this.querySelector(DROPDOWN_TOGGLER_NAME);
+        const nestedDropdown = this.$dropdownContent.querySelector(DROPDOWN_CONTAINER_NAME);
+        if (nestedDropdown)
+            this.$nestedDropdownContent = nestedDropdown.querySelector(DROPDOWN_CONTENT_NAME);
         if (!this._positionController)
             this._positionController = new RelativePositionController({
                 host: this,
@@ -131,36 +139,40 @@ let HDropdown = class HDropdown extends PhoenixLightLitElement {
             document.body.appendChild($portalTarget);
         }
     }
-    _appendDropdownBackdrop() {
-        const $dropdownBackdrop = document.querySelector(DROPDOWN_BACKDROP_NAME);
-        if (!$dropdownBackdrop) {
-            const $backdrop = document.createElement(DROPDOWN_BACKDROP_NAME);
-            document.body.appendChild($backdrop);
-        }
-    }
     _setupListeners() {
         var _a;
         this.addEventListener(CLICK_OUTSIDE_CONTROLLER_MESSAGES.clickedOutside, this._handleClickOutside);
         (_a = this.$dropdownToggler) === null || _a === void 0 ? void 0 : _a.addEventListener('toggle', this.toggle);
-        if (this.toggleOnHover && window.innerWidth > MOBILE_SCREEN_WIDTH) {
+        if (this.toggleOnHover)
             document.addEventListener('mouseover', this._hoverToggle);
-        }
     }
-    _handleClickOutside() {
-        var _a;
+    _handleClickOutside(ev) {
+        var _a, _b;
         if (!this.opened)
             return;
-        this.hide();
-        (_a = this.$dropdownToggler) === null || _a === void 0 ? void 0 : _a.setAttribute('aria-expanded', 'false');
+        const target = ev.detail.target;
+        const clickedWithinNestedDropdown = this.$nestedDropdownContent && this.$nestedDropdownContent.contains(target);
+        const shouldHideElements = !((_a = this.$dropdownContent) === null || _a === void 0 ? void 0 : _a.contains(target)) && !this.contains(target) && !clickedWithinNestedDropdown;
+        if (shouldHideElements) {
+            this.hide();
+            (_b = this.$dropdownToggler) === null || _b === void 0 ? void 0 : _b.setAttribute('aria-expanded', 'false');
+        }
+    }
+    _isHoveredWithinDropdown(element) {
+        const isDescendantOfDropdown = element.closest(`${DROPDOWN_CONTAINER_NAME}[name="${this.name}"]`) !== null;
+        const isDescendantOfContent = this.$dropdownContent && element.closest(`${DROPDOWN_CONTENT_NAME}[name="${this.name}"]`) !== null;
+        return isDescendantOfDropdown || isDescendantOfContent || element === this || element === this.$dropdownContent;
     }
     disconnectedCallback() {
         var _a;
         super.disconnectedCallback();
         (_a = this.$dropdownToggler) === null || _a === void 0 ? void 0 : _a.removeEventListener('toggle', this.toggle);
-        if (this.toggleOnHover && window.innerWidth > MOBILE_SCREEN_WIDTH) {
+        if (this.toggleOnHover)
             document.removeEventListener('mouseover', this._hoverToggle);
+        if (this.opened) {
+            this.opened = false;
+            this._dispatchHideDropdownEvent();
         }
-        this.opened = false;
     }
     render() {
         super.render();

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

@@ -1 +1 @@
-{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,uCAAuC,4CAAgD;AACvF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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_constants.d.ts

@@ -2,7 +2,6 @@ export declare const DROPDOWN_NAME = "dropdown";
 export declare const DROPDOWN_CONTAINER_NAME: string;
 export declare const DROPDOWN_TOGGLER_NAME: string;
 export declare const DROPDOWN_CONTENT_NAME: string;
-export declare const DROPDOWN_BACKDROP_NAME: string;
 export declare const DEFAULT_DROPDOWN_PORTAL_NAME = "dropdown-portal";
 export declare const DROPDOWN_EVENTS: {
     readonly show: "dropdown.show";

package/build/esm/packages/phoenix/src/components/dropdown/dropdown_constants.js

@@ -2,7 +2,6 @@ const DROPDOWN_NAME = 'dropdown';
 const DROPDOWN_CONTAINER_NAME = `h-${DROPDOWN_NAME}`;
 const DROPDOWN_TOGGLER_NAME = `${DROPDOWN_CONTAINER_NAME}-toggler`;
 const DROPDOWN_CONTENT_NAME = `${DROPDOWN_CONTAINER_NAME}-content`;
-const DROPDOWN_BACKDROP_NAME = `${DROPDOWN_CONTAINER_NAME}-backdrop`;
 const DEFAULT_DROPDOWN_PORTAL_NAME = 'dropdown-portal';
 const DROPDOWN_EVENT = 'dropdown';
 const DROPDOWN_EVENTS = {
@@ -17,5 +16,5 @@ const DROPDOWN_CONTENT_VISIBLE_CLASS = `${DROPDOWN_CONTENT_CLASS}_visible`;
 const DROPDOWN_CONTENT_SHOW = `${DROPDOWN_CONTENT_CLASS}_show`;
 const DROPDOWN_CONTENT_HIDE = `${DROPDOWN_CONTENT_CLASS}_hide`;
 
-export { DEFAULT_DROPDOWN_PORTAL_NAME, DROPDOWN_BACKDROP_NAME, DROPDOWN_CLASS, DROPDOWN_CONTAINER_NAME, DROPDOWN_CONTENT_CLASS, DROPDOWN_CONTENT_HIDE, DROPDOWN_CONTENT_NAME, DROPDOWN_CONTENT_SHOW, DROPDOWN_CONTENT_VISIBLE_CLASS, DROPDOWN_EVENTS, DROPDOWN_NAME, DROPDOWN_OPENED_ATTRIBUTE_NAME, DROPDOWN_TOGGLER_CLASS, DROPDOWN_TOGGLER_NAME };
+export { DEFAULT_DROPDOWN_PORTAL_NAME, DROPDOWN_CLASS, DROPDOWN_CONTAINER_NAME, DROPDOWN_CONTENT_CLASS, DROPDOWN_CONTENT_HIDE, DROPDOWN_CONTENT_NAME, DROPDOWN_CONTENT_SHOW, DROPDOWN_CONTENT_VISIBLE_CLASS, DROPDOWN_EVENTS, DROPDOWN_NAME, DROPDOWN_OPENED_ATTRIBUTE_NAME, DROPDOWN_TOGGLER_CLASS, DROPDOWN_TOGGLER_NAME };
 //# sourceMappingURL=dropdown_constants.js.map

package/build/esm/packages/phoenix/src/components/dropdown/dropdown_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;"}
+{"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;"}

package/build/esm/packages/phoenix/src/components/dropdown/dropdown_content.d.ts

@@ -1,5 +1,5 @@
-import { PhoenixLightLitElement } from "../../core/phoenix_light_lit_element";
 import { TemplateResult } from 'lit';
+import { PhoenixLightLitElement } from "../../core/phoenix_light_lit_element";
 export declare class HDropdownContent extends PhoenixLightLitElement {
     constructor();
     protected render(): TemplateResult;

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

@@ -1,4 +1,4 @@
-import { TemplateResult, PropertyValues } from 'lit';
+import { PropertyValues, TemplateResult } from 'lit';
 import { PhoenixLightLitElement } from "../../core/phoenix_light_lit_element";
 export declare class HModal extends PhoenixLightLitElement {
     opened: boolean;
@@ -13,7 +13,6 @@ export declare class HModal extends PhoenixLightLitElement {
     private _propsChangeStrategies;
     private static openModals;
     private static _appendModalsPortal;
-    private static _appendModalsBackdrop;
     static isSomeModalOpen(): boolean;
     constructor();
     connectedCallback(): void;

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/global_constants.d.ts

@@ -1 +1,8 @@
-export declare const MOBILE_SCREEN_WIDTH = 575;
+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

@@ -1,4 +1,11 @@
-const MOBILE_SCREEN_WIDTH = 575;
+const BREAKPOINTS = {
+    xs: 576,
+    sm: 768,
+    md: 1000,
+    lg: 1200,
+    xl: 1440,
+    xxl: 1920
+};
 
-export { MOBILE_SCREEN_WIDTH };
+export { BREAKPOINTS };
 //# 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;"}
+{"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';
@@ -20,3 +19,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';
@@ -19,4 +18,5 @@ 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.8.1",
+  "version": "0.8.3-0",
   "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/dropdown/dropdown_backdrop.d.ts

@@ -1,11 +0,0 @@
-import { TemplateResult } from 'lit';
-import { PhoenixLightLitElement } from "../../core/phoenix_light_lit_element";
-export declare class HDropdownBackdrop extends PhoenixLightLitElement {
-    visible: boolean;
-    connectedCallback(): void;
-    disconnectedCallback(): void;
-    private _show;
-    private _hide;
-    private _closeDropdown;
-    protected render(): TemplateResult;
-}

package/build/esm/packages/phoenix/src/components/dropdown/dropdown_backdrop.js

@@ -1,54 +0,0 @@
-import { __decorate, __metadata } from "tslib";
-import { DROPDOWN_BACKDROP_CLASS, DROPDOWN_CONTAINER_NAME, DROPDOWN_EVENTS } from '@phoenixRoot/components/dropdown/dropdown_constants';
-import { html } from 'lit';
-import './dropdown_types';
-import { PhoenixLightLitElement } from '@phoenixRoot/core/phoenix_light_lit_element';
-import { phoenixCustomElement } from '@phoenixRoot/core/decorators/phoenix_custom_element';
-import { property } from 'lit/decorators';
-let HDropdownBackdrop = class HDropdownBackdrop extends PhoenixLightLitElement {
-    constructor() {
-        super(...arguments);
-        this.visible = false;
-        this._show = () => {
-            this.visible = true;
-        };
-        this._hide = () => {
-            this.visible = false;
-        };
-        this._closeDropdown = () => {
-            const dropdowns = document.querySelectorAll(DROPDOWN_CONTAINER_NAME);
-            dropdowns.forEach((dropdown) => {
-                const opened = dropdown.getAttribute('opened');
-                if (opened !== null)
-                    dropdown.hide();
-            });
-        };
-    }
-    connectedCallback() {
-        super.connectedCallback();
-        document.addEventListener(DROPDOWN_EVENTS.show, this._show);
-        document.addEventListener(DROPDOWN_EVENTS.hide, this._hide);
-    }
-    disconnectedCallback() {
-        super.disconnectedCallback();
-        document.removeEventListener(DROPDOWN_EVENTS.show, this._show);
-        document.removeEventListener(DROPDOWN_EVENTS.hide, this._hide);
-    }
-    render() {
-        return html ` <div
-            aria-hidden="true"
-            ?hidden="${!this.visible}"
-            @click="${this._closeDropdown}"
-            class="${DROPDOWN_BACKDROP_CLASS}"
-        ></div>`;
-    }
-};
-__decorate([
-    property({ type: Boolean }),
-    __metadata("design:type", Object)
-], HDropdownBackdrop.prototype, "visible", void 0);
-HDropdownBackdrop = __decorate([
-    phoenixCustomElement('h-dropdown-backdrop')
-], HDropdownBackdrop);
-export { HDropdownBackdrop };
-//# sourceMappingURL=dropdown_backdrop.js.map

package/build/esm/packages/phoenix/src/components/dropdown/dropdown_backdrop.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"dropdown_backdrop.js","sourceRoot":"","sources":["../../../../../../../src/components/dropdown/dropdown_backdrop.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,uBAAuB,EAAE,uBAAuB,EAAE,eAAe,EAAE,MAAM,qDAAqD,CAAC;AACxI,OAAO,EAAkB,IAAI,EAAE,MAAM,KAAK,CAAC;AAE3C,OAA0B,kBAAkB,CAAC;AAC7C,OAAO,EAAE,sBAAsB,EAAE,MAAM,6CAA6C,CAAC;AACrF,OAAO,EAAE,oBAAoB,EAAE,MAAM,qDAAqD,CAAC;AAC3F,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAG1C,IAAa,iBAAiB,GAA9B,MAAa,iBAAkB,SAAQ,sBAAsB;IAA7D;;QAEI,YAAO,GAAG,KAAK,CAAC;QAgBR,UAAK,GAAG,GAAG,EAAE;YACjB,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC;QACxB,CAAC,CAAC;QAEM,UAAK,GAAG,GAAG,EAAE;YACjB,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;QACzB,CAAC,CAAC;QAEM,mBAAc,GAAG,GAAG,EAAE;YAC1B,MAAM,SAAS,GAAG,QAAQ,CAAC,gBAAgB,CAAC,uBAAuB,CAAC,CAAC;YAErE,SAAS,CAAC,OAAO,CAAC,CAAC,QAAQ,EAAE,EAAE;gBAC3B,MAAM,MAAM,GAAG,QAAQ,CAAC,YAAY,CAAC,QAAQ,CAAC,CAAC;gBAC/C,IAAI,MAAM,KAAK,IAAI;oBAAG,QAAiC,CAAC,IAAI,EAAE,CAAC;YACnE,CAAC,CAAC,CAAC;QACP,CAAC,CAAC;IAUN,CAAC;IAvCU,iBAAiB;QACpB,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAE1B,QAAQ,CAAC,gBAAgB,CAAC,eAAe,CAAC,IAAI,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC;QAC5D,QAAQ,CAAC,gBAAgB,CAAC,eAAe,CAAC,IAAI,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC;IAChE,CAAC;IAEM,oBAAoB;QACvB,KAAK,CAAC,oBAAoB,EAAE,CAAC;QAE7B,QAAQ,CAAC,mBAAmB,CAAC,eAAe,CAAC,IAAI,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC;QAC/D,QAAQ,CAAC,mBAAmB,CAAC,eAAe,CAAC,IAAI,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC;IACnE,CAAC;IAmBS,MAAM;QACZ,OAAO,IAAI,CAAA;;uBAEI,CAAC,IAAI,CAAC,OAAO;sBACd,IAAI,CAAC,cAAc;qBACpB,uBAAuB;gBAC5B,CAAC;IACb,CAAC;CACJ,CAAA;AAzCG;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;;kDACZ;AAFP,iBAAiB;IAD7B,oBAAoB,CAAC,qBAAqB,CAAC;GAC/B,iBAAiB,CA2C7B;SA3CY,iBAAiB"}

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>;
-}