UNPKG

@postnord/web-components

Version:
5 lines 2.92 kB
/*! * Built with Stencil * By PostNord. */ import{t as e,r as a,g as t,f as d,h as s,a as i}from"./p-XKg-ydzH.js";import{awaitTopbar as n,en as c}from"./index.esm.js";import{a as r}from"./p-CQaMdITw.js";const h={sv:"Tillbaka",en:"Back",da:"Tilbage",fi:"Takaisin",no:"Tilbake"},l=class{constructor(e){a(this,e)}mo;hasBreadcrumb=!1;hasButtons=!1;get hostElement(){return t(this)}heading;maxWidth;setMaxWidth(){this.maxWidth&&this.hostElement.style.setProperty("--max-width",this.maxWidth)}goBackHref;goBackText;language=null;connectedCallback(){this.mo=new MutationObserver((()=>{d(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 n(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||h[this.language||c]}render(){return s(i,{key:"82364cab3b3aece27e10f06e565b8ce0d6597f14"},s("header",{key:"368dfc4db49a8903c8cad81c9b161fe25095e2d1",class:"pn-header"},s("div",{key:"f98b1ba196ed150cc27f9136f25ad46c31d7424e",class:"pn-header-container"},s("div",{key:"6c7465e8060690aa36a4e405f640cd23bfa0c0f2",class:"pn-header-breadcrumbs",hidden:!this.showBreadcrumb()},this.goBackHref&&s("pn-text-link",{key:"d6dc1b2b5a22e80c95d42fadcd4912de1df35bb8",label:this.getButtonText(),href:this.goBackHref,icon:r,leftIcon:!0}),s("slot",{key:"44f163e4552a10f1340e51752bc2d825d74391ad",name:"breadcrumb"})),s("div",{key:"afb2d897acf67744c1a0eac4d5089f40bec07d40",class:"pn-header-content"},this.heading&&s("h1",{key:"8135619a44048a4072453140f6bd0e4fb5e349aa"},this.heading),s("slot",{key:"c013b74286636fd9ebfe575161ba8829d0eac903"})),s("div",{key:"5942ae47d1426f033565d20f294a9e0906600dbb",class:"pn-header-buttons",hidden:!this.hasButtons},s("slot",{key:"287ff16c616bf76f832a867ad077d1f62a29d9e0",name:"buttons"})),s("slot",{key:"7e9778bf8258cae60e27ceb3c1638f759ff02e82",name:"menu"}))))}static get watchers(){return{maxWidth:[{setMaxWidth:0}]}}};l.style=`${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}`;export{l as pn_header}