@oslokommune/punkt-elements 13.5.13 → 13.6.0

package/dist/pkt-index.js

@@ -1,39 +1,39 @@
 import { P as A } from "./alert-cUBtwi2k.js";
-import { P as B, a as E } from "./accordionitem-C9T3nlM0.js";
-import { P as O } from "./backlink-C2jbzu0U.js";
-import { P as T } from "./button-DhispFOY.js";
-import { c as f } from "./calendar-CJSxvwAq.js";
-import { P as D } from "./calendar-CJSxvwAq.js";
+import { P as w, a as B } from "./accordionitem-C9T3nlM0.js";
+import { P as E } from "./backlink-C2jbzu0U.js";
+import { P as O } from "./button-DhispFOY.js";
+import { c as d } from "./calendar-DJVaC_zI.js";
+import { P as j } from "./calendar-DJVaC_zI.js";
 import { P as G } from "./card-BDz4RWxK.js";
 import { P as K } from "./combobox-BXP1PL0M.js";
 import { P as U } from "./consent-BpcQFvbi.js";
 import { P as q } from "./checkbox-ym7z6cpt.js";
-import { P as k, t as h, x as P, n, a as c } from "./element-CgEWt74-.js";
+import { P as f, t as h, x as P, n, a as c } from "./element-CgEWt74-.js";
 import { P as x } from "./pkt-slot-controller-BPGj-LC5.js";
-import { e as m, n as d } from "./ref-BBYSqgeW.js";
+import { e as m, n as k } from "./ref-BBYSqgeW.js";
 import { e as u } from "./class-map-BpTj9gtz.js";
-import { P as F } from "./datepicker-F3TwE9o7.js";
-import { P as Q } from "./helptext-B7eI0iBQ.js";
-import { P as X } from "./heading-Bdh9absf.js";
-import { P as Z } from "./icon-CC1js8eR.js";
-import { P as et } from "./input-wrapper-Dr__Sxql.js";
-import { P as ot } from "./link-AIyVfcyH.js";
-import { P as at } from "./linkcard-9CNlyT0S.js";
-import { P as it } from "./loader-h3d-3D7s.js";
-import { P as lt } from "./messagebox-C8KQgCl_.js";
-import { P as mt } from "./modal-Zj8yRX3K.js";
+import { P as F, a as J } from "./datepicker-X2o0j5kW.js";
+import { P as V } from "./helptext-B7eI0iBQ.js";
+import { P as Y } from "./heading-Bdh9absf.js";
+import { P as tt } from "./icon-CC1js8eR.js";
+import { P as rt } from "./input-wrapper-Dr__Sxql.js";
+import { P as st } from "./link-AIyVfcyH.js";
+import { P as nt } from "./linkcard-9CNlyT0S.js";
+import { P as pt } from "./loader-h3d-3D7s.js";
+import { P as Pt } from "./messagebox-C8KQgCl_.js";
+import { P as kt } from "./modal-Zj8yRX3K.js";
 import { P as ft } from "./progressbar-Dj_mI_A6.js";
-import { P as ht, P as ct } from "./radiobutton-CWxiIVfA.js";
-import { P as ut } from "./tag-DyXzTY68.js";
-import { P as vt } from "./textarea-BZL8Mkm0.js";
-import { P as bt } from "./textinput-DjPhmmkB.js";
-import { P as $t } from "./select-VpX_cjMM.js";
+import { P as ct, P as xt } from "./radiobutton-CWxiIVfA.js";
+import { P as gt } from "./tag-DyXzTY68.js";
+import { P as St } from "./textarea-BZL8Mkm0.js";
+import { P as Ct } from "./textinput-DjPhmmkB.js";
+import { P as yt } from "./select-VpX_cjMM.js";
 var g = Object.defineProperty, v = Object.getOwnPropertyDescriptor, s = (t, e, i, a) => {
   for (var r = a > 1 ? void 0 : a ? v(e, i) : e, p = t.length - 1, l; p >= 0; p--)
     (l = t[p]) && (r = (a ? l(e, i, r) : l(r)) || r);
   return a && r && g(e, i, r), r;
 };
-let o = class extends k {
+let o = class extends f {
   constructor() {
     super(), this.string = "", this.strings = [], this.darkmode = !1, this._list = [], this.defaultSlot = m(), this.namedSlot = m(), this.slotController = new x(this, this.defaultSlot, this.namedSlot);
   }
@@ -63,11 +63,11 @@ let o = class extends k {
         <div>${this.renderList(this.doStuff(this._list))}</div>
 
         <h2 class="pkt-txt-22">Slot</h2>
-        <div ${d(this.defaultSlot)}>defaultSlotRef</div>
+        <div ${k(this.defaultSlot)}>defaultSlotRef</div>
         <h2 class="pkt-txt-22">Named slot</h2>
         <select
           name="named-slot"
-          ${d(this.namedSlot)}
+          ${k(this.namedSlot)}
           @change=${(e) => alert(e.target.value)}
         >
           namedSlotRef
@@ -108,7 +108,7 @@ s([
   n({ type: String })
 ], o.prototype, "string", 2);
 s([
-  n({ converter: f })
+  n({ converter: d })
 ], o.prototype, "strings", 2);
 s([
   n({ type: Boolean })
@@ -120,32 +120,33 @@ o = s([
   c("pkt-component")
 ], o);
 export {
-  B as PktAccordion,
-  E as PktAccordionItem,
+  w as PktAccordion,
+  B as PktAccordionItem,
   A as PktAlert,
-  O as PktBackLink,
-  T as PktButton,
-  D as PktCalendar,
+  E as PktBackLink,
+  O as PktButton,
+  j as PktCalendar,
   G as PktCard,
   q as PktCheckbox,
   K as PktCombobox,
   o as PktComponent,
   U as PktConsent,
-  F as PktDatepicker,
-  X as PktHeading,
-  Q as PktHelptext,
-  Z as PktIcon,
-  et as PktInputWrapper,
-  ot as PktLink,
-  at as PktLinkCard,
-  it as PktLoader,
-  lt as PktMessagebox,
-  mt as PktModal,
+  F as PktDateTags,
+  J as PktDatepicker,
+  Y as PktHeading,
+  V as PktHelptext,
+  tt as PktIcon,
+  rt as PktInputWrapper,
+  st as PktLink,
+  nt as PktLinkCard,
+  pt as PktLoader,
+  Pt as PktMessagebox,
+  kt as PktModal,
   ft as PktProgressbar,
-  ht as PktRadioButton,
-  ct as PktRadiobutton,
-  $t as PktSelect,
-  ut as PktTag,
-  vt as PktTextarea,
-  bt as PktTextinput
+  ct as PktRadioButton,
+  xt as PktRadiobutton,
+  yt as PktSelect,
+  gt as PktTag,
+  St as PktTextarea,
+  Ct as PktTextinput
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oslokommune/punkt-elements",
-  "version": "13.5.13",
+  "version": "13.6.0",
   "description": "Komponentbiblioteket til Punkt, et designsystem laget av Oslo Origo",
   "homepage": "https://punkt.oslo.kommune.no",
   "author": "Team Designsystem, Oslo Origo",
@@ -73,5 +73,5 @@
     "url": "https://github.com/oslokommune/punkt/issues"
   },
   "license": "MIT",
-  "gitHead": "1a1aad782fd8d6b632557869c3c4cd9ad2f663cf"
+  "gitHead": "02be3699565d6e962bf2a28742428505c2922363"
 }

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);