@skyux/tabs 5.0.0-beta.2 → 5.0.0-beta.3
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.umd.js +102 -84
- package/bundles/skyux-tabs.umd.js.map +1 -1
- package/documentation.json +220 -195
- package/esm2015/modules/sectioned-form/sectioned-form-section.component.js +3 -3
- package/esm2015/modules/sectioned-form/sectioned-form.component.js +4 -4
- package/esm2015/modules/sectioned-form/sectioned-form.module.js +4 -4
- package/esm2015/modules/sectioned-form/sectioned-form.service.js +3 -3
- package/esm2015/modules/shared/sky-tabs-resources.module.js +4 -4
- package/esm2015/modules/tabs/tab-button.component.js +3 -3
- package/esm2015/modules/tabs/tab.component.js +3 -3
- package/esm2015/modules/tabs/tabs.module.js +4 -4
- package/esm2015/modules/tabs/tabset-adapter.service.js +3 -3
- package/esm2015/modules/tabs/tabset-nav-button.component.js +3 -3
- package/esm2015/modules/tabs/tabset-permalink.service.js +3 -3
- package/esm2015/modules/tabs/tabset.component.js +3 -3
- package/esm2015/modules/tabs/tabset.service.js +3 -3
- package/esm2015/modules/vertical-tabset/vertical-tab-media-query.service.js +3 -3
- package/esm2015/modules/vertical-tabset/vertical-tab.component.js +6 -8
- package/esm2015/modules/vertical-tabset/vertical-tabset-adapter.service.js +7 -4
- package/esm2015/modules/vertical-tabset/vertical-tabset-group.component.js +4 -4
- package/esm2015/modules/vertical-tabset/vertical-tabset.component.js +24 -12
- package/esm2015/modules/vertical-tabset/vertical-tabset.module.js +11 -5
- package/esm2015/modules/vertical-tabset/vertical-tabset.service.js +3 -3
- package/fesm2015/skyux-tabs.js +92 -74
- package/fesm2015/skyux-tabs.js.map +1 -1
- package/modules/vertical-tabset/vertical-tabset-adapter.service.d.ts +1 -0
- package/modules/vertical-tabset/vertical-tabset.component.d.ts +4 -1
- package/package.json +8 -8
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
(function (global, factory) {
|
|
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
|
-
(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.
|
|
5
|
-
}(this, (function (exports, i0, i2, animations, rxjs, operators, i1, i4, i4$1,
|
|
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';
|
|
6
6
|
|
|
7
7
|
function _interopNamespace(e) {
|
|
8
8
|
if (e && e.__esModule) return e;
|
|
@@ -29,7 +29,7 @@
|
|
|
29
29
|
var i1__namespace = /*#__PURE__*/_interopNamespace(i1);
|
|
30
30
|
var i4__namespace = /*#__PURE__*/_interopNamespace(i4);
|
|
31
31
|
var i4__namespace$1 = /*#__PURE__*/_interopNamespace(i4$1);
|
|
32
|
-
var
|
|
32
|
+
var i3__namespace = /*#__PURE__*/_interopNamespace(i3);
|
|
33
33
|
var i1__namespace$1 = /*#__PURE__*/_interopNamespace(i1$1);
|
|
34
34
|
var i4__namespace$2 = /*#__PURE__*/_interopNamespace(i4$2);
|
|
35
35
|
|
|
@@ -201,9 +201,9 @@
|
|
|
201
201
|
};
|
|
202
202
|
return SkyVerticalTabsetService;
|
|
203
203
|
}());
|
|
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.
|
|
204
|
+
SkyVerticalTabsetService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: SkyVerticalTabsetService, deps: [{ token: i1__namespace.SkyMediaQueryService }], target: i0__namespace.ɵɵFactoryTarget.Injectable });
|
|
205
|
+
SkyVerticalTabsetService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: SkyVerticalTabsetService });
|
|
206
|
+
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: SkyVerticalTabsetService, decorators: [{
|
|
207
207
|
type: i0.Injectable
|
|
208
208
|
}], ctorParameters: function () { return [{ type: i1__namespace.SkyMediaQueryService }]; } });
|
|
209
209
|
|
|
@@ -274,8 +274,8 @@
|
|
|
274
274
|
};
|
|
275
275
|
return SkySectionedFormComponent;
|
|
276
276
|
}());
|
|
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.
|
|
277
|
+
SkySectionedFormComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: SkySectionedFormComponent, deps: [{ token: SkyVerticalTabsetService }, { token: i0__namespace.ChangeDetectorRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
|
|
278
|
+
SkySectionedFormComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.6", 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
279
|
animations.trigger('tabEnter', [
|
|
280
280
|
animations.transition(HIDDEN_STATE + " => " + VISIBLE_STATE, [
|
|
281
281
|
animations.style({ transform: 'translate(-100%)' }),
|
|
@@ -289,7 +289,7 @@
|
|
|
289
289
|
])
|
|
290
290
|
])
|
|
291
291
|
], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
|
|
292
|
-
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.
|
|
292
|
+
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: SkySectionedFormComponent, decorators: [{
|
|
293
293
|
type: i0.Component,
|
|
294
294
|
args: [{
|
|
295
295
|
selector: 'sky-sectioned-form',
|
|
@@ -388,9 +388,9 @@
|
|
|
388
388
|
};
|
|
389
389
|
return SkyVerticalTabMediaQueryService;
|
|
390
390
|
}());
|
|
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.
|
|
391
|
+
SkyVerticalTabMediaQueryService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: SkyVerticalTabMediaQueryService, deps: [], target: i0__namespace.ɵɵFactoryTarget.Injectable });
|
|
392
|
+
SkyVerticalTabMediaQueryService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: SkyVerticalTabMediaQueryService });
|
|
393
|
+
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: SkyVerticalTabMediaQueryService, decorators: [{
|
|
394
394
|
type: i0.Injectable
|
|
395
395
|
}], ctorParameters: function () { return []; } });
|
|
396
396
|
|
|
@@ -402,6 +402,9 @@
|
|
|
402
402
|
SkyVerticalTabsetAdapterService.prototype.getWidth = function (elementRef) {
|
|
403
403
|
return elementRef.nativeElement.clientWidth;
|
|
404
404
|
};
|
|
405
|
+
SkyVerticalTabsetAdapterService.prototype.scrollToContentTop = function (element) {
|
|
406
|
+
element.nativeElement.scrollTop = 0;
|
|
407
|
+
};
|
|
405
408
|
SkyVerticalTabsetAdapterService.prototype.setResponsiveClass = function (element, breakpoint) {
|
|
406
409
|
var nativeEl = element.nativeElement;
|
|
407
410
|
this.renderer.removeClass(nativeEl, 'sky-responsive-container-xs');
|
|
@@ -431,9 +434,9 @@
|
|
|
431
434
|
};
|
|
432
435
|
return SkyVerticalTabsetAdapterService;
|
|
433
436
|
}());
|
|
434
|
-
SkyVerticalTabsetAdapterService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.
|
|
435
|
-
SkyVerticalTabsetAdapterService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.
|
|
436
|
-
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.
|
|
437
|
+
SkyVerticalTabsetAdapterService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: SkyVerticalTabsetAdapterService, deps: [{ token: i0__namespace.RendererFactory2 }], target: i0__namespace.ɵɵFactoryTarget.Injectable });
|
|
438
|
+
SkyVerticalTabsetAdapterService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: SkyVerticalTabsetAdapterService });
|
|
439
|
+
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: SkyVerticalTabsetAdapterService, decorators: [{
|
|
437
440
|
type: i0.Injectable
|
|
438
441
|
}], ctorParameters: function () { return [{ type: i0__namespace.RendererFactory2 }]; } });
|
|
439
442
|
|
|
@@ -581,16 +584,16 @@
|
|
|
581
584
|
this.verticalTabMediaQueryService.setBreakpointForWidth(width);
|
|
582
585
|
var newBreakpiont = this.verticalTabMediaQueryService.current;
|
|
583
586
|
this.adapterService.setResponsiveClass(this.tabContent, newBreakpiont);
|
|
587
|
+
this.changeRef.markForCheck();
|
|
584
588
|
};
|
|
585
589
|
return SkyVerticalTabComponent;
|
|
586
590
|
}());
|
|
587
|
-
SkyVerticalTabComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.
|
|
588
|
-
SkyVerticalTabComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.
|
|
591
|
+
SkyVerticalTabComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: SkyVerticalTabComponent, deps: [{ token: SkyVerticalTabsetAdapterService }, { token: i0__namespace.ChangeDetectorRef }, { token: SkyVerticalTabsetService }, { token: SkyVerticalTabMediaQueryService }], target: i0__namespace.ɵɵFactoryTarget.Component });
|
|
592
|
+
SkyVerticalTabComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.6", 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: [
|
|
589
593
|
SkyVerticalTabMediaQueryService,
|
|
590
|
-
SkyVerticalTabsetAdapterService,
|
|
591
594
|
{ provide: i1.SkyMediaQueryService, useExisting: SkyVerticalTabMediaQueryService }
|
|
592
|
-
], 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-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
|
|
593
|
-
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.
|
|
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.6", ngImport: i0__namespace, type: SkyVerticalTabComponent, decorators: [{
|
|
594
597
|
type: i0.Component,
|
|
595
598
|
args: [{
|
|
596
599
|
selector: 'sky-vertical-tab',
|
|
@@ -598,7 +601,6 @@
|
|
|
598
601
|
styleUrls: ['./vertical-tab.component.scss'],
|
|
599
602
|
providers: [
|
|
600
603
|
SkyVerticalTabMediaQueryService,
|
|
601
|
-
SkyVerticalTabsetAdapterService,
|
|
602
604
|
{ provide: i1.SkyMediaQueryService, useExisting: SkyVerticalTabMediaQueryService }
|
|
603
605
|
],
|
|
604
606
|
changeDetection: i0.ChangeDetectionStrategy.OnPush
|
|
@@ -660,9 +662,9 @@
|
|
|
660
662
|
};
|
|
661
663
|
return SkySectionedFormService;
|
|
662
664
|
}());
|
|
663
|
-
SkySectionedFormService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.
|
|
664
|
-
SkySectionedFormService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.
|
|
665
|
-
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.
|
|
665
|
+
SkySectionedFormService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: SkySectionedFormService, deps: [], target: i0__namespace.ɵɵFactoryTarget.Injectable });
|
|
666
|
+
SkySectionedFormService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: SkySectionedFormService });
|
|
667
|
+
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: SkySectionedFormService, decorators: [{
|
|
666
668
|
type: i0.Injectable
|
|
667
669
|
}] });
|
|
668
670
|
|
|
@@ -716,9 +718,9 @@
|
|
|
716
718
|
};
|
|
717
719
|
return SkySectionedFormSectionComponent;
|
|
718
720
|
}());
|
|
719
|
-
SkySectionedFormSectionComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.
|
|
720
|
-
SkySectionedFormSectionComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.
|
|
721
|
-
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.
|
|
721
|
+
SkySectionedFormSectionComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: SkySectionedFormSectionComponent, deps: [{ token: SkySectionedFormService }, { token: SkyVerticalTabsetService }, { token: i0__namespace.ChangeDetectorRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
|
|
722
|
+
SkySectionedFormSectionComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.6", type: SkySectionedFormSectionComponent, selector: "sky-sectioned-form-section", inputs: { heading: "heading", itemCount: "itemCount", active: "active" }, providers: [SkySectionedFormService], viewQueries: [{ propertyName: "tab", first: true, predicate: SkyVerticalTabComponent, descendants: true }], ngImport: i0__namespace, template: "<sky-vertical-tab\n [active]=\"active\"\n [ariaControls]=\"sectionContentId\"\n [ariaInvalid]=\"fieldInvalid\"\n [ariaRequired]=\"fieldRequired\"\n [errorIndicator]=\"fieldInvalid\"\n [ngClass]=\"{\n 'sky-tab-field-required': fieldRequired\n }\"\n [showTabRightArrow]=\"true\"\n [tabHeaderCount]=\"itemCount\"\n [tabHeading]=\"heading\"\n [tabId]=\"sectionTabId\">\n <div\n [attr.aria-labelledby]=\"ariaLabelledby\"\n [attr.role]=\"ariaRole\"\n [id]=\"sectionContentId\"\n #tabContent>\n <ng-content></ng-content>\n </div>\n</sky-vertical-tab>\n", styles: [":host .sky-tab-field-required ::ng-deep .sky-vertical-tab-heading:after{content:\"*\";color:#ef4044;padding-left:5px}\n"], components: [{ type: SkyVerticalTabComponent, selector: "sky-vertical-tab", inputs: ["active", "ariaControls", "ariaInvalid", "ariaRequired", "ariaRole", "disabled", "errorIndicator", "tabHeaderCount", "tabHeading", "showTabRightArrow", "tabId"] }], directives: [{ type: i2__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
|
|
723
|
+
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: SkySectionedFormSectionComponent, decorators: [{
|
|
722
724
|
type: i0.Component,
|
|
723
725
|
args: [{
|
|
724
726
|
selector: 'sky-sectioned-form-section',
|
|
@@ -750,7 +752,7 @@
|
|
|
750
752
|
function SkyTabsResourcesProvider() {
|
|
751
753
|
}
|
|
752
754
|
SkyTabsResourcesProvider.prototype.getString = function (localeInfo, name) {
|
|
753
|
-
return
|
|
755
|
+
return i3.getLibStringForLocale(RESOURCES, localeInfo.locale, name);
|
|
754
756
|
};
|
|
755
757
|
return SkyTabsResourcesProvider;
|
|
756
758
|
}());
|
|
@@ -762,19 +764,19 @@
|
|
|
762
764
|
}
|
|
763
765
|
return SkyTabsResourcesModule;
|
|
764
766
|
}());
|
|
765
|
-
SkyTabsResourcesModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.
|
|
766
|
-
SkyTabsResourcesModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.
|
|
767
|
-
SkyTabsResourcesModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.
|
|
768
|
-
provide:
|
|
767
|
+
SkyTabsResourcesModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: SkyTabsResourcesModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
|
|
768
|
+
SkyTabsResourcesModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: SkyTabsResourcesModule, exports: [i3.SkyI18nModule] });
|
|
769
|
+
SkyTabsResourcesModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: SkyTabsResourcesModule, providers: [{
|
|
770
|
+
provide: i3.SKY_LIB_RESOURCES_PROVIDERS,
|
|
769
771
|
useClass: SkyTabsResourcesProvider,
|
|
770
772
|
multi: true
|
|
771
|
-
}], imports: [
|
|
772
|
-
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.
|
|
773
|
+
}], imports: [i3.SkyI18nModule] });
|
|
774
|
+
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: SkyTabsResourcesModule, decorators: [{
|
|
773
775
|
type: i0.NgModule,
|
|
774
776
|
args: [{
|
|
775
|
-
exports: [
|
|
777
|
+
exports: [i3.SkyI18nModule],
|
|
776
778
|
providers: [{
|
|
777
|
-
provide:
|
|
779
|
+
provide: i3.SKY_LIB_RESOURCES_PROVIDERS,
|
|
778
780
|
useClass: SkyTabsResourcesProvider,
|
|
779
781
|
multi: true
|
|
780
782
|
}]
|
|
@@ -782,7 +784,8 @@
|
|
|
782
784
|
}] });
|
|
783
785
|
|
|
784
786
|
var SkyVerticalTabsetComponent = /** @class */ (function () {
|
|
785
|
-
function SkyVerticalTabsetComponent(tabService, resources, changeRef) {
|
|
787
|
+
function SkyVerticalTabsetComponent(adapterService, tabService, resources, changeRef) {
|
|
788
|
+
this.adapterService = adapterService;
|
|
786
789
|
this.tabService = tabService;
|
|
787
790
|
this.resources = resources;
|
|
788
791
|
this.changeRef = changeRef;
|
|
@@ -828,6 +831,9 @@
|
|
|
828
831
|
.pipe(operators.takeUntil(this._ngUnsubscribe))
|
|
829
832
|
.subscribe(function (index) {
|
|
830
833
|
_this.activeChange.emit(index);
|
|
834
|
+
if (_this.contentWrapper) {
|
|
835
|
+
_this.adapterService.scrollToContentTop(_this.contentWrapper);
|
|
836
|
+
}
|
|
831
837
|
_this.changeRef.markForCheck();
|
|
832
838
|
});
|
|
833
839
|
this.tabService.switchingMobile
|
|
@@ -863,8 +869,10 @@
|
|
|
863
869
|
};
|
|
864
870
|
return SkyVerticalTabsetComponent;
|
|
865
871
|
}());
|
|
866
|
-
SkyVerticalTabsetComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.
|
|
867
|
-
SkyVerticalTabsetComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.
|
|
872
|
+
SkyVerticalTabsetComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: SkyVerticalTabsetComponent, deps: [{ token: SkyVerticalTabsetAdapterService }, { token: SkyVerticalTabsetService }, { token: i3__namespace.SkyLibResourcesService }, { token: i0__namespace.ChangeDetectorRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
|
|
873
|
+
SkyVerticalTabsetComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.6", type: SkyVerticalTabsetComponent, selector: "sky-vertical-tabset", inputs: { showTabsText: "showTabsText", ariaRole: "ariaRole", maintainTabContent: "maintainTabContent" }, outputs: { activeChange: "activeChange" }, providers: [
|
|
874
|
+
SkyVerticalTabsetService
|
|
875
|
+
], viewQueries: [{ propertyName: "tabGroups", first: true, predicate: ["groupContainerWrapper"], descendants: true }, { propertyName: "content", first: true, predicate: ["skySideContent"], descendants: true }, { propertyName: "contentWrapper", first: true, predicate: ["contentContainerWrapper"], descendants: true }], ngImport: i0__namespace, template: " <div class=\"sky-vertical-tabset\" (window:resize)=\"tabService.updateContent()\">\n <div\n *ngIf=\"maintainTabContent || tabService.tabsVisible()\"\n #groupContainerWrapper\n class=\"sky-vertical-tabset-group-container\"\n [ngClass]=\"{'sky-vertical-tabset-hidden': !tabService.tabsVisible()}\"\n [attr.role]=\"ariaRole\"\n [@tabGroupEnter]=\"tabService.animationTabsVisibleState\"\n >\n <ng-content></ng-content>\n </div>\n <div\n *ngIf=\"maintainTabContent || tabService.contentVisible()\"\n class=\"sky-vertical-tabset-content\"\n [ngClass]=\"{'sky-vertical-tabset-content-hidden': !tabService.contentVisible()}\"\n [@contentEnter]=\"tabService.animationContentVisibleState\"\n #contentContainerWrapper\n >\n <div #skySideContent></div>\n <button\n *ngIf=\"!tabService.tabsVisible()\"\n (click)=\"tabService.showTabs()\"\n class=\"sky-btn sky-btn-primary sky-vertical-tabset-show-tabs-btn\"\n >\n <sky-icon icon=\"chevron-left\"></sky-icon>\n {{ showTabsText }}\n </button>\n </div>\n</div>\n", styles: [":host .sky-vertical-tabset{display:block;height:auto}:host .sky-vertical-tabset-group-container{border-right:none}:host-context(.sky-responsive-container-xs) .sky-vertical-tabset,:host-context(.sky-responsive-container-sm) .sky-vertical-tabset,:host-context(.sky-responsive-container-md) .sky-vertical-tabset,:host-context(.sky-responsive-container-lg) .sky-vertical-tabset{display:block;height:auto}:host-context(.sky-responsive-container-xs) .sky-vertical-tabset-group-container,:host-context(.sky-responsive-container-sm) .sky-vertical-tabset-group-container,:host-context(.sky-responsive-container-md) .sky-vertical-tabset-group-container,:host-context(.sky-responsive-container-lg) .sky-vertical-tabset-group-container{border-right:none}@media (min-width: 768px){:host .sky-vertical-tabset{display:flex;height:100%}:host .sky-vertical-tabset-group-container{border-right:1px solid #cdcfd2}}:host-context(.sky-responsive-container-sm) .sky-vertical-tabset,:host-context(.sky-responsive-container-md) .sky-vertical-tabset,:host-context(.sky-responsive-container-lg) .sky-vertical-tabset{display:flex;height:100%}:host-context(.sky-responsive-container-sm) .sky-vertical-tabset-group-container,:host-context(.sky-responsive-container-md) .sky-vertical-tabset-group-container,:host-context(.sky-responsive-container-lg) .sky-vertical-tabset-group-container{border-right:1px solid #cdcfd2}.sky-vertical-tabset-hidden{display:none}.sky-vertical-tabset-content{margin:10px 0 0 10px;flex-basis:75%;overflow-y:auto}.sky-vertical-tabset-content-hidden{display:none}.sky-vertical-tabset-show-tabs-btn{margin-top:10px}.sky-vertical-tabset-group-container{flex-basis:25%;overflow-y:auto}:host-context(sky-modal-content >) .sky-vertical-tabset{margin:-15px}:host-context(.sky-theme-modern) .sky-vertical-tabset-content{margin:15px}@media (min-width: 768px){:host-context(.sky-theme-modern) :host .sky-vertical-tabset-content{margin:20px 30px}:host-context(.sky-theme-modern) :host .sky-vertical-tabset-group-container{border-right:1px solid #d2d2d2}}:host-context(.sky-theme-modern) :host-context(.sky-responsive-container-sm) .sky-vertical-tabset-content,:host-context(.sky-theme-modern) :host-context(.sky-responsive-container-md) .sky-vertical-tabset-content,:host-context(.sky-theme-modern) :host-context(.sky-responsive-container-lg) .sky-vertical-tabset-content{margin:20px 30px}:host-context(.sky-theme-modern) :host-context(.sky-responsive-container-sm) .sky-vertical-tabset-group-container,:host-context(.sky-theme-modern) :host-context(.sky-responsive-container-md) .sky-vertical-tabset-group-container,:host-context(.sky-theme-modern) :host-context(.sky-responsive-container-lg) .sky-vertical-tabset-group-container{border-right:1px solid #d2d2d2}.sky-theme-modern .sky-vertical-tabset-content{margin:15px}@media (min-width: 768px){.sky-theme-modern :host .sky-vertical-tabset-content{margin:20px 30px}.sky-theme-modern :host .sky-vertical-tabset-group-container{border-right:1px solid #d2d2d2}}.sky-theme-modern :host-context(.sky-responsive-container-sm) .sky-vertical-tabset-content,.sky-theme-modern :host-context(.sky-responsive-container-md) .sky-vertical-tabset-content,.sky-theme-modern :host-context(.sky-responsive-container-lg) .sky-vertical-tabset-content{margin:20px 30px}.sky-theme-modern :host-context(.sky-responsive-container-sm) .sky-vertical-tabset-group-container,.sky-theme-modern :host-context(.sky-responsive-container-md) .sky-vertical-tabset-group-container,.sky-theme-modern :host-context(.sky-responsive-container-lg) .sky-vertical-tabset-group-container{border-right:1px solid #d2d2d2}\n"], components: [{ type: i4__namespace.λ4, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }], directives: [{ type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], animations: [
|
|
868
876
|
animations.trigger('tabGroupEnter', [
|
|
869
877
|
animations.transition(HIDDEN_STATE + " => " + VISIBLE_STATE, [
|
|
870
878
|
animations.style({ transform: 'translate(-100%)' }),
|
|
@@ -878,13 +886,15 @@
|
|
|
878
886
|
])
|
|
879
887
|
])
|
|
880
888
|
], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
|
|
881
|
-
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.
|
|
889
|
+
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: SkyVerticalTabsetComponent, decorators: [{
|
|
882
890
|
type: i0.Component,
|
|
883
891
|
args: [{
|
|
884
892
|
selector: 'sky-vertical-tabset',
|
|
885
893
|
templateUrl: './vertical-tabset.component.html',
|
|
886
894
|
styleUrls: ['./vertical-tabset.component.scss'],
|
|
887
|
-
providers: [
|
|
895
|
+
providers: [
|
|
896
|
+
SkyVerticalTabsetService
|
|
897
|
+
],
|
|
888
898
|
changeDetection: i0.ChangeDetectionStrategy.OnPush,
|
|
889
899
|
animations: [
|
|
890
900
|
animations.trigger('tabGroupEnter', [
|
|
@@ -901,7 +911,7 @@
|
|
|
901
911
|
])
|
|
902
912
|
]
|
|
903
913
|
}]
|
|
904
|
-
}], ctorParameters: function () { return [{ type: SkyVerticalTabsetService }, { type:
|
|
914
|
+
}], ctorParameters: function () { return [{ type: SkyVerticalTabsetAdapterService }, { type: SkyVerticalTabsetService }, { type: i3__namespace.SkyLibResourcesService }, { type: i0__namespace.ChangeDetectorRef }]; }, propDecorators: { showTabsText: [{
|
|
905
915
|
type: i0.Input
|
|
906
916
|
}], ariaRole: [{
|
|
907
917
|
type: i0.Input
|
|
@@ -911,10 +921,13 @@
|
|
|
911
921
|
type: i0.Output
|
|
912
922
|
}], tabGroups: [{
|
|
913
923
|
type: i0.ViewChild,
|
|
914
|
-
args: ['
|
|
924
|
+
args: ['groupContainerWrapper']
|
|
915
925
|
}], content: [{
|
|
916
926
|
type: i0.ViewChild,
|
|
917
927
|
args: ['skySideContent']
|
|
928
|
+
}], contentWrapper: [{
|
|
929
|
+
type: i0.ViewChild,
|
|
930
|
+
args: ['contentContainerWrapper']
|
|
918
931
|
}] } });
|
|
919
932
|
|
|
920
933
|
var SkyVerticalTabsetGroupComponent = /** @class */ (function () {
|
|
@@ -979,8 +992,8 @@
|
|
|
979
992
|
};
|
|
980
993
|
return SkyVerticalTabsetGroupComponent;
|
|
981
994
|
}());
|
|
982
|
-
SkyVerticalTabsetGroupComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.
|
|
983
|
-
SkyVerticalTabsetGroupComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.
|
|
995
|
+
SkyVerticalTabsetGroupComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: SkyVerticalTabsetGroupComponent, deps: [{ token: SkyVerticalTabsetService }, { token: i0__namespace.ChangeDetectorRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
|
|
996
|
+
SkyVerticalTabsetGroupComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.6", 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: [
|
|
984
997
|
animations.trigger('tabSlide', [
|
|
985
998
|
animations.transition(':enter', [
|
|
986
999
|
animations.style({
|
|
@@ -1004,7 +1017,7 @@
|
|
|
1004
1017
|
])
|
|
1005
1018
|
])
|
|
1006
1019
|
], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
|
|
1007
|
-
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.
|
|
1020
|
+
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: SkyVerticalTabsetGroupComponent, decorators: [{
|
|
1008
1021
|
type: i0.Component,
|
|
1009
1022
|
args: [{
|
|
1010
1023
|
selector: 'sky-vertical-tabset-group',
|
|
@@ -1052,8 +1065,8 @@
|
|
|
1052
1065
|
}
|
|
1053
1066
|
return SkyVerticalTabsetModule;
|
|
1054
1067
|
}());
|
|
1055
|
-
SkyVerticalTabsetModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.
|
|
1056
|
-
SkyVerticalTabsetModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.
|
|
1068
|
+
SkyVerticalTabsetModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: SkyVerticalTabsetModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
|
|
1069
|
+
SkyVerticalTabsetModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: SkyVerticalTabsetModule, declarations: [SkyVerticalTabsetComponent,
|
|
1057
1070
|
SkyVerticalTabsetGroupComponent,
|
|
1058
1071
|
SkyVerticalTabComponent], imports: [i2.CommonModule,
|
|
1059
1072
|
i4.SkyChevronModule,
|
|
@@ -1063,7 +1076,9 @@
|
|
|
1063
1076
|
i4$1.SkyThemeModule], exports: [SkyVerticalTabsetComponent,
|
|
1064
1077
|
SkyVerticalTabsetGroupComponent,
|
|
1065
1078
|
SkyVerticalTabComponent] });
|
|
1066
|
-
SkyVerticalTabsetModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.
|
|
1079
|
+
SkyVerticalTabsetModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: SkyVerticalTabsetModule, providers: [
|
|
1080
|
+
SkyVerticalTabsetAdapterService
|
|
1081
|
+
], imports: [[
|
|
1067
1082
|
i2.CommonModule,
|
|
1068
1083
|
i4.SkyChevronModule,
|
|
1069
1084
|
i4.SkyIconModule,
|
|
@@ -1071,7 +1086,7 @@
|
|
|
1071
1086
|
SkyTabsResourcesModule,
|
|
1072
1087
|
i4$1.SkyThemeModule
|
|
1073
1088
|
]] });
|
|
1074
|
-
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.
|
|
1089
|
+
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: SkyVerticalTabsetModule, decorators: [{
|
|
1075
1090
|
type: i0.NgModule,
|
|
1076
1091
|
args: [{
|
|
1077
1092
|
declarations: [
|
|
@@ -1087,6 +1102,9 @@
|
|
|
1087
1102
|
SkyTabsResourcesModule,
|
|
1088
1103
|
i4$1.SkyThemeModule
|
|
1089
1104
|
],
|
|
1105
|
+
providers: [
|
|
1106
|
+
SkyVerticalTabsetAdapterService
|
|
1107
|
+
],
|
|
1090
1108
|
exports: [
|
|
1091
1109
|
SkyVerticalTabsetComponent,
|
|
1092
1110
|
SkyVerticalTabsetGroupComponent,
|
|
@@ -1100,18 +1118,18 @@
|
|
|
1100
1118
|
}
|
|
1101
1119
|
return SkySectionedFormModule;
|
|
1102
1120
|
}());
|
|
1103
|
-
SkySectionedFormModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.
|
|
1104
|
-
SkySectionedFormModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.
|
|
1121
|
+
SkySectionedFormModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: SkySectionedFormModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
|
|
1122
|
+
SkySectionedFormModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: SkySectionedFormModule, declarations: [SkySectionedFormComponent,
|
|
1105
1123
|
SkySectionedFormSectionComponent], imports: [i2.CommonModule,
|
|
1106
1124
|
forms.SkyCheckboxModule,
|
|
1107
1125
|
SkyVerticalTabsetModule], exports: [SkySectionedFormComponent,
|
|
1108
1126
|
SkySectionedFormSectionComponent] });
|
|
1109
|
-
SkySectionedFormModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.
|
|
1127
|
+
SkySectionedFormModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: SkySectionedFormModule, imports: [[
|
|
1110
1128
|
i2.CommonModule,
|
|
1111
1129
|
forms.SkyCheckboxModule,
|
|
1112
1130
|
SkyVerticalTabsetModule
|
|
1113
1131
|
]] });
|
|
1114
|
-
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.
|
|
1132
|
+
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: SkySectionedFormModule, decorators: [{
|
|
1115
1133
|
type: i0.NgModule,
|
|
1116
1134
|
args: [{
|
|
1117
1135
|
declarations: [
|
|
@@ -1156,9 +1174,9 @@
|
|
|
1156
1174
|
};
|
|
1157
1175
|
return SkyTabButtonComponent;
|
|
1158
1176
|
}());
|
|
1159
|
-
SkyTabButtonComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.
|
|
1160
|
-
SkyTabButtonComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.
|
|
1161
|
-
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.
|
|
1177
|
+
SkyTabButtonComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: SkyTabButtonComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
|
|
1178
|
+
SkyTabButtonComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.6", 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 });
|
|
1179
|
+
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: SkyTabButtonComponent, decorators: [{
|
|
1162
1180
|
type: i0.Component,
|
|
1163
1181
|
args: [{
|
|
1164
1182
|
selector: 'sky-tab-button',
|
|
@@ -1305,9 +1323,9 @@
|
|
|
1305
1323
|
};
|
|
1306
1324
|
return SkyTabsetPermalinkService;
|
|
1307
1325
|
}());
|
|
1308
|
-
SkyTabsetPermalinkService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.
|
|
1309
|
-
SkyTabsetPermalinkService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.
|
|
1310
|
-
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.
|
|
1326
|
+
SkyTabsetPermalinkService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", 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 });
|
|
1327
|
+
SkyTabsetPermalinkService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: SkyTabsetPermalinkService });
|
|
1328
|
+
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: SkyTabsetPermalinkService, decorators: [{
|
|
1311
1329
|
type: i0.Injectable
|
|
1312
1330
|
}], ctorParameters: function () { return [{ type: i1__namespace$1.ActivatedRoute }, { type: i2__namespace.Location }, { type: i1__namespace$1.Router }]; } });
|
|
1313
1331
|
|
|
@@ -1426,9 +1444,9 @@
|
|
|
1426
1444
|
};
|
|
1427
1445
|
return SkyTabsetService;
|
|
1428
1446
|
}());
|
|
1429
|
-
SkyTabsetService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.
|
|
1430
|
-
SkyTabsetService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.
|
|
1431
|
-
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.
|
|
1447
|
+
SkyTabsetService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: SkyTabsetService, deps: [], target: i0__namespace.ɵɵFactoryTarget.Injectable });
|
|
1448
|
+
SkyTabsetService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: SkyTabsetService });
|
|
1449
|
+
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: SkyTabsetService, decorators: [{
|
|
1432
1450
|
type: i0.Injectable
|
|
1433
1451
|
}] });
|
|
1434
1452
|
|
|
@@ -1565,9 +1583,9 @@
|
|
|
1565
1583
|
};
|
|
1566
1584
|
return SkyTabComponent;
|
|
1567
1585
|
}());
|
|
1568
|
-
SkyTabComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.
|
|
1569
|
-
SkyTabComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.
|
|
1570
|
-
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.
|
|
1586
|
+
SkyTabComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: SkyTabComponent, deps: [{ token: i0__namespace.ChangeDetectorRef }, { token: SkyTabsetPermalinkService }, { token: SkyTabsetService }], target: i0__namespace.ɵɵFactoryTarget.Component });
|
|
1587
|
+
SkyTabComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.6", 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 });
|
|
1588
|
+
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: SkyTabComponent, decorators: [{
|
|
1571
1589
|
type: i0.Component,
|
|
1572
1590
|
args: [{
|
|
1573
1591
|
selector: 'sky-tab',
|
|
@@ -1709,15 +1727,15 @@
|
|
|
1709
1727
|
};
|
|
1710
1728
|
return SkyTabsetNavButtonComponent;
|
|
1711
1729
|
}());
|
|
1712
|
-
SkyTabsetNavButtonComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.
|
|
1713
|
-
SkyTabsetNavButtonComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.
|
|
1714
|
-
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.
|
|
1730
|
+
SkyTabsetNavButtonComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: SkyTabsetNavButtonComponent, deps: [{ token: i3__namespace.SkyLibResourcesService }, { token: i0__namespace.ChangeDetectorRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
|
|
1731
|
+
SkyTabsetNavButtonComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.6", 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" });
|
|
1732
|
+
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: SkyTabsetNavButtonComponent, decorators: [{
|
|
1715
1733
|
type: i0.Component,
|
|
1716
1734
|
args: [{
|
|
1717
1735
|
selector: 'sky-tabset-nav-button',
|
|
1718
1736
|
templateUrl: './tabset-nav-button.component.html'
|
|
1719
1737
|
}]
|
|
1720
|
-
}], ctorParameters: function () { return [{ type:
|
|
1738
|
+
}], ctorParameters: function () { return [{ type: i3__namespace.SkyLibResourcesService }, { type: i0__namespace.ChangeDetectorRef }]; }, propDecorators: { tabset: [{
|
|
1721
1739
|
type: i0.Input
|
|
1722
1740
|
}], buttonType: [{
|
|
1723
1741
|
type: i0.Input
|
|
@@ -1775,9 +1793,9 @@
|
|
|
1775
1793
|
};
|
|
1776
1794
|
return SkyTabsetAdapterService;
|
|
1777
1795
|
}());
|
|
1778
|
-
SkyTabsetAdapterService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.
|
|
1779
|
-
SkyTabsetAdapterService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.
|
|
1780
|
-
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.
|
|
1796
|
+
SkyTabsetAdapterService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: SkyTabsetAdapterService, deps: [], target: i0__namespace.ɵɵFactoryTarget.Injectable });
|
|
1797
|
+
SkyTabsetAdapterService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: SkyTabsetAdapterService });
|
|
1798
|
+
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: SkyTabsetAdapterService, decorators: [{
|
|
1781
1799
|
type: i0.Injectable
|
|
1782
1800
|
}] });
|
|
1783
1801
|
|
|
@@ -2152,13 +2170,13 @@
|
|
|
2152
2170
|
};
|
|
2153
2171
|
return SkyTabsetComponent;
|
|
2154
2172
|
}());
|
|
2155
|
-
SkyTabsetComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.
|
|
2156
|
-
SkyTabsetComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.
|
|
2173
|
+
SkyTabsetComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", 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 });
|
|
2174
|
+
SkyTabsetComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.6", 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: [
|
|
2157
2175
|
SkyTabsetAdapterService,
|
|
2158
2176
|
SkyTabsetPermalinkService,
|
|
2159
2177
|
SkyTabsetService
|
|
2160
|
-
], 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":
|
|
2161
|
-
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.
|
|
2178
|
+
], 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 });
|
|
2179
|
+
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: SkyTabsetComponent, decorators: [{
|
|
2162
2180
|
type: i0.Component,
|
|
2163
2181
|
args: [{
|
|
2164
2182
|
selector: 'sky-tabset',
|
|
@@ -2200,29 +2218,29 @@
|
|
|
2200
2218
|
}
|
|
2201
2219
|
return SkyTabsModule;
|
|
2202
2220
|
}());
|
|
2203
|
-
SkyTabsModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.
|
|
2204
|
-
SkyTabsModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.
|
|
2221
|
+
SkyTabsModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: SkyTabsModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
|
|
2222
|
+
SkyTabsModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: SkyTabsModule, declarations: [SkyTabButtonComponent,
|
|
2205
2223
|
SkyTabComponent,
|
|
2206
2224
|
SkyTabsetComponent,
|
|
2207
2225
|
SkyTabsetNavButtonComponent], imports: [i2.CommonModule,
|
|
2208
2226
|
i1$1.RouterModule,
|
|
2209
2227
|
i4$2.SkyDropdownModule,
|
|
2210
|
-
|
|
2228
|
+
i3.SkyI18nModule,
|
|
2211
2229
|
i4.SkyIconModule,
|
|
2212
2230
|
SkyTabsResourcesModule,
|
|
2213
2231
|
i4$1.SkyThemeModule], exports: [SkyTabComponent,
|
|
2214
2232
|
SkyTabsetComponent,
|
|
2215
2233
|
SkyTabsetNavButtonComponent] });
|
|
2216
|
-
SkyTabsModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.
|
|
2234
|
+
SkyTabsModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: SkyTabsModule, imports: [[
|
|
2217
2235
|
i2.CommonModule,
|
|
2218
2236
|
i1$1.RouterModule,
|
|
2219
2237
|
i4$2.SkyDropdownModule,
|
|
2220
|
-
|
|
2238
|
+
i3.SkyI18nModule,
|
|
2221
2239
|
i4.SkyIconModule,
|
|
2222
2240
|
SkyTabsResourcesModule,
|
|
2223
2241
|
i4$1.SkyThemeModule
|
|
2224
2242
|
]] });
|
|
2225
|
-
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.
|
|
2243
|
+
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: SkyTabsModule, decorators: [{
|
|
2226
2244
|
type: i0.NgModule,
|
|
2227
2245
|
args: [{
|
|
2228
2246
|
declarations: [
|
|
@@ -2235,7 +2253,7 @@
|
|
|
2235
2253
|
i2.CommonModule,
|
|
2236
2254
|
i1$1.RouterModule,
|
|
2237
2255
|
i4$2.SkyDropdownModule,
|
|
2238
|
-
|
|
2256
|
+
i3.SkyI18nModule,
|
|
2239
2257
|
i4.SkyIconModule,
|
|
2240
2258
|
SkyTabsResourcesModule,
|
|
2241
2259
|
i4$1.SkyThemeModule
|