@besaitech/ng-design-system 0.0.16 → 0.0.29
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
|
@@ -10,10 +10,20 @@ import * as _besaitech_ng_design_system from '@besaitech/ng-design-system';
|
|
|
10
10
|
* Add new icons here and they become available everywhere via name="...".
|
|
11
11
|
*/
|
|
12
12
|
declare const SDS_ICONS: {
|
|
13
|
+
readonly 'chart-column': "<path d=\"M3 3v16a2 2 0 0 0 2 2h16\"/><path d=\"M18 17V9\"/><path d=\"M13 17V5\"/><path d=\"M8 17v-3\"/>";
|
|
14
|
+
readonly 'clipboard-list': "<rect width=\"8\" height=\"4\" x=\"8\" y=\"2\" rx=\"1\" ry=\"1\"/><path d=\"M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2\"/><path d=\"M12 11h4\"/><path d=\"M12 16h4\"/><path d=\"M8 11h.01\"/><path d=\"M8 16h.01\"/>";
|
|
15
|
+
readonly 'credit-card': "<rect width=\"20\" height=\"14\" x=\"2\" y=\"5\" rx=\"2\"/><line x1=\"2\" x2=\"22\" y1=\"10\" y2=\"10\"/>";
|
|
16
|
+
readonly 'external-link': "<path d=\"M15 3h6v6\"/><path d=\"M10 14 21 3\"/><path d=\"M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6\"/>";
|
|
17
|
+
readonly languages: "<path d=\"m5 8 6 6\"/><path d=\"m4 14 6-6 2-3\"/><path d=\"M2 5h12\"/><path d=\"M7 2h1\"/><path d=\"m22 22-5-10-5 10\"/><path d=\"M14 18h6\"/>";
|
|
18
|
+
readonly megaphone: "<path d=\"m3 11 18-5v12L3 14v-3z\"/><path d=\"M11.6 16.8a3 3 0 1 1-5.8-1.6\"/>";
|
|
19
|
+
readonly monitor: "<rect width=\"20\" height=\"14\" x=\"2\" y=\"3\" rx=\"2\"/><line x1=\"8\" x2=\"16\" y1=\"21\" y2=\"21\"/><line x1=\"12\" x2=\"12\" y1=\"17\" y2=\"21\"/>";
|
|
20
|
+
readonly store: "<path d=\"m2 7 4.41-4.41A2 2 0 0 1 7.83 2h8.34a2 2 0 0 1 1.42.59L22 7\"/><path d=\"M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8\"/><path d=\"M15 22v-4a2 2 0 0 0-2-2h-2a2 2 0 0 0-2 2v4\"/><path d=\"M2 7h20\"/><path d=\"M22 7v3a2 2 0 0 1-2 2a2.7 2.7 0 0 1-1.59-.63.7.7 0 0 0-.82 0A2.7 2.7 0 0 1 16 12a2.7 2.7 0 0 1-1.59-.63.7.7 0 0 0-.82 0A2.7 2.7 0 0 1 12 12a2.7 2.7 0 0 1-1.59-.63.7.7 0 0 0-.82 0A2.7 2.7 0 0 1 8 12a2.7 2.7 0 0 1-1.59-.63.7.7 0 0 0-.82 0A2.7 2.7 0 0 1 4 12a2 2 0 0 1-2-2V7\"/>";
|
|
21
|
+
readonly 'user-round': "<circle cx=\"12\" cy=\"8\" r=\"5\"/><path d=\"M20 21a8 8 0 0 0-16 0\"/>";
|
|
13
22
|
readonly home: "<path d=\"m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z\"/><polyline points=\"9 22 9 12 15 12 15 22\"/>";
|
|
14
23
|
readonly 'user-plus': "<path d=\"M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2\"/><circle cx=\"9\" cy=\"7\" r=\"4\"/><line x1=\"19\" x2=\"19\" y1=\"8\" y2=\"14\"/><line x1=\"22\" x2=\"16\" y1=\"11\" y2=\"11\"/>";
|
|
15
24
|
readonly hand: "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-hand-icon lucide-hand\"><path d=\"M18 11V6a2 2 0 0 0-2-2a2 2 0 0 0-2 2\"/><path d=\"M14 10V4a2 2 0 0 0-2-2a2 2 0 0 0-2 2v2\"/><path d=\"M10 10.5V6a2 2 0 0 0-2-2a2 2 0 0 0-2 2v8\"/><path d=\"M18 8a2 2 0 1 1 4 0v6a8 8 0 0 1-8 8h-2c-2.8 0-4.5-.86-5.99-2.34l-3.6-3.6a2 2 0 0 1 2.83-2.82L7 15\"/></svg>";
|
|
16
25
|
readonly users: "<path d=\"M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2\"/><circle cx=\"9\" cy=\"7\" r=\"4\"/><path d=\"M22 21v-2a4 4 0 0 0-3-3.87\"/><path d=\"M16 3.13a4 4 0 0 1 0 7.75\"/>";
|
|
26
|
+
readonly bike: "<circle cx=\"18.5\" cy=\"17.5\" r=\"3.5\"/><circle cx=\"5.5\" cy=\"17.5\" r=\"3.5\"/><circle cx=\"15\" cy=\"5\" r=\"1\"/><path d=\"M12 17.5V14l-3-3 4-3 2 3h2\"/>";
|
|
17
27
|
readonly 'building-2': "<path d=\"M6 22V4a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v18Z\"/><path d=\"M6 12H4a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h2\"/><path d=\"M18 9h2a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-2\"/><path d=\"M10 6h4\"/><path d=\"M10 10h4\"/><path d=\"M10 14h4\"/><path d=\"M10 18h4\"/>";
|
|
18
28
|
readonly package: "<path d=\"M11 21.73a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73z\"/><path d=\"M12 22V12\"/><polyline points=\"3.29 7 12 12 20.71 7\"/><path d=\"m7.5 4.27 9 5.15\"/>";
|
|
19
29
|
readonly 'package-plus': "<path d=\"M16 16h6\"/><path d=\"M19 13v6\"/><path d=\"M21 10V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0\"/><path d=\"m7.5 4.27 9 5.15\"/><polyline points=\"3.29 7 12 12 20.71 7\"/><path d=\"M12 22V12\"/>";
|
|
@@ -83,7 +93,7 @@ type SdsIconSize = 'sm' | 'md' | 'lg' | 'xl';
|
|
|
83
93
|
declare class SdsIcon {
|
|
84
94
|
private readonly sanitizer;
|
|
85
95
|
/** Icon identifier from the registry. */
|
|
86
|
-
readonly name: _angular_core.InputSignal<"home" | "user-plus" | "hand" | "users" | "building-2" | "package" | "package-plus" | "package-open" | "rotate-ccw" | "bar-chart-3" | "
|
|
96
|
+
readonly name: _angular_core.InputSignal<"search" | "chart-column" | "clipboard-list" | "credit-card" | "external-link" | "languages" | "megaphone" | "monitor" | "store" | "user-round" | "home" | "user-plus" | "hand" | "users" | "bike" | "building-2" | "package" | "package-plus" | "package-open" | "rotate-ccw" | "bar-chart-3" | "log-out" | "panel-left-close" | "panel-left-open" | "panel-left" | "calendar" | "chevron-right" | "chevron-left" | "chevron-down" | "chevrons-left" | "chevrons-right" | "x" | "check" | "alert-circle" | "info" | "copy" | "type" | "tag" | "square" | "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" | "eye" | "eye-off" | "user" | "check-circle" | "arrows-clockwise" | "menu" | "file-text" | "hash" | "map-pin" | "inbox" | "arrow-right" | "refresh-cw" | "loader-circle">;
|
|
87
97
|
/** Square size: a pixel number, a numeric string, or a keyword (sm·md·lg·xl). */
|
|
88
98
|
readonly size: _angular_core.InputSignalWithTransform<number, string | number>;
|
|
89
99
|
/** Stroke width of the line icon. */
|
|
@@ -123,7 +133,8 @@ declare class SdsButton {
|
|
|
123
133
|
}
|
|
124
134
|
|
|
125
135
|
type SdsInputSize = 'sm' | 'md' | 'lg';
|
|
126
|
-
type SdsInputAppearance = 'default' | 'on-brand';
|
|
136
|
+
type SdsInputAppearance = 'default' | 'filled' | 'on-brand';
|
|
137
|
+
type SdsInputShape = 'control' | 'pill';
|
|
127
138
|
type SdsInputType = 'text' | 'email' | 'password' | 'number' | 'tel' | 'search' | 'url';
|
|
128
139
|
/**
|
|
129
140
|
* Text input with label, hint/error, optional leading/trailing icons and a
|
|
@@ -139,13 +150,35 @@ declare class SdsInput implements ControlValueAccessor {
|
|
|
139
150
|
readonly placeholder: _angular_core.InputSignal<string>;
|
|
140
151
|
readonly hint: _angular_core.InputSignal<string>;
|
|
141
152
|
readonly error: _angular_core.InputSignal<string>;
|
|
153
|
+
/**
|
|
154
|
+
* `search` is the semantically right type for a search field, and the template strips the WebKit
|
|
155
|
+
* search decorations that come with it. Without that, a `search` field with {@link clearable} draws
|
|
156
|
+
* TWO clear buttons — the component's and the browser's own, which no stylesheet can reach and which
|
|
157
|
+
* sits outside the field's own padding.
|
|
158
|
+
*/
|
|
142
159
|
readonly type: _angular_core.InputSignal<SdsInputType>;
|
|
143
160
|
readonly size: _angular_core.InputSignal<SdsInputSize>;
|
|
161
|
+
/**
|
|
162
|
+
* `filled` is a borderless field on a muted ground, for a search box that has to sit inside a page
|
|
163
|
+
* rather than announce itself as a form control — a storefront's search pill above all.
|
|
164
|
+
* `on-brand` is the same field tuned for a dark surface.
|
|
165
|
+
*/
|
|
144
166
|
readonly appearance: _angular_core.InputSignal<SdsInputAppearance>;
|
|
167
|
+
/**
|
|
168
|
+
* `pill` fully rounds the field. Separate from {@link appearance} on purpose: a bordered pill and a
|
|
169
|
+
* filled box are both real designs, and folding the two axes into one enum would forbid half of them.
|
|
170
|
+
*/
|
|
171
|
+
readonly shape: _angular_core.InputSignal<SdsInputShape>;
|
|
145
172
|
readonly disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
146
173
|
readonly clearable: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
147
|
-
|
|
148
|
-
|
|
174
|
+
/**
|
|
175
|
+
* Accessible name for the clear button. French default so existing consumers are unchanged, but an
|
|
176
|
+
* app serving more than one language MUST translate it — it is an icon-only control, so this string
|
|
177
|
+
* is its only name.
|
|
178
|
+
*/
|
|
179
|
+
readonly clearLabel: _angular_core.InputSignal<string>;
|
|
180
|
+
readonly leadingIcon: _angular_core.InputSignal<"search" | "chart-column" | "clipboard-list" | "credit-card" | "external-link" | "languages" | "megaphone" | "monitor" | "store" | "user-round" | "home" | "user-plus" | "hand" | "users" | "bike" | "building-2" | "package" | "package-plus" | "package-open" | "rotate-ccw" | "bar-chart-3" | "log-out" | "panel-left-close" | "panel-left-open" | "panel-left" | "calendar" | "chevron-right" | "chevron-left" | "chevron-down" | "chevrons-left" | "chevrons-right" | "x" | "check" | "alert-circle" | "info" | "copy" | "type" | "tag" | "square" | "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" | "eye" | "eye-off" | "user" | "check-circle" | "arrows-clockwise" | "menu" | "file-text" | "hash" | "map-pin" | "inbox" | "arrow-right" | "refresh-cw" | "loader-circle" | null>;
|
|
181
|
+
readonly trailingIcon: _angular_core.InputSignal<"search" | "chart-column" | "clipboard-list" | "credit-card" | "external-link" | "languages" | "megaphone" | "monitor" | "store" | "user-round" | "home" | "user-plus" | "hand" | "users" | "bike" | "building-2" | "package" | "package-plus" | "package-open" | "rotate-ccw" | "bar-chart-3" | "log-out" | "panel-left-close" | "panel-left-open" | "panel-left" | "calendar" | "chevron-right" | "chevron-left" | "chevron-down" | "chevrons-left" | "chevrons-right" | "x" | "check" | "alert-circle" | "info" | "copy" | "type" | "tag" | "square" | "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" | "eye" | "eye-off" | "user" | "check-circle" | "arrows-clockwise" | "menu" | "file-text" | "hash" | "map-pin" | "inbox" | "arrow-right" | "refresh-cw" | "loader-circle" | null>;
|
|
149
182
|
/**
|
|
150
183
|
* A CLICKABLE trailing icon, for the affordances that belong to the field itself — password reveal
|
|
151
184
|
* above all. Distinct from {@link trailingIcon}, which is decorative and explicitly
|
|
@@ -155,7 +188,7 @@ declare class SdsInput implements ControlValueAccessor {
|
|
|
155
188
|
* Always pair it with {@link trailingActionLabel} — an icon-only button with no accessible name is
|
|
156
189
|
* unusable by a screen reader. For a toggle, also bind {@link trailingActionPressed}.
|
|
157
190
|
*/
|
|
158
|
-
readonly trailingAction: _angular_core.InputSignal<"home" | "user-plus" | "hand" | "users" | "building-2" | "package" | "package-plus" | "package-open" | "rotate-ccw" | "bar-chart-3" | "
|
|
191
|
+
readonly trailingAction: _angular_core.InputSignal<"search" | "chart-column" | "clipboard-list" | "credit-card" | "external-link" | "languages" | "megaphone" | "monitor" | "store" | "user-round" | "home" | "user-plus" | "hand" | "users" | "bike" | "building-2" | "package" | "package-plus" | "package-open" | "rotate-ccw" | "bar-chart-3" | "log-out" | "panel-left-close" | "panel-left-open" | "panel-left" | "calendar" | "chevron-right" | "chevron-left" | "chevron-down" | "chevrons-left" | "chevrons-right" | "x" | "check" | "alert-circle" | "info" | "copy" | "type" | "tag" | "square" | "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" | "eye" | "eye-off" | "user" | "check-circle" | "arrows-clockwise" | "menu" | "file-text" | "hash" | "map-pin" | "inbox" | "arrow-right" | "refresh-cw" | "loader-circle" | null>;
|
|
159
192
|
/** Accessible name for {@link trailingAction}. Translate it in the consuming app. */
|
|
160
193
|
readonly trailingActionLabel: _angular_core.InputSignal<string>;
|
|
161
194
|
/** `aria-pressed` for a toggling action (e.g. show/hide password). Null renders no attribute. */
|
|
@@ -165,6 +198,8 @@ declare class SdsInput implements ControlValueAccessor {
|
|
|
165
198
|
protected readonly value: _angular_core.WritableSignal<string>;
|
|
166
199
|
private readonly cvaDisabled;
|
|
167
200
|
protected readonly onBrand: _angular_core.Signal<boolean>;
|
|
201
|
+
protected readonly filled: _angular_core.Signal<boolean>;
|
|
202
|
+
protected readonly pill: _angular_core.Signal<boolean>;
|
|
168
203
|
protected readonly isDisabled: _angular_core.Signal<boolean>;
|
|
169
204
|
protected readonly describedBy: _angular_core.Signal<string | null>;
|
|
170
205
|
protected readonly fieldPadding: _angular_core.Signal<string>;
|
|
@@ -178,7 +213,7 @@ declare class SdsInput implements ControlValueAccessor {
|
|
|
178
213
|
protected onInput(event: Event): void;
|
|
179
214
|
protected clear(): void;
|
|
180
215
|
static ɵfac: _angular_core.ɵɵFactoryDeclaration<SdsInput, never>;
|
|
181
|
-
static ɵcmp: _angular_core.ɵɵComponentDeclaration<SdsInput, "sds-input", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "hint": { "alias": "hint"; "required": false; "isSignal": true; }; "error": { "alias": "error"; "required": false; "isSignal": true; }; "type": { "alias": "type"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "appearance": { "alias": "appearance"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "clearable": { "alias": "clearable"; "required": false; "isSignal": true; }; "leadingIcon": { "alias": "leadingIcon"; "required": false; "isSignal": true; }; "trailingIcon": { "alias": "trailingIcon"; "required": false; "isSignal": true; }; "trailingAction": { "alias": "trailingAction"; "required": false; "isSignal": true; }; "trailingActionLabel": { "alias": "trailingActionLabel"; "required": false; "isSignal": true; }; "trailingActionPressed": { "alias": "trailingActionPressed"; "required": false; "isSignal": true; }; }, { "trailingActionClick": "trailingActionClick"; }, never, never, true, never>;
|
|
216
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<SdsInput, "sds-input", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "hint": { "alias": "hint"; "required": false; "isSignal": true; }; "error": { "alias": "error"; "required": false; "isSignal": true; }; "type": { "alias": "type"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "appearance": { "alias": "appearance"; "required": false; "isSignal": true; }; "shape": { "alias": "shape"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "clearable": { "alias": "clearable"; "required": false; "isSignal": true; }; "clearLabel": { "alias": "clearLabel"; "required": false; "isSignal": true; }; "leadingIcon": { "alias": "leadingIcon"; "required": false; "isSignal": true; }; "trailingIcon": { "alias": "trailingIcon"; "required": false; "isSignal": true; }; "trailingAction": { "alias": "trailingAction"; "required": false; "isSignal": true; }; "trailingActionLabel": { "alias": "trailingActionLabel"; "required": false; "isSignal": true; }; "trailingActionPressed": { "alias": "trailingActionPressed"; "required": false; "isSignal": true; }; }, { "trailingActionClick": "trailingActionClick"; }, never, never, true, never>;
|
|
182
217
|
}
|
|
183
218
|
|
|
184
219
|
type SdsTextareaSize = 'sm' | 'md' | 'lg';
|
|
@@ -263,9 +298,9 @@ declare class SdsToggleSwitch implements ControlValueAccessor {
|
|
|
263
298
|
/** Value emitted/stored when the switch is off. */
|
|
264
299
|
readonly falseValue: _angular_core.InputSignal<unknown>;
|
|
265
300
|
/** Icon shown on the knob when checked. */
|
|
266
|
-
readonly onIcon: _angular_core.InputSignal<"home" | "user-plus" | "hand" | "users" | "building-2" | "package" | "package-plus" | "package-open" | "rotate-ccw" | "bar-chart-3" | "
|
|
301
|
+
readonly onIcon: _angular_core.InputSignal<"search" | "chart-column" | "clipboard-list" | "credit-card" | "external-link" | "languages" | "megaphone" | "monitor" | "store" | "user-round" | "home" | "user-plus" | "hand" | "users" | "bike" | "building-2" | "package" | "package-plus" | "package-open" | "rotate-ccw" | "bar-chart-3" | "log-out" | "panel-left-close" | "panel-left-open" | "panel-left" | "calendar" | "chevron-right" | "chevron-left" | "chevron-down" | "chevrons-left" | "chevrons-right" | "x" | "check" | "alert-circle" | "info" | "copy" | "type" | "tag" | "square" | "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" | "eye" | "eye-off" | "user" | "check-circle" | "arrows-clockwise" | "menu" | "file-text" | "hash" | "map-pin" | "inbox" | "arrow-right" | "refresh-cw" | "loader-circle" | null>;
|
|
267
302
|
/** Icon shown on the knob when unchecked. */
|
|
268
|
-
readonly offIcon: _angular_core.InputSignal<"home" | "user-plus" | "hand" | "users" | "building-2" | "package" | "package-plus" | "package-open" | "rotate-ccw" | "bar-chart-3" | "
|
|
303
|
+
readonly offIcon: _angular_core.InputSignal<"search" | "chart-column" | "clipboard-list" | "credit-card" | "external-link" | "languages" | "megaphone" | "monitor" | "store" | "user-round" | "home" | "user-plus" | "hand" | "users" | "bike" | "building-2" | "package" | "package-plus" | "package-open" | "rotate-ccw" | "bar-chart-3" | "log-out" | "panel-left-close" | "panel-left-open" | "panel-left" | "calendar" | "chevron-right" | "chevron-left" | "chevron-down" | "chevrons-left" | "chevrons-right" | "x" | "check" | "alert-circle" | "info" | "copy" | "type" | "tag" | "square" | "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" | "eye" | "eye-off" | "user" | "check-circle" | "arrows-clockwise" | "menu" | "file-text" | "hash" | "map-pin" | "inbox" | "arrow-right" | "refresh-cw" | "loader-circle" | null>;
|
|
269
304
|
readonly hint: _angular_core.InputSignal<string>;
|
|
270
305
|
readonly error: _angular_core.InputSignal<string>;
|
|
271
306
|
/**
|
|
@@ -1457,30 +1492,61 @@ declare class SidebarStore {
|
|
|
1457
1492
|
static ɵprov: _angular_core.ɵɵInjectableDeclaration<SidebarStore>;
|
|
1458
1493
|
}
|
|
1459
1494
|
|
|
1460
|
-
|
|
1461
|
-
name: string;
|
|
1462
|
-
initials?: string;
|
|
1463
|
-
status?: SdsAvatarStatus;
|
|
1464
|
-
}
|
|
1495
|
+
type SdsTopbarAppearance = 'brand' | 'surface';
|
|
1465
1496
|
/**
|
|
1466
|
-
* Application top bar:
|
|
1467
|
-
*
|
|
1497
|
+
* Application top bar: a logo slot, the app name, and three slots the app fills.
|
|
1498
|
+
*
|
|
1499
|
+
* Two appearances. `brand` is the gradient-and-wave bar an internal tool wants. `surface` is white on
|
|
1500
|
+
* a hairline border, for a bar that has to sit under a customer-facing page without dominating it —
|
|
1501
|
+
* a storefront header is a bar, but it is not a banner. The slots and the layout are identical in
|
|
1502
|
+
* both; only the paint differs, so a consumer app gets the same structure without the brand fill.
|
|
1503
|
+
*
|
|
1504
|
+
* It deliberately owns NO account UI. It used to render the signed-in user and a logout button, which
|
|
1505
|
+
* forced every consumer into one shape — no dropdown, no email, no menu, no busy state, and an
|
|
1506
|
+
* icon-only button whose accessible name the library had to guess a language for. What an app needs
|
|
1507
|
+
* beside its own brand bar differs per app, so the bar supplies the surface and the app supplies the
|
|
1508
|
+
* contents: project them into `[sdsActions]`.
|
|
1509
|
+
*
|
|
1510
|
+
* Slots, left to right: `[sdsLogo]`, `[sdsLead]` (beside the name — a location or workspace picker),
|
|
1511
|
+
* `[sdsCenter]` (the flexible middle — a search field), `[sdsActions]` (the right edge).
|
|
1468
1512
|
*
|
|
1469
1513
|
* @example
|
|
1470
|
-
* <sds-topbar appName="WebApp"
|
|
1514
|
+
* <sds-topbar appName="WebApp">
|
|
1471
1515
|
* <img sdsLogo src="logo.svg" alt="" />
|
|
1516
|
+
* <my-address-picker sdsLead />
|
|
1517
|
+
* <my-search sdsCenter />
|
|
1518
|
+
* <my-account-menu sdsActions />
|
|
1472
1519
|
* </sds-topbar>
|
|
1473
1520
|
*/
|
|
1474
1521
|
declare class SdsTopbar {
|
|
1475
1522
|
protected readonly store: SidebarStore;
|
|
1476
1523
|
readonly appName: _angular_core.InputSignal<string>;
|
|
1477
|
-
|
|
1478
|
-
|
|
1524
|
+
/**
|
|
1525
|
+
* Width of the bar's CONTENTS, as Tailwind width utilities — e.g. `"w-full max-w-7xl"`.
|
|
1526
|
+
*
|
|
1527
|
+
* The coloured band always spans the viewport; this constrains only what sits on it, so the logo and
|
|
1528
|
+
* the actions line up with a page whose own content is centred at the same width. Default is empty,
|
|
1529
|
+
* i.e. contents run edge to edge, which is right for a full-bleed dashboard shell.
|
|
1530
|
+
*
|
|
1531
|
+
* A class string rather than an enum on purpose: apps already state their content width as a Tailwind
|
|
1532
|
+
* utility, and this way the bar is given the SAME string rather than a name that has to be kept in
|
|
1533
|
+
* sync with it.
|
|
1534
|
+
*/
|
|
1535
|
+
readonly contentWidth: _angular_core.InputSignal<string>;
|
|
1479
1536
|
/** Show the mobile hamburger that toggles the sidebar drawer (< lg). */
|
|
1480
1537
|
readonly menuButton: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
1481
|
-
|
|
1538
|
+
/**
|
|
1539
|
+
* Accessible name for the hamburger. Defaults to French so nothing changes for existing consumers,
|
|
1540
|
+
* but any app serving more than one language MUST pass a translated value — an icon-only control's
|
|
1541
|
+
* aria-label is its only name, and a hardcoded one is simply wrong in every other locale.
|
|
1542
|
+
*/
|
|
1543
|
+
readonly menuLabel: _angular_core.InputSignal<string>;
|
|
1544
|
+
/** `brand` (default) paints the gradient and the wave; `surface` is white on a hairline border. */
|
|
1545
|
+
readonly appearance: _angular_core.InputSignal<SdsTopbarAppearance>;
|
|
1546
|
+
protected readonly shellClasses: _angular_core.Signal<"bg-linear-to-r from-brand-800 via-brand-700 to-brand-600 text-white" | "border-b border-border bg-surface text-ink">;
|
|
1547
|
+
protected readonly menuButtonClasses: _angular_core.Signal<"text-white/85 hover:bg-white/10 hover:text-white focus-visible:ring-white/40" | "text-ink-soft hover:bg-muted hover:text-ink focus-visible:ring-brand-500/40">;
|
|
1482
1548
|
static ɵfac: _angular_core.ɵɵFactoryDeclaration<SdsTopbar, never>;
|
|
1483
|
-
static ɵcmp: _angular_core.ɵɵComponentDeclaration<SdsTopbar, "sds-topbar", never, { "appName": { "alias": "appName"; "required": false; "isSignal": true; }; "
|
|
1549
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<SdsTopbar, "sds-topbar", never, { "appName": { "alias": "appName"; "required": false; "isSignal": true; }; "contentWidth": { "alias": "contentWidth"; "required": false; "isSignal": true; }; "menuButton": { "alias": "menuButton"; "required": false; "isSignal": true; }; "menuLabel": { "alias": "menuLabel"; "required": false; "isSignal": true; }; "appearance": { "alias": "appearance"; "required": false; "isSignal": true; }; }, {}, never, ["[sdsLogo]", "[sdsLead]", "[sdsCenter]", "[sdsActions]"], true, never>;
|
|
1484
1550
|
}
|
|
1485
1551
|
|
|
1486
1552
|
/**
|
|
@@ -1515,24 +1581,85 @@ declare class SdsShell {
|
|
|
1515
1581
|
*/
|
|
1516
1582
|
declare class SdsSidebar {
|
|
1517
1583
|
protected readonly store: SidebarStore;
|
|
1584
|
+
/**
|
|
1585
|
+
* Accessible names for the rail's three icon-only controls. French defaults keep existing consumers
|
|
1586
|
+
* unchanged; a multilingual app must pass translated values, since an icon-only button's aria-label
|
|
1587
|
+
* is its only name.
|
|
1588
|
+
*/
|
|
1589
|
+
readonly collapseLabel: _angular_core.InputSignal<string>;
|
|
1590
|
+
readonly expandLabel: _angular_core.InputSignal<string>;
|
|
1591
|
+
readonly closeLabel: _angular_core.InputSignal<string>;
|
|
1518
1592
|
protected readonly collapsed: _angular_core.WritableSignal<boolean>;
|
|
1519
1593
|
protected readonly mobileOpen: _angular_core.WritableSignal<boolean>;
|
|
1520
1594
|
/** Desktop rail width (full vs. collapsed); mobile always uses full width. */
|
|
1521
1595
|
protected readonly railWidth: _angular_core.Signal<"var(--sds-sidebar-w-collapsed)" | "var(--sds-sidebar-w)">;
|
|
1522
1596
|
static ɵfac: _angular_core.ɵɵFactoryDeclaration<SdsSidebar, never>;
|
|
1523
|
-
static ɵcmp: _angular_core.ɵɵComponentDeclaration<SdsSidebar, "sds-sidebar", never, {}, {}, never, ["*", "[sdsFooter]"], true, never>;
|
|
1597
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<SdsSidebar, "sds-sidebar", never, { "collapseLabel": { "alias": "collapseLabel"; "required": false; "isSignal": true; }; "expandLabel": { "alias": "expandLabel"; "required": false; "isSignal": true; }; "closeLabel": { "alias": "closeLabel"; "required": false; "isSignal": true; }; }, {}, never, ["*", "[sdsFooter]"], true, never>;
|
|
1524
1598
|
}
|
|
1525
1599
|
|
|
1526
1600
|
/**
|
|
1527
|
-
* Groups nav items under an optional uppercase section label.
|
|
1528
|
-
*
|
|
1601
|
+
* Groups nav items under an optional uppercase section label.
|
|
1602
|
+
*
|
|
1603
|
+
* Two modes:
|
|
1604
|
+
* - **Section** (default) — a static label over its items. The label is replaced by a divider when
|
|
1605
|
+
* the rail is collapsed.
|
|
1606
|
+
* - **Collapsible** (`[collapsible]`) — the label becomes a button that expands and collapses the
|
|
1607
|
+
* group. Set `[basePath]` and the group opens itself whenever the active route is inside it, so a
|
|
1608
|
+
* deep link or a browser Back lands with the right section already open instead of the person
|
|
1609
|
+
* having to find and re-open it.
|
|
1610
|
+
*
|
|
1611
|
+
* Collapsible mode exists because a flat rail stops scaling somewhere around a dozen destinations,
|
|
1612
|
+
* and the alternative — showing every child of every section at once — buries the ones in use.
|
|
1613
|
+
*
|
|
1614
|
+
* On the collapsed desktop rail there is nowhere to put a header, so a collapsible group renders
|
|
1615
|
+
* exactly like a section: divider, children visible. Hiding them there would leave the rail with
|
|
1616
|
+
* unreachable destinations and no affordance to reveal them.
|
|
1529
1617
|
*/
|
|
1530
1618
|
declare class SdsNavGroup {
|
|
1531
1619
|
private readonly store;
|
|
1620
|
+
private readonly router;
|
|
1532
1621
|
readonly label: _angular_core.InputSignal<string>;
|
|
1622
|
+
/** Turn the label into an expand/collapse control. */
|
|
1623
|
+
readonly collapsible: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
1624
|
+
/** Icon for a collapsible header, so it reads at the same weight as the items it sits among. */
|
|
1625
|
+
readonly icon: _angular_core.InputSignal<"search" | "chart-column" | "clipboard-list" | "credit-card" | "external-link" | "languages" | "megaphone" | "monitor" | "store" | "user-round" | "home" | "user-plus" | "hand" | "users" | "bike" | "building-2" | "package" | "package-plus" | "package-open" | "rotate-ccw" | "bar-chart-3" | "log-out" | "panel-left-close" | "panel-left-open" | "panel-left" | "calendar" | "chevron-right" | "chevron-left" | "chevron-down" | "chevrons-left" | "chevrons-right" | "x" | "check" | "alert-circle" | "info" | "copy" | "type" | "tag" | "square" | "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" | "eye" | "eye-off" | "user" | "check-circle" | "arrows-clockwise" | "menu" | "file-text" | "hash" | "map-pin" | "inbox" | "arrow-right" | "refresh-cw" | "loader-circle" | null>;
|
|
1626
|
+
/**
|
|
1627
|
+
* URL prefix owned by this group, e.g. `/payments`. While the active route starts with it the
|
|
1628
|
+
* group counts as active and opens itself — unless the person has explicitly toggled it since.
|
|
1629
|
+
*/
|
|
1630
|
+
readonly basePath: _angular_core.InputSignal<string | null>;
|
|
1631
|
+
/** Emits the new state on every manual toggle. Not emitted for route-driven auto-expansion. */
|
|
1632
|
+
readonly expandedChange: _angular_core.OutputEmitterRef<boolean>;
|
|
1633
|
+
/** Explicit user choice; null means "follow the route". */
|
|
1634
|
+
private readonly manual;
|
|
1635
|
+
private readonly url;
|
|
1636
|
+
/** True while the active route lives inside this group. */
|
|
1637
|
+
protected readonly routeActive: _angular_core.Signal<boolean>;
|
|
1638
|
+
protected readonly expanded: _angular_core.Signal<boolean>;
|
|
1533
1639
|
protected readonly collapsed: _angular_core.WritableSignal<boolean>;
|
|
1640
|
+
/**
|
|
1641
|
+
* A plain section always shows its items — they carry their own icons, so they survive the collapsed
|
|
1642
|
+
* rail. A collapsible group hides its children there instead: its children are sub-destinations and
|
|
1643
|
+
* typically have no icon, which on an icon-only rail is a row with nothing in it.
|
|
1644
|
+
*/
|
|
1645
|
+
protected readonly childrenVisible: _angular_core.Signal<boolean>;
|
|
1646
|
+
/**
|
|
1647
|
+
* One binding rather than `[class]` alongside `[class.hidden]` — mixing a whole-list binding with a
|
|
1648
|
+
* single-class toggle on the same element depends on Angular's styling precedence to resolve, which
|
|
1649
|
+
* is a subtlety no template should rest on.
|
|
1650
|
+
*
|
|
1651
|
+
* The indent rule appears only on an expanded collapsible group on the full-width rail: it is what
|
|
1652
|
+
* shows the children belong to the header above them.
|
|
1653
|
+
*/
|
|
1654
|
+
protected readonly childrenClass: _angular_core.Signal<string>;
|
|
1655
|
+
/**
|
|
1656
|
+
* On the collapsed rail there is nothing to expand into, so the toggle always reports "opening" —
|
|
1657
|
+
* the app's handler takes that as the cue to navigate into the section, which is the only useful
|
|
1658
|
+
* meaning the control can have there.
|
|
1659
|
+
*/
|
|
1660
|
+
protected toggle(): void;
|
|
1534
1661
|
static ɵfac: _angular_core.ɵɵFactoryDeclaration<SdsNavGroup, never>;
|
|
1535
|
-
static ɵcmp: _angular_core.ɵɵComponentDeclaration<SdsNavGroup, "sds-nav-group", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
|
|
1662
|
+
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>;
|
|
1536
1663
|
}
|
|
1537
1664
|
|
|
1538
1665
|
/**
|
|
@@ -1547,7 +1674,7 @@ declare class SdsNavGroup {
|
|
|
1547
1674
|
*/
|
|
1548
1675
|
declare class SdsNavItem {
|
|
1549
1676
|
protected readonly store: SidebarStore;
|
|
1550
|
-
readonly icon: _angular_core.InputSignal<"home" | "user-plus" | "hand" | "users" | "building-2" | "package" | "package-plus" | "package-open" | "rotate-ccw" | "bar-chart-3" | "
|
|
1677
|
+
readonly icon: _angular_core.InputSignal<"search" | "chart-column" | "clipboard-list" | "credit-card" | "external-link" | "languages" | "megaphone" | "monitor" | "store" | "user-round" | "home" | "user-plus" | "hand" | "users" | "bike" | "building-2" | "package" | "package-plus" | "package-open" | "rotate-ccw" | "bar-chart-3" | "log-out" | "panel-left-close" | "panel-left-open" | "panel-left" | "calendar" | "chevron-right" | "chevron-left" | "chevron-down" | "chevrons-left" | "chevrons-right" | "x" | "check" | "alert-circle" | "info" | "copy" | "type" | "tag" | "square" | "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" | "eye" | "eye-off" | "user" | "check-circle" | "arrows-clockwise" | "menu" | "file-text" | "hash" | "map-pin" | "inbox" | "arrow-right" | "refresh-cw" | "loader-circle" | null>;
|
|
1551
1678
|
readonly label: _angular_core.InputSignal<string>;
|
|
1552
1679
|
/** Router link target; when null, the item behaves as a button. */
|
|
1553
1680
|
readonly link: _angular_core.InputSignal<string | unknown[] | null>;
|
|
@@ -1562,4 +1689,4 @@ declare class SdsNavItem {
|
|
|
1562
1689
|
}
|
|
1563
1690
|
|
|
1564
1691
|
export { SDS_ICONS, SDS_PHONE_COUNTRIES, SdsAccordion, SdsAccordionContent, SdsAccordionHeader, SdsAccordionPanel, SdsAccordionStore, SdsAvatar, SdsBadge, SdsButton, SdsCalendar, SdsCard, SdsCheckbox, SdsDatePicker, SdsIcon, SdsInput, SdsMultiSelect, SdsNavGroup, SdsNavItem, SdsPaginator, SdsPhoneInput, SdsSelect, SdsShell, SdsSidebar, SdsTab, SdsTabList, SdsTabPanel, SdsTabPanels, SdsTable, SdsTableCell, SdsTableRowExpansion, SdsTabs, SdsTabsStore, SdsTextarea, SdsToggleSwitch, SdsTopbar, SidebarStore, addDays, addMonths, addMonthsKeepDay, formatDdMmYyyy, isOutOfRange, isSameDay, isoDay, sdsFormatNational, sdsMatchDialCode, sdsNormalizeSignificant, startOfDay, startOfMonth };
|
|
1565
|
-
export type { SdsAccordionActive, SdsAccordionValue, SdsAvatarStatus, SdsBadgeSize, SdsBadgeVariant, SdsButtonSize, SdsButtonVariant, SdsCardVariant, SdsCheckboxSize, SdsDatePickerSize, SdsIconName, SdsIconSize, SdsInputAppearance, SdsInputSize, SdsInputType, SdsMultiSelectDisplay, SdsMultiSelectSize, SdsPaginatorSize, SdsPaginatorState, SdsPhoneCountry, SdsPhoneInputSize, SdsPhoneValue, SdsSelectSize, SdsSortOrder, SdsTabValue, SdsTableCellContext, SdsTableColumn, SdsTableLazyEvent, SdsTableRowExpansionContext, SdsTableSize, SdsTableSortEvent, SdsTextareaResize, SdsTextareaSize, SdsToggleSwitchSize,
|
|
1692
|
+
export type { SdsAccordionActive, SdsAccordionValue, SdsAvatarStatus, SdsBadgeSize, SdsBadgeVariant, SdsButtonSize, SdsButtonVariant, SdsCardVariant, SdsCheckboxSize, SdsDatePickerSize, SdsIconName, SdsIconSize, SdsInputAppearance, SdsInputShape, SdsInputSize, SdsInputType, SdsMultiSelectDisplay, SdsMultiSelectSize, SdsPaginatorSize, SdsPaginatorState, SdsPhoneCountry, SdsPhoneInputSize, SdsPhoneValue, SdsSelectSize, SdsSortOrder, SdsTabValue, SdsTableCellContext, SdsTableColumn, SdsTableLazyEvent, SdsTableRowExpansionContext, SdsTableSize, SdsTableSortEvent, SdsTextareaResize, SdsTextareaSize, SdsToggleSwitchSize, SdsTopbarAppearance };
|