@oslokommune/punkt-elements/dist/pkt-index.cjs

Komponentbiblioteket til Punkt, et designsystem laget av Oslo Origo

"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const P=require("./alert-BH0lJ2ny.cjs"),l=require("./accordionitem-DjAWPtsn.cjs"),d=require("./backlink-C5jQRMwJ.cjs"),b=require("./button-CDocR7iN.cjs"),k=require("./calendar-BZe2D4Sr.cjs"),m=require("./card-Bx36j0q4.cjs"),g=require("./combobox-CijGa9Fr.cjs"),h=require("./consent-DrS71kvz.cjs"),f=require("./checkbox-wJ26voZd.cjs"),t=require("./element-6DBpyGQm.cjs"),y=require("./pkt-slot-controller-BzddBp7z.cjs"),s=require("./ref-iJtiv3o2.cjs"),O=require("./class-map-BBG2gMX4.cjs"),j=require("./datepicker-BhrUneAP.cjs"),q=require("./helptext-CzQX6YVE.cjs"),x=require("./heading-BRE_iFtR.cjs"),C=require("./icon-B_ryAy4Q.cjs"),v=require("./input-wrapper-CZ-a00V7.cjs"),S=require("./link-DTkjNlmy.cjs"),$=require("./linkcard-BlMhPNry.cjs"),L=require("./loader-CHPxY9c6.cjs"),_=require("./messagebox-CqUBJs_D.cjs"),A=require("./modal-BdA5aWGU.cjs"),B=require("./progressbar-DhMBXkww.cjs"),p=require("./radiobutton-CdT6v1oq.cjs"),T=require("./tag-DPk3fpEg.cjs"),I=require("./textarea-CPXsMFUq.cjs"),M=require("./textinput-aNI5kibM.cjs"),R=require("./select-DUeTm8ac.cjs");var H=Object.defineProperty,w=Object.getOwnPropertyDescriptor,o=(a,e,r,i)=>{for(var n=i>1?void 0:i?w(e,r):e,u=a.length-1,c;u>=0;u--)(c=a[u])&&(n=(i?c(e,r,n):c(n))||n);return i&&n&&H(e,r,n),n};exports.PktComponent=class extends t.PktElement{constructor(){super(),this.string="",this.strings=[],this.darkmode=!1,this._list=[],this.defaultSlot=s.e(),this.namedSlot=s.e(),this.slotController=new y.PktSlotController(this,this.defaultSlot,this.namedSlot)}connectedCallback(){this.strings.length&&this.strings.forEach(e=>{this._list.push(e.toUpperCase())}),super.connectedCallback()}render(){const e={"pkt-component":!0,"pkt-component--has-list":this.strings.length>0,"pkt-darkmode":this.darkmode};return t.x`
      <div class="${O.e(e)}">
        <h1 class="pkt-txt-28">${this.string}</h1>

        <h2 class="pkt-txt-22">Innhold fra attributter og funksjoner</h2>
        <div>${this.renderList(this.strings)}</div>
        <div>${this.renderList(this.doStuff(this._list))}</div>

        <h2 class="pkt-txt-22">Slot</h2>
        <div ${s.n(this.defaultSlot)}>defaultSlotRef</div>
        <h2 class="pkt-txt-22">Named slot</h2>
        <select
          name="named-slot"
          ${s.n(this.namedSlot)}
          @change=${r=>alert(r.target.value)}
        >
          namedSlotRef
        </select>

        <h2 class="pkt-txt-22">Knapp som emitter en event</h2>
        <button type="button" @click=${()=>this.handleGreeting()}>
          Si ${t.translations.example.hi}
        </button>
      </div>
    `}renderList(e){return t.x`
      <ul>
        ${e.map(r=>t.x`<li>${r}</li>`)}
      </ul>
    `}doStuff(e){return e.reverse()}handleGreeting(){this.dispatchEvent(new CustomEvent("pkt-greeting",{detail:"Hei på deg!"}))}};o([t.n({type:String})],exports.PktComponent.prototype,"string",2);o([t.n({converter:k.csvToArray})],exports.PktComponent.prototype,"strings",2);o([t.n({type:Boolean})],exports.PktComponent.prototype,"darkmode",2);o([t.n({type:Array})],exports.PktComponent.prototype,"_list",2);exports.PktComponent=o([t.t("pkt-component")],exports.PktComponent);Object.defineProperty(exports,"PktAlert",{enumerable:!0,get:()=>P.PktAlert});exports.PktAccordion=l.PktAccordion;exports.PktAccordionItem=l.PktAccordionItem;Object.defineProperty(exports,"PktBackLink",{enumerable:!0,get:()=>d.PktBackLink});Object.defineProperty(exports,"PktButton",{enumerable:!0,get:()=>b.PktButton});Object.defineProperty(exports,"PktCalendar",{enumerable:!0,get:()=>k.PktCalendar});Object.defineProperty(exports,"PktCard",{enumerable:!0,get:()=>m.PktCard});Object.defineProperty(exports,"PktCombobox",{enumerable:!0,get:()=>g.PktCombobox});Object.defineProperty(exports,"PktConsent",{enumerable:!0,get:()=>h.PktConsent});Object.defineProperty(exports,"PktCheckbox",{enumerable:!0,get:()=>f.PktCheckbox});Object.defineProperty(exports,"PktDatepicker",{enumerable:!0,get:()=>j.PktDatepicker});Object.defineProperty(exports,"PktHelptext",{enumerable:!0,get:()=>q.PktHelptext});Object.defineProperty(exports,"PktHeading",{enumerable:!0,get:()=>x.PktHeading});Object.defineProperty(exports,"PktIcon",{enumerable:!0,get:()=>C.PktIcon});Object.defineProperty(exports,"PktInputWrapper",{enumerable:!0,get:()=>v.PktInputWrapper});Object.defineProperty(exports,"PktLink",{enumerable:!0,get:()=>S.PktLink});Object.defineProperty(exports,"PktLinkCard",{enumerable:!0,get:()=>$.PktLinkCard});Object.defineProperty(exports,"PktLoader",{enumerable:!0,get:()=>L.PktLoader});Object.defineProperty(exports,"PktMessagebox",{enumerable:!0,get:()=>_.PktMessagebox});Object.defineProperty(exports,"PktModal",{enumerable:!0,get:()=>A.PktModal});Object.defineProperty(exports,"PktProgressbar",{enumerable:!0,get:()=>B.PktProgressbar});Object.defineProperty(exports,"PktRadioButton",{enumerable:!0,get:()=>p.PktRadioButton});Object.defineProperty(exports,"PktRadiobutton",{enumerable:!0,get:()=>p.PktRadioButton});Object.defineProperty(exports,"PktTag",{enumerable:!0,get:()=>T.PktTag});Object.defineProperty(exports,"PktTextarea",{enumerable:!0,get:()=>I.PktTextarea});Object.defineProperty(exports,"PktTextinput",{enumerable:!0,get:()=>M.PktTextinput});Object.defineProperty(exports,"PktSelect",{enumerable:!0,get:()=>R.PktSelect});