@oslokommune/punkt-elements 13.5.13 → 13.6.1

package/dist/{tag-Bbs0U_Au.cjs → tag-BKq07hGI.cjs}

@@ -1,4 +1,4 @@
-"use strict";const u=require("./class-map-BBG2gMX4.cjs"),t=require("./element-6DBpyGQm.cjs"),k=require("./state-DPobt-Yz.cjs"),g=require("./pkt-slot-controller-BzddBp7z.cjs"),c=require("./ref-iJtiv3o2.cjs");require("./icon-B_ryAy4Q.cjs");const h=require("./if-defined-Cni-RHLS.cjs"),f={size:{default:"medium"},skin:{default:"blue"},closeTag:{default:!1},type:{default:"button"}},r={props:f};var d=Object.defineProperty,y=Object.getOwnPropertyDescriptor,i=(n,e,o,a)=>{for(var s=a>1?void 0:a?y(e,o):e,l=n.length-1,p;l>=0;l--)(p=n[l])&&(s=(a?p(e,o,s):p(s))||s);return a&&s&&d(e,o,s),s};exports.PktTag=class extends t.PktElement{constructor(){super(),this.defaultSlot=c.e(),this.closeTag=r.props.closeTag.default,this.size=r.props.size.default,this.skin=r.props.skin.default,this.textStyle=null,this.iconName=void 0,this.type=r.props.type.default,this.ariaLabel=null,this._isClosed=!1,this._ariaDescription=null,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 g.PktSlotController(this,this.defaultSlot),this._isClosed=!1}firstUpdated(e){var o,a;if(super.firstUpdated(e),this.closeTag&&!this.ariaLabel){const s=(a=(o=this.defaultSlot.value)==null?void 0:o.textContent)==null?void 0:a.trim();s&&(this._ariaDescription=`Klikk for å fjerne ${s}`)}}render(){const e={"pkt-tag":!0,[`pkt-tag--${this.size}`]:!!this.size,[`pkt-tag--${this.skin}`]:!!this.skin,[`pkt-tag--${this.textStyle}`]:!!this.textStyle},o={"pkt-tag":!0,"pkt-btn":!0,"pkt-btn--tertiary":!0,[`pkt-tag--${this.textStyle}`]:!!this.textStyle,[`pkt-tag--${this.size}`]:!!this.size,[`pkt-tag--${this.skin}`]:!!this.skin,"pkt-btn--icons-right-and-left":this.closeTag&&!!this.iconName,"pkt-hide":this._isClosed};return this.closeTag?t.x`
+"use strict";const u=require("./class-map-CG3vIaNm.cjs"),t=require("./element-D62wHiNU.cjs"),k=require("./state-BkE_Rxl7.cjs"),g=require("./pkt-slot-controller-BzddBp7z.cjs"),c=require("./ref-BfgcOXko.cjs");require("./icon-__Hjt2XZ.cjs");const h=require("./if-defined-CkVc_RJD.cjs"),f={size:{default:"medium"},skin:{default:"blue"},closeTag:{default:!1},type:{default:"button"}},r={props:f};var d=Object.defineProperty,y=Object.getOwnPropertyDescriptor,i=(n,e,o,a)=>{for(var s=a>1?void 0:a?y(e,o):e,l=n.length-1,p;l>=0;l--)(p=n[l])&&(s=(a?p(e,o,s):p(s))||s);return a&&s&&d(e,o,s),s};exports.PktTag=class extends t.PktElement{constructor(){super(),this.defaultSlot=c.e(),this.closeTag=r.props.closeTag.default,this.size=r.props.size.default,this.skin=r.props.skin.default,this.textStyle=null,this.iconName=void 0,this.type=r.props.type.default,this.ariaLabel=null,this._isClosed=!1,this._ariaDescription=null,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 g.PktSlotController(this,this.defaultSlot),this._isClosed=!1}firstUpdated(e){var o,a;if(super.firstUpdated(e),this.closeTag&&!this.ariaLabel){const s=(a=(o=this.defaultSlot.value)==null?void 0:o.textContent)==null?void 0:a.trim();s&&(this._ariaDescription=`Klikk for å fjerne ${s}`)}}render(){const e={"pkt-tag":!0,[`pkt-tag--${this.size}`]:!!this.size,[`pkt-tag--${this.skin}`]:!!this.skin,[`pkt-tag--${this.textStyle}`]:!!this.textStyle},o={"pkt-tag":!0,"pkt-btn":!0,"pkt-btn--tertiary":!0,[`pkt-tag--${this.textStyle}`]:!!this.textStyle,[`pkt-tag--${this.size}`]:!!this.size,[`pkt-tag--${this.skin}`]:!!this.skin,"pkt-btn--icons-right-and-left":this.closeTag&&!!this.iconName,"pkt-hide":this._isClosed};return this.closeTag?t.x`
         <button
           class=${u.e(o)}
           type=${this.type}

package/dist/{tag-DyXzTY68.js → tag-NZ5oeGfw.js}

@@ -1,10 +1,10 @@
-import { e as u } from "./class-map-BpTj9gtz.js";
-import { P as m, x as l, n as r, a as g } from "./element-CgEWt74-.js";
-import { r as k } from "./state-Bo2bck5_.js";
+import { e as u } from "./class-map-Dw6Wrxwi.js";
+import { P as m, x as l, n as r, a as g } from "./element-DJZPsA_J.js";
+import { r as k } from "./state-CPQXJ4Ct.js";
 import { P as y } from "./pkt-slot-controller-BPGj-LC5.js";
-import { e as b, n as f } from "./ref-BBYSqgeW.js";
-import "./icon-CC1js8eR.js";
-import { o as d } from "./if-defined-CmuO4Vz9.js";
+import { e as b, n as f } from "./ref-BCGCor-j.js";
+import "./icon-B1-mkmwB.js";
+import { o as d } from "./if-defined-D3lgJqT7.js";
 const _ = {
   size: {
     default: "medium"

package/dist/{textarea-BZL8Mkm0.js → textarea-C0vTWTov.js}

@@ -1,14 +1,14 @@
-import { T as l, E as $, x as f, n as d, a as g } from "./element-CgEWt74-.js";
-import { o as u } from "./if-defined-CmuO4Vz9.js";
-import { r as x } from "./state-Bo2bck5_.js";
-import { e as m, n as c } from "./ref-BBYSqgeW.js";
-import { e as v } from "./class-map-BpTj9gtz.js";
+import { T as l, E as $, x as f, n as d, a as g } from "./element-DJZPsA_J.js";
+import { o as u } from "./if-defined-D3lgJqT7.js";
+import { r as x } from "./state-CPQXJ4Ct.js";
+import { e as m, n as c } from "./ref-BCGCor-j.js";
+import { e as v } from "./class-map-Dw6Wrxwi.js";
 import { e as T, i as b, t as a } from "./directive-oAbCiebi.js";
-import { f as y, m as w } from "./directive-helpers-r-kOS_Mf.js";
-import { P as C } from "./input-element-NnrDmp4r.js";
+import { f as y, m as w } from "./directive-helpers-cAOIHg9K.js";
+import { P as C } from "./input-element-DQOVrqUZ.js";
 import { P as E } from "./pkt-slot-controller-BPGj-LC5.js";
-import "./input-wrapper-Dr__Sxql.js";
-import "./icon-CC1js8eR.js";
+import "./input-wrapper-D_JdEqcO.js";
+import "./icon-B1-mkmwB.js";
 /**
  * @license
  * Copyright 2020 Google LLC

package/dist/{textarea-CPXsMFUq.cjs → textarea-CXu8UUsY.cjs}

@@ -1,4 +1,4 @@
-"use strict";const s=require("./element-6DBpyGQm.cjs"),p=require("./if-defined-Cni-RHLS.cjs"),c=require("./state-DPobt-Yz.cjs"),l=require("./ref-iJtiv3o2.cjs"),$=require("./class-map-BBG2gMX4.cjs"),a=require("./directive-C7oCP5Bh.cjs"),d=require("./directive-helpers-BBbxqP2W.cjs"),x=require("./input-element-C4xJoM-X.cjs"),T=require("./pkt-slot-controller-BzddBp7z.cjs");require("./input-wrapper-CZ-a00V7.cjs");require("./icon-B_ryAy4Q.cjs");/**
+"use strict";const s=require("./element-D62wHiNU.cjs"),p=require("./if-defined-CkVc_RJD.cjs"),c=require("./state-BkE_Rxl7.cjs"),l=require("./ref-BfgcOXko.cjs"),$=require("./class-map-CG3vIaNm.cjs"),a=require("./directive-C7oCP5Bh.cjs"),d=require("./directive-helpers-_qHew-gi.cjs"),x=require("./input-element-Y8sdrq9C.cjs"),T=require("./pkt-slot-controller-BzddBp7z.cjs");require("./input-wrapper-C9rZEgju.cjs");require("./icon-__Hjt2XZ.cjs");/**
  * @license
  * Copyright 2020 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause

package/dist/{textinput-aNI5kibM.cjs → textinput-C6wccDhZ.cjs}

@@ -1,4 +1,4 @@
-"use strict";const t=require("./element-6DBpyGQm.cjs"),a=require("./if-defined-Cni-RHLS.cjs"),l=require("./state-DPobt-Yz.cjs"),h=require("./ref-iJtiv3o2.cjs"),c=require("./class-map-BBG2gMX4.cjs"),d=require("./input-element-C4xJoM-X.cjs"),x=require("./pkt-slot-controller-BzddBp7z.cjs");require("./input-wrapper-CZ-a00V7.cjs");require("./icon-B_ryAy4Q.cjs");var $=Object.defineProperty,f=Object.getOwnPropertyDescriptor,r=(u,i,s,n)=>{for(var e=n>1?void 0:n?f(i,s):i,o=u.length-1,p;o>=0;o--)(p=u[o])&&(e=(n?p(i,s,e):p(e))||e);return n&&e&&$(i,s,e),e};exports.PktTextinput=class extends d.PktInputElement{constructor(){super(),this.inputRef=h.e(),this.helptextSlot=h.e(),this.value="",this.type="text",this.size=null,this.autocomplete=null,this.iconNameRight=null,this.prefix=null,this.suffix=null,this.omitSearchIcon=!1,this.counterCurrent=0,this.slotController=new x.PktSlotController(this,this.helptextSlot)}attributeChangedCallback(i,s,n){i==="value"&&this.value!==s&&(this.counterCurrent=n?n.length:0,this.valueChanged(n,s)),super.attributeChangedCallback(i,s,n)}updated(i){var s;super.updated(i),i.has("value")&&(this.counterCurrent=((s=this.value)==null?void 0:s.length)||0,this.valueChanged(this.value,i.get("value"))),i.has("id")&&!this.name&&this.id&&(this.name=this.id)}render(){const i=this.type==="search"&&!this.iconNameRight&&!this.omitSearchIcon,s=c.e({"pkt-input":!0,"pkt-input--fullwidth":this.fullwidth,"pkt-input--counter-error":this.counter&&this.counterMaxLength&&this.value.length&&this.value.length>this.counterMaxLength}),n=this.ariaLabelledby||`${this.id}-input-label`;return t.x`
+"use strict";const t=require("./element-D62wHiNU.cjs"),a=require("./if-defined-CkVc_RJD.cjs"),l=require("./state-BkE_Rxl7.cjs"),h=require("./ref-BfgcOXko.cjs"),c=require("./class-map-CG3vIaNm.cjs"),d=require("./input-element-Y8sdrq9C.cjs"),x=require("./pkt-slot-controller-BzddBp7z.cjs");require("./input-wrapper-C9rZEgju.cjs");require("./icon-__Hjt2XZ.cjs");var $=Object.defineProperty,f=Object.getOwnPropertyDescriptor,r=(u,i,s,n)=>{for(var e=n>1?void 0:n?f(i,s):i,o=u.length-1,p;o>=0;o--)(p=u[o])&&(e=(n?p(i,s,e):p(e))||e);return n&&e&&$(i,s,e),e};exports.PktTextinput=class extends d.PktInputElement{constructor(){super(),this.inputRef=h.e(),this.helptextSlot=h.e(),this.value="",this.type="text",this.size=null,this.autocomplete=null,this.iconNameRight=null,this.prefix=null,this.suffix=null,this.omitSearchIcon=!1,this.counterCurrent=0,this.slotController=new x.PktSlotController(this,this.helptextSlot)}attributeChangedCallback(i,s,n){i==="value"&&this.value!==s&&(this.counterCurrent=n?n.length:0,this.valueChanged(n,s)),super.attributeChangedCallback(i,s,n)}updated(i){var s;super.updated(i),i.has("value")&&(this.counterCurrent=((s=this.value)==null?void 0:s.length)||0,this.valueChanged(this.value,i.get("value"))),i.has("id")&&!this.name&&this.id&&(this.name=this.id)}render(){const i=this.type==="search"&&!this.iconNameRight&&!this.omitSearchIcon,s=c.e({"pkt-input":!0,"pkt-input--fullwidth":this.fullwidth,"pkt-input--counter-error":this.counter&&this.counterMaxLength&&this.value.length&&this.value.length>this.counterMaxLength}),n=this.ariaLabelledby||`${this.id}-input-label`;return t.x`
       <pkt-input-wrapper
         label="${this.label}"
         ?counter=${this.counter}

package/dist/{textinput-DjPhmmkB.js → textinput-CmZrfH4A.js}

@@ -1,12 +1,12 @@
-import { E as p, x as h, n as a, a as $ } from "./element-CgEWt74-.js";
-import { o as u } from "./if-defined-CmuO4Vz9.js";
-import { r as f } from "./state-Bo2bck5_.js";
-import { e as d, n as m } from "./ref-BBYSqgeW.js";
-import { e as g } from "./class-map-BpTj9gtz.js";
-import { P as x } from "./input-element-NnrDmp4r.js";
+import { E as p, x as h, n as a, a as $ } from "./element-DJZPsA_J.js";
+import { o as u } from "./if-defined-D3lgJqT7.js";
+import { r as f } from "./state-CPQXJ4Ct.js";
+import { e as d, n as m } from "./ref-BCGCor-j.js";
+import { e as g } from "./class-map-Dw6Wrxwi.js";
+import { P as x } from "./input-element-DQOVrqUZ.js";
 import { P as v } from "./pkt-slot-controller-BPGj-LC5.js";
-import "./input-wrapper-Dr__Sxql.js";
-import "./icon-CC1js8eR.js";
+import "./input-wrapper-D_JdEqcO.js";
+import "./icon-B1-mkmwB.js";
 var y = Object.defineProperty, b = Object.getOwnPropertyDescriptor, o = (i, e, r, t) => {
   for (var n = t > 1 ? void 0 : t ? b(e, r) : e, l = i.length - 1, c; l >= 0; l--)
     (c = i[l]) && (n = (t ? c(e, r, n) : c(n)) || n);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oslokommune/punkt-elements",
-  "version": "13.5.13",
+  "version": "13.6.1",
   "description": "Komponentbiblioteket til Punkt, et designsystem laget av Oslo Origo",
   "homepage": "https://punkt.oslo.kommune.no",
   "author": "Team Designsystem, Oslo Origo",
@@ -30,7 +30,6 @@
     "date-fns": "^4.1.0",
     "dialog-polyfill": "^0.5.6",
     "lit": "^3.3.0",
-    "react-dom": ">=18.2.22",
     "urlpattern-polyfill": "^10.0.0",
     "whatwg-fetch": "^3.6.19"
   },
@@ -73,5 +72,5 @@
     "url": "https://github.com/oslokommune/punkt/issues"
   },
   "license": "MIT",
-  "gitHead": "1a1aad782fd8d6b632557869c3c4cd9ad2f663cf"
+  "gitHead": "3016e48a2ffc0729b356d8fcea8ac7a541396fb2"
 }

package/src/components/accordion/accordionitem.ts

@@ -17,7 +17,7 @@ import { ifDefined } from 'lit/directives/if-defined.js'
 export interface IPktAccordionItem {
   defaultOpen?: boolean
   id: string
-  title: string | React.ReactNode
+  title: string
   skin?: TPktAccordionSkin
   compact?: boolean
   isOpen?: boolean

package/src/components/datepicker/date-tags.test.ts

@@ -0,0 +1,126 @@
+import '@testing-library/jest-dom'
+import { axe, toHaveNoViolations } from 'jest-axe'
+import { vi } from 'vitest'
+import { createElementTest, BaseTestConfig } from '../../tests/test-framework'
+import './date-tags'
+import { PktDateTags } from './date-tags'
+
+expect.extend(toHaveNoViolations)
+
+export interface IDateTagsTest extends BaseTestConfig {
+  dates?: string[]
+  idBase?: string
+  className?: string
+  dateformat?: string
+}
+
+export const createDateTagsTest = async (config: IDateTagsTest = {}) => {
+  const { container, element } = await createElementTest('pkt-date-tags' as any, config)
+
+  return {
+    container,
+    dateTags: element as PktDateTags,
+  }
+}
+
+afterEach(() => {
+  document.body.innerHTML = ''
+})
+
+describe('PktDateTags', () => {
+  test('renders nothing when no dates provided', async () => {
+    const { dateTags } = await createDateTagsTest()
+    await dateTags.updateComplete
+
+    expect(dateTags.querySelectorAll('time').length).toBe(0)
+  })
+
+  test('renders provided ISO dates and formats them', async () => {
+    const iso = '2025-09-17'
+    const { dateTags } = await createDateTagsTest()
+
+    dateTags.dates = [iso]
+    dateTags.idBase = 'base-'
+    await dateTags.updateComplete
+
+    const time = dateTags.querySelector('time')
+    expect(time).toBeTruthy()
+    expect(time?.getAttribute('datetime')).toBe(iso)
+
+    expect(time?.textContent?.trim()).toBe('17.09.2025')
+
+    const tag = dateTags.querySelector('pkt-tag')
+    expect(tag).toBeTruthy()
+    expect(tag?.id).toBe(`base-${iso}-tag`)
+  })
+
+  test('applies custom unicode-style dateformat', async () => {
+    const iso = '2025-09-17'
+    const { dateTags } = await createDateTagsTest()
+
+    dateTags.dates = [iso]
+    dateTags.dateformat = 'yyyy/MM/dd'
+    await dateTags.updateComplete
+
+    const time = dateTags.querySelector('time')
+    expect(time).toBeTruthy()
+    expect(time?.textContent?.trim()).toBe('2025/09/17')
+  })
+
+  test('normalizes overflow ISO dates (e.g. 2025-02-30 -> 02.03.2025)', async () => {
+    const iso = '2025-02-30'
+    const { dateTags } = await createDateTagsTest()
+
+    dateTags.dates = [iso]
+    await dateTags.updateComplete
+
+    const time = dateTags.querySelector('time')
+    expect(time).toBeTruthy()
+
+    // JS Date normalizes invalid dates; 2025-02-30 becomes 02.03.2025
+    expect(time?.textContent?.trim()).toBe('02.03.2025')
+  })
+
+  test('Moment-style tokens (DD.MM.YYYY) do not match date-fns tokens', async () => {
+    const iso = '2025-09-17'
+    const { dateTags } = await createDateTagsTest()
+
+    // Moment-style tokens are uppercase; date-fns expects lowercase (yyyy, dd)
+    dateTags.dates = [iso]
+    dateTags.dateformat = 'DD.MM.YYYY'
+
+    const spyWarn = vi.spyOn(console, 'warn').mockImplementation(() => {})
+    try {
+      await expect(dateTags.updateComplete).rejects.toThrow(/Use `dd` instead of `DD`/)
+    } finally {
+      spyWarn.mockRestore()
+    }
+  })
+
+  test('emits date-tag-removed when child pkt-tag dispatches close', async () => {
+    const iso = '2025-09-17'
+    const { dateTags } = await createDateTagsTest()
+    dateTags.dates = [iso]
+    await dateTags.updateComplete
+
+    const handler = vi.fn()
+    dateTags.addEventListener('date-tag-removed', (e: any) => handler(e.detail))
+
+    const tag = dateTags.querySelector('pkt-tag')
+    expect(tag).toBeTruthy()
+
+    // Simulate close event on child tag
+    tag?.dispatchEvent(new CustomEvent('close', { bubbles: true, composed: true }))
+
+    expect(handler).toHaveBeenCalledWith(iso)
+  })
+
+  test('is accessible (WCAG) with dates', async () => {
+    const iso = '2025-09-17'
+    const { container } = await createDateTagsTest({ dates: [iso] })
+
+    // Run axe on the rendered container
+    const results = await axe(container)
+    expect(results).toHaveNoViolations()
+  })
+})

package/src/components/datepicker/date-tags.ts

@@ -0,0 +1,59 @@
+import { PktElement } from '@/base-elements/element'
+import { html, nothing } from 'lit'
+import { customElement, property } from 'lit/decorators.js'
+import { classMap } from 'lit/directives/class-map.js'
+import { repeat } from 'lit/directives/repeat.js'
+
+import '@/components/tag'
+import { fromISOtoLocal } from '@/utils/dateutils'
+import { uuidish } from '@/utils/stringutils'
+
+type TYear = `${number}${number}${number}${number}`
+type TMonth = `${number}${number}`
+type TDay = `${number}${number}`
+export type TISODate = `${TYear}-${TMonth}-${TDay}`
+
+/**
+ * OBS! `dateformat` er standard formatteringsstreng for visning av datoer.
+ * Denne brukes for å sette "menneskeleselig" format på datoene i tags.
+ *
+ * Følger denne unicode-standarden:
+ * https://www.unicode.org/reports/tr35/tr35-dates.html#Date_Field_Symbol_Table
+ */
+
+@customElement('pkt-date-tags')
+export class PktDateTags extends PktElement {
+  @property({ type: Array }) dates: TISODate[] = []
+  @property({ type: String }) dateformat: string = 'dd.MM.yyyy' // se kommentar over
+  @property({ type: String, attribute: 'class' }) className: string = 'pkt-datepicker__tags'
+  @property({ type: String, attribute: 'id-base' }) idBase: string = uuidish()
+
+  render() {
+    this.classes = {
+      'pkt-date-tags': true,
+      [this.className]: true,
+    }
+
+    return html`
+      <div class=${classMap(this.classes)} aria-live="polite">
+        ${Array.isArray(this.dates) && !!this.dates[0]
+          ? repeat(
+              (this.dates ?? []).filter(Boolean).sort(),
+              (date) => date,
+              (date) =>
+                html` <pkt-tag
+                  id=${this.idBase + date + '-tag'}
+                  closeTag
+                  @close=${() => {
+                    this.dispatchEvent(new CustomEvent('date-tag-removed', { detail: date }))
+                  }}
+                  .ariaLabel=${`${this.strings?.calendar.deleteDate} ${fromISOtoLocal(date, this.dateformat)}`}
+                >
+                  <time datetime=${date}>${fromISOtoLocal(date, this.dateformat)}</time>
+                </pkt-tag>`,
+            )
+          : nothing}
+      </div>
+    `
+  }
+}

package/src/components/datepicker/datepicker.ts

@@ -1,24 +1,17 @@
 import { classMap } from 'lit/directives/class-map.js'
 import { ifDefined } from 'lit/directives/if-defined.js'
 import { customElement, property, state } from 'lit/decorators.js'
-import {
-  formatISODate,
-  fromISOToDate,
-  fromISOtoLocal,
-  newDate,
-  parseISODateString,
-} from '@/utils/dateutils'
+import { formatISODate, fromISOToDate, newDate, parseISODateString } from '@/utils/dateutils'
 import { html, nothing, PropertyValues } from 'lit'
 import { PktCalendar } from '@/components/calendar/calendar'
 import { PktInputElement } from '@/base-elements/input-element'
 import { Ref, createRef, ref } from 'lit/directives/ref.js'
-import { repeat } from 'lit/directives/repeat.js'
 import converters from '@/helpers/converters'
 import specs from 'componentSpecs/datepicker.json'
 import '@/components/calendar'
 import '@/components/icon'
 import '@/components/input-wrapper'
-import '@/components/tag'
+import './date-tags'
 import { PktSlotController } from '@/controllers/pkt-slot-controller'
 
 const sleep = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms))
@@ -527,31 +520,6 @@ export class PktDatepicker extends PktInputElement {
     `
   }
 
-  renderTags() {
-    return html`
-      <div class="pkt-datepicker__tags" aria-live="polite">
-        ${!!this._value[0]
-          ? repeat(
-              (this._value ?? []).filter(Boolean).sort(),
-              (date) => date,
-              (date) => html`
-                <pkt-tag
-                  .id="${this.id + date + '-tag'}"
-                  closeTag
-                  ariaLabel="${this.strings.calendar.deleteDate} ${fromISOtoLocal(
-                    date,
-                    this.dateformat,
-                  )}"
-                  @close=${() => this.calRef.value?.handleDateSelect(fromISOToDate(date))}
-                  ><time datetime="${date}">${fromISOtoLocal(date, this.dateformat)}</time></pkt-tag
-                >
-              `,
-            )
-          : nothing}
-      </div>
-    `
-  }
-
   renderCalendar() {
     return html`<div
       class="pkt-calendar-popup pkt-${this.calendarOpen ? 'show' : 'hide'}"
@@ -651,7 +619,17 @@ export class PktDatepicker extends PktInputElement {
         class="pkt-datepicker"
       >
         <div class="pkt-contents" ${ref(this.helptextSlot)} name="helptext" slot="helptext"></div>
-        ${this.multiple ? this.renderTags() : nothing}
+        ${this.multiple
+          ? html`<pkt-date-tags
+              .dates=${this._value}
+              dateformat=${this.dateformat}
+              strings=${this.strings}
+              id-base=${this.id}
+              @date-tag-removed=${(e: CustomEvent) => {
+                this.calRef.value?.handleDateSelect(fromISOToDate(e.detail))
+              }}
+            ></pkt-date-tags>`
+          : nothing}
         <div
           class="pkt-datepicker__inputs ${this.range && this.showRangeLabels
             ? 'pkt-input__range-inputs'

package/src/components/index.ts

@@ -9,6 +9,7 @@ export { PktCombobox } from './combobox'
 export { PktConsent } from './consent'
 export { PktCheckbox } from '@/components/checkbox'
 export { PktComponent } from '../base-elements/component-template.js'
+export { PktDateTags } from '@/components/datepicker/date-tags.js'
 export { PktDatepicker } from '@/components/datepicker/datepicker.js'
 export { PktHelptext } from '@/components/helptext'
 export { PktHeading } from '@/components/heading'

package/dist/datepicker-DonUad47.cjs

@@ -1,164 +0,0 @@
-"use strict";const d=require("./class-map-BBG2gMX4.cjs"),h=require("./if-defined-Cni-RHLS.cjs"),s=require("./element-6DBpyGQm.cjs"),v=require("./state-DPobt-Yz.cjs"),o=require("./calendar-32W9p9uc.cjs"),m=require("./input-element-C4xJoM-X.cjs"),r=require("./ref-iJtiv3o2.cjs"),y=require("./repeat-CDsZqct8.cjs");require("./icon-B_ryAy4Q.cjs");require("./input-wrapper-CZ-a00V7.cjs");require("./tag-Bbs0U_Au.cjs");const k=require("./pkt-slot-controller-BzddBp7z.cjs"),$={dateformat:{default:"dd.MM.yyyy"},min:{default:null},max:{default:null},weeknumbers:{default:!1},withcontrols:{default:!1},multiple:{default:!1},range:{default:!1}},p={props:$};var b=Object.defineProperty,x=Object.getOwnPropertyDescriptor,n=(c,t,e,i)=>{for(var a=i>1?void 0:i?x(t,e):t,l=c.length-1,u;l>=0;l--)(u=c[l])&&(a=(i?u(t,e,a):u(a))||a);return i&&a&&b(t,e,a),a};const g=c=>new Promise(t=>setTimeout(t,c));exports.PktDatepicker=class extends m.PktInputElement{constructor(){super(),this._valueProperty="",this._value=[],this.label="Datovelger",this.dateformat=p.props.dateformat.default,this.multiple=p.props.multiple.default,this.maxlength=null,this.range=p.props.range.default,this.showRangeLabels=!1,this.min=null,this.max=null,this.weeknumbers=p.props.weeknumbers.default,this.withcontrols=p.props.withcontrols.default,this.excludedates=[],this.excludeweekdays=[],this.currentmonth=null,this.calendarOpen=!1,this.timezone="Europe/Oslo",this.inputClasses={},this.buttonClasses={},this.inputRef=r.e(),this.inputRefTo=r.e(),this.btnRef=r.e(),this.calRef=r.e(),this.popupRef=r.e(),this.helptextSlot=r.e(),this.addToSelected=t=>{const e=t.target;if(!e.value)return;const i=this.min?o.newDate(this.min):null,a=this.max?o.newDate(this.max):null,l=o.newDate(e.value.split(",")[0]);l&&!isNaN(l.getTime())&&(!i||l>=i)&&(!a||l<=a)&&this.calRef.value&&this.calRef.value.handleDateSelect(l),e.value=""},this.slotController=new k.PktSlotController(this,this.helptextSlot)}get value(){return this._valueProperty}set value(t){const e=this._valueProperty;this._valueProperty=Array.isArray(t)?t.join(","):t||"",this.valueChanged(this._valueProperty,e),this.requestUpdate("value",e)}async connectedCallback(){super.connectedCallback();const t=navigator.userAgent,e=/iP(hone|od|ad)/.test(t);this.inputType=e?"text":"date",document&&document.body.addEventListener("click",i=>{var a,l;(a=this.inputRef)!=null&&a.value&&((l=this.btnRef)!=null&&l.value)&&!this.inputRef.value.contains(i.target)&&!(this.inputRefTo.value&&this.inputRefTo.value.contains(i.target))&&!this.btnRef.value.contains(i.target)&&!i.target.closest(".pkt-calendar-popup")&&this.calendarOpen&&(this.onBlur(),this.hideCalendar())}),document&&document.body.addEventListener("keydown",i=>{i.key==="Escape"&&this.calendarOpen&&this.hideCalendar()}),this.value&&(this._value=Array.isArray(this.value)?this.value.filter(Boolean):this.value.split(",").filter(Boolean)),this.min=this.min||p.props.min.default,this.max=this.max||p.props.max.default,typeof this.excludedates=="string"&&(this.excludedates=this.excludedates.split(",")),typeof this.excludeweekdays=="string"&&(this.excludeweekdays=this.excludeweekdays.split(",")),(this.multiple||this.range)&&this.name&&!this.name.endsWith("[]")&&(this.name=this.name+"[]"),this.calendarOpen&&(await g(20),this.handleCalendarPosition())}disconnectedCallback(){super.disconnectedCallback(),document&&document.body.removeEventListener("click",t=>{var e,i;(e=this.inputRef)!=null&&e.value&&((i=this.btnRef)!=null&&i.value)&&!this.inputRef.value.contains(t.target)&&!this.btnRef.value.contains(t.target)&&this.hideCalendar()})}onInput(){this.dispatchEvent(new Event("input",{bubbles:!0}))}valueChanged(t,e){if(t===e)return;let i=[];t&&(typeof t=="string"?i=t.split(",").filter(Boolean):i=String(t).split(",").filter(Boolean)),this._value=i;const a=i.join(",");this._valueProperty!==a&&(this._valueProperty=a),super.valueChanged(a,e)}attributeChangedCallback(t,e,i){t==="value"&&this.value!==e&&this.valueChanged(i,e),t==="excludedates"&&typeof this.excludedates=="string"&&(this.excludedates=(i==null?void 0:i.split(","))??[]),t==="excludeweekdays"&&typeof this.excludeweekdays=="string"&&(this.excludeweekdays=(i==null?void 0:i.split(","))??[]),super.attributeChangedCallback(t,e,i)}updated(t){if(t.has("value")){const e=Array.isArray(this.value)?this.value.join(","):this.value,i=t.get("value"),a=Array.isArray(i)?i.join(","):i;this.valueChanged(e,a)}t.has("multiple")&&(this.multiple&&!Array.isArray(this._value)?this._value=typeof this.value=="string"?this.value?this.value.split(",").filter(Boolean):[]:[]:!this.multiple&&Array.isArray(this._value)&&(this._value=this._value.filter(Boolean)),!this.multiple&&!this.range&&Array.isArray(this._value)&&(this._value=[this._value[0]??""])),super.updated(t)}renderInput(){return s.x`
-      <input
-        class="${d.e(this.inputClasses)}"
-        .type=${this.inputType}
-        id="${this.id}-input"
-        .value=${this._value[0]??""}
-        min=${h.o(this.min)}
-        max=${h.o(this.max)}
-        placeholder=${h.o(this.placeholder)}
-        ?readonly=${this.readonly}
-        aria-describedby="${this.id}-helptext"
-        @click=${t=>{t.preventDefault(),this.showCalendar()}}
-        ?disabled=${this.disabled}
-        @keydown=${t=>{var e,i;if(t.key===","&&((e=this.inputRef.value)==null||e.blur()),(t.key==="Space"||t.key===" ")&&(t.preventDefault(),this.toggleCalendar(t)),t.key==="Enter"){const a=this.internals.form;a?a.requestSubmit():(i=this.inputRef.value)==null||i.blur()}}}
-        @input=${t=>{this.onInput(),t.stopImmediatePropagation()}}
-        @focus=${()=>{this.onFocus(),this.isMobileSafari&&this.showCalendar()}}
-        @blur=${t=>{var e;(e=this.calRef.value)!=null&&e.contains(t.relatedTarget)||this.onBlur(),this.manageValidity(t.target),this.value=t.target.value}}
-        @change=${t=>{this.touched=!0,t.stopImmediatePropagation()}}
-        ${r.n(this.inputRef)}
-      />
-    `}renderRangeInput(){const t={"pkt-input-prefix":this.showRangeLabels,"pkt-hide":!this.showRangeLabels};return s.x`
-      ${this.showRangeLabels?s.x` <div class="pkt-input-prefix">${this.strings.generic.from}</div> `:s.E}
-      <input
-        class=${d.e(this.inputClasses)}
-        .type=${this.inputType}
-        id="${this.id}-input"
-        .value=${this._value[0]??""}
-        min=${h.o(this.min)}
-        max=${h.o(this.max)}
-        placeholder=${h.o(this.placeholder)}
-        ?readonly=${this.readonly}
-        ?disabled=${this.disabled}
-        @click=${e=>{e.preventDefault(),this.showCalendar()}}
-        @keydown=${e=>{var i,a;if(e.key===","&&((i=this.inputRef.value)==null||i.blur()),(e.key==="Space"||e.key===" ")&&(e.preventDefault(),this.toggleCalendar(e)),e.key==="Enter"){const l=this.internals.form;l?l.requestSubmit():(a=this.inputRefTo.value)==null||a.focus()}}}
-        @input=${e=>{this.onInput(),e.stopImmediatePropagation()}}
-        @focus=${()=>{this.onFocus(),this.isMobileSafari&&this.showCalendar()}}
-        @blur=${e=>{var i,a;if(e.target.value){this.manageValidity(e.target);const l=o.fromISOToDate(e.target.value);l&&this._value[0]!==e.target.value&&this._value[1]&&(this.clearInputValue(),(a=(i=this.calRef)==null?void 0:i.value)==null||a.handleDateSelect(l))}else this._value[0]&&this.clearInputValue()}}
-        @change=${e=>{e.stopImmediatePropagation()}}
-        ${r.n(this.inputRef)}
-      />
-      <div class="${d.e(t)}" id="${this.id}-to-label">
-        ${this.strings.generic.to}
-      </div>
-      ${this.showRangeLabels?s.E:s.x` <div class="pkt-input-separator">–</div> `}
-      <input
-        class=${d.e(this.inputClasses)}
-        .type=${this.inputType}
-        id="${this.id}-to"
-        aria-labelledby="${this.id}-to-label"
-        .value=${this._value[1]??""}
-        min=${h.o(this.min)}
-        max=${h.o(this.max)}
-        placeholder=${h.o(this.placeholder)}
-        ?readonly=${this.readonly}
-        ?disabled=${this.disabled}
-        @click=${e=>{e.preventDefault(),this.showCalendar()}}
-        @keydown=${e=>{var i,a;if(e.key===","&&((i=this.inputRefTo.value)==null||i.blur()),(e.key==="Space"||e.key===" ")&&(e.preventDefault(),this.toggleCalendar(e)),e.key==="Enter"){const l=this.internals.form;l?l.requestSubmit():(a=this.inputRefTo.value)==null||a.blur()}}}
-        @input=${e=>{this.onInput(),e.stopImmediatePropagation()}}
-        @focus=${()=>{this.onFocus(),this.isMobileSafari&&this.showCalendar()}}
-        @blur=${e=>{var i,a,l;if((i=this.calRef.value)!=null&&i.contains(e.relatedTarget)||this.onBlur(),e.target.value){this.manageValidity(e.target);const u=e.target.value;this.min&&this.min>u?this.internals.setValidity({rangeUnderflow:!0},this.strings.forms.messages.rangeUnderflow,e.target):this.max&&this.max<u&&this.internals.setValidity({rangeOverflow:!0},this.strings.forms.messages.rangeOverflow,e.target);const f=o.fromISOToDate(e.target.value);f&&this._value[1]!==o.formatISODate(f)&&((l=(a=this.calRef)==null?void 0:a.value)==null||l.handleDateSelect(f))}}}
-        @change=${e=>{this.touched=!0,e.stopImmediatePropagation()}}
-        ${r.n(this.inputRefTo)}
-      />
-    `}renderMultipleInput(){return s.x`
-      <input
-        class=${d.e(this.inputClasses)}
-        .type=${this.inputType}
-        id="${this.id}-input"
-        min=${h.o(this.min)}
-        max=${h.o(this.max)}
-        placeholder=${h.o(this.placeholder)}
-        ?readonly=${this.readonly}
-        ?disabled=${this.disabled||this.maxlength&&this._value.length>=this.maxlength}
-        @click=${t=>{t.preventDefault(),this.showCalendar()}}
-        @blur=${t=>{var e;(e=this.calRef.value)!=null&&e.contains(t.relatedTarget)||this.onBlur(),this.addToSelected(t)}}
-        @input=${t=>{this.onInput(),t.stopImmediatePropagation()}}
-        @focus=${()=>{this.onFocus(),this.isMobileSafari&&this.showCalendar()}}
-        @keydown=${t=>{var e;if(t.key===","&&(t.preventDefault(),this.addToSelected(t)),(t.key==="Space"||t.key===" ")&&(t.preventDefault(),this.toggleCalendar(t)),t.key==="Enter"){const i=this.internals.form;i?i.requestSubmit():(e=this.inputRef.value)==null||e.blur()}}}
-        @change=${t=>{this.touched=!0,t.stopImmediatePropagation()}}
-        ${r.n(this.inputRef)}
-      />
-    `}renderTags(){return s.x`
-      <div class="pkt-datepicker__tags" aria-live="polite">
-        ${this._value[0]?y.c((this._value??[]).filter(Boolean).sort(),t=>t,t=>s.x`
-                <pkt-tag
-                  .id="${this.id+t+"-tag"}"
-                  closeTag
-                  ariaLabel="${this.strings.calendar.deleteDate} ${o.fromISOtoLocal(t,this.dateformat)}"
-                  @close=${()=>{var e;return(e=this.calRef.value)==null?void 0:e.handleDateSelect(o.fromISOToDate(t))}}
-                  ><time datetime="${t}">${o.fromISOtoLocal(t,this.dateformat)}</time></pkt-tag
-                >
-              `):s.E}
-      </div>
-    `}renderCalendar(){return s.x`<div
-      class="pkt-calendar-popup pkt-${this.calendarOpen?"show":"hide"}"
-      @focusout=${t=>{this.calendarOpen&&this.handleFocusOut(t)}}
-      id="${this.id}-popup"
-      ${r.n(this.popupRef)}
-    >
-      <pkt-calendar
-        id="${this.id}-calendar"
-        ?multiple=${this.multiple}
-        ?range=${this.range}
-        ?weeknumbers=${this.weeknumbers}
-        ?withcontrols=${this.withcontrols}
-        .maxMultiple=${this.maxlength}
-        .selected=${this._value}
-        .earliest=${this.min}
-        .latest=${this.max}
-        .excludedates=${Array.isArray(this.excludedates)?this.excludedates:this.excludedates.split(",")}
-        .excludeweekdays=${this.excludeweekdays}
-        .currentmonth=${this.currentmonth?o.parseISODateString(this.currentmonth):null}
-        @date-selected=${t=>{this.value=!this.multiple&&!this.range?t.detail[0]:Array.isArray(t.detail)?t.detail.join(","):t.detail,this._value=t.detail,this.inputRef.value&&(this.range&&this.inputRefTo.value?(this.inputRef.value.value=this._value[0]??"",this.inputRefTo.value.value=this._value[1]??"",this.manageValidity(this.inputRef.value),this.manageValidity(this.inputRefTo.value)):this.multiple||(this.inputRef.value.value=this._value.length?this._value[0]:"",this.manageValidity(this.inputRef.value)))}}
-        @close=${()=>{this.onBlur(),this.hideCalendar()}}
-        ${r.n(this.calRef)}
-      ></pkt-calendar>
-    </div>`}render(){return this.inputClasses={"pkt-input":!0,"pkt-datepicker__input":!0,"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":!0,"pkt-btn":!0,"pkt-btn--icon-only":!0,"pkt-btn--tertiary":!0,"pkt-datepicker__calendar-button":!0},s.x`
-      <pkt-input-wrapper
-        label="${this.label}"
-        forId="${this.id}-input"
-        ?counter=${this.multiple&&!!this.maxlength}
-        .counterCurrent=${this.value?this._value.length:0}
-        .counterMaxLength=${this.maxlength}
-        ?disabled=${this.disabled}
-        ?hasError=${this.hasError}
-        ?hasFieldset=${this.hasFieldset}
-        ?inline=${this.inline}
-        ?required=${this.required}
-        ?optionalTag=${this.optionalTag}
-        ?requiredTag=${this.requiredTag}
-        ?useWrapper=${this.useWrapper}
-        .optionalText=${this.optionalText}
-        .requiredText=${this.requiredText}
-        .tagText=${this.tagText}
-        .errorMessage=${this.errorMessage}
-        .helptext=${this.helptext}
-        .helptextDropdown=${this.helptextDropdown}
-        .helptextDropdownButton=${this.helptextDropdownButton}
-        .ariaDescribedBy=${this.ariaDescribedBy}
-        class="pkt-datepicker"
-      >
-        <div class="pkt-contents" ${r.n(this.helptextSlot)} name="helptext" slot="helptext"></div>
-        ${this.multiple?this.renderTags():s.E}
-        <div
-          class="pkt-datepicker__inputs ${this.range&&this.showRangeLabels?"pkt-input__range-inputs":""}"
-        >
-          <div class="pkt-input__container">
-            ${this.range?this.renderRangeInput():this.multiple?this.renderMultipleInput():this.renderInput()}
-            <button
-              class="${d.e(this.buttonClasses)}"
-              type="button"
-              @click=${this.toggleCalendar}
-              @keydown=${t=>{(t.key==="Enter"||t.key===" "||t.key==="Space")&&(t.preventDefault(),this.toggleCalendar(t))}}
-              ?disabled=${this.disabled}
-              ${r.n(this.btnRef)}
-            >
-              <pkt-icon name="calendar"></pkt-icon>
-              <span class="pkt-btn__text">${this.strings.calendar.buttonAltText}</span>
-            </button>
-          </div>
-        </div>
-      </pkt-input-wrapper>
-      ${this.renderCalendar()}
-    `}handleCalendarPosition(){var t;if(this.popupRef.value&&this.inputRef.value){const e=this.multiple&&!!this.maxlength,i=((t=this.inputRef.value.parentElement)==null?void 0:t.getBoundingClientRect())||this.inputRef.value.getBoundingClientRect(),a=e?i.height+30:i.height,l=this.popupRef.value.getBoundingClientRect().height;let u=e?"calc(100% - 30px)":"100%";i&&i.top+l>window.innerHeight&&i.top-l>0&&(u=`calc(100% - ${a}px - ${l}px)`),this.popupRef.value.style.top=u}}handleFocusOut(t){this.contains(t.target)||(this.onBlur(),this.hideCalendar())}async showCalendar(){var t;this.calendarOpen=!0,await g(20),this.handleCalendarPosition(),this.isMobileSafari&&((t=this.calRef.value)==null||t.focusOnCurrentDate())}hideCalendar(){this.calendarOpen=!1}async toggleCalendar(t){t.preventDefault(),this.calendarOpen?this.hideCalendar():this.showCalendar()}clearInputValue(){this._value=[],this.value=""}};n([s.n({type:String,reflect:!0})],exports.PktDatepicker.prototype,"value",1);n([s.n({type:Array})],exports.PktDatepicker.prototype,"_value",2);n([s.n({type:String,reflect:!0})],exports.PktDatepicker.prototype,"label",2);n([s.n({type:String})],exports.PktDatepicker.prototype,"dateformat",2);n([s.n({type:Boolean,reflect:!0})],exports.PktDatepicker.prototype,"multiple",2);n([s.n({type:Number,reflect:!0})],exports.PktDatepicker.prototype,"maxlength",2);n([s.n({type:Boolean,reflect:!0})],exports.PktDatepicker.prototype,"range",2);n([s.n({type:Boolean})],exports.PktDatepicker.prototype,"showRangeLabels",2);n([s.n({type:String,reflect:!0})],exports.PktDatepicker.prototype,"min",2);n([s.n({type:String,reflect:!0})],exports.PktDatepicker.prototype,"max",2);n([s.n({type:Boolean})],exports.PktDatepicker.prototype,"weeknumbers",2);n([s.n({type:Boolean,reflect:!0})],exports.PktDatepicker.prototype,"withcontrols",2);n([s.n({converter:o.converters.csvToArray})],exports.PktDatepicker.prototype,"excludedates",2);n([s.n({converter:o.converters.csvToArray})],exports.PktDatepicker.prototype,"excludeweekdays",2);n([s.n({type:String})],exports.PktDatepicker.prototype,"currentmonth",2);n([s.n({type:Boolean,reflect:!0})],exports.PktDatepicker.prototype,"calendarOpen",2);n([s.n({type:String})],exports.PktDatepicker.prototype,"timezone",2);n([v.r()],exports.PktDatepicker.prototype,"inputClasses",2);n([v.r()],exports.PktDatepicker.prototype,"buttonClasses",2);exports.PktDatepicker=n([s.t("pkt-datepicker")],exports.PktDatepicker);