@postnord/web-components
Version:
PostNord Web Components
81 lines (76 loc) • 4.31 kB
JavaScript
/*!
* 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: 'cffcb3a6763d13783bad5d6b75f5402cfd92798b' }, index.h("header", { key: '7b6d663687fe12546ed88aaea3b97efd82afac69', class: "pn-header" }, index.h("div", { key: 'aec8dbf448077f14036f0cd4885add8bb650d647', class: "pn-header-container" }, index.h("div", { key: 'bff188666b4aa2f5df35476eddf17ac4ba5ba182', class: "pn-header-breadcrumbs", hidden: !this.showBreadcrumb() }, this.goBackHref && (index.h("pn-text-link", { key: '0f2ad8624741de50b2ed1c13cf7cfcae9ad6c223', label: this.getButtonText(), href: this.goBackHref, icon: arrow_left.arrow_left, leftIcon: true })), index.h("slot", { key: 'ece3524aafbff34f28e0d9cc6eafc587e1daeba5', name: "breadcrumb" })), index.h("div", { key: '1356eb7d669666b327575a00abdf86bbf9a9e38a', class: "pn-header-content" }, this.heading && index.h("h1", { key: 'c3e1419dbf20e789c98ea32bb73a3e5e1021f75a' }, this.heading), index.h("slot", { key: '94491e7af78f2ee44bc45b3a261f2bcc8af81377' })), index.h("div", { key: 'e2db0dcd84f2fbeb58ab793cd4220861c2320433', class: "pn-header-buttons", hidden: !this.hasButtons }, index.h("slot", { key: '1745323caaf67eb3f316f4ff56451ffefb6d9b7e', name: "buttons" })), index.h("slot", { key: '17d56ba2c125c766c05ae84eb82839391447dd74', name: "menu" })))));
}
static get watchers() { return {
"maxWidth": [{
"setMaxWidth": 0
}]
}; }
};
PnHeader.style = pnHeaderCss();
exports.pn_header = PnHeader;