@siemens/element-ng 49.12.0 → 51.0.0-rc.3

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 (233) hide show
  1. package/README.md +1 -1
  2. package/fesm2022/siemens-element-ng-about.mjs +41 -25
  3. package/fesm2022/siemens-element-ng-about.mjs.map +1 -1
  4. package/fesm2022/siemens-element-ng-accordion.mjs +56 -39
  5. package/fesm2022/siemens-element-ng-accordion.mjs.map +1 -1
  6. package/fesm2022/siemens-element-ng-action-modal.mjs +81 -51
  7. package/fesm2022/siemens-element-ng-action-modal.mjs.map +1 -1
  8. package/fesm2022/siemens-element-ng-ag-grid.mjs +15 -12
  9. package/fesm2022/siemens-element-ng-ag-grid.mjs.map +1 -1
  10. package/fesm2022/siemens-element-ng-application-header.mjs +170 -143
  11. package/fesm2022/siemens-element-ng-application-header.mjs.map +1 -1
  12. package/fesm2022/siemens-element-ng-auto-collapsable-list.mjs +34 -28
  13. package/fesm2022/siemens-element-ng-auto-collapsable-list.mjs.map +1 -1
  14. package/fesm2022/siemens-element-ng-autocomplete.mjs +34 -33
  15. package/fesm2022/siemens-element-ng-autocomplete.mjs.map +1 -1
  16. package/fesm2022/siemens-element-ng-avatar.mjs +31 -21
  17. package/fesm2022/siemens-element-ng-avatar.mjs.map +1 -1
  18. package/fesm2022/siemens-element-ng-badge.mjs +9 -8
  19. package/fesm2022/siemens-element-ng-badge.mjs.map +1 -1
  20. package/fesm2022/siemens-element-ng-breadcrumb-router.mjs +17 -14
  21. package/fesm2022/siemens-element-ng-breadcrumb-router.mjs.map +1 -1
  22. package/fesm2022/siemens-element-ng-breadcrumb.mjs +18 -15
  23. package/fesm2022/siemens-element-ng-breadcrumb.mjs.map +1 -1
  24. package/fesm2022/siemens-element-ng-card.mjs +71 -46
  25. package/fesm2022/siemens-element-ng-card.mjs.map +1 -1
  26. package/fesm2022/siemens-element-ng-carousel.mjs +55 -32
  27. package/fesm2022/siemens-element-ng-carousel.mjs.map +1 -1
  28. package/fesm2022/siemens-element-ng-chat-messages.mjs +175 -111
  29. package/fesm2022/siemens-element-ng-chat-messages.mjs.map +1 -1
  30. package/fesm2022/siemens-element-ng-circle-status.mjs +37 -24
  31. package/fesm2022/siemens-element-ng-circle-status.mjs.map +1 -1
  32. package/fesm2022/siemens-element-ng-color-picker.mjs +24 -16
  33. package/fesm2022/siemens-element-ng-color-picker.mjs.map +1 -1
  34. package/fesm2022/siemens-element-ng-column-selection-dialog.mjs +52 -33
  35. package/fesm2022/siemens-element-ng-column-selection-dialog.mjs.map +1 -1
  36. package/fesm2022/siemens-element-ng-common.mjs +12 -12
  37. package/fesm2022/siemens-element-ng-connection-strength.mjs +14 -12
  38. package/fesm2022/siemens-element-ng-connection-strength.mjs.map +1 -1
  39. package/fesm2022/siemens-element-ng-content-action-bar.mjs +35 -26
  40. package/fesm2022/siemens-element-ng-content-action-bar.mjs.map +1 -1
  41. package/fesm2022/siemens-element-ng-copyright-notice.mjs +19 -14
  42. package/fesm2022/siemens-element-ng-copyright-notice.mjs.map +1 -1
  43. package/fesm2022/siemens-element-ng-dashboard.mjs +327 -213
  44. package/fesm2022/siemens-element-ng-dashboard.mjs.map +1 -1
  45. package/fesm2022/siemens-element-ng-datatable.mjs +8 -8
  46. package/fesm2022/siemens-element-ng-datatable.mjs.map +1 -1
  47. package/fesm2022/siemens-element-ng-date-range-filter.mjs +119 -72
  48. package/fesm2022/siemens-element-ng-date-range-filter.mjs.map +1 -1
  49. package/fesm2022/siemens-element-ng-datepicker.mjs +358 -234
  50. package/fesm2022/siemens-element-ng-datepicker.mjs.map +1 -1
  51. package/fesm2022/siemens-element-ng-electron-titlebar.mjs +21 -16
  52. package/fesm2022/siemens-element-ng-electron-titlebar.mjs.map +1 -1
  53. package/fesm2022/siemens-element-ng-empty-state.mjs +15 -12
  54. package/fesm2022/siemens-element-ng-empty-state.mjs.map +1 -1
  55. package/fesm2022/siemens-element-ng-file-uploader.mjs +93 -81
  56. package/fesm2022/siemens-element-ng-file-uploader.mjs.map +1 -1
  57. package/fesm2022/siemens-element-ng-filter-bar.mjs +29 -22
  58. package/fesm2022/siemens-element-ng-filter-bar.mjs.map +1 -1
  59. package/fesm2022/siemens-element-ng-filtered-search.mjs +243 -147
  60. package/fesm2022/siemens-element-ng-filtered-search.mjs.map +1 -1
  61. package/fesm2022/siemens-element-ng-footer.mjs +12 -10
  62. package/fesm2022/siemens-element-ng-footer.mjs.map +1 -1
  63. package/fesm2022/siemens-element-ng-form.mjs +289 -128
  64. package/fesm2022/siemens-element-ng-form.mjs.map +1 -1
  65. package/fesm2022/siemens-element-ng-formly-legacy.mjs +99 -0
  66. package/fesm2022/siemens-element-ng-formly-legacy.mjs.map +1 -0
  67. package/fesm2022/siemens-element-ng-formly.mjs +220 -315
  68. package/fesm2022/siemens-element-ng-formly.mjs.map +1 -1
  69. package/fesm2022/siemens-element-ng-header-dropdown.mjs +46 -30
  70. package/fesm2022/siemens-element-ng-header-dropdown.mjs.map +1 -1
  71. package/fesm2022/siemens-element-ng-help-button.mjs +5 -5
  72. package/fesm2022/siemens-element-ng-help-button.mjs.map +1 -1
  73. package/fesm2022/siemens-element-ng-icon.mjs +46 -47
  74. package/fesm2022/siemens-element-ng-icon.mjs.map +1 -1
  75. package/fesm2022/siemens-element-ng-info-page.mjs +17 -11
  76. package/fesm2022/siemens-element-ng-info-page.mjs.map +1 -1
  77. package/fesm2022/siemens-element-ng-inline-notification.mjs +19 -14
  78. package/fesm2022/siemens-element-ng-inline-notification.mjs.map +1 -1
  79. package/fesm2022/siemens-element-ng-ip-input.mjs +20 -16
  80. package/fesm2022/siemens-element-ng-ip-input.mjs.map +1 -1
  81. package/fesm2022/siemens-element-ng-landing-page.mjs +118 -72
  82. package/fesm2022/siemens-element-ng-landing-page.mjs.map +1 -1
  83. package/fesm2022/siemens-element-ng-language-switcher.mjs +16 -12
  84. package/fesm2022/siemens-element-ng-language-switcher.mjs.map +1 -1
  85. package/fesm2022/siemens-element-ng-link.mjs +31 -21
  86. package/fesm2022/siemens-element-ng-link.mjs.map +1 -1
  87. package/fesm2022/siemens-element-ng-list-details.mjs +73 -54
  88. package/fesm2022/siemens-element-ng-list-details.mjs.map +1 -1
  89. package/fesm2022/siemens-element-ng-loading-spinner.mjs +42 -33
  90. package/fesm2022/siemens-element-ng-loading-spinner.mjs.map +1 -1
  91. package/fesm2022/siemens-element-ng-localization.mjs +14 -12
  92. package/fesm2022/siemens-element-ng-localization.mjs.map +1 -1
  93. package/fesm2022/siemens-element-ng-main-detail-container.mjs +46 -29
  94. package/fesm2022/siemens-element-ng-main-detail-container.mjs.map +1 -1
  95. package/fesm2022/siemens-element-ng-markdown-renderer.mjs +6 -5
  96. package/fesm2022/siemens-element-ng-markdown-renderer.mjs.map +1 -1
  97. package/fesm2022/siemens-element-ng-menu.mjs +56 -48
  98. package/fesm2022/siemens-element-ng-menu.mjs.map +1 -1
  99. package/fesm2022/siemens-element-ng-modal.mjs +12 -10
  100. package/fesm2022/siemens-element-ng-modal.mjs.map +1 -1
  101. package/fesm2022/siemens-element-ng-navbar-vertical-next.mjs +133 -94
  102. package/fesm2022/siemens-element-ng-navbar-vertical-next.mjs.map +1 -1
  103. package/fesm2022/siemens-element-ng-navbar-vertical.mjs +117 -81
  104. package/fesm2022/siemens-element-ng-navbar-vertical.mjs.map +1 -1
  105. package/fesm2022/siemens-element-ng-navbar.mjs +67 -41
  106. package/fesm2022/siemens-element-ng-navbar.mjs.map +1 -1
  107. package/fesm2022/siemens-element-ng-notification-item.mjs +19 -11
  108. package/fesm2022/siemens-element-ng-notification-item.mjs.map +1 -1
  109. package/fesm2022/siemens-element-ng-number-input.mjs +38 -27
  110. package/fesm2022/siemens-element-ng-number-input.mjs.map +1 -1
  111. package/fesm2022/siemens-element-ng-pagination.mjs +31 -20
  112. package/fesm2022/siemens-element-ng-pagination.mjs.map +1 -1
  113. package/fesm2022/siemens-element-ng-password-strength.mjs +31 -22
  114. package/fesm2022/siemens-element-ng-password-strength.mjs.map +1 -1
  115. package/fesm2022/siemens-element-ng-password-toggle.mjs +18 -13
  116. package/fesm2022/siemens-element-ng-password-toggle.mjs.map +1 -1
  117. package/fesm2022/siemens-element-ng-phone-number.mjs +138 -134
  118. package/fesm2022/siemens-element-ng-phone-number.mjs.map +1 -1
  119. package/fesm2022/siemens-element-ng-photo-upload.mjs +76 -45
  120. package/fesm2022/siemens-element-ng-photo-upload.mjs.map +1 -1
  121. package/fesm2022/siemens-element-ng-pills-input.mjs +63 -58
  122. package/fesm2022/siemens-element-ng-pills-input.mjs.map +1 -1
  123. package/fesm2022/siemens-element-ng-popover-legacy.mjs +43 -28
  124. package/fesm2022/siemens-element-ng-popover-legacy.mjs.map +1 -1
  125. package/fesm2022/siemens-element-ng-popover.mjs +33 -26
  126. package/fesm2022/siemens-element-ng-popover.mjs.map +1 -1
  127. package/fesm2022/siemens-element-ng-progressbar.mjs +23 -16
  128. package/fesm2022/siemens-element-ng-progressbar.mjs.map +1 -1
  129. package/fesm2022/siemens-element-ng-resize-observer.mjs +32 -43
  130. package/fesm2022/siemens-element-ng-resize-observer.mjs.map +1 -1
  131. package/fesm2022/siemens-element-ng-result-details-list.mjs +12 -10
  132. package/fesm2022/siemens-element-ng-result-details-list.mjs.map +1 -1
  133. package/fesm2022/siemens-element-ng-search-bar.mjs +32 -24
  134. package/fesm2022/siemens-element-ng-search-bar.mjs.map +1 -1
  135. package/fesm2022/siemens-element-ng-select.mjs +212 -154
  136. package/fesm2022/siemens-element-ng-select.mjs.map +1 -1
  137. package/fesm2022/siemens-element-ng-shadow-root.mjs +3 -3
  138. package/fesm2022/siemens-element-ng-side-panel.mjs +119 -75
  139. package/fesm2022/siemens-element-ng-side-panel.mjs.map +1 -1
  140. package/fesm2022/siemens-element-ng-skip-links.mjs +14 -13
  141. package/fesm2022/siemens-element-ng-skip-links.mjs.map +1 -1
  142. package/fesm2022/siemens-element-ng-slider.mjs +42 -28
  143. package/fesm2022/siemens-element-ng-slider.mjs.map +1 -1
  144. package/fesm2022/siemens-element-ng-split.mjs +268 -254
  145. package/fesm2022/siemens-element-ng-split.mjs.map +1 -1
  146. package/fesm2022/siemens-element-ng-status-bar.mjs +57 -47
  147. package/fesm2022/siemens-element-ng-status-bar.mjs.map +1 -1
  148. package/fesm2022/siemens-element-ng-status-counter.mjs +15 -11
  149. package/fesm2022/siemens-element-ng-status-counter.mjs.map +1 -1
  150. package/fesm2022/siemens-element-ng-status-toggle.mjs +22 -14
  151. package/fesm2022/siemens-element-ng-status-toggle.mjs.map +1 -1
  152. package/fesm2022/siemens-element-ng-summary-chip.mjs +25 -16
  153. package/fesm2022/siemens-element-ng-summary-chip.mjs.map +1 -1
  154. package/fesm2022/siemens-element-ng-summary-widget.mjs +27 -17
  155. package/fesm2022/siemens-element-ng-summary-widget.mjs.map +1 -1
  156. package/fesm2022/siemens-element-ng-system-banner.mjs +11 -8
  157. package/fesm2022/siemens-element-ng-system-banner.mjs.map +1 -1
  158. package/fesm2022/siemens-element-ng-tabs-legacy.mjs +16 -15
  159. package/fesm2022/siemens-element-ng-tabs-legacy.mjs.map +1 -1
  160. package/fesm2022/siemens-element-ng-tabs.mjs +88 -47
  161. package/fesm2022/siemens-element-ng-tabs.mjs.map +1 -1
  162. package/fesm2022/siemens-element-ng-theme.mjs +5 -4
  163. package/fesm2022/siemens-element-ng-theme.mjs.map +1 -1
  164. package/fesm2022/siemens-element-ng-threshold.mjs +59 -40
  165. package/fesm2022/siemens-element-ng-threshold.mjs.map +1 -1
  166. package/fesm2022/siemens-element-ng-toast-notification.mjs +45 -40
  167. package/fesm2022/siemens-element-ng-toast-notification.mjs.map +1 -1
  168. package/fesm2022/siemens-element-ng-tooltip.mjs +218 -117
  169. package/fesm2022/siemens-element-ng-tooltip.mjs.map +1 -1
  170. package/fesm2022/siemens-element-ng-tour.mjs +28 -19
  171. package/fesm2022/siemens-element-ng-tour.mjs.map +1 -1
  172. package/fesm2022/siemens-element-ng-translate.mjs +0 -1
  173. package/fesm2022/siemens-element-ng-translate.mjs.map +1 -1
  174. package/fesm2022/siemens-element-ng-tree-view.mjs +93 -74
  175. package/fesm2022/siemens-element-ng-tree-view.mjs.map +1 -1
  176. package/fesm2022/siemens-element-ng-typeahead.mjs +75 -67
  177. package/fesm2022/siemens-element-ng-typeahead.mjs.map +1 -1
  178. package/fesm2022/siemens-element-ng-wizard.mjs +72 -48
  179. package/fesm2022/siemens-element-ng-wizard.mjs.map +1 -1
  180. package/formly-legacy/package.json +4 -0
  181. package/package.json +20 -22
  182. package/schematics/migration.json +4 -4
  183. package/schematics/migrations/data/class-member-replacement.js +1 -19
  184. package/schematics/migrations/data/component-property-names.js +1 -25
  185. package/schematics/migrations/data/element-class-changes.js +1 -28
  186. package/schematics/migrations/data/element-migration-data.js +2 -0
  187. package/schematics/migrations/data/element-selectors.js +1 -11
  188. package/schematics/migrations/data/index.js +0 -4
  189. package/schematics/migrations/data/migration-test-data.js +9 -6
  190. package/schematics/migrations/data/provider-function-removals.js +7 -0
  191. package/schematics/migrations/data/symbol-removals.js +7 -7
  192. package/schematics/migrations/data/symbol-renaming.js +1 -48
  193. package/schematics/migrations/element-migration/element-migration.js +3 -6
  194. package/schematics/migrations/utilities/import-removal.js +39 -0
  195. package/schematics/migrations/utilities/index.js +2 -0
  196. package/schematics/migrations/utilities/provider-function-removal.migration.js +116 -0
  197. package/schematics/ng-update/index.js +1 -1
  198. package/schematics/ng-update/{migrate-to-v49.js → migrate-to-v51.js} +2 -2
  199. package/template-i18n.json +3 -6
  200. package/types/siemens-element-ng-application-header.d.ts +13 -25
  201. package/types/siemens-element-ng-autocomplete.d.ts +19 -19
  202. package/types/siemens-element-ng-chat-messages.d.ts +6 -4
  203. package/types/siemens-element-ng-circle-status.d.ts +1 -1
  204. package/types/siemens-element-ng-date-range-filter.d.ts +1 -1
  205. package/types/siemens-element-ng-datepicker.d.ts +1 -12
  206. package/types/siemens-element-ng-file-uploader.d.ts +5 -23
  207. package/types/siemens-element-ng-filtered-search.d.ts +1 -1
  208. package/types/siemens-element-ng-form.d.ts +135 -40
  209. package/types/siemens-element-ng-formly-legacy.d.ts +40 -0
  210. package/types/siemens-element-ng-formly.d.ts +34 -167
  211. package/types/siemens-element-ng-header-dropdown.d.ts +5 -0
  212. package/types/siemens-element-ng-icon.d.ts +2 -19
  213. package/types/siemens-element-ng-navbar-vertical-next.d.ts +6 -1
  214. package/types/siemens-element-ng-notification-item.d.ts +12 -0
  215. package/types/siemens-element-ng-phone-number.d.ts +6 -9
  216. package/types/siemens-element-ng-resize-observer.d.ts +0 -17
  217. package/types/siemens-element-ng-split.d.ts +95 -63
  218. package/types/siemens-element-ng-status-bar.d.ts +5 -13
  219. package/types/siemens-element-ng-status-counter.d.ts +1 -1
  220. package/types/siemens-element-ng-tabs.d.ts +4 -0
  221. package/types/siemens-element-ng-toast-notification.d.ts +0 -1
  222. package/types/siemens-element-ng-tooltip.d.ts +10 -26
  223. package/types/siemens-element-ng-translate.d.ts +1 -5
  224. package/fesm2022/siemens-element-ng-icon-status.mjs +0 -46
  225. package/fesm2022/siemens-element-ng-icon-status.mjs.map +0 -1
  226. package/fesm2022/siemens-element-ng-sort-bar.mjs +0 -99
  227. package/fesm2022/siemens-element-ng-sort-bar.mjs.map +0 -1
  228. package/icon-status/package.json +0 -4
  229. package/schematics/vitest-setup.js +0 -5
  230. package/sort-bar/package.json +0 -4
  231. package/types/siemens-element-ng-icon-status.d.ts +0 -25
  232. package/types/siemens-element-ng-sort-bar.d.ts +0 -59
  233. /package/{LICENSE.md → LICENSE} +0 -0
@@ -1 +1 @@
1
- {"version":3,"file":"siemens-element-ng-tabs-legacy.mjs","sources":["../../../../projects/element-ng/tabs-legacy/si-tab/si-tab-legacy.component.ts","../../../../projects/element-ng/tabs-legacy/si-tabset/si-tabset-legacy.component.ts","../../../../projects/element-ng/tabs-legacy/si-tabset/si-tabset-legacy.component.html","../../../../projects/element-ng/tabs-legacy/si-tabset/index.ts","../../../../projects/element-ng/tabs-legacy/si-tab/index.ts","../../../../projects/element-ng/tabs-legacy/si-tabs-legacy.module.ts","../../../../projects/element-ng/tabs-legacy/index.ts","../../../../projects/element-ng/tabs-legacy/siemens-element-ng-tabs-legacy.ts"],"sourcesContent":["/**\n * Copyright (c) Siemens 2016 - 2026\n * SPDX-License-Identifier: MIT\n */\n/* eslint-disable @angular-eslint/prefer-output-emitter-ref */\nimport {\n booleanAttribute,\n ChangeDetectionStrategy,\n Component,\n EventEmitter,\n HostBinding,\n Input,\n OnChanges,\n Output,\n signal\n} from '@angular/core';\nimport { TranslatableString } from '@siemens/element-translate-ng/translate';\n\nimport { SiTabsetLegacyComponent } from '../si-tabset/index';\n\n/**\n * @deprecated Use the new components from `@siemens/element-ng/tabs` instead.\n * See {@link https://element.siemens.io/components/layout-navigation/tabs/#code}\n * for usage instructions.\n */\n@Component({\n selector: 'si-tab-legacy',\n template: '<ng-content />',\n changeDetection: ChangeDetectionStrategy.OnPush,\n host: {\n role: 'tabpanel'\n }\n})\nexport class SiTabLegacyComponent implements OnChanges {\n private static idCounter = 0;\n /** Title of the tab item. */\n @Input() heading?: TranslatableString;\n /** Icon of the tab item. */\n @Input() icon?: string;\n /** Alternative name or translation key for icon. Used for A11y. */\n @Input() iconAltText?: TranslatableString;\n /**\n * Additional badge content. A value of\n * - `true` will render a red dot\n * - any string without a `badgeColor` will render a red dot with text\n * - any string with a `badgeColor` will render a normal badge\n */\n @Input() badgeContent?: TranslatableString | boolean;\n /**\n * Background color of the badge.\n * If no color is provided a red dot badge will be rendered.\n */\n @Input() badgeColor?: string;\n /**\n * Disables the tab.\n *\n * @defaultValue false\n */\n @Input({ transform: booleanAttribute }) disabled = false;\n /**\n * Close the current tab.\n *\n * @defaultValue false\n */\n @Input({ transform: booleanAttribute }) closable? = false;\n /** Event emitter to notify when a tab is closed. */\n @Output() readonly closeTriggered = new EventEmitter<SiTabLegacyComponent>();\n\n /** @internal */\n @HostBinding('id') id = `__si-tab-panel-${SiTabLegacyComponent.idCounter++}`;\n /** @internal */\n @HostBinding('attr.aria-labelledby') tabId = `__si-tab-${SiTabLegacyComponent.idCounter}`;\n\n @HostBinding('attr.hidden')\n protected get isHidden(): boolean | null {\n return !this.active() ? true : null;\n }\n\n private parent?: SiTabsetLegacyComponent;\n\n /** @internal */\n readonly active = signal(false);\n\n /** @internal */\n registerParent(parent: SiTabsetLegacyComponent): void {\n this.parent = parent;\n }\n\n ngOnChanges(): void {\n this.parent?.notifyChildrenChanged();\n }\n}\n","/**\n * Copyright (c) Siemens 2016 - 2026\n * SPDX-License-Identifier: MIT\n */\n/* eslint-disable @angular-eslint/prefer-output-emitter-ref */\nimport {\n AfterViewInit,\n booleanAttribute,\n ChangeDetectionStrategy,\n ChangeDetectorRef,\n Component,\n ContentChildren,\n ElementRef,\n EventEmitter,\n inject,\n Input,\n OnDestroy,\n Output,\n QueryList,\n viewChild,\n viewChildren\n} from '@angular/core';\nimport { elementCancel, elementLeft3, elementRight3 } from '@siemens/element-icons';\nimport { isRTL, WebComponentContentChildren } from '@siemens/element-ng/common';\nimport { addIcons, SiIconComponent } from '@siemens/element-ng/icon';\nimport { SiResizeObserverDirective } from '@siemens/element-ng/resize-observer';\nimport { SiTranslatePipe } from '@siemens/element-translate-ng/translate';\nimport { asyncScheduler, Subscription } from 'rxjs';\nimport { first, observeOn } from 'rxjs/operators';\n\nimport { SiTabLegacyComponent } from '../si-tab/si-tab-legacy.component';\n\nexport interface SiTabDeselectionEvent {\n /**\n * The target tab\n */\n target: SiTabLegacyComponent;\n /**\n * The index of target tab\n */\n tabIndex: number;\n /**\n * To be called to prevent switching the tab\n */\n cancel: () => void;\n}\n\nconst SCROLL_INCREMENT = 55;\n\n/**\n * @deprecated Use the new components from `@siemens/element-ng/tabs` instead.\n * See {@link https://element.siemens.io/components/layout-navigation/tabs/#code}\n * for usage instructions.\n */\n@Component({\n selector: 'si-tabset-legacy',\n imports: [SiIconComponent, SiResizeObserverDirective, SiTranslatePipe],\n templateUrl: './si-tabset-legacy.component.html',\n styleUrl: './si-tabset-legacy.component.scss',\n changeDetection: ChangeDetectionStrategy.OnPush\n})\nexport class SiTabsetLegacyComponent implements AfterViewInit, OnDestroy {\n /**\n * Contains the current tab components.\n */\n @WebComponentContentChildren(SiTabLegacyComponent)\n @ContentChildren(SiTabLegacyComponent)\n protected tabPanels!: QueryList<SiTabLegacyComponent>;\n\n /**\n * Component variable to indicate if scrolling is necessary or the container is big enough to display all tabs.\n */\n protected scrollable = false;\n\n protected xPos = 0;\n protected endArrowDisabled = false;\n protected focusedTabIndex?: number;\n protected readonly icons = addIcons({ elementCancel, elementLeft3, elementRight3 });\n\n /**\n * If selectDefaultTab is passed as 'false', this implies no default tab selection\n * i.e. on initial load of tabset component no tab gets selected.\n *\n * @defaultValue true\n */\n @Input({ transform: booleanAttribute }) selectDefaultTab = true;\n\n /**\n * Sets a selected tab index. This will activate the tab of the provided\n * index, activates the tab and fires a notification about the change.\n * If index is passed as -1 i.e. `selectedTabIndex = -1`, this implies to clear all tab selection.\n * @defaultref {@link _selectedTabIndex}\n */\n @Input()\n set selectedTabIndex(tabIndex: number) {\n if (this.initialized && this.tabPanels.get(tabIndex)) {\n this.selectTab(this.tabPanels.get(tabIndex)!);\n } else {\n this.initTabIndex = tabIndex;\n }\n }\n\n /**\n * Returns the currently selected tab index.\n */\n get selectedTabIndex(): number {\n return this.tabPanels?.toArray().findIndex(tab => tab.active());\n }\n\n /** Define an optional max-width in px for the tab buttons. The minimum value is `100`. */\n @Input() tabButtonMaxWidth?: number;\n\n /**\n * Event emitter to notify about selected tab index changes. You can either\n * use bi-directional binding with [(selectedTabIndex)] or separate both with\n * [selectedTabIndex]=... and (selectedTabIndexChange)=...\n */\n @Output() readonly selectedTabIndexChange = new EventEmitter<number>();\n\n /**\n * Event emitter to notify when a tab became inactive.\n */\n @Output() readonly deselect = new EventEmitter<SiTabDeselectionEvent>();\n\n private initTabIndex = 0;\n private initialized = false;\n private subscription?: Subscription;\n private readonly tabContainer = viewChild.required<ElementRef>('tabContainer');\n private readonly innerTabContainer =\n viewChild.required<ElementRef<HTMLDivElement>>('innerTabContainer');\n private readonly tabs = viewChildren<ElementRef<HTMLButtonElement>>('tabElement');\n private changeDetectorRef = inject(ChangeDetectorRef);\n\n ngAfterViewInit(): void {\n this.initialized = true;\n this.subscription = this.tabPanels.changes.subscribe(() => {\n this.tabPanels.forEach(tab => tab.registerParent(this));\n this.changeDetectorRef.markForCheck();\n });\n this.tabPanels.notifyOnChanges();\n\n if (this.selectDefaultTab) {\n if (this.tabPanels.length) {\n queueMicrotask(() => this.selectTab(this.tabPanels.get(this.initTabIndex)!));\n } else {\n // no tabs are there yet. But maybe there will be some soon, so let's wait for it\n this.subscription.add(\n this.tabPanels.changes\n .pipe(\n first(() => !!this.tabPanels.length),\n observeOn(asyncScheduler)\n )\n .subscribe(() => {\n this.selectTab(this.tabPanels.get(this.initTabIndex)!);\n this.changeDetectorRef.markForCheck();\n })\n );\n }\n }\n\n setTimeout(() => {\n this.resize();\n });\n }\n\n ngOnDestroy(): void {\n this.subscription?.unsubscribe();\n this.subscription = undefined as any;\n }\n\n /** @internal */\n notifyChildrenChanged(): void {\n this.changeDetectorRef.markForCheck();\n }\n\n protected isTabFocusable(index: number): boolean {\n const tab = this.tabPanels.get(index)!;\n return !tab.disabled;\n }\n\n protected focusNext(): void {\n do {\n this.focusedTabIndex = (this.focusedTabIndex ?? 0) + 1;\n if (this.focusedTabIndex >= this.tabs().length) {\n this.focusedTabIndex = 0;\n }\n } while (!this.isTabFocusable(this.focusedTabIndex));\n this.tabs().at(this.focusedTabIndex!)!.nativeElement.focus();\n }\n\n protected focusPrevious(): void {\n do {\n this.focusedTabIndex = (this.focusedTabIndex ?? 0) - 1;\n if (this.focusedTabIndex < 0) {\n this.focusedTabIndex += this.tabs().length;\n }\n } while (!this.isTabFocusable(this.focusedTabIndex));\n this.tabs().at(this.focusedTabIndex!)!.nativeElement.focus();\n }\n\n protected resize(): void {\n this.scrollable =\n Math.round(this.tabContainer().nativeElement.offsetWidth) <\n this.innerTabContainer().nativeElement.scrollWidth;\n this.scroll(0);\n }\n\n /**\n * Finds the index of the provided tab and sets the index as new selected tab index\n *\n * @param selectedTab - The tab to be selected. This must already be part of the container.\n */\n protected selectTab(selectedTab: SiTabLegacyComponent): void {\n if (selectedTab?.disabled) {\n return;\n }\n const tabs = this.tabPanels.toArray();\n const newTabIndex = tabs.indexOf(selectedTab);\n const currentTabIndex = tabs.findIndex(tab => tab.active());\n let continueWithSelection = newTabIndex !== currentTabIndex;\n\n if (continueWithSelection && currentTabIndex !== -1) {\n const currentTab = tabs[currentTabIndex];\n const deselectEvent: SiTabDeselectionEvent = {\n target: currentTab,\n tabIndex: currentTabIndex,\n cancel: () => {\n continueWithSelection = false;\n currentTab.active.set(true);\n }\n };\n\n currentTab.active.set(false);\n this.deselect.emit(deselectEvent);\n }\n\n if (continueWithSelection) {\n selectedTab.active.set(true);\n this.changeDetectorRef.markForCheck();\n this.selectedTabIndexChange.emit(newTabIndex);\n }\n }\n\n /**\n * Scrolls the tab headers to the end (right in LTR).\n */\n protected scrollEnd(): void {\n this.scroll(SCROLL_INCREMENT);\n }\n\n /**\n * Scrolls the tab headers to the start (left in LTR).\n */\n protected scrollStart(): void {\n this.scroll(-SCROLL_INCREMENT);\n }\n\n private scroll(inc: number): void {\n this.xPos += inc;\n this.xPos = Math.max(\n 0,\n Math.min(\n this.innerTabContainer().nativeElement.scrollWidth -\n this.innerTabContainer().nativeElement.offsetWidth,\n this.xPos\n )\n );\n\n this.endArrowDisabled =\n this.xPos + this.tabContainer().nativeElement.offsetWidth >=\n this.innerTabContainer().nativeElement.scrollWidth;\n\n this.innerTabContainer().nativeElement.style.transform = `translateX(${\n this.xPos * (isRTL() ? 1 : -1)\n }px)`;\n }\n\n protected mouseScroll(event: WheelEvent): void {\n if (event.deltaY < 0) {\n this.scroll(-SCROLL_INCREMENT);\n } else {\n this.scroll(SCROLL_INCREMENT);\n }\n\n if (this.xPos || !this.endArrowDisabled) {\n event.preventDefault();\n }\n }\n\n /** @internal */\n focus(index: number): void {\n this.focusedTabIndex = index;\n }\n\n /** @internal */\n blur(): void {\n this.focusedTabIndex = undefined;\n }\n\n protected closeTab(event: MouseEvent, tab: SiTabLegacyComponent): void {\n event.stopPropagation();\n let targetActiveTab: SiTabLegacyComponent | undefined;\n if (tab.active()) {\n const index = this.tabPanels.toArray().indexOf(tab);\n targetActiveTab = this.tabPanels.toArray()[index + 1] ?? this.tabPanels.toArray()[index - 1];\n if (targetActiveTab) {\n this.selectTab(targetActiveTab);\n }\n } else {\n targetActiveTab = this.tabPanels.find(otherTabs => otherTabs.active());\n }\n\n if (targetActiveTab) {\n // The focus will always get the next element due browser behavior.\n // Setting it to the active element solves this.\n setTimeout(() => {\n this.tabs().at(this.tabPanels.toArray().indexOf(targetActiveTab))!.nativeElement.focus();\n });\n }\n tab.closeTriggered.emit(tab);\n this.focusedTabIndex = undefined;\n }\n}\n","<div\n class=\"nav nav-tabs tab-container-header focus-inside\"\n role=\"tablist\"\n [class.is-scrollable]=\"scrollable\"\n (siResizeObserver)=\"resize()\"\n>\n @if (scrollable) {\n <button\n type=\"button\"\n class=\"tab-container-control focus-inside\"\n tabindex=\"-1\"\n aria-hidden=\"true\"\n [hidden]=\"!xPos\"\n (keydown.enter)=\"scrollStart()\"\n (mousedown)=\"scrollStart()\"\n >\n <si-icon class=\"icon flip-rtl\" [icon]=\"icons.elementLeft3\" />\n </button>\n }\n\n <div #tabContainer class=\"tab-container-buttonbar\" (wheel)=\"mouseScroll($event)\">\n <div #innerTabContainer class=\"tab-container-buttonbar-list focus-inside\">\n @for (tab of tabPanels; track $index) {\n <button\n #tabElement\n type=\"button\"\n role=\"tab\"\n class=\"nav-link focus-inside px-5\"\n [class.pe-3]=\"tab.closable\"\n [attr.aria-controls]=\"tab.id\"\n [id]=\"tab.tabId\"\n [style.max-width.px]=\"tabButtonMaxWidth\"\n [tabindex]=\"!tab.disabled && tab.active() && focusedTabIndex === undefined ? 0 : -1\"\n [class.active]=\"tab.active()\"\n [attr.aria-selected]=\"tab.active()\"\n [class.disabled]=\"tab.disabled\"\n (click)=\"selectTab(tab)\"\n (keydown.arrowLeft)=\"focusPrevious()\"\n (keydown.arrowRight)=\"focusNext()\"\n (keydown.delete)=\"tab.closeTriggered.emit(tab)\"\n (blur)=\"blur()\"\n (focus)=\"focus($index)\"\n >\n <span class=\"text-truncate\">{{ tab.heading | translate }}</span>\n @if (tab.icon) {\n <si-icon\n class=\"icon\"\n [attr.role]=\"tab.iconAltText ? 'img' : 'presentation'\"\n [icon]=\"tab.icon\"\n [attr.aria-label]=\"(tab.iconAltText | translate) ?? undefined\"\n />\n }\n @if (tab.badgeContent === true) {\n <span class=\"badge-dot\"></span>\n } @else if (tab.badgeContent && tab.badgeColor) {\n <span class=\"badge\" [class]=\"`bg-${tab.badgeColor}`\">\n {{ tab.badgeContent | translate }}\n </span>\n } @else if (tab.badgeContent && !tab.badgeColor) {\n <span class=\"badge-text\"> {{ tab.badgeContent | translate }}</span>\n }\n @if (tab.closable && !tab.disabled) {\n <si-icon\n class=\"ms-2 btn btn-circle btn-sm btn-tertiary-ghost close\"\n [icon]=\"icons.elementCancel\"\n (click)=\"closeTab($event, tab)\"\n />\n }\n </button>\n }\n </div>\n </div>\n @if (scrollable) {\n <button\n type=\"button\"\n class=\"tab-container-control is-end focus-inside\"\n tabindex=\"-1\"\n aria-hidden=\"true\"\n [hidden]=\"endArrowDisabled\"\n (keydown.enter)=\"scrollEnd()\"\n (mousedown)=\"scrollEnd()\"\n >\n <si-icon class=\"icon flip-rtl\" [icon]=\"icons.elementRight3\" />\n </button>\n }\n</div>\n\n<ng-content />\n","/**\n * Copyright (c) Siemens 2016 - 2026\n * SPDX-License-Identifier: MIT\n */\nexport * from './si-tabset-legacy.component';\n","/**\n * Copyright (c) Siemens 2016 - 2026\n * SPDX-License-Identifier: MIT\n */\nexport * from './si-tab-legacy.component';\n","/**\n * Copyright (c) Siemens 2016 - 2026\n * SPDX-License-Identifier: MIT\n */\nimport { NgModule } from '@angular/core';\n\nimport { SiTabLegacyComponent } from './si-tab/si-tab-legacy.component';\nimport { SiTabsetLegacyComponent } from './si-tabset/si-tabset-legacy.component';\n\nconst components = [SiTabsetLegacyComponent, SiTabLegacyComponent];\n\n/**\n * @deprecated Use the new components from `@siemens/element-ng/tabs` instead.\n * See {@link https://element.siemens.io/components/layout-navigation/tabs/#code}\n * for usage instructions.\n */\n@NgModule({\n imports: components,\n exports: components\n})\nexport class SiTabsLegacyModule {}\n","/**\n * Copyright (c) Siemens 2016 - 2026\n * SPDX-License-Identifier: MIT\n */\nexport * from './si-tabset/index';\nexport * from './si-tab/index';\nexport * from './si-tabs-legacy.module';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"siemens-element-ng-tabs-legacy.mjs","sources":["../../../../projects/element-ng/tabs-legacy/si-tab/si-tab-legacy.component.ts","../../../../projects/element-ng/tabs-legacy/si-tabset/si-tabset-legacy.component.ts","../../../../projects/element-ng/tabs-legacy/si-tabset/si-tabset-legacy.component.html","../../../../projects/element-ng/tabs-legacy/si-tabset/index.ts","../../../../projects/element-ng/tabs-legacy/si-tab/index.ts","../../../../projects/element-ng/tabs-legacy/si-tabs-legacy.module.ts","../../../../projects/element-ng/tabs-legacy/index.ts","../../../../projects/element-ng/tabs-legacy/siemens-element-ng-tabs-legacy.ts"],"sourcesContent":["/**\n * Copyright (c) Siemens 2016 - 2026\n * SPDX-License-Identifier: MIT\n */\n/* eslint-disable @angular-eslint/prefer-output-emitter-ref */\nimport {\n booleanAttribute,\n Component,\n EventEmitter,\n HostBinding,\n Input,\n OnChanges,\n Output,\n signal\n} from '@angular/core';\nimport { TranslatableString } from '@siemens/element-translate-ng/translate';\n\nimport { SiTabsetLegacyComponent } from '../si-tabset/index';\n\n/**\n * @deprecated Use the new components from `@siemens/element-ng/tabs` instead.\n * See {@link https://element.siemens.io/components/layout-navigation/tabs/#code}\n * for usage instructions.\n */\n@Component({\n selector: 'si-tab-legacy',\n template: '<ng-content />',\n host: {\n role: 'tabpanel'\n }\n})\nexport class SiTabLegacyComponent implements OnChanges {\n private static idCounter = 0;\n /** Title of the tab item. */\n @Input() heading?: TranslatableString;\n /** Icon of the tab item. */\n @Input() icon?: string;\n /** Alternative name or translation key for icon. Used for A11y. */\n @Input() iconAltText?: TranslatableString;\n /**\n * Additional badge content. A value of\n * - `true` will render a red dot\n * - any string without a `badgeColor` will render a red dot with text\n * - any string with a `badgeColor` will render a normal badge\n */\n @Input() badgeContent?: TranslatableString | boolean;\n /**\n * Background color of the badge.\n * If no color is provided a red dot badge will be rendered.\n */\n @Input() badgeColor?: string;\n /**\n * Disables the tab.\n *\n * @defaultValue false\n */\n @Input({ transform: booleanAttribute }) disabled = false;\n /**\n * Close the current tab.\n *\n * @defaultValue false\n */\n @Input({ transform: booleanAttribute }) closable? = false;\n /** Event emitter to notify when a tab is closed. */\n @Output() readonly closeTriggered = new EventEmitter<SiTabLegacyComponent>();\n\n /** @internal */\n @HostBinding('id') id = `__si-tab-panel-${SiTabLegacyComponent.idCounter++}`;\n /** @internal */\n @HostBinding('attr.aria-labelledby') tabId = `__si-tab-${SiTabLegacyComponent.idCounter}`;\n\n @HostBinding('attr.hidden')\n protected get isHidden(): boolean | null {\n return !this.active() ? true : null;\n }\n\n private parent?: SiTabsetLegacyComponent;\n\n /** @internal */\n readonly active = signal(false);\n\n /** @internal */\n registerParent(parent: SiTabsetLegacyComponent): void {\n this.parent = parent;\n }\n\n ngOnChanges(): void {\n this.parent?.notifyChildrenChanged();\n }\n}\n","/**\n * Copyright (c) Siemens 2016 - 2026\n * SPDX-License-Identifier: MIT\n */\n/* eslint-disable @angular-eslint/prefer-output-emitter-ref */\nimport {\n AfterViewInit,\n booleanAttribute,\n ChangeDetectorRef,\n Component,\n ContentChildren,\n ElementRef,\n EventEmitter,\n inject,\n Input,\n OnDestroy,\n Output,\n QueryList,\n viewChild,\n viewChildren\n} from '@angular/core';\nimport { elementCancel, elementLeft3, elementRight3 } from '@siemens/element-icons';\nimport { isRTL, WebComponentContentChildren } from '@siemens/element-ng/common';\nimport { addIcons, SiIconComponent } from '@siemens/element-ng/icon';\nimport { SiResizeObserverDirective } from '@siemens/element-ng/resize-observer';\nimport { SiTranslatePipe } from '@siemens/element-translate-ng/translate';\nimport { asyncScheduler, Subscription } from 'rxjs';\nimport { first, observeOn } from 'rxjs/operators';\n\nimport { SiTabLegacyComponent } from '../si-tab/si-tab-legacy.component';\n\nexport interface SiTabDeselectionEvent {\n /**\n * The target tab\n */\n target: SiTabLegacyComponent;\n /**\n * The index of target tab\n */\n tabIndex: number;\n /**\n * To be called to prevent switching the tab\n */\n cancel: () => void;\n}\n\nconst SCROLL_INCREMENT = 55;\n\n/**\n * @deprecated Use the new components from `@siemens/element-ng/tabs` instead.\n * See {@link https://element.siemens.io/components/layout-navigation/tabs/#code}\n * for usage instructions.\n */\n@Component({\n selector: 'si-tabset-legacy',\n imports: [SiIconComponent, SiResizeObserverDirective, SiTranslatePipe],\n templateUrl: './si-tabset-legacy.component.html',\n styleUrl: './si-tabset-legacy.component.scss'\n})\nexport class SiTabsetLegacyComponent implements AfterViewInit, OnDestroy {\n /**\n * Contains the current tab components.\n */\n @WebComponentContentChildren(SiTabLegacyComponent)\n @ContentChildren(SiTabLegacyComponent)\n protected tabPanels!: QueryList<SiTabLegacyComponent>;\n\n /**\n * Component variable to indicate if scrolling is necessary or the container is big enough to display all tabs.\n */\n protected scrollable = false;\n\n protected xPos = 0;\n protected endArrowDisabled = false;\n protected focusedTabIndex?: number;\n protected readonly icons = addIcons({ elementCancel, elementLeft3, elementRight3 });\n\n /**\n * If selectDefaultTab is passed as 'false', this implies no default tab selection\n * i.e. on initial load of tabset component no tab gets selected.\n *\n * @defaultValue true\n */\n @Input({ transform: booleanAttribute }) selectDefaultTab = true;\n\n /**\n * Sets a selected tab index. This will activate the tab of the provided\n * index, activates the tab and fires a notification about the change.\n * If index is passed as -1 i.e. `selectedTabIndex = -1`, this implies to clear all tab selection.\n * @defaultref {@link _selectedTabIndex}\n */\n @Input()\n set selectedTabIndex(tabIndex: number) {\n if (this.initialized && this.tabPanels.get(tabIndex)) {\n this.selectTab(this.tabPanels.get(tabIndex)!);\n } else {\n this.initTabIndex = tabIndex;\n }\n }\n\n /**\n * Returns the currently selected tab index.\n */\n get selectedTabIndex(): number {\n return this.tabPanels?.toArray().findIndex(tab => tab.active());\n }\n\n /** Define an optional max-width in px for the tab buttons. The minimum value is `100`. */\n @Input() tabButtonMaxWidth?: number;\n\n /**\n * Event emitter to notify about selected tab index changes. You can either\n * use bi-directional binding with [(selectedTabIndex)] or separate both with\n * [selectedTabIndex]=... and (selectedTabIndexChange)=...\n */\n @Output() readonly selectedTabIndexChange = new EventEmitter<number>();\n\n /**\n * Event emitter to notify when a tab became inactive.\n */\n @Output() readonly deselect = new EventEmitter<SiTabDeselectionEvent>();\n\n private initTabIndex = 0;\n private initialized = false;\n private subscription?: Subscription;\n private readonly tabContainer = viewChild.required<ElementRef>('tabContainer');\n private readonly innerTabContainer =\n viewChild.required<ElementRef<HTMLDivElement>>('innerTabContainer');\n private readonly tabs = viewChildren<ElementRef<HTMLButtonElement>>('tabElement');\n private changeDetectorRef = inject(ChangeDetectorRef);\n\n ngAfterViewInit(): void {\n this.initialized = true;\n this.subscription = this.tabPanels.changes.subscribe(() => {\n this.tabPanels.forEach(tab => tab.registerParent(this));\n this.changeDetectorRef.markForCheck();\n });\n this.tabPanels.notifyOnChanges();\n\n if (this.selectDefaultTab) {\n if (this.tabPanels.length) {\n queueMicrotask(() => this.selectTab(this.tabPanels.get(this.initTabIndex)!));\n } else {\n // no tabs are there yet. But maybe there will be some soon, so let's wait for it\n this.subscription.add(\n this.tabPanels.changes\n .pipe(\n first(() => !!this.tabPanels.length),\n observeOn(asyncScheduler)\n )\n .subscribe(() => {\n this.selectTab(this.tabPanels.get(this.initTabIndex)!);\n this.changeDetectorRef.markForCheck();\n })\n );\n }\n }\n\n setTimeout(() => {\n this.resize();\n });\n }\n\n ngOnDestroy(): void {\n this.subscription?.unsubscribe();\n this.subscription = undefined as any;\n }\n\n /** @internal */\n notifyChildrenChanged(): void {\n this.changeDetectorRef.markForCheck();\n }\n\n protected isTabFocusable(index: number): boolean {\n const tab = this.tabPanels.get(index)!;\n return !tab.disabled;\n }\n\n protected focusNext(): void {\n do {\n this.focusedTabIndex = (this.focusedTabIndex ?? 0) + 1;\n if (this.focusedTabIndex >= this.tabs().length) {\n this.focusedTabIndex = 0;\n }\n } while (!this.isTabFocusable(this.focusedTabIndex));\n this.tabs().at(this.focusedTabIndex!)!.nativeElement.focus();\n }\n\n protected focusPrevious(): void {\n do {\n this.focusedTabIndex = (this.focusedTabIndex ?? 0) - 1;\n if (this.focusedTabIndex < 0) {\n this.focusedTabIndex += this.tabs().length;\n }\n } while (!this.isTabFocusable(this.focusedTabIndex));\n this.tabs().at(this.focusedTabIndex!)!.nativeElement.focus();\n }\n\n protected resize(): void {\n this.scrollable =\n Math.round(this.tabContainer().nativeElement.offsetWidth) <\n this.innerTabContainer().nativeElement.scrollWidth;\n this.scroll(0);\n }\n\n /**\n * Finds the index of the provided tab and sets the index as new selected tab index\n *\n * @param selectedTab - The tab to be selected. This must already be part of the container.\n */\n protected selectTab(selectedTab: SiTabLegacyComponent): void {\n if (selectedTab?.disabled) {\n return;\n }\n const tabs = this.tabPanels.toArray();\n const newTabIndex = tabs.indexOf(selectedTab);\n const currentTabIndex = tabs.findIndex(tab => tab.active());\n let continueWithSelection = newTabIndex !== currentTabIndex;\n\n if (continueWithSelection && currentTabIndex !== -1) {\n const currentTab = tabs[currentTabIndex];\n const deselectEvent: SiTabDeselectionEvent = {\n target: currentTab,\n tabIndex: currentTabIndex,\n cancel: () => {\n continueWithSelection = false;\n currentTab.active.set(true);\n }\n };\n\n currentTab.active.set(false);\n this.deselect.emit(deselectEvent);\n }\n\n if (continueWithSelection) {\n selectedTab.active.set(true);\n this.changeDetectorRef.markForCheck();\n this.selectedTabIndexChange.emit(newTabIndex);\n }\n }\n\n /**\n * Scrolls the tab headers to the end (right in LTR).\n */\n protected scrollEnd(): void {\n this.scroll(SCROLL_INCREMENT);\n }\n\n /**\n * Scrolls the tab headers to the start (left in LTR).\n */\n protected scrollStart(): void {\n this.scroll(-SCROLL_INCREMENT);\n }\n\n private scroll(inc: number): void {\n this.xPos += inc;\n this.xPos = Math.max(\n 0,\n Math.min(\n this.innerTabContainer().nativeElement.scrollWidth -\n this.innerTabContainer().nativeElement.offsetWidth,\n this.xPos\n )\n );\n\n this.endArrowDisabled =\n this.xPos + this.tabContainer().nativeElement.offsetWidth >=\n this.innerTabContainer().nativeElement.scrollWidth;\n\n this.innerTabContainer().nativeElement.style.transform = `translateX(${\n this.xPos * (isRTL() ? 1 : -1)\n }px)`;\n }\n\n protected mouseScroll(event: WheelEvent): void {\n if (event.deltaY < 0) {\n this.scroll(-SCROLL_INCREMENT);\n } else {\n this.scroll(SCROLL_INCREMENT);\n }\n\n if (this.xPos || !this.endArrowDisabled) {\n event.preventDefault();\n }\n }\n\n /** @internal */\n focus(index: number): void {\n this.focusedTabIndex = index;\n }\n\n /** @internal */\n blur(): void {\n this.focusedTabIndex = undefined;\n }\n\n protected closeTab(event: MouseEvent, tab: SiTabLegacyComponent): void {\n event.stopPropagation();\n let targetActiveTab: SiTabLegacyComponent | undefined;\n if (tab.active()) {\n const index = this.tabPanels.toArray().indexOf(tab);\n targetActiveTab = this.tabPanels.toArray()[index + 1] ?? this.tabPanels.toArray()[index - 1];\n if (targetActiveTab) {\n this.selectTab(targetActiveTab);\n }\n } else {\n targetActiveTab = this.tabPanels.find(otherTabs => otherTabs.active());\n }\n\n if (targetActiveTab) {\n // The focus will always get the next element due browser behavior.\n // Setting it to the active element solves this.\n setTimeout(() => {\n this.tabs().at(this.tabPanels.toArray().indexOf(targetActiveTab))!.nativeElement.focus();\n });\n }\n tab.closeTriggered.emit(tab);\n this.focusedTabIndex = undefined;\n }\n}\n","<div\n class=\"nav nav-tabs tab-container-header focus-inside\"\n role=\"tablist\"\n [class.is-scrollable]=\"scrollable\"\n (siResizeObserver)=\"resize()\"\n>\n @if (scrollable) {\n <button\n type=\"button\"\n class=\"tab-container-control focus-inside\"\n tabindex=\"-1\"\n aria-hidden=\"true\"\n [hidden]=\"!xPos\"\n (keydown.enter)=\"scrollStart()\"\n (mousedown)=\"scrollStart()\"\n >\n <si-icon class=\"icon flip-rtl\" [icon]=\"icons.elementLeft3\" />\n </button>\n }\n\n <div #tabContainer class=\"tab-container-buttonbar\" (wheel)=\"mouseScroll($event)\">\n <div #innerTabContainer class=\"tab-container-buttonbar-list focus-inside\">\n @for (tab of tabPanels; track $index) {\n <button\n #tabElement\n type=\"button\"\n role=\"tab\"\n class=\"nav-link focus-inside px-5\"\n [class.pe-3]=\"tab.closable\"\n [attr.aria-controls]=\"tab.id\"\n [id]=\"tab.tabId\"\n [style.max-width.px]=\"tabButtonMaxWidth\"\n [tabindex]=\"!tab.disabled && tab.active() && focusedTabIndex === undefined ? 0 : -1\"\n [class.active]=\"tab.active()\"\n [attr.aria-selected]=\"tab.active()\"\n [class.disabled]=\"tab.disabled\"\n (click)=\"selectTab(tab)\"\n (keydown.arrowLeft)=\"focusPrevious()\"\n (keydown.arrowRight)=\"focusNext()\"\n (keydown.delete)=\"tab.closeTriggered.emit(tab)\"\n (blur)=\"blur()\"\n (focus)=\"focus($index)\"\n >\n <span class=\"text-truncate\">{{ tab.heading | translate }}</span>\n @if (tab.icon) {\n <si-icon\n class=\"icon\"\n [attr.role]=\"tab.iconAltText ? 'img' : 'presentation'\"\n [icon]=\"tab.icon\"\n [attr.aria-label]=\"(tab.iconAltText | translate) ?? undefined\"\n />\n }\n @if (tab.badgeContent === true) {\n <span class=\"badge-dot\"></span>\n } @else if (tab.badgeContent && tab.badgeColor) {\n <span class=\"badge\" [class]=\"`bg-${tab.badgeColor}`\">\n {{ tab.badgeContent | translate }}\n </span>\n } @else if (tab.badgeContent && !tab.badgeColor) {\n <span class=\"badge-text\"> {{ tab.badgeContent | translate }}</span>\n }\n @if (tab.closable && !tab.disabled) {\n <si-icon\n class=\"ms-2 btn btn-circle btn-sm btn-tertiary-ghost close\"\n [icon]=\"icons.elementCancel\"\n (click)=\"closeTab($event, tab)\"\n />\n }\n </button>\n }\n </div>\n </div>\n @if (scrollable) {\n <button\n type=\"button\"\n class=\"tab-container-control is-end focus-inside\"\n tabindex=\"-1\"\n aria-hidden=\"true\"\n [hidden]=\"endArrowDisabled\"\n (keydown.enter)=\"scrollEnd()\"\n (mousedown)=\"scrollEnd()\"\n >\n <si-icon class=\"icon flip-rtl\" [icon]=\"icons.elementRight3\" />\n </button>\n }\n</div>\n\n<ng-content />\n","/**\n * Copyright (c) Siemens 2016 - 2026\n * SPDX-License-Identifier: MIT\n */\nexport * from './si-tabset-legacy.component';\n","/**\n * Copyright (c) Siemens 2016 - 2026\n * SPDX-License-Identifier: MIT\n */\nexport * from './si-tab-legacy.component';\n","/**\n * Copyright (c) Siemens 2016 - 2026\n * SPDX-License-Identifier: MIT\n */\nimport { NgModule } from '@angular/core';\n\nimport { SiTabLegacyComponent } from './si-tab/si-tab-legacy.component';\nimport { SiTabsetLegacyComponent } from './si-tabset/si-tabset-legacy.component';\n\nconst components = [SiTabsetLegacyComponent, SiTabLegacyComponent];\n\n/**\n * @deprecated Use the new components from `@siemens/element-ng/tabs` instead.\n * See {@link https://element.siemens.io/components/layout-navigation/tabs/#code}\n * for usage instructions.\n */\n@NgModule({\n imports: components,\n exports: components\n})\nexport class SiTabsLegacyModule {}\n","/**\n * Copyright (c) Siemens 2016 - 2026\n * SPDX-License-Identifier: MIT\n */\nexport * from './si-tabset/index';\nexport * from './si-tab/index';\nexport * from './si-tabs-legacy.module';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
@@ -3,7 +3,7 @@ import { CdkMenuTrigger } from '@angular/cdk/menu';
3
3
  import { DomPortal, CdkPortalOutlet } from '@angular/cdk/portal';
4
4
  import { NgTemplateOutlet } from '@angular/common';
5
5
  import * as i0 from '@angular/core';
6
- import { input, ChangeDetectionStrategy, Component, InjectionToken, booleanAttribute, output, inject, ElementRef, viewChild, TemplateRef, computed, effect, untracked, Directive, contentChildren, INJECTOR, signal, model } from '@angular/core';
6
+ import { input, Component, InjectionToken, booleanAttribute, output, inject, ElementRef, viewChild, TemplateRef, computed, effect, untracked, Directive, contentChildren, INJECTOR, signal, model } from '@angular/core';
7
7
  import * as i1 from '@angular/router';
8
8
  import { Router, RouterLink, RouterLinkActive } from '@angular/router';
9
9
  import { elementCancel, elementOptions } from '@siemens/element-icons';
@@ -13,6 +13,7 @@ import { SiMenuDirective, SiMenuItemComponent } from '@siemens/element-ng/menu';
13
13
  import * as i1$1 from '@siemens/element-ng/resize-observer';
14
14
  import { SiResizeObserverModule } from '@siemens/element-ng/resize-observer';
15
15
  import { SiTranslatePipe } from '@siemens/element-translate-ng/translate';
16
+ import { SiTooltipService, SiTooltipDirective } from '@siemens/element-ng/tooltip';
16
17
  import { toSignal } from '@angular/core/rxjs-interop';
17
18
  import { startWith } from 'rxjs/operators';
18
19
 
@@ -21,14 +22,16 @@ import { startWith } from 'rxjs/operators';
21
22
  * SPDX-License-Identifier: MIT
22
23
  */
23
24
  class SiTabBadgeComponent {
24
- badgeContent = input(...(ngDevMode ? [undefined, { debugName: "badgeContent" }] : []));
25
- badgeColor = input(...(ngDevMode ? [undefined, { debugName: "badgeColor" }] : []));
26
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiTabBadgeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
27
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: SiTabBadgeComponent, isStandalone: true, selector: "si-tab-badge", inputs: { badgeContent: { classPropertyName: "badgeContent", publicName: "badgeContent", isSignal: true, isRequired: false, transformFunction: null }, badgeColor: { classPropertyName: "badgeColor", publicName: "badgeColor", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "d-contents" }, ngImport: i0, template: "@let badgeContent = this.badgeContent();\n@if (badgeContent === true) {\n <span class=\"badge-dot\"></span>\n} @else if (badgeContent && badgeColor()) {\n <span class=\"badge\" [class]=\"`bg-${badgeColor() || 'default'}`\">\n {{ badgeContent ?? '' | translate }}\n </span>\n} @else if (badgeContent && !badgeColor()) {\n <span class=\"badge-text\"> {{ badgeContent ?? '' | translate }}</span>\n}\n", styles: [".badge-dot{inset-block-end:calc(.625rem + 8px);inset-inline-start:.75rem;margin-inline-end:.75rem}.badge-text{inset-block-start:-11px;inset-inline-start:2px}:host-context(.cdk-menu-item) .badge-dot{inset-block-end:.3125rem;min-inline-size:12px}:host-context(.cdk-menu-item) .badge-text{inset-block-start:0;inset-inline-start:0}:host-context(.cdk-menu-item) .badge{margin-inline:-6px}\n"], dependencies: [{ kind: "pipe", type: SiTranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
25
+ badgeContent = input(/* @ts-ignore */
26
+ ...(ngDevMode ? [undefined, { debugName: "badgeContent" }] : /* istanbul ignore next */ []));
27
+ badgeColor = input(/* @ts-ignore */
28
+ ...(ngDevMode ? [undefined, { debugName: "badgeColor" }] : /* istanbul ignore next */ []));
29
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: SiTabBadgeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
30
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: SiTabBadgeComponent, isStandalone: true, selector: "si-tab-badge", inputs: { badgeContent: { classPropertyName: "badgeContent", publicName: "badgeContent", isSignal: true, isRequired: false, transformFunction: null }, badgeColor: { classPropertyName: "badgeColor", publicName: "badgeColor", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "d-contents" }, ngImport: i0, template: "@let badgeContent = this.badgeContent();\n@if (badgeContent === true) {\n <span class=\"badge-dot\"></span>\n} @else if (badgeContent && badgeColor()) {\n <span class=\"badge\" [class]=\"`bg-${badgeColor() || 'default'}`\">\n {{ badgeContent ?? '' | translate }}\n </span>\n} @else if (badgeContent && !badgeColor()) {\n <span class=\"badge-text\"> {{ badgeContent ?? '' | translate }}</span>\n}\n", styles: [".badge-dot{inset-block-end:calc(.625rem + 8px);inset-inline-start:.75rem;margin-inline-end:.75rem}.badge-text{inset-block-start:-11px;inset-inline-start:2px}:host-context(.cdk-menu-item) .badge-dot{inset-block-end:.3125rem;min-inline-size:12px}:host-context(.cdk-menu-item) .badge-text{inset-block-start:0;inset-inline-start:0}:host-context(.cdk-menu-item) .badge{margin-inline:-6px}\n"], dependencies: [{ kind: "pipe", type: SiTranslatePipe, name: "translate" }] });
28
31
  }
29
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiTabBadgeComponent, decorators: [{
32
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: SiTabBadgeComponent, decorators: [{
30
33
  type: Component,
31
- args: [{ selector: 'si-tab-badge', imports: [SiTranslatePipe], changeDetection: ChangeDetectionStrategy.OnPush, host: {
34
+ args: [{ selector: 'si-tab-badge', imports: [SiTranslatePipe], host: {
32
35
  'class': 'd-contents'
33
36
  }, template: "@let badgeContent = this.badgeContent();\n@if (badgeContent === true) {\n <span class=\"badge-dot\"></span>\n} @else if (badgeContent && badgeColor()) {\n <span class=\"badge\" [class]=\"`bg-${badgeColor() || 'default'}`\">\n {{ badgeContent ?? '' | translate }}\n </span>\n} @else if (badgeContent && !badgeColor()) {\n <span class=\"badge-text\"> {{ badgeContent ?? '' | translate }}</span>\n}\n", styles: [".badge-dot{inset-block-end:calc(.625rem + 8px);inset-inline-start:.75rem;margin-inline-end:.75rem}.badge-text{inset-block-start:-11px;inset-inline-start:2px}:host-context(.cdk-menu-item) .badge-dot{inset-block-end:.3125rem;min-inline-size:12px}:host-context(.cdk-menu-item) .badge-text{inset-block-start:0;inset-inline-start:0}:host-context(.cdk-menu-item) .badge{margin-inline:-6px}\n"] }]
34
37
  }], propDecorators: { badgeContent: [{ type: i0.Input, args: [{ isSignal: true, alias: "badgeContent", required: false }] }], badgeColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "badgeColor", required: false }] }] } });
@@ -41,30 +44,34 @@ const SI_TABSET = new InjectionToken('SiTabsetComponent');
41
44
 
42
45
  class SiTabBaseDirective {
43
46
  /** Title of the tab item. */
44
- heading = input.required(...(ngDevMode ? [{ debugName: "heading" }] : []));
47
+ heading = input.required(/* @ts-ignore */
48
+ ...(ngDevMode ? [{ debugName: "heading" }] : /* istanbul ignore next */ []));
45
49
  /**
46
50
  * Icon of the tab item.
47
51
  * If provided, heading text will be ignored and only icon will be displayed.
48
52
  */
49
- icon = input(...(ngDevMode ? [undefined, { debugName: "icon" }] : []));
53
+ icon = input(/* @ts-ignore */
54
+ ...(ngDevMode ? [undefined, { debugName: "icon" }] : /* istanbul ignore next */ []));
50
55
  /**
51
56
  * Additional badge content. A value of
52
57
  * - `true` will render a red dot
53
58
  * - any string without a `badgeColor` will render a red dot with text
54
59
  * - any string with a `badgeColor` will render a normal badge
55
60
  */
56
- badgeContent = input(...(ngDevMode ? [undefined, { debugName: "badgeContent" }] : []));
61
+ badgeContent = input(/* @ts-ignore */
62
+ ...(ngDevMode ? [undefined, { debugName: "badgeContent" }] : /* istanbul ignore next */ []));
57
63
  /**
58
64
  * Background color of the badge.
59
65
  * If no color is provided a red dot badge will be rendered.
60
66
  */
61
- badgeColor = input(...(ngDevMode ? [undefined, { debugName: "badgeColor" }] : []));
67
+ badgeColor = input(/* @ts-ignore */
68
+ ...(ngDevMode ? [undefined, { debugName: "badgeColor" }] : /* istanbul ignore next */ []));
62
69
  /**
63
70
  * Disables the tab.
64
71
  *
65
72
  * @defaultValue false
66
73
  */
67
- disabledTab = input(false, { ...(ngDevMode ? { debugName: "disabledTab" } : {}), transform: booleanAttribute,
74
+ disabledTab = input(false, { ...(ngDevMode ? { debugName: "disabledTab" } : /* istanbul ignore next */ {}), transform: booleanAttribute,
68
75
  // eslint-disable-next-line @angular-eslint/no-input-rename
69
76
  alias: 'disabled' });
70
77
  /**
@@ -72,21 +79,26 @@ class SiTabBaseDirective {
72
79
  *
73
80
  * @defaultValue false
74
81
  */
75
- closable = input(false, { ...(ngDevMode ? { debugName: "closable" } : {}), transform: booleanAttribute });
82
+ closable = input(false, { ...(ngDevMode ? { debugName: "closable" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
76
83
  /** Event emitter to notify when a tab is closed. */
77
84
  closeTriggered = output();
78
85
  /** @internal */
79
86
  tabButton = inject(ElementRef);
80
87
  /** @internal */
81
- tabContent = viewChild('tabContent', { ...(ngDevMode ? { debugName: "tabContent" } : {}), read: TemplateRef });
88
+ tabContent = viewChild('tabContent', { ...(ngDevMode ? { debugName: "tabContent" } : /* istanbul ignore next */ {}), read: TemplateRef });
82
89
  static tabCounter = 0;
83
90
  indexBeforeClose = -1;
91
+ tooltipService = inject(SiTooltipService);
92
+ existingTooltip = inject(SiTooltipDirective, { optional: true });
93
+ tooltipRef;
84
94
  /** @internal */
85
95
  tabId = `${SiTabBaseDirective.tabCounter++}`;
86
96
  icons = addIcons({ elementCancel });
87
97
  tabset = inject(SI_TABSET);
88
- index = computed(() => this.tabset.tabPanels().indexOf(this), ...(ngDevMode ? [{ debugName: "index" }] : []));
98
+ index = computed(() => this.tabset.tabPanels().indexOf(this), /* @ts-ignore */
99
+ ...(ngDevMode ? [{ debugName: "index" }] : /* istanbul ignore next */ []));
89
100
  constructor() {
101
+ this.setupIconTooltip();
90
102
  // Update the focusKeyManager if a tab is added that is active or if the tab is set active by the app.
91
103
  // This effect should not run, if active was already applied to the focusKeyManager.
92
104
  effect(() => {
@@ -99,6 +111,28 @@ class SiTabBaseDirective {
99
111
  });
100
112
  });
101
113
  }
114
+ setupIconTooltip() {
115
+ effect(onCleanup => {
116
+ const icon = this.icon();
117
+ // Only add an automatic tooltip if the consumer has not already applied an
118
+ // active `siTooltip` directive (i.e. one that is not disabled and has a tooltip).
119
+ const hasActiveTooltip = !!this.existingTooltip &&
120
+ !this.existingTooltip.isDisabled() &&
121
+ !!this.existingTooltip.siTooltip();
122
+ if (icon && !hasActiveTooltip) {
123
+ this.tooltipRef = this.tooltipService.createTooltip({
124
+ element: this.tabButton,
125
+ placement: 'auto',
126
+ tooltip: () => this.heading(),
127
+ tooltipContext: () => undefined
128
+ });
129
+ }
130
+ onCleanup(() => {
131
+ this.tooltipRef?.destroy();
132
+ this.tooltipRef = undefined;
133
+ });
134
+ });
135
+ }
102
136
  ngOnDestroy() {
103
137
  if (this.indexBeforeClose >= 0) {
104
138
  this.tabset.removedTabByUser(this.indexBeforeClose, this.active());
@@ -144,10 +178,10 @@ class SiTabBaseDirective {
144
178
  behavior: 'instant'
145
179
  });
146
180
  }
147
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiTabBaseDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
148
- static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "21.0.8", type: SiTabBaseDirective, isStandalone: true, selector: "[siTabNextBase]", inputs: { heading: { classPropertyName: "heading", publicName: "heading", isSignal: true, isRequired: true, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, badgeContent: { classPropertyName: "badgeContent", publicName: "badgeContent", isSignal: true, isRequired: false, transformFunction: null }, badgeColor: { classPropertyName: "badgeColor", publicName: "badgeColor", isSignal: true, isRequired: false, transformFunction: null }, disabledTab: { classPropertyName: "disabledTab", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, closable: { classPropertyName: "closable", publicName: "closable", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closeTriggered: "closeTriggered" }, host: { attributes: { "role": "tab" }, listeners: { "keydown.delete": "closeTab($event)" }, properties: { "class.disabled": "disabledTab()", "class.icon-only": "!!icon()", "class.pe-3": "closable()", "class.active": "active()", "attr.id": "'tab-' + tabId", "attr.aria-selected": "active()", "attr.aria-disabled": "disabledTab()", "attr.tabindex": "tabset.focusKeyManager.activeItem === this && !disabledTab() ? 0 : -1", "attr.aria-controls": "'content-' + tabId" }, classAttribute: "nav-link focus-inside px-5" }, viewQueries: [{ propertyName: "tabContent", first: true, predicate: ["tabContent"], descendants: true, read: TemplateRef, isSignal: true }], ngImport: i0 });
181
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: SiTabBaseDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
182
+ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "22.0.5", type: SiTabBaseDirective, isStandalone: true, selector: "[siTabNextBase]", inputs: { heading: { classPropertyName: "heading", publicName: "heading", isSignal: true, isRequired: true, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, badgeContent: { classPropertyName: "badgeContent", publicName: "badgeContent", isSignal: true, isRequired: false, transformFunction: null }, badgeColor: { classPropertyName: "badgeColor", publicName: "badgeColor", isSignal: true, isRequired: false, transformFunction: null }, disabledTab: { classPropertyName: "disabledTab", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, closable: { classPropertyName: "closable", publicName: "closable", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closeTriggered: "closeTriggered" }, host: { attributes: { "role": "tab" }, listeners: { "keydown.delete": "closeTab($event)" }, properties: { "class.disabled": "disabledTab()", "class.icon-only": "!!icon()", "class.pe-3": "closable()", "class.active": "active()", "attr.id": "'tab-' + tabId", "attr.aria-selected": "active()", "attr.aria-disabled": "disabledTab()", "attr.tabindex": "tabset.focusKeyManager.activeItem === this && !disabledTab() ? 0 : -1", "attr.aria-controls": "'content-' + tabId" }, classAttribute: "nav-link focus-inside px-5" }, viewQueries: [{ propertyName: "tabContent", first: true, predicate: ["tabContent"], descendants: true, read: TemplateRef, isSignal: true }], ngImport: i0 });
149
183
  }
150
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiTabBaseDirective, decorators: [{
184
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: SiTabBaseDirective, decorators: [{
151
185
  type: Directive,
152
186
  args: [{
153
187
  selector: '[siTabNextBase]',
@@ -203,16 +237,16 @@ class SiTabLinkComponent extends SiTabBaseDirective {
203
237
  }
204
238
  super.selectTab(retainFocus);
205
239
  }
206
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiTabLinkComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
207
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: SiTabLinkComponent, isStandalone: true, selector: "a[si-tab][routerLink]", providers: [{ provide: SiTabBaseDirective, useExisting: SiTabLinkComponent }], usesInheritance: true, hostDirectives: [{ directive: i1.RouterLinkActive }], ngImport: i0, template: "@let icon = this.icon();\n@if (icon) {\n <si-icon class=\"tab-icon\" [icon]=\"icon\" [attr.title]=\"heading() | translate\" />\n} @else {\n <span class=\"text-truncate\">{{ heading() | translate }}</span>\n}\n<si-tab-badge [badgeColor]=\"badgeColor()\" [badgeContent]=\"badgeContent()\" />\n@if (closable() && !disabledTab()) {\n <si-icon\n class=\"ms-2 btn btn-circle btn-sm btn-tertiary-ghost close\"\n [icon]=\"icons.elementCancel\"\n (click)=\"closeTab($event)\"\n />\n}\n\n<ng-template #tabContent>\n <ng-content />\n</ng-template>\n", styles: [":host.nav-link{flex-shrink:0;transform:translate(0)}:host.nav-link.icon-only{min-inline-size:auto}.tab-icon{font-size:1.5rem}\n"], dependencies: [{ kind: "component", type: SiIconComponent, selector: "si-icon", inputs: ["icon"] }, { kind: "component", type: SiTabBadgeComponent, selector: "si-tab-badge", inputs: ["badgeContent", "badgeColor"] }, { kind: "pipe", type: SiTranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
240
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: SiTabLinkComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
241
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: SiTabLinkComponent, isStandalone: true, selector: "a[si-tab][routerLink]", providers: [SiTooltipService, { provide: SiTabBaseDirective, useExisting: SiTabLinkComponent }], usesInheritance: true, hostDirectives: [{ directive: i1.RouterLinkActive }], ngImport: i0, template: "@let icon = this.icon();\n<span class=\"text-truncate\" [class.visually-hidden]=\"!!icon\">{{ heading() | translate }}</span>\n@if (icon) {\n <si-icon class=\"tab-icon\" [icon]=\"icon\" />\n}\n<si-tab-badge [badgeColor]=\"badgeColor()\" [badgeContent]=\"badgeContent()\" />\n@if (closable() && !disabledTab()) {\n <si-icon\n class=\"ms-2 btn btn-circle btn-sm btn-tertiary-ghost close\"\n [icon]=\"icons.elementCancel\"\n (click)=\"closeTab($event)\"\n />\n}\n\n<ng-template #tabContent>\n <ng-content />\n</ng-template>\n", styles: [":host.nav-link{flex-shrink:0;transform:translate(0)}:host.nav-link.icon-only{min-inline-size:auto}.tab-icon{font-size:1.5rem}\n"], dependencies: [{ kind: "component", type: SiIconComponent, selector: "si-icon", inputs: ["icon"] }, { kind: "component", type: SiTabBadgeComponent, selector: "si-tab-badge", inputs: ["badgeContent", "badgeColor"] }, { kind: "pipe", type: SiTranslatePipe, name: "translate" }] });
208
242
  }
209
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiTabLinkComponent, decorators: [{
243
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: SiTabLinkComponent, decorators: [{
210
244
  type: Component,
211
- args: [{ selector: 'a[si-tab][routerLink]', imports: [SiIconComponent, SiTranslatePipe, SiTabBadgeComponent], providers: [{ provide: SiTabBaseDirective, useExisting: SiTabLinkComponent }], changeDetection: ChangeDetectionStrategy.OnPush, hostDirectives: [
245
+ args: [{ selector: 'a[si-tab][routerLink]', imports: [SiIconComponent, SiTranslatePipe, SiTabBadgeComponent], providers: [SiTooltipService, { provide: SiTabBaseDirective, useExisting: SiTabLinkComponent }], hostDirectives: [
212
246
  {
213
247
  directive: RouterLinkActive
214
248
  }
215
- ], template: "@let icon = this.icon();\n@if (icon) {\n <si-icon class=\"tab-icon\" [icon]=\"icon\" [attr.title]=\"heading() | translate\" />\n} @else {\n <span class=\"text-truncate\">{{ heading() | translate }}</span>\n}\n<si-tab-badge [badgeColor]=\"badgeColor()\" [badgeContent]=\"badgeContent()\" />\n@if (closable() && !disabledTab()) {\n <si-icon\n class=\"ms-2 btn btn-circle btn-sm btn-tertiary-ghost close\"\n [icon]=\"icons.elementCancel\"\n (click)=\"closeTab($event)\"\n />\n}\n\n<ng-template #tabContent>\n <ng-content />\n</ng-template>\n", styles: [":host.nav-link{flex-shrink:0;transform:translate(0)}:host.nav-link.icon-only{min-inline-size:auto}.tab-icon{font-size:1.5rem}\n"] }]
249
+ ], template: "@let icon = this.icon();\n<span class=\"text-truncate\" [class.visually-hidden]=\"!!icon\">{{ heading() | translate }}</span>\n@if (icon) {\n <si-icon class=\"tab-icon\" [icon]=\"icon\" />\n}\n<si-tab-badge [badgeColor]=\"badgeColor()\" [badgeContent]=\"badgeContent()\" />\n@if (closable() && !disabledTab()) {\n <si-icon\n class=\"ms-2 btn btn-circle btn-sm btn-tertiary-ghost close\"\n [icon]=\"icons.elementCancel\"\n (click)=\"closeTab($event)\"\n />\n}\n\n<ng-template #tabContent>\n <ng-content />\n</ng-template>\n", styles: [":host.nav-link{flex-shrink:0;transform:translate(0)}:host.nav-link.icon-only{min-inline-size:auto}.tab-icon{font-size:1.5rem}\n"] }]
216
250
  }] });
217
251
 
218
252
  /**
@@ -228,7 +262,7 @@ class SiTabsetComponent {
228
262
  * When set, the overflowing content inside the tab will automatically scroll
229
263
  * @defaultValue false
230
264
  **/
231
- contentOverflowAuto = input(false, { ...(ngDevMode ? { debugName: "contentOverflowAuto" } : {}), transform: booleanAttribute });
265
+ contentOverflowAuto = input(false, { ...(ngDevMode ? { debugName: "contentOverflowAuto" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
232
266
  icons = addIcons({ elementOptions });
233
267
  contentNode = viewChild.required('contentNode');
234
268
  /**
@@ -237,17 +271,21 @@ class SiTabsetComponent {
237
271
  *
238
272
  * @internal
239
273
  */
240
- contentPortal = computed(() => new DomPortal(this.contentNode()), ...(ngDevMode ? [{ debugName: "contentPortal" }] : []));
274
+ contentPortal = computed(() => new DomPortal(this.contentNode()), /* @ts-ignore */
275
+ ...(ngDevMode ? [{ debugName: "contentPortal" }] : /* istanbul ignore next */ []));
241
276
  /** @internal */
242
- activeTab = computed(() => this.tabPanels().find(tab => tab.active()), ...(ngDevMode ? [{ debugName: "activeTab" }] : []));
277
+ activeTab = computed(() => this.tabPanels().find(tab => tab.active()), /* @ts-ignore */
278
+ ...(ngDevMode ? [{ debugName: "activeTab" }] : /* istanbul ignore next */ []));
243
279
  /** @internal */
244
- tabPanels = contentChildren(SiTabBaseDirective, ...(ngDevMode ? [{ debugName: "tabPanels" }] : []));
280
+ tabPanels = contentChildren(SiTabBaseDirective, /* @ts-ignore */
281
+ ...(ngDevMode ? [{ debugName: "tabPanels" }] : /* istanbul ignore next */ []));
245
282
  /** @internal */
246
283
  focusKeyManager = new FocusKeyManager(this.tabPanels, inject(INJECTOR))
247
284
  .withHorizontalOrientation(isRTL() ? 'rtl' : 'ltr')
248
285
  .withWrap(true);
249
286
  /** @internal */
250
- showMenuButton = signal(false, ...(ngDevMode ? [{ debugName: "showMenuButton" }] : []));
287
+ showMenuButton = signal(false, /* @ts-ignore */
288
+ ...(ngDevMode ? [{ debugName: "showMenuButton" }] : /* istanbul ignore next */ []));
251
289
  tabIsLink(tab) {
252
290
  return tab instanceof SiTabLinkComponent;
253
291
  }
@@ -290,15 +328,15 @@ class SiTabsetComponent {
290
328
  keydown(event) {
291
329
  this.focusKeyManager.onKeydown(event);
292
330
  }
293
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiTabsetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
294
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: SiTabsetComponent, isStandalone: true, selector: "si-tabset", inputs: { contentOverflowAuto: { classPropertyName: "contentOverflowAuto", publicName: "contentOverflowAuto", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
331
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: SiTabsetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
332
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: SiTabsetComponent, isStandalone: true, selector: "si-tabset", inputs: { contentOverflowAuto: { classPropertyName: "contentOverflowAuto", publicName: "contentOverflowAuto", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
295
333
  {
296
334
  provide: SI_TABSET,
297
335
  useExisting: SiTabsetComponent
298
336
  }
299
- ], queries: [{ propertyName: "tabPanels", predicate: SiTabBaseDirective, isSignal: true }], viewQueries: [{ propertyName: "contentNode", first: true, predicate: ["contentNode"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"tabs-container\">\n <div class=\"tab-container-buttonbar-list nav nav-tabs\">\n <div\n #tabScrollContainer\n role=\"tablist\"\n tabindex=\"-1\"\n class=\"d-flex tabs-wrapper\"\n (siResizeObserver)=\"\n resizeContainer(tabScrollContainer.clientWidth, tabScrollContainer.scrollWidth)\n \"\n (keydown)=\"keydown($event)\"\n >\n <ng-content />\n </div>\n\n @if (showMenuButton()) {\n <button\n type=\"button\"\n class=\"dropdown btn btn-tertiary focus-inside\"\n tabindex=\"-1\"\n aria-hidden=\"true\"\n [cdkMenuTriggerFor]=\"tabsMenu\"\n >\n <si-icon class=\"icon m-0\" [icon]=\"icons.elementOptions\" />\n </button>\n }\n </div>\n @let tabContent = this.activeTab()?.tabContent();\n @let activeTab = this.activeTab();\n\n <div #contentNode class=\"d-contents\">\n @if (activeTab) {\n <div\n class=\"tab-content focus-inside\"\n role=\"tabpanel\"\n [id]=\"`content-${activeTab.tabId}`\"\n [class.tab-scroll]=\"contentOverflowAuto()\"\n [tabIndex]=\"contentOverflowAuto() ? '0' : null\"\n [attr.aria-labelledby]=\"`tab-${activeTab.tabId}`\"\n >\n @if (tabContent) {\n <ng-container [ngTemplateOutlet]=\"tabContent\" />\n }\n\n <ng-content select=\"router-outlet\" />\n </div>\n }\n </div>\n</div>\n\n<ng-template #tabsMenu>\n <si-menu>\n @for (tab of tabPanels(); track tab) {\n @if (tabIsLink(tab)) {\n <a\n si-menu-item\n [disabled]=\"tab.disabledTab()\"\n [icon]=\"tab.icon()\"\n [routerLink]=\"tab.routerLink.urlTree\"\n (triggered)=\"tab.selectTab(true)\"\n >\n <ng-container [ngTemplateOutlet]=\"badgeTemplate\" [ngTemplateOutletContext]=\"{ tab }\" />\n </a>\n } @else {\n <button\n type=\"button\"\n si-menu-item\n [disabled]=\"tab.disabledTab()\"\n [icon]=\"tab.icon()\"\n (triggered)=\"tab.selectTab(true)\"\n >\n <ng-container [ngTemplateOutlet]=\"badgeTemplate\" [ngTemplateOutletContext]=\"{ tab }\" />\n </button>\n }\n }\n </si-menu>\n</ng-template>\n\n<ng-template #badgeTemplate let-tab=\"tab\">\n <div class=\"d-flex align-items-center space-between flex-no-wrap justify-content-between\">\n {{ tab.heading() }}\n <si-tab-badge [badgeContent]=\"tab.badgeContent()\" [badgeColor]=\"tab.badgeColor()\" />\n </div>\n</ng-template>\n", styles: [":host{display:block;flex-direction:column}.tabs-container{display:flex;flex-direction:column;overflow:hidden;block-size:100%}.tabs-container:before{inset-block-start:38px;inset-block-end:auto}.btn.dropdown{color:var(--element-text-primary);min-inline-size:0;border-block-end:2px solid var(--element-ui-4);padding-inline:12px;flex-shrink:0}.btn.dropdown:hover{border-color:var(--element-ui-4);color:var(--element-action-secondary-text-hover)}.tab-content{flex-grow:1}.tab-scroll{flex-basis:0;overflow:auto}.tabs-wrapper{overflow-y:hidden;overflow-x:auto;scroll-behavior:smooth;scrollbar-width:none}\n"], dependencies: [{ kind: "directive", type: SiMenuDirective, selector: "si-menu" }, { kind: "component", type: SiMenuItemComponent, selector: "si-menu-item, a[si-menu-item], button[si-menu-item]" }, { kind: "directive", type: CdkMenuTrigger, selector: "[cdkMenuTriggerFor]", inputs: ["cdkMenuTriggerFor", "cdkMenuPosition", "cdkMenuTriggerData", "cdkMenuTriggerTransformOriginOn"], outputs: ["cdkMenuOpened", "cdkMenuClosed"], exportAs: ["cdkMenuTriggerFor"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: SiResizeObserverModule }, { kind: "directive", type: i1$1.SiResizeObserverDirective, selector: "[siResizeObserver]", inputs: ["resizeThrottle", "emitInitial"], outputs: ["siResizeObserver"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: SiTabBadgeComponent, selector: "si-tab-badge", inputs: ["badgeContent", "badgeColor"] }, { kind: "component", type: SiIconComponent, selector: "si-icon", inputs: ["icon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
337
+ ], queries: [{ propertyName: "tabPanels", predicate: SiTabBaseDirective, isSignal: true }], viewQueries: [{ propertyName: "contentNode", first: true, predicate: ["contentNode"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"tabs-container\">\n <div class=\"tab-container-buttonbar-list nav nav-tabs\">\n <div\n #tabScrollContainer\n role=\"tablist\"\n tabindex=\"-1\"\n class=\"d-flex tabs-wrapper\"\n (siResizeObserver)=\"\n resizeContainer(tabScrollContainer.clientWidth, tabScrollContainer.scrollWidth)\n \"\n (keydown)=\"keydown($event)\"\n >\n <ng-content />\n </div>\n\n @if (showMenuButton()) {\n <button\n type=\"button\"\n class=\"dropdown btn btn-tertiary focus-inside\"\n tabindex=\"-1\"\n aria-hidden=\"true\"\n [cdkMenuTriggerFor]=\"tabsMenu\"\n >\n <si-icon class=\"icon m-0\" [icon]=\"icons.elementOptions\" />\n </button>\n }\n </div>\n @let tabContent = this.activeTab()?.tabContent();\n @let activeTab = this.activeTab();\n\n <div #contentNode class=\"d-contents\">\n @if (activeTab) {\n <div\n class=\"tab-content focus-inside\"\n role=\"tabpanel\"\n [id]=\"`content-${activeTab.tabId}`\"\n [class.tab-scroll]=\"contentOverflowAuto()\"\n [tabIndex]=\"contentOverflowAuto() ? '0' : null\"\n [attr.aria-labelledby]=\"`tab-${activeTab.tabId}`\"\n >\n @if (tabContent) {\n <ng-container [ngTemplateOutlet]=\"tabContent\" />\n }\n\n <ng-content select=\"router-outlet\" />\n </div>\n }\n </div>\n</div>\n\n<ng-template #tabsMenu>\n <si-menu>\n @for (tab of tabPanels(); track tab) {\n @if (tabIsLink(tab)) {\n <a\n si-menu-item\n [disabled]=\"tab.disabledTab()\"\n [icon]=\"tab.icon()\"\n [routerLink]=\"tab.routerLink.urlTree\"\n (triggered)=\"tab.selectTab(true)\"\n >\n <ng-container [ngTemplateOutlet]=\"badgeTemplate\" [ngTemplateOutletContext]=\"{ tab }\" />\n </a>\n } @else {\n <button\n type=\"button\"\n si-menu-item\n [disabled]=\"tab.disabledTab()\"\n [icon]=\"tab.icon()\"\n (triggered)=\"tab.selectTab(true)\"\n >\n <ng-container [ngTemplateOutlet]=\"badgeTemplate\" [ngTemplateOutletContext]=\"{ tab }\" />\n </button>\n }\n }\n </si-menu>\n</ng-template>\n\n<ng-template #badgeTemplate let-tab=\"tab\">\n <div class=\"d-flex align-items-center space-between flex-no-wrap justify-content-between\">\n {{ tab.heading() }}\n <si-tab-badge [badgeContent]=\"tab.badgeContent()\" [badgeColor]=\"tab.badgeColor()\" />\n </div>\n</ng-template>\n", styles: [":host{display:block;flex-direction:column}.tabs-container{display:flex;flex-direction:column;overflow:hidden;block-size:100%}.tabs-container:before{inset-block-start:38px;inset-block-end:auto}.btn.dropdown{color:var(--element-text-primary);min-inline-size:0;border-block-end:2px solid var(--element-ui-4);padding-inline:12px;flex-shrink:0}.btn.dropdown:hover{border-color:var(--element-ui-4);color:var(--element-action-secondary-text-hover)}.tab-content{flex-grow:1}.tab-scroll{flex-basis:0;overflow:auto}.tabs-wrapper{overflow-y:hidden;overflow-x:auto;scroll-behavior:smooth;scrollbar-width:none}\n"], dependencies: [{ kind: "directive", type: SiMenuDirective, selector: "si-menu" }, { kind: "component", type: SiMenuItemComponent, selector: "si-menu-item, a[si-menu-item], button[si-menu-item]" }, { kind: "directive", type: CdkMenuTrigger, selector: "[cdkMenuTriggerFor]", inputs: ["cdkMenuTriggerFor", "cdkMenuPosition", "cdkMenuTriggerData", "cdkMenuTriggerTransformOriginOn"], outputs: ["cdkMenuOpened", "cdkMenuClosed"], exportAs: ["cdkMenuTriggerFor"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: SiResizeObserverModule }, { kind: "directive", type: i1$1.SiResizeObserverDirective, selector: "[siResizeObserver]", inputs: ["resizeThrottle", "emitInitial"], outputs: ["siResizeObserver"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "browserUrl", "routerLink"] }, { kind: "component", type: SiTabBadgeComponent, selector: "si-tab-badge", inputs: ["badgeContent", "badgeColor"] }, { kind: "component", type: SiIconComponent, selector: "si-icon", inputs: ["icon"] }] });
300
338
  }
301
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiTabsetComponent, decorators: [{
339
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: SiTabsetComponent, decorators: [{
302
340
  type: Component,
303
341
  args: [{ selector: 'si-tabset', imports: [
304
342
  SiMenuDirective,
@@ -314,7 +352,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
314
352
  provide: SI_TABSET,
315
353
  useExisting: SiTabsetComponent
316
354
  }
317
- ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"tabs-container\">\n <div class=\"tab-container-buttonbar-list nav nav-tabs\">\n <div\n #tabScrollContainer\n role=\"tablist\"\n tabindex=\"-1\"\n class=\"d-flex tabs-wrapper\"\n (siResizeObserver)=\"\n resizeContainer(tabScrollContainer.clientWidth, tabScrollContainer.scrollWidth)\n \"\n (keydown)=\"keydown($event)\"\n >\n <ng-content />\n </div>\n\n @if (showMenuButton()) {\n <button\n type=\"button\"\n class=\"dropdown btn btn-tertiary focus-inside\"\n tabindex=\"-1\"\n aria-hidden=\"true\"\n [cdkMenuTriggerFor]=\"tabsMenu\"\n >\n <si-icon class=\"icon m-0\" [icon]=\"icons.elementOptions\" />\n </button>\n }\n </div>\n @let tabContent = this.activeTab()?.tabContent();\n @let activeTab = this.activeTab();\n\n <div #contentNode class=\"d-contents\">\n @if (activeTab) {\n <div\n class=\"tab-content focus-inside\"\n role=\"tabpanel\"\n [id]=\"`content-${activeTab.tabId}`\"\n [class.tab-scroll]=\"contentOverflowAuto()\"\n [tabIndex]=\"contentOverflowAuto() ? '0' : null\"\n [attr.aria-labelledby]=\"`tab-${activeTab.tabId}`\"\n >\n @if (tabContent) {\n <ng-container [ngTemplateOutlet]=\"tabContent\" />\n }\n\n <ng-content select=\"router-outlet\" />\n </div>\n }\n </div>\n</div>\n\n<ng-template #tabsMenu>\n <si-menu>\n @for (tab of tabPanels(); track tab) {\n @if (tabIsLink(tab)) {\n <a\n si-menu-item\n [disabled]=\"tab.disabledTab()\"\n [icon]=\"tab.icon()\"\n [routerLink]=\"tab.routerLink.urlTree\"\n (triggered)=\"tab.selectTab(true)\"\n >\n <ng-container [ngTemplateOutlet]=\"badgeTemplate\" [ngTemplateOutletContext]=\"{ tab }\" />\n </a>\n } @else {\n <button\n type=\"button\"\n si-menu-item\n [disabled]=\"tab.disabledTab()\"\n [icon]=\"tab.icon()\"\n (triggered)=\"tab.selectTab(true)\"\n >\n <ng-container [ngTemplateOutlet]=\"badgeTemplate\" [ngTemplateOutletContext]=\"{ tab }\" />\n </button>\n }\n }\n </si-menu>\n</ng-template>\n\n<ng-template #badgeTemplate let-tab=\"tab\">\n <div class=\"d-flex align-items-center space-between flex-no-wrap justify-content-between\">\n {{ tab.heading() }}\n <si-tab-badge [badgeContent]=\"tab.badgeContent()\" [badgeColor]=\"tab.badgeColor()\" />\n </div>\n</ng-template>\n", styles: [":host{display:block;flex-direction:column}.tabs-container{display:flex;flex-direction:column;overflow:hidden;block-size:100%}.tabs-container:before{inset-block-start:38px;inset-block-end:auto}.btn.dropdown{color:var(--element-text-primary);min-inline-size:0;border-block-end:2px solid var(--element-ui-4);padding-inline:12px;flex-shrink:0}.btn.dropdown:hover{border-color:var(--element-ui-4);color:var(--element-action-secondary-text-hover)}.tab-content{flex-grow:1}.tab-scroll{flex-basis:0;overflow:auto}.tabs-wrapper{overflow-y:hidden;overflow-x:auto;scroll-behavior:smooth;scrollbar-width:none}\n"] }]
355
+ ], template: "<div class=\"tabs-container\">\n <div class=\"tab-container-buttonbar-list nav nav-tabs\">\n <div\n #tabScrollContainer\n role=\"tablist\"\n tabindex=\"-1\"\n class=\"d-flex tabs-wrapper\"\n (siResizeObserver)=\"\n resizeContainer(tabScrollContainer.clientWidth, tabScrollContainer.scrollWidth)\n \"\n (keydown)=\"keydown($event)\"\n >\n <ng-content />\n </div>\n\n @if (showMenuButton()) {\n <button\n type=\"button\"\n class=\"dropdown btn btn-tertiary focus-inside\"\n tabindex=\"-1\"\n aria-hidden=\"true\"\n [cdkMenuTriggerFor]=\"tabsMenu\"\n >\n <si-icon class=\"icon m-0\" [icon]=\"icons.elementOptions\" />\n </button>\n }\n </div>\n @let tabContent = this.activeTab()?.tabContent();\n @let activeTab = this.activeTab();\n\n <div #contentNode class=\"d-contents\">\n @if (activeTab) {\n <div\n class=\"tab-content focus-inside\"\n role=\"tabpanel\"\n [id]=\"`content-${activeTab.tabId}`\"\n [class.tab-scroll]=\"contentOverflowAuto()\"\n [tabIndex]=\"contentOverflowAuto() ? '0' : null\"\n [attr.aria-labelledby]=\"`tab-${activeTab.tabId}`\"\n >\n @if (tabContent) {\n <ng-container [ngTemplateOutlet]=\"tabContent\" />\n }\n\n <ng-content select=\"router-outlet\" />\n </div>\n }\n </div>\n</div>\n\n<ng-template #tabsMenu>\n <si-menu>\n @for (tab of tabPanels(); track tab) {\n @if (tabIsLink(tab)) {\n <a\n si-menu-item\n [disabled]=\"tab.disabledTab()\"\n [icon]=\"tab.icon()\"\n [routerLink]=\"tab.routerLink.urlTree\"\n (triggered)=\"tab.selectTab(true)\"\n >\n <ng-container [ngTemplateOutlet]=\"badgeTemplate\" [ngTemplateOutletContext]=\"{ tab }\" />\n </a>\n } @else {\n <button\n type=\"button\"\n si-menu-item\n [disabled]=\"tab.disabledTab()\"\n [icon]=\"tab.icon()\"\n (triggered)=\"tab.selectTab(true)\"\n >\n <ng-container [ngTemplateOutlet]=\"badgeTemplate\" [ngTemplateOutletContext]=\"{ tab }\" />\n </button>\n }\n }\n </si-menu>\n</ng-template>\n\n<ng-template #badgeTemplate let-tab=\"tab\">\n <div class=\"d-flex align-items-center space-between flex-no-wrap justify-content-between\">\n {{ tab.heading() }}\n <si-tab-badge [badgeContent]=\"tab.badgeContent()\" [badgeColor]=\"tab.badgeColor()\" />\n </div>\n</ng-template>\n", styles: [":host{display:block;flex-direction:column}.tabs-container{display:flex;flex-direction:column;overflow:hidden;block-size:100%}.tabs-container:before{inset-block-start:38px;inset-block-end:auto}.btn.dropdown{color:var(--element-text-primary);min-inline-size:0;border-block-end:2px solid var(--element-ui-4);padding-inline:12px;flex-shrink:0}.btn.dropdown:hover{border-color:var(--element-ui-4);color:var(--element-action-secondary-text-hover)}.tab-content{flex-grow:1}.tab-scroll{flex-basis:0;overflow:auto}.tabs-wrapper{overflow-y:hidden;overflow-x:auto;scroll-behavior:smooth;scrollbar-width:none}\n"] }]
318
356
  }], ctorParameters: () => [], propDecorators: { contentOverflowAuto: [{ type: i0.Input, args: [{ isSignal: true, alias: "contentOverflowAuto", required: false }] }], contentNode: [{ type: i0.ViewChild, args: ['contentNode', { isSignal: true }] }], tabPanels: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => SiTabBaseDirective), { isSignal: true }] }] } });
319
357
 
320
358
  /**
@@ -339,17 +377,20 @@ class SiTabComponent extends SiTabBaseDirective {
339
377
  * If set to `true`, the tab will be selected and its content will be displayed.
340
378
  * @defaultValue false
341
379
  * */
342
- active = model(false, ...(ngDevMode ? [{ debugName: "active" }] : []));
380
+ active = model(false, /* @ts-ignore */
381
+ ...(ngDevMode ? [{ debugName: "active" }] : /* istanbul ignore next */ []));
343
382
  /**
344
383
  * Guard to check if the tab can be activated.
345
384
  * If not provided, the tab can always be activated.
346
385
  */
347
- canActivate = input(...(ngDevMode ? [undefined, { debugName: "canActivate" }] : []));
386
+ canActivate = input(/* @ts-ignore */
387
+ ...(ngDevMode ? [undefined, { debugName: "canActivate" }] : /* istanbul ignore next */ []));
348
388
  /**
349
389
  * Guard to check if the tab can be deactivated.
350
390
  * If not provided, the tab can always be deactivated.
351
391
  */
352
- canDeactivate = input(...(ngDevMode ? [undefined, { debugName: "canDeactivate" }] : []));
392
+ canDeactivate = input(/* @ts-ignore */
393
+ ...(ngDevMode ? [undefined, { debugName: "canDeactivate" }] : /* istanbul ignore next */ []));
353
394
  selectTabByUser() {
354
395
  const canActivate = this.canActivate();
355
396
  if (!this.active() && (canActivate ? canActivate() : true)) {
@@ -373,15 +414,15 @@ class SiTabComponent extends SiTabBaseDirective {
373
414
  deSelectTab() {
374
415
  this.active.set(false);
375
416
  }
376
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiTabComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
377
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: SiTabComponent, isStandalone: true, selector: "si-tab", inputs: { active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null }, canActivate: { classPropertyName: "canActivate", publicName: "canActivate", isSignal: true, isRequired: false, transformFunction: null }, canDeactivate: { classPropertyName: "canDeactivate", publicName: "canDeactivate", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { active: "activeChange" }, host: { listeners: { "click": "selectTabByUser()", "keydown.enter": "selectTabByUser()" } }, providers: [{ provide: SiTabBaseDirective, useExisting: SiTabComponent }], usesInheritance: true, ngImport: i0, template: "@let icon = this.icon();\n@if (icon) {\n <si-icon class=\"tab-icon\" [icon]=\"icon\" [attr.title]=\"heading() | translate\" />\n} @else {\n <span class=\"text-truncate\">{{ heading() | translate }}</span>\n}\n<si-tab-badge [badgeColor]=\"badgeColor()\" [badgeContent]=\"badgeContent()\" />\n@if (closable() && !disabledTab()) {\n <si-icon\n class=\"ms-2 btn btn-circle btn-sm btn-tertiary-ghost close\"\n [icon]=\"icons.elementCancel\"\n (click)=\"closeTab($event)\"\n />\n}\n\n<ng-template #tabContent>\n <ng-content />\n</ng-template>\n", styles: [":host.nav-link{flex-shrink:0;transform:translate(0)}:host.nav-link.icon-only{min-inline-size:auto}.tab-icon{font-size:1.5rem}\n"], dependencies: [{ kind: "component", type: SiIconComponent, selector: "si-icon", inputs: ["icon"] }, { kind: "component", type: SiTabBadgeComponent, selector: "si-tab-badge", inputs: ["badgeContent", "badgeColor"] }, { kind: "pipe", type: SiTranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
417
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: SiTabComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
418
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: SiTabComponent, isStandalone: true, selector: "si-tab", inputs: { active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null }, canActivate: { classPropertyName: "canActivate", publicName: "canActivate", isSignal: true, isRequired: false, transformFunction: null }, canDeactivate: { classPropertyName: "canDeactivate", publicName: "canDeactivate", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { active: "activeChange" }, host: { listeners: { "click": "selectTabByUser()", "keydown.enter": "selectTabByUser()" } }, providers: [SiTooltipService, { provide: SiTabBaseDirective, useExisting: SiTabComponent }], usesInheritance: true, ngImport: i0, template: "@let icon = this.icon();\n<span class=\"text-truncate\" [class.visually-hidden]=\"!!icon\">{{ heading() | translate }}</span>\n@if (icon) {\n <si-icon class=\"tab-icon\" [icon]=\"icon\" />\n}\n<si-tab-badge [badgeColor]=\"badgeColor()\" [badgeContent]=\"badgeContent()\" />\n@if (closable() && !disabledTab()) {\n <si-icon\n class=\"ms-2 btn btn-circle btn-sm btn-tertiary-ghost close\"\n [icon]=\"icons.elementCancel\"\n (click)=\"closeTab($event)\"\n />\n}\n\n<ng-template #tabContent>\n <ng-content />\n</ng-template>\n", styles: [":host.nav-link{flex-shrink:0;transform:translate(0)}:host.nav-link.icon-only{min-inline-size:auto}.tab-icon{font-size:1.5rem}\n"], dependencies: [{ kind: "component", type: SiIconComponent, selector: "si-icon", inputs: ["icon"] }, { kind: "component", type: SiTabBadgeComponent, selector: "si-tab-badge", inputs: ["badgeContent", "badgeColor"] }, { kind: "pipe", type: SiTranslatePipe, name: "translate" }] });
378
419
  }
379
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiTabComponent, decorators: [{
420
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: SiTabComponent, decorators: [{
380
421
  type: Component,
381
- args: [{ selector: 'si-tab', imports: [SiIconComponent, SiTranslatePipe, SiTabBadgeComponent], providers: [{ provide: SiTabBaseDirective, useExisting: SiTabComponent }], changeDetection: ChangeDetectionStrategy.OnPush, host: {
422
+ args: [{ selector: 'si-tab', imports: [SiIconComponent, SiTranslatePipe, SiTabBadgeComponent], providers: [SiTooltipService, { provide: SiTabBaseDirective, useExisting: SiTabComponent }], host: {
382
423
  '(click)': 'selectTabByUser()',
383
424
  '(keydown.enter)': 'selectTabByUser()'
384
- }, template: "@let icon = this.icon();\n@if (icon) {\n <si-icon class=\"tab-icon\" [icon]=\"icon\" [attr.title]=\"heading() | translate\" />\n} @else {\n <span class=\"text-truncate\">{{ heading() | translate }}</span>\n}\n<si-tab-badge [badgeColor]=\"badgeColor()\" [badgeContent]=\"badgeContent()\" />\n@if (closable() && !disabledTab()) {\n <si-icon\n class=\"ms-2 btn btn-circle btn-sm btn-tertiary-ghost close\"\n [icon]=\"icons.elementCancel\"\n (click)=\"closeTab($event)\"\n />\n}\n\n<ng-template #tabContent>\n <ng-content />\n</ng-template>\n", styles: [":host.nav-link{flex-shrink:0;transform:translate(0)}:host.nav-link.icon-only{min-inline-size:auto}.tab-icon{font-size:1.5rem}\n"] }]
425
+ }, template: "@let icon = this.icon();\n<span class=\"text-truncate\" [class.visually-hidden]=\"!!icon\">{{ heading() | translate }}</span>\n@if (icon) {\n <si-icon class=\"tab-icon\" [icon]=\"icon\" />\n}\n<si-tab-badge [badgeColor]=\"badgeColor()\" [badgeContent]=\"badgeContent()\" />\n@if (closable() && !disabledTab()) {\n <si-icon\n class=\"ms-2 btn btn-circle btn-sm btn-tertiary-ghost close\"\n [icon]=\"icons.elementCancel\"\n (click)=\"closeTab($event)\"\n />\n}\n\n<ng-template #tabContent>\n <ng-content />\n</ng-template>\n", styles: [":host.nav-link{flex-shrink:0;transform:translate(0)}:host.nav-link.icon-only{min-inline-size:auto}.tab-icon{font-size:1.5rem}\n"] }]
385
426
  }], propDecorators: { active: [{ type: i0.Input, args: [{ isSignal: true, alias: "active", required: false }] }, { type: i0.Output, args: ["activeChange"] }], canActivate: [{ type: i0.Input, args: [{ isSignal: true, alias: "canActivate", required: false }] }], canDeactivate: [{ type: i0.Input, args: [{ isSignal: true, alias: "canDeactivate", required: false }] }] } });
386
427
 
387
428
  /**
@@ -418,17 +459,17 @@ class SiTabPortalComponent {
418
459
  * The tabset's tab panel container, including the `role="tabpanel"` element
419
460
  * with proper ARIA attributes, is transported to this component's location.
420
461
  */
421
- tabset = input.required(...(ngDevMode ? [{ debugName: "tabset" }] : []));
422
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiTabPortalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
423
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.8", type: SiTabPortalComponent, isStandalone: true, selector: "si-tab-portal", inputs: { tabset: { classPropertyName: "tabset", publicName: "tabset", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: ` <ng-template [cdkPortalOutlet]="tabset().contentPortal()" /> `, isInline: true, dependencies: [{ kind: "directive", type: CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
462
+ tabset = input.required(/* @ts-ignore */
463
+ ...(ngDevMode ? [{ debugName: "tabset" }] : /* istanbul ignore next */ []));
464
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: SiTabPortalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
465
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.5", type: SiTabPortalComponent, isStandalone: true, selector: "si-tab-portal", inputs: { tabset: { classPropertyName: "tabset", publicName: "tabset", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: ` <ng-template [cdkPortalOutlet]="tabset().contentPortal()" /> `, isInline: true, dependencies: [{ kind: "directive", type: CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }] });
424
466
  }
425
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiTabPortalComponent, decorators: [{
467
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: SiTabPortalComponent, decorators: [{
426
468
  type: Component,
427
469
  args: [{
428
470
  selector: 'si-tab-portal',
429
471
  imports: [CdkPortalOutlet],
430
- template: ` <ng-template [cdkPortalOutlet]="tabset().contentPortal()" /> `,
431
- changeDetection: ChangeDetectionStrategy.OnPush
472
+ template: ` <ng-template [cdkPortalOutlet]="tabset().contentPortal()" /> `
432
473
  }]
433
474
  }], propDecorators: { tabset: [{ type: i0.Input, args: [{ isSignal: true, alias: "tabset", required: true }] }] } });
434
475