@besaitech/ng-design-system 0.0.53 → 0.0.54
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +11 -0
- package/fesm2022/besaitech-ng-design-system.mjs +692 -240
- package/fesm2022/besaitech-ng-design-system.mjs.map +1 -1
- package/index.d.ts +271 -84
- package/package.json +1 -1
package/index.d.ts
CHANGED
|
@@ -137,7 +137,7 @@ type SdsIconSize = 'sm' | 'md' | 'lg' | 'xl';
|
|
|
137
137
|
declare class SdsIcon {
|
|
138
138
|
private readonly sanitizer;
|
|
139
139
|
/** 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" | "
|
|
140
|
+
readonly name: _angular_core.InputSignal<"menu" | "search" | "table" | "filter" | "image" | "chart-column" | "clipboard-list" | "credit-card" | "external-link" | "languages" | "megaphone" | "monitor" | "store" | "user-round" | "home" | "user-plus" | "user-check" | "hand" | "users" | "bike" | "building-2" | "package" | "package-plus" | "package-open" | "rotate-ccw" | "bar-chart-3" | "log-out" | "panel-left-close" | "panel-left-open" | "panel-left" | "calendar" | "chevron-right" | "chevron-left" | "chevron-down" | "chevron-up" | "plus" | "minus" | "chevrons-left" | "chevrons-right" | "x" | "check" | "alert-circle" | "info" | "copy" | "type" | "tag" | "ticket" | "square" | "square-check" | "circle-dot" | "circle-user" | "layout-grid" | "panels-top-left" | "panel-top" | "rows-3" | "book-open" | "palette" | "bell" | "phone" | "settings" | "align-left" | "toggle-left" | "arrow-up" | "arrow-down" | "chevrons-up-down" | "qr-code" | "eye" | "eye-off" | "user" | "check-circle" | "arrows-clockwise" | "file-text" | "hash" | "map-pin" | "inbox" | "arrow-right" | "refresh-cw" | "loader-circle" | "bug" | "scroll-text" | "moon" | "sun" | "search-x" | "command" | "sparkles" | "triangle-alert" | "octagon-x" | "ban" | "ellipsis" | "ellipsis-vertical" | "grip-vertical" | "upload" | "zoom-in" | "zoom-out" | "trash-2" | "clock" | "pencil" | "circle-help" | "stock" | "allergen-cereals-gluten" | "allergen-crustaceans" | "allergen-eggs" | "allergen-fish" | "allergen-peanuts" | "allergen-soybeans" | "allergen-milk" | "allergen-nuts" | "allergen-celery" | "allergen-mustard" | "allergen-sesame" | "allergen-sulphites" | "allergen-lupin" | "allergen-molluscs">;
|
|
141
141
|
/** Square size: a pixel number, a numeric string, or a keyword (sm·md·lg·xl). */
|
|
142
142
|
readonly size: _angular_core.InputSignalWithTransform<number, string | number>;
|
|
143
143
|
/** Stroke width of the line icon. */
|
|
@@ -167,7 +167,7 @@ declare class SdsButton {
|
|
|
167
167
|
* most important control.
|
|
168
168
|
*/
|
|
169
169
|
readonly shape: _angular_core.InputSignal<SdsButtonShape>;
|
|
170
|
-
readonly type: _angular_core.InputSignal<"button" | "
|
|
170
|
+
readonly type: _angular_core.InputSignal<"button" | "submit" | "reset">;
|
|
171
171
|
readonly disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
172
172
|
readonly loading: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
173
173
|
/** Full-width button. */
|
|
@@ -232,13 +232,12 @@ declare class SdsInput implements ControlValueAccessor {
|
|
|
232
232
|
/** Hard character cap on the native field; 0 means no limit. */
|
|
233
233
|
readonly maxLength: _angular_core.InputSignalWithTransform<number, unknown>;
|
|
234
234
|
/**
|
|
235
|
-
* Accessible name for the clear button.
|
|
236
|
-
*
|
|
237
|
-
* is its only name.
|
|
235
|
+
* Accessible name for the clear button. English default; an app serving more than one language MUST
|
|
236
|
+
* translate it — it is an icon-only control, so this string is its only name.
|
|
238
237
|
*/
|
|
239
238
|
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" | "
|
|
239
|
+
readonly leadingIcon: _angular_core.InputSignal<"menu" | "search" | "table" | "filter" | "image" | "chart-column" | "clipboard-list" | "credit-card" | "external-link" | "languages" | "megaphone" | "monitor" | "store" | "user-round" | "home" | "user-plus" | "user-check" | "hand" | "users" | "bike" | "building-2" | "package" | "package-plus" | "package-open" | "rotate-ccw" | "bar-chart-3" | "log-out" | "panel-left-close" | "panel-left-open" | "panel-left" | "calendar" | "chevron-right" | "chevron-left" | "chevron-down" | "chevron-up" | "plus" | "minus" | "chevrons-left" | "chevrons-right" | "x" | "check" | "alert-circle" | "info" | "copy" | "type" | "tag" | "ticket" | "square" | "square-check" | "circle-dot" | "circle-user" | "layout-grid" | "panels-top-left" | "panel-top" | "rows-3" | "book-open" | "palette" | "bell" | "phone" | "settings" | "align-left" | "toggle-left" | "arrow-up" | "arrow-down" | "chevrons-up-down" | "qr-code" | "eye" | "eye-off" | "user" | "check-circle" | "arrows-clockwise" | "file-text" | "hash" | "map-pin" | "inbox" | "arrow-right" | "refresh-cw" | "loader-circle" | "bug" | "scroll-text" | "moon" | "sun" | "search-x" | "command" | "sparkles" | "triangle-alert" | "octagon-x" | "ban" | "ellipsis" | "ellipsis-vertical" | "grip-vertical" | "upload" | "zoom-in" | "zoom-out" | "trash-2" | "clock" | "pencil" | "circle-help" | "stock" | "allergen-cereals-gluten" | "allergen-crustaceans" | "allergen-eggs" | "allergen-fish" | "allergen-peanuts" | "allergen-soybeans" | "allergen-milk" | "allergen-nuts" | "allergen-celery" | "allergen-mustard" | "allergen-sesame" | "allergen-sulphites" | "allergen-lupin" | "allergen-molluscs" | null>;
|
|
240
|
+
readonly trailingIcon: _angular_core.InputSignal<"menu" | "search" | "table" | "filter" | "image" | "chart-column" | "clipboard-list" | "credit-card" | "external-link" | "languages" | "megaphone" | "monitor" | "store" | "user-round" | "home" | "user-plus" | "user-check" | "hand" | "users" | "bike" | "building-2" | "package" | "package-plus" | "package-open" | "rotate-ccw" | "bar-chart-3" | "log-out" | "panel-left-close" | "panel-left-open" | "panel-left" | "calendar" | "chevron-right" | "chevron-left" | "chevron-down" | "chevron-up" | "plus" | "minus" | "chevrons-left" | "chevrons-right" | "x" | "check" | "alert-circle" | "info" | "copy" | "type" | "tag" | "ticket" | "square" | "square-check" | "circle-dot" | "circle-user" | "layout-grid" | "panels-top-left" | "panel-top" | "rows-3" | "book-open" | "palette" | "bell" | "phone" | "settings" | "align-left" | "toggle-left" | "arrow-up" | "arrow-down" | "chevrons-up-down" | "qr-code" | "eye" | "eye-off" | "user" | "check-circle" | "arrows-clockwise" | "file-text" | "hash" | "map-pin" | "inbox" | "arrow-right" | "refresh-cw" | "loader-circle" | "bug" | "scroll-text" | "moon" | "sun" | "search-x" | "command" | "sparkles" | "triangle-alert" | "octagon-x" | "ban" | "ellipsis" | "ellipsis-vertical" | "grip-vertical" | "upload" | "zoom-in" | "zoom-out" | "trash-2" | "clock" | "pencil" | "circle-help" | "stock" | "allergen-cereals-gluten" | "allergen-crustaceans" | "allergen-eggs" | "allergen-fish" | "allergen-peanuts" | "allergen-soybeans" | "allergen-milk" | "allergen-nuts" | "allergen-celery" | "allergen-mustard" | "allergen-sesame" | "allergen-sulphites" | "allergen-lupin" | "allergen-molluscs" | null>;
|
|
242
241
|
/**
|
|
243
242
|
* A CLICKABLE trailing icon, for the affordances that belong to the field itself — password reveal
|
|
244
243
|
* above all. Distinct from {@link trailingIcon}, which is decorative and explicitly
|
|
@@ -248,7 +247,7 @@ declare class SdsInput implements ControlValueAccessor {
|
|
|
248
247
|
* Always pair it with {@link trailingActionLabel} — an icon-only button with no accessible name is
|
|
249
248
|
* unusable by a screen reader. For a toggle, also bind {@link trailingActionPressed}.
|
|
250
249
|
*/
|
|
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" | "
|
|
250
|
+
readonly trailingAction: _angular_core.InputSignal<"menu" | "search" | "table" | "filter" | "image" | "chart-column" | "clipboard-list" | "credit-card" | "external-link" | "languages" | "megaphone" | "monitor" | "store" | "user-round" | "home" | "user-plus" | "user-check" | "hand" | "users" | "bike" | "building-2" | "package" | "package-plus" | "package-open" | "rotate-ccw" | "bar-chart-3" | "log-out" | "panel-left-close" | "panel-left-open" | "panel-left" | "calendar" | "chevron-right" | "chevron-left" | "chevron-down" | "chevron-up" | "plus" | "minus" | "chevrons-left" | "chevrons-right" | "x" | "check" | "alert-circle" | "info" | "copy" | "type" | "tag" | "ticket" | "square" | "square-check" | "circle-dot" | "circle-user" | "layout-grid" | "panels-top-left" | "panel-top" | "rows-3" | "book-open" | "palette" | "bell" | "phone" | "settings" | "align-left" | "toggle-left" | "arrow-up" | "arrow-down" | "chevrons-up-down" | "qr-code" | "eye" | "eye-off" | "user" | "check-circle" | "arrows-clockwise" | "file-text" | "hash" | "map-pin" | "inbox" | "arrow-right" | "refresh-cw" | "loader-circle" | "bug" | "scroll-text" | "moon" | "sun" | "search-x" | "command" | "sparkles" | "triangle-alert" | "octagon-x" | "ban" | "ellipsis" | "ellipsis-vertical" | "grip-vertical" | "upload" | "zoom-in" | "zoom-out" | "trash-2" | "clock" | "pencil" | "circle-help" | "stock" | "allergen-cereals-gluten" | "allergen-crustaceans" | "allergen-eggs" | "allergen-fish" | "allergen-peanuts" | "allergen-soybeans" | "allergen-milk" | "allergen-nuts" | "allergen-celery" | "allergen-mustard" | "allergen-sesame" | "allergen-sulphites" | "allergen-lupin" | "allergen-molluscs" | null>;
|
|
252
251
|
/** Accessible name for {@link trailingAction}. Translate it in the consuming app. */
|
|
253
252
|
readonly trailingActionLabel: _angular_core.InputSignal<string>;
|
|
254
253
|
/** `aria-pressed` for a toggling action (e.g. show/hide password). Null renders no attribute. */
|
|
@@ -306,6 +305,11 @@ type SdsInputNumberButtonLayout = 'stacked' | 'horizontal' | 'vertical';
|
|
|
306
305
|
* The field formats **live as you type**: the currency symbol, grouping separators and prefix/suffix
|
|
307
306
|
* stay visible on every keystroke, and the caret is kept where it belongs. The value is clamped to
|
|
308
307
|
* {@link min}/{@link max} on blur and on every spinner step; ArrowUp / ArrowDown also step it.
|
|
308
|
+
*
|
|
309
|
+
* In a locale whose decimal separator is a comma (fr-BE, nl-BE, de-DE…) a typed "." — the key most
|
|
310
|
+
* keyboards and numpads offer — is taken as the decimal separator: "12.50" becomes "12,50". Pasted
|
|
311
|
+
* text works the same way, except that a "." followed by exactly three digits in a locale that groups
|
|
312
|
+
* with "." ("1.234" in nl-BE) stays a thousands separator.
|
|
309
313
|
*/
|
|
310
314
|
declare class SdsInputNumber implements ControlValueAccessor {
|
|
311
315
|
readonly inputId: string;
|
|
@@ -316,6 +320,13 @@ declare class SdsInputNumber implements ControlValueAccessor {
|
|
|
316
320
|
readonly placeholder: _angular_core.InputSignal<string>;
|
|
317
321
|
readonly hint: _angular_core.InputSignal<string>;
|
|
318
322
|
readonly error: _angular_core.InputSignal<string>;
|
|
323
|
+
/**
|
|
324
|
+
* Mark the field invalid (danger frame + `aria-invalid`) without showing an [error] message — for a
|
|
325
|
+
* host that renders the message itself, e.g. an editable table cell.
|
|
326
|
+
*/
|
|
327
|
+
readonly invalid: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
328
|
+
/** Extra id(s) for the field's `aria-describedby`, added to its own hint/error message id. */
|
|
329
|
+
readonly ariaDescribedby: _angular_core.InputSignal<string>;
|
|
319
330
|
readonly size: _angular_core.InputSignal<SdsInputNumberSize>;
|
|
320
331
|
/** `filled` is a borderless field on a muted ground; `default` is the bordered white field. */
|
|
321
332
|
readonly appearance: _angular_core.InputSignal<SdsInputNumberAppearance>;
|
|
@@ -343,15 +354,15 @@ declare class SdsInputNumber implements ControlValueAccessor {
|
|
|
343
354
|
readonly showButtons: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
344
355
|
readonly buttonLayout: _angular_core.InputSignal<SdsInputNumberButtonLayout>;
|
|
345
356
|
/** 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" | "
|
|
357
|
+
readonly incrementIcon: _angular_core.InputSignal<"menu" | "search" | "table" | "filter" | "image" | "chart-column" | "clipboard-list" | "credit-card" | "external-link" | "languages" | "megaphone" | "monitor" | "store" | "user-round" | "home" | "user-plus" | "user-check" | "hand" | "users" | "bike" | "building-2" | "package" | "package-plus" | "package-open" | "rotate-ccw" | "bar-chart-3" | "log-out" | "panel-left-close" | "panel-left-open" | "panel-left" | "calendar" | "chevron-right" | "chevron-left" | "chevron-down" | "chevron-up" | "plus" | "minus" | "chevrons-left" | "chevrons-right" | "x" | "check" | "alert-circle" | "info" | "copy" | "type" | "tag" | "ticket" | "square" | "square-check" | "circle-dot" | "circle-user" | "layout-grid" | "panels-top-left" | "panel-top" | "rows-3" | "book-open" | "palette" | "bell" | "phone" | "settings" | "align-left" | "toggle-left" | "arrow-up" | "arrow-down" | "chevrons-up-down" | "qr-code" | "eye" | "eye-off" | "user" | "check-circle" | "arrows-clockwise" | "file-text" | "hash" | "map-pin" | "inbox" | "arrow-right" | "refresh-cw" | "loader-circle" | "bug" | "scroll-text" | "moon" | "sun" | "search-x" | "command" | "sparkles" | "triangle-alert" | "octagon-x" | "ban" | "ellipsis" | "ellipsis-vertical" | "grip-vertical" | "upload" | "zoom-in" | "zoom-out" | "trash-2" | "clock" | "pencil" | "circle-help" | "stock" | "allergen-cereals-gluten" | "allergen-crustaceans" | "allergen-eggs" | "allergen-fish" | "allergen-peanuts" | "allergen-soybeans" | "allergen-milk" | "allergen-nuts" | "allergen-celery" | "allergen-mustard" | "allergen-sesame" | "allergen-sulphites" | "allergen-lupin" | "allergen-molluscs" | null>;
|
|
347
358
|
/** 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" | "
|
|
359
|
+
readonly decrementIcon: _angular_core.InputSignal<"menu" | "search" | "table" | "filter" | "image" | "chart-column" | "clipboard-list" | "credit-card" | "external-link" | "languages" | "megaphone" | "monitor" | "store" | "user-round" | "home" | "user-plus" | "user-check" | "hand" | "users" | "bike" | "building-2" | "package" | "package-plus" | "package-open" | "rotate-ccw" | "bar-chart-3" | "log-out" | "panel-left-close" | "panel-left-open" | "panel-left" | "calendar" | "chevron-right" | "chevron-left" | "chevron-down" | "chevron-up" | "plus" | "minus" | "chevrons-left" | "chevrons-right" | "x" | "check" | "alert-circle" | "info" | "copy" | "type" | "tag" | "ticket" | "square" | "square-check" | "circle-dot" | "circle-user" | "layout-grid" | "panels-top-left" | "panel-top" | "rows-3" | "book-open" | "palette" | "bell" | "phone" | "settings" | "align-left" | "toggle-left" | "arrow-up" | "arrow-down" | "chevrons-up-down" | "qr-code" | "eye" | "eye-off" | "user" | "check-circle" | "arrows-clockwise" | "file-text" | "hash" | "map-pin" | "inbox" | "arrow-right" | "refresh-cw" | "loader-circle" | "bug" | "scroll-text" | "moon" | "sun" | "search-x" | "command" | "sparkles" | "triangle-alert" | "octagon-x" | "ban" | "ellipsis" | "ellipsis-vertical" | "grip-vertical" | "upload" | "zoom-in" | "zoom-out" | "trash-2" | "clock" | "pencil" | "circle-help" | "stock" | "allergen-cereals-gluten" | "allergen-crustaceans" | "allergen-eggs" | "allergen-fish" | "allergen-peanuts" | "allergen-soybeans" | "allergen-milk" | "allergen-nuts" | "allergen-celery" | "allergen-mustard" | "allergen-sesame" | "allergen-sulphites" | "allergen-lupin" | "allergen-molluscs" | null>;
|
|
349
360
|
/** Allow an empty (null) value. When false, blurring an empty field falls back to {@link min} or 0. */
|
|
350
361
|
readonly allowEmpty: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
351
362
|
readonly clearable: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
352
363
|
/**
|
|
353
|
-
* Accessible names for the icon-only controls.
|
|
354
|
-
*
|
|
364
|
+
* Accessible names for the icon-only controls. English defaults; translate them in a
|
|
365
|
+
* multi-language app.
|
|
355
366
|
*/
|
|
356
367
|
readonly clearLabel: _angular_core.InputSignal<string>;
|
|
357
368
|
readonly incrementLabel: _angular_core.InputSignal<string>;
|
|
@@ -362,8 +373,8 @@ declare class SdsInputNumber implements ControlValueAccessor {
|
|
|
362
373
|
protected readonly isDisabled: _angular_core.Signal<boolean>;
|
|
363
374
|
protected readonly describedBy: _angular_core.Signal<string | null>;
|
|
364
375
|
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" | "
|
|
376
|
+
protected readonly incrementIconName: _angular_core.Signal<"menu" | "search" | "table" | "filter" | "image" | "chart-column" | "clipboard-list" | "credit-card" | "external-link" | "languages" | "megaphone" | "monitor" | "store" | "user-round" | "home" | "user-plus" | "user-check" | "hand" | "users" | "bike" | "building-2" | "package" | "package-plus" | "package-open" | "rotate-ccw" | "bar-chart-3" | "log-out" | "panel-left-close" | "panel-left-open" | "panel-left" | "calendar" | "chevron-right" | "chevron-left" | "chevron-down" | "chevron-up" | "plus" | "minus" | "chevrons-left" | "chevrons-right" | "x" | "check" | "alert-circle" | "info" | "copy" | "type" | "tag" | "ticket" | "square" | "square-check" | "circle-dot" | "circle-user" | "layout-grid" | "panels-top-left" | "panel-top" | "rows-3" | "book-open" | "palette" | "bell" | "phone" | "settings" | "align-left" | "toggle-left" | "arrow-up" | "arrow-down" | "chevrons-up-down" | "qr-code" | "eye" | "eye-off" | "user" | "check-circle" | "arrows-clockwise" | "file-text" | "hash" | "map-pin" | "inbox" | "arrow-right" | "refresh-cw" | "loader-circle" | "bug" | "scroll-text" | "moon" | "sun" | "search-x" | "command" | "sparkles" | "triangle-alert" | "octagon-x" | "ban" | "ellipsis" | "ellipsis-vertical" | "grip-vertical" | "upload" | "zoom-in" | "zoom-out" | "trash-2" | "clock" | "pencil" | "circle-help" | "stock" | "allergen-cereals-gluten" | "allergen-crustaceans" | "allergen-eggs" | "allergen-fish" | "allergen-peanuts" | "allergen-soybeans" | "allergen-milk" | "allergen-nuts" | "allergen-celery" | "allergen-mustard" | "allergen-sesame" | "allergen-sulphites" | "allergen-lupin" | "allergen-molluscs">;
|
|
377
|
+
protected readonly decrementIconName: _angular_core.Signal<"menu" | "search" | "table" | "filter" | "image" | "chart-column" | "clipboard-list" | "credit-card" | "external-link" | "languages" | "megaphone" | "monitor" | "store" | "user-round" | "home" | "user-plus" | "user-check" | "hand" | "users" | "bike" | "building-2" | "package" | "package-plus" | "package-open" | "rotate-ccw" | "bar-chart-3" | "log-out" | "panel-left-close" | "panel-left-open" | "panel-left" | "calendar" | "chevron-right" | "chevron-left" | "chevron-down" | "chevron-up" | "plus" | "minus" | "chevrons-left" | "chevrons-right" | "x" | "check" | "alert-circle" | "info" | "copy" | "type" | "tag" | "ticket" | "square" | "square-check" | "circle-dot" | "circle-user" | "layout-grid" | "panels-top-left" | "panel-top" | "rows-3" | "book-open" | "palette" | "bell" | "phone" | "settings" | "align-left" | "toggle-left" | "arrow-up" | "arrow-down" | "chevrons-up-down" | "qr-code" | "eye" | "eye-off" | "user" | "check-circle" | "arrows-clockwise" | "file-text" | "hash" | "map-pin" | "inbox" | "arrow-right" | "refresh-cw" | "loader-circle" | "bug" | "scroll-text" | "moon" | "sun" | "search-x" | "command" | "sparkles" | "triangle-alert" | "octagon-x" | "ban" | "ellipsis" | "ellipsis-vertical" | "grip-vertical" | "upload" | "zoom-in" | "zoom-out" | "trash-2" | "clock" | "pencil" | "circle-help" | "stock" | "allergen-cereals-gluten" | "allergen-crustaceans" | "allergen-eggs" | "allergen-fish" | "allergen-peanuts" | "allergen-soybeans" | "allergen-milk" | "allergen-nuts" | "allergen-celery" | "allergen-mustard" | "allergen-sesame" | "allergen-sulphites" | "allergen-lupin" | "allergen-molluscs">;
|
|
367
378
|
protected readonly canIncrement: _angular_core.Signal<boolean>;
|
|
368
379
|
protected readonly canDecrement: _angular_core.Signal<boolean>;
|
|
369
380
|
/** Locale grouping/decimal separators, derived from Intl so parsing matches formatting. */
|
|
@@ -400,6 +411,17 @@ declare class SdsInputNumber implements ControlValueAccessor {
|
|
|
400
411
|
*/
|
|
401
412
|
private formatLive;
|
|
402
413
|
private toNumber;
|
|
414
|
+
/**
|
|
415
|
+
* In a locale whose decimal separator is not "." (fr-BE, nl-BE, de-DE…), turn the "." people type
|
|
416
|
+
* for a decimal point into the locale separator before parsing, so "12.50" reads as 12.5.
|
|
417
|
+
* - `typed` is the text of the keystroke: a "." just typed sits right before the caret and is
|
|
418
|
+
* always the decimal point (even in a locale that groups with ".", whose group marks come from
|
|
419
|
+
* the formatter, never from the keyboard).
|
|
420
|
+
* - Otherwise (paste, autofill, programmatic input) and only when the text holds no locale decimal
|
|
421
|
+
* separator, the last "." is the decimal point — unless the locale groups with "." and exactly
|
|
422
|
+
* three digits follow it ("1.234" in nl-BE is one thousand two hundred thirty-four).
|
|
423
|
+
*/
|
|
424
|
+
private localizeDecimalPoint;
|
|
403
425
|
/** Pull the sign / integer / fraction fragments out of a formatted, partially-typed string. */
|
|
404
426
|
private parseInput;
|
|
405
427
|
/** Characters that "carry meaning" for caret placement (digits, minus, the decimal separator). */
|
|
@@ -422,7 +444,7 @@ declare class SdsInputNumber implements ControlValueAccessor {
|
|
|
422
444
|
registerOnTouched(fn: () => void): void;
|
|
423
445
|
setDisabledState(isDisabled: boolean): void;
|
|
424
446
|
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>;
|
|
447
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<SdsInputNumber, "sds-input-number", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "hint": { "alias": "hint"; "required": false; "isSignal": true; }; "error": { "alias": "error"; "required": false; "isSignal": true; }; "invalid": { "alias": "invalid"; "required": false; "isSignal": true; }; "ariaDescribedby": { "alias": "ariaDescribedby"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "appearance": { "alias": "appearance"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "mode": { "alias": "mode"; "required": false; "isSignal": true; }; "locale": { "alias": "locale"; "required": false; "isSignal": true; }; "currency": { "alias": "currency"; "required": false; "isSignal": true; }; "currencyDisplay": { "alias": "currencyDisplay"; "required": false; "isSignal": true; }; "useGrouping": { "alias": "useGrouping"; "required": false; "isSignal": true; }; "minFractionDigits": { "alias": "minFractionDigits"; "required": false; "isSignal": true; }; "maxFractionDigits": { "alias": "maxFractionDigits"; "required": false; "isSignal": true; }; "prefix": { "alias": "prefix"; "required": false; "isSignal": true; }; "suffix": { "alias": "suffix"; "required": false; "isSignal": true; }; "min": { "alias": "min"; "required": false; "isSignal": true; }; "max": { "alias": "max"; "required": false; "isSignal": true; }; "step": { "alias": "step"; "required": false; "isSignal": true; }; "showButtons": { "alias": "showButtons"; "required": false; "isSignal": true; }; "buttonLayout": { "alias": "buttonLayout"; "required": false; "isSignal": true; }; "incrementIcon": { "alias": "incrementIcon"; "required": false; "isSignal": true; }; "decrementIcon": { "alias": "decrementIcon"; "required": false; "isSignal": true; }; "allowEmpty": { "alias": "allowEmpty"; "required": false; "isSignal": true; }; "clearable": { "alias": "clearable"; "required": false; "isSignal": true; }; "clearLabel": { "alias": "clearLabel"; "required": false; "isSignal": true; }; "incrementLabel": { "alias": "incrementLabel"; "required": false; "isSignal": true; }; "decrementLabel": { "alias": "decrementLabel"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
|
|
426
448
|
}
|
|
427
449
|
|
|
428
450
|
/** A translatable string held per language code — e.g. `{ fr: 'Titre', nl: 'Titel' }`. */
|
|
@@ -456,8 +478,8 @@ declare class SdsLocalizedInput implements ControlValueAccessor {
|
|
|
456
478
|
readonly disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
457
479
|
/**
|
|
458
480
|
* Accessible name for the in-field language switcher, and the "no translation yet" title suffix on each
|
|
459
|
-
* language button.
|
|
460
|
-
*
|
|
481
|
+
* language button. English defaults; translate them in a multi-language app (the buttons are
|
|
482
|
+
* letter-only, so the title carries their meaning).
|
|
461
483
|
*/
|
|
462
484
|
readonly languageSwitcherLabel: _angular_core.InputSignal<string>;
|
|
463
485
|
readonly untranslatedLabel: _angular_core.InputSignal<string>;
|
|
@@ -513,8 +535,8 @@ declare class SdsOtpInput implements ControlValueAccessor {
|
|
|
513
535
|
readonly autoFocus: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
514
536
|
/**
|
|
515
537
|
* Accessible name for an individual box, suffixed with its 1-based position ("Digit 1", "Digit
|
|
516
|
-
* 2", …).
|
|
517
|
-
*
|
|
538
|
+
* 2", …). English default; translate it in an app serving more than one language, since each box
|
|
539
|
+
* is an icon-less control whose only name this is.
|
|
518
540
|
*/
|
|
519
541
|
readonly cellLabel: _angular_core.InputSignal<string>;
|
|
520
542
|
/** Emitted with the full value the moment the last box is filled. */
|
|
@@ -587,6 +609,13 @@ declare class SdsTextarea implements ControlValueAccessor {
|
|
|
587
609
|
readonly maxLength: _angular_core.InputSignalWithTransform<number, unknown>;
|
|
588
610
|
/** Show a character counter row. */
|
|
589
611
|
readonly showCount: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
612
|
+
/**
|
|
613
|
+
* Spoken text of the counter when {@link maxLength} is set; tokens `{count}` and `{max}`. English
|
|
614
|
+
* default — translate it in a multi-language app.
|
|
615
|
+
*/
|
|
616
|
+
readonly countLimitLabel: _angular_core.InputSignal<string>;
|
|
617
|
+
/** Spoken text of the counter without a {@link maxLength}; token `{count}`. */
|
|
618
|
+
readonly countLabelTemplate: _angular_core.InputSignal<string>;
|
|
590
619
|
readonly resize: _angular_core.InputSignal<SdsTextareaResize>;
|
|
591
620
|
/** Current value (driven by CVA + user input). */
|
|
592
621
|
protected readonly value: _angular_core.WritableSignal<string>;
|
|
@@ -608,7 +637,7 @@ declare class SdsTextarea implements ControlValueAccessor {
|
|
|
608
637
|
protected onInput(event: Event): void;
|
|
609
638
|
private resizeToContent;
|
|
610
639
|
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>;
|
|
640
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<SdsTextarea, "sds-textarea", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "hint": { "alias": "hint"; "required": false; "isSignal": true; }; "error": { "alias": "error"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "appearance": { "alias": "appearance"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "rows": { "alias": "rows"; "required": false; "isSignal": true; }; "autoResize": { "alias": "autoResize"; "required": false; "isSignal": true; }; "maxLength": { "alias": "maxLength"; "required": false; "isSignal": true; }; "showCount": { "alias": "showCount"; "required": false; "isSignal": true; }; "countLimitLabel": { "alias": "countLimitLabel"; "required": false; "isSignal": true; }; "countLabelTemplate": { "alias": "countLabelTemplate"; "required": false; "isSignal": true; }; "resize": { "alias": "resize"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
|
|
612
641
|
}
|
|
613
642
|
|
|
614
643
|
type SdsToggleSwitchSize = 'sm' | 'md' | 'lg';
|
|
@@ -641,9 +670,9 @@ declare class SdsToggleSwitch implements ControlValueAccessor {
|
|
|
641
670
|
/** Value emitted/stored when the switch is off. */
|
|
642
671
|
readonly falseValue: _angular_core.InputSignal<unknown>;
|
|
643
672
|
/** 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" | "
|
|
673
|
+
readonly onIcon: _angular_core.InputSignal<"menu" | "search" | "table" | "filter" | "image" | "chart-column" | "clipboard-list" | "credit-card" | "external-link" | "languages" | "megaphone" | "monitor" | "store" | "user-round" | "home" | "user-plus" | "user-check" | "hand" | "users" | "bike" | "building-2" | "package" | "package-plus" | "package-open" | "rotate-ccw" | "bar-chart-3" | "log-out" | "panel-left-close" | "panel-left-open" | "panel-left" | "calendar" | "chevron-right" | "chevron-left" | "chevron-down" | "chevron-up" | "plus" | "minus" | "chevrons-left" | "chevrons-right" | "x" | "check" | "alert-circle" | "info" | "copy" | "type" | "tag" | "ticket" | "square" | "square-check" | "circle-dot" | "circle-user" | "layout-grid" | "panels-top-left" | "panel-top" | "rows-3" | "book-open" | "palette" | "bell" | "phone" | "settings" | "align-left" | "toggle-left" | "arrow-up" | "arrow-down" | "chevrons-up-down" | "qr-code" | "eye" | "eye-off" | "user" | "check-circle" | "arrows-clockwise" | "file-text" | "hash" | "map-pin" | "inbox" | "arrow-right" | "refresh-cw" | "loader-circle" | "bug" | "scroll-text" | "moon" | "sun" | "search-x" | "command" | "sparkles" | "triangle-alert" | "octagon-x" | "ban" | "ellipsis" | "ellipsis-vertical" | "grip-vertical" | "upload" | "zoom-in" | "zoom-out" | "trash-2" | "clock" | "pencil" | "circle-help" | "stock" | "allergen-cereals-gluten" | "allergen-crustaceans" | "allergen-eggs" | "allergen-fish" | "allergen-peanuts" | "allergen-soybeans" | "allergen-milk" | "allergen-nuts" | "allergen-celery" | "allergen-mustard" | "allergen-sesame" | "allergen-sulphites" | "allergen-lupin" | "allergen-molluscs" | null>;
|
|
645
674
|
/** 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" | "
|
|
675
|
+
readonly offIcon: _angular_core.InputSignal<"menu" | "search" | "table" | "filter" | "image" | "chart-column" | "clipboard-list" | "credit-card" | "external-link" | "languages" | "megaphone" | "monitor" | "store" | "user-round" | "home" | "user-plus" | "user-check" | "hand" | "users" | "bike" | "building-2" | "package" | "package-plus" | "package-open" | "rotate-ccw" | "bar-chart-3" | "log-out" | "panel-left-close" | "panel-left-open" | "panel-left" | "calendar" | "chevron-right" | "chevron-left" | "chevron-down" | "chevron-up" | "plus" | "minus" | "chevrons-left" | "chevrons-right" | "x" | "check" | "alert-circle" | "info" | "copy" | "type" | "tag" | "ticket" | "square" | "square-check" | "circle-dot" | "circle-user" | "layout-grid" | "panels-top-left" | "panel-top" | "rows-3" | "book-open" | "palette" | "bell" | "phone" | "settings" | "align-left" | "toggle-left" | "arrow-up" | "arrow-down" | "chevrons-up-down" | "qr-code" | "eye" | "eye-off" | "user" | "check-circle" | "arrows-clockwise" | "file-text" | "hash" | "map-pin" | "inbox" | "arrow-right" | "refresh-cw" | "loader-circle" | "bug" | "scroll-text" | "moon" | "sun" | "search-x" | "command" | "sparkles" | "triangle-alert" | "octagon-x" | "ban" | "ellipsis" | "ellipsis-vertical" | "grip-vertical" | "upload" | "zoom-in" | "zoom-out" | "trash-2" | "clock" | "pencil" | "circle-help" | "stock" | "allergen-cereals-gluten" | "allergen-crustaceans" | "allergen-eggs" | "allergen-fish" | "allergen-peanuts" | "allergen-soybeans" | "allergen-milk" | "allergen-nuts" | "allergen-celery" | "allergen-mustard" | "allergen-sesame" | "allergen-sulphites" | "allergen-lupin" | "allergen-molluscs" | null>;
|
|
647
676
|
readonly hint: _angular_core.InputSignal<string>;
|
|
648
677
|
readonly error: _angular_core.InputSignal<string>;
|
|
649
678
|
/**
|
|
@@ -689,8 +718,11 @@ type SdsCheckboxSize = 'sm' | 'md';
|
|
|
689
718
|
* of its own, so it can sit inside the consumer's `<label>` (a whole clickable
|
|
690
719
|
* row), whose text then names it.
|
|
691
720
|
*
|
|
721
|
+
* Set [indeterminate] for a "some but not all" state (e.g. a select-all box over a partial
|
|
722
|
+
* selection): the box shows a bar and reads as "mixed"; a click checks it.
|
|
723
|
+
*
|
|
692
724
|
* @example
|
|
693
|
-
* <sds-checkbox label="
|
|
725
|
+
* <sds-checkbox label="Auto-merge" [(ngModel)]="autoMerge" />
|
|
694
726
|
*/
|
|
695
727
|
declare class SdsCheckbox implements ControlValueAccessor {
|
|
696
728
|
readonly id: string;
|
|
@@ -699,7 +731,13 @@ declare class SdsCheckbox implements ControlValueAccessor {
|
|
|
699
731
|
readonly ariaLabel: _angular_core.InputSignal<string>;
|
|
700
732
|
readonly size: _angular_core.InputSignal<SdsCheckboxSize>;
|
|
701
733
|
readonly disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
734
|
+
/**
|
|
735
|
+
* "Some but not all": shows a bar and is announced as mixed while the value is false. Clicking
|
|
736
|
+
* checks it (the native behaviour); the host then decides the next [indeterminate].
|
|
737
|
+
*/
|
|
738
|
+
readonly indeterminate: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
702
739
|
protected readonly checked: _angular_core.WritableSignal<boolean>;
|
|
740
|
+
protected readonly mixed: _angular_core.Signal<boolean>;
|
|
703
741
|
private readonly cvaDisabled;
|
|
704
742
|
protected readonly isDisabled: _angular_core.Signal<boolean>;
|
|
705
743
|
protected readonly iconSize: _angular_core.Signal<11 | 13>;
|
|
@@ -713,7 +751,7 @@ declare class SdsCheckbox implements ControlValueAccessor {
|
|
|
713
751
|
setDisabledState(isDisabled: boolean): void;
|
|
714
752
|
protected onInput(event: Event): void;
|
|
715
753
|
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>;
|
|
754
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<SdsCheckbox, "sds-checkbox", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "indeterminate": { "alias": "indeterminate"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
|
|
717
755
|
}
|
|
718
756
|
|
|
719
757
|
type SdsRadioSize = 'sm' | 'md';
|
|
@@ -856,7 +894,7 @@ declare class SdsAllergenIcon {
|
|
|
856
894
|
readonly size: _angular_core.InputSignal<string | number>;
|
|
857
895
|
/** Stroke width of the line icon. */
|
|
858
896
|
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" | "
|
|
897
|
+
protected readonly iconName: _angular_core.Signal<"menu" | "search" | "table" | "filter" | "image" | "chart-column" | "clipboard-list" | "credit-card" | "external-link" | "languages" | "megaphone" | "monitor" | "store" | "user-round" | "home" | "user-plus" | "user-check" | "hand" | "users" | "bike" | "building-2" | "package" | "package-plus" | "package-open" | "rotate-ccw" | "bar-chart-3" | "log-out" | "panel-left-close" | "panel-left-open" | "panel-left" | "calendar" | "chevron-right" | "chevron-left" | "chevron-down" | "chevron-up" | "plus" | "minus" | "chevrons-left" | "chevrons-right" | "x" | "check" | "alert-circle" | "info" | "copy" | "type" | "tag" | "ticket" | "square" | "square-check" | "circle-dot" | "circle-user" | "layout-grid" | "panels-top-left" | "panel-top" | "rows-3" | "book-open" | "palette" | "bell" | "phone" | "settings" | "align-left" | "toggle-left" | "arrow-up" | "arrow-down" | "chevrons-up-down" | "qr-code" | "eye" | "eye-off" | "user" | "check-circle" | "arrows-clockwise" | "file-text" | "hash" | "map-pin" | "inbox" | "arrow-right" | "refresh-cw" | "loader-circle" | "bug" | "scroll-text" | "moon" | "sun" | "search-x" | "command" | "sparkles" | "triangle-alert" | "octagon-x" | "ban" | "ellipsis" | "ellipsis-vertical" | "grip-vertical" | "upload" | "zoom-in" | "zoom-out" | "trash-2" | "clock" | "pencil" | "circle-help" | "stock" | "allergen-cereals-gluten" | "allergen-crustaceans" | "allergen-eggs" | "allergen-fish" | "allergen-peanuts" | "allergen-soybeans" | "allergen-milk" | "allergen-nuts" | "allergen-celery" | "allergen-mustard" | "allergen-sesame" | "allergen-sulphites" | "allergen-lupin" | "allergen-molluscs" | null>;
|
|
860
898
|
constructor();
|
|
861
899
|
static ɵfac: _angular_core.ɵɵFactoryDeclaration<SdsAllergenIcon, never>;
|
|
862
900
|
static ɵcmp: _angular_core.ɵɵComponentDeclaration<SdsAllergenIcon, "sds-allergen-icon", never, { "allergen": { "alias": "allergen"; "required": true; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "showTitle": { "alias": "showTitle"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "strokeWidth": { "alias": "strokeWidth"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
|
|
@@ -890,7 +928,7 @@ declare class SdsTriStateChip {
|
|
|
890
928
|
/** Visible name (e.g. the allergen). Required — the chip has no other accessible name. */
|
|
891
929
|
readonly label: _angular_core.InputSignal<string>;
|
|
892
930
|
/** 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" | "
|
|
931
|
+
readonly icon: _angular_core.InputSignal<"menu" | "search" | "table" | "filter" | "image" | "chart-column" | "clipboard-list" | "credit-card" | "external-link" | "languages" | "megaphone" | "monitor" | "store" | "user-round" | "home" | "user-plus" | "user-check" | "hand" | "users" | "bike" | "building-2" | "package" | "package-plus" | "package-open" | "rotate-ccw" | "bar-chart-3" | "log-out" | "panel-left-close" | "panel-left-open" | "panel-left" | "calendar" | "chevron-right" | "chevron-left" | "chevron-down" | "chevron-up" | "plus" | "minus" | "chevrons-left" | "chevrons-right" | "x" | "check" | "alert-circle" | "info" | "copy" | "type" | "tag" | "ticket" | "square" | "square-check" | "circle-dot" | "circle-user" | "layout-grid" | "panels-top-left" | "panel-top" | "rows-3" | "book-open" | "palette" | "bell" | "phone" | "settings" | "align-left" | "toggle-left" | "arrow-up" | "arrow-down" | "chevrons-up-down" | "qr-code" | "eye" | "eye-off" | "user" | "check-circle" | "arrows-clockwise" | "file-text" | "hash" | "map-pin" | "inbox" | "arrow-right" | "refresh-cw" | "loader-circle" | "bug" | "scroll-text" | "moon" | "sun" | "search-x" | "command" | "sparkles" | "triangle-alert" | "octagon-x" | "ban" | "ellipsis" | "ellipsis-vertical" | "grip-vertical" | "upload" | "zoom-in" | "zoom-out" | "trash-2" | "clock" | "pencil" | "circle-help" | "stock" | "allergen-cereals-gluten" | "allergen-crustaceans" | "allergen-eggs" | "allergen-fish" | "allergen-peanuts" | "allergen-soybeans" | "allergen-milk" | "allergen-nuts" | "allergen-celery" | "allergen-mustard" | "allergen-sesame" | "allergen-sulphites" | "allergen-lupin" | "allergen-molluscs" | null>;
|
|
894
932
|
readonly size: _angular_core.InputSignal<SdsTriStateChipSize>;
|
|
895
933
|
readonly disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
896
934
|
/** Show the state as a small visible caption under the label. */
|
|
@@ -1104,6 +1142,9 @@ interface StateStyle {
|
|
|
1104
1142
|
* for multi-select ("select all matches"): it then carries `aria-pressed` and a corner check. [busy]
|
|
1105
1143
|
* shows a spinner and sets `aria-busy` while a save is in flight.
|
|
1106
1144
|
*
|
|
1145
|
+
* A photo that fails to load (404, blocked, not an image) falls back to the no-photo layout — never
|
|
1146
|
+
* a broken-image icon — and `(imageError)` reports the URL. A new [image] URL is tried again.
|
|
1147
|
+
*
|
|
1107
1148
|
* @example
|
|
1108
1149
|
* <sds-status-tile title="Bacon" subtitle="Extras" state="sold-out" note="Back at 22:00"
|
|
1109
1150
|
* soldOutLabel="Sold out" (activate)="toggle(item)" />
|
|
@@ -1128,13 +1169,19 @@ declare class SdsStatusTile {
|
|
|
1128
1169
|
readonly hiddenLabel: _angular_core.InputSignal<string>;
|
|
1129
1170
|
/** The tile was pressed (click, tap, Enter or Space). */
|
|
1130
1171
|
readonly activate: _angular_core.OutputEmitterRef<void>;
|
|
1172
|
+
/** The [image] URL failed to load; the tile has fallen back to its no-photo layout. */
|
|
1173
|
+
readonly imageError: _angular_core.OutputEmitterRef<string>;
|
|
1174
|
+
/** The URL that last failed to load — hidden until [image] changes to another URL. */
|
|
1175
|
+
private readonly failedImage;
|
|
1176
|
+
protected readonly showImage: _angular_core.Signal<boolean>;
|
|
1177
|
+
protected onImageError(): void;
|
|
1131
1178
|
protected readonly style: _angular_core.Signal<StateStyle>;
|
|
1132
1179
|
protected readonly stateText: _angular_core.Signal<string>;
|
|
1133
1180
|
/** Diagonal hatch on sold-out tiles — a pattern cue on top of the colour. */
|
|
1134
1181
|
protected readonly hatch: _angular_core.Signal<"repeating-linear-gradient(135deg, transparent 0 12px, color-mix(in srgb, var(--color-danger) 10%, transparent) 12px 24px)" | null>;
|
|
1135
1182
|
protected readonly tileClass: _angular_core.Signal<string>;
|
|
1136
1183
|
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>;
|
|
1184
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<SdsStatusTile, "sds-status-tile", never, { "title": { "alias": "title"; "required": true; "isSignal": true; }; "subtitle": { "alias": "subtitle"; "required": false; "isSignal": true; }; "image": { "alias": "image"; "required": false; "isSignal": true; }; "imageAlt": { "alias": "imageAlt"; "required": false; "isSignal": true; }; "state": { "alias": "state"; "required": false; "isSignal": true; }; "note": { "alias": "note"; "required": false; "isSignal": true; }; "selected": { "alias": "selected"; "required": false; "isSignal": true; }; "busy": { "alias": "busy"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "availableLabel": { "alias": "availableLabel"; "required": false; "isSignal": true; }; "soldOutLabel": { "alias": "soldOutLabel"; "required": false; "isSignal": true; }; "hiddenLabel": { "alias": "hiddenLabel"; "required": false; "isSignal": true; }; }, { "activate": "activate"; "imageError": "imageError"; }, never, never, true, never>;
|
|
1138
1185
|
}
|
|
1139
1186
|
|
|
1140
1187
|
/** An actionable row. */
|
|
@@ -1206,7 +1253,7 @@ declare class SdsMenu implements OnDestroy {
|
|
|
1206
1253
|
/** Accessible name of the built-in icon trigger (required when there is no [triggerText]). */
|
|
1207
1254
|
readonly triggerLabel: _angular_core.InputSignal<string>;
|
|
1208
1255
|
/** 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" | "
|
|
1256
|
+
readonly triggerIcon: _angular_core.InputSignal<"menu" | "search" | "table" | "filter" | "image" | "chart-column" | "clipboard-list" | "credit-card" | "external-link" | "languages" | "megaphone" | "monitor" | "store" | "user-round" | "home" | "user-plus" | "user-check" | "hand" | "users" | "bike" | "building-2" | "package" | "package-plus" | "package-open" | "rotate-ccw" | "bar-chart-3" | "log-out" | "panel-left-close" | "panel-left-open" | "panel-left" | "calendar" | "chevron-right" | "chevron-left" | "chevron-down" | "chevron-up" | "plus" | "minus" | "chevrons-left" | "chevrons-right" | "x" | "check" | "alert-circle" | "info" | "copy" | "type" | "tag" | "ticket" | "square" | "square-check" | "circle-dot" | "circle-user" | "layout-grid" | "panels-top-left" | "panel-top" | "rows-3" | "book-open" | "palette" | "bell" | "phone" | "settings" | "align-left" | "toggle-left" | "arrow-up" | "arrow-down" | "chevrons-up-down" | "qr-code" | "eye" | "eye-off" | "user" | "check-circle" | "arrows-clockwise" | "file-text" | "hash" | "map-pin" | "inbox" | "arrow-right" | "refresh-cw" | "loader-circle" | "bug" | "scroll-text" | "moon" | "sun" | "search-x" | "command" | "sparkles" | "triangle-alert" | "octagon-x" | "ban" | "ellipsis" | "ellipsis-vertical" | "grip-vertical" | "upload" | "zoom-in" | "zoom-out" | "trash-2" | "clock" | "pencil" | "circle-help" | "stock" | "allergen-cereals-gluten" | "allergen-crustaceans" | "allergen-eggs" | "allergen-fish" | "allergen-peanuts" | "allergen-soybeans" | "allergen-milk" | "allergen-nuts" | "allergen-celery" | "allergen-mustard" | "allergen-sesame" | "allergen-sulphites" | "allergen-lupin" | "allergen-molluscs">;
|
|
1210
1257
|
/** Optional visible text on the built-in trigger (then it is its name). */
|
|
1211
1258
|
readonly triggerText: _angular_core.InputSignal<string>;
|
|
1212
1259
|
/** Accessible name of the menu itself; defaults to the trigger's name. */
|
|
@@ -1339,6 +1386,10 @@ type DragMode = 'keyboard' | 'pointer';
|
|
|
1339
1386
|
* - **Keyboard**: focus a handle, **Space/Enter** picks the item up, **↑/↓** (and Home/End) move it,
|
|
1340
1387
|
* **Space/Enter** drops it, **Escape** cancels (the event is stopped, so an enclosing drawer stays open).
|
|
1341
1388
|
* Moving focus away also cancels.
|
|
1389
|
+
* - **Long lists**: while a pointer drag nears the top or bottom edge of the nearest scrollable
|
|
1390
|
+
* ancestor (a drawer body, a panel) — or of the window — that container scrolls, faster closer to
|
|
1391
|
+
* the edge, and the dragged row stays under the pointer. A keyboard move scrolls just enough to keep
|
|
1392
|
+
* the moving row in view. Turn off with `[autoScroll]="false"`.
|
|
1342
1393
|
* - **Screen readers**: every handle is named ("Reorder Burgers") and described by the instructions; an
|
|
1343
1394
|
* assertive live region announces pick-up, each move ("moved to position 3 of 8"), the drop and a cancel.
|
|
1344
1395
|
*
|
|
@@ -1375,6 +1426,13 @@ declare class SdsSortableList<T = any> {
|
|
|
1375
1426
|
readonly appearance: _angular_core.InputSignal<SdsSortableAppearance>;
|
|
1376
1427
|
/** Accessible name of the list. */
|
|
1377
1428
|
readonly ariaLabel: _angular_core.InputSignal<string>;
|
|
1429
|
+
/**
|
|
1430
|
+
* Scroll the nearest scrollable ancestor (then the window) while dragging near its top or bottom
|
|
1431
|
+
* edge, and keep a keyboard-moved row in view.
|
|
1432
|
+
*/
|
|
1433
|
+
readonly autoScroll: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
1434
|
+
/** Height (px) of the band along each scroll edge where a pointer drag starts auto-scrolling. */
|
|
1435
|
+
readonly autoScrollEdge: _angular_core.InputSignalWithTransform<number, unknown>;
|
|
1378
1436
|
/** Name of each handle; `{item}` is the item's label. */
|
|
1379
1437
|
readonly handleLabel: _angular_core.InputSignal<string>;
|
|
1380
1438
|
/** Read after a handle's name (aria-describedby). */
|
|
@@ -1404,6 +1462,14 @@ declare class SdsSortableList<T = any> {
|
|
|
1404
1462
|
private gap;
|
|
1405
1463
|
private pointerId;
|
|
1406
1464
|
private startY;
|
|
1465
|
+
/** Latest pointer position during a pointer drag (auto-scroll re-reads it every frame). */
|
|
1466
|
+
private lastY;
|
|
1467
|
+
/** The host's viewport top at drag start: the drift since then is how far its scrollers moved. */
|
|
1468
|
+
private startHostTop;
|
|
1469
|
+
/** Nearest scrollable ancestor, found at drag start. */
|
|
1470
|
+
private scroller;
|
|
1471
|
+
private frame;
|
|
1472
|
+
constructor();
|
|
1407
1473
|
/** Per-row offsets that open a gap where the moving row will land. */
|
|
1408
1474
|
private readonly shifts;
|
|
1409
1475
|
/** Offset of the moving row: follows the pointer, or jumps slot to slot with the keyboard. */
|
|
@@ -1422,6 +1488,25 @@ declare class SdsSortableList<T = any> {
|
|
|
1422
1488
|
protected onFocusOut(event: FocusEvent): void;
|
|
1423
1489
|
protected onPointerDown(event: PointerEvent, i: number): void;
|
|
1424
1490
|
protected onPointerMove(event: PointerEvent): void;
|
|
1491
|
+
/**
|
|
1492
|
+
* Place the dragged row under the pointer and pick its landing slot. Positions are compared in
|
|
1493
|
+
* drag-start coordinates: the pointer's travel plus however far the list has scrolled since.
|
|
1494
|
+
*/
|
|
1495
|
+
private track;
|
|
1496
|
+
/** How far (px) the list has moved up the viewport since the drag began — any ancestor or the window. */
|
|
1497
|
+
private scrolledBy;
|
|
1498
|
+
private startAutoScroll;
|
|
1499
|
+
private stopAutoScroll;
|
|
1500
|
+
/**
|
|
1501
|
+
* One auto-scroll step for a pointer at `y`: the scroll container first, then the window. A side
|
|
1502
|
+
* only scrolls while part of the list is still hidden past that edge.
|
|
1503
|
+
*/
|
|
1504
|
+
private scrollNearEdge;
|
|
1505
|
+
/**
|
|
1506
|
+
* Keyboard move: scroll just enough (container, then window) to keep the moving row in view. Its
|
|
1507
|
+
* resting box comes from drag-start geometry, since its transform may still be animating.
|
|
1508
|
+
*/
|
|
1509
|
+
private revealActive;
|
|
1425
1510
|
protected onPointerUp(event: PointerEvent): void;
|
|
1426
1511
|
protected onPointerCancel(): void;
|
|
1427
1512
|
private begin;
|
|
@@ -1433,7 +1518,7 @@ declare class SdsSortableList<T = any> {
|
|
|
1433
1518
|
private focusHandle;
|
|
1434
1519
|
private announce;
|
|
1435
1520
|
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>;
|
|
1521
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<SdsSortableList<any>, "sds-sortable-list", never, { "items": { "alias": "items"; "required": false; "isSignal": true; }; "dataKey": { "alias": "dataKey"; "required": false; "isSignal": true; }; "labelField": { "alias": "labelField"; "required": false; "isSignal": true; }; "itemLabel": { "alias": "itemLabel"; "required": false; "isSignal": true; }; "itemDisabled": { "alias": "itemDisabled"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "appearance": { "alias": "appearance"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "autoScroll": { "alias": "autoScroll"; "required": false; "isSignal": true; }; "autoScrollEdge": { "alias": "autoScrollEdge"; "required": false; "isSignal": true; }; "handleLabel": { "alias": "handleLabel"; "required": false; "isSignal": true; }; "instructions": { "alias": "instructions"; "required": false; "isSignal": true; }; "pickedUpMessage": { "alias": "pickedUpMessage"; "required": false; "isSignal": true; }; "movedMessage": { "alias": "movedMessage"; "required": false; "isSignal": true; }; "droppedMessage": { "alias": "droppedMessage"; "required": false; "isSignal": true; }; "cancelledMessage": { "alias": "cancelledMessage"; "required": false; "isSignal": true; }; }, { "items": "itemsChange"; "reorder": "reorder"; }, ["itemTpl", "handleTpl"], never, true, never>;
|
|
1437
1522
|
}
|
|
1438
1523
|
|
|
1439
1524
|
/** Why a file was turned away. */
|
|
@@ -1475,7 +1560,7 @@ declare class SdsFileDrop {
|
|
|
1475
1560
|
readonly maxFiles: _angular_core.InputSignal<number | null>;
|
|
1476
1561
|
readonly disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
1477
1562
|
/** Icon in the zone at rest. */
|
|
1478
|
-
readonly icon: _angular_core.InputSignal<"
|
|
1563
|
+
readonly icon: _angular_core.InputSignal<"image" | "file-text" | "upload">;
|
|
1479
1564
|
readonly label: _angular_core.InputSignal<string>;
|
|
1480
1565
|
/** Shown while files are dragged over the zone. */
|
|
1481
1566
|
readonly dropLabel: _angular_core.InputSignal<string>;
|
|
@@ -1672,6 +1757,7 @@ declare class SdsCalendar {
|
|
|
1672
1757
|
readonly max: _angular_core.InputSignal<Date | null>;
|
|
1673
1758
|
/** 0 = Sunday, 1 = Monday (default, European). */
|
|
1674
1759
|
readonly firstDayOfWeek: _angular_core.InputSignal<0 | 1>;
|
|
1760
|
+
/** BCP 47 locale for month and weekday names. Defaults to `en-GB`; pass the app's locale. */
|
|
1675
1761
|
readonly locale: _angular_core.InputSignal<string>;
|
|
1676
1762
|
readonly showActions: _angular_core.InputSignal<boolean>;
|
|
1677
1763
|
/** When true, a time editor (HH:mm, 24h) is shown and the value keeps its time-of-day. */
|
|
@@ -1687,14 +1773,13 @@ declare class SdsCalendar {
|
|
|
1687
1773
|
/** Visible text of the "done" action (shown when {@link showDone} is true). */
|
|
1688
1774
|
readonly doneLabel: _angular_core.InputSignal<string>;
|
|
1689
1775
|
/**
|
|
1690
|
-
* Accessible name for the calendar container.
|
|
1691
|
-
*
|
|
1776
|
+
* Accessible name for the calendar container. English default; an app serving more than one
|
|
1777
|
+
* language MUST translate it.
|
|
1692
1778
|
*/
|
|
1693
1779
|
readonly calendarLabel: _angular_core.InputSignal<string>;
|
|
1694
1780
|
/**
|
|
1695
1781
|
* Accessible name for the "previous" nav button. It is icon-only, so this string is its ONLY
|
|
1696
|
-
* accessible name
|
|
1697
|
-
* the consuming app.
|
|
1782
|
+
* accessible name. English default; translate it in the consuming app.
|
|
1698
1783
|
*/
|
|
1699
1784
|
readonly previousLabel: _angular_core.InputSignal<string>;
|
|
1700
1785
|
/** Accessible name for the icon-only "next" nav button. See {@link previousLabel}. */
|
|
@@ -1706,7 +1791,7 @@ declare class SdsCalendar {
|
|
|
1706
1791
|
readonly todayActionLabel: _angular_core.InputSignal<string>;
|
|
1707
1792
|
/** Visible text of the "clear" action. See {@link todayActionLabel}. */
|
|
1708
1793
|
readonly clearActionLabel: _angular_core.InputSignal<string>;
|
|
1709
|
-
/** Emitted when a concrete date is picked (day click or "
|
|
1794
|
+
/** Emitted when a concrete date is picked (day click or "Today"). */
|
|
1710
1795
|
readonly dateSelect: _angular_core.OutputEmitterRef<Date>;
|
|
1711
1796
|
/** Emitted when the "done" action is used (see {@link showDone}). */
|
|
1712
1797
|
readonly done: _angular_core.OutputEmitterRef<void>;
|
|
@@ -1777,7 +1862,7 @@ type SdsDatePickerSize = 'sm' | 'md' | 'lg';
|
|
|
1777
1862
|
* [(ngModel)]; the value is a `Date | null`.
|
|
1778
1863
|
*
|
|
1779
1864
|
* @example
|
|
1780
|
-
* <sds-date-picker label="
|
|
1865
|
+
* <sds-date-picker label="Delivery date" [(ngModel)]="date" />
|
|
1781
1866
|
*/
|
|
1782
1867
|
declare class SdsDatePicker implements ControlValueAccessor, OnDestroy {
|
|
1783
1868
|
private readonly host;
|
|
@@ -1792,6 +1877,10 @@ declare class SdsDatePicker implements ControlValueAccessor, OnDestroy {
|
|
|
1792
1877
|
readonly min: _angular_core.InputSignal<Date | null>;
|
|
1793
1878
|
readonly max: _angular_core.InputSignal<Date | null>;
|
|
1794
1879
|
readonly firstDayOfWeek: _angular_core.InputSignal<0 | 1>;
|
|
1880
|
+
/**
|
|
1881
|
+
* BCP 47 locale for the calendar's month and weekday names. Defaults to `en-GB` (English names, and
|
|
1882
|
+
* the same day-first order as the default dd/MM/yyyy display); pass the app's locale.
|
|
1883
|
+
*/
|
|
1795
1884
|
readonly locale: _angular_core.InputSignal<string>;
|
|
1796
1885
|
readonly inline: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
1797
1886
|
readonly clearable: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
@@ -1814,9 +1903,8 @@ declare class SdsDatePicker implements ControlValueAccessor, OnDestroy {
|
|
|
1814
1903
|
/** Visible text of the calendar's "done" action, shown in the overlay when {@link showTime}. */
|
|
1815
1904
|
readonly doneLabel: _angular_core.InputSignal<string>;
|
|
1816
1905
|
/**
|
|
1817
|
-
* Accessible name for the clear button.
|
|
1818
|
-
*
|
|
1819
|
-
* is its only name.
|
|
1906
|
+
* Accessible name for the clear button. English default; an app serving more than one language MUST
|
|
1907
|
+
* translate it — it is an icon-only control, so this string is its only name.
|
|
1820
1908
|
*/
|
|
1821
1909
|
readonly clearLabel: _angular_core.InputSignal<string>;
|
|
1822
1910
|
/**
|
|
@@ -2013,7 +2101,7 @@ interface NormOption$1 {
|
|
|
2013
2101
|
*
|
|
2014
2102
|
* @example
|
|
2015
2103
|
* <sds-select [options]="services" optionLabel="name" optionValue="id"
|
|
2016
|
-
* placeholder="
|
|
2104
|
+
* placeholder="Choose a service" [(ngModel)]="serviceId" filter clearable />
|
|
2017
2105
|
*
|
|
2018
2106
|
* @example
|
|
2019
2107
|
* <sds-select [options]="categories" optionLabel="name" optionValue="id" [(ngModel)]="categoryId">
|
|
@@ -2045,6 +2133,13 @@ declare class SdsSelect implements ControlValueAccessor, OnDestroy {
|
|
|
2045
2133
|
readonly filter: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
2046
2134
|
readonly filterPlaceholder: _angular_core.InputSignal<string>;
|
|
2047
2135
|
readonly emptyMessage: _angular_core.InputSignal<string>;
|
|
2136
|
+
/**
|
|
2137
|
+
* Accessible name of the icon-only clear button (see {@link clearable}). English default; an app
|
|
2138
|
+
* serving more than one language passes a translated value — it is the button's only name.
|
|
2139
|
+
*/
|
|
2140
|
+
readonly clearLabel: _angular_core.InputSignal<string>;
|
|
2141
|
+
/** Accessible name of the filter field inside the panel (see {@link filter}). */
|
|
2142
|
+
readonly filterLabel: _angular_core.InputSignal<string>;
|
|
2048
2143
|
/** Optional projected `<ng-template sdsSelectOption>` — custom option + selected-value rendering. */
|
|
2049
2144
|
protected readonly optionTpl: _angular_core.Signal<SdsSelectOption | undefined>;
|
|
2050
2145
|
/** Optional projected `<ng-template sdsSelectEmpty>` — custom no-results content. */
|
|
@@ -2116,7 +2211,7 @@ declare class SdsSelect implements ControlValueAccessor, OnDestroy {
|
|
|
2116
2211
|
registerOnTouched(fn: () => void): void;
|
|
2117
2212
|
setDisabledState(isDisabled: boolean): void;
|
|
2118
2213
|
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>;
|
|
2214
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<SdsSelect, "sds-select", never, { "options": { "alias": "options"; "required": false; "isSignal": true; }; "optionLabel": { "alias": "optionLabel"; "required": false; "isSignal": true; }; "optionValue": { "alias": "optionValue"; "required": false; "isSignal": true; }; "optionDisabled": { "alias": "optionDisabled"; "required": false; "isSignal": true; }; "dataKey": { "alias": "dataKey"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "hint": { "alias": "hint"; "required": false; "isSignal": true; }; "error": { "alias": "error"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "appearance": { "alias": "appearance"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "clearable": { "alias": "clearable"; "required": false; "isSignal": true; }; "filter": { "alias": "filter"; "required": false; "isSignal": true; }; "filterPlaceholder": { "alias": "filterPlaceholder"; "required": false; "isSignal": true; }; "emptyMessage": { "alias": "emptyMessage"; "required": false; "isSignal": true; }; "clearLabel": { "alias": "clearLabel"; "required": false; "isSignal": true; }; "filterLabel": { "alias": "filterLabel"; "required": false; "isSignal": true; }; }, {}, ["optionTpl", "emptyTpl", "footerTpl"], never, true, never>;
|
|
2120
2215
|
}
|
|
2121
2216
|
|
|
2122
2217
|
type SdsMultiSelectSize = 'sm' | 'md' | 'lg';
|
|
@@ -2183,6 +2278,17 @@ declare class SdsMultiSelect implements ControlValueAccessor, OnDestroy {
|
|
|
2183
2278
|
readonly filter: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
2184
2279
|
readonly filterPlaceholder: _angular_core.InputSignal<string>;
|
|
2185
2280
|
readonly emptyMessage: _angular_core.InputSignal<string>;
|
|
2281
|
+
/**
|
|
2282
|
+
* Accessible name of a chip's icon-only remove button (`display="chip"`); `{label}` is the option's
|
|
2283
|
+
* label. English defaults throughout — an app serving more than one language passes translations.
|
|
2284
|
+
*/
|
|
2285
|
+
readonly removeLabel: _angular_core.InputSignal<string>;
|
|
2286
|
+
/** Accessible name of the icon-only clear-all button (see {@link clearable}). */
|
|
2287
|
+
readonly clearLabel: _angular_core.InputSignal<string>;
|
|
2288
|
+
/** Accessible name of the filter field inside the panel (see {@link filter}). */
|
|
2289
|
+
readonly filterLabel: _angular_core.InputSignal<string>;
|
|
2290
|
+
/** Visible text of the "select all" row (see {@link showToggleAll}). */
|
|
2291
|
+
readonly selectAllLabel: _angular_core.InputSignal<string>;
|
|
2186
2292
|
/** Optional projected `<ng-template sdsSelectOption>` — custom option-row rendering. */
|
|
2187
2293
|
protected readonly optionTpl: _angular_core.Signal<SdsSelectOption | undefined>;
|
|
2188
2294
|
/** Optional projected `<ng-template sdsSelectEmpty>` — custom no-results content. */
|
|
@@ -2260,7 +2366,7 @@ declare class SdsMultiSelect implements ControlValueAccessor, OnDestroy {
|
|
|
2260
2366
|
registerOnTouched(fn: () => void): void;
|
|
2261
2367
|
setDisabledState(isDisabled: boolean): void;
|
|
2262
2368
|
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>;
|
|
2369
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<SdsMultiSelect, "sds-multi-select", never, { "options": { "alias": "options"; "required": false; "isSignal": true; }; "optionLabel": { "alias": "optionLabel"; "required": false; "isSignal": true; }; "optionValue": { "alias": "optionValue"; "required": false; "isSignal": true; }; "optionDisabled": { "alias": "optionDisabled"; "required": false; "isSignal": true; }; "dataKey": { "alias": "dataKey"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "hint": { "alias": "hint"; "required": false; "isSignal": true; }; "error": { "alias": "error"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "display": { "alias": "display"; "required": false; "isSignal": true; }; "maxSelectedLabels": { "alias": "maxSelectedLabels"; "required": false; "isSignal": true; }; "selectedItemsLabel": { "alias": "selectedItemsLabel"; "required": false; "isSignal": true; }; "showToggleAll": { "alias": "showToggleAll"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "clearable": { "alias": "clearable"; "required": false; "isSignal": true; }; "filter": { "alias": "filter"; "required": false; "isSignal": true; }; "filterPlaceholder": { "alias": "filterPlaceholder"; "required": false; "isSignal": true; }; "emptyMessage": { "alias": "emptyMessage"; "required": false; "isSignal": true; }; "removeLabel": { "alias": "removeLabel"; "required": false; "isSignal": true; }; "clearLabel": { "alias": "clearLabel"; "required": false; "isSignal": true; }; "filterLabel": { "alias": "filterLabel"; "required": false; "isSignal": true; }; "selectAllLabel": { "alias": "selectAllLabel"; "required": false; "isSignal": true; }; }, {}, ["optionTpl", "emptyTpl", "footerTpl"], never, true, never>;
|
|
2264
2370
|
}
|
|
2265
2371
|
|
|
2266
2372
|
/**
|
|
@@ -2274,7 +2380,10 @@ declare class SdsMultiSelect implements ControlValueAccessor, OnDestroy {
|
|
|
2274
2380
|
interface SdsPhoneCountry {
|
|
2275
2381
|
/** ISO 3166-1 alpha-2 code, e.g. 'BE'. */
|
|
2276
2382
|
iso2: string;
|
|
2277
|
-
/**
|
|
2383
|
+
/**
|
|
2384
|
+
* English display name (the fallback). `<sds-phone-input [locale]>` shows the name in that locale
|
|
2385
|
+
* via `Intl.DisplayNames` instead.
|
|
2386
|
+
*/
|
|
2278
2387
|
name: string;
|
|
2279
2388
|
/** International dial code without '+', e.g. '32'. */
|
|
2280
2389
|
dialCode: string;
|
|
@@ -2317,7 +2426,7 @@ interface SdsPhoneValue {
|
|
|
2317
2426
|
* '+32470123456') and Validator (national length is checked per country).
|
|
2318
2427
|
*
|
|
2319
2428
|
* @example
|
|
2320
|
-
* <sds-phone-input label="
|
|
2429
|
+
* <sds-phone-input label="Phone" defaultCountry="BE"
|
|
2321
2430
|
* [preferredCountries]="['BE','FR','LU']"
|
|
2322
2431
|
* [(ngModel)]="phone" required />
|
|
2323
2432
|
*/
|
|
@@ -2342,19 +2451,22 @@ declare class SdsPhoneInput implements ControlValueAccessor, Validator, OnDestro
|
|
|
2342
2451
|
readonly onlyCountries: _angular_core.InputSignal<string[]>;
|
|
2343
2452
|
/** Show an example number as a hint when no [hint] is provided. */
|
|
2344
2453
|
readonly showExampleHint: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
2454
|
+
/**
|
|
2455
|
+
* BCP 47 locale for the country names (list, search and the selector's accessible name), resolved
|
|
2456
|
+
* with `Intl.DisplayNames` — e.g. `nl-BE` shows "België". Empty (default) uses the built-in English
|
|
2457
|
+
* names. The search also matches the English name.
|
|
2458
|
+
*/
|
|
2459
|
+
readonly locale: _angular_core.InputSignal<string>;
|
|
2345
2460
|
readonly requiredMessage: _angular_core.InputSignal<string>;
|
|
2346
2461
|
/**
|
|
2347
2462
|
* 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.
|
|
2463
|
+
* name (localised by {@link locale}). A token rather than a prefix because word order differs per
|
|
2464
|
+
* language. English default; translate it in any app serving more than one language.
|
|
2353
2465
|
*/
|
|
2354
2466
|
readonly countryLabel: _angular_core.InputSignal<string>;
|
|
2355
2467
|
/**
|
|
2356
2468
|
* Accessible name for the clear button. It is icon-only, so this string is its ONLY accessible
|
|
2357
|
-
* name —
|
|
2469
|
+
* name — translate it in any app serving more than one language.
|
|
2358
2470
|
*/
|
|
2359
2471
|
readonly clearLabel: _angular_core.InputSignal<string>;
|
|
2360
2472
|
/** Accessible name for the country-search field inside the dropdown. */
|
|
@@ -2365,12 +2477,12 @@ declare class SdsPhoneInput implements ControlValueAccessor, Validator, OnDestro
|
|
|
2365
2477
|
readonly noResultsLabel: _angular_core.InputSignal<string>;
|
|
2366
2478
|
/**
|
|
2367
2479
|
* Built-in validation messages. `{lengths}` is replaced with the country's accepted national
|
|
2368
|
-
* lengths, joined with {@link lengthSeparator}.
|
|
2369
|
-
*
|
|
2480
|
+
* lengths, joined with {@link lengthSeparator}. English defaults; translate them alongside
|
|
2481
|
+
* {@link requiredMessage}.
|
|
2370
2482
|
*/
|
|
2371
2483
|
readonly incompleteMessage: _angular_core.InputSignal<string>;
|
|
2372
2484
|
readonly invalidMessage: _angular_core.InputSignal<string>;
|
|
2373
|
-
/** Joins the accepted lengths when a country allows more than one (e.g. "8
|
|
2485
|
+
/** Joins the accepted lengths when a country allows more than one (e.g. "8 or 9"). */
|
|
2374
2486
|
readonly lengthSeparator: _angular_core.InputSignal<string>;
|
|
2375
2487
|
/**
|
|
2376
2488
|
* Auto-generated example hint (see {@link showExampleHint}). `{number}` is replaced with the
|
|
@@ -2379,6 +2491,10 @@ declare class SdsPhoneInput implements ControlValueAccessor, Validator, OnDestro
|
|
|
2379
2491
|
readonly exampleHintTemplate: _angular_core.InputSignal<string>;
|
|
2380
2492
|
/** Emitted with the parsed parts whenever the number or country changes. */
|
|
2381
2493
|
readonly phoneChange: _angular_core.OutputEmitterRef<SdsPhoneValue>;
|
|
2494
|
+
/** `Intl.DisplayNames` for {@link locale}, or null (built-in English names). */
|
|
2495
|
+
private readonly regionNames;
|
|
2496
|
+
/** The country's display name in {@link locale}, falling back to the built-in English name. */
|
|
2497
|
+
protected countryName(c: SdsPhoneCountry): string;
|
|
2382
2498
|
protected readonly national: _angular_core.WritableSignal<string>;
|
|
2383
2499
|
protected readonly countryIso: _angular_core.WritableSignal<string>;
|
|
2384
2500
|
protected readonly open: _angular_core.WritableSignal<boolean>;
|
|
@@ -2438,7 +2554,7 @@ declare class SdsPhoneInput implements ControlValueAccessor, Validator, OnDestro
|
|
|
2438
2554
|
validate(_control: AbstractControl): ValidationErrors | null;
|
|
2439
2555
|
registerOnValidatorChange(fn: () => void): void;
|
|
2440
2556
|
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>;
|
|
2557
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<SdsPhoneInput, "sds-phone-input", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; "hint": { "alias": "hint"; "required": false; "isSignal": true; }; "error": { "alias": "error"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "clearable": { "alias": "clearable"; "required": false; "isSignal": true; }; "defaultCountry": { "alias": "defaultCountry"; "required": false; "isSignal": true; }; "preferredCountries": { "alias": "preferredCountries"; "required": false; "isSignal": true; }; "onlyCountries": { "alias": "onlyCountries"; "required": false; "isSignal": true; }; "showExampleHint": { "alias": "showExampleHint"; "required": false; "isSignal": true; }; "locale": { "alias": "locale"; "required": false; "isSignal": true; }; "requiredMessage": { "alias": "requiredMessage"; "required": false; "isSignal": true; }; "countryLabel": { "alias": "countryLabel"; "required": false; "isSignal": true; }; "clearLabel": { "alias": "clearLabel"; "required": false; "isSignal": true; }; "searchLabel": { "alias": "searchLabel"; "required": false; "isSignal": true; }; "searchPlaceholder": { "alias": "searchPlaceholder"; "required": false; "isSignal": true; }; "noResultsLabel": { "alias": "noResultsLabel"; "required": false; "isSignal": true; }; "incompleteMessage": { "alias": "incompleteMessage"; "required": false; "isSignal": true; }; "invalidMessage": { "alias": "invalidMessage"; "required": false; "isSignal": true; }; "lengthSeparator": { "alias": "lengthSeparator"; "required": false; "isSignal": true; }; "exampleHintTemplate": { "alias": "exampleHintTemplate"; "required": false; "isSignal": true; }; }, { "phoneChange": "phoneChange"; }, never, never, true, never>;
|
|
2442
2558
|
}
|
|
2443
2559
|
|
|
2444
2560
|
type SdsPaginatorSize = 'sm' | 'md' | 'lg';
|
|
@@ -2580,7 +2696,7 @@ declare class SdsTabsStore {
|
|
|
2580
2696
|
* @example
|
|
2581
2697
|
* <sds-tabs [(value)]="active">
|
|
2582
2698
|
* <sds-tab-list>
|
|
2583
|
-
* <sds-tab value="0">
|
|
2699
|
+
* <sds-tab value="0">Details</sds-tab>
|
|
2584
2700
|
* <sds-tab value="1">Historique</sds-tab>
|
|
2585
2701
|
* </sds-tab-list>
|
|
2586
2702
|
* <sds-tab-panels>
|
|
@@ -2744,6 +2860,51 @@ declare class SdsAccordionContent {
|
|
|
2744
2860
|
static ɵcmp: _angular_core.ɵɵComponentDeclaration<SdsAccordionContent, "sds-accordion-content", never, {}, {}, never, ["*"], true, never>;
|
|
2745
2861
|
}
|
|
2746
2862
|
|
|
2863
|
+
/**
|
|
2864
|
+
* Typed context handed to a custom header template (see {@link SdsTableHeader}), so a header can
|
|
2865
|
+
* act on the table's rows — e.g. a "select all" checkbox over a custom selection column.
|
|
2866
|
+
*/
|
|
2867
|
+
interface SdsTableHeaderContext {
|
|
2868
|
+
/** Same as {@link column} — enables the `let-col` (implicit) binding. */
|
|
2869
|
+
$implicit: SdsTableColumn;
|
|
2870
|
+
/** The column definition this header belongs to. */
|
|
2871
|
+
column: SdsTableColumn;
|
|
2872
|
+
/** Zero-based index of the column in its current (possibly reordered) order. */
|
|
2873
|
+
index: number;
|
|
2874
|
+
/** Every row that passes the global filter, across all pages (the `value` slice when `lazy`). */
|
|
2875
|
+
rows: readonly any[];
|
|
2876
|
+
/** The rows of the page currently displayed. */
|
|
2877
|
+
pageRows: readonly any[];
|
|
2878
|
+
}
|
|
2879
|
+
/**
|
|
2880
|
+
* Supplies a custom template for a column's header cell, matched by its field key. The template
|
|
2881
|
+
* replaces the header's whole content — label and sort button — so it may hold its own controls
|
|
2882
|
+
* (a column with a header template is not sortable from the header). Typical use: a "select all"
|
|
2883
|
+
* checkbox above a checkbox column rendered with `sdsCell`.
|
|
2884
|
+
*
|
|
2885
|
+
* @example
|
|
2886
|
+
* <sds-table [value]="rows" [columns]="cols" dataKey="id">
|
|
2887
|
+
* <ng-template sdsHeader="select" let-rows="rows">
|
|
2888
|
+
* <sds-checkbox ariaLabel="Select all rows" [ngModel]="allSelected(rows)"
|
|
2889
|
+
* [indeterminate]="someSelected(rows)" (ngModelChange)="selectAll(rows, $event)" />
|
|
2890
|
+
* </ng-template>
|
|
2891
|
+
* <ng-template sdsCell="select" let-row="row">
|
|
2892
|
+
* <sds-checkbox [ariaLabel]="'Select ' + row.name" [ngModel]="isSelected(row)"
|
|
2893
|
+
* (ngModelChange)="toggle(row, $event)" />
|
|
2894
|
+
* </ng-template>
|
|
2895
|
+
* </sds-table>
|
|
2896
|
+
*/
|
|
2897
|
+
declare class SdsTableHeader {
|
|
2898
|
+
/** The column `field` whose header this template renders. */
|
|
2899
|
+
readonly column: _angular_core.InputSignal<string>;
|
|
2900
|
+
/** The wrapped template, rendered by the host table via ngTemplateOutlet. */
|
|
2901
|
+
readonly template: TemplateRef<SdsTableHeaderContext>;
|
|
2902
|
+
/** Lets the compiler type-check `let-*` bindings against SdsTableHeaderContext. */
|
|
2903
|
+
static ngTemplateContextGuard(_dir: SdsTableHeader, _ctx: unknown): _ctx is SdsTableHeaderContext;
|
|
2904
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<SdsTableHeader, never>;
|
|
2905
|
+
static ɵdir: _angular_core.ɵɵDirectiveDeclaration<SdsTableHeader, "ng-template[sdsHeader]", never, { "column": { "alias": "sdsHeader"; "required": true; "isSignal": true; }; }, {}, never, never, true, never>;
|
|
2906
|
+
}
|
|
2907
|
+
|
|
2747
2908
|
/** Column configuration. `field` may be a dot-path (e.g. `service.name`). */
|
|
2748
2909
|
interface SdsTableColumn {
|
|
2749
2910
|
/** Row field rendered in this column. Supports dot-paths. */
|
|
@@ -2835,6 +2996,11 @@ type SdsSelectionMode = 'single' | 'multiple' | null;
|
|
|
2835
2996
|
* across all pages**, not just the current page. Toggling it selects/clears
|
|
2836
2997
|
* every filtered row regardless of pagination (this is an intentional
|
|
2837
2998
|
* deviation from PrimeNG's per-page select-all).
|
|
2999
|
+
* - **Custom headers:** `<ng-template sdsHeader="field">` replaces a column's header content (label and
|
|
3000
|
+
* sort button) — e.g. a "select all" checkbox above your own checkbox column. Its context carries the
|
|
3001
|
+
* filtered `rows` (all pages) and the displayed `pageRows` (see {@link SdsTableHeaderContext}).
|
|
3002
|
+
* - **Labels:** every visible and spoken string is an input with an English default (paginator,
|
|
3003
|
+
* filter, selection, expansion, editor). An app serving more than one language passes translations.
|
|
2838
3004
|
*
|
|
2839
3005
|
* **Editable grid (opt-in).** Set `editable` and give columns an `editor` (`text` · `number` ·
|
|
2840
3006
|
* `currency` · `select`). The table becomes an ARIA grid with one tab stop: arrow keys move between
|
|
@@ -2844,14 +3010,16 @@ type SdsSelectionMode = 'single' | 'multiple' | null;
|
|
|
2844
3010
|
* commits. Each changed commit emits `(cellCommit)` — the host applies it to its data (the table never
|
|
2845
3011
|
* mutates rows) — and marks the cell dirty until {@link clearDirty}. Errors from `[cellErrors]` show
|
|
2846
3012
|
* under the cell with `aria-invalid`. Number/currency cells use sds-input-number (live, locale-aware
|
|
2847
|
-
* formatting: "11,9" → "€11.90"
|
|
3013
|
+
* formatting: "11,9" → "€11.90"; in a comma locale such as fr-BE or nl-BE a typed "." is taken as the
|
|
3014
|
+
* decimal separator, so "12.50" → "12,50 €"). The `select` editor is a styled native select with the
|
|
3015
|
+
* column header as its name. Everything else — sort, paging, selection — is unchanged.
|
|
2848
3016
|
*
|
|
2849
3017
|
* @example
|
|
2850
3018
|
* <sds-table [value]="staff" [columns]="cols" dataKey="id"
|
|
2851
3019
|
* sortable paginator [rows]="10" globalFilter
|
|
2852
3020
|
* selectionMode="multiple" [(selection)]="selected">
|
|
2853
|
-
* <ng-template sdsCell="
|
|
2854
|
-
* <sds-badge [variant]="row.
|
|
3021
|
+
* <ng-template sdsCell="status" let-value let-row="row">
|
|
3022
|
+
* <sds-badge [variant]="row.active ? 'success' : 'neutral'">{{ value }}</sds-badge>
|
|
2855
3023
|
* </ng-template>
|
|
2856
3024
|
* </sds-table>
|
|
2857
3025
|
*
|
|
@@ -2926,6 +3094,20 @@ declare class SdsTable implements OnDestroy {
|
|
|
2926
3094
|
readonly locale: _angular_core.InputSignal<string>;
|
|
2927
3095
|
/** Spoken marker of an edited (dirty) cell. */
|
|
2928
3096
|
readonly dirtyLabel: _angular_core.InputSignal<string>;
|
|
3097
|
+
/** Empty choice of a `select` editor while the cell has no value (a column's `placeholder` wins). */
|
|
3098
|
+
readonly selectPlaceholder: _angular_core.InputSignal<string>;
|
|
3099
|
+
/**
|
|
3100
|
+
* Selection and expansion labels (English defaults; translate them in a multi-language app). The
|
|
3101
|
+
* checkbox/radio and expander buttons are icon-only, so these strings are their only names.
|
|
3102
|
+
*/
|
|
3103
|
+
readonly selectAllLabel: _angular_core.InputSignal<string>;
|
|
3104
|
+
readonly selectRowLabel: _angular_core.InputSignal<string>;
|
|
3105
|
+
/** Screen-reader name of the selection column's header in `single` mode. */
|
|
3106
|
+
readonly selectionColumnLabel: _angular_core.InputSignal<string>;
|
|
3107
|
+
/** Screen-reader name of the expander column's header (see {@link expandable}). */
|
|
3108
|
+
readonly expandColumnLabel: _angular_core.InputSignal<string>;
|
|
3109
|
+
readonly expandRowLabel: _angular_core.InputSignal<string>;
|
|
3110
|
+
readonly collapseRowLabel: _angular_core.InputSignal<string>;
|
|
2929
3111
|
readonly sortChange: _angular_core.OutputEmitterRef<SdsTableSortEvent>;
|
|
2930
3112
|
readonly pageChange: _angular_core.OutputEmitterRef<SdsPaginatorState>;
|
|
2931
3113
|
readonly rowSelect: _angular_core.OutputEmitterRef<any>;
|
|
@@ -2947,6 +3129,10 @@ declare class SdsTable implements OnDestroy {
|
|
|
2947
3129
|
private readonly cellTemplates;
|
|
2948
3130
|
private readonly templateMap;
|
|
2949
3131
|
protected templateFor(field: string): _angular_core.TemplateRef<SdsTableCellContext> | null;
|
|
3132
|
+
private readonly headerTemplates;
|
|
3133
|
+
private readonly headerTemplateMap;
|
|
3134
|
+
protected headerTemplateFor(field: string): _angular_core.TemplateRef<SdsTableHeaderContext> | null;
|
|
3135
|
+
protected headerContext(column: SdsTableColumn, index: number): SdsTableHeaderContext;
|
|
2950
3136
|
private readonly rowExpansion;
|
|
2951
3137
|
protected expansionTemplate(): _angular_core.TemplateRef<_besaitech_ng_design_system.SdsTableRowExpansionContext> | null;
|
|
2952
3138
|
protected readonly filterText: _angular_core.WritableSignal<string>;
|
|
@@ -3048,6 +3234,8 @@ declare class SdsTable implements OnDestroy {
|
|
|
3048
3234
|
clearDirty(rowKey?: unknown): void;
|
|
3049
3235
|
/** Display text of a cell in view mode: `format`, else the editor's formatting, else the raw value. */
|
|
3050
3236
|
protected displayCell(row: any, col: SdsTableColumn): string;
|
|
3237
|
+
/** Shared frame of the in-cell editors (text, select): height, radius, focus ring, error state. */
|
|
3238
|
+
protected editorClass(row: any, col: SdsTableColumn): string;
|
|
3051
3239
|
protected gridCellClass(row: any, col: SdsTableColumn, r: number, c: number): string;
|
|
3052
3240
|
protected onCellFocus(r: number, c: number): void;
|
|
3053
3241
|
protected onCellClick(event: MouseEvent, r: number, c: number): void;
|
|
@@ -3079,7 +3267,7 @@ declare class SdsTable implements OnDestroy {
|
|
|
3079
3267
|
protected rowClass(row: any, index: number): string;
|
|
3080
3268
|
protected checkboxClass(checked: boolean, indeterminate: boolean): string;
|
|
3081
3269
|
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>;
|
|
3270
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<SdsTable, "sds-table", never, { "value": { "alias": "value"; "required": false; "isSignal": true; }; "columns": { "alias": "columns"; "required": false; "isSignal": true; }; "dataKey": { "alias": "dataKey"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "striped": { "alias": "striped"; "required": false; "isSignal": true; }; "gridlines": { "alias": "gridlines"; "required": false; "isSignal": true; }; "hoverable": { "alias": "hoverable"; "required": false; "isSignal": true; }; "sortable": { "alias": "sortable"; "required": false; "isSignal": true; }; "paginator": { "alias": "paginator"; "required": false; "isSignal": true; }; "rows": { "alias": "rows"; "required": false; "isSignal": true; }; "rowsPerPageOptions": { "alias": "rowsPerPageOptions"; "required": false; "isSignal": true; }; "showCurrentPageReport": { "alias": "showCurrentPageReport"; "required": false; "isSignal": true; }; "currentPageReportTemplate": { "alias": "currentPageReportTemplate"; "required": false; "isSignal": true; }; "rowsPerPageLabel": { "alias": "rowsPerPageLabel"; "required": false; "isSignal": true; }; "paginationLabel": { "alias": "paginationLabel"; "required": false; "isSignal": true; }; "firstPageLabel": { "alias": "firstPageLabel"; "required": false; "isSignal": true; }; "previousPageLabel": { "alias": "previousPageLabel"; "required": false; "isSignal": true; }; "nextPageLabel": { "alias": "nextPageLabel"; "required": false; "isSignal": true; }; "lastPageLabel": { "alias": "lastPageLabel"; "required": false; "isSignal": true; }; "pageLinkLabel": { "alias": "pageLinkLabel"; "required": false; "isSignal": true; }; "globalFilter": { "alias": "globalFilter"; "required": false; "isSignal": true; }; "globalFilterPlaceholder": { "alias": "globalFilterPlaceholder"; "required": false; "isSignal": true; }; "globalFilterAriaLabel": { "alias": "globalFilterAriaLabel"; "required": false; "isSignal": true; }; "globalFilterFields": { "alias": "globalFilterFields"; "required": false; "isSignal": true; }; "selectionMode": { "alias": "selectionMode"; "required": false; "isSignal": true; }; "selection": { "alias": "selection"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "emptyMessage": { "alias": "emptyMessage"; "required": false; "isSignal": true; }; "caption": { "alias": "caption"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "scrollHeight": { "alias": "scrollHeight"; "required": false; "isSignal": true; }; "lazy": { "alias": "lazy"; "required": false; "isSignal": true; }; "totalRecords": { "alias": "totalRecords"; "required": false; "isSignal": true; }; "expandable": { "alias": "expandable"; "required": false; "isSignal": true; }; "resizableColumns": { "alias": "resizableColumns"; "required": false; "isSignal": true; }; "reorderableColumns": { "alias": "reorderableColumns"; "required": false; "isSignal": true; }; "editable": { "alias": "editable"; "required": false; "isSignal": true; }; "editOn": { "alias": "editOn"; "required": false; "isSignal": true; }; "cellErrors": { "alias": "cellErrors"; "required": false; "isSignal": true; }; "locale": { "alias": "locale"; "required": false; "isSignal": true; }; "dirtyLabel": { "alias": "dirtyLabel"; "required": false; "isSignal": true; }; "selectPlaceholder": { "alias": "selectPlaceholder"; "required": false; "isSignal": true; }; "selectAllLabel": { "alias": "selectAllLabel"; "required": false; "isSignal": true; }; "selectRowLabel": { "alias": "selectRowLabel"; "required": false; "isSignal": true; }; "selectionColumnLabel": { "alias": "selectionColumnLabel"; "required": false; "isSignal": true; }; "expandColumnLabel": { "alias": "expandColumnLabel"; "required": false; "isSignal": true; }; "expandRowLabel": { "alias": "expandRowLabel"; "required": false; "isSignal": true; }; "collapseRowLabel": { "alias": "collapseRowLabel"; "required": false; "isSignal": true; }; }, { "selection": "selectionChange"; "sortChange": "sortChange"; "pageChange": "pageChange"; "rowSelect": "rowSelect"; "rowUnselect": "rowUnselect"; "lazyLoad": "lazyLoad"; "rowClick": "rowClick"; "rowExpand": "rowExpand"; "rowCollapse": "rowCollapse"; "colReorder": "colReorder"; "cellCommit": "cellCommit"; }, ["cellTemplates", "headerTemplates", "rowExpansion"], never, true, never>;
|
|
3083
3271
|
}
|
|
3084
3272
|
|
|
3085
3273
|
/**
|
|
@@ -3105,8 +3293,8 @@ interface SdsTableCellContext {
|
|
|
3105
3293
|
*
|
|
3106
3294
|
* @example
|
|
3107
3295
|
* <sds-table [value]="rows" [columns]="cols">
|
|
3108
|
-
* <ng-template sdsCell="
|
|
3109
|
-
* <sds-badge [variant]="row.
|
|
3296
|
+
* <ng-template sdsCell="status" let-value let-row="row">
|
|
3297
|
+
* <sds-badge [variant]="row.active ? 'success' : 'neutral'">{{ value }}</sds-badge>
|
|
3110
3298
|
* </ng-template>
|
|
3111
3299
|
* </sds-table>
|
|
3112
3300
|
*/
|
|
@@ -3141,7 +3329,7 @@ interface SdsTableRowExpansionContext {
|
|
|
3141
3329
|
* @example
|
|
3142
3330
|
* <sds-table [value]="rows" [columns]="cols" expandable>
|
|
3143
3331
|
* <ng-template sdsRowExpansion let-row>
|
|
3144
|
-
* <div>
|
|
3332
|
+
* <div>Details of {{ row.name }}</div>
|
|
3145
3333
|
* </ng-template>
|
|
3146
3334
|
* </sds-table>
|
|
3147
3335
|
*/
|
|
@@ -3170,7 +3358,7 @@ interface SdsToast {
|
|
|
3170
3358
|
*
|
|
3171
3359
|
* ```ts
|
|
3172
3360
|
* private readonly toasts = inject(SdsToastService);
|
|
3173
|
-
* this.toasts.success('
|
|
3361
|
+
* this.toasts.success('Saved.');
|
|
3174
3362
|
* ```
|
|
3175
3363
|
*
|
|
3176
3364
|
* Mount the host once (e.g. in the shell): `<sds-toast-host />`.
|
|
@@ -3200,8 +3388,8 @@ declare class SdsToastService {
|
|
|
3200
3388
|
declare class SdsToastHost {
|
|
3201
3389
|
readonly toasts: SdsToastService;
|
|
3202
3390
|
/**
|
|
3203
|
-
* Accessible name for each toast's close button.
|
|
3204
|
-
*
|
|
3391
|
+
* Accessible name for each toast's close button. English default; the button is icon-only, so an app
|
|
3392
|
+
* serving more than one language MUST translate it.
|
|
3205
3393
|
*/
|
|
3206
3394
|
readonly closeLabel: _angular_core.InputSignal<string>;
|
|
3207
3395
|
protected readonly errors: _angular_core.Signal<SdsToast[]>;
|
|
@@ -3271,8 +3459,8 @@ declare class SdsThemeToggle {
|
|
|
3271
3459
|
/** `surface` for light/glass bars, `on-brand` for the dark brand bar. */
|
|
3272
3460
|
readonly appearance: _angular_core.InputSignal<SdsThemeToggleAppearance>;
|
|
3273
3461
|
/**
|
|
3274
|
-
* Accessible names for the two actions.
|
|
3275
|
-
*
|
|
3462
|
+
* Accessible names for the two actions. English defaults; a multilingual app must pass translated
|
|
3463
|
+
* values.
|
|
3276
3464
|
*/
|
|
3277
3465
|
readonly darkLabel: _angular_core.InputSignal<string>;
|
|
3278
3466
|
readonly lightLabel: _angular_core.InputSignal<string>;
|
|
@@ -3365,9 +3553,8 @@ declare class SdsTopbar {
|
|
|
3365
3553
|
/** Show the mobile hamburger that toggles the sidebar drawer (< lg). */
|
|
3366
3554
|
readonly menuButton: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
3367
3555
|
/**
|
|
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.
|
|
3556
|
+
* Accessible name for the hamburger. English default; any app serving more than one language MUST
|
|
3557
|
+
* pass a translated value — an icon-only control's aria-label is its only name.
|
|
3371
3558
|
*/
|
|
3372
3559
|
readonly menuLabel: _angular_core.InputSignal<string>;
|
|
3373
3560
|
/**
|
|
@@ -3432,7 +3619,7 @@ declare class SdsShell {
|
|
|
3432
3619
|
* @example
|
|
3433
3620
|
* <sds-sidebar appearance="surface" decorations>
|
|
3434
3621
|
* <sds-nav-group label="Membres">
|
|
3435
|
-
* <sds-nav-item icon="user-plus" label="
|
|
3622
|
+
* <sds-nav-item icon="user-plus" label="Add a member" link="/members/new" />
|
|
3436
3623
|
* </sds-nav-group>
|
|
3437
3624
|
* <div sdsFooter>…</div>
|
|
3438
3625
|
* </sds-sidebar>
|
|
@@ -3448,8 +3635,8 @@ declare class SdsSidebar {
|
|
|
3448
3635
|
private restoreFocusTo;
|
|
3449
3636
|
constructor();
|
|
3450
3637
|
/**
|
|
3451
|
-
* Accessible names for the rail's three icon-only controls.
|
|
3452
|
-
*
|
|
3638
|
+
* Accessible names for the rail's three icon-only controls. English defaults; a multilingual app
|
|
3639
|
+
* must pass translated values.
|
|
3453
3640
|
*/
|
|
3454
3641
|
readonly collapseLabel: _angular_core.InputSignal<string>;
|
|
3455
3642
|
readonly expandLabel: _angular_core.InputSignal<string>;
|
|
@@ -3498,7 +3685,7 @@ declare class SdsNavGroup {
|
|
|
3498
3685
|
/** Turn the label into an expand/collapse control. */
|
|
3499
3686
|
readonly collapsible: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
3500
3687
|
/** 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" | "
|
|
3688
|
+
readonly icon: _angular_core.InputSignal<"menu" | "search" | "table" | "filter" | "image" | "chart-column" | "clipboard-list" | "credit-card" | "external-link" | "languages" | "megaphone" | "monitor" | "store" | "user-round" | "home" | "user-plus" | "user-check" | "hand" | "users" | "bike" | "building-2" | "package" | "package-plus" | "package-open" | "rotate-ccw" | "bar-chart-3" | "log-out" | "panel-left-close" | "panel-left-open" | "panel-left" | "calendar" | "chevron-right" | "chevron-left" | "chevron-down" | "chevron-up" | "plus" | "minus" | "chevrons-left" | "chevrons-right" | "x" | "check" | "alert-circle" | "info" | "copy" | "type" | "tag" | "ticket" | "square" | "square-check" | "circle-dot" | "circle-user" | "layout-grid" | "panels-top-left" | "panel-top" | "rows-3" | "book-open" | "palette" | "bell" | "phone" | "settings" | "align-left" | "toggle-left" | "arrow-up" | "arrow-down" | "chevrons-up-down" | "qr-code" | "eye" | "eye-off" | "user" | "check-circle" | "arrows-clockwise" | "file-text" | "hash" | "map-pin" | "inbox" | "arrow-right" | "refresh-cw" | "loader-circle" | "bug" | "scroll-text" | "moon" | "sun" | "search-x" | "command" | "sparkles" | "triangle-alert" | "octagon-x" | "ban" | "ellipsis" | "ellipsis-vertical" | "grip-vertical" | "upload" | "zoom-in" | "zoom-out" | "trash-2" | "clock" | "pencil" | "circle-help" | "stock" | "allergen-cereals-gluten" | "allergen-crustaceans" | "allergen-eggs" | "allergen-fish" | "allergen-peanuts" | "allergen-soybeans" | "allergen-milk" | "allergen-nuts" | "allergen-celery" | "allergen-mustard" | "allergen-sesame" | "allergen-sulphites" | "allergen-lupin" | "allergen-molluscs" | null>;
|
|
3502
3689
|
/**
|
|
3503
3690
|
* URL prefix owned by this group, e.g. `/payments`. While the active route starts with it the
|
|
3504
3691
|
* group counts as active and opens itself — unless the person has explicitly toggled it since.
|
|
@@ -3563,7 +3750,7 @@ type SdsNavItemBadgeTone = 'brand' | 'danger' | 'neutral';
|
|
|
3563
3750
|
*/
|
|
3564
3751
|
declare class SdsNavItem {
|
|
3565
3752
|
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" | "
|
|
3753
|
+
readonly icon: _angular_core.InputSignal<"menu" | "search" | "table" | "filter" | "image" | "chart-column" | "clipboard-list" | "credit-card" | "external-link" | "languages" | "megaphone" | "monitor" | "store" | "user-round" | "home" | "user-plus" | "user-check" | "hand" | "users" | "bike" | "building-2" | "package" | "package-plus" | "package-open" | "rotate-ccw" | "bar-chart-3" | "log-out" | "panel-left-close" | "panel-left-open" | "panel-left" | "calendar" | "chevron-right" | "chevron-left" | "chevron-down" | "chevron-up" | "plus" | "minus" | "chevrons-left" | "chevrons-right" | "x" | "check" | "alert-circle" | "info" | "copy" | "type" | "tag" | "ticket" | "square" | "square-check" | "circle-dot" | "circle-user" | "layout-grid" | "panels-top-left" | "panel-top" | "rows-3" | "book-open" | "palette" | "bell" | "phone" | "settings" | "align-left" | "toggle-left" | "arrow-up" | "arrow-down" | "chevrons-up-down" | "qr-code" | "eye" | "eye-off" | "user" | "check-circle" | "arrows-clockwise" | "file-text" | "hash" | "map-pin" | "inbox" | "arrow-right" | "refresh-cw" | "loader-circle" | "bug" | "scroll-text" | "moon" | "sun" | "search-x" | "command" | "sparkles" | "triangle-alert" | "octagon-x" | "ban" | "ellipsis" | "ellipsis-vertical" | "grip-vertical" | "upload" | "zoom-in" | "zoom-out" | "trash-2" | "clock" | "pencil" | "circle-help" | "stock" | "allergen-cereals-gluten" | "allergen-crustaceans" | "allergen-eggs" | "allergen-fish" | "allergen-peanuts" | "allergen-soybeans" | "allergen-milk" | "allergen-nuts" | "allergen-celery" | "allergen-mustard" | "allergen-sesame" | "allergen-sulphites" | "allergen-lupin" | "allergen-molluscs" | null>;
|
|
3567
3754
|
readonly label: _angular_core.InputSignal<string>;
|
|
3568
3755
|
/** Router link target; when null, the item behaves as a button. */
|
|
3569
3756
|
readonly link: _angular_core.InputSignal<string | unknown[] | null>;
|
|
@@ -3619,8 +3806,8 @@ type SdsUserMenuAlign = 'start' | 'end';
|
|
|
3619
3806
|
* @example
|
|
3620
3807
|
* <sds-user-menu name="Souhail AIT SAID" email="souhail@example.com" status="online" appearance="surface">
|
|
3621
3808
|
* <sds-menu-item icon="user" label="Profil" link="/profile" />
|
|
3622
|
-
* <sds-menu-item icon="settings" label="
|
|
3623
|
-
* <sds-menu-item icon="log-out" label="
|
|
3809
|
+
* <sds-menu-item icon="settings" label="Settings" link="/settings" />
|
|
3810
|
+
* <sds-menu-item icon="log-out" label="Sign out" tone="danger" (select)="signOut()" />
|
|
3624
3811
|
* </sds-user-menu>
|
|
3625
3812
|
*/
|
|
3626
3813
|
declare class SdsUserMenu {
|
|
@@ -3676,10 +3863,10 @@ type SdsMenuItemTone = 'default' | 'danger';
|
|
|
3676
3863
|
* @example
|
|
3677
3864
|
* <sds-menu-item icon="user" label="Profil" link="/profile" /> <!-- in-app route -->
|
|
3678
3865
|
* <sds-menu-item icon="external-link" label="Site public" href="https://…" target="_blank" />
|
|
3679
|
-
* <sds-menu-item icon="log-out" label="
|
|
3866
|
+
* <sds-menu-item icon="log-out" label="Sign out" tone="danger" (select)="signOut()" />
|
|
3680
3867
|
*/
|
|
3681
3868
|
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" | "
|
|
3869
|
+
readonly icon: _angular_core.InputSignal<"menu" | "search" | "table" | "filter" | "image" | "chart-column" | "clipboard-list" | "credit-card" | "external-link" | "languages" | "megaphone" | "monitor" | "store" | "user-round" | "home" | "user-plus" | "user-check" | "hand" | "users" | "bike" | "building-2" | "package" | "package-plus" | "package-open" | "rotate-ccw" | "bar-chart-3" | "log-out" | "panel-left-close" | "panel-left-open" | "panel-left" | "calendar" | "chevron-right" | "chevron-left" | "chevron-down" | "chevron-up" | "plus" | "minus" | "chevrons-left" | "chevrons-right" | "x" | "check" | "alert-circle" | "info" | "copy" | "type" | "tag" | "ticket" | "square" | "square-check" | "circle-dot" | "circle-user" | "layout-grid" | "panels-top-left" | "panel-top" | "rows-3" | "book-open" | "palette" | "bell" | "phone" | "settings" | "align-left" | "toggle-left" | "arrow-up" | "arrow-down" | "chevrons-up-down" | "qr-code" | "eye" | "eye-off" | "user" | "check-circle" | "arrows-clockwise" | "file-text" | "hash" | "map-pin" | "inbox" | "arrow-right" | "refresh-cw" | "loader-circle" | "bug" | "scroll-text" | "moon" | "sun" | "search-x" | "command" | "sparkles" | "triangle-alert" | "octagon-x" | "ban" | "ellipsis" | "ellipsis-vertical" | "grip-vertical" | "upload" | "zoom-in" | "zoom-out" | "trash-2" | "clock" | "pencil" | "circle-help" | "stock" | "allergen-cereals-gluten" | "allergen-crustaceans" | "allergen-eggs" | "allergen-fish" | "allergen-peanuts" | "allergen-soybeans" | "allergen-milk" | "allergen-nuts" | "allergen-celery" | "allergen-mustard" | "allergen-sesame" | "allergen-sulphites" | "allergen-lupin" | "allergen-molluscs" | null>;
|
|
3683
3870
|
readonly label: _angular_core.InputSignal<string>;
|
|
3684
3871
|
/** Router link target for an in-app route; when null (default) the item is not a Router link. */
|
|
3685
3872
|
readonly link: _angular_core.InputSignal<string | unknown[] | null>;
|
|
@@ -3756,8 +3943,8 @@ declare class SdsSearchCommand {
|
|
|
3756
3943
|
/** `surface` (default) for a light / glass bar; `on-brand` for the dark brand bar. */
|
|
3757
3944
|
readonly appearance: _angular_core.InputSignal<SdsSearchAppearance>;
|
|
3758
3945
|
/**
|
|
3759
|
-
* User-facing copy.
|
|
3760
|
-
* field share `placeholder`, and `searchLabel` is the accessible name for both).
|
|
3946
|
+
* User-facing copy. English defaults; a multilingual app passes translated values (the trigger and
|
|
3947
|
+
* the field share `placeholder`, and `searchLabel` is the accessible name for both).
|
|
3761
3948
|
*/
|
|
3762
3949
|
readonly searchLabel: _angular_core.InputSignal<string>;
|
|
3763
3950
|
readonly clearLabel: _angular_core.InputSignal<string>;
|
|
@@ -3861,7 +4048,7 @@ declare class SdsLanguageSwitcher implements OnDestroy {
|
|
|
3861
4048
|
readonly direction: _angular_core.InputSignal<SdsLanguageSwitcherDirection>;
|
|
3862
4049
|
/** Accessible name for the trigger and panel. */
|
|
3863
4050
|
readonly menuLabel: _angular_core.InputSignal<string>;
|
|
3864
|
-
/** Optional visible header above the list (e.g. "
|
|
4051
|
+
/** Optional visible header above the list (e.g. "Language"). Omitted when empty. */
|
|
3865
4052
|
readonly heading: _angular_core.InputSignal<string>;
|
|
3866
4053
|
readonly openChange: _angular_core.OutputEmitterRef<boolean>;
|
|
3867
4054
|
protected readonly open: _angular_core.WritableSignal<boolean>;
|
|
@@ -3904,5 +4091,5 @@ declare class SdsLanguageSwitcher implements OnDestroy {
|
|
|
3904
4091
|
static ɵcmp: _angular_core.ɵɵComponentDeclaration<SdsLanguageSwitcher, "sds-language-switcher", never, { "languages": { "alias": "languages"; "required": false; "isSignal": true; }; "current": { "alias": "current"; "required": false; "isSignal": true; }; "appearance": { "alias": "appearance"; "required": false; "isSignal": true; }; "align": { "alias": "align"; "required": false; "isSignal": true; }; "direction": { "alias": "direction"; "required": false; "isSignal": true; }; "menuLabel": { "alias": "menuLabel"; "required": false; "isSignal": true; }; "heading": { "alias": "heading"; "required": false; "isSignal": true; }; }, { "current": "currentChange"; "openChange": "openChange"; }, never, never, true, never>;
|
|
3905
4092
|
}
|
|
3906
4093
|
|
|
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 };
|
|
4094
|
+
export { SDS_ALLERGENS, SDS_ALLERGEN_ICONS, SDS_ALLERGEN_LABELS_EN, SDS_ICONS, SDS_PHONE_COUNTRIES, SdsAccordion, SdsAccordionContent, SdsAccordionHeader, SdsAccordionPanel, SdsAccordionStore, SdsAllergenIcon, SdsAvatar, SdsBadge, SdsBulkBar, SdsButton, SdsCalendar, SdsCard, SdsCheckbox, SdsChecklistRow, SdsDatePicker, SdsFileDrop, SdsIcon, SdsImageCropper, SdsInput, SdsInputNumber, SdsLanguageSwitcher, SdsLocalizedInput, SdsMenu, SdsMenuItem, SdsMenuTrigger, SdsMultiSelect, SdsNavGroup, SdsNavItem, SdsOtpInput, SdsPaginator, SdsPhoneInput, SdsRadio, SdsScore, SdsSearchCommand, SdsSegmented, SdsSelect, SdsSelectEmpty, SdsSelectFooter, SdsSelectOption, SdsShell, SdsSidebar, SdsSortableHandle, SdsSortableItem, SdsSortableList, SdsStatusTile, SdsTab, SdsTabList, SdsTabPanel, SdsTabPanels, SdsTable, SdsTableCell, SdsTableHeader, SdsTableRowExpansion, SdsTabs, SdsTabsStore, SdsTextarea, SdsThemeService, SdsThemeToggle, SdsToastHost, SdsToastService, SdsToggleSwitch, SdsTopbar, SdsTriStateChip, SdsUserMenu, SidebarStore, addDays, addMonths, addMonthsKeepDay, formatDdMmYyyy, formatHhMm, isOutOfRange, isSameDay, isoDay, pad2, sdsFileMatchesAccept, sdsFormatBytes, sdsFormatNational, sdsMatchDialCode, sdsNormalizeSignificant, startOfDay, startOfMonth };
|
|
4095
|
+
export type { SdsAccordionActive, SdsAccordionValue, SdsAllergen, SdsAvatarStatus, SdsBadgeSize, SdsBadgeVariant, SdsBulkBarPosition, SdsButtonShape, SdsButtonSize, SdsButtonVariant, SdsCardVariant, SdsCheckboxSize, SdsChecklistStatus, SdsCropRect, SdsDatePickerSize, SdsFileRejection, SdsFileRejectionReason, SdsIconName, SdsIconSize, SdsImageCropperBlobOptions, SdsImageCropperShape, SdsInputAppearance, SdsInputNumberAppearance, SdsInputNumberButtonLayout, SdsInputNumberCurrencyDisplay, SdsInputNumberMode, SdsInputNumberSize, SdsInputShape, SdsInputSize, SdsInputType, SdsLanguageOption, SdsLanguageSwitcherAlign, SdsLanguageSwitcherAppearance, SdsLanguageSwitcherDirection, SdsLocalizedInputSize, SdsLocalizedValue, SdsMenuAction, SdsMenuAlign, SdsMenuEntry, SdsMenuItemTone, SdsMenuSeparator, SdsMultiSelectDisplay, SdsMultiSelectSize, SdsNavItemBadgeTone, SdsOtpInputSize, SdsPaginatorSize, SdsPaginatorState, SdsPhoneCountry, SdsPhoneInputSize, SdsPhoneValue, SdsRadioSize, SdsScoreSize, SdsScoreTier, SdsScoreVariant, SdsSearchAppearance, SdsSearchItem, SdsSegmentedOption, SdsSegmentedSize, SdsSelectAppearance, SdsSelectEmptyContext, SdsSelectFooterContext, SdsSelectOptionContext, SdsSelectSize, SdsShellBackground, SdsSidebarAppearance, SdsSortOrder, SdsSortableAppearance, SdsSortableItemContext, SdsSortableReorderEvent, SdsStatusTileState, SdsTabValue, SdsTableCellCommitEvent, SdsTableCellContext, SdsTableCellErrors, SdsTableColumn, SdsTableEditTrigger, SdsTableEditor, SdsTableHeaderContext, SdsTableLazyEvent, SdsTableRowExpansionContext, SdsTableSelectOption, SdsTableSize, SdsTableSortEvent, SdsTextareaAppearance, SdsTextareaResize, SdsTextareaSize, SdsTheme, SdsThemeToggleAppearance, SdsToast, SdsToastKind, SdsToggleSwitchSize, SdsTopbarAppearance, SdsTriState, SdsTriStateChipSize, SdsUserMenuAlign, SdsUserMenuAppearance };
|