@skyux/tabs 5.0.0 → 5.0.4

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