@skyux/tabs 6.0.0-beta.2 → 6.0.0-beta.5
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/documentation.json +1 -1
- package/esm2020/lib/modules/sectioned-form/sectioned-form-section.component.mjs +3 -3
- package/esm2020/lib/modules/sectioned-form/sectioned-form.component.mjs +3 -3
- package/esm2020/lib/modules/sectioned-form/sectioned-form.module.mjs +4 -4
- package/esm2020/lib/modules/sectioned-form/sectioned-form.service.mjs +3 -3
- package/esm2020/lib/modules/shared/sky-tabs-resources.module.mjs +4 -4
- package/esm2020/lib/modules/tabs/tab-button.component.mjs +3 -3
- package/esm2020/lib/modules/tabs/tab.component.mjs +3 -3
- package/esm2020/lib/modules/tabs/tabs.module.mjs +4 -4
- package/esm2020/lib/modules/tabs/tabset-adapter.service.mjs +3 -3
- package/esm2020/lib/modules/tabs/tabset-nav-button.component.mjs +3 -3
- package/esm2020/lib/modules/tabs/tabset-permalink.service.mjs +4 -6
- package/esm2020/lib/modules/tabs/tabset.component.mjs +4 -5
- package/esm2020/lib/modules/tabs/tabset.service.mjs +3 -3
- package/esm2020/lib/modules/vertical-tabset/vertical-tab-media-query.service.mjs +3 -3
- package/esm2020/lib/modules/vertical-tabset/vertical-tab.component.mjs +3 -3
- package/esm2020/lib/modules/vertical-tabset/vertical-tabset-adapter.service.mjs +3 -3
- package/esm2020/lib/modules/vertical-tabset/vertical-tabset-group.component.mjs +3 -3
- package/esm2020/lib/modules/vertical-tabset/vertical-tabset.component.mjs +3 -3
- package/esm2020/lib/modules/vertical-tabset/vertical-tabset.module.mjs +4 -4
- package/esm2020/lib/modules/vertical-tabset/vertical-tabset.service.mjs +3 -3
- package/fesm2015/skyux-tabs.mjs +64 -67
- package/fesm2015/skyux-tabs.mjs.map +1 -1
- package/fesm2020/skyux-tabs.mjs +64 -67
- package/fesm2020/skyux-tabs.mjs.map +1 -1
- package/package.json +14 -14
package/fesm2020/skyux-tabs.mjs
CHANGED
|
@@ -46,16 +46,16 @@ class SkyTabsResourcesProvider {
|
|
|
46
46
|
*/
|
|
47
47
|
class SkyTabsResourcesModule {
|
|
48
48
|
}
|
|
49
|
-
SkyTabsResourcesModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2
|
|
50
|
-
SkyTabsResourcesModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2
|
|
51
|
-
SkyTabsResourcesModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2
|
|
49
|
+
SkyTabsResourcesModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: SkyTabsResourcesModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
50
|
+
SkyTabsResourcesModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: SkyTabsResourcesModule, exports: [SkyI18nModule] });
|
|
51
|
+
SkyTabsResourcesModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: SkyTabsResourcesModule, providers: [
|
|
52
52
|
{
|
|
53
53
|
provide: SKY_LIB_RESOURCES_PROVIDERS,
|
|
54
54
|
useClass: SkyTabsResourcesProvider,
|
|
55
55
|
multi: true,
|
|
56
56
|
},
|
|
57
57
|
], imports: [SkyI18nModule] });
|
|
58
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2
|
|
58
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: SkyTabsResourcesModule, decorators: [{
|
|
59
59
|
type: NgModule,
|
|
60
60
|
args: [{
|
|
61
61
|
exports: [SkyI18nModule],
|
|
@@ -131,9 +131,9 @@ class SkyVerticalTabMediaQueryService {
|
|
|
131
131
|
this.currentSubject.complete();
|
|
132
132
|
}
|
|
133
133
|
}
|
|
134
|
-
SkyVerticalTabMediaQueryService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2
|
|
135
|
-
SkyVerticalTabMediaQueryService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.2
|
|
136
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2
|
|
134
|
+
SkyVerticalTabMediaQueryService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: SkyVerticalTabMediaQueryService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
135
|
+
SkyVerticalTabMediaQueryService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: SkyVerticalTabMediaQueryService });
|
|
136
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: SkyVerticalTabMediaQueryService, decorators: [{
|
|
137
137
|
type: Injectable
|
|
138
138
|
}], ctorParameters: function () { return []; } });
|
|
139
139
|
|
|
@@ -176,9 +176,9 @@ class SkyVerticalTabsetAdapterService {
|
|
|
176
176
|
this.renderer.addClass(nativeEl, newClass);
|
|
177
177
|
}
|
|
178
178
|
}
|
|
179
|
-
SkyVerticalTabsetAdapterService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2
|
|
180
|
-
SkyVerticalTabsetAdapterService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.2
|
|
181
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2
|
|
179
|
+
SkyVerticalTabsetAdapterService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: SkyVerticalTabsetAdapterService, deps: [{ token: i0.RendererFactory2 }], target: i0.ɵɵFactoryTarget.Injectable });
|
|
180
|
+
SkyVerticalTabsetAdapterService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: SkyVerticalTabsetAdapterService });
|
|
181
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: SkyVerticalTabsetAdapterService, decorators: [{
|
|
182
182
|
type: Injectable
|
|
183
183
|
}], ctorParameters: function () { return [{ type: i0.RendererFactory2 }]; } });
|
|
184
184
|
|
|
@@ -339,9 +339,9 @@ class SkyVerticalTabsetService {
|
|
|
339
339
|
this.indexChanged.next(this.activeIndex);
|
|
340
340
|
}
|
|
341
341
|
}
|
|
342
|
-
SkyVerticalTabsetService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2
|
|
343
|
-
SkyVerticalTabsetService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.2
|
|
344
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2
|
|
342
|
+
SkyVerticalTabsetService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: SkyVerticalTabsetService, deps: [{ token: i1.SkyMediaQueryService }], target: i0.ɵɵFactoryTarget.Injectable });
|
|
343
|
+
SkyVerticalTabsetService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: SkyVerticalTabsetService });
|
|
344
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: SkyVerticalTabsetService, decorators: [{
|
|
345
345
|
type: Injectable
|
|
346
346
|
}], ctorParameters: function () { return [{ type: i1.SkyMediaQueryService }]; } });
|
|
347
347
|
|
|
@@ -485,15 +485,15 @@ class SkyVerticalTabComponent {
|
|
|
485
485
|
this.changeRef.markForCheck();
|
|
486
486
|
}
|
|
487
487
|
}
|
|
488
|
-
SkyVerticalTabComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2
|
|
489
|
-
SkyVerticalTabComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2
|
|
488
|
+
SkyVerticalTabComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: SkyVerticalTabComponent, deps: [{ token: SkyVerticalTabsetAdapterService }, { token: i0.ChangeDetectorRef }, { token: SkyVerticalTabsetService }, { token: SkyVerticalTabMediaQueryService }], target: i0.ɵɵFactoryTarget.Component });
|
|
489
|
+
SkyVerticalTabComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.2", type: SkyVerticalTabComponent, selector: "sky-vertical-tab", inputs: { active: "active", ariaControls: "ariaControls", ariaRole: "ariaRole", disabled: "disabled", errorIndicator: "errorIndicator", tabHeaderCount: "tabHeaderCount", tabHeading: "tabHeading", showTabRightArrow: "showTabRightArrow", tabId: "tabId" }, host: { listeners: { "window:resize": "onWindowResize()" } }, providers: [
|
|
490
490
|
SkyVerticalTabMediaQueryService,
|
|
491
491
|
{
|
|
492
492
|
provide: SkyMediaQueryService,
|
|
493
493
|
useExisting: SkyVerticalTabMediaQueryService,
|
|
494
494
|
},
|
|
495
495
|
], viewQueries: [{ propertyName: "tabContent", first: true, predicate: ["tabContentWrapper"], descendants: true }], ngImport: i0, template: "<a\n class=\"sky-vertical-tab\"\n [attr.aria-controls]=\"isMobile ? null : ariaControls || tabContentPane.id\"\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)=\"onTabButtonKeyUp($event)\"\n>\n <div class=\"sky-vertical-tab-display\">\n <div class=\"sky-vertical-tab-heading\">\n <span class=\"sky-vertical-tab-heading-value\">{{ tabHeading }}</span>\n <span\n class=\"sky-vertical-tab-count\"\n *ngIf=\"tabHeaderCount || tabHeaderCount === 0\"\n >\n ({{ tabHeaderCount }})\n </span>\n </div>\n <sky-status-indicator\n *ngIf=\"errorIndicator\"\n class=\"sky-vertical-tab-heading-error\"\n descriptionType=\"error\"\n indicatorType=\"danger\"\n ></sky-status-indicator>\n <sky-icon\n *ngIf=\"showTabRightArrow\"\n class=\"sky-vertical-tab-right-arrow\"\n icon=\"chevron-right\"\n >\n </sky-icon>\n </div>\n</a>\n\n<div #tabContentWrapper>\n <div\n class=\"sky-vertical-tab-content-pane\"\n role=\"tabpanel\"\n tabindex=\"0\"\n skyId\n [attr.aria-labelledby]=\"tabId\"\n [ngClass]=\"{ 'sky-vertical-tab-hidden': !active }\"\n #tabContentPane\n >\n <ng-content></ng-content>\n\n <div></div>\n </div>\n</div>\n", styles: [".sky-vertical-tab{cursor:pointer;padding:7px 0 7px 10px;margin:5px 0 5px 10px;display:flex;text-decoration:none}.sky-vertical-tab:not(.sky-deemphasized){color:#212327}.sky-vertical-tab:hover{background-color:#eeeeef}.sky-vertical-tab:focus-visible{outline:thin dotted;outline:-webkit-focus-ring-color auto 5px}.sky-vertical-tab:hover .sky-vertical-tab-right-arrow{color:#979ba2}.sky-vertical-tab-active{background-color:#eeeeef;color:#212327;padding-left:6px;border-left:4px solid #00b4f1}.sky-vertical-tab-hidden{display:none}.sky-vertical-tab-display{display:flex;flex-grow:1}.sky-vertical-tab-heading-error{padding-left:5px}.sky-vertical-tab-count{margin-left:5px}.sky-vertical-tab-disabled{cursor:not-allowed;pointer-events:none}.sky-vertical-tab-right-arrow{padding:3px 10px 0 0;color:#cdcfd2}:host-context(.sky-theme-modern) .sky-vertical-tab{color:#686c73;cursor:pointer;padding:10px 0 10px 10px;margin:10px 0 20px 10px}:host-context(.sky-theme-modern) .sky-vertical-tab:not(.sky-vertical-tab-active):not(:active):hover{color:#212327;background-color:transparent;padding-left:9px;border-left:1px solid #00b4f1}:host-context(.sky-theme-modern) .sky-vertical-tab:not(:active):focus-visible{outline:solid 2px #1870B8;outline-offset:-2px;box-shadow:0 1px 8px #0000004d}:host-context(.sky-theme-modern) .sky-vertical-tab:focus:active:hover{outline:none;background:none}:host-context(.sky-theme-modern) .sky-vertical-tab:active{border-left:3px solid #00b4f1;color:#212327;padding-left:7px}:host-context(.sky-theme-modern) .sky-vertical-tab .sky-vertical-tab-heading-error{padding-left:10px;position:relative;top:-2px}:host-context(.sky-theme-modern) .sky-vertical-tab-active{background:none;color:#212327;padding-left:7px;border-left:3px solid #1870B8}.sky-theme-modern .sky-vertical-tab{color:#686c73;cursor:pointer;padding:10px 0 10px 10px;margin:10px 0 20px 10px}.sky-theme-modern .sky-vertical-tab:not(.sky-vertical-tab-active):not(:active):hover{color:#212327;background-color:transparent;padding-left:9px;border-left:1px solid #00b4f1}.sky-theme-modern .sky-vertical-tab:not(:active):focus-visible{outline:solid 2px #1870B8;outline-offset:-2px;box-shadow:0 1px 8px #0000004d}.sky-theme-modern .sky-vertical-tab:focus:active:hover{outline:none;background:none}.sky-theme-modern .sky-vertical-tab:active{border-left:3px solid #00b4f1;color:#212327;padding-left:7px}.sky-theme-modern .sky-vertical-tab .sky-vertical-tab-heading-error{padding-left:10px;position:relative;top:-2px}.sky-theme-modern .sky-vertical-tab-active{background:none;color:#212327;padding-left:7px;border-left:3px solid #1870B8}\n"], components: [{ type: i4.λ10, selector: "sky-status-indicator", inputs: ["indicatorType", "descriptionType", "customDescription"] }, { type: i4.λ4, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }], directives: [{ type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.λ2, selector: "[skyId]", exportAs: ["skyId"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
496
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2
|
|
496
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: SkyVerticalTabComponent, decorators: [{
|
|
497
497
|
type: Component,
|
|
498
498
|
args: [{ selector: 'sky-vertical-tab', providers: [
|
|
499
499
|
SkyVerticalTabMediaQueryService,
|
|
@@ -584,9 +584,9 @@ class SkyVerticalTabsetGroupComponent {
|
|
|
584
584
|
return this.tabs && this.tabs.find((t) => t.active) !== undefined;
|
|
585
585
|
}
|
|
586
586
|
}
|
|
587
|
-
SkyVerticalTabsetGroupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2
|
|
588
|
-
SkyVerticalTabsetGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2
|
|
589
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2
|
|
587
|
+
SkyVerticalTabsetGroupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: SkyVerticalTabsetGroupComponent, deps: [{ token: SkyVerticalTabsetService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
588
|
+
SkyVerticalTabsetGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.2", type: SkyVerticalTabsetGroupComponent, selector: "sky-vertical-tabset-group", inputs: { disabled: "disabled", groupHeading: "groupHeading", open: "open" }, queries: [{ propertyName: "tabs", predicate: SkyVerticalTabComponent }], ngImport: i0, 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\"\n [ngClass]=\"{\n 'sky-vertical-tabset-group-header-sub-open sky-font-emphasized sky-emphasized':\n subMenuOpen(),\n 'sky-font-deemphasized': disabled,\n 'sky-deemphasized': disabled,\n 'sky-vertical-tabset-disabled': disabled\n }\"\n [tabIndex]=\"-1\"\n >\n <button\n class=\"sky-padding-even-default\"\n type=\"button\"\n skyId\n [attr.aria-controls]=\"groupContent.id\"\n [attr.aria-expanded]=\"open\"\n (click)=\"toggleMenuOpen()\"\n #groupHeadingButton\n >\n {{ groupHeading }}\n <sky-expansion-indicator\n class=\"sky-vertical-tabset-group-expansion-indicator\"\n [direction]=\"open ? 'up' : 'down'\"\n >\n </sky-expansion-indicator>\n </button>\n </div>\n <div\n class=\"sky-vertical-tabset-group-content\"\n role=\"region\"\n skyId\n [attr.labelledby]=\"groupHeadingButton.id\"\n [@skyAnimationSlide]=\"open ? 'down' : 'up'\"\n #groupContent\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 button{cursor:pointer;display:flex;justify-content:space-between;border:none;width:100%;text-align:left;background:none}.sky-vertical-tabset-group-content{overflow:hidden;border-top:1px solid #e2e3e4}:host ::ng-deep .sky-vertical-tabset-group-expansion-indicator>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-expansion-indicator{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-expansion-indicator{position:absolute;top:6px;right:5px}\n"], components: [{ type: i4.λ15, selector: "sky-expansion-indicator", inputs: ["direction"] }], directives: [{ type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1.λ2, selector: "[skyId]", exportAs: ["skyId"] }], animations: [skyAnimationSlide], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
589
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: SkyVerticalTabsetGroupComponent, decorators: [{
|
|
590
590
|
type: Component,
|
|
591
591
|
args: [{ selector: 'sky-vertical-tabset-group', changeDetection: ChangeDetectionStrategy.OnPush, animations: [skyAnimationSlide], 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\"\n [ngClass]=\"{\n 'sky-vertical-tabset-group-header-sub-open sky-font-emphasized sky-emphasized':\n subMenuOpen(),\n 'sky-font-deemphasized': disabled,\n 'sky-deemphasized': disabled,\n 'sky-vertical-tabset-disabled': disabled\n }\"\n [tabIndex]=\"-1\"\n >\n <button\n class=\"sky-padding-even-default\"\n type=\"button\"\n skyId\n [attr.aria-controls]=\"groupContent.id\"\n [attr.aria-expanded]=\"open\"\n (click)=\"toggleMenuOpen()\"\n #groupHeadingButton\n >\n {{ groupHeading }}\n <sky-expansion-indicator\n class=\"sky-vertical-tabset-group-expansion-indicator\"\n [direction]=\"open ? 'up' : 'down'\"\n >\n </sky-expansion-indicator>\n </button>\n </div>\n <div\n class=\"sky-vertical-tabset-group-content\"\n role=\"region\"\n skyId\n [attr.labelledby]=\"groupHeadingButton.id\"\n [@skyAnimationSlide]=\"open ? 'down' : 'up'\"\n #groupContent\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 button{cursor:pointer;display:flex;justify-content:space-between;border:none;width:100%;text-align:left;background:none}.sky-vertical-tabset-group-content{overflow:hidden;border-top:1px solid #e2e3e4}:host ::ng-deep .sky-vertical-tabset-group-expansion-indicator>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-expansion-indicator{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-expansion-indicator{position:absolute;top:6px;right:5px}\n"] }]
|
|
592
592
|
}], ctorParameters: function () { return [{ type: SkyVerticalTabsetService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { disabled: [{
|
|
@@ -683,8 +683,8 @@ class SkyVerticalTabsetComponent {
|
|
|
683
683
|
this._ngUnsubscribe.complete();
|
|
684
684
|
}
|
|
685
685
|
}
|
|
686
|
-
SkyVerticalTabsetComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2
|
|
687
|
-
SkyVerticalTabsetComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2
|
|
686
|
+
SkyVerticalTabsetComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: SkyVerticalTabsetComponent, deps: [{ token: SkyVerticalTabsetAdapterService }, { token: SkyVerticalTabsetService }, { token: i3.SkyLibResourcesService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
687
|
+
SkyVerticalTabsetComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.2", type: SkyVerticalTabsetComponent, selector: "sky-vertical-tabset", inputs: { showTabsText: "showTabsText", ariaLabel: "ariaLabel", ariaLabelledBy: "ariaLabelledBy", ariaRole: "ariaRole", maintainTabContent: "maintainTabContent" }, outputs: { activeChange: "activeChange" }, providers: [SkyVerticalTabsetService], viewQueries: [{ propertyName: "tabGroups", first: true, predicate: ["groupContainerWrapper"], descendants: true }, { propertyName: "content", first: true, predicate: ["skySideContent"], descendants: true }, { propertyName: "contentWrapper", first: true, predicate: ["contentContainerWrapper"], descendants: true }], ngImport: i0, template: "<div class=\"sky-vertical-tabset\" (window:resize)=\"tabService.updateContent()\">\n <div\n *ngIf=\"maintainTabContent || tabService.tabsVisible()\"\n aria-orientation=\"vertical\"\n class=\"sky-vertical-tabset-group-container\"\n [ngClass]=\"{ 'sky-vertical-tabset-hidden': !tabService.tabsVisible() }\"\n [attr.aria-label]=\"ariaLabel\"\n [attr.aria-labelledby]=\"ariaLabelledBy\"\n [attr.role]=\"ariaRole\"\n [@tabGroupEnter]=\"tabService.animationTabsVisibleState\"\n #groupContainerWrapper\n >\n <ng-content></ng-content>\n </div>\n <div\n *ngIf=\"maintainTabContent || tabService.contentVisible()\"\n class=\"sky-vertical-tabset-content\"\n [ngClass]=\"{\n 'sky-vertical-tabset-content-hidden': !tabService.contentVisible()\n }\"\n [@contentEnter]=\"tabService.animationContentVisibleState\"\n #contentContainerWrapper\n >\n <div #skySideContent></div>\n <button\n *ngIf=\"!tabService.tabsVisible()\"\n (click)=\"tabService.showTabs()\"\n class=\"sky-btn sky-btn-primary sky-vertical-tabset-show-tabs-btn\"\n >\n <sky-icon icon=\"chevron-left\"></sky-icon>\n {{ showTabsText }}\n </button>\n </div>\n</div>\n", styles: [":host .sky-vertical-tabset{display:block;height:auto}:host .sky-vertical-tabset-group-container{border-right:none}:host-context(.sky-responsive-container-xs) .sky-vertical-tabset,:host-context(.sky-responsive-container-sm) .sky-vertical-tabset,:host-context(.sky-responsive-container-md) .sky-vertical-tabset,:host-context(.sky-responsive-container-lg) .sky-vertical-tabset{display:block;height:auto}:host-context(.sky-responsive-container-xs) .sky-vertical-tabset-group-container,:host-context(.sky-responsive-container-sm) .sky-vertical-tabset-group-container,:host-context(.sky-responsive-container-md) .sky-vertical-tabset-group-container,:host-context(.sky-responsive-container-lg) .sky-vertical-tabset-group-container{border-right:none}@media (min-width: 768px){:host .sky-vertical-tabset{display:flex;height:100%}:host .sky-vertical-tabset-group-container{border-right:1px solid #cdcfd2}}:host-context(.sky-responsive-container-sm) .sky-vertical-tabset,:host-context(.sky-responsive-container-md) .sky-vertical-tabset,:host-context(.sky-responsive-container-lg) .sky-vertical-tabset{display:flex;height:100%}:host-context(.sky-responsive-container-sm) .sky-vertical-tabset-group-container,:host-context(.sky-responsive-container-md) .sky-vertical-tabset-group-container,:host-context(.sky-responsive-container-lg) .sky-vertical-tabset-group-container{border-right:1px solid #cdcfd2}.sky-vertical-tabset-hidden{display:none}.sky-vertical-tabset-content{margin:10px 0 0 10px;flex-basis:75%;overflow-y:auto}.sky-vertical-tabset-content-hidden{display:none}.sky-vertical-tabset-show-tabs-btn{margin-top:10px}.sky-vertical-tabset-group-container{flex-basis:25%;overflow-y:auto}:host-context(sky-modal-content >) .sky-vertical-tabset{margin:-15px}:host-context(.sky-theme-modern) .sky-vertical-tabset-content{margin:15px}@media (min-width: 768px){:host-context(.sky-theme-modern) :host .sky-vertical-tabset-content{margin:20px 30px}:host-context(.sky-theme-modern) :host .sky-vertical-tabset-group-container{border-right:1px solid #d2d2d2}}:host-context(.sky-theme-modern) :host-context(.sky-responsive-container-sm) .sky-vertical-tabset-content,:host-context(.sky-theme-modern) :host-context(.sky-responsive-container-md) .sky-vertical-tabset-content,:host-context(.sky-theme-modern) :host-context(.sky-responsive-container-lg) .sky-vertical-tabset-content{margin:20px 30px}:host-context(.sky-theme-modern) :host-context(.sky-responsive-container-sm) .sky-vertical-tabset-group-container,:host-context(.sky-theme-modern) :host-context(.sky-responsive-container-md) .sky-vertical-tabset-group-container,:host-context(.sky-theme-modern) :host-context(.sky-responsive-container-lg) .sky-vertical-tabset-group-container{border-right:1px solid #d2d2d2}.sky-theme-modern .sky-vertical-tabset-content{margin:15px}@media (min-width: 768px){.sky-theme-modern :host .sky-vertical-tabset-content{margin:20px 30px}.sky-theme-modern :host .sky-vertical-tabset-group-container{border-right:1px solid #d2d2d2}}.sky-theme-modern :host-context(.sky-responsive-container-sm) .sky-vertical-tabset-content,.sky-theme-modern :host-context(.sky-responsive-container-md) .sky-vertical-tabset-content,.sky-theme-modern :host-context(.sky-responsive-container-lg) .sky-vertical-tabset-content{margin:20px 30px}.sky-theme-modern :host-context(.sky-responsive-container-sm) .sky-vertical-tabset-group-container,.sky-theme-modern :host-context(.sky-responsive-container-md) .sky-vertical-tabset-group-container,.sky-theme-modern :host-context(.sky-responsive-container-lg) .sky-vertical-tabset-group-container{border-right:1px solid #d2d2d2}\n"], components: [{ type: i4.λ4, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], animations: [
|
|
688
688
|
trigger('tabGroupEnter', [
|
|
689
689
|
transition(`${HIDDEN_STATE} => ${VISIBLE_STATE}`, [
|
|
690
690
|
style({ transform: 'translate(-100%)' }),
|
|
@@ -698,7 +698,7 @@ SkyVerticalTabsetComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0
|
|
|
698
698
|
]),
|
|
699
699
|
]),
|
|
700
700
|
], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
701
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2
|
|
701
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: SkyVerticalTabsetComponent, decorators: [{
|
|
702
702
|
type: Component,
|
|
703
703
|
args: [{ selector: 'sky-vertical-tabset', providers: [SkyVerticalTabsetService], changeDetection: ChangeDetectionStrategy.OnPush, animations: [
|
|
704
704
|
trigger('tabGroupEnter', [
|
|
@@ -739,8 +739,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImpor
|
|
|
739
739
|
|
|
740
740
|
class SkyVerticalTabsetModule {
|
|
741
741
|
}
|
|
742
|
-
SkyVerticalTabsetModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2
|
|
743
|
-
SkyVerticalTabsetModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2
|
|
742
|
+
SkyVerticalTabsetModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: SkyVerticalTabsetModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
743
|
+
SkyVerticalTabsetModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: SkyVerticalTabsetModule, declarations: [SkyVerticalTabsetComponent,
|
|
744
744
|
SkyVerticalTabsetGroupComponent,
|
|
745
745
|
SkyVerticalTabComponent], imports: [CommonModule,
|
|
746
746
|
SkyIconModule,
|
|
@@ -751,7 +751,7 @@ SkyVerticalTabsetModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0",
|
|
|
751
751
|
SkyThemeModule], exports: [SkyVerticalTabsetComponent,
|
|
752
752
|
SkyVerticalTabsetGroupComponent,
|
|
753
753
|
SkyVerticalTabComponent] });
|
|
754
|
-
SkyVerticalTabsetModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2
|
|
754
|
+
SkyVerticalTabsetModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: SkyVerticalTabsetModule, providers: [SkyVerticalTabsetAdapterService], imports: [[
|
|
755
755
|
CommonModule,
|
|
756
756
|
SkyIconModule,
|
|
757
757
|
SkyIdModule,
|
|
@@ -760,7 +760,7 @@ SkyVerticalTabsetModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0",
|
|
|
760
760
|
SkyTabsResourcesModule,
|
|
761
761
|
SkyThemeModule,
|
|
762
762
|
]] });
|
|
763
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2
|
|
763
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: SkyVerticalTabsetModule, decorators: [{
|
|
764
764
|
type: NgModule,
|
|
765
765
|
args: [{
|
|
766
766
|
declarations: [
|
|
@@ -812,9 +812,9 @@ class SkySectionedFormService {
|
|
|
812
812
|
this.requiredChange.next(isRequired);
|
|
813
813
|
}
|
|
814
814
|
}
|
|
815
|
-
SkySectionedFormService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2
|
|
816
|
-
SkySectionedFormService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.2
|
|
817
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2
|
|
815
|
+
SkySectionedFormService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: SkySectionedFormService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
816
|
+
SkySectionedFormService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: SkySectionedFormService });
|
|
817
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: SkySectionedFormService, decorators: [{
|
|
818
818
|
type: Injectable
|
|
819
819
|
}] });
|
|
820
820
|
|
|
@@ -853,9 +853,9 @@ class SkySectionedFormSectionComponent {
|
|
|
853
853
|
this._ngUnsubscribe.complete();
|
|
854
854
|
}
|
|
855
855
|
}
|
|
856
|
-
SkySectionedFormSectionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2
|
|
857
|
-
SkySectionedFormSectionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2
|
|
858
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2
|
|
856
|
+
SkySectionedFormSectionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: SkySectionedFormSectionComponent, deps: [{ token: SkySectionedFormService }, { token: SkyVerticalTabsetService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
857
|
+
SkySectionedFormSectionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.2", 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, template: "<sky-vertical-tab\n [active]=\"active\"\n [errorIndicator]=\"fieldInvalid\"\n [ngClass]=\"{\n 'sky-tab-field-required': fieldRequired\n }\"\n [showTabRightArrow]=\"true\"\n [tabHeaderCount]=\"itemCount\"\n [tabHeading]=\"heading\"\n [tabId]=\"sectionTabId\"\n>\n <ng-content></ng-content>\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", "ariaRole", "disabled", "errorIndicator", "tabHeaderCount", "tabHeading", "showTabRightArrow", "tabId"] }], directives: [{ type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
|
|
858
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: SkySectionedFormSectionComponent, decorators: [{
|
|
859
859
|
type: Component,
|
|
860
860
|
args: [{ selector: 'sky-sectioned-form-section', providers: [SkySectionedFormService], template: "<sky-vertical-tab\n [active]=\"active\"\n [errorIndicator]=\"fieldInvalid\"\n [ngClass]=\"{\n 'sky-tab-field-required': fieldRequired\n }\"\n [showTabRightArrow]=\"true\"\n [tabHeaderCount]=\"itemCount\"\n [tabHeading]=\"heading\"\n [tabId]=\"sectionTabId\"\n>\n <ng-content></ng-content>\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"] }]
|
|
861
861
|
}], ctorParameters: function () { return [{ type: SkySectionedFormService }, { type: SkyVerticalTabsetService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { heading: [{
|
|
@@ -930,8 +930,8 @@ class SkySectionedFormComponent {
|
|
|
930
930
|
this.changeRef.markForCheck();
|
|
931
931
|
}
|
|
932
932
|
}
|
|
933
|
-
SkySectionedFormComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2
|
|
934
|
-
SkySectionedFormComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2
|
|
933
|
+
SkySectionedFormComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: SkySectionedFormComponent, deps: [{ token: SkyVerticalTabsetService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
934
|
+
SkySectionedFormComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.2", 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, template: "<div\n aria-orientation=\"vertical\"\n class=\"sky-sectioned-form\"\n [attr.role]=\"ariaRole\"\n (window:resize)=\"tabService.updateContent()\"\n>\n <div\n *ngIf=\"maintainSectionContent || tabsVisible()\"\n class=\"sky-sectioned-form-tabs\"\n [ngClass]=\"{ 'sky-sectioned-form-tabs-hidden': !tabsVisible() }\"\n [@tabEnter]=\"tabService.animationTabsVisibleState\"\n >\n <ng-content></ng-content>\n </div>\n <div\n *ngIf=\"maintainSectionContent || tabService.contentVisible()\"\n class=\"sky-sectioned-form-content\"\n [ngClass]=\"{\n 'sky-sectioned-form-content-hidden': !tabService.contentVisible()\n }\"\n [@contentEnter]=\"tabService.animationContentVisibleState\"\n #skySectionSideContent\n ></div>\n</div>\n", styles: [":host .sky-sectioned-form{display:block;max-height:none}:host .sky-sectioned-form-content{flex-basis:auto;overflow-y:visible}:host .sky-sectioned-form-tabs{flex-basis:auto;overflow-y:visible;border-right:1px solid #e2e3e4}:host-context(.sky-responsive-container-xs) .sky-sectioned-form,:host-context(.sky-responsive-container-sm) .sky-sectioned-form,:host-context(.sky-responsive-container-md) .sky-sectioned-form,:host-context(.sky-responsive-container-lg) .sky-sectioned-form{display:block;max-height:none}:host-context(.sky-responsive-container-xs) .sky-sectioned-form-content,:host-context(.sky-responsive-container-sm) .sky-sectioned-form-content,:host-context(.sky-responsive-container-md) .sky-sectioned-form-content,:host-context(.sky-responsive-container-lg) .sky-sectioned-form-content{flex-basis:auto;overflow-y:visible}:host-context(.sky-responsive-container-xs) .sky-sectioned-form-tabs,:host-context(.sky-responsive-container-sm) .sky-sectioned-form-tabs,:host-context(.sky-responsive-container-md) .sky-sectioned-form-tabs,:host-context(.sky-responsive-container-lg) .sky-sectioned-form-tabs{flex-basis:auto;overflow-y:visible;border-right:1px solid #e2e3e4}@media (min-width: 768px){:host .sky-sectioned-form{display:flex;max-height:100%}:host .sky-sectioned-form-content{flex-basis:70%;margin:15px;overflow-y:auto}:host .sky-sectioned-form-tabs{flex-basis:30%;overflow-y:auto}}:host-context(.sky-responsive-container-sm) .sky-sectioned-form,:host-context(.sky-responsive-container-md) .sky-sectioned-form,:host-context(.sky-responsive-container-lg) .sky-sectioned-form{display:flex;max-height:100%}:host-context(.sky-responsive-container-sm) .sky-sectioned-form-content,:host-context(.sky-responsive-container-md) .sky-sectioned-form-content,:host-context(.sky-responsive-container-lg) .sky-sectioned-form-content{flex-basis:70%;margin:15px;overflow-y:auto}:host-context(.sky-responsive-container-sm) .sky-sectioned-form-tabs,:host-context(.sky-responsive-container-md) .sky-sectioned-form-tabs,:host-context(.sky-responsive-container-lg) .sky-sectioned-form-tabs{flex-basis:30%;overflow-y:auto}.sky-sectioned-form-tabs-hidden,.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.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], animations: [
|
|
935
935
|
trigger('tabEnter', [
|
|
936
936
|
transition(`${HIDDEN_STATE} => ${VISIBLE_STATE}`, [
|
|
937
937
|
style({ transform: 'translate(-100%)' }),
|
|
@@ -945,7 +945,7 @@ SkySectionedFormComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.
|
|
|
945
945
|
]),
|
|
946
946
|
]),
|
|
947
947
|
], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
948
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2
|
|
948
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: SkySectionedFormComponent, decorators: [{
|
|
949
949
|
type: Component,
|
|
950
950
|
args: [{ selector: 'sky-sectioned-form', providers: [SkyVerticalTabsetService], changeDetection: ChangeDetectionStrategy.OnPush, animations: [
|
|
951
951
|
trigger('tabEnter', [
|
|
@@ -972,18 +972,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImpor
|
|
|
972
972
|
|
|
973
973
|
class SkySectionedFormModule {
|
|
974
974
|
}
|
|
975
|
-
SkySectionedFormModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2
|
|
976
|
-
SkySectionedFormModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2
|
|
975
|
+
SkySectionedFormModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: SkySectionedFormModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
976
|
+
SkySectionedFormModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: SkySectionedFormModule, declarations: [SkySectionedFormComponent, SkySectionedFormSectionComponent], imports: [CommonModule,
|
|
977
977
|
SkyCheckboxModule,
|
|
978
978
|
SkyThemeModule,
|
|
979
979
|
SkyVerticalTabsetModule], exports: [SkySectionedFormComponent, SkySectionedFormSectionComponent] });
|
|
980
|
-
SkySectionedFormModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2
|
|
980
|
+
SkySectionedFormModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: SkySectionedFormModule, imports: [[
|
|
981
981
|
CommonModule,
|
|
982
982
|
SkyCheckboxModule,
|
|
983
983
|
SkyThemeModule,
|
|
984
984
|
SkyVerticalTabsetModule,
|
|
985
985
|
]] });
|
|
986
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2
|
|
986
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: SkySectionedFormModule, decorators: [{
|
|
987
987
|
type: NgModule,
|
|
988
988
|
args: [{
|
|
989
989
|
declarations: [SkySectionedFormComponent, SkySectionedFormSectionComponent],
|
|
@@ -1033,9 +1033,9 @@ class SkyTabButtonComponent {
|
|
|
1033
1033
|
event.preventDefault();
|
|
1034
1034
|
}
|
|
1035
1035
|
}
|
|
1036
|
-
SkyTabButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2
|
|
1037
|
-
SkyTabButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2
|
|
1038
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2
|
|
1036
|
+
SkyTabButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: SkyTabButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1037
|
+
SkyTabButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.2", 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, 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)=\"onTabButtonKeyDown($event)\"\n >\n <span class=\"sky-tab-heading\">\n {{ buttonText }}\n <span *ngIf=\"buttonTextCount !== undefined\" class=\"sky-tab-header-count\">\n {{ buttonTextCount }}\n </span>\n </span>\n </a>\n\n <button\n *ngIf=\"closeable\"\n class=\"sky-btn-tab-close\"\n type=\"button\"\n [attr.aria-label]=\"'skyux_tab_close' | skyLibResources: buttonText\"\n [disabled]=\"disabled\"\n [ngClass]=\"{\n 'sky-btn-tab-close-disabled': disabled\n }\"\n (click)=\"onCloseClick($event)\"\n >\n <sky-icon icon=\"remove\"></sky-icon>\n </button>\n</div>\n", styles: [".sky-btn-tab-wrapper{display:inline-block;position:relative;margin-right:5px}.sky-btn-tab-wrapper .sky-btn-tab-close{position:absolute;top:10px;right:10px;color:#686c73}.sky-btn-tab-wrapper .sky-btn-tab-close:hover{color:#212327;transition:color .15s}.sky-btn-tab-wrapper.sky-btn-tab-wrapper-selected:not(.sky-btn-tab-wrapper-disabled) .sky-btn-tab-close{color:#fff}.sky-tab-btn-closeable{padding-right:43px}:host-context(.sky-theme-modern) .sky-btn-tab-wrapper{margin-right:10px}:host-context(.sky-theme-modern) .sky-btn-tab-wrapper .sky-btn-tab-close{top:12px;right:10px}:host-context(.sky-theme-modern) .sky-btn-tab-wrapper.sky-btn-tab-wrapper-selected:not(.sky-btn-tab-wrapper-disabled) .sky-btn-tab-close{color:#686c73}:host-context(.sky-theme-modern) .sky-tab-btn-closeable{padding-right:44px}.sky-theme-modern .sky-btn-tab-wrapper{margin-right:10px}.sky-theme-modern .sky-btn-tab-wrapper .sky-btn-tab-close{top:12px;right:10px}.sky-theme-modern .sky-btn-tab-wrapper.sky-btn-tab-wrapper-selected:not(.sky-btn-tab-wrapper-disabled) .sky-btn-tab-close{color:#686c73}.sky-theme-modern .sky-tab-btn-closeable{padding-right:44px}:host-context(.sky-theme-modern.sky-theme-mode-dark) .sky-btn-tab-wrapper .sky-btn-tab-close{color:#eeeeef}:host-context(.sky-theme-modern.sky-theme-mode-dark) .sky-btn-tab-wrapper.sky-btn-tab-wrapper-selected:not(.sky-btn-tab-wrapper-disabled) .sky-btn-tab-close{color:#eeeeef}.sky-theme-modern.sky-theme-mode-dark .sky-btn-tab-wrapper .sky-btn-tab-close{color:#eeeeef}.sky-theme-modern.sky-theme-mode-dark .sky-btn-tab-wrapper.sky-btn-tab-wrapper-selected:not(.sky-btn-tab-wrapper-disabled) .sky-btn-tab-close{color:#eeeeef}\n"], components: [{ type: i4.λ4, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }], directives: [{ type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "skyLibResources": i3.SkyLibResourcesPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
1038
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: SkyTabButtonComponent, decorators: [{
|
|
1039
1039
|
type: Component,
|
|
1040
1040
|
args: [{ selector: 'sky-tab-button', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, 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)=\"onTabButtonKeyDown($event)\"\n >\n <span class=\"sky-tab-heading\">\n {{ buttonText }}\n <span *ngIf=\"buttonTextCount !== undefined\" class=\"sky-tab-header-count\">\n {{ buttonTextCount }}\n </span>\n </span>\n </a>\n\n <button\n *ngIf=\"closeable\"\n class=\"sky-btn-tab-close\"\n type=\"button\"\n [attr.aria-label]=\"'skyux_tab_close' | skyLibResources: buttonText\"\n [disabled]=\"disabled\"\n [ngClass]=\"{\n 'sky-btn-tab-close-disabled': disabled\n }\"\n (click)=\"onCloseClick($event)\"\n >\n <sky-icon icon=\"remove\"></sky-icon>\n </button>\n</div>\n", styles: [".sky-btn-tab-wrapper{display:inline-block;position:relative;margin-right:5px}.sky-btn-tab-wrapper .sky-btn-tab-close{position:absolute;top:10px;right:10px;color:#686c73}.sky-btn-tab-wrapper .sky-btn-tab-close:hover{color:#212327;transition:color .15s}.sky-btn-tab-wrapper.sky-btn-tab-wrapper-selected:not(.sky-btn-tab-wrapper-disabled) .sky-btn-tab-close{color:#fff}.sky-tab-btn-closeable{padding-right:43px}:host-context(.sky-theme-modern) .sky-btn-tab-wrapper{margin-right:10px}:host-context(.sky-theme-modern) .sky-btn-tab-wrapper .sky-btn-tab-close{top:12px;right:10px}:host-context(.sky-theme-modern) .sky-btn-tab-wrapper.sky-btn-tab-wrapper-selected:not(.sky-btn-tab-wrapper-disabled) .sky-btn-tab-close{color:#686c73}:host-context(.sky-theme-modern) .sky-tab-btn-closeable{padding-right:44px}.sky-theme-modern .sky-btn-tab-wrapper{margin-right:10px}.sky-theme-modern .sky-btn-tab-wrapper .sky-btn-tab-close{top:12px;right:10px}.sky-theme-modern .sky-btn-tab-wrapper.sky-btn-tab-wrapper-selected:not(.sky-btn-tab-wrapper-disabled) .sky-btn-tab-close{color:#686c73}.sky-theme-modern .sky-tab-btn-closeable{padding-right:44px}:host-context(.sky-theme-modern.sky-theme-mode-dark) .sky-btn-tab-wrapper .sky-btn-tab-close{color:#eeeeef}:host-context(.sky-theme-modern.sky-theme-mode-dark) .sky-btn-tab-wrapper.sky-btn-tab-wrapper-selected:not(.sky-btn-tab-wrapper-disabled) .sky-btn-tab-close{color:#eeeeef}.sky-theme-modern.sky-theme-mode-dark .sky-btn-tab-wrapper .sky-btn-tab-close{color:#eeeeef}.sky-theme-modern.sky-theme-mode-dark .sky-btn-tab-wrapper.sky-btn-tab-wrapper-selected:not(.sky-btn-tab-wrapper-disabled) .sky-btn-tab-close{color:#eeeeef}\n"] }]
|
|
1041
1041
|
}], propDecorators: { active: [{
|
|
@@ -1121,7 +1121,6 @@ class SkyTabsetPermalinkService {
|
|
|
1121
1121
|
* Removes the provided query param from the URL.
|
|
1122
1122
|
*/
|
|
1123
1123
|
clearParam(name) {
|
|
1124
|
-
/*tslint:disable-next-line:no-null-keyword*/
|
|
1125
1124
|
this.setParam(name, null);
|
|
1126
1125
|
}
|
|
1127
1126
|
/**
|
|
@@ -1130,7 +1129,6 @@ class SkyTabsetPermalinkService {
|
|
|
1130
1129
|
*/
|
|
1131
1130
|
getParamHref(name, value) {
|
|
1132
1131
|
if (!name) {
|
|
1133
|
-
/*tslint:disable-next-line:no-null-keyword*/
|
|
1134
1132
|
return null;
|
|
1135
1133
|
}
|
|
1136
1134
|
const params = this.getParams();
|
|
@@ -1175,9 +1173,9 @@ class SkyTabsetPermalinkService {
|
|
|
1175
1173
|
return params;
|
|
1176
1174
|
}
|
|
1177
1175
|
}
|
|
1178
|
-
SkyTabsetPermalinkService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2
|
|
1179
|
-
SkyTabsetPermalinkService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.2
|
|
1180
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2
|
|
1176
|
+
SkyTabsetPermalinkService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: SkyTabsetPermalinkService, deps: [{ token: i1$1.ActivatedRoute }, { token: i2.Location }, { token: i1$1.Router }], target: i0.ɵɵFactoryTarget.Injectable });
|
|
1177
|
+
SkyTabsetPermalinkService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: SkyTabsetPermalinkService });
|
|
1178
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: SkyTabsetPermalinkService, decorators: [{
|
|
1181
1179
|
type: Injectable
|
|
1182
1180
|
}], ctorParameters: function () { return [{ type: i1$1.ActivatedRoute }, { type: i2.Location }, { type: i1$1.Router }]; } });
|
|
1183
1181
|
|
|
@@ -1282,9 +1280,9 @@ class SkyTabsetService {
|
|
|
1282
1280
|
return this.tabIndexesEqual(tabIndex, this.currentActiveTabIndex);
|
|
1283
1281
|
}
|
|
1284
1282
|
}
|
|
1285
|
-
SkyTabsetService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2
|
|
1286
|
-
SkyTabsetService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.2
|
|
1287
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2
|
|
1283
|
+
SkyTabsetService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: SkyTabsetService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
1284
|
+
SkyTabsetService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: SkyTabsetService });
|
|
1285
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: SkyTabsetService, decorators: [{
|
|
1288
1286
|
type: Injectable
|
|
1289
1287
|
}] });
|
|
1290
1288
|
|
|
@@ -1391,9 +1389,9 @@ class SkyTabComponent {
|
|
|
1391
1389
|
this.changeDetector.markForCheck();
|
|
1392
1390
|
}
|
|
1393
1391
|
}
|
|
1394
|
-
SkyTabComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2
|
|
1395
|
-
SkyTabComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2
|
|
1396
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2
|
|
1392
|
+
SkyTabComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: SkyTabComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: SkyTabsetPermalinkService }, { token: SkyTabsetService }], target: i0.ɵɵFactoryTarget.Component });
|
|
1393
|
+
SkyTabComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.2", 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, 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.ChangeDetectionStrategy.OnPush });
|
|
1394
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: SkyTabComponent, decorators: [{
|
|
1397
1395
|
type: Component,
|
|
1398
1396
|
args: [{ selector: 'sky-tab', changeDetection: ChangeDetectionStrategy.OnPush, 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" }]
|
|
1399
1397
|
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: SkyTabsetPermalinkService }, { type: SkyTabsetService }]; }, propDecorators: { active: [{
|
|
@@ -1459,9 +1457,9 @@ class SkyTabsetAdapterService {
|
|
|
1459
1457
|
return firstTabRect.left - tabsetRect.left;
|
|
1460
1458
|
}
|
|
1461
1459
|
}
|
|
1462
|
-
SkyTabsetAdapterService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2
|
|
1463
|
-
SkyTabsetAdapterService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.2
|
|
1464
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2
|
|
1460
|
+
SkyTabsetAdapterService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: SkyTabsetAdapterService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
1461
|
+
SkyTabsetAdapterService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: SkyTabsetAdapterService });
|
|
1462
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: SkyTabsetAdapterService, decorators: [{
|
|
1465
1463
|
type: Injectable
|
|
1466
1464
|
}] });
|
|
1467
1465
|
|
|
@@ -1747,7 +1745,6 @@ class SkyTabsetComponent {
|
|
|
1747
1745
|
closeable: tab.closeable,
|
|
1748
1746
|
ariaControls: tab.tabPanelId,
|
|
1749
1747
|
disabled: tab.disabled,
|
|
1750
|
-
/*tslint:disable-next-line:no-null-keyword*/
|
|
1751
1748
|
buttonHref: tab.disabled
|
|
1752
1749
|
? null
|
|
1753
1750
|
: this.permalinkService.getParamHref(this.permalinkId, tab.permalinkValue),
|
|
@@ -1808,13 +1805,13 @@ class SkyTabsetComponent {
|
|
|
1808
1805
|
}
|
|
1809
1806
|
}
|
|
1810
1807
|
}
|
|
1811
|
-
SkyTabsetComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2
|
|
1812
|
-
SkyTabsetComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2
|
|
1808
|
+
SkyTabsetComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: SkyTabsetComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: SkyTabsetAdapterService }, { token: SkyTabsetPermalinkService }, { token: SkyTabsetService }], target: i0.ɵɵFactoryTarget.Component });
|
|
1809
|
+
SkyTabsetComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.2", 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: [
|
|
1813
1810
|
SkyTabsetAdapterService,
|
|
1814
1811
|
SkyTabsetPermalinkService,
|
|
1815
1812
|
SkyTabsetService,
|
|
1816
1813
|
], queries: [{ propertyName: "tabs", predicate: SkyTabComponent }], ngImport: i0, template: "<div\n class=\"sky-tabset\"\n role=\"tablist\"\n [attr.aria-label]=\"ariaLabel\"\n [attr.aria-labelledby]=\"ariaLabelledBy\"\n [ngClass]=\"\n 'sky-tabset-mode-' + tabDisplayMode + ' sky-tabset-style-' + tabStyle\n \"\n (window:resize)=\"onWindowResize()\"\n>\n <span class=\"sky-tabset-dropdown\">\n <sky-dropdown *ngIf=\"tabDisplayMode === 'dropdown'\" buttonType=\"tab\">\n <sky-dropdown-button>\n {{ dropdownTriggerButtonText }}\n </sky-dropdown-button>\n <sky-dropdown-menu>\n <sky-dropdown-item\n *ngFor=\"let tabButton of tabButtons\"\n class=\"sky-tab-dropdown-menu-item\"\n >\n <div\n class=\"sky-tab-dropdown-item\"\n [ngClass]=\"{\n 'sky-tab-dropdown-item-selected': tabButton.active\n }\"\n >\n <ng-container\n *ngTemplateOutlet=\"\n tabButtonTemplate;\n context: {\n $implicit: tabButton\n }\n \"\n ></ng-container>\n </div>\n </sky-dropdown-item>\n </sky-dropdown-menu>\n </sky-dropdown>\n </span>\n <span class=\"sky-tabset-tabs\">\n <ng-container *ngFor=\"let tabButton of tabButtons\">\n <ng-container\n *ngTemplateOutlet=\"\n tabButtonTemplate;\n context: {\n $implicit: tabButton\n }\n \"\n ></ng-container>\n </ng-container>\n </span>\n <span class=\"sky-tabset-btns\">\n <button\n *ngIf=\"newTab.observers.length > 0\"\n class=\"sky-btn sky-btn-icon sky-tabset-btn-new sky-margin-inline-compact\"\n type=\"button\"\n [attr.aria-label]=\"'skyux_tab_add' | skyLibResources\"\n [skyThemeClass]=\"{\n 'sky-margin-inline-sm': 'modern'\n }\"\n (click)=\"onNewTabClick()\"\n >\n <sky-icon icon=\"plus-circle\" size=\"lg\"> </sky-icon>\n </button>\n <button\n *ngIf=\"openTab.observers.length > 0\"\n class=\"sky-btn sky-btn-icon sky-tabset-btn-open sky-margin-inline-compact\"\n type=\"button\"\n [attr.aria-label]=\"'skyux_tab_open' | skyLibResources\"\n [skyThemeClass]=\"{\n 'sky-margin-inline-sm': 'modern'\n }\"\n (click)=\"onOpenTabClick()\"\n >\n <sky-icon icon=\"folder-open-o\" size=\"lg\"> </sky-icon>\n </button>\n </span>\n</div>\n<ng-content></ng-content>\n\n<ng-template let-tabButton #tabButtonTemplate>\n <sky-tab-button\n [active]=\"tabButton.active\"\n [ariaControls]=\"tabButton.ariaControls\"\n [buttonHref]=\"tabButton.buttonHref\"\n [buttonId]=\"tabButton.buttonId\"\n [buttonText]=\"tabButton.buttonText\"\n [buttonTextCount]=\"tabButton.buttonTextCount\"\n [closeable]=\"tabButton.closeable\"\n [disabled]=\"tabButton.disabled\"\n [tabStyle]=\"tabStyle\"\n (buttonClick)=\"onTabButtonClick(tabButton)\"\n (closeClick)=\"onTabCloseClick(tabButton)\"\n ></sky-tab-button>\n</ng-template>\n", styles: [".sky-tabset{align-items:center;border-bottom:2px solid #0974a1;display:flex;list-style-type:none;margin:0;overflow:hidden;padding:0 0 0 15px;white-space:nowrap}.sky-tabset.sky-tabset-style-wizard{border-bottom:none;padding-bottom:10px;padding-left:0}.sky-tabset-btns{order:1;padding-left:10px}.sky-tabset-dropdown{order:0;max-width:100%}.sky-tabset-mode-dropdown{line-height:0}.sky-tabset-mode-dropdown .sky-tabset-tabs{visibility:hidden;order:2}.sky-tab-dropdown-menu-item sky-tab-button{display:flex;min-width:300px}.sky-tab-dropdown-menu-item .sky-dropdown-item{margin:0}.sky-tab-dropdown-menu-item .sky-btn-tab-wrapper{width:100%;margin-right:0}.sky-tab-dropdown-menu-item .sky-btn-tab{margin:0;border-radius:0;width:100%;display:flex}.sky-tab-dropdown-menu-item .sky-btn-tab>.sky-tab-heading{flex:1 1 auto}.sky-tab-dropdown-menu-item .sky-btn-tab>.sky-btn-tab-close{flex:0 1 auto}.sky-tabset-tabs{order:0;white-space:nowrap}.sky-tabset-btn-new,.sky-tabset-btn-open{color:#0974a1}.sky-theme-modern .sky-tabset{border-bottom:1px solid #d2d2d2;overflow:visible}.sky-theme-modern .sky-tab-dropdown-menu-item .sky-btn-tab-wrapper{margin-right:0}\n"], components: [{ type: i4$1.λ3, selector: "sky-dropdown", inputs: ["buttonStyle", "buttonType", "disabled", "dismissOnBlur", "label", "horizontalAlignment", "messageStream", "title", "trigger"] }, { type: i4$1.λ2, selector: "sky-dropdown-button" }, { type: i4$1.λ4, selector: "sky-dropdown-menu", inputs: ["ariaLabelledBy", "ariaRole", "useNativeFocus"], outputs: ["menuChanges"] }, { type: i4$1.λ1, selector: "sky-dropdown-item", inputs: ["ariaRole"] }, { type: i4.λ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.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i8.λ2, selector: "[skyThemeClass]", inputs: ["class", "skyThemeClass"] }], pipes: { "skyLibResources": i3.SkyLibResourcesPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
1817
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2
|
|
1814
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: SkyTabsetComponent, decorators: [{
|
|
1818
1815
|
type: Component,
|
|
1819
1816
|
args: [{ selector: 'sky-tabset', providers: [
|
|
1820
1817
|
SkyTabsetAdapterService,
|
|
@@ -1940,9 +1937,9 @@ class SkyTabsetNavButtonComponent {
|
|
|
1940
1937
|
}
|
|
1941
1938
|
}
|
|
1942
1939
|
}
|
|
1943
|
-
SkyTabsetNavButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2
|
|
1944
|
-
SkyTabsetNavButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2
|
|
1945
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2
|
|
1940
|
+
SkyTabsetNavButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: SkyTabsetNavButtonComponent, deps: [{ token: i3.SkyLibResourcesService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
1941
|
+
SkyTabsetNavButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.2", type: SkyTabsetNavButtonComponent, selector: "sky-tabset-nav-button", inputs: { tabset: "tabset", buttonType: "buttonType", buttonText: "buttonText" }, ngImport: i0, template: "<button\n class=\"sky-btn sky-btn-default\"\n type=\"button\"\n [disabled]=\"disabled\"\n (click)=\"buttonClick()\"\n>\n {{ buttonText }}\n</button>\n" });
|
|
1942
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: SkyTabsetNavButtonComponent, decorators: [{
|
|
1946
1943
|
type: Component,
|
|
1947
1944
|
args: [{ selector: 'sky-tabset-nav-button', template: "<button\n class=\"sky-btn sky-btn-default\"\n type=\"button\"\n [disabled]=\"disabled\"\n (click)=\"buttonClick()\"\n>\n {{ buttonText }}\n</button>\n" }]
|
|
1948
1945
|
}], ctorParameters: function () { return [{ type: i3.SkyLibResourcesService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { tabset: [{
|
|
@@ -1955,8 +1952,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImpor
|
|
|
1955
1952
|
|
|
1956
1953
|
class SkyTabsModule {
|
|
1957
1954
|
}
|
|
1958
|
-
SkyTabsModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2
|
|
1959
|
-
SkyTabsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2
|
|
1955
|
+
SkyTabsModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: SkyTabsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
1956
|
+
SkyTabsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: SkyTabsModule, declarations: [SkyTabButtonComponent,
|
|
1960
1957
|
SkyTabComponent,
|
|
1961
1958
|
SkyTabsetComponent,
|
|
1962
1959
|
SkyTabsetNavButtonComponent], imports: [CommonModule,
|
|
@@ -1966,7 +1963,7 @@ SkyTabsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version:
|
|
|
1966
1963
|
SkyIconModule,
|
|
1967
1964
|
SkyTabsResourcesModule,
|
|
1968
1965
|
SkyThemeModule], exports: [SkyTabComponent, SkyTabsetComponent, SkyTabsetNavButtonComponent] });
|
|
1969
|
-
SkyTabsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2
|
|
1966
|
+
SkyTabsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: SkyTabsModule, imports: [[
|
|
1970
1967
|
CommonModule,
|
|
1971
1968
|
RouterModule,
|
|
1972
1969
|
SkyDropdownModule,
|
|
@@ -1975,7 +1972,7 @@ SkyTabsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version:
|
|
|
1975
1972
|
SkyTabsResourcesModule,
|
|
1976
1973
|
SkyThemeModule,
|
|
1977
1974
|
]] });
|
|
1978
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2
|
|
1975
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: SkyTabsModule, decorators: [{
|
|
1979
1976
|
type: NgModule,
|
|
1980
1977
|
args: [{
|
|
1981
1978
|
declarations: [
|