@fristil/designsystem 0.2.0

package/dist/components/frittstaende/date-field/fs-date-field.js

@@ -0,0 +1,264 @@
+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";
+function uniqueId(prefix) {
+    return `${prefix}-${Math.random().toString(36).slice(2, 9)}`;
+}
+function isoToDisplay(iso) {
+    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) {
+    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 {
+    /** Det feltet skal vise: brukerens egen tekst, ellers `value`. */
+    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) {
+        if (changed.has("value"))
+            this._typed = null;
+    }
+    constructor() {
+        super();
+        this.label = "Dato";
+        this.value = "";
+        this.placeholder = "DD-MM-YYYY";
+        this.required = false;
+        this.optional = false;
+        this.disabled = false;
+        this.readonly = false;
+        this.invalid = false;
+        /** Sann når brukeren har skrevet en dato som ikke finnes. */
+        this._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.
+         */
+        this._typed = null;
+        this.uid = uniqueId("fs-date-field");
+        this.handleIconClick = (event) => {
+            event.stopPropagation();
+            const calendar = this.calendarElement;
+            if (!calendar)
+                return;
+            if (calendar.open) {
+                calendar.closePopup?.();
+            }
+            else {
+                calendar.openPopup?.();
+            }
+        };
+        this.handleInputKeydown = (event) => {
+            if (event.key === " " || event.key === "ArrowDown") {
+                event.preventDefault();
+                const calendar = this.calendarElement;
+                calendar?.openPopup?.();
+            }
+        };
+        this.handleInput = (event) => {
+            const target = event.currentTarget;
+            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 }));
+        };
+        this.handleInputBlur = (event) => {
+            const target = event.currentTarget;
+            const raw = target.value;
+            if (raw === "") {
+                this._inputInvalid = false;
+            }
+            else {
+                this._inputInvalid = displayToIso(raw) === null;
+            }
+            this.requestUpdate();
+        };
+        this.handleCalendarSelect = (event) => {
+            const custom = event;
+            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();
+            });
+        };
+        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>
+    `;
+    }
+    get inputId() {
+        return this.controlId || `${this.uid}-input`;
+    }
+    get calendarId() {
+        return `${this.uid}-calendar`;
+    }
+    get helpId() {
+        return `${this.uid}-help`;
+    }
+    get errorId() {
+        return `${this.uid}-error`;
+    }
+    get inputElement() {
+        return this.querySelector(`#${this.inputId}`);
+    }
+    get calendarElement() {
+        return this.querySelector(`#${this.calendarId}`);
+    }
+}
+FsDateField.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" },
+};
+export function defineFsDateField(tagName = FS_DATE_FIELD_TAG) {
+    if (!customElements.get(tagName)) {
+        customElements.define(tagName, FsDateField);
+    }
+}
+//# sourceMappingURL=fs-date-field.js.map

package/dist/components/frittstaende/date-field/fs-date-field.js.map

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

package/dist/components/frittstaende/suggestion/fs-suggestion.d.ts

@@ -0,0 +1,133 @@
+import { LitElement } from "lit";
+export declare const FS_SUGGESTION_TAG: "fs-suggestion";
+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 declare class FsSuggestion 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;
+        };
+        invalid: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        required: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        optional: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        disabled: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        controlId: {
+            type: StringConstructor;
+            attribute: string;
+        };
+        describedBy: {
+            type: StringConstructor;
+            attribute: string;
+        };
+        noResultsText: {
+            type: StringConstructor;
+            attribute: string;
+        };
+        open: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+    };
+    label: string;
+    value: string;
+    name?: string;
+    placeholder?: string;
+    helpText?: string;
+    errorText?: string;
+    invalid: boolean;
+    required: boolean;
+    optional: boolean;
+    disabled: boolean;
+    controlId?: string;
+    describedBy?: string;
+    noResultsText: string;
+    open: boolean;
+    /** Alternativet som er markert med piltastene. */
+    private activeIndex;
+    private options;
+    private readonly uid;
+    createRenderRoot(): this;
+    private observer?;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    /** Leser `<option>`-barna og fjerner dem fra visningen. */
+    private readOptions;
+    /** Alternativene som passer med det som står i feltet. */
+    private get filteredOptions();
+    private get inputId();
+    private get listId();
+    private get statusId();
+    render(): import("lit").TemplateResult<1>;
+    /** Antall treff, som tekst skjermleseren leser opp. */
+    private statusText;
+    private handleFocus;
+    private handleInput;
+    private handleKeydown;
+    private handleOptionClick;
+    private handleOutsideClick;
+    /** Velger et alternativ og melder fra. */
+    select(option: Option): void;
+    /** Åpner forslagslista. */
+    show(): void;
+    /** Lukker forslagslista. */
+    hide(): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "fs-suggestion": FsSuggestion;
+    }
+}
+export declare function defineFsSuggestion(tagName?: "fs-suggestion"): void;
+export {};
+//# sourceMappingURL=fs-suggestion.d.ts.map

package/dist/components/frittstaende/suggestion/fs-suggestion.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"fs-suggestion.d.ts","sourceRoot":"","sources":["../../../../src/components/frittstaende/suggestion/fs-suggestion.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,UAAU,EAAE,MAAM,KAAK,CAAA;AAMtC,eAAO,MAAM,iBAAiB,EAAG,eAAwB,CAAA;AAEzD,KAAK,MAAM,GAAG;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,CAAA;AAE9C;;;;;;;;;;;;;;;;;;GAkBG;AACH,qBAAa,YAAa,SAAQ,UAAU;IAC1C,MAAM,CAAC,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;MAehB;IAED,KAAK,SAAK;IACV,KAAK,SAAK;IACV,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,OAAO,UAAQ;IACf,QAAQ,UAAQ;IAChB,QAAQ,UAAQ;IAChB,QAAQ,UAAQ;IAChB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,aAAa,SAAgB;IAC7B,IAAI,UAAQ;IAEZ,kDAAkD;IAClD,OAAO,CAAC,WAAW,CAAK;IACxB,OAAO,CAAC,OAAO,CAAe;IAC9B,OAAO,CAAC,QAAQ,CAAC,GAAG,CACuC;IAE3D,gBAAgB;IAIhB,OAAO,CAAC,QAAQ,CAAC,CAAkB;IAEnC,iBAAiB;IAgBjB,oBAAoB;IAOpB,2DAA2D;IAC3D,OAAO,CAAC,WAAW;IAYnB,0DAA0D;IAC1D,OAAO,KAAK,eAAe,GAM1B;IAED,OAAO,KAAK,OAAO,GAElB;IAED,OAAO,KAAK,MAAM,GAEjB;IAED,OAAO,KAAK,QAAQ,GAEnB;IAED,MAAM;IAsGN,uDAAuD;IACvD,OAAO,CAAC,UAAU;IAKlB,OAAO,CAAC,WAAW,CAElB;IAED,OAAO,CAAC,WAAW,CAKlB;IAED,OAAO,CAAC,aAAa,CA2BpB;IAED,OAAO,CAAC,iBAAiB,CAKxB;IAED,OAAO,CAAC,kBAAkB,CAIzB;IAED,0CAA0C;IAC1C,MAAM,CAAC,MAAM,EAAE,MAAM;IAiBrB,2BAA2B;IAC3B,IAAI;IAIJ,4BAA4B;IAC5B,IAAI;CAIL;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,eAAe,EAAE,YAAY,CAAA;KAC9B;CACF;AAED,wBAAgB,kBAAkB,CAAC,OAAO,kBAAoB,GAAG,IAAI,CAIpE"}