@baloise/ds-core 0.0.5-nightly.e56f740

package/components/bal-popup.js

@@ -0,0 +1,693 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { _ as __decorate, a as __metadata } from './tslib.es6.js';
+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 { 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 { 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) {
+        //
+        // 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 = 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;
+
+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, { 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'),
+    __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;
+    } });
+}
+
+const BalPopup = Popup;
+const defineCustomElement = defineCustomElement$1;
+
+export { BalPopup, defineCustomElement };