@oslokommune/punkt-elements 13.6.12 → 13.7.0

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

@@ -0,0 +1,202 @@
+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-multiple')
+export class PktDatepickerMultiple extends PktElement {
+  @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'
+  }
+
+  get isInputDisabled(): boolean {
+    return (
+      this.disabled ||
+      (this.maxlength !== undefined &&
+        this.maxlength !== null &&
+        this.value.length >= this.maxlength)
+    )
+  }
+
+  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', {
+        detail: e,
+        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"
+          min=${ifDefined(this.min)}
+          max=${ifDefined(this.max)}
+          placeholder=${ifDefined(this.placeholder)}
+          ?readonly=${this.isInputReadonly}
+          ?disabled=${this.isInputDisabled}
+          @click=${(e: MouseEvent) => {
+            e.preventDefault()
+            this.dispatchToggleCalendar(e)
+          }}
+          @touchend=${(e: TouchEvent) => {
+            e.preventDefault()
+            this.dispatchToggleCalendar(e)
+          }}
+          @blur=${(e: FocusEvent) => {
+            this.dispatchBlur(e)
+            this.dispatchAddToSelected(e)
+          }}
+          @input=${(e: Event) => {
+            this.dispatchInput(e)
+            e.stopImmediatePropagation()
+          }}
+          @focus=${() => {
+            this.dispatchFocus()
+            if (deviceDetection.isIOS()) {
+              this.dispatchToggleCalendar(new Event('focus'))
+            }
+          }}
+          @keydown=${(e: KeyboardEvent) =>
+            keyboardUtils.handleInputKeydown(
+              e,
+              (event) => this.dispatchToggleCalendar(event),
+              () =>
+                formUtils.submitFormOrFallback(this.internals, () => this.inputRef.value?.blur()),
+              undefined,
+              undefined,
+              (event) => this.dispatchAddToSelected(event),
+            )}
+          @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-range.ts

@@ -0,0 +1,281 @@
+import { html, nothing } 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-range')
+export class PktDatepickerRange extends PktElement {
+  @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' } }
+
+  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> `
+          : 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.isInputReadonly}
+          ?disabled=${this.disabled}
+          @click=${(e: MouseEvent) => {
+            e.preventDefault()
+            this.dispatchToggleCalendar(e)
+          }}
+          @touchend=${(e: TouchEvent) => {
+            e.preventDefault()
+            this.dispatchToggleCalendar(e)
+          }}
+          @keydown=${(e: KeyboardEvent) =>
+            keyboardUtils.handleInputKeydown(
+              e,
+              (event) => this.dispatchToggleCalendar(event),
+              () =>
+                formUtils.submitFormOrFallback(this.internals, () =>
+                  this.inputRefTo.value?.focus(),
+                ),
+              () => this.inputRefTo.value?.focus(),
+              () => 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: Event) => {
+            this.dispatchEvent(
+              new CustomEvent('range-blur', {
+                detail: {
+                  event: e,
+                  values: this.value,
+                  inputType: 'from',
+                },
+                bubbles: true,
+                composed: true,
+              }),
+            )
+          }}
+          @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.isInputReadonly}
+          ?disabled=${this.disabled}
+          @click=${(e: MouseEvent) => {
+            e.preventDefault()
+            this.dispatchToggleCalendar(e)
+          }}
+          @touchend=${(e: TouchEvent) => {
+            e.preventDefault()
+            this.dispatchToggleCalendar(e)
+          }}
+          @keydown=${(e: KeyboardEvent) =>
+            keyboardUtils.handleInputKeydown(
+              e,
+              (event) => this.dispatchToggleCalendar(event),
+              () =>
+                formUtils.submitFormOrFallback(this.internals, () => this.inputRefTo.value?.blur()),
+              undefined,
+              () => this.inputRefTo.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)
+            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,
+                }),
+              )
+            }
+          }}
+          @change=${(e: Event) => {
+            this.dispatchChange(e)
+            e.stopImmediatePropagation()
+          }}
+          ${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>
+      </div>
+    `
+  }
+}

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',
     }
   },