@skyux/tabs 5.0.0 → 5.0.4
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 +4 -4
- package/bundles/skyux-tabs.umd.js +231 -231
- package/documentation.json +178 -218
- package/esm2015/modules/sectioned-form/sectioned-form-section.component.js +9 -10
- 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 +6 -6
- 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 +37 -34
- 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 +16 -11
- package/esm2015/modules/vertical-tabset/vertical-tabset-adapter.service.js +5 -5
- package/esm2015/modules/vertical-tabset/vertical-tabset-group.component.js +23 -23
- package/esm2015/modules/vertical-tabset/vertical-tabset.component.js +21 -24
- package/esm2015/modules/vertical-tabset/vertical-tabset.module.js +12 -16
- 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 +230 -228
- package/fesm2015/skyux-tabs.js.map +1 -1
- package/package.json +12 -12
- 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
|
@@ -39,7 +39,7 @@ class SkyVerticalTabsetService {
|
|
|
39
39
|
this._contentAdded = false;
|
|
40
40
|
this._tabsVisible = false;
|
|
41
41
|
this._isMobile = false;
|
|
42
|
-
this.mediaQueryService.subscribe(breakpoint => {
|
|
42
|
+
this.mediaQueryService.subscribe((breakpoint) => {
|
|
43
43
|
const nowMobile = breakpoint === SkyMediaBreakpoints.xs;
|
|
44
44
|
if (nowMobile && !this._isMobile) {
|
|
45
45
|
// switching to mobile
|
|
@@ -85,7 +85,7 @@ class SkyVerticalTabsetService {
|
|
|
85
85
|
}
|
|
86
86
|
this.tabs.splice(tabIndex, 1);
|
|
87
87
|
// update tab indices
|
|
88
|
-
this.tabs.forEach((tabItem, index) => tabItem.index = index);
|
|
88
|
+
this.tabs.forEach((tabItem, index) => (tabItem.index = index));
|
|
89
89
|
if (tab.active) {
|
|
90
90
|
if (!this.maintainTabContent) {
|
|
91
91
|
this.destroyContent();
|
|
@@ -101,7 +101,7 @@ class SkyVerticalTabsetService {
|
|
|
101
101
|
}
|
|
102
102
|
activateTab(tab) {
|
|
103
103
|
// unactivate active tab
|
|
104
|
-
let activeTab = this.tabs.find(t => t.index === this.activeIndex);
|
|
104
|
+
let activeTab = this.tabs.find((t) => t.index === this.activeIndex);
|
|
105
105
|
if (activeTab && activeTab.index !== tab.index) {
|
|
106
106
|
activeTab.active = false;
|
|
107
107
|
activeTab.tabDeactivated();
|
|
@@ -111,7 +111,7 @@ class SkyVerticalTabsetService {
|
|
|
111
111
|
this.updateTabClicked();
|
|
112
112
|
}
|
|
113
113
|
activeTab() {
|
|
114
|
-
return this.tabs.find(t => t.index === this.activeIndex);
|
|
114
|
+
return this.tabs.find((t) => t.index === this.activeIndex);
|
|
115
115
|
}
|
|
116
116
|
isMobile() {
|
|
117
117
|
return this._isMobile;
|
|
@@ -178,9 +178,9 @@ class SkyVerticalTabsetService {
|
|
|
178
178
|
this.indexChanged.next(this.activeIndex);
|
|
179
179
|
}
|
|
180
180
|
}
|
|
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.
|
|
181
|
+
SkyVerticalTabsetService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: SkyVerticalTabsetService, deps: [{ token: i1.SkyMediaQueryService }], target: i0.ɵɵFactoryTarget.Injectable });
|
|
182
|
+
SkyVerticalTabsetService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: SkyVerticalTabsetService });
|
|
183
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: SkyVerticalTabsetService, decorators: [{
|
|
184
184
|
type: Injectable
|
|
185
185
|
}], ctorParameters: function () { return [{ type: i1.SkyMediaQueryService }]; } });
|
|
186
186
|
|
|
@@ -212,7 +212,7 @@ class SkySectionedFormComponent {
|
|
|
212
212
|
this.tabService.maintainTabContent = this.maintainSectionContent;
|
|
213
213
|
this.tabService.indexChanged
|
|
214
214
|
.pipe(takeUntil(this._ngUnsubscribe))
|
|
215
|
-
.subscribe(index => {
|
|
215
|
+
.subscribe((index) => {
|
|
216
216
|
this.indexChanged.emit(index);
|
|
217
217
|
this.changeRef.markForCheck();
|
|
218
218
|
});
|
|
@@ -245,22 +245,22 @@ class SkySectionedFormComponent {
|
|
|
245
245
|
this.changeRef.markForCheck();
|
|
246
246
|
}
|
|
247
247
|
}
|
|
248
|
-
SkySectionedFormComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.
|
|
249
|
-
SkySectionedFormComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.
|
|
248
|
+
SkySectionedFormComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: SkySectionedFormComponent, deps: [{ token: SkyVerticalTabsetService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
249
|
+
SkySectionedFormComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.15", 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
250
|
trigger('tabEnter', [
|
|
251
251
|
transition(`${HIDDEN_STATE} => ${VISIBLE_STATE}`, [
|
|
252
252
|
style({ transform: 'translate(-100%)' }),
|
|
253
|
-
animate('150ms ease-in')
|
|
254
|
-
])
|
|
253
|
+
animate('150ms ease-in'),
|
|
254
|
+
]),
|
|
255
255
|
]),
|
|
256
256
|
trigger('contentEnter', [
|
|
257
257
|
transition(`${HIDDEN_STATE} => ${VISIBLE_STATE}`, [
|
|
258
258
|
style({ transform: 'translate(100%)' }),
|
|
259
|
-
animate('150ms ease-in')
|
|
260
|
-
])
|
|
261
|
-
])
|
|
259
|
+
animate('150ms ease-in'),
|
|
260
|
+
]),
|
|
261
|
+
]),
|
|
262
262
|
], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
263
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.
|
|
263
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: SkySectionedFormComponent, decorators: [{
|
|
264
264
|
type: Component,
|
|
265
265
|
args: [{
|
|
266
266
|
selector: 'sky-sectioned-form',
|
|
@@ -272,16 +272,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.8", ngImpor
|
|
|
272
272
|
trigger('tabEnter', [
|
|
273
273
|
transition(`${HIDDEN_STATE} => ${VISIBLE_STATE}`, [
|
|
274
274
|
style({ transform: 'translate(-100%)' }),
|
|
275
|
-
animate('150ms ease-in')
|
|
276
|
-
])
|
|
275
|
+
animate('150ms ease-in'),
|
|
276
|
+
]),
|
|
277
277
|
]),
|
|
278
278
|
trigger('contentEnter', [
|
|
279
279
|
transition(`${HIDDEN_STATE} => ${VISIBLE_STATE}`, [
|
|
280
280
|
style({ transform: 'translate(100%)' }),
|
|
281
|
-
animate('150ms ease-in')
|
|
282
|
-
])
|
|
283
|
-
])
|
|
284
|
-
]
|
|
281
|
+
animate('150ms ease-in'),
|
|
282
|
+
]),
|
|
283
|
+
]),
|
|
284
|
+
],
|
|
285
285
|
}]
|
|
286
286
|
}], ctorParameters: function () { return [{ type: SkyVerticalTabsetService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { maintainSectionContent: [{
|
|
287
287
|
type: Input
|
|
@@ -308,7 +308,7 @@ class SkyVerticalTabMediaQueryService {
|
|
|
308
308
|
return this.currentSubject.subscribe({
|
|
309
309
|
next: (breakpoints) => {
|
|
310
310
|
listener(breakpoints);
|
|
311
|
-
}
|
|
311
|
+
},
|
|
312
312
|
});
|
|
313
313
|
}
|
|
314
314
|
setBreakpointForWidth(width) {
|
|
@@ -337,16 +337,16 @@ class SkyVerticalTabMediaQueryService {
|
|
|
337
337
|
const lgBreakpointMinPixels = 1200;
|
|
338
338
|
switch (breakpoint) {
|
|
339
339
|
case SkyMediaBreakpoints.xs: {
|
|
340
|
-
return
|
|
340
|
+
return width <= xsBreakpointMaxPixels;
|
|
341
341
|
}
|
|
342
342
|
case SkyMediaBreakpoints.sm: {
|
|
343
|
-
return
|
|
343
|
+
return width >= smBreakpointMinPixels && width <= smBreakpointMaxPixels;
|
|
344
344
|
}
|
|
345
345
|
case SkyMediaBreakpoints.md: {
|
|
346
|
-
return
|
|
346
|
+
return width >= mdBreakpointMinPixels && width <= mdBreakpointMaxPixels;
|
|
347
347
|
}
|
|
348
348
|
default: {
|
|
349
|
-
return
|
|
349
|
+
return width >= lgBreakpointMinPixels;
|
|
350
350
|
}
|
|
351
351
|
}
|
|
352
352
|
}
|
|
@@ -354,9 +354,9 @@ class SkyVerticalTabMediaQueryService {
|
|
|
354
354
|
this.currentSubject.complete();
|
|
355
355
|
}
|
|
356
356
|
}
|
|
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.
|
|
357
|
+
SkyVerticalTabMediaQueryService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: SkyVerticalTabMediaQueryService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
358
|
+
SkyVerticalTabMediaQueryService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: SkyVerticalTabMediaQueryService });
|
|
359
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: SkyVerticalTabMediaQueryService, decorators: [{
|
|
360
360
|
type: Injectable
|
|
361
361
|
}], ctorParameters: function () { return []; } });
|
|
362
362
|
|
|
@@ -399,9 +399,9 @@ class SkyVerticalTabsetAdapterService {
|
|
|
399
399
|
this.renderer.addClass(nativeEl, newClass);
|
|
400
400
|
}
|
|
401
401
|
}
|
|
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.
|
|
402
|
+
SkyVerticalTabsetAdapterService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: SkyVerticalTabsetAdapterService, deps: [{ token: i0.RendererFactory2 }], target: i0.ɵɵFactoryTarget.Injectable });
|
|
403
|
+
SkyVerticalTabsetAdapterService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: SkyVerticalTabsetAdapterService });
|
|
404
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: SkyVerticalTabsetAdapterService, decorators: [{
|
|
405
405
|
type: Injectable
|
|
406
406
|
}], ctorParameters: function () { return [{ type: i0.RendererFactory2 }]; } });
|
|
407
407
|
|
|
@@ -484,8 +484,7 @@ class SkyVerticalTabComponent {
|
|
|
484
484
|
ngOnInit() {
|
|
485
485
|
this.isMobile = this.tabsetService.isMobile();
|
|
486
486
|
this.changeRef.markForCheck();
|
|
487
|
-
this.tabsetService.switchingMobile
|
|
488
|
-
.subscribe((mobile) => {
|
|
487
|
+
this.tabsetService.switchingMobile.subscribe((mobile) => {
|
|
489
488
|
this.isMobile = mobile;
|
|
490
489
|
this.changeRef.markForCheck();
|
|
491
490
|
});
|
|
@@ -534,12 +533,15 @@ class SkyVerticalTabComponent {
|
|
|
534
533
|
this.changeRef.markForCheck();
|
|
535
534
|
}
|
|
536
535
|
}
|
|
537
|
-
SkyVerticalTabComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.
|
|
538
|
-
SkyVerticalTabComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.
|
|
536
|
+
SkyVerticalTabComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: SkyVerticalTabComponent, deps: [{ token: SkyVerticalTabsetAdapterService }, { token: i0.ChangeDetectorRef }, { token: SkyVerticalTabsetService }, { token: SkyVerticalTabMediaQueryService }], target: i0.ɵɵFactoryTarget.Component });
|
|
537
|
+
SkyVerticalTabComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.15", type: SkyVerticalTabComponent, selector: "sky-vertical-tab", inputs: { active: "active", ariaControls: "ariaControls", ariaInvalid: "ariaInvalid", ariaRequired: "ariaRequired", ariaRole: "ariaRole", disabled: "disabled", errorIndicator: "errorIndicator", tabHeaderCount: "tabHeaderCount", tabHeading: "tabHeading", showTabRightArrow: "showTabRightArrow", tabId: "tabId" }, host: { listeners: { "window:resize": "onWindowResize()" } }, providers: [
|
|
539
538
|
SkyVerticalTabMediaQueryService,
|
|
540
|
-
{
|
|
541
|
-
|
|
542
|
-
|
|
539
|
+
{
|
|
540
|
+
provide: SkyMediaQueryService,
|
|
541
|
+
useExisting: SkyVerticalTabMediaQueryService,
|
|
542
|
+
},
|
|
543
|
+
], viewQueries: [{ propertyName: "tabContent", first: true, predicate: ["tabContentWrapper"], descendants: true }], ngImport: i0, template: "<a\n class=\"sky-vertical-tab\"\n [attr.aria-controls]=\"ariaControls\"\n [attr.aria-invalid]=\"ariaInvalid\"\n [attr.aria-required]=\"ariaRequired ? ariaRequired : null\"\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.enter)=\"activateTab()\"\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 [ngClass]=\"{ 'sky-vertical-tab-hidden': !active }\"\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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
544
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: SkyVerticalTabComponent, decorators: [{
|
|
543
545
|
type: Component,
|
|
544
546
|
args: [{
|
|
545
547
|
selector: 'sky-vertical-tab',
|
|
@@ -547,9 +549,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.8", ngImpor
|
|
|
547
549
|
styleUrls: ['./vertical-tab.component.scss'],
|
|
548
550
|
providers: [
|
|
549
551
|
SkyVerticalTabMediaQueryService,
|
|
550
|
-
{
|
|
552
|
+
{
|
|
553
|
+
provide: SkyMediaQueryService,
|
|
554
|
+
useExisting: SkyVerticalTabMediaQueryService,
|
|
555
|
+
},
|
|
551
556
|
],
|
|
552
|
-
changeDetection: ChangeDetectionStrategy.OnPush
|
|
557
|
+
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
553
558
|
}]
|
|
554
559
|
}], ctorParameters: function () { return [{ type: SkyVerticalTabsetAdapterService }, { type: i0.ChangeDetectorRef }, { type: SkyVerticalTabsetService }, { type: SkyVerticalTabMediaQueryService }]; }, propDecorators: { active: [{
|
|
555
560
|
type: Input
|
|
@@ -607,9 +612,9 @@ class SkySectionedFormService {
|
|
|
607
612
|
this.requiredChange.next(isRequired);
|
|
608
613
|
}
|
|
609
614
|
}
|
|
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.
|
|
615
|
+
SkySectionedFormService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: SkySectionedFormService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
616
|
+
SkySectionedFormService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: SkySectionedFormService });
|
|
617
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: SkySectionedFormService, decorators: [{
|
|
613
618
|
type: Injectable
|
|
614
619
|
}] });
|
|
615
620
|
|
|
@@ -636,32 +641,31 @@ class SkySectionedFormSectionComponent {
|
|
|
636
641
|
ngOnInit() {
|
|
637
642
|
this.isMobile = this.tabsetService.isMobile();
|
|
638
643
|
this.changeRef.detectChanges();
|
|
639
|
-
this.tabsetService.switchingMobile
|
|
640
|
-
.subscribe((mobile) => {
|
|
644
|
+
this.tabsetService.switchingMobile.subscribe((mobile) => {
|
|
641
645
|
this.isMobile = mobile;
|
|
642
646
|
this.changeRef.detectChanges();
|
|
643
647
|
});
|
|
644
648
|
this.sectionedFormService.requiredChange
|
|
645
649
|
.pipe(takeUntil(this._ngUnsubscribe))
|
|
646
|
-
.subscribe((required) => this.fieldRequired = required);
|
|
650
|
+
.subscribe((required) => (this.fieldRequired = required));
|
|
647
651
|
this.sectionedFormService.invalidChange
|
|
648
652
|
.pipe(takeUntil(this._ngUnsubscribe))
|
|
649
|
-
.subscribe((invalid) => this.fieldInvalid = invalid);
|
|
653
|
+
.subscribe((invalid) => (this.fieldInvalid = invalid));
|
|
650
654
|
}
|
|
651
655
|
ngOnDestroy() {
|
|
652
656
|
this._ngUnsubscribe.next();
|
|
653
657
|
this._ngUnsubscribe.complete();
|
|
654
658
|
}
|
|
655
659
|
}
|
|
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.
|
|
660
|
+
SkySectionedFormSectionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: SkySectionedFormSectionComponent, deps: [{ token: SkySectionedFormService }, { token: SkyVerticalTabsetService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
661
|
+
SkySectionedFormSectionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.15", 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 [ariaControls]=\"sectionContentId\"\n [ariaInvalid]=\"fieldInvalid\"\n [ariaRequired]=\"fieldRequired\"\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 <div\n [attr.aria-labelledby]=\"ariaLabelledby\"\n [attr.role]=\"ariaRole\"\n [id]=\"sectionContentId\"\n #tabContent\n >\n <ng-content></ng-content>\n </div>\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", "ariaInvalid", "ariaRequired", "ariaRole", "disabled", "errorIndicator", "tabHeaderCount", "tabHeading", "showTabRightArrow", "tabId"] }], directives: [{ type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
|
|
662
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: SkySectionedFormSectionComponent, decorators: [{
|
|
659
663
|
type: Component,
|
|
660
664
|
args: [{
|
|
661
665
|
selector: 'sky-sectioned-form-section',
|
|
662
666
|
templateUrl: './sectioned-form-section.component.html',
|
|
663
667
|
providers: [SkySectionedFormService],
|
|
664
|
-
styleUrls: ['./sectioned-form-section.component.scss']
|
|
668
|
+
styleUrls: ['./sectioned-form-section.component.scss'],
|
|
665
669
|
}]
|
|
666
670
|
}], ctorParameters: function () { return [{ type: SkySectionedFormService }, { type: SkyVerticalTabsetService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { heading: [{
|
|
667
671
|
type: Input
|
|
@@ -681,7 +685,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.8", ngImpor
|
|
|
681
685
|
* To update this file, simply rerun the command.
|
|
682
686
|
*/
|
|
683
687
|
const RESOURCES = {
|
|
684
|
-
'EN-US': {
|
|
688
|
+
'EN-US': {
|
|
689
|
+
skyux_tab_add: { message: 'Add tab' },
|
|
690
|
+
skyux_tab_close: { message: 'Close {0} tab' },
|
|
691
|
+
skyux_tabs_navigator_next: { message: 'Next' },
|
|
692
|
+
skyux_tabs_navigator_previous: { message: 'Previous' },
|
|
693
|
+
skyux_tab_open: { message: 'Open tab' },
|
|
694
|
+
skyux_vertical_tabs_show_tabs_text: { message: 'Tab list' },
|
|
695
|
+
},
|
|
685
696
|
};
|
|
686
697
|
class SkyTabsResourcesProvider {
|
|
687
698
|
getString(localeInfo, name) {
|
|
@@ -693,22 +704,26 @@ class SkyTabsResourcesProvider {
|
|
|
693
704
|
*/
|
|
694
705
|
class SkyTabsResourcesModule {
|
|
695
706
|
}
|
|
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.
|
|
707
|
+
SkyTabsResourcesModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: SkyTabsResourcesModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
708
|
+
SkyTabsResourcesModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: SkyTabsResourcesModule, exports: [SkyI18nModule] });
|
|
709
|
+
SkyTabsResourcesModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: SkyTabsResourcesModule, providers: [
|
|
710
|
+
{
|
|
699
711
|
provide: SKY_LIB_RESOURCES_PROVIDERS,
|
|
700
712
|
useClass: SkyTabsResourcesProvider,
|
|
701
|
-
multi: true
|
|
702
|
-
}
|
|
703
|
-
|
|
713
|
+
multi: true,
|
|
714
|
+
},
|
|
715
|
+
], imports: [SkyI18nModule] });
|
|
716
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: SkyTabsResourcesModule, decorators: [{
|
|
704
717
|
type: NgModule,
|
|
705
718
|
args: [{
|
|
706
719
|
exports: [SkyI18nModule],
|
|
707
|
-
providers: [
|
|
720
|
+
providers: [
|
|
721
|
+
{
|
|
708
722
|
provide: SKY_LIB_RESOURCES_PROVIDERS,
|
|
709
723
|
useClass: SkyTabsResourcesProvider,
|
|
710
|
-
multi: true
|
|
711
|
-
}
|
|
724
|
+
multi: true,
|
|
725
|
+
},
|
|
726
|
+
],
|
|
712
727
|
}]
|
|
713
728
|
}] });
|
|
714
729
|
|
|
@@ -772,9 +787,10 @@ class SkyVerticalTabsetComponent {
|
|
|
772
787
|
this.changeRef.markForCheck();
|
|
773
788
|
}
|
|
774
789
|
if (!this.showTabsText) {
|
|
775
|
-
this.resources
|
|
790
|
+
this.resources
|
|
791
|
+
.getString('skyux_vertical_tabs_show_tabs_text')
|
|
776
792
|
.pipe(take(1))
|
|
777
|
-
.subscribe(resource => {
|
|
793
|
+
.subscribe((resource) => {
|
|
778
794
|
/* sanity check */
|
|
779
795
|
/* istanbul ignore else */
|
|
780
796
|
if (!this.showTabsText) {
|
|
@@ -792,47 +808,43 @@ class SkyVerticalTabsetComponent {
|
|
|
792
808
|
this._ngUnsubscribe.complete();
|
|
793
809
|
}
|
|
794
810
|
}
|
|
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: [
|
|
811
|
+
SkyVerticalTabsetComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: SkyVerticalTabsetComponent, deps: [{ token: SkyVerticalTabsetAdapterService }, { token: SkyVerticalTabsetService }, { token: i3.SkyLibResourcesService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
812
|
+
SkyVerticalTabsetComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.15", type: SkyVerticalTabsetComponent, selector: "sky-vertical-tabset", inputs: { showTabsText: "showTabsText", 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 #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]=\"{\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
813
|
trigger('tabGroupEnter', [
|
|
800
814
|
transition(`${HIDDEN_STATE} => ${VISIBLE_STATE}`, [
|
|
801
815
|
style({ transform: 'translate(-100%)' }),
|
|
802
|
-
animate('150ms ease-in')
|
|
803
|
-
])
|
|
816
|
+
animate('150ms ease-in'),
|
|
817
|
+
]),
|
|
804
818
|
]),
|
|
805
819
|
trigger('contentEnter', [
|
|
806
820
|
transition(`${HIDDEN_STATE} => ${VISIBLE_STATE}`, [
|
|
807
821
|
style({ transform: 'translate(100%)' }),
|
|
808
|
-
animate('150ms ease-in')
|
|
809
|
-
])
|
|
810
|
-
])
|
|
822
|
+
animate('150ms ease-in'),
|
|
823
|
+
]),
|
|
824
|
+
]),
|
|
811
825
|
], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
812
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.
|
|
826
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: SkyVerticalTabsetComponent, decorators: [{
|
|
813
827
|
type: Component,
|
|
814
828
|
args: [{
|
|
815
829
|
selector: 'sky-vertical-tabset',
|
|
816
830
|
templateUrl: './vertical-tabset.component.html',
|
|
817
831
|
styleUrls: ['./vertical-tabset.component.scss'],
|
|
818
|
-
providers: [
|
|
819
|
-
SkyVerticalTabsetService
|
|
820
|
-
],
|
|
832
|
+
providers: [SkyVerticalTabsetService],
|
|
821
833
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
822
834
|
animations: [
|
|
823
835
|
trigger('tabGroupEnter', [
|
|
824
836
|
transition(`${HIDDEN_STATE} => ${VISIBLE_STATE}`, [
|
|
825
837
|
style({ transform: 'translate(-100%)' }),
|
|
826
|
-
animate('150ms ease-in')
|
|
827
|
-
])
|
|
838
|
+
animate('150ms ease-in'),
|
|
839
|
+
]),
|
|
828
840
|
]),
|
|
829
841
|
trigger('contentEnter', [
|
|
830
842
|
transition(`${HIDDEN_STATE} => ${VISIBLE_STATE}`, [
|
|
831
843
|
style({ transform: 'translate(100%)' }),
|
|
832
|
-
animate('150ms ease-in')
|
|
833
|
-
])
|
|
834
|
-
])
|
|
835
|
-
]
|
|
844
|
+
animate('150ms ease-in'),
|
|
845
|
+
]),
|
|
846
|
+
]),
|
|
847
|
+
],
|
|
836
848
|
}]
|
|
837
849
|
}], ctorParameters: function () { return [{ type: SkyVerticalTabsetAdapterService }, { type: SkyVerticalTabsetService }, { type: i3.SkyLibResourcesService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { showTabsText: [{
|
|
838
850
|
type: Input
|
|
@@ -906,35 +918,35 @@ class SkyVerticalTabsetGroupComponent {
|
|
|
906
918
|
this.changeRef.markForCheck();
|
|
907
919
|
}
|
|
908
920
|
subMenuOpen() {
|
|
909
|
-
return this.tabs &&
|
|
921
|
+
return this.tabs && this.tabs.find((t) => t.active) !== undefined;
|
|
910
922
|
}
|
|
911
923
|
}
|
|
912
|
-
SkyVerticalTabsetGroupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.
|
|
913
|
-
SkyVerticalTabsetGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.
|
|
924
|
+
SkyVerticalTabsetGroupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: SkyVerticalTabsetGroupComponent, deps: [{ token: SkyVerticalTabsetService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
925
|
+
SkyVerticalTabsetGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.15", 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 sky-padding-even-default\"\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 (click)=\"toggleMenuOpen()\"\n (keyup.enter)=\"toggleMenuOpen()\"\n [tabIndex]=\"-1\"\n >\n {{ groupHeading }}\n <sky-chevron\n *skyThemeIf=\"'default'\"\n class=\"sky-vertical-tabset-group-header-chevron\"\n [direction]=\"open ? 'up' : 'down'\"\n [disabled]=\"disabled\"\n (directionChange)=\"toggleMenuOpen()\"\n (keyup.enter)=\"$event.stopPropagation()\"\n >\n </sky-chevron>\n <ng-container *skyThemeIf=\"'modern'\">\n <button\n *ngIf=\"!open\"\n class=\"\n sky-btn\n sky-btn-icon-borderless\n sky-vertical-tabset-group-header-chevron\n \"\n type=\"button\"\n >\n <sky-icon icon=\"chevron-up\" iconType=\"skyux\"> </sky-icon>\n </button>\n <button\n *ngIf=\"open\"\n class=\"\n sky-btn\n sky-btn-icon-borderless\n sky-vertical-tabset-group-header-chevron\n \"\n type=\"button\"\n >\n <sky-icon icon=\"chevron-down\" iconType=\"skyux\"> </sky-icon>\n </button>\n </ng-container>\n </div>\n <div class=\"sky-vertical-tabset-group-content\" *ngIf=\"open\" [@tabSlide]>\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{cursor:pointer;display:flex;justify-content:space-between}.sky-vertical-tabset-group-header:focus-visible{outline:thin dotted;outline:-webkit-focus-ring-color auto 5px}.sky-vertical-tabset-group-content{overflow:hidden;border-top:1px solid #e2e3e4}:host ::ng-deep .sky-vertical-tabset-group-header-chevron>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-header-chevron{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-header-chevron{position:absolute;top:6px;right:5px}\n"], components: [{ type: i4.λ2, selector: "sky-chevron", inputs: ["direction", "disabled"], outputs: ["directionChange"] }, { type: i4.λ4, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }], directives: [{ type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i4$1.λ3, selector: "[skyThemeIf]", inputs: ["skyThemeIf"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], animations: [
|
|
914
926
|
trigger('tabSlide', [
|
|
915
927
|
transition(':enter', [
|
|
916
928
|
style({
|
|
917
929
|
height: '0',
|
|
918
|
-
visibility: 'hidden'
|
|
930
|
+
visibility: 'hidden',
|
|
919
931
|
}),
|
|
920
932
|
animate('150ms ease-in', style({
|
|
921
933
|
height: '*',
|
|
922
|
-
visibility: 'visible'
|
|
923
|
-
}))
|
|
934
|
+
visibility: 'visible',
|
|
935
|
+
})),
|
|
924
936
|
]),
|
|
925
937
|
transition(':leave', [
|
|
926
938
|
style({
|
|
927
939
|
height: '*',
|
|
928
|
-
visibility: 'visible'
|
|
940
|
+
visibility: 'visible',
|
|
929
941
|
}),
|
|
930
942
|
animate('150ms ease-in', style({
|
|
931
943
|
height: '0',
|
|
932
|
-
visibility: 'hidden'
|
|
933
|
-
}))
|
|
934
|
-
])
|
|
935
|
-
])
|
|
944
|
+
visibility: 'hidden',
|
|
945
|
+
})),
|
|
946
|
+
]),
|
|
947
|
+
]),
|
|
936
948
|
], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
937
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.
|
|
949
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: SkyVerticalTabsetGroupComponent, decorators: [{
|
|
938
950
|
type: Component,
|
|
939
951
|
args: [{
|
|
940
952
|
selector: 'sky-vertical-tabset-group',
|
|
@@ -946,25 +958,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.8", ngImpor
|
|
|
946
958
|
transition(':enter', [
|
|
947
959
|
style({
|
|
948
960
|
height: '0',
|
|
949
|
-
visibility: 'hidden'
|
|
961
|
+
visibility: 'hidden',
|
|
950
962
|
}),
|
|
951
963
|
animate('150ms ease-in', style({
|
|
952
964
|
height: '*',
|
|
953
|
-
visibility: 'visible'
|
|
954
|
-
}))
|
|
965
|
+
visibility: 'visible',
|
|
966
|
+
})),
|
|
955
967
|
]),
|
|
956
968
|
transition(':leave', [
|
|
957
969
|
style({
|
|
958
970
|
height: '*',
|
|
959
|
-
visibility: 'visible'
|
|
971
|
+
visibility: 'visible',
|
|
960
972
|
}),
|
|
961
973
|
animate('150ms ease-in', style({
|
|
962
974
|
height: '0',
|
|
963
|
-
visibility: 'hidden'
|
|
964
|
-
}))
|
|
965
|
-
])
|
|
966
|
-
])
|
|
967
|
-
]
|
|
975
|
+
visibility: 'hidden',
|
|
976
|
+
})),
|
|
977
|
+
]),
|
|
978
|
+
]),
|
|
979
|
+
],
|
|
968
980
|
}]
|
|
969
981
|
}], ctorParameters: function () { return [{ type: SkyVerticalTabsetService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { disabled: [{
|
|
970
982
|
type: Input
|
|
@@ -979,8 +991,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.8", ngImpor
|
|
|
979
991
|
|
|
980
992
|
class SkyVerticalTabsetModule {
|
|
981
993
|
}
|
|
982
|
-
SkyVerticalTabsetModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.
|
|
983
|
-
SkyVerticalTabsetModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.
|
|
994
|
+
SkyVerticalTabsetModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: SkyVerticalTabsetModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
995
|
+
SkyVerticalTabsetModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: SkyVerticalTabsetModule, declarations: [SkyVerticalTabsetComponent,
|
|
984
996
|
SkyVerticalTabsetGroupComponent,
|
|
985
997
|
SkyVerticalTabComponent], imports: [CommonModule,
|
|
986
998
|
SkyChevronModule,
|
|
@@ -990,23 +1002,21 @@ SkyVerticalTabsetModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0",
|
|
|
990
1002
|
SkyThemeModule], exports: [SkyVerticalTabsetComponent,
|
|
991
1003
|
SkyVerticalTabsetGroupComponent,
|
|
992
1004
|
SkyVerticalTabComponent] });
|
|
993
|
-
SkyVerticalTabsetModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.
|
|
994
|
-
SkyVerticalTabsetAdapterService
|
|
995
|
-
], imports: [[
|
|
1005
|
+
SkyVerticalTabsetModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: SkyVerticalTabsetModule, providers: [SkyVerticalTabsetAdapterService], imports: [[
|
|
996
1006
|
CommonModule,
|
|
997
1007
|
SkyChevronModule,
|
|
998
1008
|
SkyIconModule,
|
|
999
1009
|
SkyStatusIndicatorModule,
|
|
1000
1010
|
SkyTabsResourcesModule,
|
|
1001
|
-
SkyThemeModule
|
|
1011
|
+
SkyThemeModule,
|
|
1002
1012
|
]] });
|
|
1003
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.
|
|
1013
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: SkyVerticalTabsetModule, decorators: [{
|
|
1004
1014
|
type: NgModule,
|
|
1005
1015
|
args: [{
|
|
1006
1016
|
declarations: [
|
|
1007
1017
|
SkyVerticalTabsetComponent,
|
|
1008
1018
|
SkyVerticalTabsetGroupComponent,
|
|
1009
|
-
SkyVerticalTabComponent
|
|
1019
|
+
SkyVerticalTabComponent,
|
|
1010
1020
|
],
|
|
1011
1021
|
imports: [
|
|
1012
1022
|
CommonModule,
|
|
@@ -1014,51 +1024,41 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.8", ngImpor
|
|
|
1014
1024
|
SkyIconModule,
|
|
1015
1025
|
SkyStatusIndicatorModule,
|
|
1016
1026
|
SkyTabsResourcesModule,
|
|
1017
|
-
SkyThemeModule
|
|
1018
|
-
],
|
|
1019
|
-
providers: [
|
|
1020
|
-
SkyVerticalTabsetAdapterService
|
|
1027
|
+
SkyThemeModule,
|
|
1021
1028
|
],
|
|
1029
|
+
providers: [SkyVerticalTabsetAdapterService],
|
|
1022
1030
|
exports: [
|
|
1023
1031
|
SkyVerticalTabsetComponent,
|
|
1024
1032
|
SkyVerticalTabsetGroupComponent,
|
|
1025
|
-
SkyVerticalTabComponent
|
|
1026
|
-
]
|
|
1033
|
+
SkyVerticalTabComponent,
|
|
1034
|
+
],
|
|
1027
1035
|
}]
|
|
1028
1036
|
}] });
|
|
1029
1037
|
|
|
1030
1038
|
class SkySectionedFormModule {
|
|
1031
1039
|
}
|
|
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,
|
|
1040
|
+
SkySectionedFormModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: SkySectionedFormModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
1041
|
+
SkySectionedFormModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: SkySectionedFormModule, declarations: [SkySectionedFormComponent, SkySectionedFormSectionComponent], imports: [CommonModule,
|
|
1035
1042
|
SkyCheckboxModule,
|
|
1036
1043
|
SkyThemeModule,
|
|
1037
|
-
SkyVerticalTabsetModule], exports: [SkySectionedFormComponent,
|
|
1038
|
-
|
|
1039
|
-
SkySectionedFormModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.8", ngImport: i0, type: SkySectionedFormModule, imports: [[
|
|
1044
|
+
SkyVerticalTabsetModule], exports: [SkySectionedFormComponent, SkySectionedFormSectionComponent] });
|
|
1045
|
+
SkySectionedFormModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: SkySectionedFormModule, imports: [[
|
|
1040
1046
|
CommonModule,
|
|
1041
1047
|
SkyCheckboxModule,
|
|
1042
1048
|
SkyThemeModule,
|
|
1043
|
-
SkyVerticalTabsetModule
|
|
1049
|
+
SkyVerticalTabsetModule,
|
|
1044
1050
|
]] });
|
|
1045
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.
|
|
1051
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: SkySectionedFormModule, decorators: [{
|
|
1046
1052
|
type: NgModule,
|
|
1047
1053
|
args: [{
|
|
1048
|
-
declarations: [
|
|
1049
|
-
SkySectionedFormComponent,
|
|
1050
|
-
SkySectionedFormSectionComponent
|
|
1051
|
-
],
|
|
1054
|
+
declarations: [SkySectionedFormComponent, SkySectionedFormSectionComponent],
|
|
1052
1055
|
imports: [
|
|
1053
1056
|
CommonModule,
|
|
1054
1057
|
SkyCheckboxModule,
|
|
1055
1058
|
SkyThemeModule,
|
|
1056
|
-
SkyVerticalTabsetModule
|
|
1059
|
+
SkyVerticalTabsetModule,
|
|
1057
1060
|
],
|
|
1058
|
-
exports: [
|
|
1059
|
-
SkySectionedFormComponent,
|
|
1060
|
-
SkySectionedFormSectionComponent
|
|
1061
|
-
]
|
|
1061
|
+
exports: [SkySectionedFormComponent, SkySectionedFormSectionComponent],
|
|
1062
1062
|
}]
|
|
1063
1063
|
}] });
|
|
1064
1064
|
|
|
@@ -1087,16 +1087,16 @@ class SkyTabButtonComponent {
|
|
|
1087
1087
|
event.preventDefault();
|
|
1088
1088
|
}
|
|
1089
1089
|
}
|
|
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.
|
|
1090
|
+
SkyTabButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: SkyTabButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1091
|
+
SkyTabButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.15", 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.enter)=\"onButtonEnterKeyDown($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 });
|
|
1092
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: SkyTabButtonComponent, decorators: [{
|
|
1093
1093
|
type: Component,
|
|
1094
1094
|
args: [{
|
|
1095
1095
|
selector: 'sky-tab-button',
|
|
1096
1096
|
templateUrl: './tab-button.component.html',
|
|
1097
1097
|
styleUrls: ['./tab-button.component.scss'],
|
|
1098
1098
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
1099
|
-
encapsulation: ViewEncapsulation.None
|
|
1099
|
+
encapsulation: ViewEncapsulation.None,
|
|
1100
1100
|
}]
|
|
1101
1101
|
}], propDecorators: { active: [{
|
|
1102
1102
|
type: Input
|
|
@@ -1164,11 +1164,13 @@ class SkyTabsetPermalinkService {
|
|
|
1164
1164
|
}
|
|
1165
1165
|
// Update the URL without triggering a navigation state change.
|
|
1166
1166
|
// See: https://stackoverflow.com/a/46486677
|
|
1167
|
-
const url = this.router
|
|
1167
|
+
const url = this.router
|
|
1168
|
+
.createUrlTree(['.'], {
|
|
1168
1169
|
relativeTo: this.activatedRoute,
|
|
1169
1170
|
queryParams: params,
|
|
1170
|
-
queryParamsHandling: 'merge'
|
|
1171
|
-
})
|
|
1171
|
+
queryParamsHandling: 'merge',
|
|
1172
|
+
})
|
|
1173
|
+
.toString();
|
|
1172
1174
|
// Abort redirect if the current URL is equal to the new URL.
|
|
1173
1175
|
if (this.location.isCurrentPathEqualTo(url)) {
|
|
1174
1176
|
return;
|
|
@@ -1194,7 +1196,9 @@ class SkyTabsetPermalinkService {
|
|
|
1194
1196
|
const params = this.getParams();
|
|
1195
1197
|
params[name] = value;
|
|
1196
1198
|
const baseUrl = this.location.path().split('?')[0];
|
|
1197
|
-
const paramString = Object.keys(params)
|
|
1199
|
+
const paramString = Object.keys(params)
|
|
1200
|
+
.map((k) => `${k}=${params[k]}`)
|
|
1201
|
+
.join('&');
|
|
1198
1202
|
return this.location.prepareExternalUrl(`${baseUrl}?${paramString}`);
|
|
1199
1203
|
}
|
|
1200
1204
|
/**
|
|
@@ -1204,7 +1208,8 @@ class SkyTabsetPermalinkService {
|
|
|
1204
1208
|
if (!value) {
|
|
1205
1209
|
return '';
|
|
1206
1210
|
}
|
|
1207
|
-
const sanitized = value
|
|
1211
|
+
const sanitized = value
|
|
1212
|
+
.toLowerCase()
|
|
1208
1213
|
// Remove special characters.
|
|
1209
1214
|
.replace(/[\_\~\`\@\!\#\$\%\^\&\*\(\)\[\]\{\}\;\:\'\/\\\<\>\,\.\?\=\+\|"]/g, '')
|
|
1210
1215
|
// Replace space characters with a dash.
|
|
@@ -1230,9 +1235,9 @@ class SkyTabsetPermalinkService {
|
|
|
1230
1235
|
return params;
|
|
1231
1236
|
}
|
|
1232
1237
|
}
|
|
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.
|
|
1238
|
+
SkyTabsetPermalinkService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: SkyTabsetPermalinkService, deps: [{ token: i1$1.ActivatedRoute }, { token: i2.Location }, { token: i1$1.Router }], target: i0.ɵɵFactoryTarget.Injectable });
|
|
1239
|
+
SkyTabsetPermalinkService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: SkyTabsetPermalinkService });
|
|
1240
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: SkyTabsetPermalinkService, decorators: [{
|
|
1236
1241
|
type: Injectable
|
|
1237
1242
|
}], ctorParameters: function () { return [{ type: i1$1.ActivatedRoute }, { type: i2.Location }, { type: i1$1.Router }]; } });
|
|
1238
1243
|
|
|
@@ -1257,7 +1262,7 @@ class SkyTabsetService {
|
|
|
1257
1262
|
* Sets the active tab by its unique `tabIndex` property.
|
|
1258
1263
|
*/
|
|
1259
1264
|
setActiveTabIndex(value, config = {
|
|
1260
|
-
emitChange: true
|
|
1265
|
+
emitChange: true,
|
|
1261
1266
|
}) {
|
|
1262
1267
|
if (value !== undefined &&
|
|
1263
1268
|
!this.tabIndexesEqual(value, this.currentActiveTabIndex)) {
|
|
@@ -1280,18 +1285,18 @@ class SkyTabsetService {
|
|
|
1280
1285
|
return tabIndex;
|
|
1281
1286
|
}
|
|
1282
1287
|
updateTabIndex(currentTabIndex, newTabIndex) {
|
|
1283
|
-
const found = this.tabs.find(tab => this.tabIndexesEqual(tab.tabIndex, currentTabIndex));
|
|
1288
|
+
const found = this.tabs.find((tab) => this.tabIndexesEqual(tab.tabIndex, currentTabIndex));
|
|
1284
1289
|
found.tabIndex = newTabIndex;
|
|
1285
1290
|
}
|
|
1286
1291
|
/**
|
|
1287
1292
|
* Unregisters a tab component.
|
|
1288
1293
|
*/
|
|
1289
1294
|
unregisterTab(tabIndex) {
|
|
1290
|
-
const index = this.tabs.findIndex(tab => this.tabIndexesEqual(tab.tabIndex, tabIndex));
|
|
1295
|
+
const index = this.tabs.findIndex((tab) => this.tabIndexesEqual(tab.tabIndex, tabIndex));
|
|
1291
1296
|
// Notify the tabset component when an active tab is unregistered.
|
|
1292
1297
|
if (this.isTabIndexActive(this.tabs[index].tabIndex)) {
|
|
1293
1298
|
this._activeTabUnregistered.next({
|
|
1294
|
-
arrayIndex: index
|
|
1299
|
+
arrayIndex: index,
|
|
1295
1300
|
});
|
|
1296
1301
|
}
|
|
1297
1302
|
this.tabs.splice(index, 1);
|
|
@@ -1306,14 +1311,13 @@ class SkyTabsetService {
|
|
|
1306
1311
|
* Compares two tab indexes and returns `true` if they are equal.
|
|
1307
1312
|
*/
|
|
1308
1313
|
tabIndexesEqual(tabIndex1, tabIndex2) {
|
|
1309
|
-
return
|
|
1310
|
-
+tabIndex1 === +tabIndex2);
|
|
1314
|
+
return tabIndex1 === tabIndex2 || +tabIndex1 === +tabIndex2;
|
|
1311
1315
|
}
|
|
1312
1316
|
/**
|
|
1313
1317
|
* Verifies if a provided tab index is registered.
|
|
1314
1318
|
*/
|
|
1315
1319
|
isValidTabIndex(tabIndex) {
|
|
1316
|
-
return this.tabs.some(tab => this.tabIndexesEqual(tab.tabIndex, tabIndex));
|
|
1320
|
+
return this.tabs.some((tab) => this.tabIndexesEqual(tab.tabIndex, tabIndex));
|
|
1317
1321
|
}
|
|
1318
1322
|
/**
|
|
1319
1323
|
* Activates the first registered tab.
|
|
@@ -1338,9 +1342,9 @@ class SkyTabsetService {
|
|
|
1338
1342
|
return this.tabIndexesEqual(tabIndex, this.currentActiveTabIndex);
|
|
1339
1343
|
}
|
|
1340
1344
|
}
|
|
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.
|
|
1345
|
+
SkyTabsetService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: SkyTabsetService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
1346
|
+
SkyTabsetService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: SkyTabsetService });
|
|
1347
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: SkyTabsetService, decorators: [{
|
|
1344
1348
|
type: Injectable
|
|
1345
1349
|
}] });
|
|
1346
1350
|
|
|
@@ -1354,7 +1358,7 @@ class SkyTabComponent {
|
|
|
1354
1358
|
* Fires when users click the button to close the tab.
|
|
1355
1359
|
* The close button is added to the tab when you specify a listener for this event.
|
|
1356
1360
|
*/
|
|
1357
|
-
this.close = new EventEmitter();
|
|
1361
|
+
this.close = new EventEmitter(); // eslint-disable-line @angular-eslint/no-output-native
|
|
1358
1362
|
this.showContent = false;
|
|
1359
1363
|
this._activeChange = new BehaviorSubject(undefined);
|
|
1360
1364
|
this._stateChange = new BehaviorSubject(undefined);
|
|
@@ -1369,8 +1373,7 @@ class SkyTabComponent {
|
|
|
1369
1373
|
* @default false
|
|
1370
1374
|
*/
|
|
1371
1375
|
set active(value) {
|
|
1372
|
-
if (value !== undefined &&
|
|
1373
|
-
value !== this._active) {
|
|
1376
|
+
if (value !== undefined && value !== this._active) {
|
|
1374
1377
|
this._active = value;
|
|
1375
1378
|
this._activeChange.next();
|
|
1376
1379
|
}
|
|
@@ -1392,7 +1395,7 @@ class SkyTabComponent {
|
|
|
1392
1395
|
this._permalinkValue = this.permalinkService.urlify(value);
|
|
1393
1396
|
}
|
|
1394
1397
|
get permalinkValue() {
|
|
1395
|
-
return this._permalinkValue || this.permalinkService.urlify(this.tabHeading);
|
|
1398
|
+
return (this._permalinkValue || this.permalinkService.urlify(this.tabHeading));
|
|
1396
1399
|
}
|
|
1397
1400
|
/**
|
|
1398
1401
|
* Specifies a unique identifier for the tab.
|
|
@@ -1423,10 +1426,10 @@ class SkyTabComponent {
|
|
|
1423
1426
|
return this._tabIndexChange.asObservable();
|
|
1424
1427
|
}
|
|
1425
1428
|
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) {
|
|
1429
|
+
if ((changes.disabled && !changes.disabled.firstChange) ||
|
|
1430
|
+
(changes.tabHeading && !changes.tabHeading.firstChange) ||
|
|
1431
|
+
(changes.tabHeaderCount && !changes.tabHeaderCount.firstChange) ||
|
|
1432
|
+
(changes.permalinkValue && !changes.permalinkValue.firstChange)) {
|
|
1430
1433
|
this._stateChange.next();
|
|
1431
1434
|
}
|
|
1432
1435
|
}
|
|
@@ -1448,14 +1451,14 @@ class SkyTabComponent {
|
|
|
1448
1451
|
this.changeDetector.markForCheck();
|
|
1449
1452
|
}
|
|
1450
1453
|
}
|
|
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.
|
|
1454
|
+
SkyTabComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: SkyTabComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: SkyTabsetPermalinkService }, { token: SkyTabsetService }], target: i0.ɵɵFactoryTarget.Component });
|
|
1455
|
+
SkyTabComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.15", 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 });
|
|
1456
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: SkyTabComponent, decorators: [{
|
|
1454
1457
|
type: Component,
|
|
1455
1458
|
args: [{
|
|
1456
1459
|
selector: 'sky-tab',
|
|
1457
1460
|
templateUrl: './tab.component.html',
|
|
1458
|
-
changeDetection: ChangeDetectionStrategy.OnPush
|
|
1461
|
+
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
1459
1462
|
}]
|
|
1460
1463
|
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: SkyTabsetPermalinkService }, { type: SkyTabsetService }]; }, propDecorators: { active: [{
|
|
1461
1464
|
type: Input
|
|
@@ -1541,10 +1544,10 @@ class SkyTabsetNavButtonComponent {
|
|
|
1541
1544
|
ngAfterViewInit() {
|
|
1542
1545
|
forkJoin([
|
|
1543
1546
|
this.resourceService.getString('skyux_tabs_navigator_previous'),
|
|
1544
|
-
this.resourceService.getString('skyux_tabs_navigator_next')
|
|
1547
|
+
this.resourceService.getString('skyux_tabs_navigator_next'),
|
|
1545
1548
|
])
|
|
1546
1549
|
.pipe(take(1))
|
|
1547
|
-
.subscribe(resources => {
|
|
1550
|
+
.subscribe((resources) => {
|
|
1548
1551
|
this.previousButtonText = resources[0];
|
|
1549
1552
|
this.nextButtonText = resources[1];
|
|
1550
1553
|
this.changeDetector.detectChanges();
|
|
@@ -1569,13 +1572,13 @@ class SkyTabsetNavButtonComponent {
|
|
|
1569
1572
|
}
|
|
1570
1573
|
}
|
|
1571
1574
|
}
|
|
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.
|
|
1575
|
+
SkyTabsetNavButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: SkyTabsetNavButtonComponent, deps: [{ token: i3.SkyLibResourcesService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
1576
|
+
SkyTabsetNavButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.15", type: SkyTabsetNavButtonComponent, selector: "sky-tabset-nav-button", inputs: { tabset: "tabset", buttonType: "buttonType", buttonText: "buttonText" }, ngImport: i0, template: "<button\n class=\"sky-btn sky-btn-default\"\n type=\"button\"\n [disabled]=\"disabled\"\n (click)=\"buttonClick()\"\n>\n {{ buttonText }}\n</button>\n" });
|
|
1577
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: SkyTabsetNavButtonComponent, decorators: [{
|
|
1575
1578
|
type: Component,
|
|
1576
1579
|
args: [{
|
|
1577
1580
|
selector: 'sky-tabset-nav-button',
|
|
1578
|
-
templateUrl: './tabset-nav-button.component.html'
|
|
1581
|
+
templateUrl: './tabset-nav-button.component.html',
|
|
1579
1582
|
}]
|
|
1580
1583
|
}], ctorParameters: function () { return [{ type: i3.SkyLibResourcesService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { tabset: [{
|
|
1581
1584
|
type: Input
|
|
@@ -1614,7 +1617,7 @@ class SkyTabsetAdapterService {
|
|
|
1614
1617
|
.querySelector('.sky-tabset-btns')
|
|
1615
1618
|
.getBoundingClientRect();
|
|
1616
1619
|
const tabButtonsWidth = tabButtonsRect.width + tabExtraButtonsRect.width + this.tabsOffsetLeft;
|
|
1617
|
-
const newOverflow =
|
|
1620
|
+
const newOverflow = tabButtonsWidth > tabsetRect.width;
|
|
1618
1621
|
if (this.currentOverflow !== newOverflow) {
|
|
1619
1622
|
this.currentOverflow = newOverflow;
|
|
1620
1623
|
this._overflowChange.next(this.currentOverflow);
|
|
@@ -1626,13 +1629,15 @@ class SkyTabsetAdapterService {
|
|
|
1626
1629
|
getTabsOffsetLeft(tabsetEl) {
|
|
1627
1630
|
const tabsetRect = tabsetEl.getBoundingClientRect();
|
|
1628
1631
|
// The dropdown element is the first "tab" and always exists in the DOM, even when hidden.
|
|
1629
|
-
const firstTabRect = tabsetEl
|
|
1632
|
+
const firstTabRect = tabsetEl
|
|
1633
|
+
.querySelector('.sky-tabset-dropdown')
|
|
1634
|
+
.getBoundingClientRect();
|
|
1630
1635
|
return firstTabRect.left - tabsetRect.left;
|
|
1631
1636
|
}
|
|
1632
1637
|
}
|
|
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.
|
|
1638
|
+
SkyTabsetAdapterService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: SkyTabsetAdapterService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
1639
|
+
SkyTabsetAdapterService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: SkyTabsetAdapterService });
|
|
1640
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: SkyTabsetAdapterService, decorators: [{
|
|
1636
1641
|
type: Injectable
|
|
1637
1642
|
}] });
|
|
1638
1643
|
|
|
@@ -1747,7 +1752,7 @@ class SkyTabsetComponent {
|
|
|
1747
1752
|
// If the currently active tab is getting unregistered, activate the next one.
|
|
1748
1753
|
this.tabsetService.activeTabUnregistered
|
|
1749
1754
|
.pipe(takeUntil(this.ngUnsubscribe))
|
|
1750
|
-
.subscribe(tab => {
|
|
1755
|
+
.subscribe((tab) => {
|
|
1751
1756
|
// Wait for the new tabs to render before activating.
|
|
1752
1757
|
setTimeout(() => {
|
|
1753
1758
|
this.tabsetService.activateNearestTab(tab.arrayIndex);
|
|
@@ -1770,7 +1775,7 @@ class SkyTabsetComponent {
|
|
|
1770
1775
|
this.adapterService.detectOverflow();
|
|
1771
1776
|
}
|
|
1772
1777
|
onTabCloseClick(tabButton) {
|
|
1773
|
-
const tabComponent = this.tabs.find(tab => this.tabsetService.tabIndexesEqual(tab.tabIndex, tabButton.tabIndex));
|
|
1778
|
+
const tabComponent = this.tabs.find((tab) => this.tabsetService.tabIndexesEqual(tab.tabIndex, tabButton.tabIndex));
|
|
1774
1779
|
tabComponent.close.emit();
|
|
1775
1780
|
}
|
|
1776
1781
|
onTabButtonClick(tabButton) {
|
|
@@ -1802,19 +1807,17 @@ class SkyTabsetComponent {
|
|
|
1802
1807
|
listenActiveIndexChange() {
|
|
1803
1808
|
this.tabsetService.activeTabIndex
|
|
1804
1809
|
.pipe(distinctUntilChanged(), takeUntil(this.ngUnsubscribe))
|
|
1805
|
-
.subscribe(activeIndex => {
|
|
1810
|
+
.subscribe((activeIndex) => {
|
|
1806
1811
|
this.updateTabsetComponent(activeIndex);
|
|
1807
1812
|
});
|
|
1808
1813
|
}
|
|
1809
1814
|
listenTabComponentsStructuralChange() {
|
|
1810
|
-
this.tabs.changes
|
|
1811
|
-
.pipe(takeUntil(this.ngUnsubscribe))
|
|
1812
|
-
.subscribe(() => {
|
|
1815
|
+
this.tabs.changes.pipe(takeUntil(this.ngUnsubscribe)).subscribe(() => {
|
|
1813
1816
|
this.resetTabComponents();
|
|
1814
1817
|
});
|
|
1815
1818
|
}
|
|
1816
1819
|
listenTabComponentsStateChange() {
|
|
1817
|
-
combineLatest(this.tabs.map(tab => tab.activeChange))
|
|
1820
|
+
combineLatest(this.tabs.map((tab) => tab.activeChange))
|
|
1818
1821
|
.pipe(takeUntil(race(this.tabComponentsStateChangeUnsubscribe, this.ngUnsubscribe)))
|
|
1819
1822
|
.subscribe(() => {
|
|
1820
1823
|
// Wait for the tab components to render changes before finding the active one.
|
|
@@ -1824,7 +1827,7 @@ class SkyTabsetComponent {
|
|
|
1824
1827
|
this.tabsetService.setActiveTabIndex(tabIndex);
|
|
1825
1828
|
});
|
|
1826
1829
|
});
|
|
1827
|
-
combineLatest(this.tabs.map(tab => tab.tabIndexChange))
|
|
1830
|
+
combineLatest(this.tabs.map((tab) => tab.tabIndexChange))
|
|
1828
1831
|
.pipe(takeUntil(race(this.tabComponentsStateChangeUnsubscribe, this.ngUnsubscribe)))
|
|
1829
1832
|
.subscribe(() => {
|
|
1830
1833
|
// Don't emit the first change.
|
|
@@ -1836,7 +1839,7 @@ class SkyTabsetComponent {
|
|
|
1836
1839
|
});
|
|
1837
1840
|
}
|
|
1838
1841
|
});
|
|
1839
|
-
combineLatest(this.tabs.map(tab => tab.stateChange))
|
|
1842
|
+
combineLatest(this.tabs.map((tab) => tab.stateChange))
|
|
1840
1843
|
.pipe(takeUntil(race(this.tabComponentsStateChangeUnsubscribe, this.ngUnsubscribe)))
|
|
1841
1844
|
.subscribe(() => {
|
|
1842
1845
|
// Wait for the tab components to render changes before finding the active one.
|
|
@@ -1846,7 +1849,7 @@ class SkyTabsetComponent {
|
|
|
1846
1849
|
});
|
|
1847
1850
|
}
|
|
1848
1851
|
initTabComponents() {
|
|
1849
|
-
this.tabs.forEach(tab => tab.init());
|
|
1852
|
+
this.tabs.forEach((tab) => tab.init());
|
|
1850
1853
|
}
|
|
1851
1854
|
resetTabComponents() {
|
|
1852
1855
|
var _a;
|
|
@@ -1860,16 +1863,16 @@ class SkyTabsetComponent {
|
|
|
1860
1863
|
this.initTabComponents();
|
|
1861
1864
|
const activeIndex = (_a = this.getActiveTabComponent()) === null || _a === void 0 ? void 0 : _a.tabIndex;
|
|
1862
1865
|
this.tabsetService.setActiveTabIndex(activeIndex, {
|
|
1863
|
-
emitChange: false
|
|
1866
|
+
emitChange: false,
|
|
1864
1867
|
});
|
|
1865
1868
|
this.listenTabComponentsStateChange();
|
|
1866
1869
|
}
|
|
1867
1870
|
emitTabIndexChange() {
|
|
1868
1871
|
this.tabIndexesChange.emit({
|
|
1869
|
-
tabs: this.tabs.map(tab => ({
|
|
1872
|
+
tabs: this.tabs.map((tab) => ({
|
|
1870
1873
|
tabHeading: tab.tabHeading,
|
|
1871
|
-
tabIndex: tab.tabIndex
|
|
1872
|
-
}))
|
|
1874
|
+
tabIndex: tab.tabIndex,
|
|
1875
|
+
})),
|
|
1873
1876
|
});
|
|
1874
1877
|
}
|
|
1875
1878
|
unsubscribeTabComponentsStateChange() {
|
|
@@ -1881,8 +1884,8 @@ class SkyTabsetComponent {
|
|
|
1881
1884
|
this.adapterService.registerTabset(this.elementRef);
|
|
1882
1885
|
this.adapterService.overflowChange
|
|
1883
1886
|
.pipe(takeUntil(this.ngUnsubscribe))
|
|
1884
|
-
.subscribe(isOverflowing => {
|
|
1885
|
-
this.tabDisplayMode =
|
|
1887
|
+
.subscribe((isOverflowing) => {
|
|
1888
|
+
this.tabDisplayMode = isOverflowing ? 'dropdown' : 'tabs';
|
|
1886
1889
|
this.changeDetector.markForCheck();
|
|
1887
1890
|
});
|
|
1888
1891
|
}
|
|
@@ -1905,29 +1908,34 @@ class SkyTabsetComponent {
|
|
|
1905
1908
|
if (this.permalinkId) {
|
|
1906
1909
|
const paramValue = this.permalinkService.getParam(this.permalinkId);
|
|
1907
1910
|
if (paramValue) {
|
|
1908
|
-
return (_a = this.tabs.find(tab => tab.permalinkValue === paramValue)) === null || _a === void 0 ? void 0 : _a.tabIndex;
|
|
1911
|
+
return (_a = this.tabs.find((tab) => tab.permalinkValue === paramValue)) === null || _a === void 0 ? void 0 : _a.tabIndex;
|
|
1909
1912
|
}
|
|
1910
1913
|
}
|
|
1911
1914
|
}
|
|
1912
1915
|
getActiveTabComponent() {
|
|
1913
|
-
return this.tabs
|
|
1916
|
+
return this.tabs
|
|
1917
|
+
.toArray()
|
|
1918
|
+
.reverse()
|
|
1919
|
+
.find((tab) => tab.active === true);
|
|
1914
1920
|
}
|
|
1915
1921
|
createTabButtons(activeIndex) {
|
|
1916
|
-
return this.tabs.map(tab => ({
|
|
1922
|
+
return this.tabs.map((tab) => ({
|
|
1917
1923
|
active: this.tabsetService.tabIndexesEqual(tab.tabIndex, activeIndex),
|
|
1918
1924
|
closeable: tab.closeable,
|
|
1919
1925
|
ariaControls: tab.tabPanelId,
|
|
1920
1926
|
disabled: tab.disabled,
|
|
1921
1927
|
/*tslint:disable-next-line:no-null-keyword*/
|
|
1922
|
-
buttonHref:
|
|
1928
|
+
buttonHref: tab.disabled
|
|
1929
|
+
? null
|
|
1930
|
+
: this.permalinkService.getParamHref(this.permalinkId, tab.permalinkValue),
|
|
1923
1931
|
buttonId: tab.tabButtonId,
|
|
1924
1932
|
buttonTextCount: tab.tabHeaderCount,
|
|
1925
1933
|
buttonText: tab.tabHeading,
|
|
1926
|
-
tabIndex: tab.tabIndex
|
|
1934
|
+
tabIndex: tab.tabIndex,
|
|
1927
1935
|
}));
|
|
1928
1936
|
}
|
|
1929
1937
|
updateTabButtons(activeIndex) {
|
|
1930
|
-
this.tabButtons.forEach(button => {
|
|
1938
|
+
this.tabButtons.forEach((button) => {
|
|
1931
1939
|
button.active = this.tabsetService.tabIndexesEqual(button.tabIndex, activeIndex);
|
|
1932
1940
|
});
|
|
1933
1941
|
}
|
|
@@ -1943,7 +1951,7 @@ class SkyTabsetComponent {
|
|
|
1943
1951
|
updateTabsetComponent(activeIndex, regenerateTabButtons = false) {
|
|
1944
1952
|
var _a;
|
|
1945
1953
|
// Activate/deactivate tab components.
|
|
1946
|
-
this.tabs.forEach(tab => {
|
|
1954
|
+
this.tabs.forEach((tab) => {
|
|
1947
1955
|
this.tabsetService.tabIndexesEqual(tab.tabIndex, activeIndex)
|
|
1948
1956
|
? tab.activate()
|
|
1949
1957
|
: tab.deactivate();
|
|
@@ -1956,12 +1964,12 @@ class SkyTabsetComponent {
|
|
|
1956
1964
|
this.updateTabButtons(activeIndex);
|
|
1957
1965
|
}
|
|
1958
1966
|
// Update the dropdown trigger button text.
|
|
1959
|
-
this.dropdownTriggerButtonText = (_a = this.tabButtons.find(b => {
|
|
1967
|
+
this.dropdownTriggerButtonText = (_a = this.tabButtons.find((b) => {
|
|
1960
1968
|
return this.tabsetService.tabIndexesEqual(b.tabIndex, activeIndex);
|
|
1961
1969
|
})) === null || _a === void 0 ? void 0 : _a.buttonText;
|
|
1962
1970
|
// Set the query params based on active tab.
|
|
1963
1971
|
if (this.permalinkId) {
|
|
1964
|
-
const activeTabComponent = this.tabs.find(tab => {
|
|
1972
|
+
const activeTabComponent = this.tabs.find((tab) => {
|
|
1965
1973
|
return this.tabsetService.tabIndexesEqual(tab.tabIndex, activeIndex);
|
|
1966
1974
|
});
|
|
1967
1975
|
this.permalinkService.setParam(this.permalinkId, activeTabComponent.permalinkValue);
|
|
@@ -1978,13 +1986,13 @@ class SkyTabsetComponent {
|
|
|
1978
1986
|
}
|
|
1979
1987
|
}
|
|
1980
1988
|
}
|
|
1981
|
-
SkyTabsetComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.
|
|
1982
|
-
SkyTabsetComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.
|
|
1989
|
+
SkyTabsetComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: SkyTabsetComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: SkyTabsetAdapterService }, { token: SkyTabsetPermalinkService }, { token: SkyTabsetService }], target: i0.ɵɵFactoryTarget.Component });
|
|
1990
|
+
SkyTabsetComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.15", 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
1991
|
SkyTabsetAdapterService,
|
|
1984
1992
|
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.
|
|
1993
|
+
SkyTabsetService,
|
|
1994
|
+
], queries: [{ propertyName: "tabs", predicate: SkyTabComponent }], ngImport: i0, template: "<div\n class=\"sky-tabset\"\n role=\"tablist\"\n [attr.aria-label]=\"ariaLabel\"\n [attr.aria-labelledby]=\"ariaLabelledBy\"\n [ngClass]=\"\n 'sky-tabset-mode-' + tabDisplayMode + ' sky-tabset-style-' + tabStyle\n \"\n (window:resize)=\"onWindowResize()\"\n>\n <span class=\"sky-tabset-dropdown\">\n <sky-dropdown *ngIf=\"tabDisplayMode === 'dropdown'\" buttonType=\"tab\">\n <sky-dropdown-button>\n {{ dropdownTriggerButtonText }}\n </sky-dropdown-button>\n <sky-dropdown-menu>\n <sky-dropdown-item\n *ngFor=\"let tabButton of tabButtons\"\n class=\"sky-tab-dropdown-menu-item\"\n >\n <div\n class=\"sky-tab-dropdown-item\"\n [ngClass]=\"{\n 'sky-tab-dropdown-item-selected': tabButton.active\n }\"\n >\n <ng-container\n *ngTemplateOutlet=\"\n tabButtonTemplate;\n context: {\n $implicit: tabButton\n }\n \"\n ></ng-container>\n </div>\n </sky-dropdown-item>\n </sky-dropdown-menu>\n </sky-dropdown>\n </span>\n <span class=\"sky-tabset-tabs\">\n <ng-container *ngFor=\"let tabButton of tabButtons\">\n <ng-container\n *ngTemplateOutlet=\"\n tabButtonTemplate;\n context: {\n $implicit: tabButton\n }\n \"\n ></ng-container>\n </ng-container>\n </span>\n <span class=\"sky-tabset-btns\">\n <button\n *ngIf=\"newTab.observers.length > 0\"\n class=\"sky-btn sky-btn-icon sky-tabset-btn-new sky-margin-inline-compact\"\n type=\"button\"\n [attr.aria-label]=\"'skyux_tab_add' | skyLibResources\"\n [skyThemeClass]=\"{\n 'sky-margin-inline-sm': 'modern'\n }\"\n (click)=\"onNewTabClick()\"\n >\n <sky-icon icon=\"plus-circle\" size=\"lg\"> </sky-icon>\n </button>\n <button\n *ngIf=\"openTab.observers.length > 0\"\n class=\"sky-btn sky-btn-icon sky-tabset-btn-open sky-margin-inline-compact\"\n type=\"button\"\n [attr.aria-label]=\"'skyux_tab_open' | skyLibResources\"\n [skyThemeClass]=\"{\n 'sky-margin-inline-sm': 'modern'\n }\"\n (click)=\"onOpenTabClick()\"\n >\n <sky-icon icon=\"folder-open-o\" size=\"lg\"> </sky-icon>\n </button>\n </span>\n</div>\n<ng-content></ng-content>\n\n<ng-template let-tabButton #tabButtonTemplate>\n <sky-tab-button\n [active]=\"tabButton.active\"\n [ariaControls]=\"tabButton.ariaControls\"\n [buttonHref]=\"tabButton.buttonHref\"\n [buttonId]=\"tabButton.buttonId\"\n [buttonText]=\"tabButton.buttonText\"\n [buttonTextCount]=\"tabButton.buttonTextCount\"\n [closeable]=\"tabButton.closeable\"\n [disabled]=\"tabButton.disabled\"\n [tabStyle]=\"tabStyle\"\n (buttonClick)=\"onTabButtonClick(tabButton)\"\n (closeClick)=\"onTabCloseClick(tabButton)\"\n ></sky-tab-button>\n</ng-template>\n", styles: [".sky-tabset{align-items:center;border-bottom:2px solid #0974a1;display:flex;list-style-type:none;margin:0;overflow:hidden;padding:0 0 0 15px;white-space:nowrap}.sky-tabset.sky-tabset-style-wizard{border-bottom:none;padding-bottom:10px;padding-left:0}.sky-tabset-btns{order:1;padding-left:10px}.sky-tabset-dropdown{order:0;max-width:100%}.sky-tabset-mode-dropdown{line-height:0}.sky-tabset-mode-dropdown .sky-tabset-tabs{visibility:hidden;order:2}.sky-tab-dropdown-menu-item sky-tab-button{display:flex;min-width:300px}.sky-tab-dropdown-menu-item .sky-dropdown-item{margin:0}.sky-tab-dropdown-menu-item .sky-btn-tab-wrapper{width:100%;margin-right:0}.sky-tab-dropdown-menu-item .sky-btn-tab{margin:0;border-radius:0;width:100%;display:flex}.sky-tab-dropdown-menu-item .sky-btn-tab>.sky-tab-heading{flex:1 1 auto}.sky-tab-dropdown-menu-item .sky-btn-tab>.sky-btn-tab-close{flex:0 1 auto}.sky-tabset-tabs{order:0;white-space:nowrap}.sky-tabset-btn-new,.sky-tabset-btn-open{color:#0974a1}.sky-theme-modern .sky-tabset{border-bottom:1px solid #d2d2d2;overflow:visible}.sky-theme-modern .sky-tab-dropdown-menu-item .sky-btn-tab-wrapper{margin-right:0}\n"], components: [{ type: i4$2.λ3, selector: "sky-dropdown", inputs: ["buttonStyle", "buttonType", "disabled", "dismissOnBlur", "label", "horizontalAlignment", "messageStream", "title", "trigger"] }, { type: i4$2.λ2, selector: "sky-dropdown-button" }, { type: i4$2.λ4, selector: "sky-dropdown-menu", inputs: ["ariaLabelledBy", "ariaRole", "useNativeFocus"], outputs: ["menuChanges"] }, { type: i4$2.λ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: i4$1.λ2, selector: "[skyThemeClass]", inputs: ["class", "skyThemeClass"] }], pipes: { "skyLibResources": i3.SkyLibResourcesPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
1995
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: SkyTabsetComponent, decorators: [{
|
|
1988
1996
|
type: Component,
|
|
1989
1997
|
args: [{
|
|
1990
1998
|
selector: 'sky-tabset',
|
|
@@ -1993,10 +2001,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.8", ngImpor
|
|
|
1993
2001
|
providers: [
|
|
1994
2002
|
SkyTabsetAdapterService,
|
|
1995
2003
|
SkyTabsetPermalinkService,
|
|
1996
|
-
SkyTabsetService
|
|
2004
|
+
SkyTabsetService,
|
|
1997
2005
|
],
|
|
1998
2006
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
1999
|
-
encapsulation: ViewEncapsulation.None
|
|
2007
|
+
encapsulation: ViewEncapsulation.None,
|
|
2000
2008
|
}]
|
|
2001
2009
|
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: SkyTabsetAdapterService }, { type: SkyTabsetPermalinkService }, { type: SkyTabsetService }]; }, propDecorators: { active: [{
|
|
2002
2010
|
type: Input
|
|
@@ -2023,8 +2031,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.8", ngImpor
|
|
|
2023
2031
|
|
|
2024
2032
|
class SkyTabsModule {
|
|
2025
2033
|
}
|
|
2026
|
-
SkyTabsModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.
|
|
2027
|
-
SkyTabsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.
|
|
2034
|
+
SkyTabsModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: SkyTabsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
2035
|
+
SkyTabsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: SkyTabsModule, declarations: [SkyTabButtonComponent,
|
|
2028
2036
|
SkyTabComponent,
|
|
2029
2037
|
SkyTabsetComponent,
|
|
2030
2038
|
SkyTabsetNavButtonComponent], imports: [CommonModule,
|
|
@@ -2033,26 +2041,24 @@ SkyTabsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version:
|
|
|
2033
2041
|
SkyI18nModule,
|
|
2034
2042
|
SkyIconModule,
|
|
2035
2043
|
SkyTabsResourcesModule,
|
|
2036
|
-
SkyThemeModule], exports: [SkyTabComponent,
|
|
2037
|
-
|
|
2038
|
-
SkyTabsetNavButtonComponent] });
|
|
2039
|
-
SkyTabsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.8", ngImport: i0, type: SkyTabsModule, imports: [[
|
|
2044
|
+
SkyThemeModule], exports: [SkyTabComponent, SkyTabsetComponent, SkyTabsetNavButtonComponent] });
|
|
2045
|
+
SkyTabsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: SkyTabsModule, imports: [[
|
|
2040
2046
|
CommonModule,
|
|
2041
2047
|
RouterModule,
|
|
2042
2048
|
SkyDropdownModule,
|
|
2043
2049
|
SkyI18nModule,
|
|
2044
2050
|
SkyIconModule,
|
|
2045
2051
|
SkyTabsResourcesModule,
|
|
2046
|
-
SkyThemeModule
|
|
2052
|
+
SkyThemeModule,
|
|
2047
2053
|
]] });
|
|
2048
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.
|
|
2054
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: SkyTabsModule, decorators: [{
|
|
2049
2055
|
type: NgModule,
|
|
2050
2056
|
args: [{
|
|
2051
2057
|
declarations: [
|
|
2052
2058
|
SkyTabButtonComponent,
|
|
2053
2059
|
SkyTabComponent,
|
|
2054
2060
|
SkyTabsetComponent,
|
|
2055
|
-
SkyTabsetNavButtonComponent
|
|
2061
|
+
SkyTabsetNavButtonComponent,
|
|
2056
2062
|
],
|
|
2057
2063
|
imports: [
|
|
2058
2064
|
CommonModule,
|
|
@@ -2061,13 +2067,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.8", ngImpor
|
|
|
2061
2067
|
SkyI18nModule,
|
|
2062
2068
|
SkyIconModule,
|
|
2063
2069
|
SkyTabsResourcesModule,
|
|
2064
|
-
SkyThemeModule
|
|
2070
|
+
SkyThemeModule,
|
|
2065
2071
|
],
|
|
2066
|
-
exports: [
|
|
2067
|
-
SkyTabComponent,
|
|
2068
|
-
SkyTabsetComponent,
|
|
2069
|
-
SkyTabsetNavButtonComponent
|
|
2070
|
-
]
|
|
2072
|
+
exports: [SkyTabComponent, SkyTabsetComponent, SkyTabsetNavButtonComponent],
|
|
2071
2073
|
}]
|
|
2072
2074
|
}] });
|
|
2073
2075
|
|