@shoper/phoenix_design_system 0.7.3 → 0.8.3-0

package/build/cjs/packages/phoenix/src/components/backdrop/backdrop.js

@@ -0,0 +1,91 @@
+'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 backdrop_constants = require('./backdrop_constants.js');
+
+exports.HBackdrop = class HBackdrop extends phoenix_light_lit_element.PhoenixLightLitElement {
+    constructor() {
+        super();
+        this.visible = false;
+        this.onClickArray = [];
+        this._backdropLayerCounter = 0;
+        this._appendBackdrop = () => {
+            const $backdrop = document.querySelector(backdrop_constants.BACKDROP_NAME);
+            if (!$backdrop) {
+                const $newBackdrop = document.createElement(backdrop_constants.BACKDROP_NAME);
+                document.body.appendChild($newBackdrop);
+            }
+        };
+        this._show = () => {
+            this._backdropLayerCounter += 1;
+            this.visible = true;
+        };
+        this._hide = () => {
+            this._backdropLayerCounter -= 1;
+            if (this._backdropLayerCounter !== 0)
+                return;
+            this.visible = false;
+        };
+        this._dispatchBackdropClickedEvent = () => {
+            const backdropClickedEvent = new CustomEvent(backdrop_constants.BACKDROP_EVENTS.clicked, {
+                bubbles: true
+            });
+            document.dispatchEvent(backdropClickedEvent);
+        };
+        this._appendBackdrop();
+        document.addEventListener(backdrop_constants.BACKDROP_EVENTS.show, this._show);
+        document.addEventListener(backdrop_constants.BACKDROP_EVENTS.hide, this._hide);
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        document.removeEventListener(backdrop_constants.BACKDROP_EVENTS.show, this._show);
+        document.removeEventListener(backdrop_constants.BACKDROP_EVENTS.hide, this._hide);
+    }
+    updated() {
+        if (this.visible) {
+            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}"
+            @click="${this._dispatchBackdropClickedEvent}"
+            class="${backdrop_constants.BACKDROP_CLASS}"
+        ></div>`;
+    }
+};
+tslib_es6.__decorate([
+    decorators.property({ type: Boolean }),
+    tslib_es6.__metadata("design:type", Object)
+], exports.HBackdrop.prototype, "visible", void 0);
+tslib_es6.__decorate([
+    decorators.state(),
+    tslib_es6.__metadata("design:type", Array)
+], exports.HBackdrop.prototype, "onClickArray", void 0);
+tslib_es6.__decorate([
+    decorators.state(),
+    tslib_es6.__metadata("design:type", Object)
+], exports.HBackdrop.prototype, "_backdropLayerCounter", void 0);
+exports.HBackdrop = tslib_es6.__decorate([
+    phoenix_custom_element.phoenixCustomElement('h-backdrop'),
+    tslib_es6.__metadata("design:paramtypes", [])
+], exports.HBackdrop);
+//# sourceMappingURL=backdrop.js.map

package/build/cjs/packages/phoenix/src/components/{modal/modal_backdrop.js.map → backdrop/backdrop.js.map}

@@ -1 +1 @@
-{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA,wBAAwB,4CAAgD;AACxE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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,wBAAwB,4CAAgD;AACxE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

package/build/cjs/packages/phoenix/src/components/backdrop/backdrop_constants.js

@@ -0,0 +1,17 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const BACKDROP_NAME = 'h-backdrop';
+const BACKDROP_CLASS = 'backdrop';
+const BACKDROP_EVENT = 'backdrop';
+const BACKDROP_EVENTS = {
+    show: `${BACKDROP_EVENT}.show`,
+    hide: `${BACKDROP_EVENT}.hide`,
+    clicked: `${BACKDROP_EVENT}.clicked`
+};
+
+exports.BACKDROP_CLASS = BACKDROP_CLASS;
+exports.BACKDROP_EVENTS = BACKDROP_EVENTS;
+exports.BACKDROP_NAME = BACKDROP_NAME;
+//# sourceMappingURL=backdrop_constants.js.map

package/build/cjs/packages/phoenix/src/components/backdrop/backdrop_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;AACA;AACA;AACA;AACA;AACA;AACA;"}

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

@@ -8,7 +8,9 @@ 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 portal_constants = require('../portal/portal_constants.js');
+var backdrop_constants = require('../backdrop/backdrop_constants.js');
 var dropdown_constants = require('./dropdown_constants.js');
+var global_constants = require('../../global_constants.js');
 var click_outside_controller_messages = require('../../controllers/click_outside_controller/click_outside_controller_messages.js');
 var click_outside_controller = require('../../controllers/click_outside_controller/click_outside_controller.js');
 var relative_position_controller_constants = require('../../controllers/relative_position_controller/relative_position_controller_constants.js');
@@ -21,23 +23,86 @@ exports.HDropdown = class HDropdown extends phoenix_light_lit_element.PhoenixLig
         this.direction = relative_position_controller_constants.DIRECTIONS.bottomCenter;
         this.toggleOnHover = false;
         this.name = '';
+        this.transition = 'direction';
         this.portalTarget = dropdown_constants.DEFAULT_DROPDOWN_PORTAL_NAME;
         this.toggle = () => {
             this.opened ? this.hide() : this.show();
         };
-        this.show = () => {
-            this.opened = true;
+        this.show = async () => {
+            return new Promise((resolve) => {
+                var _a;
+                (_a = this.$dropdownContent) === null || _a === void 0 ? void 0 : _a.classList.add(dropdown_constants.DROPDOWN_CONTENT_VISIBLE_CLASS, `${dropdown_constants.DROPDOWN_CONTENT_SHOW}-${this.transition}-start`);
+                window.requestAnimationFrame(() => {
+                    setTimeout(() => {
+                        var _a;
+                        (_a = this.$dropdownContent) === null || _a === void 0 ? void 0 : _a.classList.add(`${dropdown_constants.DROPDOWN_CONTENT_SHOW}-${this.transition}-end`);
+                    }, 0);
+                    const transitionDuration = parseFloat(getComputedStyle(this.$dropdownContent || this).transitionDuration) * 1000;
+                    setTimeout(() => {
+                        var _a;
+                        this.opened = true;
+                        this._dispatchShowDropdownEvent();
+                        (_a = this.$dropdownContent) === null || _a === void 0 ? void 0 : _a.classList.remove(`${dropdown_constants.DROPDOWN_CONTENT_SHOW}-${this.transition}-start`, `${dropdown_constants.DROPDOWN_CONTENT_SHOW}-${this.transition}-end`);
+                        resolve();
+                    }, transitionDuration);
+                });
+            });
+        };
+        this._dispatchShowDropdownEvent = () => {
             const showDropdownEvent = new Event(dropdown_constants.DROPDOWN_EVENTS.show, {
                 bubbles: true
             });
             this.dispatchEvent(showDropdownEvent);
+            if (window.innerWidth >= global_constants.BREAKPOINTS.xs)
+                return;
+            const showBackdropEvent = new Event(backdrop_constants.BACKDROP_EVENTS.show, {
+                bubbles: true
+            });
+            document.dispatchEvent(showBackdropEvent);
         };
-        this.hide = () => {
-            this.opened = false;
+        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_constants.DROPDOWN_CONTENT_HIDE}-${this.transition}-start`);
+                (_b = this.$dropdownContent) === null || _b === void 0 ? void 0 : _b.classList.add(`${dropdown_constants.DROPDOWN_CONTENT_HIDE}-${this.transition}-end`);
+                setTimeout(() => {
+                    var _a;
+                    (_a = this.$dropdownContent) === null || _a === void 0 ? void 0 : _a.classList.remove(`${dropdown_constants.DROPDOWN_CONTENT_HIDE}-${this.transition}-start`, `${dropdown_constants.DROPDOWN_CONTENT_HIDE}-${this.transition}-end`);
+                    this.opened = false;
+                    this._dispatchHideDropdownEvent();
+                    resolve();
+                }, transitionDuration);
+            });
+        });
+        this._dispatchHideDropdownEvent = () => {
             const hideDropdownEvent = new Event(dropdown_constants.DROPDOWN_EVENTS.hide, {
                 bubbles: true
             });
             this.dispatchEvent(hideDropdownEvent);
+            if (window.innerWidth >= global_constants.BREAKPOINTS.xs)
+                return;
+            const hideBackdropEvent = new Event(backdrop_constants.BACKDROP_EVENTS.hide, {
+                bubbles: true
+            });
+            document.dispatchEvent(hideBackdropEvent);
+        };
+        this._hoverToggle = async (ev) => {
+            if (window.innerWidth < global_constants.BREAKPOINTS.xs)
+                return;
+            if (!ev.target) {
+                await this.hide();
+                return;
+            }
+            const isHoveredWithinDropdown = this._isHoveredWithinDropdown(ev.target);
+            if (isHoveredWithinDropdown && !this.opened) {
+                await this.show();
+                return;
+            }
+            if (!isHoveredWithinDropdown && this.opened) {
+                await this.hide();
+                return;
+            }
         };
         this._positionDropdownContent = () => {
             requestAnimationFrame(() => {
@@ -52,6 +117,9 @@ exports.HDropdown = class HDropdown extends phoenix_light_lit_element.PhoenixLig
             this.$dropdownContent = this.querySelector(dropdown_constants.DROPDOWN_CONTENT_NAME);
         if (!this.$dropdownToggler)
             this.$dropdownToggler = this.querySelector(dropdown_constants.DROPDOWN_TOGGLER_NAME);
+        const nestedDropdown = this.$dropdownContent.querySelector(dropdown_constants.DROPDOWN_CONTAINER_NAME);
+        if (nestedDropdown)
+            this.$nestedDropdownContent = nestedDropdown.querySelector(dropdown_constants.DROPDOWN_CONTENT_NAME);
         if (!this._positionController)
             this._positionController = new relative_position_controller.RelativePositionController({
                 host: this,
@@ -67,15 +135,6 @@ exports.HDropdown = class HDropdown extends phoenix_light_lit_element.PhoenixLig
             });
         this._setupListeners();
     }
-    _setupListeners() {
-        var _a, _b, _c;
-        this.addEventListener(click_outside_controller_messages.CLICK_OUTSIDE_CONTROLLER_MESSAGES.clickedOutside, this._handleClickOutside);
-        (_a = this.$dropdownToggler) === null || _a === void 0 ? void 0 : _a.addEventListener('toggle', this.toggle);
-        if (this.toggleOnHover) {
-            (_b = this.$dropdownToggler) === null || _b === void 0 ? void 0 : _b.addEventListener('mouseenter', this.show);
-            (_c = this.$dropdownToggler) === null || _c === void 0 ? void 0 : _c.addEventListener('mouseleave', this.hide);
-        }
-    }
     _appendDropdownPortal() {
         const $dropdownPortalTarget = document.querySelector(`[name="${dropdown_constants.DEFAULT_DROPDOWN_PORTAL_NAME}"]`);
         if (!$dropdownPortalTarget) {
@@ -84,22 +143,40 @@ exports.HDropdown = class HDropdown extends phoenix_light_lit_element.PhoenixLig
             document.body.appendChild($portalTarget);
         }
     }
-    _handleClickOutside() {
+    _setupListeners() {
         var _a;
+        this.addEventListener(click_outside_controller_messages.CLICK_OUTSIDE_CONTROLLER_MESSAGES.clickedOutside, this._handleClickOutside);
+        (_a = this.$dropdownToggler) === null || _a === void 0 ? void 0 : _a.addEventListener('toggle', this.toggle);
+        if (this.toggleOnHover)
+            document.addEventListener('mouseover', this._hoverToggle);
+    }
+    _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_constants.DROPDOWN_CONTAINER_NAME}[name="${this.name}"]`) !== null;
+        const isDescendantOfContent = this.$dropdownContent && element.closest(`${dropdown_constants.DROPDOWN_CONTENT_NAME}[name="${this.name}"]`) !== null;
+        return isDescendantOfDropdown || isDescendantOfContent || element === this || element === this.$dropdownContent;
     }
     disconnectedCallback() {
-        var _a, _b, _c;
+        var _a;
         super.disconnectedCallback();
         (_a = this.$dropdownToggler) === null || _a === void 0 ? void 0 : _a.removeEventListener('toggle', this.toggle);
-        if (this.toggleOnHover) {
-            (_b = this.$dropdownToggler) === null || _b === void 0 ? void 0 : _b.removeEventListener('mouseenter', this.show);
-            (_c = this.$dropdownToggler) === null || _c === void 0 ? void 0 : _c.removeEventListener('mouseleave', this.hide);
+        if (this.toggleOnHover)
+            document.removeEventListener('mouseover', this._hoverToggle);
+        if (this.opened) {
+            this.opened = false;
+            this._dispatchHideDropdownEvent();
         }
-        this.opened = false;
     }
     render() {
         super.render();
@@ -127,6 +204,10 @@ tslib_es6.__decorate([
     decorators.property({ type: String }),
     tslib_es6.__metadata("design:type", Object)
 ], exports.HDropdown.prototype, "name", void 0);
+tslib_es6.__decorate([
+    decorators.property({ type: String }),
+    tslib_es6.__metadata("design:type", Object)
+], exports.HDropdown.prototype, "transition", void 0);
 tslib_es6.__decorate([
     decorators.property({ type: String }),
     tslib_es6.__metadata("design:type", Object)

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

@@ -1 +1 @@
-{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA,wBAAwB,4CAAgD;AACxE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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,wBAAwB,4CAAgD;AACxE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

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

@@ -14,15 +14,23 @@ const DROPDOWN_EVENTS = {
 };
 const DROPDOWN_OPENED_ATTRIBUTE_NAME = 'opened';
 const DROPDOWN_CLASS = 'dropdown';
-const DROPDOWN_CONTENT_CLASS = `${DROPDOWN_CLASS}__content`;
+const DROPDOWN_CONTENT_CLASS = `${DROPDOWN_CLASS}__content`;
+const DROPDOWN_TOGGLER_CLASS = `${DROPDOWN_CLASS}__toggler`;
+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`;
 
 exports.DEFAULT_DROPDOWN_PORTAL_NAME = DEFAULT_DROPDOWN_PORTAL_NAME;
 exports.DROPDOWN_CLASS = DROPDOWN_CLASS;
 exports.DROPDOWN_CONTAINER_NAME = DROPDOWN_CONTAINER_NAME;
 exports.DROPDOWN_CONTENT_CLASS = DROPDOWN_CONTENT_CLASS;
+exports.DROPDOWN_CONTENT_HIDE = DROPDOWN_CONTENT_HIDE;
 exports.DROPDOWN_CONTENT_NAME = DROPDOWN_CONTENT_NAME;
+exports.DROPDOWN_CONTENT_SHOW = DROPDOWN_CONTENT_SHOW;
+exports.DROPDOWN_CONTENT_VISIBLE_CLASS = DROPDOWN_CONTENT_VISIBLE_CLASS;
 exports.DROPDOWN_EVENTS = DROPDOWN_EVENTS;
 exports.DROPDOWN_NAME = DROPDOWN_NAME;
 exports.DROPDOWN_OPENED_ATTRIBUTE_NAME = DROPDOWN_OPENED_ATTRIBUTE_NAME;
+exports.DROPDOWN_TOGGLER_CLASS = DROPDOWN_TOGGLER_CLASS;
 exports.DROPDOWN_TOGGLER_NAME = DROPDOWN_TOGGLER_NAME;
 //# sourceMappingURL=dropdown_constants.js.map

package/build/cjs/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;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;AACA;AACA;AACA;AACA;AACA;"}

package/build/cjs/packages/phoenix/src/components/dropdown/dropdown_toggler.js

@@ -23,6 +23,7 @@ exports.HDropdownToggler = class HDropdownToggler extends phoenix_light_lit_elem
             this._toggleElementAriaController.toggleAriaExpandedAttribute();
         };
         this.slot = this.hasAttribute('slot') ? this.slot : 'toggler';
+        this.className = `${dropdown_constants.DROPDOWN_TOGGLER_CLASS} ${this.className}`;
     }
     connectedCallback() {
         super.connectedCallback();

package/build/cjs/packages/phoenix/src/components/dropdown/dropdown_toggler.js.map

@@ -1 +1 @@
-{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA,wBAAwB,4CAAgD;AACxE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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,wBAAwB,4CAAgD;AACxE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

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

@@ -10,6 +10,7 @@ var phoenix_custom_element = require('../../core/decorators/phoenix_custom_eleme
 var portal_constants = require('../portal/portal_constants.js');
 var modal_constants = require('./modal_constants.js');
 var ref = require('../../../../../external/lit-html/directives/ref.js');
+var backdrop_constants = require('../backdrop/backdrop_constants.js');
 
 var HModal_1;
 exports.HModal = HModal_1 = class HModal extends phoenix_light_lit_element.PhoenixLightLitElement {
@@ -93,26 +94,21 @@ exports.HModal = HModal_1 = class HModal extends phoenix_light_lit_element.Phoen
             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_constants.MODAL_EVENTS.close, this._handleCloseFromCloseComponent);
     }
     disconnectedCallback() {
         super.disconnectedCallback();
-        this[modal_constants.MODAL_OPENED_PROP] = false;
+        if (this[modal_constants.MODAL_OPENED_PROP]) {
+            this[modal_constants.MODAL_OPENED_PROP] = false;
+            this._dispatchModalClosedEvent();
+        }
         document.removeEventListener(modal_constants.MODAL_EVENTS.close, this._handleCloseFromCloseComponent);
         document.removeEventListener('keydown', this._bindCloseOnEsc);
     }
@@ -139,7 +135,6 @@ exports.HModal = HModal_1 = class HModal extends phoenix_light_lit_element.Phoen
                 setTimeout(() => {
                     var _a;
                     this[modal_constants.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);
@@ -151,6 +146,10 @@ exports.HModal = HModal_1 = class HModal extends phoenix_light_lit_element.Phoen
             bubbles: true
         });
         this.dispatchEvent(openModalEvent);
+        const openBackdropEvent = new CustomEvent(backdrop_constants.BACKDROP_EVENTS.show, {
+            bubbles: true
+        });
+        document.dispatchEvent(openBackdropEvent);
     }
     async close() {
         return new Promise((resolve) => {
@@ -174,6 +173,10 @@ exports.HModal = HModal_1 = class HModal extends phoenix_light_lit_element.Phoen
             bubbles: true
         });
         this.dispatchEvent(closeModalEvent);
+        const closeBackdropEvent = new CustomEvent(backdrop_constants.BACKDROP_EVENTS.hide, {
+            bubbles: true
+        });
+        document.dispatchEvent(closeBackdropEvent);
     }
     render() {
         return lit.html `

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

@@ -1 +1 @@
-{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA,wBAAwB,4CAAgD;AACxE;AACA;AACA;AACA;AACA;AACA;AACA,kBAAkB,oDAAwD;AAC1E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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,wBAAwB,4CAAgD;AACxE;AACA;AACA;AACA;AACA;AACA;AACA,kBAAkB,oDAAwD;AAC1E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

package/build/cjs/packages/phoenix/src/controllers/click_outside_controller/click_outside_controller.js

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

package/build/cjs/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;AACA;AACA;AACA;AACA,wBAAwB,4CAAgD;AACxE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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,wBAAwB,4CAAgD;AACxE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

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

@@ -0,0 +1,15 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const BREAKPOINTS = {
+    xs: 576,
+    sm: 768,
+    md: 1000,
+    lg: 1200,
+    xl: 1440,
+    xxl: 1920
+};
+
+exports.BREAKPOINTS = BREAKPOINTS;
+//# sourceMappingURL=global_constants.js.map

package/build/cjs/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;AACA;AACA;AACA;AACA;"}

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

@@ -10,7 +10,6 @@ var portal_target = require('./components/portal/portal_target.js');
 var portal = require('./components/portal/portal.js');
 var modal = require('./components/modal/modal.js');
 var modal_opener = require('./components/modal/modal_opener.js');
-var modal_backdrop = require('./components/modal/modal_backdrop.js');
 var modal_body = require('./components/modal/modal_body.js');
 var modal_footer = require('./components/modal/modal_footer.js');
 var modal_header = require('./components/modal/modal_header.js');
@@ -23,6 +22,7 @@ var dropdown = require('./components/dropdown/dropdown.js');
 var toggle_element_aria_controller = require('./controllers/toggle_element_aria_controller/toggle_element_aria_controller.js');
 var dropdown_toggler = require('./components/dropdown/dropdown_toggler.js');
 var dropdown_content = require('./components/dropdown/dropdown_content.js');
+var backdrop = require('./components/backdrop/backdrop.js');
 
 
 
@@ -59,12 +59,6 @@ Object.defineProperty(exports, 'HModalOpener', {
 		return modal_opener.HModalOpener;
 	}
 });
-Object.defineProperty(exports, 'HModalBackdrop', {
-	enumerable: true,
-	get: function () {
-		return modal_backdrop.HModalBackdrop;
-	}
-});
 Object.defineProperty(exports, 'HModalBody', {
 	enumerable: true,
 	get: function () {
@@ -112,4 +106,10 @@ Object.defineProperty(exports, 'HDropdownContent', {
 		return dropdown_content.HDropdownContent;
 	}
 });
+Object.defineProperty(exports, 'HBackdrop', {
+	enumerable: true,
+	get: function () {
+		return backdrop.HBackdrop;
+	}
+});
 //# sourceMappingURL=index.js.map

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

@@ -0,0 +1,17 @@
+import { TemplateResult } from 'lit';
+import { PhoenixLightLitElement } from "../../core/phoenix_light_lit_element";
+export declare class HBackdrop extends PhoenixLightLitElement {
+    visible: boolean;
+    onClickArray: (() => void)[];
+    private _backdropLayerCounter;
+    constructor();
+    disconnectedCallback(): void;
+    private _appendBackdrop;
+    private _show;
+    private _hide;
+    protected updated(): void;
+    private _disableScrolling;
+    private _enableScrolling;
+    private _dispatchBackdropClickedEvent;
+    protected render(): TemplateResult;
+}

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

@@ -0,0 +1,89 @@
+import { __decorate, __metadata } from '../../../../../external/tslib/tslib.es6.js';
+import { html } from 'lit';
+import { property, state } from 'lit/decorators';
+import { PhoenixLightLitElement } from '../../core/phoenix_light_lit_element.js';
+import { phoenixCustomElement } from '../../core/decorators/phoenix_custom_element.js';
+import { BACKDROP_NAME, BACKDROP_EVENTS, BACKDROP_CLASS } from './backdrop_constants.js';
+
+let HBackdrop = class HBackdrop extends PhoenixLightLitElement {
+    constructor() {
+        super();
+        this.visible = false;
+        this.onClickArray = [];
+        this._backdropLayerCounter = 0;
+        this._appendBackdrop = () => {
+            const $backdrop = document.querySelector(BACKDROP_NAME);
+            if (!$backdrop) {
+                const $newBackdrop = document.createElement(BACKDROP_NAME);
+                document.body.appendChild($newBackdrop);
+            }
+        };
+        this._show = () => {
+            this._backdropLayerCounter += 1;
+            this.visible = true;
+        };
+        this._hide = () => {
+            this._backdropLayerCounter -= 1;
+            if (this._backdropLayerCounter !== 0)
+                return;
+            this.visible = false;
+        };
+        this._dispatchBackdropClickedEvent = () => {
+            const backdropClickedEvent = new CustomEvent(BACKDROP_EVENTS.clicked, {
+                bubbles: true
+            });
+            document.dispatchEvent(backdropClickedEvent);
+        };
+        this._appendBackdrop();
+        document.addEventListener(BACKDROP_EVENTS.show, this._show);
+        document.addEventListener(BACKDROP_EVENTS.hide, this._hide);
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        document.removeEventListener(BACKDROP_EVENTS.show, this._show);
+        document.removeEventListener(BACKDROP_EVENTS.hide, this._hide);
+    }
+    updated() {
+        if (this.visible) {
+            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}"
+            @click="${this._dispatchBackdropClickedEvent}"
+            class="${BACKDROP_CLASS}"
+        ></div>`;
+    }
+};
+__decorate([
+    property({ type: Boolean }),
+    __metadata("design:type", Object)
+], HBackdrop.prototype, "visible", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Array)
+], HBackdrop.prototype, "onClickArray", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], HBackdrop.prototype, "_backdropLayerCounter", void 0);
+HBackdrop = __decorate([
+    phoenixCustomElement('h-backdrop'),
+    __metadata("design:paramtypes", [])
+], HBackdrop);
+
+export { HBackdrop };
+//# sourceMappingURL=backdrop.js.map

package/build/esm/packages/phoenix/src/components/{modal/modal_backdrop.js.map → backdrop/backdrop.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;"}
+{"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;"}

package/build/esm/packages/phoenix/src/components/backdrop/backdrop_constants.d.ts

@@ -0,0 +1,7 @@
+export declare const BACKDROP_NAME = "h-backdrop";
+export declare const BACKDROP_CLASS = "backdrop";
+export declare const BACKDROP_EVENTS: {
+    show: string;
+    hide: string;
+    clicked: string;
+};

package/build/esm/packages/phoenix/src/components/backdrop/backdrop_constants.js

@@ -0,0 +1,11 @@
+const BACKDROP_NAME = 'h-backdrop';
+const BACKDROP_CLASS = 'backdrop';
+const BACKDROP_EVENT = 'backdrop';
+const BACKDROP_EVENTS = {
+    show: `${BACKDROP_EVENT}.show`,
+    hide: `${BACKDROP_EVENT}.hide`,
+    clicked: `${BACKDROP_EVENT}.clicked`
+};
+
+export { BACKDROP_CLASS, BACKDROP_EVENTS, BACKDROP_NAME };
+//# sourceMappingURL=backdrop_constants.js.map