@oslokommune/punkt-elements
Version:
Komponentbiblioteket til Punkt, et designsystem laget av Oslo Origo
47 lines • 3.93 kB
JavaScript
const e=require(`./element-DjtxO-1r.cjs`),t=require(`./class-map-CJ-msbHs.cjs`),n=require(`./element-with-slot-CWoTGA1B.cjs`),r=require(`./if-defined-XKOD_t_V.cjs`),i=require(`./ref-BaJ0mBT_.cjs`);var a=class extends e.a{constructor(...e){super(...e),this.ariaLabelledBy=``,this.compact=!1,this.skin=`borderless`,this.name=``}updated(e){e.has(`skin`)&&this.requestUpdate(),e.has(`name`)&&this.updateAccordionItemNames()}updateAccordionItemNames(){if(this.name){let e=this.renderRoot?.querySelector(`slot`);e&&e.assignedElements().forEach(e=>{e.tagName.toLowerCase()===`pkt-accordion-item`&&(e.hasAttribute(`name`)||e.setAttribute(`name`,this.name))})}}firstUpdated(){let e=this.renderRoot?.querySelector(`slot`);e&&e.addEventListener(`slotchange`,()=>{this.updateAccordionItemNames()})}render(){return e.d`
<div
part="container"
class=${t.t({"pkt-accordion":!0,"pkt-accordion--compact":this.compact,[`pkt-accordion--${this.skin}`]:this.skin})}
data-testid="pkt-accordion"
aria-labelledby=${this.ariaLabelledBy}
>
<slot></slot>
</div>
`}};e.r([e.s({type:String,reflect:!0,attribute:`aria-labelledby`})],a.prototype,`ariaLabelledBy`,void 0),e.r([e.s({type:Boolean,reflect:!0,attribute:`compact`})],a.prototype,`compact`,void 0),e.r([e.s({type:String,reflect:!0,attribute:`skin`})],a.prototype,`skin`,void 0),e.r([e.s({type:String,reflect:!0,attribute:`name`})],a.prototype,`name`,void 0);try{e.c(`pkt-accordion`)(a)}catch{console.warn(`Forsøker å definere <pkt-accordion>, men den er allerede definert`)}var o=class extends n.t{constructor(){super(),this.defaultOpen=!1,this.title=``,this.skin=void 0,this.compact=!1,this.isOpen=!1,this.name=void 0,this.accordionItemRef=i.t()}firstUpdated(e){this.defaultOpen&&(this.isOpen=!0)}render(){let a={"pkt-accordion-item":!0,"pkt-accordion-item--compact":this.compact,[`pkt-accordion-item--${this.skin}`]:!!this.skin},o=this.skin===`plus-minus`;return e.d`
<details
class=${t.t(a)}
id=${this.id}
?open=${this.isOpen}
${i.n(this.accordionItemRef)}
name=${r.t(this.name)}
>
<summary class="pkt-accordion-item__title" id=${`pkt-accordion-item-summary-${this.id}`}>
${this.title}
${o?e.d`
<pkt-icon
name="plus-sign"
class="pkt-accordion-item__icon pkt-accordion-item__icon--plus"
aria-hidden="true"
></pkt-icon>
<pkt-icon
name="minus-sign"
class="pkt-accordion-item__icon pkt-accordion-item__icon--minus"
aria-hidden="true"
></pkt-icon>
`:e.d`
<pkt-icon
name="chevron-thin-down"
class="pkt-accordion-item__icon"
aria-hidden="true"
></pkt-icon>
`}
</summary>
<div
class="pkt-accordion-item__content"
id="pkt-accordion-item__content-${this.id}"
role="region"
>
<div class="pkt-accordion-item__content-inner">${n.n(this)}</div>
</div>
</details>
`}};e.r([e.s({type:Boolean})],o.prototype,`defaultOpen`,void 0),e.r([e.s({type:String})],o.prototype,`title`,void 0),e.r([e.s({type:String,reflect:!0})],o.prototype,`skin`,void 0),e.r([e.s({type:Boolean,reflect:!0})],o.prototype,`compact`,void 0),e.r([e.s({type:Boolean,reflect:!0})],o.prototype,`isOpen`,void 0),e.r([e.s({type:String,reflect:!0})],o.prototype,`name`,void 0);try{e.c(`pkt-accordion-item`)(o)}catch{console.warn(`Forsøker å definere <pkt-accordion-item>, men den er allerede definert`)}var s=a;Object.defineProperty(exports,`n`,{enumerable:!0,get:function(){return o}}),Object.defineProperty(exports,`r`,{enumerable:!0,get:function(){return a}}),Object.defineProperty(exports,`t`,{enumerable:!0,get:function(){return s}});