@oslokommune/punkt-elements 13.6.12 → 13.6.15

package/dist/index.d.ts

@@ -682,7 +682,6 @@ export declare class PktDatepicker extends PktInputElement<Props_4> {
     calendarOpen: boolean;
     timezone: string;
     inputClasses: {};
-    buttonClasses: {};
     /**
      * Computed properties
      */
@@ -700,12 +699,18 @@ export declare class PktDatepicker extends PktInputElement<Props_4> {
     /**
      * Element references
      */
-    inputRef: Ref<HTMLInputElement>;
-    inputRefTo: Ref<HTMLInputElement>;
-    btnRef: Ref<HTMLButtonElement>;
+    get inputRef(): Ref<HTMLInputElement>;
+    get inputRefTo(): Ref<HTMLInputElement>;
     calRef: Ref<PktCalendar>;
     popupRef: Ref<HTMLDivElement>;
     helptextSlot: Ref<HTMLElement>;
+    singleInputRef: Ref<PktDatepickerSingle>;
+    rangeInputRef: Ref<PktDatepickerRange>;
+    multipleInputRef: Ref<PktDatepickerMultiple>;
+    get currentInputElement(): HTMLInputElement | undefined;
+    get currentInputElementTo(): HTMLInputElement | undefined;
+    get currentButtonElement(): HTMLButtonElement | undefined;
+    get btnRef(): Ref<HTMLButtonElement>;
     /**
      * Rendering
      */
@@ -725,6 +730,35 @@ export declare class PktDatepicker extends PktInputElement<Props_4> {
     clearInputValue(): void;
 }
 
+declare class PktDatepickerMultiple extends PktElement {
+    value: string[];
+    inputType: string;
+    id: string;
+    min?: string;
+    max?: string;
+    placeholder?: string;
+    readonly: boolean;
+    disabled: boolean;
+    maxlength?: number;
+    inputClasses: Record<string, boolean>;
+    internals?: any;
+    strings: any;
+    inputRef: Ref<HTMLInputElement>;
+    btnRef: Ref<HTMLButtonElement>;
+    get inputElement(): HTMLInputElement | undefined;
+    get buttonElement(): HTMLButtonElement | undefined;
+    get isInputReadonly(): boolean;
+    get isInputDisabled(): boolean;
+    private dispatchToggleCalendar;
+    private dispatchInput;
+    private dispatchFocus;
+    private dispatchBlur;
+    private dispatchChange;
+    private dispatchAddToSelected;
+    createRenderRoot(): this;
+    render(): TemplateResult<1>;
+}
+
 declare class PktDatepickerPopup extends PktElement {
     open: boolean;
     multiple: boolean;
@@ -754,6 +788,63 @@ declare class PktDatepickerPopup extends PktElement {
     render(): TemplateResult<1>;
 }
 
+declare class PktDatepickerRange extends PktElement {
+    value: string[];
+    inputType: string;
+    id: string;
+    min?: string;
+    max?: string;
+    placeholder?: string;
+    readonly: boolean;
+    disabled: boolean;
+    showRangeLabels: boolean;
+    inputClasses: Record<string, boolean>;
+    internals?: any;
+    strings: any;
+    inputRef: Ref<HTMLInputElement>;
+    inputRefTo: Ref<HTMLInputElement>;
+    btnRef: Ref<HTMLButtonElement>;
+    get inputElement(): HTMLInputElement | undefined;
+    get inputElementTo(): HTMLInputElement | undefined;
+    get buttonElement(): HTMLButtonElement | undefined;
+    get isInputReadonly(): boolean;
+    private dispatchToggleCalendar;
+    private dispatchInput;
+    private dispatchFocus;
+    private dispatchBlur;
+    private dispatchChange;
+    private dispatchManageValidity;
+    createRenderRoot(): this;
+    render(): TemplateResult<1>;
+}
+
+declare class PktDatepickerSingle extends PktElement {
+    value: string;
+    inputType: string;
+    id: string;
+    min?: string;
+    max?: string;
+    placeholder?: string;
+    readonly: boolean;
+    disabled: boolean;
+    inputClasses: Record<string, boolean>;
+    internals?: any;
+    strings: any;
+    inputRef: Ref<HTMLInputElement>;
+    btnRef: Ref<HTMLButtonElement>;
+    get inputElement(): HTMLInputElement | undefined;
+    get buttonElement(): HTMLButtonElement | undefined;
+    get isInputReadonly(): boolean;
+    private dispatchToggleCalendar;
+    private dispatchInput;
+    private dispatchFocus;
+    private dispatchBlur;
+    private dispatchChange;
+    private dispatchManageValidity;
+    createRenderRoot(): this;
+    render(): TemplateResult<1>;
+}
+
 /**
  * OBS! `dateformat` er standard formatteringsstreng for visning av datoer.
  * Denne brukes for å sette "menneskeleselig" format på datoene i tags.

package/dist/pkt-datepicker.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./datepicker-C244h82t.cjs"),t=e.PktDatepicker;Object.defineProperty(exports,"PktDatepicker",{enumerable:!0,get:()=>e.PktDatepicker});exports.default=t;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./datepicker-BR1imflE.cjs"),t=e.PktDatepicker;Object.defineProperty(exports,"PktDatepicker",{enumerable:!0,get:()=>e.PktDatepicker});Object.defineProperty(exports,"PktDatepickerMultiple",{enumerable:!0,get:()=>e.PktDatepickerMultiple});Object.defineProperty(exports,"PktDatepickerRange",{enumerable:!0,get:()=>e.PktDatepickerRange});Object.defineProperty(exports,"PktDatepickerSingle",{enumerable:!0,get:()=>e.PktDatepickerSingle});exports.default=t;

package/dist/pkt-datepicker.js

@@ -1,6 +1,10 @@
-import { a as t } from "./datepicker-DwOkktaP.js";
-const e = t;
+import { a as e } from "./datepicker-CbVSKaOY.js";
+import { d as p, c as i, b as c } from "./datepicker-CbVSKaOY.js";
+const a = e;
 export {
-  t as PktDatepicker,
-  e as default
+  e as PktDatepicker,
+  p as PktDatepickerMultiple,
+  i as PktDatepickerRange,
+  c as PktDatepickerSingle,
+  a as default
 };

package/dist/pkt-index.cjs

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const d=require("./alert-ZP5-fqlt.cjs"),l=require("./accordionitem-BOmnm80g.cjs"),b=require("./backlink-BT7DO6rV.cjs"),m=require("./button-BfqxLnMT.cjs"),P=require("./calendar-DH-fCGyW.cjs"),g=require("./card-B9RPShvV.cjs"),h=require("./combobox-BFOjlFIj.cjs"),f=require("./consent-DFrsiYGQ.cjs"),y=require("./checkbox-CH8xeK-0.cjs"),t=require("./element-D62wHiNU.cjs"),O=require("./pkt-slot-controller-BzddBp7z.cjs"),s=require("./ref-BfgcOXko.cjs"),j=require("./class-map-CG3vIaNm.cjs"),k=require("./datepicker-C244h82t.cjs"),q=require("./helptext-D1fkGmfT.cjs"),x=require("./heading-H_FWjo2k.cjs"),C=require("./icon-__Hjt2XZ.cjs"),v=require("./input-wrapper-DVjNwf8-.cjs"),S=require("./link-CyiVlb-7.cjs"),$=require("./linkcard-fH9uydjS.cjs"),L=require("./loader-C-3l7kb9.cjs"),T=require("./messagebox---xPIAwR.cjs"),_=require("./modal-IjDRQfX1.cjs"),A=require("./progressbar-DJzEC7cx.cjs"),p=require("./radiobutton-DEboKECm.cjs"),B=require("./tag-BKq07hGI.cjs"),I=require("./textarea-BS1tgktz.cjs"),D=require("./textinput-CCK8ti2y.cjs"),M=require("./select-DynzsPo0.cjs");var R=Object.defineProperty,H=Object.getOwnPropertyDescriptor,o=(a,e,r,i)=>{for(var n=i>1?void 0:i?H(e,r):e,u=a.length-1,c;u>=0;u--)(c=a[u])&&(n=(i?c(e,r,n):c(n))||n);return i&&n&&R(e,r,n),n};exports.PktComponent=class extends t.PktElement{constructor(){super(),this.string="",this.strings=[],this.darkmode=!1,this._list=[],this.defaultSlot=s.e(),this.namedSlot=s.e(),this.slotController=new O.PktSlotController(this,this.defaultSlot,this.namedSlot)}connectedCallback(){this.strings.length&&this.strings.forEach(e=>{this._list.push(e.toUpperCase())}),super.connectedCallback()}render(){const e={"pkt-component":!0,"pkt-component--has-list":this.strings.length>0,"pkt-darkmode":this.darkmode};return t.x`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const d=require("./alert-ZP5-fqlt.cjs"),l=require("./accordionitem-BOmnm80g.cjs"),b=require("./backlink-BT7DO6rV.cjs"),m=require("./button-BfqxLnMT.cjs"),P=require("./calendar-DH-fCGyW.cjs"),g=require("./card-B9RPShvV.cjs"),h=require("./combobox-BFOjlFIj.cjs"),f=require("./consent-DFrsiYGQ.cjs"),y=require("./checkbox-CH8xeK-0.cjs"),t=require("./element-D62wHiNU.cjs"),O=require("./pkt-slot-controller-BzddBp7z.cjs"),s=require("./ref-BfgcOXko.cjs"),j=require("./class-map-CG3vIaNm.cjs"),k=require("./datepicker-BR1imflE.cjs"),q=require("./helptext-D1fkGmfT.cjs"),x=require("./heading-H_FWjo2k.cjs"),C=require("./icon-__Hjt2XZ.cjs"),v=require("./input-wrapper-DVjNwf8-.cjs"),S=require("./link-CyiVlb-7.cjs"),$=require("./linkcard-fH9uydjS.cjs"),L=require("./loader-C-3l7kb9.cjs"),T=require("./messagebox---xPIAwR.cjs"),_=require("./modal-IjDRQfX1.cjs"),A=require("./progressbar-DJzEC7cx.cjs"),p=require("./radiobutton-DEboKECm.cjs"),B=require("./tag-BKq07hGI.cjs"),I=require("./textarea-BS1tgktz.cjs"),D=require("./textinput-CCK8ti2y.cjs"),M=require("./select-DynzsPo0.cjs");var R=Object.defineProperty,H=Object.getOwnPropertyDescriptor,o=(a,e,r,i)=>{for(var n=i>1?void 0:i?H(e,r):e,u=a.length-1,c;u>=0;u--)(c=a[u])&&(n=(i?c(e,r,n):c(n))||n);return i&&n&&R(e,r,n),n};exports.PktComponent=class extends t.PktElement{constructor(){super(),this.string="",this.strings=[],this.darkmode=!1,this._list=[],this.defaultSlot=s.e(),this.namedSlot=s.e(),this.slotController=new O.PktSlotController(this,this.defaultSlot,this.namedSlot)}connectedCallback(){this.strings.length&&this.strings.forEach(e=>{this._list.push(e.toUpperCase())}),super.connectedCallback()}render(){const e={"pkt-component":!0,"pkt-component--has-list":this.strings.length>0,"pkt-darkmode":this.darkmode};return t.x`
       <div class="${j.e(e)}">
         <h1 class="pkt-txt-28">${this.string}</h1>
 

package/dist/pkt-index.js

@@ -12,7 +12,7 @@ import { P as f, t as h, x as P, n, a as c } from "./element-DJZPsA_J.js";
 import { P as x } from "./pkt-slot-controller-BPGj-LC5.js";
 import { e as m, n as k } from "./ref-BCGCor-j.js";
 import { e as u } from "./class-map-Dw6Wrxwi.js";
-import { P as F, a as J } from "./datepicker-DwOkktaP.js";
+import { P as F, a as J } from "./datepicker-CbVSKaOY.js";
 import { P as V } from "./helptext-8ykxyegi.js";
 import { P as Y } from "./heading-DQ0R34j4.js";
 import { P as tt } from "./icon-B1-mkmwB.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oslokommune/punkt-elements",
-  "version": "13.6.12",
+  "version": "13.6.15",
   "description": "Komponentbiblioteket til Punkt, et designsystem laget av Oslo Origo",
   "homepage": "https://punkt.oslo.kommune.no",
   "author": "Team Designsystem, Oslo Origo",
@@ -40,7 +40,7 @@
     "@babel/preset-env": "^7.28.3",
     "@babel/preset-typescript": "^7.25.9",
     "@oslokommune/punkt-assets": "^13.6.3",
-    "@oslokommune/punkt-css": "^13.6.10",
+    "@oslokommune/punkt-css": "^13.6.15",
     "@testing-library/jest-dom": "^6.6.3",
     "@vitest/ui": "^1.0.0",
     "jest-axe": "^9.0.0",
@@ -72,5 +72,5 @@
     "url": "https://github.com/oslokommune/punkt/issues"
   },
   "license": "MIT",
-  "gitHead": "0a373416dbf5e0b210cf078b3a29587bba6b6975"
+  "gitHead": "4798e1ff1529f3e32cd4c4173fab3ec3586319da"
 }

package/src/components/datepicker/datepicker-multiple.ts

@@ -0,0 +1,202 @@
+import { html } from 'lit'
+import { customElement, property } from 'lit/decorators.js'
+import { classMap } from 'lit/directives/class-map.js'
+import { ifDefined } from 'lit/directives/if-defined.js'
+import { Ref, createRef, ref } from 'lit/directives/ref.js'
+import { PktElement } from '@/base-elements/element'
+import { keyboardUtils, formUtils, deviceDetection, cssUtils } from './datepicker-utils'
+import '@/components/icon'
+
+@customElement('pkt-datepicker-multiple')
+export class PktDatepickerMultiple extends PktElement {
+  @property({ type: Array })
+  value: string[] = []
+
+  @property({ type: String })
+  inputType: string = 'date'
+
+  @property({ type: String })
+  id: string = ''
+
+  @property({ type: String })
+  min?: string
+
+  @property({ type: String })
+  max?: string
+
+  @property({ type: String })
+  placeholder?: string
+
+  @property({ type: Boolean })
+  readonly: boolean = false
+
+  @property({ type: Boolean })
+  disabled: boolean = false
+
+  @property({ type: Number })
+  maxlength?: number
+
+  @property({ type: Object })
+  inputClasses: Record<string, boolean> = {}
+
+  @property({ type: Object })
+  internals?: any
+
+  @property({ type: Object })
+  strings: any = { calendar: { buttonAltText: 'Åpne kalender' } }
+
+  inputRef: Ref<HTMLInputElement> = createRef()
+  btnRef: Ref<HTMLButtonElement> = createRef()
+
+  get inputElement(): HTMLInputElement | undefined {
+    return this.inputRef.value
+  }
+
+  get buttonElement(): HTMLButtonElement | undefined {
+    return this.btnRef.value
+  }
+
+  get isInputReadonly(): boolean {
+    return this.readonly || this.inputType === 'text'
+  }
+
+  get isInputDisabled(): boolean {
+    return (
+      this.disabled ||
+      (this.maxlength !== undefined &&
+        this.maxlength !== null &&
+        this.value.length >= this.maxlength)
+    )
+  }
+
+  private dispatchToggleCalendar(e: Event) {
+    if (this.readonly) return
+
+    this.dispatchEvent(
+      new CustomEvent('toggle-calendar', {
+        detail: e,
+        bubbles: true,
+        composed: true,
+      }),
+    )
+  }
+
+  private dispatchInput(e: Event) {
+    this.dispatchEvent(
+      new CustomEvent('input-change', {
+        detail: e,
+        bubbles: true,
+        composed: true,
+      }),
+    )
+  }
+
+  private dispatchFocus() {
+    this.dispatchEvent(
+      new CustomEvent('input-focus', {
+        bubbles: true,
+        composed: true,
+      }),
+    )
+  }
+
+  private dispatchBlur(e: FocusEvent) {
+    this.dispatchEvent(
+      new CustomEvent('input-blur', {
+        detail: e,
+        bubbles: true,
+        composed: true,
+      }),
+    )
+  }
+
+  private dispatchChange(e: Event) {
+    this.dispatchEvent(
+      new CustomEvent('input-changed', {
+        detail: e,
+        bubbles: true,
+        composed: true,
+      }),
+    )
+  }
+
+  private dispatchAddToSelected(e: Event | KeyboardEvent) {
+    this.dispatchEvent(
+      new CustomEvent('add-to-selected', {
+        detail: e,
+        bubbles: true,
+        composed: true,
+      }),
+    )
+  }
+
+  createRenderRoot() {
+    return this
+  }
+
+  render() {
+    return html`
+      <div class="pkt-input__container">
+        <input
+          class=${classMap(this.inputClasses)}
+          .type=${this.inputType}
+          id="${this.id}-input"
+          min=${ifDefined(this.min)}
+          max=${ifDefined(this.max)}
+          placeholder=${ifDefined(this.placeholder)}
+          ?readonly=${this.isInputReadonly}
+          ?disabled=${this.isInputDisabled}
+          @click=${(e: MouseEvent) => {
+            e.preventDefault()
+            this.dispatchToggleCalendar(e)
+          }}
+          @touchend=${(e: TouchEvent) => {
+            e.preventDefault()
+            this.dispatchToggleCalendar(e)
+          }}
+          @blur=${(e: FocusEvent) => {
+            this.dispatchBlur(e)
+            this.dispatchAddToSelected(e)
+          }}
+          @input=${(e: Event) => {
+            this.dispatchInput(e)
+            e.stopImmediatePropagation()
+          }}
+          @focus=${() => {
+            this.dispatchFocus()
+            if (deviceDetection.isIOS()) {
+              this.dispatchToggleCalendar(new Event('focus'))
+            }
+          }}
+          @keydown=${(e: KeyboardEvent) =>
+            keyboardUtils.handleInputKeydown(
+              e,
+              (event) => this.dispatchToggleCalendar(event),
+              () =>
+                formUtils.submitFormOrFallback(this.internals, () => this.inputRef.value?.blur()),
+              undefined,
+              undefined,
+              (event) => this.dispatchAddToSelected(event),
+            )}
+          @change=${(e: Event) => {
+            this.dispatchChange(e)
+            e.stopImmediatePropagation()
+          }}
+          ${ref(this.inputRef)}
+        />
+        <button
+          class="${classMap(cssUtils.getButtonClasses())}"
+          type="button"
+          @click=${(e: Event) => this.dispatchToggleCalendar(e)}
+          @keydown=${(e: KeyboardEvent) =>
+            keyboardUtils.handleButtonKeydown(e, (event) => this.dispatchToggleCalendar(event))}
+          ?disabled=${this.disabled}
+          ${ref(this.btnRef)}
+        >
+          <pkt-icon name="calendar"></pkt-icon>
+          <span class="pkt-btn__text">${this.strings.calendar.buttonAltText}</span>
+        </button>
+      </div>
+    `
+  }
+}

package/src/components/datepicker/datepicker-range.ts

@@ -0,0 +1,281 @@
+import { html, nothing } from 'lit'
+import { customElement, property } from 'lit/decorators.js'
+import { classMap } from 'lit/directives/class-map.js'
+import { ifDefined } from 'lit/directives/if-defined.js'
+import { Ref, createRef, ref } from 'lit/directives/ref.js'
+import { PktElement } from '@/base-elements/element'
+import { keyboardUtils, formUtils, deviceDetection, cssUtils } from './datepicker-utils'
+import '@/components/icon'
+
+@customElement('pkt-datepicker-range')
+export class PktDatepickerRange extends PktElement {
+  @property({ type: Array })
+  value: string[] = []
+
+  @property({ type: String })
+  inputType: string = 'date'
+
+  @property({ type: String })
+  id: string = ''
+
+  @property({ type: String })
+  min?: string
+
+  @property({ type: String })
+  max?: string
+
+  @property({ type: String })
+  placeholder?: string
+
+  @property({ type: Boolean })
+  readonly: boolean = false
+
+  @property({ type: Boolean })
+  disabled: boolean = false
+
+  @property({ type: Boolean })
+  showRangeLabels: boolean = false
+
+  @property({ type: Object })
+  inputClasses: Record<string, boolean> = {}
+
+  @property({ type: Object })
+  internals?: any
+
+  @property({ type: Object })
+  strings: any = { generic: { from: 'Fra', to: 'Til' } }
+
+  inputRef: Ref<HTMLInputElement> = createRef()
+  inputRefTo: Ref<HTMLInputElement> = createRef()
+  btnRef: Ref<HTMLButtonElement> = createRef()
+
+  get inputElement(): HTMLInputElement | undefined {
+    return this.inputRef.value
+  }
+
+  get inputElementTo(): HTMLInputElement | undefined {
+    return this.inputRefTo.value
+  }
+
+  get buttonElement(): HTMLButtonElement | undefined {
+    return this.btnRef.value
+  }
+
+  get isInputReadonly(): boolean {
+    return this.readonly || this.inputType === 'text'
+  }
+
+  private dispatchToggleCalendar(e: Event) {
+    if (this.readonly) return
+
+    this.dispatchEvent(
+      new CustomEvent('toggle-calendar', {
+        detail: e,
+        bubbles: true,
+        composed: true,
+      }),
+    )
+  }
+
+  private dispatchInput(e: Event) {
+    this.dispatchEvent(
+      new CustomEvent('input-change', {
+        detail: e,
+        bubbles: true,
+        composed: true,
+      }),
+    )
+  }
+
+  private dispatchFocus() {
+    this.dispatchEvent(
+      new CustomEvent('input-focus', {
+        bubbles: true,
+        composed: true,
+      }),
+    )
+  }
+
+  private dispatchBlur(e: FocusEvent) {
+    this.dispatchEvent(
+      new CustomEvent('input-blur', {
+        detail: e,
+        bubbles: true,
+        composed: true,
+      }),
+    )
+  }
+
+  private dispatchChange(e: Event) {
+    this.dispatchEvent(
+      new CustomEvent('input-changed', {
+        detail: e,
+        bubbles: true,
+        composed: true,
+      }),
+    )
+  }
+
+  private dispatchManageValidity(input: HTMLInputElement) {
+    this.dispatchEvent(
+      new CustomEvent('manage-validity', {
+        detail: input,
+        bubbles: true,
+        composed: true,
+      }),
+    )
+  }
+
+  createRenderRoot() {
+    return this
+  }
+
+  render() {
+    const rangeLabelClasses = cssUtils.getRangeLabelClasses(this.showRangeLabels)
+
+    return html`
+      <div class="pkt-input__container">
+        ${this.showRangeLabels
+          ? html` <div class="pkt-input-prefix">${this.strings.generic.from}</div> `
+          : nothing}
+        <input
+          class=${classMap(this.inputClasses)}
+          .type=${this.inputType}
+          id="${this.id}-input"
+          .value=${this.value[0] ?? ''}
+          min=${ifDefined(this.min)}
+          max=${ifDefined(this.max)}
+          placeholder=${ifDefined(this.placeholder)}
+          ?readonly=${this.isInputReadonly}
+          ?disabled=${this.disabled}
+          @click=${(e: MouseEvent) => {
+            e.preventDefault()
+            this.dispatchToggleCalendar(e)
+          }}
+          @touchend=${(e: TouchEvent) => {
+            e.preventDefault()
+            this.dispatchToggleCalendar(e)
+          }}
+          @keydown=${(e: KeyboardEvent) =>
+            keyboardUtils.handleInputKeydown(
+              e,
+              (event) => this.dispatchToggleCalendar(event),
+              () =>
+                formUtils.submitFormOrFallback(this.internals, () =>
+                  this.inputRefTo.value?.focus(),
+                ),
+              () => this.inputRefTo.value?.focus(),
+              () => this.inputRef.value?.blur(),
+            )}
+          @input=${(e: Event) => {
+            this.dispatchInput(e)
+            e.stopImmediatePropagation()
+          }}
+          @focus=${() => {
+            this.dispatchFocus()
+            if (deviceDetection.isIOS()) {
+              this.dispatchToggleCalendar(new Event('focus'))
+            }
+          }}
+          @blur=${(e: Event) => {
+            this.dispatchEvent(
+              new CustomEvent('range-blur', {
+                detail: {
+                  event: e,
+                  values: this.value,
+                  inputType: 'from',
+                },
+                bubbles: true,
+                composed: true,
+              }),
+            )
+          }}
+          @change=${(e: Event) => {
+            e.stopImmediatePropagation()
+          }}
+          ${ref(this.inputRef)}
+        />
+        <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}
+          id="${this.id}-to"
+          aria-labelledby="${this.id}-to-label"
+          .value=${this.value[1] ?? ''}
+          min=${ifDefined(this.min)}
+          max=${ifDefined(this.max)}
+          placeholder=${ifDefined(this.placeholder)}
+          ?readonly=${this.isInputReadonly}
+          ?disabled=${this.disabled}
+          @click=${(e: MouseEvent) => {
+            e.preventDefault()
+            this.dispatchToggleCalendar(e)
+          }}
+          @touchend=${(e: TouchEvent) => {
+            e.preventDefault()
+            this.dispatchToggleCalendar(e)
+          }}
+          @keydown=${(e: KeyboardEvent) =>
+            keyboardUtils.handleInputKeydown(
+              e,
+              (event) => this.dispatchToggleCalendar(event),
+              () =>
+                formUtils.submitFormOrFallback(this.internals, () => this.inputRefTo.value?.blur()),
+              undefined,
+              () => this.inputRefTo.value?.blur(),
+            )}
+          @input=${(e: Event) => {
+            this.dispatchInput(e)
+            e.stopImmediatePropagation()
+          }}
+          @focus=${() => {
+            this.dispatchFocus()
+            if (deviceDetection.isIOS()) {
+              this.dispatchToggleCalendar(new Event('focus'))
+            }
+          }}
+          @blur=${(e: FocusEvent) => {
+            this.dispatchBlur(e)
+            if ((e.target as HTMLInputElement).value) {
+              this.dispatchManageValidity(e.target as HTMLInputElement)
+              this.dispatchEvent(
+                new CustomEvent('validate-date-input', {
+                  detail: e.target as HTMLInputElement,
+                  bubbles: true,
+                  composed: true,
+                }),
+              )
+              this.dispatchEvent(
+                new CustomEvent('handle-date-select', {
+                  detail: (e.target as HTMLInputElement).value,
+                  bubbles: true,
+                  composed: true,
+                }),
+              )
+            }
+          }}
+          @change=${(e: Event) => {
+            this.dispatchChange(e)
+            e.stopImmediatePropagation()
+          }}
+          ${ref(this.inputRefTo)}
+        />
+        <button
+          class="${classMap(cssUtils.getButtonClasses())}"
+          type="button"
+          @click=${(e: Event) => this.dispatchToggleCalendar(e)}
+          @keydown=${(e: KeyboardEvent) =>
+            keyboardUtils.handleButtonKeydown(e, (event) => this.dispatchToggleCalendar(event))}
+          ?disabled=${this.disabled}
+          ${ref(this.btnRef)}
+        >
+          <pkt-icon name="calendar"></pkt-icon>
+          <span class="pkt-btn__text">${this.strings.calendar.buttonAltText}</span>
+        </button>
+      </div>
+    `
+  }
+}