@skyux/tabs 5.0.2 → 5.1.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/bundles/skyux-tabs-testing.umd.js +1 -1
- package/bundles/skyux-tabs.umd.js +267 -299
- package/documentation.json +598 -587
- package/esm2015/modules/sectioned-form/sectioned-form-section.component.js +14 -19
- package/esm2015/modules/sectioned-form/sectioned-form.component.js +18 -18
- package/esm2015/modules/sectioned-form/sectioned-form.module.js +10 -18
- package/esm2015/modules/sectioned-form/sectioned-form.service.js +4 -4
- package/esm2015/modules/shared/sky-tabs-resources.module.js +23 -12
- package/esm2015/modules/tabs/tab-button.component.js +19 -8
- package/esm2015/modules/tabs/tab.component.js +13 -14
- package/esm2015/modules/tabs/tabs.module.js +10 -16
- package/esm2015/modules/tabs/tabset-active-tab-unregistered-args.js +1 -1
- package/esm2015/modules/tabs/tabset-adapter.service.js +8 -6
- package/esm2015/modules/tabs/tabset-nav-button.component.js +8 -8
- package/esm2015/modules/tabs/tabset-permalink.service.js +14 -9
- package/esm2015/modules/tabs/tabset-tab-indexes-change.js +1 -1
- package/esm2015/modules/tabs/tabset.component.js +38 -35
- package/esm2015/modules/tabs/tabset.service.js +10 -11
- package/esm2015/modules/vertical-tabset/vertical-tab-media-query.service.js +9 -9
- package/esm2015/modules/vertical-tabset/vertical-tab.component.js +40 -26
- package/esm2015/modules/vertical-tabset/vertical-tabset-adapter.service.js +5 -5
- package/esm2015/modules/vertical-tabset/vertical-tabset-group.component.js +10 -56
- package/esm2015/modules/vertical-tabset/vertical-tabset.component.js +28 -25
- package/esm2015/modules/vertical-tabset/vertical-tabset.module.js +19 -19
- package/esm2015/modules/vertical-tabset/vertical-tabset.service.js +8 -8
- package/esm2015/testing/tabs/tab-fixture-tab.js +1 -1
- package/esm2015/testing/tabs/tabset-fixture.js +2 -2
- package/fesm2015/skyux-tabs-testing.js +1 -1
- package/fesm2015/skyux-tabs-testing.js.map +1 -1
- package/fesm2015/skyux-tabs.js +275 -294
- package/fesm2015/skyux-tabs.js.map +1 -1
- package/modules/sectioned-form/sectioned-form-section.component.d.ts +0 -3
- package/modules/tabs/tab-button.component.d.ts +2 -2
- package/modules/tabs/tabset.component.d.ts +1 -1
- package/modules/vertical-tabset/vertical-tab.component.d.ts +8 -13
- package/modules/vertical-tabset/vertical-tabset-group.component.d.ts +2 -2
- package/modules/vertical-tabset/vertical-tabset.component.d.ts +17 -2
- package/modules/vertical-tabset/vertical-tabset.module.d.ts +4 -3
- package/package.json +11 -11
- package/bundles/skyux-tabs-testing.umd.js.map +0 -1
- package/bundles/skyux-tabs.umd.js.map +0 -1
package/fesm2015/skyux-tabs.js
CHANGED
|
@@ -6,17 +6,18 @@ import { trigger, transition, style, animate } from '@angular/animations';
|
|
|
6
6
|
import { BehaviorSubject, Subject, forkJoin, combineLatest, race } 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';
|
|
@@ -39,7 +40,7 @@ class SkyVerticalTabsetService {
|
|
|
39
40
|
this._contentAdded = false;
|
|
40
41
|
this._tabsVisible = false;
|
|
41
42
|
this._isMobile = false;
|
|
42
|
-
this.mediaQueryService.subscribe(breakpoint => {
|
|
43
|
+
this.mediaQueryService.subscribe((breakpoint) => {
|
|
43
44
|
const nowMobile = breakpoint === SkyMediaBreakpoints.xs;
|
|
44
45
|
if (nowMobile && !this._isMobile) {
|
|
45
46
|
// switching to mobile
|
|
@@ -85,7 +86,7 @@ class SkyVerticalTabsetService {
|
|
|
85
86
|
}
|
|
86
87
|
this.tabs.splice(tabIndex, 1);
|
|
87
88
|
// update tab indices
|
|
88
|
-
this.tabs.forEach((tabItem, index) => tabItem.index = index);
|
|
89
|
+
this.tabs.forEach((tabItem, index) => (tabItem.index = index));
|
|
89
90
|
if (tab.active) {
|
|
90
91
|
if (!this.maintainTabContent) {
|
|
91
92
|
this.destroyContent();
|
|
@@ -101,7 +102,7 @@ class SkyVerticalTabsetService {
|
|
|
101
102
|
}
|
|
102
103
|
activateTab(tab) {
|
|
103
104
|
// unactivate active tab
|
|
104
|
-
let activeTab = this.tabs.find(t => t.index === this.activeIndex);
|
|
105
|
+
let activeTab = this.tabs.find((t) => t.index === this.activeIndex);
|
|
105
106
|
if (activeTab && activeTab.index !== tab.index) {
|
|
106
107
|
activeTab.active = false;
|
|
107
108
|
activeTab.tabDeactivated();
|
|
@@ -111,7 +112,7 @@ class SkyVerticalTabsetService {
|
|
|
111
112
|
this.updateTabClicked();
|
|
112
113
|
}
|
|
113
114
|
activeTab() {
|
|
114
|
-
return this.tabs.find(t => t.index === this.activeIndex);
|
|
115
|
+
return this.tabs.find((t) => t.index === this.activeIndex);
|
|
115
116
|
}
|
|
116
117
|
isMobile() {
|
|
117
118
|
return this._isMobile;
|
|
@@ -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
|
|
|
@@ -212,7 +213,7 @@ class SkySectionedFormComponent {
|
|
|
212
213
|
this.tabService.maintainTabContent = this.maintainSectionContent;
|
|
213
214
|
this.tabService.indexChanged
|
|
214
215
|
.pipe(takeUntil(this._ngUnsubscribe))
|
|
215
|
-
.subscribe(index => {
|
|
216
|
+
.subscribe((index) => {
|
|
216
217
|
this.indexChanged.emit(index);
|
|
217
218
|
this.changeRef.markForCheck();
|
|
218
219
|
});
|
|
@@ -245,22 +246,22 @@ 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%)' }),
|
|
253
|
-
animate('150ms ease-in')
|
|
254
|
-
])
|
|
254
|
+
animate('150ms ease-in'),
|
|
255
|
+
]),
|
|
255
256
|
]),
|
|
256
257
|
trigger('contentEnter', [
|
|
257
258
|
transition(`${HIDDEN_STATE} => ${VISIBLE_STATE}`, [
|
|
258
259
|
style({ transform: 'translate(100%)' }),
|
|
259
|
-
animate('150ms ease-in')
|
|
260
|
-
])
|
|
261
|
-
])
|
|
260
|
+
animate('150ms ease-in'),
|
|
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',
|
|
@@ -272,16 +273,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImpo
|
|
|
272
273
|
trigger('tabEnter', [
|
|
273
274
|
transition(`${HIDDEN_STATE} => ${VISIBLE_STATE}`, [
|
|
274
275
|
style({ transform: 'translate(-100%)' }),
|
|
275
|
-
animate('150ms ease-in')
|
|
276
|
-
])
|
|
276
|
+
animate('150ms ease-in'),
|
|
277
|
+
]),
|
|
277
278
|
]),
|
|
278
279
|
trigger('contentEnter', [
|
|
279
280
|
transition(`${HIDDEN_STATE} => ${VISIBLE_STATE}`, [
|
|
280
281
|
style({ transform: 'translate(100%)' }),
|
|
281
|
-
animate('150ms ease-in')
|
|
282
|
-
])
|
|
283
|
-
])
|
|
284
|
-
]
|
|
282
|
+
animate('150ms ease-in'),
|
|
283
|
+
]),
|
|
284
|
+
]),
|
|
285
|
+
],
|
|
285
286
|
}]
|
|
286
287
|
}], ctorParameters: function () { return [{ type: SkyVerticalTabsetService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { maintainSectionContent: [{
|
|
287
288
|
type: Input
|
|
@@ -308,7 +309,7 @@ class SkyVerticalTabMediaQueryService {
|
|
|
308
309
|
return this.currentSubject.subscribe({
|
|
309
310
|
next: (breakpoints) => {
|
|
310
311
|
listener(breakpoints);
|
|
311
|
-
}
|
|
312
|
+
},
|
|
312
313
|
});
|
|
313
314
|
}
|
|
314
315
|
setBreakpointForWidth(width) {
|
|
@@ -337,16 +338,16 @@ class SkyVerticalTabMediaQueryService {
|
|
|
337
338
|
const lgBreakpointMinPixels = 1200;
|
|
338
339
|
switch (breakpoint) {
|
|
339
340
|
case SkyMediaBreakpoints.xs: {
|
|
340
|
-
return
|
|
341
|
+
return width <= xsBreakpointMaxPixels;
|
|
341
342
|
}
|
|
342
343
|
case SkyMediaBreakpoints.sm: {
|
|
343
|
-
return
|
|
344
|
+
return width >= smBreakpointMinPixels && width <= smBreakpointMaxPixels;
|
|
344
345
|
}
|
|
345
346
|
case SkyMediaBreakpoints.md: {
|
|
346
|
-
return
|
|
347
|
+
return width >= mdBreakpointMinPixels && width <= mdBreakpointMaxPixels;
|
|
347
348
|
}
|
|
348
349
|
default: {
|
|
349
|
-
return
|
|
350
|
+
return width >= lgBreakpointMinPixels;
|
|
350
351
|
}
|
|
351
352
|
}
|
|
352
353
|
}
|
|
@@ -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) {
|
|
@@ -484,8 +482,7 @@ class SkyVerticalTabComponent {
|
|
|
484
482
|
ngOnInit() {
|
|
485
483
|
this.isMobile = this.tabsetService.isMobile();
|
|
486
484
|
this.changeRef.markForCheck();
|
|
487
|
-
this.tabsetService.switchingMobile
|
|
488
|
-
.subscribe((mobile) => {
|
|
485
|
+
this.tabsetService.switchingMobile.subscribe((mobile) => {
|
|
489
486
|
this.isMobile = mobile;
|
|
490
487
|
this.changeRef.markForCheck();
|
|
491
488
|
});
|
|
@@ -521,6 +518,21 @@ class SkyVerticalTabComponent {
|
|
|
521
518
|
this.changeRef.markForCheck();
|
|
522
519
|
}
|
|
523
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
|
+
}
|
|
524
536
|
onWindowResize() {
|
|
525
537
|
this.updateBreakpointAndResponsiveClass(this.adapterService.getWidth(this.tabContent));
|
|
526
538
|
}
|
|
@@ -534,12 +546,15 @@ class SkyVerticalTabComponent {
|
|
|
534
546
|
this.changeRef.markForCheck();
|
|
535
547
|
}
|
|
536
548
|
}
|
|
537
|
-
SkyVerticalTabComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.
|
|
538
|
-
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: [
|
|
539
551
|
SkyVerticalTabMediaQueryService,
|
|
540
|
-
{
|
|
541
|
-
|
|
542
|
-
|
|
552
|
+
{
|
|
553
|
+
provide: SkyMediaQueryService,
|
|
554
|
+
useExisting: SkyVerticalTabMediaQueryService,
|
|
555
|
+
},
|
|
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: [{
|
|
543
558
|
type: Component,
|
|
544
559
|
args: [{
|
|
545
560
|
selector: 'sky-vertical-tab',
|
|
@@ -547,18 +562,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImpo
|
|
|
547
562
|
styleUrls: ['./vertical-tab.component.scss'],
|
|
548
563
|
providers: [
|
|
549
564
|
SkyVerticalTabMediaQueryService,
|
|
550
|
-
{
|
|
565
|
+
{
|
|
566
|
+
provide: SkyMediaQueryService,
|
|
567
|
+
useExisting: SkyVerticalTabMediaQueryService,
|
|
568
|
+
},
|
|
551
569
|
],
|
|
552
|
-
changeDetection: ChangeDetectionStrategy.OnPush
|
|
570
|
+
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
553
571
|
}]
|
|
554
572
|
}], ctorParameters: function () { return [{ type: SkyVerticalTabsetAdapterService }, { type: i0.ChangeDetectorRef }, { type: SkyVerticalTabsetService }, { type: SkyVerticalTabMediaQueryService }]; }, propDecorators: { active: [{
|
|
555
573
|
type: Input
|
|
556
574
|
}], ariaControls: [{
|
|
557
575
|
type: Input
|
|
558
|
-
}], ariaInvalid: [{
|
|
559
|
-
type: Input
|
|
560
|
-
}], ariaRequired: [{
|
|
561
|
-
type: Input
|
|
562
576
|
}], ariaRole: [{
|
|
563
577
|
type: Input
|
|
564
578
|
}], disabled: [{
|
|
@@ -607,9 +621,9 @@ class SkySectionedFormService {
|
|
|
607
621
|
this.requiredChange.next(isRequired);
|
|
608
622
|
}
|
|
609
623
|
}
|
|
610
|
-
SkySectionedFormService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.
|
|
611
|
-
SkySectionedFormService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.
|
|
612
|
-
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: [{
|
|
613
627
|
type: Injectable
|
|
614
628
|
}] });
|
|
615
629
|
|
|
@@ -624,44 +638,39 @@ class SkySectionedFormSectionComponent {
|
|
|
624
638
|
this.changeRef = changeRef;
|
|
625
639
|
this.sectionTabId = `sky-sectioned-form-tab-${++nextId$1}`;
|
|
626
640
|
this.sectionContentId = `sky-sectioned-form-section-${++nextId$1}`;
|
|
627
|
-
|
|
641
|
+
/**
|
|
642
|
+
* Indicates whether the section is active when the form loads.
|
|
643
|
+
* @default false
|
|
644
|
+
*/
|
|
645
|
+
this.active = false;
|
|
628
646
|
this._ngUnsubscribe = new Subject();
|
|
629
647
|
}
|
|
630
|
-
get ariaRole() {
|
|
631
|
-
return this.isMobile ? undefined : 'tabpanel';
|
|
632
|
-
}
|
|
633
|
-
get ariaLabelledby() {
|
|
634
|
-
return this.isMobile ? undefined : this.sectionTabId;
|
|
635
|
-
}
|
|
636
648
|
ngOnInit() {
|
|
637
|
-
this.isMobile = this.tabsetService.isMobile();
|
|
638
649
|
this.changeRef.detectChanges();
|
|
639
|
-
this.tabsetService.switchingMobile
|
|
640
|
-
.subscribe((mobile) => {
|
|
641
|
-
this.isMobile = mobile;
|
|
650
|
+
this.tabsetService.switchingMobile.subscribe((mobile) => {
|
|
642
651
|
this.changeRef.detectChanges();
|
|
643
652
|
});
|
|
644
653
|
this.sectionedFormService.requiredChange
|
|
645
654
|
.pipe(takeUntil(this._ngUnsubscribe))
|
|
646
|
-
.subscribe((required) => this.fieldRequired = required);
|
|
655
|
+
.subscribe((required) => (this.fieldRequired = required));
|
|
647
656
|
this.sectionedFormService.invalidChange
|
|
648
657
|
.pipe(takeUntil(this._ngUnsubscribe))
|
|
649
|
-
.subscribe((invalid) => this.fieldInvalid = invalid);
|
|
658
|
+
.subscribe((invalid) => (this.fieldInvalid = invalid));
|
|
650
659
|
}
|
|
651
660
|
ngOnDestroy() {
|
|
652
661
|
this._ngUnsubscribe.next();
|
|
653
662
|
this._ngUnsubscribe.complete();
|
|
654
663
|
}
|
|
655
664
|
}
|
|
656
|
-
SkySectionedFormSectionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.
|
|
657
|
-
SkySectionedFormSectionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.
|
|
658
|
-
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: [{
|
|
659
668
|
type: Component,
|
|
660
669
|
args: [{
|
|
661
670
|
selector: 'sky-sectioned-form-section',
|
|
662
671
|
templateUrl: './sectioned-form-section.component.html',
|
|
663
672
|
providers: [SkySectionedFormService],
|
|
664
|
-
styleUrls: ['./sectioned-form-section.component.scss']
|
|
673
|
+
styleUrls: ['./sectioned-form-section.component.scss'],
|
|
665
674
|
}]
|
|
666
675
|
}], ctorParameters: function () { return [{ type: SkySectionedFormService }, { type: SkyVerticalTabsetService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { heading: [{
|
|
667
676
|
type: Input
|
|
@@ -681,7 +690,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImpo
|
|
|
681
690
|
* To update this file, simply rerun the command.
|
|
682
691
|
*/
|
|
683
692
|
const RESOURCES = {
|
|
684
|
-
'EN-US': {
|
|
693
|
+
'EN-US': {
|
|
694
|
+
skyux_tab_add: { message: 'Add tab' },
|
|
695
|
+
skyux_tab_close: { message: 'Close {0} tab' },
|
|
696
|
+
skyux_tabs_navigator_next: { message: 'Next' },
|
|
697
|
+
skyux_tabs_navigator_previous: { message: 'Previous' },
|
|
698
|
+
skyux_tab_open: { message: 'Open tab' },
|
|
699
|
+
skyux_vertical_tabs_show_tabs_text: { message: 'Tab list' },
|
|
700
|
+
},
|
|
685
701
|
};
|
|
686
702
|
class SkyTabsResourcesProvider {
|
|
687
703
|
getString(localeInfo, name) {
|
|
@@ -693,22 +709,26 @@ class SkyTabsResourcesProvider {
|
|
|
693
709
|
*/
|
|
694
710
|
class SkyTabsResourcesModule {
|
|
695
711
|
}
|
|
696
|
-
SkyTabsResourcesModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.
|
|
697
|
-
SkyTabsResourcesModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.
|
|
698
|
-
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: [
|
|
715
|
+
{
|
|
699
716
|
provide: SKY_LIB_RESOURCES_PROVIDERS,
|
|
700
717
|
useClass: SkyTabsResourcesProvider,
|
|
701
|
-
multi: true
|
|
702
|
-
}
|
|
703
|
-
|
|
718
|
+
multi: true,
|
|
719
|
+
},
|
|
720
|
+
], imports: [SkyI18nModule] });
|
|
721
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyTabsResourcesModule, decorators: [{
|
|
704
722
|
type: NgModule,
|
|
705
723
|
args: [{
|
|
706
724
|
exports: [SkyI18nModule],
|
|
707
|
-
providers: [
|
|
725
|
+
providers: [
|
|
726
|
+
{
|
|
708
727
|
provide: SKY_LIB_RESOURCES_PROVIDERS,
|
|
709
728
|
useClass: SkyTabsResourcesProvider,
|
|
710
|
-
multi: true
|
|
711
|
-
}
|
|
729
|
+
multi: true,
|
|
730
|
+
},
|
|
731
|
+
],
|
|
712
732
|
}]
|
|
713
733
|
}] });
|
|
714
734
|
|
|
@@ -721,7 +741,7 @@ class SkyVerticalTabsetComponent {
|
|
|
721
741
|
/**
|
|
722
742
|
* Indicates whether the vertical tabset loads tab content during initialization so that it
|
|
723
743
|
* displays content without moving around elements in the content container.
|
|
724
|
-
* @default
|
|
744
|
+
* @default false
|
|
725
745
|
*/
|
|
726
746
|
this.maintainTabContent = false;
|
|
727
747
|
/**
|
|
@@ -739,6 +759,8 @@ class SkyVerticalTabsetComponent {
|
|
|
739
759
|
* an ARIA role indicates what an item represents on a web page, see the
|
|
740
760
|
* [WAI-ARIA roles model](https://www.w3.org/WAI/PF/aria/roles).
|
|
741
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`.
|
|
742
764
|
*/
|
|
743
765
|
get ariaRole() {
|
|
744
766
|
if (this.isMobile) {
|
|
@@ -772,9 +794,10 @@ class SkyVerticalTabsetComponent {
|
|
|
772
794
|
this.changeRef.markForCheck();
|
|
773
795
|
}
|
|
774
796
|
if (!this.showTabsText) {
|
|
775
|
-
this.resources
|
|
797
|
+
this.resources
|
|
798
|
+
.getString('skyux_vertical_tabs_show_tabs_text')
|
|
776
799
|
.pipe(take(1))
|
|
777
|
-
.subscribe(resource => {
|
|
800
|
+
.subscribe((resource) => {
|
|
778
801
|
/* sanity check */
|
|
779
802
|
/* istanbul ignore else */
|
|
780
803
|
if (!this.showTabsText) {
|
|
@@ -792,50 +815,50 @@ class SkyVerticalTabsetComponent {
|
|
|
792
815
|
this._ngUnsubscribe.complete();
|
|
793
816
|
}
|
|
794
817
|
}
|
|
795
|
-
SkyVerticalTabsetComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.
|
|
796
|
-
SkyVerticalTabsetComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.
|
|
797
|
-
SkyVerticalTabsetService
|
|
798
|
-
], 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 #groupContainerWrapper\n class=\"sky-vertical-tabset-group-container\"\n [ngClass]=\"{'sky-vertical-tabset-hidden': !tabService.tabsVisible()}\"\n [attr.role]=\"ariaRole\"\n [@tabGroupEnter]=\"tabService.animationTabsVisibleState\"\n >\n <ng-content></ng-content>\n </div>\n <div\n *ngIf=\"maintainTabContent || tabService.contentVisible()\"\n class=\"sky-vertical-tabset-content\"\n [ngClass]=\"{'sky-vertical-tabset-content-hidden': !tabService.contentVisible()}\"\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: [
|
|
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: [
|
|
799
820
|
trigger('tabGroupEnter', [
|
|
800
821
|
transition(`${HIDDEN_STATE} => ${VISIBLE_STATE}`, [
|
|
801
822
|
style({ transform: 'translate(-100%)' }),
|
|
802
|
-
animate('150ms ease-in')
|
|
803
|
-
])
|
|
823
|
+
animate('150ms ease-in'),
|
|
824
|
+
]),
|
|
804
825
|
]),
|
|
805
826
|
trigger('contentEnter', [
|
|
806
827
|
transition(`${HIDDEN_STATE} => ${VISIBLE_STATE}`, [
|
|
807
828
|
style({ transform: 'translate(100%)' }),
|
|
808
|
-
animate('150ms ease-in')
|
|
809
|
-
])
|
|
810
|
-
])
|
|
829
|
+
animate('150ms ease-in'),
|
|
830
|
+
]),
|
|
831
|
+
]),
|
|
811
832
|
], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
812
|
-
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: [{
|
|
813
834
|
type: Component,
|
|
814
835
|
args: [{
|
|
815
836
|
selector: 'sky-vertical-tabset',
|
|
816
837
|
templateUrl: './vertical-tabset.component.html',
|
|
817
838
|
styleUrls: ['./vertical-tabset.component.scss'],
|
|
818
|
-
providers: [
|
|
819
|
-
SkyVerticalTabsetService
|
|
820
|
-
],
|
|
839
|
+
providers: [SkyVerticalTabsetService],
|
|
821
840
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
822
841
|
animations: [
|
|
823
842
|
trigger('tabGroupEnter', [
|
|
824
843
|
transition(`${HIDDEN_STATE} => ${VISIBLE_STATE}`, [
|
|
825
844
|
style({ transform: 'translate(-100%)' }),
|
|
826
|
-
animate('150ms ease-in')
|
|
827
|
-
])
|
|
845
|
+
animate('150ms ease-in'),
|
|
846
|
+
]),
|
|
828
847
|
]),
|
|
829
848
|
trigger('contentEnter', [
|
|
830
849
|
transition(`${HIDDEN_STATE} => ${VISIBLE_STATE}`, [
|
|
831
850
|
style({ transform: 'translate(100%)' }),
|
|
832
|
-
animate('150ms ease-in')
|
|
833
|
-
])
|
|
834
|
-
])
|
|
835
|
-
]
|
|
851
|
+
animate('150ms ease-in'),
|
|
852
|
+
]),
|
|
853
|
+
]),
|
|
854
|
+
],
|
|
836
855
|
}]
|
|
837
856
|
}], ctorParameters: function () { return [{ type: SkyVerticalTabsetAdapterService }, { type: SkyVerticalTabsetService }, { type: i3.SkyLibResourcesService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { showTabsText: [{
|
|
838
857
|
type: Input
|
|
858
|
+
}], ariaLabel: [{
|
|
859
|
+
type: Input
|
|
860
|
+
}], ariaLabelledBy: [{
|
|
861
|
+
type: Input
|
|
839
862
|
}], ariaRole: [{
|
|
840
863
|
type: Input
|
|
841
864
|
}], maintainTabContent: [{
|
|
@@ -876,7 +899,7 @@ class SkyVerticalTabsetGroupComponent {
|
|
|
876
899
|
}
|
|
877
900
|
/**
|
|
878
901
|
* Indicates whether the collapsible group is expanded.
|
|
879
|
-
* @default
|
|
902
|
+
* @default false
|
|
880
903
|
*/
|
|
881
904
|
set open(value) {
|
|
882
905
|
this._open = value;
|
|
@@ -906,65 +929,19 @@ class SkyVerticalTabsetGroupComponent {
|
|
|
906
929
|
this.changeRef.markForCheck();
|
|
907
930
|
}
|
|
908
931
|
subMenuOpen() {
|
|
909
|
-
return this.tabs &&
|
|
932
|
+
return this.tabs && this.tabs.find((t) => t.active) !== undefined;
|
|
910
933
|
}
|
|
911
934
|
}
|
|
912
|
-
SkyVerticalTabsetGroupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.
|
|
913
|
-
SkyVerticalTabsetGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.
|
|
914
|
-
|
|
915
|
-
transition(':enter', [
|
|
916
|
-
style({
|
|
917
|
-
height: '0',
|
|
918
|
-
visibility: 'hidden'
|
|
919
|
-
}),
|
|
920
|
-
animate('150ms ease-in', style({
|
|
921
|
-
height: '*',
|
|
922
|
-
visibility: 'visible'
|
|
923
|
-
}))
|
|
924
|
-
]),
|
|
925
|
-
transition(':leave', [
|
|
926
|
-
style({
|
|
927
|
-
height: '*',
|
|
928
|
-
visibility: 'visible'
|
|
929
|
-
}),
|
|
930
|
-
animate('150ms ease-in', style({
|
|
931
|
-
height: '0',
|
|
932
|
-
visibility: 'hidden'
|
|
933
|
-
}))
|
|
934
|
-
])
|
|
935
|
-
])
|
|
936
|
-
], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
937
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", 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: [{
|
|
938
938
|
type: Component,
|
|
939
939
|
args: [{
|
|
940
940
|
selector: 'sky-vertical-tabset-group',
|
|
941
941
|
templateUrl: './vertical-tabset-group.component.html',
|
|
942
942
|
styleUrls: ['./vertical-tabset-group.component.scss'],
|
|
943
943
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
944
|
-
animations: [
|
|
945
|
-
trigger('tabSlide', [
|
|
946
|
-
transition(':enter', [
|
|
947
|
-
style({
|
|
948
|
-
height: '0',
|
|
949
|
-
visibility: 'hidden'
|
|
950
|
-
}),
|
|
951
|
-
animate('150ms ease-in', style({
|
|
952
|
-
height: '*',
|
|
953
|
-
visibility: 'visible'
|
|
954
|
-
}))
|
|
955
|
-
]),
|
|
956
|
-
transition(':leave', [
|
|
957
|
-
style({
|
|
958
|
-
height: '*',
|
|
959
|
-
visibility: 'visible'
|
|
960
|
-
}),
|
|
961
|
-
animate('150ms ease-in', style({
|
|
962
|
-
height: '0',
|
|
963
|
-
visibility: 'hidden'
|
|
964
|
-
}))
|
|
965
|
-
])
|
|
966
|
-
])
|
|
967
|
-
]
|
|
944
|
+
animations: [skyAnimationSlide],
|
|
968
945
|
}]
|
|
969
946
|
}], ctorParameters: function () { return [{ type: SkyVerticalTabsetService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { disabled: [{
|
|
970
947
|
type: Input
|
|
@@ -979,86 +956,77 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImpo
|
|
|
979
956
|
|
|
980
957
|
class SkyVerticalTabsetModule {
|
|
981
958
|
}
|
|
982
|
-
SkyVerticalTabsetModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.
|
|
983
|
-
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,
|
|
984
961
|
SkyVerticalTabsetGroupComponent,
|
|
985
962
|
SkyVerticalTabComponent], imports: [CommonModule,
|
|
986
|
-
SkyChevronModule,
|
|
987
963
|
SkyIconModule,
|
|
964
|
+
SkyIdModule,
|
|
965
|
+
SkyExpansionIndicatorModule,
|
|
988
966
|
SkyStatusIndicatorModule,
|
|
989
967
|
SkyTabsResourcesModule,
|
|
990
968
|
SkyThemeModule], exports: [SkyVerticalTabsetComponent,
|
|
991
969
|
SkyVerticalTabsetGroupComponent,
|
|
992
970
|
SkyVerticalTabComponent] });
|
|
993
|
-
SkyVerticalTabsetModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.
|
|
994
|
-
SkyVerticalTabsetAdapterService
|
|
995
|
-
], imports: [[
|
|
971
|
+
SkyVerticalTabsetModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyVerticalTabsetModule, providers: [SkyVerticalTabsetAdapterService], imports: [[
|
|
996
972
|
CommonModule,
|
|
997
|
-
SkyChevronModule,
|
|
998
973
|
SkyIconModule,
|
|
974
|
+
SkyIdModule,
|
|
975
|
+
SkyExpansionIndicatorModule,
|
|
999
976
|
SkyStatusIndicatorModule,
|
|
1000
977
|
SkyTabsResourcesModule,
|
|
1001
|
-
SkyThemeModule
|
|
978
|
+
SkyThemeModule,
|
|
1002
979
|
]] });
|
|
1003
|
-
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: [{
|
|
1004
981
|
type: NgModule,
|
|
1005
982
|
args: [{
|
|
1006
983
|
declarations: [
|
|
1007
984
|
SkyVerticalTabsetComponent,
|
|
1008
985
|
SkyVerticalTabsetGroupComponent,
|
|
1009
|
-
SkyVerticalTabComponent
|
|
986
|
+
SkyVerticalTabComponent,
|
|
1010
987
|
],
|
|
1011
988
|
imports: [
|
|
1012
989
|
CommonModule,
|
|
1013
|
-
SkyChevronModule,
|
|
1014
990
|
SkyIconModule,
|
|
991
|
+
SkyIdModule,
|
|
992
|
+
SkyExpansionIndicatorModule,
|
|
1015
993
|
SkyStatusIndicatorModule,
|
|
1016
994
|
SkyTabsResourcesModule,
|
|
1017
|
-
SkyThemeModule
|
|
1018
|
-
],
|
|
1019
|
-
providers: [
|
|
1020
|
-
SkyVerticalTabsetAdapterService
|
|
995
|
+
SkyThemeModule,
|
|
1021
996
|
],
|
|
997
|
+
providers: [SkyVerticalTabsetAdapterService],
|
|
1022
998
|
exports: [
|
|
1023
999
|
SkyVerticalTabsetComponent,
|
|
1024
1000
|
SkyVerticalTabsetGroupComponent,
|
|
1025
|
-
SkyVerticalTabComponent
|
|
1026
|
-
]
|
|
1001
|
+
SkyVerticalTabComponent,
|
|
1002
|
+
],
|
|
1027
1003
|
}]
|
|
1028
1004
|
}] });
|
|
1029
1005
|
|
|
1030
1006
|
class SkySectionedFormModule {
|
|
1031
1007
|
}
|
|
1032
|
-
SkySectionedFormModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.
|
|
1033
|
-
SkySectionedFormModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.
|
|
1034
|
-
SkySectionedFormSectionComponent], imports: [CommonModule,
|
|
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,
|
|
1035
1010
|
SkyCheckboxModule,
|
|
1036
1011
|
SkyThemeModule,
|
|
1037
|
-
SkyVerticalTabsetModule], exports: [SkySectionedFormComponent,
|
|
1038
|
-
|
|
1039
|
-
SkySectionedFormModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkySectionedFormModule, imports: [[
|
|
1012
|
+
SkyVerticalTabsetModule], exports: [SkySectionedFormComponent, SkySectionedFormSectionComponent] });
|
|
1013
|
+
SkySectionedFormModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkySectionedFormModule, imports: [[
|
|
1040
1014
|
CommonModule,
|
|
1041
1015
|
SkyCheckboxModule,
|
|
1042
1016
|
SkyThemeModule,
|
|
1043
|
-
SkyVerticalTabsetModule
|
|
1017
|
+
SkyVerticalTabsetModule,
|
|
1044
1018
|
]] });
|
|
1045
|
-
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: [{
|
|
1046
1020
|
type: NgModule,
|
|
1047
1021
|
args: [{
|
|
1048
|
-
declarations: [
|
|
1049
|
-
SkySectionedFormComponent,
|
|
1050
|
-
SkySectionedFormSectionComponent
|
|
1051
|
-
],
|
|
1022
|
+
declarations: [SkySectionedFormComponent, SkySectionedFormSectionComponent],
|
|
1052
1023
|
imports: [
|
|
1053
1024
|
CommonModule,
|
|
1054
1025
|
SkyCheckboxModule,
|
|
1055
1026
|
SkyThemeModule,
|
|
1056
|
-
SkyVerticalTabsetModule
|
|
1027
|
+
SkyVerticalTabsetModule,
|
|
1057
1028
|
],
|
|
1058
|
-
exports: [
|
|
1059
|
-
SkySectionedFormComponent,
|
|
1060
|
-
SkySectionedFormSectionComponent
|
|
1061
|
-
]
|
|
1029
|
+
exports: [SkySectionedFormComponent, SkySectionedFormSectionComponent],
|
|
1062
1030
|
}]
|
|
1063
1031
|
}] });
|
|
1064
1032
|
|
|
@@ -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,16 +1066,16 @@ 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',
|
|
1096
1075
|
templateUrl: './tab-button.component.html',
|
|
1097
1076
|
styleUrls: ['./tab-button.component.scss'],
|
|
1098
1077
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
1099
|
-
encapsulation: ViewEncapsulation.None
|
|
1078
|
+
encapsulation: ViewEncapsulation.None,
|
|
1100
1079
|
}]
|
|
1101
1080
|
}], propDecorators: { active: [{
|
|
1102
1081
|
type: Input
|
|
@@ -1164,11 +1143,13 @@ class SkyTabsetPermalinkService {
|
|
|
1164
1143
|
}
|
|
1165
1144
|
// Update the URL without triggering a navigation state change.
|
|
1166
1145
|
// See: https://stackoverflow.com/a/46486677
|
|
1167
|
-
const url = this.router
|
|
1146
|
+
const url = this.router
|
|
1147
|
+
.createUrlTree(['.'], {
|
|
1168
1148
|
relativeTo: this.activatedRoute,
|
|
1169
1149
|
queryParams: params,
|
|
1170
|
-
queryParamsHandling: 'merge'
|
|
1171
|
-
})
|
|
1150
|
+
queryParamsHandling: 'merge',
|
|
1151
|
+
})
|
|
1152
|
+
.toString();
|
|
1172
1153
|
// Abort redirect if the current URL is equal to the new URL.
|
|
1173
1154
|
if (this.location.isCurrentPathEqualTo(url)) {
|
|
1174
1155
|
return;
|
|
@@ -1194,7 +1175,9 @@ class SkyTabsetPermalinkService {
|
|
|
1194
1175
|
const params = this.getParams();
|
|
1195
1176
|
params[name] = value;
|
|
1196
1177
|
const baseUrl = this.location.path().split('?')[0];
|
|
1197
|
-
const paramString = Object.keys(params)
|
|
1178
|
+
const paramString = Object.keys(params)
|
|
1179
|
+
.map((k) => `${k}=${params[k]}`)
|
|
1180
|
+
.join('&');
|
|
1198
1181
|
return this.location.prepareExternalUrl(`${baseUrl}?${paramString}`);
|
|
1199
1182
|
}
|
|
1200
1183
|
/**
|
|
@@ -1204,7 +1187,8 @@ class SkyTabsetPermalinkService {
|
|
|
1204
1187
|
if (!value) {
|
|
1205
1188
|
return '';
|
|
1206
1189
|
}
|
|
1207
|
-
const sanitized = value
|
|
1190
|
+
const sanitized = value
|
|
1191
|
+
.toLowerCase()
|
|
1208
1192
|
// Remove special characters.
|
|
1209
1193
|
.replace(/[\_\~\`\@\!\#\$\%\^\&\*\(\)\[\]\{\}\;\:\'\/\\\<\>\,\.\?\=\+\|"]/g, '')
|
|
1210
1194
|
// Replace space characters with a dash.
|
|
@@ -1230,9 +1214,9 @@ class SkyTabsetPermalinkService {
|
|
|
1230
1214
|
return params;
|
|
1231
1215
|
}
|
|
1232
1216
|
}
|
|
1233
|
-
SkyTabsetPermalinkService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.
|
|
1234
|
-
SkyTabsetPermalinkService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.
|
|
1235
|
-
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: [{
|
|
1236
1220
|
type: Injectable
|
|
1237
1221
|
}], ctorParameters: function () { return [{ type: i1$1.ActivatedRoute }, { type: i2.Location }, { type: i1$1.Router }]; } });
|
|
1238
1222
|
|
|
@@ -1257,7 +1241,7 @@ class SkyTabsetService {
|
|
|
1257
1241
|
* Sets the active tab by its unique `tabIndex` property.
|
|
1258
1242
|
*/
|
|
1259
1243
|
setActiveTabIndex(value, config = {
|
|
1260
|
-
emitChange: true
|
|
1244
|
+
emitChange: true,
|
|
1261
1245
|
}) {
|
|
1262
1246
|
if (value !== undefined &&
|
|
1263
1247
|
!this.tabIndexesEqual(value, this.currentActiveTabIndex)) {
|
|
@@ -1280,18 +1264,18 @@ class SkyTabsetService {
|
|
|
1280
1264
|
return tabIndex;
|
|
1281
1265
|
}
|
|
1282
1266
|
updateTabIndex(currentTabIndex, newTabIndex) {
|
|
1283
|
-
const found = this.tabs.find(tab => this.tabIndexesEqual(tab.tabIndex, currentTabIndex));
|
|
1267
|
+
const found = this.tabs.find((tab) => this.tabIndexesEqual(tab.tabIndex, currentTabIndex));
|
|
1284
1268
|
found.tabIndex = newTabIndex;
|
|
1285
1269
|
}
|
|
1286
1270
|
/**
|
|
1287
1271
|
* Unregisters a tab component.
|
|
1288
1272
|
*/
|
|
1289
1273
|
unregisterTab(tabIndex) {
|
|
1290
|
-
const index = this.tabs.findIndex(tab => this.tabIndexesEqual(tab.tabIndex, tabIndex));
|
|
1274
|
+
const index = this.tabs.findIndex((tab) => this.tabIndexesEqual(tab.tabIndex, tabIndex));
|
|
1291
1275
|
// Notify the tabset component when an active tab is unregistered.
|
|
1292
1276
|
if (this.isTabIndexActive(this.tabs[index].tabIndex)) {
|
|
1293
1277
|
this._activeTabUnregistered.next({
|
|
1294
|
-
arrayIndex: index
|
|
1278
|
+
arrayIndex: index,
|
|
1295
1279
|
});
|
|
1296
1280
|
}
|
|
1297
1281
|
this.tabs.splice(index, 1);
|
|
@@ -1306,14 +1290,13 @@ class SkyTabsetService {
|
|
|
1306
1290
|
* Compares two tab indexes and returns `true` if they are equal.
|
|
1307
1291
|
*/
|
|
1308
1292
|
tabIndexesEqual(tabIndex1, tabIndex2) {
|
|
1309
|
-
return
|
|
1310
|
-
+tabIndex1 === +tabIndex2);
|
|
1293
|
+
return tabIndex1 === tabIndex2 || +tabIndex1 === +tabIndex2;
|
|
1311
1294
|
}
|
|
1312
1295
|
/**
|
|
1313
1296
|
* Verifies if a provided tab index is registered.
|
|
1314
1297
|
*/
|
|
1315
1298
|
isValidTabIndex(tabIndex) {
|
|
1316
|
-
return this.tabs.some(tab => this.tabIndexesEqual(tab.tabIndex, tabIndex));
|
|
1299
|
+
return this.tabs.some((tab) => this.tabIndexesEqual(tab.tabIndex, tabIndex));
|
|
1317
1300
|
}
|
|
1318
1301
|
/**
|
|
1319
1302
|
* Activates the first registered tab.
|
|
@@ -1338,9 +1321,9 @@ class SkyTabsetService {
|
|
|
1338
1321
|
return this.tabIndexesEqual(tabIndex, this.currentActiveTabIndex);
|
|
1339
1322
|
}
|
|
1340
1323
|
}
|
|
1341
|
-
SkyTabsetService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.
|
|
1342
|
-
SkyTabsetService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.
|
|
1343
|
-
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: [{
|
|
1344
1327
|
type: Injectable
|
|
1345
1328
|
}] });
|
|
1346
1329
|
|
|
@@ -1354,7 +1337,7 @@ class SkyTabComponent {
|
|
|
1354
1337
|
* Fires when users click the button to close the tab.
|
|
1355
1338
|
* The close button is added to the tab when you specify a listener for this event.
|
|
1356
1339
|
*/
|
|
1357
|
-
this.close = new EventEmitter();
|
|
1340
|
+
this.close = new EventEmitter(); // eslint-disable-line @angular-eslint/no-output-native
|
|
1358
1341
|
this.showContent = false;
|
|
1359
1342
|
this._activeChange = new BehaviorSubject(undefined);
|
|
1360
1343
|
this._stateChange = new BehaviorSubject(undefined);
|
|
@@ -1369,8 +1352,7 @@ class SkyTabComponent {
|
|
|
1369
1352
|
* @default false
|
|
1370
1353
|
*/
|
|
1371
1354
|
set active(value) {
|
|
1372
|
-
if (value !== undefined &&
|
|
1373
|
-
value !== this._active) {
|
|
1355
|
+
if (value !== undefined && value !== this._active) {
|
|
1374
1356
|
this._active = value;
|
|
1375
1357
|
this._activeChange.next();
|
|
1376
1358
|
}
|
|
@@ -1392,7 +1374,7 @@ class SkyTabComponent {
|
|
|
1392
1374
|
this._permalinkValue = this.permalinkService.urlify(value);
|
|
1393
1375
|
}
|
|
1394
1376
|
get permalinkValue() {
|
|
1395
|
-
return this._permalinkValue || this.permalinkService.urlify(this.tabHeading);
|
|
1377
|
+
return (this._permalinkValue || this.permalinkService.urlify(this.tabHeading));
|
|
1396
1378
|
}
|
|
1397
1379
|
/**
|
|
1398
1380
|
* Specifies a unique identifier for the tab.
|
|
@@ -1423,10 +1405,10 @@ class SkyTabComponent {
|
|
|
1423
1405
|
return this._tabIndexChange.asObservable();
|
|
1424
1406
|
}
|
|
1425
1407
|
ngOnChanges(changes) {
|
|
1426
|
-
if (changes.disabled && !changes.disabled.firstChange ||
|
|
1427
|
-
changes.tabHeading && !changes.tabHeading.firstChange ||
|
|
1428
|
-
changes.tabHeaderCount && !changes.tabHeaderCount.firstChange ||
|
|
1429
|
-
changes.permalinkValue && !changes.permalinkValue.firstChange) {
|
|
1408
|
+
if ((changes.disabled && !changes.disabled.firstChange) ||
|
|
1409
|
+
(changes.tabHeading && !changes.tabHeading.firstChange) ||
|
|
1410
|
+
(changes.tabHeaderCount && !changes.tabHeaderCount.firstChange) ||
|
|
1411
|
+
(changes.permalinkValue && !changes.permalinkValue.firstChange)) {
|
|
1430
1412
|
this._stateChange.next();
|
|
1431
1413
|
}
|
|
1432
1414
|
}
|
|
@@ -1448,14 +1430,14 @@ class SkyTabComponent {
|
|
|
1448
1430
|
this.changeDetector.markForCheck();
|
|
1449
1431
|
}
|
|
1450
1432
|
}
|
|
1451
|
-
SkyTabComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.
|
|
1452
|
-
SkyTabComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.
|
|
1453
|
-
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: [{
|
|
1454
1436
|
type: Component,
|
|
1455
1437
|
args: [{
|
|
1456
1438
|
selector: 'sky-tab',
|
|
1457
1439
|
templateUrl: './tab.component.html',
|
|
1458
|
-
changeDetection: ChangeDetectionStrategy.OnPush
|
|
1440
|
+
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
1459
1441
|
}]
|
|
1460
1442
|
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: SkyTabsetPermalinkService }, { type: SkyTabsetService }]; }, propDecorators: { active: [{
|
|
1461
1443
|
type: Input
|
|
@@ -1541,10 +1523,10 @@ class SkyTabsetNavButtonComponent {
|
|
|
1541
1523
|
ngAfterViewInit() {
|
|
1542
1524
|
forkJoin([
|
|
1543
1525
|
this.resourceService.getString('skyux_tabs_navigator_previous'),
|
|
1544
|
-
this.resourceService.getString('skyux_tabs_navigator_next')
|
|
1526
|
+
this.resourceService.getString('skyux_tabs_navigator_next'),
|
|
1545
1527
|
])
|
|
1546
1528
|
.pipe(take(1))
|
|
1547
|
-
.subscribe(resources => {
|
|
1529
|
+
.subscribe((resources) => {
|
|
1548
1530
|
this.previousButtonText = resources[0];
|
|
1549
1531
|
this.nextButtonText = resources[1];
|
|
1550
1532
|
this.changeDetector.detectChanges();
|
|
@@ -1569,13 +1551,13 @@ class SkyTabsetNavButtonComponent {
|
|
|
1569
1551
|
}
|
|
1570
1552
|
}
|
|
1571
1553
|
}
|
|
1572
|
-
SkyTabsetNavButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.
|
|
1573
|
-
SkyTabsetNavButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.
|
|
1574
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.
|
|
1554
|
+
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 });
|
|
1555
|
+
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" });
|
|
1556
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyTabsetNavButtonComponent, decorators: [{
|
|
1575
1557
|
type: Component,
|
|
1576
1558
|
args: [{
|
|
1577
1559
|
selector: 'sky-tabset-nav-button',
|
|
1578
|
-
templateUrl: './tabset-nav-button.component.html'
|
|
1560
|
+
templateUrl: './tabset-nav-button.component.html',
|
|
1579
1561
|
}]
|
|
1580
1562
|
}], ctorParameters: function () { return [{ type: i3.SkyLibResourcesService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { tabset: [{
|
|
1581
1563
|
type: Input
|
|
@@ -1614,7 +1596,7 @@ class SkyTabsetAdapterService {
|
|
|
1614
1596
|
.querySelector('.sky-tabset-btns')
|
|
1615
1597
|
.getBoundingClientRect();
|
|
1616
1598
|
const tabButtonsWidth = tabButtonsRect.width + tabExtraButtonsRect.width + this.tabsOffsetLeft;
|
|
1617
|
-
const newOverflow =
|
|
1599
|
+
const newOverflow = tabButtonsWidth > tabsetRect.width;
|
|
1618
1600
|
if (this.currentOverflow !== newOverflow) {
|
|
1619
1601
|
this.currentOverflow = newOverflow;
|
|
1620
1602
|
this._overflowChange.next(this.currentOverflow);
|
|
@@ -1626,13 +1608,15 @@ class SkyTabsetAdapterService {
|
|
|
1626
1608
|
getTabsOffsetLeft(tabsetEl) {
|
|
1627
1609
|
const tabsetRect = tabsetEl.getBoundingClientRect();
|
|
1628
1610
|
// The dropdown element is the first "tab" and always exists in the DOM, even when hidden.
|
|
1629
|
-
const firstTabRect = tabsetEl
|
|
1611
|
+
const firstTabRect = tabsetEl
|
|
1612
|
+
.querySelector('.sky-tabset-dropdown')
|
|
1613
|
+
.getBoundingClientRect();
|
|
1630
1614
|
return firstTabRect.left - tabsetRect.left;
|
|
1631
1615
|
}
|
|
1632
1616
|
}
|
|
1633
|
-
SkyTabsetAdapterService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.
|
|
1634
|
-
SkyTabsetAdapterService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.
|
|
1635
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.
|
|
1617
|
+
SkyTabsetAdapterService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyTabsetAdapterService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
1618
|
+
SkyTabsetAdapterService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyTabsetAdapterService });
|
|
1619
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyTabsetAdapterService, decorators: [{
|
|
1636
1620
|
type: Injectable
|
|
1637
1621
|
}] });
|
|
1638
1622
|
|
|
@@ -1717,7 +1701,7 @@ class SkyTabsetComponent {
|
|
|
1717
1701
|
* @deprecated The property was designed to create wizards by setting tabStyle="wizard" on tabsets in modals,
|
|
1718
1702
|
* but this wizard implementation was replaced by the
|
|
1719
1703
|
* [progress indicator component](https://developer.blackbaud.com/skyux/components/progress-indicator).
|
|
1720
|
-
* @default
|
|
1704
|
+
* @default "tabs"
|
|
1721
1705
|
*/
|
|
1722
1706
|
set tabStyle(value) {
|
|
1723
1707
|
/*istanbul ignore else*/
|
|
@@ -1747,7 +1731,7 @@ class SkyTabsetComponent {
|
|
|
1747
1731
|
// If the currently active tab is getting unregistered, activate the next one.
|
|
1748
1732
|
this.tabsetService.activeTabUnregistered
|
|
1749
1733
|
.pipe(takeUntil(this.ngUnsubscribe))
|
|
1750
|
-
.subscribe(tab => {
|
|
1734
|
+
.subscribe((tab) => {
|
|
1751
1735
|
// Wait for the new tabs to render before activating.
|
|
1752
1736
|
setTimeout(() => {
|
|
1753
1737
|
this.tabsetService.activateNearestTab(tab.arrayIndex);
|
|
@@ -1770,7 +1754,7 @@ class SkyTabsetComponent {
|
|
|
1770
1754
|
this.adapterService.detectOverflow();
|
|
1771
1755
|
}
|
|
1772
1756
|
onTabCloseClick(tabButton) {
|
|
1773
|
-
const tabComponent = this.tabs.find(tab => this.tabsetService.tabIndexesEqual(tab.tabIndex, tabButton.tabIndex));
|
|
1757
|
+
const tabComponent = this.tabs.find((tab) => this.tabsetService.tabIndexesEqual(tab.tabIndex, tabButton.tabIndex));
|
|
1774
1758
|
tabComponent.close.emit();
|
|
1775
1759
|
}
|
|
1776
1760
|
onTabButtonClick(tabButton) {
|
|
@@ -1802,19 +1786,17 @@ class SkyTabsetComponent {
|
|
|
1802
1786
|
listenActiveIndexChange() {
|
|
1803
1787
|
this.tabsetService.activeTabIndex
|
|
1804
1788
|
.pipe(distinctUntilChanged(), takeUntil(this.ngUnsubscribe))
|
|
1805
|
-
.subscribe(activeIndex => {
|
|
1789
|
+
.subscribe((activeIndex) => {
|
|
1806
1790
|
this.updateTabsetComponent(activeIndex);
|
|
1807
1791
|
});
|
|
1808
1792
|
}
|
|
1809
1793
|
listenTabComponentsStructuralChange() {
|
|
1810
|
-
this.tabs.changes
|
|
1811
|
-
.pipe(takeUntil(this.ngUnsubscribe))
|
|
1812
|
-
.subscribe(() => {
|
|
1794
|
+
this.tabs.changes.pipe(takeUntil(this.ngUnsubscribe)).subscribe(() => {
|
|
1813
1795
|
this.resetTabComponents();
|
|
1814
1796
|
});
|
|
1815
1797
|
}
|
|
1816
1798
|
listenTabComponentsStateChange() {
|
|
1817
|
-
combineLatest(this.tabs.map(tab => tab.activeChange))
|
|
1799
|
+
combineLatest(this.tabs.map((tab) => tab.activeChange))
|
|
1818
1800
|
.pipe(takeUntil(race(this.tabComponentsStateChangeUnsubscribe, this.ngUnsubscribe)))
|
|
1819
1801
|
.subscribe(() => {
|
|
1820
1802
|
// Wait for the tab components to render changes before finding the active one.
|
|
@@ -1824,7 +1806,7 @@ class SkyTabsetComponent {
|
|
|
1824
1806
|
this.tabsetService.setActiveTabIndex(tabIndex);
|
|
1825
1807
|
});
|
|
1826
1808
|
});
|
|
1827
|
-
combineLatest(this.tabs.map(tab => tab.tabIndexChange))
|
|
1809
|
+
combineLatest(this.tabs.map((tab) => tab.tabIndexChange))
|
|
1828
1810
|
.pipe(takeUntil(race(this.tabComponentsStateChangeUnsubscribe, this.ngUnsubscribe)))
|
|
1829
1811
|
.subscribe(() => {
|
|
1830
1812
|
// Don't emit the first change.
|
|
@@ -1836,7 +1818,7 @@ class SkyTabsetComponent {
|
|
|
1836
1818
|
});
|
|
1837
1819
|
}
|
|
1838
1820
|
});
|
|
1839
|
-
combineLatest(this.tabs.map(tab => tab.stateChange))
|
|
1821
|
+
combineLatest(this.tabs.map((tab) => tab.stateChange))
|
|
1840
1822
|
.pipe(takeUntil(race(this.tabComponentsStateChangeUnsubscribe, this.ngUnsubscribe)))
|
|
1841
1823
|
.subscribe(() => {
|
|
1842
1824
|
// Wait for the tab components to render changes before finding the active one.
|
|
@@ -1846,7 +1828,7 @@ class SkyTabsetComponent {
|
|
|
1846
1828
|
});
|
|
1847
1829
|
}
|
|
1848
1830
|
initTabComponents() {
|
|
1849
|
-
this.tabs.forEach(tab => tab.init());
|
|
1831
|
+
this.tabs.forEach((tab) => tab.init());
|
|
1850
1832
|
}
|
|
1851
1833
|
resetTabComponents() {
|
|
1852
1834
|
var _a;
|
|
@@ -1860,16 +1842,16 @@ class SkyTabsetComponent {
|
|
|
1860
1842
|
this.initTabComponents();
|
|
1861
1843
|
const activeIndex = (_a = this.getActiveTabComponent()) === null || _a === void 0 ? void 0 : _a.tabIndex;
|
|
1862
1844
|
this.tabsetService.setActiveTabIndex(activeIndex, {
|
|
1863
|
-
emitChange: false
|
|
1845
|
+
emitChange: false,
|
|
1864
1846
|
});
|
|
1865
1847
|
this.listenTabComponentsStateChange();
|
|
1866
1848
|
}
|
|
1867
1849
|
emitTabIndexChange() {
|
|
1868
1850
|
this.tabIndexesChange.emit({
|
|
1869
|
-
tabs: this.tabs.map(tab => ({
|
|
1851
|
+
tabs: this.tabs.map((tab) => ({
|
|
1870
1852
|
tabHeading: tab.tabHeading,
|
|
1871
|
-
tabIndex: tab.tabIndex
|
|
1872
|
-
}))
|
|
1853
|
+
tabIndex: tab.tabIndex,
|
|
1854
|
+
})),
|
|
1873
1855
|
});
|
|
1874
1856
|
}
|
|
1875
1857
|
unsubscribeTabComponentsStateChange() {
|
|
@@ -1881,8 +1863,8 @@ class SkyTabsetComponent {
|
|
|
1881
1863
|
this.adapterService.registerTabset(this.elementRef);
|
|
1882
1864
|
this.adapterService.overflowChange
|
|
1883
1865
|
.pipe(takeUntil(this.ngUnsubscribe))
|
|
1884
|
-
.subscribe(isOverflowing => {
|
|
1885
|
-
this.tabDisplayMode =
|
|
1866
|
+
.subscribe((isOverflowing) => {
|
|
1867
|
+
this.tabDisplayMode = isOverflowing ? 'dropdown' : 'tabs';
|
|
1886
1868
|
this.changeDetector.markForCheck();
|
|
1887
1869
|
});
|
|
1888
1870
|
}
|
|
@@ -1905,29 +1887,34 @@ class SkyTabsetComponent {
|
|
|
1905
1887
|
if (this.permalinkId) {
|
|
1906
1888
|
const paramValue = this.permalinkService.getParam(this.permalinkId);
|
|
1907
1889
|
if (paramValue) {
|
|
1908
|
-
return (_a = this.tabs.find(tab => tab.permalinkValue === paramValue)) === null || _a === void 0 ? void 0 : _a.tabIndex;
|
|
1890
|
+
return (_a = this.tabs.find((tab) => tab.permalinkValue === paramValue)) === null || _a === void 0 ? void 0 : _a.tabIndex;
|
|
1909
1891
|
}
|
|
1910
1892
|
}
|
|
1911
1893
|
}
|
|
1912
1894
|
getActiveTabComponent() {
|
|
1913
|
-
return this.tabs
|
|
1895
|
+
return this.tabs
|
|
1896
|
+
.toArray()
|
|
1897
|
+
.reverse()
|
|
1898
|
+
.find((tab) => tab.active === true);
|
|
1914
1899
|
}
|
|
1915
1900
|
createTabButtons(activeIndex) {
|
|
1916
|
-
return this.tabs.map(tab => ({
|
|
1901
|
+
return this.tabs.map((tab) => ({
|
|
1917
1902
|
active: this.tabsetService.tabIndexesEqual(tab.tabIndex, activeIndex),
|
|
1918
1903
|
closeable: tab.closeable,
|
|
1919
1904
|
ariaControls: tab.tabPanelId,
|
|
1920
1905
|
disabled: tab.disabled,
|
|
1921
1906
|
/*tslint:disable-next-line:no-null-keyword*/
|
|
1922
|
-
buttonHref:
|
|
1907
|
+
buttonHref: tab.disabled
|
|
1908
|
+
? null
|
|
1909
|
+
: this.permalinkService.getParamHref(this.permalinkId, tab.permalinkValue),
|
|
1923
1910
|
buttonId: tab.tabButtonId,
|
|
1924
1911
|
buttonTextCount: tab.tabHeaderCount,
|
|
1925
1912
|
buttonText: tab.tabHeading,
|
|
1926
|
-
tabIndex: tab.tabIndex
|
|
1913
|
+
tabIndex: tab.tabIndex,
|
|
1927
1914
|
}));
|
|
1928
1915
|
}
|
|
1929
1916
|
updateTabButtons(activeIndex) {
|
|
1930
|
-
this.tabButtons.forEach(button => {
|
|
1917
|
+
this.tabButtons.forEach((button) => {
|
|
1931
1918
|
button.active = this.tabsetService.tabIndexesEqual(button.tabIndex, activeIndex);
|
|
1932
1919
|
});
|
|
1933
1920
|
}
|
|
@@ -1943,7 +1930,7 @@ class SkyTabsetComponent {
|
|
|
1943
1930
|
updateTabsetComponent(activeIndex, regenerateTabButtons = false) {
|
|
1944
1931
|
var _a;
|
|
1945
1932
|
// Activate/deactivate tab components.
|
|
1946
|
-
this.tabs.forEach(tab => {
|
|
1933
|
+
this.tabs.forEach((tab) => {
|
|
1947
1934
|
this.tabsetService.tabIndexesEqual(tab.tabIndex, activeIndex)
|
|
1948
1935
|
? tab.activate()
|
|
1949
1936
|
: tab.deactivate();
|
|
@@ -1956,12 +1943,12 @@ class SkyTabsetComponent {
|
|
|
1956
1943
|
this.updateTabButtons(activeIndex);
|
|
1957
1944
|
}
|
|
1958
1945
|
// Update the dropdown trigger button text.
|
|
1959
|
-
this.dropdownTriggerButtonText = (_a = this.tabButtons.find(b => {
|
|
1946
|
+
this.dropdownTriggerButtonText = (_a = this.tabButtons.find((b) => {
|
|
1960
1947
|
return this.tabsetService.tabIndexesEqual(b.tabIndex, activeIndex);
|
|
1961
1948
|
})) === null || _a === void 0 ? void 0 : _a.buttonText;
|
|
1962
1949
|
// Set the query params based on active tab.
|
|
1963
1950
|
if (this.permalinkId) {
|
|
1964
|
-
const activeTabComponent = this.tabs.find(tab => {
|
|
1951
|
+
const activeTabComponent = this.tabs.find((tab) => {
|
|
1965
1952
|
return this.tabsetService.tabIndexesEqual(tab.tabIndex, activeIndex);
|
|
1966
1953
|
});
|
|
1967
1954
|
this.permalinkService.setParam(this.permalinkId, activeTabComponent.permalinkValue);
|
|
@@ -1978,13 +1965,13 @@ class SkyTabsetComponent {
|
|
|
1978
1965
|
}
|
|
1979
1966
|
}
|
|
1980
1967
|
}
|
|
1981
|
-
SkyTabsetComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.
|
|
1982
|
-
SkyTabsetComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.
|
|
1968
|
+
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 });
|
|
1969
|
+
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: [
|
|
1983
1970
|
SkyTabsetAdapterService,
|
|
1984
1971
|
SkyTabsetPermalinkService,
|
|
1985
|
-
SkyTabsetService
|
|
1986
|
-
], 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]=\"'sky-tabset-mode-' + tabDisplayMode + ' sky-tabset-style-' + tabStyle\"\n (window:resize)=\"onWindowResize()\"\n>\n <span class=\"sky-tabset-dropdown\">\n <sky-dropdown *ngIf=\"tabDisplayMode === 'dropdown'\"
|
|
1987
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.
|
|
1972
|
+
SkyTabsetService,
|
|
1973
|
+
], 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 });
|
|
1974
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyTabsetComponent, decorators: [{
|
|
1988
1975
|
type: Component,
|
|
1989
1976
|
args: [{
|
|
1990
1977
|
selector: 'sky-tabset',
|
|
@@ -1993,10 +1980,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImpo
|
|
|
1993
1980
|
providers: [
|
|
1994
1981
|
SkyTabsetAdapterService,
|
|
1995
1982
|
SkyTabsetPermalinkService,
|
|
1996
|
-
SkyTabsetService
|
|
1983
|
+
SkyTabsetService,
|
|
1997
1984
|
],
|
|
1998
1985
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
1999
|
-
encapsulation: ViewEncapsulation.None
|
|
1986
|
+
encapsulation: ViewEncapsulation.None,
|
|
2000
1987
|
}]
|
|
2001
1988
|
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: SkyTabsetAdapterService }, { type: SkyTabsetPermalinkService }, { type: SkyTabsetService }]; }, propDecorators: { active: [{
|
|
2002
1989
|
type: Input
|
|
@@ -2023,8 +2010,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImpo
|
|
|
2023
2010
|
|
|
2024
2011
|
class SkyTabsModule {
|
|
2025
2012
|
}
|
|
2026
|
-
SkyTabsModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.
|
|
2027
|
-
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,
|
|
2028
2015
|
SkyTabComponent,
|
|
2029
2016
|
SkyTabsetComponent,
|
|
2030
2017
|
SkyTabsetNavButtonComponent], imports: [CommonModule,
|
|
@@ -2033,26 +2020,24 @@ SkyTabsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version:
|
|
|
2033
2020
|
SkyI18nModule,
|
|
2034
2021
|
SkyIconModule,
|
|
2035
2022
|
SkyTabsResourcesModule,
|
|
2036
|
-
SkyThemeModule], exports: [SkyTabComponent,
|
|
2037
|
-
|
|
2038
|
-
SkyTabsetNavButtonComponent] });
|
|
2039
|
-
SkyTabsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyTabsModule, imports: [[
|
|
2023
|
+
SkyThemeModule], exports: [SkyTabComponent, SkyTabsetComponent, SkyTabsetNavButtonComponent] });
|
|
2024
|
+
SkyTabsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyTabsModule, imports: [[
|
|
2040
2025
|
CommonModule,
|
|
2041
2026
|
RouterModule,
|
|
2042
2027
|
SkyDropdownModule,
|
|
2043
2028
|
SkyI18nModule,
|
|
2044
2029
|
SkyIconModule,
|
|
2045
2030
|
SkyTabsResourcesModule,
|
|
2046
|
-
SkyThemeModule
|
|
2031
|
+
SkyThemeModule,
|
|
2047
2032
|
]] });
|
|
2048
|
-
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: [{
|
|
2049
2034
|
type: NgModule,
|
|
2050
2035
|
args: [{
|
|
2051
2036
|
declarations: [
|
|
2052
2037
|
SkyTabButtonComponent,
|
|
2053
2038
|
SkyTabComponent,
|
|
2054
2039
|
SkyTabsetComponent,
|
|
2055
|
-
SkyTabsetNavButtonComponent
|
|
2040
|
+
SkyTabsetNavButtonComponent,
|
|
2056
2041
|
],
|
|
2057
2042
|
imports: [
|
|
2058
2043
|
CommonModule,
|
|
@@ -2061,13 +2046,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImpo
|
|
|
2061
2046
|
SkyI18nModule,
|
|
2062
2047
|
SkyIconModule,
|
|
2063
2048
|
SkyTabsResourcesModule,
|
|
2064
|
-
SkyThemeModule
|
|
2049
|
+
SkyThemeModule,
|
|
2065
2050
|
],
|
|
2066
|
-
exports: [
|
|
2067
|
-
SkyTabComponent,
|
|
2068
|
-
SkyTabsetComponent,
|
|
2069
|
-
SkyTabsetNavButtonComponent
|
|
2070
|
-
]
|
|
2051
|
+
exports: [SkyTabComponent, SkyTabsetComponent, SkyTabsetNavButtonComponent],
|
|
2071
2052
|
}]
|
|
2072
2053
|
}] });
|
|
2073
2054
|
|