@besaitech/ng-design-system 0.0.36 → 0.0.38
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
|
@@ -96,7 +96,7 @@ type SdsIconSize = 'sm' | 'md' | 'lg' | 'xl';
|
|
|
96
96
|
declare class SdsIcon {
|
|
97
97
|
private readonly sanitizer;
|
|
98
98
|
/** Icon identifier from the registry. */
|
|
99
|
-
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" | "
|
|
99
|
+
readonly name: _angular_core.InputSignal<"filter" | "copy" | "menu" | "search" | "table" | "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" | "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">;
|
|
100
100
|
/** Square size: a pixel number, a numeric string, or a keyword (sm·md·lg·xl). */
|
|
101
101
|
readonly size: _angular_core.InputSignalWithTransform<number, string | number>;
|
|
102
102
|
/** Stroke width of the line icon. */
|
|
@@ -126,7 +126,7 @@ declare class SdsButton {
|
|
|
126
126
|
* most important control.
|
|
127
127
|
*/
|
|
128
128
|
readonly shape: _angular_core.InputSignal<SdsButtonShape>;
|
|
129
|
-
readonly type: _angular_core.InputSignal<"
|
|
129
|
+
readonly type: _angular_core.InputSignal<"reset" | "submit" | "button">;
|
|
130
130
|
readonly disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
131
131
|
readonly loading: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
132
132
|
/** Full-width button. */
|
|
@@ -188,8 +188,8 @@ declare class SdsInput implements ControlValueAccessor {
|
|
|
188
188
|
* is its only name.
|
|
189
189
|
*/
|
|
190
190
|
readonly clearLabel: _angular_core.InputSignal<string>;
|
|
191
|
-
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" | "
|
|
192
|
-
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" | "
|
|
191
|
+
readonly leadingIcon: _angular_core.InputSignal<"filter" | "copy" | "menu" | "search" | "table" | "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" | "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" | null>;
|
|
192
|
+
readonly trailingIcon: _angular_core.InputSignal<"filter" | "copy" | "menu" | "search" | "table" | "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" | "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" | null>;
|
|
193
193
|
/**
|
|
194
194
|
* A CLICKABLE trailing icon, for the affordances that belong to the field itself — password reveal
|
|
195
195
|
* above all. Distinct from {@link trailingIcon}, which is decorative and explicitly
|
|
@@ -199,7 +199,7 @@ declare class SdsInput implements ControlValueAccessor {
|
|
|
199
199
|
* Always pair it with {@link trailingActionLabel} — an icon-only button with no accessible name is
|
|
200
200
|
* unusable by a screen reader. For a toggle, also bind {@link trailingActionPressed}.
|
|
201
201
|
*/
|
|
202
|
-
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" | "
|
|
202
|
+
readonly trailingAction: _angular_core.InputSignal<"filter" | "copy" | "menu" | "search" | "table" | "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" | "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" | null>;
|
|
203
203
|
/** Accessible name for {@link trailingAction}. Translate it in the consuming app. */
|
|
204
204
|
readonly trailingActionLabel: _angular_core.InputSignal<string>;
|
|
205
205
|
/** `aria-pressed` for a toggling action (e.g. show/hide password). Null renders no attribute. */
|
|
@@ -378,9 +378,9 @@ declare class SdsToggleSwitch implements ControlValueAccessor {
|
|
|
378
378
|
/** Value emitted/stored when the switch is off. */
|
|
379
379
|
readonly falseValue: _angular_core.InputSignal<unknown>;
|
|
380
380
|
/** Icon shown on the knob when checked. */
|
|
381
|
-
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" | "
|
|
381
|
+
readonly onIcon: _angular_core.InputSignal<"filter" | "copy" | "menu" | "search" | "table" | "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" | "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" | null>;
|
|
382
382
|
/** Icon shown on the knob when unchecked. */
|
|
383
|
-
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" | "
|
|
383
|
+
readonly offIcon: _angular_core.InputSignal<"filter" | "copy" | "menu" | "search" | "table" | "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" | "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" | null>;
|
|
384
384
|
readonly hint: _angular_core.InputSignal<string>;
|
|
385
385
|
readonly error: _angular_core.InputSignal<string>;
|
|
386
386
|
/**
|
|
@@ -495,6 +495,10 @@ declare class SdsCard {
|
|
|
495
495
|
|
|
496
496
|
/** Small, dependency-free date helpers (day-granularity, local time). */
|
|
497
497
|
declare function startOfDay(d: Date): Date;
|
|
498
|
+
/** Zero-pad a number to two digits (e.g. 9 → "09"). */
|
|
499
|
+
declare function pad2(n: number): string;
|
|
500
|
+
/** Format a date's time-of-day as HH:mm (24h, local time). */
|
|
501
|
+
declare function formatHhMm(d: Date): string;
|
|
498
502
|
declare function startOfMonth(d: Date): Date;
|
|
499
503
|
declare function addDays(d: Date, n: number): Date;
|
|
500
504
|
declare function addMonths(d: Date, n: number): Date;
|
|
@@ -531,6 +535,18 @@ declare class SdsCalendar {
|
|
|
531
535
|
readonly firstDayOfWeek: _angular_core.InputSignal<0 | 1>;
|
|
532
536
|
readonly locale: _angular_core.InputSignal<string>;
|
|
533
537
|
readonly showActions: _angular_core.InputSignal<boolean>;
|
|
538
|
+
/** When true, a time editor (HH:mm, 24h) is shown and the value keeps its time-of-day. */
|
|
539
|
+
readonly showTime: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
540
|
+
/** When true, a "done" action is shown (used by the overlay picker to close the panel). */
|
|
541
|
+
readonly showDone: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
542
|
+
/** Visible label of the time editor. Translate it in the consuming app. */
|
|
543
|
+
readonly timeLabel: _angular_core.InputSignal<string>;
|
|
544
|
+
/** Accessible name of the hours field (it is a bare numeric input). */
|
|
545
|
+
readonly hoursLabel: _angular_core.InputSignal<string>;
|
|
546
|
+
/** Accessible name of the minutes field. */
|
|
547
|
+
readonly minutesLabel: _angular_core.InputSignal<string>;
|
|
548
|
+
/** Visible text of the "done" action (shown when {@link showDone} is true). */
|
|
549
|
+
readonly doneLabel: _angular_core.InputSignal<string>;
|
|
534
550
|
/**
|
|
535
551
|
* Accessible name for the calendar container. French default so existing consumers are unchanged,
|
|
536
552
|
* but an app serving more than one language MUST translate it.
|
|
@@ -553,6 +569,8 @@ declare class SdsCalendar {
|
|
|
553
569
|
readonly clearActionLabel: _angular_core.InputSignal<string>;
|
|
554
570
|
/** Emitted when a concrete date is picked (day click or "Aujourd'hui"). */
|
|
555
571
|
readonly dateSelect: _angular_core.OutputEmitterRef<Date>;
|
|
572
|
+
/** Emitted when the "done" action is used (see {@link showDone}). */
|
|
573
|
+
readonly done: _angular_core.OutputEmitterRef<void>;
|
|
556
574
|
protected readonly view: _angular_core.WritableSignal<CalView>;
|
|
557
575
|
protected readonly viewDate: _angular_core.WritableSignal<Date>;
|
|
558
576
|
protected readonly focusedDate: _angular_core.WritableSignal<Date>;
|
|
@@ -562,6 +580,9 @@ declare class SdsCalendar {
|
|
|
562
580
|
protected readonly navBtn = "inline-flex h-8 w-8 items-center justify-center rounded-control text-ink-soft hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-500";
|
|
563
581
|
protected readonly titleBtn = "rounded-control px-2 py-1 capitalize hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-500";
|
|
564
582
|
protected readonly actionBtn = "rounded-control px-2 py-1 text-xs font-medium text-brand-700 hover:bg-brand-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-500 disabled:cursor-not-allowed disabled:opacity-40";
|
|
583
|
+
protected readonly doneBtn = "rounded-control bg-brand-600 px-3 py-1 text-xs font-semibold text-white hover:bg-brand-700 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-500";
|
|
584
|
+
protected readonly timeInput = "w-8 bg-transparent py-1 text-center text-sm text-ink outline-none disabled:cursor-not-allowed disabled:opacity-40";
|
|
585
|
+
protected readonly stepBtn = "flex h-3.5 w-5 items-center justify-center text-ink-faint transition-colors hover:text-ink focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-30";
|
|
565
586
|
protected readonly monthLong: _angular_core.Signal<string>;
|
|
566
587
|
protected readonly yearLabel: _angular_core.Signal<number>;
|
|
567
588
|
protected readonly decadeStart: _angular_core.Signal<number>;
|
|
@@ -583,10 +604,20 @@ declare class SdsCalendar {
|
|
|
583
604
|
protected prev(): void;
|
|
584
605
|
protected next(): void;
|
|
585
606
|
protected selectDay(d: Date): void;
|
|
607
|
+
/** Carry the previously-selected time-of-day onto a freshly-picked day (only when showTime). */
|
|
608
|
+
private applyTime;
|
|
586
609
|
protected selectMonth(m: number): void;
|
|
587
610
|
protected selectYear(y: number): void;
|
|
588
611
|
protected goToday(): void;
|
|
589
612
|
protected clear(): void;
|
|
613
|
+
protected readonly hoursText: _angular_core.Signal<string>;
|
|
614
|
+
protected readonly minutesText: _angular_core.Signal<string>;
|
|
615
|
+
protected setHours(raw: string): void;
|
|
616
|
+
protected setMinutes(raw: string): void;
|
|
617
|
+
/** Wrap hours within 0–23; never carries into the day. */
|
|
618
|
+
protected stepHours(delta: number): void;
|
|
619
|
+
/** Wrap minutes within 0–59; never carries into the hour. */
|
|
620
|
+
protected stepMinutes(delta: number): void;
|
|
590
621
|
protected onGridKeydown(e: KeyboardEvent): void;
|
|
591
622
|
/** Move focus to the active day cell (called when the panel opens). */
|
|
592
623
|
focusActiveCell(): void;
|
|
@@ -597,7 +628,7 @@ declare class SdsCalendar {
|
|
|
597
628
|
protected dayClass(cell: DayCell): string;
|
|
598
629
|
protected cellClass(selected: boolean, current: boolean, disabled: boolean): string;
|
|
599
630
|
static ɵfac: _angular_core.ɵɵFactoryDeclaration<SdsCalendar, never>;
|
|
600
|
-
static ɵcmp: _angular_core.ɵɵComponentDeclaration<SdsCalendar, "sds-calendar", never, { "value": { "alias": "value"; "required": false; "isSignal": true; }; "min": { "alias": "min"; "required": false; "isSignal": true; }; "max": { "alias": "max"; "required": false; "isSignal": true; }; "firstDayOfWeek": { "alias": "firstDayOfWeek"; "required": false; "isSignal": true; }; "locale": { "alias": "locale"; "required": false; "isSignal": true; }; "showActions": { "alias": "showActions"; "required": false; "isSignal": true; }; "calendarLabel": { "alias": "calendarLabel"; "required": false; "isSignal": true; }; "previousLabel": { "alias": "previousLabel"; "required": false; "isSignal": true; }; "nextLabel": { "alias": "nextLabel"; "required": false; "isSignal": true; }; "todayActionLabel": { "alias": "todayActionLabel"; "required": false; "isSignal": true; }; "clearActionLabel": { "alias": "clearActionLabel"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "dateSelect": "dateSelect"; }, never, never, true, never>;
|
|
631
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<SdsCalendar, "sds-calendar", never, { "value": { "alias": "value"; "required": false; "isSignal": true; }; "min": { "alias": "min"; "required": false; "isSignal": true; }; "max": { "alias": "max"; "required": false; "isSignal": true; }; "firstDayOfWeek": { "alias": "firstDayOfWeek"; "required": false; "isSignal": true; }; "locale": { "alias": "locale"; "required": false; "isSignal": true; }; "showActions": { "alias": "showActions"; "required": false; "isSignal": true; }; "showTime": { "alias": "showTime"; "required": false; "isSignal": true; }; "showDone": { "alias": "showDone"; "required": false; "isSignal": true; }; "timeLabel": { "alias": "timeLabel"; "required": false; "isSignal": true; }; "hoursLabel": { "alias": "hoursLabel"; "required": false; "isSignal": true; }; "minutesLabel": { "alias": "minutesLabel"; "required": false; "isSignal": true; }; "doneLabel": { "alias": "doneLabel"; "required": false; "isSignal": true; }; "calendarLabel": { "alias": "calendarLabel"; "required": false; "isSignal": true; }; "previousLabel": { "alias": "previousLabel"; "required": false; "isSignal": true; }; "nextLabel": { "alias": "nextLabel"; "required": false; "isSignal": true; }; "todayActionLabel": { "alias": "todayActionLabel"; "required": false; "isSignal": true; }; "clearActionLabel": { "alias": "clearActionLabel"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "dateSelect": "dateSelect"; "done": "done"; }, never, never, true, never>;
|
|
601
632
|
}
|
|
602
633
|
|
|
603
634
|
type SdsDatePickerSize = 'sm' | 'md' | 'lg';
|
|
@@ -627,8 +658,22 @@ declare class SdsDatePicker implements ControlValueAccessor, OnDestroy {
|
|
|
627
658
|
readonly clearable: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
628
659
|
readonly showActions: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
629
660
|
readonly disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
630
|
-
/**
|
|
661
|
+
/**
|
|
662
|
+
* When true, the calendar shows a time editor (HH:mm, 24h), the value keeps its time-of-day, and
|
|
663
|
+
* the field displays date + time. The overlay stays open on day-select so the time can be set;
|
|
664
|
+
* a "done" action (and click-away / Escape) closes it.
|
|
665
|
+
*/
|
|
666
|
+
readonly showTime: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
667
|
+
/** Custom display formatter for the DATE part (default dd/MM/yyyy). The time is appended as HH:mm. */
|
|
631
668
|
readonly format: _angular_core.InputSignal<(d: Date) => string>;
|
|
669
|
+
/** Visible label of the time editor (forwarded to the calendar). See {@link showTime}. */
|
|
670
|
+
readonly timeLabel: _angular_core.InputSignal<string>;
|
|
671
|
+
/** Accessible name of the hours field (forwarded to the calendar). */
|
|
672
|
+
readonly hoursLabel: _angular_core.InputSignal<string>;
|
|
673
|
+
/** Accessible name of the minutes field (forwarded to the calendar). */
|
|
674
|
+
readonly minutesLabel: _angular_core.InputSignal<string>;
|
|
675
|
+
/** Visible text of the calendar's "done" action, shown in the overlay when {@link showTime}. */
|
|
676
|
+
readonly doneLabel: _angular_core.InputSignal<string>;
|
|
632
677
|
/**
|
|
633
678
|
* Accessible name for the clear button. French default so existing consumers are unchanged, but an
|
|
634
679
|
* app serving more than one language MUST translate it — it is an icon-only control, so this string
|
|
@@ -671,6 +716,26 @@ declare class SdsDatePicker implements ControlValueAccessor, OnDestroy {
|
|
|
671
716
|
protected close(returnFocus?: boolean): void;
|
|
672
717
|
protected clear(event: Event): void;
|
|
673
718
|
protected onCalendarValue(v: Date | null): void;
|
|
719
|
+
/**
|
|
720
|
+
* A day was clicked in the overlay. Without a time editor, a day click is the whole selection, so
|
|
721
|
+
* close. With showTime, the user still needs to set the time, so keep the panel open (they close it
|
|
722
|
+
* with the "done" action, a click away, or Escape).
|
|
723
|
+
*/
|
|
724
|
+
protected onDateSelect(): void;
|
|
725
|
+
/**
|
|
726
|
+
* Escape closes the panel and consumes the event while the panel is open, so an ancestor modal does
|
|
727
|
+
* not also dismiss on the same keystroke (mirrors sds-select). When the panel is already closed, the
|
|
728
|
+
* event passes through so Escape can dismiss whatever contains the field.
|
|
729
|
+
*/
|
|
730
|
+
protected onEscape(event: Event): void;
|
|
731
|
+
/** The readonly trigger is not a button, so open the overlay on Enter / Space / ArrowDown too. */
|
|
732
|
+
protected onTriggerKeydown(event: Event): void;
|
|
733
|
+
/**
|
|
734
|
+
* Self-contained Tab trap for the overlay. The panel is relocated to document.body, so it sits
|
|
735
|
+
* outside any ancestor modal's focus trap; without this, tabbing off the last control would land on
|
|
736
|
+
* the page behind the dialog. Keeps Tab / Shift+Tab cycling within the panel's own focusables.
|
|
737
|
+
*/
|
|
738
|
+
protected onPanelKeydown(event: KeyboardEvent): void;
|
|
674
739
|
protected onDocumentClick(event: MouseEvent): void;
|
|
675
740
|
private readonly reflow;
|
|
676
741
|
private listening;
|
|
@@ -686,10 +751,13 @@ declare class SdsDatePicker implements ControlValueAccessor, OnDestroy {
|
|
|
686
751
|
registerOnTouched(fn: () => void): void;
|
|
687
752
|
setDisabledState(isDisabled: boolean): void;
|
|
688
753
|
static ɵfac: _angular_core.ɵɵFactoryDeclaration<SdsDatePicker, never>;
|
|
689
|
-
static ɵcmp: _angular_core.ɵɵComponentDeclaration<SdsDatePicker, "sds-date-picker", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "hint": { "alias": "hint"; "required": false; "isSignal": true; }; "error": { "alias": "error"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "min": { "alias": "min"; "required": false; "isSignal": true; }; "max": { "alias": "max"; "required": false; "isSignal": true; }; "firstDayOfWeek": { "alias": "firstDayOfWeek"; "required": false; "isSignal": true; }; "locale": { "alias": "locale"; "required": false; "isSignal": true; }; "inline": { "alias": "inline"; "required": false; "isSignal": true; }; "clearable": { "alias": "clearable"; "required": false; "isSignal": true; }; "showActions": { "alias": "showActions"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "format": { "alias": "format"; "required": false; "isSignal": true; }; "clearLabel": { "alias": "clearLabel"; "required": false; "isSignal": true; }; "openCalendarLabel": { "alias": "openCalendarLabel"; "required": false; "isSignal": true; }; "closeCalendarLabel": { "alias": "closeCalendarLabel"; "required": false; "isSignal": true; }; "panelLabel": { "alias": "panelLabel"; "required": false; "isSignal": true; }; "calendarLabel": { "alias": "calendarLabel"; "required": false; "isSignal": true; }; "previousLabel": { "alias": "previousLabel"; "required": false; "isSignal": true; }; "nextLabel": { "alias": "nextLabel"; "required": false; "isSignal": true; }; "todayActionLabel": { "alias": "todayActionLabel"; "required": false; "isSignal": true; }; "clearActionLabel": { "alias": "clearActionLabel"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
|
|
754
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<SdsDatePicker, "sds-date-picker", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "hint": { "alias": "hint"; "required": false; "isSignal": true; }; "error": { "alias": "error"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "min": { "alias": "min"; "required": false; "isSignal": true; }; "max": { "alias": "max"; "required": false; "isSignal": true; }; "firstDayOfWeek": { "alias": "firstDayOfWeek"; "required": false; "isSignal": true; }; "locale": { "alias": "locale"; "required": false; "isSignal": true; }; "inline": { "alias": "inline"; "required": false; "isSignal": true; }; "clearable": { "alias": "clearable"; "required": false; "isSignal": true; }; "showActions": { "alias": "showActions"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "showTime": { "alias": "showTime"; "required": false; "isSignal": true; }; "format": { "alias": "format"; "required": false; "isSignal": true; }; "timeLabel": { "alias": "timeLabel"; "required": false; "isSignal": true; }; "hoursLabel": { "alias": "hoursLabel"; "required": false; "isSignal": true; }; "minutesLabel": { "alias": "minutesLabel"; "required": false; "isSignal": true; }; "doneLabel": { "alias": "doneLabel"; "required": false; "isSignal": true; }; "clearLabel": { "alias": "clearLabel"; "required": false; "isSignal": true; }; "openCalendarLabel": { "alias": "openCalendarLabel"; "required": false; "isSignal": true; }; "closeCalendarLabel": { "alias": "closeCalendarLabel"; "required": false; "isSignal": true; }; "panelLabel": { "alias": "panelLabel"; "required": false; "isSignal": true; }; "calendarLabel": { "alias": "calendarLabel"; "required": false; "isSignal": true; }; "previousLabel": { "alias": "previousLabel"; "required": false; "isSignal": true; }; "nextLabel": { "alias": "nextLabel"; "required": false; "isSignal": true; }; "todayActionLabel": { "alias": "todayActionLabel"; "required": false; "isSignal": true; }; "clearActionLabel": { "alias": "clearActionLabel"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
|
|
690
755
|
}
|
|
691
756
|
|
|
692
757
|
type SdsSelectSize = 'sm' | 'md' | 'lg';
|
|
758
|
+
/** Field skin. `filled` is borderless on a muted ground (to sit inside a page, matching sds-input's
|
|
759
|
+
* filled appearance); `on-brand` is tuned for a dark surface. */
|
|
760
|
+
type SdsSelectAppearance = 'default' | 'filled' | 'on-brand';
|
|
693
761
|
interface NormOption$1 {
|
|
694
762
|
label: string;
|
|
695
763
|
value: unknown;
|
|
@@ -726,6 +794,7 @@ declare class SdsSelect implements ControlValueAccessor, OnDestroy {
|
|
|
726
794
|
readonly hint: _angular_core.InputSignal<string>;
|
|
727
795
|
readonly error: _angular_core.InputSignal<string>;
|
|
728
796
|
readonly size: _angular_core.InputSignal<SdsSelectSize>;
|
|
797
|
+
readonly appearance: _angular_core.InputSignal<SdsSelectAppearance>;
|
|
729
798
|
readonly disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
730
799
|
readonly clearable: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
731
800
|
readonly filter: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
@@ -739,6 +808,8 @@ declare class SdsSelect implements ControlValueAccessor, OnDestroy {
|
|
|
739
808
|
private readonly trigger;
|
|
740
809
|
private panelEl;
|
|
741
810
|
protected readonly isDisabled: _angular_core.Signal<boolean>;
|
|
811
|
+
protected readonly filled: _angular_core.Signal<boolean>;
|
|
812
|
+
protected readonly onBrand: _angular_core.Signal<boolean>;
|
|
742
813
|
protected readonly normalizedOptions: _angular_core.Signal<NormOption$1[]>;
|
|
743
814
|
protected readonly filteredOptions: _angular_core.Signal<NormOption$1[]>;
|
|
744
815
|
protected readonly selectedOption: _angular_core.Signal<NormOption$1 | null>;
|
|
@@ -784,7 +855,7 @@ declare class SdsSelect implements ControlValueAccessor, OnDestroy {
|
|
|
784
855
|
registerOnTouched(fn: () => void): void;
|
|
785
856
|
setDisabledState(isDisabled: boolean): void;
|
|
786
857
|
static ɵfac: _angular_core.ɵɵFactoryDeclaration<SdsSelect, never>;
|
|
787
|
-
static ɵcmp: _angular_core.ɵɵComponentDeclaration<SdsSelect, "sds-select", never, { "options": { "alias": "options"; "required": false; "isSignal": true; }; "optionLabel": { "alias": "optionLabel"; "required": false; "isSignal": true; }; "optionValue": { "alias": "optionValue"; "required": false; "isSignal": true; }; "optionDisabled": { "alias": "optionDisabled"; "required": false; "isSignal": true; }; "dataKey": { "alias": "dataKey"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "hint": { "alias": "hint"; "required": false; "isSignal": true; }; "error": { "alias": "error"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "clearable": { "alias": "clearable"; "required": false; "isSignal": true; }; "filter": { "alias": "filter"; "required": false; "isSignal": true; }; "filterPlaceholder": { "alias": "filterPlaceholder"; "required": false; "isSignal": true; }; "emptyMessage": { "alias": "emptyMessage"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
|
|
858
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<SdsSelect, "sds-select", never, { "options": { "alias": "options"; "required": false; "isSignal": true; }; "optionLabel": { "alias": "optionLabel"; "required": false; "isSignal": true; }; "optionValue": { "alias": "optionValue"; "required": false; "isSignal": true; }; "optionDisabled": { "alias": "optionDisabled"; "required": false; "isSignal": true; }; "dataKey": { "alias": "dataKey"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "hint": { "alias": "hint"; "required": false; "isSignal": true; }; "error": { "alias": "error"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "appearance": { "alias": "appearance"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "clearable": { "alias": "clearable"; "required": false; "isSignal": true; }; "filter": { "alias": "filter"; "required": false; "isSignal": true; }; "filterPlaceholder": { "alias": "filterPlaceholder"; "required": false; "isSignal": true; }; "emptyMessage": { "alias": "emptyMessage"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
|
|
788
859
|
}
|
|
789
860
|
|
|
790
861
|
type SdsMultiSelectSize = 'sm' | 'md' | 'lg';
|
|
@@ -1805,7 +1876,7 @@ declare class SdsNavGroup {
|
|
|
1805
1876
|
/** Turn the label into an expand/collapse control. */
|
|
1806
1877
|
readonly collapsible: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
1807
1878
|
/** Icon for a collapsible header, so it reads at the same weight as the items it sits among. */
|
|
1808
|
-
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" | "
|
|
1879
|
+
readonly icon: _angular_core.InputSignal<"filter" | "copy" | "menu" | "search" | "table" | "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" | "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" | null>;
|
|
1809
1880
|
/**
|
|
1810
1881
|
* URL prefix owned by this group, e.g. `/payments`. While the active route starts with it the
|
|
1811
1882
|
* group counts as active and opens itself — unless the person has explicitly toggled it since.
|
|
@@ -1857,7 +1928,7 @@ declare class SdsNavGroup {
|
|
|
1857
1928
|
*/
|
|
1858
1929
|
declare class SdsNavItem {
|
|
1859
1930
|
protected readonly store: SidebarStore;
|
|
1860
|
-
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" | "
|
|
1931
|
+
readonly icon: _angular_core.InputSignal<"filter" | "copy" | "menu" | "search" | "table" | "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" | "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" | null>;
|
|
1861
1932
|
readonly label: _angular_core.InputSignal<string>;
|
|
1862
1933
|
/** Router link target; when null, the item behaves as a button. */
|
|
1863
1934
|
readonly link: _angular_core.InputSignal<string | unknown[] | null>;
|
|
@@ -1871,5 +1942,5 @@ declare class SdsNavItem {
|
|
|
1871
1942
|
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>;
|
|
1872
1943
|
}
|
|
1873
1944
|
|
|
1874
|
-
export { SDS_ICONS, SDS_PHONE_COUNTRIES, SdsAccordion, SdsAccordionContent, SdsAccordionHeader, SdsAccordionPanel, SdsAccordionStore, SdsAvatar, SdsBadge, SdsButton, SdsCalendar, SdsCard, SdsCheckbox, SdsDatePicker, SdsIcon, SdsInput, SdsMultiSelect, SdsNavGroup, SdsNavItem, SdsOtpInput, SdsPaginator, SdsPhoneInput, SdsSelect, SdsShell, SdsSidebar, SdsTab, SdsTabList, SdsTabPanel, SdsTabPanels, SdsTable, SdsTableCell, SdsTableRowExpansion, SdsTabs, SdsTabsStore, SdsTextarea, SdsToggleSwitch, SdsTopbar, SidebarStore, addDays, addMonths, addMonthsKeepDay, formatDdMmYyyy, isOutOfRange, isSameDay, isoDay, sdsFormatNational, sdsMatchDialCode, sdsNormalizeSignificant, startOfDay, startOfMonth };
|
|
1875
|
-
export type { SdsAccordionActive, SdsAccordionValue, SdsAvatarStatus, SdsBadgeSize, SdsBadgeVariant, SdsButtonShape, SdsButtonSize, SdsButtonVariant, SdsCardVariant, SdsCheckboxSize, SdsDatePickerSize, SdsIconName, SdsIconSize, SdsInputAppearance, SdsInputShape, SdsInputSize, SdsInputType, SdsMultiSelectDisplay, SdsMultiSelectSize, SdsOtpInputSize, SdsPaginatorSize, SdsPaginatorState, SdsPhoneCountry, SdsPhoneInputSize, SdsPhoneValue, SdsSelectSize, SdsSortOrder, SdsTabValue, SdsTableCellContext, SdsTableColumn, SdsTableLazyEvent, SdsTableRowExpansionContext, SdsTableSize, SdsTableSortEvent, SdsTextareaResize, SdsTextareaSize, SdsToggleSwitchSize, SdsTopbarAppearance };
|
|
1945
|
+
export { SDS_ICONS, SDS_PHONE_COUNTRIES, SdsAccordion, SdsAccordionContent, SdsAccordionHeader, SdsAccordionPanel, SdsAccordionStore, SdsAvatar, SdsBadge, SdsButton, SdsCalendar, SdsCard, SdsCheckbox, SdsDatePicker, SdsIcon, SdsInput, SdsMultiSelect, SdsNavGroup, SdsNavItem, SdsOtpInput, SdsPaginator, SdsPhoneInput, SdsSelect, SdsShell, SdsSidebar, SdsTab, SdsTabList, SdsTabPanel, SdsTabPanels, SdsTable, SdsTableCell, SdsTableRowExpansion, SdsTabs, SdsTabsStore, SdsTextarea, SdsToggleSwitch, SdsTopbar, SidebarStore, addDays, addMonths, addMonthsKeepDay, formatDdMmYyyy, formatHhMm, isOutOfRange, isSameDay, isoDay, pad2, sdsFormatNational, sdsMatchDialCode, sdsNormalizeSignificant, startOfDay, startOfMonth };
|
|
1946
|
+
export type { SdsAccordionActive, SdsAccordionValue, SdsAvatarStatus, SdsBadgeSize, SdsBadgeVariant, SdsButtonShape, SdsButtonSize, SdsButtonVariant, SdsCardVariant, SdsCheckboxSize, SdsDatePickerSize, SdsIconName, SdsIconSize, SdsInputAppearance, SdsInputShape, SdsInputSize, SdsInputType, SdsMultiSelectDisplay, SdsMultiSelectSize, SdsOtpInputSize, SdsPaginatorSize, SdsPaginatorState, SdsPhoneCountry, SdsPhoneInputSize, SdsPhoneValue, SdsSelectAppearance, SdsSelectSize, SdsSortOrder, SdsTabValue, SdsTableCellContext, SdsTableColumn, SdsTableLazyEvent, SdsTableRowExpansionContext, SdsTableSize, SdsTableSortEvent, SdsTextareaResize, SdsTextareaSize, SdsToggleSwitchSize, SdsTopbarAppearance };
|