@skyux/tabs 11.26.0 → 11.27.0
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 +485 -485
- package/esm2022/lib/modules/sectioned-form/sectioned-form-section.component.mjs +4 -4
- package/esm2022/lib/modules/sectioned-form/sectioned-form.component.mjs +4 -4
- package/esm2022/lib/modules/sectioned-form/sectioned-form.module.mjs +5 -5
- package/esm2022/lib/modules/sectioned-form/sectioned-form.service.mjs +4 -4
- package/esm2022/lib/modules/shared/sky-tabs-resources.module.mjs +5 -5
- package/esm2022/lib/modules/shared/tab-id.service.mjs +4 -4
- package/esm2022/lib/modules/tabs/tab-button-adapter.service.mjs +4 -4
- package/esm2022/lib/modules/tabs/tab-button.component.mjs +4 -4
- package/esm2022/lib/modules/tabs/tab.component.mjs +4 -4
- package/esm2022/lib/modules/tabs/tabs.module.mjs +5 -5
- package/esm2022/lib/modules/tabs/tabset-adapter.service.mjs +4 -4
- package/esm2022/lib/modules/tabs/tabset-nav-button-disabled.pipe.mjs +4 -4
- package/esm2022/lib/modules/tabs/tabset-nav-button.component.mjs +4 -4
- package/esm2022/lib/modules/tabs/tabset-permalink.service.mjs +4 -4
- package/esm2022/lib/modules/tabs/tabset.component.mjs +4 -4
- package/esm2022/lib/modules/tabs/tabset.service.mjs +4 -4
- package/esm2022/lib/modules/vertical-tabset/vertical-tab.component.mjs +4 -4
- package/esm2022/lib/modules/vertical-tabset/vertical-tabset-adapter.service.mjs +4 -4
- package/esm2022/lib/modules/vertical-tabset/vertical-tabset-group.component.mjs +4 -4
- package/esm2022/lib/modules/vertical-tabset/vertical-tabset-group.service.mjs +4 -4
- package/esm2022/lib/modules/vertical-tabset/vertical-tabset.component.mjs +4 -4
- package/esm2022/lib/modules/vertical-tabset/vertical-tabset.module.mjs +5 -5
- package/esm2022/lib/modules/vertical-tabset/vertical-tabset.service.mjs +4 -4
- package/fesm2022/skyux-tabs.mjs +73 -73
- package/fesm2022/skyux-tabs.mjs.map +1 -1
- package/package.json +15 -15
package/fesm2022/skyux-tabs.mjs
CHANGED
|
@@ -52,11 +52,11 @@ SkyLibResourcesService.addResources(RESOURCES);
|
|
|
52
52
|
* Import into any component library module that needs to use resource strings.
|
|
53
53
|
*/
|
|
54
54
|
class SkyTabsResourcesModule {
|
|
55
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.
|
|
56
|
-
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.
|
|
57
|
-
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.
|
|
55
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SkyTabsResourcesModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
56
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: SkyTabsResourcesModule, exports: [SkyI18nModule] }); }
|
|
57
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SkyTabsResourcesModule, imports: [SkyI18nModule] }); }
|
|
58
58
|
}
|
|
59
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.
|
|
59
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SkyTabsResourcesModule, decorators: [{
|
|
60
60
|
type: NgModule,
|
|
61
61
|
args: [{
|
|
62
62
|
exports: [SkyI18nModule],
|
|
@@ -70,10 +70,10 @@ class SkyVerticalTabsetGroupService {
|
|
|
70
70
|
constructor() {
|
|
71
71
|
this.messageStream = new Subject();
|
|
72
72
|
}
|
|
73
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.
|
|
74
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.
|
|
73
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SkyVerticalTabsetGroupService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
74
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SkyVerticalTabsetGroupService }); }
|
|
75
75
|
}
|
|
76
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.
|
|
76
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SkyVerticalTabsetGroupService, decorators: [{
|
|
77
77
|
type: Injectable
|
|
78
78
|
}] });
|
|
79
79
|
|
|
@@ -134,10 +134,10 @@ class SkyVerticalTabsetAdapterService {
|
|
|
134
134
|
#elHasFocus(el) {
|
|
135
135
|
return !!el && el === this.#document.activeElement;
|
|
136
136
|
}
|
|
137
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.
|
|
138
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.
|
|
137
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SkyVerticalTabsetAdapterService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
138
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SkyVerticalTabsetAdapterService }); }
|
|
139
139
|
}
|
|
140
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.
|
|
140
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SkyVerticalTabsetAdapterService, decorators: [{
|
|
141
141
|
type: Injectable
|
|
142
142
|
}] });
|
|
143
143
|
|
|
@@ -328,10 +328,10 @@ class SkyVerticalTabsetService {
|
|
|
328
328
|
}
|
|
329
329
|
this.indexChanged.next(this.activeIndex);
|
|
330
330
|
}
|
|
331
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.
|
|
332
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.
|
|
331
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SkyVerticalTabsetService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
332
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SkyVerticalTabsetService }); }
|
|
333
333
|
}
|
|
334
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.
|
|
334
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SkyVerticalTabsetService, decorators: [{
|
|
335
335
|
type: Injectable
|
|
336
336
|
}], ctorParameters: () => [] });
|
|
337
337
|
|
|
@@ -375,10 +375,10 @@ class SkyTabIdService {
|
|
|
375
375
|
#emitIds() {
|
|
376
376
|
this.#ids$.next(Array.from(this.#ids.values()));
|
|
377
377
|
}
|
|
378
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.
|
|
379
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.
|
|
378
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SkyTabIdService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
379
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SkyTabIdService }); }
|
|
380
380
|
}
|
|
381
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.
|
|
381
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SkyTabIdService, decorators: [{
|
|
382
382
|
type: Injectable
|
|
383
383
|
}], ctorParameters: () => [] });
|
|
384
384
|
|
|
@@ -520,10 +520,10 @@ class SkyVerticalTabComponent {
|
|
|
520
520
|
tabDeactivated() {
|
|
521
521
|
this.#changeRef.markForCheck();
|
|
522
522
|
}
|
|
523
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.
|
|
524
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.
|
|
523
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SkyVerticalTabComponent, deps: [{ token: SkyVerticalTabsetAdapterService }, { token: i0.ChangeDetectorRef }, { token: SkyVerticalTabsetService }, { token: SkyTabIdService, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
524
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", 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" }, viewQueries: [{ propertyName: "tabButton", first: true, predicate: ["tabButton"], descendants: true }, { propertyName: "tabContent", first: true, predicate: ["tabContentWrapper"], descendants: true }], ngImport: i0, template: "<a\n #tabButton\n class=\"sky-vertical-tab sky-vertical-tabset-button\"\n [attr.aria-controls]=\"isMobile ? null : ariaControls || tabContentPane.id\"\n [attr.aria-disabled]=\"disabled || undefined\"\n [attr.aria-selected]=\"active\"\n [attr.id]=\"tabId\"\n [attr.role]=\"isMobile ? undefined : ariaRole\"\n [ngClass]=\"{\n 'sky-vertical-tab-active': active,\n 'sky-vertical-tabset-button-disabled': disabled,\n 'sky-font-deemphasized': disabled,\n 'sky-deemphasized': disabled\n }\"\n [tabIndex]=\"-1\"\n (click)=\"activateTab()\"\n (keyup.arrowleft)=\"tabButtonArrowLeft($event)\"\n (keyup.enter)=\"tabButtonActivate($event)\"\n (keyup.space)=\"tabButtonActivate($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 @if (tabHeaderCount || tabHeaderCount === 0) {\n <span class=\"sky-vertical-tab-count\"> ({{ tabHeaderCount }}) </span>\n }\n </div>\n @if (errorIndicator) {\n <sky-status-indicator\n class=\"sky-vertical-tab-heading-error\"\n descriptionType=\"error\"\n indicatorType=\"danger\"\n />\n }\n @if (isMobile && showTabRightArrow) {\n <sky-icon class=\"sky-vertical-tab-right-arrow\" icon=\"chevron-right\" />\n }\n </div>\n</a>\n\n<div #tabContentWrapper skyResponsiveHost>\n <div\n #tabContentPane\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 >\n <ng-content />\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;justify-content:space-between;flex-grow:1}.sky-vertical-tab-heading-error{padding-left:5px}.sky-vertical-tab-count{margin-left:5px}.sky-vertical-tabset-button-disabled{cursor:not-allowed;pointer-events:none}.sky-vertical-tab-right-arrow{padding:3px 10px 0 0;color:#cdcfd2}.sky-vertical-tab-content-pane:focus-visible{outline:none;border:none}:host-context(.sky-theme-modern) .sky-vertical-tab{color:#686c73;cursor:pointer;padding:10px 0 10px 15px;margin:15px 0 15px 10px}:host-context(.sky-theme-modern) .sky-vertical-tab:not(.sky-vertical-tab-active):not(:active):hover{color:#212327;background-color:transparent;padding-left:14px;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:4px solid #00b4f1;color:#212327;padding-left:11px}: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:11px;border-left:4px solid #1870B8}.sky-theme-modern .sky-vertical-tab{color:#686c73;cursor:pointer;padding:10px 0 10px 15px;margin:15px 0 15px 10px}.sky-theme-modern .sky-vertical-tab:not(.sky-vertical-tab-active):not(:active):hover{color:#212327;background-color:transparent;padding-left:14px;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:4px solid #00b4f1;color:#212327;padding-left:11px}.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:11px;border-left:4px solid #1870B8}:host-context(.sky-sectioned-form-tabs-only) .sky-vertical-tab{margin-left:0}\n"], dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i6.λ1, selector: "sky-icon", inputs: ["icon", "iconName", "iconType", "size", "fixedWidth", "variant"] }, { kind: "directive", type: i3.λ2, selector: "[skyId]", exportAs: ["skyId"] }, { kind: "directive", type: i3.SkyResponsiveHostDirective, selector: "[skyResponsiveHost]", exportAs: ["skyResponsiveHost"] }, { kind: "component", type: i7.λ10, selector: "sky-status-indicator", inputs: ["indicatorType", "descriptionType", "customDescription", "helpPopoverContent", "helpPopoverTitle", "helpKey"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
525
525
|
}
|
|
526
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.
|
|
526
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SkyVerticalTabComponent, decorators: [{
|
|
527
527
|
type: Component,
|
|
528
528
|
args: [{ selector: 'sky-vertical-tab', changeDetection: ChangeDetectionStrategy.OnPush, template: "<a\n #tabButton\n class=\"sky-vertical-tab sky-vertical-tabset-button\"\n [attr.aria-controls]=\"isMobile ? null : ariaControls || tabContentPane.id\"\n [attr.aria-disabled]=\"disabled || undefined\"\n [attr.aria-selected]=\"active\"\n [attr.id]=\"tabId\"\n [attr.role]=\"isMobile ? undefined : ariaRole\"\n [ngClass]=\"{\n 'sky-vertical-tab-active': active,\n 'sky-vertical-tabset-button-disabled': disabled,\n 'sky-font-deemphasized': disabled,\n 'sky-deemphasized': disabled\n }\"\n [tabIndex]=\"-1\"\n (click)=\"activateTab()\"\n (keyup.arrowleft)=\"tabButtonArrowLeft($event)\"\n (keyup.enter)=\"tabButtonActivate($event)\"\n (keyup.space)=\"tabButtonActivate($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 @if (tabHeaderCount || tabHeaderCount === 0) {\n <span class=\"sky-vertical-tab-count\"> ({{ tabHeaderCount }}) </span>\n }\n </div>\n @if (errorIndicator) {\n <sky-status-indicator\n class=\"sky-vertical-tab-heading-error\"\n descriptionType=\"error\"\n indicatorType=\"danger\"\n />\n }\n @if (isMobile && showTabRightArrow) {\n <sky-icon class=\"sky-vertical-tab-right-arrow\" icon=\"chevron-right\" />\n }\n </div>\n</a>\n\n<div #tabContentWrapper skyResponsiveHost>\n <div\n #tabContentPane\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 >\n <ng-content />\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;justify-content:space-between;flex-grow:1}.sky-vertical-tab-heading-error{padding-left:5px}.sky-vertical-tab-count{margin-left:5px}.sky-vertical-tabset-button-disabled{cursor:not-allowed;pointer-events:none}.sky-vertical-tab-right-arrow{padding:3px 10px 0 0;color:#cdcfd2}.sky-vertical-tab-content-pane:focus-visible{outline:none;border:none}:host-context(.sky-theme-modern) .sky-vertical-tab{color:#686c73;cursor:pointer;padding:10px 0 10px 15px;margin:15px 0 15px 10px}:host-context(.sky-theme-modern) .sky-vertical-tab:not(.sky-vertical-tab-active):not(:active):hover{color:#212327;background-color:transparent;padding-left:14px;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:4px solid #00b4f1;color:#212327;padding-left:11px}: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:11px;border-left:4px solid #1870B8}.sky-theme-modern .sky-vertical-tab{color:#686c73;cursor:pointer;padding:10px 0 10px 15px;margin:15px 0 15px 10px}.sky-theme-modern .sky-vertical-tab:not(.sky-vertical-tab-active):not(:active):hover{color:#212327;background-color:transparent;padding-left:14px;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:4px solid #00b4f1;color:#212327;padding-left:11px}.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:11px;border-left:4px solid #1870B8}:host-context(.sky-sectioned-form-tabs-only) .sky-vertical-tab{margin-left:0}\n"] }]
|
|
529
529
|
}], ctorParameters: () => [{ type: SkyVerticalTabsetAdapterService }, { type: i0.ChangeDetectorRef }, { type: SkyVerticalTabsetService }, { type: SkyTabIdService, decorators: [{
|
|
@@ -672,10 +672,10 @@ class SkyVerticalTabsetGroupComponent {
|
|
|
672
672
|
#focusButton() {
|
|
673
673
|
this.#adapterService.focusButton(this.groupHeadingButton);
|
|
674
674
|
}
|
|
675
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.
|
|
676
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.
|
|
675
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SkyVerticalTabsetGroupComponent, deps: [{ token: SkyVerticalTabsetService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
676
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: SkyVerticalTabsetGroupComponent, selector: "sky-vertical-tabset-group", inputs: { disabled: "disabled", groupHeading: "groupHeading", open: "open" }, providers: [SkyVerticalTabsetGroupService], queries: [{ propertyName: "tabs", predicate: SkyVerticalTabComponent }], viewQueries: [{ propertyName: "groupHeadingButton", first: true, predicate: ["groupHeadingButton"], descendants: true }], 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-active sky-font-emphasized': isActive(),\n 'sky-vertical-tabset-group-header-sub-open': open,\n 'sky-font-deemphasized': disabled,\n 'sky-deemphasized': disabled\n }\"\n >\n <button\n #groupHeadingButton\n class=\"sky-padding-even-default sky-vertical-tabset-button\"\n role=\"tab\"\n type=\"button\"\n [attr.aria-controls]=\"groupContent.id\"\n [attr.aria-disabled]=\"disabled || undefined\"\n [attr.aria-expanded]=\"!disabled && open\"\n [id]=\"groupId\"\n [ngClass]=\"{\n 'sky-vertical-tabset-button-disabled': disabled\n }\"\n [tabIndex]=\"-1\"\n (click)=\"toggleMenuOpen()\"\n (keyup.arrowleft)=\"groupButtonArrowLeft($event)\"\n (keyup.arrowright)=\"groupButtonArrowRight($event)\"\n >\n {{ groupHeading }}\n <sky-expansion-indicator\n class=\"sky-vertical-tabset-group-expansion-indicator\"\n [direction]=\"!disabled && open ? 'up' : 'down'\"\n />\n </button>\n </div>\n <div\n #groupContent\n class=\"sky-vertical-tabset-group-content\"\n skyId\n [attr.labelledby]=\"groupId\"\n [@.disabled]=\"animationDisabled\"\n [@skyAnimationSlide]=\"slideDirection\"\n (@skyAnimationSlide.done)=\"updateSlideDirection($event)\"\n >\n <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-button-disabled{cursor:not-allowed;pointer-events:none}:host-context(.sky-theme-modern) .sky-vertical-tabset-group{border:none;margin:15px 0}:host-context(.sky-theme-modern) .sky-vertical-tabset-group-content{border:none;padding-left:10px}: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:15px 0}.sky-theme-modern .sky-vertical-tabset-group-content{border:none;padding-left:10px}.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"], dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.λ2, selector: "[skyId]", exportAs: ["skyId"] }, { kind: "component", type: i7.λ15, selector: "sky-expansion-indicator", inputs: ["direction"] }], animations: [skyAnimationSlide], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
677
677
|
}
|
|
678
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.
|
|
678
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SkyVerticalTabsetGroupComponent, decorators: [{
|
|
679
679
|
type: Component,
|
|
680
680
|
args: [{ selector: 'sky-vertical-tabset-group', changeDetection: ChangeDetectionStrategy.OnPush, animations: [skyAnimationSlide], providers: [SkyVerticalTabsetGroupService], 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-active sky-font-emphasized': isActive(),\n 'sky-vertical-tabset-group-header-sub-open': open,\n 'sky-font-deemphasized': disabled,\n 'sky-deemphasized': disabled\n }\"\n >\n <button\n #groupHeadingButton\n class=\"sky-padding-even-default sky-vertical-tabset-button\"\n role=\"tab\"\n type=\"button\"\n [attr.aria-controls]=\"groupContent.id\"\n [attr.aria-disabled]=\"disabled || undefined\"\n [attr.aria-expanded]=\"!disabled && open\"\n [id]=\"groupId\"\n [ngClass]=\"{\n 'sky-vertical-tabset-button-disabled': disabled\n }\"\n [tabIndex]=\"-1\"\n (click)=\"toggleMenuOpen()\"\n (keyup.arrowleft)=\"groupButtonArrowLeft($event)\"\n (keyup.arrowright)=\"groupButtonArrowRight($event)\"\n >\n {{ groupHeading }}\n <sky-expansion-indicator\n class=\"sky-vertical-tabset-group-expansion-indicator\"\n [direction]=\"!disabled && open ? 'up' : 'down'\"\n />\n </button>\n </div>\n <div\n #groupContent\n class=\"sky-vertical-tabset-group-content\"\n skyId\n [attr.labelledby]=\"groupId\"\n [@.disabled]=\"animationDisabled\"\n [@skyAnimationSlide]=\"slideDirection\"\n (@skyAnimationSlide.done)=\"updateSlideDirection($event)\"\n >\n <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-button-disabled{cursor:not-allowed;pointer-events:none}:host-context(.sky-theme-modern) .sky-vertical-tabset-group{border:none;margin:15px 0}:host-context(.sky-theme-modern) .sky-vertical-tabset-group-content{border:none;padding-left:10px}: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:15px 0}.sky-theme-modern .sky-vertical-tabset-group-content{border:none;padding-left:10px}.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"] }]
|
|
681
681
|
}], ctorParameters: () => [{ type: SkyVerticalTabsetService }, { type: i0.ChangeDetectorRef }], propDecorators: { disabled: [{
|
|
@@ -797,8 +797,8 @@ class SkyVerticalTabsetComponent {
|
|
|
797
797
|
tabGroupsArrowUp() {
|
|
798
798
|
this.adapterService.focusPreviousButton(this.tabGroups);
|
|
799
799
|
}
|
|
800
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.
|
|
801
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.
|
|
800
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SkyVerticalTabsetComponent, deps: [{ token: SkyVerticalTabsetAdapterService }, { token: SkyVerticalTabsetService }, { token: i3$1.SkyLibResourcesService }, { token: i0.ChangeDetectorRef }, { token: SkyTabIdService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
801
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: SkyVerticalTabsetComponent, selector: "sky-vertical-tabset", inputs: { showTabsText: "showTabsText", ariaLabel: "ariaLabel", ariaLabelledBy: "ariaLabelledBy", ariaRole: "ariaRole", maintainTabContent: "maintainTabContent" }, outputs: { activeChange: "activeChange" }, providers: [SkyTabIdService, 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\n class=\"sky-vertical-tabset\"\n [tabIndex]=\"tablistHasFocus ? -1 : 0\"\n (focus)=\"tabsetFocus()\"\n>\n <!--\n ARIA rules do not allow tabpanel elements to be children of a tablist element.\n However, the markup for each sky-vertical-tab component includes both the tab button\n and its panel, making the panel element a child of its tablist. Moreover, our\n sky-vertical-tab components can be grouped within collapsible containers, which also\n violates accessibility rules because only tab buttons can be children of a tablist.\n To address this, we create an empty tablist element with an aria-owns attribute,\n pointing to each tab element individually. That way, we don't have to worry about the\n structure for each sky-vertical-tab component in order to satisfy accessibility\n guidelines.\n -->\n <span\n aria-orientation=\"vertical\"\n class=\"sky-vertical-tabset-tablist\"\n [attr.aria-label]=\"ariaLabel\"\n [attr.aria-labelledby]=\"ariaLabelledBy\"\n [attr.aria-owns]=\"(tabIdSvc.ids | async)?.join(' ') || undefined\"\n [attr.role]=\"isMobile ? undefined : ariaRole\"\n ></span>\n @if (maintainTabContent || tabService.tabsVisible()) {\n <div\n #groupContainerWrapper\n class=\"sky-vertical-tabset-group-container\"\n [@tabGroupEnter]=\"tabService.animationTabsVisibleState\"\n [ngClass]=\"{ 'sky-vertical-tabset-hidden': !tabService.tabsVisible() }\"\n (keydown.arrowdown)=\"tabGroupsArrowDown(); $event.preventDefault()\"\n (keydown.arrowup)=\"tabGroupsArrowUp(); $event.preventDefault()\"\n (focusin)=\"tabGroupsFocusIn()\"\n (focusout)=\"tabGroupsFocusOut()\"\n >\n <ng-content />\n </div>\n }\n @if (maintainTabContent || tabService.contentVisible()) {\n <div\n #contentContainerWrapper\n class=\"sky-vertical-tabset-content\"\n [ngClass]=\"{\n 'sky-vertical-tabset-content-hidden': !tabService.contentVisible()\n }\"\n [@contentEnter]=\"tabService.animationContentVisibleState\"\n >\n <div #skySideContent></div>\n @if (!tabService.tabsVisible()) {\n <button\n class=\"sky-btn sky-btn-primary sky-vertical-tabset-show-tabs-btn\"\n type=\"button\"\n (click)=\"tabService.showTabs()\"\n >\n <sky-icon icon=\"chevron-left\" />\n {{ showTabsText }}\n </button>\n }\n </div>\n }\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)>:host .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"], dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i6.λ1, selector: "sky-icon", inputs: ["icon", "iconName", "iconType", "size", "fixedWidth", "variant"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }], animations: [
|
|
802
802
|
trigger('tabGroupEnter', [
|
|
803
803
|
transition(`${HIDDEN_STATE} => ${VISIBLE_STATE}`, [
|
|
804
804
|
style({ transform: 'translate(-100%)' }),
|
|
@@ -813,7 +813,7 @@ class SkyVerticalTabsetComponent {
|
|
|
813
813
|
]),
|
|
814
814
|
], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
815
815
|
}
|
|
816
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.
|
|
816
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SkyVerticalTabsetComponent, decorators: [{
|
|
817
817
|
type: Component,
|
|
818
818
|
args: [{ selector: 'sky-vertical-tabset', providers: [SkyTabIdService, SkyVerticalTabsetService], changeDetection: ChangeDetectionStrategy.OnPush, animations: [
|
|
819
819
|
trigger('tabGroupEnter', [
|
|
@@ -853,8 +853,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImpor
|
|
|
853
853
|
}] } });
|
|
854
854
|
|
|
855
855
|
class SkyVerticalTabsetModule {
|
|
856
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.
|
|
857
|
-
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.
|
|
856
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SkyVerticalTabsetModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
857
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: SkyVerticalTabsetModule, declarations: [SkyVerticalTabsetComponent,
|
|
858
858
|
SkyVerticalTabsetGroupComponent,
|
|
859
859
|
SkyVerticalTabComponent], imports: [CommonModule,
|
|
860
860
|
SkyIconModule,
|
|
@@ -866,7 +866,7 @@ class SkyVerticalTabsetModule {
|
|
|
866
866
|
SkyThemeModule], exports: [SkyVerticalTabsetComponent,
|
|
867
867
|
SkyVerticalTabsetGroupComponent,
|
|
868
868
|
SkyVerticalTabComponent] }); }
|
|
869
|
-
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.
|
|
869
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SkyVerticalTabsetModule, providers: [SkyVerticalTabsetAdapterService], imports: [CommonModule,
|
|
870
870
|
SkyIconModule,
|
|
871
871
|
SkyIdModule,
|
|
872
872
|
SkyExpansionIndicatorModule,
|
|
@@ -874,7 +874,7 @@ class SkyVerticalTabsetModule {
|
|
|
874
874
|
SkyTabsResourcesModule,
|
|
875
875
|
SkyThemeModule] }); }
|
|
876
876
|
}
|
|
877
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.
|
|
877
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SkyVerticalTabsetModule, decorators: [{
|
|
878
878
|
type: NgModule,
|
|
879
879
|
args: [{
|
|
880
880
|
declarations: [
|
|
@@ -926,10 +926,10 @@ class SkySectionedFormService {
|
|
|
926
926
|
requiredFieldChanged(isRequired) {
|
|
927
927
|
this.requiredChange.next(isRequired);
|
|
928
928
|
}
|
|
929
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.
|
|
930
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.
|
|
929
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SkySectionedFormService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
930
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SkySectionedFormService }); }
|
|
931
931
|
}
|
|
932
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.
|
|
932
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SkySectionedFormService, decorators: [{
|
|
933
933
|
type: Injectable
|
|
934
934
|
}] });
|
|
935
935
|
|
|
@@ -971,10 +971,10 @@ class SkySectionedFormSectionComponent {
|
|
|
971
971
|
this.#ngUnsubscribe.next();
|
|
972
972
|
this.#ngUnsubscribe.complete();
|
|
973
973
|
}
|
|
974
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.
|
|
975
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.
|
|
974
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SkySectionedFormSectionComponent, deps: [{ token: SkySectionedFormService }, { token: SkyVerticalTabsetService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
975
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", 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 />\n</sky-vertical-tab>\n", styles: [".sky-tab-field-required:not(.sky-theme-modern *){--sky-override-required-color: var(--sky-highlight-color-danger);--sky-override-required-space: var(--sky-padding-half)}:host .sky-tab-field-required ::ng-deep .sky-vertical-tab-heading:after{content:\"*\";content:\"*\"/\"\";color:var(--sky-override-required-color, var(--sky-color-text-danger));padding-left:var(--sky-override-required-space, var(--sky-space-gap-label-s))}\n"], dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: SkyVerticalTabComponent, selector: "sky-vertical-tab", inputs: ["active", "ariaControls", "ariaRole", "disabled", "errorIndicator", "tabHeaderCount", "tabHeading", "showTabRightArrow", "tabId"] }] }); }
|
|
976
976
|
}
|
|
977
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.
|
|
977
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SkySectionedFormSectionComponent, decorators: [{
|
|
978
978
|
type: Component,
|
|
979
979
|
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 />\n</sky-vertical-tab>\n", styles: [".sky-tab-field-required:not(.sky-theme-modern *){--sky-override-required-color: var(--sky-highlight-color-danger);--sky-override-required-space: var(--sky-padding-half)}:host .sky-tab-field-required ::ng-deep .sky-vertical-tab-heading:after{content:\"*\";content:\"*\"/\"\";color:var(--sky-override-required-color, var(--sky-color-text-danger));padding-left:var(--sky-override-required-space, var(--sky-space-gap-label-s))}\n"] }]
|
|
980
980
|
}], ctorParameters: () => [{ type: SkySectionedFormService }, { type: SkyVerticalTabsetService }, { type: i0.ChangeDetectorRef }], propDecorators: { heading: [{
|
|
@@ -1123,8 +1123,8 @@ class SkySectionedFormComponent {
|
|
|
1123
1123
|
}
|
|
1124
1124
|
});
|
|
1125
1125
|
}
|
|
1126
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.
|
|
1127
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.
|
|
1126
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SkySectionedFormComponent, deps: [{ token: SkyVerticalTabsetService }, { token: i0.ChangeDetectorRef }, { token: SkyTabIdService }, { token: i3.SkyLogService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1127
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: SkySectionedFormComponent, selector: "sky-sectioned-form", inputs: { maintainSectionContent: "maintainSectionContent", messageStream: "messageStream" }, outputs: { indexChanged: "indexChanged", tabsVisibleChanged: "tabsVisibleChanged" }, providers: [SkyTabIdService, SkyVerticalTabsetService], viewQueries: [{ propertyName: "content", first: true, predicate: ["skySectionSideContent"], descendants: true }], ngImport: i0, template: "<div class=\"sky-sectioned-form\" (window:resize)=\"tabService.updateContent()\">\n <!--\n ARIA rules do not allow tabpanel elements to be children of a tablist element.\n However, the markup for each sky-vertical-tab component includes both the tab button\n and its panel, making the panel element a child of its tablist. Moreover, our\n sky-vertical-tab components can be grouped within collapsible containers, which also\n violates accessibility rules because only tab buttons can be children of a tablist.\n To address this, we create an empty tablist element with an aria-owns attribute,\n pointing to each tab element individually. That way, we don't have to worry about the\n structure for each sky-vertical-tab component in order to satisfy accessibility\n guidelines.\n -->\n <span\n aria-orientation=\"vertical\"\n [attr.aria-owns]=\"ariaOwns\"\n [attr.role]=\"ariaRole\"\n ></span>\n @if (maintainSectionContent || tabsVisible()) {\n <div\n class=\"sky-sectioned-form-tabs\"\n [ngClass]=\"{\n 'sky-sectioned-form-tabs-hidden': !tabsVisible(),\n 'sky-sectioned-form-tabs-only': !tabService.contentVisible()\n }\"\n [@tabEnter]=\"tabService.animationTabsVisibleState\"\n >\n <ng-content />\n </div>\n }\n @if (maintainSectionContent || tabService.contentVisible()) {\n <div\n #skySectionSideContent\n class=\"sky-sectioned-form-content\"\n [ngClass]=\"{\n 'sky-sectioned-form-content-hidden': !tabService.contentVisible()\n }\"\n [@contentEnter]=\"tabService.animationContentVisibleState\"\n ></div>\n }\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}:host .sky-sectioned-form-tabs+.sky-sectioned-form-content{border-left:1px solid var(--sky-border-color-neutral-medium)}:host .sky-sectioned-form-content{padding:var(--sky-padding-even-md) var(--sky-padding-even-xl)}:host .sky-sectioned-form-tabs-only{padding:var(--sky-padding-even-md)}: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}:host-context(.sky-responsive-container-xs) .sky-sectioned-form-tabs+.sky-sectioned-form-content,:host-context(.sky-responsive-container-sm) .sky-sectioned-form-tabs+.sky-sectioned-form-content,:host-context(.sky-responsive-container-md) .sky-sectioned-form-tabs+.sky-sectioned-form-content,:host-context(.sky-responsive-container-lg) .sky-sectioned-form-tabs+.sky-sectioned-form-content{border-left:1px solid var(--sky-border-color-neutral-medium)}: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{padding:var(--sky-padding-even-md) var(--sky-padding-even-xl)}:host-context(.sky-responsive-container-xs) .sky-sectioned-form-tabs-only,:host-context(.sky-responsive-container-sm) .sky-sectioned-form-tabs-only,:host-context(.sky-responsive-container-md) .sky-sectioned-form-tabs-only,:host-context(.sky-responsive-container-lg) .sky-sectioned-form-tabs-only{padding:var(--sky-padding-even-md)}@media (min-width: 768px){:host .sky-sectioned-form{display:flex;max-height:100%}:host .sky-sectioned-form-content{flex-basis:70%;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%;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}:host-context(sky-modal) .sky-sectioned-form{min-height:460px}:host-context(sky-modal-content)>:host .sky-sectioned-form,:host-context(sky-modal-content)>form :host .sky-sectioned-form{margin:-15px}.sky-sectioned-form-tabs-hidden,.sky-sectioned-form-content-hidden{display:none}:host-context(.sky-theme-modern) :host-context(sky-modal-content)>:host .sky-sectioned-form,:host-context(.sky-theme-modern) :host-context(sky-modal-content)>form :host .sky-sectioned-form{margin:-10px -30px -30px}.sky-theme-modern :host-context(sky-modal-content)>:host .sky-sectioned-form,.sky-theme-modern :host-context(sky-modal-content)>form :host .sky-sectioned-form{margin:-10px -30px -30px}\n"], dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], animations: [
|
|
1128
1128
|
trigger('tabEnter', [
|
|
1129
1129
|
transition(`${HIDDEN_STATE} => ${VISIBLE_STATE}`, [
|
|
1130
1130
|
style({ transform: 'translate(-100%)' }),
|
|
@@ -1139,7 +1139,7 @@ class SkySectionedFormComponent {
|
|
|
1139
1139
|
]),
|
|
1140
1140
|
], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1141
1141
|
}
|
|
1142
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.
|
|
1142
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SkySectionedFormComponent, decorators: [{
|
|
1143
1143
|
type: Component,
|
|
1144
1144
|
args: [{ selector: 'sky-sectioned-form', providers: [SkyTabIdService, SkyVerticalTabsetService], changeDetection: ChangeDetectionStrategy.OnPush, animations: [
|
|
1145
1145
|
trigger('tabEnter', [
|
|
@@ -1169,17 +1169,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImpor
|
|
|
1169
1169
|
}] } });
|
|
1170
1170
|
|
|
1171
1171
|
class SkySectionedFormModule {
|
|
1172
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.
|
|
1173
|
-
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.
|
|
1172
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SkySectionedFormModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
1173
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: SkySectionedFormModule, declarations: [SkySectionedFormComponent, SkySectionedFormSectionComponent], imports: [CommonModule,
|
|
1174
1174
|
SkyCheckboxModule,
|
|
1175
1175
|
SkyThemeModule,
|
|
1176
1176
|
SkyVerticalTabsetModule], exports: [SkySectionedFormComponent, SkySectionedFormSectionComponent] }); }
|
|
1177
|
-
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.
|
|
1177
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SkySectionedFormModule, imports: [CommonModule,
|
|
1178
1178
|
SkyCheckboxModule,
|
|
1179
1179
|
SkyThemeModule,
|
|
1180
1180
|
SkyVerticalTabsetModule] }); }
|
|
1181
1181
|
}
|
|
1182
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.
|
|
1182
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SkySectionedFormModule, decorators: [{
|
|
1183
1183
|
type: NgModule,
|
|
1184
1184
|
args: [{
|
|
1185
1185
|
declarations: [SkySectionedFormComponent, SkySectionedFormSectionComponent],
|
|
@@ -1200,10 +1200,10 @@ class SkyTabButtonAdapterService {
|
|
|
1200
1200
|
focusButtonLink(buttonEl) {
|
|
1201
1201
|
buttonEl.nativeElement.querySelector('a').focus();
|
|
1202
1202
|
}
|
|
1203
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.
|
|
1204
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.
|
|
1203
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SkyTabButtonAdapterService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
1204
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SkyTabButtonAdapterService }); }
|
|
1205
1205
|
}
|
|
1206
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.
|
|
1206
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SkyTabButtonAdapterService, decorators: [{
|
|
1207
1207
|
type: Injectable
|
|
1208
1208
|
}] });
|
|
1209
1209
|
|
|
@@ -1390,10 +1390,10 @@ class SkyTabsetService {
|
|
|
1390
1390
|
}
|
|
1391
1391
|
return prevIndex;
|
|
1392
1392
|
}
|
|
1393
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.
|
|
1394
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.
|
|
1393
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SkyTabsetService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
1394
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SkyTabsetService }); }
|
|
1395
1395
|
}
|
|
1396
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.
|
|
1396
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SkyTabsetService, decorators: [{
|
|
1397
1397
|
type: Injectable
|
|
1398
1398
|
}], ctorParameters: () => [] });
|
|
1399
1399
|
|
|
@@ -1513,10 +1513,10 @@ class SkyTabButtonComponent {
|
|
|
1513
1513
|
}
|
|
1514
1514
|
this.#changeDetectorRef.markForCheck();
|
|
1515
1515
|
}
|
|
1516
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.
|
|
1517
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.
|
|
1516
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SkyTabButtonComponent, deps: [{ token: i0.ElementRef }, { token: SkyTabButtonAdapterService }, { token: i0.ChangeDetectorRef }, { token: SkyTabsetService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1517
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: SkyTabButtonComponent, selector: "sky-tab-button", inputs: { active: "active", ariaControls: "ariaControls", buttonHref: "buttonHref", buttonId: "buttonId", buttonText: "buttonText", buttonTextCount: "buttonTextCount", closeable: "closeable", disabled: "disabled", tabIndex: "tabIndex", tabNumber: "tabNumber", totalTabsCount: "totalTabsCount", tabStyle: "tabStyle" }, outputs: { buttonClick: "buttonClick", closeClick: "closeClick" }, providers: [SkyTabButtonAdapterService], 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 #tabButtonEl\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 [attr.aria-label]=\"\n tabStyle === 'wizard'\n ? ('skyux_wizard_sr_step_' + wizardStepState\n | skyLibResources: tabNumber : totalTabsCount : buttonText)\n : null\n \"\n [attr.aria-labelledby]=\"tabStyle === 'wizard' ? null : tabHeading.id\"\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]=\"active ? '0' : '-1'\"\n (click)=\"onButtonClick($event)\"\n (keydown)=\"onTabButtonKeyDown($event)\"\n (focus)=\"onFocus()\"\n >\n <span class=\"sky-tab-heading\" [attr.aria-hidden]=\"true\">\n <span #tabHeading=\"skyId\" skyId>\n {{ buttonText }}\n @if (buttonTextCount !== undefined) {\n <span class=\"sky-tab-header-count\">\n {{ buttonTextCount }}\n </span>\n }\n </span>\n @if (closeable) {\n <span\n class=\"sky-btn-tab-close\"\n [tabindex]=\"closeBtnTabIndex\"\n [attr.aria-label]=\"'skyux_tab_close' | skyLibResources: buttonText\"\n [ngClass]=\"{\n 'sky-btn-tab-close-disabled': disabled\n }\"\n (click)=\"onCloseClick($event)\"\n (keydown.enter)=\"onCloseClick($event)\"\n >\n <sky-icon icon=\"remove\" />\n </span>\n }\n </span>\n </a>\n</div>\n", styles: ["sky-tab-button:not(.sky-theme-modern *){--sky-override-closeable-tab-padding-right: 43px;--sky-override-tab-close-active-hover-color: #fff;--sky-override-tab-close-color: #686c73;--sky-override-tab-close-hover-color: #212327;--sky-override-tab-close-padding: 1px 6px;--sky-override-tab-close-position-right: 10px;--sky-override-tab-close-position-top: 10px;--sky-override-tab-margin-right: 5px}.sky-theme-modern:not(.sky-theme-brand-blackbaud) sky-tab-button{--sky-override-closeable-tab-padding-right: 44px;--sky-override-tab-close-padding: var(--modern-size-1) var(--modern-size-6);--sky-override-tab-close-position-right: var(--modern-size-10);--sky-override-tab-close-position-top: var(--modern-size-12)}.sky-btn-tab-wrapper{display:inline-block;position:relative;margin-right:var(--sky-override-tab-margin-right, var(--sky-space-gap-action_group-m))}.sky-btn-tab-wrapper .sky-btn-tab-close{position:absolute;top:var(--sky-override-tab-close-position-top, var(--sky-space-gap-icon-m));right:var(--sky-override-tab-close-position-right, var(--sky-space-gap-icon-m));color:var(--sky-override-tab-close-color, var(--sky-color-icon-deemphasized));padding:var(--sky-override-tab-close-padding, 0 var(--sky-space-inset-balanced-xs))}.sky-btn-tab-wrapper .sky-btn-tab-close:hover{color:var(--sky-override-tab-close-hover-color, var(--sky-color-icon-default));transition:color .15s}.sky-btn-tab-wrapper.sky-btn-tab-wrapper-selected:not(.sky-btn-tab-wrapper-disabled) .sky-btn-tab-close{color:var(--sky-override-tab-close-active-hover-color, var(--sky-color-icon-deemphasized))}.sky-btn-tab-wrapper.sky-btn-tab-wrapper-disabled{cursor:not-allowed}.sky-btn-tab-wrapper .sky-tab-btn-closeable{padding-right:var(--sky-override-closeable-tab-padding-right, calc(var(--sky-space-inset-pillarbox-2_3-right-m) + var(--sky-space-gap-text_action-xs) + var(--sky-space-inset-balanced-xs) + var(--sky-space-inset-balanced-xs) + var(--sky-font-size-body-m)))}\n"], dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i6.λ1, selector: "sky-icon", inputs: ["icon", "iconName", "iconType", "size", "fixedWidth", "variant"] }, { kind: "directive", type: i3.λ2, selector: "[skyId]", exportAs: ["skyId"] }, { kind: "pipe", type: i3$1.SkyLibResourcesPipe, name: "skyLibResources" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
1518
1518
|
}
|
|
1519
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.
|
|
1519
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SkyTabButtonComponent, decorators: [{
|
|
1520
1520
|
type: Component,
|
|
1521
1521
|
args: [{ selector: 'sky-tab-button', providers: [SkyTabButtonAdapterService], 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 #tabButtonEl\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 [attr.aria-label]=\"\n tabStyle === 'wizard'\n ? ('skyux_wizard_sr_step_' + wizardStepState\n | skyLibResources: tabNumber : totalTabsCount : buttonText)\n : null\n \"\n [attr.aria-labelledby]=\"tabStyle === 'wizard' ? null : tabHeading.id\"\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]=\"active ? '0' : '-1'\"\n (click)=\"onButtonClick($event)\"\n (keydown)=\"onTabButtonKeyDown($event)\"\n (focus)=\"onFocus()\"\n >\n <span class=\"sky-tab-heading\" [attr.aria-hidden]=\"true\">\n <span #tabHeading=\"skyId\" skyId>\n {{ buttonText }}\n @if (buttonTextCount !== undefined) {\n <span class=\"sky-tab-header-count\">\n {{ buttonTextCount }}\n </span>\n }\n </span>\n @if (closeable) {\n <span\n class=\"sky-btn-tab-close\"\n [tabindex]=\"closeBtnTabIndex\"\n [attr.aria-label]=\"'skyux_tab_close' | skyLibResources: buttonText\"\n [ngClass]=\"{\n 'sky-btn-tab-close-disabled': disabled\n }\"\n (click)=\"onCloseClick($event)\"\n (keydown.enter)=\"onCloseClick($event)\"\n >\n <sky-icon icon=\"remove\" />\n </span>\n }\n </span>\n </a>\n</div>\n", styles: ["sky-tab-button:not(.sky-theme-modern *){--sky-override-closeable-tab-padding-right: 43px;--sky-override-tab-close-active-hover-color: #fff;--sky-override-tab-close-color: #686c73;--sky-override-tab-close-hover-color: #212327;--sky-override-tab-close-padding: 1px 6px;--sky-override-tab-close-position-right: 10px;--sky-override-tab-close-position-top: 10px;--sky-override-tab-margin-right: 5px}.sky-theme-modern:not(.sky-theme-brand-blackbaud) sky-tab-button{--sky-override-closeable-tab-padding-right: 44px;--sky-override-tab-close-padding: var(--modern-size-1) var(--modern-size-6);--sky-override-tab-close-position-right: var(--modern-size-10);--sky-override-tab-close-position-top: var(--modern-size-12)}.sky-btn-tab-wrapper{display:inline-block;position:relative;margin-right:var(--sky-override-tab-margin-right, var(--sky-space-gap-action_group-m))}.sky-btn-tab-wrapper .sky-btn-tab-close{position:absolute;top:var(--sky-override-tab-close-position-top, var(--sky-space-gap-icon-m));right:var(--sky-override-tab-close-position-right, var(--sky-space-gap-icon-m));color:var(--sky-override-tab-close-color, var(--sky-color-icon-deemphasized));padding:var(--sky-override-tab-close-padding, 0 var(--sky-space-inset-balanced-xs))}.sky-btn-tab-wrapper .sky-btn-tab-close:hover{color:var(--sky-override-tab-close-hover-color, var(--sky-color-icon-default));transition:color .15s}.sky-btn-tab-wrapper.sky-btn-tab-wrapper-selected:not(.sky-btn-tab-wrapper-disabled) .sky-btn-tab-close{color:var(--sky-override-tab-close-active-hover-color, var(--sky-color-icon-deemphasized))}.sky-btn-tab-wrapper.sky-btn-tab-wrapper-disabled{cursor:not-allowed}.sky-btn-tab-wrapper .sky-tab-btn-closeable{padding-right:var(--sky-override-closeable-tab-padding-right, calc(var(--sky-space-inset-pillarbox-2_3-right-m) + var(--sky-space-gap-text_action-xs) + var(--sky-space-inset-balanced-xs) + var(--sky-space-inset-balanced-xs) + var(--sky-font-size-body-m)))}\n"] }]
|
|
1522
1522
|
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: SkyTabButtonAdapterService }, { type: i0.ChangeDetectorRef }, { type: SkyTabsetService }], propDecorators: { active: [{
|
|
@@ -1669,10 +1669,10 @@ class SkyTabsetPermalinkService {
|
|
|
1669
1669
|
});
|
|
1670
1670
|
return params;
|
|
1671
1671
|
}
|
|
1672
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.
|
|
1673
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.
|
|
1672
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SkyTabsetPermalinkService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
1673
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SkyTabsetPermalinkService }); }
|
|
1674
1674
|
}
|
|
1675
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.
|
|
1675
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SkyTabsetPermalinkService, decorators: [{
|
|
1676
1676
|
type: Injectable
|
|
1677
1677
|
}] });
|
|
1678
1678
|
|
|
@@ -1841,10 +1841,10 @@ class SkyTabComponent {
|
|
|
1841
1841
|
this.#permalinkService.urlify(this.permalinkValue) ||
|
|
1842
1842
|
this.#permalinkService.urlify(this.tabHeading);
|
|
1843
1843
|
}
|
|
1844
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.
|
|
1845
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.
|
|
1844
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SkyTabComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: SkyTabsetPermalinkService }, { token: SkyTabsetService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1845
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: SkyTabComponent, selector: "sky-tab", inputs: { active: "active", disabled: "disabled", permalinkValue: "permalinkValue", tabHeaderCount: "tabHeaderCount", tabHeading: "tabHeading", tabIndexValue: "tabIndexValue", layout: "layout" }, outputs: { close: "close" }, host: { properties: { "class": "this.cssClass" } }, usesOnChanges: true, hostDirectives: [{ directive: i3.SkyResponsiveHostDirective }], 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 />\n</div>\n", styles: [":host{display:block}:host.sky-layout-host-fit{display:flex;flex-grow:1;position:static}:host.sky-layout-host-fit .sky-tab{flex-grow:1;position:relative}.sky-tab{flex-grow:var(--sky-layout-host-content-flex-grow, 0);overflow:var(--sky-layout-host-content-overflow, visible);padding:var(--sky-layout-host-content-spacing, 0);position:var(--sky-layout-host-content-position, static)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1846
1846
|
}
|
|
1847
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.
|
|
1847
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SkyTabComponent, decorators: [{
|
|
1848
1848
|
type: Component,
|
|
1849
1849
|
args: [{ hostDirectives: [SkyResponsiveHostDirective], 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 />\n</div>\n", styles: [":host{display:block}:host.sky-layout-host-fit{display:flex;flex-grow:1;position:static}:host.sky-layout-host-fit .sky-tab{flex-grow:1;position:relative}.sky-tab{flex-grow:var(--sky-layout-host-content-flex-grow, 0);overflow:var(--sky-layout-host-content-overflow, visible);padding:var(--sky-layout-host-content-spacing, 0);position:var(--sky-layout-host-content-position, static)}\n"] }]
|
|
1850
1850
|
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: SkyTabsetPermalinkService }, { type: SkyTabsetService }], propDecorators: { active: [{
|
|
@@ -1878,10 +1878,10 @@ class SkyTabsetNavButtonDisabledPipe {
|
|
|
1878
1878
|
}
|
|
1879
1879
|
return !tabToSelectExists || !!tabToSelectIsDisabled;
|
|
1880
1880
|
}
|
|
1881
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.
|
|
1882
|
-
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "18.2.
|
|
1881
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SkyTabsetNavButtonDisabledPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
|
|
1882
|
+
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: SkyTabsetNavButtonDisabledPipe, name: "skyTabsetNavButtonDisabled" }); }
|
|
1883
1883
|
}
|
|
1884
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.
|
|
1884
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SkyTabsetNavButtonDisabledPipe, decorators: [{
|
|
1885
1885
|
type: Pipe,
|
|
1886
1886
|
args: [{
|
|
1887
1887
|
name: 'skyTabsetNavButtonDisabled',
|
|
@@ -2013,10 +2013,10 @@ class SkyTabsetNavButtonComponent {
|
|
|
2013
2013
|
}
|
|
2014
2014
|
}
|
|
2015
2015
|
}
|
|
2016
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.
|
|
2017
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.
|
|
2016
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SkyTabsetNavButtonComponent, deps: [{ token: i3.SkyLogService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2017
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: SkyTabsetNavButtonComponent, selector: "sky-tabset-nav-button", inputs: { tabset: "tabset", buttonType: "buttonType", buttonText: "buttonText", disabled: "disabled" }, ngImport: i0, template: "@if (isVisible) {\n <button\n class=\"sky-btn sky-margin-inline-sm\"\n [attr.aria-controls]=\"ariaControls\"\n [disabled]=\"\n disabled\n | skyTabsetNavButtonDisabled\n : buttonType\n : !!tabToSelect\n : tabToSelect?.disabled\n \"\n [ngClass]=\"buttonClassName\"\n [type]=\"type\"\n (click)=\"buttonType === 'finish' ? null : buttonClick()\"\n >\n {{ buttonText || ('skyux_tabs_navigator_' + buttonType | skyLibResources) }}\n </button>\n}\n", dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: i3$1.SkyLibResourcesPipe, name: "skyLibResources" }, { kind: "pipe", type: SkyTabsetNavButtonDisabledPipe, name: "skyTabsetNavButtonDisabled" }] }); }
|
|
2018
2018
|
}
|
|
2019
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.
|
|
2019
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SkyTabsetNavButtonComponent, decorators: [{
|
|
2020
2020
|
type: Component,
|
|
2021
2021
|
args: [{ selector: 'sky-tabset-nav-button', template: "@if (isVisible) {\n <button\n class=\"sky-btn sky-margin-inline-sm\"\n [attr.aria-controls]=\"ariaControls\"\n [disabled]=\"\n disabled\n | skyTabsetNavButtonDisabled\n : buttonType\n : !!tabToSelect\n : tabToSelect?.disabled\n \"\n [ngClass]=\"buttonClassName\"\n [type]=\"type\"\n (click)=\"buttonType === 'finish' ? null : buttonClick()\"\n >\n {{ buttonText || ('skyux_tabs_navigator_' + buttonType | skyLibResources) }}\n </button>\n}\n" }]
|
|
2022
2022
|
}], ctorParameters: () => [{ type: i3.SkyLogService }], propDecorators: { tabset: [{
|
|
@@ -2087,10 +2087,10 @@ class SkyTabsetAdapterService {
|
|
|
2087
2087
|
}
|
|
2088
2088
|
return firstTabRect.left - tabsetRect.left;
|
|
2089
2089
|
}
|
|
2090
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.
|
|
2091
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.
|
|
2090
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SkyTabsetAdapterService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
2091
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SkyTabsetAdapterService }); }
|
|
2092
2092
|
}
|
|
2093
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.
|
|
2093
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SkyTabsetAdapterService, decorators: [{
|
|
2094
2094
|
type: Injectable
|
|
2095
2095
|
}], ctorParameters: () => [] });
|
|
2096
2096
|
|
|
@@ -2515,14 +2515,14 @@ class SkyTabsetComponent {
|
|
|
2515
2515
|
this.activeChange.emit(activeIndex);
|
|
2516
2516
|
}
|
|
2517
2517
|
}
|
|
2518
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.
|
|
2519
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.
|
|
2518
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SkyTabsetComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: SkyTabsetAdapterService }, { token: SkyTabsetPermalinkService }, { token: SkyTabsetService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2519
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", 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" }, host: { properties: { "class": "this.cssClass" } }, providers: [
|
|
2520
2520
|
SkyTabsetAdapterService,
|
|
2521
2521
|
SkyTabsetPermalinkService,
|
|
2522
2522
|
SkyTabsetService,
|
|
2523
2523
|
], 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 (keydown.arrowright)=\"onRightKeyDown()\"\n (keydown.arrowleft)=\"onLeftKeyDown()\"\n (keydown.home)=\"onHomeKeyDown()\"\n (keydown.end)=\"onEndKeyDown()\"\n>\n <span class=\"sky-tabset-dropdown\">\n @if (tabDisplayMode === 'dropdown') {\n <sky-dropdown buttonType=\"tab\">\n <sky-dropdown-button>\n {{ dropdownTriggerButtonText }}\n </sky-dropdown-button>\n <sky-dropdown-menu>\n @for (tabButton of tabButtons; track tabButton.buttonId) {\n <sky-dropdown-item class=\"sky-tab-dropdown-menu-item\">\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 />\n </div>\n </sky-dropdown-item>\n }\n </sky-dropdown-menu>\n </sky-dropdown>\n }\n </span>\n <span class=\"sky-tabset-tabs\">\n @for (tabButton of tabButtons; track tabButton.buttonId) {\n <ng-container\n *ngTemplateOutlet=\"\n tabButtonTemplate;\n context: {\n $implicit: tabButton\n }\n \"\n />\n }\n </span>\n <span class=\"sky-tabset-btns\">\n @if (newTab.observers.length > 0) {\n <button\n class=\"sky-btn sky-btn-icon sky-tabset-btn-new\"\n type=\"button\"\n [attr.aria-label]=\"'skyux_tab_add' | skyLibResources\"\n [skyThemeClass]=\"{\n 'sky-margin-inline-compact': 'default'\n }\"\n (click)=\"onNewTabClick()\"\n >\n <sky-icon icon=\"plus-circle\" size=\"lg\" />\n </button>\n }\n @if (openTab.observers.length > 0) {\n <button\n class=\"sky-btn sky-btn-icon sky-tabset-btn-open\"\n type=\"button\"\n [attr.aria-label]=\"'skyux_tab_open' | skyLibResources\"\n [skyThemeClass]=\"{\n 'sky-margin-inline-compact': 'default'\n }\"\n (click)=\"onOpenTabClick()\"\n >\n <sky-icon icon=\"folder-open-o\" size=\"lg\" />\n </button>\n }\n </span>\n</div>\n<ng-content />\n\n<ng-template #tabButtonTemplate let-tabButton>\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 [tabIndex]=\"tabButton.tabIndex\"\n [tabStyle]=\"tabStyle\"\n [tabNumber]=\"tabButton.tabNumber\"\n [totalTabsCount]=\"tabButton.totalTabsCount\"\n (buttonClick)=\"onTabButtonClick(tabButton)\"\n (closeClick)=\"onTabCloseClick(tabButton)\"\n />\n</ng-template>\n", styles: ["sky-tabset:not(.sky-theme-modern *){--sky-override-tabset-border-bottom: 2px solid #0974a1;--sky-override-tabset-button-color: #0974a1;--sky-override-tabset-button-group-padding-left: 10px;--sky-override-tabset-button-margin-right: 5px;--sky-override-tabset-modal-margin: 0 -15px 20px;--sky-override-tabset-modal-padding-left: 15px;--sky-override-tabset-modal-padding-none: 0;--sky-override-tabset-overflow: hidden;--sky-override-tabset-padding: 0 0 0 var(--sky-layout-host-tab-content-spacing, 15px);--sky-override-tabset-wizard-border-bottom: none;--sky-override-tabset-wizard-modal-margin: 0 0 20px}.sky-theme-modern.sky-theme-brand-blackbaud sky-tabset .sky-tabset-btn-new,.sky-theme-modern.sky-theme-brand-blackbaud sky-tabset .sky-tabset-btn-open{height:36px}sky-tabset.sky-tabset-layout-fit{position:absolute;inset:0;display:flex;flex-direction:column}sky-tabset.sky-tabset-layout-fit .sky-tabset{flex-grow:0}.sky-tabset{--sky-tabset-margin: 0;align-items:center;border-bottom:var(--sky-override-tabset-border-bottom, var(--sky-border-width-divider) var(--sky-border-style-divider) var(--sky-color-border-divider));display:flex;list-style-type:none;margin:var(--sky-tabset-margin);padding:var(--sky-override-tabset-padding, 0 0 0 var(--sky-layout-host-tab-content-spacing, var(--sky-space-inset-tabs-m)));white-space:nowrap;flex-grow:var(--sky-layout-host-content-flex-grow, 0);overflow:var(--sky-layout-host-content-overflow, var(--sky-override-tabset-overflow, visible));position:var(--sky-layout-host-content-position, static)}.sky-tabset.sky-tabset-style-wizard{border-bottom:var(--sky-override-tabset-wizard-border-bottom-style, var(--sky-border-width-divider) var(--sky-border-style-divider) var(--sky-color-border-divider))}.sky-modal-content .sky-tabset-style-tabs{--sky-tabset-margin: var( --sky-override-tabset-modal-margin, calc(var(--sky-space-inset-floated-top-m) * -1) calc(var(--sky-space-inset-floated-right-m) * -1) var(--sky-space-inset-floated-bottom-m) calc(var(--sky-space-inset-floated-left-m) * -1) );padding-left:var(--sky-override-tabset-modal-padding-left, var(--sky-space-inset-floated-left-m));padding-right:var(--sky-override-tabset-modal-padding-none, var(--sky-space-inset-floated-right-m))}.sky-modal-content .sky-tabset-style-wizard{--sky-tabset-margin: var( --sky-override-tabset-wizard-modal-margin, calc(var(--sky-space-inset-floated-top-m) * -1) calc(var(--sky-space-inset-floated-right-m) * -1) var(--sky-space-inset-floated-bottom-m) calc(var(--sky-space-inset-floated-left-m) * -1) );padding-left:var(--sky-override-tabset-modal-padding-none, var(--sky-space-inset-floated-left-m));padding-right:var(--sky-override-tabset-modal-padding-none, var(--sky-space-inset-floated-right-m))}.sky-tabset-btns{order:1;padding-left:var(--sky-override-tabset-button-group-padding-left, var(--sky-space-gap-action_group-m))}.sky-tabset-btns .sky-tabset-btn-new,.sky-tabset-btns .sky-tabset-btn-open{margin-right:var(--sky-override-tabset-button-margin-right, var(--sky-space-gap-action_group-m))}.sky-tabset-dropdown{order:0;max-width:100%}.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-dropdown-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:var(--sky-override-tabset-button-color, --sky-color-text-default)}\n"], dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i5.λ2, selector: "sky-dropdown-button" }, { kind: "component", type: i5.λ3, selector: "sky-dropdown", inputs: ["buttonStyle", "buttonType", "disabled", "label", "horizontalAlignment", "messageStream", "title", "trigger"] }, { kind: "component", type: i5.λ1, selector: "sky-dropdown-item", inputs: ["ariaRole"] }, { kind: "component", type: i5.λ4, selector: "sky-dropdown-menu", inputs: ["ariaLabelledBy", "ariaRole", "useNativeFocus"], outputs: ["menuChanges"] }, { kind: "component", type: i6.λ1, selector: "sky-icon", inputs: ["icon", "iconName", "iconType", "size", "fixedWidth", "variant"] }, { kind: "directive", type: i7$1.λ2, selector: "[skyThemeClass]", inputs: ["class", "skyThemeClass"] }, { kind: "component", type: SkyTabButtonComponent, selector: "sky-tab-button", inputs: ["active", "ariaControls", "buttonHref", "buttonId", "buttonText", "buttonTextCount", "closeable", "disabled", "tabIndex", "tabNumber", "totalTabsCount", "tabStyle"], outputs: ["buttonClick", "closeClick"] }, { kind: "pipe", type: i3$1.SkyLibResourcesPipe, name: "skyLibResources" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
2524
2524
|
}
|
|
2525
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.
|
|
2525
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SkyTabsetComponent, decorators: [{
|
|
2526
2526
|
type: Component,
|
|
2527
2527
|
args: [{ selector: 'sky-tabset', providers: [
|
|
2528
2528
|
SkyTabsetAdapterService,
|
|
@@ -2556,8 +2556,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImpor
|
|
|
2556
2556
|
}] } });
|
|
2557
2557
|
|
|
2558
2558
|
class SkyTabsModule {
|
|
2559
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.
|
|
2560
|
-
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.
|
|
2559
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SkyTabsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
2560
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: SkyTabsModule, declarations: [SkyTabButtonComponent,
|
|
2561
2561
|
SkyTabComponent,
|
|
2562
2562
|
SkyTabsetComponent,
|
|
2563
2563
|
SkyTabsetNavButtonComponent,
|
|
@@ -2568,14 +2568,14 @@ class SkyTabsModule {
|
|
|
2568
2568
|
SkyIdModule,
|
|
2569
2569
|
SkyTabsResourcesModule,
|
|
2570
2570
|
SkyThemeModule], exports: [SkyTabComponent, SkyTabsetComponent, SkyTabsetNavButtonComponent] }); }
|
|
2571
|
-
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.
|
|
2571
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SkyTabsModule, imports: [CommonModule,
|
|
2572
2572
|
SkyDropdownModule,
|
|
2573
2573
|
SkyIconModule,
|
|
2574
2574
|
SkyIdModule,
|
|
2575
2575
|
SkyTabsResourcesModule,
|
|
2576
2576
|
SkyThemeModule] }); }
|
|
2577
2577
|
}
|
|
2578
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.
|
|
2578
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SkyTabsModule, decorators: [{
|
|
2579
2579
|
type: NgModule,
|
|
2580
2580
|
args: [{
|
|
2581
2581
|
declarations: [
|