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

PostNord Web Components

/*!
 * Built with Stencil
 * By PostNord.
 */
import{transformTag as e,proxyCustomElement as a,HTMLElement as t,forceUpdate as n,h as s,Host as i}from"@stencil/core/internal/client";import{k as d,e as c}from"./helpers.js";import{a as r}from"./arrow_left.js";import{d as h}from"./pn-icon2.js";import{d as o}from"./pn-text-link2.js";const l={sv:"Tillbaka",en:"Back",da:"Tilbage",fi:"Takaisin",no:"Tilbake"},b=a(class extends t{constructor(e){super(),!1!==e&&this.__registerHost()}mo;hasBreadcrumb=!1;hasButtons=!1;get hostElement(){return this}heading;maxWidth;setMaxWidth(){this.maxWidth&&this.hostElement.style.setProperty("--max-width",this.maxWidth)}goBackHref;goBackText;language=null;connectedCallback(){this.mo=new MutationObserver((()=>{n(this.hostElement),this.checkSlots()})),this.mo.observe(this.hostElement,{subtree:!0,childList:!0})}disconnectedCallback(){this.mo?.disconnect()}async componentWillLoad(){this.checkSlots(),this.setMaxWidth(),null===this.language&&await d(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||l[this.language||c]}render(){return s(i,{key:"f19310a092999791304499d72c1b8e566949c0d3"},s("header",{key:"c6b50a1d93bf18f2050b37a9bdf69d3706b8aea4",class:"pn-header"},s("div",{key:"7bfa1bd37978daf85d266b7306a71705bdc8cac5",class:"pn-header-container"},s("div",{key:"09ed187b0f201d435c99b3c6e0f245ca48857d47",class:"pn-header-breadcrumbs",hidden:!this.showBreadcrumb()},this.goBackHref&&s("pn-text-link",{key:"ba657cb77da06d42009738c64d815a23d8dae527",label:this.getButtonText(),href:this.goBackHref,icon:r,leftIcon:!0}),s("slot",{key:"278bf254489dbd76f53e047cd16c247bcfd696eb",name:"breadcrumb"})),s("div",{key:"e9b2e873fb9ed01fabbd669aa7cace973a55cbfa",class:"pn-header-content"},this.heading&&s("h1",{key:"baec009bf6807009ea53d184be9a8c15ea0253a0"},this.heading),s("slot",{key:"7a777967b19a19077486d88d775b4a1c4f9d3134"})),s("div",{key:"46fa0cc4120b341e4a03c60bb865e077c6231986",class:"pn-header-buttons",hidden:!this.hasButtons},s("slot",{key:"8932d6bbb5e1647be6b666d1879b163575dfd760",name:"buttons"})),s("slot",{key:"afc6e39f45ef72ba762772f84a66cc24fdbcf368",name:"menu"}))))}static get watchers(){return{maxWidth:[{setMaxWidth:0}]}}static get style(){return`${e("pn-header")}{display:block}${e("pn-header")} h1{color:#2d2013;margin:0}${e("pn-header")} p{color:#5e554a;margin:0}${e("pn-header")} .pn-header-breadcrumbs{width:100%}${e("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}${e("pn-header")} .pn-header-container>${e("pn-text-link")}{display:block}${e("pn-header")} .pn-header-content{flex:1 1 auto;display:flex;flex-direction:column;gap:1em}${e("pn-header")} .pn-header [slot=buttons]{display:flex;flex-direction:column;gap:1em}`}},[772,"pn-header",{heading:[1],maxWidth:[1,"max-width"],goBackHref:[1,"go-back-href"],goBackText:[1,"go-back-text"],language:[1]},void 0,{maxWidth:[{setMaxWidth:0}]}]),m=b,p=function(){"undefined"!=typeof customElements&&["pn-header","pn-icon","pn-text-link"].forEach((a=>{switch(a){case"pn-header":customElements.get(e(e(a)))||customElements.define(e(e(a)),b);break;case"pn-icon":customElements.get(e(e(a)))||h();break;case"pn-text-link":customElements.get(e(e(a)))||o()}}))};export{m as PnHeader,p as defineCustomElement}