@oslokommune/punkt-elements 12.1.0 → 12.3.0

package/dist/pkt-element.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./index-BJ_4AGO3.cjs");exports.PktElement=e.PktElement;exports.PktInputElement=e.PktInputElement;

package/dist/pkt-element.js

@@ -0,0 +1,5 @@
+import { P as a, a as m } from "./index-BHzxfdBK.js";
+export {
+  a as PktElement,
+  m as PktInputElement
+};

package/dist/pkt-icon.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require("./index-BJ_4AGO3.cjs");require("./directive-19_ixLKS.cjs");const e=require("./index-DSplpVWQ.cjs");Object.defineProperty(exports,"PktIcon",{enumerable:!0,get:()=>e.PktIcon});

package/dist/pkt-icon.js

@@ -0,0 +1,6 @@
+import "./index-BHzxfdBK.js";
+import "./directive-DA0-wdk7.js";
+import { P as p } from "./index-BlHnvy7v.js";
+export {
+  p as PktIcon
+};

package/dist/pkt-index.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./index-DkGcZra2.cjs"),t=require("./pkt-card.cjs"),r=require("./pkt-component-template.cjs"),n=require("./pkt-datepicker.cjs"),o=require("./index-DSplpVWQ.cjs"),a=require("./pkt-input-wrapper.cjs"),u=require("./pkt-link.cjs"),c=require("./pkt-messagebox.cjs"),i=require("./pkt-tag.cjs");Object.defineProperty(exports,"PktCalendar",{enumerable:!0,get:()=>e.PktCalendar});Object.defineProperty(exports,"PktCard",{enumerable:!0,get:()=>t.PktCard});Object.defineProperty(exports,"PktComponent",{enumerable:!0,get:()=>r.PktComponent});Object.defineProperty(exports,"PktDatepicker",{enumerable:!0,get:()=>n.PktDatepicker});Object.defineProperty(exports,"PktIcon",{enumerable:!0,get:()=>o.PktIcon});Object.defineProperty(exports,"PktInputWrapper",{enumerable:!0,get:()=>a.PktInputWrapper});Object.defineProperty(exports,"PktLink",{enumerable:!0,get:()=>u.PktLink});Object.defineProperty(exports,"PktMessagebox",{enumerable:!0,get:()=>c.PktMessagebox});Object.defineProperty(exports,"PktTag",{enumerable:!0,get:()=>i.PktTag});

package/dist/pkt-index.js

@@ -0,0 +1,20 @@
+import { P as t } from "./index-CPvZ03uX.js";
+import { PktCard as p } from "./pkt-card.js";
+import { PktComponent as P } from "./pkt-component-template.js";
+import { PktDatepicker as x } from "./pkt-datepicker.js";
+import { P as f } from "./index-BlHnvy7v.js";
+import { PktInputWrapper as s } from "./pkt-input-wrapper.js";
+import { PktLink as c } from "./pkt-link.js";
+import { PktMessagebox as g } from "./pkt-messagebox.js";
+import { PktTag as I } from "./pkt-tag.js";
+export {
+  t as PktCalendar,
+  p as PktCard,
+  P as PktComponent,
+  x as PktDatepicker,
+  f as PktIcon,
+  s as PktInputWrapper,
+  c as PktLink,
+  g as PktMessagebox,
+  I as PktTag
+};

package/dist/pkt-input-wrapper.cjs

@@ -0,0 +1,59 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./index-BJ_4AGO3.cjs"),f=require("./ref-Bk590hog.cjs"),c=require("./index-DSplpVWQ.cjs"),u=require("./class-map-CA8wadiN.cjs"),$=require("./directive-19_ixLKS.cjs");/**
+ * @license
+ * Copyright 2020 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */const w=Symbol.for(""),b=(o,...s)=>({_$litStatic$:s.reduce((a,i,p)=>a+(n=>{if(n._$litStatic$!==void 0)return n._$litStatic$;throw Error(`Value passed to 'literal' function must be a 'literal' result: ${n}. Use 'unsafeStatic' to pass non-literal values, but
+            take care to ensure page security.`)})(i)+o[p+1],o[0]),r:w}),T="pkt-inputwrapper",I={toggleHelpText:{description:"Event for å vise eller skjule hjelpetekst i dropdown"}},_={forId:{name:"For ID",description:"Id-en til inputfeltet som dette wrapper rundt",type:"string",required:!0},label:{name:"Merkelapp",description:"Merkelapp for inputfeltet",type:"boolean",required:!0,default:"input"},helptext:{name:"Hjelpetekst",description:"Hjelpetekst for inputfeltet",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 inputfeltet</span>",type:"string"},counter:{name:"Teller",description:"Teller for antall tegn i inputfeltet",type:"boolean",default:!1},counterCurrent:{name:"Tellerverdi",description:"Tellerens nåværende verdi",type:"number"},counterMaxLength:{name:"Maks tegn",description:"Maks antall tegn som kan skrives i inputfeltet",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 inputfeltet har en feil",type:"boolean",default:!1},errorMessage:{name:"Feilmelding",description:"Feilmelding som vises i tilknytning til inputfeltet",type:"string"},disabled:{name:"Deaktivert",description:"Indikerer at inputfeltet er deaktivert",type:"boolean",default:!1},inline:{name:"Inline",description:"Indikerer at inputfeltet skal flyte sammen med sidens innhold",type:"boolean",default:!1},ariaDescribedby:{name:"aria-describedby",description:"Id-en til elementet som beskriver inputfeltet",type:"string"},hasFieldset:{name:"Har fieldset",description:"Indikerer at inputfeltet er en del av et fieldset",type:"boolean",default:!1},useWrapper:{name:"Bruk wrapper",description:"Indikerer om inputfeltet skal bruke en wrapper",type:"boolean",default:!0}},r={name:T,"css-class":"pkt-inputwrapper",events:I,props:_};var D=Object.defineProperty,P=Object.getOwnPropertyDescriptor,t=(o,s,a,i)=>{for(var p=i>1?void 0:i?P(s,a):s,n=o.length-1,l;n>=0;n--)(l=o[n])&&(p=(i?l(s,a,p):l(p))||p);return i&&p&&D(s,a,p),p};exports.PktInputWrapper=class extends e.PktElement{constructor(){super(),this.defaultSlot=f.ii(),this.forId=e.v4(),this.label=r.props.label.default,this.helptext="",this.helptextDropdown="",this.helptextDropdownButton=r.props.helptextDropdownButton.default,this.counter=r.props.counter.default,this.counterCurrent=0,this.counterMaxLength=0,this.optionalTag=r.props.optionalTag.default,this.optionalText=r.props.optionalText.default,this.requiredTag=r.props.requiredTag.default,this.requiredText=r.props.requiredText.default,this.hasError=r.props.hasError.default,this.errorMessage="",this.disabled=r.props.disabled.default,this.inline=r.props.inline.default,this.ariaDescribedby=void 0,this.hasFieldset=r.props.hasFieldset.default,this.useWrapper=r.props.useWrapper.default,this.isHelpTextOpen=!1,this.wrapperType=this.useWrapper?b`fieldset`:this.hasDropdown?b`div`:b`label`,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},i=this.helptextDropdown!=="",p=()=>{this.dispatchEvent(new CustomEvent("toggleHelpText",{bubbles:!0,detail:{isOpen:!this.isHelpTextOpen}})),this.isHelpTextOpen=!this.isHelpTextOpen},n={"pkt-inputwrapper__helptext":!0,"pkt-inputwrapper__helptext-expandable-open":this.isHelpTextOpen,"pkt-inputwrapper__helptext-expandable-closed":!this.isHelpTextOpen},l={"pkt-inputwrapper__label":!0,"pkt-inputwrapper__fieldset":this.hasFieldset,"pkt-inputwrapper__legend":this.hasFieldset},d=this.ariaDescribedby?this.ariaDescribedby:this.helptext?`${this.forId}-helptext`:e.D,h=()=>this.optionalTag||this.requiredTag?e.ke`<span class=${u.Rt(a)}
+          >${this.optionalTag?this.optionalText:this.requiredTag?this.requiredText:e.D}</span
+        >`:e.D,y=()=>this.useWrapper?this.hasFieldset?e.ke`<legend class="pkt-inputwrapper__legend" id="${this.forId}-label">
+            ${this.label} ${h()}
+          </legend>`:i?e.ke`<h2>${this.label} ${h()}</h2>`:e.ke`<span>${this.label} ${h()}</span>`:e.ke`<label for="${this.forId}" class="pkt-sr-only" aria-describedby="${d}"
+          >${this.label}</label
+        >`,g=()=>this.useWrapper&&this.helptext?e.ke`<div class="pkt-inputwrapper__helptext" id="${this.forId}-helptext">
+            ${c.ae(this.helptext)}
+          </div>
+          ${i?e.ke`<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">${c.ae(this.helptextDropdownButton)}</span>
+                  </button>
+                  <div class="${u.Rt(n)}">
+                    ${c.ae(this.helptextDropdown)}
+                  </div>
+                  ${this.hasFieldset?e.D:e.ke`<label
+                        class="pkt-sr-only"
+                        for="${this.forId}"
+                        aria-describedby="${d}"
+                        >${this.label}</label
+                      >`}
+                </div>`:e.D}</div>`:e.D,m=()=>this.counter?e.ke`<div class="pkt-input__counter" aria-live="polite" aria-atomic="true">
+          ${this.counterCurrent||0}
+          ${this.counterMaxLength?`/${this.counterMaxLength}`:e.D}
+        </div>`:e.D,v=()=>this.hasError&&this.errorMessage?e.ke`<div
+          class="pkt-alert pkt-alert--error pkt-alert--compact"
+          aria-live="assertive"
+        >
+          <pkt-icon name="alert-error" class="pkt-alert__icon"></pkt-icon>
+          <div class="pkt-alert__text">${c.ae(this.errorMessage)}</div>
+        </div>`:e.D,k=()=>e.ke`
+        ${y()} ${g()}
+        <div class="pkt-contents" ${f.Kt(this.defaultSlot)}></div>
+        ${m()} ${v()}
+      `,x=()=>this.hasFieldset?e.ke`<fieldset class=${u.Rt(l)} aria-describedby="${d}">
+            ${k()}
+          </fieldset>`:i?e.ke`<div class=${u.Rt(l)} aria-describedby="${d}">
+              ${k()}
+            </div>`:e.ke`<label
+              class=${u.Rt(l)}
+              for="${this.forId}"
+              aria-describedby="${d}"
+            >
+              ${k()}
+            </label>`;return e.ke`<div class=${u.Rt(s)}>${x()}</div> `}};t([e.n({type:String,reflect:!0})],exports.PktInputWrapper.prototype,"forId",2);t([e.n({type:String,reflect:!0})],exports.PktInputWrapper.prototype,"label",2);t([e.n({type:String,reflect:!0})],exports.PktInputWrapper.prototype,"helptext",2);t([e.n({type:String,reflect:!0})],exports.PktInputWrapper.prototype,"helptextDropdown",2);t([e.n({type:String,reflect:!0})],exports.PktInputWrapper.prototype,"helptextDropdownButton",2);t([e.n({type:Boolean,reflect:!0})],exports.PktInputWrapper.prototype,"counter",2);t([e.n({type:Number,reflect:!0})],exports.PktInputWrapper.prototype,"counterCurrent",2);t([e.n({type:Number,reflect:!0})],exports.PktInputWrapper.prototype,"counterMaxLength",2);t([e.n({type:Boolean,reflect:!0})],exports.PktInputWrapper.prototype,"optionalTag",2);t([e.n({type:String,reflect:!0})],exports.PktInputWrapper.prototype,"optionalText",2);t([e.n({type:Boolean,reflect:!0})],exports.PktInputWrapper.prototype,"requiredTag",2);t([e.n({type:String,reflect:!0})],exports.PktInputWrapper.prototype,"requiredText",2);t([e.n({type:Boolean,reflect:!0})],exports.PktInputWrapper.prototype,"hasError",2);t([e.n({type:String,reflect:!0})],exports.PktInputWrapper.prototype,"errorMessage",2);t([e.n({type:Boolean,reflect:!0})],exports.PktInputWrapper.prototype,"disabled",2);t([e.n({type:Boolean,reflect:!0})],exports.PktInputWrapper.prototype,"inline",2);t([e.n({type:String,reflect:!0})],exports.PktInputWrapper.prototype,"ariaDescribedby",2);t([e.n({type:Boolean,reflect:!0})],exports.PktInputWrapper.prototype,"hasFieldset",2);t([e.n({type:Boolean,reflect:!0})],exports.PktInputWrapper.prototype,"useWrapper",2);t([e.n({reflect:!1,type:Boolean})],exports.PktInputWrapper.prototype,"isHelpTextOpen",2);exports.PktInputWrapper=t([$.t("pkt-input-wrapper")],exports.PktInputWrapper);

package/dist/pkt-input-wrapper.js

@@ -0,0 +1,293 @@
+import { P as w, v as T, D as o, k as i, n as r } from "./index-BHzxfdBK.js";
+import { i as _, P as D, K as I } from "./ref-Co_S0Cgj.js";
+import { a as f } from "./index-BlHnvy7v.js";
+import { R as c } from "./class-map-DiT0qP3E.js";
+import { t as S } from "./directive-DA0-wdk7.js";
+/**
+ * @license
+ * Copyright 2020 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+const E = Symbol.for(""), y = (h, ...d) => ({ _$litStatic$: d.reduce((l, u, p) => l + ((n) => {
+  if (n._$litStatic$ !== void 0) return n._$litStatic$;
+  throw Error(`Value passed to 'literal' function must be a 'literal' result: ${n}. Use 'unsafeStatic' to pass non-literal values, but
+            take care to ensure page security.`);
+})(u) + h[p + 1], h[0]), r: E }), B = "pkt-inputwrapper", H = {
+  toggleHelpText: {
+    description: "Event for å vise eller skjule hjelpetekst i dropdown"
+  }
+}, M = {
+  forId: {
+    name: "For ID",
+    description: "Id-en til inputfeltet som dette wrapper rundt",
+    type: "string",
+    required: !0
+  },
+  label: {
+    name: "Merkelapp",
+    description: "Merkelapp for inputfeltet",
+    type: "boolean",
+    required: !0,
+    default: "input"
+  },
+  helptext: {
+    name: "Hjelpetekst",
+    description: "Hjelpetekst for inputfeltet",
+    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 inputfeltet</span>",
+    type: "string"
+  },
+  counter: {
+    name: "Teller",
+    description: "Teller for antall tegn i inputfeltet",
+    type: "boolean",
+    default: !1
+  },
+  counterCurrent: {
+    name: "Tellerverdi",
+    description: "Tellerens nåværende verdi",
+    type: "number"
+  },
+  counterMaxLength: {
+    name: "Maks tegn",
+    description: "Maks antall tegn som kan skrives i inputfeltet",
+    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 inputfeltet har en feil",
+    type: "boolean",
+    default: !1
+  },
+  errorMessage: {
+    name: "Feilmelding",
+    description: "Feilmelding som vises i tilknytning til inputfeltet",
+    type: "string"
+  },
+  disabled: {
+    name: "Deaktivert",
+    description: "Indikerer at inputfeltet er deaktivert",
+    type: "boolean",
+    default: !1
+  },
+  inline: {
+    name: "Inline",
+    description: "Indikerer at inputfeltet skal flyte sammen med sidens innhold",
+    type: "boolean",
+    default: !1
+  },
+  ariaDescribedby: {
+    name: "aria-describedby",
+    description: "Id-en til elementet som beskriver inputfeltet",
+    type: "string"
+  },
+  hasFieldset: {
+    name: "Har fieldset",
+    description: "Indikerer at inputfeltet er en del av et fieldset",
+    type: "boolean",
+    default: !1
+  },
+  useWrapper: {
+    name: "Bruk wrapper",
+    description: "Indikerer om inputfeltet skal bruke en wrapper",
+    type: "boolean",
+    default: !0
+  }
+}, s = {
+  name: B,
+  "css-class": "pkt-inputwrapper",
+  events: H,
+  props: M
+};
+var q = Object.defineProperty, F = Object.getOwnPropertyDescriptor, t = (h, d, l, u) => {
+  for (var p = u > 1 ? void 0 : u ? F(d, l) : d, n = h.length - 1, a; n >= 0; n--)
+    (a = h[n]) && (p = (u ? a(d, l, p) : a(p)) || p);
+  return u && p && q(d, l, p), p;
+};
+let e = class extends w {
+  constructor() {
+    super(), this.defaultSlot = _(), this.forId = T(), this.label = s.props.label.default, this.helptext = "", this.helptextDropdown = "", this.helptextDropdownButton = s.props.helptextDropdownButton.default, 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.isHelpTextOpen = !1, this.wrapperType = this.useWrapper ? y`fieldset` : this.hasDropdown ? y`div` : y`label`, this.slotController = new D(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
+    }, l = this.helptextDropdown !== "", u = () => {
+      this.dispatchEvent(
+        new CustomEvent("toggleHelpText", {
+          bubbles: !0,
+          detail: { isOpen: !this.isHelpTextOpen }
+        })
+      ), this.isHelpTextOpen = !this.isHelpTextOpen;
+    }, p = {
+      "pkt-inputwrapper__helptext": !0,
+      "pkt-inputwrapper__helptext-expandable-open": this.isHelpTextOpen,
+      "pkt-inputwrapper__helptext-expandable-closed": !this.isHelpTextOpen
+    }, n = {
+      "pkt-inputwrapper__label": !0,
+      "pkt-inputwrapper__fieldset": this.hasFieldset,
+      "pkt-inputwrapper__legend": this.hasFieldset
+    }, a = this.ariaDescribedby ? this.ariaDescribedby : this.helptext ? `${this.forId}-helptext` : o, k = () => this.optionalTag || this.requiredTag ? i`<span class=${c(d)}
+          >${this.optionalTag ? this.optionalText : this.requiredTag ? this.requiredText : o}</span
+        >` : o, g = () => this.useWrapper ? this.hasFieldset ? i`<legend class="pkt-inputwrapper__legend" id="${this.forId}-label">
+            ${this.label} ${k()}
+          </legend>` : l ? i`<h2>${this.label} ${k()}</h2>` : i`<span>${this.label} ${k()}</span>` : i`<label for="${this.forId}" class="pkt-sr-only" aria-describedby="${a}"
+          >${this.label}</label
+        >`, m = () => this.useWrapper && this.helptext ? i`<div class="pkt-inputwrapper__helptext" id="${this.forId}-helptext">
+            ${f(this.helptext)}
+          </div>
+          ${l ? 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=${u}
+                  >
+                    <pkt-icon
+                      class="pkt-btn__icon"
+                      name="${this.isHelpTextOpen ? "chevron-thin-up" : "chevron-thin-down"}"
+                    ></pkt-icon>
+                    <span class="pkt-btn__text">${f(this.helptextDropdownButton)}</span>
+                  </button>
+                  <div class="${c(p)}">
+                    ${f(this.helptextDropdown)}
+                  </div>
+                  ${this.hasFieldset ? o : i`<label
+                        class="pkt-sr-only"
+                        for="${this.forId}"
+                        aria-describedby="${a}"
+                        >${this.label}</label
+                      >`}
+                </div>` : o}</div>` : o, v = () => this.counter ? i`<div class="pkt-input__counter" aria-live="polite" aria-atomic="true">
+          ${this.counterCurrent || 0}
+          ${this.counterMaxLength ? `/${this.counterMaxLength}` : o}
+        </div>` : o, x = () => this.hasError && this.errorMessage ? i`<div
+          class="pkt-alert pkt-alert--error pkt-alert--compact"
+          aria-live="assertive"
+        >
+          <pkt-icon name="alert-error" class="pkt-alert__icon"></pkt-icon>
+          <div class="pkt-alert__text">${f(this.errorMessage)}</div>
+        </div>` : o, b = () => i`
+        ${g()} ${m()}
+        <div class="pkt-contents" ${I(this.defaultSlot)}></div>
+        ${v()} ${x()}
+      `, $ = () => this.hasFieldset ? i`<fieldset class=${c(n)} aria-describedby="${a}">
+            ${b()}
+          </fieldset>` : l ? i`<div class=${c(n)} aria-describedby="${a}">
+              ${b()}
+            </div>` : i`<label
+              class=${c(n)}
+              for="${this.forId}"
+              aria-describedby="${a}"
+            >
+              ${b()}
+            </label>`;
+    return i`<div class=${c(h)}>${$()}</div> `;
+  }
+};
+t([
+  r({ type: String, reflect: !0 })
+], e.prototype, "forId", 2);
+t([
+  r({ type: String, reflect: !0 })
+], e.prototype, "label", 2);
+t([
+  r({ type: String, reflect: !0 })
+], e.prototype, "helptext", 2);
+t([
+  r({ type: String, reflect: !0 })
+], e.prototype, "helptextDropdown", 2);
+t([
+  r({ type: String, reflect: !0 })
+], e.prototype, "helptextDropdownButton", 2);
+t([
+  r({ type: Boolean, reflect: !0 })
+], e.prototype, "counter", 2);
+t([
+  r({ type: Number, reflect: !0 })
+], e.prototype, "counterCurrent", 2);
+t([
+  r({ type: Number, reflect: !0 })
+], e.prototype, "counterMaxLength", 2);
+t([
+  r({ type: Boolean, reflect: !0 })
+], e.prototype, "optionalTag", 2);
+t([
+  r({ type: String, reflect: !0 })
+], e.prototype, "optionalText", 2);
+t([
+  r({ type: Boolean, reflect: !0 })
+], e.prototype, "requiredTag", 2);
+t([
+  r({ type: String, reflect: !0 })
+], e.prototype, "requiredText", 2);
+t([
+  r({ type: Boolean, reflect: !0 })
+], e.prototype, "hasError", 2);
+t([
+  r({ type: String, reflect: !0 })
+], e.prototype, "errorMessage", 2);
+t([
+  r({ type: Boolean, reflect: !0 })
+], e.prototype, "disabled", 2);
+t([
+  r({ type: Boolean, reflect: !0 })
+], e.prototype, "inline", 2);
+t([
+  r({ type: String, reflect: !0 })
+], e.prototype, "ariaDescribedby", 2);
+t([
+  r({ type: Boolean, reflect: !0 })
+], e.prototype, "hasFieldset", 2);
+t([
+  r({ type: Boolean, reflect: !0 })
+], e.prototype, "useWrapper", 2);
+t([
+  r({ reflect: !1, type: Boolean })
+], e.prototype, "isHelpTextOpen", 2);
+e = t([
+  S("pkt-input-wrapper")
+], e);
+export {
+  e as PktInputWrapper
+};

package/dist/pkt-link.cjs

@@ -0,0 +1,3 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("./index-BJ_4AGO3.cjs"),k=require("./ref-Bk590hog.cjs"),p=require("./class-map-CA8wadiN.cjs"),h=require("./directive-19_ixLKS.cjs");require("./index-DSplpVWQ.cjs");const f="pkt-link",u=!0,d={href:{name:"URL",description:"URL til lenken",type:"string",default:"#"},iconName:{name:"Ikon",description:"Ikon som skal vises ved siden av lenketeksten",type:"icon"},iconPosition:{name:"Ikonposisjon",description:"Posisjonen til ikonet i forhold til lenketeksten",type:["left","right"]},external:{name:"Ekstern lenke",description:"Vis ikon for ekstern lenke",type:"boolean",default:!1}},m={default:{description:"Innholdet i lenken"}},a={name:f,"css-class":"pkt-link","dark-mode":!0,isElement:u,props:d,slots:m};var P=Object.defineProperty,v=Object.getOwnPropertyDescriptor,i=(s,n,r,o)=>{for(var e=o>1?void 0:o?v(n,r):n,l=s.length-1,c;l>=0;l--)(c=s[l])&&(e=(o?c(n,r,e):c(e))||e);return o&&e&&P(n,r,e),e};exports.PktLink=class extends t.PktElement{constructor(){super(),this.defaultSlot=k.ii(),this.href=a.props.href.default,this.iconName=void 0,this.iconPosition=void 0,this.external=a.props.external.default,this.slotController=new k.PktSlotController(this,this.defaultSlot)}render(){const n={"pkt-link":!0,"pkt-link--icon-left":!!this.iconName&&this.iconPosition==="left"||!!(this.iconName&&!this.iconPosition),"pkt-link--icon-right":!!this.iconName&&this.iconPosition==="right","pkt-link--external":this.external};return t.ke`<a class=${p.Rt(n)} href=${this.href} @click=${this.handleClick}
+      >${this.iconName?t.ke`<pkt-icon name=${this.iconName} class="pkt-link__icon"></pkt-icon>`:""} <span ${k.Kt(this.defaultSlot)}>Link</span></a
+    >`}handleClick(){this.dispatchEvent(new CustomEvent("click",{detail:"pkt-link-clicked",bubbles:!0}))}};i([t.n({type:String,reflect:!0})],exports.PktLink.prototype,"href",2);i([t.n({type:String,reflect:!0})],exports.PktLink.prototype,"iconName",2);i([t.n({type:String,reflect:!0})],exports.PktLink.prototype,"iconPosition",2);i([t.n({type:Boolean,reflect:!0})],exports.PktLink.prototype,"external",2);exports.PktLink=i([h.t("pkt-link")],exports.PktLink);

package/dist/pkt-link.js

@@ -0,0 +1,90 @@
+import { P as h, k as c, n as r } from "./index-BHzxfdBK.js";
+import { i as f, P as m, K as d } from "./ref-Co_S0Cgj.js";
+import { R as u } from "./class-map-DiT0qP3E.js";
+import { t as P } from "./directive-DA0-wdk7.js";
+import "./index-BlHnvy7v.js";
+const v = "pkt-link", y = !0, x = {
+  href: {
+    name: "URL",
+    description: "URL til lenken",
+    type: "string",
+    default: "#"
+  },
+  iconName: {
+    name: "Ikon",
+    description: "Ikon som skal vises ved siden av lenketeksten",
+    type: "icon"
+  },
+  iconPosition: {
+    name: "Ikonposisjon",
+    description: "Posisjonen til ikonet i forhold til lenketeksten",
+    type: [
+      "left",
+      "right"
+    ]
+  },
+  external: {
+    name: "Ekstern lenke",
+    description: "Vis ikon for ekstern lenke",
+    type: "boolean",
+    default: !1
+  }
+}, N = {
+  default: {
+    description: "Innholdet i lenken"
+  }
+}, k = {
+  name: v,
+  "css-class": "pkt-link",
+  "dark-mode": !0,
+  isElement: y,
+  props: x,
+  slots: N
+};
+var _ = Object.defineProperty, g = Object.getOwnPropertyDescriptor, i = (n, o, l, s) => {
+  for (var t = s > 1 ? void 0 : s ? g(o, l) : o, p = n.length - 1, a; p >= 0; p--)
+    (a = n[p]) && (t = (s ? a(o, l, t) : a(t)) || t);
+  return s && t && _(o, l, t), t;
+};
+let e = class extends h {
+  constructor() {
+    super(), this.defaultSlot = f(), this.href = k.props.href.default, this.iconName = void 0, this.iconPosition = void 0, this.external = k.props.external.default, this.slotController = new m(this, this.defaultSlot);
+  }
+  render() {
+    const n = {
+      "pkt-link": !0,
+      "pkt-link--icon-left": !!this.iconName && this.iconPosition === "left" || !!(this.iconName && !this.iconPosition),
+      "pkt-link--icon-right": !!this.iconName && this.iconPosition === "right",
+      "pkt-link--external": this.external
+    };
+    return c`<a class=${u(n)} href=${this.href} @click=${this.handleClick}
+      >${this.iconName ? c`<pkt-icon name=${this.iconName} class="pkt-link__icon"></pkt-icon>` : ""} <span ${d(this.defaultSlot)}>Link</span></a
+    >`;
+  }
+  handleClick() {
+    this.dispatchEvent(
+      new CustomEvent("click", {
+        detail: "pkt-link-clicked",
+        bubbles: !0
+      })
+    );
+  }
+};
+i([
+  r({ type: String, reflect: !0 })
+], e.prototype, "href", 2);
+i([
+  r({ type: String, reflect: !0 })
+], e.prototype, "iconName", 2);
+i([
+  r({ type: String, reflect: !0 })
+], e.prototype, "iconPosition", 2);
+i([
+  r({ type: Boolean, reflect: !0 })
+], e.prototype, "external", 2);
+e = i([
+  P("pkt-link")
+], e);
+export {
+  e as PktLink
+};

package/dist/pkt-messagebox.cjs

@@ -0,0 +1,12 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./index-BJ_4AGO3.cjs"),c=require("./ref-Bk590hog.cjs"),p=require("./class-map-CA8wadiN.cjs"),b=require("./directive-19_ixLKS.cjs");require("./index-DSplpVWQ.cjs");var k=Object.defineProperty,u=Object.getOwnPropertyDescriptor,s=(i,o,r,l)=>{for(var t=l>1?void 0:l?u(o,r):o,a=i.length-1,n;a>=0;a--)(n=i[a])&&(t=(l?n(o,r,t):n(t))||t);return l&&t&&k(o,r,t),t};exports.PktMessagebox=class extends e.PktElement{constructor(){super(),this.defaultSlot=c.ii(),this.closable=!1,this.compact=!1,this.title="",this.skin="beige",this.isDisplayed=!0,this.slotController=new c.PktSlotController(this,this.defaultSlot)}handleClose(){this.isDisplayed=!1,this.onClose&&this.onClose()}render(){const o={"pkt-messagebox":!0,"pkt-messagebox--compact":this.compact,[`pkt-messagebox--${this.skin}`]:this.skin,"pkt-messagebox--closable":this.closable};return this.isDisplayed?e.ke`<div class=${p.Rt(o)}>
+      ${this.closable?e.ke`<div class="pkt-messagebox__close">
+            <button
+              @click=${this.handleClose}
+              class="pkt-btn pkt-btn--tertiary pkt-btn--small pkt-btn--icon-only"
+            >
+              <pkt-icon name="close" class="pkt-link__icon"></pkt-icon>
+            </button>
+          </div>`:e.D}
+      ${this.title?e.ke`<div class="pkt-messagebox__title">${this.title}</div>`:e.D}
+      <div class="pkt-messagebox__text" ${c.Kt(this.defaultSlot)}></div>
+    </div>`:e.D}};s([e.n({type:Boolean,reflect:!0})],exports.PktMessagebox.prototype,"closable",2);s([e.n({type:Boolean,reflect:!0})],exports.PktMessagebox.prototype,"compact",2);s([e.n({type:String,reflect:!0})],exports.PktMessagebox.prototype,"title",2);s([e.n({type:String,reflect:!0})],exports.PktMessagebox.prototype,"skin",2);s([e.n({type:Boolean,reflect:!0})],exports.PktMessagebox.prototype,"isDisplayed",2);s([e.n({type:Function,reflect:!0})],exports.PktMessagebox.prototype,"onClose",2);exports.PktMessagebox=s([b.t("pkt-messagebox")],exports.PktMessagebox);

package/dist/pkt-messagebox.js

@@ -0,0 +1,62 @@
+import { P as m, D as c, k as h, n as o } from "./index-BHzxfdBK.js";
+import { i as b, P as f, K as k } from "./ref-Co_S0Cgj.js";
+import { R as u } from "./class-map-DiT0qP3E.js";
+import { t as y } from "./directive-DA0-wdk7.js";
+import "./index-BlHnvy7v.js";
+var d = Object.defineProperty, v = Object.getOwnPropertyDescriptor, s = (l, i, p, r) => {
+  for (var e = r > 1 ? void 0 : r ? v(i, p) : i, a = l.length - 1, n; a >= 0; a--)
+    (n = l[a]) && (e = (r ? n(i, p, e) : n(e)) || e);
+  return r && e && d(i, p, e), e;
+};
+let t = class extends m {
+  constructor() {
+    super(), this.defaultSlot = b(), this.closable = !1, this.compact = !1, this.title = "", this.skin = "beige", this.isDisplayed = !0, this.slotController = new f(this, this.defaultSlot);
+  }
+  handleClose() {
+    this.isDisplayed = !1, this.onClose && this.onClose();
+  }
+  render() {
+    const l = {
+      "pkt-messagebox": !0,
+      "pkt-messagebox--compact": this.compact,
+      [`pkt-messagebox--${this.skin}`]: this.skin,
+      "pkt-messagebox--closable": this.closable
+    };
+    return this.isDisplayed ? h`<div class=${u(l)}>
+      ${this.closable ? h`<div class="pkt-messagebox__close">
+            <button
+              @click=${this.handleClose}
+              class="pkt-btn pkt-btn--tertiary pkt-btn--small pkt-btn--icon-only"
+            >
+              <pkt-icon name="close" class="pkt-link__icon"></pkt-icon>
+            </button>
+          </div>` : c}
+      ${this.title ? h`<div class="pkt-messagebox__title">${this.title}</div>` : c}
+      <div class="pkt-messagebox__text" ${k(this.defaultSlot)}></div>
+    </div>` : c;
+  }
+};
+s([
+  o({ type: Boolean, reflect: !0 })
+], t.prototype, "closable", 2);
+s([
+  o({ type: Boolean, reflect: !0 })
+], t.prototype, "compact", 2);
+s([
+  o({ type: String, reflect: !0 })
+], t.prototype, "title", 2);
+s([
+  o({ type: String, reflect: !0 })
+], t.prototype, "skin", 2);
+s([
+  o({ type: Boolean, reflect: !0 })
+], t.prototype, "isDisplayed", 2);
+s([
+  o({ type: Function, reflect: !0 })
+], t.prototype, "onClose", 2);
+t = s([
+  y("pkt-messagebox")
+], t);
+export {
+  t as PktMessagebox
+};

package/dist/pkt-tag.cjs

@@ -0,0 +1,17 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const u=require("./class-map-CA8wadiN.cjs"),g=require("./directive-19_ixLKS.cjs"),t=require("./index-BJ_4AGO3.cjs"),h=require("./state-D2tUtTi6.cjs"),o=require("./ref-Bk590hog.cjs");require("./index-DSplpVWQ.cjs");const k="pkt-tag",f={closeTag:{type:"boolean",required:!1,default:!1},size:{required:!1,default:"medium",type:["small","medium","large"]},iconName:{type:"string",required:!1},skin:{required:!1,default:"blue",type:["blue","green","red","beige","yellow","gray","blue-light"]},textStyle:{required:!1,default:"normal-text",type:["thin-text","normal-text"]},type:{required:!1,default:"button",type:["button","submit","reset"]},ariaLabel:{type:"string",required:!1,default:"close"}},d={default:{description:"Teksten til tag"}},a={name:k,"css-class":"pkt-tag",props:f,slots:d};var y=Object.defineProperty,b=Object.getOwnPropertyDescriptor,e=(n,s,r,l)=>{for(var i=l>1?void 0:l?b(s,r):s,p=n.length-1,c;p>=0;p--)(c=n[p])&&(i=(l?c(s,r,i):c(i))||i);return l&&i&&y(s,r,i),i};exports.PktTag=class extends t.PktElement{constructor(){super(),this.defaultSlot=o.ii(),this.closeTag=a.props.closeTag.default,this.size=a.props.size.default,this.skin=a.props.skin.default,this.textStyle=a.props.textStyle.default,this.iconName=void 0,this.type=a.props.type.default,this.ariaLabel=a.props.ariaLabel.default,this._isClosed=!1,this.close=s=>{this._isClosed=!0,this.dispatchEvent(new CustomEvent("onClose",{detail:{origin:s},bubbles:!0,composed:!0}))},this.slotController=new o.PktSlotController(this,this.defaultSlot),this._isClosed=!1}render(){const s={"pkt-tag":!0,[`pkt-tag--${this.size}`]:!!this.size,[`pkt-tag--${this.skin}`]:!!this.skin,[`pkt-tag--${this.textStyle}`]:!!this.textStyle},r={"pkt-tag":!0,"pkt-btn":!0,"pkt-btn--tertiary":!0,[`pkt-tag--${this.size}`]:!!this.size,[`pkt-tag--${this.skin}`]:!!this.skin,[`pkt-tag--${this.textStyle}`]:!!this.textStyle,"pkt-btn--icons-right-and-left":this.closeTag&&!!this.iconName};return this.closeTag?this._isClosed?t.D:t.ke`
+            <button
+              class=${u.Rt(r)}
+              type=${this.type}
+              aria-label=${this.ariaLabel}
+              @click=${this.close}
+            >
+              ${this.iconName&&t.ke`<pkt-icon class="pkt-tag__icon" name=${this.iconName}></pkt-icon>`}
+              <span ${o.Kt(this.defaultSlot)}></span>
+              <pkt-icon class="pkt-tag__close-btn" name="close"></pkt-icon>
+            </button>
+          `:t.ke`
+        <span class=${u.Rt(s)}>
+          ${this.iconName&&t.ke` <pkt-icon class="pkt-tag__icon" name=${this.iconName}></pkt-icon> `}
+          <span ${o.Kt(this.defaultSlot)}> </span>
+        </span>
+      `}};e([t.n({type:Boolean,reflect:!0})],exports.PktTag.prototype,"closeTag",2);e([t.n({type:String,reflect:!0})],exports.PktTag.prototype,"size",2);e([t.n({type:String,reflect:!0})],exports.PktTag.prototype,"skin",2);e([t.n({type:String,reflect:!0})],exports.PktTag.prototype,"textStyle",2);e([t.n({type:String,reflect:!0})],exports.PktTag.prototype,"iconName",2);e([t.n({type:String,reflect:!0})],exports.PktTag.prototype,"type",2);e([t.n({type:String,reflect:!0})],exports.PktTag.prototype,"ariaLabel",2);e([h.r()],exports.PktTag.prototype,"_isClosed",2);exports.PktTag=e([g.t("pkt-tag")],exports.PktTag);