import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-BdVwMG9u.js';
import { _ as __decorate, a as __metadata } from './tslib.es6-dfXERft2.js';
import { B as BEM } from './bem-ByiN-QjD.js';
import { b as balBrowser } from './browser-B1u-Mq75.js';
import { s as stopEventBubbling } from './form-input-DYvzaBlM.js';
import { k as debounce, i as isDescendant } from './helpers-BNj87EbG.js';
import { L as Logger } from './log-CwssmmaV.js';
import { b as balFloatingUi } from './floating-ui-gZ7E41T8.js';
import { j as isEscapeKey } from './keyboard.helpers-BERg8BNc.js';
import './config.utils-B7jugjyM.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)`);
            }
            if (component.innerEl) {
                component.innerEl.style.setProperty('max-height', `calc(var(--bal-app-height, 100%) - ${this.offset}px)`);
            }
            this.showBackdropElement(component);
            this.showContainerElement(component);
            this.hideArrowElement(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');
            if (component.innerEl) {
                component.innerEl.style.removeProperty('max-height');
            }
            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) {
        const lib = await balFloatingUi.load();
        //
        // identify trigger element or the the closest trigger available
        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) {
                //
                // show all required elements
                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 = lib.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 lib = await balFloatingUi.load();
            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;
            }
            lib
                .computePosition(this.triggerEl, component.containerEl, {
                placement: this.placement,
                middleware: [
                    isInFrame ? undefined : lib.shift(),
                    lib.flip(),
                    lib.offset(this.arrow ? 16 : this.offset),
                    lib.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}.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;z-index:var(--bal-z-index-popup)}.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-popover .bal-popup__inner{max-height:calc(var(--bal-app-height, 100%) - 4rem)}.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);max-height:var(--bal-app-height, 100%)}.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__container--variant-drawer .bal-popup__inner{max-height:calc(var(--bal-app-height, 100%) - 4rem)}.bal-popup__inner{overflow-y:auto}.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;height:100vh;display:none;visibility:hidden;z-index:calc(var(--bal-z-index-popup) - 1)}.bal-popup-variant-popover-trigger,.bal-popup-permanent-trigger{z-index:calc(var(--bal-z-index-popup) + 1) !important;position:relative !important}";

const Popup = class {
    constructor(hostRef) {
        registerInstance(this, hostRef);
        this.balChange = createEvent(this, "balChange");
        this.balWillAnimate = createEvent(this, "balWillAnimate");
        this.balDidAnimate = createEvent(this, "balDidAnimate");
        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.activeClosable = false;
        this.activeBackdropDismiss = false;
        this.activeVariant = 'popover';
        this.minContainerWidth = '16.25rem';
        /**
         * PUBLIC PROPERTY API
         * ------------------------------------------------------
         */
        /**
         * Label or title of the popup element
         */
        this.label = '';
        /**
         * Defines the variant / type of popup
         */
        this.variant = 'popover';
        /**
         * If set it turns a popover into a fullscreen or a drawer on touch devices
         */
        this.placement = 'bottom';
        /**
         * If `true`, it shows a little indicator to the trigger element.
         */
        this.arrow = false;
        /**
         * If `true`, a backdrop will be displayed behind the modal.
         */
        this.backdrop = false;
        /**
         * Offset form trigger to popup.
         */
        this.offset = 0;
        /**
         * If `true`, the modal can be closed with the escape key or the little close button.
         */
        this.closable = false;
        /**
         * If `true`, the modal can be closed with the click outside of the modal
         */
        this.backdropDismiss = false;
        /**
         * If `true` the popup is open.
         */
        this.active = false;
        /**
         * Internal active state
         */
        this.presented = false;
        this.initialActive = this.active;
        /**
         * @internal
         */
        this.demo = false;
        /**
         * LISTENERS
         * ------------------------------------------------------
         */
        this.debouncedGlobalClick = debounce((trigger) => this.notifyGlobalClick(trigger), 10);
        /**
         * EVENT BINDING
         * ------------------------------------------------------
         */
        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();
            }
        };
    }
    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`);
            }
        }
    }
    /**
     * LIFECYCLE
     * ------------------------------------------------------
     */
    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);
            }
        }
        else if (!this.backdrop && this.closable && this.presented && !isDescendant(this.el, target)) {
            await this.dismiss();
        }
    }
    async listenOnKeyDown(ev) {
        if (this.activeClosable && this.presented && isEscapeKey(ev)) {
            stopEventBubbling(ev);
            await 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();
        }
    }
    /**
     * PUBLIC METHODS
     * ------------------------------------------------------
     */
    /**
     * Opens the popup
     */
    async present() {
        await this.resetAllVariants();
        if (await this._present()) {
            this.lastTrigger = this.trigger;
            this.balChange.emit(this.presented);
        }
    }
    /**
     * Closes the popup
     */
    async dismiss() {
        await this.resetAllVariants();
        if (await this._dismiss()) {
            this.lastTrigger = this.trigger;
            this.balChange.emit(this.presented);
        }
    }
    /**
     * Triggers the popup
     */
    async toggle() {
        if (this.presented) {
            return this.dismiss();
        }
        else {
            return this.present();
        }
    }
    /**
     * @internal
     */
    async setMinWidth(value) {
        if (this.containerEl) {
            this.containerEl.style.minWidth = `${value}px`;
            this.minContainerWidth = `${value}px`;
        }
    }
    /**
     * @internal
     */
    async _emitChange() {
        this.balChange.emit(this.presented);
    }
    /**
     * @internal
     */
    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;
    }
    /**
     * @internal
     */
    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({ preventScroll: true });
        }
        return result;
    }
    /**
     * GETTERS
     * ------------------------------------------------------
     */
    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;
    }
    /**
     * PRIVATE METHODS
     * ------------------------------------------------------
     */
    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);
        // present or dismiss active variant
        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 contentEl = this.contentEl;
        if (contentEl) {
            contentEl.focus({ preventScroll: true });
        }
    }
    /**
     * RENDER
     * ------------------------------------------------------
     */
    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, { key: '815e1a03c79472bb0913b4a28519802606bac73c', 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", { key: 'effa9ca039cb7c5b27db07f23e02a464e5f09ce9', class: Object.assign({}, backdropBlock.class()), ref: backdropEl => (this.backdropEl = backdropEl) }), h("div", { key: '343a483098c5d4b657298c3f0b5d14705a3e78bd', class: Object.assign(Object.assign({}, containerBlock.class()), containerBlock.modifier(`variant-${this.activeVariant}`).class()), ref: containerEl => (this.containerEl = containerEl), style: { minWidth: this.minContainerWidth } }, h("div", { key: 'dbcb76dfb93527828e6f73974cbfd62225bd26c3', class: Object.assign({}, arrowBlock.class()), ref: arrowEl => (this.arrowEl = arrowEl) }), h("bal-stack", { key: '119c391a7fa3081548740bf23b57a6ae05417188', layout: "vertical", px: this.activeVariant === 'popover' ? 'medium' : 'none', py: "medium", class: Object.assign({}, innerBlock.class()), ref: innerBlock => (this.innerEl = innerBlock) }, this.label ? (h("bal-stack", { space: "auto", class: Object.assign({}, innerHeadBlock.class()) }, h("bal-heading", { "data-testid": "bal-popup-label", level: "span", "visual-level": "large", id: `${this.popupId}-heading` }, this.label), this.activeClosable ? (h("bal-close", { "data-testid": "bal-popup-close", tabindex: -1, onClick: () => this.onCloseClick() })) : (''))) : (''), h("div", { key: 'ff97c08a3151dc9f71552eede345d84716ea7e3b', class: Object.assign({}, innerContentBlock.class()), ref: contentEl => (this.contentEl = contentEl), "data-testid": "bal-popup-content", tabindex: "-1" }, h("slot", { key: '21e9b66eec4627f414c4802eccc5276c20a9c536' }))))));
    }
    get el() { return getElement(this); }
    static get watchers() { return {
        "variant": ["variantChanged"],
        "active": ["activeChanged"],
        "contentWidth": ["contentWidthChanged"]
    }; }
};
__decorate([
    Logger('bal-popup'),
    __metadata("design:type", Function),
    __metadata("design:paramtypes", [Function]),
    __metadata("design:returntype", void 0)
], Popup.prototype, "createLogger", null);
let popupIds = 0;
Popup.style = balPopupCss;

export { Popup as bal_popup };
