@oslokommune/punkt-elements 12.31.2 → 12.32.0

package/src/components/combobox/index.ts

@@ -0,0 +1,6 @@
+import { PktCombobox } from './combobox'
+
+export type { IPktCombobox, IPktComboboxOption, TPktComboboxTagPlacement } from './combobox'
+
+export { PktCombobox }
+export default PktCombobox

package/src/components/datepicker/datepicker.ts

@@ -512,6 +512,8 @@ export class PktDatepicker extends PktInputElement {
         .counterMaxLength=${this.maxlength}
         ?disabled=${this.disabled}
         ?hasError=${this.hasError}
+        ?hasFieldset=${this.hasFieldset}
+        ?inline=${this.inline}
         ?required=${this.required}
         ?optionalTag=${this.optionalTag}
         ?requiredTag=${this.requiredTag}

package/src/components/helptext/helptext.ts

@@ -74,7 +74,7 @@ export class PktHelptext extends PktElement {
     }
 
     const helptextElement = () => {
-      return html`<div>
+      return html`<div class="pkt-inputwrapper__helptext-container">
         <div class="pkt-inputwrapper__helptext" id="${this.forId}-helptext">
           <div class="pkt-contents" ${ref(this.defaultSlot)} name="helptext"></div>
           ${this.helptext && unsafeHTML(this.helptext)}

package/src/components/index.ts

@@ -4,6 +4,7 @@ export { PktBackLink } from '@/components/backlink'
 export { PktButton } from '@/components/button'
 export { PktCalendar } from '@/components/calendar'
 export { PktCard } from '@/components/card'
+export { PktCombobox } from './combobox'
 export { PktCheckbox } from '@/components/checkbox'
 export { PktComponent } from '../base-elements/component-template.js'
 export { PktDatepicker } from '@/components/datepicker/datepicker.js'
@@ -46,6 +47,12 @@ export type {
   TProgressbarTitlePosition,
 } from '@/components/progressbar'
 
+export type {
+  IPktCombobox,
+  IPktComboboxOption,
+  TPktComboboxTagPlacement,
+} from '@/components/combobox'
+
 export type { TTagSkin, TTagType } from '@/components/tag'
 
 export type { TSelectOption } from '@/components/select'

package/src/components/input-wrapper/input-wrapper.ts

@@ -11,6 +11,7 @@ import specs from 'componentSpecs/input-wrapper.json'
 import '@/components/helptext'
 import '@/components/icon'
 
+type TCounterPosition = 'top' | 'bottom'
 type Props = ElementProps<
   PktInputWrapper,
   | 'forId'
@@ -39,7 +40,7 @@ type Props = ElementProps<
 export class PktInputWrapper extends PktElement<Props> {
   defaultSlot: Ref<HTMLElement> = createRef()
   helptextSlot: Ref<HTMLElement> = createRef()
-  @state() hasHelptextSlot: boolean = false
+  @state() hasHelptextSlot: boolean = true
 
   constructor() {
     super()
@@ -57,6 +58,8 @@ export class PktInputWrapper extends PktElement<Props> {
   @property({ type: Boolean }) counter: boolean = specs.props.counter.default
   @property({ type: Number }) counterCurrent: number = 0
   @property({ type: Number }) counterMaxLength: number = 0
+  @property({ type: String }) counterError: string | null = null
+  @property({ type: String, reflect: false }) counterPosition: TCounterPosition = 'bottom'
   @property({ type: Boolean }) optionalTag: boolean = specs.props.optionalTag.default
   @property({ type: String }) optionalText: string = specs.props.optionalText.default
   @property({ type: Boolean }) requiredTag: boolean = specs.props.requiredTag.default
@@ -70,12 +73,12 @@ export class PktInputWrapper extends PktElement<Props> {
   @property({ type: Boolean }) useWrapper: boolean = specs.props.useWrapper.default
   @property({ type: String, reflect: true }) role: string | null = 'group'
 
-  public updateSlots(): void {
-    this.hasHelptextSlot = this.slotController.filledSlots.has('helptext')
+  public updateSlots(filledSlots: Set<string | null | undefined>): void {
+    this.hasHelptextSlot = filledSlots.has('helptext')
+    this.requestUpdate()
   }
 
   protected updated(changedProperties: PropertyValues): void {
-    this.updateSlots()
     super.updated(changedProperties)
   }
 
@@ -95,14 +98,6 @@ export class PktInputWrapper extends PktElement<Props> {
       'pkt-tag--beige': !this.optionalTag && this.requiredTag,
     }
 
-    const hasDropdown = !!this.helptextDropdown
-
-    const wrapperClasses = {
-      'pkt-inputwrapper__label': true,
-      'pkt-inputwrapper__fieldset': this.hasFieldset,
-      'pkt-inputwrapper__legend': this.hasFieldset,
-    }
-
     const describedBy = this.ariaDescribedby
       ? this.ariaDescribedby
       : this.helptext
@@ -126,13 +121,22 @@ export class PktInputWrapper extends PktElement<Props> {
     const labelElement = () => {
       if (this.useWrapper) {
         if (this.hasFieldset) {
-          return html`<legend class="pkt-inputwrapper__legend" id="${this.forId}-label">
+          return html`<legend
+            class="pkt-inputwrapper__legend"
+            id="${this.forId}-label"
+            @click=${this.handleLabelClick}
+          >
             ${this.label} ${tagElement()}
           </legend>`
-        } else if (hasDropdown) {
-          return html`<h2>${this.label} ${tagElement()}</h2>`
         } else {
-          return html`<span>${this.label} ${tagElement()}</span>`
+          return html`<label
+            class="pkt-inputwrapper__label"
+            for="${this.forId}"
+            aria-describedby="${describedBy}"
+            id="${this.forId}-label"
+            @click=${this.handleLabelClick}
+            >${this.label}${tagElement()}</label
+          >`
         }
       } else {
         return html`<label
@@ -147,6 +151,9 @@ export class PktInputWrapper extends PktElement<Props> {
     }
 
     const helptextElement = () => {
+      if (!this.helptext && !this.hasHelptextSlot && !this.helptextDropdown) {
+        return nothing
+      }
       return html`
         <pkt-helptext
           .forId=${this.forId}
@@ -166,7 +173,7 @@ export class PktInputWrapper extends PktElement<Props> {
     const counterElement = () => {
       if (this.counter) {
         return html`<div class="pkt-input__counter" aria-live="polite" aria-atomic="true">
-          ${this.counterCurrent || 0}
+          ${this.counterError ? this.counterError : nothing} ${this.counterCurrent || 0}
           ${this.counterMaxLength ? `/${this.counterMaxLength}` : nothing}
         </div>`
       } else {
@@ -194,31 +201,18 @@ export class PktInputWrapper extends PktElement<Props> {
     const inputContent = () => {
       return html`
         ${labelElement()} ${helptextElement()}
-        ${hasDropdown
-          ? html`<label for="${this.forId}" class="pkt-sr-only" aria-describedby="${describedBy}"
-              >${this.label}</label
-            >`
-          : nothing}
+        ${this.counterPosition === 'top' ? counterElement() : nothing}
         <div class="pkt-contents" ${ref(this.defaultSlot)}></div>
-        ${counterElement()} ${errorElement()}
+        ${this.counterPosition === 'bottom' ? counterElement() : nothing} ${errorElement()}
       `
     }
 
     const wrapperElement = () => {
       return this.hasFieldset
-        ? html`<fieldset class=${classMap(wrapperClasses)} aria-describedby="${describedBy}">
+        ? html`<fieldset class="pkt-inputwrapper__fieldset" aria-describedby="${describedBy}">
             ${inputContent()}
           </fieldset>`
-        : hasDropdown
-          ? html`<div class=${classMap(wrapperClasses)}>${inputContent()}</div>`
-          : html`<label
-              class=${classMap(wrapperClasses)}
-              for="${this.forId}"
-              aria-describedby="${describedBy}"
-              id="${this.forId}-label"
-            >
-              ${inputContent()}
-            </label>`
+        : html`<div class="pkt-inputwrapper__fieldset">${inputContent()}</div>`
     }
 
     return html`<div class=${classMap(classes)}>${wrapperElement()}</div> `
@@ -232,4 +226,18 @@ export class PktInputWrapper extends PktElement<Props> {
       }),
     )
   }
+
+  private handleLabelClick(e: MouseEvent) {
+    if (this.disabled) {
+      e.preventDefault()
+      e.stopImmediatePropagation()
+    }
+    this.dispatchEvent(
+      new CustomEvent('labelClick', {
+        bubbles: true,
+        composed: true,
+        detail: 'label clicked',
+      }),
+    )
+  }
 }

package/src/components/listbox/index.ts

@@ -0,0 +1,4 @@
+import { PktListbox } from './listbox'
+
+export { PktListbox }
+export default PktListbox

package/src/components/listbox/listbox.ts

@@ -0,0 +1,474 @@
+import { html, nothing, PropertyValues } from 'lit'
+import { customElement, property, state } from 'lit/decorators.js'
+import { ifDefined } from 'lit/directives/if-defined.js'
+import strings from '@/translations/no.json'
+import { PktElement } from '@/base-elements/element'
+import { repeat } from 'lit/directives/repeat.js'
+import { classMap } from 'lit/directives/class-map.js'
+import { IPktComboboxOption } from '@/components/combobox/combobox'
+import { uuidish } from '@/utils/stringutils'
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'pkt-listbox': PktListbox
+  }
+}
+
+export interface IPktListbox {
+  options: IPktComboboxOption[]
+  isOpen: boolean
+  disabled: boolean
+  includeSearch: boolean
+  isMultiSelect: boolean
+  allowUserInput: boolean
+  maxIsReached: boolean
+  customUserInput: string | null
+  searchPlaceholder: string | null
+  searchValue: string | null
+  maxLength: number
+  userMessage: string | null
+}
+
+@customElement('pkt-listbox')
+export class PktListbox extends PktElement implements IPktListbox {
+  @property({ type: String }) id: string = uuidish()
+  @property({ type: String }) label: string | null = null
+  @property({ type: Array }) options: IPktComboboxOption[] = []
+  @property({ type: Boolean, reflect: true }) isOpen: boolean = false
+  @property({ type: Boolean }) disabled: boolean = false
+  @property({ type: Boolean }) includeSearch: boolean = false
+  @property({ type: Boolean }) isMultiSelect: boolean = false
+  @property({ type: Boolean }) allowUserInput: boolean = false
+  @property({ type: Boolean }) maxIsReached: boolean = false
+  @property({ type: String }) customUserInput: string | null = null
+  @property({ type: String }) searchPlaceholder: string | null = null
+  @property({ type: String }) searchValue: string | null = null
+  @property({ type: Number }) maxLength: number = 0
+  @property({ type: String }) userMessage: string | null = null
+
+  private _selectedOptions: number = 0
+
+  @state() private _filteredOptions: IPktComboboxOption[] = []
+
+  // Lifecycle methods
+  connectedCallback(): void {
+    super.connectedCallback()
+    if (this.includeSearch && !this.searchValue) {
+      this.searchValue = ''
+    }
+    if (this.options.length > 0) {
+      this.filterOptions()
+    }
+    this.setAttribute('tabindex', '-1')
+    this.addEventListener('focus', this.focusFirstOrSelectedOption)
+  }
+
+  updated(changedProperties: PropertyValues) {
+    if (changedProperties.has('options') || changedProperties.has('searchValue')) {
+      this.filterOptions()
+    }
+    super.updated(changedProperties)
+  }
+
+  attributeChangedCallback(name: string, _old: string | null, value: string | null): void {
+    if (name === 'options' || name === 'searchValue' || name === 'search-value') {
+      this.filterOptions()
+    }
+    super.attributeChangedCallback(name, _old, value)
+  }
+
+  // Render methods
+  render() {
+    return html`
+      <div
+        class=${classMap({
+          'pkt-listbox': true,
+          'pkt-listbox__open': this.isOpen,
+          'pkt-txt-16-light': true,
+        })}
+        role="listbox"
+        aria-label=${ifDefined(this.label)}
+      >
+        <div class="pkt-listbox__banners">
+          ${this.renderMaximumReachedBanner()} ${this.renderUserMessage()}
+          ${this.renderNewOptionBanner()} ${this.renderSearch()}
+        </div>
+        <ul class="pkt-listbox__options" role="presentation">
+          ${this.renderList()}
+        </ul>
+      </div>
+    `
+  }
+
+  renderCheckboxOrCheckIcon(option: IPktComboboxOption, index: number) {
+    return this.isMultiSelect
+      ? html`
+          <input
+            class="pkt-input-check__input-checkbox"
+            type="checkbox"
+            role="presentation"
+            tabindex="-1"
+            value=${option.value}
+            .checked=${option.selected}
+            aria-labelledby=${this.id + '-option-label-' + index}
+            ?disabled=${this.disabled || option.disabled || (this.maxIsReached && !option.selected)}
+          />
+        `
+      : option.selected
+        ? html`<pkt-icon name="check-big"></pkt-icon>`
+        : nothing
+  }
+
+  renderList() {
+    return html`
+      ${repeat(
+        this._filteredOptions,
+        (option) => option.value,
+        (option, index) => html`
+          <li
+            @click=${() => {
+              this.toggleOption(option)
+            }}
+            aria-selected=${option.selected ? 'true' : 'false'}
+            @keydown=${this.handleOptionKeydown}
+            class=${classMap({
+              'pkt-listbox__option': true,
+              'pkt-listbox__option--selected': Boolean(!this.isMultiSelect && option.selected),
+              'pkt-listbox__option--checkBox': this.isMultiSelect,
+            })}
+            tabindex="${this.disabled || option.disabled ? '-1' : '0'}"
+            data-index=${index}
+            data-value=${option.value}
+            data-selected=${option.selected ? 'true' : 'false'}
+            ?data-disabled=${this.disabled ||
+            option.disabled ||
+            (this.maxIsReached && !option.selected)}
+            role="option"
+            id=${`${this.id}-${index}`}
+          >
+            ${this.renderCheckboxOrCheckIcon(option, index)}
+            <span class="pkt-listbox__option-label" id=${this.id + '-option-label-' + index}>
+              ${option.prefix
+                ? html`<span class="pkt-listbox__option-prefix">${option.prefix}</span>`
+                : nothing}
+              ${option.label || option.value}
+            </span>
+            ${option.description
+              ? html`<span class="pkt-listbox__option-description pkt-txt-14-light"
+                  >${option.description}</span
+                >`
+              : nothing}
+          </li>
+        `,
+      )}
+    `
+  }
+
+  renderNewOptionBanner() {
+    return this.allowUserInput && this.customUserInput
+      ? html`
+          <div
+            class="pkt-listbox__banner pkt-listbox__banner--new-option pkt-listbox__option"
+            data-type="new-option"
+            data-value=${this.customUserInput}
+            data-selected="false"
+            tabindex="0"
+            @click=${() =>
+              this.toggleOption({
+                value: this.customUserInput || '',
+              })}
+            @keydown=${this.handleOptionKeydown}
+          >
+            <pkt-icon class="pkt-listbox__banner-icon" name="plus-sign" size="large"></pkt-icon>
+            Legg til “${this.customUserInput}”
+          </div>
+        `
+      : nothing
+  }
+
+  renderMaximumReachedBanner() {
+    this._selectedOptions = this.options.filter((option) => option.selected).length
+
+    return this.isMultiSelect && this._selectedOptions > 0 && this.maxLength > 0
+      ? html`
+          <div class="pkt-listbox__banner pkt-listbox__banner--maximum-reached">
+            ${this._selectedOptions} av maks ${this.maxLength} mulige er valgt.
+          </div>
+        `
+      : nothing
+  }
+
+  renderUserMessage() {
+    return this.userMessage
+      ? html`<div class="pkt-listbox__banner pkt-listbox__banner--user-message">
+          <pkt-icon
+            class="pkt-listbox__banner-icon"
+            name="exclamation-mark-circle"
+            size="large"
+          ></pkt-icon>
+          ${this.userMessage}
+        </div>`
+      : nothing
+  }
+
+  renderSearch() {
+    return this.includeSearch
+      ? html`
+          <div class="pkt-listbox__search">
+            <span class="pkt-listbox__search-icon">
+              <pkt-icon name="magnifying-glass-small" size="large"></pkt-icon>
+            </span>
+            <input
+              class="pkt-txt-16-light"
+              type="text"
+              aria-label="Søk i listen"
+              form=""
+              placeholder=${this.searchPlaceholder || strings.forms.search.placeholder}
+              @input=${this.handleSearchInput}
+              @keydown=${this.handleSearchKeydown}
+              .value=${this.searchValue}
+              data-type="searchbox"
+              ?disabled=${this.disabled}
+              ?readonly=${this.disabled}
+              role="searchbox"
+            />
+          </div>
+        `
+      : nothing
+  }
+
+  // Event handlers
+  handleSearchInput(e: InputEvent) {
+    this.searchValue = (e.target as HTMLInputElement).value
+    this.dispatchEvent(
+      new CustomEvent('search', {
+        detail: this.searchValue,
+        bubbles: false,
+      }),
+    )
+  }
+
+  handleSearchKeydown(e: KeyboardEvent) {
+    switch (e.key) {
+      case 'Enter':
+        e.preventDefault()
+        break
+      case 'ArrowUp':
+      case 'Escape':
+        this.closeOptions()
+        e.preventDefault()
+        break
+      case 'ArrowDown':
+      case 'Tab':
+        this.focusFirstOrSelectedOption()
+        break
+    }
+  }
+
+  handleOptionKeydown(e: KeyboardEvent) {
+    const target = e.currentTarget as HTMLElement
+    const value = target.dataset.value
+    const itemType = target.dataset.type
+    const isValueSelected = target.dataset.selected === 'true'
+
+    if (
+      !this.getOptionElements().length &&
+      (!this.customUserInput || (!this.allowUserInput && this.customUserInput)) &&
+      itemType !== 'new-option' &&
+      itemType !== 'searchbox'
+    ) {
+      return
+    }
+
+    switch (e.key) {
+      case ' ':
+      case 'Enter':
+        this.toggleOption(target)
+        e.preventDefault()
+        break
+
+      case 'Backspace':
+        if (value) {
+          if (isValueSelected) {
+            this.toggleOption(target)
+          } else {
+            this.closeOptions()
+          }
+        }
+        e.preventDefault()
+        break
+
+      case 'Escape':
+      case 'Tab':
+        this.closeOptions()
+        break
+
+      case 'ArrowDown':
+        if (e.altKey) {
+          this.focusLastOption()
+        } else {
+          if (itemType === 'searchbox' || itemType === 'new-option') {
+            this.focusFirstOption()
+          } else {
+            this.focusNextOption(target)
+          }
+        }
+        e.preventDefault()
+        break
+
+      case 'ArrowUp':
+        if (e.altKey) {
+          this.focusFirstOption()
+        } else {
+          if (target.dataset.index === '0' && this.includeSearch) {
+            const searchInput = this.querySelector('[role="searchbox"]') as HTMLElement
+            searchInput && searchInput.focus()
+          } else if (target.dataset.index === '0' && this.customUserInput) {
+            const newOption = this.querySelector('[data-type="new-option"]') as HTMLElement
+            newOption && newOption.focus()
+          } else {
+            this.focusPreviousOption(target)
+          }
+        }
+        e.preventDefault()
+        break
+
+      case 'Home':
+        this.focusFirstOption()
+        e.preventDefault()
+        break
+
+      case 'End':
+        this.focusLastOption()
+        e.preventDefault()
+        break
+
+      default:
+        if ((e.metaKey || e.ctrlKey) && e.key === 'a') {
+          this.selectAll()
+          e.preventDefault()
+        }
+        if (this.isLetterOrSpace(e.key)) {
+          this.handleTypeAhead(e.key)
+          e.preventDefault()
+        }
+        break
+    }
+  }
+
+  // Focus management methods
+  focusAndScrollIntoView(el: HTMLElement) {
+    el.scrollIntoView({ block: 'nearest' })
+    window.setTimeout(() => el.focus(), 0)
+  }
+
+  focusNextOption(target: HTMLElement) {
+    const nextOption = target.nextElementSibling as HTMLElement
+    nextOption && this.focusAndScrollIntoView(nextOption)
+  }
+
+  focusPreviousOption(target: HTMLElement) {
+    const previousOption = target.previousElementSibling as HTMLElement
+    if (target.dataset.index === '0' && this.includeSearch) {
+      const searchInput = this.querySelector('[role="searchbox"]') as HTMLElement
+      searchInput && this.focusAndScrollIntoView(searchInput)
+    } else if (previousOption) {
+      this.focusAndScrollIntoView(previousOption)
+    }
+  }
+
+  focusFirstOption() {
+    const firstOption = this.getOptionElements()[0]
+    firstOption && this.focusAndScrollIntoView(firstOption)
+  }
+
+  focusLastOption() {
+    const lastOption = this.getOptionElements().pop()
+    lastOption && this.focusAndScrollIntoView(lastOption)
+  }
+
+  focusFirstOrSelectedOption() {
+    if (this.disabled) return
+    const selectedOption = this.getOptionElements().find(
+      (option) => option.dataset.selected === 'true',
+    )
+    if (this.allowUserInput && this.customUserInput) {
+      const newOption = this.querySelector('[data-type="new-option"]') as HTMLElement
+      this.focusAndScrollIntoView(newOption)
+    } else if (selectedOption) {
+      this.focusAndScrollIntoView(selectedOption)
+    } else if (this.includeSearch && !(document.activeElement instanceof HTMLInputElement)) {
+      const searchInput = this.querySelector('[role="searchbox"]') as HTMLElement
+      window.setTimeout(() => searchInput.focus(), 0)
+    } else {
+      this.focusFirstOption()
+    }
+  }
+
+  // Event dispatching methods
+  toggleOption(option: IPktComboboxOption | HTMLElement) {
+    const optionDisabled = option instanceof HTMLElement ? option.dataset.disabled : option.disabled
+    if (this.disabled || optionDisabled) return
+    const value = option instanceof HTMLElement ? option.dataset.value : option.value
+    this.dispatchEvent(
+      new CustomEvent('option-toggle', {
+        detail: value,
+        bubbles: false,
+      }),
+    )
+  }
+
+  selectAll() {
+    this.dispatchEvent(new CustomEvent('select-all', { bubbles: false }))
+  }
+
+  closeOptions() {
+    this.dispatchEvent(new CustomEvent('close-options', { bubbles: false }))
+  }
+
+  // Filtering and typeahead methods
+
+  filterOptions() {
+    if (this.searchValue) {
+      this._filteredOptions = this.options.filter((option) => {
+        const fulltext = option.label + option.value
+        return fulltext.toLowerCase().includes(this.searchValue?.toLowerCase() || '')
+      })
+    } else {
+      this._filteredOptions = [...this.options]
+    }
+  }
+
+  isLetterOrSpace(char: string): boolean {
+    return /^[\p{L} ]$/u.test(char)
+  }
+
+  handleTypeAhead(char: string) {
+    this.typeAheadString += char.toLowerCase()
+
+    if (this.typeAheadTimeout) {
+      clearTimeout(this.typeAheadTimeout)
+    }
+
+    this.typeAheadTimeout = window.setTimeout(() => {
+      this.typeAheadString = ''
+    }, 500)
+
+    const options = this.getOptionElements()
+    const match = options.find((option) =>
+      option.textContent?.trim().toLowerCase().startsWith(this.typeAheadString),
+    )
+
+    match && this.focusAndScrollIntoView(match)
+  }
+
+  // DOM helper methods
+  getOptionElements() {
+    if (!this._filteredOptions.length) {
+      return []
+    }
+    return Array.from(
+      this.querySelectorAll('[role="option"]:not([data-disabled])') || [],
+    ) as HTMLElement[]
+  }
+}