@leanix/components 0.4.108 → 0.4.110

package/lib/tab-ui/components/tab/tab.component.d.ts

@@ -1,9 +1,12 @@
 import { TemplatePortal } from '@angular/cdk/portal';
-import { ChangeDetectorRef, EventEmitter } from '@angular/core';
-import { RouterLinkActive } from '@angular/router';
+import { ChangeDetectorRef, ElementRef, EventEmitter } from '@angular/core';
+import { ActivatedRoute, Router, RouterLinkActive } from '@angular/router';
+import { Observable } from 'rxjs';
 import * as i0 from "@angular/core";
 export declare class TabComponent {
     private cd;
+    private router;
+    private activatedRoute;
     /**
      * The icon input takes a font awesome selector
      * WARNING: Currently this component does not support using an icon together with a label or counter.
@@ -11,7 +14,12 @@ export declare class TabComponent {
     icon?: string;
     label: string;
     title?: string;
-    tabLink?: string;
+    /**
+     * In some parts of the application, we are passing a plain string to the tabLink input, whereas in
+     * most parts, the input is passed as an array. The RouterLink directive also accepts both types,
+     * therefore we are using type of the input as string | any[].
+     */
+    tabLink?: string | any[];
     counter?: number;
     routerLinkActiveOptions: {
         exact: boolean;
@@ -22,15 +30,24 @@ export declare class TabComponent {
     background: 'white' | 'gray';
     disabled: boolean;
     switch: EventEmitter<any>;
-    tabPanelId: string;
+    keyDownAction: EventEmitter<KeyboardEvent>;
     tabId: string;
     content?: TemplatePortal<any>;
+    tabElement?: ElementRef<HTMLElement>;
+    routerLinkActive$: Observable<RouterLinkActive>;
     routerLinkActive?: RouterLinkActive;
+    /**
+     * Used by the lx-tab-group to be notified when a lx-tab that is a link
+     * is set to active by the Angular router.
+     */
+    routerLinkActiveChange$: Observable<boolean>;
     set isActive(value: boolean);
     get isActive(): boolean;
     private _isActive;
-    constructor(cd: ChangeDetectorRef);
+    constructor(cd: ChangeDetectorRef, router: Router, activatedRoute: ActivatedRoute);
     select(): void;
+    setFocus(): void;
+    handleKeyDown(event: KeyboardEvent): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<TabComponent, never>;
-    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>;
+    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>;
 }

package/lib/tab-ui/components/tab-group/tab-group-key-codes.enum.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Key codes that we listen to for
+ * user action on our lx-tab-group
+ */
+export declare enum LxTabGroupKeyCode {
+    ArrowRight = "ArrowRight",
+    ArrowLeft = "ArrowLeft",
+    Home = "Home",
+    End = "End"
+}

package/lib/tab-ui/components/tab-group/tab-group.component.d.ts

@@ -1,13 +1,23 @@
-import { AfterContentInit, ChangeDetectorRef, EventEmitter, OnChanges, OnDestroy, QueryList, SimpleChanges } from '@angular/core';
-import { Subject } from 'rxjs';
+import { AfterContentInit, ChangeDetectorRef, ElementRef, EventEmitter, OnChanges, OnDestroy, QueryList, SimpleChanges } from '@angular/core';
+import { Observable, Subject } from 'rxjs';
 import { TabComponent } from '../tab/tab.component';
 import * as i0 from "@angular/core";
 export declare class TabGroupComponent implements OnChanges, AfterContentInit, OnDestroy {
     private cd;
     isCentered: boolean;
+    /**
+     * The tab whose content should be displayed.
+     */
     selectedIndex: number;
     indexChange: EventEmitter<number>;
+    tabsQueryList$: Observable<QueryList<TabComponent>>;
     tabsQueryList?: QueryList<TabComponent>;
+    tabListElement?: ElementRef<HTMLElement>;
+    /**
+     * The tab that is currently focused via keyboard.
+     */
+    focusedIndex: number;
+    get tabIds(): string[];
     private get tabs();
     get activeTabPortal(): import("@angular/cdk/portal").TemplatePortal<any> | undefined;
     readonly destroyed$: Subject<void>;
@@ -15,8 +25,11 @@ export declare class TabGroupComponent implements OnChanges, AfterContentInit, O
     ngOnChanges(changes: SimpleChanges): void;
     ngAfterContentInit(): void;
     ngOnDestroy(): void;
-    tabIds(): string[];
+    onFocusOut(event: any): void;
     switchTo(tab: TabComponent): void;
+    handleKeyDown(event: KeyboardEvent): void;
+    private focusTab;
+    private listenToFirstTabSelectByAngularRouterForTabLinks;
     static ɵfac: i0.ɵɵFactoryDeclaration<TabGroupComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<TabGroupComponent, "lx-tab-group", never, { "isCentered": { "alias": "isCentered"; "required": false; }; "selectedIndex": { "alias": "selectedIndex"; "required": false; }; }, { "indexChange": "indexChange"; }, ["tabsQueryList"], ["*"], true, never>;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@leanix/components",
-  "version": "0.4.108",
+  "version": "0.4.110",
   "license": "Apache-2.0",
   "author": "LeanIX GmbH",
   "repository": {