@shoper/phoenix_design_system 0.11.3-2 → 0.11.3-3

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

@@ -8,9 +8,9 @@ var relative_position_controller_constants = require('./relative_position_contro
 var relative_position_calculator = require('./relative_position_calculator.js');
 var lodash = require('../../../../../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);
@@ -18,30 +18,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['default'].throttle(() => {
-            this.position();
+            if (!tslib_es6.__classPrivateFieldGet(this, _RelativePositionController_shouldDisablePositioning, "f")) {
+                this.position();
+                return;
+            }
+            tslib_es6.__classPrivateFieldGet(this, _RelativePositionController_shouldDisablePositioning, "f").call(this) ? this.disableRelativePositioning() : this.position();
         }, relative_position_controller_constants.DEFAULT_THROTTLE_WAIT_TIME));
         _RelativePositionController_throttledRepositionForScroll.set(this, lodash['default'].throttle(() => {
-            this.position();
+            if (!tslib_es6.__classPrivateFieldGet(this, _RelativePositionController_shouldDisablePositioning, "f")) {
+                this.position();
+                return;
+            }
+            tslib_es6.__classPrivateFieldGet(this, _RelativePositionController_shouldDisablePositioning, "f").call(this) ? this.disableRelativePositioning() : this.position();
         }, relative_position_controller_constants.DEFAULT_SCROLL_THROTTLE_WAIT_TIME));
         tslib_es6.__classPrivateFieldSet(this, _RelativePositionController_host, host, "f");
         tslib_es6.__classPrivateFieldSet(this, _RelativePositionController_container, container, "f");
         tslib_es6.__classPrivateFieldSet(this, _RelativePositionController_direction, direction, "f");
         tslib_es6.__classPrivateFieldSet(this, _RelativePositionController_relativeElement, relativeElement, "f");
         tslib_es6.__classPrivateFieldSet(this, _RelativePositionController_elementToPosition, elementToPosition, "f");
+        tslib_es6.__classPrivateFieldSet(this, _RelativePositionController_shouldDisablePositioning, shouldDisablePositioning, "f");
+        tslib_es6.__classPrivateFieldSet(this, _RelativePositionController_portalElementsNames, portalElementsNames, "f");
         tslib_es6.__classPrivateFieldGet(this, _RelativePositionController_host, "f").addController(this);
     }
     hostConnected() {
-        tslib_es6.__classPrivateFieldGet(this, _RelativePositionController_host, "f").addEventListener('resize', tslib_es6.__classPrivateFieldGet(this, _RelativePositionController_throttledReposition, "f"));
         if (!tslib_es6.__classPrivateFieldGet(this, _RelativePositionController_relativeElement, "f"))
             return;
         if (!tslib_es6.__classPrivateFieldGet(this, _RelativePositionController_nearestScrollableElement, "f")) {
             tslib_es6.__classPrivateFieldSet(this, _RelativePositionController_nearestScrollableElement, this._findNearestScrollableElement(tslib_es6.__classPrivateFieldGet(this, _RelativePositionController_relativeElement, "f")), "f");
         }
+        window.addEventListener('resize', tslib_es6.__classPrivateFieldGet(this, _RelativePositionController_throttledReposition, "f"));
         tslib_es6.__classPrivateFieldGet(this, _RelativePositionController_nearestScrollableElement, "f").addEventListener('scroll', tslib_es6.__classPrivateFieldGet(this, _RelativePositionController_throttledRepositionForScroll, "f"));
     }
     hostDisconnected() {
-        tslib_es6.__classPrivateFieldGet(this, _RelativePositionController_host, "f").removeEventListener('resize', tslib_es6.__classPrivateFieldGet(this, _RelativePositionController_throttledReposition, "f"));
+        window.removeEventListener('resize', tslib_es6.__classPrivateFieldGet(this, _RelativePositionController_throttledReposition, "f"));
         if (tslib_es6.__classPrivateFieldGet(this, _RelativePositionController_nearestScrollableElement, "f"))
             tslib_es6.__classPrivateFieldGet(this, _RelativePositionController_nearestScrollableElement, "f").removeEventListener('scroll', tslib_es6.__classPrivateFieldGet(this, _RelativePositionController_throttledRepositionForScroll, "f"));
     }
@@ -62,7 +74,8 @@ class RelativePositionController {
     }
     _findNearestScrollableElement(element) {
         const overflowArray = ['overflow', 'overflowY', 'overflowX'];
-        return this._findParentBasedOnStyle(element, overflowArray, (overflowArray) => overflowArray.includes(relative_position_controller_constants.OVERFLOW_SCROLL) || overflowArray.includes(relative_position_controller_constants.OVERFLOW_AUTO));
+        const scrollableElement = this._findParentBasedOnStyle(element, overflowArray, (overflowArray) => overflowArray.includes(relative_position_controller_constants.OVERFLOW_SCROLL) || overflowArray.includes(relative_position_controller_constants.OVERFLOW_AUTO));
+        return scrollableElement !== document.body ? scrollableElement : window;
     }
     _findContainer(element) {
         return this._findParentBasedOnStyle(element, ['position'], ([position]) => relative_position_controller_constants.NON_STATIC_POSITIONS.includes(position));
@@ -74,7 +87,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) && !tslib_es6.__classPrivateFieldGet(this, _RelativePositionController_portalElementsNames, "f").includes(parent.localName))
             return parent;
         return this._findParentBasedOnStyle(parent, styles, callback);
     }
@@ -90,8 +103,15 @@ class RelativePositionController {
             elementStyle.left = '0';
         tslib_es6.__classPrivateFieldGet(this, _RelativePositionController_elementToPosition, "f").style.transform = `translate3d(${position.left}px, ${position.top}px, 0)`;
     }
+    disableRelativePositioning() {
+        if (!tslib_es6.__classPrivateFieldGet(this, _RelativePositionController_elementToPosition, "f"))
+            return;
+        const { style: elementStyle } = tslib_es6.__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();
 
 exports.RelativePositionController = RelativePositionController;
 //# sourceMappingURL=relative_position_controller.js.map

package/build/cjs/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;AACA;AACA;AACA;AACA,wBAAwB,4CAAgD;AACxE;AACA;AACA;AACA,qBAAqB,0CAA8C;AACnE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA,wBAAwB,4CAAgD;AACxE;AACA;AACA;AACA,qBAAqB,0CAA8C;AACnE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

package/build/cjs/packages/phoenix/src/core/context/context_provider_controller.js

@@ -14,7 +14,7 @@ class ContextProviderController {
         _ContextProviderController_handleRequestedValue.set(this, (event) => {
             const customEvent = event;
             const valueKey = customEvent.detail.key;
-            if (tslib_es6.__classPrivateFieldGet(this, _ContextProviderController_contextValues, "f")[valueKey] !== undefined)
+            if (tslib_es6.__classPrivateFieldGet(this, _ContextProviderController_contextValues, "f")[valueKey] === undefined)
                 return;
             customEvent.detail[valueKey] = tslib_es6.__classPrivateFieldGet(this, _ContextProviderController_contextValues, "f")[valueKey];
             event.stopPropagation();

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

@@ -9,7 +9,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');
@@ -50,11 +49,12 @@ var btn_controller = require('./controllers/btn_controller.js');
 var accordion_toggler = require('./components/accordion/accordion_toggler.js');
 var accordion = require('./components/accordion/accordion.js');
 var click_outside_controller = require('./controllers/click_outside_controller/click_outside_controller.js');
+var dropdown_content = require('./components/dropdown/dropdown_content.js');
 var relative_position_controller = require('./controllers/relative_position_controller/relative_position_controller.js');
 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');
 
 
 
@@ -85,12 +85,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 () {
@@ -294,6 +288,12 @@ Object.defineProperty(exports, 'HAccordion', {
 	}
 });
 exports.ClickOutsideController = click_outside_controller.ClickOutsideController;
+Object.defineProperty(exports, 'HDropdownContent', {
+	enumerable: true,
+	get: function () {
+		return dropdown_content.HDropdownContent;
+	}
+});
 exports.RelativePositionController = relative_position_controller.RelativePositionController;
 Object.defineProperty(exports, 'HDropdown', {
 	enumerable: true,
@@ -308,10 +308,10 @@ Object.defineProperty(exports, 'HDropdownToggler', {
 		return dropdown_toggler.HDropdownToggler;
 	}
 });
-Object.defineProperty(exports, 'HDropdownContent', {
+Object.defineProperty(exports, 'HBackdrop', {
 	enumerable: true,
 	get: function () {
-		return dropdown_content.HDropdownContent;
+		return backdrop.HBackdrop;
 	}
 });
 //# sourceMappingURL=index.js.map

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

@@ -0,0 +1,16 @@
+import { TemplateResult } from 'lit';
+import { PhoenixLightLitElement } from "../../core/phoenix_light_lit_element";
+export declare class HBackdrop extends PhoenixLightLitElement {
+    visible: boolean;
+    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,86 @@
+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_CSS_CLASS } from './backdrop_constants.js';
+
+let HBackdrop = class HBackdrop extends PhoenixLightLitElement {
+    constructor() {
+        super();
+        this.visible = false;
+        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;
+            if (this._backdropLayerCounter < 0)
+                this._backdropLayerCounter = 0;
+            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_CSS_CLASS}"
+        ></div>`;
+    }
+};
+__decorate([
+    property({ type: Boolean }),
+    __metadata("design:type", Object)
+], HBackdrop.prototype, "visible", 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;"}

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_CSS_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_CSS_CLASS = 'backdrop';
+const BACKDROP_EVENT_NAME = 'backdrop';
+const BACKDROP_EVENTS = {
+    show: `${BACKDROP_EVENT_NAME}.show`,
+    hide: `${BACKDROP_EVENT_NAME}.hide`,
+    clicked: `${BACKDROP_EVENT_NAME}.clicked`
+};
+
+export { BACKDROP_CSS_CLASS, BACKDROP_EVENTS, BACKDROP_NAME };
+//# sourceMappingURL=backdrop_constants.js.map

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

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

@@ -1,4 +1,5 @@
 import { TemplateResult } from 'lit';
+import { HDropdownContent } from './dropdown_content';
 import { IDropdown } from "./dropdown_types";
 import { PhoenixLightLitElement } from "../../core/phoenix_light_lit_element";
 export declare class HDropdown extends PhoenixLightLitElement implements IDropdown {
@@ -6,18 +7,25 @@ export declare class HDropdown extends PhoenixLightLitElement implements IDropdo
     direction: "bottom-center";
     toggleOnHover: boolean;
     name: string;
+    transition: string;
     portalTarget: string;
     $dropdownToggler: HTMLElement | null;
     $dropdownContent: HTMLElement | null;
+    $nestedDropdownContentElements?: HDropdownContent[];
+    $hoverableDropdownContentElements: HDropdownContent[];
     private _positionController;
     private _clickOutsideController;
     connectedCallback(): void;
+    private static _appendDropdownPortal;
     private _setupListeners;
-    private _appendDropdownPortal;
     private _handleClickOutside;
     toggle: () => void;
-    show: () => void;
-    hide: () => void;
+    show: () => Promise<void>;
+    private _dispatchShowDropdownEvent;
+    hide: () => Promise<void>;
+    private _dispatchHideDropdownEvent;
+    private _hoverToggle;
+    private _isHoveredWithinDropdown;
     private _positionDropdownContent;
     disconnectedCallback(): void;
     render(): TemplateResult;

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

@@ -4,56 +4,138 @@ 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_NAME, DROPDOWN_TOGGLER_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_CONTAINER_NAME, DROPDOWN_CONTENT_NAME, DROPDOWN_TOGGLER_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 { RelativePositionController } from '../../controllers/relative_position_controller/relative_position_controller.js';
 
-let HDropdown = class HDropdown extends PhoenixLightLitElement {
+var HDropdown_1;
+let HDropdown = HDropdown_1 = class HDropdown extends PhoenixLightLitElement {
     constructor() {
         super(...arguments);
         this.opened = false;
         this.direction = DIRECTIONS.bottomCenter;
         this.toggleOnHover = false;
         this.name = '';
+        this.transition = 'direction';
         this.portalTarget = 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, _b;
+                (_a = this.$dropdownToggler) === null || _a === void 0 ? void 0 : _a.setAttribute('aria-expanded', 'true');
+                (_b = this.$dropdownContent) === null || _b === void 0 ? void 0 : _b.classList.add(DROPDOWN_CONTENT_VISIBLE_CLASS, `${DROPDOWN_CONTENT_SHOW}-${this.transition}-start`);
+                this.opened = true;
+                window.requestAnimationFrame(() => {
+                    setTimeout(() => {
+                        var _a;
+                        (_a = this.$dropdownContent) === null || _a === void 0 ? void 0 : _a.classList.add(`${DROPDOWN_CONTENT_SHOW}-${this.transition}-end`);
+                    }, 0);
+                    const transitionDuration = parseFloat(getComputedStyle(this.$dropdownContent || this).transitionDuration) * 1000;
+                    setTimeout(() => {
+                        var _a;
+                        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._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 = () => {
-            this.opened = false;
+        this.hide = async () => new Promise((resolve) => {
+            var _a;
+            (_a = this.$dropdownToggler) === null || _a === void 0 ? void 0 : _a.setAttribute('aria-expanded', 'false');
+            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
             });
             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._isHoveredWithinDropdown(ev.target);
+            if (isHoveredWithinDropdown && !this.opened) {
+                await this.show();
+                return;
+            }
+            if (!isHoveredWithinDropdown && this.opened) {
+                if (!this.$hoverableDropdownContentElements) {
+                    await this.hide();
+                    return;
+                }
+                this.$hoverableDropdownContentElements.forEach(async ({ name: dropdownName }) => {
+                    const dropdown = document.querySelector(`${DROPDOWN_CONTAINER_NAME}[name="${dropdownName}"]`);
+                    await dropdown.hide();
+                });
+            }
         };
         this._positionDropdownContent = () => {
             requestAnimationFrame(() => {
-                this.opened && this._positionController.position();
+                this.opened && window.innerWidth < BREAKPOINTS.xs
+                    ? this._positionController.disableRelativePositioning()
+                    : this._positionController.position();
             });
         };
     }
     connectedCallback() {
         super.connectedCallback();
-        this._appendDropdownPortal();
+        HDropdown_1._appendDropdownPortal();
         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.$nestedDropdownContentElements)
+            this.$nestedDropdownContentElements = [...$nestedDropdown.querySelectorAll(DROPDOWN_CONTENT_NAME)];
         if (!this._positionController)
             this._positionController = new RelativePositionController({
                 host: this,
                 direction: this.direction,
                 relativeElement: this.$dropdownToggler,
-                elementToPosition: this.$dropdownContent
+                elementToPosition: this.$dropdownContent,
+                shouldDisablePositioning: () => window.innerWidth < BREAKPOINTS.xs,
+                portalElementsNames: [DROPDOWN_CONTENT_NAME]
             });
         if (!this._clickOutsideController)
             this._clickOutsideController = new ClickOutsideController({
@@ -61,18 +143,12 @@ let HDropdown = class HDropdown extends PhoenixLightLitElement {
                 container: this,
                 name: this.name
             });
-        this._setupListeners();
-    }
-    _setupListeners() {
-        var _a, _b, _c;
-        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) {
-            (_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);
+        if (this.toggleOnHover && !this.$hoverableDropdownContentElements) {
+            this.$hoverableDropdownContentElements = [...this.querySelectorAll(DROPDOWN_CONTENT_NAME)];
         }
+        this._setupListeners();
     }
-    _appendDropdownPortal() {
+    static _appendDropdownPortal() {
         const $dropdownPortalTarget = document.querySelector(`[name="${DEFAULT_DROPDOWN_PORTAL_NAME}"]`);
         if (!$dropdownPortalTarget) {
             const $portalTarget = document.createElement(PORTAL_TARGET_COMPONENT_NAME);
@@ -80,22 +156,49 @@ let HDropdown = class HDropdown extends PhoenixLightLitElement {
             document.body.appendChild($portalTarget);
         }
     }
-    _handleClickOutside() {
+    _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)
+            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 = (_a = this.$nestedDropdownContentElements) === null || _a === void 0 ? void 0 : _a.find((element) => element.contains(target));
+        const shouldHideElements = !((_b = this.$dropdownContent) === null || _b === void 0 ? void 0 : _b.contains(target)) && !this.contains(target) && !clickedWithinNestedDropdown;
+        if (shouldHideElements)
+            this.hide();
+    }
+    _isHoveredWithinDropdown(element) {
+        if (element === this)
+            return true;
+        if (element === this.$dropdownContent)
+            return true;
+        const isDescendantOfDropdown = element.closest(`${DROPDOWN_CONTAINER_NAME}[name="${this.name}"]`) !== null;
+        if (isDescendantOfDropdown)
+            return true;
+        const $closestDropdownContent = element.closest(DROPDOWN_CONTENT_NAME);
+        const isDescendantOfContent = this.$dropdownContent &&
+            $closestDropdownContent !== null &&
+            !!this.$hoverableDropdownContentElements.find((content) => content.name === $closestDropdownContent.name);
+        if (isDescendantOfContent)
+            return true;
+        return false;
     }
     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();
@@ -123,11 +226,15 @@ __decorate([
     property({ type: String }),
     __metadata("design:type", Object)
 ], HDropdown.prototype, "name", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", Object)
+], HDropdown.prototype, "transition", void 0);
 __decorate([
     property({ type: String }),
     __metadata("design:type", Object)
 ], HDropdown.prototype, "portalTarget", void 0);
-HDropdown = __decorate([
+HDropdown = HDropdown_1 = __decorate([
     phoenixCustomElement('h-dropdown')
 ], HDropdown);
 

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

@@ -8,5 +8,9 @@ export declare const DROPDOWN_EVENTS: {
     readonly hide: "dropdown.hide";
 };
 export declare const DROPDOWN_OPENED_ATTRIBUTE_NAME = "opened";
-export declare const DROPDOWN_CLASS = "dropdown";
-export declare const DROPDOWN_CONTENT_CLASS: string;
+export declare const DROPDOWN_CSS_CLASS = "dropdown";
+export declare const DROPDOWN_CONTENT_CSS_CLASS: string;
+export declare const DROPDOWN_TOGGLER_CSS_CLASS: string;
+export declare const DROPDOWN_CONTENT_VISIBLE_CLASS: string;
+export declare const DROPDOWN_CONTENT_SHOW: string;
+export declare const DROPDOWN_CONTENT_HIDE: string;