@life-cockpit/angular-ui-kit 2.7.0 → 2.9.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +4 -2
- package/fesm2022/life-cockpit-angular-ui-kit.mjs +544 -314
- package/fesm2022/life-cockpit-angular-ui-kit.mjs.map +1 -1
- package/package.json +4 -1
- package/src/assets/icon-names.json +1 -0
- package/src/styles/_theme-dark.scss +3 -0
- package/src/styles/_theme-light.scss +2 -0
- package/src/styles/tokens/_all.scss +2 -1
- package/src/styles/tokens/_colors.scss +2 -1
- package/types/life-cockpit-angular-ui-kit.d.ts +216 -23
|
@@ -57,7 +57,8 @@ declare const ColorAccentViolet = "#4e3f84";
|
|
|
57
57
|
declare const ColorSurfaceDarkBase = "#14222e";
|
|
58
58
|
declare const ColorSurfaceDarkRaised = "#1a2c3a";
|
|
59
59
|
declare const ColorSurfaceDarkSunken = "#0c1722";
|
|
60
|
-
declare const ColorBackgroundDark = "#
|
|
60
|
+
declare const ColorBackgroundDark = "#0a121b";
|
|
61
|
+
declare const ColorSidebarDark = "#070e15";
|
|
61
62
|
declare const ColorTextDarkPrimary = "#eef4f6";
|
|
62
63
|
declare const ColorTextDarkSecondary = "#aebfc7";
|
|
63
64
|
declare const ColorTextDarkTertiary = "#71858f";
|
|
@@ -449,7 +450,7 @@ declare class ButtonComponent {
|
|
|
449
450
|
* - Variant styles (elevated, outlined, filled)
|
|
450
451
|
* - Configurable padding (none, sm, md, lg)
|
|
451
452
|
* - Border radius options (none, sm, md, lg, xl)
|
|
452
|
-
* - Optional title display
|
|
453
|
+
* - Optional title display, with an optional leading icon tile
|
|
453
454
|
* - Content projection for flexible body content
|
|
454
455
|
*
|
|
455
456
|
* @example
|
|
@@ -457,6 +458,11 @@ declare class ButtonComponent {
|
|
|
457
458
|
* <lc-card title="Card Title" variant="elevated" padding="md">
|
|
458
459
|
* <p>Card body content</p>
|
|
459
460
|
* </lc-card>
|
|
461
|
+
*
|
|
462
|
+
* <!-- With a leading brand-tile icon in the header -->
|
|
463
|
+
* <lc-card title="Repository" subtitle="Checkout & profile" icon="git-branch">
|
|
464
|
+
* ...
|
|
465
|
+
* </lc-card>
|
|
460
466
|
* ```
|
|
461
467
|
*/
|
|
462
468
|
declare class CardComponent {
|
|
@@ -469,6 +475,18 @@ declare class CardComponent {
|
|
|
469
475
|
* Optional subtitle rendered below the title.
|
|
470
476
|
*/
|
|
471
477
|
subtitle: _angular_core.InputSignal<string | undefined>;
|
|
478
|
+
/**
|
|
479
|
+
* Optional leading icon (Tabler icon name) rendered as a teal brand tile to
|
|
480
|
+
* the left of the title. Only shown when `title` is set.
|
|
481
|
+
*/
|
|
482
|
+
icon: _angular_core.InputSignal<string | undefined>;
|
|
483
|
+
/**
|
|
484
|
+
* Visual treatment of the leading icon tile.
|
|
485
|
+
* - brand: gradient teal tile with light ink (default)
|
|
486
|
+
* - subtle: translucent surface tile with brand-teal ink
|
|
487
|
+
* @default 'brand'
|
|
488
|
+
*/
|
|
489
|
+
iconVariant: _angular_core.InputSignal<"brand" | "subtle">;
|
|
472
490
|
/**
|
|
473
491
|
* Optional badge text/count shown next to the title (e.g. item count).
|
|
474
492
|
*/
|
|
@@ -531,7 +549,7 @@ declare class CardComponent {
|
|
|
531
549
|
*/
|
|
532
550
|
protected handleKeydown(event: KeyboardEvent): void;
|
|
533
551
|
static ɵfac: _angular_core.ɵɵFactoryDeclaration<CardComponent, never>;
|
|
534
|
-
static ɵcmp: _angular_core.ɵɵComponentDeclaration<CardComponent, "lc-card", never, { "title": { "alias": "title"; "required": false; "isSignal": true; }; "subtitle": { "alias": "subtitle"; "required": false; "isSignal": true; }; "badge": { "alias": "badge"; "required": false; "isSignal": true; }; "badgeVariant": { "alias": "badgeVariant"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "padding": { "alias": "padding"; "required": false; "isSignal": true; }; "clickable": { "alias": "clickable"; "required": false; "isSignal": true; }; "selected": { "alias": "selected"; "required": false; "isSignal": true; }; "borderRadius": { "alias": "borderRadius"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; }, { "cardClick": "cardClick"; }, never, ["[card-header-action]", "[card-header]", "*", "[card-footer]"], true, never>;
|
|
552
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<CardComponent, "lc-card", never, { "title": { "alias": "title"; "required": false; "isSignal": true; }; "subtitle": { "alias": "subtitle"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "iconVariant": { "alias": "iconVariant"; "required": false; "isSignal": true; }; "badge": { "alias": "badge"; "required": false; "isSignal": true; }; "badgeVariant": { "alias": "badgeVariant"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "padding": { "alias": "padding"; "required": false; "isSignal": true; }; "clickable": { "alias": "clickable"; "required": false; "isSignal": true; }; "selected": { "alias": "selected"; "required": false; "isSignal": true; }; "borderRadius": { "alias": "borderRadius"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; }, { "cardClick": "cardClick"; }, never, ["[card-header-action]", "[card-header]", "*", "[card-footer]"], true, never>;
|
|
535
553
|
}
|
|
536
554
|
|
|
537
555
|
type CheckboxSize = 'xs' | 'sm' | 'md' | 'lg';
|
|
@@ -578,6 +596,10 @@ type IconSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
|
|
|
578
596
|
* - Custom color support (CSS colors, variables)
|
|
579
597
|
* - Accessibility attributes (ARIA labels, decorative icons)
|
|
580
598
|
* - Dynamic SVG loading from Tabler Icons
|
|
599
|
+
* - Fail-loud on unknown names: a dev-mode warning + a visible placeholder
|
|
600
|
+
* (never a silent empty space). See {@link ICON_NAMES} / {@link isValidIconName}
|
|
601
|
+
* for the canonical set of valid names, and {@link ICON_ALIASES} for the
|
|
602
|
+
* supported Heroicon/Material aliases.
|
|
581
603
|
*
|
|
582
604
|
* @example
|
|
583
605
|
* ```html
|
|
@@ -598,6 +620,9 @@ type IconSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
|
|
|
598
620
|
*
|
|
599
621
|
* <!-- Decorative icon (hidden from screen readers) -->
|
|
600
622
|
* <lc-icon name="sparkles" [decorative]="true" />
|
|
623
|
+
*
|
|
624
|
+
* <!-- Strict: throw in dev when the name is unknown (catch typos in CI) -->
|
|
625
|
+
* <lc-icon name="beaker" [strict]="true" />
|
|
601
626
|
* ```
|
|
602
627
|
*/
|
|
603
628
|
declare class IconComponent {
|
|
@@ -643,21 +668,18 @@ declare class IconComponent {
|
|
|
643
668
|
*/
|
|
644
669
|
readonly decorative: _angular_core.InputSignal<boolean>;
|
|
645
670
|
/**
|
|
646
|
-
|
|
647
|
-
* @
|
|
648
|
-
|
|
649
|
-
|
|
650
|
-
|
|
651
|
-
* Alias map for non-Tabler names (e.g. Material Design names)
|
|
652
|
-
* Maps alternative names to their Tabler equivalents
|
|
653
|
-
* @internal
|
|
671
|
+
* Strict mode. When `true` and the name is not a valid icon (see
|
|
672
|
+
* {@link isValidIconName}), the component **throws** in development mode
|
|
673
|
+
* instead of only warning — useful as a CI guard to catch typos/unknown
|
|
674
|
+
* names. No effect in production builds.
|
|
675
|
+
* @default false
|
|
654
676
|
*/
|
|
655
|
-
|
|
677
|
+
readonly strict: _angular_core.InputSignal<boolean>;
|
|
656
678
|
/**
|
|
657
|
-
|
|
679
|
+
* SVG content loaded from Tabler Icons
|
|
658
680
|
* @internal
|
|
659
681
|
*/
|
|
660
|
-
|
|
682
|
+
readonly svgContent: _angular_core.WritableSignal<SafeHtml>;
|
|
661
683
|
/**
|
|
662
684
|
* Computed path to SVG file
|
|
663
685
|
* @internal
|
|
@@ -685,9 +707,55 @@ declare class IconComponent {
|
|
|
685
707
|
*/
|
|
686
708
|
private processSvgString;
|
|
687
709
|
static ɵfac: _angular_core.ɵɵFactoryDeclaration<IconComponent, never>;
|
|
688
|
-
static ɵcmp: _angular_core.ɵɵComponentDeclaration<IconComponent, "lc-icon", never, { "name": { "alias": "name"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "decorative": { "alias": "decorative"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
|
|
710
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<IconComponent, "lc-icon", never, { "name": { "alias": "name"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "decorative": { "alias": "decorative"; "required": false; "isSignal": true; }; "strict": { "alias": "strict"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
|
|
689
711
|
}
|
|
690
712
|
|
|
713
|
+
/**
|
|
714
|
+
* The canonical set of valid `lc-icon` names: every served Tabler icon plus
|
|
715
|
+
* every documented alias ({@link ICON_ALIASES}) and inlined icon.
|
|
716
|
+
* Stored space-joined and split at load to keep the bundle compact.
|
|
717
|
+
*/
|
|
718
|
+
declare const ICON_NAMES: readonly string[];
|
|
719
|
+
|
|
720
|
+
/**
|
|
721
|
+
* Alias map for non-Tabler icon names.
|
|
722
|
+
*
|
|
723
|
+
* `lc-icon` serves the **Tabler** icon set, but components across the ecosystem
|
|
724
|
+
* frequently reference **Heroicon** (and a few Material Design) names, which use
|
|
725
|
+
* different identifiers. Each entry here maps such an alias to its Tabler
|
|
726
|
+
* equivalent so HTTP loading resolves correctly.
|
|
727
|
+
*
|
|
728
|
+
* This map is part of the public API so consumers can see exactly which
|
|
729
|
+
* non-Tabler names are supported (and lint against them). Every key is also
|
|
730
|
+
* included in {@link ICON_NAMES} as a valid `lc-icon` name.
|
|
731
|
+
*
|
|
732
|
+
* @see ICON_NAMES
|
|
733
|
+
* @see isValidIconName
|
|
734
|
+
*/
|
|
735
|
+
declare const ICON_ALIASES: Readonly<Record<string, string>>;
|
|
736
|
+
|
|
737
|
+
/**
|
|
738
|
+
* A valid `lc-icon` name.
|
|
739
|
+
*
|
|
740
|
+
* There are ~5000 valid names, so this is intentionally a broad `string` alias
|
|
741
|
+
* rather than a giant union type (which would bloat editors and builds). Prefer
|
|
742
|
+
* runtime validation via {@link isValidIconName}, or lint your usages against
|
|
743
|
+
* the {@link ICON_NAMES} array (also shipped as `icon-names.json`).
|
|
744
|
+
*/
|
|
745
|
+
type IconName = string;
|
|
746
|
+
/**
|
|
747
|
+
* Whether `name` is a valid `lc-icon` name — i.e. a served Tabler icon, a
|
|
748
|
+
* documented alias ({@link ICON_ALIASES}), or an inlined icon.
|
|
749
|
+
*
|
|
750
|
+
* @example
|
|
751
|
+
* ```ts
|
|
752
|
+
* isValidIconName('flask'); // true (Tabler)
|
|
753
|
+
* isValidIconName('x-mark'); // true (Heroicon alias)
|
|
754
|
+
* isValidIconName('beaker'); // false (not a Tabler name — did you mean 'flask'?)
|
|
755
|
+
* ```
|
|
756
|
+
*/
|
|
757
|
+
declare function isValidIconName(name: string): boolean;
|
|
758
|
+
|
|
691
759
|
/**
|
|
692
760
|
* Injection token for the base path used to resolve the built-in
|
|
693
761
|
* Life-Cockpit logo assets. Defaults to `'/assets'` so consuming apps
|
|
@@ -2419,10 +2487,12 @@ declare class ContainerComponent {
|
|
|
2419
2487
|
* to get consistent rhythm between title, metadata and content below.
|
|
2420
2488
|
*
|
|
2421
2489
|
* Slots:
|
|
2422
|
-
* - `[slot="breadcrumbs"]`
|
|
2423
|
-
* - `[slot="
|
|
2424
|
-
*
|
|
2425
|
-
* -
|
|
2490
|
+
* - `[slot="breadcrumbs"]` — rendered above the title (e.g. `<lc-breadcrumbs>`)
|
|
2491
|
+
* - `[slot="title-suffix"]` — inline beside the title, after the optional `badge`
|
|
2492
|
+
* (for one or more status chips/badges)
|
|
2493
|
+
* - `[slot="actions"]` — right-aligned actions (buttons, menus)
|
|
2494
|
+
* - `[slot="meta"]` — secondary metadata under the title row (chips, tags)
|
|
2495
|
+
* - default — short header-internal description text
|
|
2426
2496
|
*
|
|
2427
2497
|
* Full-blown navigation primitives like `lc-tabs` — which render both the tab
|
|
2428
2498
|
* strip **and** their panel content — belong **below** the page header, never
|
|
@@ -2436,6 +2506,8 @@ declare class ContainerComponent {
|
|
|
2436
2506
|
* [showDivider]="true"
|
|
2437
2507
|
* >
|
|
2438
2508
|
* <lc-breadcrumbs slot="breadcrumbs" [items]="crumbs" />
|
|
2509
|
+
* <lc-chip slot="title-suffix" size="sm">Beta</lc-chip>
|
|
2510
|
+
* <lc-chip slot="title-suffix" size="sm" variant="success">Ready</lc-chip>
|
|
2439
2511
|
* <lc-button slot="actions" variant="primary">New report</lc-button>
|
|
2440
2512
|
* <lc-chip slot="meta">12 active</lc-chip>
|
|
2441
2513
|
* </lc-page-header>
|
|
@@ -2450,7 +2522,7 @@ declare class PageHeaderComponent {
|
|
|
2450
2522
|
* Heading level for the title — affects semantics, not size.
|
|
2451
2523
|
* @default 1
|
|
2452
2524
|
*/
|
|
2453
|
-
level: _angular_core.InputSignal<
|
|
2525
|
+
level: _angular_core.InputSignal<2 | 1 | 3>;
|
|
2454
2526
|
/**
|
|
2455
2527
|
* Visual size of the page header.
|
|
2456
2528
|
* - `compact` — dense data-tool pages
|
|
@@ -2475,7 +2547,7 @@ declare class PageHeaderComponent {
|
|
|
2475
2547
|
noPaddingX: _angular_core.InputSignal<boolean>;
|
|
2476
2548
|
protected hostClasses: _angular_core.Signal<string>;
|
|
2477
2549
|
static ɵfac: _angular_core.ɵɵFactoryDeclaration<PageHeaderComponent, never>;
|
|
2478
|
-
static ɵcmp: _angular_core.ɵɵComponentDeclaration<PageHeaderComponent, "lc-page-header", never, { "title": { "alias": "title"; "required": false; "isSignal": true; }; "subtitle": { "alias": "subtitle"; "required": false; "isSignal": true; }; "level": { "alias": "level"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "showDivider": { "alias": "showDivider"; "required": false; "isSignal": true; }; "badge": { "alias": "badge"; "required": false; "isSignal": true; }; "noPaddingX": { "alias": "noPaddingX"; "required": false; "isSignal": true; }; }, {}, never, ["[slot='breadcrumbs']", "[slot='actions']", "[slot='meta']", "*"], true, never>;
|
|
2550
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<PageHeaderComponent, "lc-page-header", never, { "title": { "alias": "title"; "required": false; "isSignal": true; }; "subtitle": { "alias": "subtitle"; "required": false; "isSignal": true; }; "level": { "alias": "level"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "showDivider": { "alias": "showDivider"; "required": false; "isSignal": true; }; "badge": { "alias": "badge"; "required": false; "isSignal": true; }; "noPaddingX": { "alias": "noPaddingX"; "required": false; "isSignal": true; }; }, {}, never, ["[slot='breadcrumbs']", "[slot='title-suffix']", "[slot='title-suffix']", "[slot='title-suffix']", "[slot='actions']", "[slot='meta']", "*"], true, never>;
|
|
2479
2551
|
}
|
|
2480
2552
|
|
|
2481
2553
|
/** Where the layout takes its height from. */
|
|
@@ -7367,5 +7439,126 @@ declare class StageListComponent {
|
|
|
7367
7439
|
static ɵcmp: _angular_core.ɵɵComponentDeclaration<StageListComponent, "lc-stage-list", never, { "stages": { "alias": "stages"; "required": true; "isSignal": true; }; "max": { "alias": "max"; "required": false; "isSignal": true; }; "showValue": { "alias": "showValue"; "required": false; "isSignal": true; }; "showBar": { "alias": "showBar"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "clickable": { "alias": "clickable"; "required": false; "isSignal": true; }; "emptyText": { "alias": "emptyText"; "required": false; "isSignal": true; }; }, { "stageClick": "stageClick"; }, never, never, true, never>;
|
|
7368
7440
|
}
|
|
7369
7441
|
|
|
7370
|
-
|
|
7371
|
-
|
|
7442
|
+
/** Emphasis treatment applied to a row's value. */
|
|
7443
|
+
type DescriptionListEmphasis = 'default' | 'strong' | 'muted' | 'primary';
|
|
7444
|
+
interface DescriptionListItem {
|
|
7445
|
+
/** Label shown on the term side of the row. */
|
|
7446
|
+
term: string;
|
|
7447
|
+
/** Value shown on the description side of the row. */
|
|
7448
|
+
value: string;
|
|
7449
|
+
/** Optional link — renders the value as an anchor. */
|
|
7450
|
+
href?: string;
|
|
7451
|
+
/** Optional visual emphasis for the value. @default 'default' */
|
|
7452
|
+
emphasis?: DescriptionListEmphasis;
|
|
7453
|
+
/** Optional opaque payload echoed back in `itemClick`. */
|
|
7454
|
+
id?: string;
|
|
7455
|
+
}
|
|
7456
|
+
type DescriptionListLayout = 'rows' | 'stacked';
|
|
7457
|
+
type DescriptionListSize = 'sm' | 'md';
|
|
7458
|
+
/**
|
|
7459
|
+
* Description list for key/value metadata (a styled `<dl>`).
|
|
7460
|
+
*
|
|
7461
|
+
* Features:
|
|
7462
|
+
* - `rows` layout: term on the left, value on the right, with an optional
|
|
7463
|
+
* dotted leader line connecting them (the DS2.0 "spec sheet" look).
|
|
7464
|
+
* - `stacked` layout: term above value, for narrow columns.
|
|
7465
|
+
* - Per-row value emphasis and optional links.
|
|
7466
|
+
* - Semantic markup (`<dl>`/`<dt>`/`<dd>`) for accessibility.
|
|
7467
|
+
*
|
|
7468
|
+
* @example
|
|
7469
|
+
* ```html
|
|
7470
|
+
* <lc-description-list
|
|
7471
|
+
* [items]="[
|
|
7472
|
+
* { term: 'Repository', value: 'example/project', href: '#', emphasis: 'primary' },
|
|
7473
|
+
* { term: 'Access', value: 'Token stored · read only' },
|
|
7474
|
+
* { term: 'Status', value: 'Maintained', emphasis: 'strong' }
|
|
7475
|
+
* ]"
|
|
7476
|
+
* [leaders]="true" />
|
|
7477
|
+
* ```
|
|
7478
|
+
*/
|
|
7479
|
+
declare class DescriptionListComponent {
|
|
7480
|
+
/** Rows to render. */
|
|
7481
|
+
readonly items: _angular_core.InputSignal<readonly DescriptionListItem[]>;
|
|
7482
|
+
/**
|
|
7483
|
+
* Row layout.
|
|
7484
|
+
* - rows: term left / value right (default)
|
|
7485
|
+
* - stacked: term above value
|
|
7486
|
+
* @default 'rows'
|
|
7487
|
+
*/
|
|
7488
|
+
readonly layout: _angular_core.InputSignal<DescriptionListLayout>;
|
|
7489
|
+
/**
|
|
7490
|
+
* Draw a dotted leader line between term and value. Only applies to the
|
|
7491
|
+
* `rows` layout.
|
|
7492
|
+
* @default false
|
|
7493
|
+
*/
|
|
7494
|
+
readonly leaders: _angular_core.InputSignal<boolean>;
|
|
7495
|
+
/** Density of the rows. @default 'md' */
|
|
7496
|
+
readonly size: _angular_core.InputSignal<DescriptionListSize>;
|
|
7497
|
+
/** Emitted when a row is clicked. */
|
|
7498
|
+
readonly itemClick: _angular_core.OutputEmitterRef<DescriptionListItem>;
|
|
7499
|
+
protected readonly hostClasses: _angular_core.Signal<string>;
|
|
7500
|
+
protected valueClass(item: DescriptionListItem): string;
|
|
7501
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<DescriptionListComponent, never>;
|
|
7502
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<DescriptionListComponent, "lc-description-list", never, { "items": { "alias": "items"; "required": true; "isSignal": true; }; "layout": { "alias": "layout"; "required": false; "isSignal": true; }; "leaders": { "alias": "leaders"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; }, { "itemClick": "itemClick"; }, never, never, true, never>;
|
|
7503
|
+
}
|
|
7504
|
+
|
|
7505
|
+
/**
|
|
7506
|
+
* Status of a single pipeline node.
|
|
7507
|
+
* - complete: finished (teal check)
|
|
7508
|
+
* - current: in progress / active (teal, subtle pulse)
|
|
7509
|
+
* - pending: not started yet (muted, hollow)
|
|
7510
|
+
* - warning: needs attention (amber)
|
|
7511
|
+
* - error: failed (red)
|
|
7512
|
+
*/
|
|
7513
|
+
type PipelineStatus = 'complete' | 'current' | 'pending' | 'warning' | 'error';
|
|
7514
|
+
interface PipelineStep {
|
|
7515
|
+
/** Node label. */
|
|
7516
|
+
label: string;
|
|
7517
|
+
/** Optional secondary line under the label. */
|
|
7518
|
+
caption?: string;
|
|
7519
|
+
/** Status that drives the node color and default icon. */
|
|
7520
|
+
status: PipelineStatus;
|
|
7521
|
+
/** Optional icon (Tabler name) overriding the status default. */
|
|
7522
|
+
icon?: string;
|
|
7523
|
+
/** Optional opaque payload echoed back in `stepClick`. */
|
|
7524
|
+
id?: string;
|
|
7525
|
+
}
|
|
7526
|
+
type PipelineOrientation = 'horizontal' | 'vertical';
|
|
7527
|
+
/**
|
|
7528
|
+
* Pipeline — a status timeline of connected process nodes.
|
|
7529
|
+
*
|
|
7530
|
+
* Unlike {@link StepperComponent} (a navigation stepper whose states derive
|
|
7531
|
+
* from the active index), each pipeline node carries its own explicit status,
|
|
7532
|
+
* so it can show completed, current, pending, warning and error nodes in the
|
|
7533
|
+
* same chain — with an optional caption under each label.
|
|
7534
|
+
*
|
|
7535
|
+
* @example
|
|
7536
|
+
* ```html
|
|
7537
|
+
* <lc-pipeline
|
|
7538
|
+
* [steps]="[
|
|
7539
|
+
* { label: 'Connect', caption: 'Token valid', status: 'complete' },
|
|
7540
|
+
* { label: 'Checkout', caption: '2 hours ago', status: 'complete' },
|
|
7541
|
+
* { label: 'Analyze', caption: 'Running…', status: 'current' },
|
|
7542
|
+
* { label: 'Graph', caption: 'Out of date', status: 'warning' }
|
|
7543
|
+
* ]" />
|
|
7544
|
+
* ```
|
|
7545
|
+
*/
|
|
7546
|
+
declare class PipelineComponent {
|
|
7547
|
+
/** Ordered pipeline nodes. */
|
|
7548
|
+
readonly steps: _angular_core.InputSignal<readonly PipelineStep[]>;
|
|
7549
|
+
/** Layout direction. @default 'horizontal' */
|
|
7550
|
+
readonly orientation: _angular_core.InputSignal<PipelineOrientation>;
|
|
7551
|
+
/** Whether nodes are clickable (emits `stepClick`). @default false */
|
|
7552
|
+
readonly clickable: _angular_core.InputSignal<boolean>;
|
|
7553
|
+
/** Emitted when a node is activated (only when `clickable`). */
|
|
7554
|
+
readonly stepClick: _angular_core.OutputEmitterRef<PipelineStep>;
|
|
7555
|
+
protected readonly hostClass: _angular_core.Signal<string>;
|
|
7556
|
+
protected iconFor(step: PipelineStep): string;
|
|
7557
|
+
protected stepClass(step: PipelineStep): string;
|
|
7558
|
+
protected onActivate(step: PipelineStep): void;
|
|
7559
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<PipelineComponent, never>;
|
|
7560
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<PipelineComponent, "lc-pipeline", never, { "steps": { "alias": "steps"; "required": true; "isSignal": true; }; "orientation": { "alias": "orientation"; "required": false; "isSignal": true; }; "clickable": { "alias": "clickable"; "required": false; "isSignal": true; }; }, { "stepClick": "stepClick"; }, never, never, true, never>;
|
|
7561
|
+
}
|
|
7562
|
+
|
|
7563
|
+
export { AccordionComponent, AccordionContentDirective, AccordionGroupComponent, AccordionHeaderDirective, 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, ColorBackgroundDark, 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, ColorSidebarDark, ColorSuccessDark, ColorSuccessDefault, ColorSuccessLight, ColorSurfaceDarkBase, ColorSurfaceDarkRaised, ColorSurfaceDarkSunken, ColorTextDarkPrimary, ColorTextDarkSecondary, ColorTextDarkTertiary, ColorWarningDark, ColorWarningDefault, ColorWarningLight, ComboboxComponent, ConfirmDialogComponent, ConfirmService, ContainerComponent, DateRangePickerComponent, DatepickerComponent, DependencyViewerComponent, DescriptionListComponent, DiffViewerComponent, DividerComponent, DocumentViewerComponent, DonutChartComponent, DrawerComponent, Elevation1, Elevation2, Elevation3, Elevation4, EmailInputComponent, EmptyStateComponent, ErrorDisplayComponent, FILE_FALLBACK_ICON, FOLDER_ICON, FOLDER_OPEN_ICON, FieldGroupComponent, FileUploadComponent, FilterBarComponent, FooterComponent, FunnelChartComponent, GalleryComponent, GanttChartComponent, GaugeComponent, HeaderComponent, HeatmapComponent, HeroComponent, ICON_ALIASES, ICON_NAMES, IconComponent, InputComponent, KanbanBoardComponent, LC_LOGO_BASE_PATH, LineChartComponent, ListComponent, ListItemTemplateDirective, LogViewerComponent, LogoComponent, MarkdownComponent, MenuComponent, ModalComponent, NotificationCenterComponent, NumberInputComponent, PageHeaderComponent, PageLayoutComponent, PaginationComponent, PasswordInputComponent, PieChartComponent, PipelineComponent, 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, StageListComponent, StatTrendComponent, StepperComponent, SwitchComponent, TabComponent, TableCellDirective, TableComponent, TabsComponent, TagInputComponent, TextareaComponent, ThemeService, TimelineComponent, ToastComponent, ToastService, ToggleGroupComponent, ToolbarComponent, TooltipContentComponent, TooltipDirective, TreeViewComponent, TypographyComponent, TypographyFontFamilyBase, TypographyFontFamilyMono, TypographyFontSize2xl, TypographyFontSize3xl, TypographyFontSize4xl, TypographyFontSize5xl, TypographyFontSize6xl, TypographyFontSizeBase, TypographyFontSizeLg, TypographyFontSizeSm, TypographyFontSizeXl, TypographyFontSizeXs, TypographyFontWeightBold, TypographyFontWeightMedium, TypographyFontWeightNormal, TypographyFontWeightSemibold, TypographyLineHeightNormal, TypographyLineHeightRelaxed, TypographyLineHeightTight, VerificationCodeInputComponent, WaterfallChartComponent, isValidIconName, resolveFileIcon };
|
|
7564
|
+
export type { AccordionChevronPosition, ActionClickEvent, AlertVariant, AreaChartSeries, AvatarGroupItem, AvatarSize, AvatarStatus, BadgeSize, BadgeVariant, BarChartItem, BarChartOrientation, BreadcrumbItem, BreadcrumbSize, ButtonSize, ButtonType, ButtonVariant, CalendarEvent, CalendarView, CalloutVariant, CellEditEvent, ChatAttachment, ChatFileAttachEvent, ChatMessage, ChatMessageRole, ChatMessageStatus, ChatRenderMarkdown, ChatSendEvent, CheckboxSize, ChipSize, ChipVariant, CodeBlockLanguage, ComboboxOption, ComboboxSize, ComboboxValue, ConfirmDialogVariant, ConfirmOptions, ContainerSize, DateRange, DateValue, DependencyDirection, DependencyEdgeDef, DependencyNode, DependencyNodeStatus, DependencyRelation, DescriptionListEmphasis, DescriptionListItem, DescriptionListLayout, DescriptionListSize, 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, IconName, IconSize, IconVariant, KanbanCard, KanbanColumn, KanbanLabel, KanbanMoveEvent, LineChartSeries, ListItem, ListOrientation, ListSize, ListVariant, LogLevel, LogLine, LogViewerVariant, MarkdownChangesHighlighted, MarkdownHeading, MarkdownLinkClick, MarkdownRendered, MenuItem, ModalSize, NavigationItem, Notification, NotificationPriority, NotificationType, PageLayoutFill, PaginationSize, PasswordRequirement, PasswordStrength, PieChartSize, PieSegment, PipelineOrientation, PipelineStatus, PipelineStep, PopoverPosition, PopoverTrigger, ProgressBarColor, ProgressBarSize, ProgressBarVariant, ProgressRingColor, ProgressRingSize, RadarChartSeries, RadioSize, RatingSize, RenderPart, RequireTextConfig, RichTextEditorMode, RowToggleEvent, ScatterPoint, ScatterSeries, SearchInputSize, SectionBackground, SectionSpacing, SelectOption, SelectOptionGroup, SelectValue, SelectionChangeEvent, SidenavMode, SidenavPosition, SkeletonVariant, SortEvent, SpacerSize, SparklineColor, SparklineCurve, SpinnerSize, StackAlign, StackDirection, StackGap, StackJustify, StackedBarCategory, StackedBarLegend, StackedBarOrientation, StageItem, StageListSize, StatTrendDirection, StepState, StepperStep, TabOrientation, TableAction, TableActionsAlign, TableColumn, TableSize, TableTreeConfig, TableVariant, ThemeConfig, ThemeMode, ThemeState, TimelineItem, TimelineOrientation, Toast, ToastAction, ToastConfig, ToastPosition, ToastVariant, ToggleOption, ToolbarAction, ToolbarConfig, TooltipPosition, TreeNode, TreeNodeType, WaterfallItem };
|