@evotecit/canopyx 0.3.2 → 0.3.4

package/JavaScript/locales/it.mjs

@@ -516,6 +516,111 @@ const labels = Object.freeze({
   calendarOutsideRange: "Al di fuori delle date di questo calendario",
   calendarClose: "Chiudi",
   calendarDetailsOf: "Dettagli di {title}",
+  flowSteps: "Passaggi",
+  flowStepOf: "Passaggio {current} di {count}",
+  flowStepAnnounce: "Passaggio {current} di {count}, {title}",
+  flowNext: "Avanti",
+  flowBack: "Indietro",
+  flowSubmit: "Invia",
+  flowSubmitting: "Invio in corso…",
+  flowReviewTitle: "Controlla le risposte",
+  flowChange: "Modifica",
+  flowChangeField: "Modifica {field}",
+  flowNotProvided: "Non indicato",
+  flowOptional: "(facoltativo)",
+  flowStepOptional: "Facoltativo",
+  flowStepComplete: "Completato",
+  flowStepCurrent: "Passaggio corrente",
+  flowStepErrors: "Errori: {count}",
+  flowStepLocked: "Completa prima i passaggi precedenti",
+  flowStepNotStarted: "Non iniziato",
+  flowErrorSummary: "Correggi questi punti prima di continuare",
+  flowReady: "Pronto per l'invio",
+  flowNotReady: "Errori da correggere: {count}",
+  flowWarnings: "Avvisi: {count}",
+  flowChangesOnly: "Mostra solo le modifiche",
+  flowNoChanges: "Nessuna risposta è cambiata.",
+  flowWas: "Prima: {value}",
+  flowChangedCount: "Risposte modificate: {count}",
+  flowSecretSet: "Impostato",
+  flowSecretKept: "Invariato",
+  flowSecretNotSet: "Non impostato",
+  flowSecretHint: "È salvato un valore. Lascia vuoto per mantenerlo.",
+  flowSecretShow: "Mostra",
+  flowSecretHide: "Nascondi",
+  flowSecretReveal: "Mostra {field}",
+  flowOn: "Attivo",
+  flowOff: "Disattivo",
+  flowAdd: "Aggiungi",
+  flowAddItem: "Aggiungi a {field}",
+  flowRemoveItem: "Rimuovi {item}",
+  flowItemLabel: "{field}, elemento {index}",
+  flowSelectAll: "Seleziona tutto",
+  flowSelectNone: "Cancella",
+  flowSelectedCount: "{count} di {total} selezionati",
+  flowUnit: "Unità",
+  flowUnitSeconds: "secondi",
+  flowUnitMinutes: "minuti",
+  flowUnitHours: "ore",
+  flowUnitDays: "giorni",
+  flowSeconds: "[one]{count} secondo[other]{count} secondi",
+  flowMinutes: "[one]{count} minuto[other]{count} minuti",
+  flowHours: "[one]{count} ora[other]{count} ore",
+  flowDays: "[one]{count} giorno[other]{count} giorni",
+  flowDurationInvalid: "{field} deve essere un numero intero.",
+  flowItemsMin: "{field} richiede almeno {min}.",
+  flowItemsMax: "{field} ne consente al massimo {max}.",
+  flowItemEmail: "«{item}» non è un indirizzo email.",
+  flowItemHost: "«{item}» non è un nome host.",
+  flowItemIp: "«{item}» non è un indirizzo IP.",
+  flowItemCidr: "«{item}» non è un intervallo di rete.",
+  flowItemUrl: "«{item}» non è un indirizzo web.",
+  flowItemPattern: "«{item}» non ha il formato previsto.",
+  flowSaved: "Salvato",
+  flowAccepted: "In corso",
+  flowProgress: "{done} di {total}",
+  flowConflict: "Queste impostazioni sono cambiate durante la modifica.",
+  flowReload: "Ricarica le impostazioni correnti",
+  flowNotSubmitted: "Le risposte non sono state inviate.",
+  flowNoHost: "Nessun host ha ricevuto le risposte.",
+  flowStartAgain: "Ricomincia",
+  flowCopy: "Copia",
+  flowCopied: "Copiato",
+  flowSavedIt: "L'ho salvato",
+  flowShownOnce: "Mostrato una sola volta. Copialo ora.",
+  matrixRows: "Righe",
+  matrixColumns: "Colonne",
+  matrixSearch: "Cerca righe e colonne",
+  matrixSortBy: "Ordina per",
+  matrixGroupBy: "Raggruppa per",
+  matrixByLabel: "Nome",
+  matrixByTotal: "Totale",
+  matrixAsListed: "Come elencato",
+  matrixNoGrouping: "Nessun gruppo",
+  matrixDescending: "Decrescente",
+  matrixOnlyProblems: "Solo problemi",
+  matrixHideEmpty: "Nascondi righe e colonne vuote",
+  matrixSize: "{rows} × {columns}",
+  matrixShown: "Righe: {rows} di {totalRows}, colonne: {columns} di {totalColumns}",
+  matrixAttention: "Richiedono attenzione: {count}",
+  matrixLegend: "Stati",
+  matrixFilter: "Filtra",
+  matrixClearFilters: "Cancella filtri",
+  matrixNoMatches: "Nessuna riga o colonna corrisponde.",
+  matrixSelf: "Stesso elemento",
+  matrixNoData: "Nessun dato",
+  matrixCell: "{row} e {column}: {state}",
+  matrixTotal: "Totale",
+  matrixItemTotal: "{item}: {count}",
+  matrixExpandGroup: "Espandi {group}",
+  matrixCollapseGroup: "Comprimi {group}",
+  matrixGroupCount: "Elementi: {count}",
+  matrixDetails: "Dettagli",
+  matrixClose: "Chiudi",
+  matrixValue: "Valore",
+  matrixState: "Stato",
+  matrixAllClear: "Niente richiede attenzione",
+  matrixShowMore: "Mostra altro",
 });
 const staticLabels = Object.freeze({
   overflowNote: "Righe mostrate: {shown} su {total}.",

package/JavaScript/locales/pl.mjs

@@ -516,6 +516,111 @@ const labels = Object.freeze({
   calendarOutsideRange: "Poza datami, które pokazuje ten kalendarz",
   calendarClose: "Zamknij",
   calendarDetailsOf: "Szczegóły: {title}",
+  flowSteps: "Kroki",
+  flowStepOf: "Krok {current} z {count}",
+  flowStepAnnounce: "Krok {current} z {count}: {title}",
+  flowNext: "Dalej",
+  flowBack: "Wstecz",
+  flowSubmit: "Wyślij",
+  flowSubmitting: "Wysyłanie…",
+  flowReviewTitle: "Sprawdź odpowiedzi",
+  flowChange: "Zmień",
+  flowChangeField: "Zmień: {field}",
+  flowNotProvided: "Nie podano",
+  flowOptional: "(opcjonalnie)",
+  flowStepOptional: "Opcjonalny",
+  flowStepComplete: "Ukończono",
+  flowStepCurrent: "Bieżący krok",
+  flowStepErrors: "Błędy: {count}",
+  flowStepLocked: "Najpierw ukończ wcześniejsze kroki",
+  flowStepNotStarted: "Nierozpoczęty",
+  flowErrorSummary: "Popraw te pola, zanim przejdziesz dalej",
+  flowReady: "Gotowe do wysłania",
+  flowNotReady: "Błędy do poprawienia: {count}",
+  flowWarnings: "Ostrzeżenia: {count}",
+  flowChangesOnly: "Pokaż tylko zmiany",
+  flowNoChanges: "Żadna odpowiedź się nie zmieniła.",
+  flowWas: "Było: {value}",
+  flowChangedCount: "Zmienione odpowiedzi: {count}",
+  flowSecretSet: "Ustawiono",
+  flowSecretKept: "Bez zmian",
+  flowSecretNotSet: "Nie ustawiono",
+  flowSecretHint: "Wartość jest zapisana. Zostaw puste, aby ją zachować.",
+  flowSecretShow: "Pokaż",
+  flowSecretHide: "Ukryj",
+  flowSecretReveal: "Pokaż: {field}",
+  flowOn: "Włączone",
+  flowOff: "Wyłączone",
+  flowAdd: "Dodaj",
+  flowAddItem: "Dodaj do: {field}",
+  flowRemoveItem: "Usuń: {item}",
+  flowItemLabel: "{field}, pozycja {index}",
+  flowSelectAll: "Zaznacz wszystko",
+  flowSelectNone: "Wyczyść",
+  flowSelectedCount: "Zaznaczono {count} z {total}",
+  flowUnit: "Jednostka",
+  flowUnitSeconds: "sekundy",
+  flowUnitMinutes: "minuty",
+  flowUnitHours: "godziny",
+  flowUnitDays: "dni",
+  flowSeconds: "[one]{count} sekunda[few]{count} sekundy[many]{count} sekund[other]{count} sekundy",
+  flowMinutes: "[one]{count} minuta[few]{count} minuty[many]{count} minut[other]{count} minuty",
+  flowHours: "[one]{count} godzina[few]{count} godziny[many]{count} godzin[other]{count} godziny",
+  flowDays: "[one]{count} dzień[few]{count} dni[many]{count} dni[other]{count} dnia",
+  flowDurationInvalid: "{field}: wpisz liczbę całkowitą.",
+  flowItemsMin: "{field}: wymagane co najmniej {min}.",
+  flowItemsMax: "{field}: dozwolone najwyżej {max}.",
+  flowItemEmail: "„{item}” nie jest adresem e-mail.",
+  flowItemHost: "„{item}” nie jest nazwą hosta.",
+  flowItemIp: "„{item}” nie jest adresem IP.",
+  flowItemCidr: "„{item}” nie jest zakresem sieci.",
+  flowItemUrl: "„{item}” nie jest adresem internetowym.",
+  flowItemPattern: "„{item}” ma nieoczekiwany format.",
+  flowSaved: "Zapisano",
+  flowAccepted: "W toku",
+  flowProgress: "{done} z {total}",
+  flowConflict: "Te ustawienia zmieniły się podczas edycji.",
+  flowReload: "Wczytaj bieżące ustawienia",
+  flowNotSubmitted: "Odpowiedzi nie zostały wysłane.",
+  flowNoHost: "Żaden host nie odebrał odpowiedzi.",
+  flowStartAgain: "Zacznij od nowa",
+  flowCopy: "Kopiuj",
+  flowCopied: "Skopiowano",
+  flowSavedIt: "Mam to zapisane",
+  flowShownOnce: "Widoczne tylko raz. Skopiuj teraz.",
+  matrixRows: "Wiersze",
+  matrixColumns: "Kolumny",
+  matrixSearch: "Szukaj wierszy i kolumn",
+  matrixSortBy: "Sortuj według",
+  matrixGroupBy: "Grupuj według",
+  matrixByLabel: "Nazwa",
+  matrixByTotal: "Razem",
+  matrixAsListed: "Jak na liście",
+  matrixNoGrouping: "Bez grup",
+  matrixDescending: "Malejąco",
+  matrixOnlyProblems: "Tylko problemy",
+  matrixHideEmpty: "Ukryj puste wiersze i kolumny",
+  matrixSize: "{rows} × {columns}",
+  matrixShown: "Wiersze: {rows} z {totalRows}, kolumny: {columns} z {totalColumns}",
+  matrixAttention: "Wymaga uwagi: {count}",
+  matrixLegend: "Stany",
+  matrixFilter: "Filtruj",
+  matrixClearFilters: "Wyczyść filtry",
+  matrixNoMatches: "Brak pasujących wierszy lub kolumn.",
+  matrixSelf: "Ten sam element",
+  matrixNoData: "Brak danych",
+  matrixCell: "{row} i {column}: {state}",
+  matrixTotal: "Razem",
+  matrixItemTotal: "{item}: {count}",
+  matrixExpandGroup: "Rozwiń {group}",
+  matrixCollapseGroup: "Zwiń {group}",
+  matrixGroupCount: "Elementy: {count}",
+  matrixDetails: "Szczegóły",
+  matrixClose: "Zamknij",
+  matrixValue: "Wartość",
+  matrixState: "Stan",
+  matrixAllClear: "Nic nie wymaga uwagi",
+  matrixShowMore: "Pokaż więcej",
 });
 const staticLabels = Object.freeze({
   overflowNote: "Pokazano {shown} z {total} wierszy.",

package/JavaScript/matrix.d.ts

@@ -0,0 +1,160 @@
+// Type declarations for the matrix view (docs/matrix.md): the matrix document, its state and the API of createMatrix.
+import type { CellValue } from "./protocol.js";
+
+/** A state a cell can hold, listed worst first: a collapsed group shows the worst state of its cells. */
+export interface MatrixState {
+  /** A letter, then up to 63 letters, digits, hyphens and underscores. */
+  id: string;
+  label: string;
+  /** A CanopyX tone (success, warning, danger, info, muted, neutral) or a host tone the theme defines. */
+  tone?: string;
+  /** The symbol cells and the legend draw, so a state never relies on colour alone. */
+  symbol: "check" | "cross" | "warning" | "info" | "dot" | "dash" | "question" | "clock" | "pause";
+  /** Cells in this state count in the totals and stay when the reader shows only problems. */
+  attention?: boolean;
+}
+
+/** A property of an axis's items: shown in tooltips, used to group, sort and filter. */
+export interface MatrixAttribute {
+  id: string;
+  title: string;
+  kind?: "text" | "number" | "datetime";
+  /** The filter panel lists its values with their counts. */
+  facet?: boolean;
+}
+
+/** An entity on an axis: a row or a column. */
+export interface MatrixItem {
+  id: string;
+  label: string;
+  secondary?: string;
+  /** An http, https or mailto address, or a relative one. */
+  href?: string;
+  values?: Record<string, CellValue | { value: CellValue; text?: string }>;
+}
+
+/** One axis of the matrix. */
+export interface MatrixAxis {
+  title?: string;
+  noun?: string;
+  attributes?: MatrixAttribute[];
+  items: MatrixItem[];
+  groupBy?: string;
+  sort?: MatrixSort;
+}
+
+/** How an axis is sorted: by its labels, its totals or an attribute. */
+export interface MatrixSort {
+  by: "#label" | "#total" | (string & {});
+  direction?: "asc" | "desc";
+}
+
+/** A cell's extras: [row index, column index, value, text, title, [label, value][]]. */
+export type MatrixNote = [number, number, number | null, (string | null)?, (string | null)?, ([string, string][] | null)?];
+
+/** The matrix document: `{ protocol: "canopyx/2", type: "matrix" }`. */
+export interface MatrixDocument {
+  protocol: "canopyx/2";
+  type: "matrix";
+  id: string;
+  label: string;
+  rows: MatrixAxis;
+  /** The column axis; a square matrix has none and takes its columns from its rows. */
+  columns?: MatrixAxis;
+  square?: boolean;
+  /** The column title of a square matrix. */
+  columnTitle?: string;
+  /** What the self cells of a square matrix show. */
+  diagonal?: "self" | "data";
+  states: MatrixState[];
+  /** One string per row: a state digit (0-9, a-z) per column, "." for no data. */
+  cells: string[];
+  notes?: MatrixNote[];
+  totals?: { states?: string[]; rows?: boolean; columns?: boolean };
+  attentionOnly?: boolean;
+  /** Opens hiding the rows and columns whose visible cells all lack data. */
+  hideEmpty?: boolean;
+  cellWidth?: number;
+  density?: "compact" | "normal" | "comfortable";
+  details?: "dialog" | "host";
+  phone?: "scroll" | "cards";
+  legend?: boolean;
+  /** As tall as the content when it fits, with the host's height as the bound. Default true. */
+  autoHeight?: boolean;
+  labels?: Record<string, string>;
+}
+
+/** The reader's query: search, filters by attribute value, only problems, hide empty, and each axis's sort, groups and collapsed groups. */
+export interface MatrixQueryState {
+  search: string;
+  attentionOnly: boolean;
+  hideEmpty: boolean;
+  filters: { rows: Record<string, string[]>; columns: Record<string, string[]> };
+  sort: { rows: MatrixSort | null; columns: MatrixSort | null };
+  group: { rows: string | null; columns: string | null };
+  collapsed: { rows: string[]; columns: string[] };
+}
+
+/** What canopyx:matrixCell carries: the row and column (or their groups), the state and the cell's extras. */
+export interface MatrixCellDetail {
+  matrix: string;
+  row: string | null;
+  rowGroup: string | null;
+  column: string | null;
+  columnGroup: string | null;
+  /** The state id, "self" for a self cell, or null without data. */
+  state: string | null;
+  value: number | null;
+  text: string | null;
+  title: string | null;
+  details: [string, string][];
+  /** The cells a rolled-up cell covers, and how many of them need attention. */
+  members: number;
+  attention: number;
+}
+
+/** A state to apply: any part of the query, down to one axis of filters, sorts, groups or collapsed groups. */
+export interface MatrixStateInput {
+  search?: string;
+  attentionOnly?: boolean;
+  hideEmpty?: boolean;
+  filters?: { rows?: Record<string, string[] | null>; columns?: Record<string, string[] | null> };
+  sort?: { rows?: MatrixSort | null; columns?: MatrixSort | null };
+  group?: { rows?: string | null; columns?: string | null };
+  collapsed?: { rows?: string[]; columns?: string[] };
+}
+
+/** Options of createMatrix and CanopyX.configure for a matrix fragment. */
+export interface MatrixOptions {
+  view: MatrixDocument;
+  labels?: Record<string, string>;
+  state?: MatrixStateInput;
+  onReady?: (detail: { matrix: string }) => void;
+  /** Called before the details dialog; preventDefault on the event keeps it closed. */
+  onCell?: (detail: MatrixCellDetail, event: CustomEvent<MatrixCellDetail>) => void;
+  onStateChange?: (state: MatrixQueryState) => void;
+}
+
+/** The API of a matrix. Call it once `ready` has settled; a call made before the matrix part is in waits for it and returns a promise instead. */
+export interface MatrixApi {
+  readonly element: HTMLElement;
+  readonly view: MatrixDocument;
+  readonly ready: Promise<MatrixApi>;
+  sort(axis: "rows" | "columns", by: MatrixSort["by"] | null, direction?: "asc" | "desc"): void;
+  group(axis: "rows" | "columns", attribute: string | null): void;
+  filter(axis: "rows" | "columns", attribute: string, values: string[] | null): void;
+  setSearch(text: string): void;
+  setAttentionOnly(on: boolean): void;
+  getState(): Readonly<MatrixQueryState>;
+  setState(state: MatrixStateInput): void;
+  /** The ids of the visible items, members of collapsed groups included, in order. */
+  getVisible(): Readonly<{ rows: string[]; columns: string[] }>;
+  /** Moves focus to a cell; false when the row or column is not shown. */
+  focusCell(row: string, column: string): boolean;
+  /** Replaces the document, keeping the query that still applies (live refresh). */
+  update(view: MatrixDocument): void;
+  destroy(): void;
+}
+
+/** Creates a status matrix in a host element (docs/matrix.md). Ships with the grid and reporting entry points. */
+export declare function createMatrix(host: HTMLElement, options: MatrixOptions): MatrixApi;

package/README.md

@@ -20,14 +20,16 @@ Turn application data into searchable trees, sortable tables and standalone HTML
 - **Application views** backed by paged or cursor-based data sources, with selection and detail callbacks.
 - **Email and print tables** rendered from the same .NET view without JavaScript.
 - **Calendars and resource timelines** of the same records: month, week, day, agenda and year views, resources grouped as a tree with capacity per group, recurring events, drag to reschedule through the grid's editing, and iCalendar export.
+- **Status matrices**: a state for each pair of two sets of entities, with totals, sorting, filtering and grouping on both axes, sticky headers and both axes windowed ([docs/matrix.md](docs/matrix.md)).
+- **Guided flows** for setup and edit tasks: steps with typed fields, conditions as data, validation, a review page with change links, secrets that never echo, and one proposal to the host ([docs/flow.md](docs/flow.md)).
 
-![File explorer in the light theme, with sizes, dates, owners and an expanded detail row](https://cdn.jsdelivr.net/npm/@evotecit/canopyx@0.3.2/docs/images/tree-grid-light.png)
+![File explorer in the light theme, with sizes, dates, owners and an expanded detail row](https://cdn.jsdelivr.net/npm/@evotecit/canopyx@0.3.4/docs/images/tree-grid-light.png)
 
 The same explorer in the dark theme, alongside its script-free output for email and print:
 
 | Dark theme | Static outline |
 | --- | --- |
-| ![File explorer in the dark theme](https://cdn.jsdelivr.net/npm/@evotecit/canopyx@0.3.2/docs/images/tree-grid-dark.png) | ![Static outline table](https://cdn.jsdelivr.net/npm/@evotecit/canopyx@0.3.2/docs/images/static-outline.png) |
+| ![File explorer in the dark theme](https://cdn.jsdelivr.net/npm/@evotecit/canopyx@0.3.4/docs/images/tree-grid-dark.png) | ![Static outline table](https://cdn.jsdelivr.net/npm/@evotecit/canopyx@0.3.4/docs/images/static-outline.png) |
 
 ## Features
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@evotecit/canopyx",
-  "version": "0.3.2",
+  "version": "0.3.4",
   "description": "Interactive tree grids and data tables with virtual rows, search, filters and offline HTML reports.",
   "type": "module",
   "license": "MIT",
@@ -22,6 +22,12 @@
       "types": "./JavaScript/grid.d.ts",
       "import": "./CanopyX.Html/Assets/canopyx-grid-module.mjs"
     },
+    "./flow": {
+      "types": "./JavaScript/flow.d.ts",
+      "import": "./CanopyX.Html/Assets/canopyx-flow-module.mjs"
+    },
+    "./flow-entry.js": "./CanopyX.Html/Assets/canopyx-flow-entry.js",
+    "./flow-entry.css": "./CanopyX.Html/Assets/canopyx-flow-entry.css",
     "./grid.css": "./CanopyX.Html/Assets/canopyx-grid.css",
     "./grid.js": "./CanopyX.Html/Assets/canopyx-grid.js",
     "./reporting": {
@@ -38,6 +44,12 @@
     "./pager.css": "./CanopyX.Html/Assets/canopyx-pager.css",
     "./enhance.js": "./CanopyX.Html/Assets/canopyx-enhance.js",
     "./data.js": "./CanopyX.Html/Assets/canopyx-data.js",
+    "./forms.js": "./CanopyX.Html/Assets/canopyx-forms.js",
+    "./forms.css": "./CanopyX.Html/Assets/canopyx-forms.css",
+    "./flow.js": "./CanopyX.Html/Assets/canopyx-flow.js",
+    "./flow.css": "./CanopyX.Html/Assets/canopyx-flow.css",
+    "./matrix.js": "./CanopyX.Html/Assets/canopyx-matrix.js",
+    "./matrix.css": "./CanopyX.Html/Assets/canopyx-matrix.css",
     "./editing.js": "./CanopyX.Html/Assets/canopyx-editing.js",
     "./editing.css": "./CanopyX.Html/Assets/canopyx-editing.css",
     "./column-groups.js": "./CanopyX.Html/Assets/canopyx-column-groups.js",
@@ -126,6 +138,15 @@
     "CanopyX.Html/Assets/canopyx-pager.css",
     "CanopyX.Html/Assets/canopyx-enhance.js",
     "CanopyX.Html/Assets/canopyx-data.js",
+    "CanopyX.Html/Assets/canopyx-flow-module.mjs",
+    "CanopyX.Html/Assets/canopyx-flow-entry.js",
+    "CanopyX.Html/Assets/canopyx-flow-entry.css",
+    "CanopyX.Html/Assets/canopyx-forms.js",
+    "CanopyX.Html/Assets/canopyx-forms.css",
+    "CanopyX.Html/Assets/canopyx-flow.js",
+    "CanopyX.Html/Assets/canopyx-flow.css",
+    "CanopyX.Html/Assets/canopyx-matrix.js",
+    "CanopyX.Html/Assets/canopyx-matrix.css",
     "CanopyX.Html/Assets/canopyx-editing.js",
     "CanopyX.Html/Assets/canopyx-editing.css",
     "CanopyX.Html/Assets/canopyx-column-groups.js",
@@ -165,6 +186,8 @@
     "CanopyX.Html/Assets/canopyx-timeline.css"
   ],
   "keywords": [
+    "forms",
+    "wizard",
     "treegrid",
     "treeview",
     "data-grid",