import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
import { v as isEscapeKey } from './index.esm.js';
import { B as BEM } from './bem.js';
import { b as balBrowser } from './browser.js';
import { s as stopEventBubbling } from './form-input.js';
import { h as debounce } from './helpers.js';
import { L as Logger } from './log.js';
import { focusableQueryString } from './focus-visible.js';
import { d as defineCustomElement$5 } from './bal-close2.js';
import { d as defineCustomElement$4 } from './bal-heading2.js';
import { d as defineCustomElement$3 } from './bal-icon2.js';
import { d as defineCustomElement$2 } from './bal-stack2.js';
import { a as autoUpdate, c as computePosition, s as shift, f as flip, o as offset, b as arrow } from './floating-ui.dom.esm.js';

class AbstractVariantRenderer {
    showContainerElement(component) {
        if (component.containerEl) {
            this.showElement(component.containerEl);
        }
    }
    hideContainerElement(component) {
        if (component.containerEl) {
            this.hideElement(component.containerEl);
        }
    }
    showArrowElement(component, hasArrow = component.arrow) {
        if (hasArrow && component.arrowEl) {
            this.showElement(component.arrowEl);
        }
    }
    hideArrowElement(component) {
        if (component.arrowEl) {
            Object.assign(component.arrowEl.style, {
                left: '',
                top: '',
                display: 'none',
                visibility: 'hidden',
            });
        }
    }
    showBackdropElement(component, hasBackdrop = component.backdrop) {
        if (hasBackdrop && component.backdropEl) {
            this.showElement(component.backdropEl);
        }
    }
    hideBackdropElement(component) {
        if (component.backdropEl) {
            this.hideElement(component.backdropEl);
        }
    }
    showElement(element) {
        if (element) {
            element.style.setProperty('display', 'block');
            element.style.setProperty('visibility', 'visible');
        }
    }
    hideElement(element) {
        if (element) {
            element.style.removeProperty('display');
            element.style.removeProperty('visibility');
        }
    }
}

class DrawerVariantRenderer extends AbstractVariantRenderer {
    constructor() {
        super(...arguments);
        this.backdrop = false;
        this.offset = 0;
    }
    async present(component) {
        if (component.containerEl && component.trigger && component.backdropEl) {
            this.backdrop = component.getBooleanValue(component.trigger, 'bal-popup-backdrop', component.backdrop);
            this.offset = component.getValue(component.trigger, 'bal-popup-offset', component.offset);
            component.containerEl.style.setProperty('inset', `auto 0px 0px 0px`);
            component.containerEl.style.setProperty('bottom', `${this.offset}px`);
            component.backdropEl.style.setProperty('bottom', `${this.offset}px`);
            this.showBackdropElement(component, this.backdrop);
            this.showContainerElement(component);
            return true;
        }
        return false;
    }
    async update(_component) {
        return false;
    }
    async dismiss(component) {
        if (component.containerEl && component.backdropEl) {
            component.balWillAnimate.emit();
            this.hideBackdropElement(component);
            this.hideContainerElement(component);
            component.containerEl.style.removeProperty('inset');
            component.containerEl.style.removeProperty('bottom');
            component.backdropEl.style.removeProperty('bottom');
            return true;
        }
        return false;
    }
}

class FullscreenVariantRenderer extends AbstractVariantRenderer {
    constructor() {
        super(...arguments);
        this.offset = 0;
    }
    async present(component) {
        if (component.containerEl && component.trigger) {
            this.offset = component.getValue(component.trigger, 'bal-popup-offset', component.offset);
            component.containerEl.style.setProperty('inset', `${this.offset}px auto auto 0px`);
            if (this.offset > 0) {
                component.containerEl.style.setProperty('box-shadow', `inset var(--bal-nav-meta-bar-variant-white-shadow)`);
            }
            this.showBackdropElement(component);
            this.showContainerElement(component);
            this.showArrowElement(component);
            return true;
        }
        return false;
    }
    async update(_component) {
        return false;
    }
    async dismiss(component) {
        if (component.containerEl) {
            this.hideBackdropElement(component);
            this.hideContainerElement(component);
            this.hideArrowElement(component);
            component.containerEl.style.removeProperty('box-shadow');
            component.containerEl.style.removeProperty('inset');
            return true;
        }
        return false;
    }
}

class PopoverVariantRenderer extends AbstractVariantRenderer {
    constructor() {
        super(...arguments);
        this.placement = 'bottom';
        this.offset = 0;
        this.arrow = false;
        this.backdrop = false;
        this.reference = undefined;
        this.triggerEl = null;
    }
    async present(component) {
        if (!component.trigger && balBrowser.hasDocument) {
            const firstTrigger = Array.from(document.querySelectorAll(`[bal-popup="${component.el.id}"]`))[0];
            component.trigger = firstTrigger;
        }
        if (component.trigger && component.containerEl && component.arrowEl) {
            this.placement = component.getValue(component.trigger, 'bal-popup-placement', component.placement);
            this.arrow = component.getBooleanValue(component.trigger, 'bal-popup-arrow', component.arrow);
            this.backdrop = component.getBooleanValue(component.trigger, 'bal-popup-backdrop', component.backdrop);
            this.reference = component.getValue(component.trigger, 'bal-popup-reference', component.reference);
            this.offset = component.getNumberValue(component.trigger, 'bal-popup-offset', component.offset);
            this.triggerEl = component.trigger;
            if (this.reference && balBrowser.hasDocument) {
                const referenceEl = document.getElementById(this.reference);
                this.triggerEl = referenceEl ? referenceEl : component.trigger;
            }
            if (this.triggerEl) {
                this.showContainerElement(component);
                this.showBackdropElement(component, this.backdrop);
                this.showArrowElement(component, this.arrow);
                this.triggerEl.classList.add('bal-popup-variant-popover-trigger');
                const isNavMetaDesktopPopup = this.placement === 'bottom-end' && this.triggerEl !== component.trigger;
                if (isNavMetaDesktopPopup) {
                    component.setMinWidth(this.triggerEl.clientWidth);
                }
                this.cleanup = autoUpdate(this.triggerEl, component.containerEl, () => {
                    this.update(component);
                }, {
                    ancestorScroll: true,
                    ancestorResize: true,
                    elementResize: false,
                    layoutShift: true,
                    animationFrame: true,
                });
                return true;
            }
        }
        return false;
    }
    async update(component) {
        var _a, _b;
        if (this.triggerEl && component.trigger && component.containerEl && component.arrowEl) {
            const isNavMetaDesktopPopup = this.placement === 'bottom-end' && this.triggerEl !== component.trigger;
            const referenceRect = (_a = this.triggerEl) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
            const triggerRect = (_b = component.trigger) === null || _b === void 0 ? void 0 : _b.getBoundingClientRect();
            let isInFrame = false;
            if (balBrowser.hasWindow) {
                isInFrame = !!window.frameElement;
            }
            computePosition(this.triggerEl, component.containerEl, {
                placement: this.placement,
                middleware: [
                    isInFrame ? undefined : shift(),
                    flip(),
                    offset(this.arrow ? 16 : this.offset),
                    arrow({
                        element: component.arrowEl,
                        padding: 4,
                    }),
                ],
            }).then(({ x, y, middlewareData, placement }) => {
                if (component.containerEl) {
                    Object.assign(component.containerEl.style, {
                        left: `${x}px`,
                        top: `${y}px`,
                    });
                    const side = placement.split('-')[0];
                    const staticSide = {
                        top: 'bottom',
                        right: 'left',
                        bottom: 'top',
                        left: 'right',
                    }[side];
                    if (middlewareData.arrow && component.arrowEl) {
                        const arrowPosition = middlewareData.arrow;
                        if (isNavMetaDesktopPopup) {
                            const diff = referenceRect.right - triggerRect.right - 4;
                            Object.assign(component.arrowEl.style, {
                                right: `${diff + triggerRect.width / 2}px`,
                                left: '',
                                top: y != null && arrowPosition.y != null ? `${arrowPosition.y}px` : '',
                                bottom: '',
                                [staticSide]: `${-4}px`,
                            });
                        }
                        else {
                            Object.assign(component.arrowEl.style, {
                                left: x != null && arrowPosition.x != null ? `${arrowPosition.x}px` : '',
                                top: y != null && arrowPosition.y != null ? `${arrowPosition.y}px` : '',
                                right: '',
                                bottom: '',
                                [staticSide]: `${-4}px`,
                            });
                        }
                    }
                }
            });
            return true;
        }
        return false;
    }
    async dismiss(component) {
        if (component.containerEl && component.arrowEl && this.triggerEl) {
            if (this.cleanup) {
                this.cleanup();
            }
            this.triggerEl.classList.remove('bal-popup-variant-popover-trigger');
            this.hideBackdropElement(component);
            this.hideContainerElement(component);
            this.hideArrowElement(component);
            return true;
        }
        return false;
    }
}

class VariantRenderer {
    constructor(renderer) {
        this.renderer = renderer;
    }
    async present(component) {
        component.balWillAnimate.emit();
        const didRender = await this.renderer.present(component);
        if (didRender) {
            component.presented = true;
            component.balDidAnimate.emit();
        }
        return didRender;
    }
    async update(component) {
        component.balWillAnimate.emit();
        const didRender = await this.renderer.update(component);
        if (didRender) {
            component.balDidAnimate.emit();
        }
        return didRender;
    }
    async dismiss(component) {
        component.balWillAnimate.emit();
        const didRender = await this.renderer.dismiss(component);
        if (didRender) {
            component.presented = false;
            component.balDidAnimate.emit();
        }
        return didRender;
    }
}

const balPopupCss = ":root{--bal-popup-backdrop-background:rgba(0,7,57,.8);--bal-popup-container-padding-top:0;--bal-popup-container-padding-bottom:0;--bal-popup-container-background:var(--bal-color-white);--bal-popup-variant-popover-max-width:auto;--bal-popup-variant-popover-radius:var(--bal-radius-large);--bal-popup-variant-popover-shadow:var(--bal-shadow-normal);--bal-popup-variant-drawer-radius:var(--bal-radius-large);--bal-popup-arrow-background:var(--bal-color-white)}.bal-popup{position:static;display:inline;z-index:var(--bal-z-index-popup)}.bal-popup__container{background:var(--bal-popup-container-background);display:none;visibility:hidden;padding-top:var(--bal-popup-container-padding-top);padding-bottom:var(--bal-popup-container-padding-bottom);-ms-flex-positive:1;flex-grow:1;margin:0 auto;position:relative;width:auto}.bal-popup__container--variant-popover{border-radius:var(--bal-popup-variant-popover-radius);-webkit-box-shadow:var(--bal-popup-variant-popover-shadow);box-shadow:var(--bal-popup-variant-popover-shadow);width:var(--bal-popup-variant-popover-max-width);position:absolute;top:0;left:0}.bal-popup__container--variant-fullscreen{position:fixed;margin:0;width:100%;min-width:100%;max-width:100% !important;min-height:var(--bal-app-height, 100%)}.bal-popup__container--variant-fullscreen .bal-popup__inner{padding-left:var(--bal-container-space);padding-right:var(--bal-container-space)}.bal-popup__container--variant-drawer{position:fixed;border-top-left-radius:var(--bal-popup-variant-drawer-radius);border-top-right-radius:var(--bal-popup-variant-drawer-radius);padding-left:var(--bal-container-space);padding-right:var(--bal-container-space);width:100%}.bal-popup__inner{overflow-y:auto;max-height:calc(var(--bal-app-height, 100%) - 4rem)}.bal-popup__inner__head{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.bal-popup__inner__content{width:100%}.bal-popup__arrow{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;position:absolute;width:8px;height:8px;background:var(--bal-popup-arrow-background);-webkit-transform:rotate(45deg);transform:rotate(45deg);display:none;visibility:hidden}.bal-popup__backdrop{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;position:fixed;bottom:0;left:0;right:0;top:0;background-color:var(--bal-popup-backdrop-background);width:100vw;display:none;visibility:hidden}.bal-popup-variant-popover-trigger,.bal-popup-permanent-trigger{z-index:calc(var(--bal-z-index-popup) + 1) !important;position:relative !important}";
const BalPopupStyle0 = balPopupCss;

var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
    if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
        r = Reflect.decorate(decorators, target, key, desc);
    else
        for (var i = decorators.length - 1; i >= 0; i--)
            if (d = decorators[i])
                r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
    return c > 3 && r && Object.defineProperty(target, key, r), r;
};
const Popup = proxyCustomElement(class Popup extends HTMLElement {
    constructor() {
        super();
        this.__registerHost();
        this.balChange = createEvent(this, "balChange", 7);
        this.balWillAnimate = createEvent(this, "balWillAnimate", 7);
        this.balDidAnimate = createEvent(this, "balDidAnimate", 7);
        this.popupId = `bal-pu-${popupIds++}`;
        this.isClickedOutsideOnMouseDown = false;
        this.isClickedOutsideOnMouseUp = false;
        this.popoverVariantRenderer = new VariantRenderer(new PopoverVariantRenderer());
        this.fullscreenVariantRenderer = new VariantRenderer(new FullscreenVariantRenderer());
        this.drawerVariantRenderer = new VariantRenderer(new DrawerVariantRenderer());
        this.lastVariant = 'popover';
        this.initialActive = this.active;
        this.debouncedGlobalClick = debounce((trigger) => this.notifyGlobalClick(trigger), 10);
        this.onBackdropClick = (ev) => {
            if (this.activeBackdropDismiss && this.presented && ev && ev.target) {
                const element = ev.target;
                return element.classList.contains('bal-popup__backdrop');
            }
            return false;
        };
        this.onCloseClick = () => {
            if (this.activeClosable) {
                this.dismiss();
            }
        };
        this.activeClosable = false;
        this.activeBackdropDismiss = false;
        this.activeVariant = 'popover';
        this.trigger = undefined;
        this.lastTrigger = undefined;
        this.minContainerWidth = 0;
        this.label = '';
        this.reference = undefined;
        this.variant = 'popover';
        this.placement = 'bottom';
        this.arrow = false;
        this.backdrop = false;
        this.offset = 0;
        this.closable = false;
        this.backdropDismiss = false;
        this.active = false;
        this.presented = false;
        this.contentWidth = undefined;
        this.demo = false;
    }
    createLogger(log) {
        this.log = log;
    }
    async variantChanged(newVariant, oldVariant) {
        if (newVariant !== oldVariant) {
            await this.getVariantRenderer(oldVariant).dismiss(this);
            if (this.activeVariant !== newVariant) {
                this.lastVariant = this.activeVariant;
                this.activeVariant = newVariant;
                await this.getVariantRenderer(this.lastVariant).dismiss(this);
            }
            if (this.presented) {
                await this.getVariantRenderer(newVariant).present(this);
            }
        }
    }
    async activeChanged(newActive, oldActive) {
        if (newActive !== oldActive && newActive !== this.presented) {
            if (newActive) {
                this.present();
            }
            else {
                this.dismiss();
            }
        }
    }
    contentWidthChanged(newValue, oldValue) {
        if (newValue !== oldValue) {
            if (newValue === undefined) {
                this.el.style.removeProperty('--bal-popup-variant-popover-max-width');
            }
            else {
                this.el.style.setProperty('--bal-popup-variant-popover-max-width', `${this.contentWidth}px`);
            }
        }
    }
    componentDidLoad() {
        this.contentWidthChanged(this.contentWidth, 0);
        if (this.initialActive === true && this.presented !== true) {
            this.present();
        }
        if (this.demo) {
            this.present();
        }
    }
    async listenOnGlobalClick(ev) {
        var _a;
        const target = ev.target;
        const trigger = target.closest('[bal-popup]');
        if (trigger && balBrowser.hasWindow) {
            const popupId = ((_a = trigger.attributes.getNamedItem('bal-popup')) === null || _a === void 0 ? void 0 : _a.nodeValue) || '';
            if (this.el.id === popupId) {
                this.debouncedGlobalClick(trigger);
            }
        }
    }
    async listenOnKeyDown(ev) {
        if (this.activeClosable && this.presented && isEscapeKey(ev)) {
            stopEventBubbling(ev);
            this.dismiss();
        }
    }
    async listenOnMouseDown(ev) {
        this.isClickedOutsideOnMouseDown = this.onBackdropClick(ev);
    }
    async listenOnMouseUp(ev) {
        this.isClickedOutsideOnMouseUp = this.onBackdropClick(ev);
    }
    async listenOnComponentClick() {
        if (this.presented &&
            this.activeBackdropDismiss &&
            this.isClickedOutsideOnMouseUp &&
            this.isClickedOutsideOnMouseDown) {
            await this.dismiss();
        }
    }
    async present() {
        await this.resetAllVariants();
        if (await this._present()) {
            this.lastTrigger = this.trigger;
            this.balChange.emit(this.presented);
        }
    }
    async dismiss() {
        await this.resetAllVariants();
        if (await this._dismiss()) {
            this.lastTrigger = this.trigger;
            this.balChange.emit(this.presented);
        }
    }
    async toggle() {
        if (this.presented) {
            return this.dismiss();
        }
        else {
            return this.present();
        }
    }
    async setMinWidth(value) {
        if (this.containerEl) {
            this.containerEl.style.minWidth = `${value}px`;
            this.minContainerWidth = value;
        }
    }
    async _emitChange() {
        this.balChange.emit(this.presented);
    }
    async _present() {
        if (balBrowser.hasDocument) {
            this.lastFocus = document.activeElement || undefined;
        }
        if (this.lastVariantRenderer) {
            await this.lastVariantRenderer.dismiss(this);
            this.presented = true;
        }
        this.lastVariantRenderer = this.getVariantRenderer();
        const result = await this.lastVariantRenderer.present(this);
        this.focusFirstDescendant();
        return result;
    }
    async _dismiss() {
        var _a;
        const result = await this.getVariantRenderer().dismiss(this);
        this.lastVariantRenderer = undefined;
        if (this.lastFocus && this.lastFocus.focus) {
            (_a = this.lastFocus) === null || _a === void 0 ? void 0 : _a.focus();
        }
        return result;
    }
    getVariantRenderer(variant = this.activeVariant) {
        switch (variant) {
            case 'fullscreen':
                return this.fullscreenVariantRenderer;
            case 'drawer':
                return this.drawerVariantRenderer;
            default:
                return this.popoverVariantRenderer;
        }
    }
    getValue(trigger, attributeName, componentValue) {
        const attributeValue = trigger.attributes.getNamedItem(attributeName);
        return attributeValue ? attributeValue.value : componentValue;
    }
    getNumberValue(trigger, attributeName, componentValue) {
        const attributeValue = trigger.attributes.getNamedItem(attributeName);
        if (attributeValue) {
            return parseInt(attributeValue.value, 10) || componentValue;
        }
        return componentValue;
    }
    getBooleanValue(trigger, attributeName, componentValue) {
        const attributeValue = trigger.attributes.getNamedItem(attributeName);
        if (attributeValue) {
            const booleanValue = attributeValue.value === '' || attributeValue.value === 'true' ? true : false;
            return attributeValue ? booleanValue : componentValue;
        }
        return componentValue;
    }
    notifyGlobalClick(trigger) {
        this.trigger = trigger;
        this.lastTrigger = this.lastTrigger === undefined ? this.trigger : this.lastTrigger;
        this.activeVariant = this.getValue(trigger, 'bal-popup-variant', this.variant);
        this.activeClosable = this.getBooleanValue(trigger, 'bal-popup-closable', this.closable);
        this.activeBackdropDismiss = this.getBooleanValue(trigger, 'bal-popup-backdrop-dismiss', this.backdropDismiss);
        if (this.presented && this.lastTrigger !== this.trigger) {
            this._present();
            this.lastTrigger = this.trigger;
        }
        else {
            this.toggle();
        }
    }
    async resetAllVariants() {
        await this.dismissAllOtherPopups();
        if (this.lastVariant !== this.activeVariant) {
            const lastVariant = this.getVariantRenderer(this.lastVariant);
            await lastVariant.dismiss(this);
        }
        this.lastVariant = this.activeVariant;
    }
    async dismissAllOtherPopups() {
        if (balBrowser.hasDocument) {
            const popups = Array.from(document.getElementsByTagName('bal-popup')).filter(el => el.id !== this.el.id && el.ariaHidden !== 'true');
            for (let index = 0; index < popups.length; index++) {
                const popup = popups[index];
                await popup._dismiss();
                await popup._emitChange();
            }
        }
    }
    focusFirstDescendant() {
        const { el } = this;
        const firstInput = el.querySelector(focusableQueryString);
        if (firstInput) {
            firstInput.focus();
        }
        else {
            el.focus();
        }
    }
    render() {
        const block = BEM.block('popup');
        const containerBlock = block.element('container');
        const arrowBlock = block.element('arrow');
        const backdropBlock = block.element('backdrop');
        const innerBlock = block.element('inner');
        const innerHeadBlock = innerBlock.element('head');
        const innerContentBlock = innerBlock.element('content');
        return (h(Host, { class: Object.assign({}, block.class()), role: "dialog", "aria-hidden": `${this.presented !== true}`, "aria-modal": `${this.presented === true}`, "aria-presented": `${this.presented === true}`, "aria-labelledby": `${this.popupId}-heading` }, h("div", { class: Object.assign({}, backdropBlock.class()), ref: backdropEl => (this.backdropEl = backdropEl) }), h("div", { class: Object.assign(Object.assign({}, containerBlock.class()), containerBlock.modifier(`variant-${this.activeVariant}`).class()), ref: containerEl => (this.containerEl = containerEl), style: { minWidth: `${this.minContainerWidth}px` } }, h("div", { class: Object.assign({}, arrowBlock.class()), ref: arrowEl => (this.arrowEl = arrowEl) }), h("bal-stack", { layout: "vertical", px: this.activeVariant === 'popover' ? 'medium' : 'none', py: "medium", class: Object.assign({}, innerBlock.class()) }, this.label ? (h("bal-stack", { space: "auto", class: Object.assign({}, innerHeadBlock.class()) }, h("bal-heading", { "data-test": "bal-popup-label", level: "span", "visual-level": "large", id: `${this.popupId}-heading` }, this.label), this.activeClosable ? (h("bal-close", { "data-test": "bal-popup-close", tabindex: -1, onClick: () => this.onCloseClick() })) : (''))) : (''), h("div", { class: Object.assign({}, innerContentBlock.class()), ref: contentEl => (this.contentEl = contentEl), "data-test": "bal-popup-content" }, h("slot", null))))));
    }
    get el() { return this; }
    static get watchers() { return {
        "variant": ["variantChanged"],
        "active": ["activeChanged"],
        "contentWidth": ["contentWidthChanged"]
    }; }
    static get style() { return BalPopupStyle0; }
}, [4, "bal-popup", {
        "label": [1],
        "reference": [1],
        "variant": [1],
        "placement": [1],
        "arrow": [4],
        "backdrop": [4],
        "offset": [2],
        "closable": [4],
        "backdropDismiss": [4, "backdrop-dismiss"],
        "active": [4],
        "contentWidth": [2, "content-width"],
        "demo": [4],
        "activeClosable": [32],
        "activeBackdropDismiss": [32],
        "activeVariant": [32],
        "trigger": [32],
        "lastTrigger": [32],
        "minContainerWidth": [32],
        "presented": [32],
        "present": [64],
        "dismiss": [64],
        "toggle": [64],
        "setMinWidth": [64],
        "_emitChange": [64],
        "_present": [64],
        "_dismiss": [64]
    }, [[8, "click", "listenOnGlobalClick"], [16, "keydown", "listenOnKeyDown"], [1, "mousedown", "listenOnMouseDown"], [1, "mouseup", "listenOnMouseUp"], [0, "click", "listenOnComponentClick"]], {
        "variant": ["variantChanged"],
        "active": ["activeChanged"],
        "contentWidth": ["contentWidthChanged"]
    }]);
__decorate([
    Logger('bal-popup')
], Popup.prototype, "createLogger", null);
let popupIds = 0;
function defineCustomElement$1() {
    if (typeof customElements === "undefined") {
        return;
    }
    const components = ["bal-popup", "bal-close", "bal-heading", "bal-icon", "bal-stack"];
    components.forEach(tagName => { switch (tagName) {
        case "bal-popup":
            if (!customElements.get(tagName)) {
                customElements.define(tagName, Popup);
            }
            break;
        case "bal-close":
            if (!customElements.get(tagName)) {
                defineCustomElement$5();
            }
            break;
        case "bal-heading":
            if (!customElements.get(tagName)) {
                defineCustomElement$4();
            }
            break;
        case "bal-icon":
            if (!customElements.get(tagName)) {
                defineCustomElement$3();
            }
            break;
        case "bal-stack":
            if (!customElements.get(tagName)) {
                defineCustomElement$2();
            }
            break;
    } });
}

const BalPopup = Popup;
const defineCustomElement = defineCustomElement$1;

export { BalPopup, defineCustomElement };
