@besaitech/ng-design-system 0.0.51 → 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/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,35 @@ 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\"/>";
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\"/>";
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\"/>";
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\"/>";
113
+ readonly 'allergen-crustaceans': "<ellipse cx=\"12\" cy=\"15\" rx=\"6\" ry=\"4\"/><path d=\"M3.5 4a2.5 2.5 0 1 0 5 0\"/><path d=\"M15.5 4a2.5 2.5 0 1 0 5 0\"/><path d=\"M6 6.5 8.5 11.8\"/><path d=\"M18 6.5 15.5 11.8\"/><path d=\"M6 15H3\"/><path d=\"M18 15h3\"/><path d=\"M7.3 17.5 4.5 20\"/><path d=\"M16.7 17.5 19.5 20\"/><path d=\"M10.5 11.2V9.5\"/><path d=\"M13.5 11.2V9.5\"/>";
114
+ readonly 'allergen-eggs': "<path d=\"M12 2.5c-3.6 0-6.5 5.5-6.5 10.5a6.5 6.5 0 0 0 13 0c0-5-2.9-10.5-6.5-10.5z\"/><path d=\"M9 13.5a3 3 0 0 0 2.5 3\"/>";
115
+ readonly 'allergen-fish': "<path d=\"M2.5 12c2-3.5 5-5.5 8.5-5.5 3 0 5.5 2 7 5.5-1.5 3.5-4 5.5-7 5.5-3.5 0-6.5-2-8.5-5.5z\"/><path d=\"M18 12l3.5-3.5v7z\"/><path d=\"M10 9a4.5 4.5 0 0 1 0 6\"/><path d=\"M6.5 11h.01\"/>";
116
+ readonly 'allergen-peanuts': "<path d=\"M8.8 12a5 5 0 1 1 6.4 0 5 5 0 1 1-6.4 0z\"/><path d=\"M10.5 6.5h.01\"/><path d=\"M13.5 8.5h.01\"/><path d=\"M10.5 15.5h.01\"/><path d=\"M13.5 17.5h.01\"/>";
117
+ readonly 'allergen-soybeans': "<path d=\"M15.88 3.88 3.88 15.88a3 3 0 0 0 4.24 4.24L20.12 8.12a3 3 0 0 0-4.24-4.24z\"/><circle cx=\"8.5\" cy=\"15.5\" r=\"1.5\"/><circle cx=\"12\" cy=\"12\" r=\"1.5\"/><circle cx=\"15.5\" cy=\"8.5\" r=\"1.5\"/><path d=\"M20.5 3.5 22 2\"/>";
118
+ readonly 'allergen-milk': "<path d=\"M6 10v10.5A1.5 1.5 0 0 0 7.5 22h9a1.5 1.5 0 0 0 1.5-1.5V10\"/><path d=\"M6 10l3-5h6l3 5z\"/><path d=\"M9 5V2.5h6V5\"/><path d=\"M12 13.5c-1 1.3-1.5 2.1-1.5 2.8a1.5 1.5 0 0 0 3 0c0-.7-.5-1.5-1.5-2.8z\"/>";
119
+ readonly 'allergen-nuts': "<path d=\"M5 9.5C5 6.5 8 4 12 4s7 2.5 7 5.5z\"/><path d=\"M6.5 9.5v1.5c0 4.5 2.5 8.5 5.5 10 3-1.5 5.5-5.5 5.5-10V9.5\"/><path d=\"M12 4c0-1 .5-1.7 1.5-2\"/>";
120
+ readonly 'allergen-celery': "<path d=\"M7 22c-.8-4-.5-8.5 1-12.5h8c1.5 4 1.8 8.5 1 12.5z\"/><path d=\"M10.5 22c-.3-4-.2-8.5.5-12.5\"/><path d=\"M13.5 22c.3-4 .2-8.5-.5-12.5\"/><path d=\"M9.5 9.5 7.5 6.5\"/><path d=\"M12 9.5V5\"/><path d=\"M14.5 9.5l2-3\"/><circle cx=\"6.5\" cy=\"5\" r=\"1.5\"/><circle cx=\"12\" cy=\"3.5\" r=\"1.5\"/><circle cx=\"17.5\" cy=\"5\" r=\"1.5\"/>";
121
+ readonly 'allergen-mustard': "<rect x=\"5\" y=\"7\" width=\"14\" height=\"3\" rx=\"1\"/><path d=\"M6 10v8.5A3.5 3.5 0 0 0 9.5 22h5a3.5 3.5 0 0 0 3.5-3.5V10\"/><path d=\"M13.5 7l3-4.5\"/><rect x=\"9\" y=\"13\" width=\"6\" height=\"5\" rx=\"1\"/>";
122
+ readonly 'allergen-sesame': "<path d=\"M7 3c1.2 1.2 1.8 2.5 1.8 3.5a1.8 1.8 0 0 1-3.6 0C5.2 5.5 5.8 4.2 7 3z\" transform=\"rotate(-25 7 6)\"/><path d=\"M16.5 3.5c1.2 1.2 1.8 2.5 1.8 3.5a1.8 1.8 0 0 1-3.6 0c0-1 .6-2.3 1.8-3.5z\" transform=\"rotate(30 16.5 6.5)\"/><path d=\"M8.5 13c1.2 1.2 1.8 2.5 1.8 3.5a1.8 1.8 0 0 1-3.6 0c0-1 .6-2.3 1.8-3.5z\" transform=\"rotate(15 8.5 16)\"/><path d=\"M17 12c1.2 1.2 1.8 2.5 1.8 3.5a1.8 1.8 0 0 1-3.6 0c0-1 .6-2.3 1.8-3.5z\" transform=\"rotate(-20 17 15)\"/>";
123
+ readonly 'allergen-sulphites': "<path d=\"M7.5 3h9c.3 1.5.5 3 .5 4.5a5 5 0 0 1-10 0c0-1.5.2-3 .5-4.5z\"/><path d=\"M12 12.5V21\"/><path d=\"M8.5 21h7\"/><path d=\"M7.2 7h9.6\"/>";
124
+ readonly 'allergen-lupin': "<path d=\"M12 2.5a1.7 1.7 0 0 1 1.2 3 1.8 1.8 0 0 1 .8 3 1.9 1.9 0 0 1 .8 3 2 2 0 0 1-.3 2.8H9.5a2 2 0 0 1-.3-2.8 1.9 1.9 0 0 1 .8-3 1.8 1.8 0 0 1 .8-3 1.7 1.7 0 0 1 1.2-3z\"/><path d=\"M10.8 8.5h2.4\"/><path d=\"M10.2 11.5h3.6\"/><path d=\"M12 14.3V22\"/><path d=\"M12 19.5 7 17.5\"/><path d=\"M12 19.5 8.5 16\"/><path d=\"M12 19.5l5-2\"/><path d=\"M12 19.5l3.5-3.5\"/>";
125
+ readonly 'allergen-molluscs': "<path d=\"M12 19 4.5 11a7.5 7.5 0 0 1 15 0z\"/><path d=\"M12 19V3.5\"/><path d=\"M12 19 7.2 5.2\"/><path d=\"M12 19l4.8-13.8\"/><path d=\"M9.5 22 12 19l2.5 3z\"/>";
97
126
  };
98
127
  type SdsIconName = keyof typeof SDS_ICONS;
99
128
 
@@ -108,7 +137,7 @@ type SdsIconSize = 'sm' | 'md' | 'lg' | 'xl';
108
137
  declare class SdsIcon {
109
138
  private readonly sanitizer;
110
139
  /** Icon identifier from the registry. */
111
- 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">;
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">;
112
141
  /** Square size: a pixel number, a numeric string, or a keyword (sm·md·lg·xl). */
113
142
  readonly size: _angular_core.InputSignalWithTransform<number, string | number>;
114
143
  /** Stroke width of the line icon. */
@@ -138,7 +167,7 @@ declare class SdsButton {
138
167
  * most important control.
139
168
  */
140
169
  readonly shape: _angular_core.InputSignal<SdsButtonShape>;
141
- readonly type: _angular_core.InputSignal<"button" | "submit" | "reset">;
170
+ readonly type: _angular_core.InputSignal<"button" | "reset" | "submit">;
142
171
  readonly disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
143
172
  readonly loading: _angular_core.InputSignalWithTransform<boolean, unknown>;
144
173
  /** Full-width button. */
@@ -208,8 +237,8 @@ declare class SdsInput implements ControlValueAccessor {
208
237
  * is its only name.
209
238
  */
210
239
  readonly clearLabel: _angular_core.InputSignal<string>;
211
- 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" | null>;
212
- 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" | 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>;
213
242
  /**
214
243
  * A CLICKABLE trailing icon, for the affordances that belong to the field itself — password reveal
215
244
  * above all. Distinct from {@link trailingIcon}, which is decorative and explicitly
@@ -219,7 +248,7 @@ declare class SdsInput implements ControlValueAccessor {
219
248
  * Always pair it with {@link trailingActionLabel} — an icon-only button with no accessible name is
220
249
  * unusable by a screen reader. For a toggle, also bind {@link trailingActionPressed}.
221
250
  */
222
- 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" | 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>;
223
252
  /** Accessible name for {@link trailingAction}. Translate it in the consuming app. */
224
253
  readonly trailingActionLabel: _angular_core.InputSignal<string>;
225
254
  /** `aria-pressed` for a toggling action (e.g. show/hide password). Null renders no attribute. */
@@ -314,9 +343,9 @@ declare class SdsInputNumber implements ControlValueAccessor {
314
343
  readonly showButtons: _angular_core.InputSignalWithTransform<boolean, unknown>;
315
344
  readonly buttonLayout: _angular_core.InputSignal<SdsInputNumberButtonLayout>;
316
345
  /** Override the increment button icon (defaults: chevron-up when stacked, plus otherwise). */
317
- 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" | 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>;
318
347
  /** Override the decrement button icon (defaults: chevron-down when stacked, minus otherwise). */
319
- 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" | 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>;
320
349
  /** Allow an empty (null) value. When false, blurring an empty field falls back to {@link min} or 0. */
321
350
  readonly allowEmpty: _angular_core.InputSignalWithTransform<boolean, unknown>;
322
351
  readonly clearable: _angular_core.InputSignalWithTransform<boolean, unknown>;
@@ -333,8 +362,8 @@ declare class SdsInputNumber implements ControlValueAccessor {
333
362
  protected readonly isDisabled: _angular_core.Signal<boolean>;
334
363
  protected readonly describedBy: _angular_core.Signal<string | null>;
335
364
  protected readonly clearVisible: _angular_core.Signal<boolean>;
336
- 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">;
337
- 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">;
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">;
338
367
  protected readonly canIncrement: _angular_core.Signal<boolean>;
339
368
  protected readonly canDecrement: _angular_core.Signal<boolean>;
340
369
  /** Locale grouping/decimal separators, derived from Intl so parsing matches formatting. */
@@ -351,6 +380,14 @@ declare class SdsInputNumber implements ControlValueAccessor {
351
380
  protected readonly edgeButtonClasses: _angular_core.Signal<string>;
352
381
  protected readonly stackedButtonClasses: _angular_core.Signal<string>;
353
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;
354
391
  private isActive;
355
392
  /** Paint the committed value into the field imperatively (used by spin/clear/blur). */
356
393
  private paintCommitted;
@@ -604,9 +641,9 @@ declare class SdsToggleSwitch implements ControlValueAccessor {
604
641
  /** Value emitted/stored when the switch is off. */
605
642
  readonly falseValue: _angular_core.InputSignal<unknown>;
606
643
  /** Icon shown on the knob when checked. */
607
- 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" | 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>;
608
645
  /** Icon shown on the knob when unchecked. */
609
- 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" | 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>;
610
647
  readonly hint: _angular_core.InputSignal<string>;
611
648
  readonly error: _angular_core.InputSignal<string>;
612
649
  /**
@@ -785,6 +822,816 @@ declare class SdsCard {
785
822
  static ɵcmp: _angular_core.ɵɵComponentDeclaration<SdsCard, "sds-card", never, { "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "padding": { "alias": "padding"; "required": false; "isSignal": true; }; "interactive": { "alias": "interactive"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
786
823
  }
787
824
 
825
+ /**
826
+ * The 14 allergens of Regulation (EU) No 1169/2011, Annex II, spelled exactly like the API enum
827
+ * (`be.saitech.belvigo.catalog.domain.Allergen`), so a DTO value binds straight to the component.
828
+ */
829
+ type SdsAllergen = 'CEREALS_GLUTEN' | 'CRUSTACEANS' | 'EGGS' | 'FISH' | 'PEANUTS' | 'SOYBEANS' | 'MILK' | 'NUTS' | 'CELERY' | 'MUSTARD' | 'SESAME' | 'SULPHITES' | 'LUPIN' | 'MOLLUSCS';
830
+ /** Every allergen in Annex II order — iterate it to render a declaration grid of 14. */
831
+ declare const SDS_ALLERGENS: readonly SdsAllergen[];
832
+ /** Registry icon for each allergen. */
833
+ declare const SDS_ALLERGEN_ICONS: Readonly<Record<SdsAllergen, SdsIconName>>;
834
+ /**
835
+ * English names, as a fallback and for the showcase. An app serving more than one language passes its
836
+ * own translated name through [label] — the library never picks a language for you.
837
+ */
838
+ declare const SDS_ALLERGEN_LABELS_EN: Readonly<Record<SdsAllergen, string>>;
839
+ /**
840
+ * The pictogram for one EU allergen, taking the API enum value directly. With a [label] it is an image
841
+ * with that accessible name (role="img"); without one it is decorative (aria-hidden), for when visible
842
+ * text beside it already names the allergen.
843
+ *
844
+ * @example
845
+ * <sds-allergen-icon allergen="MILK" label="Milk" />
846
+ * <sds-allergen-icon [allergen]="a" [size]="16" /> <!-- decorative: text next to it names it -->
847
+ */
848
+ declare class SdsAllergenIcon {
849
+ /** The allergen, as the API enum value (`MILK`, `CEREALS_GLUTEN`, …). */
850
+ readonly allergen: _angular_core.InputSignal<SdsAllergen>;
851
+ /** Accessible name. Empty (default) = decorative, hidden from assistive tech. */
852
+ readonly label: _angular_core.InputSignal<string>;
853
+ /** Also show the [label] as a native tooltip on hover. */
854
+ readonly showTitle: _angular_core.InputSignalWithTransform<boolean, unknown>;
855
+ /** Square size: a pixel number, a numeric string, or a keyword (sm·md·lg·xl). */
856
+ readonly size: _angular_core.InputSignal<string | number>;
857
+ /** Stroke width of the line icon. */
858
+ readonly strokeWidth: _angular_core.InputSignal<number>;
859
+ protected readonly iconName: _angular_core.Signal<"chart-column" | "clipboard-list" | "credit-card" | "external-link" | "languages" | "megaphone" | "monitor" | "store" | "user-round" | "home" | "user-plus" | "user-check" | "hand" | "users" | "bike" | "building-2" | "package" | "package-plus" | "package-open" | "rotate-ccw" | "bar-chart-3" | "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>;
860
+ constructor();
861
+ static ɵfac: _angular_core.ɵɵFactoryDeclaration<SdsAllergenIcon, never>;
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>;
863
+ }
864
+
865
+ /** The three states of a declaration chip. */
866
+ type SdsTriState = 'none' | 'contains' | 'may-contain';
867
+ type SdsTriStateChipSize = 'sm' | 'md';
868
+ /**
869
+ * A chip that cycles through three states — `none`, `contains`, `may-contain` — built for the 14-tile
870
+ * allergen declaration grid, but generic (any "no / yes / maybe" declaration).
871
+ *
872
+ * **The state never relies on colour alone.** Each state has its own border (thin solid · thick solid
873
+ * and filled · thick dashed), its own mark (none · a check · a question mark), a visible state caption
874
+ * (turn off with `showState`), and the state text is part of the button's accessible name.
875
+ *
876
+ * Interaction: click, Enter or Space moves to the next state; Shift+Enter / Shift+Space moves back;
877
+ * Delete or Backspace resets to `none`. A polite live region announces the new state after a change.
878
+ * The value is a two-way `model` — bind `[(value)]`.
879
+ *
880
+ * All visible and spoken text comes from inputs with English defaults; pass translated labels.
881
+ *
882
+ * @example
883
+ * <sds-tri-state-chip label="Milk" icon="allergen-milk" [(value)]="state.MILK"
884
+ * containsLabel="Contains" mayContainLabel="May contain" noneLabel="Not present" />
885
+ */
886
+ declare class SdsTriStateChip {
887
+ protected readonly chipId: string;
888
+ /** Current state. Two-way: `[(value)]`. */
889
+ readonly value: _angular_core.ModelSignal<SdsTriState>;
890
+ /** Visible name (e.g. the allergen). Required — the chip has no other accessible name. */
891
+ readonly label: _angular_core.InputSignal<string>;
892
+ /** Optional leading registry icon, e.g. an `allergen-*` pictogram. */
893
+ readonly icon: _angular_core.InputSignal<"chart-column" | "clipboard-list" | "credit-card" | "external-link" | "languages" | "megaphone" | "monitor" | "store" | "user-round" | "home" | "user-plus" | "user-check" | "hand" | "users" | "bike" | "building-2" | "package" | "package-plus" | "package-open" | "rotate-ccw" | "bar-chart-3" | "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>;
894
+ readonly size: _angular_core.InputSignal<SdsTriStateChipSize>;
895
+ readonly disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
896
+ /** Show the state as a small visible caption under the label. */
897
+ readonly showState: _angular_core.InputSignalWithTransform<boolean, unknown>;
898
+ /** State text for `none` (visible caption and spoken). */
899
+ readonly noneLabel: _angular_core.InputSignal<string>;
900
+ /** State text for `contains`. */
901
+ readonly containsLabel: _angular_core.InputSignal<string>;
902
+ /** State text for `may-contain`. */
903
+ readonly mayContainLabel: _angular_core.InputSignal<string>;
904
+ /**
905
+ * Optional usage hint read after the name, e.g. "Press to change". Off by default: a button that
906
+ * announces its state and changes on activation is self-explanatory to most users.
907
+ */
908
+ readonly hint: _angular_core.InputSignal<string>;
909
+ /** Last user-driven change, spoken by the live region. Programmatic writes stay silent. */
910
+ protected readonly announcement: _angular_core.WritableSignal<string>;
911
+ protected readonly stateText: _angular_core.Signal<string>;
912
+ protected readonly chipClass: _angular_core.Signal<string>;
913
+ protected readonly captionClass: _angular_core.Signal<"text-white/85 dark:text-surface/85" | "text-ink-soft" | "text-ink-faint">;
914
+ protected onClick(event: MouseEvent): void;
915
+ protected onKeydown(event: KeyboardEvent): void;
916
+ private step;
917
+ private set;
918
+ private textFor;
919
+ static ɵfac: _angular_core.ɵɵFactoryDeclaration<SdsTriStateChip, never>;
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>;
921
+ }
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
+
788
1635
  /** Small, dependency-free date helpers (day-granularity, local time). */
789
1636
  declare function startOfDay(d: Date): Date;
790
1637
  /** Zero-pad a number to two digits (e.g. 9 → "09"). */
@@ -1909,7 +2756,52 @@ interface SdsTableColumn {
1909
2756
  align?: 'left' | 'center' | 'right';
1910
2757
  /** Fixed column width, e.g. `'120px'` or `'20%'`. */
1911
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;
1912
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';
1913
2805
  type SdsTableSize = 'sm' | 'md' | 'lg';
1914
2806
  /** 1 = ascending, -1 = descending, 0 = unsorted. */
1915
2807
  type SdsSortOrder = 1 | -1 | 0;
@@ -1944,6 +2836,16 @@ type SdsSelectionMode = 'single' | 'multiple' | null;
1944
2836
  * every filtered row regardless of pagination (this is an intentional
1945
2837
  * deviation from PrimeNG's per-page select-all).
1946
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
+ *
1947
2849
  * @example
1948
2850
  * <sds-table [value]="staff" [columns]="cols" dataKey="id"
1949
2851
  * sortable paginator [rows]="10" globalFilter
@@ -1952,6 +2854,11 @@ type SdsSelectionMode = 'single' | 'multiple' | null;
1952
2854
  * <sds-badge [variant]="row.actif ? 'success' : 'neutral'">{{ value }}</sds-badge>
1953
2855
  * </ng-template>
1954
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)" />
1955
2862
  */
1956
2863
  declare class SdsTable implements OnDestroy {
1957
2864
  protected readonly tableId: string;
@@ -2009,6 +2916,16 @@ declare class SdsTable implements OnDestroy {
2009
2916
  readonly resizableColumns: _angular_core.InputSignalWithTransform<boolean, unknown>;
2010
2917
  /** Drag a column header to reorder columns. */
2011
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>;
2012
2929
  readonly sortChange: _angular_core.OutputEmitterRef<SdsTableSortEvent>;
2013
2930
  readonly pageChange: _angular_core.OutputEmitterRef<SdsPaginatorState>;
2014
2931
  readonly rowSelect: _angular_core.OutputEmitterRef<any>;
@@ -2025,6 +2942,8 @@ declare class SdsTable implements OnDestroy {
2025
2942
  fromIndex: number;
2026
2943
  toIndex: number;
2027
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>;
2028
2947
  private readonly cellTemplates;
2029
2948
  private readonly templateMap;
2030
2949
  protected templateFor(field: string): _angular_core.TemplateRef<SdsTableCellContext> | null;
@@ -2101,12 +3020,66 @@ declare class SdsTable implements OnDestroy {
2101
3020
  protected onColDragOver(e: DragEvent): void;
2102
3021
  protected onColDrop(e: DragEvent, toIndex: number): void;
2103
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;
2104
3077
  protected headCellClass(col?: SdsTableColumn): string;
2105
3078
  protected cellClass(col?: SdsTableColumn): string;
2106
3079
  protected rowClass(row: any, index: number): string;
2107
3080
  protected checkboxClass(checked: boolean, indeterminate: boolean): string;
2108
3081
  static ɵfac: _angular_core.ɵɵFactoryDeclaration<SdsTable, never>;
2109
- 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>;
2110
3083
  }
2111
3084
 
2112
3085
  /**
@@ -2525,7 +3498,7 @@ declare class SdsNavGroup {
2525
3498
  /** Turn the label into an expand/collapse control. */
2526
3499
  readonly collapsible: _angular_core.InputSignalWithTransform<boolean, unknown>;
2527
3500
  /** Icon for a collapsible header, so it reads at the same weight as the items it sits among. */
2528
- 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" | 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>;
2529
3502
  /**
2530
3503
  * URL prefix owned by this group, e.g. `/payments`. While the active route starts with it the
2531
3504
  * group counts as active and opens itself — unless the person has explicitly toggled it since.
@@ -2576,6 +3549,7 @@ declare class SdsNavGroup {
2576
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>;
2577
3550
  }
2578
3551
 
3552
+ type SdsNavItemBadgeTone = 'brand' | 'danger' | 'neutral';
2579
3553
  /**
2580
3554
  * A single sidebar navigation entry. Renders an anchor when [link] is set
2581
3555
  * (with automatic active state via routerLinkActive) or a button otherwise.
@@ -2585,18 +3559,36 @@ declare class SdsNavGroup {
2585
3559
  *
2586
3560
  * @example
2587
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" />
2588
3563
  */
2589
3564
  declare class SdsNavItem {
2590
3565
  protected readonly store: SidebarStore;
2591
- 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" | 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>;
2592
3567
  readonly label: _angular_core.InputSignal<string>;
2593
3568
  /** Router link target; when null, the item behaves as a button. */
2594
3569
  readonly link: _angular_core.InputSignal<string | unknown[] | null>;
2595
3570
  readonly exact: _angular_core.InputSignalWithTransform<boolean, unknown>;
2596
3571
  /** Manual active state (combined with routerLinkActive when a link is set). */
2597
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>;
2598
3584
  readonly select: _angular_core.OutputEmitterRef<void>;
2599
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>;
2600
3592
  protected itemClass(isActive: boolean): string;
2601
3593
  /**
2602
3594
  * The left accent bar on an active item — the strongest "selected" cue, and the one that survives a
@@ -2605,7 +3597,7 @@ declare class SdsNavItem {
2605
3597
  */
2606
3598
  protected readonly accentBarClass: _angular_core.Signal<string>;
2607
3599
  static ɵfac: _angular_core.ɵɵFactoryDeclaration<SdsNavItem, never>;
2608
- 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>;
2609
3601
  }
2610
3602
 
2611
3603
  type SdsUserMenuAppearance = 'surface' | 'on-brand';
@@ -2687,7 +3679,7 @@ type SdsMenuItemTone = 'default' | 'danger';
2687
3679
  * <sds-menu-item icon="log-out" label="Se déconnecter" tone="danger" (select)="signOut()" />
2688
3680
  */
2689
3681
  declare class SdsMenuItem {
2690
- 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" | 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>;
2691
3683
  readonly label: _angular_core.InputSignal<string>;
2692
3684
  /** Router link target for an in-app route; when null (default) the item is not a Router link. */
2693
3685
  readonly link: _angular_core.InputSignal<string | unknown[] | null>;
@@ -2912,5 +3904,5 @@ declare class SdsLanguageSwitcher implements OnDestroy {
2912
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>;
2913
3905
  }
2914
3906
 
2915
- export { SDS_ICONS, SDS_PHONE_COUNTRIES, SdsAccordion, SdsAccordionContent, SdsAccordionHeader, SdsAccordionPanel, SdsAccordionStore, 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, SdsUserMenu, SidebarStore, addDays, addMonths, addMonthsKeepDay, formatDdMmYyyy, formatHhMm, isOutOfRange, isSameDay, isoDay, pad2, sdsFormatNational, sdsMatchDialCode, sdsNormalizeSignificant, startOfDay, startOfMonth };
2916
- export type { SdsAccordionActive, SdsAccordionValue, 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, 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 };