@oslokommune/punkt-elements 14.0.2 → 14.0.3

package/src/components/calendar/helpers/calendar-grid.ts

@@ -0,0 +1,93 @@
+import { newDateYMD } from 'shared-utils/date-utils'
+import { getWeek } from 'date-fns'
+
+// Constants
+export const DAYS_PER_WEEK = 7
+export const MONDAY_OFFSET = 6
+
+/**
+ * Calendar grid calculation helpers
+ */
+
+export interface ICalendarGridDimensions {
+  firstDayOfMonth: Date
+  lastDayOfMonth: Date
+  startingDay: number
+  numDays: number
+  numRows: number
+  numDaysPrevMonth: number
+  initialWeek: number
+}
+
+export interface IGridCellPosition {
+  rowIndex: number
+  colIndex: number
+}
+
+/**
+ * Calculate the dimensions and structure of the calendar grid
+ */
+export function calculateCalendarDimensions(year: number, month: number): ICalendarGridDimensions {
+  const firstDayOfMonth = newDateYMD(year, month, 1)
+  const lastDayOfMonth = newDateYMD(year, month + 1, 0)
+  const startingDay = (firstDayOfMonth.getDay() + MONDAY_OFFSET) % DAYS_PER_WEEK
+  const numDays = lastDayOfMonth.getDate()
+  const numRows = Math.ceil((numDays + startingDay) / DAYS_PER_WEEK)
+  const lastDayOfPrevMonth = newDateYMD(year, month, 0)
+  const numDaysPrevMonth = lastDayOfPrevMonth.getDate()
+  const initialWeek = getWeek(firstDayOfMonth)
+
+  return {
+    firstDayOfMonth,
+    lastDayOfMonth,
+    startingDay,
+    numDays,
+    numRows,
+    numDaysPrevMonth,
+    initialWeek,
+  }
+}
+
+/**
+ * Determine what type of cell to render at a given position
+ */
+export function getCellType(
+  rowIndex: number,
+  colIndex: number,
+  dayCounter: number,
+  gridDimensions: ICalendarGridDimensions,
+): 'prev-month' | 'current-month' | 'next-month' {
+  const { startingDay, numDays } = gridDimensions
+
+  if (rowIndex === 0 && colIndex < startingDay) {
+    return 'prev-month'
+  }
+
+  if (dayCounter > numDays) {
+    return 'next-month'
+  }
+
+  return 'current-month'
+}
+
+/**
+ * Get the day number to display for a given cell
+ */
+export function getDayNumber(
+  cellType: 'prev-month' | 'current-month' | 'next-month',
+  colIndex: number,
+  dayCounter: number,
+  gridDimensions: ICalendarGridDimensions,
+): number {
+  const { startingDay, numDaysPrevMonth, numDays } = gridDimensions
+
+  if (cellType === 'prev-month') {
+    return numDaysPrevMonth - (startingDay - colIndex - 1)
+  }
+
+  if (cellType === 'next-month') {
+    return dayCounter - numDays
+  }
+
+  return dayCounter
+}

package/src/components/calendar/helpers/date-validation.ts

@@ -0,0 +1,86 @@
+import { formatISODate, isDateSelectable, newDate, newDateYMD } from 'shared-utils/date-utils'
+
+/**
+ * Date validation helpers for calendar component
+ */
+
+export interface IDateConstraints {
+  earliest: string | null
+  latest: string | null
+  excludedates: Date[]
+  excludeweekdays: string[]
+}
+
+/**
+ * Check if a date is excluded based on constraints
+ */
+export function isDateExcluded(date: Date, constraints: IDateConstraints): boolean {
+  const excludedDatesStrings = constraints.excludedates.map((d) =>
+    typeof d === 'string' ? d : formatISODate(d),
+  )
+
+  return !isDateSelectable(
+    date,
+    constraints.earliest,
+    constraints.latest,
+    excludedDatesStrings,
+    constraints.excludeweekdays,
+  )
+}
+
+/**
+ * Check if a day should be disabled for selection
+ */
+export function isDayDisabled(
+  date: Date,
+  isSelected: boolean,
+  constraints: IDateConstraints,
+  options: {
+    multiple: boolean
+    maxMultiple: number
+    selectedCount: number
+  },
+): boolean {
+  if (isDateExcluded(date, constraints)) return true
+
+  if (
+    !isSelected &&
+    options.multiple &&
+    options.maxMultiple > 0 &&
+    options.selectedCount >= options.maxMultiple
+  ) {
+    return true
+  }
+
+  return false
+}
+
+/**
+ * Check if navigation to previous month is allowed
+ */
+export function isPrevMonthAllowed(
+  year: number,
+  month: number,
+  earliest: string | null,
+): boolean {
+  const prevMonth = newDateYMD(year, month, 0)
+  if (earliest && newDate(earliest) > prevMonth) return false
+  return true
+}
+
+/**
+ * Check if navigation to next month is allowed
+ */
+export function isNextMonthAllowed(
+  year: number,
+  month: number,
+  latest: string | null,
+): boolean {
+  const nextMonth = newDateYMD(
+    month === 11 ? year + 1 : year,
+    month === 11 ? 0 : month + 1,
+    1,
+  )
+  if (latest && newDate(latest) < nextMonth) return false
+  return true
+}

package/src/components/calendar/helpers/index.ts

@@ -0,0 +1,49 @@
+/**
+ * Calendar Helper Exports
+ *
+ * This module re-exports all calendar helper functions and types
+ * to provide a single import point for calendar-related utilities.
+ */
+
+// Date validation
+export {
+  isDateExcluded,
+  isDayDisabled,
+  isPrevMonthAllowed,
+  isNextMonthAllowed,
+  type IDateConstraints,
+} from './date-validation'
+
+// Calendar grid calculations
+export {
+  DAYS_PER_WEEK,
+  MONDAY_OFFSET,
+  calculateCalendarDimensions,
+  getCellType,
+  getDayNumber,
+  type ICalendarGridDimensions,
+  type IGridCellPosition,
+} from './calendar-grid'
+
+// Selection management
+export {
+  convertSelectedToDates,
+  updateRangeMap,
+  isRangeAllowed,
+  addToSelection,
+  removeFromSelection,
+  toggleSelection,
+  handleRangeSelection,
+  type TDateRangeMap,
+  type TSelectionMode,
+  type ISelectionState,
+  type ISelectionOptions,
+} from './selection-manager'
+
+// Keyboard navigation
+export {
+  KEY_DIRECTION_MAP,
+  shouldIgnoreKeyboardEvent,
+  findNextSelectableDate,
+  getKeyDirection,
+} from './keyboard-navigation'

package/src/components/calendar/helpers/keyboard-navigation.ts

@@ -0,0 +1,54 @@
+import { addDays } from 'date-fns'
+import { formatISODate } from 'shared-utils/date-utils'
+import { DAYS_PER_WEEK } from './calendar-grid'
+
+/**
+ * Keyboard navigation helpers for calendar component
+ */
+
+export const KEY_DIRECTION_MAP: Record<string, number> = {
+  ArrowLeft: -1,
+  ArrowRight: 1,
+  ArrowUp: -DAYS_PER_WEEK,
+  ArrowDown: DAYS_PER_WEEK,
+}
+
+/**
+ * Check if a keyboard event should be ignored
+ */
+export function shouldIgnoreKeyboardEvent(target: HTMLElement): boolean {
+  const nodeName = target.nodeName
+  if (nodeName === 'INPUT' || nodeName === 'SELECT') return true
+  if (nodeName === 'BUTTON' && !target.dataset?.date) return true
+  return false
+}
+
+/**
+ * Find the next selectable date in a given direction
+ */
+export function findNextSelectableDate(
+  startDate: Date,
+  direction: number,
+  querySelector: (selector: string) => Element | null,
+): Date | null {
+  let nextDate = addDays(startDate, direction)
+  if (!nextDate) return null
+
+  let el = querySelector(`button[data-date="${formatISODate(nextDate)}"]`)
+
+  // Skip disabled dates
+  while (el instanceof HTMLButtonElement && el.dataset.disabled) {
+    nextDate = addDays(nextDate, direction)
+    el = querySelector(`button[data-date="${formatISODate(nextDate)}"]`)
+    if (!el) return null
+  }
+
+  return nextDate
+}
+
+/**
+ * Get the direction for a keyboard event
+ */
+export function getKeyDirection(key: string): number | null {
+  return KEY_DIRECTION_MAP[key] ?? null
+}

package/src/components/calendar/helpers/selection-manager.ts

@@ -0,0 +1,184 @@
+import { formatISODate, parseISODateString } from 'shared-utils/date-utils'
+import { eachDayOfInterval, getISODay } from 'date-fns'
+
+/**
+ * Selection management helpers for calendar component
+ */
+
+export type TSelectionMode = 'single' | 'multiple' | 'range'
+
+export type TDateRangeMap = {
+  [key: string]: boolean
+}
+
+export interface ISelectionState {
+  selected: string[]
+  _selected: Date[]
+  inRange: TDateRangeMap
+}
+
+export interface ISelectionOptions {
+  multiple: boolean
+  maxMultiple: number
+  range: boolean
+  excludedates: Date[]
+  excludeweekdays: string[]
+}
+
+/**
+ * Convert selected string array to Date array
+ */
+export function convertSelectedToDates(selected: string | string[]): Date[] {
+  if (typeof selected === 'string') {
+    selected = selected.split(',')
+  }
+  if (selected.length === 1 && selected[0] === '') {
+    return []
+  }
+  return selected.map((d: string) => parseISODateString(d))
+}
+
+/**
+ * Update the range map for visualizing date ranges
+ */
+export function updateRangeMap(start: Date, end: Date): TDateRangeMap {
+  const days = eachDayOfInterval({ start, end })
+  const inRange: TDateRangeMap = {}
+
+  if (Array.isArray(days) && days.length) {
+    for (let i = 0; i < days.length; i++) {
+      const day = days[i]
+      const isInRange = day > start && day < end
+      inRange[formatISODate(day)] = isInRange
+    }
+  }
+
+  return inRange
+}
+
+/**
+ * Check if a range selection is allowed (no excluded dates in between)
+ */
+export function isRangeAllowed(
+  date: Date,
+  selectedDates: Date[],
+  excludedates: Date[],
+  excludeweekdays: string[],
+): boolean {
+  if (selectedDates.length !== 1) return true
+
+  const days = eachDayOfInterval({
+    start: selectedDates[0],
+    end: date,
+  })
+
+  if (!Array.isArray(days) || !days.length) return true
+
+  for (let i = 0; i < days.length; i++) {
+    // Check excluded dates
+    for (const excludedDate of excludedates) {
+      if (excludedDate > selectedDates[0] && excludedDate < date) {
+        return false
+      }
+    }
+
+    // Check excluded weekdays
+    if (excludeweekdays.includes(getISODay(days[i]).toString())) {
+      return false
+    }
+  }
+
+  return true
+}
+
+/**
+ * Add a date to the selection
+ */
+export function addToSelection(
+  selectedDate: Date,
+  currentSelected: string[],
+): string[] {
+  const dateISO = formatISODate(selectedDate)
+  if (currentSelected.includes(dateISO)) {
+    return currentSelected
+  }
+  return [...currentSelected, dateISO]
+}
+
+/**
+ * Remove a date from the selection
+ */
+export function removeFromSelection(
+  selectedDate: Date,
+  currentSelected: string[],
+): string[] {
+  const dateISO = formatISODate(selectedDate)
+  const index = currentSelected.indexOf(dateISO)
+
+  if (index === -1) return currentSelected
+  if (currentSelected.length === 1) return []
+
+  const newSelected = [...currentSelected]
+  newSelected.splice(index, 1)
+  return newSelected
+}
+
+/**
+ * Toggle a date in the selection
+ */
+export function toggleSelection(
+  selectedDate: Date,
+  currentSelected: string[],
+  maxMultiple: number,
+): string[] {
+  const dateISO = formatISODate(selectedDate)
+
+  if (currentSelected.includes(dateISO)) {
+    return removeFromSelection(selectedDate, currentSelected)
+  }
+
+  if (maxMultiple > 0 && currentSelected.length >= maxMultiple) {
+    return currentSelected
+  }
+
+  return addToSelection(selectedDate, currentSelected)
+}
+
+/**
+ * Handle range selection logic
+ */
+export function handleRangeSelection(
+  selectedDate: Date,
+  currentSelected: string[],
+  options: Pick<ISelectionOptions, 'excludedates' | 'excludeweekdays'>,
+): string[] {
+  const dateISO = formatISODate(selectedDate)
+  const selectedDates = convertSelectedToDates(currentSelected)
+
+  // If clicking on already selected date
+  if (currentSelected.includes(dateISO)) {
+    // If it's the first date, clear selection
+    if (currentSelected.indexOf(dateISO) === 0) {
+      return []
+    }
+    // Otherwise remove it
+    return removeFromSelection(selectedDate, currentSelected)
+  }
+
+  // If we have more than 1 selection, start over
+  if (currentSelected.length > 1) {
+    return [dateISO]
+  }
+
+  // If we have 1 selection, check if range is valid
+  if (currentSelected.length === 1) {
+    if (!isRangeAllowed(selectedDate, selectedDates, options.excludedates, options.excludeweekdays)) {
+      return [dateISO]
+    }
+    if (selectedDates[0] > selectedDate) {
+      return [dateISO]
+    }
+  }
+
+  return addToSelection(selectedDate, currentSelected)
+}

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

@@ -0,0 +1,151 @@
+import { html, TemplateResult } from 'lit'
+import { property } from 'lit/decorators.js'
+import { Ref, createRef } from 'lit/directives/ref.js'
+import { classMap } from 'lit/directives/class-map.js'
+import { PktElement } from '@/base-elements/element'
+import { cssUtils } from './datepicker-utils'
+import { IDatepickerStrings } from './datepicker-types'
+import '@/components/icon'
+
+/**
+ * Abstract base class for datepicker input components
+ *
+ * Consolidates shared properties, methods, and event dispatchers
+ * used by all three datepicker input types (single, multiple, range).
+ *
+ * Subclasses must implement:
+ * - `strings` property with component-specific defaults
+ * - `render()` method with component-specific template
+ */
+export abstract class PktDatepickerBase extends PktElement {
+  // Shared properties (9 identical across all sub-components)
+  @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?: ElementInternals
+
+  // Abstract property - must be implemented by subclasses
+  abstract strings: IDatepickerStrings
+
+  // Shared refs
+  inputRef: Ref<HTMLInputElement> = createRef()
+  btnRef: Ref<HTMLButtonElement> = createRef()
+
+  // Shared getters
+  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'
+  }
+
+  // Shared event dispatchers (protected so subclasses can use them)
+  protected dispatchToggleCalendar(e: Event): void {
+    if (this.readonly) return
+
+    this.dispatchEvent(
+      new CustomEvent('toggle-calendar', {
+        detail: e,
+        bubbles: true,
+        composed: true,
+      }),
+    )
+  }
+
+  protected dispatchInput(e: Event): void {
+    this.dispatchEvent(
+      new CustomEvent('input-change', {
+        detail: e,
+        bubbles: true,
+        composed: true,
+      }),
+    )
+  }
+
+  protected dispatchFocus(): void {
+    this.dispatchEvent(
+      new CustomEvent('input-focus', {
+        bubbles: true,
+        composed: true,
+      }),
+    )
+  }
+
+  protected dispatchBlur(e: FocusEvent): void {
+    this.dispatchEvent(
+      new CustomEvent('input-blur', {
+        detail: e,
+        bubbles: true,
+        composed: true,
+      }),
+    )
+  }
+
+  protected dispatchChange(e: Event): void {
+    this.dispatchEvent(
+      new CustomEvent('input-changed', {
+        detail: e,
+        bubbles: true,
+        composed: true,
+      }),
+    )
+  }
+
+  // Shared render helper for calendar button
+  protected renderCalendarButton(): TemplateResult {
+    return html`
+      <button
+        class="${classMap(cssUtils.getButtonClasses())}"
+        type="button"
+        @click=${(e: Event) => this.dispatchToggleCalendar(e)}
+        @keydown=${(e: KeyboardEvent) => {
+          const { key } = e
+          if (key === 'Enter' || key === ' ' || key === 'Space') {
+            e.preventDefault()
+            this.dispatchToggleCalendar(e)
+          }
+        }}
+        ?disabled=${this.disabled}
+        ${this.btnRef}
+      >
+        <pkt-icon name="calendar"></pkt-icon>
+        <span class="pkt-btn__text">${this.strings.calendar?.buttonAltText || 'Åpne kalender'}</span>
+      </button>
+    `
+  }
+
+  // Shared method - no shadow DOM
+  createRenderRoot() {
+    return this
+  }
+
+  // Abstract render method - must be implemented by subclasses
+  abstract render(): TemplateResult
+}