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

PostNord Web Components

/*!
 * Built with Stencil
 * By PostNord.
 */
import { r as registerInstance, g as getElement, f as forceUpdate, h, a as Host } from './index-5606614b.js';
import { e as en, k as awaitTopbar } from './helpers-9dac5241.js';
import { a as arrow_left } from './arrow_left-f0d725e6.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 PnHeaderStyle0 = pnHeaderCss;

const translations = {
    sv: 'Tillbaka',
    en: 'Back',
    da: 'Tilbage',
    fi: 'Takaisin',
    no: 'Tilbake',
};
const PnHeader = class {
    constructor(hostRef) {
        registerInstance(this, hostRef);
        this.heading = undefined;
        this.maxWidth = undefined;
        this.goBackHref = undefined;
        this.goBackText = undefined;
        this.language = null;
        this.goBackTextTranslated = undefined;
    }
    mo;
    hasBreadcrumb = false;
    hasMenu = false;
    hasButtons = false;
    get hostElement() { return getElement(this); }
    setMaxWidth() {
        if (!this.maxWidth)
            return;
        this.hostElement.style.setProperty('--max-width', this.maxWidth);
    }
    setLanguage() {
        this.goBackTextTranslated = this.goBackText || translations[this.language || en];
    }
    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: '8493b17c1f553672941e7bddf7382e3e80377c71' }, h("header", { key: '2026f9c75dde59abda45a0e376c24907657fe8e7', class: "pn-header" }, h("div", { key: 'dbf01bc588ed38cccb0f951fed4047c9e8192354', class: "pn-header-container" }, h("div", { key: '115a52c44b0e5addf49e4807b21adeb84a531de9', class: "pn-header-breadcrumbs", hidden: !this.showBreadcrumb() }, this.goBackHref && (h("pn-text-link", { key: 'b2cce5ed46b6dcdb10a72bb806c5a406b6ff5e15', label: this.goBackTextTranslated, href: this.goBackHref, icon: arrow_left, leftIcon: true })), h("slot", { key: '27a3d3c38b30cba6d51c79a2c0bd18c6afa13a4c', name: "breadcrumb" })), h("div", { key: '8134ae8b844e9db548cb3db6bf995479c404fff1', class: "pn-header-content" }, this.heading && h("h1", { key: '3bf46740c66ca137adbc50fe6cdde178e82bfdbc' }, this.heading), h("slot", { key: '94ee53b3dee5a388ef84ae91c54a5b96c14a2661' })), h("div", { key: 'd44728888d295fd84285b28102b348da90ba5d80', class: "pn-header-buttons", hidden: !this.hasButtons }, h("slot", { key: '7af9da3f81bedb69639f7f723c24d93caebaba24', name: "buttons" })), h("slot", { key: '6c55a22b94293e59c8fdb33906c2d4612d067cc4', name: "menu" })))));
    }
    static get watchers() { return {
        "maxWidth": ["setMaxWidth"],
        "language": ["setLanguage"]
    }; }
};
PnHeader.style = PnHeaderStyle0;

export { PnHeader as pn_header };

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