@besaitech/ng-design-system 0.0.54 → 0.0.55
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +6 -3
- package/fesm2022/besaitech-ng-design-system.mjs +1230 -65
- package/fesm2022/besaitech-ng-design-system.mjs.map +1 -1
- package/index.d.ts +354 -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<"
|
|
142
|
+
readonly name: _angular_core.InputSignal<"filter" | "menu" | "search" | "table" | "chart-column" | "clipboard-list" | "credit-card" | "external-link" | "languages" | "megaphone" | "monitor" | "store" | "user-round" | "home" | "user-plus" | "user-check" | "hand" | "users" | "bike" | "building-2" | "package" | "package-plus" | "package-open" | "rotate-ccw" | "bar-chart-3" | "log-out" | "panel-left-close" | "panel-left-open" | "panel-left" | "calendar" | "chevron-right" | "chevron-left" | "chevron-down" | "chevron-up" | "plus" | "minus" | "chevrons-left" | "chevrons-right" | "x" | "check" | "alert-circle" | "info" | "copy" | "type" | "tag" | "ticket" | "square" | "square-check" | "circle-dot" | "circle-user" | "layout-grid" | "panels-top-left" | "panel-top" | "rows-3" | "book-open" | "palette" | "bell" | "phone" | "settings" | "align-left" | "toggle-left" | "arrow-up" | "arrow-down" | "chevrons-up-down" | "qr-code" | "eye" | "eye-off" | "user" | "check-circle" | "arrows-clockwise" | "file-text" | "hash" | "map-pin" | "inbox" | "arrow-right" | "refresh-cw" | "loader-circle" | "bug" | "scroll-text" | "moon" | "sun" | "search-x" | "command" | "sparkles" | "triangle-alert" | "octagon-x" | "ban" | "ellipsis" | "ellipsis-vertical" | "grip-vertical" | "upload" | "image" | "image-off" | "utensils" | "zoom-in" | "zoom-out" | "trash-2" | "clock" | "pencil" | "circle-help" | "stock" | "allergen-cereals-gluten" | "allergen-crustaceans" | "allergen-eggs" | "allergen-fish" | "allergen-peanuts" | "allergen-soybeans" | "allergen-milk" | "allergen-nuts" | "allergen-celery" | "allergen-mustard" | "allergen-sesame" | "allergen-sulphites" | "allergen-lupin" | "allergen-molluscs">;
|
|
141
143
|
/** Square size: a pixel number, a numeric string, or a keyword (sm·md·lg·xl). */
|
|
142
144
|
readonly size: _angular_core.InputSignalWithTransform<number, string | number>;
|
|
143
145
|
/** Stroke width of the line icon. */
|
|
@@ -178,7 +180,7 @@ declare class SdsButton {
|
|
|
178
180
|
constructor();
|
|
179
181
|
/** Block the documented host-bound (click)/routerLink when inert. */
|
|
180
182
|
protected onHostClick(event: Event): void;
|
|
181
|
-
protected readonly hostClass: _angular_core.Signal<"flex
|
|
183
|
+
protected readonly hostClass: _angular_core.Signal<"inline-flex" | "flex w-full">;
|
|
182
184
|
protected readonly classes: _angular_core.Signal<string>;
|
|
183
185
|
static ɵfac: _angular_core.ɵɵFactoryDeclaration<SdsButton, never>;
|
|
184
186
|
static ɵcmp: _angular_core.ɵɵComponentDeclaration<SdsButton, "sds-button", never, { "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "shape": { "alias": "shape"; "required": false; "isSignal": true; }; "type": { "alias": "type"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "block": { "alias": "block"; "required": false; "isSignal": true; }; "iconOnly": { "alias": "iconOnly"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; }, {}, never, ["[sdsIconLeading]", "*", "[sdsIconTrailing]"], true, never>;
|
|
@@ -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<"
|
|
240
|
-
readonly trailingIcon: _angular_core.InputSignal<"
|
|
241
|
+
readonly leadingIcon: _angular_core.InputSignal<"filter" | "menu" | "search" | "table" | "chart-column" | "clipboard-list" | "credit-card" | "external-link" | "languages" | "megaphone" | "monitor" | "store" | "user-round" | "home" | "user-plus" | "user-check" | "hand" | "users" | "bike" | "building-2" | "package" | "package-plus" | "package-open" | "rotate-ccw" | "bar-chart-3" | "log-out" | "panel-left-close" | "panel-left-open" | "panel-left" | "calendar" | "chevron-right" | "chevron-left" | "chevron-down" | "chevron-up" | "plus" | "minus" | "chevrons-left" | "chevrons-right" | "x" | "check" | "alert-circle" | "info" | "copy" | "type" | "tag" | "ticket" | "square" | "square-check" | "circle-dot" | "circle-user" | "layout-grid" | "panels-top-left" | "panel-top" | "rows-3" | "book-open" | "palette" | "bell" | "phone" | "settings" | "align-left" | "toggle-left" | "arrow-up" | "arrow-down" | "chevrons-up-down" | "qr-code" | "eye" | "eye-off" | "user" | "check-circle" | "arrows-clockwise" | "file-text" | "hash" | "map-pin" | "inbox" | "arrow-right" | "refresh-cw" | "loader-circle" | "bug" | "scroll-text" | "moon" | "sun" | "search-x" | "command" | "sparkles" | "triangle-alert" | "octagon-x" | "ban" | "ellipsis" | "ellipsis-vertical" | "grip-vertical" | "upload" | "image" | "image-off" | "utensils" | "zoom-in" | "zoom-out" | "trash-2" | "clock" | "pencil" | "circle-help" | "stock" | "allergen-cereals-gluten" | "allergen-crustaceans" | "allergen-eggs" | "allergen-fish" | "allergen-peanuts" | "allergen-soybeans" | "allergen-milk" | "allergen-nuts" | "allergen-celery" | "allergen-mustard" | "allergen-sesame" | "allergen-sulphites" | "allergen-lupin" | "allergen-molluscs" | null>;
|
|
242
|
+
readonly trailingIcon: _angular_core.InputSignal<"filter" | "menu" | "search" | "table" | "chart-column" | "clipboard-list" | "credit-card" | "external-link" | "languages" | "megaphone" | "monitor" | "store" | "user-round" | "home" | "user-plus" | "user-check" | "hand" | "users" | "bike" | "building-2" | "package" | "package-plus" | "package-open" | "rotate-ccw" | "bar-chart-3" | "log-out" | "panel-left-close" | "panel-left-open" | "panel-left" | "calendar" | "chevron-right" | "chevron-left" | "chevron-down" | "chevron-up" | "plus" | "minus" | "chevrons-left" | "chevrons-right" | "x" | "check" | "alert-circle" | "info" | "copy" | "type" | "tag" | "ticket" | "square" | "square-check" | "circle-dot" | "circle-user" | "layout-grid" | "panels-top-left" | "panel-top" | "rows-3" | "book-open" | "palette" | "bell" | "phone" | "settings" | "align-left" | "toggle-left" | "arrow-up" | "arrow-down" | "chevrons-up-down" | "qr-code" | "eye" | "eye-off" | "user" | "check-circle" | "arrows-clockwise" | "file-text" | "hash" | "map-pin" | "inbox" | "arrow-right" | "refresh-cw" | "loader-circle" | "bug" | "scroll-text" | "moon" | "sun" | "search-x" | "command" | "sparkles" | "triangle-alert" | "octagon-x" | "ban" | "ellipsis" | "ellipsis-vertical" | "grip-vertical" | "upload" | "image" | "image-off" | "utensils" | "zoom-in" | "zoom-out" | "trash-2" | "clock" | "pencil" | "circle-help" | "stock" | "allergen-cereals-gluten" | "allergen-crustaceans" | "allergen-eggs" | "allergen-fish" | "allergen-peanuts" | "allergen-soybeans" | "allergen-milk" | "allergen-nuts" | "allergen-celery" | "allergen-mustard" | "allergen-sesame" | "allergen-sulphites" | "allergen-lupin" | "allergen-molluscs" | null>;
|
|
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<"
|
|
252
|
+
readonly trailingAction: _angular_core.InputSignal<"filter" | "menu" | "search" | "table" | "chart-column" | "clipboard-list" | "credit-card" | "external-link" | "languages" | "megaphone" | "monitor" | "store" | "user-round" | "home" | "user-plus" | "user-check" | "hand" | "users" | "bike" | "building-2" | "package" | "package-plus" | "package-open" | "rotate-ccw" | "bar-chart-3" | "log-out" | "panel-left-close" | "panel-left-open" | "panel-left" | "calendar" | "chevron-right" | "chevron-left" | "chevron-down" | "chevron-up" | "plus" | "minus" | "chevrons-left" | "chevrons-right" | "x" | "check" | "alert-circle" | "info" | "copy" | "type" | "tag" | "ticket" | "square" | "square-check" | "circle-dot" | "circle-user" | "layout-grid" | "panels-top-left" | "panel-top" | "rows-3" | "book-open" | "palette" | "bell" | "phone" | "settings" | "align-left" | "toggle-left" | "arrow-up" | "arrow-down" | "chevrons-up-down" | "qr-code" | "eye" | "eye-off" | "user" | "check-circle" | "arrows-clockwise" | "file-text" | "hash" | "map-pin" | "inbox" | "arrow-right" | "refresh-cw" | "loader-circle" | "bug" | "scroll-text" | "moon" | "sun" | "search-x" | "command" | "sparkles" | "triangle-alert" | "octagon-x" | "ban" | "ellipsis" | "ellipsis-vertical" | "grip-vertical" | "upload" | "image" | "image-off" | "utensils" | "zoom-in" | "zoom-out" | "trash-2" | "clock" | "pencil" | "circle-help" | "stock" | "allergen-cereals-gluten" | "allergen-crustaceans" | "allergen-eggs" | "allergen-fish" | "allergen-peanuts" | "allergen-soybeans" | "allergen-milk" | "allergen-nuts" | "allergen-celery" | "allergen-mustard" | "allergen-sesame" | "allergen-sulphites" | "allergen-lupin" | "allergen-molluscs" | null>;
|
|
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<"
|
|
359
|
+
readonly incrementIcon: _angular_core.InputSignal<"filter" | "menu" | "search" | "table" | "chart-column" | "clipboard-list" | "credit-card" | "external-link" | "languages" | "megaphone" | "monitor" | "store" | "user-round" | "home" | "user-plus" | "user-check" | "hand" | "users" | "bike" | "building-2" | "package" | "package-plus" | "package-open" | "rotate-ccw" | "bar-chart-3" | "log-out" | "panel-left-close" | "panel-left-open" | "panel-left" | "calendar" | "chevron-right" | "chevron-left" | "chevron-down" | "chevron-up" | "plus" | "minus" | "chevrons-left" | "chevrons-right" | "x" | "check" | "alert-circle" | "info" | "copy" | "type" | "tag" | "ticket" | "square" | "square-check" | "circle-dot" | "circle-user" | "layout-grid" | "panels-top-left" | "panel-top" | "rows-3" | "book-open" | "palette" | "bell" | "phone" | "settings" | "align-left" | "toggle-left" | "arrow-up" | "arrow-down" | "chevrons-up-down" | "qr-code" | "eye" | "eye-off" | "user" | "check-circle" | "arrows-clockwise" | "file-text" | "hash" | "map-pin" | "inbox" | "arrow-right" | "refresh-cw" | "loader-circle" | "bug" | "scroll-text" | "moon" | "sun" | "search-x" | "command" | "sparkles" | "triangle-alert" | "octagon-x" | "ban" | "ellipsis" | "ellipsis-vertical" | "grip-vertical" | "upload" | "image" | "image-off" | "utensils" | "zoom-in" | "zoom-out" | "trash-2" | "clock" | "pencil" | "circle-help" | "stock" | "allergen-cereals-gluten" | "allergen-crustaceans" | "allergen-eggs" | "allergen-fish" | "allergen-peanuts" | "allergen-soybeans" | "allergen-milk" | "allergen-nuts" | "allergen-celery" | "allergen-mustard" | "allergen-sesame" | "allergen-sulphites" | "allergen-lupin" | "allergen-molluscs" | null>;
|
|
358
360
|
/** Override the decrement button icon (defaults: chevron-down when stacked, minus otherwise). */
|
|
359
|
-
readonly decrementIcon: _angular_core.InputSignal<"
|
|
361
|
+
readonly decrementIcon: _angular_core.InputSignal<"filter" | "menu" | "search" | "table" | "chart-column" | "clipboard-list" | "credit-card" | "external-link" | "languages" | "megaphone" | "monitor" | "store" | "user-round" | "home" | "user-plus" | "user-check" | "hand" | "users" | "bike" | "building-2" | "package" | "package-plus" | "package-open" | "rotate-ccw" | "bar-chart-3" | "log-out" | "panel-left-close" | "panel-left-open" | "panel-left" | "calendar" | "chevron-right" | "chevron-left" | "chevron-down" | "chevron-up" | "plus" | "minus" | "chevrons-left" | "chevrons-right" | "x" | "check" | "alert-circle" | "info" | "copy" | "type" | "tag" | "ticket" | "square" | "square-check" | "circle-dot" | "circle-user" | "layout-grid" | "panels-top-left" | "panel-top" | "rows-3" | "book-open" | "palette" | "bell" | "phone" | "settings" | "align-left" | "toggle-left" | "arrow-up" | "arrow-down" | "chevrons-up-down" | "qr-code" | "eye" | "eye-off" | "user" | "check-circle" | "arrows-clockwise" | "file-text" | "hash" | "map-pin" | "inbox" | "arrow-right" | "refresh-cw" | "loader-circle" | "bug" | "scroll-text" | "moon" | "sun" | "search-x" | "command" | "sparkles" | "triangle-alert" | "octagon-x" | "ban" | "ellipsis" | "ellipsis-vertical" | "grip-vertical" | "upload" | "image" | "image-off" | "utensils" | "zoom-in" | "zoom-out" | "trash-2" | "clock" | "pencil" | "circle-help" | "stock" | "allergen-cereals-gluten" | "allergen-crustaceans" | "allergen-eggs" | "allergen-fish" | "allergen-peanuts" | "allergen-soybeans" | "allergen-milk" | "allergen-nuts" | "allergen-celery" | "allergen-mustard" | "allergen-sesame" | "allergen-sulphites" | "allergen-lupin" | "allergen-molluscs" | null>;
|
|
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<"
|
|
377
|
-
protected readonly decrementIconName: _angular_core.Signal<"
|
|
378
|
+
protected readonly incrementIconName: _angular_core.Signal<"filter" | "menu" | "search" | "table" | "chart-column" | "clipboard-list" | "credit-card" | "external-link" | "languages" | "megaphone" | "monitor" | "store" | "user-round" | "home" | "user-plus" | "user-check" | "hand" | "users" | "bike" | "building-2" | "package" | "package-plus" | "package-open" | "rotate-ccw" | "bar-chart-3" | "log-out" | "panel-left-close" | "panel-left-open" | "panel-left" | "calendar" | "chevron-right" | "chevron-left" | "chevron-down" | "chevron-up" | "plus" | "minus" | "chevrons-left" | "chevrons-right" | "x" | "check" | "alert-circle" | "info" | "copy" | "type" | "tag" | "ticket" | "square" | "square-check" | "circle-dot" | "circle-user" | "layout-grid" | "panels-top-left" | "panel-top" | "rows-3" | "book-open" | "palette" | "bell" | "phone" | "settings" | "align-left" | "toggle-left" | "arrow-up" | "arrow-down" | "chevrons-up-down" | "qr-code" | "eye" | "eye-off" | "user" | "check-circle" | "arrows-clockwise" | "file-text" | "hash" | "map-pin" | "inbox" | "arrow-right" | "refresh-cw" | "loader-circle" | "bug" | "scroll-text" | "moon" | "sun" | "search-x" | "command" | "sparkles" | "triangle-alert" | "octagon-x" | "ban" | "ellipsis" | "ellipsis-vertical" | "grip-vertical" | "upload" | "image" | "image-off" | "utensils" | "zoom-in" | "zoom-out" | "trash-2" | "clock" | "pencil" | "circle-help" | "stock" | "allergen-cereals-gluten" | "allergen-crustaceans" | "allergen-eggs" | "allergen-fish" | "allergen-peanuts" | "allergen-soybeans" | "allergen-milk" | "allergen-nuts" | "allergen-celery" | "allergen-mustard" | "allergen-sesame" | "allergen-sulphites" | "allergen-lupin" | "allergen-molluscs">;
|
|
379
|
+
protected readonly decrementIconName: _angular_core.Signal<"filter" | "menu" | "search" | "table" | "chart-column" | "clipboard-list" | "credit-card" | "external-link" | "languages" | "megaphone" | "monitor" | "store" | "user-round" | "home" | "user-plus" | "user-check" | "hand" | "users" | "bike" | "building-2" | "package" | "package-plus" | "package-open" | "rotate-ccw" | "bar-chart-3" | "log-out" | "panel-left-close" | "panel-left-open" | "panel-left" | "calendar" | "chevron-right" | "chevron-left" | "chevron-down" | "chevron-up" | "plus" | "minus" | "chevrons-left" | "chevrons-right" | "x" | "check" | "alert-circle" | "info" | "copy" | "type" | "tag" | "ticket" | "square" | "square-check" | "circle-dot" | "circle-user" | "layout-grid" | "panels-top-left" | "panel-top" | "rows-3" | "book-open" | "palette" | "bell" | "phone" | "settings" | "align-left" | "toggle-left" | "arrow-up" | "arrow-down" | "chevrons-up-down" | "qr-code" | "eye" | "eye-off" | "user" | "check-circle" | "arrows-clockwise" | "file-text" | "hash" | "map-pin" | "inbox" | "arrow-right" | "refresh-cw" | "loader-circle" | "bug" | "scroll-text" | "moon" | "sun" | "search-x" | "command" | "sparkles" | "triangle-alert" | "octagon-x" | "ban" | "ellipsis" | "ellipsis-vertical" | "grip-vertical" | "upload" | "image" | "image-off" | "utensils" | "zoom-in" | "zoom-out" | "trash-2" | "clock" | "pencil" | "circle-help" | "stock" | "allergen-cereals-gluten" | "allergen-crustaceans" | "allergen-eggs" | "allergen-fish" | "allergen-peanuts" | "allergen-soybeans" | "allergen-milk" | "allergen-nuts" | "allergen-celery" | "allergen-mustard" | "allergen-sesame" | "allergen-sulphites" | "allergen-lupin" | "allergen-molluscs">;
|
|
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<"
|
|
773
|
+
readonly onIcon: _angular_core.InputSignal<"filter" | "menu" | "search" | "table" | "chart-column" | "clipboard-list" | "credit-card" | "external-link" | "languages" | "megaphone" | "monitor" | "store" | "user-round" | "home" | "user-plus" | "user-check" | "hand" | "users" | "bike" | "building-2" | "package" | "package-plus" | "package-open" | "rotate-ccw" | "bar-chart-3" | "log-out" | "panel-left-close" | "panel-left-open" | "panel-left" | "calendar" | "chevron-right" | "chevron-left" | "chevron-down" | "chevron-up" | "plus" | "minus" | "chevrons-left" | "chevrons-right" | "x" | "check" | "alert-circle" | "info" | "copy" | "type" | "tag" | "ticket" | "square" | "square-check" | "circle-dot" | "circle-user" | "layout-grid" | "panels-top-left" | "panel-top" | "rows-3" | "book-open" | "palette" | "bell" | "phone" | "settings" | "align-left" | "toggle-left" | "arrow-up" | "arrow-down" | "chevrons-up-down" | "qr-code" | "eye" | "eye-off" | "user" | "check-circle" | "arrows-clockwise" | "file-text" | "hash" | "map-pin" | "inbox" | "arrow-right" | "refresh-cw" | "loader-circle" | "bug" | "scroll-text" | "moon" | "sun" | "search-x" | "command" | "sparkles" | "triangle-alert" | "octagon-x" | "ban" | "ellipsis" | "ellipsis-vertical" | "grip-vertical" | "upload" | "image" | "image-off" | "utensils" | "zoom-in" | "zoom-out" | "trash-2" | "clock" | "pencil" | "circle-help" | "stock" | "allergen-cereals-gluten" | "allergen-crustaceans" | "allergen-eggs" | "allergen-fish" | "allergen-peanuts" | "allergen-soybeans" | "allergen-milk" | "allergen-nuts" | "allergen-celery" | "allergen-mustard" | "allergen-sesame" | "allergen-sulphites" | "allergen-lupin" | "allergen-molluscs" | null>;
|
|
674
774
|
/** Icon shown on the knob when unchecked. */
|
|
675
|
-
readonly offIcon: _angular_core.InputSignal<"
|
|
775
|
+
readonly offIcon: _angular_core.InputSignal<"filter" | "menu" | "search" | "table" | "chart-column" | "clipboard-list" | "credit-card" | "external-link" | "languages" | "megaphone" | "monitor" | "store" | "user-round" | "home" | "user-plus" | "user-check" | "hand" | "users" | "bike" | "building-2" | "package" | "package-plus" | "package-open" | "rotate-ccw" | "bar-chart-3" | "log-out" | "panel-left-close" | "panel-left-open" | "panel-left" | "calendar" | "chevron-right" | "chevron-left" | "chevron-down" | "chevron-up" | "plus" | "minus" | "chevrons-left" | "chevrons-right" | "x" | "check" | "alert-circle" | "info" | "copy" | "type" | "tag" | "ticket" | "square" | "square-check" | "circle-dot" | "circle-user" | "layout-grid" | "panels-top-left" | "panel-top" | "rows-3" | "book-open" | "palette" | "bell" | "phone" | "settings" | "align-left" | "toggle-left" | "arrow-up" | "arrow-down" | "chevrons-up-down" | "qr-code" | "eye" | "eye-off" | "user" | "check-circle" | "arrows-clockwise" | "file-text" | "hash" | "map-pin" | "inbox" | "arrow-right" | "refresh-cw" | "loader-circle" | "bug" | "scroll-text" | "moon" | "sun" | "search-x" | "command" | "sparkles" | "triangle-alert" | "octagon-x" | "ban" | "ellipsis" | "ellipsis-vertical" | "grip-vertical" | "upload" | "image" | "image-off" | "utensils" | "zoom-in" | "zoom-out" | "trash-2" | "clock" | "pencil" | "circle-help" | "stock" | "allergen-cereals-gluten" | "allergen-crustaceans" | "allergen-eggs" | "allergen-fish" | "allergen-peanuts" | "allergen-soybeans" | "allergen-milk" | "allergen-nuts" | "allergen-celery" | "allergen-mustard" | "allergen-sesame" | "allergen-sulphites" | "allergen-lupin" | "allergen-molluscs" | null>;
|
|
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<"filter" | "menu" | "search" | "table" | "chart-column" | "clipboard-list" | "credit-card" | "external-link" | "languages" | "megaphone" | "monitor" | "store" | "user-round" | "home" | "user-plus" | "user-check" | "hand" | "users" | "bike" | "building-2" | "package" | "package-plus" | "package-open" | "rotate-ccw" | "bar-chart-3" | "log-out" | "panel-left-close" | "panel-left-open" | "panel-left" | "calendar" | "chevron-right" | "chevron-left" | "chevron-down" | "chevron-up" | "plus" | "minus" | "chevrons-left" | "chevrons-right" | "x" | "check" | "alert-circle" | "info" | "copy" | "type" | "tag" | "ticket" | "square" | "square-check" | "circle-dot" | "circle-user" | "layout-grid" | "panels-top-left" | "panel-top" | "rows-3" | "book-open" | "palette" | "bell" | "phone" | "settings" | "align-left" | "toggle-left" | "arrow-up" | "arrow-down" | "chevrons-up-down" | "qr-code" | "eye" | "eye-off" | "user" | "check-circle" | "arrows-clockwise" | "file-text" | "hash" | "map-pin" | "inbox" | "arrow-right" | "refresh-cw" | "loader-circle" | "bug" | "scroll-text" | "moon" | "sun" | "search-x" | "command" | "sparkles" | "triangle-alert" | "octagon-x" | "ban" | "ellipsis" | "ellipsis-vertical" | "grip-vertical" | "upload" | "image" | "image-off" | "utensils" | "zoom-in" | "zoom-out" | "trash-2" | "clock" | "pencil" | "circle-help" | "stock" | "allergen-cereals-gluten" | "allergen-crustaceans" | "allergen-eggs" | "allergen-fish" | "allergen-peanuts" | "allergen-soybeans" | "allergen-milk" | "allergen-nuts" | "allergen-celery" | "allergen-mustard" | "allergen-sesame" | "allergen-sulphites" | "allergen-lupin" | "allergen-molluscs" | null>;
|
|
952
|
+
/** Classes of the placeholder tile behind {@link fallbackIcon}: background and icon colour. */
|
|
953
|
+
readonly placeholderClass: _angular_core.InputSignal<string>;
|
|
954
|
+
/**
|
|
955
|
+
* The avatar repeats a name already visible beside it: `alt=""` and `aria-hidden`, so a screen reader
|
|
956
|
+
* does not read the name twice.
|
|
957
|
+
*/
|
|
958
|
+
readonly decorative: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
959
|
+
/** Native lazy loading for the image (default on — avatars are often in long lists). */
|
|
960
|
+
readonly lazy: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
961
|
+
/** The `src` that failed to load. Any other `src` is tried (so a new photo URL retries). */
|
|
962
|
+
protected readonly failedSrc: _angular_core.WritableSignal<string | null | undefined>;
|
|
963
|
+
protected readonly showImage: _angular_core.Signal<boolean>;
|
|
964
|
+
protected readonly shapeClass: _angular_core.Signal<string>;
|
|
965
|
+
protected readonly frameClass: _angular_core.Signal<string>;
|
|
966
|
+
protected readonly iconSize: _angular_core.Signal<number>;
|
|
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<"
|
|
1038
|
+
protected readonly iconName: _angular_core.Signal<"filter" | "menu" | "search" | "table" | "chart-column" | "clipboard-list" | "credit-card" | "external-link" | "languages" | "megaphone" | "monitor" | "store" | "user-round" | "home" | "user-plus" | "user-check" | "hand" | "users" | "bike" | "building-2" | "package" | "package-plus" | "package-open" | "rotate-ccw" | "bar-chart-3" | "log-out" | "panel-left-close" | "panel-left-open" | "panel-left" | "calendar" | "chevron-right" | "chevron-left" | "chevron-down" | "chevron-up" | "plus" | "minus" | "chevrons-left" | "chevrons-right" | "x" | "check" | "alert-circle" | "info" | "copy" | "type" | "tag" | "ticket" | "square" | "square-check" | "circle-dot" | "circle-user" | "layout-grid" | "panels-top-left" | "panel-top" | "rows-3" | "book-open" | "palette" | "bell" | "phone" | "settings" | "align-left" | "toggle-left" | "arrow-up" | "arrow-down" | "chevrons-up-down" | "qr-code" | "eye" | "eye-off" | "user" | "check-circle" | "arrows-clockwise" | "file-text" | "hash" | "map-pin" | "inbox" | "arrow-right" | "refresh-cw" | "loader-circle" | "bug" | "scroll-text" | "moon" | "sun" | "search-x" | "command" | "sparkles" | "triangle-alert" | "octagon-x" | "ban" | "ellipsis" | "ellipsis-vertical" | "grip-vertical" | "upload" | "image" | "image-off" | "utensils" | "zoom-in" | "zoom-out" | "trash-2" | "clock" | "pencil" | "circle-help" | "stock" | "allergen-cereals-gluten" | "allergen-crustaceans" | "allergen-eggs" | "allergen-fish" | "allergen-peanuts" | "allergen-soybeans" | "allergen-milk" | "allergen-nuts" | "allergen-celery" | "allergen-mustard" | "allergen-sesame" | "allergen-sulphites" | "allergen-lupin" | "allergen-molluscs" | null>;
|
|
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<"
|
|
1072
|
+
readonly icon: _angular_core.InputSignal<"filter" | "menu" | "search" | "table" | "chart-column" | "clipboard-list" | "credit-card" | "external-link" | "languages" | "megaphone" | "monitor" | "store" | "user-round" | "home" | "user-plus" | "user-check" | "hand" | "users" | "bike" | "building-2" | "package" | "package-plus" | "package-open" | "rotate-ccw" | "bar-chart-3" | "log-out" | "panel-left-close" | "panel-left-open" | "panel-left" | "calendar" | "chevron-right" | "chevron-left" | "chevron-down" | "chevron-up" | "plus" | "minus" | "chevrons-left" | "chevrons-right" | "x" | "check" | "alert-circle" | "info" | "copy" | "type" | "tag" | "ticket" | "square" | "square-check" | "circle-dot" | "circle-user" | "layout-grid" | "panels-top-left" | "panel-top" | "rows-3" | "book-open" | "palette" | "bell" | "phone" | "settings" | "align-left" | "toggle-left" | "arrow-up" | "arrow-down" | "chevrons-up-down" | "qr-code" | "eye" | "eye-off" | "user" | "check-circle" | "arrows-clockwise" | "file-text" | "hash" | "map-pin" | "inbox" | "arrow-right" | "refresh-cw" | "loader-circle" | "bug" | "scroll-text" | "moon" | "sun" | "search-x" | "command" | "sparkles" | "triangle-alert" | "octagon-x" | "ban" | "ellipsis" | "ellipsis-vertical" | "grip-vertical" | "upload" | "image" | "image-off" | "utensils" | "zoom-in" | "zoom-out" | "trash-2" | "clock" | "pencil" | "circle-help" | "stock" | "allergen-cereals-gluten" | "allergen-crustaceans" | "allergen-eggs" | "allergen-fish" | "allergen-peanuts" | "allergen-soybeans" | "allergen-milk" | "allergen-nuts" | "allergen-celery" | "allergen-mustard" | "allergen-sesame" | "allergen-sulphites" | "allergen-lupin" | "allergen-molluscs" | null>;
|
|
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<"filter" | "menu" | "search" | "table" | "chart-column" | "clipboard-list" | "credit-card" | "external-link" | "languages" | "megaphone" | "monitor" | "store" | "user-round" | "home" | "user-plus" | "user-check" | "hand" | "users" | "bike" | "building-2" | "package" | "package-plus" | "package-open" | "rotate-ccw" | "bar-chart-3" | "log-out" | "panel-left-close" | "panel-left-open" | "panel-left" | "calendar" | "chevron-right" | "chevron-left" | "chevron-down" | "chevron-up" | "plus" | "minus" | "chevrons-left" | "chevrons-right" | "x" | "check" | "alert-circle" | "info" | "copy" | "type" | "tag" | "ticket" | "square" | "square-check" | "circle-dot" | "circle-user" | "layout-grid" | "panels-top-left" | "panel-top" | "rows-3" | "book-open" | "palette" | "bell" | "phone" | "settings" | "align-left" | "toggle-left" | "arrow-up" | "arrow-down" | "chevrons-up-down" | "qr-code" | "eye" | "eye-off" | "user" | "check-circle" | "arrows-clockwise" | "file-text" | "hash" | "map-pin" | "inbox" | "arrow-right" | "refresh-cw" | "loader-circle" | "bug" | "scroll-text" | "moon" | "sun" | "search-x" | "command" | "sparkles" | "triangle-alert" | "octagon-x" | "ban" | "ellipsis" | "ellipsis-vertical" | "grip-vertical" | "upload" | "image" | "image-off" | "utensils" | "zoom-in" | "zoom-out" | "trash-2" | "clock" | "pencil" | "circle-help" | "stock" | "allergen-cereals-gluten" | "allergen-crustaceans" | "allergen-eggs" | "allergen-fish" | "allergen-peanuts" | "allergen-soybeans" | "allergen-milk" | "allergen-nuts" | "allergen-celery" | "allergen-mustard" | "allergen-sesame" | "allergen-sulphites" | "allergen-lupin" | "allergen-molluscs" | null>;
|
|
1190
|
+
readonly count: _angular_core.InputSignal<number | null | undefined>;
|
|
1191
|
+
readonly size: _angular_core.InputSignal<SdsChipSize>;
|
|
1192
|
+
readonly disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
1193
|
+
/** Replace the icon with a check while selected. */
|
|
1194
|
+
readonly showCheck: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
1195
|
+
protected readonly countClass = "inline-flex min-w-5 items-center justify-center rounded-full bg-ink/5 px-1.5 text-[11px] font-semibold tabular-nums dark:bg-white/10";
|
|
1196
|
+
protected readonly classes: _angular_core.Signal<string>;
|
|
1197
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<SdsChip, never>;
|
|
1198
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<SdsChip, "sds-chip", never, { "label": { "alias": "label"; "required": true; "isSignal": true; }; "selected": { "alias": "selected"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "count": { "alias": "count"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "showCheck": { "alias": "showCheck"; "required": false; "isSignal": true; }; }, { "selected": "selectedChange"; }, never, never, true, never>;
|
|
1199
|
+
}
|
|
1200
|
+
/**
|
|
1201
|
+
* A set of chips: pick ONE (a filter row such as "All · Missing photo · Hidden", VAT presets, a date
|
|
1202
|
+
* range) or, with `multiple`, SEVERAL (categories of an item, days of the week, dietary tags). Unlike
|
|
1203
|
+
* sds-segmented (a compact joined bar), chips wrap onto several lines and can carry a count.
|
|
1204
|
+
*
|
|
1205
|
+
* Value: two-way `[(value)]`, or a form control (`formControlName` / `[(ngModel)]` —
|
|
1206
|
+
* ControlValueAccessor). Single mode holds the picked value (or null); `multiple` holds an array, in the
|
|
1207
|
+
* order of the options.
|
|
1208
|
+
*
|
|
1209
|
+
* Accessibility: single mode is a `radiogroup` (one tab stop, arrows/Home/End move and select, like
|
|
1210
|
+
* native radios); `multiple` is a `group` of `aria-pressed` toggle buttons. Name it with [ariaLabel] or
|
|
1211
|
+
* [ariaLabelledby].
|
|
1212
|
+
*
|
|
1213
|
+
* @example
|
|
1214
|
+
* <sds-chip-group ariaLabel="Filter" [options]="filters()" [(value)]="issue" />
|
|
1215
|
+
* <!-- filters = [{ value: null, label: 'All', count: 34 }, { value: 'NO_PHOTO', label: 'Missing photo', count: 5 }] -->
|
|
1216
|
+
*
|
|
1217
|
+
* @example
|
|
1218
|
+
* <sds-chip-group ariaLabel="Categories" multiple [options]="categories()" formControlName="categoryIds" />
|
|
1219
|
+
*/
|
|
1220
|
+
declare class SdsChipGroup implements ControlValueAccessor {
|
|
1221
|
+
private readonly host;
|
|
1222
|
+
private readonly baseId;
|
|
1223
|
+
/** Options: `{ value, label, icon?, count?, disabled? }` objects, or bare strings/numbers. */
|
|
1224
|
+
readonly options: _angular_core.InputSignal<readonly (string | number | SdsChipOption<unknown>)[]>;
|
|
1225
|
+
/** Picked value (single) or values (multiple). Two-way: `[(value)]`. */
|
|
1226
|
+
readonly value: _angular_core.ModelSignal<unknown>;
|
|
1227
|
+
/** Allow several chips at once; the value becomes an array. */
|
|
1228
|
+
readonly multiple: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
1229
|
+
/** Single mode: clicking the picked chip again clears the value to null. */
|
|
1230
|
+
readonly deselectable: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
1231
|
+
readonly size: _angular_core.InputSignal<SdsChipSize>;
|
|
1232
|
+
readonly ariaLabel: _angular_core.InputSignal<string>;
|
|
1233
|
+
readonly ariaLabelledby: _angular_core.InputSignal<string>;
|
|
1234
|
+
readonly disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
1235
|
+
/** Wrap onto several lines (default) or scroll horizontally on one line. */
|
|
1236
|
+
readonly wrap: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
1237
|
+
/** `multiple`: a check replaces the icon on picked chips. */
|
|
1238
|
+
readonly showCheck: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
1239
|
+
protected readonly countClass = "inline-flex min-w-5 items-center justify-center rounded-full bg-ink/5 px-1.5 text-[11px] font-semibold tabular-nums dark:bg-white/10";
|
|
1240
|
+
private readonly cvaDisabled;
|
|
1241
|
+
protected readonly isDisabled: _angular_core.Signal<boolean>;
|
|
1242
|
+
protected readonly chips: _angular_core.Signal<NormChip[]>;
|
|
1243
|
+
private readonly selectedValues;
|
|
1244
|
+
/** Single mode's roving tab stop: the picked chip, else the first enabled one. */
|
|
1245
|
+
protected readonly tabStop: _angular_core.Signal<number>;
|
|
1246
|
+
protected isSelected(chip: NormChip): boolean;
|
|
1247
|
+
protected chipId(i: number): string;
|
|
1248
|
+
protected classFor(chip: NormChip): string;
|
|
1249
|
+
protected toggle(i: number): void;
|
|
1250
|
+
protected onKeydown(event: KeyboardEvent): void;
|
|
1251
|
+
private step;
|
|
1252
|
+
private onChange;
|
|
1253
|
+
protected onTouched: () => void;
|
|
1254
|
+
writeValue(value: unknown): void;
|
|
1255
|
+
registerOnChange(fn: (value: unknown) => void): void;
|
|
1256
|
+
registerOnTouched(fn: () => void): void;
|
|
1257
|
+
setDisabledState(isDisabled: boolean): void;
|
|
1258
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<SdsChipGroup, never>;
|
|
1259
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<SdsChipGroup, "sds-chip-group", never, { "options": { "alias": "options"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "multiple": { "alias": "multiple"; "required": false; "isSignal": true; }; "deselectable": { "alias": "deselectable"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "ariaLabelledby": { "alias": "ariaLabelledby"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "wrap": { "alias": "wrap"; "required": false; "isSignal": true; }; "showCheck": { "alias": "showCheck"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; }, never, never, true, never>;
|
|
1260
|
+
}
|
|
1261
|
+
|
|
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<"
|
|
1499
|
+
readonly triggerIcon: _angular_core.InputSignal<"filter" | "menu" | "search" | "table" | "chart-column" | "clipboard-list" | "credit-card" | "external-link" | "languages" | "megaphone" | "monitor" | "store" | "user-round" | "home" | "user-plus" | "user-check" | "hand" | "users" | "bike" | "building-2" | "package" | "package-plus" | "package-open" | "rotate-ccw" | "bar-chart-3" | "log-out" | "panel-left-close" | "panel-left-open" | "panel-left" | "calendar" | "chevron-right" | "chevron-left" | "chevron-down" | "chevron-up" | "plus" | "minus" | "chevrons-left" | "chevrons-right" | "x" | "check" | "alert-circle" | "info" | "copy" | "type" | "tag" | "ticket" | "square" | "square-check" | "circle-dot" | "circle-user" | "layout-grid" | "panels-top-left" | "panel-top" | "rows-3" | "book-open" | "palette" | "bell" | "phone" | "settings" | "align-left" | "toggle-left" | "arrow-up" | "arrow-down" | "chevrons-up-down" | "qr-code" | "eye" | "eye-off" | "user" | "check-circle" | "arrows-clockwise" | "file-text" | "hash" | "map-pin" | "inbox" | "arrow-right" | "refresh-cw" | "loader-circle" | "bug" | "scroll-text" | "moon" | "sun" | "search-x" | "command" | "sparkles" | "triangle-alert" | "octagon-x" | "ban" | "ellipsis" | "ellipsis-vertical" | "grip-vertical" | "upload" | "image" | "image-off" | "utensils" | "zoom-in" | "zoom-out" | "trash-2" | "clock" | "pencil" | "circle-help" | "stock" | "allergen-cereals-gluten" | "allergen-crustaceans" | "allergen-eggs" | "allergen-fish" | "allergen-peanuts" | "allergen-soybeans" | "allergen-milk" | "allergen-nuts" | "allergen-celery" | "allergen-mustard" | "allergen-sesame" | "allergen-sulphites" | "allergen-lupin" | "allergen-molluscs">;
|
|
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. */
|
|
@@ -1560,7 +1803,7 @@ declare class SdsFileDrop {
|
|
|
1560
1803
|
readonly maxFiles: _angular_core.InputSignal<number | null>;
|
|
1561
1804
|
readonly disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
1562
1805
|
/** Icon in the zone at rest. */
|
|
1563
|
-
readonly icon: _angular_core.InputSignal<"
|
|
1806
|
+
readonly icon: _angular_core.InputSignal<"file-text" | "upload" | "image">;
|
|
1564
1807
|
readonly label: _angular_core.InputSignal<string>;
|
|
1565
1808
|
/** Shown while files are dragged over the zone. */
|
|
1566
1809
|
readonly dropLabel: _angular_core.InputSignal<string>;
|
|
@@ -2672,15 +2915,25 @@ declare class SdsTabsStore {
|
|
|
2672
2915
|
readonly id: string;
|
|
2673
2916
|
/** Whether the tab list scrolls horizontally (mirrors [scrollable]). */
|
|
2674
2917
|
readonly scrollable: WritableSignal<boolean>;
|
|
2918
|
+
/** Controlled mode (mirrors [controlled]): a click only REQUESTS a tab, the host sets [value]. */
|
|
2919
|
+
readonly controlled: WritableSignal<boolean>;
|
|
2920
|
+
/** Called with every tab the user picks (wired to the host's (tabSelect) output). */
|
|
2921
|
+
onSelect: (value: SdsTabValue) => void;
|
|
2675
2922
|
private value;
|
|
2676
2923
|
private readonly registered;
|
|
2924
|
+
private readonly panels;
|
|
2677
2925
|
/** Called once by <sds-tabs> to share its two-way `value` signal. */
|
|
2678
2926
|
connect(value: WritableSignal<SdsTabValue>): void;
|
|
2679
2927
|
activeValue(): SdsTabValue;
|
|
2680
2928
|
isActive(value: SdsTabValue): boolean;
|
|
2929
|
+
/** A user pick. Uncontrolled: becomes the active tab. Controlled: only reported to the host. */
|
|
2681
2930
|
select(value: SdsTabValue): void;
|
|
2682
2931
|
registerTab(value: SdsTabValue): void;
|
|
2683
2932
|
unregisterTab(value: SdsTabValue): void;
|
|
2933
|
+
registerPanel(value: SdsTabValue): void;
|
|
2934
|
+
unregisterPanel(value: SdsTabValue): void;
|
|
2935
|
+
/** Whether an <sds-tab-panel> exists for this value (tabs whose content lives elsewhere have none). */
|
|
2936
|
+
hasPanel(value: SdsTabValue): boolean;
|
|
2684
2937
|
tabId(value: SdsTabValue): string;
|
|
2685
2938
|
panelId(value: SdsTabValue): string;
|
|
2686
2939
|
static ɵfac: _angular_core.ɵɵFactoryDeclaration<SdsTabsStore, never>;
|
|
@@ -2693,6 +2946,14 @@ declare class SdsTabsStore {
|
|
|
2693
2946
|
* <sds-tab-panel> [value]; it is two-way bindable via [(value)]. When omitted,
|
|
2694
2947
|
* the first registered tab is selected.
|
|
2695
2948
|
*
|
|
2949
|
+
* **Controlled tabs** (`controlled`): a click, arrow key or Home/End only emits `(tabSelect)`; the active
|
|
2950
|
+
* tab changes when the host changes `[value]`. Use it when the active tab lives somewhere else — a
|
|
2951
|
+
* `?tab=` query param — or when switching can be refused (an unsaved-changes guard): the tab never
|
|
2952
|
+
* shows as selected before the host agrees. `(tabSelect)` also fires in the default mode.
|
|
2953
|
+
*
|
|
2954
|
+
* **Panels are optional.** A tab set whose content is rendered by the host (an `@switch` on the value, a
|
|
2955
|
+
* router outlet) can omit <sds-tab-panels>; a tab then carries no `aria-controls` to a missing panel.
|
|
2956
|
+
*
|
|
2696
2957
|
* @example
|
|
2697
2958
|
* <sds-tabs [(value)]="active">
|
|
2698
2959
|
* <sds-tab-list>
|
|
@@ -2704,6 +2965,16 @@ declare class SdsTabsStore {
|
|
|
2704
2965
|
* <sds-tab-panel value="1">…</sds-tab-panel>
|
|
2705
2966
|
* </sds-tab-panels>
|
|
2706
2967
|
* </sds-tabs>
|
|
2968
|
+
*
|
|
2969
|
+
* @example
|
|
2970
|
+
* <!-- driven by a query param, content rendered by the host -->
|
|
2971
|
+
* <sds-tabs controlled [value]="activeTab()" (tabSelect)="selectTab($event)">
|
|
2972
|
+
* <sds-tab-list>
|
|
2973
|
+
* @for (tab of tabs; track tab) {
|
|
2974
|
+
* <sds-tab [value]="tab">{{ 'menu.tabs.' + tab | translate }}</sds-tab>
|
|
2975
|
+
* }
|
|
2976
|
+
* </sds-tab-list>
|
|
2977
|
+
* </sds-tabs>
|
|
2707
2978
|
*/
|
|
2708
2979
|
declare class SdsTabs {
|
|
2709
2980
|
private readonly store;
|
|
@@ -2711,9 +2982,16 @@ declare class SdsTabs {
|
|
|
2711
2982
|
readonly value: _angular_core.ModelSignal<SdsTabValue>;
|
|
2712
2983
|
/** Let the tab list scroll horizontally instead of overflowing. */
|
|
2713
2984
|
readonly scrollable: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
2985
|
+
/**
|
|
2986
|
+
* Controlled mode: a user pick only emits (tabSelect); the host decides by setting [value]. See the
|
|
2987
|
+
* class note.
|
|
2988
|
+
*/
|
|
2989
|
+
readonly controlled: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
2990
|
+
/** Emits the value of the tab the user picked (in both modes). */
|
|
2991
|
+
readonly tabSelect: _angular_core.OutputEmitterRef<SdsTabValue>;
|
|
2714
2992
|
constructor();
|
|
2715
2993
|
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>;
|
|
2994
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<SdsTabs, "sds-tabs", never, { "value": { "alias": "value"; "required": false; "isSignal": true; }; "scrollable": { "alias": "scrollable"; "required": false; "isSignal": true; }; "controlled": { "alias": "controlled"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "tabSelect": "tabSelect"; }, never, ["*"], true, never>;
|
|
2717
2995
|
}
|
|
2718
2996
|
|
|
2719
2997
|
/**
|
|
@@ -2758,10 +3036,12 @@ declare class SdsTabPanels {
|
|
|
2758
3036
|
* the active tab. Inactive panels are not rendered (their content is created
|
|
2759
3037
|
* on activation), so panel state does not persist across switches.
|
|
2760
3038
|
*/
|
|
2761
|
-
declare class SdsTabPanel {
|
|
3039
|
+
declare class SdsTabPanel implements OnInit, OnDestroy {
|
|
2762
3040
|
protected readonly store: SdsTabsStore;
|
|
2763
3041
|
readonly value: _angular_core.InputSignal<SdsTabValue>;
|
|
2764
3042
|
protected readonly active: _angular_core.Signal<boolean>;
|
|
3043
|
+
ngOnInit(): void;
|
|
3044
|
+
ngOnDestroy(): void;
|
|
2765
3045
|
static ɵfac: _angular_core.ɵɵFactoryDeclaration<SdsTabPanel, never>;
|
|
2766
3046
|
static ɵcmp: _angular_core.ɵɵComponentDeclaration<SdsTabPanel, "sds-tab-panel", never, { "value": { "alias": "value"; "required": true; "isSignal": true; }; }, {}, never, ["*"], true, never>;
|
|
2767
3047
|
}
|
|
@@ -2999,6 +3279,11 @@ type SdsSelectionMode = 'single' | 'multiple' | null;
|
|
|
2999
3279
|
* - **Custom headers:** `<ng-template sdsHeader="field">` replaces a column's header content (label and
|
|
3000
3280
|
* sort button) — e.g. a "select all" checkbox above your own checkbox column. Its context carries the
|
|
3001
3281
|
* filtered `rows` (all pages) and the displayed `pageRows` (see {@link SdsTableHeaderContext}).
|
|
3282
|
+
* - **Clickable rows:** `rowClickable` makes each row an action (pointer, tab stop, Enter/Space) that
|
|
3283
|
+
* emits `(rowClick)`; clicks on buttons, links and fields inside a cell are not row clicks, so no
|
|
3284
|
+
* `stopPropagation()` is needed. `[rowClass]` adds per-row classes (e.g. dim a blocked row).
|
|
3285
|
+
* - **Empty state:** `<ng-template sdsTableEmpty let-query>` replaces the plain `emptyMessage` (e.g. a
|
|
3286
|
+
* sentence and a "create" button); it is not shown while `loading`.
|
|
3002
3287
|
* - **Labels:** every visible and spoken string is an input with an English default (paginator,
|
|
3003
3288
|
* filter, selection, expansion, editor). An app serving more than one language passes translations.
|
|
3004
3289
|
*
|
|
@@ -3069,6 +3354,14 @@ declare class SdsTable implements OnDestroy {
|
|
|
3069
3354
|
readonly selection: _angular_core.ModelSignal<any>;
|
|
3070
3355
|
readonly loading: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
3071
3356
|
readonly emptyMessage: _angular_core.InputSignal<string>;
|
|
3357
|
+
/**
|
|
3358
|
+
* Rows are actions: a pointer cursor, a tab stop per row, and Enter/Space emit `(rowClick)` like a
|
|
3359
|
+
* click. Clicks that land on a control inside a cell (button, link, input, checkbox…) do not count as
|
|
3360
|
+
* a row click, so a row can open a drawer while its cells keep their own buttons.
|
|
3361
|
+
*/
|
|
3362
|
+
readonly rowClickable: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
3363
|
+
/** Extra classes per body row, e.g. `(row) => row.blocked ? 'opacity-60' : ''`. */
|
|
3364
|
+
readonly rowClass: _angular_core.InputSignal<((row: any, index: number) => string | null | undefined) | null>;
|
|
3072
3365
|
readonly caption: _angular_core.InputSignal<string>;
|
|
3073
3366
|
/** Fallback accessible name for the `<table>` when no `caption` is set. */
|
|
3074
3367
|
readonly ariaLabel: _angular_core.InputSignal<string>;
|
|
@@ -3135,6 +3428,8 @@ declare class SdsTable implements OnDestroy {
|
|
|
3135
3428
|
protected headerContext(column: SdsTableColumn, index: number): SdsTableHeaderContext;
|
|
3136
3429
|
private readonly rowExpansion;
|
|
3137
3430
|
protected expansionTemplate(): _angular_core.TemplateRef<_besaitech_ng_design_system.SdsTableRowExpansionContext> | null;
|
|
3431
|
+
private readonly emptyTpl;
|
|
3432
|
+
protected emptyTemplate(): _angular_core.TemplateRef<_besaitech_ng_design_system.SdsTableEmptyContext> | null;
|
|
3138
3433
|
protected readonly filterText: _angular_core.WritableSignal<string>;
|
|
3139
3434
|
protected readonly sortField: _angular_core.WritableSignal<string | null>;
|
|
3140
3435
|
protected readonly sortOrder: _angular_core.WritableSignal<SdsSortOrder>;
|
|
@@ -3180,10 +3475,12 @@ declare class SdsTable implements OnDestroy {
|
|
|
3180
3475
|
protected readonly headerIndeterminate: _angular_core.Signal<boolean>;
|
|
3181
3476
|
protected toggleAll(): void;
|
|
3182
3477
|
protected onRowCheckboxClick(event: Event, row: any): void;
|
|
3183
|
-
/** Enter/Space on a (single
|
|
3478
|
+
/** Enter/Space on a focusable row (single selection or `rowClickable`) acts like a click on it. */
|
|
3184
3479
|
protected onRowKeydown(event: Event, row: any): void;
|
|
3185
3480
|
private toggleRowSelection;
|
|
3186
|
-
protected onRowClick(row: any): void;
|
|
3481
|
+
protected onRowClick(row: any, event?: Event): void;
|
|
3482
|
+
/** Whether a click started on an interactive element inside the row (not on the row itself). */
|
|
3483
|
+
private fromInnerControl;
|
|
3187
3484
|
protected onPageChange(state: SdsPaginatorState): void;
|
|
3188
3485
|
private emitLazy;
|
|
3189
3486
|
protected onFilterInput(event: Event): void;
|
|
@@ -3264,10 +3561,10 @@ declare class SdsTable implements OnDestroy {
|
|
|
3264
3561
|
protected onGridKeydown(event: KeyboardEvent): void;
|
|
3265
3562
|
protected headCellClass(col?: SdsTableColumn): string;
|
|
3266
3563
|
protected cellClass(col?: SdsTableColumn): string;
|
|
3267
|
-
protected
|
|
3564
|
+
protected bodyRowClass(row: any, index: number): string;
|
|
3268
3565
|
protected checkboxClass(checked: boolean, indeterminate: boolean): string;
|
|
3269
3566
|
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>;
|
|
3567
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<SdsTable, "sds-table", never, { "value": { "alias": "value"; "required": false; "isSignal": true; }; "columns": { "alias": "columns"; "required": false; "isSignal": true; }; "dataKey": { "alias": "dataKey"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "striped": { "alias": "striped"; "required": false; "isSignal": true; }; "gridlines": { "alias": "gridlines"; "required": false; "isSignal": true; }; "hoverable": { "alias": "hoverable"; "required": false; "isSignal": true; }; "sortable": { "alias": "sortable"; "required": false; "isSignal": true; }; "paginator": { "alias": "paginator"; "required": false; "isSignal": true; }; "rows": { "alias": "rows"; "required": false; "isSignal": true; }; "rowsPerPageOptions": { "alias": "rowsPerPageOptions"; "required": false; "isSignal": true; }; "showCurrentPageReport": { "alias": "showCurrentPageReport"; "required": false; "isSignal": true; }; "currentPageReportTemplate": { "alias": "currentPageReportTemplate"; "required": false; "isSignal": true; }; "rowsPerPageLabel": { "alias": "rowsPerPageLabel"; "required": false; "isSignal": true; }; "paginationLabel": { "alias": "paginationLabel"; "required": false; "isSignal": true; }; "firstPageLabel": { "alias": "firstPageLabel"; "required": false; "isSignal": true; }; "previousPageLabel": { "alias": "previousPageLabel"; "required": false; "isSignal": true; }; "nextPageLabel": { "alias": "nextPageLabel"; "required": false; "isSignal": true; }; "lastPageLabel": { "alias": "lastPageLabel"; "required": false; "isSignal": true; }; "pageLinkLabel": { "alias": "pageLinkLabel"; "required": false; "isSignal": true; }; "globalFilter": { "alias": "globalFilter"; "required": false; "isSignal": true; }; "globalFilterPlaceholder": { "alias": "globalFilterPlaceholder"; "required": false; "isSignal": true; }; "globalFilterAriaLabel": { "alias": "globalFilterAriaLabel"; "required": false; "isSignal": true; }; "globalFilterFields": { "alias": "globalFilterFields"; "required": false; "isSignal": true; }; "selectionMode": { "alias": "selectionMode"; "required": false; "isSignal": true; }; "selection": { "alias": "selection"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "emptyMessage": { "alias": "emptyMessage"; "required": false; "isSignal": true; }; "rowClickable": { "alias": "rowClickable"; "required": false; "isSignal": true; }; "rowClass": { "alias": "rowClass"; "required": false; "isSignal": true; }; "caption": { "alias": "caption"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "scrollHeight": { "alias": "scrollHeight"; "required": false; "isSignal": true; }; "lazy": { "alias": "lazy"; "required": false; "isSignal": true; }; "totalRecords": { "alias": "totalRecords"; "required": false; "isSignal": true; }; "expandable": { "alias": "expandable"; "required": false; "isSignal": true; }; "resizableColumns": { "alias": "resizableColumns"; "required": false; "isSignal": true; }; "reorderableColumns": { "alias": "reorderableColumns"; "required": false; "isSignal": true; }; "editable": { "alias": "editable"; "required": false; "isSignal": true; }; "editOn": { "alias": "editOn"; "required": false; "isSignal": true; }; "cellErrors": { "alias": "cellErrors"; "required": false; "isSignal": true; }; "locale": { "alias": "locale"; "required": false; "isSignal": true; }; "dirtyLabel": { "alias": "dirtyLabel"; "required": false; "isSignal": true; }; "selectPlaceholder": { "alias": "selectPlaceholder"; "required": false; "isSignal": true; }; "selectAllLabel": { "alias": "selectAllLabel"; "required": false; "isSignal": true; }; "selectRowLabel": { "alias": "selectRowLabel"; "required": false; "isSignal": true; }; "selectionColumnLabel": { "alias": "selectionColumnLabel"; "required": false; "isSignal": true; }; "expandColumnLabel": { "alias": "expandColumnLabel"; "required": false; "isSignal": true; }; "expandRowLabel": { "alias": "expandRowLabel"; "required": false; "isSignal": true; }; "collapseRowLabel": { "alias": "collapseRowLabel"; "required": false; "isSignal": true; }; }, { "selection": "selectionChange"; "sortChange": "sortChange"; "pageChange": "pageChange"; "rowSelect": "rowSelect"; "rowUnselect": "rowUnselect"; "lazyLoad": "lazyLoad"; "rowClick": "rowClick"; "rowExpand": "rowExpand"; "rowCollapse": "rowCollapse"; "colReorder": "colReorder"; "cellCommit": "cellCommit"; }, ["cellTemplates", "headerTemplates", "rowExpansion", "emptyTpl"], never, true, never>;
|
|
3271
3568
|
}
|
|
3272
3569
|
|
|
3273
3570
|
/**
|
|
@@ -3342,6 +3639,34 @@ declare class SdsTableRowExpansion {
|
|
|
3342
3639
|
static ɵdir: _angular_core.ɵɵDirectiveDeclaration<SdsTableRowExpansion, "ng-template[sdsRowExpansion]", never, {}, {}, never, never, true, never>;
|
|
3343
3640
|
}
|
|
3344
3641
|
|
|
3642
|
+
/** Context handed to a table's empty-state template. */
|
|
3643
|
+
interface SdsTableEmptyContext {
|
|
3644
|
+
/** Same as {@link filterText} — enables the implicit `let-query` binding. */
|
|
3645
|
+
$implicit: string;
|
|
3646
|
+
/** The current global-filter text ('' without a filter). */
|
|
3647
|
+
filterText: string;
|
|
3648
|
+
}
|
|
3649
|
+
/**
|
|
3650
|
+
* Replaces the table's plain `emptyMessage` with rich content — an explanation and a call to action,
|
|
3651
|
+
* a "no results for …" line. Rendered in the full-width empty row, only when not `loading`.
|
|
3652
|
+
*
|
|
3653
|
+
* @example
|
|
3654
|
+
* <sds-table [value]="categories()" [columns]="cols">
|
|
3655
|
+
* <ng-template sdsTableEmpty>
|
|
3656
|
+
* <p>No categories yet.</p>
|
|
3657
|
+
* <sds-button size="sm" (click)="create()">Add a category</sds-button>
|
|
3658
|
+
* </ng-template>
|
|
3659
|
+
* </sds-table>
|
|
3660
|
+
*/
|
|
3661
|
+
declare class SdsTableEmpty {
|
|
3662
|
+
/** The wrapped template, rendered by the host table via ngTemplateOutlet. */
|
|
3663
|
+
readonly template: TemplateRef<SdsTableEmptyContext>;
|
|
3664
|
+
/** Lets the compiler type-check `let-*` bindings against SdsTableEmptyContext. */
|
|
3665
|
+
static ngTemplateContextGuard(_dir: SdsTableEmpty, _ctx: unknown): _ctx is SdsTableEmptyContext;
|
|
3666
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<SdsTableEmpty, never>;
|
|
3667
|
+
static ɵdir: _angular_core.ɵɵDirectiveDeclaration<SdsTableEmpty, "ng-template[sdsTableEmpty]", never, {}, {}, never, never, true, never>;
|
|
3668
|
+
}
|
|
3669
|
+
|
|
3345
3670
|
type SdsToastKind = 'success' | 'error' | 'info';
|
|
3346
3671
|
interface SdsToast {
|
|
3347
3672
|
id: number;
|
|
@@ -3685,7 +4010,7 @@ declare class SdsNavGroup {
|
|
|
3685
4010
|
/** Turn the label into an expand/collapse control. */
|
|
3686
4011
|
readonly collapsible: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
3687
4012
|
/** Icon for a collapsible header, so it reads at the same weight as the items it sits among. */
|
|
3688
|
-
readonly icon: _angular_core.InputSignal<"
|
|
4013
|
+
readonly icon: _angular_core.InputSignal<"filter" | "menu" | "search" | "table" | "chart-column" | "clipboard-list" | "credit-card" | "external-link" | "languages" | "megaphone" | "monitor" | "store" | "user-round" | "home" | "user-plus" | "user-check" | "hand" | "users" | "bike" | "building-2" | "package" | "package-plus" | "package-open" | "rotate-ccw" | "bar-chart-3" | "log-out" | "panel-left-close" | "panel-left-open" | "panel-left" | "calendar" | "chevron-right" | "chevron-left" | "chevron-down" | "chevron-up" | "plus" | "minus" | "chevrons-left" | "chevrons-right" | "x" | "check" | "alert-circle" | "info" | "copy" | "type" | "tag" | "ticket" | "square" | "square-check" | "circle-dot" | "circle-user" | "layout-grid" | "panels-top-left" | "panel-top" | "rows-3" | "book-open" | "palette" | "bell" | "phone" | "settings" | "align-left" | "toggle-left" | "arrow-up" | "arrow-down" | "chevrons-up-down" | "qr-code" | "eye" | "eye-off" | "user" | "check-circle" | "arrows-clockwise" | "file-text" | "hash" | "map-pin" | "inbox" | "arrow-right" | "refresh-cw" | "loader-circle" | "bug" | "scroll-text" | "moon" | "sun" | "search-x" | "command" | "sparkles" | "triangle-alert" | "octagon-x" | "ban" | "ellipsis" | "ellipsis-vertical" | "grip-vertical" | "upload" | "image" | "image-off" | "utensils" | "zoom-in" | "zoom-out" | "trash-2" | "clock" | "pencil" | "circle-help" | "stock" | "allergen-cereals-gluten" | "allergen-crustaceans" | "allergen-eggs" | "allergen-fish" | "allergen-peanuts" | "allergen-soybeans" | "allergen-milk" | "allergen-nuts" | "allergen-celery" | "allergen-mustard" | "allergen-sesame" | "allergen-sulphites" | "allergen-lupin" | "allergen-molluscs" | null>;
|
|
3689
4014
|
/**
|
|
3690
4015
|
* URL prefix owned by this group, e.g. `/payments`. While the active route starts with it the
|
|
3691
4016
|
* group counts as active and opens itself — unless the person has explicitly toggled it since.
|
|
@@ -3750,7 +4075,7 @@ type SdsNavItemBadgeTone = 'brand' | 'danger' | 'neutral';
|
|
|
3750
4075
|
*/
|
|
3751
4076
|
declare class SdsNavItem {
|
|
3752
4077
|
protected readonly store: SidebarStore;
|
|
3753
|
-
readonly icon: _angular_core.InputSignal<"
|
|
4078
|
+
readonly icon: _angular_core.InputSignal<"filter" | "menu" | "search" | "table" | "chart-column" | "clipboard-list" | "credit-card" | "external-link" | "languages" | "megaphone" | "monitor" | "store" | "user-round" | "home" | "user-plus" | "user-check" | "hand" | "users" | "bike" | "building-2" | "package" | "package-plus" | "package-open" | "rotate-ccw" | "bar-chart-3" | "log-out" | "panel-left-close" | "panel-left-open" | "panel-left" | "calendar" | "chevron-right" | "chevron-left" | "chevron-down" | "chevron-up" | "plus" | "minus" | "chevrons-left" | "chevrons-right" | "x" | "check" | "alert-circle" | "info" | "copy" | "type" | "tag" | "ticket" | "square" | "square-check" | "circle-dot" | "circle-user" | "layout-grid" | "panels-top-left" | "panel-top" | "rows-3" | "book-open" | "palette" | "bell" | "phone" | "settings" | "align-left" | "toggle-left" | "arrow-up" | "arrow-down" | "chevrons-up-down" | "qr-code" | "eye" | "eye-off" | "user" | "check-circle" | "arrows-clockwise" | "file-text" | "hash" | "map-pin" | "inbox" | "arrow-right" | "refresh-cw" | "loader-circle" | "bug" | "scroll-text" | "moon" | "sun" | "search-x" | "command" | "sparkles" | "triangle-alert" | "octagon-x" | "ban" | "ellipsis" | "ellipsis-vertical" | "grip-vertical" | "upload" | "image" | "image-off" | "utensils" | "zoom-in" | "zoom-out" | "trash-2" | "clock" | "pencil" | "circle-help" | "stock" | "allergen-cereals-gluten" | "allergen-crustaceans" | "allergen-eggs" | "allergen-fish" | "allergen-peanuts" | "allergen-soybeans" | "allergen-milk" | "allergen-nuts" | "allergen-celery" | "allergen-mustard" | "allergen-sesame" | "allergen-sulphites" | "allergen-lupin" | "allergen-molluscs" | null>;
|
|
3754
4079
|
readonly label: _angular_core.InputSignal<string>;
|
|
3755
4080
|
/** Router link target; when null, the item behaves as a button. */
|
|
3756
4081
|
readonly link: _angular_core.InputSignal<string | unknown[] | null>;
|
|
@@ -3866,7 +4191,7 @@ type SdsMenuItemTone = 'default' | 'danger';
|
|
|
3866
4191
|
* <sds-menu-item icon="log-out" label="Sign out" tone="danger" (select)="signOut()" />
|
|
3867
4192
|
*/
|
|
3868
4193
|
declare class SdsMenuItem {
|
|
3869
|
-
readonly icon: _angular_core.InputSignal<"
|
|
4194
|
+
readonly icon: _angular_core.InputSignal<"filter" | "menu" | "search" | "table" | "chart-column" | "clipboard-list" | "credit-card" | "external-link" | "languages" | "megaphone" | "monitor" | "store" | "user-round" | "home" | "user-plus" | "user-check" | "hand" | "users" | "bike" | "building-2" | "package" | "package-plus" | "package-open" | "rotate-ccw" | "bar-chart-3" | "log-out" | "panel-left-close" | "panel-left-open" | "panel-left" | "calendar" | "chevron-right" | "chevron-left" | "chevron-down" | "chevron-up" | "plus" | "minus" | "chevrons-left" | "chevrons-right" | "x" | "check" | "alert-circle" | "info" | "copy" | "type" | "tag" | "ticket" | "square" | "square-check" | "circle-dot" | "circle-user" | "layout-grid" | "panels-top-left" | "panel-top" | "rows-3" | "book-open" | "palette" | "bell" | "phone" | "settings" | "align-left" | "toggle-left" | "arrow-up" | "arrow-down" | "chevrons-up-down" | "qr-code" | "eye" | "eye-off" | "user" | "check-circle" | "arrows-clockwise" | "file-text" | "hash" | "map-pin" | "inbox" | "arrow-right" | "refresh-cw" | "loader-circle" | "bug" | "scroll-text" | "moon" | "sun" | "search-x" | "command" | "sparkles" | "triangle-alert" | "octagon-x" | "ban" | "ellipsis" | "ellipsis-vertical" | "grip-vertical" | "upload" | "image" | "image-off" | "utensils" | "zoom-in" | "zoom-out" | "trash-2" | "clock" | "pencil" | "circle-help" | "stock" | "allergen-cereals-gluten" | "allergen-crustaceans" | "allergen-eggs" | "allergen-fish" | "allergen-peanuts" | "allergen-soybeans" | "allergen-milk" | "allergen-nuts" | "allergen-celery" | "allergen-mustard" | "allergen-sesame" | "allergen-sulphites" | "allergen-lupin" | "allergen-molluscs" | null>;
|
|
3870
4195
|
readonly label: _angular_core.InputSignal<string>;
|
|
3871
4196
|
/** Router link target for an in-app route; when null (default) the item is not a Router link. */
|
|
3872
4197
|
readonly link: _angular_core.InputSignal<string | unknown[] | null>;
|
|
@@ -4091,5 +4416,5 @@ declare class SdsLanguageSwitcher implements OnDestroy {
|
|
|
4091
4416
|
static ɵcmp: _angular_core.ɵɵComponentDeclaration<SdsLanguageSwitcher, "sds-language-switcher", never, { "languages": { "alias": "languages"; "required": false; "isSignal": true; }; "current": { "alias": "current"; "required": false; "isSignal": true; }; "appearance": { "alias": "appearance"; "required": false; "isSignal": true; }; "align": { "alias": "align"; "required": false; "isSignal": true; }; "direction": { "alias": "direction"; "required": false; "isSignal": true; }; "menuLabel": { "alias": "menuLabel"; "required": false; "isSignal": true; }; "heading": { "alias": "heading"; "required": false; "isSignal": true; }; }, { "current": "currentChange"; "openChange": "openChange"; }, never, never, true, never>;
|
|
4092
4417
|
}
|
|
4093
4418
|
|
|
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 };
|
|
4419
|
+
export { SDS_ALLERGENS, SDS_ALLERGEN_ICONS, SDS_ALLERGEN_LABELS_EN, SDS_ICONS, SDS_PHONE_COUNTRIES, SdsAccordion, SdsAccordionContent, SdsAccordionHeader, SdsAccordionPanel, SdsAccordionStore, SdsAllergenIcon, SdsAvatar, SdsBadge, SdsBulkBar, SdsButton, SdsCalendar, SdsCard, SdsCheckbox, SdsChecklistRow, SdsChip, SdsChipGroup, SdsDatePicker, SdsFileDrop, SdsIcon, SdsImageCropper, SdsInput, SdsInputNumber, SdsLanguageSwitcher, SdsLocalizedInput, SdsMenu, SdsMenuItem, SdsMenuTrigger, SdsMultiSelect, SdsNavGroup, SdsNavItem, SdsOtpInput, SdsPaginator, SdsPhoneInput, SdsRadio, SdsScore, SdsSearchCommand, SdsSegmented, SdsSelect, SdsSelectEmpty, SdsSelectFooter, SdsSelectOption, SdsShell, SdsSidebar, SdsSortableHandle, SdsSortableItem, SdsSortableList, SdsStatusTile, SdsTab, SdsTabList, SdsTabPanel, SdsTabPanels, SdsTable, SdsTableCell, SdsTableEmpty, SdsTableHeader, SdsTableRowExpansion, SdsTabs, SdsTabsStore, SdsTextarea, SdsThemeService, SdsThemeToggle, SdsTimeInput, SdsToastHost, SdsToastService, SdsToggleSwitch, SdsTopbar, SdsTriStateChip, SdsUserMenu, SidebarStore, addDays, addMonths, addMonthsKeepDay, formatDdMmYyyy, formatHhMm, isOutOfRange, isSameDay, isoDay, pad2, sdsFileMatchesAccept, sdsFormatBytes, sdsFormatNational, sdsMatchDialCode, sdsNormalizeSignificant, startOfDay, startOfMonth };
|
|
4420
|
+
export type { SdsAccordionActive, SdsAccordionValue, SdsAllergen, SdsAvatarShape, SdsAvatarStatus, SdsBadgeSize, SdsBadgeVariant, SdsBulkBarPosition, SdsButtonShape, SdsButtonSize, SdsButtonVariant, SdsCardVariant, SdsCheckboxSize, SdsChecklistStatus, SdsChipOption, SdsChipSize, SdsCropRect, SdsDatePickerSize, SdsFileRejection, SdsFileRejectionReason, SdsIconName, SdsIconSize, SdsImageCropperBlobOptions, SdsImageCropperShape, SdsInputAppearance, SdsInputNumberAppearance, SdsInputNumberButtonLayout, SdsInputNumberCurrencyDisplay, SdsInputNumberMode, SdsInputNumberSize, SdsInputShape, SdsInputSize, SdsInputType, SdsLanguageOption, SdsLanguageSwitcherAlign, SdsLanguageSwitcherAppearance, SdsLanguageSwitcherDirection, SdsLocalizedInputSize, SdsLocalizedValue, SdsMenuAction, SdsMenuAlign, SdsMenuEntry, SdsMenuItemTone, SdsMenuSeparator, SdsMultiSelectDisplay, SdsMultiSelectSize, SdsNavItemBadgeTone, SdsOtpInputSize, SdsPaginatorSize, SdsPaginatorState, SdsPhoneCountry, SdsPhoneInputSize, SdsPhoneValue, SdsRadioSize, SdsScoreSize, SdsScoreTier, SdsScoreVariant, SdsSearchAppearance, SdsSearchItem, SdsSegmentedOption, SdsSegmentedSize, SdsSelectAppearance, SdsSelectEmptyContext, SdsSelectFooterContext, SdsSelectOptionContext, SdsSelectSize, SdsShellBackground, SdsSidebarAppearance, SdsSortOrder, SdsSortableAppearance, SdsSortableItemContext, SdsSortableReorderEvent, SdsStatusTileState, SdsTabValue, SdsTableCellCommitEvent, SdsTableCellContext, SdsTableCellErrors, SdsTableColumn, SdsTableEditTrigger, SdsTableEditor, SdsTableEmptyContext, SdsTableHeaderContext, SdsTableLazyEvent, SdsTableRowExpansionContext, SdsTableSelectOption, SdsTableSize, SdsTableSortEvent, SdsTextareaAppearance, SdsTextareaResize, SdsTextareaSize, SdsTheme, SdsThemeToggleAppearance, SdsTimeInputAppearance, SdsTimeInputSize, SdsToast, SdsToastKind, SdsToggleSwitchSize, SdsTopbarAppearance, SdsTriState, SdsTriStateChipSize, SdsUserMenuAlign, SdsUserMenuAppearance };
|