@oslokommune/punkt-elements 12.1.0 → 12.3.0

package/src/components/card/index.ts

@@ -0,0 +1,78 @@
+import { PktElement } from '../element'
+import { PktSlotController } from '../../controllers/pkt-slot-controller'
+import { ref, createRef, Ref } from 'lit/directives/ref.js'
+import { html, nothing } from 'lit'
+import { classMap } from 'lit/directives/class-map.js'
+import { customElement, property } from 'lit/decorators.js'
+import '../icon'
+import '../tag'
+import { IPktTag } from '../tag'
+import specs from 'componentSpecs/card.json'
+
+export type ICardSkin = 'outlined' | 'gray' | 'beige' | 'green' | 'blue'
+export type IDirection = 'portrait' | 'landscape'
+
+@customElement('pkt-card')
+export class PktCard extends PktElement {
+  defaultSlot: Ref<HTMLElement> = createRef()
+
+  constructor() {
+    super()
+    this.slotController = new PktSlotController(this, this.defaultSlot)
+  }
+
+  @property({ type: String, reflect: true }) skin: ICardSkin = specs.props.skin.default as ICardSkin
+  @property({ type: String, reflect: true }) direction: IDirection = specs.props.direction
+    .default as IDirection
+  @property({ type: Object, reflect: true }) image: { src: string; alt: string } = {
+    src: '',
+    alt: '',
+  }
+  @property({ type: String, reflect: true }) heading: string = ''
+  @property({ type: String, reflect: true }) subheading: string = ''
+  @property({ type: Array, reflect: true }) tags: (Omit<IPktTag, 'closeTag'> & { text: string })[] =
+    []
+
+  connectedCallback() {
+    super.connectedCallback()
+    console.log(this.tags)
+  }
+
+  render() {
+    const classes = {
+      'pkt-card': true,
+      [`pkt-card--${this.skin}`]: this.skin,
+      [`pkt-card--${this.direction}`]: this.direction,
+    }
+
+    return html`
+      <div class=${classMap(classes)}>
+        ${this.image.src &&
+        html`
+          <div class="pkt-card__image">
+            <img src=${this.image.src} alt=${this.image.alt || ''} />
+          </div>
+        `}
+        <div class="pkt-card__wrapper">
+          ${this.tags.length > 0
+            ? html`
+                <div class="pkt-card__tags">
+                  ${this.tags.map(
+                    (tag) => html`
+                      <pkt-tag textStyle="normal-text" size="medium" skin=${tag.skin}>
+                        ${tag.text}
+                      </pkt-tag>
+                    `,
+                  )}
+                </div>
+              `
+            : nothing}
+          ${this.heading && html`<h3 class="pkt-txt-30-medium">${this.heading}</h3>`}
+          ${this.subheading && html`<p class="pkt-txt-20-light">${this.subheading}</p>`}
+          ${this.defaultSlot &&
+          html`<div class="pkt-card__content" ${ref(this.defaultSlot)}></div>`}
+        </div>
+      </div>
+    `
+  }
+}

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

@@ -1,7 +1,8 @@
 import { html } from 'lit'
 import { customElement, property } from 'lit/decorators.js'
-import { ref } from 'lit/directives/ref.js'
 import { PktElement } from '../element'
+import { PktSlotController } from '@/controllers/pkt-slot-controller'
+import { ref, Ref, createRef } from 'lit/directives/ref.js'
 
 // If you need to convert an object to a list of classes, use classMap
 import { classMap } from 'lit/directives/class-map.js'
@@ -13,19 +14,24 @@ import translations from '../../translations/no.json'
 // use helpers from converters.ts
 import { csvToArray } from '../../helpers/converters'
 
-@customElement('pkt-el-component')
+@customElement('pkt-component')
 export class PktComponent extends PktElement {
   /**
    * Element attributes => props
    * Example:
-   * <pkt-el-component string="hei" strings="hei,og,hallo" darkmode>
+   * <pkt-component string="hei" strings="hei,og,hallo" darkmode>
    *  Hei!
-   * </pkt-el-component>
+   * </pkt-component>
    */
 
-  @property({ type: String }) string: string = ''
-  @property({ converter: csvToArray }) strings: string[] = []
-  @property({ type: Boolean }) darkmode: boolean = false
+  @property({ type: String })
+  string: string = ''
+
+  @property({ converter: csvToArray })
+  strings: string[] = []
+
+  @property({ type: Boolean })
+  darkmode: boolean = false
 
   /**
    * Private properties, for internal use only
@@ -44,6 +50,18 @@ export class PktComponent extends PktElement {
     super.connectedCallback()
   }
 
+  /**
+   * 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)
+  }
+
   /**
    * Render functions
    */
@@ -105,8 +123,6 @@ export class PktComponent extends PktElement {
     this.dispatchEvent(
       new CustomEvent('pkt-greeting', {
         detail: 'Hei på deg!',
-        bubbles: true,
-        composed: true,
       }),
     )
   }

package/src/components/datepicker/index.ts

@@ -0,0 +1,546 @@
+import { html, nothing, PropertyValues } from 'lit'
+import { customElement, property } from 'lit/decorators.js'
+import { Ref, createRef, ref } from 'lit/directives/ref.js'
+import { classMap } from 'lit/directives/class-map.js'
+import { repeat } from 'lit/directives/repeat.js'
+import { format } from 'date-fns'
+import { PktInputElement } from '../element'
+import { PktCalendar } from '../calendar'
+import converters from '../../helpers/converters'
+import specs from 'componentSpecs/datepicker.json'
+import '../calendar'
+import '../input-wrapper'
+import '../icon'
+import '../tag'
+
+const sleep = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms))
+@customElement('pkt-datepicker')
+export class PktDatepicker extends PktInputElement {
+  /**
+   * Element attributes and properties
+   */
+  @property({ type: String, reflect: true })
+  value: string | string[] = ''
+
+  @property({ type: Array, reflect: false })
+  _value: string[] = this.value
+    ? !Array.isArray(this.value)
+      ? this.value.split(',')
+      : this.value
+    : []
+
+  @property({ type: String, reflect: true })
+  label: string = 'Datovelger'
+
+  @property({ type: String, reflect: true })
+  helptext: string = ''
+
+  @property({ type: String, reflect: true })
+  helptextDropdown: string = ''
+
+  @property({ type: String, reflect: true })
+  helptextDropdownButton: string = specs.props.helptextDropdownButton.default
+
+  @property({ type: String, reflect: true })
+  dateformat: string = specs.props.dateformat.default
+
+  @property({ type: Boolean, reflect: true })
+  multiple: boolean = specs.props.multiple.default
+
+  @property({ type: Number })
+  maxlength: number | null = specs.props.maxlength.default
+
+  @property({ type: Boolean, reflect: true })
+  range: boolean = specs.props.range.default
+
+  @property({ type: Boolean, reflect: true })
+  weeknumbers: boolean = specs.props.weeknumbers.default
+
+  @property({ type: Boolean, reflect: true })
+  withcontrols: boolean = specs.props.withcontrols.default
+
+  @property({ type: Boolean, reflect: true })
+  fullwidth: boolean = false
+
+  @property({ converter: converters.csvToArray })
+  excludedates: string[] = []
+
+  @property({ converter: converters.csvToArray })
+  excludeweekdays: string[] = []
+
+  @property({ type: String, reflect: true })
+  currentmonth: string = this.formatISODate(new Date())
+
+  @property({ type: Boolean, reflect: true }) calendarOpen: boolean = false
+
+  /**
+   * Housekeeping / lifecycle methods
+   */
+
+  async connectedCallback() {
+    super.connectedCallback()
+    document &&
+      document.body.addEventListener('click', (e: MouseEvent) => {
+        if (
+          this.inputRef?.value &&
+          this.btnRef?.value &&
+          !this.inputRef.value.contains(e.target as Node) &&
+          !(this.inputRefTo.value && this.inputRefTo.value.contains(e.target as Node)) &&
+          !this.btnRef.value.contains(e.target as Node) &&
+          !(e.target as Element).closest('.pkt-calendar-popup')
+        ) {
+          this.hideCalendar()
+        }
+      })
+
+    if (this.value.length && this._value.length === 0) {
+      this._value = !Array.isArray(this.value) ? this.value.split(',') : this.value
+    }
+    this.min = this.min || specs.props.min.default
+    this.max = this.max || specs.props.max.default
+
+    if (typeof this.excludedates === 'string') {
+      this.excludedates = (this.excludedates as unknown as string).split(',')
+    }
+
+    if (typeof this.excludeweekdays === 'string') {
+      this.excludeweekdays = (this.excludeweekdays as unknown as string).split(',')
+    }
+
+    if ((this.multiple || this.range) && this.name && !this.name.endsWith('[]')) {
+      this.name = this.name + '[]'
+    }
+
+    if (this.calendarOpen) {
+      await sleep(20)
+      this.handleCalendarPosition()
+    }
+  }
+
+  disconnectedCallback(): void {
+    super.disconnectedCallback()
+    document &&
+      document.body.removeEventListener('click', (e: MouseEvent) => {
+        if (
+          this.inputRef?.value &&
+          this.btnRef?.value &&
+          !this.inputRef.value.contains(e.target as Node) &&
+          !this.btnRef.value.contains(e.target as Node)
+        ) {
+          this.hideCalendar()
+        }
+      })
+  }
+
+  attributeChangedCallback(name: string, _old: string | null, value: string | null): void {
+    super.attributeChangedCallback(name, _old, value)
+    if (name === 'value') {
+      if (this.value === '' || this.value.length === 0) {
+        this._value = []
+      } else if (this.value.length && this._value.length === 0) {
+        const dates = !Array.isArray(this.value) ? this.value.split(',') : this.value
+        for (const date of dates) {
+          if (date && !this._value.includes(date)) {
+            this.calRef?.value?.handleDateSelect(this.fromISOToDate(date))
+          }
+        }
+      }
+
+      this.requestUpdate('value')
+    }
+
+    if (name === 'excludedates' && typeof this.excludedates === 'string') {
+      this.excludedates = value?.split(',') ?? []
+    }
+
+    if (name === 'excludeweekdays' && typeof this.excludeweekdays === 'string') {
+      this.excludeweekdays = value?.split(',') ?? []
+    }
+  }
+
+  updated(changedProperties: PropertyValues): void {
+    super.updated(changedProperties)
+    if (changedProperties.has('value')) {
+      if (this.range && this._value.length === 1) {
+        return
+      }
+      this.onInput(this.value)
+    }
+  }
+
+  /**
+   * Element references
+   */
+
+  // When using PktInputElement, we always need to define `inputRef`
+  inputRef: Ref<HTMLInputElement> = createRef()
+  inputRefTo: Ref<HTMLInputElement> = createRef()
+  btnRef: Ref<HTMLButtonElement> = createRef()
+  calRef: Ref<PktCalendar> = createRef()
+  popupRef: Ref<HTMLDivElement> = createRef()
+
+  /**
+   * CSS classes
+   */
+
+  inputClasses = {
+    'pkt-input': true,
+    'pkt-datepicker__input': true,
+    'pkt-input--fullwidth': this.fullwidth,
+  }
+
+  buttonClasses = {
+    'pkt-input-icon': true,
+    'pkt-btn': true,
+    'pkt-btn--icon-only': true,
+    'pkt-btn--tertiary': true,
+  }
+
+  /**
+   * Date value manipulation
+   */
+
+  private formatISODate(date: Date) {
+    return date.toISOString().split('T')[0]
+  }
+
+  fromISOToDate = (date: string | null) => {
+    if (!date) {
+      return null
+    }
+    const dateObj = new Date(date)
+    dateObj.setHours(12, 0, 0, 0)
+    if (isNaN(dateObj.getTime())) {
+      return null
+    }
+    return dateObj
+  }
+
+  fromISOtoLocal = (date: string) => {
+    const dateObj = new Date(date)
+    if (isNaN(dateObj.getTime())) {
+      return ''
+    }
+    return format(dateObj, this.dateformat)
+  }
+
+  massageDates = (dates: (string | undefined)[]) => {
+    const dateObjects = dates.map((date) => {
+      return date ?? undefined
+    }) as string[]
+    return this.multiple ? dateObjects : this.range ? dateObjects.slice(0, 2) : [dateObjects[0]]
+  }
+
+  renderInput() {
+    return html`
+      <input
+        class="${classMap(this.inputClasses)}"
+        type="date"
+        id="${this.id}-input"
+        name="${this.name}"
+        .value=${this.value}
+        min=${this.min}
+        max=${this.max}
+        @focus=${this.showCalendar}
+        @click=${(e: MouseEvent) => {
+          e.preventDefault()
+        }}
+        ?disabled=${this.disabled}
+        @blur=${(e: Event) => {
+          this.manageValidity(e.target as HTMLInputElement)
+          this.value = (e.target as HTMLInputElement).value
+          this._value = this.massageDates((e.target as HTMLInputElement).value.split(','))
+        }}
+        @change=${(e: Event) => {
+          e.stopImmediatePropagation()
+        }}
+        ${ref(this.inputRef)}
+      />
+    `
+  }
+
+  renderRangeInput() {
+    return html`
+      <div class="pkt-input-prefix">Fra</div>
+      <input
+        class=${classMap(this.inputClasses)}
+        type="date"
+        id="${this.id}-input"
+        name="${this.name}"
+        .value=${this._value[0] ?? ''}
+        min=${this.min}
+        max=${this.max}
+        @focus=${this.showCalendar}
+        @click=${(e: MouseEvent) => {
+          e.preventDefault()
+        }}
+        ?disabled=${this.disabled}
+        @blur=${(e: Event) => {
+          if ((e.target as HTMLInputElement).value) {
+            this.manageValidity(e.target as HTMLInputElement)
+            const date = this.fromISOToDate((e.target as HTMLInputElement).value)
+            if (date) {
+              this.calRef?.value?.handleDateSelect(date)
+            }
+          }
+        }}
+        @change=${(e: Event) => {
+          e.stopImmediatePropagation()
+        }}
+        ${ref(this.inputRef)}
+      />
+      <div class="pkt-input-prefix">Til</div>
+      <input
+        class=${classMap(this.inputClasses)}
+        type="date"
+        id="${this.id}-to"
+        name="${this.name}-to"
+        .value=${this._value[1] ?? ''}
+        min=${this.min}
+        max=${this.max}
+        @focus=${this.showCalendar}
+        @click=${(e: MouseEvent) => {
+          e.preventDefault()
+        }}
+        ?disabled=${this.disabled}
+        @blur=${(e: Event) => {
+          if ((e.target as HTMLInputElement).value) {
+            this.manageValidity(e.target as HTMLInputElement)
+            const val = (e.target as HTMLInputElement).value
+            if (this.min && this.min > val) {
+              this.internals.setValidity(
+                { rangeUnderflow: true },
+                this.strings.forms.messages.rangeUnderflow,
+                e.target as HTMLInputElement,
+              )
+            } else if (this.max && this.max < val) {
+              this.internals.setValidity(
+                { rangeOverflow: true },
+                this.strings.forms.messages.rangeOverflow,
+                e.target as HTMLInputElement,
+              )
+            }
+            const date = this.fromISOToDate((e.target as HTMLInputElement).value)
+            if (date) {
+              if (this._value[1] !== this.formatISODate(date)) {
+                this.calRef?.value?.handleDateSelect(date)
+              }
+            }
+          }
+        }}
+        @change=${(e: Event) => {
+          e.stopImmediatePropagation()
+        }}
+        ${ref(this.inputRefTo)}
+      />
+    `
+  }
+
+  renderMultipleInput() {
+    return html`
+      <input
+        class=${classMap(this.inputClasses)}
+        type="date"
+        id="${this.id}-input"
+        name="${this.name}"
+        min=${this.min}
+        max=${this.max}
+        @focus=${this.showCalendar}
+        @click=${(e: MouseEvent) => {
+          e.preventDefault()
+        }}
+        @blur=${(e: Event) => {
+          this.addToSelected(e)
+        }}
+        @keydown=${(e: KeyboardEvent) => {
+          if (e.key === ',' || e.key === 'Enter') {
+            e.preventDefault()
+            this.addToSelected(e)
+          }
+        }}
+        ?disabled=${this.disabled || (this.maxlength && this._value.length >= this.maxlength)}
+        @change=${(e: Event) => {
+          e.stopImmediatePropagation()
+        }}
+        ${ref(this.inputRef)}
+      />
+    `
+  }
+
+  renderTags() {
+    return html`
+      <div class="pkt-datepicker__tags" aria-live="polite">
+        ${!!this._value[0]
+          ? repeat(
+              this._value ?? [],
+              (date) => date,
+              (date) => html`
+                <pkt-tag
+                  .id="${this.id + date + '-tag'}"
+                  closeTag
+                  @onClose=${() => this.calRef.value?.handleDateSelect(this.fromISOToDate(date))}
+                  >${this.fromISOtoLocal(date)}</pkt-tag
+                >
+              `,
+            )
+          : nothing}
+      </div>
+    `
+  }
+
+  renderCalendar() {
+    return html`<div
+      class="pkt-calendar-popup pkt-${this.calendarOpen ? 'show' : 'hide'}"
+      @focusout=${this.handleFocusOut}
+      id="${this.id}-popup"
+      ${ref(this.popupRef)}
+    >
+      <pkt-calendar
+        ?multiple=${this.multiple}
+        ?range=${this.range}
+        ?weeknumbers=${this.weeknumbers}
+        ?withcontrols=${this.withcontrols}
+        ?focused=${this.calendarOpen}
+        .maxMultiple=${this.maxlength}
+        .selected=${this._value}
+        .earliest=${this.min}
+        .latest=${this.max}
+        .excludedates=${Array.isArray(this.excludedates)
+          ? this.excludedates
+          : (this.excludedates as string).split(',')}
+        .excludeweekdays=${this.excludeweekdays}
+        .currentmonth=${new Date(this.currentmonth)}
+        @date-selected=${(e: CustomEvent) => {
+          this.value =
+            !this.multiple && !this.range
+              ? !Array.isArray(e.detail)
+                ? e.detail.split(',')[0]
+                : e.detail[0]
+              : e.detail
+          this._value = e.detail
+          if (this.inputRef.value) {
+            if (this.range && this.inputRefTo.value) {
+              this.inputRef.value.value = this._value[0] ?? ''
+              this.inputRefTo.value.value = this._value[1] ?? ''
+            } else if (!this.multiple) {
+              this.inputRef.value.value = this._value.length ? this._value[0] : ''
+            }
+          }
+        }}
+        @close=${this.hideCalendar}
+        ${ref(this.calRef)}
+      ></pkt-calendar>
+    </div>`
+  }
+
+  render() {
+    return html`
+      <pkt-input-wrapper
+        label="${this.label}"
+        forId="${this.id}-input"
+        ?counter=${this.multiple && !!this.maxlength}
+        .counterCurrent=${this.value ? this._value.length : 0}
+        .counterMaxLength=${this.maxlength}
+        ?disabled=${this.disabled}
+        ?hasError=${this.hasError}
+        ?required=${this.required}
+        ?optionalTag=${this.optionalTag}
+        ?requiredTag=${this.requiredTag}
+        .optionalText=${this.optionalText}
+        .requiredText=${this.requiredText}
+        .errorMessage=${this.errorMessage}
+        .helptext=${this.helptext}
+        .helptextDropdown=${this.helptextDropdown}
+        .helptextDropdownButton=${this.helptextDropdownButton}
+        class="pkt-datepicker"
+      >
+        ${this.multiple ? this.renderTags() : nothing}
+        <div class="pkt-datepicker__inputs ${this.range ? 'pkt-input__range-inputs' : ''}">
+          <div class="pkt-input__container">
+            ${this.range
+              ? this.renderRangeInput()
+              : this.multiple
+                ? this.renderMultipleInput()
+                : this.renderInput()}
+            <button
+              class="${classMap(this.buttonClasses)}"
+              @click=${this.toggleCalendar}
+              ${ref(this.btnRef)}
+            >
+              <pkt-icon name="calendar"></pkt-icon>
+              <span class="pkt-btn__text">${this.strings.calendar.buttonAltText}</span>
+            </button>
+          </div>
+        </div>
+      </pkt-input-wrapper>
+      ${this.renderCalendar()}
+    `
+  }
+
+  /**
+   * Handlers
+   */
+
+  handleCalendarPosition() {
+    if (this.popupRef.value && this.inputRef.value) {
+      const counter = this.multiple && !!this.maxlength
+
+      const inputRect =
+        this.inputRef.value.parentElement?.getBoundingClientRect() ||
+        this.inputRef.value.getBoundingClientRect()
+
+      const inputHeight = counter ? inputRect.height + 30 : inputRect.height
+      const popupHeight = this.popupRef.value.getBoundingClientRect().height
+
+      let top = counter ? 'calc(100% - 30px)' : '100%'
+      if (
+        inputRect &&
+        inputRect.top + popupHeight > window.innerHeight &&
+        inputRect.top - popupHeight > 0
+      ) {
+        top = `calc(100% - ${inputHeight}px - ${popupHeight}px)`
+      }
+      this.popupRef.value.style.top = top
+    }
+  }
+
+  addToSelected = (e: Event | KeyboardEvent) => {
+    const target = e.target as HTMLInputElement
+    const minAsDate = this.min ? new Date(this.min) : null
+    const maxAsDate = this.max ? new Date(this.max) : null
+    const date = new Date(target.value.split(',')[0])
+    date.setHours(12, 0, 0, 0)
+    if (
+      date &&
+      !isNaN(date.getTime()) &&
+      (!minAsDate || date >= minAsDate) &&
+      (!maxAsDate || date <= maxAsDate) &&
+      this.calRef.value
+    ) {
+      this.calRef.value.handleDateSelect(date)
+    }
+    target.value = ''
+    this.requestUpdate('value')
+  }
+
+  private handleFocusOut(e: FocusEvent) {
+    if (!this.contains(e.target as Node)) {
+      this.hideCalendar()
+    }
+  }
+
+  public async showCalendar() {
+    this.calendarOpen = true
+    await sleep(20)
+    this.handleCalendarPosition()
+  }
+
+  public hideCalendar() {
+    this.calendarOpen = false
+  }
+
+  public toggleCalendar(e: Event) {
+    e.preventDefault()
+    this.calendarOpen ? this.hideCalendar() : this.showCalendar()
+  }
+}