@skyux/tabs 5.0.0 → 5.0.1
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 +3 -3
- package/bundles/skyux-tabs-testing.umd.js.map +1 -1
- package/bundles/skyux-tabs.umd.js +76 -78
- package/bundles/skyux-tabs.umd.js.map +1 -1
- package/esm2015/modules/sectioned-form/sectioned-form-section.component.js +4 -4
- package/esm2015/modules/sectioned-form/sectioned-form.component.js +4 -4
- package/esm2015/modules/sectioned-form/sectioned-form.module.js +5 -5
- package/esm2015/modules/sectioned-form/sectioned-form.service.js +4 -4
- package/esm2015/modules/shared/sky-tabs-resources.module.js +5 -5
- package/esm2015/modules/tabs/tab-button.component.js +4 -4
- package/esm2015/modules/tabs/tab.component.js +4 -4
- package/esm2015/modules/tabs/tabs.module.js +5 -5
- package/esm2015/modules/tabs/tabset-adapter.service.js +4 -4
- package/esm2015/modules/tabs/tabset-nav-button.component.js +4 -4
- package/esm2015/modules/tabs/tabset-permalink.service.js +4 -4
- package/esm2015/modules/tabs/tabset.component.js +4 -4
- package/esm2015/modules/tabs/tabset.service.js +4 -4
- package/esm2015/modules/vertical-tabset/vertical-tab-media-query.service.js +4 -4
- package/esm2015/modules/vertical-tabset/vertical-tab.component.js +5 -5
- package/esm2015/modules/vertical-tabset/vertical-tabset-adapter.service.js +4 -4
- package/esm2015/modules/vertical-tabset/vertical-tabset-group.component.js +4 -4
- package/esm2015/modules/vertical-tabset/vertical-tabset.component.js +4 -4
- package/esm2015/modules/vertical-tabset/vertical-tabset.module.js +5 -5
- package/esm2015/modules/vertical-tabset/vertical-tabset.service.js +4 -4
- package/fesm2015/skyux-tabs.js +65 -65
- package/fesm2015/skyux-tabs.js.map +1 -1
- package/package.json +7 -7
|
@@ -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
|
|
|
@@ -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.11", 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.11", ngImport: i0__namespace, type: SkyVerticalTabsetService });
|
|
204
|
+
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.11", ngImport: i0__namespace, type: SkyVerticalTabsetService, decorators: [{
|
|
207
205
|
type: i0.Injectable
|
|
208
206
|
}], ctorParameters: function () { return [{ type: i1__namespace.SkyMediaQueryService }]; } });
|
|
209
207
|
|
|
@@ -274,8 +272,8 @@
|
|
|
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.11", 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.11", type: SkySectionedFormComponent, selector: "sky-sectioned-form", inputs: { maintainSectionContent: "maintainSectionContent" }, outputs: { indexChanged: "indexChanged" }, providers: [SkyVerticalTabsetService], viewQueries: [{ propertyName: "content", first: true, predicate: ["skySectionSideContent"], descendants: true }], ngImport: i0__namespace, template: "<div\n aria-orientation=\"vertical\"\n class=\"sky-sectioned-form\"\n [attr.role]=\"ariaRole\"\n (window:resize)=\"tabService.updateContent()\"\n>\n <div\n *ngIf=\"maintainSectionContent || tabsVisible()\"\n class=\"sky-sectioned-form-tabs\"\n [ngClass]=\"{'sky-sectioned-form-tabs-hidden': !tabsVisible()}\"\n [@tabEnter]=\"tabService.animationTabsVisibleState\"\n >\n <ng-content></ng-content>\n </div>\n <div\n *ngIf=\"maintainSectionContent || tabService.contentVisible()\"\n class=\"sky-sectioned-form-content\"\n [ngClass]=\"{'sky-sectioned-form-content-hidden': !tabService.contentVisible()}\"\n [@contentEnter]=\"tabService.animationContentVisibleState\"\n #skySectionSideContent\n >\n </div>\n</div>\n\n", styles: [":host .sky-sectioned-form{display:block;max-height:none}:host .sky-sectioned-form-content{flex-basis:auto;overflow-y:visible}:host .sky-sectioned-form-tabs{flex-basis:auto;overflow-y:visible;border-right:1px solid #e2e3e4}:host-context(.sky-responsive-container-xs) .sky-sectioned-form,:host-context(.sky-responsive-container-sm) .sky-sectioned-form,:host-context(.sky-responsive-container-md) .sky-sectioned-form,:host-context(.sky-responsive-container-lg) .sky-sectioned-form{display:block;max-height:none}:host-context(.sky-responsive-container-xs) .sky-sectioned-form-content,:host-context(.sky-responsive-container-sm) .sky-sectioned-form-content,:host-context(.sky-responsive-container-md) .sky-sectioned-form-content,:host-context(.sky-responsive-container-lg) .sky-sectioned-form-content{flex-basis:auto;overflow-y:visible}:host-context(.sky-responsive-container-xs) .sky-sectioned-form-tabs,:host-context(.sky-responsive-container-sm) .sky-sectioned-form-tabs,:host-context(.sky-responsive-container-md) .sky-sectioned-form-tabs,:host-context(.sky-responsive-container-lg) .sky-sectioned-form-tabs{flex-basis:auto;overflow-y:visible;border-right:1px solid #e2e3e4}@media (min-width: 768px){:host .sky-sectioned-form{display:flex;max-height:100%}:host .sky-sectioned-form-content{flex-basis:70%;margin:15px;overflow-y:auto}:host .sky-sectioned-form-tabs{flex-basis:30%;overflow-y:auto}}:host-context(.sky-responsive-container-sm) .sky-sectioned-form,:host-context(.sky-responsive-container-md) .sky-sectioned-form,:host-context(.sky-responsive-container-lg) .sky-sectioned-form{display:flex;max-height:100%}:host-context(.sky-responsive-container-sm) .sky-sectioned-form-content,:host-context(.sky-responsive-container-md) .sky-sectioned-form-content,:host-context(.sky-responsive-container-lg) .sky-sectioned-form-content{flex-basis:70%;margin:15px;overflow-y:auto}:host-context(.sky-responsive-container-sm) .sky-sectioned-form-tabs,:host-context(.sky-responsive-container-md) .sky-sectioned-form-tabs,:host-context(.sky-responsive-container-lg) .sky-sectioned-form-tabs{flex-basis:30%;overflow-y:auto}.sky-sectioned-form-tabs-hidden{display:none}.sky-sectioned-form-content-hidden{display:none}:host-context(.sky-theme-modern) .sky-sectioned-form-content{margin:15px}:host-context(.sky-theme-modern) .sky-sectioned-form-tabs{border-right:1px solid #d2d2d2}@media (min-width: 768px){:host-context(.sky-theme-modern) :host .sky-sectioned-form-content{margin:20px 30px}}:host-context(.sky-theme-modern) :host-context(.sky-responsive-container-sm) .sky-sectioned-form-content,:host-context(.sky-theme-modern) :host-context(.sky-responsive-container-md) .sky-sectioned-form-content,:host-context(.sky-theme-modern) :host-context(.sky-responsive-container-lg) .sky-sectioned-form-content{margin:20px 30px}.sky-theme-modern .sky-sectioned-form-content{margin:15px}.sky-theme-modern .sky-sectioned-form-tabs{border-right:1px solid #d2d2d2}@media (min-width: 768px){.sky-theme-modern :host .sky-sectioned-form-content{margin:20px 30px}}.sky-theme-modern :host-context(.sky-responsive-container-sm) .sky-sectioned-form-content,.sky-theme-modern :host-context(.sky-responsive-container-md) .sky-sectioned-form-content,.sky-theme-modern :host-context(.sky-responsive-container-lg) .sky-sectioned-form-content{margin:20px 30px}\n"], directives: [{ type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], animations: [
|
|
279
277
|
animations.trigger('tabEnter', [
|
|
280
278
|
animations.transition(HIDDEN_STATE + " => " + VISIBLE_STATE, [
|
|
281
279
|
animations.style({ transform: 'translate(-100%)' }),
|
|
@@ -289,7 +287,7 @@
|
|
|
289
287
|
])
|
|
290
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.11", ngImport: i0__namespace, type: SkySectionedFormComponent, decorators: [{
|
|
293
291
|
type: i0.Component,
|
|
294
292
|
args: [{
|
|
295
293
|
selector: 'sky-sectioned-form',
|
|
@@ -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.11", ngImport: i0__namespace, type: SkyVerticalTabMediaQueryService, deps: [], target: i0__namespace.ɵɵFactoryTarget.Injectable });
|
|
390
|
+
SkyVerticalTabMediaQueryService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.11", ngImport: i0__namespace, type: SkyVerticalTabMediaQueryService });
|
|
391
|
+
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.11", 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.11", 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.11", ngImport: i0__namespace, type: SkyVerticalTabsetAdapterService });
|
|
437
|
+
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.11", ngImport: i0__namespace, type: SkyVerticalTabsetAdapterService, decorators: [{
|
|
440
438
|
type: i0.Injectable
|
|
441
439
|
}], ctorParameters: function () { return [{ type: i0__namespace.RendererFactory2 }]; } });
|
|
442
440
|
|
|
@@ -588,12 +586,12 @@
|
|
|
588
586
|
};
|
|
589
587
|
return SkyVerticalTabComponent;
|
|
590
588
|
}());
|
|
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.
|
|
589
|
+
SkyVerticalTabComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.11", ngImport: i0__namespace, type: SkyVerticalTabComponent, deps: [{ token: SkyVerticalTabsetAdapterService }, { token: i0__namespace.ChangeDetectorRef }, { token: SkyVerticalTabsetService }, { token: SkyVerticalTabMediaQueryService }], target: i0__namespace.ɵɵFactoryTarget.Component });
|
|
590
|
+
SkyVerticalTabComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.11", 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
591
|
SkyVerticalTabMediaQueryService,
|
|
594
592
|
{ provide: i1.SkyMediaQueryService, useExisting: SkyVerticalTabMediaQueryService }
|
|
595
|
-
], viewQueries: [{ propertyName: "tabContent", first: true, predicate: ["tabContentWrapper"], descendants: true }], ngImport: i0__namespace, template: "<a\n class=\"sky-vertical-tab\"\n [attr.aria-controls]=\"ariaControls\"\n [attr.aria-invalid]=\"ariaInvalid\"\n [attr.aria-required]=\"ariaRequired ? ariaRequired : null\"\n [attr.aria-selected]=\"active\"\n [attr.id]=\"tabId\"\n [attr.role]=\"ariaRole\"\n [ngClass]=\"{\n 'sky-vertical-tab-active': active,\n 'sky-vertical-tab-disabled': disabled,\n 'sky-font-deemphasized': disabled,\n 'sky-deemphasized': disabled\n }\"\n [tabIndex]=\"tabIndex()\"\n (click)=\"activateTab()\"\n (keyup.enter)=\"activateTab()\">\n <div class=\"sky-vertical-tab-display\">\n <div class=\"sky-vertical-tab-heading\">\n <span class=\"sky-vertical-tab-heading-value\">{{ tabHeading }}</span>\n <span\n class=\"sky-vertical-tab-count\"\n *ngIf=\"tabHeaderCount || tabHeaderCount === 0\">\n ({{ tabHeaderCount }})\n </span>\n </div>\n <sky-status-indicator *ngIf=\"errorIndicator\"\n class=\"sky-vertical-tab-heading-error\"\n descriptionType=\"error\"\n indicatorType=\"danger\"\n ></sky-status-indicator>\n <sky-icon\n *ngIf=\"showTabRightArrow\"\n class=\"sky-vertical-tab-right-arrow\"\n icon=\"chevron-right\"\n >\n </sky-icon>\n </div>\n</a>\n\n<div\n #tabContentWrapper\n>\n <div\n class=\"sky-vertical-tab-content-pane\"\n [ngClass]=\"{'sky-vertical-tab-hidden': !active}\"\n >\n\n <ng-content></ng-content>\n\n <div>\n\n</div>\n\n", styles: [".sky-vertical-tab{cursor:pointer;padding:7px 0 7px 10px;margin:5px 0 5px 10px;display:flex;text-decoration:none}.sky-vertical-tab:not(.sky-deemphasized){color:#212327}.sky-vertical-tab:hover{background-color:#eeeeef}.sky-vertical-tab:focus-visible{outline:thin dotted;outline:-webkit-focus-ring-color auto 5px}.sky-vertical-tab:hover .sky-vertical-tab-right-arrow{color:#979ba2}.sky-vertical-tab-active{background-color:#eeeeef;color:#212327;padding-left:6px;border-left:4px solid #00b4f1}.sky-vertical-tab-hidden{display:none}.sky-vertical-tab-display{display:flex;flex-grow:1}.sky-vertical-tab-heading-error{padding-left:5px}.sky-vertical-tab-count{margin-left:5px}.sky-vertical-tab-disabled{cursor:not-allowed;pointer-events:none}.sky-vertical-tab-right-arrow{padding:3px 10px 0 0;color:#cdcfd2}:host-context(.sky-theme-modern) .sky-vertical-tab{color:#686c73;cursor:pointer;padding:10px 0 10px 10px;margin:10px 0 20px 10px}:host-context(.sky-theme-modern) .sky-vertical-tab:not(.sky-vertical-tab-active):not(:active):hover{color:#212327;background-color:transparent;padding-left:9px;border-left:1px solid #00b4f1}:host-context(.sky-theme-modern) .sky-vertical-tab:not(:active):focus-visible{outline:solid 2px #1870B8;outline-offset:-2px;box-shadow:0 1px 8px #0000004d}:host-context(.sky-theme-modern) .sky-vertical-tab:focus:active:hover{outline:none;background:none}:host-context(.sky-theme-modern) .sky-vertical-tab:active{border-left:3px solid #00b4f1;color:#212327;padding-left:7px}:host-context(.sky-theme-modern) .sky-vertical-tab .sky-vertical-tab-heading-error{padding-left:10px;position:relative;top:-2px}:host-context(.sky-theme-modern) .sky-vertical-tab-active{background:none;color:#212327;padding-left:7px;border-left:3px solid #1870B8}.sky-theme-modern .sky-vertical-tab{color:#686c73;cursor:pointer;padding:10px 0 10px 10px;margin:10px 0 20px 10px}.sky-theme-modern .sky-vertical-tab:not(.sky-vertical-tab-active):not(:active):hover{color:#212327;background-color:transparent;padding-left:9px;border-left:1px solid #00b4f1}.sky-theme-modern .sky-vertical-tab:not(:active):focus-visible{outline:solid 2px #1870B8;outline-offset:-2px;box-shadow:0 1px 8px #0000004d}.sky-theme-modern .sky-vertical-tab:focus:active:hover{outline:none;background:none}.sky-theme-modern .sky-vertical-tab:active{border-left:3px solid #00b4f1;color:#212327;padding-left:7px}.sky-theme-modern .sky-vertical-tab .sky-vertical-tab-heading-error{padding-left:10px;position:relative;top:-2px}.sky-theme-modern .sky-vertical-tab-active{background:none;color:#212327;padding-left:7px;border-left:3px solid #1870B8}\n"], components: [{ type: i4__namespace.λ10, selector: "sky-status-indicator", inputs: ["indicatorType", "descriptionType", "customDescription"] }, { type: i4__namespace.λ4, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }], directives: [{ type: i2__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
|
|
596
|
-
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.
|
|
593
|
+
], viewQueries: [{ propertyName: "tabContent", first: true, predicate: ["tabContentWrapper"], descendants: true }], ngImport: i0__namespace, template: "<a\n class=\"sky-vertical-tab\"\n [attr.aria-controls]=\"ariaControls\"\n [attr.aria-invalid]=\"ariaInvalid\"\n [attr.aria-required]=\"ariaRequired ? ariaRequired : null\"\n [attr.aria-selected]=\"active\"\n [attr.id]=\"tabId\"\n [attr.role]=\"ariaRole\"\n [ngClass]=\"{\n 'sky-vertical-tab-active': active,\n 'sky-vertical-tab-disabled': disabled,\n 'sky-font-deemphasized': disabled,\n 'sky-deemphasized': disabled\n }\"\n [tabIndex]=\"tabIndex()\"\n (click)=\"activateTab()\"\n (keyup.enter)=\"activateTab()\">\n <div class=\"sky-vertical-tab-display\">\n <div class=\"sky-vertical-tab-heading\">\n <span class=\"sky-vertical-tab-heading-value\">{{ tabHeading }}</span>\n <span\n class=\"sky-vertical-tab-count\"\n *ngIf=\"tabHeaderCount || tabHeaderCount === 0\">\n ({{ tabHeaderCount }})\n </span>\n </div>\n <sky-status-indicator *ngIf=\"errorIndicator\"\n class=\"sky-vertical-tab-heading-error\"\n descriptionType=\"error\"\n indicatorType=\"danger\"\n ></sky-status-indicator>\n <sky-icon\n *ngIf=\"showTabRightArrow\"\n class=\"sky-vertical-tab-right-arrow\"\n icon=\"chevron-right\"\n >\n </sky-icon>\n </div>\n</a>\n\n<div\n #tabContentWrapper\n>\n <div\n class=\"sky-vertical-tab-content-pane\"\n role=\"tabpanel\"\n tabindex=\"0\"\n [ngClass]=\"{'sky-vertical-tab-hidden': !active}\"\n >\n\n <ng-content></ng-content>\n\n <div>\n\n</div>\n\n", styles: [".sky-vertical-tab{cursor:pointer;padding:7px 0 7px 10px;margin:5px 0 5px 10px;display:flex;text-decoration:none}.sky-vertical-tab:not(.sky-deemphasized){color:#212327}.sky-vertical-tab:hover{background-color:#eeeeef}.sky-vertical-tab:focus-visible{outline:thin dotted;outline:-webkit-focus-ring-color auto 5px}.sky-vertical-tab:hover .sky-vertical-tab-right-arrow{color:#979ba2}.sky-vertical-tab-active{background-color:#eeeeef;color:#212327;padding-left:6px;border-left:4px solid #00b4f1}.sky-vertical-tab-hidden{display:none}.sky-vertical-tab-display{display:flex;flex-grow:1}.sky-vertical-tab-heading-error{padding-left:5px}.sky-vertical-tab-count{margin-left:5px}.sky-vertical-tab-disabled{cursor:not-allowed;pointer-events:none}.sky-vertical-tab-right-arrow{padding:3px 10px 0 0;color:#cdcfd2}:host-context(.sky-theme-modern) .sky-vertical-tab{color:#686c73;cursor:pointer;padding:10px 0 10px 10px;margin:10px 0 20px 10px}:host-context(.sky-theme-modern) .sky-vertical-tab:not(.sky-vertical-tab-active):not(:active):hover{color:#212327;background-color:transparent;padding-left:9px;border-left:1px solid #00b4f1}:host-context(.sky-theme-modern) .sky-vertical-tab:not(:active):focus-visible{outline:solid 2px #1870B8;outline-offset:-2px;box-shadow:0 1px 8px #0000004d}:host-context(.sky-theme-modern) .sky-vertical-tab:focus:active:hover{outline:none;background:none}:host-context(.sky-theme-modern) .sky-vertical-tab:active{border-left:3px solid #00b4f1;color:#212327;padding-left:7px}:host-context(.sky-theme-modern) .sky-vertical-tab .sky-vertical-tab-heading-error{padding-left:10px;position:relative;top:-2px}:host-context(.sky-theme-modern) .sky-vertical-tab-active{background:none;color:#212327;padding-left:7px;border-left:3px solid #1870B8}.sky-theme-modern .sky-vertical-tab{color:#686c73;cursor:pointer;padding:10px 0 10px 10px;margin:10px 0 20px 10px}.sky-theme-modern .sky-vertical-tab:not(.sky-vertical-tab-active):not(:active):hover{color:#212327;background-color:transparent;padding-left:9px;border-left:1px solid #00b4f1}.sky-theme-modern .sky-vertical-tab:not(:active):focus-visible{outline:solid 2px #1870B8;outline-offset:-2px;box-shadow:0 1px 8px #0000004d}.sky-theme-modern .sky-vertical-tab:focus:active:hover{outline:none;background:none}.sky-theme-modern .sky-vertical-tab:active{border-left:3px solid #00b4f1;color:#212327;padding-left:7px}.sky-theme-modern .sky-vertical-tab .sky-vertical-tab-heading-error{padding-left:10px;position:relative;top:-2px}.sky-theme-modern .sky-vertical-tab-active{background:none;color:#212327;padding-left:7px;border-left:3px solid #1870B8}\n"], components: [{ type: i4__namespace.λ10, selector: "sky-status-indicator", inputs: ["indicatorType", "descriptionType", "customDescription"] }, { type: i4__namespace.λ4, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }], directives: [{ type: i2__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
|
|
594
|
+
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.11", ngImport: i0__namespace, type: SkyVerticalTabComponent, decorators: [{
|
|
597
595
|
type: i0.Component,
|
|
598
596
|
args: [{
|
|
599
597
|
selector: 'sky-vertical-tab',
|
|
@@ -662,9 +660,9 @@
|
|
|
662
660
|
};
|
|
663
661
|
return SkySectionedFormService;
|
|
664
662
|
}());
|
|
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.
|
|
663
|
+
SkySectionedFormService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.11", ngImport: i0__namespace, type: SkySectionedFormService, deps: [], target: i0__namespace.ɵɵFactoryTarget.Injectable });
|
|
664
|
+
SkySectionedFormService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.11", ngImport: i0__namespace, type: SkySectionedFormService });
|
|
665
|
+
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.11", ngImport: i0__namespace, type: SkySectionedFormService, decorators: [{
|
|
668
666
|
type: i0.Injectable
|
|
669
667
|
}] });
|
|
670
668
|
|
|
@@ -718,9 +716,9 @@
|
|
|
718
716
|
};
|
|
719
717
|
return SkySectionedFormSectionComponent;
|
|
720
718
|
}());
|
|
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.
|
|
719
|
+
SkySectionedFormSectionComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.11", ngImport: i0__namespace, type: SkySectionedFormSectionComponent, deps: [{ token: SkySectionedFormService }, { token: SkyVerticalTabsetService }, { token: i0__namespace.ChangeDetectorRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
|
|
720
|
+
SkySectionedFormSectionComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.11", type: SkySectionedFormSectionComponent, selector: "sky-sectioned-form-section", inputs: { heading: "heading", itemCount: "itemCount", active: "active" }, providers: [SkySectionedFormService], viewQueries: [{ propertyName: "tab", first: true, predicate: SkyVerticalTabComponent, descendants: true }], ngImport: i0__namespace, template: "<sky-vertical-tab\n [active]=\"active\"\n [ariaControls]=\"sectionContentId\"\n [ariaInvalid]=\"fieldInvalid\"\n [ariaRequired]=\"fieldRequired\"\n [errorIndicator]=\"fieldInvalid\"\n [ngClass]=\"{\n 'sky-tab-field-required': fieldRequired\n }\"\n [showTabRightArrow]=\"true\"\n [tabHeaderCount]=\"itemCount\"\n [tabHeading]=\"heading\"\n [tabId]=\"sectionTabId\">\n <div\n [attr.aria-labelledby]=\"ariaLabelledby\"\n [attr.role]=\"ariaRole\"\n [id]=\"sectionContentId\"\n #tabContent>\n <ng-content></ng-content>\n </div>\n</sky-vertical-tab>\n", styles: [":host .sky-tab-field-required ::ng-deep .sky-vertical-tab-heading:after{content:\"*\";color:#ef4044;padding-left:5px}\n"], components: [{ type: SkyVerticalTabComponent, selector: "sky-vertical-tab", inputs: ["active", "ariaControls", "ariaInvalid", "ariaRequired", "ariaRole", "disabled", "errorIndicator", "tabHeaderCount", "tabHeading", "showTabRightArrow", "tabId"] }], directives: [{ type: i2__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
|
|
721
|
+
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.11", ngImport: i0__namespace, type: SkySectionedFormSectionComponent, decorators: [{
|
|
724
722
|
type: i0.Component,
|
|
725
723
|
args: [{
|
|
726
724
|
selector: 'sky-sectioned-form-section',
|
|
@@ -764,14 +762,14 @@
|
|
|
764
762
|
}
|
|
765
763
|
return SkyTabsResourcesModule;
|
|
766
764
|
}());
|
|
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.
|
|
765
|
+
SkyTabsResourcesModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.11", ngImport: i0__namespace, type: SkyTabsResourcesModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
|
|
766
|
+
SkyTabsResourcesModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.11", ngImport: i0__namespace, type: SkyTabsResourcesModule, exports: [i3.SkyI18nModule] });
|
|
767
|
+
SkyTabsResourcesModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.11", ngImport: i0__namespace, type: SkyTabsResourcesModule, providers: [{
|
|
770
768
|
provide: i3.SKY_LIB_RESOURCES_PROVIDERS,
|
|
771
769
|
useClass: SkyTabsResourcesProvider,
|
|
772
770
|
multi: true
|
|
773
771
|
}], imports: [i3.SkyI18nModule] });
|
|
774
|
-
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.
|
|
772
|
+
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.11", ngImport: i0__namespace, type: SkyTabsResourcesModule, decorators: [{
|
|
775
773
|
type: i0.NgModule,
|
|
776
774
|
args: [{
|
|
777
775
|
exports: [i3.SkyI18nModule],
|
|
@@ -869,8 +867,8 @@
|
|
|
869
867
|
};
|
|
870
868
|
return SkyVerticalTabsetComponent;
|
|
871
869
|
}());
|
|
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.
|
|
870
|
+
SkyVerticalTabsetComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.11", ngImport: i0__namespace, type: SkyVerticalTabsetComponent, deps: [{ token: SkyVerticalTabsetAdapterService }, { token: SkyVerticalTabsetService }, { token: i3__namespace.SkyLibResourcesService }, { token: i0__namespace.ChangeDetectorRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
|
|
871
|
+
SkyVerticalTabsetComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.11", type: SkyVerticalTabsetComponent, selector: "sky-vertical-tabset", inputs: { showTabsText: "showTabsText", ariaRole: "ariaRole", maintainTabContent: "maintainTabContent" }, outputs: { activeChange: "activeChange" }, providers: [
|
|
874
872
|
SkyVerticalTabsetService
|
|
875
873
|
], viewQueries: [{ propertyName: "tabGroups", first: true, predicate: ["groupContainerWrapper"], descendants: true }, { propertyName: "content", first: true, predicate: ["skySideContent"], descendants: true }, { propertyName: "contentWrapper", first: true, predicate: ["contentContainerWrapper"], descendants: true }], ngImport: i0__namespace, template: " <div class=\"sky-vertical-tabset\" (window:resize)=\"tabService.updateContent()\">\n <div\n *ngIf=\"maintainTabContent || tabService.tabsVisible()\"\n #groupContainerWrapper\n class=\"sky-vertical-tabset-group-container\"\n [ngClass]=\"{'sky-vertical-tabset-hidden': !tabService.tabsVisible()}\"\n [attr.role]=\"ariaRole\"\n [@tabGroupEnter]=\"tabService.animationTabsVisibleState\"\n >\n <ng-content></ng-content>\n </div>\n <div\n *ngIf=\"maintainTabContent || tabService.contentVisible()\"\n class=\"sky-vertical-tabset-content\"\n [ngClass]=\"{'sky-vertical-tabset-content-hidden': !tabService.contentVisible()}\"\n [@contentEnter]=\"tabService.animationContentVisibleState\"\n #contentContainerWrapper\n >\n <div #skySideContent></div>\n <button\n *ngIf=\"!tabService.tabsVisible()\"\n (click)=\"tabService.showTabs()\"\n class=\"sky-btn sky-btn-primary sky-vertical-tabset-show-tabs-btn\"\n >\n <sky-icon icon=\"chevron-left\"></sky-icon>\n {{ showTabsText }}\n </button>\n </div>\n</div>\n", styles: [":host .sky-vertical-tabset{display:block;height:auto}:host .sky-vertical-tabset-group-container{border-right:none}:host-context(.sky-responsive-container-xs) .sky-vertical-tabset,:host-context(.sky-responsive-container-sm) .sky-vertical-tabset,:host-context(.sky-responsive-container-md) .sky-vertical-tabset,:host-context(.sky-responsive-container-lg) .sky-vertical-tabset{display:block;height:auto}:host-context(.sky-responsive-container-xs) .sky-vertical-tabset-group-container,:host-context(.sky-responsive-container-sm) .sky-vertical-tabset-group-container,:host-context(.sky-responsive-container-md) .sky-vertical-tabset-group-container,:host-context(.sky-responsive-container-lg) .sky-vertical-tabset-group-container{border-right:none}@media (min-width: 768px){:host .sky-vertical-tabset{display:flex;height:100%}:host .sky-vertical-tabset-group-container{border-right:1px solid #cdcfd2}}:host-context(.sky-responsive-container-sm) .sky-vertical-tabset,:host-context(.sky-responsive-container-md) .sky-vertical-tabset,:host-context(.sky-responsive-container-lg) .sky-vertical-tabset{display:flex;height:100%}:host-context(.sky-responsive-container-sm) .sky-vertical-tabset-group-container,:host-context(.sky-responsive-container-md) .sky-vertical-tabset-group-container,:host-context(.sky-responsive-container-lg) .sky-vertical-tabset-group-container{border-right:1px solid #cdcfd2}.sky-vertical-tabset-hidden{display:none}.sky-vertical-tabset-content{margin:10px 0 0 10px;flex-basis:75%;overflow-y:auto}.sky-vertical-tabset-content-hidden{display:none}.sky-vertical-tabset-show-tabs-btn{margin-top:10px}.sky-vertical-tabset-group-container{flex-basis:25%;overflow-y:auto}:host-context(sky-modal-content >) .sky-vertical-tabset{margin:-15px}:host-context(.sky-theme-modern) .sky-vertical-tabset-content{margin:15px}@media (min-width: 768px){:host-context(.sky-theme-modern) :host .sky-vertical-tabset-content{margin:20px 30px}:host-context(.sky-theme-modern) :host .sky-vertical-tabset-group-container{border-right:1px solid #d2d2d2}}:host-context(.sky-theme-modern) :host-context(.sky-responsive-container-sm) .sky-vertical-tabset-content,:host-context(.sky-theme-modern) :host-context(.sky-responsive-container-md) .sky-vertical-tabset-content,:host-context(.sky-theme-modern) :host-context(.sky-responsive-container-lg) .sky-vertical-tabset-content{margin:20px 30px}:host-context(.sky-theme-modern) :host-context(.sky-responsive-container-sm) .sky-vertical-tabset-group-container,:host-context(.sky-theme-modern) :host-context(.sky-responsive-container-md) .sky-vertical-tabset-group-container,:host-context(.sky-theme-modern) :host-context(.sky-responsive-container-lg) .sky-vertical-tabset-group-container{border-right:1px solid #d2d2d2}.sky-theme-modern .sky-vertical-tabset-content{margin:15px}@media (min-width: 768px){.sky-theme-modern :host .sky-vertical-tabset-content{margin:20px 30px}.sky-theme-modern :host .sky-vertical-tabset-group-container{border-right:1px solid #d2d2d2}}.sky-theme-modern :host-context(.sky-responsive-container-sm) .sky-vertical-tabset-content,.sky-theme-modern :host-context(.sky-responsive-container-md) .sky-vertical-tabset-content,.sky-theme-modern :host-context(.sky-responsive-container-lg) .sky-vertical-tabset-content{margin:20px 30px}.sky-theme-modern :host-context(.sky-responsive-container-sm) .sky-vertical-tabset-group-container,.sky-theme-modern :host-context(.sky-responsive-container-md) .sky-vertical-tabset-group-container,.sky-theme-modern :host-context(.sky-responsive-container-lg) .sky-vertical-tabset-group-container{border-right:1px solid #d2d2d2}\n"], components: [{ type: i4__namespace.λ4, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }], directives: [{ type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], animations: [
|
|
876
874
|
animations.trigger('tabGroupEnter', [
|
|
@@ -886,7 +884,7 @@
|
|
|
886
884
|
])
|
|
887
885
|
])
|
|
888
886
|
], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
|
|
889
|
-
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.
|
|
887
|
+
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.11", ngImport: i0__namespace, type: SkyVerticalTabsetComponent, decorators: [{
|
|
890
888
|
type: i0.Component,
|
|
891
889
|
args: [{
|
|
892
890
|
selector: 'sky-vertical-tabset',
|
|
@@ -992,8 +990,8 @@
|
|
|
992
990
|
};
|
|
993
991
|
return SkyVerticalTabsetGroupComponent;
|
|
994
992
|
}());
|
|
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.
|
|
993
|
+
SkyVerticalTabsetGroupComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.11", ngImport: i0__namespace, type: SkyVerticalTabsetGroupComponent, deps: [{ token: SkyVerticalTabsetService }, { token: i0__namespace.ChangeDetectorRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
|
|
994
|
+
SkyVerticalTabsetGroupComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.11", type: SkyVerticalTabsetGroupComponent, selector: "sky-vertical-tabset-group", inputs: { disabled: "disabled", groupHeading: "groupHeading", open: "open" }, queries: [{ propertyName: "tabs", predicate: SkyVerticalTabComponent }], ngImport: i0__namespace, template: "<div class=\"sky-vertical-tabset-group\">\n <!-- [ngClass] includes font classes for both modern and default styles -->\n <div\n class=\"sky-vertical-tabset-group-header sky-padding-even-default\"\n [ngClass]=\"{\n 'sky-vertical-tabset-group-header-sub-open sky-font-emphasized sky-emphasized': subMenuOpen(),\n 'sky-font-deemphasized': disabled,\n 'sky-deemphasized': disabled,\n 'sky-vertical-tabset-disabled': disabled\n }\"\n (click)=\"toggleMenuOpen()\"\n (keyup.enter)=\"toggleMenuOpen()\"\n [tabIndex]=\"-1\"\n >\n {{ groupHeading }}\n <sky-chevron *skyThemeIf=\"'default'\"\n class=\"sky-vertical-tabset-group-header-chevron\"\n [direction]=\"open ? 'up' : 'down'\"\n [disabled]=\"disabled\"\n (directionChange)=\"toggleMenuOpen()\"\n (keyup.enter)=\"$event.stopPropagation()\"\n >\n </sky-chevron>\n <ng-container *skyThemeIf=\"'modern'\">\n <button *ngIf=\"!open\"\n class=\"sky-btn sky-btn-icon-borderless sky-vertical-tabset-group-header-chevron\"\n type=\"button\"\n >\n <sky-icon\n icon=\"chevron-up\"\n iconType=\"skyux\"\n >\n </sky-icon>\n </button>\n <button *ngIf=\"open\"\n class=\"sky-btn sky-btn-icon-borderless sky-vertical-tabset-group-header-chevron\"\n type=\"button\"\n >\n <sky-icon\n icon=\"chevron-down\"\n iconType=\"skyux\"\n >\n </sky-icon>\n </button>\n </ng-container>\n </div>\n <div\n class=\"sky-vertical-tabset-group-content\"\n *ngIf=\"open\"\n [@tabSlide]\n >\n <ng-content></ng-content>\n </div>\n</div>\n", styles: [".sky-vertical-tabset-group{border-bottom:1px solid #e2e3e4;margin:5px 0 5px 5px}.sky-vertical-tabset-group-header{cursor:pointer;display:flex;justify-content:space-between}.sky-vertical-tabset-group-header:focus-visible{outline:thin dotted;outline:-webkit-focus-ring-color auto 5px}.sky-vertical-tabset-group-content{overflow:hidden;border-top:1px solid #e2e3e4}:host ::ng-deep .sky-vertical-tabset-group-header-chevron>button{font-size:14px!important}.sky-vertical-tabset-disabled{cursor:not-allowed;pointer-events:none}:host-context(.sky-theme-modern) .sky-vertical-tabset-group{border:none;margin:10px 0}:host-context(.sky-theme-modern) .sky-vertical-tabset-group-content{border:none;padding-left:25px}:host-context(.sky-theme-modern) .sky-vertical-tabset-group-header{position:relative}:host-context(.sky-theme-modern) .sky-vertical-tabset-group-header-chevron{position:absolute;top:6px;right:5px}.sky-theme-modern .sky-vertical-tabset-group{border:none;margin:10px 0}.sky-theme-modern .sky-vertical-tabset-group-content{border:none;padding-left:25px}.sky-theme-modern .sky-vertical-tabset-group-header{position:relative}.sky-theme-modern .sky-vertical-tabset-group-header-chevron{position:absolute;top:6px;right:5px}\n"], components: [{ type: i4__namespace.λ2, selector: "sky-chevron", inputs: ["direction", "disabled"], outputs: ["directionChange"] }, { type: i4__namespace.λ4, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }], directives: [{ type: i2__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i4__namespace$1.λ3, selector: "[skyThemeIf]", inputs: ["skyThemeIf"] }, { type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], animations: [
|
|
997
995
|
animations.trigger('tabSlide', [
|
|
998
996
|
animations.transition(':enter', [
|
|
999
997
|
animations.style({
|
|
@@ -1017,7 +1015,7 @@
|
|
|
1017
1015
|
])
|
|
1018
1016
|
])
|
|
1019
1017
|
], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
|
|
1020
|
-
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.
|
|
1018
|
+
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.11", ngImport: i0__namespace, type: SkyVerticalTabsetGroupComponent, decorators: [{
|
|
1021
1019
|
type: i0.Component,
|
|
1022
1020
|
args: [{
|
|
1023
1021
|
selector: 'sky-vertical-tabset-group',
|
|
@@ -1065,8 +1063,8 @@
|
|
|
1065
1063
|
}
|
|
1066
1064
|
return SkyVerticalTabsetModule;
|
|
1067
1065
|
}());
|
|
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.
|
|
1066
|
+
SkyVerticalTabsetModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.11", ngImport: i0__namespace, type: SkyVerticalTabsetModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
|
|
1067
|
+
SkyVerticalTabsetModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.11", ngImport: i0__namespace, type: SkyVerticalTabsetModule, declarations: [SkyVerticalTabsetComponent,
|
|
1070
1068
|
SkyVerticalTabsetGroupComponent,
|
|
1071
1069
|
SkyVerticalTabComponent], imports: [i2.CommonModule,
|
|
1072
1070
|
i4.SkyChevronModule,
|
|
@@ -1076,7 +1074,7 @@
|
|
|
1076
1074
|
i4$1.SkyThemeModule], exports: [SkyVerticalTabsetComponent,
|
|
1077
1075
|
SkyVerticalTabsetGroupComponent,
|
|
1078
1076
|
SkyVerticalTabComponent] });
|
|
1079
|
-
SkyVerticalTabsetModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.
|
|
1077
|
+
SkyVerticalTabsetModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.11", ngImport: i0__namespace, type: SkyVerticalTabsetModule, providers: [
|
|
1080
1078
|
SkyVerticalTabsetAdapterService
|
|
1081
1079
|
], imports: [[
|
|
1082
1080
|
i2.CommonModule,
|
|
@@ -1086,7 +1084,7 @@
|
|
|
1086
1084
|
SkyTabsResourcesModule,
|
|
1087
1085
|
i4$1.SkyThemeModule
|
|
1088
1086
|
]] });
|
|
1089
|
-
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.
|
|
1087
|
+
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.11", ngImport: i0__namespace, type: SkyVerticalTabsetModule, decorators: [{
|
|
1090
1088
|
type: i0.NgModule,
|
|
1091
1089
|
args: [{
|
|
1092
1090
|
declarations: [
|
|
@@ -1118,20 +1116,20 @@
|
|
|
1118
1116
|
}
|
|
1119
1117
|
return SkySectionedFormModule;
|
|
1120
1118
|
}());
|
|
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.
|
|
1119
|
+
SkySectionedFormModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.11", ngImport: i0__namespace, type: SkySectionedFormModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
|
|
1120
|
+
SkySectionedFormModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.11", ngImport: i0__namespace, type: SkySectionedFormModule, declarations: [SkySectionedFormComponent,
|
|
1123
1121
|
SkySectionedFormSectionComponent], imports: [i2.CommonModule,
|
|
1124
1122
|
forms.SkyCheckboxModule,
|
|
1125
1123
|
i4$1.SkyThemeModule,
|
|
1126
1124
|
SkyVerticalTabsetModule], exports: [SkySectionedFormComponent,
|
|
1127
1125
|
SkySectionedFormSectionComponent] });
|
|
1128
|
-
SkySectionedFormModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.
|
|
1126
|
+
SkySectionedFormModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.11", ngImport: i0__namespace, type: SkySectionedFormModule, imports: [[
|
|
1129
1127
|
i2.CommonModule,
|
|
1130
1128
|
forms.SkyCheckboxModule,
|
|
1131
1129
|
i4$1.SkyThemeModule,
|
|
1132
1130
|
SkyVerticalTabsetModule
|
|
1133
1131
|
]] });
|
|
1134
|
-
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.
|
|
1132
|
+
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.11", ngImport: i0__namespace, type: SkySectionedFormModule, decorators: [{
|
|
1135
1133
|
type: i0.NgModule,
|
|
1136
1134
|
args: [{
|
|
1137
1135
|
declarations: [
|
|
@@ -1177,9 +1175,9 @@
|
|
|
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.11", ngImport: i0__namespace, type: SkyTabButtonComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
|
|
1179
|
+
SkyTabButtonComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.11", type: SkyTabButtonComponent, selector: "sky-tab-button", inputs: { active: "active", ariaControls: "ariaControls", buttonHref: "buttonHref", buttonId: "buttonId", buttonText: "buttonText", buttonTextCount: "buttonTextCount", closeable: "closeable", disabled: "disabled", tabStyle: "tabStyle" }, outputs: { buttonClick: "buttonClick", closeClick: "closeClick" }, ngImport: i0__namespace, template: "<div\n class=\"sky-btn-tab-wrapper\"\n [ngClass]=\"{\n 'sky-btn-tab-wrapper-selected': active,\n 'sky-btn-tab-wrapper-disabled': disabled\n }\"\n>\n <a\n class=\"sky-btn-tab\"\n role=\"tab\"\n [attr.aria-controls]=\"ariaControls\"\n [attr.aria-disabled]=\"disabled\"\n [attr.aria-selected]=\"active\"\n [attr.href]=\"buttonHref\"\n [id]=\"buttonId\"\n [ngClass]=\"{\n 'sky-btn-tab-wizard': tabStyle === 'wizard',\n 'sky-btn-tab-selected': active,\n 'sky-btn-tab-disabled': disabled,\n 'sky-tab-btn-closeable': closeable\n }\"\n [tabindex]=\"disabled ? '-1' : '0'\"\n (click)=\"onButtonClick($event)\"\n (keydown.enter)=\"onButtonEnterKeyDown($event)\"\n >\n <span\n class=\"sky-tab-heading\"\n >\n {{ buttonText }}\n <span *ngIf=\"buttonTextCount !== undefined\"\n class=\"sky-tab-header-count\"\n >\n {{ buttonTextCount }}\n </span>\n </span>\n </a>\n\n <button *ngIf=\"closeable\"\n class=\"sky-btn-tab-close\"\n type=\"button\"\n [attr.aria-label]=\"'skyux_tab_close' | skyLibResources:buttonText\"\n [disabled]=\"disabled\"\n [ngClass]=\"{\n 'sky-btn-tab-close-disabled': disabled\n }\"\n (click)=\"onCloseClick($event)\"\n >\n <sky-icon\n icon=\"remove\"\n ></sky-icon>\n </button>\n</div>\n", styles: [".sky-btn-tab-wrapper{display:inline-block;position:relative;margin-right:5px}.sky-btn-tab-wrapper .sky-btn-tab-close{position:absolute;top:10px;right:10px;color:#686c73}.sky-btn-tab-wrapper .sky-btn-tab-close:hover{color:#212327;transition:color .15s}.sky-btn-tab-wrapper.sky-btn-tab-wrapper-selected:not(.sky-btn-tab-wrapper-disabled) .sky-btn-tab-close{color:#fff}.sky-tab-btn-closeable{padding-right:43px}:host-context(.sky-theme-modern) .sky-btn-tab-wrapper{margin-right:10px}:host-context(.sky-theme-modern) .sky-btn-tab-wrapper .sky-btn-tab-close{top:12px;right:10px}:host-context(.sky-theme-modern) .sky-btn-tab-wrapper.sky-btn-tab-wrapper-selected:not(.sky-btn-tab-wrapper-disabled) .sky-btn-tab-close{color:#686c73}:host-context(.sky-theme-modern) .sky-tab-btn-closeable{padding-right:44px}.sky-theme-modern .sky-btn-tab-wrapper{margin-right:10px}.sky-theme-modern .sky-btn-tab-wrapper .sky-btn-tab-close{top:12px;right:10px}.sky-theme-modern .sky-btn-tab-wrapper.sky-btn-tab-wrapper-selected:not(.sky-btn-tab-wrapper-disabled) .sky-btn-tab-close{color:#686c73}.sky-theme-modern .sky-tab-btn-closeable{padding-right:44px}:host-context(.sky-theme-modern.sky-theme-mode-dark) .sky-btn-tab-wrapper .sky-btn-tab-close{color:#eeeeef}:host-context(.sky-theme-modern.sky-theme-mode-dark) .sky-btn-tab-wrapper.sky-btn-tab-wrapper-selected:not(.sky-btn-tab-wrapper-disabled) .sky-btn-tab-close{color:#eeeeef}.sky-theme-modern.sky-theme-mode-dark .sky-btn-tab-wrapper .sky-btn-tab-close{color:#eeeeef}.sky-theme-modern.sky-theme-mode-dark .sky-btn-tab-wrapper.sky-btn-tab-wrapper-selected:not(.sky-btn-tab-wrapper-disabled) .sky-btn-tab-close{color:#eeeeef}\n"], components: [{ type: i4__namespace.λ4, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }], directives: [{ type: i2__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "skyLibResources": i3__namespace.SkyLibResourcesPipe }, changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush, encapsulation: i0__namespace.ViewEncapsulation.None });
|
|
1180
|
+
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.11", ngImport: i0__namespace, type: SkyTabButtonComponent, decorators: [{
|
|
1183
1181
|
type: i0.Component,
|
|
1184
1182
|
args: [{
|
|
1185
1183
|
selector: 'sky-tab-button',
|
|
@@ -1326,9 +1324,9 @@
|
|
|
1326
1324
|
};
|
|
1327
1325
|
return SkyTabsetPermalinkService;
|
|
1328
1326
|
}());
|
|
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.
|
|
1327
|
+
SkyTabsetPermalinkService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.11", 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 });
|
|
1328
|
+
SkyTabsetPermalinkService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.11", ngImport: i0__namespace, type: SkyTabsetPermalinkService });
|
|
1329
|
+
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.11", ngImport: i0__namespace, type: SkyTabsetPermalinkService, decorators: [{
|
|
1332
1330
|
type: i0.Injectable
|
|
1333
1331
|
}], ctorParameters: function () { return [{ type: i1__namespace$1.ActivatedRoute }, { type: i2__namespace.Location }, { type: i1__namespace$1.Router }]; } });
|
|
1334
1332
|
|
|
@@ -1447,9 +1445,9 @@
|
|
|
1447
1445
|
};
|
|
1448
1446
|
return SkyTabsetService;
|
|
1449
1447
|
}());
|
|
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.
|
|
1448
|
+
SkyTabsetService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.11", ngImport: i0__namespace, type: SkyTabsetService, deps: [], target: i0__namespace.ɵɵFactoryTarget.Injectable });
|
|
1449
|
+
SkyTabsetService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.11", ngImport: i0__namespace, type: SkyTabsetService });
|
|
1450
|
+
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.11", ngImport: i0__namespace, type: SkyTabsetService, decorators: [{
|
|
1453
1451
|
type: i0.Injectable
|
|
1454
1452
|
}] });
|
|
1455
1453
|
|
|
@@ -1586,9 +1584,9 @@
|
|
|
1586
1584
|
};
|
|
1587
1585
|
return SkyTabComponent;
|
|
1588
1586
|
}());
|
|
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.
|
|
1587
|
+
SkyTabComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.11", ngImport: i0__namespace, type: SkyTabComponent, deps: [{ token: i0__namespace.ChangeDetectorRef }, { token: SkyTabsetPermalinkService }, { token: SkyTabsetService }], target: i0__namespace.ɵɵFactoryTarget.Component });
|
|
1588
|
+
SkyTabComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.11", 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 });
|
|
1589
|
+
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.11", ngImport: i0__namespace, type: SkyTabComponent, decorators: [{
|
|
1592
1590
|
type: i0.Component,
|
|
1593
1591
|
args: [{
|
|
1594
1592
|
selector: 'sky-tab',
|
|
@@ -1730,9 +1728,9 @@
|
|
|
1730
1728
|
};
|
|
1731
1729
|
return SkyTabsetNavButtonComponent;
|
|
1732
1730
|
}());
|
|
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.
|
|
1731
|
+
SkyTabsetNavButtonComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.11", ngImport: i0__namespace, type: SkyTabsetNavButtonComponent, deps: [{ token: i3__namespace.SkyLibResourcesService }, { token: i0__namespace.ChangeDetectorRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
|
|
1732
|
+
SkyTabsetNavButtonComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.11", 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" });
|
|
1733
|
+
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.11", ngImport: i0__namespace, type: SkyTabsetNavButtonComponent, decorators: [{
|
|
1736
1734
|
type: i0.Component,
|
|
1737
1735
|
args: [{
|
|
1738
1736
|
selector: 'sky-tabset-nav-button',
|
|
@@ -1796,9 +1794,9 @@
|
|
|
1796
1794
|
};
|
|
1797
1795
|
return SkyTabsetAdapterService;
|
|
1798
1796
|
}());
|
|
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.
|
|
1797
|
+
SkyTabsetAdapterService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.11", ngImport: i0__namespace, type: SkyTabsetAdapterService, deps: [], target: i0__namespace.ɵɵFactoryTarget.Injectable });
|
|
1798
|
+
SkyTabsetAdapterService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.11", ngImport: i0__namespace, type: SkyTabsetAdapterService });
|
|
1799
|
+
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.11", ngImport: i0__namespace, type: SkyTabsetAdapterService, decorators: [{
|
|
1802
1800
|
type: i0.Injectable
|
|
1803
1801
|
}] });
|
|
1804
1802
|
|
|
@@ -2173,13 +2171,13 @@
|
|
|
2173
2171
|
};
|
|
2174
2172
|
return SkyTabsetComponent;
|
|
2175
2173
|
}());
|
|
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.
|
|
2174
|
+
SkyTabsetComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.11", 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 });
|
|
2175
|
+
SkyTabsetComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.11", 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
2176
|
SkyTabsetAdapterService,
|
|
2179
2177
|
SkyTabsetPermalinkService,
|
|
2180
2178
|
SkyTabsetService
|
|
2181
2179
|
], queries: [{ propertyName: "tabs", predicate: SkyTabComponent }], ngImport: i0__namespace, template: "<div\n class=\"sky-tabset\"\n role=\"tablist\"\n [attr.aria-label]=\"ariaLabel\"\n [attr.aria-labelledby]=\"ariaLabelledBy\"\n [ngClass]=\"'sky-tabset-mode-' + tabDisplayMode + ' sky-tabset-style-' + tabStyle\"\n (window:resize)=\"onWindowResize()\"\n>\n <span class=\"sky-tabset-dropdown\">\n <sky-dropdown *ngIf=\"tabDisplayMode === 'dropdown'\"\n buttonType=\"tab\"\n >\n <sky-dropdown-button>\n {{ dropdownTriggerButtonText }}\n </sky-dropdown-button>\n <sky-dropdown-menu>\n <sky-dropdown-item *ngFor=\"let tabButton of tabButtons\"\n class=\"sky-tab-dropdown-menu-item\"\n >\n <div\n class=\"sky-tab-dropdown-item\"\n [ngClass]=\"{\n 'sky-tab-dropdown-item-selected': tabButton.active\n }\"\n >\n <ng-container *ngTemplateOutlet=\"tabButtonTemplate; context: {\n $implicit: tabButton\n }\"></ng-container>\n </div>\n </sky-dropdown-item>\n </sky-dropdown-menu>\n </sky-dropdown>\n </span>\n <span\n class=\"sky-tabset-tabs\"\n >\n <ng-container *ngFor=\"let tabButton of tabButtons\">\n <ng-container *ngTemplateOutlet=\"tabButtonTemplate; context: {\n $implicit: tabButton\n }\"></ng-container>\n </ng-container>\n </span>\n <span\n class=\"sky-tabset-btns\"\n >\n <button *ngIf=\"newTab.observers.length > 0\"\n class=\"sky-btn sky-btn-icon sky-tabset-btn-new sky-margin-inline-compact\"\n type=\"button\"\n [attr.aria-label]=\"'skyux_tab_add' | skyLibResources\"\n [skyThemeClass]=\"{\n 'sky-margin-inline-sm': 'modern'\n }\"\n (click)=\"onNewTabClick()\"\n >\n <sky-icon\n icon=\"plus-circle\"\n size=\"lg\"\n >\n </sky-icon>\n </button>\n <button *ngIf=\"openTab.observers.length > 0\"\n class=\"sky-btn sky-btn-icon sky-tabset-btn-open sky-margin-inline-compact\"\n type=\"button\"\n [attr.aria-label]=\"'skyux_tab_open' | skyLibResources\"\n [skyThemeClass]=\"{\n 'sky-margin-inline-sm': 'modern'\n }\"\n (click)=\"onOpenTabClick()\"\n >\n <sky-icon\n icon=\"folder-open-o\"\n size=\"lg\"\n >\n </sky-icon>\n </button>\n </span>\n</div>\n<ng-content></ng-content>\n\n<ng-template\n let-tabButton\n #tabButtonTemplate\n>\n <sky-tab-button\n [active]=\"tabButton.active\"\n [ariaControls]=\"tabButton.ariaControls\"\n [buttonHref]=\"tabButton.buttonHref\"\n [buttonId]=\"tabButton.buttonId\"\n [buttonText]=\"tabButton.buttonText\"\n [buttonTextCount]=\"tabButton.buttonTextCount\"\n [closeable]=\"tabButton.closeable\"\n [disabled]=\"tabButton.disabled\"\n [tabStyle]=\"tabStyle\"\n (buttonClick)=\"onTabButtonClick(tabButton)\"\n (closeClick)=\"onTabCloseClick(tabButton)\"\n ></sky-tab-button>\n</ng-template>\n", styles: [".sky-tabset{align-items:center;border-bottom:2px solid #0974a1;display:flex;list-style-type:none;margin:0;overflow:hidden;padding:0 0 0 15px;white-space:nowrap}.sky-tabset.sky-tabset-style-wizard{border-bottom:none;padding-bottom:10px;padding-left:0}.sky-tabset-btns{order:1;padding-left:10px}.sky-tabset-dropdown{order:0;max-width:100%}.sky-tabset-mode-dropdown{line-height:0}.sky-tabset-mode-dropdown .sky-tabset-tabs{visibility:hidden;order:2}.sky-tab-dropdown-menu-item sky-tab-button{display:flex;min-width:300px}.sky-tab-dropdown-menu-item .sky-dropdown-item{margin:0}.sky-tab-dropdown-menu-item .sky-btn-tab-wrapper{width:100%;margin-right:0}.sky-tab-dropdown-menu-item .sky-btn-tab{margin:0;border-radius:0;width:100%;display:flex}.sky-tab-dropdown-menu-item .sky-btn-tab>.sky-tab-heading{flex:1 1 auto}.sky-tab-dropdown-menu-item .sky-btn-tab>.sky-btn-tab-close{flex:0 1 auto}.sky-tabset-tabs{order:0;white-space:nowrap}.sky-tabset-btn-new,.sky-tabset-btn-open{color:#0974a1}.sky-theme-modern .sky-tabset{border-bottom:1px solid #d2d2d2;overflow:visible}.sky-theme-modern .sky-tab-dropdown-menu-item .sky-btn-tab-wrapper{margin-right:0}\n"], components: [{ type: i4__namespace$2.λ3, selector: "sky-dropdown", inputs: ["buttonStyle", "buttonType", "disabled", "dismissOnBlur", "label", "horizontalAlignment", "messageStream", "title", "trigger"] }, { type: i4__namespace$2.λ2, selector: "sky-dropdown-button" }, { type: i4__namespace$2.λ4, selector: "sky-dropdown-menu", inputs: ["ariaLabelledBy", "ariaRole", "useNativeFocus"], outputs: ["menuChanges"] }, { type: i4__namespace$2.λ1, selector: "sky-dropdown-item", inputs: ["ariaRole"] }, { type: i4__namespace.λ4, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }, { type: SkyTabButtonComponent, selector: "sky-tab-button", inputs: ["active", "ariaControls", "buttonHref", "buttonId", "buttonText", "buttonTextCount", "closeable", "disabled", "tabStyle"], outputs: ["buttonClick", "closeClick"] }], directives: [{ type: i2__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i4__namespace$1.λ2, selector: "[skyThemeClass]", inputs: ["class", "skyThemeClass"] }], pipes: { "skyLibResources": i3__namespace.SkyLibResourcesPipe }, changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush, encapsulation: i0__namespace.ViewEncapsulation.None });
|
|
2182
|
-
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.
|
|
2180
|
+
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.11", ngImport: i0__namespace, type: SkyTabsetComponent, decorators: [{
|
|
2183
2181
|
type: i0.Component,
|
|
2184
2182
|
args: [{
|
|
2185
2183
|
selector: 'sky-tabset',
|
|
@@ -2221,8 +2219,8 @@
|
|
|
2221
2219
|
}
|
|
2222
2220
|
return SkyTabsModule;
|
|
2223
2221
|
}());
|
|
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.
|
|
2222
|
+
SkyTabsModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.11", ngImport: i0__namespace, type: SkyTabsModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
|
|
2223
|
+
SkyTabsModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.11", ngImport: i0__namespace, type: SkyTabsModule, declarations: [SkyTabButtonComponent,
|
|
2226
2224
|
SkyTabComponent,
|
|
2227
2225
|
SkyTabsetComponent,
|
|
2228
2226
|
SkyTabsetNavButtonComponent], imports: [i2.CommonModule,
|
|
@@ -2234,7 +2232,7 @@
|
|
|
2234
2232
|
i4$1.SkyThemeModule], exports: [SkyTabComponent,
|
|
2235
2233
|
SkyTabsetComponent,
|
|
2236
2234
|
SkyTabsetNavButtonComponent] });
|
|
2237
|
-
SkyTabsModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.
|
|
2235
|
+
SkyTabsModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.11", ngImport: i0__namespace, type: SkyTabsModule, imports: [[
|
|
2238
2236
|
i2.CommonModule,
|
|
2239
2237
|
i1$1.RouterModule,
|
|
2240
2238
|
i4$2.SkyDropdownModule,
|
|
@@ -2243,7 +2241,7 @@
|
|
|
2243
2241
|
SkyTabsResourcesModule,
|
|
2244
2242
|
i4$1.SkyThemeModule
|
|
2245
2243
|
]] });
|
|
2246
|
-
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.
|
|
2244
|
+
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.11", ngImport: i0__namespace, type: SkyTabsModule, decorators: [{
|
|
2247
2245
|
type: i0.NgModule,
|
|
2248
2246
|
args: [{
|
|
2249
2247
|
declarations: [
|
|
@@ -2278,15 +2276,15 @@
|
|
|
2278
2276
|
exports.SkySectionedFormService = SkySectionedFormService;
|
|
2279
2277
|
exports.SkyTabsModule = SkyTabsModule;
|
|
2280
2278
|
exports.SkyVerticalTabsetModule = SkyVerticalTabsetModule;
|
|
2281
|
-
exports
|
|
2282
|
-
exports
|
|
2283
|
-
exports
|
|
2284
|
-
exports
|
|
2285
|
-
exports
|
|
2286
|
-
exports
|
|
2287
|
-
exports
|
|
2279
|
+
exports["λ1"] = SkyTabComponent;
|
|
2280
|
+
exports["λ2"] = SkyTabsetComponent;
|
|
2281
|
+
exports["λ3"] = SkyTabsetNavButtonComponent;
|
|
2282
|
+
exports["λ4"] = SkyVerticalTabComponent;
|
|
2283
|
+
exports["λ5"] = SkySectionedFormSectionComponent;
|
|
2284
|
+
exports["λ6"] = SkyVerticalTabsetComponent;
|
|
2285
|
+
exports["λ7"] = SkyVerticalTabsetGroupComponent;
|
|
2288
2286
|
|
|
2289
2287
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
2290
2288
|
|
|
2291
|
-
}))
|
|
2289
|
+
}));
|
|
2292
2290
|
//# sourceMappingURL=skyux-tabs.umd.js.map
|