@fristil/designsystem 0.2.0

package/dist/components/frittstaende/calendar/fs-calendar.js

@@ -0,0 +1,462 @@
+import { css, html, LitElement } from "lit";
+export const FS_CALENDAR_TAG = "fs-calendar";
+/**
+ * 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) {
+    const weeks = [];
+    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) {
+    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) {
+    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) {
+    return date.toISOString().slice(0, 10);
+}
+function startOfMonth(date) {
+    return new Date(Date.UTC(date.getUTCFullYear(), date.getUTCMonth(), 1));
+}
+function addDays(date, delta) {
+    return new Date(Date.UTC(date.getUTCFullYear(), date.getUTCMonth(), date.getUTCDate() + delta));
+}
+function addMonths(date, delta) {
+    return new Date(Date.UTC(date.getUTCFullYear(), date.getUTCMonth() + delta, 1));
+}
+function mondayBasedWeekday(date) {
+    return (date.getUTCDay() + 6) % 7;
+}
+function getToday() {
+    const today = new Date();
+    return new Date(Date.UTC(today.getUTCFullYear(), today.getUTCMonth(), today.getUTCDate()));
+}
+function getCalendarCells(monthDate, selectedIso) {
+    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 {
+    constructor() {
+        super(...arguments);
+        /** @attr */
+        this.open = false;
+        /** @attr */
+        this.disabled = false;
+        /** @attr */
+        this.value = "";
+        /** @attr trigger-hidden */
+        this.triggerHidden = false;
+        this.viewMonth = getToday();
+        this.togglePopup = () => {
+            if (this.open) {
+                this.closePopup();
+            }
+            else {
+                this.openPopup();
+            }
+        };
+        this.goToPreviousMonth = () => {
+            this.viewMonth = addMonths(this.viewMonth, -1);
+            this.requestUpdate();
+        };
+        this.goToNextMonth = () => {
+            this.viewMonth = addMonths(this.viewMonth, 1);
+            this.requestUpdate();
+        };
+        this.selectCalendarDate = (event) => {
+            const target = event.currentTarget;
+            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 }));
+        };
+        this.handlePopupKeydown = (event) => {
+            if (event.key === "Escape") {
+                event.preventDefault();
+                this.closePopup();
+                return;
+            }
+            const current = event.target;
+            if (!current?.classList.contains("day"))
+                return;
+            const iso = current.dataset.date;
+            if (!iso)
+                return;
+            const targetDate = parseIsoDate(iso);
+            if (!targetDate)
+                return;
+            let nextDate = 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(`.day[data-date="${formatIsoDate(nextDate)}"]`);
+                nextButton?.focus();
+            });
+        };
+        this.handleDocumentClick = (event) => {
+            if (!this.open)
+                return;
+            const path = event.composedPath();
+            if (path.includes(this))
+                return;
+            this.closePopup();
+        };
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.ownerDocument.addEventListener("click", this.handleDocumentClick);
+    }
+    disconnectedCallback() {
+        this.ownerDocument.removeEventListener("click", this.handleDocumentClick);
+        super.disconnectedCallback();
+    }
+    updated(changed) {
+        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(`.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.activeElement !== null;
+        this.open = false;
+        this.requestUpdate();
+        if (fokusStoInniPanelet) {
+            queueMicrotask(() => {
+                this.renderRoot.querySelector(".trigger")?.focus();
+            });
+        }
+    }
+}
+FsCalendar.properties = {
+    open: { type: Boolean, reflect: true },
+    disabled: { type: Boolean, reflect: true },
+    value: { type: String, reflect: true },
+    triggerHidden: {
+        type: Boolean,
+        reflect: true,
+        attribute: "trigger-hidden",
+    },
+};
+FsCalendar.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);
+    }
+  `;
+export function defineFsCalendar(tagName = FS_CALENDAR_TAG) {
+    if (!customElements.get(tagName)) {
+        customElements.define(tagName, FsCalendar);
+    }
+}
+//# sourceMappingURL=fs-calendar.js.map

package/dist/components/frittstaende/calendar/fs-calendar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"fs-calendar.js","sourceRoot":"","sources":["../../../../src/components/frittstaende/calendar/fs-calendar.ts"],"names":[],"mappings":"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"}

package/dist/components/frittstaende/date-field/fs-date-field.d.ts

@@ -0,0 +1,110 @@
+import { LitElement } from "lit";
+export declare const FS_DATE_FIELD_TAG: "fs-date-field";
+export declare class FsDateField extends LitElement {
+    static properties: {
+        label: {
+            type: StringConstructor;
+        };
+        value: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+        name: {
+            type: StringConstructor;
+        };
+        placeholder: {
+            type: StringConstructor;
+        };
+        helpText: {
+            type: StringConstructor;
+            attribute: string;
+        };
+        errorText: {
+            type: StringConstructor;
+            attribute: string;
+        };
+        required: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        optional: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        disabled: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        readonly: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        invalid: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        controlId: {
+            type: StringConstructor;
+            attribute: string;
+        };
+        describedBy: {
+            type: StringConstructor;
+            attribute: string;
+        };
+    };
+    label: string;
+    value: string;
+    name?: string;
+    placeholder: string;
+    helpText?: string;
+    errorText?: string;
+    required: boolean;
+    optional: boolean;
+    disabled: boolean;
+    readonly: boolean;
+    invalid: boolean;
+    controlId?: string;
+    describedBy?: string;
+    /** Sann når brukeren har skrevet en dato som ikke finnes. */
+    private _inputInvalid;
+    /**
+     * 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;
+    /** Det feltet skal vise: brukerens egen tekst, ellers `value`. */
+    private get displayValue();
+    /**
+     * 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>): void;
+    private readonly uid;
+    constructor();
+    createRenderRoot(): this;
+    render(): import("lit").TemplateResult<1>;
+    private get inputId();
+    private get calendarId();
+    private get helpId();
+    private get errorId();
+    private get inputElement();
+    private get calendarElement();
+    private handleIconClick;
+    private handleInputKeydown;
+    private handleInput;
+    private handleInputBlur;
+    private handleCalendarSelect;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "fs-date-field": FsDateField;
+    }
+}
+export declare function defineFsDateField(tagName?: "fs-date-field"): void;
+//# sourceMappingURL=fs-date-field.d.ts.map

package/dist/components/frittstaende/date-field/fs-date-field.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"fs-date-field.d.ts","sourceRoot":"","sources":["../../../../src/components/frittstaende/date-field/fs-date-field.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,UAAU,EAAE,MAAM,KAAK,CAAA;AAOtC,eAAO,MAAM,iBAAiB,EAAG,eAAwB,CAAA;AA+BzD,qBAAa,WAAY,SAAQ,UAAU;IACzC,MAAM,CAAC,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;MAchB;IAED,KAAK,SAAS;IACd,KAAK,SAAK;IACV,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,WAAW,SAAe;IAC1B,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,UAAQ;IAChB,QAAQ,UAAQ;IAChB,QAAQ,UAAQ;IAChB,QAAQ,UAAQ;IAChB,OAAO,UAAQ;IACf,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,WAAW,CAAC,EAAE,MAAM,CAAA;IAEpB,6DAA6D;IAC7D,OAAO,CAAC,aAAa,CAAQ;IAE7B;;;;;;;OAOG;IACH,OAAO,CAAC,MAAM,CAAsB;IAEpC,kEAAkE;IAClE,OAAO,KAAK,YAAY,GAEvB;IAED;;;;;OAKG;IACH,UAAU,CAAC,OAAO,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC;IAIxC,OAAO,CAAC,QAAQ,CAAC,GAAG,CAA4B;;IAOhD,gBAAgB;IAIhB,MAAM;IA6FN,OAAO,KAAK,OAAO,GAElB;IAED,OAAO,KAAK,UAAU,GAErB;IAED,OAAO,KAAK,MAAM,GAEjB;IAED,OAAO,KAAK,OAAO,GAElB;IAED,OAAO,KAAK,YAAY,GAEvB;IAED,OAAO,KAAK,eAAe,GAE1B;IAED,OAAO,CAAC,eAAe,CAetB;IAED,OAAO,CAAC,kBAAkB,CAQzB;IAED,OAAO,CAAC,WAAW,CAelB;IAED,OAAO,CAAC,eAAe,CAStB;IAED,OAAO,CAAC,oBAAoB,CAe3B;CACF;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,eAAe,EAAE,WAAW,CAAA;KAC7B;CACF;AAED,wBAAgB,iBAAiB,CAAC,OAAO,kBAAoB,GAAG,IAAI,CAInE"}