@skyux/tabs 7.5.0 → 7.6.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/documentation.json +49 -49
- package/esm2020/lib/modules/sectioned-form/sectioned-form-section.component.mjs +2 -2
- package/esm2020/lib/modules/sectioned-form/sectioned-form.component.mjs +2 -2
- package/esm2020/lib/modules/tabs/tab.component.mjs +5 -5
- package/esm2020/lib/modules/tabs/tabset-nav-button-type.mjs +1 -1
- package/esm2020/lib/modules/tabs/tabset-nav-button.component.mjs +4 -4
- package/esm2020/lib/modules/tabs/tabset-permalink.service.mjs +2 -2
- package/esm2020/lib/modules/tabs/tabset.component.mjs +2 -2
- package/esm2020/lib/modules/vertical-tabset/vertical-tab-media-query.service.mjs +5 -5
- package/esm2020/lib/modules/vertical-tabset/vertical-tab.component.mjs +6 -6
- package/esm2020/lib/modules/vertical-tabset/vertical-tabset-group.component.mjs +1 -1
- package/esm2020/lib/modules/vertical-tabset/vertical-tabset.component.mjs +3 -3
- package/esm2020/lib/modules/vertical-tabset/vertical-tabset.service.mjs +2 -2
- package/esm2020/testing/tabs/tab-fixture-tab.mjs +1 -1
- package/fesm2015/skyux-tabs.mjs +23 -23
- package/fesm2015/skyux-tabs.mjs.map +1 -1
- package/fesm2020/skyux-tabs.mjs +23 -23
- package/fesm2020/skyux-tabs.mjs.map +1 -1
- package/lib/modules/sectioned-form/sectioned-form-section.component.d.ts +3 -4
- package/lib/modules/sectioned-form/sectioned-form.component.d.ts +1 -1
- package/lib/modules/tabs/tab.component.d.ts +5 -5
- package/lib/modules/tabs/tabset-nav-button-type.d.ts +1 -1
- package/lib/modules/tabs/tabset-nav-button.component.d.ts +4 -4
- package/lib/modules/tabs/tabset-permalink.service.d.ts +1 -1
- package/lib/modules/tabs/tabset.component.d.ts +3 -3
- package/lib/modules/vertical-tabset/vertical-tab-media-query.service.d.ts +1 -1
- package/lib/modules/vertical-tabset/vertical-tab.component.d.ts +8 -8
- package/lib/modules/vertical-tabset/vertical-tabset-group.component.d.ts +3 -3
- package/lib/modules/vertical-tabset/vertical-tabset.component.d.ts +5 -5
- package/package.json +9 -9
- package/testing/tabs/tab-fixture-tab.d.ts +2 -2
|
@@ -11,17 +11,16 @@ export declare class SkySectionedFormSectionComponent implements OnInit, OnDestr
|
|
|
11
11
|
sectionTabId: string;
|
|
12
12
|
sectionContentId: string;
|
|
13
13
|
/**
|
|
14
|
-
*
|
|
14
|
+
* The section header.
|
|
15
15
|
* @required
|
|
16
16
|
*/
|
|
17
17
|
heading: string | undefined;
|
|
18
18
|
/**
|
|
19
|
-
*
|
|
20
|
-
* counter alongside the section header.
|
|
19
|
+
* The number of items within the section. A counter appears beside the section header.
|
|
21
20
|
*/
|
|
22
21
|
itemCount: number | undefined;
|
|
23
22
|
/**
|
|
24
|
-
*
|
|
23
|
+
* Whether the section is active when the form loads.
|
|
25
24
|
* @default false
|
|
26
25
|
*/
|
|
27
26
|
active: boolean | undefined;
|
|
@@ -9,7 +9,7 @@ export declare class SkySectionedFormComponent implements OnInit, OnDestroy, Aft
|
|
|
9
9
|
#private;
|
|
10
10
|
tabService: SkyVerticalTabsetService;
|
|
11
11
|
/**
|
|
12
|
-
*
|
|
12
|
+
* Whether the sectioned form loads section content during initialization so that it
|
|
13
13
|
* displays content without moving around elements in the content container.
|
|
14
14
|
* @default false
|
|
15
15
|
*/
|
|
@@ -7,7 +7,7 @@ import * as i0 from "@angular/core";
|
|
|
7
7
|
export declare class SkyTabComponent implements OnChanges, OnDestroy {
|
|
8
8
|
#private;
|
|
9
9
|
/**
|
|
10
|
-
*
|
|
10
|
+
* Whether the tab is active when the tabset loads. After initialization, the `active`
|
|
11
11
|
* property on the tabset component should be used to set the active tab.
|
|
12
12
|
* @default false
|
|
13
13
|
*/
|
|
@@ -15,12 +15,12 @@ export declare class SkyTabComponent implements OnChanges, OnDestroy {
|
|
|
15
15
|
get active(): boolean;
|
|
16
16
|
get activeChange(): Observable<void>;
|
|
17
17
|
/**
|
|
18
|
-
*
|
|
18
|
+
* Whether to disable the tab.
|
|
19
19
|
* @default false
|
|
20
20
|
*/
|
|
21
21
|
disabled: boolean | undefined;
|
|
22
22
|
/**
|
|
23
|
-
*
|
|
23
|
+
* The custom query parameter value for the tab.
|
|
24
24
|
* This works in conjunction with the tabset's `permalinkId` to distinguish
|
|
25
25
|
* the tab's unique state in the URL by generating a query parameter that is
|
|
26
26
|
* written as `?<queryParam>-active-tab=<sanitized-tab-heading`.
|
|
@@ -36,7 +36,7 @@ export declare class SkyTabComponent implements OnChanges, OnDestroy {
|
|
|
36
36
|
*/
|
|
37
37
|
tabHeaderCount: string | undefined;
|
|
38
38
|
/**
|
|
39
|
-
*
|
|
39
|
+
* The tab header.
|
|
40
40
|
* When using tabs as the main navigation on a page,
|
|
41
41
|
* use [the Angular `Title` service](https://angular.io/docs/ts/latest/cookbook/set-document-title.html)
|
|
42
42
|
* and [the SKY UX `title` configuration property](https://developer.blackbaud.com/skyux/learn/reference/configuration#app)
|
|
@@ -46,7 +46,7 @@ export declare class SkyTabComponent implements OnChanges, OnDestroy {
|
|
|
46
46
|
set tabHeading(value: string | undefined);
|
|
47
47
|
get tabHeading(): string | undefined;
|
|
48
48
|
/**
|
|
49
|
-
*
|
|
49
|
+
* The unique identifier for the tab.
|
|
50
50
|
* If not defined, the identifier is set to the position of the tab on load, starting with `0`.
|
|
51
51
|
*/
|
|
52
52
|
set tabIndex(value: SkyTabIndex | undefined);
|
|
@@ -7,24 +7,24 @@ import * as i0 from "@angular/core";
|
|
|
7
7
|
export declare class SkyTabsetNavButtonComponent implements OnDestroy {
|
|
8
8
|
#private;
|
|
9
9
|
/**
|
|
10
|
-
*
|
|
10
|
+
* The tabset wizard component to associate with the nav button.
|
|
11
11
|
* @required
|
|
12
12
|
*/
|
|
13
13
|
get tabset(): SkyTabsetComponent | undefined;
|
|
14
14
|
set tabset(value: SkyTabsetComponent | undefined);
|
|
15
15
|
/**
|
|
16
|
-
*
|
|
16
|
+
* The type of nav button to include.
|
|
17
17
|
* @required
|
|
18
18
|
*/
|
|
19
19
|
get buttonType(): SkyTabsetNavButtonType | string | undefined;
|
|
20
20
|
set buttonType(value: SkyTabsetNavButtonType | string | undefined);
|
|
21
21
|
/**
|
|
22
|
-
*
|
|
22
|
+
* The label to display on the nav button. The following are the defaults for each `buttonType`:
|
|
23
23
|
* `next` = "Next", `previous` = "Previous", `finish` = "Finish"
|
|
24
24
|
*/
|
|
25
25
|
buttonText?: string | undefined;
|
|
26
26
|
/**
|
|
27
|
-
*
|
|
27
|
+
* Whether to disable the nav button.
|
|
28
28
|
* Defaults to the disabled state of the next tab for `next`, the existence of a previous tab for `previous`,
|
|
29
29
|
* and false for `finish`.
|
|
30
30
|
*/
|
|
@@ -25,7 +25,7 @@ export declare class SkyTabsetPermalinkService implements OnDestroy {
|
|
|
25
25
|
*/
|
|
26
26
|
clearParam(name: string): void;
|
|
27
27
|
/**
|
|
28
|
-
* Returns a relative URL that includes the provided query parameter. The value is
|
|
28
|
+
* Returns a relative URL that includes the provided query parameter. The value is intended to be
|
|
29
29
|
* used by an HTML anchor element.
|
|
30
30
|
*/
|
|
31
31
|
getParamHref(name: string | undefined, value: string): string | null;
|
|
@@ -17,13 +17,13 @@ export declare class SkyTabsetComponent implements AfterViewInit, OnDestroy {
|
|
|
17
17
|
set active(value: SkyTabIndex | undefined);
|
|
18
18
|
get active(): SkyTabIndex | undefined;
|
|
19
19
|
/**
|
|
20
|
-
*
|
|
20
|
+
* The ARIA label for the tabset. This sets the tabset's `aria-label` attribute
|
|
21
21
|
* [to support accessibility](https://developer.blackbaud.com/skyux/learn/accessibility).
|
|
22
22
|
* If the tabset includes a visible label, use `ariaLabelledBy` instead.
|
|
23
23
|
*/
|
|
24
24
|
ariaLabel: string | undefined;
|
|
25
25
|
/**
|
|
26
|
-
*
|
|
26
|
+
* The HTML element ID (without the leading `#`) of the element that labels
|
|
27
27
|
* the tabset. This sets the tabset's `aria-labelledby` attribute
|
|
28
28
|
* [to support accessibility](https://developer.blackbaud.com/skyux/learn/accessibility).
|
|
29
29
|
* If the tabset does not include a visible label, use `ariaLabel` instead.
|
|
@@ -39,7 +39,7 @@ export declare class SkyTabsetComponent implements AfterViewInit, OnDestroy {
|
|
|
39
39
|
set permalinkId(value: string | undefined);
|
|
40
40
|
get permalinkId(): string;
|
|
41
41
|
/**
|
|
42
|
-
*
|
|
42
|
+
* The behavior for a series of tabs.
|
|
43
43
|
* @default "tabs"
|
|
44
44
|
*/
|
|
45
45
|
set tabStyle(value: SkyTabsetStyle | undefined);
|
|
@@ -10,7 +10,7 @@ export declare class SkyVerticalTabMediaQueryService {
|
|
|
10
10
|
constructor();
|
|
11
11
|
subscribe(listener: SkyMediaQueryListener): Subscription;
|
|
12
12
|
setBreakpointForWidth(width: number): void;
|
|
13
|
-
|
|
13
|
+
isWidthWithinBreakpoint(width: number, breakpoint: SkyMediaBreakpoints): boolean;
|
|
14
14
|
destroy(): void;
|
|
15
15
|
static ɵfac: i0.ɵɵFactoryDeclaration<SkyVerticalTabMediaQueryService, never>;
|
|
16
16
|
static ɵprov: i0.ɵɵInjectableDeclaration<SkyVerticalTabMediaQueryService>;
|
|
@@ -7,18 +7,18 @@ import * as i0 from "@angular/core";
|
|
|
7
7
|
export declare class SkyVerticalTabComponent implements OnInit, OnDestroy {
|
|
8
8
|
#private;
|
|
9
9
|
/**
|
|
10
|
-
*
|
|
10
|
+
* Whether the tab is active when the tabset loads.
|
|
11
11
|
*/
|
|
12
12
|
active: boolean | undefined;
|
|
13
13
|
/**
|
|
14
|
-
*
|
|
14
|
+
* The HTML element ID (without the leading `#`) of the element that contains
|
|
15
15
|
* the content that the vertical tab displays, which corresponds to the `tabId`. This property
|
|
16
16
|
* [supports accessibility rules for disclosures](https://www.w3.org/TR/wai-aria-practices-1.1/#disclosure).
|
|
17
17
|
* @deprecated Now that the vertical tabs provide aria labels automatically, this input is no longer necessary.
|
|
18
18
|
*/
|
|
19
19
|
ariaControls: string | undefined;
|
|
20
20
|
/**
|
|
21
|
-
*
|
|
21
|
+
* The ARIA role for the vertical tab
|
|
22
22
|
* [to support accessibility](https://developer.blackbaud.com/skyux/learn/accessibility)
|
|
23
23
|
* by indicating how the tab functions and what it controls. For information about how
|
|
24
24
|
* an ARIA role indicates what an item represents on a web page, see the
|
|
@@ -30,11 +30,11 @@ export declare class SkyVerticalTabComponent implements OnInit, OnDestroy {
|
|
|
30
30
|
get ariaRole(): string;
|
|
31
31
|
set ariaRole(value: string | undefined);
|
|
32
32
|
/**
|
|
33
|
-
*
|
|
33
|
+
* Whether to disable the tab.
|
|
34
34
|
*/
|
|
35
35
|
disabled: boolean | undefined;
|
|
36
36
|
/**
|
|
37
|
-
*
|
|
37
|
+
* Whether to indicate that the tab has an error.
|
|
38
38
|
* @internal This is used for sectioned forms and is not currently a supported design for pure vertical tabs.
|
|
39
39
|
*/
|
|
40
40
|
errorIndicator: boolean | undefined;
|
|
@@ -43,17 +43,17 @@ export declare class SkyVerticalTabComponent implements OnInit, OnDestroy {
|
|
|
43
43
|
*/
|
|
44
44
|
tabHeaderCount: number | undefined;
|
|
45
45
|
/**
|
|
46
|
-
*
|
|
46
|
+
* The tab header.
|
|
47
47
|
* @required
|
|
48
48
|
*/
|
|
49
49
|
tabHeading: string | undefined;
|
|
50
50
|
/**
|
|
51
|
-
*
|
|
51
|
+
* Whether to display a chevron-right icon on the right hand side of the tab.
|
|
52
52
|
* @internal
|
|
53
53
|
*/
|
|
54
54
|
showTabRightArrow: boolean | undefined;
|
|
55
55
|
/**
|
|
56
|
-
*
|
|
56
|
+
* The ID for the tab.
|
|
57
57
|
* @deprecated Now that the vertical tabs provide aria labels automatically, this input is no longer necessary.
|
|
58
58
|
*/
|
|
59
59
|
set tabId(value: string | undefined);
|
|
@@ -5,16 +5,16 @@ import * as i0 from "@angular/core";
|
|
|
5
5
|
export declare class SkyVerticalTabsetGroupComponent implements OnInit, OnDestroy {
|
|
6
6
|
#private;
|
|
7
7
|
/**
|
|
8
|
-
*
|
|
8
|
+
* Whether to disable the ability to expand and collapse the group.
|
|
9
9
|
* @default false
|
|
10
10
|
*/
|
|
11
11
|
disabled: boolean | undefined;
|
|
12
12
|
/**
|
|
13
|
-
*
|
|
13
|
+
* The header for the collapsible group of tabs.
|
|
14
14
|
*/
|
|
15
15
|
groupHeading: string | undefined;
|
|
16
16
|
/**
|
|
17
|
-
*
|
|
17
|
+
* Whether the collapsible group is expanded.
|
|
18
18
|
* @default false
|
|
19
19
|
*/
|
|
20
20
|
open: boolean | undefined;
|
|
@@ -9,24 +9,24 @@ export declare class SkyVerticalTabsetComponent implements OnInit, AfterViewChec
|
|
|
9
9
|
adapterService: SkyVerticalTabsetAdapterService;
|
|
10
10
|
tabService: SkyVerticalTabsetService;
|
|
11
11
|
/**
|
|
12
|
-
*
|
|
12
|
+
* The text to display on the show tabs button on mobile devices.
|
|
13
13
|
*/
|
|
14
14
|
showTabsText: string | undefined;
|
|
15
15
|
/**
|
|
16
|
-
*
|
|
16
|
+
* The ARIA label for the tabset. This sets the tabset's `aria-label` attribute
|
|
17
17
|
* [to support accessibility](https://developer.blackbaud.com/skyux/learn/accessibility).
|
|
18
18
|
* If the tabset includes a visible label, use `ariaLabelledBy` instead.
|
|
19
19
|
*/
|
|
20
20
|
ariaLabel: string | undefined;
|
|
21
21
|
/**
|
|
22
|
-
*
|
|
22
|
+
* The HTML element ID (without the leading `#`) of the element that labels
|
|
23
23
|
* the tabset. This sets the tabset's `aria-labelledby` attribute
|
|
24
24
|
* [to support accessibility](https://developer.blackbaud.com/skyux/learn/accessibility).
|
|
25
25
|
* If the tabset does not include a visible label, use `ariaLabel` instead.
|
|
26
26
|
*/
|
|
27
27
|
ariaLabelledBy: string | undefined;
|
|
28
28
|
/**
|
|
29
|
-
*
|
|
29
|
+
* The ARIA role for the vertical tabset
|
|
30
30
|
* [to support accessibility](https://developer.blackbaud.com/skyux/learn/accessibility)
|
|
31
31
|
* by indicating how the tabset functions and what it controls. For information about how
|
|
32
32
|
* an ARIA role indicates what an item represents on a web page, see the
|
|
@@ -38,7 +38,7 @@ export declare class SkyVerticalTabsetComponent implements OnInit, AfterViewChec
|
|
|
38
38
|
get ariaRole(): string;
|
|
39
39
|
set ariaRole(value: string | undefined);
|
|
40
40
|
/**
|
|
41
|
-
*
|
|
41
|
+
* Whether the vertical tabset loads tab content during initialization so that it
|
|
42
42
|
* displays content without moving around elements in the content container.
|
|
43
43
|
* @default false
|
|
44
44
|
*/
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@skyux/tabs",
|
|
3
|
-
"version": "7.
|
|
3
|
+
"version": "7.6.0",
|
|
4
4
|
"author": "Blackbaud, Inc.",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"blackbaud",
|
|
@@ -45,14 +45,14 @@
|
|
|
45
45
|
"@angular/core": "^14.2.11",
|
|
46
46
|
"@angular/platform-browser": "^14.2.11",
|
|
47
47
|
"@angular/router": "^14.2.11",
|
|
48
|
-
"@skyux-sdk/testing": "7.
|
|
49
|
-
"@skyux/animations": "7.
|
|
50
|
-
"@skyux/core": "7.
|
|
51
|
-
"@skyux/forms": "7.
|
|
52
|
-
"@skyux/i18n": "7.
|
|
53
|
-
"@skyux/indicators": "7.
|
|
54
|
-
"@skyux/popovers": "7.
|
|
55
|
-
"@skyux/theme": "7.
|
|
48
|
+
"@skyux-sdk/testing": "7.6.0",
|
|
49
|
+
"@skyux/animations": "7.6.0",
|
|
50
|
+
"@skyux/core": "7.6.0",
|
|
51
|
+
"@skyux/forms": "7.6.0",
|
|
52
|
+
"@skyux/i18n": "7.6.0",
|
|
53
|
+
"@skyux/indicators": "7.6.0",
|
|
54
|
+
"@skyux/popovers": "7.6.0",
|
|
55
|
+
"@skyux/theme": "7.6.0"
|
|
56
56
|
},
|
|
57
57
|
"dependencies": {
|
|
58
58
|
"tslib": "^2.3.1"
|
|
@@ -4,11 +4,11 @@
|
|
|
4
4
|
*/
|
|
5
5
|
export interface SkyTabsetFixtureTab {
|
|
6
6
|
/**
|
|
7
|
-
*
|
|
7
|
+
* Whether the tab is selected.
|
|
8
8
|
*/
|
|
9
9
|
active: boolean;
|
|
10
10
|
/**
|
|
11
|
-
*
|
|
11
|
+
* Whether the tab is disabled.
|
|
12
12
|
*/
|
|
13
13
|
disabled: boolean;
|
|
14
14
|
/**
|