@postnord/web-components
Version:
PostNord Web Components
86 lines (80 loc) • 4.37 kB
JavaScript
/*!
* Built with Stencil
* By PostNord.
*/
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
const index = require('./index-78a59ba0.js');
const helpers = require('./helpers-2e2349b4.js');
const arrow_left = require('./arrow_left-d8f2c601.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) {
index.registerInstance(this, hostRef);
}
mo;
hasBreadcrumb = false;
hasMenu = false;
hasButtons = false;
get hostElement() { return index.getElement(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 || helpers.en];
}
goBackTextTranslated;
async componentWillLoad() {
if (this.mo)
this.mo.disconnect();
this.mo = new MutationObserver(() => {
index.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 helpers.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 (index.h(index.Host, { key: '07db4e2989bad2c31854e3027e758d34c3aaf192' }, index.h("header", { key: '465b0e73e01985282ee142ae539c432630173529', class: "pn-header" }, index.h("div", { key: 'a65dcf2d28781308e3d91433987e3a773b30da12', class: "pn-header-container" }, index.h("div", { key: '18d6d93d83ce7f681f52782ace7daa9c75b71ffc', class: "pn-header-breadcrumbs", hidden: !this.showBreadcrumb() }, this.goBackHref && (index.h("pn-text-link", { key: '35cbde24fb1bcc9d9d327e20acf5be4afb08e17e', label: this.goBackTextTranslated, href: this.goBackHref, icon: arrow_left.arrow_left, leftIcon: true })), index.h("slot", { key: 'f4716b9ca6e7ae4c8be1cc08ced559ee6b73092c', name: "breadcrumb" })), index.h("div", { key: '501fc1cef17951ad68745d42b59d97f814ad7681', class: "pn-header-content" }, this.heading && index.h("h1", { key: 'e07f0524c2f6e9d623c7f5143c2b0c069836f0f7' }, this.heading), index.h("slot", { key: 'e0c67ecc93e7e93a7ecf05d92d9051cd0da18e72' })), index.h("div", { key: '4e483ade9e3704872f1cba25d80229f19078c503', class: "pn-header-buttons", hidden: !this.hasButtons }, index.h("slot", { key: '24fa16a74d9f5879f14b9b032d567bd28630f070', name: "buttons" })), index.h("slot", { key: '2ee40b1721ccc2f076525d32bf74720b9311a5f3', name: "menu" })))));
}
static get watchers() { return {
"maxWidth": ["setMaxWidth"],
"language": ["setLanguage"]
}; }
};
PnHeader.style = PnHeaderStyle0;
exports.pn_header = PnHeader;
//# sourceMappingURL=pn-header.cjs.entry.js.map