@fristil/designsystem 0.3.0 → 0.5.0

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

@@ -1,525 +0,0 @@
-import { css, html, LitElement } from "lit"
-
-export const FS_CALENDAR_TAG = "fs-calendar" as const
-
-type CalendarCell = {
-  date: Date
-  iso: string
-  inMonth: boolean
-  isToday: boolean
-  isSelected: boolean
-}
-
-/**
- * Deler dagene inn i uker på sju.
- *
- * role="grid" krever role="row" mellom seg og cellene sine. Uten radene
- * melder skjermlesere rutenettet som tomt, og cellene som løsrevne knapper.
- */
-function splitInWeeks(cells: CalendarCell[]): CalendarCell[][] {
-  const weeks: CalendarCell[][] = []
-  for (let i = 0; i < cells.length; i += 7) {
-    weeks.push(cells.slice(i, i + 7))
-  }
-  return weeks
-}
-
-/**
- * Delnavnene på én dagknapp.
- *
- * Tilstanden må være egne delnavn og ikke bare `data-*`. En attributtselektor
- * etter `::part()` treffer ikke. `::part(day)[data-selected="true"]` er målt
- * uten virkning, så uten `day-selected` ville en konsument ikke hatt noen vei
- * til den valgte dagen utenfra.
- */
-function dayParts(cell: CalendarCell): string {
-  const names = ["day"]
-  if (!cell.inMonth) names.push("day-outside")
-  if (cell.isToday) names.push("day-today")
-  if (cell.isSelected) names.push("day-selected")
-  return names.join(" ")
-}
-
-const weekdayFormatter = new Intl.DateTimeFormat("nb-NO", {
-  weekday: "short",
-  timeZone: "UTC",
-})
-
-const monthFormatter = new Intl.DateTimeFormat("nb-NO", {
-  month: "long",
-  year: "numeric",
-  timeZone: "UTC",
-})
-
-function parseIsoDate(value: string | undefined): Date | null {
-  if (!value) return null
-  const match = /^(\d{4})-(\d{2})-(\d{2})$/.exec(value)
-  if (!match) return null
-
-  const year = Number(match[1])
-  const month = Number(match[2]) - 1
-  const day = Number(match[3])
-  return new Date(Date.UTC(year, month, day))
-}
-
-function formatIsoDate(date: Date): string {
-  return date.toISOString().slice(0, 10)
-}
-
-function startOfMonth(date: Date): Date {
-  return new Date(Date.UTC(date.getUTCFullYear(), date.getUTCMonth(), 1))
-}
-
-function addDays(date: Date, delta: number): Date {
-  return new Date(
-    Date.UTC(
-      date.getUTCFullYear(),
-      date.getUTCMonth(),
-      date.getUTCDate() + delta,
-    ),
-  )
-}
-
-function addMonths(date: Date, delta: number): Date {
-  return new Date(
-    Date.UTC(date.getUTCFullYear(), date.getUTCMonth() + delta, 1),
-  )
-}
-
-function mondayBasedWeekday(date: Date): number {
-  return (date.getUTCDay() + 6) % 7
-}
-
-function getToday(): Date {
-  const today = new Date()
-  return new Date(
-    Date.UTC(today.getUTCFullYear(), today.getUTCMonth(), today.getUTCDate()),
-  )
-}
-
-function getCalendarCells(
-  monthDate: Date,
-  selectedIso?: string,
-): CalendarCell[] {
-  const selectedDate = parseIsoDate(selectedIso)
-  const todayIso = formatIsoDate(getToday())
-  const monthStart = startOfMonth(monthDate)
-  const firstVisible = addDays(monthStart, -mondayBasedWeekday(monthStart))
-
-  return Array.from({ length: 42 }, (_, index) => {
-    const date = addDays(firstVisible, index)
-    const iso = formatIsoDate(date)
-    return {
-      date,
-      iso,
-      inMonth: date.getUTCMonth() === monthStart.getUTCMonth(),
-      isToday: iso === todayIso,
-      isSelected: selectedDate ? iso === formatIsoDate(selectedDate) : false,
-    }
-  })
-}
-
-export class FsCalendar extends LitElement {
-  static properties = {
-    open: { type: Boolean, reflect: true },
-    disabled: { type: Boolean, reflect: true },
-    value: { type: String, reflect: true },
-    triggerHidden: {
-      type: Boolean,
-      reflect: true,
-      attribute: "trigger-hidden",
-    },
-  }
-
-  static styles = css`
-    :host {
-      display: inline-block;
-      font-family: inherit;
-      color: var(--semantic-page-foreground);
-      position: relative;
-    }
-
-    .trigger {
-      display: inline-grid;
-      place-items: center;
-      min-width: var(--fs-calendar-trigger-size, var(--size-10));
-      min-height: var(--fs-calendar-trigger-size, var(--size-10));
-      padding: var(--fs-calendar-trigger-padding, 0 var(--size-3));
-      font-family: inherit;
-      font-size: var(--font-size-m);
-      line-height: 1;
-      color: var(--semantic-page-foreground);
-      background: var(--semantic-page-background);
-      border: 1px solid var(--semantic-field-border);
-      border-radius: var(--fs-calendar-radius, var(--size-1));
-      cursor: pointer;
-    }
-
-    .trigger:hover:not(:disabled) {
-      background: var(--semantic-interactive-background);
-      border-color: var(--semantic-interactive-main);
-    }
-
-    .trigger:focus-visible,
-    .month-button:focus-visible,
-    .day:focus-visible {
-      outline: 2px solid var(--semantic-interactive-main);
-      outline-offset: 2px;
-    }
-
-    .popup {
-      position: absolute;
-      inset-inline-start: 0;
-      inset-block-start: calc(100% + var(--size-1));
-      z-index: 30;
-      width: var(--fs-calendar-popup-width, min(20rem, 92vw));
-      padding: var(--fs-calendar-popup-padding, var(--size-3));
-      border: 1px solid var(--semantic-field-border);
-      border-radius: var(--fs-calendar-radius, var(--size-1));
-      background: var(--semantic-page-background);
-      box-shadow: var(--semantic-shadow-overlay);
-    }
-
-    .popup[hidden] {
-      display: none;
-    }
-
-    .popup-header {
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      gap: var(--size-2);
-      margin-bottom: var(--size-2);
-    }
-
-    .month-label {
-      font-size: var(--font-size-s);
-      font-weight: 700;
-      text-transform: capitalize;
-    }
-
-    .month-controls {
-      display: inline-flex;
-      gap: var(--size-1);
-    }
-
-    .month-button,
-    .day {
-      font-family: inherit;
-      border: 1px solid var(--semantic-field-border);
-      background: var(--semantic-page-background);
-      color: var(--semantic-page-foreground);
-      border-radius: var(--fs-calendar-radius, var(--size-1));
-    }
-
-    .month-button {
-      min-width: var(--fs-calendar-day-size, var(--size-8));
-      min-height: var(--fs-calendar-day-size, var(--size-8));
-      cursor: pointer;
-    }
-
-    .weekday-row,
-    .day-grid {
-      display: grid;
-      grid-template-columns: repeat(7, minmax(0, 1fr));
-      gap: var(--size-1);
-    }
-
-    /* Ukeradene finnes for ARIA-strukturens skyld. display: contents lar
-       dagene ligge rett i rutenettet, så oppsettet er uendret. */
-    .week {
-      display: contents;
-    }
-
-    .weekday {
-      text-align: center;
-      font-size: var(--font-size-xxs);
-      font-weight: 700;
-      text-transform: uppercase;
-      letter-spacing: 0.04em;
-      color: var(--semantic-muted-foreground);
-      padding-block: var(--size-1);
-    }
-
-    .day {
-      min-height: var(--fs-calendar-day-size, var(--size-8));
-      cursor: pointer;
-      font-size: var(--font-size-xs);
-    }
-
-    /* Dagene fra nabomåneden er dempet, men fullt klikkbare. De er altså
-       ikke deaktiverte kontroller, og må derfor ha lesbar kontrast. */
-    .day[data-outside="true"] {
-      color: var(--semantic-neutral-foreground);
-      background: var(--semantic-neutral-background);
-    }
-
-    .day[data-today="true"] {
-      border-color: var(--semantic-interactive-main);
-    }
-
-    .day[data-selected="true"] {
-      background: var(--semantic-interactive-main);
-      color: var(--semantic-interactive-contrast);
-      border-color: var(--semantic-interactive-main);
-    }
-
-    /*
-     * Høykontrast: egne farger overstyres i modusen, så valgt dag og de andre
-     * blir like. Systemfargene slipper gjennom, og Highlight med
-     * HighlightText er paret operativsystemet bruker til noe som er valgt.
-     *
-     * Merk: ingen backtick-tegn i kommentarer her. De lukker malen, og resten
-     * av fila blir lest som JavaScript.
-     */
-    @media (forced-colors: active) {
-      .day[data-selected="true"] {
-        background: Highlight;
-        color: HighlightText;
-        border-color: Highlight;
-      }
-    }
-
-    :host([disabled]) .trigger {
-      background: var(--semantic-disabled-background);
-      color: var(--semantic-disabled-foreground);
-      border-color: var(--semantic-disabled-background);
-      /* Knappen er en ekte <button disabled>; pointer-events: none ville
-         bare hindret markøren i å vises. */
-      cursor: not-allowed;
-    }
-
-    :host([trigger-hidden]) .trigger {
-      display: none;
-    }
-
-    :host([trigger-hidden]) .popup {
-      inset-block-start: var(--size-1);
-    }
-  `
-
-  /** @attr */
-  open = false
-  /** @attr */
-  disabled = false
-  /** @attr */
-  value = ""
-  /** @attr trigger-hidden */
-  triggerHidden = false
-
-  private viewMonth = getToday()
-
-  connectedCallback() {
-    super.connectedCallback()
-    this.ownerDocument.addEventListener("click", this.handleDocumentClick)
-  }
-
-  disconnectedCallback() {
-    this.ownerDocument.removeEventListener("click", this.handleDocumentClick)
-    super.disconnectedCallback()
-  }
-
-  updated(changed: Map<string, unknown>) {
-    if (changed.has("value")) {
-      this.viewMonth = parseIsoDate(this.value) ?? this.viewMonth
-    }
-  }
-
-  render() {
-    const monthCells = this.open
-      ? getCalendarCells(this.viewMonth, this.value)
-      : []
-
-    return html`
-      <button
-        class="trigger"
-        part="trigger"
-        type="button"
-        aria-label="Åpne kalender"
-        aria-expanded=${this.open ? "true" : "false"}
-        ?disabled=${this.disabled}
-        @click=${this.togglePopup}
-      >
-        📅
-      </button>
-
-      <div class="popup" part="popup" ?hidden=${!this.open} @keydown=${this.handlePopupKeydown}>
-        <div class="popup-header" part="popup-header">
-          <div class="month-label" part="month-label" aria-live="polite">${monthFormatter.format(this.viewMonth)}</div>
-          <div class="month-controls" part="month-controls">
-            <button class="month-button" part="month-button" type="button" aria-label="Forrige måned" @click=${this.goToPreviousMonth}>‹</button>
-            <button class="month-button" part="month-button" type="button" aria-label="Neste måned" @click=${this.goToNextMonth}>›</button>
-          </div>
-        </div>
-
-        <div class="weekday-row" part="weekday-row" aria-hidden="true">
-          ${[0, 1, 2, 3, 4, 5, 6].map(
-            (index) =>
-              html`<div class="weekday" part="weekday">${weekdayFormatter.format(new Date(Date.UTC(2024, 0, 1 + index)))}</div>`,
-          )}
-        </div>
-
-        <div class="day-grid" part="day-grid" role="grid" aria-label=${monthFormatter.format(this.viewMonth)}>
-          ${splitInWeeks(monthCells).map(
-            (uke) => html`
-              <div class="week" role="row">
-                ${uke.map(
-                  (cell) => html`
-                    <button
-                      class="day"
-                      part=${dayParts(cell)}
-                      type="button"
-                      role="gridcell"
-                      data-date=${cell.iso}
-                      data-outside=${String(!cell.inMonth)}
-                      data-today=${String(cell.isToday)}
-                      data-selected=${String(cell.isSelected)}
-                      aria-selected=${String(cell.isSelected)}
-                      @click=${this.selectCalendarDate}
-                    >
-                      ${cell.date.getUTCDate()}
-                    </button>
-                  `,
-                )}
-              </div>
-            `,
-          )}
-        </div>
-      </div>
-    `
-  }
-
-  openPopup() {
-    if (this.disabled) return
-    this.viewMonth = parseIsoDate(this.value) ?? getToday()
-    this.open = true
-    this.requestUpdate()
-    queueMicrotask(() => {
-      const selected = this.renderRoot.querySelector<HTMLButtonElement>(
-        `.day[data-selected="true"]`,
-      )
-      selected?.focus()
-    })
-  }
-
-  closePopup() {
-    if (!this.open) return
-
-    // Panelet skjules med [hidden]. Står fokus på en dag inne i det, mister
-    // nettleseren fokus til <body>, og en tastaturbruker havner på toppen av
-    // siden. Fokus skal derfor tilbake til knappen som åpnet panelet.
-    // Lukkes panelet fordi brukeren klikket eller tabbet ut, står fokus
-    // allerede et annet sted, og da skal vi ikke rive det til oss.
-    const fokusStoInniPanelet =
-      (this.renderRoot as ShadowRoot).activeElement !== null
-
-    this.open = false
-    this.requestUpdate()
-
-    if (fokusStoInniPanelet) {
-      queueMicrotask(() => {
-        this.renderRoot.querySelector<HTMLButtonElement>(".trigger")?.focus()
-      })
-    }
-  }
-
-  private togglePopup = () => {
-    if (this.open) {
-      this.closePopup()
-    } else {
-      this.openPopup()
-    }
-  }
-
-  private goToPreviousMonth = () => {
-    this.viewMonth = addMonths(this.viewMonth, -1)
-    this.requestUpdate()
-  }
-
-  private goToNextMonth = () => {
-    this.viewMonth = addMonths(this.viewMonth, 1)
-    this.requestUpdate()
-  }
-
-  private selectCalendarDate = (event: Event) => {
-    const target = event.currentTarget as HTMLButtonElement | null
-    const iso = target?.dataset.date
-    if (!iso) return
-
-    this.value = iso
-    this.viewMonth = parseIsoDate(iso) ?? this.viewMonth
-
-    // Lukk før hendelsene sendes. closePopup køer et mikrotaskkall som
-    // flytter fokus til knappen. En lytter som selv vil flytte fokus, slik
-    // fs-date-field gjør til inputfeltet, køer sitt etterpå og vinner.
-    this.closePopup()
-
-    this.dispatchEvent(
-      new CustomEvent("date-select", {
-        detail: { value: iso },
-        bubbles: true,
-        composed: true,
-      }),
-    )
-    this.dispatchEvent(new Event("input", { bubbles: true, composed: true }))
-    this.dispatchEvent(new Event("change", { bubbles: true, composed: true }))
-  }
-
-  private handlePopupKeydown = (event: KeyboardEvent) => {
-    if (event.key === "Escape") {
-      event.preventDefault()
-      this.closePopup()
-      return
-    }
-
-    const current = event.target as HTMLButtonElement | null
-    if (!current?.classList.contains("day")) return
-
-    const iso = current.dataset.date
-    if (!iso) return
-
-    const targetDate = parseIsoDate(iso)
-    if (!targetDate) return
-
-    let nextDate: Date | null = null
-    if (event.key === "ArrowLeft") nextDate = addDays(targetDate, -1)
-    if (event.key === "ArrowRight") nextDate = addDays(targetDate, 1)
-    if (event.key === "ArrowUp") nextDate = addDays(targetDate, -7)
-    if (event.key === "ArrowDown") nextDate = addDays(targetDate, 7)
-    if (event.key === "Home") nextDate = startOfMonth(targetDate)
-    if (event.key === "End")
-      nextDate = addDays(addMonths(startOfMonth(targetDate), 1), -1)
-
-    if (!nextDate) return
-
-    event.preventDefault()
-    this.viewMonth = startOfMonth(nextDate)
-    this.requestUpdate()
-
-    queueMicrotask(() => {
-      const nextButton = this.renderRoot.querySelector<HTMLButtonElement>(
-        `.day[data-date="${formatIsoDate(nextDate)}"]`,
-      )
-      nextButton?.focus()
-    })
-  }
-
-  private handleDocumentClick = (event: Event) => {
-    if (!this.open) return
-    const path = event.composedPath()
-    if (path.includes(this)) return
-    this.closePopup()
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "fs-calendar": FsCalendar
-  }
-}
-
-export function defineFsCalendar(tagName = FS_CALENDAR_TAG): void {
-  if (!customElements.get(tagName)) {
-    customElements.define(tagName, FsCalendar)
-  }
-}

package/src/components/frittstaende/date-field/date-field.css

@@ -1,54 +0,0 @@
-@import "../../css/label/label.css";
-@import "../../css/input/input.css";
-@import "../../css/help-text/help-text.css";
-@import "../../css/error-text/error-text.css";
-
-@layer fristil {
-  /* Oppsettet lå tidligere i style=-attributter på elementene. Inline stil
-	   slår alt en konsument kan skrive uten !important, så komponenten var i
-	   praksis låst. Her er den vanlig CSS i laget vårt, som alt annet. */
-
-  .fs-date-field__field {
-    position: relative;
-    display: inline-grid;
-    width: 100%;
-  }
-
-  /* Plass til ikonknappen inne i feltet */
-  .fs-date-field__field .fs-input {
-    padding-inline-end: var(--fs-date-field-icon-space, var(--size-10));
-  }
-
-  .fs-date-field__icon-btn {
-    position: absolute;
-    inset-block-start: 50%;
-    inset-inline-end: var(--size-2);
-    transform: translateY(-50%);
-    display: inline-grid;
-    place-items: center;
-    width: var(--fs-date-field-icon-size, var(--size-7));
-    height: var(--fs-date-field-icon-size, var(--size-7));
-    padding: 0;
-    border: none;
-    background: transparent;
-    color: var(--semantic-page-foreground);
-    border-radius: var(--fs-date-field-icon-radius, var(--size-1));
-    cursor: pointer;
-  }
-
-  .fs-date-field__icon-btn:disabled {
-    color: var(--semantic-disabled-foreground);
-    cursor: not-allowed;
-  }
-
-  /* Kalenderen er et null-stort feste panelet henger under, slik at panelet
-	   ikke påvirker høyden på feltet. */
-  .fs-date-field__calendar {
-    position: absolute;
-    inset-block-start: 100%;
-    inset-inline-start: 0;
-    width: 0;
-    height: 0;
-    overflow: visible;
-  }
-}