@besaitech/ng-design-system 0.0.46 → 0.0.48
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
|
@@ -104,7 +104,7 @@ type SdsIconSize = 'sm' | 'md' | 'lg' | 'xl';
|
|
|
104
104
|
declare class SdsIcon {
|
|
105
105
|
private readonly sanitizer;
|
|
106
106
|
/** Icon identifier from the registry. */
|
|
107
|
-
readonly name: _angular_core.InputSignal<"
|
|
107
|
+
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" | "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" | "bug" | "scroll-text" | "moon" | "sun" | "search-x" | "command" | "sparkles">;
|
|
108
108
|
/** Square size: a pixel number, a numeric string, or a keyword (sm·md·lg·xl). */
|
|
109
109
|
readonly size: _angular_core.InputSignalWithTransform<number, string | number>;
|
|
110
110
|
/** Stroke width of the line icon. */
|
|
@@ -134,7 +134,7 @@ declare class SdsButton {
|
|
|
134
134
|
* most important control.
|
|
135
135
|
*/
|
|
136
136
|
readonly shape: _angular_core.InputSignal<SdsButtonShape>;
|
|
137
|
-
readonly type: _angular_core.InputSignal<"
|
|
137
|
+
readonly type: _angular_core.InputSignal<"button" | "submit" | "reset">;
|
|
138
138
|
readonly disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
139
139
|
readonly loading: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
140
140
|
/** Full-width button. */
|
|
@@ -196,8 +196,8 @@ declare class SdsInput implements ControlValueAccessor {
|
|
|
196
196
|
* is its only name.
|
|
197
197
|
*/
|
|
198
198
|
readonly clearLabel: _angular_core.InputSignal<string>;
|
|
199
|
-
readonly leadingIcon: _angular_core.InputSignal<"
|
|
200
|
-
readonly trailingIcon: _angular_core.InputSignal<"
|
|
199
|
+
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" | "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" | "bug" | "scroll-text" | "moon" | "sun" | "search-x" | "command" | "sparkles" | null>;
|
|
200
|
+
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" | "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" | "bug" | "scroll-text" | "moon" | "sun" | "search-x" | "command" | "sparkles" | null>;
|
|
201
201
|
/**
|
|
202
202
|
* A CLICKABLE trailing icon, for the affordances that belong to the field itself — password reveal
|
|
203
203
|
* above all. Distinct from {@link trailingIcon}, which is decorative and explicitly
|
|
@@ -207,7 +207,7 @@ declare class SdsInput implements ControlValueAccessor {
|
|
|
207
207
|
* Always pair it with {@link trailingActionLabel} — an icon-only button with no accessible name is
|
|
208
208
|
* unusable by a screen reader. For a toggle, also bind {@link trailingActionPressed}.
|
|
209
209
|
*/
|
|
210
|
-
readonly trailingAction: _angular_core.InputSignal<"
|
|
210
|
+
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" | "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" | "bug" | "scroll-text" | "moon" | "sun" | "search-x" | "command" | "sparkles" | null>;
|
|
211
211
|
/** Accessible name for {@link trailingAction}. Translate it in the consuming app. */
|
|
212
212
|
readonly trailingActionLabel: _angular_core.InputSignal<string>;
|
|
213
213
|
/** `aria-pressed` for a toggling action (e.g. show/hide password). Null renders no attribute. */
|
|
@@ -302,9 +302,9 @@ declare class SdsInputNumber implements ControlValueAccessor {
|
|
|
302
302
|
readonly showButtons: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
303
303
|
readonly buttonLayout: _angular_core.InputSignal<SdsInputNumberButtonLayout>;
|
|
304
304
|
/** Override the increment button icon (defaults: chevron-up when stacked, plus otherwise). */
|
|
305
|
-
readonly incrementIcon: _angular_core.InputSignal<"
|
|
305
|
+
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" | "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" | "bug" | "scroll-text" | "moon" | "sun" | "search-x" | "command" | "sparkles" | null>;
|
|
306
306
|
/** Override the decrement button icon (defaults: chevron-down when stacked, minus otherwise). */
|
|
307
|
-
readonly decrementIcon: _angular_core.InputSignal<"
|
|
307
|
+
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" | "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" | "bug" | "scroll-text" | "moon" | "sun" | "search-x" | "command" | "sparkles" | null>;
|
|
308
308
|
/** Allow an empty (null) value. When false, blurring an empty field falls back to {@link min} or 0. */
|
|
309
309
|
readonly allowEmpty: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
310
310
|
readonly clearable: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
@@ -321,8 +321,8 @@ declare class SdsInputNumber implements ControlValueAccessor {
|
|
|
321
321
|
protected readonly isDisabled: _angular_core.Signal<boolean>;
|
|
322
322
|
protected readonly describedBy: _angular_core.Signal<string | null>;
|
|
323
323
|
protected readonly clearVisible: _angular_core.Signal<boolean>;
|
|
324
|
-
protected readonly incrementIconName: _angular_core.Signal<"
|
|
325
|
-
protected readonly decrementIconName: _angular_core.Signal<"
|
|
324
|
+
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" | "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" | "bug" | "scroll-text" | "moon" | "sun" | "search-x" | "command" | "sparkles">;
|
|
325
|
+
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" | "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" | "bug" | "scroll-text" | "moon" | "sun" | "search-x" | "command" | "sparkles">;
|
|
326
326
|
protected readonly canIncrement: _angular_core.Signal<boolean>;
|
|
327
327
|
protected readonly canDecrement: _angular_core.Signal<boolean>;
|
|
328
328
|
/** Locale grouping/decimal separators, derived from Intl so parsing matches formatting. */
|
|
@@ -586,9 +586,9 @@ declare class SdsToggleSwitch implements ControlValueAccessor {
|
|
|
586
586
|
/** Value emitted/stored when the switch is off. */
|
|
587
587
|
readonly falseValue: _angular_core.InputSignal<unknown>;
|
|
588
588
|
/** Icon shown on the knob when checked. */
|
|
589
|
-
readonly onIcon: _angular_core.InputSignal<"
|
|
589
|
+
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" | "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" | "bug" | "scroll-text" | "moon" | "sun" | "search-x" | "command" | "sparkles" | null>;
|
|
590
590
|
/** Icon shown on the knob when unchecked. */
|
|
591
|
-
readonly offIcon: _angular_core.InputSignal<"
|
|
591
|
+
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" | "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" | "bug" | "scroll-text" | "moon" | "sun" | "search-x" | "command" | "sparkles" | null>;
|
|
592
592
|
readonly hint: _angular_core.InputSignal<string>;
|
|
593
593
|
readonly error: _angular_core.InputSignal<string>;
|
|
594
594
|
/**
|
|
@@ -2321,7 +2321,7 @@ declare class SdsTopbar {
|
|
|
2321
2321
|
/** Add slow-drifting brand-tinted blobs behind the bar (opt-in; pairs with `glass`/`surface`). */
|
|
2322
2322
|
readonly decorations: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
2323
2323
|
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-linear-to-r from-surface/85 via-surface/80 to-brand-100/70 text-ink backdrop-blur-xl" | "border-b border-border bg-surface text-ink">;
|
|
2324
|
-
protected readonly menuButtonClasses: _angular_core.Signal<"text-
|
|
2324
|
+
protected readonly menuButtonClasses: _angular_core.Signal<"text-ink-soft hover:bg-muted hover:text-ink focus-visible:ring-brand-500/40" | "text-white/85 hover:bg-white/10 hover:text-white focus-visible:ring-white/40">;
|
|
2325
2325
|
static ɵfac: _angular_core.ɵɵFactoryDeclaration<SdsTopbar, never>;
|
|
2326
2326
|
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; }; "decorations": { "alias": "decorations"; "required": false; "isSignal": true; }; }, {}, never, ["[sdsLogo]", "[sdsLead]", "[sdsCenter]", "[sdsActions]"], true, never>;
|
|
2327
2327
|
}
|
|
@@ -2438,7 +2438,7 @@ declare class SdsNavGroup {
|
|
|
2438
2438
|
/** Turn the label into an expand/collapse control. */
|
|
2439
2439
|
readonly collapsible: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
2440
2440
|
/** Icon for a collapsible header, so it reads at the same weight as the items it sits among. */
|
|
2441
|
-
readonly icon: _angular_core.InputSignal<"
|
|
2441
|
+
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" | "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" | "bug" | "scroll-text" | "moon" | "sun" | "search-x" | "command" | "sparkles" | null>;
|
|
2442
2442
|
/**
|
|
2443
2443
|
* URL prefix owned by this group, e.g. `/payments`. While the active route starts with it the
|
|
2444
2444
|
* group counts as active and opens itself — unless the person has explicitly toggled it since.
|
|
@@ -2501,7 +2501,7 @@ declare class SdsNavGroup {
|
|
|
2501
2501
|
*/
|
|
2502
2502
|
declare class SdsNavItem {
|
|
2503
2503
|
protected readonly store: SidebarStore;
|
|
2504
|
-
readonly icon: _angular_core.InputSignal<"
|
|
2504
|
+
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" | "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" | "bug" | "scroll-text" | "moon" | "sun" | "search-x" | "command" | "sparkles" | null>;
|
|
2505
2505
|
readonly label: _angular_core.InputSignal<string>;
|
|
2506
2506
|
/** Router link target; when null, the item behaves as a button. */
|
|
2507
2507
|
readonly link: _angular_core.InputSignal<string | unknown[] | null>;
|
|
@@ -2577,37 +2577,53 @@ declare class SdsUserMenu {
|
|
|
2577
2577
|
protected readonly headerAvatarBg: _angular_core.Signal<string>;
|
|
2578
2578
|
protected readonly triggerClass: _angular_core.Signal<"hover:bg-white/10 focus-visible:ring-white/40" | "hover:bg-muted focus-visible:ring-brand-500/40">;
|
|
2579
2579
|
protected readonly nameClass: _angular_core.Signal<"text-white" | "text-ink">;
|
|
2580
|
-
protected readonly emailClass: _angular_core.Signal<"text-
|
|
2581
|
-
protected readonly chevronClass: _angular_core.Signal<"text-
|
|
2580
|
+
protected readonly emailClass: _angular_core.Signal<"text-ink-faint" | "text-white/70">;
|
|
2581
|
+
protected readonly chevronClass: _angular_core.Signal<"text-ink-faint" | "text-white/70">;
|
|
2582
2582
|
static ɵfac: _angular_core.ɵɵFactoryDeclaration<SdsUserMenu, never>;
|
|
2583
2583
|
static ɵcmp: _angular_core.ɵɵComponentDeclaration<SdsUserMenu, "sds-user-menu", never, { "name": { "alias": "name"; "required": false; "isSignal": true; }; "email": { "alias": "email"; "required": false; "isSignal": true; }; "initials": { "alias": "initials"; "required": false; "isSignal": true; }; "src": { "alias": "src"; "required": false; "isSignal": true; }; "status": { "alias": "status"; "required": false; "isSignal": true; }; "appearance": { "alias": "appearance"; "required": false; "isSignal": true; }; "align": { "alias": "align"; "required": false; "isSignal": true; }; "showDetails": { "alias": "showDetails"; "required": false; "isSignal": true; }; "avatarSize": { "alias": "avatarSize"; "required": false; "isSignal": true; }; "avatarBgClass": { "alias": "avatarBgClass"; "required": false; "isSignal": true; }; "menuLabel": { "alias": "menuLabel"; "required": false; "isSignal": true; }; }, { "openChange": "openChange"; }, never, ["*"], true, never>;
|
|
2584
2584
|
}
|
|
2585
2585
|
|
|
2586
2586
|
type SdsMenuItemTone = 'default' | 'danger';
|
|
2587
2587
|
/**
|
|
2588
|
-
* A single row inside a menu surface (the {@link SdsUserMenu} dropdown, or any custom popover). Renders
|
|
2589
|
-
*
|
|
2590
|
-
*
|
|
2591
|
-
*
|
|
2588
|
+
* A single row inside a menu surface (the {@link SdsUserMenu} dropdown, or any custom popover). Renders,
|
|
2589
|
+
* in order of precedence: a plain anchor when [href] is set (an EXTERNAL or cross-origin URL), a
|
|
2590
|
+
* Router anchor when [link] is set (an in-app route), or a button otherwise. It always emits
|
|
2591
|
+
* {@link select} on activation. The parent menu closes itself when an item is activated, so an item
|
|
2592
|
+
* never has to reach back into the menu.
|
|
2592
2593
|
*
|
|
2593
2594
|
* `tone="danger"` paints a destructive action (sign out, delete). Trailing content (a shortcut hint, a
|
|
2594
2595
|
* count) projects into the default slot after the label.
|
|
2595
2596
|
*
|
|
2596
2597
|
* @example
|
|
2597
|
-
* <sds-menu-item icon="user" label="Profil" link="/profile" />
|
|
2598
|
+
* <sds-menu-item icon="user" label="Profil" link="/profile" /> <!-- in-app route -->
|
|
2599
|
+
* <sds-menu-item icon="external-link" label="Site public" href="https://…" target="_blank" />
|
|
2598
2600
|
* <sds-menu-item icon="log-out" label="Se déconnecter" tone="danger" (select)="signOut()" />
|
|
2599
2601
|
*/
|
|
2600
2602
|
declare class SdsMenuItem {
|
|
2601
|
-
readonly icon: _angular_core.InputSignal<"
|
|
2603
|
+
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" | "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" | "bug" | "scroll-text" | "moon" | "sun" | "search-x" | "command" | "sparkles" | null>;
|
|
2602
2604
|
readonly label: _angular_core.InputSignal<string>;
|
|
2603
|
-
/** Router link target; when null (default) the item
|
|
2605
|
+
/** Router link target for an in-app route; when null (default) the item is not a Router link. */
|
|
2604
2606
|
readonly link: _angular_core.InputSignal<string | unknown[] | null>;
|
|
2607
|
+
/**
|
|
2608
|
+
* External / cross-origin URL. When set, the item renders a plain `<a [href]>` (NOT a Router link),
|
|
2609
|
+
* so it works for another app's origin. Takes precedence over {@link link}.
|
|
2610
|
+
*/
|
|
2611
|
+
readonly href: _angular_core.InputSignal<string | null>;
|
|
2612
|
+
/** Anchor target for {@link href}, e.g. `_blank` to open the destination in a new tab. */
|
|
2613
|
+
readonly target: _angular_core.InputSignal<string | null>;
|
|
2614
|
+
/**
|
|
2615
|
+
* `rel` for {@link href}. Defaults to `noopener noreferrer` when {@link target} is `_blank` (the safe
|
|
2616
|
+
* default for a new-tab external link); pass a value to override, or `''` to clear it.
|
|
2617
|
+
*/
|
|
2618
|
+
readonly rel: _angular_core.InputSignal<string | null>;
|
|
2605
2619
|
readonly tone: _angular_core.InputSignal<SdsMenuItemTone>;
|
|
2606
2620
|
readonly disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
2607
2621
|
readonly select: _angular_core.OutputEmitterRef<void>;
|
|
2622
|
+
/** `noopener noreferrer` is forced for a `_blank` external link unless the consumer set `rel` explicitly. */
|
|
2623
|
+
protected readonly resolvedRel: _angular_core.Signal<string | null>;
|
|
2608
2624
|
protected readonly rowClass: _angular_core.Signal<string>;
|
|
2609
2625
|
static ɵfac: _angular_core.ɵɵFactoryDeclaration<SdsMenuItem, never>;
|
|
2610
|
-
static ɵcmp: _angular_core.ɵɵComponentDeclaration<SdsMenuItem, "sds-menu-item", never, { "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": true; "isSignal": true; }; "link": { "alias": "link"; "required": false; "isSignal": true; }; "tone": { "alias": "tone"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; }, { "select": "select"; }, never, ["*"], true, never>;
|
|
2626
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<SdsMenuItem, "sds-menu-item", never, { "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": true; "isSignal": true; }; "link": { "alias": "link"; "required": false; "isSignal": true; }; "href": { "alias": "href"; "required": false; "isSignal": true; }; "target": { "alias": "target"; "required": false; "isSignal": true; }; "rel": { "alias": "rel"; "required": false; "isSignal": true; }; "tone": { "alias": "tone"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; }, { "select": "select"; }, never, ["*"], true, never>;
|
|
2611
2627
|
}
|
|
2612
2628
|
|
|
2613
2629
|
/** One searchable entry. `group` buckets it under a heading; `keywords` widen what the filter matches. */
|
|
@@ -2803,7 +2819,7 @@ declare class SdsLanguageSwitcher implements OnDestroy {
|
|
|
2803
2819
|
ngOnDestroy(): void;
|
|
2804
2820
|
private readonly onBrand;
|
|
2805
2821
|
protected readonly triggerClass: _angular_core.Signal<"text-white/85 hover:bg-white/10 hover:text-white focus-visible:ring-white/40" | "bg-muted text-ink-soft hover:bg-brand-50 hover:text-brand-600 focus-visible:ring-brand-500/40">;
|
|
2806
|
-
protected readonly chevronClass: _angular_core.Signal<"text-
|
|
2822
|
+
protected readonly chevronClass: _angular_core.Signal<"text-ink-faint" | "text-white/70">;
|
|
2807
2823
|
protected rowClass(index: number, selected: boolean): string;
|
|
2808
2824
|
static ɵfac: _angular_core.ɵɵFactoryDeclaration<SdsLanguageSwitcher, never>;
|
|
2809
2825
|
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>;
|
package/package.json
CHANGED
package/themes/base.css
CHANGED
|
@@ -141,3 +141,35 @@ html.dark {
|
|
|
141
141
|
--sds-sidebar-w-collapsed: 76px;
|
|
142
142
|
}
|
|
143
143
|
}
|
|
144
|
+
|
|
145
|
+
/* Thin, rounded scrollbars, painted from the theme tokens so they flip with light/dark like everything
|
|
146
|
+
else (instead of the raw UA bar that `color-scheme` alone leaves). Standard properties first for
|
|
147
|
+
Firefox, then the WebKit/Chromium pseudo-elements. Kept in @layer base so an app can still override a
|
|
148
|
+
specific scroll container with an ordinary utility class if it ever needs to. */
|
|
149
|
+
@layer base {
|
|
150
|
+
* {
|
|
151
|
+
scrollbar-width: thin;
|
|
152
|
+
scrollbar-color: var(--color-ink-faint) transparent;
|
|
153
|
+
}
|
|
154
|
+
*::-webkit-scrollbar {
|
|
155
|
+
width: 10px;
|
|
156
|
+
height: 10px;
|
|
157
|
+
}
|
|
158
|
+
*::-webkit-scrollbar-track {
|
|
159
|
+
background: transparent;
|
|
160
|
+
}
|
|
161
|
+
*::-webkit-scrollbar-thumb {
|
|
162
|
+
background-color: var(--color-ink-faint);
|
|
163
|
+
border-radius: 9999px;
|
|
164
|
+
/* A transparent border + padding-box clip insets the thumb into a thin rounded pill with breathing
|
|
165
|
+
room, rather than a bar that fills the whole gutter. */
|
|
166
|
+
border: 3px solid transparent;
|
|
167
|
+
background-clip: padding-box;
|
|
168
|
+
}
|
|
169
|
+
*::-webkit-scrollbar-thumb:hover {
|
|
170
|
+
background-color: var(--color-ink-soft);
|
|
171
|
+
}
|
|
172
|
+
*::-webkit-scrollbar-corner {
|
|
173
|
+
background: transparent;
|
|
174
|
+
}
|
|
175
|
+
}
|