@fristil/designsystem 0.4.0 → 0.5.0

package/src/components/frittstaende/date-field/fs-date-field.ts

@@ -1,309 +0,0 @@
-import { html, LitElement } from "lit"
-import { ifDefined } from "lit/directives/if-defined.js"
-import { live } from "lit/directives/live.js"
-
-import { computeFieldAttributes } from "../../ramme/field/field-core.js"
-import { defineFsCalendar } from "../calendar/fs-calendar.js"
-
-export const FS_DATE_FIELD_TAG = "fs-date-field" as const
-
-function uniqueId(prefix: string): string {
-  return `${prefix}-${Math.random().toString(36).slice(2, 9)}`
-}
-
-function isoToDisplay(iso: string): string {
-  const match = /^(\d{4})-(\d{2})-(\d{2})$/.exec(iso)
-  if (!match) return iso
-  return `${match[3]}-${match[2]}-${match[1]}`
-}
-
-/** ISO-streng, eller null om teksten ikke er en dato som finnes. */
-function displayToIso(display: string): string | null {
-  const match = /^(\d{2})-(\d{2})-(\d{4})$/.exec(display)
-  if (!match) return null
-  const day = Number(match[1])
-  const month = Number(match[2])
-  const year = Number(match[3])
-  // Date.UTC ruller over ved ugyldige datoer: 32-06-2026 blir 2026-07-02
-  const date = new Date(Date.UTC(year, month - 1, day))
-  if (
-    date.getUTCFullYear() !== year ||
-    date.getUTCMonth() !== month - 1 ||
-    date.getUTCDate() !== day
-  ) {
-    return null
-  }
-  return `${year}-${String(month).padStart(2, "0")}-${String(day).padStart(2, "0")}`
-}
-
-export class FsDateField extends LitElement {
-  static properties = {
-    label: { type: String },
-    value: { type: String, reflect: true },
-    name: { type: String },
-    placeholder: { type: String },
-    helpText: { type: String, attribute: "help-text" },
-    errorText: { type: String, attribute: "error-text" },
-    required: { type: Boolean, reflect: true },
-    optional: { type: Boolean, reflect: true },
-    disabled: { type: Boolean, reflect: true },
-    readonly: { type: Boolean, reflect: true },
-    invalid: { type: Boolean, reflect: true },
-    controlId: { type: String, attribute: "control-id" },
-    describedBy: { type: String, attribute: "described-by" },
-  }
-
-  label = "Dato"
-  value = ""
-  name?: string
-  placeholder = "DD-MM-YYYY"
-  helpText?: string
-  errorText?: string
-  required = false
-  optional = false
-  disabled = false
-  readonly = false
-  invalid = false
-  controlId?: string
-  describedBy?: string
-
-  /** Sann når brukeren har skrevet en dato som ikke finnes. */
-  private _inputInvalid = false
-
-  /**
-   * Teksten brukeren har skrevet, når den ikke er en gyldig dato.
-   *
-   * Halvskrevet tekst som «01-01-20» kan ikke bli til en ISO-dato, så
-   * `value` står stille mens den skrives. Uten at teksten er en del av
-   * tilstanden her, ville malen tegnet feltet tomt igjen ved neste
-   * oppdatering, og brukeren mistet det de holdt på med.
-   */
-  private _typed: string | null = null
-
-  /** Det feltet skal vise: brukerens egen tekst, ellers `value`. */
-  private get displayValue() {
-    return this._typed ?? isoToDisplay(this.value)
-  }
-
-  /**
-   * Settes `value` utenfra, er brukerens tekst ikke lenger gyldig.
-   *
-   * Det gjelder også når komponenten setter `value` selv etter at teksten
-   * ble en fullstendig dato, og det er riktig: da viser `value` det samme.
-   */
-  willUpdate(changed: Map<string, unknown>) {
-    if (changed.has("value")) this._typed = null
-  }
-
-  private readonly uid = uniqueId("fs-date-field")
-
-  constructor() {
-    super()
-    defineFsCalendar()
-  }
-
-  createRenderRoot() {
-    return this
-  }
-
-  render() {
-    const invalid = this.invalid || this._inputInvalid
-
-    // Tilgjengelighetskontrakten regnes ut ett sted, det samme som
-    // `<fs-field>` og `fs.field()` bruker. Komponenten hadde tidligere sin
-    // egen utgave av den samme logikken, og de to kunne gå fra hverandre.
-    const field = computeFieldAttributes({
-      id: this.inputId,
-      help: Boolean(this.helpText),
-      error: Boolean(this.errorText),
-      required: this.required ? "symbol" : undefined,
-      optional: this.optional,
-      invalid,
-      disabled: this.disabled,
-      describedBy: this.describedBy ? [this.describedBy] : [],
-      helpId: this.helpId,
-      errorId: this.errorId,
-    })
-
-    return html`
-      <div class="fs-date-field">
-        <label
-          class="fs-label"
-          for=${field.label.for}
-          data-required=${ifDefined(field.label["data-required"])}
-          data-optional=${ifDefined(field.label["data-optional"])}
-          aria-disabled=${ifDefined(field.label["aria-disabled"])}
-          >${this.label}</label
-        >
-        <div class="fs-date-field__field">
-          <input
-            id=${field.control.id}
-            class="fs-input"
-            type="text"
-            aria-describedby=${ifDefined(field.control["aria-describedby"])}
-            aria-invalid=${ifDefined(field.control["aria-invalid"])}
-            data-state=${ifDefined(field.control["data-state"])}
-            .value=${live(this.displayValue)}
-            name=${this.name ?? ""}
-            placeholder=${this.placeholder}
-            ?required=${this.required}
-            ?disabled=${this.disabled}
-            ?readonly=${this.readonly}
-            @input=${this.handleInput}
-            @blur=${this.handleInputBlur}
-            @keydown=${this.handleInputKeydown}
-          />
-          <button
-            type="button"
-            class="fs-date-field__icon-btn"
-            aria-label="Åpne kalender"
-            tabindex="-1"
-            ?disabled=${this.disabled}
-            @click=${this.handleIconClick}
-          >
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              viewBox="0 0 24 24"
-              fill="none"
-              stroke="currentColor"
-              stroke-width="2"
-              stroke-linecap="round"
-              stroke-linejoin="round"
-              width="1rem"
-              height="1rem"
-              aria-hidden="true"
-            >
-              <rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect>
-              <line x1="16" y1="2" x2="16" y2="6"></line>
-              <line x1="8" y1="2" x2="8" y2="6"></line>
-              <line x1="3" y1="10" x2="21" y2="10"></line>
-            </svg>
-          </button>
-          <fs-calendar
-            id=${this.calendarId}
-            .value=${this.value}
-            ?disabled=${this.disabled}
-            trigger-hidden
-            class="fs-date-field__calendar"
-            @date-select=${this.handleCalendarSelect}
-          ></fs-calendar>
-        </div>
-
-        ${this.helpText ? html`<p class="fs-help-text" id=${this.helpId}>${this.helpText}</p>` : null}
-        ${
-          this.errorText
-            ? html`<p class="fs-error-text" id=${field.error.id} ?hidden=${Boolean(field.error.hidden)}>${this.errorText}</p>`
-            : null
-        }
-      </div>
-    `
-  }
-
-  private get inputId() {
-    return this.controlId || `${this.uid}-input`
-  }
-
-  private get calendarId() {
-    return `${this.uid}-calendar`
-  }
-
-  private get helpId() {
-    return `${this.uid}-help`
-  }
-
-  private get errorId() {
-    return `${this.uid}-error`
-  }
-
-  private get inputElement() {
-    return this.querySelector(`#${this.inputId}`) as HTMLInputElement | null
-  }
-
-  private get calendarElement() {
-    return this.querySelector(`#${this.calendarId}`) as HTMLElement | null
-  }
-
-  private handleIconClick = (event: Event) => {
-    event.stopPropagation()
-    const calendar = this.calendarElement as
-      | (HTMLElement & {
-          open?: boolean
-          openPopup?: () => void
-          closePopup?: () => void
-        })
-      | null
-    if (!calendar) return
-    if (calendar.open) {
-      calendar.closePopup?.()
-    } else {
-      calendar.openPopup?.()
-    }
-  }
-
-  private handleInputKeydown = (event: KeyboardEvent) => {
-    if (event.key === " " || event.key === "ArrowDown") {
-      event.preventDefault()
-      const calendar = this.calendarElement as
-        | (HTMLElement & { openPopup?: () => void })
-        | null
-      calendar?.openPopup?.()
-    }
-  }
-
-  private handleInput = (event: Event) => {
-    const target = event.currentTarget as HTMLInputElement
-    const iso = displayToIso(target.value)
-    if (iso !== null) {
-      this._inputInvalid = false
-      this._typed = null
-      this.value = iso
-      this.requestUpdate()
-    } else {
-      this._typed = target.value
-      this.requestUpdate()
-    }
-    // Ugyldig inndata skal ikke endre this.value. Behold siste gyldige ISO.
-    this.dispatchEvent(new Event("input", { bubbles: true, composed: true }))
-    this.dispatchEvent(new Event("change", { bubbles: true, composed: true }))
-  }
-
-  private handleInputBlur = (event: FocusEvent) => {
-    const target = event.currentTarget as HTMLInputElement
-    const raw = target.value
-    if (raw === "") {
-      this._inputInvalid = false
-    } else {
-      this._inputInvalid = displayToIso(raw) === null
-    }
-    this.requestUpdate()
-  }
-
-  private handleCalendarSelect = (event: Event) => {
-    const custom = event as CustomEvent<{ value?: string }>
-    const selected = custom.detail?.value
-    if (!selected) return
-
-    this._inputInvalid = false
-    this._typed = null
-    this.value = selected
-    this.requestUpdate()
-    this.dispatchEvent(new Event("input", { bubbles: true, composed: true }))
-    this.dispatchEvent(new Event("change", { bubbles: true, composed: true }))
-
-    queueMicrotask(() => {
-      this.inputElement?.focus()
-    })
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "fs-date-field": FsDateField
-  }
-}
-
-export function defineFsDateField(tagName = FS_DATE_FIELD_TAG): void {
-  if (!customElements.get(tagName)) {
-    customElements.define(tagName, FsDateField)
-  }
-}

package/src/components/frittstaende/suggestion/fs-suggestion.ts

@@ -1,333 +0,0 @@
-import { html, LitElement } from "lit"
-import { ifDefined } from "lit/directives/if-defined.js"
-import { live } from "lit/directives/live.js"
-
-import { computeFieldAttributes } from "../../ramme/field/field-core.js"
-
-export const FS_SUGGESTION_TAG = "fs-suggestion" as const
-
-type Option = { value: string; label: string }
-
-/**
- * Et tekstfelt med forslag som snevres inn mens brukeren skriver.
- *
- * Alternativene skrives som `<option>`-barn, slik de ville stått i en
- * `<datalist>`. Komponenten leser dem én gang og bygger lista selv, fordi
- * nettleserens egen `<datalist>` ikke kan styles, oppfører seg ulikt i hver
- * nettleser, og ikke melder antall treff til skjermlesere.
- *
- * Feltet er et fritekstfelt, ikke en nedtrekksliste. Brukeren kan skrive noe
- * som ikke står i lista. Skal bare gitte verdier godtas, er
- * [Select](../../css/select/select.js) riktig.
- *
- * ```html
- * <fs-suggestion label="Kommune" name="kommune">
- *   <option>Bergen</option>
- *   <option>Oslo</option>
- * </fs-suggestion>
- * ```
- */
-export class FsSuggestion extends LitElement {
-  static properties = {
-    label: { type: String },
-    value: { type: String, reflect: true },
-    name: { type: String },
-    placeholder: { type: String },
-    helpText: { type: String, attribute: "help-text" },
-    errorText: { type: String, attribute: "error-text" },
-    invalid: { type: Boolean, reflect: true },
-    required: { type: Boolean, reflect: true },
-    optional: { type: Boolean, reflect: true },
-    disabled: { type: Boolean, reflect: true },
-    controlId: { type: String, attribute: "control-id" },
-    describedBy: { type: String, attribute: "described-by" },
-    noResultsText: { type: String, attribute: "no-results-text" },
-    open: { type: Boolean, reflect: true },
-  }
-
-  label = ""
-  value = ""
-  name?: string
-  placeholder?: string
-  helpText?: string
-  errorText?: string
-  invalid = false
-  required = false
-  optional = false
-  disabled = false
-  controlId?: string
-  describedBy?: string
-  noResultsText = "Ingen treff"
-  open = false
-
-  /** Alternativet som er markert med piltastene. */
-  private activeIndex = -1
-  private options: Option[] = []
-  private readonly uid =
-    `fs-suggestion-${Math.random().toString(36).slice(2, 9)}`
-
-  createRenderRoot() {
-    return this
-  }
-
-  private observer?: MutationObserver
-
-  connectedCallback() {
-    super.connectedCallback()
-    this.readOptions()
-    document.addEventListener("click", this.handleOutsideClick, true)
-
-    // Alternativene byttes ofte ut mens brukeren skriver, for eksempel med
-    // treff fra en server. Uten dette ville bare det første settet telt.
-    this.observer = new MutationObserver(() => {
-      if (this.querySelector("option")) {
-        this.readOptions()
-        this.requestUpdate()
-      }
-    })
-    this.observer.observe(this, { childList: true })
-  }
-
-  disconnectedCallback() {
-    document.removeEventListener("click", this.handleOutsideClick, true)
-    this.observer?.disconnect()
-    this.observer = undefined
-    super.disconnectedCallback()
-  }
-
-  /** Leser `<option>`-barna og fjerner dem fra visningen. */
-  private readOptions() {
-    const options = [...this.querySelectorAll("option")]
-    if (options.length === 0) return
-
-    this.options = options.map((option) => ({
-      value: option.value || (option.textContent ?? "").trim(),
-      label: (option.textContent ?? "").trim() || option.value,
-    }))
-
-    for (const option of options) option.remove()
-  }
-
-  /** Alternativene som passer med det som står i feltet. */
-  private get filteredOptions(): Option[] {
-    const query = this.value.trim().toLowerCase()
-    if (query === "") return this.options
-    return this.options.filter((option) =>
-      option.label.toLowerCase().includes(query),
-    )
-  }
-
-  private get inputId() {
-    return this.controlId || `${this.uid}-input`
-  }
-
-  private get listId() {
-    return `${this.uid}-list`
-  }
-
-  private get statusId() {
-    return `${this.uid}-status`
-  }
-
-  render() {
-    const field = computeFieldAttributes({
-      id: this.inputId,
-      help: Boolean(this.helpText),
-      error: Boolean(this.errorText),
-      helpId: `${this.uid}-help`,
-      errorId: `${this.uid}-error`,
-      required: this.required ? "symbol" : undefined,
-      optional: this.optional,
-      invalid: this.invalid,
-      disabled: this.disabled,
-      describedBy: [this.statusId, this.describedBy ?? ""].filter(Boolean),
-    })
-
-    const matches = this.filteredOptions
-    const open = this.open && !this.disabled
-
-    return html`
-      <label class="fs-label" for=${field.label.for}
-        data-required=${ifDefined(field.label["data-required"])}
-        data-optional=${ifDefined(field.label["data-optional"])}
-        aria-disabled=${ifDefined(field.label["aria-disabled"])}
-        >${this.label}</label
-      >
-
-      <div class="fs-suggestion__field">
-        <input
-          class="fs-input"
-          id=${field.control.id}
-          name=${ifDefined(this.name)}
-          type="text"
-          role="combobox"
-          autocomplete="off"
-          .value=${live(this.value)}
-          placeholder=${ifDefined(this.placeholder)}
-          aria-expanded=${String(open)}
-          aria-controls=${this.listId}
-          aria-autocomplete="list"
-          aria-activedescendant=${ifDefined(
-            open && this.activeIndex >= 0
-              ? `${this.uid}-option-${this.activeIndex}`
-              : undefined,
-          )}
-          aria-describedby=${ifDefined(field.control["aria-describedby"])}
-          aria-invalid=${ifDefined(field.control["aria-invalid"])}
-          data-state=${ifDefined(field.control["data-state"])}
-          ?disabled=${this.disabled}
-          @input=${this.handleInput}
-          @keydown=${this.handleKeydown}
-          @focus=${this.handleFocus}
-        />
-
-        <ul
-          class="fs-suggestion__list"
-          id=${this.listId}
-          role="listbox"
-          ?hidden=${!open}
-        >
-          ${matches.map(
-            (option, index) => html`<li
-              class="fs-suggestion__option"
-              id=${`${this.uid}-option-${index}`}
-              role="option"
-              aria-selected=${String(index === this.activeIndex)}
-              @mousedown=${(event: Event) => this.handleOptionClick(event, option)}
-            >
-              ${option.label}
-            </li>`,
-          )}
-          ${
-            matches.length === 0
-              ? html`<li class="fs-suggestion__empty" role="presentation">
-                ${this.noResultsText}
-              </li>`
-              : null
-          }
-        </ul>
-      </div>
-
-      ${
-        this.helpText
-          ? html`<p class="fs-help-text" id=${field.help.id}>${this.helpText}</p>`
-          : null
-      }
-      ${
-        this.errorText
-          ? html`<p
-            class="fs-error-text"
-            id=${field.error.id}
-            ?hidden=${Boolean(field.error.hidden)}
-          >
-            ${this.errorText}
-          </p>`
-          : null
-      }
-
-      <p class="fs-sr-only" id=${this.statusId} role="status">
-        ${open ? this.statusText(matches.length) : ""}
-      </p>
-    `
-  }
-
-  /** Antall treff, som tekst skjermleseren leser opp. */
-  private statusText(count: number): string {
-    if (count === 0) return this.noResultsText
-    return count === 1 ? "1 forslag" : `${count} forslag`
-  }
-
-  private handleFocus = () => {
-    if (!this.disabled) this.show()
-  }
-
-  private handleInput = (event: Event) => {
-    const input = event.target as HTMLInputElement
-    this.value = input.value
-    this.activeIndex = -1
-    this.show()
-  }
-
-  private handleKeydown = (event: KeyboardEvent) => {
-    const matches = this.filteredOptions
-
-    if (event.key === "Escape") {
-      event.preventDefault()
-      this.hide()
-      return
-    }
-
-    if (event.key === "ArrowDown" || event.key === "ArrowUp") {
-      event.preventDefault()
-      if (!this.open) this.show()
-      if (matches.length === 0) return
-
-      const step = event.key === "ArrowDown" ? 1 : -1
-      const next = this.activeIndex + step
-
-      this.activeIndex =
-        next < 0 ? matches.length - 1 : next >= matches.length ? 0 : next
-      this.requestUpdate()
-      return
-    }
-
-    if (event.key === "Enter" && this.open && this.activeIndex >= 0) {
-      event.preventDefault()
-      this.select(matches[this.activeIndex])
-    }
-  }
-
-  private handleOptionClick = (event: Event, option: Option) => {
-    // mousedown og ikke click: feltet mister ellers fokus før valget rekker
-    // å skje, og lista lukker seg med den.
-    event.preventDefault()
-    this.select(option)
-  }
-
-  private handleOutsideClick = (event: Event) => {
-    if (!this.open) return
-    if (this.contains(event.target as Node)) return
-    this.hide()
-  }
-
-  /** Velger et alternativ og melder fra. */
-  select(option: Option) {
-    this.value = option.value
-    this.hide()
-
-    const input = this.querySelector("input")
-    if (input) input.value = option.value
-
-    this.dispatchEvent(
-      new CustomEvent("suggestion-select", {
-        detail: { value: option.value, label: option.label },
-        bubbles: true,
-        composed: true,
-      }),
-    )
-    this.dispatchEvent(new Event("change", { bubbles: true }))
-  }
-
-  /** Åpner forslagslista. */
-  show() {
-    this.open = true
-  }
-
-  /** Lukker forslagslista. */
-  hide() {
-    this.open = false
-    this.activeIndex = -1
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "fs-suggestion": FsSuggestion
-  }
-}
-
-export function defineFsSuggestion(tagName = FS_SUGGESTION_TAG): void {
-  if (!customElements.get(tagName)) {
-    customElements.define(tagName, FsSuggestion)
-  }
-}