@oslokommune/punkt-elements 12.11.2 → 12.11.4

package/dist/pkt-input-wrapper.cjs

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./index-CBFF6OHE.cjs"),h=require("./ref-3QXuhm6y.cjs"),k=require("./index-CqWQt14b.cjs"),n=require("./class-map-B9m-NycN.cjs"),$=require("./custom-element-B-TlBwRu.cjs");require("./helptext-0fI9cWEe.cjs");/**
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./index-BVbNUNAa.cjs"),h=require("./ref-CIjJrMxp.cjs"),k=require("./index-DYiD-o1w.cjs"),n=require("./class-map-DLFPHEre.cjs"),$=require("./custom-element-B-TlBwRu.cjs");require("./helptext-WCq0-Dq8.cjs");/**
  * @license
  * Copyright 2020 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause

package/dist/pkt-input-wrapper.js

@@ -1,9 +1,9 @@
-import { P as w, v, s as o, E as u, x as p, n as r } from "./index-Dw-V4--g.js";
-import { e as k, P as m, n as _ } from "./ref-D5FOI49b.js";
-import { o as T } from "./index-DkLa0YLm.js";
-import { e as c } from "./class-map-DpN1m5lh.js";
+import { P as w, v, s as o, E as u, x as p, n as r } from "./index-BQ9BMXel.js";
+import { e as k, P as m, n as _ } from "./ref-BjO0bKwt.js";
+import { o as T } from "./index-BfUPq43a.js";
+import { e as c } from "./class-map-BQ3-MseA.js";
 import { t as D } from "./custom-element-CWfU4dcr.js";
-import "./helptext-B0Frb38k.js";
+import "./helptext-D-5_-HAW.js";
 /**
  * @license
  * Copyright 2020 Google LLC

package/dist/pkt-link.cjs

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./index-CBFF6OHE.cjs"),c=require("./ref-3QXuhm6y.cjs"),k=require("./class-map-B9m-NycN.cjs"),h=require("./custom-element-B-TlBwRu.cjs");require("./index-CqWQt14b.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.e(),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.x`<a
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./index-BVbNUNAa.cjs"),c=require("./ref-CIjJrMxp.cjs"),k=require("./class-map-DLFPHEre.cjs"),h=require("./custom-element-B-TlBwRu.cjs");require("./index-DYiD-o1w.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.e(),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.x`<a
       class=${k.e(n)}
       href=${this.href}
       @click=${this.handleClick}

package/dist/pkt-link.js

@@ -1,8 +1,8 @@
-import { P as f, x as k, E as h, n as i } from "./index-Dw-V4--g.js";
-import { e as m, P as d, n as u } from "./ref-D5FOI49b.js";
-import { e as P } from "./class-map-DpN1m5lh.js";
+import { P as f, x as k, E as h, n as i } from "./index-BQ9BMXel.js";
+import { e as m, P as d, n as u } from "./ref-BjO0bKwt.js";
+import { e as P } from "./class-map-BQ3-MseA.js";
 import { t as y } from "./custom-element-CWfU4dcr.js";
-import "./index-DkLa0YLm.js";
+import "./index-BfUPq43a.js";
 const g = "pkt-link", v = !0, _ = {
   href: {
     name: "URL",

package/dist/pkt-messagebox.cjs

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./index-CBFF6OHE.cjs"),c=require("./ref-3QXuhm6y.cjs"),b=require("./class-map-B9m-NycN.cjs"),k=require("./custom-element-B-TlBwRu.cjs");require("./index-CqWQt14b.cjs");const d="pkt-messagebox",u=!0,m={onClose:{description:"React: Event som trigges når meldingsboksen lukkes"},"on-close":{description:"Vue: Event som trigges når meldingsboksen lukkes"}},g={title:{name:"Tittel",description:"Tittelen på meldingsboksen",type:"string"},skin:{name:"Utseende",description:"Velg farge på meldingsboksen",type:["beige","blue","red","green"],default:"beige"},compact:{name:"Kompakt",description:"Gjør meldingsboksen mindre",type:"boolean",default:!1},closable:{name:"Kan lukkes",description:"Viser lukkeknapp",type:"boolean",default:!1}},h={default:{description:"Innholdet i meldingsboksen"}},p={name:d,"css-class":"pkt-messagebox",isElement:u,events:m,props:g,slots:h};var f=Object.defineProperty,x=Object.getOwnPropertyDescriptor,o=(i,t,n,l)=>{for(var s=l>1?void 0:l?x(t,n):t,r=i.length-1,a;r>=0;r--)(a=i[r])&&(s=(l?a(t,n,s):a(s))||s);return l&&s&&f(t,n,s),s};exports.PktMessagebox=class extends e.PktElement{constructor(){super(),this.defaultSlot=c.e(),this.closable=p.props.closable.default,this.compact=p.props.compact.default,this.title="",this.skin=p.props.skin.default,this._isClosed=!1,this.close=t=>{this._isClosed=!0,this.dispatchEvent(new CustomEvent("close",{detail:{origin:t},bubbles:!0})),this.dispatchEvent(new CustomEvent("on-close",{detail:{origin:t},bubbles:!0}))},this.slotController=new c.PktSlotController(this,this.defaultSlot),this._isClosed=!1}render(){const t={"pkt-messagebox":!0,"pkt-messagebox--compact":this.compact,[`pkt-messagebox--${this.skin}`]:this.skin,"pkt-messagebox--closable":this.closable,"pkt-hide":this._isClosed};return e.x`<div class=${b.e(t)}>
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./index-BVbNUNAa.cjs"),c=require("./ref-CIjJrMxp.cjs"),b=require("./class-map-DLFPHEre.cjs"),k=require("./custom-element-B-TlBwRu.cjs");require("./index-DYiD-o1w.cjs");const d="pkt-messagebox",u=!0,m={onClose:{description:"React: Event som trigges når meldingsboksen lukkes"},"on-close":{description:"Vue: Event som trigges når meldingsboksen lukkes"}},g={title:{name:"Tittel",description:"Tittelen på meldingsboksen",type:"string"},skin:{name:"Utseende",description:"Velg farge på meldingsboksen",type:["beige","blue","red","green"],default:"beige"},compact:{name:"Kompakt",description:"Gjør meldingsboksen mindre",type:"boolean",default:!1},closable:{name:"Kan lukkes",description:"Viser lukkeknapp",type:"boolean",default:!1}},h={default:{description:"Innholdet i meldingsboksen"}},p={name:d,"css-class":"pkt-messagebox",isElement:u,events:m,props:g,slots:h};var f=Object.defineProperty,x=Object.getOwnPropertyDescriptor,o=(i,t,n,l)=>{for(var s=l>1?void 0:l?x(t,n):t,r=i.length-1,a;r>=0;r--)(a=i[r])&&(s=(l?a(t,n,s):a(s))||s);return l&&s&&f(t,n,s),s};exports.PktMessagebox=class extends e.PktElement{constructor(){super(),this.defaultSlot=c.e(),this.closable=p.props.closable.default,this.compact=p.props.compact.default,this.title="",this.skin=p.props.skin.default,this._isClosed=!1,this.close=t=>{this._isClosed=!0,this.dispatchEvent(new CustomEvent("close",{detail:{origin:t},bubbles:!0})),this.dispatchEvent(new CustomEvent("on-close",{detail:{origin:t},bubbles:!0}))},this.slotController=new c.PktSlotController(this,this.defaultSlot),this._isClosed=!1}render(){const t={"pkt-messagebox":!0,"pkt-messagebox--compact":this.compact,[`pkt-messagebox--${this.skin}`]:this.skin,"pkt-messagebox--closable":this.closable,"pkt-hide":this._isClosed};return e.x`<div class=${b.e(t)}>
       ${this.closable?e.x`<div class="pkt-messagebox__close">
             <button
               @click=${this.close}

package/dist/pkt-messagebox.js

@@ -1,8 +1,8 @@
-import { r as b, P as k, x as c, E as d, n } from "./index-Dw-V4--g.js";
-import { e as u, P as g, n as h } from "./ref-D5FOI49b.js";
-import { e as f } from "./class-map-DpN1m5lh.js";
+import { r as b, P as k, x as c, E as d, n } from "./index-BQ9BMXel.js";
+import { e as u, P as g, n as h } from "./ref-BjO0bKwt.js";
+import { e as f } from "./class-map-BQ3-MseA.js";
 import { t as v } from "./custom-element-CWfU4dcr.js";
-import "./index-DkLa0YLm.js";
+import "./index-BfUPq43a.js";
 const _ = "pkt-messagebox", x = !0, y = {
   onClose: {
     description: "React: Event som trigges når meldingsboksen lukkes"

package/dist/pkt-modal.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./modal-FnkYHLoK.cjs"),t=e.PktModal;Object.defineProperty(exports,"PktModal",{enumerable:!0,get:()=>e.PktModal});exports.default=t;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./modal-BXKX0dxk.cjs"),t=e.PktModal;Object.defineProperty(exports,"PktModal",{enumerable:!0,get:()=>e.PktModal});exports.default=t;

package/dist/pkt-modal.js

@@ -1,4 +1,4 @@
-import { P as a } from "./modal-D6J8TqCp.js";
+import { P as a } from "./modal-CYx_wrz1.js";
 const t = a;
 export {
   a as PktModal,

package/dist/pkt-tag.cjs

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const u=require("./class-map-B9m-NycN.cjs"),g=require("./custom-element-B-TlBwRu.cjs"),t=require("./index-CBFF6OHE.cjs"),o=require("./ref-3QXuhm6y.cjs");require("./index-CqWQt14b.cjs");const h="pkt-tag",k=!0,d={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:"Lukk"}},f={default:{description:"Teksten til tag"}},a={name:h,"css-class":"pkt-tag",isElement:k,props:d,slots:f};var y=Object.defineProperty,m=Object.getOwnPropertyDescriptor,s=(n,e,l,r)=>{for(var i=r>1?void 0:r?m(e,l):e,p=n.length-1,c;p>=0;p--)(c=n[p])&&(i=(r?c(e,l,i):c(i))||i);return r&&i&&y(e,l,i),i};exports.PktTag=class extends t.PktElement{constructor(){super(),this.defaultSlot=o.e(),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=e=>{this._isClosed=!0,this.dispatchEvent(new CustomEvent("close",{detail:{origin:e},bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("on-close",{detail:{origin:e},bubbles:!0,composed:!0}))},this.slotController=new o.PktSlotController(this,this.defaultSlot),this._isClosed=!1}render(){const e={"pkt-tag":!0,[`pkt-tag--${this.size}`]:!!this.size,[`pkt-tag--${this.skin}`]:!!this.skin,[`pkt-tag--${this.textStyle}`]:!!this.textStyle},l={"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,"pkt-hide":this._isClosed};return this.closeTag?t.x`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const u=require("./class-map-DLFPHEre.cjs"),g=require("./custom-element-B-TlBwRu.cjs"),t=require("./index-BVbNUNAa.cjs"),o=require("./ref-CIjJrMxp.cjs");require("./index-DYiD-o1w.cjs");const h="pkt-tag",k=!0,d={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:"Lukk"}},f={default:{description:"Teksten til tag"}},a={name:h,"css-class":"pkt-tag",isElement:k,props:d,slots:f};var y=Object.defineProperty,m=Object.getOwnPropertyDescriptor,s=(n,e,l,r)=>{for(var i=r>1?void 0:r?m(e,l):e,p=n.length-1,c;p>=0;p--)(c=n[p])&&(i=(r?c(e,l,i):c(i))||i);return r&&i&&y(e,l,i),i};exports.PktTag=class extends t.PktElement{constructor(){super(),this.defaultSlot=o.e(),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=e=>{this._isClosed=!0,this.dispatchEvent(new CustomEvent("close",{detail:{origin:e},bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("on-close",{detail:{origin:e},bubbles:!0,composed:!0}))},this.slotController=new o.PktSlotController(this,this.defaultSlot),this._isClosed=!1}render(){const e={"pkt-tag":!0,[`pkt-tag--${this.size}`]:!!this.size,[`pkt-tag--${this.skin}`]:!!this.skin,[`pkt-tag--${this.textStyle}`]:!!this.textStyle},l={"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,"pkt-hide":this._isClosed};return this.closeTag?t.x`
         <button
           class=${u.e(l)}
           type=${this.type}

package/dist/pkt-tag.js

@@ -1,8 +1,8 @@
-import { e as h } from "./class-map-DpN1m5lh.js";
+import { e as h } from "./class-map-BQ3-MseA.js";
 import { t as d } from "./custom-element-CWfU4dcr.js";
-import { r as y, P as g, x as p, n as l } from "./index-Dw-V4--g.js";
-import { e as m, P as k, n as f } from "./ref-D5FOI49b.js";
-import "./index-DkLa0YLm.js";
+import { r as y, P as g, x as p, n as l } from "./index-BQ9BMXel.js";
+import { e as m, P as k, n as f } from "./ref-BjO0bKwt.js";
+import "./index-BfUPq43a.js";
 const b = "pkt-tag", S = !0, $ = {
   closeTag: {
     type: "boolean",

package/dist/{ref-D5FOI49b.js → ref-BjO0bKwt.js}

@@ -1,4 +1,4 @@
-import { Z as p, E as A } from "./index-Dw-V4--g.js";
+import { Z as p, E as A } from "./index-BQ9BMXel.js";
 import { i as v, a as N, e as m } from "./custom-element-CWfU4dcr.js";
 class w {
   constructor(e, ...t) {

package/dist/{ref-3QXuhm6y.cjs → ref-CIjJrMxp.cjs}

@@ -1,4 +1,4 @@
-"use strict";const A=require("./index-CBFF6OHE.cjs"),$=require("./custom-element-B-TlBwRu.cjs");class v{constructor(e,...t){this.nodes=[],this.host=e,this.host.addController(this),this.slots=t,this.nodes=[],this.observer=new MutationObserver(i=>this.handleMutations(i))}hostConnected(){this.updateNodes(),this.observer.observe(this.host,{childList:!0})}hostDisconnected(){this.observer.disconnect()}hostUpdated(){this.updateSlots()}updateNodes(){this.nodes=[],Array.from(this.host.childNodes).forEach(t=>{var i;if(t.nodeType===Node.TEXT_NODE&&((i=t.nodeValue)!=null&&i.trim())){const o=document==null?void 0:document.createElement("template");o.content.appendChild(t),this.nodes.push(o)}else this.isSlotElement(t)||this.nodes.push(t)})}updateSlots(){this.slots.forEach(e=>{if(!e.value)return;const t=e.value.getAttribute("name"),o=this.nodes.flatMap(n=>n.getAttribute&&n.getAttribute("slot")==t?this.nodeFromElement(n,e):[]).filter(n=>e.value&&!e.value.contains(n)&&!n.contains(e.value));o.length>0&&e.value.replaceChildren(...o)})}handleMutations(e){let t=!1;e.forEach(i=>{i.type==="childList"&&(i.addedNodes.forEach(o=>{var h;const n=o.nodeType===Node.ELEMENT_NODE&&!this.isSlotElement(o),l=o.nodeType===Node.TEXT_NODE&&((h=o.nodeValue)==null?void 0:h.trim());if(n)this.nodes.push(o),t=!0;else if(l){const d=document==null?void 0:document.createElement("template");d.content.appendChild(o),this.nodes.push(d),t=!0}}),i.removedNodes.forEach(o=>{this.nodes=this.nodes.filter(n=>n!==o),t=!0}))}),t&&this.updateSlots()}isSlotElement(e){return this.slots.some(t=>t.value===e)}nodeFromElement(e,t){var i;return e===((i=t.value)==null?void 0:i.parentNode)?[]:e instanceof HTMLTemplateElement?Array.from(e.content.childNodes):[e]}}/**
+"use strict";const A=require("./index-BVbNUNAa.cjs"),$=require("./custom-element-B-TlBwRu.cjs");class v{constructor(e,...t){this.nodes=[],this.host=e,this.host.addController(this),this.slots=t,this.nodes=[],this.observer=new MutationObserver(i=>this.handleMutations(i))}hostConnected(){this.updateNodes(),this.observer.observe(this.host,{childList:!0})}hostDisconnected(){this.observer.disconnect()}hostUpdated(){this.updateSlots()}updateNodes(){this.nodes=[],Array.from(this.host.childNodes).forEach(t=>{var i;if(t.nodeType===Node.TEXT_NODE&&((i=t.nodeValue)!=null&&i.trim())){const o=document==null?void 0:document.createElement("template");o.content.appendChild(t),this.nodes.push(o)}else this.isSlotElement(t)||this.nodes.push(t)})}updateSlots(){this.slots.forEach(e=>{if(!e.value)return;const t=e.value.getAttribute("name"),o=this.nodes.flatMap(n=>n.getAttribute&&n.getAttribute("slot")==t?this.nodeFromElement(n,e):[]).filter(n=>e.value&&!e.value.contains(n)&&!n.contains(e.value));o.length>0&&e.value.replaceChildren(...o)})}handleMutations(e){let t=!1;e.forEach(i=>{i.type==="childList"&&(i.addedNodes.forEach(o=>{var h;const n=o.nodeType===Node.ELEMENT_NODE&&!this.isSlotElement(o),l=o.nodeType===Node.TEXT_NODE&&((h=o.nodeValue)==null?void 0:h.trim());if(n)this.nodes.push(o),t=!0;else if(l){const d=document==null?void 0:document.createElement("template");d.content.appendChild(o),this.nodes.push(d),t=!0}}),i.removedNodes.forEach(o=>{this.nodes=this.nodes.filter(n=>n!==o),t=!0}))}),t&&this.updateSlots()}isSlotElement(e){return this.slots.some(t=>t.value===e)}nodeFromElement(e,t){var i;return e===((i=t.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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oslokommune/punkt-elements",
-  "version": "12.11.2",
+  "version": "12.11.4",
   "description": "Komponentbiblioteket til Punkt, et designsystem laget av Oslo Origo",
   "homepage": "https://punkt.oslo.kommune.no",
   "author": "Team Designsystem, Oslo Origo",
@@ -29,7 +29,7 @@
   },
   "devDependencies": {
     "@oslokommune/punkt-assets": "^12.7.3",
-    "@oslokommune/punkt-css": "^12.11.0",
+    "@oslokommune/punkt-css": "^12.11.4",
     "sass": "^1.78.0",
     "typescript": "^5.6.2",
     "vite": "^5.4.4",
@@ -56,5 +56,5 @@
     "url": "https://github.com/oslokommune/punkt/issues"
   },
   "license": "MIT",
-  "gitHead": "48ca46f595c98cb45be257a3bb8440572ab2fb52"
+  "gitHead": "bde8823df25a77a385effd5b4001a1162c7f5132"
 }

package/src/components/datepicker/index.ts

@@ -1,5 +1,5 @@
 import { html, nothing, PropertyValues } from 'lit'
-import { customElement, property } from 'lit/decorators.js'
+import { customElement, property, state } from 'lit/decorators.js'
 import { Ref, createRef, ref } from 'lit/directives/ref.js'
 import { classMap } from 'lit/directives/class-map.js'
 import { repeat } from 'lit/directives/repeat.js'
@@ -44,6 +44,9 @@ export class PktDatepicker extends PktInputElement {
   @property({ type: Boolean, reflect: true })
   range: boolean = specs.props.range.default
 
+  @property({ type: Boolean })
+  showRangeLabels: boolean = false
+
   @property({ type: String })
   min: string | null = null
 
@@ -77,6 +80,9 @@ export class PktDatepicker extends PktInputElement {
   @property({ type: String })
   timezone: string = 'Europe/Oslo'
 
+  @state() inputClasses = {}
+  @state() buttonClasses = {}
+
   /**
    * Housekeeping / lifecycle methods
    */
@@ -182,23 +188,6 @@ export class PktDatepicker extends PktInputElement {
   calRef: Ref<PktCalendar> = createRef()
   popupRef: Ref<HTMLDivElement> = createRef()
 
-  /**
-   * CSS classes
-   */
-
-  inputClasses = {
-    'pkt-input': true,
-    'pkt-datepicker__input': true,
-    'pkt-input--fullwidth': this.fullwidth,
-  }
-
-  buttonClasses = {
-    'pkt-input-icon': true,
-    'pkt-btn': true,
-    'pkt-btn--icon-only': true,
-    'pkt-btn--tertiary': true,
-  }
-
   /**
    * Rendering
    */
@@ -251,8 +240,14 @@ export class PktDatepicker extends PktInputElement {
   }
 
   renderRangeInput() {
+    const rangeLabelClasses = {
+      'pkt-input-prefix': this.showRangeLabels,
+      'pkt-hide': !this.showRangeLabels,
+    }
     return html`
-      <div class="pkt-input-prefix">Fra</div>
+      ${this.showRangeLabels
+        ? html` <div class="pkt-input-prefix">${this.strings.generic.from}</div> `
+        : nothing}
       <input
         class=${classMap(this.inputClasses)}
         .type=${this.inputType}
@@ -303,7 +298,10 @@ export class PktDatepicker extends PktInputElement {
         }}
         ${ref(this.inputRef)}
       />
-      <div class="pkt-input-prefix" id="${this.id}-to-label">Til</div>
+      <div class="${classMap(rangeLabelClasses)}" id="${this.id}-to-label">
+        ${this.strings.generic.to}
+      </div>
+      ${!this.showRangeLabels ? html` <div class="pkt-input-separator">–</div> ` : nothing}
       <input
         class=${classMap(this.inputClasses)}
         .type=${this.inputType}
@@ -373,13 +371,14 @@ export class PktDatepicker extends PktInputElement {
   }
 
   renderMultipleInput() {
+    console.log('renderMultipleInput', this.inputClasses, this.multiple)
     return html`
       <input
         class=${classMap(this.inputClasses)}
         .type=${this.inputType}
         id="${this.id}-input"
-        min=${this.min}
-        max=${this.max}
+        .min=${this.min || nothing}
+        .max=${this.max || nothing}
         @click=${(e: MouseEvent) => {
           e.preventDefault()
           this.showCalendar()
@@ -490,6 +489,22 @@ export class PktDatepicker extends PktInputElement {
   }
 
   render() {
+    this.inputClasses = {
+      'pkt-input': true,
+      'pkt-datepicker__input': true,
+      'pkt-input--fullwidth': this.fullwidth,
+      'pkt-datepicker--hasrangelabels': this.showRangeLabels,
+      'pkt-datepicker--multiple': this.multiple,
+      'pkt-datepicker--range': this.range,
+    }
+
+    this.buttonClasses = {
+      'pkt-input-icon': true,
+      'pkt-btn': true,
+      'pkt-btn--icon-only': true,
+      'pkt-btn--tertiary': true,
+    }
+
     return html`
       <pkt-input-wrapper
         label="${this.label}"
@@ -512,7 +527,11 @@ export class PktDatepicker extends PktInputElement {
         class="pkt-datepicker"
       >
         ${this.multiple ? this.renderTags() : nothing}
-        <div class="pkt-datepicker__inputs ${this.range ? 'pkt-input__range-inputs' : ''}">
+        <div
+          class="pkt-datepicker__inputs ${this.range && this.showRangeLabels
+            ? 'pkt-input__range-inputs'
+            : ''}"
+        >
           <div class="pkt-input__container">
             ${this.range
               ? this.renderRangeInput()