@life-cockpit/angular-ui-kit 1.0.3 → 1.1.1
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.
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import * as _angular_core from '@angular/core';
|
|
2
|
-
import { EventEmitter, ElementRef, OnInit, OnDestroy, AfterViewInit, QueryList, Signal, TemplateRef, AfterContentInit } from '@angular/core';
|
|
2
|
+
import { EventEmitter, ElementRef, OnInit, OnDestroy, AfterViewInit, QueryList, Signal, TemplateRef, AfterContentInit, AfterViewChecked } from '@angular/core';
|
|
3
3
|
import { ControlValueAccessor } from '@angular/forms';
|
|
4
|
-
import { SafeHtml } from '@angular/platform-browser';
|
|
4
|
+
import { SafeHtml, DomSanitizer, SafeResourceUrl } from '@angular/platform-browser';
|
|
5
5
|
|
|
6
6
|
/**
|
|
7
7
|
* Do not edit directly, this file was auto-generated.
|
|
@@ -212,6 +212,13 @@ interface NavigationItem {
|
|
|
212
212
|
/**
|
|
213
213
|
* Accordion component for collapsible content sections.
|
|
214
214
|
*
|
|
215
|
+
* Features:
|
|
216
|
+
* - Expandable/collapsible content panels
|
|
217
|
+
* - Two-way binding for expanded state
|
|
218
|
+
* - Animated expand/collapse transitions
|
|
219
|
+
* - Content projection for custom body content
|
|
220
|
+
* - Accessible with keyboard support
|
|
221
|
+
*
|
|
215
222
|
* @example
|
|
216
223
|
* ```html
|
|
217
224
|
* <lc-accordion title="Section Title" [(expanded)]="isOpen">
|
|
@@ -268,7 +275,14 @@ declare class ButtonComponent {
|
|
|
268
275
|
}
|
|
269
276
|
|
|
270
277
|
/**
|
|
271
|
-
* Card component for content grouping and hierarchy.
|
|
278
|
+
* Card component for content grouping and visual hierarchy.
|
|
279
|
+
*
|
|
280
|
+
* Features:
|
|
281
|
+
* - Variant styles (elevated, outlined, filled)
|
|
282
|
+
* - Configurable padding (none, sm, md, lg)
|
|
283
|
+
* - Border radius options (none, sm, md, lg, xl)
|
|
284
|
+
* - Optional title display
|
|
285
|
+
* - Content projection for flexible body content
|
|
272
286
|
*
|
|
273
287
|
* @example
|
|
274
288
|
* ```html
|
|
@@ -384,7 +398,7 @@ type IconSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
|
|
|
384
398
|
* - Signal-based reactive API
|
|
385
399
|
* - Support for outline and solid variants
|
|
386
400
|
* - Multiple size options (xs, sm, md, lg, xl)
|
|
387
|
-
* - Custom color support (CSS colors, variables
|
|
401
|
+
* - Custom color support (CSS colors, variables)
|
|
388
402
|
* - Accessibility attributes (ARIA labels, decorative icons)
|
|
389
403
|
* - Dynamic SVG loading from Heroicons
|
|
390
404
|
*
|
|
@@ -399,8 +413,8 @@ type IconSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
|
|
|
399
413
|
* <!-- With custom color -->
|
|
400
414
|
* <lc-icon name="arrow-right" color="#FF5733" />
|
|
401
415
|
*
|
|
402
|
-
* <!-- With
|
|
403
|
-
* <lc-icon name="star" color="
|
|
416
|
+
* <!-- With CSS variable color -->
|
|
417
|
+
* <lc-icon name="star" color="var(--color-primary-500)" />
|
|
404
418
|
*
|
|
405
419
|
* <!-- With accessibility label -->
|
|
406
420
|
* <lc-icon name="user" ariaLabel="User profile" />
|
|
@@ -437,7 +451,6 @@ declare class IconComponent {
|
|
|
437
451
|
* Can be:
|
|
438
452
|
* - CSS color: "#FF5733", "rgb(255, 87, 51)"
|
|
439
453
|
* - CSS variable: "var(--color-primary-500)"
|
|
440
|
-
* - Tailwind class: "text-primary-500"
|
|
441
454
|
* - "currentColor" (default - inherits from parent)
|
|
442
455
|
* @default "currentColor"
|
|
443
456
|
*/
|
|
@@ -499,11 +512,15 @@ declare class IconComponent {
|
|
|
499
512
|
}
|
|
500
513
|
|
|
501
514
|
/**
|
|
502
|
-
* Logo
|
|
515
|
+
* Logo component for displaying the Life-Cockpit brand identity.
|
|
503
516
|
*
|
|
504
|
-
*
|
|
517
|
+
* Features:
|
|
518
|
+
* - Full logo and emblem-only variants
|
|
519
|
+
* - Multiple size options (sm, md, lg)
|
|
520
|
+
* - SVG-based for crisp rendering at any resolution
|
|
521
|
+
* - Dark mode compatible
|
|
505
522
|
*
|
|
506
|
-
*
|
|
523
|
+
* @example
|
|
507
524
|
* ```html
|
|
508
525
|
* <lc-logo variant="full" size="md"></lc-logo>
|
|
509
526
|
* <lc-logo variant="emblem" size="sm"></lc-logo>
|
|
@@ -594,6 +611,11 @@ declare class MenuComponent {
|
|
|
594
611
|
* @default 'bottom-right'
|
|
595
612
|
*/
|
|
596
613
|
position: 'bottom-left' | 'bottom-right' | 'top-left' | 'top-right';
|
|
614
|
+
/**
|
|
615
|
+
* Size of menu items
|
|
616
|
+
* @default 'md'
|
|
617
|
+
*/
|
|
618
|
+
size: 'sm' | 'md' | 'lg';
|
|
597
619
|
/**
|
|
598
620
|
* Minimum width of menu dropdown
|
|
599
621
|
* @default '220px'
|
|
@@ -625,24 +647,25 @@ declare class MenuComponent {
|
|
|
625
647
|
*/
|
|
626
648
|
onEscapeKey(): void;
|
|
627
649
|
static ɵfac: _angular_core.ɵɵFactoryDeclaration<MenuComponent, never>;
|
|
628
|
-
static ɵcmp: _angular_core.ɵɵComponentDeclaration<MenuComponent, "lc-menu", never, { "items": { "alias": "items"; "required": false; }; "isOpen": { "alias": "isOpen"; "required": false; }; "position": { "alias": "position"; "required": false; }; "minWidth": { "alias": "minWidth"; "required": false; }; }, { "itemClick": "itemClick"; "closed": "closed"; }, never, ["[trigger]", "[header]", "[footer]"], true, never>;
|
|
650
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<MenuComponent, "lc-menu", never, { "items": { "alias": "items"; "required": false; }; "isOpen": { "alias": "isOpen"; "required": false; }; "position": { "alias": "position"; "required": false; }; "size": { "alias": "size"; "required": false; }; "minWidth": { "alias": "minWidth"; "required": false; }; }, { "itemClick": "itemClick"; "closed": "closed"; }, never, ["[trigger]", "[header]", "[footer]"], true, never>;
|
|
629
651
|
}
|
|
630
652
|
|
|
631
653
|
/**
|
|
632
|
-
*
|
|
654
|
+
* Input component for single-line text form data entry.
|
|
633
655
|
*
|
|
634
|
-
*
|
|
635
|
-
*
|
|
656
|
+
* Features:
|
|
657
|
+
* - Type variants (text, email, password, number, tel, url)
|
|
658
|
+
* - Size presets (xs, sm, md, lg)
|
|
659
|
+
* - Leading and trailing icon support
|
|
660
|
+
* - Character count display with maxLength
|
|
661
|
+
* - Validation error message display
|
|
662
|
+
* - Helper text support
|
|
663
|
+
* - Disabled and readonly states
|
|
664
|
+
* - ControlValueAccessor integration for reactive forms
|
|
636
665
|
*
|
|
637
666
|
* @example
|
|
638
667
|
* ```html
|
|
639
|
-
* <lc-input
|
|
640
|
-
* label="Email"
|
|
641
|
-
* type="email"
|
|
642
|
-
* placeholder="Enter your email"
|
|
643
|
-
* [(ngModel)]="email"
|
|
644
|
-
* [error]="emailError"
|
|
645
|
-
* ></lc-input>
|
|
668
|
+
* <lc-input label="Email" type="email" placeholder="Enter email" [(ngModel)]="email" />
|
|
646
669
|
* ```
|
|
647
670
|
*/
|
|
648
671
|
declare class InputComponent implements ControlValueAccessor {
|
|
@@ -822,25 +845,22 @@ declare class RadioComponent implements ControlValueAccessor, OnInit, OnDestroy
|
|
|
822
845
|
}
|
|
823
846
|
|
|
824
847
|
/**
|
|
825
|
-
* Typography
|
|
848
|
+
* Typography component for consistent text styling.
|
|
826
849
|
*
|
|
827
|
-
*
|
|
828
|
-
*
|
|
829
|
-
*
|
|
850
|
+
* Features:
|
|
851
|
+
* - Semantic variants (h1–h6, body1, body2, caption, overline)
|
|
852
|
+
* - Automatic HTML element mapping per variant
|
|
853
|
+
* - Text alignment options (left, center, right, justify)
|
|
854
|
+
* - Color variants (primary, secondary, success, warning, error, info)
|
|
855
|
+
* - Font weight overrides (regular, medium, semibold, bold)
|
|
856
|
+
* - Text transform (uppercase, lowercase, capitalize)
|
|
857
|
+
* - Line clamping for text truncation
|
|
858
|
+
* - Gutter bottom margin option
|
|
830
859
|
*
|
|
831
860
|
* @example
|
|
832
861
|
* ```html
|
|
833
|
-
* <lc-typography variant="h1"
|
|
834
|
-
*
|
|
835
|
-
* </lc-typography>
|
|
836
|
-
*
|
|
837
|
-
* <lc-typography variant="body1" gutterBottom>
|
|
838
|
-
* Body text with bottom margin
|
|
839
|
-
* </lc-typography>
|
|
840
|
-
*
|
|
841
|
-
* <lc-typography variant="caption" color="secondary" lineClamp="2">
|
|
842
|
-
* This is a caption that will be truncated after 2 lines...
|
|
843
|
-
* </lc-typography>
|
|
862
|
+
* <lc-typography variant="h1" color="primary">Heading</lc-typography>
|
|
863
|
+
* <lc-typography variant="body1" [lineClamp]="2">Truncated text...</lc-typography>
|
|
844
864
|
* ```
|
|
845
865
|
*/
|
|
846
866
|
declare class TypographyComponent {
|
|
@@ -906,16 +926,21 @@ declare class TypographyComponent {
|
|
|
906
926
|
|
|
907
927
|
type DateValue = Date | string | null;
|
|
908
928
|
/**
|
|
909
|
-
*
|
|
929
|
+
* Datepicker component for date selection with calendar overlay.
|
|
930
|
+
*
|
|
931
|
+
* Features:
|
|
932
|
+
* - Calendar popup with month and year navigation
|
|
933
|
+
* - Min/max date constraints
|
|
934
|
+
* - Disabled specific dates and weekends
|
|
935
|
+
* - Configurable date format string
|
|
936
|
+
* - Variant styles (outline, filled)
|
|
937
|
+
* - Size presets (xs, sm, md, lg)
|
|
938
|
+
* - Disabled and readonly states
|
|
939
|
+
* - ControlValueAccessor integration for reactive forms
|
|
910
940
|
*
|
|
911
941
|
* @example
|
|
912
942
|
* ```html
|
|
913
|
-
* <lc-datepicker
|
|
914
|
-
* variant="outline"
|
|
915
|
-
* size="md"
|
|
916
|
-
* placeholder="Select a date"
|
|
917
|
-
* [(ngModel)]="selectedDate"
|
|
918
|
-
* ></lc-datepicker>
|
|
943
|
+
* <lc-datepicker placeholder="Select date" [(ngModel)]="selectedDate" />
|
|
919
944
|
* ```
|
|
920
945
|
*/
|
|
921
946
|
declare class DatepickerComponent implements ControlValueAccessor {
|
|
@@ -1101,17 +1126,22 @@ interface SelectOptionGroup {
|
|
|
1101
1126
|
}
|
|
1102
1127
|
type SelectValue = string | number | string[] | number[] | null;
|
|
1103
1128
|
/**
|
|
1104
|
-
* Select component for dropdown selection
|
|
1129
|
+
* Select component for dropdown option selection.
|
|
1130
|
+
*
|
|
1131
|
+
* Features:
|
|
1132
|
+
* - Single and multiple selection modes
|
|
1133
|
+
* - Searchable/filterable option list
|
|
1134
|
+
* - Option groups with headers
|
|
1135
|
+
* - Loading state indicator
|
|
1136
|
+
* - Variant styles (outline, filled)
|
|
1137
|
+
* - Size presets (xs, sm, md, lg)
|
|
1138
|
+
* - Keyboard navigation support
|
|
1139
|
+
* - CDK overlay positioning
|
|
1140
|
+
* - ControlValueAccessor integration for reactive forms
|
|
1105
1141
|
*
|
|
1106
1142
|
* @example
|
|
1107
1143
|
* ```html
|
|
1108
|
-
* <lc-select
|
|
1109
|
-
* [options]="options"
|
|
1110
|
-
* variant="outline"
|
|
1111
|
-
* size="md"
|
|
1112
|
-
* placeholder="Select an option"
|
|
1113
|
-
* [(ngModel)]="selectedValue"
|
|
1114
|
-
* ></lc-select>
|
|
1144
|
+
* <lc-select [options]="options" placeholder="Choose" [(ngModel)]="selected" />
|
|
1115
1145
|
* ```
|
|
1116
1146
|
*/
|
|
1117
1147
|
declare class SelectComponent implements ControlValueAccessor {
|
|
@@ -1243,16 +1273,20 @@ declare class SelectComponent implements ControlValueAccessor {
|
|
|
1243
1273
|
}
|
|
1244
1274
|
|
|
1245
1275
|
/**
|
|
1246
|
-
* Switch component for toggle functionality.
|
|
1276
|
+
* Switch component for boolean toggle functionality.
|
|
1277
|
+
*
|
|
1278
|
+
* Features:
|
|
1279
|
+
* - Color variants (primary, secondary, success, warning, danger)
|
|
1280
|
+
* - Size options (sm, md, lg)
|
|
1281
|
+
* - Loading state with spinner
|
|
1282
|
+
* - Configurable label positioning (left/right)
|
|
1283
|
+
* - Keyboard toggle support
|
|
1284
|
+
* - Disabled and required states
|
|
1285
|
+
* - ControlValueAccessor integration for reactive forms
|
|
1247
1286
|
*
|
|
1248
1287
|
* @example
|
|
1249
1288
|
* ```html
|
|
1250
|
-
* <lc-switch
|
|
1251
|
-
* variant="primary"
|
|
1252
|
-
* size="md"
|
|
1253
|
-
* label="Enable notifications"
|
|
1254
|
-
* [(ngModel)]="isEnabled"
|
|
1255
|
-
* ></lc-switch>
|
|
1289
|
+
* <lc-switch label="Enable notifications" [(ngModel)]="isEnabled" />
|
|
1256
1290
|
* ```
|
|
1257
1291
|
*/
|
|
1258
1292
|
declare class SwitchComponent implements ControlValueAccessor {
|
|
@@ -1326,14 +1360,18 @@ declare class SwitchComponent implements ControlValueAccessor {
|
|
|
1326
1360
|
/**
|
|
1327
1361
|
* Textarea component for multi-line text input.
|
|
1328
1362
|
*
|
|
1363
|
+
* Features:
|
|
1364
|
+
* - Variant styles (outline, filled)
|
|
1365
|
+
* - Size presets (xs, sm, md, lg)
|
|
1366
|
+
* - Auto-resize with configurable min/max rows
|
|
1367
|
+
* - Character count display with maxLength
|
|
1368
|
+
* - Validation error message and helper text
|
|
1369
|
+
* - Disabled and readonly states
|
|
1370
|
+
* - ControlValueAccessor integration for reactive forms
|
|
1371
|
+
*
|
|
1329
1372
|
* @example
|
|
1330
1373
|
* ```html
|
|
1331
|
-
* <lc-textarea
|
|
1332
|
-
* variant="outline"
|
|
1333
|
-
* size="md"
|
|
1334
|
-
* placeholder="Enter your message"
|
|
1335
|
-
* [(ngModel)]="message"
|
|
1336
|
-
* ></lc-textarea>
|
|
1374
|
+
* <lc-textarea placeholder="Enter message" [autoResize]="true" [(ngModel)]="message" />
|
|
1337
1375
|
* ```
|
|
1338
1376
|
*/
|
|
1339
1377
|
declare class TextareaComponent implements ControlValueAccessor, AfterViewInit {
|
|
@@ -1641,20 +1679,20 @@ declare class VerificationCodeInputComponent implements ControlValueAccessor, Af
|
|
|
1641
1679
|
}
|
|
1642
1680
|
|
|
1643
1681
|
/**
|
|
1644
|
-
* Email input component with RFC 5322 validation.
|
|
1682
|
+
* Email input component with built-in RFC 5322 validation.
|
|
1645
1683
|
*
|
|
1646
|
-
*
|
|
1647
|
-
*
|
|
1684
|
+
* Features:
|
|
1685
|
+
* - RFC 5322 regex email format validation
|
|
1686
|
+
* - Real-time validation feedback on input
|
|
1687
|
+
* - Valid/invalid visual indicators
|
|
1688
|
+
* - Size presets (xs, sm, md, lg)
|
|
1689
|
+
* - Helper text and error message display
|
|
1690
|
+
* - Disabled and readonly states
|
|
1691
|
+
* - ControlValueAccessor integration for reactive forms
|
|
1648
1692
|
*
|
|
1649
1693
|
* @example
|
|
1650
1694
|
* ```html
|
|
1651
|
-
* <lc-email-input
|
|
1652
|
-
* label="Email Address"
|
|
1653
|
-
* placeholder="you@example.com"
|
|
1654
|
-
* [(ngModel)]="email"
|
|
1655
|
-
* [required]="true"
|
|
1656
|
-
* (validationChange)="handleValidation($event)"
|
|
1657
|
-
* ></lc-email-input>
|
|
1695
|
+
* <lc-email-input label="Email" placeholder="you@example.com" [(ngModel)]="email" />
|
|
1658
1696
|
* ```
|
|
1659
1697
|
*/
|
|
1660
1698
|
declare class EmailInputComponent implements ControlValueAccessor {
|
|
@@ -1785,6 +1823,365 @@ declare class EmailInputComponent implements ControlValueAccessor {
|
|
|
1785
1823
|
static ɵcmp: _angular_core.ɵɵComponentDeclaration<EmailInputComponent, "lc-email-input", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "error": { "alias": "error"; "required": false; "isSignal": true; }; "helperText": { "alias": "helperText"; "required": false; "isSignal": true; }; "validateOnInput": { "alias": "validateOnInput"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; }, { "valueChange": "valueChange"; "validationChange": "validationChange"; "focused": "focused"; "blurred": "blurred"; "enterPressed": "enterPressed"; }, never, never, true, never>;
|
|
1786
1824
|
}
|
|
1787
1825
|
|
|
1826
|
+
type HeroColor = 'primary' | 'secondary' | 'neutral' | 'success' | 'info' | 'warning' | 'accent-orange' | 'accent-purple' | 'accent-violet';
|
|
1827
|
+
type HeroSize = 'sm' | 'md' | 'lg';
|
|
1828
|
+
type HeroVariant = 'default' | 'slim' | 'light';
|
|
1829
|
+
/**
|
|
1830
|
+
* Hero component for prominent page headers with gradient backgrounds.
|
|
1831
|
+
*
|
|
1832
|
+
* Features:
|
|
1833
|
+
* - Color gradient variants (primary, secondary, success, warning, info, neutral, accent-orange, accent-purple, accent-violet)
|
|
1834
|
+
* - 3 visual variants: default (dark gradient), slim (compact banner), light (pastel gradient with dark text)
|
|
1835
|
+
* - Size options (sm, md, lg)
|
|
1836
|
+
* - Optional label text above the title
|
|
1837
|
+
* - Configurable border radius
|
|
1838
|
+
* - Content projection for body and footer sections
|
|
1839
|
+
* - Footer slot for metadata, stats, or CTAs
|
|
1840
|
+
*
|
|
1841
|
+
* @example
|
|
1842
|
+
* ```html
|
|
1843
|
+
* <lc-hero label="MY APP" title="Welcome" color="primary" variant="slim">
|
|
1844
|
+
* <p>Description text</p>
|
|
1845
|
+
* <div hero-footer>Status: Active</div>
|
|
1846
|
+
* </lc-hero>
|
|
1847
|
+
* ```
|
|
1848
|
+
*/
|
|
1849
|
+
declare class HeroComponent {
|
|
1850
|
+
/**
|
|
1851
|
+
* Small uppercase label displayed above the title.
|
|
1852
|
+
*/
|
|
1853
|
+
label: _angular_core.InputSignal<string | undefined>;
|
|
1854
|
+
/**
|
|
1855
|
+
* Main headline text.
|
|
1856
|
+
*/
|
|
1857
|
+
title: _angular_core.InputSignal<string>;
|
|
1858
|
+
/**
|
|
1859
|
+
* Color theme for the gradient background.
|
|
1860
|
+
* @default 'primary'
|
|
1861
|
+
*/
|
|
1862
|
+
color: _angular_core.InputSignal<HeroColor>;
|
|
1863
|
+
/**
|
|
1864
|
+
* Size variant controlling padding and font sizes.
|
|
1865
|
+
* @default 'md'
|
|
1866
|
+
*/
|
|
1867
|
+
size: _angular_core.InputSignal<HeroSize>;
|
|
1868
|
+
/**
|
|
1869
|
+
* Border radius of the hero container.
|
|
1870
|
+
* @default 'lg'
|
|
1871
|
+
*/
|
|
1872
|
+
borderRadius: _angular_core.InputSignal<"sm" | "md" | "lg" | "none">;
|
|
1873
|
+
/**
|
|
1874
|
+
* Visual variant.
|
|
1875
|
+
* - `default`: dark gradient with white text
|
|
1876
|
+
* - `slim`: compact single-line banner
|
|
1877
|
+
* - `light`: softer pastel gradient with dark text
|
|
1878
|
+
* @default 'default'
|
|
1879
|
+
*/
|
|
1880
|
+
variant: _angular_core.InputSignal<HeroVariant>;
|
|
1881
|
+
protected heroClasses: _angular_core.Signal<string>;
|
|
1882
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<HeroComponent, never>;
|
|
1883
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<HeroComponent, "lc-hero", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; "title": { "alias": "title"; "required": true; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "borderRadius": { "alias": "borderRadius"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; }, {}, never, ["*", "[hero-footer]"], true, never>;
|
|
1884
|
+
}
|
|
1885
|
+
|
|
1886
|
+
type ProgressBarColor = 'primary' | 'secondary' | 'success' | 'warning' | 'error' | 'info';
|
|
1887
|
+
type ProgressBarSize = 'xs' | 'sm' | 'md' | 'lg';
|
|
1888
|
+
type ProgressBarVariant = 'linear' | 'circular';
|
|
1889
|
+
/**
|
|
1890
|
+
* Progress bar component for displaying completion status.
|
|
1891
|
+
*
|
|
1892
|
+
* Features:
|
|
1893
|
+
* - Linear and circular progress variants
|
|
1894
|
+
* - Color theme options (primary, secondary, success, warning, error)
|
|
1895
|
+
* - Multiple size presets (xs, sm, md, lg)
|
|
1896
|
+
* - Animated value transitions
|
|
1897
|
+
* - Accessible with ARIA progressbar role
|
|
1898
|
+
*
|
|
1899
|
+
* @example
|
|
1900
|
+
* ```html
|
|
1901
|
+
* <lc-progress-bar [value]="75" color="primary" size="md"></lc-progress-bar>
|
|
1902
|
+
* <lc-progress-bar [value]="50" variant="circular" color="success"></lc-progress-bar>
|
|
1903
|
+
* ```
|
|
1904
|
+
*/
|
|
1905
|
+
declare class ProgressBarComponent {
|
|
1906
|
+
/**
|
|
1907
|
+
* Progress value between 0 and 100.
|
|
1908
|
+
* @default 0
|
|
1909
|
+
*/
|
|
1910
|
+
value: _angular_core.InputSignal<number>;
|
|
1911
|
+
/**
|
|
1912
|
+
* Color theme.
|
|
1913
|
+
* @default 'primary'
|
|
1914
|
+
*/
|
|
1915
|
+
color: _angular_core.InputSignal<ProgressBarColor>;
|
|
1916
|
+
/**
|
|
1917
|
+
* Height/thickness of the bar.
|
|
1918
|
+
* @default 'md'
|
|
1919
|
+
*/
|
|
1920
|
+
size: _angular_core.InputSignal<ProgressBarSize>;
|
|
1921
|
+
/**
|
|
1922
|
+
* Visual variant.
|
|
1923
|
+
* @default 'linear'
|
|
1924
|
+
*/
|
|
1925
|
+
variant: _angular_core.InputSignal<ProgressBarVariant>;
|
|
1926
|
+
/**
|
|
1927
|
+
* Whether to show the percentage label.
|
|
1928
|
+
* @default false
|
|
1929
|
+
*/
|
|
1930
|
+
showLabel: _angular_core.InputSignal<boolean>;
|
|
1931
|
+
/**
|
|
1932
|
+
* Whether the progress is indeterminate (animated, no fixed value).
|
|
1933
|
+
* @default false
|
|
1934
|
+
*/
|
|
1935
|
+
indeterminate: _angular_core.InputSignal<boolean>;
|
|
1936
|
+
/**
|
|
1937
|
+
* Accessible label for screen readers.
|
|
1938
|
+
*/
|
|
1939
|
+
ariaLabel: _angular_core.InputSignal<string>;
|
|
1940
|
+
protected clampedValue: _angular_core.Signal<number>;
|
|
1941
|
+
protected barClasses: _angular_core.Signal<string>;
|
|
1942
|
+
protected readonly circleRadius = 40;
|
|
1943
|
+
protected readonly circleCircumference: number;
|
|
1944
|
+
protected strokeDashoffset: _angular_core.Signal<number>;
|
|
1945
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<ProgressBarComponent, never>;
|
|
1946
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<ProgressBarComponent, "lc-progress-bar", never, { "value": { "alias": "value"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "showLabel": { "alias": "showLabel"; "required": false; "isSignal": true; }; "indeterminate": { "alias": "indeterminate"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
|
|
1947
|
+
}
|
|
1948
|
+
|
|
1949
|
+
type DividerOrientation = 'horizontal' | 'vertical';
|
|
1950
|
+
type DividerVariant = 'solid' | 'dashed' | 'dotted';
|
|
1951
|
+
type DividerSpacing = 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
|
|
1952
|
+
/**
|
|
1953
|
+
* Divider component for visual separation of content.
|
|
1954
|
+
*
|
|
1955
|
+
* Features:
|
|
1956
|
+
* - Horizontal and vertical orientations
|
|
1957
|
+
* - Line style variants (solid, dashed, dotted)
|
|
1958
|
+
* - Configurable spacing (none, sm, md, lg)
|
|
1959
|
+
* - Optional centered text label
|
|
1960
|
+
* - Dark mode support
|
|
1961
|
+
*
|
|
1962
|
+
* @example
|
|
1963
|
+
* ```html
|
|
1964
|
+
* <lc-divider></lc-divider>
|
|
1965
|
+
* <lc-divider orientation="vertical" variant="dashed"></lc-divider>
|
|
1966
|
+
* <lc-divider spacing="lg">OR</lc-divider>
|
|
1967
|
+
* ```
|
|
1968
|
+
*/
|
|
1969
|
+
declare class DividerComponent {
|
|
1970
|
+
/**
|
|
1971
|
+
* Orientation of the divider line.
|
|
1972
|
+
* @default 'horizontal'
|
|
1973
|
+
*/
|
|
1974
|
+
orientation: _angular_core.InputSignal<DividerOrientation>;
|
|
1975
|
+
/**
|
|
1976
|
+
* Line style.
|
|
1977
|
+
* @default 'solid'
|
|
1978
|
+
*/
|
|
1979
|
+
variant: _angular_core.InputSignal<DividerVariant>;
|
|
1980
|
+
/**
|
|
1981
|
+
* Spacing (margin) around the divider.
|
|
1982
|
+
* @default 'md'
|
|
1983
|
+
*/
|
|
1984
|
+
spacing: _angular_core.InputSignal<DividerSpacing>;
|
|
1985
|
+
/**
|
|
1986
|
+
* Optional inline text label (e.g. "OR", "Section").
|
|
1987
|
+
*/
|
|
1988
|
+
label: _angular_core.InputSignal<string | undefined>;
|
|
1989
|
+
protected dividerClasses: _angular_core.Signal<string>;
|
|
1990
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<DividerComponent, never>;
|
|
1991
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<DividerComponent, "lc-divider", never, { "orientation": { "alias": "orientation"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "spacing": { "alias": "spacing"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
|
|
1992
|
+
}
|
|
1993
|
+
|
|
1994
|
+
type SearchInputSize = 'sm' | 'md' | 'lg';
|
|
1995
|
+
/**
|
|
1996
|
+
* Search input component with integrated search functionality.
|
|
1997
|
+
*
|
|
1998
|
+
* Features:
|
|
1999
|
+
* - Built-in search icon
|
|
2000
|
+
* - Clear button for resetting input
|
|
2001
|
+
* - RxJS-based configurable debounce
|
|
2002
|
+
* - Multiple size variants (sm, md, lg)
|
|
2003
|
+
* - Disabled state support
|
|
2004
|
+
* - Submit event on Enter key
|
|
2005
|
+
*
|
|
2006
|
+
* @example
|
|
2007
|
+
* ```html
|
|
2008
|
+
* <lc-search-input
|
|
2009
|
+
* placeholder="Search..."
|
|
2010
|
+
* [debounceMs]="300"
|
|
2011
|
+
* (searchChange)="onSearch($event)"
|
|
2012
|
+
* ></lc-search-input>
|
|
2013
|
+
* ```
|
|
2014
|
+
*/
|
|
2015
|
+
declare class SearchInputComponent implements OnInit, OnDestroy {
|
|
2016
|
+
/**
|
|
2017
|
+
* Placeholder text.
|
|
2018
|
+
* @default 'Search…'
|
|
2019
|
+
*/
|
|
2020
|
+
placeholder: _angular_core.InputSignal<string>;
|
|
2021
|
+
/**
|
|
2022
|
+
* Size variant.
|
|
2023
|
+
* @default 'md'
|
|
2024
|
+
*/
|
|
2025
|
+
size: _angular_core.InputSignal<SearchInputSize>;
|
|
2026
|
+
/**
|
|
2027
|
+
* Debounce delay in milliseconds. 0 means no debounce.
|
|
2028
|
+
* @default 300
|
|
2029
|
+
*/
|
|
2030
|
+
debounceMs: _angular_core.InputSignal<number>;
|
|
2031
|
+
/**
|
|
2032
|
+
* Whether the search input is disabled.
|
|
2033
|
+
* @default false
|
|
2034
|
+
*/
|
|
2035
|
+
disabled: _angular_core.InputSignal<boolean>;
|
|
2036
|
+
/**
|
|
2037
|
+
* Emitted when the search value changes (debounced).
|
|
2038
|
+
*/
|
|
2039
|
+
readonly searchChange: _angular_core.OutputEmitterRef<string>;
|
|
2040
|
+
/**
|
|
2041
|
+
* Emitted when the user presses Enter.
|
|
2042
|
+
*/
|
|
2043
|
+
readonly searchSubmit: _angular_core.OutputEmitterRef<string>;
|
|
2044
|
+
protected value: _angular_core.WritableSignal<string>;
|
|
2045
|
+
protected readonly inputRef: _angular_core.Signal<ElementRef<HTMLInputElement> | undefined>;
|
|
2046
|
+
protected wrapperClasses: _angular_core.Signal<string>;
|
|
2047
|
+
private readonly input$;
|
|
2048
|
+
private readonly destroy$;
|
|
2049
|
+
ngOnInit(): void;
|
|
2050
|
+
ngOnDestroy(): void;
|
|
2051
|
+
protected onInput(event: Event): void;
|
|
2052
|
+
protected onKeydown(event: KeyboardEvent): void;
|
|
2053
|
+
protected clear(): void;
|
|
2054
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<SearchInputComponent, never>;
|
|
2055
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<SearchInputComponent, "lc-search-input", never, { "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "debounceMs": { "alias": "debounceMs"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; }, { "searchChange": "searchChange"; "searchSubmit": "searchSubmit"; }, never, never, true, never>;
|
|
2056
|
+
}
|
|
2057
|
+
|
|
2058
|
+
interface FileUploadFile {
|
|
2059
|
+
file: File;
|
|
2060
|
+
name: string;
|
|
2061
|
+
size: number;
|
|
2062
|
+
type: string;
|
|
2063
|
+
}
|
|
2064
|
+
/**
|
|
2065
|
+
* File upload / dropzone component with drag & drop support.
|
|
2066
|
+
*
|
|
2067
|
+
* @example
|
|
2068
|
+
* ```html
|
|
2069
|
+
* <lc-file-upload
|
|
2070
|
+
* accept=".pdf,.png,.jpg"
|
|
2071
|
+
* [multiple]="true"
|
|
2072
|
+
* [maxSizeBytes]="5242880"
|
|
2073
|
+
* (filesSelected)="onFiles($event)"
|
|
2074
|
+
* ></lc-file-upload>
|
|
2075
|
+
* ```
|
|
2076
|
+
*/
|
|
2077
|
+
declare class FileUploadComponent {
|
|
2078
|
+
/**
|
|
2079
|
+
* Accepted file types (e.g. ".pdf,.jpg,image/*").
|
|
2080
|
+
*/
|
|
2081
|
+
accept: _angular_core.InputSignal<string>;
|
|
2082
|
+
/**
|
|
2083
|
+
* Allow multiple files.
|
|
2084
|
+
* @default false
|
|
2085
|
+
*/
|
|
2086
|
+
multiple: _angular_core.InputSignal<boolean>;
|
|
2087
|
+
/**
|
|
2088
|
+
* Maximum file size in bytes. 0 for unlimited.
|
|
2089
|
+
* @default 0
|
|
2090
|
+
*/
|
|
2091
|
+
maxSizeBytes: _angular_core.InputSignal<number>;
|
|
2092
|
+
/**
|
|
2093
|
+
* Whether the dropzone is disabled.
|
|
2094
|
+
* @default false
|
|
2095
|
+
*/
|
|
2096
|
+
disabled: _angular_core.InputSignal<boolean>;
|
|
2097
|
+
/**
|
|
2098
|
+
* Hint text shown in the dropzone.
|
|
2099
|
+
* @default 'Drag & drop files here, or click to browse'
|
|
2100
|
+
*/
|
|
2101
|
+
hint: _angular_core.InputSignal<string>;
|
|
2102
|
+
/**
|
|
2103
|
+
* Emitted with selected files after validation.
|
|
2104
|
+
*/
|
|
2105
|
+
readonly filesSelected: _angular_core.OutputEmitterRef<FileUploadFile[]>;
|
|
2106
|
+
/**
|
|
2107
|
+
* Emitted when a file is rejected (too large or wrong type).
|
|
2108
|
+
*/
|
|
2109
|
+
readonly fileRejected: _angular_core.OutputEmitterRef<{
|
|
2110
|
+
file: File;
|
|
2111
|
+
reason: string;
|
|
2112
|
+
}>;
|
|
2113
|
+
protected isDragOver: _angular_core.WritableSignal<boolean>;
|
|
2114
|
+
protected selectedFiles: _angular_core.WritableSignal<FileUploadFile[]>;
|
|
2115
|
+
protected readonly fileInputRef: _angular_core.Signal<ElementRef<HTMLInputElement> | undefined>;
|
|
2116
|
+
protected dropzoneClasses: _angular_core.Signal<string>;
|
|
2117
|
+
protected onDragOver(event: DragEvent): void;
|
|
2118
|
+
protected onDragLeave(event: DragEvent): void;
|
|
2119
|
+
protected onDrop(event: DragEvent): void;
|
|
2120
|
+
protected onFileChange(event: Event): void;
|
|
2121
|
+
protected openFilePicker(): void;
|
|
2122
|
+
protected removeFile(index: number): void;
|
|
2123
|
+
protected formatSize(bytes: number): string;
|
|
2124
|
+
private processFiles;
|
|
2125
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<FileUploadComponent, never>;
|
|
2126
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<FileUploadComponent, "lc-file-upload", never, { "accept": { "alias": "accept"; "required": false; "isSignal": true; }; "multiple": { "alias": "multiple"; "required": false; "isSignal": true; }; "maxSizeBytes": { "alias": "maxSizeBytes"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "hint": { "alias": "hint"; "required": false; "isSignal": true; }; }, { "filesSelected": "filesSelected"; "fileRejected": "fileRejected"; }, never, never, true, never>;
|
|
2127
|
+
}
|
|
2128
|
+
|
|
2129
|
+
type PopoverPosition = 'top' | 'bottom' | 'left' | 'right';
|
|
2130
|
+
type PopoverTrigger = 'click' | 'hover';
|
|
2131
|
+
/**
|
|
2132
|
+
* Popover component for displaying rich floating content.
|
|
2133
|
+
*
|
|
2134
|
+
* Features:
|
|
2135
|
+
* - Position options (top, bottom, left, right)
|
|
2136
|
+
* - Click or hover trigger modes
|
|
2137
|
+
* - Optional arrow indicator
|
|
2138
|
+
* - Click-outside to close
|
|
2139
|
+
* - Open state change event
|
|
2140
|
+
* - Content projection for trigger and body
|
|
2141
|
+
*
|
|
2142
|
+
* @example
|
|
2143
|
+
* ```html
|
|
2144
|
+
* <lc-popover position="bottom" trigger="click">
|
|
2145
|
+
* <button popover-trigger>Open</button>
|
|
2146
|
+
* <div popover-content>Rich content here</div>
|
|
2147
|
+
* </lc-popover>
|
|
2148
|
+
* ```
|
|
2149
|
+
*/
|
|
2150
|
+
declare class PopoverComponent implements OnDestroy {
|
|
2151
|
+
/**
|
|
2152
|
+
* Position relative to the trigger element.
|
|
2153
|
+
* @default 'bottom'
|
|
2154
|
+
*/
|
|
2155
|
+
position: _angular_core.InputSignal<PopoverPosition>;
|
|
2156
|
+
/**
|
|
2157
|
+
* How the popover is triggered.
|
|
2158
|
+
* @default 'click'
|
|
2159
|
+
*/
|
|
2160
|
+
trigger: _angular_core.InputSignal<PopoverTrigger>;
|
|
2161
|
+
/**
|
|
2162
|
+
* Whether to show an arrow pointing at the trigger.
|
|
2163
|
+
* @default true
|
|
2164
|
+
*/
|
|
2165
|
+
showArrow: _angular_core.InputSignal<boolean>;
|
|
2166
|
+
/**
|
|
2167
|
+
* Emitted when the popover opens or closes.
|
|
2168
|
+
*/
|
|
2169
|
+
readonly openChange: _angular_core.OutputEmitterRef<boolean>;
|
|
2170
|
+
protected isOpen: _angular_core.WritableSignal<boolean>;
|
|
2171
|
+
protected panelClasses: _angular_core.Signal<string>;
|
|
2172
|
+
private readonly elementRef;
|
|
2173
|
+
onDocumentClick(event: MouseEvent): void;
|
|
2174
|
+
onEscape(): void;
|
|
2175
|
+
ngOnDestroy(): void;
|
|
2176
|
+
protected toggle(): void;
|
|
2177
|
+
protected open(): void;
|
|
2178
|
+
protected close(): void;
|
|
2179
|
+
protected onMouseEnter(): void;
|
|
2180
|
+
protected onMouseLeave(): void;
|
|
2181
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<PopoverComponent, never>;
|
|
2182
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<PopoverComponent, "lc-popover", never, { "position": { "alias": "position"; "required": false; "isSignal": true; }; "trigger": { "alias": "trigger"; "required": false; "isSignal": true; }; "showArrow": { "alias": "showArrow"; "required": false; "isSignal": true; }; }, { "openChange": "openChange"; }, never, ["[popover-trigger]", "[popover-content]"], true, never>;
|
|
2183
|
+
}
|
|
2184
|
+
|
|
1788
2185
|
type ContainerSize = 'sm' | 'md' | 'lg' | 'xl' | 'full';
|
|
1789
2186
|
declare class ContainerComponent {
|
|
1790
2187
|
size: _angular_core.InputSignal<ContainerSize>;
|
|
@@ -1841,6 +2238,14 @@ type AlertVariant = 'success' | 'error' | 'warning' | 'info';
|
|
|
1841
2238
|
/**
|
|
1842
2239
|
* Alert component for inline notifications.
|
|
1843
2240
|
*
|
|
2241
|
+
* Features:
|
|
2242
|
+
* - Semantic variants (success, warning, error, info)
|
|
2243
|
+
* - Optional title and icon display
|
|
2244
|
+
* - Auto-mapped variant icons
|
|
2245
|
+
* - Dismissible with close button
|
|
2246
|
+
* - Content projection for custom body
|
|
2247
|
+
* - Accessible with ARIA alert role
|
|
2248
|
+
*
|
|
1844
2249
|
* @example
|
|
1845
2250
|
* ```html
|
|
1846
2251
|
* <lc-alert variant="success" title="Success!" [dismissible]="true">
|
|
@@ -1921,24 +2326,19 @@ declare class AlertComponent {
|
|
|
1921
2326
|
*/
|
|
1922
2327
|
type ErrorSeverity = 'error' | 'warning' | 'info';
|
|
1923
2328
|
/**
|
|
1924
|
-
* Error display component for authentication error messages.
|
|
2329
|
+
* Error display component for authentication and application error messages.
|
|
1925
2330
|
*
|
|
1926
|
-
*
|
|
1927
|
-
*
|
|
2331
|
+
* Features:
|
|
2332
|
+
* - Automatic Cognito error code mapping to user-friendly messages
|
|
2333
|
+
* - Severity levels (error, warning, info)
|
|
2334
|
+
* - Custom error message override
|
|
2335
|
+
* - Dismissible with close button
|
|
2336
|
+
* - Accepts Error objects or custom error shapes
|
|
1928
2337
|
*
|
|
1929
2338
|
* @example
|
|
1930
2339
|
* ```html
|
|
1931
|
-
*
|
|
1932
|
-
* <lc-error-display
|
|
1933
|
-
* [error]="cognitoError"
|
|
1934
|
-
* [dismissible]="true"
|
|
1935
|
-
* ></lc-error-display>
|
|
1936
|
-
*
|
|
1937
|
-
* <!-- Display custom error -->
|
|
1938
|
-
* <lc-error-display
|
|
1939
|
-
* message="Invalid credentials"
|
|
1940
|
-
* severity="error"
|
|
1941
|
-
* ></lc-error-display>
|
|
2340
|
+
* <lc-error-display [error]="cognitoError" [dismissible]="true" />
|
|
2341
|
+
* <lc-error-display message="Invalid credentials" severity="error" />
|
|
1942
2342
|
* ```
|
|
1943
2343
|
*/
|
|
1944
2344
|
declare class ErrorDisplayComponent {
|
|
@@ -2091,20 +2491,19 @@ declare class ToastService {
|
|
|
2091
2491
|
}
|
|
2092
2492
|
|
|
2093
2493
|
/**
|
|
2094
|
-
* Toast component for displaying ephemeral
|
|
2095
|
-
*
|
|
2494
|
+
* Toast component for displaying ephemeral notification messages.
|
|
2495
|
+
*
|
|
2496
|
+
* Features:
|
|
2497
|
+
* - Semantic variants (success, warning, error, info)
|
|
2498
|
+
* - Auto-dismiss with configurable duration
|
|
2499
|
+
* - Manual dismiss with close button
|
|
2500
|
+
* - Icon display per variant
|
|
2501
|
+
* - Stacked toast positioning via ToastService
|
|
2502
|
+
* - Animated enter/exit transitions
|
|
2096
2503
|
*
|
|
2097
2504
|
* @example
|
|
2098
2505
|
* ```typescript
|
|
2099
|
-
*
|
|
2100
|
-
* constructor(private toastService: ToastService) {}
|
|
2101
|
-
*
|
|
2102
|
-
* showToast() {
|
|
2103
|
-
* this.toastService.show({
|
|
2104
|
-
* message: 'Success!',
|
|
2105
|
-
* variant: 'success'
|
|
2106
|
-
* });
|
|
2107
|
-
* }
|
|
2506
|
+
* this.toastService.show({ message: 'Saved!', variant: 'success' });
|
|
2108
2507
|
* ```
|
|
2109
2508
|
*/
|
|
2110
2509
|
declare class ToastComponent {
|
|
@@ -2151,20 +2550,22 @@ declare class ToastComponent {
|
|
|
2151
2550
|
type ModalSize = 'sm' | 'md' | 'lg' | 'xl' | 'full';
|
|
2152
2551
|
/**
|
|
2153
2552
|
* Modal dialog component for focused user interactions.
|
|
2154
|
-
*
|
|
2553
|
+
*
|
|
2554
|
+
* Features:
|
|
2555
|
+
* - Size presets (sm, md, lg, xl, full)
|
|
2556
|
+
* - Focus trap for keyboard accessibility
|
|
2557
|
+
* - Backdrop click and Escape key to close
|
|
2558
|
+
* - Two-way open binding
|
|
2559
|
+
* - Header, body, and footer content slots
|
|
2560
|
+
* - Optional close button
|
|
2561
|
+
* - Accessible with ARIA dialog role
|
|
2155
2562
|
*
|
|
2156
2563
|
* @example
|
|
2157
2564
|
* ```html
|
|
2158
2565
|
* <lc-modal [(open)]="isOpen" size="md" [closeOnBackdropClick]="true">
|
|
2159
|
-
* <div slot="header">
|
|
2160
|
-
*
|
|
2161
|
-
* </div>
|
|
2162
|
-
* <div slot="body">
|
|
2163
|
-
* <p>Modal content goes here</p>
|
|
2164
|
-
* </div>
|
|
2165
|
-
* <div slot="footer">
|
|
2166
|
-
* <lc-button (click)="closeModal()">Close</lc-button>
|
|
2167
|
-
* </div>
|
|
2566
|
+
* <div slot="header"><h2>Title</h2></div>
|
|
2567
|
+
* <div slot="body">Content</div>
|
|
2568
|
+
* <div slot="footer"><lc-button (click)="close()">Close</lc-button></div>
|
|
2168
2569
|
* </lc-modal>
|
|
2169
2570
|
* ```
|
|
2170
2571
|
*/
|
|
@@ -2562,32 +2963,28 @@ declare class PaginationComponent {
|
|
|
2562
2963
|
type SidenavPosition = 'left' | 'right';
|
|
2563
2964
|
type SidenavMode = 'drawer' | 'docked';
|
|
2564
2965
|
/**
|
|
2565
|
-
* Sidenav
|
|
2566
|
-
*
|
|
2567
|
-
* A navigation component that can work as either a drawer (overlay) or
|
|
2568
|
-
* a docked (persistent) sidebar. Supports section headlines, collapsible
|
|
2569
|
-
* groups, keyboard navigation, and accessibility features.
|
|
2966
|
+
* Sidenav component for application navigation sidebar.
|
|
2570
2967
|
*
|
|
2571
|
-
*
|
|
2572
|
-
*
|
|
2573
|
-
*
|
|
2574
|
-
*
|
|
2575
|
-
*
|
|
2576
|
-
*
|
|
2577
|
-
*
|
|
2578
|
-
*
|
|
2968
|
+
* Features:
|
|
2969
|
+
* - Drawer (overlay) and docked (persistent) modes
|
|
2970
|
+
* - Collapsed icon-rail mode (narrow 56px sidebar with icons only)
|
|
2971
|
+
* - Hierarchical navigation with collapsible groups
|
|
2972
|
+
* - Section headlines for item grouping
|
|
2973
|
+
* - Active route highlighting
|
|
2974
|
+
* - Keyboard navigation support
|
|
2975
|
+
* - Configurable width and position (left/right)
|
|
2976
|
+
* - Optional backdrop overlay
|
|
2977
|
+
* - Accessible with ARIA navigation role
|
|
2579
2978
|
*
|
|
2580
|
-
* @example
|
|
2979
|
+
* @example
|
|
2581
2980
|
* ```html
|
|
2582
|
-
* <lc-sidenav
|
|
2583
|
-
*
|
|
2584
|
-
* mode="docked"
|
|
2585
|
-
* [items]="navItems"
|
|
2586
|
-
* (closed)="sidebarOpen = false">
|
|
2587
|
-
* </lc-sidenav>
|
|
2981
|
+
* <lc-sidenav [isOpen]="isOpen" mode="docked" [collapsed]="isCollapsed" [items]="navItems"
|
|
2982
|
+
* (closed)="isOpen = false" (itemClicked)="navigate($event)" />
|
|
2588
2983
|
* ```
|
|
2589
2984
|
*/
|
|
2590
2985
|
declare class SidenavComponent {
|
|
2986
|
+
/** Whether the sidenav is collapsed to icon-only rail */
|
|
2987
|
+
collapsed: _angular_core.WritableSignal<boolean>;
|
|
2591
2988
|
/** Whether the sidenav is open */
|
|
2592
2989
|
isOpen: _angular_core.WritableSignal<boolean>;
|
|
2593
2990
|
/** Display mode: 'drawer' (overlay) or 'docked' (persistent sidebar) */
|
|
@@ -2642,6 +3039,10 @@ declare class SidenavComponent {
|
|
|
2642
3039
|
* Input setter for active route
|
|
2643
3040
|
*/
|
|
2644
3041
|
set activeRouteInput(value: string);
|
|
3042
|
+
/**
|
|
3043
|
+
* Input setter for collapsed
|
|
3044
|
+
*/
|
|
3045
|
+
set collapsedInput(value: boolean);
|
|
2645
3046
|
/**
|
|
2646
3047
|
* Event emitted when the sidenav should close
|
|
2647
3048
|
*/
|
|
@@ -2660,6 +3061,10 @@ declare class SidenavComponent {
|
|
|
2660
3061
|
sidenavStyles: _angular_core.Signal<{
|
|
2661
3062
|
width: string;
|
|
2662
3063
|
}>;
|
|
3064
|
+
/**
|
|
3065
|
+
* Toggle collapsed state
|
|
3066
|
+
*/
|
|
3067
|
+
toggleCollapsed(): void;
|
|
2663
3068
|
/**
|
|
2664
3069
|
* Handle close action
|
|
2665
3070
|
*/
|
|
@@ -2689,7 +3094,7 @@ declare class SidenavComponent {
|
|
|
2689
3094
|
*/
|
|
2690
3095
|
handleKeydown(event: KeyboardEvent): void;
|
|
2691
3096
|
static ɵfac: _angular_core.ɵɵFactoryDeclaration<SidenavComponent, never>;
|
|
2692
|
-
static ɵcmp: _angular_core.ɵɵComponentDeclaration<SidenavComponent, "lc-sidenav", never, { "isOpenInput": { "alias": "isOpenInput"; "required": false; }; "modeInput": { "alias": "modeInput"; "required": false; }; "positionInput": { "alias": "positionInput"; "required": false; }; "widthInput": { "alias": "widthInput"; "required": false; }; "ariaLabelInput": { "alias": "ariaLabelInput"; "required": false; }; "hasOverlayInput": { "alias": "hasOverlayInput"; "required": false; }; "itemsInput": { "alias": "itemsInput"; "required": false; }; "activeRouteInput": { "alias": "activeRouteInput"; "required": false; }; }, { "closed": "closed"; "itemClicked": "itemClicked"; }, never, ["*"], true, never>;
|
|
3097
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<SidenavComponent, "lc-sidenav", never, { "isOpenInput": { "alias": "isOpenInput"; "required": false; }; "modeInput": { "alias": "modeInput"; "required": false; }; "positionInput": { "alias": "positionInput"; "required": false; }; "widthInput": { "alias": "widthInput"; "required": false; }; "ariaLabelInput": { "alias": "ariaLabelInput"; "required": false; }; "hasOverlayInput": { "alias": "hasOverlayInput"; "required": false; }; "itemsInput": { "alias": "itemsInput"; "required": false; }; "activeRouteInput": { "alias": "activeRouteInput"; "required": false; }; "collapsedInput": { "alias": "collapsedInput"; "required": false; }; }, { "closed": "closed"; "itemClicked": "itemClicked"; }, never, ["*"], true, never>;
|
|
2693
3098
|
}
|
|
2694
3099
|
|
|
2695
3100
|
type TabOrientation = 'horizontal' | 'vertical';
|
|
@@ -2728,6 +3133,13 @@ declare class TabComponent {
|
|
|
2728
3133
|
/**
|
|
2729
3134
|
* Tabs component for organizing content into switchable views.
|
|
2730
3135
|
*
|
|
3136
|
+
* Features:
|
|
3137
|
+
* - Dynamic tab registration via content projection
|
|
3138
|
+
* - Active tab tracking with two-way binding
|
|
3139
|
+
* - Accessible with ARIA tablist/tab/tabpanel roles
|
|
3140
|
+
* - Keyboard navigation between tabs
|
|
3141
|
+
* - Lazy content rendering per tab
|
|
3142
|
+
*
|
|
2731
3143
|
* @example
|
|
2732
3144
|
* ```html
|
|
2733
3145
|
* <lc-tabs>
|
|
@@ -2830,21 +3242,19 @@ declare class TabsComponent implements AfterContentInit {
|
|
|
2830
3242
|
type AvatarSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
|
|
2831
3243
|
type AvatarStatus = 'online' | 'offline' | 'away' | 'busy';
|
|
2832
3244
|
/**
|
|
2833
|
-
* Avatar
|
|
3245
|
+
* Avatar component for circular user representation.
|
|
2834
3246
|
*
|
|
2835
|
-
*
|
|
2836
|
-
*
|
|
3247
|
+
* Features:
|
|
3248
|
+
* - Image display with fallback to initials
|
|
3249
|
+
* - Auto-generated initials from user name
|
|
3250
|
+
* - Status indicator (online, offline, busy, away)
|
|
3251
|
+
* - Multiple size variants (xs, sm, md, lg, xl)
|
|
3252
|
+
* - Accessible with alt text support
|
|
2837
3253
|
*
|
|
2838
3254
|
* @example
|
|
2839
3255
|
* ```html
|
|
2840
|
-
* <!-- With image -->
|
|
2841
3256
|
* <lc-avatar src="https://example.com/avatar.jpg" alt="John Doe" />
|
|
2842
|
-
*
|
|
2843
|
-
* <!-- With initials -->
|
|
2844
|
-
* <lc-avatar name="John Doe" />
|
|
2845
|
-
*
|
|
2846
|
-
* <!-- With status indicator -->
|
|
2847
|
-
* <lc-avatar name="Jane Smith" status="online" size="lg" />
|
|
3257
|
+
* <lc-avatar name="John Doe" status="online" size="lg" />
|
|
2848
3258
|
* ```
|
|
2849
3259
|
*/
|
|
2850
3260
|
declare class AvatarComponent {
|
|
@@ -2887,9 +3297,13 @@ declare class AvatarComponent {
|
|
|
2887
3297
|
type BadgeVariant = 'default' | 'primary' | 'success' | 'warning' | 'error' | 'info';
|
|
2888
3298
|
type BadgeSize = 'xs' | 'sm' | 'md' | 'lg';
|
|
2889
3299
|
/**
|
|
2890
|
-
* Badge
|
|
3300
|
+
* Badge component for displaying status, notifications, or counts.
|
|
2891
3301
|
*
|
|
2892
|
-
*
|
|
3302
|
+
* Features:
|
|
3303
|
+
* - Semantic color variants (primary, secondary, success, warning, error, info, neutral)
|
|
3304
|
+
* - Multiple size options (xs, sm, md, lg)
|
|
3305
|
+
* - Pill-shaped rounded mode
|
|
3306
|
+
* - Content projection for labels or count values
|
|
2893
3307
|
*
|
|
2894
3308
|
* @example
|
|
2895
3309
|
* ```html
|
|
@@ -2912,60 +3326,28 @@ declare class BadgeComponent {
|
|
|
2912
3326
|
static ɵcmp: _angular_core.ɵɵComponentDeclaration<BadgeComponent, "lc-badge", never, { "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "rounded": { "alias": "rounded"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
|
|
2913
3327
|
}
|
|
2914
3328
|
|
|
2915
|
-
type TrendDirection = 'up' | 'down' | 'flat';
|
|
2916
|
-
/**
|
|
2917
|
-
* MetricCard Component
|
|
2918
|
-
*
|
|
2919
|
-
* Displays a single KPI value with label, trend arrow, and optional icon.
|
|
2920
|
-
* Built on top of `lc-card` (outlined variant) for consistent card styling.
|
|
2921
|
-
*
|
|
2922
|
-
* @example
|
|
2923
|
-
* ```html
|
|
2924
|
-
* <lc-metric-card
|
|
2925
|
-
* label="Portfolio Equity"
|
|
2926
|
-
* value="$125,430"
|
|
2927
|
-
* trend="up"
|
|
2928
|
-
* trendValue="+2.4%"
|
|
2929
|
-
* icon="arrow-trending-up"
|
|
2930
|
-
* ></lc-metric-card>
|
|
2931
|
-
* ```
|
|
2932
|
-
*/
|
|
2933
|
-
declare class MetricCardComponent {
|
|
2934
|
-
/** Label displayed above the value */
|
|
2935
|
-
label: _angular_core.InputSignal<string>;
|
|
2936
|
-
/** Formatted value to display */
|
|
2937
|
-
value: _angular_core.InputSignal<string>;
|
|
2938
|
-
/** Trend direction for arrow indicator */
|
|
2939
|
-
trend: _angular_core.InputSignal<TrendDirection>;
|
|
2940
|
-
/** Formatted trend value (e.g., "+2.4%") */
|
|
2941
|
-
trendValue: _angular_core.InputSignal<string>;
|
|
2942
|
-
/** Optional Heroicon name */
|
|
2943
|
-
icon: _angular_core.InputSignal<string>;
|
|
2944
|
-
/** Trend arrow character */
|
|
2945
|
-
trendArrow: _angular_core.Signal<"↑" | "↓" | "→">;
|
|
2946
|
-
/** Tailwind classes for trend color */
|
|
2947
|
-
trendClasses: _angular_core.Signal<"text-green-600 dark:text-green-400" | "text-red-600 dark:text-red-400" | "text-gray-500 dark:text-gray-400">;
|
|
2948
|
-
static ɵfac: _angular_core.ɵɵFactoryDeclaration<MetricCardComponent, never>;
|
|
2949
|
-
static ɵcmp: _angular_core.ɵɵComponentDeclaration<MetricCardComponent, "lc-metric-card", never, { "label": { "alias": "label"; "required": true; "isSignal": true; }; "value": { "alias": "value"; "required": true; "isSignal": true; }; "trend": { "alias": "trend"; "required": false; "isSignal": true; }; "trendValue": { "alias": "trendValue"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
|
|
2950
|
-
}
|
|
2951
|
-
|
|
2952
3329
|
interface ToggleOption {
|
|
2953
3330
|
readonly value: string;
|
|
2954
3331
|
readonly label: string;
|
|
2955
3332
|
readonly disabled?: boolean;
|
|
2956
3333
|
}
|
|
2957
3334
|
/**
|
|
2958
|
-
*
|
|
3335
|
+
* Toggle group component for single-option selection from a set.
|
|
2959
3336
|
*
|
|
2960
|
-
*
|
|
2961
|
-
*
|
|
3337
|
+
* Features:
|
|
3338
|
+
* - Multiple segmented toggle buttons
|
|
3339
|
+
* - Active state highlighting
|
|
3340
|
+
* - Size variants (sm, md, lg)
|
|
3341
|
+
* - Two-way selected value binding
|
|
3342
|
+
* - Per-option disabled state
|
|
3343
|
+
* - Dark mode support via CSS custom properties
|
|
2962
3344
|
*
|
|
2963
3345
|
* @example
|
|
2964
3346
|
* ```html
|
|
2965
3347
|
* <lc-toggle-group
|
|
2966
|
-
* [options]="[{value:'1D',label:'1D'},{value:'
|
|
3348
|
+
* [options]="[{value:'1D',label:'1D'},{value:'1W',label:'1W'}]"
|
|
2967
3349
|
* [(selected)]="interval"
|
|
2968
|
-
*
|
|
3350
|
+
* />
|
|
2969
3351
|
* ```
|
|
2970
3352
|
*/
|
|
2971
3353
|
declare class ToggleGroupComponent {
|
|
@@ -3023,24 +3405,47 @@ type ListVariant = 'default' | 'card';
|
|
|
3023
3405
|
* List item interface
|
|
3024
3406
|
*/
|
|
3025
3407
|
interface ListItem {
|
|
3026
|
-
/** Item label text */
|
|
3408
|
+
/** Item label text (primary line) */
|
|
3027
3409
|
label: string;
|
|
3410
|
+
/** Secondary text shown below the label */
|
|
3411
|
+
subtitle?: string;
|
|
3412
|
+
/** Description text shown below subtitle (third line) */
|
|
3413
|
+
description?: string;
|
|
3028
3414
|
/** Optional icon identifier */
|
|
3029
3415
|
icon?: string;
|
|
3416
|
+
/** Avatar URL or initials (renders a circular avatar instead of icon) */
|
|
3417
|
+
avatar?: string;
|
|
3418
|
+
/** Badge text (e.g. count, status label) shown on the trailing side */
|
|
3419
|
+
badge?: string;
|
|
3420
|
+
/** Badge color variant */
|
|
3421
|
+
badgeVariant?: 'default' | 'primary' | 'success' | 'warning' | 'error';
|
|
3422
|
+
/** Metadata text shown on the trailing side (e.g. date, size) */
|
|
3423
|
+
metadata?: string;
|
|
3030
3424
|
/** Optional action label */
|
|
3031
3425
|
action?: string;
|
|
3032
3426
|
/** Item identifier */
|
|
3033
3427
|
id?: string;
|
|
3034
3428
|
/** Whether the item is disabled */
|
|
3035
3429
|
disabled?: boolean;
|
|
3430
|
+
/** Whether the item is selected / highlighted */
|
|
3431
|
+
selected?: boolean;
|
|
3036
3432
|
/** Any additional data */
|
|
3037
3433
|
[key: string]: any;
|
|
3038
3434
|
}
|
|
3039
3435
|
/**
|
|
3040
|
-
* List
|
|
3436
|
+
* List item size
|
|
3437
|
+
*/
|
|
3438
|
+
type ListSize = 'sm' | 'md' | 'lg';
|
|
3439
|
+
/**
|
|
3440
|
+
* List component for displaying structured item collections.
|
|
3041
3441
|
*
|
|
3042
|
-
*
|
|
3043
|
-
*
|
|
3442
|
+
* Features:
|
|
3443
|
+
* - Vertical and horizontal layout orientations
|
|
3444
|
+
* - Variant styles (default, bordered, card)
|
|
3445
|
+
* - Optional dividers between items
|
|
3446
|
+
* - Icon and avatar support per item
|
|
3447
|
+
* - Action buttons with click events
|
|
3448
|
+
* - Accessible with ARIA list role
|
|
3044
3449
|
*
|
|
3045
3450
|
* @example
|
|
3046
3451
|
* ```html
|
|
@@ -3049,7 +3454,6 @@ interface ListItem {
|
|
|
3049
3454
|
* orientation="vertical"
|
|
3050
3455
|
* [showDividers]="true"
|
|
3051
3456
|
* (itemClick)="handleItemClick($event)"
|
|
3052
|
-
* (actionClick)="handleActionClick($event)"
|
|
3053
3457
|
* />
|
|
3054
3458
|
* ```
|
|
3055
3459
|
*/
|
|
@@ -3062,6 +3466,8 @@ declare class ListComponent {
|
|
|
3062
3466
|
orientation: _angular_core.InputSignal<ListOrientation>;
|
|
3063
3467
|
/** Visual variant */
|
|
3064
3468
|
variant: _angular_core.InputSignal<ListVariant>;
|
|
3469
|
+
/** Size of list items */
|
|
3470
|
+
size: _angular_core.InputSignal<ListSize>;
|
|
3065
3471
|
/** Whether to show dividers between items */
|
|
3066
3472
|
showDividers: _angular_core.InputSignal<boolean>;
|
|
3067
3473
|
/** Event emitted when an item is clicked */
|
|
@@ -3085,21 +3491,24 @@ declare class ListComponent {
|
|
|
3085
3491
|
*/
|
|
3086
3492
|
onActionClick(item: ListItem): void;
|
|
3087
3493
|
static ɵfac: _angular_core.ɵɵFactoryDeclaration<ListComponent, never>;
|
|
3088
|
-
static ɵcmp: _angular_core.ɵɵComponentDeclaration<ListComponent, "lc-list", never, { "items": { "alias": "items"; "required": false; "isSignal": true; }; "orientation": { "alias": "orientation"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "showDividers": { "alias": "showDividers"; "required": false; "isSignal": true; }; }, { "itemClick": "itemClick"; "actionClick": "actionClick"; }, ["itemTemplate"], never, true, never>;
|
|
3494
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<ListComponent, "lc-list", never, { "items": { "alias": "items"; "required": false; "isSignal": true; }; "orientation": { "alias": "orientation"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "showDividers": { "alias": "showDividers"; "required": false; "isSignal": true; }; }, { "itemClick": "itemClick"; "actionClick": "actionClick"; }, ["itemTemplate"], never, true, never>;
|
|
3089
3495
|
}
|
|
3090
3496
|
|
|
3091
3497
|
type ChipVariant = 'default' | 'primary' | 'success' | 'warning' | 'error' | 'info';
|
|
3092
3498
|
type ChipSize = 'sm' | 'md' | 'lg';
|
|
3093
3499
|
/**
|
|
3094
|
-
* Chip
|
|
3500
|
+
* Chip component for displaying tags, filters, or selections.
|
|
3095
3501
|
*
|
|
3096
|
-
*
|
|
3097
|
-
*
|
|
3502
|
+
* Features:
|
|
3503
|
+
* - Color variants (primary, secondary, success, warning, error, info, neutral)
|
|
3504
|
+
* - Multiple size options (sm, md, lg)
|
|
3505
|
+
* - Optional leading icon
|
|
3506
|
+
* - Removable with close button and remove event
|
|
3507
|
+
* - Disabled state support
|
|
3098
3508
|
*
|
|
3099
3509
|
* @example
|
|
3100
3510
|
* ```html
|
|
3101
|
-
* <lc-chip variant="primary"
|
|
3102
|
-
* <span lcChipIcon>🏷️</span>
|
|
3511
|
+
* <lc-chip variant="primary" [removable]="true" (remove)="onRemove()">
|
|
3103
3512
|
* Tag Name
|
|
3104
3513
|
* </lc-chip>
|
|
3105
3514
|
* ```
|
|
@@ -3157,39 +3566,52 @@ interface TableColumn {
|
|
|
3157
3566
|
key: string;
|
|
3158
3567
|
label: string;
|
|
3159
3568
|
sortable?: boolean;
|
|
3569
|
+
filterable?: boolean;
|
|
3570
|
+
editable?: boolean;
|
|
3160
3571
|
width?: string;
|
|
3161
3572
|
/** Optional CSS class(es) applied to both th and td cells */
|
|
3162
3573
|
cssClass?: string;
|
|
3163
3574
|
/** Optional tooltip shown on hover over the column header */
|
|
3164
3575
|
tooltip?: string;
|
|
3576
|
+
/** Input type for inline editing (default: text) */
|
|
3577
|
+
editType?: 'text' | 'number' | 'select';
|
|
3578
|
+
/** Options for select edit type */
|
|
3579
|
+
editOptions?: string[];
|
|
3165
3580
|
}
|
|
3166
3581
|
interface SortEvent {
|
|
3167
3582
|
column: string;
|
|
3168
3583
|
direction: 'asc' | 'desc';
|
|
3169
3584
|
}
|
|
3585
|
+
interface CellEditEvent {
|
|
3586
|
+
row: Record<string, unknown>;
|
|
3587
|
+
column: string;
|
|
3588
|
+
oldValue: unknown;
|
|
3589
|
+
newValue: unknown;
|
|
3590
|
+
rowIndex: number;
|
|
3591
|
+
}
|
|
3592
|
+
interface SelectionChangeEvent {
|
|
3593
|
+
selected: Record<string, unknown>[];
|
|
3594
|
+
allSelected: boolean;
|
|
3595
|
+
}
|
|
3170
3596
|
type TableVariant = 'default' | 'striped' | 'bordered';
|
|
3171
3597
|
type TableSize = 'sm' | 'md' | 'lg';
|
|
3172
3598
|
/**
|
|
3173
|
-
* Table
|
|
3599
|
+
* Table component for displaying structured data in rows and columns.
|
|
3174
3600
|
*
|
|
3175
|
-
*
|
|
3601
|
+
* Features:
|
|
3602
|
+
* - Column-based sorting with sort direction indicators
|
|
3603
|
+
* - Variant styles (default, striped, bordered)
|
|
3604
|
+
* - Size presets (sm, md, lg)
|
|
3605
|
+
* - Hoverable row highlighting
|
|
3606
|
+
* - Custom cell templates via content projection
|
|
3607
|
+
* - Responsive horizontal scrolling
|
|
3608
|
+
* - Empty state text for no data
|
|
3609
|
+
* - Accessible with proper table semantics
|
|
3176
3610
|
*
|
|
3177
3611
|
* @example
|
|
3178
3612
|
* ```html
|
|
3179
|
-
* <lc-table
|
|
3180
|
-
*
|
|
3181
|
-
* [data]="data"
|
|
3182
|
-
* variant="striped"
|
|
3183
|
-
* [hoverable]="true"
|
|
3184
|
-
* (sort)="onSort($event)">
|
|
3185
|
-
* </lc-table>
|
|
3186
|
-
*
|
|
3187
|
-
* <!-- With custom cell templates -->
|
|
3188
|
-
* <lc-table [columns]="columns" [data]="data">
|
|
3189
|
-
* <ng-template lcTableCell="status" let-row>
|
|
3190
|
-
* <lc-badge [variant]="row.status">{{ row.status }}</lc-badge>
|
|
3191
|
-
* </ng-template>
|
|
3192
|
-
* </lc-table>
|
|
3613
|
+
* <lc-table [columns]="columns" [data]="data" variant="striped" [hoverable]="true"
|
|
3614
|
+
* (sort)="onSort($event)" (rowClick)="onRowClick($event)" />
|
|
3193
3615
|
* ```
|
|
3194
3616
|
*/
|
|
3195
3617
|
declare class TableComponent {
|
|
@@ -3209,82 +3631,107 @@ declare class TableComponent {
|
|
|
3209
3631
|
responsive: _angular_core.InputSignal<boolean>;
|
|
3210
3632
|
/** Text shown when data is empty */
|
|
3211
3633
|
emptyText: _angular_core.InputSignal<string>;
|
|
3634
|
+
/** Enable pagination */
|
|
3635
|
+
paginate: _angular_core.InputSignal<boolean>;
|
|
3636
|
+
/** Rows per page */
|
|
3637
|
+
pageSize: _angular_core.InputSignal<number>;
|
|
3638
|
+
/** Available page size options */
|
|
3639
|
+
pageSizeOptions: _angular_core.InputSignal<number[]>;
|
|
3640
|
+
/** Enable row selection checkboxes */
|
|
3641
|
+
selectable: _angular_core.InputSignal<boolean>;
|
|
3642
|
+
/** Enable per-column text filters */
|
|
3643
|
+
filterable: _angular_core.InputSignal<boolean>;
|
|
3644
|
+
/** Enable inline cell editing on double-click */
|
|
3645
|
+
editable: _angular_core.InputSignal<boolean>;
|
|
3212
3646
|
/** Emitted when a sortable column header is clicked */
|
|
3213
3647
|
readonly sort: _angular_core.OutputEmitterRef<SortEvent>;
|
|
3214
3648
|
/** Emitted when a row is clicked */
|
|
3215
3649
|
readonly rowClick: _angular_core.OutputEmitterRef<Record<string, unknown>>;
|
|
3216
|
-
/**
|
|
3217
|
-
|
|
3218
|
-
|
|
3219
|
-
|
|
3220
|
-
/**
|
|
3221
|
-
* Computed CSS classes for the wrapper element
|
|
3222
|
-
*/
|
|
3223
|
-
wrapperClasses: _angular_core.Signal<string>;
|
|
3224
|
-
/** Current sort state */
|
|
3650
|
+
/** Emitted when a cell is edited */
|
|
3651
|
+
readonly cellEdit: _angular_core.OutputEmitterRef<CellEditEvent>;
|
|
3652
|
+
/** Emitted when row selection changes */
|
|
3653
|
+
readonly selectionChange: _angular_core.OutputEmitterRef<SelectionChangeEvent>;
|
|
3225
3654
|
protected currentSort: _angular_core.WritableSignal<{
|
|
3226
3655
|
column: string;
|
|
3227
3656
|
direction: "asc" | "desc";
|
|
3228
3657
|
} | null>;
|
|
3658
|
+
protected currentPage: _angular_core.WritableSignal<number>;
|
|
3659
|
+
protected internalPageSize: _angular_core.WritableSignal<number>;
|
|
3660
|
+
protected selectedRows: _angular_core.WritableSignal<Set<number>>;
|
|
3661
|
+
protected columnFilters: _angular_core.WritableSignal<Record<string, string>>;
|
|
3662
|
+
protected editingCell: _angular_core.WritableSignal<{
|
|
3663
|
+
rowIndex: number;
|
|
3664
|
+
column: string;
|
|
3665
|
+
} | null>;
|
|
3666
|
+
protected editValue: _angular_core.WritableSignal<string>;
|
|
3229
3667
|
/**
|
|
3230
|
-
*
|
|
3668
|
+
* Filtered data (applies column filters)
|
|
3231
3669
|
*/
|
|
3232
|
-
|
|
3670
|
+
protected readonly filteredData: _angular_core.Signal<Record<string, unknown>[]>;
|
|
3233
3671
|
/**
|
|
3234
|
-
*
|
|
3672
|
+
* Sorted data
|
|
3235
3673
|
*/
|
|
3236
|
-
|
|
3674
|
+
protected readonly sortedData: _angular_core.Signal<Record<string, unknown>[]>;
|
|
3237
3675
|
/**
|
|
3238
|
-
*
|
|
3676
|
+
* Paginated data (or all if pagination disabled)
|
|
3239
3677
|
*/
|
|
3240
|
-
|
|
3678
|
+
protected readonly displayData: _angular_core.Signal<Record<string, unknown>[]>;
|
|
3679
|
+
/** Total pages */
|
|
3680
|
+
protected readonly totalPages: _angular_core.Signal<number>;
|
|
3681
|
+
/** Total filtered row count */
|
|
3682
|
+
protected readonly totalRows: _angular_core.Signal<number>;
|
|
3683
|
+
/** Whether all visible rows are selected */
|
|
3684
|
+
protected readonly allSelected: _angular_core.Signal<boolean>;
|
|
3241
3685
|
/**
|
|
3242
|
-
*
|
|
3686
|
+
* Computed CSS classes for the table element
|
|
3243
3687
|
*/
|
|
3244
|
-
|
|
3688
|
+
tableClasses: _angular_core.Signal<string>;
|
|
3245
3689
|
/**
|
|
3246
|
-
*
|
|
3690
|
+
* Computed CSS classes for the wrapper element
|
|
3247
3691
|
*/
|
|
3692
|
+
wrapperClasses: _angular_core.Signal<string>;
|
|
3693
|
+
handleSort(columnKey: string): void;
|
|
3694
|
+
getSortState(columnKey: string): 'asc' | 'desc' | null;
|
|
3695
|
+
getAriaSort(columnKey: string): string | null;
|
|
3696
|
+
getHeaderClasses(column: TableColumn): string;
|
|
3248
3697
|
getCellValue(row: Record<string, unknown>, columnKey: string): unknown;
|
|
3249
|
-
/**
|
|
3250
|
-
* Get custom template for a column if it exists
|
|
3251
|
-
*/
|
|
3252
3698
|
getCellTemplate(columnKey: string): TableCellDirective | undefined;
|
|
3253
|
-
/**
|
|
3254
|
-
* Check if a column has a custom template
|
|
3255
|
-
*/
|
|
3256
3699
|
hasCustomTemplate(columnKey: string): boolean;
|
|
3257
|
-
/**
|
|
3258
|
-
* Handle row click
|
|
3259
|
-
*/
|
|
3260
3700
|
onRowClick(row: Record<string, unknown>): void;
|
|
3701
|
+
protected goToPage(page: number): void;
|
|
3702
|
+
protected onPageSizeChange(event: Event): void;
|
|
3703
|
+
protected get paginationStart(): number;
|
|
3704
|
+
protected get paginationEnd(): number;
|
|
3705
|
+
protected toggleSelectAll(): void;
|
|
3706
|
+
protected toggleRowSelect(relativeIndex: number): void;
|
|
3707
|
+
protected isRowSelected(relativeIndex: number): boolean;
|
|
3708
|
+
private getAbsoluteIndex;
|
|
3709
|
+
private emitSelectionChange;
|
|
3710
|
+
protected onFilterChange(columnKey: string, event: Event): void;
|
|
3711
|
+
protected getFilterValue(columnKey: string): string;
|
|
3712
|
+
protected startEdit(rowIndex: number, column: string, currentValue: unknown): void;
|
|
3713
|
+
protected isEditing(rowIndex: number, column: string): boolean;
|
|
3714
|
+
protected commitEdit(rowIndex: number, column: string): void;
|
|
3715
|
+
protected cancelEdit(): void;
|
|
3716
|
+
protected onEditKeydown(event: KeyboardEvent, rowIndex: number, column: string): void;
|
|
3261
3717
|
static ɵfac: _angular_core.ɵɵFactoryDeclaration<TableComponent, never>;
|
|
3262
|
-
static ɵcmp: _angular_core.ɵɵComponentDeclaration<TableComponent, "lc-table", never, { "columns": { "alias": "columns"; "required": false; "isSignal": true; }; "data": { "alias": "data"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "hoverable": { "alias": "hoverable"; "required": false; "isSignal": true; }; "responsive": { "alias": "responsive"; "required": false; "isSignal": true; }; "emptyText": { "alias": "emptyText"; "required": false; "isSignal": true; }; }, { "sort": "sort"; "rowClick": "rowClick"; }, ["cellTemplates"], never, true, never>;
|
|
3718
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<TableComponent, "lc-table", never, { "columns": { "alias": "columns"; "required": false; "isSignal": true; }; "data": { "alias": "data"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "hoverable": { "alias": "hoverable"; "required": false; "isSignal": true; }; "responsive": { "alias": "responsive"; "required": false; "isSignal": true; }; "emptyText": { "alias": "emptyText"; "required": false; "isSignal": true; }; "paginate": { "alias": "paginate"; "required": false; "isSignal": true; }; "pageSize": { "alias": "pageSize"; "required": false; "isSignal": true; }; "pageSizeOptions": { "alias": "pageSizeOptions"; "required": false; "isSignal": true; }; "selectable": { "alias": "selectable"; "required": false; "isSignal": true; }; "filterable": { "alias": "filterable"; "required": false; "isSignal": true; }; "editable": { "alias": "editable"; "required": false; "isSignal": true; }; }, { "sort": "sort"; "rowClick": "rowClick"; "cellEdit": "cellEdit"; "selectionChange": "selectionChange"; }, ["cellTemplates"], never, true, never>;
|
|
3263
3719
|
}
|
|
3264
3720
|
|
|
3265
3721
|
/**
|
|
3266
|
-
* Field
|
|
3267
|
-
* Useful for read-only data displays like profile pages, detail views, etc.
|
|
3722
|
+
* Field group component for displaying label-value pairs.
|
|
3268
3723
|
*
|
|
3269
|
-
*
|
|
3270
|
-
*
|
|
3271
|
-
*
|
|
3272
|
-
*
|
|
3273
|
-
*
|
|
3274
|
-
*
|
|
3275
|
-
* ```html
|
|
3276
|
-
* <lc-field-group
|
|
3277
|
-
* label="Language"
|
|
3278
|
-
* value="English (US)"
|
|
3279
|
-
* icon="globe-alt">
|
|
3280
|
-
* </lc-field-group>
|
|
3281
|
-
* ```
|
|
3724
|
+
* Features:
|
|
3725
|
+
* - Consistent label-value layout for read-only data
|
|
3726
|
+
* - Optional leading icon from Heroicons
|
|
3727
|
+
* - Compact mode for dense layouts
|
|
3728
|
+
* - Content projection for custom value rendering
|
|
3729
|
+
* - Configurable icon size (xs, sm, md)
|
|
3282
3730
|
*
|
|
3283
|
-
* @example
|
|
3731
|
+
* @example
|
|
3284
3732
|
* ```html
|
|
3285
|
-
* <lc-field-group label="
|
|
3286
|
-
*
|
|
3287
|
-
* </lc-field-group>
|
|
3733
|
+
* <lc-field-group label="Email" value="user@example.com" />
|
|
3734
|
+
* <lc-field-group label="Language" value="English" icon="globe-alt" />
|
|
3288
3735
|
* ```
|
|
3289
3736
|
*/
|
|
3290
3737
|
declare class FieldGroupComponent {
|
|
@@ -3321,24 +3768,21 @@ interface StepperStep {
|
|
|
3321
3768
|
}
|
|
3322
3769
|
type StepState = 'pending' | 'active' | 'completed';
|
|
3323
3770
|
/**
|
|
3324
|
-
* Stepper
|
|
3771
|
+
* Stepper component for multi-step wizard workflows.
|
|
3325
3772
|
*
|
|
3326
|
-
*
|
|
3327
|
-
*
|
|
3773
|
+
* Features:
|
|
3774
|
+
* - Horizontal and vertical orientations
|
|
3775
|
+
* - Active, completed, and pending step states
|
|
3776
|
+
* - Numbered step indicators with checkmark on completion
|
|
3777
|
+
* - Optional step descriptions and "optional" labels
|
|
3778
|
+
* - Linear mode restricting navigation to sequential steps
|
|
3779
|
+
* - Two-way active step binding
|
|
3780
|
+
* - Content projection for step body
|
|
3328
3781
|
*
|
|
3329
3782
|
* @example
|
|
3330
3783
|
* ```html
|
|
3331
|
-
* <lc-stepper
|
|
3332
|
-
*
|
|
3333
|
-
* [(activeStep)]="currentStep"
|
|
3334
|
-
* (stepChange)="onStep($event)"
|
|
3335
|
-
* >
|
|
3336
|
-
* @if (currentStep === 0) {
|
|
3337
|
-
* <div class="step-content">Step 1 content</div>
|
|
3338
|
-
* }
|
|
3339
|
-
* @if (currentStep === 1) {
|
|
3340
|
-
* <div class="step-content">Step 2 content</div>
|
|
3341
|
-
* }
|
|
3784
|
+
* <lc-stepper [steps]="steps" [(activeStep)]="currentStep">
|
|
3785
|
+
* <div>Step content here</div>
|
|
3342
3786
|
* </lc-stepper>
|
|
3343
3787
|
* ```
|
|
3344
3788
|
*/
|
|
@@ -3350,7 +3794,7 @@ declare class StepperComponent {
|
|
|
3350
3794
|
/** Whether completed steps can be clicked to navigate back */
|
|
3351
3795
|
linear: _angular_core.InputSignal<boolean>;
|
|
3352
3796
|
/** Orientation */
|
|
3353
|
-
orientation: _angular_core.InputSignal<"
|
|
3797
|
+
orientation: _angular_core.InputSignal<"horizontal" | "vertical">;
|
|
3354
3798
|
/** Emitted when active step changes */
|
|
3355
3799
|
stepChange: _angular_core.OutputEmitterRef<number>;
|
|
3356
3800
|
/** Computed total step count */
|
|
@@ -3399,10 +3843,15 @@ interface FilterValues {
|
|
|
3399
3843
|
[key: string]: string;
|
|
3400
3844
|
}
|
|
3401
3845
|
/**
|
|
3402
|
-
*
|
|
3846
|
+
* Filter bar component for composable data filtering.
|
|
3403
3847
|
*
|
|
3404
|
-
*
|
|
3405
|
-
*
|
|
3848
|
+
* Features:
|
|
3849
|
+
* - Select dropdowns, toggle groups, and search inputs
|
|
3850
|
+
* - Declarative filter configuration via FilterConfig array
|
|
3851
|
+
* - Two-way filter values binding
|
|
3852
|
+
* - Responsive horizontal flex layout
|
|
3853
|
+
* - Size variants (sm, md)
|
|
3854
|
+
* - Dark mode support
|
|
3406
3855
|
*
|
|
3407
3856
|
* @example
|
|
3408
3857
|
* ```html
|
|
@@ -3410,7 +3859,7 @@ interface FilterValues {
|
|
|
3410
3859
|
* [filters]="filterConfig"
|
|
3411
3860
|
* [values]="currentFilters"
|
|
3412
3861
|
* (valuesChange)="onFilterChange($event)"
|
|
3413
|
-
*
|
|
3862
|
+
* />
|
|
3414
3863
|
* ```
|
|
3415
3864
|
*/
|
|
3416
3865
|
declare class FilterBarComponent {
|
|
@@ -3440,21 +3889,19 @@ declare class FilterBarComponent {
|
|
|
3440
3889
|
|
|
3441
3890
|
type SpinnerSize = 'sm' | 'md' | 'lg';
|
|
3442
3891
|
/**
|
|
3443
|
-
* Spinner component for loading
|
|
3892
|
+
* Spinner component for loading state indication.
|
|
3444
3893
|
*
|
|
3445
|
-
*
|
|
3446
|
-
*
|
|
3894
|
+
* Features:
|
|
3895
|
+
* - Animated spinning indicator
|
|
3896
|
+
* - Size variants (sm, md, lg)
|
|
3897
|
+
* - Optional message text below spinner
|
|
3898
|
+
* - Design system color token integration
|
|
3899
|
+
* - Accessible with ARIA status role
|
|
3447
3900
|
*
|
|
3448
3901
|
* @example
|
|
3449
3902
|
* ```html
|
|
3450
|
-
* <!-- Simple spinner -->
|
|
3451
3903
|
* <lc-spinner />
|
|
3452
|
-
*
|
|
3453
|
-
* <!-- With message -->
|
|
3454
|
-
* <lc-spinner message="Loading data..." />
|
|
3455
|
-
*
|
|
3456
|
-
* <!-- Large spinner -->
|
|
3457
|
-
* <lc-spinner size="lg" message="Loading dashboard..." />
|
|
3904
|
+
* <lc-spinner size="lg" message="Loading data..." />
|
|
3458
3905
|
* ```
|
|
3459
3906
|
*/
|
|
3460
3907
|
declare class SpinnerComponent {
|
|
@@ -3476,22 +3923,18 @@ type SkeletonVariant = 'line' | 'circle' | 'rect';
|
|
|
3476
3923
|
/**
|
|
3477
3924
|
* Skeleton loader component for placeholder loading states.
|
|
3478
3925
|
*
|
|
3479
|
-
*
|
|
3480
|
-
*
|
|
3926
|
+
* Features:
|
|
3927
|
+
* - Variant shapes (text, rect, circle)
|
|
3928
|
+
* - Shimmer animation effect
|
|
3929
|
+
* - Custom width, height, and border radius
|
|
3930
|
+
* - Composable for building complex loading layouts
|
|
3931
|
+
* - Dark mode compatible
|
|
3481
3932
|
*
|
|
3482
3933
|
* @example
|
|
3483
3934
|
* ```html
|
|
3484
|
-
* <!-- Text line (default) -->
|
|
3485
3935
|
* <lc-skeleton />
|
|
3486
|
-
*
|
|
3487
|
-
* <!-- Custom width/height -->
|
|
3488
|
-
* <lc-skeleton width="200px" height="1.75rem" />
|
|
3489
|
-
*
|
|
3490
|
-
* <!-- Circle avatar placeholder -->
|
|
3491
3936
|
* <lc-skeleton variant="circle" width="40px" height="40px" />
|
|
3492
|
-
*
|
|
3493
|
-
* <!-- Full-width rectangle (e.g. chart area) -->
|
|
3494
|
-
* <lc-skeleton variant="rect" width="100%" height="400px" borderRadius="0.5rem" />
|
|
3937
|
+
* <lc-skeleton variant="rect" width="100%" height="400px" />
|
|
3495
3938
|
* ```
|
|
3496
3939
|
*/
|
|
3497
3940
|
declare class SkeletonComponent {
|
|
@@ -3517,24 +3960,21 @@ declare class SkeletonComponent {
|
|
|
3517
3960
|
|
|
3518
3961
|
type EmptyStateSize = 'sm' | 'md' | 'lg';
|
|
3519
3962
|
/**
|
|
3520
|
-
* Empty
|
|
3963
|
+
* Empty state component for "no data" placeholder displays.
|
|
3521
3964
|
*
|
|
3522
|
-
*
|
|
3523
|
-
*
|
|
3965
|
+
* Features:
|
|
3966
|
+
* - Compact (sm) and page-level (md, lg) size modes
|
|
3967
|
+
* - Optional icon from Heroicons library
|
|
3968
|
+
* - Heading and description text
|
|
3969
|
+
* - Action slot for projected CTA buttons
|
|
3970
|
+
* - Centered layout with visual hierarchy
|
|
3524
3971
|
*
|
|
3525
3972
|
* @example
|
|
3526
3973
|
* ```html
|
|
3527
|
-
* <!-- Inline / card-level (sm) -->
|
|
3528
|
-
* <lc-empty-state
|
|
3529
|
-
* size="sm"
|
|
3530
|
-
* message="No signals generated for this asset yet." />
|
|
3531
|
-
*
|
|
3532
|
-
* <!-- Page-level with icon + action -->
|
|
3533
3974
|
* <lc-empty-state
|
|
3534
3975
|
* icon="chart-bar"
|
|
3535
|
-
* heading="No
|
|
3536
|
-
* message="
|
|
3537
|
-
* >
|
|
3976
|
+
* heading="No Data"
|
|
3977
|
+
* message="No items found.">
|
|
3538
3978
|
* <lc-button variant="primary">Get Started</lc-button>
|
|
3539
3979
|
* </lc-empty-state>
|
|
3540
3980
|
* ```
|
|
@@ -3568,11 +4008,16 @@ declare class EmptyStateComponent {
|
|
|
3568
4008
|
type DrawerPosition = 'left' | 'right';
|
|
3569
4009
|
type DrawerSize = 'sm' | 'md' | 'lg' | 'xl';
|
|
3570
4010
|
/**
|
|
3571
|
-
* Drawer
|
|
4011
|
+
* Drawer component for slide-out overlay panels.
|
|
3572
4012
|
*
|
|
3573
|
-
*
|
|
3574
|
-
*
|
|
3575
|
-
*
|
|
4013
|
+
* Features:
|
|
4014
|
+
* - Slide-in from left, right, top, or bottom
|
|
4015
|
+
* - Size presets (sm, md, lg, xl, full)
|
|
4016
|
+
* - Optional backdrop overlay with click-to-close
|
|
4017
|
+
* - Close on Escape key support
|
|
4018
|
+
* - Heading text display
|
|
4019
|
+
* - Content projection for arbitrary body content
|
|
4020
|
+
* - Accessible with ARIA dialog role
|
|
3576
4021
|
*
|
|
3577
4022
|
* @example
|
|
3578
4023
|
* ```html
|
|
@@ -3617,5 +4062,1914 @@ declare class DrawerComponent {
|
|
|
3617
4062
|
static ɵcmp: _angular_core.ɵɵComponentDeclaration<DrawerComponent, "lc-drawer", never, { "open": { "alias": "open"; "required": false; "isSignal": true; }; "position": { "alias": "position"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "heading": { "alias": "heading"; "required": false; "isSignal": true; }; "hasOverlay": { "alias": "hasOverlay"; "required": false; "isSignal": true; }; "closeOnOverlayClick": { "alias": "closeOnOverlayClick"; "required": false; "isSignal": true; }; "closeOnEscape": { "alias": "closeOnEscape"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; }, { "closed": "closed"; }, never, ["*"], true, never>;
|
|
3618
4063
|
}
|
|
3619
4064
|
|
|
3620
|
-
|
|
3621
|
-
|
|
4065
|
+
interface TimelineItem {
|
|
4066
|
+
/** Title of the event */
|
|
4067
|
+
title: string;
|
|
4068
|
+
/** Optional description */
|
|
4069
|
+
description?: string;
|
|
4070
|
+
/** Optional timestamp string */
|
|
4071
|
+
timestamp?: string;
|
|
4072
|
+
/** Optional icon name (heroicon) */
|
|
4073
|
+
icon?: string;
|
|
4074
|
+
/** Optional color for the dot/icon */
|
|
4075
|
+
color?: 'primary' | 'secondary' | 'success' | 'warning' | 'error' | 'info' | 'neutral';
|
|
4076
|
+
}
|
|
4077
|
+
type TimelineOrientation = 'vertical' | 'horizontal';
|
|
4078
|
+
/**
|
|
4079
|
+
* Timeline component for chronological event display.
|
|
4080
|
+
*
|
|
4081
|
+
* Features:
|
|
4082
|
+
* - Vertical timeline with connecting line
|
|
4083
|
+
* - Semantic status colors per event (info, success, warning, error)
|
|
4084
|
+
* - Date and description display per item
|
|
4085
|
+
* - Icon support for timeline markers
|
|
4086
|
+
* - Dark mode support
|
|
4087
|
+
*
|
|
4088
|
+
* @example
|
|
4089
|
+
* ```html
|
|
4090
|
+
* <lc-timeline [items]="events"></lc-timeline>
|
|
4091
|
+
* ```
|
|
4092
|
+
*/
|
|
4093
|
+
declare class TimelineComponent {
|
|
4094
|
+
/**
|
|
4095
|
+
* List of timeline events.
|
|
4096
|
+
*/
|
|
4097
|
+
items: _angular_core.InputSignal<TimelineItem[]>;
|
|
4098
|
+
/**
|
|
4099
|
+
* Layout orientation.
|
|
4100
|
+
* @default 'vertical'
|
|
4101
|
+
*/
|
|
4102
|
+
orientation: _angular_core.InputSignal<TimelineOrientation>;
|
|
4103
|
+
/**
|
|
4104
|
+
* Compact mode reduces spacing.
|
|
4105
|
+
* @default false
|
|
4106
|
+
*/
|
|
4107
|
+
compact: _angular_core.InputSignal<boolean>;
|
|
4108
|
+
protected timelineClasses: _angular_core.Signal<string>;
|
|
4109
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<TimelineComponent, never>;
|
|
4110
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<TimelineComponent, "lc-timeline", never, { "items": { "alias": "items"; "required": true; "isSignal": true; }; "orientation": { "alias": "orientation"; "required": false; "isSignal": true; }; "compact": { "alias": "compact"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
|
|
4111
|
+
}
|
|
4112
|
+
|
|
4113
|
+
interface AvatarGroupItem {
|
|
4114
|
+
/** Image source URL */
|
|
4115
|
+
src?: string;
|
|
4116
|
+
/** Alt text */
|
|
4117
|
+
alt?: string;
|
|
4118
|
+
/** Full name for initials fallback */
|
|
4119
|
+
name?: string;
|
|
4120
|
+
}
|
|
4121
|
+
declare class AvatarGroupComponent {
|
|
4122
|
+
/** List of avatars to show */
|
|
4123
|
+
avatars: _angular_core.InputSignal<AvatarGroupItem[]>;
|
|
4124
|
+
/** Avatar size */
|
|
4125
|
+
size: _angular_core.InputSignal<AvatarSize>;
|
|
4126
|
+
/** Maximum visible avatars before showing overflow count */
|
|
4127
|
+
max: _angular_core.InputSignal<number>;
|
|
4128
|
+
protected visibleAvatars: _angular_core.Signal<AvatarGroupItem[]>;
|
|
4129
|
+
protected overflowCount: _angular_core.Signal<number>;
|
|
4130
|
+
protected groupClasses: _angular_core.Signal<string>;
|
|
4131
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<AvatarGroupComponent, never>;
|
|
4132
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<AvatarGroupComponent, "lc-avatar-group", never, { "avatars": { "alias": "avatars"; "required": true; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "max": { "alias": "max"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
|
|
4133
|
+
}
|
|
4134
|
+
|
|
4135
|
+
declare class SliderComponent implements ControlValueAccessor {
|
|
4136
|
+
/** Minimum value */
|
|
4137
|
+
min: _angular_core.InputSignal<number>;
|
|
4138
|
+
/** Maximum value */
|
|
4139
|
+
max: _angular_core.InputSignal<number>;
|
|
4140
|
+
/** Step increment */
|
|
4141
|
+
step: _angular_core.InputSignal<number>;
|
|
4142
|
+
/** Label text */
|
|
4143
|
+
label: _angular_core.InputSignal<string | undefined>;
|
|
4144
|
+
/** Whether to show the current value */
|
|
4145
|
+
showValue: _angular_core.InputSignal<boolean>;
|
|
4146
|
+
/** Disabled state */
|
|
4147
|
+
disabled: _angular_core.InputSignal<boolean>;
|
|
4148
|
+
/** Emits the current value on change */
|
|
4149
|
+
valueChange: _angular_core.OutputEmitterRef<number>;
|
|
4150
|
+
/** Internal value */
|
|
4151
|
+
protected value: _angular_core.WritableSignal<number>;
|
|
4152
|
+
/** Internal disabled state — merged from input + CVA */
|
|
4153
|
+
protected isDisabled: _angular_core.WritableSignal<boolean>;
|
|
4154
|
+
/** Percentage for fill track */
|
|
4155
|
+
protected fillPercentage: _angular_core.Signal<number>;
|
|
4156
|
+
protected sliderClasses: _angular_core.Signal<string>;
|
|
4157
|
+
private onChange;
|
|
4158
|
+
private onTouched;
|
|
4159
|
+
onInput(event: Event): void;
|
|
4160
|
+
onBlur(): void;
|
|
4161
|
+
writeValue(val: number): void;
|
|
4162
|
+
registerOnChange(fn: (val: number) => void): void;
|
|
4163
|
+
registerOnTouched(fn: () => void): void;
|
|
4164
|
+
setDisabledState(isDisabled: boolean): void;
|
|
4165
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<SliderComponent, never>;
|
|
4166
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<SliderComponent, "lc-slider", never, { "min": { "alias": "min"; "required": false; "isSignal": true; }; "max": { "alias": "max"; "required": false; "isSignal": true; }; "step": { "alias": "step"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "showValue": { "alias": "showValue"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; }, { "valueChange": "valueChange"; }, never, never, true, never>;
|
|
4167
|
+
}
|
|
4168
|
+
|
|
4169
|
+
declare class NumberInputComponent implements ControlValueAccessor {
|
|
4170
|
+
/** Minimum value */
|
|
4171
|
+
min: _angular_core.InputSignal<number | undefined>;
|
|
4172
|
+
/** Maximum value */
|
|
4173
|
+
max: _angular_core.InputSignal<number | undefined>;
|
|
4174
|
+
/** Step increment */
|
|
4175
|
+
step: _angular_core.InputSignal<number>;
|
|
4176
|
+
/** Label text */
|
|
4177
|
+
label: _angular_core.InputSignal<string | undefined>;
|
|
4178
|
+
/** Placeholder */
|
|
4179
|
+
placeholder: _angular_core.InputSignal<string>;
|
|
4180
|
+
/** Disabled state */
|
|
4181
|
+
disabled: _angular_core.InputSignal<boolean>;
|
|
4182
|
+
/** Emits value on change */
|
|
4183
|
+
valueChange: _angular_core.OutputEmitterRef<number>;
|
|
4184
|
+
protected value: _angular_core.WritableSignal<number | null>;
|
|
4185
|
+
protected isDisabled: _angular_core.WritableSignal<boolean>;
|
|
4186
|
+
protected containerClasses: _angular_core.Signal<string>;
|
|
4187
|
+
protected canDecrement: _angular_core.Signal<boolean>;
|
|
4188
|
+
protected canIncrement: _angular_core.Signal<boolean>;
|
|
4189
|
+
private onChange;
|
|
4190
|
+
private onTouched;
|
|
4191
|
+
decrement(): void;
|
|
4192
|
+
increment(): void;
|
|
4193
|
+
onInput(event: Event): void;
|
|
4194
|
+
onBlur(): void;
|
|
4195
|
+
private setValue;
|
|
4196
|
+
writeValue(val: number | null): void;
|
|
4197
|
+
registerOnChange(fn: (val: number | null) => void): void;
|
|
4198
|
+
registerOnTouched(fn: () => void): void;
|
|
4199
|
+
setDisabledState(isDisabled: boolean): void;
|
|
4200
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<NumberInputComponent, never>;
|
|
4201
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<NumberInputComponent, "lc-number-input", never, { "min": { "alias": "min"; "required": false; "isSignal": true; }; "max": { "alias": "max"; "required": false; "isSignal": true; }; "step": { "alias": "step"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; }, { "valueChange": "valueChange"; }, never, never, true, never>;
|
|
4202
|
+
}
|
|
4203
|
+
|
|
4204
|
+
type CalloutVariant = 'info' | 'success' | 'warning' | 'error' | 'neutral';
|
|
4205
|
+
declare class CalloutComponent {
|
|
4206
|
+
/** Visual variant */
|
|
4207
|
+
variant: _angular_core.InputSignal<CalloutVariant>;
|
|
4208
|
+
/** Title text (optional) */
|
|
4209
|
+
title: _angular_core.InputSignal<string | undefined>;
|
|
4210
|
+
/** Whether the callout can be dismissed */
|
|
4211
|
+
dismissible: _angular_core.InputSignal<boolean>;
|
|
4212
|
+
/** Emits when dismiss button is clicked */
|
|
4213
|
+
dismissed: _angular_core.OutputEmitterRef<void>;
|
|
4214
|
+
protected visible: _angular_core.WritableSignal<boolean>;
|
|
4215
|
+
protected calloutClasses: _angular_core.Signal<string>;
|
|
4216
|
+
protected iconName: _angular_core.Signal<string>;
|
|
4217
|
+
dismiss(): void;
|
|
4218
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<CalloutComponent, never>;
|
|
4219
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<CalloutComponent, "lc-callout", never, { "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "title": { "alias": "title"; "required": false; "isSignal": true; }; "dismissible": { "alias": "dismissible"; "required": false; "isSignal": true; }; }, { "dismissed": "dismissed"; }, never, ["*"], true, never>;
|
|
4220
|
+
}
|
|
4221
|
+
|
|
4222
|
+
type RatingSize = 'sm' | 'md' | 'lg';
|
|
4223
|
+
declare class RatingComponent implements ControlValueAccessor {
|
|
4224
|
+
/** Maximum number of stars */
|
|
4225
|
+
max: _angular_core.InputSignal<number>;
|
|
4226
|
+
/** Size variant */
|
|
4227
|
+
size: _angular_core.InputSignal<RatingSize>;
|
|
4228
|
+
/** Whether the rating is read-only */
|
|
4229
|
+
readonly: _angular_core.InputSignal<boolean>;
|
|
4230
|
+
/** Whether the rating is disabled */
|
|
4231
|
+
disabled: _angular_core.InputSignal<boolean>;
|
|
4232
|
+
/** Whether to allow half-star ratings */
|
|
4233
|
+
allowHalf: _angular_core.InputSignal<boolean>;
|
|
4234
|
+
/** Label text */
|
|
4235
|
+
label: _angular_core.InputSignal<string | undefined>;
|
|
4236
|
+
/** Whether to show the numeric value */
|
|
4237
|
+
showValue: _angular_core.InputSignal<boolean>;
|
|
4238
|
+
/** Emits the selected rating */
|
|
4239
|
+
ratingChange: _angular_core.OutputEmitterRef<number>;
|
|
4240
|
+
protected value: _angular_core.WritableSignal<number>;
|
|
4241
|
+
protected hoveredValue: _angular_core.WritableSignal<number>;
|
|
4242
|
+
protected isDisabled: _angular_core.WritableSignal<boolean>;
|
|
4243
|
+
protected stars: _angular_core.Signal<number[]>;
|
|
4244
|
+
protected ratingClasses: _angular_core.Signal<string>;
|
|
4245
|
+
protected getStarState(star: number): 'full' | 'half' | 'empty';
|
|
4246
|
+
protected getStarIcon(star: number): string;
|
|
4247
|
+
protected isStarFilled(star: number): boolean;
|
|
4248
|
+
protected isStarHalf(star: number): boolean;
|
|
4249
|
+
protected onStarClick(star: number): void;
|
|
4250
|
+
protected onStarHover(star: number): void;
|
|
4251
|
+
protected onMouseLeave(): void;
|
|
4252
|
+
private onChange;
|
|
4253
|
+
private onTouched;
|
|
4254
|
+
writeValue(val: number): void;
|
|
4255
|
+
registerOnChange(fn: (val: number) => void): void;
|
|
4256
|
+
registerOnTouched(fn: () => void): void;
|
|
4257
|
+
setDisabledState(isDisabled: boolean): void;
|
|
4258
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<RatingComponent, never>;
|
|
4259
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<RatingComponent, "lc-rating", never, { "max": { "alias": "max"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "allowHalf": { "alias": "allowHalf"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "showValue": { "alias": "showValue"; "required": false; "isSignal": true; }; }, { "ratingChange": "ratingChange"; }, never, never, true, never>;
|
|
4260
|
+
}
|
|
4261
|
+
|
|
4262
|
+
declare class ColorPickerComponent implements ControlValueAccessor {
|
|
4263
|
+
/** Label text */
|
|
4264
|
+
label: _angular_core.InputSignal<string | undefined>;
|
|
4265
|
+
/** Predefined color swatches */
|
|
4266
|
+
swatches: _angular_core.InputSignal<string[]>;
|
|
4267
|
+
/** Whether to show the hex input field */
|
|
4268
|
+
showInput: _angular_core.InputSignal<boolean>;
|
|
4269
|
+
/** Whether the picker is disabled */
|
|
4270
|
+
disabled: _angular_core.InputSignal<boolean>;
|
|
4271
|
+
/** Emits the selected color hex value */
|
|
4272
|
+
colorChange: _angular_core.OutputEmitterRef<string>;
|
|
4273
|
+
protected value: _angular_core.WritableSignal<string>;
|
|
4274
|
+
protected isDisabled: _angular_core.WritableSignal<boolean>;
|
|
4275
|
+
protected pickerClasses: _angular_core.Signal<string>;
|
|
4276
|
+
private onChange;
|
|
4277
|
+
private onTouched;
|
|
4278
|
+
protected selectSwatch(color: string): void;
|
|
4279
|
+
protected onNativeInput(event: Event): void;
|
|
4280
|
+
protected onHexInput(event: Event): void;
|
|
4281
|
+
protected onBlur(): void;
|
|
4282
|
+
private setValue;
|
|
4283
|
+
writeValue(val: string): void;
|
|
4284
|
+
registerOnChange(fn: (val: string) => void): void;
|
|
4285
|
+
registerOnTouched(fn: () => void): void;
|
|
4286
|
+
setDisabledState(isDisabled: boolean): void;
|
|
4287
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<ColorPickerComponent, never>;
|
|
4288
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<ColorPickerComponent, "lc-color-picker", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; "swatches": { "alias": "swatches"; "required": false; "isSignal": true; }; "showInput": { "alias": "showInput"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; }, { "colorChange": "colorChange"; }, never, never, true, never>;
|
|
4289
|
+
}
|
|
4290
|
+
|
|
4291
|
+
type CodeBlockLanguage = 'typescript' | 'javascript' | 'html' | 'css' | 'scss' | 'json' | 'bash' | 'python' | 'java' | 'text';
|
|
4292
|
+
declare class CodeBlockComponent {
|
|
4293
|
+
private sanitizer;
|
|
4294
|
+
/** Code content to display */
|
|
4295
|
+
code: _angular_core.InputSignal<string>;
|
|
4296
|
+
/** Language label */
|
|
4297
|
+
language: _angular_core.InputSignal<CodeBlockLanguage>;
|
|
4298
|
+
/** Optional filename to display */
|
|
4299
|
+
filename: _angular_core.InputSignal<string | undefined>;
|
|
4300
|
+
/** Whether to show line numbers */
|
|
4301
|
+
showLineNumbers: _angular_core.InputSignal<boolean>;
|
|
4302
|
+
/** Whether to show copy button */
|
|
4303
|
+
showCopy: _angular_core.InputSignal<boolean>;
|
|
4304
|
+
/** Whether the code block has a header bar */
|
|
4305
|
+
showHeader: _angular_core.InputSignal<boolean>;
|
|
4306
|
+
protected copied: _angular_core.WritableSignal<boolean>;
|
|
4307
|
+
constructor(sanitizer: DomSanitizer);
|
|
4308
|
+
protected highlightedLines: _angular_core.Signal<SafeHtml[]>;
|
|
4309
|
+
protected lineNumbers: _angular_core.Signal<number[]>;
|
|
4310
|
+
protected headerLabel: _angular_core.Signal<string>;
|
|
4311
|
+
protected codeClasses: _angular_core.Signal<string>;
|
|
4312
|
+
protected copyToClipboard(): Promise<void>;
|
|
4313
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<CodeBlockComponent, never>;
|
|
4314
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<CodeBlockComponent, "lc-code-block", never, { "code": { "alias": "code"; "required": true; "isSignal": true; }; "language": { "alias": "language"; "required": false; "isSignal": true; }; "filename": { "alias": "filename"; "required": false; "isSignal": true; }; "showLineNumbers": { "alias": "showLineNumbers"; "required": false; "isSignal": true; }; "showCopy": { "alias": "showCopy"; "required": false; "isSignal": true; }; "showHeader": { "alias": "showHeader"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
|
|
4315
|
+
}
|
|
4316
|
+
|
|
4317
|
+
interface FooterLink {
|
|
4318
|
+
/** Display label */
|
|
4319
|
+
label: string;
|
|
4320
|
+
/** URL or route */
|
|
4321
|
+
href: string;
|
|
4322
|
+
/** Whether it opens in a new tab */
|
|
4323
|
+
external?: boolean;
|
|
4324
|
+
}
|
|
4325
|
+
interface FooterSection {
|
|
4326
|
+
/** Section heading */
|
|
4327
|
+
title: string;
|
|
4328
|
+
/** Links in this section */
|
|
4329
|
+
links: FooterLink[];
|
|
4330
|
+
}
|
|
4331
|
+
type FooterVariant = 'default' | 'primary' | 'dark' | 'neutral';
|
|
4332
|
+
declare class FooterComponent {
|
|
4333
|
+
/** Footer navigation sections */
|
|
4334
|
+
sections: _angular_core.InputSignal<FooterSection[]>;
|
|
4335
|
+
/** Copyright text */
|
|
4336
|
+
copyright: _angular_core.InputSignal<string | undefined>;
|
|
4337
|
+
/** Whether to show a top border */
|
|
4338
|
+
showBorder: _angular_core.InputSignal<boolean>;
|
|
4339
|
+
/** Compact layout (single row) */
|
|
4340
|
+
compact: _angular_core.InputSignal<boolean>;
|
|
4341
|
+
/** Color variant */
|
|
4342
|
+
variant: _angular_core.InputSignal<FooterVariant>;
|
|
4343
|
+
protected footerClasses: _angular_core.Signal<string>;
|
|
4344
|
+
protected currentYear: number;
|
|
4345
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<FooterComponent, never>;
|
|
4346
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<FooterComponent, "lc-footer", never, { "sections": { "alias": "sections"; "required": false; "isSignal": true; }; "copyright": { "alias": "copyright"; "required": false; "isSignal": true; }; "showBorder": { "alias": "showBorder"; "required": false; "isSignal": true; }; "compact": { "alias": "compact"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
|
|
4347
|
+
}
|
|
4348
|
+
|
|
4349
|
+
type SparklineColor = 'primary' | 'secondary' | 'success' | 'warning' | 'error' | 'info';
|
|
4350
|
+
type SparklineCurve = 'linear' | 'smooth';
|
|
4351
|
+
declare class SparklineComponent {
|
|
4352
|
+
/** Data points to plot. */
|
|
4353
|
+
data: _angular_core.InputSignal<number[]>;
|
|
4354
|
+
/** Stroke color theme. */
|
|
4355
|
+
color: _angular_core.InputSignal<SparklineColor>;
|
|
4356
|
+
/** Width of the SVG in pixels. */
|
|
4357
|
+
width: _angular_core.InputSignal<number>;
|
|
4358
|
+
/** Height of the SVG in pixels. */
|
|
4359
|
+
height: _angular_core.InputSignal<number>;
|
|
4360
|
+
/** Stroke width in pixels. */
|
|
4361
|
+
strokeWidth: _angular_core.InputSignal<number>;
|
|
4362
|
+
/** Show a filled area under the line. */
|
|
4363
|
+
filled: _angular_core.InputSignal<boolean>;
|
|
4364
|
+
/** Curve interpolation mode. */
|
|
4365
|
+
curve: _angular_core.InputSignal<SparklineCurve>;
|
|
4366
|
+
/** Show a dot on the last data point. */
|
|
4367
|
+
showEndDot: _angular_core.InputSignal<boolean>;
|
|
4368
|
+
protected readonly colorVar: _angular_core.Signal<string>;
|
|
4369
|
+
protected readonly fillColorVar: _angular_core.Signal<string>;
|
|
4370
|
+
protected readonly pathD: _angular_core.Signal<string>;
|
|
4371
|
+
protected readonly areaD: _angular_core.Signal<string>;
|
|
4372
|
+
protected readonly endDot: _angular_core.Signal<{
|
|
4373
|
+
cx: number;
|
|
4374
|
+
cy: number;
|
|
4375
|
+
r: number;
|
|
4376
|
+
} | null>;
|
|
4377
|
+
protected readonly viewBox: _angular_core.Signal<string>;
|
|
4378
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<SparklineComponent, never>;
|
|
4379
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<SparklineComponent, "lc-sparkline", never, { "data": { "alias": "data"; "required": true; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; "width": { "alias": "width"; "required": false; "isSignal": true; }; "height": { "alias": "height"; "required": false; "isSignal": true; }; "strokeWidth": { "alias": "strokeWidth"; "required": false; "isSignal": true; }; "filled": { "alias": "filled"; "required": false; "isSignal": true; }; "curve": { "alias": "curve"; "required": false; "isSignal": true; }; "showEndDot": { "alias": "showEndDot"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
|
|
4380
|
+
}
|
|
4381
|
+
|
|
4382
|
+
type StatTrendDirection = 'up' | 'down' | 'neutral';
|
|
4383
|
+
declare class StatTrendComponent {
|
|
4384
|
+
/** Main KPI label. */
|
|
4385
|
+
label: _angular_core.InputSignal<string>;
|
|
4386
|
+
/** Main KPI value to display. */
|
|
4387
|
+
value: _angular_core.InputSignal<string>;
|
|
4388
|
+
/** Change value text, e.g. "+12%" or "-3.5%". */
|
|
4389
|
+
change: _angular_core.InputSignal<string>;
|
|
4390
|
+
/** Trend direction for color coding. Auto-detected from change if not set. */
|
|
4391
|
+
direction: _angular_core.InputSignal<StatTrendDirection | undefined>;
|
|
4392
|
+
/** Sparkline data points. If empty, no sparkline is shown. */
|
|
4393
|
+
sparklineData: _angular_core.InputSignal<number[]>;
|
|
4394
|
+
/** Color of the sparkline. Auto-matched to trend direction if not set. */
|
|
4395
|
+
sparklineColor: _angular_core.InputSignal<SparklineColor | undefined>;
|
|
4396
|
+
/** Optional icon name (Heroicon). */
|
|
4397
|
+
icon: _angular_core.InputSignal<string>;
|
|
4398
|
+
protected readonly resolvedDirection: _angular_core.Signal<StatTrendDirection>;
|
|
4399
|
+
protected readonly trendColorClass: _angular_core.Signal<string>;
|
|
4400
|
+
protected readonly resolvedSparklineColor: _angular_core.Signal<SparklineColor>;
|
|
4401
|
+
protected readonly trendIcon: _angular_core.Signal<string>;
|
|
4402
|
+
protected readonly hasSparkline: _angular_core.Signal<boolean>;
|
|
4403
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<StatTrendComponent, never>;
|
|
4404
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<StatTrendComponent, "lc-stat-trend", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": true; "isSignal": true; }; "change": { "alias": "change"; "required": false; "isSignal": true; }; "direction": { "alias": "direction"; "required": false; "isSignal": true; }; "sparklineData": { "alias": "sparklineData"; "required": false; "isSignal": true; }; "sparklineColor": { "alias": "sparklineColor"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
|
|
4405
|
+
}
|
|
4406
|
+
|
|
4407
|
+
interface DonutSegment {
|
|
4408
|
+
value: number;
|
|
4409
|
+
label?: string;
|
|
4410
|
+
color?: string;
|
|
4411
|
+
}
|
|
4412
|
+
type DonutChartSize = 'sm' | 'md' | 'lg';
|
|
4413
|
+
declare class DonutChartComponent {
|
|
4414
|
+
/** Segments to render. */
|
|
4415
|
+
segments: _angular_core.InputSignal<DonutSegment[]>;
|
|
4416
|
+
/** Size preset. */
|
|
4417
|
+
size: _angular_core.InputSignal<DonutChartSize>;
|
|
4418
|
+
/** Thickness of the donut ring (0-1 ratio of radius). */
|
|
4419
|
+
thickness: _angular_core.InputSignal<number>;
|
|
4420
|
+
/** Show the center label area. */
|
|
4421
|
+
showCenter: _angular_core.InputSignal<boolean>;
|
|
4422
|
+
/** Center label text. */
|
|
4423
|
+
centerLabel: _angular_core.InputSignal<string>;
|
|
4424
|
+
/** Center value text (large number). */
|
|
4425
|
+
centerValue: _angular_core.InputSignal<string>;
|
|
4426
|
+
/** Show legend below the chart. */
|
|
4427
|
+
showLegend: _angular_core.InputSignal<boolean>;
|
|
4428
|
+
protected readonly sizeMap: Record<DonutChartSize, number>;
|
|
4429
|
+
protected readonly svgSize: _angular_core.Signal<number>;
|
|
4430
|
+
protected readonly viewBox: _angular_core.Signal<string>;
|
|
4431
|
+
protected readonly center: _angular_core.Signal<number>;
|
|
4432
|
+
protected readonly outerRadius: _angular_core.Signal<number>;
|
|
4433
|
+
protected readonly innerRadius: _angular_core.Signal<number>;
|
|
4434
|
+
protected readonly arcs: _angular_core.Signal<{
|
|
4435
|
+
d: string;
|
|
4436
|
+
color: string;
|
|
4437
|
+
label: string;
|
|
4438
|
+
value: number;
|
|
4439
|
+
percentage: number;
|
|
4440
|
+
}[]>;
|
|
4441
|
+
protected readonly legendItems: _angular_core.Signal<{
|
|
4442
|
+
color: string;
|
|
4443
|
+
label: string;
|
|
4444
|
+
value: number;
|
|
4445
|
+
percentage: number;
|
|
4446
|
+
}[]>;
|
|
4447
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<DonutChartComponent, never>;
|
|
4448
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<DonutChartComponent, "lc-donut-chart", never, { "segments": { "alias": "segments"; "required": true; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "thickness": { "alias": "thickness"; "required": false; "isSignal": true; }; "showCenter": { "alias": "showCenter"; "required": false; "isSignal": true; }; "centerLabel": { "alias": "centerLabel"; "required": false; "isSignal": true; }; "centerValue": { "alias": "centerValue"; "required": false; "isSignal": true; }; "showLegend": { "alias": "showLegend"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
|
|
4449
|
+
}
|
|
4450
|
+
|
|
4451
|
+
interface BarChartItem {
|
|
4452
|
+
value: number;
|
|
4453
|
+
label?: string;
|
|
4454
|
+
color?: string;
|
|
4455
|
+
}
|
|
4456
|
+
type BarChartOrientation = 'vertical' | 'horizontal';
|
|
4457
|
+
declare class BarChartComponent {
|
|
4458
|
+
/** Data items. */
|
|
4459
|
+
data: _angular_core.InputSignal<BarChartItem[]>;
|
|
4460
|
+
/** Chart width in pixels. */
|
|
4461
|
+
width: _angular_core.InputSignal<number>;
|
|
4462
|
+
/** Chart height in pixels. */
|
|
4463
|
+
height: _angular_core.InputSignal<number>;
|
|
4464
|
+
/** Bar orientation. */
|
|
4465
|
+
orientation: _angular_core.InputSignal<BarChartOrientation>;
|
|
4466
|
+
/** Show value labels on bars. */
|
|
4467
|
+
showValues: _angular_core.InputSignal<boolean>;
|
|
4468
|
+
/** Show axis labels. */
|
|
4469
|
+
showLabels: _angular_core.InputSignal<boolean>;
|
|
4470
|
+
/** Show grid lines. */
|
|
4471
|
+
showGrid: _angular_core.InputSignal<boolean>;
|
|
4472
|
+
/** Gap between bars as ratio (0-1). */
|
|
4473
|
+
barGap: _angular_core.InputSignal<number>;
|
|
4474
|
+
/** Use a single color for all bars. */
|
|
4475
|
+
color: _angular_core.InputSignal<string>;
|
|
4476
|
+
private readonly PADDING_LEFT;
|
|
4477
|
+
private readonly PADDING_RIGHT;
|
|
4478
|
+
private readonly PADDING_TOP;
|
|
4479
|
+
private readonly PADDING_BOTTOM;
|
|
4480
|
+
protected readonly viewBox: _angular_core.Signal<string>;
|
|
4481
|
+
protected readonly maxValue: _angular_core.Signal<number>;
|
|
4482
|
+
protected readonly gridLines: _angular_core.Signal<{
|
|
4483
|
+
y: number;
|
|
4484
|
+
label: string;
|
|
4485
|
+
}[]>;
|
|
4486
|
+
protected readonly bars: _angular_core.Signal<{
|
|
4487
|
+
x: number;
|
|
4488
|
+
y: number;
|
|
4489
|
+
width: number;
|
|
4490
|
+
height: number;
|
|
4491
|
+
color: string;
|
|
4492
|
+
label: string;
|
|
4493
|
+
value: number;
|
|
4494
|
+
labelX: number;
|
|
4495
|
+
labelY: number;
|
|
4496
|
+
valueX: number;
|
|
4497
|
+
valueY: number;
|
|
4498
|
+
}[]>;
|
|
4499
|
+
protected readonly isVertical: _angular_core.Signal<boolean>;
|
|
4500
|
+
protected readonly axisLine: _angular_core.Signal<{
|
|
4501
|
+
x1: number;
|
|
4502
|
+
y1: number;
|
|
4503
|
+
x2: number;
|
|
4504
|
+
y2: number;
|
|
4505
|
+
bx1: number;
|
|
4506
|
+
by1: number;
|
|
4507
|
+
bx2: number;
|
|
4508
|
+
by2: number;
|
|
4509
|
+
}>;
|
|
4510
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<BarChartComponent, never>;
|
|
4511
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<BarChartComponent, "lc-bar-chart", never, { "data": { "alias": "data"; "required": true; "isSignal": true; }; "width": { "alias": "width"; "required": false; "isSignal": true; }; "height": { "alias": "height"; "required": false; "isSignal": true; }; "orientation": { "alias": "orientation"; "required": false; "isSignal": true; }; "showValues": { "alias": "showValues"; "required": false; "isSignal": true; }; "showLabels": { "alias": "showLabels"; "required": false; "isSignal": true; }; "showGrid": { "alias": "showGrid"; "required": false; "isSignal": true; }; "barGap": { "alias": "barGap"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
|
|
4512
|
+
}
|
|
4513
|
+
|
|
4514
|
+
interface LineChartSeries {
|
|
4515
|
+
label: string;
|
|
4516
|
+
data: number[];
|
|
4517
|
+
color?: string;
|
|
4518
|
+
}
|
|
4519
|
+
declare class LineChartComponent {
|
|
4520
|
+
/** One or more data series. */
|
|
4521
|
+
series: _angular_core.InputSignal<LineChartSeries[]>;
|
|
4522
|
+
/** X-axis labels. */
|
|
4523
|
+
labels: _angular_core.InputSignal<string[]>;
|
|
4524
|
+
/** Chart width in pixels. */
|
|
4525
|
+
width: _angular_core.InputSignal<number>;
|
|
4526
|
+
/** Chart height in pixels. */
|
|
4527
|
+
height: _angular_core.InputSignal<number>;
|
|
4528
|
+
/** Stroke width for lines. */
|
|
4529
|
+
strokeWidth: _angular_core.InputSignal<number>;
|
|
4530
|
+
/** Show dots at data points. */
|
|
4531
|
+
showDots: _angular_core.InputSignal<boolean>;
|
|
4532
|
+
/** Show grid lines. */
|
|
4533
|
+
showGrid: _angular_core.InputSignal<boolean>;
|
|
4534
|
+
/** Show X-axis labels. */
|
|
4535
|
+
showXLabels: _angular_core.InputSignal<boolean>;
|
|
4536
|
+
/** Show Y-axis labels. */
|
|
4537
|
+
showYLabels: _angular_core.InputSignal<boolean>;
|
|
4538
|
+
/** Show area fill under lines. */
|
|
4539
|
+
filled: _angular_core.InputSignal<boolean>;
|
|
4540
|
+
/** Show legend. */
|
|
4541
|
+
showLegend: _angular_core.InputSignal<boolean>;
|
|
4542
|
+
/** Use smooth curves. */
|
|
4543
|
+
smooth: _angular_core.InputSignal<boolean>;
|
|
4544
|
+
private readonly PL;
|
|
4545
|
+
private readonly PR;
|
|
4546
|
+
private readonly PT;
|
|
4547
|
+
private readonly PB;
|
|
4548
|
+
protected readonly viewBox: _angular_core.Signal<string>;
|
|
4549
|
+
protected readonly allValues: _angular_core.Signal<number[]>;
|
|
4550
|
+
protected readonly minValue: _angular_core.Signal<number>;
|
|
4551
|
+
protected readonly maxValue: _angular_core.Signal<number>;
|
|
4552
|
+
protected readonly maxDataLength: _angular_core.Signal<number>;
|
|
4553
|
+
protected readonly plotArea: _angular_core.Signal<{
|
|
4554
|
+
x: number;
|
|
4555
|
+
y: number;
|
|
4556
|
+
w: number;
|
|
4557
|
+
h: number;
|
|
4558
|
+
}>;
|
|
4559
|
+
protected readonly gridLines: _angular_core.Signal<{
|
|
4560
|
+
y: number;
|
|
4561
|
+
label: string;
|
|
4562
|
+
}[]>;
|
|
4563
|
+
protected readonly xLabels: _angular_core.Signal<{
|
|
4564
|
+
x: number;
|
|
4565
|
+
y: number;
|
|
4566
|
+
label: string;
|
|
4567
|
+
}[]>;
|
|
4568
|
+
protected readonly renderedSeries: _angular_core.Signal<{
|
|
4569
|
+
label: string;
|
|
4570
|
+
color: string;
|
|
4571
|
+
pathD: string;
|
|
4572
|
+
areaD: string;
|
|
4573
|
+
points: {
|
|
4574
|
+
x: number;
|
|
4575
|
+
y: number;
|
|
4576
|
+
}[];
|
|
4577
|
+
}[]>;
|
|
4578
|
+
protected readonly axisLine: _angular_core.Signal<{
|
|
4579
|
+
vx1: number;
|
|
4580
|
+
vy1: number;
|
|
4581
|
+
vx2: number;
|
|
4582
|
+
vy2: number;
|
|
4583
|
+
hx1: number;
|
|
4584
|
+
hy1: number;
|
|
4585
|
+
hx2: number;
|
|
4586
|
+
hy2: number;
|
|
4587
|
+
}>;
|
|
4588
|
+
protected readonly legendItems: _angular_core.Signal<{
|
|
4589
|
+
label: string;
|
|
4590
|
+
color: string;
|
|
4591
|
+
}[]>;
|
|
4592
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<LineChartComponent, never>;
|
|
4593
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<LineChartComponent, "lc-line-chart", never, { "series": { "alias": "series"; "required": true; "isSignal": true; }; "labels": { "alias": "labels"; "required": false; "isSignal": true; }; "width": { "alias": "width"; "required": false; "isSignal": true; }; "height": { "alias": "height"; "required": false; "isSignal": true; }; "strokeWidth": { "alias": "strokeWidth"; "required": false; "isSignal": true; }; "showDots": { "alias": "showDots"; "required": false; "isSignal": true; }; "showGrid": { "alias": "showGrid"; "required": false; "isSignal": true; }; "showXLabels": { "alias": "showXLabels"; "required": false; "isSignal": true; }; "showYLabels": { "alias": "showYLabels"; "required": false; "isSignal": true; }; "filled": { "alias": "filled"; "required": false; "isSignal": true; }; "showLegend": { "alias": "showLegend"; "required": false; "isSignal": true; }; "smooth": { "alias": "smooth"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
|
|
4594
|
+
}
|
|
4595
|
+
|
|
4596
|
+
type GaugeColor = 'primary' | 'secondary' | 'success' | 'warning' | 'error' | 'info';
|
|
4597
|
+
type GaugeSize = 'sm' | 'md' | 'lg';
|
|
4598
|
+
declare class GaugeComponent {
|
|
4599
|
+
/** Value between 0 and max. */
|
|
4600
|
+
value: _angular_core.InputSignal<number>;
|
|
4601
|
+
/** Maximum value. */
|
|
4602
|
+
max: _angular_core.InputSignal<number>;
|
|
4603
|
+
/** Color theme. */
|
|
4604
|
+
color: _angular_core.InputSignal<GaugeColor>;
|
|
4605
|
+
/** Size preset. */
|
|
4606
|
+
size: _angular_core.InputSignal<GaugeSize>;
|
|
4607
|
+
/** Label text below the value. */
|
|
4608
|
+
label: _angular_core.InputSignal<string>;
|
|
4609
|
+
/** Value suffix (e.g. '%', '°C'). */
|
|
4610
|
+
suffix: _angular_core.InputSignal<string>;
|
|
4611
|
+
/** Show the value in the center. */
|
|
4612
|
+
showValue: _angular_core.InputSignal<boolean>;
|
|
4613
|
+
private readonly SIZE_MAP;
|
|
4614
|
+
protected readonly svgSize: _angular_core.Signal<number>;
|
|
4615
|
+
protected readonly svgHeight: _angular_core.Signal<number>;
|
|
4616
|
+
protected readonly viewBox: _angular_core.Signal<string>;
|
|
4617
|
+
protected readonly cx: _angular_core.Signal<number>;
|
|
4618
|
+
protected readonly cy: _angular_core.Signal<number>;
|
|
4619
|
+
protected readonly radius: _angular_core.Signal<number>;
|
|
4620
|
+
protected readonly strokeW: _angular_core.Signal<number>;
|
|
4621
|
+
protected readonly fraction: _angular_core.Signal<number>;
|
|
4622
|
+
protected readonly trackD: _angular_core.Signal<string>;
|
|
4623
|
+
protected readonly valueD: _angular_core.Signal<string>;
|
|
4624
|
+
protected readonly displayValue: _angular_core.Signal<string>;
|
|
4625
|
+
protected readonly valueFontSize: _angular_core.Signal<string>;
|
|
4626
|
+
protected readonly labelFontSize: _angular_core.Signal<string>;
|
|
4627
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<GaugeComponent, never>;
|
|
4628
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<GaugeComponent, "lc-gauge", never, { "value": { "alias": "value"; "required": false; "isSignal": true; }; "max": { "alias": "max"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "suffix": { "alias": "suffix"; "required": false; "isSignal": true; }; "showValue": { "alias": "showValue"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
|
|
4629
|
+
}
|
|
4630
|
+
|
|
4631
|
+
interface StackedBarCategory {
|
|
4632
|
+
label: string;
|
|
4633
|
+
values: number[];
|
|
4634
|
+
}
|
|
4635
|
+
interface StackedBarLegend {
|
|
4636
|
+
label: string;
|
|
4637
|
+
color?: string;
|
|
4638
|
+
}
|
|
4639
|
+
type StackedBarOrientation = 'vertical' | 'horizontal';
|
|
4640
|
+
declare class StackedBarChartComponent {
|
|
4641
|
+
/** Categories with stacked values. */
|
|
4642
|
+
categories: _angular_core.InputSignal<StackedBarCategory[]>;
|
|
4643
|
+
/** Legend items mapping to each value index. */
|
|
4644
|
+
legends: _angular_core.InputSignal<StackedBarLegend[]>;
|
|
4645
|
+
width: _angular_core.InputSignal<number>;
|
|
4646
|
+
height: _angular_core.InputSignal<number>;
|
|
4647
|
+
orientation: _angular_core.InputSignal<StackedBarOrientation>;
|
|
4648
|
+
showLabels: _angular_core.InputSignal<boolean>;
|
|
4649
|
+
showValues: _angular_core.InputSignal<boolean>;
|
|
4650
|
+
showLegend: _angular_core.InputSignal<boolean>;
|
|
4651
|
+
showGrid: _angular_core.InputSignal<boolean>;
|
|
4652
|
+
barGap: _angular_core.InputSignal<number>;
|
|
4653
|
+
private readonly PL;
|
|
4654
|
+
private readonly PR;
|
|
4655
|
+
private readonly PT;
|
|
4656
|
+
private readonly PB;
|
|
4657
|
+
protected readonly viewBox: _angular_core.Signal<string>;
|
|
4658
|
+
protected readonly maxTotal: _angular_core.Signal<number>;
|
|
4659
|
+
protected readonly gridLines: _angular_core.Signal<{
|
|
4660
|
+
y: number;
|
|
4661
|
+
label: string;
|
|
4662
|
+
}[]>;
|
|
4663
|
+
protected readonly stacks: _angular_core.Signal<{
|
|
4664
|
+
label: string;
|
|
4665
|
+
segments: {
|
|
4666
|
+
color: string;
|
|
4667
|
+
value: number;
|
|
4668
|
+
x: number;
|
|
4669
|
+
y: number;
|
|
4670
|
+
w: number;
|
|
4671
|
+
h: number;
|
|
4672
|
+
}[];
|
|
4673
|
+
labelPos: {
|
|
4674
|
+
x: number;
|
|
4675
|
+
y: number;
|
|
4676
|
+
};
|
|
4677
|
+
total: number;
|
|
4678
|
+
}[]>;
|
|
4679
|
+
protected readonly legendItems: _angular_core.Signal<{
|
|
4680
|
+
label: string;
|
|
4681
|
+
color: string;
|
|
4682
|
+
}[]>;
|
|
4683
|
+
protected readonly isVertical: _angular_core.Signal<boolean>;
|
|
4684
|
+
protected readonly axisLine: _angular_core.Signal<{
|
|
4685
|
+
vx1: number;
|
|
4686
|
+
vy1: number;
|
|
4687
|
+
vx2: number;
|
|
4688
|
+
vy2: number;
|
|
4689
|
+
hx1: number;
|
|
4690
|
+
hy1: number;
|
|
4691
|
+
hx2: number;
|
|
4692
|
+
hy2: number;
|
|
4693
|
+
}>;
|
|
4694
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<StackedBarChartComponent, never>;
|
|
4695
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<StackedBarChartComponent, "lc-stacked-bar-chart", never, { "categories": { "alias": "categories"; "required": true; "isSignal": true; }; "legends": { "alias": "legends"; "required": false; "isSignal": true; }; "width": { "alias": "width"; "required": false; "isSignal": true; }; "height": { "alias": "height"; "required": false; "isSignal": true; }; "orientation": { "alias": "orientation"; "required": false; "isSignal": true; }; "showLabels": { "alias": "showLabels"; "required": false; "isSignal": true; }; "showValues": { "alias": "showValues"; "required": false; "isSignal": true; }; "showLegend": { "alias": "showLegend"; "required": false; "isSignal": true; }; "showGrid": { "alias": "showGrid"; "required": false; "isSignal": true; }; "barGap": { "alias": "barGap"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
|
|
4696
|
+
}
|
|
4697
|
+
|
|
4698
|
+
interface AreaChartSeries {
|
|
4699
|
+
label: string;
|
|
4700
|
+
data: number[];
|
|
4701
|
+
color?: string;
|
|
4702
|
+
}
|
|
4703
|
+
declare class AreaChartComponent {
|
|
4704
|
+
series: _angular_core.InputSignal<AreaChartSeries[]>;
|
|
4705
|
+
labels: _angular_core.InputSignal<string[]>;
|
|
4706
|
+
width: _angular_core.InputSignal<number>;
|
|
4707
|
+
height: _angular_core.InputSignal<number>;
|
|
4708
|
+
strokeWidth: _angular_core.InputSignal<number>;
|
|
4709
|
+
showDots: _angular_core.InputSignal<boolean>;
|
|
4710
|
+
showGrid: _angular_core.InputSignal<boolean>;
|
|
4711
|
+
showXLabels: _angular_core.InputSignal<boolean>;
|
|
4712
|
+
showYLabels: _angular_core.InputSignal<boolean>;
|
|
4713
|
+
showLegend: _angular_core.InputSignal<boolean>;
|
|
4714
|
+
smooth: _angular_core.InputSignal<boolean>;
|
|
4715
|
+
/** Opacity for the filled area (0–1). */
|
|
4716
|
+
fillOpacity: _angular_core.InputSignal<number>;
|
|
4717
|
+
/** Stack areas on top of each other. */
|
|
4718
|
+
stacked: _angular_core.InputSignal<boolean>;
|
|
4719
|
+
private readonly PL;
|
|
4720
|
+
private readonly PR;
|
|
4721
|
+
private readonly PT;
|
|
4722
|
+
private readonly PB;
|
|
4723
|
+
protected readonly viewBox: _angular_core.Signal<string>;
|
|
4724
|
+
protected readonly plotArea: _angular_core.Signal<{
|
|
4725
|
+
x: number;
|
|
4726
|
+
y: number;
|
|
4727
|
+
w: number;
|
|
4728
|
+
h: number;
|
|
4729
|
+
}>;
|
|
4730
|
+
protected readonly computedSeries: _angular_core.Signal<{
|
|
4731
|
+
computedData: number[];
|
|
4732
|
+
prevData: number[] | null;
|
|
4733
|
+
label: string;
|
|
4734
|
+
data: number[];
|
|
4735
|
+
color?: string;
|
|
4736
|
+
}[]>;
|
|
4737
|
+
protected readonly minValue: _angular_core.Signal<number>;
|
|
4738
|
+
protected readonly maxValue: _angular_core.Signal<number>;
|
|
4739
|
+
protected readonly gridLines: _angular_core.Signal<{
|
|
4740
|
+
y: number;
|
|
4741
|
+
label: string;
|
|
4742
|
+
}[]>;
|
|
4743
|
+
protected readonly xLabelItems: _angular_core.Signal<{
|
|
4744
|
+
x: number;
|
|
4745
|
+
y: number;
|
|
4746
|
+
label: string;
|
|
4747
|
+
}[]>;
|
|
4748
|
+
private toPoints;
|
|
4749
|
+
private buildPath;
|
|
4750
|
+
protected readonly renderedSeries: _angular_core.Signal<{
|
|
4751
|
+
label: string;
|
|
4752
|
+
color: string;
|
|
4753
|
+
lineD: string;
|
|
4754
|
+
areaD: string;
|
|
4755
|
+
points: {
|
|
4756
|
+
x: number;
|
|
4757
|
+
y: number;
|
|
4758
|
+
}[];
|
|
4759
|
+
}[]>;
|
|
4760
|
+
protected readonly axisLine: _angular_core.Signal<{
|
|
4761
|
+
vx1: number;
|
|
4762
|
+
vy1: number;
|
|
4763
|
+
vx2: number;
|
|
4764
|
+
vy2: number;
|
|
4765
|
+
hx1: number;
|
|
4766
|
+
hy1: number;
|
|
4767
|
+
hx2: number;
|
|
4768
|
+
hy2: number;
|
|
4769
|
+
}>;
|
|
4770
|
+
protected readonly legendItems: _angular_core.Signal<{
|
|
4771
|
+
label: string;
|
|
4772
|
+
color: string;
|
|
4773
|
+
}[]>;
|
|
4774
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<AreaChartComponent, never>;
|
|
4775
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<AreaChartComponent, "lc-area-chart", never, { "series": { "alias": "series"; "required": true; "isSignal": true; }; "labels": { "alias": "labels"; "required": false; "isSignal": true; }; "width": { "alias": "width"; "required": false; "isSignal": true; }; "height": { "alias": "height"; "required": false; "isSignal": true; }; "strokeWidth": { "alias": "strokeWidth"; "required": false; "isSignal": true; }; "showDots": { "alias": "showDots"; "required": false; "isSignal": true; }; "showGrid": { "alias": "showGrid"; "required": false; "isSignal": true; }; "showXLabels": { "alias": "showXLabels"; "required": false; "isSignal": true; }; "showYLabels": { "alias": "showYLabels"; "required": false; "isSignal": true; }; "showLegend": { "alias": "showLegend"; "required": false; "isSignal": true; }; "smooth": { "alias": "smooth"; "required": false; "isSignal": true; }; "fillOpacity": { "alias": "fillOpacity"; "required": false; "isSignal": true; }; "stacked": { "alias": "stacked"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
|
|
4776
|
+
}
|
|
4777
|
+
|
|
4778
|
+
interface HeatmapCell {
|
|
4779
|
+
row: number;
|
|
4780
|
+
col: number;
|
|
4781
|
+
value: number;
|
|
4782
|
+
}
|
|
4783
|
+
declare class HeatmapComponent {
|
|
4784
|
+
/** 2D data: array of rows, each row an array of values. */
|
|
4785
|
+
data: _angular_core.InputSignal<number[][]>;
|
|
4786
|
+
/** Row labels (Y axis). */
|
|
4787
|
+
rowLabels: _angular_core.InputSignal<string[]>;
|
|
4788
|
+
/** Column labels (X axis). */
|
|
4789
|
+
colLabels: _angular_core.InputSignal<string[]>;
|
|
4790
|
+
/** Cell size in pixels. */
|
|
4791
|
+
cellSize: _angular_core.InputSignal<number>;
|
|
4792
|
+
/** Gap between cells in pixels. */
|
|
4793
|
+
cellGap: _angular_core.InputSignal<number>;
|
|
4794
|
+
/** Low-value color. */
|
|
4795
|
+
colorMin: _angular_core.InputSignal<string>;
|
|
4796
|
+
/** High-value color. */
|
|
4797
|
+
colorMax: _angular_core.InputSignal<string>;
|
|
4798
|
+
/** Show values inside cells. */
|
|
4799
|
+
showValues: _angular_core.InputSignal<boolean>;
|
|
4800
|
+
/** Corner radius of cells. */
|
|
4801
|
+
cellRadius: _angular_core.InputSignal<number>;
|
|
4802
|
+
private readonly LABEL_W;
|
|
4803
|
+
private readonly LABEL_H;
|
|
4804
|
+
protected readonly minVal: _angular_core.Signal<number>;
|
|
4805
|
+
protected readonly maxVal: _angular_core.Signal<number>;
|
|
4806
|
+
protected readonly rows: _angular_core.Signal<number>;
|
|
4807
|
+
protected readonly cols: _angular_core.Signal<number>;
|
|
4808
|
+
protected readonly svgWidth: _angular_core.Signal<number>;
|
|
4809
|
+
protected readonly svgHeight: _angular_core.Signal<number>;
|
|
4810
|
+
protected readonly viewBox: _angular_core.Signal<string>;
|
|
4811
|
+
protected readonly offsetX: _angular_core.Signal<0 | 60>;
|
|
4812
|
+
protected readonly offsetY: _angular_core.Signal<0 | 20>;
|
|
4813
|
+
protected readonly cells: _angular_core.Signal<{
|
|
4814
|
+
x: number;
|
|
4815
|
+
y: number;
|
|
4816
|
+
w: number;
|
|
4817
|
+
h: number;
|
|
4818
|
+
value: number;
|
|
4819
|
+
opacity: number;
|
|
4820
|
+
}[]>;
|
|
4821
|
+
protected readonly rowLabelItems: _angular_core.Signal<{
|
|
4822
|
+
x: number;
|
|
4823
|
+
y: number;
|
|
4824
|
+
label: string;
|
|
4825
|
+
}[]>;
|
|
4826
|
+
protected readonly colLabelItems: _angular_core.Signal<{
|
|
4827
|
+
x: number;
|
|
4828
|
+
y: number;
|
|
4829
|
+
label: string;
|
|
4830
|
+
}[]>;
|
|
4831
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<HeatmapComponent, never>;
|
|
4832
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<HeatmapComponent, "lc-heatmap", never, { "data": { "alias": "data"; "required": true; "isSignal": true; }; "rowLabels": { "alias": "rowLabels"; "required": false; "isSignal": true; }; "colLabels": { "alias": "colLabels"; "required": false; "isSignal": true; }; "cellSize": { "alias": "cellSize"; "required": false; "isSignal": true; }; "cellGap": { "alias": "cellGap"; "required": false; "isSignal": true; }; "colorMin": { "alias": "colorMin"; "required": false; "isSignal": true; }; "colorMax": { "alias": "colorMax"; "required": false; "isSignal": true; }; "showValues": { "alias": "showValues"; "required": false; "isSignal": true; }; "cellRadius": { "alias": "cellRadius"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
|
|
4833
|
+
}
|
|
4834
|
+
|
|
4835
|
+
interface PieSegment {
|
|
4836
|
+
value: number;
|
|
4837
|
+
label?: string;
|
|
4838
|
+
color?: string;
|
|
4839
|
+
}
|
|
4840
|
+
type PieChartSize = 'sm' | 'md' | 'lg';
|
|
4841
|
+
declare class PieChartComponent {
|
|
4842
|
+
segments: _angular_core.InputSignal<PieSegment[]>;
|
|
4843
|
+
size: _angular_core.InputSignal<PieChartSize>;
|
|
4844
|
+
showLegend: _angular_core.InputSignal<boolean>;
|
|
4845
|
+
private readonly SIZE_MAP;
|
|
4846
|
+
protected readonly svgSize: _angular_core.Signal<number>;
|
|
4847
|
+
protected readonly viewBox: _angular_core.Signal<string>;
|
|
4848
|
+
protected readonly center: _angular_core.Signal<number>;
|
|
4849
|
+
protected readonly radius: _angular_core.Signal<number>;
|
|
4850
|
+
protected readonly arcs: _angular_core.Signal<{
|
|
4851
|
+
d: string;
|
|
4852
|
+
color: string;
|
|
4853
|
+
label: string;
|
|
4854
|
+
percentage: number;
|
|
4855
|
+
}[]>;
|
|
4856
|
+
protected readonly legendItems: _angular_core.Signal<{
|
|
4857
|
+
color: string;
|
|
4858
|
+
label: string;
|
|
4859
|
+
percentage: number;
|
|
4860
|
+
}[]>;
|
|
4861
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<PieChartComponent, never>;
|
|
4862
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<PieChartComponent, "lc-pie-chart", never, { "segments": { "alias": "segments"; "required": true; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "showLegend": { "alias": "showLegend"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
|
|
4863
|
+
}
|
|
4864
|
+
|
|
4865
|
+
interface RadarChartSeries {
|
|
4866
|
+
label: string;
|
|
4867
|
+
data: number[];
|
|
4868
|
+
color?: string;
|
|
4869
|
+
}
|
|
4870
|
+
declare class RadarChartComponent {
|
|
4871
|
+
series: _angular_core.InputSignal<RadarChartSeries[]>;
|
|
4872
|
+
/** Axis labels. */
|
|
4873
|
+
axes: _angular_core.InputSignal<string[]>;
|
|
4874
|
+
/** Max value for each axis. */
|
|
4875
|
+
max: _angular_core.InputSignal<number>;
|
|
4876
|
+
/** SVG size in pixels. */
|
|
4877
|
+
size: _angular_core.InputSignal<number>;
|
|
4878
|
+
/** Number of concentric grid rings. */
|
|
4879
|
+
rings: _angular_core.InputSignal<number>;
|
|
4880
|
+
/** Show axis labels. */
|
|
4881
|
+
showLabels: _angular_core.InputSignal<boolean>;
|
|
4882
|
+
/** Fill opacity for series polygons. */
|
|
4883
|
+
fillOpacity: _angular_core.InputSignal<number>;
|
|
4884
|
+
/** Show legend. */
|
|
4885
|
+
showLegend: _angular_core.InputSignal<boolean>;
|
|
4886
|
+
protected readonly viewBox: _angular_core.Signal<string>;
|
|
4887
|
+
protected readonly center: _angular_core.Signal<number>;
|
|
4888
|
+
protected readonly radius: _angular_core.Signal<number>;
|
|
4889
|
+
protected readonly axisCount: _angular_core.Signal<number>;
|
|
4890
|
+
protected readonly gridRings: _angular_core.Signal<string[]>;
|
|
4891
|
+
protected readonly axisLines: _angular_core.Signal<{
|
|
4892
|
+
x2: number;
|
|
4893
|
+
y2: number;
|
|
4894
|
+
}[]>;
|
|
4895
|
+
protected readonly labelItems: _angular_core.Signal<{
|
|
4896
|
+
x: number;
|
|
4897
|
+
y: number;
|
|
4898
|
+
label: string;
|
|
4899
|
+
anchor: string;
|
|
4900
|
+
}[]>;
|
|
4901
|
+
protected readonly seriesPolygons: _angular_core.Signal<{
|
|
4902
|
+
points: string;
|
|
4903
|
+
colorIndex: number;
|
|
4904
|
+
customColor: string | null;
|
|
4905
|
+
label: string;
|
|
4906
|
+
}[]>;
|
|
4907
|
+
protected readonly legendItems: _angular_core.Signal<{
|
|
4908
|
+
label: string;
|
|
4909
|
+
colorIndex: number;
|
|
4910
|
+
customColor: string | null;
|
|
4911
|
+
}[]>;
|
|
4912
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<RadarChartComponent, never>;
|
|
4913
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<RadarChartComponent, "lc-radar-chart", never, { "series": { "alias": "series"; "required": true; "isSignal": true; }; "axes": { "alias": "axes"; "required": false; "isSignal": true; }; "max": { "alias": "max"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "rings": { "alias": "rings"; "required": false; "isSignal": true; }; "showLabels": { "alias": "showLabels"; "required": false; "isSignal": true; }; "fillOpacity": { "alias": "fillOpacity"; "required": false; "isSignal": true; }; "showLegend": { "alias": "showLegend"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
|
|
4914
|
+
}
|
|
4915
|
+
|
|
4916
|
+
type ProgressRingColor = 'primary' | 'secondary' | 'success' | 'warning' | 'error' | 'info';
|
|
4917
|
+
type ProgressRingSize = 'xs' | 'sm' | 'md' | 'lg';
|
|
4918
|
+
declare class ProgressRingComponent {
|
|
4919
|
+
/** Value between 0 and 100. */
|
|
4920
|
+
value: _angular_core.InputSignal<number>;
|
|
4921
|
+
/** Color theme. */
|
|
4922
|
+
color: _angular_core.InputSignal<ProgressRingColor>;
|
|
4923
|
+
/** Size preset. */
|
|
4924
|
+
size: _angular_core.InputSignal<ProgressRingSize>;
|
|
4925
|
+
/** Show percentage text in center. */
|
|
4926
|
+
showValue: _angular_core.InputSignal<boolean>;
|
|
4927
|
+
private readonly SIZE_MAP;
|
|
4928
|
+
private readonly STROKE_MAP;
|
|
4929
|
+
protected readonly svgSize: _angular_core.Signal<number>;
|
|
4930
|
+
protected readonly strokeW: _angular_core.Signal<number>;
|
|
4931
|
+
protected readonly viewBox: _angular_core.Signal<string>;
|
|
4932
|
+
protected readonly center: _angular_core.Signal<number>;
|
|
4933
|
+
protected readonly radius: _angular_core.Signal<number>;
|
|
4934
|
+
protected readonly circumference: _angular_core.Signal<number>;
|
|
4935
|
+
protected readonly dashOffset: _angular_core.Signal<number>;
|
|
4936
|
+
protected readonly fontSize: _angular_core.Signal<string>;
|
|
4937
|
+
protected readonly displayValue: _angular_core.Signal<string>;
|
|
4938
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<ProgressRingComponent, never>;
|
|
4939
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<ProgressRingComponent, "lc-progress-ring", never, { "value": { "alias": "value"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "showValue": { "alias": "showValue"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
|
|
4940
|
+
}
|
|
4941
|
+
|
|
4942
|
+
interface WaterfallItem {
|
|
4943
|
+
label: string;
|
|
4944
|
+
value: number;
|
|
4945
|
+
/** 'total' renders from 0 to value instead of incremental. */
|
|
4946
|
+
type?: 'increase' | 'decrease' | 'total';
|
|
4947
|
+
}
|
|
4948
|
+
declare class WaterfallChartComponent {
|
|
4949
|
+
data: _angular_core.InputSignal<WaterfallItem[]>;
|
|
4950
|
+
width: _angular_core.InputSignal<number>;
|
|
4951
|
+
height: _angular_core.InputSignal<number>;
|
|
4952
|
+
showValues: _angular_core.InputSignal<boolean>;
|
|
4953
|
+
showGrid: _angular_core.InputSignal<boolean>;
|
|
4954
|
+
showConnectors: _angular_core.InputSignal<boolean>;
|
|
4955
|
+
increaseColor: _angular_core.InputSignal<string>;
|
|
4956
|
+
decreaseColor: _angular_core.InputSignal<string>;
|
|
4957
|
+
totalColor: _angular_core.InputSignal<string>;
|
|
4958
|
+
barGap: _angular_core.InputSignal<number>;
|
|
4959
|
+
private readonly PL;
|
|
4960
|
+
private readonly PR;
|
|
4961
|
+
private readonly PT;
|
|
4962
|
+
private readonly PB;
|
|
4963
|
+
protected readonly viewBox: _angular_core.Signal<string>;
|
|
4964
|
+
protected readonly computedBars: _angular_core.Signal<{
|
|
4965
|
+
bars: {
|
|
4966
|
+
x: number;
|
|
4967
|
+
y: number;
|
|
4968
|
+
width: number;
|
|
4969
|
+
height: number;
|
|
4970
|
+
color: string;
|
|
4971
|
+
label: string;
|
|
4972
|
+
value: number;
|
|
4973
|
+
labelX: number;
|
|
4974
|
+
labelY: number;
|
|
4975
|
+
valueY: number;
|
|
4976
|
+
endVal: number;
|
|
4977
|
+
}[];
|
|
4978
|
+
connectors: {
|
|
4979
|
+
x1: number;
|
|
4980
|
+
x2: number;
|
|
4981
|
+
y: number;
|
|
4982
|
+
}[];
|
|
4983
|
+
gridLines: {
|
|
4984
|
+
y: number;
|
|
4985
|
+
label: string;
|
|
4986
|
+
}[];
|
|
4987
|
+
}>;
|
|
4988
|
+
protected readonly axisLine: _angular_core.Signal<{
|
|
4989
|
+
vx1: number;
|
|
4990
|
+
vy1: number;
|
|
4991
|
+
vx2: number;
|
|
4992
|
+
vy2: number;
|
|
4993
|
+
hx1: number;
|
|
4994
|
+
hy1: number;
|
|
4995
|
+
hx2: number;
|
|
4996
|
+
hy2: number;
|
|
4997
|
+
}>;
|
|
4998
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<WaterfallChartComponent, never>;
|
|
4999
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<WaterfallChartComponent, "lc-waterfall-chart", never, { "data": { "alias": "data"; "required": true; "isSignal": true; }; "width": { "alias": "width"; "required": false; "isSignal": true; }; "height": { "alias": "height"; "required": false; "isSignal": true; }; "showValues": { "alias": "showValues"; "required": false; "isSignal": true; }; "showGrid": { "alias": "showGrid"; "required": false; "isSignal": true; }; "showConnectors": { "alias": "showConnectors"; "required": false; "isSignal": true; }; "increaseColor": { "alias": "increaseColor"; "required": false; "isSignal": true; }; "decreaseColor": { "alias": "decreaseColor"; "required": false; "isSignal": true; }; "totalColor": { "alias": "totalColor"; "required": false; "isSignal": true; }; "barGap": { "alias": "barGap"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
|
|
5000
|
+
}
|
|
5001
|
+
|
|
5002
|
+
type CalendarView = 'day' | 'week' | 'month';
|
|
5003
|
+
interface CalendarEvent {
|
|
5004
|
+
id: string;
|
|
5005
|
+
title: string;
|
|
5006
|
+
start: Date | string;
|
|
5007
|
+
end: Date | string;
|
|
5008
|
+
color?: 'primary' | 'secondary' | 'success' | 'warning' | 'error' | 'info';
|
|
5009
|
+
allDay?: boolean;
|
|
5010
|
+
}
|
|
5011
|
+
interface DayCell {
|
|
5012
|
+
date: Date;
|
|
5013
|
+
isToday: boolean;
|
|
5014
|
+
isCurrentMonth: boolean;
|
|
5015
|
+
events: CalendarEvent[];
|
|
5016
|
+
}
|
|
5017
|
+
interface HourSlot {
|
|
5018
|
+
hour: number;
|
|
5019
|
+
label: string;
|
|
5020
|
+
}
|
|
5021
|
+
declare class CalendarComponent {
|
|
5022
|
+
/** Current view mode. */
|
|
5023
|
+
view: _angular_core.InputSignal<CalendarView>;
|
|
5024
|
+
/** Events to display. */
|
|
5025
|
+
events: _angular_core.InputSignal<CalendarEvent[]>;
|
|
5026
|
+
/** First day of week (0=Sunday, 1=Monday). */
|
|
5027
|
+
firstDayOfWeek: _angular_core.InputSignal<number>;
|
|
5028
|
+
/** Locale for date formatting. */
|
|
5029
|
+
locale: _angular_core.InputSignal<string>;
|
|
5030
|
+
/** Start hour for day/week view. */
|
|
5031
|
+
startHour: _angular_core.InputSignal<number>;
|
|
5032
|
+
/** End hour for day/week view. */
|
|
5033
|
+
endHour: _angular_core.InputSignal<number>;
|
|
5034
|
+
/** Emits when an event is clicked. */
|
|
5035
|
+
eventClick: _angular_core.OutputEmitterRef<CalendarEvent>;
|
|
5036
|
+
/** Emits when a date cell is clicked. */
|
|
5037
|
+
dateClick: _angular_core.OutputEmitterRef<Date>;
|
|
5038
|
+
/** Emits when the view changes. */
|
|
5039
|
+
viewChange: _angular_core.OutputEmitterRef<CalendarView>;
|
|
5040
|
+
protected readonly currentDate: _angular_core.WritableSignal<Date>;
|
|
5041
|
+
protected readonly headerTitle: _angular_core.Signal<string>;
|
|
5042
|
+
protected readonly weekDayNames: _angular_core.Signal<string[]>;
|
|
5043
|
+
protected readonly monthGrid: _angular_core.Signal<DayCell[][]>;
|
|
5044
|
+
protected readonly hourSlots: _angular_core.Signal<HourSlot[]>;
|
|
5045
|
+
protected readonly weekDays: _angular_core.Signal<{
|
|
5046
|
+
date: Date;
|
|
5047
|
+
label: string;
|
|
5048
|
+
isToday: boolean;
|
|
5049
|
+
events: {
|
|
5050
|
+
start: Date;
|
|
5051
|
+
end: Date;
|
|
5052
|
+
id: string;
|
|
5053
|
+
title: string;
|
|
5054
|
+
color?: "primary" | "secondary" | "success" | "warning" | "error" | "info";
|
|
5055
|
+
allDay?: boolean;
|
|
5056
|
+
}[];
|
|
5057
|
+
}[]>;
|
|
5058
|
+
protected readonly dayEvents: _angular_core.Signal<{
|
|
5059
|
+
start: Date;
|
|
5060
|
+
end: Date;
|
|
5061
|
+
id: string;
|
|
5062
|
+
title: string;
|
|
5063
|
+
color?: "primary" | "secondary" | "success" | "warning" | "error" | "info";
|
|
5064
|
+
allDay?: boolean;
|
|
5065
|
+
}[]>;
|
|
5066
|
+
private readonly normalizedEvents;
|
|
5067
|
+
protected navigatePrev(): void;
|
|
5068
|
+
protected navigateNext(): void;
|
|
5069
|
+
protected navigateToday(): void;
|
|
5070
|
+
protected setView(v: CalendarView): void;
|
|
5071
|
+
protected onEventClick(event: CalendarEvent, e: MouseEvent): void;
|
|
5072
|
+
protected onDateClick(date: Date): void;
|
|
5073
|
+
protected eventTop(event: CalendarEvent): number;
|
|
5074
|
+
protected eventHeight(event: CalendarEvent): number;
|
|
5075
|
+
private navigate;
|
|
5076
|
+
private weekStart;
|
|
5077
|
+
private isSameDay;
|
|
5078
|
+
private isEventOnDate;
|
|
5079
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<CalendarComponent, never>;
|
|
5080
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<CalendarComponent, "lc-calendar", never, { "view": { "alias": "view"; "required": false; "isSignal": true; }; "events": { "alias": "events"; "required": false; "isSignal": true; }; "firstDayOfWeek": { "alias": "firstDayOfWeek"; "required": false; "isSignal": true; }; "locale": { "alias": "locale"; "required": false; "isSignal": true; }; "startHour": { "alias": "startHour"; "required": false; "isSignal": true; }; "endHour": { "alias": "endHour"; "required": false; "isSignal": true; }; }, { "eventClick": "eventClick"; "dateClick": "dateClick"; "viewChange": "viewChange"; }, never, never, true, never>;
|
|
5081
|
+
}
|
|
5082
|
+
|
|
5083
|
+
interface GanttDependency {
|
|
5084
|
+
from: string;
|
|
5085
|
+
to: string;
|
|
5086
|
+
}
|
|
5087
|
+
interface GanttTask {
|
|
5088
|
+
id: string;
|
|
5089
|
+
title: string;
|
|
5090
|
+
start: Date | string;
|
|
5091
|
+
end: Date | string;
|
|
5092
|
+
progress?: number;
|
|
5093
|
+
color?: 'primary' | 'secondary' | 'success' | 'warning' | 'error' | 'info';
|
|
5094
|
+
group?: string;
|
|
5095
|
+
}
|
|
5096
|
+
interface NormalizedTask {
|
|
5097
|
+
id: string;
|
|
5098
|
+
title: string;
|
|
5099
|
+
start: Date;
|
|
5100
|
+
end: Date;
|
|
5101
|
+
progress: number;
|
|
5102
|
+
color: string;
|
|
5103
|
+
group: string;
|
|
5104
|
+
}
|
|
5105
|
+
interface BarLayout {
|
|
5106
|
+
task: NormalizedTask;
|
|
5107
|
+
left: number;
|
|
5108
|
+
width: number;
|
|
5109
|
+
top: number;
|
|
5110
|
+
progress: number;
|
|
5111
|
+
colorClass: string;
|
|
5112
|
+
}
|
|
5113
|
+
interface DepLine {
|
|
5114
|
+
x1: number;
|
|
5115
|
+
y1: number;
|
|
5116
|
+
x2: number;
|
|
5117
|
+
y2: number;
|
|
5118
|
+
}
|
|
5119
|
+
declare class GanttChartComponent {
|
|
5120
|
+
/** Tasks to display. */
|
|
5121
|
+
tasks: _angular_core.InputSignal<GanttTask[]>;
|
|
5122
|
+
/** Dependency links between tasks. */
|
|
5123
|
+
dependencies: _angular_core.InputSignal<GanttDependency[]>;
|
|
5124
|
+
/** Row height in px. */
|
|
5125
|
+
rowHeight: _angular_core.InputSignal<number>;
|
|
5126
|
+
/** Width of the label column in px. */
|
|
5127
|
+
labelWidth: _angular_core.InputSignal<number>;
|
|
5128
|
+
/** Column width per day in px. */
|
|
5129
|
+
dayWidth: _angular_core.InputSignal<number>;
|
|
5130
|
+
/** Show today marker. */
|
|
5131
|
+
showToday: _angular_core.InputSignal<boolean>;
|
|
5132
|
+
/** Emits when a task bar is clicked. */
|
|
5133
|
+
taskClick: _angular_core.OutputEmitterRef<GanttTask>;
|
|
5134
|
+
private readonly normalizedTasks;
|
|
5135
|
+
protected readonly timelineStart: _angular_core.Signal<Date>;
|
|
5136
|
+
protected readonly timelineEnd: _angular_core.Signal<Date>;
|
|
5137
|
+
protected readonly totalDays: _angular_core.Signal<number>;
|
|
5138
|
+
protected readonly timelineWidth: _angular_core.Signal<number>;
|
|
5139
|
+
protected readonly dayColumns: _angular_core.Signal<{
|
|
5140
|
+
date: Date;
|
|
5141
|
+
left: number;
|
|
5142
|
+
label: number;
|
|
5143
|
+
isWeekend: boolean;
|
|
5144
|
+
monthLabel: string | null;
|
|
5145
|
+
}[]>;
|
|
5146
|
+
protected readonly monthHeaders: _angular_core.Signal<{
|
|
5147
|
+
label: string;
|
|
5148
|
+
left: number;
|
|
5149
|
+
width: number;
|
|
5150
|
+
}[]>;
|
|
5151
|
+
protected readonly bars: _angular_core.Signal<BarLayout[]>;
|
|
5152
|
+
protected readonly depLines: _angular_core.Signal<DepLine[]>;
|
|
5153
|
+
protected readonly todayLeft: _angular_core.Signal<number>;
|
|
5154
|
+
protected readonly gridHeight: _angular_core.Signal<number>;
|
|
5155
|
+
protected onTaskClick(task: NormalizedTask): void;
|
|
5156
|
+
private startOfDay;
|
|
5157
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<GanttChartComponent, never>;
|
|
5158
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<GanttChartComponent, "lc-gantt-chart", never, { "tasks": { "alias": "tasks"; "required": true; "isSignal": true; }; "dependencies": { "alias": "dependencies"; "required": false; "isSignal": true; }; "rowHeight": { "alias": "rowHeight"; "required": false; "isSignal": true; }; "labelWidth": { "alias": "labelWidth"; "required": false; "isSignal": true; }; "dayWidth": { "alias": "dayWidth"; "required": false; "isSignal": true; }; "showToday": { "alias": "showToday"; "required": false; "isSignal": true; }; }, { "taskClick": "taskClick"; }, never, never, true, never>;
|
|
5159
|
+
}
|
|
5160
|
+
|
|
5161
|
+
type ChatMessageRole = 'user' | 'agent' | 'system';
|
|
5162
|
+
interface ChatMessage {
|
|
5163
|
+
id: string;
|
|
5164
|
+
role: ChatMessageRole;
|
|
5165
|
+
content: string;
|
|
5166
|
+
timestamp?: Date | string;
|
|
5167
|
+
avatar?: string;
|
|
5168
|
+
name?: string;
|
|
5169
|
+
streaming?: boolean;
|
|
5170
|
+
}
|
|
5171
|
+
interface ChatSendEvent {
|
|
5172
|
+
content: string;
|
|
5173
|
+
}
|
|
5174
|
+
declare class ChatComponent implements AfterViewChecked {
|
|
5175
|
+
/** Messages to display. */
|
|
5176
|
+
messages: _angular_core.InputSignal<ChatMessage[]>;
|
|
5177
|
+
/** Placeholder text for the input. */
|
|
5178
|
+
placeholder: _angular_core.InputSignal<string>;
|
|
5179
|
+
/** Title displayed in the header. */
|
|
5180
|
+
title: _angular_core.InputSignal<string>;
|
|
5181
|
+
/** Whether the agent is currently streaming / typing. */
|
|
5182
|
+
isStreaming: _angular_core.InputSignal<boolean>;
|
|
5183
|
+
/** Show the header bar. */
|
|
5184
|
+
showHeader: _angular_core.InputSignal<boolean>;
|
|
5185
|
+
/** Disable the input. */
|
|
5186
|
+
disabled: _angular_core.InputSignal<boolean>;
|
|
5187
|
+
/** Show avatars next to messages. */
|
|
5188
|
+
showAvatars: _angular_core.InputSignal<boolean>;
|
|
5189
|
+
/** Show timestamps. */
|
|
5190
|
+
showTimestamps: _angular_core.InputSignal<boolean>;
|
|
5191
|
+
/** Emits when user sends a message. */
|
|
5192
|
+
messageSend: _angular_core.OutputEmitterRef<ChatSendEvent>;
|
|
5193
|
+
protected readonly inputValue: _angular_core.WritableSignal<string>;
|
|
5194
|
+
private shouldScroll;
|
|
5195
|
+
private scrollContainer;
|
|
5196
|
+
protected readonly formattedMessages: _angular_core.Signal<{
|
|
5197
|
+
timestamp: Date | undefined;
|
|
5198
|
+
id: string;
|
|
5199
|
+
role: ChatMessageRole;
|
|
5200
|
+
content: string;
|
|
5201
|
+
avatar?: string;
|
|
5202
|
+
name?: string;
|
|
5203
|
+
streaming?: boolean;
|
|
5204
|
+
}[]>;
|
|
5205
|
+
ngAfterViewChecked(): void;
|
|
5206
|
+
protected onInput(event: Event): void;
|
|
5207
|
+
protected onKeydown(event: KeyboardEvent): void;
|
|
5208
|
+
protected send(): void;
|
|
5209
|
+
protected formatTime(date: Date | undefined): string;
|
|
5210
|
+
protected trackById(_: number, msg: ChatMessage): string;
|
|
5211
|
+
private scrollToBottom;
|
|
5212
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<ChatComponent, never>;
|
|
5213
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<ChatComponent, "lc-chat", never, { "messages": { "alias": "messages"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "title": { "alias": "title"; "required": false; "isSignal": true; }; "isStreaming": { "alias": "isStreaming"; "required": false; "isSignal": true; }; "showHeader": { "alias": "showHeader"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "showAvatars": { "alias": "showAvatars"; "required": false; "isSignal": true; }; "showTimestamps": { "alias": "showTimestamps"; "required": false; "isSignal": true; }; }, { "messageSend": "messageSend"; }, never, never, true, never>;
|
|
5214
|
+
}
|
|
5215
|
+
|
|
5216
|
+
type DocumentType = 'pdf' | 'markdown' | 'image' | 'text' | 'code' | 'auto';
|
|
5217
|
+
/**
|
|
5218
|
+
* Document viewer component for previewing various file types.
|
|
5219
|
+
*
|
|
5220
|
+
* Features:
|
|
5221
|
+
* - Auto-detects file type from URL extension or explicit type input
|
|
5222
|
+
* - PDF rendering via browser-native iframe viewer
|
|
5223
|
+
* - Markdown parsing and rendering with full formatting support
|
|
5224
|
+
* - Image display with zoom controls (25% – 500%)
|
|
5225
|
+
* - Code display using the built-in code block component
|
|
5226
|
+
* - Plain text display
|
|
5227
|
+
* - Toolbar with filename, type badge, zoom, download, and fullscreen
|
|
5228
|
+
* - Loading and error states
|
|
5229
|
+
* - Dark/light theme support
|
|
5230
|
+
*
|
|
5231
|
+
* @example
|
|
5232
|
+
* ```html
|
|
5233
|
+
* <lc-document-viewer src="https://example.com/report.pdf" />
|
|
5234
|
+
* <lc-document-viewer [content]="markdownString" type="markdown" filename="README.md" />
|
|
5235
|
+
* <lc-document-viewer src="/assets/diagram.png" />
|
|
5236
|
+
* ```
|
|
5237
|
+
*/
|
|
5238
|
+
declare class DocumentViewerComponent implements OnInit, OnDestroy {
|
|
5239
|
+
/** URL of the document to display (for PDF, images, or remote files) */
|
|
5240
|
+
readonly src: _angular_core.InputSignal<string>;
|
|
5241
|
+
/** Direct content string (for markdown, text, or code — takes precedence over src for content-based types) */
|
|
5242
|
+
readonly content: _angular_core.InputSignal<string>;
|
|
5243
|
+
/** File type — set to 'auto' to detect from URL extension */
|
|
5244
|
+
readonly type: _angular_core.InputSignal<DocumentType>;
|
|
5245
|
+
/** Display name shown in the toolbar */
|
|
5246
|
+
readonly filename: _angular_core.InputSignal<string>;
|
|
5247
|
+
/** Code language for syntax highlighting (when type is 'code') */
|
|
5248
|
+
readonly language: _angular_core.InputSignal<CodeBlockLanguage>;
|
|
5249
|
+
/** Whether to display the toolbar */
|
|
5250
|
+
readonly showToolbar: _angular_core.InputSignal<boolean>;
|
|
5251
|
+
/** Whether to show the download button in the toolbar */
|
|
5252
|
+
readonly showDownload: _angular_core.InputSignal<boolean>;
|
|
5253
|
+
/** Height of the viewer container */
|
|
5254
|
+
readonly height: _angular_core.InputSignal<string>;
|
|
5255
|
+
protected loading: _angular_core.WritableSignal<boolean>;
|
|
5256
|
+
protected error: _angular_core.WritableSignal<string | null>;
|
|
5257
|
+
protected fetchedContent: _angular_core.WritableSignal<string>;
|
|
5258
|
+
protected zoom: _angular_core.WritableSignal<number>;
|
|
5259
|
+
protected isFullscreen: _angular_core.WritableSignal<boolean>;
|
|
5260
|
+
private readonly sanitizer;
|
|
5261
|
+
private readonly elementRef;
|
|
5262
|
+
private fullscreenHandler;
|
|
5263
|
+
/** Resolved document type from input or URL extension */
|
|
5264
|
+
protected resolvedType: _angular_core.Signal<DocumentType | "unknown">;
|
|
5265
|
+
/** Display name for the toolbar */
|
|
5266
|
+
protected displayName: _angular_core.Signal<string>;
|
|
5267
|
+
/** Icon name for the document type */
|
|
5268
|
+
protected typeIcon: _angular_core.Signal<string>;
|
|
5269
|
+
/** Type label for the toolbar badge */
|
|
5270
|
+
protected typeLabel: _angular_core.Signal<string>;
|
|
5271
|
+
/** Resolved code language */
|
|
5272
|
+
protected resolvedLanguage: _angular_core.Signal<CodeBlockLanguage>;
|
|
5273
|
+
/** Sanitized src URL for iframe/img embedding */
|
|
5274
|
+
protected safeSrc: _angular_core.Signal<SafeResourceUrl>;
|
|
5275
|
+
/** Effective content: direct content input or fetched content */
|
|
5276
|
+
protected effectiveContent: _angular_core.Signal<string>;
|
|
5277
|
+
/** Rendered markdown HTML */
|
|
5278
|
+
protected renderedMarkdown: _angular_core.Signal<SafeHtml>;
|
|
5279
|
+
/** Image transform style for zoom */
|
|
5280
|
+
protected imageTransform: _angular_core.Signal<string>;
|
|
5281
|
+
/** Whether zoom controls should be shown */
|
|
5282
|
+
protected showZoom: _angular_core.Signal<boolean>;
|
|
5283
|
+
ngOnInit(): void;
|
|
5284
|
+
ngOnDestroy(): void;
|
|
5285
|
+
protected zoomIn(): void;
|
|
5286
|
+
protected zoomOut(): void;
|
|
5287
|
+
protected resetZoom(): void;
|
|
5288
|
+
protected download(): void;
|
|
5289
|
+
protected toggleFullscreen(): void;
|
|
5290
|
+
protected onIframeLoad(): void;
|
|
5291
|
+
protected onImageLoad(): void;
|
|
5292
|
+
protected onImageError(): void;
|
|
5293
|
+
private extractExtension;
|
|
5294
|
+
private fetchContent;
|
|
5295
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<DocumentViewerComponent, never>;
|
|
5296
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<DocumentViewerComponent, "lc-document-viewer", never, { "src": { "alias": "src"; "required": false; "isSignal": true; }; "content": { "alias": "content"; "required": false; "isSignal": true; }; "type": { "alias": "type"; "required": false; "isSignal": true; }; "filename": { "alias": "filename"; "required": false; "isSignal": true; }; "language": { "alias": "language"; "required": false; "isSignal": true; }; "showToolbar": { "alias": "showToolbar"; "required": false; "isSignal": true; }; "showDownload": { "alias": "showDownload"; "required": false; "isSignal": true; }; "height": { "alias": "height"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
|
|
5297
|
+
}
|
|
5298
|
+
|
|
5299
|
+
type GalleryLayout = 'grid' | 'masonry';
|
|
5300
|
+
type GallerySize = 'sm' | 'md' | 'lg';
|
|
5301
|
+
interface GalleryItem {
|
|
5302
|
+
/** Image source URL */
|
|
5303
|
+
src: string;
|
|
5304
|
+
/** Thumbnail URL (falls back to src if not provided) */
|
|
5305
|
+
thumbnail?: string;
|
|
5306
|
+
/** Alt text for accessibility */
|
|
5307
|
+
alt?: string;
|
|
5308
|
+
/** Optional caption displayed below the image */
|
|
5309
|
+
caption?: string;
|
|
5310
|
+
/** Optional category for filtering */
|
|
5311
|
+
category?: string;
|
|
5312
|
+
}
|
|
5313
|
+
/**
|
|
5314
|
+
* Gallery component for displaying image collections with lightbox.
|
|
5315
|
+
*
|
|
5316
|
+
* Features:
|
|
5317
|
+
* - Grid and masonry layout modes
|
|
5318
|
+
* - Responsive column count via size presets (sm, md, lg thumbnails)
|
|
5319
|
+
* - Configurable custom column count
|
|
5320
|
+
* - Lightbox overlay with navigation (prev/next)
|
|
5321
|
+
* - Keyboard navigation (Arrow keys, Escape)
|
|
5322
|
+
* - Optional captions and category filtering
|
|
5323
|
+
* - Lazy loading with placeholder shimmer
|
|
5324
|
+
* - Zoom control in lightbox
|
|
5325
|
+
* - Download button in lightbox
|
|
5326
|
+
* - Dark/light theme support
|
|
5327
|
+
*
|
|
5328
|
+
* @example
|
|
5329
|
+
* ```html
|
|
5330
|
+
* <lc-gallery
|
|
5331
|
+
* [items]="images"
|
|
5332
|
+
* layout="grid"
|
|
5333
|
+
* size="md"
|
|
5334
|
+
* [showCaptions]="true" />
|
|
5335
|
+
* ```
|
|
5336
|
+
*/
|
|
5337
|
+
declare class GalleryComponent implements OnDestroy {
|
|
5338
|
+
/** Array of gallery items to display */
|
|
5339
|
+
readonly items: _angular_core.InputSignal<GalleryItem[]>;
|
|
5340
|
+
/** Layout mode */
|
|
5341
|
+
readonly layout: _angular_core.InputSignal<GalleryLayout>;
|
|
5342
|
+
/** Thumbnail size preset — controls column count (sm=4col, md=3col, lg=2col) */
|
|
5343
|
+
readonly size: _angular_core.InputSignal<GallerySize>;
|
|
5344
|
+
/** Custom column count (overrides size preset) */
|
|
5345
|
+
readonly columns: _angular_core.InputSignal<number | null>;
|
|
5346
|
+
/** Whether to show captions below thumbnails */
|
|
5347
|
+
readonly showCaptions: _angular_core.InputSignal<boolean>;
|
|
5348
|
+
/** Whether clicking a thumbnail opens the lightbox */
|
|
5349
|
+
readonly enableLightbox: _angular_core.InputSignal<boolean>;
|
|
5350
|
+
/** Gap between items in pixels */
|
|
5351
|
+
readonly gap: _angular_core.InputSignal<number>;
|
|
5352
|
+
/** Aspect ratio for grid items (ignored in masonry mode) */
|
|
5353
|
+
readonly aspectRatio: _angular_core.InputSignal<string>;
|
|
5354
|
+
/** Emitted when lightbox opens with item index */
|
|
5355
|
+
readonly lightboxOpen: _angular_core.OutputEmitterRef<number>;
|
|
5356
|
+
/** Emitted when lightbox closes */
|
|
5357
|
+
readonly lightboxClose: _angular_core.OutputEmitterRef<void>;
|
|
5358
|
+
protected lightboxIndex: _angular_core.WritableSignal<number | null>;
|
|
5359
|
+
protected lightboxZoom: _angular_core.WritableSignal<number>;
|
|
5360
|
+
protected loadedImages: _angular_core.WritableSignal<Set<number>>;
|
|
5361
|
+
protected activeFilter: _angular_core.WritableSignal<string | null>;
|
|
5362
|
+
protected gridColumns: _angular_core.Signal<number>;
|
|
5363
|
+
protected gridStyle: _angular_core.Signal<{
|
|
5364
|
+
'column-count': string;
|
|
5365
|
+
'column-gap': string;
|
|
5366
|
+
display?: undefined;
|
|
5367
|
+
'grid-template-columns'?: undefined;
|
|
5368
|
+
gap?: undefined;
|
|
5369
|
+
} | {
|
|
5370
|
+
display: string;
|
|
5371
|
+
'grid-template-columns': string;
|
|
5372
|
+
gap: string;
|
|
5373
|
+
'column-count'?: undefined;
|
|
5374
|
+
'column-gap'?: undefined;
|
|
5375
|
+
}>;
|
|
5376
|
+
protected itemStyle: _angular_core.Signal<{
|
|
5377
|
+
'aspect-ratio'?: undefined;
|
|
5378
|
+
} | {
|
|
5379
|
+
'aspect-ratio': string;
|
|
5380
|
+
}>;
|
|
5381
|
+
protected categories: _angular_core.Signal<string[]>;
|
|
5382
|
+
protected filteredItems: _angular_core.Signal<GalleryItem[]>;
|
|
5383
|
+
protected showFilters: _angular_core.Signal<boolean>;
|
|
5384
|
+
protected lightboxItem: _angular_core.Signal<GalleryItem | null>;
|
|
5385
|
+
protected lightboxCounter: _angular_core.Signal<string>;
|
|
5386
|
+
protected lightboxTransform: _angular_core.Signal<string>;
|
|
5387
|
+
protected canGoPrev: _angular_core.Signal<boolean>;
|
|
5388
|
+
protected canGoNext: _angular_core.Signal<boolean>;
|
|
5389
|
+
ngOnDestroy(): void;
|
|
5390
|
+
protected openLightbox(index: number): void;
|
|
5391
|
+
protected closeLightbox(): void;
|
|
5392
|
+
protected goToPrev(): void;
|
|
5393
|
+
protected goToNext(): void;
|
|
5394
|
+
protected zoomIn(): void;
|
|
5395
|
+
protected zoomOut(): void;
|
|
5396
|
+
protected resetZoom(): void;
|
|
5397
|
+
protected downloadCurrent(): void;
|
|
5398
|
+
protected setFilter(category: string | null): void;
|
|
5399
|
+
protected onImageLoad(index: number): void;
|
|
5400
|
+
protected isLoaded(index: number): boolean;
|
|
5401
|
+
protected getThumbnail(item: GalleryItem): string;
|
|
5402
|
+
protected trackByIndex(index: number): number;
|
|
5403
|
+
protected onKeydown(event: KeyboardEvent): void;
|
|
5404
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<GalleryComponent, never>;
|
|
5405
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<GalleryComponent, "lc-gallery", never, { "items": { "alias": "items"; "required": true; "isSignal": true; }; "layout": { "alias": "layout"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "columns": { "alias": "columns"; "required": false; "isSignal": true; }; "showCaptions": { "alias": "showCaptions"; "required": false; "isSignal": true; }; "enableLightbox": { "alias": "enableLightbox"; "required": false; "isSignal": true; }; "gap": { "alias": "gap"; "required": false; "isSignal": true; }; "aspectRatio": { "alias": "aspectRatio"; "required": false; "isSignal": true; }; }, { "lightboxOpen": "lightboxOpen"; "lightboxClose": "lightboxClose"; }, never, never, true, never>;
|
|
5406
|
+
}
|
|
5407
|
+
|
|
5408
|
+
type DependencyNodeStatus = 'default' | 'active' | 'success' | 'warning' | 'error' | 'muted';
|
|
5409
|
+
type DependencyDirection = 'horizontal' | 'vertical';
|
|
5410
|
+
type DependencyRelation = 'depends' | 'blocks' | 'references' | 'requires' | 'extends' | 'implements' | 'uses';
|
|
5411
|
+
interface DependencyEdgeDef {
|
|
5412
|
+
/** Target node id */
|
|
5413
|
+
id: string;
|
|
5414
|
+
/** Relationship type */
|
|
5415
|
+
relation?: DependencyRelation;
|
|
5416
|
+
}
|
|
5417
|
+
interface DependencyNode {
|
|
5418
|
+
/** Unique identifier */
|
|
5419
|
+
id: string;
|
|
5420
|
+
/** Display label */
|
|
5421
|
+
label: string;
|
|
5422
|
+
/** Optional description */
|
|
5423
|
+
description?: string;
|
|
5424
|
+
/** Optional icon name */
|
|
5425
|
+
icon?: string;
|
|
5426
|
+
/** Visual status / color */
|
|
5427
|
+
status?: DependencyNodeStatus;
|
|
5428
|
+
/** Child nodes: items this node is required for (right / bottom side) */
|
|
5429
|
+
children?: DependencyNode[];
|
|
5430
|
+
/** Dependencies: items this node depends on (shown as cross-reference edges) */
|
|
5431
|
+
dependsOn?: DependencyEdgeDef[];
|
|
5432
|
+
}
|
|
5433
|
+
interface LayoutNode {
|
|
5434
|
+
id: string;
|
|
5435
|
+
label: string;
|
|
5436
|
+
description?: string;
|
|
5437
|
+
icon?: string;
|
|
5438
|
+
status: DependencyNodeStatus;
|
|
5439
|
+
x: number;
|
|
5440
|
+
y: number;
|
|
5441
|
+
width: number;
|
|
5442
|
+
height: number;
|
|
5443
|
+
depth: number;
|
|
5444
|
+
parentId: string | null;
|
|
5445
|
+
incomingCount: number;
|
|
5446
|
+
outgoingCount: number;
|
|
5447
|
+
}
|
|
5448
|
+
interface LayoutEdge {
|
|
5449
|
+
id: string;
|
|
5450
|
+
path: string;
|
|
5451
|
+
sourceId: string;
|
|
5452
|
+
targetId: string;
|
|
5453
|
+
relation?: DependencyRelation;
|
|
5454
|
+
labelX: number;
|
|
5455
|
+
labelY: number;
|
|
5456
|
+
color: string;
|
|
5457
|
+
dashed: boolean;
|
|
5458
|
+
isCrossRef: boolean;
|
|
5459
|
+
}
|
|
5460
|
+
/**
|
|
5461
|
+
* Dependency viewer component for visualizing hierarchical and cross-cutting relationships.
|
|
5462
|
+
*
|
|
5463
|
+
* Features:
|
|
5464
|
+
* - Horizontal (left-to-right) and vertical (top-to-bottom) layout directions
|
|
5465
|
+
* - Bidirectional dependencies: children (right/down) and dependsOn (cross-references)
|
|
5466
|
+
* - Relationship types: depends, blocks, references, requires, extends, implements, uses
|
|
5467
|
+
* - Edge labels showing relationship type
|
|
5468
|
+
* - Dashed vs solid edges per relationship category
|
|
5469
|
+
* - Color-coded edges per relationship type
|
|
5470
|
+
* - Node status colors (default, active, success, warning, error, muted)
|
|
5471
|
+
* - Pan and zoom controls with mouse wheel support
|
|
5472
|
+
* - Collapsible sub-trees
|
|
5473
|
+
* - Interactive node selection with detail panel
|
|
5474
|
+
* - Legend showing active relationship types
|
|
5475
|
+
* - SVG arrowhead markers on cross-reference edges
|
|
5476
|
+
* - Dark/light theme support
|
|
5477
|
+
*
|
|
5478
|
+
* @example
|
|
5479
|
+
* ```html
|
|
5480
|
+
* <lc-dependency-viewer [root]="specTree" direction="horizontal" />
|
|
5481
|
+
* ```
|
|
5482
|
+
*/
|
|
5483
|
+
declare class DependencyViewerComponent {
|
|
5484
|
+
readonly root: _angular_core.InputSignal<DependencyNode>;
|
|
5485
|
+
readonly direction: _angular_core.InputSignal<DependencyDirection>;
|
|
5486
|
+
readonly height: _angular_core.InputSignal<string>;
|
|
5487
|
+
readonly showToolbar: _angular_core.InputSignal<boolean>;
|
|
5488
|
+
readonly showEdgeLabels: _angular_core.InputSignal<boolean>;
|
|
5489
|
+
readonly edgeWidth: _angular_core.InputSignal<number>;
|
|
5490
|
+
protected zoom: _angular_core.WritableSignal<number>;
|
|
5491
|
+
protected panX: _angular_core.WritableSignal<number>;
|
|
5492
|
+
protected panY: _angular_core.WritableSignal<number>;
|
|
5493
|
+
protected selectedNodeId: _angular_core.WritableSignal<string | null>;
|
|
5494
|
+
protected collapsedIds: _angular_core.WritableSignal<Set<string>>;
|
|
5495
|
+
private isPanning;
|
|
5496
|
+
private lastMouseX;
|
|
5497
|
+
private lastMouseY;
|
|
5498
|
+
protected effectiveRoot: _angular_core.Signal<DependencyNode>;
|
|
5499
|
+
private allOriginalNodes;
|
|
5500
|
+
protected layout: _angular_core.Signal<{
|
|
5501
|
+
nodes: LayoutNode[];
|
|
5502
|
+
edges: LayoutEdge[];
|
|
5503
|
+
width: number;
|
|
5504
|
+
height: number;
|
|
5505
|
+
}>;
|
|
5506
|
+
protected svgWidth: _angular_core.Signal<number>;
|
|
5507
|
+
protected svgHeight: _angular_core.Signal<number>;
|
|
5508
|
+
protected viewBox: _angular_core.Signal<string>;
|
|
5509
|
+
protected transform: _angular_core.Signal<string>;
|
|
5510
|
+
protected selectedNode: _angular_core.Signal<LayoutNode | null>;
|
|
5511
|
+
protected selectedDependsOn: _angular_core.Signal<DependencyEdgeDef[]>;
|
|
5512
|
+
protected legendItems: _angular_core.Signal<{
|
|
5513
|
+
relation: DependencyRelation;
|
|
5514
|
+
label: string;
|
|
5515
|
+
color: string;
|
|
5516
|
+
dashed: boolean;
|
|
5517
|
+
}[]>;
|
|
5518
|
+
protected hasChildren(nodeId: string): boolean;
|
|
5519
|
+
protected isCollapsed(nodeId: string): boolean;
|
|
5520
|
+
protected getRelationLabel(relation: DependencyRelation): string;
|
|
5521
|
+
private pruneCollapsed;
|
|
5522
|
+
private findOriginalNode;
|
|
5523
|
+
protected selectNode(id: string, event: Event): void;
|
|
5524
|
+
protected toggleCollapse(id: string, event: Event): void;
|
|
5525
|
+
protected deselectNode(): void;
|
|
5526
|
+
protected zoomIn(): void;
|
|
5527
|
+
protected zoomOut(): void;
|
|
5528
|
+
protected resetZoom(): void;
|
|
5529
|
+
protected onMouseDown(event: MouseEvent): void;
|
|
5530
|
+
protected onMouseMove(event: MouseEvent): void;
|
|
5531
|
+
protected onMouseUp(): void;
|
|
5532
|
+
protected onWheel(event: WheelEvent): void;
|
|
5533
|
+
protected getNodeBg(status: DependencyNodeStatus): string;
|
|
5534
|
+
protected getNodeBorder(status: DependencyNodeStatus): string;
|
|
5535
|
+
protected getNodeText(status: DependencyNodeStatus): string;
|
|
5536
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<DependencyViewerComponent, never>;
|
|
5537
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<DependencyViewerComponent, "lc-dependency-viewer", never, { "root": { "alias": "root"; "required": true; "isSignal": true; }; "direction": { "alias": "direction"; "required": false; "isSignal": true; }; "height": { "alias": "height"; "required": false; "isSignal": true; }; "showToolbar": { "alias": "showToolbar"; "required": false; "isSignal": true; }; "showEdgeLabels": { "alias": "showEdgeLabels"; "required": false; "isSignal": true; }; "edgeWidth": { "alias": "edgeWidth"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
|
|
5538
|
+
}
|
|
5539
|
+
|
|
5540
|
+
interface ScatterPoint {
|
|
5541
|
+
x: number;
|
|
5542
|
+
y: number;
|
|
5543
|
+
label?: string;
|
|
5544
|
+
size?: number;
|
|
5545
|
+
}
|
|
5546
|
+
interface ScatterSeries {
|
|
5547
|
+
label: string;
|
|
5548
|
+
data: ScatterPoint[];
|
|
5549
|
+
color?: string;
|
|
5550
|
+
}
|
|
5551
|
+
declare class ScatterPlotComponent {
|
|
5552
|
+
readonly series: _angular_core.InputSignal<ScatterSeries[]>;
|
|
5553
|
+
readonly width: _angular_core.InputSignal<number>;
|
|
5554
|
+
readonly height: _angular_core.InputSignal<number>;
|
|
5555
|
+
readonly showGrid: _angular_core.InputSignal<boolean>;
|
|
5556
|
+
readonly showXLabels: _angular_core.InputSignal<boolean>;
|
|
5557
|
+
readonly showYLabels: _angular_core.InputSignal<boolean>;
|
|
5558
|
+
readonly showLegend: _angular_core.InputSignal<boolean>;
|
|
5559
|
+
readonly showTooltip: _angular_core.InputSignal<boolean>;
|
|
5560
|
+
readonly dotRadius: _angular_core.InputSignal<number>;
|
|
5561
|
+
readonly xAxisLabel: _angular_core.InputSignal<string>;
|
|
5562
|
+
readonly yAxisLabel: _angular_core.InputSignal<string>;
|
|
5563
|
+
readonly pointClick: _angular_core.OutputEmitterRef<{
|
|
5564
|
+
series: string;
|
|
5565
|
+
point: ScatterPoint;
|
|
5566
|
+
}>;
|
|
5567
|
+
protected hoveredPoint: _angular_core.WritableSignal<{
|
|
5568
|
+
x: number;
|
|
5569
|
+
y: number;
|
|
5570
|
+
label: string;
|
|
5571
|
+
sx: number;
|
|
5572
|
+
sy: number;
|
|
5573
|
+
} | null>;
|
|
5574
|
+
private readonly PL;
|
|
5575
|
+
private readonly PR;
|
|
5576
|
+
private readonly PT;
|
|
5577
|
+
private readonly PB;
|
|
5578
|
+
protected readonly viewBox: _angular_core.Signal<string>;
|
|
5579
|
+
private readonly allPoints;
|
|
5580
|
+
private readonly xExtent;
|
|
5581
|
+
private readonly yExtent;
|
|
5582
|
+
protected readonly plotArea: _angular_core.Signal<{
|
|
5583
|
+
x: number;
|
|
5584
|
+
y: number;
|
|
5585
|
+
w: number;
|
|
5586
|
+
h: number;
|
|
5587
|
+
}>;
|
|
5588
|
+
protected readonly gridLinesX: _angular_core.Signal<{
|
|
5589
|
+
x: number;
|
|
5590
|
+
label: number;
|
|
5591
|
+
}[]>;
|
|
5592
|
+
protected readonly gridLinesY: _angular_core.Signal<{
|
|
5593
|
+
y: number;
|
|
5594
|
+
label: number;
|
|
5595
|
+
}[]>;
|
|
5596
|
+
protected readonly renderedSeries: _angular_core.Signal<{
|
|
5597
|
+
label: string;
|
|
5598
|
+
color: string;
|
|
5599
|
+
points: {
|
|
5600
|
+
cx: number;
|
|
5601
|
+
cy: number;
|
|
5602
|
+
r: number;
|
|
5603
|
+
label: string;
|
|
5604
|
+
orig: ScatterPoint;
|
|
5605
|
+
}[];
|
|
5606
|
+
}[]>;
|
|
5607
|
+
protected readonly legendItems: _angular_core.Signal<{
|
|
5608
|
+
label: string;
|
|
5609
|
+
color: string;
|
|
5610
|
+
}[]>;
|
|
5611
|
+
protected readonly axisLine: _angular_core.Signal<{
|
|
5612
|
+
vx1: number;
|
|
5613
|
+
vy1: number;
|
|
5614
|
+
vx2: number;
|
|
5615
|
+
vy2: number;
|
|
5616
|
+
hx1: number;
|
|
5617
|
+
hy1: number;
|
|
5618
|
+
hx2: number;
|
|
5619
|
+
hy2: number;
|
|
5620
|
+
}>;
|
|
5621
|
+
protected onDotEnter(cx: number, cy: number, label: string): void;
|
|
5622
|
+
protected onDotLeave(): void;
|
|
5623
|
+
protected onDotClick(seriesLabel: string, point: ScatterPoint): void;
|
|
5624
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<ScatterPlotComponent, never>;
|
|
5625
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<ScatterPlotComponent, "lc-scatter-plot", never, { "series": { "alias": "series"; "required": true; "isSignal": true; }; "width": { "alias": "width"; "required": false; "isSignal": true; }; "height": { "alias": "height"; "required": false; "isSignal": true; }; "showGrid": { "alias": "showGrid"; "required": false; "isSignal": true; }; "showXLabels": { "alias": "showXLabels"; "required": false; "isSignal": true; }; "showYLabels": { "alias": "showYLabels"; "required": false; "isSignal": true; }; "showLegend": { "alias": "showLegend"; "required": false; "isSignal": true; }; "showTooltip": { "alias": "showTooltip"; "required": false; "isSignal": true; }; "dotRadius": { "alias": "dotRadius"; "required": false; "isSignal": true; }; "xAxisLabel": { "alias": "xAxisLabel"; "required": false; "isSignal": true; }; "yAxisLabel": { "alias": "yAxisLabel"; "required": false; "isSignal": true; }; }, { "pointClick": "pointClick"; }, never, never, true, never>;
|
|
5626
|
+
}
|
|
5627
|
+
|
|
5628
|
+
interface FunnelStep {
|
|
5629
|
+
label: string;
|
|
5630
|
+
value: number;
|
|
5631
|
+
color?: string;
|
|
5632
|
+
}
|
|
5633
|
+
declare class FunnelChartComponent {
|
|
5634
|
+
readonly steps: _angular_core.InputSignal<FunnelStep[]>;
|
|
5635
|
+
readonly width: _angular_core.InputSignal<number>;
|
|
5636
|
+
readonly height: _angular_core.InputSignal<number>;
|
|
5637
|
+
readonly showLabels: _angular_core.InputSignal<boolean>;
|
|
5638
|
+
readonly showValues: _angular_core.InputSignal<boolean>;
|
|
5639
|
+
readonly showPercentage: _angular_core.InputSignal<boolean>;
|
|
5640
|
+
readonly orientation: _angular_core.InputSignal<"horizontal" | "vertical">;
|
|
5641
|
+
protected readonly viewBox: _angular_core.Signal<string>;
|
|
5642
|
+
protected readonly renderedSteps: _angular_core.Signal<{
|
|
5643
|
+
path: string;
|
|
5644
|
+
color: string;
|
|
5645
|
+
label: string;
|
|
5646
|
+
value: number;
|
|
5647
|
+
pct: number;
|
|
5648
|
+
labelX: number;
|
|
5649
|
+
labelY: number;
|
|
5650
|
+
}[]>;
|
|
5651
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<FunnelChartComponent, never>;
|
|
5652
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<FunnelChartComponent, "lc-funnel-chart", never, { "steps": { "alias": "steps"; "required": true; "isSignal": true; }; "width": { "alias": "width"; "required": false; "isSignal": true; }; "height": { "alias": "height"; "required": false; "isSignal": true; }; "showLabels": { "alias": "showLabels"; "required": false; "isSignal": true; }; "showValues": { "alias": "showValues"; "required": false; "isSignal": true; }; "showPercentage": { "alias": "showPercentage"; "required": false; "isSignal": true; }; "orientation": { "alias": "orientation"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
|
|
5653
|
+
}
|
|
5654
|
+
|
|
5655
|
+
declare class TagInputComponent implements ControlValueAccessor {
|
|
5656
|
+
readonly placeholder: _angular_core.InputSignal<string>;
|
|
5657
|
+
readonly maxTags: _angular_core.InputSignal<number>;
|
|
5658
|
+
readonly allowDuplicates: _angular_core.InputSignal<boolean>;
|
|
5659
|
+
readonly removable: _angular_core.InputSignal<boolean>;
|
|
5660
|
+
readonly disabled: _angular_core.InputSignal<boolean>;
|
|
5661
|
+
readonly separator: _angular_core.InputSignal<"enter" | "comma" | "both">;
|
|
5662
|
+
readonly suggestions: _angular_core.InputSignal<string[]>;
|
|
5663
|
+
readonly label: _angular_core.InputSignal<string>;
|
|
5664
|
+
readonly tagAdded: _angular_core.OutputEmitterRef<string>;
|
|
5665
|
+
readonly tagRemoved: _angular_core.OutputEmitterRef<string>;
|
|
5666
|
+
protected tags: _angular_core.WritableSignal<string[]>;
|
|
5667
|
+
protected inputValue: _angular_core.WritableSignal<string>;
|
|
5668
|
+
protected focused: _angular_core.WritableSignal<boolean>;
|
|
5669
|
+
protected readonly inputEl: _angular_core.Signal<ElementRef<HTMLInputElement> | undefined>;
|
|
5670
|
+
protected readonly filteredSuggestions: _angular_core.Signal<string[]>;
|
|
5671
|
+
protected readonly canAdd: _angular_core.Signal<boolean>;
|
|
5672
|
+
private onChange;
|
|
5673
|
+
private onTouched;
|
|
5674
|
+
writeValue(value: string[] | null): void;
|
|
5675
|
+
registerOnChange(fn: (val: string[]) => void): void;
|
|
5676
|
+
registerOnTouched(fn: () => void): void;
|
|
5677
|
+
protected addTag(value: string): void;
|
|
5678
|
+
protected removeTag(index: number): void;
|
|
5679
|
+
protected onKeydown(event: KeyboardEvent): void;
|
|
5680
|
+
protected onInput(event: Event): void;
|
|
5681
|
+
protected onFocus(): void;
|
|
5682
|
+
protected onBlur(): void;
|
|
5683
|
+
protected selectSuggestion(value: string): void;
|
|
5684
|
+
protected focusInput(): void;
|
|
5685
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<TagInputComponent, never>;
|
|
5686
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<TagInputComponent, "lc-tag-input", never, { "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "maxTags": { "alias": "maxTags"; "required": false; "isSignal": true; }; "allowDuplicates": { "alias": "allowDuplicates"; "required": false; "isSignal": true; }; "removable": { "alias": "removable"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "separator": { "alias": "separator"; "required": false; "isSignal": true; }; "suggestions": { "alias": "suggestions"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; }, { "tagAdded": "tagAdded"; "tagRemoved": "tagRemoved"; }, never, never, true, never>;
|
|
5687
|
+
}
|
|
5688
|
+
|
|
5689
|
+
interface DateRange {
|
|
5690
|
+
start: Date | null;
|
|
5691
|
+
end: Date | null;
|
|
5692
|
+
}
|
|
5693
|
+
declare class DateRangePickerComponent implements ControlValueAccessor {
|
|
5694
|
+
readonly label: _angular_core.InputSignal<string>;
|
|
5695
|
+
readonly placeholder: _angular_core.InputSignal<string>;
|
|
5696
|
+
readonly disabled: _angular_core.InputSignal<boolean>;
|
|
5697
|
+
readonly minDate: _angular_core.InputSignal<Date | null>;
|
|
5698
|
+
readonly maxDate: _angular_core.InputSignal<Date | null>;
|
|
5699
|
+
readonly rangeChange: _angular_core.OutputEmitterRef<DateRange>;
|
|
5700
|
+
protected isOpen: _angular_core.WritableSignal<boolean>;
|
|
5701
|
+
protected range: _angular_core.WritableSignal<DateRange>;
|
|
5702
|
+
protected selecting: _angular_core.WritableSignal<"start" | "end">;
|
|
5703
|
+
protected hoveredDate: _angular_core.WritableSignal<Date | null>;
|
|
5704
|
+
protected viewingMonth: _angular_core.WritableSignal<Date>;
|
|
5705
|
+
private onChange;
|
|
5706
|
+
private onTouched;
|
|
5707
|
+
protected readonly displayValue: _angular_core.Signal<string>;
|
|
5708
|
+
protected readonly monthLabel: _angular_core.Signal<string>;
|
|
5709
|
+
protected readonly weekdays: string[];
|
|
5710
|
+
protected readonly calendarDays: _angular_core.Signal<{
|
|
5711
|
+
date: Date;
|
|
5712
|
+
inMonth: boolean;
|
|
5713
|
+
disabled: boolean;
|
|
5714
|
+
}[]>;
|
|
5715
|
+
writeValue(value: DateRange | null): void;
|
|
5716
|
+
registerOnChange(fn: (val: DateRange) => void): void;
|
|
5717
|
+
registerOnTouched(fn: () => void): void;
|
|
5718
|
+
protected toggle(): void;
|
|
5719
|
+
protected close(): void;
|
|
5720
|
+
protected prevMonth(): void;
|
|
5721
|
+
protected nextMonth(): void;
|
|
5722
|
+
protected selectDate(date: Date): void;
|
|
5723
|
+
protected onDayHover(date: Date): void;
|
|
5724
|
+
protected isStart(date: Date): boolean;
|
|
5725
|
+
protected isEnd(date: Date): boolean;
|
|
5726
|
+
protected isInRange(date: Date): boolean;
|
|
5727
|
+
protected isToday(date: Date): boolean;
|
|
5728
|
+
protected clearRange(event: Event): void;
|
|
5729
|
+
private isDateDisabled;
|
|
5730
|
+
private sameDay;
|
|
5731
|
+
private emitRange;
|
|
5732
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<DateRangePickerComponent, never>;
|
|
5733
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<DateRangePickerComponent, "lc-date-range-picker", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "minDate": { "alias": "minDate"; "required": false; "isSignal": true; }; "maxDate": { "alias": "maxDate"; "required": false; "isSignal": true; }; }, { "rangeChange": "rangeChange"; }, never, never, true, never>;
|
|
5734
|
+
}
|
|
5735
|
+
|
|
5736
|
+
type DiffViewMode = 'side-by-side' | 'inline';
|
|
5737
|
+
interface DiffLine {
|
|
5738
|
+
type: 'unchanged' | 'added' | 'removed';
|
|
5739
|
+
leftNum: number | null;
|
|
5740
|
+
rightNum: number | null;
|
|
5741
|
+
content: string;
|
|
5742
|
+
}
|
|
5743
|
+
declare class DiffViewerComponent {
|
|
5744
|
+
readonly oldText: _angular_core.InputSignal<string>;
|
|
5745
|
+
readonly newText: _angular_core.InputSignal<string>;
|
|
5746
|
+
readonly oldLabel: _angular_core.InputSignal<string>;
|
|
5747
|
+
readonly newLabel: _angular_core.InputSignal<string>;
|
|
5748
|
+
readonly mode: _angular_core.InputSignal<DiffViewMode>;
|
|
5749
|
+
readonly showLineNumbers: _angular_core.InputSignal<boolean>;
|
|
5750
|
+
readonly contextLines: _angular_core.InputSignal<number>;
|
|
5751
|
+
protected readonly diffLines: _angular_core.Signal<DiffLine[]>;
|
|
5752
|
+
protected readonly filteredLines: _angular_core.Signal<DiffLine[]>;
|
|
5753
|
+
protected readonly sideBySide: _angular_core.Signal<{
|
|
5754
|
+
left: {
|
|
5755
|
+
num: number | null;
|
|
5756
|
+
content: string;
|
|
5757
|
+
type: string;
|
|
5758
|
+
}[];
|
|
5759
|
+
right: {
|
|
5760
|
+
num: number | null;
|
|
5761
|
+
content: string;
|
|
5762
|
+
type: string;
|
|
5763
|
+
}[];
|
|
5764
|
+
}>;
|
|
5765
|
+
protected readonly stats: _angular_core.Signal<{
|
|
5766
|
+
additions: number;
|
|
5767
|
+
deletions: number;
|
|
5768
|
+
}>;
|
|
5769
|
+
private computeDiff;
|
|
5770
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<DiffViewerComponent, never>;
|
|
5771
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<DiffViewerComponent, "lc-diff-viewer", never, { "oldText": { "alias": "oldText"; "required": true; "isSignal": true; }; "newText": { "alias": "newText"; "required": true; "isSignal": true; }; "oldLabel": { "alias": "oldLabel"; "required": false; "isSignal": true; }; "newLabel": { "alias": "newLabel"; "required": false; "isSignal": true; }; "mode": { "alias": "mode"; "required": false; "isSignal": true; }; "showLineNumbers": { "alias": "showLineNumbers"; "required": false; "isSignal": true; }; "contextLines": { "alias": "contextLines"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
|
|
5772
|
+
}
|
|
5773
|
+
|
|
5774
|
+
interface KanbanCard {
|
|
5775
|
+
id: string;
|
|
5776
|
+
title: string;
|
|
5777
|
+
description?: string;
|
|
5778
|
+
labels?: KanbanLabel[];
|
|
5779
|
+
assignee?: string;
|
|
5780
|
+
priority?: 'low' | 'medium' | 'high' | 'critical';
|
|
5781
|
+
}
|
|
5782
|
+
interface KanbanLabel {
|
|
5783
|
+
text: string;
|
|
5784
|
+
color?: string;
|
|
5785
|
+
}
|
|
5786
|
+
interface KanbanColumn {
|
|
5787
|
+
id: string;
|
|
5788
|
+
title: string;
|
|
5789
|
+
cards: KanbanCard[];
|
|
5790
|
+
color?: string;
|
|
5791
|
+
limit?: number;
|
|
5792
|
+
}
|
|
5793
|
+
interface KanbanMoveEvent {
|
|
5794
|
+
cardId: string;
|
|
5795
|
+
fromColumnId: string;
|
|
5796
|
+
toColumnId: string;
|
|
5797
|
+
toIndex: number;
|
|
5798
|
+
}
|
|
5799
|
+
declare class KanbanBoardComponent {
|
|
5800
|
+
readonly columns: _angular_core.InputSignal<KanbanColumn[]>;
|
|
5801
|
+
readonly showCardCount: _angular_core.InputSignal<boolean>;
|
|
5802
|
+
readonly showWipLimit: _angular_core.InputSignal<boolean>;
|
|
5803
|
+
readonly readonly: _angular_core.InputSignal<boolean>;
|
|
5804
|
+
readonly cardMoved: _angular_core.OutputEmitterRef<KanbanMoveEvent>;
|
|
5805
|
+
readonly cardClick: _angular_core.OutputEmitterRef<{
|
|
5806
|
+
card: KanbanCard;
|
|
5807
|
+
columnId: string;
|
|
5808
|
+
}>;
|
|
5809
|
+
protected internalColumns: _angular_core.WritableSignal<KanbanColumn[]>;
|
|
5810
|
+
protected draggedCard: _angular_core.WritableSignal<{
|
|
5811
|
+
card: KanbanCard;
|
|
5812
|
+
columnId: string;
|
|
5813
|
+
} | null>;
|
|
5814
|
+
protected dropTargetColumn: _angular_core.WritableSignal<string | null>;
|
|
5815
|
+
protected dropTargetIndex: _angular_core.WritableSignal<number>;
|
|
5816
|
+
protected readonly displayColumns: _angular_core.Signal<KanbanColumn[]>;
|
|
5817
|
+
protected isOverLimit(col: KanbanColumn): boolean;
|
|
5818
|
+
protected getPriorityIcon(priority?: string): string;
|
|
5819
|
+
protected getPriorityColor(priority?: string): string;
|
|
5820
|
+
protected onDragStart(event: DragEvent, card: KanbanCard, columnId: string): void;
|
|
5821
|
+
protected onDragOver(event: DragEvent, columnId: string, index: number): void;
|
|
5822
|
+
protected onDragOverColumn(event: DragEvent, columnId: string): void;
|
|
5823
|
+
protected onDragLeave(): void;
|
|
5824
|
+
protected onDrop(event: DragEvent, toColumnId: string, toIndex?: number): void;
|
|
5825
|
+
protected onDragEnd(): void;
|
|
5826
|
+
protected onCardClick(card: KanbanCard, columnId: string): void;
|
|
5827
|
+
protected trackColumn(_: number, col: KanbanColumn): string;
|
|
5828
|
+
protected trackCard(_: number, card: KanbanCard): string;
|
|
5829
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<KanbanBoardComponent, never>;
|
|
5830
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<KanbanBoardComponent, "lc-kanban-board", never, { "columns": { "alias": "columns"; "required": true; "isSignal": true; }; "showCardCount": { "alias": "showCardCount"; "required": false; "isSignal": true; }; "showWipLimit": { "alias": "showWipLimit"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; }, { "cardMoved": "cardMoved"; "cardClick": "cardClick"; }, never, never, true, never>;
|
|
5831
|
+
}
|
|
5832
|
+
|
|
5833
|
+
type NotificationType = 'info' | 'success' | 'warning' | 'error';
|
|
5834
|
+
type NotificationPriority = 'low' | 'normal' | 'high' | 'urgent';
|
|
5835
|
+
interface Notification {
|
|
5836
|
+
id: string;
|
|
5837
|
+
title: string;
|
|
5838
|
+
message?: string;
|
|
5839
|
+
type?: NotificationType;
|
|
5840
|
+
priority?: NotificationPriority;
|
|
5841
|
+
timestamp: Date;
|
|
5842
|
+
read?: boolean;
|
|
5843
|
+
icon?: string;
|
|
5844
|
+
category?: string;
|
|
5845
|
+
actionLabel?: string;
|
|
5846
|
+
actionUrl?: string;
|
|
5847
|
+
}
|
|
5848
|
+
declare class NotificationCenterComponent {
|
|
5849
|
+
readonly notifications: _angular_core.InputSignal<Notification[]>;
|
|
5850
|
+
readonly title: _angular_core.InputSignal<string>;
|
|
5851
|
+
readonly showFilter: _angular_core.InputSignal<boolean>;
|
|
5852
|
+
readonly showTimestamp: _angular_core.InputSignal<boolean>;
|
|
5853
|
+
readonly showPriority: _angular_core.InputSignal<boolean>;
|
|
5854
|
+
readonly emptyMessage: _angular_core.InputSignal<string>;
|
|
5855
|
+
readonly maxHeight: _angular_core.InputSignal<string>;
|
|
5856
|
+
readonly groupByCategory: _angular_core.InputSignal<boolean>;
|
|
5857
|
+
readonly notificationClick: _angular_core.OutputEmitterRef<Notification>;
|
|
5858
|
+
readonly notificationDismiss: _angular_core.OutputEmitterRef<string>;
|
|
5859
|
+
readonly notificationAction: _angular_core.OutputEmitterRef<Notification>;
|
|
5860
|
+
readonly markAllRead: _angular_core.OutputEmitterRef<void>;
|
|
5861
|
+
readonly clearAll: _angular_core.OutputEmitterRef<void>;
|
|
5862
|
+
protected activeFilter: _angular_core.WritableSignal<"all" | NotificationType>;
|
|
5863
|
+
protected searchQuery: _angular_core.WritableSignal<string>;
|
|
5864
|
+
protected readonly unreadCount: _angular_core.Signal<number>;
|
|
5865
|
+
protected readonly filteredNotifications: _angular_core.Signal<Notification[]>;
|
|
5866
|
+
protected readonly groupedNotifications: _angular_core.Signal<{
|
|
5867
|
+
category: string;
|
|
5868
|
+
items: Notification[];
|
|
5869
|
+
}[] | null>;
|
|
5870
|
+
protected readonly filterCounts: _angular_core.Signal<{
|
|
5871
|
+
all: number;
|
|
5872
|
+
info: number;
|
|
5873
|
+
success: number;
|
|
5874
|
+
warning: number;
|
|
5875
|
+
error: number;
|
|
5876
|
+
}>;
|
|
5877
|
+
protected readonly hasNotifications: _angular_core.Signal<boolean>;
|
|
5878
|
+
protected getTypeIcon(type?: NotificationType): string;
|
|
5879
|
+
protected getPriorityLabel(priority?: NotificationPriority): string;
|
|
5880
|
+
protected formatTime(date: Date): string;
|
|
5881
|
+
protected setFilter(filter: NotificationType | 'all'): void;
|
|
5882
|
+
protected onSearch(event: Event): void;
|
|
5883
|
+
protected onClick(notification: Notification): void;
|
|
5884
|
+
protected onDismiss(id: string, event: Event): void;
|
|
5885
|
+
protected onAction(notification: Notification, event: Event): void;
|
|
5886
|
+
protected onMarkAllRead(): void;
|
|
5887
|
+
protected onClearAll(): void;
|
|
5888
|
+
private priorityWeight;
|
|
5889
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<NotificationCenterComponent, never>;
|
|
5890
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<NotificationCenterComponent, "lc-notification-center", never, { "notifications": { "alias": "notifications"; "required": true; "isSignal": true; }; "title": { "alias": "title"; "required": false; "isSignal": true; }; "showFilter": { "alias": "showFilter"; "required": false; "isSignal": true; }; "showTimestamp": { "alias": "showTimestamp"; "required": false; "isSignal": true; }; "showPriority": { "alias": "showPriority"; "required": false; "isSignal": true; }; "emptyMessage": { "alias": "emptyMessage"; "required": false; "isSignal": true; }; "maxHeight": { "alias": "maxHeight"; "required": false; "isSignal": true; }; "groupByCategory": { "alias": "groupByCategory"; "required": false; "isSignal": true; }; }, { "notificationClick": "notificationClick"; "notificationDismiss": "notificationDismiss"; "notificationAction": "notificationAction"; "markAllRead": "markAllRead"; "clearAll": "clearAll"; }, never, never, true, never>;
|
|
5891
|
+
}
|
|
5892
|
+
|
|
5893
|
+
type RichTextEditorMode = 'rich' | 'markdown' | 'split';
|
|
5894
|
+
type ToolbarAction = 'bold' | 'italic' | 'underline' | 'strikethrough' | 'h1' | 'h2' | 'h3' | 'ul' | 'ol' | 'blockquote' | 'code' | 'codeblock' | 'link' | 'image' | 'hr';
|
|
5895
|
+
interface ToolbarConfig {
|
|
5896
|
+
actions: ToolbarAction[];
|
|
5897
|
+
}
|
|
5898
|
+
/**
|
|
5899
|
+
* Rich Text Editor with Markdown support.
|
|
5900
|
+
*
|
|
5901
|
+
* Supports three modes:
|
|
5902
|
+
* - `rich`: WYSIWYG editing with toolbar
|
|
5903
|
+
* - `markdown`: Raw markdown editing with syntax highlighting
|
|
5904
|
+
* - `split`: Side-by-side markdown and preview
|
|
5905
|
+
*
|
|
5906
|
+
* Implements ControlValueAccessor for reactive form integration.
|
|
5907
|
+
* The value is always stored as Markdown.
|
|
5908
|
+
*
|
|
5909
|
+
* @example
|
|
5910
|
+
* ```html
|
|
5911
|
+
* <lc-rich-text-editor
|
|
5912
|
+
* [(ngModel)]="content"
|
|
5913
|
+
* mode="split"
|
|
5914
|
+
* placeholder="Write something..." />
|
|
5915
|
+
* ```
|
|
5916
|
+
*/
|
|
5917
|
+
declare class RichTextEditorComponent implements ControlValueAccessor, AfterViewInit, OnDestroy {
|
|
5918
|
+
/** Editor mode */
|
|
5919
|
+
mode: _angular_core.InputSignal<RichTextEditorMode>;
|
|
5920
|
+
/** Placeholder text */
|
|
5921
|
+
placeholder: _angular_core.InputSignal<string>;
|
|
5922
|
+
/** Minimum height in px */
|
|
5923
|
+
minHeight: _angular_core.InputSignal<number>;
|
|
5924
|
+
/** Maximum height in px (0 = unlimited) */
|
|
5925
|
+
maxHeight: _angular_core.InputSignal<number>;
|
|
5926
|
+
/** Whether the editor is disabled */
|
|
5927
|
+
disabled: _angular_core.InputSignal<boolean>;
|
|
5928
|
+
/** Whether the editor is readonly */
|
|
5929
|
+
readonly: _angular_core.InputSignal<boolean>;
|
|
5930
|
+
/** Toolbar configuration */
|
|
5931
|
+
toolbar: _angular_core.InputSignal<ToolbarConfig>;
|
|
5932
|
+
/** Whether to show word count */
|
|
5933
|
+
showWordCount: _angular_core.InputSignal<boolean>;
|
|
5934
|
+
/** Emitted on every content change */
|
|
5935
|
+
readonly contentChange: _angular_core.OutputEmitterRef<string>;
|
|
5936
|
+
editorArea: ElementRef<HTMLTextAreaElement>;
|
|
5937
|
+
richArea: ElementRef<HTMLDivElement>;
|
|
5938
|
+
/** Internal markdown value */
|
|
5939
|
+
protected markdown: _angular_core.WritableSignal<string>;
|
|
5940
|
+
/** Current active mode (can be toggled by user) */
|
|
5941
|
+
protected activeMode: _angular_core.WritableSignal<RichTextEditorMode>;
|
|
5942
|
+
/** Word count */
|
|
5943
|
+
protected wordCount: _angular_core.Signal<number>;
|
|
5944
|
+
/** Character count */
|
|
5945
|
+
protected charCount: _angular_core.Signal<number>;
|
|
5946
|
+
/** Rendered HTML from markdown */
|
|
5947
|
+
protected renderedHtml: _angular_core.Signal<string>;
|
|
5948
|
+
private onChange;
|
|
5949
|
+
private onTouched;
|
|
5950
|
+
ngAfterViewInit(): void;
|
|
5951
|
+
ngOnDestroy(): void;
|
|
5952
|
+
writeValue(value: string): void;
|
|
5953
|
+
registerOnChange(fn: (value: string) => void): void;
|
|
5954
|
+
registerOnTouched(fn: () => void): void;
|
|
5955
|
+
setDisabledState(isDisabled: boolean): void;
|
|
5956
|
+
protected switchMode(mode: RichTextEditorMode): void;
|
|
5957
|
+
protected onToolbarAction(action: ToolbarAction): void;
|
|
5958
|
+
private execRichCommand;
|
|
5959
|
+
private insertMarkdownSyntax;
|
|
5960
|
+
protected onMarkdownInput(event: Event): void;
|
|
5961
|
+
protected onRichInput(): void;
|
|
5962
|
+
protected onBlur(): void;
|
|
5963
|
+
private syncFromRich;
|
|
5964
|
+
private emitChange;
|
|
5965
|
+
private getSelection;
|
|
5966
|
+
protected getActionLabel(action: ToolbarAction): string;
|
|
5967
|
+
protected getActionTitle(action: ToolbarAction): string;
|
|
5968
|
+
protected markdownToHtml(md: string): string;
|
|
5969
|
+
private htmlToMarkdown;
|
|
5970
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<RichTextEditorComponent, never>;
|
|
5971
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<RichTextEditorComponent, "lc-rich-text-editor", never, { "mode": { "alias": "mode"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "minHeight": { "alias": "minHeight"; "required": false; "isSignal": true; }; "maxHeight": { "alias": "maxHeight"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "toolbar": { "alias": "toolbar"; "required": false; "isSignal": true; }; "showWordCount": { "alias": "showWordCount"; "required": false; "isSignal": true; }; }, { "contentChange": "contentChange"; }, never, never, true, never>;
|
|
5972
|
+
}
|
|
5973
|
+
|
|
5974
|
+
export { AccordionComponent, AlertComponent, AnimationDurationFast, AnimationEasingEaseIn, AnimationEasingEaseInOut, AnimationEasingEaseOut, AreaChartComponent, AvatarComponent, AvatarGroupComponent, BadgeComponent, BarChartComponent, BorderRadius2xl, BorderRadiusFull, BorderRadiusLg, BorderRadiusMd, BorderRadiusNone, BorderRadiusSm, BorderRadiusXl, BreadcrumbsComponent, ButtonComponent, CalendarComponent, CalloutComponent, CardComponent, ChatComponent, CheckboxComponent, ChipComponent, CodeBlockComponent, ColorAccentOrange, ColorAccentPurple, ColorAccentRed, ColorAccentRust, ColorAccentViolet, ColorErrorDark, ColorErrorDefault, ColorErrorLight, ColorInfoDark, ColorInfoDefault, ColorInfoLight, ColorNeutral100, ColorNeutral200, ColorNeutral300, ColorNeutral400, ColorNeutral50, ColorNeutral500, ColorNeutral600, ColorNeutral700, ColorNeutral800, ColorNeutral900, ColorPickerComponent, ColorPrimary100, ColorPrimary200, ColorPrimary300, ColorPrimary400, ColorPrimary50, ColorPrimary500, ColorPrimary600, ColorPrimary700, ColorPrimary800, ColorPrimary900, ColorSecondary100, ColorSecondary200, ColorSecondary300, ColorSecondary400, ColorSecondary50, ColorSecondary500, ColorSecondary600, ColorSecondary700, ColorSecondary800, ColorSecondary900, ColorSuccessDark, ColorSuccessDefault, ColorSuccessLight, ColorWarningDark, ColorWarningDefault, ColorWarningLight, ContainerComponent, DateRangePickerComponent, DatepickerComponent, DependencyViewerComponent, DiffViewerComponent, DividerComponent, DocumentViewerComponent, DonutChartComponent, DrawerComponent, Elevation1, Elevation2, Elevation3, Elevation4, EmailInputComponent, EmptyStateComponent, ErrorDisplayComponent, FieldGroupComponent, FileUploadComponent, FilterBarComponent, FooterComponent, FunnelChartComponent, GalleryComponent, GanttChartComponent, GaugeComponent, HeaderComponent, HeatmapComponent, HeroComponent, IconComponent, InputComponent, KanbanBoardComponent, LineChartComponent, ListComponent, ListItemTemplateDirective, LogoComponent, MenuComponent, ModalComponent, NotificationCenterComponent, NumberInputComponent, PaginationComponent, PasswordInputComponent, PieChartComponent, PopoverComponent, ProgressBarComponent, ProgressRingComponent, RadarChartComponent, RadioComponent, RatingComponent, RichTextEditorComponent, ScatterPlotComponent, SearchInputComponent, SectionComponent, SelectComponent, SidenavComponent, SizeInteractiveLgFontSize, SizeInteractiveLgHeight, SizeInteractiveLgPadding, SizeInteractiveMdFontSize, SizeInteractiveMdHeight, SizeInteractiveMdPadding, SizeInteractiveSmFontSize, SizeInteractiveSmHeight, SizeInteractiveSmPadding, SizeInteractiveXsFontSize, SizeInteractiveXsHeight, SizeInteractiveXsPadding, SizeMinTouchHeight, SizeMinTouchWidth, SkeletonComponent, SliderComponent, SpacerComponent, Spacing0, Spacing05, Spacing1, Spacing10, Spacing11, Spacing12, Spacing14, Spacing15, Spacing16, Spacing2, Spacing25, Spacing3, Spacing35, Spacing4, Spacing5, Spacing6, Spacing7, Spacing8, Spacing9, SparklineComponent, SpinnerComponent, StackComponent, StackedBarChartComponent, StatTrendComponent, StepperComponent, SwitchComponent, TabComponent, TableCellDirective, TableComponent, TabsComponent, TagInputComponent, TextareaComponent, ThemeService, TimelineComponent, ToastComponent, ToastService, ToggleGroupComponent, TooltipContentComponent, TooltipDirective, TypographyComponent, TypographyFontFamilyBase, TypographyFontFamilyMono, TypographyFontSize2xl, TypographyFontSize3xl, TypographyFontSize4xl, TypographyFontSize5xl, TypographyFontSize6xl, TypographyFontSizeBase, TypographyFontSizeLg, TypographyFontSizeSm, TypographyFontSizeXl, TypographyFontSizeXs, TypographyFontWeightBold, TypographyFontWeightMedium, TypographyFontWeightNormal, TypographyFontWeightSemibold, TypographyLineHeightNormal, TypographyLineHeightRelaxed, TypographyLineHeightTight, VerificationCodeInputComponent, WaterfallChartComponent };
|
|
5975
|
+
export type { AlertVariant, AreaChartSeries, AvatarGroupItem, AvatarSize, AvatarStatus, BadgeSize, BadgeVariant, BarChartItem, BarChartOrientation, BreadcrumbItem, BreadcrumbSize, ButtonSize, ButtonType, ButtonVariant, CalendarEvent, CalendarView, CalloutVariant, CellEditEvent, ChatMessage, ChatMessageRole, ChatSendEvent, CheckboxSize, ChipSize, ChipVariant, CodeBlockLanguage, ContainerSize, DateRange, DateValue, DependencyDirection, DependencyEdgeDef, DependencyNode, DependencyNodeStatus, DependencyRelation, DiffViewMode, DividerOrientation, DividerSpacing, DividerVariant, DocumentType, DonutChartSize, DonutSegment, DrawerPosition, DrawerSize, EmptyStateSize, ErrorSeverity, FileUploadFile, FilterConfig, FilterOption, FilterValues, FooterLink, FooterSection, FooterVariant, FunnelStep, GalleryItem, GalleryLayout, GallerySize, GanttDependency, GanttTask, GaugeColor, GaugeSize, HeatmapCell, HeroColor, HeroSize, HeroVariant, IconSize, IconVariant, KanbanCard, KanbanColumn, KanbanLabel, KanbanMoveEvent, LineChartSeries, ListItem, ListOrientation, ListSize, ListVariant, MenuItem, ModalSize, NavigationItem, Notification, NotificationPriority, NotificationType, PaginationSize, PasswordRequirement, PasswordStrength, PieChartSize, PieSegment, PopoverPosition, PopoverTrigger, ProgressBarColor, ProgressBarSize, ProgressBarVariant, ProgressRingColor, ProgressRingSize, RadarChartSeries, RadioSize, RatingSize, RichTextEditorMode, ScatterPoint, ScatterSeries, SearchInputSize, SectionBackground, SectionSpacing, SelectOption, SelectOptionGroup, SelectValue, SelectionChangeEvent, SidenavMode, SidenavPosition, SkeletonVariant, SortEvent, SpacerSize, SparklineColor, SparklineCurve, SpinnerSize, StackAlign, StackDirection, StackGap, StackJustify, StackedBarCategory, StackedBarLegend, StackedBarOrientation, StatTrendDirection, StepState, StepperStep, TabOrientation, TableColumn, TableSize, TableVariant, ThemeConfig, ThemeMode, ThemeState, TimelineItem, TimelineOrientation, Toast, ToastAction, ToastConfig, ToastPosition, ToastVariant, ToggleOption, ToolbarAction, ToolbarConfig, TooltipPosition, WaterfallItem };
|