@skyux/tabs 5.0.4 → 5.5.0-beta.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/README.md +6 -4
- package/bundles/skyux-tabs.umd.js +147 -181
- package/documentation.json +761 -481
- package/esm2015/index.js +23 -0
- package/esm2015/index.js.map +1 -0
- package/esm2015/lib/modules/sectioned-form/sectioned-form-section.component.js +67 -0
- package/esm2015/lib/modules/sectioned-form/sectioned-form-section.component.js.map +1 -0
- package/esm2015/lib/modules/sectioned-form/sectioned-form.component.js +116 -0
- package/esm2015/lib/modules/sectioned-form/sectioned-form.component.js.map +1 -0
- package/esm2015/lib/modules/sectioned-form/sectioned-form.module.js +35 -0
- package/esm2015/lib/modules/sectioned-form/sectioned-form.module.js.map +1 -0
- package/esm2015/lib/modules/sectioned-form/sectioned-form.service.js +35 -0
- package/esm2015/lib/modules/sectioned-form/sectioned-form.service.js.map +1 -0
- package/esm2015/lib/modules/shared/sky-tabs-resources.module.js +52 -0
- package/esm2015/lib/modules/shared/sky-tabs-resources.module.js.map +1 -0
- package/esm2015/lib/modules/tabs/tab-button.component.js +76 -0
- package/esm2015/lib/modules/tabs/tab-button.component.js.map +1 -0
- package/esm2015/lib/modules/tabs/tab-index.js +2 -0
- package/esm2015/lib/modules/tabs/tab-index.js.map +1 -0
- package/esm2015/lib/modules/tabs/tab.component.js +135 -0
- package/esm2015/lib/modules/tabs/tab.component.js.map +1 -0
- package/esm2015/lib/modules/tabs/tabs.module.js +57 -0
- package/esm2015/lib/modules/tabs/tabs.module.js.map +1 -0
- package/esm2015/lib/modules/tabs/tabset-active-tab-unregistered-args.js +2 -0
- package/esm2015/lib/modules/tabs/tabset-active-tab-unregistered-args.js.map +1 -0
- package/esm2015/lib/modules/tabs/tabset-adapter.service.js +56 -0
- package/esm2015/lib/modules/tabs/tabset-adapter.service.js.map +1 -0
- package/esm2015/lib/modules/tabs/tabset-buttons-display-mode.js +2 -0
- package/esm2015/lib/modules/tabs/tabset-buttons-display-mode.js.map +1 -0
- package/esm2015/lib/modules/tabs/tabset-nav-button.component.js +119 -0
- package/esm2015/lib/modules/tabs/tabset-nav-button.component.js.map +1 -0
- package/esm2015/lib/modules/tabs/tabset-permalink.service.js +126 -0
- package/esm2015/lib/modules/tabs/tabset-permalink.service.js.map +1 -0
- package/esm2015/lib/modules/tabs/tabset-style.js +2 -0
- package/esm2015/lib/modules/tabs/tabset-style.js.map +1 -0
- package/esm2015/lib/modules/tabs/tabset-tab-indexes-change.js +2 -0
- package/esm2015/lib/modules/tabs/tabset-tab-indexes-change.js.map +1 -0
- package/esm2015/lib/modules/tabs/tabset.component.js +405 -0
- package/esm2015/lib/modules/tabs/tabset.component.js.map +1 -0
- package/esm2015/lib/modules/tabs/tabset.service.js +110 -0
- package/esm2015/lib/modules/tabs/tabset.service.js.map +1 -0
- package/esm2015/lib/modules/vertical-tabset/vertical-tab-media-query.service.js +72 -0
- package/esm2015/lib/modules/vertical-tabset/vertical-tab-media-query.service.js.map +1 -0
- package/esm2015/lib/modules/vertical-tabset/vertical-tab.component.js +203 -0
- package/esm2015/lib/modules/vertical-tabset/vertical-tab.component.js.map +1 -0
- package/esm2015/lib/modules/vertical-tabset/vertical-tabset-adapter.service.js +48 -0
- package/esm2015/lib/modules/vertical-tabset/vertical-tabset-adapter.service.js.map +1 -0
- package/esm2015/lib/modules/vertical-tabset/vertical-tabset-group.component.js +89 -0
- package/esm2015/lib/modules/vertical-tabset/vertical-tabset-group.component.js.map +1 -0
- package/esm2015/lib/modules/vertical-tabset/vertical-tabset.component.js +157 -0
- package/esm2015/lib/modules/vertical-tabset/vertical-tabset.component.js.map +1 -0
- package/esm2015/lib/modules/vertical-tabset/vertical-tabset.module.js +60 -0
- package/esm2015/lib/modules/vertical-tabset/vertical-tabset.module.js.map +1 -0
- package/esm2015/lib/modules/vertical-tabset/vertical-tabset.service.js +170 -0
- package/esm2015/lib/modules/vertical-tabset/vertical-tabset.service.js.map +1 -0
- package/esm2015/skyux-tabs.js +2 -2
- package/esm2015/skyux-tabs.js.map +1 -0
- package/esm2015/testing/public-api.js +1 -1
- package/esm2015/testing/public-api.js.map +1 -0
- package/esm2015/testing/skyux-tabs-testing.js +1 -1
- package/esm2015/testing/skyux-tabs-testing.js.map +1 -0
- package/esm2015/testing/tabs/tab-fixture-tab.js +1 -1
- package/esm2015/testing/tabs/tab-fixture-tab.js.map +1 -0
- package/esm2015/testing/tabs/tabset-fixture.js +1 -1
- package/esm2015/testing/tabs/tabset-fixture.js.map +1 -0
- package/fesm2015/skyux-tabs-testing.js.map +1 -1
- package/fesm2015/skyux-tabs.js +238 -259
- package/fesm2015/skyux-tabs.js.map +1 -1
- package/index.d.ts +16 -0
- package/{modules → lib/modules}/sectioned-form/sectioned-form-section.component.d.ts +0 -3
- package/{modules → lib/modules}/sectioned-form/sectioned-form.component.d.ts +0 -0
- package/{modules → lib/modules}/sectioned-form/sectioned-form.module.d.ts +0 -0
- package/{modules → lib/modules}/sectioned-form/sectioned-form.service.d.ts +0 -0
- package/{modules → lib/modules}/shared/sky-tabs-resources.module.d.ts +0 -0
- package/{modules → lib/modules}/tabs/tab-button.component.d.ts +2 -2
- package/{modules → lib/modules}/tabs/tab-index.d.ts +0 -0
- package/{modules → lib/modules}/tabs/tab.component.d.ts +0 -0
- package/{modules → lib/modules}/tabs/tabs.module.d.ts +0 -0
- package/{modules → lib/modules}/tabs/tabset-active-tab-unregistered-args.d.ts +0 -0
- package/{modules → lib/modules}/tabs/tabset-adapter.service.d.ts +0 -0
- package/{modules → lib/modules}/tabs/tabset-buttons-display-mode.d.ts +0 -0
- package/{modules → lib/modules}/tabs/tabset-nav-button.component.d.ts +0 -0
- package/{modules → lib/modules}/tabs/tabset-permalink.service.d.ts +0 -0
- package/{modules → lib/modules}/tabs/tabset-style.d.ts +0 -0
- package/{modules → lib/modules}/tabs/tabset-tab-indexes-change.d.ts +0 -0
- package/{modules → lib/modules}/tabs/tabset.component.d.ts +1 -1
- package/{modules → lib/modules}/tabs/tabset.service.d.ts +0 -0
- package/{modules → lib/modules}/vertical-tabset/vertical-tab-media-query.service.d.ts +0 -0
- package/{modules → lib/modules}/vertical-tabset/vertical-tab.component.d.ts +8 -13
- package/{modules → lib/modules}/vertical-tabset/vertical-tabset-adapter.service.d.ts +0 -0
- package/{modules → lib/modules}/vertical-tabset/vertical-tabset-group.component.d.ts +2 -2
- package/{modules → lib/modules}/vertical-tabset/vertical-tabset.component.d.ts +17 -2
- package/{modules → lib/modules}/vertical-tabset/vertical-tabset.module.d.ts +4 -3
- package/{modules → lib/modules}/vertical-tabset/vertical-tabset.service.d.ts +0 -0
- package/package.json +25 -11
- package/skyux-tabs.d.ts +1 -1
- package/LICENSE +0 -21
- package/esm2015/modules/sectioned-form/sectioned-form-section.component.js +0 -70
- package/esm2015/modules/sectioned-form/sectioned-form.component.js +0 -116
- package/esm2015/modules/sectioned-form/sectioned-form.module.js +0 -35
- package/esm2015/modules/sectioned-form/sectioned-form.service.js +0 -35
- package/esm2015/modules/shared/sky-tabs-resources.module.js +0 -52
- package/esm2015/modules/tabs/tab-button.component.js +0 -65
- package/esm2015/modules/tabs/tab-index.js +0 -2
- package/esm2015/modules/tabs/tab.component.js +0 -133
- package/esm2015/modules/tabs/tabs.module.js +0 -57
- package/esm2015/modules/tabs/tabset-active-tab-unregistered-args.js +0 -2
- package/esm2015/modules/tabs/tabset-adapter.service.js +0 -56
- package/esm2015/modules/tabs/tabset-buttons-display-mode.js +0 -2
- package/esm2015/modules/tabs/tabset-nav-button.component.js +0 -117
- package/esm2015/modules/tabs/tabset-permalink.service.js +0 -124
- package/esm2015/modules/tabs/tabset-style.js +0 -2
- package/esm2015/modules/tabs/tabset-tab-indexes-change.js +0 -2
- package/esm2015/modules/tabs/tabset.component.js +0 -405
- package/esm2015/modules/tabs/tabset.service.js +0 -110
- package/esm2015/modules/vertical-tabset/vertical-tab-media-query.service.js +0 -72
- package/esm2015/modules/vertical-tabset/vertical-tab.component.js +0 -192
- package/esm2015/modules/vertical-tabset/vertical-tabset-adapter.service.js +0 -48
- package/esm2015/modules/vertical-tabset/vertical-tabset-group.component.js +0 -134
- package/esm2015/modules/vertical-tabset/vertical-tabset.component.js +0 -149
- package/esm2015/modules/vertical-tabset/vertical-tabset.module.js +0 -56
- package/esm2015/modules/vertical-tabset/vertical-tabset.service.js +0 -170
- package/esm2015/public-api.js +0 -23
- package/public-api.d.ts +0 -16
package/fesm2015/skyux-tabs.js
CHANGED
|
@@ -3,20 +3,21 @@ import { Injectable, EventEmitter, Component, ChangeDetectionStrategy, Input, Ou
|
|
|
3
3
|
import * as i2 from '@angular/common';
|
|
4
4
|
import { CommonModule } from '@angular/common';
|
|
5
5
|
import { trigger, transition, style, animate } from '@angular/animations';
|
|
6
|
-
import { BehaviorSubject, Subject,
|
|
6
|
+
import { BehaviorSubject, Subject, combineLatest, race, forkJoin } from 'rxjs';
|
|
7
7
|
import { takeUntil, take, distinctUntilChanged } from 'rxjs/operators';
|
|
8
8
|
import * as i1 from '@skyux/core';
|
|
9
|
-
import { SkyMediaBreakpoints, SkyMediaQueryService } from '@skyux/core';
|
|
9
|
+
import { SkyMediaBreakpoints, SkyMediaQueryService, SkyIdModule } from '@skyux/core';
|
|
10
10
|
import * as i4 from '@skyux/indicators';
|
|
11
|
-
import {
|
|
12
|
-
import * as
|
|
11
|
+
import { SkyIconModule, SkyExpansionIndicatorModule, SkyStatusIndicatorModule } from '@skyux/indicators';
|
|
12
|
+
import * as i8 from '@skyux/theme';
|
|
13
13
|
import { SkyThemeModule } from '@skyux/theme';
|
|
14
14
|
import * as i3 from '@skyux/i18n';
|
|
15
15
|
import { getLibStringForLocale, SkyI18nModule, SKY_LIB_RESOURCES_PROVIDERS } from '@skyux/i18n';
|
|
16
|
+
import { skyAnimationSlide } from '@skyux/animations';
|
|
16
17
|
import { SkyCheckboxModule } from '@skyux/forms';
|
|
17
18
|
import * as i1$1 from '@angular/router';
|
|
18
19
|
import { RouterModule } from '@angular/router';
|
|
19
|
-
import * as i4$
|
|
20
|
+
import * as i4$1 from '@skyux/popovers';
|
|
20
21
|
import { SkyDropdownModule } from '@skyux/popovers';
|
|
21
22
|
|
|
22
23
|
const VISIBLE_STATE = 'shown';
|
|
@@ -178,9 +179,9 @@ class SkyVerticalTabsetService {
|
|
|
178
179
|
this.indexChanged.next(this.activeIndex);
|
|
179
180
|
}
|
|
180
181
|
}
|
|
181
|
-
SkyVerticalTabsetService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.
|
|
182
|
-
SkyVerticalTabsetService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.
|
|
183
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.
|
|
182
|
+
SkyVerticalTabsetService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyVerticalTabsetService, deps: [{ token: i1.SkyMediaQueryService }], target: i0.ɵɵFactoryTarget.Injectable });
|
|
183
|
+
SkyVerticalTabsetService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyVerticalTabsetService });
|
|
184
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyVerticalTabsetService, decorators: [{
|
|
184
185
|
type: Injectable
|
|
185
186
|
}], ctorParameters: function () { return [{ type: i1.SkyMediaQueryService }]; } });
|
|
186
187
|
|
|
@@ -245,8 +246,8 @@ class SkySectionedFormComponent {
|
|
|
245
246
|
this.changeRef.markForCheck();
|
|
246
247
|
}
|
|
247
248
|
}
|
|
248
|
-
SkySectionedFormComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.
|
|
249
|
-
SkySectionedFormComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.
|
|
249
|
+
SkySectionedFormComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkySectionedFormComponent, deps: [{ token: SkyVerticalTabsetService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
250
|
+
SkySectionedFormComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", 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%;margin: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%;margin: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{display:none}.sky-sectioned-form-content-hidden{display:none}:host-context(.sky-theme-modern) .sky-sectioned-form-content{margin: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{margin: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"], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], animations: [
|
|
250
251
|
trigger('tabEnter', [
|
|
251
252
|
transition(`${HIDDEN_STATE} => ${VISIBLE_STATE}`, [
|
|
252
253
|
style({ transform: 'translate(-100%)' }),
|
|
@@ -260,7 +261,7 @@ SkySectionedFormComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.
|
|
|
260
261
|
]),
|
|
261
262
|
]),
|
|
262
263
|
], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
263
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.
|
|
264
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkySectionedFormComponent, decorators: [{
|
|
264
265
|
type: Component,
|
|
265
266
|
args: [{
|
|
266
267
|
selector: 'sky-sectioned-form',
|
|
@@ -354,9 +355,9 @@ class SkyVerticalTabMediaQueryService {
|
|
|
354
355
|
this.currentSubject.complete();
|
|
355
356
|
}
|
|
356
357
|
}
|
|
357
|
-
SkyVerticalTabMediaQueryService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.
|
|
358
|
-
SkyVerticalTabMediaQueryService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.
|
|
359
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.
|
|
358
|
+
SkyVerticalTabMediaQueryService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyVerticalTabMediaQueryService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
359
|
+
SkyVerticalTabMediaQueryService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyVerticalTabMediaQueryService });
|
|
360
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyVerticalTabMediaQueryService, decorators: [{
|
|
360
361
|
type: Injectable
|
|
361
362
|
}], ctorParameters: function () { return []; } });
|
|
362
363
|
|
|
@@ -399,12 +400,13 @@ class SkyVerticalTabsetAdapterService {
|
|
|
399
400
|
this.renderer.addClass(nativeEl, newClass);
|
|
400
401
|
}
|
|
401
402
|
}
|
|
402
|
-
SkyVerticalTabsetAdapterService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.
|
|
403
|
-
SkyVerticalTabsetAdapterService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.
|
|
404
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.
|
|
403
|
+
SkyVerticalTabsetAdapterService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyVerticalTabsetAdapterService, deps: [{ token: i0.RendererFactory2 }], target: i0.ɵɵFactoryTarget.Injectable });
|
|
404
|
+
SkyVerticalTabsetAdapterService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyVerticalTabsetAdapterService });
|
|
405
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyVerticalTabsetAdapterService, decorators: [{
|
|
405
406
|
type: Injectable
|
|
406
407
|
}], ctorParameters: function () { return [{ type: i0.RendererFactory2 }]; } });
|
|
407
408
|
|
|
409
|
+
let nextId$2 = 0;
|
|
408
410
|
class SkyVerticalTabComponent {
|
|
409
411
|
constructor(adapterService, changeRef, tabsetService, verticalTabMediaQueryService) {
|
|
410
412
|
this.adapterService = adapterService;
|
|
@@ -424,23 +426,17 @@ class SkyVerticalTabComponent {
|
|
|
424
426
|
* @internal This is used for sectioned forms and is not currently a supported design for pure vertical tabs.
|
|
425
427
|
*/
|
|
426
428
|
this.errorIndicator = false;
|
|
429
|
+
/**
|
|
430
|
+
* Specifies an ID for the tab.
|
|
431
|
+
* @deprecated Now that the vertical tabs provide aria labels automatically, this input is no longer necessary.
|
|
432
|
+
*/
|
|
433
|
+
this.tabId = `sky-vertical-tab-${++nextId$2}`;
|
|
427
434
|
this.isMobile = false;
|
|
428
435
|
this._contentRendered = false;
|
|
429
436
|
this._mobileSubscription = new Subject();
|
|
430
437
|
this._ngUnsubscribe = new Subject();
|
|
431
438
|
this._showTabRightArrow = false;
|
|
432
439
|
}
|
|
433
|
-
/**
|
|
434
|
-
* Specifies the HTML element ID (without the leading `#`) of the element that contains
|
|
435
|
-
* the content that the vertical tab displays, which corresponds to the `tabId`. This property
|
|
436
|
-
* [supports accessibility rules for disclosures](https://www.w3.org/TR/wai-aria-practices-1.1/#disclosure).
|
|
437
|
-
*/
|
|
438
|
-
get ariaControls() {
|
|
439
|
-
return this.isMobile ? undefined : this._ariaControls;
|
|
440
|
-
}
|
|
441
|
-
set ariaControls(value) {
|
|
442
|
-
this._ariaControls = value;
|
|
443
|
-
}
|
|
444
440
|
/**
|
|
445
441
|
* Specifies an ARIA role for the vertical tab
|
|
446
442
|
* [to support accessibility](https://developer.blackbaud.com/skyux/learn/accessibility)
|
|
@@ -448,6 +444,8 @@ class SkyVerticalTabComponent {
|
|
|
448
444
|
* an ARIA role indicates what an item represents on a web page, see the
|
|
449
445
|
* [WAI-ARIA roles model](https://www.w3.org/WAI/PF/aria/roles).
|
|
450
446
|
* @default "tab"
|
|
447
|
+
* @deprecated Any other value than `tab` could lead to a poor user experience for users with assistive technology.
|
|
448
|
+
* In the next major version, this property will be automatically set to `tab`.
|
|
451
449
|
*/
|
|
452
450
|
get ariaRole() {
|
|
453
451
|
if (this.isMobile) {
|
|
@@ -520,6 +518,21 @@ class SkyVerticalTabComponent {
|
|
|
520
518
|
this.changeRef.markForCheck();
|
|
521
519
|
}
|
|
522
520
|
}
|
|
521
|
+
onTabButtonKeyUp(event) {
|
|
522
|
+
/*istanbul ignore else */
|
|
523
|
+
if (event.key) {
|
|
524
|
+
switch (event.key.toUpperCase()) {
|
|
525
|
+
case ' ':
|
|
526
|
+
case 'ENTER':
|
|
527
|
+
this.activateTab();
|
|
528
|
+
event.stopPropagation();
|
|
529
|
+
break;
|
|
530
|
+
/* istanbul ignore next */
|
|
531
|
+
default:
|
|
532
|
+
break;
|
|
533
|
+
}
|
|
534
|
+
}
|
|
535
|
+
}
|
|
523
536
|
onWindowResize() {
|
|
524
537
|
this.updateBreakpointAndResponsiveClass(this.adapterService.getWidth(this.tabContent));
|
|
525
538
|
}
|
|
@@ -533,15 +546,15 @@ class SkyVerticalTabComponent {
|
|
|
533
546
|
this.changeRef.markForCheck();
|
|
534
547
|
}
|
|
535
548
|
}
|
|
536
|
-
SkyVerticalTabComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.
|
|
537
|
-
SkyVerticalTabComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.
|
|
549
|
+
SkyVerticalTabComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyVerticalTabComponent, deps: [{ token: SkyVerticalTabsetAdapterService }, { token: i0.ChangeDetectorRef }, { token: SkyVerticalTabsetService }, { token: SkyVerticalTabMediaQueryService }], target: i0.ɵɵFactoryTarget.Component });
|
|
550
|
+
SkyVerticalTabComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", 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: [
|
|
538
551
|
SkyVerticalTabMediaQueryService,
|
|
539
552
|
{
|
|
540
553
|
provide: SkyMediaQueryService,
|
|
541
554
|
useExisting: SkyVerticalTabMediaQueryService,
|
|
542
555
|
},
|
|
543
|
-
], viewQueries: [{ propertyName: "tabContent", first: true, predicate: ["tabContentWrapper"], descendants: true }], ngImport: i0, template: "<a\n class=\"sky-vertical-tab\"\n [attr.aria-controls]=\"
|
|
544
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.
|
|
556
|
+
], 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"], components: [{ type: i4.λ10, selector: "sky-status-indicator", inputs: ["indicatorType", "descriptionType", "customDescription"] }, { type: i4.λ4, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }], directives: [{ type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.λ2, selector: "[skyId]", exportAs: ["skyId"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
557
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyVerticalTabComponent, decorators: [{
|
|
545
558
|
type: Component,
|
|
546
559
|
args: [{
|
|
547
560
|
selector: 'sky-vertical-tab',
|
|
@@ -560,10 +573,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImpo
|
|
|
560
573
|
type: Input
|
|
561
574
|
}], ariaControls: [{
|
|
562
575
|
type: Input
|
|
563
|
-
}], ariaInvalid: [{
|
|
564
|
-
type: Input
|
|
565
|
-
}], ariaRequired: [{
|
|
566
|
-
type: Input
|
|
567
576
|
}], ariaRole: [{
|
|
568
577
|
type: Input
|
|
569
578
|
}], disabled: [{
|
|
@@ -612,9 +621,9 @@ class SkySectionedFormService {
|
|
|
612
621
|
this.requiredChange.next(isRequired);
|
|
613
622
|
}
|
|
614
623
|
}
|
|
615
|
-
SkySectionedFormService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.
|
|
616
|
-
SkySectionedFormService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.
|
|
617
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.
|
|
624
|
+
SkySectionedFormService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkySectionedFormService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
625
|
+
SkySectionedFormService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkySectionedFormService });
|
|
626
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkySectionedFormService, decorators: [{
|
|
618
627
|
type: Injectable
|
|
619
628
|
}] });
|
|
620
629
|
|
|
@@ -629,20 +638,16 @@ class SkySectionedFormSectionComponent {
|
|
|
629
638
|
this.changeRef = changeRef;
|
|
630
639
|
this.sectionTabId = `sky-sectioned-form-tab-${++nextId$1}`;
|
|
631
640
|
this.sectionContentId = `sky-sectioned-form-section-${++nextId$1}`;
|
|
632
|
-
|
|
641
|
+
/**
|
|
642
|
+
* Indicates whether the section is active when the form loads.
|
|
643
|
+
* @default false
|
|
644
|
+
*/
|
|
645
|
+
this.active = false;
|
|
633
646
|
this._ngUnsubscribe = new Subject();
|
|
634
647
|
}
|
|
635
|
-
get ariaRole() {
|
|
636
|
-
return this.isMobile ? undefined : 'tabpanel';
|
|
637
|
-
}
|
|
638
|
-
get ariaLabelledby() {
|
|
639
|
-
return this.isMobile ? undefined : this.sectionTabId;
|
|
640
|
-
}
|
|
641
648
|
ngOnInit() {
|
|
642
|
-
this.isMobile = this.tabsetService.isMobile();
|
|
643
649
|
this.changeRef.detectChanges();
|
|
644
650
|
this.tabsetService.switchingMobile.subscribe((mobile) => {
|
|
645
|
-
this.isMobile = mobile;
|
|
646
651
|
this.changeRef.detectChanges();
|
|
647
652
|
});
|
|
648
653
|
this.sectionedFormService.requiredChange
|
|
@@ -657,9 +662,9 @@ class SkySectionedFormSectionComponent {
|
|
|
657
662
|
this._ngUnsubscribe.complete();
|
|
658
663
|
}
|
|
659
664
|
}
|
|
660
|
-
SkySectionedFormSectionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.
|
|
661
|
-
SkySectionedFormSectionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.
|
|
662
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.
|
|
665
|
+
SkySectionedFormSectionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkySectionedFormSectionComponent, deps: [{ token: SkySectionedFormService }, { token: SkyVerticalTabsetService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
666
|
+
SkySectionedFormSectionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", 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"], components: [{ type: SkyVerticalTabComponent, selector: "sky-vertical-tab", inputs: ["active", "ariaControls", "ariaRole", "disabled", "errorIndicator", "tabHeaderCount", "tabHeading", "showTabRightArrow", "tabId"] }], directives: [{ type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
|
|
667
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkySectionedFormSectionComponent, decorators: [{
|
|
663
668
|
type: Component,
|
|
664
669
|
args: [{
|
|
665
670
|
selector: 'sky-sectioned-form-section',
|
|
@@ -704,16 +709,16 @@ class SkyTabsResourcesProvider {
|
|
|
704
709
|
*/
|
|
705
710
|
class SkyTabsResourcesModule {
|
|
706
711
|
}
|
|
707
|
-
SkyTabsResourcesModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.
|
|
708
|
-
SkyTabsResourcesModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.
|
|
709
|
-
SkyTabsResourcesModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.
|
|
712
|
+
SkyTabsResourcesModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyTabsResourcesModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
713
|
+
SkyTabsResourcesModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyTabsResourcesModule, exports: [SkyI18nModule] });
|
|
714
|
+
SkyTabsResourcesModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyTabsResourcesModule, providers: [
|
|
710
715
|
{
|
|
711
716
|
provide: SKY_LIB_RESOURCES_PROVIDERS,
|
|
712
717
|
useClass: SkyTabsResourcesProvider,
|
|
713
718
|
multi: true,
|
|
714
719
|
},
|
|
715
720
|
], imports: [SkyI18nModule] });
|
|
716
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.
|
|
721
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyTabsResourcesModule, decorators: [{
|
|
717
722
|
type: NgModule,
|
|
718
723
|
args: [{
|
|
719
724
|
exports: [SkyI18nModule],
|
|
@@ -736,7 +741,7 @@ class SkyVerticalTabsetComponent {
|
|
|
736
741
|
/**
|
|
737
742
|
* Indicates whether the vertical tabset loads tab content during initialization so that it
|
|
738
743
|
* displays content without moving around elements in the content container.
|
|
739
|
-
* @default
|
|
744
|
+
* @default false
|
|
740
745
|
*/
|
|
741
746
|
this.maintainTabContent = false;
|
|
742
747
|
/**
|
|
@@ -754,6 +759,8 @@ class SkyVerticalTabsetComponent {
|
|
|
754
759
|
* an ARIA role indicates what an item represents on a web page, see the
|
|
755
760
|
* [WAI-ARIA roles model](https://www.w3.org/WAI/PF/aria/roles).
|
|
756
761
|
* @default "tablist"
|
|
762
|
+
* @deprecated Any other value than `tablist` could lead to a poor user experience for users with assistive technology.
|
|
763
|
+
* In the next major version, this property will be automatically set to `tablist`.
|
|
757
764
|
*/
|
|
758
765
|
get ariaRole() {
|
|
759
766
|
if (this.isMobile) {
|
|
@@ -808,8 +815,8 @@ class SkyVerticalTabsetComponent {
|
|
|
808
815
|
this._ngUnsubscribe.complete();
|
|
809
816
|
}
|
|
810
817
|
}
|
|
811
|
-
SkyVerticalTabsetComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.
|
|
812
|
-
SkyVerticalTabsetComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.
|
|
818
|
+
SkyVerticalTabsetComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyVerticalTabsetComponent, deps: [{ token: SkyVerticalTabsetAdapterService }, { token: SkyVerticalTabsetService }, { token: i3.SkyLibResourcesService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
819
|
+
SkyVerticalTabsetComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", 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-modal-content >) .sky-vertical-tabset{margin:-15px}: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"], components: [{ type: i4.λ4, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], animations: [
|
|
813
820
|
trigger('tabGroupEnter', [
|
|
814
821
|
transition(`${HIDDEN_STATE} => ${VISIBLE_STATE}`, [
|
|
815
822
|
style({ transform: 'translate(-100%)' }),
|
|
@@ -823,7 +830,7 @@ SkyVerticalTabsetComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0
|
|
|
823
830
|
]),
|
|
824
831
|
]),
|
|
825
832
|
], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
826
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.
|
|
833
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyVerticalTabsetComponent, decorators: [{
|
|
827
834
|
type: Component,
|
|
828
835
|
args: [{
|
|
829
836
|
selector: 'sky-vertical-tabset',
|
|
@@ -848,6 +855,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImpo
|
|
|
848
855
|
}]
|
|
849
856
|
}], ctorParameters: function () { return [{ type: SkyVerticalTabsetAdapterService }, { type: SkyVerticalTabsetService }, { type: i3.SkyLibResourcesService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { showTabsText: [{
|
|
850
857
|
type: Input
|
|
858
|
+
}], ariaLabel: [{
|
|
859
|
+
type: Input
|
|
860
|
+
}], ariaLabelledBy: [{
|
|
861
|
+
type: Input
|
|
851
862
|
}], ariaRole: [{
|
|
852
863
|
type: Input
|
|
853
864
|
}], maintainTabContent: [{
|
|
@@ -888,7 +899,7 @@ class SkyVerticalTabsetGroupComponent {
|
|
|
888
899
|
}
|
|
889
900
|
/**
|
|
890
901
|
* Indicates whether the collapsible group is expanded.
|
|
891
|
-
* @default
|
|
902
|
+
* @default false
|
|
892
903
|
*/
|
|
893
904
|
set open(value) {
|
|
894
905
|
this._open = value;
|
|
@@ -921,62 +932,16 @@ class SkyVerticalTabsetGroupComponent {
|
|
|
921
932
|
return this.tabs && this.tabs.find((t) => t.active) !== undefined;
|
|
922
933
|
}
|
|
923
934
|
}
|
|
924
|
-
SkyVerticalTabsetGroupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.
|
|
925
|
-
SkyVerticalTabsetGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.
|
|
926
|
-
|
|
927
|
-
transition(':enter', [
|
|
928
|
-
style({
|
|
929
|
-
height: '0',
|
|
930
|
-
visibility: 'hidden',
|
|
931
|
-
}),
|
|
932
|
-
animate('150ms ease-in', style({
|
|
933
|
-
height: '*',
|
|
934
|
-
visibility: 'visible',
|
|
935
|
-
})),
|
|
936
|
-
]),
|
|
937
|
-
transition(':leave', [
|
|
938
|
-
style({
|
|
939
|
-
height: '*',
|
|
940
|
-
visibility: 'visible',
|
|
941
|
-
}),
|
|
942
|
-
animate('150ms ease-in', style({
|
|
943
|
-
height: '0',
|
|
944
|
-
visibility: 'hidden',
|
|
945
|
-
})),
|
|
946
|
-
]),
|
|
947
|
-
]),
|
|
948
|
-
], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
949
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: SkyVerticalTabsetGroupComponent, decorators: [{
|
|
935
|
+
SkyVerticalTabsetGroupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyVerticalTabsetGroupComponent, deps: [{ token: SkyVerticalTabsetService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
936
|
+
SkyVerticalTabsetGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", 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"], components: [{ type: i4.λ15, selector: "sky-expansion-indicator", inputs: ["direction"] }], directives: [{ type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1.λ2, selector: "[skyId]", exportAs: ["skyId"] }], animations: [skyAnimationSlide], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
937
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyVerticalTabsetGroupComponent, decorators: [{
|
|
950
938
|
type: Component,
|
|
951
939
|
args: [{
|
|
952
940
|
selector: 'sky-vertical-tabset-group',
|
|
953
941
|
templateUrl: './vertical-tabset-group.component.html',
|
|
954
942
|
styleUrls: ['./vertical-tabset-group.component.scss'],
|
|
955
943
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
956
|
-
animations: [
|
|
957
|
-
trigger('tabSlide', [
|
|
958
|
-
transition(':enter', [
|
|
959
|
-
style({
|
|
960
|
-
height: '0',
|
|
961
|
-
visibility: 'hidden',
|
|
962
|
-
}),
|
|
963
|
-
animate('150ms ease-in', style({
|
|
964
|
-
height: '*',
|
|
965
|
-
visibility: 'visible',
|
|
966
|
-
})),
|
|
967
|
-
]),
|
|
968
|
-
transition(':leave', [
|
|
969
|
-
style({
|
|
970
|
-
height: '*',
|
|
971
|
-
visibility: 'visible',
|
|
972
|
-
}),
|
|
973
|
-
animate('150ms ease-in', style({
|
|
974
|
-
height: '0',
|
|
975
|
-
visibility: 'hidden',
|
|
976
|
-
})),
|
|
977
|
-
]),
|
|
978
|
-
]),
|
|
979
|
-
],
|
|
944
|
+
animations: [skyAnimationSlide],
|
|
980
945
|
}]
|
|
981
946
|
}], ctorParameters: function () { return [{ type: SkyVerticalTabsetService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { disabled: [{
|
|
982
947
|
type: Input
|
|
@@ -991,26 +956,28 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImpo
|
|
|
991
956
|
|
|
992
957
|
class SkyVerticalTabsetModule {
|
|
993
958
|
}
|
|
994
|
-
SkyVerticalTabsetModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.
|
|
995
|
-
SkyVerticalTabsetModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.
|
|
959
|
+
SkyVerticalTabsetModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyVerticalTabsetModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
960
|
+
SkyVerticalTabsetModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyVerticalTabsetModule, declarations: [SkyVerticalTabsetComponent,
|
|
996
961
|
SkyVerticalTabsetGroupComponent,
|
|
997
962
|
SkyVerticalTabComponent], imports: [CommonModule,
|
|
998
|
-
SkyChevronModule,
|
|
999
963
|
SkyIconModule,
|
|
964
|
+
SkyIdModule,
|
|
965
|
+
SkyExpansionIndicatorModule,
|
|
1000
966
|
SkyStatusIndicatorModule,
|
|
1001
967
|
SkyTabsResourcesModule,
|
|
1002
968
|
SkyThemeModule], exports: [SkyVerticalTabsetComponent,
|
|
1003
969
|
SkyVerticalTabsetGroupComponent,
|
|
1004
970
|
SkyVerticalTabComponent] });
|
|
1005
|
-
SkyVerticalTabsetModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.
|
|
971
|
+
SkyVerticalTabsetModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyVerticalTabsetModule, providers: [SkyVerticalTabsetAdapterService], imports: [[
|
|
1006
972
|
CommonModule,
|
|
1007
|
-
SkyChevronModule,
|
|
1008
973
|
SkyIconModule,
|
|
974
|
+
SkyIdModule,
|
|
975
|
+
SkyExpansionIndicatorModule,
|
|
1009
976
|
SkyStatusIndicatorModule,
|
|
1010
977
|
SkyTabsResourcesModule,
|
|
1011
978
|
SkyThemeModule,
|
|
1012
979
|
]] });
|
|
1013
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.
|
|
980
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyVerticalTabsetModule, decorators: [{
|
|
1014
981
|
type: NgModule,
|
|
1015
982
|
args: [{
|
|
1016
983
|
declarations: [
|
|
@@ -1020,8 +987,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImpo
|
|
|
1020
987
|
],
|
|
1021
988
|
imports: [
|
|
1022
989
|
CommonModule,
|
|
1023
|
-
SkyChevronModule,
|
|
1024
990
|
SkyIconModule,
|
|
991
|
+
SkyIdModule,
|
|
992
|
+
SkyExpansionIndicatorModule,
|
|
1025
993
|
SkyStatusIndicatorModule,
|
|
1026
994
|
SkyTabsResourcesModule,
|
|
1027
995
|
SkyThemeModule,
|
|
@@ -1037,18 +1005,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImpo
|
|
|
1037
1005
|
|
|
1038
1006
|
class SkySectionedFormModule {
|
|
1039
1007
|
}
|
|
1040
|
-
SkySectionedFormModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.
|
|
1041
|
-
SkySectionedFormModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.
|
|
1008
|
+
SkySectionedFormModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkySectionedFormModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
1009
|
+
SkySectionedFormModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkySectionedFormModule, declarations: [SkySectionedFormComponent, SkySectionedFormSectionComponent], imports: [CommonModule,
|
|
1042
1010
|
SkyCheckboxModule,
|
|
1043
1011
|
SkyThemeModule,
|
|
1044
1012
|
SkyVerticalTabsetModule], exports: [SkySectionedFormComponent, SkySectionedFormSectionComponent] });
|
|
1045
|
-
SkySectionedFormModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.
|
|
1013
|
+
SkySectionedFormModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkySectionedFormModule, imports: [[
|
|
1046
1014
|
CommonModule,
|
|
1047
1015
|
SkyCheckboxModule,
|
|
1048
1016
|
SkyThemeModule,
|
|
1049
1017
|
SkyVerticalTabsetModule,
|
|
1050
1018
|
]] });
|
|
1051
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.
|
|
1019
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkySectionedFormModule, decorators: [{
|
|
1052
1020
|
type: NgModule,
|
|
1053
1021
|
args: [{
|
|
1054
1022
|
declarations: [SkySectionedFormComponent, SkySectionedFormSectionComponent],
|
|
@@ -1076,8 +1044,19 @@ class SkyTabButtonComponent {
|
|
|
1076
1044
|
event.preventDefault();
|
|
1077
1045
|
}
|
|
1078
1046
|
}
|
|
1079
|
-
|
|
1080
|
-
|
|
1047
|
+
onTabButtonKeyDown(event) {
|
|
1048
|
+
/*istanbul ignore else */
|
|
1049
|
+
if (event.key) {
|
|
1050
|
+
switch (event.key.toUpperCase()) {
|
|
1051
|
+
case ' ':
|
|
1052
|
+
case 'ENTER':
|
|
1053
|
+
this.onButtonClick(event);
|
|
1054
|
+
break;
|
|
1055
|
+
/* istanbul ignore next */
|
|
1056
|
+
default:
|
|
1057
|
+
break;
|
|
1058
|
+
}
|
|
1059
|
+
}
|
|
1081
1060
|
}
|
|
1082
1061
|
onCloseClick(event) {
|
|
1083
1062
|
this.closeClick.emit();
|
|
@@ -1087,9 +1066,9 @@ class SkyTabButtonComponent {
|
|
|
1087
1066
|
event.preventDefault();
|
|
1088
1067
|
}
|
|
1089
1068
|
}
|
|
1090
|
-
SkyTabButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.
|
|
1091
|
-
SkyTabButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.
|
|
1092
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.
|
|
1069
|
+
SkyTabButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyTabButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1070
|
+
SkyTabButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", 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-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"], components: [{ type: i4.λ4, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }], directives: [{ type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "skyLibResources": i3.SkyLibResourcesPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
1071
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyTabButtonComponent, decorators: [{
|
|
1093
1072
|
type: Component,
|
|
1094
1073
|
args: [{
|
|
1095
1074
|
selector: 'sky-tab-button',
|
|
@@ -1235,9 +1214,9 @@ class SkyTabsetPermalinkService {
|
|
|
1235
1214
|
return params;
|
|
1236
1215
|
}
|
|
1237
1216
|
}
|
|
1238
|
-
SkyTabsetPermalinkService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.
|
|
1239
|
-
SkyTabsetPermalinkService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.
|
|
1240
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.
|
|
1217
|
+
SkyTabsetPermalinkService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyTabsetPermalinkService, deps: [{ token: i1$1.ActivatedRoute }, { token: i2.Location }, { token: i1$1.Router }], target: i0.ɵɵFactoryTarget.Injectable });
|
|
1218
|
+
SkyTabsetPermalinkService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyTabsetPermalinkService });
|
|
1219
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyTabsetPermalinkService, decorators: [{
|
|
1241
1220
|
type: Injectable
|
|
1242
1221
|
}], ctorParameters: function () { return [{ type: i1$1.ActivatedRoute }, { type: i2.Location }, { type: i1$1.Router }]; } });
|
|
1243
1222
|
|
|
@@ -1342,9 +1321,9 @@ class SkyTabsetService {
|
|
|
1342
1321
|
return this.tabIndexesEqual(tabIndex, this.currentActiveTabIndex);
|
|
1343
1322
|
}
|
|
1344
1323
|
}
|
|
1345
|
-
SkyTabsetService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.
|
|
1346
|
-
SkyTabsetService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.
|
|
1347
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.
|
|
1324
|
+
SkyTabsetService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyTabsetService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
1325
|
+
SkyTabsetService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyTabsetService });
|
|
1326
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyTabsetService, decorators: [{
|
|
1348
1327
|
type: Injectable
|
|
1349
1328
|
}] });
|
|
1350
1329
|
|
|
@@ -1451,9 +1430,9 @@ class SkyTabComponent {
|
|
|
1451
1430
|
this.changeDetector.markForCheck();
|
|
1452
1431
|
}
|
|
1453
1432
|
}
|
|
1454
|
-
SkyTabComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.
|
|
1455
|
-
SkyTabComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.
|
|
1456
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.
|
|
1433
|
+
SkyTabComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyTabComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: SkyTabsetPermalinkService }, { token: SkyTabsetService }], target: i0.ɵɵFactoryTarget.Component });
|
|
1434
|
+
SkyTabComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", 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 });
|
|
1435
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyTabComponent, decorators: [{
|
|
1457
1436
|
type: Component,
|
|
1458
1437
|
args: [{
|
|
1459
1438
|
selector: 'sky-tab',
|
|
@@ -1476,118 +1455,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImpo
|
|
|
1476
1455
|
type: Output
|
|
1477
1456
|
}] } });
|
|
1478
1457
|
|
|
1479
|
-
const buttonTypeNext = 'next';
|
|
1480
|
-
const buttonTypePrevious = 'previous';
|
|
1481
|
-
/**
|
|
1482
|
-
* @internal
|
|
1483
|
-
*/
|
|
1484
|
-
class SkyTabsetNavButtonComponent {
|
|
1485
|
-
constructor(resourceService, changeDetector) {
|
|
1486
|
-
this.resourceService = resourceService;
|
|
1487
|
-
this.changeDetector = changeDetector;
|
|
1488
|
-
}
|
|
1489
|
-
set buttonText(value) {
|
|
1490
|
-
this._buttonText = value;
|
|
1491
|
-
}
|
|
1492
|
-
get buttonText() {
|
|
1493
|
-
if (this._buttonText) {
|
|
1494
|
-
return this._buttonText;
|
|
1495
|
-
}
|
|
1496
|
-
switch (this.buttonType) {
|
|
1497
|
-
case buttonTypePrevious:
|
|
1498
|
-
return this.previousButtonText;
|
|
1499
|
-
case buttonTypeNext:
|
|
1500
|
-
return this.nextButtonText;
|
|
1501
|
-
/* istanbul ignore next */
|
|
1502
|
-
default:
|
|
1503
|
-
return '';
|
|
1504
|
-
}
|
|
1505
|
-
}
|
|
1506
|
-
get disabled() {
|
|
1507
|
-
let tabToSelect;
|
|
1508
|
-
switch (this.buttonType) {
|
|
1509
|
-
case buttonTypePrevious:
|
|
1510
|
-
tabToSelect = this.previousTab;
|
|
1511
|
-
break;
|
|
1512
|
-
case buttonTypeNext:
|
|
1513
|
-
tabToSelect = this.nextTab;
|
|
1514
|
-
break;
|
|
1515
|
-
/* istanbul ignore next */
|
|
1516
|
-
default:
|
|
1517
|
-
break;
|
|
1518
|
-
}
|
|
1519
|
-
return !tabToSelect || tabToSelect.disabled;
|
|
1520
|
-
}
|
|
1521
|
-
get selectedTab() {
|
|
1522
|
-
let selectedTab;
|
|
1523
|
-
if (this.tabset && this.tabset.tabs) {
|
|
1524
|
-
selectedTab = this.tabset.tabs.find((tab) => tab.tabIndex === this.tabset.lastActiveTabIndex);
|
|
1525
|
-
}
|
|
1526
|
-
return selectedTab;
|
|
1527
|
-
}
|
|
1528
|
-
get nextTab() {
|
|
1529
|
-
let selectedTab = this.selectedTab;
|
|
1530
|
-
if (selectedTab) {
|
|
1531
|
-
let tabs = this.tabset.tabs.toArray();
|
|
1532
|
-
return tabs[tabs.indexOf(selectedTab) + 1];
|
|
1533
|
-
}
|
|
1534
|
-
return undefined;
|
|
1535
|
-
}
|
|
1536
|
-
get previousTab() {
|
|
1537
|
-
let selectedTab = this.selectedTab;
|
|
1538
|
-
if (selectedTab) {
|
|
1539
|
-
let tabs = this.tabset.tabs.toArray();
|
|
1540
|
-
return tabs[tabs.indexOf(selectedTab) - 1];
|
|
1541
|
-
}
|
|
1542
|
-
return undefined;
|
|
1543
|
-
}
|
|
1544
|
-
ngAfterViewInit() {
|
|
1545
|
-
forkJoin([
|
|
1546
|
-
this.resourceService.getString('skyux_tabs_navigator_previous'),
|
|
1547
|
-
this.resourceService.getString('skyux_tabs_navigator_next'),
|
|
1548
|
-
])
|
|
1549
|
-
.pipe(take(1))
|
|
1550
|
-
.subscribe((resources) => {
|
|
1551
|
-
this.previousButtonText = resources[0];
|
|
1552
|
-
this.nextButtonText = resources[1];
|
|
1553
|
-
this.changeDetector.detectChanges();
|
|
1554
|
-
});
|
|
1555
|
-
}
|
|
1556
|
-
buttonClick() {
|
|
1557
|
-
let tabToSelect;
|
|
1558
|
-
switch (this.buttonType) {
|
|
1559
|
-
case buttonTypePrevious:
|
|
1560
|
-
tabToSelect = this.previousTab;
|
|
1561
|
-
break;
|
|
1562
|
-
case buttonTypeNext:
|
|
1563
|
-
tabToSelect = this.nextTab;
|
|
1564
|
-
break;
|
|
1565
|
-
/* istanbul ignore next */
|
|
1566
|
-
default:
|
|
1567
|
-
break;
|
|
1568
|
-
}
|
|
1569
|
-
/* istanbul ignore else */
|
|
1570
|
-
if (tabToSelect && !tabToSelect.disabled) {
|
|
1571
|
-
this.tabset.active = tabToSelect.tabIndex;
|
|
1572
|
-
}
|
|
1573
|
-
}
|
|
1574
|
-
}
|
|
1575
|
-
SkyTabsetNavButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: SkyTabsetNavButtonComponent, deps: [{ token: i3.SkyLibResourcesService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
1576
|
-
SkyTabsetNavButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.15", type: SkyTabsetNavButtonComponent, selector: "sky-tabset-nav-button", inputs: { tabset: "tabset", buttonType: "buttonType", buttonText: "buttonText" }, ngImport: i0, template: "<button\n class=\"sky-btn sky-btn-default\"\n type=\"button\"\n [disabled]=\"disabled\"\n (click)=\"buttonClick()\"\n>\n {{ buttonText }}\n</button>\n" });
|
|
1577
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: SkyTabsetNavButtonComponent, decorators: [{
|
|
1578
|
-
type: Component,
|
|
1579
|
-
args: [{
|
|
1580
|
-
selector: 'sky-tabset-nav-button',
|
|
1581
|
-
templateUrl: './tabset-nav-button.component.html',
|
|
1582
|
-
}]
|
|
1583
|
-
}], ctorParameters: function () { return [{ type: i3.SkyLibResourcesService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { tabset: [{
|
|
1584
|
-
type: Input
|
|
1585
|
-
}], buttonType: [{
|
|
1586
|
-
type: Input
|
|
1587
|
-
}], buttonText: [{
|
|
1588
|
-
type: Input
|
|
1589
|
-
}] } });
|
|
1590
|
-
|
|
1591
1458
|
/**
|
|
1592
1459
|
* @internal
|
|
1593
1460
|
*/
|
|
@@ -1635,9 +1502,9 @@ class SkyTabsetAdapterService {
|
|
|
1635
1502
|
return firstTabRect.left - tabsetRect.left;
|
|
1636
1503
|
}
|
|
1637
1504
|
}
|
|
1638
|
-
SkyTabsetAdapterService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.
|
|
1639
|
-
SkyTabsetAdapterService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.
|
|
1640
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.
|
|
1505
|
+
SkyTabsetAdapterService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyTabsetAdapterService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
1506
|
+
SkyTabsetAdapterService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyTabsetAdapterService });
|
|
1507
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyTabsetAdapterService, decorators: [{
|
|
1641
1508
|
type: Injectable
|
|
1642
1509
|
}] });
|
|
1643
1510
|
|
|
@@ -1722,7 +1589,7 @@ class SkyTabsetComponent {
|
|
|
1722
1589
|
* @deprecated The property was designed to create wizards by setting tabStyle="wizard" on tabsets in modals,
|
|
1723
1590
|
* but this wizard implementation was replaced by the
|
|
1724
1591
|
* [progress indicator component](https://developer.blackbaud.com/skyux/components/progress-indicator).
|
|
1725
|
-
* @default
|
|
1592
|
+
* @default "tabs"
|
|
1726
1593
|
*/
|
|
1727
1594
|
set tabStyle(value) {
|
|
1728
1595
|
/*istanbul ignore else*/
|
|
@@ -1986,13 +1853,13 @@ class SkyTabsetComponent {
|
|
|
1986
1853
|
}
|
|
1987
1854
|
}
|
|
1988
1855
|
}
|
|
1989
|
-
SkyTabsetComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.
|
|
1990
|
-
SkyTabsetComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.
|
|
1856
|
+
SkyTabsetComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyTabsetComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: SkyTabsetAdapterService }, { token: SkyTabsetPermalinkService }, { token: SkyTabsetService }], target: i0.ɵɵFactoryTarget.Component });
|
|
1857
|
+
SkyTabsetComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", 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: [
|
|
1991
1858
|
SkyTabsetAdapterService,
|
|
1992
1859
|
SkyTabsetPermalinkService,
|
|
1993
1860
|
SkyTabsetService,
|
|
1994
|
-
], 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;padding-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-tabset{border-bottom:1px solid #d2d2d2;overflow:visible}.sky-theme-modern .sky-tab-dropdown-menu-item .sky-btn-tab-wrapper{margin-right:0}\n"], components: [{ type: i4$
|
|
1995
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.
|
|
1861
|
+
], 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;padding-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-tabset{border-bottom:1px solid #d2d2d2;overflow:visible}.sky-theme-modern .sky-tab-dropdown-menu-item .sky-btn-tab-wrapper{margin-right:0}\n"], components: [{ type: i4$1.λ3, selector: "sky-dropdown", inputs: ["buttonStyle", "buttonType", "disabled", "dismissOnBlur", "label", "horizontalAlignment", "messageStream", "title", "trigger"] }, { type: i4$1.λ2, selector: "sky-dropdown-button" }, { type: i4$1.λ4, selector: "sky-dropdown-menu", inputs: ["ariaLabelledBy", "ariaRole", "useNativeFocus"], outputs: ["menuChanges"] }, { type: i4$1.λ1, selector: "sky-dropdown-item", inputs: ["ariaRole"] }, { type: i4.λ4, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }, { type: SkyTabButtonComponent, selector: "sky-tab-button", inputs: ["active", "ariaControls", "buttonHref", "buttonId", "buttonText", "buttonTextCount", "closeable", "disabled", "tabStyle"], outputs: ["buttonClick", "closeClick"] }], directives: [{ type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i8.λ2, selector: "[skyThemeClass]", inputs: ["class", "skyThemeClass"] }], pipes: { "skyLibResources": i3.SkyLibResourcesPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
1862
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyTabsetComponent, decorators: [{
|
|
1996
1863
|
type: Component,
|
|
1997
1864
|
args: [{
|
|
1998
1865
|
selector: 'sky-tabset',
|
|
@@ -2029,10 +1896,122 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImpo
|
|
|
2029
1896
|
args: [SkyTabComponent]
|
|
2030
1897
|
}] } });
|
|
2031
1898
|
|
|
1899
|
+
const buttonTypeNext = 'next';
|
|
1900
|
+
const buttonTypePrevious = 'previous';
|
|
1901
|
+
/**
|
|
1902
|
+
* @internal
|
|
1903
|
+
*/
|
|
1904
|
+
class SkyTabsetNavButtonComponent {
|
|
1905
|
+
constructor(resourceService, changeDetector) {
|
|
1906
|
+
this.resourceService = resourceService;
|
|
1907
|
+
this.changeDetector = changeDetector;
|
|
1908
|
+
}
|
|
1909
|
+
set buttonText(value) {
|
|
1910
|
+
this._buttonText = value;
|
|
1911
|
+
}
|
|
1912
|
+
get buttonText() {
|
|
1913
|
+
if (this._buttonText) {
|
|
1914
|
+
return this._buttonText;
|
|
1915
|
+
}
|
|
1916
|
+
switch (this.buttonType) {
|
|
1917
|
+
case buttonTypePrevious:
|
|
1918
|
+
return this.previousButtonText;
|
|
1919
|
+
case buttonTypeNext:
|
|
1920
|
+
return this.nextButtonText;
|
|
1921
|
+
/* istanbul ignore next */
|
|
1922
|
+
default:
|
|
1923
|
+
return '';
|
|
1924
|
+
}
|
|
1925
|
+
}
|
|
1926
|
+
get disabled() {
|
|
1927
|
+
let tabToSelect;
|
|
1928
|
+
switch (this.buttonType) {
|
|
1929
|
+
case buttonTypePrevious:
|
|
1930
|
+
tabToSelect = this.previousTab;
|
|
1931
|
+
break;
|
|
1932
|
+
case buttonTypeNext:
|
|
1933
|
+
tabToSelect = this.nextTab;
|
|
1934
|
+
break;
|
|
1935
|
+
/* istanbul ignore next */
|
|
1936
|
+
default:
|
|
1937
|
+
break;
|
|
1938
|
+
}
|
|
1939
|
+
return !tabToSelect || tabToSelect.disabled;
|
|
1940
|
+
}
|
|
1941
|
+
get selectedTab() {
|
|
1942
|
+
let selectedTab;
|
|
1943
|
+
if (this.tabset && this.tabset.tabs) {
|
|
1944
|
+
selectedTab = this.tabset.tabs.find((tab) => tab.tabIndex === this.tabset.lastActiveTabIndex);
|
|
1945
|
+
}
|
|
1946
|
+
return selectedTab;
|
|
1947
|
+
}
|
|
1948
|
+
get nextTab() {
|
|
1949
|
+
let selectedTab = this.selectedTab;
|
|
1950
|
+
if (selectedTab) {
|
|
1951
|
+
let tabs = this.tabset.tabs.toArray();
|
|
1952
|
+
return tabs[tabs.indexOf(selectedTab) + 1];
|
|
1953
|
+
}
|
|
1954
|
+
return undefined;
|
|
1955
|
+
}
|
|
1956
|
+
get previousTab() {
|
|
1957
|
+
let selectedTab = this.selectedTab;
|
|
1958
|
+
if (selectedTab) {
|
|
1959
|
+
let tabs = this.tabset.tabs.toArray();
|
|
1960
|
+
return tabs[tabs.indexOf(selectedTab) - 1];
|
|
1961
|
+
}
|
|
1962
|
+
return undefined;
|
|
1963
|
+
}
|
|
1964
|
+
ngAfterViewInit() {
|
|
1965
|
+
forkJoin([
|
|
1966
|
+
this.resourceService.getString('skyux_tabs_navigator_previous'),
|
|
1967
|
+
this.resourceService.getString('skyux_tabs_navigator_next'),
|
|
1968
|
+
])
|
|
1969
|
+
.pipe(take(1))
|
|
1970
|
+
.subscribe((resources) => {
|
|
1971
|
+
this.previousButtonText = resources[0];
|
|
1972
|
+
this.nextButtonText = resources[1];
|
|
1973
|
+
this.changeDetector.detectChanges();
|
|
1974
|
+
});
|
|
1975
|
+
}
|
|
1976
|
+
buttonClick() {
|
|
1977
|
+
let tabToSelect;
|
|
1978
|
+
switch (this.buttonType) {
|
|
1979
|
+
case buttonTypePrevious:
|
|
1980
|
+
tabToSelect = this.previousTab;
|
|
1981
|
+
break;
|
|
1982
|
+
case buttonTypeNext:
|
|
1983
|
+
tabToSelect = this.nextTab;
|
|
1984
|
+
break;
|
|
1985
|
+
/* istanbul ignore next */
|
|
1986
|
+
default:
|
|
1987
|
+
break;
|
|
1988
|
+
}
|
|
1989
|
+
/* istanbul ignore else */
|
|
1990
|
+
if (tabToSelect && !tabToSelect.disabled) {
|
|
1991
|
+
this.tabset.active = tabToSelect.tabIndex;
|
|
1992
|
+
}
|
|
1993
|
+
}
|
|
1994
|
+
}
|
|
1995
|
+
SkyTabsetNavButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyTabsetNavButtonComponent, deps: [{ token: i3.SkyLibResourcesService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
1996
|
+
SkyTabsetNavButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: SkyTabsetNavButtonComponent, selector: "sky-tabset-nav-button", inputs: { tabset: "tabset", buttonType: "buttonType", buttonText: "buttonText" }, ngImport: i0, template: "<button\n class=\"sky-btn sky-btn-default\"\n type=\"button\"\n [disabled]=\"disabled\"\n (click)=\"buttonClick()\"\n>\n {{ buttonText }}\n</button>\n" });
|
|
1997
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyTabsetNavButtonComponent, decorators: [{
|
|
1998
|
+
type: Component,
|
|
1999
|
+
args: [{
|
|
2000
|
+
selector: 'sky-tabset-nav-button',
|
|
2001
|
+
templateUrl: './tabset-nav-button.component.html',
|
|
2002
|
+
}]
|
|
2003
|
+
}], ctorParameters: function () { return [{ type: i3.SkyLibResourcesService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { tabset: [{
|
|
2004
|
+
type: Input
|
|
2005
|
+
}], buttonType: [{
|
|
2006
|
+
type: Input
|
|
2007
|
+
}], buttonText: [{
|
|
2008
|
+
type: Input
|
|
2009
|
+
}] } });
|
|
2010
|
+
|
|
2032
2011
|
class SkyTabsModule {
|
|
2033
2012
|
}
|
|
2034
|
-
SkyTabsModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.
|
|
2035
|
-
SkyTabsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.
|
|
2013
|
+
SkyTabsModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyTabsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
2014
|
+
SkyTabsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyTabsModule, declarations: [SkyTabButtonComponent,
|
|
2036
2015
|
SkyTabComponent,
|
|
2037
2016
|
SkyTabsetComponent,
|
|
2038
2017
|
SkyTabsetNavButtonComponent], imports: [CommonModule,
|
|
@@ -2042,7 +2021,7 @@ SkyTabsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version:
|
|
|
2042
2021
|
SkyIconModule,
|
|
2043
2022
|
SkyTabsResourcesModule,
|
|
2044
2023
|
SkyThemeModule], exports: [SkyTabComponent, SkyTabsetComponent, SkyTabsetNavButtonComponent] });
|
|
2045
|
-
SkyTabsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.
|
|
2024
|
+
SkyTabsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyTabsModule, imports: [[
|
|
2046
2025
|
CommonModule,
|
|
2047
2026
|
RouterModule,
|
|
2048
2027
|
SkyDropdownModule,
|
|
@@ -2051,7 +2030,7 @@ SkyTabsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version:
|
|
|
2051
2030
|
SkyTabsResourcesModule,
|
|
2052
2031
|
SkyThemeModule,
|
|
2053
2032
|
]] });
|
|
2054
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.
|
|
2033
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyTabsModule, decorators: [{
|
|
2055
2034
|
type: NgModule,
|
|
2056
2035
|
args: [{
|
|
2057
2036
|
declarations: [
|