@besaitech/ng-design-system 0.0.29 → 0.0.33
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
|
@@ -93,7 +93,7 @@ type SdsIconSize = 'sm' | 'md' | 'lg' | 'xl';
|
|
|
93
93
|
declare class SdsIcon {
|
|
94
94
|
private readonly sanitizer;
|
|
95
95
|
/** Icon identifier from the registry. */
|
|
96
|
-
readonly name: _angular_core.InputSignal<"
|
|
96
|
+
readonly name: _angular_core.InputSignal<"chart-column" | "clipboard-list" | "credit-card" | "external-link" | "languages" | "megaphone" | "monitor" | "store" | "user-round" | "home" | "user-plus" | "hand" | "users" | "bike" | "building-2" | "package" | "package-plus" | "package-open" | "rotate-ccw" | "bar-chart-3" | "search" | "log-out" | "panel-left-close" | "panel-left-open" | "panel-left" | "calendar" | "chevron-right" | "chevron-left" | "chevron-down" | "chevrons-left" | "chevrons-right" | "x" | "check" | "alert-circle" | "info" | "copy" | "type" | "tag" | "square" | "circle-user" | "layout-grid" | "panels-top-left" | "panel-top" | "rows-3" | "book-open" | "palette" | "bell" | "phone" | "settings" | "align-left" | "toggle-left" | "arrow-up" | "arrow-down" | "chevrons-up-down" | "filter" | "table" | "eye" | "eye-off" | "user" | "check-circle" | "arrows-clockwise" | "menu" | "file-text" | "hash" | "map-pin" | "inbox" | "arrow-right" | "refresh-cw" | "loader-circle">;
|
|
97
97
|
/** Square size: a pixel number, a numeric string, or a keyword (sm·md·lg·xl). */
|
|
98
98
|
readonly size: _angular_core.InputSignalWithTransform<number, string | number>;
|
|
99
99
|
/** Stroke width of the line icon. */
|
|
@@ -105,6 +105,7 @@ declare class SdsIcon {
|
|
|
105
105
|
|
|
106
106
|
type SdsButtonVariant = 'primary' | 'secondary' | 'tertiary' | 'ghost' | 'danger';
|
|
107
107
|
type SdsButtonSize = 'sm' | 'md' | 'lg';
|
|
108
|
+
type SdsButtonShape = 'control' | 'pill';
|
|
108
109
|
/**
|
|
109
110
|
* Brand button. Project an <sds-icon sdsIconLeading/> or <sds-icon sdsIconTrailing/>
|
|
110
111
|
* for icons, or set [iconOnly]="true" for a square icon button.
|
|
@@ -115,6 +116,13 @@ type SdsButtonSize = 'sm' | 'md' | 'lg';
|
|
|
115
116
|
declare class SdsButton {
|
|
116
117
|
readonly variant: _angular_core.InputSignal<SdsButtonVariant>;
|
|
117
118
|
readonly size: _angular_core.InputSignal<SdsButtonSize>;
|
|
119
|
+
/**
|
|
120
|
+
* `pill` fully rounds the button. It is the shape a consumer-facing surface tends to want for its
|
|
121
|
+
* primary action, and the same axis {@link SdsInput} exposes — a design system with pill inputs and
|
|
122
|
+
* no pill buttons would force any app that wants one back onto hand-rolled classes for its single
|
|
123
|
+
* most important control.
|
|
124
|
+
*/
|
|
125
|
+
readonly shape: _angular_core.InputSignal<SdsButtonShape>;
|
|
118
126
|
readonly type: _angular_core.InputSignal<"button" | "submit" | "reset">;
|
|
119
127
|
readonly disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
120
128
|
readonly loading: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
@@ -129,7 +137,7 @@ declare class SdsButton {
|
|
|
129
137
|
protected readonly hostClass: _angular_core.Signal<"flex w-full" | "inline-flex">;
|
|
130
138
|
protected readonly classes: _angular_core.Signal<string>;
|
|
131
139
|
static ɵfac: _angular_core.ɵɵFactoryDeclaration<SdsButton, never>;
|
|
132
|
-
static ɵcmp: _angular_core.ɵɵComponentDeclaration<SdsButton, "sds-button", never, { "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "type": { "alias": "type"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "block": { "alias": "block"; "required": false; "isSignal": true; }; "iconOnly": { "alias": "iconOnly"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; }, {}, never, ["[sdsIconLeading]", "*", "[sdsIconTrailing]"], true, never>;
|
|
140
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<SdsButton, "sds-button", never, { "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "shape": { "alias": "shape"; "required": false; "isSignal": true; }; "type": { "alias": "type"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "block": { "alias": "block"; "required": false; "isSignal": true; }; "iconOnly": { "alias": "iconOnly"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; }, {}, never, ["[sdsIconLeading]", "*", "[sdsIconTrailing]"], true, never>;
|
|
133
141
|
}
|
|
134
142
|
|
|
135
143
|
type SdsInputSize = 'sm' | 'md' | 'lg';
|
|
@@ -177,8 +185,8 @@ declare class SdsInput implements ControlValueAccessor {
|
|
|
177
185
|
* is its only name.
|
|
178
186
|
*/
|
|
179
187
|
readonly clearLabel: _angular_core.InputSignal<string>;
|
|
180
|
-
readonly leadingIcon: _angular_core.InputSignal<"
|
|
181
|
-
readonly trailingIcon: _angular_core.InputSignal<"
|
|
188
|
+
readonly leadingIcon: _angular_core.InputSignal<"chart-column" | "clipboard-list" | "credit-card" | "external-link" | "languages" | "megaphone" | "monitor" | "store" | "user-round" | "home" | "user-plus" | "hand" | "users" | "bike" | "building-2" | "package" | "package-plus" | "package-open" | "rotate-ccw" | "bar-chart-3" | "search" | "log-out" | "panel-left-close" | "panel-left-open" | "panel-left" | "calendar" | "chevron-right" | "chevron-left" | "chevron-down" | "chevrons-left" | "chevrons-right" | "x" | "check" | "alert-circle" | "info" | "copy" | "type" | "tag" | "square" | "circle-user" | "layout-grid" | "panels-top-left" | "panel-top" | "rows-3" | "book-open" | "palette" | "bell" | "phone" | "settings" | "align-left" | "toggle-left" | "arrow-up" | "arrow-down" | "chevrons-up-down" | "filter" | "table" | "eye" | "eye-off" | "user" | "check-circle" | "arrows-clockwise" | "menu" | "file-text" | "hash" | "map-pin" | "inbox" | "arrow-right" | "refresh-cw" | "loader-circle" | null>;
|
|
189
|
+
readonly trailingIcon: _angular_core.InputSignal<"chart-column" | "clipboard-list" | "credit-card" | "external-link" | "languages" | "megaphone" | "monitor" | "store" | "user-round" | "home" | "user-plus" | "hand" | "users" | "bike" | "building-2" | "package" | "package-plus" | "package-open" | "rotate-ccw" | "bar-chart-3" | "search" | "log-out" | "panel-left-close" | "panel-left-open" | "panel-left" | "calendar" | "chevron-right" | "chevron-left" | "chevron-down" | "chevrons-left" | "chevrons-right" | "x" | "check" | "alert-circle" | "info" | "copy" | "type" | "tag" | "square" | "circle-user" | "layout-grid" | "panels-top-left" | "panel-top" | "rows-3" | "book-open" | "palette" | "bell" | "phone" | "settings" | "align-left" | "toggle-left" | "arrow-up" | "arrow-down" | "chevrons-up-down" | "filter" | "table" | "eye" | "eye-off" | "user" | "check-circle" | "arrows-clockwise" | "menu" | "file-text" | "hash" | "map-pin" | "inbox" | "arrow-right" | "refresh-cw" | "loader-circle" | null>;
|
|
182
190
|
/**
|
|
183
191
|
* A CLICKABLE trailing icon, for the affordances that belong to the field itself — password reveal
|
|
184
192
|
* above all. Distinct from {@link trailingIcon}, which is decorative and explicitly
|
|
@@ -188,7 +196,7 @@ declare class SdsInput implements ControlValueAccessor {
|
|
|
188
196
|
* Always pair it with {@link trailingActionLabel} — an icon-only button with no accessible name is
|
|
189
197
|
* unusable by a screen reader. For a toggle, also bind {@link trailingActionPressed}.
|
|
190
198
|
*/
|
|
191
|
-
readonly trailingAction: _angular_core.InputSignal<"
|
|
199
|
+
readonly trailingAction: _angular_core.InputSignal<"chart-column" | "clipboard-list" | "credit-card" | "external-link" | "languages" | "megaphone" | "monitor" | "store" | "user-round" | "home" | "user-plus" | "hand" | "users" | "bike" | "building-2" | "package" | "package-plus" | "package-open" | "rotate-ccw" | "bar-chart-3" | "search" | "log-out" | "panel-left-close" | "panel-left-open" | "panel-left" | "calendar" | "chevron-right" | "chevron-left" | "chevron-down" | "chevrons-left" | "chevrons-right" | "x" | "check" | "alert-circle" | "info" | "copy" | "type" | "tag" | "square" | "circle-user" | "layout-grid" | "panels-top-left" | "panel-top" | "rows-3" | "book-open" | "palette" | "bell" | "phone" | "settings" | "align-left" | "toggle-left" | "arrow-up" | "arrow-down" | "chevrons-up-down" | "filter" | "table" | "eye" | "eye-off" | "user" | "check-circle" | "arrows-clockwise" | "menu" | "file-text" | "hash" | "map-pin" | "inbox" | "arrow-right" | "refresh-cw" | "loader-circle" | null>;
|
|
192
200
|
/** Accessible name for {@link trailingAction}. Translate it in the consuming app. */
|
|
193
201
|
readonly trailingActionLabel: _angular_core.InputSignal<string>;
|
|
194
202
|
/** `aria-pressed` for a toggling action (e.g. show/hide password). Null renders no attribute. */
|
|
@@ -298,9 +306,9 @@ declare class SdsToggleSwitch implements ControlValueAccessor {
|
|
|
298
306
|
/** Value emitted/stored when the switch is off. */
|
|
299
307
|
readonly falseValue: _angular_core.InputSignal<unknown>;
|
|
300
308
|
/** Icon shown on the knob when checked. */
|
|
301
|
-
readonly onIcon: _angular_core.InputSignal<"
|
|
309
|
+
readonly onIcon: _angular_core.InputSignal<"chart-column" | "clipboard-list" | "credit-card" | "external-link" | "languages" | "megaphone" | "monitor" | "store" | "user-round" | "home" | "user-plus" | "hand" | "users" | "bike" | "building-2" | "package" | "package-plus" | "package-open" | "rotate-ccw" | "bar-chart-3" | "search" | "log-out" | "panel-left-close" | "panel-left-open" | "panel-left" | "calendar" | "chevron-right" | "chevron-left" | "chevron-down" | "chevrons-left" | "chevrons-right" | "x" | "check" | "alert-circle" | "info" | "copy" | "type" | "tag" | "square" | "circle-user" | "layout-grid" | "panels-top-left" | "panel-top" | "rows-3" | "book-open" | "palette" | "bell" | "phone" | "settings" | "align-left" | "toggle-left" | "arrow-up" | "arrow-down" | "chevrons-up-down" | "filter" | "table" | "eye" | "eye-off" | "user" | "check-circle" | "arrows-clockwise" | "menu" | "file-text" | "hash" | "map-pin" | "inbox" | "arrow-right" | "refresh-cw" | "loader-circle" | null>;
|
|
302
310
|
/** Icon shown on the knob when unchecked. */
|
|
303
|
-
readonly offIcon: _angular_core.InputSignal<"
|
|
311
|
+
readonly offIcon: _angular_core.InputSignal<"chart-column" | "clipboard-list" | "credit-card" | "external-link" | "languages" | "megaphone" | "monitor" | "store" | "user-round" | "home" | "user-plus" | "hand" | "users" | "bike" | "building-2" | "package" | "package-plus" | "package-open" | "rotate-ccw" | "bar-chart-3" | "search" | "log-out" | "panel-left-close" | "panel-left-open" | "panel-left" | "calendar" | "chevron-right" | "chevron-left" | "chevron-down" | "chevrons-left" | "chevrons-right" | "x" | "check" | "alert-circle" | "info" | "copy" | "type" | "tag" | "square" | "circle-user" | "layout-grid" | "panels-top-left" | "panel-top" | "rows-3" | "book-open" | "palette" | "bell" | "phone" | "settings" | "align-left" | "toggle-left" | "arrow-up" | "arrow-down" | "chevrons-up-down" | "filter" | "table" | "eye" | "eye-off" | "user" | "check-circle" | "arrows-clockwise" | "menu" | "file-text" | "hash" | "map-pin" | "inbox" | "arrow-right" | "refresh-cw" | "loader-circle" | null>;
|
|
304
312
|
readonly hint: _angular_core.InputSignal<string>;
|
|
305
313
|
readonly error: _angular_core.InputSignal<string>;
|
|
306
314
|
/**
|
|
@@ -451,6 +459,26 @@ declare class SdsCalendar {
|
|
|
451
459
|
readonly firstDayOfWeek: _angular_core.InputSignal<0 | 1>;
|
|
452
460
|
readonly locale: _angular_core.InputSignal<string>;
|
|
453
461
|
readonly showActions: _angular_core.InputSignal<boolean>;
|
|
462
|
+
/**
|
|
463
|
+
* Accessible name for the calendar container. French default so existing consumers are unchanged,
|
|
464
|
+
* but an app serving more than one language MUST translate it.
|
|
465
|
+
*/
|
|
466
|
+
readonly calendarLabel: _angular_core.InputSignal<string>;
|
|
467
|
+
/**
|
|
468
|
+
* Accessible name for the "previous" nav button. It is icon-only, so this string is its ONLY
|
|
469
|
+
* accessible name — a hardcoded French one is simply wrong in every other locale. Translate it in
|
|
470
|
+
* the consuming app.
|
|
471
|
+
*/
|
|
472
|
+
readonly previousLabel: _angular_core.InputSignal<string>;
|
|
473
|
+
/** Accessible name for the icon-only "next" nav button. See {@link previousLabel}. */
|
|
474
|
+
readonly nextLabel: _angular_core.InputSignal<string>;
|
|
475
|
+
/**
|
|
476
|
+
* Visible text of the "today" action (shown when {@link showActions} is true). Translate it in the
|
|
477
|
+
* consuming app — the library ships no i18n of its own.
|
|
478
|
+
*/
|
|
479
|
+
readonly todayActionLabel: _angular_core.InputSignal<string>;
|
|
480
|
+
/** Visible text of the "clear" action. See {@link todayActionLabel}. */
|
|
481
|
+
readonly clearActionLabel: _angular_core.InputSignal<string>;
|
|
454
482
|
/** Emitted when a concrete date is picked (day click or "Aujourd'hui"). */
|
|
455
483
|
readonly dateSelect: _angular_core.OutputEmitterRef<Date>;
|
|
456
484
|
protected readonly view: _angular_core.WritableSignal<CalView>;
|
|
@@ -497,7 +525,7 @@ declare class SdsCalendar {
|
|
|
497
525
|
protected dayClass(cell: DayCell): string;
|
|
498
526
|
protected cellClass(selected: boolean, current: boolean, disabled: boolean): string;
|
|
499
527
|
static ɵfac: _angular_core.ɵɵFactoryDeclaration<SdsCalendar, never>;
|
|
500
|
-
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; }; }, { "value": "valueChange"; "dateSelect": "dateSelect"; }, never, never, true, never>;
|
|
528
|
+
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>;
|
|
501
529
|
}
|
|
502
530
|
|
|
503
531
|
type SdsDatePickerSize = 'sm' | 'md' | 'lg';
|
|
@@ -529,6 +557,31 @@ declare class SdsDatePicker implements ControlValueAccessor, OnDestroy {
|
|
|
529
557
|
readonly disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
530
558
|
/** Custom display formatter (default dd/MM/yyyy). */
|
|
531
559
|
readonly format: _angular_core.InputSignal<(d: Date) => string>;
|
|
560
|
+
/**
|
|
561
|
+
* Accessible name for the clear button. French default so existing consumers are unchanged, but an
|
|
562
|
+
* app serving more than one language MUST translate it — it is an icon-only control, so this string
|
|
563
|
+
* is its only name.
|
|
564
|
+
*/
|
|
565
|
+
readonly clearLabel: _angular_core.InputSignal<string>;
|
|
566
|
+
/**
|
|
567
|
+
* Accessible name for the icon-only calendar toggle while the panel is CLOSED. See
|
|
568
|
+
* {@link clearLabel} for why this has to be translatable.
|
|
569
|
+
*/
|
|
570
|
+
readonly openCalendarLabel: _angular_core.InputSignal<string>;
|
|
571
|
+
/** Accessible name for the calendar toggle while the panel is OPEN. See {@link openCalendarLabel}. */
|
|
572
|
+
readonly closeCalendarLabel: _angular_core.InputSignal<string>;
|
|
573
|
+
/** Accessible name for the overlay dialog that holds the calendar. */
|
|
574
|
+
readonly panelLabel: _angular_core.InputSignal<string>;
|
|
575
|
+
/**
|
|
576
|
+
* Labels forwarded to the embedded <sds-calendar>. They live here because the picker is how the
|
|
577
|
+
* calendar is normally reached — without forwarding, a consumer could translate the field but not
|
|
578
|
+
* the panel it opens. Defaults match SdsCalendar's own, so nothing changes for existing consumers.
|
|
579
|
+
*/
|
|
580
|
+
readonly calendarLabel: _angular_core.InputSignal<string>;
|
|
581
|
+
readonly previousLabel: _angular_core.InputSignal<string>;
|
|
582
|
+
readonly nextLabel: _angular_core.InputSignal<string>;
|
|
583
|
+
readonly todayActionLabel: _angular_core.InputSignal<string>;
|
|
584
|
+
readonly clearActionLabel: _angular_core.InputSignal<string>;
|
|
532
585
|
protected readonly value: _angular_core.WritableSignal<Date | null>;
|
|
533
586
|
protected readonly open: _angular_core.WritableSignal<boolean>;
|
|
534
587
|
private readonly cvaDisabled;
|
|
@@ -561,7 +614,7 @@ declare class SdsDatePicker implements ControlValueAccessor, OnDestroy {
|
|
|
561
614
|
registerOnTouched(fn: () => void): void;
|
|
562
615
|
setDisabledState(isDisabled: boolean): void;
|
|
563
616
|
static ɵfac: _angular_core.ɵɵFactoryDeclaration<SdsDatePicker, never>;
|
|
564
|
-
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; }; }, {}, never, never, true, never>;
|
|
617
|
+
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>;
|
|
565
618
|
}
|
|
566
619
|
|
|
567
620
|
type SdsSelectSize = 'sm' | 'md' | 'lg';
|
|
@@ -855,6 +908,40 @@ declare class SdsPhoneInput implements ControlValueAccessor, Validator, OnDestro
|
|
|
855
908
|
/** Show an example number as a hint when no [hint] is provided. */
|
|
856
909
|
readonly showExampleHint: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
857
910
|
readonly requiredMessage: _angular_core.InputSignal<string>;
|
|
911
|
+
/**
|
|
912
|
+
* Accessible name of the country selector. `{country}` is replaced with the selected country's
|
|
913
|
+
* name. A token rather than a prefix because word order differs per language. French default so
|
|
914
|
+
* existing consumers are unchanged; translate it in any app serving more than one language.
|
|
915
|
+
*
|
|
916
|
+
* Note the interpolated country NAME still comes from the library's built-in country table, which
|
|
917
|
+
* is French-only — translating this template fixes the wrapper, not the name inside it.
|
|
918
|
+
*/
|
|
919
|
+
readonly countryLabel: _angular_core.InputSignal<string>;
|
|
920
|
+
/**
|
|
921
|
+
* Accessible name for the clear button. It is icon-only, so this string is its ONLY accessible
|
|
922
|
+
* name — a hardcoded French one is simply wrong in every other locale.
|
|
923
|
+
*/
|
|
924
|
+
readonly clearLabel: _angular_core.InputSignal<string>;
|
|
925
|
+
/** Accessible name for the country-search field inside the dropdown. */
|
|
926
|
+
readonly searchLabel: _angular_core.InputSignal<string>;
|
|
927
|
+
/** Placeholder text of the country-search field. */
|
|
928
|
+
readonly searchPlaceholder: _angular_core.InputSignal<string>;
|
|
929
|
+
/** Shown in place of the list when no country matches the filter. */
|
|
930
|
+
readonly noResultsLabel: _angular_core.InputSignal<string>;
|
|
931
|
+
/**
|
|
932
|
+
* Built-in validation messages. `{lengths}` is replaced with the country's accepted national
|
|
933
|
+
* lengths, joined with {@link lengthSeparator}. Siblings of {@link requiredMessage}, which was
|
|
934
|
+
* already translatable — these two were not, so an English or Dutch app showed French errors.
|
|
935
|
+
*/
|
|
936
|
+
readonly incompleteMessage: _angular_core.InputSignal<string>;
|
|
937
|
+
readonly invalidMessage: _angular_core.InputSignal<string>;
|
|
938
|
+
/** Joins the accepted lengths when a country allows more than one (e.g. "8 ou 9"). */
|
|
939
|
+
readonly lengthSeparator: _angular_core.InputSignal<string>;
|
|
940
|
+
/**
|
|
941
|
+
* Auto-generated example hint (see {@link showExampleHint}). `{number}` is replaced with the
|
|
942
|
+
* formatted international example number.
|
|
943
|
+
*/
|
|
944
|
+
readonly exampleHintTemplate: _angular_core.InputSignal<string>;
|
|
858
945
|
/** Emitted with the parsed parts whenever the number or country changes. */
|
|
859
946
|
readonly phoneChange: _angular_core.OutputEmitterRef<SdsPhoneValue>;
|
|
860
947
|
protected readonly national: _angular_core.WritableSignal<string>;
|
|
@@ -875,6 +962,7 @@ declare class SdsPhoneInput implements ControlValueAccessor, Validator, OnDestro
|
|
|
875
962
|
protected readonly display: _angular_core.Signal<string>;
|
|
876
963
|
protected readonly placeholderText: _angular_core.Signal<string>;
|
|
877
964
|
protected readonly autoHint: _angular_core.Signal<string>;
|
|
965
|
+
protected readonly countryAriaLabel: _angular_core.Signal<string>;
|
|
878
966
|
protected readonly e164: _angular_core.Signal<string>;
|
|
879
967
|
/** Non-empty but national length is not valid for the country. */
|
|
880
968
|
protected readonly invalid: _angular_core.Signal<boolean>;
|
|
@@ -915,7 +1003,7 @@ declare class SdsPhoneInput implements ControlValueAccessor, Validator, OnDestro
|
|
|
915
1003
|
validate(_control: AbstractControl): ValidationErrors | null;
|
|
916
1004
|
registerOnValidatorChange(fn: () => void): void;
|
|
917
1005
|
static ɵfac: _angular_core.ɵɵFactoryDeclaration<SdsPhoneInput, never>;
|
|
918
|
-
static ɵcmp: _angular_core.ɵɵComponentDeclaration<SdsPhoneInput, "sds-phone-input", never, { "label": { "alias": "label"; "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; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "clearable": { "alias": "clearable"; "required": false; "isSignal": true; }; "defaultCountry": { "alias": "defaultCountry"; "required": false; "isSignal": true; }; "preferredCountries": { "alias": "preferredCountries"; "required": false; "isSignal": true; }; "onlyCountries": { "alias": "onlyCountries"; "required": false; "isSignal": true; }; "showExampleHint": { "alias": "showExampleHint"; "required": false; "isSignal": true; }; "requiredMessage": { "alias": "requiredMessage"; "required": false; "isSignal": true; }; }, { "phoneChange": "phoneChange"; }, never, never, true, never>;
|
|
1006
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<SdsPhoneInput, "sds-phone-input", never, { "label": { "alias": "label"; "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; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "clearable": { "alias": "clearable"; "required": false; "isSignal": true; }; "defaultCountry": { "alias": "defaultCountry"; "required": false; "isSignal": true; }; "preferredCountries": { "alias": "preferredCountries"; "required": false; "isSignal": true; }; "onlyCountries": { "alias": "onlyCountries"; "required": false; "isSignal": true; }; "showExampleHint": { "alias": "showExampleHint"; "required": false; "isSignal": true; }; "requiredMessage": { "alias": "requiredMessage"; "required": false; "isSignal": true; }; "countryLabel": { "alias": "countryLabel"; "required": false; "isSignal": true; }; "clearLabel": { "alias": "clearLabel"; "required": false; "isSignal": true; }; "searchLabel": { "alias": "searchLabel"; "required": false; "isSignal": true; }; "searchPlaceholder": { "alias": "searchPlaceholder"; "required": false; "isSignal": true; }; "noResultsLabel": { "alias": "noResultsLabel"; "required": false; "isSignal": true; }; "incompleteMessage": { "alias": "incompleteMessage"; "required": false; "isSignal": true; }; "invalidMessage": { "alias": "invalidMessage"; "required": false; "isSignal": true; }; "lengthSeparator": { "alias": "lengthSeparator"; "required": false; "isSignal": true; }; "exampleHintTemplate": { "alias": "exampleHintTemplate"; "required": false; "isSignal": true; }; }, { "phoneChange": "phoneChange"; }, never, never, true, never>;
|
|
919
1007
|
}
|
|
920
1008
|
|
|
921
1009
|
type SdsPaginatorSize = 'sm' | 'md' | 'lg';
|
|
@@ -970,6 +1058,28 @@ declare class SdsPaginator {
|
|
|
970
1058
|
readonly showJumpToPageInput: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
971
1059
|
readonly rowsPerPageLabel: _angular_core.InputSignal<string>;
|
|
972
1060
|
readonly jumpToPageLabel: _angular_core.InputSignal<string>;
|
|
1061
|
+
/**
|
|
1062
|
+
* Accessible name for the <nav> wrapping the page controls, and for the four icon-only
|
|
1063
|
+
* first/prev/next/last buttons. Those buttons have no text, so these strings are their ONLY
|
|
1064
|
+
* accessible names — the French defaults keep existing consumers unchanged, but an app serving more
|
|
1065
|
+
* than one language MUST pass translated values.
|
|
1066
|
+
*/
|
|
1067
|
+
readonly paginationLabel: _angular_core.InputSignal<string>;
|
|
1068
|
+
readonly firstPageLabel: _angular_core.InputSignal<string>;
|
|
1069
|
+
readonly previousPageLabel: _angular_core.InputSignal<string>;
|
|
1070
|
+
readonly nextPageLabel: _angular_core.InputSignal<string>;
|
|
1071
|
+
readonly lastPageLabel: _angular_core.InputSignal<string>;
|
|
1072
|
+
/**
|
|
1073
|
+
* Accessible name of a numbered page link. `{page}` is replaced with the 1-based page number —
|
|
1074
|
+
* a token rather than a prefix because word order is not the same in every language.
|
|
1075
|
+
*/
|
|
1076
|
+
readonly pageLinkLabel: _angular_core.InputSignal<string>;
|
|
1077
|
+
/**
|
|
1078
|
+
* Accessible name of the jump-to-page field. Separate from the visible {@link jumpToPageLabel}
|
|
1079
|
+
* ("Aller à") on purpose: the visible text is terse because it sits next to the field, while the
|
|
1080
|
+
* accessible name has to stand alone.
|
|
1081
|
+
*/
|
|
1082
|
+
readonly jumpToPageAriaLabel: _angular_core.InputSignal<string>;
|
|
973
1083
|
readonly size: _angular_core.InputSignal<SdsPaginatorSize>;
|
|
974
1084
|
readonly disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
975
1085
|
/** Fires after any page or page-size change with the full paginator state. */
|
|
@@ -982,6 +1092,7 @@ declare class SdsPaginator {
|
|
|
982
1092
|
protected readonly pageLinks: _angular_core.Signal<number[]>;
|
|
983
1093
|
protected readonly reportText: _angular_core.Signal<string>;
|
|
984
1094
|
protected readonly hostClass: _angular_core.Signal<string>;
|
|
1095
|
+
protected pageLinkAriaLabel(page: number): string;
|
|
985
1096
|
protected navClass(isDisabled: boolean): string;
|
|
986
1097
|
protected linkClass(active: boolean): string;
|
|
987
1098
|
protected firstPage(): void;
|
|
@@ -993,7 +1104,7 @@ declare class SdsPaginator {
|
|
|
993
1104
|
protected onJump(event: Event): void;
|
|
994
1105
|
private emit;
|
|
995
1106
|
static ɵfac: _angular_core.ɵɵFactoryDeclaration<SdsPaginator, never>;
|
|
996
|
-
static ɵcmp: _angular_core.ɵɵComponentDeclaration<SdsPaginator, "sds-paginator", never, { "totalRecords": { "alias": "totalRecords"; "required": false; "isSignal": true; }; "first": { "alias": "first"; "required": false; "isSignal": true; }; "rows": { "alias": "rows"; "required": false; "isSignal": true; }; "rowsPerPageOptions": { "alias": "rowsPerPageOptions"; "required": false; "isSignal": true; }; "pageLinkSize": { "alias": "pageLinkSize"; "required": false; "isSignal": true; }; "showFirstLastIcon": { "alias": "showFirstLastIcon"; "required": false; "isSignal": true; }; "showPageLinks": { "alias": "showPageLinks"; "required": false; "isSignal": true; }; "showCurrentPageReport": { "alias": "showCurrentPageReport"; "required": false; "isSignal": true; }; "currentPageReportTemplate": { "alias": "currentPageReportTemplate"; "required": false; "isSignal": true; }; "showJumpToPageInput": { "alias": "showJumpToPageInput"; "required": false; "isSignal": true; }; "rowsPerPageLabel": { "alias": "rowsPerPageLabel"; "required": false; "isSignal": true; }; "jumpToPageLabel": { "alias": "jumpToPageLabel"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; }, { "first": "firstChange"; "rows": "rowsChange"; "pageChange": "pageChange"; }, never, never, true, never>;
|
|
1107
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<SdsPaginator, "sds-paginator", never, { "totalRecords": { "alias": "totalRecords"; "required": false; "isSignal": true; }; "first": { "alias": "first"; "required": false; "isSignal": true; }; "rows": { "alias": "rows"; "required": false; "isSignal": true; }; "rowsPerPageOptions": { "alias": "rowsPerPageOptions"; "required": false; "isSignal": true; }; "pageLinkSize": { "alias": "pageLinkSize"; "required": false; "isSignal": true; }; "showFirstLastIcon": { "alias": "showFirstLastIcon"; "required": false; "isSignal": true; }; "showPageLinks": { "alias": "showPageLinks"; "required": false; "isSignal": true; }; "showCurrentPageReport": { "alias": "showCurrentPageReport"; "required": false; "isSignal": true; }; "currentPageReportTemplate": { "alias": "currentPageReportTemplate"; "required": false; "isSignal": true; }; "showJumpToPageInput": { "alias": "showJumpToPageInput"; "required": false; "isSignal": true; }; "rowsPerPageLabel": { "alias": "rowsPerPageLabel"; "required": false; "isSignal": true; }; "jumpToPageLabel": { "alias": "jumpToPageLabel"; "required": false; "isSignal": true; }; "paginationLabel": { "alias": "paginationLabel"; "required": false; "isSignal": true; }; "firstPageLabel": { "alias": "firstPageLabel"; "required": false; "isSignal": true; }; "previousPageLabel": { "alias": "previousPageLabel"; "required": false; "isSignal": true; }; "nextPageLabel": { "alias": "nextPageLabel"; "required": false; "isSignal": true; }; "lastPageLabel": { "alias": "lastPageLabel"; "required": false; "isSignal": true; }; "pageLinkLabel": { "alias": "pageLinkLabel"; "required": false; "isSignal": true; }; "jumpToPageAriaLabel": { "alias": "jumpToPageAriaLabel"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; }, { "first": "firstChange"; "rows": "rowsChange"; "pageChange": "pageChange"; }, never, never, true, never>;
|
|
997
1108
|
}
|
|
998
1109
|
|
|
999
1110
|
/** Identifier of a tab / panel pair. Keep types consistent across a tab set. */
|
|
@@ -1622,7 +1733,7 @@ declare class SdsNavGroup {
|
|
|
1622
1733
|
/** Turn the label into an expand/collapse control. */
|
|
1623
1734
|
readonly collapsible: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
1624
1735
|
/** Icon for a collapsible header, so it reads at the same weight as the items it sits among. */
|
|
1625
|
-
readonly icon: _angular_core.InputSignal<"
|
|
1736
|
+
readonly icon: _angular_core.InputSignal<"chart-column" | "clipboard-list" | "credit-card" | "external-link" | "languages" | "megaphone" | "monitor" | "store" | "user-round" | "home" | "user-plus" | "hand" | "users" | "bike" | "building-2" | "package" | "package-plus" | "package-open" | "rotate-ccw" | "bar-chart-3" | "search" | "log-out" | "panel-left-close" | "panel-left-open" | "panel-left" | "calendar" | "chevron-right" | "chevron-left" | "chevron-down" | "chevrons-left" | "chevrons-right" | "x" | "check" | "alert-circle" | "info" | "copy" | "type" | "tag" | "square" | "circle-user" | "layout-grid" | "panels-top-left" | "panel-top" | "rows-3" | "book-open" | "palette" | "bell" | "phone" | "settings" | "align-left" | "toggle-left" | "arrow-up" | "arrow-down" | "chevrons-up-down" | "filter" | "table" | "eye" | "eye-off" | "user" | "check-circle" | "arrows-clockwise" | "menu" | "file-text" | "hash" | "map-pin" | "inbox" | "arrow-right" | "refresh-cw" | "loader-circle" | null>;
|
|
1626
1737
|
/**
|
|
1627
1738
|
* URL prefix owned by this group, e.g. `/payments`. While the active route starts with it the
|
|
1628
1739
|
* group counts as active and opens itself — unless the person has explicitly toggled it since.
|
|
@@ -1674,7 +1785,7 @@ declare class SdsNavGroup {
|
|
|
1674
1785
|
*/
|
|
1675
1786
|
declare class SdsNavItem {
|
|
1676
1787
|
protected readonly store: SidebarStore;
|
|
1677
|
-
readonly icon: _angular_core.InputSignal<"
|
|
1788
|
+
readonly icon: _angular_core.InputSignal<"chart-column" | "clipboard-list" | "credit-card" | "external-link" | "languages" | "megaphone" | "monitor" | "store" | "user-round" | "home" | "user-plus" | "hand" | "users" | "bike" | "building-2" | "package" | "package-plus" | "package-open" | "rotate-ccw" | "bar-chart-3" | "search" | "log-out" | "panel-left-close" | "panel-left-open" | "panel-left" | "calendar" | "chevron-right" | "chevron-left" | "chevron-down" | "chevrons-left" | "chevrons-right" | "x" | "check" | "alert-circle" | "info" | "copy" | "type" | "tag" | "square" | "circle-user" | "layout-grid" | "panels-top-left" | "panel-top" | "rows-3" | "book-open" | "palette" | "bell" | "phone" | "settings" | "align-left" | "toggle-left" | "arrow-up" | "arrow-down" | "chevrons-up-down" | "filter" | "table" | "eye" | "eye-off" | "user" | "check-circle" | "arrows-clockwise" | "menu" | "file-text" | "hash" | "map-pin" | "inbox" | "arrow-right" | "refresh-cw" | "loader-circle" | null>;
|
|
1678
1789
|
readonly label: _angular_core.InputSignal<string>;
|
|
1679
1790
|
/** Router link target; when null, the item behaves as a button. */
|
|
1680
1791
|
readonly link: _angular_core.InputSignal<string | unknown[] | null>;
|
|
@@ -1689,4 +1800,4 @@ declare class SdsNavItem {
|
|
|
1689
1800
|
}
|
|
1690
1801
|
|
|
1691
1802
|
export { SDS_ICONS, SDS_PHONE_COUNTRIES, SdsAccordion, SdsAccordionContent, SdsAccordionHeader, SdsAccordionPanel, SdsAccordionStore, SdsAvatar, SdsBadge, SdsButton, SdsCalendar, SdsCard, SdsCheckbox, SdsDatePicker, SdsIcon, SdsInput, SdsMultiSelect, SdsNavGroup, SdsNavItem, SdsPaginator, SdsPhoneInput, SdsSelect, SdsShell, SdsSidebar, SdsTab, SdsTabList, SdsTabPanel, SdsTabPanels, SdsTable, SdsTableCell, SdsTableRowExpansion, SdsTabs, SdsTabsStore, SdsTextarea, SdsToggleSwitch, SdsTopbar, SidebarStore, addDays, addMonths, addMonthsKeepDay, formatDdMmYyyy, isOutOfRange, isSameDay, isoDay, sdsFormatNational, sdsMatchDialCode, sdsNormalizeSignificant, startOfDay, startOfMonth };
|
|
1692
|
-
export type { SdsAccordionActive, SdsAccordionValue, SdsAvatarStatus, SdsBadgeSize, SdsBadgeVariant, SdsButtonSize, SdsButtonVariant, SdsCardVariant, SdsCheckboxSize, SdsDatePickerSize, SdsIconName, SdsIconSize, SdsInputAppearance, SdsInputShape, SdsInputSize, SdsInputType, SdsMultiSelectDisplay, SdsMultiSelectSize, SdsPaginatorSize, SdsPaginatorState, SdsPhoneCountry, SdsPhoneInputSize, SdsPhoneValue, SdsSelectSize, SdsSortOrder, SdsTabValue, SdsTableCellContext, SdsTableColumn, SdsTableLazyEvent, SdsTableRowExpansionContext, SdsTableSize, SdsTableSortEvent, SdsTextareaResize, SdsTextareaSize, SdsToggleSwitchSize, SdsTopbarAppearance };
|
|
1803
|
+
export type { SdsAccordionActive, SdsAccordionValue, SdsAvatarStatus, SdsBadgeSize, SdsBadgeVariant, SdsButtonShape, SdsButtonSize, SdsButtonVariant, SdsCardVariant, SdsCheckboxSize, SdsDatePickerSize, SdsIconName, SdsIconSize, SdsInputAppearance, SdsInputShape, SdsInputSize, SdsInputType, SdsMultiSelectDisplay, SdsMultiSelectSize, SdsPaginatorSize, SdsPaginatorState, SdsPhoneCountry, SdsPhoneInputSize, SdsPhoneValue, SdsSelectSize, SdsSortOrder, SdsTabValue, SdsTableCellContext, SdsTableColumn, SdsTableLazyEvent, SdsTableRowExpansionContext, SdsTableSize, SdsTableSortEvent, SdsTextareaResize, SdsTextareaSize, SdsToggleSwitchSize, SdsTopbarAppearance };
|
package/package.json
CHANGED
|
Binary file
|