import { h } from "@stencil/core";
import { HeaderCenterContentWidth, LayoutBlockContainer, UtilBreakpointObserverBreakpoints, } from "../../../enums";
/**
 * @enums HeaderCenterContentWidth - header-center-content-width.enum.ts
 * @enums LayoutBlockContainer - layout-block-container.enum.ts
 * @enums UtilBreakpointObserverBreakpoints - util-breakpoint-observer-breakpoints.enum.ts
 * @swedishName Sidhuvud
 */
export class Header {
    constructor() {
        this.afActive = undefined;
        this.isMobile = undefined;
        this.hasNavigation = undefined;
        this.afSystemName = undefined;
        this.afMenuButtonText = undefined;
        this.afAriaLabel = undefined;
        this.afHideSystemName = undefined;
        this.afCentered = HeaderCenterContentWidth.DEFAULT;
    }
    toggleHandler(e) {
        const element = e.target;
        if (element.matches('digi-navigation-sidebar-button')) {
            this.afActive = true;
        }
    }
    closeHandler() {
        this.afActive = false;
    }
    get cssModifiers() {
        return {
            'digi-header--af-centered': this.afCentered !== HeaderCenterContentWidth.DEFAULT,
            'digi-header--has-navigation': this.hasNavigation
        };
    }
    handleBreakpointObserver(e) {
        this.isMobile = e.detail.value === UtilBreakpointObserverBreakpoints.SMALL;
    }
    get ariaLabel() {
        return this.afAriaLabel || this.afSystemName;
    }
    /**
     * Ta reda på om vi har en populerad navigations-slot. Om inte så renderar vi ingen menyknapp
     * @en Find out if we have a populated navigation slot. If, we don't, let's not bother rendering the navigation toggle button
     */
    checkNavigation() {
        this.hasNavigation = !!this.hostElement.querySelector('[slot="header-navigation"]');
    }
    /**
    * Om vi inte har vare sig digi-title-logo eller digi-logo, men vi har ett af-system-name så renderar vi en digi-title-logo som fallback
    * @en If we have neither a digi-title-logo or a digi-logo,but we do have an af-system name, we render a digi-title-logo as a fallback.
    *
    * This will be removed when we finally deprecate af-syetem-name.
    */
    createLegacyLogoIfNeeded() {
        const logoSlot = this.hostElement.querySelector('[slot="header-logo"]');
        const useFallbackTitleLogo = !!logoSlot
            && !this.hostElement.querySelector('digi-title-logo')
            && !this.hostElement.querySelector('digi-logo')
            && !!this.afSystemName;
        if (useFallbackTitleLogo) {
            logoSlot.innerHTML = this.afHideSystemName
                ? `<digi-logo af-only-symbol="true"></digi-logo>`
                : `<digi-title-logo af-aria-label=${this.afSystemName}>
            <div slot="logo-one-row">
              ${this.afSystemName}
            </div>
          </digi-title-logo>
        `;
        }
    }
    componentWillLoad() {
        this.checkNavigation();
        this.createLegacyLogoIfNeeded();
    }
    /**
     * If we have a <digi-logo> in the logo slot, make sure its afOnlySymbol prop
     * is true when we're in mobile
     */
    componentWillRender() {
        const afLogo = this.hostElement.querySelector('digi-logo');
        if (afLogo) {
            afLogo.afOnlySymbol = this.isMobile || afLogo.afOnlySymbol;
        }
    }
    renderContent() {
        return (h("div", { class: "digi-header__wrapper" }, h("slot", { name: "header-logo" }), h("div", { class: "digi-header__content" }, h("slot", { name: "header-content" })), this.hasNavigation && this.isMobile && (h("digi-navigation-sidebar-button", { "aria-hidden": this.afActive ? 'true' : 'false', "af-text": this.afMenuButtonText }))));
    }
    render() {
        return (h("header", { key: '1fde33690866be488eb23959e3e76f31a91f2ab3', "aria-label": this.ariaLabel, class: Object.assign({ 'digi-header': true }, this.cssModifiers) }, h("digi-util-breakpoint-observer", { key: '0588ccb62902be24a2f4153877eae225677f1863', onAfOnChange: (e) => this.handleBreakpointObserver(e) }), h("digi-layout-block", { key: '20a3a21170f52093b9b9e42df4d8106175d15de2', afContainer: LayoutBlockContainer.NONE }, this.afCentered !== HeaderCenterContentWidth.DEFAULT ? (h("digi-layout-container", { "af-max-width": this.afCentered }, this.renderContent())) : (this.renderContent()), h("div", { key: 'de8922c8b23cc80abd5f124a97f8ffde66a7cf73', class: "digi-header__border" }), h("slot", { key: '21682884e8264b02ae2dea84c028c4ec4ee61ee4', name: "header-navigation" }))));
    }
    static get is() { return "digi-header"; }
    static get encapsulation() { return "scoped"; }
    static get originalStyleUrls() {
        return {
            "$": ["header.scss"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["header.css"]
        };
    }
    static get properties() {
        return {
            "afSystemName": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "en",
                            "text": "Set system name."
                        }, {
                            "name": "deprecated",
                            "text": "Anv\u00E4nd afAriaLabel ist\u00E4llet"
                        }],
                    "text": "S\u00E4tter systemnamnet"
                },
                "getter": false,
                "setter": false,
                "attribute": "af-system-name",
                "reflect": false
            },
            "afMenuButtonText": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "en",
                            "text": "sets the text for menu button in mobile"
                        }],
                    "text": "S\u00E4tter text f\u00F6r menyknappen i mobill\u00E4ge"
                },
                "getter": false,
                "setter": false,
                "attribute": "af-menu-button-text",
                "reflect": false
            },
            "afAriaLabel": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "en",
                            "text": "Input aria-label attribute"
                        }],
                    "text": "S\u00E4tter attributet 'aria-label'"
                },
                "getter": false,
                "setter": false,
                "attribute": "af-aria-label",
                "reflect": false
            },
            "afHideSystemName": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "en",
                            "text": "Hide system name"
                        }, {
                            "name": "deprecated",
                            "text": "Systemnamnet \u00E4r en del av titellogotypen och d\u00F6ljs automatiskt vid sm\u00E5 sk\u00E4rmstorlekar"
                        }],
                    "text": "D\u00F6ljer systemnamnet"
                },
                "getter": false,
                "setter": false,
                "attribute": "af-hide-system-name",
                "reflect": false
            },
            "afCentered": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "HeaderCenterContentWidth",
                    "resolved": "HeaderCenterContentWidth.DEFAULT | HeaderCenterContentWidth.WIDTH_1200 | HeaderCenterContentWidth.WIDTH_1400",
                    "references": {
                        "HeaderCenterContentWidth": {
                            "location": "import",
                            "path": "../../../enums",
                            "id": "src/enums.ts::HeaderCenterContentWidth"
                        }
                    }
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "en",
                            "text": "Applies a container around the menu's content, but allows the background to maintain full width. Width aligns with digi-layout-container."
                        }],
                    "text": "L\u00E4gger en container runt menyns inneh\u00E5ll, men l\u00E5ter bakgrunden beh\u00E5lla full bredd. Bredden linjerar med digi-layout-container."
                },
                "getter": false,
                "setter": false,
                "attribute": "af-centered",
                "reflect": false,
                "defaultValue": "HeaderCenterContentWidth.DEFAULT"
            }
        };
    }
    static get states() {
        return {
            "afActive": {},
            "isMobile": {},
            "hasNavigation": {}
        };
    }
    static get elementRef() { return "hostElement"; }
    static get listeners() {
        return [{
                "name": "afOnToggle",
                "method": "toggleHandler",
                "target": "window",
                "capture": false,
                "passive": false
            }, {
                "name": "afOnClose",
                "method": "closeHandler",
                "target": undefined,
                "capture": false,
                "passive": false
            }];
    }
}
