diff --git a/api-goldens/element-ng/tabs/index.api.md b/api-goldens/element-ng/tabs/index.api.md index 58bb714e7..0928625af 100644 --- a/api-goldens/element-ng/tabs/index.api.md +++ b/api-goldens/element-ng/tabs/index.api.md @@ -9,6 +9,7 @@ import { ElementRef } from '@angular/core'; import { FocusableOption } from '@angular/cdk/a11y'; import { FocusKeyManager } from '@angular/cdk/a11y'; import * as i1 from '@angular/router'; +import * as i2 from '@siemens/element-ng/tooltip'; import { OnDestroy } from '@angular/core'; import { RouterLink } from '@angular/router'; import { RouterLinkActive } from '@angular/router'; @@ -19,6 +20,7 @@ import { TranslatableString } from '@siemens/element-translate-ng/translate'; // @public export class SiTabComponent extends SiTabBaseDirective implements OnDestroy { + constructor(); readonly active: _angular_core.ModelSignal; readonly canActivate: _angular_core.InputSignal<(() => boolean) | undefined>; readonly canDeactivate: _angular_core.InputSignal<(() => boolean) | undefined>; @@ -28,6 +30,7 @@ export class SiTabComponent extends SiTabBaseDirective implements OnDestroy { // @public export class SiTabLinkComponent extends SiTabBaseDirective { + constructor(); // (undocumented) readonly active: _angular_core.Signal; // (undocumented) diff --git a/api-goldens/element-ng/tooltip/index.api.md b/api-goldens/element-ng/tooltip/index.api.md index 45bb40baf..09a441f1e 100644 --- a/api-goldens/element-ng/tooltip/index.api.md +++ b/api-goldens/element-ng/tooltip/index.api.md @@ -18,7 +18,8 @@ import { Type } from '@angular/core'; export class SiTooltipDirective implements OnDestroy { readonly isDisabled: i0.InputSignalWithTransform; readonly placement: i0.InputSignal<"auto" | "top" | "start" | "end" | "bottom">; - readonly siTooltip: i0.InputSignal | TranslatableString>; + setTooltipContent(content: TranslatableString | TemplateRef): void; + readonly siTooltip: i0.ModelSignal | TranslatableString>; readonly tooltipContext: i0.InputSignal; } diff --git a/playwright/e2e/element-examples/si-tabs.spec.ts b/playwright/e2e/element-examples/si-tabs.spec.ts index 127164933..a3e3d77d5 100644 --- a/playwright/e2e/element-examples/si-tabs.spec.ts +++ b/playwright/e2e/element-examples/si-tabs.spec.ts @@ -8,6 +8,7 @@ test.describe('si-tabs', () => { const example = 'si-tabs/si-tabs'; const routingExample = 'si-tabs/si-tabs-routing'; const iconsExample = 'si-tabs/si-tabs-icons'; + const routingIconsExample = 'si-tabs/si-tabs-routing-icons'; test(example, async ({ page, si }) => { await si.visitExample(example); @@ -61,6 +62,17 @@ test.describe('si-tabs', () => { test(example + ' icons', async ({ page, si }) => { await si.visitExample(iconsExample); + await expect(page.getByRole('tab', { name: 'Lobby' })).toBeVisible(); + await page.getByRole('tab', { name: 'Lobby' }).click(); + await expect(page.getByText('Content for Lobby')).toBeVisible(); await si.runVisualAndA11yTests('tabs-icons'); }); + + test(example + ' routing icons', async ({ page, si }) => { + await si.visitExample(routingIconsExample); + await expect(page.getByRole('tab', { name: 'Home' })).toBeVisible(); + await page.getByRole('tab', { name: 'Home' }).click(); + await expect(page.getByText('This is the home page')).toBeVisible(); + await si.runVisualAndA11yTests('tabs-routing-icons'); + }); }); diff --git a/playwright/snapshots/si-tabs.spec.ts-snapshots/si-tabs--si-tabs-icons--tabs-icons-element-examples-chromium-dark-linux.png b/playwright/snapshots/si-tabs.spec.ts-snapshots/si-tabs--si-tabs-icons--tabs-icons-element-examples-chromium-dark-linux.png index 8f2992b8a..42dd8ea75 100644 --- a/playwright/snapshots/si-tabs.spec.ts-snapshots/si-tabs--si-tabs-icons--tabs-icons-element-examples-chromium-dark-linux.png +++ b/playwright/snapshots/si-tabs.spec.ts-snapshots/si-tabs--si-tabs-icons--tabs-icons-element-examples-chromium-dark-linux.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:82d6fef3a59c150821b7c7ea8960b253a085d28e1e2759f14e74404290dfd573 -size 9236 +oid sha256:748bc60aee572f99c5b39a326d78eec1bb1abdc9bf64c42de3ab410196547802 +size 10154 diff --git a/playwright/snapshots/si-tabs.spec.ts-snapshots/si-tabs--si-tabs-icons--tabs-icons-element-examples-chromium-light-linux.png b/playwright/snapshots/si-tabs.spec.ts-snapshots/si-tabs--si-tabs-icons--tabs-icons-element-examples-chromium-light-linux.png index 7df4f376c..4e980d9ba 100644 --- a/playwright/snapshots/si-tabs.spec.ts-snapshots/si-tabs--si-tabs-icons--tabs-icons-element-examples-chromium-light-linux.png +++ b/playwright/snapshots/si-tabs.spec.ts-snapshots/si-tabs--si-tabs-icons--tabs-icons-element-examples-chromium-light-linux.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:1b26f3bbd0d46fecb99522881bc5337df99fcb03b21c0fa1f4e7d6c0e4bdd811 -size 9291 +oid sha256:0d68da558b1d0e1f2e98a1ad91e6ce27e7d001938b14930ddb265f4749d8ff48 +size 10222 diff --git a/playwright/snapshots/si-tabs.spec.ts-snapshots/si-tabs--si-tabs-icons--tabs-icons.yaml b/playwright/snapshots/si-tabs.spec.ts-snapshots/si-tabs--si-tabs-icons--tabs-icons.yaml index 75f785b32..23fb41411 100644 --- a/playwright/snapshots/si-tabs.spec.ts-snapshots/si-tabs--si-tabs-icons--tabs-icons.yaml +++ b/playwright/snapshots/si-tabs.spec.ts-snapshots/si-tabs--si-tabs-icons--tabs-icons.yaml @@ -1,7 +1,8 @@ - tablist: - - tab /\d+/ [selected] - - tab - - tab - - tab "1" -- tabpanel /\d+/: - - paragraph: Content for Reception \ No newline at end of file + - tab /Reception \d+/ + - tab "Conference" + - tab "Lobby" [selected] + - tab "Pantry 1" +- tabpanel "Lobby": + - paragraph: Content for Lobby +- tooltip "Lobby" \ No newline at end of file diff --git a/playwright/snapshots/si-tabs.spec.ts-snapshots/si-tabs--si-tabs-routing--tabs-menu-routing-coverage-element-examples-chromium-light-linux.png b/playwright/snapshots/si-tabs.spec.ts-snapshots/si-tabs--si-tabs-routing--tabs-menu-routing-coverage-element-examples-chromium-light-linux.png index 790c7fe8e..a06a4724a 100644 --- a/playwright/snapshots/si-tabs.spec.ts-snapshots/si-tabs--si-tabs-routing--tabs-menu-routing-coverage-element-examples-chromium-light-linux.png +++ b/playwright/snapshots/si-tabs.spec.ts-snapshots/si-tabs--si-tabs-routing--tabs-menu-routing-coverage-element-examples-chromium-light-linux.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:4ab392c954f1eff7194d1df4d5626da06764d69009d7e3610c67593cc6ee21a4 -size 15259 +oid sha256:4230ef4ddc0c4e3e75857e97489f59b4a80d1b94e573bba26337314957096003 +size 15217 diff --git a/playwright/snapshots/si-tabs.spec.ts-snapshots/si-tabs--si-tabs-routing--tabs-menu-routing-element-examples-chromium-light-linux.png b/playwright/snapshots/si-tabs.spec.ts-snapshots/si-tabs--si-tabs-routing--tabs-menu-routing-element-examples-chromium-light-linux.png index 960d4c4ed..d40bc980b 100644 --- a/playwright/snapshots/si-tabs.spec.ts-snapshots/si-tabs--si-tabs-routing--tabs-menu-routing-element-examples-chromium-light-linux.png +++ b/playwright/snapshots/si-tabs.spec.ts-snapshots/si-tabs--si-tabs-routing--tabs-menu-routing-element-examples-chromium-light-linux.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:1beb7966ff85c91eed85237c0bdb80bf92f25e702ba1f605d90efb94586dc381 -size 9079 +oid sha256:63ffff8e4b921cd0e4d9a2fb590017b9bc70918e9a0c37f2e67b5d22f80ac1e9 +size 9091 diff --git a/playwright/snapshots/si-tabs.spec.ts-snapshots/si-tabs--si-tabs-routing-icons--tabs-routing-icons-element-examples-chromium-dark-linux.png b/playwright/snapshots/si-tabs.spec.ts-snapshots/si-tabs--si-tabs-routing-icons--tabs-routing-icons-element-examples-chromium-dark-linux.png new file mode 100644 index 000000000..1ec89498b --- /dev/null +++ b/playwright/snapshots/si-tabs.spec.ts-snapshots/si-tabs--si-tabs-routing-icons--tabs-routing-icons-element-examples-chromium-dark-linux.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:1832cc6ca688b5004da1b4408176c042f076431e756070e21cc49c9f8513b88a +size 8161 diff --git a/playwright/snapshots/si-tabs.spec.ts-snapshots/si-tabs--si-tabs-routing-icons--tabs-routing-icons-element-examples-chromium-light-linux.png b/playwright/snapshots/si-tabs.spec.ts-snapshots/si-tabs--si-tabs-routing-icons--tabs-routing-icons-element-examples-chromium-light-linux.png new file mode 100644 index 000000000..45b5372be --- /dev/null +++ b/playwright/snapshots/si-tabs.spec.ts-snapshots/si-tabs--si-tabs-routing-icons--tabs-routing-icons-element-examples-chromium-light-linux.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:8208160d4340c7ead4696f26859d56e35eb5d0bdcefd6a0d7220dba4f2dc9d14 +size 8170 diff --git a/playwright/snapshots/si-tabs.spec.ts-snapshots/si-tabs--si-tabs-routing-icons--tabs-routing-icons.yaml b/playwright/snapshots/si-tabs.spec.ts-snapshots/si-tabs--si-tabs-routing-icons--tabs-routing-icons.yaml new file mode 100644 index 000000000..cce186267 --- /dev/null +++ b/playwright/snapshots/si-tabs.spec.ts-snapshots/si-tabs--si-tabs-routing-icons--tabs-routing-icons.yaml @@ -0,0 +1,6 @@ +- tablist: + - tab "Home" [selected] + - tab "Energy" + - tab "Test coverage" +- tabpanel "Home": This is the home page +- tooltip "Home" \ No newline at end of file diff --git a/playwright/snapshots/si-tooltip.spec.ts-snapshots/si-tooltip--si-tooltip--auto-element-examples-chromium-dark-linux.png b/playwright/snapshots/si-tooltip.spec.ts-snapshots/si-tooltip--si-tooltip--auto-element-examples-chromium-dark-linux.png index e2f481ae5..d1a89b910 100644 --- a/playwright/snapshots/si-tooltip.spec.ts-snapshots/si-tooltip--si-tooltip--auto-element-examples-chromium-dark-linux.png +++ b/playwright/snapshots/si-tooltip.spec.ts-snapshots/si-tooltip--si-tooltip--auto-element-examples-chromium-dark-linux.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:b2194d4fac84aa885a390b776fd548c6a622052e68b2d69a8bdd7813524b4a76 -size 16033 +oid sha256:24199f9fc3aeba5b2dfe7912d69149ea27821d2b67b971e72aa07de9c5e74fa8 +size 17924 diff --git a/playwright/snapshots/si-tooltip.spec.ts-snapshots/si-tooltip--si-tooltip--auto-element-examples-chromium-light-linux.png b/playwright/snapshots/si-tooltip.spec.ts-snapshots/si-tooltip--si-tooltip--auto-element-examples-chromium-light-linux.png index caefd383a..5c44c12da 100644 --- a/playwright/snapshots/si-tooltip.spec.ts-snapshots/si-tooltip--si-tooltip--auto-element-examples-chromium-light-linux.png +++ b/playwright/snapshots/si-tooltip.spec.ts-snapshots/si-tooltip--si-tooltip--auto-element-examples-chromium-light-linux.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:754014baad5d3ecd3cac920ea3895dcb0b9f6d81084dad5dc074a76ba5359767 -size 17221 +oid sha256:2b47e9e282be41911452ea764994fc989b4e1beabe54b862e6a3c85789d51a91 +size 19013 diff --git a/playwright/snapshots/si-tooltip.spec.ts-snapshots/si-tooltip--si-tooltip--bottom-element-examples-chromium-dark-linux.png b/playwright/snapshots/si-tooltip.spec.ts-snapshots/si-tooltip--si-tooltip--bottom-element-examples-chromium-dark-linux.png index fa93f20a8..f1d56caad 100644 --- a/playwright/snapshots/si-tooltip.spec.ts-snapshots/si-tooltip--si-tooltip--bottom-element-examples-chromium-dark-linux.png +++ b/playwright/snapshots/si-tooltip.spec.ts-snapshots/si-tooltip--si-tooltip--bottom-element-examples-chromium-dark-linux.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:ca570dff362df8c9e7569d5ba82208bf222e5b74e3aaf2eeab60840a58600f76 -size 14695 +oid sha256:5654ab3cb9483577b35819422d55e1a7c55d6bcbd294ad321afd1e887f4f6f69 +size 16573 diff --git a/playwright/snapshots/si-tooltip.spec.ts-snapshots/si-tooltip--si-tooltip--bottom-element-examples-chromium-light-linux.png b/playwright/snapshots/si-tooltip.spec.ts-snapshots/si-tooltip--si-tooltip--bottom-element-examples-chromium-light-linux.png index 417f9505c..b69e64252 100644 --- a/playwright/snapshots/si-tooltip.spec.ts-snapshots/si-tooltip--si-tooltip--bottom-element-examples-chromium-light-linux.png +++ b/playwright/snapshots/si-tooltip.spec.ts-snapshots/si-tooltip--si-tooltip--bottom-element-examples-chromium-light-linux.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:9cca04a8c827b02cf6226aa1349825a1e0c475a10c71522735ae719b818ad81f -size 15882 +oid sha256:22d7a3ce4ebb170b8b85976f947e2f2ded58f155270db242b2fc4f50faf2d696 +size 17714 diff --git a/playwright/snapshots/si-tooltip.spec.ts-snapshots/si-tooltip--si-tooltip--end-element-examples-chromium-dark-linux.png b/playwright/snapshots/si-tooltip.spec.ts-snapshots/si-tooltip--si-tooltip--end-element-examples-chromium-dark-linux.png index 8f740c16c..cae0c3bea 100644 --- a/playwright/snapshots/si-tooltip.spec.ts-snapshots/si-tooltip--si-tooltip--end-element-examples-chromium-dark-linux.png +++ b/playwright/snapshots/si-tooltip.spec.ts-snapshots/si-tooltip--si-tooltip--end-element-examples-chromium-dark-linux.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:a29403a8086bb1ea7cda8f9767ff09ec79e3322ec9d6afdaaff21c7826d173da -size 14733 +oid sha256:c7b11be38b736e79533f783951a427162ca091676f8dedb2a83e442e0ffa21a0 +size 16572 diff --git a/playwright/snapshots/si-tooltip.spec.ts-snapshots/si-tooltip--si-tooltip--end-element-examples-chromium-light-linux.png b/playwright/snapshots/si-tooltip.spec.ts-snapshots/si-tooltip--si-tooltip--end-element-examples-chromium-light-linux.png index 92c4aef03..5cd4451e9 100644 --- a/playwright/snapshots/si-tooltip.spec.ts-snapshots/si-tooltip--si-tooltip--end-element-examples-chromium-light-linux.png +++ b/playwright/snapshots/si-tooltip.spec.ts-snapshots/si-tooltip--si-tooltip--end-element-examples-chromium-light-linux.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:bea6e9d8b0ea785a5fe1c592c013a161bb420427f46d63351a2db54e38f7ba04 -size 15966 +oid sha256:59df7e213663d660c35abbec69c238e05e0a4a7716a6848bf9abc682183f901f +size 17769 diff --git a/playwright/snapshots/si-tooltip.spec.ts-snapshots/si-tooltip--si-tooltip--start-element-examples-chromium-dark-linux.png b/playwright/snapshots/si-tooltip.spec.ts-snapshots/si-tooltip--si-tooltip--start-element-examples-chromium-dark-linux.png index 9b93cb4fd..0a25e5df5 100644 --- a/playwright/snapshots/si-tooltip.spec.ts-snapshots/si-tooltip--si-tooltip--start-element-examples-chromium-dark-linux.png +++ b/playwright/snapshots/si-tooltip.spec.ts-snapshots/si-tooltip--si-tooltip--start-element-examples-chromium-dark-linux.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:e3c0008a42ae642b4312f7e66d36b9cf91e482f0e3510f449f2cedb9884c93b6 -size 14740 +oid sha256:3e2bfc057971ee53dc82b2e2c83956f4e6450c1f74d21050fe8fa7ea15ca599a +size 16583 diff --git a/playwright/snapshots/si-tooltip.spec.ts-snapshots/si-tooltip--si-tooltip--start-element-examples-chromium-light-linux.png b/playwright/snapshots/si-tooltip.spec.ts-snapshots/si-tooltip--si-tooltip--start-element-examples-chromium-light-linux.png index a615090c1..9566a76b5 100644 --- a/playwright/snapshots/si-tooltip.spec.ts-snapshots/si-tooltip--si-tooltip--start-element-examples-chromium-light-linux.png +++ b/playwright/snapshots/si-tooltip.spec.ts-snapshots/si-tooltip--si-tooltip--start-element-examples-chromium-light-linux.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:cc49fb8c53b5c40558feaedae0bef5a853220d2ef4a42f3b36188590db7913bf -size 15910 +oid sha256:987fab76e26569e8c2b04cfc188cafd7f699c8af1931d9d385b704728ec803a9 +size 17718 diff --git a/playwright/snapshots/si-tooltip.spec.ts-snapshots/si-tooltip--si-tooltip--top-element-examples-chromium-dark-linux.png b/playwright/snapshots/si-tooltip.spec.ts-snapshots/si-tooltip--si-tooltip--top-element-examples-chromium-dark-linux.png index 16f2d80db..3ec67dfc1 100644 --- a/playwright/snapshots/si-tooltip.spec.ts-snapshots/si-tooltip--si-tooltip--top-element-examples-chromium-dark-linux.png +++ b/playwright/snapshots/si-tooltip.spec.ts-snapshots/si-tooltip--si-tooltip--top-element-examples-chromium-dark-linux.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:3bc29f7a946607e9e5f599369faa524bddb0bbf354b3250056ae69e4c901d5e2 -size 14941 +oid sha256:221ad1c7b30069bd5f3e4d99bb6714ec9c04abc2feece9afb44d432e4278ad63 +size 16817 diff --git a/playwright/snapshots/si-tooltip.spec.ts-snapshots/si-tooltip--si-tooltip--top-element-examples-chromium-light-linux.png b/playwright/snapshots/si-tooltip.spec.ts-snapshots/si-tooltip--si-tooltip--top-element-examples-chromium-light-linux.png index 517cace5e..32caa5d18 100644 --- a/playwright/snapshots/si-tooltip.spec.ts-snapshots/si-tooltip--si-tooltip--top-element-examples-chromium-light-linux.png +++ b/playwright/snapshots/si-tooltip.spec.ts-snapshots/si-tooltip--si-tooltip--top-element-examples-chromium-light-linux.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:fefe4c4962c587aa4f748f547993d27716fcb17bd1c2af2add469d95f9f3af66 -size 16119 +oid sha256:26241de8e9da693556ace41b1f6863e2048ea81fe346fd1b92e7971054bb7d65 +size 17952 diff --git a/projects/element-ng/tabs/si-tab-link.component.ts b/projects/element-ng/tabs/si-tab-link.component.ts index aaad09605..365b62c79 100644 --- a/projects/element-ng/tabs/si-tab-link.component.ts +++ b/projects/element-ng/tabs/si-tab-link.component.ts @@ -2,10 +2,11 @@ * Copyright (c) Siemens 2016 - 2025 * SPDX-License-Identifier: MIT */ -import { ChangeDetectionStrategy, Component, inject } from '@angular/core'; +import { ChangeDetectionStrategy, Component, effect, inject } from '@angular/core'; import { toSignal } from '@angular/core/rxjs-interop'; import { Router, RouterLink, RouterLinkActive } from '@angular/router'; import { SiIconComponent } from '@siemens/element-ng/icon'; +import { SiTooltipDirective } from '@siemens/element-ng/tooltip'; import { SiTranslatePipe } from '@siemens/element-translate-ng/translate'; import { startWith } from 'rxjs/operators'; @@ -32,13 +33,10 @@ import { SiTabBaseDirective } from './si-tab-base.directive'; styleUrl: './si-tab.component.scss', providers: [{ provide: SiTabBaseDirective, useExisting: SiTabLinkComponent }], changeDetection: ChangeDetectionStrategy.OnPush, - hostDirectives: [ - { - directive: RouterLinkActive - } - ] + hostDirectives: [RouterLinkActive, SiTooltipDirective] }) export class SiTabLinkComponent extends SiTabBaseDirective { + private tooltipDirective = inject(SiTooltipDirective); private router = inject(Router); /** @internal */ routerLink = inject(RouterLink, { self: true }); @@ -59,4 +57,9 @@ export class SiTabLinkComponent extends SiTabBaseDirective { } super.selectTab(retainFocus); } + + constructor() { + super(); + effect(() => this.tooltipDirective.setTooltipContent(this.icon() ? this.heading() : '')); + } } diff --git a/projects/element-ng/tabs/si-tab.component.html b/projects/element-ng/tabs/si-tab.component.html index 9f7ecdff0..2f69a5732 100644 --- a/projects/element-ng/tabs/si-tab.component.html +++ b/projects/element-ng/tabs/si-tab.component.html @@ -1,6 +1,6 @@ @let icon = this.icon(); @if (icon) { - + } @else { {{ heading() | translate }} } diff --git a/projects/element-ng/tabs/si-tab.component.ts b/projects/element-ng/tabs/si-tab.component.ts index 26722cc55..0acbe3c88 100644 --- a/projects/element-ng/tabs/si-tab.component.ts +++ b/projects/element-ng/tabs/si-tab.component.ts @@ -2,8 +2,17 @@ * Copyright (c) Siemens 2016 - 2025 * SPDX-License-Identifier: MIT */ -import { ChangeDetectionStrategy, Component, input, model, OnDestroy } from '@angular/core'; +import { + ChangeDetectionStrategy, + Component, + effect, + inject, + input, + model, + OnDestroy +} from '@angular/core'; import { SiIconComponent } from '@siemens/element-ng/icon'; +import { SiTooltipDirective } from '@siemens/element-ng/tooltip'; import { SiTranslatePipe } from '@siemens/element-translate-ng/translate'; import { SiTabBadgeComponent } from './si-tab-badge.component'; @@ -31,9 +40,12 @@ import { SiTabBaseDirective } from './si-tab-base.directive'; host: { '(click)': 'selectTabByUser()', '(keydown.enter)': 'selectTabByUser()' - } + }, + hostDirectives: [SiTooltipDirective] }) export class SiTabComponent extends SiTabBaseDirective implements OnDestroy { + private tooltipDirective = inject(SiTooltipDirective); + /** * Whether the tab is active or not. * If set to `true`, the tab will be selected and its content will be displayed. @@ -77,4 +89,9 @@ export class SiTabComponent extends SiTabBaseDirective implements OnDestroy { override deSelectTab(): void { this.active.set(false); } + + constructor() { + super(); + effect(() => this.tooltipDirective.setTooltipContent(this.icon() ? this.heading() : '')); + } } diff --git a/projects/element-ng/tooltip/si-tooltip.directive.ts b/projects/element-ng/tooltip/si-tooltip.directive.ts index 252eb179e..e35dc4f3e 100644 --- a/projects/element-ng/tooltip/si-tooltip.directive.ts +++ b/projects/element-ng/tooltip/si-tooltip.directive.ts @@ -8,6 +8,7 @@ import { ElementRef, inject, input, + model, OnDestroy, TemplateRef } from '@angular/core'; @@ -36,7 +37,7 @@ export class SiTooltipDirective implements OnDestroy { * * @defaultValue '' */ - readonly siTooltip = input>(''); + readonly siTooltip = model>(''); /** * The placement of the tooltip. One of 'top', 'start', end', 'bottom' @@ -69,6 +70,14 @@ export class SiTooltipDirective implements OnDestroy { this.tooltipRef?.destroy(); } + /** + * Update the tooltip content. + * Can be used by components that use the tooltip directive via `hostDirectives`. + */ + setTooltipContent(content: TranslatableString | TemplateRef): void { + this.siTooltip.set(content); + } + private clearShowTimeout(): void { if (this.showTimeout) { clearTimeout(this.showTimeout); diff --git a/src/app/examples/si-tabs/si-tabs-arrow.html b/src/app/examples/si-tabs/si-tabs-arrow.html index cec190bc4..aa117bba8 100644 --- a/src/app/examples/si-tabs/si-tabs-arrow.html +++ b/src/app/examples/si-tabs/si-tabs-arrow.html @@ -32,10 +32,10 @@

Content Eleven

- +

Some content

- +

Some other content

diff --git a/src/app/examples/si-tabs/si-tabs-flex.html b/src/app/examples/si-tabs/si-tabs-flex.html index 14d1de21a..6c4dc04c4 100644 --- a/src/app/examples/si-tabs/si-tabs-flex.html +++ b/src/app/examples/si-tabs/si-tabs-flex.html @@ -2,12 +2,11 @@

Basic content

- +

Basic content 2

+ + + + + + diff --git a/src/app/examples/si-tabs/si-tabs-routing-icons.ts b/src/app/examples/si-tabs/si-tabs-routing-icons.ts new file mode 100644 index 000000000..f54eb9e0b --- /dev/null +++ b/src/app/examples/si-tabs/si-tabs-routing-icons.ts @@ -0,0 +1,101 @@ +/** + * Copyright (c) Siemens 2016 - 2025 + * SPDX-License-Identifier: MIT + */ +import { ChangeDetectionStrategy, AfterViewInit, Component, inject } from '@angular/core'; +import { ActivatedRoute, Router, RouterLink, RouterOutlet } from '@angular/router'; +import { Link, SiLinkDirective } from '@siemens/element-ng/link'; +import { SiTabsetComponent, SiTabLinkComponent } from '@siemens/element-ng/tabs'; +import { provideExampleRoutes } from '@siemens/live-preview'; + +// Dummy components to be used in the router outlet for the example +@Component({ + selector: 'app-home', + template: `
This is the home page
`, + changeDetection: ChangeDetectionStrategy.OnPush +}) +export class HomeComponent {} + +@Component({ + selector: 'app-energy', + template: `
Energy consumption
` +}) +export class EnergyComponent {} + +@Component({ + selector: 'app-test-coverage', + imports: [RouterOutlet, SiLinkDirective], + template: `
Total test coverage: 80% +
+
+ Check E2E coverage details
+
+ Check Unit tests coverage details +
+
+ +
` +}) +export class TestCoverageComponent { + e2eRouterLink: Link = { link: 'e2e-coverage' }; + unitRouterLink: Link = { link: 'unit-coverage' }; +} + +@Component({ + selector: 'app-e2e-coverage', + template: `E2E test coverage is 70%` +}) +export class E2ECoverageComponent {} + +@Component({ + selector: 'app-unit-coverage', + template: `Unit test coverage is 90%` +}) +export class UnitCoverageComponent {} + +@Component({ + selector: 'app-sample', + imports: [SiTabsetComponent, SiTabLinkComponent, RouterOutlet, RouterLink], + templateUrl: './si-tabs-routing-icons.html', + providers: [ + provideExampleRoutes([ + { + path: 'tab-1', + component: HomeComponent + }, + { + path: 'tab-2', + component: EnergyComponent + }, + { + path: 'tab-3', + component: TestCoverageComponent, + children: [ + { path: 'e2e-coverage', component: E2ECoverageComponent }, + { + path: 'unit-coverage', + component: UnitCoverageComponent + } + ] + } + ]) + ], + host: { class: 'p-5' } +}) +export class SampleComponent implements AfterViewInit { + protected tabLink1 = ['tab-1']; + protected tabLink2 = ['tab-2']; + protected tabLink3 = ['tab-3']; + + router = inject(Router); + activatedRoute = inject(ActivatedRoute); + ngAfterViewInit(): void { + // Wait for live preview to initialize the router configs + setTimeout(() => { + this.router.navigate(this.tabLink1, { + relativeTo: this.activatedRoute + }); + }, 1); + } +} diff --git a/src/app/examples/si-tooltip/si-tooltip.html b/src/app/examples/si-tooltip/si-tooltip.html index e10843482..bcc9ee614 100644 --- a/src/app/examples/si-tooltip/si-tooltip.html +++ b/src/app/examples/si-tooltip/si-tooltip.html @@ -123,22 +123,14 @@

Other examples

A long time ago in a galaxy far, far away... - -

Portfolio

+ +

Hi, I'm a robot

- -

Performance

+ +

Hi, I'm a microwave

- -

Sustainability

+ +

Hi, I'm a star