import { __decorate, __metadata } from "tslib";
import { h, Host } from "@stencil/core";
import { BEM } from "../../../utils/bem";
import { balBreakpoints, ListenToBreakpoints } from "../../../utils/breakpoints";
import { balBrowser } from "../../../utils/browser";
export class PopoverContent {
    constructor() {
        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: 'bc08fb0e5736f9393c5396af4a84f1127b6e4c4e', 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: 'f49ffa520c2e1cc95942973939eeff059900a9bc', class: Object.assign({}, block.element('inner').class()), style: this.innerStyle }, h("slot", { key: '3394b3dd89ce64a0d379e66b1ffb169e9f0401c4' })), h("div", { key: '5f75d67a77ae49667c3863b738bdc03d1dcb8121', class: Object.assign({}, block.element('arrow').class()), "data-popper-arrow": true })));
    }
    static get is() { return "bal-popover-content"; }
    static get properties() {
        return {
            "spaceless": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "If `true` the popover has no padding space."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "spaceless",
                "defaultValue": "false"
            },
            "scrollable": {
                "type": "number",
                "mutable": false,
                "complexType": {
                    "original": "number",
                    "resolved": "number",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Limit the height of the popover content. Pass the amount of pixel."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "scrollable",
                "defaultValue": "0"
            },
            "contentWidth": {
                "type": "number",
                "mutable": false,
                "complexType": {
                    "original": "number",
                    "resolved": "number",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Define the max width of the popover content."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "content-width",
                "defaultValue": "0"
            },
            "contentMinWidth": {
                "type": "number",
                "mutable": false,
                "complexType": {
                    "original": "number",
                    "resolved": "number",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Define the min width of the popover content."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "content-min-width",
                "defaultValue": "0"
            },
            "color": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "BalProps.BalPopoverContentColor",
                    "resolved": "\"grey\" | \"white\"",
                    "references": {
                        "BalProps": {
                            "location": "global",
                            "id": "global::BalProps"
                        }
                    }
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Defines background color of the content."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "color",
                "defaultValue": "'white'"
            },
            "expanded": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "If `true` the content has a min width of 100%."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "expanded",
                "defaultValue": "false"
            },
            "radius": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "BalProps.BalPopoverContentRadius",
                    "resolved": "\"large\" | \"large-bottom-none\" | \"large-top-none\" | \"none\" | \"normal\" | \"normal-bottom-none\" | \"normal-top-none\"",
                    "references": {
                        "BalProps": {
                            "location": "global",
                            "id": "global::BalProps"
                        }
                    }
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Defines border-radius of popover content."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "radius",
                "defaultValue": "'normal'"
            },
            "noShadow": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "If `true` the popover does not have the shadow"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "no-shadow",
                "defaultValue": "false"
            },
            "mobileTop": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "If `true` the content will have a divider line on top"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "mobile-top",
                "defaultValue": "false"
            }
        };
    }
    static get states() {
        return {
            "contentHeightOnTop": {}
        };
    }
    static get elementRef() { return "el"; }
}
__decorate([
    ListenToBreakpoints(),
    __metadata("design:type", Function),
    __metadata("design:paramtypes", [Object]),
    __metadata("design:returntype", void 0)
], PopoverContent.prototype, "breakpointListener", null);
