@skyux/tabs 15.0.0-alpha.0 → 15.0.0-alpha.2
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
CHANGED
|
@@ -1,22 +1,22 @@
|
|
|
1
|
-
import * as
|
|
1
|
+
import * as i1 from '@angular/common';
|
|
2
2
|
import { CommonModule, Location } from '@angular/common';
|
|
3
3
|
import * as i0 from '@angular/core';
|
|
4
|
-
import { NgModule, Injectable, inject, DOCUMENT, ViewChild, Input,
|
|
4
|
+
import { NgModule, Injectable, inject, DOCUMENT, ChangeDetectorRef, ViewChild, Input, ChangeDetectionStrategy, Component, ContentChildren, EventEmitter, Output, input, signal, computed, afterNextRender, ElementRef, ViewEncapsulation, HostBinding, Pipe } from '@angular/core';
|
|
5
5
|
import { SkyCheckboxModule } from '@skyux/forms';
|
|
6
|
-
import * as
|
|
6
|
+
import * as i4$1 from '@skyux/theme';
|
|
7
7
|
import { SkyThemeModule } from '@skyux/theme';
|
|
8
8
|
import * as i3 from '@skyux/core';
|
|
9
|
-
import { SkyMediaQueryService, SkyIdService, SkyIdModule, SkyResponsiveHostDirective, _SkyAnimationSlideComponent, _SkyTransitionEndHandlerDirective, SkyLayoutHostService } from '@skyux/core';
|
|
10
|
-
import * as
|
|
9
|
+
import { SkyMediaQueryService, SkyIdService, SkyIdModule, SkyResponsiveHostDirective, _SkyAnimationSlideComponent, _SkyTransitionEndHandlerDirective, SkyLogService, SkyLayoutHostService } from '@skyux/core';
|
|
10
|
+
import * as i2 from '@skyux/icon';
|
|
11
11
|
import { SkyIconModule } from '@skyux/icon';
|
|
12
|
-
import * as
|
|
12
|
+
import * as i4 from '@skyux/indicators';
|
|
13
13
|
import { SkyExpansionIndicatorModule, SkyStatusIndicatorModule } from '@skyux/indicators';
|
|
14
|
-
import * as
|
|
14
|
+
import * as i5 from '@skyux/i18n';
|
|
15
15
|
import { SkyLibResourcesService, SkyI18nModule } from '@skyux/i18n';
|
|
16
|
-
import {
|
|
16
|
+
import { BehaviorSubject, Subject, ReplaySubject, combineLatest, race } from 'rxjs';
|
|
17
17
|
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
|
|
18
18
|
import { takeUntil, take, distinctUntilChanged } from 'rxjs/operators';
|
|
19
|
-
import * as
|
|
19
|
+
import * as i2$1 from '@skyux/popovers';
|
|
20
20
|
import { SkyDropdownModule } from '@skyux/popovers';
|
|
21
21
|
import { ActivatedRoute, Router } from '@angular/router';
|
|
22
22
|
|
|
@@ -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: "22.0.
|
|
72
|
-
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.0.
|
|
73
|
-
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.0.
|
|
71
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SkyTabsResourcesModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
72
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.0.6", ngImport: i0, type: SkyTabsResourcesModule, exports: [SkyI18nModule] }); }
|
|
73
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SkyTabsResourcesModule, imports: [SkyI18nModule] }); }
|
|
74
74
|
}
|
|
75
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.
|
|
75
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SkyTabsResourcesModule, decorators: [{
|
|
76
76
|
type: NgModule,
|
|
77
77
|
args: [{
|
|
78
78
|
exports: [SkyI18nModule],
|
|
@@ -80,18 +80,51 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImpor
|
|
|
80
80
|
}] });
|
|
81
81
|
|
|
82
82
|
/**
|
|
83
|
+
* Tracks the element IDs for all tabs within a tablist.
|
|
83
84
|
* @internal
|
|
84
85
|
*/
|
|
85
|
-
class
|
|
86
|
+
class SkyTabIdService {
|
|
87
|
+
get ids() {
|
|
88
|
+
return this.#idsObs;
|
|
89
|
+
}
|
|
90
|
+
#ids;
|
|
91
|
+
#ids$;
|
|
92
|
+
#idsObs;
|
|
86
93
|
constructor() {
|
|
87
|
-
this
|
|
94
|
+
this.#ids = new Map();
|
|
95
|
+
this.#ids$ = new BehaviorSubject([]);
|
|
96
|
+
this.#idsObs = this.#ids$.asObservable();
|
|
97
|
+
}
|
|
98
|
+
/**
|
|
99
|
+
* Associates a tab's ID with its parent tablist.
|
|
100
|
+
* @param {string} id A unique ID for the tab's registration.
|
|
101
|
+
* @param {string} elementId The ID applied to the tab's element.
|
|
102
|
+
*/
|
|
103
|
+
register(id, elementId) {
|
|
104
|
+
if (!this.#ids.has(id) || this.#ids.get(id) !== elementId) {
|
|
105
|
+
this.#ids.set(id, elementId);
|
|
106
|
+
this.#emitIds();
|
|
107
|
+
}
|
|
88
108
|
}
|
|
89
|
-
|
|
90
|
-
|
|
109
|
+
/**
|
|
110
|
+
* Disassociates a tab's ID with its parent tablist.
|
|
111
|
+
* @param {string} id The ID used to register the tab.
|
|
112
|
+
*/
|
|
113
|
+
unregister(id) {
|
|
114
|
+
if (this.#ids.has(id)) {
|
|
115
|
+
this.#ids.delete(id);
|
|
116
|
+
this.#emitIds();
|
|
117
|
+
}
|
|
118
|
+
}
|
|
119
|
+
#emitIds() {
|
|
120
|
+
this.#ids$.next(Array.from(this.#ids.values()));
|
|
121
|
+
}
|
|
122
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SkyTabIdService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
123
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SkyTabIdService }); }
|
|
91
124
|
}
|
|
92
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.
|
|
125
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SkyTabIdService, decorators: [{
|
|
93
126
|
type: Injectable
|
|
94
|
-
}] });
|
|
127
|
+
}], ctorParameters: () => [] });
|
|
95
128
|
|
|
96
129
|
const VERTICAL_TABSET_BUTTON_SELECTOR = '.sky-vertical-tabset-button';
|
|
97
130
|
const VERTICAL_TABSET_BUTTON_DISABLED_SELECTOR = `${VERTICAL_TABSET_BUTTON_SELECTOR}-disabled`;
|
|
@@ -150,10 +183,24 @@ class SkyVerticalTabsetAdapterService {
|
|
|
150
183
|
#elHasFocus(el) {
|
|
151
184
|
return !!el && el === this.#document.activeElement;
|
|
152
185
|
}
|
|
153
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.
|
|
154
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.
|
|
186
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SkyVerticalTabsetAdapterService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
187
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SkyVerticalTabsetAdapterService }); }
|
|
155
188
|
}
|
|
156
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.
|
|
189
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SkyVerticalTabsetAdapterService, decorators: [{
|
|
190
|
+
type: Injectable
|
|
191
|
+
}] });
|
|
192
|
+
|
|
193
|
+
/**
|
|
194
|
+
* @internal
|
|
195
|
+
*/
|
|
196
|
+
class SkyVerticalTabsetGroupService {
|
|
197
|
+
constructor() {
|
|
198
|
+
this.messageStream = new Subject();
|
|
199
|
+
}
|
|
200
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SkyVerticalTabsetGroupService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
201
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SkyVerticalTabsetGroupService }); }
|
|
202
|
+
}
|
|
203
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SkyVerticalTabsetGroupService, decorators: [{
|
|
157
204
|
type: Injectable
|
|
158
205
|
}] });
|
|
159
206
|
|
|
@@ -338,57 +385,10 @@ class SkyVerticalTabsetService {
|
|
|
338
385
|
}
|
|
339
386
|
this.indexChanged.next(this.activeIndex);
|
|
340
387
|
}
|
|
341
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.
|
|
342
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.
|
|
388
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SkyVerticalTabsetService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
389
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SkyVerticalTabsetService }); }
|
|
343
390
|
}
|
|
344
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.
|
|
345
|
-
type: Injectable
|
|
346
|
-
}], ctorParameters: () => [] });
|
|
347
|
-
|
|
348
|
-
/**
|
|
349
|
-
* Tracks the element IDs for all tabs within a tablist.
|
|
350
|
-
* @internal
|
|
351
|
-
*/
|
|
352
|
-
class SkyTabIdService {
|
|
353
|
-
get ids() {
|
|
354
|
-
return this.#idsObs;
|
|
355
|
-
}
|
|
356
|
-
#ids;
|
|
357
|
-
#ids$;
|
|
358
|
-
#idsObs;
|
|
359
|
-
constructor() {
|
|
360
|
-
this.#ids = new Map();
|
|
361
|
-
this.#ids$ = new BehaviorSubject([]);
|
|
362
|
-
this.#idsObs = this.#ids$.asObservable();
|
|
363
|
-
}
|
|
364
|
-
/**
|
|
365
|
-
* Associates a tab's ID with its parent tablist.
|
|
366
|
-
* @param {string} id A unique ID for the tab's registration.
|
|
367
|
-
* @param {string} elementId The ID applied to the tab's element.
|
|
368
|
-
*/
|
|
369
|
-
register(id, elementId) {
|
|
370
|
-
if (!this.#ids.has(id) || this.#ids.get(id) !== elementId) {
|
|
371
|
-
this.#ids.set(id, elementId);
|
|
372
|
-
this.#emitIds();
|
|
373
|
-
}
|
|
374
|
-
}
|
|
375
|
-
/**
|
|
376
|
-
* Disassociates a tab's ID with its parent tablist.
|
|
377
|
-
* @param {string} id The ID used to register the tab.
|
|
378
|
-
*/
|
|
379
|
-
unregister(id) {
|
|
380
|
-
if (this.#ids.has(id)) {
|
|
381
|
-
this.#ids.delete(id);
|
|
382
|
-
this.#emitIds();
|
|
383
|
-
}
|
|
384
|
-
}
|
|
385
|
-
#emitIds() {
|
|
386
|
-
this.#ids$.next(Array.from(this.#ids.values()));
|
|
387
|
-
}
|
|
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
|
-
}
|
|
391
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: SkyTabIdService, decorators: [{
|
|
391
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SkyVerticalTabsetService, decorators: [{
|
|
392
392
|
type: Injectable
|
|
393
393
|
}], ctorParameters: () => [] });
|
|
394
394
|
|
|
@@ -463,7 +463,7 @@ class SkyVerticalTabComponent {
|
|
|
463
463
|
#changeRef;
|
|
464
464
|
#tabsetService;
|
|
465
465
|
#tabIdSvc;
|
|
466
|
-
constructor(
|
|
466
|
+
constructor() {
|
|
467
467
|
this.#_active = false;
|
|
468
468
|
/**
|
|
469
469
|
* Whether to disable the tab.
|
|
@@ -487,10 +487,10 @@ class SkyVerticalTabComponent {
|
|
|
487
487
|
this.#_contentRendered = false;
|
|
488
488
|
this.#mobileSubscription = new Subject();
|
|
489
489
|
this.#ngUnsubscribe = new Subject();
|
|
490
|
-
this.#adapterService =
|
|
491
|
-
this.#changeRef =
|
|
492
|
-
this.#tabsetService =
|
|
493
|
-
this.#tabIdSvc =
|
|
490
|
+
this.#adapterService = inject(SkyVerticalTabsetAdapterService);
|
|
491
|
+
this.#changeRef = inject(ChangeDetectorRef);
|
|
492
|
+
this.#tabsetService = inject(SkyVerticalTabsetService);
|
|
493
|
+
this.#tabIdSvc = inject(SkyTabIdService, { optional: true });
|
|
494
494
|
this.#tabIdOrDefault = this.#defaultTabId = `sky-vertical-tab-${++nextId$2}`;
|
|
495
495
|
this.tabId = this.#defaultTabId;
|
|
496
496
|
}
|
|
@@ -535,15 +535,13 @@ class SkyVerticalTabComponent {
|
|
|
535
535
|
tabDeactivated() {
|
|
536
536
|
this.#changeRef.markForCheck();
|
|
537
537
|
}
|
|
538
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.
|
|
539
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.
|
|
538
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SkyVerticalTabComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
539
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", 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: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i2.λ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: i4.λ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: "22.0.
|
|
541
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", 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
|
-
}], ctorParameters: () => [
|
|
545
|
-
type: Optional
|
|
546
|
-
}] }], propDecorators: { active: [{
|
|
544
|
+
}], ctorParameters: () => [], propDecorators: { active: [{
|
|
547
545
|
type: Input
|
|
548
546
|
}], ariaControls: [{
|
|
549
547
|
type: Input
|
|
@@ -603,16 +601,16 @@ class SkyVerticalTabsetGroupComponent {
|
|
|
603
601
|
#groupService;
|
|
604
602
|
#_disabled;
|
|
605
603
|
#_open;
|
|
606
|
-
constructor(
|
|
604
|
+
constructor() {
|
|
607
605
|
this.slideDirection = 'up';
|
|
608
606
|
this.#ngUnsubscribe = new Subject();
|
|
607
|
+
this.#tabService = inject(SkyVerticalTabsetService);
|
|
608
|
+
this.#changeRef = inject(ChangeDetectorRef);
|
|
609
609
|
this.#adapterService = inject(SkyVerticalTabsetAdapterService);
|
|
610
610
|
this.#idService = inject(SkyIdService);
|
|
611
611
|
this.#tabIdService = inject(SkyTabIdService);
|
|
612
612
|
this.#groupService = inject(SkyVerticalTabsetGroupService);
|
|
613
613
|
this.#_open = false;
|
|
614
|
-
this.#tabService = tabService;
|
|
615
|
-
this.#changeRef = changeRef;
|
|
616
614
|
this.groupId = this.#idService.generateId();
|
|
617
615
|
this.#groupService.messageStream.subscribe((message) => {
|
|
618
616
|
switch (message.messageType) {
|
|
@@ -682,13 +680,13 @@ class SkyVerticalTabsetGroupComponent {
|
|
|
682
680
|
#focusButton() {
|
|
683
681
|
this.#adapterService.focusButton(this.groupHeadingButton);
|
|
684
682
|
}
|
|
685
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.
|
|
686
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.
|
|
683
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SkyVerticalTabsetGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
684
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.6", 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: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.λ2, selector: "[skyId]", exportAs: ["skyId"] }, { kind: "component", type: i4.λ15, selector: "sky-expansion-indicator", inputs: ["direction"] }, { kind: "component", type: i3._SkyAnimationSlideComponent, selector: "sky-animation-slide", inputs: ["opened"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
687
685
|
}
|
|
688
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.
|
|
686
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SkyVerticalTabsetGroupComponent, decorators: [{
|
|
689
687
|
type: Component,
|
|
690
688
|
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
|
-
}], ctorParameters: () => [
|
|
689
|
+
}], ctorParameters: () => [], propDecorators: { disabled: [{
|
|
692
690
|
type: Input
|
|
693
691
|
}], groupHeading: [{
|
|
694
692
|
type: Input
|
|
@@ -703,6 +701,28 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImpor
|
|
|
703
701
|
}] } });
|
|
704
702
|
|
|
705
703
|
class SkyVerticalTabsetComponent {
|
|
704
|
+
constructor() {
|
|
705
|
+
/**
|
|
706
|
+
* Whether the vertical tabset loads tab content during initialization so that it
|
|
707
|
+
* displays content without moving around elements in the content container.
|
|
708
|
+
* @default false
|
|
709
|
+
*/
|
|
710
|
+
this.maintainTabContent = false;
|
|
711
|
+
/**
|
|
712
|
+
* Fires when the active tab changes. Emits the index of the active tab. The
|
|
713
|
+
* index is based on the tab's position when it loads.
|
|
714
|
+
*/
|
|
715
|
+
this.activeChange = new EventEmitter();
|
|
716
|
+
this.isMobile = false;
|
|
717
|
+
this.tablistHasFocus = false;
|
|
718
|
+
this.#ngUnsubscribe = new Subject();
|
|
719
|
+
this.#_ariaRole = 'tablist';
|
|
720
|
+
this.#resources = inject(SkyLibResourcesService);
|
|
721
|
+
this.#changeRef = inject(ChangeDetectorRef);
|
|
722
|
+
this.adapterService = inject(SkyVerticalTabsetAdapterService);
|
|
723
|
+
this.tabService = inject(SkyVerticalTabsetService);
|
|
724
|
+
this.tabIdSvc = inject(SkyTabIdService);
|
|
725
|
+
}
|
|
706
726
|
/**
|
|
707
727
|
* The ARIA role for the vertical tabset
|
|
708
728
|
* [to support accessibility](https://developer.blackbaud.com/skyux/learn/accessibility)
|
|
@@ -723,28 +743,6 @@ class SkyVerticalTabsetComponent {
|
|
|
723
743
|
#_ariaRole;
|
|
724
744
|
#resources;
|
|
725
745
|
#changeRef;
|
|
726
|
-
constructor(adapterService, tabService, resources, changeRef, tabIdSvc) {
|
|
727
|
-
this.adapterService = adapterService;
|
|
728
|
-
this.tabService = tabService;
|
|
729
|
-
this.tabIdSvc = tabIdSvc;
|
|
730
|
-
/**
|
|
731
|
-
* Whether the vertical tabset loads tab content during initialization so that it
|
|
732
|
-
* displays content without moving around elements in the content container.
|
|
733
|
-
* @default false
|
|
734
|
-
*/
|
|
735
|
-
this.maintainTabContent = false;
|
|
736
|
-
/**
|
|
737
|
-
* Fires when the active tab changes. Emits the index of the active tab. The
|
|
738
|
-
* index is based on the tab's position when it loads.
|
|
739
|
-
*/
|
|
740
|
-
this.activeChange = new EventEmitter();
|
|
741
|
-
this.isMobile = false;
|
|
742
|
-
this.tablistHasFocus = false;
|
|
743
|
-
this.#ngUnsubscribe = new Subject();
|
|
744
|
-
this.#_ariaRole = 'tablist';
|
|
745
|
-
this.#resources = resources;
|
|
746
|
-
this.#changeRef = changeRef;
|
|
747
|
-
}
|
|
748
746
|
ngOnInit() {
|
|
749
747
|
this.tabService.maintainTabContent = this.maintainTabContent;
|
|
750
748
|
this.tabService.indexChanged
|
|
@@ -806,13 +804,13 @@ class SkyVerticalTabsetComponent {
|
|
|
806
804
|
tabGroupsArrowUp() {
|
|
807
805
|
this.adapterService.focusPreviousButton(this.tabGroups);
|
|
808
806
|
}
|
|
809
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.
|
|
810
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.
|
|
807
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SkyVerticalTabsetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
808
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", 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: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i2.λ1, selector: "sky-icon", inputs: ["iconName", "variant", "iconSize"] }, { kind: "directive", type: i3._SkyTransitionEndHandlerDirective, selector: "[skyTransitionEndHandler]", inputs: ["transitionTrigger", "transitionPropertyToTrack"], outputs: ["transitionEnd"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
811
809
|
}
|
|
812
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.
|
|
810
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SkyVerticalTabsetComponent, decorators: [{
|
|
813
811
|
type: Component,
|
|
814
812
|
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
|
-
}],
|
|
813
|
+
}], propDecorators: { showTabsText: [{
|
|
816
814
|
type: Input
|
|
817
815
|
}], ariaLabel: [{
|
|
818
816
|
type: Input
|
|
@@ -836,8 +834,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImpor
|
|
|
836
834
|
}] } });
|
|
837
835
|
|
|
838
836
|
class SkyVerticalTabsetModule {
|
|
839
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.
|
|
840
|
-
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.0.
|
|
837
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SkyVerticalTabsetModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
838
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.0.6", ngImport: i0, type: SkyVerticalTabsetModule, declarations: [SkyVerticalTabsetComponent,
|
|
841
839
|
SkyVerticalTabsetGroupComponent,
|
|
842
840
|
SkyVerticalTabComponent], imports: [CommonModule,
|
|
843
841
|
SkyIconModule,
|
|
@@ -851,7 +849,7 @@ class SkyVerticalTabsetModule {
|
|
|
851
849
|
_SkyTransitionEndHandlerDirective], exports: [SkyVerticalTabsetComponent,
|
|
852
850
|
SkyVerticalTabsetGroupComponent,
|
|
853
851
|
SkyVerticalTabComponent] }); }
|
|
854
|
-
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.0.
|
|
852
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SkyVerticalTabsetModule, providers: [SkyVerticalTabsetAdapterService], imports: [CommonModule,
|
|
855
853
|
SkyIconModule,
|
|
856
854
|
SkyIdModule,
|
|
857
855
|
SkyExpansionIndicatorModule,
|
|
@@ -860,7 +858,7 @@ class SkyVerticalTabsetModule {
|
|
|
860
858
|
SkyThemeModule,
|
|
861
859
|
_SkyAnimationSlideComponent] }); }
|
|
862
860
|
}
|
|
863
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.
|
|
861
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SkyVerticalTabsetModule, decorators: [{
|
|
864
862
|
type: NgModule,
|
|
865
863
|
args: [{
|
|
866
864
|
declarations: [
|
|
@@ -914,10 +912,10 @@ class SkySectionedFormService {
|
|
|
914
912
|
requiredFieldChanged(isRequired) {
|
|
915
913
|
this.requiredChange.next(isRequired);
|
|
916
914
|
}
|
|
917
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.
|
|
918
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.
|
|
915
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SkySectionedFormService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
916
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SkySectionedFormService }); }
|
|
919
917
|
}
|
|
920
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.
|
|
918
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SkySectionedFormService, decorators: [{
|
|
921
919
|
type: Injectable
|
|
922
920
|
}] });
|
|
923
921
|
|
|
@@ -926,11 +924,7 @@ let nextId$1 = 0;
|
|
|
926
924
|
* Creates an individual form to display as a section within the sectioned form.
|
|
927
925
|
*/
|
|
928
926
|
class SkySectionedFormSectionComponent {
|
|
929
|
-
|
|
930
|
-
#sectionedFormService;
|
|
931
|
-
#tabsetService;
|
|
932
|
-
#changeRef;
|
|
933
|
-
constructor(sectionedFormService, tabsetService, changeRef) {
|
|
927
|
+
constructor() {
|
|
934
928
|
this.sectionTabId = `sky-sectioned-form-tab-${++nextId$1}`;
|
|
935
929
|
this.sectionContentId = `sky-sectioned-form-section-${++nextId$1}`;
|
|
936
930
|
/**
|
|
@@ -939,10 +933,14 @@ class SkySectionedFormSectionComponent {
|
|
|
939
933
|
*/
|
|
940
934
|
this.active = false;
|
|
941
935
|
this.#ngUnsubscribe = new Subject();
|
|
942
|
-
this.#sectionedFormService =
|
|
943
|
-
this.#tabsetService =
|
|
944
|
-
this.#changeRef =
|
|
936
|
+
this.#sectionedFormService = inject(SkySectionedFormService);
|
|
937
|
+
this.#tabsetService = inject(SkyVerticalTabsetService);
|
|
938
|
+
this.#changeRef = inject(ChangeDetectorRef);
|
|
945
939
|
}
|
|
940
|
+
#ngUnsubscribe;
|
|
941
|
+
#sectionedFormService;
|
|
942
|
+
#tabsetService;
|
|
943
|
+
#changeRef;
|
|
946
944
|
ngOnInit() {
|
|
947
945
|
this.#changeRef.detectChanges();
|
|
948
946
|
this.#tabsetService.switchingMobile.subscribe((mobile) => {
|
|
@@ -959,13 +957,13 @@ class SkySectionedFormSectionComponent {
|
|
|
959
957
|
this.#ngUnsubscribe.next();
|
|
960
958
|
this.#ngUnsubscribe.complete();
|
|
961
959
|
}
|
|
962
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.
|
|
963
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.
|
|
960
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SkySectionedFormSectionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
961
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.6", 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
962
|
}
|
|
965
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.
|
|
963
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SkySectionedFormSectionComponent, decorators: [{
|
|
966
964
|
type: Component,
|
|
967
965
|
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
|
-
}],
|
|
966
|
+
}], propDecorators: { heading: [{
|
|
969
967
|
type: Input
|
|
970
968
|
}], itemCount: [{
|
|
971
969
|
type: Input
|
|
@@ -981,6 +979,11 @@ var SkySectionedFormMessageType;
|
|
|
981
979
|
SkySectionedFormMessageType[SkySectionedFormMessageType["ShowTabs"] = 1] = "ShowTabs";
|
|
982
980
|
})(SkySectionedFormMessageType || (SkySectionedFormMessageType = {}));
|
|
983
981
|
|
|
982
|
+
/**
|
|
983
|
+
* The default width of the tabs pane. Also serves as the maximum width of the
|
|
984
|
+
* pane for any `tabWidth` value.
|
|
985
|
+
*/
|
|
986
|
+
const DEFAULT_TAB_WIDTH = '30%';
|
|
984
987
|
/**
|
|
985
988
|
* Creates a container for the sectioned forms.
|
|
986
989
|
*/
|
|
@@ -998,14 +1001,20 @@ class SkySectionedFormComponent {
|
|
|
998
1001
|
#tabIdSvc;
|
|
999
1002
|
#logger;
|
|
1000
1003
|
#_messageStream;
|
|
1001
|
-
constructor(
|
|
1002
|
-
this.tabService = tabService;
|
|
1004
|
+
constructor() {
|
|
1003
1005
|
/**
|
|
1004
1006
|
* Whether the sectioned form loads section content during initialization so that it
|
|
1005
1007
|
* displays content without moving around elements in the content container.
|
|
1006
1008
|
* @default false
|
|
1007
1009
|
*/
|
|
1008
1010
|
this.maintainSectionContent = false;
|
|
1011
|
+
/**
|
|
1012
|
+
* The width of the tabs pane as a CSS width value (such as `200px`, `15rem`,
|
|
1013
|
+
* or `20%`). Set to `"auto"` to size based on tab label content. Maximum
|
|
1014
|
+
* width is 30%.
|
|
1015
|
+
* @default "30%"
|
|
1016
|
+
*/
|
|
1017
|
+
this.tabWidth = input(DEFAULT_TAB_WIDTH, { ...(ngDevMode ? { debugName: "tabWidth" } : /* istanbul ignore next */ {}), transform: (value) => value?.trim() || DEFAULT_TAB_WIDTH });
|
|
1009
1018
|
/**
|
|
1010
1019
|
* Fires when the active tab changes and emits the index of the active
|
|
1011
1020
|
* section. The index is based on the section's position when the form loads.
|
|
@@ -1017,12 +1026,19 @@ class SkySectionedFormComponent {
|
|
|
1017
1026
|
this.tabsVisibleChanged = new EventEmitter();
|
|
1018
1027
|
this.ariaRole = 'tablist';
|
|
1019
1028
|
this.#ngUnsubscribe = new Subject();
|
|
1029
|
+
this.#changeRef = inject(ChangeDetectorRef);
|
|
1030
|
+
this.#tabIdSvc = inject(SkyTabIdService);
|
|
1031
|
+
this.#logger = inject(SkyLogService);
|
|
1020
1032
|
this.#_messageStream = new Subject();
|
|
1021
1033
|
this.animationEnabled = signal(false, /* @ts-ignore */
|
|
1022
1034
|
...(ngDevMode ? [{ debugName: "animationEnabled" }] : /* istanbul ignore next */ []));
|
|
1023
|
-
this
|
|
1024
|
-
|
|
1025
|
-
this
|
|
1035
|
+
this.isMobile = signal(false, /* @ts-ignore */
|
|
1036
|
+
...(ngDevMode ? [{ debugName: "isMobile" }] : /* istanbul ignore next */ []));
|
|
1037
|
+
this.tabService = inject(SkyVerticalTabsetService);
|
|
1038
|
+
this.tabsFlexBasis = computed(() => this.isMobile() ? undefined : this.tabWidth(), /* @ts-ignore */
|
|
1039
|
+
...(ngDevMode ? [{ debugName: "tabsFlexBasis" }] : /* istanbul ignore next */ []));
|
|
1040
|
+
this.tabsMaxWidth = computed(() => this.isMobile() ? undefined : DEFAULT_TAB_WIDTH, /* @ts-ignore */
|
|
1041
|
+
...(ngDevMode ? [{ debugName: "tabsMaxWidth" }] : /* istanbul ignore next */ []));
|
|
1026
1042
|
// Enable animations after the first render.
|
|
1027
1043
|
afterNextRender(() => {
|
|
1028
1044
|
this.animationEnabled.set(true);
|
|
@@ -1050,6 +1066,7 @@ class SkySectionedFormComponent {
|
|
|
1050
1066
|
else {
|
|
1051
1067
|
this.ariaRole = undefined;
|
|
1052
1068
|
}
|
|
1069
|
+
this.isMobile.set(mobile);
|
|
1053
1070
|
this.#changeRef.markForCheck();
|
|
1054
1071
|
});
|
|
1055
1072
|
this.tabService.hidingTabs
|
|
@@ -1064,6 +1081,7 @@ class SkySectionedFormComponent {
|
|
|
1064
1081
|
});
|
|
1065
1082
|
if (this.tabService.isMobile()) {
|
|
1066
1083
|
this.ariaRole = undefined;
|
|
1084
|
+
this.isMobile.set(true);
|
|
1067
1085
|
this.#changeRef.markForCheck();
|
|
1068
1086
|
}
|
|
1069
1087
|
}
|
|
@@ -1117,15 +1135,15 @@ class SkySectionedFormComponent {
|
|
|
1117
1135
|
}
|
|
1118
1136
|
});
|
|
1119
1137
|
}
|
|
1120
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.
|
|
1121
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.
|
|
1138
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SkySectionedFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1139
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: SkySectionedFormComponent, isStandalone: false, selector: "sky-sectioned-form", inputs: { maintainSectionContent: { classPropertyName: "maintainSectionContent", publicName: "maintainSectionContent", isSignal: false, isRequired: false, transformFunction: null }, tabWidth: { classPropertyName: "tabWidth", publicName: "tabWidth", isSignal: true, isRequired: false, transformFunction: null }, messageStream: { classPropertyName: "messageStream", publicName: "messageStream", isSignal: false, isRequired: false, transformFunction: null } }, 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 [style.flex-basis]=\"tabsFlexBasis()\"\n [style.max-width]=\"tabsMaxWidth()\"\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:1 1 auto;overflow-y:auto}:host .sky-sectioned-form-tabs{flex-grow:0;flex-shrink:0;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:1 1 auto;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-grow:0;flex-shrink:0;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: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1122
1140
|
}
|
|
1123
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.
|
|
1141
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SkySectionedFormComponent, decorators: [{
|
|
1124
1142
|
type: Component,
|
|
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
|
|
1126
|
-
}], ctorParameters: () => [
|
|
1143
|
+
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 [style.flex-basis]=\"tabsFlexBasis()\"\n [style.max-width]=\"tabsMaxWidth()\"\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:1 1 auto;overflow-y:auto}:host .sky-sectioned-form-tabs{flex-grow:0;flex-shrink:0;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:1 1 auto;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-grow:0;flex-shrink:0;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"] }]
|
|
1144
|
+
}], ctorParameters: () => [], propDecorators: { maintainSectionContent: [{
|
|
1127
1145
|
type: Input
|
|
1128
|
-
}], messageStream: [{
|
|
1146
|
+
}], tabWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "tabWidth", required: false }] }], messageStream: [{
|
|
1129
1147
|
type: Input
|
|
1130
1148
|
}], indexChanged: [{
|
|
1131
1149
|
type: Output
|
|
@@ -1137,17 +1155,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImpor
|
|
|
1137
1155
|
}] } });
|
|
1138
1156
|
|
|
1139
1157
|
class SkySectionedFormModule {
|
|
1140
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.
|
|
1141
|
-
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.0.
|
|
1158
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SkySectionedFormModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
1159
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.0.6", ngImport: i0, type: SkySectionedFormModule, declarations: [SkySectionedFormComponent, SkySectionedFormSectionComponent], imports: [CommonModule,
|
|
1142
1160
|
SkyCheckboxModule,
|
|
1143
1161
|
SkyThemeModule,
|
|
1144
1162
|
SkyVerticalTabsetModule], exports: [SkySectionedFormComponent, SkySectionedFormSectionComponent] }); }
|
|
1145
|
-
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.0.
|
|
1163
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SkySectionedFormModule, imports: [CommonModule,
|
|
1146
1164
|
SkyCheckboxModule,
|
|
1147
1165
|
SkyThemeModule,
|
|
1148
1166
|
SkyVerticalTabsetModule] }); }
|
|
1149
1167
|
}
|
|
1150
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.
|
|
1168
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SkySectionedFormModule, decorators: [{
|
|
1151
1169
|
type: NgModule,
|
|
1152
1170
|
args: [{
|
|
1153
1171
|
declarations: [SkySectionedFormComponent, SkySectionedFormSectionComponent],
|
|
@@ -1168,10 +1186,10 @@ class SkyTabButtonAdapterService {
|
|
|
1168
1186
|
focusButtonLink(buttonEl) {
|
|
1169
1187
|
buttonEl.nativeElement.querySelector('a').focus();
|
|
1170
1188
|
}
|
|
1171
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.
|
|
1172
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.
|
|
1189
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SkyTabButtonAdapterService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
1190
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SkyTabButtonAdapterService }); }
|
|
1173
1191
|
}
|
|
1174
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.
|
|
1192
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SkyTabButtonAdapterService, decorators: [{
|
|
1175
1193
|
type: Injectable
|
|
1176
1194
|
}] });
|
|
1177
1195
|
|
|
@@ -1358,10 +1376,10 @@ class SkyTabsetService {
|
|
|
1358
1376
|
}
|
|
1359
1377
|
return prevIndex;
|
|
1360
1378
|
}
|
|
1361
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.
|
|
1362
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.
|
|
1379
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SkyTabsetService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
1380
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SkyTabsetService }); }
|
|
1363
1381
|
}
|
|
1364
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.
|
|
1382
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SkyTabsetService, decorators: [{
|
|
1365
1383
|
type: Injectable
|
|
1366
1384
|
}], ctorParameters: () => [] });
|
|
1367
1385
|
|
|
@@ -1370,6 +1388,18 @@ const DEFAULT_DISABLED = false;
|
|
|
1370
1388
|
* @internal
|
|
1371
1389
|
*/
|
|
1372
1390
|
class SkyTabButtonComponent {
|
|
1391
|
+
constructor() {
|
|
1392
|
+
this.buttonClick = new EventEmitter();
|
|
1393
|
+
this.closeClick = new EventEmitter();
|
|
1394
|
+
this.closeBtnTabIndex = '-1';
|
|
1395
|
+
this.#_isActive = false;
|
|
1396
|
+
this.#_isDisabled = DEFAULT_DISABLED;
|
|
1397
|
+
this.#adapterService = inject(SkyTabButtonAdapterService);
|
|
1398
|
+
this.#changeDetectorRef = inject(ChangeDetectorRef);
|
|
1399
|
+
this.#elementRef = inject(ElementRef);
|
|
1400
|
+
this.#tabsetService = inject(SkyTabsetService);
|
|
1401
|
+
this.#ngUnsubscribe = new Subject();
|
|
1402
|
+
}
|
|
1373
1403
|
get active() {
|
|
1374
1404
|
return this.#_isActive;
|
|
1375
1405
|
}
|
|
@@ -1391,18 +1421,6 @@ class SkyTabButtonComponent {
|
|
|
1391
1421
|
this.#_tabStyle = style;
|
|
1392
1422
|
this.#updateWizardStepState();
|
|
1393
1423
|
}
|
|
1394
|
-
constructor(elementRef, adapterService, changeDetectorRef, tabsetService) {
|
|
1395
|
-
this.buttonClick = new EventEmitter();
|
|
1396
|
-
this.closeClick = new EventEmitter();
|
|
1397
|
-
this.closeBtnTabIndex = '-1';
|
|
1398
|
-
this.#_isActive = false;
|
|
1399
|
-
this.#_isDisabled = DEFAULT_DISABLED;
|
|
1400
|
-
this.#ngUnsubscribe = new Subject();
|
|
1401
|
-
this.#adapterService = adapterService;
|
|
1402
|
-
this.#changeDetectorRef = changeDetectorRef;
|
|
1403
|
-
this.#elementRef = elementRef;
|
|
1404
|
-
this.#tabsetService = tabsetService;
|
|
1405
|
-
}
|
|
1406
1424
|
#_isActive;
|
|
1407
1425
|
#_isDisabled;
|
|
1408
1426
|
#_tabStyle;
|
|
@@ -1481,13 +1499,13 @@ class SkyTabButtonComponent {
|
|
|
1481
1499
|
}
|
|
1482
1500
|
this.#changeDetectorRef.markForCheck();
|
|
1483
1501
|
}
|
|
1484
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.
|
|
1485
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.
|
|
1502
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SkyTabButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1503
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", 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: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i2.λ1, selector: "sky-icon", inputs: ["iconName", "variant", "iconSize"] }, { kind: "directive", type: i3.λ2, selector: "[skyId]", exportAs: ["skyId"] }, { kind: "directive", type: i4$1.λ2, selector: "[skyThemeClass]", inputs: ["class", "skyThemeClass"] }, { kind: "pipe", type: i5.SkyLibResourcesPipe, name: "skyLibResources" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
1486
1504
|
}
|
|
1487
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.
|
|
1505
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SkyTabButtonComponent, decorators: [{
|
|
1488
1506
|
type: Component,
|
|
1489
1507
|
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"] }]
|
|
1490
|
-
}],
|
|
1508
|
+
}], propDecorators: { active: [{
|
|
1491
1509
|
type: Input
|
|
1492
1510
|
}], ariaControls: [{
|
|
1493
1511
|
type: Input
|
|
@@ -1633,10 +1651,10 @@ class SkyTabsetPermalinkService {
|
|
|
1633
1651
|
});
|
|
1634
1652
|
return params;
|
|
1635
1653
|
}
|
|
1636
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.
|
|
1637
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.
|
|
1654
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SkyTabsetPermalinkService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
1655
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SkyTabsetPermalinkService }); }
|
|
1638
1656
|
}
|
|
1639
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.
|
|
1657
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SkyTabsetPermalinkService, decorators: [{
|
|
1640
1658
|
type: Injectable
|
|
1641
1659
|
}] });
|
|
1642
1660
|
|
|
@@ -1745,7 +1763,7 @@ class SkyTabComponent {
|
|
|
1745
1763
|
#changeDetector;
|
|
1746
1764
|
#permalinkService;
|
|
1747
1765
|
#tabsetService;
|
|
1748
|
-
constructor(
|
|
1766
|
+
constructor() {
|
|
1749
1767
|
this.cssClass = `${LAYOUT_CLASS_PREFIX}${LAYOUT_DEFAULT}`;
|
|
1750
1768
|
/**
|
|
1751
1769
|
* Fires when users click the button to close the tab.
|
|
@@ -1757,9 +1775,9 @@ class SkyTabComponent {
|
|
|
1757
1775
|
this.showContent = false;
|
|
1758
1776
|
this.#_active = false;
|
|
1759
1777
|
this.#_layout = LAYOUT_DEFAULT;
|
|
1760
|
-
this.#changeDetector =
|
|
1761
|
-
this.#permalinkService =
|
|
1762
|
-
this.#tabsetService =
|
|
1778
|
+
this.#changeDetector = inject(ChangeDetectorRef);
|
|
1779
|
+
this.#permalinkService = inject(SkyTabsetPermalinkService);
|
|
1780
|
+
this.#tabsetService = inject(SkyTabsetService);
|
|
1763
1781
|
const id = nextId++;
|
|
1764
1782
|
this.tabPanelId = `sky-tab-${id}`;
|
|
1765
1783
|
this.tabButtonId = `${this.tabPanelId}-nav-btn`;
|
|
@@ -1805,13 +1823,13 @@ class SkyTabComponent {
|
|
|
1805
1823
|
this.#permalinkService.urlify(this.permalinkValue) ||
|
|
1806
1824
|
this.#permalinkService.urlify(this.tabHeading);
|
|
1807
1825
|
}
|
|
1808
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.
|
|
1809
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.
|
|
1826
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SkyTabComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1827
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.6", 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 }); }
|
|
1810
1828
|
}
|
|
1811
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.
|
|
1829
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SkyTabComponent, decorators: [{
|
|
1812
1830
|
type: Component,
|
|
1813
1831
|
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"] }]
|
|
1814
|
-
}], ctorParameters: () => [
|
|
1832
|
+
}], ctorParameters: () => [], propDecorators: { active: [{
|
|
1815
1833
|
type: Input
|
|
1816
1834
|
}], disabled: [{
|
|
1817
1835
|
type: Input
|
|
@@ -1842,10 +1860,10 @@ class SkyTabsetNavButtonDisabledPipe {
|
|
|
1842
1860
|
}
|
|
1843
1861
|
return !tabToSelectExists || !!tabToSelectIsDisabled;
|
|
1844
1862
|
}
|
|
1845
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.
|
|
1846
|
-
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.0.
|
|
1863
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SkyTabsetNavButtonDisabledPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
|
|
1864
|
+
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.0.6", ngImport: i0, type: SkyTabsetNavButtonDisabledPipe, isStandalone: false, name: "skyTabsetNavButtonDisabled" }); }
|
|
1847
1865
|
}
|
|
1848
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.
|
|
1866
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SkyTabsetNavButtonDisabledPipe, decorators: [{
|
|
1849
1867
|
type: Pipe,
|
|
1850
1868
|
args: [{
|
|
1851
1869
|
name: 'skyTabsetNavButtonDisabled',
|
|
@@ -1860,6 +1878,12 @@ const buttonTypeFinish = 'finish';
|
|
|
1860
1878
|
* Creates a button to navigate between tabs in a tabset when `tabStyle` is `"wizard"`.
|
|
1861
1879
|
*/
|
|
1862
1880
|
class SkyTabsetNavButtonComponent {
|
|
1881
|
+
constructor() {
|
|
1882
|
+
this.isVisible = false;
|
|
1883
|
+
this.type = 'submit';
|
|
1884
|
+
this.#logger = inject(SkyLogService);
|
|
1885
|
+
this.#ngUnsubscribe = new Subject();
|
|
1886
|
+
}
|
|
1863
1887
|
/**
|
|
1864
1888
|
* The tabset wizard component to associate with the nav button.
|
|
1865
1889
|
* @required
|
|
@@ -1929,12 +1953,6 @@ class SkyTabsetNavButtonComponent {
|
|
|
1929
1953
|
#logger;
|
|
1930
1954
|
#tabCount;
|
|
1931
1955
|
#ngUnsubscribe;
|
|
1932
|
-
constructor(logger) {
|
|
1933
|
-
this.isVisible = false;
|
|
1934
|
-
this.type = 'submit';
|
|
1935
|
-
this.#ngUnsubscribe = new Subject();
|
|
1936
|
-
this.#logger = logger;
|
|
1937
|
-
}
|
|
1938
1956
|
ngOnDestroy() {
|
|
1939
1957
|
this.#ngUnsubscribe.next();
|
|
1940
1958
|
this.#ngUnsubscribe.complete();
|
|
@@ -1984,13 +2002,13 @@ class SkyTabsetNavButtonComponent {
|
|
|
1984
2002
|
}
|
|
1985
2003
|
}
|
|
1986
2004
|
}
|
|
1987
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.
|
|
1988
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.
|
|
2005
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SkyTabsetNavButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2006
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", 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: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: i5.SkyLibResourcesPipe, name: "skyLibResources" }, { kind: "pipe", type: SkyTabsetNavButtonDisabledPipe, name: "skyTabsetNavButtonDisabled" }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
|
|
1989
2007
|
}
|
|
1990
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.
|
|
2008
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SkyTabsetNavButtonComponent, decorators: [{
|
|
1991
2009
|
type: Component,
|
|
1992
2010
|
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" }]
|
|
1993
|
-
}],
|
|
2011
|
+
}], propDecorators: { tabset: [{
|
|
1994
2012
|
type: Input
|
|
1995
2013
|
}], buttonType: [{
|
|
1996
2014
|
type: Input
|
|
@@ -2061,14 +2079,52 @@ class SkyTabsetAdapterService {
|
|
|
2061
2079
|
}
|
|
2062
2080
|
return firstTabRect.left - tabsetRect.left;
|
|
2063
2081
|
}
|
|
2064
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.
|
|
2065
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.
|
|
2082
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SkyTabsetAdapterService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
2083
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SkyTabsetAdapterService }); }
|
|
2066
2084
|
}
|
|
2067
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.
|
|
2085
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SkyTabsetAdapterService, decorators: [{
|
|
2068
2086
|
type: Injectable
|
|
2069
2087
|
}], ctorParameters: () => [] });
|
|
2070
2088
|
|
|
2071
2089
|
class SkyTabsetComponent {
|
|
2090
|
+
constructor() {
|
|
2091
|
+
/**
|
|
2092
|
+
* Fires when the active tab changes. This event emits the index of the active tab.
|
|
2093
|
+
*/
|
|
2094
|
+
this.activeChange = new EventEmitter();
|
|
2095
|
+
/**
|
|
2096
|
+
* Fires when users click the button to add a new tab.
|
|
2097
|
+
* The new tab button is added to the tab area when you specify a listener for this event.
|
|
2098
|
+
* This event only applies when `tabStyle` is `"tabs"`.
|
|
2099
|
+
*/
|
|
2100
|
+
this.newTab = new EventEmitter();
|
|
2101
|
+
/**
|
|
2102
|
+
* Fires when users click the button to open a tab.
|
|
2103
|
+
* The open tab button is added to the tab area when you specify a listener for this event.
|
|
2104
|
+
* This event only applies when `tabStyle` is `"tabs"`.
|
|
2105
|
+
*/
|
|
2106
|
+
this.openTab = new EventEmitter();
|
|
2107
|
+
/**
|
|
2108
|
+
* Fires when any tab's `tabIndex` value changes.
|
|
2109
|
+
* This event only applies when `tabStyle` is `"tabs"`.
|
|
2110
|
+
*/
|
|
2111
|
+
this.tabIndexesChange = new EventEmitter();
|
|
2112
|
+
this.cssClass = 'sky-tabset-layout-none';
|
|
2113
|
+
this.dropdownTriggerButtonText = '';
|
|
2114
|
+
this.tabButtons = [];
|
|
2115
|
+
this.#ngUnsubscribe = new Subject();
|
|
2116
|
+
this.#tabComponentsChangeUnsubscribe = new Subject();
|
|
2117
|
+
this.#tabComponentsStateChangeUnsubscribe = new Subject();
|
|
2118
|
+
this.#_permalinkId = '';
|
|
2119
|
+
this.#_tabDisplayMode = 'tabs';
|
|
2120
|
+
this.#_tabStyle = 'tabs';
|
|
2121
|
+
this.#changeDetector = inject(ChangeDetectorRef);
|
|
2122
|
+
this.#elementRef = inject(ElementRef);
|
|
2123
|
+
this.#adapterService = inject(SkyTabsetAdapterService);
|
|
2124
|
+
this.#permalinkService = inject(SkyTabsetPermalinkService);
|
|
2125
|
+
this.#tabsetService = inject(SkyTabsetService);
|
|
2126
|
+
this.#layoutHostSvc = inject(SkyLayoutHostService, { optional: true });
|
|
2127
|
+
}
|
|
2072
2128
|
/**
|
|
2073
2129
|
* Activates a tab by its `tabIndex` property.
|
|
2074
2130
|
*/
|
|
@@ -2165,44 +2221,6 @@ class SkyTabsetComponent {
|
|
|
2165
2221
|
#permalinkService;
|
|
2166
2222
|
#tabsetService;
|
|
2167
2223
|
#layoutHostSvc;
|
|
2168
|
-
constructor(changeDetector, elementRef, adapterService, permalinkService, tabsetService) {
|
|
2169
|
-
/**
|
|
2170
|
-
* Fires when the active tab changes. This event emits the index of the active tab.
|
|
2171
|
-
*/
|
|
2172
|
-
this.activeChange = new EventEmitter();
|
|
2173
|
-
/**
|
|
2174
|
-
* Fires when users click the button to add a new tab.
|
|
2175
|
-
* The new tab button is added to the tab area when you specify a listener for this event.
|
|
2176
|
-
* This event only applies when `tabStyle` is `"tabs"`.
|
|
2177
|
-
*/
|
|
2178
|
-
this.newTab = new EventEmitter();
|
|
2179
|
-
/**
|
|
2180
|
-
* Fires when users click the button to open a tab.
|
|
2181
|
-
* The open tab button is added to the tab area when you specify a listener for this event.
|
|
2182
|
-
* This event only applies when `tabStyle` is `"tabs"`.
|
|
2183
|
-
*/
|
|
2184
|
-
this.openTab = new EventEmitter();
|
|
2185
|
-
/**
|
|
2186
|
-
* Fires when any tab's `tabIndex` value changes.
|
|
2187
|
-
* This event only applies when `tabStyle` is `"tabs"`.
|
|
2188
|
-
*/
|
|
2189
|
-
this.tabIndexesChange = new EventEmitter();
|
|
2190
|
-
this.cssClass = 'sky-tabset-layout-none';
|
|
2191
|
-
this.dropdownTriggerButtonText = '';
|
|
2192
|
-
this.tabButtons = [];
|
|
2193
|
-
this.#ngUnsubscribe = new Subject();
|
|
2194
|
-
this.#tabComponentsChangeUnsubscribe = new Subject();
|
|
2195
|
-
this.#tabComponentsStateChangeUnsubscribe = new Subject();
|
|
2196
|
-
this.#_permalinkId = '';
|
|
2197
|
-
this.#_tabDisplayMode = 'tabs';
|
|
2198
|
-
this.#_tabStyle = 'tabs';
|
|
2199
|
-
this.#layoutHostSvc = inject(SkyLayoutHostService, { optional: true });
|
|
2200
|
-
this.#changeDetector = changeDetector;
|
|
2201
|
-
this.#elementRef = elementRef;
|
|
2202
|
-
this.#adapterService = adapterService;
|
|
2203
|
-
this.#permalinkService = permalinkService;
|
|
2204
|
-
this.#tabsetService = tabsetService;
|
|
2205
|
-
}
|
|
2206
2224
|
ngAfterViewInit() {
|
|
2207
2225
|
this.#initTabComponents();
|
|
2208
2226
|
const initialTabIndex = this.#getInitialTabIndex();
|
|
@@ -2492,21 +2510,21 @@ class SkyTabsetComponent {
|
|
|
2492
2510
|
this.activeChange.emit(activeIndex);
|
|
2493
2511
|
}
|
|
2494
2512
|
}
|
|
2495
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.
|
|
2496
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.
|
|
2513
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SkyTabsetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2514
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", 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: [
|
|
2497
2515
|
SkyTabsetAdapterService,
|
|
2498
2516
|
SkyTabsetPermalinkService,
|
|
2499
2517
|
SkyTabsetService,
|
|
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:
|
|
2518
|
+
], 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: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2$1.λ2, selector: "sky-dropdown-button" }, { kind: "component", type: i2$1.λ3, selector: "sky-dropdown", inputs: ["buttonStyle", "buttonType", "disabled", "label", "horizontalAlignment", "messageStream", "title", "trigger"] }, { kind: "component", type: i2$1.λ1, selector: "sky-dropdown-item", inputs: ["ariaRole"] }, { kind: "component", type: i2$1.λ4, selector: "sky-dropdown-menu", inputs: ["ariaLabelledBy", "ariaRole", "useNativeFocus"], outputs: ["menuChanges"] }, { kind: "component", type: i2.λ1, selector: "sky-icon", inputs: ["iconName", "variant", "iconSize"] }, { kind: "directive", type: i4$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: i5.SkyLibResourcesPipe, name: "skyLibResources" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
2501
2519
|
}
|
|
2502
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.
|
|
2520
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SkyTabsetComponent, decorators: [{
|
|
2503
2521
|
type: Component,
|
|
2504
2522
|
args: [{ selector: 'sky-tabset', providers: [
|
|
2505
2523
|
SkyTabsetAdapterService,
|
|
2506
2524
|
SkyTabsetPermalinkService,
|
|
2507
2525
|
SkyTabsetService,
|
|
2508
2526
|
], 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"] }]
|
|
2509
|
-
}],
|
|
2527
|
+
}], propDecorators: { active: [{
|
|
2510
2528
|
type: Input
|
|
2511
2529
|
}], ariaLabel: [{
|
|
2512
2530
|
type: Input
|
|
@@ -2536,8 +2554,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImpor
|
|
|
2536
2554
|
}] } });
|
|
2537
2555
|
|
|
2538
2556
|
class SkyTabsModule {
|
|
2539
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.
|
|
2540
|
-
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.0.
|
|
2557
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SkyTabsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
2558
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.0.6", ngImport: i0, type: SkyTabsModule, declarations: [SkyTabButtonComponent,
|
|
2541
2559
|
SkyTabComponent,
|
|
2542
2560
|
SkyTabsetComponent,
|
|
2543
2561
|
SkyTabsetNavButtonComponent,
|
|
@@ -2548,14 +2566,14 @@ class SkyTabsModule {
|
|
|
2548
2566
|
SkyIdModule,
|
|
2549
2567
|
SkyTabsResourcesModule,
|
|
2550
2568
|
SkyThemeModule], exports: [SkyTabComponent, SkyTabsetComponent, SkyTabsetNavButtonComponent] }); }
|
|
2551
|
-
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.0.
|
|
2569
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SkyTabsModule, imports: [CommonModule,
|
|
2552
2570
|
SkyDropdownModule,
|
|
2553
2571
|
SkyIconModule,
|
|
2554
2572
|
SkyIdModule,
|
|
2555
2573
|
SkyTabsResourcesModule,
|
|
2556
2574
|
SkyThemeModule] }); }
|
|
2557
2575
|
}
|
|
2558
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.
|
|
2576
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SkyTabsModule, decorators: [{
|
|
2559
2577
|
type: NgModule,
|
|
2560
2578
|
args: [{
|
|
2561
2579
|
declarations: [
|