@oslokommune/punkt-elements 13.6.12 → 13.7.0

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

package/src/components/icon/icon.ts

@@ -5,9 +5,13 @@ import { html, PropertyValues } from 'lit'
 import { customElement, property } from 'lit/decorators.js'
 import { unsafeSVG } from 'lit/directives/unsafe-svg.js'
 
+const defaultPath = 'https://punkt-cdn.oslo.kommune.no/latest/icons/'
+
 // Allow global override of icon fetch
-window.pktFetch = window.pktFetch === undefined ? fetch : window.pktFetch
-window.pktIconPath = window.pktIconPath || 'https://punkt-cdn.oslo.kommune.no/latest/icons/'
+if (typeof window !== 'undefined') {
+  window.pktFetch = window.pktFetch === undefined ? fetch : window.pktFetch
+  window.pktIconPath = window.pktIconPath || defaultPath
+}
 
 const sleep = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms))
 const errorSvg = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"></svg>'
@@ -23,9 +27,14 @@ const downloadIconOrGetFromCache = async (
     if (i > 50) break
     await sleep(50)
   }
-  if (localStorage.getItem(path + name + '.svg')) {
+
+  // Check if localStorage is available before using it
+  const isLocalStorageAvailable =
+    typeof Storage !== 'undefined' && typeof localStorage !== 'undefined'
+
+  if (isLocalStorageAvailable && localStorage.getItem(path + name + '.svg')) {
     return Promise.resolve(localStorage.getItem(path + name + '.svg'))
-  } else if (typeof window.pktFetch === 'function') {
+  } else if (typeof window !== 'undefined' && typeof window.pktFetch === 'function') {
     dlStatus[path + name + '.svg'] = 'fetching'
     return Promise.resolve(
       window
@@ -40,7 +49,7 @@ const downloadIconOrGetFromCache = async (
           }
         })
         .then((text) => {
-          if (text !== errorSvg) {
+          if (text !== errorSvg && isLocalStorageAvailable) {
             localStorage.setItem(path + name + '.svg', text)
           }
           dlStatus[path + name + '.svg'] = 'fetched'
@@ -56,7 +65,7 @@ type Props = ElementProps<PktIcon, 'path' | 'name'>
 @customElement('pkt-icon')
 export class PktIcon extends PktElement<Props> {
   @property({ type: String, reflect: false })
-  path: string | undefined = window.pktIconPath
+  path: string | undefined = typeof window !== 'undefined' ? window.pktIconPath : defaultPath
 
   @property({ type: String, reflect: true })
   name: PktIconName = ''
@@ -85,7 +94,7 @@ export class PktIcon extends PktElement<Props> {
 
   protected async getIcon(name: PktIconName = '') {
     if (this._updatedProps.length > 0) {
-      if (!this.path) this.path === window.pktIconPath
+      if (!this.path) this.path = typeof window !== 'undefined' ? window.pktIconPath : defaultPath
       this.icon = unsafeSVG(
         await downloadIconOrGetFromCache(this.name || '', this.path).then((res) => res),
       ) as SVGElement

package/src/components/select/select.ts

@@ -46,7 +46,7 @@ export class PktSelect extends PktInputElement implements IPktSelect {
   @property({ type: Array, attribute: 'options' }) private _optionsProp: TSelectOption[] = []
   @property({ type: String }) value: string = ''
 
-  @state() private _options: TSelectOption[] = []
+  @state() _options: TSelectOption[] = []
 
   public selectedIndex: number | null = -1
   public selectedOptions: HTMLCollectionOf<HTMLOptionElement> | undefined = undefined