import { proxyCustomElement, HTMLElement, 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 balBreakpoints } from './breakpoints.subject.js';
import { L as ListenToBreakpoints } from './breakpoints.decorator.js';
import { b as balBrowser } from './browser.js';

const PopoverContent = /*@__PURE__*/ proxyCustomElement(class PopoverContent extends HTMLElement {
    constructor() {
        super();
        this.__registerHost();
        this.isTouch = balBreakpoints.isTouch; // need this part to improve a none side effect import
        /**
         * If `true` the popover has no padding space.
         */
        this.spaceless = false;
        /**
         * Limit the height of the popover content. Pass the amount of pixel.
         */
        this.scrollable = 0;
        /**
         * Define the max width of the popover content.
         */
        this.contentWidth = 0;
        /**
         * Define the min width of the popover content.
         */
        this.contentMinWidth = 0;
        /**
         * Defines background color of the content.
         */
        this.color = 'white';
        /**
         * If `true` the content has a min width of 100%.
         */
        this.expanded = false;
        /**
         * Defines border-radius of popover content.
         */
        this.radius = 'normal';
        /**
         * If `true` the popover does not have the shadow
         */
        this.noShadow = false;
        /**
         * If `true` the content will have a divider line on top
         */
        this.mobileTop = false;
        this.contentHeightOnTop = 0;
    }
    breakpointListener(_breakpoints) {
        if (balBrowser.hasWindow) {
            this.contentHeightOnTop = window.innerHeight - 64;
        }
    }
    get innerStyle() {
        let scrollable = {};
        if (this.scrollable > 0) {
            scrollable = {
                'max-height': `${this.scrollable}px`,
                'overflow': 'auto',
            };
        }
        return Object.assign({}, scrollable);
    }
    get contentStyle() {
        let contentWidth = {};
        let contentMinWidth = {};
        const contentHeightOnTopNav = {
            '--bal-popover-content-height-top-nav': `${this.contentHeightOnTop / 16}rem`,
        };
        if (this.contentWidth > 0) {
            contentWidth = { 'max-width': `${this.contentWidth}px` };
        }
        if (this.contentMinWidth > 0) {
            contentMinWidth = { 'min-width': `${this.contentMinWidth}px` };
        }
        return Object.assign(Object.assign(Object.assign({}, contentWidth), contentMinWidth), contentHeightOnTopNav);
    }
    componentWillLoad() {
        if (balBrowser.hasWindow) {
            this.contentHeightOnTop = window.innerHeight - 64;
        }
    }
    render() {
        const block = BEM.block('popover').element('content');
        return (h(Host, { key: '8c5281cc1fe731c729e6fb2859451b9872254f57', class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier('expanded').class(this.expanded)), block.modifier('spaceless').class(this.spaceless)), block.modifier('no-shadow').class(this.noShadow)), block.modifier(`radius-${this.radius}`).class()), block.modifier(`color-${this.color}`).class()), block.modifier('on-top').class(this.mobileTop)), "data-testid": "bal-popover-content", role: "tooltip", style: this.contentStyle }, h("div", { key: '10fa564b011b3f0a0e1bd0c338d09970f3ce809e', class: Object.assign({}, block.element('inner').class()), style: this.innerStyle }, h("slot", { key: 'cddf8ead7a7a6028a54b2d0a152f68a7dbeb9462' })), h("div", { key: 'acaa433bb6c396d86d927f95013fae818e694ab3', class: Object.assign({}, block.element('arrow').class()), "data-popper-arrow": true })));
    }
    get el() { return this; }
}, [4, "bal-popover-content", {
        "spaceless": [4],
        "scrollable": [2],
        "contentWidth": [2, "content-width"],
        "contentMinWidth": [2, "content-min-width"],
        "color": [1],
        "expanded": [4],
        "radius": [1],
        "noShadow": [4, "no-shadow"],
        "mobileTop": [4, "mobile-top"],
        "contentHeightOnTop": [32]
    }]);
__decorate([
    ListenToBreakpoints(),
    __metadata("design:type", Function),
    __metadata("design:paramtypes", [Object]),
    __metadata("design:returntype", void 0)
], PopoverContent.prototype, "breakpointListener", null);
function defineCustomElement() {
    if (typeof customElements === "undefined") {
        return;
    }
    const components = ["bal-popover-content"];
    components.forEach(tagName => { switch (tagName) {
        case "bal-popover-content":
            if (!customElements.get(tagName)) {
                customElements.define(tagName, PopoverContent);
            }
            break;
    } });
}

export { PopoverContent as P, defineCustomElement as d };
