@besaitech/ng-design-system 0.0.54 → 0.0.56
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 +6 -3
- package/fesm2022/besaitech-ng-design-system.mjs +1522 -283
- package/fesm2022/besaitech-ng-design-system.mjs.map +1 -1
- package/index.d.ts +364 -29
- package/package.json +1 -1
- package/themes/belvigo-emerald.css +73 -0
package/index.d.ts
CHANGED
|
@@ -102,6 +102,8 @@ declare const SDS_ICONS: {
|
|
|
102
102
|
readonly 'grip-vertical': "<circle cx=\"9\" cy=\"12\" r=\"1\"/><circle cx=\"9\" cy=\"5\" r=\"1\"/><circle cx=\"9\" cy=\"19\" r=\"1\"/><circle cx=\"15\" cy=\"12\" r=\"1\"/><circle cx=\"15\" cy=\"5\" r=\"1\"/><circle cx=\"15\" cy=\"19\" r=\"1\"/>";
|
|
103
103
|
readonly upload: "<path d=\"M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4\"/><polyline points=\"17 8 12 3 7 8\"/><line x1=\"12\" x2=\"12\" y1=\"3\" y2=\"15\"/>";
|
|
104
104
|
readonly image: "<rect width=\"18\" height=\"18\" x=\"3\" y=\"3\" rx=\"2\" ry=\"2\"/><circle cx=\"9\" cy=\"9\" r=\"2\"/><path d=\"m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21\"/>";
|
|
105
|
+
readonly 'image-off': "<line x1=\"2\" x2=\"22\" y1=\"2\" y2=\"22\"/><path d=\"M10.41 10.41a2 2 0 1 1-2.83-2.83\"/><line x1=\"13.5\" x2=\"6\" y1=\"13.5\" y2=\"21\"/><line x1=\"18\" x2=\"21\" y1=\"12\" y2=\"15\"/><path d=\"M3.59 3.59A1.99 1.99 0 0 0 3 5v14a2 2 0 0 0 2 2h14c.55 0 1.052-.22 1.41-.59\"/><path d=\"M21 15V5a2 2 0 0 0-2-2H9\"/>";
|
|
106
|
+
readonly utensils: "<path d=\"M3 2v7c0 1.1.9 2 2 2h4a2 2 0 0 0 2-2V2\"/><path d=\"M7 2v20\"/><path d=\"M21 15V2a5 5 0 0 0-5 5v6c0 1.1.9 2 2 2h3Zm0 0v7\"/>";
|
|
105
107
|
readonly 'zoom-in': "<circle cx=\"11\" cy=\"11\" r=\"8\"/><line x1=\"21\" x2=\"16.65\" y1=\"21\" y2=\"16.65\"/><line x1=\"11\" x2=\"11\" y1=\"8\" y2=\"14\"/><line x1=\"8\" x2=\"14\" y1=\"11\" y2=\"11\"/>";
|
|
106
108
|
readonly 'zoom-out': "<circle cx=\"11\" cy=\"11\" r=\"8\"/><line x1=\"21\" x2=\"16.65\" y1=\"21\" y2=\"16.65\"/><line x1=\"8\" x2=\"14\" y1=\"11\" y2=\"11\"/>";
|
|
107
109
|
readonly 'trash-2': "<path d=\"M3 6h18\"/><path d=\"M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6\"/><path d=\"M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2\"/><line x1=\"10\" x2=\"10\" y1=\"11\" y2=\"17\"/><line x1=\"14\" x2=\"14\" y1=\"11\" y2=\"17\"/>";
|
|
@@ -137,7 +139,7 @@ type SdsIconSize = 'sm' | 'md' | 'lg' | 'xl';
|
|
|
137
139
|
declare class SdsIcon {
|
|
138
140
|
private readonly sanitizer;
|
|
139
141
|
/** Icon identifier from the registry. */
|
|
140
|
-
readonly name: _angular_core.InputSignal<"menu" | "search" | "table" | "filter" | "
|
|
142
|
+
readonly name: _angular_core.InputSignal<"upload" | "image" | "file-text" | "type" | "menu" | "search" | "table" | "filter" | "copy" | "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" | "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" | "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" | "image-off" | "utensils" | "zoom-in" | "zoom-out" | "trash-2" | "clock" | "pencil" | "circle-help" | "stock" | "allergen-cereals-gluten" | "allergen-crustaceans" | "allergen-eggs" | "allergen-fish" | "allergen-peanuts" | "allergen-soybeans" | "allergen-milk" | "allergen-nuts" | "allergen-celery" | "allergen-mustard" | "allergen-sesame" | "allergen-sulphites" | "allergen-lupin" | "allergen-molluscs">;
|
|
141
143
|
/** Square size: a pixel number, a numeric string, or a keyword (sm·md·lg·xl). */
|
|
142
144
|
readonly size: _angular_core.InputSignalWithTransform<number, string | number>;
|
|
143
145
|
/** Stroke width of the line icon. */
|
|
@@ -236,8 +238,8 @@ declare class SdsInput implements ControlValueAccessor {
|
|
|
236
238
|
* translate it — it is an icon-only control, so this string is its only name.
|
|
237
239
|
*/
|
|
238
240
|
readonly clearLabel: _angular_core.InputSignal<string>;
|
|
239
|
-
readonly leadingIcon: _angular_core.InputSignal<"menu" | "search" | "table" | "filter" | "
|
|
240
|
-
readonly trailingIcon: _angular_core.InputSignal<"menu" | "search" | "table" | "filter" | "
|
|
241
|
+
readonly leadingIcon: _angular_core.InputSignal<"upload" | "image" | "file-text" | "type" | "menu" | "search" | "table" | "filter" | "copy" | "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" | "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" | "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" | "image-off" | "utensils" | "zoom-in" | "zoom-out" | "trash-2" | "clock" | "pencil" | "circle-help" | "stock" | "allergen-cereals-gluten" | "allergen-crustaceans" | "allergen-eggs" | "allergen-fish" | "allergen-peanuts" | "allergen-soybeans" | "allergen-milk" | "allergen-nuts" | "allergen-celery" | "allergen-mustard" | "allergen-sesame" | "allergen-sulphites" | "allergen-lupin" | "allergen-molluscs" | null>;
|
|
242
|
+
readonly trailingIcon: _angular_core.InputSignal<"upload" | "image" | "file-text" | "type" | "menu" | "search" | "table" | "filter" | "copy" | "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" | "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" | "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" | "image-off" | "utensils" | "zoom-in" | "zoom-out" | "trash-2" | "clock" | "pencil" | "circle-help" | "stock" | "allergen-cereals-gluten" | "allergen-crustaceans" | "allergen-eggs" | "allergen-fish" | "allergen-peanuts" | "allergen-soybeans" | "allergen-milk" | "allergen-nuts" | "allergen-celery" | "allergen-mustard" | "allergen-sesame" | "allergen-sulphites" | "allergen-lupin" | "allergen-molluscs" | null>;
|
|
241
243
|
/**
|
|
242
244
|
* A CLICKABLE trailing icon, for the affordances that belong to the field itself — password reveal
|
|
243
245
|
* above all. Distinct from {@link trailingIcon}, which is decorative and explicitly
|
|
@@ -247,7 +249,7 @@ declare class SdsInput implements ControlValueAccessor {
|
|
|
247
249
|
* Always pair it with {@link trailingActionLabel} — an icon-only button with no accessible name is
|
|
248
250
|
* unusable by a screen reader. For a toggle, also bind {@link trailingActionPressed}.
|
|
249
251
|
*/
|
|
250
|
-
readonly trailingAction: _angular_core.InputSignal<"menu" | "search" | "table" | "filter" | "
|
|
252
|
+
readonly trailingAction: _angular_core.InputSignal<"upload" | "image" | "file-text" | "type" | "menu" | "search" | "table" | "filter" | "copy" | "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" | "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" | "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" | "image-off" | "utensils" | "zoom-in" | "zoom-out" | "trash-2" | "clock" | "pencil" | "circle-help" | "stock" | "allergen-cereals-gluten" | "allergen-crustaceans" | "allergen-eggs" | "allergen-fish" | "allergen-peanuts" | "allergen-soybeans" | "allergen-milk" | "allergen-nuts" | "allergen-celery" | "allergen-mustard" | "allergen-sesame" | "allergen-sulphites" | "allergen-lupin" | "allergen-molluscs" | null>;
|
|
251
253
|
/** Accessible name for {@link trailingAction}. Translate it in the consuming app. */
|
|
252
254
|
readonly trailingActionLabel: _angular_core.InputSignal<string>;
|
|
253
255
|
/** `aria-pressed` for a toggling action (e.g. show/hide password). Null renders no attribute. */
|
|
@@ -354,9 +356,9 @@ declare class SdsInputNumber implements ControlValueAccessor {
|
|
|
354
356
|
readonly showButtons: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
355
357
|
readonly buttonLayout: _angular_core.InputSignal<SdsInputNumberButtonLayout>;
|
|
356
358
|
/** Override the increment button icon (defaults: chevron-up when stacked, plus otherwise). */
|
|
357
|
-
readonly incrementIcon: _angular_core.InputSignal<"menu" | "search" | "table" | "filter" | "
|
|
359
|
+
readonly incrementIcon: _angular_core.InputSignal<"upload" | "image" | "file-text" | "type" | "menu" | "search" | "table" | "filter" | "copy" | "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" | "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" | "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" | "image-off" | "utensils" | "zoom-in" | "zoom-out" | "trash-2" | "clock" | "pencil" | "circle-help" | "stock" | "allergen-cereals-gluten" | "allergen-crustaceans" | "allergen-eggs" | "allergen-fish" | "allergen-peanuts" | "allergen-soybeans" | "allergen-milk" | "allergen-nuts" | "allergen-celery" | "allergen-mustard" | "allergen-sesame" | "allergen-sulphites" | "allergen-lupin" | "allergen-molluscs" | null>;
|
|
358
360
|
/** Override the decrement button icon (defaults: chevron-down when stacked, minus otherwise). */
|
|
359
|
-
readonly decrementIcon: _angular_core.InputSignal<"menu" | "search" | "table" | "filter" | "
|
|
361
|
+
readonly decrementIcon: _angular_core.InputSignal<"upload" | "image" | "file-text" | "type" | "menu" | "search" | "table" | "filter" | "copy" | "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" | "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" | "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" | "image-off" | "utensils" | "zoom-in" | "zoom-out" | "trash-2" | "clock" | "pencil" | "circle-help" | "stock" | "allergen-cereals-gluten" | "allergen-crustaceans" | "allergen-eggs" | "allergen-fish" | "allergen-peanuts" | "allergen-soybeans" | "allergen-milk" | "allergen-nuts" | "allergen-celery" | "allergen-mustard" | "allergen-sesame" | "allergen-sulphites" | "allergen-lupin" | "allergen-molluscs" | null>;
|
|
360
362
|
/** Allow an empty (null) value. When false, blurring an empty field falls back to {@link min} or 0. */
|
|
361
363
|
readonly allowEmpty: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
362
364
|
readonly clearable: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
@@ -373,8 +375,8 @@ declare class SdsInputNumber implements ControlValueAccessor {
|
|
|
373
375
|
protected readonly isDisabled: _angular_core.Signal<boolean>;
|
|
374
376
|
protected readonly describedBy: _angular_core.Signal<string | null>;
|
|
375
377
|
protected readonly clearVisible: _angular_core.Signal<boolean>;
|
|
376
|
-
protected readonly incrementIconName: _angular_core.Signal<"menu" | "search" | "table" | "filter" | "
|
|
377
|
-
protected readonly decrementIconName: _angular_core.Signal<"menu" | "search" | "table" | "filter" | "
|
|
378
|
+
protected readonly incrementIconName: _angular_core.Signal<"upload" | "image" | "file-text" | "type" | "menu" | "search" | "table" | "filter" | "copy" | "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" | "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" | "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" | "image-off" | "utensils" | "zoom-in" | "zoom-out" | "trash-2" | "clock" | "pencil" | "circle-help" | "stock" | "allergen-cereals-gluten" | "allergen-crustaceans" | "allergen-eggs" | "allergen-fish" | "allergen-peanuts" | "allergen-soybeans" | "allergen-milk" | "allergen-nuts" | "allergen-celery" | "allergen-mustard" | "allergen-sesame" | "allergen-sulphites" | "allergen-lupin" | "allergen-molluscs">;
|
|
379
|
+
protected readonly decrementIconName: _angular_core.Signal<"upload" | "image" | "file-text" | "type" | "menu" | "search" | "table" | "filter" | "copy" | "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" | "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" | "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" | "image-off" | "utensils" | "zoom-in" | "zoom-out" | "trash-2" | "clock" | "pencil" | "circle-help" | "stock" | "allergen-cereals-gluten" | "allergen-crustaceans" | "allergen-eggs" | "allergen-fish" | "allergen-peanuts" | "allergen-soybeans" | "allergen-milk" | "allergen-nuts" | "allergen-celery" | "allergen-mustard" | "allergen-sesame" | "allergen-sulphites" | "allergen-lupin" | "allergen-molluscs">;
|
|
378
380
|
protected readonly canIncrement: _angular_core.Signal<boolean>;
|
|
379
381
|
protected readonly canDecrement: _angular_core.Signal<boolean>;
|
|
380
382
|
/** Locale grouping/decimal separators, derived from Intl so parsing matches formatting. */
|
|
@@ -447,6 +449,104 @@ declare class SdsInputNumber implements ControlValueAccessor {
|
|
|
447
449
|
static ɵcmp: _angular_core.ɵɵComponentDeclaration<SdsInputNumber, "sds-input-number", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "hint": { "alias": "hint"; "required": false; "isSignal": true; }; "error": { "alias": "error"; "required": false; "isSignal": true; }; "invalid": { "alias": "invalid"; "required": false; "isSignal": true; }; "ariaDescribedby": { "alias": "ariaDescribedby"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "appearance": { "alias": "appearance"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "mode": { "alias": "mode"; "required": false; "isSignal": true; }; "locale": { "alias": "locale"; "required": false; "isSignal": true; }; "currency": { "alias": "currency"; "required": false; "isSignal": true; }; "currencyDisplay": { "alias": "currencyDisplay"; "required": false; "isSignal": true; }; "useGrouping": { "alias": "useGrouping"; "required": false; "isSignal": true; }; "minFractionDigits": { "alias": "minFractionDigits"; "required": false; "isSignal": true; }; "maxFractionDigits": { "alias": "maxFractionDigits"; "required": false; "isSignal": true; }; "prefix": { "alias": "prefix"; "required": false; "isSignal": true; }; "suffix": { "alias": "suffix"; "required": false; "isSignal": true; }; "min": { "alias": "min"; "required": false; "isSignal": true; }; "max": { "alias": "max"; "required": false; "isSignal": true; }; "step": { "alias": "step"; "required": false; "isSignal": true; }; "showButtons": { "alias": "showButtons"; "required": false; "isSignal": true; }; "buttonLayout": { "alias": "buttonLayout"; "required": false; "isSignal": true; }; "incrementIcon": { "alias": "incrementIcon"; "required": false; "isSignal": true; }; "decrementIcon": { "alias": "decrementIcon"; "required": false; "isSignal": true; }; "allowEmpty": { "alias": "allowEmpty"; "required": false; "isSignal": true; }; "clearable": { "alias": "clearable"; "required": false; "isSignal": true; }; "clearLabel": { "alias": "clearLabel"; "required": false; "isSignal": true; }; "incrementLabel": { "alias": "incrementLabel"; "required": false; "isSignal": true; }; "decrementLabel": { "alias": "decrementLabel"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
|
|
448
450
|
}
|
|
449
451
|
|
|
452
|
+
type SdsTimeInputSize = 'sm' | 'md' | 'lg';
|
|
453
|
+
type SdsTimeInputAppearance = 'default' | 'filled';
|
|
454
|
+
/**
|
|
455
|
+
* Time-of-day field, 24-hour, whatever the browser's locale: two segments (hours : minutes) in one
|
|
456
|
+
* framed field, the value being a `"HH:mm"` string (or null) — the shape of a backend `LocalTime`.
|
|
457
|
+
* Implements ControlValueAccessor: use `formControlName` or `[(ngModel)]`.
|
|
458
|
+
*
|
|
459
|
+
* Unlike a native `<input type="time">` it never switches to a 12-hour clock with AM/PM, and it is themed
|
|
460
|
+
* like every other field (label, hint, error, sizes, `filled`, dark mode).
|
|
461
|
+
*
|
|
462
|
+
* Keyboard: type digits (the hours move on to the minutes by themselves after two digits, or one digit
|
|
463
|
+
* above 2); `:`/`.`/→ jump to the minutes, ← or Backspace on an empty minute go back; ↑/↓ step the hours
|
|
464
|
+
* by 1 and the minutes by [minuteStep] (wrapping, never carrying into the hour). Each segment is a
|
|
465
|
+
* `spinbutton` with its own accessible name. An hour typed without minutes gets `:00` when the field is
|
|
466
|
+
* left; emptying both segments sets null.
|
|
467
|
+
*
|
|
468
|
+
* @example
|
|
469
|
+
* <sds-time-input label="Opens at" formControlName="start" [minuteStep]="15" />
|
|
470
|
+
*
|
|
471
|
+
* @example
|
|
472
|
+
* <sds-time-input [ariaLabel]="'Closes at'" [ngModel]="end()" (ngModelChange)="end.set($event)" clearable />
|
|
473
|
+
*/
|
|
474
|
+
declare class SdsTimeInput implements ControlValueAccessor {
|
|
475
|
+
protected readonly fieldId: string;
|
|
476
|
+
readonly label: _angular_core.InputSignal<string>;
|
|
477
|
+
/** Accessible name of the field when there is no visible [label]. */
|
|
478
|
+
readonly ariaLabel: _angular_core.InputSignal<string>;
|
|
479
|
+
readonly hint: _angular_core.InputSignal<string>;
|
|
480
|
+
readonly error: _angular_core.InputSignal<string>;
|
|
481
|
+
readonly size: _angular_core.InputSignal<SdsTimeInputSize>;
|
|
482
|
+
/** `filled` is borderless on a muted ground, like sds-input's `filled`. */
|
|
483
|
+
readonly appearance: _angular_core.InputSignal<SdsTimeInputAppearance>;
|
|
484
|
+
readonly disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
485
|
+
readonly readonly: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
486
|
+
/** Show a clear button (sets null) while there is a value. */
|
|
487
|
+
readonly clearable: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
488
|
+
/** Leading clock icon. */
|
|
489
|
+
readonly showIcon: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
490
|
+
/** Minutes moved by ↑/↓ on the minutes segment (snaps to the step first). Default 1. */
|
|
491
|
+
readonly minuteStep: _angular_core.InputSignalWithTransform<number, unknown>;
|
|
492
|
+
/** Emit `HH:mm:ss` (seconds always `00`) instead of `HH:mm`. */
|
|
493
|
+
readonly withSeconds: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
494
|
+
/** Placeholder of each empty segment. */
|
|
495
|
+
readonly placeholderText: _angular_core.InputSignal<string>;
|
|
496
|
+
/** Accessible name of the hours segment. English default — translate it. */
|
|
497
|
+
readonly hoursLabel: _angular_core.InputSignal<string>;
|
|
498
|
+
/** Accessible name of the minutes segment. English default — translate it. */
|
|
499
|
+
readonly minutesLabel: _angular_core.InputSignal<string>;
|
|
500
|
+
/** Accessible name of the clear button. English default — translate it. */
|
|
501
|
+
readonly clearLabel: _angular_core.InputSignal<string>;
|
|
502
|
+
private readonly hoursEl;
|
|
503
|
+
private readonly minutesEl;
|
|
504
|
+
protected readonly hours: _angular_core.WritableSignal<number | null>;
|
|
505
|
+
protected readonly minutes: _angular_core.WritableSignal<number | null>;
|
|
506
|
+
/** Raw text of a segment while it is being typed (null = show the committed value). */
|
|
507
|
+
private readonly hoursDraft;
|
|
508
|
+
private readonly minutesDraft;
|
|
509
|
+
private readonly cvaDisabled;
|
|
510
|
+
protected readonly isDisabled: _angular_core.Signal<boolean>;
|
|
511
|
+
protected readonly hasValue: _angular_core.Signal<boolean>;
|
|
512
|
+
protected readonly hoursText: _angular_core.Signal<string>;
|
|
513
|
+
protected readonly minutesText: _angular_core.Signal<string>;
|
|
514
|
+
protected readonly describedBy: _angular_core.Signal<string | null>;
|
|
515
|
+
protected readonly wrapperClasses: _angular_core.Signal<string>;
|
|
516
|
+
protected pad(n: number): string;
|
|
517
|
+
private onChange;
|
|
518
|
+
private onTouched;
|
|
519
|
+
writeValue(value: unknown): void;
|
|
520
|
+
registerOnChange(fn: (value: string | null) => void): void;
|
|
521
|
+
registerOnTouched(fn: () => void): void;
|
|
522
|
+
setDisabledState(isDisabled: boolean): void;
|
|
523
|
+
protected selectAll(event: FocusEvent): void;
|
|
524
|
+
/** Clicking the frame (icon, padding) focuses the hours, like clicking a native field. */
|
|
525
|
+
protected onFrameClick(event: MouseEvent): void;
|
|
526
|
+
protected onHoursInput(event: Event): void;
|
|
527
|
+
protected onMinutesInput(event: Event): void;
|
|
528
|
+
/** "7" (no minute starts with 6-9 and has a second digit) and any 2 digits commit; "0"-"5" wait. */
|
|
529
|
+
private takeMinuteDigits;
|
|
530
|
+
/** Force both inputs to show the committed values (a binding does not repaint an unchanged value). */
|
|
531
|
+
private syncSegments;
|
|
532
|
+
protected onHoursKeydown(event: KeyboardEvent): void;
|
|
533
|
+
protected onMinutesKeydown(event: KeyboardEvent): void;
|
|
534
|
+
/** Leaving the whole field completes a half-typed time and marks the control touched. */
|
|
535
|
+
protected onFocusOut(event: FocusEvent): void;
|
|
536
|
+
protected clear(): void;
|
|
537
|
+
private draftNumber;
|
|
538
|
+
private flushHours;
|
|
539
|
+
private flushMinutes;
|
|
540
|
+
private commitHours;
|
|
541
|
+
private commitMinutes;
|
|
542
|
+
/** Emits `HH:mm` once both segments hold a value, and null once both are empty. */
|
|
543
|
+
private emitIfComplete;
|
|
544
|
+
private focusMinutes;
|
|
545
|
+
private focusHours;
|
|
546
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<SdsTimeInput, never>;
|
|
547
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<SdsTimeInput, "sds-time-input", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "hint": { "alias": "hint"; "required": false; "isSignal": true; }; "error": { "alias": "error"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "appearance": { "alias": "appearance"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "clearable": { "alias": "clearable"; "required": false; "isSignal": true; }; "showIcon": { "alias": "showIcon"; "required": false; "isSignal": true; }; "minuteStep": { "alias": "minuteStep"; "required": false; "isSignal": true; }; "withSeconds": { "alias": "withSeconds"; "required": false; "isSignal": true; }; "placeholderText": { "alias": "placeholderText"; "required": false; "isSignal": true; }; "hoursLabel": { "alias": "hoursLabel"; "required": false; "isSignal": true; }; "minutesLabel": { "alias": "minutesLabel"; "required": false; "isSignal": true; }; "clearLabel": { "alias": "clearLabel"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
|
|
548
|
+
}
|
|
549
|
+
|
|
450
550
|
/** A translatable string held per language code — e.g. `{ fr: 'Titre', nl: 'Titel' }`. */
|
|
451
551
|
type SdsLocalizedValue = Record<string, string>;
|
|
452
552
|
type SdsLocalizedInputSize = 'sm' | 'md' | 'lg';
|
|
@@ -670,9 +770,9 @@ declare class SdsToggleSwitch implements ControlValueAccessor {
|
|
|
670
770
|
/** Value emitted/stored when the switch is off. */
|
|
671
771
|
readonly falseValue: _angular_core.InputSignal<unknown>;
|
|
672
772
|
/** Icon shown on the knob when checked. */
|
|
673
|
-
readonly onIcon: _angular_core.InputSignal<"menu" | "search" | "table" | "filter" | "
|
|
773
|
+
readonly onIcon: _angular_core.InputSignal<"upload" | "image" | "file-text" | "type" | "menu" | "search" | "table" | "filter" | "copy" | "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" | "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" | "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" | "image-off" | "utensils" | "zoom-in" | "zoom-out" | "trash-2" | "clock" | "pencil" | "circle-help" | "stock" | "allergen-cereals-gluten" | "allergen-crustaceans" | "allergen-eggs" | "allergen-fish" | "allergen-peanuts" | "allergen-soybeans" | "allergen-milk" | "allergen-nuts" | "allergen-celery" | "allergen-mustard" | "allergen-sesame" | "allergen-sulphites" | "allergen-lupin" | "allergen-molluscs" | null>;
|
|
674
774
|
/** Icon shown on the knob when unchecked. */
|
|
675
|
-
readonly offIcon: _angular_core.InputSignal<"menu" | "search" | "table" | "filter" | "
|
|
775
|
+
readonly offIcon: _angular_core.InputSignal<"upload" | "image" | "file-text" | "type" | "menu" | "search" | "table" | "filter" | "copy" | "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" | "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" | "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" | "image-off" | "utensils" | "zoom-in" | "zoom-out" | "trash-2" | "clock" | "pencil" | "circle-help" | "stock" | "allergen-cereals-gluten" | "allergen-crustaceans" | "allergen-eggs" | "allergen-fish" | "allergen-peanuts" | "allergen-soybeans" | "allergen-milk" | "allergen-nuts" | "allergen-celery" | "allergen-mustard" | "allergen-sesame" | "allergen-sulphites" | "allergen-lupin" | "allergen-molluscs" | null>;
|
|
676
776
|
readonly hint: _angular_core.InputSignal<string>;
|
|
677
777
|
readonly error: _angular_core.InputSignal<string>;
|
|
678
778
|
/**
|
|
@@ -812,22 +912,63 @@ declare class SdsRadio implements ControlValueAccessor {
|
|
|
812
912
|
}
|
|
813
913
|
|
|
814
914
|
type SdsAvatarStatus = 'online' | 'offline' | 'busy' | 'away';
|
|
915
|
+
/** `circle` for people, `rounded` for things (a dish, a product, a store logo), `square` for a flush tile. */
|
|
916
|
+
type SdsAvatarShape = 'circle' | 'rounded' | 'square';
|
|
815
917
|
/**
|
|
816
|
-
*
|
|
918
|
+
* Avatar showing an image, initials or a placeholder icon, with an optional status dot.
|
|
919
|
+
*
|
|
920
|
+
* - `shape`: `circle` (default, people), `rounded` (things: a dish photo, a product, a logo) or `square`.
|
|
921
|
+
* - `fallbackIcon`: shown instead of initials when there is no image (or it fails to load) — e.g.
|
|
922
|
+
* `utensils` or `image` for a menu item without a photo. The placeholder is drawn on `placeholderClass`
|
|
923
|
+
* (a muted tile by default), not on the initials' brand fill.
|
|
924
|
+
* - A broken `src` falls back to the icon or the initials instead of showing the browser's broken-image
|
|
925
|
+
* glyph; a new `src` retries.
|
|
926
|
+
* - `decorative`: the avatar only repeats a name that is already written next to it (a list row, a select
|
|
927
|
+
* option), so the image gets `alt=""` and the whole avatar is hidden from assistive technology.
|
|
928
|
+
*
|
|
929
|
+
* @example
|
|
930
|
+
* <sds-avatar name="Ada Lovelace" [src]="user.photoUrl" status="online" />
|
|
931
|
+
*
|
|
932
|
+
* @example
|
|
933
|
+
* <!-- a menu item in a list: rounded photo, dish placeholder when there is none -->
|
|
934
|
+
* <sds-avatar shape="rounded" [size]="32" [src]="item.thumbnailUrl" [name]="item.name"
|
|
935
|
+
* fallbackIcon="utensils" decorative />
|
|
817
936
|
*/
|
|
818
937
|
declare class SdsAvatar {
|
|
819
938
|
readonly name: _angular_core.InputSignal<string>;
|
|
820
939
|
readonly initials: _angular_core.InputSignal<string>;
|
|
821
|
-
readonly src: _angular_core.InputSignal<string | null>;
|
|
940
|
+
readonly src: _angular_core.InputSignal<string | null | undefined>;
|
|
822
941
|
readonly size: _angular_core.InputSignal<number>;
|
|
823
942
|
readonly status: _angular_core.InputSignal<SdsAvatarStatus | null>;
|
|
943
|
+
/** `circle` (default), `rounded` (radius of a control) or `square`. */
|
|
944
|
+
readonly shape: _angular_core.InputSignal<SdsAvatarShape>;
|
|
824
945
|
/** Tailwind bg utility for the initials background. */
|
|
825
946
|
readonly bgClass: _angular_core.InputSignal<string>;
|
|
947
|
+
/**
|
|
948
|
+
* Icon shown instead of initials when there is no usable image (e.g. `utensils` or `image` for a dish).
|
|
949
|
+
* Null (default) keeps the initials.
|
|
950
|
+
*/
|
|
951
|
+
readonly fallbackIcon: _angular_core.InputSignal<"upload" | "image" | "file-text" | "type" | "menu" | "search" | "table" | "filter" | "copy" | "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" | "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" | "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" | "image-off" | "utensils" | "zoom-in" | "zoom-out" | "trash-2" | "clock" | "pencil" | "circle-help" | "stock" | "allergen-cereals-gluten" | "allergen-crustaceans" | "allergen-eggs" | "allergen-fish" | "allergen-peanuts" | "allergen-soybeans" | "allergen-milk" | "allergen-nuts" | "allergen-celery" | "allergen-mustard" | "allergen-sesame" | "allergen-sulphites" | "allergen-lupin" | "allergen-molluscs" | null>;
|
|
952
|
+
/** Classes of the placeholder tile behind {@link fallbackIcon}: background and icon colour. */
|
|
953
|
+
readonly placeholderClass: _angular_core.InputSignal<string>;
|
|
954
|
+
/**
|
|
955
|
+
* The avatar repeats a name already visible beside it: `alt=""` and `aria-hidden`, so a screen reader
|
|
956
|
+
* does not read the name twice.
|
|
957
|
+
*/
|
|
958
|
+
readonly decorative: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
959
|
+
/** Native lazy loading for the image (default on — avatars are often in long lists). */
|
|
960
|
+
readonly lazy: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
961
|
+
/** The `src` that failed to load. Any other `src` is tried (so a new photo URL retries). */
|
|
962
|
+
protected readonly failedSrc: _angular_core.WritableSignal<string | null | undefined>;
|
|
963
|
+
protected readonly showImage: _angular_core.Signal<boolean>;
|
|
964
|
+
protected readonly shapeClass: _angular_core.Signal<string>;
|
|
965
|
+
protected readonly frameClass: _angular_core.Signal<string>;
|
|
966
|
+
protected readonly iconSize: _angular_core.Signal<number>;
|
|
826
967
|
protected readonly dotSize: _angular_core.Signal<number>;
|
|
827
968
|
protected readonly statusColor: _angular_core.Signal<string>;
|
|
828
969
|
protected readonly resolvedInitials: _angular_core.Signal<string>;
|
|
829
970
|
static ɵfac: _angular_core.ɵɵFactoryDeclaration<SdsAvatar, never>;
|
|
830
|
-
static ɵcmp: _angular_core.ɵɵComponentDeclaration<SdsAvatar, "sds-avatar", never, { "name": { "alias": "name"; "required": false; "isSignal": true; }; "initials": { "alias": "initials"; "required": false; "isSignal": true; }; "src": { "alias": "src"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "status": { "alias": "status"; "required": false; "isSignal": true; }; "bgClass": { "alias": "bgClass"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
|
|
971
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<SdsAvatar, "sds-avatar", never, { "name": { "alias": "name"; "required": false; "isSignal": true; }; "initials": { "alias": "initials"; "required": false; "isSignal": true; }; "src": { "alias": "src"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "status": { "alias": "status"; "required": false; "isSignal": true; }; "shape": { "alias": "shape"; "required": false; "isSignal": true; }; "bgClass": { "alias": "bgClass"; "required": false; "isSignal": true; }; "fallbackIcon": { "alias": "fallbackIcon"; "required": false; "isSignal": true; }; "placeholderClass": { "alias": "placeholderClass"; "required": false; "isSignal": true; }; "decorative": { "alias": "decorative"; "required": false; "isSignal": true; }; "lazy": { "alias": "lazy"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
|
|
831
972
|
}
|
|
832
973
|
|
|
833
974
|
type SdsBadgeVariant = 'neutral' | 'brand' | 'info' | 'success' | 'warning' | 'danger';
|
|
@@ -894,7 +1035,7 @@ declare class SdsAllergenIcon {
|
|
|
894
1035
|
readonly size: _angular_core.InputSignal<string | number>;
|
|
895
1036
|
/** Stroke width of the line icon. */
|
|
896
1037
|
readonly strokeWidth: _angular_core.InputSignal<number>;
|
|
897
|
-
protected readonly iconName: _angular_core.Signal<"menu" | "search" | "table" | "filter" | "
|
|
1038
|
+
protected readonly iconName: _angular_core.Signal<"upload" | "image" | "file-text" | "type" | "menu" | "search" | "table" | "filter" | "copy" | "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" | "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" | "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" | "image-off" | "utensils" | "zoom-in" | "zoom-out" | "trash-2" | "clock" | "pencil" | "circle-help" | "stock" | "allergen-cereals-gluten" | "allergen-crustaceans" | "allergen-eggs" | "allergen-fish" | "allergen-peanuts" | "allergen-soybeans" | "allergen-milk" | "allergen-nuts" | "allergen-celery" | "allergen-mustard" | "allergen-sesame" | "allergen-sulphites" | "allergen-lupin" | "allergen-molluscs" | null>;
|
|
898
1039
|
constructor();
|
|
899
1040
|
static ɵfac: _angular_core.ɵɵFactoryDeclaration<SdsAllergenIcon, never>;
|
|
900
1041
|
static ɵcmp: _angular_core.ɵɵComponentDeclaration<SdsAllergenIcon, "sds-allergen-icon", never, { "allergen": { "alias": "allergen"; "required": true; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "showTitle": { "alias": "showTitle"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "strokeWidth": { "alias": "strokeWidth"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
|
|
@@ -928,7 +1069,7 @@ declare class SdsTriStateChip {
|
|
|
928
1069
|
/** Visible name (e.g. the allergen). Required — the chip has no other accessible name. */
|
|
929
1070
|
readonly label: _angular_core.InputSignal<string>;
|
|
930
1071
|
/** Optional leading registry icon, e.g. an `allergen-*` pictogram. */
|
|
931
|
-
readonly icon: _angular_core.InputSignal<"menu" | "search" | "table" | "filter" | "
|
|
1072
|
+
readonly icon: _angular_core.InputSignal<"upload" | "image" | "file-text" | "type" | "menu" | "search" | "table" | "filter" | "copy" | "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" | "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" | "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" | "image-off" | "utensils" | "zoom-in" | "zoom-out" | "trash-2" | "clock" | "pencil" | "circle-help" | "stock" | "allergen-cereals-gluten" | "allergen-crustaceans" | "allergen-eggs" | "allergen-fish" | "allergen-peanuts" | "allergen-soybeans" | "allergen-milk" | "allergen-nuts" | "allergen-celery" | "allergen-mustard" | "allergen-sesame" | "allergen-sulphites" | "allergen-lupin" | "allergen-molluscs" | null>;
|
|
932
1073
|
readonly size: _angular_core.InputSignal<SdsTriStateChipSize>;
|
|
933
1074
|
readonly disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
934
1075
|
/** Show the state as a small visible caption under the label. */
|
|
@@ -1016,6 +1157,108 @@ declare class SdsSegmented {
|
|
|
1016
1157
|
static ɵcmp: _angular_core.ɵɵComponentDeclaration<SdsSegmented, "sds-segmented", never, { "options": { "alias": "options"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "ariaLabelledby": { "alias": "ariaLabelledby"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "fullWidth": { "alias": "fullWidth"; "required": false; "isSignal": true; }; "iconOnly": { "alias": "iconOnly"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; }, never, never, true, never>;
|
|
1017
1158
|
}
|
|
1018
1159
|
|
|
1160
|
+
type SdsChipSize = 'sm' | 'md';
|
|
1161
|
+
/** One chip of an `sds-chip-group`. A bare string/number is used as both value and label. */
|
|
1162
|
+
interface SdsChipOption<T = unknown> {
|
|
1163
|
+
value: T;
|
|
1164
|
+
label: string;
|
|
1165
|
+
icon?: SdsIconName;
|
|
1166
|
+
/** A small count after the label (e.g. the number of items a filter matches). */
|
|
1167
|
+
count?: number | null;
|
|
1168
|
+
disabled?: boolean;
|
|
1169
|
+
}
|
|
1170
|
+
interface NormChip {
|
|
1171
|
+
value: unknown;
|
|
1172
|
+
label: string;
|
|
1173
|
+
icon: SdsIconName | null;
|
|
1174
|
+
count: number | null;
|
|
1175
|
+
disabled: boolean;
|
|
1176
|
+
}
|
|
1177
|
+
/**
|
|
1178
|
+
* A single on/off filter chip (`aria-pressed`), e.g. "Sold out only" or "With comments". Two-way
|
|
1179
|
+
* `[(selected)]`. For a set of chips — one or several picked — use `sds-chip-group`.
|
|
1180
|
+
*
|
|
1181
|
+
* @example
|
|
1182
|
+
* <sds-chip label="Sold out only" icon="ban" [(selected)]="soldOutOnly" />
|
|
1183
|
+
*/
|
|
1184
|
+
declare class SdsChip {
|
|
1185
|
+
/** Visible text — also the chip's accessible name. */
|
|
1186
|
+
readonly label: _angular_core.InputSignal<string>;
|
|
1187
|
+
/** On/off. Two-way: `[(selected)]`. */
|
|
1188
|
+
readonly selected: _angular_core.ModelSignal<boolean>;
|
|
1189
|
+
readonly icon: _angular_core.InputSignal<"upload" | "image" | "file-text" | "type" | "menu" | "search" | "table" | "filter" | "copy" | "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" | "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" | "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" | "image-off" | "utensils" | "zoom-in" | "zoom-out" | "trash-2" | "clock" | "pencil" | "circle-help" | "stock" | "allergen-cereals-gluten" | "allergen-crustaceans" | "allergen-eggs" | "allergen-fish" | "allergen-peanuts" | "allergen-soybeans" | "allergen-milk" | "allergen-nuts" | "allergen-celery" | "allergen-mustard" | "allergen-sesame" | "allergen-sulphites" | "allergen-lupin" | "allergen-molluscs" | null>;
|
|
1190
|
+
readonly count: _angular_core.InputSignal<number | null | undefined>;
|
|
1191
|
+
readonly size: _angular_core.InputSignal<SdsChipSize>;
|
|
1192
|
+
readonly disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
1193
|
+
/** Replace the icon with a check while selected. */
|
|
1194
|
+
readonly showCheck: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
1195
|
+
protected readonly countClass = "inline-flex min-w-5 items-center justify-center rounded-full bg-ink/5 px-1.5 text-[11px] font-semibold tabular-nums dark:bg-white/10";
|
|
1196
|
+
protected readonly classes: _angular_core.Signal<string>;
|
|
1197
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<SdsChip, never>;
|
|
1198
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<SdsChip, "sds-chip", never, { "label": { "alias": "label"; "required": true; "isSignal": true; }; "selected": { "alias": "selected"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "count": { "alias": "count"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "showCheck": { "alias": "showCheck"; "required": false; "isSignal": true; }; }, { "selected": "selectedChange"; }, never, never, true, never>;
|
|
1199
|
+
}
|
|
1200
|
+
/**
|
|
1201
|
+
* A set of chips: pick ONE (a filter row such as "All · Missing photo · Hidden", VAT presets, a date
|
|
1202
|
+
* range) or, with `multiple`, SEVERAL (categories of an item, days of the week, dietary tags). Unlike
|
|
1203
|
+
* sds-segmented (a compact joined bar), chips wrap onto several lines and can carry a count.
|
|
1204
|
+
*
|
|
1205
|
+
* Value: two-way `[(value)]`, or a form control (`formControlName` / `[(ngModel)]` —
|
|
1206
|
+
* ControlValueAccessor). Single mode holds the picked value (or null); `multiple` holds an array, in the
|
|
1207
|
+
* order of the options.
|
|
1208
|
+
*
|
|
1209
|
+
* Accessibility: single mode is a `radiogroup` (one tab stop, arrows/Home/End move and select, like
|
|
1210
|
+
* native radios); `multiple` is a `group` of `aria-pressed` toggle buttons. Name it with [ariaLabel] or
|
|
1211
|
+
* [ariaLabelledby].
|
|
1212
|
+
*
|
|
1213
|
+
* @example
|
|
1214
|
+
* <sds-chip-group ariaLabel="Filter" [options]="filters()" [(value)]="issue" />
|
|
1215
|
+
* <!-- filters = [{ value: null, label: 'All', count: 34 }, { value: 'NO_PHOTO', label: 'Missing photo', count: 5 }] -->
|
|
1216
|
+
*
|
|
1217
|
+
* @example
|
|
1218
|
+
* <sds-chip-group ariaLabel="Categories" multiple [options]="categories()" formControlName="categoryIds" />
|
|
1219
|
+
*/
|
|
1220
|
+
declare class SdsChipGroup implements ControlValueAccessor {
|
|
1221
|
+
private readonly host;
|
|
1222
|
+
private readonly baseId;
|
|
1223
|
+
/** Options: `{ value, label, icon?, count?, disabled? }` objects, or bare strings/numbers. */
|
|
1224
|
+
readonly options: _angular_core.InputSignal<readonly (string | number | SdsChipOption<unknown>)[]>;
|
|
1225
|
+
/** Picked value (single) or values (multiple). Two-way: `[(value)]`. */
|
|
1226
|
+
readonly value: _angular_core.ModelSignal<unknown>;
|
|
1227
|
+
/** Allow several chips at once; the value becomes an array. */
|
|
1228
|
+
readonly multiple: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
1229
|
+
/** Single mode: clicking the picked chip again clears the value to null. */
|
|
1230
|
+
readonly deselectable: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
1231
|
+
readonly size: _angular_core.InputSignal<SdsChipSize>;
|
|
1232
|
+
readonly ariaLabel: _angular_core.InputSignal<string>;
|
|
1233
|
+
readonly ariaLabelledby: _angular_core.InputSignal<string>;
|
|
1234
|
+
readonly disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
1235
|
+
/** Wrap onto several lines (default) or scroll horizontally on one line. */
|
|
1236
|
+
readonly wrap: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
1237
|
+
/** `multiple`: a check replaces the icon on picked chips. */
|
|
1238
|
+
readonly showCheck: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
1239
|
+
protected readonly countClass = "inline-flex min-w-5 items-center justify-center rounded-full bg-ink/5 px-1.5 text-[11px] font-semibold tabular-nums dark:bg-white/10";
|
|
1240
|
+
private readonly cvaDisabled;
|
|
1241
|
+
protected readonly isDisabled: _angular_core.Signal<boolean>;
|
|
1242
|
+
protected readonly chips: _angular_core.Signal<NormChip[]>;
|
|
1243
|
+
private readonly selectedValues;
|
|
1244
|
+
/** Single mode's roving tab stop: the picked chip, else the first enabled one. */
|
|
1245
|
+
protected readonly tabStop: _angular_core.Signal<number>;
|
|
1246
|
+
protected isSelected(chip: NormChip): boolean;
|
|
1247
|
+
protected chipId(i: number): string;
|
|
1248
|
+
protected classFor(chip: NormChip): string;
|
|
1249
|
+
protected toggle(i: number): void;
|
|
1250
|
+
protected onKeydown(event: KeyboardEvent): void;
|
|
1251
|
+
private step;
|
|
1252
|
+
private onChange;
|
|
1253
|
+
protected onTouched: () => void;
|
|
1254
|
+
writeValue(value: unknown): void;
|
|
1255
|
+
registerOnChange(fn: (value: unknown) => void): void;
|
|
1256
|
+
registerOnTouched(fn: () => void): void;
|
|
1257
|
+
setDisabledState(isDisabled: boolean): void;
|
|
1258
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<SdsChipGroup, never>;
|
|
1259
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<SdsChipGroup, "sds-chip-group", never, { "options": { "alias": "options"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "multiple": { "alias": "multiple"; "required": false; "isSignal": true; }; "deselectable": { "alias": "deselectable"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "ariaLabelledby": { "alias": "ariaLabelledby"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "wrap": { "alias": "wrap"; "required": false; "isSignal": true; }; "showCheck": { "alias": "showCheck"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; }, never, never, true, never>;
|
|
1260
|
+
}
|
|
1261
|
+
|
|
1019
1262
|
/** Severity of a checklist row. `blocker` stops customers, `warning` costs sales, `info` is polish. */
|
|
1020
1263
|
type SdsChecklistStatus = 'done' | 'warning' | 'blocker' | 'info';
|
|
1021
1264
|
interface StatusStyle {
|
|
@@ -1253,7 +1496,7 @@ declare class SdsMenu implements OnDestroy {
|
|
|
1253
1496
|
/** Accessible name of the built-in icon trigger (required when there is no [triggerText]). */
|
|
1254
1497
|
readonly triggerLabel: _angular_core.InputSignal<string>;
|
|
1255
1498
|
/** Icon of the built-in trigger. */
|
|
1256
|
-
readonly triggerIcon: _angular_core.InputSignal<"menu" | "search" | "table" | "filter" | "
|
|
1499
|
+
readonly triggerIcon: _angular_core.InputSignal<"upload" | "image" | "file-text" | "type" | "menu" | "search" | "table" | "filter" | "copy" | "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" | "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" | "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" | "image-off" | "utensils" | "zoom-in" | "zoom-out" | "trash-2" | "clock" | "pencil" | "circle-help" | "stock" | "allergen-cereals-gluten" | "allergen-crustaceans" | "allergen-eggs" | "allergen-fish" | "allergen-peanuts" | "allergen-soybeans" | "allergen-milk" | "allergen-nuts" | "allergen-celery" | "allergen-mustard" | "allergen-sesame" | "allergen-sulphites" | "allergen-lupin" | "allergen-molluscs">;
|
|
1257
1500
|
/** Optional visible text on the built-in trigger (then it is its name). */
|
|
1258
1501
|
readonly triggerText: _angular_core.InputSignal<string>;
|
|
1259
1502
|
/** Accessible name of the menu itself; defaults to the trigger's name. */
|
|
@@ -1529,6 +1772,7 @@ interface SdsFileRejection {
|
|
|
1529
1772
|
/** The rendered, human-readable message (from the matching *Message input). */
|
|
1530
1773
|
message: string;
|
|
1531
1774
|
}
|
|
1775
|
+
type SdsFileDropAppearance = 'zone' | 'button';
|
|
1532
1776
|
/** "1.5 MB" style size (decimal units, like file managers show them), for messages. */
|
|
1533
1777
|
declare function sdsFormatBytes(bytes: number): string;
|
|
1534
1778
|
/** Does `file` match an `accept` string (".jpg,image/png,image/*")? Empty accepts everything. */
|
|
@@ -1543,6 +1787,10 @@ declare function sdsFileMatchesAccept(file: File, accept: string): boolean;
|
|
|
1543
1787
|
* affordance); clicking anywhere on the zone opens the picker too. All text is set through inputs with
|
|
1544
1788
|
* English defaults.
|
|
1545
1789
|
*
|
|
1790
|
+
* `appearance="button"` drops the zone and renders only the Browse button (files can still be dropped
|
|
1791
|
+
* on it) — for a "Replace photo" / "Upload logo" / "Add document" action next to a preview, with the
|
|
1792
|
+
* same accept/size/count checks and error messages. `browse()` opens the picker from your own control.
|
|
1793
|
+
*
|
|
1546
1794
|
* @example
|
|
1547
1795
|
* <sds-file-drop accept="image/jpeg,image/png,image/webp" multiple [maxSize]="10_000_000"
|
|
1548
1796
|
* label="Drop photos here" browseLabel="Choose photos"
|
|
@@ -1560,7 +1808,11 @@ declare class SdsFileDrop {
|
|
|
1560
1808
|
readonly maxFiles: _angular_core.InputSignal<number | null>;
|
|
1561
1809
|
readonly disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
1562
1810
|
/** Icon in the zone at rest. */
|
|
1563
|
-
readonly icon: _angular_core.InputSignal<"
|
|
1811
|
+
readonly icon: _angular_core.InputSignal<"upload" | "image" | "file-text">;
|
|
1812
|
+
/** `zone` (default): the dashed drop zone with a Browse button. `button`: the Browse button alone. */
|
|
1813
|
+
readonly appearance: _angular_core.InputSignal<SdsFileDropAppearance>;
|
|
1814
|
+
/** `button` appearance: size of the button. */
|
|
1815
|
+
readonly size: _angular_core.InputSignal<"sm" | "md">;
|
|
1564
1816
|
readonly label: _angular_core.InputSignal<string>;
|
|
1565
1817
|
/** Shown while files are dragged over the zone. */
|
|
1566
1818
|
readonly dropLabel: _angular_core.InputSignal<string>;
|
|
@@ -1582,6 +1834,7 @@ declare class SdsFileDrop {
|
|
|
1582
1834
|
private dragDepth;
|
|
1583
1835
|
protected readonly describedBy: _angular_core.Signal<string>;
|
|
1584
1836
|
protected readonly zoneClass: _angular_core.Signal<"flex flex-col items-center justify-center gap-2 rounded-card border-2 border-dashed px-6 py-8 text-center transition-colors cursor-not-allowed border-border bg-muted opacity-60" | "flex flex-col items-center justify-center gap-2 rounded-card border-2 border-dashed px-6 py-8 text-center transition-colors cursor-copy border-brand-500 bg-brand-50 dark:bg-muted" | "flex flex-col items-center justify-center gap-2 rounded-card border-2 border-dashed px-6 py-8 text-center transition-colors cursor-pointer border-border bg-muted/50 hover:border-ink-faint">;
|
|
1837
|
+
protected readonly buttonClass: _angular_core.Signal<string>;
|
|
1585
1838
|
/** Open the native file picker. */
|
|
1586
1839
|
browse(event?: Event): void;
|
|
1587
1840
|
protected onZoneClick(event: MouseEvent): void;
|
|
@@ -1596,7 +1849,7 @@ declare class SdsFileDrop {
|
|
|
1596
1849
|
/** Clear the error messages under the zone. */
|
|
1597
1850
|
clearErrors(): void;
|
|
1598
1851
|
static ɵfac: _angular_core.ɵɵFactoryDeclaration<SdsFileDrop, never>;
|
|
1599
|
-
static ɵcmp: _angular_core.ɵɵComponentDeclaration<SdsFileDrop, "sds-file-drop", never, { "accept": { "alias": "accept"; "required": false; "isSignal": true; }; "multiple": { "alias": "multiple"; "required": false; "isSignal": true; }; "maxSize": { "alias": "maxSize"; "required": false; "isSignal": true; }; "maxFiles": { "alias": "maxFiles"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "dropLabel": { "alias": "dropLabel"; "required": false; "isSignal": true; }; "browseLabel": { "alias": "browseLabel"; "required": false; "isSignal": true; }; "hint": { "alias": "hint"; "required": false; "isSignal": true; }; "wrongTypeMessage": { "alias": "wrongTypeMessage"; "required": false; "isSignal": true; }; "tooLargeMessage": { "alias": "tooLargeMessage"; "required": false; "isSignal": true; }; "tooManyMessage": { "alias": "tooManyMessage"; "required": false; "isSignal": true; }; }, { "files": "files"; "rejected": "rejected"; }, never, never, true, never>;
|
|
1852
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<SdsFileDrop, "sds-file-drop", never, { "accept": { "alias": "accept"; "required": false; "isSignal": true; }; "multiple": { "alias": "multiple"; "required": false; "isSignal": true; }; "maxSize": { "alias": "maxSize"; "required": false; "isSignal": true; }; "maxFiles": { "alias": "maxFiles"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "appearance": { "alias": "appearance"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "dropLabel": { "alias": "dropLabel"; "required": false; "isSignal": true; }; "browseLabel": { "alias": "browseLabel"; "required": false; "isSignal": true; }; "hint": { "alias": "hint"; "required": false; "isSignal": true; }; "wrongTypeMessage": { "alias": "wrongTypeMessage"; "required": false; "isSignal": true; }; "tooLargeMessage": { "alias": "tooLargeMessage"; "required": false; "isSignal": true; }; "tooManyMessage": { "alias": "tooManyMessage"; "required": false; "isSignal": true; }; }, { "files": "files"; "rejected": "rejected"; }, never, never, true, never>;
|
|
1600
1853
|
}
|
|
1601
1854
|
|
|
1602
1855
|
/** A crop rectangle in the SOURCE image's natural pixels. */
|
|
@@ -2672,15 +2925,25 @@ declare class SdsTabsStore {
|
|
|
2672
2925
|
readonly id: string;
|
|
2673
2926
|
/** Whether the tab list scrolls horizontally (mirrors [scrollable]). */
|
|
2674
2927
|
readonly scrollable: WritableSignal<boolean>;
|
|
2928
|
+
/** Controlled mode (mirrors [controlled]): a click only REQUESTS a tab, the host sets [value]. */
|
|
2929
|
+
readonly controlled: WritableSignal<boolean>;
|
|
2930
|
+
/** Called with every tab the user picks (wired to the host's (tabSelect) output). */
|
|
2931
|
+
onSelect: (value: SdsTabValue) => void;
|
|
2675
2932
|
private value;
|
|
2676
2933
|
private readonly registered;
|
|
2934
|
+
private readonly panels;
|
|
2677
2935
|
/** Called once by <sds-tabs> to share its two-way `value` signal. */
|
|
2678
2936
|
connect(value: WritableSignal<SdsTabValue>): void;
|
|
2679
2937
|
activeValue(): SdsTabValue;
|
|
2680
2938
|
isActive(value: SdsTabValue): boolean;
|
|
2939
|
+
/** A user pick. Uncontrolled: becomes the active tab. Controlled: only reported to the host. */
|
|
2681
2940
|
select(value: SdsTabValue): void;
|
|
2682
2941
|
registerTab(value: SdsTabValue): void;
|
|
2683
2942
|
unregisterTab(value: SdsTabValue): void;
|
|
2943
|
+
registerPanel(value: SdsTabValue): void;
|
|
2944
|
+
unregisterPanel(value: SdsTabValue): void;
|
|
2945
|
+
/** Whether an <sds-tab-panel> exists for this value (tabs whose content lives elsewhere have none). */
|
|
2946
|
+
hasPanel(value: SdsTabValue): boolean;
|
|
2684
2947
|
tabId(value: SdsTabValue): string;
|
|
2685
2948
|
panelId(value: SdsTabValue): string;
|
|
2686
2949
|
static ɵfac: _angular_core.ɵɵFactoryDeclaration<SdsTabsStore, never>;
|
|
@@ -2693,6 +2956,14 @@ declare class SdsTabsStore {
|
|
|
2693
2956
|
* <sds-tab-panel> [value]; it is two-way bindable via [(value)]. When omitted,
|
|
2694
2957
|
* the first registered tab is selected.
|
|
2695
2958
|
*
|
|
2959
|
+
* **Controlled tabs** (`controlled`): a click, arrow key or Home/End only emits `(tabSelect)`; the active
|
|
2960
|
+
* tab changes when the host changes `[value]`. Use it when the active tab lives somewhere else — a
|
|
2961
|
+
* `?tab=` query param — or when switching can be refused (an unsaved-changes guard): the tab never
|
|
2962
|
+
* shows as selected before the host agrees. `(tabSelect)` also fires in the default mode.
|
|
2963
|
+
*
|
|
2964
|
+
* **Panels are optional.** A tab set whose content is rendered by the host (an `@switch` on the value, a
|
|
2965
|
+
* router outlet) can omit <sds-tab-panels>; a tab then carries no `aria-controls` to a missing panel.
|
|
2966
|
+
*
|
|
2696
2967
|
* @example
|
|
2697
2968
|
* <sds-tabs [(value)]="active">
|
|
2698
2969
|
* <sds-tab-list>
|
|
@@ -2704,6 +2975,16 @@ declare class SdsTabsStore {
|
|
|
2704
2975
|
* <sds-tab-panel value="1">…</sds-tab-panel>
|
|
2705
2976
|
* </sds-tab-panels>
|
|
2706
2977
|
* </sds-tabs>
|
|
2978
|
+
*
|
|
2979
|
+
* @example
|
|
2980
|
+
* <!-- driven by a query param, content rendered by the host -->
|
|
2981
|
+
* <sds-tabs controlled [value]="activeTab()" (tabSelect)="selectTab($event)">
|
|
2982
|
+
* <sds-tab-list>
|
|
2983
|
+
* @for (tab of tabs; track tab) {
|
|
2984
|
+
* <sds-tab [value]="tab">{{ 'menu.tabs.' + tab | translate }}</sds-tab>
|
|
2985
|
+
* }
|
|
2986
|
+
* </sds-tab-list>
|
|
2987
|
+
* </sds-tabs>
|
|
2707
2988
|
*/
|
|
2708
2989
|
declare class SdsTabs {
|
|
2709
2990
|
private readonly store;
|
|
@@ -2711,9 +2992,16 @@ declare class SdsTabs {
|
|
|
2711
2992
|
readonly value: _angular_core.ModelSignal<SdsTabValue>;
|
|
2712
2993
|
/** Let the tab list scroll horizontally instead of overflowing. */
|
|
2713
2994
|
readonly scrollable: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
2995
|
+
/**
|
|
2996
|
+
* Controlled mode: a user pick only emits (tabSelect); the host decides by setting [value]. See the
|
|
2997
|
+
* class note.
|
|
2998
|
+
*/
|
|
2999
|
+
readonly controlled: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
3000
|
+
/** Emits the value of the tab the user picked (in both modes). */
|
|
3001
|
+
readonly tabSelect: _angular_core.OutputEmitterRef<SdsTabValue>;
|
|
2714
3002
|
constructor();
|
|
2715
3003
|
static ɵfac: _angular_core.ɵɵFactoryDeclaration<SdsTabs, never>;
|
|
2716
|
-
static ɵcmp: _angular_core.ɵɵComponentDeclaration<SdsTabs, "sds-tabs", never, { "value": { "alias": "value"; "required": false; "isSignal": true; }; "scrollable": { "alias": "scrollable"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; }, never, ["*"], true, never>;
|
|
3004
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<SdsTabs, "sds-tabs", never, { "value": { "alias": "value"; "required": false; "isSignal": true; }; "scrollable": { "alias": "scrollable"; "required": false; "isSignal": true; }; "controlled": { "alias": "controlled"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "tabSelect": "tabSelect"; }, never, ["*"], true, never>;
|
|
2717
3005
|
}
|
|
2718
3006
|
|
|
2719
3007
|
/**
|
|
@@ -2758,10 +3046,12 @@ declare class SdsTabPanels {
|
|
|
2758
3046
|
* the active tab. Inactive panels are not rendered (their content is created
|
|
2759
3047
|
* on activation), so panel state does not persist across switches.
|
|
2760
3048
|
*/
|
|
2761
|
-
declare class SdsTabPanel {
|
|
3049
|
+
declare class SdsTabPanel implements OnInit, OnDestroy {
|
|
2762
3050
|
protected readonly store: SdsTabsStore;
|
|
2763
3051
|
readonly value: _angular_core.InputSignal<SdsTabValue>;
|
|
2764
3052
|
protected readonly active: _angular_core.Signal<boolean>;
|
|
3053
|
+
ngOnInit(): void;
|
|
3054
|
+
ngOnDestroy(): void;
|
|
2765
3055
|
static ɵfac: _angular_core.ɵɵFactoryDeclaration<SdsTabPanel, never>;
|
|
2766
3056
|
static ɵcmp: _angular_core.ɵɵComponentDeclaration<SdsTabPanel, "sds-tab-panel", never, { "value": { "alias": "value"; "required": true; "isSignal": true; }; }, {}, never, ["*"], true, never>;
|
|
2767
3057
|
}
|
|
@@ -2999,6 +3289,11 @@ type SdsSelectionMode = 'single' | 'multiple' | null;
|
|
|
2999
3289
|
* - **Custom headers:** `<ng-template sdsHeader="field">` replaces a column's header content (label and
|
|
3000
3290
|
* sort button) — e.g. a "select all" checkbox above your own checkbox column. Its context carries the
|
|
3001
3291
|
* filtered `rows` (all pages) and the displayed `pageRows` (see {@link SdsTableHeaderContext}).
|
|
3292
|
+
* - **Clickable rows:** `rowClickable` makes each row an action (pointer, tab stop, Enter/Space) that
|
|
3293
|
+
* emits `(rowClick)`; clicks on buttons, links and fields inside a cell are not row clicks, so no
|
|
3294
|
+
* `stopPropagation()` is needed. `[rowClass]` adds per-row classes (e.g. dim a blocked row).
|
|
3295
|
+
* - **Empty state:** `<ng-template sdsTableEmpty let-query>` replaces the plain `emptyMessage` (e.g. a
|
|
3296
|
+
* sentence and a "create" button); it is not shown while `loading`.
|
|
3002
3297
|
* - **Labels:** every visible and spoken string is an input with an English default (paginator,
|
|
3003
3298
|
* filter, selection, expansion, editor). An app serving more than one language passes translations.
|
|
3004
3299
|
*
|
|
@@ -3069,6 +3364,14 @@ declare class SdsTable implements OnDestroy {
|
|
|
3069
3364
|
readonly selection: _angular_core.ModelSignal<any>;
|
|
3070
3365
|
readonly loading: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
3071
3366
|
readonly emptyMessage: _angular_core.InputSignal<string>;
|
|
3367
|
+
/**
|
|
3368
|
+
* Rows are actions: a pointer cursor, a tab stop per row, and Enter/Space emit `(rowClick)` like a
|
|
3369
|
+
* click. Clicks that land on a control inside a cell (button, link, input, checkbox…) do not count as
|
|
3370
|
+
* a row click, so a row can open a drawer while its cells keep their own buttons.
|
|
3371
|
+
*/
|
|
3372
|
+
readonly rowClickable: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
3373
|
+
/** Extra classes per body row, e.g. `(row) => row.blocked ? 'opacity-60' : ''`. */
|
|
3374
|
+
readonly rowClass: _angular_core.InputSignal<((row: any, index: number) => string | null | undefined) | null>;
|
|
3072
3375
|
readonly caption: _angular_core.InputSignal<string>;
|
|
3073
3376
|
/** Fallback accessible name for the `<table>` when no `caption` is set. */
|
|
3074
3377
|
readonly ariaLabel: _angular_core.InputSignal<string>;
|
|
@@ -3135,6 +3438,8 @@ declare class SdsTable implements OnDestroy {
|
|
|
3135
3438
|
protected headerContext(column: SdsTableColumn, index: number): SdsTableHeaderContext;
|
|
3136
3439
|
private readonly rowExpansion;
|
|
3137
3440
|
protected expansionTemplate(): _angular_core.TemplateRef<_besaitech_ng_design_system.SdsTableRowExpansionContext> | null;
|
|
3441
|
+
private readonly emptyTpl;
|
|
3442
|
+
protected emptyTemplate(): _angular_core.TemplateRef<_besaitech_ng_design_system.SdsTableEmptyContext> | null;
|
|
3138
3443
|
protected readonly filterText: _angular_core.WritableSignal<string>;
|
|
3139
3444
|
protected readonly sortField: _angular_core.WritableSignal<string | null>;
|
|
3140
3445
|
protected readonly sortOrder: _angular_core.WritableSignal<SdsSortOrder>;
|
|
@@ -3180,10 +3485,12 @@ declare class SdsTable implements OnDestroy {
|
|
|
3180
3485
|
protected readonly headerIndeterminate: _angular_core.Signal<boolean>;
|
|
3181
3486
|
protected toggleAll(): void;
|
|
3182
3487
|
protected onRowCheckboxClick(event: Event, row: any): void;
|
|
3183
|
-
/** Enter/Space on a (single
|
|
3488
|
+
/** Enter/Space on a focusable row (single selection or `rowClickable`) acts like a click on it. */
|
|
3184
3489
|
protected onRowKeydown(event: Event, row: any): void;
|
|
3185
3490
|
private toggleRowSelection;
|
|
3186
|
-
protected onRowClick(row: any): void;
|
|
3491
|
+
protected onRowClick(row: any, event?: Event): void;
|
|
3492
|
+
/** Whether a click started on an interactive element inside the row (not on the row itself). */
|
|
3493
|
+
private fromInnerControl;
|
|
3187
3494
|
protected onPageChange(state: SdsPaginatorState): void;
|
|
3188
3495
|
private emitLazy;
|
|
3189
3496
|
protected onFilterInput(event: Event): void;
|
|
@@ -3264,10 +3571,10 @@ declare class SdsTable implements OnDestroy {
|
|
|
3264
3571
|
protected onGridKeydown(event: KeyboardEvent): void;
|
|
3265
3572
|
protected headCellClass(col?: SdsTableColumn): string;
|
|
3266
3573
|
protected cellClass(col?: SdsTableColumn): string;
|
|
3267
|
-
protected
|
|
3574
|
+
protected bodyRowClass(row: any, index: number): string;
|
|
3268
3575
|
protected checkboxClass(checked: boolean, indeterminate: boolean): string;
|
|
3269
3576
|
static ɵfac: _angular_core.ɵɵFactoryDeclaration<SdsTable, 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>;
|
|
3577
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<SdsTable, "sds-table", never, { "value": { "alias": "value"; "required": false; "isSignal": true; }; "columns": { "alias": "columns"; "required": false; "isSignal": true; }; "dataKey": { "alias": "dataKey"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "striped": { "alias": "striped"; "required": false; "isSignal": true; }; "gridlines": { "alias": "gridlines"; "required": false; "isSignal": true; }; "hoverable": { "alias": "hoverable"; "required": false; "isSignal": true; }; "sortable": { "alias": "sortable"; "required": false; "isSignal": true; }; "paginator": { "alias": "paginator"; "required": false; "isSignal": true; }; "rows": { "alias": "rows"; "required": false; "isSignal": true; }; "rowsPerPageOptions": { "alias": "rowsPerPageOptions"; "required": false; "isSignal": true; }; "showCurrentPageReport": { "alias": "showCurrentPageReport"; "required": false; "isSignal": true; }; "currentPageReportTemplate": { "alias": "currentPageReportTemplate"; "required": false; "isSignal": true; }; "rowsPerPageLabel": { "alias": "rowsPerPageLabel"; "required": false; "isSignal": true; }; "paginationLabel": { "alias": "paginationLabel"; "required": false; "isSignal": true; }; "firstPageLabel": { "alias": "firstPageLabel"; "required": false; "isSignal": true; }; "previousPageLabel": { "alias": "previousPageLabel"; "required": false; "isSignal": true; }; "nextPageLabel": { "alias": "nextPageLabel"; "required": false; "isSignal": true; }; "lastPageLabel": { "alias": "lastPageLabel"; "required": false; "isSignal": true; }; "pageLinkLabel": { "alias": "pageLinkLabel"; "required": false; "isSignal": true; }; "globalFilter": { "alias": "globalFilter"; "required": false; "isSignal": true; }; "globalFilterPlaceholder": { "alias": "globalFilterPlaceholder"; "required": false; "isSignal": true; }; "globalFilterAriaLabel": { "alias": "globalFilterAriaLabel"; "required": false; "isSignal": true; }; "globalFilterFields": { "alias": "globalFilterFields"; "required": false; "isSignal": true; }; "selectionMode": { "alias": "selectionMode"; "required": false; "isSignal": true; }; "selection": { "alias": "selection"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "emptyMessage": { "alias": "emptyMessage"; "required": false; "isSignal": true; }; "rowClickable": { "alias": "rowClickable"; "required": false; "isSignal": true; }; "rowClass": { "alias": "rowClass"; "required": false; "isSignal": true; }; "caption": { "alias": "caption"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "scrollHeight": { "alias": "scrollHeight"; "required": false; "isSignal": true; }; "lazy": { "alias": "lazy"; "required": false; "isSignal": true; }; "totalRecords": { "alias": "totalRecords"; "required": false; "isSignal": true; }; "expandable": { "alias": "expandable"; "required": false; "isSignal": true; }; "resizableColumns": { "alias": "resizableColumns"; "required": false; "isSignal": true; }; "reorderableColumns": { "alias": "reorderableColumns"; "required": false; "isSignal": true; }; "editable": { "alias": "editable"; "required": false; "isSignal": true; }; "editOn": { "alias": "editOn"; "required": false; "isSignal": true; }; "cellErrors": { "alias": "cellErrors"; "required": false; "isSignal": true; }; "locale": { "alias": "locale"; "required": false; "isSignal": true; }; "dirtyLabel": { "alias": "dirtyLabel"; "required": false; "isSignal": true; }; "selectPlaceholder": { "alias": "selectPlaceholder"; "required": false; "isSignal": true; }; "selectAllLabel": { "alias": "selectAllLabel"; "required": false; "isSignal": true; }; "selectRowLabel": { "alias": "selectRowLabel"; "required": false; "isSignal": true; }; "selectionColumnLabel": { "alias": "selectionColumnLabel"; "required": false; "isSignal": true; }; "expandColumnLabel": { "alias": "expandColumnLabel"; "required": false; "isSignal": true; }; "expandRowLabel": { "alias": "expandRowLabel"; "required": false; "isSignal": true; }; "collapseRowLabel": { "alias": "collapseRowLabel"; "required": false; "isSignal": true; }; }, { "selection": "selectionChange"; "sortChange": "sortChange"; "pageChange": "pageChange"; "rowSelect": "rowSelect"; "rowUnselect": "rowUnselect"; "lazyLoad": "lazyLoad"; "rowClick": "rowClick"; "rowExpand": "rowExpand"; "rowCollapse": "rowCollapse"; "colReorder": "colReorder"; "cellCommit": "cellCommit"; }, ["cellTemplates", "headerTemplates", "rowExpansion", "emptyTpl"], never, true, never>;
|
|
3271
3578
|
}
|
|
3272
3579
|
|
|
3273
3580
|
/**
|
|
@@ -3342,6 +3649,34 @@ declare class SdsTableRowExpansion {
|
|
|
3342
3649
|
static ɵdir: _angular_core.ɵɵDirectiveDeclaration<SdsTableRowExpansion, "ng-template[sdsRowExpansion]", never, {}, {}, never, never, true, never>;
|
|
3343
3650
|
}
|
|
3344
3651
|
|
|
3652
|
+
/** Context handed to a table's empty-state template. */
|
|
3653
|
+
interface SdsTableEmptyContext {
|
|
3654
|
+
/** Same as {@link filterText} — enables the implicit `let-query` binding. */
|
|
3655
|
+
$implicit: string;
|
|
3656
|
+
/** The current global-filter text ('' without a filter). */
|
|
3657
|
+
filterText: string;
|
|
3658
|
+
}
|
|
3659
|
+
/**
|
|
3660
|
+
* Replaces the table's plain `emptyMessage` with rich content — an explanation and a call to action,
|
|
3661
|
+
* a "no results for …" line. Rendered in the full-width empty row, only when not `loading`.
|
|
3662
|
+
*
|
|
3663
|
+
* @example
|
|
3664
|
+
* <sds-table [value]="categories()" [columns]="cols">
|
|
3665
|
+
* <ng-template sdsTableEmpty>
|
|
3666
|
+
* <p>No categories yet.</p>
|
|
3667
|
+
* <sds-button size="sm" (click)="create()">Add a category</sds-button>
|
|
3668
|
+
* </ng-template>
|
|
3669
|
+
* </sds-table>
|
|
3670
|
+
*/
|
|
3671
|
+
declare class SdsTableEmpty {
|
|
3672
|
+
/** The wrapped template, rendered by the host table via ngTemplateOutlet. */
|
|
3673
|
+
readonly template: TemplateRef<SdsTableEmptyContext>;
|
|
3674
|
+
/** Lets the compiler type-check `let-*` bindings against SdsTableEmptyContext. */
|
|
3675
|
+
static ngTemplateContextGuard(_dir: SdsTableEmpty, _ctx: unknown): _ctx is SdsTableEmptyContext;
|
|
3676
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<SdsTableEmpty, never>;
|
|
3677
|
+
static ɵdir: _angular_core.ɵɵDirectiveDeclaration<SdsTableEmpty, "ng-template[sdsTableEmpty]", never, {}, {}, never, never, true, never>;
|
|
3678
|
+
}
|
|
3679
|
+
|
|
3345
3680
|
type SdsToastKind = 'success' | 'error' | 'info';
|
|
3346
3681
|
interface SdsToast {
|
|
3347
3682
|
id: number;
|
|
@@ -3685,7 +4020,7 @@ declare class SdsNavGroup {
|
|
|
3685
4020
|
/** Turn the label into an expand/collapse control. */
|
|
3686
4021
|
readonly collapsible: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
3687
4022
|
/** Icon for a collapsible header, so it reads at the same weight as the items it sits among. */
|
|
3688
|
-
readonly icon: _angular_core.InputSignal<"menu" | "search" | "table" | "filter" | "
|
|
4023
|
+
readonly icon: _angular_core.InputSignal<"upload" | "image" | "file-text" | "type" | "menu" | "search" | "table" | "filter" | "copy" | "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" | "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" | "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" | "image-off" | "utensils" | "zoom-in" | "zoom-out" | "trash-2" | "clock" | "pencil" | "circle-help" | "stock" | "allergen-cereals-gluten" | "allergen-crustaceans" | "allergen-eggs" | "allergen-fish" | "allergen-peanuts" | "allergen-soybeans" | "allergen-milk" | "allergen-nuts" | "allergen-celery" | "allergen-mustard" | "allergen-sesame" | "allergen-sulphites" | "allergen-lupin" | "allergen-molluscs" | null>;
|
|
3689
4024
|
/**
|
|
3690
4025
|
* URL prefix owned by this group, e.g. `/payments`. While the active route starts with it the
|
|
3691
4026
|
* group counts as active and opens itself — unless the person has explicitly toggled it since.
|
|
@@ -3750,7 +4085,7 @@ type SdsNavItemBadgeTone = 'brand' | 'danger' | 'neutral';
|
|
|
3750
4085
|
*/
|
|
3751
4086
|
declare class SdsNavItem {
|
|
3752
4087
|
protected readonly store: SidebarStore;
|
|
3753
|
-
readonly icon: _angular_core.InputSignal<"menu" | "search" | "table" | "filter" | "
|
|
4088
|
+
readonly icon: _angular_core.InputSignal<"upload" | "image" | "file-text" | "type" | "menu" | "search" | "table" | "filter" | "copy" | "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" | "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" | "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" | "image-off" | "utensils" | "zoom-in" | "zoom-out" | "trash-2" | "clock" | "pencil" | "circle-help" | "stock" | "allergen-cereals-gluten" | "allergen-crustaceans" | "allergen-eggs" | "allergen-fish" | "allergen-peanuts" | "allergen-soybeans" | "allergen-milk" | "allergen-nuts" | "allergen-celery" | "allergen-mustard" | "allergen-sesame" | "allergen-sulphites" | "allergen-lupin" | "allergen-molluscs" | null>;
|
|
3754
4089
|
readonly label: _angular_core.InputSignal<string>;
|
|
3755
4090
|
/** Router link target; when null, the item behaves as a button. */
|
|
3756
4091
|
readonly link: _angular_core.InputSignal<string | unknown[] | null>;
|
|
@@ -3866,7 +4201,7 @@ type SdsMenuItemTone = 'default' | 'danger';
|
|
|
3866
4201
|
* <sds-menu-item icon="log-out" label="Sign out" tone="danger" (select)="signOut()" />
|
|
3867
4202
|
*/
|
|
3868
4203
|
declare class SdsMenuItem {
|
|
3869
|
-
readonly icon: _angular_core.InputSignal<"menu" | "search" | "table" | "filter" | "
|
|
4204
|
+
readonly icon: _angular_core.InputSignal<"upload" | "image" | "file-text" | "type" | "menu" | "search" | "table" | "filter" | "copy" | "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" | "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" | "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" | "image-off" | "utensils" | "zoom-in" | "zoom-out" | "trash-2" | "clock" | "pencil" | "circle-help" | "stock" | "allergen-cereals-gluten" | "allergen-crustaceans" | "allergen-eggs" | "allergen-fish" | "allergen-peanuts" | "allergen-soybeans" | "allergen-milk" | "allergen-nuts" | "allergen-celery" | "allergen-mustard" | "allergen-sesame" | "allergen-sulphites" | "allergen-lupin" | "allergen-molluscs" | null>;
|
|
3870
4205
|
readonly label: _angular_core.InputSignal<string>;
|
|
3871
4206
|
/** Router link target for an in-app route; when null (default) the item is not a Router link. */
|
|
3872
4207
|
readonly link: _angular_core.InputSignal<string | unknown[] | null>;
|
|
@@ -4091,5 +4426,5 @@ declare class SdsLanguageSwitcher implements OnDestroy {
|
|
|
4091
4426
|
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>;
|
|
4092
4427
|
}
|
|
4093
4428
|
|
|
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 };
|
|
4429
|
+
export { SDS_ALLERGENS, SDS_ALLERGEN_ICONS, SDS_ALLERGEN_LABELS_EN, SDS_ICONS, SDS_PHONE_COUNTRIES, SdsAccordion, SdsAccordionContent, SdsAccordionHeader, SdsAccordionPanel, SdsAccordionStore, SdsAllergenIcon, SdsAvatar, SdsBadge, SdsBulkBar, SdsButton, SdsCalendar, SdsCard, SdsCheckbox, SdsChecklistRow, SdsChip, SdsChipGroup, SdsDatePicker, SdsFileDrop, SdsIcon, SdsImageCropper, SdsInput, SdsInputNumber, SdsLanguageSwitcher, SdsLocalizedInput, SdsMenu, SdsMenuItem, SdsMenuTrigger, SdsMultiSelect, SdsNavGroup, SdsNavItem, SdsOtpInput, SdsPaginator, SdsPhoneInput, SdsRadio, SdsScore, SdsSearchCommand, SdsSegmented, SdsSelect, SdsSelectEmpty, SdsSelectFooter, SdsSelectOption, SdsShell, SdsSidebar, SdsSortableHandle, SdsSortableItem, SdsSortableList, SdsStatusTile, SdsTab, SdsTabList, SdsTabPanel, SdsTabPanels, SdsTable, SdsTableCell, SdsTableEmpty, SdsTableHeader, SdsTableRowExpansion, SdsTabs, SdsTabsStore, SdsTextarea, SdsThemeService, SdsThemeToggle, SdsTimeInput, SdsToastHost, SdsToastService, SdsToggleSwitch, SdsTopbar, SdsTriStateChip, SdsUserMenu, SidebarStore, addDays, addMonths, addMonthsKeepDay, formatDdMmYyyy, formatHhMm, isOutOfRange, isSameDay, isoDay, pad2, sdsFileMatchesAccept, sdsFormatBytes, sdsFormatNational, sdsMatchDialCode, sdsNormalizeSignificant, startOfDay, startOfMonth };
|
|
4430
|
+
export type { SdsAccordionActive, SdsAccordionValue, SdsAllergen, SdsAvatarShape, SdsAvatarStatus, SdsBadgeSize, SdsBadgeVariant, SdsBulkBarPosition, SdsButtonShape, SdsButtonSize, SdsButtonVariant, SdsCardVariant, SdsCheckboxSize, SdsChecklistStatus, SdsChipOption, SdsChipSize, SdsCropRect, SdsDatePickerSize, SdsFileDropAppearance, SdsFileRejection, SdsFileRejectionReason, SdsIconName, SdsIconSize, SdsImageCropperBlobOptions, SdsImageCropperShape, SdsInputAppearance, SdsInputNumberAppearance, SdsInputNumberButtonLayout, SdsInputNumberCurrencyDisplay, SdsInputNumberMode, SdsInputNumberSize, SdsInputShape, SdsInputSize, SdsInputType, SdsLanguageOption, SdsLanguageSwitcherAlign, SdsLanguageSwitcherAppearance, SdsLanguageSwitcherDirection, SdsLocalizedInputSize, SdsLocalizedValue, SdsMenuAction, SdsMenuAlign, SdsMenuEntry, SdsMenuItemTone, SdsMenuSeparator, SdsMultiSelectDisplay, SdsMultiSelectSize, SdsNavItemBadgeTone, SdsOtpInputSize, SdsPaginatorSize, SdsPaginatorState, SdsPhoneCountry, SdsPhoneInputSize, SdsPhoneValue, SdsRadioSize, SdsScoreSize, SdsScoreTier, SdsScoreVariant, SdsSearchAppearance, SdsSearchItem, SdsSegmentedOption, SdsSegmentedSize, SdsSelectAppearance, SdsSelectEmptyContext, SdsSelectFooterContext, SdsSelectOptionContext, SdsSelectSize, SdsShellBackground, SdsSidebarAppearance, SdsSortOrder, SdsSortableAppearance, SdsSortableItemContext, SdsSortableReorderEvent, SdsStatusTileState, SdsTabValue, SdsTableCellCommitEvent, SdsTableCellContext, SdsTableCellErrors, SdsTableColumn, SdsTableEditTrigger, SdsTableEditor, SdsTableEmptyContext, SdsTableHeaderContext, SdsTableLazyEvent, SdsTableRowExpansionContext, SdsTableSelectOption, SdsTableSize, SdsTableSortEvent, SdsTextareaAppearance, SdsTextareaResize, SdsTextareaSize, SdsTheme, SdsThemeToggleAppearance, SdsTimeInputAppearance, SdsTimeInputSize, SdsToast, SdsToastKind, SdsToggleSwitchSize, SdsTopbarAppearance, SdsTriState, SdsTriStateChipSize, SdsUserMenuAlign, SdsUserMenuAppearance };
|