@leanix/components 0.4.407 → 0.4.409
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/esm2022/index.mjs +2 -1
- package/esm2022/lib/core-ui/components/badge/badge.component.mjs +21 -1
- package/esm2022/lib/core-ui/components/banner/banner.component.mjs +23 -1
- package/esm2022/lib/core-ui/components/button/button.component.mjs +40 -1
- package/esm2022/lib/core-ui/components/card/card.component.mjs +16 -1
- package/esm2022/lib/core-ui/components/content-panel/content-panel.component.mjs +18 -3
- package/esm2022/lib/core-ui/components/counter/counter.component.mjs +14 -1
- package/esm2022/lib/core-ui/components/integration-link-card/integration-link-card.component.mjs +47 -1
- package/esm2022/lib/core-ui/components/skeleton/skeleton.component.mjs +19 -1
- package/esm2022/lib/core-ui/components/stepper/stepper.component.mjs +41 -1
- package/esm2022/lib/core-ui/components/tiny-spinner/tiny-spinner.component.mjs +12 -1
- package/esm2022/lib/core-ui/components/tokenizer/tokenizer-overflow-popover/tokenizer-overflow-popover.component.mjs +44 -0
- package/esm2022/lib/core-ui/components/tokenizer/tokenizer.component.mjs +3 -3
- package/esm2022/lib/core-ui/tooltip/tooltip.directive.mjs +16 -1
- package/esm2022/lib/forms-ui/components/breadcrumb/breadcrumb.component.mjs +17 -1
- package/esm2022/lib/forms-ui/components/date-input/date-input.component.mjs +100 -38
- package/esm2022/lib/forms-ui/components/slider-toggle/slider-toggle.component.mjs +18 -1
- package/esm2022/lib/modal-ui/components/modal/modal.component.mjs +55 -7
- package/esm2022/lib/popover-ui/components/popover/popover.component.mjs +31 -6
- package/fesm2022/leanix-components.mjs +541 -82
- package/fesm2022/leanix-components.mjs.map +1 -1
- package/index.d.ts +1 -0
- package/lib/core-ui/components/badge/badge.component.d.ts +23 -0
- package/lib/core-ui/components/banner/banner.component.d.ts +22 -0
- package/lib/core-ui/components/button/button.component.d.ts +39 -0
- package/lib/core-ui/components/card/card.component.d.ts +15 -0
- package/lib/core-ui/components/content-panel/content-panel.component.d.ts +18 -1
- package/lib/core-ui/components/counter/counter.component.d.ts +14 -0
- package/lib/core-ui/components/integration-link-card/integration-link-card.component.d.ts +60 -0
- package/lib/core-ui/components/skeleton/skeleton.component.d.ts +18 -0
- package/lib/core-ui/components/stepper/stepper.component.d.ts +40 -0
- package/lib/core-ui/components/tiny-spinner/tiny-spinner.component.d.ts +11 -0
- package/lib/core-ui/components/tokenizer/tokenizer-overflow-popover/tokenizer-overflow-popover.component.d.ts +19 -0
- package/lib/core-ui/tooltip/tooltip.directive.d.ts +17 -0
- package/lib/forms-ui/components/breadcrumb/breadcrumb.component.d.ts +16 -0
- package/lib/forms-ui/components/date-input/date-input.component.d.ts +80 -7
- package/lib/forms-ui/components/slider-toggle/slider-toggle.component.d.ts +20 -0
- package/lib/modal-ui/components/modal/modal.component.d.ts +59 -5
- package/lib/popover-ui/components/popover/popover.component.d.ts +37 -5
- package/package.json +1 -1
package/index.d.ts
CHANGED
@@ -38,6 +38,7 @@ export * from './lib/core-ui/components/table/table-header/table-header.componen
|
|
38
38
|
export * from './lib/core-ui/components/table/table.component';
|
39
39
|
export * from './lib/core-ui/components/tiny-spinner/tiny-spinner.component';
|
40
40
|
export * from './lib/core-ui/components/tokenizer/token/token.component';
|
41
|
+
export * from './lib/core-ui/components/tokenizer/tokenizer-overflow-popover/tokenizer-overflow-popover.component';
|
41
42
|
export * from './lib/core-ui/components/tokenizer/tokenizer.component';
|
42
43
|
export * from './lib/core-ui/tooltip/tooltip-position.interface';
|
43
44
|
export * from './lib/core-ui/tooltip/tooltip.component';
|
@@ -1,10 +1,33 @@
|
|
1
1
|
import { OnInit } from '@angular/core';
|
2
2
|
import * as i0 from "@angular/core";
|
3
|
+
/**
|
4
|
+
* Badge component is used to show a small piece of information in a colored badge.
|
5
|
+
*
|
6
|
+
* ## Usage
|
7
|
+
*
|
8
|
+
* 1. Import the `LxCoreUiModule` module from `@leanix/components` in your module where you want to use the component.
|
9
|
+
*
|
10
|
+
* ```ts
|
11
|
+
* import { LxCoreUiModule } from '@leanix/components';
|
12
|
+
* ```
|
13
|
+
*/
|
3
14
|
export declare class BadgeComponent implements OnInit {
|
15
|
+
/**
|
16
|
+
* The content to show in the badge
|
17
|
+
*/
|
4
18
|
content: string | number;
|
19
|
+
/**
|
20
|
+
* The color of the badge component
|
21
|
+
*/
|
5
22
|
color: 'blue' | 'gray' | 'red' | 'yellow' | 'green' | 'purple' | 'white';
|
23
|
+
/**
|
24
|
+
* If set to true, the badge will create a color for itself based on the content, ignoring other color settings.
|
25
|
+
* This could be useful if we want to show a range of different colors for different contents.
|
26
|
+
*/
|
6
27
|
calculateColorsDynamically: boolean;
|
28
|
+
/** @internal */
|
7
29
|
textColor: string;
|
30
|
+
/** @internal */
|
8
31
|
backGroundColor: string;
|
9
32
|
ngOnInit(): void;
|
10
33
|
get colorClass(): string;
|
@@ -1,16 +1,38 @@
|
|
1
1
|
import { OnInit } from '@angular/core';
|
2
2
|
import { BannerSizes, BannerTypes } from './banner.models';
|
3
3
|
import * as i0 from "@angular/core";
|
4
|
+
/**
|
5
|
+
* Banner can be used to display important information to the user. It allows for any type of content to be displayed in a banner.
|
6
|
+
*
|
7
|
+
* ## Usage
|
8
|
+
*
|
9
|
+
* 1. Import the `LxCoreUiModule` module from `@leanix/components` in your module where you want to use the component.
|
10
|
+
*
|
11
|
+
* ```ts
|
12
|
+
* import { LxCoreUiModule } from '@leanix/components';
|
13
|
+
* ```
|
14
|
+
*
|
15
|
+
* 2. Use the component in your template.
|
16
|
+
*/
|
4
17
|
export declare class BannerComponent implements OnInit {
|
5
18
|
private readonly _type;
|
6
19
|
private readonly _size;
|
20
|
+
/** @internal */
|
7
21
|
readonly showIcon: import("@angular/core").WritableSignal<boolean>;
|
22
|
+
/** @internal */
|
8
23
|
readonly iconClass: import("@angular/core").WritableSignal<string>;
|
24
|
+
/**
|
25
|
+
* The type of the banner
|
26
|
+
*/
|
9
27
|
set type(type: BannerTypes);
|
10
28
|
get type(): BannerTypes;
|
29
|
+
/**
|
30
|
+
* The size of the banner
|
31
|
+
*/
|
11
32
|
set size(size: BannerSizes);
|
12
33
|
get size(): BannerSizes;
|
13
34
|
ngOnInit(): void;
|
35
|
+
/** @internal */
|
14
36
|
getIconClass(type: BannerTypes): "fa-check" | "fa-info" | "fa-exclamation" | "fa-times";
|
15
37
|
static ɵfac: i0.ɵɵFactoryDeclaration<BannerComponent, never>;
|
16
38
|
static ɵcmp: i0.ɵɵComponentDeclaration<BannerComponent, "lx-banner", never, { "type": { "alias": "type"; "required": false; }; "size": { "alias": "size"; "required": false; }; }, {}, never, ["*"], true, never>;
|
@@ -1,13 +1,52 @@
|
|
1
1
|
import * as i0 from "@angular/core";
|
2
|
+
/**
|
3
|
+
* Button component is used to create a button with different styles and sizes. This uses native button element and
|
4
|
+
* only provides styling and some additional features like loading spinner.
|
5
|
+
*
|
6
|
+
* ## Usage
|
7
|
+
*
|
8
|
+
* 1. Import the `LxCoreUiModule` module from `@leanix/components` in your module where you want to use the component.
|
9
|
+
*
|
10
|
+
* ```ts
|
11
|
+
* import { LxCoreUiModule } from '@leanix/components';
|
12
|
+
* ```
|
13
|
+
*/
|
2
14
|
export declare class ButtonComponent {
|
15
|
+
/**
|
16
|
+
* The size of the button.
|
17
|
+
*/
|
3
18
|
size: 'small' | 'medium' | 'large' | 'auto';
|
19
|
+
/**
|
20
|
+
* The color of the button.
|
21
|
+
*/
|
4
22
|
color: 'default' | 'primary' | 'danger' | 'success' | 'light';
|
23
|
+
/**
|
24
|
+
* The mode of the button.
|
25
|
+
*/
|
5
26
|
mode: 'solid' | 'ghost' | 'outline' | 'link';
|
27
|
+
/**
|
28
|
+
* The pressed state of the button. This simulates the `:active` state of the button.
|
29
|
+
*/
|
6
30
|
pressed: boolean;
|
31
|
+
/**
|
32
|
+
* The selected state of the button. This simulates the `:hover` state of the button.
|
33
|
+
*/
|
7
34
|
selected: boolean;
|
35
|
+
/**
|
36
|
+
* This makes the button square.
|
37
|
+
*/
|
8
38
|
square: boolean;
|
39
|
+
/**
|
40
|
+
* This makes corners rounded. Use with `square` for a true circle.
|
41
|
+
*/
|
9
42
|
circle: boolean;
|
43
|
+
/**
|
44
|
+
* This disables the button.
|
45
|
+
*/
|
10
46
|
disabled: boolean;
|
47
|
+
/**
|
48
|
+
* This shows a spinner inside the button.
|
49
|
+
*/
|
11
50
|
showSpinner: boolean;
|
12
51
|
get isDisabled(): boolean;
|
13
52
|
static ɵfac: i0.ɵɵFactoryDeclaration<ButtonComponent, never>;
|
@@ -1,5 +1,20 @@
|
|
1
1
|
import * as i0 from "@angular/core";
|
2
|
+
/**
|
3
|
+
* Card component is a container component that can be used to display content in a card-like style.
|
4
|
+
* This documentation provides details on the usage and configuration of the Card Component.
|
5
|
+
*
|
6
|
+
* ## Usage
|
7
|
+
*
|
8
|
+
* 1. Import the `LxCoreUiModule` module from `@leanix/components` in your module where you want to use the component.
|
9
|
+
*
|
10
|
+
* ```ts
|
11
|
+
* import { LxCoreUiModule } from '@leanix/components';
|
12
|
+
* ```
|
13
|
+
*/
|
2
14
|
export declare class CardComponent {
|
15
|
+
/**
|
16
|
+
* The style of the card.
|
17
|
+
*/
|
3
18
|
dataStyle: 'white';
|
4
19
|
static ɵfac: i0.ɵɵFactoryDeclaration<CardComponent, never>;
|
5
20
|
static ɵcmp: i0.ɵɵComponentDeclaration<CardComponent, "lx-card", never, { "dataStyle": { "alias": "dataStyle"; "required": false; }; }, {}, never, ["*"], true, never>;
|
@@ -1,11 +1,28 @@
|
|
1
1
|
import { ElementRef, EventEmitter } from '@angular/core';
|
2
2
|
import * as i0 from "@angular/core";
|
3
|
+
/**
|
4
|
+
* A content panel component is used to show a panel with a title and content.
|
5
|
+
*
|
6
|
+
* ## Usage
|
7
|
+
*
|
8
|
+
* 1. Import the `ContentPanelComponent` component from `@leanix/components` in your module or standalone copmonent where you want to use the component.
|
9
|
+
*
|
10
|
+
* ```ts
|
11
|
+
* import { ContentPanelComponent } from '@leanix/components';
|
12
|
+
* ```
|
13
|
+
*/
|
3
14
|
export declare class ContentPanelComponent {
|
4
|
-
|
15
|
+
/** The title text at the panel header */
|
5
16
|
title?: string;
|
17
|
+
/** Event emitted when the close button is clicked */
|
6
18
|
contentPanelClose: EventEmitter<void>;
|
19
|
+
/** @internal */
|
7
20
|
body: ElementRef;
|
21
|
+
/** @internal */
|
22
|
+
baseClass: string;
|
23
|
+
/** @internal */
|
8
24
|
onClose(): void;
|
25
|
+
/** @internal */
|
9
26
|
scrollToTop(): void;
|
10
27
|
static ɵfac: i0.ɵɵFactoryDeclaration<ContentPanelComponent, never>;
|
11
28
|
static ɵcmp: i0.ɵɵComponentDeclaration<ContentPanelComponent, "lx-content-panel", never, { "title": { "alias": "title"; "required": false; }; }, { "contentPanelClose": "contentPanelClose"; }, never, ["*"], true, never>;
|
@@ -1,7 +1,21 @@
|
|
1
1
|
import * as i0 from "@angular/core";
|
2
|
+
/**
|
3
|
+
* Counter component is used to create a counter with different styles and sizes.
|
4
|
+
*
|
5
|
+
* ## Usage
|
6
|
+
*
|
7
|
+
* 1. Import the `CounterComponent` component from `@leanix/components` in your module or standalone copmonent where you want to use the component.
|
8
|
+
*
|
9
|
+
* ```ts
|
10
|
+
* import { CounterComponent } from '@leanix/components';
|
11
|
+
* ```
|
12
|
+
*/
|
2
13
|
export declare class CounterComponent {
|
14
|
+
/** The content of the counter. */
|
3
15
|
content?: string | number;
|
16
|
+
/** The size of the counter. */
|
4
17
|
size: 'default' | 'small';
|
18
|
+
/** The color of the counter. */
|
5
19
|
color: 'primary' | 'gray' | 'darkgray' | 'red' | 'yellow' | 'green';
|
6
20
|
get classes(): string;
|
7
21
|
static ɵfac: i0.ɵɵFactoryDeclaration<CounterComponent, never>;
|
@@ -3,22 +3,82 @@ import * as i0 from "@angular/core";
|
|
3
3
|
interface RouteQueryParams {
|
4
4
|
[x: string]: string;
|
5
5
|
}
|
6
|
+
/**
|
7
|
+
* Integration Link Card Component is a card component that displays information about an integration link.
|
8
|
+
*
|
9
|
+
* This documentation provides details on the usage and configuration of the Integration Link Card Component.
|
10
|
+
*
|
11
|
+
* ## Usage
|
12
|
+
*
|
13
|
+
* 1. Import `LxCoreUiModule` module from `@leanix/components` in your module where you want to use the component, or in case of a standalone parent component, import the
|
14
|
+
* `IntegrationLinkCardComponent` directly into your standalone component.
|
15
|
+
*
|
16
|
+
* - Module import:
|
17
|
+
*
|
18
|
+
* ```ts
|
19
|
+
* import { LxCoreUiModule } from '@leanix/components';
|
20
|
+
* ```
|
21
|
+
*
|
22
|
+
* - Standalone component import:
|
23
|
+
*
|
24
|
+
* ```ts
|
25
|
+
* import { IntegrationLinkCardComponent } from '@leanix/components';
|
26
|
+
*
|
27
|
+
* @Component({
|
28
|
+
* selector: 'lx-my-component',
|
29
|
+
* standalone: true,
|
30
|
+
* imports: [IntegrationLinkCardComponent],
|
31
|
+
* templateUrl: './my-component.component.html'
|
32
|
+
* })
|
33
|
+
* export class MyComponent {}
|
34
|
+
* ```
|
35
|
+
*
|
36
|
+
* ## Usage
|
37
|
+
*
|
38
|
+
* #### Required Inputs:
|
39
|
+
*
|
40
|
+
* - `sourceIconClasses` (`string`) - font awesome classes for source icon;
|
41
|
+
* - `sourceName` (`string`) - the name of the source associated with the integration card;
|
42
|
+
* - `title` (`string`) - the main title of the integration card.
|
43
|
+
*/
|
6
44
|
export declare class IntegrationLinkCardComponent {
|
45
|
+
/** Font awesome classes for source icon */
|
7
46
|
sourceIconClasses: string;
|
47
|
+
/** The name of the source associated with the integration card */
|
8
48
|
sourceName: string;
|
49
|
+
/** The main title of the integration card */
|
9
50
|
title: string;
|
51
|
+
/**
|
52
|
+
* Determines if the integration is in an inactive state
|
53
|
+
* When set to true, the card will display in an inactive state
|
54
|
+
* */
|
10
55
|
isInactive: boolean;
|
56
|
+
/** URL or route the card links to */
|
11
57
|
link?: string;
|
58
|
+
/** Query parameters for the route */
|
12
59
|
queryParams?: RouteQueryParams;
|
60
|
+
/**
|
61
|
+
* Determines if the link associated with the card is an external link.
|
62
|
+
* This influences how the link displayed. When set to true links open in a new browser tab
|
63
|
+
*/
|
13
64
|
externalLink?: boolean;
|
65
|
+
/** Content to be displayed within a link icon tooltip */
|
14
66
|
tooltipContent?: string;
|
67
|
+
/** Content for a badge element on the card */
|
15
68
|
badgeContent?: string;
|
69
|
+
/** The name or label of the primary action button on the card */
|
16
70
|
actionButtonName?: string;
|
71
|
+
/** Timestamp related to the integration, such as the last updated time (relative time) */
|
17
72
|
timestamp?: string;
|
73
|
+
/** Additional, less critical information to display on the card */
|
18
74
|
tertiaryInfo?: string;
|
75
|
+
/** Event emitted when the action button is clicked */
|
19
76
|
actionButtonClicked: EventEmitter<void>;
|
77
|
+
/** Event emitted when the link is clicked */
|
20
78
|
linkClicked: EventEmitter<MouseEvent>;
|
79
|
+
/** @internal */
|
21
80
|
onActionButtonClicked(): void;
|
81
|
+
/** @internal */
|
22
82
|
onLinkClicked(event: MouseEvent): void;
|
23
83
|
static ɵfac: i0.ɵɵFactoryDeclaration<IntegrationLinkCardComponent, never>;
|
24
84
|
static ɵcmp: i0.ɵɵComponentDeclaration<IntegrationLinkCardComponent, "lx-integration-link-card", never, { "sourceIconClasses": { "alias": "sourceIconClasses"; "required": true; }; "sourceName": { "alias": "sourceName"; "required": true; }; "title": { "alias": "title"; "required": true; }; "isInactive": { "alias": "isInactive"; "required": false; }; "link": { "alias": "link"; "required": false; }; "queryParams": { "alias": "queryParams"; "required": false; }; "externalLink": { "alias": "externalLink"; "required": false; }; "tooltipContent": { "alias": "tooltipContent"; "required": false; }; "badgeContent": { "alias": "badgeContent"; "required": false; }; "actionButtonName": { "alias": "actionButtonName"; "required": false; }; "timestamp": { "alias": "timestamp"; "required": false; }; "tertiaryInfo": { "alias": "tertiaryInfo"; "required": false; }; }, { "actionButtonClicked": "actionButtonClicked"; "linkClicked": "linkClicked"; }, never, never, true, never>;
|
@@ -1,4 +1,22 @@
|
|
1
1
|
import * as i0 from "@angular/core";
|
2
|
+
/**
|
3
|
+
* Skeleton is a component that can be used to show a loading state of a component.
|
4
|
+
*
|
5
|
+
* ## Usage
|
6
|
+
*
|
7
|
+
* 1. Import the `SkeletonComponent` component from `@leanix/components` in your module or standalone copmonent where you want to use the component.
|
8
|
+
*
|
9
|
+
* ```ts
|
10
|
+
* import { SkeletonComponent } from '@leanix/components';
|
11
|
+
* ```
|
12
|
+
*
|
13
|
+
* Use skeleton loaders for pages or sections that load content progressively, like text and images. The component can
|
14
|
+
* be used to compose various scenarios like placeholders for thumbnails, lists, and avatars. See the example
|
15
|
+
* [patterns](?path=/docs/skeleton-patterns--docs) for more details.
|
16
|
+
*
|
17
|
+
* To get started, import the `SkeletonComponent` in your Angular module or standalone component and use it in the
|
18
|
+
* template using the `<lx-skeleton />` selector with the desired width, height, and border radius.
|
19
|
+
*/
|
2
20
|
export declare class SkeletonComponent {
|
3
21
|
/**
|
4
22
|
* Width of the skeleton element. Valid CSS values are supported. Default is 100% width of the parent.
|
@@ -2,11 +2,51 @@ import { Directionality } from '@angular/cdk/bidi';
|
|
2
2
|
import { CdkStepper } from '@angular/cdk/stepper';
|
3
3
|
import { ChangeDetectorRef, ElementRef } from '@angular/core';
|
4
4
|
import * as i0 from "@angular/core";
|
5
|
+
/**
|
6
|
+
* Stepper component is a wrapper around the Angular CDK Stepper component. It provides a way to create a linear
|
7
|
+
* sequence of steps that guide users through a process.
|
8
|
+
*
|
9
|
+
* ## Usage
|
10
|
+
*
|
11
|
+
* 1. Import `LxCoreUiModule` module from `@leanix/components` and `CdkStepperModule` module from `@angular/cdk/stepper` in your module where you want to use the component, or in case of a standalone parent component, import the
|
12
|
+
* `StepperComponent` and `CdkStepperModule` directly into your standalone component.
|
13
|
+
*
|
14
|
+
* - Module import:
|
15
|
+
*
|
16
|
+
* ```ts
|
17
|
+
* import { LxCoreUiModule } from '@leanix/components';
|
18
|
+
* import { CdkStepperModule } from '@angular/cdk/stepper';
|
19
|
+
* ```
|
20
|
+
*
|
21
|
+
* - Standalone component import:
|
22
|
+
*
|
23
|
+
* ```ts
|
24
|
+
* import { StepperComponent } from '@leanix/components';
|
25
|
+
* import { CdkStepperModule } from '@angular/cdk/stepper';
|
26
|
+
*
|
27
|
+
* @Component({
|
28
|
+
* selector: 'lx-my-component',
|
29
|
+
* standalone: true,
|
30
|
+
* imports: [CdkStepperModule, StepperComponent],
|
31
|
+
* templateUrl: './my-component.component.html'
|
32
|
+
* })
|
33
|
+
* export class MyComponent {}
|
34
|
+
* ```
|
35
|
+
*
|
36
|
+
* 2. Use the component in your template. All steps added to the stepper should be wrapped in a `cdk-step` element.
|
37
|
+
*
|
38
|
+
* Since this component extends the Angular CDK `CdkStepper` component, all the inputs, outputs, and methods available in the
|
39
|
+
* `CdkStepper` component are also available in the `StepperComponent` and are documented in the
|
40
|
+
* [Angular CDK documentation](https://material.angular.io/cdk/stepper/api).
|
41
|
+
*/
|
5
42
|
export declare class StepperComponent extends CdkStepper {
|
43
|
+
/** @internal */
|
6
44
|
size: 'small' | 'normal';
|
7
45
|
constructor(_dir: Directionality, _changeDetectorRef: ChangeDetectorRef, _elementRef: ElementRef<HTMLElement>);
|
8
46
|
get isSmallVariant(): boolean;
|
47
|
+
/** @internal */
|
9
48
|
isCompleted(index: number): boolean;
|
49
|
+
/** @internal */
|
10
50
|
isActiveStep(index: number): boolean;
|
11
51
|
static ɵfac: i0.ɵɵFactoryDeclaration<StepperComponent, never>;
|
12
52
|
static ɵcmp: i0.ɵɵComponentDeclaration<StepperComponent, "lx-stepper", never, {}, {}, never, never, true, never>;
|
@@ -1,4 +1,15 @@
|
|
1
1
|
import * as i0 from "@angular/core";
|
2
|
+
/**
|
3
|
+
* Tiny spinner component is used to show a small spinner.
|
4
|
+
*
|
5
|
+
* ## Usage
|
6
|
+
*
|
7
|
+
* 1. Import the `TinySpinnerComponent` component from `@leanix/components` in your module or standalone copmonent where you want to use the component.
|
8
|
+
*
|
9
|
+
* ```ts
|
10
|
+
* import { TinySpinnerComponent } from '@leanix/components';
|
11
|
+
* ```
|
12
|
+
*/
|
2
13
|
export declare class TinySpinnerComponent {
|
3
14
|
static ɵfac: i0.ɵɵFactoryDeclaration<TinySpinnerComponent, never>;
|
4
15
|
static ɵcmp: i0.ɵɵComponentDeclaration<TinySpinnerComponent, "lx-tiny-spinner", never, {}, {}, never, never, true, never>;
|
@@ -0,0 +1,19 @@
|
|
1
|
+
import { TemplateRef } from '@angular/core';
|
2
|
+
import { SatPopoverComponent, SatPopoverHorizontalAlign, SatPopoverVerticalAlign } from '@ncstate/sat-popover';
|
3
|
+
import { TokenizerComponent } from '../tokenizer.component';
|
4
|
+
import * as i0 from "@angular/core";
|
5
|
+
export declare class TokenizerOverflowPopoverComponent {
|
6
|
+
private destroyRef;
|
7
|
+
private overflowClickSubscription?;
|
8
|
+
protected startIndex: import("@angular/core").WritableSignal<number>;
|
9
|
+
private changeDetectorRef;
|
10
|
+
protected readonly popoverTemplate?: TemplateRef<unknown>;
|
11
|
+
protected readonly popover: SatPopoverComponent;
|
12
|
+
tokenizer: import("@angular/core").InputSignal<TokenizerComponent>;
|
13
|
+
horizontalAlign: import("@angular/core").InputSignal<SatPopoverHorizontalAlign>;
|
14
|
+
verticalAlign: import("@angular/core").InputSignal<SatPopoverVerticalAlign>;
|
15
|
+
constructor();
|
16
|
+
protected closePopover(): void;
|
17
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<TokenizerOverflowPopoverComponent, never>;
|
18
|
+
static ɵcmp: i0.ɵɵComponentDeclaration<TokenizerOverflowPopoverComponent, "lx-tokenizer-overflow-popover", never, { "tokenizer": { "alias": "tokenizer"; "required": true; "isSignal": true; }; "horizontalAlign": { "alias": "horizontalAlign"; "required": false; "isSignal": true; }; "verticalAlign": { "alias": "verticalAlign"; "required": false; "isSignal": true; }; }, {}, ["popoverTemplate"], never, true, never>;
|
19
|
+
}
|
@@ -2,18 +2,33 @@ import { AriaDescriber } from '@angular/cdk/a11y';
|
|
2
2
|
import { Overlay, OverlayPositionBuilder } from '@angular/cdk/overlay';
|
3
3
|
import { ElementRef, OnChanges, OnDestroy, SimpleChanges } from '@angular/core';
|
4
4
|
import * as i0 from "@angular/core";
|
5
|
+
/**
|
6
|
+
* Tooltip directive is used to show a tooltip on hover or focus on an element.
|
7
|
+
*
|
8
|
+
* ## Usage
|
9
|
+
*
|
10
|
+
* 1. Import the `TooltipDirective` component from `@leanix/components` in your module or standalone copmonent where you want to use the component.
|
11
|
+
*
|
12
|
+
* ```ts
|
13
|
+
* import { TooltipDirective } from '@leanix/components';
|
14
|
+
* ```
|
15
|
+
*/
|
5
16
|
export declare class TooltipDirective implements OnChanges, OnDestroy {
|
6
17
|
private overlayPositionBuilder;
|
7
18
|
private elementRef;
|
8
19
|
private overlay;
|
9
20
|
private ariaDescriber;
|
21
|
+
/** The content of the tooltip. */
|
10
22
|
content?: string | null;
|
23
|
+
/** The position of the tooltip. */
|
11
24
|
set lxTooltipPosition(value: {
|
12
25
|
x: string;
|
13
26
|
y: string;
|
14
27
|
} | undefined);
|
15
28
|
private position;
|
29
|
+
/** The delay in milliseconds before the tooltip is shown. */
|
16
30
|
lxTooltipDelay?: number;
|
31
|
+
/** Whether the tooltip content is HTML. */
|
17
32
|
lxTooltipIsHtmlContent: boolean;
|
18
33
|
private overlayRef?;
|
19
34
|
private tooltipRef?;
|
@@ -21,8 +36,10 @@ export declare class TooltipDirective implements OnChanges, OnDestroy {
|
|
21
36
|
get positionStrategy(): import("@angular/cdk/overlay").FlexibleConnectedPositionStrategy;
|
22
37
|
constructor(overlayPositionBuilder: OverlayPositionBuilder, elementRef: ElementRef, overlay: Overlay, ariaDescriber: AriaDescriber);
|
23
38
|
ngOnChanges(changes: SimpleChanges): void;
|
39
|
+
/** @internal */
|
24
40
|
show(): void;
|
25
41
|
ngOnDestroy(): void;
|
42
|
+
/** @internal */
|
26
43
|
hide(): void;
|
27
44
|
static ɵfac: i0.ɵɵFactoryDeclaration<TooltipDirective, never>;
|
28
45
|
static ɵdir: i0.ɵɵDirectiveDeclaration<TooltipDirective, "[lxTooltip]", never, { "content": { "alias": "lxTooltip"; "required": false; }; "lxTooltipPosition": { "alias": "lxTooltipPosition"; "required": false; }; "lxTooltipDelay": { "alias": "lxTooltipDelay"; "required": false; }; "lxTooltipIsHtmlContent": { "alias": "lxTooltipIsHtmlContent"; "required": false; }; }, {}, never, never, true, never>;
|
@@ -9,10 +9,26 @@ interface EllipsedBreadcrumb {
|
|
9
9
|
breadcrumbs: Breadcrumb[];
|
10
10
|
}
|
11
11
|
type ViewBreadcrumb = Breadcrumb | EllipsedBreadcrumb;
|
12
|
+
/**
|
13
|
+
* Breadcrumb component is used to show a list of labels, usually to show the path of user's navigation.
|
14
|
+
*
|
15
|
+
* ## Usage
|
16
|
+
*
|
17
|
+
* 1. Import the LxFormsModule module from @leanix/components in your module where you want to use the component.
|
18
|
+
*
|
19
|
+
* ```ts
|
20
|
+
* import { LxFormsModule } from '@leanix/components';
|
21
|
+
* ```
|
22
|
+
*/
|
12
23
|
export declare class BreadcrumbComponent implements OnChanges {
|
24
|
+
/**
|
25
|
+
* Breadcrumbs array to build the component.
|
26
|
+
*/
|
13
27
|
breadcrumbs: Breadcrumb[];
|
28
|
+
/** @internal */
|
14
29
|
viewBreadcrumbs: ViewBreadcrumb[];
|
15
30
|
ngOnChanges(changes: SimpleChanges): void;
|
31
|
+
/** @internal */
|
16
32
|
isEllipsedBreadcrumb(breadcrumb: ViewBreadcrumb): breadcrumb is EllipsedBreadcrumb;
|
17
33
|
static ɵfac: i0.ɵɵFactoryDeclaration<BreadcrumbComponent, never>;
|
18
34
|
static ɵcmp: i0.ɵɵComponentDeclaration<BreadcrumbComponent, "lx-breadcrumb", never, { "breadcrumbs": { "alias": "breadcrumbs"; "required": false; }; }, {}, never, never, true, never>;
|
@@ -4,79 +4,152 @@ import { Observable, Subject } from 'rxjs';
|
|
4
4
|
import { DateFormatsProvider } from '../../../core-ui/core-ui.constants';
|
5
5
|
import * as i0 from "@angular/core";
|
6
6
|
export type DateInputRenderingStyle = 'INPUT' | 'LINK' | 'BUTTON';
|
7
|
+
/**
|
8
|
+
* This is a date input component that can be used to select a date.
|
9
|
+
*
|
10
|
+
* ## Usage
|
11
|
+
*
|
12
|
+
* 1. Import the `LxFormsUiModule` module from `@leanix/components` in your module where you want to use the component.
|
13
|
+
*
|
14
|
+
* ```ts
|
15
|
+
* import { LxFormsUiModule } from '@leanix/components';
|
16
|
+
* ```
|
17
|
+
*/
|
7
18
|
export declare class DateInputComponent implements OnChanges, OnInit, OnDestroy, ControlValueAccessor, Validator {
|
8
19
|
private cd;
|
9
20
|
private dateFormatsProvider;
|
10
21
|
private getDateFnLocale?;
|
22
|
+
/** The initial date value for the date input field. This is used for `ngModel` and `formControl`. */
|
11
23
|
date: Date | null;
|
12
|
-
|
24
|
+
/** Secondary, alternative input with date string */
|
13
25
|
dateString: string | null;
|
14
|
-
|
26
|
+
/** Determine whether formGroup's value accessor is accessing the selected IDs or the selected objects */
|
15
27
|
valueAccessor: 'date' | 'dateString';
|
28
|
+
/** ID to be set on input to correspond to outside label */
|
16
29
|
inputId: string;
|
30
|
+
/** The rendering style of the date input component. Can be one of "LINK", "BUTTON", or "INPUT". */
|
17
31
|
renderingStyle: DateInputRenderingStyle;
|
32
|
+
/** The placeholder text to show in the date input field when there is no date selected */
|
18
33
|
placeholder: string;
|
34
|
+
/** Deactivate to use old date picker */
|
19
35
|
cdk: boolean;
|
36
|
+
/** Sets datepicker mode, supports: day, month, year */
|
20
37
|
datepickerMode: string;
|
38
|
+
/** Default date to show if ng-model value is not specified. Default date to show if ng-model value is not specified */
|
21
39
|
initDateString: string;
|
22
|
-
|
40
|
+
/** Oldest selectable date */
|
23
41
|
minDate: Date;
|
42
|
+
/** Latest selectable date */
|
24
43
|
maxDate: Date;
|
44
|
+
/** Set lower datepicker mode, supports: day, month, year */
|
25
45
|
minMode: string;
|
46
|
+
/** Sets upper datepicker mode, supports: day, month, year */
|
26
47
|
maxMode: string;
|
48
|
+
/** If false week numbers will be hidden */
|
27
49
|
showWeeks: boolean;
|
50
|
+
/** Format of day in month */
|
28
51
|
formatDay: string;
|
52
|
+
/** Format of month in year */
|
29
53
|
formatMonth: string;
|
54
|
+
/** Format of year in year range */
|
30
55
|
formatYear: string;
|
56
|
+
/** Format of day in week header */
|
31
57
|
formatDayHeader: string;
|
58
|
+
/** Format of title when selecting day */
|
32
59
|
formatDayTitle: string;
|
60
|
+
/** Format of title when selecting month */
|
33
61
|
formatMonthTitle: string;
|
62
|
+
/** Starting day of the week from 0-6 (0=Sunday, ..., 6=Saturday) public */
|
34
63
|
startingDay: number;
|
64
|
+
/** Number of years displayed in year selection */
|
35
65
|
yearRange: number;
|
66
|
+
/** If true only dates from the currently displayed month will be shown */
|
36
67
|
onlyCurrentMonth: boolean;
|
68
|
+
/** If true shortcut`s event propagation will be disabled */
|
37
69
|
shortcutPropagation: boolean;
|
70
|
+
/** Array of custom css classes to be applied to */
|
38
71
|
customClass: {
|
39
72
|
date: Date;
|
40
73
|
mode: string;
|
41
74
|
clazz: string;
|
42
75
|
}[];
|
76
|
+
/** If true, the date input field will be disabled. */
|
43
77
|
disabled: boolean;
|
78
|
+
/** Array of disabled dates if mode is day, or years, etc. */
|
44
79
|
dateDisabled: {
|
45
80
|
date: Date;
|
46
81
|
mode: string;
|
47
82
|
}[];
|
83
|
+
/** If true, the date input field will be auto-focused when the component is first rendered. */
|
48
84
|
autoFocus: boolean;
|
85
|
+
/** If true, the date input field will be marked as invalid. */
|
49
86
|
markInvalid: boolean;
|
87
|
+
/** Triggered whenever the datepicker is closed */
|
50
88
|
closeDateInput: EventEmitter<void>;
|
89
|
+
/** Triggered whenever the date changes */
|
90
|
+
dateStringChange: EventEmitter<string | null>;
|
91
|
+
/** Triggered whenever the date changes. */
|
92
|
+
dateChange: EventEmitter<Date | null>;
|
93
|
+
/** @internal */
|
94
|
+
initDateString$: Observable<string>;
|
95
|
+
/** @internal */
|
51
96
|
input: ElementRef<HTMLInputElement>;
|
97
|
+
/** @internal */
|
52
98
|
dateStringTemplate?: TemplateRef<any>;
|
99
|
+
/** @internal */
|
53
100
|
showDatepicker: boolean;
|
101
|
+
/** @internal */
|
54
102
|
dateFormat: string;
|
103
|
+
/** @internal */
|
55
104
|
initDate: Date;
|
105
|
+
/** @internal */
|
56
106
|
readonly destroyed$: Subject<void>;
|
57
107
|
private formControl;
|
108
|
+
/** @internal */
|
58
109
|
hasError: boolean;
|
110
|
+
/** @internal */
|
59
111
|
onTouched: () => void;
|
112
|
+
/** @internal */
|
60
113
|
propagateChange: (_date: Date | null) => void;
|
61
114
|
constructor(cd: ChangeDetectorRef, dateFormatsProvider: DateFormatsProvider, getDateFnLocale?: Function | undefined);
|
115
|
+
/** @internal */
|
62
116
|
ngOnInit(): void;
|
117
|
+
/** @internal */
|
63
118
|
ngOnChanges(changes: SimpleChanges): void;
|
119
|
+
/** @internal */
|
64
120
|
ngOnDestroy(): void;
|
121
|
+
/** @internal */
|
65
122
|
focus(): void;
|
123
|
+
/** @internal */
|
66
124
|
showPopup(): void;
|
125
|
+
/** @internal */
|
67
126
|
togglePopup(): void;
|
127
|
+
/** @internal */
|
68
128
|
hidePopup(): void;
|
129
|
+
/** @internal */
|
69
130
|
onDateStringChange(newDateString: string | null, emit?: boolean): void;
|
131
|
+
/** @internal */
|
70
132
|
onSelectionDone(newDate: Date): void;
|
133
|
+
/** @internal */
|
71
134
|
onBlur(): void;
|
72
135
|
private updateDate;
|
73
136
|
private recheckErrors;
|
74
|
-
/**
|
137
|
+
/**
|
138
|
+
* Write a new value to the element.
|
139
|
+
* @internal
|
140
|
+
*/
|
75
141
|
writeValue(newDate: Date | string): void;
|
76
|
-
/**
|
142
|
+
/**
|
143
|
+
* Set the function to be called when the control receives a change event.
|
144
|
+
* @internal
|
145
|
+
*/
|
77
146
|
registerOnChange(fn: any): void;
|
78
|
-
/**
|
147
|
+
/**
|
148
|
+
* Set the function to be called when the control receives a touch event.
|
149
|
+
* @internal
|
150
|
+
*/
|
79
151
|
registerOnTouched(fn: () => void): void;
|
152
|
+
/** @internal */
|
80
153
|
validate(c: UntypedFormControl): {
|
81
154
|
dateFormatError: {
|
82
155
|
given: string | null;
|
@@ -84,5 +157,5 @@ export declare class DateInputComponent implements OnChanges, OnInit, OnDestroy,
|
|
84
157
|
};
|
85
158
|
} | null;
|
86
159
|
static ɵfac: i0.ɵɵFactoryDeclaration<DateInputComponent, [null, null, { optional: true; }]>;
|
87
|
-
static ɵcmp: i0.ɵɵComponentDeclaration<DateInputComponent, "lx-date-input", never, { "date": { "alias": "date"; "required": false; }; "dateString": { "alias": "dateString"; "required": false; }; "valueAccessor": { "alias": "valueAccessor"; "required": false; }; "inputId": { "alias": "inputId"; "required": false; }; "renderingStyle": { "alias": "renderingStyle"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "cdk": { "alias": "cdk"; "required": false; }; "datepickerMode": { "alias": "datepickerMode"; "required": false; }; "initDateString": { "alias": "initDateString"; "required": false; }; "minDate": { "alias": "minDate"; "required": false; }; "maxDate": { "alias": "maxDate"; "required": false; }; "minMode": { "alias": "minMode"; "required": false; }; "maxMode": { "alias": "maxMode"; "required": false; }; "showWeeks": { "alias": "showWeeks"; "required": false; }; "formatDay": { "alias": "formatDay"; "required": false; }; "formatMonth": { "alias": "formatMonth"; "required": false; }; "formatYear": { "alias": "formatYear"; "required": false; }; "formatDayHeader": { "alias": "formatDayHeader"; "required": false; }; "formatDayTitle": { "alias": "formatDayTitle"; "required": false; }; "formatMonthTitle": { "alias": "formatMonthTitle"; "required": false; }; "startingDay": { "alias": "startingDay"; "required": false; }; "yearRange": { "alias": "yearRange"; "required": false; }; "onlyCurrentMonth": { "alias": "onlyCurrentMonth"; "required": false; }; "shortcutPropagation": { "alias": "shortcutPropagation"; "required": false; }; "customClass": { "alias": "customClass"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "dateDisabled": { "alias": "dateDisabled"; "required": false; }; "autoFocus": { "alias": "autoFocus"; "required": false; }; "markInvalid": { "alias": "markInvalid"; "required": false; }; }, { "
|
160
|
+
static ɵcmp: i0.ɵɵComponentDeclaration<DateInputComponent, "lx-date-input", never, { "date": { "alias": "date"; "required": false; }; "dateString": { "alias": "dateString"; "required": false; }; "valueAccessor": { "alias": "valueAccessor"; "required": false; }; "inputId": { "alias": "inputId"; "required": false; }; "renderingStyle": { "alias": "renderingStyle"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "cdk": { "alias": "cdk"; "required": false; }; "datepickerMode": { "alias": "datepickerMode"; "required": false; }; "initDateString": { "alias": "initDateString"; "required": false; }; "minDate": { "alias": "minDate"; "required": false; }; "maxDate": { "alias": "maxDate"; "required": false; }; "minMode": { "alias": "minMode"; "required": false; }; "maxMode": { "alias": "maxMode"; "required": false; }; "showWeeks": { "alias": "showWeeks"; "required": false; }; "formatDay": { "alias": "formatDay"; "required": false; }; "formatMonth": { "alias": "formatMonth"; "required": false; }; "formatYear": { "alias": "formatYear"; "required": false; }; "formatDayHeader": { "alias": "formatDayHeader"; "required": false; }; "formatDayTitle": { "alias": "formatDayTitle"; "required": false; }; "formatMonthTitle": { "alias": "formatMonthTitle"; "required": false; }; "startingDay": { "alias": "startingDay"; "required": false; }; "yearRange": { "alias": "yearRange"; "required": false; }; "onlyCurrentMonth": { "alias": "onlyCurrentMonth"; "required": false; }; "shortcutPropagation": { "alias": "shortcutPropagation"; "required": false; }; "customClass": { "alias": "customClass"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "dateDisabled": { "alias": "dateDisabled"; "required": false; }; "autoFocus": { "alias": "autoFocus"; "required": false; }; "markInvalid": { "alias": "markInvalid"; "required": false; }; }, { "closeDateInput": "closeDateInput"; "dateStringChange": "dateStringChange"; "dateChange": "dateChange"; }, ["dateStringTemplate"], never, true, never>;
|
88
161
|
}
|