@postnord/web-components/components/pn-header.js

PostNord Web Components

/*!
 * Built with Stencil
 * By PostNord.
 */
import { proxyCustomElement, HTMLElement, forceUpdate, h, Host } from '@stencil/core/internal/client';
import { e as en, k as awaitTopbar } from './helpers.js';
import { a as arrow_left } from './arrow_left.js';
import { d as defineCustomElement$3 } from './pn-icon2.js';
import { d as defineCustomElement$2 } from './pn-text-link2.js';

const pnHeaderCss = "pn-header{display:block}pn-header h1{color:#2d2013;margin:0}pn-header p{color:#5e554a;margin:0}pn-header .pn-header-breadcrumbs{width:100%}pn-header .pn-header-container{position:relative;width:100%;max-width:var(--max-width);margin:0 auto;padding:clamp(1em, 3vw, 2em) clamp(0.5em, 3vw, 2em);display:flex;flex-wrap:wrap;align-items:center;gap:1.5em}pn-header .pn-header-container>pn-text-link{display:block}pn-header .pn-header-content{flex:1 1 auto;display:flex;flex-direction:column;gap:1em}pn-header .pn-header [slot=buttons]{display:flex;flex-direction:column;gap:1em}";

const translations = {
    sv: 'Tillbaka',
    en: 'Back',
    da: 'Tilbage',
    fi: 'Takaisin',
    no: 'Tilbake',
};
const PnHeader$1 = /*@__PURE__*/ proxyCustomElement(class PnHeader extends HTMLElement {
    constructor(registerHost) {
        super();
        if (registerHost !== false) {
            this.__registerHost();
        }
    }
    mo;
    hasBreadcrumb = false;
    hasMenu = false;
    hasButtons = false;
    get hostElement() { return this; }
    /** Heading text. */
    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;
    setLanguage() {
        this.goBackTextTranslated = this.goBackText || translations[this.language || en];
    }
    goBackTextTranslated;
    async componentWillLoad() {
        if (this.mo)
            this.mo.disconnect();
        this.mo = new MutationObserver(() => {
            forceUpdate(this.hostElement);
            this.checkSlots();
        });
        this.mo.observe(this.hostElement, { childList: true, subtree: true });
        this.checkSlots();
        this.setMaxWidth();
        this.setLanguage();
        if (this.language)
            return;
        await awaitTopbar(this.hostElement);
    }
    checkSlots() {
        this.hasBreadcrumb = !!this.hostElement.querySelector('[slot="breadcrumb"]');
        this.hasMenu = !!this.hostElement.querySelector('[slot="menu"]');
        this.hasButtons = !!this.hostElement.querySelector('[slot="buttons"]');
    }
    showBreadcrumb() {
        return this.hasBreadcrumb || !!this.goBackHref?.length;
    }
    render() {
        return (h(Host, { key: '108e455b065af488f5d7695e42b560e623c0f5a1' }, h("header", { key: 'cac8db1772de2161130573e6c3cfb59034d526bc', class: "pn-header" }, h("div", { key: 'd9e0080de9e0c49a3bb61d3f2b0703f06987dd59', class: "pn-header-container" }, h("div", { key: '710e2af325f7fc2e978b10a55681cd63c0318820', class: "pn-header-breadcrumbs", hidden: !this.showBreadcrumb() }, this.goBackHref && (h("pn-text-link", { key: '015afb6977cd80e7f05fc4c6c8570c46d71cba41', label: this.goBackTextTranslated, href: this.goBackHref, icon: arrow_left, leftIcon: true })), h("slot", { key: '9927d7dcc6dfdb7af7224f711c8fdb85815a4cf4', name: "breadcrumb" })), h("div", { key: '46eb3efb3beb5c483cb440bcae59a20e2f2ccf2c', class: "pn-header-content" }, this.heading && h("h1", { key: 'f5aa3c6dd4376a193cc2f2019a399d04b2851f74' }, this.heading), h("slot", { key: '38838b2560a7123e4b643aaeeace129b324712ed' })), h("div", { key: '2b174446cb67d0c3b0ec675911c7b072785f6868', class: "pn-header-buttons", hidden: !this.hasButtons }, h("slot", { key: 'ad4b20d2658ab680ac1a39cba4d4631a7ceecd8c', name: "buttons" })), h("slot", { key: '793f3704789ec91c5589e4c7e5829d9b65ab33cc', name: "menu" })))));
    }
    static get watchers() { return {
        "maxWidth": ["setMaxWidth"],
        "language": ["setLanguage"]
    }; }
    static get style() { return pnHeaderCss; }
}, [260, "pn-header", {
        "heading": [1],
        "maxWidth": [1, "max-width"],
        "goBackHref": [1, "go-back-href"],
        "goBackText": [1, "go-back-text"],
        "language": [1],
        "goBackTextTranslated": [32]
    }, undefined, {
        "maxWidth": ["setMaxWidth"],
        "language": ["setLanguage"]
    }]);
function defineCustomElement$1() {
    if (typeof customElements === "undefined") {
        return;
    }
    const components = ["pn-header", "pn-icon", "pn-text-link"];
    components.forEach(tagName => { switch (tagName) {
        case "pn-header":
            if (!customElements.get(tagName)) {
                customElements.define(tagName, PnHeader$1);
            }
            break;
        case "pn-icon":
            if (!customElements.get(tagName)) {
                defineCustomElement$3();
            }
            break;
        case "pn-text-link":
            if (!customElements.get(tagName)) {
                defineCustomElement$2();
            }
            break;
    } });
}

const PnHeader = PnHeader$1;
const defineCustomElement = defineCustomElement$1;

export { PnHeader, defineCustomElement };
//# sourceMappingURL=pn-header.js.map

//# sourceMappingURL=pn-header.js.map