@besaitech/ng-design-system 0.0.56 → 0.0.58
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +7 -6
- package/fesm2022/besaitech-ng-design-system.mjs +354 -133
- package/fesm2022/besaitech-ng-design-system.mjs.map +1 -1
- package/index.d.ts +112 -33
- package/package.json +1 -1
- package/themes/base.css +13 -0
- package/themes/belvigo-emerald.css +22 -4
package/index.d.ts
CHANGED
|
@@ -71,6 +71,10 @@ declare const SDS_ICONS: {
|
|
|
71
71
|
readonly 'arrow-up': "<path d=\"m5 12 7-7 7 7\"/><path d=\"M12 19V5\"/>";
|
|
72
72
|
readonly 'arrow-down': "<path d=\"M12 5v14\"/><path d=\"m19 12-7 7-7-7\"/>";
|
|
73
73
|
readonly 'chevrons-up-down': "<path d=\"m7 15 5 5 5-5\"/><path d=\"m7 9 5-5 5 5\"/>";
|
|
74
|
+
readonly 'chevrons-up': "<path d=\"m17 11-5-5-5 5\"/><path d=\"m17 18-5-5-5 5\"/>";
|
|
75
|
+
readonly 'chevrons-down': "<path d=\"m7 6 5 5 5-5\"/><path d=\"m7 13 5 5 5-5\"/>";
|
|
76
|
+
readonly star: "<path d=\"M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z\"/>";
|
|
77
|
+
readonly 'message-square': "<path d=\"M22 17a2 2 0 0 1-2 2H6.828a2 2 0 0 0-1.414.586l-2.202 2.202A.71.71 0 0 1 2 21.286V5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2z\"/>";
|
|
74
78
|
readonly filter: "<polygon points=\"22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3\"/>";
|
|
75
79
|
readonly table: "<path d=\"M12 3v18\"/><rect width=\"18\" height=\"18\" x=\"3\" y=\"3\" rx=\"2\"/><path d=\"M3 9h18\"/><path d=\"M3 15h18\"/>";
|
|
76
80
|
readonly 'qr-code': "<rect width=\"5\" height=\"5\" x=\"3\" y=\"3\" rx=\"1\"/><rect width=\"5\" height=\"5\" x=\"16\" y=\"3\" rx=\"1\"/><rect width=\"5\" height=\"5\" x=\"3\" y=\"16\" rx=\"1\"/><path d=\"M21 16h-3a2 2 0 0 0-2 2v3\"/><path d=\"M21 21v.01\"/><path d=\"M12 7v3a2 2 0 0 1-2 2H7\"/><path d=\"M3 12h.01\"/><path d=\"M12 3h.01\"/><path d=\"M12 16v.01\"/><path d=\"M16 12h1\"/><path d=\"M21 12v.01\"/><path d=\"M12 21v-1\"/>";
|
|
@@ -135,18 +139,24 @@ type SdsIconSize = 'sm' | 'md' | 'lg' | 'xl';
|
|
|
135
139
|
* @example
|
|
136
140
|
* <sds-icon name="search" />
|
|
137
141
|
* <sds-icon name="home" [size]="18" />
|
|
142
|
+
* <sds-icon name="star" filled class="text-accent-amber" />
|
|
138
143
|
*/
|
|
139
144
|
declare class SdsIcon {
|
|
140
145
|
private readonly sanitizer;
|
|
141
146
|
/** Icon identifier from the registry. */
|
|
142
|
-
readonly name: _angular_core.InputSignal<"
|
|
147
|
+
readonly name: _angular_core.InputSignal<"filter" | "copy" | "menu" | "search" | "table" | "image" | "chart-column" | "clipboard-list" | "credit-card" | "external-link" | "languages" | "megaphone" | "monitor" | "store" | "user-round" | "home" | "user-plus" | "user-check" | "hand" | "users" | "bike" | "building-2" | "package" | "package-plus" | "package-open" | "rotate-ccw" | "bar-chart-3" | "log-out" | "panel-left-close" | "panel-left-open" | "panel-left" | "calendar" | "chevron-right" | "chevron-left" | "chevron-down" | "chevron-up" | "plus" | "minus" | "chevrons-left" | "chevrons-right" | "x" | "check" | "alert-circle" | "info" | "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" | "chevrons-up" | "chevrons-down" | "star" | "message-square" | "qr-code" | "eye" | "eye-off" | "user" | "check-circle" | "arrows-clockwise" | "file-text" | "hash" | "map-pin" | "inbox" | "arrow-right" | "refresh-cw" | "loader-circle" | "bug" | "scroll-text" | "moon" | "sun" | "search-x" | "command" | "sparkles" | "triangle-alert" | "octagon-x" | "ban" | "ellipsis" | "ellipsis-vertical" | "grip-vertical" | "upload" | "image-off" | "utensils" | "zoom-in" | "zoom-out" | "trash-2" | "clock" | "pencil" | "circle-help" | "stock" | "allergen-cereals-gluten" | "allergen-crustaceans" | "allergen-eggs" | "allergen-fish" | "allergen-peanuts" | "allergen-soybeans" | "allergen-milk" | "allergen-nuts" | "allergen-celery" | "allergen-mustard" | "allergen-sesame" | "allergen-sulphites" | "allergen-lupin" | "allergen-molluscs">;
|
|
143
148
|
/** Square size: a pixel number, a numeric string, or a keyword (sm·md·lg·xl). */
|
|
144
149
|
readonly size: _angular_core.InputSignalWithTransform<number, string | number>;
|
|
145
150
|
/** Stroke width of the line icon. */
|
|
146
151
|
readonly strokeWidth: _angular_core.InputSignal<number>;
|
|
152
|
+
/**
|
|
153
|
+
* Fill the shape with the current colour as well as stroking it — a filled rating star, a solid dot.
|
|
154
|
+
* Only closed shapes (star, circle…) read as filled; open line icons are unchanged.
|
|
155
|
+
*/
|
|
156
|
+
readonly filled: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
147
157
|
protected readonly svg: _angular_core.Signal<SafeHtml>;
|
|
148
158
|
static ɵfac: _angular_core.ɵɵFactoryDeclaration<SdsIcon, never>;
|
|
149
|
-
static ɵcmp: _angular_core.ɵɵComponentDeclaration<SdsIcon, "sds-icon", never, { "name": { "alias": "name"; "required": true; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "strokeWidth": { "alias": "strokeWidth"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
|
|
159
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<SdsIcon, "sds-icon", never, { "name": { "alias": "name"; "required": true; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "strokeWidth": { "alias": "strokeWidth"; "required": false; "isSignal": true; }; "filled": { "alias": "filled"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
|
|
150
160
|
}
|
|
151
161
|
|
|
152
162
|
type SdsButtonVariant = 'primary' | 'secondary' | 'tertiary' | 'ghost' | 'danger';
|
|
@@ -169,7 +179,7 @@ declare class SdsButton {
|
|
|
169
179
|
* most important control.
|
|
170
180
|
*/
|
|
171
181
|
readonly shape: _angular_core.InputSignal<SdsButtonShape>;
|
|
172
|
-
readonly type: _angular_core.InputSignal<"
|
|
182
|
+
readonly type: _angular_core.InputSignal<"reset" | "submit" | "button">;
|
|
173
183
|
readonly disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
174
184
|
readonly loading: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
175
185
|
/** Full-width button. */
|
|
@@ -197,13 +207,32 @@ type SdsInputType = 'text' | 'email' | 'password' | 'number' | 'tel' | 'search'
|
|
|
197
207
|
* sidebar search field).
|
|
198
208
|
*/
|
|
199
209
|
declare class SdsInput implements ControlValueAccessor {
|
|
200
|
-
readonly
|
|
210
|
+
private readonly autoId;
|
|
211
|
+
/**
|
|
212
|
+
* `id` of the native `<input>` — for a `<label for>` outside the component, or to focus the field with
|
|
213
|
+
* `document.getElementById(id).focus()` (after adding a row, say). Empty (default) generates one. Set it
|
|
214
|
+
* here rather than as an `id` on the host: the host is not the focusable element.
|
|
215
|
+
*/
|
|
216
|
+
readonly inputId: _angular_core.InputSignal<string>;
|
|
217
|
+
/** The native field's id: {@link inputId} or the generated one. */
|
|
218
|
+
protected readonly fieldId: _angular_core.Signal<string>;
|
|
201
219
|
readonly label: _angular_core.InputSignal<string>;
|
|
202
220
|
/** Accessible name used when no visible [label] is provided. */
|
|
203
221
|
readonly ariaLabel: _angular_core.InputSignal<string>;
|
|
204
222
|
readonly placeholder: _angular_core.InputSignal<string>;
|
|
205
223
|
readonly hint: _angular_core.InputSignal<string>;
|
|
206
224
|
readonly error: _angular_core.InputSignal<string>;
|
|
225
|
+
/**
|
|
226
|
+
* Mark the field invalid (danger frame + `aria-invalid`) without showing an [error] message — for a
|
|
227
|
+
* form that reports its problems once, in a summary or a single message under a group of fields.
|
|
228
|
+
*/
|
|
229
|
+
readonly invalid: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
230
|
+
/**
|
|
231
|
+
* Mark the field required: an asterisk after the [label] (hidden from screen readers) and
|
|
232
|
+
* `aria-required` on the field. It does not validate — keep `Validators.required` (or your own check)
|
|
233
|
+
* for that; this is the visible and announced half.
|
|
234
|
+
*/
|
|
235
|
+
readonly required: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
207
236
|
/**
|
|
208
237
|
* `search` is the semantically right type for a search field, and the template strips the WebKit
|
|
209
238
|
* search decorations that come with it. Without that, a `search` field with {@link clearable} draws
|
|
@@ -238,8 +267,8 @@ declare class SdsInput implements ControlValueAccessor {
|
|
|
238
267
|
* translate it — it is an icon-only control, so this string is its only name.
|
|
239
268
|
*/
|
|
240
269
|
readonly clearLabel: _angular_core.InputSignal<string>;
|
|
241
|
-
readonly leadingIcon: _angular_core.InputSignal<"
|
|
242
|
-
readonly trailingIcon: _angular_core.InputSignal<"
|
|
270
|
+
readonly leadingIcon: _angular_core.InputSignal<"filter" | "copy" | "menu" | "search" | "table" | "image" | "chart-column" | "clipboard-list" | "credit-card" | "external-link" | "languages" | "megaphone" | "monitor" | "store" | "user-round" | "home" | "user-plus" | "user-check" | "hand" | "users" | "bike" | "building-2" | "package" | "package-plus" | "package-open" | "rotate-ccw" | "bar-chart-3" | "log-out" | "panel-left-close" | "panel-left-open" | "panel-left" | "calendar" | "chevron-right" | "chevron-left" | "chevron-down" | "chevron-up" | "plus" | "minus" | "chevrons-left" | "chevrons-right" | "x" | "check" | "alert-circle" | "info" | "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" | "chevrons-up" | "chevrons-down" | "star" | "message-square" | "qr-code" | "eye" | "eye-off" | "user" | "check-circle" | "arrows-clockwise" | "file-text" | "hash" | "map-pin" | "inbox" | "arrow-right" | "refresh-cw" | "loader-circle" | "bug" | "scroll-text" | "moon" | "sun" | "search-x" | "command" | "sparkles" | "triangle-alert" | "octagon-x" | "ban" | "ellipsis" | "ellipsis-vertical" | "grip-vertical" | "upload" | "image-off" | "utensils" | "zoom-in" | "zoom-out" | "trash-2" | "clock" | "pencil" | "circle-help" | "stock" | "allergen-cereals-gluten" | "allergen-crustaceans" | "allergen-eggs" | "allergen-fish" | "allergen-peanuts" | "allergen-soybeans" | "allergen-milk" | "allergen-nuts" | "allergen-celery" | "allergen-mustard" | "allergen-sesame" | "allergen-sulphites" | "allergen-lupin" | "allergen-molluscs" | null>;
|
|
271
|
+
readonly trailingIcon: _angular_core.InputSignal<"filter" | "copy" | "menu" | "search" | "table" | "image" | "chart-column" | "clipboard-list" | "credit-card" | "external-link" | "languages" | "megaphone" | "monitor" | "store" | "user-round" | "home" | "user-plus" | "user-check" | "hand" | "users" | "bike" | "building-2" | "package" | "package-plus" | "package-open" | "rotate-ccw" | "bar-chart-3" | "log-out" | "panel-left-close" | "panel-left-open" | "panel-left" | "calendar" | "chevron-right" | "chevron-left" | "chevron-down" | "chevron-up" | "plus" | "minus" | "chevrons-left" | "chevrons-right" | "x" | "check" | "alert-circle" | "info" | "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" | "chevrons-up" | "chevrons-down" | "star" | "message-square" | "qr-code" | "eye" | "eye-off" | "user" | "check-circle" | "arrows-clockwise" | "file-text" | "hash" | "map-pin" | "inbox" | "arrow-right" | "refresh-cw" | "loader-circle" | "bug" | "scroll-text" | "moon" | "sun" | "search-x" | "command" | "sparkles" | "triangle-alert" | "octagon-x" | "ban" | "ellipsis" | "ellipsis-vertical" | "grip-vertical" | "upload" | "image-off" | "utensils" | "zoom-in" | "zoom-out" | "trash-2" | "clock" | "pencil" | "circle-help" | "stock" | "allergen-cereals-gluten" | "allergen-crustaceans" | "allergen-eggs" | "allergen-fish" | "allergen-peanuts" | "allergen-soybeans" | "allergen-milk" | "allergen-nuts" | "allergen-celery" | "allergen-mustard" | "allergen-sesame" | "allergen-sulphites" | "allergen-lupin" | "allergen-molluscs" | null>;
|
|
243
272
|
/**
|
|
244
273
|
* A CLICKABLE trailing icon, for the affordances that belong to the field itself — password reveal
|
|
245
274
|
* above all. Distinct from {@link trailingIcon}, which is decorative and explicitly
|
|
@@ -249,7 +278,7 @@ declare class SdsInput implements ControlValueAccessor {
|
|
|
249
278
|
* Always pair it with {@link trailingActionLabel} — an icon-only button with no accessible name is
|
|
250
279
|
* unusable by a screen reader. For a toggle, also bind {@link trailingActionPressed}.
|
|
251
280
|
*/
|
|
252
|
-
readonly trailingAction: _angular_core.InputSignal<"
|
|
281
|
+
readonly trailingAction: _angular_core.InputSignal<"filter" | "copy" | "menu" | "search" | "table" | "image" | "chart-column" | "clipboard-list" | "credit-card" | "external-link" | "languages" | "megaphone" | "monitor" | "store" | "user-round" | "home" | "user-plus" | "user-check" | "hand" | "users" | "bike" | "building-2" | "package" | "package-plus" | "package-open" | "rotate-ccw" | "bar-chart-3" | "log-out" | "panel-left-close" | "panel-left-open" | "panel-left" | "calendar" | "chevron-right" | "chevron-left" | "chevron-down" | "chevron-up" | "plus" | "minus" | "chevrons-left" | "chevrons-right" | "x" | "check" | "alert-circle" | "info" | "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" | "chevrons-up" | "chevrons-down" | "star" | "message-square" | "qr-code" | "eye" | "eye-off" | "user" | "check-circle" | "arrows-clockwise" | "file-text" | "hash" | "map-pin" | "inbox" | "arrow-right" | "refresh-cw" | "loader-circle" | "bug" | "scroll-text" | "moon" | "sun" | "search-x" | "command" | "sparkles" | "triangle-alert" | "octagon-x" | "ban" | "ellipsis" | "ellipsis-vertical" | "grip-vertical" | "upload" | "image-off" | "utensils" | "zoom-in" | "zoom-out" | "trash-2" | "clock" | "pencil" | "circle-help" | "stock" | "allergen-cereals-gluten" | "allergen-crustaceans" | "allergen-eggs" | "allergen-fish" | "allergen-peanuts" | "allergen-soybeans" | "allergen-milk" | "allergen-nuts" | "allergen-celery" | "allergen-mustard" | "allergen-sesame" | "allergen-sulphites" | "allergen-lupin" | "allergen-molluscs" | null>;
|
|
253
282
|
/** Accessible name for {@link trailingAction}. Translate it in the consuming app. */
|
|
254
283
|
readonly trailingActionLabel: _angular_core.InputSignal<string>;
|
|
255
284
|
/** `aria-pressed` for a toggling action (e.g. show/hide password). Null renders no attribute. */
|
|
@@ -274,7 +303,7 @@ declare class SdsInput implements ControlValueAccessor {
|
|
|
274
303
|
protected onInput(event: Event): void;
|
|
275
304
|
protected clear(): void;
|
|
276
305
|
static ɵfac: _angular_core.ɵɵFactoryDeclaration<SdsInput, never>;
|
|
277
|
-
static ɵcmp: _angular_core.ɵɵComponentDeclaration<SdsInput, "sds-input", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "hint": { "alias": "hint"; "required": false; "isSignal": true; }; "error": { "alias": "error"; "required": false; "isSignal": true; }; "type": { "alias": "type"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "appearance": { "alias": "appearance"; "required": false; "isSignal": true; }; "shape": { "alias": "shape"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "clearable": { "alias": "clearable"; "required": false; "isSignal": true; }; "autocomplete": { "alias": "autocomplete"; "required": false; "isSignal": true; }; "maxLength": { "alias": "maxLength"; "required": false; "isSignal": true; }; "clearLabel": { "alias": "clearLabel"; "required": false; "isSignal": true; }; "leadingIcon": { "alias": "leadingIcon"; "required": false; "isSignal": true; }; "trailingIcon": { "alias": "trailingIcon"; "required": false; "isSignal": true; }; "trailingAction": { "alias": "trailingAction"; "required": false; "isSignal": true; }; "trailingActionLabel": { "alias": "trailingActionLabel"; "required": false; "isSignal": true; }; "trailingActionPressed": { "alias": "trailingActionPressed"; "required": false; "isSignal": true; }; }, { "trailingActionClick": "trailingActionClick"; }, never, never, true, never>;
|
|
306
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<SdsInput, "sds-input", never, { "inputId": { "alias": "inputId"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "hint": { "alias": "hint"; "required": false; "isSignal": true; }; "error": { "alias": "error"; "required": false; "isSignal": true; }; "invalid": { "alias": "invalid"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "type": { "alias": "type"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "appearance": { "alias": "appearance"; "required": false; "isSignal": true; }; "shape": { "alias": "shape"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "clearable": { "alias": "clearable"; "required": false; "isSignal": true; }; "autocomplete": { "alias": "autocomplete"; "required": false; "isSignal": true; }; "maxLength": { "alias": "maxLength"; "required": false; "isSignal": true; }; "clearLabel": { "alias": "clearLabel"; "required": false; "isSignal": true; }; "leadingIcon": { "alias": "leadingIcon"; "required": false; "isSignal": true; }; "trailingIcon": { "alias": "trailingIcon"; "required": false; "isSignal": true; }; "trailingAction": { "alias": "trailingAction"; "required": false; "isSignal": true; }; "trailingActionLabel": { "alias": "trailingActionLabel"; "required": false; "isSignal": true; }; "trailingActionPressed": { "alias": "trailingActionPressed"; "required": false; "isSignal": true; }; }, { "trailingActionClick": "trailingActionClick"; }, never, never, true, never>;
|
|
278
307
|
}
|
|
279
308
|
|
|
280
309
|
type SdsInputNumberSize = 'sm' | 'md' | 'lg';
|
|
@@ -327,6 +356,11 @@ declare class SdsInputNumber implements ControlValueAccessor {
|
|
|
327
356
|
* host that renders the message itself, e.g. an editable table cell.
|
|
328
357
|
*/
|
|
329
358
|
readonly invalid: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
359
|
+
/**
|
|
360
|
+
* Mark the field required: an asterisk after the [label] (hidden from screen readers) and
|
|
361
|
+
* `aria-required` on the field. It does not validate — same contract as sds-input's [required].
|
|
362
|
+
*/
|
|
363
|
+
readonly required: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
330
364
|
/** Extra id(s) for the field's `aria-describedby`, added to its own hint/error message id. */
|
|
331
365
|
readonly ariaDescribedby: _angular_core.InputSignal<string>;
|
|
332
366
|
readonly size: _angular_core.InputSignal<SdsInputNumberSize>;
|
|
@@ -356,9 +390,9 @@ declare class SdsInputNumber implements ControlValueAccessor {
|
|
|
356
390
|
readonly showButtons: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
357
391
|
readonly buttonLayout: _angular_core.InputSignal<SdsInputNumberButtonLayout>;
|
|
358
392
|
/** Override the increment button icon (defaults: chevron-up when stacked, plus otherwise). */
|
|
359
|
-
readonly incrementIcon: _angular_core.InputSignal<"
|
|
393
|
+
readonly incrementIcon: _angular_core.InputSignal<"filter" | "copy" | "menu" | "search" | "table" | "image" | "chart-column" | "clipboard-list" | "credit-card" | "external-link" | "languages" | "megaphone" | "monitor" | "store" | "user-round" | "home" | "user-plus" | "user-check" | "hand" | "users" | "bike" | "building-2" | "package" | "package-plus" | "package-open" | "rotate-ccw" | "bar-chart-3" | "log-out" | "panel-left-close" | "panel-left-open" | "panel-left" | "calendar" | "chevron-right" | "chevron-left" | "chevron-down" | "chevron-up" | "plus" | "minus" | "chevrons-left" | "chevrons-right" | "x" | "check" | "alert-circle" | "info" | "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" | "chevrons-up" | "chevrons-down" | "star" | "message-square" | "qr-code" | "eye" | "eye-off" | "user" | "check-circle" | "arrows-clockwise" | "file-text" | "hash" | "map-pin" | "inbox" | "arrow-right" | "refresh-cw" | "loader-circle" | "bug" | "scroll-text" | "moon" | "sun" | "search-x" | "command" | "sparkles" | "triangle-alert" | "octagon-x" | "ban" | "ellipsis" | "ellipsis-vertical" | "grip-vertical" | "upload" | "image-off" | "utensils" | "zoom-in" | "zoom-out" | "trash-2" | "clock" | "pencil" | "circle-help" | "stock" | "allergen-cereals-gluten" | "allergen-crustaceans" | "allergen-eggs" | "allergen-fish" | "allergen-peanuts" | "allergen-soybeans" | "allergen-milk" | "allergen-nuts" | "allergen-celery" | "allergen-mustard" | "allergen-sesame" | "allergen-sulphites" | "allergen-lupin" | "allergen-molluscs" | null>;
|
|
360
394
|
/** Override the decrement button icon (defaults: chevron-down when stacked, minus otherwise). */
|
|
361
|
-
readonly decrementIcon: _angular_core.InputSignal<"
|
|
395
|
+
readonly decrementIcon: _angular_core.InputSignal<"filter" | "copy" | "menu" | "search" | "table" | "image" | "chart-column" | "clipboard-list" | "credit-card" | "external-link" | "languages" | "megaphone" | "monitor" | "store" | "user-round" | "home" | "user-plus" | "user-check" | "hand" | "users" | "bike" | "building-2" | "package" | "package-plus" | "package-open" | "rotate-ccw" | "bar-chart-3" | "log-out" | "panel-left-close" | "panel-left-open" | "panel-left" | "calendar" | "chevron-right" | "chevron-left" | "chevron-down" | "chevron-up" | "plus" | "minus" | "chevrons-left" | "chevrons-right" | "x" | "check" | "alert-circle" | "info" | "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" | "chevrons-up" | "chevrons-down" | "star" | "message-square" | "qr-code" | "eye" | "eye-off" | "user" | "check-circle" | "arrows-clockwise" | "file-text" | "hash" | "map-pin" | "inbox" | "arrow-right" | "refresh-cw" | "loader-circle" | "bug" | "scroll-text" | "moon" | "sun" | "search-x" | "command" | "sparkles" | "triangle-alert" | "octagon-x" | "ban" | "ellipsis" | "ellipsis-vertical" | "grip-vertical" | "upload" | "image-off" | "utensils" | "zoom-in" | "zoom-out" | "trash-2" | "clock" | "pencil" | "circle-help" | "stock" | "allergen-cereals-gluten" | "allergen-crustaceans" | "allergen-eggs" | "allergen-fish" | "allergen-peanuts" | "allergen-soybeans" | "allergen-milk" | "allergen-nuts" | "allergen-celery" | "allergen-mustard" | "allergen-sesame" | "allergen-sulphites" | "allergen-lupin" | "allergen-molluscs" | null>;
|
|
362
396
|
/** Allow an empty (null) value. When false, blurring an empty field falls back to {@link min} or 0. */
|
|
363
397
|
readonly allowEmpty: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
364
398
|
readonly clearable: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
@@ -375,8 +409,8 @@ declare class SdsInputNumber implements ControlValueAccessor {
|
|
|
375
409
|
protected readonly isDisabled: _angular_core.Signal<boolean>;
|
|
376
410
|
protected readonly describedBy: _angular_core.Signal<string | null>;
|
|
377
411
|
protected readonly clearVisible: _angular_core.Signal<boolean>;
|
|
378
|
-
protected readonly incrementIconName: _angular_core.Signal<"
|
|
379
|
-
protected readonly decrementIconName: _angular_core.Signal<"
|
|
412
|
+
protected readonly incrementIconName: _angular_core.Signal<"filter" | "copy" | "menu" | "search" | "table" | "image" | "chart-column" | "clipboard-list" | "credit-card" | "external-link" | "languages" | "megaphone" | "monitor" | "store" | "user-round" | "home" | "user-plus" | "user-check" | "hand" | "users" | "bike" | "building-2" | "package" | "package-plus" | "package-open" | "rotate-ccw" | "bar-chart-3" | "log-out" | "panel-left-close" | "panel-left-open" | "panel-left" | "calendar" | "chevron-right" | "chevron-left" | "chevron-down" | "chevron-up" | "plus" | "minus" | "chevrons-left" | "chevrons-right" | "x" | "check" | "alert-circle" | "info" | "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" | "chevrons-up" | "chevrons-down" | "star" | "message-square" | "qr-code" | "eye" | "eye-off" | "user" | "check-circle" | "arrows-clockwise" | "file-text" | "hash" | "map-pin" | "inbox" | "arrow-right" | "refresh-cw" | "loader-circle" | "bug" | "scroll-text" | "moon" | "sun" | "search-x" | "command" | "sparkles" | "triangle-alert" | "octagon-x" | "ban" | "ellipsis" | "ellipsis-vertical" | "grip-vertical" | "upload" | "image-off" | "utensils" | "zoom-in" | "zoom-out" | "trash-2" | "clock" | "pencil" | "circle-help" | "stock" | "allergen-cereals-gluten" | "allergen-crustaceans" | "allergen-eggs" | "allergen-fish" | "allergen-peanuts" | "allergen-soybeans" | "allergen-milk" | "allergen-nuts" | "allergen-celery" | "allergen-mustard" | "allergen-sesame" | "allergen-sulphites" | "allergen-lupin" | "allergen-molluscs">;
|
|
413
|
+
protected readonly decrementIconName: _angular_core.Signal<"filter" | "copy" | "menu" | "search" | "table" | "image" | "chart-column" | "clipboard-list" | "credit-card" | "external-link" | "languages" | "megaphone" | "monitor" | "store" | "user-round" | "home" | "user-plus" | "user-check" | "hand" | "users" | "bike" | "building-2" | "package" | "package-plus" | "package-open" | "rotate-ccw" | "bar-chart-3" | "log-out" | "panel-left-close" | "panel-left-open" | "panel-left" | "calendar" | "chevron-right" | "chevron-left" | "chevron-down" | "chevron-up" | "plus" | "minus" | "chevrons-left" | "chevrons-right" | "x" | "check" | "alert-circle" | "info" | "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" | "chevrons-up" | "chevrons-down" | "star" | "message-square" | "qr-code" | "eye" | "eye-off" | "user" | "check-circle" | "arrows-clockwise" | "file-text" | "hash" | "map-pin" | "inbox" | "arrow-right" | "refresh-cw" | "loader-circle" | "bug" | "scroll-text" | "moon" | "sun" | "search-x" | "command" | "sparkles" | "triangle-alert" | "octagon-x" | "ban" | "ellipsis" | "ellipsis-vertical" | "grip-vertical" | "upload" | "image-off" | "utensils" | "zoom-in" | "zoom-out" | "trash-2" | "clock" | "pencil" | "circle-help" | "stock" | "allergen-cereals-gluten" | "allergen-crustaceans" | "allergen-eggs" | "allergen-fish" | "allergen-peanuts" | "allergen-soybeans" | "allergen-milk" | "allergen-nuts" | "allergen-celery" | "allergen-mustard" | "allergen-sesame" | "allergen-sulphites" | "allergen-lupin" | "allergen-molluscs">;
|
|
380
414
|
protected readonly canIncrement: _angular_core.Signal<boolean>;
|
|
381
415
|
protected readonly canDecrement: _angular_core.Signal<boolean>;
|
|
382
416
|
/** Locale grouping/decimal separators, derived from Intl so parsing matches formatting. */
|
|
@@ -446,7 +480,7 @@ declare class SdsInputNumber implements ControlValueAccessor {
|
|
|
446
480
|
registerOnTouched(fn: () => void): void;
|
|
447
481
|
setDisabledState(isDisabled: boolean): void;
|
|
448
482
|
static ɵfac: _angular_core.ɵɵFactoryDeclaration<SdsInputNumber, never>;
|
|
449
|
-
static ɵcmp: _angular_core.ɵɵComponentDeclaration<SdsInputNumber, "sds-input-number", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "hint": { "alias": "hint"; "required": false; "isSignal": true; }; "error": { "alias": "error"; "required": false; "isSignal": true; }; "invalid": { "alias": "invalid"; "required": false; "isSignal": true; }; "ariaDescribedby": { "alias": "ariaDescribedby"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "appearance": { "alias": "appearance"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "mode": { "alias": "mode"; "required": false; "isSignal": true; }; "locale": { "alias": "locale"; "required": false; "isSignal": true; }; "currency": { "alias": "currency"; "required": false; "isSignal": true; }; "currencyDisplay": { "alias": "currencyDisplay"; "required": false; "isSignal": true; }; "useGrouping": { "alias": "useGrouping"; "required": false; "isSignal": true; }; "minFractionDigits": { "alias": "minFractionDigits"; "required": false; "isSignal": true; }; "maxFractionDigits": { "alias": "maxFractionDigits"; "required": false; "isSignal": true; }; "prefix": { "alias": "prefix"; "required": false; "isSignal": true; }; "suffix": { "alias": "suffix"; "required": false; "isSignal": true; }; "min": { "alias": "min"; "required": false; "isSignal": true; }; "max": { "alias": "max"; "required": false; "isSignal": true; }; "step": { "alias": "step"; "required": false; "isSignal": true; }; "showButtons": { "alias": "showButtons"; "required": false; "isSignal": true; }; "buttonLayout": { "alias": "buttonLayout"; "required": false; "isSignal": true; }; "incrementIcon": { "alias": "incrementIcon"; "required": false; "isSignal": true; }; "decrementIcon": { "alias": "decrementIcon"; "required": false; "isSignal": true; }; "allowEmpty": { "alias": "allowEmpty"; "required": false; "isSignal": true; }; "clearable": { "alias": "clearable"; "required": false; "isSignal": true; }; "clearLabel": { "alias": "clearLabel"; "required": false; "isSignal": true; }; "incrementLabel": { "alias": "incrementLabel"; "required": false; "isSignal": true; }; "decrementLabel": { "alias": "decrementLabel"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
|
|
483
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<SdsInputNumber, "sds-input-number", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "hint": { "alias": "hint"; "required": false; "isSignal": true; }; "error": { "alias": "error"; "required": false; "isSignal": true; }; "invalid": { "alias": "invalid"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "ariaDescribedby": { "alias": "ariaDescribedby"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "appearance": { "alias": "appearance"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "mode": { "alias": "mode"; "required": false; "isSignal": true; }; "locale": { "alias": "locale"; "required": false; "isSignal": true; }; "currency": { "alias": "currency"; "required": false; "isSignal": true; }; "currencyDisplay": { "alias": "currencyDisplay"; "required": false; "isSignal": true; }; "useGrouping": { "alias": "useGrouping"; "required": false; "isSignal": true; }; "minFractionDigits": { "alias": "minFractionDigits"; "required": false; "isSignal": true; }; "maxFractionDigits": { "alias": "maxFractionDigits"; "required": false; "isSignal": true; }; "prefix": { "alias": "prefix"; "required": false; "isSignal": true; }; "suffix": { "alias": "suffix"; "required": false; "isSignal": true; }; "min": { "alias": "min"; "required": false; "isSignal": true; }; "max": { "alias": "max"; "required": false; "isSignal": true; }; "step": { "alias": "step"; "required": false; "isSignal": true; }; "showButtons": { "alias": "showButtons"; "required": false; "isSignal": true; }; "buttonLayout": { "alias": "buttonLayout"; "required": false; "isSignal": true; }; "incrementIcon": { "alias": "incrementIcon"; "required": false; "isSignal": true; }; "decrementIcon": { "alias": "decrementIcon"; "required": false; "isSignal": true; }; "allowEmpty": { "alias": "allowEmpty"; "required": false; "isSignal": true; }; "clearable": { "alias": "clearable"; "required": false; "isSignal": true; }; "clearLabel": { "alias": "clearLabel"; "required": false; "isSignal": true; }; "incrementLabel": { "alias": "incrementLabel"; "required": false; "isSignal": true; }; "decrementLabel": { "alias": "decrementLabel"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
|
|
450
484
|
}
|
|
451
485
|
|
|
452
486
|
type SdsTimeInputSize = 'sm' | 'md' | 'lg';
|
|
@@ -700,6 +734,7 @@ declare class SdsTextarea implements ControlValueAccessor {
|
|
|
700
734
|
readonly appearance: _angular_core.InputSignal<SdsTextareaAppearance>;
|
|
701
735
|
readonly disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
702
736
|
readonly readonly: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
737
|
+
/** Asterisk after the [label] (hidden from screen readers) + `aria-required`. It does not validate. */
|
|
703
738
|
readonly required: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
704
739
|
/** Minimum visible rows. */
|
|
705
740
|
readonly rows: _angular_core.InputSignalWithTransform<number, unknown>;
|
|
@@ -770,9 +805,9 @@ declare class SdsToggleSwitch implements ControlValueAccessor {
|
|
|
770
805
|
/** Value emitted/stored when the switch is off. */
|
|
771
806
|
readonly falseValue: _angular_core.InputSignal<unknown>;
|
|
772
807
|
/** Icon shown on the knob when checked. */
|
|
773
|
-
readonly onIcon: _angular_core.InputSignal<"
|
|
808
|
+
readonly onIcon: _angular_core.InputSignal<"filter" | "copy" | "menu" | "search" | "table" | "image" | "chart-column" | "clipboard-list" | "credit-card" | "external-link" | "languages" | "megaphone" | "monitor" | "store" | "user-round" | "home" | "user-plus" | "user-check" | "hand" | "users" | "bike" | "building-2" | "package" | "package-plus" | "package-open" | "rotate-ccw" | "bar-chart-3" | "log-out" | "panel-left-close" | "panel-left-open" | "panel-left" | "calendar" | "chevron-right" | "chevron-left" | "chevron-down" | "chevron-up" | "plus" | "minus" | "chevrons-left" | "chevrons-right" | "x" | "check" | "alert-circle" | "info" | "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" | "chevrons-up" | "chevrons-down" | "star" | "message-square" | "qr-code" | "eye" | "eye-off" | "user" | "check-circle" | "arrows-clockwise" | "file-text" | "hash" | "map-pin" | "inbox" | "arrow-right" | "refresh-cw" | "loader-circle" | "bug" | "scroll-text" | "moon" | "sun" | "search-x" | "command" | "sparkles" | "triangle-alert" | "octagon-x" | "ban" | "ellipsis" | "ellipsis-vertical" | "grip-vertical" | "upload" | "image-off" | "utensils" | "zoom-in" | "zoom-out" | "trash-2" | "clock" | "pencil" | "circle-help" | "stock" | "allergen-cereals-gluten" | "allergen-crustaceans" | "allergen-eggs" | "allergen-fish" | "allergen-peanuts" | "allergen-soybeans" | "allergen-milk" | "allergen-nuts" | "allergen-celery" | "allergen-mustard" | "allergen-sesame" | "allergen-sulphites" | "allergen-lupin" | "allergen-molluscs" | null>;
|
|
774
809
|
/** Icon shown on the knob when unchecked. */
|
|
775
|
-
readonly offIcon: _angular_core.InputSignal<"
|
|
810
|
+
readonly offIcon: _angular_core.InputSignal<"filter" | "copy" | "menu" | "search" | "table" | "image" | "chart-column" | "clipboard-list" | "credit-card" | "external-link" | "languages" | "megaphone" | "monitor" | "store" | "user-round" | "home" | "user-plus" | "user-check" | "hand" | "users" | "bike" | "building-2" | "package" | "package-plus" | "package-open" | "rotate-ccw" | "bar-chart-3" | "log-out" | "panel-left-close" | "panel-left-open" | "panel-left" | "calendar" | "chevron-right" | "chevron-left" | "chevron-down" | "chevron-up" | "plus" | "minus" | "chevrons-left" | "chevrons-right" | "x" | "check" | "alert-circle" | "info" | "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" | "chevrons-up" | "chevrons-down" | "star" | "message-square" | "qr-code" | "eye" | "eye-off" | "user" | "check-circle" | "arrows-clockwise" | "file-text" | "hash" | "map-pin" | "inbox" | "arrow-right" | "refresh-cw" | "loader-circle" | "bug" | "scroll-text" | "moon" | "sun" | "search-x" | "command" | "sparkles" | "triangle-alert" | "octagon-x" | "ban" | "ellipsis" | "ellipsis-vertical" | "grip-vertical" | "upload" | "image-off" | "utensils" | "zoom-in" | "zoom-out" | "trash-2" | "clock" | "pencil" | "circle-help" | "stock" | "allergen-cereals-gluten" | "allergen-crustaceans" | "allergen-eggs" | "allergen-fish" | "allergen-peanuts" | "allergen-soybeans" | "allergen-milk" | "allergen-nuts" | "allergen-celery" | "allergen-mustard" | "allergen-sesame" | "allergen-sulphites" | "allergen-lupin" | "allergen-molluscs" | null>;
|
|
776
811
|
readonly hint: _angular_core.InputSignal<string>;
|
|
777
812
|
readonly error: _angular_core.InputSignal<string>;
|
|
778
813
|
/**
|
|
@@ -788,11 +823,14 @@ declare class SdsToggleSwitch implements ControlValueAccessor {
|
|
|
788
823
|
protected readonly isDisabled: _angular_core.Signal<boolean>;
|
|
789
824
|
protected readonly sizing: _angular_core.Signal<ToggleSizing>;
|
|
790
825
|
protected readonly describedBy: _angular_core.Signal<string | null>;
|
|
826
|
+
/** The "on" icon takes the track's colour, so it reads as cut out of the knob. */
|
|
827
|
+
protected readonly onIconClass = "text-brand-600 dark:text-[color:var(--sds-dark-primary,var(--color-ink))]";
|
|
791
828
|
/**
|
|
792
829
|
* On/off must read at a glance in both modes. In light mode the brand track against a pale grey one does
|
|
793
830
|
* it. In dark mode a monochrome brand's 600 step is a mid-dark grey, as dim as the off track, so there
|
|
794
831
|
* "on" flips to a light track with a dark knob and "off" keeps a dim track with a muted knob. `ink` (not
|
|
795
|
-
* black) tints the off track so it stays visible on dark surfaces too.
|
|
832
|
+
* black) tints the off track so it stays visible on dark surfaces too. A coloured brand preset keeps
|
|
833
|
+
* its own "on" track in dark via --sds-dark-primary / --sds-dark-on-primary (see theme/dark-fills.ts).
|
|
796
834
|
*/
|
|
797
835
|
protected readonly trackClasses: _angular_core.Signal<string>;
|
|
798
836
|
protected readonly knobClasses: _angular_core.Signal<string>;
|
|
@@ -841,7 +879,7 @@ declare class SdsCheckbox implements ControlValueAccessor {
|
|
|
841
879
|
private readonly cvaDisabled;
|
|
842
880
|
protected readonly isDisabled: _angular_core.Signal<boolean>;
|
|
843
881
|
protected readonly iconSize: _angular_core.Signal<11 | 13>;
|
|
844
|
-
protected readonly stateClasses: _angular_core.Signal<"cursor-not-allowed opacity-60"
|
|
882
|
+
protected readonly stateClasses: _angular_core.Signal<"cursor-pointer" | "cursor-not-allowed opacity-60">;
|
|
845
883
|
protected readonly boxClasses: _angular_core.Signal<string>;
|
|
846
884
|
private onChange;
|
|
847
885
|
protected onTouched: () => void;
|
|
@@ -895,7 +933,7 @@ declare class SdsRadio implements ControlValueAccessor {
|
|
|
895
933
|
private readonly cvaDisabled;
|
|
896
934
|
protected readonly isDisabled: _angular_core.Signal<boolean>;
|
|
897
935
|
protected readonly isChecked: _angular_core.Signal<boolean>;
|
|
898
|
-
protected readonly stateClasses: _angular_core.Signal<"cursor-not-allowed opacity-60"
|
|
936
|
+
protected readonly stateClasses: _angular_core.Signal<"cursor-pointer" | "cursor-not-allowed opacity-60">;
|
|
899
937
|
protected readonly circleClasses: _angular_core.Signal<string>;
|
|
900
938
|
protected readonly dotClasses: _angular_core.Signal<"h-1.5 w-1.5" | "h-2 w-2">;
|
|
901
939
|
constructor();
|
|
@@ -948,7 +986,7 @@ declare class SdsAvatar {
|
|
|
948
986
|
* Icon shown instead of initials when there is no usable image (e.g. `utensils` or `image` for a dish).
|
|
949
987
|
* Null (default) keeps the initials.
|
|
950
988
|
*/
|
|
951
|
-
readonly fallbackIcon: _angular_core.InputSignal<"
|
|
989
|
+
readonly fallbackIcon: _angular_core.InputSignal<"filter" | "copy" | "menu" | "search" | "table" | "image" | "chart-column" | "clipboard-list" | "credit-card" | "external-link" | "languages" | "megaphone" | "monitor" | "store" | "user-round" | "home" | "user-plus" | "user-check" | "hand" | "users" | "bike" | "building-2" | "package" | "package-plus" | "package-open" | "rotate-ccw" | "bar-chart-3" | "log-out" | "panel-left-close" | "panel-left-open" | "panel-left" | "calendar" | "chevron-right" | "chevron-left" | "chevron-down" | "chevron-up" | "plus" | "minus" | "chevrons-left" | "chevrons-right" | "x" | "check" | "alert-circle" | "info" | "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" | "chevrons-up" | "chevrons-down" | "star" | "message-square" | "qr-code" | "eye" | "eye-off" | "user" | "check-circle" | "arrows-clockwise" | "file-text" | "hash" | "map-pin" | "inbox" | "arrow-right" | "refresh-cw" | "loader-circle" | "bug" | "scroll-text" | "moon" | "sun" | "search-x" | "command" | "sparkles" | "triangle-alert" | "octagon-x" | "ban" | "ellipsis" | "ellipsis-vertical" | "grip-vertical" | "upload" | "image-off" | "utensils" | "zoom-in" | "zoom-out" | "trash-2" | "clock" | "pencil" | "circle-help" | "stock" | "allergen-cereals-gluten" | "allergen-crustaceans" | "allergen-eggs" | "allergen-fish" | "allergen-peanuts" | "allergen-soybeans" | "allergen-milk" | "allergen-nuts" | "allergen-celery" | "allergen-mustard" | "allergen-sesame" | "allergen-sulphites" | "allergen-lupin" | "allergen-molluscs" | null>;
|
|
952
990
|
/** Classes of the placeholder tile behind {@link fallbackIcon}: background and icon colour. */
|
|
953
991
|
readonly placeholderClass: _angular_core.InputSignal<string>;
|
|
954
992
|
/**
|
|
@@ -1035,7 +1073,7 @@ declare class SdsAllergenIcon {
|
|
|
1035
1073
|
readonly size: _angular_core.InputSignal<string | number>;
|
|
1036
1074
|
/** Stroke width of the line icon. */
|
|
1037
1075
|
readonly strokeWidth: _angular_core.InputSignal<number>;
|
|
1038
|
-
protected readonly iconName: _angular_core.Signal<"
|
|
1076
|
+
protected readonly iconName: _angular_core.Signal<"filter" | "copy" | "menu" | "search" | "table" | "image" | "chart-column" | "clipboard-list" | "credit-card" | "external-link" | "languages" | "megaphone" | "monitor" | "store" | "user-round" | "home" | "user-plus" | "user-check" | "hand" | "users" | "bike" | "building-2" | "package" | "package-plus" | "package-open" | "rotate-ccw" | "bar-chart-3" | "log-out" | "panel-left-close" | "panel-left-open" | "panel-left" | "calendar" | "chevron-right" | "chevron-left" | "chevron-down" | "chevron-up" | "plus" | "minus" | "chevrons-left" | "chevrons-right" | "x" | "check" | "alert-circle" | "info" | "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" | "chevrons-up" | "chevrons-down" | "star" | "message-square" | "qr-code" | "eye" | "eye-off" | "user" | "check-circle" | "arrows-clockwise" | "file-text" | "hash" | "map-pin" | "inbox" | "arrow-right" | "refresh-cw" | "loader-circle" | "bug" | "scroll-text" | "moon" | "sun" | "search-x" | "command" | "sparkles" | "triangle-alert" | "octagon-x" | "ban" | "ellipsis" | "ellipsis-vertical" | "grip-vertical" | "upload" | "image-off" | "utensils" | "zoom-in" | "zoom-out" | "trash-2" | "clock" | "pencil" | "circle-help" | "stock" | "allergen-cereals-gluten" | "allergen-crustaceans" | "allergen-eggs" | "allergen-fish" | "allergen-peanuts" | "allergen-soybeans" | "allergen-milk" | "allergen-nuts" | "allergen-celery" | "allergen-mustard" | "allergen-sesame" | "allergen-sulphites" | "allergen-lupin" | "allergen-molluscs" | null>;
|
|
1039
1077
|
constructor();
|
|
1040
1078
|
static ɵfac: _angular_core.ɵɵFactoryDeclaration<SdsAllergenIcon, never>;
|
|
1041
1079
|
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>;
|
|
@@ -1069,7 +1107,7 @@ declare class SdsTriStateChip {
|
|
|
1069
1107
|
/** Visible name (e.g. the allergen). Required — the chip has no other accessible name. */
|
|
1070
1108
|
readonly label: _angular_core.InputSignal<string>;
|
|
1071
1109
|
/** Optional leading registry icon, e.g. an `allergen-*` pictogram. */
|
|
1072
|
-
readonly icon: _angular_core.InputSignal<"
|
|
1110
|
+
readonly icon: _angular_core.InputSignal<"filter" | "copy" | "menu" | "search" | "table" | "image" | "chart-column" | "clipboard-list" | "credit-card" | "external-link" | "languages" | "megaphone" | "monitor" | "store" | "user-round" | "home" | "user-plus" | "user-check" | "hand" | "users" | "bike" | "building-2" | "package" | "package-plus" | "package-open" | "rotate-ccw" | "bar-chart-3" | "log-out" | "panel-left-close" | "panel-left-open" | "panel-left" | "calendar" | "chevron-right" | "chevron-left" | "chevron-down" | "chevron-up" | "plus" | "minus" | "chevrons-left" | "chevrons-right" | "x" | "check" | "alert-circle" | "info" | "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" | "chevrons-up" | "chevrons-down" | "star" | "message-square" | "qr-code" | "eye" | "eye-off" | "user" | "check-circle" | "arrows-clockwise" | "file-text" | "hash" | "map-pin" | "inbox" | "arrow-right" | "refresh-cw" | "loader-circle" | "bug" | "scroll-text" | "moon" | "sun" | "search-x" | "command" | "sparkles" | "triangle-alert" | "octagon-x" | "ban" | "ellipsis" | "ellipsis-vertical" | "grip-vertical" | "upload" | "image-off" | "utensils" | "zoom-in" | "zoom-out" | "trash-2" | "clock" | "pencil" | "circle-help" | "stock" | "allergen-cereals-gluten" | "allergen-crustaceans" | "allergen-eggs" | "allergen-fish" | "allergen-peanuts" | "allergen-soybeans" | "allergen-milk" | "allergen-nuts" | "allergen-celery" | "allergen-mustard" | "allergen-sesame" | "allergen-sulphites" | "allergen-lupin" | "allergen-molluscs" | null>;
|
|
1073
1111
|
readonly size: _angular_core.InputSignal<SdsTriStateChipSize>;
|
|
1074
1112
|
readonly disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
1075
1113
|
/** Show the state as a small visible caption under the label. */
|
|
@@ -1089,7 +1127,7 @@ declare class SdsTriStateChip {
|
|
|
1089
1127
|
protected readonly announcement: _angular_core.WritableSignal<string>;
|
|
1090
1128
|
protected readonly stateText: _angular_core.Signal<string>;
|
|
1091
1129
|
protected readonly chipClass: _angular_core.Signal<string>;
|
|
1092
|
-
protected readonly captionClass: _angular_core.Signal<"text-white/85 dark:text-surface
|
|
1130
|
+
protected readonly captionClass: _angular_core.Signal<"text-ink-faint" | "text-white/85 dark:text-[color:color-mix(in_oklab,var(--sds-dark-on-primary,var(--color-surface))_85%,transparent)]" | "text-ink-soft">;
|
|
1093
1131
|
protected onClick(event: MouseEvent): void;
|
|
1094
1132
|
protected onKeydown(event: KeyboardEvent): void;
|
|
1095
1133
|
private step;
|
|
@@ -1186,7 +1224,7 @@ declare class SdsChip {
|
|
|
1186
1224
|
readonly label: _angular_core.InputSignal<string>;
|
|
1187
1225
|
/** On/off. Two-way: `[(selected)]`. */
|
|
1188
1226
|
readonly selected: _angular_core.ModelSignal<boolean>;
|
|
1189
|
-
readonly icon: _angular_core.InputSignal<"
|
|
1227
|
+
readonly icon: _angular_core.InputSignal<"filter" | "copy" | "menu" | "search" | "table" | "image" | "chart-column" | "clipboard-list" | "credit-card" | "external-link" | "languages" | "megaphone" | "monitor" | "store" | "user-round" | "home" | "user-plus" | "user-check" | "hand" | "users" | "bike" | "building-2" | "package" | "package-plus" | "package-open" | "rotate-ccw" | "bar-chart-3" | "log-out" | "panel-left-close" | "panel-left-open" | "panel-left" | "calendar" | "chevron-right" | "chevron-left" | "chevron-down" | "chevron-up" | "plus" | "minus" | "chevrons-left" | "chevrons-right" | "x" | "check" | "alert-circle" | "info" | "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" | "chevrons-up" | "chevrons-down" | "star" | "message-square" | "qr-code" | "eye" | "eye-off" | "user" | "check-circle" | "arrows-clockwise" | "file-text" | "hash" | "map-pin" | "inbox" | "arrow-right" | "refresh-cw" | "loader-circle" | "bug" | "scroll-text" | "moon" | "sun" | "search-x" | "command" | "sparkles" | "triangle-alert" | "octagon-x" | "ban" | "ellipsis" | "ellipsis-vertical" | "grip-vertical" | "upload" | "image-off" | "utensils" | "zoom-in" | "zoom-out" | "trash-2" | "clock" | "pencil" | "circle-help" | "stock" | "allergen-cereals-gluten" | "allergen-crustaceans" | "allergen-eggs" | "allergen-fish" | "allergen-peanuts" | "allergen-soybeans" | "allergen-milk" | "allergen-nuts" | "allergen-celery" | "allergen-mustard" | "allergen-sesame" | "allergen-sulphites" | "allergen-lupin" | "allergen-molluscs" | null>;
|
|
1190
1228
|
readonly count: _angular_core.InputSignal<number | null | undefined>;
|
|
1191
1229
|
readonly size: _angular_core.InputSignal<SdsChipSize>;
|
|
1192
1230
|
readonly disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
@@ -1422,6 +1460,8 @@ declare class SdsStatusTile {
|
|
|
1422
1460
|
protected readonly stateText: _angular_core.Signal<string>;
|
|
1423
1461
|
/** Diagonal hatch on sold-out tiles — a pattern cue on top of the colour. */
|
|
1424
1462
|
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>;
|
|
1463
|
+
/** The selected check: brand fill, inverted in dark unless the brand preset supplies a dark fill. */
|
|
1464
|
+
protected readonly checkBadgeClass: string;
|
|
1425
1465
|
protected readonly tileClass: _angular_core.Signal<string>;
|
|
1426
1466
|
static ɵfac: _angular_core.ɵɵFactoryDeclaration<SdsStatusTile, never>;
|
|
1427
1467
|
static ɵcmp: _angular_core.ɵɵComponentDeclaration<SdsStatusTile, "sds-status-tile", never, { "title": { "alias": "title"; "required": true; "isSignal": true; }; "subtitle": { "alias": "subtitle"; "required": false; "isSignal": true; }; "image": { "alias": "image"; "required": false; "isSignal": true; }; "imageAlt": { "alias": "imageAlt"; "required": false; "isSignal": true; }; "state": { "alias": "state"; "required": false; "isSignal": true; }; "note": { "alias": "note"; "required": false; "isSignal": true; }; "selected": { "alias": "selected"; "required": false; "isSignal": true; }; "busy": { "alias": "busy"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "availableLabel": { "alias": "availableLabel"; "required": false; "isSignal": true; }; "soldOutLabel": { "alias": "soldOutLabel"; "required": false; "isSignal": true; }; "hiddenLabel": { "alias": "hiddenLabel"; "required": false; "isSignal": true; }; }, { "activate": "activate"; "imageError": "imageError"; }, never, never, true, never>;
|
|
@@ -1496,7 +1536,7 @@ declare class SdsMenu implements OnDestroy {
|
|
|
1496
1536
|
/** Accessible name of the built-in icon trigger (required when there is no [triggerText]). */
|
|
1497
1537
|
readonly triggerLabel: _angular_core.InputSignal<string>;
|
|
1498
1538
|
/** Icon of the built-in trigger. */
|
|
1499
|
-
readonly triggerIcon: _angular_core.InputSignal<"
|
|
1539
|
+
readonly triggerIcon: _angular_core.InputSignal<"filter" | "copy" | "menu" | "search" | "table" | "image" | "chart-column" | "clipboard-list" | "credit-card" | "external-link" | "languages" | "megaphone" | "monitor" | "store" | "user-round" | "home" | "user-plus" | "user-check" | "hand" | "users" | "bike" | "building-2" | "package" | "package-plus" | "package-open" | "rotate-ccw" | "bar-chart-3" | "log-out" | "panel-left-close" | "panel-left-open" | "panel-left" | "calendar" | "chevron-right" | "chevron-left" | "chevron-down" | "chevron-up" | "plus" | "minus" | "chevrons-left" | "chevrons-right" | "x" | "check" | "alert-circle" | "info" | "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" | "chevrons-up" | "chevrons-down" | "star" | "message-square" | "qr-code" | "eye" | "eye-off" | "user" | "check-circle" | "arrows-clockwise" | "file-text" | "hash" | "map-pin" | "inbox" | "arrow-right" | "refresh-cw" | "loader-circle" | "bug" | "scroll-text" | "moon" | "sun" | "search-x" | "command" | "sparkles" | "triangle-alert" | "octagon-x" | "ban" | "ellipsis" | "ellipsis-vertical" | "grip-vertical" | "upload" | "image-off" | "utensils" | "zoom-in" | "zoom-out" | "trash-2" | "clock" | "pencil" | "circle-help" | "stock" | "allergen-cereals-gluten" | "allergen-crustaceans" | "allergen-eggs" | "allergen-fish" | "allergen-peanuts" | "allergen-soybeans" | "allergen-milk" | "allergen-nuts" | "allergen-celery" | "allergen-mustard" | "allergen-sesame" | "allergen-sulphites" | "allergen-lupin" | "allergen-molluscs">;
|
|
1500
1540
|
/** Optional visible text on the built-in trigger (then it is its name). */
|
|
1501
1541
|
readonly triggerText: _angular_core.InputSignal<string>;
|
|
1502
1542
|
/** Accessible name of the menu itself; defaults to the trigger's name. */
|
|
@@ -1561,6 +1601,8 @@ type SdsBulkBarPosition = 'bottom' | 'top' | 'static';
|
|
|
1561
1601
|
* </sds-bulk-bar>
|
|
1562
1602
|
*/
|
|
1563
1603
|
declare class SdsBulkBar {
|
|
1604
|
+
/** The selection count: brand fill, inverted in dark unless the preset supplies a dark fill. */
|
|
1605
|
+
protected readonly countClass: string;
|
|
1564
1606
|
/** Number of selected things. The bar is hidden at 0. */
|
|
1565
1607
|
readonly count: _angular_core.InputSignalWithTransform<number, unknown>;
|
|
1566
1608
|
/** "{count} selected" — `{count}` is replaced. Pass a translated string. */
|
|
@@ -1787,6 +1829,9 @@ declare function sdsFileMatchesAccept(file: File, accept: string): boolean;
|
|
|
1787
1829
|
* affordance); clicking anywhere on the zone opens the picker too. All text is set through inputs with
|
|
1788
1830
|
* English defaults.
|
|
1789
1831
|
*
|
|
1832
|
+
* `[loading]` shows a spinner and disables the control while an upload runs; `[ariaLabel]` names the Browse
|
|
1833
|
+
* button when the visible text is shared by several rows ("Upload" beside each document).
|
|
1834
|
+
*
|
|
1790
1835
|
* `appearance="button"` drops the zone and renders only the Browse button (files can still be dropped
|
|
1791
1836
|
* on it) — for a "Replace photo" / "Upload logo" / "Add document" action next to a preview, with the
|
|
1792
1837
|
* same accept/size/count checks and error messages. `browse()` opens the picker from your own control.
|
|
@@ -1807,8 +1852,13 @@ declare class SdsFileDrop {
|
|
|
1807
1852
|
/** Most files accepted in one pick/drop. Null = no limit (1 when not [multiple]). */
|
|
1808
1853
|
readonly maxFiles: _angular_core.InputSignal<number | null>;
|
|
1809
1854
|
readonly disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
1855
|
+
/**
|
|
1856
|
+
* Work in progress (an upload running): a spinner replaces the icon, the control is disabled and marked
|
|
1857
|
+
* `aria-busy`. The host keeps showing its own result/error afterwards.
|
|
1858
|
+
*/
|
|
1859
|
+
readonly loading: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
1810
1860
|
/** Icon in the zone at rest. */
|
|
1811
|
-
readonly icon: _angular_core.InputSignal<"
|
|
1861
|
+
readonly icon: _angular_core.InputSignal<"image" | "file-text" | "upload">;
|
|
1812
1862
|
/** `zone` (default): the dashed drop zone with a Browse button. `button`: the Browse button alone. */
|
|
1813
1863
|
readonly appearance: _angular_core.InputSignal<SdsFileDropAppearance>;
|
|
1814
1864
|
/** `button` appearance: size of the button. */
|
|
@@ -1817,6 +1867,13 @@ declare class SdsFileDrop {
|
|
|
1817
1867
|
/** Shown while files are dragged over the zone. */
|
|
1818
1868
|
readonly dropLabel: _angular_core.InputSignal<string>;
|
|
1819
1869
|
readonly browseLabel: _angular_core.InputSignal<string>;
|
|
1870
|
+
/** Button text while [loading]. Empty keeps [browseLabel]. */
|
|
1871
|
+
readonly loadingLabel: _angular_core.InputSignal<string>;
|
|
1872
|
+
/**
|
|
1873
|
+
* Accessible name of the Browse button when its visible text is not enough — several upload buttons in
|
|
1874
|
+
* a list each need to say WHAT they upload ("Upload — VAT certificate"). Empty uses the visible text.
|
|
1875
|
+
*/
|
|
1876
|
+
readonly ariaLabel: _angular_core.InputSignal<string>;
|
|
1820
1877
|
/** Extra line under the label, e.g. "JPEG or PNG, up to 10 MB". */
|
|
1821
1878
|
readonly hint: _angular_core.InputSignal<string>;
|
|
1822
1879
|
/** Tokens: `{name}`. */
|
|
@@ -1832,8 +1889,10 @@ declare class SdsFileDrop {
|
|
|
1832
1889
|
protected readonly dragging: _angular_core.WritableSignal<boolean>;
|
|
1833
1890
|
protected readonly errors: _angular_core.WritableSignal<string[]>;
|
|
1834
1891
|
private dragDepth;
|
|
1892
|
+
protected readonly isDisabled: _angular_core.Signal<boolean>;
|
|
1893
|
+
protected readonly buttonText: _angular_core.Signal<string>;
|
|
1835
1894
|
protected readonly describedBy: _angular_core.Signal<string>;
|
|
1836
|
-
protected readonly zoneClass: _angular_core.Signal<"flex flex-col items-center justify-center gap-2 rounded-card border-2 border-dashed px-6 py-8 text-center transition-colors cursor-not-allowed border-border bg-muted opacity-60" | "flex flex-col items-center justify-center gap-2 rounded-card border-2 border-dashed px-6 py-8 text-center transition-colors cursor-copy border-brand-500 bg-brand-50 dark:bg-muted" | "flex flex-col items-center justify-center gap-2 rounded-card border-2 border-dashed px-6 py-8 text-center transition-colors cursor-pointer border-border bg-muted/50 hover:border-ink-faint">;
|
|
1895
|
+
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-progress border-border bg-muted/50" | "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-[color:var(--sds-dark-tint,var(--color-muted))]" | "flex flex-col items-center justify-center gap-2 rounded-card border-2 border-dashed px-6 py-8 text-center transition-colors cursor-pointer border-border bg-muted/50 hover:border-ink-faint">;
|
|
1837
1896
|
protected readonly buttonClass: _angular_core.Signal<string>;
|
|
1838
1897
|
/** Open the native file picker. */
|
|
1839
1898
|
browse(event?: Event): void;
|
|
@@ -1849,7 +1908,7 @@ declare class SdsFileDrop {
|
|
|
1849
1908
|
/** Clear the error messages under the zone. */
|
|
1850
1909
|
clearErrors(): void;
|
|
1851
1910
|
static ɵfac: _angular_core.ɵɵFactoryDeclaration<SdsFileDrop, never>;
|
|
1852
|
-
static ɵcmp: _angular_core.ɵɵComponentDeclaration<SdsFileDrop, "sds-file-drop", never, { "accept": { "alias": "accept"; "required": false; "isSignal": true; }; "multiple": { "alias": "multiple"; "required": false; "isSignal": true; }; "maxSize": { "alias": "maxSize"; "required": false; "isSignal": true; }; "maxFiles": { "alias": "maxFiles"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "appearance": { "alias": "appearance"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "dropLabel": { "alias": "dropLabel"; "required": false; "isSignal": true; }; "browseLabel": { "alias": "browseLabel"; "required": false; "isSignal": true; }; "hint": { "alias": "hint"; "required": false; "isSignal": true; }; "wrongTypeMessage": { "alias": "wrongTypeMessage"; "required": false; "isSignal": true; }; "tooLargeMessage": { "alias": "tooLargeMessage"; "required": false; "isSignal": true; }; "tooManyMessage": { "alias": "tooManyMessage"; "required": false; "isSignal": true; }; }, { "files": "files"; "rejected": "rejected"; }, never, never, true, never>;
|
|
1911
|
+
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; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "appearance": { "alias": "appearance"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "dropLabel": { "alias": "dropLabel"; "required": false; "isSignal": true; }; "browseLabel": { "alias": "browseLabel"; "required": false; "isSignal": true; }; "loadingLabel": { "alias": "loadingLabel"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "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>;
|
|
1853
1912
|
}
|
|
1854
1913
|
|
|
1855
1914
|
/** A crop rectangle in the SOURCE image's natural pixels. */
|
|
@@ -2057,7 +2116,7 @@ declare class SdsCalendar {
|
|
|
2057
2116
|
protected readonly navBtn = "inline-flex h-8 w-8 items-center justify-center rounded-control text-ink-soft hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-500";
|
|
2058
2117
|
protected readonly titleBtn = "rounded-control px-2 py-1 capitalize hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-500";
|
|
2059
2118
|
protected readonly actionBtn = "rounded-control px-2 py-1 text-xs font-medium text-brand-700 hover:bg-brand-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-500 disabled:cursor-not-allowed disabled:opacity-40";
|
|
2060
|
-
protected readonly doneBtn = "rounded-control bg-brand-600 px-3 py-1 text-xs font-semibold text-white hover:bg-brand-700 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-500";
|
|
2119
|
+
protected readonly doneBtn = "rounded-control bg-brand-600 px-3 py-1 text-xs font-semibold text-white hover:bg-brand-700 dark:hover:bg-[color:var(--sds-dark-primary-hover,var(--color-brand-700))] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-500";
|
|
2061
2120
|
protected readonly timeInput = "w-8 bg-transparent py-1 text-center text-sm text-ink outline-none disabled:cursor-not-allowed disabled:opacity-40";
|
|
2062
2121
|
protected readonly stepBtn = "flex h-3.5 w-5 items-center justify-center text-ink-faint transition-colors hover:text-ink focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-30";
|
|
2063
2122
|
protected readonly monthLong: _angular_core.Signal<string>;
|
|
@@ -2409,6 +2468,8 @@ declare class SdsSelect implements ControlValueAccessor, OnDestroy {
|
|
|
2409
2468
|
protected readonly isDisabled: _angular_core.Signal<boolean>;
|
|
2410
2469
|
protected readonly filled: _angular_core.Signal<boolean>;
|
|
2411
2470
|
protected readonly onBrand: _angular_core.Signal<boolean>;
|
|
2471
|
+
/** The trigger's value / placeholder colour: on the dark `on-brand` surface it stays white in light mode too. */
|
|
2472
|
+
protected readonly valueTextClass: _angular_core.Signal<"text-white" | "text-white/60" | "text-ink" | "text-ink-faint">;
|
|
2412
2473
|
protected readonly normalizedOptions: _angular_core.Signal<NormOption$1[]>;
|
|
2413
2474
|
protected readonly filteredOptions: _angular_core.Signal<NormOption$1[]>;
|
|
2414
2475
|
protected readonly selectedOption: _angular_core.Signal<NormOption$1 | null>;
|
|
@@ -2542,6 +2603,14 @@ declare class SdsMultiSelect implements ControlValueAccessor, OnDestroy {
|
|
|
2542
2603
|
readonly filterLabel: _angular_core.InputSignal<string>;
|
|
2543
2604
|
/** Visible text of the "select all" row (see {@link showToggleAll}). */
|
|
2544
2605
|
readonly selectAllLabel: _angular_core.InputSignal<string>;
|
|
2606
|
+
/** The panel opened. */
|
|
2607
|
+
readonly opened: _angular_core.OutputEmitterRef<void>;
|
|
2608
|
+
/**
|
|
2609
|
+
* The panel closed (Escape, Tab, an outside click, a re-click on the field, a footer `close()`), with
|
|
2610
|
+
* the selection at that moment. For "apply on close": take the value here instead of on every
|
|
2611
|
+
* `ngModelChange`. Not emitted when the component is destroyed with the panel open.
|
|
2612
|
+
*/
|
|
2613
|
+
readonly closed: _angular_core.OutputEmitterRef<unknown[]>;
|
|
2545
2614
|
/** Optional projected `<ng-template sdsSelectOption>` — custom option-row rendering. */
|
|
2546
2615
|
protected readonly optionTpl: _angular_core.Signal<SdsSelectOption | undefined>;
|
|
2547
2616
|
/** Optional projected `<ng-template sdsSelectEmpty>` — custom no-results content. */
|
|
@@ -2619,7 +2688,7 @@ declare class SdsMultiSelect implements ControlValueAccessor, OnDestroy {
|
|
|
2619
2688
|
registerOnTouched(fn: () => void): void;
|
|
2620
2689
|
setDisabledState(isDisabled: boolean): void;
|
|
2621
2690
|
static ɵfac: _angular_core.ɵɵFactoryDeclaration<SdsMultiSelect, never>;
|
|
2622
|
-
static ɵcmp: _angular_core.ɵɵComponentDeclaration<SdsMultiSelect, "sds-multi-select", never, { "options": { "alias": "options"; "required": false; "isSignal": true; }; "optionLabel": { "alias": "optionLabel"; "required": false; "isSignal": true; }; "optionValue": { "alias": "optionValue"; "required": false; "isSignal": true; }; "optionDisabled": { "alias": "optionDisabled"; "required": false; "isSignal": true; }; "dataKey": { "alias": "dataKey"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "hint": { "alias": "hint"; "required": false; "isSignal": true; }; "error": { "alias": "error"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "display": { "alias": "display"; "required": false; "isSignal": true; }; "maxSelectedLabels": { "alias": "maxSelectedLabels"; "required": false; "isSignal": true; }; "selectedItemsLabel": { "alias": "selectedItemsLabel"; "required": false; "isSignal": true; }; "showToggleAll": { "alias": "showToggleAll"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "clearable": { "alias": "clearable"; "required": false; "isSignal": true; }; "filter": { "alias": "filter"; "required": false; "isSignal": true; }; "filterPlaceholder": { "alias": "filterPlaceholder"; "required": false; "isSignal": true; }; "emptyMessage": { "alias": "emptyMessage"; "required": false; "isSignal": true; }; "removeLabel": { "alias": "removeLabel"; "required": false; "isSignal": true; }; "clearLabel": { "alias": "clearLabel"; "required": false; "isSignal": true; }; "filterLabel": { "alias": "filterLabel"; "required": false; "isSignal": true; }; "selectAllLabel": { "alias": "selectAllLabel"; "required": false; "isSignal": true; }; }, {}, ["optionTpl", "emptyTpl", "footerTpl"], never, true, never>;
|
|
2691
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<SdsMultiSelect, "sds-multi-select", never, { "options": { "alias": "options"; "required": false; "isSignal": true; }; "optionLabel": { "alias": "optionLabel"; "required": false; "isSignal": true; }; "optionValue": { "alias": "optionValue"; "required": false; "isSignal": true; }; "optionDisabled": { "alias": "optionDisabled"; "required": false; "isSignal": true; }; "dataKey": { "alias": "dataKey"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "hint": { "alias": "hint"; "required": false; "isSignal": true; }; "error": { "alias": "error"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "display": { "alias": "display"; "required": false; "isSignal": true; }; "maxSelectedLabels": { "alias": "maxSelectedLabels"; "required": false; "isSignal": true; }; "selectedItemsLabel": { "alias": "selectedItemsLabel"; "required": false; "isSignal": true; }; "showToggleAll": { "alias": "showToggleAll"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "clearable": { "alias": "clearable"; "required": false; "isSignal": true; }; "filter": { "alias": "filter"; "required": false; "isSignal": true; }; "filterPlaceholder": { "alias": "filterPlaceholder"; "required": false; "isSignal": true; }; "emptyMessage": { "alias": "emptyMessage"; "required": false; "isSignal": true; }; "removeLabel": { "alias": "removeLabel"; "required": false; "isSignal": true; }; "clearLabel": { "alias": "clearLabel"; "required": false; "isSignal": true; }; "filterLabel": { "alias": "filterLabel"; "required": false; "isSignal": true; }; "selectAllLabel": { "alias": "selectAllLabel"; "required": false; "isSignal": true; }; }, { "opened": "opened"; "closed": "closed"; }, ["optionTpl", "emptyTpl", "footerTpl"], never, true, never>;
|
|
2623
2692
|
}
|
|
2624
2693
|
|
|
2625
2694
|
/**
|
|
@@ -3008,14 +3077,24 @@ declare class SdsTabs {
|
|
|
3008
3077
|
* Container (role="tablist") for the <sds-tab> headers. Renders the bottom rule
|
|
3009
3078
|
* and handles roving-focus keyboard navigation (Arrow keys, Home, End) with
|
|
3010
3079
|
* automatic activation.
|
|
3080
|
+
*
|
|
3081
|
+
* Name the tab set with [ariaLabel] (or [ariaLabelledby] pointing at a visible heading) when the page has
|
|
3082
|
+
* more than one, or when the tabs alone do not say what they switch.
|
|
3083
|
+
*
|
|
3084
|
+
* @example
|
|
3085
|
+
* <sds-tab-list [ariaLabel]="'Order status'">…</sds-tab-list>
|
|
3011
3086
|
*/
|
|
3012
3087
|
declare class SdsTabList {
|
|
3013
3088
|
private readonly host;
|
|
3014
3089
|
private readonly store;
|
|
3090
|
+
/** Accessible name of the tablist. */
|
|
3091
|
+
readonly ariaLabel: _angular_core.InputSignal<string>;
|
|
3092
|
+
/** Id of a visible element that names the tablist (takes precedence over [ariaLabel] for AT). */
|
|
3093
|
+
readonly ariaLabelledby: _angular_core.InputSignal<string>;
|
|
3015
3094
|
protected readonly listClass: _angular_core.Signal<"relative flex border-b border-border" | "relative flex border-b border-border overflow-x-auto">;
|
|
3016
3095
|
protected onKeydown(event: KeyboardEvent): void;
|
|
3017
3096
|
static ɵfac: _angular_core.ɵɵFactoryDeclaration<SdsTabList, never>;
|
|
3018
|
-
static ɵcmp: _angular_core.ɵɵComponentDeclaration<SdsTabList, "sds-tab-list", never, {}, {}, never, ["*"], true, never>;
|
|
3097
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<SdsTabList, "sds-tab-list", never, { "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "ariaLabelledby": { "alias": "ariaLabelledby"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
|
|
3019
3098
|
}
|
|
3020
3099
|
|
|
3021
3100
|
/**
|
|
@@ -4020,7 +4099,7 @@ declare class SdsNavGroup {
|
|
|
4020
4099
|
/** Turn the label into an expand/collapse control. */
|
|
4021
4100
|
readonly collapsible: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
4022
4101
|
/** Icon for a collapsible header, so it reads at the same weight as the items it sits among. */
|
|
4023
|
-
readonly icon: _angular_core.InputSignal<"
|
|
4102
|
+
readonly icon: _angular_core.InputSignal<"filter" | "copy" | "menu" | "search" | "table" | "image" | "chart-column" | "clipboard-list" | "credit-card" | "external-link" | "languages" | "megaphone" | "monitor" | "store" | "user-round" | "home" | "user-plus" | "user-check" | "hand" | "users" | "bike" | "building-2" | "package" | "package-plus" | "package-open" | "rotate-ccw" | "bar-chart-3" | "log-out" | "panel-left-close" | "panel-left-open" | "panel-left" | "calendar" | "chevron-right" | "chevron-left" | "chevron-down" | "chevron-up" | "plus" | "minus" | "chevrons-left" | "chevrons-right" | "x" | "check" | "alert-circle" | "info" | "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" | "chevrons-up" | "chevrons-down" | "star" | "message-square" | "qr-code" | "eye" | "eye-off" | "user" | "check-circle" | "arrows-clockwise" | "file-text" | "hash" | "map-pin" | "inbox" | "arrow-right" | "refresh-cw" | "loader-circle" | "bug" | "scroll-text" | "moon" | "sun" | "search-x" | "command" | "sparkles" | "triangle-alert" | "octagon-x" | "ban" | "ellipsis" | "ellipsis-vertical" | "grip-vertical" | "upload" | "image-off" | "utensils" | "zoom-in" | "zoom-out" | "trash-2" | "clock" | "pencil" | "circle-help" | "stock" | "allergen-cereals-gluten" | "allergen-crustaceans" | "allergen-eggs" | "allergen-fish" | "allergen-peanuts" | "allergen-soybeans" | "allergen-milk" | "allergen-nuts" | "allergen-celery" | "allergen-mustard" | "allergen-sesame" | "allergen-sulphites" | "allergen-lupin" | "allergen-molluscs" | null>;
|
|
4024
4103
|
/**
|
|
4025
4104
|
* URL prefix owned by this group, e.g. `/payments`. While the active route starts with it the
|
|
4026
4105
|
* group counts as active and opens itself — unless the person has explicitly toggled it since.
|
|
@@ -4085,7 +4164,7 @@ type SdsNavItemBadgeTone = 'brand' | 'danger' | 'neutral';
|
|
|
4085
4164
|
*/
|
|
4086
4165
|
declare class SdsNavItem {
|
|
4087
4166
|
protected readonly store: SidebarStore;
|
|
4088
|
-
readonly icon: _angular_core.InputSignal<"
|
|
4167
|
+
readonly icon: _angular_core.InputSignal<"filter" | "copy" | "menu" | "search" | "table" | "image" | "chart-column" | "clipboard-list" | "credit-card" | "external-link" | "languages" | "megaphone" | "monitor" | "store" | "user-round" | "home" | "user-plus" | "user-check" | "hand" | "users" | "bike" | "building-2" | "package" | "package-plus" | "package-open" | "rotate-ccw" | "bar-chart-3" | "log-out" | "panel-left-close" | "panel-left-open" | "panel-left" | "calendar" | "chevron-right" | "chevron-left" | "chevron-down" | "chevron-up" | "plus" | "minus" | "chevrons-left" | "chevrons-right" | "x" | "check" | "alert-circle" | "info" | "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" | "chevrons-up" | "chevrons-down" | "star" | "message-square" | "qr-code" | "eye" | "eye-off" | "user" | "check-circle" | "arrows-clockwise" | "file-text" | "hash" | "map-pin" | "inbox" | "arrow-right" | "refresh-cw" | "loader-circle" | "bug" | "scroll-text" | "moon" | "sun" | "search-x" | "command" | "sparkles" | "triangle-alert" | "octagon-x" | "ban" | "ellipsis" | "ellipsis-vertical" | "grip-vertical" | "upload" | "image-off" | "utensils" | "zoom-in" | "zoom-out" | "trash-2" | "clock" | "pencil" | "circle-help" | "stock" | "allergen-cereals-gluten" | "allergen-crustaceans" | "allergen-eggs" | "allergen-fish" | "allergen-peanuts" | "allergen-soybeans" | "allergen-milk" | "allergen-nuts" | "allergen-celery" | "allergen-mustard" | "allergen-sesame" | "allergen-sulphites" | "allergen-lupin" | "allergen-molluscs" | null>;
|
|
4089
4168
|
readonly label: _angular_core.InputSignal<string>;
|
|
4090
4169
|
/** Router link target; when null, the item behaves as a button. */
|
|
4091
4170
|
readonly link: _angular_core.InputSignal<string | unknown[] | null>;
|
|
@@ -4201,7 +4280,7 @@ type SdsMenuItemTone = 'default' | 'danger';
|
|
|
4201
4280
|
* <sds-menu-item icon="log-out" label="Sign out" tone="danger" (select)="signOut()" />
|
|
4202
4281
|
*/
|
|
4203
4282
|
declare class SdsMenuItem {
|
|
4204
|
-
readonly icon: _angular_core.InputSignal<"
|
|
4283
|
+
readonly icon: _angular_core.InputSignal<"filter" | "copy" | "menu" | "search" | "table" | "image" | "chart-column" | "clipboard-list" | "credit-card" | "external-link" | "languages" | "megaphone" | "monitor" | "store" | "user-round" | "home" | "user-plus" | "user-check" | "hand" | "users" | "bike" | "building-2" | "package" | "package-plus" | "package-open" | "rotate-ccw" | "bar-chart-3" | "log-out" | "panel-left-close" | "panel-left-open" | "panel-left" | "calendar" | "chevron-right" | "chevron-left" | "chevron-down" | "chevron-up" | "plus" | "minus" | "chevrons-left" | "chevrons-right" | "x" | "check" | "alert-circle" | "info" | "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" | "chevrons-up" | "chevrons-down" | "star" | "message-square" | "qr-code" | "eye" | "eye-off" | "user" | "check-circle" | "arrows-clockwise" | "file-text" | "hash" | "map-pin" | "inbox" | "arrow-right" | "refresh-cw" | "loader-circle" | "bug" | "scroll-text" | "moon" | "sun" | "search-x" | "command" | "sparkles" | "triangle-alert" | "octagon-x" | "ban" | "ellipsis" | "ellipsis-vertical" | "grip-vertical" | "upload" | "image-off" | "utensils" | "zoom-in" | "zoom-out" | "trash-2" | "clock" | "pencil" | "circle-help" | "stock" | "allergen-cereals-gluten" | "allergen-crustaceans" | "allergen-eggs" | "allergen-fish" | "allergen-peanuts" | "allergen-soybeans" | "allergen-milk" | "allergen-nuts" | "allergen-celery" | "allergen-mustard" | "allergen-sesame" | "allergen-sulphites" | "allergen-lupin" | "allergen-molluscs" | null>;
|
|
4205
4284
|
readonly label: _angular_core.InputSignal<string>;
|
|
4206
4285
|
/** Router link target for an in-app route; when null (default) the item is not a Router link. */
|
|
4207
4286
|
readonly link: _angular_core.InputSignal<string | unknown[] | null>;
|