@besaitech/ng-design-system 0.0.70 → 0.0.72

package/README.md

@@ -264,6 +264,35 @@ they fall back to the configured labels.
 
 Custom tooltip body: `<ng-template sdsChartTooltip let-tip>…</ng-template>` inside any chart.
 
+**Rich text** (Tiptap / ProseMirror) — a **secondary entry point**, `@besaitech/ng-design-system/rich-text`,
+for the same reason as the charts: ProseMirror stays in the lazy chunk of the page that edits rich text.
+
+```ts
+import { SdsRichTextEditor, SDS_RICH_TEXT_LABELS } from '@besaitech/ng-design-system/rich-text';
+```
+
+| Component | Selector | Notes |
+| --- | --- | --- |
+| `SdsRichTextEditor` | `<sds-rich-text-editor>` | CVA over an HTML string (`''` when empty). `[tools]` (headings, bold, italic, underline, strike, lists, quote, link, divider, clear, undo/redo) is the toolbar AND the schema; `rows` / `maxRows`, `maxLength` + counter, `label`, `hint`, `error`, `invalid`, `required`, `readonly`, `disabled`, `appearance` (default·filled), `contentLanguage` (spell-check language); `focus()`, `insertText(text)` |
+| `SdsLocalizedRichTextEditor` | `<sds-localized-rich-text-editor>` | CVA over an `SdsLocalizedValue` (`{ fr: '<p>…</p>', de: … }`), like `sds-localized-input`: `languages`, `currentLanguage`, `requiredLanguages`, switcher at the end of the toolbar with filled / required / missing dots, empty translations pruned. One editor per language underneath — undo, caret and spell-check stay per language. Same rich-text inputs as above (`maxLength` is per language) |
+| `SdsRichTextToolbarEnd` | `[sdsRichTextToolbarEnd]` | Marks content projected at the end of the toolbar (kept in `readonly`): a language switcher, "insert variable" buttons calling `editor.insertText(…)` |
+
+The emitted HTML is clean by construction: no inline styles, nothing outside the enabled tools, and links
+limited to http(s), mailto, tel, site-relative paths and anchors (`sdsSafeHref`) with
+`rel="noopener noreferrer nofollow"` — still sanitise stored HTML when you display it. ⌘/Ctrl+K opens the
+link field and is not passed on to an app-wide ⌘K palette. Strings are English by default: translate them
+per instance with `[labels]` (a `Partial<SdsRichTextLabels>`, follows a live language switch) or app-wide with
+`{ provide: SDS_RICH_TEXT_LABELS, useValue: { bold: 'Gras', … } }`.
+
+```html
+<sds-rich-text-editor
+  label="Présentation"
+  [tools]="['heading2', 'bold', 'italic', 'bulletList', 'orderedList', 'link', 'undo', 'redo']"
+  [maxLength]="2000"
+  formControlName="description"
+/>
+```
+
 ## Theme & cross-app preferences
 
 `SdsThemeService` holds the person's **mode** — `'system' | 'light' | 'dark'`, persisted to `localStorage`

package/charts/index.d.ts

@@ -132,6 +132,58 @@ declare class SdsChartTooltip {
     static ɵdir: _angular_core.ɵɵDirectiveDeclaration<SdsChartTooltip, "ng-template[sdsChartTooltip]", never, {}, {}, never, never, true, never>;
 }
 
+/** One legend entry, as handed to a custom swatch template. */
+interface SdsChartLegendEntry<T = any> {
+    /** The series key, or the slice name (donut). */
+    key: string;
+    /** The label printed next to the swatch. */
+    label: string;
+    /** The colour the chart draws this entry in (any CSS colour). */
+    color: string;
+    /** True while the entry is toggled off from the legend. The chart already fades your swatch. */
+    hidden: boolean;
+    /**
+     * Donut: the slice's first source row — read your own fields from it (an icon, an id) — or `null` for the
+     * folded "Other" slice. Series charts (line, bar, scatter): always `null`.
+     */
+    row: T | null;
+    /** Donut: true for the folded "Other" slice. */
+    other: boolean;
+}
+/** Context of an `ng-template[sdsChartLegendSwatch]`. */
+interface SdsChartLegendSwatchContext<T = any> {
+    $implicit: SdsChartLegendEntry<T>;
+}
+/**
+ * Replace the coloured swatch in front of each legend label with your own markup — an avatar, an icon, a
+ * logo. The template receives the entry as `$implicit` ({ key, label, color, hidden, row, other }); on a
+ * donut `row` is the slice's source row, so the swatch can show what the app knows about that category.
+ *
+ * Only the swatch is replaced: the chart keeps the label, the value/share, the toggle button, the hover
+ * emphasis and the keyboard behaviour, and fades the swatch while its entry is hidden. Keep it small
+ * (~20 px) and decorative — the label already names the entry. Return the default look for some entries
+ * (e.g. the "Other" slice) by drawing a dot in `entry.color`.
+ *
+ * Works on line, bar, scatter and donut charts.
+ *
+ * @example
+ * <sds-donut-chart [data]="spend" category="name" value="amount" color="color">
+ *   <ng-template sdsChartLegendSwatch let-entry>
+ *     @if (entry.row) {
+ *       <app-category-avatar [icon]="entry.row.icon" [color]="entry.color" [size]="20" />
+ *     } @else {
+ *       <span class="h-2.5 w-2.5 rounded-full" [style.background]="entry.color"></span>
+ *     }
+ *   </ng-template>
+ * </sds-donut-chart>
+ */
+declare class SdsChartLegendSwatch {
+    readonly template: TemplateRef<SdsChartLegendSwatchContext<any>>;
+    static ngTemplateContextGuard(_dir: SdsChartLegendSwatch, ctx: unknown): ctx is SdsChartLegendSwatchContext;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SdsChartLegendSwatch, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<SdsChartLegendSwatch, "ng-template[sdsChartLegendSwatch]", never, {}, {}, never, never, true, never>;
+}
+
 interface PlotRect {
     left: number;
     top: number;
@@ -163,6 +215,10 @@ interface LegendItem {
     /** Optional trailing text — a value or a share (the donut's direct labels). */
     detail?: string;
     dashed?: boolean;
+    /** Donut: the slice's first source row (handed to a custom swatch template); null for "Other". */
+    row?: unknown;
+    /** Donut: the folded "Other" slice. */
+    other?: boolean;
 }
 interface ChartTable {
     columns: string[];
@@ -250,6 +306,8 @@ declare class SdsLineChart<T = any> {
     /** A point was clicked (the series nearest the pointer) or activated with Enter. */
     readonly pointClick: _angular_core.OutputEmitterRef<SdsChartPointEvent<T>>;
     protected readonly customTooltip: _angular_core.Signal<SdsChartTooltip | undefined>;
+    /** A projected `sdsChartLegendSwatch` template, drawn instead of each legend entry's swatch. */
+    protected readonly customSwatch: _angular_core.Signal<SdsChartLegendSwatch | undefined>;
     protected readonly uid: string;
     protected readonly legendFocus: _angular_core.WritableSignal<string | null>;
     protected readonly active: _angular_core.WritableSignal<number | null>;
@@ -339,7 +397,7 @@ declare class SdsLineChart<T = any> {
     protected readonly label: _angular_core.Signal<string>;
     protected readonly table: _angular_core.Signal<ChartTable>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<SdsLineChart<any>, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SdsLineChart<any>, "sds-line-chart", never, { "data": { "alias": "data"; "required": false; "isSignal": true; }; "x": { "alias": "x"; "required": true; "isSignal": true; }; "series": { "alias": "series"; "required": true; "isSignal": true; }; "xType": { "alias": "xType"; "required": false; "isSignal": true; }; "heading": { "alias": "heading"; "required": false; "isSignal": true; }; "subtitle": { "alias": "subtitle"; "required": false; "isSignal": true; }; "height": { "alias": "height"; "required": false; "isSignal": true; }; "curve": { "alias": "curve"; "required": false; "isSignal": true; }; "area": { "alias": "area"; "required": false; "isSignal": true; }; "stack": { "alias": "stack"; "required": false; "isSignal": true; }; "markers": { "alias": "markers"; "required": false; "isSignal": true; }; "endLabels": { "alias": "endLabels"; "required": false; "isSignal": true; }; "grid": { "alias": "grid"; "required": false; "isSignal": true; }; "legend": { "alias": "legend"; "required": false; "isSignal": true; }; "highlight": { "alias": "highlight"; "required": false; "isSignal": true; }; "annotations": { "alias": "annotations"; "required": false; "isSignal": true; }; "yScale": { "alias": "yScale"; "required": false; "isSignal": true; }; "yMin": { "alias": "yMin"; "required": false; "isSignal": true; }; "yMax": { "alias": "yMax"; "required": false; "isSignal": true; }; "includeZero": { "alias": "includeZero"; "required": false; "isSignal": true; }; "valueFormat": { "alias": "valueFormat"; "required": false; "isSignal": true; }; "axisFormat": { "alias": "axisFormat"; "required": false; "isSignal": true; }; "xFormat": { "alias": "xFormat"; "required": false; "isSignal": true; }; "xLabel": { "alias": "xLabel"; "required": false; "isSignal": true; }; "yLabel": { "alias": "yLabel"; "required": false; "isSignal": true; }; "locale": { "alias": "locale"; "required": false; "isSignal": true; }; "tooltip": { "alias": "tooltip"; "required": false; "isSignal": true; }; "animate": { "alias": "animate"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "emptyText": { "alias": "emptyText"; "required": false; "isSignal": true; }; "tableToggle": { "alias": "tableToggle"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "hidden": { "alias": "hidden"; "required": false; "isSignal": true; }; }, { "hidden": "hiddenChange"; "pointClick": "pointClick"; }, ["customTooltip"], never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SdsLineChart<any>, "sds-line-chart", never, { "data": { "alias": "data"; "required": false; "isSignal": true; }; "x": { "alias": "x"; "required": true; "isSignal": true; }; "series": { "alias": "series"; "required": true; "isSignal": true; }; "xType": { "alias": "xType"; "required": false; "isSignal": true; }; "heading": { "alias": "heading"; "required": false; "isSignal": true; }; "subtitle": { "alias": "subtitle"; "required": false; "isSignal": true; }; "height": { "alias": "height"; "required": false; "isSignal": true; }; "curve": { "alias": "curve"; "required": false; "isSignal": true; }; "area": { "alias": "area"; "required": false; "isSignal": true; }; "stack": { "alias": "stack"; "required": false; "isSignal": true; }; "markers": { "alias": "markers"; "required": false; "isSignal": true; }; "endLabels": { "alias": "endLabels"; "required": false; "isSignal": true; }; "grid": { "alias": "grid"; "required": false; "isSignal": true; }; "legend": { "alias": "legend"; "required": false; "isSignal": true; }; "highlight": { "alias": "highlight"; "required": false; "isSignal": true; }; "annotations": { "alias": "annotations"; "required": false; "isSignal": true; }; "yScale": { "alias": "yScale"; "required": false; "isSignal": true; }; "yMin": { "alias": "yMin"; "required": false; "isSignal": true; }; "yMax": { "alias": "yMax"; "required": false; "isSignal": true; }; "includeZero": { "alias": "includeZero"; "required": false; "isSignal": true; }; "valueFormat": { "alias": "valueFormat"; "required": false; "isSignal": true; }; "axisFormat": { "alias": "axisFormat"; "required": false; "isSignal": true; }; "xFormat": { "alias": "xFormat"; "required": false; "isSignal": true; }; "xLabel": { "alias": "xLabel"; "required": false; "isSignal": true; }; "yLabel": { "alias": "yLabel"; "required": false; "isSignal": true; }; "locale": { "alias": "locale"; "required": false; "isSignal": true; }; "tooltip": { "alias": "tooltip"; "required": false; "isSignal": true; }; "animate": { "alias": "animate"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "emptyText": { "alias": "emptyText"; "required": false; "isSignal": true; }; "tableToggle": { "alias": "tableToggle"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "hidden": { "alias": "hidden"; "required": false; "isSignal": true; }; }, { "hidden": "hiddenChange"; "pointClick": "pointClick"; }, ["customTooltip", "customSwatch"], never, true, never>;
 }
 
 /** `vertical` = columns rising from the category axis; `horizontal` = bars (best for long labels / rankings). */
@@ -409,6 +467,8 @@ declare class SdsBarChart<T = any> {
     /** A bar (or a category, from the keyboard) was clicked. */
     readonly pointClick: _angular_core.OutputEmitterRef<SdsChartPointEvent<T>>;
     protected readonly customTooltip: _angular_core.Signal<SdsChartTooltip | undefined>;
+    /** A projected `sdsChartLegendSwatch` template, drawn instead of each legend entry's swatch. */
+    protected readonly customSwatch: _angular_core.Signal<SdsChartLegendSwatch | undefined>;
     protected readonly legendFocus: _angular_core.WritableSignal<string | null>;
     protected readonly active: _angular_core.WritableSignal<number | null>;
     protected readonly keyboard: _angular_core.WritableSignal<boolean>;
@@ -519,7 +579,7 @@ declare class SdsBarChart<T = any> {
     protected readonly label: _angular_core.Signal<string>;
     protected readonly table: _angular_core.Signal<ChartTable>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<SdsBarChart<any>, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SdsBarChart<any>, "sds-bar-chart", never, { "data": { "alias": "data"; "required": false; "isSignal": true; }; "x": { "alias": "x"; "required": true; "isSignal": true; }; "series": { "alias": "series"; "required": true; "isSignal": true; }; "heading": { "alias": "heading"; "required": false; "isSignal": true; }; "subtitle": { "alias": "subtitle"; "required": false; "isSignal": true; }; "orientation": { "alias": "orientation"; "required": false; "isSignal": true; }; "stack": { "alias": "stack"; "required": false; "isSignal": true; }; "height": { "alias": "height"; "required": false; "isSignal": true; }; "maxBarSize": { "alias": "maxBarSize"; "required": false; "isSignal": true; }; "radius": { "alias": "radius"; "required": false; "isSignal": true; }; "showValues": { "alias": "showValues"; "required": false; "isSignal": true; }; "sort": { "alias": "sort"; "required": false; "isSignal": true; }; "highlightCategories": { "alias": "highlightCategories"; "required": false; "isSignal": true; }; "barColor": { "alias": "barColor"; "required": false; "isSignal": true; }; "grid": { "alias": "grid"; "required": false; "isSignal": true; }; "legend": { "alias": "legend"; "required": false; "isSignal": true; }; "annotations": { "alias": "annotations"; "required": false; "isSignal": true; }; "yMin": { "alias": "yMin"; "required": false; "isSignal": true; }; "yMax": { "alias": "yMax"; "required": false; "isSignal": true; }; "valueFormat": { "alias": "valueFormat"; "required": false; "isSignal": true; }; "axisFormat": { "alias": "axisFormat"; "required": false; "isSignal": true; }; "xFormat": { "alias": "xFormat"; "required": false; "isSignal": true; }; "xLabel": { "alias": "xLabel"; "required": false; "isSignal": true; }; "yLabel": { "alias": "yLabel"; "required": false; "isSignal": true; }; "locale": { "alias": "locale"; "required": false; "isSignal": true; }; "tooltip": { "alias": "tooltip"; "required": false; "isSignal": true; }; "animate": { "alias": "animate"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "emptyText": { "alias": "emptyText"; "required": false; "isSignal": true; }; "tableToggle": { "alias": "tableToggle"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "hidden": { "alias": "hidden"; "required": false; "isSignal": true; }; }, { "hidden": "hiddenChange"; "pointClick": "pointClick"; }, ["customTooltip"], never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SdsBarChart<any>, "sds-bar-chart", never, { "data": { "alias": "data"; "required": false; "isSignal": true; }; "x": { "alias": "x"; "required": true; "isSignal": true; }; "series": { "alias": "series"; "required": true; "isSignal": true; }; "heading": { "alias": "heading"; "required": false; "isSignal": true; }; "subtitle": { "alias": "subtitle"; "required": false; "isSignal": true; }; "orientation": { "alias": "orientation"; "required": false; "isSignal": true; }; "stack": { "alias": "stack"; "required": false; "isSignal": true; }; "height": { "alias": "height"; "required": false; "isSignal": true; }; "maxBarSize": { "alias": "maxBarSize"; "required": false; "isSignal": true; }; "radius": { "alias": "radius"; "required": false; "isSignal": true; }; "showValues": { "alias": "showValues"; "required": false; "isSignal": true; }; "sort": { "alias": "sort"; "required": false; "isSignal": true; }; "highlightCategories": { "alias": "highlightCategories"; "required": false; "isSignal": true; }; "barColor": { "alias": "barColor"; "required": false; "isSignal": true; }; "grid": { "alias": "grid"; "required": false; "isSignal": true; }; "legend": { "alias": "legend"; "required": false; "isSignal": true; }; "annotations": { "alias": "annotations"; "required": false; "isSignal": true; }; "yMin": { "alias": "yMin"; "required": false; "isSignal": true; }; "yMax": { "alias": "yMax"; "required": false; "isSignal": true; }; "valueFormat": { "alias": "valueFormat"; "required": false; "isSignal": true; }; "axisFormat": { "alias": "axisFormat"; "required": false; "isSignal": true; }; "xFormat": { "alias": "xFormat"; "required": false; "isSignal": true; }; "xLabel": { "alias": "xLabel"; "required": false; "isSignal": true; }; "yLabel": { "alias": "yLabel"; "required": false; "isSignal": true; }; "locale": { "alias": "locale"; "required": false; "isSignal": true; }; "tooltip": { "alias": "tooltip"; "required": false; "isSignal": true; }; "animate": { "alias": "animate"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "emptyText": { "alias": "emptyText"; "required": false; "isSignal": true; }; "tableToggle": { "alias": "tableToggle"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "hidden": { "alias": "hidden"; "required": false; "isSignal": true; }; }, { "hidden": "hiddenChange"; "pointClick": "pointClick"; }, ["customTooltip", "customSwatch"], never, true, never>;
 }
 
 interface Dot<T> {
@@ -607,6 +667,8 @@ declare class SdsScatterChart<T = any> {
     readonly hidden: _angular_core.ModelSignal<readonly string[]>;
     readonly pointClick: _angular_core.OutputEmitterRef<SdsChartPointEvent<T>>;
     protected readonly customTooltip: _angular_core.Signal<SdsChartTooltip | undefined>;
+    /** A projected `sdsChartLegendSwatch` template, drawn instead of each legend entry's swatch. */
+    protected readonly customSwatch: _angular_core.Signal<SdsChartLegendSwatch | undefined>;
     protected readonly uid: string;
     protected readonly legendFocus: _angular_core.WritableSignal<string | null>;
     protected readonly active: _angular_core.WritableSignal<number | null>;
@@ -692,7 +754,7 @@ declare class SdsScatterChart<T = any> {
     protected readonly label: _angular_core.Signal<string>;
     protected readonly table: _angular_core.Signal<ChartTable>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<SdsScatterChart<any>, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SdsScatterChart<any>, "sds-scatter-chart", never, { "data": { "alias": "data"; "required": false; "isSignal": true; }; "x": { "alias": "x"; "required": true; "isSignal": true; }; "y": { "alias": "y"; "required": true; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "group": { "alias": "group"; "required": false; "isSignal": true; }; "pointLabel": { "alias": "pointLabel"; "required": false; "isSignal": true; }; "groupOrder": { "alias": "groupOrder"; "required": false; "isSignal": true; }; "heading": { "alias": "heading"; "required": false; "isSignal": true; }; "subtitle": { "alias": "subtitle"; "required": false; "isSignal": true; }; "height": { "alias": "height"; "required": false; "isSignal": true; }; "radius": { "alias": "radius"; "required": false; "isSignal": true; }; "maxRadius": { "alias": "maxRadius"; "required": false; "isSignal": true; }; "trendline": { "alias": "trendline"; "required": false; "isSignal": true; }; "grid": { "alias": "grid"; "required": false; "isSignal": true; }; "legend": { "alias": "legend"; "required": false; "isSignal": true; }; "annotations": { "alias": "annotations"; "required": false; "isSignal": true; }; "xScale": { "alias": "xScale"; "required": false; "isSignal": true; }; "yScale": { "alias": "yScale"; "required": false; "isSignal": true; }; "xMin": { "alias": "xMin"; "required": false; "isSignal": true; }; "xMax": { "alias": "xMax"; "required": false; "isSignal": true; }; "yMin": { "alias": "yMin"; "required": false; "isSignal": true; }; "yMax": { "alias": "yMax"; "required": false; "isSignal": true; }; "includeZero": { "alias": "includeZero"; "required": false; "isSignal": true; }; "xFormat": { "alias": "xFormat"; "required": false; "isSignal": true; }; "valueFormat": { "alias": "valueFormat"; "required": false; "isSignal": true; }; "axisFormat": { "alias": "axisFormat"; "required": false; "isSignal": true; }; "sizeFormat": { "alias": "sizeFormat"; "required": false; "isSignal": true; }; "xLabel": { "alias": "xLabel"; "required": false; "isSignal": true; }; "yLabel": { "alias": "yLabel"; "required": false; "isSignal": true; }; "sizeLabel": { "alias": "sizeLabel"; "required": false; "isSignal": true; }; "locale": { "alias": "locale"; "required": false; "isSignal": true; }; "tooltip": { "alias": "tooltip"; "required": false; "isSignal": true; }; "animate": { "alias": "animate"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "emptyText": { "alias": "emptyText"; "required": false; "isSignal": true; }; "tableToggle": { "alias": "tableToggle"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "hidden": { "alias": "hidden"; "required": false; "isSignal": true; }; }, { "hidden": "hiddenChange"; "pointClick": "pointClick"; }, ["customTooltip"], never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SdsScatterChart<any>, "sds-scatter-chart", never, { "data": { "alias": "data"; "required": false; "isSignal": true; }; "x": { "alias": "x"; "required": true; "isSignal": true; }; "y": { "alias": "y"; "required": true; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "group": { "alias": "group"; "required": false; "isSignal": true; }; "pointLabel": { "alias": "pointLabel"; "required": false; "isSignal": true; }; "groupOrder": { "alias": "groupOrder"; "required": false; "isSignal": true; }; "heading": { "alias": "heading"; "required": false; "isSignal": true; }; "subtitle": { "alias": "subtitle"; "required": false; "isSignal": true; }; "height": { "alias": "height"; "required": false; "isSignal": true; }; "radius": { "alias": "radius"; "required": false; "isSignal": true; }; "maxRadius": { "alias": "maxRadius"; "required": false; "isSignal": true; }; "trendline": { "alias": "trendline"; "required": false; "isSignal": true; }; "grid": { "alias": "grid"; "required": false; "isSignal": true; }; "legend": { "alias": "legend"; "required": false; "isSignal": true; }; "annotations": { "alias": "annotations"; "required": false; "isSignal": true; }; "xScale": { "alias": "xScale"; "required": false; "isSignal": true; }; "yScale": { "alias": "yScale"; "required": false; "isSignal": true; }; "xMin": { "alias": "xMin"; "required": false; "isSignal": true; }; "xMax": { "alias": "xMax"; "required": false; "isSignal": true; }; "yMin": { "alias": "yMin"; "required": false; "isSignal": true; }; "yMax": { "alias": "yMax"; "required": false; "isSignal": true; }; "includeZero": { "alias": "includeZero"; "required": false; "isSignal": true; }; "xFormat": { "alias": "xFormat"; "required": false; "isSignal": true; }; "valueFormat": { "alias": "valueFormat"; "required": false; "isSignal": true; }; "axisFormat": { "alias": "axisFormat"; "required": false; "isSignal": true; }; "sizeFormat": { "alias": "sizeFormat"; "required": false; "isSignal": true; }; "xLabel": { "alias": "xLabel"; "required": false; "isSignal": true; }; "yLabel": { "alias": "yLabel"; "required": false; "isSignal": true; }; "sizeLabel": { "alias": "sizeLabel"; "required": false; "isSignal": true; }; "locale": { "alias": "locale"; "required": false; "isSignal": true; }; "tooltip": { "alias": "tooltip"; "required": false; "isSignal": true; }; "animate": { "alias": "animate"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "emptyText": { "alias": "emptyText"; "required": false; "isSignal": true; }; "tableToggle": { "alias": "tableToggle"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "hidden": { "alias": "hidden"; "required": false; "isSignal": true; }; }, { "hidden": "hiddenChange"; "pointClick": "pointClick"; }, ["customTooltip", "customSwatch"], never, true, never>;
 }
 
 /** `donut` has a hole for a headline figure; `pie` is solid. */
@@ -760,6 +822,8 @@ declare class SdsDonutChart<T = any> {
     readonly hidden: _angular_core.ModelSignal<readonly string[]>;
     readonly pointClick: _angular_core.OutputEmitterRef<SdsChartPointEvent<T>>;
     protected readonly customTooltip: _angular_core.Signal<SdsChartTooltip | undefined>;
+    /** A projected `sdsChartLegendSwatch` template, drawn instead of each legend entry's swatch. */
+    protected readonly customSwatch: _angular_core.Signal<SdsChartLegendSwatch | undefined>;
     protected readonly focus: _angular_core.WritableSignal<string | null>;
     protected readonly active: _angular_core.WritableSignal<string | null>;
     protected readonly keyboard: _angular_core.WritableSignal<boolean>;
@@ -829,7 +893,7 @@ declare class SdsDonutChart<T = any> {
     protected readonly label: _angular_core.Signal<string>;
     protected readonly table: _angular_core.Signal<ChartTable>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<SdsDonutChart<any>, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SdsDonutChart<any>, "sds-donut-chart", never, { "data": { "alias": "data"; "required": false; "isSignal": true; }; "category": { "alias": "category"; "required": true; "isSignal": true; }; "value": { "alias": "value"; "required": true; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; "heading": { "alias": "heading"; "required": false; "isSignal": true; }; "subtitle": { "alias": "subtitle"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "half": { "alias": "half"; "required": false; "isSignal": true; }; "height": { "alias": "height"; "required": false; "isSignal": true; }; "thickness": { "alias": "thickness"; "required": false; "isSignal": true; }; "maxSlices": { "alias": "maxSlices"; "required": false; "isSignal": true; }; "otherLabel": { "alias": "otherLabel"; "required": false; "isSignal": true; }; "sort": { "alias": "sort"; "required": false; "isSignal": true; }; "legend": { "alias": "legend"; "required": false; "isSignal": true; }; "legendValue": { "alias": "legendValue"; "required": false; "isSignal": true; }; "centerLabel": { "alias": "centerLabel"; "required": false; "isSignal": true; }; "centerValue": { "alias": "centerValue"; "required": false; "isSignal": true; }; "valueFormat": { "alias": "valueFormat"; "required": false; "isSignal": true; }; "locale": { "alias": "locale"; "required": false; "isSignal": true; }; "tooltip": { "alias": "tooltip"; "required": false; "isSignal": true; }; "animate": { "alias": "animate"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "emptyText": { "alias": "emptyText"; "required": false; "isSignal": true; }; "tableToggle": { "alias": "tableToggle"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "hidden": { "alias": "hidden"; "required": false; "isSignal": true; }; }, { "hidden": "hiddenChange"; "pointClick": "pointClick"; }, ["customTooltip"], never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SdsDonutChart<any>, "sds-donut-chart", never, { "data": { "alias": "data"; "required": false; "isSignal": true; }; "category": { "alias": "category"; "required": true; "isSignal": true; }; "value": { "alias": "value"; "required": true; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; "heading": { "alias": "heading"; "required": false; "isSignal": true; }; "subtitle": { "alias": "subtitle"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "half": { "alias": "half"; "required": false; "isSignal": true; }; "height": { "alias": "height"; "required": false; "isSignal": true; }; "thickness": { "alias": "thickness"; "required": false; "isSignal": true; }; "maxSlices": { "alias": "maxSlices"; "required": false; "isSignal": true; }; "otherLabel": { "alias": "otherLabel"; "required": false; "isSignal": true; }; "sort": { "alias": "sort"; "required": false; "isSignal": true; }; "legend": { "alias": "legend"; "required": false; "isSignal": true; }; "legendValue": { "alias": "legendValue"; "required": false; "isSignal": true; }; "centerLabel": { "alias": "centerLabel"; "required": false; "isSignal": true; }; "centerValue": { "alias": "centerValue"; "required": false; "isSignal": true; }; "valueFormat": { "alias": "valueFormat"; "required": false; "isSignal": true; }; "locale": { "alias": "locale"; "required": false; "isSignal": true; }; "tooltip": { "alias": "tooltip"; "required": false; "isSignal": true; }; "animate": { "alias": "animate"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "emptyText": { "alias": "emptyText"; "required": false; "isSignal": true; }; "tableToggle": { "alias": "tableToggle"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "hidden": { "alias": "hidden"; "required": false; "isSignal": true; }; }, { "hidden": "hiddenChange"; "pointClick": "pointClick"; }, ["customTooltip", "customSwatch"], never, true, never>;
 }
 
 /** `sequential` = magnitude (one hue, pale → strong); `diverging` = polarity around a midpoint. */
@@ -1229,7 +1293,7 @@ declare class SdsKpi {
     readonly trendLabels: _angular_core.InputSignal<readonly string[] | null>;
     readonly trendVariant: _angular_core.InputSignal<SdsSparklineVariant>;
     readonly trendColor: _angular_core.InputSignal<string | null>;
-    readonly icon: _angular_core.InputSignal<"x" | "search" | "filter" | "menu" | "table" | "copy" | "square" | "chart-column" | "chart-line" | "chart-bar" | "chart-area" | "chart-pie" | "chart-scatter" | "grid-3x3" | "activity" | "gauge" | "trending-up" | "trending-down" | "clipboard-list" | "credit-card" | "external-link" | "languages" | "megaphone" | "monitor" | "store" | "user-round" | "home" | "user-plus" | "user-check" | "hand" | "users" | "bike" | "building-2" | "package" | "package-plus" | "package-open" | "rotate-ccw" | "bar-chart-3" | "log-out" | "panel-left-close" | "panel-left-open" | "panel-left" | "calendar" | "chevron-right" | "chevron-left" | "chevron-down" | "chevron-up" | "plus" | "minus" | "chevrons-left" | "chevrons-right" | "check" | "alert-circle" | "info" | "type" | "tag" | "ticket" | "square-check" | "circle-dot" | "circle-user" | "layout-grid" | "panels-top-left" | "panel-top" | "rows-3" | "book-open" | "palette" | "bell" | "phone" | "settings" | "align-left" | "toggle-left" | "arrow-up" | "arrow-down" | "chevrons-up-down" | "chevrons-up" | "chevrons-down" | "star" | "message-square" | "qr-code" | "eye" | "eye-off" | "user" | "check-circle" | "arrows-clockwise" | "file-text" | "file-check" | "hash" | "map-pin" | "inbox" | "arrow-right" | "refresh-cw" | "loader-circle" | "locate-fixed" | "locate-off" | "bug" | "scroll-text" | "moon" | "sun" | "search-x" | "command" | "sparkles" | "triangle-alert" | "octagon-x" | "ban" | "ellipsis" | "ellipsis-vertical" | "grip-vertical" | "upload" | "image" | "image-off" | "utensils" | "zoom-in" | "zoom-out" | "trash-2" | "clock" | "pencil" | "circle-help" | "stock" | "allergen-cereals-gluten" | "allergen-crustaceans" | "allergen-eggs" | "allergen-fish" | "allergen-peanuts" | "allergen-soybeans" | "allergen-milk" | "allergen-nuts" | "allergen-celery" | "allergen-mustard" | "allergen-sesame" | "allergen-sulphites" | "allergen-lupin" | "allergen-molluscs" | null>;
+    readonly icon: _angular_core.InputSignal<"x" | "search" | "bold" | "link" | "filter" | "menu" | "table" | "copy" | "square" | "list" | "chart-column" | "chart-line" | "chart-bar" | "chart-area" | "chart-pie" | "chart-scatter" | "grid-3x3" | "activity" | "gauge" | "trending-up" | "trending-down" | "clipboard-list" | "credit-card" | "external-link" | "languages" | "megaphone" | "monitor" | "store" | "user-round" | "home" | "user-plus" | "user-check" | "hand" | "users" | "bike" | "building-2" | "package" | "package-plus" | "package-open" | "rotate-ccw" | "bar-chart-3" | "log-out" | "panel-left-close" | "panel-left-open" | "panel-left" | "calendar" | "chevron-right" | "chevron-left" | "chevron-down" | "chevron-up" | "plus" | "minus" | "chevrons-left" | "chevrons-right" | "check" | "alert-circle" | "info" | "type" | "tag" | "ticket" | "square-check" | "circle-dot" | "circle-user" | "layout-grid" | "panels-top-left" | "panel-top" | "rows-3" | "book-open" | "palette" | "bell" | "phone" | "settings" | "align-left" | "toggle-left" | "arrow-up" | "arrow-down" | "chevrons-up-down" | "chevrons-up" | "chevrons-down" | "star" | "message-square" | "qr-code" | "eye" | "eye-off" | "user" | "check-circle" | "arrows-clockwise" | "file-text" | "file-check" | "hash" | "map-pin" | "inbox" | "arrow-right" | "refresh-cw" | "loader-circle" | "locate-fixed" | "locate-off" | "bug" | "scroll-text" | "moon" | "sun" | "search-x" | "command" | "sparkles" | "triangle-alert" | "octagon-x" | "ban" | "ellipsis" | "ellipsis-vertical" | "grip-vertical" | "upload" | "image" | "image-off" | "utensils" | "zoom-in" | "zoom-out" | "trash-2" | "clock" | "pencil" | "circle-help" | "stock" | "allergen-cereals-gluten" | "allergen-crustaceans" | "allergen-eggs" | "allergen-fish" | "allergen-peanuts" | "allergen-soybeans" | "allergen-milk" | "allergen-nuts" | "allergen-celery" | "allergen-mustard" | "allergen-sesame" | "allergen-sulphites" | "allergen-lupin" | "allergen-molluscs" | "italic" | "underline" | "strikethrough" | "heading-2" | "heading-3" | "pilcrow" | "list-ordered" | "text-quote" | "unlink" | "undo-2" | "redo-2" | "remove-formatting" | null>;
     /** Shown under the value when there is no change to report. */
     readonly hint: _angular_core.InputSignal<string>;
     readonly size: _angular_core.InputSignal<SdsKpiSize>;
@@ -1253,5 +1317,5 @@ declare class SdsKpi {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<SdsKpi, "sds-kpi", never, { "label": { "alias": "label"; "required": true; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "valueFormat": { "alias": "valueFormat"; "required": false; "isSignal": true; }; "previous": { "alias": "previous"; "required": false; "isSignal": true; }; "delta": { "alias": "delta"; "required": false; "isSignal": true; }; "deltaMode": { "alias": "deltaMode"; "required": false; "isSignal": true; }; "deltaLabel": { "alias": "deltaLabel"; "required": false; "isSignal": true; }; "upIsGood": { "alias": "upIsGood"; "required": false; "isSignal": true; }; "trend": { "alias": "trend"; "required": false; "isSignal": true; }; "trendLabels": { "alias": "trendLabels"; "required": false; "isSignal": true; }; "trendVariant": { "alias": "trendVariant"; "required": false; "isSignal": true; }; "trendColor": { "alias": "trendColor"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "hint": { "alias": "hint"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "appearance": { "alias": "appearance"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "locale": { "alias": "locale"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
-export { SDS_DONUT_OTHER_KEY, SdsBarChart, SdsChartTooltip, SdsDonutChart, SdsHeatmap, SdsKpi, SdsLineChart, SdsScatterChart, SdsSparkline, SdsTreemap };
-export type { SdsAccessor, SdsBarOrientation, SdsBarSort, SdsChartAnnotation, SdsChartGrid, SdsChartLegend, SdsChartPointEvent, SdsChartReferenceBand, SdsChartReferenceLine, SdsChartScale, SdsChartSeries, SdsChartStack, SdsChartTone, SdsChartTooltipContext, SdsChartTooltipRow, SdsChartXType, SdsDonutLegendValue, SdsDonutSort, SdsDonutVariant, SdsHeatmapScheme, SdsKpiAppearance, SdsKpiDeltaMode, SdsKpiSize, SdsLineCurve, SdsLineMarkers, SdsNumberFormat, SdsSparklineVariant, SdsTreemapNode, SdsXFormat, SdsXValue };
+export { SDS_DONUT_OTHER_KEY, SdsBarChart, SdsChartLegendSwatch, SdsChartTooltip, SdsDonutChart, SdsHeatmap, SdsKpi, SdsLineChart, SdsScatterChart, SdsSparkline, SdsTreemap };
+export type { SdsAccessor, SdsBarOrientation, SdsBarSort, SdsChartAnnotation, SdsChartGrid, SdsChartLegend, SdsChartLegendEntry, SdsChartLegendSwatchContext, SdsChartPointEvent, SdsChartReferenceBand, SdsChartReferenceLine, SdsChartScale, SdsChartSeries, SdsChartStack, SdsChartTone, SdsChartTooltipContext, SdsChartTooltipRow, SdsChartXType, SdsDonutLegendValue, SdsDonutSort, SdsDonutVariant, SdsHeatmapScheme, SdsKpiAppearance, SdsKpiDeltaMode, SdsKpiSize, SdsLineCurve, SdsLineMarkers, SdsNumberFormat, SdsSparklineVariant, SdsTreemapNode, SdsXFormat, SdsXValue };