@besaitech/ng-design-system 0.0.26 → 0.0.32
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
|
@@ -23,6 +23,7 @@ declare const SDS_ICONS: {
|
|
|
23
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\"/>";
|
|
24
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>";
|
|
25
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\"/>";
|
|
26
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\"/>";
|
|
27
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\"/>";
|
|
28
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\"/>";
|
|
@@ -92,7 +93,7 @@ type SdsIconSize = 'sm' | 'md' | 'lg' | 'xl';
|
|
|
92
93
|
declare class SdsIcon {
|
|
93
94
|
private readonly sanitizer;
|
|
94
95
|
/** Icon identifier from the registry. */
|
|
95
|
-
readonly name: _angular_core.InputSignal<"chart-column" | "clipboard-list" | "credit-card" | "external-link" | "languages" | "megaphone" | "monitor" | "store" | "user-round" | "home" | "user-plus" | "hand" | "users" | "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" | "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">;
|
|
96
|
+
readonly name: _angular_core.InputSignal<"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" | "search" | "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">;
|
|
96
97
|
/** Square size: a pixel number, a numeric string, or a keyword (sm·md·lg·xl). */
|
|
97
98
|
readonly size: _angular_core.InputSignalWithTransform<number, string | number>;
|
|
98
99
|
/** Stroke width of the line icon. */
|
|
@@ -104,6 +105,7 @@ declare class SdsIcon {
|
|
|
104
105
|
|
|
105
106
|
type SdsButtonVariant = 'primary' | 'secondary' | 'tertiary' | 'ghost' | 'danger';
|
|
106
107
|
type SdsButtonSize = 'sm' | 'md' | 'lg';
|
|
108
|
+
type SdsButtonShape = 'control' | 'pill';
|
|
107
109
|
/**
|
|
108
110
|
* Brand button. Project an <sds-icon sdsIconLeading/> or <sds-icon sdsIconTrailing/>
|
|
109
111
|
* for icons, or set [iconOnly]="true" for a square icon button.
|
|
@@ -114,6 +116,13 @@ type SdsButtonSize = 'sm' | 'md' | 'lg';
|
|
|
114
116
|
declare class SdsButton {
|
|
115
117
|
readonly variant: _angular_core.InputSignal<SdsButtonVariant>;
|
|
116
118
|
readonly size: _angular_core.InputSignal<SdsButtonSize>;
|
|
119
|
+
/**
|
|
120
|
+
* `pill` fully rounds the button. It is the shape a consumer-facing surface tends to want for its
|
|
121
|
+
* primary action, and the same axis {@link SdsInput} exposes — a design system with pill inputs and
|
|
122
|
+
* no pill buttons would force any app that wants one back onto hand-rolled classes for its single
|
|
123
|
+
* most important control.
|
|
124
|
+
*/
|
|
125
|
+
readonly shape: _angular_core.InputSignal<SdsButtonShape>;
|
|
117
126
|
readonly type: _angular_core.InputSignal<"button" | "submit" | "reset">;
|
|
118
127
|
readonly disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
119
128
|
readonly loading: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
@@ -128,11 +137,12 @@ declare class SdsButton {
|
|
|
128
137
|
protected readonly hostClass: _angular_core.Signal<"flex w-full" | "inline-flex">;
|
|
129
138
|
protected readonly classes: _angular_core.Signal<string>;
|
|
130
139
|
static ɵfac: _angular_core.ɵɵFactoryDeclaration<SdsButton, never>;
|
|
131
|
-
static ɵcmp: _angular_core.ɵɵComponentDeclaration<SdsButton, "sds-button", never, { "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "type": { "alias": "type"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "block": { "alias": "block"; "required": false; "isSignal": true; }; "iconOnly": { "alias": "iconOnly"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; }, {}, never, ["[sdsIconLeading]", "*", "[sdsIconTrailing]"], true, never>;
|
|
140
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<SdsButton, "sds-button", never, { "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "shape": { "alias": "shape"; "required": false; "isSignal": true; }; "type": { "alias": "type"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "block": { "alias": "block"; "required": false; "isSignal": true; }; "iconOnly": { "alias": "iconOnly"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; }, {}, never, ["[sdsIconLeading]", "*", "[sdsIconTrailing]"], true, never>;
|
|
132
141
|
}
|
|
133
142
|
|
|
134
143
|
type SdsInputSize = 'sm' | 'md' | 'lg';
|
|
135
|
-
type SdsInputAppearance = 'default' | 'on-brand';
|
|
144
|
+
type SdsInputAppearance = 'default' | 'filled' | 'on-brand';
|
|
145
|
+
type SdsInputShape = 'control' | 'pill';
|
|
136
146
|
type SdsInputType = 'text' | 'email' | 'password' | 'number' | 'tel' | 'search' | 'url';
|
|
137
147
|
/**
|
|
138
148
|
* Text input with label, hint/error, optional leading/trailing icons and a
|
|
@@ -148,13 +158,35 @@ declare class SdsInput implements ControlValueAccessor {
|
|
|
148
158
|
readonly placeholder: _angular_core.InputSignal<string>;
|
|
149
159
|
readonly hint: _angular_core.InputSignal<string>;
|
|
150
160
|
readonly error: _angular_core.InputSignal<string>;
|
|
161
|
+
/**
|
|
162
|
+
* `search` is the semantically right type for a search field, and the template strips the WebKit
|
|
163
|
+
* search decorations that come with it. Without that, a `search` field with {@link clearable} draws
|
|
164
|
+
* TWO clear buttons — the component's and the browser's own, which no stylesheet can reach and which
|
|
165
|
+
* sits outside the field's own padding.
|
|
166
|
+
*/
|
|
151
167
|
readonly type: _angular_core.InputSignal<SdsInputType>;
|
|
152
168
|
readonly size: _angular_core.InputSignal<SdsInputSize>;
|
|
169
|
+
/**
|
|
170
|
+
* `filled` is a borderless field on a muted ground, for a search box that has to sit inside a page
|
|
171
|
+
* rather than announce itself as a form control — a storefront's search pill above all.
|
|
172
|
+
* `on-brand` is the same field tuned for a dark surface.
|
|
173
|
+
*/
|
|
153
174
|
readonly appearance: _angular_core.InputSignal<SdsInputAppearance>;
|
|
175
|
+
/**
|
|
176
|
+
* `pill` fully rounds the field. Separate from {@link appearance} on purpose: a bordered pill and a
|
|
177
|
+
* filled box are both real designs, and folding the two axes into one enum would forbid half of them.
|
|
178
|
+
*/
|
|
179
|
+
readonly shape: _angular_core.InputSignal<SdsInputShape>;
|
|
154
180
|
readonly disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
155
181
|
readonly clearable: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
156
|
-
|
|
157
|
-
|
|
182
|
+
/**
|
|
183
|
+
* Accessible name for the clear button. French default so existing consumers are unchanged, but an
|
|
184
|
+
* app serving more than one language MUST translate it — it is an icon-only control, so this string
|
|
185
|
+
* is its only name.
|
|
186
|
+
*/
|
|
187
|
+
readonly clearLabel: _angular_core.InputSignal<string>;
|
|
188
|
+
readonly leadingIcon: _angular_core.InputSignal<"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" | "search" | "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>;
|
|
189
|
+
readonly trailingIcon: _angular_core.InputSignal<"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" | "search" | "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>;
|
|
158
190
|
/**
|
|
159
191
|
* A CLICKABLE trailing icon, for the affordances that belong to the field itself — password reveal
|
|
160
192
|
* above all. Distinct from {@link trailingIcon}, which is decorative and explicitly
|
|
@@ -164,7 +196,7 @@ declare class SdsInput implements ControlValueAccessor {
|
|
|
164
196
|
* Always pair it with {@link trailingActionLabel} — an icon-only button with no accessible name is
|
|
165
197
|
* unusable by a screen reader. For a toggle, also bind {@link trailingActionPressed}.
|
|
166
198
|
*/
|
|
167
|
-
readonly trailingAction: _angular_core.InputSignal<"chart-column" | "clipboard-list" | "credit-card" | "external-link" | "languages" | "megaphone" | "monitor" | "store" | "user-round" | "home" | "user-plus" | "hand" | "users" | "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" | "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>;
|
|
199
|
+
readonly trailingAction: _angular_core.InputSignal<"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" | "search" | "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>;
|
|
168
200
|
/** Accessible name for {@link trailingAction}. Translate it in the consuming app. */
|
|
169
201
|
readonly trailingActionLabel: _angular_core.InputSignal<string>;
|
|
170
202
|
/** `aria-pressed` for a toggling action (e.g. show/hide password). Null renders no attribute. */
|
|
@@ -174,6 +206,8 @@ declare class SdsInput implements ControlValueAccessor {
|
|
|
174
206
|
protected readonly value: _angular_core.WritableSignal<string>;
|
|
175
207
|
private readonly cvaDisabled;
|
|
176
208
|
protected readonly onBrand: _angular_core.Signal<boolean>;
|
|
209
|
+
protected readonly filled: _angular_core.Signal<boolean>;
|
|
210
|
+
protected readonly pill: _angular_core.Signal<boolean>;
|
|
177
211
|
protected readonly isDisabled: _angular_core.Signal<boolean>;
|
|
178
212
|
protected readonly describedBy: _angular_core.Signal<string | null>;
|
|
179
213
|
protected readonly fieldPadding: _angular_core.Signal<string>;
|
|
@@ -187,7 +221,7 @@ declare class SdsInput implements ControlValueAccessor {
|
|
|
187
221
|
protected onInput(event: Event): void;
|
|
188
222
|
protected clear(): void;
|
|
189
223
|
static ɵfac: _angular_core.ɵɵFactoryDeclaration<SdsInput, never>;
|
|
190
|
-
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>;
|
|
224
|
+
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>;
|
|
191
225
|
}
|
|
192
226
|
|
|
193
227
|
type SdsTextareaSize = 'sm' | 'md' | 'lg';
|
|
@@ -272,9 +306,9 @@ declare class SdsToggleSwitch implements ControlValueAccessor {
|
|
|
272
306
|
/** Value emitted/stored when the switch is off. */
|
|
273
307
|
readonly falseValue: _angular_core.InputSignal<unknown>;
|
|
274
308
|
/** Icon shown on the knob when checked. */
|
|
275
|
-
readonly onIcon: _angular_core.InputSignal<"chart-column" | "clipboard-list" | "credit-card" | "external-link" | "languages" | "megaphone" | "monitor" | "store" | "user-round" | "home" | "user-plus" | "hand" | "users" | "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" | "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>;
|
|
309
|
+
readonly onIcon: _angular_core.InputSignal<"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" | "search" | "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>;
|
|
276
310
|
/** Icon shown on the knob when unchecked. */
|
|
277
|
-
readonly offIcon: _angular_core.InputSignal<"chart-column" | "clipboard-list" | "credit-card" | "external-link" | "languages" | "megaphone" | "monitor" | "store" | "user-round" | "home" | "user-plus" | "hand" | "users" | "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" | "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>;
|
|
311
|
+
readonly offIcon: _angular_core.InputSignal<"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" | "search" | "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>;
|
|
278
312
|
readonly hint: _angular_core.InputSignal<string>;
|
|
279
313
|
readonly error: _angular_core.InputSignal<string>;
|
|
280
314
|
/**
|
|
@@ -1596,7 +1630,7 @@ declare class SdsNavGroup {
|
|
|
1596
1630
|
/** Turn the label into an expand/collapse control. */
|
|
1597
1631
|
readonly collapsible: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
1598
1632
|
/** Icon for a collapsible header, so it reads at the same weight as the items it sits among. */
|
|
1599
|
-
readonly icon: _angular_core.InputSignal<"chart-column" | "clipboard-list" | "credit-card" | "external-link" | "languages" | "megaphone" | "monitor" | "store" | "user-round" | "home" | "user-plus" | "hand" | "users" | "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" | "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>;
|
|
1633
|
+
readonly icon: _angular_core.InputSignal<"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" | "search" | "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>;
|
|
1600
1634
|
/**
|
|
1601
1635
|
* URL prefix owned by this group, e.g. `/payments`. While the active route starts with it the
|
|
1602
1636
|
* group counts as active and opens itself — unless the person has explicitly toggled it since.
|
|
@@ -1648,7 +1682,7 @@ declare class SdsNavGroup {
|
|
|
1648
1682
|
*/
|
|
1649
1683
|
declare class SdsNavItem {
|
|
1650
1684
|
protected readonly store: SidebarStore;
|
|
1651
|
-
readonly icon: _angular_core.InputSignal<"chart-column" | "clipboard-list" | "credit-card" | "external-link" | "languages" | "megaphone" | "monitor" | "store" | "user-round" | "home" | "user-plus" | "hand" | "users" | "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" | "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>;
|
|
1685
|
+
readonly icon: _angular_core.InputSignal<"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" | "search" | "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>;
|
|
1652
1686
|
readonly label: _angular_core.InputSignal<string>;
|
|
1653
1687
|
/** Router link target; when null, the item behaves as a button. */
|
|
1654
1688
|
readonly link: _angular_core.InputSignal<string | unknown[] | null>;
|
|
@@ -1663,4 +1697,4 @@ declare class SdsNavItem {
|
|
|
1663
1697
|
}
|
|
1664
1698
|
|
|
1665
1699
|
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 };
|
|
1666
|
-
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, SdsTopbarAppearance };
|
|
1700
|
+
export type { SdsAccordionActive, SdsAccordionValue, SdsAvatarStatus, SdsBadgeSize, SdsBadgeVariant, SdsButtonShape, 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 };
|