@skyux/tabs 8.6.0 → 9.0.0-alpha.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (81) hide show
  1. package/documentation.json +92 -54
  2. package/esm2022/index.mjs +26 -0
  3. package/esm2022/lib/modules/sectioned-form/sectioned-form-section.component.mjs +65 -0
  4. package/esm2022/lib/modules/sectioned-form/sectioned-form.component.mjs +187 -0
  5. package/{esm2020 → esm2022}/lib/modules/sectioned-form/sectioned-form.module.mjs +11 -11
  6. package/{esm2020 → esm2022}/lib/modules/sectioned-form/sectioned-form.service.mjs +4 -4
  7. package/esm2022/lib/modules/shared/sky-tabs-resources.module.mjs +61 -0
  8. package/esm2022/lib/modules/shared/tab-id.service.mjs +50 -0
  9. package/{esm2020 → esm2022}/lib/modules/tabs/tab-button-adapter.service.mjs +4 -4
  10. package/esm2022/lib/modules/tabs/tab-button.component.mjs +162 -0
  11. package/{esm2020 → esm2022}/lib/modules/tabs/tab-layout-type.mjs +1 -1
  12. package/esm2022/lib/modules/tabs/tab.component.mjs +197 -0
  13. package/{esm2020 → esm2022}/lib/modules/tabs/tabs.module.mjs +21 -21
  14. package/esm2022/lib/modules/tabs/tabset-adapter.service.mjs +68 -0
  15. package/{esm2020 → esm2022}/lib/modules/tabs/tabset-nav-button-disabled.pipe.mjs +4 -4
  16. package/esm2022/lib/modules/tabs/tabset-nav-button.component.mjs +149 -0
  17. package/esm2022/lib/modules/tabs/tabset-permalink.service.mjs +128 -0
  18. package/esm2022/lib/modules/tabs/tabset.component.mjs +466 -0
  19. package/esm2022/lib/modules/tabs/tabset.service.mjs +198 -0
  20. package/esm2022/lib/modules/vertical-tabset/vertical-tab-media-query.service.mjs +68 -0
  21. package/esm2022/lib/modules/vertical-tabset/vertical-tab.component.mjs +217 -0
  22. package/esm2022/lib/modules/vertical-tabset/vertical-tabset-adapter.service.mjs +48 -0
  23. package/esm2022/lib/modules/vertical-tabset/vertical-tabset-group.component.mjs +108 -0
  24. package/esm2022/lib/modules/vertical-tabset/vertical-tabset.component.mjs +158 -0
  25. package/{esm2020 → esm2022}/lib/modules/vertical-tabset/vertical-tabset.module.mjs +21 -21
  26. package/esm2022/lib/modules/vertical-tabset/vertical-tabset.service.mjs +169 -0
  27. package/esm2022/testing/tabs/tabset-fixture.mjs +129 -0
  28. package/fesm2022/skyux-tabs-testing.mjs +136 -0
  29. package/{fesm2020 → fesm2022}/skyux-tabs-testing.mjs.map +1 -1
  30. package/fesm2022/skyux-tabs.mjs +2586 -0
  31. package/{fesm2020 → fesm2022}/skyux-tabs.mjs.map +1 -1
  32. package/index.d.ts +1 -0
  33. package/lib/modules/sectioned-form/sectioned-form-section.component.d.ts +1 -1
  34. package/lib/modules/sectioned-form/sectioned-form.component.d.ts +1 -1
  35. package/lib/modules/tabs/tab-button.component.d.ts +1 -1
  36. package/lib/modules/tabs/tab-layout-type.d.ts +1 -1
  37. package/lib/modules/tabs/tab.component.d.ts +1 -1
  38. package/lib/modules/tabs/tabset-nav-button.component.d.ts +1 -1
  39. package/lib/modules/tabs/tabset.component.d.ts +1 -1
  40. package/lib/modules/vertical-tabset/vertical-tab.component.d.ts +1 -1
  41. package/lib/modules/vertical-tabset/vertical-tabset-group.component.d.ts +1 -1
  42. package/lib/modules/vertical-tabset/vertical-tabset.component.d.ts +1 -1
  43. package/package.json +21 -29
  44. package/esm2020/index.mjs +0 -25
  45. package/esm2020/lib/modules/sectioned-form/sectioned-form-section.component.mjs +0 -67
  46. package/esm2020/lib/modules/sectioned-form/sectioned-form.component.mjs +0 -187
  47. package/esm2020/lib/modules/shared/sky-tabs-resources.module.mjs +0 -61
  48. package/esm2020/lib/modules/shared/tab-id.service.mjs +0 -53
  49. package/esm2020/lib/modules/tabs/tab-button.component.mjs +0 -162
  50. package/esm2020/lib/modules/tabs/tab.component.mjs +0 -198
  51. package/esm2020/lib/modules/tabs/tabset-adapter.service.mjs +0 -68
  52. package/esm2020/lib/modules/tabs/tabset-nav-button.component.mjs +0 -149
  53. package/esm2020/lib/modules/tabs/tabset-permalink.service.mjs +0 -128
  54. package/esm2020/lib/modules/tabs/tabset.component.mjs +0 -429
  55. package/esm2020/lib/modules/tabs/tabset.service.mjs +0 -196
  56. package/esm2020/lib/modules/vertical-tabset/vertical-tab-media-query.service.mjs +0 -71
  57. package/esm2020/lib/modules/vertical-tabset/vertical-tab.component.mjs +0 -216
  58. package/esm2020/lib/modules/vertical-tabset/vertical-tabset-adapter.service.mjs +0 -51
  59. package/esm2020/lib/modules/vertical-tabset/vertical-tabset-group.component.mjs +0 -110
  60. package/esm2020/lib/modules/vertical-tabset/vertical-tabset.component.mjs +0 -159
  61. package/esm2020/lib/modules/vertical-tabset/vertical-tabset.service.mjs +0 -167
  62. package/esm2020/testing/tabs/tabset-fixture.mjs +0 -128
  63. package/fesm2015/skyux-tabs-testing.mjs +0 -147
  64. package/fesm2015/skyux-tabs-testing.mjs.map +0 -1
  65. package/fesm2015/skyux-tabs.mjs +0 -2560
  66. package/fesm2015/skyux-tabs.mjs.map +0 -1
  67. package/fesm2020/skyux-tabs-testing.mjs +0 -135
  68. package/fesm2020/skyux-tabs.mjs +0 -2544
  69. /package/{esm2020 → esm2022}/lib/modules/sectioned-form/types/sectioned-form-message-type.mjs +0 -0
  70. /package/{esm2020 → esm2022}/lib/modules/sectioned-form/types/sectioned-form-message.mjs +0 -0
  71. /package/{esm2020 → esm2022}/lib/modules/tabs/tab-button-view-model.mjs +0 -0
  72. /package/{esm2020 → esm2022}/lib/modules/tabs/tab-index.mjs +0 -0
  73. /package/{esm2020 → esm2022}/lib/modules/tabs/tabset-active-tab-unregistered-args.mjs +0 -0
  74. /package/{esm2020 → esm2022}/lib/modules/tabs/tabset-buttons-display-mode.mjs +0 -0
  75. /package/{esm2020 → esm2022}/lib/modules/tabs/tabset-nav-button-type.mjs +0 -0
  76. /package/{esm2020 → esm2022}/lib/modules/tabs/tabset-style.mjs +0 -0
  77. /package/{esm2020 → esm2022}/lib/modules/tabs/tabset-tab-indexes-change.mjs +0 -0
  78. /package/{esm2020 → esm2022}/skyux-tabs.mjs +0 -0
  79. /package/{esm2020 → esm2022}/testing/public-api.mjs +0 -0
  80. /package/{esm2020 → esm2022}/testing/skyux-tabs-testing.mjs +0 -0
  81. /package/{esm2020 → esm2022}/testing/tabs/tab-fixture-tab.mjs +0 -0
@@ -1,2544 +0,0 @@
1
- import * as i4 from '@angular/common';
2
- import { CommonModule } from '@angular/common';
3
- import * as i0 from '@angular/core';
4
- import { NgModule, Injectable, Component, ChangeDetectionStrategy, Optional, Input, ViewChild, HostListener, ContentChildren, EventEmitter, Output, ViewEncapsulation, HostBinding, Pipe, inject } from '@angular/core';
5
- import { SkyCheckboxModule } from '@skyux/forms';
6
- import * as i7 from '@skyux/theme';
7
- import { SkyThemeModule } from '@skyux/theme';
8
- import * as i1 from '@skyux/core';
9
- import { SkyMediaBreakpoints, SkyMediaQueryService, SkyIdModule, SkyLayoutHostService } from '@skyux/core';
10
- import * as i6 from '@skyux/indicators';
11
- import { SkyIconModule, SkyExpansionIndicatorModule, SkyStatusIndicatorModule } from '@skyux/indicators';
12
- import * as i3 from '@skyux/i18n';
13
- import { getLibStringForLocale, SkyI18nModule, SKY_LIB_RESOURCES_PROVIDERS } from '@skyux/i18n';
14
- import { __classPrivateFieldSet, __classPrivateFieldGet } from 'tslib';
15
- import { ReplaySubject, BehaviorSubject, Subject, combineLatest, race } from 'rxjs';
16
- import { takeUntil, take, distinctUntilChanged } from 'rxjs/operators';
17
- import { skyAnimationSlide } from '@skyux/animations';
18
- import { trigger, transition, style, animate } from '@angular/animations';
19
- import * as i1$1 from '@angular/router';
20
- import { RouterModule } from '@angular/router';
21
- import * as i5 from '@skyux/popovers';
22
- import { SkyDropdownModule } from '@skyux/popovers';
23
-
24
- /**
25
- * NOTICE: DO NOT MODIFY THIS FILE!
26
- * The contents of this file were automatically generated by
27
- * the 'ng generate @skyux/i18n:lib-resources-module lib/modules/shared/sky-tabs' schematic.
28
- * To update this file, simply rerun the command.
29
- */
30
- const RESOURCES = {
31
- 'EN-US': {
32
- skyux_tab_add: { message: 'Add tab' },
33
- skyux_tab_close: { message: 'Close {0} tab' },
34
- skyux_tabs_navigator_finish: { message: 'Finish' },
35
- skyux_tabs_navigator_next: { message: 'Next' },
36
- skyux_tabs_navigator_previous: { message: 'Previous' },
37
- skyux_tab_open: { message: 'Open tab' },
38
- skyux_tabs_sr_tab_order: { message: 'Tab {0} of {1}: {2}' },
39
- skyux_vertical_tabs_show_tabs_text: { message: 'Tab list' },
40
- skyux_wizard_sr_step_current: { message: 'Step {0} of {1}, current: {2}' },
41
- skyux_wizard_sr_step_completed: {
42
- message: 'Step {0} of {1}, completed: {2}',
43
- },
44
- skyux_wizard_sr_step_unavailable: {
45
- message: 'Step {0} of {1}, unavailable: {2}',
46
- },
47
- },
48
- };
49
- class SkyTabsResourcesProvider {
50
- getString(localeInfo, name) {
51
- return getLibStringForLocale(RESOURCES, localeInfo.locale, name);
52
- }
53
- }
54
- /**
55
- * Import into any component library module that needs to use resource strings.
56
- */
57
- class SkyTabsResourcesModule {
58
- }
59
- SkyTabsResourcesModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyTabsResourcesModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
60
- SkyTabsResourcesModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.9", ngImport: i0, type: SkyTabsResourcesModule, exports: [SkyI18nModule] });
61
- SkyTabsResourcesModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyTabsResourcesModule, providers: [
62
- {
63
- provide: SKY_LIB_RESOURCES_PROVIDERS,
64
- useClass: SkyTabsResourcesProvider,
65
- multi: true,
66
- },
67
- ], imports: [SkyI18nModule] });
68
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyTabsResourcesModule, decorators: [{
69
- type: NgModule,
70
- args: [{
71
- exports: [SkyI18nModule],
72
- providers: [
73
- {
74
- provide: SKY_LIB_RESOURCES_PROVIDERS,
75
- useClass: SkyTabsResourcesProvider,
76
- multi: true,
77
- },
78
- ],
79
- }]
80
- }] });
81
-
82
- var _SkyVerticalTabMediaQueryService_currentSubject;
83
- /**
84
- * @internal
85
- */
86
- class SkyVerticalTabMediaQueryService {
87
- constructor() {
88
- _SkyVerticalTabMediaQueryService_currentSubject.set(this, void 0);
89
- __classPrivateFieldSet(this, _SkyVerticalTabMediaQueryService_currentSubject, new ReplaySubject(1), "f");
90
- }
91
- subscribe(listener) {
92
- return __classPrivateFieldGet(this, _SkyVerticalTabMediaQueryService_currentSubject, "f").subscribe({
93
- next: (breakpoints) => {
94
- listener(breakpoints);
95
- },
96
- });
97
- }
98
- setBreakpointForWidth(width) {
99
- let breakpoint;
100
- if (this.isWidthWithinBreakpoint(width, SkyMediaBreakpoints.xs)) {
101
- breakpoint = SkyMediaBreakpoints.xs;
102
- }
103
- else if (this.isWidthWithinBreakpoint(width, SkyMediaBreakpoints.sm)) {
104
- breakpoint = SkyMediaBreakpoints.sm;
105
- }
106
- else if (this.isWidthWithinBreakpoint(width, SkyMediaBreakpoints.md)) {
107
- breakpoint = SkyMediaBreakpoints.md;
108
- }
109
- else {
110
- breakpoint = SkyMediaBreakpoints.lg;
111
- }
112
- this.current = breakpoint;
113
- __classPrivateFieldGet(this, _SkyVerticalTabMediaQueryService_currentSubject, "f").next(this.current);
114
- }
115
- isWidthWithinBreakpoint(width, breakpoint) {
116
- const xsBreakpointMaxPixels = 767;
117
- const smBreakpointMinPixels = 768;
118
- const smBreakpointMaxPixels = 991;
119
- const mdBreakpointMinPixels = 992;
120
- const mdBreakpointMaxPixels = 1199;
121
- const lgBreakpointMinPixels = 1200;
122
- switch (breakpoint) {
123
- case SkyMediaBreakpoints.xs: {
124
- return width <= xsBreakpointMaxPixels;
125
- }
126
- case SkyMediaBreakpoints.sm: {
127
- return width >= smBreakpointMinPixels && width <= smBreakpointMaxPixels;
128
- }
129
- case SkyMediaBreakpoints.md: {
130
- return width >= mdBreakpointMinPixels && width <= mdBreakpointMaxPixels;
131
- }
132
- default: {
133
- return width >= lgBreakpointMinPixels;
134
- }
135
- }
136
- }
137
- destroy() {
138
- __classPrivateFieldGet(this, _SkyVerticalTabMediaQueryService_currentSubject, "f").complete();
139
- }
140
- }
141
- _SkyVerticalTabMediaQueryService_currentSubject = new WeakMap();
142
- SkyVerticalTabMediaQueryService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyVerticalTabMediaQueryService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
143
- SkyVerticalTabMediaQueryService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyVerticalTabMediaQueryService });
144
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyVerticalTabMediaQueryService, decorators: [{
145
- type: Injectable
146
- }], ctorParameters: function () { return []; } });
147
-
148
- var _SkyVerticalTabsetAdapterService_renderer;
149
- class SkyVerticalTabsetAdapterService {
150
- constructor(rendererFactory) {
151
- _SkyVerticalTabsetAdapterService_renderer.set(this, void 0);
152
- __classPrivateFieldSet(this, _SkyVerticalTabsetAdapterService_renderer, rendererFactory.createRenderer(undefined, null), "f");
153
- }
154
- getWidth(elementRef) {
155
- return elementRef.nativeElement.clientWidth;
156
- }
157
- scrollToContentTop(element) {
158
- element.nativeElement.scrollTop = 0;
159
- }
160
- setResponsiveClass(element, breakpoint) {
161
- const nativeEl = element.nativeElement;
162
- __classPrivateFieldGet(this, _SkyVerticalTabsetAdapterService_renderer, "f").removeClass(nativeEl, 'sky-responsive-container-xs');
163
- __classPrivateFieldGet(this, _SkyVerticalTabsetAdapterService_renderer, "f").removeClass(nativeEl, 'sky-responsive-container-sm');
164
- __classPrivateFieldGet(this, _SkyVerticalTabsetAdapterService_renderer, "f").removeClass(nativeEl, 'sky-responsive-container-md');
165
- __classPrivateFieldGet(this, _SkyVerticalTabsetAdapterService_renderer, "f").removeClass(nativeEl, 'sky-responsive-container-lg');
166
- let newClass;
167
- switch (breakpoint) {
168
- case SkyMediaBreakpoints.xs: {
169
- newClass = 'sky-responsive-container-xs';
170
- break;
171
- }
172
- case SkyMediaBreakpoints.sm: {
173
- newClass = 'sky-responsive-container-sm';
174
- break;
175
- }
176
- case SkyMediaBreakpoints.md: {
177
- newClass = 'sky-responsive-container-md';
178
- break;
179
- }
180
- default: {
181
- newClass = 'sky-responsive-container-lg';
182
- break;
183
- }
184
- }
185
- __classPrivateFieldGet(this, _SkyVerticalTabsetAdapterService_renderer, "f").addClass(nativeEl, newClass);
186
- }
187
- }
188
- _SkyVerticalTabsetAdapterService_renderer = new WeakMap();
189
- SkyVerticalTabsetAdapterService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyVerticalTabsetAdapterService, deps: [{ token: i0.RendererFactory2 }], target: i0.ɵɵFactoryTarget.Injectable });
190
- SkyVerticalTabsetAdapterService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyVerticalTabsetAdapterService });
191
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyVerticalTabsetAdapterService, decorators: [{
192
- type: Injectable
193
- }], ctorParameters: function () { return [{ type: i0.RendererFactory2 }]; } });
194
-
195
- var _SkyVerticalTabsetService_instances, _SkyVerticalTabsetService_contentAdded, _SkyVerticalTabsetService_tabsVisible, _SkyVerticalTabsetService_isMobile, _SkyVerticalTabsetService_mediaQueryService, _SkyVerticalTabsetService_destroyContent, _SkyVerticalTabsetService_moveContent, _SkyVerticalTabsetService_updateTabClicked;
196
- const VISIBLE_STATE = 'shown';
197
- const HIDDEN_STATE = 'void';
198
- /**
199
- * @internal
200
- */
201
- class SkyVerticalTabsetService {
202
- constructor(mediaQueryService) {
203
- _SkyVerticalTabsetService_instances.add(this);
204
- this.activeIndex = undefined;
205
- this.hidingTabs = new BehaviorSubject(false);
206
- this.indexChanged = new ReplaySubject(1);
207
- this.maintainTabContent = false;
208
- this.showingTabs = new BehaviorSubject(false);
209
- this.switchingMobile = new Subject();
210
- this.tabs = [];
211
- this.tabAdded = new Subject();
212
- this.tabClicked = new ReplaySubject(1);
213
- _SkyVerticalTabsetService_contentAdded.set(this, false);
214
- _SkyVerticalTabsetService_tabsVisible.set(this, false);
215
- _SkyVerticalTabsetService_isMobile.set(this, false);
216
- _SkyVerticalTabsetService_mediaQueryService.set(this, void 0);
217
- __classPrivateFieldSet(this, _SkyVerticalTabsetService_mediaQueryService, mediaQueryService, "f");
218
- __classPrivateFieldGet(this, _SkyVerticalTabsetService_mediaQueryService, "f").subscribe((breakpoint) => {
219
- const nowMobile = breakpoint === SkyMediaBreakpoints.xs;
220
- if (nowMobile && !__classPrivateFieldGet(this, _SkyVerticalTabsetService_isMobile, "f")) {
221
- // switching to mobile
222
- this.switchingMobile.next(true);
223
- if (!__classPrivateFieldGet(this, _SkyVerticalTabsetService_tabsVisible, "f")) {
224
- this.hidingTabs.next(true);
225
- }
226
- }
227
- else if (!nowMobile && __classPrivateFieldGet(this, _SkyVerticalTabsetService_isMobile, "f")) {
228
- // switching to widescreen
229
- this.switchingMobile.next(false);
230
- if (!__classPrivateFieldGet(this, _SkyVerticalTabsetService_tabsVisible, "f")) {
231
- this.showingTabs.next(true);
232
- }
233
- }
234
- __classPrivateFieldSet(this, _SkyVerticalTabsetService_isMobile, nowMobile, "f");
235
- });
236
- }
237
- addTab(tab) {
238
- const index = this.tabs.length;
239
- tab.index = index;
240
- this.tabs.push(tab);
241
- if (tab.active) {
242
- this.activateTab(tab);
243
- }
244
- this.tabAdded.next(tab);
245
- }
246
- destroyTab(tab) {
247
- const tabIndex = this.tabs.indexOf(tab);
248
- if (tabIndex === -1) {
249
- return;
250
- }
251
- if (this.maintainTabContent &&
252
- tab.contentRendered &&
253
- /* istanbul ignore next */
254
- this.content?.nativeElement.contains(tab.tabContent?.nativeElement)) {
255
- this.content?.nativeElement.removeChild(tab.tabContent?.nativeElement);
256
- }
257
- this.tabs.splice(tabIndex, 1);
258
- // update tab indices
259
- this.tabs.forEach((tabItem, index) => (tabItem.index = index));
260
- if (tab.active) {
261
- if (!this.maintainTabContent) {
262
- __classPrivateFieldGet(this, _SkyVerticalTabsetService_instances, "m", _SkyVerticalTabsetService_destroyContent).call(this);
263
- }
264
- // Try selecting the next tab first, and if there's no next tab then
265
- // try selecting the previous one.
266
- const newActiveTab = this.tabs[tabIndex] || this.tabs[tabIndex - 1];
267
- /*istanbul ignore else */
268
- if (newActiveTab) {
269
- newActiveTab.activateTab();
270
- }
271
- }
272
- }
273
- activateTab(tab) {
274
- // deactivate active tab
275
- const activeTab = this.tabs.find((t) => t.index === this.activeIndex);
276
- if (activeTab && activeTab.index !== tab.index) {
277
- activeTab.active = false;
278
- activeTab.tabDeactivated();
279
- }
280
- this.activeIndex = tab.index;
281
- this.tabClicked.next(true);
282
- __classPrivateFieldGet(this, _SkyVerticalTabsetService_instances, "m", _SkyVerticalTabsetService_updateTabClicked).call(this);
283
- }
284
- activeTab() {
285
- return this.tabs.find((t) => t.index === this.activeIndex);
286
- }
287
- isMobile() {
288
- return __classPrivateFieldGet(this, _SkyVerticalTabsetService_isMobile, "f");
289
- }
290
- updateContent() {
291
- if (!this.maintainTabContent) {
292
- if (!__classPrivateFieldGet(this, _SkyVerticalTabsetService_contentAdded, "f") && this.contentVisible()) {
293
- // content needs to be moved
294
- __classPrivateFieldGet(this, _SkyVerticalTabsetService_instances, "m", _SkyVerticalTabsetService_moveContent).call(this);
295
- }
296
- else if (__classPrivateFieldGet(this, _SkyVerticalTabsetService_contentAdded, "f") && !this.contentVisible()) {
297
- // content hidden
298
- __classPrivateFieldSet(this, _SkyVerticalTabsetService_contentAdded, false, "f");
299
- }
300
- }
301
- else {
302
- this.tabs.forEach((tab) => {
303
- if (!tab.contentRendered) {
304
- this.content?.nativeElement.appendChild(tab.tabContent?.nativeElement);
305
- tab.contentRendered = true;
306
- }
307
- });
308
- }
309
- }
310
- tabsVisible() {
311
- return !this.isMobile() || __classPrivateFieldGet(this, _SkyVerticalTabsetService_tabsVisible, "f");
312
- }
313
- contentVisible() {
314
- return !this.isMobile() || !__classPrivateFieldGet(this, _SkyVerticalTabsetService_tabsVisible, "f");
315
- }
316
- showTabs() {
317
- __classPrivateFieldSet(this, _SkyVerticalTabsetService_tabsVisible, true, "f");
318
- __classPrivateFieldSet(this, _SkyVerticalTabsetService_contentAdded, false, "f");
319
- this.animationTabsVisibleState = VISIBLE_STATE;
320
- this.animationContentVisibleState = HIDDEN_STATE;
321
- this.showingTabs.next(true);
322
- }
323
- }
324
- _SkyVerticalTabsetService_contentAdded = new WeakMap(), _SkyVerticalTabsetService_tabsVisible = new WeakMap(), _SkyVerticalTabsetService_isMobile = new WeakMap(), _SkyVerticalTabsetService_mediaQueryService = new WeakMap(), _SkyVerticalTabsetService_instances = new WeakSet(), _SkyVerticalTabsetService_destroyContent = function _SkyVerticalTabsetService_destroyContent() {
325
- if (this.content) {
326
- this.content.nativeElement.innerHTML = '';
327
- }
328
- this.content = undefined;
329
- }, _SkyVerticalTabsetService_moveContent = function _SkyVerticalTabsetService_moveContent() {
330
- /* istanbul ignore else */
331
- if (this.content && !__classPrivateFieldGet(this, _SkyVerticalTabsetService_contentAdded, "f")) {
332
- const activeTab = this.activeTab();
333
- const activeContent = activeTab ? activeTab.tabContent : undefined;
334
- if (activeContent && activeTab && activeContent.nativeElement) {
335
- this.content.nativeElement.appendChild(activeContent.nativeElement);
336
- activeTab.contentRendered = true;
337
- __classPrivateFieldSet(this, _SkyVerticalTabsetService_contentAdded, true, "f");
338
- }
339
- }
340
- }, _SkyVerticalTabsetService_updateTabClicked = function _SkyVerticalTabsetService_updateTabClicked() {
341
- __classPrivateFieldSet(this, _SkyVerticalTabsetService_contentAdded, false, "f");
342
- if (this.isMobile()) {
343
- __classPrivateFieldSet(this, _SkyVerticalTabsetService_tabsVisible, false, "f");
344
- this.animationContentVisibleState = VISIBLE_STATE;
345
- this.animationTabsVisibleState = HIDDEN_STATE;
346
- this.hidingTabs.next(true);
347
- }
348
- this.indexChanged.next(this.activeIndex);
349
- };
350
- SkyVerticalTabsetService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyVerticalTabsetService, deps: [{ token: i1.SkyMediaQueryService }], target: i0.ɵɵFactoryTarget.Injectable });
351
- SkyVerticalTabsetService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyVerticalTabsetService });
352
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyVerticalTabsetService, decorators: [{
353
- type: Injectable
354
- }], ctorParameters: function () { return [{ type: i1.SkyMediaQueryService }]; } });
355
-
356
- var _SkyTabIdService_instances, _SkyTabIdService_ids, _SkyTabIdService_ids$, _SkyTabIdService_idsObs, _SkyTabIdService_emitIds;
357
- /**
358
- * Tracks the element IDs for all tabs within a tablist.
359
- * @internal
360
- */
361
- class SkyTabIdService {
362
- get ids() {
363
- return __classPrivateFieldGet(this, _SkyTabIdService_idsObs, "f");
364
- }
365
- constructor() {
366
- _SkyTabIdService_instances.add(this);
367
- _SkyTabIdService_ids.set(this, void 0);
368
- _SkyTabIdService_ids$.set(this, void 0);
369
- _SkyTabIdService_idsObs.set(this, void 0);
370
- __classPrivateFieldSet(this, _SkyTabIdService_ids, new Map(), "f");
371
- __classPrivateFieldSet(this, _SkyTabIdService_ids$, new BehaviorSubject([]), "f");
372
- __classPrivateFieldSet(this, _SkyTabIdService_idsObs, __classPrivateFieldGet(this, _SkyTabIdService_ids$, "f").asObservable(), "f");
373
- }
374
- /**
375
- * Associates a tab's ID with its parent tablist.
376
- * @param {string} id A unique ID for the tab's registration.
377
- * @param {string} elementId The ID applied to the tab's element.
378
- */
379
- register(id, elementId) {
380
- if (!__classPrivateFieldGet(this, _SkyTabIdService_ids, "f").has(id) || __classPrivateFieldGet(this, _SkyTabIdService_ids, "f").get(id) !== elementId) {
381
- __classPrivateFieldGet(this, _SkyTabIdService_ids, "f").set(id, elementId);
382
- __classPrivateFieldGet(this, _SkyTabIdService_instances, "m", _SkyTabIdService_emitIds).call(this);
383
- }
384
- }
385
- /**
386
- * Disassociates a tab's ID with its parent tablist.
387
- * @param {string} id The ID used to register the tab.
388
- */
389
- unregister(id) {
390
- if (__classPrivateFieldGet(this, _SkyTabIdService_ids, "f").has(id)) {
391
- __classPrivateFieldGet(this, _SkyTabIdService_ids, "f").delete(id);
392
- __classPrivateFieldGet(this, _SkyTabIdService_instances, "m", _SkyTabIdService_emitIds).call(this);
393
- }
394
- }
395
- }
396
- _SkyTabIdService_ids = new WeakMap(), _SkyTabIdService_ids$ = new WeakMap(), _SkyTabIdService_idsObs = new WeakMap(), _SkyTabIdService_instances = new WeakSet(), _SkyTabIdService_emitIds = function _SkyTabIdService_emitIds() {
397
- __classPrivateFieldGet(this, _SkyTabIdService_ids$, "f").next(Array.from(__classPrivateFieldGet(this, _SkyTabIdService_ids, "f").values()));
398
- };
399
- SkyTabIdService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyTabIdService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
400
- SkyTabIdService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyTabIdService });
401
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyTabIdService, decorators: [{
402
- type: Injectable
403
- }], ctorParameters: function () { return []; } });
404
-
405
- var _SkyVerticalTabComponent_instances, _SkyVerticalTabComponent__ariaRole, _SkyVerticalTabComponent__contentRendered, _SkyVerticalTabComponent_tabIdOrDefault, _SkyVerticalTabComponent_defaultTabId, _SkyVerticalTabComponent_mobileSubscription, _SkyVerticalTabComponent_ngUnsubscribe, _SkyVerticalTabComponent_adapterService, _SkyVerticalTabComponent_changeRef, _SkyVerticalTabComponent_tabsetService, _SkyVerticalTabComponent_verticalTabMediaQueryService, _SkyVerticalTabComponent_tabIdSvc, _SkyVerticalTabComponent_updateBreakpointAndResponsiveClass;
406
- let nextId$2 = 0;
407
- class SkyVerticalTabComponent {
408
- /**
409
- * The ARIA role for the vertical tab
410
- * [to support accessibility](https://developer.blackbaud.com/skyux/learn/accessibility)
411
- * by indicating how the tab functions and what it controls. For information about how
412
- * an ARIA role indicates what an item represents on a web page, see the
413
- * [WAI-ARIA roles model](https://www.w3.org/WAI/PF/aria/#roles).
414
- * @default "tab"
415
- * @deprecated Any other value than `tab` could lead to a poor user experience for users with assistive technology.
416
- * In the next major version, this property will be automatically set to `tab`.
417
- */
418
- get ariaRole() {
419
- return __classPrivateFieldGet(this, _SkyVerticalTabComponent__ariaRole, "f");
420
- }
421
- set ariaRole(value) {
422
- __classPrivateFieldSet(this, _SkyVerticalTabComponent__ariaRole, value ?? 'tab', "f");
423
- }
424
- /**
425
- * The ID for the tab.
426
- * @deprecated Now that the vertical tabs provide aria labels automatically, this input is no longer necessary.
427
- */
428
- set tabId(value) {
429
- __classPrivateFieldSet(this, _SkyVerticalTabComponent_tabIdOrDefault, value || __classPrivateFieldGet(this, _SkyVerticalTabComponent_defaultTabId, "f"), "f");
430
- __classPrivateFieldGet(this, _SkyVerticalTabComponent_tabIdSvc, "f")?.register(__classPrivateFieldGet(this, _SkyVerticalTabComponent_defaultTabId, "f"), __classPrivateFieldGet(this, _SkyVerticalTabComponent_tabIdOrDefault, "f"));
431
- }
432
- get tabId() {
433
- return __classPrivateFieldGet(this, _SkyVerticalTabComponent_tabIdOrDefault, "f");
434
- }
435
- set contentRendered(value) {
436
- __classPrivateFieldSet(this, _SkyVerticalTabComponent__contentRendered, value, "f");
437
- /* istanbul ignore else */
438
- if (__classPrivateFieldGet(this, _SkyVerticalTabComponent__contentRendered, "f")) {
439
- // NOTE: Wrapped in a setTimeout here to ensure that everything has completed rendering.
440
- setTimeout(() => {
441
- if (this.tabContent) {
442
- __classPrivateFieldGet(this, _SkyVerticalTabComponent_instances, "m", _SkyVerticalTabComponent_updateBreakpointAndResponsiveClass).call(this);
443
- }
444
- });
445
- }
446
- }
447
- get contentRendered() {
448
- return __classPrivateFieldGet(this, _SkyVerticalTabComponent__contentRendered, "f");
449
- }
450
- constructor(adapterService, changeRef, tabsetService, verticalTabMediaQueryService, tabIdSvc) {
451
- _SkyVerticalTabComponent_instances.add(this);
452
- /**
453
- * Whether the tab is active when the tabset loads.
454
- */
455
- this.active = false;
456
- /**
457
- * Whether to disable the tab.
458
- */
459
- this.disabled = false;
460
- /**
461
- * Whether to indicate that the tab has an error.
462
- * @internal This is used for sectioned forms and is not currently a supported design for pure vertical tabs.
463
- */
464
- this.errorIndicator = false;
465
- this.isMobile = false;
466
- _SkyVerticalTabComponent__ariaRole.set(this, 'tab');
467
- _SkyVerticalTabComponent__contentRendered.set(this, false);
468
- _SkyVerticalTabComponent_tabIdOrDefault.set(this, void 0);
469
- _SkyVerticalTabComponent_defaultTabId.set(this, void 0);
470
- _SkyVerticalTabComponent_mobileSubscription.set(this, new Subject());
471
- _SkyVerticalTabComponent_ngUnsubscribe.set(this, new Subject());
472
- _SkyVerticalTabComponent_adapterService.set(this, void 0);
473
- _SkyVerticalTabComponent_changeRef.set(this, void 0);
474
- _SkyVerticalTabComponent_tabsetService.set(this, void 0);
475
- _SkyVerticalTabComponent_verticalTabMediaQueryService.set(this, void 0);
476
- _SkyVerticalTabComponent_tabIdSvc.set(this, void 0);
477
- __classPrivateFieldSet(this, _SkyVerticalTabComponent_adapterService, adapterService, "f");
478
- __classPrivateFieldSet(this, _SkyVerticalTabComponent_changeRef, changeRef, "f");
479
- __classPrivateFieldSet(this, _SkyVerticalTabComponent_tabsetService, tabsetService, "f");
480
- __classPrivateFieldSet(this, _SkyVerticalTabComponent_verticalTabMediaQueryService, verticalTabMediaQueryService, "f");
481
- __classPrivateFieldSet(this, _SkyVerticalTabComponent_tabIdSvc, tabIdSvc, "f");
482
- __classPrivateFieldSet(this, _SkyVerticalTabComponent_tabIdOrDefault, __classPrivateFieldSet(this, _SkyVerticalTabComponent_defaultTabId, `sky-vertical-tab-${++nextId$2}`, "f"), "f");
483
- this.tabId = __classPrivateFieldGet(this, _SkyVerticalTabComponent_defaultTabId, "f");
484
- }
485
- ngOnInit() {
486
- this.isMobile = __classPrivateFieldGet(this, _SkyVerticalTabComponent_tabsetService, "f").isMobile();
487
- __classPrivateFieldGet(this, _SkyVerticalTabComponent_changeRef, "f").markForCheck();
488
- __classPrivateFieldGet(this, _SkyVerticalTabComponent_tabsetService, "f").switchingMobile.subscribe((mobile) => {
489
- this.isMobile = mobile;
490
- __classPrivateFieldGet(this, _SkyVerticalTabComponent_changeRef, "f").markForCheck();
491
- });
492
- // Update the breakpoint and responsive class here just as a sanity check since we can not
493
- // watch for element resizing.
494
- __classPrivateFieldGet(this, _SkyVerticalTabComponent_tabsetService, "f").indexChanged
495
- .pipe(takeUntil(__classPrivateFieldGet(this, _SkyVerticalTabComponent_ngUnsubscribe, "f")))
496
- .subscribe((index) => {
497
- if (this.index === index && this.contentRendered) {
498
- if (this.tabContent) {
499
- __classPrivateFieldGet(this, _SkyVerticalTabComponent_instances, "m", _SkyVerticalTabComponent_updateBreakpointAndResponsiveClass).call(this);
500
- }
501
- }
502
- });
503
- __classPrivateFieldGet(this, _SkyVerticalTabComponent_tabsetService, "f").addTab(this);
504
- }
505
- ngOnDestroy() {
506
- __classPrivateFieldGet(this, _SkyVerticalTabComponent_tabIdSvc, "f")?.unregister(__classPrivateFieldGet(this, _SkyVerticalTabComponent_defaultTabId, "f"));
507
- __classPrivateFieldGet(this, _SkyVerticalTabComponent_mobileSubscription, "f").unsubscribe();
508
- __classPrivateFieldGet(this, _SkyVerticalTabComponent_ngUnsubscribe, "f").next();
509
- __classPrivateFieldGet(this, _SkyVerticalTabComponent_ngUnsubscribe, "f").complete();
510
- __classPrivateFieldGet(this, _SkyVerticalTabComponent_tabsetService, "f").destroyTab(this);
511
- }
512
- tabIndex() {
513
- if (!this.disabled) {
514
- return 0;
515
- }
516
- else {
517
- return -1;
518
- }
519
- }
520
- activateTab() {
521
- if (!this.disabled) {
522
- this.active = true;
523
- __classPrivateFieldGet(this, _SkyVerticalTabComponent_tabsetService, "f").activateTab(this);
524
- __classPrivateFieldGet(this, _SkyVerticalTabComponent_changeRef, "f").markForCheck();
525
- }
526
- }
527
- onTabButtonKeyUp(event) {
528
- /*istanbul ignore else */
529
- if (event.key) {
530
- switch (event.key.toUpperCase()) {
531
- case ' ':
532
- case 'ENTER':
533
- this.activateTab();
534
- event.stopPropagation();
535
- break;
536
- /* istanbul ignore next */
537
- default:
538
- break;
539
- }
540
- }
541
- }
542
- onWindowResize() {
543
- if (this.tabContent) {
544
- __classPrivateFieldGet(this, _SkyVerticalTabComponent_instances, "m", _SkyVerticalTabComponent_updateBreakpointAndResponsiveClass).call(this);
545
- }
546
- }
547
- tabDeactivated() {
548
- __classPrivateFieldGet(this, _SkyVerticalTabComponent_changeRef, "f").markForCheck();
549
- }
550
- }
551
- _SkyVerticalTabComponent__ariaRole = new WeakMap(), _SkyVerticalTabComponent__contentRendered = new WeakMap(), _SkyVerticalTabComponent_tabIdOrDefault = new WeakMap(), _SkyVerticalTabComponent_defaultTabId = new WeakMap(), _SkyVerticalTabComponent_mobileSubscription = new WeakMap(), _SkyVerticalTabComponent_ngUnsubscribe = new WeakMap(), _SkyVerticalTabComponent_adapterService = new WeakMap(), _SkyVerticalTabComponent_changeRef = new WeakMap(), _SkyVerticalTabComponent_tabsetService = new WeakMap(), _SkyVerticalTabComponent_verticalTabMediaQueryService = new WeakMap(), _SkyVerticalTabComponent_tabIdSvc = new WeakMap(), _SkyVerticalTabComponent_instances = new WeakSet(), _SkyVerticalTabComponent_updateBreakpointAndResponsiveClass = function _SkyVerticalTabComponent_updateBreakpointAndResponsiveClass() {
552
- if (this.tabContent) {
553
- const width = __classPrivateFieldGet(this, _SkyVerticalTabComponent_adapterService, "f").getWidth(this.tabContent);
554
- __classPrivateFieldGet(this, _SkyVerticalTabComponent_verticalTabMediaQueryService, "f").setBreakpointForWidth(width);
555
- const newBreakpoint = __classPrivateFieldGet(this, _SkyVerticalTabComponent_verticalTabMediaQueryService, "f").current;
556
- if (newBreakpoint) {
557
- __classPrivateFieldGet(this, _SkyVerticalTabComponent_adapterService, "f").setResponsiveClass(this.tabContent, newBreakpoint);
558
- }
559
- __classPrivateFieldGet(this, _SkyVerticalTabComponent_changeRef, "f").markForCheck();
560
- }
561
- };
562
- SkyVerticalTabComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyVerticalTabComponent, deps: [{ token: SkyVerticalTabsetAdapterService }, { token: i0.ChangeDetectorRef }, { token: SkyVerticalTabsetService }, { token: SkyVerticalTabMediaQueryService }, { token: SkyTabIdService, optional: true }], target: i0.ɵɵFactoryTarget.Component });
563
- SkyVerticalTabComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: SkyVerticalTabComponent, selector: "sky-vertical-tab", inputs: { active: "active", ariaControls: "ariaControls", ariaRole: "ariaRole", disabled: "disabled", errorIndicator: "errorIndicator", tabHeaderCount: "tabHeaderCount", tabHeading: "tabHeading", showTabRightArrow: "showTabRightArrow", tabId: "tabId" }, host: { listeners: { "window:resize": "onWindowResize()" } }, providers: [
564
- SkyVerticalTabMediaQueryService,
565
- {
566
- provide: SkyMediaQueryService,
567
- useExisting: SkyVerticalTabMediaQueryService,
568
- },
569
- ], viewQueries: [{ propertyName: "tabContent", first: true, predicate: ["tabContentWrapper"], descendants: true }], ngImport: i0, template: "<a\n class=\"sky-vertical-tab\"\n [attr.aria-controls]=\"isMobile ? null : ariaControls || tabContentPane.id\"\n [attr.aria-selected]=\"active\"\n [attr.id]=\"tabId\"\n [attr.role]=\"isMobile ? undefined : ariaRole\"\n [ngClass]=\"{\n 'sky-vertical-tab-active': active,\n 'sky-vertical-tab-disabled': disabled,\n 'sky-font-deemphasized': disabled,\n 'sky-deemphasized': disabled\n }\"\n [tabIndex]=\"tabIndex()\"\n (click)=\"activateTab()\"\n (keyup)=\"onTabButtonKeyUp($event)\"\n>\n <div class=\"sky-vertical-tab-display\">\n <div class=\"sky-vertical-tab-heading\">\n <span class=\"sky-vertical-tab-heading-value\">{{ tabHeading }}</span>\n <span\n class=\"sky-vertical-tab-count\"\n *ngIf=\"tabHeaderCount || tabHeaderCount === 0\"\n >\n ({{ tabHeaderCount }})\n </span>\n </div>\n <sky-status-indicator\n *ngIf=\"errorIndicator\"\n class=\"sky-vertical-tab-heading-error\"\n descriptionType=\"error\"\n indicatorType=\"danger\"\n ></sky-status-indicator>\n <sky-icon\n *ngIf=\"isMobile && showTabRightArrow\"\n class=\"sky-vertical-tab-right-arrow\"\n icon=\"chevron-right\"\n >\n </sky-icon>\n </div>\n</a>\n\n<div #tabContentWrapper>\n <div\n class=\"sky-vertical-tab-content-pane\"\n role=\"tabpanel\"\n tabindex=\"0\"\n skyId\n [attr.aria-labelledby]=\"tabId\"\n [ngClass]=\"{ 'sky-vertical-tab-hidden': !active }\"\n #tabContentPane\n >\n <ng-content></ng-content>\n\n <div></div>\n </div>\n</div>\n", styles: [".sky-vertical-tab{cursor:pointer;padding:7px 0 7px 10px;margin:5px 0 5px 10px;display:flex;text-decoration:none}.sky-vertical-tab:not(.sky-deemphasized){color:#212327}.sky-vertical-tab:hover{background-color:#eeeeef}.sky-vertical-tab:focus-visible{outline:thin dotted;outline:-webkit-focus-ring-color auto 5px}.sky-vertical-tab:hover .sky-vertical-tab-right-arrow{color:#979ba2}.sky-vertical-tab-active{background-color:#eeeeef;color:#212327;padding-left:6px;border-left:4px solid #00b4f1}.sky-vertical-tab-hidden{display:none}.sky-vertical-tab-display{display:flex;flex-grow:1}.sky-vertical-tab-heading-error{padding-left:5px}.sky-vertical-tab-count{margin-left:5px}.sky-vertical-tab-disabled{cursor:not-allowed;pointer-events:none}.sky-vertical-tab-right-arrow{padding:3px 10px 0 0;color:#cdcfd2}:host-context(.sky-theme-modern) .sky-vertical-tab{color:#686c73;cursor:pointer;padding:10px 0 10px 10px;margin:10px 0 20px 10px}:host-context(.sky-theme-modern) .sky-vertical-tab:not(.sky-vertical-tab-active):not(:active):hover{color:#212327;background-color:transparent;padding-left:9px;border-left:1px solid #00b4f1}:host-context(.sky-theme-modern) .sky-vertical-tab:not(:active):focus-visible{outline:solid 2px #1870B8;outline-offset:-2px;box-shadow:0 1px 8px #0000004d}:host-context(.sky-theme-modern) .sky-vertical-tab:focus:active:hover{outline:none;background:none}:host-context(.sky-theme-modern) .sky-vertical-tab:active{border-left:3px solid #00b4f1;color:#212327;padding-left:7px}:host-context(.sky-theme-modern) .sky-vertical-tab .sky-vertical-tab-heading-error{padding-left:10px;position:relative;top:-2px}:host-context(.sky-theme-modern) .sky-vertical-tab-active{background:none;color:#212327;padding-left:7px;border-left:3px solid #1870B8}.sky-theme-modern .sky-vertical-tab{color:#686c73;cursor:pointer;padding:10px 0 10px 10px;margin:10px 0 20px 10px}.sky-theme-modern .sky-vertical-tab:not(.sky-vertical-tab-active):not(:active):hover{color:#212327;background-color:transparent;padding-left:9px;border-left:1px solid #00b4f1}.sky-theme-modern .sky-vertical-tab:not(:active):focus-visible{outline:solid 2px #1870B8;outline-offset:-2px;box-shadow:0 1px 8px #0000004d}.sky-theme-modern .sky-vertical-tab:focus:active:hover{outline:none;background:none}.sky-theme-modern .sky-vertical-tab:active{border-left:3px solid #00b4f1;color:#212327;padding-left:7px}.sky-theme-modern .sky-vertical-tab .sky-vertical-tab-heading-error{padding-left:10px;position:relative;top:-2px}.sky-theme-modern .sky-vertical-tab-active{background:none;color:#212327;padding-left:7px;border-left:3px solid #1870B8}\n"], dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i6.λ4, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }, { kind: "directive", type: i1.λ2, selector: "[skyId]", exportAs: ["skyId"] }, { kind: "component", type: i6.λ10, selector: "sky-status-indicator", inputs: ["indicatorType", "descriptionType", "customDescription"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
570
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyVerticalTabComponent, decorators: [{
571
- type: Component,
572
- args: [{ selector: 'sky-vertical-tab', providers: [
573
- SkyVerticalTabMediaQueryService,
574
- {
575
- provide: SkyMediaQueryService,
576
- useExisting: SkyVerticalTabMediaQueryService,
577
- },
578
- ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<a\n class=\"sky-vertical-tab\"\n [attr.aria-controls]=\"isMobile ? null : ariaControls || tabContentPane.id\"\n [attr.aria-selected]=\"active\"\n [attr.id]=\"tabId\"\n [attr.role]=\"isMobile ? undefined : ariaRole\"\n [ngClass]=\"{\n 'sky-vertical-tab-active': active,\n 'sky-vertical-tab-disabled': disabled,\n 'sky-font-deemphasized': disabled,\n 'sky-deemphasized': disabled\n }\"\n [tabIndex]=\"tabIndex()\"\n (click)=\"activateTab()\"\n (keyup)=\"onTabButtonKeyUp($event)\"\n>\n <div class=\"sky-vertical-tab-display\">\n <div class=\"sky-vertical-tab-heading\">\n <span class=\"sky-vertical-tab-heading-value\">{{ tabHeading }}</span>\n <span\n class=\"sky-vertical-tab-count\"\n *ngIf=\"tabHeaderCount || tabHeaderCount === 0\"\n >\n ({{ tabHeaderCount }})\n </span>\n </div>\n <sky-status-indicator\n *ngIf=\"errorIndicator\"\n class=\"sky-vertical-tab-heading-error\"\n descriptionType=\"error\"\n indicatorType=\"danger\"\n ></sky-status-indicator>\n <sky-icon\n *ngIf=\"isMobile && showTabRightArrow\"\n class=\"sky-vertical-tab-right-arrow\"\n icon=\"chevron-right\"\n >\n </sky-icon>\n </div>\n</a>\n\n<div #tabContentWrapper>\n <div\n class=\"sky-vertical-tab-content-pane\"\n role=\"tabpanel\"\n tabindex=\"0\"\n skyId\n [attr.aria-labelledby]=\"tabId\"\n [ngClass]=\"{ 'sky-vertical-tab-hidden': !active }\"\n #tabContentPane\n >\n <ng-content></ng-content>\n\n <div></div>\n </div>\n</div>\n", styles: [".sky-vertical-tab{cursor:pointer;padding:7px 0 7px 10px;margin:5px 0 5px 10px;display:flex;text-decoration:none}.sky-vertical-tab:not(.sky-deemphasized){color:#212327}.sky-vertical-tab:hover{background-color:#eeeeef}.sky-vertical-tab:focus-visible{outline:thin dotted;outline:-webkit-focus-ring-color auto 5px}.sky-vertical-tab:hover .sky-vertical-tab-right-arrow{color:#979ba2}.sky-vertical-tab-active{background-color:#eeeeef;color:#212327;padding-left:6px;border-left:4px solid #00b4f1}.sky-vertical-tab-hidden{display:none}.sky-vertical-tab-display{display:flex;flex-grow:1}.sky-vertical-tab-heading-error{padding-left:5px}.sky-vertical-tab-count{margin-left:5px}.sky-vertical-tab-disabled{cursor:not-allowed;pointer-events:none}.sky-vertical-tab-right-arrow{padding:3px 10px 0 0;color:#cdcfd2}:host-context(.sky-theme-modern) .sky-vertical-tab{color:#686c73;cursor:pointer;padding:10px 0 10px 10px;margin:10px 0 20px 10px}:host-context(.sky-theme-modern) .sky-vertical-tab:not(.sky-vertical-tab-active):not(:active):hover{color:#212327;background-color:transparent;padding-left:9px;border-left:1px solid #00b4f1}:host-context(.sky-theme-modern) .sky-vertical-tab:not(:active):focus-visible{outline:solid 2px #1870B8;outline-offset:-2px;box-shadow:0 1px 8px #0000004d}:host-context(.sky-theme-modern) .sky-vertical-tab:focus:active:hover{outline:none;background:none}:host-context(.sky-theme-modern) .sky-vertical-tab:active{border-left:3px solid #00b4f1;color:#212327;padding-left:7px}:host-context(.sky-theme-modern) .sky-vertical-tab .sky-vertical-tab-heading-error{padding-left:10px;position:relative;top:-2px}:host-context(.sky-theme-modern) .sky-vertical-tab-active{background:none;color:#212327;padding-left:7px;border-left:3px solid #1870B8}.sky-theme-modern .sky-vertical-tab{color:#686c73;cursor:pointer;padding:10px 0 10px 10px;margin:10px 0 20px 10px}.sky-theme-modern .sky-vertical-tab:not(.sky-vertical-tab-active):not(:active):hover{color:#212327;background-color:transparent;padding-left:9px;border-left:1px solid #00b4f1}.sky-theme-modern .sky-vertical-tab:not(:active):focus-visible{outline:solid 2px #1870B8;outline-offset:-2px;box-shadow:0 1px 8px #0000004d}.sky-theme-modern .sky-vertical-tab:focus:active:hover{outline:none;background:none}.sky-theme-modern .sky-vertical-tab:active{border-left:3px solid #00b4f1;color:#212327;padding-left:7px}.sky-theme-modern .sky-vertical-tab .sky-vertical-tab-heading-error{padding-left:10px;position:relative;top:-2px}.sky-theme-modern .sky-vertical-tab-active{background:none;color:#212327;padding-left:7px;border-left:3px solid #1870B8}\n"] }]
579
- }], ctorParameters: function () { return [{ type: SkyVerticalTabsetAdapterService }, { type: i0.ChangeDetectorRef }, { type: SkyVerticalTabsetService }, { type: SkyVerticalTabMediaQueryService }, { type: SkyTabIdService, decorators: [{
580
- type: Optional
581
- }] }]; }, propDecorators: { active: [{
582
- type: Input
583
- }], ariaControls: [{
584
- type: Input
585
- }], ariaRole: [{
586
- type: Input
587
- }], disabled: [{
588
- type: Input
589
- }], errorIndicator: [{
590
- type: Input
591
- }], tabHeaderCount: [{
592
- type: Input
593
- }], tabHeading: [{
594
- type: Input
595
- }], showTabRightArrow: [{
596
- type: Input
597
- }], tabId: [{
598
- type: Input
599
- }], tabContent: [{
600
- type: ViewChild,
601
- args: ['tabContentWrapper']
602
- }], onWindowResize: [{
603
- type: HostListener,
604
- args: ['window:resize']
605
- }] } });
606
-
607
- var _SkyVerticalTabsetGroupComponent_instances, _SkyVerticalTabsetGroupComponent_ngUnsubscribe, _SkyVerticalTabsetGroupComponent_tabService, _SkyVerticalTabsetGroupComponent_changeRef, _SkyVerticalTabsetGroupComponent__disabled, _SkyVerticalTabsetGroupComponent__open, _SkyVerticalTabsetGroupComponent_updateSlideDirection;
608
- class SkyVerticalTabsetGroupComponent {
609
- /**
610
- * Whether to disable the ability to expand and collapse the group.
611
- * @default false
612
- */
613
- set disabled(value) {
614
- __classPrivateFieldSet(this, _SkyVerticalTabsetGroupComponent__disabled, value, "f");
615
- __classPrivateFieldGet(this, _SkyVerticalTabsetGroupComponent_instances, "m", _SkyVerticalTabsetGroupComponent_updateSlideDirection).call(this, false);
616
- }
617
- get disabled() {
618
- return __classPrivateFieldGet(this, _SkyVerticalTabsetGroupComponent__disabled, "f");
619
- }
620
- /**
621
- * Whether the collapsible group is expanded.
622
- * @default false
623
- */
624
- set open(value) {
625
- __classPrivateFieldSet(this, _SkyVerticalTabsetGroupComponent__open, value, "f");
626
- __classPrivateFieldGet(this, _SkyVerticalTabsetGroupComponent_instances, "m", _SkyVerticalTabsetGroupComponent_updateSlideDirection).call(this, false);
627
- }
628
- get open() {
629
- return __classPrivateFieldGet(this, _SkyVerticalTabsetGroupComponent__open, "f");
630
- }
631
- constructor(tabService, changeRef) {
632
- _SkyVerticalTabsetGroupComponent_instances.add(this);
633
- this.animationDisabled = false;
634
- this.slideDirection = 'up';
635
- _SkyVerticalTabsetGroupComponent_ngUnsubscribe.set(this, new Subject());
636
- _SkyVerticalTabsetGroupComponent_tabService.set(this, void 0);
637
- _SkyVerticalTabsetGroupComponent_changeRef.set(this, void 0);
638
- _SkyVerticalTabsetGroupComponent__disabled.set(this, void 0);
639
- _SkyVerticalTabsetGroupComponent__open.set(this, void 0);
640
- this.tabClicked = () => {
641
- __classPrivateFieldGet(this, _SkyVerticalTabsetGroupComponent_changeRef, "f").markForCheck();
642
- };
643
- this.tabsHidden = () => {
644
- // Angular will sometimes place the animation into the "void" state when tabs are hidden. Update our internal variable to reflect that.
645
- this.slideDirection = 'void';
646
- __classPrivateFieldGet(this, _SkyVerticalTabsetGroupComponent_changeRef, "f").markForCheck();
647
- };
648
- this.tabsShown = () => {
649
- // Set the animation back up so that the "void" state is returned to where it was prior to the tabs being hidden.
650
- // This will be instantaneous due to there not being a "void -> *" state on the slide animation.
651
- __classPrivateFieldGet(this, _SkyVerticalTabsetGroupComponent_instances, "m", _SkyVerticalTabsetGroupComponent_updateSlideDirection).call(this, true);
652
- __classPrivateFieldGet(this, _SkyVerticalTabsetGroupComponent_changeRef, "f").markForCheck();
653
- };
654
- __classPrivateFieldSet(this, _SkyVerticalTabsetGroupComponent_tabService, tabService, "f");
655
- __classPrivateFieldSet(this, _SkyVerticalTabsetGroupComponent_changeRef, changeRef, "f");
656
- }
657
- ngOnInit() {
658
- __classPrivateFieldGet(this, _SkyVerticalTabsetGroupComponent_tabService, "f").hidingTabs
659
- .pipe(takeUntil(__classPrivateFieldGet(this, _SkyVerticalTabsetGroupComponent_ngUnsubscribe, "f")))
660
- .subscribe(this.tabsHidden);
661
- __classPrivateFieldGet(this, _SkyVerticalTabsetGroupComponent_tabService, "f").showingTabs
662
- .pipe(takeUntil(__classPrivateFieldGet(this, _SkyVerticalTabsetGroupComponent_ngUnsubscribe, "f")))
663
- .subscribe(this.tabsShown);
664
- __classPrivateFieldGet(this, _SkyVerticalTabsetGroupComponent_tabService, "f").tabClicked
665
- .pipe(takeUntil(__classPrivateFieldGet(this, _SkyVerticalTabsetGroupComponent_ngUnsubscribe, "f")))
666
- .subscribe(this.tabClicked);
667
- }
668
- ngOnDestroy() {
669
- __classPrivateFieldGet(this, _SkyVerticalTabsetGroupComponent_ngUnsubscribe, "f").next();
670
- __classPrivateFieldGet(this, _SkyVerticalTabsetGroupComponent_ngUnsubscribe, "f").complete();
671
- }
672
- updateSlideDirection(event) {
673
- this.slideDirection = event.toState;
674
- }
675
- toggleMenuOpen() {
676
- if (!this.disabled) {
677
- this.open = !this.open;
678
- }
679
- __classPrivateFieldGet(this, _SkyVerticalTabsetGroupComponent_instances, "m", _SkyVerticalTabsetGroupComponent_updateSlideDirection).call(this, true);
680
- __classPrivateFieldGet(this, _SkyVerticalTabsetGroupComponent_changeRef, "f").markForCheck();
681
- }
682
- subMenuOpen() {
683
- return !!this.tabs && this.tabs.find((t) => !!t.active) !== undefined;
684
- }
685
- }
686
- _SkyVerticalTabsetGroupComponent_ngUnsubscribe = new WeakMap(), _SkyVerticalTabsetGroupComponent_tabService = new WeakMap(), _SkyVerticalTabsetGroupComponent_changeRef = new WeakMap(), _SkyVerticalTabsetGroupComponent__disabled = new WeakMap(), _SkyVerticalTabsetGroupComponent__open = new WeakMap(), _SkyVerticalTabsetGroupComponent_instances = new WeakSet(), _SkyVerticalTabsetGroupComponent_updateSlideDirection = function _SkyVerticalTabsetGroupComponent_updateSlideDirection(animate) {
687
- this.animationDisabled = !animate;
688
- this.slideDirection = this.open && !this.disabled ? 'down' : 'up';
689
- };
690
- SkyVerticalTabsetGroupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyVerticalTabsetGroupComponent, deps: [{ token: SkyVerticalTabsetService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
691
- SkyVerticalTabsetGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: SkyVerticalTabsetGroupComponent, selector: "sky-vertical-tabset-group", inputs: { disabled: "disabled", groupHeading: "groupHeading", open: "open" }, queries: [{ propertyName: "tabs", predicate: SkyVerticalTabComponent }], ngImport: i0, template: "<div class=\"sky-vertical-tabset-group\">\n <!-- [ngClass] includes font classes for both modern and default styles -->\n <div\n class=\"sky-vertical-tabset-group-header\"\n [ngClass]=\"{\n 'sky-vertical-tabset-group-header-sub-open sky-font-emphasized':\n subMenuOpen(),\n 'sky-font-deemphasized': disabled,\n 'sky-deemphasized': disabled,\n 'sky-vertical-tabset-disabled': disabled\n }\"\n [tabIndex]=\"-1\"\n >\n <button\n class=\"sky-padding-even-default\"\n type=\"button\"\n skyId\n [attr.aria-controls]=\"groupContent.id\"\n [attr.aria-expanded]=\"!disabled && open\"\n (click)=\"toggleMenuOpen()\"\n #groupHeadingButton\n >\n {{ groupHeading }}\n <sky-expansion-indicator\n class=\"sky-vertical-tabset-group-expansion-indicator\"\n [direction]=\"!disabled && open ? 'up' : 'down'\"\n >\n </sky-expansion-indicator>\n </button>\n </div>\n <div\n class=\"sky-vertical-tabset-group-content\"\n skyId\n [attr.labelledby]=\"groupHeadingButton.id\"\n [@.disabled]=\"animationDisabled\"\n [@skyAnimationSlide]=\"slideDirection\"\n (@skyAnimationSlide.done)=\"updateSlideDirection($event)\"\n #groupContent\n >\n <ng-content></ng-content>\n </div>\n</div>\n", styles: [".sky-vertical-tabset-group{border-bottom:1px solid #e2e3e4;margin:5px 0 5px 5px}.sky-vertical-tabset-group-header button{cursor:pointer;display:flex;justify-content:space-between;border:none;width:100%;text-align:left;background:none}.sky-vertical-tabset-group-content{overflow:hidden;border-top:1px solid #e2e3e4}:host ::ng-deep .sky-vertical-tabset-group-expansion-indicator>button{font-size:14px!important}.sky-vertical-tabset-disabled{cursor:not-allowed;pointer-events:none}:host-context(.sky-theme-modern) .sky-vertical-tabset-group{border:none;margin:10px 0}:host-context(.sky-theme-modern) .sky-vertical-tabset-group-content{border:none;padding-left:25px}:host-context(.sky-theme-modern) .sky-vertical-tabset-group-header{position:relative}:host-context(.sky-theme-modern) .sky-vertical-tabset-group-expansion-indicator{position:absolute;top:6px;right:5px}.sky-theme-modern .sky-vertical-tabset-group{border:none;margin:10px 0}.sky-theme-modern .sky-vertical-tabset-group-content{border:none;padding-left:25px}.sky-theme-modern .sky-vertical-tabset-group-header{position:relative}.sky-theme-modern .sky-vertical-tabset-group-expansion-indicator{position:absolute;top:6px;right:5px}\n"], dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.λ2, selector: "[skyId]", exportAs: ["skyId"] }, { kind: "component", type: i6.λ15, selector: "sky-expansion-indicator", inputs: ["direction"] }], animations: [skyAnimationSlide], changeDetection: i0.ChangeDetectionStrategy.OnPush });
692
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyVerticalTabsetGroupComponent, decorators: [{
693
- type: Component,
694
- args: [{ selector: 'sky-vertical-tabset-group', changeDetection: ChangeDetectionStrategy.OnPush, animations: [skyAnimationSlide], template: "<div class=\"sky-vertical-tabset-group\">\n <!-- [ngClass] includes font classes for both modern and default styles -->\n <div\n class=\"sky-vertical-tabset-group-header\"\n [ngClass]=\"{\n 'sky-vertical-tabset-group-header-sub-open sky-font-emphasized':\n subMenuOpen(),\n 'sky-font-deemphasized': disabled,\n 'sky-deemphasized': disabled,\n 'sky-vertical-tabset-disabled': disabled\n }\"\n [tabIndex]=\"-1\"\n >\n <button\n class=\"sky-padding-even-default\"\n type=\"button\"\n skyId\n [attr.aria-controls]=\"groupContent.id\"\n [attr.aria-expanded]=\"!disabled && open\"\n (click)=\"toggleMenuOpen()\"\n #groupHeadingButton\n >\n {{ groupHeading }}\n <sky-expansion-indicator\n class=\"sky-vertical-tabset-group-expansion-indicator\"\n [direction]=\"!disabled && open ? 'up' : 'down'\"\n >\n </sky-expansion-indicator>\n </button>\n </div>\n <div\n class=\"sky-vertical-tabset-group-content\"\n skyId\n [attr.labelledby]=\"groupHeadingButton.id\"\n [@.disabled]=\"animationDisabled\"\n [@skyAnimationSlide]=\"slideDirection\"\n (@skyAnimationSlide.done)=\"updateSlideDirection($event)\"\n #groupContent\n >\n <ng-content></ng-content>\n </div>\n</div>\n", styles: [".sky-vertical-tabset-group{border-bottom:1px solid #e2e3e4;margin:5px 0 5px 5px}.sky-vertical-tabset-group-header button{cursor:pointer;display:flex;justify-content:space-between;border:none;width:100%;text-align:left;background:none}.sky-vertical-tabset-group-content{overflow:hidden;border-top:1px solid #e2e3e4}:host ::ng-deep .sky-vertical-tabset-group-expansion-indicator>button{font-size:14px!important}.sky-vertical-tabset-disabled{cursor:not-allowed;pointer-events:none}:host-context(.sky-theme-modern) .sky-vertical-tabset-group{border:none;margin:10px 0}:host-context(.sky-theme-modern) .sky-vertical-tabset-group-content{border:none;padding-left:25px}:host-context(.sky-theme-modern) .sky-vertical-tabset-group-header{position:relative}:host-context(.sky-theme-modern) .sky-vertical-tabset-group-expansion-indicator{position:absolute;top:6px;right:5px}.sky-theme-modern .sky-vertical-tabset-group{border:none;margin:10px 0}.sky-theme-modern .sky-vertical-tabset-group-content{border:none;padding-left:25px}.sky-theme-modern .sky-vertical-tabset-group-header{position:relative}.sky-theme-modern .sky-vertical-tabset-group-expansion-indicator{position:absolute;top:6px;right:5px}\n"] }]
695
- }], ctorParameters: function () { return [{ type: SkyVerticalTabsetService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { disabled: [{
696
- type: Input
697
- }], groupHeading: [{
698
- type: Input
699
- }], open: [{
700
- type: Input
701
- }], tabs: [{
702
- type: ContentChildren,
703
- args: [SkyVerticalTabComponent]
704
- }] } });
705
-
706
- var _SkyVerticalTabsetComponent_ngUnsubscribe, _SkyVerticalTabsetComponent__ariaRole, _SkyVerticalTabsetComponent_resources, _SkyVerticalTabsetComponent_changeRef, _SkyVerticalTabsetComponent_tabIdSvc;
707
- class SkyVerticalTabsetComponent {
708
- /**
709
- * The ARIA role for the vertical tabset
710
- * [to support accessibility](https://developer.blackbaud.com/skyux/learn/accessibility)
711
- * by indicating how the tabset functions and what it controls. For information about how
712
- * an ARIA role indicates what an item represents on a web page, see the
713
- * [WAI-ARIA roles model](https://www.w3.org/WAI/PF/aria/#roles).
714
- * @default "tablist"
715
- * @deprecated Any other value than `tablist` could lead to a poor user experience for users with assistive technology.
716
- * In the next major version, this property will be automatically set to `tablist`.
717
- */
718
- get ariaRole() {
719
- return __classPrivateFieldGet(this, _SkyVerticalTabsetComponent__ariaRole, "f");
720
- }
721
- set ariaRole(value) {
722
- __classPrivateFieldSet(this, _SkyVerticalTabsetComponent__ariaRole, value ?? 'tablist', "f");
723
- }
724
- constructor(adapterService, tabService, resources, changeRef, tabIdSvc) {
725
- this.adapterService = adapterService;
726
- this.tabService = tabService;
727
- /**
728
- * Whether the vertical tabset loads tab content during initialization so that it
729
- * displays content without moving around elements in the content container.
730
- * @default false
731
- */
732
- this.maintainTabContent = false;
733
- /**
734
- * Fires when the active tab changes. Emits the index of the active tab. The
735
- * index is based on the tab's position when it loads.
736
- */
737
- this.activeChange = new EventEmitter();
738
- this.isMobile = false;
739
- _SkyVerticalTabsetComponent_ngUnsubscribe.set(this, new Subject());
740
- _SkyVerticalTabsetComponent__ariaRole.set(this, 'tablist');
741
- _SkyVerticalTabsetComponent_resources.set(this, void 0);
742
- _SkyVerticalTabsetComponent_changeRef.set(this, void 0);
743
- _SkyVerticalTabsetComponent_tabIdSvc.set(this, void 0);
744
- __classPrivateFieldSet(this, _SkyVerticalTabsetComponent_resources, resources, "f");
745
- __classPrivateFieldSet(this, _SkyVerticalTabsetComponent_changeRef, changeRef, "f");
746
- __classPrivateFieldSet(this, _SkyVerticalTabsetComponent_tabIdSvc, tabIdSvc, "f");
747
- __classPrivateFieldGet(this, _SkyVerticalTabsetComponent_tabIdSvc, "f").ids.pipe(takeUntil(__classPrivateFieldGet(this, _SkyVerticalTabsetComponent_ngUnsubscribe, "f"))).subscribe((ids) => {
748
- this.ariaOwns = ids.join(' ') || undefined;
749
- __classPrivateFieldGet(this, _SkyVerticalTabsetComponent_changeRef, "f").markForCheck();
750
- });
751
- }
752
- ngOnInit() {
753
- this.tabService.maintainTabContent = this.maintainTabContent;
754
- this.tabService.indexChanged
755
- .pipe(takeUntil(__classPrivateFieldGet(this, _SkyVerticalTabsetComponent_ngUnsubscribe, "f")))
756
- .subscribe((index) => {
757
- this.activeChange.emit(index);
758
- if (this.contentWrapper) {
759
- this.adapterService.scrollToContentTop(this.contentWrapper);
760
- }
761
- __classPrivateFieldGet(this, _SkyVerticalTabsetComponent_changeRef, "f").markForCheck();
762
- });
763
- this.tabService.switchingMobile
764
- .pipe(takeUntil(__classPrivateFieldGet(this, _SkyVerticalTabsetComponent_ngUnsubscribe, "f")))
765
- .subscribe((mobile) => {
766
- this.isMobile = mobile;
767
- __classPrivateFieldGet(this, _SkyVerticalTabsetComponent_changeRef, "f").markForCheck();
768
- });
769
- if (this.tabService.isMobile()) {
770
- this.isMobile = true;
771
- this.tabService.animationContentVisibleState = VISIBLE_STATE;
772
- __classPrivateFieldGet(this, _SkyVerticalTabsetComponent_changeRef, "f").markForCheck();
773
- }
774
- if (!this.showTabsText) {
775
- __classPrivateFieldGet(this, _SkyVerticalTabsetComponent_resources, "f")
776
- .getString('skyux_vertical_tabs_show_tabs_text')
777
- .pipe(take(1))
778
- .subscribe((resource) => {
779
- /* sanity check */
780
- /* istanbul ignore else */
781
- if (!this.showTabsText) {
782
- this.showTabsText = resource;
783
- }
784
- });
785
- }
786
- }
787
- ngAfterViewChecked() {
788
- this.tabService.content = this.content;
789
- this.tabService.updateContent();
790
- }
791
- ngOnDestroy() {
792
- __classPrivateFieldGet(this, _SkyVerticalTabsetComponent_ngUnsubscribe, "f").next();
793
- __classPrivateFieldGet(this, _SkyVerticalTabsetComponent_ngUnsubscribe, "f").complete();
794
- }
795
- }
796
- _SkyVerticalTabsetComponent_ngUnsubscribe = new WeakMap(), _SkyVerticalTabsetComponent__ariaRole = new WeakMap(), _SkyVerticalTabsetComponent_resources = new WeakMap(), _SkyVerticalTabsetComponent_changeRef = new WeakMap(), _SkyVerticalTabsetComponent_tabIdSvc = new WeakMap();
797
- SkyVerticalTabsetComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyVerticalTabsetComponent, deps: [{ token: SkyVerticalTabsetAdapterService }, { token: SkyVerticalTabsetService }, { token: i3.SkyLibResourcesService }, { token: i0.ChangeDetectorRef }, { token: SkyTabIdService }], target: i0.ɵɵFactoryTarget.Component });
798
- SkyVerticalTabsetComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: SkyVerticalTabsetComponent, selector: "sky-vertical-tabset", inputs: { showTabsText: "showTabsText", ariaLabel: "ariaLabel", ariaLabelledBy: "ariaLabelledBy", ariaRole: "ariaRole", maintainTabContent: "maintainTabContent" }, outputs: { activeChange: "activeChange" }, providers: [SkyTabIdService, SkyVerticalTabsetService], viewQueries: [{ propertyName: "tabGroups", first: true, predicate: ["groupContainerWrapper"], descendants: true }, { propertyName: "content", first: true, predicate: ["skySideContent"], descendants: true }, { propertyName: "contentWrapper", first: true, predicate: ["contentContainerWrapper"], descendants: true }], ngImport: i0, template: "<div class=\"sky-vertical-tabset\">\n <!--\n ARIA rules do not allow tabpanel elements to be children of a tablist element.\n However, the markup for each sky-vertical-tab component includes both the tab button\n and its panel, making the panel element a child of its tablist. Moreover, our\n sky-vertical-tab components can be grouped within collapsible containers, which also\n violates accessibility rules because only tab buttons can be children of a tablist.\n To address this, we create an empty tablist element with an aria-owns attribute,\n pointing to each tab element individually. That way, we don't have to worry about the\n structure for each sky-vertical-tab component in order to satisfy accessibility\n guidelines.\n -->\n <span\n aria-orientation=\"vertical\"\n class=\"sky-vertical-tabset-tablist\"\n [attr.aria-label]=\"ariaLabel\"\n [attr.aria-labelledby]=\"ariaLabelledBy\"\n [attr.aria-owns]=\"ariaOwns\"\n [attr.role]=\"isMobile ? undefined : ariaRole\"\n ></span>\n <div\n *ngIf=\"maintainTabContent || tabService.tabsVisible()\"\n class=\"sky-vertical-tabset-group-container\"\n [@tabGroupEnter]=\"tabService.animationTabsVisibleState\"\n [ngClass]=\"{ 'sky-vertical-tabset-hidden': !tabService.tabsVisible() }\"\n >\n <ng-content></ng-content>\n </div>\n <div\n *ngIf=\"maintainTabContent || tabService.contentVisible()\"\n class=\"sky-vertical-tabset-content\"\n [ngClass]=\"{\n 'sky-vertical-tabset-content-hidden': !tabService.contentVisible()\n }\"\n [@contentEnter]=\"tabService.animationContentVisibleState\"\n #contentContainerWrapper\n >\n <div #skySideContent></div>\n <button\n *ngIf=\"!tabService.tabsVisible()\"\n (click)=\"tabService.showTabs()\"\n class=\"sky-btn sky-btn-primary sky-vertical-tabset-show-tabs-btn\"\n >\n <sky-icon icon=\"chevron-left\"></sky-icon>\n {{ showTabsText }}\n </button>\n </div>\n</div>\n", styles: [":host .sky-vertical-tabset{display:block;height:auto}:host .sky-vertical-tabset-group-container{border-right:none}:host-context(.sky-responsive-container-xs) .sky-vertical-tabset,:host-context(.sky-responsive-container-sm) .sky-vertical-tabset,:host-context(.sky-responsive-container-md) .sky-vertical-tabset,:host-context(.sky-responsive-container-lg) .sky-vertical-tabset{display:block;height:auto}:host-context(.sky-responsive-container-xs) .sky-vertical-tabset-group-container,:host-context(.sky-responsive-container-sm) .sky-vertical-tabset-group-container,:host-context(.sky-responsive-container-md) .sky-vertical-tabset-group-container,:host-context(.sky-responsive-container-lg) .sky-vertical-tabset-group-container{border-right:none}@media (min-width: 768px){:host .sky-vertical-tabset{display:flex;height:100%}:host .sky-vertical-tabset-group-container{border-right:1px solid #cdcfd2}}:host-context(.sky-responsive-container-sm) .sky-vertical-tabset,:host-context(.sky-responsive-container-md) .sky-vertical-tabset,:host-context(.sky-responsive-container-lg) .sky-vertical-tabset{display:flex;height:100%}:host-context(.sky-responsive-container-sm) .sky-vertical-tabset-group-container,:host-context(.sky-responsive-container-md) .sky-vertical-tabset-group-container,:host-context(.sky-responsive-container-lg) .sky-vertical-tabset-group-container{border-right:1px solid #cdcfd2}.sky-vertical-tabset-hidden{display:none}.sky-vertical-tabset-content{margin:10px 0 0 10px;flex-basis:75%;overflow-y:auto}.sky-vertical-tabset-content-hidden{display:none}.sky-vertical-tabset-show-tabs-btn{margin-top:10px}.sky-vertical-tabset-group-container{flex-basis:25%;overflow-y:auto}:host-context(sky-modal-content)>.sky-vertical-tabset{margin:-15px}:host-context(.sky-theme-modern) .sky-vertical-tabset-content{margin:15px}@media (min-width: 768px){:host-context(.sky-theme-modern) :host .sky-vertical-tabset-content{margin:20px 30px}:host-context(.sky-theme-modern) :host .sky-vertical-tabset-group-container{border-right:1px solid #d2d2d2}}:host-context(.sky-theme-modern) :host-context(.sky-responsive-container-sm) .sky-vertical-tabset-content,:host-context(.sky-theme-modern) :host-context(.sky-responsive-container-md) .sky-vertical-tabset-content,:host-context(.sky-theme-modern) :host-context(.sky-responsive-container-lg) .sky-vertical-tabset-content{margin:20px 30px}:host-context(.sky-theme-modern) :host-context(.sky-responsive-container-sm) .sky-vertical-tabset-group-container,:host-context(.sky-theme-modern) :host-context(.sky-responsive-container-md) .sky-vertical-tabset-group-container,:host-context(.sky-theme-modern) :host-context(.sky-responsive-container-lg) .sky-vertical-tabset-group-container{border-right:1px solid #d2d2d2}.sky-theme-modern .sky-vertical-tabset-content{margin:15px}@media (min-width: 768px){.sky-theme-modern :host .sky-vertical-tabset-content{margin:20px 30px}.sky-theme-modern :host .sky-vertical-tabset-group-container{border-right:1px solid #d2d2d2}}.sky-theme-modern :host-context(.sky-responsive-container-sm) .sky-vertical-tabset-content,.sky-theme-modern :host-context(.sky-responsive-container-md) .sky-vertical-tabset-content,.sky-theme-modern :host-context(.sky-responsive-container-lg) .sky-vertical-tabset-content{margin:20px 30px}.sky-theme-modern :host-context(.sky-responsive-container-sm) .sky-vertical-tabset-group-container,.sky-theme-modern :host-context(.sky-responsive-container-md) .sky-vertical-tabset-group-container,.sky-theme-modern :host-context(.sky-responsive-container-lg) .sky-vertical-tabset-group-container{border-right:1px solid #d2d2d2}\n"], dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i6.λ4, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }], animations: [
799
- trigger('tabGroupEnter', [
800
- transition(`${HIDDEN_STATE} => ${VISIBLE_STATE}`, [
801
- style({ transform: 'translate(-100%)' }),
802
- animate('150ms ease-in'),
803
- ]),
804
- ]),
805
- trigger('contentEnter', [
806
- transition(`${HIDDEN_STATE} => ${VISIBLE_STATE}`, [
807
- style({ transform: 'translate(100%)' }),
808
- animate('150ms ease-in'),
809
- ]),
810
- ]),
811
- ], changeDetection: i0.ChangeDetectionStrategy.OnPush });
812
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyVerticalTabsetComponent, decorators: [{
813
- type: Component,
814
- args: [{ selector: 'sky-vertical-tabset', providers: [SkyTabIdService, SkyVerticalTabsetService], changeDetection: ChangeDetectionStrategy.OnPush, animations: [
815
- trigger('tabGroupEnter', [
816
- transition(`${HIDDEN_STATE} => ${VISIBLE_STATE}`, [
817
- style({ transform: 'translate(-100%)' }),
818
- animate('150ms ease-in'),
819
- ]),
820
- ]),
821
- trigger('contentEnter', [
822
- transition(`${HIDDEN_STATE} => ${VISIBLE_STATE}`, [
823
- style({ transform: 'translate(100%)' }),
824
- animate('150ms ease-in'),
825
- ]),
826
- ]),
827
- ], template: "<div class=\"sky-vertical-tabset\">\n <!--\n ARIA rules do not allow tabpanel elements to be children of a tablist element.\n However, the markup for each sky-vertical-tab component includes both the tab button\n and its panel, making the panel element a child of its tablist. Moreover, our\n sky-vertical-tab components can be grouped within collapsible containers, which also\n violates accessibility rules because only tab buttons can be children of a tablist.\n To address this, we create an empty tablist element with an aria-owns attribute,\n pointing to each tab element individually. That way, we don't have to worry about the\n structure for each sky-vertical-tab component in order to satisfy accessibility\n guidelines.\n -->\n <span\n aria-orientation=\"vertical\"\n class=\"sky-vertical-tabset-tablist\"\n [attr.aria-label]=\"ariaLabel\"\n [attr.aria-labelledby]=\"ariaLabelledBy\"\n [attr.aria-owns]=\"ariaOwns\"\n [attr.role]=\"isMobile ? undefined : ariaRole\"\n ></span>\n <div\n *ngIf=\"maintainTabContent || tabService.tabsVisible()\"\n class=\"sky-vertical-tabset-group-container\"\n [@tabGroupEnter]=\"tabService.animationTabsVisibleState\"\n [ngClass]=\"{ 'sky-vertical-tabset-hidden': !tabService.tabsVisible() }\"\n >\n <ng-content></ng-content>\n </div>\n <div\n *ngIf=\"maintainTabContent || tabService.contentVisible()\"\n class=\"sky-vertical-tabset-content\"\n [ngClass]=\"{\n 'sky-vertical-tabset-content-hidden': !tabService.contentVisible()\n }\"\n [@contentEnter]=\"tabService.animationContentVisibleState\"\n #contentContainerWrapper\n >\n <div #skySideContent></div>\n <button\n *ngIf=\"!tabService.tabsVisible()\"\n (click)=\"tabService.showTabs()\"\n class=\"sky-btn sky-btn-primary sky-vertical-tabset-show-tabs-btn\"\n >\n <sky-icon icon=\"chevron-left\"></sky-icon>\n {{ showTabsText }}\n </button>\n </div>\n</div>\n", styles: [":host .sky-vertical-tabset{display:block;height:auto}:host .sky-vertical-tabset-group-container{border-right:none}:host-context(.sky-responsive-container-xs) .sky-vertical-tabset,:host-context(.sky-responsive-container-sm) .sky-vertical-tabset,:host-context(.sky-responsive-container-md) .sky-vertical-tabset,:host-context(.sky-responsive-container-lg) .sky-vertical-tabset{display:block;height:auto}:host-context(.sky-responsive-container-xs) .sky-vertical-tabset-group-container,:host-context(.sky-responsive-container-sm) .sky-vertical-tabset-group-container,:host-context(.sky-responsive-container-md) .sky-vertical-tabset-group-container,:host-context(.sky-responsive-container-lg) .sky-vertical-tabset-group-container{border-right:none}@media (min-width: 768px){:host .sky-vertical-tabset{display:flex;height:100%}:host .sky-vertical-tabset-group-container{border-right:1px solid #cdcfd2}}:host-context(.sky-responsive-container-sm) .sky-vertical-tabset,:host-context(.sky-responsive-container-md) .sky-vertical-tabset,:host-context(.sky-responsive-container-lg) .sky-vertical-tabset{display:flex;height:100%}:host-context(.sky-responsive-container-sm) .sky-vertical-tabset-group-container,:host-context(.sky-responsive-container-md) .sky-vertical-tabset-group-container,:host-context(.sky-responsive-container-lg) .sky-vertical-tabset-group-container{border-right:1px solid #cdcfd2}.sky-vertical-tabset-hidden{display:none}.sky-vertical-tabset-content{margin:10px 0 0 10px;flex-basis:75%;overflow-y:auto}.sky-vertical-tabset-content-hidden{display:none}.sky-vertical-tabset-show-tabs-btn{margin-top:10px}.sky-vertical-tabset-group-container{flex-basis:25%;overflow-y:auto}:host-context(sky-modal-content)>.sky-vertical-tabset{margin:-15px}:host-context(.sky-theme-modern) .sky-vertical-tabset-content{margin:15px}@media (min-width: 768px){:host-context(.sky-theme-modern) :host .sky-vertical-tabset-content{margin:20px 30px}:host-context(.sky-theme-modern) :host .sky-vertical-tabset-group-container{border-right:1px solid #d2d2d2}}:host-context(.sky-theme-modern) :host-context(.sky-responsive-container-sm) .sky-vertical-tabset-content,:host-context(.sky-theme-modern) :host-context(.sky-responsive-container-md) .sky-vertical-tabset-content,:host-context(.sky-theme-modern) :host-context(.sky-responsive-container-lg) .sky-vertical-tabset-content{margin:20px 30px}:host-context(.sky-theme-modern) :host-context(.sky-responsive-container-sm) .sky-vertical-tabset-group-container,:host-context(.sky-theme-modern) :host-context(.sky-responsive-container-md) .sky-vertical-tabset-group-container,:host-context(.sky-theme-modern) :host-context(.sky-responsive-container-lg) .sky-vertical-tabset-group-container{border-right:1px solid #d2d2d2}.sky-theme-modern .sky-vertical-tabset-content{margin:15px}@media (min-width: 768px){.sky-theme-modern :host .sky-vertical-tabset-content{margin:20px 30px}.sky-theme-modern :host .sky-vertical-tabset-group-container{border-right:1px solid #d2d2d2}}.sky-theme-modern :host-context(.sky-responsive-container-sm) .sky-vertical-tabset-content,.sky-theme-modern :host-context(.sky-responsive-container-md) .sky-vertical-tabset-content,.sky-theme-modern :host-context(.sky-responsive-container-lg) .sky-vertical-tabset-content{margin:20px 30px}.sky-theme-modern :host-context(.sky-responsive-container-sm) .sky-vertical-tabset-group-container,.sky-theme-modern :host-context(.sky-responsive-container-md) .sky-vertical-tabset-group-container,.sky-theme-modern :host-context(.sky-responsive-container-lg) .sky-vertical-tabset-group-container{border-right:1px solid #d2d2d2}\n"] }]
828
- }], ctorParameters: function () { return [{ type: SkyVerticalTabsetAdapterService }, { type: SkyVerticalTabsetService }, { type: i3.SkyLibResourcesService }, { type: i0.ChangeDetectorRef }, { type: SkyTabIdService }]; }, propDecorators: { showTabsText: [{
829
- type: Input
830
- }], ariaLabel: [{
831
- type: Input
832
- }], ariaLabelledBy: [{
833
- type: Input
834
- }], ariaRole: [{
835
- type: Input
836
- }], maintainTabContent: [{
837
- type: Input
838
- }], activeChange: [{
839
- type: Output
840
- }], tabGroups: [{
841
- type: ViewChild,
842
- args: ['groupContainerWrapper']
843
- }], content: [{
844
- type: ViewChild,
845
- args: ['skySideContent']
846
- }], contentWrapper: [{
847
- type: ViewChild,
848
- args: ['contentContainerWrapper']
849
- }] } });
850
-
851
- class SkyVerticalTabsetModule {
852
- }
853
- SkyVerticalTabsetModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyVerticalTabsetModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
854
- SkyVerticalTabsetModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.9", ngImport: i0, type: SkyVerticalTabsetModule, declarations: [SkyVerticalTabsetComponent,
855
- SkyVerticalTabsetGroupComponent,
856
- SkyVerticalTabComponent], imports: [CommonModule,
857
- SkyIconModule,
858
- SkyIdModule,
859
- SkyExpansionIndicatorModule,
860
- SkyStatusIndicatorModule,
861
- SkyTabsResourcesModule,
862
- SkyThemeModule], exports: [SkyVerticalTabsetComponent,
863
- SkyVerticalTabsetGroupComponent,
864
- SkyVerticalTabComponent] });
865
- SkyVerticalTabsetModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyVerticalTabsetModule, providers: [SkyVerticalTabsetAdapterService], imports: [CommonModule,
866
- SkyIconModule,
867
- SkyIdModule,
868
- SkyExpansionIndicatorModule,
869
- SkyStatusIndicatorModule,
870
- SkyTabsResourcesModule,
871
- SkyThemeModule] });
872
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyVerticalTabsetModule, decorators: [{
873
- type: NgModule,
874
- args: [{
875
- declarations: [
876
- SkyVerticalTabsetComponent,
877
- SkyVerticalTabsetGroupComponent,
878
- SkyVerticalTabComponent,
879
- ],
880
- imports: [
881
- CommonModule,
882
- SkyIconModule,
883
- SkyIdModule,
884
- SkyExpansionIndicatorModule,
885
- SkyStatusIndicatorModule,
886
- SkyTabsResourcesModule,
887
- SkyThemeModule,
888
- ],
889
- providers: [SkyVerticalTabsetAdapterService],
890
- exports: [
891
- SkyVerticalTabsetComponent,
892
- SkyVerticalTabsetGroupComponent,
893
- SkyVerticalTabComponent,
894
- ],
895
- }]
896
- }] });
897
-
898
- class SkySectionedFormService {
899
- constructor() {
900
- /**
901
- * @internal
902
- */
903
- this.invalidChange = new BehaviorSubject(undefined);
904
- /**
905
- * @internal
906
- */
907
- this.requiredChange = new BehaviorSubject(undefined);
908
- }
909
- /**
910
- * Sets the current section's invalid state based on the `isInvalid` parameter.
911
- * This method is used within a `sky-sectioned-form-section` element.
912
- */
913
- invalidFieldChanged(isInvalid) {
914
- this.invalidChange.next(isInvalid);
915
- }
916
- /**
917
- * Sets the current section's required state based on the `isRequired` parameter.
918
- * This method is used within a `sky-sectioned-form-section` element.
919
- */
920
- requiredFieldChanged(isRequired) {
921
- this.requiredChange.next(isRequired);
922
- }
923
- }
924
- SkySectionedFormService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkySectionedFormService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
925
- SkySectionedFormService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkySectionedFormService });
926
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkySectionedFormService, decorators: [{
927
- type: Injectable
928
- }] });
929
-
930
- var _SkySectionedFormSectionComponent_ngUnsubscribe, _SkySectionedFormSectionComponent_sectionedFormService, _SkySectionedFormSectionComponent_tabsetService, _SkySectionedFormSectionComponent_changeRef;
931
- let nextId$1 = 0;
932
- /**
933
- * Creates an individual form to display as a section within the sectioned form.
934
- */
935
- class SkySectionedFormSectionComponent {
936
- constructor(sectionedFormService, tabsetService, changeRef) {
937
- this.sectionTabId = `sky-sectioned-form-tab-${++nextId$1}`;
938
- this.sectionContentId = `sky-sectioned-form-section-${++nextId$1}`;
939
- /**
940
- * Whether the section is active when the form loads.
941
- * @default false
942
- */
943
- this.active = false;
944
- _SkySectionedFormSectionComponent_ngUnsubscribe.set(this, new Subject());
945
- _SkySectionedFormSectionComponent_sectionedFormService.set(this, void 0);
946
- _SkySectionedFormSectionComponent_tabsetService.set(this, void 0);
947
- _SkySectionedFormSectionComponent_changeRef.set(this, void 0);
948
- __classPrivateFieldSet(this, _SkySectionedFormSectionComponent_sectionedFormService, sectionedFormService, "f");
949
- __classPrivateFieldSet(this, _SkySectionedFormSectionComponent_tabsetService, tabsetService, "f");
950
- __classPrivateFieldSet(this, _SkySectionedFormSectionComponent_changeRef, changeRef, "f");
951
- }
952
- ngOnInit() {
953
- __classPrivateFieldGet(this, _SkySectionedFormSectionComponent_changeRef, "f").detectChanges();
954
- __classPrivateFieldGet(this, _SkySectionedFormSectionComponent_tabsetService, "f").switchingMobile.subscribe((mobile) => {
955
- __classPrivateFieldGet(this, _SkySectionedFormSectionComponent_changeRef, "f").detectChanges();
956
- });
957
- __classPrivateFieldGet(this, _SkySectionedFormSectionComponent_sectionedFormService, "f").requiredChange
958
- .pipe(takeUntil(__classPrivateFieldGet(this, _SkySectionedFormSectionComponent_ngUnsubscribe, "f")))
959
- .subscribe((required) => (this.fieldRequired = required));
960
- __classPrivateFieldGet(this, _SkySectionedFormSectionComponent_sectionedFormService, "f").invalidChange
961
- .pipe(takeUntil(__classPrivateFieldGet(this, _SkySectionedFormSectionComponent_ngUnsubscribe, "f")))
962
- .subscribe((invalid) => (this.fieldInvalid = invalid));
963
- }
964
- ngOnDestroy() {
965
- __classPrivateFieldGet(this, _SkySectionedFormSectionComponent_ngUnsubscribe, "f").next();
966
- __classPrivateFieldGet(this, _SkySectionedFormSectionComponent_ngUnsubscribe, "f").complete();
967
- }
968
- }
969
- _SkySectionedFormSectionComponent_ngUnsubscribe = new WeakMap(), _SkySectionedFormSectionComponent_sectionedFormService = new WeakMap(), _SkySectionedFormSectionComponent_tabsetService = new WeakMap(), _SkySectionedFormSectionComponent_changeRef = new WeakMap();
970
- SkySectionedFormSectionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkySectionedFormSectionComponent, deps: [{ token: SkySectionedFormService }, { token: SkyVerticalTabsetService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
971
- SkySectionedFormSectionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: SkySectionedFormSectionComponent, selector: "sky-sectioned-form-section", inputs: { heading: "heading", itemCount: "itemCount", active: "active" }, providers: [SkySectionedFormService], viewQueries: [{ propertyName: "tab", first: true, predicate: SkyVerticalTabComponent, descendants: true }], ngImport: i0, template: "<sky-vertical-tab\n [active]=\"active\"\n [errorIndicator]=\"fieldInvalid\"\n [ngClass]=\"{\n 'sky-tab-field-required': fieldRequired\n }\"\n [showTabRightArrow]=\"true\"\n [tabHeaderCount]=\"itemCount\"\n [tabHeading]=\"heading\"\n [tabId]=\"sectionTabId\"\n>\n <ng-content></ng-content>\n</sky-vertical-tab>\n", styles: [":host .sky-tab-field-required ::ng-deep .sky-vertical-tab-heading:after{content:\"*\";color:var(--sky-highlight-color-danger);padding-left:5px}\n"], dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: SkyVerticalTabComponent, selector: "sky-vertical-tab", inputs: ["active", "ariaControls", "ariaRole", "disabled", "errorIndicator", "tabHeaderCount", "tabHeading", "showTabRightArrow", "tabId"] }] });
972
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkySectionedFormSectionComponent, decorators: [{
973
- type: Component,
974
- args: [{ selector: 'sky-sectioned-form-section', providers: [SkySectionedFormService], template: "<sky-vertical-tab\n [active]=\"active\"\n [errorIndicator]=\"fieldInvalid\"\n [ngClass]=\"{\n 'sky-tab-field-required': fieldRequired\n }\"\n [showTabRightArrow]=\"true\"\n [tabHeaderCount]=\"itemCount\"\n [tabHeading]=\"heading\"\n [tabId]=\"sectionTabId\"\n>\n <ng-content></ng-content>\n</sky-vertical-tab>\n", styles: [":host .sky-tab-field-required ::ng-deep .sky-vertical-tab-heading:after{content:\"*\";color:var(--sky-highlight-color-danger);padding-left:5px}\n"] }]
975
- }], ctorParameters: function () { return [{ type: SkySectionedFormService }, { type: SkyVerticalTabsetService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { heading: [{
976
- type: Input
977
- }], itemCount: [{
978
- type: Input
979
- }], active: [{
980
- type: Input
981
- }], tab: [{
982
- type: ViewChild,
983
- args: [SkyVerticalTabComponent]
984
- }] } });
985
-
986
- var SkySectionedFormMessageType;
987
- (function (SkySectionedFormMessageType) {
988
- SkySectionedFormMessageType[SkySectionedFormMessageType["ShowTabs"] = 1] = "ShowTabs";
989
- })(SkySectionedFormMessageType || (SkySectionedFormMessageType = {}));
990
-
991
- var _SkySectionedFormComponent_instances, _SkySectionedFormComponent_ngUnsubscribe, _SkySectionedFormComponent_messageStreamSub, _SkySectionedFormComponent_changeRef, _SkySectionedFormComponent_tabIdSvc, _SkySectionedFormComponent_logger, _SkySectionedFormComponent__messageStream, _SkySectionedFormComponent_showTabs, _SkySectionedFormComponent_initMessageStream;
992
- /**
993
- * Creates a container for the sectioned forms.
994
- */
995
- class SkySectionedFormComponent {
996
- set messageStream(value) {
997
- __classPrivateFieldSet(this, _SkySectionedFormComponent__messageStream, value || new Subject(), "f");
998
- __classPrivateFieldGet(this, _SkySectionedFormComponent_instances, "m", _SkySectionedFormComponent_initMessageStream).call(this);
999
- }
1000
- get messageStream() {
1001
- return __classPrivateFieldGet(this, _SkySectionedFormComponent__messageStream, "f");
1002
- }
1003
- constructor(tabService, changeRef, tabIdSvc, logger) {
1004
- this.tabService = tabService;
1005
- _SkySectionedFormComponent_instances.add(this);
1006
- /**
1007
- * Whether the sectioned form loads section content during initialization so that it
1008
- * displays content without moving around elements in the content container.
1009
- * @default false
1010
- */
1011
- this.maintainSectionContent = false;
1012
- /**
1013
- * Fires when the active tab changes and emits the index of the active
1014
- * section. The index is based on the section's position when the form loads.
1015
- */
1016
- this.indexChanged = new EventEmitter();
1017
- /**
1018
- * Fires when the sectioned form tabs are shown or hidden.
1019
- */
1020
- this.tabsVisibleChanged = new EventEmitter();
1021
- this.ariaRole = 'tablist';
1022
- _SkySectionedFormComponent_ngUnsubscribe.set(this, new Subject());
1023
- _SkySectionedFormComponent_messageStreamSub.set(this, void 0);
1024
- _SkySectionedFormComponent_changeRef.set(this, void 0);
1025
- _SkySectionedFormComponent_tabIdSvc.set(this, void 0);
1026
- _SkySectionedFormComponent_logger.set(this, void 0);
1027
- _SkySectionedFormComponent__messageStream.set(this, new Subject());
1028
- __classPrivateFieldSet(this, _SkySectionedFormComponent_changeRef, changeRef, "f");
1029
- __classPrivateFieldSet(this, _SkySectionedFormComponent_tabIdSvc, tabIdSvc, "f");
1030
- __classPrivateFieldSet(this, _SkySectionedFormComponent_logger, logger, "f");
1031
- __classPrivateFieldGet(this, _SkySectionedFormComponent_instances, "m", _SkySectionedFormComponent_initMessageStream).call(this);
1032
- __classPrivateFieldGet(this, _SkySectionedFormComponent_tabIdSvc, "f").ids.pipe(takeUntil(__classPrivateFieldGet(this, _SkySectionedFormComponent_ngUnsubscribe, "f"))).subscribe((ids) => {
1033
- this.ariaOwns = ids.join(' ') || undefined;
1034
- __classPrivateFieldGet(this, _SkySectionedFormComponent_changeRef, "f").markForCheck();
1035
- });
1036
- }
1037
- ngOnInit() {
1038
- this.tabService.maintainTabContent = this.maintainSectionContent;
1039
- this.tabService.indexChanged
1040
- .pipe(takeUntil(__classPrivateFieldGet(this, _SkySectionedFormComponent_ngUnsubscribe, "f")))
1041
- .subscribe((index) => {
1042
- this.indexChanged.emit(index);
1043
- __classPrivateFieldGet(this, _SkySectionedFormComponent_changeRef, "f").markForCheck();
1044
- });
1045
- this.tabService.switchingMobile
1046
- .pipe(takeUntil(__classPrivateFieldGet(this, _SkySectionedFormComponent_ngUnsubscribe, "f")))
1047
- .subscribe((mobile) => {
1048
- if (!mobile) {
1049
- this.ariaRole = 'tablist';
1050
- }
1051
- else {
1052
- this.ariaRole = undefined;
1053
- }
1054
- __classPrivateFieldGet(this, _SkySectionedFormComponent_changeRef, "f").markForCheck();
1055
- });
1056
- this.tabService.hidingTabs
1057
- .pipe(takeUntil(__classPrivateFieldGet(this, _SkySectionedFormComponent_ngUnsubscribe, "f")))
1058
- .subscribe(() => {
1059
- this.tabsVisibleChanged.emit(false);
1060
- });
1061
- this.tabService.showingTabs
1062
- .pipe(takeUntil(__classPrivateFieldGet(this, _SkySectionedFormComponent_ngUnsubscribe, "f")))
1063
- .subscribe(() => {
1064
- this.tabsVisibleChanged.emit(true);
1065
- });
1066
- if (this.tabService.isMobile()) {
1067
- this.ariaRole = undefined;
1068
- this.tabService.animationContentVisibleState = VISIBLE_STATE;
1069
- __classPrivateFieldGet(this, _SkySectionedFormComponent_changeRef, "f").markForCheck();
1070
- }
1071
- }
1072
- ngAfterViewChecked() {
1073
- this.tabService.content = this.content;
1074
- this.tabService.updateContent();
1075
- }
1076
- ngOnDestroy() {
1077
- __classPrivateFieldGet(this, _SkySectionedFormComponent_ngUnsubscribe, "f").next();
1078
- __classPrivateFieldGet(this, _SkySectionedFormComponent_ngUnsubscribe, "f").complete();
1079
- }
1080
- /**
1081
- * @deprecated Use the `tabsVisibleChanged` output to listen for tab visibility changes.
1082
- */
1083
- tabsVisible() {
1084
- __classPrivateFieldGet(this, _SkySectionedFormComponent_logger, "f").deprecated('SectionedFormComponent.tabsVisible()', {
1085
- deprecationMajorVersion: 8,
1086
- moreInfoUrl: 'https://developer.blackbaud.com/skyux/components/sectioned-form',
1087
- replacementRecommendation: 'Use the `tabsVisibleChanged` output to listen for tab visibility changes.',
1088
- });
1089
- __classPrivateFieldGet(this, _SkySectionedFormComponent_changeRef, "f").markForCheck();
1090
- return this.tabService.tabsVisible();
1091
- }
1092
- /**
1093
- * @deprecated Use the `messageStream` input and push a `ShowTabs` message to the message stream instead.
1094
- */
1095
- showTabs() {
1096
- __classPrivateFieldGet(this, _SkySectionedFormComponent_logger, "f").deprecated('SectionedFormComponent.showTabs()', {
1097
- deprecationMajorVersion: 8,
1098
- moreInfoUrl: 'https://developer.blackbaud.com/skyux/components/sectioned-form',
1099
- replacementRecommendation: 'Use the `messageStream` input and push a `ShowTabs` message to the message stream instead.',
1100
- });
1101
- __classPrivateFieldGet(this, _SkySectionedFormComponent_instances, "m", _SkySectionedFormComponent_showTabs).call(this);
1102
- }
1103
- }
1104
- _SkySectionedFormComponent_ngUnsubscribe = new WeakMap(), _SkySectionedFormComponent_messageStreamSub = new WeakMap(), _SkySectionedFormComponent_changeRef = new WeakMap(), _SkySectionedFormComponent_tabIdSvc = new WeakMap(), _SkySectionedFormComponent_logger = new WeakMap(), _SkySectionedFormComponent__messageStream = new WeakMap(), _SkySectionedFormComponent_instances = new WeakSet(), _SkySectionedFormComponent_showTabs = function _SkySectionedFormComponent_showTabs() {
1105
- this.tabService.showTabs();
1106
- __classPrivateFieldGet(this, _SkySectionedFormComponent_changeRef, "f").markForCheck();
1107
- }, _SkySectionedFormComponent_initMessageStream = function _SkySectionedFormComponent_initMessageStream() {
1108
- if (__classPrivateFieldGet(this, _SkySectionedFormComponent_messageStreamSub, "f")) {
1109
- __classPrivateFieldGet(this, _SkySectionedFormComponent_messageStreamSub, "f").unsubscribe();
1110
- }
1111
- __classPrivateFieldSet(this, _SkySectionedFormComponent_messageStreamSub, this.messageStream
1112
- .pipe(takeUntil(__classPrivateFieldGet(this, _SkySectionedFormComponent_ngUnsubscribe, "f")))
1113
- .subscribe((message) => {
1114
- switch (message.type) {
1115
- case SkySectionedFormMessageType.ShowTabs:
1116
- __classPrivateFieldGet(this, _SkySectionedFormComponent_instances, "m", _SkySectionedFormComponent_showTabs).call(this);
1117
- break;
1118
- }
1119
- }), "f");
1120
- };
1121
- SkySectionedFormComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkySectionedFormComponent, deps: [{ token: SkyVerticalTabsetService }, { token: i0.ChangeDetectorRef }, { token: SkyTabIdService }, { token: i1.SkyLogService }], target: i0.ɵɵFactoryTarget.Component });
1122
- SkySectionedFormComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: SkySectionedFormComponent, selector: "sky-sectioned-form", inputs: { maintainSectionContent: "maintainSectionContent", messageStream: "messageStream" }, outputs: { indexChanged: "indexChanged", tabsVisibleChanged: "tabsVisibleChanged" }, providers: [SkyTabIdService, SkyVerticalTabsetService], viewQueries: [{ propertyName: "content", first: true, predicate: ["skySectionSideContent"], descendants: true }], ngImport: i0, template: "<div class=\"sky-sectioned-form\" (window:resize)=\"tabService.updateContent()\">\n <!--\n ARIA rules do not allow tabpanel elements to be children of a tablist element.\n However, the markup for each sky-vertical-tab component includes both the tab button\n and its panel, making the panel element a child of its tablist. Moreover, our\n sky-vertical-tab components can be grouped within collapsible containers, which also\n violates accessibility rules because only tab buttons can be children of a tablist.\n To address this, we create an empty tablist element with an aria-owns attribute,\n pointing to each tab element individually. That way, we don't have to worry about the\n structure for each sky-vertical-tab component in order to satisfy accessibility\n guidelines.\n -->\n <span\n aria-orientation=\"vertical\"\n [attr.aria-owns]=\"ariaOwns\"\n [attr.role]=\"ariaRole\"\n ></span>\n <div\n *ngIf=\"maintainSectionContent || tabsVisible()\"\n class=\"sky-sectioned-form-tabs\"\n [ngClass]=\"{ 'sky-sectioned-form-tabs-hidden': !tabsVisible() }\"\n [@tabEnter]=\"tabService.animationTabsVisibleState\"\n >\n <ng-content></ng-content>\n </div>\n <div\n *ngIf=\"maintainSectionContent || tabService.contentVisible()\"\n class=\"sky-sectioned-form-content\"\n [ngClass]=\"{\n 'sky-sectioned-form-content-hidden': !tabService.contentVisible()\n }\"\n [@contentEnter]=\"tabService.animationContentVisibleState\"\n #skySectionSideContent\n ></div>\n</div>\n", styles: [":host .sky-sectioned-form{display:block;max-height:none}:host .sky-sectioned-form-content{flex-basis:auto;overflow-y:visible}:host .sky-sectioned-form-tabs{flex-basis:auto;overflow-y:visible;border-right:1px solid #e2e3e4}:host-context(.sky-responsive-container-xs) .sky-sectioned-form,:host-context(.sky-responsive-container-sm) .sky-sectioned-form,:host-context(.sky-responsive-container-md) .sky-sectioned-form,:host-context(.sky-responsive-container-lg) .sky-sectioned-form{display:block;max-height:none}:host-context(.sky-responsive-container-xs) .sky-sectioned-form-content,:host-context(.sky-responsive-container-sm) .sky-sectioned-form-content,:host-context(.sky-responsive-container-md) .sky-sectioned-form-content,:host-context(.sky-responsive-container-lg) .sky-sectioned-form-content{flex-basis:auto;overflow-y:visible}:host-context(.sky-responsive-container-xs) .sky-sectioned-form-tabs,:host-context(.sky-responsive-container-sm) .sky-sectioned-form-tabs,:host-context(.sky-responsive-container-md) .sky-sectioned-form-tabs,:host-context(.sky-responsive-container-lg) .sky-sectioned-form-tabs{flex-basis:auto;overflow-y:visible;border-right:1px solid #e2e3e4}@media (min-width: 768px){:host .sky-sectioned-form{display:flex;max-height:100%}:host .sky-sectioned-form-content{flex-basis:70%;padding:15px;overflow-y:auto}:host .sky-sectioned-form-tabs{flex-basis:30%;overflow-y:auto}}:host-context(.sky-responsive-container-sm) .sky-sectioned-form,:host-context(.sky-responsive-container-md) .sky-sectioned-form,:host-context(.sky-responsive-container-lg) .sky-sectioned-form{display:flex;max-height:100%}:host-context(.sky-responsive-container-sm) .sky-sectioned-form-content,:host-context(.sky-responsive-container-md) .sky-sectioned-form-content,:host-context(.sky-responsive-container-lg) .sky-sectioned-form-content{flex-basis:70%;padding:15px;overflow-y:auto}:host-context(.sky-responsive-container-sm) .sky-sectioned-form-tabs,:host-context(.sky-responsive-container-md) .sky-sectioned-form-tabs,:host-context(.sky-responsive-container-lg) .sky-sectioned-form-tabs{flex-basis:30%;overflow-y:auto}.sky-sectioned-form-tabs-hidden,.sky-sectioned-form-content-hidden{display:none}:host-context(.sky-theme-modern) .sky-sectioned-form-content{padding:15px}:host-context(.sky-theme-modern) .sky-sectioned-form-tabs{border-right:1px solid #d2d2d2}@media (min-width: 768px){:host-context(.sky-theme-modern) :host .sky-sectioned-form-content{margin:20px 30px}}:host-context(.sky-theme-modern) :host-context(.sky-responsive-container-sm) .sky-sectioned-form-content,:host-context(.sky-theme-modern) :host-context(.sky-responsive-container-md) .sky-sectioned-form-content,:host-context(.sky-theme-modern) :host-context(.sky-responsive-container-lg) .sky-sectioned-form-content{margin:20px 30px}.sky-theme-modern .sky-sectioned-form-content{padding:15px}.sky-theme-modern .sky-sectioned-form-tabs{border-right:1px solid #d2d2d2}@media (min-width: 768px){.sky-theme-modern :host .sky-sectioned-form-content{margin:20px 30px}}.sky-theme-modern :host-context(.sky-responsive-container-sm) .sky-sectioned-form-content,.sky-theme-modern :host-context(.sky-responsive-container-md) .sky-sectioned-form-content,.sky-theme-modern :host-context(.sky-responsive-container-lg) .sky-sectioned-form-content{margin:20px 30px}\n"], dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], animations: [
1123
- trigger('tabEnter', [
1124
- transition(`${HIDDEN_STATE} => ${VISIBLE_STATE}`, [
1125
- style({ transform: 'translate(-100%)' }),
1126
- animate('150ms ease-in'),
1127
- ]),
1128
- ]),
1129
- trigger('contentEnter', [
1130
- transition(`${HIDDEN_STATE} => ${VISIBLE_STATE}`, [
1131
- style({ transform: 'translate(100%)' }),
1132
- animate('150ms ease-in'),
1133
- ]),
1134
- ]),
1135
- ], changeDetection: i0.ChangeDetectionStrategy.OnPush });
1136
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkySectionedFormComponent, decorators: [{
1137
- type: Component,
1138
- args: [{ selector: 'sky-sectioned-form', providers: [SkyTabIdService, SkyVerticalTabsetService], changeDetection: ChangeDetectionStrategy.OnPush, animations: [
1139
- trigger('tabEnter', [
1140
- transition(`${HIDDEN_STATE} => ${VISIBLE_STATE}`, [
1141
- style({ transform: 'translate(-100%)' }),
1142
- animate('150ms ease-in'),
1143
- ]),
1144
- ]),
1145
- trigger('contentEnter', [
1146
- transition(`${HIDDEN_STATE} => ${VISIBLE_STATE}`, [
1147
- style({ transform: 'translate(100%)' }),
1148
- animate('150ms ease-in'),
1149
- ]),
1150
- ]),
1151
- ], template: "<div class=\"sky-sectioned-form\" (window:resize)=\"tabService.updateContent()\">\n <!--\n ARIA rules do not allow tabpanel elements to be children of a tablist element.\n However, the markup for each sky-vertical-tab component includes both the tab button\n and its panel, making the panel element a child of its tablist. Moreover, our\n sky-vertical-tab components can be grouped within collapsible containers, which also\n violates accessibility rules because only tab buttons can be children of a tablist.\n To address this, we create an empty tablist element with an aria-owns attribute,\n pointing to each tab element individually. That way, we don't have to worry about the\n structure for each sky-vertical-tab component in order to satisfy accessibility\n guidelines.\n -->\n <span\n aria-orientation=\"vertical\"\n [attr.aria-owns]=\"ariaOwns\"\n [attr.role]=\"ariaRole\"\n ></span>\n <div\n *ngIf=\"maintainSectionContent || tabsVisible()\"\n class=\"sky-sectioned-form-tabs\"\n [ngClass]=\"{ 'sky-sectioned-form-tabs-hidden': !tabsVisible() }\"\n [@tabEnter]=\"tabService.animationTabsVisibleState\"\n >\n <ng-content></ng-content>\n </div>\n <div\n *ngIf=\"maintainSectionContent || tabService.contentVisible()\"\n class=\"sky-sectioned-form-content\"\n [ngClass]=\"{\n 'sky-sectioned-form-content-hidden': !tabService.contentVisible()\n }\"\n [@contentEnter]=\"tabService.animationContentVisibleState\"\n #skySectionSideContent\n ></div>\n</div>\n", styles: [":host .sky-sectioned-form{display:block;max-height:none}:host .sky-sectioned-form-content{flex-basis:auto;overflow-y:visible}:host .sky-sectioned-form-tabs{flex-basis:auto;overflow-y:visible;border-right:1px solid #e2e3e4}:host-context(.sky-responsive-container-xs) .sky-sectioned-form,:host-context(.sky-responsive-container-sm) .sky-sectioned-form,:host-context(.sky-responsive-container-md) .sky-sectioned-form,:host-context(.sky-responsive-container-lg) .sky-sectioned-form{display:block;max-height:none}:host-context(.sky-responsive-container-xs) .sky-sectioned-form-content,:host-context(.sky-responsive-container-sm) .sky-sectioned-form-content,:host-context(.sky-responsive-container-md) .sky-sectioned-form-content,:host-context(.sky-responsive-container-lg) .sky-sectioned-form-content{flex-basis:auto;overflow-y:visible}:host-context(.sky-responsive-container-xs) .sky-sectioned-form-tabs,:host-context(.sky-responsive-container-sm) .sky-sectioned-form-tabs,:host-context(.sky-responsive-container-md) .sky-sectioned-form-tabs,:host-context(.sky-responsive-container-lg) .sky-sectioned-form-tabs{flex-basis:auto;overflow-y:visible;border-right:1px solid #e2e3e4}@media (min-width: 768px){:host .sky-sectioned-form{display:flex;max-height:100%}:host .sky-sectioned-form-content{flex-basis:70%;padding:15px;overflow-y:auto}:host .sky-sectioned-form-tabs{flex-basis:30%;overflow-y:auto}}:host-context(.sky-responsive-container-sm) .sky-sectioned-form,:host-context(.sky-responsive-container-md) .sky-sectioned-form,:host-context(.sky-responsive-container-lg) .sky-sectioned-form{display:flex;max-height:100%}:host-context(.sky-responsive-container-sm) .sky-sectioned-form-content,:host-context(.sky-responsive-container-md) .sky-sectioned-form-content,:host-context(.sky-responsive-container-lg) .sky-sectioned-form-content{flex-basis:70%;padding:15px;overflow-y:auto}:host-context(.sky-responsive-container-sm) .sky-sectioned-form-tabs,:host-context(.sky-responsive-container-md) .sky-sectioned-form-tabs,:host-context(.sky-responsive-container-lg) .sky-sectioned-form-tabs{flex-basis:30%;overflow-y:auto}.sky-sectioned-form-tabs-hidden,.sky-sectioned-form-content-hidden{display:none}:host-context(.sky-theme-modern) .sky-sectioned-form-content{padding:15px}:host-context(.sky-theme-modern) .sky-sectioned-form-tabs{border-right:1px solid #d2d2d2}@media (min-width: 768px){:host-context(.sky-theme-modern) :host .sky-sectioned-form-content{margin:20px 30px}}:host-context(.sky-theme-modern) :host-context(.sky-responsive-container-sm) .sky-sectioned-form-content,:host-context(.sky-theme-modern) :host-context(.sky-responsive-container-md) .sky-sectioned-form-content,:host-context(.sky-theme-modern) :host-context(.sky-responsive-container-lg) .sky-sectioned-form-content{margin:20px 30px}.sky-theme-modern .sky-sectioned-form-content{padding:15px}.sky-theme-modern .sky-sectioned-form-tabs{border-right:1px solid #d2d2d2}@media (min-width: 768px){.sky-theme-modern :host .sky-sectioned-form-content{margin:20px 30px}}.sky-theme-modern :host-context(.sky-responsive-container-sm) .sky-sectioned-form-content,.sky-theme-modern :host-context(.sky-responsive-container-md) .sky-sectioned-form-content,.sky-theme-modern :host-context(.sky-responsive-container-lg) .sky-sectioned-form-content{margin:20px 30px}\n"] }]
1152
- }], ctorParameters: function () { return [{ type: SkyVerticalTabsetService }, { type: i0.ChangeDetectorRef }, { type: SkyTabIdService }, { type: i1.SkyLogService }]; }, propDecorators: { maintainSectionContent: [{
1153
- type: Input
1154
- }], messageStream: [{
1155
- type: Input
1156
- }], indexChanged: [{
1157
- type: Output
1158
- }], tabsVisibleChanged: [{
1159
- type: Output
1160
- }], content: [{
1161
- type: ViewChild,
1162
- args: ['skySectionSideContent']
1163
- }] } });
1164
-
1165
- class SkySectionedFormModule {
1166
- }
1167
- SkySectionedFormModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkySectionedFormModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
1168
- SkySectionedFormModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.9", ngImport: i0, type: SkySectionedFormModule, declarations: [SkySectionedFormComponent, SkySectionedFormSectionComponent], imports: [CommonModule,
1169
- SkyCheckboxModule,
1170
- SkyThemeModule,
1171
- SkyVerticalTabsetModule], exports: [SkySectionedFormComponent, SkySectionedFormSectionComponent] });
1172
- SkySectionedFormModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkySectionedFormModule, imports: [CommonModule,
1173
- SkyCheckboxModule,
1174
- SkyThemeModule,
1175
- SkyVerticalTabsetModule] });
1176
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkySectionedFormModule, decorators: [{
1177
- type: NgModule,
1178
- args: [{
1179
- declarations: [SkySectionedFormComponent, SkySectionedFormSectionComponent],
1180
- imports: [
1181
- CommonModule,
1182
- SkyCheckboxModule,
1183
- SkyThemeModule,
1184
- SkyVerticalTabsetModule,
1185
- ],
1186
- exports: [SkySectionedFormComponent, SkySectionedFormSectionComponent],
1187
- }]
1188
- }] });
1189
-
1190
- /**
1191
- * @internal
1192
- */
1193
- class SkyTabButtonAdapterService {
1194
- focusButtonLink(buttonEl) {
1195
- buttonEl.nativeElement.querySelector('a').focus();
1196
- }
1197
- }
1198
- SkyTabButtonAdapterService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyTabButtonAdapterService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
1199
- SkyTabButtonAdapterService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyTabButtonAdapterService });
1200
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyTabButtonAdapterService, decorators: [{
1201
- type: Injectable
1202
- }] });
1203
-
1204
- var _SkyTabsetService_instances, _SkyTabsetService_activeTabIndex, _SkyTabsetService_focusedTabBtnIndex, _SkyTabsetService_activeTabUnregistered, _SkyTabsetService_activeTabLayout, _SkyTabsetService_tabs, _SkyTabsetService_tabCounter, _SkyTabsetService_isTabIndexActive, _SkyTabsetService_getNextTabArrayIndex, _SkyTabsetService_getPrevTabArrayIndex;
1205
- /**
1206
- * @internal
1207
- */
1208
- class SkyTabsetService {
1209
- get activeTabUnregistered() {
1210
- return __classPrivateFieldGet(this, _SkyTabsetService_activeTabUnregistered, "f");
1211
- }
1212
- get activeTabIndex() {
1213
- return __classPrivateFieldGet(this, _SkyTabsetService_activeTabIndex, "f");
1214
- }
1215
- get focusedTabBtnIndex() {
1216
- return __classPrivateFieldGet(this, _SkyTabsetService_focusedTabBtnIndex, "f");
1217
- }
1218
- get activeTabLayout() {
1219
- return __classPrivateFieldGet(this, _SkyTabsetService_activeTabLayout, "f");
1220
- }
1221
- constructor() {
1222
- _SkyTabsetService_instances.add(this);
1223
- this.currentActiveTabIndex = 0;
1224
- this.currentFocusedTabBtnIndex = 0;
1225
- _SkyTabsetService_activeTabIndex.set(this, void 0);
1226
- _SkyTabsetService_focusedTabBtnIndex.set(this, void 0);
1227
- _SkyTabsetService_activeTabUnregistered.set(this, void 0);
1228
- _SkyTabsetService_activeTabLayout.set(this, new Subject());
1229
- _SkyTabsetService_tabs.set(this, []);
1230
- _SkyTabsetService_tabCounter.set(this, 0);
1231
- __classPrivateFieldSet(this, _SkyTabsetService_activeTabIndex, new BehaviorSubject(0), "f");
1232
- __classPrivateFieldSet(this, _SkyTabsetService_activeTabUnregistered, new Subject(), "f");
1233
- __classPrivateFieldSet(this, _SkyTabsetService_focusedTabBtnIndex, new Subject(), "f");
1234
- }
1235
- ngOnDestroy() {
1236
- __classPrivateFieldGet(this, _SkyTabsetService_activeTabIndex, "f").complete();
1237
- __classPrivateFieldGet(this, _SkyTabsetService_activeTabUnregistered, "f").complete();
1238
- __classPrivateFieldGet(this, _SkyTabsetService_focusedTabBtnIndex, "f").complete();
1239
- __classPrivateFieldGet(this, _SkyTabsetService_activeTabLayout, "f").complete();
1240
- }
1241
- /**
1242
- * Sets the active tab by its unique `tabIndex` property.
1243
- */
1244
- setActiveTabIndex(value, config = {
1245
- emitChange: true,
1246
- }) {
1247
- if (value !== undefined &&
1248
- !this.tabIndexesEqual(value, this.currentActiveTabIndex)) {
1249
- this.currentActiveTabIndex = value;
1250
- /* istanbul ignore else */
1251
- if (config.emitChange) {
1252
- __classPrivateFieldGet(this, _SkyTabsetService_activeTabIndex, "f").next(value);
1253
- }
1254
- this.setFocusedTabBtnIndex(value);
1255
- }
1256
- }
1257
- focusNextTabBtn(tabButtons) {
1258
- const currentTabArrayIndex = __classPrivateFieldGet(this, _SkyTabsetService_tabs, "f").findIndex((tab) => this.tabIndexesEqual(tab.tabIndex, this.currentFocusedTabBtnIndex));
1259
- for (let i = __classPrivateFieldGet(this, _SkyTabsetService_instances, "m", _SkyTabsetService_getNextTabArrayIndex).call(this, currentTabArrayIndex); i !== currentTabArrayIndex; i = __classPrivateFieldGet(this, _SkyTabsetService_instances, "m", _SkyTabsetService_getNextTabArrayIndex).call(this, i)) {
1260
- const tabBtn = tabButtons[i];
1261
- if (!tabBtn.disabled && tabBtn.tabIndex !== undefined) {
1262
- this.setFocusedTabBtnIndex(tabBtn.tabIndex);
1263
- return;
1264
- }
1265
- }
1266
- }
1267
- focusPrevTabBtn(tabButtons) {
1268
- const currentTabArrayIndex = __classPrivateFieldGet(this, _SkyTabsetService_tabs, "f").findIndex((tab) => this.tabIndexesEqual(tab.tabIndex, this.currentFocusedTabBtnIndex));
1269
- for (let i = __classPrivateFieldGet(this, _SkyTabsetService_instances, "m", _SkyTabsetService_getPrevTabArrayIndex).call(this, currentTabArrayIndex); i !== currentTabArrayIndex; i = __classPrivateFieldGet(this, _SkyTabsetService_instances, "m", _SkyTabsetService_getPrevTabArrayIndex).call(this, i)) {
1270
- const tabBtn = tabButtons[i];
1271
- if (!tabBtn.disabled && tabBtn.tabIndex !== undefined) {
1272
- this.setFocusedTabBtnIndex(tabBtn.tabIndex);
1273
- return;
1274
- }
1275
- }
1276
- }
1277
- focusFirstOrNearestTabBtn(tabButtons) {
1278
- for (let i = 0; i < tabButtons.length; i++) {
1279
- const tabBtn = tabButtons[i];
1280
- if (!tabBtn.disabled && tabBtn.tabIndex !== undefined) {
1281
- this.setFocusedTabBtnIndex(tabBtn.tabIndex);
1282
- return;
1283
- }
1284
- }
1285
- }
1286
- focusLastOrNearestTabBtn(tabButtons) {
1287
- for (let i = tabButtons.length - 1; i >= 0; i--) {
1288
- const tabBtn = tabButtons[i];
1289
- if (!tabBtn.disabled && tabBtn.tabIndex !== undefined) {
1290
- this.setFocusedTabBtnIndex(tabBtn.tabIndex);
1291
- return;
1292
- }
1293
- }
1294
- }
1295
- setFocusedTabBtnIndex(tabIndex) {
1296
- this.currentFocusedTabBtnIndex = tabIndex;
1297
- __classPrivateFieldGet(this, _SkyTabsetService_focusedTabBtnIndex, "f").next(tabIndex);
1298
- }
1299
- /**
1300
- * Registers a tab component.
1301
- */
1302
- registerTab(tabIndex) {
1303
- var _a;
1304
- if (tabIndex === undefined) {
1305
- tabIndex = __classPrivateFieldGet(this, _SkyTabsetService_tabCounter, "f");
1306
- __classPrivateFieldSet(this, _SkyTabsetService_tabCounter, (_a = __classPrivateFieldGet(this, _SkyTabsetService_tabCounter, "f"), _a++, _a), "f");
1307
- }
1308
- __classPrivateFieldGet(this, _SkyTabsetService_tabs, "f").push({ tabIndex });
1309
- return tabIndex;
1310
- }
1311
- updateTabIndex(currentTabIndex, newTabIndex) {
1312
- const found = __classPrivateFieldGet(this, _SkyTabsetService_tabs, "f").find((tab) => this.tabIndexesEqual(tab.tabIndex, currentTabIndex));
1313
- if (found) {
1314
- found.tabIndex = newTabIndex;
1315
- }
1316
- }
1317
- updateActiveTabLayout(layout) {
1318
- __classPrivateFieldGet(this, _SkyTabsetService_activeTabLayout, "f").next(layout);
1319
- }
1320
- /**
1321
- * Unregisters a tab component.
1322
- */
1323
- unregisterTab(tabIndex) {
1324
- const index = __classPrivateFieldGet(this, _SkyTabsetService_tabs, "f").findIndex((tab) => this.tabIndexesEqual(tab.tabIndex, tabIndex));
1325
- // Notify the tabset component when an active tab is unregistered.
1326
- if (__classPrivateFieldGet(this, _SkyTabsetService_instances, "m", _SkyTabsetService_isTabIndexActive).call(this, __classPrivateFieldGet(this, _SkyTabsetService_tabs, "f")[index]?.tabIndex)) {
1327
- __classPrivateFieldGet(this, _SkyTabsetService_activeTabUnregistered, "f").next({
1328
- arrayIndex: index,
1329
- });
1330
- }
1331
- __classPrivateFieldGet(this, _SkyTabsetService_tabs, "f").splice(index, 1);
1332
- }
1333
- /**
1334
- * Unregisters all tab components at once.
1335
- */
1336
- unregisterAll() {
1337
- __classPrivateFieldSet(this, _SkyTabsetService_tabs, [], "f");
1338
- }
1339
- /**
1340
- * Compares two tab indexes and returns `true` if they are equal.
1341
- */
1342
- tabIndexesEqual(tabIndex1, tabIndex2) {
1343
- return (tabIndex1 === tabIndex2 ||
1344
- (tabIndex1 !== undefined &&
1345
- tabIndex2 !== undefined &&
1346
- +tabIndex1 === +tabIndex2));
1347
- }
1348
- /**
1349
- * Verifies if a provided tab index is registered.
1350
- */
1351
- isValidTabIndex(tabIndex) {
1352
- return __classPrivateFieldGet(this, _SkyTabsetService_tabs, "f").some((tab) => this.tabIndexesEqual(tab.tabIndex, tabIndex));
1353
- }
1354
- /**
1355
- * Activates the first registered tab.
1356
- */
1357
- activateFirstTab() {
1358
- const firstTabIndex = __classPrivateFieldGet(this, _SkyTabsetService_tabs, "f")[0] && __classPrivateFieldGet(this, _SkyTabsetService_tabs, "f")[0].tabIndex;
1359
- if (firstTabIndex !== undefined) {
1360
- this.setActiveTabIndex(firstTabIndex);
1361
- return firstTabIndex;
1362
- }
1363
- return undefined;
1364
- }
1365
- /**
1366
- * Activates the next registered tab, or the previous one based on a provided array index.
1367
- */
1368
- activateNearestTab(arrayIndex) {
1369
- const newActiveTab = __classPrivateFieldGet(this, _SkyTabsetService_tabs, "f")[arrayIndex] || __classPrivateFieldGet(this, _SkyTabsetService_tabs, "f")[arrayIndex - 1];
1370
- if (newActiveTab) {
1371
- this.currentActiveTabIndex = newActiveTab.tabIndex;
1372
- }
1373
- }
1374
- }
1375
- _SkyTabsetService_activeTabIndex = new WeakMap(), _SkyTabsetService_focusedTabBtnIndex = new WeakMap(), _SkyTabsetService_activeTabUnregistered = new WeakMap(), _SkyTabsetService_activeTabLayout = new WeakMap(), _SkyTabsetService_tabs = new WeakMap(), _SkyTabsetService_tabCounter = new WeakMap(), _SkyTabsetService_instances = new WeakSet(), _SkyTabsetService_isTabIndexActive = function _SkyTabsetService_isTabIndexActive(tabIndex) {
1376
- return this.tabIndexesEqual(tabIndex, this.currentActiveTabIndex);
1377
- }, _SkyTabsetService_getNextTabArrayIndex = function _SkyTabsetService_getNextTabArrayIndex(currentIndex) {
1378
- let nextIndex = currentIndex + 1;
1379
- if (nextIndex === __classPrivateFieldGet(this, _SkyTabsetService_tabs, "f").length) {
1380
- nextIndex = 0;
1381
- }
1382
- return nextIndex;
1383
- }, _SkyTabsetService_getPrevTabArrayIndex = function _SkyTabsetService_getPrevTabArrayIndex(currentIndex) {
1384
- let prevIndex = currentIndex - 1;
1385
- if (prevIndex < 0) {
1386
- prevIndex = __classPrivateFieldGet(this, _SkyTabsetService_tabs, "f").length - 1;
1387
- }
1388
- return prevIndex;
1389
- };
1390
- SkyTabsetService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyTabsetService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
1391
- SkyTabsetService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyTabsetService });
1392
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyTabsetService, decorators: [{
1393
- type: Injectable
1394
- }], ctorParameters: function () { return []; } });
1395
-
1396
- var _SkyTabButtonComponent_instances, _SkyTabButtonComponent__isActive, _SkyTabButtonComponent__isDisabled, _SkyTabButtonComponent__tabStyle, _SkyTabButtonComponent_adapterService, _SkyTabButtonComponent_changeDetectorRef, _SkyTabButtonComponent_elementRef, _SkyTabButtonComponent_tabsetService, _SkyTabButtonComponent_ngUnsubscribe, _SkyTabButtonComponent_updateWizardStepState;
1397
- const DEFAULT_DISABLED = false;
1398
- /**
1399
- * @internal
1400
- */
1401
- class SkyTabButtonComponent {
1402
- get active() {
1403
- return __classPrivateFieldGet(this, _SkyTabButtonComponent__isActive, "f");
1404
- }
1405
- set active(value) {
1406
- __classPrivateFieldSet(this, _SkyTabButtonComponent__isActive, value, "f");
1407
- __classPrivateFieldGet(this, _SkyTabButtonComponent_instances, "m", _SkyTabButtonComponent_updateWizardStepState).call(this);
1408
- }
1409
- get disabled() {
1410
- return __classPrivateFieldGet(this, _SkyTabButtonComponent__isDisabled, "f");
1411
- }
1412
- set disabled(value) {
1413
- __classPrivateFieldSet(this, _SkyTabButtonComponent__isDisabled, value ?? DEFAULT_DISABLED, "f");
1414
- __classPrivateFieldGet(this, _SkyTabButtonComponent_instances, "m", _SkyTabButtonComponent_updateWizardStepState).call(this);
1415
- }
1416
- get tabStyle() {
1417
- return __classPrivateFieldGet(this, _SkyTabButtonComponent__tabStyle, "f");
1418
- }
1419
- set tabStyle(style) {
1420
- __classPrivateFieldSet(this, _SkyTabButtonComponent__tabStyle, style, "f");
1421
- __classPrivateFieldGet(this, _SkyTabButtonComponent_instances, "m", _SkyTabButtonComponent_updateWizardStepState).call(this);
1422
- }
1423
- constructor(elementRef, adapterService, changeDetectorRef, tabsetService) {
1424
- _SkyTabButtonComponent_instances.add(this);
1425
- this.buttonClick = new EventEmitter();
1426
- this.closeClick = new EventEmitter();
1427
- this.closeBtnTabIndex = '-1';
1428
- _SkyTabButtonComponent__isActive.set(this, false);
1429
- _SkyTabButtonComponent__isDisabled.set(this, DEFAULT_DISABLED);
1430
- _SkyTabButtonComponent__tabStyle.set(this, void 0);
1431
- _SkyTabButtonComponent_adapterService.set(this, void 0);
1432
- _SkyTabButtonComponent_changeDetectorRef.set(this, void 0);
1433
- _SkyTabButtonComponent_elementRef.set(this, void 0);
1434
- _SkyTabButtonComponent_tabsetService.set(this, void 0);
1435
- _SkyTabButtonComponent_ngUnsubscribe.set(this, new Subject());
1436
- __classPrivateFieldSet(this, _SkyTabButtonComponent_adapterService, adapterService, "f");
1437
- __classPrivateFieldSet(this, _SkyTabButtonComponent_changeDetectorRef, changeDetectorRef, "f");
1438
- __classPrivateFieldSet(this, _SkyTabButtonComponent_elementRef, elementRef, "f");
1439
- __classPrivateFieldSet(this, _SkyTabButtonComponent_tabsetService, tabsetService, "f");
1440
- }
1441
- ngAfterViewInit() {
1442
- __classPrivateFieldGet(this, _SkyTabButtonComponent_tabsetService, "f").focusedTabBtnIndex
1443
- .pipe(distinctUntilChanged(), takeUntil(__classPrivateFieldGet(this, _SkyTabButtonComponent_ngUnsubscribe, "f")))
1444
- .subscribe((focusedIndex) => {
1445
- if (this.tabIndex !== undefined && focusedIndex === this.tabIndex) {
1446
- this.closeBtnTabIndex = '0';
1447
- this.focusBtn();
1448
- }
1449
- else {
1450
- this.closeBtnTabIndex = '-1';
1451
- }
1452
- __classPrivateFieldGet(this, _SkyTabButtonComponent_changeDetectorRef, "f").markForCheck();
1453
- });
1454
- }
1455
- ngOnDestroy() {
1456
- __classPrivateFieldGet(this, _SkyTabButtonComponent_ngUnsubscribe, "f").next();
1457
- __classPrivateFieldGet(this, _SkyTabButtonComponent_ngUnsubscribe, "f").complete();
1458
- }
1459
- onButtonClick(event) {
1460
- if (!this.disabled) {
1461
- this.buttonClick.emit();
1462
- event.preventDefault();
1463
- }
1464
- }
1465
- onTabButtonKeyDown(event) {
1466
- /*istanbul ignore else */
1467
- if (event.key) {
1468
- switch (event.key.toUpperCase()) {
1469
- case ' ':
1470
- case 'ENTER':
1471
- this.onButtonClick(event);
1472
- break;
1473
- /* istanbul ignore next */
1474
- default:
1475
- break;
1476
- }
1477
- }
1478
- }
1479
- onCloseClick(event) {
1480
- this.closeClick.emit();
1481
- // Prevent the click event from bubbling up to the anchor tag;
1482
- // otherwise it will trigger a page refresh.
1483
- event.stopPropagation();
1484
- event.preventDefault();
1485
- }
1486
- focusBtn() {
1487
- __classPrivateFieldGet(this, _SkyTabButtonComponent_adapterService, "f").focusButtonLink(__classPrivateFieldGet(this, _SkyTabButtonComponent_elementRef, "f"));
1488
- }
1489
- onFocus() {
1490
- if (this.tabIndex !== undefined) {
1491
- __classPrivateFieldGet(this, _SkyTabButtonComponent_tabsetService, "f").setFocusedTabBtnIndex(this.tabIndex);
1492
- }
1493
- }
1494
- }
1495
- _SkyTabButtonComponent__isActive = new WeakMap(), _SkyTabButtonComponent__isDisabled = new WeakMap(), _SkyTabButtonComponent__tabStyle = new WeakMap(), _SkyTabButtonComponent_adapterService = new WeakMap(), _SkyTabButtonComponent_changeDetectorRef = new WeakMap(), _SkyTabButtonComponent_elementRef = new WeakMap(), _SkyTabButtonComponent_tabsetService = new WeakMap(), _SkyTabButtonComponent_ngUnsubscribe = new WeakMap(), _SkyTabButtonComponent_instances = new WeakSet(), _SkyTabButtonComponent_updateWizardStepState = function _SkyTabButtonComponent_updateWizardStepState() {
1496
- if (this.tabStyle === 'tabs') {
1497
- this.wizardStepState = undefined;
1498
- }
1499
- else {
1500
- if (this.active) {
1501
- this.wizardStepState = 'current';
1502
- }
1503
- else if (!this.disabled) {
1504
- this.wizardStepState = 'completed';
1505
- }
1506
- else {
1507
- this.wizardStepState = 'unavailable';
1508
- }
1509
- }
1510
- __classPrivateFieldGet(this, _SkyTabButtonComponent_changeDetectorRef, "f").markForCheck();
1511
- };
1512
- SkyTabButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyTabButtonComponent, deps: [{ token: i0.ElementRef }, { token: SkyTabButtonAdapterService }, { token: i0.ChangeDetectorRef }, { token: SkyTabsetService }], target: i0.ɵɵFactoryTarget.Component });
1513
- SkyTabButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: SkyTabButtonComponent, selector: "sky-tab-button", inputs: { active: "active", ariaControls: "ariaControls", buttonHref: "buttonHref", buttonId: "buttonId", buttonText: "buttonText", buttonTextCount: "buttonTextCount", closeable: "closeable", disabled: "disabled", tabIndex: "tabIndex", tabNumber: "tabNumber", totalTabsCount: "totalTabsCount", tabStyle: "tabStyle" }, outputs: { buttonClick: "buttonClick", closeClick: "closeClick" }, providers: [SkyTabButtonAdapterService], ngImport: i0, template: "<div\n class=\"sky-btn-tab-wrapper\"\n [ngClass]=\"{\n 'sky-btn-tab-wrapper-selected': active,\n 'sky-btn-tab-wrapper-disabled': disabled\n }\"\n>\n <a\n #tabButtonEl\n class=\"sky-btn-tab\"\n role=\"tab\"\n [attr.aria-controls]=\"ariaControls\"\n [attr.aria-disabled]=\"disabled\"\n [attr.aria-selected]=\"active\"\n [attr.href]=\"buttonHref\"\n [attr.aria-label]=\"\n (tabStyle === 'wizard'\n ? 'skyux_wizard_sr_step_' + wizardStepState\n : 'skyux_tabs_sr_tab_order'\n ) | skyLibResources : tabNumber : totalTabsCount : buttonText\n \"\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 {{ buttonText }}\n <span *ngIf=\"buttonTextCount !== undefined\" class=\"sky-tab-header-count\">\n {{ buttonTextCount }}\n </span>\n <span\n *ngIf=\"closeable\"\n class=\"sky-btn-tab-close\"\n [tabindex]=\"closeBtnTabIndex\"\n [attr.aria-label]=\"'skyux_tab_close' | skyLibResources : buttonText\"\n [ngClass]=\"{\n 'sky-btn-tab-close-disabled': disabled\n }\"\n (click)=\"onCloseClick($event)\"\n (keydown.enter)=\"onCloseClick($event)\"\n >\n <sky-icon icon=\"remove\"></sky-icon>\n </span>\n </span>\n </a>\n</div>\n", styles: [".sky-btn-tab-wrapper{display:inline-block;position:relative;margin-right:5px}.sky-btn-tab-wrapper .sky-btn-tab-close{position:absolute;top:10px;right:10px;color:#686c73;padding:1px 6px}.sky-btn-tab-wrapper .sky-btn-tab-close:hover{color:#212327;transition:color .15s}.sky-btn-tab-wrapper.sky-btn-tab-wrapper-selected:not(.sky-btn-tab-wrapper-disabled) .sky-btn-tab-close{color:#fff}.sky-btn-tab-wrapper.sky-btn-tab-wrapper-disabled{cursor:not-allowed}.sky-tab-btn-closeable{padding-right:43px}:host-context(.sky-theme-modern) .sky-btn-tab-wrapper{margin-right:10px}:host-context(.sky-theme-modern) .sky-btn-tab-wrapper .sky-btn-tab-close{top:12px;right:10px}:host-context(.sky-theme-modern) .sky-btn-tab-wrapper.sky-btn-tab-wrapper-selected:not(.sky-btn-tab-wrapper-disabled) .sky-btn-tab-close{color:#686c73}:host-context(.sky-theme-modern) .sky-tab-btn-closeable{padding-right:44px}.sky-theme-modern .sky-btn-tab-wrapper{margin-right:10px}.sky-theme-modern .sky-btn-tab-wrapper .sky-btn-tab-close{top:12px;right:10px}.sky-theme-modern .sky-btn-tab-wrapper.sky-btn-tab-wrapper-selected:not(.sky-btn-tab-wrapper-disabled) .sky-btn-tab-close{color:#686c73}.sky-theme-modern .sky-tab-btn-closeable{padding-right:44px}:host-context(.sky-theme-modern.sky-theme-mode-dark) .sky-btn-tab-wrapper .sky-btn-tab-close{color:#eeeeef}:host-context(.sky-theme-modern.sky-theme-mode-dark) .sky-btn-tab-wrapper.sky-btn-tab-wrapper-selected:not(.sky-btn-tab-wrapper-disabled) .sky-btn-tab-close{color:#eeeeef}.sky-theme-modern.sky-theme-mode-dark .sky-btn-tab-wrapper .sky-btn-tab-close{color:#eeeeef}.sky-theme-modern.sky-theme-mode-dark .sky-btn-tab-wrapper.sky-btn-tab-wrapper-selected:not(.sky-btn-tab-wrapper-disabled) .sky-btn-tab-close{color:#eeeeef}\n"], dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i6.λ4, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }, { kind: "pipe", type: i3.SkyLibResourcesPipe, name: "skyLibResources" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
1514
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyTabButtonComponent, decorators: [{
1515
- type: Component,
1516
- args: [{ selector: 'sky-tab-button', providers: [SkyTabButtonAdapterService], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div\n class=\"sky-btn-tab-wrapper\"\n [ngClass]=\"{\n 'sky-btn-tab-wrapper-selected': active,\n 'sky-btn-tab-wrapper-disabled': disabled\n }\"\n>\n <a\n #tabButtonEl\n class=\"sky-btn-tab\"\n role=\"tab\"\n [attr.aria-controls]=\"ariaControls\"\n [attr.aria-disabled]=\"disabled\"\n [attr.aria-selected]=\"active\"\n [attr.href]=\"buttonHref\"\n [attr.aria-label]=\"\n (tabStyle === 'wizard'\n ? 'skyux_wizard_sr_step_' + wizardStepState\n : 'skyux_tabs_sr_tab_order'\n ) | skyLibResources : tabNumber : totalTabsCount : buttonText\n \"\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 {{ buttonText }}\n <span *ngIf=\"buttonTextCount !== undefined\" class=\"sky-tab-header-count\">\n {{ buttonTextCount }}\n </span>\n <span\n *ngIf=\"closeable\"\n class=\"sky-btn-tab-close\"\n [tabindex]=\"closeBtnTabIndex\"\n [attr.aria-label]=\"'skyux_tab_close' | skyLibResources : buttonText\"\n [ngClass]=\"{\n 'sky-btn-tab-close-disabled': disabled\n }\"\n (click)=\"onCloseClick($event)\"\n (keydown.enter)=\"onCloseClick($event)\"\n >\n <sky-icon icon=\"remove\"></sky-icon>\n </span>\n </span>\n </a>\n</div>\n", styles: [".sky-btn-tab-wrapper{display:inline-block;position:relative;margin-right:5px}.sky-btn-tab-wrapper .sky-btn-tab-close{position:absolute;top:10px;right:10px;color:#686c73;padding:1px 6px}.sky-btn-tab-wrapper .sky-btn-tab-close:hover{color:#212327;transition:color .15s}.sky-btn-tab-wrapper.sky-btn-tab-wrapper-selected:not(.sky-btn-tab-wrapper-disabled) .sky-btn-tab-close{color:#fff}.sky-btn-tab-wrapper.sky-btn-tab-wrapper-disabled{cursor:not-allowed}.sky-tab-btn-closeable{padding-right:43px}:host-context(.sky-theme-modern) .sky-btn-tab-wrapper{margin-right:10px}:host-context(.sky-theme-modern) .sky-btn-tab-wrapper .sky-btn-tab-close{top:12px;right:10px}:host-context(.sky-theme-modern) .sky-btn-tab-wrapper.sky-btn-tab-wrapper-selected:not(.sky-btn-tab-wrapper-disabled) .sky-btn-tab-close{color:#686c73}:host-context(.sky-theme-modern) .sky-tab-btn-closeable{padding-right:44px}.sky-theme-modern .sky-btn-tab-wrapper{margin-right:10px}.sky-theme-modern .sky-btn-tab-wrapper .sky-btn-tab-close{top:12px;right:10px}.sky-theme-modern .sky-btn-tab-wrapper.sky-btn-tab-wrapper-selected:not(.sky-btn-tab-wrapper-disabled) .sky-btn-tab-close{color:#686c73}.sky-theme-modern .sky-tab-btn-closeable{padding-right:44px}:host-context(.sky-theme-modern.sky-theme-mode-dark) .sky-btn-tab-wrapper .sky-btn-tab-close{color:#eeeeef}:host-context(.sky-theme-modern.sky-theme-mode-dark) .sky-btn-tab-wrapper.sky-btn-tab-wrapper-selected:not(.sky-btn-tab-wrapper-disabled) .sky-btn-tab-close{color:#eeeeef}.sky-theme-modern.sky-theme-mode-dark .sky-btn-tab-wrapper .sky-btn-tab-close{color:#eeeeef}.sky-theme-modern.sky-theme-mode-dark .sky-btn-tab-wrapper.sky-btn-tab-wrapper-selected:not(.sky-btn-tab-wrapper-disabled) .sky-btn-tab-close{color:#eeeeef}\n"] }]
1517
- }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: SkyTabButtonAdapterService }, { type: i0.ChangeDetectorRef }, { type: SkyTabsetService }]; }, propDecorators: { active: [{
1518
- type: Input
1519
- }], ariaControls: [{
1520
- type: Input
1521
- }], buttonHref: [{
1522
- type: Input
1523
- }], buttonId: [{
1524
- type: Input
1525
- }], buttonText: [{
1526
- type: Input
1527
- }], buttonTextCount: [{
1528
- type: Input
1529
- }], closeable: [{
1530
- type: Input
1531
- }], disabled: [{
1532
- type: Input
1533
- }], tabIndex: [{
1534
- type: Input
1535
- }], tabNumber: [{
1536
- type: Input
1537
- }], totalTabsCount: [{
1538
- type: Input
1539
- }], tabStyle: [{
1540
- type: Input
1541
- }], buttonClick: [{
1542
- type: Output
1543
- }], closeClick: [{
1544
- type: Output
1545
- }] } });
1546
-
1547
- var _SkyTabsetPermalinkService_instances, _SkyTabsetPermalinkService_popStateChange, _SkyTabsetPermalinkService_subscription, _SkyTabsetPermalinkService_activatedRoute, _SkyTabsetPermalinkService_location, _SkyTabsetPermalinkService_router, _SkyTabsetPermalinkService_getParams;
1548
- /**
1549
- * @internal
1550
- */
1551
- class SkyTabsetPermalinkService {
1552
- get popStateChange() {
1553
- return __classPrivateFieldGet(this, _SkyTabsetPermalinkService_popStateChange, "f");
1554
- }
1555
- constructor(activatedRoute, location, router) {
1556
- _SkyTabsetPermalinkService_instances.add(this);
1557
- _SkyTabsetPermalinkService_popStateChange.set(this, void 0);
1558
- _SkyTabsetPermalinkService_subscription.set(this, void 0);
1559
- _SkyTabsetPermalinkService_activatedRoute.set(this, void 0);
1560
- _SkyTabsetPermalinkService_location.set(this, void 0);
1561
- _SkyTabsetPermalinkService_router.set(this, void 0);
1562
- __classPrivateFieldSet(this, _SkyTabsetPermalinkService_activatedRoute, activatedRoute, "f");
1563
- __classPrivateFieldSet(this, _SkyTabsetPermalinkService_location, location, "f");
1564
- __classPrivateFieldSet(this, _SkyTabsetPermalinkService_router, router, "f");
1565
- __classPrivateFieldSet(this, _SkyTabsetPermalinkService_popStateChange, new Subject(), "f");
1566
- }
1567
- ngOnDestroy() {
1568
- if (__classPrivateFieldGet(this, _SkyTabsetPermalinkService_subscription, "f")) {
1569
- __classPrivateFieldGet(this, _SkyTabsetPermalinkService_subscription, "f").unsubscribe();
1570
- }
1571
- __classPrivateFieldGet(this, _SkyTabsetPermalinkService_popStateChange, "f").complete();
1572
- }
1573
- init() {
1574
- __classPrivateFieldSet(this, _SkyTabsetPermalinkService_subscription, __classPrivateFieldGet(this, _SkyTabsetPermalinkService_location, "f").subscribe(() => {
1575
- __classPrivateFieldGet(this, _SkyTabsetPermalinkService_popStateChange, "f").next();
1576
- }), "f");
1577
- }
1578
- /**
1579
- * Returns the value of a URL query param.
1580
- */
1581
- getParam(name) {
1582
- return __classPrivateFieldGet(this, _SkyTabsetPermalinkService_instances, "m", _SkyTabsetPermalinkService_getParams).call(this)[name];
1583
- }
1584
- /**
1585
- * Sets the value of a URL query param.
1586
- */
1587
- setParam(name, value) {
1588
- const params = __classPrivateFieldGet(this, _SkyTabsetPermalinkService_instances, "m", _SkyTabsetPermalinkService_getParams).call(this);
1589
- if (value === null) {
1590
- delete params[name];
1591
- }
1592
- else {
1593
- params[name] = value;
1594
- }
1595
- // Update the URL without triggering a navigation state change.
1596
- // See: https://stackoverflow.com/a/46486677
1597
- const url = __classPrivateFieldGet(this, _SkyTabsetPermalinkService_router, "f")
1598
- .createUrlTree([], {
1599
- relativeTo: __classPrivateFieldGet(this, _SkyTabsetPermalinkService_activatedRoute, "f"),
1600
- queryParams: params,
1601
- queryParamsHandling: 'merge',
1602
- })
1603
- .toString();
1604
- // Abort redirect if the current URL is equal to the new URL.
1605
- if (__classPrivateFieldGet(this, _SkyTabsetPermalinkService_location, "f").isCurrentPathEqualTo(url)) {
1606
- return;
1607
- }
1608
- __classPrivateFieldGet(this, _SkyTabsetPermalinkService_location, "f").go(url);
1609
- }
1610
- /**
1611
- * Removes the provided query param from the URL.
1612
- */
1613
- clearParam(name) {
1614
- this.setParam(name, null);
1615
- }
1616
- /**
1617
- * Returns a relative URL that includes the provided query parameter. The value is intended to be
1618
- * used by an HTML anchor element.
1619
- */
1620
- getParamHref(name, value) {
1621
- if (!name) {
1622
- return null;
1623
- }
1624
- const params = __classPrivateFieldGet(this, _SkyTabsetPermalinkService_instances, "m", _SkyTabsetPermalinkService_getParams).call(this);
1625
- params[name] = value;
1626
- const baseUrl = __classPrivateFieldGet(this, _SkyTabsetPermalinkService_location, "f").path().split('?')[0];
1627
- const paramString = Object.keys(params)
1628
- .map((k) => `${k}=${params[k]}`)
1629
- .join('&');
1630
- return __classPrivateFieldGet(this, _SkyTabsetPermalinkService_location, "f").prepareExternalUrl(`${baseUrl}?${paramString}`);
1631
- }
1632
- /**
1633
- * Converts the provided string into a value that can be safely used in a URL.
1634
- */
1635
- urlify(value) {
1636
- if (!value) {
1637
- return '';
1638
- }
1639
- const sanitized = value
1640
- .toLowerCase()
1641
- // Remove special characters.
1642
- .replace(/[_~`@!#$%^&*()[\]{};:'/\\<>,.?=+|"]/g, '')
1643
- // Replace space characters with a dash.
1644
- .replace(/\s/g, '-')
1645
- // Remove any double-dashes.
1646
- .replace(/--/g, '-');
1647
- return sanitized;
1648
- }
1649
- }
1650
- _SkyTabsetPermalinkService_popStateChange = new WeakMap(), _SkyTabsetPermalinkService_subscription = new WeakMap(), _SkyTabsetPermalinkService_activatedRoute = new WeakMap(), _SkyTabsetPermalinkService_location = new WeakMap(), _SkyTabsetPermalinkService_router = new WeakMap(), _SkyTabsetPermalinkService_instances = new WeakSet(), _SkyTabsetPermalinkService_getParams = function _SkyTabsetPermalinkService_getParams() {
1651
- const params = {};
1652
- const path = __classPrivateFieldGet(this, _SkyTabsetPermalinkService_location, "f").path();
1653
- if (path.indexOf('?') === -1) {
1654
- return params;
1655
- }
1656
- const existingParamPairs = path.split('?')[1].split('&');
1657
- existingParamPairs.forEach((pair) => {
1658
- const fragments = pair.split('=');
1659
- params[fragments[0]] = decodeURIComponent(fragments[1]);
1660
- });
1661
- return params;
1662
- };
1663
- SkyTabsetPermalinkService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyTabsetPermalinkService, deps: [{ token: i1$1.ActivatedRoute }, { token: i4.Location }, { token: i1$1.Router }], target: i0.ɵɵFactoryTarget.Injectable });
1664
- SkyTabsetPermalinkService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyTabsetPermalinkService });
1665
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyTabsetPermalinkService, decorators: [{
1666
- type: Injectable
1667
- }], ctorParameters: function () { return [{ type: i1$1.ActivatedRoute }, { type: i4.Location }, { type: i1$1.Router }]; } });
1668
-
1669
- var _SkyTabComponent_instances, _SkyTabComponent__active, _SkyTabComponent_activeChange, _SkyTabComponent__permalinkValue, _SkyTabComponent_stateChange, _SkyTabComponent__tabHeading, _SkyTabComponent__tabIndex, _SkyTabComponent__layout, _SkyTabComponent_tabIndexChange, _SkyTabComponent_changeDetector, _SkyTabComponent_permalinkService, _SkyTabComponent_tabsetService, _SkyTabComponent_setPermalinkValueOrDefault;
1670
- const LAYOUT_CLASS_PREFIX = 'sky-layout-host-';
1671
- const LAYOUT_DEFAULT = 'none';
1672
- let nextId = 0;
1673
- class SkyTabComponent {
1674
- /**
1675
- * Whether the tab is active when the tabset loads. After initialization, the `active`
1676
- * property on the tabset component should be used to set the active tab.
1677
- * @default false
1678
- */
1679
- set active(value) {
1680
- if (value !== undefined && !!value !== __classPrivateFieldGet(this, _SkyTabComponent__active, "f")) {
1681
- __classPrivateFieldSet(this, _SkyTabComponent__active, value, "f");
1682
- __classPrivateFieldGet(this, _SkyTabComponent_activeChange, "f").next();
1683
- }
1684
- }
1685
- get active() {
1686
- return __classPrivateFieldGet(this, _SkyTabComponent__active, "f");
1687
- }
1688
- get activeChange() {
1689
- return __classPrivateFieldGet(this, _SkyTabComponent_activeChange, "f");
1690
- }
1691
- /**
1692
- * The custom query parameter value for the tab.
1693
- * This works in conjunction with the tabset's `permalinkId` to distinguish
1694
- * the tab's unique state in the URL by generating a query parameter that is
1695
- * written as `?<queryParam>-active-tab=<sanitized-tab-heading`.
1696
- * By default, the query parameter's value is parsed automatically from the tab's heading text.
1697
- * This input only applies when the tabset's `tabStyle` is `"tabs"`.
1698
- */
1699
- set permalinkValue(value) {
1700
- __classPrivateFieldSet(this, _SkyTabComponent__permalinkValue, value, "f");
1701
- __classPrivateFieldGet(this, _SkyTabComponent_instances, "m", _SkyTabComponent_setPermalinkValueOrDefault).call(this);
1702
- }
1703
- get permalinkValue() {
1704
- return __classPrivateFieldGet(this, _SkyTabComponent__permalinkValue, "f");
1705
- }
1706
- /**
1707
- * The tab header.
1708
- * When using tabs as the main navigation on a page,
1709
- * use [the Angular `Title` service](https://angular.io/docs/ts/latest/cookbook/set-document-title.html)
1710
- * and [the SKY UX `title` configuration property](https://developer.blackbaud.com/skyux/learn/reference/configuration#app)
1711
- * to reflect the tab header in the page title.
1712
- * @required
1713
- */
1714
- set tabHeading(value) {
1715
- __classPrivateFieldSet(this, _SkyTabComponent__tabHeading, value, "f");
1716
- __classPrivateFieldGet(this, _SkyTabComponent_instances, "m", _SkyTabComponent_setPermalinkValueOrDefault).call(this);
1717
- }
1718
- get tabHeading() {
1719
- return __classPrivateFieldGet(this, _SkyTabComponent__tabHeading, "f");
1720
- }
1721
- /**
1722
- * The unique identifier for the tab.
1723
- * If not defined, the identifier is set to the position of the tab on load, starting with `0`.
1724
- */
1725
- set tabIndex(value) {
1726
- if (value !== __classPrivateFieldGet(this, _SkyTabComponent__tabIndex, "f") &&
1727
- value !== undefined &&
1728
- __classPrivateFieldGet(this, _SkyTabComponent__tabIndex, "f") !== undefined) {
1729
- __classPrivateFieldGet(this, _SkyTabComponent_tabsetService, "f").updateTabIndex(__classPrivateFieldGet(this, _SkyTabComponent__tabIndex, "f"), value);
1730
- __classPrivateFieldGet(this, _SkyTabComponent_tabIndexChange, "f").next(value);
1731
- }
1732
- __classPrivateFieldSet(this, _SkyTabComponent__tabIndex, value, "f");
1733
- }
1734
- get tabIndex() {
1735
- return __classPrivateFieldGet(this, _SkyTabComponent__tabIndex, "f");
1736
- }
1737
- /**
1738
- * The page layout that corresponds with the top-level component type
1739
- * used on the page. For laying out custom content, use `auto` to allow
1740
- * the page contents to expand beyond the bottom of the browser window
1741
- * or `fit` to constrain the page contents to the available viewport.
1742
- * @default "auto"
1743
- */
1744
- set layout(value) {
1745
- const layout = value || LAYOUT_DEFAULT;
1746
- __classPrivateFieldSet(this, _SkyTabComponent__layout, layout, "f");
1747
- this.cssClass = `${LAYOUT_CLASS_PREFIX}${layout}`;
1748
- if (this.active) {
1749
- __classPrivateFieldGet(this, _SkyTabComponent_tabsetService, "f").updateActiveTabLayout(layout);
1750
- }
1751
- }
1752
- get layout() {
1753
- return __classPrivateFieldGet(this, _SkyTabComponent__layout, "f");
1754
- }
1755
- /**
1756
- * Alerts the tabset component when this component has changes that need to be reflected in the UI.
1757
- */
1758
- get stateChange() {
1759
- return __classPrivateFieldGet(this, _SkyTabComponent_stateChange, "f");
1760
- }
1761
- get tabIndexChange() {
1762
- return __classPrivateFieldGet(this, _SkyTabComponent_tabIndexChange, "f");
1763
- }
1764
- constructor(changeDetector, permalinkService, tabsetService) {
1765
- _SkyTabComponent_instances.add(this);
1766
- this.cssClass = `${LAYOUT_CLASS_PREFIX}${LAYOUT_DEFAULT}`;
1767
- /**
1768
- * Fires when users click the button to close the tab.
1769
- * The close button is added to the tab when you specify a listener for this event.
1770
- * This event only applies when the tabset's `tabStyle` is `"tabs"`.
1771
- */
1772
- this.close = new EventEmitter(); // eslint-disable-line @angular-eslint/no-output-native
1773
- this.permalinkValueOrDefault = '';
1774
- this.showContent = false;
1775
- _SkyTabComponent__active.set(this, false);
1776
- _SkyTabComponent_activeChange.set(this, void 0);
1777
- _SkyTabComponent__permalinkValue.set(this, void 0);
1778
- _SkyTabComponent_stateChange.set(this, void 0);
1779
- _SkyTabComponent__tabHeading.set(this, void 0);
1780
- _SkyTabComponent__tabIndex.set(this, void 0);
1781
- _SkyTabComponent__layout.set(this, LAYOUT_DEFAULT);
1782
- _SkyTabComponent_tabIndexChange.set(this, void 0);
1783
- _SkyTabComponent_changeDetector.set(this, void 0);
1784
- _SkyTabComponent_permalinkService.set(this, void 0);
1785
- _SkyTabComponent_tabsetService.set(this, void 0);
1786
- __classPrivateFieldSet(this, _SkyTabComponent_changeDetector, changeDetector, "f");
1787
- __classPrivateFieldSet(this, _SkyTabComponent_permalinkService, permalinkService, "f");
1788
- __classPrivateFieldSet(this, _SkyTabComponent_tabsetService, tabsetService, "f");
1789
- const id = nextId++;
1790
- this.tabPanelId = `sky-tab-${id}`;
1791
- this.tabButtonId = `${this.tabPanelId}-nav-btn`;
1792
- __classPrivateFieldSet(this, _SkyTabComponent_activeChange, new BehaviorSubject(undefined), "f");
1793
- __classPrivateFieldSet(this, _SkyTabComponent_stateChange, new BehaviorSubject(undefined), "f");
1794
- __classPrivateFieldSet(this, _SkyTabComponent_tabIndexChange, new BehaviorSubject(undefined), "f");
1795
- __classPrivateFieldGet(this, _SkyTabComponent_instances, "m", _SkyTabComponent_setPermalinkValueOrDefault).call(this);
1796
- }
1797
- ngOnChanges(changes) {
1798
- if ((changes['disabled'] && !changes['disabled'].firstChange) ||
1799
- (changes['tabHeading'] && !changes['tabHeading'].firstChange) ||
1800
- (changes['tabHeaderCount'] && !changes['tabHeaderCount'].firstChange) ||
1801
- (changes['permalinkValue'] && !changes['permalinkValue'].firstChange)) {
1802
- __classPrivateFieldGet(this, _SkyTabComponent_stateChange, "f").next();
1803
- }
1804
- }
1805
- ngOnDestroy() {
1806
- __classPrivateFieldGet(this, _SkyTabComponent_activeChange, "f").complete();
1807
- __classPrivateFieldGet(this, _SkyTabComponent_stateChange, "f").complete();
1808
- __classPrivateFieldGet(this, _SkyTabComponent_tabIndexChange, "f").complete();
1809
- if (this.tabIndex !== undefined) {
1810
- __classPrivateFieldGet(this, _SkyTabComponent_tabsetService, "f").unregisterTab(this.tabIndex);
1811
- }
1812
- }
1813
- init() {
1814
- __classPrivateFieldSet(this, _SkyTabComponent__tabIndex, __classPrivateFieldGet(this, _SkyTabComponent_tabsetService, "f").registerTab(this.tabIndex), "f");
1815
- }
1816
- activate() {
1817
- __classPrivateFieldSet(this, _SkyTabComponent__active, true, "f");
1818
- this.showContent = true;
1819
- __classPrivateFieldGet(this, _SkyTabComponent_changeDetector, "f").markForCheck();
1820
- }
1821
- deactivate() {
1822
- __classPrivateFieldSet(this, _SkyTabComponent__active, false, "f");
1823
- this.showContent = false;
1824
- __classPrivateFieldGet(this, _SkyTabComponent_changeDetector, "f").markForCheck();
1825
- }
1826
- isCloseable() {
1827
- return this.close.observers.length > 0;
1828
- }
1829
- }
1830
- _SkyTabComponent__active = new WeakMap(), _SkyTabComponent_activeChange = new WeakMap(), _SkyTabComponent__permalinkValue = new WeakMap(), _SkyTabComponent_stateChange = new WeakMap(), _SkyTabComponent__tabHeading = new WeakMap(), _SkyTabComponent__tabIndex = new WeakMap(), _SkyTabComponent__layout = new WeakMap(), _SkyTabComponent_tabIndexChange = new WeakMap(), _SkyTabComponent_changeDetector = new WeakMap(), _SkyTabComponent_permalinkService = new WeakMap(), _SkyTabComponent_tabsetService = new WeakMap(), _SkyTabComponent_instances = new WeakSet(), _SkyTabComponent_setPermalinkValueOrDefault = function _SkyTabComponent_setPermalinkValueOrDefault() {
1831
- this.permalinkValueOrDefault =
1832
- __classPrivateFieldGet(this, _SkyTabComponent_permalinkService, "f").urlify(this.permalinkValue) ||
1833
- __classPrivateFieldGet(this, _SkyTabComponent_permalinkService, "f").urlify(this.tabHeading);
1834
- };
1835
- SkyTabComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyTabComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: SkyTabsetPermalinkService }, { token: SkyTabsetService }], target: i0.ɵɵFactoryTarget.Component });
1836
- SkyTabComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: SkyTabComponent, selector: "sky-tab", inputs: { active: "active", disabled: "disabled", permalinkValue: "permalinkValue", tabHeaderCount: "tabHeaderCount", tabHeading: "tabHeading", tabIndex: "tabIndex", layout: "layout" }, outputs: { close: "close" }, host: { properties: { "class": "this.cssClass" } }, usesOnChanges: true, ngImport: i0, template: "<div\n class=\"sky-tab\"\n role=\"tabpanel\"\n [attr.aria-labelledby]=\"tabButtonId\"\n [hidden]=\"!showContent\"\n [id]=\"tabPanelId\"\n>\n <ng-content></ng-content>\n</div>\n", styles: [":host.sky-layout-host-fit{display:flex;flex-grow:1;position:static}:host.sky-layout-host-fit .sky-tab{flex-grow:1;position:relative}.sky-tab{flex-grow:var(--sky-layout-host-content-flex-grow, 0);overflow:var(--sky-layout-host-content-overflow, visible);padding:var(--sky-layout-host-content-spacing, 0);position:var(--sky-layout-host-content-position, static)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
1837
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyTabComponent, decorators: [{
1838
- type: Component,
1839
- args: [{ selector: 'sky-tab', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n class=\"sky-tab\"\n role=\"tabpanel\"\n [attr.aria-labelledby]=\"tabButtonId\"\n [hidden]=\"!showContent\"\n [id]=\"tabPanelId\"\n>\n <ng-content></ng-content>\n</div>\n", styles: [":host.sky-layout-host-fit{display:flex;flex-grow:1;position:static}:host.sky-layout-host-fit .sky-tab{flex-grow:1;position:relative}.sky-tab{flex-grow:var(--sky-layout-host-content-flex-grow, 0);overflow:var(--sky-layout-host-content-overflow, visible);padding:var(--sky-layout-host-content-spacing, 0);position:var(--sky-layout-host-content-position, static)}\n"] }]
1840
- }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: SkyTabsetPermalinkService }, { type: SkyTabsetService }]; }, propDecorators: { active: [{
1841
- type: Input
1842
- }], disabled: [{
1843
- type: Input
1844
- }], permalinkValue: [{
1845
- type: Input
1846
- }], tabHeaderCount: [{
1847
- type: Input
1848
- }], tabHeading: [{
1849
- type: Input
1850
- }], tabIndex: [{
1851
- type: Input
1852
- }], layout: [{
1853
- type: Input
1854
- }], cssClass: [{
1855
- type: HostBinding,
1856
- args: ['class']
1857
- }], close: [{
1858
- type: Output
1859
- }] } });
1860
-
1861
- class SkyTabsetNavButtonDisabledPipe {
1862
- transform(disabled, buttonType, tabToSelectExists, tabToSelectIsDisabled) {
1863
- if (disabled !== undefined) {
1864
- return disabled;
1865
- }
1866
- else if (buttonType === 'finish') {
1867
- return false;
1868
- }
1869
- return !tabToSelectExists || !!tabToSelectIsDisabled;
1870
- }
1871
- }
1872
- SkyTabsetNavButtonDisabledPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyTabsetNavButtonDisabledPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
1873
- SkyTabsetNavButtonDisabledPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "15.2.9", ngImport: i0, type: SkyTabsetNavButtonDisabledPipe, name: "skyTabsetNavButtonDisabled" });
1874
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyTabsetNavButtonDisabledPipe, decorators: [{
1875
- type: Pipe,
1876
- args: [{
1877
- name: 'skyTabsetNavButtonDisabled',
1878
- }]
1879
- }] });
1880
-
1881
- var _SkyTabsetNavButtonComponent_instances, _SkyTabsetNavButtonComponent__buttonType, _SkyTabsetNavButtonComponent__disabled, _SkyTabsetNavButtonComponent__tabset, _SkyTabsetNavButtonComponent_activeIndexNumber, _SkyTabsetNavButtonComponent_activeSkyTabIndex, _SkyTabsetNavButtonComponent_currentTabsetSub, _SkyTabsetNavButtonComponent_logger, _SkyTabsetNavButtonComponent_tabCount, _SkyTabsetNavButtonComponent_ngUnsubscribe, _SkyTabsetNavButtonComponent_updateButtonVisibility, _SkyTabsetNavButtonComponent_updateButtonProperties, _SkyTabsetNavButtonComponent_updateTabToSelect;
1882
- const buttonTypeNext = 'next';
1883
- const buttonTypePrevious = 'previous';
1884
- const buttonTypeFinish = 'finish';
1885
- class SkyTabsetNavButtonComponent {
1886
- /**
1887
- * The tabset wizard component to associate with the nav button.
1888
- * @required
1889
- */
1890
- get tabset() {
1891
- return __classPrivateFieldGet(this, _SkyTabsetNavButtonComponent__tabset, "f");
1892
- }
1893
- set tabset(value) {
1894
- __classPrivateFieldSet(this, _SkyTabsetNavButtonComponent__tabset, value, "f");
1895
- if (__classPrivateFieldGet(this, _SkyTabsetNavButtonComponent_currentTabsetSub, "f")) {
1896
- __classPrivateFieldGet(this, _SkyTabsetNavButtonComponent_currentTabsetSub, "f").unsubscribe();
1897
- }
1898
- if (value) {
1899
- __classPrivateFieldSet(this, _SkyTabsetNavButtonComponent_currentTabsetSub, value.activeChange
1900
- .pipe(distinctUntilChanged(), takeUntil(__classPrivateFieldGet(this, _SkyTabsetNavButtonComponent_ngUnsubscribe, "f")))
1901
- .subscribe((index) => {
1902
- __classPrivateFieldSet(this, _SkyTabsetNavButtonComponent_activeSkyTabIndex, index, "f");
1903
- __classPrivateFieldSet(this, _SkyTabsetNavButtonComponent_tabCount, __classPrivateFieldGet(this, _SkyTabsetNavButtonComponent__tabset, "f")?.tabs?.length, "f");
1904
- __classPrivateFieldGet(this, _SkyTabsetNavButtonComponent_instances, "m", _SkyTabsetNavButtonComponent_updateTabToSelect).call(this);
1905
- __classPrivateFieldGet(this, _SkyTabsetNavButtonComponent_instances, "m", _SkyTabsetNavButtonComponent_updateButtonVisibility).call(this);
1906
- __classPrivateFieldGet(this, _SkyTabsetNavButtonComponent_instances, "m", _SkyTabsetNavButtonComponent_updateButtonProperties).call(this);
1907
- }), "f");
1908
- }
1909
- else {
1910
- __classPrivateFieldGet(this, _SkyTabsetNavButtonComponent_logger, "f").error('The SkyTabsetNavButtonComponent requires a reference to the SkyTabsetComponent it controls.');
1911
- }
1912
- }
1913
- /**
1914
- * The type of nav button to include.
1915
- * @required
1916
- */
1917
- get buttonType() {
1918
- return __classPrivateFieldGet(this, _SkyTabsetNavButtonComponent__buttonType, "f");
1919
- }
1920
- set buttonType(value) {
1921
- __classPrivateFieldSet(this, _SkyTabsetNavButtonComponent__buttonType, value, "f");
1922
- __classPrivateFieldGet(this, _SkyTabsetNavButtonComponent_instances, "m", _SkyTabsetNavButtonComponent_updateTabToSelect).call(this);
1923
- __classPrivateFieldGet(this, _SkyTabsetNavButtonComponent_instances, "m", _SkyTabsetNavButtonComponent_updateButtonProperties).call(this);
1924
- __classPrivateFieldGet(this, _SkyTabsetNavButtonComponent_instances, "m", _SkyTabsetNavButtonComponent_updateButtonVisibility).call(this);
1925
- if (value === buttonTypeFinish) {
1926
- this.type = 'submit';
1927
- }
1928
- else {
1929
- this.type = 'button';
1930
- }
1931
- }
1932
- /**
1933
- * Whether to disable the nav button.
1934
- * Defaults to the disabled state of the next tab for `next`, the existence of a previous tab for `previous`,
1935
- * and false for `finish`.
1936
- */
1937
- set disabled(value) {
1938
- __classPrivateFieldSet(this, _SkyTabsetNavButtonComponent__disabled, value, "f");
1939
- }
1940
- get disabled() {
1941
- return __classPrivateFieldGet(this, _SkyTabsetNavButtonComponent__disabled, "f");
1942
- }
1943
- constructor(logger) {
1944
- _SkyTabsetNavButtonComponent_instances.add(this);
1945
- this.isVisible = false;
1946
- this.type = 'submit';
1947
- _SkyTabsetNavButtonComponent__buttonType.set(this, void 0);
1948
- _SkyTabsetNavButtonComponent__disabled.set(this, void 0);
1949
- _SkyTabsetNavButtonComponent__tabset.set(this, void 0);
1950
- _SkyTabsetNavButtonComponent_activeIndexNumber.set(this, void 0);
1951
- _SkyTabsetNavButtonComponent_activeSkyTabIndex.set(this, void 0);
1952
- _SkyTabsetNavButtonComponent_currentTabsetSub.set(this, void 0);
1953
- _SkyTabsetNavButtonComponent_logger.set(this, void 0);
1954
- _SkyTabsetNavButtonComponent_tabCount.set(this, void 0);
1955
- _SkyTabsetNavButtonComponent_ngUnsubscribe.set(this, new Subject());
1956
- __classPrivateFieldSet(this, _SkyTabsetNavButtonComponent_logger, logger, "f");
1957
- }
1958
- ngOnDestroy() {
1959
- __classPrivateFieldGet(this, _SkyTabsetNavButtonComponent_ngUnsubscribe, "f").next();
1960
- __classPrivateFieldGet(this, _SkyTabsetNavButtonComponent_ngUnsubscribe, "f").complete();
1961
- }
1962
- buttonClick() {
1963
- /* istanbul ignore else */
1964
- if (this.tabToSelect && !this.tabToSelect.disabled && this.tabset) {
1965
- this.tabset.active = this.tabToSelect.tabIndex;
1966
- }
1967
- }
1968
- }
1969
- _SkyTabsetNavButtonComponent__buttonType = new WeakMap(), _SkyTabsetNavButtonComponent__disabled = new WeakMap(), _SkyTabsetNavButtonComponent__tabset = new WeakMap(), _SkyTabsetNavButtonComponent_activeIndexNumber = new WeakMap(), _SkyTabsetNavButtonComponent_activeSkyTabIndex = new WeakMap(), _SkyTabsetNavButtonComponent_currentTabsetSub = new WeakMap(), _SkyTabsetNavButtonComponent_logger = new WeakMap(), _SkyTabsetNavButtonComponent_tabCount = new WeakMap(), _SkyTabsetNavButtonComponent_ngUnsubscribe = new WeakMap(), _SkyTabsetNavButtonComponent_instances = new WeakSet(), _SkyTabsetNavButtonComponent_updateButtonVisibility = function _SkyTabsetNavButtonComponent_updateButtonVisibility() {
1970
- const isLastStep = !!__classPrivateFieldGet(this, _SkyTabsetNavButtonComponent_tabCount, "f") && __classPrivateFieldGet(this, _SkyTabsetNavButtonComponent_activeIndexNumber, "f") === __classPrivateFieldGet(this, _SkyTabsetNavButtonComponent_tabCount, "f") - 1;
1971
- if (this.buttonType === buttonTypeFinish) {
1972
- this.isVisible = isLastStep;
1973
- }
1974
- else if (this.buttonType === buttonTypeNext) {
1975
- this.isVisible = !isLastStep;
1976
- }
1977
- else {
1978
- this.isVisible = true;
1979
- }
1980
- }, _SkyTabsetNavButtonComponent_updateButtonProperties = function _SkyTabsetNavButtonComponent_updateButtonProperties() {
1981
- if (this.buttonType === buttonTypeNext ||
1982
- this.buttonType === buttonTypeFinish) {
1983
- this.buttonClassName = 'sky-btn-primary';
1984
- }
1985
- else {
1986
- this.buttonClassName = 'sky-btn-default';
1987
- }
1988
- this.ariaControls = this.tabToSelect?.tabPanelId;
1989
- }, _SkyTabsetNavButtonComponent_updateTabToSelect = function _SkyTabsetNavButtonComponent_updateTabToSelect() {
1990
- if (this.tabset?.tabs) {
1991
- const tabs = this.tabset.tabs.toArray();
1992
- this.tabToSelect = undefined;
1993
- // tab index can be a number or a string, but we need the actual number index
1994
- __classPrivateFieldSet(this, _SkyTabsetNavButtonComponent_activeIndexNumber, tabs.findIndex((tab) => tab.tabIndex === __classPrivateFieldGet(this, _SkyTabsetNavButtonComponent_activeSkyTabIndex, "f")), "f");
1995
- /* istanbul ignore else */
1996
- if (__classPrivateFieldGet(this, _SkyTabsetNavButtonComponent_activeIndexNumber, "f") !== undefined) {
1997
- if (this.buttonType === buttonTypeNext) {
1998
- this.tabToSelect = tabs[__classPrivateFieldGet(this, _SkyTabsetNavButtonComponent_activeIndexNumber, "f") + 1];
1999
- }
2000
- else if (this.buttonType === buttonTypePrevious) {
2001
- this.tabToSelect = tabs[__classPrivateFieldGet(this, _SkyTabsetNavButtonComponent_activeIndexNumber, "f") - 1];
2002
- }
2003
- }
2004
- }
2005
- };
2006
- SkyTabsetNavButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyTabsetNavButtonComponent, deps: [{ token: i1.SkyLogService }], target: i0.ɵɵFactoryTarget.Component });
2007
- SkyTabsetNavButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: SkyTabsetNavButtonComponent, selector: "sky-tabset-nav-button", inputs: { tabset: "tabset", buttonType: "buttonType", buttonText: "buttonText", disabled: "disabled" }, ngImport: i0, template: "<button\n *ngIf=\"isVisible\"\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", dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i3.SkyLibResourcesPipe, name: "skyLibResources" }, { kind: "pipe", type: SkyTabsetNavButtonDisabledPipe, name: "skyTabsetNavButtonDisabled" }] });
2008
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyTabsetNavButtonComponent, decorators: [{
2009
- type: Component,
2010
- args: [{ selector: 'sky-tabset-nav-button', template: "<button\n *ngIf=\"isVisible\"\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" }]
2011
- }], ctorParameters: function () { return [{ type: i1.SkyLogService }]; }, propDecorators: { tabset: [{
2012
- type: Input
2013
- }], buttonType: [{
2014
- type: Input
2015
- }], buttonText: [{
2016
- type: Input
2017
- }], disabled: [{
2018
- type: Input
2019
- }] } });
2020
-
2021
- var _SkyTabsetAdapterService_instances, _SkyTabsetAdapterService_currentOverflow, _SkyTabsetAdapterService_tabsetRef, _SkyTabsetAdapterService_tabsOffsetLeft, _SkyTabsetAdapterService_overflowChange, _SkyTabsetAdapterService_getTabsOffsetLeft;
2022
- /**
2023
- * @internal
2024
- */
2025
- class SkyTabsetAdapterService {
2026
- get overflowChange() {
2027
- return __classPrivateFieldGet(this, _SkyTabsetAdapterService_overflowChange, "f");
2028
- }
2029
- constructor() {
2030
- _SkyTabsetAdapterService_instances.add(this);
2031
- _SkyTabsetAdapterService_currentOverflow.set(this, false);
2032
- _SkyTabsetAdapterService_tabsetRef.set(this, void 0);
2033
- _SkyTabsetAdapterService_tabsOffsetLeft.set(this, void 0);
2034
- _SkyTabsetAdapterService_overflowChange.set(this, void 0);
2035
- __classPrivateFieldSet(this, _SkyTabsetAdapterService_overflowChange, new BehaviorSubject(false), "f");
2036
- }
2037
- ngOnDestroy() {
2038
- __classPrivateFieldGet(this, _SkyTabsetAdapterService_overflowChange, "f").complete();
2039
- }
2040
- registerTabset(tabsetRef) {
2041
- __classPrivateFieldSet(this, _SkyTabsetAdapterService_tabsetRef, tabsetRef, "f");
2042
- __classPrivateFieldSet(this, _SkyTabsetAdapterService_tabsOffsetLeft, __classPrivateFieldGet(this, _SkyTabsetAdapterService_instances, "m", _SkyTabsetAdapterService_getTabsOffsetLeft).call(this, tabsetRef.nativeElement), "f");
2043
- }
2044
- /**
2045
- * Detects if the tab buttons are wider than the tabset container.
2046
- */
2047
- detectOverflow() {
2048
- const nativeElement = __classPrivateFieldGet(this, _SkyTabsetAdapterService_tabsetRef, "f")?.nativeElement;
2049
- const tabsetRect = nativeElement
2050
- .querySelector('.sky-tabset')
2051
- .getBoundingClientRect();
2052
- const tabButtonsRect = nativeElement
2053
- .querySelector('.sky-tabset-tabs')
2054
- .getBoundingClientRect();
2055
- const tabExtraButtonsRect = nativeElement
2056
- .querySelector('.sky-tabset-btns')
2057
- .getBoundingClientRect();
2058
- const tabButtonsWidth = tabButtonsRect.width + tabExtraButtonsRect.width + __classPrivateFieldGet(this, _SkyTabsetAdapterService_tabsOffsetLeft, "f");
2059
- const newOverflow = tabButtonsWidth > tabsetRect.width;
2060
- if (__classPrivateFieldGet(this, _SkyTabsetAdapterService_currentOverflow, "f") !== newOverflow) {
2061
- __classPrivateFieldSet(this, _SkyTabsetAdapterService_currentOverflow, newOverflow, "f");
2062
- __classPrivateFieldGet(this, _SkyTabsetAdapterService_overflowChange, "f").next(__classPrivateFieldGet(this, _SkyTabsetAdapterService_currentOverflow, "f"));
2063
- }
2064
- }
2065
- }
2066
- _SkyTabsetAdapterService_currentOverflow = new WeakMap(), _SkyTabsetAdapterService_tabsetRef = new WeakMap(), _SkyTabsetAdapterService_tabsOffsetLeft = new WeakMap(), _SkyTabsetAdapterService_overflowChange = new WeakMap(), _SkyTabsetAdapterService_instances = new WeakSet(), _SkyTabsetAdapterService_getTabsOffsetLeft = function _SkyTabsetAdapterService_getTabsOffsetLeft(tabsetEl) {
2067
- const tabsetRect = tabsetEl.getBoundingClientRect();
2068
- // The dropdown element is the first "tab" and always exists in the DOM, even when hidden.
2069
- const firstTabRect = tabsetEl
2070
- .querySelector('.sky-tabset-dropdown')
2071
- ?.getBoundingClientRect();
2072
- // Safety check
2073
- /* istanbul ignore next */
2074
- if (!firstTabRect) {
2075
- return 0;
2076
- }
2077
- return firstTabRect.left - tabsetRect.left;
2078
- };
2079
- SkyTabsetAdapterService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyTabsetAdapterService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
2080
- SkyTabsetAdapterService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyTabsetAdapterService });
2081
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyTabsetAdapterService, decorators: [{
2082
- type: Injectable
2083
- }], ctorParameters: function () { return []; } });
2084
-
2085
- var _SkyTabsetComponent_instances, _SkyTabsetComponent_ngUnsubscribe, _SkyTabsetComponent_tabComponentsChangeUnsubscribe, _SkyTabsetComponent_tabComponentsStateChangeUnsubscribe, _SkyTabsetComponent__active, _SkyTabsetComponent__permalinkId, _SkyTabsetComponent__tabs, _SkyTabsetComponent__tabDisplayMode, _SkyTabsetComponent__tabStyle, _SkyTabsetComponent_changeDetector, _SkyTabsetComponent_elementRef, _SkyTabsetComponent_adapterService, _SkyTabsetComponent_permalinkService, _SkyTabsetComponent_tabsetService, _SkyTabsetComponent_layoutHostSvc, _SkyTabsetComponent_getInitialTabIndex, _SkyTabsetComponent_listenActiveIndexChange, _SkyTabsetComponent_updateLayout, _SkyTabsetComponent_listenTabComponentsStateChange, _SkyTabsetComponent_initTabComponents, _SkyTabsetComponent_resetTabComponents, _SkyTabsetComponent_emitTabIndexChange, _SkyTabsetComponent_unsubscribeTabComponentsStateChange, _SkyTabsetComponent_listenTabButtonsOverflowChange, _SkyTabsetComponent_listenLocationPopStateChange, _SkyTabsetComponent_setActiveTabIndexByPermalinkId, _SkyTabsetComponent_getActiveTabIndexByPermalinkId, _SkyTabsetComponent_getActiveTabComponent, _SkyTabsetComponent_createTabButtons, _SkyTabsetComponent_updateTabButtons, _SkyTabsetComponent_updateTabsetComponent;
2086
- class SkyTabsetComponent {
2087
- /**
2088
- * Activates a tab by its `tabIndex` property.
2089
- */
2090
- set active(value) {
2091
- if (value === undefined ||
2092
- __classPrivateFieldGet(this, _SkyTabsetComponent_tabsetService, "f").tabIndexesEqual(value, __classPrivateFieldGet(this, _SkyTabsetComponent__active, "f"))) {
2093
- return;
2094
- }
2095
- __classPrivateFieldSet(this, _SkyTabsetComponent__active, value, "f");
2096
- if (this.tabs) {
2097
- __classPrivateFieldGet(this, _SkyTabsetComponent_tabsetService, "f").setActiveTabIndex(value);
2098
- }
2099
- else {
2100
- // On init, wait for children tabs to render before broadcasting the active tab index.
2101
- setTimeout(() => {
2102
- if (__classPrivateFieldGet(this, _SkyTabsetComponent_tabsetService, "f").isValidTabIndex(value)) {
2103
- // On init, yield to the permalink ID, if it exists.
2104
- if (__classPrivateFieldGet(this, _SkyTabsetComponent_instances, "m", _SkyTabsetComponent_getActiveTabIndexByPermalinkId).call(this) === undefined) {
2105
- __classPrivateFieldGet(this, _SkyTabsetComponent_tabsetService, "f").setActiveTabIndex(value);
2106
- }
2107
- }
2108
- else {
2109
- // Activate the first tab if the new tab index is invalid.
2110
- __classPrivateFieldSet(this, _SkyTabsetComponent__active, __classPrivateFieldGet(this, _SkyTabsetComponent_tabsetService, "f").activateFirstTab(), "f");
2111
- }
2112
- });
2113
- }
2114
- }
2115
- get active() {
2116
- return __classPrivateFieldGet(this, _SkyTabsetComponent__active, "f");
2117
- }
2118
- /**
2119
- * Distinguishes a tabset's unique state in the URL by generating a query parameter
2120
- * that is written as `?<queryParam>-active-tab=<sanitized-tab-heading>`.
2121
- * The query parameter's value is parsed automatically from the selected tab's heading text,
2122
- * but you can supply a custom query parameter value for each tab with its `permalinkValue`.
2123
- * This input only applies when `tabStyle` is `"tabs"`
2124
- */
2125
- set permalinkId(value) {
2126
- if (!value) {
2127
- __classPrivateFieldSet(this, _SkyTabsetComponent__permalinkId, '', "f");
2128
- }
2129
- else {
2130
- const sanitized = __classPrivateFieldGet(this, _SkyTabsetComponent_permalinkService, "f").urlify(value);
2131
- __classPrivateFieldSet(this, _SkyTabsetComponent__permalinkId, `${sanitized}-active-tab`, "f");
2132
- }
2133
- }
2134
- get permalinkId() {
2135
- return __classPrivateFieldGet(this, _SkyTabsetComponent__permalinkId, "f");
2136
- }
2137
- /**
2138
- * The behavior for a series of tabs.
2139
- * @default "tabs"
2140
- */
2141
- set tabStyle(value) {
2142
- __classPrivateFieldSet(this, _SkyTabsetComponent__tabStyle, value || 'tabs', "f");
2143
- }
2144
- get tabStyle() {
2145
- return __classPrivateFieldGet(this, _SkyTabsetComponent__tabStyle, "f");
2146
- }
2147
- set tabDisplayMode(value) {
2148
- __classPrivateFieldSet(this, _SkyTabsetComponent__tabDisplayMode, value, "f");
2149
- __classPrivateFieldGet(this, _SkyTabsetComponent_changeDetector, "f").markForCheck();
2150
- }
2151
- get tabDisplayMode() {
2152
- return __classPrivateFieldGet(this, _SkyTabsetComponent__tabDisplayMode, "f");
2153
- }
2154
- set tabs(value) {
2155
- __classPrivateFieldSet(this, _SkyTabsetComponent__tabs, value, "f");
2156
- __classPrivateFieldGet(this, _SkyTabsetComponent_tabComponentsChangeUnsubscribe, "f").next();
2157
- value?.changes
2158
- .pipe(takeUntil(__classPrivateFieldGet(this, _SkyTabsetComponent_tabComponentsChangeUnsubscribe, "f")))
2159
- .subscribe(() => {
2160
- __classPrivateFieldGet(this, _SkyTabsetComponent_instances, "m", _SkyTabsetComponent_resetTabComponents).call(this);
2161
- });
2162
- }
2163
- get tabs() {
2164
- return __classPrivateFieldGet(this, _SkyTabsetComponent__tabs, "f");
2165
- }
2166
- constructor(changeDetector, elementRef, adapterService, permalinkService, tabsetService) {
2167
- _SkyTabsetComponent_instances.add(this);
2168
- /**
2169
- * Fires when the active tab changes. This event emits the index of the active tab.
2170
- */
2171
- this.activeChange = new EventEmitter();
2172
- /**
2173
- * Fires when users click the button to add a new tab.
2174
- * The new tab button is added to the tab area when you specify a listener for this event.
2175
- * This event only applies when `tabStyle` is `"tabs"`.
2176
- */
2177
- this.newTab = new EventEmitter();
2178
- /**
2179
- * Fires when users click the button to open a tab.
2180
- * The open tab button is added to the tab area when you specify a listener for this event.
2181
- * This event only applies when `tabStyle` is `"tabs"`.
2182
- */
2183
- this.openTab = new EventEmitter();
2184
- /**
2185
- * Fires when any tab's `tabIndex` value changes.
2186
- * This event only applies when `tabStyle` is `"tabs"`.
2187
- */
2188
- this.tabIndexesChange = new EventEmitter();
2189
- this.cssClass = 'sky-tabset-layout-none';
2190
- this.dropdownTriggerButtonText = '';
2191
- this.tabButtons = [];
2192
- _SkyTabsetComponent_ngUnsubscribe.set(this, new Subject());
2193
- _SkyTabsetComponent_tabComponentsChangeUnsubscribe.set(this, new Subject());
2194
- _SkyTabsetComponent_tabComponentsStateChangeUnsubscribe.set(this, new Subject());
2195
- _SkyTabsetComponent__active.set(this, void 0);
2196
- _SkyTabsetComponent__permalinkId.set(this, '');
2197
- _SkyTabsetComponent__tabs.set(this, void 0);
2198
- _SkyTabsetComponent__tabDisplayMode.set(this, 'tabs');
2199
- _SkyTabsetComponent__tabStyle.set(this, 'tabs');
2200
- _SkyTabsetComponent_changeDetector.set(this, void 0);
2201
- _SkyTabsetComponent_elementRef.set(this, void 0);
2202
- _SkyTabsetComponent_adapterService.set(this, void 0);
2203
- _SkyTabsetComponent_permalinkService.set(this, void 0);
2204
- _SkyTabsetComponent_tabsetService.set(this, void 0);
2205
- _SkyTabsetComponent_layoutHostSvc.set(this, inject(SkyLayoutHostService, { optional: true }));
2206
- __classPrivateFieldSet(this, _SkyTabsetComponent_changeDetector, changeDetector, "f");
2207
- __classPrivateFieldSet(this, _SkyTabsetComponent_elementRef, elementRef, "f");
2208
- __classPrivateFieldSet(this, _SkyTabsetComponent_adapterService, adapterService, "f");
2209
- __classPrivateFieldSet(this, _SkyTabsetComponent_permalinkService, permalinkService, "f");
2210
- __classPrivateFieldSet(this, _SkyTabsetComponent_tabsetService, tabsetService, "f");
2211
- }
2212
- ngAfterViewInit() {
2213
- __classPrivateFieldGet(this, _SkyTabsetComponent_instances, "m", _SkyTabsetComponent_initTabComponents).call(this);
2214
- const initialTabIndex = __classPrivateFieldGet(this, _SkyTabsetComponent_instances, "m", _SkyTabsetComponent_getInitialTabIndex).call(this);
2215
- __classPrivateFieldGet(this, _SkyTabsetComponent_tabsetService, "f").setActiveTabIndex(initialTabIndex);
2216
- __classPrivateFieldGet(this, _SkyTabsetComponent_instances, "m", _SkyTabsetComponent_listenTabButtonsOverflowChange).call(this);
2217
- __classPrivateFieldGet(this, _SkyTabsetComponent_instances, "m", _SkyTabsetComponent_listenLocationPopStateChange).call(this);
2218
- // If the currently active tab is getting unregistered, activate the next one.
2219
- __classPrivateFieldGet(this, _SkyTabsetComponent_tabsetService, "f").activeTabUnregistered
2220
- .pipe(takeUntil(__classPrivateFieldGet(this, _SkyTabsetComponent_ngUnsubscribe, "f")))
2221
- .subscribe((tab) => {
2222
- // Wait for the new tabs to render before activating.
2223
- setTimeout(() => {
2224
- __classPrivateFieldGet(this, _SkyTabsetComponent_tabsetService, "f").activateNearestTab(tab.arrayIndex);
2225
- });
2226
- });
2227
- __classPrivateFieldGet(this, _SkyTabsetComponent_tabsetService, "f").activeTabLayout
2228
- .pipe(takeUntil(__classPrivateFieldGet(this, _SkyTabsetComponent_ngUnsubscribe, "f")))
2229
- .subscribe((layout) => {
2230
- __classPrivateFieldGet(this, _SkyTabsetComponent_instances, "m", _SkyTabsetComponent_updateLayout).call(this, layout);
2231
- });
2232
- // Let the tabset render the initial active index before listening for changes.
2233
- setTimeout(() => {
2234
- __classPrivateFieldGet(this, _SkyTabsetComponent_instances, "m", _SkyTabsetComponent_listenTabComponentsStateChange).call(this);
2235
- __classPrivateFieldGet(this, _SkyTabsetComponent_instances, "m", _SkyTabsetComponent_listenActiveIndexChange).call(this);
2236
- __classPrivateFieldGet(this, _SkyTabsetComponent_permalinkService, "f").init();
2237
- });
2238
- }
2239
- ngOnDestroy() {
2240
- __classPrivateFieldGet(this, _SkyTabsetComponent_ngUnsubscribe, "f").next();
2241
- __classPrivateFieldGet(this, _SkyTabsetComponent_ngUnsubscribe, "f").complete();
2242
- __classPrivateFieldGet(this, _SkyTabsetComponent_tabComponentsChangeUnsubscribe, "f").next();
2243
- __classPrivateFieldGet(this, _SkyTabsetComponent_tabComponentsChangeUnsubscribe, "f").complete();
2244
- __classPrivateFieldGet(this, _SkyTabsetComponent_instances, "m", _SkyTabsetComponent_unsubscribeTabComponentsStateChange).call(this);
2245
- if (this.permalinkId) {
2246
- __classPrivateFieldGet(this, _SkyTabsetComponent_permalinkService, "f").clearParam(this.permalinkId);
2247
- }
2248
- }
2249
- onWindowResize() {
2250
- __classPrivateFieldGet(this, _SkyTabsetComponent_adapterService, "f").detectOverflow();
2251
- }
2252
- onTabCloseClick(tabButton) {
2253
- const tabComponent = this.tabs?.find((tab) => __classPrivateFieldGet(this, _SkyTabsetComponent_tabsetService, "f").tabIndexesEqual(tab.tabIndex, tabButton.tabIndex));
2254
- tabComponent?.close.emit();
2255
- }
2256
- onTabButtonClick(tabButton) {
2257
- __classPrivateFieldGet(this, _SkyTabsetComponent_tabsetService, "f").setActiveTabIndex(tabButton.tabIndex);
2258
- }
2259
- onNewTabClick() {
2260
- this.newTab.emit();
2261
- }
2262
- onOpenTabClick() {
2263
- this.openTab.emit();
2264
- }
2265
- onRightKeyDown() {
2266
- __classPrivateFieldGet(this, _SkyTabsetComponent_tabsetService, "f").focusNextTabBtn(this.tabButtons);
2267
- }
2268
- onLeftKeyDown() {
2269
- __classPrivateFieldGet(this, _SkyTabsetComponent_tabsetService, "f").focusPrevTabBtn(this.tabButtons);
2270
- }
2271
- onHomeKeyDown() {
2272
- __classPrivateFieldGet(this, _SkyTabsetComponent_tabsetService, "f").focusFirstOrNearestTabBtn(this.tabButtons);
2273
- }
2274
- onEndKeyDown() {
2275
- __classPrivateFieldGet(this, _SkyTabsetComponent_tabsetService, "f").focusLastOrNearestTabBtn(this.tabButtons);
2276
- }
2277
- }
2278
- _SkyTabsetComponent_ngUnsubscribe = new WeakMap(), _SkyTabsetComponent_tabComponentsChangeUnsubscribe = new WeakMap(), _SkyTabsetComponent_tabComponentsStateChangeUnsubscribe = new WeakMap(), _SkyTabsetComponent__active = new WeakMap(), _SkyTabsetComponent__permalinkId = new WeakMap(), _SkyTabsetComponent__tabs = new WeakMap(), _SkyTabsetComponent__tabDisplayMode = new WeakMap(), _SkyTabsetComponent__tabStyle = new WeakMap(), _SkyTabsetComponent_changeDetector = new WeakMap(), _SkyTabsetComponent_elementRef = new WeakMap(), _SkyTabsetComponent_adapterService = new WeakMap(), _SkyTabsetComponent_permalinkService = new WeakMap(), _SkyTabsetComponent_tabsetService = new WeakMap(), _SkyTabsetComponent_layoutHostSvc = new WeakMap(), _SkyTabsetComponent_instances = new WeakSet(), _SkyTabsetComponent_getInitialTabIndex = function _SkyTabsetComponent_getInitialTabIndex() {
2279
- let activeIndex = __classPrivateFieldGet(this, _SkyTabsetComponent_instances, "m", _SkyTabsetComponent_getActiveTabIndexByPermalinkId).call(this);
2280
- if (activeIndex === undefined) {
2281
- activeIndex = __classPrivateFieldGet(this, _SkyTabsetComponent_instances, "m", _SkyTabsetComponent_getActiveTabComponent).call(this)?.tabIndex;
2282
- if (activeIndex === undefined) {
2283
- activeIndex = this.active;
2284
- }
2285
- }
2286
- return activeIndex;
2287
- }, _SkyTabsetComponent_listenActiveIndexChange = function _SkyTabsetComponent_listenActiveIndexChange() {
2288
- __classPrivateFieldGet(this, _SkyTabsetComponent_tabsetService, "f").activeTabIndex
2289
- .pipe(distinctUntilChanged(), takeUntil(__classPrivateFieldGet(this, _SkyTabsetComponent_ngUnsubscribe, "f")))
2290
- .subscribe((activeIndex) => {
2291
- __classPrivateFieldGet(this, _SkyTabsetComponent_instances, "m", _SkyTabsetComponent_updateTabsetComponent).call(this, activeIndex);
2292
- const activeTab = __classPrivateFieldGet(this, _SkyTabsetComponent_instances, "m", _SkyTabsetComponent_getActiveTabComponent).call(this);
2293
- __classPrivateFieldGet(this, _SkyTabsetComponent_instances, "m", _SkyTabsetComponent_updateLayout).call(this, activeTab?.layout);
2294
- });
2295
- }, _SkyTabsetComponent_updateLayout = function _SkyTabsetComponent_updateLayout(layout) {
2296
- if (__classPrivateFieldGet(this, _SkyTabsetComponent_layoutHostSvc, "f") && layout) {
2297
- __classPrivateFieldGet(this, _SkyTabsetComponent_layoutHostSvc, "f").setHostLayoutForChild({
2298
- layout,
2299
- });
2300
- this.cssClass = `sky-tabset-layout-${layout}`;
2301
- }
2302
- }, _SkyTabsetComponent_listenTabComponentsStateChange = function _SkyTabsetComponent_listenTabComponentsStateChange() {
2303
- if (this.tabs) {
2304
- combineLatest(this.tabs.map((tab) => tab.activeChange))
2305
- .pipe(takeUntil(race(__classPrivateFieldGet(this, _SkyTabsetComponent_tabComponentsStateChangeUnsubscribe, "f"), __classPrivateFieldGet(this, _SkyTabsetComponent_ngUnsubscribe, "f"))))
2306
- .subscribe(() => {
2307
- // Wait for the tab components to render changes before finding the active one.
2308
- setTimeout(() => {
2309
- const tabIndex = __classPrivateFieldGet(this, _SkyTabsetComponent_instances, "m", _SkyTabsetComponent_getActiveTabComponent).call(this)?.tabIndex;
2310
- __classPrivateFieldGet(this, _SkyTabsetComponent_tabsetService, "f").setActiveTabIndex(tabIndex);
2311
- });
2312
- });
2313
- combineLatest(this.tabs.map((tab) => tab.tabIndexChange))
2314
- .pipe(takeUntil(race(__classPrivateFieldGet(this, _SkyTabsetComponent_tabComponentsStateChangeUnsubscribe, "f"), __classPrivateFieldGet(this, _SkyTabsetComponent_ngUnsubscribe, "f"))))
2315
- .subscribe(() => {
2316
- // Don't emit the first change.
2317
- if (this.lastActiveTabIndex !== undefined) {
2318
- // Wait for the tab components to render changes before updating the view.
2319
- setTimeout(() => {
2320
- __classPrivateFieldGet(this, _SkyTabsetComponent_instances, "m", _SkyTabsetComponent_updateTabsetComponent).call(this, __classPrivateFieldGet(this, _SkyTabsetComponent_tabsetService, "f").currentActiveTabIndex, true);
2321
- __classPrivateFieldGet(this, _SkyTabsetComponent_instances, "m", _SkyTabsetComponent_emitTabIndexChange).call(this);
2322
- });
2323
- }
2324
- });
2325
- combineLatest(this.tabs.map((tab) => tab.stateChange))
2326
- .pipe(takeUntil(race(__classPrivateFieldGet(this, _SkyTabsetComponent_tabComponentsStateChangeUnsubscribe, "f"), __classPrivateFieldGet(this, _SkyTabsetComponent_ngUnsubscribe, "f"))))
2327
- .subscribe(() => {
2328
- // Wait for the tab components to render changes before finding the active one.
2329
- setTimeout(() => {
2330
- __classPrivateFieldGet(this, _SkyTabsetComponent_instances, "m", _SkyTabsetComponent_updateTabsetComponent).call(this, __classPrivateFieldGet(this, _SkyTabsetComponent_tabsetService, "f").currentActiveTabIndex, true);
2331
- });
2332
- });
2333
- }
2334
- }, _SkyTabsetComponent_initTabComponents = function _SkyTabsetComponent_initTabComponents() {
2335
- this.tabs?.forEach((tab) => tab.init());
2336
- }, _SkyTabsetComponent_resetTabComponents = function _SkyTabsetComponent_resetTabComponents() {
2337
- __classPrivateFieldGet(this, _SkyTabsetComponent_instances, "m", _SkyTabsetComponent_unsubscribeTabComponentsStateChange).call(this);
2338
- __classPrivateFieldGet(this, _SkyTabsetComponent_tabsetService, "f").unregisterAll();
2339
- // If there are no tab components, do a hard reset of the view.
2340
- if (this.tabs?.length === 0) {
2341
- __classPrivateFieldGet(this, _SkyTabsetComponent_instances, "m", _SkyTabsetComponent_updateTabsetComponent).call(this, 0, true);
2342
- return;
2343
- }
2344
- __classPrivateFieldGet(this, _SkyTabsetComponent_instances, "m", _SkyTabsetComponent_initTabComponents).call(this);
2345
- const activeIndex = __classPrivateFieldGet(this, _SkyTabsetComponent_instances, "m", _SkyTabsetComponent_getActiveTabComponent).call(this)?.tabIndex;
2346
- __classPrivateFieldGet(this, _SkyTabsetComponent_tabsetService, "f").setActiveTabIndex(activeIndex, {
2347
- emitChange: false,
2348
- });
2349
- __classPrivateFieldGet(this, _SkyTabsetComponent_instances, "m", _SkyTabsetComponent_listenTabComponentsStateChange).call(this);
2350
- }, _SkyTabsetComponent_emitTabIndexChange = function _SkyTabsetComponent_emitTabIndexChange() {
2351
- this.tabIndexesChange.emit({
2352
- tabs: this.tabs?.map((tab) => ({
2353
- tabHeading: tab.tabHeading,
2354
- tabIndex: tab.tabIndex,
2355
- })),
2356
- });
2357
- }, _SkyTabsetComponent_unsubscribeTabComponentsStateChange = function _SkyTabsetComponent_unsubscribeTabComponentsStateChange() {
2358
- __classPrivateFieldGet(this, _SkyTabsetComponent_tabComponentsStateChangeUnsubscribe, "f").next();
2359
- __classPrivateFieldGet(this, _SkyTabsetComponent_tabComponentsStateChangeUnsubscribe, "f").complete();
2360
- __classPrivateFieldSet(this, _SkyTabsetComponent_tabComponentsStateChangeUnsubscribe, new Subject(), "f");
2361
- }, _SkyTabsetComponent_listenTabButtonsOverflowChange = function _SkyTabsetComponent_listenTabButtonsOverflowChange() {
2362
- __classPrivateFieldGet(this, _SkyTabsetComponent_adapterService, "f").registerTabset(__classPrivateFieldGet(this, _SkyTabsetComponent_elementRef, "f"));
2363
- __classPrivateFieldGet(this, _SkyTabsetComponent_adapterService, "f").overflowChange
2364
- .pipe(takeUntil(__classPrivateFieldGet(this, _SkyTabsetComponent_ngUnsubscribe, "f")))
2365
- .subscribe((isOverflowing) => {
2366
- this.tabDisplayMode = isOverflowing ? 'dropdown' : 'tabs';
2367
- __classPrivateFieldGet(this, _SkyTabsetComponent_changeDetector, "f").markForCheck();
2368
- });
2369
- }, _SkyTabsetComponent_listenLocationPopStateChange = function _SkyTabsetComponent_listenLocationPopStateChange() {
2370
- __classPrivateFieldGet(this, _SkyTabsetComponent_permalinkService, "f").popStateChange
2371
- .pipe(takeUntil(__classPrivateFieldGet(this, _SkyTabsetComponent_ngUnsubscribe, "f")))
2372
- .subscribe(() => {
2373
- __classPrivateFieldGet(this, _SkyTabsetComponent_instances, "m", _SkyTabsetComponent_setActiveTabIndexByPermalinkId).call(this);
2374
- });
2375
- }, _SkyTabsetComponent_setActiveTabIndexByPermalinkId = function _SkyTabsetComponent_setActiveTabIndexByPermalinkId() {
2376
- const activeIndex = __classPrivateFieldGet(this, _SkyTabsetComponent_instances, "m", _SkyTabsetComponent_getActiveTabIndexByPermalinkId).call(this);
2377
- __classPrivateFieldGet(this, _SkyTabsetComponent_tabsetService, "f").setActiveTabIndex(activeIndex);
2378
- }, _SkyTabsetComponent_getActiveTabIndexByPermalinkId = function _SkyTabsetComponent_getActiveTabIndexByPermalinkId() {
2379
- if (this.permalinkId) {
2380
- const paramValue = __classPrivateFieldGet(this, _SkyTabsetComponent_permalinkService, "f").getParam(this.permalinkId);
2381
- if (paramValue) {
2382
- return this.tabs?.find((tab) => tab.permalinkValueOrDefault === paramValue)?.tabIndex;
2383
- }
2384
- return undefined;
2385
- }
2386
- return undefined;
2387
- }, _SkyTabsetComponent_getActiveTabComponent = function _SkyTabsetComponent_getActiveTabComponent() {
2388
- return this.tabs
2389
- ?.toArray()
2390
- .reverse()
2391
- .find((tab) => tab.active === true);
2392
- }, _SkyTabsetComponent_createTabButtons = function _SkyTabsetComponent_createTabButtons(activeIndex) {
2393
- // Safety check
2394
- /* istanbul ignore next */
2395
- if (!this.tabs) {
2396
- return [];
2397
- }
2398
- return this.tabs.map((tab, index) => ({
2399
- active: __classPrivateFieldGet(this, _SkyTabsetComponent_tabsetService, "f").tabIndexesEqual(tab.tabIndex, activeIndex),
2400
- closeable: tab.isCloseable(),
2401
- ariaControls: tab.tabPanelId,
2402
- disabled: tab.disabled,
2403
- buttonHref: tab.disabled
2404
- ? null
2405
- : __classPrivateFieldGet(this, _SkyTabsetComponent_permalinkService, "f").getParamHref(this.permalinkId, tab.permalinkValueOrDefault),
2406
- buttonId: tab.tabButtonId,
2407
- buttonTextCount: tab.tabHeaderCount,
2408
- buttonText: tab.tabHeading,
2409
- tabIndex: tab.tabIndex,
2410
- tabNumber: index + 1,
2411
- totalTabsCount: this.tabs.length,
2412
- }));
2413
- }, _SkyTabsetComponent_updateTabButtons = function _SkyTabsetComponent_updateTabButtons(activeIndex) {
2414
- this.tabButtons.forEach((button) => {
2415
- button.active = __classPrivateFieldGet(this, _SkyTabsetComponent_tabsetService, "f").tabIndexesEqual(button.tabIndex, activeIndex);
2416
- });
2417
- }, _SkyTabsetComponent_updateTabsetComponent = function _SkyTabsetComponent_updateTabsetComponent(activeIndex, regenerateTabButtons = false) {
2418
- // Activate/deactivate tab components.
2419
- this.tabs?.forEach((tab) => {
2420
- __classPrivateFieldGet(this, _SkyTabsetComponent_tabsetService, "f").tabIndexesEqual(tab.tabIndex, activeIndex)
2421
- ? tab.activate()
2422
- : tab.deactivate();
2423
- });
2424
- // Update the tab button models.
2425
- if (regenerateTabButtons || !this.tabButtons.length) {
2426
- this.tabButtons = __classPrivateFieldGet(this, _SkyTabsetComponent_instances, "m", _SkyTabsetComponent_createTabButtons).call(this, activeIndex);
2427
- }
2428
- else {
2429
- __classPrivateFieldGet(this, _SkyTabsetComponent_instances, "m", _SkyTabsetComponent_updateTabButtons).call(this, activeIndex);
2430
- }
2431
- // Update the dropdown trigger button text.
2432
- this.dropdownTriggerButtonText =
2433
- this.tabButtons.find((b) => {
2434
- return __classPrivateFieldGet(this, _SkyTabsetComponent_tabsetService, "f").tabIndexesEqual(b.tabIndex, activeIndex);
2435
- })?.buttonText ?? '';
2436
- // Set the query params based on active tab.
2437
- if (this.permalinkId) {
2438
- const activeTabComponent = this.tabs?.find((tab) => {
2439
- return __classPrivateFieldGet(this, _SkyTabsetComponent_tabsetService, "f").tabIndexesEqual(tab.tabIndex, activeIndex);
2440
- });
2441
- if (activeTabComponent) {
2442
- __classPrivateFieldGet(this, _SkyTabsetComponent_permalinkService, "f").setParam(this.permalinkId, activeTabComponent.permalinkValueOrDefault);
2443
- }
2444
- }
2445
- // Wait for tab button view models to render before gauging dimensions.
2446
- setTimeout(() => {
2447
- __classPrivateFieldGet(this, _SkyTabsetComponent_adapterService, "f").detectOverflow();
2448
- });
2449
- __classPrivateFieldGet(this, _SkyTabsetComponent_changeDetector, "f").markForCheck();
2450
- // Emit the new active index value to consumers.
2451
- if (this.lastActiveTabIndex !== activeIndex) {
2452
- this.lastActiveTabIndex = activeIndex;
2453
- this.activeChange.emit(activeIndex);
2454
- }
2455
- };
2456
- SkyTabsetComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyTabsetComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: SkyTabsetAdapterService }, { token: SkyTabsetPermalinkService }, { token: SkyTabsetService }], target: i0.ɵɵFactoryTarget.Component });
2457
- SkyTabsetComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: SkyTabsetComponent, selector: "sky-tabset", inputs: { active: "active", ariaLabel: "ariaLabel", ariaLabelledBy: "ariaLabelledBy", permalinkId: "permalinkId", tabStyle: "tabStyle" }, outputs: { activeChange: "activeChange", newTab: "newTab", openTab: "openTab", tabIndexesChange: "tabIndexesChange" }, host: { properties: { "class": "this.cssClass" } }, providers: [
2458
- SkyTabsetAdapterService,
2459
- SkyTabsetPermalinkService,
2460
- SkyTabsetService,
2461
- ], queries: [{ propertyName: "tabs", predicate: SkyTabComponent }], ngImport: i0, template: "<div\n class=\"sky-tabset\"\n role=\"tablist\"\n [attr.aria-label]=\"ariaLabel\"\n [attr.aria-labelledby]=\"ariaLabelledBy\"\n [ngClass]=\"\n 'sky-tabset-mode-' + tabDisplayMode + ' sky-tabset-style-' + tabStyle\n \"\n (window:resize)=\"onWindowResize()\"\n (keydown.arrowright)=\"onRightKeyDown()\"\n (keydown.arrowleft)=\"onLeftKeyDown()\"\n (keydown.home)=\"onHomeKeyDown()\"\n (keydown.end)=\"onEndKeyDown()\"\n>\n <span class=\"sky-tabset-dropdown\">\n <sky-dropdown *ngIf=\"tabDisplayMode === 'dropdown'\" buttonType=\"tab\">\n <sky-dropdown-button>\n {{ dropdownTriggerButtonText }}\n </sky-dropdown-button>\n <sky-dropdown-menu>\n <sky-dropdown-item\n *ngFor=\"let tabButton of tabButtons\"\n class=\"sky-tab-dropdown-menu-item\"\n >\n <div\n class=\"sky-tab-dropdown-item\"\n [ngClass]=\"{\n 'sky-tab-dropdown-item-selected': tabButton.active\n }\"\n >\n <ng-container\n *ngTemplateOutlet=\"\n tabButtonTemplate;\n context: {\n $implicit: tabButton\n }\n \"\n ></ng-container>\n </div>\n </sky-dropdown-item>\n </sky-dropdown-menu>\n </sky-dropdown>\n </span>\n <span class=\"sky-tabset-tabs\">\n <ng-container *ngFor=\"let tabButton of tabButtons\">\n <ng-container\n *ngTemplateOutlet=\"\n tabButtonTemplate;\n context: {\n $implicit: tabButton\n }\n \"\n ></ng-container>\n </ng-container>\n </span>\n <span class=\"sky-tabset-btns\">\n <button\n *ngIf=\"newTab.observers.length > 0\"\n class=\"sky-btn sky-btn-icon sky-tabset-btn-new sky-margin-inline-compact\"\n type=\"button\"\n [attr.aria-label]=\"'skyux_tab_add' | skyLibResources\"\n [skyThemeClass]=\"{\n 'sky-margin-inline-sm': 'modern'\n }\"\n (click)=\"onNewTabClick()\"\n >\n <sky-icon icon=\"plus-circle\" size=\"lg\"> </sky-icon>\n </button>\n <button\n *ngIf=\"openTab.observers.length > 0\"\n class=\"sky-btn sky-btn-icon sky-tabset-btn-open sky-margin-inline-compact\"\n type=\"button\"\n [attr.aria-label]=\"'skyux_tab_open' | skyLibResources\"\n [skyThemeClass]=\"{\n 'sky-margin-inline-sm': 'modern'\n }\"\n (click)=\"onOpenTabClick()\"\n >\n <sky-icon icon=\"folder-open-o\" size=\"lg\"> </sky-icon>\n </button>\n </span>\n</div>\n<ng-content></ng-content>\n\n<ng-template let-tabButton #tabButtonTemplate>\n <sky-tab-button\n [active]=\"tabButton.active\"\n [ariaControls]=\"tabButton.ariaControls\"\n [buttonHref]=\"tabButton.buttonHref\"\n [buttonId]=\"tabButton.buttonId\"\n [buttonText]=\"tabButton.buttonText\"\n [buttonTextCount]=\"tabButton.buttonTextCount\"\n [closeable]=\"tabButton.closeable\"\n [disabled]=\"tabButton.disabled\"\n [tabIndex]=\"tabButton.tabIndex\"\n [tabStyle]=\"tabStyle\"\n [tabNumber]=\"tabButton.tabNumber\"\n [totalTabsCount]=\"tabButton.totalTabsCount\"\n (buttonClick)=\"onTabButtonClick(tabButton)\"\n (closeClick)=\"onTabCloseClick(tabButton)\"\n ></sky-tab-button>\n</ng-template>\n", styles: ["sky-tabset.sky-tabset-layout-fit{position:absolute;inset:0;display:flex;flex-direction:column}sky-tabset.sky-tabset-layout-fit .sky-tabset{flex-grow:0}.sky-tabset{--sky-tabset-margin: 0;align-items:center;border-bottom:2px solid #0974a1;display:flex;list-style-type:none;margin:var(--sky-tabset-margin);padding:0 0 0 var(--sky-layout-host-tab-content-spacing, 15px);white-space:nowrap;flex-grow:var(--sky-layout-host-content-flex-grow, 0);overflow:var(--sky-layout-host-content-overflow, hidden);position:var(--sky-layout-host-content-position, static)}.sky-tabset.sky-tabset-style-wizard{border-bottom:none;padding-left:0}.sky-modal-content .sky-tabset-style-tabs{--sky-tabset-margin: var( --sky-compat-tabset-tabs-modal-margin, 0 -15px 20px )}.sky-modal-content .sky-tabset-style-wizard{--sky-tabset-margin: var( --sky-compat-tabset-wizard-modal-margin, 0 0 20px )}.sky-tabset-btns{order:1;padding-left:10px}.sky-tabset-dropdown{order:0;max-width:100%}.sky-tabset-mode-dropdown{line-height:0}.sky-tabset-mode-dropdown .sky-tabset-tabs{visibility:hidden;order:2}.sky-tab-dropdown-menu-item sky-tab-button{display:flex;min-width:300px}.sky-tab-dropdown-menu-item .sky-dropdown-item{margin:0}.sky-tab-dropdown-menu-item .sky-btn-tab-wrapper{width:100%;margin-right:0}.sky-tab-dropdown-menu-item .sky-btn-tab{margin:0;border-radius:0;width:100%;display:flex}.sky-tab-dropdown-menu-item .sky-btn-tab>.sky-tab-heading{flex:1 1 auto}.sky-tab-dropdown-menu-item .sky-btn-tab>.sky-btn-tab-close{flex:0 1 auto}.sky-tabset-tabs{order:0;white-space:nowrap}.sky-tabset-btn-new,.sky-tabset-btn-open{color:#0974a1}.sky-theme-modern .sky-modal-content .sky-tabset{--sky-tabset-margin: -10px -30px 30px;padding-left:30px;padding-right:30px}.sky-theme-modern .sky-tabset{border-bottom:1px solid #d2d2d2;overflow:visible}.sky-theme-modern .sky-tab-dropdown-menu-item .sky-btn-tab-wrapper{margin-right:0}\n"], dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i5.λ2, selector: "sky-dropdown-button" }, { kind: "component", type: i5.λ3, selector: "sky-dropdown", inputs: ["buttonStyle", "buttonType", "disabled", "dismissOnBlur", "label", "horizontalAlignment", "messageStream", "title", "trigger"] }, { kind: "component", type: i5.λ1, selector: "sky-dropdown-item", inputs: ["ariaRole"] }, { kind: "component", type: i5.λ4, selector: "sky-dropdown-menu", inputs: ["ariaLabelledBy", "ariaRole", "useNativeFocus"], outputs: ["menuChanges"] }, { kind: "component", type: i6.λ4, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }, { kind: "directive", type: i7.λ2, selector: "[skyThemeClass]", inputs: ["class", "skyThemeClass"] }, { kind: "component", type: SkyTabButtonComponent, selector: "sky-tab-button", inputs: ["active", "ariaControls", "buttonHref", "buttonId", "buttonText", "buttonTextCount", "closeable", "disabled", "tabIndex", "tabNumber", "totalTabsCount", "tabStyle"], outputs: ["buttonClick", "closeClick"] }, { kind: "pipe", type: i3.SkyLibResourcesPipe, name: "skyLibResources" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
2462
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyTabsetComponent, decorators: [{
2463
- type: Component,
2464
- args: [{ selector: 'sky-tabset', providers: [
2465
- SkyTabsetAdapterService,
2466
- SkyTabsetPermalinkService,
2467
- SkyTabsetService,
2468
- ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div\n class=\"sky-tabset\"\n role=\"tablist\"\n [attr.aria-label]=\"ariaLabel\"\n [attr.aria-labelledby]=\"ariaLabelledBy\"\n [ngClass]=\"\n 'sky-tabset-mode-' + tabDisplayMode + ' sky-tabset-style-' + tabStyle\n \"\n (window:resize)=\"onWindowResize()\"\n (keydown.arrowright)=\"onRightKeyDown()\"\n (keydown.arrowleft)=\"onLeftKeyDown()\"\n (keydown.home)=\"onHomeKeyDown()\"\n (keydown.end)=\"onEndKeyDown()\"\n>\n <span class=\"sky-tabset-dropdown\">\n <sky-dropdown *ngIf=\"tabDisplayMode === 'dropdown'\" buttonType=\"tab\">\n <sky-dropdown-button>\n {{ dropdownTriggerButtonText }}\n </sky-dropdown-button>\n <sky-dropdown-menu>\n <sky-dropdown-item\n *ngFor=\"let tabButton of tabButtons\"\n class=\"sky-tab-dropdown-menu-item\"\n >\n <div\n class=\"sky-tab-dropdown-item\"\n [ngClass]=\"{\n 'sky-tab-dropdown-item-selected': tabButton.active\n }\"\n >\n <ng-container\n *ngTemplateOutlet=\"\n tabButtonTemplate;\n context: {\n $implicit: tabButton\n }\n \"\n ></ng-container>\n </div>\n </sky-dropdown-item>\n </sky-dropdown-menu>\n </sky-dropdown>\n </span>\n <span class=\"sky-tabset-tabs\">\n <ng-container *ngFor=\"let tabButton of tabButtons\">\n <ng-container\n *ngTemplateOutlet=\"\n tabButtonTemplate;\n context: {\n $implicit: tabButton\n }\n \"\n ></ng-container>\n </ng-container>\n </span>\n <span class=\"sky-tabset-btns\">\n <button\n *ngIf=\"newTab.observers.length > 0\"\n class=\"sky-btn sky-btn-icon sky-tabset-btn-new sky-margin-inline-compact\"\n type=\"button\"\n [attr.aria-label]=\"'skyux_tab_add' | skyLibResources\"\n [skyThemeClass]=\"{\n 'sky-margin-inline-sm': 'modern'\n }\"\n (click)=\"onNewTabClick()\"\n >\n <sky-icon icon=\"plus-circle\" size=\"lg\"> </sky-icon>\n </button>\n <button\n *ngIf=\"openTab.observers.length > 0\"\n class=\"sky-btn sky-btn-icon sky-tabset-btn-open sky-margin-inline-compact\"\n type=\"button\"\n [attr.aria-label]=\"'skyux_tab_open' | skyLibResources\"\n [skyThemeClass]=\"{\n 'sky-margin-inline-sm': 'modern'\n }\"\n (click)=\"onOpenTabClick()\"\n >\n <sky-icon icon=\"folder-open-o\" size=\"lg\"> </sky-icon>\n </button>\n </span>\n</div>\n<ng-content></ng-content>\n\n<ng-template let-tabButton #tabButtonTemplate>\n <sky-tab-button\n [active]=\"tabButton.active\"\n [ariaControls]=\"tabButton.ariaControls\"\n [buttonHref]=\"tabButton.buttonHref\"\n [buttonId]=\"tabButton.buttonId\"\n [buttonText]=\"tabButton.buttonText\"\n [buttonTextCount]=\"tabButton.buttonTextCount\"\n [closeable]=\"tabButton.closeable\"\n [disabled]=\"tabButton.disabled\"\n [tabIndex]=\"tabButton.tabIndex\"\n [tabStyle]=\"tabStyle\"\n [tabNumber]=\"tabButton.tabNumber\"\n [totalTabsCount]=\"tabButton.totalTabsCount\"\n (buttonClick)=\"onTabButtonClick(tabButton)\"\n (closeClick)=\"onTabCloseClick(tabButton)\"\n ></sky-tab-button>\n</ng-template>\n", styles: ["sky-tabset.sky-tabset-layout-fit{position:absolute;inset:0;display:flex;flex-direction:column}sky-tabset.sky-tabset-layout-fit .sky-tabset{flex-grow:0}.sky-tabset{--sky-tabset-margin: 0;align-items:center;border-bottom:2px solid #0974a1;display:flex;list-style-type:none;margin:var(--sky-tabset-margin);padding:0 0 0 var(--sky-layout-host-tab-content-spacing, 15px);white-space:nowrap;flex-grow:var(--sky-layout-host-content-flex-grow, 0);overflow:var(--sky-layout-host-content-overflow, hidden);position:var(--sky-layout-host-content-position, static)}.sky-tabset.sky-tabset-style-wizard{border-bottom:none;padding-left:0}.sky-modal-content .sky-tabset-style-tabs{--sky-tabset-margin: var( --sky-compat-tabset-tabs-modal-margin, 0 -15px 20px )}.sky-modal-content .sky-tabset-style-wizard{--sky-tabset-margin: var( --sky-compat-tabset-wizard-modal-margin, 0 0 20px )}.sky-tabset-btns{order:1;padding-left:10px}.sky-tabset-dropdown{order:0;max-width:100%}.sky-tabset-mode-dropdown{line-height:0}.sky-tabset-mode-dropdown .sky-tabset-tabs{visibility:hidden;order:2}.sky-tab-dropdown-menu-item sky-tab-button{display:flex;min-width:300px}.sky-tab-dropdown-menu-item .sky-dropdown-item{margin:0}.sky-tab-dropdown-menu-item .sky-btn-tab-wrapper{width:100%;margin-right:0}.sky-tab-dropdown-menu-item .sky-btn-tab{margin:0;border-radius:0;width:100%;display:flex}.sky-tab-dropdown-menu-item .sky-btn-tab>.sky-tab-heading{flex:1 1 auto}.sky-tab-dropdown-menu-item .sky-btn-tab>.sky-btn-tab-close{flex:0 1 auto}.sky-tabset-tabs{order:0;white-space:nowrap}.sky-tabset-btn-new,.sky-tabset-btn-open{color:#0974a1}.sky-theme-modern .sky-modal-content .sky-tabset{--sky-tabset-margin: -10px -30px 30px;padding-left:30px;padding-right:30px}.sky-theme-modern .sky-tabset{border-bottom:1px solid #d2d2d2;overflow:visible}.sky-theme-modern .sky-tab-dropdown-menu-item .sky-btn-tab-wrapper{margin-right:0}\n"] }]
2469
- }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: SkyTabsetAdapterService }, { type: SkyTabsetPermalinkService }, { type: SkyTabsetService }]; }, propDecorators: { active: [{
2470
- type: Input
2471
- }], ariaLabel: [{
2472
- type: Input
2473
- }], ariaLabelledBy: [{
2474
- type: Input
2475
- }], permalinkId: [{
2476
- type: Input
2477
- }], tabStyle: [{
2478
- type: Input
2479
- }], activeChange: [{
2480
- type: Output
2481
- }], newTab: [{
2482
- type: Output
2483
- }], openTab: [{
2484
- type: Output
2485
- }], tabIndexesChange: [{
2486
- type: Output
2487
- }], tabs: [{
2488
- type: ContentChildren,
2489
- args: [SkyTabComponent]
2490
- }], cssClass: [{
2491
- type: HostBinding,
2492
- args: ['class']
2493
- }] } });
2494
-
2495
- class SkyTabsModule {
2496
- }
2497
- SkyTabsModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyTabsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
2498
- SkyTabsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.9", ngImport: i0, type: SkyTabsModule, declarations: [SkyTabButtonComponent,
2499
- SkyTabComponent,
2500
- SkyTabsetComponent,
2501
- SkyTabsetNavButtonComponent,
2502
- SkyTabsetNavButtonDisabledPipe], imports: [CommonModule,
2503
- RouterModule,
2504
- SkyDropdownModule,
2505
- SkyI18nModule,
2506
- SkyIconModule,
2507
- SkyTabsResourcesModule,
2508
- SkyThemeModule], exports: [SkyTabComponent, SkyTabsetComponent, SkyTabsetNavButtonComponent] });
2509
- SkyTabsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyTabsModule, imports: [CommonModule,
2510
- RouterModule,
2511
- SkyDropdownModule,
2512
- SkyI18nModule,
2513
- SkyIconModule,
2514
- SkyTabsResourcesModule,
2515
- SkyThemeModule] });
2516
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyTabsModule, decorators: [{
2517
- type: NgModule,
2518
- args: [{
2519
- declarations: [
2520
- SkyTabButtonComponent,
2521
- SkyTabComponent,
2522
- SkyTabsetComponent,
2523
- SkyTabsetNavButtonComponent,
2524
- SkyTabsetNavButtonDisabledPipe,
2525
- ],
2526
- imports: [
2527
- CommonModule,
2528
- RouterModule,
2529
- SkyDropdownModule,
2530
- SkyI18nModule,
2531
- SkyIconModule,
2532
- SkyTabsResourcesModule,
2533
- SkyThemeModule,
2534
- ],
2535
- exports: [SkyTabComponent, SkyTabsetComponent, SkyTabsetNavButtonComponent],
2536
- }]
2537
- }] });
2538
-
2539
- /**
2540
- * Generated bundle index. Do not edit.
2541
- */
2542
-
2543
- export { SkySectionedFormComponent, SkySectionedFormMessageType, SkySectionedFormModule, SkySectionedFormService, SkyTabsModule, SkyVerticalTabsetModule, SkyTabComponent as λ1, SkyTabsetComponent as λ2, SkyTabsetNavButtonComponent as λ3, SkyVerticalTabComponent as λ4, SkySectionedFormSectionComponent as λ5, SkyVerticalTabsetComponent as λ6, SkyVerticalTabsetGroupComponent as λ7 };
2544
- //# sourceMappingURL=skyux-tabs.mjs.map