@besaitech/ng-design-system 0.0.44 → 0.0.46
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/fesm2022/besaitech-ng-design-system.mjs +1706 -143
- package/fesm2022/besaitech-ng-design-system.mjs.map +1 -1
- package/index.d.ts +468 -31
- package/package.json +1 -1
- package/themes/base.css +77 -0
- package/themes/belvigo.css +19 -0
- package/themes/saitech.css +24 -0
package/index.d.ts
CHANGED
|
@@ -85,6 +85,11 @@ declare const SDS_ICONS: {
|
|
|
85
85
|
readonly 'loader-circle': "<path d=\"M21 12a9 9 0 1 1-6.219-8.56\"/>";
|
|
86
86
|
readonly bug: "<path d=\"M12 20v-9\"/><path d=\"M14 7a4 4 0 0 1 4 4v3a6 6 0 0 1-12 0v-3a4 4 0 0 1 4-4z\"/><path d=\"M14.12 3.88 16 2\"/><path d=\"M21 21a4 4 0 0 0-3.81-4\"/><path d=\"M21 5a4 4 0 0 1-3.55 3.97\"/><path d=\"M22 13h-4\"/><path d=\"M3 21a4 4 0 0 1 3.81-4\"/><path d=\"M3 5a4 4 0 0 0 3.55 3.97\"/><path d=\"M6 13H2\"/><path d=\"m8 2 1.88 1.88\"/><path d=\"M9 7.13V6a3 3 0 1 1 6 0v1.13\"/>";
|
|
87
87
|
readonly 'scroll-text': "<path d=\"M15 12h-5\"/><path d=\"M15 8h-5\"/><path d=\"M19 17V5a2 2 0 0 0-2-2H4\"/><path d=\"M8 21h12a2 2 0 0 0 2-2v-1a1 1 0 0 0-1-1H11a1 1 0 0 0-1 1v1a2 2 0 1 1-4 0V5a2 2 0 1 0-4 0v2a1 1 0 0 0 1 1h3\"/>";
|
|
88
|
+
readonly moon: "<path d=\"M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z\"/>";
|
|
89
|
+
readonly sun: "<circle cx=\"12\" cy=\"12\" r=\"4\"/><path d=\"M12 2v2\"/><path d=\"M12 20v2\"/><path d=\"m4.93 4.93 1.41 1.41\"/><path d=\"m17.66 17.66 1.41 1.41\"/><path d=\"M2 12h2\"/><path d=\"M20 12h2\"/><path d=\"m6.34 17.66-1.41 1.41\"/><path d=\"m19.07 4.93-1.41 1.41\"/>";
|
|
90
|
+
readonly 'search-x': "<path d=\"m13.5 8.5-5 5\"/><path d=\"m8.5 8.5 5 5\"/><circle cx=\"11\" cy=\"11\" r=\"8\"/><path d=\"m21 21-4.3-4.3\"/>";
|
|
91
|
+
readonly command: "<path d=\"M15 6v12a3 3 0 1 0 3-3H6a3 3 0 1 0 3 3V6a3 3 0 1 0-3 3h12a3 3 0 1 0-3-3\"/>";
|
|
92
|
+
readonly sparkles: "<path d=\"M9.937 15.5A2 2 0 0 0 8.5 14.063l-6.135-1.582a.5.5 0 0 1 0-.962L8.5 9.936A2 2 0 0 0 9.937 8.5l1.582-6.135a.5.5 0 0 1 .963 0L14.063 8.5A2 2 0 0 0 15.5 9.937l6.135 1.581a.5.5 0 0 1 0 .964L15.5 14.063a2 2 0 0 0-1.437 1.437l-1.582 6.135a.5.5 0 0 1-.963 0z\"/><path d=\"M20 3v4\"/><path d=\"M22 5h-4\"/><path d=\"M4 17v2\"/><path d=\"M5 18H3\"/>";
|
|
88
93
|
};
|
|
89
94
|
type SdsIconName = keyof typeof SDS_ICONS;
|
|
90
95
|
|
|
@@ -99,7 +104,7 @@ type SdsIconSize = 'sm' | 'md' | 'lg' | 'xl';
|
|
|
99
104
|
declare class SdsIcon {
|
|
100
105
|
private readonly sanitizer;
|
|
101
106
|
/** Icon identifier from the registry. */
|
|
102
|
-
readonly name: _angular_core.InputSignal<"
|
|
107
|
+
readonly name: _angular_core.InputSignal<"copy" | "menu" | "search" | "table" | "filter" | "chart-column" | "clipboard-list" | "credit-card" | "external-link" | "languages" | "megaphone" | "monitor" | "store" | "user-round" | "home" | "user-plus" | "user-check" | "hand" | "users" | "bike" | "building-2" | "package" | "package-plus" | "package-open" | "rotate-ccw" | "bar-chart-3" | "log-out" | "panel-left-close" | "panel-left-open" | "panel-left" | "calendar" | "chevron-right" | "chevron-left" | "chevron-down" | "chevron-up" | "plus" | "minus" | "chevrons-left" | "chevrons-right" | "x" | "check" | "alert-circle" | "info" | "type" | "tag" | "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" | "eye" | "eye-off" | "user" | "check-circle" | "arrows-clockwise" | "file-text" | "hash" | "map-pin" | "inbox" | "arrow-right" | "refresh-cw" | "loader-circle" | "bug" | "scroll-text" | "moon" | "sun" | "search-x" | "command" | "sparkles">;
|
|
103
108
|
/** Square size: a pixel number, a numeric string, or a keyword (sm·md·lg·xl). */
|
|
104
109
|
readonly size: _angular_core.InputSignalWithTransform<number, string | number>;
|
|
105
110
|
/** Stroke width of the line icon. */
|
|
@@ -191,8 +196,8 @@ declare class SdsInput implements ControlValueAccessor {
|
|
|
191
196
|
* is its only name.
|
|
192
197
|
*/
|
|
193
198
|
readonly clearLabel: _angular_core.InputSignal<string>;
|
|
194
|
-
readonly leadingIcon: _angular_core.InputSignal<"
|
|
195
|
-
readonly trailingIcon: _angular_core.InputSignal<"
|
|
199
|
+
readonly leadingIcon: _angular_core.InputSignal<"copy" | "menu" | "search" | "table" | "filter" | "chart-column" | "clipboard-list" | "credit-card" | "external-link" | "languages" | "megaphone" | "monitor" | "store" | "user-round" | "home" | "user-plus" | "user-check" | "hand" | "users" | "bike" | "building-2" | "package" | "package-plus" | "package-open" | "rotate-ccw" | "bar-chart-3" | "log-out" | "panel-left-close" | "panel-left-open" | "panel-left" | "calendar" | "chevron-right" | "chevron-left" | "chevron-down" | "chevron-up" | "plus" | "minus" | "chevrons-left" | "chevrons-right" | "x" | "check" | "alert-circle" | "info" | "type" | "tag" | "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" | "eye" | "eye-off" | "user" | "check-circle" | "arrows-clockwise" | "file-text" | "hash" | "map-pin" | "inbox" | "arrow-right" | "refresh-cw" | "loader-circle" | "bug" | "scroll-text" | "moon" | "sun" | "search-x" | "command" | "sparkles" | null>;
|
|
200
|
+
readonly trailingIcon: _angular_core.InputSignal<"copy" | "menu" | "search" | "table" | "filter" | "chart-column" | "clipboard-list" | "credit-card" | "external-link" | "languages" | "megaphone" | "monitor" | "store" | "user-round" | "home" | "user-plus" | "user-check" | "hand" | "users" | "bike" | "building-2" | "package" | "package-plus" | "package-open" | "rotate-ccw" | "bar-chart-3" | "log-out" | "panel-left-close" | "panel-left-open" | "panel-left" | "calendar" | "chevron-right" | "chevron-left" | "chevron-down" | "chevron-up" | "plus" | "minus" | "chevrons-left" | "chevrons-right" | "x" | "check" | "alert-circle" | "info" | "type" | "tag" | "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" | "eye" | "eye-off" | "user" | "check-circle" | "arrows-clockwise" | "file-text" | "hash" | "map-pin" | "inbox" | "arrow-right" | "refresh-cw" | "loader-circle" | "bug" | "scroll-text" | "moon" | "sun" | "search-x" | "command" | "sparkles" | null>;
|
|
196
201
|
/**
|
|
197
202
|
* A CLICKABLE trailing icon, for the affordances that belong to the field itself — password reveal
|
|
198
203
|
* above all. Distinct from {@link trailingIcon}, which is decorative and explicitly
|
|
@@ -202,7 +207,7 @@ declare class SdsInput implements ControlValueAccessor {
|
|
|
202
207
|
* Always pair it with {@link trailingActionLabel} — an icon-only button with no accessible name is
|
|
203
208
|
* unusable by a screen reader. For a toggle, also bind {@link trailingActionPressed}.
|
|
204
209
|
*/
|
|
205
|
-
readonly trailingAction: _angular_core.InputSignal<"
|
|
210
|
+
readonly trailingAction: _angular_core.InputSignal<"copy" | "menu" | "search" | "table" | "filter" | "chart-column" | "clipboard-list" | "credit-card" | "external-link" | "languages" | "megaphone" | "monitor" | "store" | "user-round" | "home" | "user-plus" | "user-check" | "hand" | "users" | "bike" | "building-2" | "package" | "package-plus" | "package-open" | "rotate-ccw" | "bar-chart-3" | "log-out" | "panel-left-close" | "panel-left-open" | "panel-left" | "calendar" | "chevron-right" | "chevron-left" | "chevron-down" | "chevron-up" | "plus" | "minus" | "chevrons-left" | "chevrons-right" | "x" | "check" | "alert-circle" | "info" | "type" | "tag" | "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" | "eye" | "eye-off" | "user" | "check-circle" | "arrows-clockwise" | "file-text" | "hash" | "map-pin" | "inbox" | "arrow-right" | "refresh-cw" | "loader-circle" | "bug" | "scroll-text" | "moon" | "sun" | "search-x" | "command" | "sparkles" | null>;
|
|
206
211
|
/** Accessible name for {@link trailingAction}. Translate it in the consuming app. */
|
|
207
212
|
readonly trailingActionLabel: _angular_core.InputSignal<string>;
|
|
208
213
|
/** `aria-pressed` for a toggling action (e.g. show/hide password). Null renders no attribute. */
|
|
@@ -297,9 +302,9 @@ declare class SdsInputNumber implements ControlValueAccessor {
|
|
|
297
302
|
readonly showButtons: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
298
303
|
readonly buttonLayout: _angular_core.InputSignal<SdsInputNumberButtonLayout>;
|
|
299
304
|
/** Override the increment button icon (defaults: chevron-up when stacked, plus otherwise). */
|
|
300
|
-
readonly incrementIcon: _angular_core.InputSignal<"
|
|
305
|
+
readonly incrementIcon: _angular_core.InputSignal<"copy" | "menu" | "search" | "table" | "filter" | "chart-column" | "clipboard-list" | "credit-card" | "external-link" | "languages" | "megaphone" | "monitor" | "store" | "user-round" | "home" | "user-plus" | "user-check" | "hand" | "users" | "bike" | "building-2" | "package" | "package-plus" | "package-open" | "rotate-ccw" | "bar-chart-3" | "log-out" | "panel-left-close" | "panel-left-open" | "panel-left" | "calendar" | "chevron-right" | "chevron-left" | "chevron-down" | "chevron-up" | "plus" | "minus" | "chevrons-left" | "chevrons-right" | "x" | "check" | "alert-circle" | "info" | "type" | "tag" | "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" | "eye" | "eye-off" | "user" | "check-circle" | "arrows-clockwise" | "file-text" | "hash" | "map-pin" | "inbox" | "arrow-right" | "refresh-cw" | "loader-circle" | "bug" | "scroll-text" | "moon" | "sun" | "search-x" | "command" | "sparkles" | null>;
|
|
301
306
|
/** Override the decrement button icon (defaults: chevron-down when stacked, minus otherwise). */
|
|
302
|
-
readonly decrementIcon: _angular_core.InputSignal<"
|
|
307
|
+
readonly decrementIcon: _angular_core.InputSignal<"copy" | "menu" | "search" | "table" | "filter" | "chart-column" | "clipboard-list" | "credit-card" | "external-link" | "languages" | "megaphone" | "monitor" | "store" | "user-round" | "home" | "user-plus" | "user-check" | "hand" | "users" | "bike" | "building-2" | "package" | "package-plus" | "package-open" | "rotate-ccw" | "bar-chart-3" | "log-out" | "panel-left-close" | "panel-left-open" | "panel-left" | "calendar" | "chevron-right" | "chevron-left" | "chevron-down" | "chevron-up" | "plus" | "minus" | "chevrons-left" | "chevrons-right" | "x" | "check" | "alert-circle" | "info" | "type" | "tag" | "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" | "eye" | "eye-off" | "user" | "check-circle" | "arrows-clockwise" | "file-text" | "hash" | "map-pin" | "inbox" | "arrow-right" | "refresh-cw" | "loader-circle" | "bug" | "scroll-text" | "moon" | "sun" | "search-x" | "command" | "sparkles" | null>;
|
|
303
308
|
/** Allow an empty (null) value. When false, blurring an empty field falls back to {@link min} or 0. */
|
|
304
309
|
readonly allowEmpty: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
305
310
|
readonly clearable: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
@@ -316,8 +321,8 @@ declare class SdsInputNumber implements ControlValueAccessor {
|
|
|
316
321
|
protected readonly isDisabled: _angular_core.Signal<boolean>;
|
|
317
322
|
protected readonly describedBy: _angular_core.Signal<string | null>;
|
|
318
323
|
protected readonly clearVisible: _angular_core.Signal<boolean>;
|
|
319
|
-
protected readonly incrementIconName: _angular_core.Signal<"
|
|
320
|
-
protected readonly decrementIconName: _angular_core.Signal<"
|
|
324
|
+
protected readonly incrementIconName: _angular_core.Signal<"copy" | "menu" | "search" | "table" | "filter" | "chart-column" | "clipboard-list" | "credit-card" | "external-link" | "languages" | "megaphone" | "monitor" | "store" | "user-round" | "home" | "user-plus" | "user-check" | "hand" | "users" | "bike" | "building-2" | "package" | "package-plus" | "package-open" | "rotate-ccw" | "bar-chart-3" | "log-out" | "panel-left-close" | "panel-left-open" | "panel-left" | "calendar" | "chevron-right" | "chevron-left" | "chevron-down" | "chevron-up" | "plus" | "minus" | "chevrons-left" | "chevrons-right" | "x" | "check" | "alert-circle" | "info" | "type" | "tag" | "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" | "eye" | "eye-off" | "user" | "check-circle" | "arrows-clockwise" | "file-text" | "hash" | "map-pin" | "inbox" | "arrow-right" | "refresh-cw" | "loader-circle" | "bug" | "scroll-text" | "moon" | "sun" | "search-x" | "command" | "sparkles">;
|
|
325
|
+
protected readonly decrementIconName: _angular_core.Signal<"copy" | "menu" | "search" | "table" | "filter" | "chart-column" | "clipboard-list" | "credit-card" | "external-link" | "languages" | "megaphone" | "monitor" | "store" | "user-round" | "home" | "user-plus" | "user-check" | "hand" | "users" | "bike" | "building-2" | "package" | "package-plus" | "package-open" | "rotate-ccw" | "bar-chart-3" | "log-out" | "panel-left-close" | "panel-left-open" | "panel-left" | "calendar" | "chevron-right" | "chevron-left" | "chevron-down" | "chevron-up" | "plus" | "minus" | "chevrons-left" | "chevrons-right" | "x" | "check" | "alert-circle" | "info" | "type" | "tag" | "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" | "eye" | "eye-off" | "user" | "check-circle" | "arrows-clockwise" | "file-text" | "hash" | "map-pin" | "inbox" | "arrow-right" | "refresh-cw" | "loader-circle" | "bug" | "scroll-text" | "moon" | "sun" | "search-x" | "command" | "sparkles">;
|
|
321
326
|
protected readonly canIncrement: _angular_core.Signal<boolean>;
|
|
322
327
|
protected readonly canDecrement: _angular_core.Signal<boolean>;
|
|
323
328
|
/** Locale grouping/decimal separators, derived from Intl so parsing matches formatting. */
|
|
@@ -581,9 +586,9 @@ declare class SdsToggleSwitch implements ControlValueAccessor {
|
|
|
581
586
|
/** Value emitted/stored when the switch is off. */
|
|
582
587
|
readonly falseValue: _angular_core.InputSignal<unknown>;
|
|
583
588
|
/** Icon shown on the knob when checked. */
|
|
584
|
-
readonly onIcon: _angular_core.InputSignal<"
|
|
589
|
+
readonly onIcon: _angular_core.InputSignal<"copy" | "menu" | "search" | "table" | "filter" | "chart-column" | "clipboard-list" | "credit-card" | "external-link" | "languages" | "megaphone" | "monitor" | "store" | "user-round" | "home" | "user-plus" | "user-check" | "hand" | "users" | "bike" | "building-2" | "package" | "package-plus" | "package-open" | "rotate-ccw" | "bar-chart-3" | "log-out" | "panel-left-close" | "panel-left-open" | "panel-left" | "calendar" | "chevron-right" | "chevron-left" | "chevron-down" | "chevron-up" | "plus" | "minus" | "chevrons-left" | "chevrons-right" | "x" | "check" | "alert-circle" | "info" | "type" | "tag" | "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" | "eye" | "eye-off" | "user" | "check-circle" | "arrows-clockwise" | "file-text" | "hash" | "map-pin" | "inbox" | "arrow-right" | "refresh-cw" | "loader-circle" | "bug" | "scroll-text" | "moon" | "sun" | "search-x" | "command" | "sparkles" | null>;
|
|
585
590
|
/** Icon shown on the knob when unchecked. */
|
|
586
|
-
readonly offIcon: _angular_core.InputSignal<"
|
|
591
|
+
readonly offIcon: _angular_core.InputSignal<"copy" | "menu" | "search" | "table" | "filter" | "chart-column" | "clipboard-list" | "credit-card" | "external-link" | "languages" | "megaphone" | "monitor" | "store" | "user-round" | "home" | "user-plus" | "user-check" | "hand" | "users" | "bike" | "building-2" | "package" | "package-plus" | "package-open" | "rotate-ccw" | "bar-chart-3" | "log-out" | "panel-left-close" | "panel-left-open" | "panel-left" | "calendar" | "chevron-right" | "chevron-left" | "chevron-down" | "chevron-up" | "plus" | "minus" | "chevrons-left" | "chevrons-right" | "x" | "check" | "alert-circle" | "info" | "type" | "tag" | "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" | "eye" | "eye-off" | "user" | "check-circle" | "arrows-clockwise" | "file-text" | "hash" | "map-pin" | "inbox" | "arrow-right" | "refresh-cw" | "loader-circle" | "bug" | "scroll-text" | "moon" | "sun" | "search-x" | "command" | "sparkles" | null>;
|
|
587
592
|
readonly hint: _angular_core.InputSignal<string>;
|
|
588
593
|
readonly error: _angular_core.InputSignal<string>;
|
|
589
594
|
/**
|
|
@@ -2151,6 +2156,78 @@ declare class SdsToastHost {
|
|
|
2151
2156
|
static ɵcmp: _angular_core.ɵɵComponentDeclaration<SdsToastHost, "sds-toast-host", never, { "closeLabel": { "alias": "closeLabel"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
|
|
2152
2157
|
}
|
|
2153
2158
|
|
|
2159
|
+
type SdsTheme = 'light' | 'dark';
|
|
2160
|
+
/**
|
|
2161
|
+
* Light/dark theme state for the whole app. It owns exactly one thing: the presence of the `.dark`
|
|
2162
|
+
* class on the document root, which flips every design token defined under `.dark` in the theme CSS
|
|
2163
|
+
* (base.css and the brand ramp). Because the library themes by ROLE, this single class re-themes the
|
|
2164
|
+
* entire component set — there is no per-component dark mode to wire.
|
|
2165
|
+
*
|
|
2166
|
+
* `providedIn: 'root'`, so the switcher, the shell and any feature share one source of truth:
|
|
2167
|
+
*
|
|
2168
|
+
* ```ts
|
|
2169
|
+
* private readonly theme = inject(SdsThemeService);
|
|
2170
|
+
* this.theme.toggle(); // flip
|
|
2171
|
+
* this.theme.isDark(); // read (a signal)
|
|
2172
|
+
* ```
|
|
2173
|
+
*
|
|
2174
|
+
* Initial value: a previously stored choice wins; otherwise the OS `prefers-color-scheme` is honoured,
|
|
2175
|
+
* so a first-time visitor already in dark at the OS level lands in dark. The choice is persisted to
|
|
2176
|
+
* `localStorage` and re-applied on the next visit. Every browser access is guarded, so the service is
|
|
2177
|
+
* safe under SSR / prerender (it simply no-ops without a DOM).
|
|
2178
|
+
*/
|
|
2179
|
+
declare class SdsThemeService {
|
|
2180
|
+
private readonly document;
|
|
2181
|
+
readonly theme: _angular_core.WritableSignal<SdsTheme>;
|
|
2182
|
+
readonly isDark: _angular_core.Signal<boolean>;
|
|
2183
|
+
constructor();
|
|
2184
|
+
/** Flip between light and dark. */
|
|
2185
|
+
toggle(): void;
|
|
2186
|
+
/** Set an explicit theme. */
|
|
2187
|
+
setTheme(theme: SdsTheme): void;
|
|
2188
|
+
private initialTheme;
|
|
2189
|
+
private apply;
|
|
2190
|
+
private readStorage;
|
|
2191
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<SdsThemeService, never>;
|
|
2192
|
+
static ɵprov: _angular_core.ɵɵInjectableDeclaration<SdsThemeService>;
|
|
2193
|
+
}
|
|
2194
|
+
|
|
2195
|
+
type SdsThemeToggleAppearance = 'surface' | 'on-brand';
|
|
2196
|
+
/**
|
|
2197
|
+
* Icon button that flips the app between light and dark, backed by {@link SdsThemeService}. It shows the
|
|
2198
|
+
* destination, not the current state — a moon while you are in light (tap to go dark), a sun while you
|
|
2199
|
+
* are in dark — and its accessible name names the action, because an icon-only control's label is its
|
|
2200
|
+
* only name.
|
|
2201
|
+
*
|
|
2202
|
+
* Two appearances so it sits correctly on either bar: `surface` (default) for a light or glass top bar,
|
|
2203
|
+
* `on-brand` for the dark brand bar / sidebar.
|
|
2204
|
+
*
|
|
2205
|
+
* @example
|
|
2206
|
+
* <sds-theme-toggle />
|
|
2207
|
+
* <sds-theme-toggle appearance="on-brand" [lightLabel]="'Passer en clair'" [darkLabel]="'Passer en sombre'" />
|
|
2208
|
+
*/
|
|
2209
|
+
declare class SdsThemeToggle {
|
|
2210
|
+
protected readonly theme: SdsThemeService;
|
|
2211
|
+
protected readonly isDark: _angular_core.Signal<boolean>;
|
|
2212
|
+
/** Button box size in px (the icon scales with it). */
|
|
2213
|
+
readonly size: _angular_core.InputSignal<number>;
|
|
2214
|
+
/** `surface` for light/glass bars, `on-brand` for the dark brand bar. */
|
|
2215
|
+
readonly appearance: _angular_core.InputSignal<SdsThemeToggleAppearance>;
|
|
2216
|
+
/**
|
|
2217
|
+
* Accessible names for the two actions. French defaults keep existing consumers unchanged; a
|
|
2218
|
+
* multilingual app must pass translated values.
|
|
2219
|
+
*/
|
|
2220
|
+
readonly darkLabel: _angular_core.InputSignal<string>;
|
|
2221
|
+
readonly lightLabel: _angular_core.InputSignal<string>;
|
|
2222
|
+
protected readonly iconSize: _angular_core.Signal<number>;
|
|
2223
|
+
protected readonly label: _angular_core.Signal<string>;
|
|
2224
|
+
protected readonly buttonClasses: _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">;
|
|
2225
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<SdsThemeToggle, never>;
|
|
2226
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<SdsThemeToggle, "sds-theme-toggle", never, { "size": { "alias": "size"; "required": false; "isSignal": true; }; "appearance": { "alias": "appearance"; "required": false; "isSignal": true; }; "darkLabel": { "alias": "darkLabel"; "required": false; "isSignal": true; }; "lightLabel": { "alias": "lightLabel"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
|
|
2227
|
+
}
|
|
2228
|
+
|
|
2229
|
+
/** How the rail is painted. `brand` is the dark brand rail; `surface` is a light rail with brand accents. */
|
|
2230
|
+
type SdsSidebarAppearance = 'brand' | 'surface';
|
|
2154
2231
|
/**
|
|
2155
2232
|
* Shared collapse state for the sidebar and its nav items.
|
|
2156
2233
|
*
|
|
@@ -2161,6 +2238,12 @@ declare class SdsToastHost {
|
|
|
2161
2238
|
declare class SidebarStore {
|
|
2162
2239
|
/** Desktop rail state: collapsed to icon-only width (applies at ≥ lg). */
|
|
2163
2240
|
readonly collapsed: _angular_core.WritableSignal<boolean>;
|
|
2241
|
+
/**
|
|
2242
|
+
* The rail's paint, published by <sds-sidebar> so projected <sds-nav-item>/<sds-nav-group> pick the
|
|
2243
|
+
* matching state and hover colours (white-on-dark for `brand`, ink-and-brand for `surface`) without
|
|
2244
|
+
* every item taking an input. One rail, one appearance — set by the sidebar, read by its children.
|
|
2245
|
+
*/
|
|
2246
|
+
readonly appearance: _angular_core.WritableSignal<SdsSidebarAppearance>;
|
|
2164
2247
|
/** Mobile drawer state: whether the off-canvas sidebar is slid in (< lg). */
|
|
2165
2248
|
readonly mobileOpen: _angular_core.WritableSignal<boolean>;
|
|
2166
2249
|
/** Toggle the desktop icon-rail. */
|
|
@@ -2176,14 +2259,19 @@ declare class SidebarStore {
|
|
|
2176
2259
|
static ɵprov: _angular_core.ɵɵInjectableDeclaration<SidebarStore>;
|
|
2177
2260
|
}
|
|
2178
2261
|
|
|
2179
|
-
type SdsTopbarAppearance = 'brand' | 'surface';
|
|
2262
|
+
type SdsTopbarAppearance = 'brand' | 'surface' | 'glass';
|
|
2180
2263
|
/**
|
|
2181
2264
|
* Application top bar: a logo slot, the app name, and three slots the app fills.
|
|
2182
2265
|
*
|
|
2183
|
-
*
|
|
2266
|
+
* Three appearances. `brand` is the gradient-and-wave bar an internal tool wants. `surface` is white on
|
|
2184
2267
|
* a hairline border, for a bar that has to sit under a customer-facing page without dominating it —
|
|
2185
|
-
* a storefront header is a bar, but it is not a banner.
|
|
2186
|
-
*
|
|
2268
|
+
* a storefront header is a bar, but it is not a banner. `glass` is a translucent, brand-tinted bar with
|
|
2269
|
+
* a blur behind it, for a dashboard that wants the brand present but light — it reads the brand from the
|
|
2270
|
+
* ramp, so it tints itself to whatever theme is loaded and flips with dark mode. The slots and the
|
|
2271
|
+
* layout are identical across all three; only the paint differs.
|
|
2272
|
+
*
|
|
2273
|
+
* `[decorations]` adds slow-drifting, brand-tinted blobs behind the bar (opt-in; they respect
|
|
2274
|
+
* prefers-reduced-motion). They pair with `glass`/`surface`; on `brand` the wave already fills that role.
|
|
2187
2275
|
*
|
|
2188
2276
|
* It deliberately owns NO account UI. It used to render the signed-in user and a logout button, which
|
|
2189
2277
|
* forced every consumer into one shape — no dropdown, no email, no menu, no busy state, and an
|
|
@@ -2195,7 +2283,7 @@ type SdsTopbarAppearance = 'brand' | 'surface';
|
|
|
2195
2283
|
* `[sdsCenter]` (the flexible middle — a search field), `[sdsActions]` (the right edge).
|
|
2196
2284
|
*
|
|
2197
2285
|
* @example
|
|
2198
|
-
* <sds-topbar appName="
|
|
2286
|
+
* <sds-topbar appName="Design system">
|
|
2199
2287
|
* <img sdsLogo src="logo.svg" alt="" />
|
|
2200
2288
|
* <my-address-picker sdsLead />
|
|
2201
2289
|
* <my-search sdsCenter />
|
|
@@ -2225,29 +2313,45 @@ declare class SdsTopbar {
|
|
|
2225
2313
|
* aria-label is its only name, and a hardcoded one is simply wrong in every other locale.
|
|
2226
2314
|
*/
|
|
2227
2315
|
readonly menuLabel: _angular_core.InputSignal<string>;
|
|
2228
|
-
/**
|
|
2316
|
+
/**
|
|
2317
|
+
* `brand` (default) paints the gradient and the wave; `surface` is white on a hairline border;
|
|
2318
|
+
* `glass` is a translucent, brand-tinted bar with a backdrop blur.
|
|
2319
|
+
*/
|
|
2229
2320
|
readonly appearance: _angular_core.InputSignal<SdsTopbarAppearance>;
|
|
2230
|
-
|
|
2321
|
+
/** Add slow-drifting brand-tinted blobs behind the bar (opt-in; pairs with `glass`/`surface`). */
|
|
2322
|
+
readonly decorations: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
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">;
|
|
2231
2324
|
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">;
|
|
2232
2325
|
static ɵfac: _angular_core.ɵɵFactoryDeclaration<SdsTopbar, never>;
|
|
2233
|
-
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>;
|
|
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>;
|
|
2234
2327
|
}
|
|
2235
2328
|
|
|
2329
|
+
type SdsShellBackground = 'plain' | 'gradient';
|
|
2236
2330
|
/**
|
|
2237
2331
|
* App layout shell: a full-height column with the top bar across the top and a
|
|
2238
2332
|
* row below holding the sidebar and the scrollable main content.
|
|
2239
2333
|
*
|
|
2334
|
+
* The content area is `plain` (flat canvas) by default. Set `[background]="'gradient'"` for the soft
|
|
2335
|
+
* brand-tinted wash that pairs with the glass top bar and the surface sidebar, and add `[decorations]`
|
|
2336
|
+
* for the slow drifting brand blobs behind the page. Both read the brand ramp, so they follow the active
|
|
2337
|
+
* theme and dark mode, and the decorations respect prefers-reduced-motion.
|
|
2338
|
+
*
|
|
2240
2339
|
* @example
|
|
2241
|
-
* <sds-shell>
|
|
2242
|
-
* <sds-topbar sdsTopbar … />
|
|
2243
|
-
* <sds-sidebar sdsSidebar> … </sds-sidebar>
|
|
2340
|
+
* <sds-shell background="gradient" decorations>
|
|
2341
|
+
* <sds-topbar appearance="glass" sdsTopbar … />
|
|
2342
|
+
* <sds-sidebar appearance="surface" sdsSidebar> … </sds-sidebar>
|
|
2244
2343
|
* <!-- routed page content -->
|
|
2245
2344
|
* <router-outlet />
|
|
2246
2345
|
* </sds-shell>
|
|
2247
2346
|
*/
|
|
2248
2347
|
declare class SdsShell {
|
|
2348
|
+
/** `plain` flat canvas (default) or a soft brand-tinted `gradient` wash. */
|
|
2349
|
+
readonly background: _angular_core.InputSignal<SdsShellBackground>;
|
|
2350
|
+
/** Add slow-drifting brand-tinted blobs behind the page content (opt-in). */
|
|
2351
|
+
readonly decorations: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
2352
|
+
protected readonly mainClass: _angular_core.Signal<"bg-linear-to-br from-brand-50/50 via-canvas to-brand-100/40" | "bg-canvas">;
|
|
2249
2353
|
static ɵfac: _angular_core.ɵɵFactoryDeclaration<SdsShell, never>;
|
|
2250
|
-
static ɵcmp: _angular_core.ɵɵComponentDeclaration<SdsShell, "sds-shell", never, {}, {}, never, ["[sdsTopbar]", "[sdsSidebar]", "*"], true, never>;
|
|
2354
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<SdsShell, "sds-shell", never, { "background": { "alias": "background"; "required": false; "isSignal": true; }; "decorations": { "alias": "decorations"; "required": false; "isSignal": true; }; }, {}, never, ["[sdsTopbar]", "[sdsSidebar]", "*"], true, never>;
|
|
2251
2355
|
}
|
|
2252
2356
|
|
|
2253
2357
|
/**
|
|
@@ -2255,8 +2359,18 @@ declare class SdsShell {
|
|
|
2255
2359
|
* default content, and pin a footer (e.g. search + version badge) via the
|
|
2256
2360
|
* [sdsFooter] slot. Collapse state is shared through SidebarStore.
|
|
2257
2361
|
*
|
|
2362
|
+
* Two appearances. `brand` (default) is the dark brand rail. `surface` is a light rail with a faint
|
|
2363
|
+
* brand wash and brand-tinted active items — the counterpart to the glass top bar. The appearance is
|
|
2364
|
+
* published to SidebarStore so the projected nav items adopt the matching state colours from this one
|
|
2365
|
+
* input. `[decorations]` adds the same slow brand-tinted blobs the top bar and container use.
|
|
2366
|
+
*
|
|
2367
|
+
* Responsive: below `lg` it is a fixed off-canvas drawer opened by the top bar's hamburger; it is a
|
|
2368
|
+
* modal (scrim + trap), so while open Escape closes it, focus moves into it and is restored on close,
|
|
2369
|
+
* and Tab is kept inside. While closed it is `inert`, so its off-screen items are out of the tab order.
|
|
2370
|
+
* At `lg` and up it is the in-flow, collapsible rail.
|
|
2371
|
+
*
|
|
2258
2372
|
* @example
|
|
2259
|
-
* <sds-sidebar>
|
|
2373
|
+
* <sds-sidebar appearance="surface" decorations>
|
|
2260
2374
|
* <sds-nav-group label="Membres">
|
|
2261
2375
|
* <sds-nav-item icon="user-plus" label="Créer un membre" link="/membres/new" />
|
|
2262
2376
|
* </sds-nav-group>
|
|
@@ -2265,20 +2379,38 @@ declare class SdsShell {
|
|
|
2265
2379
|
*/
|
|
2266
2380
|
declare class SdsSidebar {
|
|
2267
2381
|
protected readonly store: SidebarStore;
|
|
2382
|
+
private readonly document;
|
|
2383
|
+
private readonly drawer;
|
|
2384
|
+
private readonly closeBtn;
|
|
2385
|
+
/** True below the `lg` breakpoint — where the rail is the off-canvas modal drawer. */
|
|
2386
|
+
protected readonly belowLg: _angular_core.WritableSignal<boolean>;
|
|
2387
|
+
/** The element focused before the drawer opened, restored to it on close. */
|
|
2388
|
+
private restoreFocusTo;
|
|
2389
|
+
constructor();
|
|
2268
2390
|
/**
|
|
2269
2391
|
* Accessible names for the rail's three icon-only controls. French defaults keep existing consumers
|
|
2270
|
-
* unchanged; a multilingual app must pass translated values
|
|
2271
|
-
* is its only name.
|
|
2392
|
+
* unchanged; a multilingual app must pass translated values.
|
|
2272
2393
|
*/
|
|
2273
2394
|
readonly collapseLabel: _angular_core.InputSignal<string>;
|
|
2274
2395
|
readonly expandLabel: _angular_core.InputSignal<string>;
|
|
2275
2396
|
readonly closeLabel: _angular_core.InputSignal<string>;
|
|
2397
|
+
/** `brand` (default) is the dark rail; `surface` is a light rail with brand accents. */
|
|
2398
|
+
readonly appearance: _angular_core.InputSignal<SdsSidebarAppearance>;
|
|
2399
|
+
/** Add slow-drifting brand-tinted blobs behind the rail (opt-in). */
|
|
2400
|
+
readonly decorations: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
2276
2401
|
protected readonly collapsed: _angular_core.WritableSignal<boolean>;
|
|
2277
2402
|
protected readonly mobileOpen: _angular_core.WritableSignal<boolean>;
|
|
2403
|
+
protected readonly asideClass: _angular_core.Signal<string>;
|
|
2404
|
+
/** The two header icon buttons, painted for the active rail. */
|
|
2405
|
+
protected readonly railBtnClass: _angular_core.Signal<"text-ink-soft hover:bg-muted hover:text-ink focus-visible:ring-brand-500/40" | "text-white/70 hover:bg-white/10 hover:text-white focus-visible:ring-white/40">;
|
|
2278
2406
|
/** Desktop rail width (full vs. collapsed); mobile always uses full width. */
|
|
2279
2407
|
protected readonly railWidth: _angular_core.Signal<"var(--sds-sidebar-w-collapsed)" | "var(--sds-sidebar-w)">;
|
|
2408
|
+
protected onEscape(): void;
|
|
2409
|
+
/** Keep Tab inside the open mobile drawer (a modal must not leak focus to the page behind the scrim). */
|
|
2410
|
+
protected onDrawerKeydown(event: KeyboardEvent): void;
|
|
2411
|
+
private focusableEls;
|
|
2280
2412
|
static ɵfac: _angular_core.ɵɵFactoryDeclaration<SdsSidebar, never>;
|
|
2281
|
-
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>;
|
|
2413
|
+
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; }; "appearance": { "alias": "appearance"; "required": false; "isSignal": true; }; "decorations": { "alias": "decorations"; "required": false; "isSignal": true; }; }, {}, never, ["*", "[sdsFooter]"], true, never>;
|
|
2282
2414
|
}
|
|
2283
2415
|
|
|
2284
2416
|
/**
|
|
@@ -2306,7 +2438,7 @@ declare class SdsNavGroup {
|
|
|
2306
2438
|
/** Turn the label into an expand/collapse control. */
|
|
2307
2439
|
readonly collapsible: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
2308
2440
|
/** Icon for a collapsible header, so it reads at the same weight as the items it sits among. */
|
|
2309
|
-
readonly icon: _angular_core.InputSignal<"
|
|
2441
|
+
readonly icon: _angular_core.InputSignal<"copy" | "menu" | "search" | "table" | "filter" | "chart-column" | "clipboard-list" | "credit-card" | "external-link" | "languages" | "megaphone" | "monitor" | "store" | "user-round" | "home" | "user-plus" | "user-check" | "hand" | "users" | "bike" | "building-2" | "package" | "package-plus" | "package-open" | "rotate-ccw" | "bar-chart-3" | "log-out" | "panel-left-close" | "panel-left-open" | "panel-left" | "calendar" | "chevron-right" | "chevron-left" | "chevron-down" | "chevron-up" | "plus" | "minus" | "chevrons-left" | "chevrons-right" | "x" | "check" | "alert-circle" | "info" | "type" | "tag" | "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" | "eye" | "eye-off" | "user" | "check-circle" | "arrows-clockwise" | "file-text" | "hash" | "map-pin" | "inbox" | "arrow-right" | "refresh-cw" | "loader-circle" | "bug" | "scroll-text" | "moon" | "sun" | "search-x" | "command" | "sparkles" | null>;
|
|
2310
2442
|
/**
|
|
2311
2443
|
* URL prefix owned by this group, e.g. `/payments`. While the active route starts with it the
|
|
2312
2444
|
* group counts as active and opens itself — unless the person has explicitly toggled it since.
|
|
@@ -2317,10 +2449,21 @@ declare class SdsNavGroup {
|
|
|
2317
2449
|
/** Explicit user choice; null means "follow the route". */
|
|
2318
2450
|
private readonly manual;
|
|
2319
2451
|
private readonly url;
|
|
2320
|
-
/**
|
|
2452
|
+
/**
|
|
2453
|
+
* True while the active route lives inside this group. Matches on segment boundaries, not a raw string
|
|
2454
|
+
* prefix, so `/users/42` does NOT activate a group whose basePath is `/user` (query/hash are stripped
|
|
2455
|
+
* first).
|
|
2456
|
+
*/
|
|
2321
2457
|
protected readonly routeActive: _angular_core.Signal<boolean>;
|
|
2322
2458
|
protected readonly expanded: _angular_core.Signal<boolean>;
|
|
2323
2459
|
protected readonly collapsed: _angular_core.WritableSignal<boolean>;
|
|
2460
|
+
/** Rail paint, shared via the store — see SidebarStore.appearance. Drives the header/caption tones. */
|
|
2461
|
+
private readonly surface;
|
|
2462
|
+
/** Collapsible header, painted for the active rail (ink+brand on `surface`, white on `brand`). */
|
|
2463
|
+
protected readonly headerClass: _angular_core.Signal<string>;
|
|
2464
|
+
protected readonly chevronClass: _angular_core.Signal<string>;
|
|
2465
|
+
protected readonly dividerClass: _angular_core.Signal<string>;
|
|
2466
|
+
protected readonly captionClass: _angular_core.Signal<string>;
|
|
2324
2467
|
/**
|
|
2325
2468
|
* A plain section always shows its items — they carry their own icons, so they survive the collapsed
|
|
2326
2469
|
* rail. A collapsible group hides its children there instead: its children are sub-destinations and
|
|
@@ -2358,7 +2501,7 @@ declare class SdsNavGroup {
|
|
|
2358
2501
|
*/
|
|
2359
2502
|
declare class SdsNavItem {
|
|
2360
2503
|
protected readonly store: SidebarStore;
|
|
2361
|
-
readonly icon: _angular_core.InputSignal<"
|
|
2504
|
+
readonly icon: _angular_core.InputSignal<"copy" | "menu" | "search" | "table" | "filter" | "chart-column" | "clipboard-list" | "credit-card" | "external-link" | "languages" | "megaphone" | "monitor" | "store" | "user-round" | "home" | "user-plus" | "user-check" | "hand" | "users" | "bike" | "building-2" | "package" | "package-plus" | "package-open" | "rotate-ccw" | "bar-chart-3" | "log-out" | "panel-left-close" | "panel-left-open" | "panel-left" | "calendar" | "chevron-right" | "chevron-left" | "chevron-down" | "chevron-up" | "plus" | "minus" | "chevrons-left" | "chevrons-right" | "x" | "check" | "alert-circle" | "info" | "type" | "tag" | "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" | "eye" | "eye-off" | "user" | "check-circle" | "arrows-clockwise" | "file-text" | "hash" | "map-pin" | "inbox" | "arrow-right" | "refresh-cw" | "loader-circle" | "bug" | "scroll-text" | "moon" | "sun" | "search-x" | "command" | "sparkles" | null>;
|
|
2362
2505
|
readonly label: _angular_core.InputSignal<string>;
|
|
2363
2506
|
/** Router link target; when null, the item behaves as a button. */
|
|
2364
2507
|
readonly link: _angular_core.InputSignal<string | unknown[] | null>;
|
|
@@ -2368,9 +2511,303 @@ declare class SdsNavItem {
|
|
|
2368
2511
|
readonly select: _angular_core.OutputEmitterRef<void>;
|
|
2369
2512
|
protected readonly collapsed: _angular_core.WritableSignal<boolean>;
|
|
2370
2513
|
protected itemClass(isActive: boolean): string;
|
|
2514
|
+
/**
|
|
2515
|
+
* The left accent bar on an active item — the strongest "selected" cue, and the one that survives a
|
|
2516
|
+
* grayscale brand where a tinted pill alone is nearly invisible. brand-600 on the light rail, white on
|
|
2517
|
+
* the dark one; on a coloured brand it is the brand colour, matching the certicheck accent bar.
|
|
2518
|
+
*/
|
|
2519
|
+
protected readonly accentBarClass: _angular_core.Signal<string>;
|
|
2371
2520
|
static ɵfac: _angular_core.ɵɵFactoryDeclaration<SdsNavItem, never>;
|
|
2372
2521
|
static ɵcmp: _angular_core.ɵɵComponentDeclaration<SdsNavItem, "sds-nav-item", never, { "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": true; "isSignal": true; }; "link": { "alias": "link"; "required": false; "isSignal": true; }; "exact": { "alias": "exact"; "required": false; "isSignal": true; }; "active": { "alias": "active"; "required": false; "isSignal": true; }; }, { "select": "select"; }, never, never, true, never>;
|
|
2373
2522
|
}
|
|
2374
2523
|
|
|
2375
|
-
|
|
2376
|
-
|
|
2524
|
+
type SdsUserMenuAppearance = 'surface' | 'on-brand';
|
|
2525
|
+
type SdsUserMenuAlign = 'start' | 'end';
|
|
2526
|
+
/**
|
|
2527
|
+
* The signed-in user's trigger and dropdown for the top bar: an avatar (with the name and email beside
|
|
2528
|
+
* it on wider screens) that opens a panel with a gradient header and whatever menu rows the app projects
|
|
2529
|
+
* — profile, settings, sign out. The library deliberately owns no fixed set of actions, because what
|
|
2530
|
+
* belongs here differs per app; project <sds-menu-item> (or any markup) into the default slot.
|
|
2531
|
+
*
|
|
2532
|
+
* It manages its own open state, closes on outside click, on Escape, and whenever a menu row is
|
|
2533
|
+
* activated, restoring focus to the trigger. Two appearances so the trigger sits correctly on either
|
|
2534
|
+
* bar: `surface` (default) for a light / glass bar, `on-brand` for the dark brand bar — the same default
|
|
2535
|
+
* as its top-bar siblings sds-theme-toggle and sds-search-command.
|
|
2536
|
+
*
|
|
2537
|
+
* It is a disclosure (aria-haspopup + aria-expanded on the trigger), not an ARIA menu widget: the rows
|
|
2538
|
+
* are ordinary links/buttons the app projects, navigated with Tab like any popover.
|
|
2539
|
+
*
|
|
2540
|
+
* @example
|
|
2541
|
+
* <sds-user-menu name="Souhail AIT SAID" email="souhail@example.com" status="online" appearance="surface">
|
|
2542
|
+
* <sds-menu-item icon="user" label="Profil" link="/profile" />
|
|
2543
|
+
* <sds-menu-item icon="settings" label="Paramètres" link="/settings" />
|
|
2544
|
+
* <sds-menu-item icon="log-out" label="Se déconnecter" tone="danger" (select)="signOut()" />
|
|
2545
|
+
* </sds-user-menu>
|
|
2546
|
+
*/
|
|
2547
|
+
declare class SdsUserMenu {
|
|
2548
|
+
private readonly el;
|
|
2549
|
+
private readonly trigger;
|
|
2550
|
+
readonly name: _angular_core.InputSignal<string>;
|
|
2551
|
+
readonly email: _angular_core.InputSignal<string>;
|
|
2552
|
+
readonly initials: _angular_core.InputSignal<string>;
|
|
2553
|
+
readonly src: _angular_core.InputSignal<string | null>;
|
|
2554
|
+
readonly status: _angular_core.InputSignal<SdsAvatarStatus | null>;
|
|
2555
|
+
/** `surface` (default) for a light / glass bar; `on-brand` for the dark brand bar. */
|
|
2556
|
+
readonly appearance: _angular_core.InputSignal<SdsUserMenuAppearance>;
|
|
2557
|
+
/** Which edge the panel aligns to. `end` (default) hangs the panel from the right of the trigger. */
|
|
2558
|
+
readonly align: _angular_core.InputSignal<SdsUserMenuAlign>;
|
|
2559
|
+
/** Show the name/email beside the avatar (≥ sm). Turn off for an avatar-only trigger. */
|
|
2560
|
+
readonly showDetails: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
2561
|
+
/** Trigger avatar box size in px. */
|
|
2562
|
+
readonly avatarSize: _angular_core.InputSignal<number>;
|
|
2563
|
+
/** Override the trigger avatar's initials background; defaults per appearance. */
|
|
2564
|
+
readonly avatarBgClass: _angular_core.InputSignal<string | null>;
|
|
2565
|
+
/** Accessible name for the trigger (icon/avatar only when details are hidden). */
|
|
2566
|
+
readonly menuLabel: _angular_core.InputSignal<string>;
|
|
2567
|
+
readonly openChange: _angular_core.OutputEmitterRef<boolean>;
|
|
2568
|
+
protected readonly open: _angular_core.WritableSignal<boolean>;
|
|
2569
|
+
protected toggle(): void;
|
|
2570
|
+
protected close(): void;
|
|
2571
|
+
protected onDocumentClick(event: MouseEvent): void;
|
|
2572
|
+
protected onEscape(): void;
|
|
2573
|
+
/** Close when any actionable row (link or button) inside the panel is activated. */
|
|
2574
|
+
protected onPanelClick(event: MouseEvent): void;
|
|
2575
|
+
private readonly onBrand;
|
|
2576
|
+
protected readonly resolvedAvatarBg: _angular_core.Signal<string>;
|
|
2577
|
+
protected readonly headerAvatarBg: _angular_core.Signal<string>;
|
|
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
|
+
protected readonly nameClass: _angular_core.Signal<"text-white" | "text-ink">;
|
|
2580
|
+
protected readonly emailClass: _angular_core.Signal<"text-white/70" | "text-ink-faint">;
|
|
2581
|
+
protected readonly chevronClass: _angular_core.Signal<"text-white/70" | "text-ink-faint">;
|
|
2582
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<SdsUserMenu, never>;
|
|
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
|
+
}
|
|
2585
|
+
|
|
2586
|
+
type SdsMenuItemTone = 'default' | 'danger';
|
|
2587
|
+
/**
|
|
2588
|
+
* A single row inside a menu surface (the {@link SdsUserMenu} dropdown, or any custom popover). Renders
|
|
2589
|
+
* an anchor when [link] is set — with the Router — or a button otherwise, and emits {@link select} on
|
|
2590
|
+
* activation. The parent menu closes itself when an item is activated, so an item never has to reach
|
|
2591
|
+
* back into the menu.
|
|
2592
|
+
*
|
|
2593
|
+
* `tone="danger"` paints a destructive action (sign out, delete). Trailing content (a shortcut hint, a
|
|
2594
|
+
* count) projects into the default slot after the label.
|
|
2595
|
+
*
|
|
2596
|
+
* @example
|
|
2597
|
+
* <sds-menu-item icon="user" label="Profil" link="/profile" />
|
|
2598
|
+
* <sds-menu-item icon="log-out" label="Se déconnecter" tone="danger" (select)="signOut()" />
|
|
2599
|
+
*/
|
|
2600
|
+
declare class SdsMenuItem {
|
|
2601
|
+
readonly icon: _angular_core.InputSignal<"copy" | "menu" | "search" | "table" | "filter" | "chart-column" | "clipboard-list" | "credit-card" | "external-link" | "languages" | "megaphone" | "monitor" | "store" | "user-round" | "home" | "user-plus" | "user-check" | "hand" | "users" | "bike" | "building-2" | "package" | "package-plus" | "package-open" | "rotate-ccw" | "bar-chart-3" | "log-out" | "panel-left-close" | "panel-left-open" | "panel-left" | "calendar" | "chevron-right" | "chevron-left" | "chevron-down" | "chevron-up" | "plus" | "minus" | "chevrons-left" | "chevrons-right" | "x" | "check" | "alert-circle" | "info" | "type" | "tag" | "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" | "eye" | "eye-off" | "user" | "check-circle" | "arrows-clockwise" | "file-text" | "hash" | "map-pin" | "inbox" | "arrow-right" | "refresh-cw" | "loader-circle" | "bug" | "scroll-text" | "moon" | "sun" | "search-x" | "command" | "sparkles" | null>;
|
|
2602
|
+
readonly label: _angular_core.InputSignal<string>;
|
|
2603
|
+
/** Router link target; when null (default) the item renders as a button. */
|
|
2604
|
+
readonly link: _angular_core.InputSignal<string | unknown[] | null>;
|
|
2605
|
+
readonly tone: _angular_core.InputSignal<SdsMenuItemTone>;
|
|
2606
|
+
readonly disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
2607
|
+
readonly select: _angular_core.OutputEmitterRef<void>;
|
|
2608
|
+
protected readonly rowClass: _angular_core.Signal<string>;
|
|
2609
|
+
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>;
|
|
2611
|
+
}
|
|
2612
|
+
|
|
2613
|
+
/** One searchable entry. `group` buckets it under a heading; `keywords` widen what the filter matches. */
|
|
2614
|
+
interface SdsSearchItem {
|
|
2615
|
+
/** Stable identity, also used to build the option's DOM id. */
|
|
2616
|
+
id: string;
|
|
2617
|
+
label: string;
|
|
2618
|
+
icon?: SdsIconName;
|
|
2619
|
+
/** Optional section heading; items sharing a group render together. */
|
|
2620
|
+
group?: string;
|
|
2621
|
+
/** Extra terms the filter should match beyond the label (synonyms, a route, an acronym). */
|
|
2622
|
+
keywords?: string;
|
|
2623
|
+
disabled?: boolean;
|
|
2624
|
+
}
|
|
2625
|
+
type SdsSearchAppearance = 'surface' | 'on-brand';
|
|
2626
|
+
interface Section {
|
|
2627
|
+
label: string;
|
|
2628
|
+
items: SdsSearchItem[];
|
|
2629
|
+
}
|
|
2630
|
+
/**
|
|
2631
|
+
* A command-palette search: a trigger pill (search icon, placeholder, a ⌘K hint) that opens a modal with
|
|
2632
|
+
* a search field, grouped results and keyboard navigation. It is data-driven — the app passes `[items]`
|
|
2633
|
+
* and handles `(select)` — so the library stays router-agnostic; ⌘K / Ctrl-K opens it from anywhere.
|
|
2634
|
+
*
|
|
2635
|
+
* When the field is empty the items show as quick navigation; typing filters by label and keywords
|
|
2636
|
+
* (accent-insensitive). Arrow keys move the highlight, Enter selects, Escape closes. Hide the built-in
|
|
2637
|
+
* pill with `[showTrigger]="false"` and drive it from your own control via a template ref: `cmd.open()`.
|
|
2638
|
+
*
|
|
2639
|
+
* @example
|
|
2640
|
+
* <sds-search-command
|
|
2641
|
+
* #cmd
|
|
2642
|
+
* appearance="surface"
|
|
2643
|
+
* [items]="navItems"
|
|
2644
|
+
* (select)="router.navigateByUrl($event.id)"
|
|
2645
|
+
* />
|
|
2646
|
+
*/
|
|
2647
|
+
declare class SdsSearchCommand {
|
|
2648
|
+
private readonly document;
|
|
2649
|
+
private readonly searchInput;
|
|
2650
|
+
private readonly overlay;
|
|
2651
|
+
/** The searchable entries. Order is preserved; when the field is empty they show as quick navigation. */
|
|
2652
|
+
readonly items: _angular_core.InputSignal<SdsSearchItem[]>;
|
|
2653
|
+
/** Placeholder on the trigger pill and the search field. */
|
|
2654
|
+
readonly placeholder: _angular_core.InputSignal<string>;
|
|
2655
|
+
/** Show the built-in trigger pill. Turn off to drive the palette from your own control (`cmd.open()`). */
|
|
2656
|
+
readonly showTrigger: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
2657
|
+
/** Enable the global ⌘K / Ctrl-K shortcut. */
|
|
2658
|
+
readonly hotkey: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
2659
|
+
/** Trigger pill minimum width in px, so it does not collapse in a flexible top-bar slot. */
|
|
2660
|
+
readonly triggerMinWidth: _angular_core.InputSignal<number>;
|
|
2661
|
+
/** `surface` (default) for a light / glass bar; `on-brand` for the dark brand bar. */
|
|
2662
|
+
readonly appearance: _angular_core.InputSignal<SdsSearchAppearance>;
|
|
2663
|
+
/**
|
|
2664
|
+
* User-facing copy. French defaults; a multilingual app passes translated values (the trigger and the
|
|
2665
|
+
* field share `placeholder`, and `searchLabel` is the accessible name for both).
|
|
2666
|
+
*/
|
|
2667
|
+
readonly searchLabel: _angular_core.InputSignal<string>;
|
|
2668
|
+
readonly clearLabel: _angular_core.InputSignal<string>;
|
|
2669
|
+
readonly emptyLabel: _angular_core.InputSignal<string>;
|
|
2670
|
+
readonly selectHint: _angular_core.InputSignal<string>;
|
|
2671
|
+
readonly navigateHint: _angular_core.InputSignal<string>;
|
|
2672
|
+
readonly closeHint: _angular_core.InputSignal<string>;
|
|
2673
|
+
readonly select: _angular_core.OutputEmitterRef<SdsSearchItem>;
|
|
2674
|
+
readonly openChange: _angular_core.OutputEmitterRef<boolean>;
|
|
2675
|
+
protected readonly isOpen: _angular_core.WritableSignal<boolean>;
|
|
2676
|
+
protected readonly query: _angular_core.WritableSignal<string>;
|
|
2677
|
+
/** DOM id of the highlighted option, or null. Kept as the id (not an index) so the list can regroup. */
|
|
2678
|
+
protected readonly activeId: _angular_core.WritableSignal<string | null>;
|
|
2679
|
+
/** The element focused before the palette opened, restored to it on close (WAI-ARIA dialog pattern). */
|
|
2680
|
+
private restoreFocusTo;
|
|
2681
|
+
constructor();
|
|
2682
|
+
open(): void;
|
|
2683
|
+
close(): void;
|
|
2684
|
+
toggle(): void;
|
|
2685
|
+
private readonly filtered;
|
|
2686
|
+
protected readonly sections: _angular_core.Signal<Section[]>;
|
|
2687
|
+
private readonly flat;
|
|
2688
|
+
protected optionId(item: SdsSearchItem): string;
|
|
2689
|
+
protected onInput(event: Event): void;
|
|
2690
|
+
protected clear(): void;
|
|
2691
|
+
protected setActiveById(id: string): void;
|
|
2692
|
+
protected choose(item: SdsSearchItem): void;
|
|
2693
|
+
protected onPanelKeydown(event: KeyboardEvent): void;
|
|
2694
|
+
protected onGlobalKeydown(event: KeyboardEvent): void;
|
|
2695
|
+
private trapTab;
|
|
2696
|
+
private move;
|
|
2697
|
+
private readonly onBrand;
|
|
2698
|
+
protected readonly triggerClass: _angular_core.Signal<"bg-white/10 hover:bg-white/15 focus-visible:ring-white/40" | "bg-muted hover:bg-brand-50 border border-transparent hover:border-brand-200 focus-visible:ring-brand-500/40">;
|
|
2699
|
+
protected readonly triggerTextClass: _angular_core.Signal<"text-ink-faint" | "text-white/80">;
|
|
2700
|
+
protected readonly kbdClass: _angular_core.Signal<"border-white/25 text-white/70" | "border-border bg-surface text-ink-faint">;
|
|
2701
|
+
protected readonly hotkeyLabel: _angular_core.Signal<"⌘K" | "Ctrl K">;
|
|
2702
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<SdsSearchCommand, never>;
|
|
2703
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<SdsSearchCommand, "sds-search-command", never, { "items": { "alias": "items"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "showTrigger": { "alias": "showTrigger"; "required": false; "isSignal": true; }; "hotkey": { "alias": "hotkey"; "required": false; "isSignal": true; }; "triggerMinWidth": { "alias": "triggerMinWidth"; "required": false; "isSignal": true; }; "appearance": { "alias": "appearance"; "required": false; "isSignal": true; }; "searchLabel": { "alias": "searchLabel"; "required": false; "isSignal": true; }; "clearLabel": { "alias": "clearLabel"; "required": false; "isSignal": true; }; "emptyLabel": { "alias": "emptyLabel"; "required": false; "isSignal": true; }; "selectHint": { "alias": "selectHint"; "required": false; "isSignal": true; }; "navigateHint": { "alias": "navigateHint"; "required": false; "isSignal": true; }; "closeHint": { "alias": "closeHint"; "required": false; "isSignal": true; }; }, { "select": "select"; "openChange": "openChange"; }, never, never, true, never>;
|
|
2704
|
+
}
|
|
2705
|
+
|
|
2706
|
+
type SdsLanguageSwitcherAppearance = 'surface' | 'on-brand';
|
|
2707
|
+
type SdsLanguageSwitcherAlign = 'start' | 'end';
|
|
2708
|
+
type SdsLanguageSwitcherDirection = 'down' | 'up';
|
|
2709
|
+
/**
|
|
2710
|
+
* One selectable language. Pass either this shape or a bare code string in [languages].
|
|
2711
|
+
*/
|
|
2712
|
+
interface SdsLanguageOption {
|
|
2713
|
+
/** Language code, e.g. 'fr', 'de', 'en'. Shown uppercased in the trigger. */
|
|
2714
|
+
code: string;
|
|
2715
|
+
/** Human-readable name shown in the list, e.g. 'Français'. Defaults to `code.toUpperCase()`. */
|
|
2716
|
+
label?: string;
|
|
2717
|
+
}
|
|
2718
|
+
/**
|
|
2719
|
+
* The language picker for the top bar: a compact pill (globe icon + the active code) that opens a panel
|
|
2720
|
+
* listing exactly the languages the app supports, each row marked selected for the current one.
|
|
2721
|
+
*
|
|
2722
|
+
* The library owns no i18n engine — every app uses a different one (ngx-translate, Transloco, per-locale
|
|
2723
|
+
* URLs). So this is a pure, controlled control: the app passes the supported [languages] and the [current]
|
|
2724
|
+
* code, and reacts to the choice. `current` is a two-way `model`, so bind `[(current)]="lang"` for optimistic
|
|
2725
|
+
* echo, or just listen to `(currentChange)` and call your own `translate.use($event)`. Rows show each
|
|
2726
|
+
* language's human label (pass it in the option, or let it default to the uppercased code).
|
|
2727
|
+
*
|
|
2728
|
+
* It is a sibling of sds-user-menu / sds-theme-toggle / sds-search-command and shares their chrome: the same
|
|
2729
|
+
* two appearances (`surface` default for a light/glass bar, `on-brand` for the dark brand bar), the same
|
|
2730
|
+
* disclosure mechanics (closes on outside click, on Escape, and on selection, restoring focus to the trigger),
|
|
2731
|
+
* and the same panel styling and open animation — so the three top-bar controls read as one set.
|
|
2732
|
+
*
|
|
2733
|
+
* The panel is appended to `document.body` while open and positioned against the trigger (like sds-select),
|
|
2734
|
+
* so a clipping ancestor — a bar with `overflow:hidden`, or a `glass` bar whose `backdrop-filter` is a
|
|
2735
|
+
* containing block — can never cut it off or paint over it. It repositions on scroll/resize and is removed
|
|
2736
|
+
* on close. Accessibility follows the APG select-only combobox: focus stays on the trigger, and Arrow/Home/
|
|
2737
|
+
* End/Enter/Escape drive a highlighted option surfaced via `aria-activedescendant` (works even though the
|
|
2738
|
+
* listbox lives in `<body>`).
|
|
2739
|
+
*
|
|
2740
|
+
* @example
|
|
2741
|
+
* <sds-language-switcher
|
|
2742
|
+
* [languages]="[{ code: 'fr', label: 'Français' }, { code: 'de', label: 'Deutsch' }, { code: 'en', label: 'English' }]"
|
|
2743
|
+
* [current]="lang()"
|
|
2744
|
+
* menuLabel="Changer de langue"
|
|
2745
|
+
* (currentChange)="translate.use($event)"
|
|
2746
|
+
* />
|
|
2747
|
+
*
|
|
2748
|
+
* @example
|
|
2749
|
+
* <!-- Bare codes are fine; rows fall back to the uppercased code. -->
|
|
2750
|
+
* <sds-language-switcher [languages]="['fr', 'de', 'en']" [(current)]="lang" />
|
|
2751
|
+
*/
|
|
2752
|
+
declare class SdsLanguageSwitcher implements OnDestroy {
|
|
2753
|
+
private readonly el;
|
|
2754
|
+
private readonly injector;
|
|
2755
|
+
private readonly trigger;
|
|
2756
|
+
protected readonly panelId: string;
|
|
2757
|
+
/** The supported languages — either `{ code, label }` options or bare code strings. */
|
|
2758
|
+
readonly languages: _angular_core.InputSignal<readonly (string | SdsLanguageOption)[]>;
|
|
2759
|
+
/** The active language code. Two-way: `[(current)]` echoes the choice, or listen to `(currentChange)`. */
|
|
2760
|
+
readonly current: _angular_core.ModelSignal<string>;
|
|
2761
|
+
/** `surface` (default) for a light / glass bar; `on-brand` for the dark brand bar. */
|
|
2762
|
+
readonly appearance: _angular_core.InputSignal<SdsLanguageSwitcherAppearance>;
|
|
2763
|
+
/** Which edge the panel aligns to. `end` (default) hangs it from the right of the trigger. */
|
|
2764
|
+
readonly align: _angular_core.InputSignal<SdsLanguageSwitcherAlign>;
|
|
2765
|
+
/** `up` prefers opening the panel above the trigger — for a switcher near the bottom of the page. */
|
|
2766
|
+
readonly direction: _angular_core.InputSignal<SdsLanguageSwitcherDirection>;
|
|
2767
|
+
/** Accessible name for the trigger and panel. */
|
|
2768
|
+
readonly menuLabel: _angular_core.InputSignal<string>;
|
|
2769
|
+
/** Optional visible header above the list (e.g. "Langue"). Omitted when empty. */
|
|
2770
|
+
readonly heading: _angular_core.InputSignal<string>;
|
|
2771
|
+
readonly openChange: _angular_core.OutputEmitterRef<boolean>;
|
|
2772
|
+
protected readonly open: _angular_core.WritableSignal<boolean>;
|
|
2773
|
+
protected readonly highlightedIndex: _angular_core.WritableSignal<number>;
|
|
2774
|
+
private panelEl;
|
|
2775
|
+
/** Normalise the mixed `languages` input to `{ code, label }`, defaulting the label to the code. */
|
|
2776
|
+
protected readonly options: _angular_core.Signal<SdsLanguageOption[]>;
|
|
2777
|
+
/**
|
|
2778
|
+
* The code treated as active everywhere — trigger label AND the selected row. Falls back to the first
|
|
2779
|
+
* option when `current` is unset, so the pill and the checked row can never disagree.
|
|
2780
|
+
*/
|
|
2781
|
+
protected readonly effectiveCode: _angular_core.Signal<string>;
|
|
2782
|
+
/** Uppercased code shown in the trigger. */
|
|
2783
|
+
protected readonly currentCode: _angular_core.Signal<string>;
|
|
2784
|
+
protected readonly activeOptionId: _angular_core.Signal<string | null>;
|
|
2785
|
+
protected optionId(i: number): string;
|
|
2786
|
+
protected toggle(): void;
|
|
2787
|
+
protected openPanel(): void;
|
|
2788
|
+
protected close(returnFocus?: boolean): void;
|
|
2789
|
+
protected choose(code: string): void;
|
|
2790
|
+
protected onDocumentClick(event: MouseEvent): void;
|
|
2791
|
+
protected onEscape(): void;
|
|
2792
|
+
protected onTriggerKeydown(event: KeyboardEvent): void;
|
|
2793
|
+
private initHighlight;
|
|
2794
|
+
private move;
|
|
2795
|
+
private highlight;
|
|
2796
|
+
private chooseHighlighted;
|
|
2797
|
+
private scrollHighlightedIntoView;
|
|
2798
|
+
private readonly reflow;
|
|
2799
|
+
private listening;
|
|
2800
|
+
private addReflowListeners;
|
|
2801
|
+
private removeReflowListeners;
|
|
2802
|
+
private positionPanel;
|
|
2803
|
+
ngOnDestroy(): void;
|
|
2804
|
+
private readonly onBrand;
|
|
2805
|
+
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-white/70" | "text-ink-faint">;
|
|
2807
|
+
protected rowClass(index: number, selected: boolean): string;
|
|
2808
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<SdsLanguageSwitcher, never>;
|
|
2809
|
+
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>;
|
|
2810
|
+
}
|
|
2811
|
+
|
|
2812
|
+
export { SDS_ICONS, SDS_PHONE_COUNTRIES, SdsAccordion, SdsAccordionContent, SdsAccordionHeader, SdsAccordionPanel, SdsAccordionStore, SdsAvatar, SdsBadge, SdsButton, SdsCalendar, SdsCard, SdsCheckbox, SdsDatePicker, SdsIcon, SdsInput, SdsInputNumber, SdsLanguageSwitcher, SdsLocalizedInput, SdsMenuItem, SdsMultiSelect, SdsNavGroup, SdsNavItem, SdsOtpInput, SdsPaginator, SdsPhoneInput, SdsSearchCommand, SdsSelect, SdsSelectEmpty, SdsSelectFooter, SdsSelectOption, SdsShell, SdsSidebar, SdsTab, SdsTabList, SdsTabPanel, SdsTabPanels, SdsTable, SdsTableCell, SdsTableRowExpansion, SdsTabs, SdsTabsStore, SdsTextarea, SdsThemeService, SdsThemeToggle, SdsToastHost, SdsToastService, SdsToggleSwitch, SdsTopbar, SdsUserMenu, SidebarStore, addDays, addMonths, addMonthsKeepDay, formatDdMmYyyy, formatHhMm, isOutOfRange, isSameDay, isoDay, pad2, sdsFormatNational, sdsMatchDialCode, sdsNormalizeSignificant, startOfDay, startOfMonth };
|
|
2813
|
+
export type { SdsAccordionActive, SdsAccordionValue, SdsAvatarStatus, SdsBadgeSize, SdsBadgeVariant, SdsButtonShape, SdsButtonSize, SdsButtonVariant, SdsCardVariant, SdsCheckboxSize, SdsDatePickerSize, SdsIconName, SdsIconSize, SdsInputAppearance, SdsInputNumberAppearance, SdsInputNumberButtonLayout, SdsInputNumberCurrencyDisplay, SdsInputNumberMode, SdsInputNumberSize, SdsInputShape, SdsInputSize, SdsInputType, SdsLanguageOption, SdsLanguageSwitcherAlign, SdsLanguageSwitcherAppearance, SdsLanguageSwitcherDirection, SdsLocalizedInputSize, SdsLocalizedValue, SdsMenuItemTone, SdsMultiSelectDisplay, SdsMultiSelectSize, SdsOtpInputSize, SdsPaginatorSize, SdsPaginatorState, SdsPhoneCountry, SdsPhoneInputSize, SdsPhoneValue, SdsSearchAppearance, SdsSearchItem, SdsSelectAppearance, SdsSelectEmptyContext, SdsSelectFooterContext, SdsSelectOptionContext, SdsSelectSize, SdsShellBackground, SdsSidebarAppearance, SdsSortOrder, SdsTabValue, SdsTableCellContext, SdsTableColumn, SdsTableLazyEvent, SdsTableRowExpansionContext, SdsTableSize, SdsTableSortEvent, SdsTextareaResize, SdsTextareaSize, SdsTheme, SdsThemeToggleAppearance, SdsToast, SdsToastKind, SdsToggleSwitchSize, SdsTopbarAppearance, SdsUserMenuAlign, SdsUserMenuAppearance };
|