@oslokommune/punkt-elements 13.6.11 → 13.6.15

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

@@ -0,0 +1,198 @@
+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-single')
+export class PktDatepickerSingle extends PktElement {
+  @property({ type: String })
+  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: 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'
+  }
+
+  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() {
+    return html`
+      <div class="pkt-input__container">
+        <input
+          class="${classMap(this.inputClasses)}"
+          .type=${this.inputType}
+          id="${this.id}-input"
+          .value=${this.value}
+          min=${ifDefined(this.min)}
+          max=${ifDefined(this.max)}
+          placeholder=${ifDefined(this.placeholder)}
+          ?readonly=${this.isInputReadonly}
+          aria-describedby="${this.id}-helptext"
+          @click=${(e: MouseEvent) => {
+            e.preventDefault()
+            this.dispatchToggleCalendar(e)
+          }}
+          @touchend=${(e: TouchEvent) => {
+            e.preventDefault()
+            this.dispatchToggleCalendar(e)
+          }}
+          ?disabled=${this.disabled}
+          @keydown=${(e: KeyboardEvent) =>
+            keyboardUtils.handleInputKeydown(
+              e,
+              (event) => this.dispatchToggleCalendar(event),
+              () =>
+                formUtils.submitFormOrFallback(this.internals, () => this.inputRef.value?.blur()),
+              undefined,
+              () => 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: FocusEvent) => {
+            this.dispatchBlur(e)
+            this.dispatchManageValidity(e.target as HTMLInputElement)
+            this.dispatchEvent(
+              new CustomEvent('value-change', {
+                detail: (e.target as HTMLInputElement).value,
+                bubbles: true,
+                composed: true,
+              }),
+            )
+          }}
+          @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-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
   },
 }
 
@@ -317,7 +322,14 @@ export const cssUtils = {
   /**
    * Generates input classes for datepicker
    */
-  getInputClasses(fullwidth: boolean, showRangeLabels: boolean, multiple: boolean, range: boolean) {
+  getInputClasses(
+    fullwidth: boolean, 
+    showRangeLabels: boolean, 
+    multiple: boolean, 
+    range: boolean,
+    readonly?: boolean,
+    inputType?: string
+  ) {
     return {
       'pkt-input': true,
       'pkt-datepicker__input': true,
@@ -325,6 +337,7 @@ export const cssUtils = {
       'pkt-datepicker--hasrangelabels': showRangeLabels,
       'pkt-datepicker--multiple': multiple,
       'pkt-datepicker--range': range,
+      'ios-readonly-hack': readonly === false && inputType === 'text',
     }
   },