@oslokommune/punkt-elements 12.26.2 → 12.27.1

package/dist/{datepicker-BVI4szRk.js → datepicker-ONV4HuJt.js}

@@ -2,59 +2,60 @@ import { e as x } from "./class-map-CQzsZCwS.js";
 import { o as k } from "./if-defined-f3M1y6S-.js";
 import { e as L, i as j, a as F, T as q, x as v, E as T, n as u, t as H } from "./element-BKrU5soj.js";
 import { r as V } from "./state-C36ZmZgt.js";
-import { n as D, f as _, a as N, b as E, d as A } from "./calendar-DB_8j4en.js";
+import { n as S, f as _, a as N, b as P, d as A } from "./calendar-DB_8j4en.js";
 import { P as U } from "./input-element-URKBm_vS.js";
-import { p as K, v as y, r as w, M as I, m as W, e as R, n as $ } from "./ref-D5qG7OFB.js";
+import { p as K, v as $, r as R, M as I, m as W, e as w, n as y } from "./ref-D5qG7OFB.js";
 import "./icon-Bsb0MB2h.js";
-import "./input-wrapper-CWvzXs6X.js";
-import "./tag-CPLBzyiV.js";
+import "./input-wrapper-Df18_PvD.js";
+import "./tag-W9Lf1doW.js";
+import { P as z } from "./pkt-slot-controller-Clbye6cM.js";
 /**
  * @license
  * Copyright 2017 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
  */
-const B = (e, t, i) => {
+const E = (e, t, i) => {
   const a = /* @__PURE__ */ new Map();
   for (let s = t; s <= i; s++) a.set(e[s], s);
   return a;
-}, z = L(class extends j {
+}, G = L(class extends j {
   constructor(e) {
     if (super(e), e.type !== F.CHILD) throw Error("repeat() can only be used in text expressions");
   }
   dt(e, t, i) {
     let a;
     i === void 0 ? i = t : t !== void 0 && (a = t);
-    const s = [], r = [];
+    const s = [], l = [];
     let n = 0;
-    for (const f of e) s[n] = a ? a(f, n) : n, r[n] = i(f, n), n++;
-    return { values: r, keys: s };
+    for (const f of e) s[n] = a ? a(f, n) : n, l[n] = i(f, n), n++;
+    return { values: l, keys: s };
   }
   render(e, t, i) {
     return this.dt(e, t, i).values;
   }
   update(e, [t, i, a]) {
-    const s = K(e), { values: r, keys: n } = this.dt(t, i, a);
-    if (!Array.isArray(s)) return this.ut = n, r;
+    const s = K(e), { values: l, keys: n } = this.dt(t, i, a);
+    if (!Array.isArray(s)) return this.ut = n, l;
     const f = this.ut ?? (this.ut = []), m = [];
-    let C, O, p = 0, h = s.length - 1, d = 0, c = r.length - 1;
+    let C, O, p = 0, h = s.length - 1, d = 0, c = l.length - 1;
     for (; p <= h && d <= c; ) if (s[p] === null) p++;
     else if (s[h] === null) h--;
-    else if (f[p] === n[d]) m[d] = y(s[p], r[d]), p++, d++;
-    else if (f[h] === n[c]) m[c] = y(s[h], r[c]), h--, c--;
-    else if (f[p] === n[c]) m[c] = y(s[p], r[c]), w(e, m[c + 1], s[p]), p++, c--;
-    else if (f[h] === n[d]) m[d] = y(s[h], r[d]), w(e, s[p], s[h]), h--, d++;
-    else if (C === void 0 && (C = B(n, d, c), O = B(f, p, h)), C.has(f[p])) if (C.has(f[h])) {
-      const g = O.get(n[d]), S = g !== void 0 ? s[g] : null;
-      if (S === null) {
-        const M = w(e, s[p]);
-        y(M, r[d]), m[d] = M;
-      } else m[d] = y(S, r[d]), w(e, s[p], S), s[g] = null;
+    else if (f[p] === n[d]) m[d] = $(s[p], l[d]), p++, d++;
+    else if (f[h] === n[c]) m[c] = $(s[h], l[c]), h--, c--;
+    else if (f[p] === n[c]) m[c] = $(s[p], l[c]), R(e, m[c + 1], s[p]), p++, c--;
+    else if (f[h] === n[d]) m[d] = $(s[h], l[d]), R(e, s[p], s[h]), h--, d++;
+    else if (C === void 0 && (C = E(n, d, c), O = E(f, p, h)), C.has(f[p])) if (C.has(f[h])) {
+      const g = O.get(n[d]), D = g !== void 0 ? s[g] : null;
+      if (D === null) {
+        const M = R(e, s[p]);
+        $(M, l[d]), m[d] = M;
+      } else m[d] = $(D, l[d]), R(e, s[p], D), s[g] = null;
       d++;
     } else I(s[h]), h--;
     else I(s[p]), p++;
     for (; d <= c; ) {
-      const g = w(e, m[c + 1]);
-      y(g, r[d]), m[d++] = g;
+      const g = R(e, m[c + 1]);
+      $(g, l[d]), m[d++] = g;
     }
     for (; p <= h; ) {
       const g = s[p++];
@@ -62,7 +63,7 @@ const B = (e, t, i) => {
     }
     return this.ut = n, W(e, m), q;
   }
-}), G = "pkt-datepicker", J = !0, Q = {
+}), J = "pkt-datepicker", Q = !0, X = {
   name: {
     type: "string",
     name: "Navn",
@@ -231,7 +232,7 @@ const B = (e, t, i) => {
     name: "ID",
     description: "Unik identifikasjon for datovelgeren"
   }
-}, X = {
+}, Y = {
   change: {
     type: "Event",
     description: "Returnerer valgt dato som streng i ISO-format"
@@ -245,35 +246,35 @@ const B = (e, t, i) => {
     description: "Returnerer <code>event.detail { isOpen: true }</code> eller <code>event.detail { isOpen: false }</code> når hjelpeteksten åpnes eller lukkes"
   }
 }, b = {
-  name: G,
+  name: J,
   "css-class": "pkt-datepicker",
-  isElement: J,
-  props: Q,
-  events: X
+  isElement: Q,
+  props: X,
+  events: Y
 };
-var Y = Object.defineProperty, Z = Object.getOwnPropertyDescriptor, o = (e, t, i, a) => {
-  for (var s = a > 1 ? void 0 : a ? Z(t, i) : t, r = e.length - 1, n; r >= 0; r--)
-    (n = e[r]) && (s = (a ? n(t, i, s) : n(s)) || s);
-  return a && s && Y(t, i, s), s;
+var Z = Object.defineProperty, ee = Object.getOwnPropertyDescriptor, o = (e, t, i, a) => {
+  for (var s = a > 1 ? void 0 : a ? ee(t, i) : t, l = e.length - 1, n; l >= 0; l--)
+    (n = e[l]) && (s = (a ? n(t, i, s) : n(s)) || s);
+  return a && s && Z(t, i, s), s;
 };
-const P = (e) => new Promise((t) => setTimeout(t, e));
-let l = class extends U {
+const B = (e) => new Promise((t) => setTimeout(t, e));
+let r = class extends U {
+  /**
+   * Housekeeping / lifecycle methods
+   */
   constructor() {
-    super(...arguments), this.value = "", this._value = this.value ? Array.isArray(this.value) ? this.value : this.value.split(",") : [], this.label = "Datovelger", this.dateformat = b.props.dateformat.default, this.multiple = b.props.multiple.default, this.maxlength = null, this.range = b.props.range.default, this.showRangeLabels = !1, this.min = null, this.max = null, this.weeknumbers = b.props.weeknumbers.default, this.withcontrols = b.props.withcontrols.default, this.excludedates = [], this.excludeweekdays = [], this.currentmonth = null, this.calendarOpen = !1, this.timezone = "Europe/Oslo", this.inputClasses = {}, this.buttonClasses = {}, this.inputRef = R(), this.inputRefTo = R(), this.btnRef = R(), this.calRef = R(), this.popupRef = R(), this.addToSelected = (e) => {
+    super(), this.value = "", this._value = this.value ? Array.isArray(this.value) ? this.value : this.value.split(",") : [], this.label = "Datovelger", this.dateformat = b.props.dateformat.default, this.multiple = b.props.multiple.default, this.maxlength = null, this.range = b.props.range.default, this.showRangeLabels = !1, this.min = null, this.max = null, this.weeknumbers = b.props.weeknumbers.default, this.withcontrols = b.props.withcontrols.default, this.excludedates = [], this.excludeweekdays = [], this.currentmonth = null, this.calendarOpen = !1, this.timezone = "Europe/Oslo", this.inputClasses = {}, this.buttonClasses = {}, this.inputRef = w(), this.inputRefTo = w(), this.btnRef = w(), this.calRef = w(), this.popupRef = w(), this.helptextSlot = w(), this.addToSelected = (e) => {
       const t = e.target;
       if (!t.value) return;
-      const i = this.min ? D(this.min) : null, a = this.max ? D(this.max) : null, s = D(t.value.split(",")[0]);
+      const i = this.min ? S(this.min) : null, a = this.max ? S(this.max) : null, s = S(t.value.split(",")[0]);
       s && !isNaN(s.getTime()) && (!i || s >= i) && (!a || s <= a) && this.calRef.value && this.calRef.value.handleDateSelect(s), t.value = "";
-    };
+    }, this.slotController = new z(this, this.helptextSlot);
   }
-  /**
-   * Housekeeping / lifecycle methods
-   */
   async connectedCallback() {
     super.connectedCallback(), this.isMobileSafari = /iP(ad|od|hone)/i.test(window.navigator.userAgent) && !!navigator.userAgent.match(/Version\/[\d\.]+.*Safari/), this.inputType = this.isMobileSafari ? "text" : "date", document && document.body.addEventListener("click", (e) => {
       var t, i;
       (t = this.inputRef) != null && t.value && ((i = this.btnRef) != null && i.value) && !this.inputRef.value.contains(e.target) && !(this.inputRefTo.value && this.inputRefTo.value.contains(e.target)) && !this.btnRef.value.contains(e.target) && !e.target.closest(".pkt-calendar-popup") && this.calendarOpen && (this.onBlur(), this.hideCalendar());
-    }), this.value.length && this._value.length === 0 && (this._value = Array.isArray(this.value) ? this.value : this.value.split(",")), this.min = this.min || b.props.min.default, this.max = this.max || b.props.max.default, typeof this.excludedates == "string" && (this.excludedates = this.excludedates.split(",")), typeof this.excludeweekdays == "string" && (this.excludeweekdays = this.excludeweekdays.split(",")), (this.multiple || this.range) && this.name && !this.name.endsWith("[]") && (this.name = this.name + "[]"), this.calendarOpen && (await P(20), this.handleCalendarPosition());
+    }), this.value.length && this._value.length === 0 && (this._value = Array.isArray(this.value) ? this.value : this.value.split(",")), this.min = this.min || b.props.min.default, this.max = this.max || b.props.max.default, typeof this.excludedates == "string" && (this.excludedates = this.excludedates.split(",")), typeof this.excludeweekdays == "string" && (this.excludeweekdays = this.excludeweekdays.split(",")), (this.multiple || this.range) && this.name && !this.name.endsWith("[]") && (this.name = this.name + "[]"), this.calendarOpen && (await B(20), this.handleCalendarPosition());
   }
   disconnectedCallback() {
     super.disconnectedCallback(), document && document.body.removeEventListener("click", (e) => {
@@ -328,7 +329,7 @@ let l = class extends U {
         @change=${(e) => {
       e.stopImmediatePropagation();
     }}
-        ${$(this.inputRef)}
+        ${y(this.inputRef)}
       />
     `;
   }
@@ -371,7 +372,7 @@ let l = class extends U {
         @change=${(t) => {
       t.stopImmediatePropagation();
     }}
-        ${$(this.inputRef)}
+        ${y(this.inputRef)}
       />
       <div class="${x(e)}" id="${this.id}-to-label">
         ${this.strings.generic.to}
@@ -403,12 +404,12 @@ let l = class extends U {
       var i, a, s;
       if ((i = this.calRef.value) != null && i.contains(t.relatedTarget) || this.onBlur(), t.target.value) {
         this.manageValidity(t.target);
-        const r = t.target.value;
-        this.min && this.min > r ? this.internals.setValidity(
+        const l = t.target.value;
+        this.min && this.min > l ? this.internals.setValidity(
           { rangeUnderflow: !0 },
           this.strings.forms.messages.rangeUnderflow,
           t.target
-        ) : this.max && this.max < r && this.internals.setValidity(
+        ) : this.max && this.max < l && this.internals.setValidity(
           { rangeOverflow: !0 },
           this.strings.forms.messages.rangeOverflow,
           t.target
@@ -420,7 +421,7 @@ let l = class extends U {
         @change=${(t) => {
       t.stopImmediatePropagation();
     }}
-        ${$(this.inputRefTo)}
+        ${y(this.inputRefTo)}
       />
     `;
   }
@@ -452,21 +453,21 @@ let l = class extends U {
         @change=${(e) => {
       e.stopImmediatePropagation();
     }}
-        ${$(this.inputRef)}
+        ${y(this.inputRef)}
       />
     `;
   }
   renderTags() {
     return v`
       <div class="pkt-datepicker__tags" aria-live="polite">
-        ${this._value[0] ? z(
+        ${this._value[0] ? G(
       this._value ?? [],
       (e) => e,
       (e) => v`
                 <pkt-tag
                   .id="${this.id + e + "-tag"}"
                   closeTag
-                  ariaLabel="${this.strings.calendar.deleteDate} ${E(
+                  ariaLabel="${this.strings.calendar.deleteDate} ${P(
         e,
         this.dateformat
       )}"
@@ -474,7 +475,7 @@ let l = class extends U {
         var t;
         return (t = this.calRef.value) == null ? void 0 : t.handleDateSelect(_(e));
       }}
-                  ><time datetime="${e}">${E(e, this.dateformat)}</time></pkt-tag
+                  ><time datetime="${e}">${P(e, this.dateformat)}</time></pkt-tag
                 >
               `
     ) : T}
@@ -488,7 +489,7 @@ let l = class extends U {
       this.calendarOpen && this.handleFocusOut(e);
     }}
       id="${this.id}-popup"
-      ${$(this.popupRef)}
+      ${y(this.popupRef)}
     >
       <pkt-calendar
         id="${this.id}-calendar"
@@ -502,14 +503,14 @@ let l = class extends U {
         .latest=${this.max}
         .excludedates=${Array.isArray(this.excludedates) ? this.excludedates : this.excludedates.split(",")}
         .excludeweekdays=${this.excludeweekdays}
-        .currentmonth=${this.currentmonth ? D(this.currentmonth) : null}
+        .currentmonth=${this.currentmonth ? S(this.currentmonth) : null}
         @date-selected=${(e) => {
       this.value = !this.multiple && !this.range ? e.detail[0] : e.detail, this._value = e.detail, this.inputRef.value && (this.range && this.inputRefTo.value ? (this.inputRef.value.value = this._value[0] ?? "", this.inputRefTo.value.value = this._value[1] ?? "") : this.multiple || (this.inputRef.value.value = this._value.length ? this._value[0] : ""));
     }}
         @close=${() => {
       this.onBlur(), this.hideCalendar();
     }}
-        ${$(this.calRef)}
+        ${y(this.calRef)}
       ></pkt-calendar>
     </div>`;
   }
@@ -548,6 +549,7 @@ let l = class extends U {
         .ariaDescribedBy=${this.ariaDescribedBy}
         class="pkt-datepicker"
       >
+        <div class="pkt-contents" ${y(this.helptextSlot)} name="helptext" slot="helptext"></div>
         ${this.multiple ? this.renderTags() : T}
         <div
           class="pkt-datepicker__inputs ${this.range && this.showRangeLabels ? "pkt-input__range-inputs" : ""}"
@@ -559,7 +561,7 @@ let l = class extends U {
               type="button"
               @click=${this.toggleCalendar}
               ?disabled=${this.disabled}
-              ${$(this.btnRef)}
+              ${y(this.btnRef)}
             >
               <pkt-icon name="calendar"></pkt-icon>
               <span class="pkt-btn__text">${this.strings.calendar.buttonAltText}</span>
@@ -577,8 +579,8 @@ let l = class extends U {
     var e;
     if (this.popupRef.value && this.inputRef.value) {
       const t = this.multiple && !!this.maxlength, i = ((e = this.inputRef.value.parentElement) == null ? void 0 : e.getBoundingClientRect()) || this.inputRef.value.getBoundingClientRect(), a = t ? i.height + 30 : i.height, s = this.popupRef.value.getBoundingClientRect().height;
-      let r = t ? "calc(100% - 30px)" : "100%";
-      i && i.top + s > window.innerHeight && i.top - s > 0 && (r = `calc(100% - ${a}px - ${s}px)`), this.popupRef.value.style.top = r;
+      let l = t ? "calc(100% - 30px)" : "100%";
+      i && i.top + s > window.innerHeight && i.top - s > 0 && (l = `calc(100% - ${a}px - ${s}px)`), this.popupRef.value.style.top = l;
     }
   }
   handleFocusOut(e) {
@@ -586,7 +588,7 @@ let l = class extends U {
   }
   async showCalendar() {
     var e;
-    this.calendarOpen = !0, await P(20), this.handleCalendarPosition(), this.isMobileSafari && ((e = this.calRef.value) == null || e.focusOnCurrentDate());
+    this.calendarOpen = !0, await B(20), this.handleCalendarPosition(), this.isMobileSafari && ((e = this.calRef.value) == null || e.focusOnCurrentDate());
   }
   hideCalendar() {
     this.calendarOpen = !1;
@@ -597,64 +599,64 @@ let l = class extends U {
 };
 o([
   u({ type: String, reflect: !0 })
-], l.prototype, "value", 2);
+], r.prototype, "value", 2);
 o([
   u({ type: Array })
-], l.prototype, "_value", 2);
+], r.prototype, "_value", 2);
 o([
   u({ type: String, reflect: !0 })
-], l.prototype, "label", 2);
+], r.prototype, "label", 2);
 o([
   u({ type: String })
-], l.prototype, "dateformat", 2);
+], r.prototype, "dateformat", 2);
 o([
   u({ type: Boolean, reflect: !0 })
-], l.prototype, "multiple", 2);
+], r.prototype, "multiple", 2);
 o([
   u({ type: Number, reflect: !0 })
-], l.prototype, "maxlength", 2);
+], r.prototype, "maxlength", 2);
 o([
   u({ type: Boolean, reflect: !0 })
-], l.prototype, "range", 2);
+], r.prototype, "range", 2);
 o([
   u({ type: Boolean })
-], l.prototype, "showRangeLabels", 2);
+], r.prototype, "showRangeLabels", 2);
 o([
   u({ type: String, reflect: !0 })
-], l.prototype, "min", 2);
+], r.prototype, "min", 2);
 o([
   u({ type: String, reflect: !0 })
-], l.prototype, "max", 2);
+], r.prototype, "max", 2);
 o([
   u({ type: Boolean })
-], l.prototype, "weeknumbers", 2);
+], r.prototype, "weeknumbers", 2);
 o([
   u({ type: Boolean, reflect: !0 })
-], l.prototype, "withcontrols", 2);
+], r.prototype, "withcontrols", 2);
 o([
   u({ converter: A.csvToArray })
-], l.prototype, "excludedates", 2);
+], r.prototype, "excludedates", 2);
 o([
   u({ converter: A.csvToArray })
-], l.prototype, "excludeweekdays", 2);
+], r.prototype, "excludeweekdays", 2);
 o([
   u({ type: String })
-], l.prototype, "currentmonth", 2);
+], r.prototype, "currentmonth", 2);
 o([
   u({ type: Boolean, reflect: !0 })
-], l.prototype, "calendarOpen", 2);
+], r.prototype, "calendarOpen", 2);
 o([
   u({ type: String })
-], l.prototype, "timezone", 2);
+], r.prototype, "timezone", 2);
 o([
   V()
-], l.prototype, "inputClasses", 2);
+], r.prototype, "inputClasses", 2);
 o([
   V()
-], l.prototype, "buttonClasses", 2);
-l = o([
+], r.prototype, "buttonClasses", 2);
+r = o([
   H("pkt-datepicker")
-], l);
+], r);
 export {
-  l as P
+  r as P
 };

package/dist/datepicker.d.ts

@@ -1,6 +1,13 @@
 export { }
 
 
+declare global {
+    interface HTMLElementTagNameMap {
+        'pkt-icon': PktIcon;
+    }
+}
+
+
 declare global {
     interface Window {
         pktTz: string;

package/dist/helptext-DHfBEO42.js

@@ -0,0 +1,78 @@
+import { P as d, x as a, n as i, t as u, E as c } from "./element-BKrU5soj.js";
+import { e as f, n as m } from "./ref-D5qG7OFB.js";
+import { o as x } from "./icon-Bsb0MB2h.js";
+import { e as v } from "./class-map-CQzsZCwS.js";
+import { r as w } from "./state-C36ZmZgt.js";
+import { u as _ } from "./stringutils-DJjRa8dG.js";
+import { s as k } from "./input-wrapper-Bw9tARAD.js";
+import { P as b } from "./pkt-slot-controller-Clbye6cM.js";
+var D = Object.defineProperty, O = Object.getOwnPropertyDescriptor, n = (r, o, s, t) => {
+  for (var e = t > 1 ? void 0 : t ? O(o, s) : o, l = r.length - 1, h; l >= 0; l--)
+    (h = r[l]) && (e = (t ? h(o, s, e) : h(e)) || e);
+  return t && e && D(o, s, e), e;
+};
+let p = class extends d {
+  constructor() {
+    super(), this.defaultSlot = f(), this.forId = _(), this.helptext = "", this.helptextDropdown = "", this.helptextDropdownButton = k.props.helptextDropdownButton.default, this.isHelpTextOpen = !1, this.slotController = new b(this, this.defaultSlot);
+  }
+  render() {
+    const r = () => {
+      const t = !this.isHelpTextOpen;
+      this.isHelpTextOpen = t, this.dispatchEvent(
+        new CustomEvent("toggleHelpText", {
+          bubbles: !0,
+          detail: { isOpen: t }
+        })
+      );
+    }, o = () => this.helptextDropdown ? a`<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=${r}
+          >
+            <pkt-icon
+              class="pkt-btn__icon"
+              name="${this.isHelpTextOpen ? "chevron-thin-up" : "chevron-thin-down"}"
+            ></pkt-icon>
+            <span class="pkt-btn__text">${x(this.helptextDropdownButton)}</span>
+          </button>
+          <div
+            class="${v({
+      "pkt-inputwrapper__helptext": !0,
+      "pkt-inputwrapper__helptext-expandable-open": this.isHelpTextOpen,
+      "pkt-inputwrapper__helptext-expandable-closed": !this.isHelpTextOpen
+    })}"
+          >
+            ${x(this.helptextDropdown)}
+          </div>
+        </div>` : c;
+    return a`${a`<div>
+        <div class="pkt-inputwrapper__helptext" id="${this.forId}-helptext">
+          <div class="pkt-contents" ${m(this.defaultSlot)} name="helptext"></div>
+          ${this.helptext && x(this.helptext)}
+        </div>
+        ${o()}
+      </div>`}`;
+  }
+};
+n([
+  i({ type: String, reflect: !0 })
+], p.prototype, "forId", 2);
+n([
+  i({ type: String })
+], p.prototype, "helptext", 2);
+n([
+  i({ type: String })
+], p.prototype, "helptextDropdown", 2);
+n([
+  i({ type: String })
+], p.prototype, "helptextDropdownButton", 2);
+n([
+  w()
+], p.prototype, "isHelpTextOpen", 2);
+p = n([
+  u("pkt-helptext")
+], p);
+export {
+  p as P
+};

package/dist/helptext-xUdEGuNQ.cjs

@@ -0,0 +1,24 @@
+"use strict";const e=require("./element-B0UgldHm.cjs"),x=require("./ref-DDYBJ4EB.cjs"),h=require("./icon-PWn7rnfg.cjs"),u=require("./class-map-aeZWY44S.cjs"),c=require("./state-CG-binsl.cjs"),a=require("./stringutils-CkVRq4jP.cjs"),d=require("./input-wrapper-jPnKsfEC.cjs"),k=require("./pkt-slot-controller-Oc32unDk.cjs");var v=Object.defineProperty,w=Object.getOwnPropertyDescriptor,r=(o,p,l,n)=>{for(var t=n>1?void 0:n?w(p,l):p,s=o.length-1,i;s>=0;s--)(i=o[s])&&(t=(n?i(p,l,t):i(t))||t);return n&&t&&v(p,l,t),t};exports.PktHelptext=class extends e.PktElement{constructor(){super(),this.defaultSlot=x.e(),this.forId=a.uuidish(),this.helptext="",this.helptextDropdown="",this.helptextDropdownButton=d.specs.props.helptextDropdownButton.default,this.isHelpTextOpen=!1,this.slotController=new k.PktSlotController(this,this.defaultSlot)}render(){const p=()=>{const t=!this.isHelpTextOpen;this.isHelpTextOpen=t,this.dispatchEvent(new CustomEvent("toggleHelpText",{bubbles:!0,detail:{isOpen:t}}))},l=()=>this.helptextDropdown?e.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>`:e.E,n=()=>e.x`<div>
+        <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 e.x`${n()}`}};r([e.n({type:String,reflect:!0})],exports.PktHelptext.prototype,"forId",2);r([e.n({type:String})],exports.PktHelptext.prototype,"helptext",2);r([e.n({type:String})],exports.PktHelptext.prototype,"helptextDropdown",2);r([e.n({type:String})],exports.PktHelptext.prototype,"helptextDropdownButton",2);r([c.r()],exports.PktHelptext.prototype,"isHelpTextOpen",2);exports.PktHelptext=r([e.t("pkt-helptext")],exports.PktHelptext);

package/dist/helptext.d.ts

@@ -1,6 +1,13 @@
 export { }
 
 
+declare global {
+    interface HTMLElementTagNameMap {
+        'pkt-icon': PktIcon;
+    }
+}
+
+
 declare global {
     interface Window {
         pktTz: string;

package/dist/icon.d.ts

@@ -1,6 +1,13 @@
 export { }
 
 
+declare global {
+    interface HTMLElementTagNameMap {
+        'pkt-icon': PktIcon;
+    }
+}
+
+
 declare global {
     interface Window {
         pktTz: string;