@skyux/tabs 6.16.0 → 7.0.0-alpha.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 +1025 -471
- package/esm2020/lib/modules/sectioned-form/sectioned-form-section.component.mjs +5 -5
- package/esm2020/lib/modules/sectioned-form/sectioned-form.component.mjs +4 -4
- package/esm2020/lib/modules/sectioned-form/sectioned-form.module.mjs +8 -10
- package/esm2020/lib/modules/sectioned-form/sectioned-form.service.mjs +3 -3
- package/esm2020/lib/modules/shared/sky-tabs-resources.module.mjs +6 -5
- package/esm2020/lib/modules/tabs/tab-button.component.mjs +5 -5
- package/esm2020/lib/modules/tabs/tab.component.mjs +3 -3
- package/esm2020/lib/modules/tabs/tabs.module.mjs +11 -13
- package/esm2020/lib/modules/tabs/tabset-adapter.service.mjs +3 -3
- package/esm2020/lib/modules/tabs/tabset-nav-button-type.mjs +2 -0
- package/esm2020/lib/modules/tabs/tabset-nav-button.component.mjs +132 -89
- package/esm2020/lib/modules/tabs/tabset-permalink.service.mjs +3 -3
- package/esm2020/lib/modules/tabs/tabset.component.mjs +20 -10
- package/esm2020/lib/modules/tabs/tabset.service.mjs +3 -3
- package/esm2020/lib/modules/vertical-tabset/vertical-tab-media-query.service.mjs +3 -3
- package/esm2020/lib/modules/vertical-tabset/vertical-tab.component.mjs +6 -6
- package/esm2020/lib/modules/vertical-tabset/vertical-tabset-adapter.service.mjs +3 -3
- package/esm2020/lib/modules/vertical-tabset/vertical-tabset-group.component.mjs +7 -7
- package/esm2020/lib/modules/vertical-tabset/vertical-tabset.component.mjs +7 -7
- package/esm2020/lib/modules/vertical-tabset/vertical-tabset.module.mjs +11 -13
- package/esm2020/lib/modules/vertical-tabset/vertical-tabset.service.mjs +3 -3
- package/esm2020/testing/tabs/tab-fixture-tab.mjs +1 -1
- package/esm2020/testing/tabs/tabset-fixture.mjs +2 -1
- package/fesm2015/skyux-tabs-testing.mjs +1 -0
- package/fesm2015/skyux-tabs-testing.mjs.map +1 -1
- package/fesm2015/skyux-tabs.mjs +221 -173
- package/fesm2015/skyux-tabs.mjs.map +1 -1
- package/fesm2020/skyux-tabs-testing.mjs +1 -0
- package/fesm2020/skyux-tabs-testing.mjs.map +1 -1
- package/fesm2020/skyux-tabs.mjs +219 -173
- package/fesm2020/skyux-tabs.mjs.map +1 -1
- package/lib/modules/sectioned-form/sectioned-form-section.component.d.ts +1 -1
- package/lib/modules/sectioned-form/sectioned-form.component.d.ts +1 -1
- package/lib/modules/tabs/tab-button.component.d.ts +1 -1
- package/lib/modules/tabs/tab.component.d.ts +1 -1
- package/lib/modules/tabs/tabset-nav-button-type.d.ts +4 -0
- package/lib/modules/tabs/tabset-nav-button.component.d.ts +34 -21
- package/lib/modules/tabs/tabset.component.d.ts +4 -1
- package/lib/modules/vertical-tabset/vertical-tab.component.d.ts +1 -1
- package/lib/modules/vertical-tabset/vertical-tabset-group.component.d.ts +1 -1
- package/lib/modules/vertical-tabset/vertical-tabset.component.d.ts +1 -1
- package/package.json +17 -17
- package/testing/{skyux-tabs-testing.d.ts → index.d.ts} +0 -0
- package/testing/tabs/tab-fixture-tab.d.ts +1 -0
- package/testing/tabs/tabset-fixture.d.ts +1 -0
- package/skyux-tabs.d.ts +0 -5
- package/testing/package.json +0 -10
package/fesm2020/skyux-tabs.mjs
CHANGED
|
@@ -1,24 +1,25 @@
|
|
|
1
|
-
import * as
|
|
1
|
+
import * as i4 from '@angular/common';
|
|
2
2
|
import { CommonModule } from '@angular/common';
|
|
3
3
|
import * as i0 from '@angular/core';
|
|
4
4
|
import { NgModule, Injectable, Component, ChangeDetectionStrategy, Input, ViewChild, HostListener, ContentChildren, EventEmitter, Output, ViewEncapsulation } from '@angular/core';
|
|
5
5
|
import { SkyCheckboxModule } from '@skyux/forms';
|
|
6
|
-
import * as
|
|
6
|
+
import * as i7 from '@skyux/theme';
|
|
7
7
|
import { SkyThemeModule } from '@skyux/theme';
|
|
8
8
|
import * as i1 from '@skyux/core';
|
|
9
9
|
import { SkyMediaBreakpoints, SkyMediaQueryService, SkyIdModule } from '@skyux/core';
|
|
10
|
-
import * as
|
|
10
|
+
import * as i5 from '@skyux/indicators';
|
|
11
11
|
import { SkyIconModule, SkyExpansionIndicatorModule, SkyStatusIndicatorModule } from '@skyux/indicators';
|
|
12
12
|
import * as i3 from '@skyux/i18n';
|
|
13
13
|
import { getLibStringForLocale, SkyI18nModule, SKY_LIB_RESOURCES_PROVIDERS } from '@skyux/i18n';
|
|
14
|
-
import { BehaviorSubject, Subject, combineLatest, race
|
|
14
|
+
import { BehaviorSubject, Subject, combineLatest, race } from 'rxjs';
|
|
15
15
|
import { takeUntil, take, distinctUntilChanged } from 'rxjs/operators';
|
|
16
16
|
import { skyAnimationSlide } from '@skyux/animations';
|
|
17
17
|
import { trigger, transition, style, animate } from '@angular/animations';
|
|
18
18
|
import * as i1$1 from '@angular/router';
|
|
19
19
|
import { RouterModule } from '@angular/router';
|
|
20
|
-
import * as
|
|
20
|
+
import * as i5$1 from '@skyux/popovers';
|
|
21
21
|
import { SkyDropdownModule } from '@skyux/popovers';
|
|
22
|
+
import { __classPrivateFieldGet, __classPrivateFieldSet } from 'tslib';
|
|
22
23
|
|
|
23
24
|
/**
|
|
24
25
|
* NOTICE: DO NOT MODIFY THIS FILE!
|
|
@@ -30,6 +31,7 @@ const RESOURCES = {
|
|
|
30
31
|
'EN-US': {
|
|
31
32
|
skyux_tab_add: { message: 'Add tab' },
|
|
32
33
|
skyux_tab_close: { message: 'Close {0} tab' },
|
|
34
|
+
skyux_tabs_navigator_finish: { message: 'Finish' },
|
|
33
35
|
skyux_tabs_navigator_next: { message: 'Next' },
|
|
34
36
|
skyux_tabs_navigator_previous: { message: 'Previous' },
|
|
35
37
|
skyux_tab_open: { message: 'Open tab' },
|
|
@@ -46,16 +48,16 @@ class SkyTabsResourcesProvider {
|
|
|
46
48
|
*/
|
|
47
49
|
class SkyTabsResourcesModule {
|
|
48
50
|
}
|
|
49
|
-
SkyTabsResourcesModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
50
|
-
SkyTabsResourcesModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "
|
|
51
|
-
SkyTabsResourcesModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "
|
|
51
|
+
SkyTabsResourcesModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyTabsResourcesModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
52
|
+
SkyTabsResourcesModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.0", ngImport: i0, type: SkyTabsResourcesModule, exports: [SkyI18nModule] });
|
|
53
|
+
SkyTabsResourcesModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyTabsResourcesModule, providers: [
|
|
52
54
|
{
|
|
53
55
|
provide: SKY_LIB_RESOURCES_PROVIDERS,
|
|
54
56
|
useClass: SkyTabsResourcesProvider,
|
|
55
57
|
multi: true,
|
|
56
58
|
},
|
|
57
59
|
], imports: [SkyI18nModule] });
|
|
58
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
60
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyTabsResourcesModule, decorators: [{
|
|
59
61
|
type: NgModule,
|
|
60
62
|
args: [{
|
|
61
63
|
exports: [SkyI18nModule],
|
|
@@ -131,9 +133,9 @@ class SkyVerticalTabMediaQueryService {
|
|
|
131
133
|
this.currentSubject.complete();
|
|
132
134
|
}
|
|
133
135
|
}
|
|
134
|
-
SkyVerticalTabMediaQueryService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
135
|
-
SkyVerticalTabMediaQueryService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
136
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
136
|
+
SkyVerticalTabMediaQueryService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyVerticalTabMediaQueryService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
137
|
+
SkyVerticalTabMediaQueryService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyVerticalTabMediaQueryService });
|
|
138
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyVerticalTabMediaQueryService, decorators: [{
|
|
137
139
|
type: Injectable
|
|
138
140
|
}], ctorParameters: function () { return []; } });
|
|
139
141
|
|
|
@@ -176,9 +178,9 @@ class SkyVerticalTabsetAdapterService {
|
|
|
176
178
|
this.renderer.addClass(nativeEl, newClass);
|
|
177
179
|
}
|
|
178
180
|
}
|
|
179
|
-
SkyVerticalTabsetAdapterService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
180
|
-
SkyVerticalTabsetAdapterService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
181
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
181
|
+
SkyVerticalTabsetAdapterService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyVerticalTabsetAdapterService, deps: [{ token: i0.RendererFactory2 }], target: i0.ɵɵFactoryTarget.Injectable });
|
|
182
|
+
SkyVerticalTabsetAdapterService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyVerticalTabsetAdapterService });
|
|
183
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyVerticalTabsetAdapterService, decorators: [{
|
|
182
184
|
type: Injectable
|
|
183
185
|
}], ctorParameters: function () { return [{ type: i0.RendererFactory2 }]; } });
|
|
184
186
|
|
|
@@ -339,9 +341,9 @@ class SkyVerticalTabsetService {
|
|
|
339
341
|
this.indexChanged.next(this.activeIndex);
|
|
340
342
|
}
|
|
341
343
|
}
|
|
342
|
-
SkyVerticalTabsetService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
343
|
-
SkyVerticalTabsetService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
344
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
344
|
+
SkyVerticalTabsetService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyVerticalTabsetService, deps: [{ token: i1.SkyMediaQueryService }], target: i0.ɵɵFactoryTarget.Injectable });
|
|
345
|
+
SkyVerticalTabsetService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyVerticalTabsetService });
|
|
346
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyVerticalTabsetService, decorators: [{
|
|
345
347
|
type: Injectable
|
|
346
348
|
}], ctorParameters: function () { return [{ type: i1.SkyMediaQueryService }]; } });
|
|
347
349
|
|
|
@@ -485,15 +487,15 @@ class SkyVerticalTabComponent {
|
|
|
485
487
|
this.changeRef.markForCheck();
|
|
486
488
|
}
|
|
487
489
|
}
|
|
488
|
-
SkyVerticalTabComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
489
|
-
SkyVerticalTabComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
490
|
+
SkyVerticalTabComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyVerticalTabComponent, deps: [{ token: SkyVerticalTabsetAdapterService }, { token: i0.ChangeDetectorRef }, { token: SkyVerticalTabsetService }, { token: SkyVerticalTabMediaQueryService }], target: i0.ɵɵFactoryTarget.Component });
|
|
491
|
+
SkyVerticalTabComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.0", type: SkyVerticalTabComponent, selector: "sky-vertical-tab", inputs: { active: "active", ariaControls: "ariaControls", ariaRole: "ariaRole", disabled: "disabled", errorIndicator: "errorIndicator", tabHeaderCount: "tabHeaderCount", tabHeading: "tabHeading", showTabRightArrow: "showTabRightArrow", tabId: "tabId" }, host: { listeners: { "window:resize": "onWindowResize()" } }, providers: [
|
|
490
492
|
SkyVerticalTabMediaQueryService,
|
|
491
493
|
{
|
|
492
494
|
provide: SkyMediaQueryService,
|
|
493
495
|
useExisting: SkyVerticalTabMediaQueryService,
|
|
494
496
|
},
|
|
495
|
-
], viewQueries: [{ propertyName: "tabContent", first: true, predicate: ["tabContentWrapper"], descendants: true }], ngImport: i0, template: "<a\n class=\"sky-vertical-tab\"\n [attr.aria-controls]=\"isMobile ? null : ariaControls || tabContentPane.id\"\n [attr.aria-selected]=\"active\"\n [attr.id]=\"tabId\"\n [attr.role]=\"ariaRole\"\n [ngClass]=\"{\n 'sky-vertical-tab-active': active,\n 'sky-vertical-tab-disabled': disabled,\n 'sky-font-deemphasized': disabled,\n 'sky-deemphasized': disabled\n }\"\n [tabIndex]=\"tabIndex()\"\n (click)=\"activateTab()\"\n (keyup)=\"onTabButtonKeyUp($event)\"\n>\n <div class=\"sky-vertical-tab-display\">\n <div class=\"sky-vertical-tab-heading\">\n <span class=\"sky-vertical-tab-heading-value\">{{ tabHeading }}</span>\n <span\n class=\"sky-vertical-tab-count\"\n *ngIf=\"tabHeaderCount || tabHeaderCount === 0\"\n >\n ({{ tabHeaderCount }})\n </span>\n </div>\n <sky-status-indicator\n *ngIf=\"errorIndicator\"\n class=\"sky-vertical-tab-heading-error\"\n descriptionType=\"error\"\n indicatorType=\"danger\"\n ></sky-status-indicator>\n <sky-icon\n *ngIf=\"showTabRightArrow\"\n class=\"sky-vertical-tab-right-arrow\"\n icon=\"chevron-right\"\n >\n </sky-icon>\n </div>\n</a>\n\n<div #tabContentWrapper>\n <div\n class=\"sky-vertical-tab-content-pane\"\n role=\"tabpanel\"\n tabindex=\"0\"\n skyId\n [attr.aria-labelledby]=\"tabId\"\n [ngClass]=\"{ 'sky-vertical-tab-hidden': !active }\"\n #tabContentPane\n >\n <ng-content></ng-content>\n\n <div></div>\n </div>\n</div>\n", styles: [".sky-vertical-tab{cursor:pointer;padding:7px 0 7px 10px;margin:5px 0 5px 10px;display:flex;text-decoration:none}.sky-vertical-tab:not(.sky-deemphasized){color:#212327}.sky-vertical-tab:hover{background-color:#eeeeef}.sky-vertical-tab:focus-visible{outline:thin dotted;outline:-webkit-focus-ring-color auto 5px}.sky-vertical-tab:hover .sky-vertical-tab-right-arrow{color:#979ba2}.sky-vertical-tab-active{background-color:#eeeeef;color:#212327;padding-left:6px;border-left:4px solid #00b4f1}.sky-vertical-tab-hidden{display:none}.sky-vertical-tab-display{display:flex;flex-grow:1}.sky-vertical-tab-heading-error{padding-left:5px}.sky-vertical-tab-count{margin-left:5px}.sky-vertical-tab-disabled{cursor:not-allowed;pointer-events:none}.sky-vertical-tab-right-arrow{padding:3px 10px 0 0;color:#cdcfd2}:host-context(.sky-theme-modern) .sky-vertical-tab{color:#686c73;cursor:pointer;padding:10px 0 10px 10px;margin:10px 0 20px 10px}:host-context(.sky-theme-modern) .sky-vertical-tab:not(.sky-vertical-tab-active):not(:active):hover{color:#212327;background-color:transparent;padding-left:9px;border-left:1px solid #00b4f1}:host-context(.sky-theme-modern) .sky-vertical-tab:not(:active):focus-visible{outline:solid 2px #1870B8;outline-offset:-2px;box-shadow:0 1px 8px #0000004d}:host-context(.sky-theme-modern) .sky-vertical-tab:focus:active:hover{outline:none;background:none}:host-context(.sky-theme-modern) .sky-vertical-tab:active{border-left:3px solid #00b4f1;color:#212327;padding-left:7px}:host-context(.sky-theme-modern) .sky-vertical-tab .sky-vertical-tab-heading-error{padding-left:10px;position:relative;top:-2px}:host-context(.sky-theme-modern) .sky-vertical-tab-active{background:none;color:#212327;padding-left:7px;border-left:3px solid #1870B8}.sky-theme-modern .sky-vertical-tab{color:#686c73;cursor:pointer;padding:10px 0 10px 10px;margin:10px 0 20px 10px}.sky-theme-modern .sky-vertical-tab:not(.sky-vertical-tab-active):not(:active):hover{color:#212327;background-color:transparent;padding-left:9px;border-left:1px solid #00b4f1}.sky-theme-modern .sky-vertical-tab:not(:active):focus-visible{outline:solid 2px #1870B8;outline-offset:-2px;box-shadow:0 1px 8px #0000004d}.sky-theme-modern .sky-vertical-tab:focus:active:hover{outline:none;background:none}.sky-theme-modern .sky-vertical-tab:active{border-left:3px solid #00b4f1;color:#212327;padding-left:7px}.sky-theme-modern .sky-vertical-tab .sky-vertical-tab-heading-error{padding-left:10px;position:relative;top:-2px}.sky-theme-modern .sky-vertical-tab-active{background:none;color:#212327;padding-left:7px;border-left:3px solid #1870B8}\n"],
|
|
496
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
497
|
+
], viewQueries: [{ propertyName: "tabContent", first: true, predicate: ["tabContentWrapper"], descendants: true }], ngImport: i0, template: "<a\n class=\"sky-vertical-tab\"\n [attr.aria-controls]=\"isMobile ? null : ariaControls || tabContentPane.id\"\n [attr.aria-selected]=\"active\"\n [attr.id]=\"tabId\"\n [attr.role]=\"ariaRole\"\n [ngClass]=\"{\n 'sky-vertical-tab-active': active,\n 'sky-vertical-tab-disabled': disabled,\n 'sky-font-deemphasized': disabled,\n 'sky-deemphasized': disabled\n }\"\n [tabIndex]=\"tabIndex()\"\n (click)=\"activateTab()\"\n (keyup)=\"onTabButtonKeyUp($event)\"\n>\n <div class=\"sky-vertical-tab-display\">\n <div class=\"sky-vertical-tab-heading\">\n <span class=\"sky-vertical-tab-heading-value\">{{ tabHeading }}</span>\n <span\n class=\"sky-vertical-tab-count\"\n *ngIf=\"tabHeaderCount || tabHeaderCount === 0\"\n >\n ({{ tabHeaderCount }})\n </span>\n </div>\n <sky-status-indicator\n *ngIf=\"errorIndicator\"\n class=\"sky-vertical-tab-heading-error\"\n descriptionType=\"error\"\n indicatorType=\"danger\"\n ></sky-status-indicator>\n <sky-icon\n *ngIf=\"showTabRightArrow\"\n class=\"sky-vertical-tab-right-arrow\"\n icon=\"chevron-right\"\n >\n </sky-icon>\n </div>\n</a>\n\n<div #tabContentWrapper>\n <div\n class=\"sky-vertical-tab-content-pane\"\n role=\"tabpanel\"\n tabindex=\"0\"\n skyId\n [attr.aria-labelledby]=\"tabId\"\n [ngClass]=\"{ 'sky-vertical-tab-hidden': !active }\"\n #tabContentPane\n >\n <ng-content></ng-content>\n\n <div></div>\n </div>\n</div>\n", styles: [".sky-vertical-tab{cursor:pointer;padding:7px 0 7px 10px;margin:5px 0 5px 10px;display:flex;text-decoration:none}.sky-vertical-tab:not(.sky-deemphasized){color:#212327}.sky-vertical-tab:hover{background-color:#eeeeef}.sky-vertical-tab:focus-visible{outline:thin dotted;outline:-webkit-focus-ring-color auto 5px}.sky-vertical-tab:hover .sky-vertical-tab-right-arrow{color:#979ba2}.sky-vertical-tab-active{background-color:#eeeeef;color:#212327;padding-left:6px;border-left:4px solid #00b4f1}.sky-vertical-tab-hidden{display:none}.sky-vertical-tab-display{display:flex;flex-grow:1}.sky-vertical-tab-heading-error{padding-left:5px}.sky-vertical-tab-count{margin-left:5px}.sky-vertical-tab-disabled{cursor:not-allowed;pointer-events:none}.sky-vertical-tab-right-arrow{padding:3px 10px 0 0;color:#cdcfd2}:host-context(.sky-theme-modern) .sky-vertical-tab{color:#686c73;cursor:pointer;padding:10px 0 10px 10px;margin:10px 0 20px 10px}:host-context(.sky-theme-modern) .sky-vertical-tab:not(.sky-vertical-tab-active):not(:active):hover{color:#212327;background-color:transparent;padding-left:9px;border-left:1px solid #00b4f1}:host-context(.sky-theme-modern) .sky-vertical-tab:not(:active):focus-visible{outline:solid 2px #1870B8;outline-offset:-2px;box-shadow:0 1px 8px #0000004d}:host-context(.sky-theme-modern) .sky-vertical-tab:focus:active:hover{outline:none;background:none}:host-context(.sky-theme-modern) .sky-vertical-tab:active{border-left:3px solid #00b4f1;color:#212327;padding-left:7px}:host-context(.sky-theme-modern) .sky-vertical-tab .sky-vertical-tab-heading-error{padding-left:10px;position:relative;top:-2px}:host-context(.sky-theme-modern) .sky-vertical-tab-active{background:none;color:#212327;padding-left:7px;border-left:3px solid #1870B8}.sky-theme-modern .sky-vertical-tab{color:#686c73;cursor:pointer;padding:10px 0 10px 10px;margin:10px 0 20px 10px}.sky-theme-modern .sky-vertical-tab:not(.sky-vertical-tab-active):not(:active):hover{color:#212327;background-color:transparent;padding-left:9px;border-left:1px solid #00b4f1}.sky-theme-modern .sky-vertical-tab:not(:active):focus-visible{outline:solid 2px #1870B8;outline-offset:-2px;box-shadow:0 1px 8px #0000004d}.sky-theme-modern .sky-vertical-tab:focus:active:hover{outline:none;background:none}.sky-theme-modern .sky-vertical-tab:active{border-left:3px solid #00b4f1;color:#212327;padding-left:7px}.sky-theme-modern .sky-vertical-tab .sky-vertical-tab-heading-error{padding-left:10px;position:relative;top:-2px}.sky-theme-modern .sky-vertical-tab-active{background:none;color:#212327;padding-left:7px;border-left:3px solid #1870B8}\n"], dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i5.λ4, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }, { kind: "directive", type: i1.λ2, selector: "[skyId]", exportAs: ["skyId"] }, { kind: "component", type: i5.λ10, selector: "sky-status-indicator", inputs: ["indicatorType", "descriptionType", "customDescription"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
498
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyVerticalTabComponent, decorators: [{
|
|
497
499
|
type: Component,
|
|
498
500
|
args: [{ selector: 'sky-vertical-tab', providers: [
|
|
499
501
|
SkyVerticalTabMediaQueryService,
|
|
@@ -584,9 +586,9 @@ class SkyVerticalTabsetGroupComponent {
|
|
|
584
586
|
return this.tabs && this.tabs.find((t) => t.active) !== undefined;
|
|
585
587
|
}
|
|
586
588
|
}
|
|
587
|
-
SkyVerticalTabsetGroupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
588
|
-
SkyVerticalTabsetGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
589
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
589
|
+
SkyVerticalTabsetGroupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyVerticalTabsetGroupComponent, deps: [{ token: SkyVerticalTabsetService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
590
|
+
SkyVerticalTabsetGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.0", type: SkyVerticalTabsetGroupComponent, selector: "sky-vertical-tabset-group", inputs: { disabled: "disabled", groupHeading: "groupHeading", open: "open" }, queries: [{ propertyName: "tabs", predicate: SkyVerticalTabComponent }], ngImport: i0, template: "<div class=\"sky-vertical-tabset-group\">\n <!-- [ngClass] includes font classes for both modern and default styles -->\n <div\n class=\"sky-vertical-tabset-group-header\"\n [ngClass]=\"{\n 'sky-vertical-tabset-group-header-sub-open sky-font-emphasized sky-emphasized':\n subMenuOpen(),\n 'sky-font-deemphasized': disabled,\n 'sky-deemphasized': disabled,\n 'sky-vertical-tabset-disabled': disabled\n }\"\n [tabIndex]=\"-1\"\n >\n <button\n class=\"sky-padding-even-default\"\n type=\"button\"\n skyId\n [attr.aria-controls]=\"groupContent.id\"\n [attr.aria-expanded]=\"open\"\n (click)=\"toggleMenuOpen()\"\n #groupHeadingButton\n >\n {{ groupHeading }}\n <sky-expansion-indicator\n class=\"sky-vertical-tabset-group-expansion-indicator\"\n [direction]=\"open ? 'up' : 'down'\"\n >\n </sky-expansion-indicator>\n </button>\n </div>\n <div\n class=\"sky-vertical-tabset-group-content\"\n role=\"region\"\n skyId\n [attr.labelledby]=\"groupHeadingButton.id\"\n [@skyAnimationSlide]=\"open ? 'down' : 'up'\"\n #groupContent\n >\n <ng-content></ng-content>\n </div>\n</div>\n", styles: [".sky-vertical-tabset-group{border-bottom:1px solid #e2e3e4;margin:5px 0 5px 5px}.sky-vertical-tabset-group-header button{cursor:pointer;display:flex;justify-content:space-between;border:none;width:100%;text-align:left;background:none}.sky-vertical-tabset-group-content{overflow:hidden;border-top:1px solid #e2e3e4}:host ::ng-deep .sky-vertical-tabset-group-expansion-indicator>button{font-size:14px!important}.sky-vertical-tabset-disabled{cursor:not-allowed;pointer-events:none}:host-context(.sky-theme-modern) .sky-vertical-tabset-group{border:none;margin:10px 0}:host-context(.sky-theme-modern) .sky-vertical-tabset-group-content{border:none;padding-left:25px}:host-context(.sky-theme-modern) .sky-vertical-tabset-group-header{position:relative}:host-context(.sky-theme-modern) .sky-vertical-tabset-group-expansion-indicator{position:absolute;top:6px;right:5px}.sky-theme-modern .sky-vertical-tabset-group{border:none;margin:10px 0}.sky-theme-modern .sky-vertical-tabset-group-content{border:none;padding-left:25px}.sky-theme-modern .sky-vertical-tabset-group-header{position:relative}.sky-theme-modern .sky-vertical-tabset-group-expansion-indicator{position:absolute;top:6px;right:5px}\n"], dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.λ2, selector: "[skyId]", exportAs: ["skyId"] }, { kind: "component", type: i5.λ15, selector: "sky-expansion-indicator", inputs: ["direction"] }], animations: [skyAnimationSlide], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
591
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyVerticalTabsetGroupComponent, decorators: [{
|
|
590
592
|
type: Component,
|
|
591
593
|
args: [{ selector: 'sky-vertical-tabset-group', changeDetection: ChangeDetectionStrategy.OnPush, animations: [skyAnimationSlide], template: "<div class=\"sky-vertical-tabset-group\">\n <!-- [ngClass] includes font classes for both modern and default styles -->\n <div\n class=\"sky-vertical-tabset-group-header\"\n [ngClass]=\"{\n 'sky-vertical-tabset-group-header-sub-open sky-font-emphasized sky-emphasized':\n subMenuOpen(),\n 'sky-font-deemphasized': disabled,\n 'sky-deemphasized': disabled,\n 'sky-vertical-tabset-disabled': disabled\n }\"\n [tabIndex]=\"-1\"\n >\n <button\n class=\"sky-padding-even-default\"\n type=\"button\"\n skyId\n [attr.aria-controls]=\"groupContent.id\"\n [attr.aria-expanded]=\"open\"\n (click)=\"toggleMenuOpen()\"\n #groupHeadingButton\n >\n {{ groupHeading }}\n <sky-expansion-indicator\n class=\"sky-vertical-tabset-group-expansion-indicator\"\n [direction]=\"open ? 'up' : 'down'\"\n >\n </sky-expansion-indicator>\n </button>\n </div>\n <div\n class=\"sky-vertical-tabset-group-content\"\n role=\"region\"\n skyId\n [attr.labelledby]=\"groupHeadingButton.id\"\n [@skyAnimationSlide]=\"open ? 'down' : 'up'\"\n #groupContent\n >\n <ng-content></ng-content>\n </div>\n</div>\n", styles: [".sky-vertical-tabset-group{border-bottom:1px solid #e2e3e4;margin:5px 0 5px 5px}.sky-vertical-tabset-group-header button{cursor:pointer;display:flex;justify-content:space-between;border:none;width:100%;text-align:left;background:none}.sky-vertical-tabset-group-content{overflow:hidden;border-top:1px solid #e2e3e4}:host ::ng-deep .sky-vertical-tabset-group-expansion-indicator>button{font-size:14px!important}.sky-vertical-tabset-disabled{cursor:not-allowed;pointer-events:none}:host-context(.sky-theme-modern) .sky-vertical-tabset-group{border:none;margin:10px 0}:host-context(.sky-theme-modern) .sky-vertical-tabset-group-content{border:none;padding-left:25px}:host-context(.sky-theme-modern) .sky-vertical-tabset-group-header{position:relative}:host-context(.sky-theme-modern) .sky-vertical-tabset-group-expansion-indicator{position:absolute;top:6px;right:5px}.sky-theme-modern .sky-vertical-tabset-group{border:none;margin:10px 0}.sky-theme-modern .sky-vertical-tabset-group-content{border:none;padding-left:25px}.sky-theme-modern .sky-vertical-tabset-group-header{position:relative}.sky-theme-modern .sky-vertical-tabset-group-expansion-indicator{position:absolute;top:6px;right:5px}\n"] }]
|
|
592
594
|
}], ctorParameters: function () { return [{ type: SkyVerticalTabsetService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { disabled: [{
|
|
@@ -683,8 +685,8 @@ class SkyVerticalTabsetComponent {
|
|
|
683
685
|
this._ngUnsubscribe.complete();
|
|
684
686
|
}
|
|
685
687
|
}
|
|
686
|
-
SkyVerticalTabsetComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
687
|
-
SkyVerticalTabsetComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
688
|
+
SkyVerticalTabsetComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyVerticalTabsetComponent, deps: [{ token: SkyVerticalTabsetAdapterService }, { token: SkyVerticalTabsetService }, { token: i3.SkyLibResourcesService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
689
|
+
SkyVerticalTabsetComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.0", type: SkyVerticalTabsetComponent, selector: "sky-vertical-tabset", inputs: { showTabsText: "showTabsText", ariaLabel: "ariaLabel", ariaLabelledBy: "ariaLabelledBy", ariaRole: "ariaRole", maintainTabContent: "maintainTabContent" }, outputs: { activeChange: "activeChange" }, providers: [SkyVerticalTabsetService], viewQueries: [{ propertyName: "tabGroups", first: true, predicate: ["groupContainerWrapper"], descendants: true }, { propertyName: "content", first: true, predicate: ["skySideContent"], descendants: true }, { propertyName: "contentWrapper", first: true, predicate: ["contentContainerWrapper"], descendants: true }], ngImport: i0, template: "<div class=\"sky-vertical-tabset\" (window:resize)=\"tabService.updateContent()\">\n <div\n *ngIf=\"maintainTabContent || tabService.tabsVisible()\"\n aria-orientation=\"vertical\"\n class=\"sky-vertical-tabset-group-container\"\n [ngClass]=\"{ 'sky-vertical-tabset-hidden': !tabService.tabsVisible() }\"\n [attr.aria-label]=\"ariaLabel\"\n [attr.aria-labelledby]=\"ariaLabelledBy\"\n [attr.role]=\"ariaRole\"\n [@tabGroupEnter]=\"tabService.animationTabsVisibleState\"\n #groupContainerWrapper\n >\n <ng-content></ng-content>\n </div>\n <div\n *ngIf=\"maintainTabContent || tabService.contentVisible()\"\n class=\"sky-vertical-tabset-content\"\n [ngClass]=\"{\n 'sky-vertical-tabset-content-hidden': !tabService.contentVisible()\n }\"\n [@contentEnter]=\"tabService.animationContentVisibleState\"\n #contentContainerWrapper\n >\n <div #skySideContent></div>\n <button\n *ngIf=\"!tabService.tabsVisible()\"\n (click)=\"tabService.showTabs()\"\n class=\"sky-btn sky-btn-primary sky-vertical-tabset-show-tabs-btn\"\n >\n <sky-icon icon=\"chevron-left\"></sky-icon>\n {{ showTabsText }}\n </button>\n </div>\n</div>\n", styles: [":host .sky-vertical-tabset{display:block;height:auto}:host .sky-vertical-tabset-group-container{border-right:none}:host-context(.sky-responsive-container-xs) .sky-vertical-tabset,:host-context(.sky-responsive-container-sm) .sky-vertical-tabset,:host-context(.sky-responsive-container-md) .sky-vertical-tabset,:host-context(.sky-responsive-container-lg) .sky-vertical-tabset{display:block;height:auto}:host-context(.sky-responsive-container-xs) .sky-vertical-tabset-group-container,:host-context(.sky-responsive-container-sm) .sky-vertical-tabset-group-container,:host-context(.sky-responsive-container-md) .sky-vertical-tabset-group-container,:host-context(.sky-responsive-container-lg) .sky-vertical-tabset-group-container{border-right:none}@media (min-width: 768px){:host .sky-vertical-tabset{display:flex;height:100%}:host .sky-vertical-tabset-group-container{border-right:1px solid #cdcfd2}}:host-context(.sky-responsive-container-sm) .sky-vertical-tabset,:host-context(.sky-responsive-container-md) .sky-vertical-tabset,:host-context(.sky-responsive-container-lg) .sky-vertical-tabset{display:flex;height:100%}:host-context(.sky-responsive-container-sm) .sky-vertical-tabset-group-container,:host-context(.sky-responsive-container-md) .sky-vertical-tabset-group-container,:host-context(.sky-responsive-container-lg) .sky-vertical-tabset-group-container{border-right:1px solid #cdcfd2}.sky-vertical-tabset-hidden{display:none}.sky-vertical-tabset-content{margin:10px 0 0 10px;flex-basis:75%;overflow-y:auto}.sky-vertical-tabset-content-hidden{display:none}.sky-vertical-tabset-show-tabs-btn{margin-top:10px}.sky-vertical-tabset-group-container{flex-basis:25%;overflow-y:auto}:host-context(.sky-theme-modern) .sky-vertical-tabset-content{margin:15px}@media (min-width: 768px){:host-context(.sky-theme-modern) :host .sky-vertical-tabset-content{margin:20px 30px}:host-context(.sky-theme-modern) :host .sky-vertical-tabset-group-container{border-right:1px solid #d2d2d2}}:host-context(.sky-theme-modern) :host-context(.sky-responsive-container-sm) .sky-vertical-tabset-content,:host-context(.sky-theme-modern) :host-context(.sky-responsive-container-md) .sky-vertical-tabset-content,:host-context(.sky-theme-modern) :host-context(.sky-responsive-container-lg) .sky-vertical-tabset-content{margin:20px 30px}:host-context(.sky-theme-modern) :host-context(.sky-responsive-container-sm) .sky-vertical-tabset-group-container,:host-context(.sky-theme-modern) :host-context(.sky-responsive-container-md) .sky-vertical-tabset-group-container,:host-context(.sky-theme-modern) :host-context(.sky-responsive-container-lg) .sky-vertical-tabset-group-container{border-right:1px solid #d2d2d2}.sky-theme-modern .sky-vertical-tabset-content{margin:15px}@media (min-width: 768px){.sky-theme-modern :host .sky-vertical-tabset-content{margin:20px 30px}.sky-theme-modern :host .sky-vertical-tabset-group-container{border-right:1px solid #d2d2d2}}.sky-theme-modern :host-context(.sky-responsive-container-sm) .sky-vertical-tabset-content,.sky-theme-modern :host-context(.sky-responsive-container-md) .sky-vertical-tabset-content,.sky-theme-modern :host-context(.sky-responsive-container-lg) .sky-vertical-tabset-content{margin:20px 30px}.sky-theme-modern :host-context(.sky-responsive-container-sm) .sky-vertical-tabset-group-container,.sky-theme-modern :host-context(.sky-responsive-container-md) .sky-vertical-tabset-group-container,.sky-theme-modern :host-context(.sky-responsive-container-lg) .sky-vertical-tabset-group-container{border-right:1px solid #d2d2d2}\n"], dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i5.λ4, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }], animations: [
|
|
688
690
|
trigger('tabGroupEnter', [
|
|
689
691
|
transition(`${HIDDEN_STATE} => ${VISIBLE_STATE}`, [
|
|
690
692
|
style({ transform: 'translate(-100%)' }),
|
|
@@ -698,7 +700,7 @@ SkyVerticalTabsetComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0
|
|
|
698
700
|
]),
|
|
699
701
|
]),
|
|
700
702
|
], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
701
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
703
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyVerticalTabsetComponent, decorators: [{
|
|
702
704
|
type: Component,
|
|
703
705
|
args: [{ selector: 'sky-vertical-tabset', providers: [SkyVerticalTabsetService], changeDetection: ChangeDetectionStrategy.OnPush, animations: [
|
|
704
706
|
trigger('tabGroupEnter', [
|
|
@@ -713,7 +715,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImpor
|
|
|
713
715
|
animate('150ms ease-in'),
|
|
714
716
|
]),
|
|
715
717
|
]),
|
|
716
|
-
], template: "<div class=\"sky-vertical-tabset\" (window:resize)=\"tabService.updateContent()\">\n <div\n *ngIf=\"maintainTabContent || tabService.tabsVisible()\"\n aria-orientation=\"vertical\"\n class=\"sky-vertical-tabset-group-container\"\n [ngClass]=\"{ 'sky-vertical-tabset-hidden': !tabService.tabsVisible() }\"\n [attr.aria-label]=\"ariaLabel\"\n [attr.aria-labelledby]=\"ariaLabelledBy\"\n [attr.role]=\"ariaRole\"\n [@tabGroupEnter]=\"tabService.animationTabsVisibleState\"\n #groupContainerWrapper\n >\n <ng-content></ng-content>\n </div>\n <div\n *ngIf=\"maintainTabContent || tabService.contentVisible()\"\n class=\"sky-vertical-tabset-content\"\n [ngClass]=\"{\n 'sky-vertical-tabset-content-hidden': !tabService.contentVisible()\n }\"\n [@contentEnter]=\"tabService.animationContentVisibleState\"\n #contentContainerWrapper\n >\n <div #skySideContent></div>\n <button\n *ngIf=\"!tabService.tabsVisible()\"\n (click)=\"tabService.showTabs()\"\n class=\"sky-btn sky-btn-primary sky-vertical-tabset-show-tabs-btn\"\n >\n <sky-icon icon=\"chevron-left\"></sky-icon>\n {{ showTabsText }}\n </button>\n </div>\n</div>\n", styles: [":host .sky-vertical-tabset{display:block;height:auto}:host .sky-vertical-tabset-group-container{border-right:none}:host-context(.sky-responsive-container-xs) .sky-vertical-tabset,:host-context(.sky-responsive-container-sm) .sky-vertical-tabset,:host-context(.sky-responsive-container-md) .sky-vertical-tabset,:host-context(.sky-responsive-container-lg) .sky-vertical-tabset{display:block;height:auto}:host-context(.sky-responsive-container-xs) .sky-vertical-tabset-group-container,:host-context(.sky-responsive-container-sm) .sky-vertical-tabset-group-container,:host-context(.sky-responsive-container-md) .sky-vertical-tabset-group-container,:host-context(.sky-responsive-container-lg) .sky-vertical-tabset-group-container{border-right:none}@media (min-width: 768px){:host .sky-vertical-tabset{display:flex;height:100%}:host .sky-vertical-tabset-group-container{border-right:1px solid #cdcfd2}}:host-context(.sky-responsive-container-sm) .sky-vertical-tabset,:host-context(.sky-responsive-container-md) .sky-vertical-tabset,:host-context(.sky-responsive-container-lg) .sky-vertical-tabset{display:flex;height:100%}:host-context(.sky-responsive-container-sm) .sky-vertical-tabset-group-container,:host-context(.sky-responsive-container-md) .sky-vertical-tabset-group-container,:host-context(.sky-responsive-container-lg) .sky-vertical-tabset-group-container{border-right:1px solid #cdcfd2}.sky-vertical-tabset-hidden{display:none}.sky-vertical-tabset-content{margin:10px 0 0 10px;flex-basis:75%;overflow-y:auto}.sky-vertical-tabset-content-hidden{display:none}.sky-vertical-tabset-show-tabs-btn{margin-top:10px}.sky-vertical-tabset-group-container{flex-basis:25%;overflow-y:auto}:host-context(
|
|
718
|
+
], template: "<div class=\"sky-vertical-tabset\" (window:resize)=\"tabService.updateContent()\">\n <div\n *ngIf=\"maintainTabContent || tabService.tabsVisible()\"\n aria-orientation=\"vertical\"\n class=\"sky-vertical-tabset-group-container\"\n [ngClass]=\"{ 'sky-vertical-tabset-hidden': !tabService.tabsVisible() }\"\n [attr.aria-label]=\"ariaLabel\"\n [attr.aria-labelledby]=\"ariaLabelledBy\"\n [attr.role]=\"ariaRole\"\n [@tabGroupEnter]=\"tabService.animationTabsVisibleState\"\n #groupContainerWrapper\n >\n <ng-content></ng-content>\n </div>\n <div\n *ngIf=\"maintainTabContent || tabService.contentVisible()\"\n class=\"sky-vertical-tabset-content\"\n [ngClass]=\"{\n 'sky-vertical-tabset-content-hidden': !tabService.contentVisible()\n }\"\n [@contentEnter]=\"tabService.animationContentVisibleState\"\n #contentContainerWrapper\n >\n <div #skySideContent></div>\n <button\n *ngIf=\"!tabService.tabsVisible()\"\n (click)=\"tabService.showTabs()\"\n class=\"sky-btn sky-btn-primary sky-vertical-tabset-show-tabs-btn\"\n >\n <sky-icon icon=\"chevron-left\"></sky-icon>\n {{ showTabsText }}\n </button>\n </div>\n</div>\n", styles: [":host .sky-vertical-tabset{display:block;height:auto}:host .sky-vertical-tabset-group-container{border-right:none}:host-context(.sky-responsive-container-xs) .sky-vertical-tabset,:host-context(.sky-responsive-container-sm) .sky-vertical-tabset,:host-context(.sky-responsive-container-md) .sky-vertical-tabset,:host-context(.sky-responsive-container-lg) .sky-vertical-tabset{display:block;height:auto}:host-context(.sky-responsive-container-xs) .sky-vertical-tabset-group-container,:host-context(.sky-responsive-container-sm) .sky-vertical-tabset-group-container,:host-context(.sky-responsive-container-md) .sky-vertical-tabset-group-container,:host-context(.sky-responsive-container-lg) .sky-vertical-tabset-group-container{border-right:none}@media (min-width: 768px){:host .sky-vertical-tabset{display:flex;height:100%}:host .sky-vertical-tabset-group-container{border-right:1px solid #cdcfd2}}:host-context(.sky-responsive-container-sm) .sky-vertical-tabset,:host-context(.sky-responsive-container-md) .sky-vertical-tabset,:host-context(.sky-responsive-container-lg) .sky-vertical-tabset{display:flex;height:100%}:host-context(.sky-responsive-container-sm) .sky-vertical-tabset-group-container,:host-context(.sky-responsive-container-md) .sky-vertical-tabset-group-container,:host-context(.sky-responsive-container-lg) .sky-vertical-tabset-group-container{border-right:1px solid #cdcfd2}.sky-vertical-tabset-hidden{display:none}.sky-vertical-tabset-content{margin:10px 0 0 10px;flex-basis:75%;overflow-y:auto}.sky-vertical-tabset-content-hidden{display:none}.sky-vertical-tabset-show-tabs-btn{margin-top:10px}.sky-vertical-tabset-group-container{flex-basis:25%;overflow-y:auto}:host-context(.sky-theme-modern) .sky-vertical-tabset-content{margin:15px}@media (min-width: 768px){:host-context(.sky-theme-modern) :host .sky-vertical-tabset-content{margin:20px 30px}:host-context(.sky-theme-modern) :host .sky-vertical-tabset-group-container{border-right:1px solid #d2d2d2}}:host-context(.sky-theme-modern) :host-context(.sky-responsive-container-sm) .sky-vertical-tabset-content,:host-context(.sky-theme-modern) :host-context(.sky-responsive-container-md) .sky-vertical-tabset-content,:host-context(.sky-theme-modern) :host-context(.sky-responsive-container-lg) .sky-vertical-tabset-content{margin:20px 30px}:host-context(.sky-theme-modern) :host-context(.sky-responsive-container-sm) .sky-vertical-tabset-group-container,:host-context(.sky-theme-modern) :host-context(.sky-responsive-container-md) .sky-vertical-tabset-group-container,:host-context(.sky-theme-modern) :host-context(.sky-responsive-container-lg) .sky-vertical-tabset-group-container{border-right:1px solid #d2d2d2}.sky-theme-modern .sky-vertical-tabset-content{margin:15px}@media (min-width: 768px){.sky-theme-modern :host .sky-vertical-tabset-content{margin:20px 30px}.sky-theme-modern :host .sky-vertical-tabset-group-container{border-right:1px solid #d2d2d2}}.sky-theme-modern :host-context(.sky-responsive-container-sm) .sky-vertical-tabset-content,.sky-theme-modern :host-context(.sky-responsive-container-md) .sky-vertical-tabset-content,.sky-theme-modern :host-context(.sky-responsive-container-lg) .sky-vertical-tabset-content{margin:20px 30px}.sky-theme-modern :host-context(.sky-responsive-container-sm) .sky-vertical-tabset-group-container,.sky-theme-modern :host-context(.sky-responsive-container-md) .sky-vertical-tabset-group-container,.sky-theme-modern :host-context(.sky-responsive-container-lg) .sky-vertical-tabset-group-container{border-right:1px solid #d2d2d2}\n"] }]
|
|
717
719
|
}], ctorParameters: function () { return [{ type: SkyVerticalTabsetAdapterService }, { type: SkyVerticalTabsetService }, { type: i3.SkyLibResourcesService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { showTabsText: [{
|
|
718
720
|
type: Input
|
|
719
721
|
}], ariaLabel: [{
|
|
@@ -739,8 +741,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImpor
|
|
|
739
741
|
|
|
740
742
|
class SkyVerticalTabsetModule {
|
|
741
743
|
}
|
|
742
|
-
SkyVerticalTabsetModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
743
|
-
SkyVerticalTabsetModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "
|
|
744
|
+
SkyVerticalTabsetModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyVerticalTabsetModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
745
|
+
SkyVerticalTabsetModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.0", ngImport: i0, type: SkyVerticalTabsetModule, declarations: [SkyVerticalTabsetComponent,
|
|
744
746
|
SkyVerticalTabsetGroupComponent,
|
|
745
747
|
SkyVerticalTabComponent], imports: [CommonModule,
|
|
746
748
|
SkyIconModule,
|
|
@@ -751,16 +753,14 @@ SkyVerticalTabsetModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0",
|
|
|
751
753
|
SkyThemeModule], exports: [SkyVerticalTabsetComponent,
|
|
752
754
|
SkyVerticalTabsetGroupComponent,
|
|
753
755
|
SkyVerticalTabComponent] });
|
|
754
|
-
SkyVerticalTabsetModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "
|
|
755
|
-
|
|
756
|
-
|
|
757
|
-
|
|
758
|
-
|
|
759
|
-
|
|
760
|
-
|
|
761
|
-
|
|
762
|
-
]] });
|
|
763
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: SkyVerticalTabsetModule, decorators: [{
|
|
756
|
+
SkyVerticalTabsetModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyVerticalTabsetModule, providers: [SkyVerticalTabsetAdapterService], imports: [CommonModule,
|
|
757
|
+
SkyIconModule,
|
|
758
|
+
SkyIdModule,
|
|
759
|
+
SkyExpansionIndicatorModule,
|
|
760
|
+
SkyStatusIndicatorModule,
|
|
761
|
+
SkyTabsResourcesModule,
|
|
762
|
+
SkyThemeModule] });
|
|
763
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyVerticalTabsetModule, decorators: [{
|
|
764
764
|
type: NgModule,
|
|
765
765
|
args: [{
|
|
766
766
|
declarations: [
|
|
@@ -812,9 +812,9 @@ class SkySectionedFormService {
|
|
|
812
812
|
this.requiredChange.next(isRequired);
|
|
813
813
|
}
|
|
814
814
|
}
|
|
815
|
-
SkySectionedFormService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
816
|
-
SkySectionedFormService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
817
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
815
|
+
SkySectionedFormService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkySectionedFormService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
816
|
+
SkySectionedFormService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkySectionedFormService });
|
|
817
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkySectionedFormService, decorators: [{
|
|
818
818
|
type: Injectable
|
|
819
819
|
}] });
|
|
820
820
|
|
|
@@ -853,9 +853,9 @@ class SkySectionedFormSectionComponent {
|
|
|
853
853
|
this._ngUnsubscribe.complete();
|
|
854
854
|
}
|
|
855
855
|
}
|
|
856
|
-
SkySectionedFormSectionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
857
|
-
SkySectionedFormSectionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
858
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
856
|
+
SkySectionedFormSectionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkySectionedFormSectionComponent, deps: [{ token: SkySectionedFormService }, { token: SkyVerticalTabsetService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
857
|
+
SkySectionedFormSectionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.0", type: SkySectionedFormSectionComponent, selector: "sky-sectioned-form-section", inputs: { heading: "heading", itemCount: "itemCount", active: "active" }, providers: [SkySectionedFormService], viewQueries: [{ propertyName: "tab", first: true, predicate: SkyVerticalTabComponent, descendants: true }], ngImport: i0, template: "<sky-vertical-tab\n [active]=\"active\"\n [errorIndicator]=\"fieldInvalid\"\n [ngClass]=\"{\n 'sky-tab-field-required': fieldRequired\n }\"\n [showTabRightArrow]=\"true\"\n [tabHeaderCount]=\"itemCount\"\n [tabHeading]=\"heading\"\n [tabId]=\"sectionTabId\"\n>\n <ng-content></ng-content>\n</sky-vertical-tab>\n", styles: [":host .sky-tab-field-required ::ng-deep .sky-vertical-tab-heading:after{content:\"*\";color:#ef4044;padding-left:5px}\n"], dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: SkyVerticalTabComponent, selector: "sky-vertical-tab", inputs: ["active", "ariaControls", "ariaRole", "disabled", "errorIndicator", "tabHeaderCount", "tabHeading", "showTabRightArrow", "tabId"] }] });
|
|
858
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkySectionedFormSectionComponent, decorators: [{
|
|
859
859
|
type: Component,
|
|
860
860
|
args: [{ selector: 'sky-sectioned-form-section', providers: [SkySectionedFormService], template: "<sky-vertical-tab\n [active]=\"active\"\n [errorIndicator]=\"fieldInvalid\"\n [ngClass]=\"{\n 'sky-tab-field-required': fieldRequired\n }\"\n [showTabRightArrow]=\"true\"\n [tabHeaderCount]=\"itemCount\"\n [tabHeading]=\"heading\"\n [tabId]=\"sectionTabId\"\n>\n <ng-content></ng-content>\n</sky-vertical-tab>\n", styles: [":host .sky-tab-field-required ::ng-deep .sky-vertical-tab-heading:after{content:\"*\";color:#ef4044;padding-left:5px}\n"] }]
|
|
861
861
|
}], ctorParameters: function () { return [{ type: SkySectionedFormService }, { type: SkyVerticalTabsetService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { heading: [{
|
|
@@ -930,8 +930,8 @@ class SkySectionedFormComponent {
|
|
|
930
930
|
this.changeRef.markForCheck();
|
|
931
931
|
}
|
|
932
932
|
}
|
|
933
|
-
SkySectionedFormComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
934
|
-
SkySectionedFormComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
933
|
+
SkySectionedFormComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkySectionedFormComponent, deps: [{ token: SkyVerticalTabsetService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
934
|
+
SkySectionedFormComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.0", type: SkySectionedFormComponent, selector: "sky-sectioned-form", inputs: { maintainSectionContent: "maintainSectionContent" }, outputs: { indexChanged: "indexChanged" }, providers: [SkyVerticalTabsetService], viewQueries: [{ propertyName: "content", first: true, predicate: ["skySectionSideContent"], descendants: true }], ngImport: i0, template: "<div\n aria-orientation=\"vertical\"\n class=\"sky-sectioned-form\"\n [attr.role]=\"ariaRole\"\n (window:resize)=\"tabService.updateContent()\"\n>\n <div\n *ngIf=\"maintainSectionContent || tabsVisible()\"\n class=\"sky-sectioned-form-tabs\"\n [ngClass]=\"{ 'sky-sectioned-form-tabs-hidden': !tabsVisible() }\"\n [@tabEnter]=\"tabService.animationTabsVisibleState\"\n >\n <ng-content></ng-content>\n </div>\n <div\n *ngIf=\"maintainSectionContent || tabService.contentVisible()\"\n class=\"sky-sectioned-form-content\"\n [ngClass]=\"{\n 'sky-sectioned-form-content-hidden': !tabService.contentVisible()\n }\"\n [@contentEnter]=\"tabService.animationContentVisibleState\"\n #skySectionSideContent\n ></div>\n</div>\n", styles: [":host .sky-sectioned-form{display:block;max-height:none}:host .sky-sectioned-form-content{flex-basis:auto;overflow-y:visible}:host .sky-sectioned-form-tabs{flex-basis:auto;overflow-y:visible;border-right:1px solid #e2e3e4}:host-context(.sky-responsive-container-xs) .sky-sectioned-form,:host-context(.sky-responsive-container-sm) .sky-sectioned-form,:host-context(.sky-responsive-container-md) .sky-sectioned-form,:host-context(.sky-responsive-container-lg) .sky-sectioned-form{display:block;max-height:none}:host-context(.sky-responsive-container-xs) .sky-sectioned-form-content,:host-context(.sky-responsive-container-sm) .sky-sectioned-form-content,:host-context(.sky-responsive-container-md) .sky-sectioned-form-content,:host-context(.sky-responsive-container-lg) .sky-sectioned-form-content{flex-basis:auto;overflow-y:visible}:host-context(.sky-responsive-container-xs) .sky-sectioned-form-tabs,:host-context(.sky-responsive-container-sm) .sky-sectioned-form-tabs,:host-context(.sky-responsive-container-md) .sky-sectioned-form-tabs,:host-context(.sky-responsive-container-lg) .sky-sectioned-form-tabs{flex-basis:auto;overflow-y:visible;border-right:1px solid #e2e3e4}@media (min-width: 768px){:host .sky-sectioned-form{display:flex;max-height:100%}:host .sky-sectioned-form-content{flex-basis:70%;padding:15px;overflow-y:auto}:host .sky-sectioned-form-tabs{flex-basis:30%;overflow-y:auto}}:host-context(.sky-responsive-container-sm) .sky-sectioned-form,:host-context(.sky-responsive-container-md) .sky-sectioned-form,:host-context(.sky-responsive-container-lg) .sky-sectioned-form{display:flex;max-height:100%}:host-context(.sky-responsive-container-sm) .sky-sectioned-form-content,:host-context(.sky-responsive-container-md) .sky-sectioned-form-content,:host-context(.sky-responsive-container-lg) .sky-sectioned-form-content{flex-basis:70%;padding:15px;overflow-y:auto}:host-context(.sky-responsive-container-sm) .sky-sectioned-form-tabs,:host-context(.sky-responsive-container-md) .sky-sectioned-form-tabs,:host-context(.sky-responsive-container-lg) .sky-sectioned-form-tabs{flex-basis:30%;overflow-y:auto}.sky-sectioned-form-tabs-hidden,.sky-sectioned-form-content-hidden{display:none}:host-context(.sky-theme-modern) .sky-sectioned-form-content{padding:15px}:host-context(.sky-theme-modern) .sky-sectioned-form-tabs{border-right:1px solid #d2d2d2}@media (min-width: 768px){:host-context(.sky-theme-modern) :host .sky-sectioned-form-content{margin:20px 30px}}:host-context(.sky-theme-modern) :host-context(.sky-responsive-container-sm) .sky-sectioned-form-content,:host-context(.sky-theme-modern) :host-context(.sky-responsive-container-md) .sky-sectioned-form-content,:host-context(.sky-theme-modern) :host-context(.sky-responsive-container-lg) .sky-sectioned-form-content{margin:20px 30px}.sky-theme-modern .sky-sectioned-form-content{padding:15px}.sky-theme-modern .sky-sectioned-form-tabs{border-right:1px solid #d2d2d2}@media (min-width: 768px){.sky-theme-modern :host .sky-sectioned-form-content{margin:20px 30px}}.sky-theme-modern :host-context(.sky-responsive-container-sm) .sky-sectioned-form-content,.sky-theme-modern :host-context(.sky-responsive-container-md) .sky-sectioned-form-content,.sky-theme-modern :host-context(.sky-responsive-container-lg) .sky-sectioned-form-content{margin:20px 30px}\n"], dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], animations: [
|
|
935
935
|
trigger('tabEnter', [
|
|
936
936
|
transition(`${HIDDEN_STATE} => ${VISIBLE_STATE}`, [
|
|
937
937
|
style({ transform: 'translate(-100%)' }),
|
|
@@ -945,7 +945,7 @@ SkySectionedFormComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.
|
|
|
945
945
|
]),
|
|
946
946
|
]),
|
|
947
947
|
], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
948
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
948
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkySectionedFormComponent, decorators: [{
|
|
949
949
|
type: Component,
|
|
950
950
|
args: [{ selector: 'sky-sectioned-form', providers: [SkyVerticalTabsetService], changeDetection: ChangeDetectionStrategy.OnPush, animations: [
|
|
951
951
|
trigger('tabEnter', [
|
|
@@ -972,18 +972,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImpor
|
|
|
972
972
|
|
|
973
973
|
class SkySectionedFormModule {
|
|
974
974
|
}
|
|
975
|
-
SkySectionedFormModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
976
|
-
SkySectionedFormModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "
|
|
975
|
+
SkySectionedFormModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkySectionedFormModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
976
|
+
SkySectionedFormModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.0", ngImport: i0, type: SkySectionedFormModule, declarations: [SkySectionedFormComponent, SkySectionedFormSectionComponent], imports: [CommonModule,
|
|
977
977
|
SkyCheckboxModule,
|
|
978
978
|
SkyThemeModule,
|
|
979
979
|
SkyVerticalTabsetModule], exports: [SkySectionedFormComponent, SkySectionedFormSectionComponent] });
|
|
980
|
-
SkySectionedFormModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "
|
|
981
|
-
|
|
982
|
-
|
|
983
|
-
|
|
984
|
-
|
|
985
|
-
]] });
|
|
986
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: SkySectionedFormModule, decorators: [{
|
|
980
|
+
SkySectionedFormModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkySectionedFormModule, imports: [CommonModule,
|
|
981
|
+
SkyCheckboxModule,
|
|
982
|
+
SkyThemeModule,
|
|
983
|
+
SkyVerticalTabsetModule] });
|
|
984
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkySectionedFormModule, decorators: [{
|
|
987
985
|
type: NgModule,
|
|
988
986
|
args: [{
|
|
989
987
|
declarations: [SkySectionedFormComponent, SkySectionedFormSectionComponent],
|
|
@@ -1033,9 +1031,9 @@ class SkyTabButtonComponent {
|
|
|
1033
1031
|
event.preventDefault();
|
|
1034
1032
|
}
|
|
1035
1033
|
}
|
|
1036
|
-
SkyTabButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1037
|
-
SkyTabButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
1038
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1034
|
+
SkyTabButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyTabButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1035
|
+
SkyTabButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.0", type: SkyTabButtonComponent, selector: "sky-tab-button", inputs: { active: "active", ariaControls: "ariaControls", buttonHref: "buttonHref", buttonId: "buttonId", buttonText: "buttonText", buttonTextCount: "buttonTextCount", closeable: "closeable", disabled: "disabled", tabStyle: "tabStyle" }, outputs: { buttonClick: "buttonClick", closeClick: "closeClick" }, ngImport: i0, template: "<div\n class=\"sky-btn-tab-wrapper\"\n [ngClass]=\"{\n 'sky-btn-tab-wrapper-selected': active,\n 'sky-btn-tab-wrapper-disabled': disabled\n }\"\n>\n <a\n class=\"sky-btn-tab\"\n role=\"tab\"\n [attr.aria-controls]=\"ariaControls\"\n [attr.aria-disabled]=\"disabled\"\n [attr.aria-selected]=\"active\"\n [attr.href]=\"buttonHref\"\n [id]=\"buttonId\"\n [ngClass]=\"{\n 'sky-btn-tab-wizard': tabStyle === 'wizard',\n 'sky-btn-tab-selected': active,\n 'sky-btn-tab-disabled': disabled,\n 'sky-tab-btn-closeable': closeable\n }\"\n [tabindex]=\"disabled ? '-1' : '0'\"\n (click)=\"onButtonClick($event)\"\n (keydown)=\"onTabButtonKeyDown($event)\"\n >\n <span class=\"sky-tab-heading\">\n {{ buttonText }}\n <span *ngIf=\"buttonTextCount !== undefined\" class=\"sky-tab-header-count\">\n {{ buttonTextCount }}\n </span>\n </span>\n </a>\n\n <button\n *ngIf=\"closeable\"\n class=\"sky-btn-tab-close\"\n type=\"button\"\n [attr.aria-label]=\"'skyux_tab_close' | skyLibResources: buttonText\"\n [disabled]=\"disabled\"\n [ngClass]=\"{\n 'sky-btn-tab-close-disabled': disabled\n }\"\n (click)=\"onCloseClick($event)\"\n >\n <sky-icon icon=\"remove\"></sky-icon>\n </button>\n</div>\n", styles: [".sky-btn-tab-wrapper{display:inline-block;position:relative;margin-right:5px}.sky-btn-tab-wrapper .sky-btn-tab-close{position:absolute;top:10px;right:10px;color:#686c73}.sky-btn-tab-wrapper .sky-btn-tab-close:hover{color:#212327;transition:color .15s}.sky-btn-tab-wrapper.sky-btn-tab-wrapper-selected:not(.sky-btn-tab-wrapper-disabled) .sky-btn-tab-close{color:#fff}.sky-btn-tab-wrapper.sky-btn-tab-wrapper-disabled{cursor:not-allowed}.sky-tab-btn-closeable{padding-right:43px}:host-context(.sky-theme-modern) .sky-btn-tab-wrapper{margin-right:10px}:host-context(.sky-theme-modern) .sky-btn-tab-wrapper .sky-btn-tab-close{top:12px;right:10px}:host-context(.sky-theme-modern) .sky-btn-tab-wrapper.sky-btn-tab-wrapper-selected:not(.sky-btn-tab-wrapper-disabled) .sky-btn-tab-close{color:#686c73}:host-context(.sky-theme-modern) .sky-tab-btn-closeable{padding-right:44px}.sky-theme-modern .sky-btn-tab-wrapper{margin-right:10px}.sky-theme-modern .sky-btn-tab-wrapper .sky-btn-tab-close{top:12px;right:10px}.sky-theme-modern .sky-btn-tab-wrapper.sky-btn-tab-wrapper-selected:not(.sky-btn-tab-wrapper-disabled) .sky-btn-tab-close{color:#686c73}.sky-theme-modern .sky-tab-btn-closeable{padding-right:44px}:host-context(.sky-theme-modern.sky-theme-mode-dark) .sky-btn-tab-wrapper .sky-btn-tab-close{color:#eeeeef}:host-context(.sky-theme-modern.sky-theme-mode-dark) .sky-btn-tab-wrapper.sky-btn-tab-wrapper-selected:not(.sky-btn-tab-wrapper-disabled) .sky-btn-tab-close{color:#eeeeef}.sky-theme-modern.sky-theme-mode-dark .sky-btn-tab-wrapper .sky-btn-tab-close{color:#eeeeef}.sky-theme-modern.sky-theme-mode-dark .sky-btn-tab-wrapper.sky-btn-tab-wrapper-selected:not(.sky-btn-tab-wrapper-disabled) .sky-btn-tab-close{color:#eeeeef}\n"], dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i5.λ4, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }, { kind: "pipe", type: i3.SkyLibResourcesPipe, name: "skyLibResources" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
1036
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyTabButtonComponent, decorators: [{
|
|
1039
1037
|
type: Component,
|
|
1040
1038
|
args: [{ selector: 'sky-tab-button', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div\n class=\"sky-btn-tab-wrapper\"\n [ngClass]=\"{\n 'sky-btn-tab-wrapper-selected': active,\n 'sky-btn-tab-wrapper-disabled': disabled\n }\"\n>\n <a\n class=\"sky-btn-tab\"\n role=\"tab\"\n [attr.aria-controls]=\"ariaControls\"\n [attr.aria-disabled]=\"disabled\"\n [attr.aria-selected]=\"active\"\n [attr.href]=\"buttonHref\"\n [id]=\"buttonId\"\n [ngClass]=\"{\n 'sky-btn-tab-wizard': tabStyle === 'wizard',\n 'sky-btn-tab-selected': active,\n 'sky-btn-tab-disabled': disabled,\n 'sky-tab-btn-closeable': closeable\n }\"\n [tabindex]=\"disabled ? '-1' : '0'\"\n (click)=\"onButtonClick($event)\"\n (keydown)=\"onTabButtonKeyDown($event)\"\n >\n <span class=\"sky-tab-heading\">\n {{ buttonText }}\n <span *ngIf=\"buttonTextCount !== undefined\" class=\"sky-tab-header-count\">\n {{ buttonTextCount }}\n </span>\n </span>\n </a>\n\n <button\n *ngIf=\"closeable\"\n class=\"sky-btn-tab-close\"\n type=\"button\"\n [attr.aria-label]=\"'skyux_tab_close' | skyLibResources: buttonText\"\n [disabled]=\"disabled\"\n [ngClass]=\"{\n 'sky-btn-tab-close-disabled': disabled\n }\"\n (click)=\"onCloseClick($event)\"\n >\n <sky-icon icon=\"remove\"></sky-icon>\n </button>\n</div>\n", styles: [".sky-btn-tab-wrapper{display:inline-block;position:relative;margin-right:5px}.sky-btn-tab-wrapper .sky-btn-tab-close{position:absolute;top:10px;right:10px;color:#686c73}.sky-btn-tab-wrapper .sky-btn-tab-close:hover{color:#212327;transition:color .15s}.sky-btn-tab-wrapper.sky-btn-tab-wrapper-selected:not(.sky-btn-tab-wrapper-disabled) .sky-btn-tab-close{color:#fff}.sky-btn-tab-wrapper.sky-btn-tab-wrapper-disabled{cursor:not-allowed}.sky-tab-btn-closeable{padding-right:43px}:host-context(.sky-theme-modern) .sky-btn-tab-wrapper{margin-right:10px}:host-context(.sky-theme-modern) .sky-btn-tab-wrapper .sky-btn-tab-close{top:12px;right:10px}:host-context(.sky-theme-modern) .sky-btn-tab-wrapper.sky-btn-tab-wrapper-selected:not(.sky-btn-tab-wrapper-disabled) .sky-btn-tab-close{color:#686c73}:host-context(.sky-theme-modern) .sky-tab-btn-closeable{padding-right:44px}.sky-theme-modern .sky-btn-tab-wrapper{margin-right:10px}.sky-theme-modern .sky-btn-tab-wrapper .sky-btn-tab-close{top:12px;right:10px}.sky-theme-modern .sky-btn-tab-wrapper.sky-btn-tab-wrapper-selected:not(.sky-btn-tab-wrapper-disabled) .sky-btn-tab-close{color:#686c73}.sky-theme-modern .sky-tab-btn-closeable{padding-right:44px}:host-context(.sky-theme-modern.sky-theme-mode-dark) .sky-btn-tab-wrapper .sky-btn-tab-close{color:#eeeeef}:host-context(.sky-theme-modern.sky-theme-mode-dark) .sky-btn-tab-wrapper.sky-btn-tab-wrapper-selected:not(.sky-btn-tab-wrapper-disabled) .sky-btn-tab-close{color:#eeeeef}.sky-theme-modern.sky-theme-mode-dark .sky-btn-tab-wrapper .sky-btn-tab-close{color:#eeeeef}.sky-theme-modern.sky-theme-mode-dark .sky-btn-tab-wrapper.sky-btn-tab-wrapper-selected:not(.sky-btn-tab-wrapper-disabled) .sky-btn-tab-close{color:#eeeeef}\n"] }]
|
|
1041
1039
|
}], propDecorators: { active: [{
|
|
@@ -1173,11 +1171,11 @@ class SkyTabsetPermalinkService {
|
|
|
1173
1171
|
return params;
|
|
1174
1172
|
}
|
|
1175
1173
|
}
|
|
1176
|
-
SkyTabsetPermalinkService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1177
|
-
SkyTabsetPermalinkService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
1178
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1174
|
+
SkyTabsetPermalinkService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyTabsetPermalinkService, deps: [{ token: i1$1.ActivatedRoute }, { token: i4.Location }, { token: i1$1.Router }], target: i0.ɵɵFactoryTarget.Injectable });
|
|
1175
|
+
SkyTabsetPermalinkService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyTabsetPermalinkService });
|
|
1176
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyTabsetPermalinkService, decorators: [{
|
|
1179
1177
|
type: Injectable
|
|
1180
|
-
}], ctorParameters: function () { return [{ type: i1$1.ActivatedRoute }, { type:
|
|
1178
|
+
}], ctorParameters: function () { return [{ type: i1$1.ActivatedRoute }, { type: i4.Location }, { type: i1$1.Router }]; } });
|
|
1181
1179
|
|
|
1182
1180
|
/**
|
|
1183
1181
|
* @internal
|
|
@@ -1280,9 +1278,9 @@ class SkyTabsetService {
|
|
|
1280
1278
|
return this.tabIndexesEqual(tabIndex, this.currentActiveTabIndex);
|
|
1281
1279
|
}
|
|
1282
1280
|
}
|
|
1283
|
-
SkyTabsetService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1284
|
-
SkyTabsetService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
1285
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1281
|
+
SkyTabsetService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyTabsetService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
1282
|
+
SkyTabsetService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyTabsetService });
|
|
1283
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyTabsetService, decorators: [{
|
|
1286
1284
|
type: Injectable
|
|
1287
1285
|
}] });
|
|
1288
1286
|
|
|
@@ -1391,9 +1389,9 @@ class SkyTabComponent {
|
|
|
1391
1389
|
this.changeDetector.markForCheck();
|
|
1392
1390
|
}
|
|
1393
1391
|
}
|
|
1394
|
-
SkyTabComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1395
|
-
SkyTabComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
1396
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1392
|
+
SkyTabComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyTabComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: SkyTabsetPermalinkService }, { token: SkyTabsetService }], target: i0.ɵɵFactoryTarget.Component });
|
|
1393
|
+
SkyTabComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.0", type: SkyTabComponent, selector: "sky-tab", inputs: { active: "active", disabled: "disabled", permalinkValue: "permalinkValue", tabHeaderCount: "tabHeaderCount", tabHeading: "tabHeading", tabIndex: "tabIndex" }, outputs: { close: "close" }, usesOnChanges: true, ngImport: i0, template: "<div\n class=\"sky-tab\"\n role=\"tabpanel\"\n [attr.aria-labelledby]=\"tabButtonId\"\n [hidden]=\"!showContent\"\n [id]=\"tabPanelId\"\n>\n <ng-content></ng-content>\n</div>\n", changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1394
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyTabComponent, decorators: [{
|
|
1397
1395
|
type: Component,
|
|
1398
1396
|
args: [{ selector: 'sky-tab', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n class=\"sky-tab\"\n role=\"tabpanel\"\n [attr.aria-labelledby]=\"tabButtonId\"\n [hidden]=\"!showContent\"\n [id]=\"tabPanelId\"\n>\n <ng-content></ng-content>\n</div>\n" }]
|
|
1399
1397
|
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: SkyTabsetPermalinkService }, { type: SkyTabsetService }]; }, propDecorators: { active: [{
|
|
@@ -1459,12 +1457,13 @@ class SkyTabsetAdapterService {
|
|
|
1459
1457
|
return firstTabRect.left - tabsetRect.left;
|
|
1460
1458
|
}
|
|
1461
1459
|
}
|
|
1462
|
-
SkyTabsetAdapterService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1463
|
-
SkyTabsetAdapterService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
1464
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1460
|
+
SkyTabsetAdapterService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyTabsetAdapterService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
1461
|
+
SkyTabsetAdapterService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyTabsetAdapterService });
|
|
1462
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyTabsetAdapterService, decorators: [{
|
|
1465
1463
|
type: Injectable
|
|
1466
1464
|
}] });
|
|
1467
1465
|
|
|
1466
|
+
var _SkyTabsetComponent__hasFinishButton;
|
|
1468
1467
|
class SkyTabsetComponent {
|
|
1469
1468
|
constructor(changeDetector, elementRef, adapterService, permalinkService, tabsetService) {
|
|
1470
1469
|
this.changeDetector = changeDetector;
|
|
@@ -1496,6 +1495,7 @@ class SkyTabsetComponent {
|
|
|
1496
1495
|
this.tabButtons = [];
|
|
1497
1496
|
this.ngUnsubscribe = new Subject();
|
|
1498
1497
|
this.tabComponentsStateChangeUnsubscribe = new Subject();
|
|
1498
|
+
_SkyTabsetComponent__hasFinishButton.set(this, false);
|
|
1499
1499
|
}
|
|
1500
1500
|
/**
|
|
1501
1501
|
* Activates a tab by its `tabIndex` property.
|
|
@@ -1562,6 +1562,12 @@ class SkyTabsetComponent {
|
|
|
1562
1562
|
get tabDisplayMode() {
|
|
1563
1563
|
return this._tabDisplayMode || 'tabs';
|
|
1564
1564
|
}
|
|
1565
|
+
get hasFinishButton() {
|
|
1566
|
+
return __classPrivateFieldGet(this, _SkyTabsetComponent__hasFinishButton, "f");
|
|
1567
|
+
}
|
|
1568
|
+
set hasFinishButton(value) {
|
|
1569
|
+
__classPrivateFieldSet(this, _SkyTabsetComponent__hasFinishButton, value, "f");
|
|
1570
|
+
}
|
|
1565
1571
|
ngAfterViewInit() {
|
|
1566
1572
|
this.initTabComponents();
|
|
1567
1573
|
this.listenTabComponentsStructuralChange();
|
|
@@ -1803,13 +1809,14 @@ class SkyTabsetComponent {
|
|
|
1803
1809
|
}
|
|
1804
1810
|
}
|
|
1805
1811
|
}
|
|
1806
|
-
|
|
1807
|
-
SkyTabsetComponent.ɵ
|
|
1812
|
+
_SkyTabsetComponent__hasFinishButton = new WeakMap();
|
|
1813
|
+
SkyTabsetComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyTabsetComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: SkyTabsetAdapterService }, { token: SkyTabsetPermalinkService }, { token: SkyTabsetService }], target: i0.ɵɵFactoryTarget.Component });
|
|
1814
|
+
SkyTabsetComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.0", type: SkyTabsetComponent, selector: "sky-tabset", inputs: { active: "active", ariaLabel: "ariaLabel", ariaLabelledBy: "ariaLabelledBy", permalinkId: "permalinkId", tabStyle: "tabStyle" }, outputs: { activeChange: "activeChange", newTab: "newTab", openTab: "openTab", tabIndexesChange: "tabIndexesChange" }, providers: [
|
|
1808
1815
|
SkyTabsetAdapterService,
|
|
1809
1816
|
SkyTabsetPermalinkService,
|
|
1810
1817
|
SkyTabsetService,
|
|
1811
|
-
], queries: [{ propertyName: "tabs", predicate: SkyTabComponent }], ngImport: i0, template: "<div\n class=\"sky-tabset\"\n role=\"tablist\"\n [attr.aria-label]=\"ariaLabel\"\n [attr.aria-labelledby]=\"ariaLabelledBy\"\n [ngClass]=\"\n 'sky-tabset-mode-' + tabDisplayMode + ' sky-tabset-style-' + tabStyle\n \"\n (window:resize)=\"onWindowResize()\"\n>\n <span class=\"sky-tabset-dropdown\">\n <sky-dropdown *ngIf=\"tabDisplayMode === 'dropdown'\" buttonType=\"tab\">\n <sky-dropdown-button>\n {{ dropdownTriggerButtonText }}\n </sky-dropdown-button>\n <sky-dropdown-menu>\n <sky-dropdown-item\n *ngFor=\"let tabButton of tabButtons\"\n class=\"sky-tab-dropdown-menu-item\"\n >\n <div\n class=\"sky-tab-dropdown-item\"\n [ngClass]=\"{\n 'sky-tab-dropdown-item-selected': tabButton.active\n }\"\n >\n <ng-container\n *ngTemplateOutlet=\"\n tabButtonTemplate;\n context: {\n $implicit: tabButton\n }\n \"\n ></ng-container>\n </div>\n </sky-dropdown-item>\n </sky-dropdown-menu>\n </sky-dropdown>\n </span>\n <span class=\"sky-tabset-tabs\">\n <ng-container *ngFor=\"let tabButton of tabButtons\">\n <ng-container\n *ngTemplateOutlet=\"\n tabButtonTemplate;\n context: {\n $implicit: tabButton\n }\n \"\n ></ng-container>\n </ng-container>\n </span>\n <span class=\"sky-tabset-btns\">\n <button\n *ngIf=\"newTab.observers.length > 0\"\n class=\"sky-btn sky-btn-icon sky-tabset-btn-new sky-margin-inline-compact\"\n type=\"button\"\n [attr.aria-label]=\"'skyux_tab_add' | skyLibResources\"\n [skyThemeClass]=\"{\n 'sky-margin-inline-sm': 'modern'\n }\"\n (click)=\"onNewTabClick()\"\n >\n <sky-icon icon=\"plus-circle\" size=\"lg\"> </sky-icon>\n </button>\n <button\n *ngIf=\"openTab.observers.length > 0\"\n class=\"sky-btn sky-btn-icon sky-tabset-btn-open sky-margin-inline-compact\"\n type=\"button\"\n [attr.aria-label]=\"'skyux_tab_open' | skyLibResources\"\n [skyThemeClass]=\"{\n 'sky-margin-inline-sm': 'modern'\n }\"\n (click)=\"onOpenTabClick()\"\n >\n <sky-icon icon=\"folder-open-o\" size=\"lg\"> </sky-icon>\n </button>\n </span>\n</div>\n<ng-content></ng-content>\n\n<ng-template let-tabButton #tabButtonTemplate>\n <sky-tab-button\n [active]=\"tabButton.active\"\n [ariaControls]=\"tabButton.ariaControls\"\n [buttonHref]=\"tabButton.buttonHref\"\n [buttonId]=\"tabButton.buttonId\"\n [buttonText]=\"tabButton.buttonText\"\n [buttonTextCount]=\"tabButton.buttonTextCount\"\n [closeable]=\"tabButton.closeable\"\n [disabled]=\"tabButton.disabled\"\n [tabStyle]=\"tabStyle\"\n (buttonClick)=\"onTabButtonClick(tabButton)\"\n (closeClick)=\"onTabCloseClick(tabButton)\"\n ></sky-tab-button>\n</ng-template>\n", styles: [".sky-tabset{align-items:center;border-bottom:2px solid #0974a1;display:flex;list-style-type:none;margin:0;overflow:hidden;padding:0 0 0 15px;white-space:nowrap}.sky-tabset.sky-tabset-style-wizard{border-bottom:none;margin-bottom:10px;padding-left:0}.sky-tabset-btns{order:1;padding-left:10px}.sky-tabset-dropdown{order:0;max-width:100%}.sky-tabset-mode-dropdown{line-height:0}.sky-tabset-mode-dropdown .sky-tabset-tabs{visibility:hidden;order:2}.sky-tab-dropdown-menu-item sky-tab-button{display:flex;min-width:300px}.sky-tab-dropdown-menu-item .sky-dropdown-item{margin:0}.sky-tab-dropdown-menu-item .sky-btn-tab-wrapper{width:100%;margin-right:0}.sky-tab-dropdown-menu-item .sky-btn-tab{margin:0;border-radius:0;width:100%;display:flex}.sky-tab-dropdown-menu-item .sky-btn-tab>.sky-tab-heading{flex:1 1 auto}.sky-tab-dropdown-menu-item .sky-btn-tab>.sky-btn-tab-close{flex:0 1 auto}.sky-tabset-tabs{order:0;white-space:nowrap}.sky-tabset-btn-new,.sky-tabset-btn-open{color:#0974a1}.sky-theme-modern .sky-modal-content .sky-tabset{margin:-10px -30px 30px;padding-left:30px;padding-right:30px}.sky-theme-modern .sky-tabset{border-bottom:1px solid #d2d2d2;overflow:visible}.sky-theme-modern .sky-tab-dropdown-menu-item .sky-btn-tab-wrapper{margin-right:0}\n"],
|
|
1812
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1818
|
+
], queries: [{ propertyName: "tabs", predicate: SkyTabComponent }], ngImport: i0, template: "<div\n class=\"sky-tabset\"\n role=\"tablist\"\n [attr.aria-label]=\"ariaLabel\"\n [attr.aria-labelledby]=\"ariaLabelledBy\"\n [ngClass]=\"\n 'sky-tabset-mode-' + tabDisplayMode + ' sky-tabset-style-' + tabStyle\n \"\n (window:resize)=\"onWindowResize()\"\n>\n <span class=\"sky-tabset-dropdown\">\n <sky-dropdown *ngIf=\"tabDisplayMode === 'dropdown'\" buttonType=\"tab\">\n <sky-dropdown-button>\n {{ dropdownTriggerButtonText }}\n </sky-dropdown-button>\n <sky-dropdown-menu>\n <sky-dropdown-item\n *ngFor=\"let tabButton of tabButtons\"\n class=\"sky-tab-dropdown-menu-item\"\n >\n <div\n class=\"sky-tab-dropdown-item\"\n [ngClass]=\"{\n 'sky-tab-dropdown-item-selected': tabButton.active\n }\"\n >\n <ng-container\n *ngTemplateOutlet=\"\n tabButtonTemplate;\n context: {\n $implicit: tabButton\n }\n \"\n ></ng-container>\n </div>\n </sky-dropdown-item>\n </sky-dropdown-menu>\n </sky-dropdown>\n </span>\n <span class=\"sky-tabset-tabs\">\n <ng-container *ngFor=\"let tabButton of tabButtons\">\n <ng-container\n *ngTemplateOutlet=\"\n tabButtonTemplate;\n context: {\n $implicit: tabButton\n }\n \"\n ></ng-container>\n </ng-container>\n </span>\n <span class=\"sky-tabset-btns\">\n <button\n *ngIf=\"newTab.observers.length > 0\"\n class=\"sky-btn sky-btn-icon sky-tabset-btn-new sky-margin-inline-compact\"\n type=\"button\"\n [attr.aria-label]=\"'skyux_tab_add' | skyLibResources\"\n [skyThemeClass]=\"{\n 'sky-margin-inline-sm': 'modern'\n }\"\n (click)=\"onNewTabClick()\"\n >\n <sky-icon icon=\"plus-circle\" size=\"lg\"> </sky-icon>\n </button>\n <button\n *ngIf=\"openTab.observers.length > 0\"\n class=\"sky-btn sky-btn-icon sky-tabset-btn-open sky-margin-inline-compact\"\n type=\"button\"\n [attr.aria-label]=\"'skyux_tab_open' | skyLibResources\"\n [skyThemeClass]=\"{\n 'sky-margin-inline-sm': 'modern'\n }\"\n (click)=\"onOpenTabClick()\"\n >\n <sky-icon icon=\"folder-open-o\" size=\"lg\"> </sky-icon>\n </button>\n </span>\n</div>\n<ng-content></ng-content>\n\n<ng-template let-tabButton #tabButtonTemplate>\n <sky-tab-button\n [active]=\"tabButton.active\"\n [ariaControls]=\"tabButton.ariaControls\"\n [buttonHref]=\"tabButton.buttonHref\"\n [buttonId]=\"tabButton.buttonId\"\n [buttonText]=\"tabButton.buttonText\"\n [buttonTextCount]=\"tabButton.buttonTextCount\"\n [closeable]=\"tabButton.closeable\"\n [disabled]=\"tabButton.disabled\"\n [tabStyle]=\"tabStyle\"\n (buttonClick)=\"onTabButtonClick(tabButton)\"\n (closeClick)=\"onTabCloseClick(tabButton)\"\n ></sky-tab-button>\n</ng-template>\n", styles: [".sky-tabset{align-items:center;border-bottom:2px solid #0974a1;display:flex;list-style-type:none;margin:0;overflow:hidden;padding:0 0 0 15px;white-space:nowrap}.sky-tabset.sky-tabset-style-wizard{border-bottom:none;margin-bottom:10px;padding-left:0}.sky-tabset-btns{order:1;padding-left:10px}.sky-tabset-dropdown{order:0;max-width:100%}.sky-tabset-mode-dropdown{line-height:0}.sky-tabset-mode-dropdown .sky-tabset-tabs{visibility:hidden;order:2}.sky-tab-dropdown-menu-item sky-tab-button{display:flex;min-width:300px}.sky-tab-dropdown-menu-item .sky-dropdown-item{margin:0}.sky-tab-dropdown-menu-item .sky-btn-tab-wrapper{width:100%;margin-right:0}.sky-tab-dropdown-menu-item .sky-btn-tab{margin:0;border-radius:0;width:100%;display:flex}.sky-tab-dropdown-menu-item .sky-btn-tab>.sky-tab-heading{flex:1 1 auto}.sky-tab-dropdown-menu-item .sky-btn-tab>.sky-btn-tab-close{flex:0 1 auto}.sky-tabset-tabs{order:0;white-space:nowrap}.sky-tabset-btn-new,.sky-tabset-btn-open{color:#0974a1}.sky-theme-modern .sky-modal-content .sky-tabset{margin:-10px -30px 30px;padding-left:30px;padding-right:30px}.sky-theme-modern .sky-tabset{border-bottom:1px solid #d2d2d2;overflow:visible}.sky-theme-modern .sky-tab-dropdown-menu-item .sky-btn-tab-wrapper{margin-right:0}\n"], dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i5$1.λ2, selector: "sky-dropdown-button" }, { kind: "component", type: i5$1.λ3, selector: "sky-dropdown", inputs: ["buttonStyle", "buttonType", "disabled", "dismissOnBlur", "label", "horizontalAlignment", "messageStream", "title", "trigger"] }, { kind: "component", type: i5$1.λ1, selector: "sky-dropdown-item", inputs: ["ariaRole"] }, { kind: "component", type: i5$1.λ4, selector: "sky-dropdown-menu", inputs: ["ariaLabelledBy", "ariaRole", "useNativeFocus"], outputs: ["menuChanges"] }, { kind: "component", type: i5.λ4, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }, { kind: "directive", type: i7.λ2, selector: "[skyThemeClass]", inputs: ["class", "skyThemeClass"] }, { kind: "component", type: SkyTabButtonComponent, selector: "sky-tab-button", inputs: ["active", "ariaControls", "buttonHref", "buttonId", "buttonText", "buttonTextCount", "closeable", "disabled", "tabStyle"], outputs: ["buttonClick", "closeClick"] }, { kind: "pipe", type: i3.SkyLibResourcesPipe, name: "skyLibResources" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
1819
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyTabsetComponent, decorators: [{
|
|
1813
1820
|
type: Component,
|
|
1814
1821
|
args: [{ selector: 'sky-tabset', providers: [
|
|
1815
1822
|
SkyTabsetAdapterService,
|
|
@@ -1839,119 +1846,160 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImpor
|
|
|
1839
1846
|
args: [SkyTabComponent]
|
|
1840
1847
|
}] } });
|
|
1841
1848
|
|
|
1849
|
+
var _SkyTabsetNavButtonComponent_instances, _SkyTabsetNavButtonComponent__buttonType, _SkyTabsetNavButtonComponent__disabled, _SkyTabsetNavButtonComponent__tabset, _SkyTabsetNavButtonComponent_activeIndexNumber, _SkyTabsetNavButtonComponent_activeSkyTabIndex, _SkyTabsetNavButtonComponent_currentTabsetSub, _SkyTabsetNavButtonComponent_logger, _SkyTabsetNavButtonComponent_tabCount, _SkyTabsetNavButtonComponent_tabToSelect, _SkyTabsetNavButtonComponent_ngUnsubscribe, _SkyTabsetNavButtonComponent_updateButtonVisibility, _SkyTabsetNavButtonComponent_updateButtonProperties, _SkyTabsetNavButtonComponent_updateTabToSelect;
|
|
1842
1850
|
const buttonTypeNext = 'next';
|
|
1843
1851
|
const buttonTypePrevious = 'previous';
|
|
1844
|
-
|
|
1845
|
-
* @internal
|
|
1846
|
-
*/
|
|
1852
|
+
const buttonTypeFinish = 'finish';
|
|
1847
1853
|
class SkyTabsetNavButtonComponent {
|
|
1848
|
-
constructor(
|
|
1849
|
-
this
|
|
1850
|
-
this.
|
|
1851
|
-
|
|
1852
|
-
|
|
1853
|
-
this
|
|
1854
|
+
constructor(logger) {
|
|
1855
|
+
_SkyTabsetNavButtonComponent_instances.add(this);
|
|
1856
|
+
this.isVisible = false;
|
|
1857
|
+
_SkyTabsetNavButtonComponent__buttonType.set(this, void 0);
|
|
1858
|
+
_SkyTabsetNavButtonComponent__disabled.set(this, void 0);
|
|
1859
|
+
_SkyTabsetNavButtonComponent__tabset.set(this, void 0);
|
|
1860
|
+
_SkyTabsetNavButtonComponent_activeIndexNumber.set(this, void 0);
|
|
1861
|
+
_SkyTabsetNavButtonComponent_activeSkyTabIndex.set(this, void 0);
|
|
1862
|
+
_SkyTabsetNavButtonComponent_currentTabsetSub.set(this, void 0);
|
|
1863
|
+
_SkyTabsetNavButtonComponent_logger.set(this, void 0);
|
|
1864
|
+
_SkyTabsetNavButtonComponent_tabCount.set(this, void 0);
|
|
1865
|
+
_SkyTabsetNavButtonComponent_tabToSelect.set(this, void 0);
|
|
1866
|
+
_SkyTabsetNavButtonComponent_ngUnsubscribe.set(this, new Subject());
|
|
1867
|
+
__classPrivateFieldSet(this, _SkyTabsetNavButtonComponent_logger, logger, "f");
|
|
1854
1868
|
}
|
|
1855
|
-
|
|
1856
|
-
|
|
1857
|
-
|
|
1869
|
+
/**
|
|
1870
|
+
* Specifies the tabset wizard component to associate with the nav button.
|
|
1871
|
+
* @required
|
|
1872
|
+
*/
|
|
1873
|
+
set tabset(value) {
|
|
1874
|
+
__classPrivateFieldSet(this, _SkyTabsetNavButtonComponent__tabset, value, "f");
|
|
1875
|
+
if (__classPrivateFieldGet(this, _SkyTabsetNavButtonComponent_currentTabsetSub, "f")) {
|
|
1876
|
+
__classPrivateFieldGet(this, _SkyTabsetNavButtonComponent_currentTabsetSub, "f").unsubscribe();
|
|
1877
|
+
}
|
|
1878
|
+
if (value) {
|
|
1879
|
+
if (__classPrivateFieldGet(this, _SkyTabsetNavButtonComponent__buttonType, "f") === buttonTypeFinish) {
|
|
1880
|
+
__classPrivateFieldGet(this, _SkyTabsetNavButtonComponent__tabset, "f").hasFinishButton = true;
|
|
1881
|
+
}
|
|
1882
|
+
__classPrivateFieldSet(this, _SkyTabsetNavButtonComponent_currentTabsetSub, __classPrivateFieldGet(this, _SkyTabsetNavButtonComponent__tabset, "f").activeChange
|
|
1883
|
+
.pipe(distinctUntilChanged(), takeUntil(__classPrivateFieldGet(this, _SkyTabsetNavButtonComponent_ngUnsubscribe, "f")))
|
|
1884
|
+
.subscribe((index) => {
|
|
1885
|
+
__classPrivateFieldSet(this, _SkyTabsetNavButtonComponent_activeSkyTabIndex, index, "f");
|
|
1886
|
+
__classPrivateFieldSet(this, _SkyTabsetNavButtonComponent_tabCount, __classPrivateFieldGet(this, _SkyTabsetNavButtonComponent__tabset, "f").tabs.length, "f");
|
|
1887
|
+
__classPrivateFieldGet(this, _SkyTabsetNavButtonComponent_instances, "m", _SkyTabsetNavButtonComponent_updateTabToSelect).call(this);
|
|
1888
|
+
__classPrivateFieldGet(this, _SkyTabsetNavButtonComponent_instances, "m", _SkyTabsetNavButtonComponent_updateButtonVisibility).call(this);
|
|
1889
|
+
__classPrivateFieldGet(this, _SkyTabsetNavButtonComponent_instances, "m", _SkyTabsetNavButtonComponent_updateButtonProperties).call(this);
|
|
1890
|
+
}), "f");
|
|
1858
1891
|
}
|
|
1859
|
-
|
|
1860
|
-
|
|
1861
|
-
return this.previousButtonText;
|
|
1862
|
-
case buttonTypeNext:
|
|
1863
|
-
return this.nextButtonText;
|
|
1864
|
-
/* istanbul ignore next */
|
|
1865
|
-
default:
|
|
1866
|
-
return '';
|
|
1892
|
+
else {
|
|
1893
|
+
__classPrivateFieldGet(this, _SkyTabsetNavButtonComponent_logger, "f").error('The SkyTabsetNavButtonComponent requires a reference to the SkyTabsetComponent it controls.');
|
|
1867
1894
|
}
|
|
1868
1895
|
}
|
|
1869
|
-
|
|
1870
|
-
|
|
1871
|
-
|
|
1872
|
-
|
|
1873
|
-
|
|
1874
|
-
|
|
1875
|
-
case buttonTypeNext:
|
|
1876
|
-
tabToSelect = this.nextTab;
|
|
1877
|
-
break;
|
|
1878
|
-
/* istanbul ignore next */
|
|
1879
|
-
default:
|
|
1880
|
-
break;
|
|
1881
|
-
}
|
|
1882
|
-
return !tabToSelect || tabToSelect.disabled;
|
|
1896
|
+
/**
|
|
1897
|
+
* Specifies the type of nav button to include.
|
|
1898
|
+
* @required
|
|
1899
|
+
*/
|
|
1900
|
+
get buttonType() {
|
|
1901
|
+
return __classPrivateFieldGet(this, _SkyTabsetNavButtonComponent__buttonType, "f");
|
|
1883
1902
|
}
|
|
1884
|
-
|
|
1885
|
-
|
|
1886
|
-
|
|
1887
|
-
|
|
1903
|
+
set buttonType(value) {
|
|
1904
|
+
__classPrivateFieldSet(this, _SkyTabsetNavButtonComponent__buttonType, value, "f");
|
|
1905
|
+
__classPrivateFieldGet(this, _SkyTabsetNavButtonComponent_instances, "m", _SkyTabsetNavButtonComponent_updateTabToSelect).call(this);
|
|
1906
|
+
__classPrivateFieldGet(this, _SkyTabsetNavButtonComponent_instances, "m", _SkyTabsetNavButtonComponent_updateButtonProperties).call(this);
|
|
1907
|
+
__classPrivateFieldGet(this, _SkyTabsetNavButtonComponent_instances, "m", _SkyTabsetNavButtonComponent_updateButtonVisibility).call(this);
|
|
1908
|
+
if (value === buttonTypeFinish) {
|
|
1909
|
+
this.type = 'submit';
|
|
1888
1910
|
}
|
|
1889
|
-
|
|
1890
|
-
|
|
1891
|
-
get nextTab() {
|
|
1892
|
-
const selectedTab = this.selectedTab;
|
|
1893
|
-
if (selectedTab) {
|
|
1894
|
-
const tabs = this.tabset.tabs.toArray();
|
|
1895
|
-
return tabs[tabs.indexOf(selectedTab) + 1];
|
|
1911
|
+
else {
|
|
1912
|
+
this.type = 'button';
|
|
1896
1913
|
}
|
|
1897
|
-
return undefined;
|
|
1898
1914
|
}
|
|
1899
|
-
|
|
1900
|
-
|
|
1901
|
-
|
|
1902
|
-
|
|
1903
|
-
|
|
1915
|
+
/**
|
|
1916
|
+
* Indicates whether to disable the nav button.
|
|
1917
|
+
* Defaults to the disabled state of the next tab for `next`, the existence of a previous tab for `previous`,
|
|
1918
|
+
* and false for `finish`.
|
|
1919
|
+
*/
|
|
1920
|
+
set disabled(value) {
|
|
1921
|
+
__classPrivateFieldSet(this, _SkyTabsetNavButtonComponent__disabled, value, "f");
|
|
1922
|
+
}
|
|
1923
|
+
get disabled() {
|
|
1924
|
+
if (__classPrivateFieldGet(this, _SkyTabsetNavButtonComponent__disabled, "f") !== undefined) {
|
|
1925
|
+
return __classPrivateFieldGet(this, _SkyTabsetNavButtonComponent__disabled, "f");
|
|
1926
|
+
}
|
|
1927
|
+
else if (__classPrivateFieldGet(this, _SkyTabsetNavButtonComponent__buttonType, "f") === buttonTypeFinish) {
|
|
1928
|
+
return false;
|
|
1904
1929
|
}
|
|
1905
|
-
return
|
|
1930
|
+
return !__classPrivateFieldGet(this, _SkyTabsetNavButtonComponent_tabToSelect, "f") || __classPrivateFieldGet(this, _SkyTabsetNavButtonComponent_tabToSelect, "f").disabled;
|
|
1906
1931
|
}
|
|
1907
|
-
|
|
1908
|
-
|
|
1909
|
-
|
|
1910
|
-
this.resourceService.getString('skyux_tabs_navigator_next'),
|
|
1911
|
-
])
|
|
1912
|
-
.pipe(take(1))
|
|
1913
|
-
.subscribe((resources) => {
|
|
1914
|
-
this.previousButtonText = resources[0];
|
|
1915
|
-
this.nextButtonText = resources[1];
|
|
1916
|
-
this.changeDetector.detectChanges();
|
|
1917
|
-
});
|
|
1932
|
+
ngOnDestroy() {
|
|
1933
|
+
__classPrivateFieldGet(this, _SkyTabsetNavButtonComponent_ngUnsubscribe, "f").next();
|
|
1934
|
+
__classPrivateFieldGet(this, _SkyTabsetNavButtonComponent_ngUnsubscribe, "f").complete();
|
|
1918
1935
|
}
|
|
1919
1936
|
buttonClick() {
|
|
1920
|
-
let tabToSelect;
|
|
1921
|
-
switch (this.buttonType) {
|
|
1922
|
-
case buttonTypePrevious:
|
|
1923
|
-
tabToSelect = this.previousTab;
|
|
1924
|
-
break;
|
|
1925
|
-
case buttonTypeNext:
|
|
1926
|
-
tabToSelect = this.nextTab;
|
|
1927
|
-
break;
|
|
1928
|
-
/* istanbul ignore next */
|
|
1929
|
-
default:
|
|
1930
|
-
break;
|
|
1931
|
-
}
|
|
1932
1937
|
/* istanbul ignore else */
|
|
1933
|
-
if (
|
|
1934
|
-
this.
|
|
1938
|
+
if (__classPrivateFieldGet(this, _SkyTabsetNavButtonComponent_tabToSelect, "f") && !__classPrivateFieldGet(this, _SkyTabsetNavButtonComponent_tabToSelect, "f").disabled) {
|
|
1939
|
+
__classPrivateFieldGet(this, _SkyTabsetNavButtonComponent__tabset, "f").active = __classPrivateFieldGet(this, _SkyTabsetNavButtonComponent_tabToSelect, "f").tabIndex;
|
|
1935
1940
|
}
|
|
1936
1941
|
}
|
|
1937
1942
|
}
|
|
1938
|
-
|
|
1939
|
-
|
|
1940
|
-
|
|
1943
|
+
_SkyTabsetNavButtonComponent__buttonType = new WeakMap(), _SkyTabsetNavButtonComponent__disabled = new WeakMap(), _SkyTabsetNavButtonComponent__tabset = new WeakMap(), _SkyTabsetNavButtonComponent_activeIndexNumber = new WeakMap(), _SkyTabsetNavButtonComponent_activeSkyTabIndex = new WeakMap(), _SkyTabsetNavButtonComponent_currentTabsetSub = new WeakMap(), _SkyTabsetNavButtonComponent_logger = new WeakMap(), _SkyTabsetNavButtonComponent_tabCount = new WeakMap(), _SkyTabsetNavButtonComponent_tabToSelect = new WeakMap(), _SkyTabsetNavButtonComponent_ngUnsubscribe = new WeakMap(), _SkyTabsetNavButtonComponent_instances = new WeakSet(), _SkyTabsetNavButtonComponent_updateButtonVisibility = function _SkyTabsetNavButtonComponent_updateButtonVisibility() {
|
|
1944
|
+
const isLastStep = __classPrivateFieldGet(this, _SkyTabsetNavButtonComponent_activeIndexNumber, "f") === __classPrivateFieldGet(this, _SkyTabsetNavButtonComponent_tabCount, "f") - 1;
|
|
1945
|
+
if (__classPrivateFieldGet(this, _SkyTabsetNavButtonComponent__buttonType, "f") === buttonTypeFinish) {
|
|
1946
|
+
this.isVisible = isLastStep;
|
|
1947
|
+
return;
|
|
1948
|
+
}
|
|
1949
|
+
// Hide the next button on the last step only if a finish button exists.
|
|
1950
|
+
if (__classPrivateFieldGet(this, _SkyTabsetNavButtonComponent__buttonType, "f") === buttonTypeNext &&
|
|
1951
|
+
isLastStep &&
|
|
1952
|
+
__classPrivateFieldGet(this, _SkyTabsetNavButtonComponent__tabset, "f").hasFinishButton) {
|
|
1953
|
+
this.isVisible = false;
|
|
1954
|
+
return;
|
|
1955
|
+
}
|
|
1956
|
+
this.isVisible = true;
|
|
1957
|
+
}, _SkyTabsetNavButtonComponent_updateButtonProperties = function _SkyTabsetNavButtonComponent_updateButtonProperties() {
|
|
1958
|
+
if ((__classPrivateFieldGet(this, _SkyTabsetNavButtonComponent__buttonType, "f") === buttonTypeNext ||
|
|
1959
|
+
__classPrivateFieldGet(this, _SkyTabsetNavButtonComponent__buttonType, "f") === buttonTypeFinish) &&
|
|
1960
|
+
__classPrivateFieldGet(this, _SkyTabsetNavButtonComponent__tabset, "f")?.hasFinishButton) {
|
|
1961
|
+
this.buttonClassName = 'sky-btn-primary';
|
|
1962
|
+
}
|
|
1963
|
+
else {
|
|
1964
|
+
this.buttonClassName = 'sky-btn-default';
|
|
1965
|
+
}
|
|
1966
|
+
this.ariaControls = __classPrivateFieldGet(this, _SkyTabsetNavButtonComponent_tabToSelect, "f")?.tabPanelId;
|
|
1967
|
+
}, _SkyTabsetNavButtonComponent_updateTabToSelect = function _SkyTabsetNavButtonComponent_updateTabToSelect() {
|
|
1968
|
+
if (__classPrivateFieldGet(this, _SkyTabsetNavButtonComponent__tabset, "f")?.tabs) {
|
|
1969
|
+
const tabs = __classPrivateFieldGet(this, _SkyTabsetNavButtonComponent__tabset, "f").tabs.toArray();
|
|
1970
|
+
__classPrivateFieldSet(this, _SkyTabsetNavButtonComponent_tabToSelect, undefined, "f");
|
|
1971
|
+
// tab index can be a number or a string, but we need the actual number index
|
|
1972
|
+
__classPrivateFieldSet(this, _SkyTabsetNavButtonComponent_activeIndexNumber, tabs.findIndex((tab) => tab.tabIndex === __classPrivateFieldGet(this, _SkyTabsetNavButtonComponent_activeSkyTabIndex, "f")), "f");
|
|
1973
|
+
/* istanbul ignore else */
|
|
1974
|
+
if (__classPrivateFieldGet(this, _SkyTabsetNavButtonComponent_activeIndexNumber, "f") !== undefined) {
|
|
1975
|
+
if (__classPrivateFieldGet(this, _SkyTabsetNavButtonComponent__buttonType, "f") === buttonTypeNext) {
|
|
1976
|
+
__classPrivateFieldSet(this, _SkyTabsetNavButtonComponent_tabToSelect, tabs[__classPrivateFieldGet(this, _SkyTabsetNavButtonComponent_activeIndexNumber, "f") + 1], "f");
|
|
1977
|
+
}
|
|
1978
|
+
else if (__classPrivateFieldGet(this, _SkyTabsetNavButtonComponent__buttonType, "f") === buttonTypePrevious) {
|
|
1979
|
+
__classPrivateFieldSet(this, _SkyTabsetNavButtonComponent_tabToSelect, tabs[__classPrivateFieldGet(this, _SkyTabsetNavButtonComponent_activeIndexNumber, "f") - 1], "f");
|
|
1980
|
+
}
|
|
1981
|
+
}
|
|
1982
|
+
}
|
|
1983
|
+
};
|
|
1984
|
+
SkyTabsetNavButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyTabsetNavButtonComponent, deps: [{ token: i1.SkyLogService }], target: i0.ɵɵFactoryTarget.Component });
|
|
1985
|
+
SkyTabsetNavButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.0", type: SkyTabsetNavButtonComponent, selector: "sky-tabset-nav-button", inputs: { tabset: "tabset", buttonType: "buttonType", buttonText: "buttonText", disabled: "disabled" }, ngImport: i0, template: "<button\n *ngIf=\"isVisible\"\n class=\"sky-btn sky-margin-inline-sm\"\n [attr.aria-controls]=\"ariaControls\"\n [disabled]=\"disabled\"\n [ngClass]=\"buttonClassName\"\n [type]=\"type\"\n (click)=\"buttonType === 'finish' ? null : buttonClick()\"\n>\n {{ buttonText || ('skyux_tabs_navigator_' + buttonType | skyLibResources) }}\n</button>\n", dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i3.SkyLibResourcesPipe, name: "skyLibResources" }] });
|
|
1986
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyTabsetNavButtonComponent, decorators: [{
|
|
1941
1987
|
type: Component,
|
|
1942
|
-
args: [{ selector: 'sky-tabset-nav-button', template: "<button\n class=\"sky-btn\"\n
|
|
1943
|
-
}], ctorParameters: function () { return [{ type:
|
|
1988
|
+
args: [{ selector: 'sky-tabset-nav-button', template: "<button\n *ngIf=\"isVisible\"\n class=\"sky-btn sky-margin-inline-sm\"\n [attr.aria-controls]=\"ariaControls\"\n [disabled]=\"disabled\"\n [ngClass]=\"buttonClassName\"\n [type]=\"type\"\n (click)=\"buttonType === 'finish' ? null : buttonClick()\"\n>\n {{ buttonText || ('skyux_tabs_navigator_' + buttonType | skyLibResources) }}\n</button>\n" }]
|
|
1989
|
+
}], ctorParameters: function () { return [{ type: i1.SkyLogService }]; }, propDecorators: { tabset: [{
|
|
1944
1990
|
type: Input
|
|
1945
1991
|
}], buttonType: [{
|
|
1946
1992
|
type: Input
|
|
1947
1993
|
}], buttonText: [{
|
|
1948
1994
|
type: Input
|
|
1995
|
+
}], disabled: [{
|
|
1996
|
+
type: Input
|
|
1949
1997
|
}] } });
|
|
1950
1998
|
|
|
1951
1999
|
class SkyTabsModule {
|
|
1952
2000
|
}
|
|
1953
|
-
SkyTabsModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1954
|
-
SkyTabsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "
|
|
2001
|
+
SkyTabsModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyTabsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
2002
|
+
SkyTabsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.0", ngImport: i0, type: SkyTabsModule, declarations: [SkyTabButtonComponent,
|
|
1955
2003
|
SkyTabComponent,
|
|
1956
2004
|
SkyTabsetComponent,
|
|
1957
2005
|
SkyTabsetNavButtonComponent], imports: [CommonModule,
|
|
@@ -1961,16 +2009,14 @@ SkyTabsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version:
|
|
|
1961
2009
|
SkyIconModule,
|
|
1962
2010
|
SkyTabsResourcesModule,
|
|
1963
2011
|
SkyThemeModule], exports: [SkyTabComponent, SkyTabsetComponent, SkyTabsetNavButtonComponent] });
|
|
1964
|
-
SkyTabsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "
|
|
1965
|
-
|
|
1966
|
-
|
|
1967
|
-
|
|
1968
|
-
|
|
1969
|
-
|
|
1970
|
-
|
|
1971
|
-
|
|
1972
|
-
]] });
|
|
1973
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: SkyTabsModule, decorators: [{
|
|
2012
|
+
SkyTabsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyTabsModule, imports: [CommonModule,
|
|
2013
|
+
RouterModule,
|
|
2014
|
+
SkyDropdownModule,
|
|
2015
|
+
SkyI18nModule,
|
|
2016
|
+
SkyIconModule,
|
|
2017
|
+
SkyTabsResourcesModule,
|
|
2018
|
+
SkyThemeModule] });
|
|
2019
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyTabsModule, decorators: [{
|
|
1974
2020
|
type: NgModule,
|
|
1975
2021
|
args: [{
|
|
1976
2022
|
declarations: [
|