@besaitech/ng-design-system 0.0.71 → 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

@@ -1293,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>;