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

Komponentbiblioteket til Punkt, et designsystem laget av Oslo Origo

import { P as A } from "./alert-B0OUR9oD.js";
import { P as B, a as E } from "./accordionitem-C9FI-NXW.js";
import { P as O } from "./backlink-B13JTp9D.js";
import { P as T } from "./button-DrrEvUy9.js";
import { c as f } from "./calendar-DevQhOup.js";
import { P as D } from "./calendar-DevQhOup.js";
import { P as G } from "./card-Djnd-pgo.js";
import { P as K } from "./combobox-Cwg9Rkmz.js";
import { P as U } from "./consent-CftYu8Di.js";
import { P as q } from "./checkbox-CTRbpbye.js";
import { P as k, t as h, x as P, n, a as c } from "./element-CgEWt74-.js";
import { P as x } from "./pkt-slot-controller-BPGj-LC5.js";
import { e as m, n as d } from "./ref-BBYSqgeW.js";
import { e as u } from "./class-map-BpTj9gtz.js";
import { P as F } from "./datepicker-CEfh3TTA.js";
import { P as Q } from "./helptext-B7eI0iBQ.js";
import { P as X } from "./heading-D6jXE_Mz.js";
import { P as Z } from "./icon-CC1js8eR.js";
import { P as et } from "./input-wrapper-Dr__Sxql.js";
import { P as ot } from "./link-C76H6Qf1.js";
import { P as at } from "./linkcard-BVEsUPwG.js";
import { P as it } from "./loader-Da4IOk_T.js";
import { P as lt } from "./messagebox-DwGdcdm7.js";
import { P as mt } from "./modal-DcXPnFus.js";
import { P as ft } from "./progressbar-Dj_mI_A6.js";
import { P as ht, P as ct } from "./radiobutton-CWxiIVfA.js";
import { P as ut } from "./tag-BWm6s48d.js";
import { P as vt } from "./textarea-BZL8Mkm0.js";
import { P as bt } from "./textinput-DjPhmmkB.js";
import { P as $t } from "./select-CsgDatCa.js";
var g = Object.defineProperty, v = Object.getOwnPropertyDescriptor, s = (t, e, i, a) => {
  for (var r = a > 1 ? void 0 : a ? v(e, i) : e, p = t.length - 1, l; p >= 0; p--)
    (l = t[p]) && (r = (a ? l(e, i, r) : l(r)) || r);
  return a && r && g(e, i, r), r;
};
let o = class extends k {
  constructor() {
    super(), this.string = "", this.strings = [], this.darkmode = !1, this._list = [], this.defaultSlot = m(), this.namedSlot = m(), this.slotController = new x(this, this.defaultSlot, this.namedSlot);
  }
  /**
   * Runs on mount, used to set up various values and whatever you need to run
   */
  connectedCallback() {
    this.strings.length && this.strings.forEach((t) => {
      this._list.push(t.toUpperCase());
    }), super.connectedCallback();
  }
  /**
   * Render functions
   */
  render() {
    const t = {
      "pkt-component": !0,
      "pkt-component--has-list": this.strings.length > 0,
      "pkt-darkmode": this.darkmode
    };
    return P`
      <div class="${u(t)}">
        <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 ${d(this.defaultSlot)}>defaultSlotRef</div>
        <h2 class="pkt-txt-22">Named slot</h2>
        <select
          name="named-slot"
          ${d(this.namedSlot)}
          @change=${(e) => alert(e.target.value)}
        >
          namedSlotRef
        </select>

        <h2 class="pkt-txt-22">Knapp som emitter en event</h2>
        <button type="button" @click=${() => this.handleGreeting()}>
          Si ${h.example.hi}
        </button>
      </div>
    `;
  }
  renderList(t) {
    return P`
      <ul>
        ${t.map((e) => P`<li>${e}</li>`)}
      </ul>
    `;
  }
  /**
   * Add other functionality under here
   */
  doStuff(t) {
    return t.reverse();
  }
  /**
   * Handlers for returning data from the component
   */
  handleGreeting() {
    this.dispatchEvent(
      new CustomEvent("pkt-greeting", {
        detail: "Hei på deg!"
      })
    );
  }
};
s([
  n({ type: String })
], o.prototype, "string", 2);
s([
  n({ converter: f })
], o.prototype, "strings", 2);
s([
  n({ type: Boolean })
], o.prototype, "darkmode", 2);
s([
  n({ type: Array })
], o.prototype, "_list", 2);
o = s([
  c("pkt-component")
], o);
export {
  B as PktAccordion,
  E as PktAccordionItem,
  A as PktAlert,
  O as PktBackLink,
  T as PktButton,
  D as PktCalendar,
  G as PktCard,
  q as PktCheckbox,
  K as PktCombobox,
  o as PktComponent,
  U as PktConsent,
  F as PktDatepicker,
  X as PktHeading,
  Q as PktHelptext,
  Z as PktIcon,
  et as PktInputWrapper,
  ot as PktLink,
  at as PktLinkCard,
  it as PktLoader,
  lt as PktMessagebox,
  mt as PktModal,
  ft as PktProgressbar,
  ht as PktRadioButton,
  ct as PktRadiobutton,
  $t as PktSelect,
  ut as PktTag,
  vt as PktTextarea,
  bt as PktTextinput
};