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

PostNord Web Components

/*!
 * Built with Stencil
 * By PostNord.
 */
'use strict';

var index = require('./index-DWu-2oJc.js');
var index$1 = require('./index.cjs.js');
var arrow_left = require('./arrow_left-Crkz484c.js');

const pnHeaderCss = () => `${index.transformTag("pn-header")}{display:block}${index.transformTag("pn-header")} h1{color:#2d2013;margin:0}${index.transformTag("pn-header")} p{color:#5e554a;margin:0}${index.transformTag("pn-header")} .pn-header-breadcrumbs{width:100%}${index.transformTag("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}${index.transformTag("pn-header")} .pn-header-container>${index.transformTag("pn-text-link")}{display:block}${index.transformTag("pn-header")} .pn-header-content{flex:1 1 auto;display:flex;flex-direction:column;gap:1em}${index.transformTag("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 = class {
    constructor(hostRef) {
        index.registerInstance(this, hostRef);
    }
    mo;
    hasBreadcrumb = false;
    hasButtons = false;
    get hostElement() { return index.getElement(this); }
    /** 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(() => {
            index.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 index$1.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 || index$1.en];
    }
    render() {
        return (index.h(index.Host, { key: '82364cab3b3aece27e10f06e565b8ce0d6597f14' }, index.h("header", { key: '368dfc4db49a8903c8cad81c9b161fe25095e2d1', class: "pn-header" }, index.h("div", { key: 'f98b1ba196ed150cc27f9136f25ad46c31d7424e', class: "pn-header-container" }, index.h("div", { key: '6c7465e8060690aa36a4e405f640cd23bfa0c0f2', class: "pn-header-breadcrumbs", hidden: !this.showBreadcrumb() }, this.goBackHref && (index.h("pn-text-link", { key: 'd6dc1b2b5a22e80c95d42fadcd4912de1df35bb8', label: this.getButtonText(), href: this.goBackHref, icon: arrow_left.arrow_left, leftIcon: true })), index.h("slot", { key: '44f163e4552a10f1340e51752bc2d825d74391ad', name: "breadcrumb" })), index.h("div", { key: 'afb2d897acf67744c1a0eac4d5089f40bec07d40', class: "pn-header-content" }, this.heading && index.h("h1", { key: '8135619a44048a4072453140f6bd0e4fb5e349aa' }, this.heading), index.h("slot", { key: 'c013b74286636fd9ebfe575161ba8829d0eac903' })), index.h("div", { key: '5942ae47d1426f033565d20f294a9e0906600dbb', class: "pn-header-buttons", hidden: !this.hasButtons }, index.h("slot", { key: '287ff16c616bf76f832a867ad077d1f62a29d9e0', name: "buttons" })), index.h("slot", { key: '7e9778bf8258cae60e27ceb3c1638f759ff02e82', name: "menu" })))));
    }
    static get watchers() { return {
        "maxWidth": [{
                "setMaxWidth": 0
            }]
    }; }
};
PnHeader.style = pnHeaderCss();

exports.pn_header = PnHeader;