@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.
- package/breadcrumb-router/index.d.ts +8 -0
- package/breadcrumb-router/package.json +3 -0
- package/breadcrumb-router/si-breadcrumb-default-resolver.service.d.ts +23 -0
- package/breadcrumb-router/si-breadcrumb-router.component.d.ts +30 -0
- package/breadcrumb-router/si-breadcrumb-router.model.d.ts +53 -0
- package/breadcrumb-router/si-breadcrumb-router.module.d.ts +7 -0
- package/date-range-filter/si-date-range-filter.component.d.ts +5 -1
- package/fesm2022/siemens-element-ng-breadcrumb-router.mjs +263 -0
- package/fesm2022/siemens-element-ng-breadcrumb-router.mjs.map +1 -0
- package/fesm2022/siemens-element-ng-breadcrumb.mjs +1 -1
- package/fesm2022/siemens-element-ng-breadcrumb.mjs.map +1 -1
- package/fesm2022/siemens-element-ng-date-range-filter.mjs +26 -5
- package/fesm2022/siemens-element-ng-date-range-filter.mjs.map +1 -1
- package/fesm2022/siemens-element-ng-formly.mjs +2 -2
- package/fesm2022/siemens-element-ng-formly.mjs.map +1 -1
- package/fesm2022/siemens-element-ng-icon.mjs +8 -22
- package/fesm2022/siemens-element-ng-icon.mjs.map +1 -1
- package/fesm2022/siemens-element-ng-main-detail-container.mjs +269 -0
- package/fesm2022/siemens-element-ng-main-detail-container.mjs.map +1 -0
- package/fesm2022/siemens-element-ng-modal.mjs +1 -1
- package/fesm2022/siemens-element-ng-modal.mjs.map +1 -1
- package/fesm2022/siemens-element-ng-navbar-vertical.mjs +802 -0
- package/fesm2022/siemens-element-ng-navbar-vertical.mjs.map +1 -0
- package/fesm2022/siemens-element-ng-resize-observer.mjs +6 -3
- package/fesm2022/siemens-element-ng-resize-observer.mjs.map +1 -1
- package/fesm2022/siemens-element-ng-side-panel.mjs +1 -1
- package/fesm2022/siemens-element-ng-side-panel.mjs.map +1 -1
- package/fesm2022/siemens-element-ng-status-bar.mjs +1 -1
- package/fesm2022/siemens-element-ng-status-bar.mjs.map +1 -1
- package/fesm2022/siemens-element-ng-tabs-next.mjs +29 -164
- package/fesm2022/siemens-element-ng-tabs-next.mjs.map +1 -1
- package/fesm2022/siemens-element-ng-tabs.mjs +1 -1
- package/fesm2022/siemens-element-ng-tabs.mjs.map +1 -1
- package/fesm2022/siemens-element-ng-threshold.mjs +319 -0
- package/fesm2022/siemens-element-ng-threshold.mjs.map +1 -0
- package/fesm2022/siemens-element-ng-tour.mjs +384 -0
- package/fesm2022/siemens-element-ng-tour.mjs.map +1 -0
- package/fesm2022/siemens-element-ng-translate.mjs.map +1 -1
- package/fesm2022/siemens-element-ng-tree-view.mjs +1 -1
- package/fesm2022/siemens-element-ng-tree-view.mjs.map +1 -1
- package/fesm2022/siemens-element-ng-wizard.mjs +1 -1
- package/fesm2022/siemens-element-ng-wizard.mjs.map +1 -1
- package/icon/si-status-icon.component.d.ts +1 -6
- package/main-detail-container/index.d.ts +6 -0
- package/main-detail-container/package.json +3 -0
- package/main-detail-container/si-main-detail-container.component.d.ts +151 -0
- package/main-detail-container/si-main-detail-container.module.d.ts +7 -0
- package/navbar-vertical/index.d.ts +7 -0
- package/navbar-vertical/package.json +3 -0
- package/navbar-vertical/si-navbar-vertical-divider.component.d.ts +5 -0
- package/navbar-vertical/si-navbar-vertical-group-trigger.directive.d.ts +38 -0
- package/navbar-vertical/si-navbar-vertical-group.component.d.ts +16 -0
- package/navbar-vertical/si-navbar-vertical-header.component.d.ts +6 -0
- package/navbar-vertical/si-navbar-vertical-item-legacy.component.d.ts +17 -0
- package/navbar-vertical/si-navbar-vertical-item.component.d.ts +21 -0
- package/navbar-vertical/si-navbar-vertical.component.d.ts +148 -0
- package/navbar-vertical/si-navbar-vertical.model.d.ts +77 -0
- package/navbar-vertical/si-navbar-vertical.module.d.ts +7 -0
- package/navbar-vertical/si-navbar-vertical.provider.d.ts +7 -0
- package/package.json +24 -4
- package/resize-observer/si-resize-observer.directive.d.ts +3 -1
- package/tabs-next/si-tab-next-base.directive.d.ts +2 -5
- package/tabs-next/si-tab-next-link.component.d.ts +0 -2
- package/tabs-next/si-tabset-next.component.d.ts +3 -18
- package/template-i18n.json +16 -0
- package/threshold/index.d.ts +6 -0
- package/threshold/package.json +3 -0
- package/threshold/si-readonly-threshold-option.component.d.ts +11 -0
- package/threshold/si-threshold.component.d.ts +147 -0
- package/threshold/si-threshold.module.d.ts +7 -0
- package/tour/index.d.ts +6 -0
- package/tour/package.json +3 -0
- package/tour/si-tour-highlight.component.d.ts +15 -0
- package/tour/si-tour-token.model.d.ts +27 -0
- package/tour/si-tour.component.d.ts +31 -0
- package/tour/si-tour.model.d.ts +51 -0
- package/tour/si-tour.service.d.ts +62 -0
- package/translate/si-translatable-keys.interface.d.ts +16 -0
- 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.
|
|
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
|
-
|
|
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].
|
|
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
|
|
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
|
|
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
|
|
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
|
-
|
|
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
|
-
|
|
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
|
-
|
|
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
|
-
|
|
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
|
-
|
|
429
|
-
|
|
430
|
-
|
|
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: "
|
|
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
|
|
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
|
/**
|