@besaitech/ng-design-system 0.0.71 → 0.0.73
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +32 -0
- package/charts/index.d.ts +1 -1
- package/fesm2022/besaitech-ng-design-system-rich-text.mjs +1559 -0
- package/fesm2022/besaitech-ng-design-system-rich-text.mjs.map +1 -0
- package/fesm2022/besaitech-ng-design-system.mjs +22 -0
- package/fesm2022/besaitech-ng-design-system.mjs.map +1 -1
- package/index.d.ts +38 -20
- package/package.json +10 -1
- package/rich-text/index.d.ts +363 -0
package/README.md
CHANGED
|
@@ -264,6 +264,38 @@ they fall back to the configured labels.
|
|
|
264
264
|
|
|
265
265
|
Custom tooltip body: `<ng-template sdsChartTooltip let-tip>…</ng-template>` inside any chart.
|
|
266
266
|
|
|
267
|
+
**Rich text** (Tiptap / ProseMirror) — a **secondary entry point**, `@besaitech/ng-design-system/rich-text`,
|
|
268
|
+
for the same reason as the charts: ProseMirror stays in the lazy chunk of the page that edits rich text.
|
|
269
|
+
|
|
270
|
+
```ts
|
|
271
|
+
import { SdsRichTextEditor, SDS_RICH_TEXT_LABELS } from '@besaitech/ng-design-system/rich-text';
|
|
272
|
+
```
|
|
273
|
+
|
|
274
|
+
| Component | Selector | Notes |
|
|
275
|
+
| --- | --- | --- |
|
|
276
|
+
| `SdsRichTextEditor` | `<sds-rich-text-editor>` | CVA over an HTML string (`''` when empty). `[tools]` (headings, bold, italic, underline, strike, lists, quote, link, table, 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)` |
|
|
277
|
+
| `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) |
|
|
278
|
+
| `SdsRichTextToolbarEnd` | `[sdsRichTextToolbarEnd]` | Marks content projected at the end of the toolbar (kept in `readonly`): a language switcher, "insert variable" buttons calling `editor.insertText(…)` |
|
|
279
|
+
|
|
280
|
+
The emitted HTML is clean by construction: no inline styles, nothing outside the enabled tools, and links
|
|
281
|
+
limited to http(s), mailto, tel, site-relative paths and anchors (`sdsSafeHref`) with
|
|
282
|
+
`rel="noopener noreferrer nofollow"` — still sanitise stored HTML when you display it. Tables are saved bare
|
|
283
|
+
(no `<colgroup>`, no inline widths). When loaded HTML holds content the tools cannot keep (`<img>`, `<iframe>`, a
|
|
284
|
+
table without the `table` tool…), a warning under the field names it before anyone edits — saving an edit would
|
|
285
|
+
drop it. ⌘/Ctrl+K opens the
|
|
286
|
+
link field and is not passed on to an app-wide ⌘K palette. Strings are English by default: translate them
|
|
287
|
+
per instance with `[labels]` (a `Partial<SdsRichTextLabels>`, follows a live language switch) or app-wide with
|
|
288
|
+
`{ provide: SDS_RICH_TEXT_LABELS, useValue: { bold: 'Gras', … } }`.
|
|
289
|
+
|
|
290
|
+
```html
|
|
291
|
+
<sds-rich-text-editor
|
|
292
|
+
label="Présentation"
|
|
293
|
+
[tools]="['heading2', 'bold', 'italic', 'bulletList', 'orderedList', 'link', 'undo', 'redo']"
|
|
294
|
+
[maxLength]="2000"
|
|
295
|
+
formControlName="description"
|
|
296
|
+
/>
|
|
297
|
+
```
|
|
298
|
+
|
|
267
299
|
## Theme & cross-app preferences
|
|
268
300
|
|
|
269
301
|
`SdsThemeService` holds the person's **mode** — `'system' | 'light' | 'dark'`, persisted to `localStorage`
|
package/charts/index.d.ts
CHANGED
|
@@ -1293,7 +1293,7 @@ declare class SdsKpi {
|
|
|
1293
1293
|
readonly trendLabels: _angular_core.InputSignal<readonly string[] | null>;
|
|
1294
1294
|
readonly trendVariant: _angular_core.InputSignal<SdsSparklineVariant>;
|
|
1295
1295
|
readonly trendColor: _angular_core.InputSignal<string | null>;
|
|
1296
|
-
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>;
|
|
1296
|
+
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" | "between-horizontal-end" | "between-vertical-end" | "grid-2x2-x" | null>;
|
|
1297
1297
|
/** Shown under the value when there is no change to report. */
|
|
1298
1298
|
readonly hint: _angular_core.InputSignal<string>;
|
|
1299
1299
|
readonly size: _angular_core.InputSignal<SdsKpiSize>;
|