@shoper/phoenix_design_system 0.7.1 → 0.7.2

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

@@ -0,0 +1,49 @@
+import { __decorate, __metadata } from '../../../../../external/tslib/tslib.es6.js';
+import { property, state } from 'lit/decorators';
+import { PhoenixLightLitElement } from '../../core/phoenix_light_lit_element.js';
+import { phoenixCustomElement } from '../../core/decorators/phoenix_custom_element.js';
+import { BtnController } from '../../controllers/btn_controller.js';
+import { DROPDOWN_OPENED_ATTRIBUTE_NAME } from './dropdown_constants.js';
+import { ToggleElementAriaController } from '../../controllers/toggle_element_aria_controller/toggle_element_aria_controller.js';
+
+let HDropdownToggler = class HDropdownToggler extends PhoenixLightLitElement {
+    constructor() {
+        super();
+        this.name = '';
+        this.toggleOnHover = false;
+        this._dispatchToggleDropdownEvent = () => {
+            const toggleDropdownEvent = new Event('toggle', {
+                bubbles: true
+            });
+            this.dispatchEvent(toggleDropdownEvent);
+            this._toggleElementAriaController.toggleAriaExpandedAttribute();
+        };
+        this.slot = this.hasAttribute('slot') ? this.slot : 'toggler';
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this._btnController = new BtnController(this, this._dispatchToggleDropdownEvent);
+        const dropdown = this.parentElement;
+        this._toggleElementAriaController = new ToggleElementAriaController({
+            host: this,
+            initialAriaExpandedValue: !!(dropdown === null || dropdown === void 0 ? void 0 : dropdown.getAttribute(DROPDOWN_OPENED_ATTRIBUTE_NAME))
+        });
+        this.toggleOnHover = (dropdown === null || dropdown === void 0 ? void 0 : dropdown.getAttribute('toggleOnHover')) !== null;
+        this.addEventListener('click', this._dispatchToggleDropdownEvent);
+    }
+};
+__decorate([
+    property({ type: String, reflect: true }),
+    __metadata("design:type", Object)
+], HDropdownToggler.prototype, "name", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], HDropdownToggler.prototype, "toggleOnHover", void 0);
+HDropdownToggler = __decorate([
+    phoenixCustomElement('h-dropdown-toggler'),
+    __metadata("design:paramtypes", [])
+], HDropdownToggler);
+
+export { HDropdownToggler };
+//# sourceMappingURL=dropdown_toggler.js.map

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

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

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

@@ -0,0 +1,10 @@
+export declare type TDropdownSelectors = {
+    getDropdownPortalTargetName(): string;
+    getDropdownContainerName(): string;
+    getDropdownTogglerName(): string;
+};
+export interface IDropdown {
+    show(): void;
+    hide(): void;
+    toggle(): void;
+}

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

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=dropdown_types.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"dropdown_types.js","sourceRoot":"","sources":["../../../../../../../src/components/dropdown/dropdown_types.ts"],"names":[],"mappings":""}

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

@@ -0,0 +1,31 @@
+import { TemplateResult, PropertyValues } from 'lit';
+import { PhoenixLightLitElement } from "../../core/phoenix_light_lit_element";
+export declare class HModal extends PhoenixLightLitElement {
+    opened: boolean;
+    class: string;
+    transition: string;
+    _firstFocusableElement: HTMLElement | undefined;
+    _focusableElements: HTMLElement[] | null;
+    _lastFocusableElement: HTMLElement | undefined;
+    private _contentRef;
+    private _focusSentinelStart;
+    private _focusSentinelEnd;
+    private _propsChangeStrategies;
+    private static openModals;
+    private static _appendModalsPortal;
+    private static _appendModalsBackdrop;
+    static isSomeModalOpen(): boolean;
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    firstUpdated(props: PropertyValues): void;
+    updated(changedProps: Map<string, any>): void;
+    private _keepFocusWithinModal;
+    private _handleCloseFromCloseComponent;
+    private _bindCloseOnEsc;
+    open(): Promise<void>;
+    private _dispatchModalOpenedEvent;
+    close(): Promise<void>;
+    private _dispatchModalClosedEvent;
+    render(): TemplateResult<1>;
+}

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

@@ -0,0 +1,219 @@
+import { __decorate, __metadata } from '../../../../../external/tslib/tslib.es6.js';
+import { html } from 'lit';
+import { property, state } from 'lit/decorators';
+import { PhoenixLightLitElement } from '../../core/phoenix_light_lit_element.js';
+import { phoenixCustomElement } from '../../core/decorators/phoenix_custom_element.js';
+import { PORTAL_TARGET_NAME_PROP } from '../portal/portal_constants.js';
+import { MODAL_OPENED_PROP, FOCUSABLE_ELEMENTS_WITHIN_MODAL, MODALS_PORTAL_NAME, MODAL_EVENTS } from './modal_constants.js';
+import { createRef as e, ref as n } from '../../../../../external/lit-html/directives/ref.js';
+
+var HModal_1;
+let HModal = HModal_1 = class HModal extends PhoenixLightLitElement {
+    constructor() {
+        super();
+        this.opened = false;
+        this.class = '';
+        this.transition = 'scale';
+        this._firstFocusableElement = undefined;
+        this._focusableElements = null;
+        this._lastFocusableElement = undefined;
+        this._contentRef = e();
+        this._focusSentinelStart = e();
+        this._focusSentinelEnd = e();
+        this._propsChangeStrategies = {
+            [MODAL_OPENED_PROP]: {
+                true: () => {
+                    const scrollY = window.scrollY;
+                    HModal_1.openModals = [...HModal_1.openModals, this];
+                    document.addEventListener('keydown', this._bindCloseOnEsc);
+                    this._dispatchModalOpenedEvent();
+                    setTimeout(() => {
+                        var _a;
+                        (_a = this._firstFocusableElement) === null || _a === void 0 ? void 0 : _a.focus();
+                        window.scrollTo(0, scrollY);
+                    }, 0);
+                },
+                false: () => {
+                    HModal_1.openModals = HModal_1.openModals.filter((modal) => modal !== this);
+                    document.removeEventListener('keydown', this._bindCloseOnEsc);
+                }
+            }
+        };
+        this._keepFocusWithinModal = (ev) => {
+            var _a, _b;
+            const isTabPressed = ev.code === 'Tab';
+            if (isTabPressed) {
+                if (ev.shiftKey) {
+                    if (document.activeElement === this._firstFocusableElement) {
+                        (_a = this._lastFocusableElement) === null || _a === void 0 ? void 0 : _a.focus();
+                        ev.preventDefault();
+                    }
+                }
+                else if (document.activeElement === this._lastFocusableElement) {
+                    (_b = this._firstFocusableElement) === null || _b === void 0 ? void 0 : _b.focus();
+                    ev.preventDefault();
+                }
+            }
+        };
+        this._handleCloseFromCloseComponent = async (ev) => {
+            var _a;
+            ev.stopPropagation();
+            if ((_a = this._contentRef.value) === null || _a === void 0 ? void 0 : _a.contains(ev.target)) {
+                await this.close();
+            }
+        };
+        this._bindCloseOnEsc = async (ev) => {
+            ev.stopImmediatePropagation();
+            const $target = ev.target;
+            const closeConditions = [
+                ev.key === 'Escape',
+                $target.tagName !== 'INPUT',
+                ev.ctrlKey === false,
+                ev.shiftKey === false,
+                ev.altKey === false
+            ];
+            const shouldCloseModal = closeConditions.every((condition) => condition);
+            if (shouldCloseModal) {
+                const [modalToClose] = HModal_1.openModals.slice(-1);
+                await (modalToClose === null || modalToClose === void 0 ? void 0 : modalToClose.close());
+            }
+        };
+        this.hidden = true;
+        this._focusableElements = [...this.querySelectorAll(FOCUSABLE_ELEMENTS_WITHIN_MODAL)];
+    }
+    static _appendModalsPortal() {
+        const $modalsPortalTarget = document.querySelector(`h-portal-target[name="${MODALS_PORTAL_NAME}"]`);
+        if (!$modalsPortalTarget) {
+            const $portalTarget = document.createElement('h-portal-target');
+            $portalTarget.setAttribute(PORTAL_TARGET_NAME_PROP, MODALS_PORTAL_NAME);
+            document.body.appendChild($portalTarget);
+        }
+    }
+    static _appendModalsBackdrop() {
+        const $modalsBackdrop = document.querySelector('h-modal-backdrop');
+        if (!$modalsBackdrop) {
+            const $backdrop = document.createElement('h-modal-backdrop');
+            document.body.appendChild($backdrop);
+        }
+    }
+    static isSomeModalOpen() {
+        return HModal_1.openModals.some((modal) => modal.opened);
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        HModal_1._appendModalsPortal();
+        HModal_1._appendModalsBackdrop();
+        document.addEventListener('keydown', this._keepFocusWithinModal);
+        document.addEventListener(MODAL_EVENTS.close, this._handleCloseFromCloseComponent);
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this[MODAL_OPENED_PROP] = false;
+        document.removeEventListener(MODAL_EVENTS.close, this._handleCloseFromCloseComponent);
+        document.removeEventListener('keydown', this._bindCloseOnEsc);
+    }
+    firstUpdated(props) {
+        super.firstUpdated(props);
+        this._firstFocusableElement = this._focusSentinelStart.value;
+        this._lastFocusableElement = this._focusSentinelEnd.value;
+    }
+    updated(changedProps) {
+        if (changedProps.has(MODAL_OPENED_PROP)) {
+            this._propsChangeStrategies[MODAL_OPENED_PROP][String(this[MODAL_OPENED_PROP])]();
+        }
+    }
+    async open() {
+        return new Promise((resolve) => {
+            var _a;
+            (_a = this._contentRef.value) === null || _a === void 0 ? void 0 : _a.classList.add(`modal_visible`, `modal_show-${this.transition}-start`);
+            window.requestAnimationFrame(() => {
+                setTimeout(() => {
+                    var _a;
+                    (_a = this._contentRef.value) === null || _a === void 0 ? void 0 : _a.classList.add(`modal_show-${this.transition}-end`);
+                }, 0);
+                const transitionDuration = parseFloat(getComputedStyle(this._contentRef.value || this).transitionDuration) * 1000;
+                setTimeout(() => {
+                    var _a;
+                    this[MODAL_OPENED_PROP] = true;
+                    this._dispatchModalOpenedEvent();
+                    (_a = this._contentRef.value) === null || _a === void 0 ? void 0 : _a.classList.remove(`modal_show-${this.transition}-start`, `modal_show-${this.transition}-end`);
+                    resolve();
+                }, transitionDuration);
+            });
+        });
+    }
+    _dispatchModalOpenedEvent() {
+        const openModalEvent = new CustomEvent(MODAL_EVENTS.opened, {
+            bubbles: true
+        });
+        this.dispatchEvent(openModalEvent);
+    }
+    async close() {
+        return new Promise((resolve) => {
+            const transitionDuration = parseFloat(getComputedStyle(this._contentRef.value || this).transitionDuration) * 1000;
+            window.requestAnimationFrame(() => {
+                var _a, _b;
+                (_a = this._contentRef.value) === null || _a === void 0 ? void 0 : _a.classList.remove(`modal_hide-${this.transition}-start`);
+                (_b = this._contentRef.value) === null || _b === void 0 ? void 0 : _b.classList.add(`modal_hide-${this.transition}-end`);
+                setTimeout(() => {
+                    var _a;
+                    (_a = this._contentRef.value) === null || _a === void 0 ? void 0 : _a.classList.remove(`modal_hide-${this.transition}-start`, `modal_hide-${this.transition}-end`);
+                    this[MODAL_OPENED_PROP] = false;
+                    this._dispatchModalClosedEvent();
+                    resolve();
+                }, transitionDuration);
+            });
+        });
+    }
+    _dispatchModalClosedEvent() {
+        const closeModalEvent = new CustomEvent(MODAL_EVENTS.closed, {
+            bubbles: true
+        });
+        this.dispatchEvent(closeModalEvent);
+    }
+    render() {
+        return html `
+            <h-portal ?disabled="${!this.opened}" to="${MODALS_PORTAL_NAME}" hidden>
+                <div class="modal-wrapper ${this.class}">
+                    <div tabindex="0" ${n(this._focusSentinelStart)}></div>
+                    <div ${n(this._contentRef)} class="modal" role="dialog">
+                        <div class="modal__container">${this.getSlot('header')} ${this.getSlot('body')} ${this.getSlot('footer')}</div>
+                    </div>
+                    <div tabindex="0" ${n(this._focusSentinelEnd)}></div>
+                </div>
+            </h-portal>
+        `;
+    }
+};
+HModal.openModals = [];
+__decorate([
+    property({ type: Boolean, reflect: true }),
+    __metadata("design:type", Object)
+], HModal.prototype, "opened", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", Object)
+], HModal.prototype, "class", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", Object)
+], HModal.prototype, "transition", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], HModal.prototype, "_firstFocusableElement", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], HModal.prototype, "_focusableElements", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], HModal.prototype, "_lastFocusableElement", void 0);
+HModal = HModal_1 = __decorate([
+    phoenixCustomElement('h-modal'),
+    __metadata("design:paramtypes", [])
+], HModal);
+
+export { HModal };
+//# sourceMappingURL=modal.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,uCAAuC,4CAAgD;AACvF;AACA;AACA;AACA;AACA;AACA;AACA,yCAAyC,oDAAwD;AACjG;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

package/build/esm/packages/phoenix/src/components/modal/modal_backdrop.d.ts

@@ -0,0 +1,12 @@
+import { PhoenixLightLitElement } from "../../core/phoenix_light_lit_element";
+export declare class HModalBackdrop extends PhoenixLightLitElement {
+    visible: boolean;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private _show;
+    private _hide;
+    protected updated(): void;
+    private _disableScrolling;
+    private _enableScrolling;
+    render(): import("lit-html").TemplateResult<1>;
+}

package/build/esm/packages/phoenix/src/components/modal/modal_backdrop.js

@@ -0,0 +1,64 @@
+import { __decorate, __metadata } from '../../../../../external/tslib/tslib.es6.js';
+import { html } from 'lit';
+import { property } from 'lit/decorators';
+import { PhoenixLightLitElement } from '../../core/phoenix_light_lit_element.js';
+import { phoenixCustomElement } from '../../core/decorators/phoenix_custom_element.js';
+import { MODAL_EVENTS } from './modal_constants.js';
+import { HModal } from './modal.js';
+
+let HModalBackdrop = class HModalBackdrop extends PhoenixLightLitElement {
+    constructor() {
+        super(...arguments);
+        this.visible = false;
+        this._show = () => {
+            if (!this.visible) {
+                this.visible = true;
+            }
+        };
+        this._hide = () => {
+            if (!HModal.isSomeModalOpen()) {
+                this.visible = false;
+            }
+        };
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        document.addEventListener(MODAL_EVENTS.opened, this._show);
+        document.addEventListener(MODAL_EVENTS.closed, this._hide);
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        document.removeEventListener(MODAL_EVENTS.opened, this._show);
+        document.removeEventListener(MODAL_EVENTS.closed, this._hide);
+    }
+    updated() {
+        if (HModal.isSomeModalOpen()) {
+            this.visible = true;
+            this._disableScrolling();
+        }
+        else {
+            this._enableScrolling();
+        }
+    }
+    _disableScrolling() {
+        document.body.style.overflow = 'hidden';
+        document.body.style.paddingRight = '15px';
+    }
+    _enableScrolling() {
+        document.body.style.removeProperty('overflow');
+        document.body.style.removeProperty('padding-right');
+    }
+    render() {
+        return html ` <div aria-hidden="true" ?hidden="${!this.visible}" class="modal-backdrop"></div>`;
+    }
+};
+__decorate([
+    property({ type: Boolean }),
+    __metadata("design:type", Object)
+], HModalBackdrop.prototype, "visible", void 0);
+HModalBackdrop = __decorate([
+    phoenixCustomElement('h-modal-backdrop')
+], HModalBackdrop);
+
+export { HModalBackdrop };
+//# sourceMappingURL=modal_backdrop.js.map

package/build/esm/packages/phoenix/src/components/modal/modal_backdrop.js.map

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

package/build/esm/packages/phoenix/src/components/modal/modal_body.d.ts

@@ -0,0 +1,4 @@
+import { PhoenixLightLitElement } from "../../core/phoenix_light_lit_element";
+export declare class HModalBody extends PhoenixLightLitElement {
+    constructor();
+}

package/build/esm/packages/phoenix/src/components/modal/modal_body.js

@@ -0,0 +1,18 @@
+import { __decorate, __metadata } from '../../../../../external/tslib/tslib.es6.js';
+import { PhoenixLightLitElement } from '../../core/phoenix_light_lit_element.js';
+import { phoenixCustomElement } from '../../core/decorators/phoenix_custom_element.js';
+
+let HModalBody = class HModalBody extends PhoenixLightLitElement {
+    constructor() {
+        super();
+        this.slot = this.hasAttribute('slot') ? this.slot : 'body';
+        this.className = `modal__body ${this.className}`;
+    }
+};
+HModalBody = __decorate([
+    phoenixCustomElement('h-modal-body'),
+    __metadata("design:paramtypes", [])
+], HModalBody);
+
+export { HModalBody };
+//# sourceMappingURL=modal_body.js.map

package/build/esm/packages/phoenix/src/components/modal/modal_body.js.map

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

package/build/esm/packages/phoenix/src/components/modal/modal_close.d.ts

@@ -0,0 +1,8 @@
+import { PhoenixLightLitElement } from "../../core/phoenix_light_lit_element";
+export declare class HModalClose extends PhoenixLightLitElement {
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private _dispatchModalCloseEvent;
+    private _dispatchModalCloseOnEnterEvent;
+}

package/build/esm/packages/phoenix/src/components/modal/modal_close.js

@@ -0,0 +1,39 @@
+import { __decorate, __metadata } from '../../../../../external/tslib/tslib.es6.js';
+import { PhoenixLightLitElement } from '../../core/phoenix_light_lit_element.js';
+import { phoenixCustomElement } from '../../core/decorators/phoenix_custom_element.js';
+import { MODAL_EVENTS } from './modal_constants.js';
+
+let HModalClose = class HModalClose extends PhoenixLightLitElement {
+    constructor() {
+        super();
+        this.tabIndex = 0;
+        this.setAttribute('role', 'button');
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.addEventListener('click', this._dispatchModalCloseEvent);
+        this.addEventListener('keydown', this._dispatchModalCloseOnEnterEvent);
+    }
+    disconnectedCallback() {
+        this.removeEventListener('click', this._dispatchModalCloseEvent);
+        this.removeEventListener('keydown', this._dispatchModalCloseOnEnterEvent);
+    }
+    _dispatchModalCloseEvent() {
+        const closeModalEvent = new CustomEvent(MODAL_EVENTS.close, {
+            bubbles: true
+        });
+        this.dispatchEvent(closeModalEvent);
+    }
+    _dispatchModalCloseOnEnterEvent(ev) {
+        if (ev.code === 'Enter' || ev.code === 'Space') {
+            this._dispatchModalCloseEvent();
+        }
+    }
+};
+HModalClose = __decorate([
+    phoenixCustomElement('h-modal-close'),
+    __metadata("design:paramtypes", [])
+], HModalClose);
+
+export { HModalClose };
+//# sourceMappingURL=modal_close.js.map

package/build/esm/packages/phoenix/src/components/modal/modal_close.js.map

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

package/build/esm/packages/phoenix/src/components/modal/modal_constants.d.ts

@@ -0,0 +1,9 @@
+export declare const MODALS_PORTAL_NAME = "modals";
+export declare const MODAL_EVENTS: {
+    open: string;
+    close: string;
+    opened: string;
+    closed: string;
+};
+export declare const MODAL_OPENED_PROP = "opened";
+export declare const FOCUSABLE_ELEMENTS_WITHIN_MODAL = "button, [href], input, select, textarea, [tabindex]:not([tabindex=\"-1\"])";

package/build/esm/packages/phoenix/src/components/modal/modal_constants.js

@@ -0,0 +1,12 @@
+const MODALS_PORTAL_NAME = 'modals';
+const MODAL_EVENTS = {
+    open: 'modal.open',
+    close: 'modal.close',
+    opened: 'modal.opened',
+    closed: 'modal.closed'
+};
+const MODAL_OPENED_PROP = 'opened';
+const FOCUSABLE_ELEMENTS_WITHIN_MODAL = 'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])';
+
+export { FOCUSABLE_ELEMENTS_WITHIN_MODAL, MODALS_PORTAL_NAME, MODAL_EVENTS, MODAL_OPENED_PROP };
+//# sourceMappingURL=modal_constants.js.map

package/build/esm/packages/phoenix/src/components/modal/modal_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/esm/packages/phoenix/src/components/modal/modal_footer.d.ts

@@ -0,0 +1,4 @@
+import { PhoenixLightLitElement } from "../../core/phoenix_light_lit_element";
+export declare class HModalFooter extends PhoenixLightLitElement {
+    constructor();
+}

package/build/esm/packages/phoenix/src/components/modal/modal_footer.js

@@ -0,0 +1,18 @@
+import { __decorate, __metadata } from '../../../../../external/tslib/tslib.es6.js';
+import { PhoenixLightLitElement } from '../../core/phoenix_light_lit_element.js';
+import { phoenixCustomElement } from '../../core/decorators/phoenix_custom_element.js';
+
+let HModalFooter = class HModalFooter extends PhoenixLightLitElement {
+    constructor() {
+        super();
+        this.slot = this.hasAttribute('slot') ? this.slot : 'footer';
+        this.className = `modal__footer ${this.className}`;
+    }
+};
+HModalFooter = __decorate([
+    phoenixCustomElement('h-modal-footer'),
+    __metadata("design:paramtypes", [])
+], HModalFooter);
+
+export { HModalFooter };
+//# sourceMappingURL=modal_footer.js.map

package/build/esm/packages/phoenix/src/components/modal/modal_footer.js.map

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

package/build/esm/packages/phoenix/src/components/modal/modal_header.d.ts

@@ -0,0 +1,4 @@
+import { PhoenixLightLitElement } from "../../core/phoenix_light_lit_element";
+export declare class HModalHeader extends PhoenixLightLitElement {
+    constructor();
+}

package/build/esm/packages/phoenix/src/components/modal/modal_header.js

@@ -0,0 +1,18 @@
+import { __decorate, __metadata } from '../../../../../external/tslib/tslib.es6.js';
+import { PhoenixLightLitElement } from '../../core/phoenix_light_lit_element.js';
+import { phoenixCustomElement } from '../../core/decorators/phoenix_custom_element.js';
+
+let HModalHeader = class HModalHeader extends PhoenixLightLitElement {
+    constructor() {
+        super();
+        this.slot = this.hasAttribute('slot') ? this.slot : 'header';
+        this.className = `modal__header ${this.className}`;
+    }
+};
+HModalHeader = __decorate([
+    phoenixCustomElement('h-modal-header'),
+    __metadata("design:paramtypes", [])
+], HModalHeader);
+
+export { HModalHeader };
+//# sourceMappingURL=modal_header.js.map

package/build/esm/packages/phoenix/src/components/modal/modal_header.js.map

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

package/build/esm/packages/phoenix/src/components/modal/modal_opener.d.ts

@@ -0,0 +1,9 @@
+import { PhoenixLightLitElement } from "../../core/phoenix_light_lit_element";
+export declare class HModalOpener extends PhoenixLightLitElement {
+    name: string;
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private _openModal;
+    private _openModalOnKeydownEvent;
+}

package/build/esm/packages/phoenix/src/components/modal/modal_opener.js

@@ -0,0 +1,42 @@
+import { __decorate, __metadata } from '../../../../../external/tslib/tslib.es6.js';
+import { property } from 'lit/decorators';
+import { PhoenixLightLitElement } from '../../core/phoenix_light_lit_element.js';
+import { phoenixCustomElement } from '../../core/decorators/phoenix_custom_element.js';
+
+let HModalOpener = class HModalOpener extends PhoenixLightLitElement {
+    constructor() {
+        super();
+        this.name = '';
+        this.tabIndex = 0;
+        this.setAttribute('role', 'button');
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.addEventListener('click', this._openModal);
+        this.addEventListener('keydown', this._openModalOnKeydownEvent);
+    }
+    disconnectedCallback() {
+        this.removeEventListener('click', this._openModal);
+        this.removeEventListener('keydown', this._openModalOnKeydownEvent);
+    }
+    _openModal() {
+        const modal = document.querySelector(`h-modal#${this.name}`);
+        modal === null || modal === void 0 ? void 0 : modal.open();
+    }
+    _openModalOnKeydownEvent(ev) {
+        if (ev.code === 'Enter' || ev.code === 'Space') {
+            this._openModal();
+        }
+    }
+};
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", Object)
+], HModalOpener.prototype, "name", void 0);
+HModalOpener = __decorate([
+    phoenixCustomElement('h-modal-opener'),
+    __metadata("design:paramtypes", [])
+], HModalOpener);
+
+export { HModalOpener };
+//# sourceMappingURL=modal_opener.js.map

package/build/esm/packages/phoenix/src/components/modal/modal_opener.js.map

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

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

@@ -0,0 +1,14 @@
+import { PhoenixLightLitElement } from "../../core/phoenix_light_lit_element";
+import { PropertyValues } from 'lit';
+export declare class HPortal extends PhoenixLightLitElement {
+    _id: string;
+    _initialChildren: Element[];
+    to: string;
+    disabled: boolean;
+    constructor();
+    firstUpdated(props: PropertyValues): void;
+    updated(props: PropertyValues): void;
+    disconnectedCallback(): void;
+    openPortal(): void;
+    closePortal(): void;
+}