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