@oslokommune/punkt-elements 11.12.3

package/src/components/calendar/index.ts

@@ -0,0 +1,375 @@
+import { html } from 'lit'
+import { customElement, property } from 'lit/decorators.js'
+import { classMap } from 'lit/directives/class-map.js'
+import strings from '../../translations/no.json'
+import { getWeek, eachDayOfInterval, getISODay, format as dateFormat } from 'date-fns'
+import { csvToArray, stringToDate, stringsToDate } from '../../helpers/converters'
+import { PktElement } from '../element'
+// TODO: Change this to @oslokommune/punkt-elements as soon as it exists
+import '../icon'
+
+@customElement('pkt-el-calendar')
+export class PktCalendar extends PktElement {
+  /**
+   * Element attributes
+   */
+  @property({ converter: stringToDate }) date: Date = new Date()
+  @property({ converter: csvToArray, reflect: true }) selected: string[] = []
+  @property({ converter: csvToArray }) excludeweekdays: string[] = []
+  @property({ converter: stringsToDate }) excludedates: Date[] = []
+  @property({ converter: stringToDate }) earliest: Date | null = null
+  @property({ converter: stringToDate }) latest: Date | null = null
+
+  @property({ type: Boolean, reflect: true }) weeknumbers: boolean = false
+  @property({ type: Boolean, reflect: true }) withcontrols: boolean = false
+  @property({ type: Boolean, reflect: true }) multiple: boolean = false
+  @property({ type: Boolean, reflect: true }) range: boolean = false
+
+  /**
+   * Strings
+   */
+  @property({ type: Array }) dayStrings: string[] = strings.dates.daysShort
+  @property({ type: Array }) monthStrings: string[] = strings.dates.months
+  @property({ type: String }) weekString: string = strings.dates.week
+  @property({ type: String }) prevMonthString: string = strings.dates.prevMonth
+  @property({ type: String }) nextMonthString: string = 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
+
+  /**
+   * Runs on mount, used to set up various values and whatever you need to run
+   */
+  connectedCallback() {
+    const today = this.date
+    this.year = today.getFullYear()
+    this.month = today.getMonth()
+    this.week = getWeek(new Date(this.year, this.month, 1))
+    this.selected.length &&
+      this.selected.forEach((d) => {
+        this._selected.push(new Date(d))
+      })
+    super.connectedCallback()
+  }
+
+  /**
+   * Component functionality and render
+   */
+  render() {
+    return html`
+      <div class="pkt-calendar ${this.weeknumbers && 'pkt-cal-weeknumbers'}">
+        <nav class="pkt-cal-month-nav">
+          <button
+            @click=${this.isPrevMonthAllowed() && this.prevMonth}
+            class="pkt-btn pkt-btn--tertiary pkt-btn--small pkt-btn--icon-only"
+            ?disabled=${!this.isPrevMonthAllowed()}
+          >
+            <pkt-el-icon class="pkt-btn__icon" name="chevron-thin-left"></pkt-el-icon>
+            <span class="pkt-btn__text">${this.prevMonthString}</span>
+          </button>
+          ${this.renderMonthNav()}
+          <button
+            @click=${this.isNextMonthAllowed() && this.nextMonth}
+            class="pkt-btn pkt-btn--tertiary pkt-btn--small pkt-btn--icon-only"
+            ?disabled=${!this.isNextMonthAllowed()}
+          >
+            <pkt-el-icon class="pkt-btn__icon" name="chevron-thin-right"></pkt-el-icon>
+            <span class="pkt-btn__text">${this.nextMonthString}</span>
+          </button>
+        </nav>
+        <ul class="pkt-cal-days pkt-txt-12-medium" role="grid">
+          ${this.renderDayNames()} ${this.renderCalendarBody()}
+        </ul>
+      </div>
+    `
+  }
+
+  private renderDayNames() {
+    const days = []
+    if (this.weeknumbers) {
+      days.push(html`<li>${this.weekString}</li>`)
+    }
+    for (let i = 0; i < this.dayStrings.length; i++) {
+      days.push(html`<li>${this.dayStrings[i]}</li>`)
+    }
+    return days
+  }
+
+  private renderMonthNav() {
+    let monthView = []
+    if (this.withcontrols) {
+      monthView.push(html`<div class="pkt-cal-month-picker">
+        <select
+          class="pkt-input pkt-input-compact"
+          @change=${(e: any) => {
+            this.changeMonth(this.year, e.target.value)
+          }}
+        >
+          ${this.monthStrings.map(
+            (month, index) =>
+              html`<option value=${index} ?selected=${this.month === index}>${month}</option>`,
+          )}
+        </select>
+        <input
+          class="pkt-input pkt-cal-input-year pkt-input-compact"
+          type="number"
+          size="4"
+          placeholder="0000"
+          @change=${(e: any) => {
+            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 renderCalendarBody() {
+    const today = new Date()
+    const firstDayOfMonth = new Date(this.year, this.month, 1)
+    const lastDayOfMonth = new Date(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 = new Date(this.year, this.month, 0)
+    const numDaysPrevMonth = lastDayOfPrevMonth.getDate()
+
+    let dayCounter = 1
+    this.week = getWeek(new Date(this.year, this.month, 1))
+
+    const rows = []
+
+    for (let i = 0; i < numRows; i++) {
+      const cells = []
+
+      this.weeknumbers && cells.push(html`<li class="pkt-cal-week">${this.week}</li>`)
+      this.week++
+
+      for (let j = 1; j < 8; j++) {
+        if (i === 0 && j < startingDay) {
+          const dayFromPrevMonth = numDaysPrevMonth - (startingDay - j - 1)
+          cells.push(html`<li class="pkt-cal-other">
+            <button class="pkt-btn pkt-btn--tertiary pkt-btn--small pkt-btn--label-only" disabled>
+              <span class="pkt-btn__text pkt-txt-14-light">${dayFromPrevMonth}</span>
+            </button>
+          </li>`)
+        } else if (dayCounter > numDays) {
+          cells.push(html`<li class="pkt-cal-other">
+            <button class="pkt-btn pkt-btn--tertiary pkt-btn--small pkt-btn--label-only" disabled>
+              <span class="pkt-btn__text pkt-txt-14-light">${dayCounter - numDays}</span>
+            </button>
+          </li>`)
+          dayCounter++
+        } else {
+          const currentDate = new Date(this.year, this.month, dayCounter)
+          const currentDateISO = this.formatISODate(currentDate)
+          const isToday = currentDateISO === this.formatISODate(today)
+          const isSelected = this.selected.includes(currentDateISO)
+          const classes = {
+            'pkt-cal-today': isToday,
+            'pkt-cal-selected': isSelected,
+            'pkt-cal-in-range': this.isInRange(currentDate),
+            '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 === this.formatISODate(this.rangeHovered),
+          }
+          cells.push(
+            html`<li class=${classMap(classes)}>
+              <button
+                class="pkt-btn pkt-btn--tertiary pkt-btn--small pkt-btn--label-only"
+                @click=${() => this.handleDateSelect(currentDate)}
+                @mouseover=${() =>
+                  this.range &&
+                  !this.isExcluded(j, currentDate) &&
+                  this.handleRangeHover(currentDate)}
+                ?disabled=${this.isExcluded(j, currentDate)}
+              >
+                <span class="pkt-btn__text pkt-txt-14-light">${dayCounter}</span>
+              </button>
+            </li>`,
+          )
+          dayCounter++
+        }
+      }
+
+      rows.push(html`${cells}`)
+    }
+
+    return rows
+  }
+
+  private isExcluded(weekday: number, date: Date) {
+    if (this.excludeweekdays.includes(weekday.toString())) return true
+    if (this.earliest && date < this.earliest) return true
+    if (this.latest && date > this.latest) return true
+    return this.excludedates.some((x) => {
+      return x.toDateString() === date.toDateString()
+    })
+  }
+
+  private formatISODate(date: Date) {
+    return dateFormat(date, 'yyyy-MM-dd')
+  }
+
+  isPrevMonthAllowed() {
+    const prevMonth = new Date(this.year, this.month, 0)
+    if (this.earliest && 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 = new Date(this.year, this.month === 11 ? 0 : this.month + 1, 1)
+    if (this.latest && 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 = year
+    this.month = month
+    this.requestUpdate()
+  }
+
+  private isInRange(date: Date) {
+    if (this.range && this._selected.length === 2) {
+      if (date > this._selected[0] && date < this._selected[1]) return true
+    } else if (this.range && this._selected.length === 1 && this.rangeHovered) {
+      if (date > this._selected[0] && date < this.rangeHovered) return true
+    }
+    return false
+  }
+
+  private isRangeAllowed(date: Date) {
+    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) => {
+            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.splice(0, this.selected.length)
+    this._selected.splice(0, this._selected.length)
+  }
+
+  private addToSelected(selectedDate: Date) {
+    this.selected.push(this.formatISODate(selectedDate))
+    this._selected.push(selectedDate)
+    this.requestUpdate()
+  }
+
+  private removeFromSelected(selectedDate: Date) {
+    const selectedDateISO = this.formatISODate(selectedDate)
+    this.selected.splice(this.selected.indexOf(selectedDateISO), 1)
+    this._selected.splice(this.selected.indexOf(selectedDateISO), 1)
+  }
+
+  private toggleSelected(selectedDate: Date) {
+    const selectedDateISO = this.formatISODate(selectedDate)
+    this.selected.includes(selectedDateISO)
+      ? this.removeFromSelected(selectedDate)
+      : this.addToSelected(selectedDate)
+  }
+
+  private handleRangeSelect(selectedDate: Date) {
+    const selectedDateISO = this.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)
+      }
+    }
+  }
+
+  private handleRangeHover(date: Date) {
+    if (
+      this.range &&
+      this._selected.length === 1 &&
+      this.isRangeAllowed(date) &&
+      this._selected[0] < date
+    ) {
+      this.rangeHovered = date
+    } else {
+      this.rangeHovered = null
+    }
+  }
+
+  private handleDateSelect(selectedDate: Date) {
+    if (this.range) {
+      this.handleRangeSelect(selectedDate)
+    } else if (this.multiple) {
+      this.toggleSelected(selectedDate)
+    } else {
+      this.emptySelected()
+      this.addToSelected(selectedDate)
+    }
+    this.dispatchEvent(
+      new CustomEvent('date-selected', {
+        detail: this.selected,
+        bubbles: true,
+        composed: true,
+      }),
+    )
+  }
+}

package/src/components/component-template/index.ts

@@ -0,0 +1,113 @@
+import { html } from 'lit'
+import { customElement, property } from 'lit/decorators.js'
+import { ref } from 'lit/directives/ref.js'
+import { PktElement } from '../element'
+
+// If you need to convert an object to a list of classes, use classMap
+import { classMap } from 'lit/directives/class-map.js'
+
+// If you need text strings add them in this file and include it
+import translations from '../../translations/no.json'
+
+// If you need to convert attribute strings to JavaScript objects,
+// use helpers from converters.ts
+import { csvToArray } from '../../helpers/converters'
+
+@customElement('pkt-el-component')
+export class PktComponent extends PktElement {
+  /**
+   * Element attributes => props
+   * Example:
+   * <pkt-el-component string="hei" strings="hei,og,hallo" darkmode>
+   *  Hei!
+   * </pkt-el-component>
+   */
+
+  @property({ type: String }) string: string = ''
+  @property({ converter: csvToArray }) strings: string[] = []
+  @property({ type: Boolean }) darkmode: boolean = false
+
+  /**
+   * Private properties, for internal use only
+   */
+
+  @property({ type: Array }) private _list: string[] = []
+
+  /**
+   * Runs on mount, used to set up various values and whatever you need to run
+   */
+  connectedCallback() {
+    this.strings.length &&
+      this.strings.forEach((string) => {
+        this._list.push(string.toUpperCase())
+      })
+    super.connectedCallback()
+  }
+
+  /**
+   * Render functions
+   */
+  render() {
+    const classes = {
+      'pkt-component': true,
+      'pkt-component--has-list': this.strings.length > 0,
+      'pkt-darkmode': this.darkmode,
+    }
+
+    return html`
+      <div class="${classMap(classes)}">
+        <h1 class="pkt-txt-28">${this.string}</h1>
+
+        <h2 class="pkt-txt-22">Innhold fra attributter og funksjoner</h2>
+        <div>${this.renderList(this.strings)}</div>
+        <div>${this.renderList(this.doStuff(this._list))}</div>
+
+        <h2 class="pkt-txt-22">Slot</h2>
+        <div ${ref(this.defaultSlot)}>defaultSlotRef</div>
+        <h2 class="pkt-txt-22">Named slot</h2>
+        <select
+          name="named-slot"
+          ${ref(this.namedSlot)}
+          @change=${(e: Event) => alert((e.target as HTMLSelectElement).value)}
+        >
+          namedSlotRef
+        </select>
+
+        <h2 class="pkt-txt-22">Knapp som emitter en event</h2>
+        <button type="button" @click=${() => this.handleGreeting()}>
+          Si ${translations.example.hi}
+        </button>
+      </div>
+    `
+  }
+
+  private renderList(list: string[]) {
+    return html`
+      <ul>
+        ${list.map((i) => html`<li>${i}</li>`)}
+      </ul>
+    `
+  }
+
+  /**
+   * Add other functionality under here
+   */
+
+  private doStuff(val: string[]) {
+    return val.reverse()
+  }
+
+  /**
+   * Handlers for returning data from the component
+   */
+
+  private handleGreeting() {
+    this.dispatchEvent(
+      new CustomEvent('pkt-greeting', {
+        detail: 'Hei på deg!',
+        bubbles: true,
+        composed: true,
+      }),
+    )
+  }
+}

package/src/components/element/index.ts

@@ -0,0 +1,37 @@
+import { LitElement } from 'lit'
+import { Ref, createRef } from 'lit/directives/ref.js'
+import { PktSlotController } from '@/controllers/pkt-slot-controller'
+
+export class PktElement extends LitElement {
+  /**
+   * Runs on mount, used to set up various values and whatever you need to run
+   */
+  connectedCallback() {
+    super.connectedCallback()
+  }
+  /**
+   * Make sure the component renders in light DOM instead of shadow DOM
+   */
+  createRenderRoot() {
+    return this
+  }
+
+  /**
+   * Add support for Hot Module Reloading in dev mode
+   */
+  hotReplacedCallback() {
+    this.requestUpdate()
+  }
+
+  /**
+   * Set up slot support for Light DOM
+   */
+  slotController: PktSlotController
+  defaultSlot: Ref<HTMLElement> = createRef()
+  namedSlot: Ref<HTMLElement> = createRef()
+
+  constructor() {
+    super()
+    this.slotController = new PktSlotController(this, this.defaultSlot, this.namedSlot)
+  }
+}

package/src/components/icon/index.ts

@@ -0,0 +1,100 @@
+import { LitElement, html } from 'lit'
+import { customElement, property } from 'lit/decorators.js'
+import { unsafeSVG } from 'lit/directives/unsafe-svg.js'
+
+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>'
+const dlStatus: { [key: string]: string } = {}
+
+const downloadIconOrGetFromCache = async (name: string, path: string): Promise<string | null> => {
+  let i = 0
+  while (dlStatus[path + name + '.svg'] === 'fetching') {
+    i++
+    if (i > 50) break
+    await sleep(50)
+  }
+  if (localStorage.getItem(path + name + '.svg')) {
+    return Promise.resolve(localStorage.getItem(path + name + '.svg'))
+  } else if (typeof window.fetch === 'function') {
+    dlStatus[path + name + '.svg'] = 'fetching'
+    return Promise.resolve(
+      fetch(path + name + '.svg')
+        .then((response) => {
+          if (!response.ok) {
+            // eslint-disable-next-line no-console
+            console.error('Missing icon: ' + path + name + '.svg')
+            return errorSvg
+          } else {
+            return response.text()
+          }
+        })
+        .then((text) => {
+          if (text !== errorSvg) {
+            localStorage.setItem(path + name + '.svg', text)
+          }
+          dlStatus[path + name + '.svg'] = 'fetched'
+          return text
+        }),
+    )
+  }
+  return Promise.resolve(errorSvg)
+}
+
+@customElement('pkt-el-icon')
+export class PktIcon extends LitElement {
+  /**
+   * Element attributes
+   */
+  @property({ type: String, reflect: true }) name: string = ''
+  @property({ type: String, reflect: true }) path: string =
+    'https://punkt-cdn.oslo.kommune.no/latest/icons/'
+
+  @property({ type: SVGElement }) private icon: any = unsafeSVG(errorSvg)
+
+  /**
+   * Make sure the component renders in light DOM instead of shadow DOM
+   */
+  createRenderRoot() {
+    return this
+  }
+
+  /**
+   * Add support for Hot Module Reloading in dev mode
+   */
+  hotReplacedCallback() {
+    this.requestUpdate()
+  }
+
+  /**
+   * Runs on mount, used to set up various values and whatever you need to run
+   */
+  async connectedCallback() {
+    if (this.name && this.path) {
+      this.icon = unsafeSVG(
+        await downloadIconOrGetFromCache(this.name, this.path).then((res) => res),
+      ) as SVGElement
+    }
+    super.connectedCallback()
+  }
+
+  /**
+   * Runs every time a property changes
+   */
+  async update(changedProperties: Map<string, unknown>) {
+    if (changedProperties.has('name')) {
+      if (this.name && this.path) {
+        this.icon = unsafeSVG(
+          await downloadIconOrGetFromCache(this.name, this.path).then((res) => res),
+        ) as SVGElement
+      }
+    }
+    super.update(changedProperties)
+  }
+
+  /**
+   * Component functionality and render
+   */
+  render() {
+    return html`${this.icon}`
+  }
+}

package/src/components/index.ts

@@ -0,0 +1,3 @@
+export { PktCalendar } from './calendar'
+export { PktIcon } from './icon'
+export { PktComponent } from './component-template'