import { h, Host } from "@stencil/core";
import { BEM } from "../../utils/bem";
export class Navbar {
    constructor() {
        /**
         * It `true` the navbar has a white background. Always use the blue header.
         */
        this.light = false;
        /**
         * Defines the type of navbar. App is used for almost every web applications
         * like the portal app. For our sales funnel we recommend to use the simple navbar.
         * Meta and main are used for the website.
         */
        this.interface = 'app';
        /**
         * Sets the content content width with the regular container classes
         */
        this.container = '';
    }
    interfaceHandler() {
        this.updateProps(['bal-navbar-brand', 'bal-navbar-menu', 'bal-navbar-menu-start', 'bal-navbar-menu-end'], 'interface');
    }
    /**
     * Toggles the menu on request method can be used from outside to open or close the menu
     */
    async toggleMenu() {
        const brand = this.element.querySelector('bal-navbar-brand');
        if (brand) {
            await brand.toggle();
        }
    }
    componentWillLoad() {
        this.interfaceHandler();
    }
    updateProps(selectors, key) {
        const value = this[key];
        if (value !== undefined) {
            this.notifyComponents(selectors, input => (input[key] = value));
        }
    }
    notifyComponents(selectors, callback) {
        const components = this.element.querySelectorAll(selectors.join(', '));
        components.forEach(c => callback(c));
    }
    render() {
        const navbarEl = BEM.block('navbar');
        return (h(Host, { key: 'e3ebbb80f7a7bdd0c832b55bd1a1c0981374fbac', class: Object.assign(Object.assign(Object.assign({}, navbarEl.class()), navbarEl.modifier(`context-${this.interface}`).class()), navbarEl.modifier(`is-light`).class(this.light)) }, h("nav", { key: 'be15f3d1a10b38b5bdfd2135c6c5d13aedee83ae', role: "navigation", "aria-label": "main navigation", class: Object.assign(Object.assign({}, navbarEl.element('nav').class()), { container: true, [`is-${this.container}`]: this.container !== '' }) }, h("slot", { key: 'b6e746b68f03e11fd4a40f37d693401d37be45cf' }))));
    }
    static get is() { return "bal-navbar"; }
    static get originalStyleUrls() {
        return {
            "$": ["bal-navbar.sass"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["bal-navbar.css"]
        };
    }
    static get properties() {
        return {
            "light": {
                "type": "boolean",
                "attribute": "light",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "It `true` the navbar has a white background. Always use the blue header."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "defaultValue": "false"
            },
            "interface": {
                "type": "string",
                "attribute": "interface",
                "mutable": false,
                "complexType": {
                    "original": "BalProps.BalNavbarInterface",
                    "resolved": "\"app\" | \"simple\"",
                    "references": {
                        "BalProps": {
                            "location": "global",
                            "id": "global::BalProps"
                        }
                    }
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Defines the type of navbar. App is used for almost every web applications\nlike the portal app. For our sales funnel we recommend to use the simple navbar.\nMeta and main are used for the website."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "defaultValue": "'app'"
            },
            "container": {
                "type": "string",
                "attribute": "container",
                "mutable": false,
                "complexType": {
                    "original": "'fluid' | 'detail-page' | 'compact' | 'blog-page' | 'wide' | ''",
                    "resolved": "\"\" | \"blog-page\" | \"compact\" | \"detail-page\" | \"fluid\" | \"wide\"",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Sets the content content width with the regular container classes"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "defaultValue": "''"
            }
        };
    }
    static get methods() {
        return {
            "toggleMenu": {
                "complexType": {
                    "signature": "() => Promise<void>",
                    "parameters": [],
                    "references": {
                        "Promise": {
                            "location": "global",
                            "id": "global::Promise"
                        },
                        "HTMLBalNavbarBrandElement": {
                            "location": "global",
                            "id": "global::HTMLBalNavbarBrandElement"
                        }
                    },
                    "return": "Promise<void>"
                },
                "docs": {
                    "text": "Toggles the menu on request method can be used from outside to open or close the menu",
                    "tags": []
                }
            }
        };
    }
    static get elementRef() { return "element"; }
    static get watchers() {
        return [{
                "propName": "interface",
                "methodName": "interfaceHandler"
            }];
    }
}
