API-referens

active-locale="sv"

Språket guiden visas i, som en språkkod. Attributet går via egenskapen activeLocale, så både texterna och motorns svar byter språk; tas attributet bort faller visaren tillbaka på standardspråket. Läses också när grafen laddas, så första ritningen blir på rätt språk.

Värden: "sv" | "en"

answer-display="trail"

Visar besökarens tidigare svar ovanför steget. "trail" ger en lista med fråga och svar, där svaret visas som besökaren ser det (med enhet); "history" ger en enklare lista med frågan och det valda alternativets text. Utan attributet, eller med annat värde, visas ingen lista.

Värden: "trail" | "history"

example-files

Boolesk. När värden sätter attributet får en filfråga vars steg har ett exempelfoto en knapp bredvid filväljaren som hämtar exempelfotot och bifogar det. Utan attributet visas ingen sådan knapp, även om guiden har ett exempelfoto. Avsett för demo- och provsidor.

proving

Boolesk. Markerar en provkörning i editorn: filfält och kartfrågor får ersättningar (en provbild, en ritad karta) i stället för riktig filväljare, dolda villkorsfält visas inte, och händelsen guide-progress skickas inte. Sätts av editorn; en värd ska normalt inte sätta den på en publicerad sida.

activeLocale: string (write-only)

Sätter språket guiden visas i och meddelar motorn, så att även svar och mallar följer med; ritar om direkt. Samma sak som attributet active-locale, som går via den här egenskapen. Har ingen getter – att läsa den ger undefined.

clear(message?: string): void

Tar bort guiden ur visaren och visar ett tomt läge med meddelandet. Standardtexten är "Ingen guide har valts." (svenska, inte översatt). Sätt graph igen för att visa en guide.

getAnswers(): Answers

Besökarens svar hittills i körningen, som ett objekt med variabelnamn som nycklar. Bara svar på den väg besökaren faktiskt gått räknas. Tomt objekt om ingen guide är laddad. Filer finns inte här – använd getFiles().

getCurrentNodeId(): string | null

Id:t för steget besökaren står på, eller null om ingen guide är laddad. Spara det tillsammans med getAnswers() och lämna tillbaka båda via given för att låta besökaren fortsätta senare.

getFiles(): { fieldId: string; variableName: string; file: File }[]

De filer besökaren valt i guidens filfält, med fältets id och variabelnamn. Filerna skickas ingenstans av visaren; värden hämtar dem när det är dags att skicka in. Provbilder från en provkörning kommer aldrig med.

getFormData(): FormData

Alla svar och filer kodade som ett webbläsarformulär, klart att skicka med fetch som multipart. En filvariabel kommer med en gång, som filen; svar från en upprepad sida blir namn[index].fält; en fil utan variabelnamn läggs under file-<fältets id>.

getOutput(): EmailResultOutput | null

Om steget besökaren står på har ett utdata (i dag e-postresultatet) får värden mottagare, ämne och brödtext, både som mall och med svaren ifyllda, plus vilka variabler som saknades. Annars null.

getStepNumber(): number

Vilket steg i ordningen besökaren står på, enligt motorn. Ger 1 om ingen guide är laddad. Finns främst för editorns andra spegling av samma körning; visaren visar själv stegnumret.

getTraversedConnectionIds(): string[]

Id:n för de kopplingar i guiden som körningen passerat, i ordning. Tom lista om ingen guide är laddad. Används främst av editorn för att markera vägen på arbetsytan.

given: GivenAnswers | null   // { answers: Answers; nodeId?: string | null }

Svar värden redan känner till, till exempel namn från en inloggning eller en sparad körning. Värdena fyller fälten men låses inte – besökaren kan ändra dem och de valideras som vanligt. nodeId öppnar guiden på det steget vid laddning; kan sättas före eller efter graph och gäller även efter Börja om.

graph: GraphData | null

Guiden som ska visas, i standardformat. Äldre format lyfts till dagens vid inläsning; en guide från en nyare version vägras och visaren säger det i stället för att rita en halv sida. Att läsa egenskapen ger en kopia, eller null om ingen guide är laddad.

mirror(source: GuidePreview | null): void

Låter den här visaren rita samma körning som en annan visare – samma motor, inte en kopia – så att Nästa i den ena är Nästa i den andra. null kopplar loss den. Intern koppling för editorns arbetsyta; en värd behöver den sällan.

previous(): void

Går ett steg bakåt, samma som besökarens Tillbaka-knapp, och skickar preview-node-changed. Gör ingenting om det inte finns något steg bakåt.

refresh(): void

Ritar om visaren från motorn och släpper ett visat utkast. För en speglad visare vars motor flyttats av någon annan; intern koppling för editorn.

restart(): void

Börjar om guiden från första steget som ett nytt ärende. Värdens given-svar fylls i igen men steget i given används inte. Skickar preview-node-changed och guide-progress med "restart".

reviewDeclarationEnabled: boolean

Om granskningssteget ska visa redovisningen av vad beskedet byggde på under besökarens svar. Standard true; sätt false på sidor där det inte finns något beslut att redovisa, till exempel en intresseanmälan.

routeAnalysisEnabled: boolean

Om visaren visar vägarna: vart ett steg leder på kort som regler och tjänsteanrop, och vilka vägar som når ett resultat i kompakt läge. Standard true. Det är kort en besökare sällan stannar på; i praktiken sätter editorn den efter sina funktioner.

setTheme(theme: "light" | "dark" | null): void

Sätter visarens tema, samma som egenskapen theme. null låter operativsystemets inställning avgöra.

showDraft(values: Answers): void

Visar osparade värden i sidans fält – vad den andra speglade visaren håller på att skriva – utan att spara dem. Intern koppling för editorns spegling; en värd behöver den sällan.

showNode(nodeId: string): boolean

Hoppar direkt till ett steg och ritar det. Är id:t ett fält på en sida visas sidan med fältet markerat. Ger true om steget kunde visas. Används av editorn för att visa vald nod; skickar ingen händelse.

shownAnswers: Answers (write-only)

Fyller i svar för att rita ett redan besvarat steg, till exempel som bild på editorns arbetsyta. Avgör ingenting i körningen. Intern koppling för editorn; har ingen getter.

theme: "light" | "dark" | null

Ljust eller mörkt tema för visaren; null följer operativsystemet. Sätts som data-fw-theme på elementet, inte på dokumentet, så värdens sida runt omkring inte färgas om.

Värden: "light" | "dark" | null

unmatchedGiven(): string[]

De namn i given som ingen nod i guiden deklarerar som variabel. Värdena behålls ändå, men listan förklarar varför ett fält förblev tomt. Samma namn loggas också med console.info.

variableInspectorEnabled: boolean

Om visaren ska visa en utfällbar lista med variablernas aktuella värden under guiden. Standard true; en värd stänger normalt av den på en publicerad sida.

active-locale="<language code>"

Vilket av guidens språk redigeringen ska börja i. Gäller bara om guiden erbjuder språket; annars hamnar en översättare i första språket som inte är källspråket och alla andra i källspråket. Det är en vy och sparas aldrig i guiden; aktuellt språk läses med contentLocale.

Värden: "sv" | "en"

editor-locale="sv" | "en"

Språket i själva verktyget: palett, panel, menyer och meddelanden. Det är skilt från guidens innehållsspråk (active-locale). Editorn har texter på svenska och engelska.

Värden: "sv" | "en"

feature-level="basic" | "advanced" | "service"

Hur mycket av editorn redaktören får: vilka nodtyper och funktioner som erbjuds. Ignoreras när attributet modules är satt. Speglas av egenskapen featureLevel.

Värden: "basic" | "advanced" | "service"

get-started-href="<url>"

Adress till värdens egen kom-igång-sida. Med attributet visas posten Kom igång under Hjälp och leder dit; utan det finns posten inte alls.

mode="administrator" | "edit" | "translator" | "readonly"

Vad redaktören får ändra. Utan attributet, eller med okänt värde, är editorn låst i läsläge: värden måste uttryckligen ge rättigheter. Läget är en vy och inget skydd — behörigheter är värdens sak. Sätter egenskapen mode.

Värden: "administrator" | "edit" | "translator" | "readonly"

mode-notice="off"

Med "off" göms panelens ruta som förklarar varför fälten är låsta. För en värd som själv säger det, t.ex. i en egen rad ovanför editorn. Läget påverkas inte.

Värden: "off"

modules="<module ids, space- or comma-separated>"

Bygger editorns funktioner ur moduler i stället för en nivå: grunden (flerval, regler, variabler, import/export) är alltid på och varje modul lägger till mer. Ett tomt attribut ger bara grunden; utan attribut styr feature-level. Menyn visar bara moduler som har en registrerad nodtyp, så submission syns först när PRO är laddat.

Värden: "logic" | "content" | "fields" | "host-services" | "pages" | "submission"

palette-open (boolean)

Om hela nodpaletten är utfälld. Värden sätter det före första ritningen och hör palette-open-changed med { open } när redaktören ändrar det; biblioteket sparar ingenting. Speglas av egenskapen paletteOpen.

palette-search="off"

Med "off" har nodpaletten ingen sökruta (Sök nod). Värdens val när editorn sätts upp.

Värden: "off"

panel-open (boolean)

Om sidopanelen (Egenskaper/Förhandsgranskning) är utfälld över canvasen. Redaktörens egna öppningar och stängningar meddelas med panel-open-changed och { open }; värden avgör om det ska kommas ihåg och sätter det före första ritningen. Speglas av egenskapen panelOpen.

panel-width="<px>"

Sidopanelens bredd i pixlar. När redaktören drar i kanten kommer panel-width-changed med { width } (null efter återställning), och värden kan spara värdet och lämna tillbaka det här. Speglas av egenskapen panelWidth.

theme="light" | "dark"

Ljust eller mörkt tema för editorn. Sätts på elementet, inte på dokumentet, så värdens sida runt omkring påverkas inte. Sätter egenskapen theme.

Värden: "light" | "dark"

addCustomNodeType(spec: NodeTemplate): void

Lägger till en nodmall i biblioteket, eller ersätter den om nyckeln (spec.type) redan finns. Paletten uppdateras, en bekräftelse visas, och node-templates-changed skickas med hela listan så värden kan spara. Biblioteket delas av alla editorer på sidan.

readonly buildId: string

Vilket bygge av editorn som körs: commit, om det fanns ocommittade ändringar, och tid. Till för felsökning, t.ex. på en värds supportsida för att se vad en enhet faktiskt kör.

capabilities: EditorCapabilities  (setter takes Partial<EditorCapabilities>)

Läser de funktioner som faktiskt gäller (en kopia). Att sätta värdet lägger enskilda av- eller påslag ovanpå det som feature-level eller modules ger; varje ny tilldelning ersätter de tidigare påslagen.

readonly contentLocale: string

Det språk av guidens innehåll som redigeras just nu, t.ex. efter att redaktören bytt språk i verktygsraden. Startvärdet styrs av active-locale och läget.

featureLevel: "basic" | "advanced" | "service"

Samma sak som attributet feature-level: att sätta egenskapen skriver attributet. Läser den nivå som är satt, även när modules styr i stället.

Värden: "basic" | "advanced" | "service"

getData(): GraphData

Guiden som den ser ut nu, i standardformat och redo att sparas: noder och kopplingar från canvasen, guidens inställningar, de nodmallar guiden använder, och formatversionen stämplad. Det här är vad värden ska lagra.

graph: GraphData

Att sätta graph öppnar en guide: den migreras till aktuellt format, ångra-historiken och markeringen nollställs, och en guide i ett format som inte stöds avvisas med ett felmeddelande i editorn. Att läsa den ger samma som getData().

mode: "administrator" | "edit" | "translator" | "readonly"

Vad redaktören får ändra; samma värden som attributet mode, som sätter den här egenskapen. Egenskapen skriver inte tillbaka attributet, och den kontrollerar inte värdet — använd ett av de fyra.

Värden: "administrator" | "edit" | "translator" | "readonly"

modules: string[] | null

Samma sak som attributet modules: en lista skrivs som mellanslagsseparerat attribut, null tar bort attributet. Läser de giltiga modul-id:na efter tolkning (alias upplösta, okända bortfiltrerade), eller null.

Värden: null

nodeTemplates: NodeTemplate[]  (setter accepts unknown)

Värdens nodmallar. Att sätta listan ersätter alla icke inbyggda mallar; ogiltiga poster hoppas över och de inbyggda finns kvar. Att läsa ger redaktörens egna mallar utan de inbyggda. Biblioteket sparar ingenting — ändringar i editorn meddelas med node-templates-changed.

paletteOpen: boolean

Om hela nodpaletten är utfälld; att sätta den slår på eller av attributet palette-open.

panelOpen: boolean

Om sidopanelen är utfälld; att sätta den slår på eller av attributet panel-open. Det är en vy, ingen ändring i guiden och inget ångra-steg.

panelWidth: number | null

Sidopanelens begärda bredd i pixlar; att sätta den skriver attributet panel-width, null tar bort det och ger standardbredden. Läser det värde som begärts, inte den bredd som faktiskt ritas inom gränserna.

redo(): void

Gör om det senast ångrade steget, om det finns något. Samma som redaktörens Gör om.

refreshGraph(value: GraphData): void

Laddar en nyare version av samma guide utan att flytta vyn: den som tittar behåller sin panorering och zoom. Till för t.ex. ett läsfönster som följer en kollegas arbete. Som att sätta graph i övrigt, så ångra-historiken nollställs.

removeCustomNodeType(type: string): void

Tar bort en nodmall ur biblioteket (inbyggda mallar kan inte tas bort). Noder som skapats ur den fungerar som förut men bär bastypens namn. Skickar node-templates-changed.

replaceGraph(value: GraphData, reason: GraphChangedDetail["reason"]): void

Byter ut guiden som ett steg som går att ångra, till skillnad från att sätta graph. Guiden migreras först, och sedan skickas graph-changed med { graph, reason }. Används av editorn själv vid import och återställning.

Värden: "node-moved" | "node-nudged" | "node-created" | "node-removed" | "start-node-changed" | "node-updated" | "node-template-changed" | "guide-updated" | "graph-imported" | "form-skeleton-added" | "graph-reset" | "connection-created" | "connection-removed" | "connection-recolored"

revealNode(nodeId: string, fieldId?: string): void

Markerar noden och centrerar den i vyn. Med fieldId öppnas även sidopanelen på Egenskaper och fokus flyttas till det fältet. För en värd som listar problem, t.ex. vad som hindrar publicering, och vill leda redaktören dit.

setTheme(theme: ThemeChoice | null): void

Sätter editorns tema; samma som att tilldela egenskapen theme. Editorn har ingen egen temaknapp — värden bygger reglaget i sitt gränssnitt och anropar den här.

Värden: "light" | "dark" | null

showToast(options: ToastOptions): void  // { message: string; type: "success" | "error" | "info"; duration?: number }

Visar ett kort meddelande i editorns egen meddelanderuta, t.ex. att guiden sparats. Värden skriver texten själv; den översätts inte.

startTour(): void

Startar editorns stegvisa rundtur som pekar ut dess delar. Samma rundtur som redaktören kan starta själv.

theme: "light" | "dark" | null

Editorns tema, satt på elementet så att värdens sida inte påverkas. Attributet theme sätter egenskapen, men egenskapen skriver inte tillbaka attributet. Biblioteket sparar inte valet och editorn skickar ingen händelse när egenskapen sätts.

Värden: "light" | "dark" | null

undo(): void

Ångrar det senaste steget, om det finns något. Pågående skrivning räknas som ett steg först. Samma som redaktörens Ångra.

unsupportedNodeTypes(graph?: GraphData): string[]

Vilka nodtyper i en guide som editorns nuvarande funktioner inte erbjuder, som typnamn. Utan argument gäller det den öppna guiden; med argument kan värden fråga innan en import, t.ex. för att höja nivån först.

updateCustomNodeType(type: string, changes: { label: string; icon?: string }): void

Byter namn och ikon på en nodmall i biblioteket. Ändringen syns överallt där mallen används, och node-templates-changed skickas. Ikonen tas bort om den utelämnas.

editor-locale="sv"

Språket listans knappar, rubriker och datum skrivs på. Saknas attributet används källspråket.

order="saved" | "label" | "custom"

Hur raderna visas. saved och label sorterar en kopia och ändrar ingenting hos värden; custom visar listan exakt som värden lämnade den. Andra värden ignoreras.

theme="light" | "dark"

Ljust eller mörkt tema för just det här elementet, samma ord som på <guide-editor>. Färgar aldrig om sidan runt omkring, och biblioteket minns inte valet.

actions: VersionAction[] | null  // "open" | "restore" | "activate" | "save" | "discard" | "duplicate" | "rename" | "note" | "delete"

Vilka handlingar värdens lagring faktiskt kan utföra; bara de knapparna visas. null (standard) visar alla utom restore, som bara visas när den står uttryckligen i listan. Att öppna en rad genom att klicka på den styrs inte av actions.

readonly editorLocale: string | undefined

Läser attributet editor-locale. Det finns ingen setter; sätt språket med attributet.

order: "saved" | "label" | "custom"

Samma sak som attributet order, som egenskap. När redaktören drar en rad byter elementet självt till custom.

setTheme(theme: "light" | "dark" | null): void

Sätter temat; null lämnar tillbaka avgörandet till operativsystemet. Samma som att sätta egenskapen theme.

theme: "light" | "dark" | null

Temat som egenskap. Skrivs till data-fw-theme på elementet, inte på dokumentet.

versions: GuideVersion[]  // { id, number?, label?, note?, savedAt?, by?: { subject?, name?, me? }, reason?: "conflict", current?, open?, draft?, missing? }

Versionerna som ska visas, så som värden beskriver dem. Att sätta egenskapen ritar om listan; det är det enda sättet att ändra den. Listan numrerar ingenting själv: number är värdens.

ask(options: { title: string; label: string; message?: string; value?: string; placeholder?: string; confirmLabel: string; cancelLabel?: string }): Promise<string | null>

Öppnar en modal dialog med ett textfält och löser löftet med den inskrivna texten, trimmad. Avbryt, Escape eller ett tomt fält ger null. En ny fråga medan en är öppen avbryter den förra.

choose(options: { title: string; message?: string; choices: Array<{ id: string; label: string }>; cancelLabel?: string }): Promise<string | null>

Samma dialog men med en knapp per svarsalternativ i stället för ett fält. Löser med valt id, eller null om personen avbryter.

set editorLocale(value: string)

Verktygets språk. Påverkar bara standardtexten på Avbryt-knappen; alla andra texter skickar värden in i ask() och choose(). Endast setter, inget attribut.

CustomEvent<{ graph: GraphData; reason: "node-moved" | "node-nudged" | "node-created" | "node-removed" | "start-node-changed" | "node-updated" | "node-template-changed" | "guide-updated" | "graph-imported" | "form-skeleton-added" | "graph-reset" | "connection-created" | "connection-removed" | "connection-recolored" }>  // bubbles, composed

Guiden har ändrats; detail.graph är hela guiden i standardformat och reason säger varför. Kommer vid varje tangenttryckning i ett fält (reason node-updated), så en värd som sparar bör vänta en stund innan den skriver. Det är den här händelsen init() lyssnar på för onSave.

Skickas av: <guide-editor>

CustomEvent<null>  // no detail; bubbles, composed

Redaktören har valt att börja om och bekräftat det i editorns varningsdialog. Editorn ändrar ingenting själv: värden avgör vad en tom eller ursprunglig guide är och lämnar den med replaceGraph(graph, "graph-reset").

Skickas av: <guide-editor>

CustomEvent<{ kind: "start" | "next" | "back" | "result" | "restart" | "submitted" | "validation-stopped"; nodeId: string | null; nodeType: string | null; step: number }>  // bubbles, composed

Besökarens väg genom guiden, för statistik: start, framåt, bakåt, nått ett resultat, börjat om, stoppats av validering, och (i PRO) skickat in. Innehåller aldrig svar. Tyst i editorns förhandsvisning och provkörning (attributen editor-view och proving).

Skickas av: <guide-preview>

CustomEvent<{ templates: NodeTemplate[] }>  // bubbles, composed

Nodmallbiblioteket har ändrats, och detail.templates är hela listan. Biblioteket lagrar ingenting; värden avgör om listan ska sparas och lämnar tillbaka den via nodeTemplates nästa gång. init() kopplar den till onTemplatesChange.

Skickas av: <guide-editor>

CustomEvent<{ open: boolean }>  // bubbles, composed

Nodpaletten har öppnats eller fällts ihop. En vy, ingen ändring av guiden. Värden kan minnas läget och sätta paletteOpen innan editorn ritas nästa gång.

Skickas av: <guide-editor (raised by its inner <node-palette>, or by the editor itself when it folds the palette to make room)>

CustomEvent<{ open: boolean }>  // bubbles, composed

Sidopanelen har öppnats eller fällts ihop av redaktören eller av editorn. Biblioteket minns det inte; värden kan spara det och sätta panelOpen innan editorn ritas nästa gång.

Skickas av: <guide-editor>

CustomEvent<{ width: number | null }>  // bubbles, composed

Redaktören har dragit eller stegat sidopanelens kant färdigt; width är bredden i px som begärdes, null efter återställning. Värden kan spara den och lämna tillbaka den via panelWidth.

Skickas av: <guide-editor>

CustomEvent<{ values: Answers }>  // bubbles, composed

Det som just nu är inskrivet på en sida som inte skickats vidare än, vid varje tangenttryckning. Främst internt: editorn använder det för att visa samma halvifyllda sida i båda förhandsvisningarna. Skickas bara på steg av typen page.

Skickas av: <guide-preview>

CustomEvent<{ nodeId: string; answers: Answers }>  // bubbles, composed

Besökaren har gått till ett nytt steg, framåt eller bakåt; detail har stegets id och alla svar hittills. Guiden har ingen egen inlämning, så det är här värden ser att ett resultat har nåtts. Skickas också i editorns förhandsvisning.

Skickas av: <guide-preview>

CustomEvent<null>  // no detail; bubbles, composed, cancelable

Redaktören bad om att spara (Ctrl+S eller Arkiv → Spara). Värden som sparar anropar preventDefault() och läser guiden med getData(). Om ingen gör det visar editorn ett meddelande om att sidan själv sköter sparandet.

Skickas av: <guide-editor>

CustomEvent<{ theme: "light" | "dark" }>  // bubbles, composed

Säger att temat har bytts, så att värden kan minnas valet. Biblioteket sparar inget tema själv. Lyssna på document.

Skickas av: <none of the shipped elements; raised by whoever toggles the theme via announceThemeChange (in this repo: the example site's <theme-toggle>)>

CustomEvent<{ version: GuideVersion }>  // bubbles, composed

Redaktören vill att den här versionen ska vara den besökarna ser (knappen på raden, för rader som inte är aktuella, saknade eller utkast). Listan ändrar inget; värden gör versionen skarp och skickar sedan en ny versions-lista.

Skickas av: <guide-versions>

CustomEvent<{ version: GuideVersion }>  // bubbles, composed

Redaktören vill ta bort versionen. Listan bekräftar inte, eftersom bara värden vet om det går att ångra; fråga själv om det behövs. Knappen finns på alla rader men skickar inget på den aktuella versionen så länge den finns kvar.

Skickas av: <guide-versions>

CustomEvent<{ version: GuideVersion }>  // bubbles, composed

Redaktören vill kasta osparade ändringar. Visas bara på en rad med draft: true. Värden kastar utkastet och lämnar tillbaka versionens innehåll till editorn.

Skickas av: <guide-versions>

CustomEvent<{ version: GuideVersion }>  // bubbles, composed

Redaktören vill kopiera versionen. Är radens huvudknapp på den aktuella versionen, annars ett menyval. Värden gör kopian och skickar en ny lista.

Skickas av: <guide-versions>

CustomEvent<{ version: GuideVersion }>  // bubbles, composed

Redaktören vill skriva vad versionen är. Händelsen bär ingen text; värden frågar själv, till exempel med <prompt-dialog>.ask(), sparar anteckningen och skickar en ny lista.

Skickas av: <guide-versions>

CustomEvent<{ version: GuideVersion }>  // bubbles, composed

Redaktören vill se den här versionen: ett klick på raden eller namnet. Öppna flyttar och ändrar ingenting; värden läser in versionen i editorn. Styrs inte av actions och skickas inte för en saknad version.

Skickas av: <guide-versions>

CustomEvent<{ version: GuideVersion }>  // bubbles, composed

Redaktören vill byta namn på versionen. Händelsen bär inget nytt namn; värden frågar efter det själv, sparar det och skickar en ny lista.

Skickas av: <guide-versions>

CustomEvent<{ order: string[] }>  // version ids in the new order; bubbles, composed

Redaktören har dragit en rad (greppet, eller Alt+pil) till en egen ordning. Elementet byter självt till order custom; värden sparar ordningen om den vill och skickar listan i den ordningen.

Skickas av: <guide-versions>

CustomEvent<{ version: GuideVersion }>  // bubbles, composed

Redaktören vill fortsätta arbeta från en äldre version. Knappen visas bara om värden uttryckligen har "restore" i actions, och aldrig på den aktuella eller en saknad version. Värden lägger versionens innehåll i editorn som nytt arbete.

Skickas av: <guide-versions>

CustomEvent<{ version: GuideVersion }>  // bubbles, composed

Redaktören vill spara osparat arbete i den här versionen. Visas som radens huvudknapp bara på en rad med draft: true. Värden skriver editorns innehåll (getData()) till versionen och skickar en ny lista.

Skickas av: <guide-versions>

type AnswerFields = Record<string, string>

Delarna i ett svar som har delar, t.ex. etiketten besökaren såg och koden bakom den.

type AnswerValue = string | AnswerFields | string[] | AnswerRecord[]

Ett svar: ett värde, ett värde med delar, flera värden, eller flera poster med delar. Läs det med answerText, answerList eller answerField i stället för String().

Kontrakt: docs/INLAMNING-KONTRAKT.md

type Answers = Record<string, AnswerValue>

Alla svar i en guide, nycklade på variabelnamn.

answerText(value: AnswerValue | undefined): string

Gör ett svar till en rad text för en resultattext, ett brev eller en kvittens. Flera värden skiljs med ", ", ett svar med delar visas med sin etikett (label), och ett saknat svar ger "".

Kontrakt: docs/INLAMNING-KONTRAKT.md

answerList(value: AnswerValue | undefined): string[]

Gör ett svar till en lista med jämförbara strängar, för när värden ska testa om svaret innehåller något. Objekt läses på sin etikett (label), tomma poster tas bort, och en äldre radbruten sträng delas upp.

Kontrakt: docs/INLAMNING-KONTRAKT.md

answerField(value: AnswerValue | undefined, field: string): string[]

Plockar ut en del ur varje objekt i ett svar, t.ex. koden ("value") för varje valt land. Ger en tom lista för ett svar utan delar; objekt som saknar delen hoppas över.

Kontrakt: docs/INLAMNING-KONTRAKT.md

isAnswerEmpty(value: AnswerValue | undefined): boolean

Sant när svaret saknas, är en tom eller blank sträng, en tom lista, eller ett objekt utan etikett.

export type * from "../viewer/types/graph"  // GraphData, FlowNodeData, Connection, GuideSettings, GuideMeta, …

Typerna för guidens standardformat: GraphData (startnod, noder, kopplingar, inställningar, meta) och allt den består av. Det är formen värden lagrar och sätter som graph på elementet.

Kontrakt: docs/JSON-KONTRAKT.md

interface SubmissionSchemaProperty { type: "string" | "number" | "boolean" | "object" | "array"; label?; format?; pattern?; enum?; options?; kind?; properties?; items?; minItems?; maxItems?; optional? }

Ett fält i inlämningsschemat: JSON Schema-ord där sådana finns, plus egna (label, options, kind, optional).

Kontrakt: docs/INLAMNING-KONTRAKT.md

interface SubmissionSchema { $guide?: LocalizedTextMap; $serviceId?: string; exportedAt?: string; properties: Record<string, SubmissionSchemaProperty> }

Formen på det en guide skickar in, som editorn stämplar i meta.submissionSchema vid export, så att en mottagare kan bygga mot den innan första ärendet kommit.

Kontrakt: docs/INLAMNING-KONTRAKT.md

class GuidePreview extends HTMLElement  // <guide-preview>

Klassen bakom <guide-preview>, elementet som kör en färdig guide för besökaren. Elementet registreras när visarpaketet laddas; exporten behövs för typning eller instanceof.

Kontrakt: docs/VARDSYSTEM-KONTRAKT.md

interface LanguagePack { viewer?: Record<string, string>; editor?: Record<string, string> }

Texterna för ett språk till init, uppdelade på det besökaren läser (viewer) och det redaktören läser (editor).

interface LanguageSetup { offer?: readonly string[]; source?: string; content?: string; tool?: string }

Språkdelen av init: vilka språk en guide får erbjudas, vilket en ny guide skrivs på, vilket innehållsspråk som visas, och verktygets eget språk.

interface HostSetup { graph?; mode?; languages?; packs?; templates?; versions?; theme?; onSave?; onTemplatesChange? }

Allt värden ger init: guiden, behörighetsläget, språken, språkpaket, nodmallar, versioner, tema och återanropen för att spara.

Kontrakt: docs/VARDSYSTEM-KONTRAKT.md

interface Wiring { coverage: Record<string, LocaleCoverage>; disconnect: () => void }

Det init returnerar: täckningen för varje registrerat språkpaket och en funktion som slutar lyssna.

init(element: HTMLElement, setup?: HostSetup): Wiring

Kopplar in ett element i värden med ett anrop: registrerar språkpaket först, deklarerar språken, sätter mode, editor-locale, active-locale, tema, versioner och mallar, lyssnar efter ändringar till onSave/onTemplatesChange och sätter guiden sist. Returnerar paketens täckning och disconnect(). Gjord för <guide-editor>; på <guide-preview> gäller språk, tema och guide, medan onSave aldrig anropas eftersom visaren inte skickar graph-changed.

Kontrakt: docs/VARDSYSTEM-KONTRAKT.md

type SetupSeverity = "error" | "warning"

Hur allvarligt ett fynd från checkSetup är.

interface SetupFinding { id: string; severity: SetupSeverity; what: string; consequence: string }

Ett fynd från checkSetup: ett stabilt id att filtrera på, allvar, vad som observerats och vad det leder till (på engelska).

interface SetupReport { ok: boolean; findings: SetupFinding[] }

Svaret från checkSetup; ok är sant bara när inget hittades.

interface CheckableElement extends HTMLElement { graph?: GraphData }

Elementet checkSetup granskar: <guide-preview> eller <guide-editor>.

checkSetup(element: CheckableElement): SetupReport

Granskar ett monterat elements uppsättning och rapporterar på engelska: tokens som inte löser ut, <guide-editor> utan mode, och språk guiden erbjuder som saknar visartexter eller står utanför declareLocales. Säger inget om lagring eller lyssnare, så ok: true betyder bara att inget av detta hittades. Anropa efter montering, när guiden är satt.

Kontrakt: docs/VARDSYSTEM-KONTRAKT.md

type LocaleStrings = Readonly<Record<string, string>>

Ett språkpaket: textnycklar mot texter.

registerLocale(locale: string, strings: LocaleStrings): LocaleCoverage

Registrerar visarens texter för ett språk, t.ex. arabiska knappar eller en egen svensk formulering. Ett nytt anrop för samma språk ersätter paketet. Returnerar hur mycket paketet täcker. Anropa vid start, innan elementen ritas.

Kontrakt: docs/VARDSYSTEM-KONTRAKT.md

unregisterLocale(locale: string): void

Tar bort ett registrerat språkpaket.

localeStrings(locale: string): Record<string, string>

Ger alla texter för ett språk som en platt mall att översätta från: paketets egna, med värdens registrerade texter före.

builtInLocales(): string[]

Språkkoderna paketet har egna texter för, sorterade.

availableLocales(): string[]

Språkkoderna visaren kan visas på: paketets egna plus de värden registrerat, sorterade.

interface AudienceCoverage { filled: number; total: number; missing: string[] }

Hur många nycklar ett språk täcker för en målgrupp, och vilka som saknas.

interface LocaleCoverage { locale: string; viewer: AudienceCoverage; editor: AudienceCoverage }

Ett språks täckning, separat för visarens och editorns texter.

coverageOf(locale: string): LocaleCoverage

Rapporterar hur mycket av visarens och editorns texter ett språk täcker, räknat på registrerade och inbyggda texter. Med bara visaren laddad blir editorsidan 0 av 0.

interface LocaleDeclaration { default?: string }

Alternativet till declareLocales: vilket språk som är standard.

declareLocales(locales: readonly string[], options?: LocaleDeclaration): void

Deklarerar vilka språk en guide får erbjudas på och vilket som är standard (annars det första). Ett nytt anrop ersätter deklarationen. Inget skrivs i guiden.

Kontrakt: docs/VARDSYSTEM-KONTRAKT.md

clearDeclaredLocales(): void

Tar bort språkdeklarationen, så att declaredLocales åter ger null.

declaredLocales(): readonly string[] | null

De deklarerade språken, eller null när värden inte deklarerat några.

declaredDefaultLocale(): string | null

Det deklarerade standardspråket, eller null.

interface CodeListItem { value: string; label: LocalizedTextMap; synonyms?: LocalizedTextMap[]; sourceLabel?: string; exclusive?: boolean }

En post i en kodlista: koden som lagras, etiketten per språk, synonymer att söka på, och om posten utesluter alla andra.

type CodeStandard = "iso-3166-1-alpha-2" | "iso-3166-1-alpha-3" | "iso-3166-1-numeric" | "custom"

Vilken standard en kodlistas koder följer.

interface CodeList { id; standard: CodeStandard; label; version; published; source; sourceUrl?; labelSources?; items: CodeListItem[] }

En kodlista som värden registrerar, med standard, källa och version.

registerCodeList(list: CodeList): void

Gör en kodlista (t.ex. länder eller kommuner) tillgänglig för fält och regler. Listorna skeppas som standardformat bredvid bundlarna och ingen är inbyggd. Samma id en gång till ersätter den tidigare listan; en felaktig lista avvisas med ett TypeError som säger vad som är fel.

Kontrakt: docs/VARDSYSTEM-KONTRAKT.md

codeListFault(list: unknown): string | null

Kontrollerar en kodlista utan att registrera den: returnerar en beskrivning av felet (på svenska), eller null när listan duger.

unregisterCodeList(id: string): void

Tar bort en registrerad kodlista.

getCodeList(id: string): CodeList | null

Hämtar en registrerad kodlista, eller null.

getCodeLists(): CodeList[]

Alla registrerade kodlistor.

type MapKind = "point" | "points" | "area"

Vilken sorts geometri en kartfråga ber om; points och area är enligt koden reserverade för v2.

Kontrakt: docs/KART-KONTRAKT.md

interface MapPickResult { geometry: { type: string; coordinates: unknown }; label: string; zoom?: number }

Svaret från värdens karta: GeoJSON i WGS84 ([longitud, latitud]), en läsbar etikett och eventuellt zoomnivån.

Kontrakt: docs/KART-KONTRAKT.md

interface MapProvider { kinds: readonly MapKind[]; pick(options): Promise<MapPickResult | null>; snapshot?(geometry, options?): Promise<string> }

Värdens karta: vilka sorter den klarar, pick som låter besökaren peka ut geometri (null vid avbrott), och en frivillig stillbild.

Kontrakt: docs/KART-KONTRAKT.md

registerMapProvider(next: MapProvider): void

Registrerar värdens kartleverantör, som kartfrågor sedan anropar; FlowWeaver ritar ingen karta själv. Det finns en leverantör åt gången och ett nytt anrop ersätter den.

Kontrakt: docs/KART-KONTRAKT.md

unregisterMapProvider(): void

Tar bort den registrerade kartleverantören.

Kontrakt: docs/KART-KONTRAKT.md

registerLookupOrigins(origins: readonly string[]): void

Anger vilka ursprung (t.ex. https://api.example.se) ett uppslagsfält får skicka besökarens text till, utöver sidans eget. Utan lista går uppslag bara till sidans eget ursprung; en adress utanför listan anropas aldrig och fältet säger att uppslaget inte kunde nås. Ett nytt anrop ersätter listan, och en post som inte är ett rent ursprung avvisas med ett fel.

Kontrakt: docs/UPPSLAG-KONTRAKT.md

unregisterLookupOrigins(): void

Tar bort listan, så att uppslag åter bara går till sidans eget ursprung.

Kontrakt: docs/UPPSLAG-KONTRAKT.md

interface Palette { id: string; label: string; light: Record<string, string>; dark: Record<string, string> }

En färdig färgskala: tokenvärden för ljust och mörkt läge.

const palettes: { hav: Palette; skog: Palette; skiffer: Palette; tegel: Palette }

De fyra inbyggda färgskalorna (hav, skog, skiffer, tegel), att ge till applyPalette.

applyPalette(palette: Palette | null): void

Färgar om FlowWeavers element i ett steg genom att lägga en <style> i <head> med skalans hela primärfamilj och nodfärger, för ljust och mörkt läge. null tar bort den och ger tillbaka standardfärgen. Den sätter också --fw-*-tokens på :root.

class GuideEditor extends HTMLElement  // <guide-editor>
  attributes: feature-level, modules, mode, mode-notice, editor-locale, active-locale, theme, get-started-href, panel-width, panel-open, palette-open, palette-search
  graph: GraphData; getData(): GraphData; replaceGraph(value, reason); undo(); redo(); setTheme(theme: ThemeChoice | null)
  events: graph-changed, save-request, locale-change, panel-width-changed, panel-open-changed, palette-open-changed

Elementet <guide-editor>, som registreras när editorpaketet laddas. Värden sätter graph, läser tillbaka guiden med getData() (stämplad med formatversion) och lyssnar på graph-changed och save-request för att själv spara — editorn lagrar ingenting.

interface GuideVersion {
  id: string; number?: number; label?: string; note?: string; savedAt?: number;
  by?: { subject?: string; name?: string; me?: boolean };
  reason?: "conflict"; current?: boolean; open?: boolean; draft?: boolean; missing?: boolean;
}

En rad i <guide-versions>, som värden beskriver den ur sin egen lagring. number, by och reason är värdens att sätta och räknas aldrig fram i listan; current är versionen besökarna ser, open den redaktören arbetar i.

Kontrakt: docs/LAGRING-KONTRAKT.md

class GuideVersions extends HTMLElement  // <guide-versions>
  attributes: editor-locale, order, theme
  versions: GuideVersion[]; order: VersionOrder; actions: VersionAction[] | null; theme: ThemeChoice | null
  events: version-{open|restore|activate|save|discard|duplicate|rename|note|delete}-intent { detail: { version } },
          version-reorder-intent { detail: { order: string[] } }

Elementet <guide-versions>: listan över en guides versioner. Den beslutar ingenting — den ritar raderna och skickar version-*-intent-händelser; läsa, skriva, namnge och ta bort gör värden. Med actions säger värden vilka åtgärder dess lagring klarar, så att menyn bara visar dem.

Kontrakt: docs/LAGRING-KONTRAKT.md

interface LinkPickContext {
  locale: string;        // language of the text being edited
  selectedText: string;  // "" when nothing was selected
}

Det värdens länkväljare får när redaktören trycker på länkknappen: språket på texten som redigeras och den markerade texten.

interface LinkPickResult {
  url: string;     // the address the viewer renders; relative is fine
  label?: string;  // link text when nothing was selected
  ref?: string;    // the host's own reference for the page
}

Svaret från värdens länkväljare. Med ref skrivs länken [text](adress "ref"); visaren visar bara adressen, och editorn kan senare fråga resolve om sidan flyttats.

interface LinkPicker {
  pick(context: LinkPickContext): Promise<LinkPickResult | null>;
  resolve?(ref: string): Promise<{ url: string } | null>;
}

Värdens länkväljare. pick öppnar värdens egen dialog och svarar null när redaktören avbryter. Valfria resolve tillfrågas om varje referens när en guide öppnas i editorn: en ändrad adress skrivs om, null (sidan finns inte) blir en hälsovarning, och ett kastat fel räknas som inget svar.

class PromptDialog extends HTMLElement  // <prompt-dialog>
  editorLocale: string (setter)
  ask(options: PromptOptions): Promise<string | null>
  choose(options: { title: string; message?: string; choices: Array<{ id: string; label: string }>; cancelLabel?: string }): Promise<string | null>

Elementet <prompt-dialog>, en modal dialog som frågar efter ett ord — till exempel vad en kopia ska heta när <guide-versions> skickar version-rename-intent. ask ger texten, eller null vid avbryt eller tomt svar; choose erbjuder fasta val i stället för ett fält.

interface PromptOptions {
  title: string; label: string; message?: string; value?: string;
  placeholder?: string; confirmLabel: string; cancelLabel?: string;
}

Det värden ger PromptDialog.ask: rubrik, etikett över fältet, ett valfritt förklarande meddelande, startvärde och knapptexter. Utan cancelLabel används editorns egen text för Avbryt.

type ThemeChoice = "light" | "dark";

Ljust eller mörkt tema för theme på <guide-editor> och <guide-versions>; null betyder att operativsystemets inställning gäller. Temat sätts på elementet, inte på värdens sida, och biblioteket sparar inte valet — att minnas det är värdens sak.

type VersionOrder = "saved" | "label" | "custom";

Hur <guide-versions> ordnar raderna: efter datum, efter namn, eller i den ordning värden lämnade dem (custom). Datum och namn är bara en vy; när redaktören drar en rad växlar listan till custom och ber värden om den nya ordningen med version-reorder-intent.

function registerLinkPicker(value: LinkPicker): void

Registrerar värdens länkväljare, så att editorns länkknapp öppnar värdens dialog i stället för att skriva [text](https://). En ny registrering ersätter den förra och glömmer tidigare resolve-svar.

function unregisterLinkPicker(): void

Tar bort värdens länkväljare; länkknappen skriver då [text](https://) som utan väljare.

function registerSubmissionReceiver(value: SubmissionReceiver): void

Registrerar värdens mottagare av inlämningar. Guiden lämnar svaren till submit och visar referensen som kommer tillbaka; utan registrerad mottagare misslyckas inskickningen och besökaren får ett felbesked. En ny registrering ersätter den förra och nollställer den lästa garantin (retryWindowHours).

function unregisterSubmissionReceiver(): void

Tar bort värdens mottagare och den lästa garantin. Därefter misslyckas en inskickning, och mottagarlistan är tom.

function listSubmissionRecipients(): Promise<SubmissionRecipient[]>

Frågar den registrerade mottagaren efter katalogen och svarar med raderna tvättade till exakt {id, label} — extra fält som värden skickat med städas bort. Tom lista utan mottagare. Läser också retryWindowHours om katalogen svarade i den formen.

const VISITOR_RECIPIENT_ID = "@visitor";

Mottagarväljarens enda adressundantag: besökarens egen adress ur ett svar, besökarens data till besökaren. @ kan inte inleda ett rimligt katalog-id, så värdet krockar inte med värdens id:n.

interface SubmissionCatalog {
  recipients: readonly SubmissionRecipient[];
  retryWindowHours?: number;
}

Katalogsvarets andra form: raderna plus värdens uttalade garanti om hur många timmar ett submissionId känns igen. Det är mottagarens GET /recipients-svar, så värden kan skicka det vidare som det är. Bara ett ändligt tal över noll räknas som garanti; utelämnad betyder ingen garanti.

interface SubmissionPayload {
  recipientId: string; recipientIds: string[]; copyRecipientIds: string[];
  submissionId?: string; serviceId?: string; serviceVersion?: string; caseType?: string;
  locale: string; answers: Answers; records: SubmissionRecord[];
  row: SubmissionRowCell[]; emailCopy: boolean; visitorEmail?: string;
  protection: { honeypot: string; elapsedMs: number };
}

Det guiden lämnar till submit: mottagar-id:n ur värdens katalog (aldrig adresser — dem löser värden), svaren per variabelnamn, en läsbar sammanfattning, submissionId som är detsamma vid varje återförsök, och robotskyddets råvaror som mottagaren dömer över. recipientId är den första mottagaren, kvar för äldre mottagare; läs hellre recipientIds.

interface SubmissionReceipt {
  reference: string;
}

Det submit svarar med: ärendets referens, som värden äger och numrerar. Guiden visar den för besökaren; ett kastat fel ger ett ärligt felbesked och aldrig ett påhittat nummer.

interface SubmissionReceiver {
  recipients(): readonly SubmissionRecipient[] | SubmissionCatalog
    | Promise<readonly SubmissionRecipient[] | SubmissionCatalog>;
  submit(payload: SubmissionPayload): Promise<SubmissionReceipt>;
}

Det värden registrerar. recipients ger katalogens synliga del till editorns mottagarväljare, synkront eller asynkront; submit gör svaren till ett ärende och avvisar genom att kasta ett fel. Själva adresserna stannar i värdens backend.

interface SubmissionRecipient {
  id: string;
  label: string;
}

En rad i editorns mottagarväljare, och aldrig mer än så. Guiden lagrar bara id:t; adressen finns inte i typen och når därför aldrig klienten.

interface SubmissionRecord {
  question: string;
  answer: AnswerValue;
  variable: string | null;
}

En rad i inlämningens läsbara sammanfattning (records): frågans rubrik som besökaren läste den, svaret och variabelnamnet — samma rader som granskningssteget visar.

function submissionSchema(graph: GraphData): SubmissionSchema

Räknar fram inlämningsschemat ur en guide: nycklarna är redaktörens variabelnamn, typen följer fälttypen och rubriken är frågan per språk. För en värd som redan har grafen och vill bygga eller validera sin mottagare mot det; samma schema stämplas i meta.submissionSchema vid export.

flowweaver-pro-viewer  ← src/entries/pro-viewer.ts  (global FlowWeaverProViewer)
flowweaver-pro-editor  ← src/entries/pro-editor.ts  (global FlowWeaverProEditor)
// each: export * from the open entry, plus the submission exports above

FlowWeaver PRO byggs som två egna bundlar som exporterar allt de öppna gör plus inlämningsexporterna här. PRO-visaren skickar: inlämnings- och e-postresultatnoderna lämnar svaren till värdens mottagare. Den öppna visaren ritar ett sändande steg som ett vanligt resultat och skickar ingenting; PRO-editorn lägger till de sändande nodtyperna, mottagarväljaren, hälsoreglerna och schemat som stämplas vid export. Filformatet är detsamma, så en guide fungerar i båda.

Kontrakt: docs/INLAMNING-KONTRAKT.md (följer med FlowWeaver PRO)