@oslokommune/punkt-elements/dist/input-wrapper-Dr__Sxql.js

Komponentbiblioteket til Punkt, et designsystem laget av Oslo Origo

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