@skyux/tabs 5.0.3 → 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 +1 -1
- package/bundles/skyux-tabs.umd.js +213 -211
- package/documentation.json +158 -153
- 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 +9 -9
- package/bundles/skyux-tabs-testing.umd.js.map +0 -1
- package/bundles/skyux-tabs.umd.js.map +0 -1
|
@@ -102,7 +102,7 @@
|
|
|
102
102
|
}
|
|
103
103
|
this.tabs.splice(tabIndex, 1);
|
|
104
104
|
// update tab indices
|
|
105
|
-
this.tabs.forEach(function (tabItem, index) { return tabItem.index = index; });
|
|
105
|
+
this.tabs.forEach(function (tabItem, index) { return (tabItem.index = index); });
|
|
106
106
|
if (tab.active) {
|
|
107
107
|
if (!this.maintainTabContent) {
|
|
108
108
|
this.destroyContent();
|
|
@@ -199,9 +199,9 @@
|
|
|
199
199
|
};
|
|
200
200
|
return SkyVerticalTabsetService;
|
|
201
201
|
}());
|
|
202
|
-
SkyVerticalTabsetService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.
|
|
203
|
-
SkyVerticalTabsetService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.
|
|
204
|
-
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.
|
|
202
|
+
SkyVerticalTabsetService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: SkyVerticalTabsetService, deps: [{ token: i1__namespace.SkyMediaQueryService }], target: i0__namespace.ɵɵFactoryTarget.Injectable });
|
|
203
|
+
SkyVerticalTabsetService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: SkyVerticalTabsetService });
|
|
204
|
+
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: SkyVerticalTabsetService, decorators: [{
|
|
205
205
|
type: i0.Injectable
|
|
206
206
|
}], ctorParameters: function () { return [{ type: i1__namespace.SkyMediaQueryService }]; } });
|
|
207
207
|
|
|
@@ -272,26 +272,26 @@
|
|
|
272
272
|
};
|
|
273
273
|
return SkySectionedFormComponent;
|
|
274
274
|
}());
|
|
275
|
-
SkySectionedFormComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.
|
|
276
|
-
SkySectionedFormComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.
|
|
275
|
+
SkySectionedFormComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: SkySectionedFormComponent, deps: [{ token: SkyVerticalTabsetService }, { token: i0__namespace.ChangeDetectorRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
|
|
276
|
+
SkySectionedFormComponent.ɵcmp = i0__namespace.ɵɵ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__namespace, 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__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], animations: [
|
|
277
277
|
animations.trigger('tabEnter', [
|
|
278
278
|
animations.transition(HIDDEN_STATE + " => " + VISIBLE_STATE, [
|
|
279
279
|
animations.style({ transform: 'translate(-100%)' }),
|
|
280
|
-
animations.animate('150ms ease-in')
|
|
281
|
-
])
|
|
280
|
+
animations.animate('150ms ease-in'),
|
|
281
|
+
]),
|
|
282
282
|
]),
|
|
283
283
|
animations.trigger('contentEnter', [
|
|
284
284
|
animations.transition(HIDDEN_STATE + " => " + VISIBLE_STATE, [
|
|
285
285
|
animations.style({ transform: 'translate(100%)' }),
|
|
286
|
-
animations.animate('150ms ease-in')
|
|
287
|
-
])
|
|
288
|
-
])
|
|
286
|
+
animations.animate('150ms ease-in'),
|
|
287
|
+
]),
|
|
288
|
+
]),
|
|
289
289
|
], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
|
|
290
|
-
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.
|
|
290
|
+
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: SkySectionedFormComponent, decorators: [{
|
|
291
291
|
type: i0.Component,
|
|
292
292
|
args: [{
|
|
293
293
|
selector: 'sky-sectioned-form',
|
|
294
|
-
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]=\"{'sky-sectioned-form-content-hidden': !tabService.contentVisible()}\"\n [@contentEnter]=\"tabService.animationContentVisibleState\"\n #skySectionSideContent\n
|
|
294
|
+
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",
|
|
295
295
|
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"],
|
|
296
296
|
providers: [SkyVerticalTabsetService],
|
|
297
297
|
changeDetection: i0.ChangeDetectionStrategy.OnPush,
|
|
@@ -299,16 +299,16 @@
|
|
|
299
299
|
animations.trigger('tabEnter', [
|
|
300
300
|
animations.transition(HIDDEN_STATE + " => " + VISIBLE_STATE, [
|
|
301
301
|
animations.style({ transform: 'translate(-100%)' }),
|
|
302
|
-
animations.animate('150ms ease-in')
|
|
303
|
-
])
|
|
302
|
+
animations.animate('150ms ease-in'),
|
|
303
|
+
]),
|
|
304
304
|
]),
|
|
305
305
|
animations.trigger('contentEnter', [
|
|
306
306
|
animations.transition(HIDDEN_STATE + " => " + VISIBLE_STATE, [
|
|
307
307
|
animations.style({ transform: 'translate(100%)' }),
|
|
308
|
-
animations.animate('150ms ease-in')
|
|
309
|
-
])
|
|
310
|
-
])
|
|
311
|
-
]
|
|
308
|
+
animations.animate('150ms ease-in'),
|
|
309
|
+
]),
|
|
310
|
+
]),
|
|
311
|
+
],
|
|
312
312
|
}]
|
|
313
313
|
}], ctorParameters: function () { return [{ type: SkyVerticalTabsetService }, { type: i0__namespace.ChangeDetectorRef }]; }, propDecorators: { maintainSectionContent: [{
|
|
314
314
|
type: i0.Input
|
|
@@ -339,7 +339,7 @@
|
|
|
339
339
|
return this.currentSubject.subscribe({
|
|
340
340
|
next: function (breakpoints) {
|
|
341
341
|
listener(breakpoints);
|
|
342
|
-
}
|
|
342
|
+
},
|
|
343
343
|
});
|
|
344
344
|
};
|
|
345
345
|
SkyVerticalTabMediaQueryService.prototype.setBreakpointForWidth = function (width) {
|
|
@@ -368,16 +368,16 @@
|
|
|
368
368
|
var lgBreakpointMinPixels = 1200;
|
|
369
369
|
switch (breakpoint) {
|
|
370
370
|
case i1.SkyMediaBreakpoints.xs: {
|
|
371
|
-
return
|
|
371
|
+
return width <= xsBreakpointMaxPixels;
|
|
372
372
|
}
|
|
373
373
|
case i1.SkyMediaBreakpoints.sm: {
|
|
374
|
-
return
|
|
374
|
+
return width >= smBreakpointMinPixels && width <= smBreakpointMaxPixels;
|
|
375
375
|
}
|
|
376
376
|
case i1.SkyMediaBreakpoints.md: {
|
|
377
|
-
return
|
|
377
|
+
return width >= mdBreakpointMinPixels && width <= mdBreakpointMaxPixels;
|
|
378
378
|
}
|
|
379
379
|
default: {
|
|
380
|
-
return
|
|
380
|
+
return width >= lgBreakpointMinPixels;
|
|
381
381
|
}
|
|
382
382
|
}
|
|
383
383
|
};
|
|
@@ -386,9 +386,9 @@
|
|
|
386
386
|
};
|
|
387
387
|
return SkyVerticalTabMediaQueryService;
|
|
388
388
|
}());
|
|
389
|
-
SkyVerticalTabMediaQueryService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.
|
|
390
|
-
SkyVerticalTabMediaQueryService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.
|
|
391
|
-
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.
|
|
389
|
+
SkyVerticalTabMediaQueryService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: SkyVerticalTabMediaQueryService, deps: [], target: i0__namespace.ɵɵFactoryTarget.Injectable });
|
|
390
|
+
SkyVerticalTabMediaQueryService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: SkyVerticalTabMediaQueryService });
|
|
391
|
+
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: SkyVerticalTabMediaQueryService, decorators: [{
|
|
392
392
|
type: i0.Injectable
|
|
393
393
|
}], ctorParameters: function () { return []; } });
|
|
394
394
|
|
|
@@ -432,9 +432,9 @@
|
|
|
432
432
|
};
|
|
433
433
|
return SkyVerticalTabsetAdapterService;
|
|
434
434
|
}());
|
|
435
|
-
SkyVerticalTabsetAdapterService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.
|
|
436
|
-
SkyVerticalTabsetAdapterService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.
|
|
437
|
-
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.
|
|
435
|
+
SkyVerticalTabsetAdapterService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: SkyVerticalTabsetAdapterService, deps: [{ token: i0__namespace.RendererFactory2 }], target: i0__namespace.ɵɵFactoryTarget.Injectable });
|
|
436
|
+
SkyVerticalTabsetAdapterService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: SkyVerticalTabsetAdapterService });
|
|
437
|
+
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: SkyVerticalTabsetAdapterService, decorators: [{
|
|
438
438
|
type: i0.Injectable
|
|
439
439
|
}], ctorParameters: function () { return [{ type: i0__namespace.RendererFactory2 }]; } });
|
|
440
440
|
|
|
@@ -535,8 +535,7 @@
|
|
|
535
535
|
var _this = this;
|
|
536
536
|
this.isMobile = this.tabsetService.isMobile();
|
|
537
537
|
this.changeRef.markForCheck();
|
|
538
|
-
this.tabsetService.switchingMobile
|
|
539
|
-
.subscribe(function (mobile) {
|
|
538
|
+
this.tabsetService.switchingMobile.subscribe(function (mobile) {
|
|
540
539
|
_this.isMobile = mobile;
|
|
541
540
|
_this.changeRef.markForCheck();
|
|
542
541
|
});
|
|
@@ -586,22 +585,28 @@
|
|
|
586
585
|
};
|
|
587
586
|
return SkyVerticalTabComponent;
|
|
588
587
|
}());
|
|
589
|
-
SkyVerticalTabComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.
|
|
590
|
-
SkyVerticalTabComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.
|
|
588
|
+
SkyVerticalTabComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: SkyVerticalTabComponent, deps: [{ token: SkyVerticalTabsetAdapterService }, { token: i0__namespace.ChangeDetectorRef }, { token: SkyVerticalTabsetService }, { token: SkyVerticalTabMediaQueryService }], target: i0__namespace.ɵɵFactoryTarget.Component });
|
|
589
|
+
SkyVerticalTabComponent.ɵcmp = i0__namespace.ɵɵ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: [
|
|
591
590
|
SkyVerticalTabMediaQueryService,
|
|
592
|
-
{
|
|
593
|
-
|
|
594
|
-
|
|
591
|
+
{
|
|
592
|
+
provide: i1.SkyMediaQueryService,
|
|
593
|
+
useExisting: SkyVerticalTabMediaQueryService,
|
|
594
|
+
},
|
|
595
|
+
], viewQueries: [{ propertyName: "tabContent", first: true, predicate: ["tabContentWrapper"], descendants: true }], ngImport: i0__namespace, 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__namespace.λ10, selector: "sky-status-indicator", inputs: ["indicatorType", "descriptionType", "customDescription"] }, { type: i4__namespace.λ4, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }], directives: [{ type: i2__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
|
|
596
|
+
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: SkyVerticalTabComponent, decorators: [{
|
|
595
597
|
type: i0.Component,
|
|
596
598
|
args: [{
|
|
597
599
|
selector: 'sky-vertical-tab',
|
|
598
|
-
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 <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 ({{ tabHeaderCount }})\n </span>\n </div>\n <sky-status-indicator
|
|
600
|
+
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",
|
|
599
601
|
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"],
|
|
600
602
|
providers: [
|
|
601
603
|
SkyVerticalTabMediaQueryService,
|
|
602
|
-
{
|
|
604
|
+
{
|
|
605
|
+
provide: i1.SkyMediaQueryService,
|
|
606
|
+
useExisting: SkyVerticalTabMediaQueryService,
|
|
607
|
+
},
|
|
603
608
|
],
|
|
604
|
-
changeDetection: i0.ChangeDetectionStrategy.OnPush
|
|
609
|
+
changeDetection: i0.ChangeDetectionStrategy.OnPush,
|
|
605
610
|
}]
|
|
606
611
|
}], ctorParameters: function () { return [{ type: SkyVerticalTabsetAdapterService }, { type: i0__namespace.ChangeDetectorRef }, { type: SkyVerticalTabsetService }, { type: SkyVerticalTabMediaQueryService }]; }, propDecorators: { active: [{
|
|
607
612
|
type: i0.Input
|
|
@@ -660,9 +665,9 @@
|
|
|
660
665
|
};
|
|
661
666
|
return SkySectionedFormService;
|
|
662
667
|
}());
|
|
663
|
-
SkySectionedFormService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.
|
|
664
|
-
SkySectionedFormService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.
|
|
665
|
-
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.
|
|
668
|
+
SkySectionedFormService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: SkySectionedFormService, deps: [], target: i0__namespace.ɵɵFactoryTarget.Injectable });
|
|
669
|
+
SkySectionedFormService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: SkySectionedFormService });
|
|
670
|
+
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: SkySectionedFormService, decorators: [{
|
|
666
671
|
type: i0.Injectable
|
|
667
672
|
}] });
|
|
668
673
|
|
|
@@ -698,17 +703,16 @@
|
|
|
698
703
|
var _this = this;
|
|
699
704
|
this.isMobile = this.tabsetService.isMobile();
|
|
700
705
|
this.changeRef.detectChanges();
|
|
701
|
-
this.tabsetService.switchingMobile
|
|
702
|
-
.subscribe(function (mobile) {
|
|
706
|
+
this.tabsetService.switchingMobile.subscribe(function (mobile) {
|
|
703
707
|
_this.isMobile = mobile;
|
|
704
708
|
_this.changeRef.detectChanges();
|
|
705
709
|
});
|
|
706
710
|
this.sectionedFormService.requiredChange
|
|
707
711
|
.pipe(operators.takeUntil(this._ngUnsubscribe))
|
|
708
|
-
.subscribe(function (required) { return _this.fieldRequired = required; });
|
|
712
|
+
.subscribe(function (required) { return (_this.fieldRequired = required); });
|
|
709
713
|
this.sectionedFormService.invalidChange
|
|
710
714
|
.pipe(operators.takeUntil(this._ngUnsubscribe))
|
|
711
|
-
.subscribe(function (invalid) { return _this.fieldInvalid = invalid; });
|
|
715
|
+
.subscribe(function (invalid) { return (_this.fieldInvalid = invalid); });
|
|
712
716
|
};
|
|
713
717
|
SkySectionedFormSectionComponent.prototype.ngOnDestroy = function () {
|
|
714
718
|
this._ngUnsubscribe.next();
|
|
@@ -716,15 +720,15 @@
|
|
|
716
720
|
};
|
|
717
721
|
return SkySectionedFormSectionComponent;
|
|
718
722
|
}());
|
|
719
|
-
SkySectionedFormSectionComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.
|
|
720
|
-
SkySectionedFormSectionComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.
|
|
721
|
-
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.
|
|
723
|
+
SkySectionedFormSectionComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: SkySectionedFormSectionComponent, deps: [{ token: SkySectionedFormService }, { token: SkyVerticalTabsetService }, { token: i0__namespace.ChangeDetectorRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
|
|
724
|
+
SkySectionedFormSectionComponent.ɵcmp = i0__namespace.ɵɵ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__namespace, 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__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
|
|
725
|
+
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: SkySectionedFormSectionComponent, decorators: [{
|
|
722
726
|
type: i0.Component,
|
|
723
727
|
args: [{
|
|
724
728
|
selector: 'sky-sectioned-form-section',
|
|
725
|
-
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 <div\n [attr.aria-labelledby]=\"ariaLabelledby\"\n [attr.role]=\"ariaRole\"\n [id]=\"sectionContentId\"\n #tabContent>\n <ng-content></ng-content>\n </div>\n</sky-vertical-tab>\n",
|
|
729
|
+
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",
|
|
726
730
|
providers: [SkySectionedFormService],
|
|
727
|
-
styles: [":host .sky-tab-field-required ::ng-deep .sky-vertical-tab-heading:after{content:\"*\";color:#ef4044;padding-left:5px}\n"]
|
|
731
|
+
styles: [":host .sky-tab-field-required ::ng-deep .sky-vertical-tab-heading:after{content:\"*\";color:#ef4044;padding-left:5px}\n"],
|
|
728
732
|
}]
|
|
729
733
|
}], ctorParameters: function () { return [{ type: SkySectionedFormService }, { type: SkyVerticalTabsetService }, { type: i0__namespace.ChangeDetectorRef }]; }, propDecorators: { heading: [{
|
|
730
734
|
type: i0.Input
|
|
@@ -744,7 +748,14 @@
|
|
|
744
748
|
* To update this file, simply rerun the command.
|
|
745
749
|
*/
|
|
746
750
|
var RESOURCES = {
|
|
747
|
-
'EN-US': {
|
|
751
|
+
'EN-US': {
|
|
752
|
+
skyux_tab_add: { message: 'Add tab' },
|
|
753
|
+
skyux_tab_close: { message: 'Close {0} tab' },
|
|
754
|
+
skyux_tabs_navigator_next: { message: 'Next' },
|
|
755
|
+
skyux_tabs_navigator_previous: { message: 'Previous' },
|
|
756
|
+
skyux_tab_open: { message: 'Open tab' },
|
|
757
|
+
skyux_vertical_tabs_show_tabs_text: { message: 'Tab list' },
|
|
758
|
+
},
|
|
748
759
|
};
|
|
749
760
|
var SkyTabsResourcesProvider = /** @class */ (function () {
|
|
750
761
|
function SkyTabsResourcesProvider() {
|
|
@@ -762,22 +773,26 @@
|
|
|
762
773
|
}
|
|
763
774
|
return SkyTabsResourcesModule;
|
|
764
775
|
}());
|
|
765
|
-
SkyTabsResourcesModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.
|
|
766
|
-
SkyTabsResourcesModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.
|
|
767
|
-
SkyTabsResourcesModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.
|
|
776
|
+
SkyTabsResourcesModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: SkyTabsResourcesModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
|
|
777
|
+
SkyTabsResourcesModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: SkyTabsResourcesModule, exports: [i3.SkyI18nModule] });
|
|
778
|
+
SkyTabsResourcesModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: SkyTabsResourcesModule, providers: [
|
|
779
|
+
{
|
|
768
780
|
provide: i3.SKY_LIB_RESOURCES_PROVIDERS,
|
|
769
781
|
useClass: SkyTabsResourcesProvider,
|
|
770
|
-
multi: true
|
|
771
|
-
}
|
|
772
|
-
|
|
782
|
+
multi: true,
|
|
783
|
+
},
|
|
784
|
+
], imports: [i3.SkyI18nModule] });
|
|
785
|
+
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: SkyTabsResourcesModule, decorators: [{
|
|
773
786
|
type: i0.NgModule,
|
|
774
787
|
args: [{
|
|
775
788
|
exports: [i3.SkyI18nModule],
|
|
776
|
-
providers: [
|
|
789
|
+
providers: [
|
|
790
|
+
{
|
|
777
791
|
provide: i3.SKY_LIB_RESOURCES_PROVIDERS,
|
|
778
792
|
useClass: SkyTabsResourcesProvider,
|
|
779
|
-
multi: true
|
|
780
|
-
}
|
|
793
|
+
multi: true,
|
|
794
|
+
},
|
|
795
|
+
],
|
|
781
796
|
}]
|
|
782
797
|
}] });
|
|
783
798
|
|
|
@@ -846,7 +861,8 @@
|
|
|
846
861
|
this.changeRef.markForCheck();
|
|
847
862
|
}
|
|
848
863
|
if (!this.showTabsText) {
|
|
849
|
-
this.resources
|
|
864
|
+
this.resources
|
|
865
|
+
.getString('skyux_vertical_tabs_show_tabs_text')
|
|
850
866
|
.pipe(operators.take(1))
|
|
851
867
|
.subscribe(function (resource) {
|
|
852
868
|
/* sanity check */
|
|
@@ -867,47 +883,43 @@
|
|
|
867
883
|
};
|
|
868
884
|
return SkyVerticalTabsetComponent;
|
|
869
885
|
}());
|
|
870
|
-
SkyVerticalTabsetComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.
|
|
871
|
-
SkyVerticalTabsetComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.
|
|
872
|
-
SkyVerticalTabsetService
|
|
873
|
-
], 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__namespace, 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__namespace.λ4, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }], directives: [{ type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], animations: [
|
|
886
|
+
SkyVerticalTabsetComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: SkyVerticalTabsetComponent, deps: [{ token: SkyVerticalTabsetAdapterService }, { token: SkyVerticalTabsetService }, { token: i3__namespace.SkyLibResourcesService }, { token: i0__namespace.ChangeDetectorRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
|
|
887
|
+
SkyVerticalTabsetComponent.ɵcmp = i0__namespace.ɵɵ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__namespace, 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__namespace.λ4, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }], directives: [{ type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], animations: [
|
|
874
888
|
animations.trigger('tabGroupEnter', [
|
|
875
889
|
animations.transition(HIDDEN_STATE + " => " + VISIBLE_STATE, [
|
|
876
890
|
animations.style({ transform: 'translate(-100%)' }),
|
|
877
|
-
animations.animate('150ms ease-in')
|
|
878
|
-
])
|
|
891
|
+
animations.animate('150ms ease-in'),
|
|
892
|
+
]),
|
|
879
893
|
]),
|
|
880
894
|
animations.trigger('contentEnter', [
|
|
881
895
|
animations.transition(HIDDEN_STATE + " => " + VISIBLE_STATE, [
|
|
882
896
|
animations.style({ transform: 'translate(100%)' }),
|
|
883
|
-
animations.animate('150ms ease-in')
|
|
884
|
-
])
|
|
885
|
-
])
|
|
897
|
+
animations.animate('150ms ease-in'),
|
|
898
|
+
]),
|
|
899
|
+
]),
|
|
886
900
|
], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
|
|
887
|
-
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.
|
|
901
|
+
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: SkyVerticalTabsetComponent, decorators: [{
|
|
888
902
|
type: i0.Component,
|
|
889
903
|
args: [{
|
|
890
904
|
selector: 'sky-vertical-tabset',
|
|
891
|
-
template: "
|
|
905
|
+
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",
|
|
892
906
|
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"],
|
|
893
|
-
providers: [
|
|
894
|
-
SkyVerticalTabsetService
|
|
895
|
-
],
|
|
907
|
+
providers: [SkyVerticalTabsetService],
|
|
896
908
|
changeDetection: i0.ChangeDetectionStrategy.OnPush,
|
|
897
909
|
animations: [
|
|
898
910
|
animations.trigger('tabGroupEnter', [
|
|
899
911
|
animations.transition(HIDDEN_STATE + " => " + VISIBLE_STATE, [
|
|
900
912
|
animations.style({ transform: 'translate(-100%)' }),
|
|
901
|
-
animations.animate('150ms ease-in')
|
|
902
|
-
])
|
|
913
|
+
animations.animate('150ms ease-in'),
|
|
914
|
+
]),
|
|
903
915
|
]),
|
|
904
916
|
animations.trigger('contentEnter', [
|
|
905
917
|
animations.transition(HIDDEN_STATE + " => " + VISIBLE_STATE, [
|
|
906
918
|
animations.style({ transform: 'translate(100%)' }),
|
|
907
|
-
animations.animate('150ms ease-in')
|
|
908
|
-
])
|
|
909
|
-
])
|
|
910
|
-
]
|
|
919
|
+
animations.animate('150ms ease-in'),
|
|
920
|
+
]),
|
|
921
|
+
]),
|
|
922
|
+
],
|
|
911
923
|
}]
|
|
912
924
|
}], ctorParameters: function () { return [{ type: SkyVerticalTabsetAdapterService }, { type: SkyVerticalTabsetService }, { type: i3__namespace.SkyLibResourcesService }, { type: i0__namespace.ChangeDetectorRef }]; }, propDecorators: { showTabsText: [{
|
|
913
925
|
type: i0.Input
|
|
@@ -986,40 +998,40 @@
|
|
|
986
998
|
this.changeRef.markForCheck();
|
|
987
999
|
};
|
|
988
1000
|
SkyVerticalTabsetGroupComponent.prototype.subMenuOpen = function () {
|
|
989
|
-
return this.tabs &&
|
|
1001
|
+
return this.tabs && this.tabs.find(function (t) { return t.active; }) !== undefined;
|
|
990
1002
|
};
|
|
991
1003
|
return SkyVerticalTabsetGroupComponent;
|
|
992
1004
|
}());
|
|
993
|
-
SkyVerticalTabsetGroupComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.
|
|
994
|
-
SkyVerticalTabsetGroupComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.
|
|
1005
|
+
SkyVerticalTabsetGroupComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: SkyVerticalTabsetGroupComponent, deps: [{ token: SkyVerticalTabsetService }, { token: i0__namespace.ChangeDetectorRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
|
|
1006
|
+
SkyVerticalTabsetGroupComponent.ɵcmp = i0__namespace.ɵɵ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__namespace, 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__namespace.λ2, selector: "sky-chevron", inputs: ["direction", "disabled"], outputs: ["directionChange"] }, { type: i4__namespace.λ4, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }], directives: [{ type: i2__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i4__namespace$1.λ3, selector: "[skyThemeIf]", inputs: ["skyThemeIf"] }, { type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], animations: [
|
|
995
1007
|
animations.trigger('tabSlide', [
|
|
996
1008
|
animations.transition(':enter', [
|
|
997
1009
|
animations.style({
|
|
998
1010
|
height: '0',
|
|
999
|
-
visibility: 'hidden'
|
|
1011
|
+
visibility: 'hidden',
|
|
1000
1012
|
}),
|
|
1001
1013
|
animations.animate('150ms ease-in', animations.style({
|
|
1002
1014
|
height: '*',
|
|
1003
|
-
visibility: 'visible'
|
|
1004
|
-
}))
|
|
1015
|
+
visibility: 'visible',
|
|
1016
|
+
})),
|
|
1005
1017
|
]),
|
|
1006
1018
|
animations.transition(':leave', [
|
|
1007
1019
|
animations.style({
|
|
1008
1020
|
height: '*',
|
|
1009
|
-
visibility: 'visible'
|
|
1021
|
+
visibility: 'visible',
|
|
1010
1022
|
}),
|
|
1011
1023
|
animations.animate('150ms ease-in', animations.style({
|
|
1012
1024
|
height: '0',
|
|
1013
|
-
visibility: 'hidden'
|
|
1014
|
-
}))
|
|
1015
|
-
])
|
|
1016
|
-
])
|
|
1025
|
+
visibility: 'hidden',
|
|
1026
|
+
})),
|
|
1027
|
+
]),
|
|
1028
|
+
]),
|
|
1017
1029
|
], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
|
|
1018
|
-
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.
|
|
1030
|
+
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: SkyVerticalTabsetGroupComponent, decorators: [{
|
|
1019
1031
|
type: i0.Component,
|
|
1020
1032
|
args: [{
|
|
1021
1033
|
selector: 'sky-vertical-tabset-group',
|
|
1022
|
-
template: "<div class=\"sky-vertical-tabset-group\">\n
|
|
1034
|
+
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",
|
|
1023
1035
|
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"],
|
|
1024
1036
|
changeDetection: i0.ChangeDetectionStrategy.OnPush,
|
|
1025
1037
|
animations: [
|
|
@@ -1027,25 +1039,25 @@
|
|
|
1027
1039
|
animations.transition(':enter', [
|
|
1028
1040
|
animations.style({
|
|
1029
1041
|
height: '0',
|
|
1030
|
-
visibility: 'hidden'
|
|
1042
|
+
visibility: 'hidden',
|
|
1031
1043
|
}),
|
|
1032
1044
|
animations.animate('150ms ease-in', animations.style({
|
|
1033
1045
|
height: '*',
|
|
1034
|
-
visibility: 'visible'
|
|
1035
|
-
}))
|
|
1046
|
+
visibility: 'visible',
|
|
1047
|
+
})),
|
|
1036
1048
|
]),
|
|
1037
1049
|
animations.transition(':leave', [
|
|
1038
1050
|
animations.style({
|
|
1039
1051
|
height: '*',
|
|
1040
|
-
visibility: 'visible'
|
|
1052
|
+
visibility: 'visible',
|
|
1041
1053
|
}),
|
|
1042
1054
|
animations.animate('150ms ease-in', animations.style({
|
|
1043
1055
|
height: '0',
|
|
1044
|
-
visibility: 'hidden'
|
|
1045
|
-
}))
|
|
1046
|
-
])
|
|
1047
|
-
])
|
|
1048
|
-
]
|
|
1056
|
+
visibility: 'hidden',
|
|
1057
|
+
})),
|
|
1058
|
+
]),
|
|
1059
|
+
]),
|
|
1060
|
+
],
|
|
1049
1061
|
}]
|
|
1050
1062
|
}], ctorParameters: function () { return [{ type: SkyVerticalTabsetService }, { type: i0__namespace.ChangeDetectorRef }]; }, propDecorators: { disabled: [{
|
|
1051
1063
|
type: i0.Input
|
|
@@ -1063,8 +1075,8 @@
|
|
|
1063
1075
|
}
|
|
1064
1076
|
return SkyVerticalTabsetModule;
|
|
1065
1077
|
}());
|
|
1066
|
-
SkyVerticalTabsetModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.
|
|
1067
|
-
SkyVerticalTabsetModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.
|
|
1078
|
+
SkyVerticalTabsetModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: SkyVerticalTabsetModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
|
|
1079
|
+
SkyVerticalTabsetModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: SkyVerticalTabsetModule, declarations: [SkyVerticalTabsetComponent,
|
|
1068
1080
|
SkyVerticalTabsetGroupComponent,
|
|
1069
1081
|
SkyVerticalTabComponent], imports: [i2.CommonModule,
|
|
1070
1082
|
i4.SkyChevronModule,
|
|
@@ -1074,23 +1086,21 @@
|
|
|
1074
1086
|
i4$1.SkyThemeModule], exports: [SkyVerticalTabsetComponent,
|
|
1075
1087
|
SkyVerticalTabsetGroupComponent,
|
|
1076
1088
|
SkyVerticalTabComponent] });
|
|
1077
|
-
SkyVerticalTabsetModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.
|
|
1078
|
-
SkyVerticalTabsetAdapterService
|
|
1079
|
-
], imports: [[
|
|
1089
|
+
SkyVerticalTabsetModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: SkyVerticalTabsetModule, providers: [SkyVerticalTabsetAdapterService], imports: [[
|
|
1080
1090
|
i2.CommonModule,
|
|
1081
1091
|
i4.SkyChevronModule,
|
|
1082
1092
|
i4.SkyIconModule,
|
|
1083
1093
|
i4.SkyStatusIndicatorModule,
|
|
1084
1094
|
SkyTabsResourcesModule,
|
|
1085
|
-
i4$1.SkyThemeModule
|
|
1095
|
+
i4$1.SkyThemeModule,
|
|
1086
1096
|
]] });
|
|
1087
|
-
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.
|
|
1097
|
+
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: SkyVerticalTabsetModule, decorators: [{
|
|
1088
1098
|
type: i0.NgModule,
|
|
1089
1099
|
args: [{
|
|
1090
1100
|
declarations: [
|
|
1091
1101
|
SkyVerticalTabsetComponent,
|
|
1092
1102
|
SkyVerticalTabsetGroupComponent,
|
|
1093
|
-
SkyVerticalTabComponent
|
|
1103
|
+
SkyVerticalTabComponent,
|
|
1094
1104
|
],
|
|
1095
1105
|
imports: [
|
|
1096
1106
|
i2.CommonModule,
|
|
@@ -1098,16 +1108,14 @@
|
|
|
1098
1108
|
i4.SkyIconModule,
|
|
1099
1109
|
i4.SkyStatusIndicatorModule,
|
|
1100
1110
|
SkyTabsResourcesModule,
|
|
1101
|
-
i4$1.SkyThemeModule
|
|
1102
|
-
],
|
|
1103
|
-
providers: [
|
|
1104
|
-
SkyVerticalTabsetAdapterService
|
|
1111
|
+
i4$1.SkyThemeModule,
|
|
1105
1112
|
],
|
|
1113
|
+
providers: [SkyVerticalTabsetAdapterService],
|
|
1106
1114
|
exports: [
|
|
1107
1115
|
SkyVerticalTabsetComponent,
|
|
1108
1116
|
SkyVerticalTabsetGroupComponent,
|
|
1109
|
-
SkyVerticalTabComponent
|
|
1110
|
-
]
|
|
1117
|
+
SkyVerticalTabComponent,
|
|
1118
|
+
],
|
|
1111
1119
|
}]
|
|
1112
1120
|
}] });
|
|
1113
1121
|
|
|
@@ -1116,36 +1124,28 @@
|
|
|
1116
1124
|
}
|
|
1117
1125
|
return SkySectionedFormModule;
|
|
1118
1126
|
}());
|
|
1119
|
-
SkySectionedFormModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.
|
|
1120
|
-
SkySectionedFormModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.
|
|
1121
|
-
SkySectionedFormSectionComponent], imports: [i2.CommonModule,
|
|
1127
|
+
SkySectionedFormModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: SkySectionedFormModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
|
|
1128
|
+
SkySectionedFormModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: SkySectionedFormModule, declarations: [SkySectionedFormComponent, SkySectionedFormSectionComponent], imports: [i2.CommonModule,
|
|
1122
1129
|
forms.SkyCheckboxModule,
|
|
1123
1130
|
i4$1.SkyThemeModule,
|
|
1124
|
-
SkyVerticalTabsetModule], exports: [SkySectionedFormComponent,
|
|
1125
|
-
|
|
1126
|
-
SkySectionedFormModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: SkySectionedFormModule, imports: [[
|
|
1131
|
+
SkyVerticalTabsetModule], exports: [SkySectionedFormComponent, SkySectionedFormSectionComponent] });
|
|
1132
|
+
SkySectionedFormModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: SkySectionedFormModule, imports: [[
|
|
1127
1133
|
i2.CommonModule,
|
|
1128
1134
|
forms.SkyCheckboxModule,
|
|
1129
1135
|
i4$1.SkyThemeModule,
|
|
1130
|
-
SkyVerticalTabsetModule
|
|
1136
|
+
SkyVerticalTabsetModule,
|
|
1131
1137
|
]] });
|
|
1132
|
-
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.
|
|
1138
|
+
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: SkySectionedFormModule, decorators: [{
|
|
1133
1139
|
type: i0.NgModule,
|
|
1134
1140
|
args: [{
|
|
1135
|
-
declarations: [
|
|
1136
|
-
SkySectionedFormComponent,
|
|
1137
|
-
SkySectionedFormSectionComponent
|
|
1138
|
-
],
|
|
1141
|
+
declarations: [SkySectionedFormComponent, SkySectionedFormSectionComponent],
|
|
1139
1142
|
imports: [
|
|
1140
1143
|
i2.CommonModule,
|
|
1141
1144
|
forms.SkyCheckboxModule,
|
|
1142
1145
|
i4$1.SkyThemeModule,
|
|
1143
|
-
SkyVerticalTabsetModule
|
|
1146
|
+
SkyVerticalTabsetModule,
|
|
1144
1147
|
],
|
|
1145
|
-
exports: [
|
|
1146
|
-
SkySectionedFormComponent,
|
|
1147
|
-
SkySectionedFormSectionComponent
|
|
1148
|
-
]
|
|
1148
|
+
exports: [SkySectionedFormComponent, SkySectionedFormSectionComponent],
|
|
1149
1149
|
}]
|
|
1150
1150
|
}] });
|
|
1151
1151
|
|
|
@@ -1175,16 +1175,16 @@
|
|
|
1175
1175
|
};
|
|
1176
1176
|
return SkyTabButtonComponent;
|
|
1177
1177
|
}());
|
|
1178
|
-
SkyTabButtonComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.
|
|
1179
|
-
SkyTabButtonComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.
|
|
1180
|
-
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.
|
|
1178
|
+
SkyTabButtonComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: SkyTabButtonComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
|
|
1179
|
+
SkyTabButtonComponent.ɵcmp = i0__namespace.ɵɵ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__namespace, 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__namespace.λ4, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }], directives: [{ type: i2__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "skyLibResources": i3__namespace.SkyLibResourcesPipe }, changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush, encapsulation: i0__namespace.ViewEncapsulation.None });
|
|
1180
|
+
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: SkyTabButtonComponent, decorators: [{
|
|
1181
1181
|
type: i0.Component,
|
|
1182
1182
|
args: [{
|
|
1183
1183
|
selector: 'sky-tab-button',
|
|
1184
|
-
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
|
|
1184
|
+
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",
|
|
1185
1185
|
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"],
|
|
1186
1186
|
changeDetection: i0.ChangeDetectionStrategy.OnPush,
|
|
1187
|
-
encapsulation: i0.ViewEncapsulation.None
|
|
1187
|
+
encapsulation: i0.ViewEncapsulation.None,
|
|
1188
1188
|
}]
|
|
1189
1189
|
}], propDecorators: { active: [{
|
|
1190
1190
|
type: i0.Input
|
|
@@ -1257,11 +1257,13 @@
|
|
|
1257
1257
|
}
|
|
1258
1258
|
// Update the URL without triggering a navigation state change.
|
|
1259
1259
|
// See: https://stackoverflow.com/a/46486677
|
|
1260
|
-
var url = this.router
|
|
1260
|
+
var url = this.router
|
|
1261
|
+
.createUrlTree(['.'], {
|
|
1261
1262
|
relativeTo: this.activatedRoute,
|
|
1262
1263
|
queryParams: params,
|
|
1263
|
-
queryParamsHandling: 'merge'
|
|
1264
|
-
})
|
|
1264
|
+
queryParamsHandling: 'merge',
|
|
1265
|
+
})
|
|
1266
|
+
.toString();
|
|
1265
1267
|
// Abort redirect if the current URL is equal to the new URL.
|
|
1266
1268
|
if (this.location.isCurrentPathEqualTo(url)) {
|
|
1267
1269
|
return;
|
|
@@ -1287,7 +1289,9 @@
|
|
|
1287
1289
|
var params = this.getParams();
|
|
1288
1290
|
params[name] = value;
|
|
1289
1291
|
var baseUrl = this.location.path().split('?')[0];
|
|
1290
|
-
var paramString = Object.keys(params)
|
|
1292
|
+
var paramString = Object.keys(params)
|
|
1293
|
+
.map(function (k) { return k + "=" + params[k]; })
|
|
1294
|
+
.join('&');
|
|
1291
1295
|
return this.location.prepareExternalUrl(baseUrl + "?" + paramString);
|
|
1292
1296
|
};
|
|
1293
1297
|
/**
|
|
@@ -1297,7 +1301,8 @@
|
|
|
1297
1301
|
if (!value) {
|
|
1298
1302
|
return '';
|
|
1299
1303
|
}
|
|
1300
|
-
var sanitized = value
|
|
1304
|
+
var sanitized = value
|
|
1305
|
+
.toLowerCase()
|
|
1301
1306
|
// Remove special characters.
|
|
1302
1307
|
.replace(/[\_\~\`\@\!\#\$\%\^\&\*\(\)\[\]\{\}\;\:\'\/\\\<\>\,\.\?\=\+\|"]/g, '')
|
|
1303
1308
|
// Replace space characters with a dash.
|
|
@@ -1324,9 +1329,9 @@
|
|
|
1324
1329
|
};
|
|
1325
1330
|
return SkyTabsetPermalinkService;
|
|
1326
1331
|
}());
|
|
1327
|
-
SkyTabsetPermalinkService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.
|
|
1328
|
-
SkyTabsetPermalinkService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.
|
|
1329
|
-
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.
|
|
1332
|
+
SkyTabsetPermalinkService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: SkyTabsetPermalinkService, deps: [{ token: i1__namespace$1.ActivatedRoute }, { token: i2__namespace.Location }, { token: i1__namespace$1.Router }], target: i0__namespace.ɵɵFactoryTarget.Injectable });
|
|
1333
|
+
SkyTabsetPermalinkService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: SkyTabsetPermalinkService });
|
|
1334
|
+
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: SkyTabsetPermalinkService, decorators: [{
|
|
1330
1335
|
type: i0.Injectable
|
|
1331
1336
|
}], ctorParameters: function () { return [{ type: i1__namespace$1.ActivatedRoute }, { type: i2__namespace.Location }, { type: i1__namespace$1.Router }]; } });
|
|
1332
1337
|
|
|
@@ -1360,7 +1365,7 @@
|
|
|
1360
1365
|
*/
|
|
1361
1366
|
SkyTabsetService.prototype.setActiveTabIndex = function (value, config) {
|
|
1362
1367
|
if (config === void 0) { config = {
|
|
1363
|
-
emitChange: true
|
|
1368
|
+
emitChange: true,
|
|
1364
1369
|
}; }
|
|
1365
1370
|
if (value !== undefined &&
|
|
1366
1371
|
!this.tabIndexesEqual(value, this.currentActiveTabIndex)) {
|
|
@@ -1396,7 +1401,7 @@
|
|
|
1396
1401
|
// Notify the tabset component when an active tab is unregistered.
|
|
1397
1402
|
if (this.isTabIndexActive(this.tabs[index].tabIndex)) {
|
|
1398
1403
|
this._activeTabUnregistered.next({
|
|
1399
|
-
arrayIndex: index
|
|
1404
|
+
arrayIndex: index,
|
|
1400
1405
|
});
|
|
1401
1406
|
}
|
|
1402
1407
|
this.tabs.splice(index, 1);
|
|
@@ -1411,8 +1416,7 @@
|
|
|
1411
1416
|
* Compares two tab indexes and returns `true` if they are equal.
|
|
1412
1417
|
*/
|
|
1413
1418
|
SkyTabsetService.prototype.tabIndexesEqual = function (tabIndex1, tabIndex2) {
|
|
1414
|
-
return
|
|
1415
|
-
+tabIndex1 === +tabIndex2);
|
|
1419
|
+
return tabIndex1 === tabIndex2 || +tabIndex1 === +tabIndex2;
|
|
1416
1420
|
};
|
|
1417
1421
|
/**
|
|
1418
1422
|
* Verifies if a provided tab index is registered.
|
|
@@ -1445,9 +1449,9 @@
|
|
|
1445
1449
|
};
|
|
1446
1450
|
return SkyTabsetService;
|
|
1447
1451
|
}());
|
|
1448
|
-
SkyTabsetService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.
|
|
1449
|
-
SkyTabsetService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.
|
|
1450
|
-
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.
|
|
1452
|
+
SkyTabsetService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: SkyTabsetService, deps: [], target: i0__namespace.ɵɵFactoryTarget.Injectable });
|
|
1453
|
+
SkyTabsetService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: SkyTabsetService });
|
|
1454
|
+
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: SkyTabsetService, decorators: [{
|
|
1451
1455
|
type: i0.Injectable
|
|
1452
1456
|
}] });
|
|
1453
1457
|
|
|
@@ -1461,7 +1465,7 @@
|
|
|
1461
1465
|
* Fires when users click the button to close the tab.
|
|
1462
1466
|
* The close button is added to the tab when you specify a listener for this event.
|
|
1463
1467
|
*/
|
|
1464
|
-
this.close = new i0.EventEmitter();
|
|
1468
|
+
this.close = new i0.EventEmitter(); // eslint-disable-line @angular-eslint/no-output-native
|
|
1465
1469
|
this.showContent = false;
|
|
1466
1470
|
this._activeChange = new rxjs.BehaviorSubject(undefined);
|
|
1467
1471
|
this._stateChange = new rxjs.BehaviorSubject(undefined);
|
|
@@ -1480,8 +1484,7 @@
|
|
|
1480
1484
|
* @default false
|
|
1481
1485
|
*/
|
|
1482
1486
|
set: function (value) {
|
|
1483
|
-
if (value !== undefined &&
|
|
1484
|
-
value !== this._active) {
|
|
1487
|
+
if (value !== undefined && value !== this._active) {
|
|
1485
1488
|
this._active = value;
|
|
1486
1489
|
this._activeChange.next();
|
|
1487
1490
|
}
|
|
@@ -1498,7 +1501,7 @@
|
|
|
1498
1501
|
});
|
|
1499
1502
|
Object.defineProperty(SkyTabComponent.prototype, "permalinkValue", {
|
|
1500
1503
|
get: function () {
|
|
1501
|
-
return this._permalinkValue || this.permalinkService.urlify(this.tabHeading);
|
|
1504
|
+
return (this._permalinkValue || this.permalinkService.urlify(this.tabHeading));
|
|
1502
1505
|
},
|
|
1503
1506
|
/**
|
|
1504
1507
|
* Specifies a custom query parameter value for the tab.
|
|
@@ -1558,10 +1561,10 @@
|
|
|
1558
1561
|
configurable: true
|
|
1559
1562
|
});
|
|
1560
1563
|
SkyTabComponent.prototype.ngOnChanges = function (changes) {
|
|
1561
|
-
if (changes.disabled && !changes.disabled.firstChange ||
|
|
1562
|
-
changes.tabHeading && !changes.tabHeading.firstChange ||
|
|
1563
|
-
changes.tabHeaderCount && !changes.tabHeaderCount.firstChange ||
|
|
1564
|
-
changes.permalinkValue && !changes.permalinkValue.firstChange) {
|
|
1564
|
+
if ((changes.disabled && !changes.disabled.firstChange) ||
|
|
1565
|
+
(changes.tabHeading && !changes.tabHeading.firstChange) ||
|
|
1566
|
+
(changes.tabHeaderCount && !changes.tabHeaderCount.firstChange) ||
|
|
1567
|
+
(changes.permalinkValue && !changes.permalinkValue.firstChange)) {
|
|
1565
1568
|
this._stateChange.next();
|
|
1566
1569
|
}
|
|
1567
1570
|
};
|
|
@@ -1584,14 +1587,14 @@
|
|
|
1584
1587
|
};
|
|
1585
1588
|
return SkyTabComponent;
|
|
1586
1589
|
}());
|
|
1587
|
-
SkyTabComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.
|
|
1588
|
-
SkyTabComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.
|
|
1589
|
-
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.
|
|
1590
|
+
SkyTabComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: SkyTabComponent, deps: [{ token: i0__namespace.ChangeDetectorRef }, { token: SkyTabsetPermalinkService }, { token: SkyTabsetService }], target: i0__namespace.ɵɵFactoryTarget.Component });
|
|
1591
|
+
SkyTabComponent.ɵcmp = i0__namespace.ɵɵ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__namespace, 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__namespace.ChangeDetectionStrategy.OnPush });
|
|
1592
|
+
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: SkyTabComponent, decorators: [{
|
|
1590
1593
|
type: i0.Component,
|
|
1591
1594
|
args: [{
|
|
1592
1595
|
selector: 'sky-tab',
|
|
1593
1596
|
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",
|
|
1594
|
-
changeDetection: i0.ChangeDetectionStrategy.OnPush
|
|
1597
|
+
changeDetection: i0.ChangeDetectionStrategy.OnPush,
|
|
1595
1598
|
}]
|
|
1596
1599
|
}], ctorParameters: function () { return [{ type: i0__namespace.ChangeDetectorRef }, { type: SkyTabsetPermalinkService }, { type: SkyTabsetService }]; }, propDecorators: { active: [{
|
|
1597
1600
|
type: i0.Input
|
|
@@ -1699,7 +1702,7 @@
|
|
|
1699
1702
|
var _this = this;
|
|
1700
1703
|
rxjs.forkJoin([
|
|
1701
1704
|
this.resourceService.getString('skyux_tabs_navigator_previous'),
|
|
1702
|
-
this.resourceService.getString('skyux_tabs_navigator_next')
|
|
1705
|
+
this.resourceService.getString('skyux_tabs_navigator_next'),
|
|
1703
1706
|
])
|
|
1704
1707
|
.pipe(operators.take(1))
|
|
1705
1708
|
.subscribe(function (resources) {
|
|
@@ -1728,13 +1731,13 @@
|
|
|
1728
1731
|
};
|
|
1729
1732
|
return SkyTabsetNavButtonComponent;
|
|
1730
1733
|
}());
|
|
1731
|
-
SkyTabsetNavButtonComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.
|
|
1732
|
-
SkyTabsetNavButtonComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.
|
|
1733
|
-
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.
|
|
1734
|
+
SkyTabsetNavButtonComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: SkyTabsetNavButtonComponent, deps: [{ token: i3__namespace.SkyLibResourcesService }, { token: i0__namespace.ChangeDetectorRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
|
|
1735
|
+
SkyTabsetNavButtonComponent.ɵcmp = i0__namespace.ɵɵ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__namespace, template: "<button\n class=\"sky-btn sky-btn-default\"\n type=\"button\"\n [disabled]=\"disabled\"\n (click)=\"buttonClick()\"\n>\n {{ buttonText }}\n</button>\n" });
|
|
1736
|
+
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: SkyTabsetNavButtonComponent, decorators: [{
|
|
1734
1737
|
type: i0.Component,
|
|
1735
1738
|
args: [{
|
|
1736
1739
|
selector: 'sky-tabset-nav-button',
|
|
1737
|
-
template: "<button\n class=\"sky-btn sky-btn-default\"\n type=\"button\"\n [disabled]=\"disabled\"\n (click)=\"buttonClick()\"\n>\n {{ buttonText }}\n</button>\n"
|
|
1740
|
+
template: "<button\n class=\"sky-btn sky-btn-default\"\n type=\"button\"\n [disabled]=\"disabled\"\n (click)=\"buttonClick()\"\n>\n {{ buttonText }}\n</button>\n",
|
|
1738
1741
|
}]
|
|
1739
1742
|
}], ctorParameters: function () { return [{ type: i3__namespace.SkyLibResourcesService }, { type: i0__namespace.ChangeDetectorRef }]; }, propDecorators: { tabset: [{
|
|
1740
1743
|
type: i0.Input
|
|
@@ -1777,7 +1780,7 @@
|
|
|
1777
1780
|
.querySelector('.sky-tabset-btns')
|
|
1778
1781
|
.getBoundingClientRect();
|
|
1779
1782
|
var tabButtonsWidth = tabButtonsRect.width + tabExtraButtonsRect.width + this.tabsOffsetLeft;
|
|
1780
|
-
var newOverflow =
|
|
1783
|
+
var newOverflow = tabButtonsWidth > tabsetRect.width;
|
|
1781
1784
|
if (this.currentOverflow !== newOverflow) {
|
|
1782
1785
|
this.currentOverflow = newOverflow;
|
|
1783
1786
|
this._overflowChange.next(this.currentOverflow);
|
|
@@ -1789,14 +1792,16 @@
|
|
|
1789
1792
|
SkyTabsetAdapterService.prototype.getTabsOffsetLeft = function (tabsetEl) {
|
|
1790
1793
|
var tabsetRect = tabsetEl.getBoundingClientRect();
|
|
1791
1794
|
// The dropdown element is the first "tab" and always exists in the DOM, even when hidden.
|
|
1792
|
-
var firstTabRect = tabsetEl
|
|
1795
|
+
var firstTabRect = tabsetEl
|
|
1796
|
+
.querySelector('.sky-tabset-dropdown')
|
|
1797
|
+
.getBoundingClientRect();
|
|
1793
1798
|
return firstTabRect.left - tabsetRect.left;
|
|
1794
1799
|
};
|
|
1795
1800
|
return SkyTabsetAdapterService;
|
|
1796
1801
|
}());
|
|
1797
|
-
SkyTabsetAdapterService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.
|
|
1798
|
-
SkyTabsetAdapterService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.
|
|
1799
|
-
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.
|
|
1802
|
+
SkyTabsetAdapterService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: SkyTabsetAdapterService, deps: [], target: i0__namespace.ɵɵFactoryTarget.Injectable });
|
|
1803
|
+
SkyTabsetAdapterService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: SkyTabsetAdapterService });
|
|
1804
|
+
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: SkyTabsetAdapterService, decorators: [{
|
|
1800
1805
|
type: i0.Injectable
|
|
1801
1806
|
}] });
|
|
1802
1807
|
|
|
@@ -1992,9 +1997,7 @@
|
|
|
1992
1997
|
};
|
|
1993
1998
|
SkyTabsetComponent.prototype.listenTabComponentsStructuralChange = function () {
|
|
1994
1999
|
var _this = this;
|
|
1995
|
-
this.tabs.changes
|
|
1996
|
-
.pipe(operators.takeUntil(this.ngUnsubscribe))
|
|
1997
|
-
.subscribe(function () {
|
|
2000
|
+
this.tabs.changes.pipe(operators.takeUntil(this.ngUnsubscribe)).subscribe(function () {
|
|
1998
2001
|
_this.resetTabComponents();
|
|
1999
2002
|
});
|
|
2000
2003
|
};
|
|
@@ -2046,7 +2049,7 @@
|
|
|
2046
2049
|
this.initTabComponents();
|
|
2047
2050
|
var activeIndex = (_a = this.getActiveTabComponent()) === null || _a === void 0 ? void 0 : _a.tabIndex;
|
|
2048
2051
|
this.tabsetService.setActiveTabIndex(activeIndex, {
|
|
2049
|
-
emitChange: false
|
|
2052
|
+
emitChange: false,
|
|
2050
2053
|
});
|
|
2051
2054
|
this.listenTabComponentsStateChange();
|
|
2052
2055
|
};
|
|
@@ -2054,8 +2057,8 @@
|
|
|
2054
2057
|
this.tabIndexesChange.emit({
|
|
2055
2058
|
tabs: this.tabs.map(function (tab) { return ({
|
|
2056
2059
|
tabHeading: tab.tabHeading,
|
|
2057
|
-
tabIndex: tab.tabIndex
|
|
2058
|
-
}); })
|
|
2060
|
+
tabIndex: tab.tabIndex,
|
|
2061
|
+
}); }),
|
|
2059
2062
|
});
|
|
2060
2063
|
};
|
|
2061
2064
|
SkyTabsetComponent.prototype.unsubscribeTabComponentsStateChange = function () {
|
|
@@ -2069,7 +2072,7 @@
|
|
|
2069
2072
|
this.adapterService.overflowChange
|
|
2070
2073
|
.pipe(operators.takeUntil(this.ngUnsubscribe))
|
|
2071
2074
|
.subscribe(function (isOverflowing) {
|
|
2072
|
-
_this.tabDisplayMode =
|
|
2075
|
+
_this.tabDisplayMode = isOverflowing ? 'dropdown' : 'tabs';
|
|
2073
2076
|
_this.changeDetector.markForCheck();
|
|
2074
2077
|
});
|
|
2075
2078
|
};
|
|
@@ -2098,7 +2101,10 @@
|
|
|
2098
2101
|
}
|
|
2099
2102
|
};
|
|
2100
2103
|
SkyTabsetComponent.prototype.getActiveTabComponent = function () {
|
|
2101
|
-
return this.tabs
|
|
2104
|
+
return this.tabs
|
|
2105
|
+
.toArray()
|
|
2106
|
+
.reverse()
|
|
2107
|
+
.find(function (tab) { return tab.active === true; });
|
|
2102
2108
|
};
|
|
2103
2109
|
SkyTabsetComponent.prototype.createTabButtons = function (activeIndex) {
|
|
2104
2110
|
var _this = this;
|
|
@@ -2108,11 +2114,13 @@
|
|
|
2108
2114
|
ariaControls: tab.tabPanelId,
|
|
2109
2115
|
disabled: tab.disabled,
|
|
2110
2116
|
/*tslint:disable-next-line:no-null-keyword*/
|
|
2111
|
-
buttonHref:
|
|
2117
|
+
buttonHref: tab.disabled
|
|
2118
|
+
? null
|
|
2119
|
+
: _this.permalinkService.getParamHref(_this.permalinkId, tab.permalinkValue),
|
|
2112
2120
|
buttonId: tab.tabButtonId,
|
|
2113
2121
|
buttonTextCount: tab.tabHeaderCount,
|
|
2114
2122
|
buttonText: tab.tabHeading,
|
|
2115
|
-
tabIndex: tab.tabIndex
|
|
2123
|
+
tabIndex: tab.tabIndex,
|
|
2116
2124
|
}); });
|
|
2117
2125
|
};
|
|
2118
2126
|
SkyTabsetComponent.prototype.updateTabButtons = function (activeIndex) {
|
|
@@ -2171,25 +2179,25 @@
|
|
|
2171
2179
|
};
|
|
2172
2180
|
return SkyTabsetComponent;
|
|
2173
2181
|
}());
|
|
2174
|
-
SkyTabsetComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.
|
|
2175
|
-
SkyTabsetComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.
|
|
2182
|
+
SkyTabsetComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: SkyTabsetComponent, deps: [{ token: i0__namespace.ChangeDetectorRef }, { token: i0__namespace.ElementRef }, { token: SkyTabsetAdapterService }, { token: SkyTabsetPermalinkService }, { token: SkyTabsetService }], target: i0__namespace.ɵɵFactoryTarget.Component });
|
|
2183
|
+
SkyTabsetComponent.ɵcmp = i0__namespace.ɵɵ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: [
|
|
2176
2184
|
SkyTabsetAdapterService,
|
|
2177
2185
|
SkyTabsetPermalinkService,
|
|
2178
|
-
SkyTabsetService
|
|
2179
|
-
], queries: [{ propertyName: "tabs", predicate: SkyTabComponent }], ngImport: i0__namespace, 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'\"
|
|
2180
|
-
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.
|
|
2186
|
+
SkyTabsetService,
|
|
2187
|
+
], queries: [{ propertyName: "tabs", predicate: SkyTabComponent }], ngImport: i0__namespace, 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__namespace$2.λ3, selector: "sky-dropdown", inputs: ["buttonStyle", "buttonType", "disabled", "dismissOnBlur", "label", "horizontalAlignment", "messageStream", "title", "trigger"] }, { type: i4__namespace$2.λ2, selector: "sky-dropdown-button" }, { type: i4__namespace$2.λ4, selector: "sky-dropdown-menu", inputs: ["ariaLabelledBy", "ariaRole", "useNativeFocus"], outputs: ["menuChanges"] }, { type: i4__namespace$2.λ1, selector: "sky-dropdown-item", inputs: ["ariaRole"] }, { type: i4__namespace.λ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__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i4__namespace$1.λ2, selector: "[skyThemeClass]", inputs: ["class", "skyThemeClass"] }], pipes: { "skyLibResources": i3__namespace.SkyLibResourcesPipe }, changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush, encapsulation: i0__namespace.ViewEncapsulation.None });
|
|
2188
|
+
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: SkyTabsetComponent, decorators: [{
|
|
2181
2189
|
type: i0.Component,
|
|
2182
2190
|
args: [{
|
|
2183
2191
|
selector: 'sky-tabset',
|
|
2184
2192
|
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"],
|
|
2185
|
-
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'\"
|
|
2193
|
+
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",
|
|
2186
2194
|
providers: [
|
|
2187
2195
|
SkyTabsetAdapterService,
|
|
2188
2196
|
SkyTabsetPermalinkService,
|
|
2189
|
-
SkyTabsetService
|
|
2197
|
+
SkyTabsetService,
|
|
2190
2198
|
],
|
|
2191
2199
|
changeDetection: i0.ChangeDetectionStrategy.OnPush,
|
|
2192
|
-
encapsulation: i0.ViewEncapsulation.None
|
|
2200
|
+
encapsulation: i0.ViewEncapsulation.None,
|
|
2193
2201
|
}]
|
|
2194
2202
|
}], ctorParameters: function () { return [{ type: i0__namespace.ChangeDetectorRef }, { type: i0__namespace.ElementRef }, { type: SkyTabsetAdapterService }, { type: SkyTabsetPermalinkService }, { type: SkyTabsetService }]; }, propDecorators: { active: [{
|
|
2195
2203
|
type: i0.Input
|
|
@@ -2219,8 +2227,8 @@
|
|
|
2219
2227
|
}
|
|
2220
2228
|
return SkyTabsModule;
|
|
2221
2229
|
}());
|
|
2222
|
-
SkyTabsModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.
|
|
2223
|
-
SkyTabsModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.
|
|
2230
|
+
SkyTabsModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: SkyTabsModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
|
|
2231
|
+
SkyTabsModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: SkyTabsModule, declarations: [SkyTabButtonComponent,
|
|
2224
2232
|
SkyTabComponent,
|
|
2225
2233
|
SkyTabsetComponent,
|
|
2226
2234
|
SkyTabsetNavButtonComponent], imports: [i2.CommonModule,
|
|
@@ -2229,26 +2237,24 @@
|
|
|
2229
2237
|
i3.SkyI18nModule,
|
|
2230
2238
|
i4.SkyIconModule,
|
|
2231
2239
|
SkyTabsResourcesModule,
|
|
2232
|
-
i4$1.SkyThemeModule], exports: [SkyTabComponent,
|
|
2233
|
-
|
|
2234
|
-
SkyTabsetNavButtonComponent] });
|
|
2235
|
-
SkyTabsModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: SkyTabsModule, imports: [[
|
|
2240
|
+
i4$1.SkyThemeModule], exports: [SkyTabComponent, SkyTabsetComponent, SkyTabsetNavButtonComponent] });
|
|
2241
|
+
SkyTabsModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: SkyTabsModule, imports: [[
|
|
2236
2242
|
i2.CommonModule,
|
|
2237
2243
|
i1$1.RouterModule,
|
|
2238
2244
|
i4$2.SkyDropdownModule,
|
|
2239
2245
|
i3.SkyI18nModule,
|
|
2240
2246
|
i4.SkyIconModule,
|
|
2241
2247
|
SkyTabsResourcesModule,
|
|
2242
|
-
i4$1.SkyThemeModule
|
|
2248
|
+
i4$1.SkyThemeModule,
|
|
2243
2249
|
]] });
|
|
2244
|
-
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.
|
|
2250
|
+
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: SkyTabsModule, decorators: [{
|
|
2245
2251
|
type: i0.NgModule,
|
|
2246
2252
|
args: [{
|
|
2247
2253
|
declarations: [
|
|
2248
2254
|
SkyTabButtonComponent,
|
|
2249
2255
|
SkyTabComponent,
|
|
2250
2256
|
SkyTabsetComponent,
|
|
2251
|
-
SkyTabsetNavButtonComponent
|
|
2257
|
+
SkyTabsetNavButtonComponent,
|
|
2252
2258
|
],
|
|
2253
2259
|
imports: [
|
|
2254
2260
|
i2.CommonModule,
|
|
@@ -2257,13 +2263,9 @@
|
|
|
2257
2263
|
i3.SkyI18nModule,
|
|
2258
2264
|
i4.SkyIconModule,
|
|
2259
2265
|
SkyTabsResourcesModule,
|
|
2260
|
-
i4$1.SkyThemeModule
|
|
2266
|
+
i4$1.SkyThemeModule,
|
|
2261
2267
|
],
|
|
2262
|
-
exports: [
|
|
2263
|
-
SkyTabComponent,
|
|
2264
|
-
SkyTabsetComponent,
|
|
2265
|
-
SkyTabsetNavButtonComponent
|
|
2266
|
-
]
|
|
2268
|
+
exports: [SkyTabComponent, SkyTabsetComponent, SkyTabsetNavButtonComponent],
|
|
2267
2269
|
}]
|
|
2268
2270
|
}] });
|
|
2269
2271
|
|