@oslokommune/punkt-elements/dist/helptext-CzQX6YVE.cjs

Komponentbiblioteket til Punkt, et designsystem laget av Oslo Origo

"use strict";const t=require("./element-6DBpyGQm.cjs"),x=require("./ref-iJtiv3o2.cjs"),h=require("./icon-B_ryAy4Q.cjs"),u=require("./class-map-BBG2gMX4.cjs"),a=require("./state-DPobt-Yz.cjs"),c=require("./stringutils-CkVRq4jP.cjs"),d=require("./input-wrapper-EoSAbU-U.cjs"),k=require("./pkt-slot-controller-BzddBp7z.cjs");var w=Object.defineProperty,_=Object.getOwnPropertyDescriptor,n=(o,p,r,l)=>{for(var e=l>1?void 0:l?_(p,r):p,s=o.length-1,i;s>=0;s--)(i=o[s])&&(e=(l?i(p,r,e):i(e))||e);return l&&e&&w(p,r,e),e};exports.PktHelptext=class extends t.PktElement{constructor(){super(),this.defaultSlot=x.e(),this.forId=c.uuidish(),this.helptext="",this.helptextDropdown="",this.helptextDropdownButton=d.specs.props.helptextDropdownButton.default,this.isHelpTextOpen=!1,this.filledSlots=new Set,this.slotController=new k.PktSlotController(this,this.defaultSlot)}updateSlots(p){this.filledSlots=new Set(p)}render(){const p=()=>{const s=!this.isHelpTextOpen;this.isHelpTextOpen=s,this.dispatchEvent(new CustomEvent("toggleHelpText",{bubbles:!0,detail:{isOpen:s}}))},r=u.e({"pkt-inputwrapper__helptext-container":!0,"pkt-inputwrapper__has-helptext":this.helptext||this.helptextDropdown||this.filledSlots.size>0}),l=()=>this.helptextDropdown?t.x`<div class="pkt-inputwrapper__helptext-expandable">
          <button
            class="pkt-link pkt-link--icon-right pkt-btn pkt-btn--small pkt-btn--tertiary pkt-btn--icon-right"
            type="button"
            @click=${p}
          >
            <pkt-icon
              class="pkt-btn__icon"
              name="${this.isHelpTextOpen?"chevron-thin-up":"chevron-thin-down"}"
            ></pkt-icon>
            <span class="pkt-btn__text">${h.o(this.helptextDropdownButton)}</span>
          </button>
          <div
            class="${u.e({"pkt-inputwrapper__helptext":!0,"pkt-inputwrapper__helptext-expandable-open":this.isHelpTextOpen,"pkt-inputwrapper__helptext-expandable-closed":!this.isHelpTextOpen})}"
          >
            ${h.o(this.helptextDropdown)}
          </div>
        </div>`:t.E,e=()=>t.x`<div class="${r}">
        <div class="pkt-inputwrapper__helptext" id="${this.forId}-helptext">
          <div class="pkt-contents" ${x.n(this.defaultSlot)} name="helptext"></div>
          ${this.helptext&&h.o(this.helptext)}
        </div>
        ${l()}
      </div>`;return t.x`${e()}`}};n([t.n({type:String,reflect:!0})],exports.PktHelptext.prototype,"forId",2);n([t.n({type:String})],exports.PktHelptext.prototype,"helptext",2);n([t.n({type:String})],exports.PktHelptext.prototype,"helptextDropdown",2);n([t.n({type:String})],exports.PktHelptext.prototype,"helptextDropdownButton",2);n([a.r()],exports.PktHelptext.prototype,"isHelpTextOpen",2);n([a.r()],exports.PktHelptext.prototype,"filledSlots",2);exports.PktHelptext=n([t.t("pkt-helptext")],exports.PktHelptext);