@skyux/tabs 5.0.0 → 5.0.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/bundles/skyux-tabs-testing.umd.js +4 -4
- package/bundles/skyux-tabs.umd.js +231 -231
- package/documentation.json +178 -218
- package/esm2015/modules/sectioned-form/sectioned-form-section.component.js +9 -10
- package/esm2015/modules/sectioned-form/sectioned-form.component.js +18 -18
- package/esm2015/modules/sectioned-form/sectioned-form.module.js +10 -18
- package/esm2015/modules/sectioned-form/sectioned-form.service.js +4 -4
- package/esm2015/modules/shared/sky-tabs-resources.module.js +23 -12
- package/esm2015/modules/tabs/tab-button.component.js +6 -6
- package/esm2015/modules/tabs/tab.component.js +13 -14
- package/esm2015/modules/tabs/tabs.module.js +10 -16
- package/esm2015/modules/tabs/tabset-active-tab-unregistered-args.js +1 -1
- package/esm2015/modules/tabs/tabset-adapter.service.js +8 -6
- package/esm2015/modules/tabs/tabset-nav-button.component.js +8 -8
- package/esm2015/modules/tabs/tabset-permalink.service.js +14 -9
- package/esm2015/modules/tabs/tabset-tab-indexes-change.js +1 -1
- package/esm2015/modules/tabs/tabset.component.js +37 -34
- package/esm2015/modules/tabs/tabset.service.js +10 -11
- package/esm2015/modules/vertical-tabset/vertical-tab-media-query.service.js +9 -9
- package/esm2015/modules/vertical-tabset/vertical-tab.component.js +16 -11
- package/esm2015/modules/vertical-tabset/vertical-tabset-adapter.service.js +5 -5
- package/esm2015/modules/vertical-tabset/vertical-tabset-group.component.js +23 -23
- package/esm2015/modules/vertical-tabset/vertical-tabset.component.js +21 -24
- package/esm2015/modules/vertical-tabset/vertical-tabset.module.js +12 -16
- package/esm2015/modules/vertical-tabset/vertical-tabset.service.js +8 -8
- package/esm2015/testing/tabs/tab-fixture-tab.js +1 -1
- package/esm2015/testing/tabs/tabset-fixture.js +2 -2
- package/fesm2015/skyux-tabs-testing.js +1 -1
- package/fesm2015/skyux-tabs-testing.js.map +1 -1
- package/fesm2015/skyux-tabs.js +230 -228
- package/fesm2015/skyux-tabs.js.map +1 -1
- package/package.json +12 -12
- package/bundles/skyux-tabs-testing.umd.js.map +0 -1
- package/bundles/skyux-tabs.umd.js.map +0 -1
|
@@ -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[
|
|
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.
|
|
205
|
-
SkyVerticalTabsetService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.
|
|
206
|
-
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.
|
|
202
|
+
SkyVerticalTabsetService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: SkyVerticalTabsetService, deps: [{ token: i1__namespace.SkyMediaQueryService }], target: i0__namespace.ɵɵFactoryTarget.Injectable });
|
|
203
|
+
SkyVerticalTabsetService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: SkyVerticalTabsetService });
|
|
204
|
+
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: SkyVerticalTabsetService, decorators: [{
|
|
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.
|
|
278
|
-
SkySectionedFormComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.
|
|
275
|
+
SkySectionedFormComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: SkySectionedFormComponent, deps: [{ token: SkyVerticalTabsetService }, { token: i0__namespace.ChangeDetectorRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
|
|
276
|
+
SkySectionedFormComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.15", type: SkySectionedFormComponent, selector: "sky-sectioned-form", inputs: { maintainSectionContent: "maintainSectionContent" }, outputs: { indexChanged: "indexChanged" }, providers: [SkyVerticalTabsetService], viewQueries: [{ propertyName: "content", first: true, predicate: ["skySectionSideContent"], descendants: true }], ngImport: i0__namespace, template: "<div\n aria-orientation=\"vertical\"\n class=\"sky-sectioned-form\"\n [attr.role]=\"ariaRole\"\n (window:resize)=\"tabService.updateContent()\"\n>\n <div\n *ngIf=\"maintainSectionContent || tabsVisible()\"\n class=\"sky-sectioned-form-tabs\"\n [ngClass]=\"{ 'sky-sectioned-form-tabs-hidden': !tabsVisible() }\"\n [@tabEnter]=\"tabService.animationTabsVisibleState\"\n >\n <ng-content></ng-content>\n </div>\n <div\n *ngIf=\"maintainSectionContent || tabService.contentVisible()\"\n class=\"sky-sectioned-form-content\"\n [ngClass]=\"{\n 'sky-sectioned-form-content-hidden': !tabService.contentVisible()\n }\"\n [@contentEnter]=\"tabService.animationContentVisibleState\"\n #skySectionSideContent\n ></div>\n</div>\n", styles: [":host .sky-sectioned-form{display:block;max-height:none}:host .sky-sectioned-form-content{flex-basis:auto;overflow-y:visible}:host .sky-sectioned-form-tabs{flex-basis:auto;overflow-y:visible;border-right:1px solid #e2e3e4}:host-context(.sky-responsive-container-xs) .sky-sectioned-form,:host-context(.sky-responsive-container-sm) .sky-sectioned-form,:host-context(.sky-responsive-container-md) .sky-sectioned-form,:host-context(.sky-responsive-container-lg) .sky-sectioned-form{display:block;max-height:none}:host-context(.sky-responsive-container-xs) .sky-sectioned-form-content,:host-context(.sky-responsive-container-sm) .sky-sectioned-form-content,:host-context(.sky-responsive-container-md) .sky-sectioned-form-content,:host-context(.sky-responsive-container-lg) .sky-sectioned-form-content{flex-basis:auto;overflow-y:visible}:host-context(.sky-responsive-container-xs) .sky-sectioned-form-tabs,:host-context(.sky-responsive-container-sm) .sky-sectioned-form-tabs,:host-context(.sky-responsive-container-md) .sky-sectioned-form-tabs,:host-context(.sky-responsive-container-lg) .sky-sectioned-form-tabs{flex-basis:auto;overflow-y:visible;border-right:1px solid #e2e3e4}@media (min-width: 768px){:host .sky-sectioned-form{display:flex;max-height:100%}:host .sky-sectioned-form-content{flex-basis:70%;margin:15px;overflow-y:auto}:host .sky-sectioned-form-tabs{flex-basis:30%;overflow-y:auto}}:host-context(.sky-responsive-container-sm) .sky-sectioned-form,:host-context(.sky-responsive-container-md) .sky-sectioned-form,:host-context(.sky-responsive-container-lg) .sky-sectioned-form{display:flex;max-height:100%}:host-context(.sky-responsive-container-sm) .sky-sectioned-form-content,:host-context(.sky-responsive-container-md) .sky-sectioned-form-content,:host-context(.sky-responsive-container-lg) .sky-sectioned-form-content{flex-basis:70%;margin:15px;overflow-y:auto}:host-context(.sky-responsive-container-sm) .sky-sectioned-form-tabs,:host-context(.sky-responsive-container-md) .sky-sectioned-form-tabs,:host-context(.sky-responsive-container-lg) .sky-sectioned-form-tabs{flex-basis:30%;overflow-y:auto}.sky-sectioned-form-tabs-hidden{display:none}.sky-sectioned-form-content-hidden{display:none}:host-context(.sky-theme-modern) .sky-sectioned-form-content{margin:15px}:host-context(.sky-theme-modern) .sky-sectioned-form-tabs{border-right:1px solid #d2d2d2}@media (min-width: 768px){:host-context(.sky-theme-modern) :host .sky-sectioned-form-content{margin:20px 30px}}:host-context(.sky-theme-modern) :host-context(.sky-responsive-container-sm) .sky-sectioned-form-content,:host-context(.sky-theme-modern) :host-context(.sky-responsive-container-md) .sky-sectioned-form-content,:host-context(.sky-theme-modern) :host-context(.sky-responsive-container-lg) .sky-sectioned-form-content{margin:20px 30px}.sky-theme-modern .sky-sectioned-form-content{margin:15px}.sky-theme-modern .sky-sectioned-form-tabs{border-right:1px solid #d2d2d2}@media (min-width: 768px){.sky-theme-modern :host .sky-sectioned-form-content{margin:20px 30px}}.sky-theme-modern :host-context(.sky-responsive-container-sm) .sky-sectioned-form-content,.sky-theme-modern :host-context(.sky-responsive-container-md) .sky-sectioned-form-content,.sky-theme-modern :host-context(.sky-responsive-container-lg) .sky-sectioned-form-content{margin:20px 30px}\n"], directives: [{ type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], animations: [
|
|
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.
|
|
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
|
-
|
|
297
|
-
|
|
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
|
|
371
|
+
return width <= xsBreakpointMaxPixels;
|
|
374
372
|
}
|
|
375
373
|
case i1.SkyMediaBreakpoints.sm: {
|
|
376
|
-
return
|
|
374
|
+
return width >= smBreakpointMinPixels && width <= smBreakpointMaxPixels;
|
|
377
375
|
}
|
|
378
376
|
case i1.SkyMediaBreakpoints.md: {
|
|
379
|
-
return
|
|
377
|
+
return width >= mdBreakpointMinPixels && width <= mdBreakpointMaxPixels;
|
|
380
378
|
}
|
|
381
379
|
default: {
|
|
382
|
-
return
|
|
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.
|
|
392
|
-
SkyVerticalTabMediaQueryService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.
|
|
393
|
-
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.
|
|
389
|
+
SkyVerticalTabMediaQueryService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: SkyVerticalTabMediaQueryService, deps: [], target: i0__namespace.ɵɵFactoryTarget.Injectable });
|
|
390
|
+
SkyVerticalTabMediaQueryService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: SkyVerticalTabMediaQueryService });
|
|
391
|
+
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: SkyVerticalTabMediaQueryService, decorators: [{
|
|
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.
|
|
438
|
-
SkyVerticalTabsetAdapterService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.
|
|
439
|
-
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.
|
|
435
|
+
SkyVerticalTabsetAdapterService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: SkyVerticalTabsetAdapterService, deps: [{ token: i0__namespace.RendererFactory2 }], target: i0__namespace.ɵɵFactoryTarget.Injectable });
|
|
436
|
+
SkyVerticalTabsetAdapterService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: SkyVerticalTabsetAdapterService });
|
|
437
|
+
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: SkyVerticalTabsetAdapterService, decorators: [{
|
|
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.
|
|
592
|
-
SkyVerticalTabComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.
|
|
588
|
+
SkyVerticalTabComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: SkyVerticalTabComponent, deps: [{ token: SkyVerticalTabsetAdapterService }, { token: i0__namespace.ChangeDetectorRef }, { token: SkyVerticalTabsetService }, { token: SkyVerticalTabMediaQueryService }], target: i0__namespace.ɵɵFactoryTarget.Component });
|
|
589
|
+
SkyVerticalTabComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.15", type: SkyVerticalTabComponent, selector: "sky-vertical-tab", inputs: { active: "active", ariaControls: "ariaControls", ariaInvalid: "ariaInvalid", ariaRequired: "ariaRequired", ariaRole: "ariaRole", disabled: "disabled", errorIndicator: "errorIndicator", tabHeaderCount: "tabHeaderCount", tabHeading: "tabHeading", showTabRightArrow: "showTabRightArrow", tabId: "tabId" }, host: { listeners: { "window:resize": "onWindowResize()" } }, providers: [
|
|
593
590
|
SkyVerticalTabMediaQueryService,
|
|
594
|
-
{
|
|
595
|
-
|
|
596
|
-
|
|
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
|
-
|
|
601
|
-
|
|
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
|
-
{
|
|
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.
|
|
666
|
-
SkySectionedFormService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.
|
|
667
|
-
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.
|
|
668
|
+
SkySectionedFormService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: SkySectionedFormService, deps: [], target: i0__namespace.ɵɵFactoryTarget.Injectable });
|
|
669
|
+
SkySectionedFormService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: SkySectionedFormService });
|
|
670
|
+
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: SkySectionedFormService, decorators: [{
|
|
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.
|
|
722
|
-
SkySectionedFormSectionComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.
|
|
723
|
-
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.
|
|
723
|
+
SkySectionedFormSectionComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: SkySectionedFormSectionComponent, deps: [{ token: SkySectionedFormService }, { token: SkyVerticalTabsetService }, { token: i0__namespace.ChangeDetectorRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
|
|
724
|
+
SkySectionedFormSectionComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.15", type: SkySectionedFormSectionComponent, selector: "sky-sectioned-form-section", inputs: { heading: "heading", itemCount: "itemCount", active: "active" }, providers: [SkySectionedFormService], viewQueries: [{ propertyName: "tab", first: true, predicate: SkyVerticalTabComponent, descendants: true }], ngImport: i0__namespace, template: "<sky-vertical-tab\n [active]=\"active\"\n [ariaControls]=\"sectionContentId\"\n [ariaInvalid]=\"fieldInvalid\"\n [ariaRequired]=\"fieldRequired\"\n [errorIndicator]=\"fieldInvalid\"\n [ngClass]=\"{\n 'sky-tab-field-required': fieldRequired\n }\"\n [showTabRightArrow]=\"true\"\n [tabHeaderCount]=\"itemCount\"\n [tabHeading]=\"heading\"\n [tabId]=\"sectionTabId\"\n>\n <div\n [attr.aria-labelledby]=\"ariaLabelledby\"\n [attr.role]=\"ariaRole\"\n [id]=\"sectionContentId\"\n #tabContent\n >\n <ng-content></ng-content>\n </div>\n</sky-vertical-tab>\n", styles: [":host .sky-tab-field-required ::ng-deep .sky-vertical-tab-heading:after{content:\"*\";color:#ef4044;padding-left:5px}\n"], components: [{ type: SkyVerticalTabComponent, selector: "sky-vertical-tab", inputs: ["active", "ariaControls", "ariaInvalid", "ariaRequired", "ariaRole", "disabled", "errorIndicator", "tabHeaderCount", "tabHeading", "showTabRightArrow", "tabId"] }], directives: [{ type: i2__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
|
|
725
|
+
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: SkySectionedFormSectionComponent, decorators: [{
|
|
724
726
|
type: i0.Component,
|
|
725
727
|
args: [{
|
|
726
728
|
selector: 'sky-sectioned-form-section',
|
|
727
|
-
|
|
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
|
-
|
|
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': {
|
|
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.
|
|
768
|
-
SkyTabsResourcesModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.
|
|
769
|
-
SkyTabsResourcesModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.
|
|
776
|
+
SkyTabsResourcesModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: SkyTabsResourcesModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
|
|
777
|
+
SkyTabsResourcesModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: SkyTabsResourcesModule, exports: [i3.SkyI18nModule] });
|
|
778
|
+
SkyTabsResourcesModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: SkyTabsResourcesModule, providers: [
|
|
779
|
+
{
|
|
770
780
|
provide: i3.SKY_LIB_RESOURCES_PROVIDERS,
|
|
771
781
|
useClass: SkyTabsResourcesProvider,
|
|
772
|
-
multi: true
|
|
773
|
-
}
|
|
774
|
-
|
|
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
|
|
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.
|
|
873
|
-
SkyVerticalTabsetComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.
|
|
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.
|
|
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
|
-
|
|
894
|
-
|
|
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 &&
|
|
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.
|
|
996
|
-
SkyVerticalTabsetGroupComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.
|
|
1005
|
+
SkyVerticalTabsetGroupComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: SkyVerticalTabsetGroupComponent, deps: [{ token: SkyVerticalTabsetService }, { token: i0__namespace.ChangeDetectorRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
|
|
1006
|
+
SkyVerticalTabsetGroupComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.15", type: SkyVerticalTabsetGroupComponent, selector: "sky-vertical-tabset-group", inputs: { disabled: "disabled", groupHeading: "groupHeading", open: "open" }, queries: [{ propertyName: "tabs", predicate: SkyVerticalTabComponent }], ngImport: i0__namespace, template: "<div class=\"sky-vertical-tabset-group\">\n <!-- [ngClass] includes font classes for both modern and default styles -->\n <div\n class=\"sky-vertical-tabset-group-header sky-padding-even-default\"\n [ngClass]=\"{\n 'sky-vertical-tabset-group-header-sub-open sky-font-emphasized sky-emphasized':\n subMenuOpen(),\n 'sky-font-deemphasized': disabled,\n 'sky-deemphasized': disabled,\n 'sky-vertical-tabset-disabled': disabled\n }\"\n (click)=\"toggleMenuOpen()\"\n (keyup.enter)=\"toggleMenuOpen()\"\n [tabIndex]=\"-1\"\n >\n {{ groupHeading }}\n <sky-chevron\n *skyThemeIf=\"'default'\"\n class=\"sky-vertical-tabset-group-header-chevron\"\n [direction]=\"open ? 'up' : 'down'\"\n [disabled]=\"disabled\"\n (directionChange)=\"toggleMenuOpen()\"\n (keyup.enter)=\"$event.stopPropagation()\"\n >\n </sky-chevron>\n <ng-container *skyThemeIf=\"'modern'\">\n <button\n *ngIf=\"!open\"\n class=\"\n sky-btn\n sky-btn-icon-borderless\n sky-vertical-tabset-group-header-chevron\n \"\n type=\"button\"\n >\n <sky-icon icon=\"chevron-up\" iconType=\"skyux\"> </sky-icon>\n </button>\n <button\n *ngIf=\"open\"\n class=\"\n sky-btn\n sky-btn-icon-borderless\n sky-vertical-tabset-group-header-chevron\n \"\n type=\"button\"\n >\n <sky-icon icon=\"chevron-down\" iconType=\"skyux\"> </sky-icon>\n </button>\n </ng-container>\n </div>\n <div class=\"sky-vertical-tabset-group-content\" *ngIf=\"open\" [@tabSlide]>\n <ng-content></ng-content>\n </div>\n</div>\n", styles: [".sky-vertical-tabset-group{border-bottom:1px solid #e2e3e4;margin:5px 0 5px 5px}.sky-vertical-tabset-group-header{cursor:pointer;display:flex;justify-content:space-between}.sky-vertical-tabset-group-header:focus-visible{outline:thin dotted;outline:-webkit-focus-ring-color auto 5px}.sky-vertical-tabset-group-content{overflow:hidden;border-top:1px solid #e2e3e4}:host ::ng-deep .sky-vertical-tabset-group-header-chevron>button{font-size:14px!important}.sky-vertical-tabset-disabled{cursor:not-allowed;pointer-events:none}:host-context(.sky-theme-modern) .sky-vertical-tabset-group{border:none;margin:10px 0}:host-context(.sky-theme-modern) .sky-vertical-tabset-group-content{border:none;padding-left:25px}:host-context(.sky-theme-modern) .sky-vertical-tabset-group-header{position:relative}:host-context(.sky-theme-modern) .sky-vertical-tabset-group-header-chevron{position:absolute;top:6px;right:5px}.sky-theme-modern .sky-vertical-tabset-group{border:none;margin:10px 0}.sky-theme-modern .sky-vertical-tabset-group-content{border:none;padding-left:25px}.sky-theme-modern .sky-vertical-tabset-group-header{position:relative}.sky-theme-modern .sky-vertical-tabset-group-header-chevron{position:absolute;top:6px;right:5px}\n"], components: [{ type: i4__namespace.λ2, selector: "sky-chevron", inputs: ["direction", "disabled"], outputs: ["directionChange"] }, { type: i4__namespace.λ4, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }], directives: [{ type: i2__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i4__namespace$1.λ3, selector: "[skyThemeIf]", inputs: ["skyThemeIf"] }, { type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], animations: [
|
|
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.
|
|
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
|
-
|
|
1025
|
-
|
|
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.
|
|
1069
|
-
SkyVerticalTabsetModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.
|
|
1078
|
+
SkyVerticalTabsetModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: SkyVerticalTabsetModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
|
|
1079
|
+
SkyVerticalTabsetModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: SkyVerticalTabsetModule, declarations: [SkyVerticalTabsetComponent,
|
|
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.
|
|
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.
|
|
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.
|
|
1122
|
-
SkySectionedFormModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.
|
|
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
|
-
|
|
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.
|
|
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.
|
|
1181
|
-
SkyTabButtonComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.
|
|
1182
|
-
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.
|
|
1178
|
+
SkyTabButtonComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: SkyTabButtonComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
|
|
1179
|
+
SkyTabButtonComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.15", type: SkyTabButtonComponent, selector: "sky-tab-button", inputs: { active: "active", ariaControls: "ariaControls", buttonHref: "buttonHref", buttonId: "buttonId", buttonText: "buttonText", buttonTextCount: "buttonTextCount", closeable: "closeable", disabled: "disabled", tabStyle: "tabStyle" }, outputs: { buttonClick: "buttonClick", closeClick: "closeClick" }, ngImport: i0__namespace, template: "<div\n class=\"sky-btn-tab-wrapper\"\n [ngClass]=\"{\n 'sky-btn-tab-wrapper-selected': active,\n 'sky-btn-tab-wrapper-disabled': disabled\n }\"\n>\n <a\n class=\"sky-btn-tab\"\n role=\"tab\"\n [attr.aria-controls]=\"ariaControls\"\n [attr.aria-disabled]=\"disabled\"\n [attr.aria-selected]=\"active\"\n [attr.href]=\"buttonHref\"\n [id]=\"buttonId\"\n [ngClass]=\"{\n 'sky-btn-tab-wizard': tabStyle === 'wizard',\n 'sky-btn-tab-selected': active,\n 'sky-btn-tab-disabled': disabled,\n 'sky-tab-btn-closeable': closeable\n }\"\n [tabindex]=\"disabled ? '-1' : '0'\"\n (click)=\"onButtonClick($event)\"\n (keydown.enter)=\"onButtonEnterKeyDown($event)\"\n >\n <span class=\"sky-tab-heading\">\n {{ buttonText }}\n <span *ngIf=\"buttonTextCount !== undefined\" class=\"sky-tab-header-count\">\n {{ buttonTextCount }}\n </span>\n </span>\n </a>\n\n <button\n *ngIf=\"closeable\"\n class=\"sky-btn-tab-close\"\n type=\"button\"\n [attr.aria-label]=\"'skyux_tab_close' | skyLibResources: buttonText\"\n [disabled]=\"disabled\"\n [ngClass]=\"{\n 'sky-btn-tab-close-disabled': disabled\n }\"\n (click)=\"onCloseClick($event)\"\n >\n <sky-icon icon=\"remove\"></sky-icon>\n </button>\n</div>\n", styles: [".sky-btn-tab-wrapper{display:inline-block;position:relative;margin-right:5px}.sky-btn-tab-wrapper .sky-btn-tab-close{position:absolute;top:10px;right:10px;color:#686c73}.sky-btn-tab-wrapper .sky-btn-tab-close:hover{color:#212327;transition:color .15s}.sky-btn-tab-wrapper.sky-btn-tab-wrapper-selected:not(.sky-btn-tab-wrapper-disabled) .sky-btn-tab-close{color:#fff}.sky-tab-btn-closeable{padding-right:43px}:host-context(.sky-theme-modern) .sky-btn-tab-wrapper{margin-right:10px}:host-context(.sky-theme-modern) .sky-btn-tab-wrapper .sky-btn-tab-close{top:12px;right:10px}:host-context(.sky-theme-modern) .sky-btn-tab-wrapper.sky-btn-tab-wrapper-selected:not(.sky-btn-tab-wrapper-disabled) .sky-btn-tab-close{color:#686c73}:host-context(.sky-theme-modern) .sky-tab-btn-closeable{padding-right:44px}.sky-theme-modern .sky-btn-tab-wrapper{margin-right:10px}.sky-theme-modern .sky-btn-tab-wrapper .sky-btn-tab-close{top:12px;right:10px}.sky-theme-modern .sky-btn-tab-wrapper.sky-btn-tab-wrapper-selected:not(.sky-btn-tab-wrapper-disabled) .sky-btn-tab-close{color:#686c73}.sky-theme-modern .sky-tab-btn-closeable{padding-right:44px}:host-context(.sky-theme-modern.sky-theme-mode-dark) .sky-btn-tab-wrapper .sky-btn-tab-close{color:#eeeeef}:host-context(.sky-theme-modern.sky-theme-mode-dark) .sky-btn-tab-wrapper.sky-btn-tab-wrapper-selected:not(.sky-btn-tab-wrapper-disabled) .sky-btn-tab-close{color:#eeeeef}.sky-theme-modern.sky-theme-mode-dark .sky-btn-tab-wrapper .sky-btn-tab-close{color:#eeeeef}.sky-theme-modern.sky-theme-mode-dark .sky-btn-tab-wrapper.sky-btn-tab-wrapper-selected:not(.sky-btn-tab-wrapper-disabled) .sky-btn-tab-close{color:#eeeeef}\n"], components: [{ type: i4__namespace.λ4, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }], directives: [{ type: i2__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "skyLibResources": i3__namespace.SkyLibResourcesPipe }, changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush, encapsulation: i0__namespace.ViewEncapsulation.None });
|
|
1180
|
+
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: SkyTabButtonComponent, decorators: [{
|
|
1183
1181
|
type: i0.Component,
|
|
1184
1182
|
args: [{
|
|
1185
1183
|
selector: 'sky-tab-button',
|
|
1186
|
-
|
|
1187
|
-
|
|
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
|
|
1260
|
+
var url = this.router
|
|
1261
|
+
.createUrlTree(['.'], {
|
|
1263
1262
|
relativeTo: this.activatedRoute,
|
|
1264
1263
|
queryParams: params,
|
|
1265
|
-
queryParamsHandling: 'merge'
|
|
1266
|
-
})
|
|
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)
|
|
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
|
|
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.
|
|
1330
|
-
SkyTabsetPermalinkService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.
|
|
1331
|
-
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.
|
|
1332
|
+
SkyTabsetPermalinkService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: SkyTabsetPermalinkService, deps: [{ token: i1__namespace$1.ActivatedRoute }, { token: i2__namespace.Location }, { token: i1__namespace$1.Router }], target: i0__namespace.ɵɵFactoryTarget.Injectable });
|
|
1333
|
+
SkyTabsetPermalinkService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: SkyTabsetPermalinkService });
|
|
1334
|
+
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: SkyTabsetPermalinkService, decorators: [{
|
|
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
|
|
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.
|
|
1451
|
-
SkyTabsetService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.
|
|
1452
|
-
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.
|
|
1452
|
+
SkyTabsetService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: SkyTabsetService, deps: [], target: i0__namespace.ɵɵFactoryTarget.Injectable });
|
|
1453
|
+
SkyTabsetService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: SkyTabsetService });
|
|
1454
|
+
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: SkyTabsetService, decorators: [{
|
|
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.
|
|
1590
|
-
SkyTabComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.
|
|
1591
|
-
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.
|
|
1590
|
+
SkyTabComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: SkyTabComponent, deps: [{ token: i0__namespace.ChangeDetectorRef }, { token: SkyTabsetPermalinkService }, { token: SkyTabsetService }], target: i0__namespace.ɵɵFactoryTarget.Component });
|
|
1591
|
+
SkyTabComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.15", type: SkyTabComponent, selector: "sky-tab", inputs: { active: "active", disabled: "disabled", permalinkValue: "permalinkValue", tabHeaderCount: "tabHeaderCount", tabHeading: "tabHeading", tabIndex: "tabIndex" }, outputs: { close: "close" }, usesOnChanges: true, ngImport: i0__namespace, template: "<div\n class=\"sky-tab\"\n role=\"tabpanel\"\n [attr.aria-labelledby]=\"tabButtonId\"\n [hidden]=\"!showContent\"\n [id]=\"tabPanelId\"\n>\n <ng-content></ng-content>\n</div>\n", changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
|
|
1592
|
+
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: SkyTabComponent, decorators: [{
|
|
1592
1593
|
type: i0.Component,
|
|
1593
1594
|
args: [{
|
|
1594
1595
|
selector: 'sky-tab',
|
|
1595
|
-
|
|
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.
|
|
1734
|
-
SkyTabsetNavButtonComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.
|
|
1735
|
-
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.
|
|
1734
|
+
SkyTabsetNavButtonComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: SkyTabsetNavButtonComponent, deps: [{ token: i3__namespace.SkyLibResourcesService }, { token: i0__namespace.ChangeDetectorRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
|
|
1735
|
+
SkyTabsetNavButtonComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.15", type: SkyTabsetNavButtonComponent, selector: "sky-tabset-nav-button", inputs: { tabset: "tabset", buttonType: "buttonType", buttonText: "buttonText" }, ngImport: i0__namespace, template: "<button\n class=\"sky-btn sky-btn-default\"\n type=\"button\"\n [disabled]=\"disabled\"\n (click)=\"buttonClick()\"\n>\n {{ buttonText }}\n</button>\n" });
|
|
1736
|
+
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: SkyTabsetNavButtonComponent, decorators: [{
|
|
1736
1737
|
type: i0.Component,
|
|
1737
1738
|
args: [{
|
|
1738
1739
|
selector: 'sky-tabset-nav-button',
|
|
1739
|
-
|
|
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 =
|
|
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
|
|
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.
|
|
1800
|
-
SkyTabsetAdapterService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.
|
|
1801
|
-
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.
|
|
1802
|
+
SkyTabsetAdapterService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: SkyTabsetAdapterService, deps: [], target: i0__namespace.ɵɵFactoryTarget.Injectable });
|
|
1803
|
+
SkyTabsetAdapterService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: SkyTabsetAdapterService });
|
|
1804
|
+
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: SkyTabsetAdapterService, decorators: [{
|
|
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 =
|
|
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
|
|
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:
|
|
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.
|
|
2177
|
-
SkyTabsetComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.
|
|
2182
|
+
SkyTabsetComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: SkyTabsetComponent, deps: [{ token: i0__namespace.ChangeDetectorRef }, { token: i0__namespace.ElementRef }, { token: SkyTabsetAdapterService }, { token: SkyTabsetPermalinkService }, { token: SkyTabsetService }], target: i0__namespace.ɵɵFactoryTarget.Component });
|
|
2183
|
+
SkyTabsetComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.15", type: SkyTabsetComponent, selector: "sky-tabset", inputs: { active: "active", ariaLabel: "ariaLabel", ariaLabelledBy: "ariaLabelledBy", permalinkId: "permalinkId", tabStyle: "tabStyle" }, outputs: { activeChange: "activeChange", newTab: "newTab", openTab: "openTab", tabIndexesChange: "tabIndexesChange" }, providers: [
|
|
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'\"
|
|
2182
|
-
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.
|
|
2186
|
+
SkyTabsetService,
|
|
2187
|
+
], queries: [{ propertyName: "tabs", predicate: SkyTabComponent }], ngImport: i0__namespace, template: "<div\n class=\"sky-tabset\"\n role=\"tablist\"\n [attr.aria-label]=\"ariaLabel\"\n [attr.aria-labelledby]=\"ariaLabelledBy\"\n [ngClass]=\"\n 'sky-tabset-mode-' + tabDisplayMode + ' sky-tabset-style-' + tabStyle\n \"\n (window:resize)=\"onWindowResize()\"\n>\n <span class=\"sky-tabset-dropdown\">\n <sky-dropdown *ngIf=\"tabDisplayMode === 'dropdown'\" buttonType=\"tab\">\n <sky-dropdown-button>\n {{ dropdownTriggerButtonText }}\n </sky-dropdown-button>\n <sky-dropdown-menu>\n <sky-dropdown-item\n *ngFor=\"let tabButton of tabButtons\"\n class=\"sky-tab-dropdown-menu-item\"\n >\n <div\n class=\"sky-tab-dropdown-item\"\n [ngClass]=\"{\n 'sky-tab-dropdown-item-selected': tabButton.active\n }\"\n >\n <ng-container\n *ngTemplateOutlet=\"\n tabButtonTemplate;\n context: {\n $implicit: tabButton\n }\n \"\n ></ng-container>\n </div>\n </sky-dropdown-item>\n </sky-dropdown-menu>\n </sky-dropdown>\n </span>\n <span class=\"sky-tabset-tabs\">\n <ng-container *ngFor=\"let tabButton of tabButtons\">\n <ng-container\n *ngTemplateOutlet=\"\n tabButtonTemplate;\n context: {\n $implicit: tabButton\n }\n \"\n ></ng-container>\n </ng-container>\n </span>\n <span class=\"sky-tabset-btns\">\n <button\n *ngIf=\"newTab.observers.length > 0\"\n class=\"sky-btn sky-btn-icon sky-tabset-btn-new sky-margin-inline-compact\"\n type=\"button\"\n [attr.aria-label]=\"'skyux_tab_add' | skyLibResources\"\n [skyThemeClass]=\"{\n 'sky-margin-inline-sm': 'modern'\n }\"\n (click)=\"onNewTabClick()\"\n >\n <sky-icon icon=\"plus-circle\" size=\"lg\"> </sky-icon>\n </button>\n <button\n *ngIf=\"openTab.observers.length > 0\"\n class=\"sky-btn sky-btn-icon sky-tabset-btn-open sky-margin-inline-compact\"\n type=\"button\"\n [attr.aria-label]=\"'skyux_tab_open' | skyLibResources\"\n [skyThemeClass]=\"{\n 'sky-margin-inline-sm': 'modern'\n }\"\n (click)=\"onOpenTabClick()\"\n >\n <sky-icon icon=\"folder-open-o\" size=\"lg\"> </sky-icon>\n </button>\n </span>\n</div>\n<ng-content></ng-content>\n\n<ng-template let-tabButton #tabButtonTemplate>\n <sky-tab-button\n [active]=\"tabButton.active\"\n [ariaControls]=\"tabButton.ariaControls\"\n [buttonHref]=\"tabButton.buttonHref\"\n [buttonId]=\"tabButton.buttonId\"\n [buttonText]=\"tabButton.buttonText\"\n [buttonTextCount]=\"tabButton.buttonTextCount\"\n [closeable]=\"tabButton.closeable\"\n [disabled]=\"tabButton.disabled\"\n [tabStyle]=\"tabStyle\"\n (buttonClick)=\"onTabButtonClick(tabButton)\"\n (closeClick)=\"onTabCloseClick(tabButton)\"\n ></sky-tab-button>\n</ng-template>\n", styles: [".sky-tabset{align-items:center;border-bottom:2px solid #0974a1;display:flex;list-style-type:none;margin:0;overflow:hidden;padding:0 0 0 15px;white-space:nowrap}.sky-tabset.sky-tabset-style-wizard{border-bottom:none;padding-bottom:10px;padding-left:0}.sky-tabset-btns{order:1;padding-left:10px}.sky-tabset-dropdown{order:0;max-width:100%}.sky-tabset-mode-dropdown{line-height:0}.sky-tabset-mode-dropdown .sky-tabset-tabs{visibility:hidden;order:2}.sky-tab-dropdown-menu-item sky-tab-button{display:flex;min-width:300px}.sky-tab-dropdown-menu-item .sky-dropdown-item{margin:0}.sky-tab-dropdown-menu-item .sky-btn-tab-wrapper{width:100%;margin-right:0}.sky-tab-dropdown-menu-item .sky-btn-tab{margin:0;border-radius:0;width:100%;display:flex}.sky-tab-dropdown-menu-item .sky-btn-tab>.sky-tab-heading{flex:1 1 auto}.sky-tab-dropdown-menu-item .sky-btn-tab>.sky-btn-tab-close{flex:0 1 auto}.sky-tabset-tabs{order:0;white-space:nowrap}.sky-tabset-btn-new,.sky-tabset-btn-open{color:#0974a1}.sky-theme-modern .sky-tabset{border-bottom:1px solid #d2d2d2;overflow:visible}.sky-theme-modern .sky-tab-dropdown-menu-item .sky-btn-tab-wrapper{margin-right:0}\n"], components: [{ type: i4__namespace$2.λ3, selector: "sky-dropdown", inputs: ["buttonStyle", "buttonType", "disabled", "dismissOnBlur", "label", "horizontalAlignment", "messageStream", "title", "trigger"] }, { type: i4__namespace$2.λ2, selector: "sky-dropdown-button" }, { type: i4__namespace$2.λ4, selector: "sky-dropdown-menu", inputs: ["ariaLabelledBy", "ariaRole", "useNativeFocus"], outputs: ["menuChanges"] }, { type: i4__namespace$2.λ1, selector: "sky-dropdown-item", inputs: ["ariaRole"] }, { type: i4__namespace.λ4, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }, { type: SkyTabButtonComponent, selector: "sky-tab-button", inputs: ["active", "ariaControls", "buttonHref", "buttonId", "buttonText", "buttonTextCount", "closeable", "disabled", "tabStyle"], outputs: ["buttonClick", "closeClick"] }], directives: [{ type: i2__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i4__namespace$1.λ2, selector: "[skyThemeClass]", inputs: ["class", "skyThemeClass"] }], pipes: { "skyLibResources": i3__namespace.SkyLibResourcesPipe }, changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush, encapsulation: i0__namespace.ViewEncapsulation.None });
|
|
2188
|
+
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: SkyTabsetComponent, decorators: [{
|
|
2183
2189
|
type: i0.Component,
|
|
2184
2190
|
args: [{
|
|
2185
2191
|
selector: 'sky-tabset',
|
|
2186
|
-
|
|
2187
|
-
|
|
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.
|
|
2225
|
-
SkyTabsModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.
|
|
2230
|
+
SkyTabsModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: SkyTabsModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
|
|
2231
|
+
SkyTabsModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: SkyTabsModule, declarations: [SkyTabButtonComponent,
|
|
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
|
-
|
|
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.
|
|
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
|
|
2282
|
-
exports
|
|
2283
|
-
exports
|
|
2284
|
-
exports
|
|
2285
|
-
exports
|
|
2286
|
-
exports
|
|
2287
|
-
exports
|
|
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
|