@shoper/phoenix_design_system 1.18.1 → 1.18.2

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

@@ -1,478 +1,479 @@
-import { __decorate, __metadata } from '../../../../../external/tslib/tslib.es6.js';
+var HDropdown_1;
+import { __decorate, __metadata } from "tslib";
+import { BREAKPOINTS, SCROLLABLE_CLASS_NAME } from '@phoenixRoot/global_constants';
+import { DEFAULT_DROPDOWN_PORTAL_NAME, DROPDOWN_CONTAINER_NAME, DROPDOWN_CONTENT_CSS_CLASSES, DROPDOWN_CONTENT_NAME, DROPDOWN_CONTENT_WIDTH, DROPDOWN_EVENTS, DROPDOWN_TOGGLER_NAME } from '@phoenixRoot/components/dropdown/dropdown_constants';
+import { DEFAULT_THROTTLE_WAIT_TIME, RELATIVE_POSITION_CONTROLLER_EVENTS } from '@phoenixRoot/controllers/relative_position_controller/relative_position_controller_constants';
+import { PORTAL_TARGET_COMPONENT_NAME, PORTAL_TARGET_NAME_PROP } from '@phoenixRoot/components/portal/portal_constants';
+import { html } from 'lit-html';
+import { BackdropController } from '@phoenixRoot/components/backdrop/controller/backdrop_controller';
+import { ClickOutsideController } from '@phoenixRoot/controllers/click_outside_controller/click_outside_controller';
+import './dropdown_content';
+import './dropdown_toggler';
+import '@phoenixRoot/components/portal/portal_target';
+import { KeystrokesController } from '@phoenixRoot/controllers/keystrokes_controller/keystrokes_controller';
+import { PhoenixLightLitElement } from '@phoenixRoot/core/phoenix_light_lit_element/phoenix_light_lit_element';
+import { RelativePositionController } from '@phoenixRoot/controllers/relative_position_controller/relative_position_controller';
 import { DIRECTIONS, UiDomUtils } from '@dreamcommerce/utilities';
-import { PhoenixLightLitElement } from '../../core/phoenix_light_lit_element/phoenix_light_lit_element.js';
-import { phoenixCustomElement } from '../../core/decorators/phoenix_custom_element.js';
+import { phoenixCustomElement } from '@phoenixRoot/core/decorators/phoenix_custom_element';
 import { property } from '@lit/reactive-element/decorators.js';
-import { KeystrokesController } from '../../controllers/keystrokes_controller/keystrokes_controller.js';
-import { html } from 'lit-html';
-import { BREAKPOINTS, SCROLLABLE_CLASS_NAME } from '../../global_constants.js';
-import { DEFAULT_DROPDOWN_PORTAL_NAME, DROPDOWN_CONTENT_CSS_CLASSES, DROPDOWN_EVENTS, DROPDOWN_CONTAINER_NAME, DROPDOWN_CONTENT_WIDTH, DROPDOWN_CONTENT_NAME, DROPDOWN_TOGGLER_NAME } from './dropdown_constants.js';
-import { RELATIVE_POSITION_CONTROLLER_EVENTS, DEFAULT_THROTTLE_WAIT_TIME } from '../../controllers/relative_position_controller/relative_position_controller_constants.js';
-import v4 from '../../../../../external/uuid/dist/esm-browser/v4.js';
-import { PORTAL_TARGET_COMPONENT_NAME, PORTAL_TARGET_NAME_PROP } from '../portal/portal_constants.js';
-import { BackdropController } from '../backdrop/controller/backdrop_controller.js';
-import { ClickOutsideController } from '../../controllers/click_outside_controller/click_outside_controller.js';
-import throttle_1 from '../../../../../external/lodash/throttle.js';
-import { RelativePositionController } from '../../controllers/relative_position_controller/relative_position_controller.js';
-
-var HDropdown_1;
-let HDropdown = HDropdown_1 = class HDropdown extends PhoenixLightLitElement {
-    constructor() {
-        super();
-        this.opened = false;
-        this.direction = DIRECTIONS.bottomCenter;
-        this.toggleOnHover = false;
-        this.name = '';
-        this.transition = 'direction';
-        this.offset = 0;
-        this.portalTarget = DEFAULT_DROPDOWN_PORTAL_NAME;
-        this.id = v4();
-        this.preventFocusTrap = false;
-        this.noAutoFocus = false;
-        this._backdropController = new BackdropController();
-        this._handleClickOutside = async (target) => {
-            var _a, _b;
-            if (!this.opened)
-                return;
-            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)
-                await this._hideDropdownsSequentially();
-        };
-        this.toggle = async () => {
-            if (this.opened) {
-                await this._hideDropdownsSequentially();
-                return;
-            }
-            await this.show();
-            if (!this.noAutoFocus)
-                this._focusOnFirstContentElement();
-        };
-        this.show = async () => {
-            if (this.opened)
-                return;
-            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_CSS_CLASSES.visible, `${DROPDOWN_CONTENT_CSS_CLASSES.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_CSS_CLASSES.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_CSS_CLASSES.show}-${this.transition}-start`, `${DROPDOWN_CONTENT_CSS_CLASSES.show}-${this.transition}-end`);
-                        this._toggleScroll();
-                        resolve();
-                    }, transitionDuration);
-                });
-            });
-        };
-        this._dispatchShowDropdownEvent = () => {
-            this.emitEvent(DROPDOWN_EVENTS.showed);
-            if (window.innerWidth >= BREAKPOINTS.xs)
-                return;
-            this._backdropController.show();
-        };
-        this._hideDropdownsSequentially = async () => {
-            if (!this.$nestedDropdownContentElements) {
-                await this.hide();
-                return;
-            }
-            for (const { name: dropdownName } of this.$nestedDropdownContentElements.slice().reverse()) {
-                const $currentDropdown = document.querySelector(`${DROPDOWN_CONTAINER_NAME}[name="${dropdownName}"]`);
-                if ($currentDropdown && $currentDropdown.opened)
-                    await $currentDropdown.hide();
-            }
-            await this.hide();
-        };
-        this.hide = async (ev) => {
-            if (!this.opened)
-                return;
-            return new Promise((resolve) => {
-                var _a, _b, _c;
-                if (ev && ((_a = ev.detail) === null || _a === void 0 ? void 0 : _a.name) !== this.name)
-                    return;
-                (_b = this.$dropdownToggler) === null || _b === void 0 ? void 0 : _b.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_CSS_CLASSES.hide}-${this.transition}-start`);
-                    (_b = this.$dropdownContent) === null || _b === void 0 ? void 0 : _b.classList.add(`${DROPDOWN_CONTENT_CSS_CLASSES.hide}-${this.transition}-end`);
-                    setTimeout(() => {
-                        var _a;
-                        (_a = this.$dropdownContent) === null || _a === void 0 ? void 0 : _a.classList.remove(`${DROPDOWN_CONTENT_CSS_CLASSES.hide}-${this.transition}-start`, `${DROPDOWN_CONTENT_CSS_CLASSES.hide}-${this.transition}-end`);
-                        this.opened = false;
-                        this._dispatchHideDropdownEvent();
-                        resolve();
-                    }, transitionDuration);
-                });
-                (_c = this.$dropdownToggler) === null || _c === void 0 ? void 0 : _c.focus();
-            });
-        };
-        this._dispatchHideDropdownEvent = () => {
-            this.emitEvent(DROPDOWN_EVENTS.hidden);
-            if (window.innerWidth >= BREAKPOINTS.xs)
-                return;
-            this._backdropController.hide();
-        };
-        this._handleDisabledPositioning = () => {
-            if (this.opened)
-                this._backdropController.show();
-        };
-        this._handleEnabledPositioning = (ev) => {
-            const { wasPreviouslyHidden } = ev.detail;
-            !wasPreviouslyHidden && this._backdropController.hide();
-        };
-        this._observeScrollToggling = throttle_1(() => {
-            this._toggleScroll();
-        }, DEFAULT_THROTTLE_WAIT_TIME);
-        this._closeDropdownOnEscape = async (ev) => {
-            const hasEscapeBeenPressed = ev.key && ev.key.toLowerCase() === 'escape';
-            if (!hasEscapeBeenPressed)
-                return;
-            await this.hide();
-        };
-        this._keepFocusWithinDropdownForwards = (ev) => {
-            var _a, _b;
-            if (ev.shiftKey === true || !this.$dropdownContent || !this.opened)
-                return;
-            const $target = ev.target;
-            if (((_a = this.$dropdownContent) === null || _a === void 0 ? void 0 : _a.contains($target)) && this.preventFocusTrap) {
-                this._handleFocusOnNextElementAfterDropdown(ev);
-                return;
-            }
-            if ((_b = this.$dropdownToggler) === null || _b === void 0 ? void 0 : _b.contains($target)) {
-                this._handleFocusFromTogglerForwards(ev);
-                return;
-            }
-            this._handleFocusFromSentinelEndForwards(ev, $target);
-        };
-        this._keepFocusWithinDropdownBackwards = (ev) => {
-            if (!this.opened || !this.$dropdownContent)
-                return;
-            const $target = ev.target;
-            if (this.preventFocusTrap) {
-                this._handleDefaultFocusFromDropdownBackwards(ev);
-            }
-            else {
-                this._handleFocusFromTogglerBackwards(ev, $target);
-                this._handleFocusFromSentinelStartBackwards(ev, $target);
-            }
-        };
-        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();
-                if (!this.noAutoFocus)
-                    this._focusOnFirstContentElement();
-                return;
-            }
-            if (!isHoveredWithinDropdown && this.opened)
-                await this._hideDropdownsSequentially();
-        };
-        this._focusOnFirstContentElement = () => {
-            if (!this.$dropdownContent)
-                return;
-            const $firstFocusableElement = this._getTrulyFocusableElements(this.$dropdownContent)[0];
-            if ($firstFocusableElement)
-                $firstFocusableElement.focus();
-        };
-        this.isOpened = () => this.opened;
-        this._positionDropdownContent = () => {
-            if (this.contentWidth === DROPDOWN_CONTENT_WIDTH.full)
-                this._setDropdownContentWidth(this._getDropdownContentWidth());
-            requestAnimationFrame(() => {
-                this.opened && window.innerWidth < BREAKPOINTS.xs
-                    ? this._positionController.disableRelativePositioning()
-                    : this._positionController.position(true);
-            });
-        };
-        this._setDropdownContentWidth = (width) => {
-            const $dropdown = this.$dropdownContent;
-            if (!$dropdown)
-                return;
-            if (!width) {
-                $dropdown.style.removeProperty('width');
-                return;
-            }
-            if (width)
-                $dropdown.style.width = `${width !== null && width !== void 0 ? width : ''}px`;
-        };
-        new KeystrokesController({
-            host: this,
-            target: document.body,
-            keys: ['tab'],
-            callback: this._keepFocusWithinDropdownForwards
-        });
-        new KeystrokesController({
-            host: this,
-            target: document.body,
-            keys: [['shift', 'tab']],
-            callback: this._keepFocusWithinDropdownBackwards,
-            containerSelectors: ['h-dropdown', 'h-dropdown-content']
-        });
-    }
-    async connectedCallback() {
-        super.connectedCallback();
-        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,
-                disablePositioningOnCondition: () => window.innerWidth < BREAKPOINTS.xs || !this.opened,
-                portalElementsNames: [DROPDOWN_CONTENT_NAME],
-                offset: this.offset,
-                mobileElementPosition: this.mobilePosition
-            });
-        if (!this._clickOutsideController)
-            this._clickOutsideController = new ClickOutsideController({
-                host: this,
-                container: this,
-                name: this.name,
-                action: this._handleClickOutside
-            });
-        if (this.opened)
-            await this.show();
-        this._setupListeners();
-        this._setupInitialDropdownProperties();
-    }
-    static _appendDropdownPortal() {
-        const $dropdownPortalTarget = document.querySelector(`[name="${DEFAULT_DROPDOWN_PORTAL_NAME}"]`);
-        if (!$dropdownPortalTarget) {
-            const $portalTarget = document.createElement(PORTAL_TARGET_COMPONENT_NAME);
-            $portalTarget.setAttribute(PORTAL_TARGET_NAME_PROP, DEFAULT_DROPDOWN_PORTAL_NAME);
-            document.body.appendChild($portalTarget);
-        }
-    }
-    _findRootDropdown(element) {
-        var _a;
-        if (((_a = element.parentElement) === null || _a === void 0 ? void 0 : _a.tagName.toLowerCase()) !== DROPDOWN_CONTENT_NAME && element.tagName.toLowerCase() === DROPDOWN_CONTAINER_NAME)
-            return element;
-        return this._findRootDropdown(element.parentElement || document.body);
-    }
-    _setupListeners() {
-        this.addEventListener(RELATIVE_POSITION_CONTROLLER_EVENTS.disabledPositioning, this._handleDisabledPositioning);
-        this.addEventListener(RELATIVE_POSITION_CONTROLLER_EVENTS.enabledPositioning, this._handleEnabledPositioning);
-        this.addEventListener(DROPDOWN_EVENTS.toggle, this.toggle);
-        document.addEventListener(DROPDOWN_EVENTS.hide, this.hide);
-        window.addEventListener('resize', this._observeScrollToggling);
-        document.addEventListener('keydown', this._closeDropdownOnEscape);
-        if (this.toggleOnHover)
-            document.addEventListener('mouseover', this._hoverToggle);
-    }
-    _toggleScroll() {
-        var _a, _b;
-        if (window.innerWidth >= BREAKPOINTS.xs && this._hasScrollableClassInitially)
-            return;
-        if (window.innerWidth >= BREAKPOINTS.xs) {
-            (_a = this.$dropdownContent) === null || _a === void 0 ? void 0 : _a.classList.remove(SCROLLABLE_CLASS_NAME);
-            return;
-        }
-        if (!this._dropdownContentChildrenHeight && this.$dropdownContent)
-            this._dropdownContentChildrenHeight = [...this.$dropdownContent.children].reduce((totalHeight, currentChild) => {
-                return totalHeight + (parseInt(getComputedStyle(currentChild).height.replace('px', '')) || 0);
-            }, 0);
-        if (this._dropdownContentChildrenHeight > window.innerHeight && !this._hasScrollableClassInitially) {
-            (_b = this.$dropdownContent) === null || _b === void 0 ? void 0 : _b.classList.add(SCROLLABLE_CLASS_NAME);
-        }
-    }
-    _handleFocusOnNextElementAfterDropdown(ev) {
-        ev.preventDefault();
-        this.hide();
-        UiDomUtils.getNextFocusableElement(this.$dropdownToggler || this).focus();
-        return;
-    }
-    _handleFocusFromTogglerForwards(ev) {
-        if (!this.$dropdownContent)
-            return;
-        const trulyFocusableElements = this._getTrulyFocusableElements(this.$dropdownContent);
-        if (trulyFocusableElements.length === 0)
-            return;
-        ev.preventDefault();
-        trulyFocusableElements[0].focus();
-    }
-    _handleFocusFromSentinelEndForwards(ev, $target) {
-        var _a;
-        if (!this.$dropdownContent)
-            return;
-        const trulyFocusableElements = this._getTrulyFocusableElements(this.$dropdownContent);
-        const $lastFocusableElement = trulyFocusableElements.slice(-1)[0];
-        if ($target !== $lastFocusableElement)
-            return;
-        ev.preventDefault();
-        (_a = this.$dropdownToggler) === null || _a === void 0 ? void 0 : _a.focus();
-    }
-    _handleDefaultFocusFromDropdownBackwards(ev) {
-        ev.preventDefault();
-        this.hide();
-        UiDomUtils.getPreviousFocusableElement(this.$dropdownToggler || this).focus();
-    }
-    _handleFocusFromTogglerBackwards(ev, $target) {
-        var _a;
-        if ($target !== this.$dropdownToggler && !((_a = this.$dropdownToggler) === null || _a === void 0 ? void 0 : _a.contains($target)) || !this.$dropdownContent)
-            return;
-        ev.preventDefault();
-        const trulyFocusableElements = this._getTrulyFocusableElements(this.$dropdownContent);
-        if (trulyFocusableElements.length === 0)
-            return;
-        const $lastFocusableElement = trulyFocusableElements.slice(-1)[0];
-        $lastFocusableElement.focus();
-    }
-    _handleFocusFromSentinelStartBackwards(ev, $target) {
-        var _a;
-        if (!this.$dropdownContent)
-            return;
-        const $firstFocusableElement = this._getTrulyFocusableElements(this.$dropdownContent)[0];
-        if ($target !== $firstFocusableElement)
-            return;
-        ev.preventDefault();
-        (_a = this.$dropdownToggler) === null || _a === void 0 ? void 0 : _a.focus();
-    }
-    _getTrulyFocusableElements($container) {
-        const focusableElements = UiDomUtils.getFocusableElements($container);
-        return focusableElements.filter(($el) => this._isElementTrulyFocusable($el));
-    }
-    _isElementTrulyFocusable($el) {
-        const style = window.getComputedStyle($el);
-        if (style.display === 'none' || style.visibility === 'hidden') {
-            return false;
-        }
-        if ($el.nodeName === 'H-PORTAL')
-            return true;
-        const $parent = $el.parentElement;
-        if (!$parent)
-            return true;
-        return this._isElementTrulyFocusable($parent);
-    }
-    _isHoveredWithinDropdown(element) {
-        var _a;
-        if (element === this)
-            return true;
-        if (element === this.$dropdownContent)
-            return true;
-        const isDescendantOfDropdown = element.closest(`${DROPDOWN_CONTAINER_NAME}[name="${this.name}"]`) !== null ||
-            element.closest(`${DROPDOWN_CONTENT_NAME}[name="${this.name}"]`) !== null;
-        if (isDescendantOfDropdown)
-            return true;
-        const $closestDropdownContent = element.closest(DROPDOWN_CONTENT_NAME);
-        const isDescendantOfContent = this.$dropdownContent &&
-            $closestDropdownContent !== null &&
-            !!((_a = this.$nestedDropdownContentElements) === null || _a === void 0 ? void 0 : _a.find((content) => content.name === $closestDropdownContent.name));
-        if (isDescendantOfContent)
-            return true;
-        return false;
-    }
-    _setupInitialDropdownProperties() {
-        if (!this.$dropdownContent)
-            return;
-        if (!this._hasScrollableClassInitially)
-            this._hasScrollableClassInitially = this.$dropdownContent.classList.contains(SCROLLABLE_CLASS_NAME);
-        if (!this.preventFocusTrap)
-            this.$dropdownContent.setAttribute('aria-modal', 'true');
-    }
-    _getDropdownContentWidth() {
-        const isMobileResolution = document.documentElement.clientWidth < BREAKPOINTS.xs;
-        const dropdownContentWidth = this.$dropdownToggler
-            ? this.$dropdownToggler.getBoundingClientRect().width
-            : this.getBoundingClientRect().width;
-        return isMobileResolution ? undefined : dropdownContentWidth;
-    }
-    disconnectedCallback() {
-        var _a;
-        super.disconnectedCallback();
-        (_a = this.$dropdownToggler) === null || _a === void 0 ? void 0 : _a.removeEventListener(DROPDOWN_EVENTS.toggle, this.toggle);
-        window.removeEventListener('resize', this._observeScrollToggling);
-        document.removeEventListener('keydown', this._closeDropdownOnEscape);
-        document.removeEventListener(DROPDOWN_EVENTS.hide, this.hide);
-        if (this.toggleOnHover)
-            document.removeEventListener('mouseover', this._hoverToggle);
-        if (this.opened) {
-            this.opened = false;
-            this._dispatchHideDropdownEvent();
-        }
-    }
-    render() {
-        super.render();
+import { throttle } from 'lodash';
+import { v4 as uuidv4 } from 'uuid';
+let HDropdown = HDropdown_1 = class HDropdown extends PhoenixLightLitElement {
+    constructor() {
+        super();
+        this.opened = false;
+        this.direction = DIRECTIONS.bottomCenter;
+        this.toggleOnHover = false;
+        this.name = '';
+        this.transition = 'direction';
+        this.offset = 0;
+        this.portalTarget = DEFAULT_DROPDOWN_PORTAL_NAME;
+        this.id = uuidv4();
+        this.preventFocusTrap = false;
+        this.noAutoFocus = false;
+        this._backdropController = new BackdropController();
+        this._handleClickOutside = async (target) => {
+            var _a, _b;
+            if (!this.opened)
+                return;
+            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)
+                await this._hideDropdownsSequentially();
+        };
+        this.toggle = async () => {
+            if (this.opened) {
+                await this._hideDropdownsSequentially();
+                return;
+            }
+            await this.show();
+            if (!this.noAutoFocus)
+                this._focusOnFirstContentElement();
+        };
+        this.show = async () => {
+            if (this.opened)
+                return;
+            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_CSS_CLASSES.visible, `${DROPDOWN_CONTENT_CSS_CLASSES.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_CSS_CLASSES.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_CSS_CLASSES.show}-${this.transition}-start`, `${DROPDOWN_CONTENT_CSS_CLASSES.show}-${this.transition}-end`);
+                        this._toggleScroll();
+                        resolve();
+                    }, transitionDuration);
+                });
+            });
+        };
+        this._dispatchShowDropdownEvent = () => {
+            this.emitEvent(DROPDOWN_EVENTS.showed);
+            if (window.innerWidth >= BREAKPOINTS.xs)
+                return;
+            this._backdropController.show();
+        };
+        this._hideDropdownsSequentially = async () => {
+            if (!this.$nestedDropdownContentElements) {
+                await this.hide();
+                return;
+            }
+            for (const { name: dropdownName } of this.$nestedDropdownContentElements.slice().reverse()) {
+                const $currentDropdown = document.querySelector(`${DROPDOWN_CONTAINER_NAME}[name="${dropdownName}"]`);
+                if ($currentDropdown && $currentDropdown.opened)
+                    await $currentDropdown.hide();
+            }
+            await this.hide();
+        };
+        this.hide = async (ev) => {
+            if (!this.opened)
+                return;
+            return new Promise((resolve) => {
+                var _a, _b, _c;
+                if (ev && ((_a = ev.detail) === null || _a === void 0 ? void 0 : _a.name) !== this.name)
+                    return;
+                (_b = this.$dropdownToggler) === null || _b === void 0 ? void 0 : _b.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_CSS_CLASSES.hide}-${this.transition}-start`);
+                    (_b = this.$dropdownContent) === null || _b === void 0 ? void 0 : _b.classList.add(`${DROPDOWN_CONTENT_CSS_CLASSES.hide}-${this.transition}-end`);
+                    setTimeout(() => {
+                        var _a;
+                        (_a = this.$dropdownContent) === null || _a === void 0 ? void 0 : _a.classList.remove(`${DROPDOWN_CONTENT_CSS_CLASSES.hide}-${this.transition}-start`, `${DROPDOWN_CONTENT_CSS_CLASSES.hide}-${this.transition}-end`);
+                        this.opened = false;
+                        this._dispatchHideDropdownEvent();
+                        resolve();
+                    }, transitionDuration);
+                });
+                (_c = this.$dropdownToggler) === null || _c === void 0 ? void 0 : _c.focus();
+            });
+        };
+        this._dispatchHideDropdownEvent = () => {
+            this.emitEvent(DROPDOWN_EVENTS.hidden);
+            if (window.innerWidth >= BREAKPOINTS.xs)
+                return;
+            this._backdropController.hide();
+        };
+        this._handleDisabledPositioning = () => {
+            if (this.opened)
+                this._backdropController.show();
+        };
+        this._handleEnabledPositioning = (ev) => {
+            const { wasPreviouslyHidden } = ev.detail;
+            !wasPreviouslyHidden && this._backdropController.hide();
+        };
+        this._observeScrollToggling = throttle(() => {
+            this._toggleScroll();
+        }, DEFAULT_THROTTLE_WAIT_TIME);
+        this._closeDropdownOnEscape = async (ev) => {
+            const hasEscapeBeenPressed = ev.key && ev.key.toLowerCase() === 'escape';
+            if (!hasEscapeBeenPressed)
+                return;
+            await this.hide();
+        };
+        this._keepFocusWithinDropdownForwards = (ev) => {
+            var _a, _b;
+            if (ev.shiftKey === true || !this.$dropdownContent || !this.opened)
+                return;
+            const $target = ev.target;
+            if (((_a = this.$dropdownContent) === null || _a === void 0 ? void 0 : _a.contains($target)) && this.preventFocusTrap) {
+                this._handleFocusOnNextElementAfterDropdown(ev);
+                return;
+            }
+            if ((_b = this.$dropdownToggler) === null || _b === void 0 ? void 0 : _b.contains($target)) {
+                this._handleFocusFromTogglerForwards(ev);
+                return;
+            }
+            this._handleFocusFromSentinelEndForwards(ev, $target);
+        };
+        this._keepFocusWithinDropdownBackwards = (ev) => {
+            if (!this.opened || !this.$dropdownContent)
+                return;
+            const $target = ev.target;
+            if (this.preventFocusTrap) {
+                this._handleDefaultFocusFromDropdownBackwards(ev);
+            }
+            else {
+                this._handleFocusFromTogglerBackwards(ev, $target);
+                this._handleFocusFromSentinelStartBackwards(ev, $target);
+            }
+        };
+        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();
+                if (!this.noAutoFocus)
+                    this._focusOnFirstContentElement();
+                return;
+            }
+            if (!isHoveredWithinDropdown && this.opened)
+                await this._hideDropdownsSequentially();
+        };
+        this._focusOnFirstContentElement = () => {
+            if (!this.$dropdownContent)
+                return;
+            const $firstFocusableElement = this._getTrulyFocusableElements(this.$dropdownContent)[0];
+            if ($firstFocusableElement)
+                $firstFocusableElement.focus();
+        };
+        this.isOpened = () => this.opened;
+        this._positionDropdownContent = () => {
+            if (this.contentWidth === DROPDOWN_CONTENT_WIDTH.full)
+                this._setDropdownContentWidth(this._getDropdownContentWidth());
+            requestAnimationFrame(() => {
+                this.opened && window.innerWidth < BREAKPOINTS.xs
+                    ? this._positionController.disableRelativePositioning()
+                    : this._positionController.position(true);
+            });
+        };
+        this._setDropdownContentWidth = (width) => {
+            const $dropdown = this.$dropdownContent;
+            if (!$dropdown)
+                return;
+            if (!width) {
+                $dropdown.style.removeProperty('width');
+                return;
+            }
+            if (width)
+                $dropdown.style.width = `${width !== null && width !== void 0 ? width : ''}px`;
+        };
+        new KeystrokesController({
+            host: this,
+            target: document.body,
+            keys: ['tab'],
+            callback: this._keepFocusWithinDropdownForwards
+        });
+        new KeystrokesController({
+            host: this,
+            target: document.body,
+            keys: [['shift', 'tab']],
+            callback: this._keepFocusWithinDropdownBackwards,
+            containerSelectors: ['h-dropdown', 'h-dropdown-content']
+        });
+    }
+    async connectedCallback() {
+        super.connectedCallback();
+        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,
+                disablePositioningOnCondition: () => window.innerWidth < BREAKPOINTS.xs || !this.opened,
+                portalElementsNames: [DROPDOWN_CONTENT_NAME],
+                offset: this.offset,
+                mobileElementPosition: this.mobilePosition
+            });
+        if (!this._clickOutsideController)
+            this._clickOutsideController = new ClickOutsideController({
+                host: this,
+                container: this,
+                name: this.name,
+                action: this._handleClickOutside
+            });
+        if (this.opened)
+            await this.show();
+        this._setupListeners();
+        this._setupInitialDropdownProperties();
+    }
+    static _appendDropdownPortal() {
+        const $dropdownPortalTarget = document.querySelector(`[name="${DEFAULT_DROPDOWN_PORTAL_NAME}"]`);
+        if (!$dropdownPortalTarget) {
+            const $portalTarget = document.createElement(PORTAL_TARGET_COMPONENT_NAME);
+            $portalTarget.setAttribute(PORTAL_TARGET_NAME_PROP, DEFAULT_DROPDOWN_PORTAL_NAME);
+            document.body.appendChild($portalTarget);
+        }
+    }
+    _findRootDropdown(element) {
+        var _a;
+        if (((_a = element.parentElement) === null || _a === void 0 ? void 0 : _a.tagName.toLowerCase()) !== DROPDOWN_CONTENT_NAME && element.tagName.toLowerCase() === DROPDOWN_CONTAINER_NAME)
+            return element;
+        return this._findRootDropdown(element.parentElement || document.body);
+    }
+    _setupListeners() {
+        this.addEventListener(RELATIVE_POSITION_CONTROLLER_EVENTS.disabledPositioning, this._handleDisabledPositioning);
+        this.addEventListener(RELATIVE_POSITION_CONTROLLER_EVENTS.enabledPositioning, this._handleEnabledPositioning);
+        this.addEventListener(DROPDOWN_EVENTS.toggle, this.toggle);
+        document.addEventListener(DROPDOWN_EVENTS.hide, this.hide);
+        window.addEventListener('resize', this._observeScrollToggling);
+        document.addEventListener('keydown', this._closeDropdownOnEscape);
+        if (this.toggleOnHover)
+            document.addEventListener('mouseover', this._hoverToggle);
+    }
+    _toggleScroll() {
+        var _a, _b;
+        if (window.innerWidth >= BREAKPOINTS.xs && this._hasScrollableClassInitially)
+            return;
+        if (window.innerWidth >= BREAKPOINTS.xs) {
+            (_a = this.$dropdownContent) === null || _a === void 0 ? void 0 : _a.classList.remove(SCROLLABLE_CLASS_NAME);
+            return;
+        }
+        if (!this._dropdownContentChildrenHeight && this.$dropdownContent)
+            this._dropdownContentChildrenHeight = [...this.$dropdownContent.children].reduce((totalHeight, currentChild) => {
+                return totalHeight + (parseInt(getComputedStyle(currentChild).height.replace('px', '')) || 0);
+            }, 0);
+        if (this._dropdownContentChildrenHeight > window.innerHeight && !this._hasScrollableClassInitially) {
+            (_b = this.$dropdownContent) === null || _b === void 0 ? void 0 : _b.classList.add(SCROLLABLE_CLASS_NAME);
+        }
+    }
+    _handleFocusOnNextElementAfterDropdown(ev) {
+        ev.preventDefault();
+        this.hide();
+        UiDomUtils.getNextFocusableElement(this.$dropdownToggler || this).focus();
+        return;
+    }
+    _handleFocusFromTogglerForwards(ev) {
+        if (!this.$dropdownContent)
+            return;
+        const trulyFocusableElements = this._getTrulyFocusableElements(this.$dropdownContent);
+        if (trulyFocusableElements.length === 0)
+            return;
+        ev.preventDefault();
+        trulyFocusableElements[0].focus();
+    }
+    _handleFocusFromSentinelEndForwards(ev, $target) {
+        var _a;
+        if (!this.$dropdownContent)
+            return;
+        const trulyFocusableElements = this._getTrulyFocusableElements(this.$dropdownContent);
+        const $lastFocusableElement = trulyFocusableElements.slice(-1)[0];
+        if ($target !== $lastFocusableElement)
+            return;
+        ev.preventDefault();
+        (_a = this.$dropdownToggler) === null || _a === void 0 ? void 0 : _a.focus();
+    }
+    _handleDefaultFocusFromDropdownBackwards(ev) {
+        ev.preventDefault();
+        this.hide();
+        UiDomUtils.getPreviousFocusableElement(this.$dropdownToggler || this).focus();
+    }
+    _handleFocusFromTogglerBackwards(ev, $target) {
+        var _a;
+        if ($target !== this.$dropdownToggler && !((_a = this.$dropdownToggler) === null || _a === void 0 ? void 0 : _a.contains($target)) || !this.$dropdownContent)
+            return;
+        ev.preventDefault();
+        const trulyFocusableElements = this._getTrulyFocusableElements(this.$dropdownContent);
+        if (trulyFocusableElements.length === 0)
+            return;
+        const $lastFocusableElement = trulyFocusableElements.slice(-1)[0];
+        $lastFocusableElement.focus();
+    }
+    _handleFocusFromSentinelStartBackwards(ev, $target) {
+        var _a;
+        if (!this.$dropdownContent)
+            return;
+        const $firstFocusableElement = this._getTrulyFocusableElements(this.$dropdownContent)[0];
+        if ($target !== $firstFocusableElement)
+            return;
+        ev.preventDefault();
+        (_a = this.$dropdownToggler) === null || _a === void 0 ? void 0 : _a.focus();
+    }
+    _getTrulyFocusableElements($container) {
+        const focusableElements = UiDomUtils.getFocusableElements($container);
+        return focusableElements.filter(($el) => this._isElementTrulyFocusable($el));
+    }
+    _isElementTrulyFocusable($el) {
+        const style = window.getComputedStyle($el);
+        if (style.display === 'none' || style.visibility === 'hidden') {
+            return false;
+        }
+        if ($el.nodeName === 'H-PORTAL')
+            return true;
+        const $parent = $el.parentElement;
+        if (!$parent)
+            return true;
+        return this._isElementTrulyFocusable($parent);
+    }
+    _isHoveredWithinDropdown(element) {
+        var _a;
+        if (element === this)
+            return true;
+        if (element === this.$dropdownContent)
+            return true;
+        const isDescendantOfDropdown = element.closest(`${DROPDOWN_CONTAINER_NAME}[name="${this.name}"]`) !== null ||
+            element.closest(`${DROPDOWN_CONTENT_NAME}[name="${this.name}"]`) !== null;
+        if (isDescendantOfDropdown)
+            return true;
+        const $closestDropdownContent = element.closest(DROPDOWN_CONTENT_NAME);
+        const isDescendantOfContent = this.$dropdownContent &&
+            $closestDropdownContent !== null &&
+            !!((_a = this.$nestedDropdownContentElements) === null || _a === void 0 ? void 0 : _a.find((content) => content.name === $closestDropdownContent.name));
+        if (isDescendantOfContent)
+            return true;
+        return false;
+    }
+    _setupInitialDropdownProperties() {
+        if (!this.$dropdownContent)
+            return;
+        if (!this._hasScrollableClassInitially)
+            this._hasScrollableClassInitially = this.$dropdownContent.classList.contains(SCROLLABLE_CLASS_NAME);
+        if (!this.preventFocusTrap)
+            this.$dropdownContent.setAttribute('aria-modal', 'true');
+    }
+    _getDropdownContentWidth() {
+        const isMobileResolution = document.documentElement.clientWidth < BREAKPOINTS.xs;
+        const dropdownContentWidth = this.$dropdownToggler
+            ? this.$dropdownToggler.getBoundingClientRect().width
+            : this.getBoundingClientRect().width;
+        return isMobileResolution ? undefined : dropdownContentWidth;
+    }
+    disconnectedCallback() {
+        var _a;
+        super.disconnectedCallback();
+        (_a = this.$dropdownToggler) === null || _a === void 0 ? void 0 : _a.removeEventListener(DROPDOWN_EVENTS.toggle, this.toggle);
+        window.removeEventListener('resize', this._observeScrollToggling);
+        document.removeEventListener('keydown', this._closeDropdownOnEscape);
+        document.removeEventListener(DROPDOWN_EVENTS.hide, this.hide);
+        if (this.toggleOnHover)
+            document.removeEventListener('mouseover', this._hoverToggle);
+        if (this.opened) {
+            this.opened = false;
+            this._dispatchHideDropdownEvent();
+        }
+    }
+    render() {
+        super.render();
         return html `
             ${this.getSlot('toggler')}
             <h-portal ?disabled="${!this.opened}" @open="${this._positionDropdownContent}" to="${this.portalTarget}" hidden>
                 ${this.getSlot('content')}
             </h-portal>
-        `;
-    }
-};
-__decorate([
-    property({ type: Boolean, reflect: true }),
-    __metadata("design:type", Object)
-], HDropdown.prototype, "opened", void 0);
-__decorate([
-    property({ type: String, reflect: true }),
-    __metadata("design:type", String)
-], HDropdown.prototype, "direction", void 0);
-__decorate([
-    property({ type: Boolean }),
-    __metadata("design:type", Object)
-], HDropdown.prototype, "toggleOnHover", void 0);
-__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: Number }),
-    __metadata("design:type", Object)
-], HDropdown.prototype, "offset", void 0);
-__decorate([
-    property({ type: String, attribute: 'content-width' }),
-    __metadata("design:type", String)
-], HDropdown.prototype, "contentWidth", void 0);
-__decorate([
-    property({ type: String }),
-    __metadata("design:type", Object)
-], HDropdown.prototype, "portalTarget", void 0);
-__decorate([
-    property({ type: String, attribute: 'mobile-position' }),
-    __metadata("design:type", String)
-], HDropdown.prototype, "mobilePosition", void 0);
-__decorate([
-    property({ type: String, attribute: 'id', reflect: true }),
-    __metadata("design:type", Object)
-], HDropdown.prototype, "id", void 0);
-__decorate([
-    property({ type: Boolean, attribute: 'prevent-focus-trap' }),
-    __metadata("design:type", Object)
-], HDropdown.prototype, "preventFocusTrap", void 0);
-__decorate([
-    property({ type: Boolean, attribute: 'no-autofocus' }),
-    __metadata("design:type", Object)
-], HDropdown.prototype, "noAutoFocus", void 0);
-HDropdown = HDropdown_1 = __decorate([
-    phoenixCustomElement('h-dropdown'),
-    __metadata("design:paramtypes", [])
+        `;
+    }
+};
+__decorate([
+    property({ type: Boolean, reflect: true }),
+    __metadata("design:type", Object)
+], HDropdown.prototype, "opened", void 0);
+__decorate([
+    property({ type: String, reflect: true }),
+    __metadata("design:type", Object)
+], HDropdown.prototype, "direction", void 0);
+__decorate([
+    property({ type: Boolean }),
+    __metadata("design:type", Object)
+], HDropdown.prototype, "toggleOnHover", void 0);
+__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: Number }),
+    __metadata("design:type", Object)
+], HDropdown.prototype, "offset", void 0);
+__decorate([
+    property({ type: String, attribute: 'content-width' }),
+    __metadata("design:type", String)
+], HDropdown.prototype, "contentWidth", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", Object)
+], HDropdown.prototype, "portalTarget", void 0);
+__decorate([
+    property({ type: String, attribute: 'mobile-position' }),
+    __metadata("design:type", String)
+], HDropdown.prototype, "mobilePosition", void 0);
+__decorate([
+    property({ type: String, attribute: 'id', reflect: true }),
+    __metadata("design:type", Object)
+], HDropdown.prototype, "id", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'prevent-focus-trap' }),
+    __metadata("design:type", Object)
+], HDropdown.prototype, "preventFocusTrap", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'no-autofocus' }),
+    __metadata("design:type", Object)
+], HDropdown.prototype, "noAutoFocus", void 0);
+HDropdown = HDropdown_1 = __decorate([
+    phoenixCustomElement('h-dropdown'),
+    __metadata("design:paramtypes", [])
 ], HDropdown);
-
 export { HDropdown };
-//# sourceMappingURL=dropdown.js.map
+//# sourceMappingURL=dropdown.js.map