@ids-group-ltd/ids-design-system 0.3.0 → 0.4.0
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/README.md +2 -2
- package/fesm2022/ids-group-ltd-ids-design-system.mjs +2523 -269
- package/fesm2022/ids-group-ltd-ids-design-system.mjs.map +1 -1
- package/package.json +1 -1
- package/styles/_breakpoints.scss +50 -0
- package/styles/_dropdown-overlay.scss +1 -0
- package/styles/_ds-color.scss +36 -0
- package/styles/_overlay-motion.scss +18 -0
- package/styles/_scrollbar.scss +1 -0
- package/styles/_theme-activation.scss +49 -0
- package/styles/_tokens.scss +54 -17
- package/styles/ds.scss +15 -9
- package/themes/README.md +71 -58
- package/themes/{default/_palette.scss → _base-palette.scss} +35 -18
- package/themes/{default/_theme.scss → _semantic.scss} +77 -64
- package/themes/dark/_palette.scss +39 -0
- package/themes/dark/_theme.scss +122 -0
- package/themes/light/_palette.scss +34 -0
- package/themes/light/_theme.scss +15 -0
- package/types/ids-group-ltd-ids-design-system.d.ts +688 -30
|
@@ -1,7 +1,8 @@
|
|
|
1
1
|
import * as _angular_core from '@angular/core';
|
|
2
|
-
import { InjectionToken, Provider, TemplateRef, ModelSignal,
|
|
2
|
+
import { InjectionToken, Provider, EnvironmentProviders, ElementRef, TemplateRef, ModelSignal, OnDestroy } from '@angular/core';
|
|
3
3
|
import { SafeHtml } from '@angular/platform-browser';
|
|
4
4
|
import { ControlValueAccessor } from '@angular/forms';
|
|
5
|
+
import * as _ids_group_ltd_ids_design_system from '@ids-group-ltd/ids-design-system';
|
|
5
6
|
|
|
6
7
|
declare const ICONS: {
|
|
7
8
|
readonly search: "<circle cx=\"11\" cy=\"11\" r=\"7\" /><path d=\"m20 20-3.5-3.5\" />";
|
|
@@ -109,6 +110,31 @@ declare const DS_CONFIG: InjectionToken<DsConfig>;
|
|
|
109
110
|
*/
|
|
110
111
|
declare function provideDsConfig(config: DsConfig): Provider;
|
|
111
112
|
|
|
113
|
+
interface DsThemeOptions {
|
|
114
|
+
/**
|
|
115
|
+
* Follow the operating-system colour scheme: on startup set `data-theme` on
|
|
116
|
+
* `<html>` from `prefers-color-scheme` and keep it in sync as the OS changes.
|
|
117
|
+
* Default `false` — the design system stays on its explicit light default
|
|
118
|
+
* and dark is opt-in via `<html data-theme="dark">`.
|
|
119
|
+
*/
|
|
120
|
+
followSystem?: boolean;
|
|
121
|
+
}
|
|
122
|
+
/**
|
|
123
|
+
* App-root theme configuration for the design system.
|
|
124
|
+
*
|
|
125
|
+
* ```ts
|
|
126
|
+
* // app.config.ts
|
|
127
|
+
* export const appConfig: ApplicationConfig = {
|
|
128
|
+
* providers: [provideDsTheme({ followSystem: true })],
|
|
129
|
+
* };
|
|
130
|
+
* ```
|
|
131
|
+
*
|
|
132
|
+
* Light is the default with no provider; `followSystem` opts into OS-driven
|
|
133
|
+
* switching. A manual `<html data-theme="dark">` always wins over the initial
|
|
134
|
+
* value this sets.
|
|
135
|
+
*/
|
|
136
|
+
declare function provideDsTheme(options?: DsThemeOptions): EnvironmentProviders;
|
|
137
|
+
|
|
112
138
|
/** A reference to the overlay/container the projected content lives in, used to
|
|
113
139
|
* close it from the inside — e.g. a popover (and, later, a dropdown/select)
|
|
114
140
|
* closing when a menu item is selected. The container provides it via DI;
|
|
@@ -163,11 +189,19 @@ declare const DS_ICON_REGISTRY: InjectionToken<Readonly<Record<string, string>>>
|
|
|
163
189
|
*/
|
|
164
190
|
declare function provideDsIcons(icons: DsIconRegistry): Provider;
|
|
165
191
|
|
|
166
|
-
type
|
|
167
|
-
type
|
|
192
|
+
type ButtonColor = 'primary' | 'secondary' | 'tertiary' | 'neutral' | 'error' | 'success' | 'warning';
|
|
193
|
+
type ButtonVariant = 'solid' | 'tonal' | 'ghost' | 'outline' | 'text';
|
|
194
|
+
type ButtonSize = 'sm' | 'md' | 'lg';
|
|
168
195
|
type ButtonType = 'button' | 'submit' | 'reset';
|
|
169
196
|
|
|
170
197
|
declare class ButtonComponent {
|
|
198
|
+
/** Brand/status hue family. */
|
|
199
|
+
readonly color: _angular_core.InputSignal<ButtonColor>;
|
|
200
|
+
/** Fill pattern: solid | tonal | ghost | outline | text. All color×variant
|
|
201
|
+
pairs render; some are UX-discouraged (see DISCOURAGED_COMBOS / the docs)
|
|
202
|
+
and emit a dev-mode warning — they work, but read poorly. `text` is
|
|
203
|
+
discouraged for ALL colours — prefer the global `.link` class; it stays for
|
|
204
|
+
cases needing the ds-button API (loading/fullWidth/typed pressed). */
|
|
171
205
|
readonly variant: _angular_core.InputSignal<ButtonVariant>;
|
|
172
206
|
readonly size: _angular_core.InputSignal<ButtonSize>;
|
|
173
207
|
readonly type: _angular_core.InputSignal<ButtonType>;
|
|
@@ -182,11 +216,34 @@ declare class ButtonComponent {
|
|
|
182
216
|
readonly ariaLabel: _angular_core.InputSignal<string | null>;
|
|
183
217
|
readonly icon: _angular_core.InputSignal<IconName | null>;
|
|
184
218
|
readonly trailingIcon: _angular_core.InputSignal<IconName | null>;
|
|
219
|
+
/** ARIA `aria-haspopup`, forwarded to the inner <button> — set when this
|
|
220
|
+
* button triggers a menu/dialog/listbox overlay. */
|
|
221
|
+
readonly ariaHasPopup: _angular_core.InputSignal<"grid" | "true" | "menu" | "listbox" | "tree" | "dialog" | null>;
|
|
222
|
+
/** ARIA `aria-expanded`, forwarded to the inner <button> — bind to the
|
|
223
|
+
* overlay's open state on a trigger button. */
|
|
224
|
+
readonly ariaExpanded: _angular_core.InputSignal<boolean | null>;
|
|
185
225
|
readonly pressed: _angular_core.OutputEmitterRef<MouseEvent>;
|
|
226
|
+
/** The inner native <button>, exposed so overlay triggers can position
|
|
227
|
+
* against and restore focus to the real focusable element — e.g.
|
|
228
|
+
* `(pressed)="pop.toggle(trigger.buttonRef().nativeElement)"`. */
|
|
229
|
+
readonly buttonRef: _angular_core.Signal<ElementRef<HTMLButtonElement>>;
|
|
186
230
|
protected readonly classes: _angular_core.Signal<string>;
|
|
231
|
+
constructor();
|
|
187
232
|
protected onClick(event: MouseEvent): void;
|
|
188
233
|
static ɵfac: _angular_core.ɵɵFactoryDeclaration<ButtonComponent, never>;
|
|
189
|
-
static ɵcmp: _angular_core.ɵɵComponentDeclaration<ButtonComponent, "ds-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; }; "fullWidth": { "alias": "fullWidth"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "trailingIcon": { "alias": "trailingIcon"; "required": false; "isSignal": true; }; }, { "pressed": "pressed"; }, never, ["*", "[dsButtonSubtext]"], true, never>;
|
|
234
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<ButtonComponent, "ds-button", never, { "color": { "alias": "color"; "required": false; "isSignal": true; }; "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; }; "fullWidth": { "alias": "fullWidth"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "trailingIcon": { "alias": "trailingIcon"; "required": false; "isSignal": true; }; "ariaHasPopup": { "alias": "ariaHasPopup"; "required": false; "isSignal": true; }; "ariaExpanded": { "alias": "ariaExpanded"; "required": false; "isSignal": true; }; }, { "pressed": "pressed"; }, never, ["*", "[dsButtonSubtext]"], true, never>;
|
|
235
|
+
}
|
|
236
|
+
|
|
237
|
+
/** A single binary toggle button (pressed / not pressed) with an optional
|
|
238
|
+
* leading icon and a projected label. Distinct from `ds-segmented` (a
|
|
239
|
+
* one-of-many value toggle) — this is a standalone on/off control. */
|
|
240
|
+
declare class ToggleButtonComponent {
|
|
241
|
+
readonly pressed: _angular_core.ModelSignal<boolean>;
|
|
242
|
+
readonly icon: _angular_core.InputSignal<string>;
|
|
243
|
+
readonly disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
244
|
+
protected toggle(): void;
|
|
245
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<ToggleButtonComponent, never>;
|
|
246
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<ToggleButtonComponent, "ds-toggle-button", never, { "pressed": { "alias": "pressed"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; }, { "pressed": "pressedChange"; }, never, ["*"], true, never>;
|
|
190
247
|
}
|
|
191
248
|
|
|
192
249
|
type IconButtonVariant = 'standard' | 'filled' | 'tonal' | 'outlined';
|
|
@@ -203,6 +260,9 @@ declare class IconButtonComponent {
|
|
|
203
260
|
readonly icon: _angular_core.InputSignal<IconName>;
|
|
204
261
|
readonly ariaLabel: _angular_core.InputSignal<string>;
|
|
205
262
|
readonly variant: _angular_core.InputSignal<IconButtonVariant>;
|
|
263
|
+
/** Brand/status hue family (shared with ds-button). `variant` is the fill
|
|
264
|
+
axis; `color` recolours the accent the fill consumes. Default primary. */
|
|
265
|
+
readonly color: _angular_core.InputSignal<ButtonColor>;
|
|
206
266
|
readonly size: _angular_core.InputSignal<IconButtonSize>;
|
|
207
267
|
readonly type: _angular_core.InputSignal<IconButtonType>;
|
|
208
268
|
readonly disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
@@ -213,7 +273,7 @@ declare class IconButtonComponent {
|
|
|
213
273
|
protected readonly iconSize: _angular_core.Signal<16 | 24 | 20>;
|
|
214
274
|
protected onClick(event: MouseEvent): void;
|
|
215
275
|
static ɵfac: _angular_core.ɵɵFactoryDeclaration<IconButtonComponent, never>;
|
|
216
|
-
static ɵcmp: _angular_core.ɵɵComponentDeclaration<IconButtonComponent, "ds-icon-button", never, { "icon": { "alias": "icon"; "required": true; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": true; "isSignal": true; }; "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; }; "selected": { "alias": "selected"; "required": false; "isSignal": true; }; }, { "pressed": "pressed"; }, never, never, true, never>;
|
|
276
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<IconButtonComponent, "ds-icon-button", never, { "icon": { "alias": "icon"; "required": true; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": true; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "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; }; "selected": { "alias": "selected"; "required": false; "isSignal": true; }; }, { "pressed": "pressed"; }, never, never, true, never>;
|
|
217
277
|
}
|
|
218
278
|
|
|
219
279
|
type BadgeLifecycle = 'planning' | 'confirmed' | 'active' | 'completed';
|
|
@@ -365,6 +425,34 @@ declare abstract class DsControlValueAccessor<T> implements ControlValueAccessor
|
|
|
365
425
|
static ɵfac: _angular_core.ɵɵFactoryDeclaration<DsControlValueAccessor<any>, never>;
|
|
366
426
|
static ɵdir: _angular_core.ɵɵDirectiveDeclaration<DsControlValueAccessor<any>, never, never, {}, {}, never, never, true, never>;
|
|
367
427
|
}
|
|
428
|
+
/**
|
|
429
|
+
* Shared `ControlValueAccessor` for DS boolean controls (checkbox, switch)
|
|
430
|
+
* whose state lives in a `checked` model signal rather than `value`. Bridges
|
|
431
|
+
* with Angular forms in both directions without affecting the `[(checked)]`
|
|
432
|
+
* signal API. Subclasses must OR `formDisabled()` into their effective disabled
|
|
433
|
+
* state and call `markTouched()` from a blur handler.
|
|
434
|
+
*/
|
|
435
|
+
declare abstract class DsBooleanControlValueAccessor implements ControlValueAccessor {
|
|
436
|
+
/** The component's two-way checked model. */
|
|
437
|
+
abstract readonly checked: ModelSignal<boolean>;
|
|
438
|
+
/** Driven by the forms API via `setDisabledState`. */
|
|
439
|
+
protected readonly formDisabled: _angular_core.WritableSignal<boolean>;
|
|
440
|
+
private onChange;
|
|
441
|
+
private onTouched;
|
|
442
|
+
private synced;
|
|
443
|
+
private hasSynced;
|
|
444
|
+
constructor();
|
|
445
|
+
/** Call from a blur handler so the control reports `ng-touched`. */
|
|
446
|
+
protected markTouched(): void;
|
|
447
|
+
writeValue(value: boolean): void;
|
|
448
|
+
registerOnChange(fn: (value: boolean) => void): void;
|
|
449
|
+
registerOnTouched(fn: () => void): void;
|
|
450
|
+
setDisabledState(isDisabled: boolean): void;
|
|
451
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<DsBooleanControlValueAccessor, never>;
|
|
452
|
+
static ɵdir: _angular_core.ɵɵDirectiveDeclaration<DsBooleanControlValueAccessor, never, never, {}, {}, never, never, true, never>;
|
|
453
|
+
}
|
|
454
|
+
|
|
455
|
+
type FieldMessageState = 'default' | 'error' | 'success';
|
|
368
456
|
|
|
369
457
|
type InputSize = 'sm' | 'md' | 'lg';
|
|
370
458
|
type InputType = 'text' | 'email' | 'password' | 'number' | 'tel' | 'url' | 'search';
|
|
@@ -380,6 +468,12 @@ declare class InputComponent extends DsControlValueAccessor<string> {
|
|
|
380
468
|
readonly readOnly: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
381
469
|
readonly invalid: _angular_core.InputSignal<boolean>;
|
|
382
470
|
readonly success: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
471
|
+
/** Shows a trailing spinner — e.g. async validation in flight. The input
|
|
472
|
+
* stays editable; pair with a `hint` like "Checking availability…". */
|
|
473
|
+
readonly loading: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
474
|
+
/** Floating-label variant — the label sits inside a taller control instead
|
|
475
|
+
* of stacked above it. */
|
|
476
|
+
readonly floating: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
383
477
|
readonly withAddon: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
384
478
|
readonly withAddonRight: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
385
479
|
readonly required: _angular_core.InputSignal<boolean>;
|
|
@@ -412,6 +506,7 @@ declare class InputComponent extends DsControlValueAccessor<string> {
|
|
|
412
506
|
protected readonly canClear: _angular_core.Signal<boolean>;
|
|
413
507
|
protected readonly uid: string;
|
|
414
508
|
protected readonly hintId: _angular_core.Signal<string | null>;
|
|
509
|
+
protected readonly messageState: _angular_core.Signal<FieldMessageState>;
|
|
415
510
|
/** Only name via aria-label when there's no visible `<label for>`. */
|
|
416
511
|
protected readonly resolvedAriaLabel: _angular_core.Signal<string | null>;
|
|
417
512
|
/** Effective disabled — own `disabled` input OR the reactive-forms state. */
|
|
@@ -422,7 +517,7 @@ declare class InputComponent extends DsControlValueAccessor<string> {
|
|
|
422
517
|
protected readonly wrapperClasses: _angular_core.Signal<string>;
|
|
423
518
|
protected clear(): void;
|
|
424
519
|
static ɵfac: _angular_core.ɵɵFactoryDeclaration<InputComponent, never>;
|
|
425
|
-
static ɵcmp: _angular_core.ɵɵComponentDeclaration<InputComponent, "ds-input", never, { "value": { "alias": "value"; "required": false; "isSignal": true; }; "type": { "alias": "type"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "hint": { "alias": "hint"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "readOnly": { "alias": "readOnly"; "required": false; "isSignal": true; }; "invalid": { "alias": "invalid"; "required": false; "isSignal": true; }; "success": { "alias": "success"; "required": false; "isSignal": true; }; "withAddon": { "alias": "withAddon"; "required": false; "isSignal": true; }; "withAddonRight": { "alias": "withAddonRight"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "optional": { "alias": "optional"; "required": false; "isSignal": true; }; "name": { "alias": "name"; "required": false; "isSignal": true; }; "min": { "alias": "min"; "required": false; "isSignal": true; }; "max": { "alias": "max"; "required": false; "isSignal": true; }; "step": { "alias": "step"; "required": false; "isSignal": true; }; "autocomplete": { "alias": "autocomplete"; "required": false; "isSignal": true; }; "autofocus": { "alias": "autofocus"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "enterKeyHint": { "alias": "enterKeyHint"; "required": false; "isSignal": true; }; "inputMode": { "alias": "inputMode"; "required": false; "isSignal": true; }; "clearable": { "alias": "clearable"; "required": false; "isSignal": true; }; "passwordToggle": { "alias": "passwordToggle"; "required": false; "isSignal": true; }; "passwordVisible": { "alias": "passwordVisible"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "blurred": "blurred"; "passwordVisible": "passwordVisibleChange"; }, never, ["[dsInputPrefix]", "[dsInputSuffix]"], true, never>;
|
|
520
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<InputComponent, "ds-input", never, { "value": { "alias": "value"; "required": false; "isSignal": true; }; "type": { "alias": "type"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "hint": { "alias": "hint"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "readOnly": { "alias": "readOnly"; "required": false; "isSignal": true; }; "invalid": { "alias": "invalid"; "required": false; "isSignal": true; }; "success": { "alias": "success"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "floating": { "alias": "floating"; "required": false; "isSignal": true; }; "withAddon": { "alias": "withAddon"; "required": false; "isSignal": true; }; "withAddonRight": { "alias": "withAddonRight"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "optional": { "alias": "optional"; "required": false; "isSignal": true; }; "name": { "alias": "name"; "required": false; "isSignal": true; }; "min": { "alias": "min"; "required": false; "isSignal": true; }; "max": { "alias": "max"; "required": false; "isSignal": true; }; "step": { "alias": "step"; "required": false; "isSignal": true; }; "autocomplete": { "alias": "autocomplete"; "required": false; "isSignal": true; }; "autofocus": { "alias": "autofocus"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "enterKeyHint": { "alias": "enterKeyHint"; "required": false; "isSignal": true; }; "inputMode": { "alias": "inputMode"; "required": false; "isSignal": true; }; "clearable": { "alias": "clearable"; "required": false; "isSignal": true; }; "passwordToggle": { "alias": "passwordToggle"; "required": false; "isSignal": true; }; "passwordVisible": { "alias": "passwordVisible"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "blurred": "blurred"; "passwordVisible": "passwordVisibleChange"; }, never, ["[dsInputPrefix]", "[dsInputSuffix]"], true, never>;
|
|
426
521
|
}
|
|
427
522
|
|
|
428
523
|
type NumberStepperSize = 'sm' | 'md' | 'lg';
|
|
@@ -467,6 +562,7 @@ declare class TextareaComponent extends DsControlValueAccessor<string> {
|
|
|
467
562
|
readonly ariaLabel: _angular_core.InputSignal<string | null>;
|
|
468
563
|
protected readonly uid: string;
|
|
469
564
|
protected readonly hintId: _angular_core.Signal<string | null>;
|
|
565
|
+
protected readonly messageState: _angular_core.Signal<FieldMessageState>;
|
|
470
566
|
protected readonly resolvedAriaLabel: _angular_core.Signal<string | null>;
|
|
471
567
|
/** Effective disabled — own `disabled` input OR the reactive-forms state. */
|
|
472
568
|
protected readonly isDisabled: _angular_core.Signal<boolean>;
|
|
@@ -529,6 +625,7 @@ declare class SelectComponent extends DsControlValueAccessor<string> {
|
|
|
529
625
|
readonly label: _angular_core.InputSignal<string>;
|
|
530
626
|
readonly disabled: _angular_core.InputSignal<boolean>;
|
|
531
627
|
readonly invalid: _angular_core.InputSignal<boolean>;
|
|
628
|
+
readonly hint: _angular_core.InputSignal<string>;
|
|
532
629
|
readonly required: _angular_core.InputSignal<boolean>;
|
|
533
630
|
readonly optional: _angular_core.InputSignal<boolean>;
|
|
534
631
|
readonly name: _angular_core.InputSignal<string | null>;
|
|
@@ -537,6 +634,8 @@ declare class SelectComponent extends DsControlValueAccessor<string> {
|
|
|
537
634
|
protected readonly uid: string;
|
|
538
635
|
protected readonly labelId: string;
|
|
539
636
|
protected readonly listboxId: string;
|
|
637
|
+
protected readonly hintId: _angular_core.Signal<string | null>;
|
|
638
|
+
protected readonly messageState: _angular_core.Signal<FieldMessageState>;
|
|
540
639
|
protected optionId(flatIndex: number): string;
|
|
541
640
|
/** Active option for `aria-activedescendant` (combobox keeps DOM focus). */
|
|
542
641
|
protected readonly activeDescendant: _angular_core.Signal<string | null>;
|
|
@@ -572,7 +671,7 @@ declare class SelectComponent extends DsControlValueAccessor<string> {
|
|
|
572
671
|
private firstEnabledIndex;
|
|
573
672
|
private lastEnabledIndex;
|
|
574
673
|
static ɵfac: _angular_core.ɵɵFactoryDeclaration<SelectComponent, never>;
|
|
575
|
-
static ɵcmp: _angular_core.ɵɵComponentDeclaration<SelectComponent, "ds-select", never, { "value": { "alias": "value"; "required": false; "isSignal": true; }; "options": { "alias": "options"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "invalid": { "alias": "invalid"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "optional": { "alias": "optional"; "required": false; "isSignal": true; }; "name": { "alias": "name"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; }, never, never, true, [{ directive: typeof DsStaticPreview; inputs: { "staticPreview": "staticPreview"; }; outputs: {}; }]>;
|
|
674
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<SelectComponent, "ds-select", never, { "value": { "alias": "value"; "required": false; "isSignal": true; }; "options": { "alias": "options"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "invalid": { "alias": "invalid"; "required": false; "isSignal": true; }; "hint": { "alias": "hint"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "optional": { "alias": "optional"; "required": false; "isSignal": true; }; "name": { "alias": "name"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; }, never, never, true, [{ directive: typeof DsStaticPreview; inputs: { "staticPreview": "staticPreview"; }; outputs: {}; }]>;
|
|
576
675
|
}
|
|
577
676
|
|
|
578
677
|
type DropdownSize = 'sm' | 'md' | 'lg';
|
|
@@ -702,6 +801,16 @@ declare class TableComponent<T extends {
|
|
|
702
801
|
* column. Off by default so non-navigating tables don't advertise a false
|
|
703
802
|
* click affordance. */
|
|
704
803
|
readonly rowInteractive: _angular_core.InputSignal<boolean>;
|
|
804
|
+
/** Rows per page. `null` (default) disables pagination — all rows render. */
|
|
805
|
+
readonly pageSize: _angular_core.ModelSignal<number | null>;
|
|
806
|
+
/** Current 1-based page. Only meaningful when `pageSize()` is set. */
|
|
807
|
+
readonly page: _angular_core.ModelSignal<number>;
|
|
808
|
+
readonly pageSizeOptions: _angular_core.InputSignal<number[]>;
|
|
809
|
+
/** When true, the table sorts `data()` itself; otherwise it only emits
|
|
810
|
+
* `sortChange` and leaves ordering to the consumer (default). */
|
|
811
|
+
readonly clientSort: _angular_core.InputSignal<boolean>;
|
|
812
|
+
/** Pin the first data column (and the select column) on horizontal scroll. */
|
|
813
|
+
readonly stickyFirstColumn: _angular_core.InputSignal<boolean>;
|
|
705
814
|
readonly rowClick: _angular_core.OutputEmitterRef<T>;
|
|
706
815
|
readonly sortChange: _angular_core.OutputEmitterRef<SortChangeEvent>;
|
|
707
816
|
/** Cell templates supplied as an explicit map instead of (or in addition to)
|
|
@@ -728,8 +837,16 @@ declare class TableComponent<T extends {
|
|
|
728
837
|
protected readonly tableClasses: _angular_core.Signal<string>;
|
|
729
838
|
protected readonly isSkeletonLoading: _angular_core.Signal<boolean>;
|
|
730
839
|
protected readonly isOverlayLoading: _angular_core.Signal<boolean>;
|
|
840
|
+
/** Client-side sort over the full data set — only when `clientSort()`. */
|
|
841
|
+
protected readonly sortedData: _angular_core.Signal<readonly T[]>;
|
|
842
|
+
/** Current page's slice of the sorted rows, when paginating. */
|
|
843
|
+
protected readonly pagedData: _angular_core.Signal<readonly T[]>;
|
|
844
|
+
/** Rows actually rendered: paged when paginating, else sorted/raw data. */
|
|
845
|
+
protected readonly displayData: _angular_core.Signal<readonly T[]>;
|
|
731
846
|
protected readonly allSelected: _angular_core.Signal<boolean>;
|
|
732
847
|
protected readonly someSelected: _angular_core.Signal<boolean>;
|
|
848
|
+
/** Select-all is page-scoped only when paginating. */
|
|
849
|
+
protected readonly selectAllLabel: _angular_core.Signal<"Select all rows on this page" | "Select all rows">;
|
|
733
850
|
protected readonly skeletonArray: _angular_core.Signal<any[]>;
|
|
734
851
|
protected isSelected(row: T): boolean;
|
|
735
852
|
protected onToggleAll(event: Event): void;
|
|
@@ -748,7 +865,7 @@ declare class TableComponent<T extends {
|
|
|
748
865
|
* across re-renders. Mixes column key + row index into one of five widths. */
|
|
749
866
|
protected skeletonWidth(col: TableColumn<T>, rowIndex: number): string;
|
|
750
867
|
static ɵfac: _angular_core.ɵɵFactoryDeclaration<TableComponent<any>, never>;
|
|
751
|
-
static ɵcmp: _angular_core.ɵɵComponentDeclaration<TableComponent<any>, "ds-table", never, { "data": { "alias": "data"; "required": true; "isSignal": true; }; "columns": { "alias": "columns"; "required": true; "isSignal": true; }; "selectable": { "alias": "selectable"; "required": false; "isSignal": true; }; "bordered": { "alias": "bordered"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "stickyHeader": { "alias": "stickyHeader"; "required": false; "isSignal": true; }; "selectedIds": { "alias": "selectedIds"; "required": false; "isSignal": true; }; "sortKey": { "alias": "sortKey"; "required": false; "isSignal": true; }; "sortDir": { "alias": "sortDir"; "required": false; "isSignal": true; }; "skeletonRows": { "alias": "skeletonRows"; "required": false; "isSignal": true; }; "caption": { "alias": "caption"; "required": false; "isSignal": true; }; "rowInteractive": { "alias": "rowInteractive"; "required": false; "isSignal": true; }; "cellTemplateMap": { "alias": "cellTemplateMap"; "required": false; "isSignal": true; }; "emptyTemplate": { "alias": "emptyTemplate"; "required": false; "isSignal": true; }; }, { "selectedIds": "selectedIdsChange"; "sortKey": "sortKeyChange"; "sortDir": "sortDirChange"; "rowClick": "rowClick"; "sortChange": "sortChange"; }, ["cellTemplateDirectives"], ["[empty]", "[bulk-actions]"], true, never>;
|
|
868
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<TableComponent<any>, "ds-table", never, { "data": { "alias": "data"; "required": true; "isSignal": true; }; "columns": { "alias": "columns"; "required": true; "isSignal": true; }; "selectable": { "alias": "selectable"; "required": false; "isSignal": true; }; "bordered": { "alias": "bordered"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "stickyHeader": { "alias": "stickyHeader"; "required": false; "isSignal": true; }; "selectedIds": { "alias": "selectedIds"; "required": false; "isSignal": true; }; "sortKey": { "alias": "sortKey"; "required": false; "isSignal": true; }; "sortDir": { "alias": "sortDir"; "required": false; "isSignal": true; }; "skeletonRows": { "alias": "skeletonRows"; "required": false; "isSignal": true; }; "caption": { "alias": "caption"; "required": false; "isSignal": true; }; "rowInteractive": { "alias": "rowInteractive"; "required": false; "isSignal": true; }; "pageSize": { "alias": "pageSize"; "required": false; "isSignal": true; }; "page": { "alias": "page"; "required": false; "isSignal": true; }; "pageSizeOptions": { "alias": "pageSizeOptions"; "required": false; "isSignal": true; }; "clientSort": { "alias": "clientSort"; "required": false; "isSignal": true; }; "stickyFirstColumn": { "alias": "stickyFirstColumn"; "required": false; "isSignal": true; }; "cellTemplateMap": { "alias": "cellTemplateMap"; "required": false; "isSignal": true; }; "emptyTemplate": { "alias": "emptyTemplate"; "required": false; "isSignal": true; }; }, { "selectedIds": "selectedIdsChange"; "sortKey": "sortKeyChange"; "sortDir": "sortDirChange"; "pageSize": "pageSizeChange"; "page": "pageChange"; "rowClick": "rowClick"; "sortChange": "sortChange"; }, ["cellTemplateDirectives"], ["[empty]", "[bulk-actions]"], true, never>;
|
|
752
869
|
}
|
|
753
870
|
|
|
754
871
|
declare class PaginationComponent {
|
|
@@ -789,9 +906,11 @@ interface DayCell {
|
|
|
789
906
|
isRangeEnd: boolean;
|
|
790
907
|
isSelected: boolean;
|
|
791
908
|
}
|
|
792
|
-
declare class DatePickerComponent {
|
|
909
|
+
declare class DatePickerComponent extends DsControlValueAccessor<Date | RangeValue | null> {
|
|
910
|
+
constructor();
|
|
793
911
|
private readonly overlay;
|
|
794
912
|
private readonly vcr;
|
|
913
|
+
private readonly injector;
|
|
795
914
|
readonly mode: _angular_core.InputSignal<DatePickerMode>;
|
|
796
915
|
readonly size: _angular_core.InputSignal<DatePickerSize>;
|
|
797
916
|
readonly value: _angular_core.ModelSignal<Date | RangeValue | null>;
|
|
@@ -800,8 +919,16 @@ declare class DatePickerComponent {
|
|
|
800
919
|
readonly hint: _angular_core.InputSignal<string>;
|
|
801
920
|
readonly required: _angular_core.InputSignal<boolean>;
|
|
802
921
|
readonly optional: _angular_core.InputSignal<boolean>;
|
|
922
|
+
readonly disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
923
|
+
readonly invalid: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
803
924
|
/** Accessible name when no visible `label` is provided. */
|
|
804
925
|
readonly ariaLabel: _angular_core.InputSignal<string | null>;
|
|
926
|
+
/** Bounds for the year dropdown in the calendar header. */
|
|
927
|
+
readonly minYear: _angular_core.InputSignal<number>;
|
|
928
|
+
readonly maxYear: _angular_core.InputSignal<number>;
|
|
929
|
+
protected readonly isDisabled: _angular_core.Signal<boolean>;
|
|
930
|
+
protected readonly hintId: _angular_core.Signal<string | null>;
|
|
931
|
+
protected readonly messageState: _angular_core.Signal<FieldMessageState>;
|
|
805
932
|
protected readonly uid: string;
|
|
806
933
|
protected readonly labelId: string;
|
|
807
934
|
protected readonly isOpen: _angular_core.WritableSignal<boolean>;
|
|
@@ -823,7 +950,26 @@ declare class DatePickerComponent {
|
|
|
823
950
|
protected readonly panelTpl: _angular_core.Signal<TemplateRef<unknown>>;
|
|
824
951
|
private overlayRef;
|
|
825
952
|
protected readonly displayLabel: _angular_core.Signal<string>;
|
|
826
|
-
protected readonly
|
|
953
|
+
protected readonly monthMenuOpen: _angular_core.WritableSignal<boolean>;
|
|
954
|
+
protected readonly yearMenuOpen: _angular_core.WritableSignal<boolean>;
|
|
955
|
+
protected readonly monthNames: string[];
|
|
956
|
+
protected readonly viewMonthIndex: _angular_core.Signal<number>;
|
|
957
|
+
protected readonly viewYear: _angular_core.Signal<number>;
|
|
958
|
+
/** First year shown in the year grid; paged by YEAR_PAGE_SIZE within [minYear, maxYear]. */
|
|
959
|
+
protected readonly yearPageStart: _angular_core.WritableSignal<number>;
|
|
960
|
+
protected readonly yearsOnPage: _angular_core.Signal<number[]>;
|
|
961
|
+
protected readonly yearRangeLabel: _angular_core.Signal<string>;
|
|
962
|
+
protected readonly canPrevYearPage: _angular_core.Signal<boolean>;
|
|
963
|
+
protected readonly canNextYearPage: _angular_core.Signal<boolean>;
|
|
964
|
+
/** Aligns the page so `year` lands on a stable grid boundary measured from minYear. */
|
|
965
|
+
private yearPageStartFor;
|
|
966
|
+
protected toggleMonthMenu(event: Event): void;
|
|
967
|
+
protected toggleYearMenu(event: Event): void;
|
|
968
|
+
protected prevYearPage(event: Event): void;
|
|
969
|
+
protected nextYearPage(event: Event): void;
|
|
970
|
+
protected closeMenus(): void;
|
|
971
|
+
protected selectMonth(index: number, event: Event): void;
|
|
972
|
+
protected selectYear(year: number, event: Event): void;
|
|
827
973
|
protected readonly daysGrid: _angular_core.Signal<DayCell[]>;
|
|
828
974
|
private getRangeContext;
|
|
829
975
|
protected open(): void;
|
|
@@ -831,9 +977,8 @@ declare class DatePickerComponent {
|
|
|
831
977
|
protected prevMonth(): void;
|
|
832
978
|
protected nextMonth(): void;
|
|
833
979
|
protected selectDay(cell: DayCell): void;
|
|
834
|
-
protected cellClasses(cell: DayCell): string;
|
|
835
980
|
static ɵfac: _angular_core.ɵɵFactoryDeclaration<DatePickerComponent, never>;
|
|
836
|
-
static ɵcmp: _angular_core.ɵɵComponentDeclaration<DatePickerComponent, "ds-date-picker", never, { "mode": { "alias": "mode"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "hint": { "alias": "hint"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "optional": { "alias": "optional"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; }, never, never, true, never>;
|
|
981
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<DatePickerComponent, "ds-date-picker", never, { "mode": { "alias": "mode"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "hint": { "alias": "hint"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "optional": { "alias": "optional"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "invalid": { "alias": "invalid"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "minYear": { "alias": "minYear"; "required": false; "isSignal": true; }; "maxYear": { "alias": "maxYear"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; }, never, never, true, never>;
|
|
837
982
|
}
|
|
838
983
|
|
|
839
984
|
interface BreadcrumbItem {
|
|
@@ -946,8 +1091,14 @@ declare class ModalComponent {
|
|
|
946
1091
|
readonly title: _angular_core.InputSignal<string>;
|
|
947
1092
|
readonly closed: _angular_core.OutputEmitterRef<void>;
|
|
948
1093
|
readonly confirmed: _angular_core.OutputEmitterRef<void>;
|
|
1094
|
+
/** Dialog is in the DOM (kept true through the leave animation). */
|
|
1095
|
+
protected readonly rendered: _angular_core.WritableSignal<boolean>;
|
|
1096
|
+
/** Playing the scrim fade-out leave animation. */
|
|
1097
|
+
protected readonly closing: _angular_core.WritableSignal<boolean>;
|
|
1098
|
+
private wasOpen;
|
|
949
1099
|
constructor();
|
|
950
1100
|
protected onClose(): void;
|
|
1101
|
+
protected onLeaveEnd(event: AnimationEvent): void;
|
|
951
1102
|
protected onBackdrop(event: MouseEvent): void;
|
|
952
1103
|
static ɵfac: _angular_core.ɵɵFactoryDeclaration<ModalComponent, never>;
|
|
953
1104
|
static ɵcmp: _angular_core.ɵɵComponentDeclaration<ModalComponent, "ds-modal", never, { "open": { "alias": "open"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "danger": { "alias": "danger"; "required": false; "isSignal": true; }; "title": { "alias": "title"; "required": true; "isSignal": true; }; }, { "open": "openChange"; "closed": "closed"; "confirmed": "confirmed"; }, never, ["[body]", "[impact]", "[actions]"], true, [{ directive: typeof DsStaticPreview; inputs: { "staticPreview": "staticPreview"; }; outputs: {}; }]>;
|
|
@@ -958,12 +1109,37 @@ declare class ModalCardComponent {
|
|
|
958
1109
|
readonly danger: _angular_core.InputSignal<boolean>;
|
|
959
1110
|
readonly title: _angular_core.InputSignal<string>;
|
|
960
1111
|
readonly showClose: _angular_core.InputSignal<boolean>;
|
|
1112
|
+
readonly icon: _angular_core.InputSignal<IconName | null>;
|
|
1113
|
+
readonly dialogRole: _angular_core.InputSignal<"dialog" | "alertdialog">;
|
|
961
1114
|
readonly closed: _angular_core.OutputEmitterRef<void>;
|
|
962
1115
|
protected readonly titleId: string;
|
|
963
1116
|
protected readonly classes: _angular_core.Signal<string>;
|
|
964
1117
|
protected onClose(): void;
|
|
965
1118
|
static ɵfac: _angular_core.ɵɵFactoryDeclaration<ModalCardComponent, never>;
|
|
966
|
-
static ɵcmp: _angular_core.ɵɵComponentDeclaration<ModalCardComponent, "ds-modal-card", never, { "size": { "alias": "size"; "required": false; "isSignal": true; }; "danger": { "alias": "danger"; "required": false; "isSignal": true; }; "title": { "alias": "title"; "required": true; "isSignal": true; }; "showClose": { "alias": "showClose"; "required": false; "isSignal": true; }; }, { "closed": "closed"; }, never, ["[body]", "[impact]", "[actions]"], true, never>;
|
|
1119
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<ModalCardComponent, "ds-modal-card", never, { "size": { "alias": "size"; "required": false; "isSignal": true; }; "danger": { "alias": "danger"; "required": false; "isSignal": true; }; "title": { "alias": "title"; "required": true; "isSignal": true; }; "showClose": { "alias": "showClose"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "dialogRole": { "alias": "dialogRole"; "required": false; "isSignal": true; }; }, { "closed": "closed"; }, never, ["[body]", "[impact]", "[actions]"], true, never>;
|
|
1120
|
+
}
|
|
1121
|
+
|
|
1122
|
+
type ModalConfirmTone = 'default' | 'danger';
|
|
1123
|
+
interface ModalConfirmOptions {
|
|
1124
|
+
title: string;
|
|
1125
|
+
message?: string;
|
|
1126
|
+
confirmLabel?: string;
|
|
1127
|
+
cancelLabel?: string;
|
|
1128
|
+
tone?: ModalConfirmTone;
|
|
1129
|
+
icon?: IconName;
|
|
1130
|
+
/** When set, the confirm button stays disabled until the user types this
|
|
1131
|
+
* exact phrase — a guard for high-stakes destructive actions. */
|
|
1132
|
+
typeToConfirm?: string;
|
|
1133
|
+
}
|
|
1134
|
+
|
|
1135
|
+
declare class ModalService {
|
|
1136
|
+
private readonly overlay;
|
|
1137
|
+
private readonly injector;
|
|
1138
|
+
/** Open a confirmation dialog. Resolves true on confirm, false on cancel,
|
|
1139
|
+
* backdrop click or Escape. */
|
|
1140
|
+
confirm(options: ModalConfirmOptions): Promise<boolean>;
|
|
1141
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<ModalService, never>;
|
|
1142
|
+
static ɵprov: _angular_core.ɵɵInjectableDeclaration<ModalService>;
|
|
967
1143
|
}
|
|
968
1144
|
|
|
969
1145
|
type BannerVariant = 'info' | 'success' | 'warning' | 'severe' | 'error' | 'neutral';
|
|
@@ -987,13 +1163,34 @@ declare class BannerComponent {
|
|
|
987
1163
|
static ɵcmp: _angular_core.ɵɵComponentDeclaration<BannerComponent, "ds-banner", never, { "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "title": { "alias": "title"; "required": false; "isSignal": true; }; "dismissible": { "alias": "dismissible"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "compact": { "alias": "compact"; "required": false; "isSignal": true; }; "layout": { "alias": "layout"; "required": false; "isSignal": true; }; "accentRail": { "alias": "accentRail"; "required": false; "isSignal": true; }; }, { "dismissed": "dismissed"; }, never, ["*", "[actions]"], true, never>;
|
|
988
1164
|
}
|
|
989
1165
|
|
|
990
|
-
type
|
|
1166
|
+
type AlertVariant = 'info' | 'success' | 'warning' | 'error' | 'neutral';
|
|
1167
|
+
|
|
1168
|
+
declare class AlertComponent {
|
|
1169
|
+
readonly variant: _angular_core.InputSignal<AlertVariant>;
|
|
1170
|
+
readonly title: _angular_core.InputSignal<string>;
|
|
1171
|
+
readonly dismissible: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
1172
|
+
readonly icon: _angular_core.InputSignal<IconName | null>;
|
|
1173
|
+
readonly dismissed: _angular_core.OutputEmitterRef<void>;
|
|
1174
|
+
protected get ariaRole(): 'alert' | 'status';
|
|
1175
|
+
protected get ariaLive(): 'assertive' | 'polite';
|
|
1176
|
+
protected readonly classes: _angular_core.Signal<string>;
|
|
1177
|
+
protected readonly defaultIcon: _angular_core.Signal<IconName>;
|
|
1178
|
+
protected readonly resolvedIcon: _angular_core.Signal<IconName>;
|
|
1179
|
+
protected onDismiss(): void;
|
|
1180
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<AlertComponent, never>;
|
|
1181
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<AlertComponent, "ds-alert", never, { "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "title": { "alias": "title"; "required": false; "isSignal": true; }; "dismissible": { "alias": "dismissible"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; }, { "dismissed": "dismissed"; }, never, ["*", "[actions]"], true, never>;
|
|
1182
|
+
}
|
|
1183
|
+
|
|
1184
|
+
type DropzoneFileState = 'queued' | 'uploading' | 'success' | 'error';
|
|
991
1185
|
interface DropzoneFile {
|
|
992
1186
|
id: string;
|
|
993
1187
|
name: string;
|
|
994
1188
|
size: number;
|
|
995
1189
|
state: DropzoneFileState;
|
|
996
1190
|
progress: number;
|
|
1191
|
+
/** Human-readable status shown in place of the bare state name
|
|
1192
|
+
* (e.g. "uploaded", "exceeds 10 MB limit"). */
|
|
1193
|
+
message?: string;
|
|
997
1194
|
}
|
|
998
1195
|
|
|
999
1196
|
declare class DropzoneComponent {
|
|
@@ -1013,6 +1210,7 @@ declare class DropzoneComponent {
|
|
|
1013
1210
|
protected onDrop(event: DragEvent): void;
|
|
1014
1211
|
protected onPickerChange(event: Event): void;
|
|
1015
1212
|
protected onRemove(file: DropzoneFile): void;
|
|
1213
|
+
protected fileMeta(file: DropzoneFile): string;
|
|
1016
1214
|
protected formatSize(bytes: number): string;
|
|
1017
1215
|
protected fileIcon(state: DropzoneFile['state']): 'file' | 'check' | 'error';
|
|
1018
1216
|
static ɵfac: _angular_core.ɵɵFactoryDeclaration<DropzoneComponent, never>;
|
|
@@ -1236,7 +1434,7 @@ declare class ToastComponent {
|
|
|
1236
1434
|
protected onAction(action: ToastAction): void;
|
|
1237
1435
|
protected readonly classes: _angular_core.Signal<string>;
|
|
1238
1436
|
/** Errors/warnings interrupt (assertive); info/success wait their turn. */
|
|
1239
|
-
protected readonly role: _angular_core.Signal<"
|
|
1437
|
+
protected readonly role: _angular_core.Signal<"status" | "alert">;
|
|
1240
1438
|
protected readonly defaultIcon: _angular_core.Signal<IconName>;
|
|
1241
1439
|
protected onDismiss(): void;
|
|
1242
1440
|
static ɵfac: _angular_core.ɵɵFactoryDeclaration<ToastComponent, never>;
|
|
@@ -1255,9 +1453,15 @@ declare class DrawerComponent {
|
|
|
1255
1453
|
readonly title: _angular_core.InputSignal<string>;
|
|
1256
1454
|
readonly closed: _angular_core.OutputEmitterRef<void>;
|
|
1257
1455
|
protected readonly titleId: string;
|
|
1456
|
+
/** Panel is in the DOM (kept true through the slide-out). */
|
|
1457
|
+
protected readonly rendered: _angular_core.WritableSignal<boolean>;
|
|
1458
|
+
/** Playing the slide-out + scrim-fade leave animation. */
|
|
1459
|
+
protected readonly closing: _angular_core.WritableSignal<boolean>;
|
|
1460
|
+
private wasOpen;
|
|
1258
1461
|
protected readonly classes: _angular_core.Signal<"drawer lg" | "drawer">;
|
|
1259
1462
|
constructor();
|
|
1260
1463
|
protected onClose(): void;
|
|
1464
|
+
protected onLeaveEnd(event: AnimationEvent): void;
|
|
1261
1465
|
protected onEscape(): void;
|
|
1262
1466
|
static ɵfac: _angular_core.ɵɵFactoryDeclaration<DrawerComponent, never>;
|
|
1263
1467
|
static ɵcmp: _angular_core.ɵɵComponentDeclaration<DrawerComponent, "ds-drawer", never, { "open": { "alias": "open"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "title": { "alias": "title"; "required": false; "isSignal": true; }; }, { "open": "openChange"; "closed": "closed"; }, never, ["[drawer-body]", "[drawer-footer]"], true, never>;
|
|
@@ -1276,13 +1480,19 @@ declare class BottomSheetComponent {
|
|
|
1276
1480
|
private readonly doc;
|
|
1277
1481
|
private readonly sheetRef;
|
|
1278
1482
|
protected readonly dragOffset: _angular_core.WritableSignal<number | null>;
|
|
1483
|
+
/** Sheet is in the DOM (kept true through the leave animation). */
|
|
1484
|
+
protected readonly rendered: _angular_core.WritableSignal<boolean>;
|
|
1485
|
+
/** Playing the slide-down + scrim-fade leave animation. */
|
|
1486
|
+
protected readonly closing: _angular_core.WritableSignal<boolean>;
|
|
1279
1487
|
private dragStartY;
|
|
1280
1488
|
private lastMoveY;
|
|
1281
1489
|
private lastMoveTime;
|
|
1282
1490
|
private velocity;
|
|
1283
1491
|
private previousBodyOverflow;
|
|
1492
|
+
private wasOpen;
|
|
1284
1493
|
constructor();
|
|
1285
1494
|
protected close(): void;
|
|
1495
|
+
protected onLeaveEnd(event: AnimationEvent): void;
|
|
1286
1496
|
protected onEscape(): void;
|
|
1287
1497
|
protected stop(event: Event): void;
|
|
1288
1498
|
protected onGrabStart(event: PointerEvent): void;
|
|
@@ -1333,7 +1543,7 @@ interface ComboboxOption<T = unknown> {
|
|
|
1333
1543
|
readonly label: string;
|
|
1334
1544
|
}
|
|
1335
1545
|
|
|
1336
|
-
declare class ComboboxComponent<T = unknown> {
|
|
1546
|
+
declare class ComboboxComponent<T = unknown> extends DsControlValueAccessor<T | readonly T[] | null> {
|
|
1337
1547
|
private readonly overlay;
|
|
1338
1548
|
private readonly vcr;
|
|
1339
1549
|
readonly options: _angular_core.InputSignal<readonly ComboboxOption<T>[]>;
|
|
@@ -1341,8 +1551,14 @@ declare class ComboboxComponent<T = unknown> {
|
|
|
1341
1551
|
readonly multiple: _angular_core.InputSignal<boolean>;
|
|
1342
1552
|
readonly size: _angular_core.InputSignal<ComboboxSize>;
|
|
1343
1553
|
readonly placeholder: _angular_core.InputSignal<string>;
|
|
1554
|
+
readonly disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
1555
|
+
readonly invalid: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
1556
|
+
readonly hint: _angular_core.InputSignal<string>;
|
|
1344
1557
|
/** Accessible name for the combobox input. */
|
|
1345
1558
|
readonly ariaLabel: _angular_core.InputSignal<string | null>;
|
|
1559
|
+
protected readonly isDisabled: _angular_core.Signal<boolean>;
|
|
1560
|
+
protected readonly hintId: _angular_core.Signal<string | null>;
|
|
1561
|
+
protected readonly messageState: _angular_core.Signal<FieldMessageState>;
|
|
1346
1562
|
protected readonly query: _angular_core.WritableSignal<string>;
|
|
1347
1563
|
protected readonly isOpen: _angular_core.WritableSignal<boolean>;
|
|
1348
1564
|
protected readonly activeIndex: _angular_core.WritableSignal<number>;
|
|
@@ -1369,7 +1585,7 @@ declare class ComboboxComponent<T = unknown> {
|
|
|
1369
1585
|
protected onPick(option: ComboboxOption<T>): void;
|
|
1370
1586
|
protected remove(target: T): void;
|
|
1371
1587
|
static ɵfac: _angular_core.ɵɵFactoryDeclaration<ComboboxComponent<any>, never>;
|
|
1372
|
-
static ɵcmp: _angular_core.ɵɵComponentDeclaration<ComboboxComponent<any>, "ds-combobox", never, { "options": { "alias": "options"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "multiple": { "alias": "multiple"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; }, never, never, true, never>;
|
|
1588
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<ComboboxComponent<any>, "ds-combobox", never, { "options": { "alias": "options"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "multiple": { "alias": "multiple"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "invalid": { "alias": "invalid"; "required": false; "isSignal": true; }; "hint": { "alias": "hint"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; }, never, never, true, never>;
|
|
1373
1589
|
}
|
|
1374
1590
|
|
|
1375
1591
|
type DividerVariant = 'default' | 'strong' | 'vertical' | 'label';
|
|
@@ -1387,6 +1603,373 @@ declare class DividerComponent {
|
|
|
1387
1603
|
static ɵcmp: _angular_core.ɵɵComponentDeclaration<DividerComponent, "ds-divider", never, { "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "spacing": { "alias": "spacing"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
|
|
1388
1604
|
}
|
|
1389
1605
|
|
|
1606
|
+
type DescriptionListOrientation = 'horizontal' | 'stacked';
|
|
1607
|
+
declare class DescriptionListComponent {
|
|
1608
|
+
readonly orientation: _angular_core.InputSignal<DescriptionListOrientation>;
|
|
1609
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<DescriptionListComponent, never>;
|
|
1610
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<DescriptionListComponent, "ds-description-list", never, { "orientation": { "alias": "orientation"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
|
|
1611
|
+
}
|
|
1612
|
+
|
|
1613
|
+
declare class DescriptionItemComponent {
|
|
1614
|
+
private readonly list;
|
|
1615
|
+
readonly term: _angular_core.InputSignal<string>;
|
|
1616
|
+
readonly copyValue: _angular_core.InputSignal<string | null>;
|
|
1617
|
+
protected readonly stacked: _angular_core.Signal<boolean>;
|
|
1618
|
+
protected readonly copied: _angular_core.WritableSignal<boolean>;
|
|
1619
|
+
protected copy(): Promise<void>;
|
|
1620
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<DescriptionItemComponent, never>;
|
|
1621
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<DescriptionItemComponent, "ds-description-item", never, { "term": { "alias": "term"; "required": false; "isSignal": true; }; "copyValue": { "alias": "copyValue"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
|
|
1622
|
+
}
|
|
1623
|
+
|
|
1624
|
+
type LayoutGap = 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
|
|
1625
|
+
type LayoutAlign = 'start' | 'center' | 'end' | 'stretch';
|
|
1626
|
+
type LayoutJustify = 'start' | 'center' | 'end' | 'between';
|
|
1627
|
+
type ContainerSize = 'sm' | 'md' | 'lg' | 'xl' | 'full';
|
|
1628
|
+
|
|
1629
|
+
declare class StackComponent {
|
|
1630
|
+
readonly gap: _angular_core.InputSignal<LayoutGap | null>;
|
|
1631
|
+
readonly align: _angular_core.InputSignal<LayoutAlign | null>;
|
|
1632
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<StackComponent, never>;
|
|
1633
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<StackComponent, "ds-stack", never, { "gap": { "alias": "gap"; "required": false; "isSignal": true; }; "align": { "alias": "align"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
|
|
1634
|
+
}
|
|
1635
|
+
|
|
1636
|
+
declare class InlineComponent {
|
|
1637
|
+
readonly gap: _angular_core.InputSignal<LayoutGap | null>;
|
|
1638
|
+
readonly align: _angular_core.InputSignal<LayoutAlign | null>;
|
|
1639
|
+
readonly justify: _angular_core.InputSignal<LayoutJustify | null>;
|
|
1640
|
+
readonly wrap: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
1641
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<InlineComponent, never>;
|
|
1642
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<InlineComponent, "ds-inline", never, { "gap": { "alias": "gap"; "required": false; "isSignal": true; }; "align": { "alias": "align"; "required": false; "isSignal": true; }; "justify": { "alias": "justify"; "required": false; "isSignal": true; }; "wrap": { "alias": "wrap"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
|
|
1643
|
+
}
|
|
1644
|
+
|
|
1645
|
+
declare class ContainerComponent {
|
|
1646
|
+
readonly size: _angular_core.InputSignal<ContainerSize>;
|
|
1647
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<ContainerComponent, never>;
|
|
1648
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<ContainerComponent, "ds-container", never, { "size": { "alias": "size"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
|
|
1649
|
+
}
|
|
1650
|
+
|
|
1651
|
+
interface SegmentedOption {
|
|
1652
|
+
label: string;
|
|
1653
|
+
value: string;
|
|
1654
|
+
icon?: IconName;
|
|
1655
|
+
disabled?: boolean;
|
|
1656
|
+
}
|
|
1657
|
+
|
|
1658
|
+
declare class SegmentedComponent {
|
|
1659
|
+
readonly options: _angular_core.InputSignal<readonly SegmentedOption[]>;
|
|
1660
|
+
readonly value: _angular_core.ModelSignal<string>;
|
|
1661
|
+
readonly ariaLabel: _angular_core.InputSignal<string | null>;
|
|
1662
|
+
private readonly buttons;
|
|
1663
|
+
protected readonly focusableValue: _angular_core.Signal<string | null>;
|
|
1664
|
+
protected select(option: SegmentedOption): void;
|
|
1665
|
+
protected onKeydown(event: KeyboardEvent, index: number): void;
|
|
1666
|
+
private nextEnabled;
|
|
1667
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<SegmentedComponent, never>;
|
|
1668
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<SegmentedComponent, "ds-segmented", never, { "options": { "alias": "options"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; }, never, never, true, never>;
|
|
1669
|
+
}
|
|
1670
|
+
|
|
1671
|
+
declare class ButtonGroupComponent {
|
|
1672
|
+
readonly ariaLabel: _angular_core.InputSignal<string | null>;
|
|
1673
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<ButtonGroupComponent, never>;
|
|
1674
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<ButtonGroupComponent, "ds-button-group", never, { "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
|
|
1675
|
+
}
|
|
1676
|
+
|
|
1677
|
+
declare class ListComponent {
|
|
1678
|
+
readonly dividers: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
1679
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<ListComponent, never>;
|
|
1680
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<ListComponent, "ds-list", never, { "dividers": { "alias": "dividers"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
|
|
1681
|
+
}
|
|
1682
|
+
|
|
1683
|
+
declare class ListItemComponent {
|
|
1684
|
+
readonly title: _angular_core.InputSignal<string>;
|
|
1685
|
+
readonly subtitle: _angular_core.InputSignal<string>;
|
|
1686
|
+
readonly clickable: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
1687
|
+
readonly selected: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
1688
|
+
readonly disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
1689
|
+
readonly activated: _angular_core.OutputEmitterRef<void>;
|
|
1690
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<ListItemComponent, never>;
|
|
1691
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<ListItemComponent, "ds-list-item", never, { "title": { "alias": "title"; "required": false; "isSignal": true; }; "subtitle": { "alias": "subtitle"; "required": false; "isSignal": true; }; "clickable": { "alias": "clickable"; "required": false; "isSignal": true; }; "selected": { "alias": "selected"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; }, { "activated": "activated"; }, never, ["[leading]", "*", "[trailing]"], true, never>;
|
|
1692
|
+
}
|
|
1693
|
+
|
|
1694
|
+
type SplitButtonVariant = 'primary' | 'outline';
|
|
1695
|
+
interface SplitButtonItem {
|
|
1696
|
+
label: string;
|
|
1697
|
+
value?: string;
|
|
1698
|
+
icon?: IconName;
|
|
1699
|
+
disabled?: boolean;
|
|
1700
|
+
danger?: boolean;
|
|
1701
|
+
}
|
|
1702
|
+
|
|
1703
|
+
declare class SplitButtonComponent {
|
|
1704
|
+
readonly label: _angular_core.InputSignal<string>;
|
|
1705
|
+
readonly variant: _angular_core.InputSignal<SplitButtonVariant>;
|
|
1706
|
+
readonly icon: _angular_core.InputSignal<IconName | null>;
|
|
1707
|
+
readonly disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
1708
|
+
readonly menuItems: _angular_core.InputSignal<readonly SplitButtonItem[]>;
|
|
1709
|
+
/** Accessible name for the dropdown trigger. */
|
|
1710
|
+
readonly menuLabel: _angular_core.InputSignal<string>;
|
|
1711
|
+
readonly pressed: _angular_core.OutputEmitterRef<MouseEvent>;
|
|
1712
|
+
readonly itemSelect: _angular_core.OutputEmitterRef<SplitButtonItem>;
|
|
1713
|
+
protected onItemSelect(item: SplitButtonItem): void;
|
|
1714
|
+
protected onTriggerKeydown(event: KeyboardEvent, popover: PopoverComponent, trigger: HTMLElement): void;
|
|
1715
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<SplitButtonComponent, never>;
|
|
1716
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<SplitButtonComponent, "ds-split-button", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "menuItems": { "alias": "menuItems"; "required": false; "isSignal": true; }; "menuLabel": { "alias": "menuLabel"; "required": false; "isSignal": true; }; }, { "pressed": "pressed"; "itemSelect": "itemSelect"; }, never, ["*"], true, never>;
|
|
1717
|
+
}
|
|
1718
|
+
|
|
1719
|
+
declare class TimelineComponent {
|
|
1720
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<TimelineComponent, never>;
|
|
1721
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<TimelineComponent, "ds-timeline", never, {}, {}, never, ["*"], true, never>;
|
|
1722
|
+
}
|
|
1723
|
+
|
|
1724
|
+
type TimelineTone = 'default' | 'primary' | 'success' | 'warning' | 'error' | 'muted';
|
|
1725
|
+
declare class TimelineItemComponent {
|
|
1726
|
+
readonly heading: _angular_core.InputSignal<string>;
|
|
1727
|
+
readonly time: _angular_core.InputSignal<string>;
|
|
1728
|
+
readonly icon: _angular_core.InputSignal<IconName | null>;
|
|
1729
|
+
readonly tone: _angular_core.InputSignal<TimelineTone>;
|
|
1730
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<TimelineItemComponent, never>;
|
|
1731
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<TimelineItemComponent, "ds-timeline-item", never, { "heading": { "alias": "heading"; "required": false; "isSignal": true; }; "time": { "alias": "time"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "tone": { "alias": "tone"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
|
|
1732
|
+
}
|
|
1733
|
+
|
|
1734
|
+
type OtpMode = 'numeric' | 'alphanumeric';
|
|
1735
|
+
declare class OtpInputComponent extends DsControlValueAccessor<string> {
|
|
1736
|
+
readonly value: _angular_core.ModelSignal<string>;
|
|
1737
|
+
readonly length: _angular_core.InputSignal<number>;
|
|
1738
|
+
readonly mode: _angular_core.InputSignal<OtpMode>;
|
|
1739
|
+
readonly mask: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
1740
|
+
readonly disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
1741
|
+
readonly invalid: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
1742
|
+
readonly hint: _angular_core.InputSignal<string>;
|
|
1743
|
+
readonly ariaLabel: _angular_core.InputSignal<string>;
|
|
1744
|
+
readonly completed: _angular_core.OutputEmitterRef<string>;
|
|
1745
|
+
private readonly boxes;
|
|
1746
|
+
private wasComplete;
|
|
1747
|
+
protected readonly uid: string;
|
|
1748
|
+
protected readonly hintId: _angular_core.Signal<string | null>;
|
|
1749
|
+
protected readonly messageState: _angular_core.Signal<FieldMessageState>;
|
|
1750
|
+
protected readonly isDisabled: _angular_core.Signal<boolean>;
|
|
1751
|
+
protected readonly cells: _angular_core.Signal<string[]>;
|
|
1752
|
+
protected onInput(event: Event, index: number): void;
|
|
1753
|
+
protected onKeydown(event: KeyboardEvent, index: number): void;
|
|
1754
|
+
protected onPaste(event: ClipboardEvent, index: number): void;
|
|
1755
|
+
protected onFocus(event: FocusEvent, index: number): void;
|
|
1756
|
+
protected cellLabel(index: number): string;
|
|
1757
|
+
protected onBlur(): void;
|
|
1758
|
+
private writeCell;
|
|
1759
|
+
private distribute;
|
|
1760
|
+
private commit;
|
|
1761
|
+
private firstEmptyIndex;
|
|
1762
|
+
private focusBox;
|
|
1763
|
+
private sanitize;
|
|
1764
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<OtpInputComponent, never>;
|
|
1765
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<OtpInputComponent, "ds-otp-input", never, { "value": { "alias": "value"; "required": false; "isSignal": true; }; "length": { "alias": "length"; "required": false; "isSignal": true; }; "mode": { "alias": "mode"; "required": false; "isSignal": true; }; "mask": { "alias": "mask"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "invalid": { "alias": "invalid"; "required": false; "isSignal": true; }; "hint": { "alias": "hint"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "completed": "completed"; }, never, never, true, never>;
|
|
1766
|
+
}
|
|
1767
|
+
|
|
1768
|
+
type SliderValue = number | readonly [number, number];
|
|
1769
|
+
declare class SliderComponent extends DsControlValueAccessor<SliderValue> {
|
|
1770
|
+
readonly value: _angular_core.ModelSignal<SliderValue>;
|
|
1771
|
+
readonly min: _angular_core.InputSignalWithTransform<number, unknown>;
|
|
1772
|
+
readonly max: _angular_core.InputSignalWithTransform<number, unknown>;
|
|
1773
|
+
readonly step: _angular_core.InputSignalWithTransform<number, unknown>;
|
|
1774
|
+
readonly range: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
1775
|
+
readonly disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
1776
|
+
readonly ariaLabel: _angular_core.InputSignal<string | null>;
|
|
1777
|
+
readonly invalid: _angular_core.InputSignal<boolean>;
|
|
1778
|
+
readonly hint: _angular_core.InputSignal<string>;
|
|
1779
|
+
private readonly track;
|
|
1780
|
+
private dragging;
|
|
1781
|
+
protected readonly uid: string;
|
|
1782
|
+
protected readonly hintId: _angular_core.Signal<string | null>;
|
|
1783
|
+
protected readonly messageState: _angular_core.Signal<FieldMessageState>;
|
|
1784
|
+
protected readonly isDisabled: _angular_core.Signal<boolean>;
|
|
1785
|
+
protected readonly thumbValues: _angular_core.Signal<number[]>;
|
|
1786
|
+
protected readonly fill: _angular_core.Signal<{
|
|
1787
|
+
left: number;
|
|
1788
|
+
width: number;
|
|
1789
|
+
}>;
|
|
1790
|
+
protected percent(value: number): number;
|
|
1791
|
+
protected thumbMin(index: number): number;
|
|
1792
|
+
protected thumbMax(index: number): number;
|
|
1793
|
+
protected onTrackPointerDown(event: PointerEvent): void;
|
|
1794
|
+
protected onTrackPointerMove(event: PointerEvent): void;
|
|
1795
|
+
protected onTrackPointerUp(event: PointerEvent): void;
|
|
1796
|
+
protected thumbAriaLabel(index: number): string | null;
|
|
1797
|
+
protected onThumbKeydown(event: KeyboardEvent, index: number): void;
|
|
1798
|
+
private nearestThumb;
|
|
1799
|
+
private updateFromClientX;
|
|
1800
|
+
private valueFromClientX;
|
|
1801
|
+
private setThumb;
|
|
1802
|
+
private snap;
|
|
1803
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<SliderComponent, never>;
|
|
1804
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<SliderComponent, "ds-slider", never, { "value": { "alias": "value"; "required": false; "isSignal": true; }; "min": { "alias": "min"; "required": false; "isSignal": true; }; "max": { "alias": "max"; "required": false; "isSignal": true; }; "step": { "alias": "step"; "required": false; "isSignal": true; }; "range": { "alias": "range"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "invalid": { "alias": "invalid"; "required": false; "isSignal": true; }; "hint": { "alias": "hint"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; }, never, never, true, never>;
|
|
1805
|
+
}
|
|
1806
|
+
|
|
1807
|
+
type SpinnerSize = 'sm' | 'md' | 'lg';
|
|
1808
|
+
|
|
1809
|
+
declare class LoadingOverlayComponent {
|
|
1810
|
+
readonly loading: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
1811
|
+
readonly label: _angular_core.InputSignal<string>;
|
|
1812
|
+
readonly blur: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
1813
|
+
readonly spinnerSize: _angular_core.InputSignal<SpinnerSize>;
|
|
1814
|
+
readonly insetTop: _angular_core.InputSignal<string>;
|
|
1815
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<LoadingOverlayComponent, never>;
|
|
1816
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<LoadingOverlayComponent, "ds-loading-overlay", never, { "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "blur": { "alias": "blur"; "required": false; "isSignal": true; }; "spinnerSize": { "alias": "spinnerSize"; "required": false; "isSignal": true; }; "insetTop": { "alias": "insetTop"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
|
|
1817
|
+
}
|
|
1818
|
+
|
|
1819
|
+
interface TreeNode {
|
|
1820
|
+
id: string;
|
|
1821
|
+
label: string;
|
|
1822
|
+
icon?: IconName;
|
|
1823
|
+
children?: TreeNode[];
|
|
1824
|
+
disabled?: boolean;
|
|
1825
|
+
}
|
|
1826
|
+
|
|
1827
|
+
interface VisibleNode {
|
|
1828
|
+
node: TreeNode;
|
|
1829
|
+
level: number;
|
|
1830
|
+
hasChildren: boolean;
|
|
1831
|
+
expanded: boolean;
|
|
1832
|
+
}
|
|
1833
|
+
declare class TreeComponent {
|
|
1834
|
+
private readonly host;
|
|
1835
|
+
readonly nodes: _angular_core.InputSignal<readonly TreeNode[]>;
|
|
1836
|
+
readonly expandedIds: _angular_core.ModelSignal<Set<string>>;
|
|
1837
|
+
readonly selectedId: _angular_core.ModelSignal<string | null>;
|
|
1838
|
+
readonly nodeSelect: _angular_core.OutputEmitterRef<TreeNode>;
|
|
1839
|
+
private readonly activeId;
|
|
1840
|
+
protected readonly visibleNodes: _angular_core.Signal<VisibleNode[]>;
|
|
1841
|
+
protected readonly effectiveActiveId: _angular_core.Signal<string>;
|
|
1842
|
+
protected isExpanded(id: string): boolean;
|
|
1843
|
+
protected isSelected(id: string): boolean;
|
|
1844
|
+
protected isActive(id: string): boolean;
|
|
1845
|
+
protected onRowClick(entry: VisibleNode): void;
|
|
1846
|
+
protected onKeydown(event: KeyboardEvent): void;
|
|
1847
|
+
private toggle;
|
|
1848
|
+
private select;
|
|
1849
|
+
private moveActive;
|
|
1850
|
+
private moveToParent;
|
|
1851
|
+
private focusNode;
|
|
1852
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<TreeComponent, never>;
|
|
1853
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<TreeComponent, "ds-tree", never, { "nodes": { "alias": "nodes"; "required": false; "isSignal": true; }; "expandedIds": { "alias": "expandedIds"; "required": false; "isSignal": true; }; "selectedId": { "alias": "selectedId"; "required": false; "isSignal": true; }; }, { "expandedIds": "expandedIdsChange"; "selectedId": "selectedIdChange"; "nodeSelect": "nodeSelect"; }, never, never, true, never>;
|
|
1854
|
+
}
|
|
1855
|
+
|
|
1856
|
+
/** Hue 0–360, saturation/value 0–100 — the model the Photoshop-style picker
|
|
1857
|
+
* manipulates. Hex is the public value; these convert between the two. */
|
|
1858
|
+
interface Hsv {
|
|
1859
|
+
h: number;
|
|
1860
|
+
s: number;
|
|
1861
|
+
v: number;
|
|
1862
|
+
}
|
|
1863
|
+
|
|
1864
|
+
declare class ColorPickerComponent extends DsControlValueAccessor<string> implements DsOverlayCloseRef {
|
|
1865
|
+
private readonly overlay;
|
|
1866
|
+
private readonly vcr;
|
|
1867
|
+
private readonly host;
|
|
1868
|
+
readonly value: _angular_core.ModelSignal<string>;
|
|
1869
|
+
readonly presets: _angular_core.InputSignal<readonly string[]>;
|
|
1870
|
+
readonly disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
1871
|
+
readonly ariaLabel: _angular_core.InputSignal<string>;
|
|
1872
|
+
readonly invalid: _angular_core.InputSignal<boolean>;
|
|
1873
|
+
readonly hint: _angular_core.InputSignal<string>;
|
|
1874
|
+
protected readonly trigger: _angular_core.Signal<ElementRef<HTMLButtonElement>>;
|
|
1875
|
+
protected readonly panelTpl: _angular_core.Signal<TemplateRef<unknown>>;
|
|
1876
|
+
protected readonly open: _angular_core.WritableSignal<boolean>;
|
|
1877
|
+
protected readonly hsv: _angular_core.WritableSignal<Hsv>;
|
|
1878
|
+
private overlayRef;
|
|
1879
|
+
private svDragging;
|
|
1880
|
+
private hueDragging;
|
|
1881
|
+
constructor();
|
|
1882
|
+
protected readonly uid: string;
|
|
1883
|
+
protected readonly hintId: _angular_core.Signal<string | null>;
|
|
1884
|
+
protected readonly messageState: _angular_core.Signal<FieldMessageState>;
|
|
1885
|
+
protected readonly isDisabled: _angular_core.Signal<boolean>;
|
|
1886
|
+
protected readonly displayHex: _angular_core.Signal<string>;
|
|
1887
|
+
protected readonly hueColor: _angular_core.Signal<string>;
|
|
1888
|
+
protected readonly svThumb: _angular_core.Signal<{
|
|
1889
|
+
left: number;
|
|
1890
|
+
top: number;
|
|
1891
|
+
}>;
|
|
1892
|
+
protected readonly huePercent: _angular_core.Signal<number>;
|
|
1893
|
+
protected toggle(): void;
|
|
1894
|
+
protected selectPreset(hex: string): void;
|
|
1895
|
+
protected isSelected(hex: string): boolean;
|
|
1896
|
+
protected onHexInput(event: Event): void;
|
|
1897
|
+
protected onSvPointerDown(event: PointerEvent): void;
|
|
1898
|
+
protected onSvPointerMove(event: PointerEvent): void;
|
|
1899
|
+
protected onSvPointerUp(event: PointerEvent): void;
|
|
1900
|
+
protected onSvKeydown(event: KeyboardEvent): void;
|
|
1901
|
+
protected onHuePointerDown(event: PointerEvent): void;
|
|
1902
|
+
protected onHuePointerMove(event: PointerEvent): void;
|
|
1903
|
+
protected onHuePointerUp(event: PointerEvent): void;
|
|
1904
|
+
protected onHueKeydown(event: KeyboardEvent): void;
|
|
1905
|
+
private openPanel;
|
|
1906
|
+
close(): void;
|
|
1907
|
+
private setHsv;
|
|
1908
|
+
private commitHex;
|
|
1909
|
+
private updateSv;
|
|
1910
|
+
private updateHue;
|
|
1911
|
+
private clampPct;
|
|
1912
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<ColorPickerComponent, never>;
|
|
1913
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<ColorPickerComponent, "ds-color-picker", never, { "value": { "alias": "value"; "required": false; "isSignal": true; }; "presets": { "alias": "presets"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "invalid": { "alias": "invalid"; "required": false; "isSignal": true; }; "hint": { "alias": "hint"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; }, never, never, true, never>;
|
|
1914
|
+
}
|
|
1915
|
+
|
|
1916
|
+
interface MultiSelectOption {
|
|
1917
|
+
label: string;
|
|
1918
|
+
value: string;
|
|
1919
|
+
disabled?: boolean;
|
|
1920
|
+
}
|
|
1921
|
+
|
|
1922
|
+
declare class MultiSelectComponent extends DsControlValueAccessor<string[]> {
|
|
1923
|
+
private readonly overlay;
|
|
1924
|
+
private readonly vcr;
|
|
1925
|
+
readonly value: _angular_core.ModelSignal<string[]>;
|
|
1926
|
+
readonly options: _angular_core.InputSignal<readonly MultiSelectOption[]>;
|
|
1927
|
+
readonly placeholder: _angular_core.InputSignal<string>;
|
|
1928
|
+
readonly searchPlaceholder: _angular_core.InputSignal<string>;
|
|
1929
|
+
readonly maxVisibleChips: _angular_core.InputSignalWithTransform<number | null, number | null>;
|
|
1930
|
+
readonly disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
1931
|
+
readonly invalid: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
1932
|
+
readonly hint: _angular_core.InputSignal<string>;
|
|
1933
|
+
readonly ariaLabel: _angular_core.InputSignal<string | null>;
|
|
1934
|
+
readonly selectAll: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
1935
|
+
protected readonly uid: string;
|
|
1936
|
+
protected readonly listboxId: string;
|
|
1937
|
+
protected optionId(index: number): string;
|
|
1938
|
+
protected readonly trigger: _angular_core.Signal<ElementRef<HTMLElement>>;
|
|
1939
|
+
protected readonly searchInput: _angular_core.Signal<ElementRef<HTMLInputElement> | undefined>;
|
|
1940
|
+
protected readonly panelTpl: _angular_core.Signal<TemplateRef<unknown>>;
|
|
1941
|
+
protected readonly open: _angular_core.WritableSignal<boolean>;
|
|
1942
|
+
protected readonly filter: _angular_core.WritableSignal<string>;
|
|
1943
|
+
protected readonly activeIndex: _angular_core.WritableSignal<number>;
|
|
1944
|
+
private overlayRef;
|
|
1945
|
+
private focusTimer;
|
|
1946
|
+
constructor();
|
|
1947
|
+
protected readonly isDisabled: _angular_core.Signal<boolean>;
|
|
1948
|
+
protected readonly selectedOptions: _angular_core.Signal<MultiSelectOption[]>;
|
|
1949
|
+
protected readonly visibleChips: _angular_core.Signal<MultiSelectOption[]>;
|
|
1950
|
+
protected readonly overflowCount: _angular_core.Signal<number>;
|
|
1951
|
+
protected readonly filteredOptions: _angular_core.Signal<MultiSelectOption[]>;
|
|
1952
|
+
protected readonly activeDescendant: _angular_core.Signal<string | null>;
|
|
1953
|
+
protected readonly resolvedAriaLabel: _angular_core.Signal<string>;
|
|
1954
|
+
protected readonly hintId: _angular_core.Signal<string | null>;
|
|
1955
|
+
protected readonly messageState: _angular_core.Signal<FieldMessageState>;
|
|
1956
|
+
private enabledFiltered;
|
|
1957
|
+
protected readonly allFilteredSelected: _angular_core.Signal<boolean>;
|
|
1958
|
+
protected readonly someFilteredSelected: _angular_core.Signal<boolean>;
|
|
1959
|
+
protected toggleSelectAll(): void;
|
|
1960
|
+
protected isSelected(value: string): boolean;
|
|
1961
|
+
protected toggleValue(option: MultiSelectOption): void;
|
|
1962
|
+
protected removeValue(value: string): void;
|
|
1963
|
+
protected onFilter(event: Event): void;
|
|
1964
|
+
protected onTriggerKeydown(event: KeyboardEvent): void;
|
|
1965
|
+
protected onSearchKeydown(event: KeyboardEvent): void;
|
|
1966
|
+
protected openPanel(): void;
|
|
1967
|
+
protected close(): void;
|
|
1968
|
+
private moveActive;
|
|
1969
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<MultiSelectComponent, never>;
|
|
1970
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<MultiSelectComponent, "ds-multi-select", never, { "value": { "alias": "value"; "required": false; "isSignal": true; }; "options": { "alias": "options"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "searchPlaceholder": { "alias": "searchPlaceholder"; "required": false; "isSignal": true; }; "maxVisibleChips": { "alias": "maxVisibleChips"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "invalid": { "alias": "invalid"; "required": false; "isSignal": true; }; "hint": { "alias": "hint"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "selectAll": { "alias": "selectAll"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; }, never, never, true, never>;
|
|
1971
|
+
}
|
|
1972
|
+
|
|
1390
1973
|
declare class SkeletonComponent {
|
|
1391
1974
|
readonly width: _angular_core.InputSignal<string | undefined>;
|
|
1392
1975
|
readonly height: _angular_core.InputSignal<string | undefined>;
|
|
@@ -1396,47 +1979,122 @@ declare class SkeletonComponent {
|
|
|
1396
1979
|
static ɵcmp: _angular_core.ɵɵComponentDeclaration<SkeletonComponent, "ds-skeleton", never, { "width": { "alias": "width"; "required": false; "isSignal": true; }; "height": { "alias": "height"; "required": false; "isSignal": true; }; "circle": { "alias": "circle"; "required": false; "isSignal": true; }; "inline": { "alias": "inline"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
|
|
1397
1980
|
}
|
|
1398
1981
|
|
|
1399
|
-
type SpinnerSize = 'sm' | 'md' | 'lg';
|
|
1400
|
-
|
|
1401
1982
|
declare class SpinnerComponent {
|
|
1402
1983
|
readonly size: _angular_core.InputSignal<SpinnerSize>;
|
|
1403
1984
|
static ɵfac: _angular_core.ɵɵFactoryDeclaration<SpinnerComponent, never>;
|
|
1404
1985
|
static ɵcmp: _angular_core.ɵɵComponentDeclaration<SpinnerComponent, "ds-spinner", never, { "size": { "alias": "size"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
|
|
1405
1986
|
}
|
|
1406
1987
|
|
|
1407
|
-
declare class CheckboxComponent {
|
|
1988
|
+
declare class CheckboxComponent extends DsBooleanControlValueAccessor {
|
|
1408
1989
|
readonly checked: _angular_core.ModelSignal<boolean>;
|
|
1409
1990
|
readonly indeterminate: _angular_core.InputSignal<boolean>;
|
|
1410
1991
|
readonly disabled: _angular_core.InputSignal<boolean>;
|
|
1411
1992
|
readonly name: _angular_core.InputSignal<string | null>;
|
|
1412
1993
|
readonly inputId: _angular_core.InputSignal<string | null>;
|
|
1413
|
-
|
|
1994
|
+
readonly invalid: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
1995
|
+
readonly hint: _angular_core.InputSignal<string>;
|
|
1996
|
+
/** Inline label rendered beside the box and wired via for/id. Omit to
|
|
1997
|
+
* bring your own <label>. */
|
|
1998
|
+
readonly label: _angular_core.InputSignal<string>;
|
|
1999
|
+
protected readonly isDisabled: _angular_core.Signal<boolean>;
|
|
2000
|
+
protected readonly uid: string;
|
|
2001
|
+
protected readonly controlId: _angular_core.Signal<string>;
|
|
2002
|
+
protected readonly hintId: _angular_core.Signal<string | null>;
|
|
2003
|
+
protected readonly messageState: _angular_core.Signal<FieldMessageState>;
|
|
2004
|
+
protected onCheckedChange(event: Event): void;
|
|
1414
2005
|
static ɵfac: _angular_core.ɵɵFactoryDeclaration<CheckboxComponent, never>;
|
|
1415
|
-
static ɵcmp: _angular_core.ɵɵComponentDeclaration<CheckboxComponent, "ds-checkbox", never, { "checked": { "alias": "checked"; "required": false; "isSignal": true; }; "indeterminate": { "alias": "indeterminate"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "name": { "alias": "name"; "required": false; "isSignal": true; }; "inputId": { "alias": "inputId"; "required": false; "isSignal": true; }; }, { "checked": "checkedChange"; }, never, never, true, never>;
|
|
2006
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<CheckboxComponent, "ds-checkbox", never, { "checked": { "alias": "checked"; "required": false; "isSignal": true; }; "indeterminate": { "alias": "indeterminate"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "name": { "alias": "name"; "required": false; "isSignal": true; }; "inputId": { "alias": "inputId"; "required": false; "isSignal": true; }; "invalid": { "alias": "invalid"; "required": false; "isSignal": true; }; "hint": { "alias": "hint"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; }, { "checked": "checkedChange"; }, never, never, true, never>;
|
|
1416
2007
|
}
|
|
1417
2008
|
|
|
1418
2009
|
declare class RadioComponent {
|
|
2010
|
+
/** Standalone two-way binding. When inside ds-radio-group, isChecked() is
|
|
2011
|
+
* derived from the group value instead. */
|
|
1419
2012
|
readonly checked: _angular_core.ModelSignal<boolean>;
|
|
1420
2013
|
readonly disabled: _angular_core.InputSignal<boolean>;
|
|
1421
2014
|
readonly name: _angular_core.InputSignal<string>;
|
|
1422
|
-
readonly value: _angular_core.InputSignal<
|
|
2015
|
+
readonly value: _angular_core.InputSignal<unknown>;
|
|
1423
2016
|
readonly inputId: _angular_core.InputSignal<string | null>;
|
|
1424
|
-
|
|
2017
|
+
/** Inline label rendered beside the dot and wired via for/id. Omit to bring
|
|
2018
|
+
* your own <label>. */
|
|
2019
|
+
readonly label: _angular_core.InputSignal<string>;
|
|
2020
|
+
protected readonly uid: string;
|
|
2021
|
+
protected readonly controlId: _angular_core.Signal<string>;
|
|
2022
|
+
/** Injected via token to avoid circular import with RadioGroupComponent. */
|
|
2023
|
+
protected readonly group: _ids_group_ltd_ids_design_system.RadioGroupContract | null;
|
|
2024
|
+
readonly effectiveDisabled: _angular_core.Signal<boolean>;
|
|
2025
|
+
protected readonly effectiveName: _angular_core.Signal<string>;
|
|
2026
|
+
protected readonly isChecked: _angular_core.Signal<boolean>;
|
|
2027
|
+
/** Exposed so the group can implement roving tabindex. */
|
|
2028
|
+
readonly inputElement: _angular_core.Signal<ElementRef<HTMLInputElement> | undefined>;
|
|
2029
|
+
protected get tabIndexAttr(): 0 | -1;
|
|
2030
|
+
/** Called by the group's keyboard handler to focus this radio's input. */
|
|
2031
|
+
focus(): void;
|
|
2032
|
+
protected onSelect(): void;
|
|
1425
2033
|
static ɵfac: _angular_core.ɵɵFactoryDeclaration<RadioComponent, never>;
|
|
1426
|
-
static ɵcmp: _angular_core.ɵɵComponentDeclaration<RadioComponent, "ds-radio", never, { "checked": { "alias": "checked"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "name": { "alias": "name"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "inputId": { "alias": "inputId"; "required": false; "isSignal": true; }; }, { "checked": "checkedChange"; }, never, never, true, never>;
|
|
2034
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<RadioComponent, "ds-radio", never, { "checked": { "alias": "checked"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "name": { "alias": "name"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "inputId": { "alias": "inputId"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; }, { "checked": "checkedChange"; }, never, never, true, never>;
|
|
2035
|
+
}
|
|
2036
|
+
|
|
2037
|
+
/** Contract that ds-radio reads from its parent ds-radio-group, injected via
|
|
2038
|
+
* token to avoid a circular import (radio-group → RadioComponent for
|
|
2039
|
+
* contentChildren; radio → RadioGroupComponent for group injection). */
|
|
2040
|
+
interface RadioGroupContract {
|
|
2041
|
+
readonly value: () => unknown;
|
|
2042
|
+
readonly groupName: () => string;
|
|
2043
|
+
readonly isDisabled: () => boolean;
|
|
2044
|
+
isTabbable(radio: RadioGroupChild): boolean;
|
|
2045
|
+
select(value: unknown): void;
|
|
2046
|
+
}
|
|
2047
|
+
/** Contract the radio-group reads back from each projected radio. */
|
|
2048
|
+
interface RadioGroupChild {
|
|
2049
|
+
readonly value: () => unknown;
|
|
2050
|
+
readonly effectiveDisabled: () => boolean;
|
|
2051
|
+
focus(): void;
|
|
1427
2052
|
}
|
|
2053
|
+
declare const RADIO_GROUP: InjectionToken<RadioGroupContract>;
|
|
1428
2054
|
|
|
1429
|
-
declare class
|
|
2055
|
+
declare class RadioGroupComponent extends DsControlValueAccessor<unknown> implements RadioGroupContract {
|
|
2056
|
+
readonly value: _angular_core.ModelSignal<unknown>;
|
|
2057
|
+
readonly name: _angular_core.InputSignal<string | null>;
|
|
2058
|
+
readonly disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
2059
|
+
readonly invalid: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
2060
|
+
readonly hint: _angular_core.InputSignal<string>;
|
|
2061
|
+
readonly ariaLabel: _angular_core.InputSignal<string | null>;
|
|
2062
|
+
readonly label: _angular_core.InputSignal<string>;
|
|
2063
|
+
readonly isDisabled: _angular_core.Signal<boolean>;
|
|
2064
|
+
protected readonly uid: string;
|
|
2065
|
+
readonly groupName: _angular_core.Signal<string>;
|
|
2066
|
+
protected readonly hintId: _angular_core.Signal<string | null>;
|
|
2067
|
+
protected readonly messageState: _angular_core.Signal<FieldMessageState>;
|
|
2068
|
+
private readonly radios;
|
|
2069
|
+
private get enabledRadios();
|
|
2070
|
+
isTabbable(radio: RadioGroupChild): boolean;
|
|
2071
|
+
select(value: unknown): void;
|
|
2072
|
+
protected onKeydown(event: KeyboardEvent): void;
|
|
2073
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<RadioGroupComponent, never>;
|
|
2074
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<RadioGroupComponent, "ds-radio-group", never, { "value": { "alias": "value"; "required": false; "isSignal": true; }; "name": { "alias": "name"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "invalid": { "alias": "invalid"; "required": false; "isSignal": true; }; "hint": { "alias": "hint"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; }, ["radios"], ["*"], true, never>;
|
|
2075
|
+
}
|
|
2076
|
+
|
|
2077
|
+
declare class SwitchComponent extends DsBooleanControlValueAccessor {
|
|
1430
2078
|
readonly checked: _angular_core.ModelSignal<boolean>;
|
|
1431
2079
|
readonly disabled: _angular_core.InputSignal<boolean>;
|
|
1432
2080
|
readonly name: _angular_core.InputSignal<string | null>;
|
|
1433
2081
|
readonly variant: _angular_core.InputSignal<"error" | "success" | "default">;
|
|
1434
2082
|
readonly inputId: _angular_core.InputSignal<string | null>;
|
|
2083
|
+
readonly invalid: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
2084
|
+
readonly hint: _angular_core.InputSignal<string>;
|
|
2085
|
+
/** Inline label rendered beside the track and wired via for/id. Omit to
|
|
2086
|
+
* bring your own <label>. */
|
|
2087
|
+
readonly label: _angular_core.InputSignal<string>;
|
|
2088
|
+
protected readonly isDisabled: _angular_core.Signal<boolean>;
|
|
2089
|
+
protected readonly uid: string;
|
|
2090
|
+
protected readonly controlId: _angular_core.Signal<string>;
|
|
2091
|
+
protected readonly hintId: _angular_core.Signal<string | null>;
|
|
2092
|
+
protected readonly messageState: _angular_core.Signal<FieldMessageState>;
|
|
1435
2093
|
protected readonly classes: _angular_core.Signal<string>;
|
|
1436
|
-
protected
|
|
2094
|
+
protected onCheckedChange(event: Event): void;
|
|
1437
2095
|
static ɵfac: _angular_core.ɵɵFactoryDeclaration<SwitchComponent, never>;
|
|
1438
|
-
static ɵcmp: _angular_core.ɵɵComponentDeclaration<SwitchComponent, "ds-switch", never, { "checked": { "alias": "checked"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "name": { "alias": "name"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "inputId": { "alias": "inputId"; "required": false; "isSignal": true; }; }, { "checked": "checkedChange"; }, never, never, true, never>;
|
|
2096
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<SwitchComponent, "ds-switch", never, { "checked": { "alias": "checked"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "name": { "alias": "name"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "inputId": { "alias": "inputId"; "required": false; "isSignal": true; }; "invalid": { "alias": "invalid"; "required": false; "isSignal": true; }; "hint": { "alias": "hint"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; }, { "checked": "checkedChange"; }, never, never, true, never>;
|
|
1439
2097
|
}
|
|
1440
2098
|
|
|
1441
|
-
export { AccordionComponent, AccordionItemComponent, AvatarComponent, AvatarGroupComponent, BadgeComponent, BannerComponent, BottomSheetComponent, BreadcrumbsComponent, BreadcrumbsService, ButtonComponent, CardComponent, CellTemplateDirective, CheckboxComponent, ComboboxComponent, DS_CONFIG, DS_ICON_REGISTRY, DS_TOAST_POSITION, DS_TOAST_POSITION_DEFAULT, DatePickerComponent, DividerComponent, DrawerComponent, DropdownComponent, DropzoneComponent, DsOverlayCloseRef, DsStaticPreview, EmptyStateComponent, ICONS, IconButtonComponent, IconComponent, InputComponent, MenuComponent, MenuItemComponent, ModalCardComponent, ModalComponent, NumberStepperComponent, PageFooterComponent, PageHeaderComponent, PaginationComponent, PopoverComponent, ProgressComponent, RadioComponent, SearchComponent, SelectComponent, SidenavComponent, SidenavGroupComponent, SidenavItemComponent, SkeletonComponent, SpinnerComponent, StatComponent, StatusDotComponent, StepperComponent, SwitchComponent, TabComponent, TableComponent, TabsComponent, TagComponent, TextareaComponent, ToastComponent, ToastRegionComponent, ToastService, TooltipDirective, TooltipPanelComponent, TopBarComponent, W3wComponent, isSelectOptionGroup, provideDsConfig, provideDsIcons };
|
|
1442
|
-
export type { AvatarSize, BadgeLifecycle, BadgeSemantic, BadgeVariant, BannerVariant, BreadcrumbItem, ButtonSize, ButtonType, ButtonVariant, CardElevation, CardPadding, ComboboxOption, ComboboxSize, DatePickerMode, DatePickerValue, DateValue, DividerVariant, DrawerSize, DropdownOption, DropdownSize, DropzoneFile, DropzoneFileState, DsConfig, DsIconRegistry, DsToastHorizontalPosition, DsToastPosition, DsToastVerticalPosition, EmptyStateVariant, IconButtonSize, IconButtonType, IconButtonVariant, IconName, InputSize, InputType, ModalSize, NumberStepperSize, PageFooterVariant, ProgressVariant, RangeValue, SelectItem, SelectOption, SelectOptionGroup, SelectSize, SidenavItemModel, SortChangeEvent, SortDir, SpinnerSize, StatusValue, StepperLabelPosition, TableColumn, TabsVariant, TagVariant, TextareaResize, TextareaSize, ToastAction, ToastEntry, ToastOptions, ToastRef, ToastVariant, TooltipPlacement };
|
|
2099
|
+
export { AccordionComponent, AccordionItemComponent, AlertComponent, AvatarComponent, AvatarGroupComponent, BadgeComponent, BannerComponent, BottomSheetComponent, BreadcrumbsComponent, BreadcrumbsService, ButtonComponent, ButtonGroupComponent, CardComponent, CellTemplateDirective, CheckboxComponent, ColorPickerComponent, ComboboxComponent, ContainerComponent, DS_CONFIG, DS_ICON_REGISTRY, DS_TOAST_POSITION, DS_TOAST_POSITION_DEFAULT, DatePickerComponent, DescriptionItemComponent, DescriptionListComponent, DividerComponent, DrawerComponent, DropdownComponent, DropzoneComponent, DsOverlayCloseRef, DsStaticPreview, EmptyStateComponent, ICONS, IconButtonComponent, IconComponent, InlineComponent, InputComponent, ListComponent, ListItemComponent, LoadingOverlayComponent, MenuComponent, MenuItemComponent, ModalCardComponent, ModalComponent, ModalService, MultiSelectComponent, NumberStepperComponent, OtpInputComponent, PageFooterComponent, PageHeaderComponent, PaginationComponent, PopoverComponent, ProgressComponent, RADIO_GROUP, RadioComponent, RadioGroupComponent, SearchComponent, SegmentedComponent, SelectComponent, SidenavComponent, SidenavGroupComponent, SidenavItemComponent, SkeletonComponent, SliderComponent, SpinnerComponent, SplitButtonComponent, StackComponent, StatComponent, StatusDotComponent, StepperComponent, SwitchComponent, TabComponent, TableComponent, TabsComponent, TagComponent, TextareaComponent, TimelineComponent, TimelineItemComponent, ToastComponent, ToastRegionComponent, ToastService, ToggleButtonComponent, TooltipDirective, TooltipPanelComponent, TopBarComponent, TreeComponent, W3wComponent, isSelectOptionGroup, provideDsConfig, provideDsIcons, provideDsTheme };
|
|
2100
|
+
export type { AlertVariant, AvatarSize, BadgeLifecycle, BadgeSemantic, BadgeVariant, BannerVariant, BreadcrumbItem, ButtonColor, ButtonSize, ButtonType, ButtonVariant, CardElevation, CardPadding, ComboboxOption, ComboboxSize, ContainerSize, DatePickerMode, DatePickerValue, DateValue, DescriptionListOrientation, DividerVariant, DrawerSize, DropdownOption, DropdownSize, DropzoneFile, DropzoneFileState, DsConfig, DsIconRegistry, DsThemeOptions, DsToastHorizontalPosition, DsToastPosition, DsToastVerticalPosition, EmptyStateVariant, IconButtonSize, IconButtonType, IconButtonVariant, IconName, InputSize, InputType, LayoutAlign, LayoutGap, LayoutJustify, ModalConfirmOptions, ModalConfirmTone, ModalSize, MultiSelectOption, NumberStepperSize, OtpMode, PageFooterVariant, ProgressVariant, RadioGroupChild, RadioGroupContract, RangeValue, SegmentedOption, SelectItem, SelectOption, SelectOptionGroup, SelectSize, SidenavItemModel, SortChangeEvent, SortDir, SpinnerSize, SplitButtonItem, SplitButtonVariant, StatusValue, StepperLabelPosition, TableColumn, TabsVariant, TagVariant, TextareaResize, TextareaSize, TimelineTone, ToastAction, ToastEntry, ToastOptions, ToastRef, ToastVariant, TooltipPlacement, TreeNode };
|