@oslokommune/punkt-elements 12.3.1 → 12.3.3

package/dist/pkt-element.cjs

@@ -1 +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;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./index-CkBUiPHx.cjs");exports.PktElement=e.PktElement;exports.PktInputElement=e.PktInputElement;

package/dist/pkt-element.js

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

package/dist/pkt-icon.cjs

@@ -1 +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});
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require("./index-CkBUiPHx.cjs");require("./directive-19_ixLKS.cjs");const e=require("./index-BCVyjeWS.cjs");Object.defineProperty(exports,"PktIcon",{enumerable:!0,get:()=>e.PktIcon});

package/dist/pkt-icon.js

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

package/dist/pkt-index.cjs

@@ -1 +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});
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./index-BkqOsymS.cjs"),t=require("./pkt-card.cjs"),r=require("./pkt-component-template.cjs"),n=require("./pkt-datepicker.cjs"),o=require("./index-BCVyjeWS.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

@@ -1,8 +1,8 @@
-import { P as t } from "./index-CPvZ03uX.js";
+import { P as t } from "./index-BkKs8Yam.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 { P as f } from "./index-C7OaW8f8.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";

package/dist/pkt-input-wrapper.cjs

@@ -1,4 +1,4 @@
-"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");/**
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./index-CkBUiPHx.cjs"),f=require("./ref-BkUqMgQu.cjs"),c=require("./index-BCVyjeWS.cjs"),u=require("./class-map-DfznHRRW.cjs"),$=require("./directive-19_ixLKS.cjs");/**
  * @license
  * Copyright 2020 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause

package/dist/pkt-input-wrapper.js

@@ -1,7 +1,7 @@
-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 { P as w, v as T, D as o, k as i, n as r } from "./index-CINnuWkG.js";
+import { i as _, P as D, K as I } from "./ref-Cau3ksvI.js";
+import { a as f } from "./index-C7OaW8f8.js";
+import { R as c } from "./class-map-CEzmgstO.js";
 import { t as S } from "./directive-DA0-wdk7.js";
 /**
  * @license

package/dist/pkt-link.cjs

@@ -1,3 +1,8 @@
-"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);
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./index-CkBUiPHx.cjs"),c=require("./ref-BkUqMgQu.cjs"),k=require("./class-map-DfznHRRW.cjs"),h=require("./directive-19_ixLKS.cjs");require("./index-BCVyjeWS.cjs");const f="pkt-link",u=!0,d={href:{name:"URL",description:"URL til lenken",type:"string",default:"#"},target:{name:"Mål",description:"Mål for lenken",type:["_blank","_self","_parent","_top"],default:"_self"},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"}},p={name:f,"css-class":"pkt-link","dark-mode":!0,isElement:u,props:d,slots:m};var P=Object.defineProperty,y=Object.getOwnPropertyDescriptor,i=(s,n,r,o)=>{for(var t=o>1?void 0:o?y(n,r):n,l=s.length-1,a;l>=0;l--)(a=s[l])&&(t=(o?a(n,r,t):a(t))||t);return o&&t&&P(n,r,t),t};exports.PktLink=class extends e.PktElement{constructor(){super(),this.defaultSlot=c.ii(),this.href=p.props.href.default,this.iconName=void 0,this.iconPosition=void 0,this.external=p.props.external.default,this.target=p.props.target.default,this.slotController=new c.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 e.ke`<a
+      class=${k.Rt(n)}
+      href=${this.href}
+      @click=${this.handleClick}
+      .target=${this.target}
+      .rel=${this.external?"noopener noreferrer":e.D}
+      >${this.iconName?e.ke`<pkt-icon name=${this.iconName} class="pkt-link__icon"></pkt-icon>`:""} <span ${c.Kt(this.defaultSlot)}>Link</span></a
+    >`}handleClick(){this.dispatchEvent(new CustomEvent("click",{detail:"pkt-link-clicked",bubbles:!0}))}};i([e.n({type:String,reflect:!0})],exports.PktLink.prototype,"href",2);i([e.n({type:String,reflect:!0})],exports.PktLink.prototype,"iconName",2);i([e.n({type:String,reflect:!0})],exports.PktLink.prototype,"iconPosition",2);i([e.n({type:Boolean,reflect:!0})],exports.PktLink.prototype,"external",2);i([e.n({type:String,reflect:!0})],exports.PktLink.prototype,"target",2);exports.PktLink=i([h.t("pkt-link")],exports.PktLink);

package/dist/pkt-link.js

@@ -1,15 +1,26 @@
-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 = {
+import { P as f, k, D as h, n as i } from "./index-CINnuWkG.js";
+import { i as m, P as d, K as u } from "./ref-Cau3ksvI.js";
+import { R as P } from "./class-map-CEzmgstO.js";
+import { t as y } from "./directive-DA0-wdk7.js";
+import "./index-C7OaW8f8.js";
+const g = "pkt-link", v = !0, _ = {
   href: {
     name: "URL",
     description: "URL til lenken",
     type: "string",
     default: "#"
   },
+  target: {
+    name: "Mål",
+    description: "Mål for lenken",
+    type: [
+      "_blank",
+      "_self",
+      "_parent",
+      "_top"
+    ],
+    default: "_self"
+  },
   iconName: {
     name: "Ikon",
     description: "Ikon som skal vises ved siden av lenketeksten",
@@ -29,36 +40,41 @@ const v = "pkt-link", y = !0, x = {
     type: "boolean",
     default: !1
   }
-}, N = {
+}, x = {
   default: {
     description: "Innholdet i lenken"
   }
-}, k = {
-  name: v,
+}, c = {
+  name: g,
   "css-class": "pkt-link",
   "dark-mode": !0,
-  isElement: y,
-  props: x,
-  slots: N
+  isElement: v,
+  props: _,
+  slots: x
 };
-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;
+var N = Object.defineProperty, S = Object.getOwnPropertyDescriptor, n = (o, s, l, r) => {
+  for (var t = r > 1 ? void 0 : r ? S(s, l) : s, a = o.length - 1, p; a >= 0; a--)
+    (p = o[a]) && (t = (r ? p(s, l, t) : p(t)) || t);
+  return r && t && N(s, l, t), t;
 };
-let e = class extends h {
+let e = class extends f {
   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);
+    super(), this.defaultSlot = m(), this.href = c.props.href.default, this.iconName = void 0, this.iconPosition = void 0, this.external = c.props.external.default, this.target = c.props.target.default, this.slotController = new d(this, this.defaultSlot);
   }
   render() {
-    const n = {
+    const o = {
       "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
+    return k`<a
+      class=${P(o)}
+      href=${this.href}
+      @click=${this.handleClick}
+      .target=${this.target}
+      .rel=${this.external ? "noopener noreferrer" : h}
+      >${this.iconName ? k`<pkt-icon name=${this.iconName} class="pkt-link__icon"></pkt-icon>` : ""} <span ${u(this.defaultSlot)}>Link</span></a
     >`;
   }
   handleClick() {
@@ -70,20 +86,23 @@ let e = class extends h {
     );
   }
 };
-i([
-  r({ type: String, reflect: !0 })
+n([
+  i({ type: String, reflect: !0 })
 ], e.prototype, "href", 2);
-i([
-  r({ type: String, reflect: !0 })
+n([
+  i({ type: String, reflect: !0 })
 ], e.prototype, "iconName", 2);
-i([
-  r({ type: String, reflect: !0 })
+n([
+  i({ type: String, reflect: !0 })
 ], e.prototype, "iconPosition", 2);
-i([
-  r({ type: Boolean, reflect: !0 })
+n([
+  i({ type: Boolean, reflect: !0 })
 ], e.prototype, "external", 2);
-e = i([
-  P("pkt-link")
+n([
+  i({ type: String, reflect: !0 })
+], e.prototype, "target", 2);
+e = n([
+  y("pkt-link")
 ], e);
 export {
   e as PktLink

package/dist/pkt-messagebox.cjs

@@ -1,4 +1,4 @@
-"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)}>
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./index-CkBUiPHx.cjs"),c=require("./ref-BkUqMgQu.cjs"),p=require("./class-map-DfznHRRW.cjs"),b=require("./directive-19_ixLKS.cjs");require("./index-BCVyjeWS.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}

package/dist/pkt-messagebox.js

@@ -1,8 +1,8 @@
-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 { P as m, D as c, k as h, n as o } from "./index-CINnuWkG.js";
+import { i as b, P as f, K as k } from "./ref-Cau3ksvI.js";
+import { R as u } from "./class-map-CEzmgstO.js";
 import { t as y } from "./directive-DA0-wdk7.js";
-import "./index-BlHnvy7v.js";
+import "./index-C7OaW8f8.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);

package/dist/pkt-tag.cjs

@@ -1,4 +1,4 @@
-"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`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const u=require("./class-map-DfznHRRW.cjs"),g=require("./directive-19_ixLKS.cjs"),t=require("./index-CkBUiPHx.cjs"),o=require("./ref-BkUqMgQu.cjs");require("./index-BCVyjeWS.cjs");const h="pkt-tag",k={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"}},f={default:{description:"Teksten til tag"}},a={name:h,"css-class":"pkt-tag",props:k,slots:f};var d=Object.defineProperty,y=Object.getOwnPropertyDescriptor,e=(n,s,r,l)=>{for(var i=l>1?void 0:l?y(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&&d(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}
@@ -14,4 +14,4 @@
           ${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);
+      `}};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([t.r()],exports.PktTag.prototype,"_isClosed",2);exports.PktTag=e([g.t("pkt-tag")],exports.PktTag);

package/dist/pkt-tag.js

@@ -1,9 +1,8 @@
-import { R as f } from "./class-map-DiT0qP3E.js";
+import { R as h } from "./class-map-CEzmgstO.js";
 import { t as y } from "./directive-DA0-wdk7.js";
-import { P as d, k as p, D as g, n as i } from "./index-BHzxfdBK.js";
-import { r as m } from "./state-BRgFbJX9.js";
-import { i as k, P as b, K as h } from "./ref-Co_S0Cgj.js";
-import "./index-BlHnvy7v.js";
+import { r as d, P as g, k as p, D as k, n as i } from "./index-CINnuWkG.js";
+import { i as m, P as b, K as f } from "./ref-Cau3ksvI.js";
+import "./index-C7OaW8f8.js";
 const S = "pkt-tag", _ = {
   closeTag: {
     type: "boolean",
@@ -62,20 +61,20 @@ const S = "pkt-tag", _ = {
   default: {
     description: "Teksten til tag"
   }
-}, l = {
+}, r = {
   name: S,
   "css-class": "pkt-tag",
   props: _,
   slots: $
 };
-var x = Object.defineProperty, C = Object.getOwnPropertyDescriptor, e = (a, r, n, o) => {
-  for (var s = o > 1 ? void 0 : o ? C(r, n) : r, c = a.length - 1, u; c >= 0; c--)
-    (u = a[c]) && (s = (o ? u(r, n, s) : u(s)) || s);
-  return o && s && x(r, n, s), s;
+var x = Object.defineProperty, C = Object.getOwnPropertyDescriptor, e = (a, l, n, o) => {
+  for (var s = o > 1 ? void 0 : o ? C(l, n) : l, c = a.length - 1, u; c >= 0; c--)
+    (u = a[c]) && (s = (o ? u(l, n, s) : u(s)) || s);
+  return o && s && x(l, n, s), s;
 };
-let t = class extends d {
+let t = class extends g {
   constructor() {
-    super(), this.defaultSlot = k(), this.closeTag = l.props.closeTag.default, this.size = l.props.size.default, this.skin = l.props.skin.default, this.textStyle = l.props.textStyle.default, this.iconName = void 0, this.type = l.props.type.default, this.ariaLabel = l.props.ariaLabel.default, this._isClosed = !1, this.close = (a) => {
+    super(), this.defaultSlot = m(), this.closeTag = r.props.closeTag.default, this.size = r.props.size.default, this.skin = r.props.skin.default, this.textStyle = r.props.textStyle.default, this.iconName = void 0, this.type = r.props.type.default, this.ariaLabel = r.props.ariaLabel.default, this._isClosed = !1, this.close = (a) => {
       this._isClosed = !0, this.dispatchEvent(
         new CustomEvent("onClose", {
           detail: { origin: a },
@@ -91,7 +90,7 @@ let t = class extends d {
       [`pkt-tag--${this.size}`]: !!this.size,
       [`pkt-tag--${this.skin}`]: !!this.skin,
       [`pkt-tag--${this.textStyle}`]: !!this.textStyle
-    }, r = {
+    }, l = {
       "pkt-tag": !0,
       "pkt-btn": !0,
       "pkt-btn--tertiary": !0,
@@ -100,21 +99,21 @@ let t = class extends d {
       [`pkt-tag--${this.textStyle}`]: !!this.textStyle,
       "pkt-btn--icons-right-and-left": this.closeTag && !!this.iconName
     };
-    return this.closeTag ? this._isClosed ? g : p`
+    return this.closeTag ? this._isClosed ? k : p`
             <button
-              class=${f(r)}
+              class=${h(l)}
               type=${this.type}
               aria-label=${this.ariaLabel}
               @click=${this.close}
             >
               ${this.iconName && p`<pkt-icon class="pkt-tag__icon" name=${this.iconName}></pkt-icon>`}
-              <span ${h(this.defaultSlot)}></span>
+              <span ${f(this.defaultSlot)}></span>
               <pkt-icon class="pkt-tag__close-btn" name="close"></pkt-icon>
             </button>
           ` : p`
-        <span class=${f(a)}>
+        <span class=${h(a)}>
           ${this.iconName && p` <pkt-icon class="pkt-tag__icon" name=${this.iconName}></pkt-icon> `}
-          <span ${h(this.defaultSlot)}> </span>
+          <span ${f(this.defaultSlot)}> </span>
         </span>
       `;
   }
@@ -141,7 +140,7 @@ e([
   i({ type: String, reflect: !0 })
 ], t.prototype, "ariaLabel", 2);
 e([
-  m()
+  d()
 ], t.prototype, "_isClosed", 2);
 t = e([
   y("pkt-tag")

package/dist/{ref-Bk590hog.cjs → ref-BkUqMgQu.cjs}

@@ -1,4 +1,4 @@
-"use strict";const a=require("./index-BJ_4AGO3.cjs"),$=require("./directive-19_ixLKS.cjs");class p{constructor(e,...s){this.nodes=[],this.host=e,this.host.addController(this),this.slots=s,this.nodes=[]}hostConnected(){Array.from(this.host.childNodes).forEach(e=>{var s;if(e.nodeName==="#text"){if((s=e.nodeValue)!=null&&s.trim()){const i=document==null?void 0:document.createElement("template");i.content.appendChild(e),this.nodes.push(i)}}else this.nodes.push(e)})}hostUpdated(){this.slots.forEach(e=>{if(!e.value)return;const s=e.value.getAttribute("name"),i=this.nodes.flatMap(n=>n.getAttribute&&n.getAttribute("slot")==s?this.nodeFromElement(n,e):[]);i.length&&e.value.replaceChildren(...i)})}nodeFromElement(e,s){var i;return e===((i=s.value)==null?void 0:i.parentNode)?[]:e instanceof HTMLTemplateElement?Array.from(e.content.childNodes):e}}/**
+"use strict";const a=require("./index-CkBUiPHx.cjs"),$=require("./directive-19_ixLKS.cjs");class p{constructor(e,...s){this.nodes=[],this.host=e,this.host.addController(this),this.slots=s,this.nodes=[]}hostConnected(){Array.from(this.host.childNodes).forEach(e=>{var s;if(e.nodeName==="#text"){if((s=e.nodeValue)!=null&&s.trim()){const i=document==null?void 0:document.createElement("template");i.content.appendChild(e),this.nodes.push(i)}}else this.nodes.push(e)})}hostUpdated(){this.slots.forEach(e=>{if(!e.value)return;const s=e.value.getAttribute("name"),i=this.nodes.flatMap(n=>n.getAttribute&&n.getAttribute("slot")==s?this.nodeFromElement(n,e):[]);i.length&&e.value.replaceChildren(...i)})}nodeFromElement(e,s){var i;return e===((i=s.value)==null?void 0:i.parentNode)?[]:e instanceof HTMLTemplateElement?Array.from(e.content.childNodes):e}}/**
  * @license
  * Copyright 2020 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause

package/dist/{ref-Co_S0Cgj.js → ref-Cau3ksvI.js}

@@ -1,4 +1,4 @@
-import { s as p, D as _ } from "./index-BHzxfdBK.js";
+import { s as p, D as _ } from "./index-CINnuWkG.js";
 import { i as v, a as m, e as g } from "./directive-DA0-wdk7.js";
 class H {
   constructor(e, ...s) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oslokommune/punkt-elements",
-  "version": "12.3.1",
+  "version": "12.3.3",
   "description": "Komponentbiblioteket til Punkt, et designsystem laget av Oslo Origo",
   "homepage": "https://punkt.oslo.kommune.no",
   "author": "Team Designsystem, Oslo Origo",
@@ -55,5 +55,5 @@
     "url": "https://github.com/oslokommune/punkt/issues"
   },
   "license": "MIT",
-  "gitHead": "5c075db46ab29ba4ee522cfbd380e9c54933c36b"
+  "gitHead": "372dba9714e52bbd9a13eb02ea39ec2aa231ee66"
 }

package/src/components/datepicker/index.ts

@@ -29,19 +29,19 @@ export class PktDatepicker extends PktInputElement {
       : this.value
     : []
 
-  @property({ type: String, reflect: true })
+  @property({ type: String })
   label: string = 'Datovelger'
 
-  @property({ type: String, reflect: true })
+  @property({ type: String })
   helptext: string = ''
 
-  @property({ type: String, reflect: true })
+  @property({ type: String })
   helptextDropdown: string = ''
 
-  @property({ type: String, reflect: true })
+  @property({ type: String })
   helptextDropdownButton: string = specs.props.helptextDropdownButton.default
 
-  @property({ type: String, reflect: true })
+  @property({ type: String })
   dateformat: string = specs.props.dateformat.default
 
   @property({ type: Boolean, reflect: true })
@@ -53,13 +53,13 @@ export class PktDatepicker extends PktInputElement {
   @property({ type: Boolean, reflect: true })
   range: boolean = specs.props.range.default
 
-  @property({ type: Boolean, reflect: true })
+  @property({ type: Boolean })
   weeknumbers: boolean = specs.props.weeknumbers.default
 
-  @property({ type: Boolean, reflect: true })
+  @property({ type: Boolean })
   withcontrols: boolean = specs.props.withcontrols.default
 
-  @property({ type: Boolean, reflect: true })
+  @property({ type: Boolean })
   fullwidth: boolean = false
 
   @property({ converter: converters.csvToArray })
@@ -68,7 +68,7 @@ export class PktDatepicker extends PktInputElement {
   @property({ converter: converters.csvToArray })
   excludeweekdays: string[] = []
 
-  @property({ type: String, reflect: true })
+  @property({ type: String })
   currentmonth: string = this.formatISODate(new Date())
 
   @property({ type: Boolean, reflect: true }) calendarOpen: boolean = false
@@ -145,8 +145,6 @@ export class PktDatepicker extends PktInputElement {
           }
         }
       }
-
-      this.requestUpdate('value')
     }
 
     if (name === 'excludedates' && typeof this.excludedates === 'string') {
@@ -158,6 +156,10 @@ export class PktDatepicker extends PktInputElement {
     }
   }
 
+  protected firstUpdated(_changedProperties: PropertyValues): void {
+    super.firstUpdated(_changedProperties)
+  }
+
   updated(changedProperties: PropertyValues): void {
     super.updated(changedProperties)
     if (changedProperties.has('value')) {

package/src/components/element/index.ts

@@ -1,5 +1,5 @@
 import { LitElement, PropertyValues } from 'lit'
-import { property } from 'lit/decorators.js'
+import { property, state } from 'lit/decorators.js'
 import { v4 as uuidv4 } from 'uuid'
 import strings from '../../translations/no.json'
 
@@ -98,6 +98,8 @@ export class PktInputElement extends PktElement {
   @property({ type: String, reflect: true })
   errorMessage: string = ''
 
+  @state() touched: boolean = false
+
   constructor() {
     super()
     this.internals = this.attachInternals()
@@ -157,6 +159,10 @@ export class PktInputElement extends PktElement {
 
   // Trigger this when you want to set the value of the input out to the form
   protected onInput(value: string | string[]): void {
+    if (!this.touched) {
+      this.touched = true
+      return
+    }
     console.log('onInput', value)
     if (typeof value !== 'string' && !Array.isArray(value)) {
       console.log('Value must be a string or an array')

package/src/components/link/index.ts

@@ -1,7 +1,7 @@
 import { PktElement } from '../element'
 import { PktSlotController } from '../../controllers/pkt-slot-controller'
 import { ref, Ref, createRef } from 'lit/directives/ref.js'
-import { html } from 'lit'
+import { html, nothing } from 'lit'
 import { classMap } from 'lit/directives/class-map.js'
 import { customElement, property } from 'lit/decorators.js'
 import specs from 'componentSpecs/link.json'
@@ -23,6 +23,7 @@ export class PktLink extends PktElement {
   @property({ type: String, reflect: true }) iconName: string | undefined = undefined
   @property({ type: String, reflect: true }) iconPosition: string | undefined = undefined
   @property({ type: Boolean, reflect: true }) external: boolean = specs.props.external.default
+  @property({ type: String, reflect: true }) target: string | null = specs.props.target.default
 
   render() {
     const classes = {
@@ -33,7 +34,12 @@ export class PktLink extends PktElement {
       'pkt-link--icon-right': !!this.iconName && this.iconPosition === 'right',
       'pkt-link--external': this.external,
     }
-    return html`<a class=${classMap(classes)} href=${this.href} @click=${this.handleClick}
+    return html`<a
+      class=${classMap(classes)}
+      href=${this.href}
+      @click=${this.handleClick}
+      .target=${this.target}
+      .rel=${this.external ? 'noopener noreferrer' : nothing}
       >${this.iconName
         ? html`<pkt-icon name=${this.iconName} class="pkt-link__icon"></pkt-icon>`
         : ''} <span ${ref(this.defaultSlot)}>Link</span></a