UNPKG

@postnord/web-components

Version:

PostNord Web Components

6 lines 3.14 kB
/*! * Built with Stencil * By PostNord. */ import{r as e,g as a,f as t,h as s,a as d}from"./p-43660913.js";import{e as i,j as n}from"./p-c511b4fb.js";import{a as h}from"./p-2e6481e5.js";const r="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 c=r;const l={sv:"Tillbaka",en:"Back",da:"Tilbage",fi:"Takaisin",no:"Tilbake"};const o=class{constructor(a){e(this,a);this.heading=undefined;this.maxWidth=undefined;this.goBackHref=undefined;this.goBackText=undefined;this.language=null;this.goBackTextTranslated=undefined}mo;hasBreadcrumb=false;hasMenu=false;hasButtons=false;get hostElement(){return a(this)}setMaxWidth(){if(!this.maxWidth)return;this.hostElement.style.setProperty("--max-width",this.maxWidth)}setLanguage(){this.goBackTextTranslated=this.goBackText||l[this.language||i]}async componentWillLoad(){if(this.mo)this.mo.disconnect();this.mo=new MutationObserver((()=>{t(this.hostElement);this.checkSlots()}));this.mo.observe(this.hostElement,{childList:true,subtree:true});this.checkSlots();this.setMaxWidth();this.setLanguage();if(this.language)return;await n(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 s(d,{key:"cd686ea2ca013f125a319f5f2788c2c225dd9365"},s("header",{key:"7e74404829674f2fe5ad3d3a4750eb747d186e7a",class:"pn-header"},s("div",{key:"3ee0964a234ef68381ea198a17ced4798f5da125",class:"pn-header-container"},s("div",{key:"e356e0d7c0258bdbb1ebbe3cf3918e1bcf9d0b6a",class:"pn-header-breadcrumbs",hidden:!this.showBreadcrumb()},this.goBackHref&&s("pn-text-link",{key:"cab2b189eddbc8fa17dbe9da0a4bb48b071e826a",label:this.goBackTextTranslated,href:this.goBackHref,icon:h,leftIcon:true}),s("slot",{key:"414093ad797665dd8d0e6f23fcd12f095f487565",name:"breadcrumb"})),s("div",{key:"6e2ddd40d188968e23d3fdb92bf3d45ae6241856",class:"pn-header-content"},this.heading&&s("h1",{key:"0e92c8b16cc4a616dde6f2b14ccdff04c802c76b"},this.heading),s("slot",{key:"1d4f83a9f13fa526a61442e4d4664587bd37ae83"})),s("div",{key:"31f07187103ed34d6122ee53d4665d96a24099e6",class:"pn-header-buttons",hidden:!this.hasButtons},s("slot",{key:"855d81a1ea7c821ebe3d996ddae20b666c6200ef",name:"buttons"})),s("slot",{key:"0553519937c5937322c2e45f35790e38f91ef390",name:"menu"}))))}static get watchers(){return{maxWidth:["setMaxWidth"],language:["setLanguage"]}}};o.style=c;export{o as pn_header}; //# sourceMappingURL=p-215e0532.entry.js.map