@resolve-components/theme 1.0.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 +7 -0
- package/collection.json +10 -0
- package/fesm2022/resolve-components-theme.mjs +8946 -0
- package/fesm2022/resolve-components-theme.mjs.map +1 -0
- package/package.json +45 -0
- package/schematics/ng-add/index.js +147 -0
- package/schematics/ng-add/schema.json +15 -0
- package/src/lib/styles/_all.scss +52 -0
- package/src/lib/styles/_globals.scss +66 -0
- package/src/lib/styles/_themes.scss +9 -0
- package/src/lib/styles/_theming.scss +20 -0
- package/src/lib/styles/themes/_dark.scss +107 -0
- package/src/lib/styles/themes/_default.scss +341 -0
- package/src/lib/styles/theming/_animation.scss +92 -0
- package/src/lib/styles/theming/_functions.scss +34 -0
- package/src/lib/styles/theming/_get-value.scss +70 -0
- package/src/lib/styles/theming/_install.scss +141 -0
- package/src/lib/styles/theming/_mapping.scss +701 -0
- package/src/lib/styles/theming/_register.scss +58 -0
- package/src/lib/styles/theming/_theming-variables.scss +30 -0
- package/types/resolve-components-theme.d.ts +3214 -0
|
@@ -0,0 +1,3214 @@
|
|
|
1
|
+
import * as i0 from '@angular/core';
|
|
2
|
+
import { InjectionToken, OnDestroy, Renderer2, ModuleWithProviders, EventEmitter, OnChanges, TemplateRef, Injector, Type, ComponentRef, OnInit, ElementRef, AfterContentInit, SimpleChanges, QueryList, AfterViewInit } from '@angular/core';
|
|
3
|
+
import { Observable } from 'rxjs';
|
|
4
|
+
import * as i1 from '@angular/common';
|
|
5
|
+
import { SafeHtml, DomSanitizer } from '@angular/platform-browser';
|
|
6
|
+
import { Overlay, OverlayRef } from '@angular/cdk/overlay';
|
|
7
|
+
import * as _resolve_components_theme from '@resolve-components/theme';
|
|
8
|
+
import { ComponentPortal } from '@angular/cdk/portal';
|
|
9
|
+
import { CdkTable, CdkColumnDef, CdkHeaderCellDef, CdkCellDef, CdkFooterCellDef, CdkHeaderRowDef, CdkRowDef, CdkFooterRowDef, CdkHeaderRow, CdkRow, CdkFooterRow, CdkNoDataRow } from '@angular/cdk/table';
|
|
10
|
+
import { DataSource } from '@angular/cdk/collections';
|
|
11
|
+
import { ControlValueAccessor } from '@angular/forms';
|
|
12
|
+
export { CdkVirtualForOf as RcVirtualForOf } from '@angular/cdk/scrolling';
|
|
13
|
+
|
|
14
|
+
/**
|
|
15
|
+
* Configuration options for the Resolve Components theme system.
|
|
16
|
+
*/
|
|
17
|
+
interface RcThemeOptions {
|
|
18
|
+
/** Name of the initial theme (must match a registered theme). */
|
|
19
|
+
name: string;
|
|
20
|
+
}
|
|
21
|
+
/**
|
|
22
|
+
* A single variable entry in a JS theme.
|
|
23
|
+
*/
|
|
24
|
+
interface RcJSThemeVariable {
|
|
25
|
+
[key: string]: string | number | RcJSThemeVariable;
|
|
26
|
+
}
|
|
27
|
+
/**
|
|
28
|
+
* JS-accessible theme definition.
|
|
29
|
+
* These are simplified versions of the full SCSS theme — they provide
|
|
30
|
+
* key variables to JS consumers (charts, dynamic styling, etc.).
|
|
31
|
+
*/
|
|
32
|
+
interface RcJSThemeOptions {
|
|
33
|
+
/** Unique theme name. */
|
|
34
|
+
name: string;
|
|
35
|
+
/** Parent theme name to inherit from. */
|
|
36
|
+
base?: string;
|
|
37
|
+
/** Theme variables accessible from TypeScript. */
|
|
38
|
+
variables?: RcJSThemeVariable;
|
|
39
|
+
}
|
|
40
|
+
/** Injection token for theme configuration options. */
|
|
41
|
+
declare const RC_THEME_OPTIONS: InjectionToken<RcThemeOptions>;
|
|
42
|
+
/** Injection token for built-in JS theme definitions. */
|
|
43
|
+
declare const RC_BUILT_IN_JS_THEMES: InjectionToken<RcJSThemeOptions[]>;
|
|
44
|
+
/** Injection token for user-provided JS theme definitions. */
|
|
45
|
+
declare const RC_JS_THEMES: InjectionToken<RcJSThemeOptions[]>;
|
|
46
|
+
|
|
47
|
+
/**
|
|
48
|
+
* Registry for JS-accessible theme definitions.
|
|
49
|
+
*
|
|
50
|
+
* Merges built-in themes with user-provided themes at initialization.
|
|
51
|
+
* Supports theme inheritance via the `base` property.
|
|
52
|
+
*
|
|
53
|
+
* @example
|
|
54
|
+
* ```typescript
|
|
55
|
+
* const theme = this.registry.get('default');
|
|
56
|
+
* console.log(theme.variables.primary); // '#0078D4'
|
|
57
|
+
* ```
|
|
58
|
+
*/
|
|
59
|
+
declare class RcJSThemesRegistry {
|
|
60
|
+
private themes;
|
|
61
|
+
constructor(builtInThemes: RcJSThemeOptions[], newThemes: RcJSThemeOptions[]);
|
|
62
|
+
/**
|
|
63
|
+
* Register a theme, optionally inheriting from a base theme.
|
|
64
|
+
*/
|
|
65
|
+
register(config: RcJSThemeOptions, themeName: string, baseThemeName?: string): void;
|
|
66
|
+
/**
|
|
67
|
+
* Whether a theme with the given name is registered.
|
|
68
|
+
*/
|
|
69
|
+
has(themeName: string): boolean;
|
|
70
|
+
/**
|
|
71
|
+
* Get a deep copy of a registered theme by name.
|
|
72
|
+
*/
|
|
73
|
+
get(themeName: string): RcJSThemeOptions;
|
|
74
|
+
/**
|
|
75
|
+
* Combine two theme arrays, preferring items from `newThemes` when
|
|
76
|
+
* names collide.
|
|
77
|
+
*/
|
|
78
|
+
private combineByNames;
|
|
79
|
+
/**
|
|
80
|
+
* Deep merge objects (not arrays).
|
|
81
|
+
*/
|
|
82
|
+
private mergeDeep;
|
|
83
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<RcJSThemesRegistry, never>;
|
|
84
|
+
static ɵprov: i0.ɵɵInjectableDeclaration<RcJSThemesRegistry>;
|
|
85
|
+
}
|
|
86
|
+
|
|
87
|
+
/**
|
|
88
|
+
* Event emitted when the theme changes.
|
|
89
|
+
*/
|
|
90
|
+
interface RcThemeChange {
|
|
91
|
+
/** Name of the newly activated theme. */
|
|
92
|
+
name: string;
|
|
93
|
+
/** Name of the previously active theme (null on first activation). */
|
|
94
|
+
previous: string | null;
|
|
95
|
+
}
|
|
96
|
+
/**
|
|
97
|
+
* Central service for managing the active theme at runtime.
|
|
98
|
+
*
|
|
99
|
+
* Switching themes toggles a CSS class on `<body>` (`rc-theme-{name}`),
|
|
100
|
+
* which activates the corresponding CSS custom property block emitted
|
|
101
|
+
* during SCSS compilation.
|
|
102
|
+
*
|
|
103
|
+
* @example
|
|
104
|
+
* ```typescript
|
|
105
|
+
* // Switch to dark theme
|
|
106
|
+
* this.themeService.changeTheme('dark');
|
|
107
|
+
*
|
|
108
|
+
* // React to theme changes
|
|
109
|
+
* this.themeService.onThemeChange().subscribe(change => {
|
|
110
|
+
* console.log(`Switched from ${change.previous} to ${change.name}`);
|
|
111
|
+
* });
|
|
112
|
+
*
|
|
113
|
+
* // Access JS theme variables (for charts, etc.)
|
|
114
|
+
* this.themeService.getJsTheme().subscribe(theme => {
|
|
115
|
+
* const primaryColor = theme.variables?.primary;
|
|
116
|
+
* });
|
|
117
|
+
* ```
|
|
118
|
+
*/
|
|
119
|
+
declare class RcThemeService {
|
|
120
|
+
protected options: RcThemeOptions;
|
|
121
|
+
protected jsThemesRegistry: RcJSThemesRegistry;
|
|
122
|
+
/** Name of the currently active theme. */
|
|
123
|
+
currentTheme: string | null;
|
|
124
|
+
private themeChanges$;
|
|
125
|
+
private destroy$;
|
|
126
|
+
constructor(options: RcThemeOptions, jsThemesRegistry: RcJSThemesRegistry);
|
|
127
|
+
/**
|
|
128
|
+
* Switch the active theme.
|
|
129
|
+
* @param name - Registered theme name.
|
|
130
|
+
*/
|
|
131
|
+
changeTheme(name: string): void;
|
|
132
|
+
/**
|
|
133
|
+
* Observable stream of theme change events.
|
|
134
|
+
*/
|
|
135
|
+
onThemeChange(): Observable<RcThemeChange>;
|
|
136
|
+
/**
|
|
137
|
+
* Get the JS theme variables for the currently active theme.
|
|
138
|
+
* Emits whenever the theme changes.
|
|
139
|
+
*/
|
|
140
|
+
getJsTheme(): Observable<RcJSThemeOptions>;
|
|
141
|
+
/**
|
|
142
|
+
* Get the JS theme variables for a specific theme by name.
|
|
143
|
+
*/
|
|
144
|
+
getJsThemeByName(name: string): RcJSThemeOptions;
|
|
145
|
+
/**
|
|
146
|
+
* Clean up subscriptions.
|
|
147
|
+
*/
|
|
148
|
+
ngOnDestroy(): void;
|
|
149
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<RcThemeService, never>;
|
|
150
|
+
static ɵprov: i0.ɵɵInjectableDeclaration<RcThemeService>;
|
|
151
|
+
}
|
|
152
|
+
|
|
153
|
+
/**
|
|
154
|
+
* Layout component that bridges the theme service to the DOM.
|
|
155
|
+
*
|
|
156
|
+
* It subscribes to `RcThemeService.onThemeChange()` and toggles the
|
|
157
|
+
* CSS class `rc-theme-{name}` on `<body>`. This activates the
|
|
158
|
+
* corresponding CSS custom property block emitted by `rc-install()`.
|
|
159
|
+
*
|
|
160
|
+
* Place this component at the root of your application layout:
|
|
161
|
+
*
|
|
162
|
+
* @example
|
|
163
|
+
* ```html
|
|
164
|
+
* <rc-layout>
|
|
165
|
+
* <router-outlet></router-outlet>
|
|
166
|
+
* </rc-layout>
|
|
167
|
+
* ```
|
|
168
|
+
*/
|
|
169
|
+
declare class RcLayout implements OnDestroy {
|
|
170
|
+
private themeService;
|
|
171
|
+
private renderer;
|
|
172
|
+
private document;
|
|
173
|
+
private destroy$;
|
|
174
|
+
constructor(themeService: RcThemeService, renderer: Renderer2, document: Document);
|
|
175
|
+
ngOnDestroy(): void;
|
|
176
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<RcLayout, never>;
|
|
177
|
+
static ɵcmp: i0.ɵɵComponentDeclaration<RcLayout, "rc-layout", never, {}, {}, never, ["*"], true, never>;
|
|
178
|
+
}
|
|
179
|
+
|
|
180
|
+
/**
|
|
181
|
+
* Core theme module for Resolve Components.
|
|
182
|
+
*
|
|
183
|
+
* Call `.forRoot()` once at the application root to configure theming.
|
|
184
|
+
*
|
|
185
|
+
* @example
|
|
186
|
+
* ```typescript
|
|
187
|
+
* // app.config.ts (standalone)
|
|
188
|
+
* import { provideRcTheme } from '@resolve-components';
|
|
189
|
+
*
|
|
190
|
+
* export const appConfig = {
|
|
191
|
+
* providers: [provideRcTheme({ name: 'default' })],
|
|
192
|
+
* };
|
|
193
|
+
*
|
|
194
|
+
* // or in NgModule style:
|
|
195
|
+
* @NgModule({
|
|
196
|
+
* imports: [RcThemeModule.forRoot({ name: 'default' })],
|
|
197
|
+
* })
|
|
198
|
+
* export class AppModule {}
|
|
199
|
+
* ```
|
|
200
|
+
*/
|
|
201
|
+
declare class RcThemeModule {
|
|
202
|
+
constructor(parentModule: RcThemeModule);
|
|
203
|
+
/**
|
|
204
|
+
* Configure the theme system at the application root.
|
|
205
|
+
*
|
|
206
|
+
* @param rcThemeOptions - Initial theme configuration.
|
|
207
|
+
* @param rcJSThemes - Optional additional JS theme definitions.
|
|
208
|
+
*/
|
|
209
|
+
static forRoot(rcThemeOptions?: RcThemeOptions, rcJSThemes?: RcJSThemeOptions[]): ModuleWithProviders<RcThemeModule>;
|
|
210
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<RcThemeModule, [{ optional: true; skipSelf: true; }]>;
|
|
211
|
+
static ɵmod: i0.ɵɵNgModuleDeclaration<RcThemeModule, never, [typeof i1.CommonModule, typeof RcLayout], [typeof RcLayout]>;
|
|
212
|
+
static ɵinj: i0.ɵɵInjectorDeclaration<RcThemeModule>;
|
|
213
|
+
}
|
|
214
|
+
/**
|
|
215
|
+
* Standalone provider function for the Resolve Components theme system.
|
|
216
|
+
*
|
|
217
|
+
* @example
|
|
218
|
+
* ```typescript
|
|
219
|
+
* // app.config.ts
|
|
220
|
+
* export const appConfig: ApplicationConfig = {
|
|
221
|
+
* providers: [provideRcTheme({ name: 'default' })],
|
|
222
|
+
* };
|
|
223
|
+
* ```
|
|
224
|
+
*
|
|
225
|
+
* @param options - Theme configuration.
|
|
226
|
+
* @param customThemes - Optional additional JS theme definitions.
|
|
227
|
+
*/
|
|
228
|
+
declare function provideRcTheme(options?: RcThemeOptions, customThemes?: RcJSThemeOptions[]): (typeof RcJSThemesRegistry | typeof RcThemeService | {
|
|
229
|
+
provide: i0.InjectionToken<RcThemeOptions>;
|
|
230
|
+
useValue: RcThemeOptions;
|
|
231
|
+
} | {
|
|
232
|
+
provide: i0.InjectionToken<RcJSThemeOptions[]>;
|
|
233
|
+
useValue: RcJSThemeOptions[];
|
|
234
|
+
})[];
|
|
235
|
+
|
|
236
|
+
/**
|
|
237
|
+
* Default JS theme — Microsoft Fluent-inspired light palette.
|
|
238
|
+
* These variables are available at runtime for chart libraries, dynamic
|
|
239
|
+
* styling, or any JS consumer that needs theme colors.
|
|
240
|
+
*/
|
|
241
|
+
declare const DEFAULT_THEME: RcJSThemeOptions;
|
|
242
|
+
|
|
243
|
+
/**
|
|
244
|
+
* Dark JS theme — inherits from default, overrides for dark surfaces.
|
|
245
|
+
*/
|
|
246
|
+
declare const DARK_THEME: RcJSThemeOptions;
|
|
247
|
+
|
|
248
|
+
/**
|
|
249
|
+
* Root container component for Resolve Components design system.
|
|
250
|
+
* Provides a wrapper element with the `rc-root` class.
|
|
251
|
+
*
|
|
252
|
+
* @example
|
|
253
|
+
* ```html
|
|
254
|
+
* <rc-resolve-components>
|
|
255
|
+
* <rc-button>Click me</rc-button>
|
|
256
|
+
* </rc-resolve-components>
|
|
257
|
+
* ```
|
|
258
|
+
*/
|
|
259
|
+
declare class ResolveComponents {
|
|
260
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<ResolveComponents, never>;
|
|
261
|
+
static ɵcmp: i0.ɵɵComponentDeclaration<ResolveComponents, "rc-resolve-components", never, {}, {}, never, never, true, never>;
|
|
262
|
+
}
|
|
263
|
+
|
|
264
|
+
/** Shape / visual style of the button. */
|
|
265
|
+
type RcButtonVariant = 'filled' | 'outline' | 'ghost';
|
|
266
|
+
/** Semantic colour / importance of the button. */
|
|
267
|
+
type RcButtonStatus = 'primary' | 'secondary' | 'danger' | 'info' | 'success' | 'warning';
|
|
268
|
+
type RcButtonSize = 'sm' | 'md' | 'lg';
|
|
269
|
+
/**
|
|
270
|
+
* Directive for styling native button-like elements with Resolve design tokens.
|
|
271
|
+
*
|
|
272
|
+
* Apply `rcButton` to any `<button>`, `<a>`, or `<input type="submit">` element.
|
|
273
|
+
* The host element receives the full button styling including BEM modifier classes.
|
|
274
|
+
*
|
|
275
|
+
* @example Basic usage
|
|
276
|
+
* ```html
|
|
277
|
+
* <button rcButton>Default (filled primary)</button>
|
|
278
|
+
* <button rcButton status="danger">Delete</button>
|
|
279
|
+
* <button rcButton variant="outline">Outline primary</button>
|
|
280
|
+
* <button rcButton variant="outline" status="danger">Outline danger</button>
|
|
281
|
+
* <button rcButton variant="ghost" status="success">Ghost success</button>
|
|
282
|
+
* ```
|
|
283
|
+
*
|
|
284
|
+
* @example With icon (using rc-icon)
|
|
285
|
+
* ```html
|
|
286
|
+
* <button rcButton>
|
|
287
|
+
* <rc-icon name="save"></rc-icon>
|
|
288
|
+
* Save
|
|
289
|
+
* </button>
|
|
290
|
+
* ```
|
|
291
|
+
*
|
|
292
|
+
* @example Icon-only button
|
|
293
|
+
* ```html
|
|
294
|
+
* <button rcButton [iconOnly]="true">
|
|
295
|
+
* <rc-icon name="plus"></rc-icon>
|
|
296
|
+
* </button>
|
|
297
|
+
* ```
|
|
298
|
+
*
|
|
299
|
+
* @example Link button
|
|
300
|
+
* ```html
|
|
301
|
+
* <a rcButton variant="outline" href="/dashboard">Dashboard</a>
|
|
302
|
+
* ```
|
|
303
|
+
*
|
|
304
|
+
* @example Submit form
|
|
305
|
+
* ```html
|
|
306
|
+
* <input rcButton type="submit" value="Submit" />
|
|
307
|
+
* ```
|
|
308
|
+
*
|
|
309
|
+
* @input variant - Visual shape: `'filled'` | `'outline'` | `'ghost'`. Default: `'filled'`
|
|
310
|
+
* @input status - Semantic colour: `'primary'` | `'secondary'` | `'danger'` | `'info'` | `'success'` | `'warning'`. Default: `'primary'`
|
|
311
|
+
* @input size - Button size: `'sm'` | `'md'` | `'lg'`. Default: `'md'`
|
|
312
|
+
* @input disabled - Whether the element is disabled. Default: `false`
|
|
313
|
+
* @input iconOnly - Renders as a square icon-only button. Default: `false`
|
|
314
|
+
* @output clicked - Emits `MouseEvent` when clicked and not disabled.
|
|
315
|
+
*
|
|
316
|
+
* Variants (shape):
|
|
317
|
+
* - `filled` Solid background — default
|
|
318
|
+
* - `outline` Transparent with coloured border
|
|
319
|
+
* - `ghost` Fully transparent, hover reveals background
|
|
320
|
+
*
|
|
321
|
+
* Status (colour):
|
|
322
|
+
* - `primary` Blue — main call-to-action
|
|
323
|
+
* - `secondary` Gray — secondary / neutral action
|
|
324
|
+
* - `danger` Red — destructive / irreversible action
|
|
325
|
+
* - `info` Teal — informational action
|
|
326
|
+
* - `success` Green — confirm / complete
|
|
327
|
+
* - `warning` Amber — cautionary action
|
|
328
|
+
*/
|
|
329
|
+
declare class RcButtonComponent {
|
|
330
|
+
/** Visual shape of the button */
|
|
331
|
+
variant: RcButtonVariant;
|
|
332
|
+
/** Semantic colour / importance */
|
|
333
|
+
status: RcButtonStatus;
|
|
334
|
+
/** Button size */
|
|
335
|
+
size: RcButtonSize;
|
|
336
|
+
/** Whether the element is disabled */
|
|
337
|
+
disabled: boolean;
|
|
338
|
+
/** Render as a square icon-only button (no padding, equal width/height) */
|
|
339
|
+
iconOnly: boolean;
|
|
340
|
+
/** Emits when the element is clicked and not disabled */
|
|
341
|
+
clicked: EventEmitter<MouseEvent>;
|
|
342
|
+
onClick(event: Event): void;
|
|
343
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<RcButtonComponent, never>;
|
|
344
|
+
static ɵcmp: i0.ɵɵComponentDeclaration<RcButtonComponent, "button[rcButton], a[rcButton], input[type=submit][rcButton], input[type=button][rcButton], input[type=reset][rcButton]", never, { "variant": { "alias": "variant"; "required": false; }; "status": { "alias": "status"; "required": false; }; "size": { "alias": "size"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "iconOnly": { "alias": "iconOnly"; "required": false; }; }, { "clicked": "clicked"; }, never, ["*"], true, never>;
|
|
345
|
+
}
|
|
346
|
+
|
|
347
|
+
/** Colour status of the badge. */
|
|
348
|
+
type RcBadgeStatus = 'default' | 'primary' | 'success' | 'warning' | 'danger';
|
|
349
|
+
/** @deprecated Use `RcBadgeStatus` instead. */
|
|
350
|
+
type RcBadgeVariant = RcBadgeStatus;
|
|
351
|
+
type RcBadgeSize = 'sm' | 'md';
|
|
352
|
+
/**
|
|
353
|
+
* A small inline label for displaying status, counts, or category tags.
|
|
354
|
+
*
|
|
355
|
+
* @example
|
|
356
|
+
* ```html
|
|
357
|
+
* <rc-badge>Default</rc-badge>
|
|
358
|
+
* <rc-badge status="primary">New</rc-badge>
|
|
359
|
+
* <rc-badge status="success" size="sm">Active</rc-badge>
|
|
360
|
+
* <rc-badge status="warning">Pending</rc-badge>
|
|
361
|
+
* <rc-badge status="danger">Error</rc-badge>
|
|
362
|
+
* ```
|
|
363
|
+
*/
|
|
364
|
+
declare class RcBadgeComponent {
|
|
365
|
+
/** Colour status of the badge. */
|
|
366
|
+
status: RcBadgeStatus;
|
|
367
|
+
/** Badge size. */
|
|
368
|
+
size: RcBadgeSize;
|
|
369
|
+
get hostClasses(): string;
|
|
370
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<RcBadgeComponent, never>;
|
|
371
|
+
static ɵcmp: i0.ɵɵComponentDeclaration<RcBadgeComponent, "rc-badge", never, { "status": { "alias": "status"; "required": false; }; "size": { "alias": "size"; "required": false; }; }, {}, never, ["*"], true, never>;
|
|
372
|
+
}
|
|
373
|
+
|
|
374
|
+
/**
|
|
375
|
+
* A card container component for the Resolve design system.
|
|
376
|
+
*
|
|
377
|
+
* @example
|
|
378
|
+
* ```html
|
|
379
|
+
* <rc-card>
|
|
380
|
+
* <h3 rc-card-title>Card Title</h3>
|
|
381
|
+
* <p>Card content goes here.</p>
|
|
382
|
+
* </rc-card>
|
|
383
|
+
*
|
|
384
|
+
* <rc-card [padding]="false" [shadow]="true">
|
|
385
|
+
* <img src="cover.jpg" alt="Cover" />
|
|
386
|
+
* </rc-card>
|
|
387
|
+
* ```
|
|
388
|
+
*
|
|
389
|
+
* @input padding - Whether the card has inner padding. Default: `true`
|
|
390
|
+
* @input shadow - Whether the card has a box shadow. Default: `false`
|
|
391
|
+
* @input bordered - Whether the card has a border. Default: `true`
|
|
392
|
+
*/
|
|
393
|
+
declare class RcCardComponent {
|
|
394
|
+
/** Whether the card has inner padding */
|
|
395
|
+
padding: boolean;
|
|
396
|
+
/** Whether the card has a box shadow */
|
|
397
|
+
shadow: boolean;
|
|
398
|
+
/** Whether the card has a border */
|
|
399
|
+
bordered: boolean;
|
|
400
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<RcCardComponent, never>;
|
|
401
|
+
static ɵcmp: i0.ɵɵComponentDeclaration<RcCardComponent, "rc-card", never, { "padding": { "alias": "padding"; "required": false; }; "shadow": { "alias": "shadow"; "required": false; }; "bordered": { "alias": "bordered"; "required": false; }; }, {}, never, ["*"], true, never>;
|
|
402
|
+
}
|
|
403
|
+
|
|
404
|
+
type RcIconStatus = 'basic' | 'primary' | 'success' | 'warning' | 'danger' | 'info';
|
|
405
|
+
/**
|
|
406
|
+
* Icon component backed by the Eva Icons SVG library (490+ icons).
|
|
407
|
+
*
|
|
408
|
+
* Renders inline SVG directly onto the host element using `fill="currentColor"`,
|
|
409
|
+
* so the icon inherits the current CSS `color` — perfect for use inside buttons,
|
|
410
|
+
* badges, and any themed context.
|
|
411
|
+
*
|
|
412
|
+
* @see https://akveo.github.io/eva-icons/
|
|
413
|
+
*
|
|
414
|
+
* @example Basic
|
|
415
|
+
* ```html
|
|
416
|
+
* <rc-icon name="star"></rc-icon>
|
|
417
|
+
* ```
|
|
418
|
+
*
|
|
419
|
+
* @example With status colour
|
|
420
|
+
* ```html
|
|
421
|
+
* <rc-icon name="checkmark-circle" status="success"></rc-icon>
|
|
422
|
+
* <rc-icon name="alert-circle" status="danger"></rc-icon>
|
|
423
|
+
* ```
|
|
424
|
+
*
|
|
425
|
+
* @example Custom size
|
|
426
|
+
* ```html
|
|
427
|
+
* <rc-icon name="home" style="font-size: 32px"></rc-icon>
|
|
428
|
+
* ```
|
|
429
|
+
*
|
|
430
|
+
* @example Inside a button
|
|
431
|
+
* ```html
|
|
432
|
+
* <button rcButton status="primary">
|
|
433
|
+
* <rc-icon name="save"></rc-icon>
|
|
434
|
+
* Save
|
|
435
|
+
* </button>
|
|
436
|
+
*
|
|
437
|
+
* <!-- Icon-only -->
|
|
438
|
+
* <button rcButton status="primary" [iconOnly]="true">
|
|
439
|
+
* <rc-icon name="plus"></rc-icon>
|
|
440
|
+
* </button>
|
|
441
|
+
* ```
|
|
442
|
+
*
|
|
443
|
+
* @input name - Eva Icons icon name (e.g. `'star'`, `'home'`, `'checkmark'`)
|
|
444
|
+
* @input status - Colour variant using semantic theme tokens. Default: `'basic'`
|
|
445
|
+
*/
|
|
446
|
+
declare class RcIconComponent implements OnChanges {
|
|
447
|
+
private sanitizer;
|
|
448
|
+
/** Eva Icons icon name */
|
|
449
|
+
name: string;
|
|
450
|
+
/**
|
|
451
|
+
* Colour status applied via theme CSS custom properties.
|
|
452
|
+
* `'basic'` inherits the surrounding text colour.
|
|
453
|
+
*/
|
|
454
|
+
status: RcIconStatus;
|
|
455
|
+
svgHtml: SafeHtml;
|
|
456
|
+
constructor(sanitizer: DomSanitizer);
|
|
457
|
+
ngOnChanges(): void;
|
|
458
|
+
/** Returns all available Eva Icons names (useful for tooling / demo). */
|
|
459
|
+
static getIconNames(): string[];
|
|
460
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<RcIconComponent, never>;
|
|
461
|
+
static ɵcmp: i0.ɵɵComponentDeclaration<RcIconComponent, "rc-icon", never, { "name": { "alias": "name"; "required": true; }; "status": { "alias": "status"; "required": false; }; }, {}, never, never, true, never>;
|
|
462
|
+
}
|
|
463
|
+
|
|
464
|
+
type RcTabStatus = 'basic' | 'primary' | 'success' | 'warning' | 'danger' | 'info';
|
|
465
|
+
/**
|
|
466
|
+
* Individual tab definition used inside `<rc-tabs>`.
|
|
467
|
+
*
|
|
468
|
+
* Content projected into `<rc-tab>` is rendered inside the active tab panel.
|
|
469
|
+
*
|
|
470
|
+
* @example
|
|
471
|
+
* ```html
|
|
472
|
+
* <rc-tabs>
|
|
473
|
+
* <rc-tab label="Overview" icon="home">...</rc-tab>
|
|
474
|
+
* <rc-tab label="API" icon="code" status="primary">...</rc-tab>
|
|
475
|
+
* <rc-tab label="Disabled" disabled>...</rc-tab>
|
|
476
|
+
* </rc-tabs>
|
|
477
|
+
* ```
|
|
478
|
+
*/
|
|
479
|
+
declare class RcTabComponent {
|
|
480
|
+
/** Tab header label text */
|
|
481
|
+
label: string;
|
|
482
|
+
/** Optional Eva Icons icon name shown before the label */
|
|
483
|
+
icon?: string;
|
|
484
|
+
/**
|
|
485
|
+
* Semantic status — colours the active tab indicator.
|
|
486
|
+
* `'basic'` uses the default primary colour.
|
|
487
|
+
*/
|
|
488
|
+
status: RcTabStatus;
|
|
489
|
+
/** When true the tab header is non-interactive */
|
|
490
|
+
disabled: boolean;
|
|
491
|
+
/** @internal — referenced by RcTabsComponent to outlet content */
|
|
492
|
+
content: TemplateRef<unknown>;
|
|
493
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<RcTabComponent, never>;
|
|
494
|
+
static ɵcmp: i0.ɵɵComponentDeclaration<RcTabComponent, "rc-tab", never, { "label": { "alias": "label"; "required": false; }; "icon": { "alias": "icon"; "required": false; }; "status": { "alias": "status"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; }, {}, never, ["*"], true, never>;
|
|
495
|
+
}
|
|
496
|
+
|
|
497
|
+
type RcTabsSize = 'sm' | 'md' | 'lg';
|
|
498
|
+
/**
|
|
499
|
+
* Tabs container. Place `<rc-tab>` children inside to define tabs.
|
|
500
|
+
*
|
|
501
|
+
* @example Basic
|
|
502
|
+
* ```html
|
|
503
|
+
* <rc-tabs>
|
|
504
|
+
* <rc-tab label="Overview">Overview content</rc-tab>
|
|
505
|
+
* <rc-tab label="API">API content</rc-tab>
|
|
506
|
+
* </rc-tabs>
|
|
507
|
+
* ```
|
|
508
|
+
*
|
|
509
|
+
* @example With icons and status
|
|
510
|
+
* ```html
|
|
511
|
+
* <rc-tabs size="sm">
|
|
512
|
+
* <rc-tab label="Home" icon="home" status="primary">...</rc-tab>
|
|
513
|
+
* <rc-tab label="Profile" icon="person" status="success">...</rc-tab>
|
|
514
|
+
* <rc-tab label="Danger" icon="alert-triangle" status="danger">...</rc-tab>
|
|
515
|
+
* <rc-tab label="Locked" icon="lock" [disabled]="true">...</rc-tab>
|
|
516
|
+
* </rc-tabs>
|
|
517
|
+
* ```
|
|
518
|
+
*/
|
|
519
|
+
declare class RcTabsComponent {
|
|
520
|
+
/** Query projected rc-tab children (signal-based, auto-updates) */
|
|
521
|
+
readonly tabs: i0.Signal<readonly RcTabComponent[]>;
|
|
522
|
+
/** Size variant — affects font size and padding */
|
|
523
|
+
size: RcTabsSize;
|
|
524
|
+
/** Programmatically set the active tab index */
|
|
525
|
+
set activeTab(index: number);
|
|
526
|
+
/** Emits the new tab index whenever the active tab changes */
|
|
527
|
+
tabChange: EventEmitter<number>;
|
|
528
|
+
protected readonly _activeIndex: i0.WritableSignal<number>;
|
|
529
|
+
readonly activeIndex: i0.Signal<number>;
|
|
530
|
+
select(index: number): void;
|
|
531
|
+
selectNext(): void;
|
|
532
|
+
selectPrev(): void;
|
|
533
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<RcTabsComponent, never>;
|
|
534
|
+
static ɵcmp: i0.ɵɵComponentDeclaration<RcTabsComponent, "rc-tabs", never, { "size": { "alias": "size"; "required": false; }; "activeTab": { "alias": "activeTab"; "required": false; }; }, { "tabChange": "tabChange"; }, ["tabs"], never, true, never>;
|
|
535
|
+
}
|
|
536
|
+
|
|
537
|
+
type RcAlertStatus = 'info' | 'success' | 'warning' | 'danger';
|
|
538
|
+
type RcAlertVariant = 'subtle' | 'filled' | 'outline';
|
|
539
|
+
/**
|
|
540
|
+
* An inline contextual alert for displaying feedback messages.
|
|
541
|
+
*
|
|
542
|
+
* @example Basic
|
|
543
|
+
* ```html
|
|
544
|
+
* <rc-alert status="success">Changes saved successfully.</rc-alert>
|
|
545
|
+
* ```
|
|
546
|
+
*
|
|
547
|
+
* @example With title and dismissible
|
|
548
|
+
* ```html
|
|
549
|
+
* <rc-alert status="warning" title="Action required" [dismissible]="true" (dismissed)="onDismiss()">
|
|
550
|
+
* Please review the highlighted fields.
|
|
551
|
+
* </rc-alert>
|
|
552
|
+
* ```
|
|
553
|
+
*
|
|
554
|
+
* @example Filled variant
|
|
555
|
+
* ```html
|
|
556
|
+
* <rc-alert status="danger" variant="filled" title="Error">
|
|
557
|
+
* Unable to save changes. Please try again.
|
|
558
|
+
* </rc-alert>
|
|
559
|
+
* ```
|
|
560
|
+
*
|
|
561
|
+
* @input status - Semantic status colour. Default: `'info'`
|
|
562
|
+
* @input variant - Visual style. Default: `'subtle'`
|
|
563
|
+
* @input title - Optional bold heading above the message.
|
|
564
|
+
* @input dismissible - Shows a close button. Default: `false`
|
|
565
|
+
* @output dismissed - Emits when the close button is clicked.
|
|
566
|
+
*/
|
|
567
|
+
declare class RcAlertComponent {
|
|
568
|
+
/** Semantic status colour */
|
|
569
|
+
status: RcAlertStatus;
|
|
570
|
+
/** Visual style variant */
|
|
571
|
+
variant: RcAlertVariant;
|
|
572
|
+
/** Optional bold heading above the message */
|
|
573
|
+
title?: string;
|
|
574
|
+
/** Shows a close button when true */
|
|
575
|
+
dismissible: boolean;
|
|
576
|
+
/** ARIA label for the dismiss button. */
|
|
577
|
+
dismissAriaLabel: string;
|
|
578
|
+
/** Emitted when the close button is clicked */
|
|
579
|
+
dismissed: EventEmitter<void>;
|
|
580
|
+
get hostClasses(): string;
|
|
581
|
+
get statusIcon(): string;
|
|
582
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<RcAlertComponent, never>;
|
|
583
|
+
static ɵcmp: i0.ɵɵComponentDeclaration<RcAlertComponent, "rc-alert", never, { "status": { "alias": "status"; "required": false; }; "variant": { "alias": "variant"; "required": false; }; "title": { "alias": "title"; "required": false; }; "dismissible": { "alias": "dismissible"; "required": false; }; "dismissAriaLabel": { "alias": "dismissAriaLabel"; "required": false; }; }, { "dismissed": "dismissed"; }, never, ["*"], true, never>;
|
|
584
|
+
}
|
|
585
|
+
|
|
586
|
+
type RcToastStatus = 'info' | 'success' | 'warning' | 'danger';
|
|
587
|
+
type RcToastPosition = 'top-right' | 'top-left' | 'top-center' | 'bottom-right' | 'bottom-left' | 'bottom-center';
|
|
588
|
+
interface RcToastConfig {
|
|
589
|
+
/** The main message to display. */
|
|
590
|
+
message: string;
|
|
591
|
+
/** Optional bold heading above the message. */
|
|
592
|
+
title?: string;
|
|
593
|
+
/** Semantic status colour. Default: `'info'` */
|
|
594
|
+
status?: RcToastStatus;
|
|
595
|
+
/**
|
|
596
|
+
* Auto-dismiss delay in milliseconds.
|
|
597
|
+
* Set to `0` to keep the toast until manually dismissed.
|
|
598
|
+
* Default: `5000`
|
|
599
|
+
*/
|
|
600
|
+
duration?: number;
|
|
601
|
+
/** Screen position for the toast stack. Default: `'top-right'` */
|
|
602
|
+
position?: RcToastPosition;
|
|
603
|
+
/** Whether to show a close button. Default: `true` */
|
|
604
|
+
dismissible?: boolean;
|
|
605
|
+
/** ARIA label for the dismiss button. Default: `'Dismiss notification'` */
|
|
606
|
+
dismissAriaLabel?: string;
|
|
607
|
+
}
|
|
608
|
+
/** Resolved config with all defaults applied. */
|
|
609
|
+
interface RcToastRef {
|
|
610
|
+
/** Unique identifier for this toast instance. */
|
|
611
|
+
id: string;
|
|
612
|
+
config: Required<RcToastConfig>;
|
|
613
|
+
}
|
|
614
|
+
|
|
615
|
+
/**
|
|
616
|
+
* Service for displaying non-blocking toast notifications.
|
|
617
|
+
*
|
|
618
|
+
* Uses Angular CDK Overlay to render floating toast stacks at any of six
|
|
619
|
+
* screen positions. One overlay pane is created per position, lazily.
|
|
620
|
+
*
|
|
621
|
+
* ## Setup
|
|
622
|
+
* The service is `providedIn: 'root'` and works out of the box. Make sure
|
|
623
|
+
* `@angular/cdk/overlay-prebuilt.css` is imported in your global styles:
|
|
624
|
+
*
|
|
625
|
+
* ```scss
|
|
626
|
+
* // styles.scss
|
|
627
|
+
* @import '@angular/cdk/overlay-prebuilt.css';
|
|
628
|
+
* ```
|
|
629
|
+
*
|
|
630
|
+
* ## Usage
|
|
631
|
+
* ```typescript
|
|
632
|
+
* constructor(private toast: RcToastService) {}
|
|
633
|
+
*
|
|
634
|
+
* this.toast.success('Saved!', 'Success');
|
|
635
|
+
* this.toast.danger('Something went wrong.', 'Error');
|
|
636
|
+
* this.toast.show({ message: 'Custom toast', status: 'info', duration: 8000, position: 'bottom-center' });
|
|
637
|
+
* ```
|
|
638
|
+
*/
|
|
639
|
+
declare class RcToastService {
|
|
640
|
+
private overlay;
|
|
641
|
+
private injector;
|
|
642
|
+
private _toasts$;
|
|
643
|
+
/** Observable stream of all currently active toasts (across positions). */
|
|
644
|
+
readonly toasts$: Observable<RcToastRef[]>;
|
|
645
|
+
private _overlays;
|
|
646
|
+
private _containers;
|
|
647
|
+
private _subs;
|
|
648
|
+
constructor(overlay: Overlay, injector: Injector);
|
|
649
|
+
/**
|
|
650
|
+
* Show a toast notification with full configuration control.
|
|
651
|
+
*/
|
|
652
|
+
show(config: RcToastConfig): RcToastRef;
|
|
653
|
+
/** Dismiss a toast by its id. */
|
|
654
|
+
dismiss(id: string): void;
|
|
655
|
+
/** Dismiss all active toasts, optionally filtered by position. */
|
|
656
|
+
dismissAll(position?: RcToastPosition): void;
|
|
657
|
+
/** Show a success toast. */
|
|
658
|
+
success(message: string, title?: string, config?: Partial<RcToastConfig>): RcToastRef;
|
|
659
|
+
/** Show an info toast. */
|
|
660
|
+
info(message: string, title?: string, config?: Partial<RcToastConfig>): RcToastRef;
|
|
661
|
+
/** Show a warning toast. */
|
|
662
|
+
warning(message: string, title?: string, config?: Partial<RcToastConfig>): RcToastRef;
|
|
663
|
+
/** Show a danger / error toast. */
|
|
664
|
+
danger(message: string, title?: string, config?: Partial<RcToastConfig>): RcToastRef;
|
|
665
|
+
private _add;
|
|
666
|
+
/**
|
|
667
|
+
* Lazily create (or reuse) a CDK overlay pane + container component
|
|
668
|
+
* for a given position.
|
|
669
|
+
*/
|
|
670
|
+
private _ensureContainer;
|
|
671
|
+
private _buildPositionStrategy;
|
|
672
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<RcToastService, never>;
|
|
673
|
+
static ɵprov: i0.ɵɵInjectableDeclaration<RcToastService>;
|
|
674
|
+
}
|
|
675
|
+
|
|
676
|
+
/**
|
|
677
|
+
* Individual toast notification UI.
|
|
678
|
+
*
|
|
679
|
+
* Rendered inside `RcToastContainerComponent`; not intended for direct use.
|
|
680
|
+
*/
|
|
681
|
+
declare class RcToastComponent {
|
|
682
|
+
toast: RcToastRef;
|
|
683
|
+
close: EventEmitter<string>;
|
|
684
|
+
get toastClasses(): string;
|
|
685
|
+
get statusIcon(): string;
|
|
686
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<RcToastComponent, never>;
|
|
687
|
+
static ɵcmp: i0.ɵɵComponentDeclaration<RcToastComponent, "rc-toast", never, { "toast": { "alias": "toast"; "required": true; }; }, { "close": "close"; }, never, never, true, never>;
|
|
688
|
+
}
|
|
689
|
+
|
|
690
|
+
/**
|
|
691
|
+
* Host container for a group of toasts at a given screen position.
|
|
692
|
+
*
|
|
693
|
+
* Created dynamically by `RcToastService` via CDK Overlay.
|
|
694
|
+
* One container instance is created per position.
|
|
695
|
+
*
|
|
696
|
+
* The service owns the toasts list; it updates the `toasts` signal and
|
|
697
|
+
* listens to the `close` output.
|
|
698
|
+
*/
|
|
699
|
+
declare class RcToastContainerComponent {
|
|
700
|
+
position: RcToastPosition;
|
|
701
|
+
/** Signal-backed list — the service calls .set() to push updates. */
|
|
702
|
+
readonly toasts: i0.WritableSignal<RcToastRef[]>;
|
|
703
|
+
/** Emits the id of the toast the user wants to dismiss. */
|
|
704
|
+
close: EventEmitter<string>;
|
|
705
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<RcToastContainerComponent, never>;
|
|
706
|
+
static ɵcmp: i0.ɵɵComponentDeclaration<RcToastContainerComponent, "rc-toast-container", never, { "position": { "alias": "position"; "required": false; }; }, { "close": "close"; }, never, never, true, never>;
|
|
707
|
+
}
|
|
708
|
+
|
|
709
|
+
type RcInputStatus = 'default' | 'success' | 'danger' | 'warning';
|
|
710
|
+
type RcInputSize = 'sm' | 'md' | 'lg';
|
|
711
|
+
/**
|
|
712
|
+
* Attribute directive that styles native `<input>` and `<textarea>` elements
|
|
713
|
+
* with Resolve design tokens.
|
|
714
|
+
*
|
|
715
|
+
* Apply `rcInput` to any `<input>` or `<textarea>` element. The element
|
|
716
|
+
* receives the full input styling, size modifiers, and validation state classes.
|
|
717
|
+
*
|
|
718
|
+
* Labels, hints, and error messages are provided by the consumer using the
|
|
719
|
+
* optional `.rc-field`, `.rc-field-label`, `.rc-field-hint`, and
|
|
720
|
+
* `.rc-field-error` CSS helper classes (included in the global stylesheet).
|
|
721
|
+
*
|
|
722
|
+
* @example Basic
|
|
723
|
+
* ```html
|
|
724
|
+
* <input rcInput placeholder="Search…" />
|
|
725
|
+
* ```
|
|
726
|
+
*
|
|
727
|
+
* @example With label and hint wrapper
|
|
728
|
+
* ```html
|
|
729
|
+
* <div class="rc-field">
|
|
730
|
+
* <label class="rc-field-label" for="email">Email</label>
|
|
731
|
+
* <input rcInput id="email" type="email" placeholder="you@company.com" />
|
|
732
|
+
* <span class="rc-field-hint">We'll never share your email.</span>
|
|
733
|
+
* </div>
|
|
734
|
+
* ```
|
|
735
|
+
*
|
|
736
|
+
* @example Validation state
|
|
737
|
+
* ```html
|
|
738
|
+
* <div class="rc-field">
|
|
739
|
+
* <label class="rc-field-label">Password</label>
|
|
740
|
+
* <input rcInput type="password" status="danger" />
|
|
741
|
+
* <span class="rc-field-error">Must be at least 8 characters.</span>
|
|
742
|
+
* </div>
|
|
743
|
+
* ```
|
|
744
|
+
*
|
|
745
|
+
* @example Textarea
|
|
746
|
+
* ```html
|
|
747
|
+
* <textarea rcInput rows="4" placeholder="Your message…"></textarea>
|
|
748
|
+
* ```
|
|
749
|
+
*
|
|
750
|
+
* @example Sizes
|
|
751
|
+
* ```html
|
|
752
|
+
* <input rcInput size="sm" placeholder="Small" />
|
|
753
|
+
* <input rcInput size="md" placeholder="Medium" />
|
|
754
|
+
* <input rcInput size="lg" placeholder="Large" />
|
|
755
|
+
* ```
|
|
756
|
+
*/
|
|
757
|
+
declare class RcInputDirective {
|
|
758
|
+
private readonly _el;
|
|
759
|
+
/** @internal true when the directive is applied to a `<textarea>` */
|
|
760
|
+
readonly _isTextarea: boolean;
|
|
761
|
+
/** Validation / visual status of the field. */
|
|
762
|
+
status: RcInputStatus;
|
|
763
|
+
/** Size of the input field. */
|
|
764
|
+
size: RcInputSize;
|
|
765
|
+
/** @internal focus tracking for the focus ring class */
|
|
766
|
+
_focused: boolean;
|
|
767
|
+
_onFocus(): void;
|
|
768
|
+
_onBlur(): void;
|
|
769
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<RcInputDirective, never>;
|
|
770
|
+
static ɵdir: i0.ɵɵDirectiveDeclaration<RcInputDirective, "input[rcInput], textarea[rcInput]", never, { "status": { "alias": "status"; "required": false; }; "size": { "alias": "size"; "required": false; }; }, {}, never, never, true, never>;
|
|
771
|
+
}
|
|
772
|
+
|
|
773
|
+
/**
|
|
774
|
+
* Configuration for opening an RcDialog.
|
|
775
|
+
*
|
|
776
|
+
* @example
|
|
777
|
+
* ```typescript
|
|
778
|
+
* this.dialog.open(MyDialogComponent, {
|
|
779
|
+
* data: { id: 42 },
|
|
780
|
+
* width: '32rem',
|
|
781
|
+
* disableClose: false,
|
|
782
|
+
* });
|
|
783
|
+
* ```
|
|
784
|
+
*/
|
|
785
|
+
interface RcDialogConfig<D = unknown> {
|
|
786
|
+
/** Data injected into the dialog content component via `RC_DIALOG_DATA`. */
|
|
787
|
+
data?: D;
|
|
788
|
+
/** Fixed width of the dialog panel (e.g. `'32rem'`, `'600px'`). */
|
|
789
|
+
width?: string;
|
|
790
|
+
/** Max width. Defaults to `'90vw'`. */
|
|
791
|
+
maxWidth?: string;
|
|
792
|
+
/** Min width of the dialog panel. */
|
|
793
|
+
minWidth?: string;
|
|
794
|
+
/** Fixed height of the dialog panel. */
|
|
795
|
+
height?: string;
|
|
796
|
+
/** When `true`, clicking the backdrop or pressing Escape will NOT close the dialog. Default: `false`. */
|
|
797
|
+
disableClose?: boolean;
|
|
798
|
+
/** Extra CSS class(es) applied to the CDK overlay pane. */
|
|
799
|
+
panelClass?: string | string[];
|
|
800
|
+
/** ARIA label for the dialog panel. */
|
|
801
|
+
ariaLabel?: string;
|
|
802
|
+
/** ARIA label for the close button. Default: `'Close dialog'` */
|
|
803
|
+
closeAriaLabel?: string;
|
|
804
|
+
/** ID of the element describing the dialog (sets `aria-describedby`). */
|
|
805
|
+
ariaDescribedBy?: string;
|
|
806
|
+
}
|
|
807
|
+
/**
|
|
808
|
+
* Injection token for the data passed to a dialog content component.
|
|
809
|
+
*
|
|
810
|
+
* @example
|
|
811
|
+
* ```typescript
|
|
812
|
+
* export class MyDialogComponent {
|
|
813
|
+
* readonly data = inject<MyData>(RC_DIALOG_DATA);
|
|
814
|
+
* }
|
|
815
|
+
* ```
|
|
816
|
+
*/
|
|
817
|
+
declare const RC_DIALOG_DATA: InjectionToken<unknown>;
|
|
818
|
+
|
|
819
|
+
/**
|
|
820
|
+
* Reference to an open dialog, returned by `RcDialogService.open()`.
|
|
821
|
+
*
|
|
822
|
+
* Inject it inside the dialog content component to close it programmatically
|
|
823
|
+
* or subscribe to its close event.
|
|
824
|
+
*
|
|
825
|
+
* @example
|
|
826
|
+
* ```typescript
|
|
827
|
+
* export class ConfirmDialogComponent {
|
|
828
|
+
* private readonly dialogRef = inject<RcDialogRef<boolean>>(RcDialogRef);
|
|
829
|
+
*
|
|
830
|
+
* confirm(): void { this.dialogRef.close(true); }
|
|
831
|
+
* cancel(): void { this.dialogRef.close(false); }
|
|
832
|
+
* }
|
|
833
|
+
* ```
|
|
834
|
+
*/
|
|
835
|
+
declare class RcDialogRef<R = unknown, D = unknown> {
|
|
836
|
+
private readonly _overlayRef;
|
|
837
|
+
/** The config used to open this dialog. */
|
|
838
|
+
readonly config: RcDialogConfig<D>;
|
|
839
|
+
private readonly _afterClosed;
|
|
840
|
+
/**
|
|
841
|
+
* Emits once (with the optional result value) when the dialog fully closes,
|
|
842
|
+
* then completes.
|
|
843
|
+
*/
|
|
844
|
+
readonly afterClosed: Observable<R | undefined>;
|
|
845
|
+
private _closed;
|
|
846
|
+
constructor(_overlayRef: OverlayRef,
|
|
847
|
+
/** The config used to open this dialog. */
|
|
848
|
+
config: RcDialogConfig<D>);
|
|
849
|
+
/**
|
|
850
|
+
* Closes the dialog, passing an optional result value to `afterClosed`
|
|
851
|
+
* subscribers.
|
|
852
|
+
*/
|
|
853
|
+
close(result?: R): void;
|
|
854
|
+
/** Observable of backdrop click events. */
|
|
855
|
+
get backdropClick$(): Observable<MouseEvent>;
|
|
856
|
+
}
|
|
857
|
+
|
|
858
|
+
/**
|
|
859
|
+
* Service for opening modal dialogs built on top of Angular CDK Overlay.
|
|
860
|
+
*
|
|
861
|
+
* The dialog renders a floating panel with a backdrop, centered on screen.
|
|
862
|
+
* Pass any component as the first argument; it becomes the dialog's content.
|
|
863
|
+
*
|
|
864
|
+
* ## Setup
|
|
865
|
+
* The service is `providedIn: 'root'`. No extra setup is required.
|
|
866
|
+
*
|
|
867
|
+
* ## Usage
|
|
868
|
+
* ```typescript
|
|
869
|
+
* export class MyPage {
|
|
870
|
+
* private dialog = inject(RcDialogService);
|
|
871
|
+
*
|
|
872
|
+
* openConfirm(): void {
|
|
873
|
+
* const ref = this.dialog.open<boolean, { name: string }>(ConfirmDialogComponent, {
|
|
874
|
+
* data: { name: 'record #42' },
|
|
875
|
+
* width: '28rem',
|
|
876
|
+
* });
|
|
877
|
+
*
|
|
878
|
+
* ref.afterClosed.subscribe(result => {
|
|
879
|
+
* if (result) this.deleteRecord();
|
|
880
|
+
* });
|
|
881
|
+
* }
|
|
882
|
+
* }
|
|
883
|
+
* ```
|
|
884
|
+
*
|
|
885
|
+
* ## Dialog content component
|
|
886
|
+
* The content component can inject `RcDialogRef` to close the dialog and
|
|
887
|
+
* `RC_DIALOG_DATA` to access passed data:
|
|
888
|
+
*
|
|
889
|
+
* ```typescript
|
|
890
|
+
* export class ConfirmDialogComponent {
|
|
891
|
+
* readonly data = inject<{ name: string }>(RC_DIALOG_DATA);
|
|
892
|
+
* readonly dialog = inject<RcDialogRef<boolean>>(RcDialogRef);
|
|
893
|
+
* }
|
|
894
|
+
* ```
|
|
895
|
+
*
|
|
896
|
+
* Use `rcDialogTitle`, `rcDialogContent`, and `rcDialogActions` directives to
|
|
897
|
+
* structure the dialog's layout:
|
|
898
|
+
*
|
|
899
|
+
* ```html
|
|
900
|
+
* <h2 rcDialogTitle>Confirm deletion</h2>
|
|
901
|
+
* <div rcDialogContent>
|
|
902
|
+
* <p>Delete {{ data.name }}? This action cannot be undone.</p>
|
|
903
|
+
* </div>
|
|
904
|
+
* <div rcDialogActions>
|
|
905
|
+
* <button rcButton variant="ghost" (click)="dialog.close(false)">Cancel</button>
|
|
906
|
+
* <button rcButton status="danger" (click)="dialog.close(true)">Delete</button>
|
|
907
|
+
* </div>
|
|
908
|
+
* ```
|
|
909
|
+
*/
|
|
910
|
+
declare class RcDialogService {
|
|
911
|
+
private readonly _overlay;
|
|
912
|
+
private readonly _injector;
|
|
913
|
+
/**
|
|
914
|
+
* Opens a dialog containing the given component.
|
|
915
|
+
*
|
|
916
|
+
* @param component The Angular component class to render as dialog content.
|
|
917
|
+
* @param config Optional dialog configuration.
|
|
918
|
+
* @returns An `RcDialogRef` to control and observe the opened dialog.
|
|
919
|
+
*/
|
|
920
|
+
open<R = unknown, D = unknown>(component: Type<unknown>, config?: RcDialogConfig<D>): RcDialogRef<R, D>;
|
|
921
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<RcDialogService, never>;
|
|
922
|
+
static ɵprov: i0.ɵɵInjectableDeclaration<RcDialogService>;
|
|
923
|
+
}
|
|
924
|
+
|
|
925
|
+
/**
|
|
926
|
+
* Marks a heading element as the dialog title.
|
|
927
|
+
* Provides consistent font size, weight, and padding (accounting for the
|
|
928
|
+
* close button).
|
|
929
|
+
*
|
|
930
|
+
* @example
|
|
931
|
+
* ```html
|
|
932
|
+
* <h2 rcDialogTitle>Confirm deletion</h2>
|
|
933
|
+
* ```
|
|
934
|
+
*/
|
|
935
|
+
declare class RcDialogTitleDirective {
|
|
936
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<RcDialogTitleDirective, never>;
|
|
937
|
+
static ɵdir: i0.ɵɵDirectiveDeclaration<RcDialogTitleDirective, "[rcDialogTitle]", never, {}, {}, never, never, true, never>;
|
|
938
|
+
}
|
|
939
|
+
/**
|
|
940
|
+
* Marks the main scrollable content area of a dialog.
|
|
941
|
+
* Apply to a wrapper `<div>` or `<section>` inside the content component.
|
|
942
|
+
*
|
|
943
|
+
* @example
|
|
944
|
+
* ```html
|
|
945
|
+
* <div rcDialogContent>
|
|
946
|
+
* <p>Are you sure you want to delete this record?</p>
|
|
947
|
+
* </div>
|
|
948
|
+
* ```
|
|
949
|
+
*/
|
|
950
|
+
declare class RcDialogContentDirective {
|
|
951
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<RcDialogContentDirective, never>;
|
|
952
|
+
static ɵdir: i0.ɵɵDirectiveDeclaration<RcDialogContentDirective, "[rcDialogContent]", never, {}, {}, never, never, true, never>;
|
|
953
|
+
}
|
|
954
|
+
/**
|
|
955
|
+
* Marks the footer area of a dialog, typically containing action buttons.
|
|
956
|
+
* Buttons are right-aligned by default; add `align="start"` to left-align.
|
|
957
|
+
*
|
|
958
|
+
* @example
|
|
959
|
+
* ```html
|
|
960
|
+
* <div rcDialogActions>
|
|
961
|
+
* <button rcButton variant="ghost" (click)="dialogRef.close()">Cancel</button>
|
|
962
|
+
* <button rcButton status="primary" (click)="confirm()">Confirm</button>
|
|
963
|
+
* </div>
|
|
964
|
+
* ```
|
|
965
|
+
*/
|
|
966
|
+
declare class RcDialogActionsDirective {
|
|
967
|
+
/** Alignment of the action buttons. Default: `'end'` */
|
|
968
|
+
align: 'start' | 'end';
|
|
969
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<RcDialogActionsDirective, never>;
|
|
970
|
+
static ɵdir: i0.ɵɵDirectiveDeclaration<RcDialogActionsDirective, "[rcDialogActions]", never, {}, {}, never, never, true, never>;
|
|
971
|
+
}
|
|
972
|
+
/**
|
|
973
|
+
* Internal overlay container for `RcDialogService`.
|
|
974
|
+
*
|
|
975
|
+
* Do not use directly — open dialogs via `RcDialogService.open()`.
|
|
976
|
+
*/
|
|
977
|
+
declare class RcDialogContainerComponent {
|
|
978
|
+
private readonly _outlet;
|
|
979
|
+
readonly _dialogRef: RcDialogRef<any, any>;
|
|
980
|
+
get _config(): _resolve_components_theme.RcDialogConfig<any>;
|
|
981
|
+
/** Attach the user's content component into the portal outlet. */
|
|
982
|
+
attachContent<C>(portal: ComponentPortal<C>): ComponentRef<C>;
|
|
983
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<RcDialogContainerComponent, never>;
|
|
984
|
+
static ɵcmp: i0.ɵɵComponentDeclaration<RcDialogContainerComponent, "rc-dialog-container", never, {}, {}, never, never, true, never>;
|
|
985
|
+
}
|
|
986
|
+
|
|
987
|
+
/**
|
|
988
|
+
* Header-cell definition structural directive.
|
|
989
|
+
* Use as `*rcHeaderCellDef` inside an `[rcColumnDef]` template.
|
|
990
|
+
*
|
|
991
|
+
* @example
|
|
992
|
+
* ```html
|
|
993
|
+
* <ng-container rcColumnDef="name">
|
|
994
|
+
* <th rcHeaderCell *rcHeaderCellDef>Name</th>
|
|
995
|
+
* <td rcCell *rcCellDef="let row">{{ row.name }}</td>
|
|
996
|
+
* </ng-container>
|
|
997
|
+
* ```
|
|
998
|
+
*/
|
|
999
|
+
declare class RcHeaderCellDefDirective extends CdkHeaderCellDef {
|
|
1000
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<RcHeaderCellDefDirective, never>;
|
|
1001
|
+
static ɵdir: i0.ɵɵDirectiveDeclaration<RcHeaderCellDefDirective, "[rcHeaderCellDef]", never, {}, {}, never, never, true, never>;
|
|
1002
|
+
}
|
|
1003
|
+
/** Data-cell definition structural directive. Use as `*rcCellDef="let row"`. */
|
|
1004
|
+
declare class RcCellDefDirective extends CdkCellDef {
|
|
1005
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<RcCellDefDirective, never>;
|
|
1006
|
+
static ɵdir: i0.ɵɵDirectiveDeclaration<RcCellDefDirective, "[rcCellDef]", never, {}, {}, never, never, true, never>;
|
|
1007
|
+
}
|
|
1008
|
+
/** Footer-cell definition structural directive. Use as `*rcFooterCellDef`. */
|
|
1009
|
+
declare class RcFooterCellDefDirective extends CdkFooterCellDef {
|
|
1010
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<RcFooterCellDefDirective, never>;
|
|
1011
|
+
static ɵdir: i0.ɵɵDirectiveDeclaration<RcFooterCellDefDirective, "[rcFooterCellDef]", never, {}, {}, never, never, true, never>;
|
|
1012
|
+
}
|
|
1013
|
+
/**
|
|
1014
|
+
* Column definition — wraps all templates for a single column.
|
|
1015
|
+
*
|
|
1016
|
+
* @example
|
|
1017
|
+
* ```html
|
|
1018
|
+
* <ng-container [rcColumnDef]="'status'">
|
|
1019
|
+
* <th rcHeaderCell *rcHeaderCellDef>Status</th>
|
|
1020
|
+
* <td rcCell *rcCellDef="let row">{{ row.status }}</td>
|
|
1021
|
+
* </ng-container>
|
|
1022
|
+
* ```
|
|
1023
|
+
*/
|
|
1024
|
+
declare class RcColumnDefDirective extends CdkColumnDef {
|
|
1025
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<RcColumnDefDirective, never>;
|
|
1026
|
+
static ɵdir: i0.ɵɵDirectiveDeclaration<RcColumnDefDirective, "[rcColumnDef]", never, { "name": { "alias": "rcColumnDef"; "required": false; }; }, {}, never, never, true, never>;
|
|
1027
|
+
}
|
|
1028
|
+
/**
|
|
1029
|
+
* Header-cell host directive — apply to `<th>` inside `*rcHeaderCellDef` templates.
|
|
1030
|
+
*
|
|
1031
|
+
* @example
|
|
1032
|
+
* ```html
|
|
1033
|
+
* <th rcHeaderCell *rcHeaderCellDef>Column title</th>
|
|
1034
|
+
* ```
|
|
1035
|
+
*/
|
|
1036
|
+
declare class RcHeaderCellDirective {
|
|
1037
|
+
constructor();
|
|
1038
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<RcHeaderCellDirective, never>;
|
|
1039
|
+
static ɵdir: i0.ɵɵDirectiveDeclaration<RcHeaderCellDirective, "rc-header-cell, th[rcHeaderCell]", never, {}, {}, never, never, true, never>;
|
|
1040
|
+
}
|
|
1041
|
+
/**
|
|
1042
|
+
* Data-cell host directive — apply to `<td>` inside `*rcCellDef` templates.
|
|
1043
|
+
*
|
|
1044
|
+
* @example
|
|
1045
|
+
* ```html
|
|
1046
|
+
* <td rcCell *rcCellDef="let row">{{ row.name }}</td>
|
|
1047
|
+
* ```
|
|
1048
|
+
*/
|
|
1049
|
+
declare class RcCellDirective {
|
|
1050
|
+
constructor();
|
|
1051
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<RcCellDirective, never>;
|
|
1052
|
+
static ɵdir: i0.ɵɵDirectiveDeclaration<RcCellDirective, "rc-cell, td[rcCell]", never, {}, {}, never, never, true, never>;
|
|
1053
|
+
}
|
|
1054
|
+
/**
|
|
1055
|
+
* Footer-cell host directive — apply to `<td>` inside `*rcFooterCellDef` templates.
|
|
1056
|
+
*
|
|
1057
|
+
* @example
|
|
1058
|
+
* ```html
|
|
1059
|
+
* <td rcFooterCell *rcFooterCellDef>Total</td>
|
|
1060
|
+
* ```
|
|
1061
|
+
*/
|
|
1062
|
+
declare class RcFooterCellDirective {
|
|
1063
|
+
constructor();
|
|
1064
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<RcFooterCellDirective, never>;
|
|
1065
|
+
static ɵdir: i0.ɵɵDirectiveDeclaration<RcFooterCellDirective, "rc-footer-cell, td[rcFooterCell]", never, {}, {}, never, never, true, never>;
|
|
1066
|
+
}
|
|
1067
|
+
/**
|
|
1068
|
+
* Header-row definition — declares the set of columns the header row should render.
|
|
1069
|
+
*
|
|
1070
|
+
* @example
|
|
1071
|
+
* ```html
|
|
1072
|
+
* <tr rc-header-row *rcHeaderRowDef="displayedColumns; sticky: true"></tr>
|
|
1073
|
+
* ```
|
|
1074
|
+
*/
|
|
1075
|
+
declare class RcHeaderRowDefDirective extends CdkHeaderRowDef {
|
|
1076
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<RcHeaderRowDefDirective, never>;
|
|
1077
|
+
static ɵdir: i0.ɵɵDirectiveDeclaration<RcHeaderRowDefDirective, "[rcHeaderRowDef]", never, { "columns": { "alias": "rcHeaderRowDef"; "required": false; }; "sticky": { "alias": "rcHeaderRowDefSticky"; "required": false; }; }, {}, never, never, true, never>;
|
|
1078
|
+
}
|
|
1079
|
+
/**
|
|
1080
|
+
* Data-row definition — declares the columns and an optional predicate to
|
|
1081
|
+
* decide which rows use this definition.
|
|
1082
|
+
*
|
|
1083
|
+
* @example
|
|
1084
|
+
* ```html
|
|
1085
|
+
* <tr rc-row *rcRowDef="let row; columns: displayedColumns"></tr>
|
|
1086
|
+
* ```
|
|
1087
|
+
*/
|
|
1088
|
+
declare class RcRowDefDirective<T> extends CdkRowDef<T> {
|
|
1089
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<RcRowDefDirective<any>, never>;
|
|
1090
|
+
static ɵdir: i0.ɵɵDirectiveDeclaration<RcRowDefDirective<any>, "[rcRowDef]", never, { "columns": { "alias": "rcRowDefColumns"; "required": false; }; "when": { "alias": "rcRowDefWhen"; "required": false; }; }, {}, never, never, true, never>;
|
|
1091
|
+
}
|
|
1092
|
+
/**
|
|
1093
|
+
* Footer-row definition — declares the columns the footer row should render.
|
|
1094
|
+
*
|
|
1095
|
+
* @example
|
|
1096
|
+
* ```html
|
|
1097
|
+
* <tr rc-footer-row *rcFooterRowDef="displayedColumns; sticky: true"></tr>
|
|
1098
|
+
* ```
|
|
1099
|
+
*/
|
|
1100
|
+
declare class RcFooterRowDefDirective extends CdkFooterRowDef {
|
|
1101
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<RcFooterRowDefDirective, never>;
|
|
1102
|
+
static ɵdir: i0.ɵɵDirectiveDeclaration<RcFooterRowDefDirective, "[rcFooterRowDef]", never, { "columns": { "alias": "rcFooterRowDef"; "required": false; }; "sticky": { "alias": "rcFooterRowDefSticky"; "required": false; }; }, {}, never, never, true, never>;
|
|
1103
|
+
}
|
|
1104
|
+
/** Header row component — rendered once for each `[rcHeaderRowDef]`. */
|
|
1105
|
+
declare class RcHeaderRowComponent extends CdkHeaderRow {
|
|
1106
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<RcHeaderRowComponent, never>;
|
|
1107
|
+
static ɵcmp: i0.ɵɵComponentDeclaration<RcHeaderRowComponent, "rc-header-row, tr[rc-header-row]", never, {}, {}, never, never, true, never>;
|
|
1108
|
+
}
|
|
1109
|
+
/** Data row component — rendered once per data row. */
|
|
1110
|
+
declare class RcRowComponent extends CdkRow {
|
|
1111
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<RcRowComponent, never>;
|
|
1112
|
+
static ɵcmp: i0.ɵɵComponentDeclaration<RcRowComponent, "rc-row, tr[rc-row]", never, {}, {}, never, never, true, never>;
|
|
1113
|
+
}
|
|
1114
|
+
/** Footer row component — rendered once for each `[rcFooterRowDef]`. */
|
|
1115
|
+
declare class RcFooterRowComponent extends CdkFooterRow {
|
|
1116
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<RcFooterRowComponent, never>;
|
|
1117
|
+
static ɵcmp: i0.ɵɵComponentDeclaration<RcFooterRowComponent, "rc-footer-row, tr[rc-footer-row]", never, {}, {}, never, never, true, never>;
|
|
1118
|
+
}
|
|
1119
|
+
/**
|
|
1120
|
+
* No-data row — shown when the data source has no rows.
|
|
1121
|
+
*
|
|
1122
|
+
* @example
|
|
1123
|
+
* ```html
|
|
1124
|
+
* <ng-template rcNoDataRow>
|
|
1125
|
+
* <tr><td [attr.colspan]="columns.length">No results found.</td></tr>
|
|
1126
|
+
* </ng-template>
|
|
1127
|
+
* ```
|
|
1128
|
+
*/
|
|
1129
|
+
declare class RcNoDataRowDirective extends CdkNoDataRow {
|
|
1130
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<RcNoDataRowDirective, never>;
|
|
1131
|
+
static ɵdir: i0.ɵɵDirectiveDeclaration<RcNoDataRowDirective, "ng-template[rcNoDataRow]", never, {}, {}, never, never, true, never>;
|
|
1132
|
+
}
|
|
1133
|
+
/**
|
|
1134
|
+
* A data table built on top of Angular CDK's `CdkTable`, styled with Resolve
|
|
1135
|
+
* design tokens.
|
|
1136
|
+
*
|
|
1137
|
+
* Use `[rcColumnDef]`, `*rcHeaderCellDef`, `*rcCellDef`, `[rcHeaderRowDef]`,
|
|
1138
|
+
* and `*rcRowDef` to declare the table structure.
|
|
1139
|
+
*
|
|
1140
|
+
* @example
|
|
1141
|
+
* ```html
|
|
1142
|
+
* <table rcTable [dataSource]="dataSource">
|
|
1143
|
+
* <ng-container [rcColumnDef]="'name'">
|
|
1144
|
+
* <th rcHeaderCell *rcHeaderCellDef>Name</th>
|
|
1145
|
+
* <td rcCell *rcCellDef="let row">{{ row.name }}</td>
|
|
1146
|
+
* </ng-container>
|
|
1147
|
+
*
|
|
1148
|
+
* <tr rc-header-row *rcHeaderRowDef="displayedColumns"></tr>
|
|
1149
|
+
* <tr rc-row *rcRowDef="let row; columns: displayedColumns"></tr>
|
|
1150
|
+
* </table>
|
|
1151
|
+
* ```
|
|
1152
|
+
*/
|
|
1153
|
+
declare class RcTableComponent<T> extends CdkTable<T> {
|
|
1154
|
+
/** @internal */
|
|
1155
|
+
protected stickyCssClass: string;
|
|
1156
|
+
/** @internal */
|
|
1157
|
+
protected needsPositionStickyOnElement: boolean;
|
|
1158
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<RcTableComponent<any>, never>;
|
|
1159
|
+
static ɵcmp: i0.ɵɵComponentDeclaration<RcTableComponent<any>, "rc-table, table[rcTable]", never, {}, {}, never, never, true, never>;
|
|
1160
|
+
}
|
|
1161
|
+
/** All RC Table directives and components — import this array in your module/component. */
|
|
1162
|
+
declare const RC_TABLE_DIRECTIVES: readonly [typeof RcTableComponent, typeof RcColumnDefDirective, typeof RcHeaderCellDefDirective, typeof RcCellDefDirective, typeof RcFooterCellDefDirective, typeof RcHeaderCellDirective, typeof RcCellDirective, typeof RcFooterCellDirective, typeof RcHeaderRowDefDirective, typeof RcRowDefDirective, typeof RcFooterRowDefDirective, typeof RcHeaderRowComponent, typeof RcRowComponent, typeof RcFooterRowComponent, typeof RcNoDataRowDirective];
|
|
1163
|
+
|
|
1164
|
+
/** Sort direction. An empty string means "unsorted". */
|
|
1165
|
+
type RcSortDirection = 'asc' | 'desc' | '';
|
|
1166
|
+
/** State emitted by `RcSortDirective` when the active column or direction changes. */
|
|
1167
|
+
interface RcSortState {
|
|
1168
|
+
/** Column id that is currently sorted. */
|
|
1169
|
+
active: string;
|
|
1170
|
+
/** Current sort direction. Empty string means no active sort. */
|
|
1171
|
+
direction: RcSortDirection;
|
|
1172
|
+
}
|
|
1173
|
+
/** Injection token used by `RcSortHeaderComponent` to locate its parent sort directive. */
|
|
1174
|
+
declare const RC_SORT: InjectionToken<RcSortDirective>;
|
|
1175
|
+
/**
|
|
1176
|
+
* Host directive that adds sorting state to an `rc-table` or `<table>`.
|
|
1177
|
+
*
|
|
1178
|
+
* Pair with `[rcSortHeader]` attributes on header cells. The directive tracks
|
|
1179
|
+
* which column is active and in which direction, emitting `rcSortChange` on
|
|
1180
|
+
* every transition.
|
|
1181
|
+
*
|
|
1182
|
+
* The cycling order is: _none_ → `asc` → `desc` → _none_.
|
|
1183
|
+
*
|
|
1184
|
+
* @example
|
|
1185
|
+
* ```html
|
|
1186
|
+
* <table rcTable [dataSource]="ds" rcSort (rcSortChange)="ds.sort = $event">
|
|
1187
|
+
* ...
|
|
1188
|
+
* </table>
|
|
1189
|
+
* ```
|
|
1190
|
+
*/
|
|
1191
|
+
declare class RcSortDirective {
|
|
1192
|
+
/** The id of the currently active sort column, or `''` if unsorted. */
|
|
1193
|
+
readonly active: i0.WritableSignal<string>;
|
|
1194
|
+
/** The current sort direction. */
|
|
1195
|
+
readonly direction: i0.WritableSignal<RcSortDirection>;
|
|
1196
|
+
/** Emits whenever the active column or direction changes. */
|
|
1197
|
+
readonly rcSortChange: EventEmitter<RcSortState>;
|
|
1198
|
+
/** @internal Called by `RcSortHeaderComponent` when the user clicks a header. */
|
|
1199
|
+
sort(columnId: string): void;
|
|
1200
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<RcSortDirective, never>;
|
|
1201
|
+
static ɵdir: i0.ɵɵDirectiveDeclaration<RcSortDirective, "[rcSort]", ["rcSort"], {}, { "rcSortChange": "rcSortChange"; }, never, never, true, never>;
|
|
1202
|
+
}
|
|
1203
|
+
/**
|
|
1204
|
+
* Sort-header component — apply as an attribute to a `<th>` cell to make the
|
|
1205
|
+
* column sortable. Requires a parent `[rcSort]` directive.
|
|
1206
|
+
*
|
|
1207
|
+
* Cycles direction on each click: _none_ → `asc` → `desc` → _none_.
|
|
1208
|
+
*
|
|
1209
|
+
* @example
|
|
1210
|
+
* ```html
|
|
1211
|
+
* <th rcHeaderCell *rcHeaderCellDef [rcSortHeader]="'name'">Name</th>
|
|
1212
|
+
* ```
|
|
1213
|
+
*/
|
|
1214
|
+
declare class RcSortHeaderComponent {
|
|
1215
|
+
/** The column id this header controls. Matches the `[rcColumnDef]` name. */
|
|
1216
|
+
columnId: string;
|
|
1217
|
+
/** @internal */
|
|
1218
|
+
readonly _sort: RcSortDirective;
|
|
1219
|
+
/** @internal */
|
|
1220
|
+
readonly _isActive: i0.Signal<boolean>;
|
|
1221
|
+
/** @internal */
|
|
1222
|
+
readonly _ariaSort: i0.Signal<"ascending" | "descending" | null>;
|
|
1223
|
+
/** @internal */
|
|
1224
|
+
_onClick(): void;
|
|
1225
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<RcSortHeaderComponent, never>;
|
|
1226
|
+
static ɵcmp: i0.ɵɵComponentDeclaration<RcSortHeaderComponent, "[rcSortHeader]", never, { "columnId": { "alias": "rcSortHeader"; "required": true; }; }, {}, never, ["*"], true, never>;
|
|
1227
|
+
}
|
|
1228
|
+
|
|
1229
|
+
/**
|
|
1230
|
+
* Client-side data source for `rc-table`.
|
|
1231
|
+
*
|
|
1232
|
+
* Handles in-memory sorting and filtering. For server-side data or pagination,
|
|
1233
|
+
* implement `DataSource<T>` directly or extend this class.
|
|
1234
|
+
*
|
|
1235
|
+
* @example
|
|
1236
|
+
* ```typescript
|
|
1237
|
+
* interface User { id: number; name: string; email: string; role: string; }
|
|
1238
|
+
*
|
|
1239
|
+
* readonly dataSource = new RcTableDataSource<User>(USERS);
|
|
1240
|
+
*
|
|
1241
|
+
* // Filter:
|
|
1242
|
+
* onFilter(value: string): void { this.dataSource.filter = value; }
|
|
1243
|
+
*
|
|
1244
|
+
* // Sort (bind via @ViewChild after view init):
|
|
1245
|
+
* @ViewChild(RcSortDirective) sort!: RcSortDirective;
|
|
1246
|
+
* ngAfterViewInit() { this.dataSource.sort = this.sort; }
|
|
1247
|
+
* ```
|
|
1248
|
+
*/
|
|
1249
|
+
declare class RcTableDataSource<T> extends DataSource<T> {
|
|
1250
|
+
private readonly _data$;
|
|
1251
|
+
private readonly _filter$;
|
|
1252
|
+
private readonly _sortChange$;
|
|
1253
|
+
private _sort;
|
|
1254
|
+
private _sortSubscription;
|
|
1255
|
+
/** The raw data items rendered by the table. */
|
|
1256
|
+
get data(): T[];
|
|
1257
|
+
set data(value: T[]);
|
|
1258
|
+
/**
|
|
1259
|
+
* Filter string applied to every row.
|
|
1260
|
+
* Setting this triggers a re-render; the string is trimmed and lower-cased
|
|
1261
|
+
* before being passed to `filterPredicate`.
|
|
1262
|
+
*/
|
|
1263
|
+
get filter(): string;
|
|
1264
|
+
set filter(value: string);
|
|
1265
|
+
/**
|
|
1266
|
+
* The `RcSortDirective` instance connected to the table.
|
|
1267
|
+
* When set, the data source subscribes to sort-change events and
|
|
1268
|
+
* re-sorts on every header click.
|
|
1269
|
+
*/
|
|
1270
|
+
get sort(): RcSortDirective | null;
|
|
1271
|
+
set sort(value: RcSortDirective | null);
|
|
1272
|
+
/**
|
|
1273
|
+
* Returns the comparable value of `data[sortHeaderId]` used during sorting.
|
|
1274
|
+
* Override to support nested paths or computed values.
|
|
1275
|
+
*/
|
|
1276
|
+
sortingDataAccessor: (data: T, sortHeaderId: string) => string | number;
|
|
1277
|
+
/**
|
|
1278
|
+
* Returns `true` if `data` should be included for the active `filter` string.
|
|
1279
|
+
* Default implementation joins all property values and does a substring check.
|
|
1280
|
+
* Override to restrict which columns participate in filtering.
|
|
1281
|
+
*/
|
|
1282
|
+
filterPredicate: (data: T, filter: string) => boolean;
|
|
1283
|
+
constructor(initialData?: T[]);
|
|
1284
|
+
connect(): Observable<T[]>;
|
|
1285
|
+
disconnect(): void;
|
|
1286
|
+
}
|
|
1287
|
+
|
|
1288
|
+
type RcChipStatus = 'default' | 'primary' | 'success' | 'warning' | 'danger' | 'info';
|
|
1289
|
+
type RcChipSize = 'sm' | 'md';
|
|
1290
|
+
/**
|
|
1291
|
+
* A compact interactive label — optionally clickable and/or closeable.
|
|
1292
|
+
*
|
|
1293
|
+
* Chips represent discrete values such as filters, tags, or selected options.
|
|
1294
|
+
* They can be made clickable and/or include a close/remove button.
|
|
1295
|
+
*
|
|
1296
|
+
* @example Basic chip
|
|
1297
|
+
* ```html
|
|
1298
|
+
* <rc-chip>Design</rc-chip>
|
|
1299
|
+
* ```
|
|
1300
|
+
*
|
|
1301
|
+
* @example Clickable chip with icon
|
|
1302
|
+
* ```html
|
|
1303
|
+
* <rc-chip status="primary" icon="star" (chipClick)="onSelect()">Favourite</rc-chip>
|
|
1304
|
+
* ```
|
|
1305
|
+
*
|
|
1306
|
+
* @example Closeable chip (filter tag)
|
|
1307
|
+
* ```html
|
|
1308
|
+
* <rc-chip status="primary" [closeable]="true" (closed)="removeFilter('tag')">
|
|
1309
|
+
* Angular
|
|
1310
|
+
* </rc-chip>
|
|
1311
|
+
* ```
|
|
1312
|
+
*
|
|
1313
|
+
* @example Disabled chip
|
|
1314
|
+
* ```html
|
|
1315
|
+
* <rc-chip [disabled]="true">Not available</rc-chip>
|
|
1316
|
+
* ```
|
|
1317
|
+
*
|
|
1318
|
+
* @input status - Colour status. Default: `'default'`
|
|
1319
|
+
* @input size - Chip size. Default: `'md'`
|
|
1320
|
+
* @input icon - Eva Icons icon name shown before the label.
|
|
1321
|
+
* @input closeable - Shows a close/remove button. Default: `false`
|
|
1322
|
+
* @input disabled - Disables all interactions. Default: `false`
|
|
1323
|
+
* @input selected - Renders the chip in its selected/active state. Default: `false`
|
|
1324
|
+
* @output chipClick - Emits when the chip body is clicked (and not disabled).
|
|
1325
|
+
* @output closed - Emits when the close button is clicked (and not disabled).
|
|
1326
|
+
*/
|
|
1327
|
+
declare class RcChipComponent {
|
|
1328
|
+
/** Colour status */
|
|
1329
|
+
status: RcChipStatus;
|
|
1330
|
+
/** Chip size */
|
|
1331
|
+
size: RcChipSize;
|
|
1332
|
+
/** Eva Icons icon name to show before the label */
|
|
1333
|
+
icon: string;
|
|
1334
|
+
/** Show a close/remove button */
|
|
1335
|
+
closeable: boolean;
|
|
1336
|
+
/** Disable all interactions */
|
|
1337
|
+
disabled: boolean;
|
|
1338
|
+
/** Render in selected/active state */
|
|
1339
|
+
selected: boolean;
|
|
1340
|
+
/** Emits when the chip body is clicked and not disabled */
|
|
1341
|
+
chipClick: EventEmitter<MouseEvent>;
|
|
1342
|
+
/** Emits when the close button is clicked and not disabled */
|
|
1343
|
+
closed: EventEmitter<void>;
|
|
1344
|
+
get hasClickListeners(): boolean;
|
|
1345
|
+
onClick(event: MouseEvent): void;
|
|
1346
|
+
onKeydown(event: Event): void;
|
|
1347
|
+
onClose(event: MouseEvent): void;
|
|
1348
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<RcChipComponent, never>;
|
|
1349
|
+
static ɵcmp: i0.ɵɵComponentDeclaration<RcChipComponent, "rc-chip", never, { "status": { "alias": "status"; "required": false; }; "size": { "alias": "size"; "required": false; }; "icon": { "alias": "icon"; "required": false; }; "closeable": { "alias": "closeable"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "selected": { "alias": "selected"; "required": false; }; }, { "chipClick": "chipClick"; "closed": "closed"; }, never, ["*"], true, never>;
|
|
1350
|
+
}
|
|
1351
|
+
|
|
1352
|
+
type RcRadioSize = 'sm' | 'md';
|
|
1353
|
+
declare const RC_RADIO_GROUP: InjectionToken<RcRadioGroupComponent>;
|
|
1354
|
+
/**
|
|
1355
|
+
* Container for a group of radio buttons. Supports `[(ngModel)]` and reactive forms.
|
|
1356
|
+
*
|
|
1357
|
+
* @example With ngModel
|
|
1358
|
+
* ```html
|
|
1359
|
+
* <rc-radio-group [(ngModel)]="selectedPlan">
|
|
1360
|
+
* <rc-radio-button value="free">Free</rc-radio-button>
|
|
1361
|
+
* <rc-radio-button value="pro">Pro</rc-radio-button>
|
|
1362
|
+
* <rc-radio-button value="enterprise">Enterprise</rc-radio-button>
|
|
1363
|
+
* </rc-radio-group>
|
|
1364
|
+
* ```
|
|
1365
|
+
*
|
|
1366
|
+
* @example Disabled group
|
|
1367
|
+
* ```html
|
|
1368
|
+
* <rc-radio-group [disabled]="true" [value]="'a'">
|
|
1369
|
+
* <rc-radio-button value="a">Option A</rc-radio-button>
|
|
1370
|
+
* <rc-radio-button value="b">Option B</rc-radio-button>
|
|
1371
|
+
* </rc-radio-group>
|
|
1372
|
+
* ```
|
|
1373
|
+
*
|
|
1374
|
+
* @input value - Currently selected value.
|
|
1375
|
+
* @input disabled - Disables all buttons in the group. Default: `false`
|
|
1376
|
+
* @input size - Size applied to all buttons. Default: `'md'`
|
|
1377
|
+
* @output valueChange - Emits the new value when selection changes.
|
|
1378
|
+
*/
|
|
1379
|
+
declare class RcRadioGroupComponent implements ControlValueAccessor {
|
|
1380
|
+
private readonly cdr;
|
|
1381
|
+
/** Currently selected value */
|
|
1382
|
+
get value(): unknown;
|
|
1383
|
+
set value(v: unknown);
|
|
1384
|
+
private _value;
|
|
1385
|
+
/** Disables every radio button in the group */
|
|
1386
|
+
disabled: boolean;
|
|
1387
|
+
/** Size for all buttons in the group */
|
|
1388
|
+
size: RcRadioSize;
|
|
1389
|
+
/** Emits the newly selected value */
|
|
1390
|
+
valueChange: EventEmitter<unknown>;
|
|
1391
|
+
onChange: (value: unknown) => void;
|
|
1392
|
+
onTouched: () => void;
|
|
1393
|
+
writeValue(value: unknown): void;
|
|
1394
|
+
registerOnChange(fn: (value: unknown) => void): void;
|
|
1395
|
+
registerOnTouched(fn: () => void): void;
|
|
1396
|
+
setDisabledState(disabled: boolean): void;
|
|
1397
|
+
/** Called by child RcRadioButtonComponent when a button is selected */
|
|
1398
|
+
select(value: unknown): void;
|
|
1399
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<RcRadioGroupComponent, never>;
|
|
1400
|
+
static ɵcmp: i0.ɵɵComponentDeclaration<RcRadioGroupComponent, "rc-radio-group", never, { "value": { "alias": "value"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "size": { "alias": "size"; "required": false; }; }, { "valueChange": "valueChange"; }, never, ["*"], true, never>;
|
|
1401
|
+
}
|
|
1402
|
+
/**
|
|
1403
|
+
* A single radio button, always used inside `<rc-radio-group>`.
|
|
1404
|
+
*
|
|
1405
|
+
* @example
|
|
1406
|
+
* ```html
|
|
1407
|
+
* <rc-radio-button value="option-a">Option A</rc-radio-button>
|
|
1408
|
+
* ```
|
|
1409
|
+
*
|
|
1410
|
+
* @input value - The value this button represents (compared to the group value).
|
|
1411
|
+
* @input disabled - Disables this specific button. Default: `false`
|
|
1412
|
+
*/
|
|
1413
|
+
declare class RcRadioButtonComponent implements OnInit, OnDestroy {
|
|
1414
|
+
readonly group: RcRadioGroupComponent | null;
|
|
1415
|
+
private readonly cdr;
|
|
1416
|
+
private groupSub?;
|
|
1417
|
+
/** The value this radio button represents */
|
|
1418
|
+
value: unknown;
|
|
1419
|
+
/** Disable this specific radio button */
|
|
1420
|
+
disabled: boolean;
|
|
1421
|
+
get isChecked(): boolean;
|
|
1422
|
+
get isDisabled(): boolean;
|
|
1423
|
+
ngOnInit(): void;
|
|
1424
|
+
ngOnDestroy(): void;
|
|
1425
|
+
onClick(): void;
|
|
1426
|
+
onKeydown(event: Event): void;
|
|
1427
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<RcRadioButtonComponent, never>;
|
|
1428
|
+
static ɵcmp: i0.ɵɵComponentDeclaration<RcRadioButtonComponent, "rc-radio-button", never, { "value": { "alias": "value"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; }, {}, never, ["*"], true, never>;
|
|
1429
|
+
}
|
|
1430
|
+
|
|
1431
|
+
type RcToggleSize = 'sm' | 'md' | 'lg';
|
|
1432
|
+
/**
|
|
1433
|
+
* A toggle switch for binary on/off state. Supports `[(ngModel)]` and reactive forms.
|
|
1434
|
+
*
|
|
1435
|
+
* @example Basic toggle
|
|
1436
|
+
* ```html
|
|
1437
|
+
* <rc-toggle [(ngModel)]="isEnabled">Enable notifications</rc-toggle>
|
|
1438
|
+
* ```
|
|
1439
|
+
*
|
|
1440
|
+
* @example Pre-checked, labelled
|
|
1441
|
+
* ```html
|
|
1442
|
+
* <rc-toggle [checked]="true" (checkedChange)="onChange($event)">
|
|
1443
|
+
* Dark mode
|
|
1444
|
+
* </rc-toggle>
|
|
1445
|
+
* ```
|
|
1446
|
+
*
|
|
1447
|
+
* @example Small, disabled
|
|
1448
|
+
* ```html
|
|
1449
|
+
* <rc-toggle size="sm" [disabled]="true" [checked]="true">Auto-save</rc-toggle>
|
|
1450
|
+
* ```
|
|
1451
|
+
*
|
|
1452
|
+
* @input checked - Whether the toggle is on. Default: `false`
|
|
1453
|
+
* @input disabled - Disables interaction. Default: `false`
|
|
1454
|
+
* @input size - Toggle size: `'sm'` | `'md'` | `'lg'`. Default: `'md'`
|
|
1455
|
+
* @input labelPosition - Position of the label text. Default: `'right'`
|
|
1456
|
+
* @output checkedChange - Emits the new boolean state on user interaction.
|
|
1457
|
+
*/
|
|
1458
|
+
declare class RcToggleComponent implements ControlValueAccessor {
|
|
1459
|
+
private readonly cdr;
|
|
1460
|
+
/** Whether the toggle is in the on state */
|
|
1461
|
+
checked: boolean;
|
|
1462
|
+
/** Disable interaction */
|
|
1463
|
+
disabled: boolean;
|
|
1464
|
+
/** Toggle size */
|
|
1465
|
+
size: RcToggleSize;
|
|
1466
|
+
/** Position of the label slot */
|
|
1467
|
+
labelPosition: 'left' | 'right';
|
|
1468
|
+
/** Emits the new checked state when toggled */
|
|
1469
|
+
checkedChange: EventEmitter<boolean>;
|
|
1470
|
+
private onChange;
|
|
1471
|
+
private onTouched;
|
|
1472
|
+
toggle(): void;
|
|
1473
|
+
onKeydown(event: Event): void;
|
|
1474
|
+
writeValue(value: boolean): void;
|
|
1475
|
+
registerOnChange(fn: (value: boolean) => void): void;
|
|
1476
|
+
registerOnTouched(fn: () => void): void;
|
|
1477
|
+
setDisabledState(disabled: boolean): void;
|
|
1478
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<RcToggleComponent, never>;
|
|
1479
|
+
static ɵcmp: i0.ɵɵComponentDeclaration<RcToggleComponent, "rc-toggle", never, { "checked": { "alias": "checked"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "size": { "alias": "size"; "required": false; }; "labelPosition": { "alias": "labelPosition"; "required": false; }; }, { "checkedChange": "checkedChange"; }, never, ["*", "*"], true, never>;
|
|
1480
|
+
}
|
|
1481
|
+
|
|
1482
|
+
/** Validation / visual status for a checkbox. */
|
|
1483
|
+
type RcCheckboxStatus = 'default' | 'success' | 'warning' | 'danger';
|
|
1484
|
+
/** Size variant for a checkbox. */
|
|
1485
|
+
type RcCheckboxSize = 'sm' | 'md' | 'lg';
|
|
1486
|
+
/**
|
|
1487
|
+
* A styled checkbox supporting checked, unchecked, and indeterminate states.
|
|
1488
|
+
* Pairs with the `.rc-field` helper classes and fully integrates with
|
|
1489
|
+
* `[(ngModel)]` and Angular Reactive Forms.
|
|
1490
|
+
*
|
|
1491
|
+
* @example Basic
|
|
1492
|
+
* ```html
|
|
1493
|
+
* <rc-checkbox [(ngModel)]="accepted">Accept terms</rc-checkbox>
|
|
1494
|
+
* ```
|
|
1495
|
+
*
|
|
1496
|
+
* @example Indeterminate (e.g. "select all" row)
|
|
1497
|
+
* ```html
|
|
1498
|
+
* <rc-checkbox [checked]="someSelected" [indeterminate]="!allSelected"
|
|
1499
|
+
* (checkedChange)="toggleAll($event)">
|
|
1500
|
+
* Select all
|
|
1501
|
+
* </rc-checkbox>
|
|
1502
|
+
* ```
|
|
1503
|
+
*
|
|
1504
|
+
* @example Status variants
|
|
1505
|
+
* ```html
|
|
1506
|
+
* <rc-checkbox status="danger" [(ngModel)]="consented">
|
|
1507
|
+
* You must accept the terms
|
|
1508
|
+
* </rc-checkbox>
|
|
1509
|
+
* ```
|
|
1510
|
+
*
|
|
1511
|
+
* @example Sizes
|
|
1512
|
+
* ```html
|
|
1513
|
+
* <rc-checkbox size="sm">Small</rc-checkbox>
|
|
1514
|
+
* <rc-checkbox size="md">Medium</rc-checkbox>
|
|
1515
|
+
* <rc-checkbox size="lg">Large</rc-checkbox>
|
|
1516
|
+
* ```
|
|
1517
|
+
*
|
|
1518
|
+
* @example Disabled
|
|
1519
|
+
* ```html
|
|
1520
|
+
* <rc-checkbox [disabled]="true" [checked]="true">Read-only option</rc-checkbox>
|
|
1521
|
+
* ```
|
|
1522
|
+
*
|
|
1523
|
+
* @example No label (icon-only)
|
|
1524
|
+
* ```html
|
|
1525
|
+
* <rc-checkbox [(ngModel)]="row.selected" aria-label="Select row"></rc-checkbox>
|
|
1526
|
+
* ```
|
|
1527
|
+
*/
|
|
1528
|
+
declare class RcCheckboxComponent implements ControlValueAccessor {
|
|
1529
|
+
private readonly _cdr;
|
|
1530
|
+
_nativeInput: ElementRef<HTMLInputElement>;
|
|
1531
|
+
/** Whether the checkbox is checked. */
|
|
1532
|
+
checked: boolean;
|
|
1533
|
+
/**
|
|
1534
|
+
* Puts the checkbox into an indeterminate (partially-selected) state.
|
|
1535
|
+
* Ignored when `checked` is `true`.
|
|
1536
|
+
*/
|
|
1537
|
+
indeterminate: boolean;
|
|
1538
|
+
/** Disables interaction. */
|
|
1539
|
+
disabled: boolean;
|
|
1540
|
+
/** Validation / visual status applied to the box border / fill. */
|
|
1541
|
+
status: RcCheckboxStatus;
|
|
1542
|
+
/** Controls the bounding box and font size. */
|
|
1543
|
+
size: RcCheckboxSize;
|
|
1544
|
+
/** Position of the label slot relative to the checkbox box. */
|
|
1545
|
+
labelPosition: 'left' | 'right';
|
|
1546
|
+
/**
|
|
1547
|
+
* Forwarded to the hidden native `<input>` as `aria-label`.
|
|
1548
|
+
* Use when there is no visible label text (e.g. a "select row" checkbox).
|
|
1549
|
+
*/
|
|
1550
|
+
ariaLabel: string;
|
|
1551
|
+
/** Emits the new `checked` boolean when the user toggles the checkbox. */
|
|
1552
|
+
readonly checkedChange: EventEmitter<boolean>;
|
|
1553
|
+
_onTouched: () => void;
|
|
1554
|
+
private _onChange;
|
|
1555
|
+
writeValue(value: boolean): void;
|
|
1556
|
+
registerOnChange(fn: (v: boolean) => void): void;
|
|
1557
|
+
registerOnTouched(fn: () => void): void;
|
|
1558
|
+
setDisabledState(isDisabled: boolean): void;
|
|
1559
|
+
/** @internal Called when the hidden native input changes. */
|
|
1560
|
+
_onNativeChange(event: Event): void;
|
|
1561
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<RcCheckboxComponent, never>;
|
|
1562
|
+
static ɵcmp: i0.ɵɵComponentDeclaration<RcCheckboxComponent, "rc-checkbox", never, { "checked": { "alias": "checked"; "required": false; }; "indeterminate": { "alias": "indeterminate"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "status": { "alias": "status"; "required": false; }; "size": { "alias": "size"; "required": false; }; "labelPosition": { "alias": "labelPosition"; "required": false; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; }; }, { "checkedChange": "checkedChange"; }, never, ["*", "*"], true, never>;
|
|
1563
|
+
}
|
|
1564
|
+
|
|
1565
|
+
/** Validation / visual status for a select field. */
|
|
1566
|
+
type RcSelectStatus = 'default' | 'success' | 'warning' | 'danger';
|
|
1567
|
+
/** Size variant for a select trigger. */
|
|
1568
|
+
type RcSelectSize = 'sm' | 'md' | 'lg';
|
|
1569
|
+
/**
|
|
1570
|
+
* A single selectable option for `<rc-select>`.
|
|
1571
|
+
*
|
|
1572
|
+
* Declare it as a child of `<rc-select>`. The text content is used as the
|
|
1573
|
+
* display label unless an explicit `label` input is provided.
|
|
1574
|
+
*
|
|
1575
|
+
* @example Basic option
|
|
1576
|
+
* ```html
|
|
1577
|
+
* <rc-option value="us">United States</rc-option>
|
|
1578
|
+
* ```
|
|
1579
|
+
*
|
|
1580
|
+
* @example Disabled option
|
|
1581
|
+
* ```html
|
|
1582
|
+
* <rc-option value="legacy" [disabled]="true">Legacy (unavailable)</rc-option>
|
|
1583
|
+
* ```
|
|
1584
|
+
*/
|
|
1585
|
+
declare class RcOptionComponent {
|
|
1586
|
+
/** The value this option represents. */
|
|
1587
|
+
value: unknown;
|
|
1588
|
+
/** Explicit display label. When omitted, the element's text content is used. */
|
|
1589
|
+
label: string;
|
|
1590
|
+
/** Disables this individual option so it cannot be selected. */
|
|
1591
|
+
disabled: boolean;
|
|
1592
|
+
private readonly _el;
|
|
1593
|
+
/** @internal Resolved display label, used by the parent panel template. */
|
|
1594
|
+
get _displayLabel(): string;
|
|
1595
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<RcOptionComponent, never>;
|
|
1596
|
+
static ɵcmp: i0.ɵɵComponentDeclaration<RcOptionComponent, "rc-option", never, { "value": { "alias": "value"; "required": false; }; "label": { "alias": "label"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; }, {}, never, ["*"], true, never>;
|
|
1597
|
+
}
|
|
1598
|
+
/**
|
|
1599
|
+
* A styled dropdown select that supports both single and multi-select modes.
|
|
1600
|
+
* Built on Angular CDK Overlay for reliable positioning. Fully integrates with
|
|
1601
|
+
* `[(ngModel)]` and Angular Reactive Forms via `ControlValueAccessor`.
|
|
1602
|
+
*
|
|
1603
|
+
* Declare `<rc-option>` elements as direct children to populate the dropdown.
|
|
1604
|
+
*
|
|
1605
|
+
* @example Single select with ngModel
|
|
1606
|
+
* ```html
|
|
1607
|
+
* <rc-select placeholder="Choose a role" [(ngModel)]="role">
|
|
1608
|
+
* <rc-option value="admin">Admin</rc-option>
|
|
1609
|
+
* <rc-option value="editor">Editor</rc-option>
|
|
1610
|
+
* <rc-option value="viewer">Viewer</rc-option>
|
|
1611
|
+
* </rc-select>
|
|
1612
|
+
* ```
|
|
1613
|
+
*
|
|
1614
|
+
* @example Multi-select
|
|
1615
|
+
* ```html
|
|
1616
|
+
* <rc-select [multiple]="true" placeholder="Select frameworks" [(ngModel)]="frameworks">
|
|
1617
|
+
* <rc-option value="angular">Angular</rc-option>
|
|
1618
|
+
* <rc-option value="react">React</rc-option>
|
|
1619
|
+
* <rc-option value="vue">Vue</rc-option>
|
|
1620
|
+
* </rc-select>
|
|
1621
|
+
* ```
|
|
1622
|
+
*
|
|
1623
|
+
* @example Validation status
|
|
1624
|
+
* ```html
|
|
1625
|
+
* <rc-select status="danger" [(ngModel)]="country">
|
|
1626
|
+
* <rc-option value="us">United States</rc-option>
|
|
1627
|
+
* <rc-option value="gb">United Kingdom</rc-option>
|
|
1628
|
+
* </rc-select>
|
|
1629
|
+
* ```
|
|
1630
|
+
*
|
|
1631
|
+
* @example Disabled
|
|
1632
|
+
* ```html
|
|
1633
|
+
* <rc-select [disabled]="true" [ngModel]="'admin'">
|
|
1634
|
+
* <rc-option value="admin">Admin</rc-option>
|
|
1635
|
+
* </rc-select>
|
|
1636
|
+
* ```
|
|
1637
|
+
*
|
|
1638
|
+
* @example Inside rc-field with label and hint
|
|
1639
|
+
* ```html
|
|
1640
|
+
* <div class="rc-field">
|
|
1641
|
+
* <label class="rc-field-label">Country</label>
|
|
1642
|
+
* <rc-select placeholder="Pick a country" [(ngModel)]="country" status="success">
|
|
1643
|
+
* <rc-option value="us">United States</rc-option>
|
|
1644
|
+
* <rc-option value="ca">Canada</rc-option>
|
|
1645
|
+
* </rc-select>
|
|
1646
|
+
* <span class="rc-field-success-hint">Great choice!</span>
|
|
1647
|
+
* </div>
|
|
1648
|
+
* ```
|
|
1649
|
+
*/
|
|
1650
|
+
declare class RcSelectComponent implements ControlValueAccessor, AfterContentInit, OnDestroy {
|
|
1651
|
+
/** Placeholder text shown when no value is selected. */
|
|
1652
|
+
placeholder: string;
|
|
1653
|
+
/** When `true`, multiple values can be selected (value is an array). */
|
|
1654
|
+
multiple: boolean;
|
|
1655
|
+
/** Disables the entire select control. */
|
|
1656
|
+
disabled: boolean;
|
|
1657
|
+
/** Validation / visual status of the field. */
|
|
1658
|
+
status: RcSelectStatus;
|
|
1659
|
+
/** Controls the height and font-size of the trigger. */
|
|
1660
|
+
size: RcSelectSize;
|
|
1661
|
+
/** Emits the selected value (or array of values) whenever the selection changes. */
|
|
1662
|
+
readonly valueChange: EventEmitter<unknown>;
|
|
1663
|
+
private readonly _panelTpl;
|
|
1664
|
+
private readonly _optionList;
|
|
1665
|
+
private readonly _overlay;
|
|
1666
|
+
private readonly _vcr;
|
|
1667
|
+
private readonly _el;
|
|
1668
|
+
private readonly _cdr;
|
|
1669
|
+
private _overlayRef;
|
|
1670
|
+
private _portal;
|
|
1671
|
+
/** @internal */
|
|
1672
|
+
_open: boolean;
|
|
1673
|
+
/** @internal */
|
|
1674
|
+
_focused: boolean;
|
|
1675
|
+
/** @internal Index of the keyboard-focused option in the open panel. */
|
|
1676
|
+
_activeIndex: number;
|
|
1677
|
+
private _value;
|
|
1678
|
+
private _onChange;
|
|
1679
|
+
private _onTouched;
|
|
1680
|
+
/** @internal Flat array of current option instances. */
|
|
1681
|
+
get _options(): RcOptionComponent[];
|
|
1682
|
+
/** @internal Whether a non-empty value is currently set. */
|
|
1683
|
+
get _hasValue(): boolean;
|
|
1684
|
+
/** @internal Text to display in the trigger. */
|
|
1685
|
+
get _displayValue(): string;
|
|
1686
|
+
/** @internal Whether `value` is in the current selection. */
|
|
1687
|
+
_isSelected(value: unknown): boolean;
|
|
1688
|
+
ngAfterContentInit(): void;
|
|
1689
|
+
ngOnDestroy(): void;
|
|
1690
|
+
/** @internal */
|
|
1691
|
+
_togglePanel(): void;
|
|
1692
|
+
/** @internal */
|
|
1693
|
+
_openPanel(): void;
|
|
1694
|
+
/** @internal */
|
|
1695
|
+
_closePanel(): void;
|
|
1696
|
+
/** @internal Called when the user clicks an option in the panel. */
|
|
1697
|
+
_onOptionClick(value: unknown, event: Event): void;
|
|
1698
|
+
/** @internal Selects or toggles a value. */
|
|
1699
|
+
_selectValue(value: unknown): void;
|
|
1700
|
+
/** @internal */
|
|
1701
|
+
_onKeydown(event: KeyboardEvent): void;
|
|
1702
|
+
/** @internal */
|
|
1703
|
+
_onFocus(): void;
|
|
1704
|
+
/** @internal */
|
|
1705
|
+
_onBlur(): void;
|
|
1706
|
+
writeValue(value: unknown): void;
|
|
1707
|
+
registerOnChange(fn: (v: unknown) => void): void;
|
|
1708
|
+
registerOnTouched(fn: () => void): void;
|
|
1709
|
+
setDisabledState(isDisabled: boolean): void;
|
|
1710
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<RcSelectComponent, never>;
|
|
1711
|
+
static ɵcmp: i0.ɵɵComponentDeclaration<RcSelectComponent, "rc-select", never, { "placeholder": { "alias": "placeholder"; "required": false; }; "multiple": { "alias": "multiple"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "status": { "alias": "status"; "required": false; }; "size": { "alias": "size"; "required": false; }; }, { "valueChange": "valueChange"; }, ["_optionList"], ["*"], true, never>;
|
|
1712
|
+
}
|
|
1713
|
+
|
|
1714
|
+
/** Injection token that provides the parent `RcAccordionComponent` to items. */
|
|
1715
|
+
declare const RC_ACCORDION: InjectionToken<RcAccordionComponent>;
|
|
1716
|
+
/** Visual style for the accordion. */
|
|
1717
|
+
type RcAccordionVariant = 'default' | 'filled';
|
|
1718
|
+
/**
|
|
1719
|
+
* A single expandable panel inside an `<rc-accordion>`.
|
|
1720
|
+
*
|
|
1721
|
+
* @example
|
|
1722
|
+
* ```html
|
|
1723
|
+
* <rc-accordion>
|
|
1724
|
+
* <rc-accordion-item title="What is Resolve?">
|
|
1725
|
+
* Resolve is an Angular component library.
|
|
1726
|
+
* </rc-accordion-item>
|
|
1727
|
+
* </rc-accordion>
|
|
1728
|
+
* ```
|
|
1729
|
+
*/
|
|
1730
|
+
declare class RcAccordionItemComponent {
|
|
1731
|
+
private readonly _accordion;
|
|
1732
|
+
/** Header title of this panel. */
|
|
1733
|
+
title: string;
|
|
1734
|
+
/** Whether this panel starts expanded. */
|
|
1735
|
+
set expanded(v: boolean);
|
|
1736
|
+
/** Disables expanding / collapsing this panel. */
|
|
1737
|
+
disabled: boolean;
|
|
1738
|
+
/** Emits the new expanded state when the user opens or closes the panel. */
|
|
1739
|
+
readonly expandedChange: EventEmitter<boolean>;
|
|
1740
|
+
/** @internal */
|
|
1741
|
+
readonly _expanded: i0.WritableSignal<boolean>;
|
|
1742
|
+
/** @internal */
|
|
1743
|
+
_toggle(): void;
|
|
1744
|
+
/** @internal */
|
|
1745
|
+
_setExpanded(value: boolean): void;
|
|
1746
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<RcAccordionItemComponent, never>;
|
|
1747
|
+
static ɵcmp: i0.ɵɵComponentDeclaration<RcAccordionItemComponent, "rc-accordion-item", never, { "title": { "alias": "title"; "required": true; }; "expanded": { "alias": "expanded"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; }, { "expandedChange": "expandedChange"; }, never, ["*"], true, never>;
|
|
1748
|
+
}
|
|
1749
|
+
/**
|
|
1750
|
+
* Container that groups `<rc-accordion-item>` panels.
|
|
1751
|
+
* By default only one item is open at a time; set `multiple` to allow multiple.
|
|
1752
|
+
*
|
|
1753
|
+
* @example Basic
|
|
1754
|
+
* ```html
|
|
1755
|
+
* <rc-accordion>
|
|
1756
|
+
* <rc-accordion-item title="Section 1">Content 1</rc-accordion-item>
|
|
1757
|
+
* <rc-accordion-item title="Section 2">Content 2</rc-accordion-item>
|
|
1758
|
+
* </rc-accordion>
|
|
1759
|
+
* ```
|
|
1760
|
+
*
|
|
1761
|
+
* @example Allow multiple panels open
|
|
1762
|
+
* ```html
|
|
1763
|
+
* <rc-accordion [multiple]="true">...</rc-accordion>
|
|
1764
|
+
* ```
|
|
1765
|
+
*
|
|
1766
|
+
* @example Filled variant
|
|
1767
|
+
* ```html
|
|
1768
|
+
* <rc-accordion variant="filled">...</rc-accordion>
|
|
1769
|
+
* ```
|
|
1770
|
+
*/
|
|
1771
|
+
declare class RcAccordionComponent {
|
|
1772
|
+
/** Allow multiple panels to be open simultaneously. Default: `false`. */
|
|
1773
|
+
multiple: boolean;
|
|
1774
|
+
/** Visual style variant. Default: `'default'`. */
|
|
1775
|
+
variant: RcAccordionVariant;
|
|
1776
|
+
private _items;
|
|
1777
|
+
/** @internal Called by a child item when it wants to open. */
|
|
1778
|
+
_open(item: RcAccordionItemComponent): void;
|
|
1779
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<RcAccordionComponent, never>;
|
|
1780
|
+
static ɵcmp: i0.ɵɵComponentDeclaration<RcAccordionComponent, "rc-accordion", never, { "multiple": { "alias": "multiple"; "required": false; }; "variant": { "alias": "variant"; "required": false; }; }, {}, ["_items"], ["*"], true, never>;
|
|
1781
|
+
}
|
|
1782
|
+
|
|
1783
|
+
/** Size variant for the slider track and thumb. */
|
|
1784
|
+
type RcSliderSize = 'sm' | 'md' | 'lg';
|
|
1785
|
+
/** Validation / visual status for the slider fill and thumb. */
|
|
1786
|
+
type RcSliderStatus = 'default' | 'success' | 'warning' | 'danger';
|
|
1787
|
+
/**
|
|
1788
|
+
* A range slider for selecting a numeric value between `min` and `max`.
|
|
1789
|
+
* Integrates with `[(ngModel)]` and Angular Reactive Forms via ControlValueAccessor.
|
|
1790
|
+
*
|
|
1791
|
+
* @example Basic
|
|
1792
|
+
* ```html
|
|
1793
|
+
* <rc-slider [(ngModel)]="volume" [min]="0" [max]="100"></rc-slider>
|
|
1794
|
+
* ```
|
|
1795
|
+
*
|
|
1796
|
+
* @example With value label and unit
|
|
1797
|
+
* ```html
|
|
1798
|
+
* <rc-slider [(ngModel)]="opacity" [min]="0" [max]="1" [step]="0.01"
|
|
1799
|
+
* [showValue]="true" unit=""></rc-slider>
|
|
1800
|
+
* ```
|
|
1801
|
+
*
|
|
1802
|
+
* @example With tick marks
|
|
1803
|
+
* ```html
|
|
1804
|
+
* <rc-slider [(ngModel)]="rating" [min]="1" [max]="5" [step]="1"
|
|
1805
|
+
* [showTicks]="true" [showValue]="true"></rc-slider>
|
|
1806
|
+
* ```
|
|
1807
|
+
*
|
|
1808
|
+
* @example Disabled
|
|
1809
|
+
* ```html
|
|
1810
|
+
* <rc-slider [value]="50" [disabled]="true"></rc-slider>
|
|
1811
|
+
* ```
|
|
1812
|
+
*/
|
|
1813
|
+
declare class RcSliderComponent implements ControlValueAccessor, OnChanges {
|
|
1814
|
+
private readonly _cdr;
|
|
1815
|
+
/** Current numeric value. */
|
|
1816
|
+
value: number;
|
|
1817
|
+
/** Minimum value. Default: `0`. */
|
|
1818
|
+
min: number;
|
|
1819
|
+
/** Maximum value. Default: `100`. */
|
|
1820
|
+
max: number;
|
|
1821
|
+
/** Step increment. Default: `1`. */
|
|
1822
|
+
step: number;
|
|
1823
|
+
/** Disables the slider. Default: `false`. */
|
|
1824
|
+
disabled: boolean;
|
|
1825
|
+
/** Size of the track and thumb. Default: `'md'`. */
|
|
1826
|
+
size: RcSliderSize;
|
|
1827
|
+
/** Show the current value and min/max labels. Default: `false`. */
|
|
1828
|
+
showValue: boolean;
|
|
1829
|
+
/** String appended to the value label (e.g. `'%'`, `' px'`). Default: `''`. */
|
|
1830
|
+
unit: string;
|
|
1831
|
+
/** Show tick marks at each `step` interval (for small ranges). Default: `false`. */
|
|
1832
|
+
showTicks: boolean;
|
|
1833
|
+
/** Validation / visual status applied to the fill and thumb. Default: `'default'`. */
|
|
1834
|
+
status: RcSliderStatus;
|
|
1835
|
+
/** Emits the new value when the user drags the thumb. */
|
|
1836
|
+
readonly valueChange: EventEmitter<number>;
|
|
1837
|
+
readonly _value: i0.WritableSignal<number>;
|
|
1838
|
+
readonly _fillPercent: i0.Signal<number>;
|
|
1839
|
+
readonly _ticks: i0.Signal<{
|
|
1840
|
+
value: number;
|
|
1841
|
+
percent: number;
|
|
1842
|
+
}[]>;
|
|
1843
|
+
ngOnChanges(): void;
|
|
1844
|
+
_onTouched: () => void;
|
|
1845
|
+
private _onChange;
|
|
1846
|
+
writeValue(value: number): void;
|
|
1847
|
+
registerOnChange(fn: (v: number) => void): void;
|
|
1848
|
+
registerOnTouched(fn: () => void): void;
|
|
1849
|
+
setDisabledState(isDisabled: boolean): void;
|
|
1850
|
+
/** @internal */
|
|
1851
|
+
_onInput(event: Event): void;
|
|
1852
|
+
private _clamp;
|
|
1853
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<RcSliderComponent, never>;
|
|
1854
|
+
static ɵcmp: i0.ɵɵComponentDeclaration<RcSliderComponent, "rc-slider", never, { "value": { "alias": "value"; "required": false; }; "min": { "alias": "min"; "required": false; }; "max": { "alias": "max"; "required": false; }; "step": { "alias": "step"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "size": { "alias": "size"; "required": false; }; "showValue": { "alias": "showValue"; "required": false; }; "unit": { "alias": "unit"; "required": false; }; "showTicks": { "alias": "showTicks"; "required": false; }; "status": { "alias": "status"; "required": false; }; }, { "valueChange": "valueChange"; }, never, never, true, never>;
|
|
1855
|
+
}
|
|
1856
|
+
|
|
1857
|
+
/** Validation / visual status — mirrors `RcInputStatus`. */
|
|
1858
|
+
type RcAutocompleteStatus = RcInputStatus;
|
|
1859
|
+
/** Size variant — mirrors `RcInputSize`. */
|
|
1860
|
+
type RcAutocompleteSize = RcInputSize;
|
|
1861
|
+
/**
|
|
1862
|
+
* A single suggestion in the autocomplete dropdown.
|
|
1863
|
+
*
|
|
1864
|
+
* Pass `value` / `label` objects **or** a plain `string[]` to the `options`
|
|
1865
|
+
* input — strings are auto-converted so `value === label`.
|
|
1866
|
+
*/
|
|
1867
|
+
interface RcAutocompleteOption {
|
|
1868
|
+
/** The opaque value emitted to the model when this option is selected. */
|
|
1869
|
+
value: unknown;
|
|
1870
|
+
/** Display label rendered in the dropdown and filled into the input. */
|
|
1871
|
+
label: string;
|
|
1872
|
+
/** When `true` this option cannot be selected. */
|
|
1873
|
+
disabled?: boolean;
|
|
1874
|
+
}
|
|
1875
|
+
/**
|
|
1876
|
+
* A text input that shows a filtered suggestion dropdown as the user types.
|
|
1877
|
+
* Combines the `rcInput` styling with a CDK Overlay panel that is visually
|
|
1878
|
+
* consistent with `<rc-select>`.
|
|
1879
|
+
*
|
|
1880
|
+
* Pass options via the `options` input. Built-in filtering can be replaced by
|
|
1881
|
+
* setting `filterFn`.
|
|
1882
|
+
*
|
|
1883
|
+
* Implements `ControlValueAccessor` — works with `[(ngModel)]` and Reactive
|
|
1884
|
+
* Forms. The bound value is the selected option's `value` (or the raw typed
|
|
1885
|
+
* string when no matching option exists).
|
|
1886
|
+
*
|
|
1887
|
+
* @example Basic
|
|
1888
|
+
* ```html
|
|
1889
|
+
* <rc-autocomplete
|
|
1890
|
+
* placeholder="Search countries…"
|
|
1891
|
+
* [options]="countries"
|
|
1892
|
+
* [(ngModel)]="selectedCountry"
|
|
1893
|
+
* ></rc-autocomplete>
|
|
1894
|
+
* ```
|
|
1895
|
+
*
|
|
1896
|
+
* @example String array
|
|
1897
|
+
* ```html
|
|
1898
|
+
* <rc-autocomplete [options]="['Angular', 'React', 'Vue']"
|
|
1899
|
+
* [(ngModel)]="framework"></rc-autocomplete>
|
|
1900
|
+
* ```
|
|
1901
|
+
*
|
|
1902
|
+
* @example Validation status
|
|
1903
|
+
* ```html
|
|
1904
|
+
* <rc-autocomplete status="danger" [options]="cities"
|
|
1905
|
+
* [(ngModel)]="city"></rc-autocomplete>
|
|
1906
|
+
* ```
|
|
1907
|
+
*
|
|
1908
|
+
* @example Disabled
|
|
1909
|
+
* ```html
|
|
1910
|
+
* <rc-autocomplete [disabled]="true" [options]="items" [(ngModel)]="val"></rc-autocomplete>
|
|
1911
|
+
* ```
|
|
1912
|
+
*
|
|
1913
|
+
* @example Custom filter
|
|
1914
|
+
* ```html
|
|
1915
|
+
* <rc-autocomplete [options]="opts" [filterFn]="myFilter" [(ngModel)]="val"></rc-autocomplete>
|
|
1916
|
+
* ```
|
|
1917
|
+
*/
|
|
1918
|
+
declare class RcAutocompleteComponent implements ControlValueAccessor, OnChanges, OnDestroy {
|
|
1919
|
+
private readonly _cdr;
|
|
1920
|
+
private readonly _overlay;
|
|
1921
|
+
private readonly _vcr;
|
|
1922
|
+
private readonly _host;
|
|
1923
|
+
private _inputEl;
|
|
1924
|
+
private readonly _panelTpl;
|
|
1925
|
+
/**
|
|
1926
|
+
* Array of options shown in the suggestion dropdown.
|
|
1927
|
+
* Accepts plain `string[]` (auto-converted) or `RcAutocompleteOption[]`.
|
|
1928
|
+
*/
|
|
1929
|
+
set options(v: string[] | RcAutocompleteOption[]);
|
|
1930
|
+
/** Placeholder text shown when the input is empty. */
|
|
1931
|
+
placeholder: string;
|
|
1932
|
+
/** Text shown in the dropdown when no options match the query. */
|
|
1933
|
+
noResultsText: string;
|
|
1934
|
+
/** ARIA label for the clear (×) button. */
|
|
1935
|
+
clearAriaLabel: string;
|
|
1936
|
+
/** Disables the control. */
|
|
1937
|
+
disabled: boolean;
|
|
1938
|
+
/** Validation / visual status applied to the input border and shadow. */
|
|
1939
|
+
status: RcAutocompleteStatus;
|
|
1940
|
+
/** Controls the height and font-size of the input. */
|
|
1941
|
+
size: RcAutocompleteSize;
|
|
1942
|
+
/**
|
|
1943
|
+
* Custom filter predicate. Receives the current query and an option; return
|
|
1944
|
+
* `true` to include the option in the dropdown.
|
|
1945
|
+
*
|
|
1946
|
+
* Defaults to a case-insensitive `includes` match on `option.label`.
|
|
1947
|
+
*/
|
|
1948
|
+
filterFn: (query: string, option: RcAutocompleteOption) => boolean;
|
|
1949
|
+
/**
|
|
1950
|
+
* Emits the selected `RcAutocompleteOption` when the user picks a suggestion.
|
|
1951
|
+
* Note: the `[(ngModel)]` / formControl value is the option's `value` field.
|
|
1952
|
+
*/
|
|
1953
|
+
readonly selectionChange: EventEmitter<RcAutocompleteOption>;
|
|
1954
|
+
/** @internal Text currently shown in the native input. */
|
|
1955
|
+
readonly _inputText: i0.WritableSignal<string>;
|
|
1956
|
+
/** @internal The opaque model value (option.value). */
|
|
1957
|
+
readonly _modelValue: i0.WritableSignal<unknown>;
|
|
1958
|
+
/** @internal All normalised options. */
|
|
1959
|
+
readonly _allOptions: i0.WritableSignal<RcAutocompleteOption[]>;
|
|
1960
|
+
/** @internal Filtered options based on current input text. */
|
|
1961
|
+
readonly _filtered: i0.Signal<RcAutocompleteOption[]>;
|
|
1962
|
+
/** @internal Whether the panel is currently open. */
|
|
1963
|
+
_open: boolean;
|
|
1964
|
+
/** @internal Keyboard-focused option index in the open panel. */
|
|
1965
|
+
_activeIndex: number;
|
|
1966
|
+
private _overlayRef;
|
|
1967
|
+
private _portal;
|
|
1968
|
+
private _onChange;
|
|
1969
|
+
_onTouched: () => void;
|
|
1970
|
+
ngOnChanges(): void;
|
|
1971
|
+
ngOnDestroy(): void;
|
|
1972
|
+
writeValue(value: unknown): void;
|
|
1973
|
+
registerOnChange(fn: (v: unknown) => void): void;
|
|
1974
|
+
registerOnTouched(fn: () => void): void;
|
|
1975
|
+
setDisabledState(isDisabled: boolean): void;
|
|
1976
|
+
/** @internal */
|
|
1977
|
+
_onInput(event: Event): void;
|
|
1978
|
+
/** @internal */
|
|
1979
|
+
_onFocus(): void;
|
|
1980
|
+
/** @internal */
|
|
1981
|
+
_onBlur(): void;
|
|
1982
|
+
/** @internal */
|
|
1983
|
+
_clear(): void;
|
|
1984
|
+
/** @internal */
|
|
1985
|
+
_selectOption(opt: RcAutocompleteOption): void;
|
|
1986
|
+
/** @internal */
|
|
1987
|
+
_onKeydown(event: KeyboardEvent): void;
|
|
1988
|
+
private _openPanel;
|
|
1989
|
+
/** @internal */
|
|
1990
|
+
_closePanel(): void;
|
|
1991
|
+
private _normalise;
|
|
1992
|
+
private _setInputNative;
|
|
1993
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<RcAutocompleteComponent, never>;
|
|
1994
|
+
static ɵcmp: i0.ɵɵComponentDeclaration<RcAutocompleteComponent, "rc-autocomplete", never, { "options": { "alias": "options"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "noResultsText": { "alias": "noResultsText"; "required": false; }; "clearAriaLabel": { "alias": "clearAriaLabel"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "status": { "alias": "status"; "required": false; }; "size": { "alias": "size"; "required": false; }; "filterFn": { "alias": "filterFn"; "required": false; }; }, { "selectionChange": "selectionChange"; }, never, never, true, never>;
|
|
1995
|
+
}
|
|
1996
|
+
|
|
1997
|
+
/**
|
|
1998
|
+
* Controls how the sidenav interacts with the main content.
|
|
1999
|
+
*
|
|
2000
|
+
* - `'over'` — slides over the main content; a backdrop appears behind it.
|
|
2001
|
+
* - `'push'` — pushes the main content to the side; a backdrop appears.
|
|
2002
|
+
* - `'side'` — sits permanently adjacent to the main content; no backdrop.
|
|
2003
|
+
*/
|
|
2004
|
+
type RcSidenavMode = 'over' | 'push' | 'side';
|
|
2005
|
+
/** Which edge of the container the sidenav appears on. */
|
|
2006
|
+
type RcSidenavPosition = 'start' | 'end';
|
|
2007
|
+
/** @internal contract used for sidenav ↔ container communication */
|
|
2008
|
+
interface RcSidenavContainerRef {
|
|
2009
|
+
_register(sidenav: RcSidenavComponent): void;
|
|
2010
|
+
_deregister(sidenav: RcSidenavComponent): void;
|
|
2011
|
+
_update(): void;
|
|
2012
|
+
}
|
|
2013
|
+
/** @internal injection token that provides the parent container to child sidenavs */
|
|
2014
|
+
declare const RC_SIDENAV_CONTAINER: InjectionToken<RcSidenavContainerRef>;
|
|
2015
|
+
/**
|
|
2016
|
+
* Wraps the main content area inside an `<rc-sidenav-container>`.
|
|
2017
|
+
*
|
|
2018
|
+
* Using this wrapper is optional — any content not matched by
|
|
2019
|
+
* `<rc-sidenav>` will fall into the default `<ng-content>` slot.
|
|
2020
|
+
* However using this component enables correct scroll isolation.
|
|
2021
|
+
*
|
|
2022
|
+
* @example
|
|
2023
|
+
* ```html
|
|
2024
|
+
* <rc-sidenav-container>
|
|
2025
|
+
* <rc-sidenav>Navigation content</rc-sidenav>
|
|
2026
|
+
* <rc-sidenav-content>
|
|
2027
|
+
* <main>Page content</main>
|
|
2028
|
+
* </rc-sidenav-content>
|
|
2029
|
+
* </rc-sidenav-container>
|
|
2030
|
+
* ```
|
|
2031
|
+
*/
|
|
2032
|
+
declare class RcSidenavContentComponent {
|
|
2033
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<RcSidenavContentComponent, never>;
|
|
2034
|
+
static ɵcmp: i0.ɵɵComponentDeclaration<RcSidenavContentComponent, "rc-sidenav-content", never, {}, {}, never, ["*"], true, never>;
|
|
2035
|
+
}
|
|
2036
|
+
/**
|
|
2037
|
+
* A sliding side panel — the inner child of `<rc-sidenav-container>`.
|
|
2038
|
+
*
|
|
2039
|
+
* Place navigation links, filters, or any auxiliary content inside.
|
|
2040
|
+
* Open and close programmatically via the `open()`, `close()` and `toggle()`
|
|
2041
|
+
* methods, or bind `[(opened)]`.
|
|
2042
|
+
*
|
|
2043
|
+
* @example Over mode (default — panel slides over content)
|
|
2044
|
+
* ```html
|
|
2045
|
+
* <rc-sidenav-container>
|
|
2046
|
+
* <rc-sidenav #drawer>
|
|
2047
|
+
* <nav>Links here</nav>
|
|
2048
|
+
* </rc-sidenav>
|
|
2049
|
+
* <rc-sidenav-content>
|
|
2050
|
+
* <button (click)="drawer.toggle()">Menu</button>
|
|
2051
|
+
* <router-outlet></router-outlet>
|
|
2052
|
+
* </rc-sidenav-content>
|
|
2053
|
+
* </rc-sidenav-container>
|
|
2054
|
+
* ```
|
|
2055
|
+
*
|
|
2056
|
+
* @example Side mode (permanent)
|
|
2057
|
+
* ```html
|
|
2058
|
+
* <rc-sidenav-container style="height: 100vh">
|
|
2059
|
+
* <rc-sidenav mode="side" [opened]="true">
|
|
2060
|
+
* <nav>Sidebar</nav>
|
|
2061
|
+
* </rc-sidenav>
|
|
2062
|
+
* <rc-sidenav-content>Main content</rc-sidenav-content>
|
|
2063
|
+
* </rc-sidenav-container>
|
|
2064
|
+
* ```
|
|
2065
|
+
*
|
|
2066
|
+
* @example Push mode (panel pushes content aside)
|
|
2067
|
+
* ```html
|
|
2068
|
+
* <rc-sidenav-container>
|
|
2069
|
+
* <rc-sidenav #nav mode="push">Filters</rc-sidenav>
|
|
2070
|
+
* <rc-sidenav-content>
|
|
2071
|
+
* <button (click)="nav.toggle()">Toggle filters</button>
|
|
2072
|
+
* </rc-sidenav-content>
|
|
2073
|
+
* </rc-sidenav-container>
|
|
2074
|
+
* ```
|
|
2075
|
+
*
|
|
2076
|
+
* @example End position
|
|
2077
|
+
* ```html
|
|
2078
|
+
* <rc-sidenav position="end" mode="over">Details panel</rc-sidenav>
|
|
2079
|
+
* ```
|
|
2080
|
+
*/
|
|
2081
|
+
declare class RcSidenavComponent implements OnInit, OnDestroy {
|
|
2082
|
+
readonly _el: ElementRef<any>;
|
|
2083
|
+
private readonly _cdr;
|
|
2084
|
+
private readonly _container;
|
|
2085
|
+
/**
|
|
2086
|
+
* Interaction mode:
|
|
2087
|
+
* - `'over'` (default) — panel floats above content; backdrop shown.
|
|
2088
|
+
* - `'push'` — panel pushes the content; backdrop shown.
|
|
2089
|
+
* - `'side'` — panel sits beside the content; no backdrop.
|
|
2090
|
+
*/
|
|
2091
|
+
mode: RcSidenavMode;
|
|
2092
|
+
/** Which edge to attach to. Default: `'start'` (left in LTR). */
|
|
2093
|
+
position: RcSidenavPosition;
|
|
2094
|
+
/**
|
|
2095
|
+
* Whether clicking the backdrop or pressing Escape closes the sidenav.
|
|
2096
|
+
* Only applies in `'over'` and `'push'` modes.
|
|
2097
|
+
*/
|
|
2098
|
+
disableClose: boolean;
|
|
2099
|
+
/** Programmatic open / close. Supports two-way binding: `[(opened)]`. */
|
|
2100
|
+
set opened(v: boolean);
|
|
2101
|
+
/** Emits `true` when the panel opens; `false` when it closes. */
|
|
2102
|
+
readonly openedChange: EventEmitter<boolean>;
|
|
2103
|
+
/** Emits when the open animation starts. */
|
|
2104
|
+
readonly openedStart: EventEmitter<void>;
|
|
2105
|
+
/** Emits when the close animation starts. */
|
|
2106
|
+
readonly closedStart: EventEmitter<void>;
|
|
2107
|
+
/** @internal */
|
|
2108
|
+
readonly _isOpen: i0.WritableSignal<boolean>;
|
|
2109
|
+
ngOnInit(): void;
|
|
2110
|
+
ngOnDestroy(): void;
|
|
2111
|
+
/** Opens the sidenav. Returns a promise that resolves after the animation. */
|
|
2112
|
+
open(): Promise<void>;
|
|
2113
|
+
/** Closes the sidenav. Returns a promise that resolves after the animation. */
|
|
2114
|
+
close(): Promise<void>;
|
|
2115
|
+
/** Toggles the sidenav open / closed. */
|
|
2116
|
+
toggle(): void;
|
|
2117
|
+
private _setOpened;
|
|
2118
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<RcSidenavComponent, never>;
|
|
2119
|
+
static ɵcmp: i0.ɵɵComponentDeclaration<RcSidenavComponent, "rc-sidenav", never, { "mode": { "alias": "mode"; "required": false; }; "position": { "alias": "position"; "required": false; }; "disableClose": { "alias": "disableClose"; "required": false; }; "opened": { "alias": "opened"; "required": false; }; }, { "openedChange": "openedChange"; "openedStart": "openedStart"; "closedStart": "closedStart"; }, never, ["*"], true, never>;
|
|
2120
|
+
}
|
|
2121
|
+
/**
|
|
2122
|
+
* Root wrapper for the sidenav layout. Place exactly one
|
|
2123
|
+
* `<rc-sidenav>` and one `<rc-sidenav-content>` (or implicit content) inside.
|
|
2124
|
+
*
|
|
2125
|
+
* The container handles the backdrop overlay in `'over'` and `'push'` modes,
|
|
2126
|
+
* Escape-key dismissal, and the push-mode content offset.
|
|
2127
|
+
*
|
|
2128
|
+
* Set an explicit `height` or `min-height` on the container so the panel
|
|
2129
|
+
* fills the available space.
|
|
2130
|
+
*
|
|
2131
|
+
* @example Full-height app shell
|
|
2132
|
+
* ```html
|
|
2133
|
+
* <rc-sidenav-container style="height: 100vh">
|
|
2134
|
+
* <rc-sidenav #nav>
|
|
2135
|
+
* <nav>…</nav>
|
|
2136
|
+
* </rc-sidenav>
|
|
2137
|
+
* <rc-sidenav-content>
|
|
2138
|
+
* <rc-navbar><button (click)="nav.toggle()">☰</button></rc-navbar>
|
|
2139
|
+
* <router-outlet></router-outlet>
|
|
2140
|
+
* </rc-sidenav-content>
|
|
2141
|
+
* </rc-sidenav-container>
|
|
2142
|
+
* ```
|
|
2143
|
+
*/
|
|
2144
|
+
declare class RcSidenavContainerComponent implements RcSidenavContainerRef, AfterContentInit, OnDestroy {
|
|
2145
|
+
private readonly _cdr;
|
|
2146
|
+
private readonly _hostEl;
|
|
2147
|
+
private readonly _contentSidenavs;
|
|
2148
|
+
private _sidenavs;
|
|
2149
|
+
/** @internal Whether the translucent backdrop is shown. */
|
|
2150
|
+
_backdropVisible: boolean;
|
|
2151
|
+
/** @internal Called by each sidenav on init. */
|
|
2152
|
+
_register(sidenav: RcSidenavComponent): void;
|
|
2153
|
+
/** @internal Called by each sidenav on destroy. */
|
|
2154
|
+
_deregister(sidenav: RcSidenavComponent): void;
|
|
2155
|
+
/** @internal Recalculate derived state after any sidenav state change. */
|
|
2156
|
+
_update(): void;
|
|
2157
|
+
ngAfterContentInit(): void;
|
|
2158
|
+
ngOnDestroy(): void;
|
|
2159
|
+
/** @internal */
|
|
2160
|
+
_onBackdropClick(): void;
|
|
2161
|
+
/** @internal */
|
|
2162
|
+
_onEscape(event: Event): void;
|
|
2163
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<RcSidenavContainerComponent, never>;
|
|
2164
|
+
static ɵcmp: i0.ɵɵComponentDeclaration<RcSidenavContainerComponent, "rc-sidenav-container", never, {}, {}, ["_contentSidenavs"], ["rc-sidenav", "rc-sidenav-content", "*"], true, never>;
|
|
2165
|
+
}
|
|
2166
|
+
|
|
2167
|
+
/** Colour variant for the navbar. */
|
|
2168
|
+
type RcNavbarColor = 'default' | 'primary';
|
|
2169
|
+
/** CSS position strategy. */
|
|
2170
|
+
type RcNavbarPosition = 'static' | 'sticky' | 'fixed';
|
|
2171
|
+
/**
|
|
2172
|
+
* Marks the brand / logo area at the start of the navbar.
|
|
2173
|
+
*
|
|
2174
|
+
* Apply to a `<div>`, `<a>`, or any wrapper element.
|
|
2175
|
+
*
|
|
2176
|
+
* @example
|
|
2177
|
+
* ```html
|
|
2178
|
+
* <rc-navbar>
|
|
2179
|
+
* <a rcNavbarBrand routerLink="/">MyApp</a>
|
|
2180
|
+
* </rc-navbar>
|
|
2181
|
+
* ```
|
|
2182
|
+
*/
|
|
2183
|
+
declare class RcNavbarBrandDirective {
|
|
2184
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<RcNavbarBrandDirective, never>;
|
|
2185
|
+
static ɵdir: i0.ɵɵDirectiveDeclaration<RcNavbarBrandDirective, "[rcNavbarBrand]", never, {}, {}, never, never, true, never>;
|
|
2186
|
+
}
|
|
2187
|
+
/**
|
|
2188
|
+
* Marks the trailing actions area at the end of the navbar.
|
|
2189
|
+
*
|
|
2190
|
+
* @example
|
|
2191
|
+
* ```html
|
|
2192
|
+
* <rc-navbar>
|
|
2193
|
+
* <div rcNavbarActions>
|
|
2194
|
+
* <button rcButton variant="ghost" [iconOnly]="true">
|
|
2195
|
+
* <rc-icon name="bell"></rc-icon>
|
|
2196
|
+
* </button>
|
|
2197
|
+
* </div>
|
|
2198
|
+
* </rc-navbar>
|
|
2199
|
+
* ```
|
|
2200
|
+
*/
|
|
2201
|
+
declare class RcNavbarActionsDirective {
|
|
2202
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<RcNavbarActionsDirective, never>;
|
|
2203
|
+
static ɵdir: i0.ɵɵDirectiveDeclaration<RcNavbarActionsDirective, "[rcNavbarActions]", never, {}, {}, never, never, true, never>;
|
|
2204
|
+
}
|
|
2205
|
+
/**
|
|
2206
|
+
* A flexible spacer that expands to fill remaining horizontal space,
|
|
2207
|
+
* pushing subsequent elements to the end of the navbar.
|
|
2208
|
+
*
|
|
2209
|
+
* @example
|
|
2210
|
+
* ```html
|
|
2211
|
+
* <rc-navbar>
|
|
2212
|
+
* <a rcNavbarBrand routerLink="/">Logo</a>
|
|
2213
|
+
* <rc-navbar-spacer></rc-navbar-spacer>
|
|
2214
|
+
* <div rcNavbarActions>...</div>
|
|
2215
|
+
* </rc-navbar>
|
|
2216
|
+
* ```
|
|
2217
|
+
*/
|
|
2218
|
+
declare class RcNavbarSpacerComponent {
|
|
2219
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<RcNavbarSpacerComponent, never>;
|
|
2220
|
+
static ɵcmp: i0.ɵɵComponentDeclaration<RcNavbarSpacerComponent, "rc-navbar-spacer", never, {}, {}, never, never, true, never>;
|
|
2221
|
+
}
|
|
2222
|
+
/**
|
|
2223
|
+
* An individual row inside an `<rc-navbar>` — use when you need a
|
|
2224
|
+
* multi-row navigation bar.
|
|
2225
|
+
*
|
|
2226
|
+
* @example
|
|
2227
|
+
* ```html
|
|
2228
|
+
* <rc-navbar>
|
|
2229
|
+
* <rc-navbar-row>
|
|
2230
|
+
* <a rcNavbarBrand routerLink="/">Logo</a>
|
|
2231
|
+
* <rc-navbar-spacer></rc-navbar-spacer>
|
|
2232
|
+
* <div rcNavbarActions>…actions…</div>
|
|
2233
|
+
* </rc-navbar-row>
|
|
2234
|
+
* <rc-navbar-row>
|
|
2235
|
+
* <!-- breadcrumbs or sub-navigation -->
|
|
2236
|
+
* </rc-navbar-row>
|
|
2237
|
+
* </rc-navbar>
|
|
2238
|
+
* ```
|
|
2239
|
+
*/
|
|
2240
|
+
declare class RcNavbarRowComponent {
|
|
2241
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<RcNavbarRowComponent, never>;
|
|
2242
|
+
static ɵcmp: i0.ɵɵComponentDeclaration<RcNavbarRowComponent, "rc-navbar-row", never, {}, {}, never, ["*"], true, never>;
|
|
2243
|
+
}
|
|
2244
|
+
/**
|
|
2245
|
+
* Top application bar — a horizontal strip for branding, navigation actions,
|
|
2246
|
+
* and utility controls.
|
|
2247
|
+
*
|
|
2248
|
+
* Place `[rcNavbarBrand]`, `[rcNavbarActions]`, `<rc-navbar-spacer>`, and
|
|
2249
|
+
* `<rc-navbar-row>` children inside to build up the bar.
|
|
2250
|
+
*
|
|
2251
|
+
* @example Minimal
|
|
2252
|
+
* ```html
|
|
2253
|
+
* <rc-navbar>
|
|
2254
|
+
* <a rcNavbarBrand routerLink="/">My App</a>
|
|
2255
|
+
* <rc-navbar-spacer></rc-navbar-spacer>
|
|
2256
|
+
* <div rcNavbarActions>
|
|
2257
|
+
* <button rcButton variant="ghost">Sign out</button>
|
|
2258
|
+
* </div>
|
|
2259
|
+
* </rc-navbar>
|
|
2260
|
+
* ```
|
|
2261
|
+
*
|
|
2262
|
+
* @example Primary colour + sticky
|
|
2263
|
+
* ```html
|
|
2264
|
+
* <rc-navbar color="primary" position="sticky">…</rc-navbar>
|
|
2265
|
+
* ```
|
|
2266
|
+
*
|
|
2267
|
+
* @example With sidebar toggle
|
|
2268
|
+
* ```html
|
|
2269
|
+
* <rc-navbar>
|
|
2270
|
+
* <button rcButton variant="ghost" [iconOnly]="true" (click)="nav.toggle()">
|
|
2271
|
+
* <rc-icon name="menu"></rc-icon>
|
|
2272
|
+
* </button>
|
|
2273
|
+
* <a rcNavbarBrand routerLink="/">App</a>
|
|
2274
|
+
* <rc-navbar-spacer></rc-navbar-spacer>
|
|
2275
|
+
* <div rcNavbarActions>
|
|
2276
|
+
* <button rcButton variant="ghost" [iconOnly]="true">
|
|
2277
|
+
* <rc-icon name="person"></rc-icon>
|
|
2278
|
+
* </button>
|
|
2279
|
+
* </div>
|
|
2280
|
+
* </rc-navbar>
|
|
2281
|
+
* ```
|
|
2282
|
+
*
|
|
2283
|
+
* @example Multi-row
|
|
2284
|
+
* ```html
|
|
2285
|
+
* <rc-navbar>
|
|
2286
|
+
* <rc-navbar-row>
|
|
2287
|
+
* <a rcNavbarBrand>App</a>
|
|
2288
|
+
* <rc-navbar-spacer></rc-navbar-spacer>
|
|
2289
|
+
* <div rcNavbarActions>…</div>
|
|
2290
|
+
* </rc-navbar-row>
|
|
2291
|
+
* <rc-navbar-row>Sub-navigation or breadcrumbs</rc-navbar-row>
|
|
2292
|
+
* </rc-navbar>
|
|
2293
|
+
* ```
|
|
2294
|
+
*/
|
|
2295
|
+
declare class RcNavbarComponent {
|
|
2296
|
+
/**
|
|
2297
|
+
* Colour variant.
|
|
2298
|
+
* - `'default'` — white / surface background (default)
|
|
2299
|
+
* - `'primary'` — primary brand colour
|
|
2300
|
+
*/
|
|
2301
|
+
color: RcNavbarColor;
|
|
2302
|
+
/**
|
|
2303
|
+
* CSS position strategy.
|
|
2304
|
+
* - `'static'` — normal document flow (default).
|
|
2305
|
+
* - `'sticky'` — stays at the top while scrolling.
|
|
2306
|
+
* - `'fixed'` — fixed to the viewport; adds top padding to the container.
|
|
2307
|
+
*/
|
|
2308
|
+
position: RcNavbarPosition;
|
|
2309
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<RcNavbarComponent, never>;
|
|
2310
|
+
static ɵcmp: i0.ɵɵComponentDeclaration<RcNavbarComponent, "rc-navbar", never, { "color": { "alias": "color"; "required": false; }; "position": { "alias": "position"; "required": false; }; }, {}, never, ["*"], true, never>;
|
|
2311
|
+
}
|
|
2312
|
+
|
|
2313
|
+
/** Validation / visual status. */
|
|
2314
|
+
type RcDatepickerStatus = 'default' | 'success' | 'warning' | 'danger';
|
|
2315
|
+
/** Size variant — matches `RcInputSize`. */
|
|
2316
|
+
type RcDatepickerSize = 'sm' | 'md' | 'lg';
|
|
2317
|
+
/**
|
|
2318
|
+
* What the picker selects.
|
|
2319
|
+
* - `'date'` — calendar only; model value has time zeroed.
|
|
2320
|
+
* - `'time'` — clock only; only HH:MM are meaningful on the model value.
|
|
2321
|
+
* - `'datetime'` — calendar + clock.
|
|
2322
|
+
*/
|
|
2323
|
+
type RcDatepickerMode = 'date' | 'time' | 'datetime';
|
|
2324
|
+
interface _CalendarDay {
|
|
2325
|
+
date: Date;
|
|
2326
|
+
day: number;
|
|
2327
|
+
currentMonth: boolean;
|
|
2328
|
+
today: boolean;
|
|
2329
|
+
selected: boolean;
|
|
2330
|
+
disabled: boolean;
|
|
2331
|
+
}
|
|
2332
|
+
/**
|
|
2333
|
+
* A fully-themed date / time / datetime picker backed by CDK Overlay.
|
|
2334
|
+
*
|
|
2335
|
+
* The model value is always `Date | null`. Implements `ControlValueAccessor`
|
|
2336
|
+
* for use with `[(ngModel)]` or Reactive Forms.
|
|
2337
|
+
*
|
|
2338
|
+
* @example Date picker (default)
|
|
2339
|
+
* ```html
|
|
2340
|
+
* <rc-datepicker [(ngModel)]="birthday" placeholder="Select date"></rc-datepicker>
|
|
2341
|
+
* ```
|
|
2342
|
+
*
|
|
2343
|
+
* @example Time picker
|
|
2344
|
+
* ```html
|
|
2345
|
+
* <rc-datepicker mode="time" [(ngModel)]="meetingTime"></rc-datepicker>
|
|
2346
|
+
* ```
|
|
2347
|
+
*
|
|
2348
|
+
* @example Date + time
|
|
2349
|
+
* ```html
|
|
2350
|
+
* <rc-datepicker mode="datetime" [(ngModel)]="appointment"></rc-datepicker>
|
|
2351
|
+
* ```
|
|
2352
|
+
*
|
|
2353
|
+
* @example Validation status
|
|
2354
|
+
* ```html
|
|
2355
|
+
* <rc-datepicker status="danger" [(ngModel)]="dob"
|
|
2356
|
+
* placeholder="Date of birth"></rc-datepicker>
|
|
2357
|
+
* ```
|
|
2358
|
+
*
|
|
2359
|
+
* @example Min / max
|
|
2360
|
+
* ```html
|
|
2361
|
+
* <rc-datepicker [min]="minDate" [max]="maxDate" [(ngModel)]="d"></rc-datepicker>
|
|
2362
|
+
* ```
|
|
2363
|
+
*/
|
|
2364
|
+
declare class RcDatepickerComponent implements ControlValueAccessor, OnDestroy {
|
|
2365
|
+
private readonly _cdr;
|
|
2366
|
+
private readonly _overlay;
|
|
2367
|
+
private readonly _vcr;
|
|
2368
|
+
private readonly _host;
|
|
2369
|
+
private _triggerEl;
|
|
2370
|
+
private readonly _panelTpl;
|
|
2371
|
+
/** Names of the 12 months, used as calendar header. Override to localise. */
|
|
2372
|
+
monthNames: string[];
|
|
2373
|
+
/** Two-letter weekday abbreviations shown in the day grid header. Override to localise. */
|
|
2374
|
+
dayAbbrs: string[];
|
|
2375
|
+
/** What the picker selects: `'date'` | `'time'` | `'datetime'`. Default: `'date'`. */
|
|
2376
|
+
mode: RcDatepickerMode;
|
|
2377
|
+
/** Placeholder shown when no value is selected. */
|
|
2378
|
+
placeholder: string;
|
|
2379
|
+
/** Validation / visual status. */
|
|
2380
|
+
status: RcDatepickerStatus;
|
|
2381
|
+
/** Size variant. */
|
|
2382
|
+
size: RcDatepickerSize;
|
|
2383
|
+
/** Disables the picker. */
|
|
2384
|
+
disabled: boolean;
|
|
2385
|
+
/**
|
|
2386
|
+
* Minimum selectable date (inclusive).
|
|
2387
|
+
* Dates before this are rendered disabled.
|
|
2388
|
+
*/
|
|
2389
|
+
min: Date | null;
|
|
2390
|
+
/**
|
|
2391
|
+
* Maximum selectable date (inclusive).
|
|
2392
|
+
* Dates after this are rendered disabled.
|
|
2393
|
+
*/
|
|
2394
|
+
max: Date | null;
|
|
2395
|
+
/** ARIA label for the clear (×) button in the trigger. */
|
|
2396
|
+
clearAriaLabel: string;
|
|
2397
|
+
/** ARIA label for the ‹ Previous month button. */
|
|
2398
|
+
previousMonthAriaLabel: string;
|
|
2399
|
+
/** ARIA label for the › Next month button. */
|
|
2400
|
+
nextMonthAriaLabel: string;
|
|
2401
|
+
/** ARIA label for the ▲ Increase-hour button. */
|
|
2402
|
+
increaseHourAriaLabel: string;
|
|
2403
|
+
/** ARIA label for the ▼ Decrease-hour button. */
|
|
2404
|
+
decreaseHourAriaLabel: string;
|
|
2405
|
+
/** ARIA label for the ▲ Increase-minute button. */
|
|
2406
|
+
increaseMinuteAriaLabel: string;
|
|
2407
|
+
/** ARIA label for the ▼ Decrease-minute button. */
|
|
2408
|
+
decreaseMinuteAriaLabel: string;
|
|
2409
|
+
/** Footer button label used in `date` mode. */
|
|
2410
|
+
todayLabel: string;
|
|
2411
|
+
/** Footer button label used in `time` and `datetime` modes. */
|
|
2412
|
+
nowLabel: string;
|
|
2413
|
+
/** Footer clear-value button label. */
|
|
2414
|
+
clearLabel: string;
|
|
2415
|
+
/** Footer apply button label (shown in `time` and `datetime` modes). */
|
|
2416
|
+
applyLabel: string;
|
|
2417
|
+
/** Emits the selected `Date` (or `null` after clearing). */
|
|
2418
|
+
readonly dateChange: EventEmitter<Date | null>;
|
|
2419
|
+
/** @internal Currently selected Date model value. */
|
|
2420
|
+
readonly _value: i0.WritableSignal<Date | null>;
|
|
2421
|
+
/** @internal Month index (0–11) of the calendar viewport. */
|
|
2422
|
+
readonly _viewMonth: i0.WritableSignal<number>;
|
|
2423
|
+
/** @internal Year of the calendar viewport. */
|
|
2424
|
+
readonly _viewYear: i0.WritableSignal<number>;
|
|
2425
|
+
/** @internal Which sub-view is active: 'days' | 'months' | 'years'. */
|
|
2426
|
+
readonly _calView: i0.WritableSignal<"days" | "months" | "years">;
|
|
2427
|
+
/** @internal Hours in the time picker (0–23). */
|
|
2428
|
+
readonly _hours: i0.WritableSignal<number>;
|
|
2429
|
+
/** @internal Minutes in the time picker (0–59). */
|
|
2430
|
+
readonly _minutes: i0.WritableSignal<number>;
|
|
2431
|
+
/** @internal Whether the overlay panel is open. */
|
|
2432
|
+
_open: boolean;
|
|
2433
|
+
private _overlayRef;
|
|
2434
|
+
private _portal;
|
|
2435
|
+
private _onChange;
|
|
2436
|
+
_onTouched: () => void;
|
|
2437
|
+
/** @internal Human-readable display text for the trigger. */
|
|
2438
|
+
readonly _displayText: i0.Signal<string>;
|
|
2439
|
+
/** @internal Current view month name. */
|
|
2440
|
+
readonly _monthName: i0.Signal<string>;
|
|
2441
|
+
/** @internal HH display. */
|
|
2442
|
+
readonly _hoursDisplay: i0.Signal<string>;
|
|
2443
|
+
/** @internal MM display. */
|
|
2444
|
+
readonly _minutesDisplay: i0.Signal<string>;
|
|
2445
|
+
/** @internal 20-year range around view year for the year grid. */
|
|
2446
|
+
readonly _yearRange: i0.Signal<number[]>;
|
|
2447
|
+
/** @internal Calendar day cells for the current view month/year. */
|
|
2448
|
+
readonly _days: i0.Signal<_CalendarDay[]>;
|
|
2449
|
+
ngOnDestroy(): void;
|
|
2450
|
+
writeValue(value: unknown): void;
|
|
2451
|
+
registerOnChange(fn: (v: Date | null) => void): void;
|
|
2452
|
+
registerOnTouched(fn: () => void): void;
|
|
2453
|
+
setDisabledState(isDisabled: boolean): void;
|
|
2454
|
+
/** @internal */
|
|
2455
|
+
_togglePanel(): void;
|
|
2456
|
+
private _openPanel;
|
|
2457
|
+
/** @internal */
|
|
2458
|
+
_closePanel(): void;
|
|
2459
|
+
/** @internal */
|
|
2460
|
+
_prevMonth(): void;
|
|
2461
|
+
/** @internal */
|
|
2462
|
+
_nextMonth(): void;
|
|
2463
|
+
/** @internal */
|
|
2464
|
+
_toggleCalView(): void;
|
|
2465
|
+
/** @internal */
|
|
2466
|
+
_selectMonth(month: number): void;
|
|
2467
|
+
/** @internal */
|
|
2468
|
+
_selectYear(year: number): void;
|
|
2469
|
+
/** @internal */
|
|
2470
|
+
_selectDay(date: Date): void;
|
|
2471
|
+
/** @internal Apply the current time to the value and close (for mode=time or datetime). */
|
|
2472
|
+
_applyTime(): void;
|
|
2473
|
+
/** @internal */
|
|
2474
|
+
_selectNow(): void;
|
|
2475
|
+
/** @internal */
|
|
2476
|
+
_clear(): void;
|
|
2477
|
+
/** @internal */
|
|
2478
|
+
_incHours(): void;
|
|
2479
|
+
/** @internal */
|
|
2480
|
+
_decHours(): void;
|
|
2481
|
+
/** @internal */
|
|
2482
|
+
_incMinutes(): void;
|
|
2483
|
+
/** @internal */
|
|
2484
|
+
_decMinutes(): void;
|
|
2485
|
+
/** @internal */
|
|
2486
|
+
_onHostKeydown(event: KeyboardEvent): void;
|
|
2487
|
+
private _makeDay;
|
|
2488
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<RcDatepickerComponent, never>;
|
|
2489
|
+
static ɵcmp: i0.ɵɵComponentDeclaration<RcDatepickerComponent, "rc-datepicker", never, { "monthNames": { "alias": "monthNames"; "required": false; }; "dayAbbrs": { "alias": "dayAbbrs"; "required": false; }; "mode": { "alias": "mode"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "status": { "alias": "status"; "required": false; }; "size": { "alias": "size"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "min": { "alias": "min"; "required": false; }; "max": { "alias": "max"; "required": false; }; "clearAriaLabel": { "alias": "clearAriaLabel"; "required": false; }; "previousMonthAriaLabel": { "alias": "previousMonthAriaLabel"; "required": false; }; "nextMonthAriaLabel": { "alias": "nextMonthAriaLabel"; "required": false; }; "increaseHourAriaLabel": { "alias": "increaseHourAriaLabel"; "required": false; }; "decreaseHourAriaLabel": { "alias": "decreaseHourAriaLabel"; "required": false; }; "increaseMinuteAriaLabel": { "alias": "increaseMinuteAriaLabel"; "required": false; }; "decreaseMinuteAriaLabel": { "alias": "decreaseMinuteAriaLabel"; "required": false; }; "todayLabel": { "alias": "todayLabel"; "required": false; }; "nowLabel": { "alias": "nowLabel"; "required": false; }; "clearLabel": { "alias": "clearLabel"; "required": false; }; "applyLabel": { "alias": "applyLabel"; "required": false; }; }, { "dateChange": "dateChange"; }, never, never, true, never>;
|
|
2490
|
+
}
|
|
2491
|
+
|
|
2492
|
+
/** A single node in the tree data model. */
|
|
2493
|
+
interface RcTreeNodeData {
|
|
2494
|
+
/** Unique identifier for this node. */
|
|
2495
|
+
id: string | number;
|
|
2496
|
+
/** Display label. */
|
|
2497
|
+
label: string;
|
|
2498
|
+
/** Child nodes, if any. */
|
|
2499
|
+
children?: RcTreeNodeData[];
|
|
2500
|
+
/** Whether this node is disabled (cannot be selected or expanded). */
|
|
2501
|
+
disabled?: boolean;
|
|
2502
|
+
}
|
|
2503
|
+
/** How the tree handles selection. */
|
|
2504
|
+
type RcTreeSelectionMode = 'single' | 'multiple' | 'none';
|
|
2505
|
+
/**
|
|
2506
|
+
* @internal Renders a single tree node and its children recursively.
|
|
2507
|
+
* Not part of the public API — use `rc-tree` with `[nodes]` instead.
|
|
2508
|
+
*/
|
|
2509
|
+
declare class RcTreeNodeComponent {
|
|
2510
|
+
readonly _tree: RcTreeComponent;
|
|
2511
|
+
/** @internal The node data for this row. */
|
|
2512
|
+
node: RcTreeNodeData;
|
|
2513
|
+
/** @internal Nesting level (0 = root). Used for indentation. */
|
|
2514
|
+
level: number;
|
|
2515
|
+
get hasChildren(): boolean;
|
|
2516
|
+
readonly _expanded: i0.Signal<boolean>;
|
|
2517
|
+
readonly _selected: i0.Signal<boolean>;
|
|
2518
|
+
/** @internal */
|
|
2519
|
+
_toggleExpand(): void;
|
|
2520
|
+
/** @internal */
|
|
2521
|
+
_onRowClick(): void;
|
|
2522
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<RcTreeNodeComponent, never>;
|
|
2523
|
+
static ɵcmp: i0.ɵɵComponentDeclaration<RcTreeNodeComponent, "rc-tree-node", never, { "node": { "alias": "node"; "required": true; }; "level": { "alias": "level"; "required": false; }; }, {}, never, never, true, never>;
|
|
2524
|
+
}
|
|
2525
|
+
/**
|
|
2526
|
+
* A hierarchical tree view that renders nested `RcTreeNodeData` items.
|
|
2527
|
+
*
|
|
2528
|
+
* Selection modes: `'single'` (default) | `'multiple'` | `'none'`.
|
|
2529
|
+
*
|
|
2530
|
+
* @example Basic tree
|
|
2531
|
+
* ```html
|
|
2532
|
+
* <rc-tree [nodes]="tree" [(selection)]="selected"></rc-tree>
|
|
2533
|
+
* ```
|
|
2534
|
+
*
|
|
2535
|
+
* @example Multi-select
|
|
2536
|
+
* ```html
|
|
2537
|
+
* <rc-tree [nodes]="tree" selectionMode="multiple" [(selection)]="selected"></rc-tree>
|
|
2538
|
+
* ```
|
|
2539
|
+
*
|
|
2540
|
+
* @example No selection (display only)
|
|
2541
|
+
* ```html
|
|
2542
|
+
* <rc-tree [nodes]="tree" selectionMode="none"></rc-tree>
|
|
2543
|
+
* ```
|
|
2544
|
+
*
|
|
2545
|
+
* @example Pre-expanded nodes
|
|
2546
|
+
* ```html
|
|
2547
|
+
* <rc-tree [nodes]="tree" [expandedIds]="['folder-1']"></rc-tree>
|
|
2548
|
+
* ```
|
|
2549
|
+
*/
|
|
2550
|
+
declare class RcTreeComponent implements OnChanges {
|
|
2551
|
+
/** Tree data to render. */
|
|
2552
|
+
nodes: RcTreeNodeData[];
|
|
2553
|
+
/**
|
|
2554
|
+
* How selection works.
|
|
2555
|
+
* - `'single'` — only one node selected at a time (default).
|
|
2556
|
+
* - `'multiple'` — any number of nodes may be selected.
|
|
2557
|
+
* - `'none'` — nodes cannot be selected.
|
|
2558
|
+
*/
|
|
2559
|
+
selectionMode: RcTreeSelectionMode;
|
|
2560
|
+
/**
|
|
2561
|
+
* IDs of nodes that should be selected.
|
|
2562
|
+
* Use with `(selectionChange)` for two-way binding via `[(selection)]`.
|
|
2563
|
+
*/
|
|
2564
|
+
selection: (string | number)[];
|
|
2565
|
+
/**
|
|
2566
|
+
* IDs of nodes that should start expanded.
|
|
2567
|
+
* Changes after init are reflected reactively.
|
|
2568
|
+
*/
|
|
2569
|
+
expandedIds: (string | number)[];
|
|
2570
|
+
/** Emits the updated selection array whenever it changes. */
|
|
2571
|
+
readonly selectionChange: EventEmitter<(string | number)[]>;
|
|
2572
|
+
/** Emits the `RcTreeNodeData` of a node when it is clicked. */
|
|
2573
|
+
readonly nodeClick: EventEmitter<RcTreeNodeData>;
|
|
2574
|
+
/** Emits the `RcTreeNodeData` of a node when it expands. */
|
|
2575
|
+
readonly nodeExpand: EventEmitter<RcTreeNodeData>;
|
|
2576
|
+
/** Emits the `RcTreeNodeData` of a node when it collapses. */
|
|
2577
|
+
readonly nodeCollapse: EventEmitter<RcTreeNodeData>;
|
|
2578
|
+
/** @internal */
|
|
2579
|
+
readonly _expandedIds: i0.WritableSignal<Set<string | number>>;
|
|
2580
|
+
/** @internal */
|
|
2581
|
+
readonly _selectedIds: i0.WritableSignal<Set<string | number>>;
|
|
2582
|
+
ngOnChanges(changes: SimpleChanges): void;
|
|
2583
|
+
/** @internal Called by node when user clicks it. */
|
|
2584
|
+
_selectNode(node: RcTreeNodeData): void;
|
|
2585
|
+
/** Expand all nodes in the tree. */
|
|
2586
|
+
expandAll(): void;
|
|
2587
|
+
/** Collapse all nodes in the tree. */
|
|
2588
|
+
collapseAll(): void;
|
|
2589
|
+
/** Clear all selections. */
|
|
2590
|
+
clearSelection(): void;
|
|
2591
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<RcTreeComponent, never>;
|
|
2592
|
+
static ɵcmp: i0.ɵɵComponentDeclaration<RcTreeComponent, "rc-tree", never, { "nodes": { "alias": "nodes"; "required": false; }; "selectionMode": { "alias": "selectionMode"; "required": false; }; "selection": { "alias": "selection"; "required": false; }; "expandedIds": { "alias": "expandedIds"; "required": false; }; }, { "selectionChange": "selectionChange"; "nodeClick": "nodeClick"; "nodeExpand": "nodeExpand"; "nodeCollapse": "nodeCollapse"; }, never, never, true, never>;
|
|
2593
|
+
}
|
|
2594
|
+
|
|
2595
|
+
/** Colour variant for the spinner circle. */
|
|
2596
|
+
type RcSpinnerStatus = 'primary' | 'info' | 'success' | 'warning' | 'danger' | 'basic';
|
|
2597
|
+
/** Size variant for the spinner. */
|
|
2598
|
+
type RcSpinnerSize = 'sm' | 'md' | 'lg';
|
|
2599
|
+
/**
|
|
2600
|
+
* A spinning circle loader backed by Resolve design tokens.
|
|
2601
|
+
*
|
|
2602
|
+
* Can be used standalone as an inline or section-level loader, or placed on any
|
|
2603
|
+
* host element via the `[rcSpinner]` directive which inserts it as an overlay.
|
|
2604
|
+
*
|
|
2605
|
+
* @example Inline usage
|
|
2606
|
+
* ```html
|
|
2607
|
+
* <rc-spinner></rc-spinner>
|
|
2608
|
+
* <rc-spinner status="success" size="lg"></rc-spinner>
|
|
2609
|
+
* <rc-spinner status="danger" message="Saving failed — retrying…"></rc-spinner>
|
|
2610
|
+
* ```
|
|
2611
|
+
*
|
|
2612
|
+
* @example Status colours
|
|
2613
|
+
* ```html
|
|
2614
|
+
* <rc-spinner status="primary"></rc-spinner>
|
|
2615
|
+
* <rc-spinner status="info"></rc-spinner>
|
|
2616
|
+
* <rc-spinner status="success"></rc-spinner>
|
|
2617
|
+
* <rc-spinner status="warning"></rc-spinner>
|
|
2618
|
+
* <rc-spinner status="danger"></rc-spinner>
|
|
2619
|
+
* <rc-spinner status="basic"></rc-spinner>
|
|
2620
|
+
* ```
|
|
2621
|
+
*/
|
|
2622
|
+
declare class RcSpinnerComponent {
|
|
2623
|
+
/** Colour status of the spinner circle. Default: `'primary'` */
|
|
2624
|
+
status: RcSpinnerStatus;
|
|
2625
|
+
/** Visual size of the spinner. Default: `'md'` */
|
|
2626
|
+
size: RcSpinnerSize;
|
|
2627
|
+
/** Optional label displayed below the spinner icon. */
|
|
2628
|
+
message: string;
|
|
2629
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<RcSpinnerComponent, never>;
|
|
2630
|
+
static ɵcmp: i0.ɵɵComponentDeclaration<RcSpinnerComponent, "rc-spinner", never, { "status": { "alias": "status"; "required": false; }; "size": { "alias": "size"; "required": false; }; "message": { "alias": "message"; "required": false; }; }, {}, never, never, true, never>;
|
|
2631
|
+
}
|
|
2632
|
+
/**
|
|
2633
|
+
* Directive that overlays a spinner on any host element while `[rcSpinner]` is truthy.
|
|
2634
|
+
*
|
|
2635
|
+
* The host automatically receives `position: relative` (via the `rc-spinner-container`
|
|
2636
|
+
* class) so the spinner is positioned relative to it.
|
|
2637
|
+
*
|
|
2638
|
+
* **Note:** avoid applying to void/self-closing elements (`<input>`, `<img>`, etc.).
|
|
2639
|
+
* Wrap them in a `<div>` first.
|
|
2640
|
+
*
|
|
2641
|
+
* @example Overlay on a card
|
|
2642
|
+
* ```html
|
|
2643
|
+
* <rc-card [rcSpinner]="isLoading" rcSpinnerMessage="Fetching data…">
|
|
2644
|
+
* Content here
|
|
2645
|
+
* </rc-card>
|
|
2646
|
+
* ```
|
|
2647
|
+
*
|
|
2648
|
+
* @example Status and size
|
|
2649
|
+
* ```html
|
|
2650
|
+
* <div [rcSpinner]="saving" rcSpinnerStatus="success" rcSpinnerSize="lg">
|
|
2651
|
+
* <form>…</form>
|
|
2652
|
+
* </div>
|
|
2653
|
+
* ```
|
|
2654
|
+
*
|
|
2655
|
+
* @example Programmatic toggle
|
|
2656
|
+
* ```html
|
|
2657
|
+
* <div [rcSpinner]="loading" rcSpinnerMessage="Please wait…" style="padding:2rem">
|
|
2658
|
+
* <p>Content</p>
|
|
2659
|
+
* </div>
|
|
2660
|
+
* <button rcButton (click)="loading = !loading">Toggle spinner</button>
|
|
2661
|
+
* ```
|
|
2662
|
+
*/
|
|
2663
|
+
declare class RcSpinnerDirective implements OnChanges, OnDestroy {
|
|
2664
|
+
/** When `true`, the spinner overlay is rendered inside the host element. */
|
|
2665
|
+
rcSpinner: boolean;
|
|
2666
|
+
/** Colour status forwarded to the inner `rc-spinner`. Default: `'primary'` */
|
|
2667
|
+
rcSpinnerStatus: RcSpinnerStatus;
|
|
2668
|
+
/** Size forwarded to the inner `rc-spinner`. Default: `'md'` */
|
|
2669
|
+
rcSpinnerSize: RcSpinnerSize;
|
|
2670
|
+
/** Optional message label forwarded to the inner `rc-spinner`. */
|
|
2671
|
+
rcSpinnerMessage: string;
|
|
2672
|
+
private readonly _vcr;
|
|
2673
|
+
private readonly _el;
|
|
2674
|
+
private readonly _renderer;
|
|
2675
|
+
private _spinnerRef;
|
|
2676
|
+
ngOnChanges(): void;
|
|
2677
|
+
ngOnDestroy(): void;
|
|
2678
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<RcSpinnerDirective, never>;
|
|
2679
|
+
static ɵdir: i0.ɵɵDirectiveDeclaration<RcSpinnerDirective, "[rcSpinner]", never, { "rcSpinner": { "alias": "rcSpinner"; "required": false; }; "rcSpinnerStatus": { "alias": "rcSpinnerStatus"; "required": false; }; "rcSpinnerSize": { "alias": "rcSpinnerSize"; "required": false; }; "rcSpinnerMessage": { "alias": "rcSpinnerMessage"; "required": false; }; }, {}, never, never, true, never>;
|
|
2680
|
+
}
|
|
2681
|
+
|
|
2682
|
+
/** Status colour variant for the progress bar fill. */
|
|
2683
|
+
type RcProgressBarStatus = 'primary' | 'info' | 'success' | 'warning' | 'danger';
|
|
2684
|
+
/**
|
|
2685
|
+
* A themed horizontal progress bar — determinate or indeterminate.
|
|
2686
|
+
*
|
|
2687
|
+
* Set `[value]` (0–100) for a standard progress bar. Set `[indeterminate]="true"`
|
|
2688
|
+
* for an animated looping bar (value is ignored).
|
|
2689
|
+
*
|
|
2690
|
+
* @example Basic
|
|
2691
|
+
* ```html
|
|
2692
|
+
* <rc-progress-bar [value]="60"></rc-progress-bar>
|
|
2693
|
+
* ```
|
|
2694
|
+
*
|
|
2695
|
+
* @example Status colours
|
|
2696
|
+
* ```html
|
|
2697
|
+
* <rc-progress-bar [value]="80" status="success"></rc-progress-bar>
|
|
2698
|
+
* <rc-progress-bar [value]="20" status="danger"></rc-progress-bar>
|
|
2699
|
+
* ```
|
|
2700
|
+
*
|
|
2701
|
+
* @example Striped
|
|
2702
|
+
* ```html
|
|
2703
|
+
* <rc-progress-bar [value]="55" [striped]="true" status="info"></rc-progress-bar>
|
|
2704
|
+
* ```
|
|
2705
|
+
*
|
|
2706
|
+
* @example Indeterminate
|
|
2707
|
+
* ```html
|
|
2708
|
+
* <rc-progress-bar [indeterminate]="true"></rc-progress-bar>
|
|
2709
|
+
* ```
|
|
2710
|
+
*
|
|
2711
|
+
* @example With label
|
|
2712
|
+
* ```html
|
|
2713
|
+
* <rc-progress-bar [value]="72" label="Uploading…"></rc-progress-bar>
|
|
2714
|
+
* ```
|
|
2715
|
+
*/
|
|
2716
|
+
declare class RcProgressBarComponent {
|
|
2717
|
+
/** Progress value from 0 to 100. Ignored when `indeterminate` is true. Default: `0` */
|
|
2718
|
+
value: number;
|
|
2719
|
+
/** Colour variant of the fill. Default: `'primary'` */
|
|
2720
|
+
status: RcProgressBarStatus;
|
|
2721
|
+
/** When true, shows an animated looping bar. Default: `false` */
|
|
2722
|
+
indeterminate: boolean;
|
|
2723
|
+
/** When true, adds a diagonal stripe pattern to the fill. Default: `false` */
|
|
2724
|
+
striped: boolean;
|
|
2725
|
+
/** Optional text label shown above the bar. When set, also shows the % value. */
|
|
2726
|
+
label: string;
|
|
2727
|
+
/** @internal Clamped value between 0 and 100. */
|
|
2728
|
+
get _clamped(): number;
|
|
2729
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<RcProgressBarComponent, never>;
|
|
2730
|
+
static ɵcmp: i0.ɵɵComponentDeclaration<RcProgressBarComponent, "rc-progress-bar", never, { "value": { "alias": "value"; "required": false; }; "status": { "alias": "status"; "required": false; }; "indeterminate": { "alias": "indeterminate"; "required": false; }; "striped": { "alias": "striped"; "required": false; }; "label": { "alias": "label"; "required": false; }; }, {}, never, never, true, never>;
|
|
2731
|
+
}
|
|
2732
|
+
|
|
2733
|
+
/** An individual file entry tracked by the upload component. */
|
|
2734
|
+
interface RcUploadedFile {
|
|
2735
|
+
/** Underlying native `File` object. */
|
|
2736
|
+
file: File;
|
|
2737
|
+
/** Human-readable file size string (e.g. `"2.4 MB"`). */
|
|
2738
|
+
sizeLabel: string;
|
|
2739
|
+
/** Whether this file failed validation (size, type, or count). */
|
|
2740
|
+
error?: string;
|
|
2741
|
+
}
|
|
2742
|
+
/**
|
|
2743
|
+
* A drag-and-drop / click-to-browse file upload component with inline validation.
|
|
2744
|
+
*
|
|
2745
|
+
* Selected files appear as a list below the drop zone. Validation errors are
|
|
2746
|
+
* shown per-file. Emits the full `File[]` (valid files only) on every change.
|
|
2747
|
+
*
|
|
2748
|
+
* @example Basic single-file upload
|
|
2749
|
+
* ```html
|
|
2750
|
+
* <rc-file-upload (filesChange)="onFiles($event)"></rc-file-upload>
|
|
2751
|
+
* ```
|
|
2752
|
+
*
|
|
2753
|
+
* @example Multiple files with restrictions
|
|
2754
|
+
* ```html
|
|
2755
|
+
* <rc-file-upload
|
|
2756
|
+
* [multiple]="true"
|
|
2757
|
+
* accept=".png,.jpg,.jpeg"
|
|
2758
|
+
* [maxFileSizeMb]="5"
|
|
2759
|
+
* [maxFiles]="4"
|
|
2760
|
+
* (filesChange)="attachments = $event"
|
|
2761
|
+
* ></rc-file-upload>
|
|
2762
|
+
* ```
|
|
2763
|
+
*
|
|
2764
|
+
* @example Disabled
|
|
2765
|
+
* ```html
|
|
2766
|
+
* <rc-file-upload [disabled]="true"></rc-file-upload>
|
|
2767
|
+
* ```
|
|
2768
|
+
*/
|
|
2769
|
+
declare class RcFileUploadComponent {
|
|
2770
|
+
private readonly _input;
|
|
2771
|
+
/** Allow selecting multiple files. Default: `false` */
|
|
2772
|
+
multiple: boolean;
|
|
2773
|
+
/** Primary text in the drop zone. Default: `'Drop files here or'` */
|
|
2774
|
+
dropTitleLabel: string;
|
|
2775
|
+
/** Clickable browse-text in the drop zone. Default: `'browse'` */
|
|
2776
|
+
browseLabel: string;
|
|
2777
|
+
/** Hint prefix when an `accept` filter is set. Default: `'Accepted:'` */
|
|
2778
|
+
acceptedLabel: string;
|
|
2779
|
+
/** Hint size prefix. Default: `'· up to'` */
|
|
2780
|
+
upToLabel: string;
|
|
2781
|
+
/** Unit label for file size. Default: `'MB'` */
|
|
2782
|
+
mbLabel: string;
|
|
2783
|
+
/** Hint max-file-count prefix (inline). Default: `'· max'` */
|
|
2784
|
+
maxFilesHintLabel: string;
|
|
2785
|
+
/** Unit label after max file count. Default: `'files'` */
|
|
2786
|
+
filesLabel: string;
|
|
2787
|
+
/** Hint when only a file-count limit is set, no type filter. Default: `'Max files:'` */
|
|
2788
|
+
onlyMaxFilesLabel: string;
|
|
2789
|
+
/** Hint label for the max-file-size line. Default: `'Max file size:'` */
|
|
2790
|
+
maxFileSizeLabel: string;
|
|
2791
|
+
/** Hint when there are no restrictions. Default: `'Any file type accepted'` */
|
|
2792
|
+
anyFileTypeLabel: string;
|
|
2793
|
+
/** ARIA label for the remove-file button. Default: `'Remove file'` */
|
|
2794
|
+
removeFileAriaLabel: string;
|
|
2795
|
+
/** Error message factory when too many files are selected. */
|
|
2796
|
+
maxFilesErrorFn: (max: number) => string;
|
|
2797
|
+
/** Error message factory when a file exceeds the size limit. */
|
|
2798
|
+
fileSizeErrorFn: (mb: number) => string;
|
|
2799
|
+
/** Error message when a file type is not allowed. Default: `'File type not allowed'` */
|
|
2800
|
+
fileTypeErrorLabel: string;
|
|
2801
|
+
/**
|
|
2802
|
+
* Comma-separated list of accepted MIME types or file extensions.
|
|
2803
|
+
* E.g. `".pdf,.png,image/*"`. Passed directly to the native input.
|
|
2804
|
+
*/
|
|
2805
|
+
accept: string;
|
|
2806
|
+
/** Maximum individual file size in megabytes. `0` means no limit. Default: `0` */
|
|
2807
|
+
maxFileSizeMb: number;
|
|
2808
|
+
/**
|
|
2809
|
+
* Maximum number of files allowed (only meaningful when `multiple = true`).
|
|
2810
|
+
* `0` means no limit. Default: `0`
|
|
2811
|
+
*/
|
|
2812
|
+
maxFiles: number;
|
|
2813
|
+
/** Disables all interaction. Default: `false` */
|
|
2814
|
+
disabled: boolean;
|
|
2815
|
+
/** Emits the valid `File[]` whenever the selection changes. */
|
|
2816
|
+
readonly filesChange: EventEmitter<File[]>;
|
|
2817
|
+
/** @internal */
|
|
2818
|
+
readonly _dragOver: i0.WritableSignal<boolean>;
|
|
2819
|
+
/** @internal */
|
|
2820
|
+
readonly _files: i0.WritableSignal<RcUploadedFile[]>;
|
|
2821
|
+
/** @internal Whether any file has a validation error. */
|
|
2822
|
+
readonly _hasErrors: i0.Signal<boolean>;
|
|
2823
|
+
/** @internal Called by the native input `change` event. */
|
|
2824
|
+
_onInputChange(event: Event): void;
|
|
2825
|
+
/** @internal Called on drop. */
|
|
2826
|
+
_onDrop(event: DragEvent): void;
|
|
2827
|
+
/** @internal Remove a file from the list. */
|
|
2828
|
+
_removeFile(entry: RcUploadedFile): void;
|
|
2829
|
+
private _addFiles;
|
|
2830
|
+
private _validate;
|
|
2831
|
+
private _emitValid;
|
|
2832
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<RcFileUploadComponent, never>;
|
|
2833
|
+
static ɵcmp: i0.ɵɵComponentDeclaration<RcFileUploadComponent, "rc-file-upload", never, { "multiple": { "alias": "multiple"; "required": false; }; "dropTitleLabel": { "alias": "dropTitleLabel"; "required": false; }; "browseLabel": { "alias": "browseLabel"; "required": false; }; "acceptedLabel": { "alias": "acceptedLabel"; "required": false; }; "upToLabel": { "alias": "upToLabel"; "required": false; }; "mbLabel": { "alias": "mbLabel"; "required": false; }; "maxFilesHintLabel": { "alias": "maxFilesHintLabel"; "required": false; }; "filesLabel": { "alias": "filesLabel"; "required": false; }; "onlyMaxFilesLabel": { "alias": "onlyMaxFilesLabel"; "required": false; }; "maxFileSizeLabel": { "alias": "maxFileSizeLabel"; "required": false; }; "anyFileTypeLabel": { "alias": "anyFileTypeLabel"; "required": false; }; "removeFileAriaLabel": { "alias": "removeFileAriaLabel"; "required": false; }; "maxFilesErrorFn": { "alias": "maxFilesErrorFn"; "required": false; }; "fileSizeErrorFn": { "alias": "fileSizeErrorFn"; "required": false; }; "fileTypeErrorLabel": { "alias": "fileTypeErrorLabel"; "required": false; }; "accept": { "alias": "accept"; "required": false; }; "maxFileSizeMb": { "alias": "maxFileSizeMb"; "required": false; }; "maxFiles": { "alias": "maxFiles"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; }, { "filesChange": "filesChange"; }, never, never, true, never>;
|
|
2834
|
+
}
|
|
2835
|
+
|
|
2836
|
+
/**
|
|
2837
|
+
* A styled virtual-scrolling viewport backed by Angular CDK.
|
|
2838
|
+
*
|
|
2839
|
+
* Renders only the items visible in the scroll window — constant DOM size
|
|
2840
|
+
* regardless of list length.
|
|
2841
|
+
*
|
|
2842
|
+
* Pass the data via `[items]` and define the row template with `<ng-template let-item>`.
|
|
2843
|
+
*
|
|
2844
|
+
* @example
|
|
2845
|
+
* ```html
|
|
2846
|
+
* <rc-virtual-scroll-viewport [items]="rows" [itemSize]="48" height="400px">
|
|
2847
|
+
* <ng-template let-row>
|
|
2848
|
+
* <div class="list-row">{{ row.name }}</div>
|
|
2849
|
+
* </ng-template>
|
|
2850
|
+
* </rc-virtual-scroll-viewport>
|
|
2851
|
+
* ```
|
|
2852
|
+
*/
|
|
2853
|
+
declare class RcVirtualScrollViewportComponent<T = unknown> {
|
|
2854
|
+
/** The data array to render. */
|
|
2855
|
+
items: T[];
|
|
2856
|
+
/** Height of each item in pixels. All items must be the same height. Default: `48` */
|
|
2857
|
+
itemSize: number;
|
|
2858
|
+
/**
|
|
2859
|
+
* CSS height of the scrollable container, e.g. `'400px'` or `'60vh'`.
|
|
2860
|
+
* Default: `'400px'`
|
|
2861
|
+
*/
|
|
2862
|
+
height: string;
|
|
2863
|
+
/**
|
|
2864
|
+
* Minimum number of pixels outside the viewport before new items are rendered.
|
|
2865
|
+
* Default: `200`
|
|
2866
|
+
*/
|
|
2867
|
+
minBufferPx: number;
|
|
2868
|
+
/**
|
|
2869
|
+
* Maximum pixel buffer to render beyond the visible area.
|
|
2870
|
+
* Default: `400`
|
|
2871
|
+
*/
|
|
2872
|
+
maxBufferPx: number;
|
|
2873
|
+
/** Optional trackBy function, same signature as `*ngFor`'s `trackBy`. */
|
|
2874
|
+
trackBy?: (index: number, item: T) => unknown;
|
|
2875
|
+
/** The `<ng-template let-item>` content child used to render each row. */
|
|
2876
|
+
itemTemplate: TemplateRef<any>;
|
|
2877
|
+
private readonly _cdkViewport;
|
|
2878
|
+
/** Scroll to a specific index in the list. */
|
|
2879
|
+
scrollToIndex(index: number, behavior?: ScrollBehavior): void;
|
|
2880
|
+
/** Smooth-scroll back to the first item. */
|
|
2881
|
+
scrollToStart(): void;
|
|
2882
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<RcVirtualScrollViewportComponent<any>, never>;
|
|
2883
|
+
static ɵcmp: i0.ɵɵComponentDeclaration<RcVirtualScrollViewportComponent<any>, "rc-virtual-scroll-viewport", never, { "items": { "alias": "items"; "required": false; }; "itemSize": { "alias": "itemSize"; "required": false; }; "height": { "alias": "height"; "required": false; }; "minBufferPx": { "alias": "minBufferPx"; "required": false; }; "maxBufferPx": { "alias": "maxBufferPx"; "required": false; }; "trackBy": { "alias": "trackBy"; "required": false; }; }, {}, ["itemTemplate"], never, true, never>;
|
|
2884
|
+
}
|
|
2885
|
+
|
|
2886
|
+
type RcTooltipPosition = 'top' | 'bottom' | 'left' | 'right';
|
|
2887
|
+
/**
|
|
2888
|
+
* Lightweight tooltip directive powered by Angular CDK Overlay.
|
|
2889
|
+
*
|
|
2890
|
+
* Apply `[rcTooltip]` to any element. The tooltip appears on mouse enter and
|
|
2891
|
+
* keyboard focus, and disappears on leave / blur.
|
|
2892
|
+
*
|
|
2893
|
+
* @example Plain text tooltip
|
|
2894
|
+
* ```html
|
|
2895
|
+
* <button rcButton rcTooltip="Save the document">Save</button>
|
|
2896
|
+
* ```
|
|
2897
|
+
*
|
|
2898
|
+
* @example Positioned tooltip
|
|
2899
|
+
* ```html
|
|
2900
|
+
* <rc-icon name="info" rcTooltip="More information" rcTooltipPosition="right"></rc-icon>
|
|
2901
|
+
* ```
|
|
2902
|
+
*
|
|
2903
|
+
* @example Disabled tooltip
|
|
2904
|
+
* ```html
|
|
2905
|
+
* <span [rcTooltip]="hint" [rcTooltipDisabled]="!showHints">Hover me</span>
|
|
2906
|
+
* ```
|
|
2907
|
+
*/
|
|
2908
|
+
declare class RcTooltipDirective implements OnDestroy {
|
|
2909
|
+
/** Tooltip text. Set to an empty string to disable. */
|
|
2910
|
+
text: string;
|
|
2911
|
+
/** Side the tooltip appears on. Default: `'top'` */
|
|
2912
|
+
rcTooltipPosition: RcTooltipPosition;
|
|
2913
|
+
/** Suppresses the tooltip entirely when true. Default: `false` */
|
|
2914
|
+
rcTooltipDisabled: boolean;
|
|
2915
|
+
private readonly _overlay;
|
|
2916
|
+
private readonly _posBuilder;
|
|
2917
|
+
private readonly _elRef;
|
|
2918
|
+
private readonly _vcr;
|
|
2919
|
+
private _overlayRef;
|
|
2920
|
+
private _compRef;
|
|
2921
|
+
private _hideTimeout;
|
|
2922
|
+
_show(): void;
|
|
2923
|
+
_hide(): void;
|
|
2924
|
+
ngOnDestroy(): void;
|
|
2925
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<RcTooltipDirective, never>;
|
|
2926
|
+
static ɵdir: i0.ɵɵDirectiveDeclaration<RcTooltipDirective, "[rcTooltip]", never, { "text": { "alias": "rcTooltip"; "required": false; }; "rcTooltipPosition": { "alias": "rcTooltipPosition"; "required": false; }; "rcTooltipDisabled": { "alias": "rcTooltipDisabled"; "required": false; }; }, {}, never, never, true, never>;
|
|
2927
|
+
}
|
|
2928
|
+
|
|
2929
|
+
/**
|
|
2930
|
+
* A single item inside an `<rc-menu>`.
|
|
2931
|
+
*
|
|
2932
|
+
* Renders as a full-width button. Optionally accepts a leading icon via `icon`.
|
|
2933
|
+
*
|
|
2934
|
+
* @example
|
|
2935
|
+
* ```html
|
|
2936
|
+
* <rc-menu-item icon="edit-2-outline" (itemClick)="edit()">Edit</rc-menu-item>
|
|
2937
|
+
* <rc-menu-item icon="trash-2-outline" [danger]="true" (itemClick)="delete()">Delete</rc-menu-item>
|
|
2938
|
+
* <rc-menu-item [disabled]="true">Unavailable</rc-menu-item>
|
|
2939
|
+
* ```
|
|
2940
|
+
*/
|
|
2941
|
+
declare class RcMenuItemComponent {
|
|
2942
|
+
/** Eva icon name for the leading icon slot. */
|
|
2943
|
+
icon: string;
|
|
2944
|
+
/** Renders the item with danger (red) text colouring. Default: `false` */
|
|
2945
|
+
danger: boolean;
|
|
2946
|
+
/** Prevents clicking. Default: `false` */
|
|
2947
|
+
disabled: boolean;
|
|
2948
|
+
/** Emitted when this item is clicked (and not disabled). */
|
|
2949
|
+
readonly itemClick: EventEmitter<void>;
|
|
2950
|
+
private readonly _close;
|
|
2951
|
+
/** @internal */
|
|
2952
|
+
_onClick(): void;
|
|
2953
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<RcMenuItemComponent, never>;
|
|
2954
|
+
static ɵcmp: i0.ɵɵComponentDeclaration<RcMenuItemComponent, "rc-menu-item", never, { "icon": { "alias": "icon"; "required": false; }; "danger": { "alias": "danger"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; }, { "itemClick": "itemClick"; }, never, ["*"], true, never>;
|
|
2955
|
+
}
|
|
2956
|
+
/**
|
|
2957
|
+
* A thin horizontal rule that visually groups menu items.
|
|
2958
|
+
*
|
|
2959
|
+
* @example
|
|
2960
|
+
* ```html
|
|
2961
|
+
* <rc-menu-item>Edit</rc-menu-item>
|
|
2962
|
+
* <rc-menu-separator></rc-menu-separator>
|
|
2963
|
+
* <rc-menu-item danger>Delete</rc-menu-item>
|
|
2964
|
+
* ```
|
|
2965
|
+
*/
|
|
2966
|
+
declare class RcMenuSeparatorComponent {
|
|
2967
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<RcMenuSeparatorComponent, never>;
|
|
2968
|
+
static ɵcmp: i0.ɵɵComponentDeclaration<RcMenuSeparatorComponent, "rc-menu-separator", never, {}, {}, never, never, true, never>;
|
|
2969
|
+
}
|
|
2970
|
+
/**
|
|
2971
|
+
* A floating menu panel populated with `<rc-menu-item>` and `<rc-menu-separator>`.
|
|
2972
|
+
*
|
|
2973
|
+
* Open it by attaching `[rcMenuTriggerFor]="myMenu"` to any element.
|
|
2974
|
+
*
|
|
2975
|
+
* @example
|
|
2976
|
+
* ```html
|
|
2977
|
+
* <button rcButton [rcMenuTriggerFor]="actions">Actions <rc-icon name="chevron-down"></rc-icon></button>
|
|
2978
|
+
*
|
|
2979
|
+
* <rc-menu #actions>
|
|
2980
|
+
* <rc-menu-item icon="edit-2-outline" (itemClick)="onEdit()">Edit</rc-menu-item>
|
|
2981
|
+
* <rc-menu-item icon="copy-outline" (itemClick)="onDuplicate()">Duplicate</rc-menu-item>
|
|
2982
|
+
* <rc-menu-separator></rc-menu-separator>
|
|
2983
|
+
* <rc-menu-item icon="trash-2-outline" [danger]="true" (itemClick)="onDelete()">Delete</rc-menu-item>
|
|
2984
|
+
* </rc-menu>
|
|
2985
|
+
* ```
|
|
2986
|
+
*/
|
|
2987
|
+
declare class RcMenuComponent {
|
|
2988
|
+
/** Minimum width of the panel in pixels. Default: `160` */
|
|
2989
|
+
minWidth: number;
|
|
2990
|
+
/** @internal Emitted when the panel should close (e.g. Escape key). */
|
|
2991
|
+
readonly _closeRequest: EventEmitter<void>;
|
|
2992
|
+
readonly _panelTpl: TemplateRef<unknown>;
|
|
2993
|
+
readonly _items: QueryList<RcMenuItemComponent>;
|
|
2994
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<RcMenuComponent, never>;
|
|
2995
|
+
static ɵcmp: i0.ɵɵComponentDeclaration<RcMenuComponent, "rc-menu", never, { "minWidth": { "alias": "minWidth"; "required": false; }; }, {}, ["_items"], ["*"], true, never>;
|
|
2996
|
+
}
|
|
2997
|
+
/**
|
|
2998
|
+
* Directive that opens an associated `<rc-menu>` in a CDK overlay when the
|
|
2999
|
+
* host element is clicked.
|
|
3000
|
+
*
|
|
3001
|
+
* @example
|
|
3002
|
+
* ```html
|
|
3003
|
+
* <button rcButton [rcMenuTriggerFor]="myMenu">Open ▾</button>
|
|
3004
|
+
* <rc-menu #myMenu>
|
|
3005
|
+
* <rc-menu-item (itemClick)="onAction()">Action</rc-menu-item>
|
|
3006
|
+
* </rc-menu>
|
|
3007
|
+
* ```
|
|
3008
|
+
*/
|
|
3009
|
+
declare class RcMenuTriggerDirective implements OnDestroy {
|
|
3010
|
+
/** The `<rc-menu>` template to open. */
|
|
3011
|
+
rcMenuTriggerFor: RcMenuComponent;
|
|
3012
|
+
/** Alignment of the menu relative to the trigger. Default: `'start'` */
|
|
3013
|
+
rcMenuAlign: 'start' | 'end';
|
|
3014
|
+
readonly _isOpen: i0.WritableSignal<boolean>;
|
|
3015
|
+
private readonly _overlay;
|
|
3016
|
+
private readonly _el;
|
|
3017
|
+
private readonly _vcr;
|
|
3018
|
+
private _overlayRef;
|
|
3019
|
+
private _portal;
|
|
3020
|
+
/** @internal */
|
|
3021
|
+
_toggle(): void;
|
|
3022
|
+
/** @internal */
|
|
3023
|
+
_open(): void;
|
|
3024
|
+
private _close;
|
|
3025
|
+
ngOnDestroy(): void;
|
|
3026
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<RcMenuTriggerDirective, never>;
|
|
3027
|
+
static ɵdir: i0.ɵɵDirectiveDeclaration<RcMenuTriggerDirective, "[rcMenuTriggerFor]", never, { "rcMenuTriggerFor": { "alias": "rcMenuTriggerFor"; "required": true; }; "rcMenuAlign": { "alias": "rcMenuAlign"; "required": false; }; }, {}, never, never, true, never>;
|
|
3028
|
+
}
|
|
3029
|
+
|
|
3030
|
+
/**
|
|
3031
|
+
* Infinite-scroll container that fires `(loadMore)` when a sentinel element
|
|
3032
|
+
* near the bottom of the list enters the viewport.
|
|
3033
|
+
*
|
|
3034
|
+
* The host element acts as the scrollable container when `scrollable` is true.
|
|
3035
|
+
* Place your list (or `<table rcTable>`) as content — the sentinel and spinner
|
|
3036
|
+
* are rendered automatically.
|
|
3037
|
+
*
|
|
3038
|
+
* Uses the browser's `IntersectionObserver` API — no scroll event listeners.
|
|
3039
|
+
*
|
|
3040
|
+
* @example Basic list
|
|
3041
|
+
* ```html
|
|
3042
|
+
* <rc-infinite-scroll
|
|
3043
|
+
* [loading]="loading"
|
|
3044
|
+
* [hasMore]="hasMore"
|
|
3045
|
+
* (loadMore)="fetchMore()"
|
|
3046
|
+
* >
|
|
3047
|
+
* <div *ngFor="let item of items">{{ item.name }}</div>
|
|
3048
|
+
* </rc-infinite-scroll>
|
|
3049
|
+
* ```
|
|
3050
|
+
*
|
|
3051
|
+
* @example With rc-table inside
|
|
3052
|
+
* ```html
|
|
3053
|
+
* <rc-infinite-scroll [loading]="loading" [hasMore]="hasMore" (loadMore)="fetch()">
|
|
3054
|
+
* <table rcTable [dataSource]="rows">
|
|
3055
|
+
* <!-- columns… -->
|
|
3056
|
+
* </table>
|
|
3057
|
+
* </rc-infinite-scroll>
|
|
3058
|
+
* ```
|
|
3059
|
+
*/
|
|
3060
|
+
declare class RcInfiniteScrollComponent implements AfterViewInit, OnChanges, OnDestroy {
|
|
3061
|
+
private sentinelRef;
|
|
3062
|
+
private readonly zone;
|
|
3063
|
+
private readonly elementRef;
|
|
3064
|
+
/** Whether a load is currently in progress. While true `(loadMore)` won't fire. */
|
|
3065
|
+
loading: boolean;
|
|
3066
|
+
/**
|
|
3067
|
+
* Set to `false` when all data has been fetched. Hides the sentinel and
|
|
3068
|
+
* shows the end-of-list message.
|
|
3069
|
+
*/
|
|
3070
|
+
hasMore: boolean;
|
|
3071
|
+
/**
|
|
3072
|
+
* Makes the host element itself the scrollable container (adds
|
|
3073
|
+
* `overflow-y: auto` and a fixed height inherited from the parent).
|
|
3074
|
+
* Default: `false` — the page scroll triggers loading.
|
|
3075
|
+
*/
|
|
3076
|
+
scrollable: boolean;
|
|
3077
|
+
/** Colour variant passed to the internal `<rc-spinner>`. Default: `'primary'` */
|
|
3078
|
+
spinnerStatus: RcSpinnerStatus;
|
|
3079
|
+
/** Optional message displayed beneath the spinner while loading. */
|
|
3080
|
+
loadingMessage: string;
|
|
3081
|
+
/** Whether to render the end-of-list message when `hasMore` is false. Default: `true` */
|
|
3082
|
+
showEndMessage: boolean;
|
|
3083
|
+
/** Text displayed when `hasMore` is false and `showEndMessage` is true. */
|
|
3084
|
+
endMessage: string;
|
|
3085
|
+
/**
|
|
3086
|
+
* Root margin (in px) added to the bottom of the viewport — the `(loadMore)`
|
|
3087
|
+
* event fires when the sentinel is within this many pixels of the fold.
|
|
3088
|
+
* Default: `120`
|
|
3089
|
+
*/
|
|
3090
|
+
threshold: number;
|
|
3091
|
+
/**
|
|
3092
|
+
* Emits when the sentinel element enters the viewport and `hasMore` is true
|
|
3093
|
+
* and `loading` is false.
|
|
3094
|
+
*/
|
|
3095
|
+
loadMore: EventEmitter<void>;
|
|
3096
|
+
private observer?;
|
|
3097
|
+
private isSentinelVisible;
|
|
3098
|
+
ngAfterViewInit(): void;
|
|
3099
|
+
ngOnChanges(changes: SimpleChanges): void;
|
|
3100
|
+
ngOnDestroy(): void;
|
|
3101
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<RcInfiniteScrollComponent, never>;
|
|
3102
|
+
static ɵcmp: i0.ɵɵComponentDeclaration<RcInfiniteScrollComponent, "rc-infinite-scroll", never, { "loading": { "alias": "loading"; "required": false; }; "hasMore": { "alias": "hasMore"; "required": false; }; "scrollable": { "alias": "scrollable"; "required": false; }; "spinnerStatus": { "alias": "spinnerStatus"; "required": false; }; "loadingMessage": { "alias": "loadingMessage"; "required": false; }; "showEndMessage": { "alias": "showEndMessage"; "required": false; }; "endMessage": { "alias": "endMessage"; "required": false; }; "threshold": { "alias": "threshold"; "required": false; }; }, { "loadMore": "loadMore"; }, never, ["*"], true, never>;
|
|
3103
|
+
}
|
|
3104
|
+
|
|
3105
|
+
/** Event emitted whenever the page index or page size changes. */
|
|
3106
|
+
interface RcPageEvent {
|
|
3107
|
+
/** Current zero-based page index after the change. */
|
|
3108
|
+
pageIndex: number;
|
|
3109
|
+
/** Zero-based page index before the change. */
|
|
3110
|
+
previousPageIndex: number;
|
|
3111
|
+
/** Items shown per page after the change. */
|
|
3112
|
+
pageSize: number;
|
|
3113
|
+
/** Total number of items. */
|
|
3114
|
+
length: number;
|
|
3115
|
+
}
|
|
3116
|
+
/** A page-number token — either a 1-based number or `'...'` for an ellipsis gap. */
|
|
3117
|
+
type RcPaginatorPage = number | '...';
|
|
3118
|
+
/**
|
|
3119
|
+
* A full-featured paginator for navigating through paged data.
|
|
3120
|
+
*
|
|
3121
|
+
* Generates page-number buttons (with ellipsis for large ranges) and optionally
|
|
3122
|
+
* an inline page-size selector. Emits `(pageChange)` whenever the user navigates.
|
|
3123
|
+
*
|
|
3124
|
+
* All page indexes are **zero-based** — the first page is `pageIndex = 0`.
|
|
3125
|
+
*
|
|
3126
|
+
* @example Basic (bind to rc-table dataSource)
|
|
3127
|
+
* ```html
|
|
3128
|
+
* <rc-paginator
|
|
3129
|
+
* [length]="total"
|
|
3130
|
+
* [pageIndex]="pageIndex"
|
|
3131
|
+
* [pageSize]="pageSize"
|
|
3132
|
+
* (pageChange)="onPage($event)"
|
|
3133
|
+
* ></rc-paginator>
|
|
3134
|
+
* ```
|
|
3135
|
+
*
|
|
3136
|
+
* @example With page-size selector
|
|
3137
|
+
* ```html
|
|
3138
|
+
* <rc-paginator
|
|
3139
|
+
* [length]="total"
|
|
3140
|
+
* [pageIndex]="pageIndex"
|
|
3141
|
+
* [pageSize]="pageSize"
|
|
3142
|
+
* [pageSizeOptions]="[10, 25, 50, 100]"
|
|
3143
|
+
* (pageChange)="onPage($event)"
|
|
3144
|
+
* ></rc-paginator>
|
|
3145
|
+
* ```
|
|
3146
|
+
*/
|
|
3147
|
+
declare class RcPaginatorComponent implements OnChanges {
|
|
3148
|
+
/** Total number of items in the data set. */
|
|
3149
|
+
length: number;
|
|
3150
|
+
/** Zero-based index of the currently displayed page. Default: `0` */
|
|
3151
|
+
pageIndex: number;
|
|
3152
|
+
/** Number of items shown per page. Default: `10` */
|
|
3153
|
+
pageSize: number;
|
|
3154
|
+
/**
|
|
3155
|
+
* Array of page-size options rendered in the size selector.
|
|
3156
|
+
* Pass an empty array (default) to hide the selector entirely.
|
|
3157
|
+
*/
|
|
3158
|
+
pageSizeOptions: number[];
|
|
3159
|
+
/**
|
|
3160
|
+
* Whether to render First-page and Last-page shortcut buttons.
|
|
3161
|
+
* Default: `true`
|
|
3162
|
+
*/
|
|
3163
|
+
showFirstLast: boolean;
|
|
3164
|
+
/**
|
|
3165
|
+
* Maximum number of page-number buttons to show before collapsing with
|
|
3166
|
+
* ellipsis. Must be odd and ≥ 5. Default: `7`
|
|
3167
|
+
*/
|
|
3168
|
+
maxPageButtons: number;
|
|
3169
|
+
/** ARIA label for the paginator host element. */
|
|
3170
|
+
navigationAriaLabel: string;
|
|
3171
|
+
/** Label text next to the page-size selector. */
|
|
3172
|
+
rowsPerPageLabel: string;
|
|
3173
|
+
/** ARIA label for the page-size selector. */
|
|
3174
|
+
rowsPerPageAriaLabel: string;
|
|
3175
|
+
/** ARIA label for the First-page button. */
|
|
3176
|
+
firstPageAriaLabel: string;
|
|
3177
|
+
/** ARIA label for the Previous-page button. */
|
|
3178
|
+
previousPageAriaLabel: string;
|
|
3179
|
+
/** ARIA label for the Next-page button. */
|
|
3180
|
+
nextPageAriaLabel: string;
|
|
3181
|
+
/** ARIA label for the Last-page button. */
|
|
3182
|
+
lastPageAriaLabel: string;
|
|
3183
|
+
/**
|
|
3184
|
+
* Function that returns the ARIA label for a numbered page button.
|
|
3185
|
+
* Receives the 1-based page number.
|
|
3186
|
+
*/
|
|
3187
|
+
pageAriaLabelFn: (page: number) => string;
|
|
3188
|
+
/**
|
|
3189
|
+
* Function that builds the range label shown between the nav and the size
|
|
3190
|
+
* selector. Receives `(start, end, length)` — all 1-based.
|
|
3191
|
+
* Default produces `"1 – 10 of 87"`.
|
|
3192
|
+
*/
|
|
3193
|
+
rangeLabelFn: (start: number, end: number, length: number) => string;
|
|
3194
|
+
/** Emitted when the page index or page size changes. */
|
|
3195
|
+
pageChange: EventEmitter<RcPageEvent>;
|
|
3196
|
+
get pageCount(): number;
|
|
3197
|
+
get isFirstPage(): boolean;
|
|
3198
|
+
get isLastPage(): boolean;
|
|
3199
|
+
get rangeLabel(): string;
|
|
3200
|
+
pages: RcPaginatorPage[];
|
|
3201
|
+
ngOnChanges(changes: SimpleChanges): void;
|
|
3202
|
+
firstPage(): void;
|
|
3203
|
+
prevPage(): void;
|
|
3204
|
+
nextPage(): void;
|
|
3205
|
+
lastPage(): void;
|
|
3206
|
+
goToPage(index: number): void;
|
|
3207
|
+
onSizeChange(value: unknown): void;
|
|
3208
|
+
private emit;
|
|
3209
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<RcPaginatorComponent, never>;
|
|
3210
|
+
static ɵcmp: i0.ɵɵComponentDeclaration<RcPaginatorComponent, "rc-paginator", never, { "length": { "alias": "length"; "required": false; }; "pageIndex": { "alias": "pageIndex"; "required": false; }; "pageSize": { "alias": "pageSize"; "required": false; }; "pageSizeOptions": { "alias": "pageSizeOptions"; "required": false; }; "showFirstLast": { "alias": "showFirstLast"; "required": false; }; "maxPageButtons": { "alias": "maxPageButtons"; "required": false; }; "navigationAriaLabel": { "alias": "navigationAriaLabel"; "required": false; }; "rowsPerPageLabel": { "alias": "rowsPerPageLabel"; "required": false; }; "rowsPerPageAriaLabel": { "alias": "rowsPerPageAriaLabel"; "required": false; }; "firstPageAriaLabel": { "alias": "firstPageAriaLabel"; "required": false; }; "previousPageAriaLabel": { "alias": "previousPageAriaLabel"; "required": false; }; "nextPageAriaLabel": { "alias": "nextPageAriaLabel"; "required": false; }; "lastPageAriaLabel": { "alias": "lastPageAriaLabel"; "required": false; }; "pageAriaLabelFn": { "alias": "pageAriaLabelFn"; "required": false; }; "rangeLabelFn": { "alias": "rangeLabelFn"; "required": false; }; }, { "pageChange": "pageChange"; }, never, never, true, never>;
|
|
3211
|
+
}
|
|
3212
|
+
|
|
3213
|
+
export { DARK_THEME, DEFAULT_THEME, RC_ACCORDION, RC_BUILT_IN_JS_THEMES, RC_DIALOG_DATA, RC_JS_THEMES, RC_RADIO_GROUP, RC_SIDENAV_CONTAINER, RC_SORT, RC_TABLE_DIRECTIVES, RC_THEME_OPTIONS, RcAccordionComponent, RcAccordionItemComponent, RcAlertComponent, RcAutocompleteComponent, RcBadgeComponent, RcButtonComponent, RcCardComponent, RcCellDefDirective, RcCellDirective, RcCheckboxComponent, RcChipComponent, RcColumnDefDirective, RcDatepickerComponent, RcDialogActionsDirective, RcDialogContainerComponent, RcDialogContentDirective, RcDialogRef, RcDialogService, RcDialogTitleDirective, RcFileUploadComponent, RcFooterCellDefDirective, RcFooterCellDirective, RcFooterRowComponent, RcFooterRowDefDirective, RcHeaderCellDefDirective, RcHeaderCellDirective, RcHeaderRowComponent, RcHeaderRowDefDirective, RcIconComponent, RcInfiniteScrollComponent, RcInputDirective, RcJSThemesRegistry, RcLayout, RcMenuComponent, RcMenuItemComponent, RcMenuSeparatorComponent, RcMenuTriggerDirective, RcNavbarActionsDirective, RcNavbarBrandDirective, RcNavbarComponent, RcNavbarRowComponent, RcNavbarSpacerComponent, RcNoDataRowDirective, RcOptionComponent, RcPaginatorComponent, RcProgressBarComponent, RcRadioButtonComponent, RcRadioGroupComponent, RcRowComponent, RcRowDefDirective, RcSelectComponent, RcSidenavComponent, RcSidenavContainerComponent, RcSidenavContentComponent, RcSliderComponent, RcSortDirective, RcSortHeaderComponent, RcSpinnerComponent, RcSpinnerDirective, RcTabComponent, RcTableComponent, RcTableDataSource, RcTabsComponent, RcThemeModule, RcThemeService, RcToastComponent, RcToastContainerComponent, RcToastService, RcToggleComponent, RcTooltipDirective, RcTreeComponent, RcTreeNodeComponent, RcVirtualScrollViewportComponent, ResolveComponents, provideRcTheme };
|
|
3214
|
+
export type { RcAccordionVariant, RcAlertStatus, RcAlertVariant, RcAutocompleteOption, RcAutocompleteSize, RcAutocompleteStatus, RcBadgeSize, RcBadgeStatus, RcBadgeVariant, RcButtonSize, RcButtonStatus, RcButtonVariant, RcCheckboxSize, RcCheckboxStatus, RcChipSize, RcChipStatus, RcDatepickerMode, RcDatepickerSize, RcDatepickerStatus, RcDialogConfig, RcIconStatus, RcInputSize, RcInputStatus, RcJSThemeOptions, RcJSThemeVariable, RcNavbarColor, RcNavbarPosition, RcPageEvent, RcPaginatorPage, RcProgressBarStatus, RcRadioSize, RcSelectSize, RcSelectStatus, RcSidenavMode, RcSidenavPosition, RcSliderSize, RcSliderStatus, RcSortDirection, RcSortState, RcSpinnerSize, RcSpinnerStatus, RcTabStatus, RcTabsSize, RcThemeChange, RcThemeOptions, RcToastConfig, RcToastPosition, RcToastRef, RcToastStatus, RcToggleSize, RcTooltipPosition, RcTreeNodeData, RcTreeSelectionMode, RcUploadedFile };
|