@oslokommune/punkt-elements 12.17.2 → 12.18.1

package/src/components/calendar/index.ts

@@ -1,712 +1,4 @@
-import { html, nothing, PropertyValues } from 'lit'
-import converters from '../../helpers/converters'
+import { PktCalendar } from './calendar'
 
-import { customElement, property, state } from 'lit/decorators.js'
-import { classMap } from 'lit/directives/class-map.js'
-import { getWeek, eachDayOfInterval, getISODay, addDays, addHours } from 'date-fns'
-import { TZDate } from '@date-fns/tz'
-import { PktElement } from '../element'
-import { formatISODate, newDate, newDateYMD, formatReadableDate } from '@/utils/dateutils'
-import specs from 'componentSpecs/calendar.json'
-import '../icon'
-
-type DatesInRange = {
-  [key: string]: boolean
-}
-
-@customElement('pkt-calendar')
-export class PktCalendar extends PktElement {
-  /**
-   * Element attributes
-   */
-  @property({ type: Boolean })
-  multiple: boolean = specs.props.multiple.default
-
-  @property({ type: Number })
-  maxMultiple: number = specs.props.maxMultiple.default
-
-  @property({ type: Boolean })
-  range: boolean = specs.props.range.default
-
-  @property({ type: Boolean })
-  weeknumbers: boolean = specs.props.weeknumbers.default
-
-  @property({ type: Boolean })
-  withcontrols: boolean = specs.props.withcontrols.default
-
-  @property({ converter: converters.csvToArray })
-  selected: string | string[] = []
-
-  @property({ type: String })
-  earliest: string | null = specs.props.earliest.default
-
-  @property({ type: String })
-  latest: string | null = specs.props.latest.default
-
-  @property({ converter: converters.stringsToDate })
-  excludedates: Date[] = []
-
-  @property({ converter: converters.csvToArray })
-  excludeweekdays: string[] = []
-
-  @property({ converter: converters.stringToDate })
-  currentmonth: Date | null = null
-
-  /**
-   * Strings
-   */
-  @property({ type: Array }) dayStrings: string[] = this.strings.dates.daysShort
-  @property({ type: Array }) dayStringsLong: string[] = this.strings.dates.days
-  @property({ type: Array }) monthStrings: string[] = this.strings.dates.months
-  @property({ type: String }) weekString: string = this.strings.dates.week
-  @property({ type: String }) prevMonthString: string = this.strings.dates.prevMonth
-  @property({ type: String }) nextMonthString: string = this.strings.dates.nextMonth
-
-  /**
-   * Private properties
-   */
-  @property({ type: Array }) private _selected: Date[] = []
-  @property({ type: Number }) private year: number = 0
-  @property({ type: Number }) private month: number = 0
-  @property({ type: Number }) private week: number = 0
-  @property({ type: Date }) private rangeHovered: Date | null = null
-
-  @state() private inRange: DatesInRange = {}
-  @state() private focusedDate: string | null = null
-  @state() private selectableDates: {
-    currentDateISO: string
-    isDisabled: boolean
-    tabindex: string
-  }[] = []
-  @state() private currentmonthtouched: boolean = false
-  @state() private tabIndexSet: number = 0
-  /**
-   * Runs on mount, used to set up various values and whatever you need to run
-   */
-  connectedCallback() {
-    super.connectedCallback()
-  }
-
-  disconnectedCallback(): void {
-    this.removeEventListener('keydown', this.handleKeydown)
-    super.disconnectedCallback()
-  }
-
-  attributeChangedCallback(name: string, _old: string | null, value: string | null): void {
-    if (name === 'selected' && value) {
-      this.convertSelected()
-    }
-    super.attributeChangedCallback(name, _old, value)
-  }
-
-  updated(changedProperties: PropertyValues): void {
-    super.updated(changedProperties)
-    if (changedProperties.has('selected')) {
-      this.convertSelected()
-    }
-  }
-
-  protected firstUpdated(_changedProperties: PropertyValues): void {
-    this.addEventListener('keydown', this.handleKeydown)
-  }
-
-  convertSelected() {
-    if (typeof this.selected === 'string') {
-      this.selected = this.selected.split(',')
-    }
-    if (this.selected.length === 1 && this.selected[0] === '') {
-      this.selected = []
-    }
-    this._selected = this.selected.map((d: string) => newDate(d))
-    if (this.range && this.selected.length === 2) {
-      const days = eachDayOfInterval({
-        start: newDate(this.selected[0]),
-        end: newDate(this.selected[1]),
-      })
-
-      this.inRange = {}
-      if (Array.isArray(days) && days.length) {
-        const inRange: DatesInRange = {}
-        for (let i = 0; i < days.length; i++) {
-          inRange[formatISODate(days[i])] = this.isInRange(days[i])
-        }
-        this.inRange = inRange
-      }
-    }
-    this.setCurrentMonth()
-  }
-
-  setCurrentMonth() {
-    if (this.currentmonth === null && !this.currentmonthtouched) {
-      this.currentmonthtouched = true
-      return
-    }
-    if (this.selected.length && this.selected[0] !== '') {
-      this.currentmonth = newDate(this.selected[this.selected.length - 1])
-    } else if (this.currentmonth === null) {
-      this.currentmonth = newDate()
-    }
-    this.year = this.currentmonth.getFullYear()
-    this.month = this.currentmonth.getMonth()
-  }
-
-  handleKeydown(e: KeyboardEvent) {
-    switch (e.key) {
-      case 'ArrowLeft':
-        this.handleArrowKey(e, -1)
-        break
-      case 'ArrowRight':
-        this.handleArrowKey(e, 1)
-        break
-      case 'ArrowUp':
-        this.handleArrowKey(e, -7)
-        break
-      case 'ArrowDown':
-        this.handleArrowKey(e, 7)
-        break
-      default:
-        break
-    }
-  }
-
-  handleArrowKey(e: KeyboardEvent, direction: number) {
-    if ((e.target as HTMLElement)?.nodeName === 'INPUT') return
-    if ((e.target as HTMLElement)?.nodeName === 'SELECT') return
-    if ((e.target as HTMLElement)?.nodeName === 'BUTTON') return
-    e.preventDefault()
-    if (!this.focusedDate) {
-      this.focusOnCurrentDate()
-    }
-    const date = this.focusedDate ? newDate(this.focusedDate) : newDateYMD(this.year, this.month, 1)
-    let nextDate = addDays(date, direction)
-    if (nextDate) {
-      let el = this.querySelector(`div[data-date="${formatISODate(nextDate)}"]`)
-      if (el instanceof HTMLDivElement) {
-        if (el.dataset.disabled) {
-          nextDate = addDays(nextDate, direction)
-          let nextElement = this.querySelector(`div[data-date="${formatISODate(nextDate)}"]`)
-          while (
-            nextElement &&
-            nextElement instanceof HTMLDivElement &&
-            nextElement.dataset.disabled
-          ) {
-            nextDate = addDays(nextDate, direction)
-            nextElement = this.querySelector(`div[data-date="${formatISODate(nextDate)}"]`)
-          }
-          el = nextElement
-        }
-        if (el instanceof HTMLDivElement && !el.dataset.disabled) {
-          this.focusedDate = formatISODate(nextDate)
-          el.focus()
-        }
-      }
-    }
-  }
-  /**
-   * Component functionality and render
-   */
-  render() {
-    return html`
-      <div
-        class="pkt-calendar ${this.weeknumbers ? 'pkt-cal-weeknumbers' : nothing}"
-        @focusout=${this.closeEvent}
-        @keydown=${(e: KeyboardEvent) => {
-          if (e.key === 'Escape') {
-            e.preventDefault()
-            this.close()
-          }
-        }}
-      >
-        <nav class="pkt-cal-month-nav">
-          <div>
-            <button
-              type="button"
-              @click=${this.isPrevMonthAllowed() && this.prevMonth}
-              @keydown=${(e: KeyboardEvent) => {
-                if (e.key === 'Enter' || e.key === ' ') {
-                  e.preventDefault()
-                  this.isNextMonthAllowed() && this.prevMonth()
-                }
-              }}
-              class="pkt-btn pkt-btn--tertiary pkt-btn--small pkt-btn--icon-only ${this.isPrevMonthAllowed()
-                ? ''
-                : 'pkt-hide'}"
-              .data-disabled=${!this.isPrevMonthAllowed() ? 'disabled' : nothing}
-              ?aria-disabled=${!this.isPrevMonthAllowed()}
-              tabindex=${this.isPrevMonthAllowed() ? '0' : '-1'}
-            >
-              <pkt-icon class="pkt-btn__icon" name="chevron-thin-left"></pkt-icon>
-              <span class="pkt-btn__text">${this.prevMonthString}</span>
-            </button>
-          </div>
-          ${this.renderMonthNav()}
-          <div>
-            <button
-              type="button"
-              @click=${this.isNextMonthAllowed() && this.nextMonth}
-              @keydown=${(e: KeyboardEvent) => {
-                if (e.key === 'Enter' || e.key === ' ') {
-                  e.preventDefault()
-                  this.isNextMonthAllowed() && this.nextMonth()
-                }
-              }}
-              class="pkt-btn pkt-btn--tertiary pkt-btn--small pkt-btn--icon-only ${this.isNextMonthAllowed()
-                ? ''
-                : 'pkt-hide'}"
-              .data-disabled=${!this.isNextMonthAllowed() ? 'disabled' : nothing}
-              ?aria-disabled=${!this.isNextMonthAllowed()}
-              tabindex=${this.isNextMonthAllowed() ? '0' : '-1'}
-            >
-              <pkt-icon class="pkt-btn__icon" name="chevron-thin-right"></pkt-icon>
-              <span class="pkt-btn__text">${this.nextMonthString}</span>
-            </button>
-          </div>
-        </nav>
-        <table
-          class="pkt-cal-days pkt-txt-12-medium"
-          role="grid"
-          ?aria-multiselectable=${this.range || this.multiple}
-        >
-          <thead>
-            ${this.renderDayNames()}
-          </thead>
-          <tbody>
-            ${this.renderCalendarBody()}
-          </tbody>
-        </table>
-      </div>
-    `
-  }
-
-  private renderDayNames() {
-    const days = []
-    if (this.weeknumbers) {
-      days.push(html`<th><div>${this.weekString}</div></th>`)
-    }
-    for (let i = 0; i < this.dayStrings.length; i++) {
-      days.push(
-        html`<th><div aria-label="${this.dayStringsLong[i]}">${this.dayStrings[i]}</div></th>`,
-      )
-    }
-    return html`<tr class="pkt-cal-week-row">
-      ${days}
-    </tr>`
-  }
-
-  private renderMonthNav() {
-    let monthView = []
-    if (this.withcontrols) {
-      monthView.push(
-        html`<div class="pkt-cal-month-picker">
-          <label for="${this.id}-monthnav" class="pkt-hide">${this.strings.dates.month}</label>
-          <select
-            aria-label="${this.strings.dates.month}"
-            class="pkt-input pkt-input-compact"
-            id="${this.id}-monthnav"
-            @change=${(e: any) => {
-              e.stopImmediatePropagation()
-              this.changeMonth(this.year, e.target.value)
-            }}
-          >
-            ${this.monthStrings.map(
-              (month, index) =>
-                html`<option value=${index} ?selected=${this.month === index}>${month}</option>`,
-            )}
-          </select>
-          <label for="${this.id}-yearnav" class="pkt-hide">${this.strings.dates.year}</label>
-          <input
-            aria-label="${this.strings.dates.year}"
-            class="pkt-input pkt-cal-input-year pkt-input-compact"
-            id="${this.id}-yearnav"
-            type="number"
-            size="4"
-            placeholder="0000"
-            @change=${(e: any) => {
-              e.stopImmediatePropagation()
-              this.changeMonth(e.target.value, this.month)
-            }}
-            .value=${this.year}
-          />
-        </div> `,
-      )
-    } else {
-      monthView.push(
-        html`<div class="pkt-txt-16-medium" aria-live="polite">
-          ${this.monthStrings[this.month]} ${this.year}
-        </div>`,
-      )
-    }
-    return monthView
-  }
-
-  private renderDayView(dayCounter: number, today: Date, j: number) {
-    const currentDate = newDateYMD(this.year, this.month, dayCounter)
-    const currentDateISO = formatISODate(currentDate)
-    const isToday = currentDateISO === formatISODate(today)
-    const isSelected = this.selected.includes(currentDateISO)
-    const ariaLabel = formatReadableDate(currentDate)
-    const isDisabled =
-      this.isExcluded(j, currentDate) ||
-      (!isSelected &&
-        this.multiple &&
-        this.maxMultiple > 0 &&
-        this.selected.length >= this.maxMultiple)
-    const tabindex = this.focusedDate
-      ? this.focusedDate === currentDateISO && !isDisabled
-        ? '0'
-        : '-1'
-      : !isDisabled && this.tabIndexSet === 0
-        ? '0'
-        : this.tabIndexSet === dayCounter
-          ? '0'
-          : '-1'
-
-    if (tabindex === '0') {
-      this.tabIndexSet = dayCounter
-    }
-
-    this.selectableDates.push({ currentDateISO, isDisabled, tabindex })
-
-    const classes = {
-      'pkt-cal-today': isToday,
-      'pkt-cal-selected': isSelected,
-      'pkt-cal-in-range': this.inRange[currentDateISO],
-      'pkt-cal-excluded': this.isExcluded(j, currentDate),
-      'pkt-cal-in-range-first':
-        this.range &&
-        (this.selected.length === 2 || this.rangeHovered !== null) &&
-        currentDateISO === this.selected[0],
-      'pkt-cal-in-range-last':
-        this.range && this.selected.length === 2 && currentDateISO === this.selected[1],
-      'pkt-cal-range-hover':
-        this.rangeHovered !== null && currentDateISO === formatISODate(this.rangeHovered),
-    }
-    return html`<td class=${classMap(classes)}>
-      <div
-        ?aria-selected=${isSelected}
-        role="gridcell"
-        class="pkt-btn pkt-btn--tertiary pkt-btn--small pkt-btn--label-only"
-        @mouseover=${() =>
-          this.range && !this.isExcluded(j, currentDate) && this.handleRangeHover(currentDate)}
-        @focus=${() => {
-          this.range && !this.isExcluded(j, currentDate) && this.handleRangeHover(currentDate)
-          this.focusedDate = currentDateISO
-        }}
-        aria-label="${ariaLabel}"
-        tabindex=${this.selectableDates.find((x) => x.currentDateISO === currentDateISO)?.tabindex}
-        data-disabled=${isDisabled ? 'disabled' : nothing}
-        data-date=${currentDateISO}
-        @keydown=${(e: KeyboardEvent) => {
-          if (e.key === 'Enter' || e.key === ' ') {
-            e.preventDefault()
-            this.handleDateSelect(currentDate)
-          }
-        }}
-        @click=${(e: MouseEvent) => {
-          if (!isDisabled) {
-            e.preventDefault()
-            this.handleDateSelect(currentDate)
-          }
-        }}
-      >
-        <span class="pkt-btn__text pkt-txt-14-light">${dayCounter}</span>
-      </div>
-    </td>`
-  }
-
-  private renderCalendarBody() {
-    const today = newDate()
-    const firstDayOfMonth = newDateYMD(this.year, this.month, 1)
-    const lastDayOfMonth = newDateYMD(this.year, this.month + 1, 0)
-    const startingDay = (firstDayOfMonth.getDay() + 6) % 7
-    const numDays = lastDayOfMonth.getDate()
-    const numRows = Math.ceil((numDays + startingDay) / 7)
-    const lastDayOfPrevMonth = newDateYMD(this.year, this.month, 0)
-    const numDaysPrevMonth = lastDayOfPrevMonth.getDate()
-
-    let dayCounter = 1
-    this.week = getWeek(newDateYMD(this.year, this.month, 1))
-
-    const rows = []
-
-    for (let i = 0; i < numRows; i++) {
-      const cells = []
-
-      this.weeknumbers && cells.push(html`<td class="pkt-cal-week">${this.week}</td>`)
-      this.week++
-
-      for (let j = 1; j < 8; j++) {
-        if (i === 0 && j < startingDay + 1) {
-          const dayFromPrevMonth = numDaysPrevMonth - (startingDay - j)
-          cells.push(
-            html`<td class="pkt-cal-other">
-              <div
-                class="pkt-btn pkt-btn--tertiary pkt-btn--small pkt-btn--label-only"
-                data-disabled="disabled"
-              >
-                <span class="pkt-btn__text pkt-txt-14-light">${dayFromPrevMonth}</span>
-              </div>
-            </td>`,
-          )
-        } else if (dayCounter > numDays) {
-          cells.push(
-            html`<td class="pkt-cal-other">
-              <div
-                class="pkt-btn pkt-btn--tertiary pkt-btn--small pkt-btn--label-only"
-                data-disabled="disabled"
-              >
-                <span class="pkt-btn__text pkt-txt-14-light">${dayCounter - numDays}</span>
-              </div>
-            </td>`,
-          )
-          dayCounter++
-        } else {
-          cells.push(this.renderDayView(dayCounter, today, j))
-          dayCounter++
-        }
-      }
-
-      rows.push(
-        html`<tr class="pkt-cal-week-row" role="row">
-          ${cells}
-        </tr>`,
-      )
-    }
-
-    return rows
-  }
-
-  private isExcluded(weekday: number, date: TZDate) {
-    if (this.excludeweekdays.includes(weekday.toString())) return true
-    if (this.earliest && addHours(date, 1) < newDate(this.earliest)) return true
-    if (this.latest && addHours(date, -1) > newDate(this.latest)) return true
-    return this.excludedates.some((x: TZDate | Date | string) => {
-      if (typeof x === 'string') {
-        return x === formatISODate(date)
-      } else {
-        return x.toDateString() === date.toDateString()
-      }
-    })
-  }
-
-  isPrevMonthAllowed() {
-    const prevMonth = newDateYMD(this.year, this.month, 0)
-    if (this.earliest && newDate(this.earliest) > prevMonth) return false
-    return true
-  }
-
-  private prevMonth() {
-    const newMonth = this.month === 0 ? 11 : this.month - 1
-    const newYear = this.month === 0 ? this.year - 1 : this.year
-    this.changeMonth(newYear, newMonth)
-  }
-
-  isNextMonthAllowed() {
-    const nextMonth = newDateYMD(
-      this.month === 11 ? this.year + 1 : this.year,
-      this.month === 11 ? 0 : this.month + 1,
-      1,
-    )
-    if (this.latest && newDate(this.latest) < nextMonth) return false
-    return true
-  }
-
-  private nextMonth() {
-    const newMonth = this.month === 11 ? 0 : this.month + 1
-    const newYear = this.month === 11 ? this.year + 1 : this.year
-    this.changeMonth(newYear, newMonth)
-  }
-
-  private changeMonth(year: number, month: number) {
-    this.year = typeof year === 'string' ? parseInt(year) : year
-    this.month = typeof month === 'string' ? parseInt(month) : month
-    this.tabIndexSet = 0
-    this.focusedDate = null
-    this.selectableDates = []
-  }
-
-  private isInRange(date: TZDate | Date) {
-    if (this.range && this.selected.length === 2) {
-      if (date > newDate(this.selected[0]) && date < newDate(this.selected[1])) return true
-    } else if (this.range && this.selected.length === 1 && this.rangeHovered) {
-      if (date > newDate(this.selected[0]) && date < this.rangeHovered) return true
-    }
-    return false
-  }
-
-  private isRangeAllowed(date: TZDate) {
-    let allowed = true
-    if (this._selected.length === 1) {
-      const days = eachDayOfInterval({
-        start: this._selected[0],
-        end: date,
-      })
-
-      if (Array.isArray(days) && days.length) {
-        for (let i = 0; i < days.length; i++) {
-          this.excludedates.forEach((d: TZDate | Date) => {
-            if (d > this._selected[0] && d < date) {
-              allowed = false
-            }
-          })
-          if (this.excludeweekdays.includes(getISODay(days[i]).toString())) {
-            allowed = false
-          }
-        }
-      }
-    }
-    return allowed
-  }
-
-  private emptySelected() {
-    this.selected = []
-    this._selected = []
-    this.inRange = {}
-  }
-
-  public addToSelected(selectedDate: TZDate) {
-    if (this.selected.includes(formatISODate(selectedDate))) return
-    this.selected = [...this.selected, formatISODate(selectedDate)]
-    this._selected = [...this._selected, selectedDate]
-    if (this.range && this.selected.length === 2) {
-      this.close()
-    }
-  }
-
-  public removeFromSelected(selectedDate: TZDate) {
-    if (this.selected.length === 1) {
-      this.emptySelected()
-    } else {
-      const selectedDateIndex = this.selected.indexOf(formatISODate(selectedDate))
-      const selectedCopy = [...this.selected]
-      const _selectedCopy = [...this._selected]
-      selectedCopy.splice(selectedDateIndex, 1)
-      _selectedCopy.splice(selectedDateIndex, 1)
-      this.selected = selectedCopy
-      this._selected = _selectedCopy
-    }
-  }
-
-  public toggleSelected(selectedDate: TZDate) {
-    const selectedDateISO = formatISODate(selectedDate)
-    this.selected.includes(selectedDateISO)
-      ? this.removeFromSelected(selectedDate)
-      : !(this.maxMultiple && this.selected.length >= this.maxMultiple)
-        ? this.addToSelected(selectedDate)
-        : null
-  }
-
-  private handleRangeSelect(selectedDate: TZDate) {
-    const selectedDateISO = formatISODate(selectedDate)
-    if (this.selected.includes(selectedDateISO)) {
-      if (this.selected.indexOf(selectedDateISO) === 0) {
-        this.emptySelected()
-      } else {
-        this.removeFromSelected(selectedDate)
-      }
-    } else {
-      if (this.selected.length > 1) {
-        this.emptySelected()
-        this.addToSelected(selectedDate)
-      } else {
-        if (this.selected.length === 1 && !this.isRangeAllowed(selectedDate)) {
-          this.emptySelected()
-        }
-        if (this.selected.length === 1 && this._selected[0] > selectedDate) {
-          this.emptySelected()
-        }
-        this.addToSelected(selectedDate)
-      }
-    }
-    return Promise.resolve()
-  }
-
-  private handleRangeHover(date: TZDate) {
-    if (
-      this.range &&
-      this._selected.length === 1 &&
-      this.isRangeAllowed(date) &&
-      this._selected[0] < date
-    ) {
-      this.rangeHovered = date
-
-      this.inRange = {}
-      const days = eachDayOfInterval({
-        start: this._selected[0],
-        end: date,
-      })
-
-      if (Array.isArray(days) && days.length) {
-        for (let i = 0; i < days.length; i++) {
-          this.inRange[formatISODate(days[i])] = this.isInRange(days[i])
-        }
-      }
-    } else {
-      this.rangeHovered = null
-    }
-  }
-
-  public handleDateSelect(selectedDate: TZDate | null) {
-    if (!selectedDate) return
-    if (this.range) {
-      this.handleRangeSelect(selectedDate)
-    } else if (this.multiple) {
-      this.toggleSelected(selectedDate)
-    } else {
-      if (this.selected.includes(formatISODate(selectedDate))) {
-        this.emptySelected()
-      } else {
-        this.emptySelected()
-        this.addToSelected(selectedDate)
-      }
-      this.close()
-    }
-    this.dispatchEvent(
-      new CustomEvent('date-selected', {
-        detail: this.selected,
-        bubbles: true,
-        composed: true,
-      }),
-    )
-    return Promise.resolve()
-  }
-
-  public focusOnCurrentDate() {
-    const currentDateISO = formatISODate(newDate())
-    const el = this.querySelector(`div[data-date="${currentDateISO}"]`)
-    if (el instanceof HTMLDivElement) {
-      this.focusedDate = currentDateISO
-      el.focus()
-    } else {
-      const firstSelectable = this.selectableDates.find((x) => !x.isDisabled)
-      if (firstSelectable) {
-        const firstSelectableEl = this.querySelector(
-          `div[data-date="${firstSelectable.currentDateISO}"]`,
-        )
-        if (firstSelectableEl instanceof HTMLDivElement) {
-          this.focusedDate = firstSelectable.currentDateISO
-          firstSelectableEl.focus()
-        }
-      }
-    }
-  }
-
-  public closeEvent(e: FocusEvent) {
-    if (
-      !this.contains(e.relatedTarget as Node) &&
-      !(e.target as Element).classList.contains('pkt-hide')
-    ) {
-      this.close()
-    }
-  }
-
-  public close() {
-    this.dispatchEvent(
-      new CustomEvent('close', {
-        detail: true,
-        bubbles: true,
-        composed: true,
-      }),
-    )
-  }
-}
+export { PktCalendar }
+export default PktCalendar