/*!
 * Built with Stencil
 * By PostNord.
 */
import { en, awaitTopbar } from "../../../globals/helpers";
import { h, Host, forceUpdate } from "@stencil/core";
import { arrow_left } from "pn-design-assets/pn-assets/icons.js";
const translations = {
    sv: 'Tillbaka',
    en: 'Back',
    da: 'Tilbage',
    fi: 'Takaisin',
    no: 'Tilbake',
};
/**
 * The header component is a simple layout component used to display a page heading with optional text, buttons and tablist menu.
 *
 * @slot - The default slot is positioned below the heading and can be used to add additional text or elements.
 * @slot breadcrumb - This slot is reserved for a `pn-text-link` or another complex breadcrumb links structure.
 * Do not use this slot and the `go-back-href` prop at the same time.
 * @slot buttons - This slot is used to align multiple `pn-button` elements. However, we recommend a single button.
 * @slot menu - This slot is reserved for a `pn-tablist`.
 * This slot allows you to use the `href` prop on `pn-tab`, turning them into links instead of buttons.
 */
export class PnHeader {
    mo;
    hasBreadcrumb = false;
    hasButtons = false;
    hostElement;
    /** The `h1` text content. */
    heading;
    /** Set a inner container max-width, any width CSS value is accepted.  */
    maxWidth;
    setMaxWidth() {
        if (!this.maxWidth)
            return;
        this.hostElement.style.setProperty('--max-width', this.maxWidth);
    }
    /** The href for the go back link. If this is provided a button be displayed. */
    goBackHref;
    /** The text for the back link. */
    goBackText;
    /** Set the language manually, only use this prop if the pnTopbar is not loaded. Supported: sv, en, da, fi and no. */
    language = null;
    connectedCallback() {
        this.mo = new MutationObserver(() => {
            forceUpdate(this.hostElement);
            this.checkSlots();
        });
        this.mo.observe(this.hostElement, { subtree: true, childList: true });
    }
    disconnectedCallback() {
        this.mo?.disconnect();
    }
    async componentWillLoad() {
        this.checkSlots();
        this.setMaxWidth();
        if (this.language === null)
            await awaitTopbar(this.hostElement);
    }
    checkSlots() {
        this.hasBreadcrumb = !!this.hostElement.querySelector('[slot="breadcrumb"]');
        this.hasButtons = !!this.hostElement.querySelector('[slot="buttons"]');
    }
    showBreadcrumb() {
        return this.hasBreadcrumb || !!this.goBackHref?.length;
    }
    getButtonText() {
        return this.goBackText || translations[this.language || en];
    }
    render() {
        return (h(Host, { key: 'f19310a092999791304499d72c1b8e566949c0d3' }, h("header", { key: 'c6b50a1d93bf18f2050b37a9bdf69d3706b8aea4', class: "pn-header" }, h("div", { key: '7bfa1bd37978daf85d266b7306a71705bdc8cac5', class: "pn-header-container" }, h("div", { key: '09ed187b0f201d435c99b3c6e0f245ca48857d47', class: "pn-header-breadcrumbs", hidden: !this.showBreadcrumb() }, this.goBackHref && (h("pn-text-link", { key: 'ba657cb77da06d42009738c64d815a23d8dae527', label: this.getButtonText(), href: this.goBackHref, icon: arrow_left, leftIcon: true })), h("slot", { key: '278bf254489dbd76f53e047cd16c247bcfd696eb', name: "breadcrumb" })), h("div", { key: 'e9b2e873fb9ed01fabbd669aa7cace973a55cbfa', class: "pn-header-content" }, this.heading && h("h1", { key: 'baec009bf6807009ea53d184be9a8c15ea0253a0' }, this.heading), h("slot", { key: '7a777967b19a19077486d88d775b4a1c4f9d3134' })), h("div", { key: '46fa0cc4120b341e4a03c60bb865e077c6231986', class: "pn-header-buttons", hidden: !this.hasButtons }, h("slot", { key: '8932d6bbb5e1647be6b666d1879b163575dfd760', name: "buttons" })), h("slot", { key: 'afc6e39f45ef72ba762772f84a66cc24fdbcf368', name: "menu" })))));
    }
    static get is() { return "pn-header"; }
    static get originalStyleUrls() {
        return {
            "$": ["pn-header.scss"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["pn-header.css"]
        };
    }
    static get properties() {
        return {
            "heading": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "The `h1` text content."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "heading"
            },
            "maxWidth": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Set a inner container max-width, any width CSS value is accepted."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "max-width"
            },
            "goBackHref": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "The href for the go back link. If this is provided a button be displayed."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "go-back-href"
            },
            "goBackText": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "The text for the back link."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "go-back-text"
            },
            "language": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "PnLanguages",
                    "resolved": "\"\" | \"da\" | \"en\" | \"fi\" | \"no\" | \"sv\"",
                    "references": {
                        "PnLanguages": {
                            "location": "import",
                            "path": "@/globals/types",
                            "id": "src/globals/types.ts::PnLanguages",
                            "referenceLocation": "PnLanguages"
                        }
                    }
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Set the language manually, only use this prop if the pnTopbar is not loaded. Supported: sv, en, da, fi and no."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "language",
                "defaultValue": "null"
            }
        };
    }
    static get elementRef() { return "hostElement"; }
    static get watchers() {
        return [{
                "propName": "maxWidth",
                "methodName": "setMaxWidth"
            }];
    }
}
