@shoper/phoenix_design_system 1.3.0 → 1.3.2

package/build/cjs/packages/phoenix/src/components/color_swatches/show-more/show_more.js

@@ -0,0 +1,38 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib_es6 = require('../../../../../../external/tslib/tslib.es6.js');
+var phoenix_light_lit_element = require('../../../core/phoenix_light_lit_element/phoenix_light_lit_element.js');
+var phoenix_custom_element = require('../../../core/decorators/phoenix_custom_element.js');
+var btn_controller = require('../../../controllers/btn_controller/btn_controller.js');
+var show_more_constants = require('./show_more_constants.js');
+
+exports.HColorSwatchesShowMore = class HColorSwatchesShowMore extends phoenix_light_lit_element.PhoenixLightLitElement {
+    constructor() {
+        super();
+        this._dispatchClickedEvent = () => {
+            this.dispatchEvent(new CustomEvent(show_more_constants.SHOW_MORE_EVENT_NAMES.showMore, {
+                bubbles: true
+            }));
+        };
+        this._btnController = new btn_controller.BtnController(this, this._dispatchClickedEvent);
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.setupEvents();
+        this._addCssClasses();
+        this.classList.add(show_more_constants.SHOW_MORE_CSS_CLASS);
+    }
+    _addCssClasses() {
+        this.classList.add(show_more_constants.SHOW_MORE_CSS_CLASS);
+    }
+    setupEvents() {
+        this.addEventListener('click', this._dispatchClickedEvent);
+    }
+};
+exports.HColorSwatchesShowMore = tslib_es6.__decorate([
+    phoenix_custom_element.phoenixCustomElement('h-color-swatches-show-more'),
+    tslib_es6.__metadata("design:paramtypes", [])
+], exports.HColorSwatchesShowMore);
+//# sourceMappingURL=show_more.js.map

package/build/cjs/packages/phoenix/src/components/color_swatches/show-more/show_more.js.map

@@ -0,0 +1 @@
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA,wBAAwB,+CAAmD;AAC3E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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/color_swatches/show-more/show_more_constants.js

@@ -0,0 +1,12 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const SHOW_MORE_CSS_CLASS = 'color-swatches-show-more';
+const SHOW_MORE_EVENT_NAMES = {
+    showMore: 'colorSwatchesShowMore'
+};
+
+exports.SHOW_MORE_CSS_CLASS = SHOW_MORE_CSS_CLASS;
+exports.SHOW_MORE_EVENT_NAMES = SHOW_MORE_EVENT_NAMES;
+//# sourceMappingURL=show_more_constants.js.map

package/build/cjs/packages/phoenix/src/components/color_swatches/show-more/show_more_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;"}

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

@@ -0,0 +1,390 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib_es6 = require('../../../../../external/tslib/tslib.es6.js');
+var utilities = require('@dreamcommerce/utilities');
+var phoenix_light_lit_element = require('../../core/phoenix_light_lit_element/phoenix_light_lit_element.js');
+var phoenix_custom_element = require('../../core/decorators/phoenix_custom_element.js');
+var decorators_js = require('@lit/reactive-element/decorators.js');
+var keystrokes_controller = require('../../controllers/keystrokes_controller/keystrokes_controller.js');
+var litHtml = require('lit-html');
+var global_constants = require('../../global_constants.js');
+var dropdown_constants = require('./dropdown_constants.js');
+var relative_position_controller_constants = require('../../controllers/relative_position_controller/relative_position_controller_constants.js');
+var portal_constants = require('../portal/portal_constants.js');
+var backdrop_controller = require('../backdrop/controller/backdrop_controller.js');
+var click_outside_controller = require('../../controllers/click_outside_controller/click_outside_controller.js');
+var throttle = require('../../../../../external/lodash/throttle.js');
+var relative_position_controller = require('../../controllers/relative_position_controller/relative_position_controller.js');
+
+var HDropdown_1;
+exports.HDropdown = HDropdown_1 = class HDropdown extends phoenix_light_lit_element.PhoenixLightLitElement {
+    constructor() {
+        super();
+        this.opened = false;
+        this.direction = relative_position_controller_constants.DIRECTIONS.bottomCenter;
+        this.toggleOnHover = false;
+        this.name = '';
+        this.transition = 'direction';
+        this.offset = 0;
+        this.portalTarget = dropdown_constants.DEFAULT_DROPDOWN_PORTAL_NAME;
+        this._backdropController = new backdrop_controller.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();
+            utilities.UiDomUtils.setFocusToFirstFocusableElementInContainer(this.$dropdownContent);
+        };
+        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_constants.DROPDOWN_CONTENT_VISIBLE_CLASS, `${dropdown_constants.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_constants.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_constants.DROPDOWN_CONTENT_SHOW}-${this.transition}-start`, `${dropdown_constants.DROPDOWN_CONTENT_SHOW}-${this.transition}-end`);
+                        this._toggleScroll();
+                        resolve();
+                    }, transitionDuration);
+                });
+            });
+        };
+        this._dispatchShowDropdownEvent = () => {
+            const showDropdownEvent = new Event(dropdown_constants.DROPDOWN_EVENTS.showed, {
+                bubbles: true
+            });
+            this.dispatchEvent(showDropdownEvent);
+            if (window.innerWidth >= global_constants.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_constants.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;
+                if (ev && ev.detail.name !== this.name)
+                    return;
+                (_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_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.hidden, {
+                bubbles: true
+            });
+            this.dispatchEvent(hideDropdownEvent);
+            if (window.innerWidth >= global_constants.BREAKPOINTS.xs)
+                return;
+            this._backdropController.hide();
+        };
+        this._handleDisabledPositioning = () => {
+            if (this.opened)
+                this._backdropController.show();
+        };
+        this._handleEnabledPositioning = () => {
+            this._backdropController.hide();
+        };
+        this._observeScrollToggling = throttle['default'](() => {
+            this._toggleScroll();
+        }, relative_position_controller_constants.DEFAULT_THROTTLE_WAIT_TIME);
+        this._closeDropdownOnEscape = async (ev) => {
+            const hasEscapeBeenPressed = ev.key.toLowerCase() === 'escape';
+            if (!hasEscapeBeenPressed)
+                return;
+            await this.hide();
+        };
+        this._handleForwardFocus = async (ev) => {
+            if (!this.opened || ev.shiftKey)
+                return;
+            const $focusableElementsWithinDropdownContent = utilities.UiDomUtils.getFocusableElements(this.$dropdownContent).filter((element) => element.closest(dropdown_constants.DROPDOWN_CONTENT_NAME) === this.$dropdownContent);
+            const doesNotHaveFocusableElementsInsideContent = $focusableElementsWithinDropdownContent.length <= 0 && this.opened;
+            const indexOfCurrentlyFocusedElement = $focusableElementsWithinDropdownContent.indexOf(document.activeElement);
+            const isActiveElementLastFocusableElement = indexOfCurrentlyFocusedElement === $focusableElementsWithinDropdownContent.length - 1;
+            if (doesNotHaveFocusableElementsInsideContent || isActiveElementLastFocusableElement)
+                this._handleFocusOnNextElement(ev);
+        };
+        this._handleFocusOnNextElement = async (ev) => {
+            var _a;
+            ev.preventDefault();
+            const $focusableElements = utilities.UiDomUtils.getFocusableElements(document.body);
+            const indexOfDropdownToggler = $focusableElements.indexOf(this.$dropdownToggler);
+            const $nextElementToFocus = (_a = $focusableElements[indexOfDropdownToggler + 1]) !== null && _a !== void 0 ? _a : $focusableElements[0];
+            await this._hideDropdownsSequentially();
+            await this.hide();
+            this._focusOnNextElementAfterToggler($nextElementToFocus);
+        };
+        this._focusOnNextElementAfterToggler = ($elementToFocus) => {
+            var _a;
+            const isTogglerLastChildOfPreviousDropdown = ($elementToFocus === null || $elementToFocus === void 0 ? void 0 : $elementToFocus.closest(dropdown_constants.DROPDOWN_CONTENT_NAME)) === this.$dropdownContent;
+            if (isTogglerLastChildOfPreviousDropdown) {
+                (_a = this.$dropdownToggler) === null || _a === void 0 ? void 0 : _a.focus();
+                return;
+            }
+            $elementToFocus === null || $elementToFocus === void 0 ? void 0 : $elementToFocus.focus();
+        };
+        this._handleBackwardFocus = async (ev) => {
+            var _a;
+            const $firstFocusableElement = this.$dropdownContent && utilities.UiDomUtils.getFocusableElement(this.$dropdownContent);
+            if (document.activeElement !== $firstFocusableElement)
+                return;
+            ev.preventDefault();
+            (_a = this.$dropdownToggler) === null || _a === void 0 ? void 0 : _a.focus();
+            await this._hideDropdownsSequentially();
+        };
+        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();
+                utilities.UiDomUtils.setFocusToFirstFocusableElementInContainer(this.$dropdownContent);
+                return;
+            }
+            if (!isHoveredWithinDropdown && this.opened)
+                await this._hideDropdownsSequentially();
+        };
+        this.isOpened = () => this.opened;
+        this._positionDropdownContent = () => {
+            if (this.contentWidth === dropdown_constants.DROPDOWN_CONTENT_WIDTH.full)
+                this._setDropdownContentWidth(this._getDropdownContentWidth());
+            requestAnimationFrame(() => {
+                this.opened && window.innerWidth < global_constants.BREAKPOINTS.xs
+                    ? this._positionController.disableRelativePositioning()
+                    : this._positionController.position();
+            });
+        };
+        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 keystrokes_controller.KeystrokesController({
+            host: this,
+            target: document.body,
+            keys: ['tab'],
+            callback: this._handleForwardFocus
+        });
+        new keystrokes_controller.KeystrokesController({
+            host: this,
+            target: document.body,
+            keys: [['shift', 'tab']],
+            callback: this._handleBackwardFocus
+        });
+    }
+    async connectedCallback() {
+        super.connectedCallback();
+        HDropdown_1._appendDropdownPortal();
+        if (!this.$dropdownContent)
+            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.$nestedDropdownContentElements)
+            this.$nestedDropdownContentElements = [...$nestedDropdown.querySelectorAll(dropdown_constants.DROPDOWN_CONTENT_NAME)];
+        if (!this._positionController)
+            this._positionController = new relative_position_controller.RelativePositionController({
+                host: this,
+                direction: this.direction,
+                relativeElement: this.$dropdownToggler,
+                elementToPosition: this.$dropdownContent,
+                disablePositioningOnCondition: () => window.innerWidth < global_constants.BREAKPOINTS.xs || !this.opened,
+                portalElementsNames: [dropdown_constants.DROPDOWN_CONTENT_NAME],
+                offset: this.offset
+            });
+        if (!this._clickOutsideController)
+            this._clickOutsideController = new click_outside_controller.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="${dropdown_constants.DEFAULT_DROPDOWN_PORTAL_NAME}"]`);
+        if (!$dropdownPortalTarget) {
+            const $portalTarget = document.createElement(portal_constants.PORTAL_TARGET_COMPONENT_NAME);
+            $portalTarget.setAttribute(portal_constants.PORTAL_TARGET_NAME_PROP, dropdown_constants.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_constants.DROPDOWN_CONTENT_NAME && element.tagName.toLowerCase() === dropdown_constants.DROPDOWN_CONTAINER_NAME)
+            return element;
+        return this._findRootDropdown(element.parentElement || document.body);
+    }
+    _setupListeners() {
+        this.addEventListener(relative_position_controller_constants.RELATIVE_POSITION_CONTROLLER_EVENTS.disabledPositioning, this._handleDisabledPositioning);
+        this.addEventListener(relative_position_controller_constants.RELATIVE_POSITION_CONTROLLER_EVENTS.enabledPositioning, this._handleEnabledPositioning);
+        this.addEventListener(dropdown_constants.DROPDOWN_EVENTS.toggle, this.toggle);
+        document.addEventListener(dropdown_constants.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 >= global_constants.BREAKPOINTS.xs && this._hasScrollableClassInitially)
+            return;
+        if (window.innerWidth >= global_constants.BREAKPOINTS.xs) {
+            (_a = this.$dropdownContent) === null || _a === void 0 ? void 0 : _a.classList.remove(global_constants.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(global_constants.SCROLLABLE_CLASS_NAME);
+        }
+    }
+    _isHoveredWithinDropdown(element) {
+        var _a;
+        if (element === this)
+            return true;
+        if (element === this.$dropdownContent)
+            return true;
+        const isDescendantOfDropdown = element.closest(`${dropdown_constants.DROPDOWN_CONTAINER_NAME}[name="${this.name}"]`) !== null ||
+            element.closest(`${dropdown_constants.DROPDOWN_CONTENT_NAME}[name="${this.name}"]`) !== null;
+        if (isDescendantOfDropdown)
+            return true;
+        const $closestDropdownContent = element.closest(dropdown_constants.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(global_constants.SCROLLABLE_CLASS_NAME);
+    }
+    _getDropdownContentWidth() {
+        return document.documentElement.clientWidth < global_constants.BREAKPOINTS.xs ? undefined : this.getBoundingClientRect().width;
+    }
+    disconnectedCallback() {
+        var _a;
+        super.disconnectedCallback();
+        (_a = this.$dropdownToggler) === null || _a === void 0 ? void 0 : _a.removeEventListener(dropdown_constants.DROPDOWN_EVENTS.toggle, this.toggle);
+        window.removeEventListener('resize', this._observeScrollToggling);
+        document.removeEventListener('keydown', this._closeDropdownOnEscape);
+        document.removeEventListener(dropdown_constants.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 litHtml.html `
+            ${this.getSlot('toggler')}
+            <h-portal ?disabled="${!this.opened}" @portal.open="${this._positionDropdownContent}" to="${this.portalTarget}" hidden>
+                ${this.getSlot('content')}
+            </h-portal>
+        `;
+    }
+};
+tslib_es6.__decorate([
+    decorators_js.property({ type: Boolean, reflect: true }),
+    tslib_es6.__metadata("design:type", Object)
+], exports.HDropdown.prototype, "opened", void 0);
+tslib_es6.__decorate([
+    decorators_js.property({ type: String, reflect: true }),
+    tslib_es6.__metadata("design:type", String)
+], exports.HDropdown.prototype, "direction", void 0);
+tslib_es6.__decorate([
+    decorators_js.property({ type: Boolean }),
+    tslib_es6.__metadata("design:type", Object)
+], exports.HDropdown.prototype, "toggleOnHover", void 0);
+tslib_es6.__decorate([
+    decorators_js.property({ type: String }),
+    tslib_es6.__metadata("design:type", Object)
+], exports.HDropdown.prototype, "name", void 0);
+tslib_es6.__decorate([
+    decorators_js.property({ type: String }),
+    tslib_es6.__metadata("design:type", Object)
+], exports.HDropdown.prototype, "transition", void 0);
+tslib_es6.__decorate([
+    decorators_js.property({ type: Number }),
+    tslib_es6.__metadata("design:type", Object)
+], exports.HDropdown.prototype, "offset", void 0);
+tslib_es6.__decorate([
+    decorators_js.property({ type: String, attribute: 'content-width' }),
+    tslib_es6.__metadata("design:type", String)
+], exports.HDropdown.prototype, "contentWidth", void 0);
+tslib_es6.__decorate([
+    decorators_js.property({ type: String }),
+    tslib_es6.__metadata("design:type", Object)
+], exports.HDropdown.prototype, "portalTarget", void 0);
+exports.HDropdown = HDropdown_1 = tslib_es6.__decorate([
+    phoenix_custom_element.phoenixCustomElement('h-dropdown'),
+    tslib_es6.__metadata("design:paramtypes", [])
+], exports.HDropdown);
+//# sourceMappingURL=dropdown.js.map

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

@@ -0,0 +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,uBAAuB,4CAAgD;AACvE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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

@@ -0,0 +1,43 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const DROPDOWN_NAME = 'dropdown';
+const DROPDOWN_CONTAINER_NAME = `h-${DROPDOWN_NAME}`;
+const DROPDOWN_TOGGLER_NAME = `${DROPDOWN_CONTAINER_NAME}-toggler`;
+const DROPDOWN_CONTENT_NAME = `${DROPDOWN_CONTAINER_NAME}-content`;
+const DEFAULT_DROPDOWN_PORTAL_NAME = 'dropdown-portal';
+const DROPDOWN_EVENT_NAME = 'dropdown';
+const DROPDOWN_EVENTS = {
+    toggle: `${DROPDOWN_EVENT_NAME}.toggle`,
+    show: `${DROPDOWN_EVENT_NAME}.show`,
+    hide: `${DROPDOWN_EVENT_NAME}.hide`,
+    showed: `${DROPDOWN_EVENT_NAME}.showed`,
+    hidden: `${DROPDOWN_EVENT_NAME}.hidden`
+};
+const DROPDOWN_CSS_CLASS = 'dropdown';
+const DROPDOWN_CONTENT_CSS_CLASS = `${DROPDOWN_CSS_CLASS}__content`;
+const DROPDOWN_TOGGLER_CSS_CLASS = `${DROPDOWN_CSS_CLASS}__toggler`;
+const DROPDOWN_CONTENT_VISIBLE_CLASS = `${DROPDOWN_CONTENT_CSS_CLASS}_visible`;
+const DROPDOWN_CONTENT_SHOW = `${DROPDOWN_CONTENT_CSS_CLASS}_show`;
+const DROPDOWN_CONTENT_HIDE = `${DROPDOWN_CONTENT_CSS_CLASS}_hide`;
+const DROPDOWN_TOGGLE_ON_HOVER_ATTRIBUTE_NAME = 'toggleOnHover';
+const DROPDOWN_CONTENT_WIDTH = {
+    full: 'full'
+};
+
+exports.DEFAULT_DROPDOWN_PORTAL_NAME = DEFAULT_DROPDOWN_PORTAL_NAME;
+exports.DROPDOWN_CONTAINER_NAME = DROPDOWN_CONTAINER_NAME;
+exports.DROPDOWN_CONTENT_CSS_CLASS = DROPDOWN_CONTENT_CSS_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_CONTENT_WIDTH = DROPDOWN_CONTENT_WIDTH;
+exports.DROPDOWN_CSS_CLASS = DROPDOWN_CSS_CLASS;
+exports.DROPDOWN_EVENTS = DROPDOWN_EVENTS;
+exports.DROPDOWN_NAME = DROPDOWN_NAME;
+exports.DROPDOWN_TOGGLER_CSS_CLASS = DROPDOWN_TOGGLER_CSS_CLASS;
+exports.DROPDOWN_TOGGLER_NAME = DROPDOWN_TOGGLER_NAME;
+exports.DROPDOWN_TOGGLE_ON_HOVER_ATTRIBUTE_NAME = DROPDOWN_TOGGLE_ON_HOVER_ATTRIBUTE_NAME;
+//# sourceMappingURL=dropdown_constants.js.map

package/build/cjs/packages/phoenix/src/components/dropdown/dropdown_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;AACA;AACA;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_content.js

@@ -0,0 +1,39 @@
+'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/phoenix_light_lit_element.js');
+var phoenix_custom_element = require('../../core/decorators/phoenix_custom_element.js');
+var dropdown_constants = require('./dropdown_constants.js');
+
+exports.HDropdownContent = class HDropdownContent extends phoenix_light_lit_element.PhoenixLightLitElement {
+    constructor() {
+        super();
+        this.name = '';
+        this.slot = this.hasAttribute('slot') ? this.slot : 'content';
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.classList.add(dropdown_constants.DROPDOWN_CONTENT_CSS_CLASS);
+        this.setAttribute('role', 'menu');
+        Array.from(this.children).forEach((element) => {
+            element.setAttribute('role', 'menuitem');
+        });
+    }
+    render() {
+        super.render();
+        return lit.html ` <div role="dialog">${this.getSlot('content')}</div> `;
+    }
+};
+tslib_es6.__decorate([
+    decorators.property({ type: String }),
+    tslib_es6.__metadata("design:type", Object)
+], exports.HDropdownContent.prototype, "name", void 0);
+exports.HDropdownContent = tslib_es6.__decorate([
+    phoenix_custom_element.phoenixCustomElement('h-dropdown-content'),
+    tslib_es6.__metadata("design:paramtypes", [])
+], exports.HDropdownContent);
+//# sourceMappingURL=dropdown_content.js.map

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

@@ -0,0 +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;"}

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

@@ -0,0 +1,81 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib_es6 = require('../../../../../external/tslib/tslib.es6.js');
+var decorators = require('lit/decorators');
+var utilities = require('@dreamcommerce/utilities');
+var phoenix_light_lit_element = require('../../core/phoenix_light_lit_element/phoenix_light_lit_element.js');
+var phoenix_custom_element = require('../../core/decorators/phoenix_custom_element.js');
+var btn_controller = require('../../controllers/btn_controller/btn_controller.js');
+var global_constants = require('../../global_constants.js');
+var dropdown_constants = require('./dropdown_constants.js');
+var toggle_element_aria_controller = require('../../controllers/toggle_element_aria_controller/toggle_element_aria_controller.js');
+
+exports.HDropdownToggler = class HDropdownToggler extends phoenix_light_lit_element.PhoenixLightLitElement {
+    constructor() {
+        super();
+        this.name = '';
+        this._dispatchToggleDropdownEventWithKeyboard = (ev) => {
+            ev.stopImmediatePropagation();
+            this._dispatchToggleDropdownEvent(ev);
+        };
+        this._dispatchToggleDropdownEventOnMobile = (ev) => {
+            if (window.innerWidth > global_constants.BREAKPOINTS.xs)
+                return;
+            this._dispatchToggleDropdownEvent(ev);
+        };
+        this._dispatchToggleDropdownEvent = (ev) => {
+            ev.preventDefault();
+            const toggleDropdownEvent = new CustomEvent(dropdown_constants.DROPDOWN_EVENTS.toggle, {
+                bubbles: true
+            });
+            this.dispatchEvent(toggleDropdownEvent);
+        };
+        this._handleFocusToOpenedDropdown = async (ev) => {
+            if (ev.target !== this)
+                return;
+            const isOpened = this._$dropdown.isOpened();
+            if (!isOpened)
+                return;
+            const $dropdownContent = document.querySelector(`${dropdown_constants.DROPDOWN_CONTENT_NAME}[name="${this.name}"]`);
+            if (!$dropdownContent)
+                return;
+            ev.preventDefault();
+            utilities.UiDomUtils.setFocusToFirstFocusableElementInContainer($dropdownContent);
+        };
+        this.slot = this.hasAttribute('slot') ? this.slot : 'toggler';
+        this.className = `${dropdown_constants.DROPDOWN_TOGGLER_CSS_CLASS} ${this.className}`;
+    }
+    connectedCallback() {
+        var _a;
+        super.connectedCallback();
+        this._btnController = new btn_controller.BtnController(this, this._dispatchToggleDropdownEventWithKeyboard);
+        this._$dropdown = this.closest(dropdown_constants.DROPDOWN_CONTAINER_NAME);
+        if (this._$dropdown.isOpened)
+            this._toggleElementAriaController = new toggle_element_aria_controller.ToggleElementAriaController({
+                host: this,
+                initialAriaExpandedValue: this._$dropdown.isOpened()
+            });
+        document.addEventListener('keydown', this._handleFocusToOpenedDropdown);
+        const hasToggleOnHover = (_a = this._$dropdown) === null || _a === void 0 ? void 0 : _a.hasAttribute(dropdown_constants.DROPDOWN_TOGGLE_ON_HOVER_ATTRIBUTE_NAME);
+        if (hasToggleOnHover) {
+            this.addEventListener('click', this._dispatchToggleDropdownEventOnMobile);
+            return;
+        }
+        this.addEventListener('click', this._dispatchToggleDropdownEvent);
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        document.removeEventListener('keydown', this._handleFocusToOpenedDropdown);
+    }
+};
+tslib_es6.__decorate([
+    decorators.property({ type: String, reflect: true }),
+    tslib_es6.__metadata("design:type", Object)
+], exports.HDropdownToggler.prototype, "name", void 0);
+exports.HDropdownToggler = tslib_es6.__decorate([
+    phoenix_custom_element.phoenixCustomElement('h-dropdown-toggler'),
+    tslib_es6.__metadata("design:paramtypes", [])
+], exports.HDropdownToggler);
+//# sourceMappingURL=dropdown_toggler.js.map

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

@@ -0,0 +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;"}