@shoper/phoenix_design_system 0.9.1 → 0.10.1-1

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

@@ -0,0 +1,47 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib_es6 = require('../../../../../external/tslib/tslib.es6.js');
+var context_provider_controller = require('../../core/context/context_provider_controller.js');
+var decorators = require('lit/decorators');
+var phoenix_light_lit_element = require('../../core/phoenix_light_lit_element.js');
+var phoenix_custom_element = require('../../core/decorators/phoenix_custom_element.js');
+var accordion_constants = require('./accordion_constants.js');
+var observable = require('../../core/observer/observable.js');
+
+exports.HAccordion = class HAccordion extends phoenix_light_lit_element.PhoenixLightLitElement {
+    constructor() {
+        super();
+        this.disabled = false;
+        this._accordionSubject = new observable.Subject();
+        this._accordionContext = new context_provider_controller.ContextProviderController(this);
+        this._accordionContext.provide(accordion_constants.ACCORDION_CONTEXTS.accordionProps, this._accordionSubject);
+    }
+    enable() {
+        this.disabled = false;
+    }
+    disable() {
+        this.disabled = true;
+    }
+    updated() {
+        this.notify();
+    }
+    notify() {
+        this._accordionSubject.notify(this._getProps());
+    }
+    _getProps() {
+        return {
+            disabled: this.disabled
+        };
+    }
+};
+tslib_es6.__decorate([
+    decorators.property({ type: Boolean, reflect: true }),
+    tslib_es6.__metadata("design:type", Object)
+], exports.HAccordion.prototype, "disabled", void 0);
+exports.HAccordion = tslib_es6.__decorate([
+    phoenix_custom_element.phoenixCustomElement('h-accordion'),
+    tslib_es6.__metadata("design:paramtypes", [])
+], exports.HAccordion);
+//# sourceMappingURL=accordion.js.map

package/build/cjs/packages/phoenix/src/components/accordion/accordion.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;"}

package/build/cjs/packages/phoenix/src/components/accordion/accordion_constants.js

@@ -0,0 +1,15 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const ACCORDION_EVENTS = {
+    toggle: 'toggle'
+};
+const ACCORDION_CONTEXTS = {
+    accordionProps: 'accordionPropsSubject',
+    accordionGroupProps: 'accordionGroupPropsSubject'
+};
+
+exports.ACCORDION_CONTEXTS = ACCORDION_CONTEXTS;
+exports.ACCORDION_EVENTS = ACCORDION_EVENTS;
+//# sourceMappingURL=accordion_constants.js.map

package/build/cjs/packages/phoenix/src/components/accordion/accordion_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/components/accordion/accordion_content.js

@@ -0,0 +1,65 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib_es6 = require('../../../../../external/tslib/tslib.es6.js');
+var context_consumer_controller = require('../../core/context/context_consumer_controller.js');
+var decorators = require('lit/decorators');
+var phoenix_light_lit_element = require('../../core/phoenix_light_lit_element.js');
+var phoenix_custom_element = require('../../core/decorators/phoenix_custom_element.js');
+var accordion_constants = require('./accordion_constants.js');
+var observer = require('../../core/observer/observer.js');
+var transition_controller = require('../../controllers/transition_controller/transition_controller.js');
+
+exports.HAccordionContent = class HAccordionContent extends phoenix_light_lit_element.PhoenixLightLitElement {
+    constructor() {
+        super();
+        this.transitionName = 'accordion-toggle';
+        this._expand = () => {
+            this._setHeight(this._originalHeight);
+        };
+        this._collapse = () => {
+            this._setHeight('0px');
+        };
+        this.setAttribute('role', 'region');
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this._contextConsumer = new context_consumer_controller.ContextConsumerController(this);
+        this._transitionController = new transition_controller.TransitionController(this, this.transitionName);
+        this._setStylingOptions();
+        this._subscribeObserver();
+    }
+    _setStylingOptions() {
+        this._originalHeight = `${this.getBoundingClientRect().height}px`;
+        this.style.height = this._originalHeight;
+    }
+    _subscribeObserver() {
+        this._accordionGroupProps = this._contextConsumer.consume(accordion_constants.ACCORDION_CONTEXTS.accordionGroupProps);
+        this._accordionGroupPropsObserver = new observer.Observer((accordionProps) => {
+            this._setAttributes(accordionProps);
+            accordionProps.opened ? this._transitionController.show(this._expand) : this._transitionController.hide(this._collapse);
+        });
+        this._accordionGroupProps.subscribe(this._accordionGroupPropsObserver);
+    }
+    _setHeight(height) {
+        this.style.height = height;
+    }
+    _setAttributes({ regionId, controlsId }) {
+        this.setAttribute('id', controlsId);
+        this.setAttribute('labelledby', regionId);
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this._accordionGroupProps.unsubscribe(this._accordionGroupPropsObserver);
+    }
+};
+tslib_es6.__decorate([
+    decorators.property(),
+    tslib_es6.__metadata("design:type", Object)
+], exports.HAccordionContent.prototype, "transitionName", void 0);
+exports.HAccordionContent = tslib_es6.__decorate([
+    phoenix_custom_element.phoenixCustomElement('h-accordion-content'),
+    tslib_es6.__metadata("design:paramtypes", [])
+], exports.HAccordionContent);
+//# sourceMappingURL=accordion_content.js.map

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

@@ -1 +1 @@
-{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA,wBAAwB,4CAAgD;AACxE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA,wBAAwB,4CAAgD;AACxE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

package/build/cjs/packages/phoenix/src/components/accordion/accordion_group.js

@@ -0,0 +1,118 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib_es6 = require('../../../../../external/tslib/tslib.es6.js');
+var context_provider_controller = require('../../core/context/context_provider_controller.js');
+var context_consumer_controller = require('../../core/context/context_consumer_controller.js');
+var decorators = require('lit/decorators');
+var phoenix_light_lit_element = require('../../core/phoenix_light_lit_element.js');
+var phoenix_custom_element = require('../../core/decorators/phoenix_custom_element.js');
+var accordion_constants = require('./accordion_constants.js');
+var observer = require('../../core/observer/observer.js');
+var observable = require('../../core/observer/observable.js');
+
+exports.HAccordionGroup = class HAccordionGroup extends phoenix_light_lit_element.PhoenixLightLitElement {
+    constructor() {
+        super();
+        this.opened = false;
+        this._isDisabled = false;
+        this._regionId = self.crypto.randomUUID();
+        this._controlsId = self.crypto.randomUUID();
+        this._accordionToggle = () => {
+            this.toggle();
+        };
+        this._accordionGroupPropsSubject = new observable.Subject();
+        this._accordionGroupContext = new context_provider_controller.ContextProviderController(this);
+        this._accordionGroupContext.provide(accordion_constants.ACCORDION_CONTEXTS.accordionGroupProps, this._accordionGroupPropsSubject);
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this._accordionContextConsumer = new context_consumer_controller.ContextConsumerController(this);
+        this._subscribeObserver();
+        this.addEventListener(accordion_constants.ACCORDION_EVENTS.toggle, this._accordionToggle);
+    }
+    _subscribeObserver() {
+        this._accordionProps = this._accordionContextConsumer.consume(accordion_constants.ACCORDION_CONTEXTS.accordionProps);
+        this._accordionPropsObserver = new observer.Observer((accordionProps) => {
+            const hasAccordionBeenDisabled = accordionProps.disabled;
+            if (hasAccordionBeenDisabled) {
+                this.disable();
+                return;
+            }
+            const hasAccordionBeenEnabled = accordionProps.disabled === false;
+            if (hasAccordionBeenEnabled) {
+                this.enable();
+                return;
+            }
+        });
+        this._accordionProps.subscribe(this._accordionPropsObserver);
+    }
+    disconnectedCallback() {
+        this._accordionProps.unsubscribe(this._accordionPropsObserver);
+        this.removeEventListener(accordion_constants.ACCORDION_EVENTS.toggle, this._accordionToggle);
+    }
+    show() {
+        this.opened = true;
+    }
+    hide() {
+        this.opened = false;
+    }
+    toggle() {
+        this.opened = !this.opened;
+    }
+    enable() {
+        if (this._isDisabled) {
+            this.addEventListener(accordion_constants.ACCORDION_EVENTS.toggle, this._accordionToggle);
+            this.hide();
+            this._isDisabled = false;
+        }
+    }
+    disable() {
+        if (!this._isDisabled) {
+            this.removeEventListener(accordion_constants.ACCORDION_EVENTS.toggle, this._accordionToggle);
+            this.show();
+            this._isDisabled = true;
+        }
+    }
+    notify() {
+        this._accordionGroupPropsSubject.notify(this._getProps());
+    }
+    updated(_changedProperties) {
+        if (_changedProperties.has('opened') ||
+            _changedProperties.has('_isDisabled') ||
+            _changedProperties.has('_regionId') ||
+            _changedProperties.has('_controlsId')) {
+            this.notify();
+        }
+    }
+    _getProps() {
+        return {
+            opened: this.opened,
+            disabled: this._isDisabled,
+            regionId: this._regionId,
+            controlsId: this._controlsId
+        };
+    }
+};
+tslib_es6.__decorate([
+    decorators.property({ type: Boolean, reflect: true }),
+    tslib_es6.__metadata("design:type", Object)
+], exports.HAccordionGroup.prototype, "opened", void 0);
+tslib_es6.__decorate([
+    decorators.state(),
+    tslib_es6.__metadata("design:type", Object)
+], exports.HAccordionGroup.prototype, "_isDisabled", void 0);
+tslib_es6.__decorate([
+    decorators.state(),
+    tslib_es6.__metadata("design:type", Object)
+], exports.HAccordionGroup.prototype, "_regionId", void 0);
+tslib_es6.__decorate([
+    decorators.state(),
+    tslib_es6.__metadata("design:type", Object)
+], exports.HAccordionGroup.prototype, "_controlsId", void 0);
+exports.HAccordionGroup = tslib_es6.__decorate([
+    phoenix_custom_element.phoenixCustomElement('h-accordion-group'),
+    tslib_es6.__metadata("design:paramtypes", [])
+], exports.HAccordionGroup);
+//# sourceMappingURL=accordion_group.js.map

package/build/cjs/packages/phoenix/src/components/accordion/accordion_group.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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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/accordion/accordion_toggler.js

@@ -0,0 +1,46 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib_es6 = require('../../../../../external/tslib/tslib.es6.js');
+var context_consumer_controller = require('../../core/context/context_consumer_controller.js');
+var phoenix_light_lit_element = require('../../core/phoenix_light_lit_element.js');
+var phoenix_custom_element = require('../../core/decorators/phoenix_custom_element.js');
+var accordion_constants = require('./accordion_constants.js');
+var observer = require('../../core/observer/observer.js');
+var btn_controller = require('../../controllers/btn_controller.js');
+
+exports.HAccordionToggler = class HAccordionToggler extends phoenix_light_lit_element.PhoenixLightLitElement {
+    constructor() {
+        super();
+        this._emitTogglerClicked = () => {
+            const togglerClickedEvent = new CustomEvent(accordion_constants.ACCORDION_EVENTS.toggle, {
+                bubbles: true
+            });
+            this.dispatchEvent(togglerClickedEvent);
+        };
+        this._btnController = new btn_controller.BtnController(this, this._emitTogglerClicked);
+        this._contextConsumer = new context_consumer_controller.ContextConsumerController(this);
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this._accordionGroupProps = this._contextConsumer.consume(accordion_constants.ACCORDION_CONTEXTS.accordionGroupProps);
+        this._accordionGroupPropsObserver = new observer.Observer((accordionProps) => this._setAttributes(accordionProps));
+        this._accordionGroupProps.subscribe(this._accordionGroupPropsObserver);
+        this.addEventListener('click', this._emitTogglerClicked);
+    }
+    _setAttributes({ regionId, opened, controlsId, disabled }) {
+        this.setAttribute('id', regionId);
+        this.setAttribute('aria-expanded', opened ? 'true' : 'false');
+        this.setAttribute('aria-controls', controlsId);
+        this.setAttribute('aria-disabled', disabled ? 'true' : 'false');
+    }
+    disconnectedCallback() {
+        this._accordionGroupProps.unsubscribe(this._accordionGroupPropsObserver);
+    }
+};
+exports.HAccordionToggler = tslib_es6.__decorate([
+    phoenix_custom_element.phoenixCustomElement('h-accordion-toggler'),
+    tslib_es6.__metadata("design:paramtypes", [])
+], exports.HAccordionToggler);
+//# sourceMappingURL=accordion_toggler.js.map

package/build/cjs/packages/phoenix/src/components/accordion/accordion_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;"}

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

@@ -0,0 +1,91 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib_es6 = require('../../../../../external/tslib/tslib.es6.js');
+var lit = require('lit');
+var decorators = require('lit/decorators');
+var phoenix_light_lit_element = require('../../core/phoenix_light_lit_element.js');
+var phoenix_custom_element = require('../../core/decorators/phoenix_custom_element.js');
+var backdrop_constants = require('./backdrop_constants.js');
+
+exports.HBackdrop = class HBackdrop extends phoenix_light_lit_element.PhoenixLightLitElement {
+    constructor() {
+        super();
+        this.visible = false;
+        this.onClickArray = [];
+        this._backdropLayerCounter = 0;
+        this._appendBackdrop = () => {
+            const $backdrop = document.querySelector(backdrop_constants.BACKDROP_NAME);
+            if (!$backdrop) {
+                const $newBackdrop = document.createElement(backdrop_constants.BACKDROP_NAME);
+                document.body.appendChild($newBackdrop);
+            }
+        };
+        this._show = () => {
+            this._backdropLayerCounter += 1;
+            this.visible = true;
+        };
+        this._hide = () => {
+            this._backdropLayerCounter -= 1;
+            if (this._backdropLayerCounter !== 0)
+                return;
+            this.visible = false;
+        };
+        this._dispatchBackdropClickedEvent = () => {
+            const backdropClickedEvent = new CustomEvent(backdrop_constants.BACKDROP_EVENTS.clicked, {
+                bubbles: true
+            });
+            document.dispatchEvent(backdropClickedEvent);
+        };
+        this._appendBackdrop();
+        document.addEventListener(backdrop_constants.BACKDROP_EVENTS.show, this._show);
+        document.addEventListener(backdrop_constants.BACKDROP_EVENTS.hide, this._hide);
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        document.removeEventListener(backdrop_constants.BACKDROP_EVENTS.show, this._show);
+        document.removeEventListener(backdrop_constants.BACKDROP_EVENTS.hide, this._hide);
+    }
+    updated() {
+        if (this.visible) {
+            this._disableScrolling();
+        }
+        else {
+            this._enableScrolling();
+        }
+    }
+    _disableScrolling() {
+        document.body.style.overflow = 'hidden';
+        document.body.style.paddingRight = '15px';
+    }
+    _enableScrolling() {
+        document.body.style.removeProperty('overflow');
+        document.body.style.removeProperty('padding-right');
+    }
+    render() {
+        return lit.html ` <div
+            aria-hidden="true"
+            ?hidden="${!this.visible}"
+            @click="${this._dispatchBackdropClickedEvent}"
+            class="${backdrop_constants.BACKDROP_CLASS}"
+        ></div>`;
+    }
+};
+tslib_es6.__decorate([
+    decorators.property({ type: Boolean }),
+    tslib_es6.__metadata("design:type", Object)
+], exports.HBackdrop.prototype, "visible", void 0);
+tslib_es6.__decorate([
+    decorators.state(),
+    tslib_es6.__metadata("design:type", Array)
+], exports.HBackdrop.prototype, "onClickArray", void 0);
+tslib_es6.__decorate([
+    decorators.state(),
+    tslib_es6.__metadata("design:type", Object)
+], exports.HBackdrop.prototype, "_backdropLayerCounter", void 0);
+exports.HBackdrop = tslib_es6.__decorate([
+    phoenix_custom_element.phoenixCustomElement('h-backdrop'),
+    tslib_es6.__metadata("design:paramtypes", [])
+], exports.HBackdrop);
+//# sourceMappingURL=backdrop.js.map

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

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

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

@@ -8,7 +8,9 @@ var decorators = require('lit/decorators');
 var phoenix_light_lit_element = require('../../core/phoenix_light_lit_element.js');
 var phoenix_custom_element = require('../../core/decorators/phoenix_custom_element.js');
 var portal_constants = require('../portal/portal_constants.js');
+var backdrop_constants = require('../backdrop/backdrop_constants.js');
 var dropdown_constants = require('./dropdown_constants.js');
+var global_constants = require('../../global_constants.js');
 var click_outside_controller_messages = require('../../controllers/click_outside_controller/click_outside_controller_messages.js');
 var click_outside_controller = require('../../controllers/click_outside_controller/click_outside_controller.js');
 var relative_position_controller_constants = require('../../controllers/relative_position_controller/relative_position_controller_constants.js');
@@ -21,27 +23,92 @@ exports.HDropdown = class HDropdown extends phoenix_light_lit_element.PhoenixLig
         this.direction = relative_position_controller_constants.DIRECTIONS.bottomCenter;
         this.toggleOnHover = false;
         this.name = '';
+        this.transition = 'direction';
         this.portalTarget = dropdown_constants.DEFAULT_DROPDOWN_PORTAL_NAME;
         this.toggle = () => {
             this.opened ? this.hide() : this.show();
         };
-        this.show = () => {
-            this.opened = true;
+        this.show = async () => {
+            return new Promise((resolve) => {
+                var _a;
+                (_a = this.$dropdownContent) === null || _a === void 0 ? void 0 : _a.classList.add(dropdown_constants.DROPDOWN_CONTENT_VISIBLE_CLASS, `${dropdown_constants.DROPDOWN_CONTENT_SHOW}-${this.transition}-start`);
+                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`);
+                        resolve();
+                    }, transitionDuration);
+                });
+            });
+        };
+        this._dispatchShowDropdownEvent = () => {
             const showDropdownEvent = new Event(dropdown_constants.DROPDOWN_EVENTS.show, {
                 bubbles: true
             });
             this.dispatchEvent(showDropdownEvent);
+            if (window.innerWidth >= global_constants.BREAKPOINTS.xs)
+                return;
+            const showBackdropEvent = new Event(backdrop_constants.BACKDROP_EVENTS.show, {
+                bubbles: true
+            });
+            document.dispatchEvent(showBackdropEvent);
         };
-        this.hide = () => {
-            this.opened = false;
+        this.hide = async () => new Promise((resolve) => {
+            const transitionDuration = parseFloat(getComputedStyle(this.$dropdownContent || this).transitionDuration) * 1000;
+            window.requestAnimationFrame(() => {
+                var _a, _b;
+                (_a = this.$dropdownContent) === null || _a === void 0 ? void 0 : _a.classList.remove(`${dropdown_constants.DROPDOWN_CONTENT_HIDE}-${this.transition}-start`);
+                (_b = this.$dropdownContent) === null || _b === void 0 ? void 0 : _b.classList.add(`${dropdown_constants.DROPDOWN_CONTENT_HIDE}-${this.transition}-end`);
+                setTimeout(() => {
+                    var _a;
+                    (_a = this.$dropdownContent) === null || _a === void 0 ? void 0 : _a.classList.remove(`${dropdown_constants.DROPDOWN_CONTENT_HIDE}-${this.transition}-start`, `${dropdown_constants.DROPDOWN_CONTENT_HIDE}-${this.transition}-end`);
+                    this.opened = false;
+                    this._dispatchHideDropdownEvent();
+                    resolve();
+                }, transitionDuration);
+            });
+        });
+        this._dispatchHideDropdownEvent = () => {
             const hideDropdownEvent = new Event(dropdown_constants.DROPDOWN_EVENTS.hide, {
                 bubbles: true
             });
             this.dispatchEvent(hideDropdownEvent);
+            if (window.innerWidth >= global_constants.BREAKPOINTS.xs)
+                return;
+            const hideBackdropEvent = new Event(backdrop_constants.BACKDROP_EVENTS.hide, {
+                bubbles: true
+            });
+            document.dispatchEvent(hideBackdropEvent);
+        };
+        this._hoverToggle = async (ev) => {
+            if (window.innerWidth < global_constants.BREAKPOINTS.xs)
+                return;
+            if (!ev.target) {
+                await this.hide();
+                return;
+            }
+            const isHoveredWithinDropdown = this._isHoveredWithinDropdown(ev.target);
+            if (isHoveredWithinDropdown && !this.opened) {
+                await this.show();
+                return;
+            }
+            if (!isHoveredWithinDropdown && this.opened) {
+                await this.hide();
+                return;
+            }
         };
         this._positionDropdownContent = () => {
             requestAnimationFrame(() => {
-                this.opened && this._positionController.position();
+                this.opened && window.innerWidth < global_constants.BREAKPOINTS.xs
+                    ? this._positionController.disableRelativePositioning()
+                    : this._positionController.position();
             });
         };
     }
@@ -52,12 +119,17 @@ exports.HDropdown = class HDropdown extends phoenix_light_lit_element.PhoenixLig
             this.$dropdownContent = this.querySelector(dropdown_constants.DROPDOWN_CONTENT_NAME);
         if (!this.$dropdownToggler)
             this.$dropdownToggler = this.querySelector(dropdown_constants.DROPDOWN_TOGGLER_NAME);
+        const $nestedDropdown = this.$dropdownContent.querySelector(dropdown_constants.DROPDOWN_CONTAINER_NAME);
+        if ($nestedDropdown && !this.$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
+                elementToPosition: this.$dropdownContent,
+                shouldDisablePositioning: () => window.innerWidth < global_constants.BREAKPOINTS.xs,
+                portalElementsNames: [dropdown_constants.DROPDOWN_CONTENT_NAME]
             });
         if (!this._clickOutsideController)
             this._clickOutsideController = new click_outside_controller.ClickOutsideController({
@@ -65,16 +137,10 @@ exports.HDropdown = class HDropdown extends phoenix_light_lit_element.PhoenixLig
                 container: this,
                 name: this.name
             });
-        this._setupListeners();
-    }
-    _setupListeners() {
-        var _a, _b, _c;
-        this.addEventListener(click_outside_controller_messages.CLICK_OUTSIDE_CONTROLLER_MESSAGES.clickedOutside, this._handleClickOutside);
-        (_a = this.$dropdownToggler) === null || _a === void 0 ? void 0 : _a.addEventListener('toggle', this.toggle);
-        if (this.toggleOnHover) {
-            (_b = this.$dropdownToggler) === null || _b === void 0 ? void 0 : _b.addEventListener('mouseenter', this.show);
-            (_c = this.$dropdownToggler) === null || _c === void 0 ? void 0 : _c.addEventListener('mouseleave', this.hide);
+        if (this.toggleOnHover && !this.$hoverableDropdownContentElements) {
+            this.$hoverableDropdownContentElements = [...this.querySelectorAll(dropdown_constants.DROPDOWN_CONTENT_NAME)];
         }
+        this._setupListeners();
     }
     _appendDropdownPortal() {
         const $dropdownPortalTarget = document.querySelector(`[name="${dropdown_constants.DEFAULT_DROPDOWN_PORTAL_NAME}"]`);
@@ -84,22 +150,43 @@ exports.HDropdown = class HDropdown extends phoenix_light_lit_element.PhoenixLig
             document.body.appendChild($portalTarget);
         }
     }
-    _handleClickOutside() {
+    _setupListeners() {
         var _a;
+        this.addEventListener(click_outside_controller_messages.CLICK_OUTSIDE_CONTROLLER_MESSAGES.clickedOutside, this._handleClickOutside);
+        (_a = this.$dropdownToggler) === null || _a === void 0 ? void 0 : _a.addEventListener('toggle', this.toggle);
+        if (this.toggleOnHover)
+            document.addEventListener('mouseover', this._hoverToggle);
+    }
+    _handleClickOutside(ev) {
+        var _a, _b, _c;
         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();
+            (_c = this.$dropdownToggler) === null || _c === void 0 ? void 0 : _c.setAttribute('aria-expanded', 'false');
+        }
+    }
+    _isHoveredWithinDropdown(element) {
+        const $closestDropdownContent = element.closest(dropdown_constants.DROPDOWN_CONTENT_NAME);
+        const isDescendantOfDropdown = element.closest(`${dropdown_constants.DROPDOWN_CONTAINER_NAME}[name="${this.name}"]`) !== null;
+        const isDescendantOfContent = this.$dropdownContent &&
+            $closestDropdownContent !== null &&
+            !!this.$hoverableDropdownContentElements.find((content) => content.name === $closestDropdownContent.name);
+        return isDescendantOfDropdown || isDescendantOfContent || element === this || element === this.$dropdownContent;
     }
     disconnectedCallback() {
-        var _a, _b, _c;
+        var _a;
         super.disconnectedCallback();
         (_a = this.$dropdownToggler) === null || _a === void 0 ? void 0 : _a.removeEventListener('toggle', this.toggle);
-        if (this.toggleOnHover) {
-            (_b = this.$dropdownToggler) === null || _b === void 0 ? void 0 : _b.removeEventListener('mouseenter', this.show);
-            (_c = this.$dropdownToggler) === null || _c === void 0 ? void 0 : _c.removeEventListener('mouseleave', this.hide);
+        if (this.toggleOnHover)
+            document.removeEventListener('mouseover', this._hoverToggle);
+        if (this.opened) {
+            this.opened = false;
+            this._dispatchHideDropdownEvent();
         }
-        this.opened = false;
     }
     render() {
         super.render();
@@ -127,6 +214,10 @@ tslib_es6.__decorate([
     decorators.property({ type: String }),
     tslib_es6.__metadata("design:type", Object)
 ], exports.HDropdown.prototype, "name", void 0);
+tslib_es6.__decorate([
+    decorators.property({ type: String }),
+    tslib_es6.__metadata("design:type", Object)
+], exports.HDropdown.prototype, "transition", void 0);
 tslib_es6.__decorate([
     decorators.property({ type: String }),
     tslib_es6.__metadata("design:type", Object)

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

@@ -1 +1 @@
-{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA,wBAAwB,4CAAgD;AACxE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA,wBAAwB,4CAAgD;AACxE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}