@oslokommune/punkt-elements
Version:
Komponentbiblioteket til Punkt, et designsystem laget av Oslo Origo
43 lines (42 loc) • 2.47 kB
JavaScript
const e=require(`./element-DjtxO-1r.cjs`);require(`./icon-Dr8sfT2X.cjs`);var t=class extends e.t{constructor(...e){super(...e),this.breadcrumbs=[]}handleLinkClick(e,t,n){let r=new CustomEvent(`navigate`,{detail:{item:t,index:n,originalEvent:e},bubbles:!0,composed:!0,cancelable:!0});this.dispatchEvent(r)||e.preventDefault()}render(){if(!this.breadcrumbs||this.breadcrumbs.length===0)return e.l;let t=this.breadcrumbs[this.breadcrumbs.length-2];return e.d`
<nav class="pkt-breadcrumbs" aria-label="brødsmulemeny">
<ol class="pkt-breadcrumbs__list pkt-breadcrumbs--desktop">
${this.breadcrumbs.map((t,n)=>n===this.breadcrumbs.length-1?e.d`
<li class="pkt-breadcrumbs__item">
<span class="pkt-breadcrumbs__label" aria-current="true">
<span class="pkt-breadcrumbs__text">${t.text}</span>
</span>
</li>
`:e.d`
<li class="pkt-breadcrumbs__item">
<a
class="pkt-link pkt-link--icon-right pkt-breadcrumbs__label pkt-breadcrumbs__link"
href=${t.href}
=${e=>this.handleLinkClick(e,t,n)}
>
<pkt-icon
class="pkt-icon pkt-breadcrumbs__icon pkt-link__icon"
name="chevron-thin-right"
aria-hidden="true"
></pkt-icon>
<span class="pkt-breadcrumbs__text">${t.text}</span>
</a>
</li>
`)}
</ol>
${t?e.d`
<a
class="pkt-link pkt-link--icon-left pkt-breadcrumbs--mobile"
href=${t.href}
=${e=>this.handleLinkClick(e,t,this.breadcrumbs.length-2)}
>
<pkt-icon
class="pkt-back-link__icon pkt-icon pkt-link__icon"
name="chevron-thin-left"
aria-hidden="true"
></pkt-icon>
<span class="pkt-breadcrumbs__text">${t.text}</span>
</a>
`:e.l}
</nav>
`}};e.r([e.s({type:Array})],t.prototype,`breadcrumbs`,void 0);try{e.c(`pkt-breadcrumbs`)(t)}catch{console.warn(`Forsøker å definere <pkt-breadcrumbs>, men den er allerede definert`)}Object.defineProperty(exports,`t`,{enumerable:!0,get:function(){return t}});