@shoper/phoenix_design_system 1.3.0 → 1.3.2

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

@@ -0,0 +1,218 @@
+'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 decorators_js = require('@lit/reactive-element/decorators.js');
+require('@lit/reactive-element');
+var litHtml = require('lit-html');
+var ref_js = require('lit-html/directives/ref.js');
+var portal_constants = require('../portal/portal_constants.js');
+var backdrop_controller = require('../backdrop/controller/backdrop_controller.js');
+var modal_constants = require('./modal_constants.js');
+
+var HModal_1;
+exports.HModal = HModal_1 = class HModal extends phoenix_light_lit_element.PhoenixLightLitElement {
+    constructor() {
+        super();
+        this.opened = false;
+        this.class = '';
+        this.transition = 'scale';
+        this._firstFocusableElement = undefined;
+        this._focusableElements = null;
+        this._lastFocusableElement = undefined;
+        this._contentRef = ref_js.createRef();
+        this._focusSentinelStart = ref_js.createRef();
+        this._focusSentinelEnd = ref_js.createRef();
+        this._propsChangeStrategies = {
+            [modal_constants.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._backdropController = new backdrop_controller.BackdropController();
+        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(modal_constants.FOCUSABLE_ELEMENTS_WITHIN_MODAL)];
+    }
+    static _appendModalsPortal() {
+        const $modalsPortalTarget = document.querySelector(`h-portal-target[name="${modal_constants.MODALS_PORTAL_NAME}"]`);
+        if (!$modalsPortalTarget) {
+            const $portalTarget = document.createElement('h-portal-target');
+            $portalTarget.setAttribute(portal_constants.PORTAL_TARGET_NAME_PROP, modal_constants.MODALS_PORTAL_NAME);
+            document.body.appendChild($portalTarget);
+        }
+    }
+    static isSomeModalOpen() {
+        return HModal_1.openModals.some((modal) => modal.opened);
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        HModal_1._appendModalsPortal();
+        document.addEventListener('keydown', this._keepFocusWithinModal);
+        document.addEventListener(modal_constants.MODAL_EVENTS.close, this._handleCloseFromCloseComponent);
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        if (this[modal_constants.MODAL_OPENED_PROP])
+            this.close();
+        document.removeEventListener(modal_constants.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_constants.MODAL_OPENED_PROP)) {
+            this._propsChangeStrategies[modal_constants.MODAL_OPENED_PROP][String(this[modal_constants.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_constants.MODAL_OPENED_PROP] = true;
+                    (_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_constants.MODAL_EVENTS.opened, {
+            bubbles: true
+        });
+        this.dispatchEvent(openModalEvent);
+        this._backdropController.show();
+    }
+    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_constants.MODAL_OPENED_PROP] = false;
+                    this._dispatchModalClosedEvent();
+                    resolve();
+                }, transitionDuration);
+            });
+        });
+    }
+    _dispatchModalClosedEvent() {
+        const closeModalEvent = new CustomEvent(modal_constants.MODAL_EVENTS.closed, {
+            bubbles: true
+        });
+        this.dispatchEvent(closeModalEvent);
+        this._backdropController.hide();
+    }
+    render() {
+        return litHtml.html `
+            <h-portal ?disabled="${!this.opened}" to="${modal_constants.MODALS_PORTAL_NAME}" hidden>
+                <div class="modal-wrapper ${this.class}">
+                    <div tabindex="0" ${ref_js.ref(this._focusSentinelStart)}></div>
+                    <div ${ref_js.ref(this._contentRef)} class="modal" role="dialog">
+                        <div class="modal__container">${this.getSlot('header')} ${this.getSlot('body')} ${this.getSlot('footer')}</div>
+                    </div>
+                    <div tabindex="0" ${ref_js.ref(this._focusSentinelEnd)}></div>
+                </div>
+            </h-portal>
+        `;
+    }
+};
+exports.HModal.openModals = [];
+tslib_es6.__decorate([
+    decorators_js.property({ type: Boolean, reflect: true }),
+    tslib_es6.__metadata("design:type", Object)
+], exports.HModal.prototype, "opened", void 0);
+tslib_es6.__decorate([
+    decorators_js.property({ type: String }),
+    tslib_es6.__metadata("design:type", Object)
+], exports.HModal.prototype, "class", void 0);
+tslib_es6.__decorate([
+    decorators_js.property({ type: String }),
+    tslib_es6.__metadata("design:type", Object)
+], exports.HModal.prototype, "transition", void 0);
+tslib_es6.__decorate([
+    decorators_js.state(),
+    tslib_es6.__metadata("design:type", Object)
+], exports.HModal.prototype, "_firstFocusableElement", void 0);
+tslib_es6.__decorate([
+    decorators_js.state(),
+    tslib_es6.__metadata("design:type", Object)
+], exports.HModal.prototype, "_focusableElements", void 0);
+tslib_es6.__decorate([
+    decorators_js.state(),
+    tslib_es6.__metadata("design:type", Object)
+], exports.HModal.prototype, "_lastFocusableElement", void 0);
+exports.HModal = HModal_1 = tslib_es6.__decorate([
+    phoenix_custom_element.phoenixCustomElement('h-modal'),
+    tslib_es6.__metadata("design:paramtypes", [])
+], exports.HModal);
+//# sourceMappingURL=modal.js.map

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

@@ -0,0 +1,20 @@
+'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');
+
+exports.HModalBody = class HModalBody extends phoenix_light_lit_element.PhoenixLightLitElement {
+    constructor() {
+        super();
+        this.slot = this.hasAttribute('slot') ? this.slot : 'body';
+        this.className = `modal__body ${this.className}`;
+    }
+};
+exports.HModalBody = tslib_es6.__decorate([
+    phoenix_custom_element.phoenixCustomElement('h-modal-body'),
+    tslib_es6.__metadata("design:paramtypes", [])
+], exports.HModalBody);
+//# sourceMappingURL=modal_body.js.map

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

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

@@ -0,0 +1,41 @@
+'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 modal_constants = require('./modal_constants.js');
+
+exports.HModalClose = class HModalClose extends phoenix_light_lit_element.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_constants.MODAL_EVENTS.close, {
+            bubbles: true
+        });
+        this.dispatchEvent(closeModalEvent);
+    }
+    _dispatchModalCloseOnEnterEvent(ev) {
+        if (ev.code === 'Enter' || ev.code === 'Space') {
+            this._dispatchModalCloseEvent();
+        }
+    }
+};
+exports.HModalClose = tslib_es6.__decorate([
+    phoenix_custom_element.phoenixCustomElement('h-modal-close'),
+    tslib_es6.__metadata("design:paramtypes", [])
+], exports.HModalClose);
+//# sourceMappingURL=modal_close.js.map

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

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

@@ -0,0 +1,19 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+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"])';
+
+exports.FOCUSABLE_ELEMENTS_WITHIN_MODAL = FOCUSABLE_ELEMENTS_WITHIN_MODAL;
+exports.MODALS_PORTAL_NAME = MODALS_PORTAL_NAME;
+exports.MODAL_EVENTS = MODAL_EVENTS;
+exports.MODAL_OPENED_PROP = MODAL_OPENED_PROP;
+//# sourceMappingURL=modal_constants.js.map

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

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

@@ -0,0 +1,20 @@
+'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');
+
+exports.HModalFooter = class HModalFooter extends phoenix_light_lit_element.PhoenixLightLitElement {
+    constructor() {
+        super();
+        this.slot = this.hasAttribute('slot') ? this.slot : 'footer';
+        this.className = `modal__footer ${this.className}`;
+    }
+};
+exports.HModalFooter = tslib_es6.__decorate([
+    phoenix_custom_element.phoenixCustomElement('h-modal-footer'),
+    tslib_es6.__metadata("design:paramtypes", [])
+], exports.HModalFooter);
+//# sourceMappingURL=modal_footer.js.map

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

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

@@ -0,0 +1,20 @@
+'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');
+
+exports.HModalHeader = class HModalHeader extends phoenix_light_lit_element.PhoenixLightLitElement {
+    constructor() {
+        super();
+        this.slot = this.hasAttribute('slot') ? this.slot : 'header';
+        this.className = `modal__header ${this.className}`;
+    }
+};
+exports.HModalHeader = tslib_es6.__decorate([
+    phoenix_custom_element.phoenixCustomElement('h-modal-header'),
+    tslib_es6.__metadata("design:paramtypes", [])
+], exports.HModalHeader);
+//# sourceMappingURL=modal_header.js.map

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

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

@@ -0,0 +1,44 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib_es6 = require('../../../../../external/tslib/tslib.es6.js');
+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');
+
+exports.HModalOpener = class HModalOpener extends phoenix_light_lit_element.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();
+        }
+    }
+};
+tslib_es6.__decorate([
+    decorators.property({ type: String }),
+    tslib_es6.__metadata("design:type", Object)
+], exports.HModalOpener.prototype, "name", void 0);
+exports.HModalOpener = tslib_es6.__decorate([
+    phoenix_custom_element.phoenixCustomElement('h-modal-opener'),
+    tslib_es6.__metadata("design:paramtypes", [])
+], exports.HModalOpener);
+//# sourceMappingURL=modal_opener.js.map

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

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

@@ -0,0 +1,87 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib_es6 = require('../../../../../external/tslib/tslib.es6.js');
+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 v4 = require('../../../../../external/uuid/dist/esm-browser/v4.js');
+var portal_constants = require('./portal_constants.js');
+
+exports.HPortal = class HPortal extends phoenix_light_lit_element.PhoenixLightLitElement {
+    constructor() {
+        super();
+        this._id = v4['default']();
+        this._initialChildren = [];
+        this.to = '';
+        this.disabled = false;
+        this._initialChildren = [...this.children];
+    }
+    firstUpdated(props) {
+        super.firstUpdated(props);
+        const shouldOpenPortal = this._initialChildren.length > 0 && !this.disabled;
+        if (shouldOpenPortal) {
+            this.openPortal();
+        }
+    }
+    updated(props) {
+        super.updated(props);
+        if (this.children.length > 0) {
+            if (!this.disabled) {
+                this._initialChildren = [...this.children];
+                this.openPortal();
+            }
+        }
+        this.disabled ? this.closePortal() : this.openPortal();
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.closePortal();
+    }
+    openPortal() {
+        const openPortalEvent = new CustomEvent(portal_constants.PORTAL_EVENTS.open, {
+            composed: true,
+            detail: {
+                portalId: this._id,
+                to: this.to,
+                content: [...this._initialChildren]
+            }
+        });
+        document.dispatchEvent(openPortalEvent);
+        this.dispatchEvent(openPortalEvent);
+    }
+    closePortal() {
+        const closePortalEvent = new CustomEvent(portal_constants.PORTAL_EVENTS.close, {
+            composed: true,
+            detail: {
+                portalId: this._id,
+                to: this.to
+            }
+        });
+        document.dispatchEvent(closePortalEvent);
+        this.dispatchEvent(closePortalEvent);
+    }
+};
+tslib_es6.__decorate([
+    decorators.state(),
+    tslib_es6.__metadata("design:type", Object)
+], exports.HPortal.prototype, "_id", void 0);
+tslib_es6.__decorate([
+    decorators.state(),
+    tslib_es6.__metadata("design:type", Array)
+], exports.HPortal.prototype, "_initialChildren", void 0);
+tslib_es6.__decorate([
+    decorators.property({ type: String }),
+    tslib_es6.__metadata("design:type", Object)
+], exports.HPortal.prototype, "to", void 0);
+tslib_es6.__decorate([
+    decorators.property({ type: Boolean }),
+    tslib_es6.__metadata("design:type", Object)
+], exports.HPortal.prototype, "disabled", void 0);
+exports.HPortal = tslib_es6.__decorate([
+    phoenix_custom_element.phoenixCustomElement('h-portal'),
+    tslib_es6.__metadata("design:paramtypes", [])
+], exports.HPortal);
+//# sourceMappingURL=portal.js.map

package/build/cjs/packages/phoenix/src/components/portal/portal.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,iBAAiB,qDAAyD;AAC1E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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/portal/portal_constants.js

@@ -0,0 +1,17 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const PORTAL_EVENTS = {
+    open: `portal.open`,
+    close: 'portal.close'
+};
+const PORTAL_TARGET_NAME_PROP = 'name';
+const PORTAL_TARGET_COMPONENT_NAME = 'h-portal-target';
+const PORTAL_TARGET_ATTRIBUTE_NAME = 'portal-target';
+
+exports.PORTAL_EVENTS = PORTAL_EVENTS;
+exports.PORTAL_TARGET_ATTRIBUTE_NAME = PORTAL_TARGET_ATTRIBUTE_NAME;
+exports.PORTAL_TARGET_COMPONENT_NAME = PORTAL_TARGET_COMPONENT_NAME;
+exports.PORTAL_TARGET_NAME_PROP = PORTAL_TARGET_NAME_PROP;
+//# sourceMappingURL=portal_constants.js.map

package/build/cjs/packages/phoenix/src/components/portal/portal_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/portal/portal_target.js

@@ -0,0 +1,77 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib_es6 = require('../../../../../external/tslib/tslib.es6.js');
+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 portal_target_error = require('./portal_target_error.js');
+var portal_constants = require('./portal_constants.js');
+
+var HPortalTarget_1;
+exports.HPortalTarget = HPortalTarget_1 = class HPortalTarget extends phoenix_light_lit_element.PhoenixLightLitElement {
+    constructor() {
+        super(...arguments);
+        this.name = '';
+        this._portalElementsMap = {};
+        this.portalElements = ({ detail: { portalId, content, to } }) => {
+            var _a;
+            if (!this.doesDestinationMatch(to))
+                return;
+            const newPortalElements = [...content].map((el) => this.appendChild(el));
+            const elementsInProtal = (_a = this._portalElementsMap[portalId]) !== null && _a !== void 0 ? _a : [];
+            this._portalElementsMap[portalId] = [...newPortalElements, ...elementsInProtal];
+        };
+        this.removeTeleportedItems = ({ detail: { portalId, to } }) => {
+            var _a;
+            if (!this.doesDestinationMatch(to))
+                return;
+            (_a = this._portalElementsMap[portalId]) === null || _a === void 0 ? void 0 : _a.forEach((el) => {
+                if (el.parentElement === this) {
+                    this.removeChild(el);
+                }
+            });
+            this._portalElementsMap[portalId] = [];
+        };
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.allowOnlyOnePortalTargetWithName();
+        document.addEventListener(portal_constants.PORTAL_EVENTS.open, this.portalElements, {
+            capture: true
+        });
+        document.addEventListener(portal_constants.PORTAL_EVENTS.close, this.removeTeleportedItems, {
+            capture: true
+        });
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        document.removeEventListener(portal_constants.PORTAL_EVENTS.open, this.portalElements);
+        document.removeEventListener(portal_constants.PORTAL_EVENTS.close, this.removeTeleportedItems);
+        HPortalTarget_1.portalTargetsNames.delete(this[portal_constants.PORTAL_TARGET_NAME_PROP]);
+    }
+    doesDestinationMatch(destination) {
+        return destination === this[portal_constants.PORTAL_TARGET_NAME_PROP];
+    }
+    allowOnlyOnePortalTargetWithName() {
+        if (HPortalTarget_1.portalTargetsNames.has(this[portal_constants.PORTAL_TARGET_NAME_PROP])) {
+            this.remove();
+            throw new portal_target_error.PortalTargetError(`Portal target with name "${this[portal_constants.PORTAL_TARGET_NAME_PROP]}" already exists.`);
+        }
+        HPortalTarget_1.portalTargetsNames.add(this[portal_constants.PORTAL_TARGET_NAME_PROP]);
+    }
+};
+exports.HPortalTarget.portalTargetsNames = new Set();
+tslib_es6.__decorate([
+    decorators.property({ type: String }),
+    tslib_es6.__metadata("design:type", Object)
+], exports.HPortalTarget.prototype, "name", void 0);
+tslib_es6.__decorate([
+    decorators.state(),
+    tslib_es6.__metadata("design:type", Object)
+], exports.HPortalTarget.prototype, "_portalElementsMap", void 0);
+exports.HPortalTarget = HPortalTarget_1 = tslib_es6.__decorate([
+    phoenix_custom_element.phoenixCustomElement('h-portal-target')
+], exports.HPortalTarget);
+//# sourceMappingURL=portal_target.js.map

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

package/build/cjs/packages/phoenix/src/components/portal/portal_target_error.js

@@ -0,0 +1,9 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+class PortalTargetError extends Error {
+}
+
+exports.PortalTargetError = PortalTargetError;
+//# sourceMappingURL=portal_target_error.js.map

package/build/cjs/packages/phoenix/src/components/portal/portal_target_error.js.map

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