@oslokommune/punkt-elements 12.26.0 → 12.27.0

package/src/components/select/select.ts

@@ -4,6 +4,7 @@ import { Ref, createRef, ref } from 'lit/directives/ref.js'
 import { ifDefined } from 'lit/directives/if-defined.js'
 import { PktInputElement } from '@/base-elements/input-element'
 import { PktOptionsSlotController } from '@/controllers/pkt-options-controller'
+import { PktSlotController } from '@/controllers/pkt-slot-controller'
 import '@/components/input-wrapper'
 
 export type TSelectOption = {
@@ -31,17 +32,19 @@ export interface IPktSelect {
 
 @customElement('pkt-select')
 export class PktSelect extends PktInputElement implements IPktSelect {
-  private selectRef: Ref<HTMLSelectElement> = createRef()
-  defaultSlot: Ref<HTMLElement> = createRef()
+  private inputRef: Ref<HTMLSelectElement> = createRef()
+  private helptextSlot: Ref<HTMLElement> = createRef()
 
   @property({ type: Array }) options: TSelectOption[] = []
-  @property({ type: String }) value: string = ''
+  @property({ type: String, reflect: true }) value: string = ''
 
   @state() private _options: TSelectOption[] = []
 
   constructor() {
     super()
     this.optionsController = new PktOptionsSlotController(this)
+    this.slotController = new PktSlotController(this, this.helptextSlot)
+    this.slotController.skipOptions = true
   }
 
   // Used for initilization
@@ -73,9 +76,23 @@ export class PktSelect extends PktInputElement implements IPktSelect {
     if (name === 'options') {
       this._options = value ? JSON.parse(value) : []
     }
+    if (name === 'value' && this.value !== _old) {
+      this.valueChanged(value, _old)
+    }
     super.attributeChangedCallback(name, _old, value)
   }
 
+  updated(changedProperties: PropertyValues) {
+    super.updated(changedProperties)
+    if (changedProperties.has('value')) {
+      this.counterCurrent = this.value?.length || 0
+      this.valueChanged(this.value, changedProperties.get('value'))
+    }
+    if (changedProperties.has('id')) {
+      !this.name && this.id && (this.name = this.id)
+    }
+  }
+
   protected firstUpdated(_changedProperties: PropertyValues): void {
     super.firstUpdated(_changedProperties)
     if (this.options.length) {
@@ -100,7 +117,7 @@ export class PktSelect extends PktInputElement implements IPktSelect {
         .counterMaxLength=${this.counterMaxLength}
         class="pkt-select"
         errorMessage=${ifDefined(this.errorMessage)}
-        forId=${this.id}
+        forId=${this.id + '-input'}
         helptext=${ifDefined(this.helptext)}
         helptextDropdown=${ifDefined(this.helptextDropdown)}
         helptextDropdownButton=${ifDefined(this.helptextDropdownButton)}
@@ -114,11 +131,26 @@ export class PktSelect extends PktInputElement implements IPktSelect {
           aria-errormessage=${`${this.id}-error`}
           aria-labelledby=${ifDefined(this.ariaLabelledby)}
           ?disabled=${this.disabled}
-          id=${this.id}
-          name=${this.name || this.id}
+          id=${this.id + '-input'}
+          name=${(this.name || this.id) + '-input'}
           value=${this.value}
-          ${ref(this.selectRef)}
-          ${ref(this.defaultSlot)}
+          @change=${(e: Event) => {
+            this.value = (e.target as HTMLSelectElement).value
+            e.stopImmediatePropagation()
+          }}
+          @input=${(e: Event) => {
+            this.onInput()
+            e.stopImmediatePropagation()
+          }}
+          @focus=${(e: FocusEvent) => {
+            this.onFocus()
+            e.stopImmediatePropagation()
+          }}
+          @blur=${(e: FocusEvent) => {
+            this.onBlur()
+            e.stopImmediatePropagation()
+          }}
+          ${ref(this.inputRef)}
         >
           ${this._options.length > 0 &&
           this._options.map(
@@ -132,6 +164,7 @@ export class PktSelect extends PktInputElement implements IPktSelect {
               </option>`,
           )}
         </select>
+        <div class="pkt-contents" ${ref(this.helptextSlot)} name="helptext" slot="helptext"></div>
       </pkt-input-wrapper>
     `
   }

package/src/components/tag/tag.ts

@@ -51,8 +51,8 @@ export class PktTag extends PktElement {
   @property({ type: String, reflect: true }) skin: TTagSkin = specs.props.skin.default as TTagSkin
   @property({ type: String, reflect: true }) textStyle: string = specs.props.textStyle.default
   @property({ type: String, reflect: true }) iconName: string | undefined = undefined
-  @property({ type: String, reflect: true }) type: TTagType = specs.props.type.default as TTagType
-  @property({ type: String, reflect: true }) ariaLabel: string = specs.props.ariaLabel.default
+  @property({ type: String }) type: TTagType = specs.props.type.default as TTagType
+  @property({ type: String }) ariaLabel: string = specs.props.ariaLabel.default
 
   /**
    * Element state

package/src/components/textarea/textarea.ts

@@ -4,12 +4,16 @@ import { Ref, createRef, ref } from 'lit/directives/ref.js'
 import { classMap } from 'lit/directives/class-map.js'
 import { live } from 'lit/directives/live.js'
 import { PktInputElement } from '@/base-elements/input-element'
+import { PktSlotController } from '@/controllers/pkt-slot-controller'
 
 import '@/components/input-wrapper'
 import '@/components/icon'
 
 @customElement('pkt-textarea')
 export class PktTextarea extends PktInputElement {
+  private inputRef: Ref<HTMLTextAreaElement> = createRef()
+  private helptextSlot: Ref<HTMLElement> = createRef()
+
   @property({ type: String, reflect: true })
   value: string = ''
 
@@ -24,7 +28,10 @@ export class PktTextarea extends PktInputElement {
 
   @state() counterCurrent = 0
 
-  private inputRef: Ref<HTMLTextAreaElement> = createRef()
+  constructor() {
+    super()
+    this.slotController = new PktSlotController(this, this.helptextSlot)
+  }
 
   attributeChangedCallback(name: string, _old: string | null, value: string | null): void {
     if (name === 'value' && this.value !== _old) {
@@ -79,6 +86,7 @@ export class PktTextarea extends PktInputElement {
       .requiredText=${this.requiredText}
       class="pkt-textarea"
     >
+      <div class="pkt-contents" ${ref(this.helptextSlot)} name="helptext" slot="helptext"></div>
       <textarea
         ${ref(this.inputRef)}
         class=${inputClasses}

package/src/components/textinput/textinput.ts

@@ -3,11 +3,16 @@ import { customElement, property, state } from 'lit/decorators.js'
 import { Ref, createRef, ref } from 'lit/directives/ref.js'
 import { classMap } from 'lit/directives/class-map.js'
 import { PktInputElement } from '@/base-elements/input-element'
+import { PktSlotController } from '@/controllers/pkt-slot-controller'
+
 import '@/components/input-wrapper'
 import '@/components/icon'
 
 @customElement('pkt-textinput')
 export class PktTextinput extends PktInputElement {
+  private inputRef: Ref<HTMLTextAreaElement> = createRef()
+  private helptextSlot: Ref<HTMLElement> = createRef()
+
   @property({ type: String, reflect: true })
   value: string = ''
 
@@ -34,7 +39,10 @@ export class PktTextinput extends PktInputElement {
 
   @state() counterCurrent = 0
 
-  private inputRef: Ref<HTMLInputElement> = createRef()
+  constructor() {
+    super()
+    this.slotController = new PktSlotController(this, this.helptextSlot)
+  }
 
   attributeChangedCallback(name: string, _old: string | null, value: string | null): void {
     if (name === 'value' && this.value !== _old) {
@@ -92,6 +100,7 @@ export class PktTextinput extends PktInputElement {
         .requiredText=${this.requiredText}
         class="pkt-textinput"
       >
+        <div class="pkt-contents" ${ref(this.helptextSlot)} name="helptext" slot="helptext"></div>
         <div class="pkt-input__container">
           ${this.prefix ? html`<div class="pkt-input-prefix">${this.prefix}</div>` : nothing}
           <input

package/dist/helptext-CNgXo34f.js

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

package/dist/helptext-XPScYIkx.cjs

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

package/dist/input-wrapper-CWvzXs6X.js

@@ -1,160 +0,0 @@
-import { P as m, E as l, x as p, n as r, t as w } from "./element-BKrU5soj.js";
-import { P as k } from "./pkt-slot-controller-DhwCJd_0.js";
-import { e as v, n as T } from "./ref-D5qG7OFB.js";
-import { o as D } from "./icon-Bsb0MB2h.js";
-import { e as c } from "./class-map-CQzsZCwS.js";
-import { u as _ } from "./stringutils-DJjRa8dG.js";
-import { s } from "./input-wrapper-Bw9tARAD.js";
-import "./helptext-CNgXo34f.js";
-var E = Object.defineProperty, B = Object.getOwnPropertyDescriptor, e = (h, d, a, i) => {
-  for (var o = i > 1 ? void 0 : i ? B(d, a) : d, n = h.length - 1, u; n >= 0; n--)
-    (u = h[n]) && (o = (i ? u(d, a, o) : u(o)) || o);
-  return i && o && E(d, a, o), o;
-};
-let t = class extends m {
-  constructor() {
-    super(), this.defaultSlot = v(), this.forId = _(), this.label = "", this.helptext = null, this.helptextDropdown = null, this.helptextDropdownButton = null, this.counter = s.props.counter.default, this.counterCurrent = 0, this.counterMaxLength = 0, this.optionalTag = s.props.optionalTag.default, this.optionalText = s.props.optionalText.default, this.requiredTag = s.props.requiredTag.default, this.requiredText = s.props.requiredText.default, this.hasError = s.props.hasError.default, this.errorMessage = "", this.disabled = s.props.disabled.default, this.inline = s.props.inline.default, this.ariaDescribedby = void 0, this.hasFieldset = s.props.hasFieldset.default, this.useWrapper = s.props.useWrapper.default, this.role = "group", this.slotController = new k(this, this.defaultSlot);
-  }
-  render() {
-    const h = {
-      "pkt-inputwrapper": !0,
-      "pkt-inputwrapper--error": this.hasError,
-      "pkt-inputwrapper--disabled": this.disabled,
-      "pkt-inputwrapper--inline": this.inline
-    }, d = {
-      "pkt-tag": !0,
-      "pkt-tag--small": !0,
-      "pkt-tag--thin-text": !0,
-      "pkt-tag--blue-light": this.optionalTag,
-      "pkt-tag--beige": !this.optionalTag && this.requiredTag
-    }, a = this.helptextDropdown !== "", i = {
-      "pkt-inputwrapper__label": !0,
-      "pkt-inputwrapper__fieldset": this.hasFieldset,
-      "pkt-inputwrapper__legend": this.hasFieldset
-    }, o = this.ariaDescribedby ? this.ariaDescribedby : this.helptext ? `${this.forId}-helptext` : l, n = () => this.optionalTag || this.requiredTag ? p`<span class=${c(d)}
-          >${this.optionalTag ? this.optionalText : this.requiredTag ? this.requiredText : l}</span
-        >` : l, u = () => this.useWrapper ? this.hasFieldset ? p`<legend class="pkt-inputwrapper__legend" id="${this.forId}-label">
-            ${this.label} ${n()}
-          </legend>` : a ? p`<h2>${this.label} ${n()}</h2>` : p`<span>${this.label} ${n()}</span>` : p`<label
-          for="${this.forId}"
-          class="pkt-sr-only"
-          aria-describedby="${o}"
-          id="${this.forId}-label"
-        >
-          ${this.label}
-        </label>`, g = () => this.useWrapper && (this.helptext || this.helptextDropdown) ? p`
-          <pkt-helptext
-            .forId=${this.forId}
-            .helptext=${this.helptext}
-            .helptextDropdown=${this.helptextDropdown}
-            .helptextDropdownButton=${this.helptextDropdownButton || s.props.helptextDropdownButton.default}
-            @toggleHelpText=${(x) => {
-      this.toggleDropdown(x);
-    }}
-          ></pkt-helptext>
-        ` : l, y = () => this.counter ? p`<div class="pkt-input__counter" aria-live="polite" aria-atomic="true">
-          ${this.counterCurrent || 0}
-          ${this.counterMaxLength ? `/${this.counterMaxLength}` : l}
-        </div>` : l, b = () => this.hasError && this.errorMessage ? p`<div
-          role="alert"
-          class="pkt-alert pkt-alert--error pkt-alert--compact"
-          aria-live="assertive"
-          aria-atomic="true"
-          id="${this.forId}-error"
-        >
-          <pkt-icon name="alert-error" class="pkt-alert__icon"></pkt-icon>
-          <div class="pkt-alert__text">${D(this.errorMessage)}</div>
-        </div>` : l, f = () => p`
-        ${u()} ${g()}
-        ${a ? p`<label for="${this.forId}" class="pkt-sr-only" aria-describedby="${o}"
-              >${this.label}</label
-            >` : l}
-        <div class="pkt-contents" ${T(this.defaultSlot)}></div>
-        ${y()} ${b()}
-      `, $ = () => this.hasFieldset ? p`<fieldset class=${c(i)} aria-describedby="${o}">
-            ${f()}
-          </fieldset>` : a ? p`<div class=${c(i)}>${f()}</div>` : p`<label
-              class=${c(i)}
-              for="${this.forId}"
-              aria-describedby="${o}"
-              id="${this.forId}-label"
-            >
-              ${f()}
-            </label>`;
-    return p`<div class=${c(h)}>${$()}</div> `;
-  }
-  toggleDropdown(h) {
-    this.dispatchEvent(
-      new CustomEvent("toggleHelpText", {
-        bubbles: !1,
-        detail: { isOpen: h.detail.isOpen }
-      })
-    );
-  }
-};
-e([
-  r({ type: String })
-], t.prototype, "forId", 2);
-e([
-  r({ type: String })
-], t.prototype, "label", 2);
-e([
-  r({ type: String })
-], t.prototype, "helptext", 2);
-e([
-  r({ type: String })
-], t.prototype, "helptextDropdown", 2);
-e([
-  r({ type: String })
-], t.prototype, "helptextDropdownButton", 2);
-e([
-  r({ type: Boolean })
-], t.prototype, "counter", 2);
-e([
-  r({ type: Number })
-], t.prototype, "counterCurrent", 2);
-e([
-  r({ type: Number })
-], t.prototype, "counterMaxLength", 2);
-e([
-  r({ type: Boolean })
-], t.prototype, "optionalTag", 2);
-e([
-  r({ type: String })
-], t.prototype, "optionalText", 2);
-e([
-  r({ type: Boolean })
-], t.prototype, "requiredTag", 2);
-e([
-  r({ type: String })
-], t.prototype, "requiredText", 2);
-e([
-  r({ type: Boolean })
-], t.prototype, "hasError", 2);
-e([
-  r({ type: String })
-], t.prototype, "errorMessage", 2);
-e([
-  r({ type: Boolean })
-], t.prototype, "disabled", 2);
-e([
-  r({ type: Boolean })
-], t.prototype, "inline", 2);
-e([
-  r({ type: String })
-], t.prototype, "ariaDescribedby", 2);
-e([
-  r({ type: Boolean })
-], t.prototype, "hasFieldset", 2);
-e([
-  r({ type: Boolean })
-], t.prototype, "useWrapper", 2);
-e([
-  r({ type: String, reflect: !0 })
-], t.prototype, "role", 2);
-t = e([
-  w("pkt-input-wrapper")
-], t);
-export {
-  t as P
-};

package/dist/input-wrapper-nvacN4EY.cjs

@@ -1,48 +0,0 @@
-"use strict";const t=require("./element-B0UgldHm.cjs"),f=require("./pkt-slot-controller-BEDVscvU.cjs"),d=require("./ref-DDYBJ4EB.cjs"),$=require("./icon-PWn7rnfg.cjs"),l=require("./class-map-aeZWY44S.cjs"),I=require("./stringutils-CkVRq4jP.cjs"),p=require("./input-wrapper-jPnKsfEC.cjs");require("./helptext-XPScYIkx.cjs");var P=Object.defineProperty,W=Object.getOwnPropertyDescriptor,e=(u,s,a,o)=>{for(var r=o>1?void 0:o?W(s,a):s,i=u.length-1,n;i>=0;i--)(n=u[i])&&(r=(o?n(s,a,r):n(r))||r);return o&&r&&P(s,a,r),r};exports.PktInputWrapper=class extends t.PktElement{constructor(){super(),this.defaultSlot=d.e(),this.forId=I.uuidish(),this.label="",this.helptext=null,this.helptextDropdown=null,this.helptextDropdownButton=null,this.counter=p.specs.props.counter.default,this.counterCurrent=0,this.counterMaxLength=0,this.optionalTag=p.specs.props.optionalTag.default,this.optionalText=p.specs.props.optionalText.default,this.requiredTag=p.specs.props.requiredTag.default,this.requiredText=p.specs.props.requiredText.default,this.hasError=p.specs.props.hasError.default,this.errorMessage="",this.disabled=p.specs.props.disabled.default,this.inline=p.specs.props.inline.default,this.ariaDescribedby=void 0,this.hasFieldset=p.specs.props.hasFieldset.default,this.useWrapper=p.specs.props.useWrapper.default,this.role="group",this.slotController=new f.PktSlotController(this,this.defaultSlot)}render(){const s={"pkt-inputwrapper":!0,"pkt-inputwrapper--error":this.hasError,"pkt-inputwrapper--disabled":this.disabled,"pkt-inputwrapper--inline":this.inline},a={"pkt-tag":!0,"pkt-tag--small":!0,"pkt-tag--thin-text":!0,"pkt-tag--blue-light":this.optionalTag,"pkt-tag--beige":!this.optionalTag&&this.requiredTag},o=this.helptextDropdown!=="",r={"pkt-inputwrapper__label":!0,"pkt-inputwrapper__fieldset":this.hasFieldset,"pkt-inputwrapper__legend":this.hasFieldset},i=this.ariaDescribedby?this.ariaDescribedby:this.helptext?`${this.forId}-helptext`:t.E,n=()=>this.optionalTag||this.requiredTag?t.x`<span class=${l.e(a)}
-          >${this.optionalTag?this.optionalText:this.requiredTag?this.requiredText:t.E}</span
-        >`:t.E,c=()=>this.useWrapper?this.hasFieldset?t.x`<legend class="pkt-inputwrapper__legend" id="${this.forId}-label">
-            ${this.label} ${n()}
-          </legend>`:o?t.x`<h2>${this.label} ${n()}</h2>`:t.x`<span>${this.label} ${n()}</span>`:t.x`<label
-          for="${this.forId}"
-          class="pkt-sr-only"
-          aria-describedby="${i}"
-          id="${this.forId}-label"
-        >
-          ${this.label}
-        </label>`,g=()=>this.useWrapper&&(this.helptext||this.helptextDropdown)?t.x`
-          <pkt-helptext
-            .forId=${this.forId}
-            .helptext=${this.helptext}
-            .helptextDropdown=${this.helptextDropdown}
-            .helptextDropdownButton=${this.helptextDropdownButton||p.specs.props.helptextDropdownButton.default}
-            @toggleHelpText=${k=>{this.toggleDropdown(k)}}
-          ></pkt-helptext>
-        `:t.E,x=()=>this.counter?t.x`<div class="pkt-input__counter" aria-live="polite" aria-atomic="true">
-          ${this.counterCurrent||0}
-          ${this.counterMaxLength?`/${this.counterMaxLength}`:t.E}
-        </div>`:t.E,y=()=>this.hasError&&this.errorMessage?t.x`<div
-          role="alert"
-          class="pkt-alert pkt-alert--error pkt-alert--compact"
-          aria-live="assertive"
-          aria-atomic="true"
-          id="${this.forId}-error"
-        >
-          <pkt-icon name="alert-error" class="pkt-alert__icon"></pkt-icon>
-          <div class="pkt-alert__text">${$.o(this.errorMessage)}</div>
-        </div>`:t.E,h=()=>t.x`
-        ${c()} ${g()}
-        ${o?t.x`<label for="${this.forId}" class="pkt-sr-only" aria-describedby="${i}"
-              >${this.label}</label
-            >`:t.E}
-        <div class="pkt-contents" ${d.n(this.defaultSlot)}></div>
-        ${x()} ${y()}
-      `,b=()=>this.hasFieldset?t.x`<fieldset class=${l.e(r)} aria-describedby="${i}">
-            ${h()}
-          </fieldset>`:o?t.x`<div class=${l.e(r)}>${h()}</div>`:t.x`<label
-              class=${l.e(r)}
-              for="${this.forId}"
-              aria-describedby="${i}"
-              id="${this.forId}-label"
-            >
-              ${h()}
-            </label>`;return t.x`<div class=${l.e(s)}>${b()}</div> `}toggleDropdown(s){this.dispatchEvent(new CustomEvent("toggleHelpText",{bubbles:!1,detail:{isOpen:s.detail.isOpen}}))}};e([t.n({type:String})],exports.PktInputWrapper.prototype,"forId",2);e([t.n({type:String})],exports.PktInputWrapper.prototype,"label",2);e([t.n({type:String})],exports.PktInputWrapper.prototype,"helptext",2);e([t.n({type:String})],exports.PktInputWrapper.prototype,"helptextDropdown",2);e([t.n({type:String})],exports.PktInputWrapper.prototype,"helptextDropdownButton",2);e([t.n({type:Boolean})],exports.PktInputWrapper.prototype,"counter",2);e([t.n({type:Number})],exports.PktInputWrapper.prototype,"counterCurrent",2);e([t.n({type:Number})],exports.PktInputWrapper.prototype,"counterMaxLength",2);e([t.n({type:Boolean})],exports.PktInputWrapper.prototype,"optionalTag",2);e([t.n({type:String})],exports.PktInputWrapper.prototype,"optionalText",2);e([t.n({type:Boolean})],exports.PktInputWrapper.prototype,"requiredTag",2);e([t.n({type:String})],exports.PktInputWrapper.prototype,"requiredText",2);e([t.n({type:Boolean})],exports.PktInputWrapper.prototype,"hasError",2);e([t.n({type:String})],exports.PktInputWrapper.prototype,"errorMessage",2);e([t.n({type:Boolean})],exports.PktInputWrapper.prototype,"disabled",2);e([t.n({type:Boolean})],exports.PktInputWrapper.prototype,"inline",2);e([t.n({type:String})],exports.PktInputWrapper.prototype,"ariaDescribedby",2);e([t.n({type:Boolean})],exports.PktInputWrapper.prototype,"hasFieldset",2);e([t.n({type:Boolean})],exports.PktInputWrapper.prototype,"useWrapper",2);e([t.n({type:String,reflect:!0})],exports.PktInputWrapper.prototype,"role",2);exports.PktInputWrapper=e([t.t("pkt-input-wrapper")],exports.PktInputWrapper);

package/dist/pkt-slot-controller-BEDVscvU.cjs

@@ -1 +0,0 @@
-"use strict";class h{constructor(t,...e){this.nodes=[],this.host=t,this.host.addController(this),this.slots=e,this.nodes=[],this.observer=new MutationObserver(o=>this.handleMutations(o))}hostConnected(){this.updateNodes(),this.observer.observe(this.host,{childList:!0})}hostDisconnected(){this.observer.disconnect()}hostUpdated(){this.updateSlots()}updateNodes(){this.nodes=[],Array.from(this.host.childNodes).forEach(e=>{var o;if(e.nodeType===Node.TEXT_NODE&&((o=e.nodeValue)!=null&&o.trim())){const s=document==null?void 0:document.createElement("template");s.content.appendChild(e),this.nodes.push(s)}else this.isSlotElement(e)||this.nodes.push(e)})}updateSlots(){this.slots.forEach(t=>{if(!t.value)return;const e=t.value.getAttribute("name"),s=this.nodes.flatMap(i=>i.getAttribute&&i.getAttribute("slot")==e?this.nodeFromElement(i,t):[]).filter(i=>t.value&&!t.value.contains(i)&&!i.contains(t.value));if(s.length>0)if(typeof t.value.replaceChildren!="function"){for(;t.value.firstChild;)t.value.removeChild(t.value.firstChild);t.value.append(...s)}else t.value.replaceChildren(...s)})}handleMutations(t){let e=!1;t.forEach(o=>{o.type==="childList"&&(o.addedNodes.forEach(s=>{var l;const i=s.nodeType===Node.ELEMENT_NODE&&!this.isSlotElement(s),d=s.nodeType===Node.TEXT_NODE&&((l=s.nodeValue)==null?void 0:l.trim());if(i)this.nodes.push(s),e=!0;else if(d){const n=document==null?void 0:document.createElement("template");n.content.appendChild(s),this.nodes.push(n),e=!0}}),o.removedNodes.forEach(s=>{this.nodes=this.nodes.filter(i=>i!==s),e=!0}))}),e&&this.updateSlots()}isSlotElement(t){return this.slots.some(e=>e.value===t)}nodeFromElement(t,e){var o;return t===((o=e.value)==null?void 0:o.parentNode)?[]:t instanceof HTMLTemplateElement?Array.from(t.content.childNodes):[t]}}exports.PktSlotController=h;

package/dist/pkt-slot-controller-DhwCJd_0.js

@@ -1,67 +0,0 @@
-class a {
-  constructor(t, ...e) {
-    this.nodes = [], this.host = t, this.host.addController(this), this.slots = e, this.nodes = [], this.observer = new MutationObserver((o) => this.handleMutations(o));
-  }
-  hostConnected() {
-    this.updateNodes(), this.observer.observe(this.host, { childList: !0 });
-  }
-  hostDisconnected() {
-    this.observer.disconnect();
-  }
-  hostUpdated() {
-    this.updateSlots();
-  }
-  updateNodes() {
-    this.nodes = [], Array.from(this.host.childNodes).forEach((e) => {
-      var o;
-      if (e.nodeType === Node.TEXT_NODE && ((o = e.nodeValue) != null && o.trim())) {
-        const s = document == null ? void 0 : document.createElement("template");
-        s.content.appendChild(e), this.nodes.push(s);
-      } else this.isSlotElement(e) || this.nodes.push(e);
-    });
-  }
-  updateSlots() {
-    this.slots.forEach((t) => {
-      if (!t.value) return;
-      const e = t.value.getAttribute("name"), s = this.nodes.flatMap(
-        (i) => i.getAttribute && i.getAttribute("slot") == e ? this.nodeFromElement(i, t) : []
-      ).filter(
-        (i) => t.value && !t.value.contains(i) && !i.contains(t.value)
-      );
-      if (s.length > 0)
-        if (typeof t.value.replaceChildren != "function") {
-          for (; t.value.firstChild; )
-            t.value.removeChild(t.value.firstChild);
-          t.value.append(...s);
-        } else
-          t.value.replaceChildren(...s);
-    });
-  }
-  handleMutations(t) {
-    let e = !1;
-    t.forEach((o) => {
-      o.type === "childList" && (o.addedNodes.forEach((s) => {
-        var l;
-        const i = s.nodeType === Node.ELEMENT_NODE && !this.isSlotElement(s), d = s.nodeType === Node.TEXT_NODE && ((l = s.nodeValue) == null ? void 0 : l.trim());
-        if (i)
-          this.nodes.push(s), e = !0;
-        else if (d) {
-          const n = document == null ? void 0 : document.createElement("template");
-          n.content.appendChild(s), this.nodes.push(n), e = !0;
-        }
-      }), o.removedNodes.forEach((s) => {
-        this.nodes = this.nodes.filter((i) => i !== s), e = !0;
-      }));
-    }), e && this.updateSlots();
-  }
-  isSlotElement(t) {
-    return this.slots.some((e) => e.value === t);
-  }
-  nodeFromElement(t, e) {
-    var o;
-    return t === ((o = e.value) == null ? void 0 : o.parentNode) ? [] : t instanceof HTMLTemplateElement ? Array.from(t.content.childNodes) : [t];
-  }
-}
-export {
-  a as P
-};

package/dist/select-B19JEWYw.cjs

@@ -1,44 +0,0 @@
-"use strict";const l=require("./element-B0UgldHm.cjs"),d=require("./state-CG-binsl.cjs"),a=require("./ref-DDYBJ4EB.cjs"),o=require("./if-defined-Br3lDE5v.cjs"),u=require("./input-element-Dnda8hac.cjs");require("./input-wrapper-nvacN4EY.cjs");class c{constructor(t){this.nodes=[],this.options=[],this.host=t,this.host.addController(this),this.nodes=[],this.options=[],this.observer=new MutationObserver(e=>this.handleMutations(e))}hostConnected(){Array.from(this.host.childNodes).forEach(t=>{(t.nodeName==="OPTION"||t.nodeName==="DATA")&&this.addNode(t)}),this.observer.observe(this.host,{childList:!0})}hostDisconnected(){this.observer.disconnect()}addNode(t){(t.nodeName==="OPTION"||t.nodeName==="DATA")&&(t.setAttribute("class","pkt-hide"),this.nodes.push(t))}createOptions(){this.options=this.nodes.map(t=>({value:t.getAttribute("value")||t.textContent||"",label:t.textContent||t.getAttribute("value")||"",selected:!!t.getAttribute("selected"),disabled:!!t.getAttribute("disabled")})),this.host.setAttribute("options",JSON.stringify(this.options))}handleMutations(t){let e=!1;t.forEach(s=>{s.addedNodes.forEach(i=>{(i.nodeName==="OPTION"||i.nodeName==="DATA")&&(this.addNode(i),e=!0)}),s.removedNodes.forEach(i=>{(i.nodeName==="OPTION"||i.nodeName==="DATA")&&(this.nodes=this.nodes.filter(r=>r!==i),e=!0)})}),e&&this.createOptions()}}var b=Object.defineProperty,f=Object.getOwnPropertyDescriptor,h=(n,t,e,s)=>{for(var i=s>1?void 0:s?f(t,e):t,r=n.length-1,p;r>=0;r--)(p=n[r])&&(i=(s?p(t,e,i):p(i))||i);return s&&i&&b(t,e,i),i};exports.PktSelect=class extends u.PktInputElement{constructor(){super(),this.selectRef=a.e(),this.defaultSlot=a.e(),this.options=[],this.value="",this._options=[],this.optionsController=new c(this)}connectedCallback(){super.connectedCallback();const t=this.options.length>0,e=this.optionsController.nodes.length&&this.optionsController.nodes.length>0;!t&&e?this.optionsController.nodes.forEach(s=>{const i={value:s.getAttribute("value")||s.textContent||"",label:s.textContent||s.getAttribute("value")||"",disabled:!!s.getAttribute("disabled")};s.getAttribute("selected")&&!this.value&&(this.value=i.value),this._options.push(i)}):this._options=this.options}attributeChangedCallback(t,e,s){t==="options"&&(this._options=s?JSON.parse(s):[]),super.attributeChangedCallback(t,e,s)}firstUpdated(t){super.firstUpdated(t),this.options.length&&(this._options=this.options)}render(){const t=`pkt-input ${this.fullwidth?"pkt-input--fullwidth":""}`;return l.x`
-      <pkt-input-wrapper
-        ?counter=${this.counter}
-        ?disabled=${this.disabled}
-        ?hasError=${this.hasError}
-        ?inline=${this.inline}
-        ?optionalTag=${this.optionalTag}
-        ?requiredTag=${this.requiredTag}
-        ?useWrapper=${this.useWrapper}
-        ariaDescribedBy=${o.o(this.ariaDescribedBy)}
-        .counterCurrent=${this.counterCurrent}
-        .counterMaxLength=${this.counterMaxLength}
-        class="pkt-select"
-        errorMessage=${o.o(this.errorMessage)}
-        forId=${this.id}
-        helptext=${o.o(this.helptext)}
-        helptextDropdown=${o.o(this.helptextDropdown)}
-        helptextDropdownButton=${o.o(this.helptextDropdownButton)}
-        label=${o.o(this.label)}
-        optionalText=${o.o(this.optionalText)}
-        requiredText=${o.o(this.requiredText)}
-      >
-        <select
-          class=${t}
-          aria-invalid=${this.hasError}
-          aria-errormessage=${`${this.id}-error`}
-          aria-labelledby=${o.o(this.ariaLabelledby)}
-          ?disabled=${this.disabled}
-          id=${this.id}
-          name=${this.name||this.id}
-          value=${this.value}
-          ${a.n(this.selectRef)}
-          ${a.n(this.defaultSlot)}
-        >
-          ${this._options.length>0&&this._options.map(e=>l.x`<option
-                value=${e.value}
-                ?selected=${this.value==e.value}
-                ?disabled=${e.disabled}
-              >
-                ${e.label}
-              </option>`)}
-        </select>
-      </pkt-input-wrapper>
-    `}};h([l.n({type:Array})],exports.PktSelect.prototype,"options",2);h([l.n({type:String})],exports.PktSelect.prototype,"value",2);h([d.r()],exports.PktSelect.prototype,"_options",2);exports.PktSelect=h([l.t("pkt-select")],exports.PktSelect);