@besaitech/ng-design-system 0.0.52 → 0.0.53
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/fesm2022/besaitech-ng-design-system.mjs +3656 -140
- package/fesm2022/besaitech-ng-design-system.mjs.map +1 -1
- package/index.d.ts +899 -21
- package/package.json +1 -1
package/index.d.ts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as _angular_core from '@angular/core';
|
|
2
|
-
import { OnDestroy, TemplateRef, WritableSignal, OnInit } from '@angular/core';
|
|
2
|
+
import { OnDestroy, ElementRef, TemplateRef, WritableSignal, OnInit } from '@angular/core';
|
|
3
3
|
import { SafeHtml } from '@angular/platform-browser';
|
|
4
4
|
import { ControlValueAccessor, Validator, AbstractControl, ValidationErrors } from '@angular/forms';
|
|
5
5
|
import * as _besaitech_ng_design_system from '@besaitech/ng-design-system';
|
|
@@ -94,6 +94,19 @@ declare const SDS_ICONS: {
|
|
|
94
94
|
readonly 'search-x': "<path d=\"m13.5 8.5-5 5\"/><path d=\"m8.5 8.5 5 5\"/><circle cx=\"11\" cy=\"11\" r=\"8\"/><path d=\"m21 21-4.3-4.3\"/>";
|
|
95
95
|
readonly command: "<path d=\"M15 6v12a3 3 0 1 0 3-3H6a3 3 0 1 0 3 3V6a3 3 0 1 0-3 3h12a3 3 0 1 0-3-3\"/>";
|
|
96
96
|
readonly sparkles: "<path d=\"M9.937 15.5A2 2 0 0 0 8.5 14.063l-6.135-1.582a.5.5 0 0 1 0-.962L8.5 9.936A2 2 0 0 0 9.937 8.5l1.582-6.135a.5.5 0 0 1 .963 0L14.063 8.5A2 2 0 0 0 15.5 9.937l6.135 1.581a.5.5 0 0 1 0 .964L15.5 14.063a2 2 0 0 0-1.437 1.437l-1.582 6.135a.5.5 0 0 1-.963 0z\"/><path d=\"M20 3v4\"/><path d=\"M22 5h-4\"/><path d=\"M4 17v2\"/><path d=\"M5 18H3\"/>";
|
|
97
|
+
readonly 'triangle-alert': "<path d=\"m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3\"/><path d=\"M12 9v4\"/><path d=\"M12 17h.01\"/>";
|
|
98
|
+
readonly 'octagon-x': "<path d=\"m15 9-6 6\"/><path d=\"M2.586 16.726A2 2 0 0 1 2 15.312V8.688a2 2 0 0 1 .586-1.414l4.688-4.688A2 2 0 0 1 8.688 2h6.624a2 2 0 0 1 1.414.586l4.688 4.688A2 2 0 0 1 22 8.688v6.624a2 2 0 0 1-.586 1.414l-4.688 4.688a2 2 0 0 1-1.414.586H8.688a2 2 0 0 1-1.414-.586z\"/><path d=\"m9 9 6 6\"/>";
|
|
99
|
+
readonly ban: "<circle cx=\"12\" cy=\"12\" r=\"10\"/><path d=\"m4.9 4.9 14.2 14.2\"/>";
|
|
100
|
+
readonly ellipsis: "<circle cx=\"12\" cy=\"12\" r=\"1\"/><circle cx=\"19\" cy=\"12\" r=\"1\"/><circle cx=\"5\" cy=\"12\" r=\"1\"/>";
|
|
101
|
+
readonly 'ellipsis-vertical': "<circle cx=\"12\" cy=\"12\" r=\"1\"/><circle cx=\"12\" cy=\"5\" r=\"1\"/><circle cx=\"12\" cy=\"19\" r=\"1\"/>";
|
|
102
|
+
readonly 'grip-vertical': "<circle cx=\"9\" cy=\"12\" r=\"1\"/><circle cx=\"9\" cy=\"5\" r=\"1\"/><circle cx=\"9\" cy=\"19\" r=\"1\"/><circle cx=\"15\" cy=\"12\" r=\"1\"/><circle cx=\"15\" cy=\"5\" r=\"1\"/><circle cx=\"15\" cy=\"19\" r=\"1\"/>";
|
|
103
|
+
readonly upload: "<path d=\"M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4\"/><polyline points=\"17 8 12 3 7 8\"/><line x1=\"12\" x2=\"12\" y1=\"3\" y2=\"15\"/>";
|
|
104
|
+
readonly image: "<rect width=\"18\" height=\"18\" x=\"3\" y=\"3\" rx=\"2\" ry=\"2\"/><circle cx=\"9\" cy=\"9\" r=\"2\"/><path d=\"m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21\"/>";
|
|
105
|
+
readonly 'zoom-in': "<circle cx=\"11\" cy=\"11\" r=\"8\"/><line x1=\"21\" x2=\"16.65\" y1=\"21\" y2=\"16.65\"/><line x1=\"11\" x2=\"11\" y1=\"8\" y2=\"14\"/><line x1=\"8\" x2=\"14\" y1=\"11\" y2=\"11\"/>";
|
|
106
|
+
readonly 'zoom-out': "<circle cx=\"11\" cy=\"11\" r=\"8\"/><line x1=\"21\" x2=\"16.65\" y1=\"21\" y2=\"16.65\"/><line x1=\"8\" x2=\"14\" y1=\"11\" y2=\"11\"/>";
|
|
107
|
+
readonly 'trash-2': "<path d=\"M3 6h18\"/><path d=\"M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6\"/><path d=\"M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2\"/><line x1=\"10\" x2=\"10\" y1=\"11\" y2=\"17\"/><line x1=\"14\" x2=\"14\" y1=\"11\" y2=\"17\"/>";
|
|
108
|
+
readonly clock: "<circle cx=\"12\" cy=\"12\" r=\"10\"/><polyline points=\"12 6 12 12 16 14\"/>";
|
|
109
|
+
readonly pencil: "<path d=\"M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z\"/><path d=\"m15 5 4 4\"/>";
|
|
97
110
|
readonly 'circle-help': "<circle cx=\"12\" cy=\"12\" r=\"10\"/><path d=\"M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3\"/><path d=\"M12 17h.01\"/>";
|
|
98
111
|
readonly stock: "<rect x=\"3\" y=\"13\" width=\"8\" height=\"8\" rx=\"1\"/><rect x=\"13\" y=\"13\" width=\"8\" height=\"8\" rx=\"1\"/><rect x=\"8\" y=\"3\" width=\"8\" height=\"8\" rx=\"1\"/><path d=\"M6 13v2.5h2V13\"/><path d=\"M16 13v2.5h2V13\"/><path d=\"M11 3v2.5h2V3\"/>";
|
|
99
112
|
readonly 'allergen-cereals-gluten': "<path d=\"M12 22V8\"/><path d=\"M12 8c-1.6-1.6-1.6-4.2 0-6 1.6 1.8 1.6 4.4 0 6z\"/><path d=\"M12 13c-2.6 0-4.6-1.6-5.2-4.2 2.6 0 4.6 1.6 5.2 4.2z\"/><path d=\"M12 13c2.6 0 4.6-1.6 5.2-4.2-2.6 0-4.6 1.6-5.2 4.2z\"/><path d=\"M12 18c-2.6 0-4.6-1.6-5.2-4.2 2.6 0 4.6 1.6 5.2 4.2z\"/><path d=\"M12 18c2.6 0 4.6-1.6 5.2-4.2-2.6 0-4.6 1.6-5.2 4.2z\"/>";
|
|
@@ -124,7 +137,7 @@ type SdsIconSize = 'sm' | 'md' | 'lg' | 'xl';
|
|
|
124
137
|
declare class SdsIcon {
|
|
125
138
|
private readonly sanitizer;
|
|
126
139
|
/** Icon identifier from the registry. */
|
|
127
|
-
readonly name: _angular_core.InputSignal<"chart-column" | "clipboard-list" | "credit-card" | "external-link" | "languages" | "megaphone" | "monitor" | "store" | "user-round" | "home" | "user-plus" | "user-check" | "hand" | "users" | "bike" | "building-2" | "package" | "package-plus" | "package-open" | "rotate-ccw" | "bar-chart-3" | "search" | "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" | "filter" | "table" | "qr-code" | "eye" | "eye-off" | "user" | "check-circle" | "arrows-clockwise" | "menu" | "file-text" | "hash" | "map-pin" | "inbox" | "arrow-right" | "refresh-cw" | "loader-circle" | "bug" | "scroll-text" | "moon" | "sun" | "search-x" | "command" | "sparkles" | "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">;
|
|
140
|
+
readonly name: _angular_core.InputSignal<"chart-column" | "clipboard-list" | "credit-card" | "external-link" | "languages" | "megaphone" | "monitor" | "store" | "user-round" | "home" | "user-plus" | "user-check" | "hand" | "users" | "bike" | "building-2" | "package" | "package-plus" | "package-open" | "rotate-ccw" | "bar-chart-3" | "search" | "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" | "filter" | "table" | "qr-code" | "eye" | "eye-off" | "user" | "check-circle" | "arrows-clockwise" | "menu" | "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" | "zoom-in" | "zoom-out" | "trash-2" | "clock" | "pencil" | "circle-help" | "stock" | "allergen-cereals-gluten" | "allergen-crustaceans" | "allergen-eggs" | "allergen-fish" | "allergen-peanuts" | "allergen-soybeans" | "allergen-milk" | "allergen-nuts" | "allergen-celery" | "allergen-mustard" | "allergen-sesame" | "allergen-sulphites" | "allergen-lupin" | "allergen-molluscs">;
|
|
128
141
|
/** Square size: a pixel number, a numeric string, or a keyword (sm·md·lg·xl). */
|
|
129
142
|
readonly size: _angular_core.InputSignalWithTransform<number, string | number>;
|
|
130
143
|
/** Stroke width of the line icon. */
|
|
@@ -154,7 +167,7 @@ declare class SdsButton {
|
|
|
154
167
|
* most important control.
|
|
155
168
|
*/
|
|
156
169
|
readonly shape: _angular_core.InputSignal<SdsButtonShape>;
|
|
157
|
-
readonly type: _angular_core.InputSignal<"button" | "
|
|
170
|
+
readonly type: _angular_core.InputSignal<"button" | "reset" | "submit">;
|
|
158
171
|
readonly disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
159
172
|
readonly loading: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
160
173
|
/** Full-width button. */
|
|
@@ -224,8 +237,8 @@ declare class SdsInput implements ControlValueAccessor {
|
|
|
224
237
|
* is its only name.
|
|
225
238
|
*/
|
|
226
239
|
readonly clearLabel: _angular_core.InputSignal<string>;
|
|
227
|
-
readonly leadingIcon: _angular_core.InputSignal<"chart-column" | "clipboard-list" | "credit-card" | "external-link" | "languages" | "megaphone" | "monitor" | "store" | "user-round" | "home" | "user-plus" | "user-check" | "hand" | "users" | "bike" | "building-2" | "package" | "package-plus" | "package-open" | "rotate-ccw" | "bar-chart-3" | "search" | "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" | "filter" | "table" | "qr-code" | "eye" | "eye-off" | "user" | "check-circle" | "arrows-clockwise" | "menu" | "file-text" | "hash" | "map-pin" | "inbox" | "arrow-right" | "refresh-cw" | "loader-circle" | "bug" | "scroll-text" | "moon" | "sun" | "search-x" | "command" | "sparkles" | "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>;
|
|
228
|
-
readonly trailingIcon: _angular_core.InputSignal<"chart-column" | "clipboard-list" | "credit-card" | "external-link" | "languages" | "megaphone" | "monitor" | "store" | "user-round" | "home" | "user-plus" | "user-check" | "hand" | "users" | "bike" | "building-2" | "package" | "package-plus" | "package-open" | "rotate-ccw" | "bar-chart-3" | "search" | "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" | "filter" | "table" | "qr-code" | "eye" | "eye-off" | "user" | "check-circle" | "arrows-clockwise" | "menu" | "file-text" | "hash" | "map-pin" | "inbox" | "arrow-right" | "refresh-cw" | "loader-circle" | "bug" | "scroll-text" | "moon" | "sun" | "search-x" | "command" | "sparkles" | "circle-help" | "stock" | "allergen-cereals-gluten" | "allergen-crustaceans" | "allergen-eggs" | "allergen-fish" | "allergen-peanuts" | "allergen-soybeans" | "allergen-milk" | "allergen-nuts" | "allergen-celery" | "allergen-mustard" | "allergen-sesame" | "allergen-sulphites" | "allergen-lupin" | "allergen-molluscs" | null>;
|
|
240
|
+
readonly leadingIcon: _angular_core.InputSignal<"chart-column" | "clipboard-list" | "credit-card" | "external-link" | "languages" | "megaphone" | "monitor" | "store" | "user-round" | "home" | "user-plus" | "user-check" | "hand" | "users" | "bike" | "building-2" | "package" | "package-plus" | "package-open" | "rotate-ccw" | "bar-chart-3" | "search" | "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" | "filter" | "table" | "qr-code" | "eye" | "eye-off" | "user" | "check-circle" | "arrows-clockwise" | "menu" | "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" | "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
|
+
readonly trailingIcon: _angular_core.InputSignal<"chart-column" | "clipboard-list" | "credit-card" | "external-link" | "languages" | "megaphone" | "monitor" | "store" | "user-round" | "home" | "user-plus" | "user-check" | "hand" | "users" | "bike" | "building-2" | "package" | "package-plus" | "package-open" | "rotate-ccw" | "bar-chart-3" | "search" | "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" | "filter" | "table" | "qr-code" | "eye" | "eye-off" | "user" | "check-circle" | "arrows-clockwise" | "menu" | "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" | "zoom-in" | "zoom-out" | "trash-2" | "clock" | "pencil" | "circle-help" | "stock" | "allergen-cereals-gluten" | "allergen-crustaceans" | "allergen-eggs" | "allergen-fish" | "allergen-peanuts" | "allergen-soybeans" | "allergen-milk" | "allergen-nuts" | "allergen-celery" | "allergen-mustard" | "allergen-sesame" | "allergen-sulphites" | "allergen-lupin" | "allergen-molluscs" | null>;
|
|
229
242
|
/**
|
|
230
243
|
* A CLICKABLE trailing icon, for the affordances that belong to the field itself — password reveal
|
|
231
244
|
* above all. Distinct from {@link trailingIcon}, which is decorative and explicitly
|
|
@@ -235,7 +248,7 @@ declare class SdsInput implements ControlValueAccessor {
|
|
|
235
248
|
* Always pair it with {@link trailingActionLabel} — an icon-only button with no accessible name is
|
|
236
249
|
* unusable by a screen reader. For a toggle, also bind {@link trailingActionPressed}.
|
|
237
250
|
*/
|
|
238
|
-
readonly trailingAction: _angular_core.InputSignal<"chart-column" | "clipboard-list" | "credit-card" | "external-link" | "languages" | "megaphone" | "monitor" | "store" | "user-round" | "home" | "user-plus" | "user-check" | "hand" | "users" | "bike" | "building-2" | "package" | "package-plus" | "package-open" | "rotate-ccw" | "bar-chart-3" | "search" | "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" | "filter" | "table" | "qr-code" | "eye" | "eye-off" | "user" | "check-circle" | "arrows-clockwise" | "menu" | "file-text" | "hash" | "map-pin" | "inbox" | "arrow-right" | "refresh-cw" | "loader-circle" | "bug" | "scroll-text" | "moon" | "sun" | "search-x" | "command" | "sparkles" | "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
|
+
readonly trailingAction: _angular_core.InputSignal<"chart-column" | "clipboard-list" | "credit-card" | "external-link" | "languages" | "megaphone" | "monitor" | "store" | "user-round" | "home" | "user-plus" | "user-check" | "hand" | "users" | "bike" | "building-2" | "package" | "package-plus" | "package-open" | "rotate-ccw" | "bar-chart-3" | "search" | "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" | "filter" | "table" | "qr-code" | "eye" | "eye-off" | "user" | "check-circle" | "arrows-clockwise" | "menu" | "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" | "zoom-in" | "zoom-out" | "trash-2" | "clock" | "pencil" | "circle-help" | "stock" | "allergen-cereals-gluten" | "allergen-crustaceans" | "allergen-eggs" | "allergen-fish" | "allergen-peanuts" | "allergen-soybeans" | "allergen-milk" | "allergen-nuts" | "allergen-celery" | "allergen-mustard" | "allergen-sesame" | "allergen-sulphites" | "allergen-lupin" | "allergen-molluscs" | null>;
|
|
239
252
|
/** Accessible name for {@link trailingAction}. Translate it in the consuming app. */
|
|
240
253
|
readonly trailingActionLabel: _angular_core.InputSignal<string>;
|
|
241
254
|
/** `aria-pressed` for a toggling action (e.g. show/hide password). Null renders no attribute. */
|
|
@@ -330,9 +343,9 @@ declare class SdsInputNumber implements ControlValueAccessor {
|
|
|
330
343
|
readonly showButtons: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
331
344
|
readonly buttonLayout: _angular_core.InputSignal<SdsInputNumberButtonLayout>;
|
|
332
345
|
/** Override the increment button icon (defaults: chevron-up when stacked, plus otherwise). */
|
|
333
|
-
readonly incrementIcon: _angular_core.InputSignal<"chart-column" | "clipboard-list" | "credit-card" | "external-link" | "languages" | "megaphone" | "monitor" | "store" | "user-round" | "home" | "user-plus" | "user-check" | "hand" | "users" | "bike" | "building-2" | "package" | "package-plus" | "package-open" | "rotate-ccw" | "bar-chart-3" | "search" | "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" | "filter" | "table" | "qr-code" | "eye" | "eye-off" | "user" | "check-circle" | "arrows-clockwise" | "menu" | "file-text" | "hash" | "map-pin" | "inbox" | "arrow-right" | "refresh-cw" | "loader-circle" | "bug" | "scroll-text" | "moon" | "sun" | "search-x" | "command" | "sparkles" | "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>;
|
|
346
|
+
readonly incrementIcon: _angular_core.InputSignal<"chart-column" | "clipboard-list" | "credit-card" | "external-link" | "languages" | "megaphone" | "monitor" | "store" | "user-round" | "home" | "user-plus" | "user-check" | "hand" | "users" | "bike" | "building-2" | "package" | "package-plus" | "package-open" | "rotate-ccw" | "bar-chart-3" | "search" | "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" | "filter" | "table" | "qr-code" | "eye" | "eye-off" | "user" | "check-circle" | "arrows-clockwise" | "menu" | "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" | "zoom-in" | "zoom-out" | "trash-2" | "clock" | "pencil" | "circle-help" | "stock" | "allergen-cereals-gluten" | "allergen-crustaceans" | "allergen-eggs" | "allergen-fish" | "allergen-peanuts" | "allergen-soybeans" | "allergen-milk" | "allergen-nuts" | "allergen-celery" | "allergen-mustard" | "allergen-sesame" | "allergen-sulphites" | "allergen-lupin" | "allergen-molluscs" | null>;
|
|
334
347
|
/** Override the decrement button icon (defaults: chevron-down when stacked, minus otherwise). */
|
|
335
|
-
readonly decrementIcon: _angular_core.InputSignal<"chart-column" | "clipboard-list" | "credit-card" | "external-link" | "languages" | "megaphone" | "monitor" | "store" | "user-round" | "home" | "user-plus" | "user-check" | "hand" | "users" | "bike" | "building-2" | "package" | "package-plus" | "package-open" | "rotate-ccw" | "bar-chart-3" | "search" | "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" | "filter" | "table" | "qr-code" | "eye" | "eye-off" | "user" | "check-circle" | "arrows-clockwise" | "menu" | "file-text" | "hash" | "map-pin" | "inbox" | "arrow-right" | "refresh-cw" | "loader-circle" | "bug" | "scroll-text" | "moon" | "sun" | "search-x" | "command" | "sparkles" | "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>;
|
|
348
|
+
readonly decrementIcon: _angular_core.InputSignal<"chart-column" | "clipboard-list" | "credit-card" | "external-link" | "languages" | "megaphone" | "monitor" | "store" | "user-round" | "home" | "user-plus" | "user-check" | "hand" | "users" | "bike" | "building-2" | "package" | "package-plus" | "package-open" | "rotate-ccw" | "bar-chart-3" | "search" | "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" | "filter" | "table" | "qr-code" | "eye" | "eye-off" | "user" | "check-circle" | "arrows-clockwise" | "menu" | "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" | "zoom-in" | "zoom-out" | "trash-2" | "clock" | "pencil" | "circle-help" | "stock" | "allergen-cereals-gluten" | "allergen-crustaceans" | "allergen-eggs" | "allergen-fish" | "allergen-peanuts" | "allergen-soybeans" | "allergen-milk" | "allergen-nuts" | "allergen-celery" | "allergen-mustard" | "allergen-sesame" | "allergen-sulphites" | "allergen-lupin" | "allergen-molluscs" | null>;
|
|
336
349
|
/** Allow an empty (null) value. When false, blurring an empty field falls back to {@link min} or 0. */
|
|
337
350
|
readonly allowEmpty: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
338
351
|
readonly clearable: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
@@ -349,8 +362,8 @@ declare class SdsInputNumber implements ControlValueAccessor {
|
|
|
349
362
|
protected readonly isDisabled: _angular_core.Signal<boolean>;
|
|
350
363
|
protected readonly describedBy: _angular_core.Signal<string | null>;
|
|
351
364
|
protected readonly clearVisible: _angular_core.Signal<boolean>;
|
|
352
|
-
protected readonly incrementIconName: _angular_core.Signal<"chart-column" | "clipboard-list" | "credit-card" | "external-link" | "languages" | "megaphone" | "monitor" | "store" | "user-round" | "home" | "user-plus" | "user-check" | "hand" | "users" | "bike" | "building-2" | "package" | "package-plus" | "package-open" | "rotate-ccw" | "bar-chart-3" | "search" | "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" | "filter" | "table" | "qr-code" | "eye" | "eye-off" | "user" | "check-circle" | "arrows-clockwise" | "menu" | "file-text" | "hash" | "map-pin" | "inbox" | "arrow-right" | "refresh-cw" | "loader-circle" | "bug" | "scroll-text" | "moon" | "sun" | "search-x" | "command" | "sparkles" | "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">;
|
|
353
|
-
protected readonly decrementIconName: _angular_core.Signal<"chart-column" | "clipboard-list" | "credit-card" | "external-link" | "languages" | "megaphone" | "monitor" | "store" | "user-round" | "home" | "user-plus" | "user-check" | "hand" | "users" | "bike" | "building-2" | "package" | "package-plus" | "package-open" | "rotate-ccw" | "bar-chart-3" | "search" | "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" | "filter" | "table" | "qr-code" | "eye" | "eye-off" | "user" | "check-circle" | "arrows-clockwise" | "menu" | "file-text" | "hash" | "map-pin" | "inbox" | "arrow-right" | "refresh-cw" | "loader-circle" | "bug" | "scroll-text" | "moon" | "sun" | "search-x" | "command" | "sparkles" | "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">;
|
|
365
|
+
protected readonly incrementIconName: _angular_core.Signal<"chart-column" | "clipboard-list" | "credit-card" | "external-link" | "languages" | "megaphone" | "monitor" | "store" | "user-round" | "home" | "user-plus" | "user-check" | "hand" | "users" | "bike" | "building-2" | "package" | "package-plus" | "package-open" | "rotate-ccw" | "bar-chart-3" | "search" | "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" | "filter" | "table" | "qr-code" | "eye" | "eye-off" | "user" | "check-circle" | "arrows-clockwise" | "menu" | "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" | "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">;
|
|
366
|
+
protected readonly decrementIconName: _angular_core.Signal<"chart-column" | "clipboard-list" | "credit-card" | "external-link" | "languages" | "megaphone" | "monitor" | "store" | "user-round" | "home" | "user-plus" | "user-check" | "hand" | "users" | "bike" | "building-2" | "package" | "package-plus" | "package-open" | "rotate-ccw" | "bar-chart-3" | "search" | "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" | "filter" | "table" | "qr-code" | "eye" | "eye-off" | "user" | "check-circle" | "arrows-clockwise" | "menu" | "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" | "zoom-in" | "zoom-out" | "trash-2" | "clock" | "pencil" | "circle-help" | "stock" | "allergen-cereals-gluten" | "allergen-crustaceans" | "allergen-eggs" | "allergen-fish" | "allergen-peanuts" | "allergen-soybeans" | "allergen-milk" | "allergen-nuts" | "allergen-celery" | "allergen-mustard" | "allergen-sesame" | "allergen-sulphites" | "allergen-lupin" | "allergen-molluscs">;
|
|
354
367
|
protected readonly canIncrement: _angular_core.Signal<boolean>;
|
|
355
368
|
protected readonly canDecrement: _angular_core.Signal<boolean>;
|
|
356
369
|
/** Locale grouping/decimal separators, derived from Intl so parsing matches formatting. */
|
|
@@ -367,6 +380,14 @@ declare class SdsInputNumber implements ControlValueAccessor {
|
|
|
367
380
|
protected readonly edgeButtonClasses: _angular_core.Signal<string>;
|
|
368
381
|
protected readonly stackedButtonClasses: _angular_core.Signal<string>;
|
|
369
382
|
constructor();
|
|
383
|
+
/**
|
|
384
|
+
* Focus the field, painting the current value into it first (the live-format effect stands down while
|
|
385
|
+
* the field is focused, so a value written just before focusing would otherwise not show). With
|
|
386
|
+
* `select`, the text is selected — handy for an in-cell editor.
|
|
387
|
+
*/
|
|
388
|
+
focus(options?: {
|
|
389
|
+
select?: boolean;
|
|
390
|
+
}): void;
|
|
370
391
|
private isActive;
|
|
371
392
|
/** Paint the committed value into the field imperatively (used by spin/clear/blur). */
|
|
372
393
|
private paintCommitted;
|
|
@@ -620,9 +641,9 @@ declare class SdsToggleSwitch implements ControlValueAccessor {
|
|
|
620
641
|
/** Value emitted/stored when the switch is off. */
|
|
621
642
|
readonly falseValue: _angular_core.InputSignal<unknown>;
|
|
622
643
|
/** Icon shown on the knob when checked. */
|
|
623
|
-
readonly onIcon: _angular_core.InputSignal<"chart-column" | "clipboard-list" | "credit-card" | "external-link" | "languages" | "megaphone" | "monitor" | "store" | "user-round" | "home" | "user-plus" | "user-check" | "hand" | "users" | "bike" | "building-2" | "package" | "package-plus" | "package-open" | "rotate-ccw" | "bar-chart-3" | "search" | "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" | "filter" | "table" | "qr-code" | "eye" | "eye-off" | "user" | "check-circle" | "arrows-clockwise" | "menu" | "file-text" | "hash" | "map-pin" | "inbox" | "arrow-right" | "refresh-cw" | "loader-circle" | "bug" | "scroll-text" | "moon" | "sun" | "search-x" | "command" | "sparkles" | "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>;
|
|
644
|
+
readonly onIcon: _angular_core.InputSignal<"chart-column" | "clipboard-list" | "credit-card" | "external-link" | "languages" | "megaphone" | "monitor" | "store" | "user-round" | "home" | "user-plus" | "user-check" | "hand" | "users" | "bike" | "building-2" | "package" | "package-plus" | "package-open" | "rotate-ccw" | "bar-chart-3" | "search" | "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" | "filter" | "table" | "qr-code" | "eye" | "eye-off" | "user" | "check-circle" | "arrows-clockwise" | "menu" | "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" | "zoom-in" | "zoom-out" | "trash-2" | "clock" | "pencil" | "circle-help" | "stock" | "allergen-cereals-gluten" | "allergen-crustaceans" | "allergen-eggs" | "allergen-fish" | "allergen-peanuts" | "allergen-soybeans" | "allergen-milk" | "allergen-nuts" | "allergen-celery" | "allergen-mustard" | "allergen-sesame" | "allergen-sulphites" | "allergen-lupin" | "allergen-molluscs" | null>;
|
|
624
645
|
/** Icon shown on the knob when unchecked. */
|
|
625
|
-
readonly offIcon: _angular_core.InputSignal<"chart-column" | "clipboard-list" | "credit-card" | "external-link" | "languages" | "megaphone" | "monitor" | "store" | "user-round" | "home" | "user-plus" | "user-check" | "hand" | "users" | "bike" | "building-2" | "package" | "package-plus" | "package-open" | "rotate-ccw" | "bar-chart-3" | "search" | "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" | "filter" | "table" | "qr-code" | "eye" | "eye-off" | "user" | "check-circle" | "arrows-clockwise" | "menu" | "file-text" | "hash" | "map-pin" | "inbox" | "arrow-right" | "refresh-cw" | "loader-circle" | "bug" | "scroll-text" | "moon" | "sun" | "search-x" | "command" | "sparkles" | "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>;
|
|
646
|
+
readonly offIcon: _angular_core.InputSignal<"chart-column" | "clipboard-list" | "credit-card" | "external-link" | "languages" | "megaphone" | "monitor" | "store" | "user-round" | "home" | "user-plus" | "user-check" | "hand" | "users" | "bike" | "building-2" | "package" | "package-plus" | "package-open" | "rotate-ccw" | "bar-chart-3" | "search" | "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" | "filter" | "table" | "qr-code" | "eye" | "eye-off" | "user" | "check-circle" | "arrows-clockwise" | "menu" | "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" | "zoom-in" | "zoom-out" | "trash-2" | "clock" | "pencil" | "circle-help" | "stock" | "allergen-cereals-gluten" | "allergen-crustaceans" | "allergen-eggs" | "allergen-fish" | "allergen-peanuts" | "allergen-soybeans" | "allergen-milk" | "allergen-nuts" | "allergen-celery" | "allergen-mustard" | "allergen-sesame" | "allergen-sulphites" | "allergen-lupin" | "allergen-molluscs" | null>;
|
|
626
647
|
readonly hint: _angular_core.InputSignal<string>;
|
|
627
648
|
readonly error: _angular_core.InputSignal<string>;
|
|
628
649
|
/**
|
|
@@ -835,7 +856,7 @@ declare class SdsAllergenIcon {
|
|
|
835
856
|
readonly size: _angular_core.InputSignal<string | number>;
|
|
836
857
|
/** Stroke width of the line icon. */
|
|
837
858
|
readonly strokeWidth: _angular_core.InputSignal<number>;
|
|
838
|
-
protected readonly iconName: _angular_core.Signal<"chart-column" | "clipboard-list" | "credit-card" | "external-link" | "languages" | "megaphone" | "monitor" | "store" | "user-round" | "home" | "user-plus" | "user-check" | "hand" | "users" | "bike" | "building-2" | "package" | "package-plus" | "package-open" | "rotate-ccw" | "bar-chart-3" | "search" | "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" | "filter" | "table" | "qr-code" | "eye" | "eye-off" | "user" | "check-circle" | "arrows-clockwise" | "menu" | "file-text" | "hash" | "map-pin" | "inbox" | "arrow-right" | "refresh-cw" | "loader-circle" | "bug" | "scroll-text" | "moon" | "sun" | "search-x" | "command" | "sparkles" | "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>;
|
|
859
|
+
protected readonly iconName: _angular_core.Signal<"chart-column" | "clipboard-list" | "credit-card" | "external-link" | "languages" | "megaphone" | "monitor" | "store" | "user-round" | "home" | "user-plus" | "user-check" | "hand" | "users" | "bike" | "building-2" | "package" | "package-plus" | "package-open" | "rotate-ccw" | "bar-chart-3" | "search" | "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" | "filter" | "table" | "qr-code" | "eye" | "eye-off" | "user" | "check-circle" | "arrows-clockwise" | "menu" | "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" | "zoom-in" | "zoom-out" | "trash-2" | "clock" | "pencil" | "circle-help" | "stock" | "allergen-cereals-gluten" | "allergen-crustaceans" | "allergen-eggs" | "allergen-fish" | "allergen-peanuts" | "allergen-soybeans" | "allergen-milk" | "allergen-nuts" | "allergen-celery" | "allergen-mustard" | "allergen-sesame" | "allergen-sulphites" | "allergen-lupin" | "allergen-molluscs" | null>;
|
|
839
860
|
constructor();
|
|
840
861
|
static ɵfac: _angular_core.ɵɵFactoryDeclaration<SdsAllergenIcon, never>;
|
|
841
862
|
static ɵcmp: _angular_core.ɵɵComponentDeclaration<SdsAllergenIcon, "sds-allergen-icon", never, { "allergen": { "alias": "allergen"; "required": true; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "showTitle": { "alias": "showTitle"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "strokeWidth": { "alias": "strokeWidth"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
|
|
@@ -869,7 +890,7 @@ declare class SdsTriStateChip {
|
|
|
869
890
|
/** Visible name (e.g. the allergen). Required — the chip has no other accessible name. */
|
|
870
891
|
readonly label: _angular_core.InputSignal<string>;
|
|
871
892
|
/** Optional leading registry icon, e.g. an `allergen-*` pictogram. */
|
|
872
|
-
readonly icon: _angular_core.InputSignal<"chart-column" | "clipboard-list" | "credit-card" | "external-link" | "languages" | "megaphone" | "monitor" | "store" | "user-round" | "home" | "user-plus" | "user-check" | "hand" | "users" | "bike" | "building-2" | "package" | "package-plus" | "package-open" | "rotate-ccw" | "bar-chart-3" | "search" | "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" | "filter" | "table" | "qr-code" | "eye" | "eye-off" | "user" | "check-circle" | "arrows-clockwise" | "menu" | "file-text" | "hash" | "map-pin" | "inbox" | "arrow-right" | "refresh-cw" | "loader-circle" | "bug" | "scroll-text" | "moon" | "sun" | "search-x" | "command" | "sparkles" | "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>;
|
|
893
|
+
readonly icon: _angular_core.InputSignal<"chart-column" | "clipboard-list" | "credit-card" | "external-link" | "languages" | "megaphone" | "monitor" | "store" | "user-round" | "home" | "user-plus" | "user-check" | "hand" | "users" | "bike" | "building-2" | "package" | "package-plus" | "package-open" | "rotate-ccw" | "bar-chart-3" | "search" | "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" | "filter" | "table" | "qr-code" | "eye" | "eye-off" | "user" | "check-circle" | "arrows-clockwise" | "menu" | "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" | "zoom-in" | "zoom-out" | "trash-2" | "clock" | "pencil" | "circle-help" | "stock" | "allergen-cereals-gluten" | "allergen-crustaceans" | "allergen-eggs" | "allergen-fish" | "allergen-peanuts" | "allergen-soybeans" | "allergen-milk" | "allergen-nuts" | "allergen-celery" | "allergen-mustard" | "allergen-sesame" | "allergen-sulphites" | "allergen-lupin" | "allergen-molluscs" | null>;
|
|
873
894
|
readonly size: _angular_core.InputSignal<SdsTriStateChipSize>;
|
|
874
895
|
readonly disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
875
896
|
/** Show the state as a small visible caption under the label. */
|
|
@@ -899,6 +920,718 @@ declare class SdsTriStateChip {
|
|
|
899
920
|
static ɵcmp: _angular_core.ɵɵComponentDeclaration<SdsTriStateChip, "sds-tri-state-chip", never, { "value": { "alias": "value"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": true; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "showState": { "alias": "showState"; "required": false; "isSignal": true; }; "noneLabel": { "alias": "noneLabel"; "required": false; "isSignal": true; }; "containsLabel": { "alias": "containsLabel"; "required": false; "isSignal": true; }; "mayContainLabel": { "alias": "mayContainLabel"; "required": false; "isSignal": true; }; "hint": { "alias": "hint"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; }, never, never, true, never>;
|
|
900
921
|
}
|
|
901
922
|
|
|
923
|
+
/** One segment. A bare string/number option is used as both value and label. */
|
|
924
|
+
interface SdsSegmentedOption<T = unknown> {
|
|
925
|
+
value: T;
|
|
926
|
+
label: string;
|
|
927
|
+
icon?: SdsIconName;
|
|
928
|
+
disabled?: boolean;
|
|
929
|
+
}
|
|
930
|
+
type SdsSegmentedSize = 'sm' | 'md';
|
|
931
|
+
interface NormSegment {
|
|
932
|
+
value: unknown;
|
|
933
|
+
label: string;
|
|
934
|
+
icon: SdsIconName | null;
|
|
935
|
+
disabled: boolean;
|
|
936
|
+
}
|
|
937
|
+
/**
|
|
938
|
+
* Segmented control: a small set of mutually exclusive options shown side by side (e.g. "Pick exactly /
|
|
939
|
+
* at least / up to"). Radio-group semantics: `role="radiogroup"` with `role="radio"` segments, one tab
|
|
940
|
+
* stop, and the arrow keys (with Home/End) move AND select, like native radios. Disabled segments are
|
|
941
|
+
* skipped.
|
|
942
|
+
*
|
|
943
|
+
* The value is a two-way `model` — bind `[(value)]`. Give the group a name with [ariaLabel] (or
|
|
944
|
+
* [ariaLabelledby]); with [iconOnly] each segment keeps its label as its accessible name.
|
|
945
|
+
*
|
|
946
|
+
* @example
|
|
947
|
+
* <sds-segmented ariaLabel="Rule" [options]="[{ value: 'exactly', label: 'Exactly' }, { value: 'upTo', label: 'Up to' }]"
|
|
948
|
+
* [(value)]="rule" />
|
|
949
|
+
*/
|
|
950
|
+
declare class SdsSegmented {
|
|
951
|
+
private readonly host;
|
|
952
|
+
private readonly baseId;
|
|
953
|
+
/** Options: `{ value, label, icon?, disabled? }` objects, or bare strings/numbers. */
|
|
954
|
+
readonly options: _angular_core.InputSignal<readonly (string | number | SdsSegmentedOption<unknown>)[]>;
|
|
955
|
+
/** Selected value. Two-way: `[(value)]`. */
|
|
956
|
+
readonly value: _angular_core.ModelSignal<unknown>;
|
|
957
|
+
readonly size: _angular_core.InputSignal<SdsSegmentedSize>;
|
|
958
|
+
/** Accessible name of the group. */
|
|
959
|
+
readonly ariaLabel: _angular_core.InputSignal<string>;
|
|
960
|
+
/** Id of an element that names the group (alternative to [ariaLabel]). */
|
|
961
|
+
readonly ariaLabelledby: _angular_core.InputSignal<string>;
|
|
962
|
+
readonly disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
963
|
+
/** Stretch to the container width, segments sharing it equally. */
|
|
964
|
+
readonly fullWidth: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
965
|
+
/** Show icons only; labels stay as accessible names and tooltips. */
|
|
966
|
+
readonly iconOnly: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
967
|
+
protected readonly segments: _angular_core.Signal<NormSegment[]>;
|
|
968
|
+
private readonly selectedIndex;
|
|
969
|
+
/** Roving tab stop: the selected segment, else the first enabled one. */
|
|
970
|
+
protected readonly tabStop: _angular_core.Signal<number>;
|
|
971
|
+
protected isSelected(seg: NormSegment): boolean;
|
|
972
|
+
protected segmentId(i: number): string;
|
|
973
|
+
protected segmentClass(seg: NormSegment): string;
|
|
974
|
+
protected choose(i: number): void;
|
|
975
|
+
protected onKeydown(event: KeyboardEvent): void;
|
|
976
|
+
private step;
|
|
977
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<SdsSegmented, never>;
|
|
978
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<SdsSegmented, "sds-segmented", never, { "options": { "alias": "options"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "ariaLabelledby": { "alias": "ariaLabelledby"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "fullWidth": { "alias": "fullWidth"; "required": false; "isSignal": true; }; "iconOnly": { "alias": "iconOnly"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; }, never, never, true, never>;
|
|
979
|
+
}
|
|
980
|
+
|
|
981
|
+
/** Severity of a checklist row. `blocker` stops customers, `warning` costs sales, `info` is polish. */
|
|
982
|
+
type SdsChecklistStatus = 'done' | 'warning' | 'blocker' | 'info';
|
|
983
|
+
interface StatusStyle {
|
|
984
|
+
icon: SdsIconName;
|
|
985
|
+
tile: string;
|
|
986
|
+
label: string;
|
|
987
|
+
}
|
|
988
|
+
/**
|
|
989
|
+
* One line of a readiness checklist or health report: a status glyph, a title, an optional
|
|
990
|
+
* description, an optional count pill and an action (a projected `[sdsChecklistAction]` element, or
|
|
991
|
+
* the built-in button from [actionLabel] that emits `(action)`).
|
|
992
|
+
*
|
|
993
|
+
* The status is announced as text before the title ("Blocking: 3 items have no price"), never by
|
|
994
|
+
* colour alone. Put rows in a list for screen readers: `<ul role="list">` with each row wrapped in
|
|
995
|
+
* an `<li>`, or give the container `role="list"` and each row `role="listitem"`.
|
|
996
|
+
*
|
|
997
|
+
* @example
|
|
998
|
+
* <sds-checklist-row status="blocker" title="3 items have no price" description="Customers can't order them."
|
|
999
|
+
* [count]="3" actionLabel="Fix" (action)="openFilter('no-price')" />
|
|
1000
|
+
*/
|
|
1001
|
+
declare class SdsChecklistRow {
|
|
1002
|
+
readonly status: _angular_core.InputSignal<SdsChecklistStatus>;
|
|
1003
|
+
readonly title: _angular_core.InputSignal<string>;
|
|
1004
|
+
readonly description: _angular_core.InputSignal<string>;
|
|
1005
|
+
/** Optional number of affected things, shown as a pill after the title. Null hides it. */
|
|
1006
|
+
readonly count: _angular_core.InputSignal<number | null>;
|
|
1007
|
+
/**
|
|
1008
|
+
* Accessible text for the count pill; `{count}` is replaced. Default `'{count} items'` — pass a
|
|
1009
|
+
* translated one.
|
|
1010
|
+
*/
|
|
1011
|
+
readonly countLabel: _angular_core.InputSignal<string>;
|
|
1012
|
+
/** Spoken status prefix. Defaults per status: Done · Warning · Blocking · Info (English). */
|
|
1013
|
+
readonly statusLabel: _angular_core.InputSignal<string>;
|
|
1014
|
+
/** Label of the built-in action button. Empty hides it (project `[sdsChecklistAction]` instead). */
|
|
1015
|
+
readonly actionLabel: _angular_core.InputSignal<string>;
|
|
1016
|
+
/**
|
|
1017
|
+
* Full accessible name for the action button when its visible label is terse ("Fix") — e.g.
|
|
1018
|
+
* "Fix: 3 items have no price".
|
|
1019
|
+
*/
|
|
1020
|
+
readonly actionAriaLabel: _angular_core.InputSignal<string>;
|
|
1021
|
+
/** Strike the title through when the row is done. */
|
|
1022
|
+
readonly strikeDone: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
1023
|
+
/** Emitted when the built-in action button is pressed. */
|
|
1024
|
+
readonly action: _angular_core.OutputEmitterRef<void>;
|
|
1025
|
+
protected readonly style: _angular_core.Signal<StatusStyle>;
|
|
1026
|
+
protected readonly resolvedStatusLabel: _angular_core.Signal<string>;
|
|
1027
|
+
protected readonly countText: _angular_core.Signal<string>;
|
|
1028
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<SdsChecklistRow, never>;
|
|
1029
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<SdsChecklistRow, "sds-checklist-row", never, { "status": { "alias": "status"; "required": false; "isSignal": true; }; "title": { "alias": "title"; "required": true; "isSignal": true; }; "description": { "alias": "description"; "required": false; "isSignal": true; }; "count": { "alias": "count"; "required": false; "isSignal": true; }; "countLabel": { "alias": "countLabel"; "required": false; "isSignal": true; }; "statusLabel": { "alias": "statusLabel"; "required": false; "isSignal": true; }; "actionLabel": { "alias": "actionLabel"; "required": false; "isSignal": true; }; "actionAriaLabel": { "alias": "actionAriaLabel"; "required": false; "isSignal": true; }; "strikeDone": { "alias": "strikeDone"; "required": false; "isSignal": true; }; }, { "action": "action"; }, never, ["*", "[sdsChecklistAction]"], true, never>;
|
|
1030
|
+
}
|
|
1031
|
+
|
|
1032
|
+
type SdsScoreVariant = 'ring' | 'bar';
|
|
1033
|
+
type SdsScoreSize = 'sm' | 'md' | 'lg';
|
|
1034
|
+
/** Tier the value falls in, from the [fairFrom] / [goodFrom] thresholds. */
|
|
1035
|
+
type SdsScoreTier = 'poor' | 'fair' | 'good';
|
|
1036
|
+
interface TierStyle {
|
|
1037
|
+
icon: SdsIconName;
|
|
1038
|
+
text: string;
|
|
1039
|
+
stroke: string;
|
|
1040
|
+
fill: string;
|
|
1041
|
+
}
|
|
1042
|
+
/**
|
|
1043
|
+
* A 0–100 score as a ring or a bar, tinted by tier (poor · fair · good). The tier is also written out
|
|
1044
|
+
* in words with its own glyph, and the whole thing is a `role="meter"` with a spoken value text — so
|
|
1045
|
+
* the score is never conveyed by colour alone.
|
|
1046
|
+
*
|
|
1047
|
+
* @example
|
|
1048
|
+
* <sds-score [value]="64" label="Menu health" />
|
|
1049
|
+
* <sds-score [value]="health()" variant="bar" label="Menu health" goodLabel="Great" />
|
|
1050
|
+
*/
|
|
1051
|
+
declare class SdsScore {
|
|
1052
|
+
/** The score, 0–100 (clamped; non-numbers read as 0). */
|
|
1053
|
+
readonly value: _angular_core.InputSignalWithTransform<number, unknown>;
|
|
1054
|
+
readonly variant: _angular_core.InputSignal<SdsScoreVariant>;
|
|
1055
|
+
readonly size: _angular_core.InputSignal<SdsScoreSize>;
|
|
1056
|
+
/** Visible caption and the meter's accessible name, e.g. "Menu health". */
|
|
1057
|
+
readonly label: _angular_core.InputSignal<string>;
|
|
1058
|
+
/** Show the tier in words (with its glyph). */
|
|
1059
|
+
readonly showTier: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
1060
|
+
/** Lowest value that counts as `fair`. */
|
|
1061
|
+
readonly fairFrom: _angular_core.InputSignalWithTransform<number, unknown>;
|
|
1062
|
+
/** Lowest value that counts as `good`. */
|
|
1063
|
+
readonly goodFrom: _angular_core.InputSignalWithTransform<number, unknown>;
|
|
1064
|
+
readonly poorLabel: _angular_core.InputSignal<string>;
|
|
1065
|
+
readonly fairLabel: _angular_core.InputSignal<string>;
|
|
1066
|
+
readonly goodLabel: _angular_core.InputSignal<string>;
|
|
1067
|
+
/** Spoken value; tokens `{value}` and `{tier}`. */
|
|
1068
|
+
readonly valueTextTemplate: _angular_core.InputSignal<string>;
|
|
1069
|
+
protected readonly clamped: _angular_core.Signal<number>;
|
|
1070
|
+
readonly tier: _angular_core.Signal<SdsScoreTier>;
|
|
1071
|
+
protected readonly tierStyle: _angular_core.Signal<TierStyle>;
|
|
1072
|
+
protected readonly tierText: _angular_core.Signal<string>;
|
|
1073
|
+
protected readonly valueText: _angular_core.Signal<string>;
|
|
1074
|
+
protected readonly ring: _angular_core.Signal<{
|
|
1075
|
+
box: number;
|
|
1076
|
+
stroke: number;
|
|
1077
|
+
value: string;
|
|
1078
|
+
max: string;
|
|
1079
|
+
}>;
|
|
1080
|
+
protected readonly radius: _angular_core.Signal<number>;
|
|
1081
|
+
protected readonly circumference: _angular_core.Signal<number>;
|
|
1082
|
+
protected readonly dashOffset: _angular_core.Signal<number>;
|
|
1083
|
+
protected readonly barHeight: _angular_core.Signal<string>;
|
|
1084
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<SdsScore, never>;
|
|
1085
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<SdsScore, "sds-score", never, { "value": { "alias": "value"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "showTier": { "alias": "showTier"; "required": false; "isSignal": true; }; "fairFrom": { "alias": "fairFrom"; "required": false; "isSignal": true; }; "goodFrom": { "alias": "goodFrom"; "required": false; "isSignal": true; }; "poorLabel": { "alias": "poorLabel"; "required": false; "isSignal": true; }; "fairLabel": { "alias": "fairLabel"; "required": false; "isSignal": true; }; "goodLabel": { "alias": "goodLabel"; "required": false; "isSignal": true; }; "valueTextTemplate": { "alias": "valueTextTemplate"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
|
|
1086
|
+
}
|
|
1087
|
+
|
|
1088
|
+
/** Availability of the thing a tile stands for (a menu item on the kitchen stock board). */
|
|
1089
|
+
type SdsStatusTileState = 'available' | 'sold-out' | 'hidden';
|
|
1090
|
+
interface StateStyle {
|
|
1091
|
+
icon: SdsIconName;
|
|
1092
|
+
frame: string;
|
|
1093
|
+
badge: string;
|
|
1094
|
+
}
|
|
1095
|
+
/**
|
|
1096
|
+
* Touch-first square tile for a stock board: a big press target (the whole tile) with a title,
|
|
1097
|
+
* optional subtitle, optional photo and a state — available · sold out · hidden.
|
|
1098
|
+
*
|
|
1099
|
+
* The state is never colour-only: each has its own glyph and word in a badge (check / "Available",
|
|
1100
|
+
* a no-entry sign / "Sold out", a crossed eye / "Hidden"), sold-out tiles get a diagonal hatch and a
|
|
1101
|
+
* struck-through title, hidden tiles a dashed frame. Pressing gives a visible pressed state.
|
|
1102
|
+
*
|
|
1103
|
+
* The tile is one `<button>` that emits `(activate)`. Pass [selected] (true/false) to make it a toggle
|
|
1104
|
+
* for multi-select ("select all matches"): it then carries `aria-pressed` and a corner check. [busy]
|
|
1105
|
+
* shows a spinner and sets `aria-busy` while a save is in flight.
|
|
1106
|
+
*
|
|
1107
|
+
* @example
|
|
1108
|
+
* <sds-status-tile title="Bacon" subtitle="Extras" state="sold-out" note="Back at 22:00"
|
|
1109
|
+
* soldOutLabel="Sold out" (activate)="toggle(item)" />
|
|
1110
|
+
*/
|
|
1111
|
+
declare class SdsStatusTile {
|
|
1112
|
+
readonly title: _angular_core.InputSignal<string>;
|
|
1113
|
+
readonly subtitle: _angular_core.InputSignal<string>;
|
|
1114
|
+
/** Optional photo URL, shown across the top of the tile. */
|
|
1115
|
+
readonly image: _angular_core.InputSignal<string | null>;
|
|
1116
|
+
/** Alt text for the photo. Empty (default) marks it decorative — the title already names the tile. */
|
|
1117
|
+
readonly imageAlt: _angular_core.InputSignal<string>;
|
|
1118
|
+
readonly state: _angular_core.InputSignal<SdsStatusTileState>;
|
|
1119
|
+
/** Short extra line next to the state, e.g. "Back at 22:00". */
|
|
1120
|
+
readonly note: _angular_core.InputSignal<string>;
|
|
1121
|
+
/** `null` (default): a plain action tile. `true`/`false`: a toggle for multi-select (`aria-pressed`). */
|
|
1122
|
+
readonly selected: _angular_core.InputSignal<boolean | null>;
|
|
1123
|
+
/** A save is in flight: spinner + `aria-busy`. */
|
|
1124
|
+
readonly busy: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
1125
|
+
readonly disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
1126
|
+
readonly availableLabel: _angular_core.InputSignal<string>;
|
|
1127
|
+
readonly soldOutLabel: _angular_core.InputSignal<string>;
|
|
1128
|
+
readonly hiddenLabel: _angular_core.InputSignal<string>;
|
|
1129
|
+
/** The tile was pressed (click, tap, Enter or Space). */
|
|
1130
|
+
readonly activate: _angular_core.OutputEmitterRef<void>;
|
|
1131
|
+
protected readonly style: _angular_core.Signal<StateStyle>;
|
|
1132
|
+
protected readonly stateText: _angular_core.Signal<string>;
|
|
1133
|
+
/** Diagonal hatch on sold-out tiles — a pattern cue on top of the colour. */
|
|
1134
|
+
protected readonly hatch: _angular_core.Signal<"repeating-linear-gradient(135deg, transparent 0 12px, color-mix(in srgb, var(--color-danger) 10%, transparent) 12px 24px)" | null>;
|
|
1135
|
+
protected readonly tileClass: _angular_core.Signal<string>;
|
|
1136
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<SdsStatusTile, never>;
|
|
1137
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<SdsStatusTile, "sds-status-tile", never, { "title": { "alias": "title"; "required": true; "isSignal": true; }; "subtitle": { "alias": "subtitle"; "required": false; "isSignal": true; }; "image": { "alias": "image"; "required": false; "isSignal": true; }; "imageAlt": { "alias": "imageAlt"; "required": false; "isSignal": true; }; "state": { "alias": "state"; "required": false; "isSignal": true; }; "note": { "alias": "note"; "required": false; "isSignal": true; }; "selected": { "alias": "selected"; "required": false; "isSignal": true; }; "busy": { "alias": "busy"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "availableLabel": { "alias": "availableLabel"; "required": false; "isSignal": true; }; "soldOutLabel": { "alias": "soldOutLabel"; "required": false; "isSignal": true; }; "hiddenLabel": { "alias": "hiddenLabel"; "required": false; "isSignal": true; }; }, { "activate": "activate"; }, never, never, true, never>;
|
|
1138
|
+
}
|
|
1139
|
+
|
|
1140
|
+
/** An actionable row. */
|
|
1141
|
+
interface SdsMenuAction {
|
|
1142
|
+
/** Optional stable id, handy in the `(select)` handler. */
|
|
1143
|
+
id?: string;
|
|
1144
|
+
label: string;
|
|
1145
|
+
/** Second line under the label (e.g. "Back at 22:00"). */
|
|
1146
|
+
description?: string;
|
|
1147
|
+
icon?: SdsIconName;
|
|
1148
|
+
/** Destructive action (delete, hide…): drawn in the danger colour. */
|
|
1149
|
+
danger?: boolean;
|
|
1150
|
+
disabled?: boolean;
|
|
1151
|
+
}
|
|
1152
|
+
/** A divider between groups of actions. */
|
|
1153
|
+
interface SdsMenuSeparator {
|
|
1154
|
+
separator: true;
|
|
1155
|
+
}
|
|
1156
|
+
type SdsMenuEntry = SdsMenuAction | SdsMenuSeparator;
|
|
1157
|
+
type SdsMenuAlign = 'start' | 'end';
|
|
1158
|
+
/**
|
|
1159
|
+
* Marks the element inside `<sds-menu>` that opens it. It may be a native button or a component that
|
|
1160
|
+
* renders one (e.g. `<sds-button sdsMenuTrigger>`): the menu wires `aria-haspopup`, `aria-expanded` and
|
|
1161
|
+
* `aria-controls` onto the first focusable element it finds there.
|
|
1162
|
+
*/
|
|
1163
|
+
declare class SdsMenuTrigger {
|
|
1164
|
+
readonly el: ElementRef<HTMLElement>;
|
|
1165
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<SdsMenuTrigger, never>;
|
|
1166
|
+
static ɵdir: _angular_core.ɵɵDirectiveDeclaration<SdsMenuTrigger, "[sdsMenuTrigger]", never, {}, {}, never, never, true, never>;
|
|
1167
|
+
}
|
|
1168
|
+
/**
|
|
1169
|
+
* Action menu (menu button + popover). The panel is appended to `<body>` and positioned against the
|
|
1170
|
+
* trigger, flipping above it when there is no room below — so it is never clipped by a drawer, a dialog
|
|
1171
|
+
* or a scrolling table, and it sits above them (z 1100).
|
|
1172
|
+
*
|
|
1173
|
+
* Items come from [items]: actions (`{ label, description?, icon?, danger?, disabled? }`) and
|
|
1174
|
+
* `{ separator: true }` dividers. Activating one emits `(select)` with it and closes the menu.
|
|
1175
|
+
*
|
|
1176
|
+
* Trigger: project your own element marked `sdsMenuTrigger`, or let the menu render a compact icon
|
|
1177
|
+
* button (`triggerIcon`, default a horizontal ellipsis) named by [triggerLabel].
|
|
1178
|
+
*
|
|
1179
|
+
* Keyboard (WAI-ARIA menu button): Enter / Space / ArrowDown open on the first item, ArrowUp on the
|
|
1180
|
+
* last; ArrowUp/Down move (wrapping, skipping disabled items), Home/End jump, a letter jumps to the next
|
|
1181
|
+
* item starting with it, Enter/Space activate. **Escape closes only the menu** — the key event is
|
|
1182
|
+
* stopped, so an enclosing drawer or dialog stays open — and focus returns to the trigger. Tab closes it
|
|
1183
|
+
* too. A click outside closes it.
|
|
1184
|
+
*
|
|
1185
|
+
* @example
|
|
1186
|
+
* <sds-menu [items]="[{ id: 'sold', label: 'Mark sold out', icon: 'ban' }, { separator: true },
|
|
1187
|
+
* { id: 'del', label: 'Delete', icon: 'trash-2', danger: true }]"
|
|
1188
|
+
* triggerLabel="Item actions" (select)="onAction($event)" />
|
|
1189
|
+
*
|
|
1190
|
+
* @example
|
|
1191
|
+
* <sds-menu [items]="durations" (select)="snooze($event)">
|
|
1192
|
+
* <sds-button sdsMenuTrigger variant="secondary">Mark sold out</sds-button>
|
|
1193
|
+
* </sds-menu>
|
|
1194
|
+
*/
|
|
1195
|
+
declare class SdsMenu implements OnDestroy {
|
|
1196
|
+
private readonly host;
|
|
1197
|
+
private readonly injector;
|
|
1198
|
+
protected readonly menuId: string;
|
|
1199
|
+
protected readonly triggerId: string;
|
|
1200
|
+
/** Actions and separators, in order. */
|
|
1201
|
+
readonly items: _angular_core.InputSignal<readonly SdsMenuEntry[]>;
|
|
1202
|
+
/** Open state. Two-way: `[(open)]` — set it to open the menu from code. */
|
|
1203
|
+
readonly open: _angular_core.ModelSignal<boolean>;
|
|
1204
|
+
/** Which edge of the trigger the panel lines up with. */
|
|
1205
|
+
readonly align: _angular_core.InputSignal<SdsMenuAlign>;
|
|
1206
|
+
/** Accessible name of the built-in icon trigger (required when there is no [triggerText]). */
|
|
1207
|
+
readonly triggerLabel: _angular_core.InputSignal<string>;
|
|
1208
|
+
/** Icon of the built-in trigger. */
|
|
1209
|
+
readonly triggerIcon: _angular_core.InputSignal<"chart-column" | "clipboard-list" | "credit-card" | "external-link" | "languages" | "megaphone" | "monitor" | "store" | "user-round" | "home" | "user-plus" | "user-check" | "hand" | "users" | "bike" | "building-2" | "package" | "package-plus" | "package-open" | "rotate-ccw" | "bar-chart-3" | "search" | "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" | "filter" | "table" | "qr-code" | "eye" | "eye-off" | "user" | "check-circle" | "arrows-clockwise" | "menu" | "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" | "zoom-in" | "zoom-out" | "trash-2" | "clock" | "pencil" | "circle-help" | "stock" | "allergen-cereals-gluten" | "allergen-crustaceans" | "allergen-eggs" | "allergen-fish" | "allergen-peanuts" | "allergen-soybeans" | "allergen-milk" | "allergen-nuts" | "allergen-celery" | "allergen-mustard" | "allergen-sesame" | "allergen-sulphites" | "allergen-lupin" | "allergen-molluscs">;
|
|
1210
|
+
/** Optional visible text on the built-in trigger (then it is its name). */
|
|
1211
|
+
readonly triggerText: _angular_core.InputSignal<string>;
|
|
1212
|
+
/** Accessible name of the menu itself; defaults to the trigger's name. */
|
|
1213
|
+
readonly ariaLabel: _angular_core.InputSignal<string>;
|
|
1214
|
+
readonly disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
1215
|
+
/** Keep the menu open after an item is activated (e.g. toggles). */
|
|
1216
|
+
readonly keepOpen: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
1217
|
+
/** An action was activated. */
|
|
1218
|
+
readonly select: _angular_core.OutputEmitterRef<SdsMenuAction>;
|
|
1219
|
+
protected readonly projectedTrigger: _angular_core.Signal<SdsMenuTrigger | undefined>;
|
|
1220
|
+
private panelEl;
|
|
1221
|
+
/** Which item gets focus when the panel opens: 'first' | 'last' | 'none'. */
|
|
1222
|
+
private focusOnOpen;
|
|
1223
|
+
private typeBuffer;
|
|
1224
|
+
private typeTimer?;
|
|
1225
|
+
private readonly enabledIndexes;
|
|
1226
|
+
constructor();
|
|
1227
|
+
ngOnDestroy(): void;
|
|
1228
|
+
protected isSeparator(entry: SdsMenuEntry): entry is SdsMenuSeparator;
|
|
1229
|
+
protected descId(i: number): string;
|
|
1230
|
+
protected itemClass(entry: SdsMenuAction): string;
|
|
1231
|
+
private findFocusable;
|
|
1232
|
+
private triggerEl;
|
|
1233
|
+
private isTriggerDisabled;
|
|
1234
|
+
private show;
|
|
1235
|
+
/** Close the menu; with `returnFocus`, focus goes back to the trigger. */
|
|
1236
|
+
close(returnFocus?: boolean): void;
|
|
1237
|
+
private afterOpen;
|
|
1238
|
+
private teardown;
|
|
1239
|
+
protected onTriggerClick(event: MouseEvent): void;
|
|
1240
|
+
protected onTriggerKeydown(event: KeyboardEvent): void;
|
|
1241
|
+
protected onMenuKeydown(event: KeyboardEvent): void;
|
|
1242
|
+
private typeAhead;
|
|
1243
|
+
protected focusIndex(i: number): void;
|
|
1244
|
+
private focusItemAt;
|
|
1245
|
+
protected activate(entry: SdsMenuAction, event?: Event): void;
|
|
1246
|
+
protected onDocumentClick(event: MouseEvent): void;
|
|
1247
|
+
private readonly reflow;
|
|
1248
|
+
private listening;
|
|
1249
|
+
private addReflowListeners;
|
|
1250
|
+
private removeReflowListeners;
|
|
1251
|
+
private position;
|
|
1252
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<SdsMenu, never>;
|
|
1253
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<SdsMenu, "sds-menu", never, { "items": { "alias": "items"; "required": false; "isSignal": true; }; "open": { "alias": "open"; "required": false; "isSignal": true; }; "align": { "alias": "align"; "required": false; "isSignal": true; }; "triggerLabel": { "alias": "triggerLabel"; "required": false; "isSignal": true; }; "triggerIcon": { "alias": "triggerIcon"; "required": false; "isSignal": true; }; "triggerText": { "alias": "triggerText"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "keepOpen": { "alias": "keepOpen"; "required": false; "isSignal": true; }; }, { "open": "openChange"; "select": "select"; }, ["projectedTrigger"], ["[sdsMenuTrigger]"], true, never>;
|
|
1254
|
+
}
|
|
1255
|
+
|
|
1256
|
+
/** Where the bar sits: pinned to the bottom (default) or top of its scroll container, or in flow. */
|
|
1257
|
+
type SdsBulkBarPosition = 'bottom' | 'top' | 'static';
|
|
1258
|
+
/**
|
|
1259
|
+
* Selection toolbar for bulk editing: "N selected", the actions the app projects, and a clear-selection
|
|
1260
|
+
* button. It shows only while something is selected (`count > 0`) and sticks to the bottom of its
|
|
1261
|
+
* scroll container by default, so it stays in reach while the list scrolls.
|
|
1262
|
+
*
|
|
1263
|
+
* A `role="toolbar"` named by [ariaLabel]; the count sits in a polite live region that exists even
|
|
1264
|
+
* while the bar is hidden, so "3 selected" is announced as the selection changes. Every visible and
|
|
1265
|
+
* spoken string is an input (English defaults).
|
|
1266
|
+
*
|
|
1267
|
+
* @example
|
|
1268
|
+
* <sds-bulk-bar [count]="selected().length" countLabel="{count} selected" (clear)="selected.set([])">
|
|
1269
|
+
* <sds-button size="sm" variant="secondary" (click)="bulkPrice()">Change price</sds-button>
|
|
1270
|
+
* <sds-button size="sm" variant="secondary" (click)="bulkSoldOut()">Mark sold out</sds-button>
|
|
1271
|
+
* </sds-bulk-bar>
|
|
1272
|
+
*/
|
|
1273
|
+
declare class SdsBulkBar {
|
|
1274
|
+
/** Number of selected things. The bar is hidden at 0. */
|
|
1275
|
+
readonly count: _angular_core.InputSignalWithTransform<number, unknown>;
|
|
1276
|
+
/** "{count} selected" — `{count}` is replaced. Pass a translated string. */
|
|
1277
|
+
readonly countLabel: _angular_core.InputSignal<string>;
|
|
1278
|
+
/** Text of the clear-selection button. */
|
|
1279
|
+
readonly clearLabel: _angular_core.InputSignal<string>;
|
|
1280
|
+
/** Accessible name of the toolbar. */
|
|
1281
|
+
readonly ariaLabel: _angular_core.InputSignal<string>;
|
|
1282
|
+
readonly position: _angular_core.InputSignal<SdsBulkBarPosition>;
|
|
1283
|
+
/** The clear-selection button was pressed. */
|
|
1284
|
+
readonly clear: _angular_core.OutputEmitterRef<void>;
|
|
1285
|
+
protected readonly countText: _angular_core.Signal<string>;
|
|
1286
|
+
/** The label without the number, shown next to the count pill ("selected"). */
|
|
1287
|
+
protected readonly countWords: _angular_core.Signal<string>;
|
|
1288
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<SdsBulkBar, never>;
|
|
1289
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<SdsBulkBar, "sds-bulk-bar", never, { "count": { "alias": "count"; "required": false; "isSignal": true; }; "countLabel": { "alias": "countLabel"; "required": false; "isSignal": true; }; "clearLabel": { "alias": "clearLabel"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "position": { "alias": "position"; "required": false; "isSignal": true; }; }, { "clear": "clear"; }, never, ["*"], true, never>;
|
|
1290
|
+
}
|
|
1291
|
+
|
|
1292
|
+
/** Context handed to the item and handle templates. */
|
|
1293
|
+
interface SdsSortableItemContext<T = any> {
|
|
1294
|
+
/** The item — enables `let-item`. */
|
|
1295
|
+
$implicit: T;
|
|
1296
|
+
item: T;
|
|
1297
|
+
/** Zero-based position in the list. */
|
|
1298
|
+
index: number;
|
|
1299
|
+
/** True while this item is picked up (keyboard) or dragged (pointer). */
|
|
1300
|
+
grabbed: boolean;
|
|
1301
|
+
}
|
|
1302
|
+
/**
|
|
1303
|
+
* Template for one row's content inside `<sds-sortable-list>`.
|
|
1304
|
+
*
|
|
1305
|
+
* @example
|
|
1306
|
+
* <ng-template sdsSortableItem let-item let-i="index">{{ item.name }}</ng-template>
|
|
1307
|
+
*/
|
|
1308
|
+
declare class SdsSortableItem {
|
|
1309
|
+
readonly template: TemplateRef<SdsSortableItemContext<any>>;
|
|
1310
|
+
static ngTemplateContextGuard(_dir: SdsSortableItem, _ctx: unknown): _ctx is SdsSortableItemContext;
|
|
1311
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<SdsSortableItem, never>;
|
|
1312
|
+
static ɵdir: _angular_core.ɵɵDirectiveDeclaration<SdsSortableItem, "ng-template[sdsSortableItem]", never, {}, {}, never, never, true, never>;
|
|
1313
|
+
}
|
|
1314
|
+
/**
|
|
1315
|
+
* Optional template for the drag handle's content (replaces the default grip icon). The handle itself
|
|
1316
|
+
* stays a library-owned button, so it keeps its accessible name and keyboard behaviour.
|
|
1317
|
+
*/
|
|
1318
|
+
declare class SdsSortableHandle {
|
|
1319
|
+
readonly template: TemplateRef<SdsSortableItemContext<any>>;
|
|
1320
|
+
static ngTemplateContextGuard(_dir: SdsSortableHandle, _ctx: unknown): _ctx is SdsSortableItemContext;
|
|
1321
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<SdsSortableHandle, never>;
|
|
1322
|
+
static ɵdir: _angular_core.ɵɵDirectiveDeclaration<SdsSortableHandle, "ng-template[sdsSortableHandle]", never, {}, {}, never, never, true, never>;
|
|
1323
|
+
}
|
|
1324
|
+
/** Emitted once per completed move (pointer drop or keyboard drop). */
|
|
1325
|
+
interface SdsSortableReorderEvent<T = any> {
|
|
1326
|
+
previousIndex: number;
|
|
1327
|
+
currentIndex: number;
|
|
1328
|
+
item: T;
|
|
1329
|
+
/** The whole list in its new order. */
|
|
1330
|
+
items: T[];
|
|
1331
|
+
}
|
|
1332
|
+
type SdsSortableAppearance = 'card' | 'plain';
|
|
1333
|
+
type DragMode = 'keyboard' | 'pointer';
|
|
1334
|
+
/**
|
|
1335
|
+
* Accessible reorderable list, with no `@angular/cdk` dependency.
|
|
1336
|
+
*
|
|
1337
|
+
* - **Pointer** (mouse, pen, touch): drag an item by its handle. The handle has `touch-action: none`, so
|
|
1338
|
+
* a finger drags instead of scrolling the page; the rest of the row still scrolls normally.
|
|
1339
|
+
* - **Keyboard**: focus a handle, **Space/Enter** picks the item up, **↑/↓** (and Home/End) move it,
|
|
1340
|
+
* **Space/Enter** drops it, **Escape** cancels (the event is stopped, so an enclosing drawer stays open).
|
|
1341
|
+
* Moving focus away also cancels.
|
|
1342
|
+
* - **Screen readers**: every handle is named ("Reorder Burgers") and described by the instructions; an
|
|
1343
|
+
* assertive live region announces pick-up, each move ("moved to position 3 of 8"), the drop and a cancel.
|
|
1344
|
+
*
|
|
1345
|
+
* Nothing is committed until the drop: while dragging, the other rows slide to make room. The drop
|
|
1346
|
+
* updates the two-way `[(items)]` model and emits `(reorder)` with the old/new index and the new array.
|
|
1347
|
+
* Items for which [itemDisabled] returns true cannot be picked up (they still shift when others pass).
|
|
1348
|
+
*
|
|
1349
|
+
* Row content comes from `<ng-template sdsSortableItem let-item>`; without one the item's label is shown.
|
|
1350
|
+
* All spoken text is set through inputs (English defaults, `{item}` `{position}` `{total}` tokens).
|
|
1351
|
+
*
|
|
1352
|
+
* @example
|
|
1353
|
+
* <sds-sortable-list [(items)]="categories" dataKey="id" labelField="name" ariaLabel="Categories"
|
|
1354
|
+
* (reorder)="save($event)">
|
|
1355
|
+
* <ng-template sdsSortableItem let-cat>{{ cat.name }} <span>{{ cat.count }} items</span></ng-template>
|
|
1356
|
+
* </sds-sortable-list>
|
|
1357
|
+
*/
|
|
1358
|
+
declare class SdsSortableList<T = any> {
|
|
1359
|
+
private readonly host;
|
|
1360
|
+
private readonly injector;
|
|
1361
|
+
protected readonly instructionsId: string;
|
|
1362
|
+
/** The items, in order. Two-way: `[(items)]` receives the new order on drop. */
|
|
1363
|
+
readonly items: _angular_core.ModelSignal<readonly T[]>;
|
|
1364
|
+
/** Property used as a stable identity for rows (strongly recommended). */
|
|
1365
|
+
readonly dataKey: _angular_core.InputSignal<string>;
|
|
1366
|
+
/** Property holding the item's name, for the default row, the handle name and announcements. */
|
|
1367
|
+
readonly labelField: _angular_core.InputSignal<string>;
|
|
1368
|
+
/** Function returning the item's name; takes precedence over [labelField]. */
|
|
1369
|
+
readonly itemLabel: _angular_core.InputSignal<((item: T) => string) | null>;
|
|
1370
|
+
/** Items for which this returns true cannot be picked up. */
|
|
1371
|
+
readonly itemDisabled: _angular_core.InputSignal<((item: T) => boolean) | null>;
|
|
1372
|
+
/** Disable reordering for the whole list. */
|
|
1373
|
+
readonly disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
1374
|
+
/** `card` (default): bordered rows with a gap. `plain`: rows separated by dividers. */
|
|
1375
|
+
readonly appearance: _angular_core.InputSignal<SdsSortableAppearance>;
|
|
1376
|
+
/** Accessible name of the list. */
|
|
1377
|
+
readonly ariaLabel: _angular_core.InputSignal<string>;
|
|
1378
|
+
/** Name of each handle; `{item}` is the item's label. */
|
|
1379
|
+
readonly handleLabel: _angular_core.InputSignal<string>;
|
|
1380
|
+
/** Read after a handle's name (aria-describedby). */
|
|
1381
|
+
readonly instructions: _angular_core.InputSignal<string>;
|
|
1382
|
+
readonly pickedUpMessage: _angular_core.InputSignal<string>;
|
|
1383
|
+
readonly movedMessage: _angular_core.InputSignal<string>;
|
|
1384
|
+
readonly droppedMessage: _angular_core.InputSignal<string>;
|
|
1385
|
+
readonly cancelledMessage: _angular_core.InputSignal<string>;
|
|
1386
|
+
/** A move was completed. */
|
|
1387
|
+
readonly reorder: _angular_core.OutputEmitterRef<SdsSortableReorderEvent<T>>;
|
|
1388
|
+
protected readonly itemTpl: _angular_core.Signal<SdsSortableItem | undefined>;
|
|
1389
|
+
protected readonly handleTpl: _angular_core.Signal<SdsSortableHandle | undefined>;
|
|
1390
|
+
/** Rendered order: follows [items] until a drop commits a new one. */
|
|
1391
|
+
protected readonly working: _angular_core.WritableSignal<T[]>;
|
|
1392
|
+
/** Index (in `working`) of the item being moved, or null. */
|
|
1393
|
+
protected readonly active: _angular_core.WritableSignal<number | null>;
|
|
1394
|
+
/** Where it would land if dropped now. */
|
|
1395
|
+
private readonly target;
|
|
1396
|
+
protected readonly mode: _angular_core.WritableSignal<DragMode | null>;
|
|
1397
|
+
/** Pointer-mode vertical offset of the dragged row. */
|
|
1398
|
+
private readonly pointerDy;
|
|
1399
|
+
/** No transitions for one frame while a drop re-renders the new order in place. */
|
|
1400
|
+
private readonly settling;
|
|
1401
|
+
protected readonly liveMessage: _angular_core.WritableSignal<string>;
|
|
1402
|
+
/** Row boxes measured at drag start (top/height), plus the gap between rows. */
|
|
1403
|
+
private rects;
|
|
1404
|
+
private gap;
|
|
1405
|
+
private pointerId;
|
|
1406
|
+
private startY;
|
|
1407
|
+
/** Per-row offsets that open a gap where the moving row will land. */
|
|
1408
|
+
private readonly shifts;
|
|
1409
|
+
/** Offset of the moving row: follows the pointer, or jumps slot to slot with the keyboard. */
|
|
1410
|
+
private readonly activeOffset;
|
|
1411
|
+
protected trackKey(item: T, index: number): unknown;
|
|
1412
|
+
protected labelOf(item: T): string;
|
|
1413
|
+
protected isItemDisabled(item: T): boolean;
|
|
1414
|
+
protected context(item: T, index: number): SdsSortableItemContext<T>;
|
|
1415
|
+
protected handleText(item: T): string;
|
|
1416
|
+
protected transformFor(i: number): string | null;
|
|
1417
|
+
protected rowClass(i: number): string;
|
|
1418
|
+
protected handleClass(item: T): string;
|
|
1419
|
+
protected onHandleKeydown(event: KeyboardEvent, i: number): void;
|
|
1420
|
+
private keyMove;
|
|
1421
|
+
/** Focus leaving the list while an item is picked up cancels the move. */
|
|
1422
|
+
protected onFocusOut(event: FocusEvent): void;
|
|
1423
|
+
protected onPointerDown(event: PointerEvent, i: number): void;
|
|
1424
|
+
protected onPointerMove(event: PointerEvent): void;
|
|
1425
|
+
protected onPointerUp(event: PointerEvent): void;
|
|
1426
|
+
protected onPointerCancel(): void;
|
|
1427
|
+
private begin;
|
|
1428
|
+
private measure;
|
|
1429
|
+
private commit;
|
|
1430
|
+
/** Nothing was moved in the DOM while dragging, so focus is still where it should be. */
|
|
1431
|
+
private cancel;
|
|
1432
|
+
private reset;
|
|
1433
|
+
private focusHandle;
|
|
1434
|
+
private announce;
|
|
1435
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<SdsSortableList<any>, never>;
|
|
1436
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<SdsSortableList<any>, "sds-sortable-list", never, { "items": { "alias": "items"; "required": false; "isSignal": true; }; "dataKey": { "alias": "dataKey"; "required": false; "isSignal": true; }; "labelField": { "alias": "labelField"; "required": false; "isSignal": true; }; "itemLabel": { "alias": "itemLabel"; "required": false; "isSignal": true; }; "itemDisabled": { "alias": "itemDisabled"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "appearance": { "alias": "appearance"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "handleLabel": { "alias": "handleLabel"; "required": false; "isSignal": true; }; "instructions": { "alias": "instructions"; "required": false; "isSignal": true; }; "pickedUpMessage": { "alias": "pickedUpMessage"; "required": false; "isSignal": true; }; "movedMessage": { "alias": "movedMessage"; "required": false; "isSignal": true; }; "droppedMessage": { "alias": "droppedMessage"; "required": false; "isSignal": true; }; "cancelledMessage": { "alias": "cancelledMessage"; "required": false; "isSignal": true; }; }, { "items": "itemsChange"; "reorder": "reorder"; }, ["itemTpl", "handleTpl"], never, true, never>;
|
|
1437
|
+
}
|
|
1438
|
+
|
|
1439
|
+
/** Why a file was turned away. */
|
|
1440
|
+
type SdsFileRejectionReason = 'type' | 'size' | 'count';
|
|
1441
|
+
interface SdsFileRejection {
|
|
1442
|
+
file: File;
|
|
1443
|
+
reason: SdsFileRejectionReason;
|
|
1444
|
+
/** The rendered, human-readable message (from the matching *Message input). */
|
|
1445
|
+
message: string;
|
|
1446
|
+
}
|
|
1447
|
+
/** "1.5 MB" style size (decimal units, like file managers show them), for messages. */
|
|
1448
|
+
declare function sdsFormatBytes(bytes: number): string;
|
|
1449
|
+
/** Does `file` match an `accept` string (".jpg,image/png,image/*")? Empty accepts everything. */
|
|
1450
|
+
declare function sdsFileMatchesAccept(file: File, accept: string): boolean;
|
|
1451
|
+
/**
|
|
1452
|
+
* Drop zone plus a "Browse" button for picking files. Filters by [accept] (same syntax as the native
|
|
1453
|
+
* input: `.csv`, `image/*`, `image/png`), [maxSize] (bytes) and [maxFiles]; emits the accepted files as
|
|
1454
|
+
* `(files)` and the rest as `(rejected)` with a reason and a readable message, which is also shown
|
|
1455
|
+
* under the zone and announced.
|
|
1456
|
+
*
|
|
1457
|
+
* Keyboard and screen-reader users use the native Browse button (the zone itself is a pointer
|
|
1458
|
+
* affordance); clicking anywhere on the zone opens the picker too. All text is set through inputs with
|
|
1459
|
+
* English defaults.
|
|
1460
|
+
*
|
|
1461
|
+
* @example
|
|
1462
|
+
* <sds-file-drop accept="image/jpeg,image/png,image/webp" multiple [maxSize]="10_000_000"
|
|
1463
|
+
* label="Drop photos here" browseLabel="Choose photos"
|
|
1464
|
+
* (files)="upload($event)" (rejected)="onRejected($event)" />
|
|
1465
|
+
*/
|
|
1466
|
+
declare class SdsFileDrop {
|
|
1467
|
+
protected readonly zoneId: string;
|
|
1468
|
+
private readonly fileInput;
|
|
1469
|
+
/** Accepted types, native `accept` syntax. Empty = anything. */
|
|
1470
|
+
readonly accept: _angular_core.InputSignal<string>;
|
|
1471
|
+
readonly multiple: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
1472
|
+
/** Largest accepted file in bytes. Null = no limit. */
|
|
1473
|
+
readonly maxSize: _angular_core.InputSignal<number | null>;
|
|
1474
|
+
/** Most files accepted in one pick/drop. Null = no limit (1 when not [multiple]). */
|
|
1475
|
+
readonly maxFiles: _angular_core.InputSignal<number | null>;
|
|
1476
|
+
readonly disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
1477
|
+
/** Icon in the zone at rest. */
|
|
1478
|
+
readonly icon: _angular_core.InputSignal<"file-text" | "upload" | "image">;
|
|
1479
|
+
readonly label: _angular_core.InputSignal<string>;
|
|
1480
|
+
/** Shown while files are dragged over the zone. */
|
|
1481
|
+
readonly dropLabel: _angular_core.InputSignal<string>;
|
|
1482
|
+
readonly browseLabel: _angular_core.InputSignal<string>;
|
|
1483
|
+
/** Extra line under the label, e.g. "JPEG or PNG, up to 10 MB". */
|
|
1484
|
+
readonly hint: _angular_core.InputSignal<string>;
|
|
1485
|
+
/** Tokens: `{name}`. */
|
|
1486
|
+
readonly wrongTypeMessage: _angular_core.InputSignal<string>;
|
|
1487
|
+
/** Tokens: `{name}`, `{max}` (formatted size). */
|
|
1488
|
+
readonly tooLargeMessage: _angular_core.InputSignal<string>;
|
|
1489
|
+
/** Tokens: `{name}`, `{max}` (file count). */
|
|
1490
|
+
readonly tooManyMessage: _angular_core.InputSignal<string>;
|
|
1491
|
+
/** Files that passed every check, in pick/drop order. */
|
|
1492
|
+
readonly files: _angular_core.OutputEmitterRef<File[]>;
|
|
1493
|
+
/** Files that were turned away, with the reason. */
|
|
1494
|
+
readonly rejected: _angular_core.OutputEmitterRef<SdsFileRejection[]>;
|
|
1495
|
+
protected readonly dragging: _angular_core.WritableSignal<boolean>;
|
|
1496
|
+
protected readonly errors: _angular_core.WritableSignal<string[]>;
|
|
1497
|
+
private dragDepth;
|
|
1498
|
+
protected readonly describedBy: _angular_core.Signal<string>;
|
|
1499
|
+
protected readonly zoneClass: _angular_core.Signal<"flex flex-col items-center justify-center gap-2 rounded-card border-2 border-dashed px-6 py-8 text-center transition-colors cursor-not-allowed border-border bg-muted opacity-60" | "flex flex-col items-center justify-center gap-2 rounded-card border-2 border-dashed px-6 py-8 text-center transition-colors cursor-copy border-brand-500 bg-brand-50 dark:bg-muted" | "flex flex-col items-center justify-center gap-2 rounded-card border-2 border-dashed px-6 py-8 text-center transition-colors cursor-pointer border-border bg-muted/50 hover:border-ink-faint">;
|
|
1500
|
+
/** Open the native file picker. */
|
|
1501
|
+
browse(event?: Event): void;
|
|
1502
|
+
protected onZoneClick(event: MouseEvent): void;
|
|
1503
|
+
protected onDragEnter(event: DragEvent): void;
|
|
1504
|
+
protected onDragOver(event: DragEvent): void;
|
|
1505
|
+
protected onDragLeave(event: DragEvent): void;
|
|
1506
|
+
protected onDrop(event: DragEvent): void;
|
|
1507
|
+
protected onInputChange(event: Event): void;
|
|
1508
|
+
private hasFiles;
|
|
1509
|
+
private handle;
|
|
1510
|
+
private render;
|
|
1511
|
+
/** Clear the error messages under the zone. */
|
|
1512
|
+
clearErrors(): void;
|
|
1513
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<SdsFileDrop, never>;
|
|
1514
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<SdsFileDrop, "sds-file-drop", never, { "accept": { "alias": "accept"; "required": false; "isSignal": true; }; "multiple": { "alias": "multiple"; "required": false; "isSignal": true; }; "maxSize": { "alias": "maxSize"; "required": false; "isSignal": true; }; "maxFiles": { "alias": "maxFiles"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "dropLabel": { "alias": "dropLabel"; "required": false; "isSignal": true; }; "browseLabel": { "alias": "browseLabel"; "required": false; "isSignal": true; }; "hint": { "alias": "hint"; "required": false; "isSignal": true; }; "wrongTypeMessage": { "alias": "wrongTypeMessage"; "required": false; "isSignal": true; }; "tooLargeMessage": { "alias": "tooLargeMessage"; "required": false; "isSignal": true; }; "tooManyMessage": { "alias": "tooManyMessage"; "required": false; "isSignal": true; }; }, { "files": "files"; "rejected": "rejected"; }, never, never, true, never>;
|
|
1515
|
+
}
|
|
1516
|
+
|
|
1517
|
+
/** A crop rectangle in the SOURCE image's natural pixels. */
|
|
1518
|
+
interface SdsCropRect {
|
|
1519
|
+
x: number;
|
|
1520
|
+
y: number;
|
|
1521
|
+
width: number;
|
|
1522
|
+
height: number;
|
|
1523
|
+
}
|
|
1524
|
+
interface SdsImageCropperBlobOptions {
|
|
1525
|
+
/** MIME type of the output. Default `image/jpeg`. */
|
|
1526
|
+
type?: string;
|
|
1527
|
+
/** 0–1 quality for lossy types. Default 0.9. */
|
|
1528
|
+
quality?: number;
|
|
1529
|
+
/** Output width in px (height follows the aspect ratio). Default: the crop's natural width. */
|
|
1530
|
+
width?: number;
|
|
1531
|
+
}
|
|
1532
|
+
type SdsImageCropperShape = 'rect' | 'round';
|
|
1533
|
+
/**
|
|
1534
|
+
* Crops an image to a FIXED aspect ratio (e.g. the shop's card ratio): the frame is fixed and the image
|
|
1535
|
+
* moves and zooms behind it, always covering the frame, so every crop is valid.
|
|
1536
|
+
*
|
|
1537
|
+
* - Pointer: drag to move; wheel or pinch to zoom around the pointer; a zoom slider and ± buttons.
|
|
1538
|
+
* - Keyboard (focus the frame): arrow keys nudge the image (Shift = 10×), `+`/`-` zoom, `0` resets.
|
|
1539
|
+
* - `(cropChange)` emits the crop in the source image's natural pixels after every change;
|
|
1540
|
+
* {@link toBlob} renders it through a canvas (optionally resized) for upload.
|
|
1541
|
+
*
|
|
1542
|
+
* `src` takes a URL or a Blob/File (an object URL is managed for you). For a cross-origin URL the server
|
|
1543
|
+
* must send CORS headers and [crossOrigin] must be set, or the canvas is tainted and toBlob() rejects.
|
|
1544
|
+
*
|
|
1545
|
+
* @example
|
|
1546
|
+
* <sds-image-cropper [src]="file" [aspectRatio]="4 / 3" (cropChange)="crop = $event" #cropper />
|
|
1547
|
+
* <sds-button (click)="upload(await cropper.toBlob({ width: 1600 }))">Save</sds-button>
|
|
1548
|
+
*/
|
|
1549
|
+
declare class SdsImageCropper implements OnDestroy {
|
|
1550
|
+
protected readonly helpId: string;
|
|
1551
|
+
private readonly viewport;
|
|
1552
|
+
/** Image to crop: a URL, or a Blob/File. */
|
|
1553
|
+
readonly src: _angular_core.InputSignal<string | Blob | null>;
|
|
1554
|
+
/** Frame width ÷ height, e.g. `1`, `4 / 3`, `16 / 9`. */
|
|
1555
|
+
readonly aspectRatio: _angular_core.InputSignalWithTransform<number, unknown>;
|
|
1556
|
+
/** Largest zoom factor relative to "cover". */
|
|
1557
|
+
readonly maxZoom: _angular_core.InputSignalWithTransform<number, unknown>;
|
|
1558
|
+
/** Zoom change per button press / key press. */
|
|
1559
|
+
readonly zoomStep: _angular_core.InputSignalWithTransform<number, unknown>;
|
|
1560
|
+
/** Visual mask only (the output is always the rectangle). */
|
|
1561
|
+
readonly shape: _angular_core.InputSignal<SdsImageCropperShape>;
|
|
1562
|
+
/** `crossorigin` for URL sources, needed for toBlob() on a cross-origin image. */
|
|
1563
|
+
readonly crossOrigin: _angular_core.InputSignal<"anonymous" | "use-credentials" | null>;
|
|
1564
|
+
readonly label: _angular_core.InputSignal<string>;
|
|
1565
|
+
readonly roleDescription: _angular_core.InputSignal<string>;
|
|
1566
|
+
readonly instructions: _angular_core.InputSignal<string>;
|
|
1567
|
+
readonly zoomLabel: _angular_core.InputSignal<string>;
|
|
1568
|
+
readonly zoomInLabel: _angular_core.InputSignal<string>;
|
|
1569
|
+
readonly zoomOutLabel: _angular_core.InputSignal<string>;
|
|
1570
|
+
/** The crop, in natural pixels, after every change. */
|
|
1571
|
+
readonly cropChange: _angular_core.OutputEmitterRef<SdsCropRect>;
|
|
1572
|
+
/** The image loaded; natural size. */
|
|
1573
|
+
readonly imageLoad: _angular_core.OutputEmitterRef<{
|
|
1574
|
+
width: number;
|
|
1575
|
+
height: number;
|
|
1576
|
+
}>;
|
|
1577
|
+
/** The image failed to load. */
|
|
1578
|
+
readonly imageError: _angular_core.OutputEmitterRef<void>;
|
|
1579
|
+
protected readonly objectUrl: _angular_core.WritableSignal<string | null>;
|
|
1580
|
+
private ownedUrl;
|
|
1581
|
+
private imgEl;
|
|
1582
|
+
protected readonly loaded: _angular_core.WritableSignal<boolean>;
|
|
1583
|
+
private readonly naturalW;
|
|
1584
|
+
private readonly naturalH;
|
|
1585
|
+
/** Frame size in CSS px (tracked with a ResizeObserver). */
|
|
1586
|
+
private readonly frameW;
|
|
1587
|
+
private readonly frameH;
|
|
1588
|
+
protected readonly zoom: _angular_core.WritableSignal<number>;
|
|
1589
|
+
protected readonly tx: _angular_core.WritableSignal<number>;
|
|
1590
|
+
protected readonly ty: _angular_core.WritableSignal<number>;
|
|
1591
|
+
protected readonly dragging: _angular_core.WritableSignal<boolean>;
|
|
1592
|
+
/** Scale that makes the image just cover the frame (zoom 1). */
|
|
1593
|
+
private readonly coverScale;
|
|
1594
|
+
private readonly scale;
|
|
1595
|
+
protected readonly displayW: _angular_core.Signal<number>;
|
|
1596
|
+
protected readonly displayH: _angular_core.Signal<number>;
|
|
1597
|
+
protected readonly zoomText: _angular_core.Signal<string>;
|
|
1598
|
+
/** The current crop in natural pixels. */
|
|
1599
|
+
readonly crop: _angular_core.Signal<SdsCropRect>;
|
|
1600
|
+
private resizeObserver;
|
|
1601
|
+
private pointers;
|
|
1602
|
+
private lastPinch;
|
|
1603
|
+
constructor();
|
|
1604
|
+
ngOnDestroy(): void;
|
|
1605
|
+
protected onLoad(event: Event): void;
|
|
1606
|
+
protected onError(): void;
|
|
1607
|
+
private revoke;
|
|
1608
|
+
private measureFrame;
|
|
1609
|
+
/** Centre the image at zoom 1. */
|
|
1610
|
+
reset(): void;
|
|
1611
|
+
private setOffset;
|
|
1612
|
+
/** Zoom to `next`, keeping the frame point (px, py) fixed (defaults to the centre). */
|
|
1613
|
+
private zoomTo;
|
|
1614
|
+
/** Zoom in (+) or out (−) by `delta`. */
|
|
1615
|
+
zoomBy(delta: number): void;
|
|
1616
|
+
private emit;
|
|
1617
|
+
protected onPointerDown(event: PointerEvent): void;
|
|
1618
|
+
protected onPointerMove(event: PointerEvent): void;
|
|
1619
|
+
protected onPointerUp(event: PointerEvent): void;
|
|
1620
|
+
private pinchDistance;
|
|
1621
|
+
protected onWheel(event: WheelEvent): void;
|
|
1622
|
+
protected onSlider(event: Event): void;
|
|
1623
|
+
protected onKeydown(event: KeyboardEvent): void;
|
|
1624
|
+
/**
|
|
1625
|
+
* Render the current crop to a canvas (natural resolution, or scaled to `width`). Returns null
|
|
1626
|
+
* before an image has loaded.
|
|
1627
|
+
*/
|
|
1628
|
+
toCanvas(width?: number): HTMLCanvasElement | null;
|
|
1629
|
+
/** Encode the current crop as a Blob (JPEG 0.9 by default). */
|
|
1630
|
+
toBlob(options?: SdsImageCropperBlobOptions): Promise<Blob | null>;
|
|
1631
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<SdsImageCropper, never>;
|
|
1632
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<SdsImageCropper, "sds-image-cropper", never, { "src": { "alias": "src"; "required": false; "isSignal": true; }; "aspectRatio": { "alias": "aspectRatio"; "required": false; "isSignal": true; }; "maxZoom": { "alias": "maxZoom"; "required": false; "isSignal": true; }; "zoomStep": { "alias": "zoomStep"; "required": false; "isSignal": true; }; "shape": { "alias": "shape"; "required": false; "isSignal": true; }; "crossOrigin": { "alias": "crossOrigin"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "roleDescription": { "alias": "roleDescription"; "required": false; "isSignal": true; }; "instructions": { "alias": "instructions"; "required": false; "isSignal": true; }; "zoomLabel": { "alias": "zoomLabel"; "required": false; "isSignal": true; }; "zoomInLabel": { "alias": "zoomInLabel"; "required": false; "isSignal": true; }; "zoomOutLabel": { "alias": "zoomOutLabel"; "required": false; "isSignal": true; }; }, { "cropChange": "cropChange"; "imageLoad": "imageLoad"; "imageError": "imageError"; }, never, never, true, never>;
|
|
1633
|
+
}
|
|
1634
|
+
|
|
902
1635
|
/** Small, dependency-free date helpers (day-granularity, local time). */
|
|
903
1636
|
declare function startOfDay(d: Date): Date;
|
|
904
1637
|
/** Zero-pad a number to two digits (e.g. 9 → "09"). */
|
|
@@ -2023,7 +2756,52 @@ interface SdsTableColumn {
|
|
|
2023
2756
|
align?: 'left' | 'center' | 'right';
|
|
2024
2757
|
/** Fixed column width, e.g. `'120px'` or `'20%'`. */
|
|
2025
2758
|
width?: string;
|
|
2759
|
+
/** Makes the column's cells editable with this editor. */
|
|
2760
|
+
editor?: SdsTableEditor;
|
|
2761
|
+
/** Lock individual cells of an editable column: `false`, or a per-row predicate. Default true. */
|
|
2762
|
+
editable?: boolean | ((row: any) => boolean);
|
|
2763
|
+
/** Choices for the `select` editor (also used to display the chosen label). */
|
|
2764
|
+
options?: SdsTableSelectOption[];
|
|
2765
|
+
/** `number` / `currency` editor: bounds, step and fraction digits (as on sds-input-number). */
|
|
2766
|
+
min?: number;
|
|
2767
|
+
max?: number;
|
|
2768
|
+
step?: number;
|
|
2769
|
+
minFractionDigits?: number;
|
|
2770
|
+
maxFractionDigits?: number;
|
|
2771
|
+
/** `currency` editor: ISO 4217 code. Default `EUR`. */
|
|
2772
|
+
currency?: string;
|
|
2773
|
+
/** Locale for the number/currency editor and display. Defaults to the table's [locale]. */
|
|
2774
|
+
locale?: string;
|
|
2775
|
+
/** Placeholder shown in the editor. */
|
|
2776
|
+
placeholder?: string;
|
|
2777
|
+
/** Display formatter for the cell (view mode, when no `sdsCell` template is given). */
|
|
2778
|
+
format?: (value: unknown, row: any) => string;
|
|
2779
|
+
}
|
|
2780
|
+
/** Cell editors of an editable column. `number`/`currency` reuse sds-input-number. */
|
|
2781
|
+
type SdsTableEditor = 'text' | 'number' | 'currency' | 'select';
|
|
2782
|
+
/** One choice of a `select` column. */
|
|
2783
|
+
interface SdsTableSelectOption {
|
|
2784
|
+
label: string;
|
|
2785
|
+
value: unknown;
|
|
2026
2786
|
}
|
|
2787
|
+
/**
|
|
2788
|
+
* Per-cell error messages: `{ [rowKey]: { [field]: message } }`. `rowKey` is the row's `dataKey`
|
|
2789
|
+
* value (or, without a dataKey, its index in `value`). A falsy message means no error.
|
|
2790
|
+
*/
|
|
2791
|
+
type SdsTableCellErrors = Record<string, Record<string, string | null | undefined>>;
|
|
2792
|
+
/** Emitted when an edited cell is committed with a changed value. */
|
|
2793
|
+
interface SdsTableCellCommitEvent {
|
|
2794
|
+
row: any;
|
|
2795
|
+
field: string;
|
|
2796
|
+
value: unknown;
|
|
2797
|
+
previousValue: unknown;
|
|
2798
|
+
/** The row's dataKey value (or its index in `value` without a dataKey). */
|
|
2799
|
+
rowKey: unknown;
|
|
2800
|
+
/** Index of the row in the `value` input. */
|
|
2801
|
+
rowIndex: number;
|
|
2802
|
+
}
|
|
2803
|
+
/** When a click starts editing an editable cell. */
|
|
2804
|
+
type SdsTableEditTrigger = 'click' | 'dblclick';
|
|
2027
2805
|
type SdsTableSize = 'sm' | 'md' | 'lg';
|
|
2028
2806
|
/** 1 = ascending, -1 = descending, 0 = unsorted. */
|
|
2029
2807
|
type SdsSortOrder = 1 | -1 | 0;
|
|
@@ -2058,6 +2836,16 @@ type SdsSelectionMode = 'single' | 'multiple' | null;
|
|
|
2058
2836
|
* every filtered row regardless of pagination (this is an intentional
|
|
2059
2837
|
* deviation from PrimeNG's per-page select-all).
|
|
2060
2838
|
*
|
|
2839
|
+
* **Editable grid (opt-in).** Set `editable` and give columns an `editor` (`text` · `number` ·
|
|
2840
|
+
* `currency` · `select`). The table becomes an ARIA grid with one tab stop: arrow keys move between
|
|
2841
|
+
* cells (Home/End, Ctrl+Home/End), Enter or F2 edits (typing a character starts editing with it),
|
|
2842
|
+
* Enter commits and moves down (Shift+Enter up), Tab / Shift+Tab commit and move to the next/previous
|
|
2843
|
+
* editable cell, Escape cancels (and is stopped, so an enclosing drawer stays open), clicking elsewhere
|
|
2844
|
+
* commits. Each changed commit emits `(cellCommit)` — the host applies it to its data (the table never
|
|
2845
|
+
* mutates rows) — and marks the cell dirty until {@link clearDirty}. Errors from `[cellErrors]` show
|
|
2846
|
+
* under the cell with `aria-invalid`. Number/currency cells use sds-input-number (live, locale-aware
|
|
2847
|
+
* formatting: "11,9" → "€11.90"). Everything else — sort, paging, selection — is unchanged.
|
|
2848
|
+
*
|
|
2061
2849
|
* @example
|
|
2062
2850
|
* <sds-table [value]="staff" [columns]="cols" dataKey="id"
|
|
2063
2851
|
* sortable paginator [rows]="10" globalFilter
|
|
@@ -2066,6 +2854,11 @@ type SdsSelectionMode = 'single' | 'multiple' | null;
|
|
|
2066
2854
|
* <sds-badge [variant]="row.actif ? 'success' : 'neutral'">{{ value }}</sds-badge>
|
|
2067
2855
|
* </ng-template>
|
|
2068
2856
|
* </sds-table>
|
|
2857
|
+
*
|
|
2858
|
+
* @example
|
|
2859
|
+
* <sds-table [value]="drafts()" [columns]="[{ field: 'name', header: 'Name', editor: 'text' },
|
|
2860
|
+
* { field: 'price', header: 'Price', editor: 'currency', align: 'right' }]"
|
|
2861
|
+
* dataKey="id" editable [cellErrors]="errors()" (cellCommit)="apply($event)" />
|
|
2069
2862
|
*/
|
|
2070
2863
|
declare class SdsTable implements OnDestroy {
|
|
2071
2864
|
protected readonly tableId: string;
|
|
@@ -2123,6 +2916,16 @@ declare class SdsTable implements OnDestroy {
|
|
|
2123
2916
|
readonly resizableColumns: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
2124
2917
|
/** Drag a column header to reorder columns. */
|
|
2125
2918
|
readonly reorderableColumns: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
2919
|
+
/** Turn on the editable grid (columns opt in with `editor`). Off: the table is unchanged. */
|
|
2920
|
+
readonly editable: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
2921
|
+
/** Whether a single click (default) or a double click starts editing an editable cell. */
|
|
2922
|
+
readonly editOn: _angular_core.InputSignal<SdsTableEditTrigger>;
|
|
2923
|
+
/** Per-cell error messages, keyed by row key then field (see {@link SdsTableCellErrors}). */
|
|
2924
|
+
readonly cellErrors: _angular_core.InputSignal<SdsTableCellErrors>;
|
|
2925
|
+
/** Default locale for number/currency cells (a column's `locale` wins). Empty = the browser's. */
|
|
2926
|
+
readonly locale: _angular_core.InputSignal<string>;
|
|
2927
|
+
/** Spoken marker of an edited (dirty) cell. */
|
|
2928
|
+
readonly dirtyLabel: _angular_core.InputSignal<string>;
|
|
2126
2929
|
readonly sortChange: _angular_core.OutputEmitterRef<SdsTableSortEvent>;
|
|
2127
2930
|
readonly pageChange: _angular_core.OutputEmitterRef<SdsPaginatorState>;
|
|
2128
2931
|
readonly rowSelect: _angular_core.OutputEmitterRef<any>;
|
|
@@ -2139,6 +2942,8 @@ declare class SdsTable implements OnDestroy {
|
|
|
2139
2942
|
fromIndex: number;
|
|
2140
2943
|
toIndex: number;
|
|
2141
2944
|
}>;
|
|
2945
|
+
/** Emitted when an edited cell is committed with a CHANGED value. Apply it to your data. */
|
|
2946
|
+
readonly cellCommit: _angular_core.OutputEmitterRef<SdsTableCellCommitEvent>;
|
|
2142
2947
|
private readonly cellTemplates;
|
|
2143
2948
|
private readonly templateMap;
|
|
2144
2949
|
protected templateFor(field: string): _angular_core.TemplateRef<SdsTableCellContext> | null;
|
|
@@ -2215,12 +3020,66 @@ declare class SdsTable implements OnDestroy {
|
|
|
2215
3020
|
protected onColDragOver(e: DragEvent): void;
|
|
2216
3021
|
protected onColDrop(e: DragEvent, toIndex: number): void;
|
|
2217
3022
|
protected trackRow(index: number, row: any): unknown;
|
|
3023
|
+
private readonly host;
|
|
3024
|
+
private readonly injector;
|
|
3025
|
+
private readonly numberEditor;
|
|
3026
|
+
/** The roving tab stop (row index in the displayed page, column index). */
|
|
3027
|
+
private readonly activeCell;
|
|
3028
|
+
/** The cell being edited, if any. */
|
|
3029
|
+
private readonly editing;
|
|
3030
|
+
/** The editor's working value. */
|
|
3031
|
+
protected readonly draft: _angular_core.WritableSignal<unknown>;
|
|
3032
|
+
/** Edited cells: row key → fields. */
|
|
3033
|
+
private readonly dirty;
|
|
3034
|
+
/** Set while the table moves focus itself, so the editor's blur doesn't commit twice. */
|
|
3035
|
+
private suppressBlur;
|
|
3036
|
+
/** Active cell clamped to the current page and columns. */
|
|
3037
|
+
private readonly tabStop;
|
|
3038
|
+
protected readonly draftText: _angular_core.Signal<string>;
|
|
3039
|
+
protected isTabStop(r: number, c: number): boolean;
|
|
3040
|
+
protected isEditing(r: number, c: number): boolean;
|
|
3041
|
+
protected isCellEditable(row: any, col: SdsTableColumn): boolean;
|
|
3042
|
+
/** Row key used by dirty tracking, errors and commit events. */
|
|
3043
|
+
private rowKeyOf;
|
|
3044
|
+
protected cellErrorFor(row: any, field: string): string | null;
|
|
3045
|
+
protected cellErrorId(r: number, c: number): string;
|
|
3046
|
+
protected isDirty(row: any, field: string): boolean;
|
|
3047
|
+
/** Forget the dirty marks — all of them, or one row's (by row key). */
|
|
3048
|
+
clearDirty(rowKey?: unknown): void;
|
|
3049
|
+
/** Display text of a cell in view mode: `format`, else the editor's formatting, else the raw value. */
|
|
3050
|
+
protected displayCell(row: any, col: SdsTableColumn): string;
|
|
3051
|
+
protected gridCellClass(row: any, col: SdsTableColumn, r: number, c: number): string;
|
|
3052
|
+
protected onCellFocus(r: number, c: number): void;
|
|
3053
|
+
protected onCellClick(event: MouseEvent, r: number, c: number): void;
|
|
3054
|
+
protected onCellDblClick(event: MouseEvent, r: number, c: number): void;
|
|
3055
|
+
/**
|
|
3056
|
+
* Start editing a cell of the displayed page (e.g. the first cell of a row you just added).
|
|
3057
|
+
* `field` names the column. Returns false when the cell isn't editable.
|
|
3058
|
+
*/
|
|
3059
|
+
editCell(rowIndex: number, field: string): boolean;
|
|
3060
|
+
private startEdit;
|
|
3061
|
+
private focusEditor;
|
|
3062
|
+
protected onTextEditorInput(event: Event): void;
|
|
3063
|
+
protected onSelectEditorChange(event: Event, col: SdsTableColumn): void;
|
|
3064
|
+
/** Focus left the editor (a click elsewhere): commit, but don't pull focus back. */
|
|
3065
|
+
protected onEditorBlur(): void;
|
|
3066
|
+
/**
|
|
3067
|
+
* Commit the edit. `move` picks the next active cell; `refocus` puts focus back on the grid (not when
|
|
3068
|
+
* the user clicked away).
|
|
3069
|
+
*/
|
|
3070
|
+
private commitEdit;
|
|
3071
|
+
private cancelEdit;
|
|
3072
|
+
/** The next editable cell in reading order (wrapping rows), or null at the grid's edge. */
|
|
3073
|
+
private nextEditable;
|
|
3074
|
+
private cellEl;
|
|
3075
|
+
private focusCellSoon;
|
|
3076
|
+
protected onGridKeydown(event: KeyboardEvent): void;
|
|
2218
3077
|
protected headCellClass(col?: SdsTableColumn): string;
|
|
2219
3078
|
protected cellClass(col?: SdsTableColumn): string;
|
|
2220
3079
|
protected rowClass(row: any, index: number): string;
|
|
2221
3080
|
protected checkboxClass(checked: boolean, indeterminate: boolean): string;
|
|
2222
3081
|
static ɵfac: _angular_core.ɵɵFactoryDeclaration<SdsTable, never>;
|
|
2223
|
-
static ɵcmp: _angular_core.ɵɵComponentDeclaration<SdsTable, "sds-table", never, { "value": { "alias": "value"; "required": false; "isSignal": true; }; "columns": { "alias": "columns"; "required": false; "isSignal": true; }; "dataKey": { "alias": "dataKey"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "striped": { "alias": "striped"; "required": false; "isSignal": true; }; "gridlines": { "alias": "gridlines"; "required": false; "isSignal": true; }; "hoverable": { "alias": "hoverable"; "required": false; "isSignal": true; }; "sortable": { "alias": "sortable"; "required": false; "isSignal": true; }; "paginator": { "alias": "paginator"; "required": false; "isSignal": true; }; "rows": { "alias": "rows"; "required": false; "isSignal": true; }; "rowsPerPageOptions": { "alias": "rowsPerPageOptions"; "required": false; "isSignal": true; }; "showCurrentPageReport": { "alias": "showCurrentPageReport"; "required": false; "isSignal": true; }; "currentPageReportTemplate": { "alias": "currentPageReportTemplate"; "required": false; "isSignal": true; }; "rowsPerPageLabel": { "alias": "rowsPerPageLabel"; "required": false; "isSignal": true; }; "paginationLabel": { "alias": "paginationLabel"; "required": false; "isSignal": true; }; "firstPageLabel": { "alias": "firstPageLabel"; "required": false; "isSignal": true; }; "previousPageLabel": { "alias": "previousPageLabel"; "required": false; "isSignal": true; }; "nextPageLabel": { "alias": "nextPageLabel"; "required": false; "isSignal": true; }; "lastPageLabel": { "alias": "lastPageLabel"; "required": false; "isSignal": true; }; "pageLinkLabel": { "alias": "pageLinkLabel"; "required": false; "isSignal": true; }; "globalFilter": { "alias": "globalFilter"; "required": false; "isSignal": true; }; "globalFilterPlaceholder": { "alias": "globalFilterPlaceholder"; "required": false; "isSignal": true; }; "globalFilterAriaLabel": { "alias": "globalFilterAriaLabel"; "required": false; "isSignal": true; }; "globalFilterFields": { "alias": "globalFilterFields"; "required": false; "isSignal": true; }; "selectionMode": { "alias": "selectionMode"; "required": false; "isSignal": true; }; "selection": { "alias": "selection"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "emptyMessage": { "alias": "emptyMessage"; "required": false; "isSignal": true; }; "caption": { "alias": "caption"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "scrollHeight": { "alias": "scrollHeight"; "required": false; "isSignal": true; }; "lazy": { "alias": "lazy"; "required": false; "isSignal": true; }; "totalRecords": { "alias": "totalRecords"; "required": false; "isSignal": true; }; "expandable": { "alias": "expandable"; "required": false; "isSignal": true; }; "resizableColumns": { "alias": "resizableColumns"; "required": false; "isSignal": true; }; "reorderableColumns": { "alias": "reorderableColumns"; "required": false; "isSignal": true; }; }, { "selection": "selectionChange"; "sortChange": "sortChange"; "pageChange": "pageChange"; "rowSelect": "rowSelect"; "rowUnselect": "rowUnselect"; "lazyLoad": "lazyLoad"; "rowClick": "rowClick"; "rowExpand": "rowExpand"; "rowCollapse": "rowCollapse"; "colReorder": "colReorder"; }, ["cellTemplates", "rowExpansion"], never, true, never>;
|
|
3082
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<SdsTable, "sds-table", never, { "value": { "alias": "value"; "required": false; "isSignal": true; }; "columns": { "alias": "columns"; "required": false; "isSignal": true; }; "dataKey": { "alias": "dataKey"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "striped": { "alias": "striped"; "required": false; "isSignal": true; }; "gridlines": { "alias": "gridlines"; "required": false; "isSignal": true; }; "hoverable": { "alias": "hoverable"; "required": false; "isSignal": true; }; "sortable": { "alias": "sortable"; "required": false; "isSignal": true; }; "paginator": { "alias": "paginator"; "required": false; "isSignal": true; }; "rows": { "alias": "rows"; "required": false; "isSignal": true; }; "rowsPerPageOptions": { "alias": "rowsPerPageOptions"; "required": false; "isSignal": true; }; "showCurrentPageReport": { "alias": "showCurrentPageReport"; "required": false; "isSignal": true; }; "currentPageReportTemplate": { "alias": "currentPageReportTemplate"; "required": false; "isSignal": true; }; "rowsPerPageLabel": { "alias": "rowsPerPageLabel"; "required": false; "isSignal": true; }; "paginationLabel": { "alias": "paginationLabel"; "required": false; "isSignal": true; }; "firstPageLabel": { "alias": "firstPageLabel"; "required": false; "isSignal": true; }; "previousPageLabel": { "alias": "previousPageLabel"; "required": false; "isSignal": true; }; "nextPageLabel": { "alias": "nextPageLabel"; "required": false; "isSignal": true; }; "lastPageLabel": { "alias": "lastPageLabel"; "required": false; "isSignal": true; }; "pageLinkLabel": { "alias": "pageLinkLabel"; "required": false; "isSignal": true; }; "globalFilter": { "alias": "globalFilter"; "required": false; "isSignal": true; }; "globalFilterPlaceholder": { "alias": "globalFilterPlaceholder"; "required": false; "isSignal": true; }; "globalFilterAriaLabel": { "alias": "globalFilterAriaLabel"; "required": false; "isSignal": true; }; "globalFilterFields": { "alias": "globalFilterFields"; "required": false; "isSignal": true; }; "selectionMode": { "alias": "selectionMode"; "required": false; "isSignal": true; }; "selection": { "alias": "selection"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "emptyMessage": { "alias": "emptyMessage"; "required": false; "isSignal": true; }; "caption": { "alias": "caption"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "scrollHeight": { "alias": "scrollHeight"; "required": false; "isSignal": true; }; "lazy": { "alias": "lazy"; "required": false; "isSignal": true; }; "totalRecords": { "alias": "totalRecords"; "required": false; "isSignal": true; }; "expandable": { "alias": "expandable"; "required": false; "isSignal": true; }; "resizableColumns": { "alias": "resizableColumns"; "required": false; "isSignal": true; }; "reorderableColumns": { "alias": "reorderableColumns"; "required": false; "isSignal": true; }; "editable": { "alias": "editable"; "required": false; "isSignal": true; }; "editOn": { "alias": "editOn"; "required": false; "isSignal": true; }; "cellErrors": { "alias": "cellErrors"; "required": false; "isSignal": true; }; "locale": { "alias": "locale"; "required": false; "isSignal": true; }; "dirtyLabel": { "alias": "dirtyLabel"; "required": false; "isSignal": true; }; }, { "selection": "selectionChange"; "sortChange": "sortChange"; "pageChange": "pageChange"; "rowSelect": "rowSelect"; "rowUnselect": "rowUnselect"; "lazyLoad": "lazyLoad"; "rowClick": "rowClick"; "rowExpand": "rowExpand"; "rowCollapse": "rowCollapse"; "colReorder": "colReorder"; "cellCommit": "cellCommit"; }, ["cellTemplates", "rowExpansion"], never, true, never>;
|
|
2224
3083
|
}
|
|
2225
3084
|
|
|
2226
3085
|
/**
|
|
@@ -2639,7 +3498,7 @@ declare class SdsNavGroup {
|
|
|
2639
3498
|
/** Turn the label into an expand/collapse control. */
|
|
2640
3499
|
readonly collapsible: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
2641
3500
|
/** Icon for a collapsible header, so it reads at the same weight as the items it sits among. */
|
|
2642
|
-
readonly icon: _angular_core.InputSignal<"chart-column" | "clipboard-list" | "credit-card" | "external-link" | "languages" | "megaphone" | "monitor" | "store" | "user-round" | "home" | "user-plus" | "user-check" | "hand" | "users" | "bike" | "building-2" | "package" | "package-plus" | "package-open" | "rotate-ccw" | "bar-chart-3" | "search" | "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" | "filter" | "table" | "qr-code" | "eye" | "eye-off" | "user" | "check-circle" | "arrows-clockwise" | "menu" | "file-text" | "hash" | "map-pin" | "inbox" | "arrow-right" | "refresh-cw" | "loader-circle" | "bug" | "scroll-text" | "moon" | "sun" | "search-x" | "command" | "sparkles" | "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>;
|
|
3501
|
+
readonly icon: _angular_core.InputSignal<"chart-column" | "clipboard-list" | "credit-card" | "external-link" | "languages" | "megaphone" | "monitor" | "store" | "user-round" | "home" | "user-plus" | "user-check" | "hand" | "users" | "bike" | "building-2" | "package" | "package-plus" | "package-open" | "rotate-ccw" | "bar-chart-3" | "search" | "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" | "filter" | "table" | "qr-code" | "eye" | "eye-off" | "user" | "check-circle" | "arrows-clockwise" | "menu" | "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" | "zoom-in" | "zoom-out" | "trash-2" | "clock" | "pencil" | "circle-help" | "stock" | "allergen-cereals-gluten" | "allergen-crustaceans" | "allergen-eggs" | "allergen-fish" | "allergen-peanuts" | "allergen-soybeans" | "allergen-milk" | "allergen-nuts" | "allergen-celery" | "allergen-mustard" | "allergen-sesame" | "allergen-sulphites" | "allergen-lupin" | "allergen-molluscs" | null>;
|
|
2643
3502
|
/**
|
|
2644
3503
|
* URL prefix owned by this group, e.g. `/payments`. While the active route starts with it the
|
|
2645
3504
|
* group counts as active and opens itself — unless the person has explicitly toggled it since.
|
|
@@ -2690,6 +3549,7 @@ declare class SdsNavGroup {
|
|
|
2690
3549
|
static ɵcmp: _angular_core.ɵɵComponentDeclaration<SdsNavGroup, "sds-nav-group", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; "collapsible": { "alias": "collapsible"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "basePath": { "alias": "basePath"; "required": false; "isSignal": true; }; }, { "expandedChange": "expandedChange"; }, never, ["*"], true, never>;
|
|
2691
3550
|
}
|
|
2692
3551
|
|
|
3552
|
+
type SdsNavItemBadgeTone = 'brand' | 'danger' | 'neutral';
|
|
2693
3553
|
/**
|
|
2694
3554
|
* A single sidebar navigation entry. Renders an anchor when [link] is set
|
|
2695
3555
|
* (with automatic active state via routerLinkActive) or a button otherwise.
|
|
@@ -2699,18 +3559,36 @@ declare class SdsNavGroup {
|
|
|
2699
3559
|
*
|
|
2700
3560
|
* @example
|
|
2701
3561
|
* <sds-nav-item icon="home" label="Accueil" link="/" [exact]="true" />
|
|
3562
|
+
* <sds-nav-item icon="book-open" label="Menu" link="/menu" [badge]="3" badgeLabel="{count} issues" badgeTone="danger" />
|
|
2702
3563
|
*/
|
|
2703
3564
|
declare class SdsNavItem {
|
|
2704
3565
|
protected readonly store: SidebarStore;
|
|
2705
|
-
readonly icon: _angular_core.InputSignal<"chart-column" | "clipboard-list" | "credit-card" | "external-link" | "languages" | "megaphone" | "monitor" | "store" | "user-round" | "home" | "user-plus" | "user-check" | "hand" | "users" | "bike" | "building-2" | "package" | "package-plus" | "package-open" | "rotate-ccw" | "bar-chart-3" | "search" | "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" | "filter" | "table" | "qr-code" | "eye" | "eye-off" | "user" | "check-circle" | "arrows-clockwise" | "menu" | "file-text" | "hash" | "map-pin" | "inbox" | "arrow-right" | "refresh-cw" | "loader-circle" | "bug" | "scroll-text" | "moon" | "sun" | "search-x" | "command" | "sparkles" | "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>;
|
|
3566
|
+
readonly icon: _angular_core.InputSignal<"chart-column" | "clipboard-list" | "credit-card" | "external-link" | "languages" | "megaphone" | "monitor" | "store" | "user-round" | "home" | "user-plus" | "user-check" | "hand" | "users" | "bike" | "building-2" | "package" | "package-plus" | "package-open" | "rotate-ccw" | "bar-chart-3" | "search" | "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" | "filter" | "table" | "qr-code" | "eye" | "eye-off" | "user" | "check-circle" | "arrows-clockwise" | "menu" | "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" | "zoom-in" | "zoom-out" | "trash-2" | "clock" | "pencil" | "circle-help" | "stock" | "allergen-cereals-gluten" | "allergen-crustaceans" | "allergen-eggs" | "allergen-fish" | "allergen-peanuts" | "allergen-soybeans" | "allergen-milk" | "allergen-nuts" | "allergen-celery" | "allergen-mustard" | "allergen-sesame" | "allergen-sulphites" | "allergen-lupin" | "allergen-molluscs" | null>;
|
|
2706
3567
|
readonly label: _angular_core.InputSignal<string>;
|
|
2707
3568
|
/** Router link target; when null, the item behaves as a button. */
|
|
2708
3569
|
readonly link: _angular_core.InputSignal<string | unknown[] | null>;
|
|
2709
3570
|
readonly exact: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
2710
3571
|
/** Manual active state (combined with routerLinkActive when a link is set). */
|
|
2711
3572
|
readonly active: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
3573
|
+
/**
|
|
3574
|
+
* Optional count shown as a pill after the label (e.g. menu issues to fix). Hidden when null or 0.
|
|
3575
|
+
* On the collapsed rail it sits on the icon's corner.
|
|
3576
|
+
*/
|
|
3577
|
+
readonly badge: _angular_core.InputSignal<number | null>;
|
|
3578
|
+
/** Spoken text for the badge; `{count}` is replaced. Pass a translated string. */
|
|
3579
|
+
readonly badgeLabel: _angular_core.InputSignal<string>;
|
|
3580
|
+
/** Counts above this read as "max+" (e.g. 99+). */
|
|
3581
|
+
readonly badgeMax: _angular_core.InputSignal<number>;
|
|
3582
|
+
/** Badge colour. `danger` for things that block, `brand` (default) for a neutral count. */
|
|
3583
|
+
readonly badgeTone: _angular_core.InputSignal<SdsNavItemBadgeTone>;
|
|
2712
3584
|
readonly select: _angular_core.OutputEmitterRef<void>;
|
|
2713
3585
|
protected readonly collapsed: _angular_core.WritableSignal<boolean>;
|
|
3586
|
+
/** The badge's spoken text, or null when there is nothing to show. */
|
|
3587
|
+
protected readonly badgeText: _angular_core.Signal<string | null>;
|
|
3588
|
+
protected readonly badgeDisplay: _angular_core.Signal<string>;
|
|
3589
|
+
/** Accessible name on the collapsed rail, where the visible label is hidden. */
|
|
3590
|
+
protected readonly collapsedName: _angular_core.Signal<string>;
|
|
3591
|
+
protected readonly badgeClass: _angular_core.Signal<string>;
|
|
2714
3592
|
protected itemClass(isActive: boolean): string;
|
|
2715
3593
|
/**
|
|
2716
3594
|
* The left accent bar on an active item — the strongest "selected" cue, and the one that survives a
|
|
@@ -2719,7 +3597,7 @@ declare class SdsNavItem {
|
|
|
2719
3597
|
*/
|
|
2720
3598
|
protected readonly accentBarClass: _angular_core.Signal<string>;
|
|
2721
3599
|
static ɵfac: _angular_core.ɵɵFactoryDeclaration<SdsNavItem, never>;
|
|
2722
|
-
static ɵcmp: _angular_core.ɵɵComponentDeclaration<SdsNavItem, "sds-nav-item", never, { "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": true; "isSignal": true; }; "link": { "alias": "link"; "required": false; "isSignal": true; }; "exact": { "alias": "exact"; "required": false; "isSignal": true; }; "active": { "alias": "active"; "required": false; "isSignal": true; }; }, { "select": "select"; }, never, never, true, never>;
|
|
3600
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<SdsNavItem, "sds-nav-item", never, { "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": true; "isSignal": true; }; "link": { "alias": "link"; "required": false; "isSignal": true; }; "exact": { "alias": "exact"; "required": false; "isSignal": true; }; "active": { "alias": "active"; "required": false; "isSignal": true; }; "badge": { "alias": "badge"; "required": false; "isSignal": true; }; "badgeLabel": { "alias": "badgeLabel"; "required": false; "isSignal": true; }; "badgeMax": { "alias": "badgeMax"; "required": false; "isSignal": true; }; "badgeTone": { "alias": "badgeTone"; "required": false; "isSignal": true; }; }, { "select": "select"; }, never, never, true, never>;
|
|
2723
3601
|
}
|
|
2724
3602
|
|
|
2725
3603
|
type SdsUserMenuAppearance = 'surface' | 'on-brand';
|
|
@@ -2801,7 +3679,7 @@ type SdsMenuItemTone = 'default' | 'danger';
|
|
|
2801
3679
|
* <sds-menu-item icon="log-out" label="Se déconnecter" tone="danger" (select)="signOut()" />
|
|
2802
3680
|
*/
|
|
2803
3681
|
declare class SdsMenuItem {
|
|
2804
|
-
readonly icon: _angular_core.InputSignal<"chart-column" | "clipboard-list" | "credit-card" | "external-link" | "languages" | "megaphone" | "monitor" | "store" | "user-round" | "home" | "user-plus" | "user-check" | "hand" | "users" | "bike" | "building-2" | "package" | "package-plus" | "package-open" | "rotate-ccw" | "bar-chart-3" | "search" | "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" | "filter" | "table" | "qr-code" | "eye" | "eye-off" | "user" | "check-circle" | "arrows-clockwise" | "menu" | "file-text" | "hash" | "map-pin" | "inbox" | "arrow-right" | "refresh-cw" | "loader-circle" | "bug" | "scroll-text" | "moon" | "sun" | "search-x" | "command" | "sparkles" | "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>;
|
|
3682
|
+
readonly icon: _angular_core.InputSignal<"chart-column" | "clipboard-list" | "credit-card" | "external-link" | "languages" | "megaphone" | "monitor" | "store" | "user-round" | "home" | "user-plus" | "user-check" | "hand" | "users" | "bike" | "building-2" | "package" | "package-plus" | "package-open" | "rotate-ccw" | "bar-chart-3" | "search" | "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" | "filter" | "table" | "qr-code" | "eye" | "eye-off" | "user" | "check-circle" | "arrows-clockwise" | "menu" | "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" | "zoom-in" | "zoom-out" | "trash-2" | "clock" | "pencil" | "circle-help" | "stock" | "allergen-cereals-gluten" | "allergen-crustaceans" | "allergen-eggs" | "allergen-fish" | "allergen-peanuts" | "allergen-soybeans" | "allergen-milk" | "allergen-nuts" | "allergen-celery" | "allergen-mustard" | "allergen-sesame" | "allergen-sulphites" | "allergen-lupin" | "allergen-molluscs" | null>;
|
|
2805
3683
|
readonly label: _angular_core.InputSignal<string>;
|
|
2806
3684
|
/** Router link target for an in-app route; when null (default) the item is not a Router link. */
|
|
2807
3685
|
readonly link: _angular_core.InputSignal<string | unknown[] | null>;
|
|
@@ -3026,5 +3904,5 @@ declare class SdsLanguageSwitcher implements OnDestroy {
|
|
|
3026
3904
|
static ɵcmp: _angular_core.ɵɵComponentDeclaration<SdsLanguageSwitcher, "sds-language-switcher", never, { "languages": { "alias": "languages"; "required": false; "isSignal": true; }; "current": { "alias": "current"; "required": false; "isSignal": true; }; "appearance": { "alias": "appearance"; "required": false; "isSignal": true; }; "align": { "alias": "align"; "required": false; "isSignal": true; }; "direction": { "alias": "direction"; "required": false; "isSignal": true; }; "menuLabel": { "alias": "menuLabel"; "required": false; "isSignal": true; }; "heading": { "alias": "heading"; "required": false; "isSignal": true; }; }, { "current": "currentChange"; "openChange": "openChange"; }, never, never, true, never>;
|
|
3027
3905
|
}
|
|
3028
3906
|
|
|
3029
|
-
export { SDS_ALLERGENS, SDS_ALLERGEN_ICONS, SDS_ALLERGEN_LABELS_EN, SDS_ICONS, SDS_PHONE_COUNTRIES, SdsAccordion, SdsAccordionContent, SdsAccordionHeader, SdsAccordionPanel, SdsAccordionStore, SdsAllergenIcon, SdsAvatar, SdsBadge, SdsButton, SdsCalendar, SdsCard, SdsCheckbox, SdsDatePicker, SdsIcon, SdsInput, SdsInputNumber, SdsLanguageSwitcher, SdsLocalizedInput, SdsMenuItem, SdsMultiSelect, SdsNavGroup, SdsNavItem, SdsOtpInput, SdsPaginator, SdsPhoneInput, SdsRadio, SdsSearchCommand, SdsSelect, SdsSelectEmpty, SdsSelectFooter, SdsSelectOption, SdsShell, SdsSidebar, SdsTab, SdsTabList, SdsTabPanel, SdsTabPanels, SdsTable, SdsTableCell, SdsTableRowExpansion, SdsTabs, SdsTabsStore, SdsTextarea, SdsThemeService, SdsThemeToggle, SdsToastHost, SdsToastService, SdsToggleSwitch, SdsTopbar, SdsTriStateChip, SdsUserMenu, SidebarStore, addDays, addMonths, addMonthsKeepDay, formatDdMmYyyy, formatHhMm, isOutOfRange, isSameDay, isoDay, pad2, sdsFormatNational, sdsMatchDialCode, sdsNormalizeSignificant, startOfDay, startOfMonth };
|
|
3030
|
-
export type { SdsAccordionActive, SdsAccordionValue, SdsAllergen, SdsAvatarStatus, SdsBadgeSize, SdsBadgeVariant, SdsButtonShape, SdsButtonSize, SdsButtonVariant, SdsCardVariant, SdsCheckboxSize, SdsDatePickerSize, SdsIconName, SdsIconSize, SdsInputAppearance, SdsInputNumberAppearance, SdsInputNumberButtonLayout, SdsInputNumberCurrencyDisplay, SdsInputNumberMode, SdsInputNumberSize, SdsInputShape, SdsInputSize, SdsInputType, SdsLanguageOption, SdsLanguageSwitcherAlign, SdsLanguageSwitcherAppearance, SdsLanguageSwitcherDirection, SdsLocalizedInputSize, SdsLocalizedValue, SdsMenuItemTone, SdsMultiSelectDisplay, SdsMultiSelectSize, SdsOtpInputSize, SdsPaginatorSize, SdsPaginatorState, SdsPhoneCountry, SdsPhoneInputSize, SdsPhoneValue, SdsRadioSize, SdsSearchAppearance, SdsSearchItem, SdsSelectAppearance, SdsSelectEmptyContext, SdsSelectFooterContext, SdsSelectOptionContext, SdsSelectSize, SdsShellBackground, SdsSidebarAppearance, SdsSortOrder, SdsTabValue, SdsTableCellContext, SdsTableColumn, SdsTableLazyEvent, SdsTableRowExpansionContext, SdsTableSize, SdsTableSortEvent, SdsTextareaAppearance, SdsTextareaResize, SdsTextareaSize, SdsTheme, SdsThemeToggleAppearance, SdsToast, SdsToastKind, SdsToggleSwitchSize, SdsTopbarAppearance, SdsTriState, SdsTriStateChipSize, SdsUserMenuAlign, SdsUserMenuAppearance };
|
|
3907
|
+
export { SDS_ALLERGENS, SDS_ALLERGEN_ICONS, SDS_ALLERGEN_LABELS_EN, SDS_ICONS, SDS_PHONE_COUNTRIES, SdsAccordion, SdsAccordionContent, SdsAccordionHeader, SdsAccordionPanel, SdsAccordionStore, SdsAllergenIcon, SdsAvatar, SdsBadge, SdsBulkBar, SdsButton, SdsCalendar, SdsCard, SdsCheckbox, SdsChecklistRow, SdsDatePicker, SdsFileDrop, SdsIcon, SdsImageCropper, SdsInput, SdsInputNumber, SdsLanguageSwitcher, SdsLocalizedInput, SdsMenu, SdsMenuItem, SdsMenuTrigger, SdsMultiSelect, SdsNavGroup, SdsNavItem, SdsOtpInput, SdsPaginator, SdsPhoneInput, SdsRadio, SdsScore, SdsSearchCommand, SdsSegmented, SdsSelect, SdsSelectEmpty, SdsSelectFooter, SdsSelectOption, SdsShell, SdsSidebar, SdsSortableHandle, SdsSortableItem, SdsSortableList, SdsStatusTile, SdsTab, SdsTabList, SdsTabPanel, SdsTabPanels, SdsTable, SdsTableCell, SdsTableRowExpansion, SdsTabs, SdsTabsStore, SdsTextarea, SdsThemeService, SdsThemeToggle, SdsToastHost, SdsToastService, SdsToggleSwitch, SdsTopbar, SdsTriStateChip, SdsUserMenu, SidebarStore, addDays, addMonths, addMonthsKeepDay, formatDdMmYyyy, formatHhMm, isOutOfRange, isSameDay, isoDay, pad2, sdsFileMatchesAccept, sdsFormatBytes, sdsFormatNational, sdsMatchDialCode, sdsNormalizeSignificant, startOfDay, startOfMonth };
|
|
3908
|
+
export type { SdsAccordionActive, SdsAccordionValue, SdsAllergen, SdsAvatarStatus, SdsBadgeSize, SdsBadgeVariant, SdsBulkBarPosition, SdsButtonShape, SdsButtonSize, SdsButtonVariant, SdsCardVariant, SdsCheckboxSize, SdsChecklistStatus, SdsCropRect, SdsDatePickerSize, SdsFileRejection, SdsFileRejectionReason, SdsIconName, SdsIconSize, SdsImageCropperBlobOptions, SdsImageCropperShape, SdsInputAppearance, SdsInputNumberAppearance, SdsInputNumberButtonLayout, SdsInputNumberCurrencyDisplay, SdsInputNumberMode, SdsInputNumberSize, SdsInputShape, SdsInputSize, SdsInputType, SdsLanguageOption, SdsLanguageSwitcherAlign, SdsLanguageSwitcherAppearance, SdsLanguageSwitcherDirection, SdsLocalizedInputSize, SdsLocalizedValue, SdsMenuAction, SdsMenuAlign, SdsMenuEntry, SdsMenuItemTone, SdsMenuSeparator, SdsMultiSelectDisplay, SdsMultiSelectSize, SdsNavItemBadgeTone, SdsOtpInputSize, SdsPaginatorSize, SdsPaginatorState, SdsPhoneCountry, SdsPhoneInputSize, SdsPhoneValue, SdsRadioSize, SdsScoreSize, SdsScoreTier, SdsScoreVariant, SdsSearchAppearance, SdsSearchItem, SdsSegmentedOption, SdsSegmentedSize, SdsSelectAppearance, SdsSelectEmptyContext, SdsSelectFooterContext, SdsSelectOptionContext, SdsSelectSize, SdsShellBackground, SdsSidebarAppearance, SdsSortOrder, SdsSortableAppearance, SdsSortableItemContext, SdsSortableReorderEvent, SdsStatusTileState, SdsTabValue, SdsTableCellCommitEvent, SdsTableCellContext, SdsTableCellErrors, SdsTableColumn, SdsTableEditTrigger, SdsTableEditor, SdsTableLazyEvent, SdsTableRowExpansionContext, SdsTableSelectOption, SdsTableSize, SdsTableSortEvent, SdsTextareaAppearance, SdsTextareaResize, SdsTextareaSize, SdsTheme, SdsThemeToggleAppearance, SdsToast, SdsToastKind, SdsToggleSwitchSize, SdsTopbarAppearance, SdsTriState, SdsTriStateChipSize, SdsUserMenuAlign, SdsUserMenuAppearance };
|