@leanix/components 0.4.108 → 0.4.109
Sign up to get free protection for your applications and to get access to all the features.
- package/esm2022/lib/tab-ui/components/tab/tab.component.mjs +54 -10
- package/esm2022/lib/tab-ui/components/tab-group/tab-group-key-codes.enum.mjs +12 -0
- package/esm2022/lib/tab-ui/components/tab-group/tab-group.component.mjs +76 -9
- package/fesm2022/leanix-components.mjs +140 -24
- package/fesm2022/leanix-components.mjs.map +1 -1
- package/lib/tab-ui/components/tab/tab.component.d.ts +23 -6
- package/lib/tab-ui/components/tab-group/tab-group-key-codes.enum.d.ts +10 -0
- package/lib/tab-ui/components/tab-group/tab-group.component.d.ts +16 -3
- package/package.json +1 -1
@@ -1,9 +1,12 @@
|
|
1
1
|
import { TemplatePortal } from '@angular/cdk/portal';
|
2
|
-
import { ChangeDetectorRef, EventEmitter } from '@angular/core';
|
3
|
-
import { RouterLinkActive } from '@angular/router';
|
2
|
+
import { ChangeDetectorRef, ElementRef, EventEmitter } from '@angular/core';
|
3
|
+
import { ActivatedRoute, Router, RouterLinkActive } from '@angular/router';
|
4
|
+
import { Observable } from 'rxjs';
|
4
5
|
import * as i0 from "@angular/core";
|
5
6
|
export declare class TabComponent {
|
6
7
|
private cd;
|
8
|
+
private router;
|
9
|
+
private activatedRoute;
|
7
10
|
/**
|
8
11
|
* The icon input takes a font awesome selector
|
9
12
|
* WARNING: Currently this component does not support using an icon together with a label or counter.
|
@@ -11,7 +14,12 @@ export declare class TabComponent {
|
|
11
14
|
icon?: string;
|
12
15
|
label: string;
|
13
16
|
title?: string;
|
14
|
-
|
17
|
+
/**
|
18
|
+
* In some parts of the application, we are passing a plain string to the tabLink input, whereas in
|
19
|
+
* most parts, the input is passed as an array. The RouterLink directive also accepts both types,
|
20
|
+
* therefore we are using type of the input as string | any[].
|
21
|
+
*/
|
22
|
+
tabLink?: string | any[];
|
15
23
|
counter?: number;
|
16
24
|
routerLinkActiveOptions: {
|
17
25
|
exact: boolean;
|
@@ -22,15 +30,24 @@ export declare class TabComponent {
|
|
22
30
|
background: 'white' | 'gray';
|
23
31
|
disabled: boolean;
|
24
32
|
switch: EventEmitter<any>;
|
25
|
-
|
33
|
+
keyDownAction: EventEmitter<KeyboardEvent>;
|
26
34
|
tabId: string;
|
27
35
|
content?: TemplatePortal<any>;
|
36
|
+
tabElement?: ElementRef<HTMLElement>;
|
37
|
+
routerLinkActive$: Observable<RouterLinkActive>;
|
28
38
|
routerLinkActive?: RouterLinkActive;
|
39
|
+
/**
|
40
|
+
* Used by the lx-tab-group to be notified when a lx-tab that is a link
|
41
|
+
* is set to active by the Angular router.
|
42
|
+
*/
|
43
|
+
routerLinkActiveChange$: Observable<boolean>;
|
29
44
|
set isActive(value: boolean);
|
30
45
|
get isActive(): boolean;
|
31
46
|
private _isActive;
|
32
|
-
constructor(cd: ChangeDetectorRef);
|
47
|
+
constructor(cd: ChangeDetectorRef, router: Router, activatedRoute: ActivatedRoute);
|
33
48
|
select(): void;
|
49
|
+
setFocus(): void;
|
50
|
+
handleKeyDown(event: KeyboardEvent): void;
|
34
51
|
static ɵfac: i0.ɵɵFactoryDeclaration<TabComponent, never>;
|
35
|
-
static ɵcmp: i0.ɵɵComponentDeclaration<TabComponent, "lx-tab", never, { "icon": { "alias": "icon"; "required": false; }; "label": { "alias": "label"; "required": false; }; "title": { "alias": "title"; "required": false; }; "tabLink": { "alias": "tabLink"; "required": false; }; "counter": { "alias": "counter"; "required": false; }; "routerLinkActiveOptions": { "alias": "routerLinkActiveOptions"; "required": false; }; "counterBadgeSize": { "alias": "counterBadgeSize"; "required": false; }; "noMargin": { "alias": "noMargin"; "required": false; }; "noLeftMarginForFirstTab": { "alias": "noLeftMarginForFirstTab"; "required": false; }; "background": { "alias": "background"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; }, { "switch": "switch"; }, never, ["*"], true, never>;
|
52
|
+
static ɵcmp: i0.ɵɵComponentDeclaration<TabComponent, "lx-tab", never, { "icon": { "alias": "icon"; "required": false; }; "label": { "alias": "label"; "required": false; }; "title": { "alias": "title"; "required": false; }; "tabLink": { "alias": "tabLink"; "required": false; }; "counter": { "alias": "counter"; "required": false; }; "routerLinkActiveOptions": { "alias": "routerLinkActiveOptions"; "required": false; }; "counterBadgeSize": { "alias": "counterBadgeSize"; "required": false; }; "noMargin": { "alias": "noMargin"; "required": false; }; "noLeftMarginForFirstTab": { "alias": "noLeftMarginForFirstTab"; "required": false; }; "background": { "alias": "background"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; }, { "switch": "switch"; "keyDownAction": "keyDownAction"; }, never, ["*"], true, never>;
|
36
53
|
}
|
@@ -1,13 +1,23 @@
|
|
1
|
-
import { AfterContentInit, ChangeDetectorRef, EventEmitter, OnChanges, OnDestroy, QueryList, SimpleChanges } from '@angular/core';
|
2
|
-
import { Subject } from 'rxjs';
|
1
|
+
import { AfterContentInit, ChangeDetectorRef, ElementRef, EventEmitter, OnChanges, OnDestroy, QueryList, SimpleChanges } from '@angular/core';
|
2
|
+
import { Observable, Subject } from 'rxjs';
|
3
3
|
import { TabComponent } from '../tab/tab.component';
|
4
4
|
import * as i0 from "@angular/core";
|
5
5
|
export declare class TabGroupComponent implements OnChanges, AfterContentInit, OnDestroy {
|
6
6
|
private cd;
|
7
7
|
isCentered: boolean;
|
8
|
+
/**
|
9
|
+
* The tab whose content should be displayed.
|
10
|
+
*/
|
8
11
|
selectedIndex: number;
|
9
12
|
indexChange: EventEmitter<number>;
|
13
|
+
tabsQueryList$: Observable<QueryList<TabComponent>>;
|
10
14
|
tabsQueryList?: QueryList<TabComponent>;
|
15
|
+
tabListElement?: ElementRef<HTMLElement>;
|
16
|
+
/**
|
17
|
+
* The tab that is currently focused via keyboard.
|
18
|
+
*/
|
19
|
+
focusedIndex: number;
|
20
|
+
get tabIds(): string[];
|
11
21
|
private get tabs();
|
12
22
|
get activeTabPortal(): import("@angular/cdk/portal").TemplatePortal<any> | undefined;
|
13
23
|
readonly destroyed$: Subject<void>;
|
@@ -15,8 +25,11 @@ export declare class TabGroupComponent implements OnChanges, AfterContentInit, O
|
|
15
25
|
ngOnChanges(changes: SimpleChanges): void;
|
16
26
|
ngAfterContentInit(): void;
|
17
27
|
ngOnDestroy(): void;
|
18
|
-
|
28
|
+
onFocusOut(event: any): void;
|
19
29
|
switchTo(tab: TabComponent): void;
|
30
|
+
handleKeyDown(event: KeyboardEvent): void;
|
31
|
+
private focusTab;
|
32
|
+
private listenToFirstTabSelectByAngularRouterForTabLinks;
|
20
33
|
static ɵfac: i0.ɵɵFactoryDeclaration<TabGroupComponent, never>;
|
21
34
|
static ɵcmp: i0.ɵɵComponentDeclaration<TabGroupComponent, "lx-tab-group", never, { "isCentered": { "alias": "isCentered"; "required": false; }; "selectedIndex": { "alias": "selectedIndex"; "required": false; }; }, { "indexChange": "indexChange"; }, ["tabsQueryList"], ["*"], true, never>;
|
22
35
|
}
|