@oslokommune/punkt-elements 12.17.2 → 12.18.1

package/dist/helptext--4FLdAWi.js

@@ -0,0 +1,194 @@
+import { P as u, x as i, n as l, t as h, o as m, E as k } from "./icon-wUXeHiBk.js";
+import { e as c } from "./class-map-hz16xq5a.js";
+import { r as f } from "./state-BfyXV7EL.js";
+import { u as x } from "./stringutils-DJjRa8dG.js";
+const v = "pkt-inputwrapper", g = !0, y = {
+  toggleHelpText: {
+    description: "Event for å vise eller skjule hjelpetekst i dropdown"
+  }
+}, b = {
+  forId: {
+    name: "For ID",
+    description: "Id-en til skjemaelementet som dette wrapper rundt",
+    type: "string",
+    required: !0
+  },
+  label: {
+    name: "Merkelapp",
+    description: "Merkelapp for skjemaelementet",
+    type: "string",
+    required: !0
+  },
+  helptext: {
+    name: "Hjelpetekst",
+    description: "Hjelpetekst for skjemaelementet",
+    type: "string"
+  },
+  helptextDropdown: {
+    name: "Hjelpetekst i dropdown",
+    description: "Hjelpetekst som vises i ekspanderende felt",
+    type: "string"
+  },
+  helptextDropdownButton: {
+    name: "Tekst i hjelpetekst-knapp",
+    description: "Tekst som vises i knappen for å vise hjelpetekst i dropdown",
+    default: "Les mer <span class='pkt-sr-only'>om feltet</span>",
+    type: "string"
+  },
+  ariaDescribedby: {
+    name: "aria-describedby",
+    description: "Id-en til elementet som beskriver skjemaelementet",
+    type: "string"
+  },
+  counter: {
+    name: "Teller",
+    description: "Teller for antall tegn i skjemaelementet",
+    type: "boolean",
+    default: !1
+  },
+  counterCurrent: {
+    name: "Tellerverdi",
+    description: "Tellerens nåværende verdi",
+    type: "number"
+  },
+  counterMaxLength: {
+    name: "Maks tegn i teller",
+    description: "Maks antall tegn som kan skrives i skjemaelementet",
+    type: "number"
+  },
+  optionalTag: {
+    name: "Vise valgfritt-merking",
+    description: "Viser en merking som indikerer at feltet er valgfritt",
+    type: "boolean",
+    default: !1
+  },
+  optionalText: {
+    name: "Valgfritt-tekst",
+    description: "Tekst som vises i valgfritt-merkingen",
+    type: "string",
+    default: "Valgfritt"
+  },
+  requiredTag: {
+    name: "Vise påkrevd-merking",
+    description: "Viser en merking som indikerer at feltet er påkrevd",
+    type: "boolean",
+    default: !1
+  },
+  requiredText: {
+    name: "Påkrevd-tekst",
+    description: "Tekst som vises i påkrevd-merkingen",
+    type: "string",
+    default: "Må fylles ut"
+  },
+  hasError: {
+    name: "Feil",
+    description: "Indikerer at skjemaelementet har en feil",
+    type: "boolean",
+    default: !1
+  },
+  errorMessage: {
+    name: "Feilmelding",
+    description: "Feilmelding som vises i tilknytning til skjemaelementet",
+    type: "string"
+  },
+  disabled: {
+    name: "Deaktivert",
+    description: "Indikerer at skjemaelementet er deaktivert",
+    type: "boolean",
+    default: !1
+  },
+  inline: {
+    name: "Inline",
+    description: "Indikerer at skjemaelementet skal flyte sammen med sidens innhold",
+    type: "boolean",
+    default: !1
+  },
+  hasFieldset: {
+    name: "Har fieldset",
+    description: "Indikerer at skjemaelementet er en del av et fieldset",
+    type: "boolean",
+    default: !1
+  },
+  useWrapper: {
+    name: "Bruk wrapper",
+    description: "Indikerer om skjemaelementet skal bruke en wrapper",
+    type: "boolean",
+    displayAsFalse: !0,
+    default: !0
+  }
+}, w = {
+  name: v,
+  "css-class": "pkt-inputwrapper",
+  isElement: g,
+  events: y,
+  props: b
+};
+var j = Object.defineProperty, T = Object.getOwnPropertyDescriptor, n = (p, r, o, s) => {
+  for (var e = s > 1 ? void 0 : s ? T(r, o) : r, a = p.length - 1, d; a >= 0; a--)
+    (d = p[a]) && (e = (s ? d(r, o, e) : d(e)) || e);
+  return s && e && j(r, o, e), e;
+};
+let t = class extends u {
+  constructor() {
+    super(), this.forId = x(), this.helptext = "", this.helptextDropdown = "", this.helptextDropdownButton = w.props.helptextDropdownButton.default, this.isHelpTextOpen = !1;
+  }
+  render() {
+    const p = () => {
+      this.isHelpTextOpen = !this.isHelpTextOpen, this.dispatchEvent(
+        new CustomEvent("toggleHelpText", {
+          bubbles: !0,
+          detail: { isOpen: !this.isHelpTextOpen }
+        })
+      );
+    };
+    return i`${this.helptext || this.helptextDropdown ? i`<div>
+          ${this.helptext ? i`<div class="pkt-inputwrapper__helptext" id="${this.forId}-helptext">
+                ${m(this.helptext)}
+              </div>` : k}
+          ${this.helptextDropdown ? i`<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">${m(this.helptextDropdownButton)}</span>
+                </button>
+                <div
+                  class="${c({
+      "pkt-inputwrapper__helptext": !0,
+      "pkt-inputwrapper__helptext-expandable-open": this.isHelpTextOpen,
+      "pkt-inputwrapper__helptext-expandable-closed": !this.isHelpTextOpen
+    })}"
+                >
+                  ${m(this.helptextDropdown)}
+                </div>
+              </div>` : k}
+        </div>` : k}`;
+  }
+};
+n([
+  l({ type: String, reflect: !0 })
+], t.prototype, "forId", 2);
+n([
+  l({ type: String, reflect: !0 })
+], t.prototype, "helptext", 2);
+n([
+  l({ type: String, reflect: !0 })
+], t.prototype, "helptextDropdown", 2);
+n([
+  l({ type: String, reflect: !0 })
+], t.prototype, "helptextDropdownButton", 2);
+n([
+  f()
+], t.prototype, "isHelpTextOpen", 2);
+t = n([
+  h("pkt-helptext")
+], t);
+export {
+  t as P,
+  w as s
+};

package/dist/helptext-iZEgxz2U.cjs

@@ -0,0 +1,23 @@
+"use strict";const e=require("./icon-CdMQ6zBT.cjs"),d=require("./class-map-Boa7BqCc.cjs"),k=require("./state-SKYD8kRO.cjs"),m=require("./stringutils-CkVRq4jP.cjs"),u="pkt-inputwrapper",c=!0,h={toggleHelpText:{description:"Event for å vise eller skjule hjelpetekst i dropdown"}},x={forId:{name:"For ID",description:"Id-en til skjemaelementet som dette wrapper rundt",type:"string",required:!0},label:{name:"Merkelapp",description:"Merkelapp for skjemaelementet",type:"string",required:!0},helptext:{name:"Hjelpetekst",description:"Hjelpetekst for skjemaelementet",type:"string"},helptextDropdown:{name:"Hjelpetekst i dropdown",description:"Hjelpetekst som vises i ekspanderende felt",type:"string"},helptextDropdownButton:{name:"Tekst i hjelpetekst-knapp",description:"Tekst som vises i knappen for å vise hjelpetekst i dropdown",default:"Les mer <span class='pkt-sr-only'>om feltet</span>",type:"string"},ariaDescribedby:{name:"aria-describedby",description:"Id-en til elementet som beskriver skjemaelementet",type:"string"},counter:{name:"Teller",description:"Teller for antall tegn i skjemaelementet",type:"boolean",default:!1},counterCurrent:{name:"Tellerverdi",description:"Tellerens nåværende verdi",type:"number"},counterMaxLength:{name:"Maks tegn i teller",description:"Maks antall tegn som kan skrives i skjemaelementet",type:"number"},optionalTag:{name:"Vise valgfritt-merking",description:"Viser en merking som indikerer at feltet er valgfritt",type:"boolean",default:!1},optionalText:{name:"Valgfritt-tekst",description:"Tekst som vises i valgfritt-merkingen",type:"string",default:"Valgfritt"},requiredTag:{name:"Vise påkrevd-merking",description:"Viser en merking som indikerer at feltet er påkrevd",type:"boolean",default:!1},requiredText:{name:"Påkrevd-tekst",description:"Tekst som vises i påkrevd-merkingen",type:"string",default:"Må fylles ut"},hasError:{name:"Feil",description:"Indikerer at skjemaelementet har en feil",type:"boolean",default:!1},errorMessage:{name:"Feilmelding",description:"Feilmelding som vises i tilknytning til skjemaelementet",type:"string"},disabled:{name:"Deaktivert",description:"Indikerer at skjemaelementet er deaktivert",type:"boolean",default:!1},inline:{name:"Inline",description:"Indikerer at skjemaelementet skal flyte sammen med sidens innhold",type:"boolean",default:!1},hasFieldset:{name:"Har fieldset",description:"Indikerer at skjemaelementet er en del av et fieldset",type:"boolean",default:!1},useWrapper:{name:"Bruk wrapper",description:"Indikerer om skjemaelementet skal bruke en wrapper",type:"boolean",displayAsFalse:!0,default:!0}},a={name:u,"css-class":"pkt-inputwrapper",isElement:c,events:h,props:x};var f=Object.defineProperty,g=Object.getOwnPropertyDescriptor,r=(i,n,p,s)=>{for(var t=s>1?void 0:s?g(n,p):n,l=i.length-1,o;l>=0;l--)(o=i[l])&&(t=(s?o(n,p,t):o(t))||t);return s&&t&&f(n,p,t),t};exports.PktHelptext=class extends e.PktElement{constructor(){super(),this.forId=m.uuidish(),this.helptext="",this.helptextDropdown="",this.helptextDropdownButton=a.props.helptextDropdownButton.default,this.isHelpTextOpen=!1}render(){const n=()=>{this.isHelpTextOpen=!this.isHelpTextOpen,this.dispatchEvent(new CustomEvent("toggleHelpText",{bubbles:!0,detail:{isOpen:!this.isHelpTextOpen}}))},p=()=>this.helptext||this.helptextDropdown?e.x`<div>
+          ${this.helptext?e.x`<div class="pkt-inputwrapper__helptext" id="${this.forId}-helptext">
+                ${e.o(this.helptext)}
+              </div>`:e.E}
+          ${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=${n}
+                >
+                  <pkt-icon
+                    class="pkt-btn__icon"
+                    name="${this.isHelpTextOpen?"chevron-thin-up":"chevron-thin-down"}"
+                  ></pkt-icon>
+                  <span class="pkt-btn__text">${e.o(this.helptextDropdownButton)}</span>
+                </button>
+                <div
+                  class="${d.e({"pkt-inputwrapper__helptext":!0,"pkt-inputwrapper__helptext-expandable-open":this.isHelpTextOpen,"pkt-inputwrapper__helptext-expandable-closed":!this.isHelpTextOpen})}"
+                >
+                  ${e.o(this.helptextDropdown)}
+                </div>
+              </div>`:e.E}
+        </div>`:e.E;return e.x`${p()}`}};r([e.n({type:String,reflect:!0})],exports.PktHelptext.prototype,"forId",2);r([e.n({type:String,reflect:!0})],exports.PktHelptext.prototype,"helptext",2);r([e.n({type:String,reflect:!0})],exports.PktHelptext.prototype,"helptextDropdown",2);r([e.n({type:String,reflect:!0})],exports.PktHelptext.prototype,"helptextDropdownButton",2);r([k.r()],exports.PktHelptext.prototype,"isHelpTextOpen",2);exports.PktHelptext=r([e.t("pkt-helptext")],exports.PktHelptext);exports.specs=a;