@fristil/designsystem 0.3.0 → 0.5.0

package/dist/components/ramme/suggestion/fs-suggestion.js

@@ -0,0 +1,232 @@
+import { SUGGESTION_EMPTY_CLASS, SUGGESTION_OPTION_CLASS, } from "./suggestion.js";
+export const FS_SUGGESTION_TAG = "fs-suggestion";
+/**
+ * Tastaturet og filtreringen i et felt med forslagsliste.
+ *
+ * Serveren skriver feltet og lista med `fs.suggestion()`. Komponenten rendrer
+ * ingenting. Den lagde tidligere hele feltet selv, og da fantes det verken
+ * ledetekst eller inndatafelt før skriptet hadde kjørt, og ingenting ble med
+ * i innsendingen.
+ *
+ * Det komponenten gjør er det nettleseren ikke gjør: filtrerer alternativene
+ * mens brukeren skriver, flytter markeringen med piltastene, og holder
+ * `aria-activedescendant` i synk slik at skjermleseren leser opp alternativet
+ * uten at fokus forlater feltet.
+ *
+ * Patcher serveren lista selv, som i en Datastar-app, slår filtreringen seg
+ * av: da er det serveren som bestemmer hva som vises.
+ *
+ * ```html
+ * <fs-suggestion>
+ *   <label class="fs-label" for="kommune">Kommune</label>
+ *   <div class="fs-suggestion__field">
+ *     <input class="fs-input" id="kommune" role="combobox" aria-controls="kommune-list"
+ *            aria-expanded="false" data-preserve-attr="aria-expanded aria-activedescendant">
+ *     <ul class="fs-suggestion__list" id="kommune-list" role="listbox" hidden
+ *         data-preserve-attr="hidden">
+ *       <li class="fs-suggestion__option" id="kommune-option-0" role="option">Bergen</li>
+ *     </ul>
+ *   </div>
+ * </fs-suggestion>
+ * ```
+ */
+export class FsSuggestion extends HTMLElement {
+    constructor() {
+        super(...arguments);
+        this.activeIndex = -1;
+        /** Alternativene som alt har fått lytteren sin. */
+        this.bundne = new WeakSet();
+        /** Sant mens komponenten selv sender hendelser, så den ikke svarer seg selv. */
+        this.choosing = false;
+        this.handleInput = () => {
+            if (this.choosing)
+                return;
+            this.filter();
+            this.setOpen(true);
+        };
+        this.handleFocus = () => {
+            this.filter();
+            this.setOpen(true);
+        };
+        this.handleKeydown = (event) => {
+            const åpen = this.listElement?.hidden === false;
+            if (event.key === "ArrowDown") {
+                event.preventDefault();
+                if (!åpen) {
+                    this.filter();
+                    this.setOpen(true);
+                }
+                this.markActive(this.activeIndex + 1);
+            }
+            else if (event.key === "ArrowUp") {
+                event.preventDefault();
+                this.markActive(this.activeIndex - 1);
+            }
+            else if (event.key === "Enter" && åpen && this.activeIndex >= 0) {
+                event.preventDefault();
+                const valgt = this.visible[this.activeIndex];
+                if (valgt)
+                    this.choose(valgt);
+            }
+            else if (event.key === "Escape" && åpen) {
+                event.preventDefault();
+                this.setOpen(false);
+            }
+        };
+        this.handleOptionMouseDown = (event) => {
+            // mousedown og ikke click: feltet mister ellers fokus før valget rekker
+            // å skje, og lista lukker seg først.
+            event.preventDefault();
+            this.choose(event.currentTarget);
+        };
+        this.handleOutsideClick = (event) => {
+            if (this.contains(event.target))
+                return;
+            this.setOpen(false);
+        };
+    }
+    connectedCallback() {
+        this.observer = new MutationObserver(() => this.bind());
+        this.observer.observe(this, { childList: true, subtree: true });
+        this.bind();
+        document.addEventListener("click", this.handleOutsideClick, true);
+    }
+    disconnectedCallback() {
+        document.removeEventListener("click", this.handleOutsideClick, true);
+        this.observer?.disconnect();
+        this.observer = undefined;
+        this.unbind();
+    }
+    /** Slår av filtreringen på klienten. Da er det serveren som bestemmer. */
+    get serverFiltered() {
+        return this.hasAttribute("server-filtered");
+    }
+    get listElement() {
+        return this.querySelector("[role='listbox']");
+    }
+    get options() {
+        return [
+            ...this.querySelectorAll(`.${SUGGESTION_OPTION_CLASS}`),
+        ];
+    }
+    /** Alternativene som er synlige nå. */
+    get visible() {
+        return this.options.filter((option) => !option.hidden);
+    }
+    unbind() {
+        const control = this.control;
+        if (!control)
+            return;
+        control.removeEventListener("input", this.handleInput);
+        control.removeEventListener("keydown", this.handleKeydown);
+        control.removeEventListener("focus", this.handleFocus);
+        this.control = undefined;
+    }
+    bind() {
+        const control = this.querySelector("[role='combobox']");
+        if (!control)
+            return;
+        if (control !== this.control) {
+            this.unbind();
+            control.addEventListener("input", this.handleInput);
+            control.addEventListener("keydown", this.handleKeydown);
+            control.addEventListener("focus", this.handleFocus);
+            this.control = control;
+        }
+        // Alternativene byttes ut uavhengig av feltet: i en Datastar-app sender
+        // serveren en ny liste mens brukeren skriver. Lå dette bak sjekken over,
+        // fikk de nye alternativene aldri lytteren sin, og valg med mus sluttet
+        // å virke etter første oppdatering.
+        for (const option of this.options) {
+            if (this.bundne.has(option))
+                continue;
+            option.addEventListener("mousedown", this.handleOptionMouseDown);
+            this.bundne.add(option);
+        }
+    }
+    setOpen(open) {
+        const list = this.listElement;
+        if (!list || !this.control)
+            return;
+        list.hidden = !open;
+        this.control.setAttribute("aria-expanded", String(open));
+        if (!open) {
+            this.activeIndex = -1;
+            this.control.removeAttribute("aria-activedescendant");
+            for (const option of this.options) {
+                option.setAttribute("aria-selected", "false");
+            }
+        }
+    }
+    filter() {
+        if (this.serverFiltered)
+            return;
+        const query = (this.control?.value ?? "").trim().toLowerCase();
+        for (const option of this.options) {
+            const label = (option.textContent ?? "").trim().toLowerCase();
+            option.hidden = query !== "" && !label.includes(query);
+        }
+        const treff = this.visible.length;
+        const empty = this.querySelector(`.${SUGGESTION_EMPTY_CLASS}`);
+        if (empty)
+            empty.hidden = treff > 0;
+        this.announce(treff);
+    }
+    /**
+     * Melder antall treff.
+     *
+     * Uten dette får den som ikke ser skjermen ingen beskjed om at lista
+     * snevret seg inn mens hun skrev. Teksten er klientgenerert, så elementet
+     * har `data-ignore-morph` fra byggeren.
+     */
+    announce(treff) {
+        const status = this.querySelector("[role='status']");
+        if (!status)
+            return;
+        const tekst = treff === 0 ? "Ingen treff" : treff === 1 ? "Ett treff" : `${treff} treff`;
+        if (status.textContent !== tekst)
+            status.textContent = tekst;
+    }
+    markActive(index) {
+        const synlige = this.visible;
+        if (synlige.length === 0 || !this.control)
+            return;
+        const neste = (index + synlige.length) % synlige.length;
+        this.activeIndex = neste;
+        for (const option of this.options) {
+            option.setAttribute("aria-selected", "false");
+        }
+        const aktiv = synlige[neste];
+        aktiv.setAttribute("aria-selected", "true");
+        // aria-activedescendant flytter skjermleserens lesepunkt uten at fokus
+        // forlater feltet. Uten den leses alternativet aldri opp.
+        this.control.setAttribute("aria-activedescendant", aktiv.id);
+        aktiv.scrollIntoView({ block: "nearest" });
+    }
+    choose(option) {
+        if (!this.control)
+            return;
+        const value = option.getAttribute("data-value") ?? (option.textContent ?? "").trim();
+        this.control.value = value;
+        // Flagget må stå før hendelsene sendes. `input` er den samme hendelsen
+        // komponenten selv lytter på, så uten dette åpner lista seg igjen i det
+        // øyeblikket brukeren har valgt noe.
+        this.choosing = true;
+        this.control.dispatchEvent(new Event("input", { bubbles: true }));
+        this.control.dispatchEvent(new Event("change", { bubbles: true }));
+        this.choosing = false;
+        this.setOpen(false);
+        this.dispatchEvent(new CustomEvent("suggestion-select", {
+            detail: { value },
+            bubbles: true,
+            composed: true,
+        }));
+    }
+}
+FsSuggestion.observedAttributes = ["server-filtered"];
+export function defineFsSuggestion(tagName = FS_SUGGESTION_TAG) {
+    if (!customElements.get(tagName)) {
+        customElements.define(tagName, FsSuggestion);
+    }
+}
+//# sourceMappingURL=fs-suggestion.js.map

package/dist/components/ramme/suggestion/fs-suggestion.js.map

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

package/dist/components/ramme/suggestion/suggestion.d.ts

@@ -0,0 +1,97 @@
+import { type FieldOptions } from "../field/field-core.js";
+export declare const SUGGESTION_CLASS: "fs-suggestion";
+export declare const SUGGESTION_FIELD_CLASS: "fs-suggestion__field";
+export declare const SUGGESTION_LIST_CLASS: "fs-suggestion__list";
+export declare const SUGGESTION_OPTION_CLASS: "fs-suggestion__option";
+export declare const SUGGESTION_EMPTY_CLASS: "fs-suggestion__empty";
+export declare const SUGGESTION_STATUS_CLASS: "fs-sr-only";
+export type SuggestionOptions = Omit<FieldOptions, "id"> & {
+    /** Felles id-stamme. Kontrollen blir `${id}`, lista `${id}-list`. */
+    id: string;
+    /** Antall alternativer serveren sender med. Standard: 0. */
+    count?: number;
+    /** Alternativet som er markert med piltastene. Standard: ingen. */
+    activeIndex?: number;
+    /** Lista er åpen. Standard: lukket. */
+    open?: boolean;
+};
+/**
+ * Attributtene for et felt med forslagsliste.
+ *
+ * Serveren skriver både feltet og lista. Komponenten filtrerer, tar
+ * piltastene og holder `aria-activedescendant` i synk. Den rendrer ingenting:
+ * tidligere lagde den hele feltet selv, og da fantes det ikke noe å fylle ut
+ * før skriptet hadde kjørt.
+ *
+ * Attributtene som endrer seg mens brukeren skriver står i
+ * `data-preserve-attr`, ellers river Datastars morfing dem bort.
+ */
+export declare const suggestion: ({ id, count, activeIndex, open, ...field }: SuggestionOptions) => {
+    label: {
+        class: "fs-label";
+        for: string;
+        "data-required"?: import("../../css/shared.js").RequiredMarker;
+        "data-optional"?: "";
+        "aria-disabled"?: "true";
+    };
+    field: {
+        class: "fs-suggestion__field";
+    };
+    control: {
+        class: "fs-input";
+        type: "text";
+        role: "combobox";
+        autocomplete: "off";
+        "aria-expanded": "true" | "false";
+        "aria-controls": string;
+        "aria-describedby": string;
+        "aria-autocomplete": "list";
+        "aria-activedescendant": string | undefined;
+        "data-preserve-attr": "aria-expanded aria-activedescendant";
+        id: string;
+        "aria-invalid"?: "true";
+        "data-state"?: "invalid";
+        disabled?: true;
+    };
+    list: {
+        class: "fs-suggestion__list";
+        id: string;
+        role: "listbox";
+        hidden: true | undefined;
+        "data-preserve-attr": "hidden";
+    };
+    options: {
+        class: "fs-suggestion__option";
+        id: string;
+        role: "option";
+        "aria-selected": "true" | "false";
+        "data-preserve-attr": "aria-selected hidden";
+    }[];
+    empty: {
+        class: "fs-suggestion__empty";
+    };
+    /**
+     * Området som melder antall treff til skjermlesere.
+     *
+     * Teksten skrives av komponenten mens brukeren taster, så den finnes ikke
+     * i serverens utgave. `data-ignore-morph` hindrer at neste patch tømmer
+     * den. Elementet må likevel stå i markupen serveren sender, ellers finnes
+     * det ikke noe å melde i før skriptet har kjørt.
+     */
+    status: {
+        class: "fs-sr-only";
+        id: string;
+        role: "status";
+        "aria-live": "polite";
+        "data-ignore-morph": "";
+    };
+    help: {
+        id: string;
+    };
+    error: {
+        id: string;
+        hidden?: true;
+    };
+    state: "default" | "success" | "invalid";
+};
+//# sourceMappingURL=suggestion.d.ts.map

package/dist/components/ramme/suggestion/suggestion.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"suggestion.d.ts","sourceRoot":"","sources":["../../../../src/components/ramme/suggestion/suggestion.ts"],"names":[],"mappings":"AACA,OAAO,EAEL,KAAK,YAAY,EAClB,MAAM,wBAAwB,CAAA;AAE/B,eAAO,MAAM,gBAAgB,EAAG,eAAwB,CAAA;AACxD,eAAO,MAAM,sBAAsB,EAAG,sBAA+B,CAAA;AACrE,eAAO,MAAM,qBAAqB,EAAG,qBAA8B,CAAA;AACnE,eAAO,MAAM,uBAAuB,EAAG,uBAAgC,CAAA;AACvE,eAAO,MAAM,sBAAsB,EAAG,sBAA+B,CAAA;AACrE,eAAO,MAAM,uBAAuB,EAAG,YAAqB,CAAA;AAE5D,MAAM,MAAM,iBAAiB,GAAG,IAAI,CAAC,YAAY,EAAE,IAAI,CAAC,GAAG;IACzD,qEAAqE;IACrE,EAAE,EAAE,MAAM,CAAA;IACV,4DAA4D;IAC5D,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,mEAAmE;IACnE,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,uCAAuC;IACvC,IAAI,CAAC,EAAE,OAAO,CAAA;CACf,CAAA;AAED;;;;;;;;;;GAUG;AACH,eAAO,MAAM,UAAU,GAAI,4CAMxB,iBAAiB;;;;;;;;;;;;;;;;yBAgBgC,MAAM,GAAG,OAAO;;;;;;;;;;;;;;;;;;;;;;yBAsBxD,MAAM,GACN,OAAO;;;;;;IAKf;;;;;;;OAOG;;;;;;;;;;;;;;;;CAYN,CAAA"}

package/dist/components/ramme/suggestion/suggestion.js

@@ -0,0 +1,79 @@
+import { attributes } from "../../css/shared.js";
+import { computeFieldAttributes, } from "../field/field-core.js";
+export const SUGGESTION_CLASS = "fs-suggestion";
+export const SUGGESTION_FIELD_CLASS = "fs-suggestion__field";
+export const SUGGESTION_LIST_CLASS = "fs-suggestion__list";
+export const SUGGESTION_OPTION_CLASS = "fs-suggestion__option";
+export const SUGGESTION_EMPTY_CLASS = "fs-suggestion__empty";
+export const SUGGESTION_STATUS_CLASS = "fs-sr-only";
+/**
+ * Attributtene for et felt med forslagsliste.
+ *
+ * Serveren skriver både feltet og lista. Komponenten filtrerer, tar
+ * piltastene og holder `aria-activedescendant` i synk. Den rendrer ingenting:
+ * tidligere lagde den hele feltet selv, og da fantes det ikke noe å fylle ut
+ * før skriptet hadde kjørt.
+ *
+ * Attributtene som endrer seg mens brukeren skriver står i
+ * `data-preserve-attr`, ellers river Datastars morfing dem bort.
+ */
+export const suggestion = ({ id, count = 0, activeIndex = -1, open = false, ...field }) => {
+    const computed = computeFieldAttributes({ ...field, id });
+    const listId = `${id}-list`;
+    const statusId = `${id}-status`;
+    const optionId = (index) => `${id}-option-${index}`;
+    const aktiv = open && activeIndex >= 0 && activeIndex < count;
+    return {
+        label: computed.label,
+        field: { class: SUGGESTION_FIELD_CLASS },
+        control: attributes({
+            ...computed.control,
+            class: "fs-input",
+            type: "text",
+            role: "combobox",
+            autocomplete: "off",
+            "aria-expanded": (open ? "true" : "false"),
+            "aria-controls": listId,
+            "aria-describedby": [computed.control["aria-describedby"], statusId]
+                .filter(Boolean)
+                .join(" "),
+            "aria-autocomplete": "list",
+            "aria-activedescendant": aktiv ? optionId(activeIndex) : undefined,
+            "data-preserve-attr": "aria-expanded aria-activedescendant",
+        }),
+        list: attributes({
+            class: SUGGESTION_LIST_CLASS,
+            id: listId,
+            role: "listbox",
+            hidden: open ? undefined : true,
+            "data-preserve-attr": "hidden",
+        }),
+        options: Array.from({ length: count }, (_, index) => attributes({
+            class: SUGGESTION_OPTION_CLASS,
+            id: optionId(index),
+            role: "option",
+            "aria-selected": (index === activeIndex ? "true" : "false"),
+            "data-preserve-attr": "aria-selected hidden",
+        })),
+        empty: { class: SUGGESTION_EMPTY_CLASS },
+        /**
+         * Området som melder antall treff til skjermlesere.
+         *
+         * Teksten skrives av komponenten mens brukeren taster, så den finnes ikke
+         * i serverens utgave. `data-ignore-morph` hindrer at neste patch tømmer
+         * den. Elementet må likevel stå i markupen serveren sender, ellers finnes
+         * det ikke noe å melde i før skriptet har kjørt.
+         */
+        status: {
+            class: SUGGESTION_STATUS_CLASS,
+            id: statusId,
+            role: "status",
+            "aria-live": "polite",
+            "data-ignore-morph": "",
+        },
+        help: computed.help,
+        error: computed.error,
+        state: computed.state,
+    };
+};
+//# sourceMappingURL=suggestion.js.map

package/dist/components/ramme/suggestion/suggestion.js.map

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

package/dist/components/ramme/tabs/fs-tabs.d.ts

@@ -1,52 +1,47 @@
-import { LitElement } from "lit";
 export declare const FS_TABS_TAG: "fs-tabs";
-export declare const TABS_LIST_CLASS: "fs-tabs__list";
-export declare const TABS_PANEL_CLASS: "fs-tabs__panel";
 /**
- * Kobler en rad med knapper til panelene de hører til.
+ * Tastaturet i en fanerad.
  *
- * Du skriver knappene og panelene selv. Komponenten setter rollene, holder
- * `aria-selected` og `aria-controls` i synk, skjuler panelene som ikke er
- * valgt, og tar piltastene.
+ * Serveren skriver rollene, `aria-controls` og `hidden` med `fs.tabs()`.
+ * Gjorde komponenten det, ville alle panelene vises til skriptet hadde kjørt,
+ * og innholdet hoppe når panelene skjulte seg selv. I en Datastar-app ville
+ * de dessuten komme tilbake ved hver patch.
  *
- * Tastaturet er hele grunnen til at komponenten finnes. I en faneliste skal
- * Tab hoppe forbi hele raden og inn i panelet, mens piltastene flytter mellom
- * fanene. Et sett knapper uten denne koblingen gir én tabbestopp per fane, og
- * skjermleseren sier «knapp» der den skulle sagt «fane, 2 av 3, valgt».
+ * Det komponenten gjør er det nettleseren ikke gjør selv: Tab hopper forbi
+ * hele raden og inn i panelet, mens piltastene flytter mellom fanene. Et sett
+ * knapper uten dette gir én tabbestopp per fane, og skjermleseren sier
+ * «knapp» der den skulle sagt «fane, 2 av 3, valgt».
+ *
+ * Attributtene som endrer seg når brukeren velger, altså `aria-selected`,
+ * `tabindex` og `hidden`, står i `data-preserve-attr` fra byggeren.
  *
  * ```html
  * <fs-tabs>
- *   <div class="fs-tabs__list">
- *     <button>Søknaden</button>
- *     <button>Vedlegg</button>
+ *   <div class="fs-tabs__list" role="tablist">
+ *     <button id="sak-tab-0" role="tab" aria-selected="true" aria-controls="sak-panel-0"
+ *             tabindex="0" data-preserve-attr="aria-selected tabindex">Søknaden</button>
  *   </div>
- *   <div class="fs-tabs__panel">…</div>
- *   <div class="fs-tabs__panel">…</div>
+ *   <div id="sak-panel-0" class="fs-tabs__panel" role="tabpanel"
+ *        aria-labelledby="sak-tab-0" tabindex="0" data-preserve-attr="hidden">…</div>
  * </fs-tabs>
  * ```
  */
-export declare class FsTabs extends LitElement {
-    static properties: {
-        selected: {
-            type: NumberConstructor;
-            reflect: boolean;
-        };
-        label: {
-            type: StringConstructor;
-        };
-    };
-    /** Indeksen på fanen som er valgt. */
-    selected: number;
-    /** Tekst som sier hva fanene velger mellom. Blir `aria-label` på raden. */
-    label?: string;
-    createRenderRoot(): this;
-    render(): import("lit").TemplateResult<1>;
-    firstUpdated(): void;
-    updated(): void;
-    private handleSlotChange;
+export declare class FsTabs extends HTMLElement {
+    /**
+     * Ingen attributter. Hvilken fane som er valgt står i markupen serveren
+     * sendte, som `aria-selected` på fanen og `hidden` på panelene, og leses
+     * derfra. Et eget `selected` ville vært en parallell utgave av det samme.
+     */
+    static observedAttributes: string[];
+    private readonly bound;
+    private observer?;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
     private get tabs();
     private get panels();
-    private sync;
+    /** Indeksen på fanen serveren har markert som valgt. */
+    get selected(): number;
+    private bind;
     private handleClick;
     private handleKeydown;
     /** Velger en fane og melder fra. */

package/dist/components/ramme/tabs/fs-tabs.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"fs-tabs.d.ts","sourceRoot":"","sources":["../../../../src/components/ramme/tabs/fs-tabs.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,UAAU,EAAE,MAAM,KAAK,CAAA;AAEtC,eAAO,MAAM,WAAW,EAAG,SAAkB,CAAA;AAE7C,eAAO,MAAM,eAAe,EAAG,eAAwB,CAAA;AACvD,eAAO,MAAM,gBAAgB,EAAG,gBAAyB,CAAA;AAMzD;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,qBAAa,MAAO,SAAQ,UAAU;IACpC,MAAM,CAAC,UAAU;;;;;;;;MAGhB;IAED,sCAAsC;IACtC,QAAQ,SAAI;IACZ,2EAA2E;IAC3E,KAAK,CAAC,EAAE,MAAM,CAAA;IAEd,gBAAgB;IAIhB,MAAM;IAIN,YAAY;IAIZ,OAAO;IAIP,OAAO,CAAC,gBAAgB,CAEvB;IAED,OAAO,KAAK,IAAI,GAGf;IAED,OAAO,KAAK,MAAM,GAEjB;IAED,OAAO,CAAC,IAAI;IA8CZ,OAAO,CAAC,WAAW,CAGlB;IAED,OAAO,CAAC,aAAa,CA2BpB;IAED,oCAAoC;IACpC,MAAM,CAAC,KAAK,EAAE,MAAM;CAcrB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,SAAS,EAAE,MAAM,CAAA;KAClB;CACF;AAED,wBAAgB,YAAY,CAAC,OAAO,YAAc,GAAG,IAAI,CAIxD"}
+{"version":3,"file":"fs-tabs.d.ts","sourceRoot":"","sources":["../../../../src/components/ramme/tabs/fs-tabs.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,WAAW,EAAG,SAAkB,CAAA;AAE7C;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,qBAAa,MAAO,SAAQ,WAAW;IACrC;;;;OAIG;IACH,MAAM,CAAC,kBAAkB,EAAE,MAAM,EAAE,CAAK;IAExC,OAAO,CAAC,QAAQ,CAAC,KAAK,CAA+B;IACrD,OAAO,CAAC,QAAQ,CAAC,CAAkB;IAEnC,iBAAiB,IAAI,IAAI;IAMzB,oBAAoB,IAAI,IAAI;IAU5B,OAAO,KAAK,IAAI,GAEf;IAED,OAAO,KAAK,MAAM,GAEjB;IAED,wDAAwD;IACxD,IAAI,QAAQ,IAAI,MAAM,CAKrB;IAED,OAAO,CAAC,IAAI;IASZ,OAAO,CAAC,WAAW,CAGlB;IAED,OAAO,CAAC,aAAa,CA2BpB;IAED,oCAAoC;IACpC,MAAM,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;CAsB5B;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,SAAS,EAAE,MAAM,CAAA;KAClB;CACF;AAED,wBAAgB,YAAY,CAAC,OAAO,YAAc,GAAG,IAAI,CAIxD"}