@besaitech/ng-design-system 0.0.52 → 0.0.54
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 +11 -0
- package/fesm2022/besaitech-ng-design-system.mjs +4265 -297
- package/fesm2022/besaitech-ng-design-system.mjs.map +1 -1
- package/index.d.ts +1145 -80
- package/package.json +1 -1
package/index.d.ts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as _angular_core from '@angular/core';
|
|
2
|
-
import { OnDestroy, TemplateRef, WritableSignal, OnInit } from '@angular/core';
|
|
2
|
+
import { OnDestroy, ElementRef, TemplateRef, WritableSignal, OnInit } from '@angular/core';
|
|
3
3
|
import { SafeHtml } from '@angular/platform-browser';
|
|
4
4
|
import { ControlValueAccessor, Validator, AbstractControl, ValidationErrors } from '@angular/forms';
|
|
5
5
|
import * as _besaitech_ng_design_system from '@besaitech/ng-design-system';
|
|
@@ -94,6 +94,19 @@ declare const SDS_ICONS: {
|
|
|
94
94
|
readonly 'search-x': "<path d=\"m13.5 8.5-5 5\"/><path d=\"m8.5 8.5 5 5\"/><circle cx=\"11\" cy=\"11\" r=\"8\"/><path d=\"m21 21-4.3-4.3\"/>";
|
|
95
95
|
readonly command: "<path d=\"M15 6v12a3 3 0 1 0 3-3H6a3 3 0 1 0 3 3V6a3 3 0 1 0-3 3h12a3 3 0 1 0-3-3\"/>";
|
|
96
96
|
readonly sparkles: "<path d=\"M9.937 15.5A2 2 0 0 0 8.5 14.063l-6.135-1.582a.5.5 0 0 1 0-.962L8.5 9.936A2 2 0 0 0 9.937 8.5l1.582-6.135a.5.5 0 0 1 .963 0L14.063 8.5A2 2 0 0 0 15.5 9.937l6.135 1.581a.5.5 0 0 1 0 .964L15.5 14.063a2 2 0 0 0-1.437 1.437l-1.582 6.135a.5.5 0 0 1-.963 0z\"/><path d=\"M20 3v4\"/><path d=\"M22 5h-4\"/><path d=\"M4 17v2\"/><path d=\"M5 18H3\"/>";
|
|
97
|
+
readonly 'triangle-alert': "<path d=\"m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3\"/><path d=\"M12 9v4\"/><path d=\"M12 17h.01\"/>";
|
|
98
|
+
readonly 'octagon-x': "<path d=\"m15 9-6 6\"/><path d=\"M2.586 16.726A2 2 0 0 1 2 15.312V8.688a2 2 0 0 1 .586-1.414l4.688-4.688A2 2 0 0 1 8.688 2h6.624a2 2 0 0 1 1.414.586l4.688 4.688A2 2 0 0 1 22 8.688v6.624a2 2 0 0 1-.586 1.414l-4.688 4.688a2 2 0 0 1-1.414.586H8.688a2 2 0 0 1-1.414-.586z\"/><path d=\"m9 9 6 6\"/>";
|
|
99
|
+
readonly ban: "<circle cx=\"12\" cy=\"12\" r=\"10\"/><path d=\"m4.9 4.9 14.2 14.2\"/>";
|
|
100
|
+
readonly ellipsis: "<circle cx=\"12\" cy=\"12\" r=\"1\"/><circle cx=\"19\" cy=\"12\" r=\"1\"/><circle cx=\"5\" cy=\"12\" r=\"1\"/>";
|
|
101
|
+
readonly 'ellipsis-vertical': "<circle cx=\"12\" cy=\"12\" r=\"1\"/><circle cx=\"12\" cy=\"5\" r=\"1\"/><circle cx=\"12\" cy=\"19\" r=\"1\"/>";
|
|
102
|
+
readonly 'grip-vertical': "<circle cx=\"9\" cy=\"12\" r=\"1\"/><circle cx=\"9\" cy=\"5\" r=\"1\"/><circle cx=\"9\" cy=\"19\" r=\"1\"/><circle cx=\"15\" cy=\"12\" r=\"1\"/><circle cx=\"15\" cy=\"5\" r=\"1\"/><circle cx=\"15\" cy=\"19\" r=\"1\"/>";
|
|
103
|
+
readonly upload: "<path d=\"M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4\"/><polyline points=\"17 8 12 3 7 8\"/><line x1=\"12\" x2=\"12\" y1=\"3\" y2=\"15\"/>";
|
|
104
|
+
readonly image: "<rect width=\"18\" height=\"18\" x=\"3\" y=\"3\" rx=\"2\" ry=\"2\"/><circle cx=\"9\" cy=\"9\" r=\"2\"/><path d=\"m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21\"/>";
|
|
105
|
+
readonly 'zoom-in': "<circle cx=\"11\" cy=\"11\" r=\"8\"/><line x1=\"21\" x2=\"16.65\" y1=\"21\" y2=\"16.65\"/><line x1=\"11\" x2=\"11\" y1=\"8\" y2=\"14\"/><line x1=\"8\" x2=\"14\" y1=\"11\" y2=\"11\"/>";
|
|
106
|
+
readonly 'zoom-out': "<circle cx=\"11\" cy=\"11\" r=\"8\"/><line x1=\"21\" x2=\"16.65\" y1=\"21\" y2=\"16.65\"/><line x1=\"8\" x2=\"14\" y1=\"11\" y2=\"11\"/>";
|
|
107
|
+
readonly 'trash-2': "<path d=\"M3 6h18\"/><path d=\"M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6\"/><path d=\"M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2\"/><line x1=\"10\" x2=\"10\" y1=\"11\" y2=\"17\"/><line x1=\"14\" x2=\"14\" y1=\"11\" y2=\"17\"/>";
|
|
108
|
+
readonly clock: "<circle cx=\"12\" cy=\"12\" r=\"10\"/><polyline points=\"12 6 12 12 16 14\"/>";
|
|
109
|
+
readonly pencil: "<path d=\"M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z\"/><path d=\"m15 5 4 4\"/>";
|
|
97
110
|
readonly 'circle-help': "<circle cx=\"12\" cy=\"12\" r=\"10\"/><path d=\"M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3\"/><path d=\"M12 17h.01\"/>";
|
|
98
111
|
readonly stock: "<rect x=\"3\" y=\"13\" width=\"8\" height=\"8\" rx=\"1\"/><rect x=\"13\" y=\"13\" width=\"8\" height=\"8\" rx=\"1\"/><rect x=\"8\" y=\"3\" width=\"8\" height=\"8\" rx=\"1\"/><path d=\"M6 13v2.5h2V13\"/><path d=\"M16 13v2.5h2V13\"/><path d=\"M11 3v2.5h2V3\"/>";
|
|
99
112
|
readonly 'allergen-cereals-gluten': "<path d=\"M12 22V8\"/><path d=\"M12 8c-1.6-1.6-1.6-4.2 0-6 1.6 1.8 1.6 4.4 0 6z\"/><path d=\"M12 13c-2.6 0-4.6-1.6-5.2-4.2 2.6 0 4.6 1.6 5.2 4.2z\"/><path d=\"M12 13c2.6 0 4.6-1.6 5.2-4.2-2.6 0-4.6 1.6-5.2 4.2z\"/><path d=\"M12 18c-2.6 0-4.6-1.6-5.2-4.2 2.6 0 4.6 1.6 5.2 4.2z\"/><path d=\"M12 18c2.6 0 4.6-1.6 5.2-4.2-2.6 0-4.6 1.6-5.2 4.2z\"/>";
|
|
@@ -124,7 +137,7 @@ type SdsIconSize = 'sm' | 'md' | 'lg' | 'xl';
|
|
|
124
137
|
declare class SdsIcon {
|
|
125
138
|
private readonly sanitizer;
|
|
126
139
|
/** Icon identifier from the registry. */
|
|
127
|
-
readonly name: _angular_core.InputSignal<"chart-column" | "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" | "
|
|
140
|
+
readonly name: _angular_core.InputSignal<"menu" | "search" | "table" | "filter" | "image" | "chart-column" | "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" | "x" | "check" | "alert-circle" | "info" | "copy" | "type" | "tag" | "ticket" | "square" | "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" | "qr-code" | "eye" | "eye-off" | "user" | "check-circle" | "arrows-clockwise" | "file-text" | "hash" | "map-pin" | "inbox" | "arrow-right" | "refresh-cw" | "loader-circle" | "bug" | "scroll-text" | "moon" | "sun" | "search-x" | "command" | "sparkles" | "triangle-alert" | "octagon-x" | "ban" | "ellipsis" | "ellipsis-vertical" | "grip-vertical" | "upload" | "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">;
|
|
128
141
|
/** Square size: a pixel number, a numeric string, or a keyword (sm·md·lg·xl). */
|
|
129
142
|
readonly size: _angular_core.InputSignalWithTransform<number, string | number>;
|
|
130
143
|
/** Stroke width of the line icon. */
|
|
@@ -219,13 +232,12 @@ declare class SdsInput implements ControlValueAccessor {
|
|
|
219
232
|
/** Hard character cap on the native field; 0 means no limit. */
|
|
220
233
|
readonly maxLength: _angular_core.InputSignalWithTransform<number, unknown>;
|
|
221
234
|
/**
|
|
222
|
-
* Accessible name for the clear button.
|
|
223
|
-
*
|
|
224
|
-
* is its only name.
|
|
235
|
+
* Accessible name for the clear button. English default; an app serving more than one language MUST
|
|
236
|
+
* translate it — it is an icon-only control, so this string is its only name.
|
|
225
237
|
*/
|
|
226
238
|
readonly clearLabel: _angular_core.InputSignal<string>;
|
|
227
|
-
readonly leadingIcon: _angular_core.InputSignal<"chart-column" | "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" | "
|
|
228
|
-
readonly trailingIcon: _angular_core.InputSignal<"chart-column" | "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" | "
|
|
239
|
+
readonly leadingIcon: _angular_core.InputSignal<"menu" | "search" | "table" | "filter" | "image" | "chart-column" | "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" | "x" | "check" | "alert-circle" | "info" | "copy" | "type" | "tag" | "ticket" | "square" | "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" | "qr-code" | "eye" | "eye-off" | "user" | "check-circle" | "arrows-clockwise" | "file-text" | "hash" | "map-pin" | "inbox" | "arrow-right" | "refresh-cw" | "loader-circle" | "bug" | "scroll-text" | "moon" | "sun" | "search-x" | "command" | "sparkles" | "triangle-alert" | "octagon-x" | "ban" | "ellipsis" | "ellipsis-vertical" | "grip-vertical" | "upload" | "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>;
|
|
240
|
+
readonly trailingIcon: _angular_core.InputSignal<"menu" | "search" | "table" | "filter" | "image" | "chart-column" | "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" | "x" | "check" | "alert-circle" | "info" | "copy" | "type" | "tag" | "ticket" | "square" | "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" | "qr-code" | "eye" | "eye-off" | "user" | "check-circle" | "arrows-clockwise" | "file-text" | "hash" | "map-pin" | "inbox" | "arrow-right" | "refresh-cw" | "loader-circle" | "bug" | "scroll-text" | "moon" | "sun" | "search-x" | "command" | "sparkles" | "triangle-alert" | "octagon-x" | "ban" | "ellipsis" | "ellipsis-vertical" | "grip-vertical" | "upload" | "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>;
|
|
229
241
|
/**
|
|
230
242
|
* A CLICKABLE trailing icon, for the affordances that belong to the field itself — password reveal
|
|
231
243
|
* above all. Distinct from {@link trailingIcon}, which is decorative and explicitly
|
|
@@ -235,7 +247,7 @@ declare class SdsInput implements ControlValueAccessor {
|
|
|
235
247
|
* Always pair it with {@link trailingActionLabel} — an icon-only button with no accessible name is
|
|
236
248
|
* unusable by a screen reader. For a toggle, also bind {@link trailingActionPressed}.
|
|
237
249
|
*/
|
|
238
|
-
readonly trailingAction: _angular_core.InputSignal<"chart-column" | "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" | "
|
|
250
|
+
readonly trailingAction: _angular_core.InputSignal<"menu" | "search" | "table" | "filter" | "image" | "chart-column" | "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" | "x" | "check" | "alert-circle" | "info" | "copy" | "type" | "tag" | "ticket" | "square" | "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" | "qr-code" | "eye" | "eye-off" | "user" | "check-circle" | "arrows-clockwise" | "file-text" | "hash" | "map-pin" | "inbox" | "arrow-right" | "refresh-cw" | "loader-circle" | "bug" | "scroll-text" | "moon" | "sun" | "search-x" | "command" | "sparkles" | "triangle-alert" | "octagon-x" | "ban" | "ellipsis" | "ellipsis-vertical" | "grip-vertical" | "upload" | "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>;
|
|
239
251
|
/** Accessible name for {@link trailingAction}. Translate it in the consuming app. */
|
|
240
252
|
readonly trailingActionLabel: _angular_core.InputSignal<string>;
|
|
241
253
|
/** `aria-pressed` for a toggling action (e.g. show/hide password). Null renders no attribute. */
|
|
@@ -293,6 +305,11 @@ type SdsInputNumberButtonLayout = 'stacked' | 'horizontal' | 'vertical';
|
|
|
293
305
|
* The field formats **live as you type**: the currency symbol, grouping separators and prefix/suffix
|
|
294
306
|
* stay visible on every keystroke, and the caret is kept where it belongs. The value is clamped to
|
|
295
307
|
* {@link min}/{@link max} on blur and on every spinner step; ArrowUp / ArrowDown also step it.
|
|
308
|
+
*
|
|
309
|
+
* In a locale whose decimal separator is a comma (fr-BE, nl-BE, de-DE…) a typed "." — the key most
|
|
310
|
+
* keyboards and numpads offer — is taken as the decimal separator: "12.50" becomes "12,50". Pasted
|
|
311
|
+
* text works the same way, except that a "." followed by exactly three digits in a locale that groups
|
|
312
|
+
* with "." ("1.234" in nl-BE) stays a thousands separator.
|
|
296
313
|
*/
|
|
297
314
|
declare class SdsInputNumber implements ControlValueAccessor {
|
|
298
315
|
readonly inputId: string;
|
|
@@ -303,6 +320,13 @@ declare class SdsInputNumber implements ControlValueAccessor {
|
|
|
303
320
|
readonly placeholder: _angular_core.InputSignal<string>;
|
|
304
321
|
readonly hint: _angular_core.InputSignal<string>;
|
|
305
322
|
readonly error: _angular_core.InputSignal<string>;
|
|
323
|
+
/**
|
|
324
|
+
* Mark the field invalid (danger frame + `aria-invalid`) without showing an [error] message — for a
|
|
325
|
+
* host that renders the message itself, e.g. an editable table cell.
|
|
326
|
+
*/
|
|
327
|
+
readonly invalid: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
328
|
+
/** Extra id(s) for the field's `aria-describedby`, added to its own hint/error message id. */
|
|
329
|
+
readonly ariaDescribedby: _angular_core.InputSignal<string>;
|
|
306
330
|
readonly size: _angular_core.InputSignal<SdsInputNumberSize>;
|
|
307
331
|
/** `filled` is a borderless field on a muted ground; `default` is the bordered white field. */
|
|
308
332
|
readonly appearance: _angular_core.InputSignal<SdsInputNumberAppearance>;
|
|
@@ -330,15 +354,15 @@ declare class SdsInputNumber implements ControlValueAccessor {
|
|
|
330
354
|
readonly showButtons: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
331
355
|
readonly buttonLayout: _angular_core.InputSignal<SdsInputNumberButtonLayout>;
|
|
332
356
|
/** Override the increment button icon (defaults: chevron-up when stacked, plus otherwise). */
|
|
333
|
-
readonly incrementIcon: _angular_core.InputSignal<"chart-column" | "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" | "
|
|
357
|
+
readonly incrementIcon: _angular_core.InputSignal<"menu" | "search" | "table" | "filter" | "image" | "chart-column" | "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" | "x" | "check" | "alert-circle" | "info" | "copy" | "type" | "tag" | "ticket" | "square" | "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" | "qr-code" | "eye" | "eye-off" | "user" | "check-circle" | "arrows-clockwise" | "file-text" | "hash" | "map-pin" | "inbox" | "arrow-right" | "refresh-cw" | "loader-circle" | "bug" | "scroll-text" | "moon" | "sun" | "search-x" | "command" | "sparkles" | "triangle-alert" | "octagon-x" | "ban" | "ellipsis" | "ellipsis-vertical" | "grip-vertical" | "upload" | "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>;
|
|
334
358
|
/** Override the decrement button icon (defaults: chevron-down when stacked, minus otherwise). */
|
|
335
|
-
readonly decrementIcon: _angular_core.InputSignal<"chart-column" | "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" | "
|
|
359
|
+
readonly decrementIcon: _angular_core.InputSignal<"menu" | "search" | "table" | "filter" | "image" | "chart-column" | "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" | "x" | "check" | "alert-circle" | "info" | "copy" | "type" | "tag" | "ticket" | "square" | "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" | "qr-code" | "eye" | "eye-off" | "user" | "check-circle" | "arrows-clockwise" | "file-text" | "hash" | "map-pin" | "inbox" | "arrow-right" | "refresh-cw" | "loader-circle" | "bug" | "scroll-text" | "moon" | "sun" | "search-x" | "command" | "sparkles" | "triangle-alert" | "octagon-x" | "ban" | "ellipsis" | "ellipsis-vertical" | "grip-vertical" | "upload" | "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>;
|
|
336
360
|
/** Allow an empty (null) value. When false, blurring an empty field falls back to {@link min} or 0. */
|
|
337
361
|
readonly allowEmpty: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
338
362
|
readonly clearable: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
339
363
|
/**
|
|
340
|
-
* Accessible names for the icon-only controls.
|
|
341
|
-
*
|
|
364
|
+
* Accessible names for the icon-only controls. English defaults; translate them in a
|
|
365
|
+
* multi-language app.
|
|
342
366
|
*/
|
|
343
367
|
readonly clearLabel: _angular_core.InputSignal<string>;
|
|
344
368
|
readonly incrementLabel: _angular_core.InputSignal<string>;
|
|
@@ -349,8 +373,8 @@ declare class SdsInputNumber implements ControlValueAccessor {
|
|
|
349
373
|
protected readonly isDisabled: _angular_core.Signal<boolean>;
|
|
350
374
|
protected readonly describedBy: _angular_core.Signal<string | null>;
|
|
351
375
|
protected readonly clearVisible: _angular_core.Signal<boolean>;
|
|
352
|
-
protected readonly incrementIconName: _angular_core.Signal<"chart-column" | "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" | "
|
|
353
|
-
protected readonly decrementIconName: _angular_core.Signal<"chart-column" | "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" | "
|
|
376
|
+
protected readonly incrementIconName: _angular_core.Signal<"menu" | "search" | "table" | "filter" | "image" | "chart-column" | "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" | "x" | "check" | "alert-circle" | "info" | "copy" | "type" | "tag" | "ticket" | "square" | "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" | "qr-code" | "eye" | "eye-off" | "user" | "check-circle" | "arrows-clockwise" | "file-text" | "hash" | "map-pin" | "inbox" | "arrow-right" | "refresh-cw" | "loader-circle" | "bug" | "scroll-text" | "moon" | "sun" | "search-x" | "command" | "sparkles" | "triangle-alert" | "octagon-x" | "ban" | "ellipsis" | "ellipsis-vertical" | "grip-vertical" | "upload" | "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">;
|
|
377
|
+
protected readonly decrementIconName: _angular_core.Signal<"menu" | "search" | "table" | "filter" | "image" | "chart-column" | "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" | "x" | "check" | "alert-circle" | "info" | "copy" | "type" | "tag" | "ticket" | "square" | "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" | "qr-code" | "eye" | "eye-off" | "user" | "check-circle" | "arrows-clockwise" | "file-text" | "hash" | "map-pin" | "inbox" | "arrow-right" | "refresh-cw" | "loader-circle" | "bug" | "scroll-text" | "moon" | "sun" | "search-x" | "command" | "sparkles" | "triangle-alert" | "octagon-x" | "ban" | "ellipsis" | "ellipsis-vertical" | "grip-vertical" | "upload" | "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">;
|
|
354
378
|
protected readonly canIncrement: _angular_core.Signal<boolean>;
|
|
355
379
|
protected readonly canDecrement: _angular_core.Signal<boolean>;
|
|
356
380
|
/** Locale grouping/decimal separators, derived from Intl so parsing matches formatting. */
|
|
@@ -367,6 +391,14 @@ declare class SdsInputNumber implements ControlValueAccessor {
|
|
|
367
391
|
protected readonly edgeButtonClasses: _angular_core.Signal<string>;
|
|
368
392
|
protected readonly stackedButtonClasses: _angular_core.Signal<string>;
|
|
369
393
|
constructor();
|
|
394
|
+
/**
|
|
395
|
+
* Focus the field, painting the current value into it first (the live-format effect stands down while
|
|
396
|
+
* the field is focused, so a value written just before focusing would otherwise not show). With
|
|
397
|
+
* `select`, the text is selected — handy for an in-cell editor.
|
|
398
|
+
*/
|
|
399
|
+
focus(options?: {
|
|
400
|
+
select?: boolean;
|
|
401
|
+
}): void;
|
|
370
402
|
private isActive;
|
|
371
403
|
/** Paint the committed value into the field imperatively (used by spin/clear/blur). */
|
|
372
404
|
private paintCommitted;
|
|
@@ -379,6 +411,17 @@ declare class SdsInputNumber implements ControlValueAccessor {
|
|
|
379
411
|
*/
|
|
380
412
|
private formatLive;
|
|
381
413
|
private toNumber;
|
|
414
|
+
/**
|
|
415
|
+
* In a locale whose decimal separator is not "." (fr-BE, nl-BE, de-DE…), turn the "." people type
|
|
416
|
+
* for a decimal point into the locale separator before parsing, so "12.50" reads as 12.5.
|
|
417
|
+
* - `typed` is the text of the keystroke: a "." just typed sits right before the caret and is
|
|
418
|
+
* always the decimal point (even in a locale that groups with ".", whose group marks come from
|
|
419
|
+
* the formatter, never from the keyboard).
|
|
420
|
+
* - Otherwise (paste, autofill, programmatic input) and only when the text holds no locale decimal
|
|
421
|
+
* separator, the last "." is the decimal point — unless the locale groups with "." and exactly
|
|
422
|
+
* three digits follow it ("1.234" in nl-BE is one thousand two hundred thirty-four).
|
|
423
|
+
*/
|
|
424
|
+
private localizeDecimalPoint;
|
|
382
425
|
/** Pull the sign / integer / fraction fragments out of a formatted, partially-typed string. */
|
|
383
426
|
private parseInput;
|
|
384
427
|
/** Characters that "carry meaning" for caret placement (digits, minus, the decimal separator). */
|
|
@@ -401,7 +444,7 @@ declare class SdsInputNumber implements ControlValueAccessor {
|
|
|
401
444
|
registerOnTouched(fn: () => void): void;
|
|
402
445
|
setDisabledState(isDisabled: boolean): void;
|
|
403
446
|
static ɵfac: _angular_core.ɵɵFactoryDeclaration<SdsInputNumber, never>;
|
|
404
|
-
static ɵcmp: _angular_core.ɵɵComponentDeclaration<SdsInputNumber, "sds-input-number", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "hint": { "alias": "hint"; "required": false; "isSignal": true; }; "error": { "alias": "error"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "appearance": { "alias": "appearance"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "mode": { "alias": "mode"; "required": false; "isSignal": true; }; "locale": { "alias": "locale"; "required": false; "isSignal": true; }; "currency": { "alias": "currency"; "required": false; "isSignal": true; }; "currencyDisplay": { "alias": "currencyDisplay"; "required": false; "isSignal": true; }; "useGrouping": { "alias": "useGrouping"; "required": false; "isSignal": true; }; "minFractionDigits": { "alias": "minFractionDigits"; "required": false; "isSignal": true; }; "maxFractionDigits": { "alias": "maxFractionDigits"; "required": false; "isSignal": true; }; "prefix": { "alias": "prefix"; "required": false; "isSignal": true; }; "suffix": { "alias": "suffix"; "required": false; "isSignal": true; }; "min": { "alias": "min"; "required": false; "isSignal": true; }; "max": { "alias": "max"; "required": false; "isSignal": true; }; "step": { "alias": "step"; "required": false; "isSignal": true; }; "showButtons": { "alias": "showButtons"; "required": false; "isSignal": true; }; "buttonLayout": { "alias": "buttonLayout"; "required": false; "isSignal": true; }; "incrementIcon": { "alias": "incrementIcon"; "required": false; "isSignal": true; }; "decrementIcon": { "alias": "decrementIcon"; "required": false; "isSignal": true; }; "allowEmpty": { "alias": "allowEmpty"; "required": false; "isSignal": true; }; "clearable": { "alias": "clearable"; "required": false; "isSignal": true; }; "clearLabel": { "alias": "clearLabel"; "required": false; "isSignal": true; }; "incrementLabel": { "alias": "incrementLabel"; "required": false; "isSignal": true; }; "decrementLabel": { "alias": "decrementLabel"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
|
|
447
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<SdsInputNumber, "sds-input-number", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "hint": { "alias": "hint"; "required": false; "isSignal": true; }; "error": { "alias": "error"; "required": false; "isSignal": true; }; "invalid": { "alias": "invalid"; "required": false; "isSignal": true; }; "ariaDescribedby": { "alias": "ariaDescribedby"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "appearance": { "alias": "appearance"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "mode": { "alias": "mode"; "required": false; "isSignal": true; }; "locale": { "alias": "locale"; "required": false; "isSignal": true; }; "currency": { "alias": "currency"; "required": false; "isSignal": true; }; "currencyDisplay": { "alias": "currencyDisplay"; "required": false; "isSignal": true; }; "useGrouping": { "alias": "useGrouping"; "required": false; "isSignal": true; }; "minFractionDigits": { "alias": "minFractionDigits"; "required": false; "isSignal": true; }; "maxFractionDigits": { "alias": "maxFractionDigits"; "required": false; "isSignal": true; }; "prefix": { "alias": "prefix"; "required": false; "isSignal": true; }; "suffix": { "alias": "suffix"; "required": false; "isSignal": true; }; "min": { "alias": "min"; "required": false; "isSignal": true; }; "max": { "alias": "max"; "required": false; "isSignal": true; }; "step": { "alias": "step"; "required": false; "isSignal": true; }; "showButtons": { "alias": "showButtons"; "required": false; "isSignal": true; }; "buttonLayout": { "alias": "buttonLayout"; "required": false; "isSignal": true; }; "incrementIcon": { "alias": "incrementIcon"; "required": false; "isSignal": true; }; "decrementIcon": { "alias": "decrementIcon"; "required": false; "isSignal": true; }; "allowEmpty": { "alias": "allowEmpty"; "required": false; "isSignal": true; }; "clearable": { "alias": "clearable"; "required": false; "isSignal": true; }; "clearLabel": { "alias": "clearLabel"; "required": false; "isSignal": true; }; "incrementLabel": { "alias": "incrementLabel"; "required": false; "isSignal": true; }; "decrementLabel": { "alias": "decrementLabel"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
|
|
405
448
|
}
|
|
406
449
|
|
|
407
450
|
/** A translatable string held per language code — e.g. `{ fr: 'Titre', nl: 'Titel' }`. */
|
|
@@ -435,8 +478,8 @@ declare class SdsLocalizedInput implements ControlValueAccessor {
|
|
|
435
478
|
readonly disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
436
479
|
/**
|
|
437
480
|
* Accessible name for the in-field language switcher, and the "no translation yet" title suffix on each
|
|
438
|
-
* language button.
|
|
439
|
-
*
|
|
481
|
+
* language button. English defaults; translate them in a multi-language app (the buttons are
|
|
482
|
+
* letter-only, so the title carries their meaning).
|
|
440
483
|
*/
|
|
441
484
|
readonly languageSwitcherLabel: _angular_core.InputSignal<string>;
|
|
442
485
|
readonly untranslatedLabel: _angular_core.InputSignal<string>;
|
|
@@ -492,8 +535,8 @@ declare class SdsOtpInput implements ControlValueAccessor {
|
|
|
492
535
|
readonly autoFocus: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
493
536
|
/**
|
|
494
537
|
* Accessible name for an individual box, suffixed with its 1-based position ("Digit 1", "Digit
|
|
495
|
-
* 2", …).
|
|
496
|
-
*
|
|
538
|
+
* 2", …). English default; translate it in an app serving more than one language, since each box
|
|
539
|
+
* is an icon-less control whose only name this is.
|
|
497
540
|
*/
|
|
498
541
|
readonly cellLabel: _angular_core.InputSignal<string>;
|
|
499
542
|
/** Emitted with the full value the moment the last box is filled. */
|
|
@@ -566,6 +609,13 @@ declare class SdsTextarea implements ControlValueAccessor {
|
|
|
566
609
|
readonly maxLength: _angular_core.InputSignalWithTransform<number, unknown>;
|
|
567
610
|
/** Show a character counter row. */
|
|
568
611
|
readonly showCount: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
612
|
+
/**
|
|
613
|
+
* Spoken text of the counter when {@link maxLength} is set; tokens `{count}` and `{max}`. English
|
|
614
|
+
* default — translate it in a multi-language app.
|
|
615
|
+
*/
|
|
616
|
+
readonly countLimitLabel: _angular_core.InputSignal<string>;
|
|
617
|
+
/** Spoken text of the counter without a {@link maxLength}; token `{count}`. */
|
|
618
|
+
readonly countLabelTemplate: _angular_core.InputSignal<string>;
|
|
569
619
|
readonly resize: _angular_core.InputSignal<SdsTextareaResize>;
|
|
570
620
|
/** Current value (driven by CVA + user input). */
|
|
571
621
|
protected readonly value: _angular_core.WritableSignal<string>;
|
|
@@ -587,7 +637,7 @@ declare class SdsTextarea implements ControlValueAccessor {
|
|
|
587
637
|
protected onInput(event: Event): void;
|
|
588
638
|
private resizeToContent;
|
|
589
639
|
static ɵfac: _angular_core.ɵɵFactoryDeclaration<SdsTextarea, never>;
|
|
590
|
-
static ɵcmp: _angular_core.ɵɵComponentDeclaration<SdsTextarea, "sds-textarea", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "hint": { "alias": "hint"; "required": false; "isSignal": true; }; "error": { "alias": "error"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "appearance": { "alias": "appearance"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "rows": { "alias": "rows"; "required": false; "isSignal": true; }; "autoResize": { "alias": "autoResize"; "required": false; "isSignal": true; }; "maxLength": { "alias": "maxLength"; "required": false; "isSignal": true; }; "showCount": { "alias": "showCount"; "required": false; "isSignal": true; }; "resize": { "alias": "resize"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
|
|
640
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<SdsTextarea, "sds-textarea", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "hint": { "alias": "hint"; "required": false; "isSignal": true; }; "error": { "alias": "error"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "appearance": { "alias": "appearance"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "rows": { "alias": "rows"; "required": false; "isSignal": true; }; "autoResize": { "alias": "autoResize"; "required": false; "isSignal": true; }; "maxLength": { "alias": "maxLength"; "required": false; "isSignal": true; }; "showCount": { "alias": "showCount"; "required": false; "isSignal": true; }; "countLimitLabel": { "alias": "countLimitLabel"; "required": false; "isSignal": true; }; "countLabelTemplate": { "alias": "countLabelTemplate"; "required": false; "isSignal": true; }; "resize": { "alias": "resize"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
|
|
591
641
|
}
|
|
592
642
|
|
|
593
643
|
type SdsToggleSwitchSize = 'sm' | 'md' | 'lg';
|
|
@@ -620,9 +670,9 @@ declare class SdsToggleSwitch implements ControlValueAccessor {
|
|
|
620
670
|
/** Value emitted/stored when the switch is off. */
|
|
621
671
|
readonly falseValue: _angular_core.InputSignal<unknown>;
|
|
622
672
|
/** Icon shown on the knob when checked. */
|
|
623
|
-
readonly onIcon: _angular_core.InputSignal<"chart-column" | "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" | "
|
|
673
|
+
readonly onIcon: _angular_core.InputSignal<"menu" | "search" | "table" | "filter" | "image" | "chart-column" | "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" | "x" | "check" | "alert-circle" | "info" | "copy" | "type" | "tag" | "ticket" | "square" | "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" | "qr-code" | "eye" | "eye-off" | "user" | "check-circle" | "arrows-clockwise" | "file-text" | "hash" | "map-pin" | "inbox" | "arrow-right" | "refresh-cw" | "loader-circle" | "bug" | "scroll-text" | "moon" | "sun" | "search-x" | "command" | "sparkles" | "triangle-alert" | "octagon-x" | "ban" | "ellipsis" | "ellipsis-vertical" | "grip-vertical" | "upload" | "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>;
|
|
624
674
|
/** Icon shown on the knob when unchecked. */
|
|
625
|
-
readonly offIcon: _angular_core.InputSignal<"chart-column" | "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" | "
|
|
675
|
+
readonly offIcon: _angular_core.InputSignal<"menu" | "search" | "table" | "filter" | "image" | "chart-column" | "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" | "x" | "check" | "alert-circle" | "info" | "copy" | "type" | "tag" | "ticket" | "square" | "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" | "qr-code" | "eye" | "eye-off" | "user" | "check-circle" | "arrows-clockwise" | "file-text" | "hash" | "map-pin" | "inbox" | "arrow-right" | "refresh-cw" | "loader-circle" | "bug" | "scroll-text" | "moon" | "sun" | "search-x" | "command" | "sparkles" | "triangle-alert" | "octagon-x" | "ban" | "ellipsis" | "ellipsis-vertical" | "grip-vertical" | "upload" | "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>;
|
|
626
676
|
readonly hint: _angular_core.InputSignal<string>;
|
|
627
677
|
readonly error: _angular_core.InputSignal<string>;
|
|
628
678
|
/**
|
|
@@ -668,8 +718,11 @@ type SdsCheckboxSize = 'sm' | 'md';
|
|
|
668
718
|
* of its own, so it can sit inside the consumer's `<label>` (a whole clickable
|
|
669
719
|
* row), whose text then names it.
|
|
670
720
|
*
|
|
721
|
+
* Set [indeterminate] for a "some but not all" state (e.g. a select-all box over a partial
|
|
722
|
+
* selection): the box shows a bar and reads as "mixed"; a click checks it.
|
|
723
|
+
*
|
|
671
724
|
* @example
|
|
672
|
-
* <sds-checkbox label="
|
|
725
|
+
* <sds-checkbox label="Auto-merge" [(ngModel)]="autoMerge" />
|
|
673
726
|
*/
|
|
674
727
|
declare class SdsCheckbox implements ControlValueAccessor {
|
|
675
728
|
readonly id: string;
|
|
@@ -678,7 +731,13 @@ declare class SdsCheckbox implements ControlValueAccessor {
|
|
|
678
731
|
readonly ariaLabel: _angular_core.InputSignal<string>;
|
|
679
732
|
readonly size: _angular_core.InputSignal<SdsCheckboxSize>;
|
|
680
733
|
readonly disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
734
|
+
/**
|
|
735
|
+
* "Some but not all": shows a bar and is announced as mixed while the value is false. Clicking
|
|
736
|
+
* checks it (the native behaviour); the host then decides the next [indeterminate].
|
|
737
|
+
*/
|
|
738
|
+
readonly indeterminate: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
681
739
|
protected readonly checked: _angular_core.WritableSignal<boolean>;
|
|
740
|
+
protected readonly mixed: _angular_core.Signal<boolean>;
|
|
682
741
|
private readonly cvaDisabled;
|
|
683
742
|
protected readonly isDisabled: _angular_core.Signal<boolean>;
|
|
684
743
|
protected readonly iconSize: _angular_core.Signal<11 | 13>;
|
|
@@ -692,7 +751,7 @@ declare class SdsCheckbox implements ControlValueAccessor {
|
|
|
692
751
|
setDisabledState(isDisabled: boolean): void;
|
|
693
752
|
protected onInput(event: Event): void;
|
|
694
753
|
static ɵfac: _angular_core.ɵɵFactoryDeclaration<SdsCheckbox, never>;
|
|
695
|
-
static ɵcmp: _angular_core.ɵɵComponentDeclaration<SdsCheckbox, "sds-checkbox", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
|
|
754
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<SdsCheckbox, "sds-checkbox", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "indeterminate": { "alias": "indeterminate"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
|
|
696
755
|
}
|
|
697
756
|
|
|
698
757
|
type SdsRadioSize = 'sm' | 'md';
|
|
@@ -835,7 +894,7 @@ declare class SdsAllergenIcon {
|
|
|
835
894
|
readonly size: _angular_core.InputSignal<string | number>;
|
|
836
895
|
/** Stroke width of the line icon. */
|
|
837
896
|
readonly strokeWidth: _angular_core.InputSignal<number>;
|
|
838
|
-
protected readonly iconName: _angular_core.Signal<"chart-column" | "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" | "
|
|
897
|
+
protected readonly iconName: _angular_core.Signal<"menu" | "search" | "table" | "filter" | "image" | "chart-column" | "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" | "x" | "check" | "alert-circle" | "info" | "copy" | "type" | "tag" | "ticket" | "square" | "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" | "qr-code" | "eye" | "eye-off" | "user" | "check-circle" | "arrows-clockwise" | "file-text" | "hash" | "map-pin" | "inbox" | "arrow-right" | "refresh-cw" | "loader-circle" | "bug" | "scroll-text" | "moon" | "sun" | "search-x" | "command" | "sparkles" | "triangle-alert" | "octagon-x" | "ban" | "ellipsis" | "ellipsis-vertical" | "grip-vertical" | "upload" | "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>;
|
|
839
898
|
constructor();
|
|
840
899
|
static ɵfac: _angular_core.ɵɵFactoryDeclaration<SdsAllergenIcon, never>;
|
|
841
900
|
static ɵcmp: _angular_core.ɵɵComponentDeclaration<SdsAllergenIcon, "sds-allergen-icon", never, { "allergen": { "alias": "allergen"; "required": true; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "showTitle": { "alias": "showTitle"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "strokeWidth": { "alias": "strokeWidth"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
|
|
@@ -869,7 +928,7 @@ declare class SdsTriStateChip {
|
|
|
869
928
|
/** Visible name (e.g. the allergen). Required — the chip has no other accessible name. */
|
|
870
929
|
readonly label: _angular_core.InputSignal<string>;
|
|
871
930
|
/** Optional leading registry icon, e.g. an `allergen-*` pictogram. */
|
|
872
|
-
readonly icon: _angular_core.InputSignal<"chart-column" | "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" | "
|
|
931
|
+
readonly icon: _angular_core.InputSignal<"menu" | "search" | "table" | "filter" | "image" | "chart-column" | "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" | "x" | "check" | "alert-circle" | "info" | "copy" | "type" | "tag" | "ticket" | "square" | "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" | "qr-code" | "eye" | "eye-off" | "user" | "check-circle" | "arrows-clockwise" | "file-text" | "hash" | "map-pin" | "inbox" | "arrow-right" | "refresh-cw" | "loader-circle" | "bug" | "scroll-text" | "moon" | "sun" | "search-x" | "command" | "sparkles" | "triangle-alert" | "octagon-x" | "ban" | "ellipsis" | "ellipsis-vertical" | "grip-vertical" | "upload" | "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>;
|
|
873
932
|
readonly size: _angular_core.InputSignal<SdsTriStateChipSize>;
|
|
874
933
|
readonly disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
875
934
|
/** Show the state as a small visible caption under the label. */
|
|
@@ -899,6 +958,765 @@ declare class SdsTriStateChip {
|
|
|
899
958
|
static ɵcmp: _angular_core.ɵɵComponentDeclaration<SdsTriStateChip, "sds-tri-state-chip", never, { "value": { "alias": "value"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": true; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "showState": { "alias": "showState"; "required": false; "isSignal": true; }; "noneLabel": { "alias": "noneLabel"; "required": false; "isSignal": true; }; "containsLabel": { "alias": "containsLabel"; "required": false; "isSignal": true; }; "mayContainLabel": { "alias": "mayContainLabel"; "required": false; "isSignal": true; }; "hint": { "alias": "hint"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; }, never, never, true, never>;
|
|
900
959
|
}
|
|
901
960
|
|
|
961
|
+
/** One segment. A bare string/number option is used as both value and label. */
|
|
962
|
+
interface SdsSegmentedOption<T = unknown> {
|
|
963
|
+
value: T;
|
|
964
|
+
label: string;
|
|
965
|
+
icon?: SdsIconName;
|
|
966
|
+
disabled?: boolean;
|
|
967
|
+
}
|
|
968
|
+
type SdsSegmentedSize = 'sm' | 'md';
|
|
969
|
+
interface NormSegment {
|
|
970
|
+
value: unknown;
|
|
971
|
+
label: string;
|
|
972
|
+
icon: SdsIconName | null;
|
|
973
|
+
disabled: boolean;
|
|
974
|
+
}
|
|
975
|
+
/**
|
|
976
|
+
* Segmented control: a small set of mutually exclusive options shown side by side (e.g. "Pick exactly /
|
|
977
|
+
* at least / up to"). Radio-group semantics: `role="radiogroup"` with `role="radio"` segments, one tab
|
|
978
|
+
* stop, and the arrow keys (with Home/End) move AND select, like native radios. Disabled segments are
|
|
979
|
+
* skipped.
|
|
980
|
+
*
|
|
981
|
+
* The value is a two-way `model` — bind `[(value)]`. Give the group a name with [ariaLabel] (or
|
|
982
|
+
* [ariaLabelledby]); with [iconOnly] each segment keeps its label as its accessible name.
|
|
983
|
+
*
|
|
984
|
+
* @example
|
|
985
|
+
* <sds-segmented ariaLabel="Rule" [options]="[{ value: 'exactly', label: 'Exactly' }, { value: 'upTo', label: 'Up to' }]"
|
|
986
|
+
* [(value)]="rule" />
|
|
987
|
+
*/
|
|
988
|
+
declare class SdsSegmented {
|
|
989
|
+
private readonly host;
|
|
990
|
+
private readonly baseId;
|
|
991
|
+
/** Options: `{ value, label, icon?, disabled? }` objects, or bare strings/numbers. */
|
|
992
|
+
readonly options: _angular_core.InputSignal<readonly (string | number | SdsSegmentedOption<unknown>)[]>;
|
|
993
|
+
/** Selected value. Two-way: `[(value)]`. */
|
|
994
|
+
readonly value: _angular_core.ModelSignal<unknown>;
|
|
995
|
+
readonly size: _angular_core.InputSignal<SdsSegmentedSize>;
|
|
996
|
+
/** Accessible name of the group. */
|
|
997
|
+
readonly ariaLabel: _angular_core.InputSignal<string>;
|
|
998
|
+
/** Id of an element that names the group (alternative to [ariaLabel]). */
|
|
999
|
+
readonly ariaLabelledby: _angular_core.InputSignal<string>;
|
|
1000
|
+
readonly disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
1001
|
+
/** Stretch to the container width, segments sharing it equally. */
|
|
1002
|
+
readonly fullWidth: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
1003
|
+
/** Show icons only; labels stay as accessible names and tooltips. */
|
|
1004
|
+
readonly iconOnly: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
1005
|
+
protected readonly segments: _angular_core.Signal<NormSegment[]>;
|
|
1006
|
+
private readonly selectedIndex;
|
|
1007
|
+
/** Roving tab stop: the selected segment, else the first enabled one. */
|
|
1008
|
+
protected readonly tabStop: _angular_core.Signal<number>;
|
|
1009
|
+
protected isSelected(seg: NormSegment): boolean;
|
|
1010
|
+
protected segmentId(i: number): string;
|
|
1011
|
+
protected segmentClass(seg: NormSegment): string;
|
|
1012
|
+
protected choose(i: number): void;
|
|
1013
|
+
protected onKeydown(event: KeyboardEvent): void;
|
|
1014
|
+
private step;
|
|
1015
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<SdsSegmented, never>;
|
|
1016
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<SdsSegmented, "sds-segmented", never, { "options": { "alias": "options"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "ariaLabelledby": { "alias": "ariaLabelledby"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "fullWidth": { "alias": "fullWidth"; "required": false; "isSignal": true; }; "iconOnly": { "alias": "iconOnly"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; }, never, never, true, never>;
|
|
1017
|
+
}
|
|
1018
|
+
|
|
1019
|
+
/** Severity of a checklist row. `blocker` stops customers, `warning` costs sales, `info` is polish. */
|
|
1020
|
+
type SdsChecklistStatus = 'done' | 'warning' | 'blocker' | 'info';
|
|
1021
|
+
interface StatusStyle {
|
|
1022
|
+
icon: SdsIconName;
|
|
1023
|
+
tile: string;
|
|
1024
|
+
label: string;
|
|
1025
|
+
}
|
|
1026
|
+
/**
|
|
1027
|
+
* One line of a readiness checklist or health report: a status glyph, a title, an optional
|
|
1028
|
+
* description, an optional count pill and an action (a projected `[sdsChecklistAction]` element, or
|
|
1029
|
+
* the built-in button from [actionLabel] that emits `(action)`).
|
|
1030
|
+
*
|
|
1031
|
+
* The status is announced as text before the title ("Blocking: 3 items have no price"), never by
|
|
1032
|
+
* colour alone. Put rows in a list for screen readers: `<ul role="list">` with each row wrapped in
|
|
1033
|
+
* an `<li>`, or give the container `role="list"` and each row `role="listitem"`.
|
|
1034
|
+
*
|
|
1035
|
+
* @example
|
|
1036
|
+
* <sds-checklist-row status="blocker" title="3 items have no price" description="Customers can't order them."
|
|
1037
|
+
* [count]="3" actionLabel="Fix" (action)="openFilter('no-price')" />
|
|
1038
|
+
*/
|
|
1039
|
+
declare class SdsChecklistRow {
|
|
1040
|
+
readonly status: _angular_core.InputSignal<SdsChecklistStatus>;
|
|
1041
|
+
readonly title: _angular_core.InputSignal<string>;
|
|
1042
|
+
readonly description: _angular_core.InputSignal<string>;
|
|
1043
|
+
/** Optional number of affected things, shown as a pill after the title. Null hides it. */
|
|
1044
|
+
readonly count: _angular_core.InputSignal<number | null>;
|
|
1045
|
+
/**
|
|
1046
|
+
* Accessible text for the count pill; `{count}` is replaced. Default `'{count} items'` — pass a
|
|
1047
|
+
* translated one.
|
|
1048
|
+
*/
|
|
1049
|
+
readonly countLabel: _angular_core.InputSignal<string>;
|
|
1050
|
+
/** Spoken status prefix. Defaults per status: Done · Warning · Blocking · Info (English). */
|
|
1051
|
+
readonly statusLabel: _angular_core.InputSignal<string>;
|
|
1052
|
+
/** Label of the built-in action button. Empty hides it (project `[sdsChecklistAction]` instead). */
|
|
1053
|
+
readonly actionLabel: _angular_core.InputSignal<string>;
|
|
1054
|
+
/**
|
|
1055
|
+
* Full accessible name for the action button when its visible label is terse ("Fix") — e.g.
|
|
1056
|
+
* "Fix: 3 items have no price".
|
|
1057
|
+
*/
|
|
1058
|
+
readonly actionAriaLabel: _angular_core.InputSignal<string>;
|
|
1059
|
+
/** Strike the title through when the row is done. */
|
|
1060
|
+
readonly strikeDone: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
1061
|
+
/** Emitted when the built-in action button is pressed. */
|
|
1062
|
+
readonly action: _angular_core.OutputEmitterRef<void>;
|
|
1063
|
+
protected readonly style: _angular_core.Signal<StatusStyle>;
|
|
1064
|
+
protected readonly resolvedStatusLabel: _angular_core.Signal<string>;
|
|
1065
|
+
protected readonly countText: _angular_core.Signal<string>;
|
|
1066
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<SdsChecklistRow, never>;
|
|
1067
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<SdsChecklistRow, "sds-checklist-row", never, { "status": { "alias": "status"; "required": false; "isSignal": true; }; "title": { "alias": "title"; "required": true; "isSignal": true; }; "description": { "alias": "description"; "required": false; "isSignal": true; }; "count": { "alias": "count"; "required": false; "isSignal": true; }; "countLabel": { "alias": "countLabel"; "required": false; "isSignal": true; }; "statusLabel": { "alias": "statusLabel"; "required": false; "isSignal": true; }; "actionLabel": { "alias": "actionLabel"; "required": false; "isSignal": true; }; "actionAriaLabel": { "alias": "actionAriaLabel"; "required": false; "isSignal": true; }; "strikeDone": { "alias": "strikeDone"; "required": false; "isSignal": true; }; }, { "action": "action"; }, never, ["*", "[sdsChecklistAction]"], true, never>;
|
|
1068
|
+
}
|
|
1069
|
+
|
|
1070
|
+
type SdsScoreVariant = 'ring' | 'bar';
|
|
1071
|
+
type SdsScoreSize = 'sm' | 'md' | 'lg';
|
|
1072
|
+
/** Tier the value falls in, from the [fairFrom] / [goodFrom] thresholds. */
|
|
1073
|
+
type SdsScoreTier = 'poor' | 'fair' | 'good';
|
|
1074
|
+
interface TierStyle {
|
|
1075
|
+
icon: SdsIconName;
|
|
1076
|
+
text: string;
|
|
1077
|
+
stroke: string;
|
|
1078
|
+
fill: string;
|
|
1079
|
+
}
|
|
1080
|
+
/**
|
|
1081
|
+
* A 0–100 score as a ring or a bar, tinted by tier (poor · fair · good). The tier is also written out
|
|
1082
|
+
* in words with its own glyph, and the whole thing is a `role="meter"` with a spoken value text — so
|
|
1083
|
+
* the score is never conveyed by colour alone.
|
|
1084
|
+
*
|
|
1085
|
+
* @example
|
|
1086
|
+
* <sds-score [value]="64" label="Menu health" />
|
|
1087
|
+
* <sds-score [value]="health()" variant="bar" label="Menu health" goodLabel="Great" />
|
|
1088
|
+
*/
|
|
1089
|
+
declare class SdsScore {
|
|
1090
|
+
/** The score, 0–100 (clamped; non-numbers read as 0). */
|
|
1091
|
+
readonly value: _angular_core.InputSignalWithTransform<number, unknown>;
|
|
1092
|
+
readonly variant: _angular_core.InputSignal<SdsScoreVariant>;
|
|
1093
|
+
readonly size: _angular_core.InputSignal<SdsScoreSize>;
|
|
1094
|
+
/** Visible caption and the meter's accessible name, e.g. "Menu health". */
|
|
1095
|
+
readonly label: _angular_core.InputSignal<string>;
|
|
1096
|
+
/** Show the tier in words (with its glyph). */
|
|
1097
|
+
readonly showTier: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
1098
|
+
/** Lowest value that counts as `fair`. */
|
|
1099
|
+
readonly fairFrom: _angular_core.InputSignalWithTransform<number, unknown>;
|
|
1100
|
+
/** Lowest value that counts as `good`. */
|
|
1101
|
+
readonly goodFrom: _angular_core.InputSignalWithTransform<number, unknown>;
|
|
1102
|
+
readonly poorLabel: _angular_core.InputSignal<string>;
|
|
1103
|
+
readonly fairLabel: _angular_core.InputSignal<string>;
|
|
1104
|
+
readonly goodLabel: _angular_core.InputSignal<string>;
|
|
1105
|
+
/** Spoken value; tokens `{value}` and `{tier}`. */
|
|
1106
|
+
readonly valueTextTemplate: _angular_core.InputSignal<string>;
|
|
1107
|
+
protected readonly clamped: _angular_core.Signal<number>;
|
|
1108
|
+
readonly tier: _angular_core.Signal<SdsScoreTier>;
|
|
1109
|
+
protected readonly tierStyle: _angular_core.Signal<TierStyle>;
|
|
1110
|
+
protected readonly tierText: _angular_core.Signal<string>;
|
|
1111
|
+
protected readonly valueText: _angular_core.Signal<string>;
|
|
1112
|
+
protected readonly ring: _angular_core.Signal<{
|
|
1113
|
+
box: number;
|
|
1114
|
+
stroke: number;
|
|
1115
|
+
value: string;
|
|
1116
|
+
max: string;
|
|
1117
|
+
}>;
|
|
1118
|
+
protected readonly radius: _angular_core.Signal<number>;
|
|
1119
|
+
protected readonly circumference: _angular_core.Signal<number>;
|
|
1120
|
+
protected readonly dashOffset: _angular_core.Signal<number>;
|
|
1121
|
+
protected readonly barHeight: _angular_core.Signal<string>;
|
|
1122
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<SdsScore, never>;
|
|
1123
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<SdsScore, "sds-score", never, { "value": { "alias": "value"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "showTier": { "alias": "showTier"; "required": false; "isSignal": true; }; "fairFrom": { "alias": "fairFrom"; "required": false; "isSignal": true; }; "goodFrom": { "alias": "goodFrom"; "required": false; "isSignal": true; }; "poorLabel": { "alias": "poorLabel"; "required": false; "isSignal": true; }; "fairLabel": { "alias": "fairLabel"; "required": false; "isSignal": true; }; "goodLabel": { "alias": "goodLabel"; "required": false; "isSignal": true; }; "valueTextTemplate": { "alias": "valueTextTemplate"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
|
|
1124
|
+
}
|
|
1125
|
+
|
|
1126
|
+
/** Availability of the thing a tile stands for (a menu item on the kitchen stock board). */
|
|
1127
|
+
type SdsStatusTileState = 'available' | 'sold-out' | 'hidden';
|
|
1128
|
+
interface StateStyle {
|
|
1129
|
+
icon: SdsIconName;
|
|
1130
|
+
frame: string;
|
|
1131
|
+
badge: string;
|
|
1132
|
+
}
|
|
1133
|
+
/**
|
|
1134
|
+
* Touch-first square tile for a stock board: a big press target (the whole tile) with a title,
|
|
1135
|
+
* optional subtitle, optional photo and a state — available · sold out · hidden.
|
|
1136
|
+
*
|
|
1137
|
+
* The state is never colour-only: each has its own glyph and word in a badge (check / "Available",
|
|
1138
|
+
* a no-entry sign / "Sold out", a crossed eye / "Hidden"), sold-out tiles get a diagonal hatch and a
|
|
1139
|
+
* struck-through title, hidden tiles a dashed frame. Pressing gives a visible pressed state.
|
|
1140
|
+
*
|
|
1141
|
+
* The tile is one `<button>` that emits `(activate)`. Pass [selected] (true/false) to make it a toggle
|
|
1142
|
+
* for multi-select ("select all matches"): it then carries `aria-pressed` and a corner check. [busy]
|
|
1143
|
+
* shows a spinner and sets `aria-busy` while a save is in flight.
|
|
1144
|
+
*
|
|
1145
|
+
* A photo that fails to load (404, blocked, not an image) falls back to the no-photo layout — never
|
|
1146
|
+
* a broken-image icon — and `(imageError)` reports the URL. A new [image] URL is tried again.
|
|
1147
|
+
*
|
|
1148
|
+
* @example
|
|
1149
|
+
* <sds-status-tile title="Bacon" subtitle="Extras" state="sold-out" note="Back at 22:00"
|
|
1150
|
+
* soldOutLabel="Sold out" (activate)="toggle(item)" />
|
|
1151
|
+
*/
|
|
1152
|
+
declare class SdsStatusTile {
|
|
1153
|
+
readonly title: _angular_core.InputSignal<string>;
|
|
1154
|
+
readonly subtitle: _angular_core.InputSignal<string>;
|
|
1155
|
+
/** Optional photo URL, shown across the top of the tile. */
|
|
1156
|
+
readonly image: _angular_core.InputSignal<string | null>;
|
|
1157
|
+
/** Alt text for the photo. Empty (default) marks it decorative — the title already names the tile. */
|
|
1158
|
+
readonly imageAlt: _angular_core.InputSignal<string>;
|
|
1159
|
+
readonly state: _angular_core.InputSignal<SdsStatusTileState>;
|
|
1160
|
+
/** Short extra line next to the state, e.g. "Back at 22:00". */
|
|
1161
|
+
readonly note: _angular_core.InputSignal<string>;
|
|
1162
|
+
/** `null` (default): a plain action tile. `true`/`false`: a toggle for multi-select (`aria-pressed`). */
|
|
1163
|
+
readonly selected: _angular_core.InputSignal<boolean | null>;
|
|
1164
|
+
/** A save is in flight: spinner + `aria-busy`. */
|
|
1165
|
+
readonly busy: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
1166
|
+
readonly disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
1167
|
+
readonly availableLabel: _angular_core.InputSignal<string>;
|
|
1168
|
+
readonly soldOutLabel: _angular_core.InputSignal<string>;
|
|
1169
|
+
readonly hiddenLabel: _angular_core.InputSignal<string>;
|
|
1170
|
+
/** The tile was pressed (click, tap, Enter or Space). */
|
|
1171
|
+
readonly activate: _angular_core.OutputEmitterRef<void>;
|
|
1172
|
+
/** The [image] URL failed to load; the tile has fallen back to its no-photo layout. */
|
|
1173
|
+
readonly imageError: _angular_core.OutputEmitterRef<string>;
|
|
1174
|
+
/** The URL that last failed to load — hidden until [image] changes to another URL. */
|
|
1175
|
+
private readonly failedImage;
|
|
1176
|
+
protected readonly showImage: _angular_core.Signal<boolean>;
|
|
1177
|
+
protected onImageError(): void;
|
|
1178
|
+
protected readonly style: _angular_core.Signal<StateStyle>;
|
|
1179
|
+
protected readonly stateText: _angular_core.Signal<string>;
|
|
1180
|
+
/** Diagonal hatch on sold-out tiles — a pattern cue on top of the colour. */
|
|
1181
|
+
protected readonly hatch: _angular_core.Signal<"repeating-linear-gradient(135deg, transparent 0 12px, color-mix(in srgb, var(--color-danger) 10%, transparent) 12px 24px)" | null>;
|
|
1182
|
+
protected readonly tileClass: _angular_core.Signal<string>;
|
|
1183
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<SdsStatusTile, never>;
|
|
1184
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<SdsStatusTile, "sds-status-tile", never, { "title": { "alias": "title"; "required": true; "isSignal": true; }; "subtitle": { "alias": "subtitle"; "required": false; "isSignal": true; }; "image": { "alias": "image"; "required": false; "isSignal": true; }; "imageAlt": { "alias": "imageAlt"; "required": false; "isSignal": true; }; "state": { "alias": "state"; "required": false; "isSignal": true; }; "note": { "alias": "note"; "required": false; "isSignal": true; }; "selected": { "alias": "selected"; "required": false; "isSignal": true; }; "busy": { "alias": "busy"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "availableLabel": { "alias": "availableLabel"; "required": false; "isSignal": true; }; "soldOutLabel": { "alias": "soldOutLabel"; "required": false; "isSignal": true; }; "hiddenLabel": { "alias": "hiddenLabel"; "required": false; "isSignal": true; }; }, { "activate": "activate"; "imageError": "imageError"; }, never, never, true, never>;
|
|
1185
|
+
}
|
|
1186
|
+
|
|
1187
|
+
/** An actionable row. */
|
|
1188
|
+
interface SdsMenuAction {
|
|
1189
|
+
/** Optional stable id, handy in the `(select)` handler. */
|
|
1190
|
+
id?: string;
|
|
1191
|
+
label: string;
|
|
1192
|
+
/** Second line under the label (e.g. "Back at 22:00"). */
|
|
1193
|
+
description?: string;
|
|
1194
|
+
icon?: SdsIconName;
|
|
1195
|
+
/** Destructive action (delete, hide…): drawn in the danger colour. */
|
|
1196
|
+
danger?: boolean;
|
|
1197
|
+
disabled?: boolean;
|
|
1198
|
+
}
|
|
1199
|
+
/** A divider between groups of actions. */
|
|
1200
|
+
interface SdsMenuSeparator {
|
|
1201
|
+
separator: true;
|
|
1202
|
+
}
|
|
1203
|
+
type SdsMenuEntry = SdsMenuAction | SdsMenuSeparator;
|
|
1204
|
+
type SdsMenuAlign = 'start' | 'end';
|
|
1205
|
+
/**
|
|
1206
|
+
* Marks the element inside `<sds-menu>` that opens it. It may be a native button or a component that
|
|
1207
|
+
* renders one (e.g. `<sds-button sdsMenuTrigger>`): the menu wires `aria-haspopup`, `aria-expanded` and
|
|
1208
|
+
* `aria-controls` onto the first focusable element it finds there.
|
|
1209
|
+
*/
|
|
1210
|
+
declare class SdsMenuTrigger {
|
|
1211
|
+
readonly el: ElementRef<HTMLElement>;
|
|
1212
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<SdsMenuTrigger, never>;
|
|
1213
|
+
static ɵdir: _angular_core.ɵɵDirectiveDeclaration<SdsMenuTrigger, "[sdsMenuTrigger]", never, {}, {}, never, never, true, never>;
|
|
1214
|
+
}
|
|
1215
|
+
/**
|
|
1216
|
+
* Action menu (menu button + popover). The panel is appended to `<body>` and positioned against the
|
|
1217
|
+
* trigger, flipping above it when there is no room below — so it is never clipped by a drawer, a dialog
|
|
1218
|
+
* or a scrolling table, and it sits above them (z 1100).
|
|
1219
|
+
*
|
|
1220
|
+
* Items come from [items]: actions (`{ label, description?, icon?, danger?, disabled? }`) and
|
|
1221
|
+
* `{ separator: true }` dividers. Activating one emits `(select)` with it and closes the menu.
|
|
1222
|
+
*
|
|
1223
|
+
* Trigger: project your own element marked `sdsMenuTrigger`, or let the menu render a compact icon
|
|
1224
|
+
* button (`triggerIcon`, default a horizontal ellipsis) named by [triggerLabel].
|
|
1225
|
+
*
|
|
1226
|
+
* Keyboard (WAI-ARIA menu button): Enter / Space / ArrowDown open on the first item, ArrowUp on the
|
|
1227
|
+
* last; ArrowUp/Down move (wrapping, skipping disabled items), Home/End jump, a letter jumps to the next
|
|
1228
|
+
* item starting with it, Enter/Space activate. **Escape closes only the menu** — the key event is
|
|
1229
|
+
* stopped, so an enclosing drawer or dialog stays open — and focus returns to the trigger. Tab closes it
|
|
1230
|
+
* too. A click outside closes it.
|
|
1231
|
+
*
|
|
1232
|
+
* @example
|
|
1233
|
+
* <sds-menu [items]="[{ id: 'sold', label: 'Mark sold out', icon: 'ban' }, { separator: true },
|
|
1234
|
+
* { id: 'del', label: 'Delete', icon: 'trash-2', danger: true }]"
|
|
1235
|
+
* triggerLabel="Item actions" (select)="onAction($event)" />
|
|
1236
|
+
*
|
|
1237
|
+
* @example
|
|
1238
|
+
* <sds-menu [items]="durations" (select)="snooze($event)">
|
|
1239
|
+
* <sds-button sdsMenuTrigger variant="secondary">Mark sold out</sds-button>
|
|
1240
|
+
* </sds-menu>
|
|
1241
|
+
*/
|
|
1242
|
+
declare class SdsMenu implements OnDestroy {
|
|
1243
|
+
private readonly host;
|
|
1244
|
+
private readonly injector;
|
|
1245
|
+
protected readonly menuId: string;
|
|
1246
|
+
protected readonly triggerId: string;
|
|
1247
|
+
/** Actions and separators, in order. */
|
|
1248
|
+
readonly items: _angular_core.InputSignal<readonly SdsMenuEntry[]>;
|
|
1249
|
+
/** Open state. Two-way: `[(open)]` — set it to open the menu from code. */
|
|
1250
|
+
readonly open: _angular_core.ModelSignal<boolean>;
|
|
1251
|
+
/** Which edge of the trigger the panel lines up with. */
|
|
1252
|
+
readonly align: _angular_core.InputSignal<SdsMenuAlign>;
|
|
1253
|
+
/** Accessible name of the built-in icon trigger (required when there is no [triggerText]). */
|
|
1254
|
+
readonly triggerLabel: _angular_core.InputSignal<string>;
|
|
1255
|
+
/** Icon of the built-in trigger. */
|
|
1256
|
+
readonly triggerIcon: _angular_core.InputSignal<"menu" | "search" | "table" | "filter" | "image" | "chart-column" | "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" | "x" | "check" | "alert-circle" | "info" | "copy" | "type" | "tag" | "ticket" | "square" | "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" | "qr-code" | "eye" | "eye-off" | "user" | "check-circle" | "arrows-clockwise" | "file-text" | "hash" | "map-pin" | "inbox" | "arrow-right" | "refresh-cw" | "loader-circle" | "bug" | "scroll-text" | "moon" | "sun" | "search-x" | "command" | "sparkles" | "triangle-alert" | "octagon-x" | "ban" | "ellipsis" | "ellipsis-vertical" | "grip-vertical" | "upload" | "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">;
|
|
1257
|
+
/** Optional visible text on the built-in trigger (then it is its name). */
|
|
1258
|
+
readonly triggerText: _angular_core.InputSignal<string>;
|
|
1259
|
+
/** Accessible name of the menu itself; defaults to the trigger's name. */
|
|
1260
|
+
readonly ariaLabel: _angular_core.InputSignal<string>;
|
|
1261
|
+
readonly disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
1262
|
+
/** Keep the menu open after an item is activated (e.g. toggles). */
|
|
1263
|
+
readonly keepOpen: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
1264
|
+
/** An action was activated. */
|
|
1265
|
+
readonly select: _angular_core.OutputEmitterRef<SdsMenuAction>;
|
|
1266
|
+
protected readonly projectedTrigger: _angular_core.Signal<SdsMenuTrigger | undefined>;
|
|
1267
|
+
private panelEl;
|
|
1268
|
+
/** Which item gets focus when the panel opens: 'first' | 'last' | 'none'. */
|
|
1269
|
+
private focusOnOpen;
|
|
1270
|
+
private typeBuffer;
|
|
1271
|
+
private typeTimer?;
|
|
1272
|
+
private readonly enabledIndexes;
|
|
1273
|
+
constructor();
|
|
1274
|
+
ngOnDestroy(): void;
|
|
1275
|
+
protected isSeparator(entry: SdsMenuEntry): entry is SdsMenuSeparator;
|
|
1276
|
+
protected descId(i: number): string;
|
|
1277
|
+
protected itemClass(entry: SdsMenuAction): string;
|
|
1278
|
+
private findFocusable;
|
|
1279
|
+
private triggerEl;
|
|
1280
|
+
private isTriggerDisabled;
|
|
1281
|
+
private show;
|
|
1282
|
+
/** Close the menu; with `returnFocus`, focus goes back to the trigger. */
|
|
1283
|
+
close(returnFocus?: boolean): void;
|
|
1284
|
+
private afterOpen;
|
|
1285
|
+
private teardown;
|
|
1286
|
+
protected onTriggerClick(event: MouseEvent): void;
|
|
1287
|
+
protected onTriggerKeydown(event: KeyboardEvent): void;
|
|
1288
|
+
protected onMenuKeydown(event: KeyboardEvent): void;
|
|
1289
|
+
private typeAhead;
|
|
1290
|
+
protected focusIndex(i: number): void;
|
|
1291
|
+
private focusItemAt;
|
|
1292
|
+
protected activate(entry: SdsMenuAction, event?: Event): void;
|
|
1293
|
+
protected onDocumentClick(event: MouseEvent): void;
|
|
1294
|
+
private readonly reflow;
|
|
1295
|
+
private listening;
|
|
1296
|
+
private addReflowListeners;
|
|
1297
|
+
private removeReflowListeners;
|
|
1298
|
+
private position;
|
|
1299
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<SdsMenu, never>;
|
|
1300
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<SdsMenu, "sds-menu", never, { "items": { "alias": "items"; "required": false; "isSignal": true; }; "open": { "alias": "open"; "required": false; "isSignal": true; }; "align": { "alias": "align"; "required": false; "isSignal": true; }; "triggerLabel": { "alias": "triggerLabel"; "required": false; "isSignal": true; }; "triggerIcon": { "alias": "triggerIcon"; "required": false; "isSignal": true; }; "triggerText": { "alias": "triggerText"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "keepOpen": { "alias": "keepOpen"; "required": false; "isSignal": true; }; }, { "open": "openChange"; "select": "select"; }, ["projectedTrigger"], ["[sdsMenuTrigger]"], true, never>;
|
|
1301
|
+
}
|
|
1302
|
+
|
|
1303
|
+
/** Where the bar sits: pinned to the bottom (default) or top of its scroll container, or in flow. */
|
|
1304
|
+
type SdsBulkBarPosition = 'bottom' | 'top' | 'static';
|
|
1305
|
+
/**
|
|
1306
|
+
* Selection toolbar for bulk editing: "N selected", the actions the app projects, and a clear-selection
|
|
1307
|
+
* button. It shows only while something is selected (`count > 0`) and sticks to the bottom of its
|
|
1308
|
+
* scroll container by default, so it stays in reach while the list scrolls.
|
|
1309
|
+
*
|
|
1310
|
+
* A `role="toolbar"` named by [ariaLabel]; the count sits in a polite live region that exists even
|
|
1311
|
+
* while the bar is hidden, so "3 selected" is announced as the selection changes. Every visible and
|
|
1312
|
+
* spoken string is an input (English defaults).
|
|
1313
|
+
*
|
|
1314
|
+
* @example
|
|
1315
|
+
* <sds-bulk-bar [count]="selected().length" countLabel="{count} selected" (clear)="selected.set([])">
|
|
1316
|
+
* <sds-button size="sm" variant="secondary" (click)="bulkPrice()">Change price</sds-button>
|
|
1317
|
+
* <sds-button size="sm" variant="secondary" (click)="bulkSoldOut()">Mark sold out</sds-button>
|
|
1318
|
+
* </sds-bulk-bar>
|
|
1319
|
+
*/
|
|
1320
|
+
declare class SdsBulkBar {
|
|
1321
|
+
/** Number of selected things. The bar is hidden at 0. */
|
|
1322
|
+
readonly count: _angular_core.InputSignalWithTransform<number, unknown>;
|
|
1323
|
+
/** "{count} selected" — `{count}` is replaced. Pass a translated string. */
|
|
1324
|
+
readonly countLabel: _angular_core.InputSignal<string>;
|
|
1325
|
+
/** Text of the clear-selection button. */
|
|
1326
|
+
readonly clearLabel: _angular_core.InputSignal<string>;
|
|
1327
|
+
/** Accessible name of the toolbar. */
|
|
1328
|
+
readonly ariaLabel: _angular_core.InputSignal<string>;
|
|
1329
|
+
readonly position: _angular_core.InputSignal<SdsBulkBarPosition>;
|
|
1330
|
+
/** The clear-selection button was pressed. */
|
|
1331
|
+
readonly clear: _angular_core.OutputEmitterRef<void>;
|
|
1332
|
+
protected readonly countText: _angular_core.Signal<string>;
|
|
1333
|
+
/** The label without the number, shown next to the count pill ("selected"). */
|
|
1334
|
+
protected readonly countWords: _angular_core.Signal<string>;
|
|
1335
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<SdsBulkBar, never>;
|
|
1336
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<SdsBulkBar, "sds-bulk-bar", never, { "count": { "alias": "count"; "required": false; "isSignal": true; }; "countLabel": { "alias": "countLabel"; "required": false; "isSignal": true; }; "clearLabel": { "alias": "clearLabel"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "position": { "alias": "position"; "required": false; "isSignal": true; }; }, { "clear": "clear"; }, never, ["*"], true, never>;
|
|
1337
|
+
}
|
|
1338
|
+
|
|
1339
|
+
/** Context handed to the item and handle templates. */
|
|
1340
|
+
interface SdsSortableItemContext<T = any> {
|
|
1341
|
+
/** The item — enables `let-item`. */
|
|
1342
|
+
$implicit: T;
|
|
1343
|
+
item: T;
|
|
1344
|
+
/** Zero-based position in the list. */
|
|
1345
|
+
index: number;
|
|
1346
|
+
/** True while this item is picked up (keyboard) or dragged (pointer). */
|
|
1347
|
+
grabbed: boolean;
|
|
1348
|
+
}
|
|
1349
|
+
/**
|
|
1350
|
+
* Template for one row's content inside `<sds-sortable-list>`.
|
|
1351
|
+
*
|
|
1352
|
+
* @example
|
|
1353
|
+
* <ng-template sdsSortableItem let-item let-i="index">{{ item.name }}</ng-template>
|
|
1354
|
+
*/
|
|
1355
|
+
declare class SdsSortableItem {
|
|
1356
|
+
readonly template: TemplateRef<SdsSortableItemContext<any>>;
|
|
1357
|
+
static ngTemplateContextGuard(_dir: SdsSortableItem, _ctx: unknown): _ctx is SdsSortableItemContext;
|
|
1358
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<SdsSortableItem, never>;
|
|
1359
|
+
static ɵdir: _angular_core.ɵɵDirectiveDeclaration<SdsSortableItem, "ng-template[sdsSortableItem]", never, {}, {}, never, never, true, never>;
|
|
1360
|
+
}
|
|
1361
|
+
/**
|
|
1362
|
+
* Optional template for the drag handle's content (replaces the default grip icon). The handle itself
|
|
1363
|
+
* stays a library-owned button, so it keeps its accessible name and keyboard behaviour.
|
|
1364
|
+
*/
|
|
1365
|
+
declare class SdsSortableHandle {
|
|
1366
|
+
readonly template: TemplateRef<SdsSortableItemContext<any>>;
|
|
1367
|
+
static ngTemplateContextGuard(_dir: SdsSortableHandle, _ctx: unknown): _ctx is SdsSortableItemContext;
|
|
1368
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<SdsSortableHandle, never>;
|
|
1369
|
+
static ɵdir: _angular_core.ɵɵDirectiveDeclaration<SdsSortableHandle, "ng-template[sdsSortableHandle]", never, {}, {}, never, never, true, never>;
|
|
1370
|
+
}
|
|
1371
|
+
/** Emitted once per completed move (pointer drop or keyboard drop). */
|
|
1372
|
+
interface SdsSortableReorderEvent<T = any> {
|
|
1373
|
+
previousIndex: number;
|
|
1374
|
+
currentIndex: number;
|
|
1375
|
+
item: T;
|
|
1376
|
+
/** The whole list in its new order. */
|
|
1377
|
+
items: T[];
|
|
1378
|
+
}
|
|
1379
|
+
type SdsSortableAppearance = 'card' | 'plain';
|
|
1380
|
+
type DragMode = 'keyboard' | 'pointer';
|
|
1381
|
+
/**
|
|
1382
|
+
* Accessible reorderable list, with no `@angular/cdk` dependency.
|
|
1383
|
+
*
|
|
1384
|
+
* - **Pointer** (mouse, pen, touch): drag an item by its handle. The handle has `touch-action: none`, so
|
|
1385
|
+
* a finger drags instead of scrolling the page; the rest of the row still scrolls normally.
|
|
1386
|
+
* - **Keyboard**: focus a handle, **Space/Enter** picks the item up, **↑/↓** (and Home/End) move it,
|
|
1387
|
+
* **Space/Enter** drops it, **Escape** cancels (the event is stopped, so an enclosing drawer stays open).
|
|
1388
|
+
* Moving focus away also cancels.
|
|
1389
|
+
* - **Long lists**: while a pointer drag nears the top or bottom edge of the nearest scrollable
|
|
1390
|
+
* ancestor (a drawer body, a panel) — or of the window — that container scrolls, faster closer to
|
|
1391
|
+
* the edge, and the dragged row stays under the pointer. A keyboard move scrolls just enough to keep
|
|
1392
|
+
* the moving row in view. Turn off with `[autoScroll]="false"`.
|
|
1393
|
+
* - **Screen readers**: every handle is named ("Reorder Burgers") and described by the instructions; an
|
|
1394
|
+
* assertive live region announces pick-up, each move ("moved to position 3 of 8"), the drop and a cancel.
|
|
1395
|
+
*
|
|
1396
|
+
* Nothing is committed until the drop: while dragging, the other rows slide to make room. The drop
|
|
1397
|
+
* updates the two-way `[(items)]` model and emits `(reorder)` with the old/new index and the new array.
|
|
1398
|
+
* Items for which [itemDisabled] returns true cannot be picked up (they still shift when others pass).
|
|
1399
|
+
*
|
|
1400
|
+
* Row content comes from `<ng-template sdsSortableItem let-item>`; without one the item's label is shown.
|
|
1401
|
+
* All spoken text is set through inputs (English defaults, `{item}` `{position}` `{total}` tokens).
|
|
1402
|
+
*
|
|
1403
|
+
* @example
|
|
1404
|
+
* <sds-sortable-list [(items)]="categories" dataKey="id" labelField="name" ariaLabel="Categories"
|
|
1405
|
+
* (reorder)="save($event)">
|
|
1406
|
+
* <ng-template sdsSortableItem let-cat>{{ cat.name }} <span>{{ cat.count }} items</span></ng-template>
|
|
1407
|
+
* </sds-sortable-list>
|
|
1408
|
+
*/
|
|
1409
|
+
declare class SdsSortableList<T = any> {
|
|
1410
|
+
private readonly host;
|
|
1411
|
+
private readonly injector;
|
|
1412
|
+
protected readonly instructionsId: string;
|
|
1413
|
+
/** The items, in order. Two-way: `[(items)]` receives the new order on drop. */
|
|
1414
|
+
readonly items: _angular_core.ModelSignal<readonly T[]>;
|
|
1415
|
+
/** Property used as a stable identity for rows (strongly recommended). */
|
|
1416
|
+
readonly dataKey: _angular_core.InputSignal<string>;
|
|
1417
|
+
/** Property holding the item's name, for the default row, the handle name and announcements. */
|
|
1418
|
+
readonly labelField: _angular_core.InputSignal<string>;
|
|
1419
|
+
/** Function returning the item's name; takes precedence over [labelField]. */
|
|
1420
|
+
readonly itemLabel: _angular_core.InputSignal<((item: T) => string) | null>;
|
|
1421
|
+
/** Items for which this returns true cannot be picked up. */
|
|
1422
|
+
readonly itemDisabled: _angular_core.InputSignal<((item: T) => boolean) | null>;
|
|
1423
|
+
/** Disable reordering for the whole list. */
|
|
1424
|
+
readonly disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
1425
|
+
/** `card` (default): bordered rows with a gap. `plain`: rows separated by dividers. */
|
|
1426
|
+
readonly appearance: _angular_core.InputSignal<SdsSortableAppearance>;
|
|
1427
|
+
/** Accessible name of the list. */
|
|
1428
|
+
readonly ariaLabel: _angular_core.InputSignal<string>;
|
|
1429
|
+
/**
|
|
1430
|
+
* Scroll the nearest scrollable ancestor (then the window) while dragging near its top or bottom
|
|
1431
|
+
* edge, and keep a keyboard-moved row in view.
|
|
1432
|
+
*/
|
|
1433
|
+
readonly autoScroll: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
1434
|
+
/** Height (px) of the band along each scroll edge where a pointer drag starts auto-scrolling. */
|
|
1435
|
+
readonly autoScrollEdge: _angular_core.InputSignalWithTransform<number, unknown>;
|
|
1436
|
+
/** Name of each handle; `{item}` is the item's label. */
|
|
1437
|
+
readonly handleLabel: _angular_core.InputSignal<string>;
|
|
1438
|
+
/** Read after a handle's name (aria-describedby). */
|
|
1439
|
+
readonly instructions: _angular_core.InputSignal<string>;
|
|
1440
|
+
readonly pickedUpMessage: _angular_core.InputSignal<string>;
|
|
1441
|
+
readonly movedMessage: _angular_core.InputSignal<string>;
|
|
1442
|
+
readonly droppedMessage: _angular_core.InputSignal<string>;
|
|
1443
|
+
readonly cancelledMessage: _angular_core.InputSignal<string>;
|
|
1444
|
+
/** A move was completed. */
|
|
1445
|
+
readonly reorder: _angular_core.OutputEmitterRef<SdsSortableReorderEvent<T>>;
|
|
1446
|
+
protected readonly itemTpl: _angular_core.Signal<SdsSortableItem | undefined>;
|
|
1447
|
+
protected readonly handleTpl: _angular_core.Signal<SdsSortableHandle | undefined>;
|
|
1448
|
+
/** Rendered order: follows [items] until a drop commits a new one. */
|
|
1449
|
+
protected readonly working: _angular_core.WritableSignal<T[]>;
|
|
1450
|
+
/** Index (in `working`) of the item being moved, or null. */
|
|
1451
|
+
protected readonly active: _angular_core.WritableSignal<number | null>;
|
|
1452
|
+
/** Where it would land if dropped now. */
|
|
1453
|
+
private readonly target;
|
|
1454
|
+
protected readonly mode: _angular_core.WritableSignal<DragMode | null>;
|
|
1455
|
+
/** Pointer-mode vertical offset of the dragged row. */
|
|
1456
|
+
private readonly pointerDy;
|
|
1457
|
+
/** No transitions for one frame while a drop re-renders the new order in place. */
|
|
1458
|
+
private readonly settling;
|
|
1459
|
+
protected readonly liveMessage: _angular_core.WritableSignal<string>;
|
|
1460
|
+
/** Row boxes measured at drag start (top/height), plus the gap between rows. */
|
|
1461
|
+
private rects;
|
|
1462
|
+
private gap;
|
|
1463
|
+
private pointerId;
|
|
1464
|
+
private startY;
|
|
1465
|
+
/** Latest pointer position during a pointer drag (auto-scroll re-reads it every frame). */
|
|
1466
|
+
private lastY;
|
|
1467
|
+
/** The host's viewport top at drag start: the drift since then is how far its scrollers moved. */
|
|
1468
|
+
private startHostTop;
|
|
1469
|
+
/** Nearest scrollable ancestor, found at drag start. */
|
|
1470
|
+
private scroller;
|
|
1471
|
+
private frame;
|
|
1472
|
+
constructor();
|
|
1473
|
+
/** Per-row offsets that open a gap where the moving row will land. */
|
|
1474
|
+
private readonly shifts;
|
|
1475
|
+
/** Offset of the moving row: follows the pointer, or jumps slot to slot with the keyboard. */
|
|
1476
|
+
private readonly activeOffset;
|
|
1477
|
+
protected trackKey(item: T, index: number): unknown;
|
|
1478
|
+
protected labelOf(item: T): string;
|
|
1479
|
+
protected isItemDisabled(item: T): boolean;
|
|
1480
|
+
protected context(item: T, index: number): SdsSortableItemContext<T>;
|
|
1481
|
+
protected handleText(item: T): string;
|
|
1482
|
+
protected transformFor(i: number): string | null;
|
|
1483
|
+
protected rowClass(i: number): string;
|
|
1484
|
+
protected handleClass(item: T): string;
|
|
1485
|
+
protected onHandleKeydown(event: KeyboardEvent, i: number): void;
|
|
1486
|
+
private keyMove;
|
|
1487
|
+
/** Focus leaving the list while an item is picked up cancels the move. */
|
|
1488
|
+
protected onFocusOut(event: FocusEvent): void;
|
|
1489
|
+
protected onPointerDown(event: PointerEvent, i: number): void;
|
|
1490
|
+
protected onPointerMove(event: PointerEvent): void;
|
|
1491
|
+
/**
|
|
1492
|
+
* Place the dragged row under the pointer and pick its landing slot. Positions are compared in
|
|
1493
|
+
* drag-start coordinates: the pointer's travel plus however far the list has scrolled since.
|
|
1494
|
+
*/
|
|
1495
|
+
private track;
|
|
1496
|
+
/** How far (px) the list has moved up the viewport since the drag began — any ancestor or the window. */
|
|
1497
|
+
private scrolledBy;
|
|
1498
|
+
private startAutoScroll;
|
|
1499
|
+
private stopAutoScroll;
|
|
1500
|
+
/**
|
|
1501
|
+
* One auto-scroll step for a pointer at `y`: the scroll container first, then the window. A side
|
|
1502
|
+
* only scrolls while part of the list is still hidden past that edge.
|
|
1503
|
+
*/
|
|
1504
|
+
private scrollNearEdge;
|
|
1505
|
+
/**
|
|
1506
|
+
* Keyboard move: scroll just enough (container, then window) to keep the moving row in view. Its
|
|
1507
|
+
* resting box comes from drag-start geometry, since its transform may still be animating.
|
|
1508
|
+
*/
|
|
1509
|
+
private revealActive;
|
|
1510
|
+
protected onPointerUp(event: PointerEvent): void;
|
|
1511
|
+
protected onPointerCancel(): void;
|
|
1512
|
+
private begin;
|
|
1513
|
+
private measure;
|
|
1514
|
+
private commit;
|
|
1515
|
+
/** Nothing was moved in the DOM while dragging, so focus is still where it should be. */
|
|
1516
|
+
private cancel;
|
|
1517
|
+
private reset;
|
|
1518
|
+
private focusHandle;
|
|
1519
|
+
private announce;
|
|
1520
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<SdsSortableList<any>, never>;
|
|
1521
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<SdsSortableList<any>, "sds-sortable-list", never, { "items": { "alias": "items"; "required": false; "isSignal": true; }; "dataKey": { "alias": "dataKey"; "required": false; "isSignal": true; }; "labelField": { "alias": "labelField"; "required": false; "isSignal": true; }; "itemLabel": { "alias": "itemLabel"; "required": false; "isSignal": true; }; "itemDisabled": { "alias": "itemDisabled"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "appearance": { "alias": "appearance"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "autoScroll": { "alias": "autoScroll"; "required": false; "isSignal": true; }; "autoScrollEdge": { "alias": "autoScrollEdge"; "required": false; "isSignal": true; }; "handleLabel": { "alias": "handleLabel"; "required": false; "isSignal": true; }; "instructions": { "alias": "instructions"; "required": false; "isSignal": true; }; "pickedUpMessage": { "alias": "pickedUpMessage"; "required": false; "isSignal": true; }; "movedMessage": { "alias": "movedMessage"; "required": false; "isSignal": true; }; "droppedMessage": { "alias": "droppedMessage"; "required": false; "isSignal": true; }; "cancelledMessage": { "alias": "cancelledMessage"; "required": false; "isSignal": true; }; }, { "items": "itemsChange"; "reorder": "reorder"; }, ["itemTpl", "handleTpl"], never, true, never>;
|
|
1522
|
+
}
|
|
1523
|
+
|
|
1524
|
+
/** Why a file was turned away. */
|
|
1525
|
+
type SdsFileRejectionReason = 'type' | 'size' | 'count';
|
|
1526
|
+
interface SdsFileRejection {
|
|
1527
|
+
file: File;
|
|
1528
|
+
reason: SdsFileRejectionReason;
|
|
1529
|
+
/** The rendered, human-readable message (from the matching *Message input). */
|
|
1530
|
+
message: string;
|
|
1531
|
+
}
|
|
1532
|
+
/** "1.5 MB" style size (decimal units, like file managers show them), for messages. */
|
|
1533
|
+
declare function sdsFormatBytes(bytes: number): string;
|
|
1534
|
+
/** Does `file` match an `accept` string (".jpg,image/png,image/*")? Empty accepts everything. */
|
|
1535
|
+
declare function sdsFileMatchesAccept(file: File, accept: string): boolean;
|
|
1536
|
+
/**
|
|
1537
|
+
* Drop zone plus a "Browse" button for picking files. Filters by [accept] (same syntax as the native
|
|
1538
|
+
* input: `.csv`, `image/*`, `image/png`), [maxSize] (bytes) and [maxFiles]; emits the accepted files as
|
|
1539
|
+
* `(files)` and the rest as `(rejected)` with a reason and a readable message, which is also shown
|
|
1540
|
+
* under the zone and announced.
|
|
1541
|
+
*
|
|
1542
|
+
* Keyboard and screen-reader users use the native Browse button (the zone itself is a pointer
|
|
1543
|
+
* affordance); clicking anywhere on the zone opens the picker too. All text is set through inputs with
|
|
1544
|
+
* English defaults.
|
|
1545
|
+
*
|
|
1546
|
+
* @example
|
|
1547
|
+
* <sds-file-drop accept="image/jpeg,image/png,image/webp" multiple [maxSize]="10_000_000"
|
|
1548
|
+
* label="Drop photos here" browseLabel="Choose photos"
|
|
1549
|
+
* (files)="upload($event)" (rejected)="onRejected($event)" />
|
|
1550
|
+
*/
|
|
1551
|
+
declare class SdsFileDrop {
|
|
1552
|
+
protected readonly zoneId: string;
|
|
1553
|
+
private readonly fileInput;
|
|
1554
|
+
/** Accepted types, native `accept` syntax. Empty = anything. */
|
|
1555
|
+
readonly accept: _angular_core.InputSignal<string>;
|
|
1556
|
+
readonly multiple: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
1557
|
+
/** Largest accepted file in bytes. Null = no limit. */
|
|
1558
|
+
readonly maxSize: _angular_core.InputSignal<number | null>;
|
|
1559
|
+
/** Most files accepted in one pick/drop. Null = no limit (1 when not [multiple]). */
|
|
1560
|
+
readonly maxFiles: _angular_core.InputSignal<number | null>;
|
|
1561
|
+
readonly disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
1562
|
+
/** Icon in the zone at rest. */
|
|
1563
|
+
readonly icon: _angular_core.InputSignal<"image" | "file-text" | "upload">;
|
|
1564
|
+
readonly label: _angular_core.InputSignal<string>;
|
|
1565
|
+
/** Shown while files are dragged over the zone. */
|
|
1566
|
+
readonly dropLabel: _angular_core.InputSignal<string>;
|
|
1567
|
+
readonly browseLabel: _angular_core.InputSignal<string>;
|
|
1568
|
+
/** Extra line under the label, e.g. "JPEG or PNG, up to 10 MB". */
|
|
1569
|
+
readonly hint: _angular_core.InputSignal<string>;
|
|
1570
|
+
/** Tokens: `{name}`. */
|
|
1571
|
+
readonly wrongTypeMessage: _angular_core.InputSignal<string>;
|
|
1572
|
+
/** Tokens: `{name}`, `{max}` (formatted size). */
|
|
1573
|
+
readonly tooLargeMessage: _angular_core.InputSignal<string>;
|
|
1574
|
+
/** Tokens: `{name}`, `{max}` (file count). */
|
|
1575
|
+
readonly tooManyMessage: _angular_core.InputSignal<string>;
|
|
1576
|
+
/** Files that passed every check, in pick/drop order. */
|
|
1577
|
+
readonly files: _angular_core.OutputEmitterRef<File[]>;
|
|
1578
|
+
/** Files that were turned away, with the reason. */
|
|
1579
|
+
readonly rejected: _angular_core.OutputEmitterRef<SdsFileRejection[]>;
|
|
1580
|
+
protected readonly dragging: _angular_core.WritableSignal<boolean>;
|
|
1581
|
+
protected readonly errors: _angular_core.WritableSignal<string[]>;
|
|
1582
|
+
private dragDepth;
|
|
1583
|
+
protected readonly describedBy: _angular_core.Signal<string>;
|
|
1584
|
+
protected readonly zoneClass: _angular_core.Signal<"flex flex-col items-center justify-center gap-2 rounded-card border-2 border-dashed px-6 py-8 text-center transition-colors cursor-not-allowed border-border bg-muted opacity-60" | "flex flex-col items-center justify-center gap-2 rounded-card border-2 border-dashed px-6 py-8 text-center transition-colors cursor-copy border-brand-500 bg-brand-50 dark:bg-muted" | "flex flex-col items-center justify-center gap-2 rounded-card border-2 border-dashed px-6 py-8 text-center transition-colors cursor-pointer border-border bg-muted/50 hover:border-ink-faint">;
|
|
1585
|
+
/** Open the native file picker. */
|
|
1586
|
+
browse(event?: Event): void;
|
|
1587
|
+
protected onZoneClick(event: MouseEvent): void;
|
|
1588
|
+
protected onDragEnter(event: DragEvent): void;
|
|
1589
|
+
protected onDragOver(event: DragEvent): void;
|
|
1590
|
+
protected onDragLeave(event: DragEvent): void;
|
|
1591
|
+
protected onDrop(event: DragEvent): void;
|
|
1592
|
+
protected onInputChange(event: Event): void;
|
|
1593
|
+
private hasFiles;
|
|
1594
|
+
private handle;
|
|
1595
|
+
private render;
|
|
1596
|
+
/** Clear the error messages under the zone. */
|
|
1597
|
+
clearErrors(): void;
|
|
1598
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<SdsFileDrop, never>;
|
|
1599
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<SdsFileDrop, "sds-file-drop", never, { "accept": { "alias": "accept"; "required": false; "isSignal": true; }; "multiple": { "alias": "multiple"; "required": false; "isSignal": true; }; "maxSize": { "alias": "maxSize"; "required": false; "isSignal": true; }; "maxFiles": { "alias": "maxFiles"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "dropLabel": { "alias": "dropLabel"; "required": false; "isSignal": true; }; "browseLabel": { "alias": "browseLabel"; "required": false; "isSignal": true; }; "hint": { "alias": "hint"; "required": false; "isSignal": true; }; "wrongTypeMessage": { "alias": "wrongTypeMessage"; "required": false; "isSignal": true; }; "tooLargeMessage": { "alias": "tooLargeMessage"; "required": false; "isSignal": true; }; "tooManyMessage": { "alias": "tooManyMessage"; "required": false; "isSignal": true; }; }, { "files": "files"; "rejected": "rejected"; }, never, never, true, never>;
|
|
1600
|
+
}
|
|
1601
|
+
|
|
1602
|
+
/** A crop rectangle in the SOURCE image's natural pixels. */
|
|
1603
|
+
interface SdsCropRect {
|
|
1604
|
+
x: number;
|
|
1605
|
+
y: number;
|
|
1606
|
+
width: number;
|
|
1607
|
+
height: number;
|
|
1608
|
+
}
|
|
1609
|
+
interface SdsImageCropperBlobOptions {
|
|
1610
|
+
/** MIME type of the output. Default `image/jpeg`. */
|
|
1611
|
+
type?: string;
|
|
1612
|
+
/** 0–1 quality for lossy types. Default 0.9. */
|
|
1613
|
+
quality?: number;
|
|
1614
|
+
/** Output width in px (height follows the aspect ratio). Default: the crop's natural width. */
|
|
1615
|
+
width?: number;
|
|
1616
|
+
}
|
|
1617
|
+
type SdsImageCropperShape = 'rect' | 'round';
|
|
1618
|
+
/**
|
|
1619
|
+
* Crops an image to a FIXED aspect ratio (e.g. the shop's card ratio): the frame is fixed and the image
|
|
1620
|
+
* moves and zooms behind it, always covering the frame, so every crop is valid.
|
|
1621
|
+
*
|
|
1622
|
+
* - Pointer: drag to move; wheel or pinch to zoom around the pointer; a zoom slider and ± buttons.
|
|
1623
|
+
* - Keyboard (focus the frame): arrow keys nudge the image (Shift = 10×), `+`/`-` zoom, `0` resets.
|
|
1624
|
+
* - `(cropChange)` emits the crop in the source image's natural pixels after every change;
|
|
1625
|
+
* {@link toBlob} renders it through a canvas (optionally resized) for upload.
|
|
1626
|
+
*
|
|
1627
|
+
* `src` takes a URL or a Blob/File (an object URL is managed for you). For a cross-origin URL the server
|
|
1628
|
+
* must send CORS headers and [crossOrigin] must be set, or the canvas is tainted and toBlob() rejects.
|
|
1629
|
+
*
|
|
1630
|
+
* @example
|
|
1631
|
+
* <sds-image-cropper [src]="file" [aspectRatio]="4 / 3" (cropChange)="crop = $event" #cropper />
|
|
1632
|
+
* <sds-button (click)="upload(await cropper.toBlob({ width: 1600 }))">Save</sds-button>
|
|
1633
|
+
*/
|
|
1634
|
+
declare class SdsImageCropper implements OnDestroy {
|
|
1635
|
+
protected readonly helpId: string;
|
|
1636
|
+
private readonly viewport;
|
|
1637
|
+
/** Image to crop: a URL, or a Blob/File. */
|
|
1638
|
+
readonly src: _angular_core.InputSignal<string | Blob | null>;
|
|
1639
|
+
/** Frame width ÷ height, e.g. `1`, `4 / 3`, `16 / 9`. */
|
|
1640
|
+
readonly aspectRatio: _angular_core.InputSignalWithTransform<number, unknown>;
|
|
1641
|
+
/** Largest zoom factor relative to "cover". */
|
|
1642
|
+
readonly maxZoom: _angular_core.InputSignalWithTransform<number, unknown>;
|
|
1643
|
+
/** Zoom change per button press / key press. */
|
|
1644
|
+
readonly zoomStep: _angular_core.InputSignalWithTransform<number, unknown>;
|
|
1645
|
+
/** Visual mask only (the output is always the rectangle). */
|
|
1646
|
+
readonly shape: _angular_core.InputSignal<SdsImageCropperShape>;
|
|
1647
|
+
/** `crossorigin` for URL sources, needed for toBlob() on a cross-origin image. */
|
|
1648
|
+
readonly crossOrigin: _angular_core.InputSignal<"anonymous" | "use-credentials" | null>;
|
|
1649
|
+
readonly label: _angular_core.InputSignal<string>;
|
|
1650
|
+
readonly roleDescription: _angular_core.InputSignal<string>;
|
|
1651
|
+
readonly instructions: _angular_core.InputSignal<string>;
|
|
1652
|
+
readonly zoomLabel: _angular_core.InputSignal<string>;
|
|
1653
|
+
readonly zoomInLabel: _angular_core.InputSignal<string>;
|
|
1654
|
+
readonly zoomOutLabel: _angular_core.InputSignal<string>;
|
|
1655
|
+
/** The crop, in natural pixels, after every change. */
|
|
1656
|
+
readonly cropChange: _angular_core.OutputEmitterRef<SdsCropRect>;
|
|
1657
|
+
/** The image loaded; natural size. */
|
|
1658
|
+
readonly imageLoad: _angular_core.OutputEmitterRef<{
|
|
1659
|
+
width: number;
|
|
1660
|
+
height: number;
|
|
1661
|
+
}>;
|
|
1662
|
+
/** The image failed to load. */
|
|
1663
|
+
readonly imageError: _angular_core.OutputEmitterRef<void>;
|
|
1664
|
+
protected readonly objectUrl: _angular_core.WritableSignal<string | null>;
|
|
1665
|
+
private ownedUrl;
|
|
1666
|
+
private imgEl;
|
|
1667
|
+
protected readonly loaded: _angular_core.WritableSignal<boolean>;
|
|
1668
|
+
private readonly naturalW;
|
|
1669
|
+
private readonly naturalH;
|
|
1670
|
+
/** Frame size in CSS px (tracked with a ResizeObserver). */
|
|
1671
|
+
private readonly frameW;
|
|
1672
|
+
private readonly frameH;
|
|
1673
|
+
protected readonly zoom: _angular_core.WritableSignal<number>;
|
|
1674
|
+
protected readonly tx: _angular_core.WritableSignal<number>;
|
|
1675
|
+
protected readonly ty: _angular_core.WritableSignal<number>;
|
|
1676
|
+
protected readonly dragging: _angular_core.WritableSignal<boolean>;
|
|
1677
|
+
/** Scale that makes the image just cover the frame (zoom 1). */
|
|
1678
|
+
private readonly coverScale;
|
|
1679
|
+
private readonly scale;
|
|
1680
|
+
protected readonly displayW: _angular_core.Signal<number>;
|
|
1681
|
+
protected readonly displayH: _angular_core.Signal<number>;
|
|
1682
|
+
protected readonly zoomText: _angular_core.Signal<string>;
|
|
1683
|
+
/** The current crop in natural pixels. */
|
|
1684
|
+
readonly crop: _angular_core.Signal<SdsCropRect>;
|
|
1685
|
+
private resizeObserver;
|
|
1686
|
+
private pointers;
|
|
1687
|
+
private lastPinch;
|
|
1688
|
+
constructor();
|
|
1689
|
+
ngOnDestroy(): void;
|
|
1690
|
+
protected onLoad(event: Event): void;
|
|
1691
|
+
protected onError(): void;
|
|
1692
|
+
private revoke;
|
|
1693
|
+
private measureFrame;
|
|
1694
|
+
/** Centre the image at zoom 1. */
|
|
1695
|
+
reset(): void;
|
|
1696
|
+
private setOffset;
|
|
1697
|
+
/** Zoom to `next`, keeping the frame point (px, py) fixed (defaults to the centre). */
|
|
1698
|
+
private zoomTo;
|
|
1699
|
+
/** Zoom in (+) or out (−) by `delta`. */
|
|
1700
|
+
zoomBy(delta: number): void;
|
|
1701
|
+
private emit;
|
|
1702
|
+
protected onPointerDown(event: PointerEvent): void;
|
|
1703
|
+
protected onPointerMove(event: PointerEvent): void;
|
|
1704
|
+
protected onPointerUp(event: PointerEvent): void;
|
|
1705
|
+
private pinchDistance;
|
|
1706
|
+
protected onWheel(event: WheelEvent): void;
|
|
1707
|
+
protected onSlider(event: Event): void;
|
|
1708
|
+
protected onKeydown(event: KeyboardEvent): void;
|
|
1709
|
+
/**
|
|
1710
|
+
* Render the current crop to a canvas (natural resolution, or scaled to `width`). Returns null
|
|
1711
|
+
* before an image has loaded.
|
|
1712
|
+
*/
|
|
1713
|
+
toCanvas(width?: number): HTMLCanvasElement | null;
|
|
1714
|
+
/** Encode the current crop as a Blob (JPEG 0.9 by default). */
|
|
1715
|
+
toBlob(options?: SdsImageCropperBlobOptions): Promise<Blob | null>;
|
|
1716
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<SdsImageCropper, never>;
|
|
1717
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<SdsImageCropper, "sds-image-cropper", never, { "src": { "alias": "src"; "required": false; "isSignal": true; }; "aspectRatio": { "alias": "aspectRatio"; "required": false; "isSignal": true; }; "maxZoom": { "alias": "maxZoom"; "required": false; "isSignal": true; }; "zoomStep": { "alias": "zoomStep"; "required": false; "isSignal": true; }; "shape": { "alias": "shape"; "required": false; "isSignal": true; }; "crossOrigin": { "alias": "crossOrigin"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "roleDescription": { "alias": "roleDescription"; "required": false; "isSignal": true; }; "instructions": { "alias": "instructions"; "required": false; "isSignal": true; }; "zoomLabel": { "alias": "zoomLabel"; "required": false; "isSignal": true; }; "zoomInLabel": { "alias": "zoomInLabel"; "required": false; "isSignal": true; }; "zoomOutLabel": { "alias": "zoomOutLabel"; "required": false; "isSignal": true; }; }, { "cropChange": "cropChange"; "imageLoad": "imageLoad"; "imageError": "imageError"; }, never, never, true, never>;
|
|
1718
|
+
}
|
|
1719
|
+
|
|
902
1720
|
/** Small, dependency-free date helpers (day-granularity, local time). */
|
|
903
1721
|
declare function startOfDay(d: Date): Date;
|
|
904
1722
|
/** Zero-pad a number to two digits (e.g. 9 → "09"). */
|
|
@@ -939,6 +1757,7 @@ declare class SdsCalendar {
|
|
|
939
1757
|
readonly max: _angular_core.InputSignal<Date | null>;
|
|
940
1758
|
/** 0 = Sunday, 1 = Monday (default, European). */
|
|
941
1759
|
readonly firstDayOfWeek: _angular_core.InputSignal<0 | 1>;
|
|
1760
|
+
/** BCP 47 locale for month and weekday names. Defaults to `en-GB`; pass the app's locale. */
|
|
942
1761
|
readonly locale: _angular_core.InputSignal<string>;
|
|
943
1762
|
readonly showActions: _angular_core.InputSignal<boolean>;
|
|
944
1763
|
/** When true, a time editor (HH:mm, 24h) is shown and the value keeps its time-of-day. */
|
|
@@ -954,14 +1773,13 @@ declare class SdsCalendar {
|
|
|
954
1773
|
/** Visible text of the "done" action (shown when {@link showDone} is true). */
|
|
955
1774
|
readonly doneLabel: _angular_core.InputSignal<string>;
|
|
956
1775
|
/**
|
|
957
|
-
* Accessible name for the calendar container.
|
|
958
|
-
*
|
|
1776
|
+
* Accessible name for the calendar container. English default; an app serving more than one
|
|
1777
|
+
* language MUST translate it.
|
|
959
1778
|
*/
|
|
960
1779
|
readonly calendarLabel: _angular_core.InputSignal<string>;
|
|
961
1780
|
/**
|
|
962
1781
|
* Accessible name for the "previous" nav button. It is icon-only, so this string is its ONLY
|
|
963
|
-
* accessible name
|
|
964
|
-
* the consuming app.
|
|
1782
|
+
* accessible name. English default; translate it in the consuming app.
|
|
965
1783
|
*/
|
|
966
1784
|
readonly previousLabel: _angular_core.InputSignal<string>;
|
|
967
1785
|
/** Accessible name for the icon-only "next" nav button. See {@link previousLabel}. */
|
|
@@ -973,7 +1791,7 @@ declare class SdsCalendar {
|
|
|
973
1791
|
readonly todayActionLabel: _angular_core.InputSignal<string>;
|
|
974
1792
|
/** Visible text of the "clear" action. See {@link todayActionLabel}. */
|
|
975
1793
|
readonly clearActionLabel: _angular_core.InputSignal<string>;
|
|
976
|
-
/** Emitted when a concrete date is picked (day click or "
|
|
1794
|
+
/** Emitted when a concrete date is picked (day click or "Today"). */
|
|
977
1795
|
readonly dateSelect: _angular_core.OutputEmitterRef<Date>;
|
|
978
1796
|
/** Emitted when the "done" action is used (see {@link showDone}). */
|
|
979
1797
|
readonly done: _angular_core.OutputEmitterRef<void>;
|
|
@@ -1044,7 +1862,7 @@ type SdsDatePickerSize = 'sm' | 'md' | 'lg';
|
|
|
1044
1862
|
* [(ngModel)]; the value is a `Date | null`.
|
|
1045
1863
|
*
|
|
1046
1864
|
* @example
|
|
1047
|
-
* <sds-date-picker label="
|
|
1865
|
+
* <sds-date-picker label="Delivery date" [(ngModel)]="date" />
|
|
1048
1866
|
*/
|
|
1049
1867
|
declare class SdsDatePicker implements ControlValueAccessor, OnDestroy {
|
|
1050
1868
|
private readonly host;
|
|
@@ -1059,6 +1877,10 @@ declare class SdsDatePicker implements ControlValueAccessor, OnDestroy {
|
|
|
1059
1877
|
readonly min: _angular_core.InputSignal<Date | null>;
|
|
1060
1878
|
readonly max: _angular_core.InputSignal<Date | null>;
|
|
1061
1879
|
readonly firstDayOfWeek: _angular_core.InputSignal<0 | 1>;
|
|
1880
|
+
/**
|
|
1881
|
+
* BCP 47 locale for the calendar's month and weekday names. Defaults to `en-GB` (English names, and
|
|
1882
|
+
* the same day-first order as the default dd/MM/yyyy display); pass the app's locale.
|
|
1883
|
+
*/
|
|
1062
1884
|
readonly locale: _angular_core.InputSignal<string>;
|
|
1063
1885
|
readonly inline: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
1064
1886
|
readonly clearable: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
@@ -1081,9 +1903,8 @@ declare class SdsDatePicker implements ControlValueAccessor, OnDestroy {
|
|
|
1081
1903
|
/** Visible text of the calendar's "done" action, shown in the overlay when {@link showTime}. */
|
|
1082
1904
|
readonly doneLabel: _angular_core.InputSignal<string>;
|
|
1083
1905
|
/**
|
|
1084
|
-
* Accessible name for the clear button.
|
|
1085
|
-
*
|
|
1086
|
-
* is its only name.
|
|
1906
|
+
* Accessible name for the clear button. English default; an app serving more than one language MUST
|
|
1907
|
+
* translate it — it is an icon-only control, so this string is its only name.
|
|
1087
1908
|
*/
|
|
1088
1909
|
readonly clearLabel: _angular_core.InputSignal<string>;
|
|
1089
1910
|
/**
|
|
@@ -1280,7 +2101,7 @@ interface NormOption$1 {
|
|
|
1280
2101
|
*
|
|
1281
2102
|
* @example
|
|
1282
2103
|
* <sds-select [options]="services" optionLabel="name" optionValue="id"
|
|
1283
|
-
* placeholder="
|
|
2104
|
+
* placeholder="Choose a service" [(ngModel)]="serviceId" filter clearable />
|
|
1284
2105
|
*
|
|
1285
2106
|
* @example
|
|
1286
2107
|
* <sds-select [options]="categories" optionLabel="name" optionValue="id" [(ngModel)]="categoryId">
|
|
@@ -1312,6 +2133,13 @@ declare class SdsSelect implements ControlValueAccessor, OnDestroy {
|
|
|
1312
2133
|
readonly filter: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
1313
2134
|
readonly filterPlaceholder: _angular_core.InputSignal<string>;
|
|
1314
2135
|
readonly emptyMessage: _angular_core.InputSignal<string>;
|
|
2136
|
+
/**
|
|
2137
|
+
* Accessible name of the icon-only clear button (see {@link clearable}). English default; an app
|
|
2138
|
+
* serving more than one language passes a translated value — it is the button's only name.
|
|
2139
|
+
*/
|
|
2140
|
+
readonly clearLabel: _angular_core.InputSignal<string>;
|
|
2141
|
+
/** Accessible name of the filter field inside the panel (see {@link filter}). */
|
|
2142
|
+
readonly filterLabel: _angular_core.InputSignal<string>;
|
|
1315
2143
|
/** Optional projected `<ng-template sdsSelectOption>` — custom option + selected-value rendering. */
|
|
1316
2144
|
protected readonly optionTpl: _angular_core.Signal<SdsSelectOption | undefined>;
|
|
1317
2145
|
/** Optional projected `<ng-template sdsSelectEmpty>` — custom no-results content. */
|
|
@@ -1383,7 +2211,7 @@ declare class SdsSelect implements ControlValueAccessor, OnDestroy {
|
|
|
1383
2211
|
registerOnTouched(fn: () => void): void;
|
|
1384
2212
|
setDisabledState(isDisabled: boolean): void;
|
|
1385
2213
|
static ɵfac: _angular_core.ɵɵFactoryDeclaration<SdsSelect, never>;
|
|
1386
|
-
static ɵcmp: _angular_core.ɵɵComponentDeclaration<SdsSelect, "sds-select", never, { "options": { "alias": "options"; "required": false; "isSignal": true; }; "optionLabel": { "alias": "optionLabel"; "required": false; "isSignal": true; }; "optionValue": { "alias": "optionValue"; "required": false; "isSignal": true; }; "optionDisabled": { "alias": "optionDisabled"; "required": false; "isSignal": true; }; "dataKey": { "alias": "dataKey"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "hint": { "alias": "hint"; "required": false; "isSignal": true; }; "error": { "alias": "error"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "appearance": { "alias": "appearance"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "clearable": { "alias": "clearable"; "required": false; "isSignal": true; }; "filter": { "alias": "filter"; "required": false; "isSignal": true; }; "filterPlaceholder": { "alias": "filterPlaceholder"; "required": false; "isSignal": true; }; "emptyMessage": { "alias": "emptyMessage"; "required": false; "isSignal": true; }; }, {}, ["optionTpl", "emptyTpl", "footerTpl"], never, true, never>;
|
|
2214
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<SdsSelect, "sds-select", never, { "options": { "alias": "options"; "required": false; "isSignal": true; }; "optionLabel": { "alias": "optionLabel"; "required": false; "isSignal": true; }; "optionValue": { "alias": "optionValue"; "required": false; "isSignal": true; }; "optionDisabled": { "alias": "optionDisabled"; "required": false; "isSignal": true; }; "dataKey": { "alias": "dataKey"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "hint": { "alias": "hint"; "required": false; "isSignal": true; }; "error": { "alias": "error"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "appearance": { "alias": "appearance"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "clearable": { "alias": "clearable"; "required": false; "isSignal": true; }; "filter": { "alias": "filter"; "required": false; "isSignal": true; }; "filterPlaceholder": { "alias": "filterPlaceholder"; "required": false; "isSignal": true; }; "emptyMessage": { "alias": "emptyMessage"; "required": false; "isSignal": true; }; "clearLabel": { "alias": "clearLabel"; "required": false; "isSignal": true; }; "filterLabel": { "alias": "filterLabel"; "required": false; "isSignal": true; }; }, {}, ["optionTpl", "emptyTpl", "footerTpl"], never, true, never>;
|
|
1387
2215
|
}
|
|
1388
2216
|
|
|
1389
2217
|
type SdsMultiSelectSize = 'sm' | 'md' | 'lg';
|
|
@@ -1450,6 +2278,17 @@ declare class SdsMultiSelect implements ControlValueAccessor, OnDestroy {
|
|
|
1450
2278
|
readonly filter: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
1451
2279
|
readonly filterPlaceholder: _angular_core.InputSignal<string>;
|
|
1452
2280
|
readonly emptyMessage: _angular_core.InputSignal<string>;
|
|
2281
|
+
/**
|
|
2282
|
+
* Accessible name of a chip's icon-only remove button (`display="chip"`); `{label}` is the option's
|
|
2283
|
+
* label. English defaults throughout — an app serving more than one language passes translations.
|
|
2284
|
+
*/
|
|
2285
|
+
readonly removeLabel: _angular_core.InputSignal<string>;
|
|
2286
|
+
/** Accessible name of the icon-only clear-all button (see {@link clearable}). */
|
|
2287
|
+
readonly clearLabel: _angular_core.InputSignal<string>;
|
|
2288
|
+
/** Accessible name of the filter field inside the panel (see {@link filter}). */
|
|
2289
|
+
readonly filterLabel: _angular_core.InputSignal<string>;
|
|
2290
|
+
/** Visible text of the "select all" row (see {@link showToggleAll}). */
|
|
2291
|
+
readonly selectAllLabel: _angular_core.InputSignal<string>;
|
|
1453
2292
|
/** Optional projected `<ng-template sdsSelectOption>` — custom option-row rendering. */
|
|
1454
2293
|
protected readonly optionTpl: _angular_core.Signal<SdsSelectOption | undefined>;
|
|
1455
2294
|
/** Optional projected `<ng-template sdsSelectEmpty>` — custom no-results content. */
|
|
@@ -1527,7 +2366,7 @@ declare class SdsMultiSelect implements ControlValueAccessor, OnDestroy {
|
|
|
1527
2366
|
registerOnTouched(fn: () => void): void;
|
|
1528
2367
|
setDisabledState(isDisabled: boolean): void;
|
|
1529
2368
|
static ɵfac: _angular_core.ɵɵFactoryDeclaration<SdsMultiSelect, never>;
|
|
1530
|
-
static ɵcmp: _angular_core.ɵɵComponentDeclaration<SdsMultiSelect, "sds-multi-select", never, { "options": { "alias": "options"; "required": false; "isSignal": true; }; "optionLabel": { "alias": "optionLabel"; "required": false; "isSignal": true; }; "optionValue": { "alias": "optionValue"; "required": false; "isSignal": true; }; "optionDisabled": { "alias": "optionDisabled"; "required": false; "isSignal": true; }; "dataKey": { "alias": "dataKey"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "hint": { "alias": "hint"; "required": false; "isSignal": true; }; "error": { "alias": "error"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "display": { "alias": "display"; "required": false; "isSignal": true; }; "maxSelectedLabels": { "alias": "maxSelectedLabels"; "required": false; "isSignal": true; }; "selectedItemsLabel": { "alias": "selectedItemsLabel"; "required": false; "isSignal": true; }; "showToggleAll": { "alias": "showToggleAll"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "clearable": { "alias": "clearable"; "required": false; "isSignal": true; }; "filter": { "alias": "filter"; "required": false; "isSignal": true; }; "filterPlaceholder": { "alias": "filterPlaceholder"; "required": false; "isSignal": true; }; "emptyMessage": { "alias": "emptyMessage"; "required": false; "isSignal": true; }; }, {}, ["optionTpl", "emptyTpl", "footerTpl"], never, true, never>;
|
|
2369
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<SdsMultiSelect, "sds-multi-select", never, { "options": { "alias": "options"; "required": false; "isSignal": true; }; "optionLabel": { "alias": "optionLabel"; "required": false; "isSignal": true; }; "optionValue": { "alias": "optionValue"; "required": false; "isSignal": true; }; "optionDisabled": { "alias": "optionDisabled"; "required": false; "isSignal": true; }; "dataKey": { "alias": "dataKey"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "hint": { "alias": "hint"; "required": false; "isSignal": true; }; "error": { "alias": "error"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "display": { "alias": "display"; "required": false; "isSignal": true; }; "maxSelectedLabels": { "alias": "maxSelectedLabels"; "required": false; "isSignal": true; }; "selectedItemsLabel": { "alias": "selectedItemsLabel"; "required": false; "isSignal": true; }; "showToggleAll": { "alias": "showToggleAll"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "clearable": { "alias": "clearable"; "required": false; "isSignal": true; }; "filter": { "alias": "filter"; "required": false; "isSignal": true; }; "filterPlaceholder": { "alias": "filterPlaceholder"; "required": false; "isSignal": true; }; "emptyMessage": { "alias": "emptyMessage"; "required": false; "isSignal": true; }; "removeLabel": { "alias": "removeLabel"; "required": false; "isSignal": true; }; "clearLabel": { "alias": "clearLabel"; "required": false; "isSignal": true; }; "filterLabel": { "alias": "filterLabel"; "required": false; "isSignal": true; }; "selectAllLabel": { "alias": "selectAllLabel"; "required": false; "isSignal": true; }; }, {}, ["optionTpl", "emptyTpl", "footerTpl"], never, true, never>;
|
|
1531
2370
|
}
|
|
1532
2371
|
|
|
1533
2372
|
/**
|
|
@@ -1541,7 +2380,10 @@ declare class SdsMultiSelect implements ControlValueAccessor, OnDestroy {
|
|
|
1541
2380
|
interface SdsPhoneCountry {
|
|
1542
2381
|
/** ISO 3166-1 alpha-2 code, e.g. 'BE'. */
|
|
1543
2382
|
iso2: string;
|
|
1544
|
-
/**
|
|
2383
|
+
/**
|
|
2384
|
+
* English display name (the fallback). `<sds-phone-input [locale]>` shows the name in that locale
|
|
2385
|
+
* via `Intl.DisplayNames` instead.
|
|
2386
|
+
*/
|
|
1545
2387
|
name: string;
|
|
1546
2388
|
/** International dial code without '+', e.g. '32'. */
|
|
1547
2389
|
dialCode: string;
|
|
@@ -1584,7 +2426,7 @@ interface SdsPhoneValue {
|
|
|
1584
2426
|
* '+32470123456') and Validator (national length is checked per country).
|
|
1585
2427
|
*
|
|
1586
2428
|
* @example
|
|
1587
|
-
* <sds-phone-input label="
|
|
2429
|
+
* <sds-phone-input label="Phone" defaultCountry="BE"
|
|
1588
2430
|
* [preferredCountries]="['BE','FR','LU']"
|
|
1589
2431
|
* [(ngModel)]="phone" required />
|
|
1590
2432
|
*/
|
|
@@ -1609,19 +2451,22 @@ declare class SdsPhoneInput implements ControlValueAccessor, Validator, OnDestro
|
|
|
1609
2451
|
readonly onlyCountries: _angular_core.InputSignal<string[]>;
|
|
1610
2452
|
/** Show an example number as a hint when no [hint] is provided. */
|
|
1611
2453
|
readonly showExampleHint: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
2454
|
+
/**
|
|
2455
|
+
* BCP 47 locale for the country names (list, search and the selector's accessible name), resolved
|
|
2456
|
+
* with `Intl.DisplayNames` — e.g. `nl-BE` shows "België". Empty (default) uses the built-in English
|
|
2457
|
+
* names. The search also matches the English name.
|
|
2458
|
+
*/
|
|
2459
|
+
readonly locale: _angular_core.InputSignal<string>;
|
|
1612
2460
|
readonly requiredMessage: _angular_core.InputSignal<string>;
|
|
1613
2461
|
/**
|
|
1614
2462
|
* Accessible name of the country selector. `{country}` is replaced with the selected country's
|
|
1615
|
-
* name. A token rather than a prefix because word order differs per
|
|
1616
|
-
*
|
|
1617
|
-
*
|
|
1618
|
-
* Note the interpolated country NAME still comes from the library's built-in country table, which
|
|
1619
|
-
* is French-only — translating this template fixes the wrapper, not the name inside it.
|
|
2463
|
+
* name (localised by {@link locale}). A token rather than a prefix because word order differs per
|
|
2464
|
+
* language. English default; translate it in any app serving more than one language.
|
|
1620
2465
|
*/
|
|
1621
2466
|
readonly countryLabel: _angular_core.InputSignal<string>;
|
|
1622
2467
|
/**
|
|
1623
2468
|
* Accessible name for the clear button. It is icon-only, so this string is its ONLY accessible
|
|
1624
|
-
* name —
|
|
2469
|
+
* name — translate it in any app serving more than one language.
|
|
1625
2470
|
*/
|
|
1626
2471
|
readonly clearLabel: _angular_core.InputSignal<string>;
|
|
1627
2472
|
/** Accessible name for the country-search field inside the dropdown. */
|
|
@@ -1632,12 +2477,12 @@ declare class SdsPhoneInput implements ControlValueAccessor, Validator, OnDestro
|
|
|
1632
2477
|
readonly noResultsLabel: _angular_core.InputSignal<string>;
|
|
1633
2478
|
/**
|
|
1634
2479
|
* Built-in validation messages. `{lengths}` is replaced with the country's accepted national
|
|
1635
|
-
* lengths, joined with {@link lengthSeparator}.
|
|
1636
|
-
*
|
|
2480
|
+
* lengths, joined with {@link lengthSeparator}. English defaults; translate them alongside
|
|
2481
|
+
* {@link requiredMessage}.
|
|
1637
2482
|
*/
|
|
1638
2483
|
readonly incompleteMessage: _angular_core.InputSignal<string>;
|
|
1639
2484
|
readonly invalidMessage: _angular_core.InputSignal<string>;
|
|
1640
|
-
/** Joins the accepted lengths when a country allows more than one (e.g. "8
|
|
2485
|
+
/** Joins the accepted lengths when a country allows more than one (e.g. "8 or 9"). */
|
|
1641
2486
|
readonly lengthSeparator: _angular_core.InputSignal<string>;
|
|
1642
2487
|
/**
|
|
1643
2488
|
* Auto-generated example hint (see {@link showExampleHint}). `{number}` is replaced with the
|
|
@@ -1646,6 +2491,10 @@ declare class SdsPhoneInput implements ControlValueAccessor, Validator, OnDestro
|
|
|
1646
2491
|
readonly exampleHintTemplate: _angular_core.InputSignal<string>;
|
|
1647
2492
|
/** Emitted with the parsed parts whenever the number or country changes. */
|
|
1648
2493
|
readonly phoneChange: _angular_core.OutputEmitterRef<SdsPhoneValue>;
|
|
2494
|
+
/** `Intl.DisplayNames` for {@link locale}, or null (built-in English names). */
|
|
2495
|
+
private readonly regionNames;
|
|
2496
|
+
/** The country's display name in {@link locale}, falling back to the built-in English name. */
|
|
2497
|
+
protected countryName(c: SdsPhoneCountry): string;
|
|
1649
2498
|
protected readonly national: _angular_core.WritableSignal<string>;
|
|
1650
2499
|
protected readonly countryIso: _angular_core.WritableSignal<string>;
|
|
1651
2500
|
protected readonly open: _angular_core.WritableSignal<boolean>;
|
|
@@ -1705,7 +2554,7 @@ declare class SdsPhoneInput implements ControlValueAccessor, Validator, OnDestro
|
|
|
1705
2554
|
validate(_control: AbstractControl): ValidationErrors | null;
|
|
1706
2555
|
registerOnValidatorChange(fn: () => void): void;
|
|
1707
2556
|
static ɵfac: _angular_core.ɵɵFactoryDeclaration<SdsPhoneInput, never>;
|
|
1708
|
-
static ɵcmp: _angular_core.ɵɵComponentDeclaration<SdsPhoneInput, "sds-phone-input", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; "hint": { "alias": "hint"; "required": false; "isSignal": true; }; "error": { "alias": "error"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "clearable": { "alias": "clearable"; "required": false; "isSignal": true; }; "defaultCountry": { "alias": "defaultCountry"; "required": false; "isSignal": true; }; "preferredCountries": { "alias": "preferredCountries"; "required": false; "isSignal": true; }; "onlyCountries": { "alias": "onlyCountries"; "required": false; "isSignal": true; }; "showExampleHint": { "alias": "showExampleHint"; "required": false; "isSignal": true; }; "requiredMessage": { "alias": "requiredMessage"; "required": false; "isSignal": true; }; "countryLabel": { "alias": "countryLabel"; "required": false; "isSignal": true; }; "clearLabel": { "alias": "clearLabel"; "required": false; "isSignal": true; }; "searchLabel": { "alias": "searchLabel"; "required": false; "isSignal": true; }; "searchPlaceholder": { "alias": "searchPlaceholder"; "required": false; "isSignal": true; }; "noResultsLabel": { "alias": "noResultsLabel"; "required": false; "isSignal": true; }; "incompleteMessage": { "alias": "incompleteMessage"; "required": false; "isSignal": true; }; "invalidMessage": { "alias": "invalidMessage"; "required": false; "isSignal": true; }; "lengthSeparator": { "alias": "lengthSeparator"; "required": false; "isSignal": true; }; "exampleHintTemplate": { "alias": "exampleHintTemplate"; "required": false; "isSignal": true; }; }, { "phoneChange": "phoneChange"; }, never, never, true, never>;
|
|
2557
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<SdsPhoneInput, "sds-phone-input", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; "hint": { "alias": "hint"; "required": false; "isSignal": true; }; "error": { "alias": "error"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "clearable": { "alias": "clearable"; "required": false; "isSignal": true; }; "defaultCountry": { "alias": "defaultCountry"; "required": false; "isSignal": true; }; "preferredCountries": { "alias": "preferredCountries"; "required": false; "isSignal": true; }; "onlyCountries": { "alias": "onlyCountries"; "required": false; "isSignal": true; }; "showExampleHint": { "alias": "showExampleHint"; "required": false; "isSignal": true; }; "locale": { "alias": "locale"; "required": false; "isSignal": true; }; "requiredMessage": { "alias": "requiredMessage"; "required": false; "isSignal": true; }; "countryLabel": { "alias": "countryLabel"; "required": false; "isSignal": true; }; "clearLabel": { "alias": "clearLabel"; "required": false; "isSignal": true; }; "searchLabel": { "alias": "searchLabel"; "required": false; "isSignal": true; }; "searchPlaceholder": { "alias": "searchPlaceholder"; "required": false; "isSignal": true; }; "noResultsLabel": { "alias": "noResultsLabel"; "required": false; "isSignal": true; }; "incompleteMessage": { "alias": "incompleteMessage"; "required": false; "isSignal": true; }; "invalidMessage": { "alias": "invalidMessage"; "required": false; "isSignal": true; }; "lengthSeparator": { "alias": "lengthSeparator"; "required": false; "isSignal": true; }; "exampleHintTemplate": { "alias": "exampleHintTemplate"; "required": false; "isSignal": true; }; }, { "phoneChange": "phoneChange"; }, never, never, true, never>;
|
|
1709
2558
|
}
|
|
1710
2559
|
|
|
1711
2560
|
type SdsPaginatorSize = 'sm' | 'md' | 'lg';
|
|
@@ -1847,7 +2696,7 @@ declare class SdsTabsStore {
|
|
|
1847
2696
|
* @example
|
|
1848
2697
|
* <sds-tabs [(value)]="active">
|
|
1849
2698
|
* <sds-tab-list>
|
|
1850
|
-
* <sds-tab value="0">
|
|
2699
|
+
* <sds-tab value="0">Details</sds-tab>
|
|
1851
2700
|
* <sds-tab value="1">Historique</sds-tab>
|
|
1852
2701
|
* </sds-tab-list>
|
|
1853
2702
|
* <sds-tab-panels>
|
|
@@ -2011,6 +2860,51 @@ declare class SdsAccordionContent {
|
|
|
2011
2860
|
static ɵcmp: _angular_core.ɵɵComponentDeclaration<SdsAccordionContent, "sds-accordion-content", never, {}, {}, never, ["*"], true, never>;
|
|
2012
2861
|
}
|
|
2013
2862
|
|
|
2863
|
+
/**
|
|
2864
|
+
* Typed context handed to a custom header template (see {@link SdsTableHeader}), so a header can
|
|
2865
|
+
* act on the table's rows — e.g. a "select all" checkbox over a custom selection column.
|
|
2866
|
+
*/
|
|
2867
|
+
interface SdsTableHeaderContext {
|
|
2868
|
+
/** Same as {@link column} — enables the `let-col` (implicit) binding. */
|
|
2869
|
+
$implicit: SdsTableColumn;
|
|
2870
|
+
/** The column definition this header belongs to. */
|
|
2871
|
+
column: SdsTableColumn;
|
|
2872
|
+
/** Zero-based index of the column in its current (possibly reordered) order. */
|
|
2873
|
+
index: number;
|
|
2874
|
+
/** Every row that passes the global filter, across all pages (the `value` slice when `lazy`). */
|
|
2875
|
+
rows: readonly any[];
|
|
2876
|
+
/** The rows of the page currently displayed. */
|
|
2877
|
+
pageRows: readonly any[];
|
|
2878
|
+
}
|
|
2879
|
+
/**
|
|
2880
|
+
* Supplies a custom template for a column's header cell, matched by its field key. The template
|
|
2881
|
+
* replaces the header's whole content — label and sort button — so it may hold its own controls
|
|
2882
|
+
* (a column with a header template is not sortable from the header). Typical use: a "select all"
|
|
2883
|
+
* checkbox above a checkbox column rendered with `sdsCell`.
|
|
2884
|
+
*
|
|
2885
|
+
* @example
|
|
2886
|
+
* <sds-table [value]="rows" [columns]="cols" dataKey="id">
|
|
2887
|
+
* <ng-template sdsHeader="select" let-rows="rows">
|
|
2888
|
+
* <sds-checkbox ariaLabel="Select all rows" [ngModel]="allSelected(rows)"
|
|
2889
|
+
* [indeterminate]="someSelected(rows)" (ngModelChange)="selectAll(rows, $event)" />
|
|
2890
|
+
* </ng-template>
|
|
2891
|
+
* <ng-template sdsCell="select" let-row="row">
|
|
2892
|
+
* <sds-checkbox [ariaLabel]="'Select ' + row.name" [ngModel]="isSelected(row)"
|
|
2893
|
+
* (ngModelChange)="toggle(row, $event)" />
|
|
2894
|
+
* </ng-template>
|
|
2895
|
+
* </sds-table>
|
|
2896
|
+
*/
|
|
2897
|
+
declare class SdsTableHeader {
|
|
2898
|
+
/** The column `field` whose header this template renders. */
|
|
2899
|
+
readonly column: _angular_core.InputSignal<string>;
|
|
2900
|
+
/** The wrapped template, rendered by the host table via ngTemplateOutlet. */
|
|
2901
|
+
readonly template: TemplateRef<SdsTableHeaderContext>;
|
|
2902
|
+
/** Lets the compiler type-check `let-*` bindings against SdsTableHeaderContext. */
|
|
2903
|
+
static ngTemplateContextGuard(_dir: SdsTableHeader, _ctx: unknown): _ctx is SdsTableHeaderContext;
|
|
2904
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<SdsTableHeader, never>;
|
|
2905
|
+
static ɵdir: _angular_core.ɵɵDirectiveDeclaration<SdsTableHeader, "ng-template[sdsHeader]", never, { "column": { "alias": "sdsHeader"; "required": true; "isSignal": true; }; }, {}, never, never, true, never>;
|
|
2906
|
+
}
|
|
2907
|
+
|
|
2014
2908
|
/** Column configuration. `field` may be a dot-path (e.g. `service.name`). */
|
|
2015
2909
|
interface SdsTableColumn {
|
|
2016
2910
|
/** Row field rendered in this column. Supports dot-paths. */
|
|
@@ -2023,7 +2917,52 @@ interface SdsTableColumn {
|
|
|
2023
2917
|
align?: 'left' | 'center' | 'right';
|
|
2024
2918
|
/** Fixed column width, e.g. `'120px'` or `'20%'`. */
|
|
2025
2919
|
width?: string;
|
|
2920
|
+
/** Makes the column's cells editable with this editor. */
|
|
2921
|
+
editor?: SdsTableEditor;
|
|
2922
|
+
/** Lock individual cells of an editable column: `false`, or a per-row predicate. Default true. */
|
|
2923
|
+
editable?: boolean | ((row: any) => boolean);
|
|
2924
|
+
/** Choices for the `select` editor (also used to display the chosen label). */
|
|
2925
|
+
options?: SdsTableSelectOption[];
|
|
2926
|
+
/** `number` / `currency` editor: bounds, step and fraction digits (as on sds-input-number). */
|
|
2927
|
+
min?: number;
|
|
2928
|
+
max?: number;
|
|
2929
|
+
step?: number;
|
|
2930
|
+
minFractionDigits?: number;
|
|
2931
|
+
maxFractionDigits?: number;
|
|
2932
|
+
/** `currency` editor: ISO 4217 code. Default `EUR`. */
|
|
2933
|
+
currency?: string;
|
|
2934
|
+
/** Locale for the number/currency editor and display. Defaults to the table's [locale]. */
|
|
2935
|
+
locale?: string;
|
|
2936
|
+
/** Placeholder shown in the editor. */
|
|
2937
|
+
placeholder?: string;
|
|
2938
|
+
/** Display formatter for the cell (view mode, when no `sdsCell` template is given). */
|
|
2939
|
+
format?: (value: unknown, row: any) => string;
|
|
2940
|
+
}
|
|
2941
|
+
/** Cell editors of an editable column. `number`/`currency` reuse sds-input-number. */
|
|
2942
|
+
type SdsTableEditor = 'text' | 'number' | 'currency' | 'select';
|
|
2943
|
+
/** One choice of a `select` column. */
|
|
2944
|
+
interface SdsTableSelectOption {
|
|
2945
|
+
label: string;
|
|
2946
|
+
value: unknown;
|
|
2026
2947
|
}
|
|
2948
|
+
/**
|
|
2949
|
+
* Per-cell error messages: `{ [rowKey]: { [field]: message } }`. `rowKey` is the row's `dataKey`
|
|
2950
|
+
* value (or, without a dataKey, its index in `value`). A falsy message means no error.
|
|
2951
|
+
*/
|
|
2952
|
+
type SdsTableCellErrors = Record<string, Record<string, string | null | undefined>>;
|
|
2953
|
+
/** Emitted when an edited cell is committed with a changed value. */
|
|
2954
|
+
interface SdsTableCellCommitEvent {
|
|
2955
|
+
row: any;
|
|
2956
|
+
field: string;
|
|
2957
|
+
value: unknown;
|
|
2958
|
+
previousValue: unknown;
|
|
2959
|
+
/** The row's dataKey value (or its index in `value` without a dataKey). */
|
|
2960
|
+
rowKey: unknown;
|
|
2961
|
+
/** Index of the row in the `value` input. */
|
|
2962
|
+
rowIndex: number;
|
|
2963
|
+
}
|
|
2964
|
+
/** When a click starts editing an editable cell. */
|
|
2965
|
+
type SdsTableEditTrigger = 'click' | 'dblclick';
|
|
2027
2966
|
type SdsTableSize = 'sm' | 'md' | 'lg';
|
|
2028
2967
|
/** 1 = ascending, -1 = descending, 0 = unsorted. */
|
|
2029
2968
|
type SdsSortOrder = 1 | -1 | 0;
|
|
@@ -2057,15 +2996,37 @@ type SdsSelectionMode = 'single' | 'multiple' | null;
|
|
|
2057
2996
|
* across all pages**, not just the current page. Toggling it selects/clears
|
|
2058
2997
|
* every filtered row regardless of pagination (this is an intentional
|
|
2059
2998
|
* deviation from PrimeNG's per-page select-all).
|
|
2999
|
+
* - **Custom headers:** `<ng-template sdsHeader="field">` replaces a column's header content (label and
|
|
3000
|
+
* sort button) — e.g. a "select all" checkbox above your own checkbox column. Its context carries the
|
|
3001
|
+
* filtered `rows` (all pages) and the displayed `pageRows` (see {@link SdsTableHeaderContext}).
|
|
3002
|
+
* - **Labels:** every visible and spoken string is an input with an English default (paginator,
|
|
3003
|
+
* filter, selection, expansion, editor). An app serving more than one language passes translations.
|
|
3004
|
+
*
|
|
3005
|
+
* **Editable grid (opt-in).** Set `editable` and give columns an `editor` (`text` · `number` ·
|
|
3006
|
+
* `currency` · `select`). The table becomes an ARIA grid with one tab stop: arrow keys move between
|
|
3007
|
+
* cells (Home/End, Ctrl+Home/End), Enter or F2 edits (typing a character starts editing with it),
|
|
3008
|
+
* Enter commits and moves down (Shift+Enter up), Tab / Shift+Tab commit and move to the next/previous
|
|
3009
|
+
* editable cell, Escape cancels (and is stopped, so an enclosing drawer stays open), clicking elsewhere
|
|
3010
|
+
* commits. Each changed commit emits `(cellCommit)` — the host applies it to its data (the table never
|
|
3011
|
+
* mutates rows) — and marks the cell dirty until {@link clearDirty}. Errors from `[cellErrors]` show
|
|
3012
|
+
* under the cell with `aria-invalid`. Number/currency cells use sds-input-number (live, locale-aware
|
|
3013
|
+
* formatting: "11,9" → "€11.90"; in a comma locale such as fr-BE or nl-BE a typed "." is taken as the
|
|
3014
|
+
* decimal separator, so "12.50" → "12,50 €"). The `select` editor is a styled native select with the
|
|
3015
|
+
* column header as its name. Everything else — sort, paging, selection — is unchanged.
|
|
2060
3016
|
*
|
|
2061
3017
|
* @example
|
|
2062
3018
|
* <sds-table [value]="staff" [columns]="cols" dataKey="id"
|
|
2063
3019
|
* sortable paginator [rows]="10" globalFilter
|
|
2064
3020
|
* selectionMode="multiple" [(selection)]="selected">
|
|
2065
|
-
* <ng-template sdsCell="
|
|
2066
|
-
* <sds-badge [variant]="row.
|
|
3021
|
+
* <ng-template sdsCell="status" let-value let-row="row">
|
|
3022
|
+
* <sds-badge [variant]="row.active ? 'success' : 'neutral'">{{ value }}</sds-badge>
|
|
2067
3023
|
* </ng-template>
|
|
2068
3024
|
* </sds-table>
|
|
3025
|
+
*
|
|
3026
|
+
* @example
|
|
3027
|
+
* <sds-table [value]="drafts()" [columns]="[{ field: 'name', header: 'Name', editor: 'text' },
|
|
3028
|
+
* { field: 'price', header: 'Price', editor: 'currency', align: 'right' }]"
|
|
3029
|
+
* dataKey="id" editable [cellErrors]="errors()" (cellCommit)="apply($event)" />
|
|
2069
3030
|
*/
|
|
2070
3031
|
declare class SdsTable implements OnDestroy {
|
|
2071
3032
|
protected readonly tableId: string;
|
|
@@ -2123,6 +3084,30 @@ declare class SdsTable implements OnDestroy {
|
|
|
2123
3084
|
readonly resizableColumns: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
2124
3085
|
/** Drag a column header to reorder columns. */
|
|
2125
3086
|
readonly reorderableColumns: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
3087
|
+
/** Turn on the editable grid (columns opt in with `editor`). Off: the table is unchanged. */
|
|
3088
|
+
readonly editable: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
3089
|
+
/** Whether a single click (default) or a double click starts editing an editable cell. */
|
|
3090
|
+
readonly editOn: _angular_core.InputSignal<SdsTableEditTrigger>;
|
|
3091
|
+
/** Per-cell error messages, keyed by row key then field (see {@link SdsTableCellErrors}). */
|
|
3092
|
+
readonly cellErrors: _angular_core.InputSignal<SdsTableCellErrors>;
|
|
3093
|
+
/** Default locale for number/currency cells (a column's `locale` wins). Empty = the browser's. */
|
|
3094
|
+
readonly locale: _angular_core.InputSignal<string>;
|
|
3095
|
+
/** Spoken marker of an edited (dirty) cell. */
|
|
3096
|
+
readonly dirtyLabel: _angular_core.InputSignal<string>;
|
|
3097
|
+
/** Empty choice of a `select` editor while the cell has no value (a column's `placeholder` wins). */
|
|
3098
|
+
readonly selectPlaceholder: _angular_core.InputSignal<string>;
|
|
3099
|
+
/**
|
|
3100
|
+
* Selection and expansion labels (English defaults; translate them in a multi-language app). The
|
|
3101
|
+
* checkbox/radio and expander buttons are icon-only, so these strings are their only names.
|
|
3102
|
+
*/
|
|
3103
|
+
readonly selectAllLabel: _angular_core.InputSignal<string>;
|
|
3104
|
+
readonly selectRowLabel: _angular_core.InputSignal<string>;
|
|
3105
|
+
/** Screen-reader name of the selection column's header in `single` mode. */
|
|
3106
|
+
readonly selectionColumnLabel: _angular_core.InputSignal<string>;
|
|
3107
|
+
/** Screen-reader name of the expander column's header (see {@link expandable}). */
|
|
3108
|
+
readonly expandColumnLabel: _angular_core.InputSignal<string>;
|
|
3109
|
+
readonly expandRowLabel: _angular_core.InputSignal<string>;
|
|
3110
|
+
readonly collapseRowLabel: _angular_core.InputSignal<string>;
|
|
2126
3111
|
readonly sortChange: _angular_core.OutputEmitterRef<SdsTableSortEvent>;
|
|
2127
3112
|
readonly pageChange: _angular_core.OutputEmitterRef<SdsPaginatorState>;
|
|
2128
3113
|
readonly rowSelect: _angular_core.OutputEmitterRef<any>;
|
|
@@ -2139,9 +3124,15 @@ declare class SdsTable implements OnDestroy {
|
|
|
2139
3124
|
fromIndex: number;
|
|
2140
3125
|
toIndex: number;
|
|
2141
3126
|
}>;
|
|
3127
|
+
/** Emitted when an edited cell is committed with a CHANGED value. Apply it to your data. */
|
|
3128
|
+
readonly cellCommit: _angular_core.OutputEmitterRef<SdsTableCellCommitEvent>;
|
|
2142
3129
|
private readonly cellTemplates;
|
|
2143
3130
|
private readonly templateMap;
|
|
2144
3131
|
protected templateFor(field: string): _angular_core.TemplateRef<SdsTableCellContext> | null;
|
|
3132
|
+
private readonly headerTemplates;
|
|
3133
|
+
private readonly headerTemplateMap;
|
|
3134
|
+
protected headerTemplateFor(field: string): _angular_core.TemplateRef<SdsTableHeaderContext> | null;
|
|
3135
|
+
protected headerContext(column: SdsTableColumn, index: number): SdsTableHeaderContext;
|
|
2145
3136
|
private readonly rowExpansion;
|
|
2146
3137
|
protected expansionTemplate(): _angular_core.TemplateRef<_besaitech_ng_design_system.SdsTableRowExpansionContext> | null;
|
|
2147
3138
|
protected readonly filterText: _angular_core.WritableSignal<string>;
|
|
@@ -2215,12 +3206,68 @@ declare class SdsTable implements OnDestroy {
|
|
|
2215
3206
|
protected onColDragOver(e: DragEvent): void;
|
|
2216
3207
|
protected onColDrop(e: DragEvent, toIndex: number): void;
|
|
2217
3208
|
protected trackRow(index: number, row: any): unknown;
|
|
3209
|
+
private readonly host;
|
|
3210
|
+
private readonly injector;
|
|
3211
|
+
private readonly numberEditor;
|
|
3212
|
+
/** The roving tab stop (row index in the displayed page, column index). */
|
|
3213
|
+
private readonly activeCell;
|
|
3214
|
+
/** The cell being edited, if any. */
|
|
3215
|
+
private readonly editing;
|
|
3216
|
+
/** The editor's working value. */
|
|
3217
|
+
protected readonly draft: _angular_core.WritableSignal<unknown>;
|
|
3218
|
+
/** Edited cells: row key → fields. */
|
|
3219
|
+
private readonly dirty;
|
|
3220
|
+
/** Set while the table moves focus itself, so the editor's blur doesn't commit twice. */
|
|
3221
|
+
private suppressBlur;
|
|
3222
|
+
/** Active cell clamped to the current page and columns. */
|
|
3223
|
+
private readonly tabStop;
|
|
3224
|
+
protected readonly draftText: _angular_core.Signal<string>;
|
|
3225
|
+
protected isTabStop(r: number, c: number): boolean;
|
|
3226
|
+
protected isEditing(r: number, c: number): boolean;
|
|
3227
|
+
protected isCellEditable(row: any, col: SdsTableColumn): boolean;
|
|
3228
|
+
/** Row key used by dirty tracking, errors and commit events. */
|
|
3229
|
+
private rowKeyOf;
|
|
3230
|
+
protected cellErrorFor(row: any, field: string): string | null;
|
|
3231
|
+
protected cellErrorId(r: number, c: number): string;
|
|
3232
|
+
protected isDirty(row: any, field: string): boolean;
|
|
3233
|
+
/** Forget the dirty marks — all of them, or one row's (by row key). */
|
|
3234
|
+
clearDirty(rowKey?: unknown): void;
|
|
3235
|
+
/** Display text of a cell in view mode: `format`, else the editor's formatting, else the raw value. */
|
|
3236
|
+
protected displayCell(row: any, col: SdsTableColumn): string;
|
|
3237
|
+
/** Shared frame of the in-cell editors (text, select): height, radius, focus ring, error state. */
|
|
3238
|
+
protected editorClass(row: any, col: SdsTableColumn): string;
|
|
3239
|
+
protected gridCellClass(row: any, col: SdsTableColumn, r: number, c: number): string;
|
|
3240
|
+
protected onCellFocus(r: number, c: number): void;
|
|
3241
|
+
protected onCellClick(event: MouseEvent, r: number, c: number): void;
|
|
3242
|
+
protected onCellDblClick(event: MouseEvent, r: number, c: number): void;
|
|
3243
|
+
/**
|
|
3244
|
+
* Start editing a cell of the displayed page (e.g. the first cell of a row you just added).
|
|
3245
|
+
* `field` names the column. Returns false when the cell isn't editable.
|
|
3246
|
+
*/
|
|
3247
|
+
editCell(rowIndex: number, field: string): boolean;
|
|
3248
|
+
private startEdit;
|
|
3249
|
+
private focusEditor;
|
|
3250
|
+
protected onTextEditorInput(event: Event): void;
|
|
3251
|
+
protected onSelectEditorChange(event: Event, col: SdsTableColumn): void;
|
|
3252
|
+
/** Focus left the editor (a click elsewhere): commit, but don't pull focus back. */
|
|
3253
|
+
protected onEditorBlur(): void;
|
|
3254
|
+
/**
|
|
3255
|
+
* Commit the edit. `move` picks the next active cell; `refocus` puts focus back on the grid (not when
|
|
3256
|
+
* the user clicked away).
|
|
3257
|
+
*/
|
|
3258
|
+
private commitEdit;
|
|
3259
|
+
private cancelEdit;
|
|
3260
|
+
/** The next editable cell in reading order (wrapping rows), or null at the grid's edge. */
|
|
3261
|
+
private nextEditable;
|
|
3262
|
+
private cellEl;
|
|
3263
|
+
private focusCellSoon;
|
|
3264
|
+
protected onGridKeydown(event: KeyboardEvent): void;
|
|
2218
3265
|
protected headCellClass(col?: SdsTableColumn): string;
|
|
2219
3266
|
protected cellClass(col?: SdsTableColumn): string;
|
|
2220
3267
|
protected rowClass(row: any, index: number): string;
|
|
2221
3268
|
protected checkboxClass(checked: boolean, indeterminate: boolean): string;
|
|
2222
3269
|
static ɵfac: _angular_core.ɵɵFactoryDeclaration<SdsTable, never>;
|
|
2223
|
-
static ɵcmp: _angular_core.ɵɵComponentDeclaration<SdsTable, "sds-table", never, { "value": { "alias": "value"; "required": false; "isSignal": true; }; "columns": { "alias": "columns"; "required": false; "isSignal": true; }; "dataKey": { "alias": "dataKey"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "striped": { "alias": "striped"; "required": false; "isSignal": true; }; "gridlines": { "alias": "gridlines"; "required": false; "isSignal": true; }; "hoverable": { "alias": "hoverable"; "required": false; "isSignal": true; }; "sortable": { "alias": "sortable"; "required": false; "isSignal": true; }; "paginator": { "alias": "paginator"; "required": false; "isSignal": true; }; "rows": { "alias": "rows"; "required": false; "isSignal": true; }; "rowsPerPageOptions": { "alias": "rowsPerPageOptions"; "required": false; "isSignal": true; }; "showCurrentPageReport": { "alias": "showCurrentPageReport"; "required": false; "isSignal": true; }; "currentPageReportTemplate": { "alias": "currentPageReportTemplate"; "required": false; "isSignal": true; }; "rowsPerPageLabel": { "alias": "rowsPerPageLabel"; "required": false; "isSignal": true; }; "paginationLabel": { "alias": "paginationLabel"; "required": false; "isSignal": true; }; "firstPageLabel": { "alias": "firstPageLabel"; "required": false; "isSignal": true; }; "previousPageLabel": { "alias": "previousPageLabel"; "required": false; "isSignal": true; }; "nextPageLabel": { "alias": "nextPageLabel"; "required": false; "isSignal": true; }; "lastPageLabel": { "alias": "lastPageLabel"; "required": false; "isSignal": true; }; "pageLinkLabel": { "alias": "pageLinkLabel"; "required": false; "isSignal": true; }; "globalFilter": { "alias": "globalFilter"; "required": false; "isSignal": true; }; "globalFilterPlaceholder": { "alias": "globalFilterPlaceholder"; "required": false; "isSignal": true; }; "globalFilterAriaLabel": { "alias": "globalFilterAriaLabel"; "required": false; "isSignal": true; }; "globalFilterFields": { "alias": "globalFilterFields"; "required": false; "isSignal": true; }; "selectionMode": { "alias": "selectionMode"; "required": false; "isSignal": true; }; "selection": { "alias": "selection"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "emptyMessage": { "alias": "emptyMessage"; "required": false; "isSignal": true; }; "caption": { "alias": "caption"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "scrollHeight": { "alias": "scrollHeight"; "required": false; "isSignal": true; }; "lazy": { "alias": "lazy"; "required": false; "isSignal": true; }; "totalRecords": { "alias": "totalRecords"; "required": false; "isSignal": true; }; "expandable": { "alias": "expandable"; "required": false; "isSignal": true; }; "resizableColumns": { "alias": "resizableColumns"; "required": false; "isSignal": true; }; "reorderableColumns": { "alias": "reorderableColumns"; "required": false; "isSignal": true; }; }, { "selection": "selectionChange"; "sortChange": "sortChange"; "pageChange": "pageChange"; "rowSelect": "rowSelect"; "rowUnselect": "rowUnselect"; "lazyLoad": "lazyLoad"; "rowClick": "rowClick"; "rowExpand": "rowExpand"; "rowCollapse": "rowCollapse"; "colReorder": "colReorder"; }, ["cellTemplates", "rowExpansion"], never, true, never>;
|
|
3270
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<SdsTable, "sds-table", never, { "value": { "alias": "value"; "required": false; "isSignal": true; }; "columns": { "alias": "columns"; "required": false; "isSignal": true; }; "dataKey": { "alias": "dataKey"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "striped": { "alias": "striped"; "required": false; "isSignal": true; }; "gridlines": { "alias": "gridlines"; "required": false; "isSignal": true; }; "hoverable": { "alias": "hoverable"; "required": false; "isSignal": true; }; "sortable": { "alias": "sortable"; "required": false; "isSignal": true; }; "paginator": { "alias": "paginator"; "required": false; "isSignal": true; }; "rows": { "alias": "rows"; "required": false; "isSignal": true; }; "rowsPerPageOptions": { "alias": "rowsPerPageOptions"; "required": false; "isSignal": true; }; "showCurrentPageReport": { "alias": "showCurrentPageReport"; "required": false; "isSignal": true; }; "currentPageReportTemplate": { "alias": "currentPageReportTemplate"; "required": false; "isSignal": true; }; "rowsPerPageLabel": { "alias": "rowsPerPageLabel"; "required": false; "isSignal": true; }; "paginationLabel": { "alias": "paginationLabel"; "required": false; "isSignal": true; }; "firstPageLabel": { "alias": "firstPageLabel"; "required": false; "isSignal": true; }; "previousPageLabel": { "alias": "previousPageLabel"; "required": false; "isSignal": true; }; "nextPageLabel": { "alias": "nextPageLabel"; "required": false; "isSignal": true; }; "lastPageLabel": { "alias": "lastPageLabel"; "required": false; "isSignal": true; }; "pageLinkLabel": { "alias": "pageLinkLabel"; "required": false; "isSignal": true; }; "globalFilter": { "alias": "globalFilter"; "required": false; "isSignal": true; }; "globalFilterPlaceholder": { "alias": "globalFilterPlaceholder"; "required": false; "isSignal": true; }; "globalFilterAriaLabel": { "alias": "globalFilterAriaLabel"; "required": false; "isSignal": true; }; "globalFilterFields": { "alias": "globalFilterFields"; "required": false; "isSignal": true; }; "selectionMode": { "alias": "selectionMode"; "required": false; "isSignal": true; }; "selection": { "alias": "selection"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "emptyMessage": { "alias": "emptyMessage"; "required": false; "isSignal": true; }; "caption": { "alias": "caption"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "scrollHeight": { "alias": "scrollHeight"; "required": false; "isSignal": true; }; "lazy": { "alias": "lazy"; "required": false; "isSignal": true; }; "totalRecords": { "alias": "totalRecords"; "required": false; "isSignal": true; }; "expandable": { "alias": "expandable"; "required": false; "isSignal": true; }; "resizableColumns": { "alias": "resizableColumns"; "required": false; "isSignal": true; }; "reorderableColumns": { "alias": "reorderableColumns"; "required": false; "isSignal": true; }; "editable": { "alias": "editable"; "required": false; "isSignal": true; }; "editOn": { "alias": "editOn"; "required": false; "isSignal": true; }; "cellErrors": { "alias": "cellErrors"; "required": false; "isSignal": true; }; "locale": { "alias": "locale"; "required": false; "isSignal": true; }; "dirtyLabel": { "alias": "dirtyLabel"; "required": false; "isSignal": true; }; "selectPlaceholder": { "alias": "selectPlaceholder"; "required": false; "isSignal": true; }; "selectAllLabel": { "alias": "selectAllLabel"; "required": false; "isSignal": true; }; "selectRowLabel": { "alias": "selectRowLabel"; "required": false; "isSignal": true; }; "selectionColumnLabel": { "alias": "selectionColumnLabel"; "required": false; "isSignal": true; }; "expandColumnLabel": { "alias": "expandColumnLabel"; "required": false; "isSignal": true; }; "expandRowLabel": { "alias": "expandRowLabel"; "required": false; "isSignal": true; }; "collapseRowLabel": { "alias": "collapseRowLabel"; "required": false; "isSignal": true; }; }, { "selection": "selectionChange"; "sortChange": "sortChange"; "pageChange": "pageChange"; "rowSelect": "rowSelect"; "rowUnselect": "rowUnselect"; "lazyLoad": "lazyLoad"; "rowClick": "rowClick"; "rowExpand": "rowExpand"; "rowCollapse": "rowCollapse"; "colReorder": "colReorder"; "cellCommit": "cellCommit"; }, ["cellTemplates", "headerTemplates", "rowExpansion"], never, true, never>;
|
|
2224
3271
|
}
|
|
2225
3272
|
|
|
2226
3273
|
/**
|
|
@@ -2246,8 +3293,8 @@ interface SdsTableCellContext {
|
|
|
2246
3293
|
*
|
|
2247
3294
|
* @example
|
|
2248
3295
|
* <sds-table [value]="rows" [columns]="cols">
|
|
2249
|
-
* <ng-template sdsCell="
|
|
2250
|
-
* <sds-badge [variant]="row.
|
|
3296
|
+
* <ng-template sdsCell="status" let-value let-row="row">
|
|
3297
|
+
* <sds-badge [variant]="row.active ? 'success' : 'neutral'">{{ value }}</sds-badge>
|
|
2251
3298
|
* </ng-template>
|
|
2252
3299
|
* </sds-table>
|
|
2253
3300
|
*/
|
|
@@ -2282,7 +3329,7 @@ interface SdsTableRowExpansionContext {
|
|
|
2282
3329
|
* @example
|
|
2283
3330
|
* <sds-table [value]="rows" [columns]="cols" expandable>
|
|
2284
3331
|
* <ng-template sdsRowExpansion let-row>
|
|
2285
|
-
* <div>
|
|
3332
|
+
* <div>Details of {{ row.name }}</div>
|
|
2286
3333
|
* </ng-template>
|
|
2287
3334
|
* </sds-table>
|
|
2288
3335
|
*/
|
|
@@ -2311,7 +3358,7 @@ interface SdsToast {
|
|
|
2311
3358
|
*
|
|
2312
3359
|
* ```ts
|
|
2313
3360
|
* private readonly toasts = inject(SdsToastService);
|
|
2314
|
-
* this.toasts.success('
|
|
3361
|
+
* this.toasts.success('Saved.');
|
|
2315
3362
|
* ```
|
|
2316
3363
|
*
|
|
2317
3364
|
* Mount the host once (e.g. in the shell): `<sds-toast-host />`.
|
|
@@ -2341,8 +3388,8 @@ declare class SdsToastService {
|
|
|
2341
3388
|
declare class SdsToastHost {
|
|
2342
3389
|
readonly toasts: SdsToastService;
|
|
2343
3390
|
/**
|
|
2344
|
-
* Accessible name for each toast's close button.
|
|
2345
|
-
*
|
|
3391
|
+
* Accessible name for each toast's close button. English default; the button is icon-only, so an app
|
|
3392
|
+
* serving more than one language MUST translate it.
|
|
2346
3393
|
*/
|
|
2347
3394
|
readonly closeLabel: _angular_core.InputSignal<string>;
|
|
2348
3395
|
protected readonly errors: _angular_core.Signal<SdsToast[]>;
|
|
@@ -2412,8 +3459,8 @@ declare class SdsThemeToggle {
|
|
|
2412
3459
|
/** `surface` for light/glass bars, `on-brand` for the dark brand bar. */
|
|
2413
3460
|
readonly appearance: _angular_core.InputSignal<SdsThemeToggleAppearance>;
|
|
2414
3461
|
/**
|
|
2415
|
-
* Accessible names for the two actions.
|
|
2416
|
-
*
|
|
3462
|
+
* Accessible names for the two actions. English defaults; a multilingual app must pass translated
|
|
3463
|
+
* values.
|
|
2417
3464
|
*/
|
|
2418
3465
|
readonly darkLabel: _angular_core.InputSignal<string>;
|
|
2419
3466
|
readonly lightLabel: _angular_core.InputSignal<string>;
|
|
@@ -2506,9 +3553,8 @@ declare class SdsTopbar {
|
|
|
2506
3553
|
/** Show the mobile hamburger that toggles the sidebar drawer (< lg). */
|
|
2507
3554
|
readonly menuButton: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
2508
3555
|
/**
|
|
2509
|
-
* Accessible name for the hamburger.
|
|
2510
|
-
*
|
|
2511
|
-
* aria-label is its only name, and a hardcoded one is simply wrong in every other locale.
|
|
3556
|
+
* Accessible name for the hamburger. English default; any app serving more than one language MUST
|
|
3557
|
+
* pass a translated value — an icon-only control's aria-label is its only name.
|
|
2512
3558
|
*/
|
|
2513
3559
|
readonly menuLabel: _angular_core.InputSignal<string>;
|
|
2514
3560
|
/**
|
|
@@ -2573,7 +3619,7 @@ declare class SdsShell {
|
|
|
2573
3619
|
* @example
|
|
2574
3620
|
* <sds-sidebar appearance="surface" decorations>
|
|
2575
3621
|
* <sds-nav-group label="Membres">
|
|
2576
|
-
* <sds-nav-item icon="user-plus" label="
|
|
3622
|
+
* <sds-nav-item icon="user-plus" label="Add a member" link="/members/new" />
|
|
2577
3623
|
* </sds-nav-group>
|
|
2578
3624
|
* <div sdsFooter>…</div>
|
|
2579
3625
|
* </sds-sidebar>
|
|
@@ -2589,8 +3635,8 @@ declare class SdsSidebar {
|
|
|
2589
3635
|
private restoreFocusTo;
|
|
2590
3636
|
constructor();
|
|
2591
3637
|
/**
|
|
2592
|
-
* Accessible names for the rail's three icon-only controls.
|
|
2593
|
-
*
|
|
3638
|
+
* Accessible names for the rail's three icon-only controls. English defaults; a multilingual app
|
|
3639
|
+
* must pass translated values.
|
|
2594
3640
|
*/
|
|
2595
3641
|
readonly collapseLabel: _angular_core.InputSignal<string>;
|
|
2596
3642
|
readonly expandLabel: _angular_core.InputSignal<string>;
|
|
@@ -2639,7 +3685,7 @@ declare class SdsNavGroup {
|
|
|
2639
3685
|
/** Turn the label into an expand/collapse control. */
|
|
2640
3686
|
readonly collapsible: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
2641
3687
|
/** Icon for a collapsible header, so it reads at the same weight as the items it sits among. */
|
|
2642
|
-
readonly icon: _angular_core.InputSignal<"chart-column" | "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" | "
|
|
3688
|
+
readonly icon: _angular_core.InputSignal<"menu" | "search" | "table" | "filter" | "image" | "chart-column" | "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" | "x" | "check" | "alert-circle" | "info" | "copy" | "type" | "tag" | "ticket" | "square" | "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" | "qr-code" | "eye" | "eye-off" | "user" | "check-circle" | "arrows-clockwise" | "file-text" | "hash" | "map-pin" | "inbox" | "arrow-right" | "refresh-cw" | "loader-circle" | "bug" | "scroll-text" | "moon" | "sun" | "search-x" | "command" | "sparkles" | "triangle-alert" | "octagon-x" | "ban" | "ellipsis" | "ellipsis-vertical" | "grip-vertical" | "upload" | "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>;
|
|
2643
3689
|
/**
|
|
2644
3690
|
* URL prefix owned by this group, e.g. `/payments`. While the active route starts with it the
|
|
2645
3691
|
* group counts as active and opens itself — unless the person has explicitly toggled it since.
|
|
@@ -2690,6 +3736,7 @@ declare class SdsNavGroup {
|
|
|
2690
3736
|
static ɵcmp: _angular_core.ɵɵComponentDeclaration<SdsNavGroup, "sds-nav-group", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; "collapsible": { "alias": "collapsible"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "basePath": { "alias": "basePath"; "required": false; "isSignal": true; }; }, { "expandedChange": "expandedChange"; }, never, ["*"], true, never>;
|
|
2691
3737
|
}
|
|
2692
3738
|
|
|
3739
|
+
type SdsNavItemBadgeTone = 'brand' | 'danger' | 'neutral';
|
|
2693
3740
|
/**
|
|
2694
3741
|
* A single sidebar navigation entry. Renders an anchor when [link] is set
|
|
2695
3742
|
* (with automatic active state via routerLinkActive) or a button otherwise.
|
|
@@ -2699,18 +3746,36 @@ declare class SdsNavGroup {
|
|
|
2699
3746
|
*
|
|
2700
3747
|
* @example
|
|
2701
3748
|
* <sds-nav-item icon="home" label="Accueil" link="/" [exact]="true" />
|
|
3749
|
+
* <sds-nav-item icon="book-open" label="Menu" link="/menu" [badge]="3" badgeLabel="{count} issues" badgeTone="danger" />
|
|
2702
3750
|
*/
|
|
2703
3751
|
declare class SdsNavItem {
|
|
2704
3752
|
protected readonly store: SidebarStore;
|
|
2705
|
-
readonly icon: _angular_core.InputSignal<"chart-column" | "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" | "
|
|
3753
|
+
readonly icon: _angular_core.InputSignal<"menu" | "search" | "table" | "filter" | "image" | "chart-column" | "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" | "x" | "check" | "alert-circle" | "info" | "copy" | "type" | "tag" | "ticket" | "square" | "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" | "qr-code" | "eye" | "eye-off" | "user" | "check-circle" | "arrows-clockwise" | "file-text" | "hash" | "map-pin" | "inbox" | "arrow-right" | "refresh-cw" | "loader-circle" | "bug" | "scroll-text" | "moon" | "sun" | "search-x" | "command" | "sparkles" | "triangle-alert" | "octagon-x" | "ban" | "ellipsis" | "ellipsis-vertical" | "grip-vertical" | "upload" | "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>;
|
|
2706
3754
|
readonly label: _angular_core.InputSignal<string>;
|
|
2707
3755
|
/** Router link target; when null, the item behaves as a button. */
|
|
2708
3756
|
readonly link: _angular_core.InputSignal<string | unknown[] | null>;
|
|
2709
3757
|
readonly exact: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
2710
3758
|
/** Manual active state (combined with routerLinkActive when a link is set). */
|
|
2711
3759
|
readonly active: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
3760
|
+
/**
|
|
3761
|
+
* Optional count shown as a pill after the label (e.g. menu issues to fix). Hidden when null or 0.
|
|
3762
|
+
* On the collapsed rail it sits on the icon's corner.
|
|
3763
|
+
*/
|
|
3764
|
+
readonly badge: _angular_core.InputSignal<number | null>;
|
|
3765
|
+
/** Spoken text for the badge; `{count}` is replaced. Pass a translated string. */
|
|
3766
|
+
readonly badgeLabel: _angular_core.InputSignal<string>;
|
|
3767
|
+
/** Counts above this read as "max+" (e.g. 99+). */
|
|
3768
|
+
readonly badgeMax: _angular_core.InputSignal<number>;
|
|
3769
|
+
/** Badge colour. `danger` for things that block, `brand` (default) for a neutral count. */
|
|
3770
|
+
readonly badgeTone: _angular_core.InputSignal<SdsNavItemBadgeTone>;
|
|
2712
3771
|
readonly select: _angular_core.OutputEmitterRef<void>;
|
|
2713
3772
|
protected readonly collapsed: _angular_core.WritableSignal<boolean>;
|
|
3773
|
+
/** The badge's spoken text, or null when there is nothing to show. */
|
|
3774
|
+
protected readonly badgeText: _angular_core.Signal<string | null>;
|
|
3775
|
+
protected readonly badgeDisplay: _angular_core.Signal<string>;
|
|
3776
|
+
/** Accessible name on the collapsed rail, where the visible label is hidden. */
|
|
3777
|
+
protected readonly collapsedName: _angular_core.Signal<string>;
|
|
3778
|
+
protected readonly badgeClass: _angular_core.Signal<string>;
|
|
2714
3779
|
protected itemClass(isActive: boolean): string;
|
|
2715
3780
|
/**
|
|
2716
3781
|
* The left accent bar on an active item — the strongest "selected" cue, and the one that survives a
|
|
@@ -2719,7 +3784,7 @@ declare class SdsNavItem {
|
|
|
2719
3784
|
*/
|
|
2720
3785
|
protected readonly accentBarClass: _angular_core.Signal<string>;
|
|
2721
3786
|
static ɵfac: _angular_core.ɵɵFactoryDeclaration<SdsNavItem, never>;
|
|
2722
|
-
static ɵcmp: _angular_core.ɵɵComponentDeclaration<SdsNavItem, "sds-nav-item", never, { "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": true; "isSignal": true; }; "link": { "alias": "link"; "required": false; "isSignal": true; }; "exact": { "alias": "exact"; "required": false; "isSignal": true; }; "active": { "alias": "active"; "required": false; "isSignal": true; }; }, { "select": "select"; }, never, never, true, never>;
|
|
3787
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<SdsNavItem, "sds-nav-item", never, { "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": true; "isSignal": true; }; "link": { "alias": "link"; "required": false; "isSignal": true; }; "exact": { "alias": "exact"; "required": false; "isSignal": true; }; "active": { "alias": "active"; "required": false; "isSignal": true; }; "badge": { "alias": "badge"; "required": false; "isSignal": true; }; "badgeLabel": { "alias": "badgeLabel"; "required": false; "isSignal": true; }; "badgeMax": { "alias": "badgeMax"; "required": false; "isSignal": true; }; "badgeTone": { "alias": "badgeTone"; "required": false; "isSignal": true; }; }, { "select": "select"; }, never, never, true, never>;
|
|
2723
3788
|
}
|
|
2724
3789
|
|
|
2725
3790
|
type SdsUserMenuAppearance = 'surface' | 'on-brand';
|
|
@@ -2741,8 +3806,8 @@ type SdsUserMenuAlign = 'start' | 'end';
|
|
|
2741
3806
|
* @example
|
|
2742
3807
|
* <sds-user-menu name="Souhail AIT SAID" email="souhail@example.com" status="online" appearance="surface">
|
|
2743
3808
|
* <sds-menu-item icon="user" label="Profil" link="/profile" />
|
|
2744
|
-
* <sds-menu-item icon="settings" label="
|
|
2745
|
-
* <sds-menu-item icon="log-out" label="
|
|
3809
|
+
* <sds-menu-item icon="settings" label="Settings" link="/settings" />
|
|
3810
|
+
* <sds-menu-item icon="log-out" label="Sign out" tone="danger" (select)="signOut()" />
|
|
2746
3811
|
* </sds-user-menu>
|
|
2747
3812
|
*/
|
|
2748
3813
|
declare class SdsUserMenu {
|
|
@@ -2798,10 +3863,10 @@ type SdsMenuItemTone = 'default' | 'danger';
|
|
|
2798
3863
|
* @example
|
|
2799
3864
|
* <sds-menu-item icon="user" label="Profil" link="/profile" /> <!-- in-app route -->
|
|
2800
3865
|
* <sds-menu-item icon="external-link" label="Site public" href="https://…" target="_blank" />
|
|
2801
|
-
* <sds-menu-item icon="log-out" label="
|
|
3866
|
+
* <sds-menu-item icon="log-out" label="Sign out" tone="danger" (select)="signOut()" />
|
|
2802
3867
|
*/
|
|
2803
3868
|
declare class SdsMenuItem {
|
|
2804
|
-
readonly icon: _angular_core.InputSignal<"chart-column" | "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" | "
|
|
3869
|
+
readonly icon: _angular_core.InputSignal<"menu" | "search" | "table" | "filter" | "image" | "chart-column" | "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" | "x" | "check" | "alert-circle" | "info" | "copy" | "type" | "tag" | "ticket" | "square" | "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" | "qr-code" | "eye" | "eye-off" | "user" | "check-circle" | "arrows-clockwise" | "file-text" | "hash" | "map-pin" | "inbox" | "arrow-right" | "refresh-cw" | "loader-circle" | "bug" | "scroll-text" | "moon" | "sun" | "search-x" | "command" | "sparkles" | "triangle-alert" | "octagon-x" | "ban" | "ellipsis" | "ellipsis-vertical" | "grip-vertical" | "upload" | "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>;
|
|
2805
3870
|
readonly label: _angular_core.InputSignal<string>;
|
|
2806
3871
|
/** Router link target for an in-app route; when null (default) the item is not a Router link. */
|
|
2807
3872
|
readonly link: _angular_core.InputSignal<string | unknown[] | null>;
|
|
@@ -2878,8 +3943,8 @@ declare class SdsSearchCommand {
|
|
|
2878
3943
|
/** `surface` (default) for a light / glass bar; `on-brand` for the dark brand bar. */
|
|
2879
3944
|
readonly appearance: _angular_core.InputSignal<SdsSearchAppearance>;
|
|
2880
3945
|
/**
|
|
2881
|
-
* User-facing copy.
|
|
2882
|
-
* field share `placeholder`, and `searchLabel` is the accessible name for both).
|
|
3946
|
+
* User-facing copy. English defaults; a multilingual app passes translated values (the trigger and
|
|
3947
|
+
* the field share `placeholder`, and `searchLabel` is the accessible name for both).
|
|
2883
3948
|
*/
|
|
2884
3949
|
readonly searchLabel: _angular_core.InputSignal<string>;
|
|
2885
3950
|
readonly clearLabel: _angular_core.InputSignal<string>;
|
|
@@ -2983,7 +4048,7 @@ declare class SdsLanguageSwitcher implements OnDestroy {
|
|
|
2983
4048
|
readonly direction: _angular_core.InputSignal<SdsLanguageSwitcherDirection>;
|
|
2984
4049
|
/** Accessible name for the trigger and panel. */
|
|
2985
4050
|
readonly menuLabel: _angular_core.InputSignal<string>;
|
|
2986
|
-
/** Optional visible header above the list (e.g. "
|
|
4051
|
+
/** Optional visible header above the list (e.g. "Language"). Omitted when empty. */
|
|
2987
4052
|
readonly heading: _angular_core.InputSignal<string>;
|
|
2988
4053
|
readonly openChange: _angular_core.OutputEmitterRef<boolean>;
|
|
2989
4054
|
protected readonly open: _angular_core.WritableSignal<boolean>;
|
|
@@ -3026,5 +4091,5 @@ declare class SdsLanguageSwitcher implements OnDestroy {
|
|
|
3026
4091
|
static ɵcmp: _angular_core.ɵɵComponentDeclaration<SdsLanguageSwitcher, "sds-language-switcher", never, { "languages": { "alias": "languages"; "required": false; "isSignal": true; }; "current": { "alias": "current"; "required": false; "isSignal": true; }; "appearance": { "alias": "appearance"; "required": false; "isSignal": true; }; "align": { "alias": "align"; "required": false; "isSignal": true; }; "direction": { "alias": "direction"; "required": false; "isSignal": true; }; "menuLabel": { "alias": "menuLabel"; "required": false; "isSignal": true; }; "heading": { "alias": "heading"; "required": false; "isSignal": true; }; }, { "current": "currentChange"; "openChange": "openChange"; }, never, never, true, never>;
|
|
3027
4092
|
}
|
|
3028
4093
|
|
|
3029
|
-
export { SDS_ALLERGENS, SDS_ALLERGEN_ICONS, SDS_ALLERGEN_LABELS_EN, SDS_ICONS, SDS_PHONE_COUNTRIES, SdsAccordion, SdsAccordionContent, SdsAccordionHeader, SdsAccordionPanel, SdsAccordionStore, SdsAllergenIcon, SdsAvatar, SdsBadge, SdsButton, SdsCalendar, SdsCard, SdsCheckbox, SdsDatePicker, SdsIcon, SdsInput, SdsInputNumber, SdsLanguageSwitcher, SdsLocalizedInput, SdsMenuItem, SdsMultiSelect, SdsNavGroup, SdsNavItem, SdsOtpInput, SdsPaginator, SdsPhoneInput, SdsRadio, SdsSearchCommand, SdsSelect, SdsSelectEmpty, SdsSelectFooter, SdsSelectOption, SdsShell, SdsSidebar, SdsTab, SdsTabList, SdsTabPanel, SdsTabPanels, SdsTable, SdsTableCell, SdsTableRowExpansion, SdsTabs, SdsTabsStore, SdsTextarea, SdsThemeService, SdsThemeToggle, SdsToastHost, SdsToastService, SdsToggleSwitch, SdsTopbar, SdsTriStateChip, SdsUserMenu, SidebarStore, addDays, addMonths, addMonthsKeepDay, formatDdMmYyyy, formatHhMm, isOutOfRange, isSameDay, isoDay, pad2, sdsFormatNational, sdsMatchDialCode, sdsNormalizeSignificant, startOfDay, startOfMonth };
|
|
3030
|
-
export type { SdsAccordionActive, SdsAccordionValue, SdsAllergen, SdsAvatarStatus, SdsBadgeSize, SdsBadgeVariant, SdsButtonShape, SdsButtonSize, SdsButtonVariant, SdsCardVariant, SdsCheckboxSize, SdsDatePickerSize, SdsIconName, SdsIconSize, SdsInputAppearance, SdsInputNumberAppearance, SdsInputNumberButtonLayout, SdsInputNumberCurrencyDisplay, SdsInputNumberMode, SdsInputNumberSize, SdsInputShape, SdsInputSize, SdsInputType, SdsLanguageOption, SdsLanguageSwitcherAlign, SdsLanguageSwitcherAppearance, SdsLanguageSwitcherDirection, SdsLocalizedInputSize, SdsLocalizedValue, SdsMenuItemTone, SdsMultiSelectDisplay, SdsMultiSelectSize, SdsOtpInputSize, SdsPaginatorSize, SdsPaginatorState, SdsPhoneCountry, SdsPhoneInputSize, SdsPhoneValue, SdsRadioSize, SdsSearchAppearance, SdsSearchItem, SdsSelectAppearance, SdsSelectEmptyContext, SdsSelectFooterContext, SdsSelectOptionContext, SdsSelectSize, SdsShellBackground, SdsSidebarAppearance, SdsSortOrder, SdsTabValue, SdsTableCellContext, SdsTableColumn, SdsTableLazyEvent, SdsTableRowExpansionContext, SdsTableSize, SdsTableSortEvent, SdsTextareaAppearance, SdsTextareaResize, SdsTextareaSize, SdsTheme, SdsThemeToggleAppearance, SdsToast, SdsToastKind, SdsToggleSwitchSize, SdsTopbarAppearance, SdsTriState, SdsTriStateChipSize, SdsUserMenuAlign, SdsUserMenuAppearance };
|
|
4094
|
+
export { SDS_ALLERGENS, SDS_ALLERGEN_ICONS, SDS_ALLERGEN_LABELS_EN, SDS_ICONS, SDS_PHONE_COUNTRIES, SdsAccordion, SdsAccordionContent, SdsAccordionHeader, SdsAccordionPanel, SdsAccordionStore, SdsAllergenIcon, SdsAvatar, SdsBadge, SdsBulkBar, SdsButton, SdsCalendar, SdsCard, SdsCheckbox, SdsChecklistRow, SdsDatePicker, SdsFileDrop, SdsIcon, SdsImageCropper, SdsInput, SdsInputNumber, SdsLanguageSwitcher, SdsLocalizedInput, SdsMenu, SdsMenuItem, SdsMenuTrigger, SdsMultiSelect, SdsNavGroup, SdsNavItem, SdsOtpInput, SdsPaginator, SdsPhoneInput, SdsRadio, SdsScore, SdsSearchCommand, SdsSegmented, SdsSelect, SdsSelectEmpty, SdsSelectFooter, SdsSelectOption, SdsShell, SdsSidebar, SdsSortableHandle, SdsSortableItem, SdsSortableList, SdsStatusTile, SdsTab, SdsTabList, SdsTabPanel, SdsTabPanels, SdsTable, SdsTableCell, SdsTableHeader, SdsTableRowExpansion, SdsTabs, SdsTabsStore, SdsTextarea, SdsThemeService, SdsThemeToggle, SdsToastHost, SdsToastService, SdsToggleSwitch, SdsTopbar, SdsTriStateChip, SdsUserMenu, SidebarStore, addDays, addMonths, addMonthsKeepDay, formatDdMmYyyy, formatHhMm, isOutOfRange, isSameDay, isoDay, pad2, sdsFileMatchesAccept, sdsFormatBytes, sdsFormatNational, sdsMatchDialCode, sdsNormalizeSignificant, startOfDay, startOfMonth };
|
|
4095
|
+
export type { SdsAccordionActive, SdsAccordionValue, SdsAllergen, SdsAvatarStatus, SdsBadgeSize, SdsBadgeVariant, SdsBulkBarPosition, SdsButtonShape, SdsButtonSize, SdsButtonVariant, SdsCardVariant, SdsCheckboxSize, SdsChecklistStatus, SdsCropRect, SdsDatePickerSize, SdsFileRejection, SdsFileRejectionReason, SdsIconName, SdsIconSize, SdsImageCropperBlobOptions, SdsImageCropperShape, SdsInputAppearance, SdsInputNumberAppearance, SdsInputNumberButtonLayout, SdsInputNumberCurrencyDisplay, SdsInputNumberMode, SdsInputNumberSize, SdsInputShape, SdsInputSize, SdsInputType, SdsLanguageOption, SdsLanguageSwitcherAlign, SdsLanguageSwitcherAppearance, SdsLanguageSwitcherDirection, SdsLocalizedInputSize, SdsLocalizedValue, SdsMenuAction, SdsMenuAlign, SdsMenuEntry, SdsMenuItemTone, SdsMenuSeparator, SdsMultiSelectDisplay, SdsMultiSelectSize, SdsNavItemBadgeTone, SdsOtpInputSize, SdsPaginatorSize, SdsPaginatorState, SdsPhoneCountry, SdsPhoneInputSize, SdsPhoneValue, SdsRadioSize, SdsScoreSize, SdsScoreTier, SdsScoreVariant, SdsSearchAppearance, SdsSearchItem, SdsSegmentedOption, SdsSegmentedSize, SdsSelectAppearance, SdsSelectEmptyContext, SdsSelectFooterContext, SdsSelectOptionContext, SdsSelectSize, SdsShellBackground, SdsSidebarAppearance, SdsSortOrder, SdsSortableAppearance, SdsSortableItemContext, SdsSortableReorderEvent, SdsStatusTileState, SdsTabValue, SdsTableCellCommitEvent, SdsTableCellContext, SdsTableCellErrors, SdsTableColumn, SdsTableEditTrigger, SdsTableEditor, SdsTableHeaderContext, SdsTableLazyEvent, SdsTableRowExpansionContext, SdsTableSelectOption, SdsTableSize, SdsTableSortEvent, SdsTextareaAppearance, SdsTextareaResize, SdsTextareaSize, SdsTheme, SdsThemeToggleAppearance, SdsToast, SdsToastKind, SdsToggleSwitchSize, SdsTopbarAppearance, SdsTriState, SdsTriStateChipSize, SdsUserMenuAlign, SdsUserMenuAppearance };
|