@siemens/element-ng 47.5.0 → 47.6.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (79) hide show
  1. package/breadcrumb-router/index.d.ts +8 -0
  2. package/breadcrumb-router/package.json +3 -0
  3. package/breadcrumb-router/si-breadcrumb-default-resolver.service.d.ts +23 -0
  4. package/breadcrumb-router/si-breadcrumb-router.component.d.ts +30 -0
  5. package/breadcrumb-router/si-breadcrumb-router.model.d.ts +53 -0
  6. package/breadcrumb-router/si-breadcrumb-router.module.d.ts +7 -0
  7. package/date-range-filter/si-date-range-filter.component.d.ts +5 -1
  8. package/fesm2022/siemens-element-ng-breadcrumb-router.mjs +263 -0
  9. package/fesm2022/siemens-element-ng-breadcrumb-router.mjs.map +1 -0
  10. package/fesm2022/siemens-element-ng-breadcrumb.mjs +1 -1
  11. package/fesm2022/siemens-element-ng-breadcrumb.mjs.map +1 -1
  12. package/fesm2022/siemens-element-ng-date-range-filter.mjs +26 -5
  13. package/fesm2022/siemens-element-ng-date-range-filter.mjs.map +1 -1
  14. package/fesm2022/siemens-element-ng-formly.mjs +2 -2
  15. package/fesm2022/siemens-element-ng-formly.mjs.map +1 -1
  16. package/fesm2022/siemens-element-ng-icon.mjs +8 -22
  17. package/fesm2022/siemens-element-ng-icon.mjs.map +1 -1
  18. package/fesm2022/siemens-element-ng-main-detail-container.mjs +269 -0
  19. package/fesm2022/siemens-element-ng-main-detail-container.mjs.map +1 -0
  20. package/fesm2022/siemens-element-ng-modal.mjs +1 -1
  21. package/fesm2022/siemens-element-ng-modal.mjs.map +1 -1
  22. package/fesm2022/siemens-element-ng-navbar-vertical.mjs +802 -0
  23. package/fesm2022/siemens-element-ng-navbar-vertical.mjs.map +1 -0
  24. package/fesm2022/siemens-element-ng-resize-observer.mjs +6 -3
  25. package/fesm2022/siemens-element-ng-resize-observer.mjs.map +1 -1
  26. package/fesm2022/siemens-element-ng-side-panel.mjs +1 -1
  27. package/fesm2022/siemens-element-ng-side-panel.mjs.map +1 -1
  28. package/fesm2022/siemens-element-ng-status-bar.mjs +1 -1
  29. package/fesm2022/siemens-element-ng-status-bar.mjs.map +1 -1
  30. package/fesm2022/siemens-element-ng-tabs-next.mjs +29 -164
  31. package/fesm2022/siemens-element-ng-tabs-next.mjs.map +1 -1
  32. package/fesm2022/siemens-element-ng-tabs.mjs +1 -1
  33. package/fesm2022/siemens-element-ng-tabs.mjs.map +1 -1
  34. package/fesm2022/siemens-element-ng-threshold.mjs +319 -0
  35. package/fesm2022/siemens-element-ng-threshold.mjs.map +1 -0
  36. package/fesm2022/siemens-element-ng-tour.mjs +384 -0
  37. package/fesm2022/siemens-element-ng-tour.mjs.map +1 -0
  38. package/fesm2022/siemens-element-ng-translate.mjs.map +1 -1
  39. package/fesm2022/siemens-element-ng-tree-view.mjs +1 -1
  40. package/fesm2022/siemens-element-ng-tree-view.mjs.map +1 -1
  41. package/fesm2022/siemens-element-ng-wizard.mjs +1 -1
  42. package/fesm2022/siemens-element-ng-wizard.mjs.map +1 -1
  43. package/icon/si-status-icon.component.d.ts +1 -6
  44. package/main-detail-container/index.d.ts +6 -0
  45. package/main-detail-container/package.json +3 -0
  46. package/main-detail-container/si-main-detail-container.component.d.ts +151 -0
  47. package/main-detail-container/si-main-detail-container.module.d.ts +7 -0
  48. package/navbar-vertical/index.d.ts +7 -0
  49. package/navbar-vertical/package.json +3 -0
  50. package/navbar-vertical/si-navbar-vertical-divider.component.d.ts +5 -0
  51. package/navbar-vertical/si-navbar-vertical-group-trigger.directive.d.ts +38 -0
  52. package/navbar-vertical/si-navbar-vertical-group.component.d.ts +16 -0
  53. package/navbar-vertical/si-navbar-vertical-header.component.d.ts +6 -0
  54. package/navbar-vertical/si-navbar-vertical-item-legacy.component.d.ts +17 -0
  55. package/navbar-vertical/si-navbar-vertical-item.component.d.ts +21 -0
  56. package/navbar-vertical/si-navbar-vertical.component.d.ts +148 -0
  57. package/navbar-vertical/si-navbar-vertical.model.d.ts +77 -0
  58. package/navbar-vertical/si-navbar-vertical.module.d.ts +7 -0
  59. package/navbar-vertical/si-navbar-vertical.provider.d.ts +7 -0
  60. package/package.json +24 -4
  61. package/resize-observer/si-resize-observer.directive.d.ts +3 -1
  62. package/tabs-next/si-tab-next-base.directive.d.ts +2 -5
  63. package/tabs-next/si-tab-next-link.component.d.ts +0 -2
  64. package/tabs-next/si-tabset-next.component.d.ts +3 -18
  65. package/template-i18n.json +16 -0
  66. package/threshold/index.d.ts +6 -0
  67. package/threshold/package.json +3 -0
  68. package/threshold/si-readonly-threshold-option.component.d.ts +11 -0
  69. package/threshold/si-threshold.component.d.ts +147 -0
  70. package/threshold/si-threshold.module.d.ts +7 -0
  71. package/tour/index.d.ts +6 -0
  72. package/tour/package.json +3 -0
  73. package/tour/si-tour-highlight.component.d.ts +15 -0
  74. package/tour/si-tour-token.model.d.ts +27 -0
  75. package/tour/si-tour.component.d.ts +31 -0
  76. package/tour/si-tour.model.d.ts +51 -0
  77. package/tour/si-tour.service.d.ts +62 -0
  78. package/translate/si-translatable-keys.interface.d.ts +16 -0
  79. package/tree-view/si-tree-view.component.d.ts +1 -1
@@ -1 +1 @@
1
- {"version":3,"file":"siemens-element-ng-status-bar.mjs","sources":["../../../../projects/element-ng/status-bar/si-status-bar-item/si-status-bar-item.component.ts","../../../../projects/element-ng/status-bar/si-status-bar-item/si-status-bar-item.component.html","../../../../projects/element-ng/status-bar/si-status-bar.component.ts","../../../../projects/element-ng/status-bar/si-status-bar.component.html","../../../../projects/element-ng/status-bar/si-status-bar.module.ts","../../../../projects/element-ng/status-bar/si-status-bar-item/index.ts","../../../../projects/element-ng/status-bar/index.ts","../../../../projects/element-ng/status-bar/siemens-element-ng-status-bar.ts"],"sourcesContent":["/**\n * Copyright Siemens 2016 - 2025.\n * SPDX-License-Identifier: MIT\n */\nimport { NgClass } from '@angular/common';\nimport {\n booleanAttribute,\n Component,\n computed,\n ElementRef,\n inject,\n input,\n viewChild\n} from '@angular/core';\nimport { ExtendedStatusType } from '@siemens/element-ng/common';\nimport { SiIconNextComponent, STATUS_ICON_CONFIG } from '@siemens/element-ng/icon';\nimport { SiTranslateModule } from '@siemens/element-translate-ng/translate';\n\n@Component({\n selector: 'si-status-bar-item',\n templateUrl: './si-status-bar-item.component.html',\n styleUrl: './si-status-bar-item.component.scss',\n imports: [NgClass, SiIconNextComponent, SiTranslateModule],\n host: {\n '[class.clickable]': 'clickable()'\n }\n})\nexport class SiStatusBarItemComponent {\n private readonly statusIcons = inject(STATUS_ICON_CONFIG);\n readonly status = input<ExtendedStatusType>();\n readonly value = input.required<string | number>();\n readonly heading = input.required<string>();\n readonly color = input<string>();\n /** @defaultValue false */\n readonly blink = input(false, { transform: booleanAttribute });\n /** @defaultValue false */\n readonly valueOnly = input<boolean | undefined, unknown>(false, { transform: booleanAttribute });\n /** @defaultValue false */\n readonly clickable = input(false, { transform: booleanAttribute });\n\n private readonly bg = viewChild.required<ElementRef>('bg');\n\n protected readonly contrastFix = computed(() => {\n return !!this.color() && this.blink() && this.calculateContrastFix();\n });\n protected readonly statusIcon = computed(() => {\n const status = this.status();\n return status ? this.statusIcons[status] : undefined;\n });\n protected readonly background = computed(() =>\n this.blink() && this.status() !== 'success' ? (this.statusIcon()?.background ?? '') : ''\n );\n\n private calculateContrastFix(): boolean {\n // see https://www.w3.org/TR/AERT/#color-contrast\n const rgb = getComputedStyle(this.bg().nativeElement)\n .backgroundColor?.match(/\\d+/g)\n ?.map(v => +v);\n return !!rgb && Math.round((rgb[0] * 299 + rgb[1] * 587 + rgb[2] * 114) / 1000) <= 128;\n }\n}\n","<div\n class=\"status-item rounded-2 focus-inside d-flex align-items-center\"\n [class.text-muted]=\"!value()\"\n [class.blink]=\"blink() && value()\"\n [attr.tabindex]=\"clickable() ? '0' : ''\"\n [attr.aria-disabled]=\"!value()\"\n>\n <div\n #bg\n role=\"none\"\n class=\"bg focus-sub-inside\"\n [class.custom-color]=\"color()\"\n [class.contrast-fix]=\"contrastFix()\"\n [ngClass]=\"background()\"\n [class.d-none]=\"!value()\"\n [style.background-color]=\"blink() && color() ? color() : null\"\n ></div>\n @let icon = statusIcon();\n @if (!icon) {\n <div\n class=\"color-bar me-3 mt-1 mb-1\"\n [style.background-color]=\"value() && color() ? color() : null\"\n ></div>\n }\n @if (icon) {\n <span class=\"indicator icon me-4 icon-stack\">\n <si-icon-next [ngClass]=\"value() ? icon.color : 'indicator-disabled'\" [icon]=\"icon.icon\" />\n <si-icon-next\n [ngClass]=\"value() ? icon.stackedColor : 'text-inverse'\"\n [icon]=\"icon.stacked\"\n />\n </span>\n }\n <div class=\"overflow-hidden\">\n @if (value() !== undefined) {\n <div class=\"item-value si-title-2 text-truncate\">{{ value().toString() | translate }}</div>\n }\n @if (!valueOnly()) {\n <div class=\"item-title text-truncate\">{{ heading() | translate }}</div>\n }\n </div>\n</div>\n","/**\n * Copyright Siemens 2016 - 2025.\n * SPDX-License-Identifier: MIT\n */\n/* eslint-disable @angular-eslint/no-conflicting-lifecycle */\nimport { NgClass, NgTemplateOutlet } from '@angular/common';\nimport {\n booleanAttribute,\n ChangeDetectionStrategy,\n Component,\n DestroyRef,\n DoCheck,\n ElementRef,\n inject,\n input,\n OnChanges,\n OnDestroy,\n output,\n signal,\n SimpleChanges,\n viewChild\n} from '@angular/core';\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\nimport { BlinkService, STATUS_ICON, TextMeasureService } from '@siemens/element-ng/common';\nimport {\n elementDown2,\n elementSoundMute,\n elementSoundOn,\n addIcons,\n SiIconNextComponent\n} from '@siemens/element-ng/icon';\nimport {\n ResizeObserverService,\n SiResizeObserverDirective\n} from '@siemens/element-ng/resize-observer';\nimport { SiTranslateModule, SiTranslateService } from '@siemens/element-translate-ng/translate';\nimport { Observable, Subscription } from 'rxjs';\nimport { first } from 'rxjs/operators';\n\nimport { SiStatusBarItemComponent } from './si-status-bar-item/si-status-bar-item.component';\nimport { StatusBarItem } from './si-status-bar-item/si-status-bar-item.model';\n\ninterface ExtendedStatusBarItem extends StatusBarItem {\n isSpecial?: boolean;\n mutePadding?: boolean;\n}\n\n// this is a function because Angular compiler exports arrows for no good reason\n// eslint-disable-next-line prefer-arrow/prefer-arrow-functions\nfunction itemSortFunction(a: StatusBarItem, b: StatusBarItem): number {\n return a.status && b.status ? STATUS_ICON[a.status].severity - STATUS_ICON[b.status].severity : 0;\n}\n\nlet idCounter = 1;\n\n/**\n * The status bar is the main component within an application to inform users at all times\n * about important status information.\n */\n@Component({\n selector: 'si-status-bar',\n changeDetection: ChangeDetectionStrategy.OnPush,\n templateUrl: './si-status-bar.component.html',\n styleUrl: './si-status-bar.component.scss',\n imports: [\n NgClass,\n NgTemplateOutlet,\n SiIconNextComponent,\n SiStatusBarItemComponent,\n SiResizeObserverDirective,\n SiTranslateModule\n ]\n})\nexport class SiStatusBarComponent implements DoCheck, OnDestroy, OnChanges {\n private static readonly itemMinWidth = 100;\n private static readonly itemMaxWidth = 152;\n private static readonly itemSpacing = 4;\n private static readonly itemPaddingX = 44; // padding + icon size + icon margin\n private static readonly itemPaddingXdeprecated = 20; // padding + color bar\n private static readonly muteButtonWidth = 48;\n\n /**\n * Array of status bar items.\n */\n readonly items = input.required<StatusBarItem[]>();\n /**\n * When true, items with a value have a blinking background\n *\n * @defaultValue false\n */\n readonly blink = input(false, { transform: booleanAttribute });\n /**\n * State of the mute button. Set to `undefined` for no button.\n */\n readonly muteButton = input<boolean>();\n /**\n * Text/translation key on mute button for screen reader\n *\n * @defaultValue\n * ```\n * $localize`:@@SI_STATUS_BAR.MUTE:Mute/unmute`\n * ```\n */\n readonly muteButtonText = input($localize`:@@SI_STATUS_BAR.MUTE:Mute/unmute`);\n /**\n * Text/translation key for \"All OK\" status in mobile\n *\n * @defaultValue\n * ```\n * $localize`:@@SI_STATUS_BAR.ALL_OK:All OK`\n * ```\n */\n readonly allOkText = input($localize`:@@SI_STATUS_BAR.ALL_OK:All OK`);\n /**\n * compact mode\n *\n * @defaultValue false\n */\n readonly compact = input(false, { transform: booleanAttribute });\n /**\n * blink pulse generator for synchronized blinking with other components\n */\n readonly blinkPulse = input<Observable<boolean>>();\n /**\n * Text for the navbar expand button. Required for a11y\n *\n * @defaultValue\n * ```\n * $localize`:@@SI_STATUS_BAR.EXPAND:Expand`\n * ```\n */\n readonly expandButtonText = input($localize`:@@SI_STATUS_BAR.EXPAND:Expand`);\n /**\n * Text for the navbar collapse button. Required for a11y\n *\n * @defaultValue\n * ```\n * $localize`:@@SI_STATUS_BAR.COLLAPSE:Collapse`\n * ```\n */\n readonly collapseButtonText = input($localize`:@@SI_STATUS_BAR.COLLAPSE:Collapse`);\n\n /**\n * Emitted when the mute toggle button is clicked\n */\n readonly muteToggle = output();\n\n private readonly theBar = viewChild.required<ElementRef>('thebar');\n private readonly content = viewChild.required<ElementRef>('content');\n private readonly custom = viewChild.required<ElementRef>('custom');\n\n protected readonly responsiveItems = signal<ExtendedStatusBarItem[]>([]);\n protected responsiveMode = 0;\n protected readonly expanded = signal(0);\n protected readonly placeholderHeight = signal(0);\n protected readonly contentHeight = signal<number | undefined>(undefined);\n protected readonly blinkOnOff = signal<boolean | undefined>(undefined);\n protected readonly icons = addIcons({ elementDown2, elementSoundMute, elementSoundOn });\n protected statusId = `__si-status-bar-${idCounter++}`;\n\n private timer: any;\n\n private blinkSubs?: Subscription;\n\n private readonly element = inject(ElementRef);\n private readonly blinkService = inject(BlinkService);\n private readonly translateService = inject(SiTranslateService);\n private readonly resizeObserver = inject(ResizeObserverService);\n private readonly measureService = inject(TextMeasureService);\n private readonly destroyRef = inject(DestroyRef);\n\n constructor() {\n this.resizeObserver\n .observe(this.element.nativeElement, 100, true)\n .pipe(takeUntilDestroyed(this.destroyRef))\n .subscribe(() => this.resizeHandler());\n this.translateService.translationChange\n .pipe(takeUntilDestroyed(this.destroyRef))\n .subscribe(() => this.resizeHandler());\n }\n\n ngOnChanges(changes: SimpleChanges): void {\n if (this.blinkService && changes.blink) {\n this.blinkSubs?.unsubscribe();\n if (this.blink()) {\n const pulse = this.blinkPulse() ?? this.blinkService.pulse$;\n this.blinkSubs = pulse.subscribe(onOff => {\n this.blinkOnOff.set(onOff);\n });\n }\n }\n this.resizeHandler();\n }\n\n ngDoCheck(): void {\n if (this.responsiveMode) {\n this.calcResponsiveItems();\n }\n }\n\n ngOnDestroy(): void {\n this.blinkSubs?.unsubscribe();\n }\n\n protected onItemClicked(item: StatusBarItem): void {\n if (item.action) {\n item.action(item);\n }\n }\n\n protected toggleExpand(): void {\n clearTimeout(this.timer);\n if (!this.expanded()) {\n this.expanded.set(2);\n this.placeholderHeight.set(this.theBar().nativeElement.offsetHeight);\n this.contentHeight.set(0);\n\n this.timer = window.setTimeout(() => {\n this.contentHeight.set(this.content().nativeElement.scrollHeight);\n window.setTimeout(() => {\n this.contentHeight.set(undefined);\n }, 500);\n }, 10);\n } else {\n this.contentHeight.set(this.content().nativeElement.scrollHeight);\n this.expanded.set(1);\n\n window.setTimeout(() => {\n this.contentHeight.set(0);\n window.setTimeout(() => {\n this.placeholderHeight.set(0);\n this.expanded.set(0);\n }, 500);\n }, 10);\n }\n }\n\n protected resizeHandler(): void {\n const size = this.element.nativeElement.clientWidth;\n const muteWidth = this.muteButton() !== undefined ? SiStatusBarComponent.muteButtonWidth : 0;\n const customWidth = this.custom().nativeElement.scrollWidth ?? 0;\n const minWidth =\n this.items().length * (SiStatusBarComponent.itemMinWidth + SiStatusBarComponent.itemSpacing) +\n SiStatusBarComponent.itemSpacing +\n muteWidth +\n customWidth;\n if (size < minWidth) {\n this.setResponsiveMode(true);\n } else if (this.items().length) {\n this.calculateRequiredWidth(muteWidth, customWidth);\n }\n }\n\n private setResponsiveMode(responsive: boolean): void {\n if (responsive) {\n const size = this.element.nativeElement.clientWidth;\n this.responsiveMode = Math.max(Math.floor(size / SiStatusBarComponent.itemMaxWidth) - 1, 2);\n } else {\n this.responsiveMode = 0;\n }\n\n if (this.responsiveMode) {\n this.contentHeight.set(this.expanded() ? this.content().nativeElement.scrollHeight : 0);\n } else {\n this.expanded.set(0);\n this.placeholderHeight.set(0);\n this.contentHeight.set(undefined);\n }\n }\n\n private calcResponsiveItems(): void {\n const activeItems: ExtendedStatusBarItem[] = this.items()\n .filter(item => item.value)\n .sort(itemSortFunction);\n\n if (activeItems.length > this.responsiveMode) {\n activeItems[this.responsiveMode - 1] = {\n status: activeItems[this.responsiveMode - 1].status,\n color: activeItems[this.responsiveMode - 1].color,\n value: activeItems.length - this.responsiveMode + 1 + '+',\n title: '',\n action: () => this.toggleExpand(),\n isSpecial: true\n };\n activeItems.length = this.responsiveMode;\n } else if (!activeItems.length) {\n activeItems.push({\n status: 'success',\n title: '',\n value: this.allOkText(),\n isSpecial: true\n });\n }\n if (activeItems.length === this.responsiveMode) {\n activeItems[activeItems.length - 1].mutePadding = true;\n }\n this.responsiveItems.set(activeItems);\n }\n\n private calculateRequiredWidth(muteWidth: number, customWidth: number): void {\n const keys: string[] = [];\n for (const item of this.items()) {\n keys.push(item.title, item.value.toString());\n }\n this.translateService\n .translateAsync(keys)\n .pipe(first())\n .subscribe(translations => {\n const size = this.element.nativeElement.clientWidth;\n\n const requiredWidth = this.items().reduce(\n (acc, item) => {\n const titleWidth = this.measureService.measureText(translations[item.title]);\n const valueWidth = this.measureService.measureText(\n translations[item.value],\n undefined,\n { fontWeight: 'bold' }\n );\n const textWidth = Math.max(titleWidth, valueWidth);\n const itemWidth =\n Math.max(\n SiStatusBarComponent.itemMinWidth,\n textWidth +\n (item.color\n ? SiStatusBarComponent.itemPaddingXdeprecated\n : SiStatusBarComponent.itemPaddingX)\n ) + SiStatusBarComponent.itemSpacing;\n return acc + itemWidth;\n },\n muteWidth + customWidth + SiStatusBarComponent.itemSpacing\n );\n\n this.setResponsiveMode(size < requiredWidth);\n });\n }\n}\n","<div\n class=\"expand-placeholder\"\n [class.expanded]=\"expanded()\"\n [style.height.px]=\"placeholderHeight()\"\n></div>\n<div\n #thebar\n aria-busy=\"true\"\n [class.responsive]=\"responsiveMode\"\n [class.expanded]=\"expanded()\"\n [class.compact]=\"responsiveMode || compact()\"\n [class.pulse-off]=\"blinkOnOff() === false\"\n [class.pulse-on]=\"blinkOnOff()\"\n [ngClass]=\"responsiveMode ? 'responsive-' + responsiveMode : ''\"\n>\n <div\n class=\"status-bar-wrapper rounded-2\"\n [class.elevation-2]=\"expanded()\"\n [class.pe-2]=\"muteButton() !== undefined\"\n >\n @if (responsiveMode) {\n <div class=\"align-items-center overflow-hidden\">\n <div class=\"d-flex flex-fill position-relative\">\n @for (item of responsiveItems(); track $index) {\n <si-status-bar-item\n class=\"bar-item compact\"\n [value]=\"item.value\"\n [heading]=\"item.title\"\n [status]=\"item.status\"\n [color]=\"item.color\"\n [blink]=\"item.blink !== false && blink() && !expanded()\"\n [clickable]=\"!!item.action\"\n [class.mute-padding]=\"item.mutePadding && muteButton() !== undefined\"\n [style.flex-basis.%]=\"responsiveMode ? 100 / responsiveMode : null\"\n [valueOnly]=\"item.isSpecial\"\n (click)=\"onItemClicked(item)\"\n (keydown.enter)=\"onItemClicked(item)\"\n />\n }\n </div>\n @if (muteButton() !== undefined) {\n <div class=\"mobile-mute\">\n <ng-container *ngTemplateOutlet=\"muteButtonTemplate\" />\n </div>\n }\n </div>\n }\n <div\n #content\n class=\"main-content align-items-center overflow-hidden\"\n [style.max-height.px]=\"contentHeight()\"\n >\n @if (responsiveMode) {\n <div class=\"mobile-spacer\"></div>\n }\n <div\n class=\"d-flex flex-fill position-relative\"\n [id]=\"statusId\"\n [class.d-none]=\"responsiveMode && !expanded()\"\n [class.flex-wrap]=\"responsiveMode\"\n >\n @for (item of items(); track $index) {\n <si-status-bar-item\n class=\"bar-item\"\n [class.compact]=\"responsiveMode || compact()\"\n [value]=\"item.value\"\n [heading]=\"item.title\"\n [status]=\"item.status\"\n [color]=\"item.color\"\n [blink]=\"item.blink !== false && blink()\"\n [clickable]=\"!!item.action\"\n [style.flex-basis.%]=\"responsiveMode ? 100 / responsiveMode : null\"\n (click)=\"onItemClicked(item)\"\n (keydown.enter)=\"onItemClicked(item)\"\n />\n }\n </div>\n <div class=\"custom-content bar-item d-flex\">\n <div #custom [class.pb-2]=\"responsiveMode && expanded\" (siResizeObserver)=\"resizeHandler()\">\n <ng-content />\n </div>\n </div>\n @if (muteButton() !== undefined && !responsiveMode) {\n <ng-container *ngTemplateOutlet=\"muteButtonTemplate\" />\n }\n </div>\n </div>\n @if (responsiveMode) {\n <div class=\"d-flex align-items-center justify-content-center\">\n <a\n class=\"collapse-expand text-center p-0 focus-force\"\n tabindex=\"0\"\n role=\"button\"\n [attr.aria-label]=\"(expanded() ? collapseButtonText() : expandButtonText()) | translate\"\n [attr.aria-expanded]=\"!!expanded()\"\n [attr.aria-controls]=\"statusId\"\n [class.expanded]=\"expanded() === 2\"\n (keydown.enter)=\"toggleExpand()\"\n (click)=\"toggleExpand()\"\n >\n <si-icon-next class=\"icon\" [icon]=\"icons.elementDown2\" />\n </a>\n </div>\n }\n</div>\n\n<ng-template #muteButtonTemplate>\n <button\n type=\"button\"\n class=\"bar-item mute-button btn btn-circle btn-sm btn-tertiary ms-5\"\n [attr.aria-label]=\"muteButtonText() | translate\"\n (click)=\"muteToggle.emit()\"\n >\n <si-icon-next\n class=\"icon\"\n [icon]=\"muteButton() ? icons.elementSoundOn : icons.elementSoundMute\"\n />\n </button>\n</ng-template>\n","/**\n * Copyright Siemens 2016 - 2025.\n * SPDX-License-Identifier: MIT\n */\nimport { NgModule } from '@angular/core';\n\nimport { SiStatusBarComponent } from './si-status-bar.component';\n\n@NgModule({\n imports: [SiStatusBarComponent],\n exports: [SiStatusBarComponent]\n})\nexport class SiStatusBarModule {}\n","/**\n * Copyright Siemens 2016 - 2025.\n * SPDX-License-Identifier: MIT\n */\nexport * from './si-status-bar-item.component';\nexport * from './si-status-bar-item.model';\n","/**\n * Copyright Siemens 2016 - 2025.\n * SPDX-License-Identifier: MIT\n */\nexport * from './si-status-bar.component';\nexport * from './si-status-bar.module';\nexport * from './si-status-bar-item/index';\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-status-bar.mjs","sources":["../../../../projects/element-ng/status-bar/si-status-bar-item/si-status-bar-item.component.ts","../../../../projects/element-ng/status-bar/si-status-bar-item/si-status-bar-item.component.html","../../../../projects/element-ng/status-bar/si-status-bar.component.ts","../../../../projects/element-ng/status-bar/si-status-bar.component.html","../../../../projects/element-ng/status-bar/si-status-bar.module.ts","../../../../projects/element-ng/status-bar/si-status-bar-item/index.ts","../../../../projects/element-ng/status-bar/index.ts","../../../../projects/element-ng/status-bar/siemens-element-ng-status-bar.ts"],"sourcesContent":["/**\n * Copyright Siemens 2016 - 2025.\n * SPDX-License-Identifier: MIT\n */\nimport { NgClass } from '@angular/common';\nimport {\n booleanAttribute,\n Component,\n computed,\n ElementRef,\n inject,\n input,\n viewChild\n} from '@angular/core';\nimport { ExtendedStatusType } from '@siemens/element-ng/common';\nimport { SiIconNextComponent, STATUS_ICON_CONFIG } from '@siemens/element-ng/icon';\nimport { SiTranslateModule } from '@siemens/element-translate-ng/translate';\n\n@Component({\n selector: 'si-status-bar-item',\n templateUrl: './si-status-bar-item.component.html',\n styleUrl: './si-status-bar-item.component.scss',\n imports: [NgClass, SiIconNextComponent, SiTranslateModule],\n host: {\n '[class.clickable]': 'clickable()'\n }\n})\nexport class SiStatusBarItemComponent {\n private readonly statusIcons = inject(STATUS_ICON_CONFIG);\n readonly status = input<ExtendedStatusType>();\n readonly value = input.required<string | number>();\n readonly heading = input.required<string>();\n readonly color = input<string>();\n /** @defaultValue false */\n readonly blink = input(false, { transform: booleanAttribute });\n /** @defaultValue false */\n readonly valueOnly = input<boolean | undefined, unknown>(false, { transform: booleanAttribute });\n /** @defaultValue false */\n readonly clickable = input(false, { transform: booleanAttribute });\n\n private readonly bg = viewChild.required<ElementRef>('bg');\n\n protected readonly contrastFix = computed(() => {\n return !!this.color() && this.blink() && this.calculateContrastFix();\n });\n protected readonly statusIcon = computed(() => {\n const status = this.status();\n return status ? this.statusIcons[status] : undefined;\n });\n protected readonly background = computed(() =>\n this.blink() && this.status() !== 'success' ? (this.statusIcon()?.background ?? '') : ''\n );\n\n private calculateContrastFix(): boolean {\n // see https://www.w3.org/TR/AERT/#color-contrast\n const rgb = getComputedStyle(this.bg().nativeElement)\n .backgroundColor?.match(/\\d+/g)\n ?.map(v => +v);\n return !!rgb && Math.round((rgb[0] * 299 + rgb[1] * 587 + rgb[2] * 114) / 1000) <= 128;\n }\n}\n","<div\n class=\"status-item rounded-2 focus-inside d-flex align-items-center\"\n [class.text-muted]=\"!value()\"\n [class.blink]=\"blink() && value()\"\n [attr.tabindex]=\"clickable() ? '0' : ''\"\n [attr.aria-disabled]=\"!value()\"\n>\n <div\n #bg\n role=\"none\"\n class=\"bg focus-sub-inside\"\n [class.custom-color]=\"color()\"\n [class.contrast-fix]=\"contrastFix()\"\n [ngClass]=\"background()\"\n [class.d-none]=\"!value()\"\n [style.background-color]=\"blink() && color() ? color() : null\"\n ></div>\n @let icon = statusIcon();\n @if (!icon) {\n <div\n class=\"color-bar me-3 mt-1 mb-1\"\n [style.background-color]=\"value() && color() ? color() : null\"\n ></div>\n }\n @if (icon) {\n <span class=\"indicator icon me-4 icon-stack\">\n <si-icon-next [ngClass]=\"value() ? icon.color : 'indicator-disabled'\" [icon]=\"icon.icon\" />\n <si-icon-next\n [ngClass]=\"value() ? icon.stackedColor : 'text-inverse'\"\n [icon]=\"icon.stacked\"\n />\n </span>\n }\n <div class=\"overflow-hidden\">\n @if (value() !== undefined) {\n <div class=\"item-value si-title-2 text-truncate\">{{ value().toString() | translate }}</div>\n }\n @if (!valueOnly()) {\n <div class=\"item-title text-truncate\">{{ heading() | translate }}</div>\n }\n </div>\n</div>\n","/**\n * Copyright Siemens 2016 - 2025.\n * SPDX-License-Identifier: MIT\n */\n/* eslint-disable @angular-eslint/no-conflicting-lifecycle */\nimport { NgClass, NgTemplateOutlet } from '@angular/common';\nimport {\n booleanAttribute,\n ChangeDetectionStrategy,\n Component,\n DestroyRef,\n DoCheck,\n ElementRef,\n inject,\n input,\n OnChanges,\n OnDestroy,\n output,\n signal,\n SimpleChanges,\n viewChild\n} from '@angular/core';\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\nimport { BlinkService, STATUS_ICON, TextMeasureService } from '@siemens/element-ng/common';\nimport {\n elementDown2,\n elementSoundMute,\n elementSoundOn,\n addIcons,\n SiIconNextComponent\n} from '@siemens/element-ng/icon';\nimport {\n ResizeObserverService,\n SiResizeObserverDirective\n} from '@siemens/element-ng/resize-observer';\nimport { SiTranslateModule, SiTranslateService } from '@siemens/element-translate-ng/translate';\nimport { Observable, Subscription } from 'rxjs';\nimport { first } from 'rxjs/operators';\n\nimport { SiStatusBarItemComponent } from './si-status-bar-item/si-status-bar-item.component';\nimport { StatusBarItem } from './si-status-bar-item/si-status-bar-item.model';\n\ninterface ExtendedStatusBarItem extends StatusBarItem {\n isSpecial?: boolean;\n mutePadding?: boolean;\n}\n\n// this is a function because Angular compiler exports arrows for no good reason\n// eslint-disable-next-line prefer-arrow/prefer-arrow-functions\nfunction itemSortFunction(a: StatusBarItem, b: StatusBarItem): number {\n return a.status && b.status ? STATUS_ICON[a.status].severity - STATUS_ICON[b.status].severity : 0;\n}\n\nlet idCounter = 1;\n\n/**\n * The status bar is the main component within an application to inform users at all times\n * about important status information.\n */\n@Component({\n selector: 'si-status-bar',\n changeDetection: ChangeDetectionStrategy.OnPush,\n templateUrl: './si-status-bar.component.html',\n styleUrl: './si-status-bar.component.scss',\n imports: [\n NgClass,\n NgTemplateOutlet,\n SiIconNextComponent,\n SiStatusBarItemComponent,\n SiResizeObserverDirective,\n SiTranslateModule\n ]\n})\nexport class SiStatusBarComponent implements DoCheck, OnDestroy, OnChanges {\n private static readonly itemMinWidth = 100;\n private static readonly itemMaxWidth = 152;\n private static readonly itemSpacing = 4;\n private static readonly itemPaddingX = 44; // padding + icon size + icon margin\n private static readonly itemPaddingXdeprecated = 20; // padding + color bar\n private static readonly muteButtonWidth = 48;\n\n /**\n * Array of status bar items.\n */\n readonly items = input.required<StatusBarItem[]>();\n /**\n * When true, items with a value have a blinking background\n *\n * @defaultValue false\n */\n readonly blink = input(false, { transform: booleanAttribute });\n /**\n * State of the mute button. Set to `undefined` for no button.\n */\n readonly muteButton = input<boolean>();\n /**\n * Text/translation key on mute button for screen reader\n *\n * @defaultValue\n * ```\n * $localize`:@@SI_STATUS_BAR.MUTE:Mute/unmute`\n * ```\n */\n readonly muteButtonText = input($localize`:@@SI_STATUS_BAR.MUTE:Mute/unmute`);\n /**\n * Text/translation key for \"All OK\" status in mobile\n *\n * @defaultValue\n * ```\n * $localize`:@@SI_STATUS_BAR.ALL_OK:All OK`\n * ```\n */\n readonly allOkText = input($localize`:@@SI_STATUS_BAR.ALL_OK:All OK`);\n /**\n * compact mode\n *\n * @defaultValue false\n */\n readonly compact = input(false, { transform: booleanAttribute });\n /**\n * blink pulse generator for synchronized blinking with other components\n */\n readonly blinkPulse = input<Observable<boolean>>();\n /**\n * Text for the navbar expand button. Required for a11y\n *\n * @defaultValue\n * ```\n * $localize`:@@SI_STATUS_BAR.EXPAND:Expand`\n * ```\n */\n readonly expandButtonText = input($localize`:@@SI_STATUS_BAR.EXPAND:Expand`);\n /**\n * Text for the navbar collapse button. Required for a11y\n *\n * @defaultValue\n * ```\n * $localize`:@@SI_STATUS_BAR.COLLAPSE:Collapse`\n * ```\n */\n readonly collapseButtonText = input($localize`:@@SI_STATUS_BAR.COLLAPSE:Collapse`);\n\n /**\n * Emitted when the mute toggle button is clicked\n */\n readonly muteToggle = output();\n\n private readonly theBar = viewChild.required<ElementRef>('thebar');\n private readonly content = viewChild.required<ElementRef>('content');\n private readonly custom = viewChild.required<ElementRef>('custom');\n\n protected readonly responsiveItems = signal<ExtendedStatusBarItem[]>([]);\n protected responsiveMode = 0;\n protected readonly expanded = signal(0);\n protected readonly placeholderHeight = signal(0);\n protected readonly contentHeight = signal<number | undefined>(undefined);\n protected readonly blinkOnOff = signal<boolean | undefined>(undefined);\n protected readonly icons = addIcons({ elementDown2, elementSoundMute, elementSoundOn });\n protected statusId = `__si-status-bar-${idCounter++}`;\n\n private timer: any;\n\n private blinkSubs?: Subscription;\n\n private readonly element = inject(ElementRef);\n private readonly blinkService = inject(BlinkService);\n private readonly translateService = inject(SiTranslateService);\n private readonly resizeObserver = inject(ResizeObserverService);\n private readonly measureService = inject(TextMeasureService);\n private readonly destroyRef = inject(DestroyRef);\n\n constructor() {\n this.resizeObserver\n .observe(this.element.nativeElement, 100, true)\n .pipe(takeUntilDestroyed(this.destroyRef))\n .subscribe(() => this.resizeHandler());\n this.translateService.translationChange\n .pipe(takeUntilDestroyed(this.destroyRef))\n .subscribe(() => this.resizeHandler());\n }\n\n ngOnChanges(changes: SimpleChanges): void {\n if (this.blinkService && changes.blink) {\n this.blinkSubs?.unsubscribe();\n if (this.blink()) {\n const pulse = this.blinkPulse() ?? this.blinkService.pulse$;\n this.blinkSubs = pulse.subscribe(onOff => {\n this.blinkOnOff.set(onOff);\n });\n }\n }\n this.resizeHandler();\n }\n\n ngDoCheck(): void {\n if (this.responsiveMode) {\n this.calcResponsiveItems();\n }\n }\n\n ngOnDestroy(): void {\n this.blinkSubs?.unsubscribe();\n }\n\n protected onItemClicked(item: StatusBarItem): void {\n if (item.action) {\n item.action(item);\n }\n }\n\n protected toggleExpand(): void {\n clearTimeout(this.timer);\n if (!this.expanded()) {\n this.expanded.set(2);\n this.placeholderHeight.set(this.theBar().nativeElement.offsetHeight);\n this.contentHeight.set(0);\n\n this.timer = window.setTimeout(() => {\n this.contentHeight.set(this.content().nativeElement.scrollHeight);\n window.setTimeout(() => {\n this.contentHeight.set(undefined);\n }, 500);\n }, 10);\n } else {\n this.contentHeight.set(this.content().nativeElement.scrollHeight);\n this.expanded.set(1);\n\n window.setTimeout(() => {\n this.contentHeight.set(0);\n window.setTimeout(() => {\n this.placeholderHeight.set(0);\n this.expanded.set(0);\n }, 500);\n }, 10);\n }\n }\n\n protected resizeHandler(): void {\n const size = this.element.nativeElement.clientWidth;\n const muteWidth = this.muteButton() !== undefined ? SiStatusBarComponent.muteButtonWidth : 0;\n const customWidth = this.custom().nativeElement.scrollWidth ?? 0;\n const minWidth =\n this.items().length * (SiStatusBarComponent.itemMinWidth + SiStatusBarComponent.itemSpacing) +\n SiStatusBarComponent.itemSpacing +\n muteWidth +\n customWidth;\n if (size < minWidth) {\n this.setResponsiveMode(true);\n } else if (this.items().length) {\n this.calculateRequiredWidth(muteWidth, customWidth);\n }\n }\n\n private setResponsiveMode(responsive: boolean): void {\n if (responsive) {\n const size = this.element.nativeElement.clientWidth;\n this.responsiveMode = Math.max(Math.floor(size / SiStatusBarComponent.itemMaxWidth) - 1, 2);\n } else {\n this.responsiveMode = 0;\n }\n\n if (this.responsiveMode) {\n this.contentHeight.set(this.expanded() ? this.content().nativeElement.scrollHeight : 0);\n } else {\n this.expanded.set(0);\n this.placeholderHeight.set(0);\n this.contentHeight.set(undefined);\n }\n }\n\n private calcResponsiveItems(): void {\n const activeItems: ExtendedStatusBarItem[] = this.items()\n .filter(item => item.value)\n .sort(itemSortFunction);\n\n if (activeItems.length > this.responsiveMode) {\n activeItems[this.responsiveMode - 1] = {\n status: activeItems[this.responsiveMode - 1].status,\n color: activeItems[this.responsiveMode - 1].color,\n value: activeItems.length - this.responsiveMode + 1 + '+',\n title: '',\n action: () => this.toggleExpand(),\n isSpecial: true\n };\n activeItems.length = this.responsiveMode;\n } else if (!activeItems.length) {\n activeItems.push({\n status: 'success',\n title: '',\n value: this.allOkText(),\n isSpecial: true\n });\n }\n if (activeItems.length === this.responsiveMode) {\n activeItems[activeItems.length - 1].mutePadding = true;\n }\n this.responsiveItems.set(activeItems);\n }\n\n private calculateRequiredWidth(muteWidth: number, customWidth: number): void {\n const keys: string[] = [];\n for (const item of this.items()) {\n keys.push(item.title, item.value.toString());\n }\n this.translateService\n .translateAsync(keys)\n .pipe(first())\n .subscribe(translations => {\n const size = this.element.nativeElement.clientWidth;\n\n const requiredWidth = this.items().reduce(\n (acc, item) => {\n const titleWidth = this.measureService.measureText(translations[item.title]);\n const valueWidth = this.measureService.measureText(\n translations[item.value],\n undefined,\n { fontWeight: 'bold' }\n );\n const textWidth = Math.max(titleWidth, valueWidth);\n const itemWidth =\n Math.max(\n SiStatusBarComponent.itemMinWidth,\n textWidth +\n (item.color\n ? SiStatusBarComponent.itemPaddingXdeprecated\n : SiStatusBarComponent.itemPaddingX)\n ) + SiStatusBarComponent.itemSpacing;\n return acc + itemWidth;\n },\n muteWidth + customWidth + SiStatusBarComponent.itemSpacing\n );\n\n this.setResponsiveMode(size < requiredWidth);\n });\n }\n}\n","<div\n class=\"expand-placeholder\"\n [class.expanded]=\"expanded()\"\n [style.height.px]=\"placeholderHeight()\"\n></div>\n<div\n #thebar\n aria-busy=\"true\"\n [class.responsive]=\"responsiveMode\"\n [class.expanded]=\"expanded()\"\n [class.compact]=\"responsiveMode || compact()\"\n [class.pulse-off]=\"blinkOnOff() === false\"\n [class.pulse-on]=\"blinkOnOff()\"\n [ngClass]=\"responsiveMode ? 'responsive-' + responsiveMode : ''\"\n>\n <div\n class=\"status-bar-wrapper rounded-2\"\n [class.elevation-2]=\"expanded()\"\n [class.pe-2]=\"muteButton() !== undefined\"\n >\n @if (responsiveMode) {\n <div class=\"align-items-center overflow-hidden\">\n <div class=\"d-flex flex-fill position-relative\">\n @for (item of responsiveItems(); track $index) {\n <si-status-bar-item\n class=\"bar-item compact\"\n [value]=\"item.value\"\n [heading]=\"item.title\"\n [status]=\"item.status\"\n [color]=\"item.color\"\n [blink]=\"item.blink !== false && blink() && !expanded()\"\n [clickable]=\"!!item.action\"\n [class.mute-padding]=\"item.mutePadding && muteButton() !== undefined\"\n [style.flex-basis.%]=\"responsiveMode ? 100 / responsiveMode : null\"\n [valueOnly]=\"item.isSpecial\"\n (click)=\"onItemClicked(item)\"\n (keydown.enter)=\"onItemClicked(item)\"\n />\n }\n </div>\n @if (muteButton() !== undefined) {\n <div class=\"mobile-mute\">\n <ng-container *ngTemplateOutlet=\"muteButtonTemplate\" />\n </div>\n }\n </div>\n }\n <div\n #content\n class=\"main-content align-items-center overflow-hidden\"\n [style.max-height.px]=\"contentHeight()\"\n >\n @if (responsiveMode) {\n <div class=\"mobile-spacer\"></div>\n }\n <div\n class=\"d-flex flex-fill position-relative\"\n [id]=\"statusId\"\n [class.d-none]=\"responsiveMode && !expanded()\"\n [class.flex-wrap]=\"responsiveMode\"\n >\n @for (item of items(); track $index) {\n <si-status-bar-item\n class=\"bar-item\"\n [class.compact]=\"responsiveMode || compact()\"\n [value]=\"item.value\"\n [heading]=\"item.title\"\n [status]=\"item.status\"\n [color]=\"item.color\"\n [blink]=\"item.blink !== false && blink()\"\n [clickable]=\"!!item.action\"\n [style.flex-basis.%]=\"responsiveMode ? 100 / responsiveMode : null\"\n (click)=\"onItemClicked(item)\"\n (keydown.enter)=\"onItemClicked(item)\"\n />\n }\n </div>\n <div class=\"custom-content bar-item d-flex\">\n <div #custom [class.pb-2]=\"responsiveMode && expanded\" (siResizeObserver)=\"resizeHandler()\">\n <ng-content />\n </div>\n </div>\n @if (muteButton() !== undefined && !responsiveMode) {\n <ng-container *ngTemplateOutlet=\"muteButtonTemplate\" />\n }\n </div>\n </div>\n @if (responsiveMode) {\n <div class=\"d-flex align-items-center justify-content-center\">\n <a\n class=\"collapse-expand text-center p-0 focus-force\"\n tabindex=\"0\"\n role=\"button\"\n [attr.aria-label]=\"(expanded() ? collapseButtonText() : expandButtonText()) | translate\"\n [attr.aria-expanded]=\"!!expanded()\"\n [attr.aria-controls]=\"statusId\"\n [class.expanded]=\"expanded() === 2\"\n (keydown.enter)=\"toggleExpand()\"\n (click)=\"toggleExpand()\"\n >\n <si-icon-next class=\"icon\" [icon]=\"icons.elementDown2\" />\n </a>\n </div>\n }\n</div>\n\n<ng-template #muteButtonTemplate>\n <button\n type=\"button\"\n class=\"bar-item mute-button btn btn-circle btn-sm btn-tertiary ms-5\"\n [attr.aria-label]=\"muteButtonText() | translate\"\n (click)=\"muteToggle.emit()\"\n >\n <si-icon-next\n class=\"icon\"\n [icon]=\"muteButton() ? icons.elementSoundOn : icons.elementSoundMute\"\n />\n </button>\n</ng-template>\n","/**\n * Copyright Siemens 2016 - 2025.\n * SPDX-License-Identifier: MIT\n */\nimport { NgModule } from '@angular/core';\n\nimport { SiStatusBarComponent } from './si-status-bar.component';\n\n@NgModule({\n imports: [SiStatusBarComponent],\n exports: [SiStatusBarComponent]\n})\nexport class SiStatusBarModule {}\n","/**\n * Copyright Siemens 2016 - 2025.\n * SPDX-License-Identifier: MIT\n */\nexport * from './si-status-bar-item.component';\nexport * from './si-status-bar-item.model';\n","/**\n * Copyright Siemens 2016 - 2025.\n * SPDX-License-Identifier: MIT\n */\nexport * from './si-status-bar.component';\nexport * from './si-status-bar.module';\nexport * from './si-status-bar-item/index';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
@@ -66,7 +66,6 @@ class SiTabNextBaseDirective {
66
66
  tabButton = inject(ElementRef);
67
67
  tabContent = viewChild('tabContent', { read: TemplateRef });
68
68
  static tabCounter = 0;
69
- retainFocus = false;
70
69
  indexBeforeClose = -1;
71
70
  /** @internal */
72
71
  tabId = `${SiTabNextBaseDirective.tabCounter++}`;
@@ -74,37 +73,19 @@ class SiTabNextBaseDirective {
74
73
  tabset = inject(SI_TABSET_NEXT);
75
74
  /** @internal */
76
75
  index = computed(() => this.tabset.tabPanels().findIndex(tab => tab.tabId === this.tabId));
77
- /** @internal */
78
- isTabButtonFullyVisible() {
79
- const tabButton = this.tabButton.nativeElement;
80
- const tabsetElement = this.tabset.tabScrollContainer().nativeElement;
81
- const tabButtonRect = tabButton.getBoundingClientRect();
82
- const tabsetRect = tabsetElement.getBoundingClientRect();
83
- return (Math.round(tabButtonRect.left) >= Math.round(tabsetRect.left) &&
84
- Math.round(tabButtonRect.right) <= Math.round(tabsetRect.right));
85
- }
86
76
  ngOnDestroy() {
87
77
  // adjust the focus index and selected tab index if component is destroyed
88
78
  // as a side effect to close tab event
89
79
  if (this.indexBeforeClose >= 0) {
90
80
  const indexToFocus = this.tabset.getNextIndexToFocus(this.indexBeforeClose);
91
- if (this.retainFocus) {
92
- // wait for a cycle to render the tab if not visible
93
- setTimeout(() => {
94
- this.tabset.focusKeyManager?.setActiveItem(indexToFocus);
95
- });
96
- }
97
- else if (this.indexBeforeClose >= 0 && this.active()) {
81
+ if (this.active()) {
98
82
  this.tabset.focusKeyManager?.updateActiveItem(indexToFocus);
99
83
  this.tabset.tabPanels()[indexToFocus].tabButton.nativeElement.focus();
100
84
  }
101
85
  else {
102
- let selectedItemIndex = this.tabset.activeTabIndex() ?? 0;
103
- if (selectedItemIndex > this.indexBeforeClose) {
104
- selectedItemIndex--;
105
- }
86
+ const selectedItemIndex = this.tabset.activeTabIndex() ?? 0;
106
87
  this.tabset.focusKeyManager?.updateActiveItem(selectedItemIndex);
107
- this.tabset.tabPanels()[selectedItemIndex].tabButton.nativeElement.focus();
88
+ this.tabset.tabPanels()[selectedItemIndex].focus();
108
89
  }
109
90
  // if this tab was the active one we need to select next tab as active
110
91
  if (this.active()) {
@@ -113,26 +94,37 @@ class SiTabNextBaseDirective {
113
94
  targetActiveTab.active.set(true);
114
95
  }
115
96
  }
116
- this.tabset.updateVisibleTabIndexes(indexToFocus, 'next', true);
117
97
  }
118
98
  }
119
- closeTab(event, retainFocus = false) {
99
+ closeTab(event) {
120
100
  if (this.closable() && !this.disabledTab()) {
121
101
  event.stopPropagation();
122
102
  const index = this.index();
123
103
  this.closeTriggered.emit();
124
- this.retainFocus = retainFocus;
125
104
  this.indexBeforeClose = index;
126
105
  }
127
106
  }
128
107
  focus(origin) {
129
- this.tabButton.nativeElement.focus();
108
+ this.tabButton.nativeElement.focus({ preventScroll: true });
109
+ // The element is not fully scrolled into view when focused. So we prevent and scroll it manually.
110
+ this.tabButton.nativeElement.scrollIntoView({
111
+ inline: 'nearest',
112
+ block: 'nearest',
113
+ behavior: 'instant'
114
+ });
130
115
  }
131
116
  get disabled() {
132
117
  return this.disabledTab();
133
118
  }
119
+ selectTab(retainFocus) {
120
+ this.tabset.focusKeyManager?.updateActiveItem(this.index());
121
+ if (retainFocus) {
122
+ // We need the timeout to wait for cdkMenu to restore the focus before we move it again.
123
+ setTimeout(() => this.focus());
124
+ }
125
+ }
134
126
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiTabNextBaseDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
135
- static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "19.0.6", type: SiTabNextBaseDirective, 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.arrowLeft": "tabset.focusPrevious($event)", "keydown.arrowRight": "tabset.focusNext($event)", "keydown.delete": "closeTab($event, true)" }, properties: { "class.disabled": "disabledTab()", "attr.id": "'tab-' + tabId", "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 si-title-1" }, viewQueries: [{ propertyName: "tabContent", first: true, predicate: ["tabContent"], descendants: true, read: TemplateRef, isSignal: true }], ngImport: i0 });
127
+ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "19.0.6", type: SiTabNextBaseDirective, 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.arrowLeft": "tabset.focusPrevious($event)", "keydown.arrowRight": "tabset.focusNext($event)", "keydown.delete": "closeTab($event)" }, properties: { "class.disabled": "disabledTab()", "attr.id": "'tab-' + tabId", "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 si-title-1" }, viewQueries: [{ propertyName: "tabContent", first: true, predicate: ["tabContent"], descendants: true, read: TemplateRef, isSignal: true }], ngImport: i0 });
136
128
  }
137
129
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiTabNextBaseDirective, decorators: [{
138
130
  type: Directive,
@@ -148,7 +140,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImpor
148
140
  '[attr.aria-controls]': "'content-' + tabId",
149
141
  '(keydown.arrowLeft)': 'tabset.focusPrevious($event)',
150
142
  '(keydown.arrowRight)': 'tabset.focusNext($event)',
151
- '(keydown.delete)': 'closeTab($event, true)'
143
+ '(keydown.delete)': 'closeTab($event)'
152
144
  }
153
145
  }]
154
146
  }] });
@@ -178,18 +170,6 @@ class SiTabNextLinkComponent extends SiTabNextBaseDirective {
178
170
  }
179
171
  });
180
172
  }
181
- /** @internal */
182
- selectTab(retainFocus) {
183
- if (!this.isTabButtonFullyVisible()) {
184
- this.tabset.updateVisibleTabIndexes(this.index(), 'next');
185
- this.tabset.focusKeyManager?.updateActiveItem(this.index());
186
- }
187
- if (retainFocus) {
188
- setTimeout(() => {
189
- this.tabset.focusKeyManager?.setActiveItem(this);
190
- });
191
- }
192
- }
193
173
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiTabNextLinkComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
194
174
  static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.6", type: SiTabNextLinkComponent, isStandalone: true, selector: "a[si-tab-next][routerLink]", host: { properties: { "class.active": "routerLinkActive.isActive", "attr.aria-selected": "routerLinkActive.isActive" } }, usesInheritance: true, hostDirectives: [{ directive: i1$1.RouterLinkActive }], ngImport: i0, template: "@let icon = this.icon();\n@if (icon) {\n <si-icon-next class=\"tab-icon\" [icon]=\"icon\" [attr.title]=\"heading() | translate\" />\n} @else {\n <span class=\"text-truncate\">{{ heading() | translate }}</span>\n}\n@if (badgeContent() === true) {\n <span class=\"badge-dot\"></span>\n} @else if (badgeContent() && badgeColor()) {\n <span class=\"badge\" [ngClass]=\"'bg-' + badgeColor()\">\n <!-- eslint-disable-next-line @angular-eslint/template/no-any -->\n {{ $any(badgeContent() ?? '') | translate }}\n </span>\n} @else if (badgeContent() && !badgeColor()) {\n <!-- eslint-disable-next-line @angular-eslint/template/no-any -->\n <span class=\"badge-text\"> {{ $any(badgeContent() ?? '') | translate }}</span>\n}\n@if (closable() && !disabledTab()) {\n <si-icon-next\n class=\"ms-4 me-n4 btn btn-circle btn-xs btn-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);color:var(--element-text-primary)}:host.nav-link span.badge-dot{inset-block-end:100%;inset-inline-start:12px;margin-inline-end:12px}:host.nav-link span.badge-text{inset-block-end:calc(100% - 7px);inset-inline-start:2px}.tab-icon{font-size:24px}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: SiIconNextComponent, selector: "si-icon-next", inputs: ["icon"] }, { kind: "ngmodule", type: SiTranslateModule }, { kind: "pipe", type: i1.SiTranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
195
175
  }
@@ -238,16 +218,7 @@ class SiTabNextComponent extends SiTabNextBaseDirective {
238
218
  }
239
219
  if (continueWithSelection) {
240
220
  this.active.set(true);
241
- this.tabset.focusKeyManager?.updateActiveItem(newTabIndex);
242
- }
243
- if (!this.isTabButtonFullyVisible()) {
244
- this.tabset.updateVisibleTabIndexes(newTabIndex, 'next');
245
- this.tabset.focusKeyManager?.updateActiveItem(newTabIndex);
246
- }
247
- if (retainFocus) {
248
- setTimeout(() => {
249
- this.tabset.focusKeyManager?.activeItem?.focus();
250
- });
221
+ super.selectTab(retainFocus);
251
222
  }
252
223
  }
253
224
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiTabNextComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
@@ -274,8 +245,6 @@ class SiTabsetNextComponent {
274
245
  */
275
246
  deselect = output();
276
247
  /** @internal */
277
- visibleTabIndexes = signal([]);
278
- /** @internal */
279
248
  activeTab = computed(() => {
280
249
  return this.tabPanels().find(tab => tab.active());
281
250
  });
@@ -293,25 +262,8 @@ class SiTabsetNextComponent {
293
262
  ];
294
263
  return allTabs;
295
264
  });
296
- /** @internal */
297
- tabContainer = viewChild.required('tabContainer');
298
- tabScrollContainer = viewChild.required('tabScrollContainer');
299
- maxWrapperWidth = computed(() => {
300
- const visibleIndexes = this.visibleTabIndexes();
301
- return visibleIndexes.length
302
- ? this.tabButtons()
303
- .filter((_, index) => visibleIndexes.includes(index))
304
- .reduce((total, current) => {
305
- return total + current.nativeElement.clientWidth;
306
- }, 0)
307
- : undefined;
308
- });
309
265
  menu = viewChild('menu', { read: CdkMenu });
310
- tabButtons = computed(() => {
311
- return this.tabPanels().map(tab => tab.tabButton);
312
- });
313
- menuButton = viewChild('menuButton');
314
- previousWidth = 0;
266
+ showMenuButton = signal(false);
315
267
  injector = inject(INJECTOR);
316
268
  ngAfterViewInit() {
317
269
  this.focusKeyManager = new FocusKeyManager(this.tabPanels, this.injector);
@@ -320,15 +272,6 @@ class SiTabsetNextComponent {
320
272
  this.focusKeyManager?.updateActiveItem(this.tabPanels().findIndex(tab => !tab.disabledTab()));
321
273
  });
322
274
  }
323
- resize(e) {
324
- if (this.previousWidth && this.previousWidth === e.width) {
325
- return;
326
- }
327
- else {
328
- this.previousWidth = e.width;
329
- }
330
- this.updateVisibleTabIndexes(this.activeTabIndex(), 'next', true);
331
- }
332
275
  menuOpened() {
333
276
  // wait for menu items to be rendered
334
277
  setTimeout(() => {
@@ -352,67 +295,12 @@ class SiTabsetNextComponent {
352
295
  /** @internal */
353
296
  focusPrevious(e) {
354
297
  e.preventDefault();
355
- const activeItemIndex = this.focusKeyManager?.activeItemIndex;
356
- if (activeItemIndex > 0) {
357
- this.focusKeyManager?.setPreviousItemActive();
358
- this.updateVisibleTabIndexes(this.focusKeyManager.activeItemIndex, 'previous');
359
- setTimeout(() => {
360
- this.focusKeyManager?.setActiveItem(this.focusKeyManager.activeItemIndex);
361
- });
362
- }
298
+ this.focusKeyManager?.setPreviousItemActive();
363
299
  }
364
300
  /** @internal */
365
301
  focusNext(e) {
366
302
  e.preventDefault();
367
- const activeItemIndex = this.focusKeyManager?.activeItemIndex;
368
- if (activeItemIndex < this.tabButtons().length) {
369
- this.focusKeyManager?.setNextItemActive();
370
- this.updateVisibleTabIndexes(this.focusKeyManager.activeItemIndex, 'next');
371
- setTimeout(() => {
372
- this.focusKeyManager?.setActiveItem(this.focusKeyManager.activeItemIndex);
373
- });
374
- }
375
- }
376
- /** @internal */
377
- updateVisibleTabIndexes(startIndex, type, forceUpdate) {
378
- if (startIndex < this.tabButtons().length) {
379
- if (!this.visibleTabIndexes().includes(startIndex) || forceUpdate) {
380
- let availableWidth = this.tabContainer().nativeElement.clientWidth;
381
- if (this.menuButton()) {
382
- availableWidth = availableWidth - this.menuButton().nativeElement.clientWidth;
383
- }
384
- let consumedWidth = 0;
385
- const visibleTabIndexes = [];
386
- const calculateConsumedWidth = (i) => {
387
- consumedWidth += this.tabButtons()[i].nativeElement.clientWidth;
388
- if (visibleTabIndexes.includes(0) &&
389
- i === this.tabButtons().length - 1 &&
390
- this.menuButton()) {
391
- availableWidth = availableWidth + this.menuButton().nativeElement.clientWidth;
392
- }
393
- if (consumedWidth <= availableWidth) {
394
- visibleTabIndexes.push(i);
395
- return false;
396
- }
397
- else {
398
- consumedWidth -= this.tabButtons()[i].nativeElement.clientWidth;
399
- return true;
400
- }
401
- };
402
- const isNextDirection = type === 'next';
403
- // First pass: Calculate in primary direction
404
- const primaryRange = this.getPrimaryRange(isNextDirection, startIndex, this.tabButtons().length);
405
- this.traverseRange(primaryRange, calculateConsumedWidth);
406
- // Second pass: Calculate in opposite direction if space available
407
- if (consumedWidth < availableWidth) {
408
- const secondaryRange = this.getSecondaryRange(isNextDirection, startIndex, this.tabButtons().length);
409
- this.traverseRange(secondaryRange, calculateConsumedWidth);
410
- }
411
- visibleTabIndexes.sort((a, b) => a - b);
412
- this.visibleTabIndexes.set(visibleTabIndexes);
413
- this.scrollFirstVisibleTabIntoView();
414
- }
415
- }
303
+ this.focusKeyManager?.setNextItemActive();
416
304
  }
417
305
  /** @internal */
418
306
  getNextIndexToFocus(currentIndex) {
@@ -425,32 +313,9 @@ class SiTabsetNextComponent {
425
313
  }
426
314
  return -1;
427
315
  }
428
- getPrimaryRange(isNextDirection, startIndex, length) {
429
- return isNextDirection
430
- ? { start: startIndex, end: 0, step: -1 }
431
- : { start: startIndex, end: length - 1, step: 1 };
432
- }
433
- getSecondaryRange(isNextDirection, startIndex, length) {
434
- return isNextDirection
435
- ? { start: startIndex + 1, end: length - 1, step: 1 }
436
- : { start: startIndex - 1, end: 0, step: -1 };
437
- }
438
- traverseRange(range, callback) {
439
- const condition = (i) => (range.step > 0 ? i <= range.end : i >= range.end);
440
- for (let i = range.start; condition(i); i += range.step) {
441
- if (callback(i)) {
442
- break;
443
- }
444
- }
445
- }
446
- scrollFirstVisibleTabIntoView() {
447
- setTimeout(() => {
448
- this.tabButtons().at(this.visibleTabIndexes()[0])?.nativeElement.scrollIntoView({
449
- behavior: 'instant',
450
- inline: 'start',
451
- block: 'nearest'
452
- });
453
- });
316
+ resizeContainer(width, scrollWidth) {
317
+ // 48px is the width of the menu button.
318
+ this.showMenuButton.set(scrollWidth > width + (this.showMenuButton() ? 48 : 0));
454
319
  }
455
320
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiTabsetNextComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
456
321
  static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.6", type: SiTabsetNextComponent, isStandalone: true, selector: "si-tabset-next", outputs: { deselect: "deselect" }, providers: [
@@ -458,7 +323,7 @@ class SiTabsetNextComponent {
458
323
  provide: SI_TABSET_NEXT,
459
324
  useExisting: SiTabsetNextComponent
460
325
  }
461
- ], queries: [{ propertyName: "tabPanelsLinks", predicate: SiTabNextLinkComponent, isSignal: true }, { propertyName: "tabPanelsComponents", predicate: SiTabNextComponent, isSignal: true }], viewQueries: [{ propertyName: "tabContainer", first: true, predicate: ["tabContainer"], descendants: true, isSignal: true }, { propertyName: "tabScrollContainer", first: true, predicate: ["tabScrollContainer"], descendants: true, isSignal: true }, { propertyName: "menu", first: true, predicate: ["menu"], descendants: true, read: CdkMenu, isSignal: true }, { propertyName: "menuButton", first: true, predicate: ["menuButton"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"tabs-container\">\n <div\n #tabContainer\n class=\"tab-container-buttonbar-list nav nav-tabs\"\n (siResizeObserver)=\"resize($event)\"\n >\n <div\n #tabScrollContainer\n role=\"tablist\"\n tabindex=\"-1\"\n class=\"d-flex tabs-wrapper\"\n [style.max-width.px]=\"maxWrapperWidth()\"\n >\n <ng-content />\n </div>\n\n @if (visibleTabIndexes().length < tabPanels().length) {\n <button\n #menuButton\n type=\"button\"\n class=\"dropdown btn btn-tertiary focus-inside\"\n tabindex=\"-1\"\n aria-hidden=\"true\"\n [cdkMenuTriggerFor]=\"tabsMenu\"\n (cdkMenuOpened)=\"menuOpened()\"\n >\n <i class=\"icon element-options m-0\"></i>\n </button>\n }\n </div>\n @let tabContent = this.activeTab()?.tabContent();\n @let activeTab = this.activeTab();\n\n @if (activeTab) {\n <div\n class=\"tab-content\"\n role=\"tabpanel\"\n [id]=\"'content-' + activeTab.tabId\"\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\n<ng-template #tabsMenu>\n <si-menu #menu>\n @for (tab of tabPanels(); track tab) {\n @let badgeColor = tab.badgeColor();\n @let badgeIsNumber = tab.badgeIsNumber();\n\n @if (badgeColor && badgeIsNumber) {\n <!-- eslint-disable @angular-eslint/template/no-any -->\n <a\n #menuItem\n si-menu-item\n [disabled]=\"tab.disabledTab()\"\n [badgeColor]=\"badgeColor\"\n [badge]=\"$any(tab.badgeContent())\"\n [icon]=\"tab.icon()\"\n [routerLink]=\"tabIsLink(tab) ? tab.routerLink?.urlTree : undefined\"\n (keydown.enter)=\"tab.selectTab(true)\"\n (triggered)=\"tab.selectTab(true)\"\n >\n <ng-container [ngTemplateOutlet]=\"badgeTemplate\" [ngTemplateOutletContext]=\"{ tab }\" />\n </a>\n } @else if (badgeIsNumber && badgeColor) {\n <a\n #menuItem\n si-menu-item\n [disabled]=\"tab.disabledTab()\"\n [icon]=\"tab.icon()\"\n [badgeColor]=\"badgeColor\"\n [badge]=\"$any(tab.badgeContent())\"\n [routerLink]=\"tabIsLink(tab) ? tab.routerLink?.urlTree : undefined\"\n (keydown.enter)=\"tab.selectTab(true)\"\n (triggered)=\"tab.selectTab(true)\"\n >\n <!-- eslint-enable -->\n <ng-container [ngTemplateOutlet]=\"badgeTemplate\" [ngTemplateOutletContext]=\"{ tab }\" />\n </a>\n } @else {\n <a\n #menuItem\n si-menu-item\n [disabled]=\"tab.disabledTab()\"\n [icon]=\"tab.icon()\"\n [routerLink]=\"tabIsLink(tab) ? tab.routerLink?.urlTree : undefined\"\n (keydown.enter)=\"tab.selectTab(true)\"\n (triggered)=\"tab.selectTab(true)\"\n >\n <ng-container [ngTemplateOutlet]=\"badgeTemplate\" [ngTemplateOutletContext]=\"{ tab }\" />\n </a>\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 @if (tab.badgeContent() === true) {\n <span class=\"badge-dot\"></span>\n } @else if (tab.badgeContent() && !tab.badgeColor()) {\n <!-- eslint-disable-next-line @angular-eslint/template/no-any -->\n <span class=\"badge-text\"> {{ $any(tab.badgeContent() ?? '') | translate }}</span>\n }\n </div>\n</ng-template>\n", styles: [":host{display:block;flex-direction:column}.tabs-container{display:flex;flex-wrap:wrap;overflow:hidden;block-size:100%;min-block-size:40px}.tabs-container:before{inset-block-start:38px;inset-block-end:auto}.tab-container-buttonbar-list{display:flex;min-block-size:40px;overflow:hidden;flex:1;order:1;min-inline-size:100px}.btn.dropdown{color:var(--element-text-primary);min-inline-size:0;border-block-end:2px solid var(--element-ui-4);order:2;block-size:40px;padding-inline:12px}.btn.dropdown:hover{border-color:var(--element-ui-4);color:var(--element-action-secondary-text-hover)}a[si-menu-item] .badge-dot{inset-block-end:4px;min-inline-size:12px;margin-inline-start:4px}.tab-content{inline-size:100%;block-size:calc(100% - 40px);order:3}.tabs-wrapper{overflow-y:hidden;overflow-x:auto;scroll-behavior:smooth;scrollbar-width:none}\n"], dependencies: [{ kind: "ngmodule", type: SiTranslateModule }, { kind: "pipe", type: i1.SiTranslatePipe, name: "translate" }, { 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"], outputs: ["cdkMenuOpened", "cdkMenuClosed"], exportAs: ["cdkMenuTriggerFor"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: SiResizeObserverModule }, { kind: "directive", type: i2.SiResizeObserverDirective, selector: "[siResizeObserver]", inputs: ["resizeThrottle"], outputs: ["siResizeObserver"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
326
+ ], queries: [{ propertyName: "tabPanelsLinks", predicate: SiTabNextLinkComponent, isSignal: true }, { propertyName: "tabPanelsComponents", predicate: SiTabNextComponent, isSignal: true }], viewQueries: [{ propertyName: "menu", first: true, predicate: ["menu"], descendants: true, read: CdkMenu, 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 >\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 (cdkMenuOpened)=\"menuOpened()\"\n >\n <i class=\"icon element-options m-0\"></i>\n </button>\n }\n </div>\n @let tabContent = this.activeTab()?.tabContent();\n @let activeTab = this.activeTab();\n\n @if (activeTab) {\n <div\n class=\"tab-content\"\n role=\"tabpanel\"\n [id]=\"'content-' + activeTab.tabId\"\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\n<ng-template #tabsMenu>\n <si-menu #menu>\n @for (tab of tabPanels(); track tab) {\n @let badgeColor = tab.badgeColor();\n @let badgeIsNumber = tab.badgeIsNumber();\n\n @if (badgeColor && badgeIsNumber) {\n <!-- eslint-disable @angular-eslint/template/no-any -->\n <a\n #menuItem\n si-menu-item\n [disabled]=\"tab.disabledTab()\"\n [badgeColor]=\"badgeColor\"\n [badge]=\"$any(tab.badgeContent())\"\n [icon]=\"tab.icon()\"\n [routerLink]=\"tabIsLink(tab) ? tab.routerLink?.urlTree : undefined\"\n (keydown.enter)=\"tab.selectTab(true)\"\n (triggered)=\"tab.selectTab(true)\"\n >\n <ng-container [ngTemplateOutlet]=\"badgeTemplate\" [ngTemplateOutletContext]=\"{ tab }\" />\n </a>\n } @else if (badgeIsNumber && badgeColor) {\n <a\n #menuItem\n si-menu-item\n [disabled]=\"tab.disabledTab()\"\n [icon]=\"tab.icon()\"\n [badgeColor]=\"badgeColor\"\n [badge]=\"$any(tab.badgeContent())\"\n [routerLink]=\"tabIsLink(tab) ? tab.routerLink?.urlTree : undefined\"\n (keydown.enter)=\"tab.selectTab(true)\"\n (triggered)=\"tab.selectTab(true)\"\n >\n <!-- eslint-enable -->\n <ng-container [ngTemplateOutlet]=\"badgeTemplate\" [ngTemplateOutletContext]=\"{ tab }\" />\n </a>\n } @else {\n <a\n #menuItem\n si-menu-item\n [disabled]=\"tab.disabledTab()\"\n [icon]=\"tab.icon()\"\n [routerLink]=\"tabIsLink(tab) ? tab.routerLink?.urlTree : undefined\"\n (keydown.enter)=\"tab.selectTab(true)\"\n (triggered)=\"tab.selectTab(true)\"\n >\n <ng-container [ngTemplateOutlet]=\"badgeTemplate\" [ngTemplateOutletContext]=\"{ tab }\" />\n </a>\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 @if (tab.badgeContent() === true) {\n <span class=\"badge-dot\"></span>\n } @else if (tab.badgeContent() && !tab.badgeColor()) {\n <!-- eslint-disable-next-line @angular-eslint/template/no-any -->\n <span class=\"badge-text\"> {{ $any(tab.badgeContent() ?? '') | translate }}</span>\n }\n </div>\n</ng-template>\n", styles: [":host{display:block;flex-direction:column}.tabs-container{display:flex;flex-wrap:wrap;overflow:hidden;block-size:100%;min-block-size:40px}.tabs-container:before{inset-block-start:38px;inset-block-end:auto}.tab-container-buttonbar-list{display:flex;min-block-size:40px;overflow:hidden;flex:1;order:1;min-inline-size:100px}.btn.dropdown{color:var(--element-text-primary);min-inline-size:0;border-block-end:2px solid var(--element-ui-4);order:2;block-size:40px;padding-inline:12px;flex-shrink:0}.btn.dropdown:hover{border-color:var(--element-ui-4);color:var(--element-action-secondary-text-hover)}a[si-menu-item] .badge-dot{inset-block-end:4px;min-inline-size:12px;margin-inline-start:4px}.tab-content{inline-size:100%;block-size:calc(100% - 40px);order:3}.tabs-wrapper{overflow-y:hidden;overflow-x:auto;scroll-behavior:smooth;scrollbar-width:none}\n"], dependencies: [{ kind: "ngmodule", type: SiTranslateModule }, { kind: "pipe", type: i1.SiTranslatePipe, name: "translate" }, { 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"], outputs: ["cdkMenuOpened", "cdkMenuClosed"], exportAs: ["cdkMenuTriggerFor"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: SiResizeObserverModule }, { kind: "directive", type: i2.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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
462
327
  }
463
328
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiTabsetNextComponent, decorators: [{
464
329
  type: Component,
@@ -475,7 +340,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImpor
475
340
  provide: SI_TABSET_NEXT,
476
341
  useExisting: SiTabsetNextComponent
477
342
  }
478
- ], template: "<div class=\"tabs-container\">\n <div\n #tabContainer\n class=\"tab-container-buttonbar-list nav nav-tabs\"\n (siResizeObserver)=\"resize($event)\"\n >\n <div\n #tabScrollContainer\n role=\"tablist\"\n tabindex=\"-1\"\n class=\"d-flex tabs-wrapper\"\n [style.max-width.px]=\"maxWrapperWidth()\"\n >\n <ng-content />\n </div>\n\n @if (visibleTabIndexes().length < tabPanels().length) {\n <button\n #menuButton\n type=\"button\"\n class=\"dropdown btn btn-tertiary focus-inside\"\n tabindex=\"-1\"\n aria-hidden=\"true\"\n [cdkMenuTriggerFor]=\"tabsMenu\"\n (cdkMenuOpened)=\"menuOpened()\"\n >\n <i class=\"icon element-options m-0\"></i>\n </button>\n }\n </div>\n @let tabContent = this.activeTab()?.tabContent();\n @let activeTab = this.activeTab();\n\n @if (activeTab) {\n <div\n class=\"tab-content\"\n role=\"tabpanel\"\n [id]=\"'content-' + activeTab.tabId\"\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\n<ng-template #tabsMenu>\n <si-menu #menu>\n @for (tab of tabPanels(); track tab) {\n @let badgeColor = tab.badgeColor();\n @let badgeIsNumber = tab.badgeIsNumber();\n\n @if (badgeColor && badgeIsNumber) {\n <!-- eslint-disable @angular-eslint/template/no-any -->\n <a\n #menuItem\n si-menu-item\n [disabled]=\"tab.disabledTab()\"\n [badgeColor]=\"badgeColor\"\n [badge]=\"$any(tab.badgeContent())\"\n [icon]=\"tab.icon()\"\n [routerLink]=\"tabIsLink(tab) ? tab.routerLink?.urlTree : undefined\"\n (keydown.enter)=\"tab.selectTab(true)\"\n (triggered)=\"tab.selectTab(true)\"\n >\n <ng-container [ngTemplateOutlet]=\"badgeTemplate\" [ngTemplateOutletContext]=\"{ tab }\" />\n </a>\n } @else if (badgeIsNumber && badgeColor) {\n <a\n #menuItem\n si-menu-item\n [disabled]=\"tab.disabledTab()\"\n [icon]=\"tab.icon()\"\n [badgeColor]=\"badgeColor\"\n [badge]=\"$any(tab.badgeContent())\"\n [routerLink]=\"tabIsLink(tab) ? tab.routerLink?.urlTree : undefined\"\n (keydown.enter)=\"tab.selectTab(true)\"\n (triggered)=\"tab.selectTab(true)\"\n >\n <!-- eslint-enable -->\n <ng-container [ngTemplateOutlet]=\"badgeTemplate\" [ngTemplateOutletContext]=\"{ tab }\" />\n </a>\n } @else {\n <a\n #menuItem\n si-menu-item\n [disabled]=\"tab.disabledTab()\"\n [icon]=\"tab.icon()\"\n [routerLink]=\"tabIsLink(tab) ? tab.routerLink?.urlTree : undefined\"\n (keydown.enter)=\"tab.selectTab(true)\"\n (triggered)=\"tab.selectTab(true)\"\n >\n <ng-container [ngTemplateOutlet]=\"badgeTemplate\" [ngTemplateOutletContext]=\"{ tab }\" />\n </a>\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 @if (tab.badgeContent() === true) {\n <span class=\"badge-dot\"></span>\n } @else if (tab.badgeContent() && !tab.badgeColor()) {\n <!-- eslint-disable-next-line @angular-eslint/template/no-any -->\n <span class=\"badge-text\"> {{ $any(tab.badgeContent() ?? '') | translate }}</span>\n }\n </div>\n</ng-template>\n", styles: [":host{display:block;flex-direction:column}.tabs-container{display:flex;flex-wrap:wrap;overflow:hidden;block-size:100%;min-block-size:40px}.tabs-container:before{inset-block-start:38px;inset-block-end:auto}.tab-container-buttonbar-list{display:flex;min-block-size:40px;overflow:hidden;flex:1;order:1;min-inline-size:100px}.btn.dropdown{color:var(--element-text-primary);min-inline-size:0;border-block-end:2px solid var(--element-ui-4);order:2;block-size:40px;padding-inline:12px}.btn.dropdown:hover{border-color:var(--element-ui-4);color:var(--element-action-secondary-text-hover)}a[si-menu-item] .badge-dot{inset-block-end:4px;min-inline-size:12px;margin-inline-start:4px}.tab-content{inline-size:100%;block-size:calc(100% - 40px);order:3}.tabs-wrapper{overflow-y:hidden;overflow-x:auto;scroll-behavior:smooth;scrollbar-width:none}\n"] }]
343
+ ], 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 >\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 (cdkMenuOpened)=\"menuOpened()\"\n >\n <i class=\"icon element-options m-0\"></i>\n </button>\n }\n </div>\n @let tabContent = this.activeTab()?.tabContent();\n @let activeTab = this.activeTab();\n\n @if (activeTab) {\n <div\n class=\"tab-content\"\n role=\"tabpanel\"\n [id]=\"'content-' + activeTab.tabId\"\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\n<ng-template #tabsMenu>\n <si-menu #menu>\n @for (tab of tabPanels(); track tab) {\n @let badgeColor = tab.badgeColor();\n @let badgeIsNumber = tab.badgeIsNumber();\n\n @if (badgeColor && badgeIsNumber) {\n <!-- eslint-disable @angular-eslint/template/no-any -->\n <a\n #menuItem\n si-menu-item\n [disabled]=\"tab.disabledTab()\"\n [badgeColor]=\"badgeColor\"\n [badge]=\"$any(tab.badgeContent())\"\n [icon]=\"tab.icon()\"\n [routerLink]=\"tabIsLink(tab) ? tab.routerLink?.urlTree : undefined\"\n (keydown.enter)=\"tab.selectTab(true)\"\n (triggered)=\"tab.selectTab(true)\"\n >\n <ng-container [ngTemplateOutlet]=\"badgeTemplate\" [ngTemplateOutletContext]=\"{ tab }\" />\n </a>\n } @else if (badgeIsNumber && badgeColor) {\n <a\n #menuItem\n si-menu-item\n [disabled]=\"tab.disabledTab()\"\n [icon]=\"tab.icon()\"\n [badgeColor]=\"badgeColor\"\n [badge]=\"$any(tab.badgeContent())\"\n [routerLink]=\"tabIsLink(tab) ? tab.routerLink?.urlTree : undefined\"\n (keydown.enter)=\"tab.selectTab(true)\"\n (triggered)=\"tab.selectTab(true)\"\n >\n <!-- eslint-enable -->\n <ng-container [ngTemplateOutlet]=\"badgeTemplate\" [ngTemplateOutletContext]=\"{ tab }\" />\n </a>\n } @else {\n <a\n #menuItem\n si-menu-item\n [disabled]=\"tab.disabledTab()\"\n [icon]=\"tab.icon()\"\n [routerLink]=\"tabIsLink(tab) ? tab.routerLink?.urlTree : undefined\"\n (keydown.enter)=\"tab.selectTab(true)\"\n (triggered)=\"tab.selectTab(true)\"\n >\n <ng-container [ngTemplateOutlet]=\"badgeTemplate\" [ngTemplateOutletContext]=\"{ tab }\" />\n </a>\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 @if (tab.badgeContent() === true) {\n <span class=\"badge-dot\"></span>\n } @else if (tab.badgeContent() && !tab.badgeColor()) {\n <!-- eslint-disable-next-line @angular-eslint/template/no-any -->\n <span class=\"badge-text\"> {{ $any(tab.badgeContent() ?? '') | translate }}</span>\n }\n </div>\n</ng-template>\n", styles: [":host{display:block;flex-direction:column}.tabs-container{display:flex;flex-wrap:wrap;overflow:hidden;block-size:100%;min-block-size:40px}.tabs-container:before{inset-block-start:38px;inset-block-end:auto}.tab-container-buttonbar-list{display:flex;min-block-size:40px;overflow:hidden;flex:1;order:1;min-inline-size:100px}.btn.dropdown{color:var(--element-text-primary);min-inline-size:0;border-block-end:2px solid var(--element-ui-4);order:2;block-size:40px;padding-inline:12px;flex-shrink:0}.btn.dropdown:hover{border-color:var(--element-ui-4);color:var(--element-action-secondary-text-hover)}a[si-menu-item] .badge-dot{inset-block-end:4px;min-inline-size:12px;margin-inline-start:4px}.tab-content{inline-size:100%;block-size:calc(100% - 40px);order:3}.tabs-wrapper{overflow-y:hidden;overflow-x:auto;scroll-behavior:smooth;scrollbar-width:none}\n"] }]
479
344
  }] });
480
345
 
481
346
  /**