@oslokommune/punkt-elements 13.6.12 → 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

@@ -322,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,
@@ -330,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',
     }
   },
 

package/src/components/datepicker/datepicker.ts

@@ -1,5 +1,3 @@
-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, parseISODateString } from '@/utils/dateutils'
 import { html, nothing, PropertyValues } from 'lit'
@@ -13,8 +11,10 @@ import '@/components/icon'
 import '@/components/input-wrapper'
 import './date-tags'
 import './datepicker-popup'
+import './datepicker-single'
+import './datepicker-range'
+import './datepicker-multiple'
 import { PktSlotController } from '@/controllers/pkt-slot-controller'
-import { keyboardUtils } from './datepicker-utils'
 import {
   sleep,
   deviceDetection,
@@ -26,6 +26,9 @@ import {
   formUtils,
 } from './datepicker-utils'
 import { PktDatepickerPopup } from './datepicker-popup'
+import { PktDatepickerSingle } from './datepicker-single'
+import { PktDatepickerRange } from './datepicker-range'
+import { PktDatepickerMultiple } from './datepicker-multiple'
 import { ElementProps } from '@/types/typeUtils'
 
 type Props = ElementProps<
@@ -116,7 +119,6 @@ export class PktDatepicker extends PktInputElement<Props> {
   timezone: string = 'Europe/Oslo'
 
   @state() inputClasses = {}
-  @state() buttonClasses = {}
 
   /**
    * Computed properties
@@ -229,239 +231,178 @@ export class PktDatepicker extends PktInputElement<Props> {
    * Element references
    */
 
-  // When using PktInputElement, we always need to define `inputRef`
-  inputRef: Ref<HTMLInputElement> = createRef()
-  inputRefTo: Ref<HTMLInputElement> = createRef()
-  btnRef: Ref<HTMLButtonElement> = createRef()
+  // Override the inputRef and inputRefTo for compatibility
+  get inputRef(): Ref<HTMLInputElement> {
+    const element = this.currentInputElement
+    return { value: element } as Ref<HTMLInputElement>
+  }
+
+  get inputRefTo(): Ref<HTMLInputElement> {
+    const element = this.currentInputElementTo
+    return { value: element } as Ref<HTMLInputElement>
+  }
+
   calRef: Ref<PktCalendar> = createRef()
   popupRef: Ref<HTMLDivElement> = createRef()
   helptextSlot: Ref<HTMLElement> = createRef()
 
+  // Child component refs
+  singleInputRef: Ref<PktDatepickerSingle> = createRef()
+  rangeInputRef: Ref<PktDatepickerRange> = createRef()
+  multipleInputRef: Ref<PktDatepickerMultiple> = createRef()
+
+  // Getters for backward compatibility with input refs
+  get currentInputElement(): HTMLInputElement | undefined {
+    if (this.multiple) {
+      return this.multipleInputRef.value?.inputElement
+    } else if (this.range) {
+      return this.rangeInputRef.value?.inputElement
+    } else {
+      return this.singleInputRef.value?.inputElement
+    }
+  }
+
+  get currentInputElementTo(): HTMLInputElement | undefined {
+    if (this.range) {
+      return this.rangeInputRef.value?.inputElementTo
+    }
+    return undefined
+  }
+
+  get currentButtonElement(): HTMLButtonElement | undefined {
+    if (this.multiple) {
+      return this.multipleInputRef.value?.buttonElement
+    } else if (this.range) {
+      return this.rangeInputRef.value?.buttonElement
+    } else {
+      return this.singleInputRef.value?.buttonElement
+    }
+  }
+
+  // Override btnRef for compatibility
+  get btnRef(): Ref<HTMLButtonElement> {
+    const element = this.currentButtonElement
+    return { value: element } as Ref<HTMLButtonElement>
+  }
+
   /**
    * Rendering
    */
   renderInput() {
     return html`
-      <input
-        class="${classMap(this.inputClasses)}"
-        .type=${this.inputType}
-        id="${this.id}-input"
+      <pkt-datepicker-single
         .value=${this._value[0] ?? ''}
-        min=${ifDefined(this.min)}
-        max=${ifDefined(this.max)}
-        placeholder=${ifDefined(this.placeholder)}
-        ?readonly=${this.readonly}
-        aria-describedby="${this.id}-helptext"
-        @click=${(e: MouseEvent) => {
-          e.preventDefault()
-          this.showCalendar()
-        }}
-        ?disabled=${this.disabled}
-        @keydown=${(e: KeyboardEvent) =>
-          keyboardUtils.handleInputKeydown(
-            // event, toggleCalendar, submitForm, focusNext, blur, comma
-            e,
-            (event) => this.toggleCalendar(event),
-            () => formUtils.submitFormOrFallback(this.internals, () => this.inputRef.value?.blur()),
-            undefined,
-            () => this.inputRef.value?.blur(),
-          )}
-        @input=${(e: Event) => {
-          this.onInput()
-          e.stopImmediatePropagation()
-        }}
-        @focus=${() => {
-          this.onFocus()
-          if (deviceDetection.isIOS()) {
-            this.showCalendar()
-          }
-        }}
-        @blur=${(e: FocusEvent) => {
-          if (!this.calRef.value?.contains(e.relatedTarget as Node)) {
+        .inputType=${this.inputType}
+        .id=${this.id}
+        .min=${this.min}
+        .max=${this.max}
+        .placeholder=${this.placeholder}
+        .readonly=${this.readonly}
+        .disabled=${this.disabled}
+        .inputClasses=${this.inputClasses}
+        .internals=${this.internals}
+        .strings=${this.strings}
+        @toggle-calendar=${(e: CustomEvent) => this.toggleCalendar(e.detail)}
+        @input-change=${() => this.onInput()}
+        @input-focus=${() => this.onFocus()}
+        @input-blur=${(e: CustomEvent) => {
+          if (!this.calRef.value?.contains(e.detail.relatedTarget as Node)) {
             this.onBlur()
           }
-          this.manageValidity(e.target as HTMLInputElement)
-          this.value = (e.target as HTMLInputElement).value
         }}
-        @change=${(e: Event) => {
+        @manage-validity=${(e: CustomEvent) => this.manageValidity(e.detail)}
+        @value-change=${(e: CustomEvent) => {
+          this.value = e.detail
+        }}
+        @input-changed=${() => {
           this.touched = true
-          e.stopImmediatePropagation()
         }}
-        ${ref(this.inputRef)}
-      />
+        ${ref(this.singleInputRef)}
+      ></pkt-datepicker-single>
     `
   }
 
   renderRangeInput() {
-    const rangeLabelClasses = cssUtils.getRangeLabelClasses(this.showRangeLabels)
     return html`
-      ${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.readonly}
-        ?disabled=${this.disabled}
-        @click=${(e: MouseEvent) => {
-          e.preventDefault()
-          this.showCalendar()
-        }}
-        @keydown=${(e: KeyboardEvent) =>
-          keyboardUtils.handleInputKeydown(
-            // event, toggleCalendar, submitForm, focusNext, blur, comma
-            e,
-            (event) => this.toggleCalendar(event),
-            () =>
-              formUtils.submitFormOrFallback(this.internals, () => this.inputRefTo.value?.focus()),
-            () => this.inputRefTo.value?.focus(),
-            () => this.inputRef.value?.blur(),
-          )}
-        @input=${(e: Event) => {
-          this.onInput()
-          e.stopImmediatePropagation()
-        }}
-        @focus=${() => {
-          this.onFocus()
-          if (deviceDetection.isIOS()) {
-            this.showCalendar()
+      <pkt-datepicker-range
+        .value=${this._value}
+        .inputType=${this.inputType}
+        .id=${this.id}
+        .min=${this.min}
+        .max=${this.max}
+        .placeholder=${this.placeholder}
+        .readonly=${this.readonly}
+        .disabled=${this.disabled}
+        .showRangeLabels=${this.showRangeLabels}
+        .inputClasses=${this.inputClasses}
+        .internals=${this.internals}
+        .strings=${this.strings}
+        @toggle-calendar=${(e: CustomEvent) => this.toggleCalendar(e.detail)}
+        @input-change=${() => this.onInput()}
+        @input-focus=${() => this.onFocus()}
+        @input-blur=${(e: CustomEvent) => {
+          if (!this.calRef.value?.contains(e.detail.relatedTarget as Node)) {
+            this.onBlur()
           }
         }}
-        @blur=${(e: Event) => {
+        @range-blur=${(e: CustomEvent) => {
           dateProcessingUtils.processRangeBlur(
-            e,
-            this._value,
+            e.detail.event,
+            e.detail.values,
             this.calRef,
             () => this.clearInputValue(),
             (input) => this.manageValidity(input),
           )
         }}
-        @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.readonly}
-        ?disabled=${this.disabled}
-        @click=${(e: MouseEvent) => {
-          e.preventDefault()
-          this.showCalendar()
+        @manage-validity=${(e: CustomEvent) => this.manageValidity(e.detail)}
+        @validate-date-input=${(e: CustomEvent) => {
+          formUtils.validateDateInput(e.detail, this.internals, this.min, this.max, this.strings)
         }}
-        @keydown=${(e: KeyboardEvent) =>
-          keyboardUtils.handleInputKeydown(
-            // event, toggleCalendar, submitForm, focusNext, blur, comma
-            e,
-            (event) => this.toggleCalendar(event),
-            () =>
-              formUtils.submitFormOrFallback(this.internals, () => this.inputRefTo.value?.blur()),
-            undefined,
-            () => this.inputRefTo.value?.blur(),
-          )}
-        @input=${(e: Event) => {
-          this.onInput()
-          e.stopImmediatePropagation()
-        }}
-        @focus=${() => {
-          this.onFocus()
-          if (deviceDetection.isIOS()) {
-            this.showCalendar()
-          }
-        }}
-        @blur=${(e: FocusEvent) => {
-          if (!this.calRef.value?.contains(e.relatedTarget as Node)) {
-            this.onBlur()
-          }
-          if ((e.target as HTMLInputElement).value) {
-            this.manageValidity(e.target as HTMLInputElement)
-            formUtils.validateDateInput(
-              e.target as HTMLInputElement,
-              this.internals,
-              this.min,
-              this.max,
-              this.strings,
-            )
-            const date = fromISOToDate((e.target as HTMLInputElement).value)
-            if (date) {
-              if (this._value[1] !== formatISODate(date)) {
-                this.calRef?.value?.handleDateSelect(date)
-              }
+        @handle-date-select=${(e: CustomEvent) => {
+          const date = fromISOToDate(e.detail)
+          if (date) {
+            if (this._value[1] !== formatISODate(date)) {
+              this.calRef?.value?.handleDateSelect(date)
             }
           }
         }}
-        @change=${(e: Event) => {
+        @input-changed=${() => {
           this.touched = true
-          e.stopImmediatePropagation()
         }}
-        ${ref(this.inputRefTo)}
-      />
+        ${ref(this.rangeInputRef)}
+      ></pkt-datepicker-range>
     `
   }
 
   renderMultipleInput() {
     return html`
-      <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.readonly}
-        ?disabled=${this.disabled || (this.maxlength && this._value.length >= this.maxlength)}
-        @click=${(e: MouseEvent) => {
-          e.preventDefault()
-          this.showCalendar()
-        }}
-        @blur=${(e: FocusEvent) => {
-          if (!this.calRef.value?.contains(e.relatedTarget as Node)) {
+      <pkt-datepicker-multiple
+        .value=${this._value}
+        .inputType=${this.inputType}
+        .id=${this.id}
+        .min=${this.min}
+        .max=${this.max}
+        .placeholder=${this.placeholder}
+        .readonly=${this.readonly}
+        .disabled=${this.disabled}
+        .maxlength=${this.maxlength}
+        .inputClasses=${this.inputClasses}
+        .internals=${this.internals}
+        .strings=${this.strings}
+        @toggle-calendar=${(e: CustomEvent) => this.toggleCalendar(e.detail)}
+        @input-change=${() => this.onInput()}
+        @input-focus=${() => this.onFocus()}
+        @input-blur=${(e: CustomEvent) => {
+          if (!this.calRef.value?.contains(e.detail.relatedTarget as Node)) {
             this.onBlur()
           }
-          this.addToSelected(e)
-        }}
-        @input=${(e: Event) => {
-          this.onInput()
-          e.stopImmediatePropagation()
-        }}
-        @focus=${() => {
-          this.onFocus()
-          if (deviceDetection.isIOS()) {
-            this.showCalendar()
-          }
         }}
-        @keydown=${(e: KeyboardEvent) =>
-          keyboardUtils.handleInputKeydown(
-            // event, toggleCalendar, submitForm, focusNext, blur, comma
-            e,
-            (event) => this.toggleCalendar(event),
-            () => formUtils.submitFormOrFallback(this.internals, () => this.inputRef.value?.blur()),
-            undefined,
-            undefined,
-            (event) => this.addToSelected(event),
-          )}
-        @change=${(e: Event) => {
+        @add-to-selected=${(e: CustomEvent) => this.addToSelected(e.detail)}
+        @input-changed=${() => {
           this.touched = true
-          e.stopImmediatePropagation()
         }}
-        ${ref(this.inputRef)}
-      />
+        ${ref(this.multipleInputRef)}
+      ></pkt-datepicker-multiple>
     `
   }
 
@@ -510,8 +451,9 @@ export class PktDatepicker extends PktInputElement<Props> {
       this.showRangeLabels,
       this.multiple,
       this.range,
+      this.readonly,
+      this.inputType,
     )
-    this.buttonClasses = cssUtils.getButtonClasses()
 
     return html`
       <pkt-input-wrapper
@@ -561,25 +503,11 @@ export class PktDatepicker extends PktInputElement<Props> {
             ? 'pkt-input__range-inputs'
             : ''}"
         >
-          <div class="pkt-input__container">
-            ${this.range
-              ? this.renderRangeInput()
-              : this.multiple
-                ? this.renderMultipleInput()
-                : this.renderInput()}
-            <button
-              class="${classMap(this.buttonClasses)}"
-              type="button"
-              @click=${this.toggleCalendar}
-              @keydown=${(e: KeyboardEvent) =>
-                keyboardUtils.handleButtonKeydown(e, (event) => this.toggleCalendar(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>
+          ${this.range
+            ? this.renderRangeInput()
+            : this.multiple
+              ? this.renderMultipleInput()
+              : this.renderInput()}
         </div>
       </pkt-input-wrapper>
       ${this.renderCalendar()}

package/src/components/datepicker/index.ts

@@ -1,3 +1,7 @@
 import { PktDatepicker } from './datepicker'
-export { PktDatepicker }
+import { PktDatepickerSingle } from './datepicker-single'
+import { PktDatepickerRange } from './datepicker-range'
+import { PktDatepickerMultiple } from './datepicker-multiple'
+
+export { PktDatepicker, PktDatepickerSingle, PktDatepickerRange, PktDatepickerMultiple }
 export default PktDatepicker