@skyux/tabs 4.7.0 → 5.0.0-beta.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (150) hide show
  1. package/LICENSE +21 -0
  2. package/bundles/skyux-tabs-testing.umd.js +324 -221
  3. package/bundles/skyux-tabs-testing.umd.js.map +1 -1
  4. package/bundles/skyux-tabs.umd.js +648 -792
  5. package/bundles/skyux-tabs.umd.js.map +1 -1
  6. package/documentation.json +5484 -0
  7. package/esm2015/modules/sectioned-form/sectioned-form-section.component.js +29 -32
  8. package/esm2015/modules/sectioned-form/sectioned-form.component.js +52 -41
  9. package/esm2015/modules/sectioned-form/sectioned-form.module.js +30 -21
  10. package/esm2015/modules/sectioned-form/sectioned-form.service.js +9 -8
  11. package/esm2015/modules/shared/sky-tabs-resources.module.js +41 -0
  12. package/esm2015/modules/tabs/tab-button.component.js +41 -47
  13. package/esm2015/modules/tabs/tab-index.js +2 -1
  14. package/esm2015/modules/tabs/tab.component.js +31 -41
  15. package/esm2015/modules/tabs/tabs.module.js +45 -23
  16. package/esm2015/modules/tabs/tabset-active-tab-unregistered-args.js +2 -1
  17. package/esm2015/modules/tabs/tabset-adapter.service.js +9 -8
  18. package/esm2015/modules/tabs/tabset-buttons-display-mode.js +2 -1
  19. package/esm2015/modules/tabs/tabset-nav-button.component.js +21 -26
  20. package/esm2015/modules/tabs/tabset-permalink.service.js +11 -15
  21. package/esm2015/modules/tabs/tabset-style.js +2 -1
  22. package/esm2015/modules/tabs/tabset-tab-indexes-change.js +2 -1
  23. package/esm2015/modules/tabs/tabset.component.js +56 -57
  24. package/esm2015/modules/tabs/tabset.service.js +10 -8
  25. package/esm2015/modules/vertical-tabset/vertical-tab-media-query.service.js +9 -8
  26. package/esm2015/modules/vertical-tabset/vertical-tab.component.js +59 -65
  27. package/esm2015/modules/vertical-tabset/vertical-tabset-adapter.service.js +10 -15
  28. package/esm2015/modules/vertical-tabset/vertical-tabset-group.component.js +75 -54
  29. package/esm2015/modules/vertical-tabset/vertical-tabset.component.js +63 -62
  30. package/esm2015/modules/vertical-tabset/vertical-tabset.module.js +41 -30
  31. package/esm2015/modules/vertical-tabset/vertical-tabset.service.js +19 -16
  32. package/esm2015/public-api.js +23 -0
  33. package/esm2015/skyux-tabs.js +2 -18
  34. package/esm2015/testing/public-api.js +3 -0
  35. package/esm2015/testing/skyux-tabs-testing.js +2 -2
  36. package/esm2015/testing/tabs/tab-fixture-tab.js +2 -1
  37. package/esm2015/testing/tabs/tabset-fixture.js +1 -1
  38. package/fesm2015/skyux-tabs-testing.js.map +1 -1
  39. package/fesm2015/skyux-tabs.js +588 -529
  40. package/fesm2015/skyux-tabs.js.map +1 -1
  41. package/modules/sectioned-form/sectioned-form-section.component.d.ts +3 -0
  42. package/modules/sectioned-form/sectioned-form.component.d.ts +3 -0
  43. package/modules/sectioned-form/sectioned-form.module.d.ts +9 -0
  44. package/modules/sectioned-form/sectioned-form.service.d.ts +3 -0
  45. package/modules/shared/sky-tabs-resources.module.d.ts +14 -0
  46. package/modules/tabs/tab-button.component.d.ts +3 -0
  47. package/modules/tabs/tab.component.d.ts +3 -0
  48. package/modules/tabs/tabs.module.d.ts +15 -0
  49. package/modules/tabs/tabset-adapter.service.d.ts +3 -0
  50. package/modules/tabs/tabset-nav-button.component.d.ts +3 -0
  51. package/modules/tabs/tabset-permalink.service.d.ts +3 -0
  52. package/modules/tabs/tabset.component.d.ts +4 -1
  53. package/modules/tabs/tabset.service.d.ts +3 -0
  54. package/modules/vertical-tabset/vertical-tab-media-query.service.d.ts +3 -0
  55. package/modules/vertical-tabset/vertical-tab.component.d.ts +3 -0
  56. package/modules/vertical-tabset/vertical-tabset-adapter.service.d.ts +3 -1
  57. package/modules/vertical-tabset/vertical-tabset-group.component.d.ts +3 -0
  58. package/modules/vertical-tabset/vertical-tabset.component.d.ts +4 -4
  59. package/modules/vertical-tabset/vertical-tabset.module.d.ts +11 -0
  60. package/modules/vertical-tabset/vertical-tabset.service.d.ts +3 -0
  61. package/package.json +14 -29
  62. package/public-api.d.ts +16 -0
  63. package/skyux-tabs.d.ts +2 -17
  64. package/testing/package.json +2 -5
  65. package/testing/{public_api.d.ts → public-api.d.ts} +0 -0
  66. package/testing/skyux-tabs-testing.d.ts +2 -1
  67. package/CHANGELOG.md +0 -222
  68. package/bundles/skyux-tabs-testing.umd.min.js +0 -16
  69. package/bundles/skyux-tabs-testing.umd.min.js.map +0 -1
  70. package/bundles/skyux-tabs.umd.min.js +0 -16
  71. package/bundles/skyux-tabs.umd.min.js.map +0 -1
  72. package/esm2015/modules/shared/tabs-resources.module.js +0 -17
  73. package/esm2015/plugin-resources/tabs-resources-provider.js +0 -16
  74. package/esm2015/public_api.js +0 -10
  75. package/esm2015/testing/public_api.js +0 -2
  76. package/esm5/modules/sectioned-form/sectioned-form-section.component.js +0 -84
  77. package/esm5/modules/sectioned-form/sectioned-form.component.js +0 -111
  78. package/esm5/modules/sectioned-form/sectioned-form.module.js +0 -33
  79. package/esm5/modules/sectioned-form/sectioned-form.service.js +0 -35
  80. package/esm5/modules/shared/tabs-resources.module.js +0 -20
  81. package/esm5/modules/tabs/tab-button.component.js +0 -72
  82. package/esm5/modules/tabs/tab-index.js +0 -1
  83. package/esm5/modules/tabs/tab.component.js +0 -173
  84. package/esm5/modules/tabs/tabs.module.js +0 -44
  85. package/esm5/modules/tabs/tabset-active-tab-unregistered-args.js +0 -1
  86. package/esm5/modules/tabs/tabset-adapter.service.js +0 -58
  87. package/esm5/modules/tabs/tabset-buttons-display-mode.js +0 -1
  88. package/esm5/modules/tabs/tabset-nav-button.component.js +0 -145
  89. package/esm5/modules/tabs/tabset-permalink.service.js +0 -129
  90. package/esm5/modules/tabs/tabset-style.js +0 -1
  91. package/esm5/modules/tabs/tabset-tab-indexes-change.js +0 -1
  92. package/esm5/modules/tabs/tabset.component.js +0 -434
  93. package/esm5/modules/tabs/tabset.service.js +0 -122
  94. package/esm5/modules/vertical-tabset/vertical-tab-media-query.service.js +0 -76
  95. package/esm5/modules/vertical-tabset/vertical-tab.component.js +0 -214
  96. package/esm5/modules/vertical-tabset/vertical-tabset-adapter.service.js +0 -51
  97. package/esm5/modules/vertical-tabset/vertical-tabset-group.component.js +0 -119
  98. package/esm5/modules/vertical-tabset/vertical-tabset.component.js +0 -145
  99. package/esm5/modules/vertical-tabset/vertical-tabset.module.js +0 -46
  100. package/esm5/modules/vertical-tabset/vertical-tabset.service.js +0 -176
  101. package/esm5/plugin-resources/tabs-resources-provider.js +0 -17
  102. package/esm5/public_api.js +0 -10
  103. package/esm5/skyux-tabs.js +0 -21
  104. package/esm5/testing/public_api.js +0 -2
  105. package/esm5/testing/skyux-tabs-testing.js +0 -5
  106. package/esm5/testing/tabs/tab-fixture-tab.js +0 -1
  107. package/esm5/testing/tabs/tabset-fixture.js +0 -168
  108. package/fesm5/skyux-tabs-testing.js +0 -174
  109. package/fesm5/skyux-tabs-testing.js.map +0 -1
  110. package/fesm5/skyux-tabs.js +0 -2183
  111. package/fesm5/skyux-tabs.js.map +0 -1
  112. package/modules/shared/tabs-resources.module.d.ts +0 -2
  113. package/plugin-resources/tabs-resources-provider.d.ts +0 -5
  114. package/public_api.d.ts +0 -9
  115. package/skyux-tabs.metadata.json +0 -1
  116. package/src/assets/img/guidelines/tabs/tabs-anatomy.png +0 -0
  117. package/src/assets/img/guidelines/tabs/tabs-behavior-1.png +0 -0
  118. package/src/assets/img/guidelines/tabs/tabs-layout-1.png +0 -0
  119. package/src/assets/img/guidelines/tabs/tabs-layout-2.png +0 -0
  120. package/src/assets/img/guidelines/tabs/tabs-layout-3.png +0 -0
  121. package/src/assets/img/guidelines/tabs/tabs-layout-4.png +0 -0
  122. package/src/assets/img/guidelines/tabs/tabs-options-1.png +0 -0
  123. package/src/assets/img/guidelines/tabs/tabs-options-2.png +0 -0
  124. package/src/assets/img/guidelines/tabs/tabs-state-collapsed-closed.png +0 -0
  125. package/src/assets/img/guidelines/tabs/tabs-state-collapsed-open.png +0 -0
  126. package/src/assets/img/guidelines/tabs/tabs-state-hover.png +0 -0
  127. package/src/assets/img/guidelines/tabs/tabs-state-selected.png +0 -0
  128. package/src/assets/img/guidelines/tabs/tabs-state-unselected.png +0 -0
  129. package/src/assets/img/guidelines/tabs/tabs-usage-1.png +0 -0
  130. package/src/assets/img/guidelines/tabs/tabs-usage-2.png +0 -0
  131. package/src/assets/img/guidelines/tabs/tabs-usage-3.png +0 -0
  132. package/src/assets/img/guidelines/tabs/tabs-usage-4.png +0 -0
  133. package/src/assets/img/guidelines/tabs/tabs-usage-5.png +0 -0
  134. package/src/assets/img/guidelines/vertical-tabs/vertical-tabs-anatomy-1.png +0 -0
  135. package/src/assets/img/guidelines/vertical-tabs/vertical-tabs-anatomy-2.png +0 -0
  136. package/src/assets/img/guidelines/vertical-tabs/vertical-tabs-layout-1.png +0 -0
  137. package/src/assets/img/guidelines/vertical-tabs/vertical-tabs-state-hover.png +0 -0
  138. package/src/assets/img/guidelines/vertical-tabs/vertical-tabs-state-selected-group.png +0 -0
  139. package/src/assets/img/guidelines/vertical-tabs/vertical-tabs-state-selected.png +0 -0
  140. package/src/assets/img/guidelines/vertical-tabs/vertical-tabs-state-unselected-group.png +0 -0
  141. package/src/assets/img/guidelines/vertical-tabs/vertical-tabs-state-unselected.png +0 -0
  142. package/src/assets/img/guidelines/vertical-tabs/vertical-tabs-usage-1.png +0 -0
  143. package/src/assets/img/guidelines/vertical-tabs/vertical-tabs-usage-2.png +0 -0
  144. package/src/assets/img/guidelines/vertical-tabs/vertical-tabs-usage-3.png +0 -0
  145. package/src/assets/img/guidelines/vertical-tabs/vertical-tabs-usage-4.png +0 -0
  146. package/src/assets/img/guidelines/vertical-tabs/vertical-tabs-usage-5.png +0 -0
  147. package/src/assets/img/guidelines/vertical-tabs/vertical-tabs-usage-6.png +0 -0
  148. package/src/assets/img/guidelines/vertical-tabs/vertical-tabs-usage-7.png +0 -0
  149. package/src/assets/locales/resources_en_US.json +0 -26
  150. package/testing/skyux-tabs-testing.metadata.json +0 -1
@@ -1,17 +0,0 @@
1
- import { __decorate } from "tslib";
2
- import { Injectable } from '@angular/core';
3
- import { getStringForLocale } from '@skyux/i18n';
4
- var SkyTabsResourcesProvider = /** @class */ (function () {
5
- function SkyTabsResourcesProvider() {
6
- this.resources = { "EN-US": { "skyux_tab_add": "Add tab", "skyux_tab_close": "Close {0} tab", "skyux_tabs_navigator_next": "Next", "skyux_tabs_navigator_previous": "Previous", "skyux_tab_open": "Open tab", "skyux_vertical_tabs_show_tabs_text": "Tab list" } };
7
- }
8
- SkyTabsResourcesProvider.prototype.getString = function (localeInfo, name) {
9
- return getStringForLocale(this.resources, localeInfo.locale, name);
10
- };
11
- SkyTabsResourcesProvider = __decorate([
12
- Injectable()
13
- ], SkyTabsResourcesProvider);
14
- return SkyTabsResourcesProvider;
15
- }());
16
- export { SkyTabsResourcesProvider };
17
- //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidGFicy1yZXNvdXJjZXMtcHJvdmlkZXIuanMiLCJzb3VyY2VSb290Ijoibmc6Ly9Ac2t5dXgvdGFicy8iLCJzb3VyY2VzIjpbInBsdWdpbi1yZXNvdXJjZXMvdGFicy1yZXNvdXJjZXMtcHJvdmlkZXIudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IjtBQUNBLE9BQU8sRUFDTCxVQUFVLEVBQ1gsTUFBTSxlQUFlLENBQUM7QUFFdkIsT0FBTyxFQUNMLGtCQUFrQixFQUduQixNQUFNLGFBQWEsQ0FBQztBQUdyQjtJQUFBO1FBQ1UsY0FBUyxHQUFRLEVBQUMsT0FBTyxFQUFDLEVBQUMsZUFBZSxFQUFDLFNBQVMsRUFBQyxpQkFBaUIsRUFBQyxlQUFlLEVBQUMsMkJBQTJCLEVBQUMsTUFBTSxFQUFDLCtCQUErQixFQUFDLFVBQVUsRUFBQyxnQkFBZ0IsRUFBQyxVQUFVLEVBQUMsb0NBQW9DLEVBQUMsVUFBVSxFQUFDLEVBQUMsQ0FBQztJQUs3UCxDQUFDO0lBSFEsNENBQVMsR0FBaEIsVUFBaUIsVUFBNEIsRUFBRSxJQUFZO1FBQ3pELE9BQU8sa0JBQWtCLENBQUMsSUFBSSxDQUFDLFNBQVMsRUFBRSxVQUFVLENBQUMsTUFBTSxFQUFFLElBQUksQ0FBQyxDQUFDO0lBQ3JFLENBQUM7SUFMVSx3QkFBd0I7UUFEcEMsVUFBVSxFQUFFO09BQ0Esd0JBQXdCLENBTXBDO0lBQUQsK0JBQUM7Q0FBQSxBQU5ELElBTUM7U0FOWSx3QkFBd0IiLCJzb3VyY2VzQ29udGVudCI6WyJcbmltcG9ydCB7XG4gIEluamVjdGFibGVcbn0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5cbmltcG9ydCB7XG4gIGdldFN0cmluZ0ZvckxvY2FsZSxcbiAgU2t5QXBwTG9jYWxlSW5mbyxcbiAgU2t5TGliUmVzb3VyY2VzUHJvdmlkZXJcbn0gZnJvbSAnQHNreXV4L2kxOG4nO1xuXG5ASW5qZWN0YWJsZSgpXG5leHBvcnQgY2xhc3MgU2t5VGFic1Jlc291cmNlc1Byb3ZpZGVyIGltcGxlbWVudHMgU2t5TGliUmVzb3VyY2VzUHJvdmlkZXIge1xuICBwcml2YXRlIHJlc291cmNlczogYW55ID0ge1wiRU4tVVNcIjp7XCJza3l1eF90YWJfYWRkXCI6XCJBZGQgdGFiXCIsXCJza3l1eF90YWJfY2xvc2VcIjpcIkNsb3NlIHswfSB0YWJcIixcInNreXV4X3RhYnNfbmF2aWdhdG9yX25leHRcIjpcIk5leHRcIixcInNreXV4X3RhYnNfbmF2aWdhdG9yX3ByZXZpb3VzXCI6XCJQcmV2aW91c1wiLFwic2t5dXhfdGFiX29wZW5cIjpcIk9wZW4gdGFiXCIsXCJza3l1eF92ZXJ0aWNhbF90YWJzX3Nob3dfdGFic190ZXh0XCI6XCJUYWIgbGlzdFwifX07XG5cbiAgcHVibGljIGdldFN0cmluZyhsb2NhbGVJbmZvOiBTa3lBcHBMb2NhbGVJbmZvLCBuYW1lOiBzdHJpbmcpOiBzdHJpbmcge1xuICAgIHJldHVybiBnZXRTdHJpbmdGb3JMb2NhbGUodGhpcy5yZXNvdXJjZXMsIGxvY2FsZUluZm8ubG9jYWxlLCBuYW1lKTtcbiAgfVxufVxuIl19
@@ -1,10 +0,0 @@
1
- export * from './modules/sectioned-form/sectioned-form.module';
2
- export * from './modules/sectioned-form/sectioned-form.service';
3
- export * from './modules/tabs/tabs.module';
4
- export * from './modules/vertical-tabset/vertical-tabset.module';
5
- // The following export is needed because our docs use it as a prescribed pattern.
6
- // Ideally, this functionality would live in a standard `Input` or `Output`.
7
- // https://developer.blackbaud.com/skyux/components/sectioned-form#code
8
- // TODO: Try to remove in a major release.
9
- export * from './modules/sectioned-form/sectioned-form.component';
10
- //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicHVibGljX2FwaS5qcyIsInNvdXJjZVJvb3QiOiJuZzovL0Bza3l1eC90YWJzLyIsInNvdXJjZXMiOlsicHVibGljX2FwaS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxjQUFjLGdEQUFnRCxDQUFDO0FBQy9ELGNBQWMsaURBQWlELENBQUM7QUFNaEUsY0FBYyw0QkFBNEIsQ0FBQztBQUUzQyxjQUFjLGtEQUFrRCxDQUFDO0FBRWpFLGtGQUFrRjtBQUNsRiw0RUFBNEU7QUFDNUUsdUVBQXVFO0FBQ3ZFLDBDQUEwQztBQUMxQyxjQUFjLG1EQUFtRCxDQUFDIiwic291cmNlc0NvbnRlbnQiOlsiZXhwb3J0ICogZnJvbSAnLi9tb2R1bGVzL3NlY3Rpb25lZC1mb3JtL3NlY3Rpb25lZC1mb3JtLm1vZHVsZSc7XG5leHBvcnQgKiBmcm9tICcuL21vZHVsZXMvc2VjdGlvbmVkLWZvcm0vc2VjdGlvbmVkLWZvcm0uc2VydmljZSc7XG5cbmV4cG9ydCAqIGZyb20gJy4vbW9kdWxlcy90YWJzL3RhYi1pbmRleCc7XG5leHBvcnQgKiBmcm9tICcuL21vZHVsZXMvdGFicy90YWJzZXQtYnV0dG9ucy1kaXNwbGF5LW1vZGUnO1xuZXhwb3J0ICogZnJvbSAnLi9tb2R1bGVzL3RhYnMvdGFic2V0LXN0eWxlJztcbmV4cG9ydCAqIGZyb20gJy4vbW9kdWxlcy90YWJzL3RhYnNldC10YWItaW5kZXhlcy1jaGFuZ2UnO1xuZXhwb3J0ICogZnJvbSAnLi9tb2R1bGVzL3RhYnMvdGFicy5tb2R1bGUnO1xuXG5leHBvcnQgKiBmcm9tICcuL21vZHVsZXMvdmVydGljYWwtdGFic2V0L3ZlcnRpY2FsLXRhYnNldC5tb2R1bGUnO1xuXG4vLyBUaGUgZm9sbG93aW5nIGV4cG9ydCBpcyBuZWVkZWQgYmVjYXVzZSBvdXIgZG9jcyB1c2UgaXQgYXMgYSBwcmVzY3JpYmVkIHBhdHRlcm4uXG4vLyBJZGVhbGx5LCB0aGlzIGZ1bmN0aW9uYWxpdHkgd291bGQgbGl2ZSBpbiBhIHN0YW5kYXJkIGBJbnB1dGAgb3IgYE91dHB1dGAuXG4vLyBodHRwczovL2RldmVsb3Blci5ibGFja2JhdWQuY29tL3NreXV4L2NvbXBvbmVudHMvc2VjdGlvbmVkLWZvcm0jY29kZVxuLy8gVE9ETzogVHJ5IHRvIHJlbW92ZSBpbiBhIG1ham9yIHJlbGVhc2UuXG5leHBvcnQgKiBmcm9tICcuL21vZHVsZXMvc2VjdGlvbmVkLWZvcm0vc2VjdGlvbmVkLWZvcm0uY29tcG9uZW50JztcbiJdfQ==
@@ -1,21 +0,0 @@
1
- /**
2
- * Generated bundle index. Do not edit.
3
- */
4
- export * from './public_api';
5
- export { SkySectionedFormSectionComponent as ɵd } from './modules/sectioned-form/sectioned-form-section.component';
6
- export { SkyTabsResourcesModule as ɵj } from './modules/shared/tabs-resources.module';
7
- export { SkyTabButtonComponent as ɵl } from './modules/tabs/tab-button.component';
8
- export { SkyTabComponent as ɵm } from './modules/tabs/tab.component';
9
- export { SkyTabsetAdapterService as ɵq } from './modules/tabs/tabset-adapter.service';
10
- export { SkyTabsetNavButtonComponent as ɵr } from './modules/tabs/tabset-nav-button.component';
11
- export { SkyTabsetPermalinkService as ɵn } from './modules/tabs/tabset-permalink.service';
12
- export { SkyTabsetComponent as ɵp } from './modules/tabs/tabset.component';
13
- export { SkyTabsetService as ɵo } from './modules/tabs/tabset.service';
14
- export { SkyVerticalTabMediaQueryService as ɵf } from './modules/vertical-tabset/vertical-tab-media-query.service';
15
- export { SkyVerticalTabComponent as ɵe } from './modules/vertical-tabset/vertical-tab.component';
16
- export { SkyVerticalTabsetAdapterService as ɵg } from './modules/vertical-tabset/vertical-tabset-adapter.service';
17
- export { SkyVerticalTabsetGroupComponent as ɵi } from './modules/vertical-tabset/vertical-tabset-group.component';
18
- export { SkyVerticalTabsetComponent as ɵh } from './modules/vertical-tabset/vertical-tabset.component';
19
- export { HIDDEN_STATE as ɵb, SkyVerticalTabsetService as ɵc, VISIBLE_STATE as ɵa } from './modules/vertical-tabset/vertical-tabset.service';
20
- export { SkyTabsResourcesProvider as ɵk } from './plugin-resources/tabs-resources-provider';
21
- //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic2t5dXgtdGFicy5qcyIsInNvdXJjZVJvb3QiOiJuZzovL0Bza3l1eC90YWJzLyIsInNvdXJjZXMiOlsic2t5dXgtdGFicy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQTs7R0FFRztBQUVILGNBQWMsY0FBYyxDQUFDO0FBRTdCLE9BQU8sRUFBQyxnQ0FBZ0MsSUFBSSxFQUFFLEVBQUMsTUFBTSwyREFBMkQsQ0FBQztBQUNqSCxPQUFPLEVBQUMsc0JBQXNCLElBQUksRUFBRSxFQUFDLE1BQU0sd0NBQXdDLENBQUM7QUFDcEYsT0FBTyxFQUFDLHFCQUFxQixJQUFJLEVBQUUsRUFBQyxNQUFNLHFDQUFxQyxDQUFDO0FBQ2hGLE9BQU8sRUFBQyxlQUFlLElBQUksRUFBRSxFQUFDLE1BQU0sOEJBQThCLENBQUM7QUFDbkUsT0FBTyxFQUFDLHVCQUF1QixJQUFJLEVBQUUsRUFBQyxNQUFNLHVDQUF1QyxDQUFDO0FBQ3BGLE9BQU8sRUFBQywyQkFBMkIsSUFBSSxFQUFFLEVBQUMsTUFBTSw0Q0FBNEMsQ0FBQztBQUM3RixPQUFPLEVBQUMseUJBQXlCLElBQUksRUFBRSxFQUFDLE1BQU0seUNBQXlDLENBQUM7QUFDeEYsT0FBTyxFQUFDLGtCQUFrQixJQUFJLEVBQUUsRUFBQyxNQUFNLGlDQUFpQyxDQUFDO0FBQ3pFLE9BQU8sRUFBQyxnQkFBZ0IsSUFBSSxFQUFFLEVBQUMsTUFBTSwrQkFBK0IsQ0FBQztBQUNyRSxPQUFPLEVBQUMsK0JBQStCLElBQUksRUFBRSxFQUFDLE1BQU0sNERBQTRELENBQUM7QUFDakgsT0FBTyxFQUFDLHVCQUF1QixJQUFJLEVBQUUsRUFBQyxNQUFNLGtEQUFrRCxDQUFDO0FBQy9GLE9BQU8sRUFBQywrQkFBK0IsSUFBSSxFQUFFLEVBQUMsTUFBTSwyREFBMkQsQ0FBQztBQUNoSCxPQUFPLEVBQUMsK0JBQStCLElBQUksRUFBRSxFQUFDLE1BQU0sMkRBQTJELENBQUM7QUFDaEgsT0FBTyxFQUFDLDBCQUEwQixJQUFJLEVBQUUsRUFBQyxNQUFNLHFEQUFxRCxDQUFDO0FBQ3JHLE9BQU8sRUFBQyxZQUFZLElBQUksRUFBRSxFQUFDLHdCQUF3QixJQUFJLEVBQUUsRUFBQyxhQUFhLElBQUksRUFBRSxFQUFDLE1BQU0sbURBQW1ELENBQUM7QUFDeEksT0FBTyxFQUFDLHdCQUF3QixJQUFJLEVBQUUsRUFBQyxNQUFNLDRDQUE0QyxDQUFDIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBHZW5lcmF0ZWQgYnVuZGxlIGluZGV4LiBEbyBub3QgZWRpdC5cbiAqL1xuXG5leHBvcnQgKiBmcm9tICcuL3B1YmxpY19hcGknO1xuXG5leHBvcnQge1NreVNlY3Rpb25lZEZvcm1TZWN0aW9uQ29tcG9uZW50IGFzIMm1ZH0gZnJvbSAnLi9tb2R1bGVzL3NlY3Rpb25lZC1mb3JtL3NlY3Rpb25lZC1mb3JtLXNlY3Rpb24uY29tcG9uZW50JztcbmV4cG9ydCB7U2t5VGFic1Jlc291cmNlc01vZHVsZSBhcyDJtWp9IGZyb20gJy4vbW9kdWxlcy9zaGFyZWQvdGFicy1yZXNvdXJjZXMubW9kdWxlJztcbmV4cG9ydCB7U2t5VGFiQnV0dG9uQ29tcG9uZW50IGFzIMm1bH0gZnJvbSAnLi9tb2R1bGVzL3RhYnMvdGFiLWJ1dHRvbi5jb21wb25lbnQnO1xuZXhwb3J0IHtTa3lUYWJDb21wb25lbnQgYXMgybVtfSBmcm9tICcuL21vZHVsZXMvdGFicy90YWIuY29tcG9uZW50JztcbmV4cG9ydCB7U2t5VGFic2V0QWRhcHRlclNlcnZpY2UgYXMgybVxfSBmcm9tICcuL21vZHVsZXMvdGFicy90YWJzZXQtYWRhcHRlci5zZXJ2aWNlJztcbmV4cG9ydCB7U2t5VGFic2V0TmF2QnV0dG9uQ29tcG9uZW50IGFzIMm1cn0gZnJvbSAnLi9tb2R1bGVzL3RhYnMvdGFic2V0LW5hdi1idXR0b24uY29tcG9uZW50JztcbmV4cG9ydCB7U2t5VGFic2V0UGVybWFsaW5rU2VydmljZSBhcyDJtW59IGZyb20gJy4vbW9kdWxlcy90YWJzL3RhYnNldC1wZXJtYWxpbmsuc2VydmljZSc7XG5leHBvcnQge1NreVRhYnNldENvbXBvbmVudCBhcyDJtXB9IGZyb20gJy4vbW9kdWxlcy90YWJzL3RhYnNldC5jb21wb25lbnQnO1xuZXhwb3J0IHtTa3lUYWJzZXRTZXJ2aWNlIGFzIMm1b30gZnJvbSAnLi9tb2R1bGVzL3RhYnMvdGFic2V0LnNlcnZpY2UnO1xuZXhwb3J0IHtTa3lWZXJ0aWNhbFRhYk1lZGlhUXVlcnlTZXJ2aWNlIGFzIMm1Zn0gZnJvbSAnLi9tb2R1bGVzL3ZlcnRpY2FsLXRhYnNldC92ZXJ0aWNhbC10YWItbWVkaWEtcXVlcnkuc2VydmljZSc7XG5leHBvcnQge1NreVZlcnRpY2FsVGFiQ29tcG9uZW50IGFzIMm1ZX0gZnJvbSAnLi9tb2R1bGVzL3ZlcnRpY2FsLXRhYnNldC92ZXJ0aWNhbC10YWIuY29tcG9uZW50JztcbmV4cG9ydCB7U2t5VmVydGljYWxUYWJzZXRBZGFwdGVyU2VydmljZSBhcyDJtWd9IGZyb20gJy4vbW9kdWxlcy92ZXJ0aWNhbC10YWJzZXQvdmVydGljYWwtdGFic2V0LWFkYXB0ZXIuc2VydmljZSc7XG5leHBvcnQge1NreVZlcnRpY2FsVGFic2V0R3JvdXBDb21wb25lbnQgYXMgybVpfSBmcm9tICcuL21vZHVsZXMvdmVydGljYWwtdGFic2V0L3ZlcnRpY2FsLXRhYnNldC1ncm91cC5jb21wb25lbnQnO1xuZXhwb3J0IHtTa3lWZXJ0aWNhbFRhYnNldENvbXBvbmVudCBhcyDJtWh9IGZyb20gJy4vbW9kdWxlcy92ZXJ0aWNhbC10YWJzZXQvdmVydGljYWwtdGFic2V0LmNvbXBvbmVudCc7XG5leHBvcnQge0hJRERFTl9TVEFURSBhcyDJtWIsU2t5VmVydGljYWxUYWJzZXRTZXJ2aWNlIGFzIMm1YyxWSVNJQkxFX1NUQVRFIGFzIMm1YX0gZnJvbSAnLi9tb2R1bGVzL3ZlcnRpY2FsLXRhYnNldC92ZXJ0aWNhbC10YWJzZXQuc2VydmljZSc7XG5leHBvcnQge1NreVRhYnNSZXNvdXJjZXNQcm92aWRlciBhcyDJtWt9IGZyb20gJy4vcGx1Z2luLXJlc291cmNlcy90YWJzLXJlc291cmNlcy1wcm92aWRlcic7Il19
@@ -1,2 +0,0 @@
1
- export * from './tabs/tabset-fixture';
2
- //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicHVibGljX2FwaS5qcyIsInNvdXJjZVJvb3QiOiJuZzovL0Bza3l1eC90YWJzL3Rlc3RpbmcvIiwic291cmNlcyI6WyJwdWJsaWNfYXBpLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUNBLGNBQWMsdUJBQXVCLENBQUMiLCJzb3VyY2VzQ29udGVudCI6WyJleHBvcnQgKiBmcm9tICcuL3RhYnMvdGFiLWZpeHR1cmUtdGFiJztcbmV4cG9ydCAqIGZyb20gJy4vdGFicy90YWJzZXQtZml4dHVyZSc7XG4iXX0=
@@ -1,5 +0,0 @@
1
- /**
2
- * Generated bundle index. Do not edit.
3
- */
4
- export * from './public_api';
5
- //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic2t5dXgtdGFicy10ZXN0aW5nLmpzIiwic291cmNlUm9vdCI6Im5nOi8vQHNreXV4L3RhYnMvdGVzdGluZy8iLCJzb3VyY2VzIjpbInNreXV4LXRhYnMtdGVzdGluZy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQTs7R0FFRztBQUVILGNBQWMsY0FBYyxDQUFDIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBHZW5lcmF0ZWQgYnVuZGxlIGluZGV4LiBEbyBub3QgZWRpdC5cbiAqL1xuXG5leHBvcnQgKiBmcm9tICcuL3B1YmxpY19hcGknO1xuIl19
@@ -1 +0,0 @@
1
- //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidGFiLWZpeHR1cmUtdGFiLmpzIiwic291cmNlUm9vdCI6Im5nOi8vQHNreXV4L3RhYnMvdGVzdGluZy8iLCJzb3VyY2VzIjpbInRhYnMvdGFiLWZpeHR1cmUtdGFiLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiIiLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIFByb3BlcnRpZXMgb2YgYSBTS1kgVVggdGFiLlxuICovXG5leHBvcnQgaW50ZXJmYWNlIFNreVRhYnNldEZpeHR1cmVUYWIge1xuXG4gIC8qKlxuICAgKiBJbmRpY2F0ZXMgd2hldGhlciB0aGUgdGFiIGlzIHRoZSBjdXJyZW50bHkgc2VsZWN0ZWQgdGFiLlxuICAgKi9cbiAgYWN0aXZlOiBib29sZWFuO1xuXG4gIC8qKlxuICAgKiBJbmRpY2F0ZXMgd2hldGhlciB0aGUgdGFiIGlzIGRpc2FibGVkLlxuICAgKi9cbiAgZGlzYWJsZWQ6IGJvb2xlYW47XG5cbiAgLyoqXG4gICAqIFRoZSBwZXJtYWxpbmsgdmFsdWUgc3BlY2lmaWVkIGZvciB0aGUgdGFiLlxuICAgKi9cbiAgcGVybWFsaW5rVmFsdWU6IHN0cmluZztcblxuICAvKipcbiAgICogVGhlIGNvdW50IGRpc3BsYXllZCBpbiB0aGUgdGFiIGhlYWRlci5cbiAgICovXG4gIHRhYkhlYWRlckNvdW50OiBzdHJpbmc7XG5cbiAgLyoqXG4gICAqIFRoZSB0ZXh0IGRpc3BsYXllZCBpbiB0aGUgdGFiIGhlYWRlci5cbiAgICovXG4gIHRhYkhlYWRpbmc6IHN0cmluZztcblxufVxuIl19
@@ -1,168 +0,0 @@
1
- import { __awaiter, __generator } from "tslib";
2
- import { By } from '@angular/platform-browser';
3
- import { SkyAppTestUtility } from '@skyux-sdk/testing';
4
- /**
5
- * Allows interaction with a SKY UX tabset component.
6
- */
7
- var SkyTabsetFixture = /** @class */ (function () {
8
- function SkyTabsetFixture(fixture, skyTestId) {
9
- this.fixture = fixture;
10
- this.debugEl = SkyAppTestUtility.getDebugElementByTestId(fixture, skyTestId, 'sky-tabset');
11
- }
12
- Object.defineProperty(SkyTabsetFixture.prototype, "ariaLabel", {
13
- /**
14
- * The tabset component's ARIA label.
15
- */
16
- get: function () {
17
- var tabsetEl = this.getTabsetEl();
18
- return tabsetEl.getAttribute('aria-label') || undefined;
19
- },
20
- enumerable: true,
21
- configurable: true
22
- });
23
- Object.defineProperty(SkyTabsetFixture.prototype, "ariaLabelledBy", {
24
- /**
25
- * The tabset component's ARIA labelled by attribute.
26
- */
27
- get: function () {
28
- var tabsetEl = this.getTabsetEl();
29
- return tabsetEl.getAttribute('aria-labelledby') || undefined;
30
- },
31
- enumerable: true,
32
- configurable: true
33
- });
34
- Object.defineProperty(SkyTabsetFixture.prototype, "activeTabIndex", {
35
- /**
36
- * The index of the currently selected tab.
37
- */
38
- get: function () {
39
- var tabLinkEls = this.getTabLinkEls();
40
- for (var i = 0, n = tabLinkEls.length; i < n; i++) {
41
- if (tabLinkEls.item(i).classList.contains('sky-btn-tab-selected')) {
42
- return i;
43
- }
44
- }
45
- return -1;
46
- },
47
- enumerable: true,
48
- configurable: true
49
- });
50
- /**
51
- * Retrieves information about the tab at the specified index.
52
- * @param tabIndex The index of the tab.
53
- */
54
- SkyTabsetFixture.prototype.getTab = function (tabIndex) {
55
- var tabLinkEl = this.getTabLinkEl(tabIndex);
56
- var active = this.activeTabIndex === tabIndex;
57
- var disabled = tabLinkEl.classList.contains('sky-btn-tab-disabled');
58
- var tabHeading = this.getTextContent(tabLinkEl.querySelector('.sky-tab-heading').childNodes[0]);
59
- var tabHeaderCount = this.getTextContent(tabLinkEl.querySelector('.sky-tab-header-count'));
60
- var permalinkValue;
61
- if (tabLinkEl.href) {
62
- var permalink = tabLinkEl.href.split('?')[1];
63
- if (permalink) {
64
- var permalinkParts = permalink.split('=');
65
- permalinkValue = decodeURIComponent(permalinkParts[1]);
66
- }
67
- }
68
- return {
69
- active: active,
70
- disabled: disabled,
71
- permalinkValue: permalinkValue,
72
- tabHeaderCount: tabHeaderCount,
73
- tabHeading: tabHeading
74
- };
75
- };
76
- /**
77
- * Clicks the tabset's "new" button.
78
- */
79
- SkyTabsetFixture.prototype.clickNewButton = function () {
80
- return __awaiter(this, void 0, void 0, function () {
81
- return __generator(this, function (_a) {
82
- return [2 /*return*/, this.clickButton('sky-tabset-btn-new')];
83
- });
84
- });
85
- };
86
- /**
87
- * Clicks the tabset's "open" button.
88
- */
89
- SkyTabsetFixture.prototype.clickOpenButton = function () {
90
- return __awaiter(this, void 0, void 0, function () {
91
- return __generator(this, function (_a) {
92
- return [2 /*return*/, this.clickButton('sky-tabset-btn-open')];
93
- });
94
- });
95
- };
96
- /**
97
- * Clicks the tab button at the specified index.
98
- * @param tabIndex The index of the tab.
99
- */
100
- SkyTabsetFixture.prototype.clickTab = function (tabIndex) {
101
- return __awaiter(this, void 0, void 0, function () {
102
- var tabLinkEl;
103
- return __generator(this, function (_a) {
104
- tabLinkEl = this.getTabLinkEl(tabIndex);
105
- if (!tabLinkEl) {
106
- throw new Error("There is no tab at index " + tabIndex + ".");
107
- }
108
- tabLinkEl.click();
109
- this.fixture.detectChanges();
110
- return [2 /*return*/, this.fixture.whenStable()];
111
- });
112
- });
113
- };
114
- /**
115
- * Click's the tab's close button at the specified index.
116
- * @param tabIndex The index of the tab.
117
- */
118
- SkyTabsetFixture.prototype.clickTabClose = function (tabIndex) {
119
- return __awaiter(this, void 0, void 0, function () {
120
- var tabWrapperEl, closeBtnEl;
121
- return __generator(this, function (_a) {
122
- tabWrapperEl = this.getTabsetEl().querySelectorAll(".sky-tabset-tabs .sky-btn-tab-wrapper")[tabIndex];
123
- if (!tabWrapperEl) {
124
- throw new Error("There is no tab at index " + tabIndex + ".");
125
- }
126
- closeBtnEl = tabWrapperEl.querySelector('.sky-btn-tab-close');
127
- if (!closeBtnEl) {
128
- throw new Error('The specified tab does not have a close button.');
129
- }
130
- closeBtnEl.click();
131
- this.fixture.detectChanges();
132
- return [2 /*return*/, this.fixture.whenStable()];
133
- });
134
- });
135
- };
136
- SkyTabsetFixture.prototype.clickButton = function (buttonCls) {
137
- return __awaiter(this, void 0, void 0, function () {
138
- var tabsetEl, newButtonEl;
139
- return __generator(this, function (_a) {
140
- tabsetEl = this.getTabsetEl();
141
- newButtonEl = tabsetEl.querySelector(".sky-tabset-btns ." + buttonCls);
142
- newButtonEl.click();
143
- this.fixture.detectChanges();
144
- return [2 /*return*/, this.fixture.whenStable()];
145
- });
146
- });
147
- };
148
- SkyTabsetFixture.prototype.getTabsetEl = function () {
149
- var tabsetEl = this.debugEl.query(By.css('.sky-tabset')).nativeElement;
150
- return tabsetEl;
151
- };
152
- SkyTabsetFixture.prototype.getTabLinkEls = function () {
153
- return this.getTabsetEl().querySelectorAll(".sky-tabset-tabs .sky-btn-tab");
154
- };
155
- SkyTabsetFixture.prototype.getTabLinkEl = function (tabIndex) {
156
- var tabLinkEl = this.getTabLinkEls().item(tabIndex);
157
- if (!tabLinkEl) {
158
- throw new Error("There is no tab at index " + tabIndex + ".");
159
- }
160
- return tabLinkEl;
161
- };
162
- SkyTabsetFixture.prototype.getTextContent = function (el) {
163
- return (el && el.textContent.trim()) || undefined;
164
- };
165
- return SkyTabsetFixture;
166
- }());
167
- export { SkyTabsetFixture };
168
- //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidGFic2V0LWZpeHR1cmUuanMiLCJzb3VyY2VSb290Ijoibmc6Ly9Ac2t5dXgvdGFicy90ZXN0aW5nLyIsInNvdXJjZXMiOlsidGFicy90YWJzZXQtZml4dHVyZS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiO0FBUUEsT0FBTyxFQUNMLEVBQUUsRUFDSCxNQUFNLDJCQUEyQixDQUFDO0FBRW5DLE9BQU8sRUFDTCxpQkFBaUIsRUFDbEIsTUFBTSxvQkFBb0IsQ0FBQztBQU01Qjs7R0FFRztBQUNIO0lBbUNFLDBCQUNVLE9BQThCLEVBQ3RDLFNBQWlCO1FBRFQsWUFBTyxHQUFQLE9BQU8sQ0FBdUI7UUFHdEMsSUFBSSxDQUFDLE9BQU8sR0FBRyxpQkFBaUIsQ0FBQyx1QkFBdUIsQ0FBQyxPQUFPLEVBQUUsU0FBUyxFQUFFLFlBQVksQ0FBQyxDQUFDO0lBQzdGLENBQUM7SUFuQ0Qsc0JBQVcsdUNBQVM7UUFIcEI7O1dBRUc7YUFDSDtZQUNFLElBQU0sUUFBUSxHQUFHLElBQUksQ0FBQyxXQUFXLEVBQUUsQ0FBQztZQUNwQyxPQUFPLFFBQVEsQ0FBQyxZQUFZLENBQUMsWUFBWSxDQUFDLElBQUksU0FBUyxDQUFDO1FBQzFELENBQUM7OztPQUFBO0lBS0Qsc0JBQVcsNENBQWM7UUFIekI7O1dBRUc7YUFDSDtZQUNFLElBQU0sUUFBUSxHQUFHLElBQUksQ0FBQyxXQUFXLEVBQUUsQ0FBQztZQUNwQyxPQUFPLFFBQVEsQ0FBQyxZQUFZLENBQUMsaUJBQWlCLENBQUMsSUFBSSxTQUFTLENBQUM7UUFDL0QsQ0FBQzs7O09BQUE7SUFLRCxzQkFBVyw0Q0FBYztRQUh6Qjs7V0FFRzthQUNIO1lBQ0UsSUFBTSxVQUFVLEdBQUcsSUFBSSxDQUFDLGFBQWEsRUFBRSxDQUFDO1lBRXhDLEtBQUssSUFBSSxDQUFDLEdBQUcsQ0FBQyxFQUFFLENBQUMsR0FBRyxVQUFVLENBQUMsTUFBTSxFQUFFLENBQUMsR0FBRyxDQUFDLEVBQUUsQ0FBQyxFQUFFLEVBQUU7Z0JBQ2pELElBQUks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QyxJQUFJLEVBQUUsQ0FBQyxJQUFJLFNBQVMsQ0FBQztJQUNwRCxDQUFDO0lBRUgsdUJBQUM7QUFBRCxDQUFDLEFBMUtELElBMEtDIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHtcbiAgQ29tcG9uZW50Rml4dHVyZVxufSBmcm9tICdAYW5ndWxhci9jb3JlL3Rlc3RpbmcnO1xuXG5pbXBvcnQge1xuICBEZWJ1Z0VsZW1lbnRcbn0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5cbmltcG9ydCB7XG4gIEJ5XG59IGZyb20gJ0Bhbmd1bGFyL3BsYXRmb3JtLWJyb3dzZXInO1xuXG5pbXBvcnQge1xuICBTa3lBcHBUZXN0VXRpbGl0eVxufSBmcm9tICdAc2t5dXgtc2RrL3Rlc3RpbmcnO1xuXG5pbXBvcnQge1xuICBTa3lUYWJzZXRGaXh0dXJlVGFiXG59IGZyb20gJy4vdGFiLWZpeHR1cmUtdGFiJztcblxuLyoqXG4gKiBBbGxvd3MgaW50ZXJhY3Rpb24gd2l0aCBhIFNLWSBVWCB0YWJzZXQgY29tcG9uZW50LlxuICovXG5leHBvcnQgY2xhc3MgU2t5VGFic2V0Rml4dHVyZSB7XG5cbiAgLyoqXG4gICAqIFRoZSB0YWJzZXQgY29tcG9uZW50J3MgQVJJQSBsYWJlbC5cbiAgICovXG4gIHB1YmxpYyBnZXQgYXJpYUxhYmVsKCk6IHN0cmluZyB7XG4gICAgY29uc3QgdGFic2V0RWwgPSB0aGlzLmdldFRhYnNldEVsKCk7XG4gICAgcmV0dXJuIHRhYnNldEVsLmdldEF0dHJpYnV0ZSgnYXJpYS1sYWJlbCcpIHx8IHVuZGVmaW5lZDtcbiAgfVxuXG4gIC8qKlxuICAgKiBUaGUgdGFic2V0IGNvbXBvbmVudCdzIEFSSUEgbGFiZWxsZWQgYnkgYXR0cmlidXRlLlxuICAgKi9cbiAgcHVibGljIGdldCBhcmlhTGFiZWxsZWRCeSgpOiBzdHJpbmcge1xuICAgIGNvbnN0IHRhYnNldEVsID0gdGhpcy5nZXRUYWJzZXRFbCgpO1xuICAgIHJldHVybiB0YWJzZXRFbC5nZXRBdHRyaWJ1dGUoJ2FyaWEtbGFiZWxsZWRieScpIHx8IHVuZGVmaW5lZDtcbiAgfVxuXG4gIC8qKlxuICAgKiBUaGUgaW5kZXggb2YgdGhlIGN1cnJlbnRseSBzZWxlY3RlZCB0YWIuXG4gICAqL1xuICBwdWJsaWMgZ2V0IGFjdGl2ZVRhYkluZGV4KCk6IG51bWJlciB7XG4gICAgY29uc3QgdGFiTGlua0VscyA9IHRoaXMuZ2V0VGFiTGlua0VscygpO1xuXG4gICAgZm9yIChsZXQgaSA9IDAsIG4gPSB0YWJMaW5rRWxzLmxlbmd0aDsgaSA8IG47IGkrKykge1xuICAgICAgaWYgKHRhYkxpbmtFbHMuaXRlbShpKS5jbGFzc0xpc3QuY29udGFpbnMoJ3NreS1idG4tdGFiLXNlbGVjdGVkJykpIHtcbiAgICAgICAgcmV0dXJuIGk7XG4gICAgICB9XG4gICAgfVxuXG4gICAgcmV0dXJuIC0xO1xuICB9XG5cbiAgcHJpdmF0ZSBkZWJ1Z0VsOiBEZWJ1Z0VsZW1lbnQ7XG5cbiAgY29uc3RydWN0b3IoXG4gICAgcHJpdmF0ZSBmaXh0dXJlOiBDb21wb25lbnRGaXh0dXJlPGFueT4sXG4gICAgc2t5VGVzdElkOiBzdHJpbmdcbiAgKSB7XG4gICAgdGhpcy5kZWJ1Z0VsID0gU2t5QXBwVGVzdFV0aWxpdHkuZ2V0RGVidWdFbGVtZW50QnlUZXN0SWQoZml4dHVyZSwgc2t5VGVzdElkLCAnc2t5LXRhYnNldCcpO1xuICB9XG5cbiAgLyoqXG4gICAqIFJldHJpZXZlcyBpbmZvcm1hdGlvbiBhYm91dCB0aGUgdGFiIGF0IHRoZSBzcGVjaWZpZWQgaW5kZXguXG4gICAqIEBwYXJhbSB0YWJJbmRleCBUaGUgaW5kZXggb2YgdGhlIHRhYi5cbiAgICovXG4gIHB1YmxpYyBnZXRUYWIodGFiSW5kZXg6IG51bWJlcik6IFNreVRhYnNldEZpeHR1cmVUYWIge1xuICAgIGNvbnN0IHRhYkxpbmtFbCA9IHRoaXMuZ2V0VGFiTGlua0VsKHRhYkluZGV4KTtcblxuICAgIGNvbnN0IGFjdGl2ZSA9IHRoaXMuYWN0aXZlVGFiSW5kZXggPT09IHRhYkluZGV4O1xuICAgIGNvbnN0IGRpc2FibGVkID0gdGFiTGlua0VsLmNsYXNzTGlzdC5jb250YWlucygnc2t5LWJ0bi10YWItZGlzYWJsZWQnKTtcbiAgICBjb25zdCB0YWJIZWFkaW5nID0gdGhpcy5nZXRUZXh0Q29udGVudChcbiAgICAgIHRhYkxpbmtFbC5xdWVyeVNlbGVjdG9yKCcuc2t5LXRhYi1oZWFkaW5nJykuY2hpbGROb2Rlc1swXVxuICAgICk7XG4gICAgY29uc3QgdGFiSGVhZGVyQ291bnQgPSB0aGlzLmdldFRleHRDb250ZW50KHRhYkxpbmtFbC5xdWVyeVNlbGVjdG9yKCcuc2t5LXRhYi1oZWFkZXItY291bnQnKSk7XG5cbiAgICBsZXQgcGVybWFsaW5rVmFsdWU6IHN0cmluZztcblxuICAgIGlmICh0YWJMaW5rRWwuaHJlZikge1xuICAgICAgY29uc3QgcGVybWFsaW5rID0gdGFiTGlua0VsLmhyZWYuc3BsaXQoJz8nKVsxXTtcbiAgICAgIGlmIChwZXJtYWxpbmspIHtcbiAgICAgICAgY29uc3QgcGVybWFsaW5rUGFydHMgPSBwZXJtYWxpbmsuc3BsaXQoJz0nKTtcblxuICAgICAgICBwZXJtYWxpbmtWYWx1ZSA9IGRlY29kZVVSSUNvbXBvbmVudChwZXJtYWxpbmtQYXJ0c1sxXSk7XG4gICAgICB9XG4gICAgfVxuXG4gICAgcmV0dXJuIHtcbiAgICAgIGFjdGl2ZSxcbiAgICAgIGRpc2FibGVkLFxuICAgICAgcGVybWFsaW5rVmFsdWUsXG4gICAgICB0YWJIZWFkZXJDb3VudCxcbiAgICAgIHRhYkhlYWRpbmdcbiAgICB9O1xuICB9XG5cbiAgLyoqXG4gICAqIENsaWNrcyB0aGUgdGFic2V0J3MgXCJuZXdcIiBidXR0b24uXG4gICAqL1xuICBwdWJsaWMgYXN5bmMgY2xpY2tOZXdCdXR0b24oKTogUHJvbWlzZTxhbnk+IHtcbiAgICByZXR1cm4gdGhpcy5jbGlja0J1dHRvbignc2t5LXRhYnNldC1idG4tbmV3Jyk7XG4gIH1cblxuICAvKipcbiAgICogQ2xpY2tzIHRoZSB0YWJzZXQncyBcIm9wZW5cIiBidXR0b24uXG4gICAqL1xuICBwdWJsaWMgYXN5bmMgY2xpY2tPcGVuQnV0dG9uKCk6IFByb21pc2U8YW55PiB7XG4gICAgcmV0dXJuIHRoaXMuY2xpY2tCdXR0b24oJ3NreS10YWJzZXQtYnRuLW9wZW4nKTtcbiAgfVxuXG4gIC8qKlxuICAgKiBDbGlja3MgdGhlIHRhYiBidXR0b24gYXQgdGhlIHNwZWNpZmllZCBpbmRleC5cbiAgICogQHBhcmFtIHRhYkluZGV4IFRoZSBpbmRleCBvZiB0aGUgdGFiLlxuICAgKi9cbiAgcHVibGljIGFzeW5jIGNsaWNrVGFiKHRhYkluZGV4OiBudW1iZXIpOiBQcm9taXNlPGFueT4ge1xuICAgIGNvbnN0IHRhYkxpbmtFbCA9IHRoaXMuZ2V0VGFiTGlua0VsKHRhYkluZGV4KTtcblxuICAgIGlmICghdGFiTGlua0VsKSB7XG4gICAgICB0aHJvdyBuZXcgRXJyb3IoYFRoZXJlIGlzIG5vIHRhYiBhdCBpbmRleCAke3RhYkluZGV4fS5gKTtcbiAgICB9XG5cbiAgICB0YWJMaW5rRWwuY2xpY2soKTtcblxuICAgIHRoaXMuZml4dHVyZS5kZXRlY3RDaGFuZ2VzKCk7XG4gICAgcmV0dXJuIHRoaXMuZml4dHVyZS53aGVuU3RhYmxlKCk7XG4gIH1cblxuICAvKipcbiAgICogQ2xpY2sncyB0aGUgdGFiJ3MgY2xvc2UgYnV0dG9uIGF0IHRoZSBzcGVjaWZpZWQgaW5kZXguXG4gICAqIEBwYXJhbSB0YWJJbmRleCBUaGUgaW5kZXggb2YgdGhlIHRhYi5cbiAgICovXG4gIHB1YmxpYyBhc3luYyBjbGlja1RhYkNsb3NlKHRhYkluZGV4OiBudW1iZXIpOiBQcm9taXNlPGFueT4ge1xuICAgIGNvbnN0IHRhYldyYXBwZXJFbCA9IHRoaXMuZ2V0VGFic2V0RWwoKS5xdWVyeVNlbGVjdG9yQWxsKFxuICAgICAgYC5za3ktdGFic2V0LXRhYnMgLnNreS1idG4tdGFiLXdyYXBwZXJgXG4gICAgKVt0YWJJbmRleF07XG5cbiAgICBpZiAoIXRhYldyYXBwZXJFbCkge1xuICAgICAgdGhyb3cgbmV3IEVycm9yKGBUaGVyZSBpcyBubyB0YWIgYXQgaW5kZXggJHt0YWJJbmRleH0uYCk7XG4gICAgfVxuXG4gICAgY29uc3QgY2xvc2VCdG5FbCA9IHRhYldyYXBwZXJFbC5xdWVyeVNlbGVjdG9yKCcuc2t5LWJ0bi10YWItY2xvc2UnKSBhcyBIVE1MQnV0dG9uRWxlbWVudDtcblxuICAgIGlmICghY2xvc2VCdG5FbCkge1xuICAgICAgdGhyb3cgbmV3IEVycm9yKCdUaGUgc3BlY2lmaWVkIHRhYiBkb2VzIG5vdCBoYXZlIGEgY2xvc2UgYnV0dG9uLicpO1xuICAgIH1cblxuICAgIGNsb3NlQnRuRWwuY2xpY2soKTtcblxuICAgIHRoaXMuZml4dHVyZS5kZXRlY3RDaGFuZ2VzKCk7XG4gICAgcmV0dXJuIHRoaXMuZml4dHVyZS53aGVuU3RhYmxlKCk7XG4gIH1cblxuICBwcml2YXRlIGFzeW5jIGNsaWNrQnV0dG9uKGJ1dHRvbkNsczogc3RyaW5nKTogUHJvbWlzZTxhbnk+IHtcbiAgICBjb25zdCB0YWJzZXRFbCA9IHRoaXMuZ2V0VGFic2V0RWwoKTtcblxuICAgIGNvbnN0IG5ld0J1dHRvbkVsID1cbiAgICAgIHRhYnNldEVsLnF1ZXJ5U2VsZWN0b3IoYC5za3ktdGFic2V0LWJ0bnMgLiR7YnV0dG9uQ2xzfWApIGFzIEhUTUxCdXR0b25FbGVtZW50O1xuXG4gICAgbmV3QnV0dG9uRWwuY2xpY2soKTtcblxuICAgIHRoaXMuZml4dHVyZS5kZXRlY3RDaGFuZ2VzKCk7XG4gICAgcmV0dXJuIHRoaXMuZml4dHVyZS53aGVuU3RhYmxlKCk7XG4gIH1cblxuICBwcml2YXRlIGdldFRhYnNldEVsKCk6IEhUTUxEaXZFbGVtZW50IHtcbiAgICBjb25zdCB0YWJzZXRFbCA9IHRoaXMuZGVidWdFbC5xdWVyeShCeS5jc3MoJy5za3ktdGFic2V0JykpLm5hdGl2ZUVsZW1lbnQ7XG5cbiAgICByZXR1cm4gdGFic2V0RWw7XG4gIH1cblxuICBwcml2YXRlIGdldFRhYkxpbmtFbHMoKTogTm9kZUxpc3RPZjxIVE1MQW5jaG9yRWxlbWVudD4ge1xuICAgIHJldHVybiB0aGlzLmdldFRhYnNldEVsKCkucXVlcnlTZWxlY3RvckFsbChcbiAgICAgIGAuc2t5LXRhYnNldC10YWJzIC5za3ktYnRuLXRhYmBcbiAgICApO1xuICB9XG5cbiAgcHJpdmF0ZSBnZXRUYWJMaW5rRWwodGFiSW5kZXg6IG51bWJlcik6IEhUTUxBbmNob3JFbGVtZW50IHtcbiAgICBjb25zdCB0YWJMaW5rRWwgPSB0aGlzLmdldFRhYkxpbmtFbHMoKS5pdGVtKHRhYkluZGV4KTtcblxuICAgIGlmICghdGFiTGlua0VsKSB7XG4gICAgICB0aHJvdyBuZXcgRXJyb3IoYFRoZXJlIGlzIG5vIHRhYiBhdCBpbmRleCAke3RhYkluZGV4fS5gKTtcbiAgICB9XG5cbiAgICByZXR1cm4gdGFiTGlua0VsO1xuICB9XG5cbiAgcHJpdmF0ZSBnZXRUZXh0Q29udGVudChlbDogRWxlbWVudCB8IE5vZGUpOiBzdHJpbmcge1xuICAgIHJldHVybiAoZWwgJiYgZWwudGV4dENvbnRlbnQudHJpbSgpKSB8fCB1bmRlZmluZWQ7XG4gIH1cblxufVxuIl19
@@ -1,174 +0,0 @@
1
- import { __awaiter, __generator } from 'tslib';
2
- import { By } from '@angular/platform-browser';
3
- import { SkyAppTestUtility } from '@skyux-sdk/testing';
4
-
5
- /**
6
- * Allows interaction with a SKY UX tabset component.
7
- */
8
- var SkyTabsetFixture = /** @class */ (function () {
9
- function SkyTabsetFixture(fixture, skyTestId) {
10
- this.fixture = fixture;
11
- this.debugEl = SkyAppTestUtility.getDebugElementByTestId(fixture, skyTestId, 'sky-tabset');
12
- }
13
- Object.defineProperty(SkyTabsetFixture.prototype, "ariaLabel", {
14
- /**
15
- * The tabset component's ARIA label.
16
- */
17
- get: function () {
18
- var tabsetEl = this.getTabsetEl();
19
- return tabsetEl.getAttribute('aria-label') || undefined;
20
- },
21
- enumerable: true,
22
- configurable: true
23
- });
24
- Object.defineProperty(SkyTabsetFixture.prototype, "ariaLabelledBy", {
25
- /**
26
- * The tabset component's ARIA labelled by attribute.
27
- */
28
- get: function () {
29
- var tabsetEl = this.getTabsetEl();
30
- return tabsetEl.getAttribute('aria-labelledby') || undefined;
31
- },
32
- enumerable: true,
33
- configurable: true
34
- });
35
- Object.defineProperty(SkyTabsetFixture.prototype, "activeTabIndex", {
36
- /**
37
- * The index of the currently selected tab.
38
- */
39
- get: function () {
40
- var tabLinkEls = this.getTabLinkEls();
41
- for (var i = 0, n = tabLinkEls.length; i < n; i++) {
42
- if (tabLinkEls.item(i).classList.contains('sky-btn-tab-selected')) {
43
- return i;
44
- }
45
- }
46
- return -1;
47
- },
48
- enumerable: true,
49
- configurable: true
50
- });
51
- /**
52
- * Retrieves information about the tab at the specified index.
53
- * @param tabIndex The index of the tab.
54
- */
55
- SkyTabsetFixture.prototype.getTab = function (tabIndex) {
56
- var tabLinkEl = this.getTabLinkEl(tabIndex);
57
- var active = this.activeTabIndex === tabIndex;
58
- var disabled = tabLinkEl.classList.contains('sky-btn-tab-disabled');
59
- var tabHeading = this.getTextContent(tabLinkEl.querySelector('.sky-tab-heading').childNodes[0]);
60
- var tabHeaderCount = this.getTextContent(tabLinkEl.querySelector('.sky-tab-header-count'));
61
- var permalinkValue;
62
- if (tabLinkEl.href) {
63
- var permalink = tabLinkEl.href.split('?')[1];
64
- if (permalink) {
65
- var permalinkParts = permalink.split('=');
66
- permalinkValue = decodeURIComponent(permalinkParts[1]);
67
- }
68
- }
69
- return {
70
- active: active,
71
- disabled: disabled,
72
- permalinkValue: permalinkValue,
73
- tabHeaderCount: tabHeaderCount,
74
- tabHeading: tabHeading
75
- };
76
- };
77
- /**
78
- * Clicks the tabset's "new" button.
79
- */
80
- SkyTabsetFixture.prototype.clickNewButton = function () {
81
- return __awaiter(this, void 0, void 0, function () {
82
- return __generator(this, function (_a) {
83
- return [2 /*return*/, this.clickButton('sky-tabset-btn-new')];
84
- });
85
- });
86
- };
87
- /**
88
- * Clicks the tabset's "open" button.
89
- */
90
- SkyTabsetFixture.prototype.clickOpenButton = function () {
91
- return __awaiter(this, void 0, void 0, function () {
92
- return __generator(this, function (_a) {
93
- return [2 /*return*/, this.clickButton('sky-tabset-btn-open')];
94
- });
95
- });
96
- };
97
- /**
98
- * Clicks the tab button at the specified index.
99
- * @param tabIndex The index of the tab.
100
- */
101
- SkyTabsetFixture.prototype.clickTab = function (tabIndex) {
102
- return __awaiter(this, void 0, void 0, function () {
103
- var tabLinkEl;
104
- return __generator(this, function (_a) {
105
- tabLinkEl = this.getTabLinkEl(tabIndex);
106
- if (!tabLinkEl) {
107
- throw new Error("There is no tab at index " + tabIndex + ".");
108
- }
109
- tabLinkEl.click();
110
- this.fixture.detectChanges();
111
- return [2 /*return*/, this.fixture.whenStable()];
112
- });
113
- });
114
- };
115
- /**
116
- * Click's the tab's close button at the specified index.
117
- * @param tabIndex The index of the tab.
118
- */
119
- SkyTabsetFixture.prototype.clickTabClose = function (tabIndex) {
120
- return __awaiter(this, void 0, void 0, function () {
121
- var tabWrapperEl, closeBtnEl;
122
- return __generator(this, function (_a) {
123
- tabWrapperEl = this.getTabsetEl().querySelectorAll(".sky-tabset-tabs .sky-btn-tab-wrapper")[tabIndex];
124
- if (!tabWrapperEl) {
125
- throw new Error("There is no tab at index " + tabIndex + ".");
126
- }
127
- closeBtnEl = tabWrapperEl.querySelector('.sky-btn-tab-close');
128
- if (!closeBtnEl) {
129
- throw new Error('The specified tab does not have a close button.');
130
- }
131
- closeBtnEl.click();
132
- this.fixture.detectChanges();
133
- return [2 /*return*/, this.fixture.whenStable()];
134
- });
135
- });
136
- };
137
- SkyTabsetFixture.prototype.clickButton = function (buttonCls) {
138
- return __awaiter(this, void 0, void 0, function () {
139
- var tabsetEl, newButtonEl;
140
- return __generator(this, function (_a) {
141
- tabsetEl = this.getTabsetEl();
142
- newButtonEl = tabsetEl.querySelector(".sky-tabset-btns ." + buttonCls);
143
- newButtonEl.click();
144
- this.fixture.detectChanges();
145
- return [2 /*return*/, this.fixture.whenStable()];
146
- });
147
- });
148
- };
149
- SkyTabsetFixture.prototype.getTabsetEl = function () {
150
- var tabsetEl = this.debugEl.query(By.css('.sky-tabset')).nativeElement;
151
- return tabsetEl;
152
- };
153
- SkyTabsetFixture.prototype.getTabLinkEls = function () {
154
- return this.getTabsetEl().querySelectorAll(".sky-tabset-tabs .sky-btn-tab");
155
- };
156
- SkyTabsetFixture.prototype.getTabLinkEl = function (tabIndex) {
157
- var tabLinkEl = this.getTabLinkEls().item(tabIndex);
158
- if (!tabLinkEl) {
159
- throw new Error("There is no tab at index " + tabIndex + ".");
160
- }
161
- return tabLinkEl;
162
- };
163
- SkyTabsetFixture.prototype.getTextContent = function (el) {
164
- return (el && el.textContent.trim()) || undefined;
165
- };
166
- return SkyTabsetFixture;
167
- }());
168
-
169
- /**
170
- * Generated bundle index. Do not edit.
171
- */
172
-
173
- export { SkyTabsetFixture };
174
- //# sourceMappingURL=skyux-tabs-testing.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"skyux-tabs-testing.js","sources":["ng://@skyux/tabs/testing/tabs/tabset-fixture.ts","ng://@skyux/tabs/testing/skyux-tabs-testing.ts"],"sourcesContent":["import {\n ComponentFixture\n} from '@angular/core/testing';\n\nimport {\n DebugElement\n} from '@angular/core';\n\nimport {\n By\n} from '@angular/platform-browser';\n\nimport {\n SkyAppTestUtility\n} from '@skyux-sdk/testing';\n\nimport {\n SkyTabsetFixtureTab\n} from './tab-fixture-tab';\n\n/**\n * Allows interaction with a SKY UX tabset component.\n */\nexport class SkyTabsetFixture {\n\n /**\n * The tabset component's ARIA label.\n */\n public get ariaLabel(): string {\n const tabsetEl = this.getTabsetEl();\n return tabsetEl.getAttribute('aria-label') || undefined;\n }\n\n /**\n * The tabset component's ARIA labelled by attribute.\n */\n public get ariaLabelledBy(): string {\n const tabsetEl = this.getTabsetEl();\n return tabsetEl.getAttribute('aria-labelledby') || undefined;\n }\n\n /**\n * The index of the currently selected tab.\n */\n public get activeTabIndex(): number {\n const tabLinkEls = this.getTabLinkEls();\n\n for (let i = 0, n = tabLinkEls.length; i < n; i++) {\n if (tabLinkEls.item(i).classList.contains('sky-btn-tab-selected')) {\n return i;\n }\n }\n\n return -1;\n }\n\n private debugEl: DebugElement;\n\n constructor(\n private fixture: ComponentFixture<any>,\n skyTestId: string\n ) {\n this.debugEl = SkyAppTestUtility.getDebugElementByTestId(fixture, skyTestId, 'sky-tabset');\n }\n\n /**\n * Retrieves information about the tab at the specified index.\n * @param tabIndex The index of the tab.\n */\n public getTab(tabIndex: number): SkyTabsetFixtureTab {\n const tabLinkEl = this.getTabLinkEl(tabIndex);\n\n const active = this.activeTabIndex === tabIndex;\n const disabled = tabLinkEl.classList.contains('sky-btn-tab-disabled');\n const tabHeading = this.getTextContent(\n tabLinkEl.querySelector('.sky-tab-heading').childNodes[0]\n );\n const tabHeaderCount = this.getTextContent(tabLinkEl.querySelector('.sky-tab-header-count'));\n\n let permalinkValue: string;\n\n if (tabLinkEl.href) {\n const permalink = tabLinkEl.href.split('?')[1];\n if (permalink) {\n const permalinkParts = permalink.split('=');\n\n permalinkValue = decodeURIComponent(permalinkParts[1]);\n }\n }\n\n return {\n active,\n disabled,\n permalinkValue,\n tabHeaderCount,\n tabHeading\n };\n }\n\n /**\n * Clicks the tabset's \"new\" button.\n */\n public async clickNewButton(): Promise<any> {\n return this.clickButton('sky-tabset-btn-new');\n }\n\n /**\n * Clicks the tabset's \"open\" button.\n */\n public async clickOpenButton(): Promise<any> {\n return this.clickButton('sky-tabset-btn-open');\n }\n\n /**\n * Clicks the tab button at the specified index.\n * @param tabIndex The index of the tab.\n */\n public async clickTab(tabIndex: number): Promise<any> {\n const tabLinkEl = this.getTabLinkEl(tabIndex);\n\n if (!tabLinkEl) {\n throw new Error(`There is no tab at index ${tabIndex}.`);\n }\n\n tabLinkEl.click();\n\n this.fixture.detectChanges();\n return this.fixture.whenStable();\n }\n\n /**\n * Click's the tab's close button at the specified index.\n * @param tabIndex The index of the tab.\n */\n public async clickTabClose(tabIndex: number): Promise<any> {\n const tabWrapperEl = this.getTabsetEl().querySelectorAll(\n `.sky-tabset-tabs .sky-btn-tab-wrapper`\n )[tabIndex];\n\n if (!tabWrapperEl) {\n throw new Error(`There is no tab at index ${tabIndex}.`);\n }\n\n const closeBtnEl = tabWrapperEl.querySelector('.sky-btn-tab-close') as HTMLButtonElement;\n\n if (!closeBtnEl) {\n throw new Error('The specified tab does not have a close button.');\n }\n\n closeBtnEl.click();\n\n this.fixture.detectChanges();\n return this.fixture.whenStable();\n }\n\n private async clickButton(buttonCls: string): Promise<any> {\n const tabsetEl = this.getTabsetEl();\n\n const newButtonEl =\n tabsetEl.querySelector(`.sky-tabset-btns .${buttonCls}`) as HTMLButtonElement;\n\n newButtonEl.click();\n\n this.fixture.detectChanges();\n return this.fixture.whenStable();\n }\n\n private getTabsetEl(): HTMLDivElement {\n const tabsetEl = this.debugEl.query(By.css('.sky-tabset')).nativeElement;\n\n return tabsetEl;\n }\n\n private getTabLinkEls(): NodeListOf<HTMLAnchorElement> {\n return this.getTabsetEl().querySelectorAll(\n `.sky-tabset-tabs .sky-btn-tab`\n );\n }\n\n private getTabLinkEl(tabIndex: number): HTMLAnchorElement {\n const tabLinkEl = this.getTabLinkEls().item(tabIndex);\n\n if (!tabLinkEl) {\n throw new Error(`There is no tab at index ${tabIndex}.`);\n }\n\n return tabLinkEl;\n }\n\n private getTextContent(el: Element | Node): string {\n return (el && el.textContent.trim()) || undefined;\n }\n\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":"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"}
@@ -1,2183 +0,0 @@
1
- import { __decorate } from 'tslib';
2
- import { Injectable, EventEmitter, ChangeDetectorRef, Input, Output, ViewChild, Component, ChangeDetectionStrategy, RendererFactory2, HostListener, NgModule, ContentChildren, ViewEncapsulation, ElementRef } from '@angular/core';
3
- import { CommonModule, Location } from '@angular/common';
4
- import { trigger, transition, style, animate } from '@angular/animations';
5
- import { BehaviorSubject, Subject, forkJoin, combineLatest, race } from 'rxjs';
6
- import { takeUntil, take, distinctUntilChanged } from 'rxjs/operators';
7
- import { SkyMediaBreakpoints, SkyMediaQueryService, SkyMediaQueryModule } from '@skyux/core';
8
- import { SkyThemeModule } from '@skyux/theme';
9
- import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
10
- import { SkyChevronModule, SkyIconModule, SkyStatusIndicatorModule } from '@skyux/indicators';
11
- import { getStringForLocale, SKY_LIB_RESOURCES_PROVIDERS, SkyLibResourcesService, SkyI18nModule } from '@skyux/i18n';
12
- import { SkyCheckboxModule } from '@skyux/forms';
13
- import { ActivatedRoute, Router, RouterModule } from '@angular/router';
14
- import { SkyDropdownModule } from '@skyux/popovers';
15
-
16
- var VISIBLE_STATE = 'shown';
17
- var HIDDEN_STATE = 'void';
18
- /**
19
- * @internal
20
- */
21
- var SkyVerticalTabsetService = /** @class */ (function () {
22
- function SkyVerticalTabsetService(mediaQueryService) {
23
- var _this = this;
24
- this.mediaQueryService = mediaQueryService;
25
- this.activeIndex = undefined;
26
- this.hidingTabs = new BehaviorSubject(false);
27
- this.indexChanged = new BehaviorSubject(undefined);
28
- this.maintainTabContent = false;
29
- this.showingTabs = new BehaviorSubject(false);
30
- this.switchingMobile = new Subject();
31
- this.tabs = [];
32
- this.tabAdded = new Subject();
33
- this.tabClicked = new BehaviorSubject(undefined);
34
- this._contentAdded = false;
35
- this._tabsVisible = false;
36
- this._isMobile = false;
37
- this.mediaQueryService.subscribe(function (breakpoint) {
38
- var nowMobile = breakpoint === SkyMediaBreakpoints.xs;
39
- if (nowMobile && !_this._isMobile) {
40
- // switching to mobile
41
- _this.switchingMobile.next(true);
42
- if (!_this._tabsVisible) {
43
- _this.hidingTabs.next(true);
44
- }
45
- }
46
- else if (!nowMobile && _this._isMobile) {
47
- // switching to widescreen
48
- _this.switchingMobile.next(false);
49
- if (!_this._tabsVisible) {
50
- _this.showingTabs.next(true);
51
- }
52
- }
53
- _this._isMobile = nowMobile;
54
- });
55
- }
56
- Object.defineProperty(SkyVerticalTabsetService.prototype, "content", {
57
- set: function (value) {
58
- this._content = value;
59
- },
60
- enumerable: true,
61
- configurable: true
62
- });
63
- SkyVerticalTabsetService.prototype.addTab = function (tab) {
64
- var index = this.tabs.length;
65
- tab.index = index;
66
- this.tabs.push(tab);
67
- if (tab.active) {
68
- this.activateTab(tab);
69
- }
70
- this.tabAdded.next(tab);
71
- };
72
- SkyVerticalTabsetService.prototype.destroyTab = function (tab) {
73
- var tabIndex = this.tabs.indexOf(tab);
74
- if (tabIndex === -1) {
75
- return;
76
- }
77
- if (this.maintainTabContent && tab.contentRendered && this._content) {
78
- if (this._content.nativeElement.contains(tab.tabContent.nativeElement)) {
79
- this._content.nativeElement.removeChild(tab.tabContent.nativeElement);
80
- }
81
- }
82
- this.tabs.splice(tabIndex, 1);
83
- // update tab indices
84
- this.tabs.forEach(function (tabItem, index) { return tabItem.index = index; });
85
- if (tab.active) {
86
- if (!this.maintainTabContent) {
87
- this.destroyContent();
88
- }
89
- // Try selecting the next tab first, and if there's no next tab then
90
- // try selecting the previous one.
91
- var newActiveTab = this.tabs[tabIndex] || this.tabs[tabIndex - 1];
92
- /*istanbul ignore else */
93
- if (newActiveTab) {
94
- newActiveTab.activateTab();
95
- }
96
- }
97
- };
98
- SkyVerticalTabsetService.prototype.activateTab = function (tab) {
99
- var _this = this;
100
- // unactivate active tab
101
- var activeTab = this.tabs.find(function (t) { return t.index === _this.activeIndex; });
102
- if (activeTab && activeTab.index !== tab.index) {
103
- activeTab.active = false;
104
- activeTab.tabDeactivated();
105
- }
106
- this.activeIndex = tab.index;
107
- this.tabClicked.next(true);
108
- this.updateTabClicked();
109
- };
110
- SkyVerticalTabsetService.prototype.activeTab = function () {
111
- var _this = this;
112
- return this.tabs.find(function (t) { return t.index === _this.activeIndex; });
113
- };
114
- SkyVerticalTabsetService.prototype.isMobile = function () {
115
- return this._isMobile;
116
- };
117
- SkyVerticalTabsetService.prototype.updateContent = function () {
118
- var _this = this;
119
- if (!this.maintainTabContent) {
120
- if (!this._contentAdded && this.contentVisible()) {
121
- // content needs to be moved
122
- this.moveContent();
123
- }
124
- else if (this._contentAdded && !this.contentVisible()) {
125
- // content hidden
126
- this._contentAdded = false;
127
- }
128
- }
129
- else {
130
- this.tabs.forEach(function (tab) {
131
- if (!tab.contentRendered) {
132
- _this._content.nativeElement.appendChild(tab.tabContent.nativeElement);
133
- tab.contentRendered = true;
134
- }
135
- });
136
- }
137
- };
138
- SkyVerticalTabsetService.prototype.tabsVisible = function () {
139
- return !this.isMobile() || this._tabsVisible;
140
- };
141
- SkyVerticalTabsetService.prototype.contentVisible = function () {
142
- return !this.isMobile() || !this._tabsVisible;
143
- };
144
- SkyVerticalTabsetService.prototype.showTabs = function () {
145
- this._tabsVisible = true;
146
- this._contentAdded = false;
147
- this.animationTabsVisibleState = VISIBLE_STATE;
148
- this.animationContentVisibleState = HIDDEN_STATE;
149
- this.showingTabs.next(true);
150
- };
151
- SkyVerticalTabsetService.prototype.destroyContent = function () {
152
- if (this._content) {
153
- this._content.nativeElement.innerHTML = '';
154
- }
155
- this.content = undefined;
156
- };
157
- SkyVerticalTabsetService.prototype.moveContent = function () {
158
- if (this._content && !this._contentAdded) {
159
- var activeTab = this.activeTab();
160
- var activeContent = activeTab ? activeTab.tabContent : undefined;
161
- if (activeContent && activeContent.nativeElement) {
162
- this._content.nativeElement.appendChild(activeContent.nativeElement);
163
- activeTab.contentRendered = true;
164
- this._contentAdded = true;
165
- }
166
- }
167
- };
168
- SkyVerticalTabsetService.prototype.updateTabClicked = function () {
169
- this._contentAdded = false;
170
- if (this.isMobile()) {
171
- this._tabsVisible = false;
172
- this.animationContentVisibleState = VISIBLE_STATE;
173
- this.animationTabsVisibleState = HIDDEN_STATE;
174
- this.hidingTabs.next(true);
175
- }
176
- this.indexChanged.next(this.activeIndex);
177
- };
178
- SkyVerticalTabsetService.ctorParameters = function () { return [
179
- { type: SkyMediaQueryService }
180
- ]; };
181
- SkyVerticalTabsetService = __decorate([
182
- Injectable()
183
- ], SkyVerticalTabsetService);
184
- return SkyVerticalTabsetService;
185
- }());
186
-
187
- /**
188
- * Creates a container for the sectioned forms.
189
- */
190
- var SkySectionedFormComponent = /** @class */ (function () {
191
- function SkySectionedFormComponent(tabService, changeRef) {
192
- this.tabService = tabService;
193
- this.changeRef = changeRef;
194
- /**
195
- * Indicates whether the sectioned form loads section content during initialization so that it
196
- * displays content without moving around elements in the content container.
197
- * @default false
198
- */
199
- this.maintainSectionContent = false;
200
- /**
201
- * Fires when the active tab changes and emits the index of the active
202
- * section. The index is based on the section's position when the form loads.
203
- */
204
- this.indexChanged = new EventEmitter();
205
- this.isMobile = false;
206
- this._ngUnsubscribe = new Subject();
207
- }
208
- Object.defineProperty(SkySectionedFormComponent.prototype, "ariaRole", {
209
- get: function () {
210
- return this.isMobile ? undefined : 'tablist';
211
- },
212
- enumerable: true,
213
- configurable: true
214
- });
215
- SkySectionedFormComponent.prototype.ngOnInit = function () {
216
- var _this = this;
217
- this.tabService.maintainTabContent = this.maintainSectionContent;
218
- this.tabService.indexChanged
219
- .pipe(takeUntil(this._ngUnsubscribe))
220
- .subscribe(function (index) {
221
- _this.indexChanged.emit(index);
222
- _this.changeRef.markForCheck();
223
- });
224
- this.tabService.switchingMobile
225
- .pipe(takeUntil(this._ngUnsubscribe))
226
- .subscribe(function (mobile) {
227
- _this.isMobile = mobile;
228
- _this.changeRef.markForCheck();
229
- });
230
- if (this.tabService.isMobile()) {
231
- this.isMobile = true;
232
- this.tabService.animationContentVisibleState = VISIBLE_STATE;
233
- this.changeRef.markForCheck();
234
- }
235
- };
236
- SkySectionedFormComponent.prototype.ngAfterViewChecked = function () {
237
- this.tabService.content = this.content;
238
- this.tabService.updateContent();
239
- };
240
- SkySectionedFormComponent.prototype.ngOnDestroy = function () {
241
- this._ngUnsubscribe.next();
242
- this._ngUnsubscribe.complete();
243
- };
244
- SkySectionedFormComponent.prototype.tabsVisible = function () {
245
- this.changeRef.markForCheck();
246
- return this.tabService.tabsVisible();
247
- };
248
- SkySectionedFormComponent.prototype.showTabs = function () {
249
- this.tabService.showTabs();
250
- this.changeRef.markForCheck();
251
- };
252
- SkySectionedFormComponent.ctorParameters = function () { return [
253
- { type: SkyVerticalTabsetService },
254
- { type: ChangeDetectorRef }
255
- ]; };
256
- __decorate([
257
- Input()
258
- ], SkySectionedFormComponent.prototype, "maintainSectionContent", void 0);
259
- __decorate([
260
- Output()
261
- ], SkySectionedFormComponent.prototype, "indexChanged", void 0);
262
- __decorate([
263
- ViewChild('skySectionSideContent')
264
- ], SkySectionedFormComponent.prototype, "content", void 0);
265
- SkySectionedFormComponent = __decorate([
266
- Component({
267
- selector: 'sky-sectioned-form',
268
- template: "<div\n aria-orientation=\"vertical\"\n class=\"sky-sectioned-form\"\n [attr.role]=\"ariaRole\"\n (window:resize)=\"tabService.updateContent()\"\n>\n <div\n *ngIf=\"maintainSectionContent || tabsVisible()\"\n class=\"sky-sectioned-form-tabs\"\n [ngClass]=\"{'sky-sectioned-form-tabs-hidden': !tabsVisible()}\"\n [@tabEnter]=\"tabService.animationTabsVisibleState\"\n >\n <ng-content></ng-content>\n </div>\n <div\n *ngIf=\"maintainSectionContent || tabService.contentVisible()\"\n class=\"sky-sectioned-form-content\"\n [ngClass]=\"{'sky-sectioned-form-content-hidden': !tabService.contentVisible()}\"\n [@contentEnter]=\"tabService.animationContentVisibleState\"\n #skySectionSideContent\n >\n </div>\n</div>\n\n",
269
- providers: [SkyVerticalTabsetService],
270
- changeDetection: ChangeDetectionStrategy.OnPush,
271
- animations: [
272
- trigger('tabEnter', [
273
- transition(HIDDEN_STATE + " => " + VISIBLE_STATE, [
274
- style({ transform: 'translate(-100%)' }),
275
- animate('150ms ease-in')
276
- ])
277
- ]),
278
- trigger('contentEnter', [
279
- transition(HIDDEN_STATE + " => " + VISIBLE_STATE, [
280
- style({ transform: 'translate(100%)' }),
281
- animate('150ms ease-in')
282
- ])
283
- ])
284
- ],
285
- 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-lg) .sky-sectioned-form,:host-context(.sky-responsive-container-md) .sky-sectioned-form,:host-context(.sky-responsive-container-sm) .sky-sectioned-form,:host-context(.sky-responsive-container-xs) .sky-sectioned-form{display:block;max-height:none}:host-context(.sky-responsive-container-lg) .sky-sectioned-form-content,:host-context(.sky-responsive-container-md) .sky-sectioned-form-content,:host-context(.sky-responsive-container-sm) .sky-sectioned-form-content,:host-context(.sky-responsive-container-xs) .sky-sectioned-form-content{flex-basis:auto;overflow-y:visible}:host-context(.sky-responsive-container-lg) .sky-sectioned-form-tabs,:host-context(.sky-responsive-container-md) .sky-sectioned-form-tabs,:host-context(.sky-responsive-container-sm) .sky-sectioned-form-tabs,:host-context(.sky-responsive-container-xs) .sky-sectioned-form-tabs{flex-basis:auto;overflow-y:visible;border-right:1px solid #e2e3e4}@media (min-width:768px){:host .sky-sectioned-form{display:flex;max-height:100%}:host .sky-sectioned-form-content{flex-basis:70%;margin:15px;overflow-y:auto}:host .sky-sectioned-form-tabs{flex-basis:30%;overflow-y:auto}}:host-context(.sky-responsive-container-lg) .sky-sectioned-form,:host-context(.sky-responsive-container-md) .sky-sectioned-form,:host-context(.sky-responsive-container-sm) .sky-sectioned-form{display:flex;max-height:100%}:host-context(.sky-responsive-container-lg) .sky-sectioned-form-content,:host-context(.sky-responsive-container-md) .sky-sectioned-form-content,:host-context(.sky-responsive-container-sm) .sky-sectioned-form-content{flex-basis:70%;margin:15px;overflow-y:auto}:host-context(.sky-responsive-container-lg) .sky-sectioned-form-tabs,:host-context(.sky-responsive-container-md) .sky-sectioned-form-tabs,:host-context(.sky-responsive-container-sm) .sky-sectioned-form-tabs{flex-basis:30%;overflow-y:auto}.sky-sectioned-form-content-hidden,.sky-sectioned-form-tabs-hidden{display:none}.sky-theme-modern .sky-sectioned-form-content,:host-context(.sky-theme-modern) .sky-sectioned-form-content{margin:15px}.sky-theme-modern .sky-sectioned-form-tabs,:host-context(.sky-theme-modern) .sky-sectioned-form-tabs{border-right:1px solid #d2d2d2}@media (min-width:768px){.sky-theme-modern :host .sky-sectioned-form-content,:host-context(.sky-theme-modern) :host .sky-sectioned-form-content{margin:20px 30px}}.sky-theme-modern :host-context(.sky-responsive-container-lg) .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-sm) .sky-sectioned-form-content,:host-context(.sky-theme-modern) :host-context(.sky-responsive-container-lg) .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-sm) .sky-sectioned-form-content{margin:20px 30px}"]
286
- })
287
- ], SkySectionedFormComponent);
288
- return SkySectionedFormComponent;
289
- }());
290
-
291
- /**
292
- * @internal
293
- */
294
- var SkyVerticalTabMediaQueryService = /** @class */ (function () {
295
- function SkyVerticalTabMediaQueryService() {
296
- this.currentSubject = new BehaviorSubject(this.current);
297
- this._current = SkyMediaBreakpoints.xs;
298
- this.currentSubject.next(this._current);
299
- }
300
- Object.defineProperty(SkyVerticalTabMediaQueryService.prototype, "current", {
301
- get: function () {
302
- return this._current;
303
- },
304
- enumerable: true,
305
- configurable: true
306
- });
307
- SkyVerticalTabMediaQueryService.prototype.subscribe = function (listener) {
308
- return this.currentSubject.subscribe({
309
- next: function (breakpoints) {
310
- listener(breakpoints);
311
- }
312
- });
313
- };
314
- SkyVerticalTabMediaQueryService.prototype.setBreakpointForWidth = function (width) {
315
- var breakpoint;
316
- if (this.isWidthWithinBreakpiont(width, SkyMediaBreakpoints.xs)) {
317
- breakpoint = SkyMediaBreakpoints.xs;
318
- }
319
- else if (this.isWidthWithinBreakpiont(width, SkyMediaBreakpoints.sm)) {
320
- breakpoint = SkyMediaBreakpoints.sm;
321
- }
322
- else if (this.isWidthWithinBreakpiont(width, SkyMediaBreakpoints.md)) {
323
- breakpoint = SkyMediaBreakpoints.md;
324
- }
325
- else {
326
- breakpoint = SkyMediaBreakpoints.lg;
327
- }
328
- this._current = breakpoint;
329
- this.currentSubject.next(this._current);
330
- };
331
- SkyVerticalTabMediaQueryService.prototype.isWidthWithinBreakpiont = function (width, breakpoint) {
332
- var xsBreakpointMaxPixels = 767;
333
- var smBreakpointMinPixels = 768;
334
- var smBreakpointMaxPixels = 991;
335
- var mdBreakpointMinPixels = 992;
336
- var mdBreakpointMaxPixels = 1199;
337
- var lgBreakpointMinPixels = 1200;
338
- switch (breakpoint) {
339
- case SkyMediaBreakpoints.xs: {
340
- return (width <= xsBreakpointMaxPixels);
341
- }
342
- case SkyMediaBreakpoints.sm: {
343
- return (width >= smBreakpointMinPixels && width <= smBreakpointMaxPixels);
344
- }
345
- case SkyMediaBreakpoints.md: {
346
- return (width >= mdBreakpointMinPixels && width <= mdBreakpointMaxPixels);
347
- }
348
- default: {
349
- return (width >= lgBreakpointMinPixels);
350
- }
351
- }
352
- };
353
- SkyVerticalTabMediaQueryService.prototype.destroy = function () {
354
- this.currentSubject.complete();
355
- };
356
- SkyVerticalTabMediaQueryService = __decorate([
357
- Injectable()
358
- ], SkyVerticalTabMediaQueryService);
359
- return SkyVerticalTabMediaQueryService;
360
- }());
361
-
362
- var SkyVerticalTabsetAdapterService = /** @class */ (function () {
363
- function SkyVerticalTabsetAdapterService(rendererFactory) {
364
- this.rendererFactory = rendererFactory;
365
- this.renderer = this.rendererFactory.createRenderer(undefined, undefined);
366
- }
367
- SkyVerticalTabsetAdapterService.prototype.getWidth = function (elementRef) {
368
- return elementRef.nativeElement.clientWidth;
369
- };
370
- SkyVerticalTabsetAdapterService.prototype.scrollToContentTop = function (element) {
371
- element.nativeElement.scrollTop = 0;
372
- };
373
- SkyVerticalTabsetAdapterService.prototype.setResponsiveClass = function (element, breakpoint) {
374
- var nativeEl = element.nativeElement;
375
- this.renderer.removeClass(nativeEl, 'sky-responsive-container-xs');
376
- this.renderer.removeClass(nativeEl, 'sky-responsive-container-sm');
377
- this.renderer.removeClass(nativeEl, 'sky-responsive-container-md');
378
- this.renderer.removeClass(nativeEl, 'sky-responsive-container-lg');
379
- var newClass;
380
- switch (breakpoint) {
381
- case SkyMediaBreakpoints.xs: {
382
- newClass = 'sky-responsive-container-xs';
383
- break;
384
- }
385
- case SkyMediaBreakpoints.sm: {
386
- newClass = 'sky-responsive-container-sm';
387
- break;
388
- }
389
- case SkyMediaBreakpoints.md: {
390
- newClass = 'sky-responsive-container-md';
391
- break;
392
- }
393
- default: {
394
- newClass = 'sky-responsive-container-lg';
395
- break;
396
- }
397
- }
398
- this.renderer.addClass(nativeEl, newClass);
399
- };
400
- SkyVerticalTabsetAdapterService.ctorParameters = function () { return [
401
- { type: RendererFactory2 }
402
- ]; };
403
- SkyVerticalTabsetAdapterService = __decorate([
404
- Injectable()
405
- ], SkyVerticalTabsetAdapterService);
406
- return SkyVerticalTabsetAdapterService;
407
- }());
408
-
409
- var SkyVerticalTabComponent = /** @class */ (function () {
410
- function SkyVerticalTabComponent(adapterService, changeRef, tabsetService, verticalTabMediaQueryService) {
411
- this.adapterService = adapterService;
412
- this.changeRef = changeRef;
413
- this.tabsetService = tabsetService;
414
- this.verticalTabMediaQueryService = verticalTabMediaQueryService;
415
- /**
416
- * Indicates whether the tab is active when the tabset loads.
417
- */
418
- this.active = false;
419
- /**
420
- * Indicates whether to disable the tab.
421
- */
422
- this.disabled = false;
423
- /**
424
- * Indicates whether to indicate that the tab has an error.
425
- * @internal This is used for sectioned forms and is not currently a supported design for pure vertical tabs.
426
- */
427
- this.errorIndicator = false;
428
- this.isMobile = false;
429
- this._contentRendered = false;
430
- this._mobileSubscription = new Subject();
431
- this._ngUnsubscribe = new Subject();
432
- this._showTabRightArrow = false;
433
- }
434
- Object.defineProperty(SkyVerticalTabComponent.prototype, "ariaControls", {
435
- /**
436
- * Specifies the HTML element ID (without the leading `#`) of the element that contains
437
- * the content that the vertical tab displays, which corresponds to the `tabId`. This property
438
- * [supports accessibility rules for disclosures](https://www.w3.org/TR/wai-aria-practices-1.1/#disclosure).
439
- */
440
- get: function () {
441
- return this.isMobile ? undefined : this._ariaControls;
442
- },
443
- set: function (value) {
444
- this._ariaControls = value;
445
- },
446
- enumerable: true,
447
- configurable: true
448
- });
449
- Object.defineProperty(SkyVerticalTabComponent.prototype, "ariaRole", {
450
- /**
451
- * Specifies an ARIA role for the vertical tab
452
- * [to support accessibility](https://developer.blackbaud.com/skyux/learn/accessibility)
453
- * by indicating how the tab functions and what it controls. For information about how
454
- * an ARIA role indicates what an item represents on a web page, see the
455
- * [WAI-ARIA roles model](https://www.w3.org/WAI/PF/aria/roles).
456
- * @default "tab"
457
- */
458
- get: function () {
459
- if (this.isMobile) {
460
- return undefined;
461
- }
462
- return this._ariaRole || 'tab';
463
- },
464
- set: function (value) {
465
- this._ariaRole = value;
466
- },
467
- enumerable: true,
468
- configurable: true
469
- });
470
- Object.defineProperty(SkyVerticalTabComponent.prototype, "showTabRightArrow", {
471
- /**
472
- * Indicates whether to display a chevron-right icon in the righthand side of the tab.
473
- * @internal
474
- */
475
- get: function () {
476
- return this._showTabRightArrow && this.tabsetService.isMobile();
477
- },
478
- set: function (value) {
479
- this._showTabRightArrow = value;
480
- },
481
- enumerable: true,
482
- configurable: true
483
- });
484
- Object.defineProperty(SkyVerticalTabComponent.prototype, "contentRendered", {
485
- get: function () {
486
- return this._contentRendered;
487
- },
488
- set: function (value) {
489
- var _this = this;
490
- this._contentRendered = value;
491
- if (this._contentRendered) {
492
- // NOTE: Wrapped in a setTimeout here to ensure that everything has completed rendering.
493
- setTimeout(function () {
494
- _this.updateBreakpointAndResponsiveClass(_this.adapterService.getWidth(_this.tabContent));
495
- });
496
- }
497
- },
498
- enumerable: true,
499
- configurable: true
500
- });
501
- SkyVerticalTabComponent.prototype.ngOnInit = function () {
502
- var _this = this;
503
- this.isMobile = this.tabsetService.isMobile();
504
- this.changeRef.markForCheck();
505
- this.tabsetService.switchingMobile
506
- .subscribe(function (mobile) {
507
- _this.isMobile = mobile;
508
- _this.changeRef.markForCheck();
509
- });
510
- // Update the breakpoint and responsive class here just as a sanity check since we can not
511
- // watch for element resizing.
512
- this.tabsetService.indexChanged
513
- .pipe(takeUntil(this._ngUnsubscribe))
514
- .subscribe(function (index) {
515
- if (_this.index === index && _this.contentRendered) {
516
- _this.updateBreakpointAndResponsiveClass(_this.adapterService.getWidth(_this.tabContent));
517
- }
518
- });
519
- this.tabsetService.addTab(this);
520
- };
521
- SkyVerticalTabComponent.prototype.ngOnDestroy = function () {
522
- this._mobileSubscription.unsubscribe();
523
- this._ngUnsubscribe.next();
524
- this._ngUnsubscribe.complete();
525
- this.tabsetService.destroyTab(this);
526
- };
527
- SkyVerticalTabComponent.prototype.tabIndex = function () {
528
- if (!this.disabled) {
529
- return 0;
530
- }
531
- else {
532
- return -1;
533
- }
534
- };
535
- SkyVerticalTabComponent.prototype.activateTab = function () {
536
- if (!this.disabled) {
537
- this.active = true;
538
- this.tabsetService.activateTab(this);
539
- this.changeRef.markForCheck();
540
- }
541
- };
542
- SkyVerticalTabComponent.prototype.onWindowResize = function () {
543
- this.updateBreakpointAndResponsiveClass(this.adapterService.getWidth(this.tabContent));
544
- };
545
- SkyVerticalTabComponent.prototype.tabDeactivated = function () {
546
- this.changeRef.markForCheck();
547
- };
548
- SkyVerticalTabComponent.prototype.updateBreakpointAndResponsiveClass = function (width) {
549
- this.verticalTabMediaQueryService.setBreakpointForWidth(width);
550
- var newBreakpiont = this.verticalTabMediaQueryService.current;
551
- this.adapterService.setResponsiveClass(this.tabContent, newBreakpiont);
552
- this.changeRef.markForCheck();
553
- };
554
- SkyVerticalTabComponent.ctorParameters = function () { return [
555
- { type: SkyVerticalTabsetAdapterService },
556
- { type: ChangeDetectorRef },
557
- { type: SkyVerticalTabsetService },
558
- { type: SkyVerticalTabMediaQueryService }
559
- ]; };
560
- __decorate([
561
- Input()
562
- ], SkyVerticalTabComponent.prototype, "active", void 0);
563
- __decorate([
564
- Input()
565
- ], SkyVerticalTabComponent.prototype, "ariaControls", null);
566
- __decorate([
567
- Input()
568
- ], SkyVerticalTabComponent.prototype, "ariaInvalid", void 0);
569
- __decorate([
570
- Input()
571
- ], SkyVerticalTabComponent.prototype, "ariaRequired", void 0);
572
- __decorate([
573
- Input()
574
- ], SkyVerticalTabComponent.prototype, "ariaRole", null);
575
- __decorate([
576
- Input()
577
- ], SkyVerticalTabComponent.prototype, "disabled", void 0);
578
- __decorate([
579
- Input()
580
- ], SkyVerticalTabComponent.prototype, "errorIndicator", void 0);
581
- __decorate([
582
- Input()
583
- ], SkyVerticalTabComponent.prototype, "tabHeaderCount", void 0);
584
- __decorate([
585
- Input()
586
- ], SkyVerticalTabComponent.prototype, "tabHeading", void 0);
587
- __decorate([
588
- Input()
589
- ], SkyVerticalTabComponent.prototype, "showTabRightArrow", null);
590
- __decorate([
591
- Input()
592
- ], SkyVerticalTabComponent.prototype, "tabId", void 0);
593
- __decorate([
594
- ViewChild('tabContentWrapper')
595
- ], SkyVerticalTabComponent.prototype, "tabContent", void 0);
596
- __decorate([
597
- HostListener('window:resize')
598
- ], SkyVerticalTabComponent.prototype, "onWindowResize", null);
599
- SkyVerticalTabComponent = __decorate([
600
- Component({
601
- selector: 'sky-vertical-tab',
602
- template: "<a\n class=\"sky-vertical-tab\"\n [attr.aria-controls]=\"ariaControls\"\n [attr.aria-invalid]=\"ariaInvalid\"\n [attr.aria-required]=\"ariaRequired ? ariaRequired : null\"\n [attr.aria-selected]=\"active\"\n [attr.id]=\"tabId\"\n [attr.role]=\"ariaRole\"\n [ngClass]=\"{\n 'sky-vertical-tab-active': active,\n 'sky-vertical-tab-disabled': disabled,\n 'sky-font-deemphasized': disabled,\n 'sky-deemphasized': disabled\n }\"\n [tabIndex]=\"tabIndex()\"\n (click)=\"activateTab()\"\n (keyup.enter)=\"activateTab()\">\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 ({{ tabHeaderCount }})\n </span>\n </div>\n <sky-status-indicator *ngIf=\"errorIndicator\"\n class=\"sky-vertical-tab-heading-error\"\n descriptionType=\"error\"\n indicatorType=\"danger\"\n ></sky-status-indicator>\n <sky-icon\n *ngIf=\"showTabRightArrow\"\n class=\"sky-vertical-tab-right-arrow\"\n icon=\"chevron-right\"\n >\n </sky-icon>\n </div>\n</a>\n\n<div\n #tabContentWrapper\n>\n <div\n class=\"sky-vertical-tab-content-pane\"\n [ngClass]=\"{'sky-vertical-tab-hidden': !active}\"\n >\n\n <ng-content></ng-content>\n\n <div>\n\n</div>\n\n",
603
- providers: [
604
- SkyVerticalTabMediaQueryService,
605
- { provide: SkyMediaQueryService, useExisting: SkyVerticalTabMediaQueryService }
606
- ],
607
- changeDetection: ChangeDetectionStrategy.OnPush,
608
- 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:dotted thin;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}.sky-theme-modern .sky-vertical-tab,:host-context(.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,: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}.sky-theme-modern .sky-vertical-tab:not(:active):focus-visible,:host-context(.sky-theme-modern) .sky-vertical-tab:not(:active):focus-visible{outline:#1870b8 solid 2px;outline-offset:-2px;box-shadow:0 1px 8px 0 rgba(0,0,0,.3)}.sky-theme-modern .sky-vertical-tab:focus:active:hover,:host-context(.sky-theme-modern) .sky-vertical-tab:focus:active:hover{outline:0;background:0 0}.sky-theme-modern .sky-vertical-tab:active,:host-context(.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,:host-context(.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,:host-context(.sky-theme-modern) .sky-vertical-tab-active{background:0 0;color:#212327;padding-left:7px;border-left:3px solid #1870b8}"]
609
- })
610
- ], SkyVerticalTabComponent);
611
- return SkyVerticalTabComponent;
612
- }());
613
-
614
- var SkySectionedFormService = /** @class */ (function () {
615
- function SkySectionedFormService() {
616
- /**
617
- * @internal
618
- */
619
- this.invalidChange = new BehaviorSubject(undefined);
620
- /**
621
- * @internal
622
- */
623
- this.requiredChange = new BehaviorSubject(undefined);
624
- }
625
- /**
626
- * Sets the current section's invalid state based on the `isInvalid` parameter.
627
- * This method is used within a `sky-sectioned-form-section` element.
628
- */
629
- SkySectionedFormService.prototype.invalidFieldChanged = function (isInvalid) {
630
- this.invalidChange.next(isInvalid);
631
- };
632
- /**
633
- * Sets the current section's required state based on the `isRequired` parameter.
634
- * This method is used within a `sky-sectioned-form-section` element.
635
- */
636
- SkySectionedFormService.prototype.requiredFieldChanged = function (isRequired) {
637
- this.requiredChange.next(isRequired);
638
- };
639
- SkySectionedFormService = __decorate([
640
- Injectable()
641
- ], SkySectionedFormService);
642
- return SkySectionedFormService;
643
- }());
644
-
645
- var nextId = 0;
646
- /**
647
- * Creates an individual form to display as a section within the sectioned form.
648
- */
649
- var SkySectionedFormSectionComponent = /** @class */ (function () {
650
- function SkySectionedFormSectionComponent(sectionedFormService, tabsetService, changeRef) {
651
- this.sectionedFormService = sectionedFormService;
652
- this.tabsetService = tabsetService;
653
- this.changeRef = changeRef;
654
- this.sectionTabId = "sky-sectioned-form-tab-" + ++nextId;
655
- this.sectionContentId = "sky-sectioned-form-section-" + ++nextId;
656
- this.isMobile = false;
657
- this._ngUnsubscribe = new Subject();
658
- }
659
- Object.defineProperty(SkySectionedFormSectionComponent.prototype, "ariaRole", {
660
- get: function () {
661
- return this.isMobile ? undefined : 'tabpanel';
662
- },
663
- enumerable: true,
664
- configurable: true
665
- });
666
- Object.defineProperty(SkySectionedFormSectionComponent.prototype, "ariaLabelledby", {
667
- get: function () {
668
- return this.isMobile ? undefined : this.sectionTabId;
669
- },
670
- enumerable: true,
671
- configurable: true
672
- });
673
- SkySectionedFormSectionComponent.prototype.ngOnInit = function () {
674
- var _this = this;
675
- this.isMobile = this.tabsetService.isMobile();
676
- this.changeRef.detectChanges();
677
- this.tabsetService.switchingMobile
678
- .subscribe(function (mobile) {
679
- _this.isMobile = mobile;
680
- _this.changeRef.detectChanges();
681
- });
682
- this.sectionedFormService.requiredChange
683
- .pipe(takeUntil(this._ngUnsubscribe))
684
- .subscribe(function (required) { return _this.fieldRequired = required; });
685
- this.sectionedFormService.invalidChange
686
- .pipe(takeUntil(this._ngUnsubscribe))
687
- .subscribe(function (invalid) { return _this.fieldInvalid = invalid; });
688
- };
689
- SkySectionedFormSectionComponent.prototype.ngOnDestroy = function () {
690
- this._ngUnsubscribe.next();
691
- this._ngUnsubscribe.complete();
692
- };
693
- SkySectionedFormSectionComponent.ctorParameters = function () { return [
694
- { type: SkySectionedFormService },
695
- { type: SkyVerticalTabsetService },
696
- { type: ChangeDetectorRef }
697
- ]; };
698
- __decorate([
699
- Input()
700
- ], SkySectionedFormSectionComponent.prototype, "heading", void 0);
701
- __decorate([
702
- Input()
703
- ], SkySectionedFormSectionComponent.prototype, "itemCount", void 0);
704
- __decorate([
705
- Input()
706
- ], SkySectionedFormSectionComponent.prototype, "active", void 0);
707
- __decorate([
708
- ViewChild(SkyVerticalTabComponent)
709
- ], SkySectionedFormSectionComponent.prototype, "tab", void 0);
710
- SkySectionedFormSectionComponent = __decorate([
711
- Component({
712
- selector: 'sky-sectioned-form-section',
713
- template: "<sky-vertical-tab\n [active]=\"active\"\n [ariaControls]=\"sectionContentId\"\n [ariaInvalid]=\"fieldInvalid\"\n [ariaRequired]=\"fieldRequired\"\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 <div\n [attr.aria-labelledby]=\"ariaLabelledby\"\n [attr.role]=\"ariaRole\"\n [id]=\"sectionContentId\"\n #tabContent>\n <ng-content></ng-content>\n </div>\n</sky-vertical-tab>\n",
714
- providers: [SkySectionedFormService],
715
- styles: [":host .sky-tab-field-required ::ng-deep .sky-vertical-tab-heading:after{content:\"*\";color:#ef4044;padding-left:5px}"]
716
- })
717
- ], SkySectionedFormSectionComponent);
718
- return SkySectionedFormSectionComponent;
719
- }());
720
-
721
- var SkyTabsResourcesProvider = /** @class */ (function () {
722
- function SkyTabsResourcesProvider() {
723
- this.resources = { "EN-US": { "skyux_tab_add": "Add tab", "skyux_tab_close": "Close {0} tab", "skyux_tabs_navigator_next": "Next", "skyux_tabs_navigator_previous": "Previous", "skyux_tab_open": "Open tab", "skyux_vertical_tabs_show_tabs_text": "Tab list" } };
724
- }
725
- SkyTabsResourcesProvider.prototype.getString = function (localeInfo, name) {
726
- return getStringForLocale(this.resources, localeInfo.locale, name);
727
- };
728
- SkyTabsResourcesProvider = __decorate([
729
- Injectable()
730
- ], SkyTabsResourcesProvider);
731
- return SkyTabsResourcesProvider;
732
- }());
733
-
734
- var SkyTabsResourcesModule = /** @class */ (function () {
735
- function SkyTabsResourcesModule() {
736
- }
737
- SkyTabsResourcesModule = __decorate([
738
- NgModule({
739
- providers: [{
740
- provide: SKY_LIB_RESOURCES_PROVIDERS,
741
- useClass: SkyTabsResourcesProvider,
742
- multi: true
743
- }]
744
- })
745
- ], SkyTabsResourcesModule);
746
- return SkyTabsResourcesModule;
747
- }());
748
-
749
- var SkyVerticalTabsetComponent = /** @class */ (function () {
750
- function SkyVerticalTabsetComponent(adapterService, tabService, resources, changeRef) {
751
- this.adapterService = adapterService;
752
- this.tabService = tabService;
753
- this.resources = resources;
754
- this.changeRef = changeRef;
755
- /**
756
- * Indicates whether the vertical tabset loads tab content during initialization so that it
757
- * displays content without moving around elements in the content container.
758
- * @default 'false'
759
- */
760
- this.maintainTabContent = false;
761
- /**
762
- * Fires when the active tab changes. Emits the index of the active tab. The
763
- * index is based on the tab's position when it loads.
764
- */
765
- this.activeChange = new EventEmitter();
766
- this.isMobile = false;
767
- this._ngUnsubscribe = new Subject();
768
- }
769
- Object.defineProperty(SkyVerticalTabsetComponent.prototype, "ariaRole", {
770
- /**
771
- * Specifies an ARIA role for the vertical tabset
772
- * [to support accessibility](https://developer.blackbaud.com/skyux/learn/accessibility)
773
- * by indicating how the tabset functions and what it controls. For information about how
774
- * an ARIA role indicates what an item represents on a web page, see the
775
- * [WAI-ARIA roles model](https://www.w3.org/WAI/PF/aria/roles).
776
- * @default "tablist"
777
- */
778
- get: function () {
779
- if (this.isMobile) {
780
- return undefined;
781
- }
782
- return this._ariaRole || 'tablist';
783
- },
784
- set: function (value) {
785
- this._ariaRole = value;
786
- },
787
- enumerable: true,
788
- configurable: true
789
- });
790
- SkyVerticalTabsetComponent.prototype.ngOnInit = function () {
791
- var _this = this;
792
- this.tabService.maintainTabContent = this.maintainTabContent;
793
- this.tabService.indexChanged
794
- .pipe(takeUntil(this._ngUnsubscribe))
795
- .subscribe(function (index) {
796
- _this.activeChange.emit(index);
797
- if (_this.contentWrapper) {
798
- _this.adapterService.scrollToContentTop(_this.contentWrapper);
799
- }
800
- _this.changeRef.markForCheck();
801
- });
802
- this.tabService.switchingMobile
803
- .pipe(takeUntil(this._ngUnsubscribe))
804
- .subscribe(function (mobile) {
805
- _this.isMobile = mobile;
806
- _this.changeRef.markForCheck();
807
- });
808
- if (this.tabService.isMobile()) {
809
- this.isMobile = true;
810
- this.tabService.animationContentVisibleState = VISIBLE_STATE;
811
- this.changeRef.markForCheck();
812
- }
813
- if (!this.showTabsText) {
814
- this.resources.getString('skyux_vertical_tabs_show_tabs_text')
815
- .pipe(take(1))
816
- .subscribe(function (resource) {
817
- /* sanity check */
818
- if (!_this.showTabsText) {
819
- _this.showTabsText = resource;
820
- }
821
- });
822
- }
823
- };
824
- SkyVerticalTabsetComponent.prototype.ngAfterViewChecked = function () {
825
- this.tabService.content = this.content;
826
- this.tabService.updateContent();
827
- };
828
- SkyVerticalTabsetComponent.prototype.ngOnDestroy = function () {
829
- this._ngUnsubscribe.next();
830
- this._ngUnsubscribe.complete();
831
- };
832
- SkyVerticalTabsetComponent.ctorParameters = function () { return [
833
- { type: SkyVerticalTabsetAdapterService },
834
- { type: SkyVerticalTabsetService },
835
- { type: SkyLibResourcesService },
836
- { type: ChangeDetectorRef }
837
- ]; };
838
- __decorate([
839
- Input()
840
- ], SkyVerticalTabsetComponent.prototype, "showTabsText", void 0);
841
- __decorate([
842
- Input()
843
- ], SkyVerticalTabsetComponent.prototype, "ariaRole", null);
844
- __decorate([
845
- Input()
846
- ], SkyVerticalTabsetComponent.prototype, "maintainTabContent", void 0);
847
- __decorate([
848
- Output()
849
- ], SkyVerticalTabsetComponent.prototype, "activeChange", void 0);
850
- __decorate([
851
- ViewChild('groupContainerWrapper')
852
- ], SkyVerticalTabsetComponent.prototype, "tabGroups", void 0);
853
- __decorate([
854
- ViewChild('skySideContent')
855
- ], SkyVerticalTabsetComponent.prototype, "content", void 0);
856
- __decorate([
857
- ViewChild('contentContainerWrapper')
858
- ], SkyVerticalTabsetComponent.prototype, "contentWrapper", void 0);
859
- SkyVerticalTabsetComponent = __decorate([
860
- Component({
861
- selector: 'sky-vertical-tabset',
862
- template: " <div class=\"sky-vertical-tabset\" (window:resize)=\"tabService.updateContent()\">\n <div\n *ngIf=\"maintainTabContent || tabService.tabsVisible()\"\n #groupContainerWrapper\n class=\"sky-vertical-tabset-group-container\"\n [ngClass]=\"{'sky-vertical-tabset-hidden': !tabService.tabsVisible()}\"\n [attr.role]=\"ariaRole\"\n [@tabGroupEnter]=\"tabService.animationTabsVisibleState\"\n >\n <ng-content></ng-content>\n </div>\n <div\n *ngIf=\"maintainTabContent || tabService.contentVisible()\"\n class=\"sky-vertical-tabset-content\"\n [ngClass]=\"{'sky-vertical-tabset-content-hidden': !tabService.contentVisible()}\"\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",
863
- providers: [SkyVerticalTabsetService],
864
- changeDetection: ChangeDetectionStrategy.OnPush,
865
- animations: [
866
- trigger('tabGroupEnter', [
867
- transition(HIDDEN_STATE + " => " + VISIBLE_STATE, [
868
- style({ transform: 'translate(-100%)' }),
869
- animate('150ms ease-in')
870
- ])
871
- ]),
872
- trigger('contentEnter', [
873
- transition(HIDDEN_STATE + " => " + VISIBLE_STATE, [
874
- style({ transform: 'translate(100%)' }),
875
- animate('150ms ease-in')
876
- ])
877
- ])
878
- ],
879
- styles: [":host .sky-vertical-tabset{display:block;height:auto}:host .sky-vertical-tabset-group-container{border-right:none}:host-context(.sky-responsive-container-lg) .sky-vertical-tabset,:host-context(.sky-responsive-container-md) .sky-vertical-tabset,:host-context(.sky-responsive-container-sm) .sky-vertical-tabset,:host-context(.sky-responsive-container-xs) .sky-vertical-tabset{display:block;height:auto}:host-context(.sky-responsive-container-lg) .sky-vertical-tabset-group-container,:host-context(.sky-responsive-container-md) .sky-vertical-tabset-group-container,:host-context(.sky-responsive-container-sm) .sky-vertical-tabset-group-container,:host-context(.sky-responsive-container-xs) .sky-vertical-tabset-group-container{border-right:none}:host-context(.sky-responsive-container-lg) .sky-vertical-tabset,:host-context(.sky-responsive-container-md) .sky-vertical-tabset,:host-context(.sky-responsive-container-sm) .sky-vertical-tabset{display:flex;height:100%}:host-context(.sky-responsive-container-lg) .sky-vertical-tabset-group-container,:host-context(.sky-responsive-container-md) .sky-vertical-tabset-group-container,:host-context(.sky-responsive-container-sm) .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}.sky-theme-modern .sky-vertical-tabset-content,:host-context(.sky-theme-modern) .sky-vertical-tabset-content{margin:15px}@media (min-width:768px){:host .sky-vertical-tabset{display:flex;height:100%}:host .sky-vertical-tabset-group-container{border-right:1px solid #cdcfd2}.sky-theme-modern :host .sky-vertical-tabset-content,:host-context(.sky-theme-modern) :host .sky-vertical-tabset-content{margin:20px 30px}.sky-theme-modern :host .sky-vertical-tabset-group-container,:host-context(.sky-theme-modern) :host .sky-vertical-tabset-group-container{border-right:1px solid #d2d2d2}}.sky-theme-modern :host-context(.sky-responsive-container-lg) .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-sm) .sky-vertical-tabset-content,:host-context(.sky-theme-modern) :host-context(.sky-responsive-container-lg) .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-sm) .sky-vertical-tabset-content{margin:20px 30px}.sky-theme-modern :host-context(.sky-responsive-container-lg) .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-sm) .sky-vertical-tabset-group-container,:host-context(.sky-theme-modern) :host-context(.sky-responsive-container-lg) .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-sm) .sky-vertical-tabset-group-container{border-right:1px solid #d2d2d2}"]
880
- })
881
- ], SkyVerticalTabsetComponent);
882
- return SkyVerticalTabsetComponent;
883
- }());
884
-
885
- var SkyVerticalTabsetGroupComponent = /** @class */ (function () {
886
- function SkyVerticalTabsetGroupComponent(tabService, changeRef) {
887
- var _this = this;
888
- this.tabService = tabService;
889
- this.changeRef = changeRef;
890
- this.ngUnsubscribe = new Subject();
891
- this.openBeforeTabsHidden = false;
892
- this._open = false;
893
- this.tabClicked = function () {
894
- _this.changeRef.markForCheck();
895
- };
896
- this.tabsHidden = function () {
897
- // this fixes an animation bug with ngIf when the parent component goes from visible to hidden
898
- _this.openBeforeTabsHidden = _this.open;
899
- _this.open = false;
900
- _this.changeRef.markForCheck();
901
- };
902
- this.tabsShown = function () {
903
- _this.open = _this.openBeforeTabsHidden;
904
- _this.changeRef.markForCheck();
905
- };
906
- }
907
- Object.defineProperty(SkyVerticalTabsetGroupComponent.prototype, "open", {
908
- get: function () {
909
- return !this.disabled && this._open;
910
- },
911
- /**
912
- * Indicates whether the collapsible group is expanded.
913
- * @default "false"
914
- */
915
- set: function (value) {
916
- this._open = value;
917
- },
918
- enumerable: true,
919
- configurable: true
920
- });
921
- SkyVerticalTabsetGroupComponent.prototype.ngOnInit = function () {
922
- this.tabService.hidingTabs
923
- .pipe(takeUntil(this.ngUnsubscribe))
924
- .subscribe(this.tabsHidden);
925
- this.tabService.showingTabs
926
- .pipe(takeUntil(this.ngUnsubscribe))
927
- .subscribe(this.tabsShown);
928
- this.tabService.tabClicked
929
- .pipe(takeUntil(this.ngUnsubscribe))
930
- .subscribe(this.tabClicked);
931
- };
932
- SkyVerticalTabsetGroupComponent.prototype.ngOnDestroy = function () {
933
- this.ngUnsubscribe.next();
934
- this.ngUnsubscribe.complete();
935
- };
936
- SkyVerticalTabsetGroupComponent.prototype.toggleMenuOpen = function () {
937
- if (!this.disabled) {
938
- this.open = !this.open;
939
- }
940
- this.changeRef.markForCheck();
941
- };
942
- SkyVerticalTabsetGroupComponent.prototype.subMenuOpen = function () {
943
- return this.tabs && (this.tabs.find(function (t) { return t.active; }) !== undefined);
944
- };
945
- SkyVerticalTabsetGroupComponent.ctorParameters = function () { return [
946
- { type: SkyVerticalTabsetService },
947
- { type: ChangeDetectorRef }
948
- ]; };
949
- __decorate([
950
- Input()
951
- ], SkyVerticalTabsetGroupComponent.prototype, "disabled", void 0);
952
- __decorate([
953
- Input()
954
- ], SkyVerticalTabsetGroupComponent.prototype, "groupHeading", void 0);
955
- __decorate([
956
- Input()
957
- ], SkyVerticalTabsetGroupComponent.prototype, "open", null);
958
- __decorate([
959
- ContentChildren(SkyVerticalTabComponent)
960
- ], SkyVerticalTabsetGroupComponent.prototype, "tabs", void 0);
961
- SkyVerticalTabsetGroupComponent = __decorate([
962
- Component({
963
- selector: 'sky-vertical-tabset-group',
964
- 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 sky-padding-even-default\"\n [ngClass]=\"{\n 'sky-vertical-tabset-group-header-sub-open sky-font-emphasized sky-emphasized': subMenuOpen(),\n 'sky-font-deemphasized': disabled,\n 'sky-deemphasized': disabled,\n 'sky-vertical-tabset-disabled': disabled\n }\"\n (click)=\"toggleMenuOpen()\"\n (keyup.enter)=\"toggleMenuOpen()\"\n [tabIndex]=\"-1\"\n >\n {{ groupHeading }}\n <sky-chevron *skyThemeIf=\"'default'\"\n class=\"sky-vertical-tabset-group-header-chevron\"\n [direction]=\"open ? 'up' : 'down'\"\n [disabled]=\"disabled\"\n (directionChange)=\"toggleMenuOpen()\"\n (keyup.enter)=\"$event.stopPropagation()\"\n >\n </sky-chevron>\n <ng-container *skyThemeIf=\"'modern'\">\n <button *ngIf=\"!open\"\n class=\"sky-btn sky-btn-icon-borderless sky-vertical-tabset-group-header-chevron\"\n type=\"button\"\n >\n <sky-icon\n icon=\"chevron-up\"\n iconType=\"skyux\"\n >\n </sky-icon>\n </button>\n <button *ngIf=\"open\"\n class=\"sky-btn sky-btn-icon-borderless sky-vertical-tabset-group-header-chevron\"\n type=\"button\"\n >\n <sky-icon\n icon=\"chevron-down\"\n iconType=\"skyux\"\n >\n </sky-icon>\n </button>\n </ng-container>\n </div>\n <div\n class=\"sky-vertical-tabset-group-content\"\n *ngIf=\"open\"\n [@tabSlide]\n >\n <ng-content></ng-content>\n </div>\n</div>\n",
965
- changeDetection: ChangeDetectionStrategy.OnPush,
966
- animations: [
967
- trigger('tabSlide', [
968
- transition(':enter', [
969
- style({
970
- height: '0',
971
- visibility: 'hidden'
972
- }),
973
- animate('150ms ease-in', style({
974
- height: '*',
975
- visibility: 'visible'
976
- }))
977
- ]),
978
- transition(':leave', [
979
- style({
980
- height: '*',
981
- visibility: 'visible'
982
- }),
983
- animate('150ms ease-in', style({
984
- height: '0',
985
- visibility: 'hidden'
986
- }))
987
- ])
988
- ])
989
- ],
990
- styles: [".sky-vertical-tabset-group{border-bottom:1px solid #e2e3e4;margin:5px 0 5px 5px}.sky-vertical-tabset-group-header{cursor:pointer;display:flex;justify-content:space-between}.sky-vertical-tabset-group-header:focus-visible{outline:dotted thin;outline:-webkit-focus-ring-color auto 5px}.sky-vertical-tabset-group-content{overflow:hidden;border-top:1px solid #e2e3e4}:host ::ng-deep .sky-vertical-tabset-group-header-chevron>button{font-size:14px!important}.sky-vertical-tabset-disabled{cursor:not-allowed;pointer-events:none}.sky-theme-modern .sky-vertical-tabset-group,:host-context(.sky-theme-modern) .sky-vertical-tabset-group{border:none;margin:10px 0}.sky-theme-modern .sky-vertical-tabset-group-content,:host-context(.sky-theme-modern) .sky-vertical-tabset-group-content{border:none;padding-left:25px}.sky-theme-modern .sky-vertical-tabset-group-header,:host-context(.sky-theme-modern) .sky-vertical-tabset-group-header{position:relative}.sky-theme-modern .sky-vertical-tabset-group-header-chevron,:host-context(.sky-theme-modern) .sky-vertical-tabset-group-header-chevron{position:absolute;top:6px;right:5px}"]
991
- })
992
- ], SkyVerticalTabsetGroupComponent);
993
- return SkyVerticalTabsetGroupComponent;
994
- }());
995
-
996
- var SkyVerticalTabsetModule = /** @class */ (function () {
997
- function SkyVerticalTabsetModule() {
998
- }
999
- SkyVerticalTabsetModule = __decorate([
1000
- NgModule({
1001
- declarations: [
1002
- SkyVerticalTabsetComponent,
1003
- SkyVerticalTabsetGroupComponent,
1004
- SkyVerticalTabComponent
1005
- ],
1006
- imports: [
1007
- CommonModule,
1008
- BrowserAnimationsModule,
1009
- SkyChevronModule,
1010
- SkyIconModule,
1011
- SkyMediaQueryModule,
1012
- SkyStatusIndicatorModule,
1013
- SkyTabsResourcesModule,
1014
- SkyThemeModule
1015
- ],
1016
- providers: [
1017
- SkyVerticalTabsetAdapterService
1018
- ],
1019
- exports: [
1020
- SkyVerticalTabsetComponent,
1021
- SkyVerticalTabsetGroupComponent,
1022
- SkyVerticalTabComponent
1023
- ]
1024
- })
1025
- ], SkyVerticalTabsetModule);
1026
- return SkyVerticalTabsetModule;
1027
- }());
1028
-
1029
- var SkySectionedFormModule = /** @class */ (function () {
1030
- function SkySectionedFormModule() {
1031
- }
1032
- SkySectionedFormModule = __decorate([
1033
- NgModule({
1034
- declarations: [
1035
- SkySectionedFormComponent,
1036
- SkySectionedFormSectionComponent
1037
- ],
1038
- imports: [
1039
- CommonModule,
1040
- SkyCheckboxModule,
1041
- SkyThemeModule,
1042
- SkyVerticalTabsetModule
1043
- ],
1044
- exports: [
1045
- SkySectionedFormComponent,
1046
- SkySectionedFormSectionComponent
1047
- ]
1048
- })
1049
- ], SkySectionedFormModule);
1050
- return SkySectionedFormModule;
1051
- }());
1052
-
1053
- /**
1054
- * @internal
1055
- */
1056
- var SkyTabButtonComponent = /** @class */ (function () {
1057
- function SkyTabButtonComponent() {
1058
- this.buttonClick = new EventEmitter();
1059
- this.closeClick = new EventEmitter();
1060
- }
1061
- SkyTabButtonComponent.prototype.onButtonClick = function (event) {
1062
- if (!this.disabled) {
1063
- this.buttonClick.emit();
1064
- event.preventDefault();
1065
- }
1066
- };
1067
- SkyTabButtonComponent.prototype.onButtonEnterKeyDown = function (event) {
1068
- this.onButtonClick(event);
1069
- };
1070
- SkyTabButtonComponent.prototype.onCloseClick = function (event) {
1071
- this.closeClick.emit();
1072
- // Prevent the click event from bubbling up to the anchor tag;
1073
- // otherwise it will trigger a page refresh.
1074
- event.stopPropagation();
1075
- event.preventDefault();
1076
- };
1077
- __decorate([
1078
- Input()
1079
- ], SkyTabButtonComponent.prototype, "active", void 0);
1080
- __decorate([
1081
- Input()
1082
- ], SkyTabButtonComponent.prototype, "ariaControls", void 0);
1083
- __decorate([
1084
- Input()
1085
- ], SkyTabButtonComponent.prototype, "buttonHref", void 0);
1086
- __decorate([
1087
- Input()
1088
- ], SkyTabButtonComponent.prototype, "buttonId", void 0);
1089
- __decorate([
1090
- Input()
1091
- ], SkyTabButtonComponent.prototype, "buttonText", void 0);
1092
- __decorate([
1093
- Input()
1094
- ], SkyTabButtonComponent.prototype, "buttonTextCount", void 0);
1095
- __decorate([
1096
- Input()
1097
- ], SkyTabButtonComponent.prototype, "closeable", void 0);
1098
- __decorate([
1099
- Input()
1100
- ], SkyTabButtonComponent.prototype, "disabled", void 0);
1101
- __decorate([
1102
- Input()
1103
- ], SkyTabButtonComponent.prototype, "tabStyle", void 0);
1104
- __decorate([
1105
- Output()
1106
- ], SkyTabButtonComponent.prototype, "buttonClick", void 0);
1107
- __decorate([
1108
- Output()
1109
- ], SkyTabButtonComponent.prototype, "closeClick", void 0);
1110
- SkyTabButtonComponent = __decorate([
1111
- Component({
1112
- selector: 'sky-tab-button',
1113
- template: "<div\n class=\"sky-btn-tab-wrapper\"\n [ngClass]=\"{\n 'sky-btn-tab-wrapper-selected': active,\n 'sky-btn-tab-wrapper-disabled': disabled\n }\"\n>\n <a\n class=\"sky-btn-tab\"\n role=\"tab\"\n [attr.aria-controls]=\"ariaControls\"\n [attr.aria-disabled]=\"disabled\"\n [attr.aria-selected]=\"active\"\n [attr.href]=\"buttonHref\"\n [id]=\"buttonId\"\n [ngClass]=\"{\n 'sky-btn-tab-wizard': tabStyle === 'wizard',\n 'sky-btn-tab-selected': active,\n 'sky-btn-tab-disabled': disabled,\n 'sky-tab-btn-closeable': closeable\n }\"\n [tabindex]=\"disabled ? '-1' : '0'\"\n (click)=\"onButtonClick($event)\"\n (keydown.enter)=\"onButtonEnterKeyDown($event)\"\n >\n <span\n class=\"sky-tab-heading\"\n >\n {{ buttonText }}\n <span *ngIf=\"buttonTextCount !== undefined\"\n class=\"sky-tab-header-count\"\n >\n {{ buttonTextCount }}\n </span>\n </span>\n </a>\n\n <button *ngIf=\"closeable\"\n class=\"sky-btn-tab-close\"\n type=\"button\"\n [attr.aria-label]=\"'skyux_tab_close' | skyLibResources:buttonText\"\n [disabled]=\"disabled\"\n [ngClass]=\"{\n 'sky-btn-tab-close-disabled': disabled\n }\"\n (click)=\"onCloseClick($event)\"\n >\n <sky-icon\n icon=\"remove\"\n ></sky-icon>\n </button>\n</div>\n",
1114
- changeDetection: ChangeDetectionStrategy.OnPush,
1115
- encapsulation: ViewEncapsulation.None,
1116
- styles: [".sky-btn-tab-wrapper{display:inline-block;position:relative;margin-right:5px}.sky-btn-tab-wrapper .sky-btn-tab-close{position:absolute;top:10px;right:10px;color:#686c73}.sky-btn-tab-wrapper .sky-btn-tab-close:hover{color:#212327;transition:color 150ms}.sky-btn-tab-wrapper.sky-btn-tab-wrapper-selected:not(.sky-btn-tab-wrapper-disabled) .sky-btn-tab-close{color:#fff}.sky-tab-btn-closeable{padding-right:43px}.sky-theme-modern .sky-btn-tab-wrapper,:host-context(.sky-theme-modern) .sky-btn-tab-wrapper{margin-right:10px}.sky-theme-modern .sky-btn-tab-wrapper .sky-btn-tab-close,:host-context(.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,: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}.sky-theme-modern .sky-tab-btn-closeable,:host-context(.sky-theme-modern) .sky-tab-btn-closeable{padding-right:44px}.sky-theme-modern.sky-theme-mode-dark .sky-btn-tab-wrapper .sky-btn-tab-close,:host-context(.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,: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}"]
1117
- })
1118
- ], SkyTabButtonComponent);
1119
- return SkyTabButtonComponent;
1120
- }());
1121
-
1122
- /**
1123
- * @internal
1124
- */
1125
- var SkyTabsetPermalinkService = /** @class */ (function () {
1126
- function SkyTabsetPermalinkService(activatedRoute, location, router) {
1127
- this.activatedRoute = activatedRoute;
1128
- this.location = location;
1129
- this.router = router;
1130
- this._popStateChange = new Subject();
1131
- }
1132
- Object.defineProperty(SkyTabsetPermalinkService.prototype, "popStateChange", {
1133
- get: function () {
1134
- return this._popStateChange.asObservable();
1135
- },
1136
- enumerable: true,
1137
- configurable: true
1138
- });
1139
- SkyTabsetPermalinkService.prototype.ngOnDestroy = function () {
1140
- if (this.subscription) {
1141
- this.subscription.unsubscribe();
1142
- }
1143
- };
1144
- SkyTabsetPermalinkService.prototype.init = function () {
1145
- var _this = this;
1146
- this.subscription = this.location.subscribe(function () {
1147
- _this._popStateChange.next();
1148
- });
1149
- };
1150
- /**
1151
- * Returns the value of a URL query param.
1152
- */
1153
- SkyTabsetPermalinkService.prototype.getParam = function (name) {
1154
- return this.getParams()[name];
1155
- };
1156
- /**
1157
- * Sets the value of a URL query param.
1158
- */
1159
- SkyTabsetPermalinkService.prototype.setParam = function (name, value) {
1160
- var params = this.getParams();
1161
- if (value === null) {
1162
- delete params[name];
1163
- }
1164
- else {
1165
- params[name] = value;
1166
- }
1167
- // Update the URL without triggering a navigation state change.
1168
- // See: https://stackoverflow.com/a/46486677
1169
- var url = this.router.createUrlTree(['.'], {
1170
- relativeTo: this.activatedRoute,
1171
- queryParams: params,
1172
- queryParamsHandling: 'merge'
1173
- }).toString();
1174
- // Abort redirect if the current URL is equal to the new URL.
1175
- if (this.location.isCurrentPathEqualTo(url)) {
1176
- return;
1177
- }
1178
- this.location.go(url);
1179
- };
1180
- /**
1181
- * Removes the provided query param from the URL.
1182
- */
1183
- SkyTabsetPermalinkService.prototype.clearParam = function (name) {
1184
- /*tslint:disable-next-line:no-null-keyword*/
1185
- this.setParam(name, null);
1186
- };
1187
- /**
1188
- * Returns a relative URL that includes the provided query parameter. The value is inteded to be
1189
- * used by an HTML anchor element.
1190
- */
1191
- SkyTabsetPermalinkService.prototype.getParamHref = function (name, value) {
1192
- if (!name) {
1193
- /*tslint:disable-next-line:no-null-keyword*/
1194
- return null;
1195
- }
1196
- var params = this.getParams();
1197
- params[name] = value;
1198
- var baseUrl = this.location.path().split('?')[0];
1199
- var paramString = Object.keys(params).map(function (k) { return k + "=" + params[k]; }).join('&');
1200
- return this.location.prepareExternalUrl(baseUrl + "?" + paramString);
1201
- };
1202
- /**
1203
- * Converts the provided string into a value that can be safely used in a URL.
1204
- */
1205
- SkyTabsetPermalinkService.prototype.urlify = function (value) {
1206
- if (!value) {
1207
- return '';
1208
- }
1209
- var sanitized = value.toLowerCase()
1210
- // Remove special characters.
1211
- .replace(/[\_\~\`\@\!\#\$\%\^\&\*\(\)\[\]\{\}\;\:\'\/\\\<\>\,\.\?\=\+\|"]/g, '')
1212
- // Replace space characters with a dash.
1213
- .replace(/\s/g, '-')
1214
- // Remove any double-dashes.
1215
- .replace(/--/g, '-');
1216
- return sanitized;
1217
- };
1218
- /**
1219
- * Returns all query params that exist in the current URL.
1220
- */
1221
- SkyTabsetPermalinkService.prototype.getParams = function () {
1222
- var params = {};
1223
- var path = this.location.path();
1224
- if (path.indexOf('?') === -1) {
1225
- return params;
1226
- }
1227
- var existingParamPairs = path.split('?')[1].split('&');
1228
- existingParamPairs.forEach(function (pair) {
1229
- var fragments = pair.split('=');
1230
- params[fragments[0]] = decodeURIComponent(fragments[1]);
1231
- });
1232
- return params;
1233
- };
1234
- SkyTabsetPermalinkService.ctorParameters = function () { return [
1235
- { type: ActivatedRoute },
1236
- { type: Location },
1237
- { type: Router }
1238
- ]; };
1239
- SkyTabsetPermalinkService = __decorate([
1240
- Injectable()
1241
- ], SkyTabsetPermalinkService);
1242
- return SkyTabsetPermalinkService;
1243
- }());
1244
-
1245
- /**
1246
- * @internal
1247
- */
1248
- var SkyTabsetService = /** @class */ (function () {
1249
- function SkyTabsetService() {
1250
- this.currentActiveTabIndex = 0;
1251
- this._activeTabIndex = new BehaviorSubject(0);
1252
- this._activeTabUnregistered = new Subject();
1253
- this.tabs = [];
1254
- this.tabCounter = 0;
1255
- }
1256
- Object.defineProperty(SkyTabsetService.prototype, "activeTabUnregistered", {
1257
- get: function () {
1258
- return this._activeTabUnregistered.asObservable();
1259
- },
1260
- enumerable: true,
1261
- configurable: true
1262
- });
1263
- Object.defineProperty(SkyTabsetService.prototype, "activeTabIndex", {
1264
- get: function () {
1265
- return this._activeTabIndex.asObservable();
1266
- },
1267
- enumerable: true,
1268
- configurable: true
1269
- });
1270
- /**
1271
- * Sets the active tab by its unique `tabIndex` property.
1272
- */
1273
- SkyTabsetService.prototype.setActiveTabIndex = function (value, config) {
1274
- if (config === void 0) { config = {
1275
- emitChange: true
1276
- }; }
1277
- if (value !== undefined &&
1278
- !this.tabIndexesEqual(value, this.currentActiveTabIndex)) {
1279
- this.currentActiveTabIndex = value;
1280
- if (config.emitChange) {
1281
- this._activeTabIndex.next(value);
1282
- }
1283
- }
1284
- };
1285
- /**
1286
- * Registers a tab component.
1287
- */
1288
- SkyTabsetService.prototype.registerTab = function (tabIndex) {
1289
- if (tabIndex === undefined) {
1290
- tabIndex = this.tabCounter;
1291
- this.tabCounter++;
1292
- }
1293
- this.tabs.push({ tabIndex: tabIndex });
1294
- return tabIndex;
1295
- };
1296
- SkyTabsetService.prototype.updateTabIndex = function (currentTabIndex, newTabIndex) {
1297
- var _this = this;
1298
- var found = this.tabs.find(function (tab) { return _this.tabIndexesEqual(tab.tabIndex, currentTabIndex); });
1299
- found.tabIndex = newTabIndex;
1300
- };
1301
- /**
1302
- * Unregisters a tab component.
1303
- */
1304
- SkyTabsetService.prototype.unregisterTab = function (tabIndex) {
1305
- var _this = this;
1306
- var index = this.tabs.findIndex(function (tab) { return _this.tabIndexesEqual(tab.tabIndex, tabIndex); });
1307
- // Notify the tabset component when an active tab is unregistered.
1308
- if (this.isTabIndexActive(this.tabs[index].tabIndex)) {
1309
- this._activeTabUnregistered.next({
1310
- arrayIndex: index
1311
- });
1312
- }
1313
- this.tabs.splice(index, 1);
1314
- };
1315
- /**
1316
- * Unregisters all tab components at once.
1317
- */
1318
- SkyTabsetService.prototype.unregisterAll = function () {
1319
- this.tabs = [];
1320
- };
1321
- /**
1322
- * Compares two tab indexes and returns `true` if they are equal.
1323
- */
1324
- SkyTabsetService.prototype.tabIndexesEqual = function (tabIndex1, tabIndex2) {
1325
- return (tabIndex1 === tabIndex2 ||
1326
- +tabIndex1 === +tabIndex2);
1327
- };
1328
- /**
1329
- * Verifies if a provided tab index is registered.
1330
- */
1331
- SkyTabsetService.prototype.isValidTabIndex = function (tabIndex) {
1332
- var _this = this;
1333
- return this.tabs.some(function (tab) { return _this.tabIndexesEqual(tab.tabIndex, tabIndex); });
1334
- };
1335
- /**
1336
- * Activates the first registered tab.
1337
- */
1338
- SkyTabsetService.prototype.activateFirstTab = function () {
1339
- var firstTabIndex = this.tabs[0] && this.tabs[0].tabIndex;
1340
- if (firstTabIndex !== undefined) {
1341
- this.setActiveTabIndex(firstTabIndex);
1342
- return firstTabIndex;
1343
- }
1344
- };
1345
- /**
1346
- * Activates the next registered tab, or the previous one based on a provided array index.
1347
- */
1348
- SkyTabsetService.prototype.activateNearestTab = function (arrayIndex) {
1349
- var newActiveTab = this.tabs[arrayIndex] || this.tabs[arrayIndex - 1];
1350
- if (newActiveTab) {
1351
- this.currentActiveTabIndex = newActiveTab.tabIndex;
1352
- }
1353
- };
1354
- SkyTabsetService.prototype.isTabIndexActive = function (tabIndex) {
1355
- return this.tabIndexesEqual(tabIndex, this.currentActiveTabIndex);
1356
- };
1357
- SkyTabsetService = __decorate([
1358
- Injectable()
1359
- ], SkyTabsetService);
1360
- return SkyTabsetService;
1361
- }());
1362
-
1363
- var nextId$1 = 0;
1364
- var SkyTabComponent = /** @class */ (function () {
1365
- function SkyTabComponent(changeDetector, permalinkService, tabsetService) {
1366
- this.changeDetector = changeDetector;
1367
- this.permalinkService = permalinkService;
1368
- this.tabsetService = tabsetService;
1369
- /**
1370
- * Fires when users click the button to close the tab.
1371
- * The close button is added to the tab when you specify a listener for this event.
1372
- */
1373
- this.close = new EventEmitter();
1374
- this.showContent = false;
1375
- this._activeChange = new BehaviorSubject(undefined);
1376
- this._stateChange = new BehaviorSubject(undefined);
1377
- this._tabIndexChange = new BehaviorSubject(undefined);
1378
- var id = nextId$1++;
1379
- this.tabPanelId = "sky-tab-" + id;
1380
- this.tabButtonId = this.tabPanelId + "-nav-btn";
1381
- }
1382
- Object.defineProperty(SkyTabComponent.prototype, "active", {
1383
- get: function () {
1384
- return this._active || false;
1385
- },
1386
- /**
1387
- * Indicates whether the tab is active when the tabset loads. After initialization, the `active`
1388
- * property on the tabset component should be used to set the active tab.
1389
- * @default false
1390
- */
1391
- set: function (value) {
1392
- if (value !== undefined &&
1393
- value !== this._active) {
1394
- this._active = value;
1395
- this._activeChange.next();
1396
- }
1397
- },
1398
- enumerable: true,
1399
- configurable: true
1400
- });
1401
- Object.defineProperty(SkyTabComponent.prototype, "activeChange", {
1402
- get: function () {
1403
- return this._activeChange.asObservable();
1404
- },
1405
- enumerable: true,
1406
- configurable: true
1407
- });
1408
- Object.defineProperty(SkyTabComponent.prototype, "permalinkValue", {
1409
- get: function () {
1410
- return this._permalinkValue || this.permalinkService.urlify(this.tabHeading);
1411
- },
1412
- /**
1413
- * Specifies a custom query parameter value for the tab.
1414
- * This works in conjunction with the tabset's `permalinkId` to distinguish
1415
- * the tab's unique state in the URL by generating a query parameter that is
1416
- * written as `?<queryParam>-active-tab=<sanitized-tab-heading`.
1417
- * By default, the query parameter's value is parsed automatically from the tab's heading text.
1418
- */
1419
- set: function (value) {
1420
- this._permalinkValue = this.permalinkService.urlify(value);
1421
- },
1422
- enumerable: true,
1423
- configurable: true
1424
- });
1425
- Object.defineProperty(SkyTabComponent.prototype, "tabIndex", {
1426
- get: function () {
1427
- return this._tabIndex;
1428
- },
1429
- /**
1430
- * Specifies a unique identifier for the tab.
1431
- * If not defined, the identifier is set to the position of the tab on load, starting with `0`.
1432
- */
1433
- set: function (value) {
1434
- if (value !== this._tabIndex &&
1435
- value !== undefined &&
1436
- this._tabIndex !== undefined) {
1437
- this.tabsetService.updateTabIndex(this._tabIndex, value);
1438
- this._tabIndexChange.next(value);
1439
- }
1440
- this._tabIndex = value;
1441
- },
1442
- enumerable: true,
1443
- configurable: true
1444
- });
1445
- Object.defineProperty(SkyTabComponent.prototype, "closeable", {
1446
- get: function () {
1447
- return this.close.observers.length > 0;
1448
- },
1449
- enumerable: true,
1450
- configurable: true
1451
- });
1452
- Object.defineProperty(SkyTabComponent.prototype, "stateChange", {
1453
- /**
1454
- * Alerts the tabset component when this component has changes that need to be reflected in the UI.
1455
- */
1456
- get: function () {
1457
- return this._stateChange.asObservable();
1458
- },
1459
- enumerable: true,
1460
- configurable: true
1461
- });
1462
- Object.defineProperty(SkyTabComponent.prototype, "tabIndexChange", {
1463
- get: function () {
1464
- return this._tabIndexChange.asObservable();
1465
- },
1466
- enumerable: true,
1467
- configurable: true
1468
- });
1469
- SkyTabComponent.prototype.ngOnChanges = function (changes) {
1470
- if (changes.disabled && !changes.disabled.firstChange ||
1471
- changes.tabHeading && !changes.tabHeading.firstChange ||
1472
- changes.tabHeaderCount && !changes.tabHeaderCount.firstChange ||
1473
- changes.permalinkValue && !changes.permalinkValue.firstChange) {
1474
- this._stateChange.next();
1475
- }
1476
- };
1477
- SkyTabComponent.prototype.ngOnDestroy = function () {
1478
- this._stateChange.complete();
1479
- this.tabsetService.unregisterTab(this.tabIndex);
1480
- };
1481
- SkyTabComponent.prototype.init = function () {
1482
- this._tabIndex = this.tabsetService.registerTab(this.tabIndex);
1483
- };
1484
- SkyTabComponent.prototype.activate = function () {
1485
- this._active = true;
1486
- this.showContent = true;
1487
- this.changeDetector.markForCheck();
1488
- };
1489
- SkyTabComponent.prototype.deactivate = function () {
1490
- this._active = false;
1491
- this.showContent = false;
1492
- this.changeDetector.markForCheck();
1493
- };
1494
- SkyTabComponent.ctorParameters = function () { return [
1495
- { type: ChangeDetectorRef },
1496
- { type: SkyTabsetPermalinkService },
1497
- { type: SkyTabsetService }
1498
- ]; };
1499
- __decorate([
1500
- Input()
1501
- ], SkyTabComponent.prototype, "active", null);
1502
- __decorate([
1503
- Input()
1504
- ], SkyTabComponent.prototype, "disabled", void 0);
1505
- __decorate([
1506
- Input()
1507
- ], SkyTabComponent.prototype, "permalinkValue", null);
1508
- __decorate([
1509
- Input()
1510
- ], SkyTabComponent.prototype, "tabHeaderCount", void 0);
1511
- __decorate([
1512
- Input()
1513
- ], SkyTabComponent.prototype, "tabHeading", void 0);
1514
- __decorate([
1515
- Input()
1516
- ], SkyTabComponent.prototype, "tabIndex", null);
1517
- __decorate([
1518
- Output()
1519
- ], SkyTabComponent.prototype, "close", void 0);
1520
- SkyTabComponent = __decorate([
1521
- Component({
1522
- selector: 'sky-tab',
1523
- 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",
1524
- changeDetection: ChangeDetectionStrategy.OnPush
1525
- })
1526
- ], SkyTabComponent);
1527
- return SkyTabComponent;
1528
- }());
1529
-
1530
- var buttonTypeNext = 'next';
1531
- var buttonTypePrevious = 'previous';
1532
- /**
1533
- * @internal
1534
- */
1535
- var SkyTabsetNavButtonComponent = /** @class */ (function () {
1536
- function SkyTabsetNavButtonComponent(resourceService, changeDetector) {
1537
- this.resourceService = resourceService;
1538
- this.changeDetector = changeDetector;
1539
- }
1540
- Object.defineProperty(SkyTabsetNavButtonComponent.prototype, "buttonText", {
1541
- get: function () {
1542
- if (this._buttonText) {
1543
- return this._buttonText;
1544
- }
1545
- switch (this.buttonType) {
1546
- case buttonTypePrevious:
1547
- return this.previousButtonText;
1548
- case buttonTypeNext:
1549
- return this.nextButtonText;
1550
- /* istanbul ignore next */
1551
- default:
1552
- return '';
1553
- }
1554
- },
1555
- set: function (value) {
1556
- this._buttonText = value;
1557
- },
1558
- enumerable: true,
1559
- configurable: true
1560
- });
1561
- Object.defineProperty(SkyTabsetNavButtonComponent.prototype, "disabled", {
1562
- get: function () {
1563
- var tabToSelect;
1564
- switch (this.buttonType) {
1565
- case buttonTypePrevious:
1566
- tabToSelect = this.previousTab;
1567
- break;
1568
- case buttonTypeNext:
1569
- tabToSelect = this.nextTab;
1570
- break;
1571
- /* istanbul ignore next */
1572
- default:
1573
- break;
1574
- }
1575
- return !tabToSelect || tabToSelect.disabled;
1576
- },
1577
- enumerable: true,
1578
- configurable: true
1579
- });
1580
- Object.defineProperty(SkyTabsetNavButtonComponent.prototype, "selectedTab", {
1581
- get: function () {
1582
- var _this = this;
1583
- var selectedTab;
1584
- if (this.tabset && this.tabset.tabs) {
1585
- selectedTab = this.tabset.tabs.find(function (tab) { return tab.tabIndex === _this.tabset.lastActiveTabIndex; });
1586
- }
1587
- return selectedTab;
1588
- },
1589
- enumerable: true,
1590
- configurable: true
1591
- });
1592
- Object.defineProperty(SkyTabsetNavButtonComponent.prototype, "nextTab", {
1593
- get: function () {
1594
- var selectedTab = this.selectedTab;
1595
- if (selectedTab) {
1596
- var tabs = this.tabset.tabs.toArray();
1597
- return tabs[tabs.indexOf(selectedTab) + 1];
1598
- }
1599
- return undefined;
1600
- },
1601
- enumerable: true,
1602
- configurable: true
1603
- });
1604
- Object.defineProperty(SkyTabsetNavButtonComponent.prototype, "previousTab", {
1605
- get: function () {
1606
- var selectedTab = this.selectedTab;
1607
- if (selectedTab) {
1608
- var tabs = this.tabset.tabs.toArray();
1609
- return tabs[tabs.indexOf(selectedTab) - 1];
1610
- }
1611
- return undefined;
1612
- },
1613
- enumerable: true,
1614
- configurable: true
1615
- });
1616
- SkyTabsetNavButtonComponent.prototype.ngAfterViewInit = function () {
1617
- var _this = this;
1618
- forkJoin([
1619
- this.resourceService.getString('skyux_tabs_navigator_previous'),
1620
- this.resourceService.getString('skyux_tabs_navigator_next')
1621
- ])
1622
- .pipe(take(1))
1623
- .subscribe(function (resources) {
1624
- _this.previousButtonText = resources[0];
1625
- _this.nextButtonText = resources[1];
1626
- _this.changeDetector.detectChanges();
1627
- });
1628
- };
1629
- SkyTabsetNavButtonComponent.prototype.buttonClick = function () {
1630
- var tabToSelect;
1631
- switch (this.buttonType) {
1632
- case buttonTypePrevious:
1633
- tabToSelect = this.previousTab;
1634
- break;
1635
- case buttonTypeNext:
1636
- tabToSelect = this.nextTab;
1637
- break;
1638
- /* istanbul ignore next */
1639
- default:
1640
- break;
1641
- }
1642
- /* istanbul ignore else */
1643
- if (tabToSelect && !tabToSelect.disabled) {
1644
- this.tabset.active = tabToSelect.tabIndex;
1645
- }
1646
- };
1647
- SkyTabsetNavButtonComponent.ctorParameters = function () { return [
1648
- { type: SkyLibResourcesService },
1649
- { type: ChangeDetectorRef }
1650
- ]; };
1651
- __decorate([
1652
- Input()
1653
- ], SkyTabsetNavButtonComponent.prototype, "tabset", void 0);
1654
- __decorate([
1655
- Input()
1656
- ], SkyTabsetNavButtonComponent.prototype, "buttonType", void 0);
1657
- __decorate([
1658
- Input()
1659
- ], SkyTabsetNavButtonComponent.prototype, "buttonText", null);
1660
- SkyTabsetNavButtonComponent = __decorate([
1661
- Component({
1662
- selector: 'sky-tabset-nav-button',
1663
- template: "<button\n class=\"sky-btn sky-btn-default\"\n type=\"button\"\n [disabled]=\"disabled\"\n (click)=\"buttonClick()\"\n>\n {{ buttonText }}\n</button>\n"
1664
- })
1665
- ], SkyTabsetNavButtonComponent);
1666
- return SkyTabsetNavButtonComponent;
1667
- }());
1668
-
1669
- /**
1670
- * @internal
1671
- */
1672
- var SkyTabsetAdapterService = /** @class */ (function () {
1673
- function SkyTabsetAdapterService() {
1674
- this._overflowChange = new BehaviorSubject(false);
1675
- }
1676
- Object.defineProperty(SkyTabsetAdapterService.prototype, "overflowChange", {
1677
- get: function () {
1678
- return this._overflowChange.asObservable();
1679
- },
1680
- enumerable: true,
1681
- configurable: true
1682
- });
1683
- SkyTabsetAdapterService.prototype.registerTabset = function (tabsetRef) {
1684
- this.tabsetRef = tabsetRef;
1685
- this.tabsOffsetLeft = this.getTabsOffsetLeft(tabsetRef.nativeElement);
1686
- };
1687
- /**
1688
- * Detects if the tab buttons are wider than the tabset container.
1689
- */
1690
- SkyTabsetAdapterService.prototype.detectOverflow = function () {
1691
- var nativeElement = this.tabsetRef.nativeElement;
1692
- var tabsetRect = nativeElement
1693
- .querySelector('.sky-tabset')
1694
- .getBoundingClientRect();
1695
- var tabButtonsRect = nativeElement
1696
- .querySelector('.sky-tabset-tabs')
1697
- .getBoundingClientRect();
1698
- var tabExtraButtonsRect = nativeElement
1699
- .querySelector('.sky-tabset-btns')
1700
- .getBoundingClientRect();
1701
- var tabButtonsWidth = tabButtonsRect.width + tabExtraButtonsRect.width + this.tabsOffsetLeft;
1702
- var newOverflow = (tabButtonsWidth > tabsetRect.width);
1703
- if (this.currentOverflow !== newOverflow) {
1704
- this.currentOverflow = newOverflow;
1705
- this._overflowChange.next(this.currentOverflow);
1706
- }
1707
- };
1708
- /**
1709
- * Returns the number of pixels to the left of the first tab.
1710
- */
1711
- SkyTabsetAdapterService.prototype.getTabsOffsetLeft = function (tabsetEl) {
1712
- var tabsetRect = tabsetEl.getBoundingClientRect();
1713
- // The dropdown element is the first "tab" and always exists in the DOM, even when hidden.
1714
- var firstTabRect = tabsetEl.querySelector('.sky-tabset-dropdown').getBoundingClientRect();
1715
- return firstTabRect.left - tabsetRect.left;
1716
- };
1717
- SkyTabsetAdapterService = __decorate([
1718
- Injectable()
1719
- ], SkyTabsetAdapterService);
1720
- return SkyTabsetAdapterService;
1721
- }());
1722
-
1723
- var SkyTabsetComponent = /** @class */ (function () {
1724
- function SkyTabsetComponent(changeDetector, elementRef, adapterService, permalinkService, tabsetService) {
1725
- this.changeDetector = changeDetector;
1726
- this.elementRef = elementRef;
1727
- this.adapterService = adapterService;
1728
- this.permalinkService = permalinkService;
1729
- this.tabsetService = tabsetService;
1730
- /**
1731
- * Fires when the active tab changes. This event emits the index of the active tab.
1732
- */
1733
- this.activeChange = new EventEmitter();
1734
- /**
1735
- * Fires when users click the button to add a new tab.
1736
- * The new tab button is added to the tab area when you specify a listener for this event.
1737
- */
1738
- this.newTab = new EventEmitter();
1739
- /**
1740
- * Fires when users click the button to open a tab.
1741
- * The open tab button is added to the tab area when you specify a listener for this event.
1742
- */
1743
- this.openTab = new EventEmitter();
1744
- /**
1745
- * Fires when any tab's `tabIndex` value changes.
1746
- */
1747
- this.tabIndexesChange = new EventEmitter();
1748
- this.tabButtons = [];
1749
- this.ngUnsubscribe = new Subject();
1750
- this.tabComponentsStateChangeUnsubscribe = new Subject();
1751
- }
1752
- Object.defineProperty(SkyTabsetComponent.prototype, "active", {
1753
- get: function () {
1754
- return this._active;
1755
- },
1756
- /**
1757
- * Activates a tab by its `tabIndex` property.
1758
- */
1759
- set: function (value) {
1760
- var _this = this;
1761
- if (value === undefined ||
1762
- this.tabsetService.tabIndexesEqual(value, this._active)) {
1763
- return;
1764
- }
1765
- this._active = value;
1766
- if (this.tabs) {
1767
- this.tabsetService.setActiveTabIndex(value);
1768
- }
1769
- else {
1770
- // On init, wait for children tabs to render before broadcasting the active tab index.
1771
- setTimeout(function () {
1772
- if (_this.tabsetService.isValidTabIndex(value)) {
1773
- // On init, yield to the permalink ID, if it exists.
1774
- if (_this.getActiveTabIndexByPermalinkId() === undefined) {
1775
- _this.tabsetService.setActiveTabIndex(value);
1776
- }
1777
- }
1778
- else {
1779
- // Activate the first tab if the new tab index is invalid.
1780
- _this._active = _this.tabsetService.activateFirstTab();
1781
- }
1782
- });
1783
- }
1784
- },
1785
- enumerable: true,
1786
- configurable: true
1787
- });
1788
- Object.defineProperty(SkyTabsetComponent.prototype, "permalinkId", {
1789
- get: function () {
1790
- return this._permalinkId || '';
1791
- },
1792
- /**
1793
- * Distinguishes a tabset's unique state in the URL by generating a query parameter
1794
- * that is written as `?<queryParam>-active-tab=<sanitized-tab-heading>`.
1795
- * The query parameter's value is parsed automatically from the selected tab's heading text,
1796
- * but you can supply a custom query parameter value for each tab with its `permalinkValue`.
1797
- */
1798
- set: function (value) {
1799
- if (!value) {
1800
- return;
1801
- }
1802
- var sanitized = this.permalinkService.urlify(value);
1803
- this._permalinkId = sanitized + "-active-tab";
1804
- },
1805
- enumerable: true,
1806
- configurable: true
1807
- });
1808
- Object.defineProperty(SkyTabsetComponent.prototype, "tabStyle", {
1809
- get: function () {
1810
- return this._tabStyle || 'tabs';
1811
- },
1812
- /**
1813
- * Specifies the behavior for a series of tabs.
1814
- * @deprecated The property was designed to create wizards by setting tabStyle="wizard" on tabsets in modals,
1815
- * but this wizard implementation was replaced by the
1816
- * [progress indicator component](https://developer.blackbaud.com/skyux/components/progress-indicator).
1817
- * @default 'tabs'
1818
- */
1819
- set: function (value) {
1820
- /*istanbul ignore else*/
1821
- if (value && value.toLowerCase() === 'wizard') {
1822
- console.warn('The tabset wizard is deprecated. Please implement the new approach using ' +
1823
- 'progress indicator as documented here: https://developer.blackbaud.com/skyux/components/wizard.');
1824
- }
1825
- this._tabStyle = value;
1826
- },
1827
- enumerable: true,
1828
- configurable: true
1829
- });
1830
- Object.defineProperty(SkyTabsetComponent.prototype, "tabDisplayMode", {
1831
- get: function () {
1832
- return this._tabDisplayMode || 'tabs';
1833
- },
1834
- set: function (value) {
1835
- this._tabDisplayMode = value;
1836
- this.changeDetector.markForCheck();
1837
- },
1838
- enumerable: true,
1839
- configurable: true
1840
- });
1841
- SkyTabsetComponent.prototype.ngAfterViewInit = function () {
1842
- var _this = this;
1843
- this.initTabComponents();
1844
- this.listenTabComponentsStructuralChange();
1845
- var initialTabIndex = this.getInitialTabIndex();
1846
- this.tabsetService.setActiveTabIndex(initialTabIndex);
1847
- this.listenTabButtonsOverflowChange();
1848
- this.listenLocationPopStateChange();
1849
- // If the currently active tab is getting unregistered, activate the next one.
1850
- this.tabsetService.activeTabUnregistered
1851
- .pipe(takeUntil(this.ngUnsubscribe))
1852
- .subscribe(function (tab) {
1853
- // Wait for the new tabs to render before activating.
1854
- setTimeout(function () {
1855
- _this.tabsetService.activateNearestTab(tab.arrayIndex);
1856
- });
1857
- });
1858
- // Let the tabset render the initial active index before listening for changes.
1859
- setTimeout(function () {
1860
- _this.listenTabComponentsStateChange();
1861
- _this.listenActiveIndexChange();
1862
- _this.permalinkService.init();
1863
- });
1864
- };
1865
- SkyTabsetComponent.prototype.ngOnDestroy = function () {
1866
- this.ngUnsubscribe.next();
1867
- this.ngUnsubscribe.complete();
1868
- this.unsubscribeTabComponentsStateChange();
1869
- this.permalinkService.clearParam(this.permalinkId);
1870
- };
1871
- SkyTabsetComponent.prototype.onWindowResize = function () {
1872
- this.adapterService.detectOverflow();
1873
- };
1874
- SkyTabsetComponent.prototype.onTabCloseClick = function (tabButton) {
1875
- var _this = this;
1876
- var tabComponent = this.tabs.find(function (tab) {
1877
- return _this.tabsetService.tabIndexesEqual(tab.tabIndex, tabButton.tabIndex);
1878
- });
1879
- tabComponent.close.emit();
1880
- };
1881
- SkyTabsetComponent.prototype.onTabButtonClick = function (tabButton) {
1882
- this.tabsetService.setActiveTabIndex(tabButton.tabIndex);
1883
- };
1884
- SkyTabsetComponent.prototype.onNewTabClick = function () {
1885
- this.newTab.emit();
1886
- };
1887
- SkyTabsetComponent.prototype.onOpenTabClick = function () {
1888
- this.openTab.emit();
1889
- };
1890
- /**
1891
- * Sets the initial active tab index based on the following criteria.
1892
- * 1. Does the URL include a query param that reflects this tabset's active tab?
1893
- * 2. Does one of the tab components have their `active` property set to `true`?
1894
- * 3. Is the tabset component's `active` property set to a specific tab index?
1895
- */
1896
- SkyTabsetComponent.prototype.getInitialTabIndex = function () {
1897
- var _a;
1898
- var activeIndex = this.getActiveTabIndexByPermalinkId();
1899
- if (activeIndex === undefined) {
1900
- activeIndex = (_a = this.getActiveTabComponent()) === null || _a === void 0 ? void 0 : _a.tabIndex;
1901
- if (activeIndex === undefined) {
1902
- activeIndex = this.active;
1903
- }
1904
- }
1905
- return activeIndex;
1906
- };
1907
- SkyTabsetComponent.prototype.listenActiveIndexChange = function () {
1908
- var _this = this;
1909
- this.tabsetService.activeTabIndex
1910
- .pipe(distinctUntilChanged(), takeUntil(this.ngUnsubscribe))
1911
- .subscribe(function (activeIndex) {
1912
- _this.updateTabsetComponent(activeIndex);
1913
- });
1914
- };
1915
- SkyTabsetComponent.prototype.listenTabComponentsStructuralChange = function () {
1916
- var _this = this;
1917
- this.tabs.changes
1918
- .pipe(takeUntil(this.ngUnsubscribe))
1919
- .subscribe(function () {
1920
- _this.resetTabComponents();
1921
- });
1922
- };
1923
- SkyTabsetComponent.prototype.listenTabComponentsStateChange = function () {
1924
- var _this = this;
1925
- combineLatest(this.tabs.map(function (tab) { return tab.activeChange; }))
1926
- .pipe(takeUntil(race(this.tabComponentsStateChangeUnsubscribe, this.ngUnsubscribe)))
1927
- .subscribe(function () {
1928
- // Wait for the tab components to render changes before finding the active one.
1929
- setTimeout(function () {
1930
- var _a;
1931
- var tabIndex = (_a = _this.getActiveTabComponent()) === null || _a === void 0 ? void 0 : _a.tabIndex;
1932
- _this.tabsetService.setActiveTabIndex(tabIndex);
1933
- });
1934
- });
1935
- combineLatest(this.tabs.map(function (tab) { return tab.tabIndexChange; }))
1936
- .pipe(takeUntil(race(this.tabComponentsStateChangeUnsubscribe, this.ngUnsubscribe)))
1937
- .subscribe(function () {
1938
- // Don't emit the first change.
1939
- if (_this.lastActiveTabIndex !== undefined) {
1940
- // Wait for the tab components to render changes before updating the view.
1941
- setTimeout(function () {
1942
- _this.updateTabsetComponent(_this.tabsetService.currentActiveTabIndex, true);
1943
- _this.emitTabIndexChange();
1944
- });
1945
- }
1946
- });
1947
- combineLatest(this.tabs.map(function (tab) { return tab.stateChange; }))
1948
- .pipe(takeUntil(race(this.tabComponentsStateChangeUnsubscribe, this.ngUnsubscribe)))
1949
- .subscribe(function () {
1950
- // Wait for the tab components to render changes before finding the active one.
1951
- setTimeout(function () {
1952
- _this.updateTabsetComponent(_this.tabsetService.currentActiveTabIndex, true);
1953
- });
1954
- });
1955
- };
1956
- SkyTabsetComponent.prototype.initTabComponents = function () {
1957
- this.tabs.forEach(function (tab) { return tab.init(); });
1958
- };
1959
- SkyTabsetComponent.prototype.resetTabComponents = function () {
1960
- var _a;
1961
- this.unsubscribeTabComponentsStateChange();
1962
- this.tabsetService.unregisterAll();
1963
- // If there are no tab components, do a hard reset of the view.
1964
- if (this.tabs.length === 0) {
1965
- this.updateTabsetComponent(0, true);
1966
- return;
1967
- }
1968
- this.initTabComponents();
1969
- var activeIndex = (_a = this.getActiveTabComponent()) === null || _a === void 0 ? void 0 : _a.tabIndex;
1970
- this.tabsetService.setActiveTabIndex(activeIndex, {
1971
- emitChange: false
1972
- });
1973
- this.listenTabComponentsStateChange();
1974
- };
1975
- SkyTabsetComponent.prototype.emitTabIndexChange = function () {
1976
- this.tabIndexesChange.emit({
1977
- tabs: this.tabs.map(function (tab) { return ({
1978
- tabHeading: tab.tabHeading,
1979
- tabIndex: tab.tabIndex
1980
- }); })
1981
- });
1982
- };
1983
- SkyTabsetComponent.prototype.unsubscribeTabComponentsStateChange = function () {
1984
- this.tabComponentsStateChangeUnsubscribe.next();
1985
- this.tabComponentsStateChangeUnsubscribe.complete();
1986
- this.tabComponentsStateChangeUnsubscribe = new Subject();
1987
- };
1988
- SkyTabsetComponent.prototype.listenTabButtonsOverflowChange = function () {
1989
- var _this = this;
1990
- this.adapterService.registerTabset(this.elementRef);
1991
- this.adapterService.overflowChange
1992
- .pipe(takeUntil(this.ngUnsubscribe))
1993
- .subscribe(function (isOverflowing) {
1994
- _this.tabDisplayMode = (isOverflowing) ? 'dropdown' : 'tabs';
1995
- _this.changeDetector.markForCheck();
1996
- });
1997
- };
1998
- /**
1999
- * Listen for back/forward history button presses to detect query param changes in the URL.
2000
- */
2001
- SkyTabsetComponent.prototype.listenLocationPopStateChange = function () {
2002
- var _this = this;
2003
- this.permalinkService.popStateChange
2004
- .pipe(takeUntil(this.ngUnsubscribe))
2005
- .subscribe(function () {
2006
- _this.setActiveTabIndexByPermalinkId();
2007
- });
2008
- };
2009
- SkyTabsetComponent.prototype.setActiveTabIndexByPermalinkId = function () {
2010
- var activeIndex = this.getActiveTabIndexByPermalinkId();
2011
- this.tabsetService.setActiveTabIndex(activeIndex);
2012
- };
2013
- SkyTabsetComponent.prototype.getActiveTabIndexByPermalinkId = function () {
2014
- var _a;
2015
- if (this.permalinkId) {
2016
- var paramValue_1 = this.permalinkService.getParam(this.permalinkId);
2017
- if (paramValue_1) {
2018
- return (_a = this.tabs.find(function (tab) { return tab.permalinkValue === paramValue_1; })) === null || _a === void 0 ? void 0 : _a.tabIndex;
2019
- }
2020
- }
2021
- };
2022
- SkyTabsetComponent.prototype.getActiveTabComponent = function () {
2023
- return this.tabs.toArray().reverse().find(function (tab) { return tab.active === true; });
2024
- };
2025
- SkyTabsetComponent.prototype.createTabButtons = function (activeIndex) {
2026
- var _this = this;
2027
- return this.tabs.map(function (tab) { return ({
2028
- active: _this.tabsetService.tabIndexesEqual(tab.tabIndex, activeIndex),
2029
- closeable: tab.closeable,
2030
- ariaControls: tab.tabPanelId,
2031
- disabled: tab.disabled,
2032
- /*tslint:disable-next-line:no-null-keyword*/
2033
- buttonHref: (tab.disabled) ? null : _this.permalinkService.getParamHref(_this.permalinkId, tab.permalinkValue),
2034
- buttonId: tab.tabButtonId,
2035
- buttonTextCount: tab.tabHeaderCount,
2036
- buttonText: tab.tabHeading,
2037
- tabIndex: tab.tabIndex
2038
- }); });
2039
- };
2040
- SkyTabsetComponent.prototype.updateTabButtons = function (activeIndex) {
2041
- var _this = this;
2042
- this.tabButtons.forEach(function (button) {
2043
- button.active = _this.tabsetService.tabIndexesEqual(button.tabIndex, activeIndex);
2044
- });
2045
- };
2046
- /**
2047
- * Updates the UI and state of the tabset component after the tab index or
2048
- * tab components have changed.
2049
- * @param activeIndex The currently active tab index.
2050
- * @param regenerateTabButtons Indicates if tab button view models should be regenerated.
2051
- * Setting this value to `false` will simply update the existing tab buttons. Setting this value
2052
- * to `true` is only necessary when the underlying tab components have changed and the tab
2053
- * buttons must reflect those changes.
2054
- */
2055
- SkyTabsetComponent.prototype.updateTabsetComponent = function (activeIndex, regenerateTabButtons) {
2056
- var _this = this;
2057
- if (regenerateTabButtons === void 0) { regenerateTabButtons = false; }
2058
- var _a;
2059
- // Activate/deactivate tab components.
2060
- this.tabs.forEach(function (tab) {
2061
- _this.tabsetService.tabIndexesEqual(tab.tabIndex, activeIndex)
2062
- ? tab.activate()
2063
- : tab.deactivate();
2064
- });
2065
- // Update the tab button models.
2066
- if (regenerateTabButtons || !this.tabButtons.length) {
2067
- this.tabButtons = this.createTabButtons(activeIndex);
2068
- }
2069
- else {
2070
- this.updateTabButtons(activeIndex);
2071
- }
2072
- // Update the dropdown trigger button text.
2073
- this.dropdownTriggerButtonText = (_a = this.tabButtons.find(function (b) {
2074
- return _this.tabsetService.tabIndexesEqual(b.tabIndex, activeIndex);
2075
- })) === null || _a === void 0 ? void 0 : _a.buttonText;
2076
- // Set the query params based on active tab.
2077
- if (this.permalinkId) {
2078
- var activeTabComponent = this.tabs.find(function (tab) {
2079
- return _this.tabsetService.tabIndexesEqual(tab.tabIndex, activeIndex);
2080
- });
2081
- this.permalinkService.setParam(this.permalinkId, activeTabComponent.permalinkValue);
2082
- }
2083
- // Wait for tab button view models to render before gauging dimensions.
2084
- setTimeout(function () {
2085
- _this.adapterService.detectOverflow();
2086
- });
2087
- this.changeDetector.markForCheck();
2088
- // Emit the new active index value to consumers.
2089
- if (this.lastActiveTabIndex !== activeIndex) {
2090
- this.lastActiveTabIndex = activeIndex;
2091
- this.activeChange.emit(activeIndex);
2092
- }
2093
- };
2094
- SkyTabsetComponent.ctorParameters = function () { return [
2095
- { type: ChangeDetectorRef },
2096
- { type: ElementRef },
2097
- { type: SkyTabsetAdapterService },
2098
- { type: SkyTabsetPermalinkService },
2099
- { type: SkyTabsetService }
2100
- ]; };
2101
- __decorate([
2102
- Input()
2103
- ], SkyTabsetComponent.prototype, "active", null);
2104
- __decorate([
2105
- Input()
2106
- ], SkyTabsetComponent.prototype, "ariaLabel", void 0);
2107
- __decorate([
2108
- Input()
2109
- ], SkyTabsetComponent.prototype, "ariaLabelledBy", void 0);
2110
- __decorate([
2111
- Input()
2112
- ], SkyTabsetComponent.prototype, "permalinkId", null);
2113
- __decorate([
2114
- Input()
2115
- ], SkyTabsetComponent.prototype, "tabStyle", null);
2116
- __decorate([
2117
- Output()
2118
- ], SkyTabsetComponent.prototype, "activeChange", void 0);
2119
- __decorate([
2120
- Output()
2121
- ], SkyTabsetComponent.prototype, "newTab", void 0);
2122
- __decorate([
2123
- Output()
2124
- ], SkyTabsetComponent.prototype, "openTab", void 0);
2125
- __decorate([
2126
- Output()
2127
- ], SkyTabsetComponent.prototype, "tabIndexesChange", void 0);
2128
- __decorate([
2129
- ContentChildren(SkyTabComponent)
2130
- ], SkyTabsetComponent.prototype, "tabs", void 0);
2131
- SkyTabsetComponent = __decorate([
2132
- Component({
2133
- selector: 'sky-tabset',
2134
- template: "<div\n class=\"sky-tabset\"\n role=\"tablist\"\n [attr.aria-label]=\"ariaLabel\"\n [attr.aria-labelledby]=\"ariaLabelledBy\"\n [ngClass]=\"'sky-tabset-mode-' + tabDisplayMode + ' sky-tabset-style-' + tabStyle\"\n (window:resize)=\"onWindowResize()\"\n>\n <span class=\"sky-tabset-dropdown\">\n <sky-dropdown *ngIf=\"tabDisplayMode === 'dropdown'\"\n buttonType=\"tab\"\n >\n <sky-dropdown-button>\n {{ dropdownTriggerButtonText }}\n </sky-dropdown-button>\n <sky-dropdown-menu>\n <sky-dropdown-item *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 *ngTemplateOutlet=\"tabButtonTemplate; context: {\n $implicit: tabButton\n }\"></ng-container>\n </div>\n </sky-dropdown-item>\n </sky-dropdown-menu>\n </sky-dropdown>\n </span>\n <span\n class=\"sky-tabset-tabs\"\n >\n <ng-container *ngFor=\"let tabButton of tabButtons\">\n <ng-container *ngTemplateOutlet=\"tabButtonTemplate; context: {\n $implicit: tabButton\n }\"></ng-container>\n </ng-container>\n </span>\n <span\n class=\"sky-tabset-btns\"\n >\n <button *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\n icon=\"plus-circle\"\n size=\"lg\"\n >\n </sky-icon>\n </button>\n <button *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\n icon=\"folder-open-o\"\n size=\"lg\"\n >\n </sky-icon>\n </button>\n </span>\n</div>\n<ng-content></ng-content>\n\n<ng-template\n let-tabButton\n #tabButtonTemplate\n>\n <sky-tab-button\n [active]=\"tabButton.active\"\n [ariaControls]=\"tabButton.ariaControls\"\n [buttonHref]=\"tabButton.buttonHref\"\n [buttonId]=\"tabButton.buttonId\"\n [buttonText]=\"tabButton.buttonText\"\n [buttonTextCount]=\"tabButton.buttonTextCount\"\n [closeable]=\"tabButton.closeable\"\n [disabled]=\"tabButton.disabled\"\n [tabStyle]=\"tabStyle\"\n (buttonClick)=\"onTabButtonClick(tabButton)\"\n (closeClick)=\"onTabCloseClick(tabButton)\"\n ></sky-tab-button>\n</ng-template>\n",
2135
- providers: [
2136
- SkyTabsetAdapterService,
2137
- SkyTabsetPermalinkService,
2138
- SkyTabsetService
2139
- ],
2140
- changeDetection: ChangeDetectionStrategy.OnPush,
2141
- encapsulation: ViewEncapsulation.None,
2142
- styles: [".sky-tabset{align-items:center;border-bottom:2px solid #0974a1;display:flex;list-style-type:none;margin:0;overflow:hidden;padding:0 0 0 15px;white-space:nowrap}.sky-tabset.sky-tabset-style-wizard{border-bottom:none;padding-bottom:10px;padding-left:0}.sky-tabset-btns{order:1;padding-left:10px}.sky-tabset-dropdown{order:0;max-width:100%}.sky-tabset-mode-dropdown{line-height:0}.sky-tabset-mode-dropdown .sky-tabset-tabs{visibility:hidden;order:2}.sky-tab-dropdown-menu-item sky-tab-button{display:flex;min-width:300px}.sky-tab-dropdown-menu-item .sky-dropdown-item{margin:0}.sky-tab-dropdown-menu-item .sky-btn-tab-wrapper{width:100%;margin-right:0}.sky-tab-dropdown-menu-item .sky-btn-tab{margin:0;border-radius:0;width:100%;display:flex}.sky-tab-dropdown-menu-item .sky-btn-tab>.sky-tab-heading{flex:1 1 auto}.sky-tab-dropdown-menu-item .sky-btn-tab>.sky-btn-tab-close{flex:0 1 auto}.sky-tabset-tabs{order:0;white-space:nowrap}.sky-tabset-btn-new,.sky-tabset-btn-open{color:#0974a1}.sky-theme-modern .sky-tabset{border-bottom:1px solid #d2d2d2;overflow:visible}.sky-theme-modern .sky-tab-dropdown-menu-item .sky-btn-tab-wrapper{margin-right:0}"]
2143
- })
2144
- ], SkyTabsetComponent);
2145
- return SkyTabsetComponent;
2146
- }());
2147
-
2148
- var SkyTabsModule = /** @class */ (function () {
2149
- function SkyTabsModule() {
2150
- }
2151
- SkyTabsModule = __decorate([
2152
- NgModule({
2153
- declarations: [
2154
- SkyTabButtonComponent,
2155
- SkyTabComponent,
2156
- SkyTabsetComponent,
2157
- SkyTabsetNavButtonComponent
2158
- ],
2159
- imports: [
2160
- CommonModule,
2161
- RouterModule,
2162
- SkyDropdownModule,
2163
- SkyI18nModule,
2164
- SkyIconModule,
2165
- SkyTabsResourcesModule,
2166
- SkyThemeModule
2167
- ],
2168
- exports: [
2169
- SkyTabComponent,
2170
- SkyTabsetComponent,
2171
- SkyTabsetNavButtonComponent
2172
- ]
2173
- })
2174
- ], SkyTabsModule);
2175
- return SkyTabsModule;
2176
- }());
2177
-
2178
- /**
2179
- * Generated bundle index. Do not edit.
2180
- */
2181
-
2182
- export { SkySectionedFormComponent, SkySectionedFormModule, SkySectionedFormService, SkyTabsModule, SkyVerticalTabsetModule, VISIBLE_STATE as ɵa, HIDDEN_STATE as ɵb, SkyVerticalTabsetService as ɵc, SkySectionedFormSectionComponent as ɵd, SkyVerticalTabComponent as ɵe, SkyVerticalTabMediaQueryService as ɵf, SkyVerticalTabsetAdapterService as ɵg, SkyVerticalTabsetComponent as ɵh, SkyVerticalTabsetGroupComponent as ɵi, SkyTabsResourcesModule as ɵj, SkyTabsResourcesProvider as ɵk, SkyTabButtonComponent as ɵl, SkyTabComponent as ɵm, SkyTabsetPermalinkService as ɵn, SkyTabsetService as ɵo, SkyTabsetComponent as ɵp, SkyTabsetAdapterService as ɵq, SkyTabsetNavButtonComponent as ɵr };
2183
- //# sourceMappingURL=skyux-tabs.js.map