@oslokommune/punkt-elements 13.6.10 → 13.6.12

package/src/components/datepicker/datepicker-popup.test.ts

@@ -0,0 +1,77 @@
+import '@testing-library/jest-dom'
+import { fireEvent } from '@testing-library/dom'
+import { vi } from 'vitest'
+
+import { createElementTest, BaseTestConfig } from '../../tests/test-framework'
+import './datepicker-popup'
+import '../calendar/calendar'
+
+import { PktDatepickerPopup } from './datepicker-popup'
+import { PktCalendar } from '../calendar/calendar'
+
+export interface IDatepickerPopupTest extends BaseTestConfig {
+  open?: boolean
+}
+
+const createPopupTest = async (config: IDatepickerPopupTest = {}) => {
+  const { container, element } = await createElementTest('pkt-datepicker-popup' as any, config)
+  return { container, popup: element as PktDatepickerPopup }
+}
+
+afterEach(() => {
+  document.body.innerHTML = ''
+})
+
+describe('PktDatepickerPopup', () => {
+  test('opens when show() is called', async () => {
+    const { popup } = await createPopupTest()
+    await popup.updateComplete
+
+    popup.show()
+    await popup.updateComplete
+    expect(popup.open).toBe(true)
+  })
+
+  test('closes when clicking outside', async () => {
+    const { popup } = await createPopupTest()
+    await popup.updateComplete
+
+    popup.show()
+    await popup.updateComplete
+    expect(popup.open).toBe(true)
+
+    fireEvent.click(document.body)
+    await popup.updateComplete
+    expect(popup.open).toBe(false)
+  })
+
+  test('closes on Escape key', async () => {
+    const { popup } = await createPopupTest()
+    await popup.updateComplete
+
+    popup.show()
+    await popup.updateComplete
+    expect(popup.open).toBe(true)
+
+    fireEvent.keyDown(popup, { key: 'Escape' })
+    await popup.updateComplete
+    expect(popup.open).toBe(false)
+  })
+
+  test('re-dispatches date-selected from child calendar', async () => {
+    const { popup } = await createPopupTest()
+    await popup.updateComplete
+
+    const handler = vi.fn()
+    popup.addEventListener('date-selected', (e: any) => handler(e))
+
+    const cal = popup.querySelector('pkt-calendar') as PktCalendar | null
+    expect(cal).toBeTruthy()
+    const detail = ['2025-09-17']
+    cal?.dispatchEvent(new CustomEvent('date-selected', { detail, bubbles: true, composed: true }))
+
+    expect(handler).toHaveBeenCalled()
+    const eventArg = handler.mock.calls[0][0]
+    expect(eventArg.detail).toEqual(detail)
+  })
+})

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

@@ -0,0 +1,137 @@
+import { html } from 'lit'
+import { PktElement } from '@/base-elements/element'
+import { customElement, property } from 'lit/decorators.js'
+import { classMap } from 'lit/directives/class-map.js'
+import { ref, createRef, Ref } from 'lit/directives/ref.js'
+
+import { PktCalendar } from '../calendar/calendar'
+import { calendarUtils } from './datepicker-utils'
+
+@customElement('pkt-datepicker-popup')
+export class PktDatepickerPopup extends PktElement {
+  @property({ type: Boolean, reflect: true }) open = false
+  @property({ type: Boolean }) multiple = false
+  @property({ type: Boolean }) range = false
+  @property({ type: Boolean }) weeknumbers = false
+  @property({ type: Boolean }) withcontrols = false
+  @property({ type: Number }) maxMultiple: number | null = null
+  @property({ type: Array }) selected: string[] = []
+  @property({ type: String }) earliest: string | null = null
+  @property({ type: String }) latest: string | null = null
+  @property({ type: Array }) excludedates: string[] = []
+  @property({ type: Array }) excludeweekdays: string[] = []
+  @property({ type: String }) currentmonth: string | null = null
+
+  popupRef: Ref<HTMLElement> = createRef()
+  calendarRef: Ref<HTMLElement> = createRef()
+
+  firstUpdated() {
+    // expose calendarRef for external use
+    this.calRef = this.calendarRef
+
+    document.addEventListener('keydown', this.handleDocumentKeydown)
+    document.addEventListener('click', this.handleDocumentClick)
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback()
+    document.removeEventListener('click', this.handleDocumentClick)
+    document.removeEventListener('keydown', this.handleDocumentKeydown)
+  }
+
+  handleDocumentClick = (e: MouseEvent) => {
+    if (!this.open) return
+    const path = e.composedPath() as EventTarget[]
+    const host = this.parentElement as EventTarget | null
+    const popupNode = this.popupRef.value as EventTarget | null
+    if (
+      !path.includes(this) &&
+      !path.includes(popupNode as EventTarget) &&
+      !(host && path.includes(host))
+    ) {
+      this.hide()
+      this.dispatchEvent(new CustomEvent('close', { bubbles: true, composed: true }))
+    }
+  }
+
+  handleDocumentKeydown = (e: KeyboardEvent) => {
+    if (!this.open) return
+    if (e.key === 'Escape') {
+      this.hide()
+      this.dispatchEvent(new CustomEvent('close', { bubbles: true, composed: true }))
+    }
+  }
+
+  show() {
+    this.open = true
+    ;(this.calendarRef.value as HTMLElement | null)?.focus()
+  }
+
+  hide() {
+    this.open = false
+  }
+
+  toggle() {
+    this.open ? this.hide() : this.show()
+  }
+
+  contains(node: Node | null) {
+    return !!node && !!(this.popupRef.value as HTMLElement | null)?.contains(node as Node)
+  }
+
+  focusOnCurrentDate() {
+    const cal = this.calendarRef.value as PktCalendar
+    if (cal && typeof cal.focusOnCurrentDate === 'function') cal.focusOnCurrentDate()
+  }
+
+  addToSelected(e: Event, min?: string | null, max?: string | null) {
+    if (typeof calendarUtils.addToSelected === 'function') {
+      return calendarUtils.addToSelected(e, this.calendarRef as any, min, max)
+    }
+    return undefined
+  }
+
+  handleDateSelect(date: Date) {
+    const cal = this.calendarRef.value as PktCalendar
+    if (cal && typeof cal.handleDateSelect === 'function') return cal.handleDateSelect(date)
+    return undefined
+  }
+
+  render() {
+    const classes = { 'pkt-calendar-popup': true, show: this.open, hide: !this.open }
+    return html`
+      <div
+        class="${classMap(classes)}"
+        ${ref(this.popupRef)}
+        id="date-popup"
+        ?hidden=${!this.open}
+        aria-hidden="${!this.open}"
+      >
+        <pkt-calendar
+          ${ref(this.calendarRef)}
+          ?multiple=${this.multiple}
+          ?range=${this.range}
+          ?weeknumbers=${this.weeknumbers}
+          ?withcontrols=${this.withcontrols}
+          .maxMultiple=${this.maxMultiple}
+          .selected=${this.selected}
+          .earliest=${this.earliest}
+          .latest=${this.latest}
+          .excludedates=${this.excludedates}
+          .excludeweekdays=${this.excludeweekdays}
+          .currentmonth=${this.currentmonth}
+          @date-selected=${(e: CustomEvent) => {
+            this.selected = e.detail
+            this.dispatchEvent(
+              new CustomEvent('date-selected', { detail: e.detail, bubbles: true, composed: true }),
+            )
+          }}
+          @close=${() => {
+            this.hide()
+            this.dispatchEvent(new CustomEvent('close', { bubbles: true, composed: true }))
+          }}
+        ></pkt-calendar>
+      </div>
+    `
+  }
+}

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

@@ -24,18 +24,23 @@ export const sleep = (ms: number): Promise<void> =>
 export const deviceDetection = {
   /**
    * Detects if the current device is iOS (iPhone, iPad, iPod)
+   * Handles modern iPad Safari which uses desktop user agent since iOS 13
    */
   isIOS(): boolean {
     const ua = navigator.userAgent
-    return /iP(hone|od|ad)/.test(ua)
-  },
 
-  /**
-   * Detects if the current device is Mobile Safari
-   */
-  isMobileSafari(): boolean {
-    const ua = navigator.userAgent
-    return /iP(hone|od|ad)/.test(ua) && /Safari/.test(ua) && !/CriOS|FxiOS/.test(ua)
+    // Legacy iOS detection (iPhone, iPod, older iPads)
+    if (/iP(hone|od|ad)/.test(ua)) {
+      return true
+    }
+
+    // Modern iPad detection (iOS 13+ iPads identify as Mac)
+    // Check for Mac + touch support
+    if (/Macintosh/.test(ua) && 'ontouchend' in document) {
+      return true
+    }
+
+    return false
   },
 }
 

package/src/components/datepicker/datepicker.ts

@@ -12,6 +12,7 @@ import '@/components/calendar'
 import '@/components/icon'
 import '@/components/input-wrapper'
 import './date-tags'
+import './datepicker-popup'
 import { PktSlotController } from '@/controllers/pkt-slot-controller'
 import { keyboardUtils } from './datepicker-utils'
 import {
@@ -20,19 +21,39 @@ import {
   valueUtils,
   inputTypeUtils,
   calendarUtils,
-  eventUtils,
   cssUtils,
   dateProcessingUtils,
   formUtils,
 } from './datepicker-utils'
+import { PktDatepickerPopup } from './datepicker-popup'
+import { ElementProps } from '@/types/typeUtils'
+
+type Props = ElementProps<
+  PktDatepicker,
+  | 'label'
+  | 'dateformat'
+  | 'multiple'
+  | 'maxlength'
+  | 'range'
+  | 'showRangeLabels'
+  | 'min'
+  | 'max'
+  | 'weeknumbers'
+  | 'withcontrols'
+  | 'excludedates'
+  | 'excludeweekdays'
+  | 'currentmonth'
+  | 'calendarOpen'
+  | 'timezone'
+>
+
 @customElement('pkt-datepicker')
-export class PktDatepicker extends PktInputElement {
+export class PktDatepicker extends PktInputElement<Props> {
   /**
    * Element attributes and properties
    */
   private _valueProperty: string = ''
-  private documentClickListener?: (e: MouseEvent) => void
-  private documentKeydownListener?: (e: KeyboardEvent) => void
+  datepickerPopupRef: Ref<PktDatepickerPopup> = createRef()
 
   @property({ type: String, reflect: true })
   get value(): string {
@@ -120,30 +141,10 @@ export class PktDatepicker extends PktInputElement {
     }
     this.name =
       valueUtils.normalizeNameForMultiple(this.name, this.multiple, this.range) || this.name
-    this.documentClickListener = eventUtils.createDocumentClickListener(
-      this.inputRef,
-      this.inputRefTo,
-      this.btnRef,
-      () => this.calendarOpen,
-      this.onBlur.bind(this),
-      this.hideCalendar.bind(this),
-    )
-    this.documentKeydownListener = eventUtils.createDocumentKeydownListener(
-      () => this.calendarOpen,
-      this.hideCalendar.bind(this),
-    )
-    document.addEventListener('click', this.documentClickListener)
-    document.addEventListener('keydown', this.documentKeydownListener)
   }
 
   disconnectedCallback(): void {
     super.disconnectedCallback()
-    if (this.documentClickListener) {
-      document.removeEventListener('click', this.documentClickListener)
-    }
-    if (this.documentKeydownListener) {
-      document.removeEventListener('keydown', this.documentKeydownListener)
-    }
   }
 
   onInput(): void {
@@ -271,7 +272,7 @@ export class PktDatepicker extends PktInputElement {
         }}
         @focus=${() => {
           this.onFocus()
-          if (deviceDetection.isMobileSafari()) {
+          if (deviceDetection.isIOS()) {
             this.showCalendar()
           }
         }}
@@ -327,7 +328,7 @@ export class PktDatepicker extends PktInputElement {
         }}
         @focus=${() => {
           this.onFocus()
-          if (deviceDetection.isMobileSafari()) {
+          if (deviceDetection.isIOS()) {
             this.showCalendar()
           }
         }}
@@ -380,7 +381,7 @@ export class PktDatepicker extends PktInputElement {
         }}
         @focus=${() => {
           this.onFocus()
-          if (deviceDetection.isMobileSafari()) {
+          if (deviceDetection.isIOS()) {
             this.showCalendar()
           }
         }}
@@ -441,7 +442,7 @@ export class PktDatepicker extends PktInputElement {
         }}
         @focus=${() => {
           this.onFocus()
-          if (deviceDetection.isMobileSafari()) {
+          if (deviceDetection.isIOS()) {
             this.showCalendar()
           }
         }}
@@ -465,16 +466,10 @@ export class PktDatepicker extends PktInputElement {
   }
 
   renderCalendar() {
-    return html`<div
-      class="pkt-calendar-popup pkt-${this.calendarOpen ? 'show' : 'hide'}"
-      @focusout=${(e: FocusEvent) => {
-        if (this.calendarOpen) this.handleFocusOut(e)
-      }}
-      id="${this.id}-popup"
-      ${ref(this.popupRef)}
-    >
-      <pkt-calendar
-        id="${this.id}-calendar"
+    return html`
+      <pkt-datepicker-popup
+        class="pkt-contents"
+        ?open=${this.calendarOpen}
         ?multiple=${this.multiple}
         ?range=${this.range}
         ?weeknumbers=${this.weeknumbers}
@@ -504,9 +499,9 @@ export class PktDatepicker extends PktInputElement {
           this.onBlur()
           this.hideCalendar()
         }}
-        ${ref(this.calRef)}
-      ></pkt-calendar>
-    </div>`
+        ${ref(this.datepickerPopupRef)}
+      ></pkt-datepicker-popup>
+    `
   }
 
   render() {
@@ -551,7 +546,13 @@ export class PktDatepicker extends PktInputElement {
               strings=${this.strings}
               id-base=${this.id}
               @date-tag-removed=${(e: CustomEvent) => {
-                this.calRef.value?.handleDateSelect(fromISOToDate(e.detail))
+                const popup = this.datepickerPopupRef.value
+                const date = fromISOToDate(e.detail)
+                if (popup && date && typeof popup.handleDateSelect === 'function') {
+                  popup.handleDateSelect(date)
+                } else {
+                  this.calRef.value?.handleDateSelect(date)
+                }
               }}
             ></pkt-date-tags>`
           : nothing}
@@ -595,28 +596,43 @@ export class PktDatepicker extends PktInputElement {
   }
 
   addToSelected = (e: Event | KeyboardEvent) => {
-    calendarUtils.addToSelected(e, this.calRef, this.min, this.max)
-  }
-
-  private handleFocusOut(e: FocusEvent) {
-    eventUtils.handleFocusOut(e, this, this.onBlur.bind(this), this.hideCalendar.bind(this))
+    const popup = this.datepickerPopupRef.value
+    if (popup && typeof popup.addToSelected === 'function') {
+      return popup.addToSelected(e, this.min, this.max)
+    }
+    return calendarUtils.addToSelected(e, this.calRef, this.min, this.max)
   }
 
   public async showCalendar() {
+    const popup = this.datepickerPopupRef.value
     this.calendarOpen = true
+    if (popup && typeof popup.show === 'function') {
+      popup.show()
+      if (deviceDetection.isIOS()) popup.focusOnCurrentDate()
+      return
+    }
     await sleep(20)
     this.handleCalendarPosition()
-    if (deviceDetection.isMobileSafari()) {
+    if (deviceDetection.isIOS()) {
       this.calRef.value?.focusOnCurrentDate()
     }
   }
 
   public hideCalendar() {
+    const popup = this.datepickerPopupRef.value
     this.calendarOpen = false
+    if (popup && typeof popup.hide === 'function') return popup.hide()
   }
 
   public async toggleCalendar(e: Event) {
     e.preventDefault()
+    const popup = this.datepickerPopupRef.value
+    if (popup && typeof popup.toggle === 'function') {
+      const wasOpen = !!popup.open
+      popup.toggle()
+      this.calendarOpen = !wasOpen
+      return
+    }
     this.calendarOpen ? this.hideCalendar() : this.showCalendar()
   }
 

package/src/components/input-wrapper/input-wrapper.ts

@@ -11,6 +11,7 @@ import { uuidish } from '@/utils/stringutils'
 import specs from 'componentSpecs/input-wrapper.json'
 import '@/components/helptext'
 import '@/components/icon'
+import '@/components/alert'
 
 type TCounterPosition = 'top' | 'bottom'
 type Props = ElementProps<
@@ -190,16 +191,15 @@ export class PktInputWrapper extends PktElement<Props> {
 
     const errorElement = () => {
       if (this.hasError && this.errorMessage) {
-        return html`<div
-          role="alert"
-          class="pkt-alert pkt-alert--error pkt-alert--compact"
+        return html`<pkt-alert
+          skin="error"
+          compact
+          id=${`${this.forId}-error`}
           aria-live="assertive"
           aria-atomic="true"
-          id="${this.forId}-error"
         >
-          <pkt-icon name="alert-error" class="pkt-alert__icon"></pkt-icon>
-          <div class="pkt-alert__text">${unsafeHTML(this.errorMessage)}</div>
-        </div>`
+          ${unsafeHTML(this.errorMessage)}
+        </pkt-alert>`
       } else {
         return nothing
       }

package/src/components/radiobutton/radiobutton.ts

@@ -4,9 +4,22 @@ import { PktInputElement } from '@/base-elements/input-element'
 import { Ref, createRef, ref } from 'lit/directives/ref.js'
 import { html, nothing } from 'lit'
 import { classMap } from 'lit/directives/class-map.js'
+import { ElementProps } from '@/types/typeUtils'
+
+type Props = ElementProps<
+  PktRadioButton,
+  | 'checkHelptext'
+  | 'defaultChecked'
+  | 'hasTile'
+  | 'tagText'
+  | 'optionalTag'
+  | 'optionalText'
+  | 'requiredTag'
+  | 'requiredText'
+>
 
 @customElement('pkt-radiobutton')
-export class PktRadioButton extends PktInputElement {
+export class PktRadioButton extends PktInputElement<Props> {
   private inputRef: Ref<HTMLInputElement> = createRef()
 
   @property({ type: String, reflect: true }) value: string = ''

package/src/components/textarea/textarea.ts

@@ -9,9 +9,12 @@ import { PktSlotController } from '@/controllers/pkt-slot-controller'
 
 import '@/components/input-wrapper'
 import '@/components/icon'
+import { ElementProps } from '@/types/typeUtils'
+
+type Props = ElementProps<PktTextarea, 'autocomplete' | 'rows'>
 
 @customElement('pkt-textarea')
-export class PktTextarea extends PktInputElement {
+export class PktTextarea extends PktInputElement<Props> {
   private inputRef: Ref<HTMLTextAreaElement> = createRef()
   private helptextSlot: Ref<HTMLElement> = createRef()