@oslokommune/punkt-elements 13.6.11 → 13.6.15

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'
@@ -12,19 +10,25 @@ import '@/components/calendar'
 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,
   valueUtils,
   inputTypeUtils,
   calendarUtils,
-  eventUtils,
   cssUtils,
   dateProcessingUtils,
   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<
@@ -52,8 +56,7 @@ 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 {
@@ -116,7 +119,6 @@ export class PktDatepicker extends PktInputElement<Props> {
   timezone: string = 'Europe/Oslo'
 
   @state() inputClasses = {}
-  @state() buttonClasses = {}
 
   /**
    * Computed properties
@@ -141,30 +143,10 @@ export class PktDatepicker extends PktInputElement<Props> {
     }
     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 {
@@ -249,253 +231,186 @@ 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.isMobileSafari()) {
-            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.isMobileSafari()) {
-            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.isMobileSafari()) {
-            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.isMobileSafari()) {
-            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>
     `
   }
 
   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}
@@ -525,9 +440,9 @@ export class PktDatepicker extends PktInputElement<Props> {
           this.onBlur()
           this.hideCalendar()
         }}
-        ${ref(this.calRef)}
-      ></pkt-calendar>
-    </div>`
+        ${ref(this.datepickerPopupRef)}
+      ></pkt-datepicker-popup>
+    `
   }
 
   render() {
@@ -536,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
@@ -572,7 +488,13 @@ export class PktDatepicker extends PktInputElement<Props> {
               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}
@@ -581,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()}
@@ -616,28 +524,43 @@ export class PktDatepicker extends PktInputElement<Props> {
   }
 
   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/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

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
       }