@baloise/ds-core 19.0.1 → 19.1.0

package/components/bal-popup.js

@@ -1,695 +1,4 @@
-import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { _ as __decorate, a as __metadata } from './tslib.es6.js';
-import { B as BEM } from './bem.js';
-import { b as balBrowser } from './browser.js';
-import { s as stopEventBubbling } from './form-input.js';
-import { k as debounce } from './helpers.js';
-import { L as Logger } from './log.js';
-import { f as 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 { b as balFloatingUi } from './floating-ui.js';
-import { e as isEscapeKey } from './keyboard.helpers.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.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');
-            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;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;
-
-const Popup = /*@__PURE__*/ 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;
-        /**
-         * 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();
-            }
-        };
-        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`);
-            }
-        }
-    }
-    /**
-     * 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);
-            }
-        }
-    }
-    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();
-        }
-    }
-    /**
-     * 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;
-        }
-    }
-    /**
-     * @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();
-        }
-        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 { el } = this;
-        const firstInput = el.querySelector(focusableQueryString);
-        if (firstInput) {
-            firstInput.focus();
-        }
-        else {
-            el.focus();
-        }
-    }
-    /**
-     * 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: '22256d10b23aaeefad30786345780029c23f10a5', 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: 'a3a5862b32a8a6acadd12893729148e016527dec', class: Object.assign({}, backdropBlock.class()), ref: backdropEl => (this.backdropEl = backdropEl) }), h("div", { key: 'da06417052ab28135f651a6e3015462ae4d36915', 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", { key: 'd442c9ae9d377cd18d7853cb850182e5e117a199', class: Object.assign({}, arrowBlock.class()), ref: arrowEl => (this.arrowEl = arrowEl) }), h("bal-stack", { key: '078c31c4580e387b73b455afcc81610ea9ce7c9e', 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", { key: '14cee241ee538a5ff4075b255841deaa0ca06ff6', class: Object.assign({}, innerContentBlock.class()), ref: contentEl => (this.contentEl = contentEl), "data-test": "bal-popup-content" }, h("slot", { key: '834174282762c50461b4a9851c74416804905344' }))))));
-    }
-    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"], [4, "keydown", "listenOnKeyDown"], [1, "mousedown", "listenOnMouseDown"], [1, "mouseup", "listenOnMouseUp"], [0, "click", "listenOnComponentClick"]], {
-        "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;
-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;
-    } });
-}
+import { P as Popup, d as defineCustomElement$1 } from './bal-popup2.js';
 
 const BalPopup = Popup;
 const defineCustomElement = defineCustomElement$1;