@oslokommune/punkt-elements
Version:
Komponentbiblioteket til Punkt, et designsystem laget av Oslo Origo
34 lines (33 loc) • 2.83 kB
JavaScript
"use strict";const e=require("./element-6DBpyGQm.cjs"),h=require("./class-map-BBG2gMX4.cjs"),m=require("./pkt-slot-controller-BzddBp7z.cjs"),d=require("./ref-iJtiv3o2.cjs");var f=Object.defineProperty,k=Object.getOwnPropertyDescriptor,u=(o,i,n,r)=>{for(var t=r>1?void 0:r?k(i,n):i,s=o.length-1,a;s>=0;s--)(a=o[s])&&(t=(r?a(i,n,t):a(t))||t);return r&&t&&f(i,n,t),t};let l=class extends e.i{constructor(){super(...arguments),this.ariaLabelledBy="",this.compact=!1,this.skin="borderless"}updated(o){o.has("skin")&&this.requestUpdate()}render(){const o={"pkt-accordion":!0,"pkt-accordion--compact":this.compact,[`pkt-accordion--${this.skin}`]:this.skin};return e.x`
<div
part="container"
class=${h.e(o)}
data-testid="pkt-accordion"
aria-labelledby=${this.ariaLabelledBy}
>
<slot></slot>
</div>
`}};u([e.n({type:String,reflect:!0,attribute:"aria-labelledby"})],l.prototype,"ariaLabelledBy",2);u([e.n({type:Boolean,reflect:!0,attribute:"compact"})],l.prototype,"compact",2);u([e.n({type:String,reflect:!0,attribute:"skin"})],l.prototype,"skin",2);l=u([e.t("pkt-accordion")],l);const y=l;var _=Object.defineProperty,v=Object.getOwnPropertyDescriptor,p=(o,i,n,r)=>{for(var t=r>1?void 0:r?v(i,n):i,s=o.length-1,a;s>=0;s--)(a=o[s])&&(t=(r?a(i,n,t):a(t))||t);return r&&t&&_(i,n,t),t};let c=class extends e.PktElement{constructor(){super(),this.defaultOpen=!1,this.title="",this.skin=void 0,this.compact=!1,this.isOpen=this.defaultOpen,this.accordionItemRef=d.e(),this.defaultSlot=d.e(),this.slotController=new m.PktSlotController(this,this.defaultSlot)}render(){const o={"pkt-accordion-item":!0,"pkt-accordion-item--compact":this.compact,[`pkt-accordion-item--${this.skin}`]:!!this.skin};return e.x`
<details
class=${h.e(o)}
id=${this.id}
?open=${this.isOpen}
${d.n(this.accordionItemRef)}
>
<summary class="pkt-accordion-item__title" id=${`pkt-accordion-item-summary-${this.id}`}>
${this.title}
<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" ${d.n(this.defaultSlot)}></div>
</div>
</details>
`}};p([e.n({type:Boolean})],c.prototype,"defaultOpen",2);p([e.n({type:String})],c.prototype,"title",2);p([e.n({type:String,reflect:!0})],c.prototype,"skin",2);p([e.n({type:Boolean,reflect:!0})],c.prototype,"compact",2);p([e.n({type:Boolean,reflect:!0})],c.prototype,"isOpen",2);c=p([e.t("pkt-accordion-item")],c);const $=c;exports.PktAccordion=y;exports.PktAccordionItem=$;