@skyux/tabs 14.3.12 → 15.0.0-alpha.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/fesm2022/skyux-tabs.mjs +79 -78
- package/fesm2022/skyux-tabs.mjs.map +1 -1
- package/package.json +14 -14
package/fesm2022/skyux-tabs.mjs
CHANGED
|
@@ -68,11 +68,11 @@ SkyLibResourcesService.addResources(RESOURCES);
|
|
|
68
68
|
* Import into any component library module that needs to use resource strings.
|
|
69
69
|
*/
|
|
70
70
|
class SkyTabsResourcesModule {
|
|
71
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
72
|
-
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "
|
|
73
|
-
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "
|
|
71
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: SkyTabsResourcesModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
72
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.0.1", ngImport: i0, type: SkyTabsResourcesModule, exports: [SkyI18nModule] }); }
|
|
73
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: SkyTabsResourcesModule, imports: [SkyI18nModule] }); }
|
|
74
74
|
}
|
|
75
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
75
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: SkyTabsResourcesModule, decorators: [{
|
|
76
76
|
type: NgModule,
|
|
77
77
|
args: [{
|
|
78
78
|
exports: [SkyI18nModule],
|
|
@@ -86,10 +86,10 @@ class SkyVerticalTabsetGroupService {
|
|
|
86
86
|
constructor() {
|
|
87
87
|
this.messageStream = new Subject();
|
|
88
88
|
}
|
|
89
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
90
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
89
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: SkyVerticalTabsetGroupService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
90
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: SkyVerticalTabsetGroupService }); }
|
|
91
91
|
}
|
|
92
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
92
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: SkyVerticalTabsetGroupService, decorators: [{
|
|
93
93
|
type: Injectable
|
|
94
94
|
}] });
|
|
95
95
|
|
|
@@ -150,10 +150,10 @@ class SkyVerticalTabsetAdapterService {
|
|
|
150
150
|
#elHasFocus(el) {
|
|
151
151
|
return !!el && el === this.#document.activeElement;
|
|
152
152
|
}
|
|
153
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
154
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
153
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: SkyVerticalTabsetAdapterService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
154
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: SkyVerticalTabsetAdapterService }); }
|
|
155
155
|
}
|
|
156
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
156
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: SkyVerticalTabsetAdapterService, decorators: [{
|
|
157
157
|
type: Injectable
|
|
158
158
|
}] });
|
|
159
159
|
|
|
@@ -338,10 +338,10 @@ class SkyVerticalTabsetService {
|
|
|
338
338
|
}
|
|
339
339
|
this.indexChanged.next(this.activeIndex);
|
|
340
340
|
}
|
|
341
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
342
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
341
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: SkyVerticalTabsetService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
342
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: SkyVerticalTabsetService }); }
|
|
343
343
|
}
|
|
344
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
344
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: SkyVerticalTabsetService, decorators: [{
|
|
345
345
|
type: Injectable
|
|
346
346
|
}], ctorParameters: () => [] });
|
|
347
347
|
|
|
@@ -385,10 +385,10 @@ class SkyTabIdService {
|
|
|
385
385
|
#emitIds() {
|
|
386
386
|
this.#ids$.next(Array.from(this.#ids.values()));
|
|
387
387
|
}
|
|
388
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
389
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
388
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: SkyTabIdService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
389
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: SkyTabIdService }); }
|
|
390
390
|
}
|
|
391
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
391
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: SkyTabIdService, decorators: [{
|
|
392
392
|
type: Injectable
|
|
393
393
|
}], ctorParameters: () => [] });
|
|
394
394
|
|
|
@@ -535,10 +535,10 @@ class SkyVerticalTabComponent {
|
|
|
535
535
|
tabDeactivated() {
|
|
536
536
|
this.#changeRef.markForCheck();
|
|
537
537
|
}
|
|
538
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
539
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
538
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: SkyVerticalTabComponent, deps: [{ token: SkyVerticalTabsetAdapterService }, { token: i0.ChangeDetectorRef }, { token: SkyVerticalTabsetService }, { token: SkyTabIdService, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
539
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: SkyVerticalTabComponent, isStandalone: false, selector: "sky-vertical-tab", inputs: { active: "active", ariaControls: "ariaControls", ariaRole: "ariaRole", disabled: "disabled", errorIndicator: "errorIndicator", requiredIndicator: "requiredIndicator", 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]=\"\n isMobile ? undefined : ariaControls || tabContentPane.id\n \"\n [attr.aria-disabled]=\"isMobile ? undefined : disabled || undefined\"\n [attr.aria-selected]=\"isMobile ? undefined : 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 }\"\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\n class=\"sky-vertical-tab-heading\"\n [ngClass]=\"{ 'sky-control-label-required': requiredIndicator }\"\n >\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\" iconName=\"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:not(.sky-theme-modern *){--sky-override-vertical-tab-background-color-selected: #eeeeef;--sky-override-vertical-tab-border-left-selected: 4px solid #00b4f1;--sky-override-vertical-tab-count-margin-left: 5px;--sky-override-vertical-tab-display-align-items: normal;--sky-override-vertical-tab-heading-error-line-height: normal;--sky-override-vertical-tab-heading-error-padding-left: 5px;--sky-override-vertical-tab-margin: 5px 0 5px 5px;--sky-override-vertical-tab-padding: 7px 0 7px 10px;--sky-override-vertical-tab-padding-left-selected: 6px;--sky-override-vertical-tab-right-arrow-color: #686c73;--sky-override-vertical-tab-right-arrow-color-selected: #686c73;--sky-override-vertical-tab-right-arrow-padding: 3px 10px 0 0}.sky-vertical-tab{padding:var(--sky-override-vertical-tab-padding, var(--sky-comp-tab-vertical-space-inset-top) var(--sky-comp-tab-vertical-space-inset-right) var(--sky-comp-tab-vertical-space-inset-bottom) var(--sky-comp-tab-vertical-space-inset-left));margin:var(--sky-override-vertical-tab-margin, 0 0 var(--sky-space-gap-action_group-m))}.sky-vertical-tabset-button.sky-vertical-tab-active{color:var(--sky-color-text-selected);font-weight:var(--sky-font-style-emphasized)}.sky-vertical-tabset-button.sky-vertical-tab-active:not(:focus-visible){background-color:var(--sky-override-vertical-tab-background-color-selected, var(--sky-color-background-selected-soft));border-bottom-left-radius:var(--sky-border-radius-xs);border-top-left-radius:var(--sky-border-radius-xs);padding-left:var(--sky-override-vertical-tab-padding-left-selected, calc(var(--sky-comp-tab-vertical-space-inset-left) - var(--sky-border-width-selected-m)));border-left:var(--sky-override-vertical-tab-border-left-selected, var(--sky-border-width-selected-m) solid var(--sky-color-border-selected))}.sky-vertical-tabset-button.sky-vertical-tab-active:not(:active):focus-visible{background-color:var(--sky-override-vertical-tab-background-color-selected, var(--sky-color-background-nav-focus));padding-left:var(--sky-override-vertical-tab-padding-left-selected, var(--sky-comp-tab-vertical-space-inset-left));border-left:var(--sky-override-vertical-tab-border-left-selected, none)}.sky-vertical-tabset-button.sky-vertical-tab-active .sky-vertical-tab-right-arrow{color:var(--sky-override-vertical-tab-right-arrow-color-selected, var(--sky-color-icon-default))}.sky-vertical-tab-hidden{display:none}.sky-vertical-tab-display{display:flex;justify-content:space-between;flex-grow:1;align-items:var(--sky-override-vertical-tab-display-align-items, center)}.sky-vertical-tab-heading-error{padding-left:var(--sky-override-vertical-tab-heading-error-padding-left, var(--sky-space-gap-text_action-s));line-height:var(--sky-override-vertical-tab-heading-error-line-height, 1)}.sky-vertical-tab-count{margin-left:var(--sky-override-vertical-tab-count-margin-left, var(--sky-space-gap-label-s))}.sky-vertical-tab-right-arrow{padding:var(--sky-override-vertical-tab-right-arrow-padding, 0);color:var(--sky-override-vertical-tab-right-arrow-color, var(--sky-color-icon-deemphasized))}.sky-vertical-tab-content-pane{margin-bottom:0}.sky-vertical-tab-content-pane:focus-visible{outline:none;border:none}.sky-responsive-container-xs .sky-vertical-tab-content-pane{margin-bottom:var(--sky-override-vertical-tab-content-pane-margin-bottom, var(--sky-space-stacked-s))}:host-context(.sky-sectioned-form-tabs-only) .sky-vertical-tab{margin-left:0}.sky-vertical-tabset-button:not(.sky-theme-modern *){--sky-override-vertical-tab-background-color: transparent;--sky-override-vertical-tab-background-color-active: #eeeeef;--sky-override-vertical-tab-background-color-focus: transparent;--sky-override-vertical-tab-background-color-hover: #eeeeef;--sky-override-vertical-tab-font-color: #212327;--sky-override-vertical-tab-font-color-disabled: var( --sky-text-color-deemphasized );--sky-override-vertical-tab-hover-font-color: #212327;--sky-override-vertical-tab-outline-focus: auto;--sky-override-vertical-tab-right-arrow-color-active: #686c73;--sky-override-vertical-tab-right-arrow-color-hover: color.adjust( #686c73, $lightness: -20% )}:host:has(.sky-vertical-tabset-button-disabled){cursor:not-allowed}.sky-vertical-tabset-button{background-color:var(--sky-override-vertical-tab-background-color, var(--sky-color-background-nav-base));border-bottom-left-radius:var(--sky-border-radius-s);border-top-left-radius:var(--sky-border-radius-s);border-bottom-right-radius:var(--sky-border-radius-0);border-top-right-radius:var(--sky-border-radius-0);color:var(--sky-override-vertical-tab-font-color, var(--sky-color-text-deemphasized));cursor:pointer;display:flex;text-decoration:none}.sky-vertical-tabset-button:hover:not(.sky-vertical-tab-active){color:var(--sky-override-vertical-tab-hover-font-color, var(--sky-color-text-default));background-color:var(--sky-override-vertical-tab-background-color-hover, var(--sky-color-background-nav-hover));box-shadow:inset 0 0 0 var(--sky-border-width-action-hover) var(--sky-color-border-nav-hover)}.sky-vertical-tabset-button:hover:not(.sky-vertical-tab-active) .sky-vertical-tab-right-arrow{color:var(--sky-override-vertical-tab-right-arrow-color-hover, var(--sky-color-icon-default))}.sky-vertical-tabset-button:active:not(.sky-vertical-tab-active){background-color:var(--sky-override-vertical-tab-background-color-active, var(--sky-color-background-nav-active));color:var(--sky-color-text-default);box-shadow:inset 0 0 0 var(--sky-border-width-action-active) var(--sky-color-border-nav-active)}.sky-vertical-tabset-button:active:not(.sky-vertical-tab-active) .sky-vertical-tab-right-arrow{color:var(--sky-override-vertical-tab-right-arrow-color-active, var(--sky-color-icon-default))}.sky-vertical-tabset-button:not(:active):focus-visible{background-color:var(--sky-override-vertical-tab-background-color-focus, var(--sky-color-background-nav-focus));outline:var(--sky-override-vertical-tab-outline-focus, none);box-shadow:inset 0 0 0 var(--sky-border-width-action-focus) var(--sky-color-border-nav-focus)}.sky-vertical-tabset-button.sky-vertical-tabset-button-disabled{background-color:var(--sky-color-background-nav-disabled);color:var(--sky-override-vertical-tab-font-color-disabled, var(--sky-color-text-deemphasized));pointer-events:none}\n"], dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i6.λ1, selector: "sky-icon", inputs: ["iconName", "variant", "iconSize"] }, { 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 }); }
|
|
540
540
|
}
|
|
541
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
541
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: SkyVerticalTabComponent, decorators: [{
|
|
542
542
|
type: Component,
|
|
543
543
|
args: [{ selector: 'sky-vertical-tab', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<a\n #tabButton\n class=\"sky-vertical-tab sky-vertical-tabset-button\"\n [attr.aria-controls]=\"\n isMobile ? undefined : ariaControls || tabContentPane.id\n \"\n [attr.aria-disabled]=\"isMobile ? undefined : disabled || undefined\"\n [attr.aria-selected]=\"isMobile ? undefined : 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 }\"\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\n class=\"sky-vertical-tab-heading\"\n [ngClass]=\"{ 'sky-control-label-required': requiredIndicator }\"\n >\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\" iconName=\"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:not(.sky-theme-modern *){--sky-override-vertical-tab-background-color-selected: #eeeeef;--sky-override-vertical-tab-border-left-selected: 4px solid #00b4f1;--sky-override-vertical-tab-count-margin-left: 5px;--sky-override-vertical-tab-display-align-items: normal;--sky-override-vertical-tab-heading-error-line-height: normal;--sky-override-vertical-tab-heading-error-padding-left: 5px;--sky-override-vertical-tab-margin: 5px 0 5px 5px;--sky-override-vertical-tab-padding: 7px 0 7px 10px;--sky-override-vertical-tab-padding-left-selected: 6px;--sky-override-vertical-tab-right-arrow-color: #686c73;--sky-override-vertical-tab-right-arrow-color-selected: #686c73;--sky-override-vertical-tab-right-arrow-padding: 3px 10px 0 0}.sky-vertical-tab{padding:var(--sky-override-vertical-tab-padding, var(--sky-comp-tab-vertical-space-inset-top) var(--sky-comp-tab-vertical-space-inset-right) var(--sky-comp-tab-vertical-space-inset-bottom) var(--sky-comp-tab-vertical-space-inset-left));margin:var(--sky-override-vertical-tab-margin, 0 0 var(--sky-space-gap-action_group-m))}.sky-vertical-tabset-button.sky-vertical-tab-active{color:var(--sky-color-text-selected);font-weight:var(--sky-font-style-emphasized)}.sky-vertical-tabset-button.sky-vertical-tab-active:not(:focus-visible){background-color:var(--sky-override-vertical-tab-background-color-selected, var(--sky-color-background-selected-soft));border-bottom-left-radius:var(--sky-border-radius-xs);border-top-left-radius:var(--sky-border-radius-xs);padding-left:var(--sky-override-vertical-tab-padding-left-selected, calc(var(--sky-comp-tab-vertical-space-inset-left) - var(--sky-border-width-selected-m)));border-left:var(--sky-override-vertical-tab-border-left-selected, var(--sky-border-width-selected-m) solid var(--sky-color-border-selected))}.sky-vertical-tabset-button.sky-vertical-tab-active:not(:active):focus-visible{background-color:var(--sky-override-vertical-tab-background-color-selected, var(--sky-color-background-nav-focus));padding-left:var(--sky-override-vertical-tab-padding-left-selected, var(--sky-comp-tab-vertical-space-inset-left));border-left:var(--sky-override-vertical-tab-border-left-selected, none)}.sky-vertical-tabset-button.sky-vertical-tab-active .sky-vertical-tab-right-arrow{color:var(--sky-override-vertical-tab-right-arrow-color-selected, var(--sky-color-icon-default))}.sky-vertical-tab-hidden{display:none}.sky-vertical-tab-display{display:flex;justify-content:space-between;flex-grow:1;align-items:var(--sky-override-vertical-tab-display-align-items, center)}.sky-vertical-tab-heading-error{padding-left:var(--sky-override-vertical-tab-heading-error-padding-left, var(--sky-space-gap-text_action-s));line-height:var(--sky-override-vertical-tab-heading-error-line-height, 1)}.sky-vertical-tab-count{margin-left:var(--sky-override-vertical-tab-count-margin-left, var(--sky-space-gap-label-s))}.sky-vertical-tab-right-arrow{padding:var(--sky-override-vertical-tab-right-arrow-padding, 0);color:var(--sky-override-vertical-tab-right-arrow-color, var(--sky-color-icon-deemphasized))}.sky-vertical-tab-content-pane{margin-bottom:0}.sky-vertical-tab-content-pane:focus-visible{outline:none;border:none}.sky-responsive-container-xs .sky-vertical-tab-content-pane{margin-bottom:var(--sky-override-vertical-tab-content-pane-margin-bottom, var(--sky-space-stacked-s))}:host-context(.sky-sectioned-form-tabs-only) .sky-vertical-tab{margin-left:0}.sky-vertical-tabset-button:not(.sky-theme-modern *){--sky-override-vertical-tab-background-color: transparent;--sky-override-vertical-tab-background-color-active: #eeeeef;--sky-override-vertical-tab-background-color-focus: transparent;--sky-override-vertical-tab-background-color-hover: #eeeeef;--sky-override-vertical-tab-font-color: #212327;--sky-override-vertical-tab-font-color-disabled: var( --sky-text-color-deemphasized );--sky-override-vertical-tab-hover-font-color: #212327;--sky-override-vertical-tab-outline-focus: auto;--sky-override-vertical-tab-right-arrow-color-active: #686c73;--sky-override-vertical-tab-right-arrow-color-hover: color.adjust( #686c73, $lightness: -20% )}:host:has(.sky-vertical-tabset-button-disabled){cursor:not-allowed}.sky-vertical-tabset-button{background-color:var(--sky-override-vertical-tab-background-color, var(--sky-color-background-nav-base));border-bottom-left-radius:var(--sky-border-radius-s);border-top-left-radius:var(--sky-border-radius-s);border-bottom-right-radius:var(--sky-border-radius-0);border-top-right-radius:var(--sky-border-radius-0);color:var(--sky-override-vertical-tab-font-color, var(--sky-color-text-deemphasized));cursor:pointer;display:flex;text-decoration:none}.sky-vertical-tabset-button:hover:not(.sky-vertical-tab-active){color:var(--sky-override-vertical-tab-hover-font-color, var(--sky-color-text-default));background-color:var(--sky-override-vertical-tab-background-color-hover, var(--sky-color-background-nav-hover));box-shadow:inset 0 0 0 var(--sky-border-width-action-hover) var(--sky-color-border-nav-hover)}.sky-vertical-tabset-button:hover:not(.sky-vertical-tab-active) .sky-vertical-tab-right-arrow{color:var(--sky-override-vertical-tab-right-arrow-color-hover, var(--sky-color-icon-default))}.sky-vertical-tabset-button:active:not(.sky-vertical-tab-active){background-color:var(--sky-override-vertical-tab-background-color-active, var(--sky-color-background-nav-active));color:var(--sky-color-text-default);box-shadow:inset 0 0 0 var(--sky-border-width-action-active) var(--sky-color-border-nav-active)}.sky-vertical-tabset-button:active:not(.sky-vertical-tab-active) .sky-vertical-tab-right-arrow{color:var(--sky-override-vertical-tab-right-arrow-color-active, var(--sky-color-icon-default))}.sky-vertical-tabset-button:not(:active):focus-visible{background-color:var(--sky-override-vertical-tab-background-color-focus, var(--sky-color-background-nav-focus));outline:var(--sky-override-vertical-tab-outline-focus, none);box-shadow:inset 0 0 0 var(--sky-border-width-action-focus) var(--sky-color-border-nav-focus)}.sky-vertical-tabset-button.sky-vertical-tabset-button-disabled{background-color:var(--sky-color-background-nav-disabled);color:var(--sky-override-vertical-tab-font-color-disabled, var(--sky-color-text-deemphasized));pointer-events:none}\n"] }]
|
|
544
544
|
}], ctorParameters: () => [{ type: SkyVerticalTabsetAdapterService }, { type: i0.ChangeDetectorRef }, { type: SkyVerticalTabsetService }, { type: SkyTabIdService, decorators: [{
|
|
@@ -682,10 +682,10 @@ class SkyVerticalTabsetGroupComponent {
|
|
|
682
682
|
#focusButton() {
|
|
683
683
|
this.#adapterService.focusButton(this.groupHeadingButton);
|
|
684
684
|
}
|
|
685
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
686
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
685
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: SkyVerticalTabsetGroupComponent, deps: [{ token: SkyVerticalTabsetService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
686
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.1", type: SkyVerticalTabsetGroupComponent, isStandalone: false, 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': isActive(),\n 'sky-vertical-tabset-group-header-sub-open': open,\n 'sky-font-deemphasized': disabled\n }\"\n >\n <button\n #groupHeadingButton\n class=\"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 <sky-animation-slide [opened]=\"slideDirection === 'down'\">\n <div\n #groupContent\n class=\"sky-vertical-tabset-group-content\"\n skyId\n [attr.labelledby]=\"groupId\"\n >\n <ng-content />\n </div>\n </sky-animation-slide>\n</div>\n", styles: [".sky-vertical-tabset-group:not(.sky-theme-modern *){--sky-override-vertical-tabset-group-border: 1px solid #e2e3e4;--sky-override-vertical-tabset-group-button-font-color: buttontext;--sky-override-vertical-tabset-group-button-background-color-hover: transparent;--sky-override-vertical-tabset-group-header-selected-font-color: buttontext;--sky-override-vertical-tabset-group-header-selected-font-weight: 600;--sky-override-vertical-tabset-group-button-padding: 10px;--sky-override-vertical-tabset-group-content-padding-left: 10px;--sky-override-vertical-tabset-group-content-padding-right: 0;--sky-override-vertical-tabset-group-gap: 5px;--sky-override-vertical-tabset-group-header-align-items: flex-start;--sky-override-vertical-tabset-group-margin: 5px 0 5px 5px}.sky-vertical-tabset-group{border-bottom:var(--sky-override-vertical-tabset-group-border, none);margin:var(--sky-override-vertical-tabset-group-margin)}:host:has(~sky-vertical-tabset-group) .sky-vertical-tabset-group{margin-bottom:var(--sky-override-vertical-tabset-group-gap, 0)}.sky-vertical-tabset-group-header button{--sky-comp-override-expansion-indicator-color: var( --sky-color-text-deemphasized );padding:var(--sky-override-vertical-tabset-group-button-padding, var(--sky-comp-tab-vertical-space-inset-top) var(--sky-comp-tab-vertical-space-inset-right) var(--sky-comp-tab-vertical-space-inset-bottom) var(--sky-comp-tab-vertical-space-inset-left));justify-content:space-between;border:none;width:100%;text-align:left;align-items:var(--sky-override-vertical-tabset-group-header-align-items, center);margin-bottom:var(--sky-space-gap-action_group-m);color:var(--sky-override-vertical-tabset-group-button-font-color, var(--sky-color-text-deemphasized))}.sky-vertical-tabset-group-header button:hover{background-color:var(--sky-override-vertical-tabset-group-button-background-color-hover, var(--sky-color-background-nav-hover))}.sky-vertical-tabset-group-header.sky-vertical-tabset-group-header-active button{--sky-comp-override-expansion-indicator-color: var( --sky-color-text-selected );color:var(--sky-override-vertical-tabset-group-header-selected-text-color, var(--sky-color-text-selected));font-weight:var(--sky-override-vertical-tabset-group-header-selected-font-weight, var(--sky-font-style-emphasized))}.sky-vertical-tabset-group-header .sky-vertical-tabset-group-expansion-indicator{margin-left:var(--sky-space-gap-text_action-s)}.sky-vertical-tabset-group-content{overflow:hidden;border-top:var(--sky-override-vertical-tabset-group-border, none);padding-top:var(--sky-comp-tab-vertical-subgroup-space-inset-top);padding-bottom:var(--sky-comp-tab-vertical-subgroup-space-inset-bottom);padding-left:var(--sky-override-vertical-tabset-group-content-padding-left, var(--sky-comp-tab-vertical-subgroup-space-inset-left));padding-right:var(--sky-override-vertical-tabset-group-content-padding-right, var(--sky-comp-tab-vertical-subgroup-space-inset-right))}.sky-vertical-tabset-button:not(.sky-theme-modern *){--sky-override-vertical-tab-background-color: transparent;--sky-override-vertical-tab-background-color-active: #eeeeef;--sky-override-vertical-tab-background-color-focus: transparent;--sky-override-vertical-tab-background-color-hover: #eeeeef;--sky-override-vertical-tab-font-color: #212327;--sky-override-vertical-tab-font-color-disabled: var( --sky-text-color-deemphasized );--sky-override-vertical-tab-hover-font-color: #212327;--sky-override-vertical-tab-outline-focus: auto;--sky-override-vertical-tab-right-arrow-color-active: #686c73;--sky-override-vertical-tab-right-arrow-color-hover: color.adjust( #686c73, $lightness: -20% )}:host:has(.sky-vertical-tabset-button-disabled){cursor:not-allowed}.sky-vertical-tabset-button{background-color:var(--sky-override-vertical-tab-background-color, var(--sky-color-background-nav-base));border-bottom-left-radius:var(--sky-border-radius-s);border-top-left-radius:var(--sky-border-radius-s);border-bottom-right-radius:var(--sky-border-radius-0);border-top-right-radius:var(--sky-border-radius-0);color:var(--sky-override-vertical-tab-font-color, var(--sky-color-text-deemphasized));cursor:pointer;display:flex;text-decoration:none}.sky-vertical-tabset-button:hover:not(.sky-vertical-tab-active){color:var(--sky-override-vertical-tab-hover-font-color, var(--sky-color-text-default));background-color:var(--sky-override-vertical-tab-background-color-hover, var(--sky-color-background-nav-hover));box-shadow:inset 0 0 0 var(--sky-border-width-action-hover) var(--sky-color-border-nav-hover)}.sky-vertical-tabset-button:hover:not(.sky-vertical-tab-active) .sky-vertical-tab-right-arrow{color:var(--sky-override-vertical-tab-right-arrow-color-hover, var(--sky-color-icon-default))}.sky-vertical-tabset-button:active:not(.sky-vertical-tab-active){background-color:var(--sky-override-vertical-tab-background-color-active, var(--sky-color-background-nav-active));color:var(--sky-color-text-default);box-shadow:inset 0 0 0 var(--sky-border-width-action-active) var(--sky-color-border-nav-active)}.sky-vertical-tabset-button:active:not(.sky-vertical-tab-active) .sky-vertical-tab-right-arrow{color:var(--sky-override-vertical-tab-right-arrow-color-active, var(--sky-color-icon-default))}.sky-vertical-tabset-button:not(:active):focus-visible{background-color:var(--sky-override-vertical-tab-background-color-focus, var(--sky-color-background-nav-focus));outline:var(--sky-override-vertical-tab-outline-focus, none);box-shadow:inset 0 0 0 var(--sky-border-width-action-focus) var(--sky-color-border-nav-focus)}.sky-vertical-tabset-button.sky-vertical-tabset-button-disabled{background-color:var(--sky-color-background-nav-disabled);color:var(--sky-override-vertical-tab-font-color-disabled, var(--sky-color-text-deemphasized));pointer-events:none}\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"] }, { kind: "component", type: i3._SkyAnimationSlideComponent, selector: "sky-animation-slide", inputs: ["opened"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
687
687
|
}
|
|
688
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
688
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: SkyVerticalTabsetGroupComponent, decorators: [{
|
|
689
689
|
type: Component,
|
|
690
690
|
args: [{ selector: 'sky-vertical-tabset-group', changeDetection: ChangeDetectionStrategy.OnPush, providers: [SkyVerticalTabsetGroupService], standalone: false, 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': isActive(),\n 'sky-vertical-tabset-group-header-sub-open': open,\n 'sky-font-deemphasized': disabled\n }\"\n >\n <button\n #groupHeadingButton\n class=\"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 <sky-animation-slide [opened]=\"slideDirection === 'down'\">\n <div\n #groupContent\n class=\"sky-vertical-tabset-group-content\"\n skyId\n [attr.labelledby]=\"groupId\"\n >\n <ng-content />\n </div>\n </sky-animation-slide>\n</div>\n", styles: [".sky-vertical-tabset-group:not(.sky-theme-modern *){--sky-override-vertical-tabset-group-border: 1px solid #e2e3e4;--sky-override-vertical-tabset-group-button-font-color: buttontext;--sky-override-vertical-tabset-group-button-background-color-hover: transparent;--sky-override-vertical-tabset-group-header-selected-font-color: buttontext;--sky-override-vertical-tabset-group-header-selected-font-weight: 600;--sky-override-vertical-tabset-group-button-padding: 10px;--sky-override-vertical-tabset-group-content-padding-left: 10px;--sky-override-vertical-tabset-group-content-padding-right: 0;--sky-override-vertical-tabset-group-gap: 5px;--sky-override-vertical-tabset-group-header-align-items: flex-start;--sky-override-vertical-tabset-group-margin: 5px 0 5px 5px}.sky-vertical-tabset-group{border-bottom:var(--sky-override-vertical-tabset-group-border, none);margin:var(--sky-override-vertical-tabset-group-margin)}:host:has(~sky-vertical-tabset-group) .sky-vertical-tabset-group{margin-bottom:var(--sky-override-vertical-tabset-group-gap, 0)}.sky-vertical-tabset-group-header button{--sky-comp-override-expansion-indicator-color: var( --sky-color-text-deemphasized );padding:var(--sky-override-vertical-tabset-group-button-padding, var(--sky-comp-tab-vertical-space-inset-top) var(--sky-comp-tab-vertical-space-inset-right) var(--sky-comp-tab-vertical-space-inset-bottom) var(--sky-comp-tab-vertical-space-inset-left));justify-content:space-between;border:none;width:100%;text-align:left;align-items:var(--sky-override-vertical-tabset-group-header-align-items, center);margin-bottom:var(--sky-space-gap-action_group-m);color:var(--sky-override-vertical-tabset-group-button-font-color, var(--sky-color-text-deemphasized))}.sky-vertical-tabset-group-header button:hover{background-color:var(--sky-override-vertical-tabset-group-button-background-color-hover, var(--sky-color-background-nav-hover))}.sky-vertical-tabset-group-header.sky-vertical-tabset-group-header-active button{--sky-comp-override-expansion-indicator-color: var( --sky-color-text-selected );color:var(--sky-override-vertical-tabset-group-header-selected-text-color, var(--sky-color-text-selected));font-weight:var(--sky-override-vertical-tabset-group-header-selected-font-weight, var(--sky-font-style-emphasized))}.sky-vertical-tabset-group-header .sky-vertical-tabset-group-expansion-indicator{margin-left:var(--sky-space-gap-text_action-s)}.sky-vertical-tabset-group-content{overflow:hidden;border-top:var(--sky-override-vertical-tabset-group-border, none);padding-top:var(--sky-comp-tab-vertical-subgroup-space-inset-top);padding-bottom:var(--sky-comp-tab-vertical-subgroup-space-inset-bottom);padding-left:var(--sky-override-vertical-tabset-group-content-padding-left, var(--sky-comp-tab-vertical-subgroup-space-inset-left));padding-right:var(--sky-override-vertical-tabset-group-content-padding-right, var(--sky-comp-tab-vertical-subgroup-space-inset-right))}.sky-vertical-tabset-button:not(.sky-theme-modern *){--sky-override-vertical-tab-background-color: transparent;--sky-override-vertical-tab-background-color-active: #eeeeef;--sky-override-vertical-tab-background-color-focus: transparent;--sky-override-vertical-tab-background-color-hover: #eeeeef;--sky-override-vertical-tab-font-color: #212327;--sky-override-vertical-tab-font-color-disabled: var( --sky-text-color-deemphasized );--sky-override-vertical-tab-hover-font-color: #212327;--sky-override-vertical-tab-outline-focus: auto;--sky-override-vertical-tab-right-arrow-color-active: #686c73;--sky-override-vertical-tab-right-arrow-color-hover: color.adjust( #686c73, $lightness: -20% )}:host:has(.sky-vertical-tabset-button-disabled){cursor:not-allowed}.sky-vertical-tabset-button{background-color:var(--sky-override-vertical-tab-background-color, var(--sky-color-background-nav-base));border-bottom-left-radius:var(--sky-border-radius-s);border-top-left-radius:var(--sky-border-radius-s);border-bottom-right-radius:var(--sky-border-radius-0);border-top-right-radius:var(--sky-border-radius-0);color:var(--sky-override-vertical-tab-font-color, var(--sky-color-text-deemphasized));cursor:pointer;display:flex;text-decoration:none}.sky-vertical-tabset-button:hover:not(.sky-vertical-tab-active){color:var(--sky-override-vertical-tab-hover-font-color, var(--sky-color-text-default));background-color:var(--sky-override-vertical-tab-background-color-hover, var(--sky-color-background-nav-hover));box-shadow:inset 0 0 0 var(--sky-border-width-action-hover) var(--sky-color-border-nav-hover)}.sky-vertical-tabset-button:hover:not(.sky-vertical-tab-active) .sky-vertical-tab-right-arrow{color:var(--sky-override-vertical-tab-right-arrow-color-hover, var(--sky-color-icon-default))}.sky-vertical-tabset-button:active:not(.sky-vertical-tab-active){background-color:var(--sky-override-vertical-tab-background-color-active, var(--sky-color-background-nav-active));color:var(--sky-color-text-default);box-shadow:inset 0 0 0 var(--sky-border-width-action-active) var(--sky-color-border-nav-active)}.sky-vertical-tabset-button:active:not(.sky-vertical-tab-active) .sky-vertical-tab-right-arrow{color:var(--sky-override-vertical-tab-right-arrow-color-active, var(--sky-color-icon-default))}.sky-vertical-tabset-button:not(:active):focus-visible{background-color:var(--sky-override-vertical-tab-background-color-focus, var(--sky-color-background-nav-focus));outline:var(--sky-override-vertical-tab-outline-focus, none);box-shadow:inset 0 0 0 var(--sky-border-width-action-focus) var(--sky-color-border-nav-focus)}.sky-vertical-tabset-button.sky-vertical-tabset-button-disabled{background-color:var(--sky-color-background-nav-disabled);color:var(--sky-override-vertical-tab-font-color-disabled, var(--sky-color-text-deemphasized));pointer-events:none}\n"] }]
|
|
691
691
|
}], ctorParameters: () => [{ type: SkyVerticalTabsetService }, { type: i0.ChangeDetectorRef }], propDecorators: { disabled: [{
|
|
@@ -806,10 +806,10 @@ class SkyVerticalTabsetComponent {
|
|
|
806
806
|
tabGroupsArrowUp() {
|
|
807
807
|
this.adapterService.focusPreviousButton(this.tabGroups);
|
|
808
808
|
}
|
|
809
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
810
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
809
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: SkyVerticalTabsetComponent, deps: [{ token: SkyVerticalTabsetAdapterService }, { token: SkyVerticalTabsetService }, { token: i3$1.SkyLibResourcesService }, { token: i0.ChangeDetectorRef }, { token: SkyTabIdService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
810
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: SkyVerticalTabsetComponent, isStandalone: false, 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 class=\"sky-vertical-tabset-tablist\"\n [attr.aria-label]=\"ariaLabel\"\n [attr.aria-labelledby]=\"ariaLabelledBy\"\n [attr.aria-orientation]=\"isMobile ? undefined : 'vertical'\"\n [attr.aria-owns]=\"\n isMobile ? undefined : (tabIdSvc.ids | async)?.join(' ') || undefined\n \"\n [attr.role]=\"isMobile ? undefined : ariaRole\"\n ></span>\n <div\n #groupContainerWrapper\n class=\"sky-vertical-tabset-group-container\"\n skyTransitionEndHandler\n transitionPropertyToTrack=\"transform\"\n [class.sky-animation-slide-enter-left]=\"tabService.isMobile()\"\n [ngClass]=\"{ 'sky-vertical-tabset-hidden': !tabService.tabsVisible() }\"\n [tabIndex]=\"tablistHasFocus ? -1 : 0\"\n [transitionTrigger]=\"tabService.tabsVisible()\"\n (keydown.arrowDown)=\"tabGroupsArrowDown(); $event.preventDefault()\"\n (keydown.arrowUp)=\"tabGroupsArrowUp(); $event.preventDefault()\"\n (focusin)=\"trapFocusInTablist()\"\n (focusout)=\"resetTabIndex()\"\n (transitionEnd)=\"tabsetFocus()\"\n >\n <ng-content />\n </div>\n @if (maintainTabContent || tabService.contentVisible()) {\n <div\n #contentContainerWrapper\n class=\"sky-vertical-tabset-content\"\n [class.sky-animation-slide-enter-right]=\"tabService.isMobile()\"\n [ngClass]=\"{\n 'sky-vertical-tabset-content-hidden': !tabService.contentVisible()\n }\"\n (focusin)=\"resetTabIndex()\"\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 iconName=\"chevron-left\" />\n {{ showTabsText }}\n </button>\n }\n </div>\n }\n</div>\n", styles: [".sky-vertical-tabset:not(.sky-theme-modern *){--sky-override-vertical-tab-content-pane-margin-bottom: 0;--sky-override-vertical-tabset-content-margin-sm-lg: 10px 0 0 10px;--sky-override-vertical-tabset-content-margin-xs: 10px 0 0 10px;--sky-override-vertical-tabset-group-container-border-right: 1px solid #cdcfd2;--sky-override-vertical-tabset-group-container-padding: 0;--sky-override-vertical-tabset-modal-margin-adjustment: -15px;--sky-override-vertical-tabset-modal-margin-adjustment-with-group: -15px;--sky-override-vertical-tabset-show-tabs-margin-top: 10px}: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:var(--sky-override-vertical-tabset-group-container-border-right, var(--sky-border-width-divider) var(--sky-border-style-divider) var(--sky-color-border-divider))}}: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:var(--sky-override-vertical-tabset-group-container-border-right, var(--sky-border-width-divider) var(--sky-border-style-divider) var(--sky-color-border-divider))}.sky-vertical-tabset-hidden{display:none}.sky-vertical-tabset-content{margin:var(--sky-override-vertical-tabset-content-margin-xs, var(--sky-comp-tab-vertical-content-space-inset-xs-top) var(--sky-comp-tab-vertical-content-space-inset-xs-right) var(--sky-comp-tab-vertical-content-space-inset-xs-bottom) var(--sky-comp-tab-vertical-content-space-inset-xs-left));flex-basis:75%;overflow-y:auto}.sky-vertical-tabset-content-hidden{display:none}.sky-vertical-tabset-show-tabs-btn{margin-top:var(--sky-override-vertical-tabset-show-tabs-margin-top, 0)}.sky-vertical-tabset-group-container{background-color:var(--sky-color-background-container-dimmed);flex-basis:25%;overflow-y:auto;padding:var(--sky-override-vertical-tabset-group-container-padding, var(--sky-comp-tab-vertical-group-space-inset-top) var(--sky-comp-tab-vertical-group-space-inset-right) var(--sky-comp-tab-vertical-group-space-inset-bottom) var(--sky-comp-tab-vertical-group-space-inset-left))}:host-context(sky-modal-content)>:host .sky-vertical-tabset{margin:var(--sky-override-vertical-tabset-modal-margin-adjustment, calc(var(--sky-comp-modal-content-space-inset-top) * -1) calc(var(--sky-comp-modal-content-space-inset-right) * -1) calc(var(--sky-comp-modal-content-space-inset-bottom) * -1) calc((var(--sky-comp-tab-vertical-space-inset-left) + var(--sky-space-inline-s)) * -1))}:host-context(sky-modal-content)>:host .sky-vertical-tabset:has(sky-vertical-tabset-group){margin-left:var(--sky-override-vertical-tabset-modal-margin-adjustment-with-group, calc(var(--sky-comp-tab-vertical-group-button-space-inset-left) * -1))}@media(min-width:768px){:host .sky-vertical-tabset-content{margin:var(--sky-override-vertical-tabset-content-margin-sm-lg, var(--sky-comp-tab-vertical-content-space-inset-sm-top) var(--sky-comp-tab-vertical-content-space-inset-sm-right) var(--sky-comp-tab-vertical-content-space-inset-sm-bottom) var(--sky-comp-tab-vertical-content-space-inset-sm-left))}}:host-context(.sky-responsive-container-sm) .sky-vertical-tabset-content,:host-context(.sky-responsive-container-md) .sky-vertical-tabset-content,:host-context(.sky-responsive-container-lg) .sky-vertical-tabset-content{margin:var(--sky-override-vertical-tabset-content-margin-sm-lg, var(--sky-comp-tab-vertical-content-space-inset-sm-top) var(--sky-comp-tab-vertical-content-space-inset-sm-right) var(--sky-comp-tab-vertical-content-space-inset-sm-bottom) var(--sky-comp-tab-vertical-content-space-inset-sm-left))}\n"], dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i6.λ1, selector: "sky-icon", inputs: ["iconName", "variant", "iconSize"] }, { kind: "directive", type: i3._SkyTransitionEndHandlerDirective, selector: "[skyTransitionEndHandler]", inputs: ["transitionTrigger", "transitionPropertyToTrack"], outputs: ["transitionEnd"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
811
811
|
}
|
|
812
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
812
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: SkyVerticalTabsetComponent, decorators: [{
|
|
813
813
|
type: Component,
|
|
814
814
|
args: [{ selector: 'sky-vertical-tabset', providers: [SkyTabIdService, SkyVerticalTabsetService], changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, 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 class=\"sky-vertical-tabset-tablist\"\n [attr.aria-label]=\"ariaLabel\"\n [attr.aria-labelledby]=\"ariaLabelledBy\"\n [attr.aria-orientation]=\"isMobile ? undefined : 'vertical'\"\n [attr.aria-owns]=\"\n isMobile ? undefined : (tabIdSvc.ids | async)?.join(' ') || undefined\n \"\n [attr.role]=\"isMobile ? undefined : ariaRole\"\n ></span>\n <div\n #groupContainerWrapper\n class=\"sky-vertical-tabset-group-container\"\n skyTransitionEndHandler\n transitionPropertyToTrack=\"transform\"\n [class.sky-animation-slide-enter-left]=\"tabService.isMobile()\"\n [ngClass]=\"{ 'sky-vertical-tabset-hidden': !tabService.tabsVisible() }\"\n [tabIndex]=\"tablistHasFocus ? -1 : 0\"\n [transitionTrigger]=\"tabService.tabsVisible()\"\n (keydown.arrowDown)=\"tabGroupsArrowDown(); $event.preventDefault()\"\n (keydown.arrowUp)=\"tabGroupsArrowUp(); $event.preventDefault()\"\n (focusin)=\"trapFocusInTablist()\"\n (focusout)=\"resetTabIndex()\"\n (transitionEnd)=\"tabsetFocus()\"\n >\n <ng-content />\n </div>\n @if (maintainTabContent || tabService.contentVisible()) {\n <div\n #contentContainerWrapper\n class=\"sky-vertical-tabset-content\"\n [class.sky-animation-slide-enter-right]=\"tabService.isMobile()\"\n [ngClass]=\"{\n 'sky-vertical-tabset-content-hidden': !tabService.contentVisible()\n }\"\n (focusin)=\"resetTabIndex()\"\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 iconName=\"chevron-left\" />\n {{ showTabsText }}\n </button>\n }\n </div>\n }\n</div>\n", styles: [".sky-vertical-tabset:not(.sky-theme-modern *){--sky-override-vertical-tab-content-pane-margin-bottom: 0;--sky-override-vertical-tabset-content-margin-sm-lg: 10px 0 0 10px;--sky-override-vertical-tabset-content-margin-xs: 10px 0 0 10px;--sky-override-vertical-tabset-group-container-border-right: 1px solid #cdcfd2;--sky-override-vertical-tabset-group-container-padding: 0;--sky-override-vertical-tabset-modal-margin-adjustment: -15px;--sky-override-vertical-tabset-modal-margin-adjustment-with-group: -15px;--sky-override-vertical-tabset-show-tabs-margin-top: 10px}: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:var(--sky-override-vertical-tabset-group-container-border-right, var(--sky-border-width-divider) var(--sky-border-style-divider) var(--sky-color-border-divider))}}: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:var(--sky-override-vertical-tabset-group-container-border-right, var(--sky-border-width-divider) var(--sky-border-style-divider) var(--sky-color-border-divider))}.sky-vertical-tabset-hidden{display:none}.sky-vertical-tabset-content{margin:var(--sky-override-vertical-tabset-content-margin-xs, var(--sky-comp-tab-vertical-content-space-inset-xs-top) var(--sky-comp-tab-vertical-content-space-inset-xs-right) var(--sky-comp-tab-vertical-content-space-inset-xs-bottom) var(--sky-comp-tab-vertical-content-space-inset-xs-left));flex-basis:75%;overflow-y:auto}.sky-vertical-tabset-content-hidden{display:none}.sky-vertical-tabset-show-tabs-btn{margin-top:var(--sky-override-vertical-tabset-show-tabs-margin-top, 0)}.sky-vertical-tabset-group-container{background-color:var(--sky-color-background-container-dimmed);flex-basis:25%;overflow-y:auto;padding:var(--sky-override-vertical-tabset-group-container-padding, var(--sky-comp-tab-vertical-group-space-inset-top) var(--sky-comp-tab-vertical-group-space-inset-right) var(--sky-comp-tab-vertical-group-space-inset-bottom) var(--sky-comp-tab-vertical-group-space-inset-left))}:host-context(sky-modal-content)>:host .sky-vertical-tabset{margin:var(--sky-override-vertical-tabset-modal-margin-adjustment, calc(var(--sky-comp-modal-content-space-inset-top) * -1) calc(var(--sky-comp-modal-content-space-inset-right) * -1) calc(var(--sky-comp-modal-content-space-inset-bottom) * -1) calc((var(--sky-comp-tab-vertical-space-inset-left) + var(--sky-space-inline-s)) * -1))}:host-context(sky-modal-content)>:host .sky-vertical-tabset:has(sky-vertical-tabset-group){margin-left:var(--sky-override-vertical-tabset-modal-margin-adjustment-with-group, calc(var(--sky-comp-tab-vertical-group-button-space-inset-left) * -1))}@media(min-width:768px){:host .sky-vertical-tabset-content{margin:var(--sky-override-vertical-tabset-content-margin-sm-lg, var(--sky-comp-tab-vertical-content-space-inset-sm-top) var(--sky-comp-tab-vertical-content-space-inset-sm-right) var(--sky-comp-tab-vertical-content-space-inset-sm-bottom) var(--sky-comp-tab-vertical-content-space-inset-sm-left))}}:host-context(.sky-responsive-container-sm) .sky-vertical-tabset-content,:host-context(.sky-responsive-container-md) .sky-vertical-tabset-content,:host-context(.sky-responsive-container-lg) .sky-vertical-tabset-content{margin:var(--sky-override-vertical-tabset-content-margin-sm-lg, var(--sky-comp-tab-vertical-content-space-inset-sm-top) var(--sky-comp-tab-vertical-content-space-inset-sm-right) var(--sky-comp-tab-vertical-content-space-inset-sm-bottom) var(--sky-comp-tab-vertical-content-space-inset-sm-left))}\n"] }]
|
|
815
815
|
}], ctorParameters: () => [{ type: SkyVerticalTabsetAdapterService }, { type: SkyVerticalTabsetService }, { type: i3$1.SkyLibResourcesService }, { type: i0.ChangeDetectorRef }, { type: SkyTabIdService }], propDecorators: { showTabsText: [{
|
|
@@ -836,8 +836,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
|
|
|
836
836
|
}] } });
|
|
837
837
|
|
|
838
838
|
class SkyVerticalTabsetModule {
|
|
839
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
840
|
-
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "
|
|
839
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: SkyVerticalTabsetModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
840
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.0.1", ngImport: i0, type: SkyVerticalTabsetModule, declarations: [SkyVerticalTabsetComponent,
|
|
841
841
|
SkyVerticalTabsetGroupComponent,
|
|
842
842
|
SkyVerticalTabComponent], imports: [CommonModule,
|
|
843
843
|
SkyIconModule,
|
|
@@ -851,7 +851,7 @@ class SkyVerticalTabsetModule {
|
|
|
851
851
|
_SkyTransitionEndHandlerDirective], exports: [SkyVerticalTabsetComponent,
|
|
852
852
|
SkyVerticalTabsetGroupComponent,
|
|
853
853
|
SkyVerticalTabComponent] }); }
|
|
854
|
-
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "
|
|
854
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: SkyVerticalTabsetModule, providers: [SkyVerticalTabsetAdapterService], imports: [CommonModule,
|
|
855
855
|
SkyIconModule,
|
|
856
856
|
SkyIdModule,
|
|
857
857
|
SkyExpansionIndicatorModule,
|
|
@@ -860,7 +860,7 @@ class SkyVerticalTabsetModule {
|
|
|
860
860
|
SkyThemeModule,
|
|
861
861
|
_SkyAnimationSlideComponent] }); }
|
|
862
862
|
}
|
|
863
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
863
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: SkyVerticalTabsetModule, decorators: [{
|
|
864
864
|
type: NgModule,
|
|
865
865
|
args: [{
|
|
866
866
|
declarations: [
|
|
@@ -914,10 +914,10 @@ class SkySectionedFormService {
|
|
|
914
914
|
requiredFieldChanged(isRequired) {
|
|
915
915
|
this.requiredChange.next(isRequired);
|
|
916
916
|
}
|
|
917
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
918
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
917
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: SkySectionedFormService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
918
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: SkySectionedFormService }); }
|
|
919
919
|
}
|
|
920
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
920
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: SkySectionedFormService, decorators: [{
|
|
921
921
|
type: Injectable
|
|
922
922
|
}] });
|
|
923
923
|
|
|
@@ -959,12 +959,12 @@ class SkySectionedFormSectionComponent {
|
|
|
959
959
|
this.#ngUnsubscribe.next();
|
|
960
960
|
this.#ngUnsubscribe.complete();
|
|
961
961
|
}
|
|
962
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
963
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
962
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: SkySectionedFormSectionComponent, deps: [{ token: SkySectionedFormService }, { token: SkyVerticalTabsetService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
963
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.1", type: SkySectionedFormSectionComponent, isStandalone: false, 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 [requiredIndicator]=\"fieldRequired\"\n [showTabRightArrow]=\"true\"\n [tabHeaderCount]=\"itemCount\"\n [tabHeading]=\"heading\"\n [tabId]=\"sectionTabId\"\n>\n <ng-content />\n</sky-vertical-tab>\n", dependencies: [{ kind: "component", type: SkyVerticalTabComponent, selector: "sky-vertical-tab", inputs: ["active", "ariaControls", "ariaRole", "disabled", "errorIndicator", "requiredIndicator", "tabHeaderCount", "tabHeading", "showTabRightArrow", "tabId"] }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
|
|
964
964
|
}
|
|
965
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
965
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: SkySectionedFormSectionComponent, decorators: [{
|
|
966
966
|
type: Component,
|
|
967
|
-
args: [{ selector: 'sky-sectioned-form-section', providers: [SkySectionedFormService], standalone: false, template: "<sky-vertical-tab\n [active]=\"active\"\n [errorIndicator]=\"fieldInvalid\"\n [requiredIndicator]=\"fieldRequired\"\n [showTabRightArrow]=\"true\"\n [tabHeaderCount]=\"itemCount\"\n [tabHeading]=\"heading\"\n [tabId]=\"sectionTabId\"\n>\n <ng-content />\n</sky-vertical-tab>\n" }]
|
|
967
|
+
args: [{ selector: 'sky-sectioned-form-section', providers: [SkySectionedFormService], changeDetection: ChangeDetectionStrategy.Eager, standalone: false, template: "<sky-vertical-tab\n [active]=\"active\"\n [errorIndicator]=\"fieldInvalid\"\n [requiredIndicator]=\"fieldRequired\"\n [showTabRightArrow]=\"true\"\n [tabHeaderCount]=\"itemCount\"\n [tabHeading]=\"heading\"\n [tabId]=\"sectionTabId\"\n>\n <ng-content />\n</sky-vertical-tab>\n" }]
|
|
968
968
|
}], ctorParameters: () => [{ type: SkySectionedFormService }, { type: SkyVerticalTabsetService }, { type: i0.ChangeDetectorRef }], propDecorators: { heading: [{
|
|
969
969
|
type: Input
|
|
970
970
|
}], itemCount: [{
|
|
@@ -1018,7 +1018,8 @@ class SkySectionedFormComponent {
|
|
|
1018
1018
|
this.ariaRole = 'tablist';
|
|
1019
1019
|
this.#ngUnsubscribe = new Subject();
|
|
1020
1020
|
this.#_messageStream = new Subject();
|
|
1021
|
-
this.animationEnabled = signal(false,
|
|
1021
|
+
this.animationEnabled = signal(false, /* @ts-ignore */
|
|
1022
|
+
...(ngDevMode ? [{ debugName: "animationEnabled" }] : /* istanbul ignore next */ []));
|
|
1022
1023
|
this.#changeRef = changeRef;
|
|
1023
1024
|
this.#tabIdSvc = tabIdSvc;
|
|
1024
1025
|
this.#logger = logger;
|
|
@@ -1116,10 +1117,10 @@ class SkySectionedFormComponent {
|
|
|
1116
1117
|
}
|
|
1117
1118
|
});
|
|
1118
1119
|
}
|
|
1119
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1120
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
1120
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: SkySectionedFormComponent, deps: [{ token: SkyVerticalTabsetService }, { token: i0.ChangeDetectorRef }, { token: SkyTabIdService }, { token: i3.SkyLogService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1121
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: SkySectionedFormComponent, isStandalone: false, 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 [attr.aria-orientation]=\"ariaRole ? 'vertical' : undefined\"\n [attr.aria-owns]=\"ariaRole ? ariaOwns : undefined\"\n [attr.role]=\"ariaRole\"\n ></span>\n @if (maintainSectionContent || tabService.tabsVisible()) {\n <div\n class=\"sky-sectioned-form-tabs\"\n [class.sky-animation-slide-enter-left]=\"animationEnabled()\"\n [ngClass]=\"{\n 'sky-sectioned-form-tabs-hidden': !tabService.tabsVisible(),\n 'sky-sectioned-form-tabs-only': !tabService.contentVisible()\n }\"\n >\n <ng-content />\n </div>\n }\n @if (maintainSectionContent || tabService.contentVisible()) {\n <div\n #skySectionSideContent\n class=\"sky-sectioned-form-content\"\n [class.sky-animation-slide-enter-right]=\"animationEnabled()\"\n [ngClass]=\"{\n 'sky-sectioned-form-content-hidden': !tabService.contentVisible()\n }\"\n ></div>\n }\n</div>\n", styles: [".sky-sectioned-form:not(.sky-theme-modern *){--sky-override-sectioned-form-content-border-left: 1px solid var(--sky-border-color-neutral-medium);--sky-override-sectioned-form-content-padding: var(--sky-padding-even-md) var(--sky-padding-even-xl);--sky-override-sectioned-form-modal-margin-adjustment: -15px;--sky-override-sectioned-form-tabs-only-padding: var(--sky-padding-even-md);--sky-override-sectioned-form-tabs-padding: 0}:host .sky-sectioned-form{display:block;max-height:none}:host .sky-sectioned-form-content{flex-basis:auto;overflow-y:visible;padding:var(--sky-override-sectioned-form-content-padding, var(--sky-comp-modal-content-space-inset-top) var(--sky-comp-modal-content-space-inset-right) var(--sky-comp-modal-content-space-inset-bottom) var(--sky-comp-modal-content-space-inset-left))}:host .sky-sectioned-form-tabs{flex-basis:auto;overflow-y:visible;padding:var(--sky-override-sectioned-form-tabs-padding, var(--sky-comp-tab-vertical-group-space-inset-top) var(--sky-comp-tab-vertical-group-space-inset-right) var(--sky-comp-tab-vertical-group-space-inset-bottom) var(--sky-comp-tab-vertical-group-space-inset-left))}:host .sky-sectioned-form-tabs+.sky-sectioned-form-content{border-left:var(--sky-override-sectioned-form-content-border-left, var(--sky-border-width-divider) solid var(--sky-color-border-divider))}:host .sky-sectioned-form-tabs-only{padding:var(--sky-override-sectioned-form-tabs-only-padding, var(--sky-comp-modal-content-space-inset-top) var(--sky-comp-modal-content-space-inset-right) var(--sky-comp-modal-content-space-inset-bottom) var(--sky-comp-modal-content-space-inset-left))}: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;padding:var(--sky-override-sectioned-form-content-padding, var(--sky-comp-modal-content-space-inset-top) var(--sky-comp-modal-content-space-inset-right) var(--sky-comp-modal-content-space-inset-bottom) var(--sky-comp-modal-content-space-inset-left))}: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;padding:var(--sky-override-sectioned-form-tabs-padding, var(--sky-comp-tab-vertical-group-space-inset-top) var(--sky-comp-tab-vertical-group-space-inset-right) var(--sky-comp-tab-vertical-group-space-inset-bottom) var(--sky-comp-tab-vertical-group-space-inset-left))}: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:var(--sky-override-sectioned-form-content-border-left, var(--sky-border-width-divider) solid var(--sky-color-border-divider))}: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-override-sectioned-form-tabs-only-padding, var(--sky-comp-modal-content-space-inset-top) var(--sky-comp-modal-content-space-inset-right) var(--sky-comp-modal-content-space-inset-bottom) var(--sky-comp-modal-content-space-inset-left))}@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:var(--sky-override-sectioned-form-modal-margin-adjustment, calc(var(--sky-comp-modal-content-space-inset-top) * -1) calc(var(--sky-comp-modal-content-space-inset-right) * -1) calc(var(--sky-comp-modal-content-space-inset-bottom) * -1) calc(var(--sky-comp-modal-content-space-inset-left) * -1))}.sky-sectioned-form-tabs-hidden,.sky-sectioned-form-content-hidden{display:none}\n"], dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1121
1122
|
}
|
|
1122
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1123
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: SkySectionedFormComponent, decorators: [{
|
|
1123
1124
|
type: Component,
|
|
1124
1125
|
args: [{ selector: 'sky-sectioned-form', providers: [SkyTabIdService, SkyVerticalTabsetService], changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, 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 [attr.aria-orientation]=\"ariaRole ? 'vertical' : undefined\"\n [attr.aria-owns]=\"ariaRole ? ariaOwns : undefined\"\n [attr.role]=\"ariaRole\"\n ></span>\n @if (maintainSectionContent || tabService.tabsVisible()) {\n <div\n class=\"sky-sectioned-form-tabs\"\n [class.sky-animation-slide-enter-left]=\"animationEnabled()\"\n [ngClass]=\"{\n 'sky-sectioned-form-tabs-hidden': !tabService.tabsVisible(),\n 'sky-sectioned-form-tabs-only': !tabService.contentVisible()\n }\"\n >\n <ng-content />\n </div>\n }\n @if (maintainSectionContent || tabService.contentVisible()) {\n <div\n #skySectionSideContent\n class=\"sky-sectioned-form-content\"\n [class.sky-animation-slide-enter-right]=\"animationEnabled()\"\n [ngClass]=\"{\n 'sky-sectioned-form-content-hidden': !tabService.contentVisible()\n }\"\n ></div>\n }\n</div>\n", styles: [".sky-sectioned-form:not(.sky-theme-modern *){--sky-override-sectioned-form-content-border-left: 1px solid var(--sky-border-color-neutral-medium);--sky-override-sectioned-form-content-padding: var(--sky-padding-even-md) var(--sky-padding-even-xl);--sky-override-sectioned-form-modal-margin-adjustment: -15px;--sky-override-sectioned-form-tabs-only-padding: var(--sky-padding-even-md);--sky-override-sectioned-form-tabs-padding: 0}:host .sky-sectioned-form{display:block;max-height:none}:host .sky-sectioned-form-content{flex-basis:auto;overflow-y:visible;padding:var(--sky-override-sectioned-form-content-padding, var(--sky-comp-modal-content-space-inset-top) var(--sky-comp-modal-content-space-inset-right) var(--sky-comp-modal-content-space-inset-bottom) var(--sky-comp-modal-content-space-inset-left))}:host .sky-sectioned-form-tabs{flex-basis:auto;overflow-y:visible;padding:var(--sky-override-sectioned-form-tabs-padding, var(--sky-comp-tab-vertical-group-space-inset-top) var(--sky-comp-tab-vertical-group-space-inset-right) var(--sky-comp-tab-vertical-group-space-inset-bottom) var(--sky-comp-tab-vertical-group-space-inset-left))}:host .sky-sectioned-form-tabs+.sky-sectioned-form-content{border-left:var(--sky-override-sectioned-form-content-border-left, var(--sky-border-width-divider) solid var(--sky-color-border-divider))}:host .sky-sectioned-form-tabs-only{padding:var(--sky-override-sectioned-form-tabs-only-padding, var(--sky-comp-modal-content-space-inset-top) var(--sky-comp-modal-content-space-inset-right) var(--sky-comp-modal-content-space-inset-bottom) var(--sky-comp-modal-content-space-inset-left))}: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;padding:var(--sky-override-sectioned-form-content-padding, var(--sky-comp-modal-content-space-inset-top) var(--sky-comp-modal-content-space-inset-right) var(--sky-comp-modal-content-space-inset-bottom) var(--sky-comp-modal-content-space-inset-left))}: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;padding:var(--sky-override-sectioned-form-tabs-padding, var(--sky-comp-tab-vertical-group-space-inset-top) var(--sky-comp-tab-vertical-group-space-inset-right) var(--sky-comp-tab-vertical-group-space-inset-bottom) var(--sky-comp-tab-vertical-group-space-inset-left))}: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:var(--sky-override-sectioned-form-content-border-left, var(--sky-border-width-divider) solid var(--sky-color-border-divider))}: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-override-sectioned-form-tabs-only-padding, var(--sky-comp-modal-content-space-inset-top) var(--sky-comp-modal-content-space-inset-right) var(--sky-comp-modal-content-space-inset-bottom) var(--sky-comp-modal-content-space-inset-left))}@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:var(--sky-override-sectioned-form-modal-margin-adjustment, calc(var(--sky-comp-modal-content-space-inset-top) * -1) calc(var(--sky-comp-modal-content-space-inset-right) * -1) calc(var(--sky-comp-modal-content-space-inset-bottom) * -1) calc(var(--sky-comp-modal-content-space-inset-left) * -1))}.sky-sectioned-form-tabs-hidden,.sky-sectioned-form-content-hidden{display:none}\n"] }]
|
|
1125
1126
|
}], ctorParameters: () => [{ type: SkyVerticalTabsetService }, { type: i0.ChangeDetectorRef }, { type: SkyTabIdService }, { type: i3.SkyLogService }], propDecorators: { maintainSectionContent: [{
|
|
@@ -1136,17 +1137,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
|
|
|
1136
1137
|
}] } });
|
|
1137
1138
|
|
|
1138
1139
|
class SkySectionedFormModule {
|
|
1139
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1140
|
-
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "
|
|
1140
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: SkySectionedFormModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
1141
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.0.1", ngImport: i0, type: SkySectionedFormModule, declarations: [SkySectionedFormComponent, SkySectionedFormSectionComponent], imports: [CommonModule,
|
|
1141
1142
|
SkyCheckboxModule,
|
|
1142
1143
|
SkyThemeModule,
|
|
1143
1144
|
SkyVerticalTabsetModule], exports: [SkySectionedFormComponent, SkySectionedFormSectionComponent] }); }
|
|
1144
|
-
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "
|
|
1145
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: SkySectionedFormModule, imports: [CommonModule,
|
|
1145
1146
|
SkyCheckboxModule,
|
|
1146
1147
|
SkyThemeModule,
|
|
1147
1148
|
SkyVerticalTabsetModule] }); }
|
|
1148
1149
|
}
|
|
1149
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1150
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: SkySectionedFormModule, decorators: [{
|
|
1150
1151
|
type: NgModule,
|
|
1151
1152
|
args: [{
|
|
1152
1153
|
declarations: [SkySectionedFormComponent, SkySectionedFormSectionComponent],
|
|
@@ -1167,10 +1168,10 @@ class SkyTabButtonAdapterService {
|
|
|
1167
1168
|
focusButtonLink(buttonEl) {
|
|
1168
1169
|
buttonEl.nativeElement.querySelector('a').focus();
|
|
1169
1170
|
}
|
|
1170
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1171
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
1171
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: SkyTabButtonAdapterService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
1172
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: SkyTabButtonAdapterService }); }
|
|
1172
1173
|
}
|
|
1173
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1174
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: SkyTabButtonAdapterService, decorators: [{
|
|
1174
1175
|
type: Injectable
|
|
1175
1176
|
}] });
|
|
1176
1177
|
|
|
@@ -1357,10 +1358,10 @@ class SkyTabsetService {
|
|
|
1357
1358
|
}
|
|
1358
1359
|
return prevIndex;
|
|
1359
1360
|
}
|
|
1360
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1361
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
1361
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: SkyTabsetService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
1362
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: SkyTabsetService }); }
|
|
1362
1363
|
}
|
|
1363
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1364
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: SkyTabsetService, decorators: [{
|
|
1364
1365
|
type: Injectable
|
|
1365
1366
|
}], ctorParameters: () => [] });
|
|
1366
1367
|
|
|
@@ -1480,10 +1481,10 @@ class SkyTabButtonComponent {
|
|
|
1480
1481
|
}
|
|
1481
1482
|
this.#changeDetectorRef.markForCheck();
|
|
1482
1483
|
}
|
|
1483
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1484
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
1484
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: SkyTabButtonComponent, deps: [{ token: i0.ElementRef }, { token: SkyTabButtonAdapterService }, { token: i0.ChangeDetectorRef }, { token: SkyTabsetService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1485
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: SkyTabButtonComponent, isStandalone: false, 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 [skyThemeClass]=\"{\n 'sky-btn sky-btn-icon-borderless': 'modern'\n }\"\n (click)=\"onCloseClick($event)\"\n (keydown.enter)=\"onCloseClick($event)\"\n >\n <sky-icon iconName=\"close\" />\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-padding: 1px 6px;--sky-override-tab-close-position: absolute;--sky-override-tab-close-position-right: 10px;--sky-override-tab-close-position-top: 10px;--sky-override-tab-margin-right: 5px;--sky-override-tab-btn-wizard-disabled-background-color: var( --sky-background-color-neutral-light );--sky-override-tab-btn-wizard-disabled-border-color: #e2e3e4}.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:var(--sky-override-tab-close-position, static);top:var(--sky-override-tab-close-position-top, none);right:var(--sky-override-tab-close-position-right, none);padding:var(--sky-override-tab-close-padding, var(--sky-comp-button-borderless-space-inset-top) var(--sky-comp-button-borderless-space-inset-right) var(--sky-comp-button-borderless-space-inset-bottom) var(--sky-comp-button-borderless-space-inset-left))}.sky-btn-tab-wrapper .sky-btn-tab-close.sky-btn-icon-borderless{display:inline;height:auto;width:auto}.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, var(--sky-comp-tab-horizontal-space-inset-right))}.sky-btn-tab-wrapper a.sky-btn-tab-wizard.sky-btn-tab-disabled{background-color:var(--sky-override-tab-btn-wizard-disabled-background-color, var(--sky-color-background-tab-wizard-disabled));border-color:var(--sky-override-tab-btn-wizard-disabled-border-color, var(--sky-color-border-tab-wizard-disabled))}\n"], dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i6.λ1, selector: "sky-icon", inputs: ["iconName", "variant", "iconSize"] }, { kind: "directive", type: i3.λ2, selector: "[skyId]", exportAs: ["skyId"] }, { kind: "directive", type: i6$1.λ2, selector: "[skyThemeClass]", inputs: ["class", "skyThemeClass"] }, { kind: "pipe", type: i3$1.SkyLibResourcesPipe, name: "skyLibResources" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
1485
1486
|
}
|
|
1486
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1487
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: SkyTabButtonComponent, decorators: [{
|
|
1487
1488
|
type: Component,
|
|
1488
1489
|
args: [{ selector: 'sky-tab-button', providers: [SkyTabButtonAdapterService], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, standalone: false, 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 [skyThemeClass]=\"{\n 'sky-btn sky-btn-icon-borderless': 'modern'\n }\"\n (click)=\"onCloseClick($event)\"\n (keydown.enter)=\"onCloseClick($event)\"\n >\n <sky-icon iconName=\"close\" />\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-padding: 1px 6px;--sky-override-tab-close-position: absolute;--sky-override-tab-close-position-right: 10px;--sky-override-tab-close-position-top: 10px;--sky-override-tab-margin-right: 5px;--sky-override-tab-btn-wizard-disabled-background-color: var( --sky-background-color-neutral-light );--sky-override-tab-btn-wizard-disabled-border-color: #e2e3e4}.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:var(--sky-override-tab-close-position, static);top:var(--sky-override-tab-close-position-top, none);right:var(--sky-override-tab-close-position-right, none);padding:var(--sky-override-tab-close-padding, var(--sky-comp-button-borderless-space-inset-top) var(--sky-comp-button-borderless-space-inset-right) var(--sky-comp-button-borderless-space-inset-bottom) var(--sky-comp-button-borderless-space-inset-left))}.sky-btn-tab-wrapper .sky-btn-tab-close.sky-btn-icon-borderless{display:inline;height:auto;width:auto}.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, var(--sky-comp-tab-horizontal-space-inset-right))}.sky-btn-tab-wrapper a.sky-btn-tab-wizard.sky-btn-tab-disabled{background-color:var(--sky-override-tab-btn-wizard-disabled-background-color, var(--sky-color-background-tab-wizard-disabled));border-color:var(--sky-override-tab-btn-wizard-disabled-border-color, var(--sky-color-border-tab-wizard-disabled))}\n"] }]
|
|
1489
1490
|
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: SkyTabButtonAdapterService }, { type: i0.ChangeDetectorRef }, { type: SkyTabsetService }], propDecorators: { active: [{
|
|
@@ -1632,10 +1633,10 @@ class SkyTabsetPermalinkService {
|
|
|
1632
1633
|
});
|
|
1633
1634
|
return params;
|
|
1634
1635
|
}
|
|
1635
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1636
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
1636
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: SkyTabsetPermalinkService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
1637
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: SkyTabsetPermalinkService }); }
|
|
1637
1638
|
}
|
|
1638
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1639
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: SkyTabsetPermalinkService, decorators: [{
|
|
1639
1640
|
type: Injectable
|
|
1640
1641
|
}] });
|
|
1641
1642
|
|
|
@@ -1804,10 +1805,10 @@ class SkyTabComponent {
|
|
|
1804
1805
|
this.#permalinkService.urlify(this.permalinkValue) ||
|
|
1805
1806
|
this.#permalinkService.urlify(this.tabHeading);
|
|
1806
1807
|
}
|
|
1807
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1808
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
1808
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: SkyTabComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: SkyTabsetPermalinkService }, { token: SkyTabsetService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1809
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.1", type: SkyTabComponent, isStandalone: false, 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}:host.sky-layout-host-fit,:host.sky-layout-host-list{--sky-comp-override-list-header-background-color: var( --sky-color-background-container-dimmed )}.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 }); }
|
|
1809
1810
|
}
|
|
1810
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1811
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: SkyTabComponent, decorators: [{
|
|
1811
1812
|
type: Component,
|
|
1812
1813
|
args: [{ hostDirectives: [SkyResponsiveHostDirective], selector: 'sky-tab', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, 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}:host.sky-layout-host-fit,:host.sky-layout-host-list{--sky-comp-override-list-header-background-color: var( --sky-color-background-container-dimmed )}.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"] }]
|
|
1813
1814
|
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: SkyTabsetPermalinkService }, { type: SkyTabsetService }], propDecorators: { active: [{
|
|
@@ -1841,10 +1842,10 @@ class SkyTabsetNavButtonDisabledPipe {
|
|
|
1841
1842
|
}
|
|
1842
1843
|
return !tabToSelectExists || !!tabToSelectIsDisabled;
|
|
1843
1844
|
}
|
|
1844
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1845
|
-
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "
|
|
1845
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: SkyTabsetNavButtonDisabledPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
|
|
1846
|
+
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.0.1", ngImport: i0, type: SkyTabsetNavButtonDisabledPipe, isStandalone: false, name: "skyTabsetNavButtonDisabled" }); }
|
|
1846
1847
|
}
|
|
1847
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1848
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: SkyTabsetNavButtonDisabledPipe, decorators: [{
|
|
1848
1849
|
type: Pipe,
|
|
1849
1850
|
args: [{
|
|
1850
1851
|
name: 'skyTabsetNavButtonDisabled',
|
|
@@ -1983,12 +1984,12 @@ class SkyTabsetNavButtonComponent {
|
|
|
1983
1984
|
}
|
|
1984
1985
|
}
|
|
1985
1986
|
}
|
|
1986
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1987
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
1987
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: SkyTabsetNavButtonComponent, deps: [{ token: i3.SkyLogService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1988
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: SkyTabsetNavButtonComponent, isStandalone: false, selector: "sky-tabset-nav-button", inputs: { tabset: "tabset", buttonType: "buttonType", buttonText: "buttonText", disabled: "disabled" }, host: { properties: { "attr.data-button-type": "this.buttonTypeData" } }, 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" }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
|
|
1988
1989
|
}
|
|
1989
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1990
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: SkyTabsetNavButtonComponent, decorators: [{
|
|
1990
1991
|
type: Component,
|
|
1991
|
-
args: [{ selector: 'sky-tabset-nav-button', standalone: false, 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" }]
|
|
1992
|
+
args: [{ selector: 'sky-tabset-nav-button', changeDetection: ChangeDetectionStrategy.Eager, standalone: false, 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" }]
|
|
1992
1993
|
}], ctorParameters: () => [{ type: i3.SkyLogService }], propDecorators: { tabset: [{
|
|
1993
1994
|
type: Input
|
|
1994
1995
|
}], buttonType: [{
|
|
@@ -2060,10 +2061,10 @@ class SkyTabsetAdapterService {
|
|
|
2060
2061
|
}
|
|
2061
2062
|
return firstTabRect.left - tabsetRect.left;
|
|
2062
2063
|
}
|
|
2063
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
2064
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
2064
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: SkyTabsetAdapterService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
2065
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: SkyTabsetAdapterService }); }
|
|
2065
2066
|
}
|
|
2066
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
2067
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: SkyTabsetAdapterService, decorators: [{
|
|
2067
2068
|
type: Injectable
|
|
2068
2069
|
}], ctorParameters: () => [] });
|
|
2069
2070
|
|
|
@@ -2491,20 +2492,20 @@ class SkyTabsetComponent {
|
|
|
2491
2492
|
this.activeChange.emit(activeIndex);
|
|
2492
2493
|
}
|
|
2493
2494
|
}
|
|
2494
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
2495
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
2495
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: SkyTabsetComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: SkyTabsetAdapterService }, { token: SkyTabsetPermalinkService }, { token: SkyTabsetService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2496
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: SkyTabsetComponent, isStandalone: false, 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: { "attr.data-tab-style": "this.dataTabStyle", "class": "this.cssClass" } }, providers: [
|
|
2496
2497
|
SkyTabsetAdapterService,
|
|
2497
2498
|
SkyTabsetPermalinkService,
|
|
2498
2499
|
SkyTabsetService,
|
|
2499
|
-
], queries: [{ propertyName: "tabs", predicate: SkyTabComponent }], ngImport: i0, template: "<!-- eslint-disable @angular-eslint/template/interactive-supports-focus -->\n<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-theme-margin-right-xs': 'default'\n }\"\n (click)=\"onNewTabClick()\"\n >\n <sky-icon iconName=\"add\" />\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-theme-margin-right-xs': 'default'\n }\"\n (click)=\"onOpenTabClick()\"\n >\n <sky-icon iconName=\"folder-open\" />\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-tab-heading-display: block;--sky-override-tabset-align-items: center;--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-icon-button-padding: 6px 12px;--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-modal-margin: 0 0 20px}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:var(--sky-override-tabset-align-items, baseline);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, var(--sky-layout-host-tab-content-spacing, var(--sky-comp-tabset-tabs-space-inset-top) var(--sky-comp-tabset-tabs-space-inset-right) var(--sky-comp-tabset-tabs-space-inset-bottom) var(--sky-comp-tabset-tabs-space-inset-left)));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-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-comp-modal-content-space-inset-top) * -1) calc(var(--sky-comp-modal-content-space-inset-right) * -1) var(--sky-comp-modal-content-space-inset-bottom) calc(var(--sky-comp-modal-content-space-inset-left) * -1) );padding-left:var(--sky-override-tabset-modal-padding-left, var(--sky-comp-modal-content-space-inset-left));padding-right:var(--sky-override-tabset-modal-padding-none, var(--sky-comp-modal-content-space-inset-right))}.sky-modal-content .sky-tabset-style-wizard{--sky-tabset-margin: var( --sky-override-tabset-wizard-modal-margin, calc(var(--sky-comp-wizard-tabset-space-inset-top) * -1) calc(var(--sky-comp-wizard-tabset-space-inset-right) * -1) var(--sky-comp-wizard-tabset-space-inset-left) calc(var(--sky-comp-wizard-tabset-space-inset-left) * -1) );padding-left:var(--sky-override-tabset-modal-padding-none, var(--sky-comp-wizard-tabset-tabs-space-inset-left));padding-right:var(--sky-override-tabset-modal-padding-none, var(--sky-comp-wizard-tabset-tabs-space-inset-right))}.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));padding:var(--sky-override-tabset-icon-button-padding, var(--sky-comp-tabset-button-space-inset-top) var(--sky-comp-tabset-button-space-inset-right) var(--sky-comp-tabset-button-space-inset-bottom) var(--sky-comp-tabset-button-space-inset-left))}.sky-tabset-dropdown{order:0;max-width:100%}.sky-tabset.sky-tabset-mode-dropdown{overflow:hidden}.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;display:var(--sky-override-tab-heading-display, flex);align-items:baseline;justify-content:space-between}.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: ["iconName", "variant", "iconSize"] }, { kind: "directive", type: i6$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 }); }
|
|
2500
|
+
], queries: [{ propertyName: "tabs", predicate: SkyTabComponent }], ngImport: i0, template: "<!-- eslint-disable @angular-eslint/template/interactive-supports-focus -->\n<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-theme-margin-right-xs': 'default'\n }\"\n (click)=\"onNewTabClick()\"\n >\n <sky-icon iconName=\"add\" />\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-theme-margin-right-xs': 'default'\n }\"\n (click)=\"onOpenTabClick()\"\n >\n <sky-icon iconName=\"folder-open\" />\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-tab-heading-display: block;--sky-override-tabset-align-items: center;--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-icon-button-padding: 6px 12px;--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-modal-margin: 0 0 20px}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-layout-fit sky-tab:has(>div.sky-tab[hidden]){display:contents}.sky-tabset{--sky-tabset-margin: 0;align-items:var(--sky-override-tabset-align-items, baseline);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, var(--sky-layout-host-tab-content-spacing, var(--sky-comp-tabset-tabs-space-inset-top) var(--sky-comp-tabset-tabs-space-inset-right) var(--sky-comp-tabset-tabs-space-inset-bottom) var(--sky-comp-tabset-tabs-space-inset-left)));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-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-comp-modal-content-space-inset-top) * -1) calc(var(--sky-comp-modal-content-space-inset-right) * -1) var(--sky-comp-modal-content-space-inset-bottom) calc(var(--sky-comp-modal-content-space-inset-left) * -1) );padding-left:var(--sky-override-tabset-modal-padding-left, var(--sky-comp-modal-content-space-inset-left));padding-right:var(--sky-override-tabset-modal-padding-none, var(--sky-comp-modal-content-space-inset-right))}.sky-modal-content .sky-tabset-style-wizard{--sky-tabset-margin: var( --sky-override-tabset-wizard-modal-margin, calc(var(--sky-comp-wizard-tabset-space-inset-top) * -1) calc(var(--sky-comp-wizard-tabset-space-inset-right) * -1) var(--sky-comp-wizard-tabset-space-inset-left) calc(var(--sky-comp-wizard-tabset-space-inset-left) * -1) );padding-left:var(--sky-override-tabset-modal-padding-none, var(--sky-comp-wizard-tabset-tabs-space-inset-left));padding-right:var(--sky-override-tabset-modal-padding-none, var(--sky-comp-wizard-tabset-tabs-space-inset-right))}.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));padding:var(--sky-override-tabset-icon-button-padding, var(--sky-comp-tabset-button-space-inset-top) var(--sky-comp-tabset-button-space-inset-right) var(--sky-comp-tabset-button-space-inset-bottom) var(--sky-comp-tabset-button-space-inset-left))}.sky-tabset-dropdown{order:0;max-width:100%}.sky-tabset.sky-tabset-mode-dropdown{overflow:hidden}.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;display:var(--sky-override-tab-heading-display, flex);align-items:baseline;justify-content:space-between}.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: ["iconName", "variant", "iconSize"] }, { kind: "directive", type: i6$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 }); }
|
|
2500
2501
|
}
|
|
2501
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
2502
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: SkyTabsetComponent, decorators: [{
|
|
2502
2503
|
type: Component,
|
|
2503
2504
|
args: [{ selector: 'sky-tabset', providers: [
|
|
2504
2505
|
SkyTabsetAdapterService,
|
|
2505
2506
|
SkyTabsetPermalinkService,
|
|
2506
2507
|
SkyTabsetService,
|
|
2507
|
-
], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, standalone: false, template: "<!-- eslint-disable @angular-eslint/template/interactive-supports-focus -->\n<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-theme-margin-right-xs': 'default'\n }\"\n (click)=\"onNewTabClick()\"\n >\n <sky-icon iconName=\"add\" />\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-theme-margin-right-xs': 'default'\n }\"\n (click)=\"onOpenTabClick()\"\n >\n <sky-icon iconName=\"folder-open\" />\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-tab-heading-display: block;--sky-override-tabset-align-items: center;--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-icon-button-padding: 6px 12px;--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-modal-margin: 0 0 20px}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:var(--sky-override-tabset-align-items, baseline);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, var(--sky-layout-host-tab-content-spacing, var(--sky-comp-tabset-tabs-space-inset-top) var(--sky-comp-tabset-tabs-space-inset-right) var(--sky-comp-tabset-tabs-space-inset-bottom) var(--sky-comp-tabset-tabs-space-inset-left)));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-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-comp-modal-content-space-inset-top) * -1) calc(var(--sky-comp-modal-content-space-inset-right) * -1) var(--sky-comp-modal-content-space-inset-bottom) calc(var(--sky-comp-modal-content-space-inset-left) * -1) );padding-left:var(--sky-override-tabset-modal-padding-left, var(--sky-comp-modal-content-space-inset-left));padding-right:var(--sky-override-tabset-modal-padding-none, var(--sky-comp-modal-content-space-inset-right))}.sky-modal-content .sky-tabset-style-wizard{--sky-tabset-margin: var( --sky-override-tabset-wizard-modal-margin, calc(var(--sky-comp-wizard-tabset-space-inset-top) * -1) calc(var(--sky-comp-wizard-tabset-space-inset-right) * -1) var(--sky-comp-wizard-tabset-space-inset-left) calc(var(--sky-comp-wizard-tabset-space-inset-left) * -1) );padding-left:var(--sky-override-tabset-modal-padding-none, var(--sky-comp-wizard-tabset-tabs-space-inset-left));padding-right:var(--sky-override-tabset-modal-padding-none, var(--sky-comp-wizard-tabset-tabs-space-inset-right))}.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));padding:var(--sky-override-tabset-icon-button-padding, var(--sky-comp-tabset-button-space-inset-top) var(--sky-comp-tabset-button-space-inset-right) var(--sky-comp-tabset-button-space-inset-bottom) var(--sky-comp-tabset-button-space-inset-left))}.sky-tabset-dropdown{order:0;max-width:100%}.sky-tabset.sky-tabset-mode-dropdown{overflow:hidden}.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;display:var(--sky-override-tab-heading-display, flex);align-items:baseline;justify-content:space-between}.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"] }]
|
|
2508
|
+
], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, standalone: false, template: "<!-- eslint-disable @angular-eslint/template/interactive-supports-focus -->\n<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-theme-margin-right-xs': 'default'\n }\"\n (click)=\"onNewTabClick()\"\n >\n <sky-icon iconName=\"add\" />\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-theme-margin-right-xs': 'default'\n }\"\n (click)=\"onOpenTabClick()\"\n >\n <sky-icon iconName=\"folder-open\" />\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-tab-heading-display: block;--sky-override-tabset-align-items: center;--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-icon-button-padding: 6px 12px;--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-modal-margin: 0 0 20px}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-layout-fit sky-tab:has(>div.sky-tab[hidden]){display:contents}.sky-tabset{--sky-tabset-margin: 0;align-items:var(--sky-override-tabset-align-items, baseline);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, var(--sky-layout-host-tab-content-spacing, var(--sky-comp-tabset-tabs-space-inset-top) var(--sky-comp-tabset-tabs-space-inset-right) var(--sky-comp-tabset-tabs-space-inset-bottom) var(--sky-comp-tabset-tabs-space-inset-left)));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-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-comp-modal-content-space-inset-top) * -1) calc(var(--sky-comp-modal-content-space-inset-right) * -1) var(--sky-comp-modal-content-space-inset-bottom) calc(var(--sky-comp-modal-content-space-inset-left) * -1) );padding-left:var(--sky-override-tabset-modal-padding-left, var(--sky-comp-modal-content-space-inset-left));padding-right:var(--sky-override-tabset-modal-padding-none, var(--sky-comp-modal-content-space-inset-right))}.sky-modal-content .sky-tabset-style-wizard{--sky-tabset-margin: var( --sky-override-tabset-wizard-modal-margin, calc(var(--sky-comp-wizard-tabset-space-inset-top) * -1) calc(var(--sky-comp-wizard-tabset-space-inset-right) * -1) var(--sky-comp-wizard-tabset-space-inset-left) calc(var(--sky-comp-wizard-tabset-space-inset-left) * -1) );padding-left:var(--sky-override-tabset-modal-padding-none, var(--sky-comp-wizard-tabset-tabs-space-inset-left));padding-right:var(--sky-override-tabset-modal-padding-none, var(--sky-comp-wizard-tabset-tabs-space-inset-right))}.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));padding:var(--sky-override-tabset-icon-button-padding, var(--sky-comp-tabset-button-space-inset-top) var(--sky-comp-tabset-button-space-inset-right) var(--sky-comp-tabset-button-space-inset-bottom) var(--sky-comp-tabset-button-space-inset-left))}.sky-tabset-dropdown{order:0;max-width:100%}.sky-tabset.sky-tabset-mode-dropdown{overflow:hidden}.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;display:var(--sky-override-tab-heading-display, flex);align-items:baseline;justify-content:space-between}.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"] }]
|
|
2508
2509
|
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: SkyTabsetAdapterService }, { type: SkyTabsetPermalinkService }, { type: SkyTabsetService }], propDecorators: { active: [{
|
|
2509
2510
|
type: Input
|
|
2510
2511
|
}], ariaLabel: [{
|
|
@@ -2535,8 +2536,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
|
|
|
2535
2536
|
}] } });
|
|
2536
2537
|
|
|
2537
2538
|
class SkyTabsModule {
|
|
2538
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
2539
|
-
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "
|
|
2539
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: SkyTabsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
2540
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.0.1", ngImport: i0, type: SkyTabsModule, declarations: [SkyTabButtonComponent,
|
|
2540
2541
|
SkyTabComponent,
|
|
2541
2542
|
SkyTabsetComponent,
|
|
2542
2543
|
SkyTabsetNavButtonComponent,
|
|
@@ -2547,14 +2548,14 @@ class SkyTabsModule {
|
|
|
2547
2548
|
SkyIdModule,
|
|
2548
2549
|
SkyTabsResourcesModule,
|
|
2549
2550
|
SkyThemeModule], exports: [SkyTabComponent, SkyTabsetComponent, SkyTabsetNavButtonComponent] }); }
|
|
2550
|
-
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "
|
|
2551
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: SkyTabsModule, imports: [CommonModule,
|
|
2551
2552
|
SkyDropdownModule,
|
|
2552
2553
|
SkyIconModule,
|
|
2553
2554
|
SkyIdModule,
|
|
2554
2555
|
SkyTabsResourcesModule,
|
|
2555
2556
|
SkyThemeModule] }); }
|
|
2556
2557
|
}
|
|
2557
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
2558
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: SkyTabsModule, decorators: [{
|
|
2558
2559
|
type: NgModule,
|
|
2559
2560
|
args: [{
|
|
2560
2561
|
declarations: [
|