@skyux/tabs 7.0.0-beta.0 → 7.0.0-beta.2
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/documentation.json +481 -372
- package/esm2020/lib/modules/tabs/tab-button-adapter.service.mjs +16 -0
- package/esm2020/lib/modules/tabs/tab-button-view-model.mjs +2 -0
- package/esm2020/lib/modules/tabs/tab-button.component.mjs +65 -10
- package/esm2020/lib/modules/tabs/tabset-nav-button.component.mjs +18 -22
- package/esm2020/lib/modules/tabs/tabset.component.mjs +18 -13
- package/esm2020/lib/modules/tabs/tabset.service.mjs +63 -1
- package/esm2020/lib/modules/vertical-tabset/vertical-tabset.component.mjs +3 -3
- package/fesm2015/skyux-tabs.mjs +274 -148
- package/fesm2015/skyux-tabs.mjs.map +1 -1
- package/fesm2020/skyux-tabs.mjs +273 -147
- package/fesm2020/skyux-tabs.mjs.map +1 -1
- package/lib/modules/tabs/tab-button-adapter.service.d.ts +10 -0
- package/lib/modules/tabs/tab-button-view-model.d.ts +15 -0
- package/lib/modules/tabs/tab-button.component.d.ts +17 -4
- package/lib/modules/tabs/tabset-nav-button.component.d.ts +1 -0
- package/lib/modules/tabs/tabset.component.d.ts +6 -18
- package/lib/modules/tabs/tabset.service.d.ts +11 -0
- package/package.json +9 -9
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import { ElementRef } from '@angular/core';
|
|
2
|
+
import * as i0 from "@angular/core";
|
|
3
|
+
/**
|
|
4
|
+
* @internal
|
|
5
|
+
*/
|
|
6
|
+
export declare class SkyTabButtonAdapterService {
|
|
7
|
+
focusButtonLink(buttonEl: ElementRef): void;
|
|
8
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<SkyTabButtonAdapterService, never>;
|
|
9
|
+
static ɵprov: i0.ɵɵInjectableDeclaration<SkyTabButtonAdapterService>;
|
|
10
|
+
}
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import { SkyTabIndex } from './tab-index';
|
|
2
|
+
/**
|
|
3
|
+
* @internal
|
|
4
|
+
*/
|
|
5
|
+
export declare type TabButtonViewModel = {
|
|
6
|
+
active: boolean;
|
|
7
|
+
ariaControls: string;
|
|
8
|
+
buttonHref: string;
|
|
9
|
+
buttonId: string;
|
|
10
|
+
buttonText: string;
|
|
11
|
+
buttonTextCount: string;
|
|
12
|
+
closeable: boolean;
|
|
13
|
+
disabled: boolean;
|
|
14
|
+
tabIndex: SkyTabIndex;
|
|
15
|
+
};
|
|
@@ -1,10 +1,14 @@
|
|
|
1
|
-
import { EventEmitter } from '@angular/core';
|
|
1
|
+
import { AfterViewInit, ChangeDetectorRef, ElementRef, EventEmitter, OnDestroy } from '@angular/core';
|
|
2
|
+
import { SkyTabButtonAdapterService } from './tab-button-adapter.service';
|
|
3
|
+
import { SkyTabIndex } from './tab-index';
|
|
2
4
|
import { SkyTabsetStyle } from './tabset-style';
|
|
5
|
+
import { SkyTabsetService } from './tabset.service';
|
|
3
6
|
import * as i0 from "@angular/core";
|
|
4
7
|
/**
|
|
5
8
|
* @internal
|
|
6
9
|
*/
|
|
7
|
-
export declare class SkyTabButtonComponent {
|
|
10
|
+
export declare class SkyTabButtonComponent implements AfterViewInit, OnDestroy {
|
|
11
|
+
#private;
|
|
8
12
|
active: boolean;
|
|
9
13
|
ariaControls: string;
|
|
10
14
|
buttonHref: string;
|
|
@@ -13,12 +17,21 @@ export declare class SkyTabButtonComponent {
|
|
|
13
17
|
buttonTextCount: string | undefined;
|
|
14
18
|
closeable: boolean;
|
|
15
19
|
disabled: boolean;
|
|
16
|
-
|
|
20
|
+
tabIndex: SkyTabIndex;
|
|
21
|
+
get tabStyle(): SkyTabsetStyle;
|
|
22
|
+
set tabStyle(style: SkyTabsetStyle | undefined);
|
|
17
23
|
buttonClick: EventEmitter<void>;
|
|
18
24
|
closeClick: EventEmitter<void>;
|
|
25
|
+
constructor(elementRef: ElementRef, adapterService: SkyTabButtonAdapterService, changeDetectorRef: ChangeDetectorRef, tabsetService: SkyTabsetService);
|
|
26
|
+
elementRole: string | undefined;
|
|
27
|
+
closeBtnTabIndex: string;
|
|
28
|
+
ngAfterViewInit(): void;
|
|
29
|
+
ngOnDestroy(): void;
|
|
19
30
|
onButtonClick(event: any): void;
|
|
20
31
|
onTabButtonKeyDown(event: KeyboardEvent): void;
|
|
21
32
|
onCloseClick(event: any): void;
|
|
33
|
+
focusBtn(): void;
|
|
34
|
+
onFocus(): void;
|
|
22
35
|
static ɵfac: i0.ɵɵFactoryDeclaration<SkyTabButtonComponent, never>;
|
|
23
|
-
static ɵcmp: i0.ɵɵComponentDeclaration<SkyTabButtonComponent, "sky-tab-button", never, { "active": "active"; "ariaControls": "ariaControls"; "buttonHref": "buttonHref"; "buttonId": "buttonId"; "buttonText": "buttonText"; "buttonTextCount": "buttonTextCount"; "closeable": "closeable"; "disabled": "disabled"; "tabStyle": "tabStyle"; }, { "buttonClick": "buttonClick"; "closeClick": "closeClick"; }, never, never, false>;
|
|
36
|
+
static ɵcmp: i0.ɵɵComponentDeclaration<SkyTabButtonComponent, "sky-tab-button", never, { "active": "active"; "ariaControls": "ariaControls"; "buttonHref": "buttonHref"; "buttonId": "buttonId"; "buttonText": "buttonText"; "buttonTextCount": "buttonTextCount"; "closeable": "closeable"; "disabled": "disabled"; "tabIndex": "tabIndex"; "tabStyle": "tabStyle"; }, { "buttonClick": "buttonClick"; "closeClick": "closeClick"; }, never, never, false>;
|
|
24
37
|
}
|
|
@@ -9,6 +9,7 @@ export declare class SkyTabsetNavButtonComponent implements OnDestroy {
|
|
|
9
9
|
* Specifies the tabset wizard component to associate with the nav button.
|
|
10
10
|
* @required
|
|
11
11
|
*/
|
|
12
|
+
get tabset(): SkyTabsetComponent;
|
|
12
13
|
set tabset(value: SkyTabsetComponent);
|
|
13
14
|
/**
|
|
14
15
|
* Specifies the type of nav button to include.
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import { AfterViewInit, ChangeDetectorRef, ElementRef, EventEmitter, OnDestroy, QueryList } from '@angular/core';
|
|
2
|
+
import { TabButtonViewModel } from './tab-button-view-model';
|
|
2
3
|
import { SkyTabIndex } from './tab-index';
|
|
3
4
|
import { SkyTabComponent } from './tab.component';
|
|
4
5
|
import { SkyTabsetAdapterService } from './tabset-adapter.service';
|
|
@@ -8,22 +9,7 @@ import { SkyTabsetStyle } from './tabset-style';
|
|
|
8
9
|
import { SkyTabsetTabIndexesChange } from './tabset-tab-indexes-change';
|
|
9
10
|
import { SkyTabsetService } from './tabset.service';
|
|
10
11
|
import * as i0 from "@angular/core";
|
|
11
|
-
/**
|
|
12
|
-
* @internal
|
|
13
|
-
*/
|
|
14
|
-
interface TabButtonViewModel {
|
|
15
|
-
active: boolean;
|
|
16
|
-
ariaControls: string;
|
|
17
|
-
buttonHref: string;
|
|
18
|
-
buttonId: string;
|
|
19
|
-
buttonText: string;
|
|
20
|
-
buttonTextCount: string;
|
|
21
|
-
closeable: boolean;
|
|
22
|
-
disabled: boolean;
|
|
23
|
-
tabIndex: SkyTabIndex;
|
|
24
|
-
}
|
|
25
12
|
export declare class SkyTabsetComponent implements AfterViewInit, OnDestroy {
|
|
26
|
-
#private;
|
|
27
13
|
private changeDetector;
|
|
28
14
|
private elementRef;
|
|
29
15
|
private adapterService;
|
|
@@ -85,8 +71,6 @@ export declare class SkyTabsetComponent implements AfterViewInit, OnDestroy {
|
|
|
85
71
|
tabIndexesChange: EventEmitter<SkyTabsetTabIndexesChange>;
|
|
86
72
|
set tabDisplayMode(value: SkyTabsetButtonsDisplayMode);
|
|
87
73
|
get tabDisplayMode(): SkyTabsetButtonsDisplayMode;
|
|
88
|
-
get hasFinishButton(): boolean;
|
|
89
|
-
set hasFinishButton(value: boolean);
|
|
90
74
|
tabs: QueryList<SkyTabComponent>;
|
|
91
75
|
dropdownTriggerButtonText: string;
|
|
92
76
|
/**
|
|
@@ -95,6 +79,7 @@ export declare class SkyTabsetComponent implements AfterViewInit, OnDestroy {
|
|
|
95
79
|
*/
|
|
96
80
|
lastActiveTabIndex: SkyTabIndex;
|
|
97
81
|
tabButtons: TabButtonViewModel[];
|
|
82
|
+
elementRole: string | undefined;
|
|
98
83
|
private ngUnsubscribe;
|
|
99
84
|
private tabComponentsStateChangeUnsubscribe;
|
|
100
85
|
private _active;
|
|
@@ -109,6 +94,10 @@ export declare class SkyTabsetComponent implements AfterViewInit, OnDestroy {
|
|
|
109
94
|
onTabButtonClick(tabButton: TabButtonViewModel): void;
|
|
110
95
|
onNewTabClick(): void;
|
|
111
96
|
onOpenTabClick(): void;
|
|
97
|
+
onRightKeyDown(): void;
|
|
98
|
+
onLeftKeyDown(): void;
|
|
99
|
+
onHomeKeyDown(): void;
|
|
100
|
+
onEndKeyDown(): void;
|
|
112
101
|
/**
|
|
113
102
|
* Sets the initial active tab index based on the following criteria.
|
|
114
103
|
* 1. Does the URL include a query param that reflects this tabset's active tab?
|
|
@@ -146,4 +135,3 @@ export declare class SkyTabsetComponent implements AfterViewInit, OnDestroy {
|
|
|
146
135
|
static ɵfac: i0.ɵɵFactoryDeclaration<SkyTabsetComponent, never>;
|
|
147
136
|
static ɵcmp: i0.ɵɵComponentDeclaration<SkyTabsetComponent, "sky-tabset", never, { "active": "active"; "ariaLabel": "ariaLabel"; "ariaLabelledBy": "ariaLabelledBy"; "permalinkId": "permalinkId"; "tabStyle": "tabStyle"; }, { "activeChange": "activeChange"; "newTab": "newTab"; "openTab": "openTab"; "tabIndexesChange": "tabIndexesChange"; }, ["tabs"], ["*"], false>;
|
|
148
137
|
}
|
|
149
|
-
export {};
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import { Observable } from 'rxjs';
|
|
2
|
+
import { TabButtonViewModel } from './tab-button-view-model';
|
|
2
3
|
import { SkyTabIndex } from './tab-index';
|
|
3
4
|
import { SkyTabsetActiveTabUnregisteredArgs } from './tabset-active-tab-unregistered-args';
|
|
4
5
|
import * as i0 from "@angular/core";
|
|
@@ -8,8 +9,11 @@ import * as i0 from "@angular/core";
|
|
|
8
9
|
export declare class SkyTabsetService {
|
|
9
10
|
get activeTabUnregistered(): Observable<SkyTabsetActiveTabUnregisteredArgs>;
|
|
10
11
|
get activeTabIndex(): Observable<SkyTabIndex>;
|
|
12
|
+
get focusedTabBtnIndex(): Observable<SkyTabIndex>;
|
|
11
13
|
currentActiveTabIndex: SkyTabIndex;
|
|
14
|
+
currentFocusedTabBtnIndex: SkyTabIndex;
|
|
12
15
|
private _activeTabIndex;
|
|
16
|
+
private _focusedTabBtnIndex;
|
|
13
17
|
private _activeTabUnregistered;
|
|
14
18
|
private tabs;
|
|
15
19
|
private tabCounter;
|
|
@@ -19,6 +23,11 @@ export declare class SkyTabsetService {
|
|
|
19
23
|
setActiveTabIndex(value: SkyTabIndex, config?: {
|
|
20
24
|
emitChange: boolean;
|
|
21
25
|
}): void;
|
|
26
|
+
focusNextTabBtn(tabButtons: TabButtonViewModel[]): void;
|
|
27
|
+
focusPrevTabBtn(tabButtons: TabButtonViewModel[]): void;
|
|
28
|
+
focusFirstOrNearestTabBtn(tabButtons: TabButtonViewModel[]): void;
|
|
29
|
+
focusLastOrNearestTabBtn(tabButtons: TabButtonViewModel[]): void;
|
|
30
|
+
setFocusedTabBtnIndex(tabIndex: SkyTabIndex): void;
|
|
22
31
|
/**
|
|
23
32
|
* Registers a tab component.
|
|
24
33
|
*/
|
|
@@ -49,6 +58,8 @@ export declare class SkyTabsetService {
|
|
|
49
58
|
*/
|
|
50
59
|
activateNearestTab(arrayIndex: number): void;
|
|
51
60
|
private isTabIndexActive;
|
|
61
|
+
private getNextTabArrayIndex;
|
|
62
|
+
private getPrevTabArrayIndex;
|
|
52
63
|
static ɵfac: i0.ɵɵFactoryDeclaration<SkyTabsetService, never>;
|
|
53
64
|
static ɵprov: i0.ɵɵInjectableDeclaration<SkyTabsetService>;
|
|
54
65
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@skyux/tabs",
|
|
3
|
-
"version": "7.0.0-beta.
|
|
3
|
+
"version": "7.0.0-beta.2",
|
|
4
4
|
"author": "Blackbaud, Inc.",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"blackbaud",
|
|
@@ -45,14 +45,14 @@
|
|
|
45
45
|
"@angular/core": "^14.2.0",
|
|
46
46
|
"@angular/platform-browser": "^14.2.0",
|
|
47
47
|
"@angular/router": "^14.2.0",
|
|
48
|
-
"@skyux-sdk/testing": "7.0.0-beta.
|
|
49
|
-
"@skyux/animations": "7.0.0-beta.
|
|
50
|
-
"@skyux/core": "7.0.0-beta.
|
|
51
|
-
"@skyux/forms": "7.0.0-beta.
|
|
52
|
-
"@skyux/i18n": "7.0.0-beta.
|
|
53
|
-
"@skyux/indicators": "7.0.0-beta.
|
|
54
|
-
"@skyux/popovers": "7.0.0-beta.
|
|
55
|
-
"@skyux/theme": "7.0.0-beta.
|
|
48
|
+
"@skyux-sdk/testing": "7.0.0-beta.2",
|
|
49
|
+
"@skyux/animations": "7.0.0-beta.2",
|
|
50
|
+
"@skyux/core": "7.0.0-beta.2",
|
|
51
|
+
"@skyux/forms": "7.0.0-beta.2",
|
|
52
|
+
"@skyux/i18n": "7.0.0-beta.2",
|
|
53
|
+
"@skyux/indicators": "7.0.0-beta.2",
|
|
54
|
+
"@skyux/popovers": "7.0.0-beta.2",
|
|
55
|
+
"@skyux/theme": "7.0.0-beta.2"
|
|
56
56
|
},
|
|
57
57
|
"dependencies": {
|
|
58
58
|
"tslib": "^2.3.1"
|