@oslokommune/punkt-elements 13.0.0 → 13.1.2

package/dist/input-wrapper-_Lk9HzHU.js

@@ -1,190 +0,0 @@
-import { P as m, E as l, x as i, n as o, a as k } from "./element-CgEWt74-.js";
-import { P as w } from "./pkt-slot-controller-BPGj-LC5.js";
-import { e as f, n as b } from "./ref-BBYSqgeW.js";
-import { o as v } from "./if-defined-CmuO4Vz9.js";
-import { o as T } from "./icon-CC1js8eR.js";
-import { e as g } from "./class-map-BpTj9gtz.js";
-import { u as E } from "./stringutils-DJjRa8dG.js";
-import { s as p } from "./input-wrapper-8iKEzDRZ.js";
-import "./helptext-B7eI0iBQ.js";
-var _ = Object.defineProperty, S = Object.getOwnPropertyDescriptor, e = (r, h, a, n) => {
-  for (var s = n > 1 ? void 0 : n ? S(h, a) : h, d = r.length - 1, u; d >= 0; d--)
-    (u = r[d]) && (s = (n ? u(h, a, s) : u(s)) || s);
-  return n && s && _(h, a, s), s;
-};
-const D = {
-  fromAttribute(r) {
-    return r == null ? !1 : r === "" || r === "true" || r === !0 ? !0 : r === "false" || r === !1 ? !1 : !!r;
-  },
-  toAttribute(r) {
-    return r ? "true" : "false";
-  }
-};
-let t = class extends m {
-  constructor() {
-    super(), this.defaultSlot = f(), this.helptextSlot = f(), this.forId = E(), this.label = "", this.helptext = null, this.helptextDropdown = null, this.helptextDropdownButton = null, this.counter = p.props.counter.default, this.counterCurrent = 0, this.counterMaxLength = 0, this.counterError = null, this.counterPosition = "bottom", this.optionalTag = p.props.optionalTag.default, this.optionalText = p.props.optionalText.default, this.requiredTag = p.props.requiredTag.default, this.requiredText = p.props.requiredText.default, this.hasError = p.props.hasError.default, this.errorMessage = "", this.disabled = p.props.disabled.default, this.inline = p.props.inline.default, this.ariaDescribedby = void 0, this.hasFieldset = p.props.hasFieldset.default, this.role = "group", this.useWrapper = p.props.useWrapper.default, this.slotController = new w(this, this.defaultSlot, this.helptextSlot);
-  }
-  updated(r) {
-    super.updated(r);
-  }
-  render() {
-    const r = {
-      "pkt-inputwrapper": !0,
-      "pkt-inputwrapper--error": this.hasError,
-      "pkt-inputwrapper--disabled": this.disabled,
-      "pkt-inputwrapper--inline": this.inline
-    }, h = {
-      "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.ariaDescribedby ? this.ariaDescribedby : this.helptext ? `${this.forId}-helptext` : l, n = () => this.optionalTag || this.requiredTag ? i`<span class=${g(h)}
-          >${this.optionalTag ? this.optionalText : this.requiredTag ? this.requiredText : l}</span
-        >` : l, s = () => this.useWrapper ? this.hasFieldset ? i`<legend
-            class="pkt-inputwrapper__legend"
-            id="${this.forId}-label"
-            @click=${this.handleLabelClick}
-          >
-            ${this.label} ${n()}
-          </legend>` : i`<label
-            class="pkt-inputwrapper__label"
-            for="${this.forId}"
-            aria-describedby="${a}"
-            id="${this.forId}-label"
-            @click=${this.handleLabelClick}
-            >${this.label}${n()}</label
-          >` : i`<label
-          for="${this.forId}"
-          class="pkt-sr-only"
-          aria-describedby="${a}"
-          id="${this.forId}-label"
-        >
-          ${this.label}
-        </label>`, d = () => i`
-        <pkt-helptext
-          class="${v(this.useWrapper ? void 0 : "pkt-hide")}"
-          .forId=${this.forId}
-          .helptext=${this.helptext}
-          .helptextDropdown=${this.helptextDropdown}
-          .helptextDropdownButton=${this.helptextDropdownButton || p.props.helptextDropdownButton.default}
-          @toggleHelpText=${(x) => {
-      this.toggleDropdown(x);
-    }}
-          ${b(this.helptextSlot)}
-          name="helptext"
-        ></pkt-helptext>
-      `, u = () => this.counter ? i`<div class="pkt-input__counter" aria-live="polite" aria-atomic="true">
-          ${this.counterError ? this.counterError : l} ${this.counterCurrent || 0}
-          ${this.counterMaxLength ? `/${this.counterMaxLength}` : l}
-        </div>` : l, y = () => this.hasError && this.errorMessage ? i`<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">${T(this.errorMessage)}</div>
-        </div>` : l, c = () => i`
-        ${s()} 
-        ${d()}
-        ${this.counterPosition === "top" ? u() : l}
-        <div class="pkt-contents" ${b(this.defaultSlot)}></div>
-        ${this.counterPosition === "bottom" ? u() : l} 
-        ${y()}
-      `, $ = () => this.hasFieldset ? i`<fieldset class="pkt-inputwrapper__fieldset" aria-describedby="${a}">
-            ${c()}
-          </fieldset>` : i`<div class="pkt-inputwrapper__fieldset">${c()}</div>`;
-    return i`<div class=${g(r)}>${$()}</div> `;
-  }
-  toggleDropdown(r) {
-    this.dispatchEvent(
-      new CustomEvent("toggleHelpText", {
-        bubbles: !1,
-        detail: { isOpen: r.detail.isOpen }
-      })
-    );
-  }
-  handleLabelClick(r) {
-    this.disabled && (r.preventDefault(), r.stopImmediatePropagation()), this.dispatchEvent(
-      new CustomEvent("labelClick", {
-        bubbles: !0,
-        composed: !0,
-        detail: "label clicked"
-      })
-    );
-  }
-};
-e([
-  o({ type: String })
-], t.prototype, "forId", 2);
-e([
-  o({ type: String })
-], t.prototype, "label", 2);
-e([
-  o({ type: String })
-], t.prototype, "helptext", 2);
-e([
-  o({ type: String })
-], t.prototype, "helptextDropdown", 2);
-e([
-  o({ type: String })
-], t.prototype, "helptextDropdownButton", 2);
-e([
-  o({ type: Boolean })
-], t.prototype, "counter", 2);
-e([
-  o({ type: Number })
-], t.prototype, "counterCurrent", 2);
-e([
-  o({ type: Number })
-], t.prototype, "counterMaxLength", 2);
-e([
-  o({ type: String })
-], t.prototype, "counterError", 2);
-e([
-  o({ type: String, reflect: !1 })
-], t.prototype, "counterPosition", 2);
-e([
-  o({ type: Boolean })
-], t.prototype, "optionalTag", 2);
-e([
-  o({ type: String })
-], t.prototype, "optionalText", 2);
-e([
-  o({ type: Boolean })
-], t.prototype, "requiredTag", 2);
-e([
-  o({ type: String })
-], t.prototype, "requiredText", 2);
-e([
-  o({ type: Boolean })
-], t.prototype, "hasError", 2);
-e([
-  o({ type: String })
-], t.prototype, "errorMessage", 2);
-e([
-  o({ type: Boolean })
-], t.prototype, "disabled", 2);
-e([
-  o({ type: Boolean })
-], t.prototype, "inline", 2);
-e([
-  o({ type: String })
-], t.prototype, "ariaDescribedby", 2);
-e([
-  o({ type: Boolean })
-], t.prototype, "hasFieldset", 2);
-e([
-  o({ type: String, reflect: !0 })
-], t.prototype, "role", 2);
-e([
-  o({ type: Boolean, reflect: !0, converter: D })
-], t.prototype, "useWrapper", 2);
-t = e([
-  k("pkt-input-wrapper")
-], t);
-export {
-  t as P
-};

package/dist/radiobutton-0vVqu-GU.cjs

@@ -1,27 +0,0 @@
-"use strict";const e=require("./element-6DBpyGQm.cjs"),p=require("./state-DPobt-Yz.cjs"),r=require("./input-element-CHjLWeKt.cjs"),o=require("./ref-iJtiv3o2.cjs"),u=require("./class-map-BBG2gMX4.cjs");var d=Object.defineProperty,k=Object.getOwnPropertyDescriptor,s=(l,t,n,c)=>{for(var i=c>1?void 0:c?k(t,n):t,h=l.length-1,a;h>=0;h--)(a=l[h])&&(i=(c?a(t,n,i):a(i))||i);return c&&i&&d(t,n,i),i};exports.PktRadioButton=class extends r.PktInputElement{constructor(){super(...arguments),this.inputRef=o.e(),this.value="",this.checkHelptext=null,this.defaultChecked=!1,this.hasTile=!1,this.checked=null,this.type="radio",this._checked=!1}connectedCallback(){super.connectedCallback()}attributeChangedCallback(t,n,c){t==="defaultChecked"&&(this._checked=this.defaultChecked),t==="checked"&&(this._checked=this.checked===""||this.checked==="true"||this.checked===!0),super.attributeChangedCallback(t,n,c)}render(){const t=u.e({"pkt-input-check__input":!0,"pkt-input-check__input--tile":this.hasTile,"pkt-input-check__input--tile-disabled":this.disabled&&this.hasTile}),n=u.e({"pkt-input-check__input-checkbox":!0,"pkt-input-check__input-checkbox--error":this.hasError}),c=u.e({"pkt-input-check__input-label":!0,"pkt-input-check__input-label--disabled":this.disabled,"pkt-sr-only":this.hideLabel}),i=()=>e.x`
-        <label class=${c} for=${this.id+"-internal"}>
-          ${this.label}
-          ${this.checkHelptext?e.x`<div class="pkt-input-check__input-helptext">${this.checkHelptext}</div>`:e.E}
-        </label>
-      `;return e.x`
-      <div class="pkt-input-check">
-        <div class=${t}>
-          <input
-            id=${this.id+"-internal"}
-            class=${n}
-            type="radio"
-            role="radio"
-            ?disabled=${this.disabled}
-            form=""
-            name=${this.name+"-internal"}
-            ${o.n(this.inputRef)}
-            @change=${this.toggleChecked}
-            @input=${this.onInput}
-            @blur=${this.onBlur}
-            @focus=${this.onFocus}
-            ?checked=${this.checked}
-          />
-          ${i()}
-        </div>
-      </div>
-    `}toggleChecked(t=null){t&&t.preventDefault(),t&&t.stopImmediatePropagation(),this.touched=!0,this.inputRef.value&&(this._checked=this.inputRef.value.matches(":checked"),this.valueChecked(this._checked))}};s([e.n({type:String,reflect:!0})],exports.PktRadioButton.prototype,"value",2);s([e.n({type:String})],exports.PktRadioButton.prototype,"checkHelptext",2);s([e.n({type:Boolean})],exports.PktRadioButton.prototype,"defaultChecked",2);s([e.n({type:Boolean})],exports.PktRadioButton.prototype,"hasTile",2);s([e.n({type:Boolean,reflect:!0})],exports.PktRadioButton.prototype,"checked",2);s([e.n({type:String,reflect:!0})],exports.PktRadioButton.prototype,"type",2);s([p.r()],exports.PktRadioButton.prototype,"_checked",2);exports.PktRadioButton=s([e.t("pkt-radiobutton")],exports.PktRadioButton);

package/dist/radiobutton-BcFRJFvI.js

@@ -1,92 +0,0 @@
-import { x as n, E as u, n as p, a as d } from "./element-CgEWt74-.js";
-import { r as k } from "./state-Bo2bck5_.js";
-import { P as f } from "./input-element-Cco4PA2M.js";
-import { e as _, n as b } from "./ref-BBYSqgeW.js";
-import { e as o } from "./class-map-BpTj9gtz.js";
-var $ = Object.defineProperty, v = Object.getOwnPropertyDescriptor, c = (e, i, s, l) => {
-  for (var h = l > 1 ? void 0 : l ? v(i, s) : i, r = e.length - 1, a; r >= 0; r--)
-    (a = e[r]) && (h = (l ? a(i, s, h) : a(h)) || h);
-  return l && h && $(i, s, h), h;
-};
-let t = class extends f {
-  constructor() {
-    super(...arguments), this.inputRef = _(), this.value = "", this.checkHelptext = null, this.defaultChecked = !1, this.hasTile = !1, this.checked = null, this.type = "radio", this._checked = !1;
-  }
-  connectedCallback() {
-    super.connectedCallback();
-  }
-  attributeChangedCallback(e, i, s) {
-    e === "defaultChecked" && (this._checked = this.defaultChecked), e === "checked" && (this._checked = this.checked === "" || this.checked === "true" || this.checked === !0), super.attributeChangedCallback(e, i, s);
-  }
-  render() {
-    const e = o({
-      "pkt-input-check__input": !0,
-      "pkt-input-check__input--tile": this.hasTile,
-      "pkt-input-check__input--tile-disabled": this.disabled && this.hasTile
-    }), i = o({
-      "pkt-input-check__input-checkbox": !0,
-      "pkt-input-check__input-checkbox--error": this.hasError
-    }), s = o({
-      "pkt-input-check__input-label": !0,
-      "pkt-input-check__input-label--disabled": this.disabled,
-      "pkt-sr-only": this.hideLabel
-    }), l = () => n`
-        <label class=${s} for=${this.id + "-internal"}>
-          ${this.label}
-          ${this.checkHelptext ? n`<div class="pkt-input-check__input-helptext">${this.checkHelptext}</div>` : u}
-        </label>
-      `;
-    return n`
-      <div class="pkt-input-check">
-        <div class=${e}>
-          <input
-            id=${this.id + "-internal"}
-            class=${i}
-            type="radio"
-            role="radio"
-            ?disabled=${this.disabled}
-            form=""
-            name=${this.name + "-internal"}
-            ${b(this.inputRef)}
-            @change=${this.toggleChecked}
-            @input=${this.onInput}
-            @blur=${this.onBlur}
-            @focus=${this.onFocus}
-            ?checked=${this.checked}
-          />
-          ${l()}
-        </div>
-      </div>
-    `;
-  }
-  toggleChecked(e = null) {
-    e && e.preventDefault(), e && e.stopImmediatePropagation(), this.touched = !0, this.inputRef.value && (this._checked = this.inputRef.value.matches(":checked"), this.valueChecked(this._checked));
-  }
-};
-c([
-  p({ type: String, reflect: !0 })
-], t.prototype, "value", 2);
-c([
-  p({ type: String })
-], t.prototype, "checkHelptext", 2);
-c([
-  p({ type: Boolean })
-], t.prototype, "defaultChecked", 2);
-c([
-  p({ type: Boolean })
-], t.prototype, "hasTile", 2);
-c([
-  p({ type: Boolean, reflect: !0 })
-], t.prototype, "checked", 2);
-c([
-  p({ type: String, reflect: !0 })
-], t.prototype, "type", 2);
-c([
-  k()
-], t.prototype, "_checked", 2);
-t = c([
-  d("pkt-radiobutton")
-], t);
-export {
-  t as P
-};