@besaitech/ng-design-system 0.0.53 → 0.0.55
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 +17 -3
- package/fesm2022/besaitech-ng-design-system.mjs +1976 -359
- package/fesm2022/besaitech-ng-design-system.mjs.map +1 -1
- package/index.d.ts +604 -92
- package/package.json +1 -1
- package/themes/belvigo-emerald.css +73 -0
package/index.d.ts
CHANGED
|
@@ -102,6 +102,8 @@ declare const SDS_ICONS: {
|
|
|
102
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
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
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 'image-off': "<line x1=\"2\" x2=\"22\" y1=\"2\" y2=\"22\"/><path d=\"M10.41 10.41a2 2 0 1 1-2.83-2.83\"/><line x1=\"13.5\" x2=\"6\" y1=\"13.5\" y2=\"21\"/><line x1=\"18\" x2=\"21\" y1=\"12\" y2=\"15\"/><path d=\"M3.59 3.59A1.99 1.99 0 0 0 3 5v14a2 2 0 0 0 2 2h14c.55 0 1.052-.22 1.41-.59\"/><path d=\"M21 15V5a2 2 0 0 0-2-2H9\"/>";
|
|
106
|
+
readonly utensils: "<path d=\"M3 2v7c0 1.1.9 2 2 2h4a2 2 0 0 0 2-2V2\"/><path d=\"M7 2v20\"/><path d=\"M21 15V2a5 5 0 0 0-5 5v6c0 1.1.9 2 2 2h3Zm0 0v7\"/>";
|
|
105
107
|
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
108
|
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
109
|
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\"/>";
|
|
@@ -137,7 +139,7 @@ type SdsIconSize = 'sm' | 'md' | 'lg' | 'xl';
|
|
|
137
139
|
declare class SdsIcon {
|
|
138
140
|
private readonly sanitizer;
|
|
139
141
|
/** Icon identifier from the registry. */
|
|
140
|
-
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" | "
|
|
142
|
+
readonly name: _angular_core.InputSignal<"filter" | "menu" | "search" | "table" | "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" | "image" | "image-off" | "utensils" | "zoom-in" | "zoom-out" | "trash-2" | "clock" | "pencil" | "circle-help" | "stock" | "allergen-cereals-gluten" | "allergen-crustaceans" | "allergen-eggs" | "allergen-fish" | "allergen-peanuts" | "allergen-soybeans" | "allergen-milk" | "allergen-nuts" | "allergen-celery" | "allergen-mustard" | "allergen-sesame" | "allergen-sulphites" | "allergen-lupin" | "allergen-molluscs">;
|
|
141
143
|
/** Square size: a pixel number, a numeric string, or a keyword (sm·md·lg·xl). */
|
|
142
144
|
readonly size: _angular_core.InputSignalWithTransform<number, string | number>;
|
|
143
145
|
/** Stroke width of the line icon. */
|
|
@@ -167,7 +169,7 @@ declare class SdsButton {
|
|
|
167
169
|
* most important control.
|
|
168
170
|
*/
|
|
169
171
|
readonly shape: _angular_core.InputSignal<SdsButtonShape>;
|
|
170
|
-
readonly type: _angular_core.InputSignal<"button" | "
|
|
172
|
+
readonly type: _angular_core.InputSignal<"button" | "submit" | "reset">;
|
|
171
173
|
readonly disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
172
174
|
readonly loading: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
173
175
|
/** Full-width button. */
|
|
@@ -178,7 +180,7 @@ declare class SdsButton {
|
|
|
178
180
|
constructor();
|
|
179
181
|
/** Block the documented host-bound (click)/routerLink when inert. */
|
|
180
182
|
protected onHostClick(event: Event): void;
|
|
181
|
-
protected readonly hostClass: _angular_core.Signal<"flex
|
|
183
|
+
protected readonly hostClass: _angular_core.Signal<"inline-flex" | "flex w-full">;
|
|
182
184
|
protected readonly classes: _angular_core.Signal<string>;
|
|
183
185
|
static ɵfac: _angular_core.ɵɵFactoryDeclaration<SdsButton, never>;
|
|
184
186
|
static ɵcmp: _angular_core.ɵɵComponentDeclaration<SdsButton, "sds-button", never, { "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "shape": { "alias": "shape"; "required": false; "isSignal": true; }; "type": { "alias": "type"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "block": { "alias": "block"; "required": false; "isSignal": true; }; "iconOnly": { "alias": "iconOnly"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; }, {}, never, ["[sdsIconLeading]", "*", "[sdsIconTrailing]"], true, never>;
|
|
@@ -232,13 +234,12 @@ declare class SdsInput implements ControlValueAccessor {
|
|
|
232
234
|
/** Hard character cap on the native field; 0 means no limit. */
|
|
233
235
|
readonly maxLength: _angular_core.InputSignalWithTransform<number, unknown>;
|
|
234
236
|
/**
|
|
235
|
-
* Accessible name for the clear button.
|
|
236
|
-
*
|
|
237
|
-
* is its only name.
|
|
237
|
+
* Accessible name for the clear button. English default; an app serving more than one language MUST
|
|
238
|
+
* translate it — it is an icon-only control, so this string is its only name.
|
|
238
239
|
*/
|
|
239
240
|
readonly clearLabel: _angular_core.InputSignal<string>;
|
|
240
|
-
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" | "
|
|
241
|
-
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" | "
|
|
241
|
+
readonly leadingIcon: _angular_core.InputSignal<"filter" | "menu" | "search" | "table" | "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" | "image" | "image-off" | "utensils" | "zoom-in" | "zoom-out" | "trash-2" | "clock" | "pencil" | "circle-help" | "stock" | "allergen-cereals-gluten" | "allergen-crustaceans" | "allergen-eggs" | "allergen-fish" | "allergen-peanuts" | "allergen-soybeans" | "allergen-milk" | "allergen-nuts" | "allergen-celery" | "allergen-mustard" | "allergen-sesame" | "allergen-sulphites" | "allergen-lupin" | "allergen-molluscs" | null>;
|
|
242
|
+
readonly trailingIcon: _angular_core.InputSignal<"filter" | "menu" | "search" | "table" | "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" | "image" | "image-off" | "utensils" | "zoom-in" | "zoom-out" | "trash-2" | "clock" | "pencil" | "circle-help" | "stock" | "allergen-cereals-gluten" | "allergen-crustaceans" | "allergen-eggs" | "allergen-fish" | "allergen-peanuts" | "allergen-soybeans" | "allergen-milk" | "allergen-nuts" | "allergen-celery" | "allergen-mustard" | "allergen-sesame" | "allergen-sulphites" | "allergen-lupin" | "allergen-molluscs" | null>;
|
|
242
243
|
/**
|
|
243
244
|
* A CLICKABLE trailing icon, for the affordances that belong to the field itself — password reveal
|
|
244
245
|
* above all. Distinct from {@link trailingIcon}, which is decorative and explicitly
|
|
@@ -248,7 +249,7 @@ declare class SdsInput implements ControlValueAccessor {
|
|
|
248
249
|
* Always pair it with {@link trailingActionLabel} — an icon-only button with no accessible name is
|
|
249
250
|
* unusable by a screen reader. For a toggle, also bind {@link trailingActionPressed}.
|
|
250
251
|
*/
|
|
251
|
-
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" | "
|
|
252
|
+
readonly trailingAction: _angular_core.InputSignal<"filter" | "menu" | "search" | "table" | "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" | "image" | "image-off" | "utensils" | "zoom-in" | "zoom-out" | "trash-2" | "clock" | "pencil" | "circle-help" | "stock" | "allergen-cereals-gluten" | "allergen-crustaceans" | "allergen-eggs" | "allergen-fish" | "allergen-peanuts" | "allergen-soybeans" | "allergen-milk" | "allergen-nuts" | "allergen-celery" | "allergen-mustard" | "allergen-sesame" | "allergen-sulphites" | "allergen-lupin" | "allergen-molluscs" | null>;
|
|
252
253
|
/** Accessible name for {@link trailingAction}. Translate it in the consuming app. */
|
|
253
254
|
readonly trailingActionLabel: _angular_core.InputSignal<string>;
|
|
254
255
|
/** `aria-pressed` for a toggling action (e.g. show/hide password). Null renders no attribute. */
|
|
@@ -306,6 +307,11 @@ type SdsInputNumberButtonLayout = 'stacked' | 'horizontal' | 'vertical';
|
|
|
306
307
|
* The field formats **live as you type**: the currency symbol, grouping separators and prefix/suffix
|
|
307
308
|
* stay visible on every keystroke, and the caret is kept where it belongs. The value is clamped to
|
|
308
309
|
* {@link min}/{@link max} on blur and on every spinner step; ArrowUp / ArrowDown also step it.
|
|
310
|
+
*
|
|
311
|
+
* In a locale whose decimal separator is a comma (fr-BE, nl-BE, de-DE…) a typed "." — the key most
|
|
312
|
+
* keyboards and numpads offer — is taken as the decimal separator: "12.50" becomes "12,50". Pasted
|
|
313
|
+
* text works the same way, except that a "." followed by exactly three digits in a locale that groups
|
|
314
|
+
* with "." ("1.234" in nl-BE) stays a thousands separator.
|
|
309
315
|
*/
|
|
310
316
|
declare class SdsInputNumber implements ControlValueAccessor {
|
|
311
317
|
readonly inputId: string;
|
|
@@ -316,6 +322,13 @@ declare class SdsInputNumber implements ControlValueAccessor {
|
|
|
316
322
|
readonly placeholder: _angular_core.InputSignal<string>;
|
|
317
323
|
readonly hint: _angular_core.InputSignal<string>;
|
|
318
324
|
readonly error: _angular_core.InputSignal<string>;
|
|
325
|
+
/**
|
|
326
|
+
* Mark the field invalid (danger frame + `aria-invalid`) without showing an [error] message — for a
|
|
327
|
+
* host that renders the message itself, e.g. an editable table cell.
|
|
328
|
+
*/
|
|
329
|
+
readonly invalid: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
330
|
+
/** Extra id(s) for the field's `aria-describedby`, added to its own hint/error message id. */
|
|
331
|
+
readonly ariaDescribedby: _angular_core.InputSignal<string>;
|
|
319
332
|
readonly size: _angular_core.InputSignal<SdsInputNumberSize>;
|
|
320
333
|
/** `filled` is a borderless field on a muted ground; `default` is the bordered white field. */
|
|
321
334
|
readonly appearance: _angular_core.InputSignal<SdsInputNumberAppearance>;
|
|
@@ -343,15 +356,15 @@ declare class SdsInputNumber implements ControlValueAccessor {
|
|
|
343
356
|
readonly showButtons: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
344
357
|
readonly buttonLayout: _angular_core.InputSignal<SdsInputNumberButtonLayout>;
|
|
345
358
|
/** Override the increment button icon (defaults: chevron-up when stacked, plus otherwise). */
|
|
346
|
-
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" | "
|
|
359
|
+
readonly incrementIcon: _angular_core.InputSignal<"filter" | "menu" | "search" | "table" | "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" | "image" | "image-off" | "utensils" | "zoom-in" | "zoom-out" | "trash-2" | "clock" | "pencil" | "circle-help" | "stock" | "allergen-cereals-gluten" | "allergen-crustaceans" | "allergen-eggs" | "allergen-fish" | "allergen-peanuts" | "allergen-soybeans" | "allergen-milk" | "allergen-nuts" | "allergen-celery" | "allergen-mustard" | "allergen-sesame" | "allergen-sulphites" | "allergen-lupin" | "allergen-molluscs" | null>;
|
|
347
360
|
/** Override the decrement button icon (defaults: chevron-down when stacked, minus otherwise). */
|
|
348
|
-
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" | "
|
|
361
|
+
readonly decrementIcon: _angular_core.InputSignal<"filter" | "menu" | "search" | "table" | "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" | "image" | "image-off" | "utensils" | "zoom-in" | "zoom-out" | "trash-2" | "clock" | "pencil" | "circle-help" | "stock" | "allergen-cereals-gluten" | "allergen-crustaceans" | "allergen-eggs" | "allergen-fish" | "allergen-peanuts" | "allergen-soybeans" | "allergen-milk" | "allergen-nuts" | "allergen-celery" | "allergen-mustard" | "allergen-sesame" | "allergen-sulphites" | "allergen-lupin" | "allergen-molluscs" | null>;
|
|
349
362
|
/** Allow an empty (null) value. When false, blurring an empty field falls back to {@link min} or 0. */
|
|
350
363
|
readonly allowEmpty: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
351
364
|
readonly clearable: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
352
365
|
/**
|
|
353
|
-
* Accessible names for the icon-only controls.
|
|
354
|
-
*
|
|
366
|
+
* Accessible names for the icon-only controls. English defaults; translate them in a
|
|
367
|
+
* multi-language app.
|
|
355
368
|
*/
|
|
356
369
|
readonly clearLabel: _angular_core.InputSignal<string>;
|
|
357
370
|
readonly incrementLabel: _angular_core.InputSignal<string>;
|
|
@@ -362,8 +375,8 @@ declare class SdsInputNumber implements ControlValueAccessor {
|
|
|
362
375
|
protected readonly isDisabled: _angular_core.Signal<boolean>;
|
|
363
376
|
protected readonly describedBy: _angular_core.Signal<string | null>;
|
|
364
377
|
protected readonly clearVisible: _angular_core.Signal<boolean>;
|
|
365
|
-
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" | "
|
|
366
|
-
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" | "
|
|
378
|
+
protected readonly incrementIconName: _angular_core.Signal<"filter" | "menu" | "search" | "table" | "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" | "image" | "image-off" | "utensils" | "zoom-in" | "zoom-out" | "trash-2" | "clock" | "pencil" | "circle-help" | "stock" | "allergen-cereals-gluten" | "allergen-crustaceans" | "allergen-eggs" | "allergen-fish" | "allergen-peanuts" | "allergen-soybeans" | "allergen-milk" | "allergen-nuts" | "allergen-celery" | "allergen-mustard" | "allergen-sesame" | "allergen-sulphites" | "allergen-lupin" | "allergen-molluscs">;
|
|
379
|
+
protected readonly decrementIconName: _angular_core.Signal<"filter" | "menu" | "search" | "table" | "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" | "image" | "image-off" | "utensils" | "zoom-in" | "zoom-out" | "trash-2" | "clock" | "pencil" | "circle-help" | "stock" | "allergen-cereals-gluten" | "allergen-crustaceans" | "allergen-eggs" | "allergen-fish" | "allergen-peanuts" | "allergen-soybeans" | "allergen-milk" | "allergen-nuts" | "allergen-celery" | "allergen-mustard" | "allergen-sesame" | "allergen-sulphites" | "allergen-lupin" | "allergen-molluscs">;
|
|
367
380
|
protected readonly canIncrement: _angular_core.Signal<boolean>;
|
|
368
381
|
protected readonly canDecrement: _angular_core.Signal<boolean>;
|
|
369
382
|
/** Locale grouping/decimal separators, derived from Intl so parsing matches formatting. */
|
|
@@ -400,6 +413,17 @@ declare class SdsInputNumber implements ControlValueAccessor {
|
|
|
400
413
|
*/
|
|
401
414
|
private formatLive;
|
|
402
415
|
private toNumber;
|
|
416
|
+
/**
|
|
417
|
+
* In a locale whose decimal separator is not "." (fr-BE, nl-BE, de-DE…), turn the "." people type
|
|
418
|
+
* for a decimal point into the locale separator before parsing, so "12.50" reads as 12.5.
|
|
419
|
+
* - `typed` is the text of the keystroke: a "." just typed sits right before the caret and is
|
|
420
|
+
* always the decimal point (even in a locale that groups with ".", whose group marks come from
|
|
421
|
+
* the formatter, never from the keyboard).
|
|
422
|
+
* - Otherwise (paste, autofill, programmatic input) and only when the text holds no locale decimal
|
|
423
|
+
* separator, the last "." is the decimal point — unless the locale groups with "." and exactly
|
|
424
|
+
* three digits follow it ("1.234" in nl-BE is one thousand two hundred thirty-four).
|
|
425
|
+
*/
|
|
426
|
+
private localizeDecimalPoint;
|
|
403
427
|
/** Pull the sign / integer / fraction fragments out of a formatted, partially-typed string. */
|
|
404
428
|
private parseInput;
|
|
405
429
|
/** Characters that "carry meaning" for caret placement (digits, minus, the decimal separator). */
|
|
@@ -422,7 +446,105 @@ declare class SdsInputNumber implements ControlValueAccessor {
|
|
|
422
446
|
registerOnTouched(fn: () => void): void;
|
|
423
447
|
setDisabledState(isDisabled: boolean): void;
|
|
424
448
|
static ɵfac: _angular_core.ɵɵFactoryDeclaration<SdsInputNumber, never>;
|
|
425
|
-
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>;
|
|
449
|
+
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>;
|
|
450
|
+
}
|
|
451
|
+
|
|
452
|
+
type SdsTimeInputSize = 'sm' | 'md' | 'lg';
|
|
453
|
+
type SdsTimeInputAppearance = 'default' | 'filled';
|
|
454
|
+
/**
|
|
455
|
+
* Time-of-day field, 24-hour, whatever the browser's locale: two segments (hours : minutes) in one
|
|
456
|
+
* framed field, the value being a `"HH:mm"` string (or null) — the shape of a backend `LocalTime`.
|
|
457
|
+
* Implements ControlValueAccessor: use `formControlName` or `[(ngModel)]`.
|
|
458
|
+
*
|
|
459
|
+
* Unlike a native `<input type="time">` it never switches to a 12-hour clock with AM/PM, and it is themed
|
|
460
|
+
* like every other field (label, hint, error, sizes, `filled`, dark mode).
|
|
461
|
+
*
|
|
462
|
+
* Keyboard: type digits (the hours move on to the minutes by themselves after two digits, or one digit
|
|
463
|
+
* above 2); `:`/`.`/→ jump to the minutes, ← or Backspace on an empty minute go back; ↑/↓ step the hours
|
|
464
|
+
* by 1 and the minutes by [minuteStep] (wrapping, never carrying into the hour). Each segment is a
|
|
465
|
+
* `spinbutton` with its own accessible name. An hour typed without minutes gets `:00` when the field is
|
|
466
|
+
* left; emptying both segments sets null.
|
|
467
|
+
*
|
|
468
|
+
* @example
|
|
469
|
+
* <sds-time-input label="Opens at" formControlName="start" [minuteStep]="15" />
|
|
470
|
+
*
|
|
471
|
+
* @example
|
|
472
|
+
* <sds-time-input [ariaLabel]="'Closes at'" [ngModel]="end()" (ngModelChange)="end.set($event)" clearable />
|
|
473
|
+
*/
|
|
474
|
+
declare class SdsTimeInput implements ControlValueAccessor {
|
|
475
|
+
protected readonly fieldId: string;
|
|
476
|
+
readonly label: _angular_core.InputSignal<string>;
|
|
477
|
+
/** Accessible name of the field when there is no visible [label]. */
|
|
478
|
+
readonly ariaLabel: _angular_core.InputSignal<string>;
|
|
479
|
+
readonly hint: _angular_core.InputSignal<string>;
|
|
480
|
+
readonly error: _angular_core.InputSignal<string>;
|
|
481
|
+
readonly size: _angular_core.InputSignal<SdsTimeInputSize>;
|
|
482
|
+
/** `filled` is borderless on a muted ground, like sds-input's `filled`. */
|
|
483
|
+
readonly appearance: _angular_core.InputSignal<SdsTimeInputAppearance>;
|
|
484
|
+
readonly disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
485
|
+
readonly readonly: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
486
|
+
/** Show a clear button (sets null) while there is a value. */
|
|
487
|
+
readonly clearable: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
488
|
+
/** Leading clock icon. */
|
|
489
|
+
readonly showIcon: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
490
|
+
/** Minutes moved by ↑/↓ on the minutes segment (snaps to the step first). Default 1. */
|
|
491
|
+
readonly minuteStep: _angular_core.InputSignalWithTransform<number, unknown>;
|
|
492
|
+
/** Emit `HH:mm:ss` (seconds always `00`) instead of `HH:mm`. */
|
|
493
|
+
readonly withSeconds: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
494
|
+
/** Placeholder of each empty segment. */
|
|
495
|
+
readonly placeholderText: _angular_core.InputSignal<string>;
|
|
496
|
+
/** Accessible name of the hours segment. English default — translate it. */
|
|
497
|
+
readonly hoursLabel: _angular_core.InputSignal<string>;
|
|
498
|
+
/** Accessible name of the minutes segment. English default — translate it. */
|
|
499
|
+
readonly minutesLabel: _angular_core.InputSignal<string>;
|
|
500
|
+
/** Accessible name of the clear button. English default — translate it. */
|
|
501
|
+
readonly clearLabel: _angular_core.InputSignal<string>;
|
|
502
|
+
private readonly hoursEl;
|
|
503
|
+
private readonly minutesEl;
|
|
504
|
+
protected readonly hours: _angular_core.WritableSignal<number | null>;
|
|
505
|
+
protected readonly minutes: _angular_core.WritableSignal<number | null>;
|
|
506
|
+
/** Raw text of a segment while it is being typed (null = show the committed value). */
|
|
507
|
+
private readonly hoursDraft;
|
|
508
|
+
private readonly minutesDraft;
|
|
509
|
+
private readonly cvaDisabled;
|
|
510
|
+
protected readonly isDisabled: _angular_core.Signal<boolean>;
|
|
511
|
+
protected readonly hasValue: _angular_core.Signal<boolean>;
|
|
512
|
+
protected readonly hoursText: _angular_core.Signal<string>;
|
|
513
|
+
protected readonly minutesText: _angular_core.Signal<string>;
|
|
514
|
+
protected readonly describedBy: _angular_core.Signal<string | null>;
|
|
515
|
+
protected readonly wrapperClasses: _angular_core.Signal<string>;
|
|
516
|
+
protected pad(n: number): string;
|
|
517
|
+
private onChange;
|
|
518
|
+
private onTouched;
|
|
519
|
+
writeValue(value: unknown): void;
|
|
520
|
+
registerOnChange(fn: (value: string | null) => void): void;
|
|
521
|
+
registerOnTouched(fn: () => void): void;
|
|
522
|
+
setDisabledState(isDisabled: boolean): void;
|
|
523
|
+
protected selectAll(event: FocusEvent): void;
|
|
524
|
+
/** Clicking the frame (icon, padding) focuses the hours, like clicking a native field. */
|
|
525
|
+
protected onFrameClick(event: MouseEvent): void;
|
|
526
|
+
protected onHoursInput(event: Event): void;
|
|
527
|
+
protected onMinutesInput(event: Event): void;
|
|
528
|
+
/** "7" (no minute starts with 6-9 and has a second digit) and any 2 digits commit; "0"-"5" wait. */
|
|
529
|
+
private takeMinuteDigits;
|
|
530
|
+
/** Force both inputs to show the committed values (a binding does not repaint an unchanged value). */
|
|
531
|
+
private syncSegments;
|
|
532
|
+
protected onHoursKeydown(event: KeyboardEvent): void;
|
|
533
|
+
protected onMinutesKeydown(event: KeyboardEvent): void;
|
|
534
|
+
/** Leaving the whole field completes a half-typed time and marks the control touched. */
|
|
535
|
+
protected onFocusOut(event: FocusEvent): void;
|
|
536
|
+
protected clear(): void;
|
|
537
|
+
private draftNumber;
|
|
538
|
+
private flushHours;
|
|
539
|
+
private flushMinutes;
|
|
540
|
+
private commitHours;
|
|
541
|
+
private commitMinutes;
|
|
542
|
+
/** Emits `HH:mm` once both segments hold a value, and null once both are empty. */
|
|
543
|
+
private emitIfComplete;
|
|
544
|
+
private focusMinutes;
|
|
545
|
+
private focusHours;
|
|
546
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<SdsTimeInput, never>;
|
|
547
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<SdsTimeInput, "sds-time-input", never, { "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; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "clearable": { "alias": "clearable"; "required": false; "isSignal": true; }; "showIcon": { "alias": "showIcon"; "required": false; "isSignal": true; }; "minuteStep": { "alias": "minuteStep"; "required": false; "isSignal": true; }; "withSeconds": { "alias": "withSeconds"; "required": false; "isSignal": true; }; "placeholderText": { "alias": "placeholderText"; "required": false; "isSignal": true; }; "hoursLabel": { "alias": "hoursLabel"; "required": false; "isSignal": true; }; "minutesLabel": { "alias": "minutesLabel"; "required": false; "isSignal": true; }; "clearLabel": { "alias": "clearLabel"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
|
|
426
548
|
}
|
|
427
549
|
|
|
428
550
|
/** A translatable string held per language code — e.g. `{ fr: 'Titre', nl: 'Titel' }`. */
|
|
@@ -456,8 +578,8 @@ declare class SdsLocalizedInput implements ControlValueAccessor {
|
|
|
456
578
|
readonly disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
457
579
|
/**
|
|
458
580
|
* Accessible name for the in-field language switcher, and the "no translation yet" title suffix on each
|
|
459
|
-
* language button.
|
|
460
|
-
*
|
|
581
|
+
* language button. English defaults; translate them in a multi-language app (the buttons are
|
|
582
|
+
* letter-only, so the title carries their meaning).
|
|
461
583
|
*/
|
|
462
584
|
readonly languageSwitcherLabel: _angular_core.InputSignal<string>;
|
|
463
585
|
readonly untranslatedLabel: _angular_core.InputSignal<string>;
|
|
@@ -513,8 +635,8 @@ declare class SdsOtpInput implements ControlValueAccessor {
|
|
|
513
635
|
readonly autoFocus: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
514
636
|
/**
|
|
515
637
|
* Accessible name for an individual box, suffixed with its 1-based position ("Digit 1", "Digit
|
|
516
|
-
* 2", …).
|
|
517
|
-
*
|
|
638
|
+
* 2", …). English default; translate it in an app serving more than one language, since each box
|
|
639
|
+
* is an icon-less control whose only name this is.
|
|
518
640
|
*/
|
|
519
641
|
readonly cellLabel: _angular_core.InputSignal<string>;
|
|
520
642
|
/** Emitted with the full value the moment the last box is filled. */
|
|
@@ -587,6 +709,13 @@ declare class SdsTextarea implements ControlValueAccessor {
|
|
|
587
709
|
readonly maxLength: _angular_core.InputSignalWithTransform<number, unknown>;
|
|
588
710
|
/** Show a character counter row. */
|
|
589
711
|
readonly showCount: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
712
|
+
/**
|
|
713
|
+
* Spoken text of the counter when {@link maxLength} is set; tokens `{count}` and `{max}`. English
|
|
714
|
+
* default — translate it in a multi-language app.
|
|
715
|
+
*/
|
|
716
|
+
readonly countLimitLabel: _angular_core.InputSignal<string>;
|
|
717
|
+
/** Spoken text of the counter without a {@link maxLength}; token `{count}`. */
|
|
718
|
+
readonly countLabelTemplate: _angular_core.InputSignal<string>;
|
|
590
719
|
readonly resize: _angular_core.InputSignal<SdsTextareaResize>;
|
|
591
720
|
/** Current value (driven by CVA + user input). */
|
|
592
721
|
protected readonly value: _angular_core.WritableSignal<string>;
|
|
@@ -608,7 +737,7 @@ declare class SdsTextarea implements ControlValueAccessor {
|
|
|
608
737
|
protected onInput(event: Event): void;
|
|
609
738
|
private resizeToContent;
|
|
610
739
|
static ɵfac: _angular_core.ɵɵFactoryDeclaration<SdsTextarea, never>;
|
|
611
|
-
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>;
|
|
740
|
+
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>;
|
|
612
741
|
}
|
|
613
742
|
|
|
614
743
|
type SdsToggleSwitchSize = 'sm' | 'md' | 'lg';
|
|
@@ -641,9 +770,9 @@ declare class SdsToggleSwitch implements ControlValueAccessor {
|
|
|
641
770
|
/** Value emitted/stored when the switch is off. */
|
|
642
771
|
readonly falseValue: _angular_core.InputSignal<unknown>;
|
|
643
772
|
/** Icon shown on the knob when checked. */
|
|
644
|
-
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" | "
|
|
773
|
+
readonly onIcon: _angular_core.InputSignal<"filter" | "menu" | "search" | "table" | "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" | "image" | "image-off" | "utensils" | "zoom-in" | "zoom-out" | "trash-2" | "clock" | "pencil" | "circle-help" | "stock" | "allergen-cereals-gluten" | "allergen-crustaceans" | "allergen-eggs" | "allergen-fish" | "allergen-peanuts" | "allergen-soybeans" | "allergen-milk" | "allergen-nuts" | "allergen-celery" | "allergen-mustard" | "allergen-sesame" | "allergen-sulphites" | "allergen-lupin" | "allergen-molluscs" | null>;
|
|
645
774
|
/** Icon shown on the knob when unchecked. */
|
|
646
|
-
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" | "
|
|
775
|
+
readonly offIcon: _angular_core.InputSignal<"filter" | "menu" | "search" | "table" | "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" | "image" | "image-off" | "utensils" | "zoom-in" | "zoom-out" | "trash-2" | "clock" | "pencil" | "circle-help" | "stock" | "allergen-cereals-gluten" | "allergen-crustaceans" | "allergen-eggs" | "allergen-fish" | "allergen-peanuts" | "allergen-soybeans" | "allergen-milk" | "allergen-nuts" | "allergen-celery" | "allergen-mustard" | "allergen-sesame" | "allergen-sulphites" | "allergen-lupin" | "allergen-molluscs" | null>;
|
|
647
776
|
readonly hint: _angular_core.InputSignal<string>;
|
|
648
777
|
readonly error: _angular_core.InputSignal<string>;
|
|
649
778
|
/**
|
|
@@ -689,8 +818,11 @@ type SdsCheckboxSize = 'sm' | 'md';
|
|
|
689
818
|
* of its own, so it can sit inside the consumer's `<label>` (a whole clickable
|
|
690
819
|
* row), whose text then names it.
|
|
691
820
|
*
|
|
821
|
+
* Set [indeterminate] for a "some but not all" state (e.g. a select-all box over a partial
|
|
822
|
+
* selection): the box shows a bar and reads as "mixed"; a click checks it.
|
|
823
|
+
*
|
|
692
824
|
* @example
|
|
693
|
-
* <sds-checkbox label="
|
|
825
|
+
* <sds-checkbox label="Auto-merge" [(ngModel)]="autoMerge" />
|
|
694
826
|
*/
|
|
695
827
|
declare class SdsCheckbox implements ControlValueAccessor {
|
|
696
828
|
readonly id: string;
|
|
@@ -699,7 +831,13 @@ declare class SdsCheckbox implements ControlValueAccessor {
|
|
|
699
831
|
readonly ariaLabel: _angular_core.InputSignal<string>;
|
|
700
832
|
readonly size: _angular_core.InputSignal<SdsCheckboxSize>;
|
|
701
833
|
readonly disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
834
|
+
/**
|
|
835
|
+
* "Some but not all": shows a bar and is announced as mixed while the value is false. Clicking
|
|
836
|
+
* checks it (the native behaviour); the host then decides the next [indeterminate].
|
|
837
|
+
*/
|
|
838
|
+
readonly indeterminate: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
702
839
|
protected readonly checked: _angular_core.WritableSignal<boolean>;
|
|
840
|
+
protected readonly mixed: _angular_core.Signal<boolean>;
|
|
703
841
|
private readonly cvaDisabled;
|
|
704
842
|
protected readonly isDisabled: _angular_core.Signal<boolean>;
|
|
705
843
|
protected readonly iconSize: _angular_core.Signal<11 | 13>;
|
|
@@ -713,7 +851,7 @@ declare class SdsCheckbox implements ControlValueAccessor {
|
|
|
713
851
|
setDisabledState(isDisabled: boolean): void;
|
|
714
852
|
protected onInput(event: Event): void;
|
|
715
853
|
static ɵfac: _angular_core.ɵɵFactoryDeclaration<SdsCheckbox, never>;
|
|
716
|
-
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>;
|
|
854
|
+
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>;
|
|
717
855
|
}
|
|
718
856
|
|
|
719
857
|
type SdsRadioSize = 'sm' | 'md';
|
|
@@ -774,22 +912,63 @@ declare class SdsRadio implements ControlValueAccessor {
|
|
|
774
912
|
}
|
|
775
913
|
|
|
776
914
|
type SdsAvatarStatus = 'online' | 'offline' | 'busy' | 'away';
|
|
915
|
+
/** `circle` for people, `rounded` for things (a dish, a product, a store logo), `square` for a flush tile. */
|
|
916
|
+
type SdsAvatarShape = 'circle' | 'rounded' | 'square';
|
|
777
917
|
/**
|
|
778
|
-
*
|
|
918
|
+
* Avatar showing an image, initials or a placeholder icon, with an optional status dot.
|
|
919
|
+
*
|
|
920
|
+
* - `shape`: `circle` (default, people), `rounded` (things: a dish photo, a product, a logo) or `square`.
|
|
921
|
+
* - `fallbackIcon`: shown instead of initials when there is no image (or it fails to load) — e.g.
|
|
922
|
+
* `utensils` or `image` for a menu item without a photo. The placeholder is drawn on `placeholderClass`
|
|
923
|
+
* (a muted tile by default), not on the initials' brand fill.
|
|
924
|
+
* - A broken `src` falls back to the icon or the initials instead of showing the browser's broken-image
|
|
925
|
+
* glyph; a new `src` retries.
|
|
926
|
+
* - `decorative`: the avatar only repeats a name that is already written next to it (a list row, a select
|
|
927
|
+
* option), so the image gets `alt=""` and the whole avatar is hidden from assistive technology.
|
|
928
|
+
*
|
|
929
|
+
* @example
|
|
930
|
+
* <sds-avatar name="Ada Lovelace" [src]="user.photoUrl" status="online" />
|
|
931
|
+
*
|
|
932
|
+
* @example
|
|
933
|
+
* <!-- a menu item in a list: rounded photo, dish placeholder when there is none -->
|
|
934
|
+
* <sds-avatar shape="rounded" [size]="32" [src]="item.thumbnailUrl" [name]="item.name"
|
|
935
|
+
* fallbackIcon="utensils" decorative />
|
|
779
936
|
*/
|
|
780
937
|
declare class SdsAvatar {
|
|
781
938
|
readonly name: _angular_core.InputSignal<string>;
|
|
782
939
|
readonly initials: _angular_core.InputSignal<string>;
|
|
783
|
-
readonly src: _angular_core.InputSignal<string | null>;
|
|
940
|
+
readonly src: _angular_core.InputSignal<string | null | undefined>;
|
|
784
941
|
readonly size: _angular_core.InputSignal<number>;
|
|
785
942
|
readonly status: _angular_core.InputSignal<SdsAvatarStatus | null>;
|
|
943
|
+
/** `circle` (default), `rounded` (radius of a control) or `square`. */
|
|
944
|
+
readonly shape: _angular_core.InputSignal<SdsAvatarShape>;
|
|
786
945
|
/** Tailwind bg utility for the initials background. */
|
|
787
946
|
readonly bgClass: _angular_core.InputSignal<string>;
|
|
947
|
+
/**
|
|
948
|
+
* Icon shown instead of initials when there is no usable image (e.g. `utensils` or `image` for a dish).
|
|
949
|
+
* Null (default) keeps the initials.
|
|
950
|
+
*/
|
|
951
|
+
readonly fallbackIcon: _angular_core.InputSignal<"filter" | "menu" | "search" | "table" | "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" | "image" | "image-off" | "utensils" | "zoom-in" | "zoom-out" | "trash-2" | "clock" | "pencil" | "circle-help" | "stock" | "allergen-cereals-gluten" | "allergen-crustaceans" | "allergen-eggs" | "allergen-fish" | "allergen-peanuts" | "allergen-soybeans" | "allergen-milk" | "allergen-nuts" | "allergen-celery" | "allergen-mustard" | "allergen-sesame" | "allergen-sulphites" | "allergen-lupin" | "allergen-molluscs" | null>;
|
|
952
|
+
/** Classes of the placeholder tile behind {@link fallbackIcon}: background and icon colour. */
|
|
953
|
+
readonly placeholderClass: _angular_core.InputSignal<string>;
|
|
954
|
+
/**
|
|
955
|
+
* The avatar repeats a name already visible beside it: `alt=""` and `aria-hidden`, so a screen reader
|
|
956
|
+
* does not read the name twice.
|
|
957
|
+
*/
|
|
958
|
+
readonly decorative: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
959
|
+
/** Native lazy loading for the image (default on — avatars are often in long lists). */
|
|
960
|
+
readonly lazy: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
961
|
+
/** The `src` that failed to load. Any other `src` is tried (so a new photo URL retries). */
|
|
962
|
+
protected readonly failedSrc: _angular_core.WritableSignal<string | null | undefined>;
|
|
963
|
+
protected readonly showImage: _angular_core.Signal<boolean>;
|
|
964
|
+
protected readonly shapeClass: _angular_core.Signal<string>;
|
|
965
|
+
protected readonly frameClass: _angular_core.Signal<string>;
|
|
966
|
+
protected readonly iconSize: _angular_core.Signal<number>;
|
|
788
967
|
protected readonly dotSize: _angular_core.Signal<number>;
|
|
789
968
|
protected readonly statusColor: _angular_core.Signal<string>;
|
|
790
969
|
protected readonly resolvedInitials: _angular_core.Signal<string>;
|
|
791
970
|
static ɵfac: _angular_core.ɵɵFactoryDeclaration<SdsAvatar, never>;
|
|
792
|
-
static ɵcmp: _angular_core.ɵɵComponentDeclaration<SdsAvatar, "sds-avatar", never, { "name": { "alias": "name"; "required": false; "isSignal": true; }; "initials": { "alias": "initials"; "required": false; "isSignal": true; }; "src": { "alias": "src"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "status": { "alias": "status"; "required": false; "isSignal": true; }; "bgClass": { "alias": "bgClass"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
|
|
971
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<SdsAvatar, "sds-avatar", never, { "name": { "alias": "name"; "required": false; "isSignal": true; }; "initials": { "alias": "initials"; "required": false; "isSignal": true; }; "src": { "alias": "src"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "status": { "alias": "status"; "required": false; "isSignal": true; }; "shape": { "alias": "shape"; "required": false; "isSignal": true; }; "bgClass": { "alias": "bgClass"; "required": false; "isSignal": true; }; "fallbackIcon": { "alias": "fallbackIcon"; "required": false; "isSignal": true; }; "placeholderClass": { "alias": "placeholderClass"; "required": false; "isSignal": true; }; "decorative": { "alias": "decorative"; "required": false; "isSignal": true; }; "lazy": { "alias": "lazy"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
|
|
793
972
|
}
|
|
794
973
|
|
|
795
974
|
type SdsBadgeVariant = 'neutral' | 'brand' | 'info' | 'success' | 'warning' | 'danger';
|
|
@@ -856,7 +1035,7 @@ declare class SdsAllergenIcon {
|
|
|
856
1035
|
readonly size: _angular_core.InputSignal<string | number>;
|
|
857
1036
|
/** Stroke width of the line icon. */
|
|
858
1037
|
readonly strokeWidth: _angular_core.InputSignal<number>;
|
|
859
|
-
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" | "
|
|
1038
|
+
protected readonly iconName: _angular_core.Signal<"filter" | "menu" | "search" | "table" | "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" | "image" | "image-off" | "utensils" | "zoom-in" | "zoom-out" | "trash-2" | "clock" | "pencil" | "circle-help" | "stock" | "allergen-cereals-gluten" | "allergen-crustaceans" | "allergen-eggs" | "allergen-fish" | "allergen-peanuts" | "allergen-soybeans" | "allergen-milk" | "allergen-nuts" | "allergen-celery" | "allergen-mustard" | "allergen-sesame" | "allergen-sulphites" | "allergen-lupin" | "allergen-molluscs" | null>;
|
|
860
1039
|
constructor();
|
|
861
1040
|
static ɵfac: _angular_core.ɵɵFactoryDeclaration<SdsAllergenIcon, never>;
|
|
862
1041
|
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>;
|
|
@@ -890,7 +1069,7 @@ declare class SdsTriStateChip {
|
|
|
890
1069
|
/** Visible name (e.g. the allergen). Required — the chip has no other accessible name. */
|
|
891
1070
|
readonly label: _angular_core.InputSignal<string>;
|
|
892
1071
|
/** Optional leading registry icon, e.g. an `allergen-*` pictogram. */
|
|
893
|
-
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" | "
|
|
1072
|
+
readonly icon: _angular_core.InputSignal<"filter" | "menu" | "search" | "table" | "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" | "image" | "image-off" | "utensils" | "zoom-in" | "zoom-out" | "trash-2" | "clock" | "pencil" | "circle-help" | "stock" | "allergen-cereals-gluten" | "allergen-crustaceans" | "allergen-eggs" | "allergen-fish" | "allergen-peanuts" | "allergen-soybeans" | "allergen-milk" | "allergen-nuts" | "allergen-celery" | "allergen-mustard" | "allergen-sesame" | "allergen-sulphites" | "allergen-lupin" | "allergen-molluscs" | null>;
|
|
894
1073
|
readonly size: _angular_core.InputSignal<SdsTriStateChipSize>;
|
|
895
1074
|
readonly disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
896
1075
|
/** Show the state as a small visible caption under the label. */
|
|
@@ -978,6 +1157,108 @@ declare class SdsSegmented {
|
|
|
978
1157
|
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>;
|
|
979
1158
|
}
|
|
980
1159
|
|
|
1160
|
+
type SdsChipSize = 'sm' | 'md';
|
|
1161
|
+
/** One chip of an `sds-chip-group`. A bare string/number is used as both value and label. */
|
|
1162
|
+
interface SdsChipOption<T = unknown> {
|
|
1163
|
+
value: T;
|
|
1164
|
+
label: string;
|
|
1165
|
+
icon?: SdsIconName;
|
|
1166
|
+
/** A small count after the label (e.g. the number of items a filter matches). */
|
|
1167
|
+
count?: number | null;
|
|
1168
|
+
disabled?: boolean;
|
|
1169
|
+
}
|
|
1170
|
+
interface NormChip {
|
|
1171
|
+
value: unknown;
|
|
1172
|
+
label: string;
|
|
1173
|
+
icon: SdsIconName | null;
|
|
1174
|
+
count: number | null;
|
|
1175
|
+
disabled: boolean;
|
|
1176
|
+
}
|
|
1177
|
+
/**
|
|
1178
|
+
* A single on/off filter chip (`aria-pressed`), e.g. "Sold out only" or "With comments". Two-way
|
|
1179
|
+
* `[(selected)]`. For a set of chips — one or several picked — use `sds-chip-group`.
|
|
1180
|
+
*
|
|
1181
|
+
* @example
|
|
1182
|
+
* <sds-chip label="Sold out only" icon="ban" [(selected)]="soldOutOnly" />
|
|
1183
|
+
*/
|
|
1184
|
+
declare class SdsChip {
|
|
1185
|
+
/** Visible text — also the chip's accessible name. */
|
|
1186
|
+
readonly label: _angular_core.InputSignal<string>;
|
|
1187
|
+
/** On/off. Two-way: `[(selected)]`. */
|
|
1188
|
+
readonly selected: _angular_core.ModelSignal<boolean>;
|
|
1189
|
+
readonly icon: _angular_core.InputSignal<"filter" | "menu" | "search" | "table" | "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" | "image" | "image-off" | "utensils" | "zoom-in" | "zoom-out" | "trash-2" | "clock" | "pencil" | "circle-help" | "stock" | "allergen-cereals-gluten" | "allergen-crustaceans" | "allergen-eggs" | "allergen-fish" | "allergen-peanuts" | "allergen-soybeans" | "allergen-milk" | "allergen-nuts" | "allergen-celery" | "allergen-mustard" | "allergen-sesame" | "allergen-sulphites" | "allergen-lupin" | "allergen-molluscs" | null>;
|
|
1190
|
+
readonly count: _angular_core.InputSignal<number | null | undefined>;
|
|
1191
|
+
readonly size: _angular_core.InputSignal<SdsChipSize>;
|
|
1192
|
+
readonly disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
1193
|
+
/** Replace the icon with a check while selected. */
|
|
1194
|
+
readonly showCheck: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
1195
|
+
protected readonly countClass = "inline-flex min-w-5 items-center justify-center rounded-full bg-ink/5 px-1.5 text-[11px] font-semibold tabular-nums dark:bg-white/10";
|
|
1196
|
+
protected readonly classes: _angular_core.Signal<string>;
|
|
1197
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<SdsChip, never>;
|
|
1198
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<SdsChip, "sds-chip", never, { "label": { "alias": "label"; "required": true; "isSignal": true; }; "selected": { "alias": "selected"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "count": { "alias": "count"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "showCheck": { "alias": "showCheck"; "required": false; "isSignal": true; }; }, { "selected": "selectedChange"; }, never, never, true, never>;
|
|
1199
|
+
}
|
|
1200
|
+
/**
|
|
1201
|
+
* A set of chips: pick ONE (a filter row such as "All · Missing photo · Hidden", VAT presets, a date
|
|
1202
|
+
* range) or, with `multiple`, SEVERAL (categories of an item, days of the week, dietary tags). Unlike
|
|
1203
|
+
* sds-segmented (a compact joined bar), chips wrap onto several lines and can carry a count.
|
|
1204
|
+
*
|
|
1205
|
+
* Value: two-way `[(value)]`, or a form control (`formControlName` / `[(ngModel)]` —
|
|
1206
|
+
* ControlValueAccessor). Single mode holds the picked value (or null); `multiple` holds an array, in the
|
|
1207
|
+
* order of the options.
|
|
1208
|
+
*
|
|
1209
|
+
* Accessibility: single mode is a `radiogroup` (one tab stop, arrows/Home/End move and select, like
|
|
1210
|
+
* native radios); `multiple` is a `group` of `aria-pressed` toggle buttons. Name it with [ariaLabel] or
|
|
1211
|
+
* [ariaLabelledby].
|
|
1212
|
+
*
|
|
1213
|
+
* @example
|
|
1214
|
+
* <sds-chip-group ariaLabel="Filter" [options]="filters()" [(value)]="issue" />
|
|
1215
|
+
* <!-- filters = [{ value: null, label: 'All', count: 34 }, { value: 'NO_PHOTO', label: 'Missing photo', count: 5 }] -->
|
|
1216
|
+
*
|
|
1217
|
+
* @example
|
|
1218
|
+
* <sds-chip-group ariaLabel="Categories" multiple [options]="categories()" formControlName="categoryIds" />
|
|
1219
|
+
*/
|
|
1220
|
+
declare class SdsChipGroup implements ControlValueAccessor {
|
|
1221
|
+
private readonly host;
|
|
1222
|
+
private readonly baseId;
|
|
1223
|
+
/** Options: `{ value, label, icon?, count?, disabled? }` objects, or bare strings/numbers. */
|
|
1224
|
+
readonly options: _angular_core.InputSignal<readonly (string | number | SdsChipOption<unknown>)[]>;
|
|
1225
|
+
/** Picked value (single) or values (multiple). Two-way: `[(value)]`. */
|
|
1226
|
+
readonly value: _angular_core.ModelSignal<unknown>;
|
|
1227
|
+
/** Allow several chips at once; the value becomes an array. */
|
|
1228
|
+
readonly multiple: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
1229
|
+
/** Single mode: clicking the picked chip again clears the value to null. */
|
|
1230
|
+
readonly deselectable: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
1231
|
+
readonly size: _angular_core.InputSignal<SdsChipSize>;
|
|
1232
|
+
readonly ariaLabel: _angular_core.InputSignal<string>;
|
|
1233
|
+
readonly ariaLabelledby: _angular_core.InputSignal<string>;
|
|
1234
|
+
readonly disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
1235
|
+
/** Wrap onto several lines (default) or scroll horizontally on one line. */
|
|
1236
|
+
readonly wrap: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
1237
|
+
/** `multiple`: a check replaces the icon on picked chips. */
|
|
1238
|
+
readonly showCheck: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
1239
|
+
protected readonly countClass = "inline-flex min-w-5 items-center justify-center rounded-full bg-ink/5 px-1.5 text-[11px] font-semibold tabular-nums dark:bg-white/10";
|
|
1240
|
+
private readonly cvaDisabled;
|
|
1241
|
+
protected readonly isDisabled: _angular_core.Signal<boolean>;
|
|
1242
|
+
protected readonly chips: _angular_core.Signal<NormChip[]>;
|
|
1243
|
+
private readonly selectedValues;
|
|
1244
|
+
/** Single mode's roving tab stop: the picked chip, else the first enabled one. */
|
|
1245
|
+
protected readonly tabStop: _angular_core.Signal<number>;
|
|
1246
|
+
protected isSelected(chip: NormChip): boolean;
|
|
1247
|
+
protected chipId(i: number): string;
|
|
1248
|
+
protected classFor(chip: NormChip): string;
|
|
1249
|
+
protected toggle(i: number): void;
|
|
1250
|
+
protected onKeydown(event: KeyboardEvent): void;
|
|
1251
|
+
private step;
|
|
1252
|
+
private onChange;
|
|
1253
|
+
protected onTouched: () => void;
|
|
1254
|
+
writeValue(value: unknown): void;
|
|
1255
|
+
registerOnChange(fn: (value: unknown) => void): void;
|
|
1256
|
+
registerOnTouched(fn: () => void): void;
|
|
1257
|
+
setDisabledState(isDisabled: boolean): void;
|
|
1258
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<SdsChipGroup, never>;
|
|
1259
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<SdsChipGroup, "sds-chip-group", never, { "options": { "alias": "options"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "multiple": { "alias": "multiple"; "required": false; "isSignal": true; }; "deselectable": { "alias": "deselectable"; "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; }; "wrap": { "alias": "wrap"; "required": false; "isSignal": true; }; "showCheck": { "alias": "showCheck"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; }, never, never, true, never>;
|
|
1260
|
+
}
|
|
1261
|
+
|
|
981
1262
|
/** Severity of a checklist row. `blocker` stops customers, `warning` costs sales, `info` is polish. */
|
|
982
1263
|
type SdsChecklistStatus = 'done' | 'warning' | 'blocker' | 'info';
|
|
983
1264
|
interface StatusStyle {
|
|
@@ -1104,6 +1385,9 @@ interface StateStyle {
|
|
|
1104
1385
|
* for multi-select ("select all matches"): it then carries `aria-pressed` and a corner check. [busy]
|
|
1105
1386
|
* shows a spinner and sets `aria-busy` while a save is in flight.
|
|
1106
1387
|
*
|
|
1388
|
+
* A photo that fails to load (404, blocked, not an image) falls back to the no-photo layout — never
|
|
1389
|
+
* a broken-image icon — and `(imageError)` reports the URL. A new [image] URL is tried again.
|
|
1390
|
+
*
|
|
1107
1391
|
* @example
|
|
1108
1392
|
* <sds-status-tile title="Bacon" subtitle="Extras" state="sold-out" note="Back at 22:00"
|
|
1109
1393
|
* soldOutLabel="Sold out" (activate)="toggle(item)" />
|
|
@@ -1128,13 +1412,19 @@ declare class SdsStatusTile {
|
|
|
1128
1412
|
readonly hiddenLabel: _angular_core.InputSignal<string>;
|
|
1129
1413
|
/** The tile was pressed (click, tap, Enter or Space). */
|
|
1130
1414
|
readonly activate: _angular_core.OutputEmitterRef<void>;
|
|
1415
|
+
/** The [image] URL failed to load; the tile has fallen back to its no-photo layout. */
|
|
1416
|
+
readonly imageError: _angular_core.OutputEmitterRef<string>;
|
|
1417
|
+
/** The URL that last failed to load — hidden until [image] changes to another URL. */
|
|
1418
|
+
private readonly failedImage;
|
|
1419
|
+
protected readonly showImage: _angular_core.Signal<boolean>;
|
|
1420
|
+
protected onImageError(): void;
|
|
1131
1421
|
protected readonly style: _angular_core.Signal<StateStyle>;
|
|
1132
1422
|
protected readonly stateText: _angular_core.Signal<string>;
|
|
1133
1423
|
/** Diagonal hatch on sold-out tiles — a pattern cue on top of the colour. */
|
|
1134
1424
|
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>;
|
|
1135
1425
|
protected readonly tileClass: _angular_core.Signal<string>;
|
|
1136
1426
|
static ɵfac: _angular_core.ɵɵFactoryDeclaration<SdsStatusTile, never>;
|
|
1137
|
-
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"; }, never, never, true, never>;
|
|
1427
|
+
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>;
|
|
1138
1428
|
}
|
|
1139
1429
|
|
|
1140
1430
|
/** An actionable row. */
|
|
@@ -1206,7 +1496,7 @@ declare class SdsMenu implements OnDestroy {
|
|
|
1206
1496
|
/** Accessible name of the built-in icon trigger (required when there is no [triggerText]). */
|
|
1207
1497
|
readonly triggerLabel: _angular_core.InputSignal<string>;
|
|
1208
1498
|
/** Icon of the built-in trigger. */
|
|
1209
|
-
readonly triggerIcon: _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" | "
|
|
1499
|
+
readonly triggerIcon: _angular_core.InputSignal<"filter" | "menu" | "search" | "table" | "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" | "image" | "image-off" | "utensils" | "zoom-in" | "zoom-out" | "trash-2" | "clock" | "pencil" | "circle-help" | "stock" | "allergen-cereals-gluten" | "allergen-crustaceans" | "allergen-eggs" | "allergen-fish" | "allergen-peanuts" | "allergen-soybeans" | "allergen-milk" | "allergen-nuts" | "allergen-celery" | "allergen-mustard" | "allergen-sesame" | "allergen-sulphites" | "allergen-lupin" | "allergen-molluscs">;
|
|
1210
1500
|
/** Optional visible text on the built-in trigger (then it is its name). */
|
|
1211
1501
|
readonly triggerText: _angular_core.InputSignal<string>;
|
|
1212
1502
|
/** Accessible name of the menu itself; defaults to the trigger's name. */
|
|
@@ -1339,6 +1629,10 @@ type DragMode = 'keyboard' | 'pointer';
|
|
|
1339
1629
|
* - **Keyboard**: focus a handle, **Space/Enter** picks the item up, **↑/↓** (and Home/End) move it,
|
|
1340
1630
|
* **Space/Enter** drops it, **Escape** cancels (the event is stopped, so an enclosing drawer stays open).
|
|
1341
1631
|
* Moving focus away also cancels.
|
|
1632
|
+
* - **Long lists**: while a pointer drag nears the top or bottom edge of the nearest scrollable
|
|
1633
|
+
* ancestor (a drawer body, a panel) — or of the window — that container scrolls, faster closer to
|
|
1634
|
+
* the edge, and the dragged row stays under the pointer. A keyboard move scrolls just enough to keep
|
|
1635
|
+
* the moving row in view. Turn off with `[autoScroll]="false"`.
|
|
1342
1636
|
* - **Screen readers**: every handle is named ("Reorder Burgers") and described by the instructions; an
|
|
1343
1637
|
* assertive live region announces pick-up, each move ("moved to position 3 of 8"), the drop and a cancel.
|
|
1344
1638
|
*
|
|
@@ -1375,6 +1669,13 @@ declare class SdsSortableList<T = any> {
|
|
|
1375
1669
|
readonly appearance: _angular_core.InputSignal<SdsSortableAppearance>;
|
|
1376
1670
|
/** Accessible name of the list. */
|
|
1377
1671
|
readonly ariaLabel: _angular_core.InputSignal<string>;
|
|
1672
|
+
/**
|
|
1673
|
+
* Scroll the nearest scrollable ancestor (then the window) while dragging near its top or bottom
|
|
1674
|
+
* edge, and keep a keyboard-moved row in view.
|
|
1675
|
+
*/
|
|
1676
|
+
readonly autoScroll: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
1677
|
+
/** Height (px) of the band along each scroll edge where a pointer drag starts auto-scrolling. */
|
|
1678
|
+
readonly autoScrollEdge: _angular_core.InputSignalWithTransform<number, unknown>;
|
|
1378
1679
|
/** Name of each handle; `{item}` is the item's label. */
|
|
1379
1680
|
readonly handleLabel: _angular_core.InputSignal<string>;
|
|
1380
1681
|
/** Read after a handle's name (aria-describedby). */
|
|
@@ -1404,6 +1705,14 @@ declare class SdsSortableList<T = any> {
|
|
|
1404
1705
|
private gap;
|
|
1405
1706
|
private pointerId;
|
|
1406
1707
|
private startY;
|
|
1708
|
+
/** Latest pointer position during a pointer drag (auto-scroll re-reads it every frame). */
|
|
1709
|
+
private lastY;
|
|
1710
|
+
/** The host's viewport top at drag start: the drift since then is how far its scrollers moved. */
|
|
1711
|
+
private startHostTop;
|
|
1712
|
+
/** Nearest scrollable ancestor, found at drag start. */
|
|
1713
|
+
private scroller;
|
|
1714
|
+
private frame;
|
|
1715
|
+
constructor();
|
|
1407
1716
|
/** Per-row offsets that open a gap where the moving row will land. */
|
|
1408
1717
|
private readonly shifts;
|
|
1409
1718
|
/** Offset of the moving row: follows the pointer, or jumps slot to slot with the keyboard. */
|
|
@@ -1422,6 +1731,25 @@ declare class SdsSortableList<T = any> {
|
|
|
1422
1731
|
protected onFocusOut(event: FocusEvent): void;
|
|
1423
1732
|
protected onPointerDown(event: PointerEvent, i: number): void;
|
|
1424
1733
|
protected onPointerMove(event: PointerEvent): void;
|
|
1734
|
+
/**
|
|
1735
|
+
* Place the dragged row under the pointer and pick its landing slot. Positions are compared in
|
|
1736
|
+
* drag-start coordinates: the pointer's travel plus however far the list has scrolled since.
|
|
1737
|
+
*/
|
|
1738
|
+
private track;
|
|
1739
|
+
/** How far (px) the list has moved up the viewport since the drag began — any ancestor or the window. */
|
|
1740
|
+
private scrolledBy;
|
|
1741
|
+
private startAutoScroll;
|
|
1742
|
+
private stopAutoScroll;
|
|
1743
|
+
/**
|
|
1744
|
+
* One auto-scroll step for a pointer at `y`: the scroll container first, then the window. A side
|
|
1745
|
+
* only scrolls while part of the list is still hidden past that edge.
|
|
1746
|
+
*/
|
|
1747
|
+
private scrollNearEdge;
|
|
1748
|
+
/**
|
|
1749
|
+
* Keyboard move: scroll just enough (container, then window) to keep the moving row in view. Its
|
|
1750
|
+
* resting box comes from drag-start geometry, since its transform may still be animating.
|
|
1751
|
+
*/
|
|
1752
|
+
private revealActive;
|
|
1425
1753
|
protected onPointerUp(event: PointerEvent): void;
|
|
1426
1754
|
protected onPointerCancel(): void;
|
|
1427
1755
|
private begin;
|
|
@@ -1433,7 +1761,7 @@ declare class SdsSortableList<T = any> {
|
|
|
1433
1761
|
private focusHandle;
|
|
1434
1762
|
private announce;
|
|
1435
1763
|
static ɵfac: _angular_core.ɵɵFactoryDeclaration<SdsSortableList<any>, never>;
|
|
1436
|
-
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; }; "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>;
|
|
1764
|
+
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>;
|
|
1437
1765
|
}
|
|
1438
1766
|
|
|
1439
1767
|
/** Why a file was turned away. */
|
|
@@ -1672,6 +2000,7 @@ declare class SdsCalendar {
|
|
|
1672
2000
|
readonly max: _angular_core.InputSignal<Date | null>;
|
|
1673
2001
|
/** 0 = Sunday, 1 = Monday (default, European). */
|
|
1674
2002
|
readonly firstDayOfWeek: _angular_core.InputSignal<0 | 1>;
|
|
2003
|
+
/** BCP 47 locale for month and weekday names. Defaults to `en-GB`; pass the app's locale. */
|
|
1675
2004
|
readonly locale: _angular_core.InputSignal<string>;
|
|
1676
2005
|
readonly showActions: _angular_core.InputSignal<boolean>;
|
|
1677
2006
|
/** When true, a time editor (HH:mm, 24h) is shown and the value keeps its time-of-day. */
|
|
@@ -1687,14 +2016,13 @@ declare class SdsCalendar {
|
|
|
1687
2016
|
/** Visible text of the "done" action (shown when {@link showDone} is true). */
|
|
1688
2017
|
readonly doneLabel: _angular_core.InputSignal<string>;
|
|
1689
2018
|
/**
|
|
1690
|
-
* Accessible name for the calendar container.
|
|
1691
|
-
*
|
|
2019
|
+
* Accessible name for the calendar container. English default; an app serving more than one
|
|
2020
|
+
* language MUST translate it.
|
|
1692
2021
|
*/
|
|
1693
2022
|
readonly calendarLabel: _angular_core.InputSignal<string>;
|
|
1694
2023
|
/**
|
|
1695
2024
|
* Accessible name for the "previous" nav button. It is icon-only, so this string is its ONLY
|
|
1696
|
-
* accessible name
|
|
1697
|
-
* the consuming app.
|
|
2025
|
+
* accessible name. English default; translate it in the consuming app.
|
|
1698
2026
|
*/
|
|
1699
2027
|
readonly previousLabel: _angular_core.InputSignal<string>;
|
|
1700
2028
|
/** Accessible name for the icon-only "next" nav button. See {@link previousLabel}. */
|
|
@@ -1706,7 +2034,7 @@ declare class SdsCalendar {
|
|
|
1706
2034
|
readonly todayActionLabel: _angular_core.InputSignal<string>;
|
|
1707
2035
|
/** Visible text of the "clear" action. See {@link todayActionLabel}. */
|
|
1708
2036
|
readonly clearActionLabel: _angular_core.InputSignal<string>;
|
|
1709
|
-
/** Emitted when a concrete date is picked (day click or "
|
|
2037
|
+
/** Emitted when a concrete date is picked (day click or "Today"). */
|
|
1710
2038
|
readonly dateSelect: _angular_core.OutputEmitterRef<Date>;
|
|
1711
2039
|
/** Emitted when the "done" action is used (see {@link showDone}). */
|
|
1712
2040
|
readonly done: _angular_core.OutputEmitterRef<void>;
|
|
@@ -1777,7 +2105,7 @@ type SdsDatePickerSize = 'sm' | 'md' | 'lg';
|
|
|
1777
2105
|
* [(ngModel)]; the value is a `Date | null`.
|
|
1778
2106
|
*
|
|
1779
2107
|
* @example
|
|
1780
|
-
* <sds-date-picker label="
|
|
2108
|
+
* <sds-date-picker label="Delivery date" [(ngModel)]="date" />
|
|
1781
2109
|
*/
|
|
1782
2110
|
declare class SdsDatePicker implements ControlValueAccessor, OnDestroy {
|
|
1783
2111
|
private readonly host;
|
|
@@ -1792,6 +2120,10 @@ declare class SdsDatePicker implements ControlValueAccessor, OnDestroy {
|
|
|
1792
2120
|
readonly min: _angular_core.InputSignal<Date | null>;
|
|
1793
2121
|
readonly max: _angular_core.InputSignal<Date | null>;
|
|
1794
2122
|
readonly firstDayOfWeek: _angular_core.InputSignal<0 | 1>;
|
|
2123
|
+
/**
|
|
2124
|
+
* BCP 47 locale for the calendar's month and weekday names. Defaults to `en-GB` (English names, and
|
|
2125
|
+
* the same day-first order as the default dd/MM/yyyy display); pass the app's locale.
|
|
2126
|
+
*/
|
|
1795
2127
|
readonly locale: _angular_core.InputSignal<string>;
|
|
1796
2128
|
readonly inline: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
1797
2129
|
readonly clearable: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
@@ -1814,9 +2146,8 @@ declare class SdsDatePicker implements ControlValueAccessor, OnDestroy {
|
|
|
1814
2146
|
/** Visible text of the calendar's "done" action, shown in the overlay when {@link showTime}. */
|
|
1815
2147
|
readonly doneLabel: _angular_core.InputSignal<string>;
|
|
1816
2148
|
/**
|
|
1817
|
-
* Accessible name for the clear button.
|
|
1818
|
-
*
|
|
1819
|
-
* is its only name.
|
|
2149
|
+
* Accessible name for the clear button. English default; an app serving more than one language MUST
|
|
2150
|
+
* translate it — it is an icon-only control, so this string is its only name.
|
|
1820
2151
|
*/
|
|
1821
2152
|
readonly clearLabel: _angular_core.InputSignal<string>;
|
|
1822
2153
|
/**
|
|
@@ -2013,7 +2344,7 @@ interface NormOption$1 {
|
|
|
2013
2344
|
*
|
|
2014
2345
|
* @example
|
|
2015
2346
|
* <sds-select [options]="services" optionLabel="name" optionValue="id"
|
|
2016
|
-
* placeholder="
|
|
2347
|
+
* placeholder="Choose a service" [(ngModel)]="serviceId" filter clearable />
|
|
2017
2348
|
*
|
|
2018
2349
|
* @example
|
|
2019
2350
|
* <sds-select [options]="categories" optionLabel="name" optionValue="id" [(ngModel)]="categoryId">
|
|
@@ -2045,6 +2376,13 @@ declare class SdsSelect implements ControlValueAccessor, OnDestroy {
|
|
|
2045
2376
|
readonly filter: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
2046
2377
|
readonly filterPlaceholder: _angular_core.InputSignal<string>;
|
|
2047
2378
|
readonly emptyMessage: _angular_core.InputSignal<string>;
|
|
2379
|
+
/**
|
|
2380
|
+
* Accessible name of the icon-only clear button (see {@link clearable}). English default; an app
|
|
2381
|
+
* serving more than one language passes a translated value — it is the button's only name.
|
|
2382
|
+
*/
|
|
2383
|
+
readonly clearLabel: _angular_core.InputSignal<string>;
|
|
2384
|
+
/** Accessible name of the filter field inside the panel (see {@link filter}). */
|
|
2385
|
+
readonly filterLabel: _angular_core.InputSignal<string>;
|
|
2048
2386
|
/** Optional projected `<ng-template sdsSelectOption>` — custom option + selected-value rendering. */
|
|
2049
2387
|
protected readonly optionTpl: _angular_core.Signal<SdsSelectOption | undefined>;
|
|
2050
2388
|
/** Optional projected `<ng-template sdsSelectEmpty>` — custom no-results content. */
|
|
@@ -2116,7 +2454,7 @@ declare class SdsSelect implements ControlValueAccessor, OnDestroy {
|
|
|
2116
2454
|
registerOnTouched(fn: () => void): void;
|
|
2117
2455
|
setDisabledState(isDisabled: boolean): void;
|
|
2118
2456
|
static ɵfac: _angular_core.ɵɵFactoryDeclaration<SdsSelect, never>;
|
|
2119
|
-
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>;
|
|
2457
|
+
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>;
|
|
2120
2458
|
}
|
|
2121
2459
|
|
|
2122
2460
|
type SdsMultiSelectSize = 'sm' | 'md' | 'lg';
|
|
@@ -2183,6 +2521,17 @@ declare class SdsMultiSelect implements ControlValueAccessor, OnDestroy {
|
|
|
2183
2521
|
readonly filter: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
2184
2522
|
readonly filterPlaceholder: _angular_core.InputSignal<string>;
|
|
2185
2523
|
readonly emptyMessage: _angular_core.InputSignal<string>;
|
|
2524
|
+
/**
|
|
2525
|
+
* Accessible name of a chip's icon-only remove button (`display="chip"`); `{label}` is the option's
|
|
2526
|
+
* label. English defaults throughout — an app serving more than one language passes translations.
|
|
2527
|
+
*/
|
|
2528
|
+
readonly removeLabel: _angular_core.InputSignal<string>;
|
|
2529
|
+
/** Accessible name of the icon-only clear-all button (see {@link clearable}). */
|
|
2530
|
+
readonly clearLabel: _angular_core.InputSignal<string>;
|
|
2531
|
+
/** Accessible name of the filter field inside the panel (see {@link filter}). */
|
|
2532
|
+
readonly filterLabel: _angular_core.InputSignal<string>;
|
|
2533
|
+
/** Visible text of the "select all" row (see {@link showToggleAll}). */
|
|
2534
|
+
readonly selectAllLabel: _angular_core.InputSignal<string>;
|
|
2186
2535
|
/** Optional projected `<ng-template sdsSelectOption>` — custom option-row rendering. */
|
|
2187
2536
|
protected readonly optionTpl: _angular_core.Signal<SdsSelectOption | undefined>;
|
|
2188
2537
|
/** Optional projected `<ng-template sdsSelectEmpty>` — custom no-results content. */
|
|
@@ -2260,7 +2609,7 @@ declare class SdsMultiSelect implements ControlValueAccessor, OnDestroy {
|
|
|
2260
2609
|
registerOnTouched(fn: () => void): void;
|
|
2261
2610
|
setDisabledState(isDisabled: boolean): void;
|
|
2262
2611
|
static ɵfac: _angular_core.ɵɵFactoryDeclaration<SdsMultiSelect, never>;
|
|
2263
|
-
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>;
|
|
2612
|
+
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>;
|
|
2264
2613
|
}
|
|
2265
2614
|
|
|
2266
2615
|
/**
|
|
@@ -2274,7 +2623,10 @@ declare class SdsMultiSelect implements ControlValueAccessor, OnDestroy {
|
|
|
2274
2623
|
interface SdsPhoneCountry {
|
|
2275
2624
|
/** ISO 3166-1 alpha-2 code, e.g. 'BE'. */
|
|
2276
2625
|
iso2: string;
|
|
2277
|
-
/**
|
|
2626
|
+
/**
|
|
2627
|
+
* English display name (the fallback). `<sds-phone-input [locale]>` shows the name in that locale
|
|
2628
|
+
* via `Intl.DisplayNames` instead.
|
|
2629
|
+
*/
|
|
2278
2630
|
name: string;
|
|
2279
2631
|
/** International dial code without '+', e.g. '32'. */
|
|
2280
2632
|
dialCode: string;
|
|
@@ -2317,7 +2669,7 @@ interface SdsPhoneValue {
|
|
|
2317
2669
|
* '+32470123456') and Validator (national length is checked per country).
|
|
2318
2670
|
*
|
|
2319
2671
|
* @example
|
|
2320
|
-
* <sds-phone-input label="
|
|
2672
|
+
* <sds-phone-input label="Phone" defaultCountry="BE"
|
|
2321
2673
|
* [preferredCountries]="['BE','FR','LU']"
|
|
2322
2674
|
* [(ngModel)]="phone" required />
|
|
2323
2675
|
*/
|
|
@@ -2342,19 +2694,22 @@ declare class SdsPhoneInput implements ControlValueAccessor, Validator, OnDestro
|
|
|
2342
2694
|
readonly onlyCountries: _angular_core.InputSignal<string[]>;
|
|
2343
2695
|
/** Show an example number as a hint when no [hint] is provided. */
|
|
2344
2696
|
readonly showExampleHint: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
2697
|
+
/**
|
|
2698
|
+
* BCP 47 locale for the country names (list, search and the selector's accessible name), resolved
|
|
2699
|
+
* with `Intl.DisplayNames` — e.g. `nl-BE` shows "België". Empty (default) uses the built-in English
|
|
2700
|
+
* names. The search also matches the English name.
|
|
2701
|
+
*/
|
|
2702
|
+
readonly locale: _angular_core.InputSignal<string>;
|
|
2345
2703
|
readonly requiredMessage: _angular_core.InputSignal<string>;
|
|
2346
2704
|
/**
|
|
2347
2705
|
* Accessible name of the country selector. `{country}` is replaced with the selected country's
|
|
2348
|
-
* name. A token rather than a prefix because word order differs per
|
|
2349
|
-
*
|
|
2350
|
-
*
|
|
2351
|
-
* Note the interpolated country NAME still comes from the library's built-in country table, which
|
|
2352
|
-
* is French-only — translating this template fixes the wrapper, not the name inside it.
|
|
2706
|
+
* name (localised by {@link locale}). A token rather than a prefix because word order differs per
|
|
2707
|
+
* language. English default; translate it in any app serving more than one language.
|
|
2353
2708
|
*/
|
|
2354
2709
|
readonly countryLabel: _angular_core.InputSignal<string>;
|
|
2355
2710
|
/**
|
|
2356
2711
|
* Accessible name for the clear button. It is icon-only, so this string is its ONLY accessible
|
|
2357
|
-
* name —
|
|
2712
|
+
* name — translate it in any app serving more than one language.
|
|
2358
2713
|
*/
|
|
2359
2714
|
readonly clearLabel: _angular_core.InputSignal<string>;
|
|
2360
2715
|
/** Accessible name for the country-search field inside the dropdown. */
|
|
@@ -2365,12 +2720,12 @@ declare class SdsPhoneInput implements ControlValueAccessor, Validator, OnDestro
|
|
|
2365
2720
|
readonly noResultsLabel: _angular_core.InputSignal<string>;
|
|
2366
2721
|
/**
|
|
2367
2722
|
* Built-in validation messages. `{lengths}` is replaced with the country's accepted national
|
|
2368
|
-
* lengths, joined with {@link lengthSeparator}.
|
|
2369
|
-
*
|
|
2723
|
+
* lengths, joined with {@link lengthSeparator}. English defaults; translate them alongside
|
|
2724
|
+
* {@link requiredMessage}.
|
|
2370
2725
|
*/
|
|
2371
2726
|
readonly incompleteMessage: _angular_core.InputSignal<string>;
|
|
2372
2727
|
readonly invalidMessage: _angular_core.InputSignal<string>;
|
|
2373
|
-
/** Joins the accepted lengths when a country allows more than one (e.g. "8
|
|
2728
|
+
/** Joins the accepted lengths when a country allows more than one (e.g. "8 or 9"). */
|
|
2374
2729
|
readonly lengthSeparator: _angular_core.InputSignal<string>;
|
|
2375
2730
|
/**
|
|
2376
2731
|
* Auto-generated example hint (see {@link showExampleHint}). `{number}` is replaced with the
|
|
@@ -2379,6 +2734,10 @@ declare class SdsPhoneInput implements ControlValueAccessor, Validator, OnDestro
|
|
|
2379
2734
|
readonly exampleHintTemplate: _angular_core.InputSignal<string>;
|
|
2380
2735
|
/** Emitted with the parsed parts whenever the number or country changes. */
|
|
2381
2736
|
readonly phoneChange: _angular_core.OutputEmitterRef<SdsPhoneValue>;
|
|
2737
|
+
/** `Intl.DisplayNames` for {@link locale}, or null (built-in English names). */
|
|
2738
|
+
private readonly regionNames;
|
|
2739
|
+
/** The country's display name in {@link locale}, falling back to the built-in English name. */
|
|
2740
|
+
protected countryName(c: SdsPhoneCountry): string;
|
|
2382
2741
|
protected readonly national: _angular_core.WritableSignal<string>;
|
|
2383
2742
|
protected readonly countryIso: _angular_core.WritableSignal<string>;
|
|
2384
2743
|
protected readonly open: _angular_core.WritableSignal<boolean>;
|
|
@@ -2438,7 +2797,7 @@ declare class SdsPhoneInput implements ControlValueAccessor, Validator, OnDestro
|
|
|
2438
2797
|
validate(_control: AbstractControl): ValidationErrors | null;
|
|
2439
2798
|
registerOnValidatorChange(fn: () => void): void;
|
|
2440
2799
|
static ɵfac: _angular_core.ɵɵFactoryDeclaration<SdsPhoneInput, never>;
|
|
2441
|
-
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>;
|
|
2800
|
+
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>;
|
|
2442
2801
|
}
|
|
2443
2802
|
|
|
2444
2803
|
type SdsPaginatorSize = 'sm' | 'md' | 'lg';
|
|
@@ -2556,15 +2915,25 @@ declare class SdsTabsStore {
|
|
|
2556
2915
|
readonly id: string;
|
|
2557
2916
|
/** Whether the tab list scrolls horizontally (mirrors [scrollable]). */
|
|
2558
2917
|
readonly scrollable: WritableSignal<boolean>;
|
|
2918
|
+
/** Controlled mode (mirrors [controlled]): a click only REQUESTS a tab, the host sets [value]. */
|
|
2919
|
+
readonly controlled: WritableSignal<boolean>;
|
|
2920
|
+
/** Called with every tab the user picks (wired to the host's (tabSelect) output). */
|
|
2921
|
+
onSelect: (value: SdsTabValue) => void;
|
|
2559
2922
|
private value;
|
|
2560
2923
|
private readonly registered;
|
|
2924
|
+
private readonly panels;
|
|
2561
2925
|
/** Called once by <sds-tabs> to share its two-way `value` signal. */
|
|
2562
2926
|
connect(value: WritableSignal<SdsTabValue>): void;
|
|
2563
2927
|
activeValue(): SdsTabValue;
|
|
2564
2928
|
isActive(value: SdsTabValue): boolean;
|
|
2929
|
+
/** A user pick. Uncontrolled: becomes the active tab. Controlled: only reported to the host. */
|
|
2565
2930
|
select(value: SdsTabValue): void;
|
|
2566
2931
|
registerTab(value: SdsTabValue): void;
|
|
2567
2932
|
unregisterTab(value: SdsTabValue): void;
|
|
2933
|
+
registerPanel(value: SdsTabValue): void;
|
|
2934
|
+
unregisterPanel(value: SdsTabValue): void;
|
|
2935
|
+
/** Whether an <sds-tab-panel> exists for this value (tabs whose content lives elsewhere have none). */
|
|
2936
|
+
hasPanel(value: SdsTabValue): boolean;
|
|
2568
2937
|
tabId(value: SdsTabValue): string;
|
|
2569
2938
|
panelId(value: SdsTabValue): string;
|
|
2570
2939
|
static ɵfac: _angular_core.ɵɵFactoryDeclaration<SdsTabsStore, never>;
|
|
@@ -2577,10 +2946,18 @@ declare class SdsTabsStore {
|
|
|
2577
2946
|
* <sds-tab-panel> [value]; it is two-way bindable via [(value)]. When omitted,
|
|
2578
2947
|
* the first registered tab is selected.
|
|
2579
2948
|
*
|
|
2949
|
+
* **Controlled tabs** (`controlled`): a click, arrow key or Home/End only emits `(tabSelect)`; the active
|
|
2950
|
+
* tab changes when the host changes `[value]`. Use it when the active tab lives somewhere else — a
|
|
2951
|
+
* `?tab=` query param — or when switching can be refused (an unsaved-changes guard): the tab never
|
|
2952
|
+
* shows as selected before the host agrees. `(tabSelect)` also fires in the default mode.
|
|
2953
|
+
*
|
|
2954
|
+
* **Panels are optional.** A tab set whose content is rendered by the host (an `@switch` on the value, a
|
|
2955
|
+
* router outlet) can omit <sds-tab-panels>; a tab then carries no `aria-controls` to a missing panel.
|
|
2956
|
+
*
|
|
2580
2957
|
* @example
|
|
2581
2958
|
* <sds-tabs [(value)]="active">
|
|
2582
2959
|
* <sds-tab-list>
|
|
2583
|
-
* <sds-tab value="0">
|
|
2960
|
+
* <sds-tab value="0">Details</sds-tab>
|
|
2584
2961
|
* <sds-tab value="1">Historique</sds-tab>
|
|
2585
2962
|
* </sds-tab-list>
|
|
2586
2963
|
* <sds-tab-panels>
|
|
@@ -2588,6 +2965,16 @@ declare class SdsTabsStore {
|
|
|
2588
2965
|
* <sds-tab-panel value="1">…</sds-tab-panel>
|
|
2589
2966
|
* </sds-tab-panels>
|
|
2590
2967
|
* </sds-tabs>
|
|
2968
|
+
*
|
|
2969
|
+
* @example
|
|
2970
|
+
* <!-- driven by a query param, content rendered by the host -->
|
|
2971
|
+
* <sds-tabs controlled [value]="activeTab()" (tabSelect)="selectTab($event)">
|
|
2972
|
+
* <sds-tab-list>
|
|
2973
|
+
* @for (tab of tabs; track tab) {
|
|
2974
|
+
* <sds-tab [value]="tab">{{ 'menu.tabs.' + tab | translate }}</sds-tab>
|
|
2975
|
+
* }
|
|
2976
|
+
* </sds-tab-list>
|
|
2977
|
+
* </sds-tabs>
|
|
2591
2978
|
*/
|
|
2592
2979
|
declare class SdsTabs {
|
|
2593
2980
|
private readonly store;
|
|
@@ -2595,9 +2982,16 @@ declare class SdsTabs {
|
|
|
2595
2982
|
readonly value: _angular_core.ModelSignal<SdsTabValue>;
|
|
2596
2983
|
/** Let the tab list scroll horizontally instead of overflowing. */
|
|
2597
2984
|
readonly scrollable: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
2985
|
+
/**
|
|
2986
|
+
* Controlled mode: a user pick only emits (tabSelect); the host decides by setting [value]. See the
|
|
2987
|
+
* class note.
|
|
2988
|
+
*/
|
|
2989
|
+
readonly controlled: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
2990
|
+
/** Emits the value of the tab the user picked (in both modes). */
|
|
2991
|
+
readonly tabSelect: _angular_core.OutputEmitterRef<SdsTabValue>;
|
|
2598
2992
|
constructor();
|
|
2599
2993
|
static ɵfac: _angular_core.ɵɵFactoryDeclaration<SdsTabs, never>;
|
|
2600
|
-
static ɵcmp: _angular_core.ɵɵComponentDeclaration<SdsTabs, "sds-tabs", never, { "value": { "alias": "value"; "required": false; "isSignal": true; }; "scrollable": { "alias": "scrollable"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; }, never, ["*"], true, never>;
|
|
2994
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<SdsTabs, "sds-tabs", never, { "value": { "alias": "value"; "required": false; "isSignal": true; }; "scrollable": { "alias": "scrollable"; "required": false; "isSignal": true; }; "controlled": { "alias": "controlled"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "tabSelect": "tabSelect"; }, never, ["*"], true, never>;
|
|
2601
2995
|
}
|
|
2602
2996
|
|
|
2603
2997
|
/**
|
|
@@ -2642,10 +3036,12 @@ declare class SdsTabPanels {
|
|
|
2642
3036
|
* the active tab. Inactive panels are not rendered (their content is created
|
|
2643
3037
|
* on activation), so panel state does not persist across switches.
|
|
2644
3038
|
*/
|
|
2645
|
-
declare class SdsTabPanel {
|
|
3039
|
+
declare class SdsTabPanel implements OnInit, OnDestroy {
|
|
2646
3040
|
protected readonly store: SdsTabsStore;
|
|
2647
3041
|
readonly value: _angular_core.InputSignal<SdsTabValue>;
|
|
2648
3042
|
protected readonly active: _angular_core.Signal<boolean>;
|
|
3043
|
+
ngOnInit(): void;
|
|
3044
|
+
ngOnDestroy(): void;
|
|
2649
3045
|
static ɵfac: _angular_core.ɵɵFactoryDeclaration<SdsTabPanel, never>;
|
|
2650
3046
|
static ɵcmp: _angular_core.ɵɵComponentDeclaration<SdsTabPanel, "sds-tab-panel", never, { "value": { "alias": "value"; "required": true; "isSignal": true; }; }, {}, never, ["*"], true, never>;
|
|
2651
3047
|
}
|
|
@@ -2744,6 +3140,51 @@ declare class SdsAccordionContent {
|
|
|
2744
3140
|
static ɵcmp: _angular_core.ɵɵComponentDeclaration<SdsAccordionContent, "sds-accordion-content", never, {}, {}, never, ["*"], true, never>;
|
|
2745
3141
|
}
|
|
2746
3142
|
|
|
3143
|
+
/**
|
|
3144
|
+
* Typed context handed to a custom header template (see {@link SdsTableHeader}), so a header can
|
|
3145
|
+
* act on the table's rows — e.g. a "select all" checkbox over a custom selection column.
|
|
3146
|
+
*/
|
|
3147
|
+
interface SdsTableHeaderContext {
|
|
3148
|
+
/** Same as {@link column} — enables the `let-col` (implicit) binding. */
|
|
3149
|
+
$implicit: SdsTableColumn;
|
|
3150
|
+
/** The column definition this header belongs to. */
|
|
3151
|
+
column: SdsTableColumn;
|
|
3152
|
+
/** Zero-based index of the column in its current (possibly reordered) order. */
|
|
3153
|
+
index: number;
|
|
3154
|
+
/** Every row that passes the global filter, across all pages (the `value` slice when `lazy`). */
|
|
3155
|
+
rows: readonly any[];
|
|
3156
|
+
/** The rows of the page currently displayed. */
|
|
3157
|
+
pageRows: readonly any[];
|
|
3158
|
+
}
|
|
3159
|
+
/**
|
|
3160
|
+
* Supplies a custom template for a column's header cell, matched by its field key. The template
|
|
3161
|
+
* replaces the header's whole content — label and sort button — so it may hold its own controls
|
|
3162
|
+
* (a column with a header template is not sortable from the header). Typical use: a "select all"
|
|
3163
|
+
* checkbox above a checkbox column rendered with `sdsCell`.
|
|
3164
|
+
*
|
|
3165
|
+
* @example
|
|
3166
|
+
* <sds-table [value]="rows" [columns]="cols" dataKey="id">
|
|
3167
|
+
* <ng-template sdsHeader="select" let-rows="rows">
|
|
3168
|
+
* <sds-checkbox ariaLabel="Select all rows" [ngModel]="allSelected(rows)"
|
|
3169
|
+
* [indeterminate]="someSelected(rows)" (ngModelChange)="selectAll(rows, $event)" />
|
|
3170
|
+
* </ng-template>
|
|
3171
|
+
* <ng-template sdsCell="select" let-row="row">
|
|
3172
|
+
* <sds-checkbox [ariaLabel]="'Select ' + row.name" [ngModel]="isSelected(row)"
|
|
3173
|
+
* (ngModelChange)="toggle(row, $event)" />
|
|
3174
|
+
* </ng-template>
|
|
3175
|
+
* </sds-table>
|
|
3176
|
+
*/
|
|
3177
|
+
declare class SdsTableHeader {
|
|
3178
|
+
/** The column `field` whose header this template renders. */
|
|
3179
|
+
readonly column: _angular_core.InputSignal<string>;
|
|
3180
|
+
/** The wrapped template, rendered by the host table via ngTemplateOutlet. */
|
|
3181
|
+
readonly template: TemplateRef<SdsTableHeaderContext>;
|
|
3182
|
+
/** Lets the compiler type-check `let-*` bindings against SdsTableHeaderContext. */
|
|
3183
|
+
static ngTemplateContextGuard(_dir: SdsTableHeader, _ctx: unknown): _ctx is SdsTableHeaderContext;
|
|
3184
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<SdsTableHeader, never>;
|
|
3185
|
+
static ɵdir: _angular_core.ɵɵDirectiveDeclaration<SdsTableHeader, "ng-template[sdsHeader]", never, { "column": { "alias": "sdsHeader"; "required": true; "isSignal": true; }; }, {}, never, never, true, never>;
|
|
3186
|
+
}
|
|
3187
|
+
|
|
2747
3188
|
/** Column configuration. `field` may be a dot-path (e.g. `service.name`). */
|
|
2748
3189
|
interface SdsTableColumn {
|
|
2749
3190
|
/** Row field rendered in this column. Supports dot-paths. */
|
|
@@ -2835,6 +3276,16 @@ type SdsSelectionMode = 'single' | 'multiple' | null;
|
|
|
2835
3276
|
* across all pages**, not just the current page. Toggling it selects/clears
|
|
2836
3277
|
* every filtered row regardless of pagination (this is an intentional
|
|
2837
3278
|
* deviation from PrimeNG's per-page select-all).
|
|
3279
|
+
* - **Custom headers:** `<ng-template sdsHeader="field">` replaces a column's header content (label and
|
|
3280
|
+
* sort button) — e.g. a "select all" checkbox above your own checkbox column. Its context carries the
|
|
3281
|
+
* filtered `rows` (all pages) and the displayed `pageRows` (see {@link SdsTableHeaderContext}).
|
|
3282
|
+
* - **Clickable rows:** `rowClickable` makes each row an action (pointer, tab stop, Enter/Space) that
|
|
3283
|
+
* emits `(rowClick)`; clicks on buttons, links and fields inside a cell are not row clicks, so no
|
|
3284
|
+
* `stopPropagation()` is needed. `[rowClass]` adds per-row classes (e.g. dim a blocked row).
|
|
3285
|
+
* - **Empty state:** `<ng-template sdsTableEmpty let-query>` replaces the plain `emptyMessage` (e.g. a
|
|
3286
|
+
* sentence and a "create" button); it is not shown while `loading`.
|
|
3287
|
+
* - **Labels:** every visible and spoken string is an input with an English default (paginator,
|
|
3288
|
+
* filter, selection, expansion, editor). An app serving more than one language passes translations.
|
|
2838
3289
|
*
|
|
2839
3290
|
* **Editable grid (opt-in).** Set `editable` and give columns an `editor` (`text` · `number` ·
|
|
2840
3291
|
* `currency` · `select`). The table becomes an ARIA grid with one tab stop: arrow keys move between
|
|
@@ -2844,14 +3295,16 @@ type SdsSelectionMode = 'single' | 'multiple' | null;
|
|
|
2844
3295
|
* commits. Each changed commit emits `(cellCommit)` — the host applies it to its data (the table never
|
|
2845
3296
|
* mutates rows) — and marks the cell dirty until {@link clearDirty}. Errors from `[cellErrors]` show
|
|
2846
3297
|
* under the cell with `aria-invalid`. Number/currency cells use sds-input-number (live, locale-aware
|
|
2847
|
-
* formatting: "11,9" → "€11.90"
|
|
3298
|
+
* formatting: "11,9" → "€11.90"; in a comma locale such as fr-BE or nl-BE a typed "." is taken as the
|
|
3299
|
+
* decimal separator, so "12.50" → "12,50 €"). The `select` editor is a styled native select with the
|
|
3300
|
+
* column header as its name. Everything else — sort, paging, selection — is unchanged.
|
|
2848
3301
|
*
|
|
2849
3302
|
* @example
|
|
2850
3303
|
* <sds-table [value]="staff" [columns]="cols" dataKey="id"
|
|
2851
3304
|
* sortable paginator [rows]="10" globalFilter
|
|
2852
3305
|
* selectionMode="multiple" [(selection)]="selected">
|
|
2853
|
-
* <ng-template sdsCell="
|
|
2854
|
-
* <sds-badge [variant]="row.
|
|
3306
|
+
* <ng-template sdsCell="status" let-value let-row="row">
|
|
3307
|
+
* <sds-badge [variant]="row.active ? 'success' : 'neutral'">{{ value }}</sds-badge>
|
|
2855
3308
|
* </ng-template>
|
|
2856
3309
|
* </sds-table>
|
|
2857
3310
|
*
|
|
@@ -2901,6 +3354,14 @@ declare class SdsTable implements OnDestroy {
|
|
|
2901
3354
|
readonly selection: _angular_core.ModelSignal<any>;
|
|
2902
3355
|
readonly loading: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
2903
3356
|
readonly emptyMessage: _angular_core.InputSignal<string>;
|
|
3357
|
+
/**
|
|
3358
|
+
* Rows are actions: a pointer cursor, a tab stop per row, and Enter/Space emit `(rowClick)` like a
|
|
3359
|
+
* click. Clicks that land on a control inside a cell (button, link, input, checkbox…) do not count as
|
|
3360
|
+
* a row click, so a row can open a drawer while its cells keep their own buttons.
|
|
3361
|
+
*/
|
|
3362
|
+
readonly rowClickable: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
3363
|
+
/** Extra classes per body row, e.g. `(row) => row.blocked ? 'opacity-60' : ''`. */
|
|
3364
|
+
readonly rowClass: _angular_core.InputSignal<((row: any, index: number) => string | null | undefined) | null>;
|
|
2904
3365
|
readonly caption: _angular_core.InputSignal<string>;
|
|
2905
3366
|
/** Fallback accessible name for the `<table>` when no `caption` is set. */
|
|
2906
3367
|
readonly ariaLabel: _angular_core.InputSignal<string>;
|
|
@@ -2926,6 +3387,20 @@ declare class SdsTable implements OnDestroy {
|
|
|
2926
3387
|
readonly locale: _angular_core.InputSignal<string>;
|
|
2927
3388
|
/** Spoken marker of an edited (dirty) cell. */
|
|
2928
3389
|
readonly dirtyLabel: _angular_core.InputSignal<string>;
|
|
3390
|
+
/** Empty choice of a `select` editor while the cell has no value (a column's `placeholder` wins). */
|
|
3391
|
+
readonly selectPlaceholder: _angular_core.InputSignal<string>;
|
|
3392
|
+
/**
|
|
3393
|
+
* Selection and expansion labels (English defaults; translate them in a multi-language app). The
|
|
3394
|
+
* checkbox/radio and expander buttons are icon-only, so these strings are their only names.
|
|
3395
|
+
*/
|
|
3396
|
+
readonly selectAllLabel: _angular_core.InputSignal<string>;
|
|
3397
|
+
readonly selectRowLabel: _angular_core.InputSignal<string>;
|
|
3398
|
+
/** Screen-reader name of the selection column's header in `single` mode. */
|
|
3399
|
+
readonly selectionColumnLabel: _angular_core.InputSignal<string>;
|
|
3400
|
+
/** Screen-reader name of the expander column's header (see {@link expandable}). */
|
|
3401
|
+
readonly expandColumnLabel: _angular_core.InputSignal<string>;
|
|
3402
|
+
readonly expandRowLabel: _angular_core.InputSignal<string>;
|
|
3403
|
+
readonly collapseRowLabel: _angular_core.InputSignal<string>;
|
|
2929
3404
|
readonly sortChange: _angular_core.OutputEmitterRef<SdsTableSortEvent>;
|
|
2930
3405
|
readonly pageChange: _angular_core.OutputEmitterRef<SdsPaginatorState>;
|
|
2931
3406
|
readonly rowSelect: _angular_core.OutputEmitterRef<any>;
|
|
@@ -2947,8 +3422,14 @@ declare class SdsTable implements OnDestroy {
|
|
|
2947
3422
|
private readonly cellTemplates;
|
|
2948
3423
|
private readonly templateMap;
|
|
2949
3424
|
protected templateFor(field: string): _angular_core.TemplateRef<SdsTableCellContext> | null;
|
|
3425
|
+
private readonly headerTemplates;
|
|
3426
|
+
private readonly headerTemplateMap;
|
|
3427
|
+
protected headerTemplateFor(field: string): _angular_core.TemplateRef<SdsTableHeaderContext> | null;
|
|
3428
|
+
protected headerContext(column: SdsTableColumn, index: number): SdsTableHeaderContext;
|
|
2950
3429
|
private readonly rowExpansion;
|
|
2951
3430
|
protected expansionTemplate(): _angular_core.TemplateRef<_besaitech_ng_design_system.SdsTableRowExpansionContext> | null;
|
|
3431
|
+
private readonly emptyTpl;
|
|
3432
|
+
protected emptyTemplate(): _angular_core.TemplateRef<_besaitech_ng_design_system.SdsTableEmptyContext> | null;
|
|
2952
3433
|
protected readonly filterText: _angular_core.WritableSignal<string>;
|
|
2953
3434
|
protected readonly sortField: _angular_core.WritableSignal<string | null>;
|
|
2954
3435
|
protected readonly sortOrder: _angular_core.WritableSignal<SdsSortOrder>;
|
|
@@ -2994,10 +3475,12 @@ declare class SdsTable implements OnDestroy {
|
|
|
2994
3475
|
protected readonly headerIndeterminate: _angular_core.Signal<boolean>;
|
|
2995
3476
|
protected toggleAll(): void;
|
|
2996
3477
|
protected onRowCheckboxClick(event: Event, row: any): void;
|
|
2997
|
-
/** Enter/Space on a (single
|
|
3478
|
+
/** Enter/Space on a focusable row (single selection or `rowClickable`) acts like a click on it. */
|
|
2998
3479
|
protected onRowKeydown(event: Event, row: any): void;
|
|
2999
3480
|
private toggleRowSelection;
|
|
3000
|
-
protected onRowClick(row: any): void;
|
|
3481
|
+
protected onRowClick(row: any, event?: Event): void;
|
|
3482
|
+
/** Whether a click started on an interactive element inside the row (not on the row itself). */
|
|
3483
|
+
private fromInnerControl;
|
|
3001
3484
|
protected onPageChange(state: SdsPaginatorState): void;
|
|
3002
3485
|
private emitLazy;
|
|
3003
3486
|
protected onFilterInput(event: Event): void;
|
|
@@ -3048,6 +3531,8 @@ declare class SdsTable implements OnDestroy {
|
|
|
3048
3531
|
clearDirty(rowKey?: unknown): void;
|
|
3049
3532
|
/** Display text of a cell in view mode: `format`, else the editor's formatting, else the raw value. */
|
|
3050
3533
|
protected displayCell(row: any, col: SdsTableColumn): string;
|
|
3534
|
+
/** Shared frame of the in-cell editors (text, select): height, radius, focus ring, error state. */
|
|
3535
|
+
protected editorClass(row: any, col: SdsTableColumn): string;
|
|
3051
3536
|
protected gridCellClass(row: any, col: SdsTableColumn, r: number, c: number): string;
|
|
3052
3537
|
protected onCellFocus(r: number, c: number): void;
|
|
3053
3538
|
protected onCellClick(event: MouseEvent, r: number, c: number): void;
|
|
@@ -3076,10 +3561,10 @@ declare class SdsTable implements OnDestroy {
|
|
|
3076
3561
|
protected onGridKeydown(event: KeyboardEvent): void;
|
|
3077
3562
|
protected headCellClass(col?: SdsTableColumn): string;
|
|
3078
3563
|
protected cellClass(col?: SdsTableColumn): string;
|
|
3079
|
-
protected
|
|
3564
|
+
protected bodyRowClass(row: any, index: number): string;
|
|
3080
3565
|
protected checkboxClass(checked: boolean, indeterminate: boolean): string;
|
|
3081
3566
|
static ɵfac: _angular_core.ɵɵFactoryDeclaration<SdsTable, never>;
|
|
3082
|
-
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; }; }, { "selection": "selectionChange"; "sortChange": "sortChange"; "pageChange": "pageChange"; "rowSelect": "rowSelect"; "rowUnselect": "rowUnselect"; "lazyLoad": "lazyLoad"; "rowClick": "rowClick"; "rowExpand": "rowExpand"; "rowCollapse": "rowCollapse"; "colReorder": "colReorder"; "cellCommit": "cellCommit"; }, ["cellTemplates", "rowExpansion"], never, true, never>;
|
|
3567
|
+
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; }; "rowClickable": { "alias": "rowClickable"; "required": false; "isSignal": true; }; "rowClass": { "alias": "rowClass"; "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", "emptyTpl"], never, true, never>;
|
|
3083
3568
|
}
|
|
3084
3569
|
|
|
3085
3570
|
/**
|
|
@@ -3105,8 +3590,8 @@ interface SdsTableCellContext {
|
|
|
3105
3590
|
*
|
|
3106
3591
|
* @example
|
|
3107
3592
|
* <sds-table [value]="rows" [columns]="cols">
|
|
3108
|
-
* <ng-template sdsCell="
|
|
3109
|
-
* <sds-badge [variant]="row.
|
|
3593
|
+
* <ng-template sdsCell="status" let-value let-row="row">
|
|
3594
|
+
* <sds-badge [variant]="row.active ? 'success' : 'neutral'">{{ value }}</sds-badge>
|
|
3110
3595
|
* </ng-template>
|
|
3111
3596
|
* </sds-table>
|
|
3112
3597
|
*/
|
|
@@ -3141,7 +3626,7 @@ interface SdsTableRowExpansionContext {
|
|
|
3141
3626
|
* @example
|
|
3142
3627
|
* <sds-table [value]="rows" [columns]="cols" expandable>
|
|
3143
3628
|
* <ng-template sdsRowExpansion let-row>
|
|
3144
|
-
* <div>
|
|
3629
|
+
* <div>Details of {{ row.name }}</div>
|
|
3145
3630
|
* </ng-template>
|
|
3146
3631
|
* </sds-table>
|
|
3147
3632
|
*/
|
|
@@ -3154,6 +3639,34 @@ declare class SdsTableRowExpansion {
|
|
|
3154
3639
|
static ɵdir: _angular_core.ɵɵDirectiveDeclaration<SdsTableRowExpansion, "ng-template[sdsRowExpansion]", never, {}, {}, never, never, true, never>;
|
|
3155
3640
|
}
|
|
3156
3641
|
|
|
3642
|
+
/** Context handed to a table's empty-state template. */
|
|
3643
|
+
interface SdsTableEmptyContext {
|
|
3644
|
+
/** Same as {@link filterText} — enables the implicit `let-query` binding. */
|
|
3645
|
+
$implicit: string;
|
|
3646
|
+
/** The current global-filter text ('' without a filter). */
|
|
3647
|
+
filterText: string;
|
|
3648
|
+
}
|
|
3649
|
+
/**
|
|
3650
|
+
* Replaces the table's plain `emptyMessage` with rich content — an explanation and a call to action,
|
|
3651
|
+
* a "no results for …" line. Rendered in the full-width empty row, only when not `loading`.
|
|
3652
|
+
*
|
|
3653
|
+
* @example
|
|
3654
|
+
* <sds-table [value]="categories()" [columns]="cols">
|
|
3655
|
+
* <ng-template sdsTableEmpty>
|
|
3656
|
+
* <p>No categories yet.</p>
|
|
3657
|
+
* <sds-button size="sm" (click)="create()">Add a category</sds-button>
|
|
3658
|
+
* </ng-template>
|
|
3659
|
+
* </sds-table>
|
|
3660
|
+
*/
|
|
3661
|
+
declare class SdsTableEmpty {
|
|
3662
|
+
/** The wrapped template, rendered by the host table via ngTemplateOutlet. */
|
|
3663
|
+
readonly template: TemplateRef<SdsTableEmptyContext>;
|
|
3664
|
+
/** Lets the compiler type-check `let-*` bindings against SdsTableEmptyContext. */
|
|
3665
|
+
static ngTemplateContextGuard(_dir: SdsTableEmpty, _ctx: unknown): _ctx is SdsTableEmptyContext;
|
|
3666
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<SdsTableEmpty, never>;
|
|
3667
|
+
static ɵdir: _angular_core.ɵɵDirectiveDeclaration<SdsTableEmpty, "ng-template[sdsTableEmpty]", never, {}, {}, never, never, true, never>;
|
|
3668
|
+
}
|
|
3669
|
+
|
|
3157
3670
|
type SdsToastKind = 'success' | 'error' | 'info';
|
|
3158
3671
|
interface SdsToast {
|
|
3159
3672
|
id: number;
|
|
@@ -3170,7 +3683,7 @@ interface SdsToast {
|
|
|
3170
3683
|
*
|
|
3171
3684
|
* ```ts
|
|
3172
3685
|
* private readonly toasts = inject(SdsToastService);
|
|
3173
|
-
* this.toasts.success('
|
|
3686
|
+
* this.toasts.success('Saved.');
|
|
3174
3687
|
* ```
|
|
3175
3688
|
*
|
|
3176
3689
|
* Mount the host once (e.g. in the shell): `<sds-toast-host />`.
|
|
@@ -3200,8 +3713,8 @@ declare class SdsToastService {
|
|
|
3200
3713
|
declare class SdsToastHost {
|
|
3201
3714
|
readonly toasts: SdsToastService;
|
|
3202
3715
|
/**
|
|
3203
|
-
* Accessible name for each toast's close button.
|
|
3204
|
-
*
|
|
3716
|
+
* Accessible name for each toast's close button. English default; the button is icon-only, so an app
|
|
3717
|
+
* serving more than one language MUST translate it.
|
|
3205
3718
|
*/
|
|
3206
3719
|
readonly closeLabel: _angular_core.InputSignal<string>;
|
|
3207
3720
|
protected readonly errors: _angular_core.Signal<SdsToast[]>;
|
|
@@ -3271,8 +3784,8 @@ declare class SdsThemeToggle {
|
|
|
3271
3784
|
/** `surface` for light/glass bars, `on-brand` for the dark brand bar. */
|
|
3272
3785
|
readonly appearance: _angular_core.InputSignal<SdsThemeToggleAppearance>;
|
|
3273
3786
|
/**
|
|
3274
|
-
* Accessible names for the two actions.
|
|
3275
|
-
*
|
|
3787
|
+
* Accessible names for the two actions. English defaults; a multilingual app must pass translated
|
|
3788
|
+
* values.
|
|
3276
3789
|
*/
|
|
3277
3790
|
readonly darkLabel: _angular_core.InputSignal<string>;
|
|
3278
3791
|
readonly lightLabel: _angular_core.InputSignal<string>;
|
|
@@ -3365,9 +3878,8 @@ declare class SdsTopbar {
|
|
|
3365
3878
|
/** Show the mobile hamburger that toggles the sidebar drawer (< lg). */
|
|
3366
3879
|
readonly menuButton: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
3367
3880
|
/**
|
|
3368
|
-
* Accessible name for the hamburger.
|
|
3369
|
-
*
|
|
3370
|
-
* aria-label is its only name, and a hardcoded one is simply wrong in every other locale.
|
|
3881
|
+
* Accessible name for the hamburger. English default; any app serving more than one language MUST
|
|
3882
|
+
* pass a translated value — an icon-only control's aria-label is its only name.
|
|
3371
3883
|
*/
|
|
3372
3884
|
readonly menuLabel: _angular_core.InputSignal<string>;
|
|
3373
3885
|
/**
|
|
@@ -3432,7 +3944,7 @@ declare class SdsShell {
|
|
|
3432
3944
|
* @example
|
|
3433
3945
|
* <sds-sidebar appearance="surface" decorations>
|
|
3434
3946
|
* <sds-nav-group label="Membres">
|
|
3435
|
-
* <sds-nav-item icon="user-plus" label="
|
|
3947
|
+
* <sds-nav-item icon="user-plus" label="Add a member" link="/members/new" />
|
|
3436
3948
|
* </sds-nav-group>
|
|
3437
3949
|
* <div sdsFooter>…</div>
|
|
3438
3950
|
* </sds-sidebar>
|
|
@@ -3448,8 +3960,8 @@ declare class SdsSidebar {
|
|
|
3448
3960
|
private restoreFocusTo;
|
|
3449
3961
|
constructor();
|
|
3450
3962
|
/**
|
|
3451
|
-
* Accessible names for the rail's three icon-only controls.
|
|
3452
|
-
*
|
|
3963
|
+
* Accessible names for the rail's three icon-only controls. English defaults; a multilingual app
|
|
3964
|
+
* must pass translated values.
|
|
3453
3965
|
*/
|
|
3454
3966
|
readonly collapseLabel: _angular_core.InputSignal<string>;
|
|
3455
3967
|
readonly expandLabel: _angular_core.InputSignal<string>;
|
|
@@ -3498,7 +4010,7 @@ declare class SdsNavGroup {
|
|
|
3498
4010
|
/** Turn the label into an expand/collapse control. */
|
|
3499
4011
|
readonly collapsible: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
3500
4012
|
/** Icon for a collapsible header, so it reads at the same weight as the items it sits among. */
|
|
3501
|
-
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" | "
|
|
4013
|
+
readonly icon: _angular_core.InputSignal<"filter" | "menu" | "search" | "table" | "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" | "image" | "image-off" | "utensils" | "zoom-in" | "zoom-out" | "trash-2" | "clock" | "pencil" | "circle-help" | "stock" | "allergen-cereals-gluten" | "allergen-crustaceans" | "allergen-eggs" | "allergen-fish" | "allergen-peanuts" | "allergen-soybeans" | "allergen-milk" | "allergen-nuts" | "allergen-celery" | "allergen-mustard" | "allergen-sesame" | "allergen-sulphites" | "allergen-lupin" | "allergen-molluscs" | null>;
|
|
3502
4014
|
/**
|
|
3503
4015
|
* URL prefix owned by this group, e.g. `/payments`. While the active route starts with it the
|
|
3504
4016
|
* group counts as active and opens itself — unless the person has explicitly toggled it since.
|
|
@@ -3563,7 +4075,7 @@ type SdsNavItemBadgeTone = 'brand' | 'danger' | 'neutral';
|
|
|
3563
4075
|
*/
|
|
3564
4076
|
declare class SdsNavItem {
|
|
3565
4077
|
protected readonly store: SidebarStore;
|
|
3566
|
-
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" | "
|
|
4078
|
+
readonly icon: _angular_core.InputSignal<"filter" | "menu" | "search" | "table" | "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" | "image" | "image-off" | "utensils" | "zoom-in" | "zoom-out" | "trash-2" | "clock" | "pencil" | "circle-help" | "stock" | "allergen-cereals-gluten" | "allergen-crustaceans" | "allergen-eggs" | "allergen-fish" | "allergen-peanuts" | "allergen-soybeans" | "allergen-milk" | "allergen-nuts" | "allergen-celery" | "allergen-mustard" | "allergen-sesame" | "allergen-sulphites" | "allergen-lupin" | "allergen-molluscs" | null>;
|
|
3567
4079
|
readonly label: _angular_core.InputSignal<string>;
|
|
3568
4080
|
/** Router link target; when null, the item behaves as a button. */
|
|
3569
4081
|
readonly link: _angular_core.InputSignal<string | unknown[] | null>;
|
|
@@ -3619,8 +4131,8 @@ type SdsUserMenuAlign = 'start' | 'end';
|
|
|
3619
4131
|
* @example
|
|
3620
4132
|
* <sds-user-menu name="Souhail AIT SAID" email="souhail@example.com" status="online" appearance="surface">
|
|
3621
4133
|
* <sds-menu-item icon="user" label="Profil" link="/profile" />
|
|
3622
|
-
* <sds-menu-item icon="settings" label="
|
|
3623
|
-
* <sds-menu-item icon="log-out" label="
|
|
4134
|
+
* <sds-menu-item icon="settings" label="Settings" link="/settings" />
|
|
4135
|
+
* <sds-menu-item icon="log-out" label="Sign out" tone="danger" (select)="signOut()" />
|
|
3624
4136
|
* </sds-user-menu>
|
|
3625
4137
|
*/
|
|
3626
4138
|
declare class SdsUserMenu {
|
|
@@ -3676,10 +4188,10 @@ type SdsMenuItemTone = 'default' | 'danger';
|
|
|
3676
4188
|
* @example
|
|
3677
4189
|
* <sds-menu-item icon="user" label="Profil" link="/profile" /> <!-- in-app route -->
|
|
3678
4190
|
* <sds-menu-item icon="external-link" label="Site public" href="https://…" target="_blank" />
|
|
3679
|
-
* <sds-menu-item icon="log-out" label="
|
|
4191
|
+
* <sds-menu-item icon="log-out" label="Sign out" tone="danger" (select)="signOut()" />
|
|
3680
4192
|
*/
|
|
3681
4193
|
declare class SdsMenuItem {
|
|
3682
|
-
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" | "
|
|
4194
|
+
readonly icon: _angular_core.InputSignal<"filter" | "menu" | "search" | "table" | "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" | "image" | "image-off" | "utensils" | "zoom-in" | "zoom-out" | "trash-2" | "clock" | "pencil" | "circle-help" | "stock" | "allergen-cereals-gluten" | "allergen-crustaceans" | "allergen-eggs" | "allergen-fish" | "allergen-peanuts" | "allergen-soybeans" | "allergen-milk" | "allergen-nuts" | "allergen-celery" | "allergen-mustard" | "allergen-sesame" | "allergen-sulphites" | "allergen-lupin" | "allergen-molluscs" | null>;
|
|
3683
4195
|
readonly label: _angular_core.InputSignal<string>;
|
|
3684
4196
|
/** Router link target for an in-app route; when null (default) the item is not a Router link. */
|
|
3685
4197
|
readonly link: _angular_core.InputSignal<string | unknown[] | null>;
|
|
@@ -3756,8 +4268,8 @@ declare class SdsSearchCommand {
|
|
|
3756
4268
|
/** `surface` (default) for a light / glass bar; `on-brand` for the dark brand bar. */
|
|
3757
4269
|
readonly appearance: _angular_core.InputSignal<SdsSearchAppearance>;
|
|
3758
4270
|
/**
|
|
3759
|
-
* User-facing copy.
|
|
3760
|
-
* field share `placeholder`, and `searchLabel` is the accessible name for both).
|
|
4271
|
+
* User-facing copy. English defaults; a multilingual app passes translated values (the trigger and
|
|
4272
|
+
* the field share `placeholder`, and `searchLabel` is the accessible name for both).
|
|
3761
4273
|
*/
|
|
3762
4274
|
readonly searchLabel: _angular_core.InputSignal<string>;
|
|
3763
4275
|
readonly clearLabel: _angular_core.InputSignal<string>;
|
|
@@ -3861,7 +4373,7 @@ declare class SdsLanguageSwitcher implements OnDestroy {
|
|
|
3861
4373
|
readonly direction: _angular_core.InputSignal<SdsLanguageSwitcherDirection>;
|
|
3862
4374
|
/** Accessible name for the trigger and panel. */
|
|
3863
4375
|
readonly menuLabel: _angular_core.InputSignal<string>;
|
|
3864
|
-
/** Optional visible header above the list (e.g. "
|
|
4376
|
+
/** Optional visible header above the list (e.g. "Language"). Omitted when empty. */
|
|
3865
4377
|
readonly heading: _angular_core.InputSignal<string>;
|
|
3866
4378
|
readonly openChange: _angular_core.OutputEmitterRef<boolean>;
|
|
3867
4379
|
protected readonly open: _angular_core.WritableSignal<boolean>;
|
|
@@ -3904,5 +4416,5 @@ declare class SdsLanguageSwitcher implements OnDestroy {
|
|
|
3904
4416
|
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>;
|
|
3905
4417
|
}
|
|
3906
4418
|
|
|
3907
|
-
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, 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 };
|
|
3908
|
-
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, SdsTableLazyEvent, SdsTableRowExpansionContext, SdsTableSelectOption, SdsTableSize, SdsTableSortEvent, SdsTextareaAppearance, SdsTextareaResize, SdsTextareaSize, SdsTheme, SdsThemeToggleAppearance, SdsToast, SdsToastKind, SdsToggleSwitchSize, SdsTopbarAppearance, SdsTriState, SdsTriStateChipSize, SdsUserMenuAlign, SdsUserMenuAppearance };
|
|
4419
|
+
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, SdsChip, SdsChipGroup, 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, SdsTableEmpty, SdsTableHeader, SdsTableRowExpansion, SdsTabs, SdsTabsStore, SdsTextarea, SdsThemeService, SdsThemeToggle, SdsTimeInput, SdsToastHost, SdsToastService, SdsToggleSwitch, SdsTopbar, SdsTriStateChip, SdsUserMenu, SidebarStore, addDays, addMonths, addMonthsKeepDay, formatDdMmYyyy, formatHhMm, isOutOfRange, isSameDay, isoDay, pad2, sdsFileMatchesAccept, sdsFormatBytes, sdsFormatNational, sdsMatchDialCode, sdsNormalizeSignificant, startOfDay, startOfMonth };
|
|
4420
|
+
export type { SdsAccordionActive, SdsAccordionValue, SdsAllergen, SdsAvatarShape, SdsAvatarStatus, SdsBadgeSize, SdsBadgeVariant, SdsBulkBarPosition, SdsButtonShape, SdsButtonSize, SdsButtonVariant, SdsCardVariant, SdsCheckboxSize, SdsChecklistStatus, SdsChipOption, SdsChipSize, 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, SdsTableEmptyContext, SdsTableHeaderContext, SdsTableLazyEvent, SdsTableRowExpansionContext, SdsTableSelectOption, SdsTableSize, SdsTableSortEvent, SdsTextareaAppearance, SdsTextareaResize, SdsTextareaSize, SdsTheme, SdsThemeToggleAppearance, SdsTimeInputAppearance, SdsTimeInputSize, SdsToast, SdsToastKind, SdsToggleSwitchSize, SdsTopbarAppearance, SdsTriState, SdsTriStateChipSize, SdsUserMenuAlign, SdsUserMenuAppearance };
|