@oslokommune/punkt-elements 14.0.2 → 14.0.3

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

@@ -2,64 +2,23 @@ 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, cssUtils } from './datepicker-utils'
+import { ref } from 'lit/directives/ref.js'
+import { PktDatepickerBase } from './datepicker-base'
+import { keyboardUtils, formUtils } from './datepicker-utils'
+import { IDatepickerStrings, defaultSingleStrings } from './datepicker-types'
 import { isIOS } from 'shared-utils/device-utils'
 import '@/components/icon'
 
 @customElement('pkt-datepicker-multiple')
-export class PktDatepickerMultiple extends PktElement {
+export class PktDatepickerMultiple extends PktDatepickerBase {
   @property({ type: Array })
   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: Number })
   maxlength?: number
 
   @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'
-  }
+  strings: IDatepickerStrings = defaultSingleStrings
 
   get isInputDisabled(): boolean {
     return (
@@ -70,57 +29,6 @@ export class PktDatepickerMultiple extends PktElement {
     )
   }
 
-  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 dispatchAddToSelected(e: Event | KeyboardEvent) {
     this.dispatchEvent(
       new CustomEvent('add-to-selected', {
@@ -131,10 +39,6 @@ export class PktDatepickerMultiple extends PktElement {
     )
   }
 
-  createRenderRoot() {
-    return this
-  }
-
   render() {
     return html`
       <div class="pkt-input__container">
@@ -185,18 +89,7 @@ export class PktDatepickerMultiple extends PktElement {
           }}
           ${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>
+        ${this.renderCalendarButton()}
       </div>
     `
   }

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

@@ -3,141 +3,36 @@ 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 { PktDatepickerBase } from './datepicker-base'
 import { keyboardUtils, formUtils, cssUtils } from './datepicker-utils'
+import { IDatepickerStrings, defaultRangeStrings } from './datepicker-types'
 import { isIOS } from 'shared-utils/device-utils'
 import '@/components/icon'
 
 @customElement('pkt-datepicker-range')
-export class PktDatepickerRange extends PktElement {
+export class PktDatepickerRange extends PktDatepickerBase {
   @property({ type: Array })
   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: Boolean })
   showRangeLabels: boolean = false
 
   @property({ type: Object })
-  inputClasses: Record<string, boolean> = {}
-
-  @property({ type: Object })
-  internals?: any
-
-  @property({ type: Object })
-  strings: any = { generic: { from: 'Fra', to: 'Til' } }
+  strings: IDatepickerStrings = defaultRangeStrings
 
-  inputRef: Ref<HTMLInputElement> = createRef()
   inputRefTo: Ref<HTMLInputElement> = createRef()
-  btnRef: Ref<HTMLButtonElement> = createRef()
-
-  get inputElement(): HTMLInputElement | undefined {
-    return this.inputRef.value
-  }
 
   get inputElementTo(): HTMLInputElement | undefined {
     return this.inputRefTo.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() {
     const rangeLabelClasses = cssUtils.getRangeLabelClasses(this.showRangeLabels)
 
     return html`
       <div class="pkt-input__container">
         ${this.showRangeLabels
-          ? html` <div class="pkt-input-prefix">${this.strings.generic.from}</div> `
+          ? html` <div class="pkt-input-prefix">${this.strings.generic?.from}</div> `
           : nothing}
         <input
           class=${classMap(this.inputClasses)}
@@ -178,7 +73,8 @@ export class PktDatepickerRange extends PktElement {
               this.dispatchToggleCalendar(new Event('focus'))
             }
           }}
-          @blur=${(e: Event) => {
+          @blur=${(e: FocusEvent) => {
+            this.dispatchBlur(e)
             this.dispatchEvent(
               new CustomEvent('range-blur', {
                 detail: {
@@ -192,12 +88,13 @@ export class PktDatepickerRange extends PktElement {
             )
           }}
           @change=${(e: Event) => {
+            this.dispatchChange(e)
             e.stopImmediatePropagation()
           }}
           ${ref(this.inputRef)}
         />
         <div class="${classMap(rangeLabelClasses)}" id="${this.id}-to-label">
-          ${this.strings.generic.to}
+          ${this.strings.generic?.to}
         </div>
         ${!this.showRangeLabels ? html` <div class="pkt-input-separator">–</div> ` : nothing}
         <input
@@ -240,23 +137,17 @@ export class PktDatepickerRange extends PktElement {
           }}
           @blur=${(e: FocusEvent) => {
             this.dispatchBlur(e)
-            if ((e.target as HTMLInputElement).value) {
-              this.dispatchManageValidity(e.target as HTMLInputElement)
-              this.dispatchEvent(
-                new CustomEvent('validate-date-input', {
-                  detail: e.target as HTMLInputElement,
-                  bubbles: true,
-                  composed: true,
-                }),
-              )
-              this.dispatchEvent(
-                new CustomEvent('handle-date-select', {
-                  detail: (e.target as HTMLInputElement).value,
-                  bubbles: true,
-                  composed: true,
-                }),
-              )
-            }
+            this.dispatchEvent(
+              new CustomEvent('range-blur', {
+                detail: {
+                  event: e,
+                  values: this.value,
+                  inputType: 'to',
+                },
+                bubbles: true,
+                composed: true,
+              }),
+            )
           }}
           @change=${(e: Event) => {
             this.dispatchChange(e)
@@ -264,18 +155,7 @@ export class PktDatepickerRange extends PktElement {
           }}
           ${ref(this.inputRefTo)}
         />
-        <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>
+        ${this.renderCalendarButton()}
       </div>
     `
   }

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

@@ -2,112 +2,19 @@ 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, cssUtils } from './datepicker-utils'
+import { ref } from 'lit/directives/ref.js'
+import { PktDatepickerBase } from './datepicker-base'
+import { keyboardUtils, formUtils } from './datepicker-utils'
+import { IDatepickerStrings, defaultSingleStrings } from './datepicker-types'
 import { isIOS } from 'shared-utils/device-utils'
-import '@/components/icon'
 
 @customElement('pkt-datepicker-single')
-export class PktDatepickerSingle extends PktElement {
+export class PktDatepickerSingle extends PktDatepickerBase {
   @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,
-      }),
-    )
-  }
+  strings: IDatepickerStrings = defaultSingleStrings
 
   private dispatchManageValidity(input: HTMLInputElement) {
     this.dispatchEvent(
@@ -119,10 +26,6 @@ export class PktDatepickerSingle extends PktElement {
     )
   }
 
-  createRenderRoot() {
-    return this
-  }
-
   render() {
     return html`
       <div class="pkt-input__container">
@@ -181,18 +84,7 @@ export class PktDatepickerSingle extends PktElement {
           }}
           ${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>
+        ${this.renderCalendarButton()}
       </div>
     `
   }

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

@@ -0,0 +1,56 @@
+/**
+ * Type definitions for the datepicker component family
+ */
+
+/**
+ * Internationalization strings for the datepicker components
+ */
+export interface IDatepickerStrings {
+  /** Calendar-related strings */
+  calendar?: {
+    /** Alt text for calendar button */
+    buttonAltText?: string
+  }
+  /** Generic UI strings (used in range datepicker) */
+  generic?: {
+    /** Label for range start input */
+    from?: string
+    /** Label for range end input */
+    to?: string
+  }
+  /** Form validation messages */
+  forms?: {
+    messages?: {
+      /** Error message when date is before minimum */
+      rangeUnderflow?: string
+      /** Error message when date is after maximum */
+      rangeOverflow?: string
+      /** Error message for invalid date format */
+      badInput?: string
+      /** Error message when required field is empty */
+      valueMissing?: string
+    }
+  }
+  /** Date-related strings */
+  dates?: {
+    /** Month label */
+    month?: string
+    /** Year label */
+    year?: string
+  }
+}
+
+/**
+ * Default strings for single/multiple datepicker
+ */
+export const defaultSingleStrings: IDatepickerStrings = {
+  calendar: { buttonAltText: 'Åpne kalender' },
+}
+
+/**
+ * Default strings for range datepicker
+ */
+export const defaultRangeStrings: IDatepickerStrings = {
+  calendar: { buttonAltText: 'Åpne kalender' },
+  generic: { from: 'Fra', to: 'Til' },
+}