@postnord/web-components
Version:
PostNord Web Components
200 lines (199 loc) • 8.04 kB
JavaScript
/*!
* Built with Stencil
* By PostNord.
*/
import { en, awaitTopbar } from "../../../globals/helpers";
import { h, Host, forceUpdate } from "@stencil/core";
import { arrow_left } from "pn-design-assets/pn-assets/icons.js";
const translations = {
sv: 'Tillbaka',
en: 'Back',
da: 'Tilbage',
fi: 'Takaisin',
no: 'Tilbake',
};
/**
* The header component is a simple layout component used to display a page heading with optional text, buttons and tablist menu.
*
* @slot - The default slot is positioned below the heading and can be used to add additional text or elements.
* @slot breadcrumb - This slot is reserved for a `pn-text-link` or another complex breadcrumb links structure.
* Do not use this slot and the `go-back-href` prop at the same time.
* @slot buttons - This slot is used to align multiple `pn-button` elements. However, we recommend a single button.
* @slot menu - This slot is reserved for a `pn-tablist`.
* This slot allows you to use the `href` prop on `pn-tab`, turning them into links instead of buttons.
*/
export class PnHeader {
mo;
hasBreadcrumb = false;
hasButtons = false;
hostElement;
/** 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(() => {
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 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 || en];
}
render() {
return (h(Host, { key: '82364cab3b3aece27e10f06e565b8ce0d6597f14' }, h("header", { key: '368dfc4db49a8903c8cad81c9b161fe25095e2d1', class: "pn-header" }, h("div", { key: 'f98b1ba196ed150cc27f9136f25ad46c31d7424e', class: "pn-header-container" }, h("div", { key: '6c7465e8060690aa36a4e405f640cd23bfa0c0f2', class: "pn-header-breadcrumbs", hidden: !this.showBreadcrumb() }, this.goBackHref && (h("pn-text-link", { key: 'd6dc1b2b5a22e80c95d42fadcd4912de1df35bb8', label: this.getButtonText(), href: this.goBackHref, icon: arrow_left, leftIcon: true })), h("slot", { key: '44f163e4552a10f1340e51752bc2d825d74391ad', name: "breadcrumb" })), h("div", { key: 'afb2d897acf67744c1a0eac4d5089f40bec07d40', class: "pn-header-content" }, this.heading && h("h1", { key: '8135619a44048a4072453140f6bd0e4fb5e349aa' }, this.heading), h("slot", { key: 'c013b74286636fd9ebfe575161ba8829d0eac903' })), h("div", { key: '5942ae47d1426f033565d20f294a9e0906600dbb', class: "pn-header-buttons", hidden: !this.hasButtons }, h("slot", { key: '287ff16c616bf76f832a867ad077d1f62a29d9e0', name: "buttons" })), h("slot", { key: '7e9778bf8258cae60e27ceb3c1638f759ff02e82', name: "menu" })))));
}
static get is() { return "pn-header"; }
static get originalStyleUrls() {
return {
"$": ["pn-header.scss"]
};
}
static get styleUrls() {
return {
"$": ["pn-header.css"]
};
}
static get properties() {
return {
"heading": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "The `h1` text content."
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "heading"
},
"maxWidth": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "Set a inner container max-width, any width CSS value is accepted."
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "max-width"
},
"goBackHref": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "The href for the go back link. If this is provided a button be displayed."
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "go-back-href"
},
"goBackText": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "The text for the back link."
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "go-back-text"
},
"language": {
"type": "string",
"mutable": false,
"complexType": {
"original": "PnLanguages",
"resolved": "\"\" | \"da\" | \"en\" | \"fi\" | \"no\" | \"sv\"",
"references": {
"PnLanguages": {
"location": "import",
"path": "@/globals/types",
"id": "src/globals/types.ts::PnLanguages",
"referenceLocation": "PnLanguages"
}
}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "Set the language manually, only use this prop if the pnTopbar is not loaded. Supported: sv, en, da, fi and no."
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "language",
"defaultValue": "null"
}
};
}
static get elementRef() { return "hostElement"; }
static get watchers() {
return [{
"propName": "maxWidth",
"methodName": "setMaxWidth"
}];
}
}