From 2a9ba2e202fd168ef66ab808bd05b292810c89e8 Mon Sep 17 00:00:00 2001 From: Marco D'Auria Date: Fri, 6 Feb 2026 16:46:23 +0100 Subject: [PATCH 1/3] feat(tooltip): introduce tooltip overlay directive --- api-goldens/element-ng/tooltip/index.api.md | 5 ++ projects/element-ng/tooltip/index.ts | 1 + .../tooltip/si-tooltip-overlay.directive.ts | 56 +++++++++++++++++++ .../tooltip/si-tooltip.directive.ts | 16 ++++-- .../element-ng/tooltip/si-tooltip.module.ts | 5 +- 5 files changed, 76 insertions(+), 7 deletions(-) create mode 100644 projects/element-ng/tooltip/si-tooltip-overlay.directive.ts diff --git a/api-goldens/element-ng/tooltip/index.api.md b/api-goldens/element-ng/tooltip/index.api.md index 45bb40baf..685400b2b 100644 --- a/api-goldens/element-ng/tooltip/index.api.md +++ b/api-goldens/element-ng/tooltip/index.api.md @@ -26,6 +26,11 @@ export class SiTooltipDirective implements OnDestroy { export class SiTooltipModule { } +// @public +export class SiTooltipOverlayDirective extends SiTooltipDirective { + readonly siTooltipOverlay: i0.InputSignalWithTransform; +} + // (No @packageDocumentation comment for this package) ``` diff --git a/projects/element-ng/tooltip/index.ts b/projects/element-ng/tooltip/index.ts index df2455e82..95ad6963e 100644 --- a/projects/element-ng/tooltip/index.ts +++ b/projects/element-ng/tooltip/index.ts @@ -4,4 +4,5 @@ */ export * from './si-tooltip.module'; export * from './si-tooltip.directive'; +export * from './si-tooltip-overlay.directive'; export * from './si-tooltip.service'; diff --git a/projects/element-ng/tooltip/si-tooltip-overlay.directive.ts b/projects/element-ng/tooltip/si-tooltip-overlay.directive.ts new file mode 100644 index 000000000..83c0ffcb2 --- /dev/null +++ b/projects/element-ng/tooltip/si-tooltip-overlay.directive.ts @@ -0,0 +1,56 @@ +/** + * Copyright (c) Siemens 2016 - 2025 + * SPDX-License-Identifier: MIT + */ +import { Directive, input } from '@angular/core'; + +import { SiTooltipDirective } from './si-tooltip.directive'; +import { SiTooltipService } from './si-tooltip.service'; + +/** + * Directive for automatically showing tooltips on truncated text. + * Extends SiTooltipDirective but with key differences: + * - Does not set aria-describedby + * - Automatically copies the element's text content + * - Only shows when text is actually truncated + */ +@Directive({ + selector: '[siTooltipOverlay]', + providers: [SiTooltipService], + host: { + '[attr.aria-describedby]': 'null', + '(focus)': 'show(true)' + } +}) +export class SiTooltipOverlayDirective extends SiTooltipDirective { + /** + * Auto-detect text truncation and show it in the tooltip. + * Pass true to check the host element, or an HTMLElement to check a specific element. + * + * @defaultValue false + */ + readonly siTooltipOverlay = input(false, { + transform: (value: boolean | HTMLElement | ''): boolean | HTMLElement => { + return value === '' ? true : value; + } + }); + + protected override show(immediate = false): void { + const config = this.siTooltipOverlay(); + if (!config) { + return; + } + + const element = config === true ? this.elementRef.nativeElement : config; + if (element.scrollWidth <= element.clientWidth) { + return; + } + + const content = element.textContent?.trim() ?? ''; + if (!content) { + return; + } + + this.showTooltipWithContent(content, immediate); + } +} diff --git a/projects/element-ng/tooltip/si-tooltip.directive.ts b/projects/element-ng/tooltip/si-tooltip.directive.ts index 252eb179e..b31adeb7e 100644 --- a/projects/element-ng/tooltip/si-tooltip.directive.ts +++ b/projects/element-ng/tooltip/si-tooltip.directive.ts @@ -62,7 +62,7 @@ export class SiTooltipDirective implements OnDestroy { private tooltipRef?: TooltipRef; private showTimeout?: ReturnType; private tooltipService = inject(SiTooltipService); - private elementRef = inject(ElementRef); + protected elementRef = inject(ElementRef); ngOnDestroy(): void { this.clearShowTimeout(); @@ -76,9 +76,11 @@ export class SiTooltipDirective implements OnDestroy { } } - private showTooltip(immediate = false): void { - const siTooltip = this.siTooltip(); - if (this.isDisabled() || !siTooltip) { + protected showTooltipWithContent( + content: TranslatableString | TemplateRef, + immediate = false + ): void { + if (this.isDisabled() || !content) { return; } @@ -92,10 +94,14 @@ export class SiTooltipDirective implements OnDestroy { element: this.elementRef, placement: this.placement() }); - this.tooltipRef.show(this.siTooltip(), this.tooltipContext()); + this.tooltipRef.show(content, this.tooltipContext()); }, delay); } + private showTooltip(immediate = false): void { + this.showTooltipWithContent(this.siTooltip(), immediate); + } + protected focusIn(): void { this.showTooltip(true); } diff --git a/projects/element-ng/tooltip/si-tooltip.module.ts b/projects/element-ng/tooltip/si-tooltip.module.ts index 129b82b2a..5d50575b7 100644 --- a/projects/element-ng/tooltip/si-tooltip.module.ts +++ b/projects/element-ng/tooltip/si-tooltip.module.ts @@ -4,10 +4,11 @@ */ import { NgModule } from '@angular/core'; +import { SiTooltipOverlayDirective } from './si-tooltip-overlay.directive'; import { SiTooltipDirective } from './si-tooltip.directive'; @NgModule({ - imports: [SiTooltipDirective], - exports: [SiTooltipDirective] + imports: [SiTooltipDirective, SiTooltipOverlayDirective], + exports: [SiTooltipDirective, SiTooltipOverlayDirective] }) export class SiTooltipModule {} From cdd1175c5e0c9b99adba4d7e4131457a690e5905 Mon Sep 17 00:00:00 2001 From: Marco D'Auria Date: Fri, 6 Feb 2026 16:47:43 +0100 Subject: [PATCH 2/3] feat(tree-view): add tooltip overlay --- api-goldens/element-ng/tree-view/index.api.md | 2 ++ .../si-tree-view-item.component.html | 12 +++++--- .../si-tree-view-item.component.spec.ts | 30 +++++++++++-------- .../si-tree-view-item.component.ts | 1 + .../tree-view/si-tree-view.component.html | 6 +++- .../tree-view/si-tree-view.component.spec.ts | 8 +++-- .../tree-view/si-tree-view.component.ts | 9 +++++- 7 files changed, 48 insertions(+), 20 deletions(-) diff --git a/api-goldens/element-ng/tree-view/index.api.md b/api-goldens/element-ng/tree-view/index.api.md index 940dbade0..50d8f9842 100644 --- a/api-goldens/element-ng/tree-view/index.api.md +++ b/api-goldens/element-ng/tree-view/index.api.md @@ -217,6 +217,8 @@ export class SiTreeViewComponent implements OnInit, OnChanges, OnDestroy, AfterV export class SiTreeViewItemComponent implements OnInit, OnDestroy, AfterViewInit, FocusableOption, DoCheck { focus(): void; getLabel(): string; + // (undocumented) + readonly labelElement: _angular_core.Signal | undefined>; } // @public diff --git a/projects/element-ng/tree-view/si-tree-view-item/si-tree-view-item.component.html b/projects/element-ng/tree-view/si-tree-view-item/si-tree-view-item.component.html index 06d40a652..6e2630457 100644 --- a/projects/element-ng/tree-view/si-tree-view-item/si-tree-view-item.component.html +++ b/projects/element-ng/tree-view/si-tree-view-item/si-tree-view-item.component.html @@ -41,9 +41,13 @@ > @if (!templates().length) {
{{ - treeItem.label | translate - }}
+ {{ treeItem.label | translate }} +
} @else {
@@ -131,7 +135,7 @@ [ngTemplateOutletContext]="{ classNames: 'form-check' }" /> -

{{ treeItem.label | translate }}

+

{{ treeItem.label | translate }}

@if (showFolderStateEnd) { { fixture.detectChanges(); runOnPushChangeDetection(fixture); expect( - debugElement.query(By.css('si-tree-view-item .si-tree-view-item-object-data div')) - .nativeElement.textContent + debugElement + .query(By.css('si-tree-view-item .si-tree-view-item-object-data div')) + .nativeElement.textContent.trim() ).toBe('Company1'); fixture.componentInstance.items[0].label = 'Company4'; fixture.detectChanges(); runOnPushChangeDetection(fixture); expect( - debugElement.query(By.css('si-tree-view-item .si-tree-view-item-object-data div')) - .nativeElement.textContent + debugElement + .query(By.css('si-tree-view-item .si-tree-view-item-object-data div')) + .nativeElement.textContent.trim() ).toBe('Company4'); }); it('moves tree items within tree', async () => { @@ -192,16 +194,18 @@ describe('SiTreeViewComponentWithDragDrop', () => { fixture.detectChanges(); runOnPushChangeDetection(fixture); expect( - debugElement.query(By.css('si-tree-view-item .si-tree-view-item-object-data div')) - .nativeElement.textContent + debugElement + .query(By.css('si-tree-view-item .si-tree-view-item-object-data div')) + .nativeElement.textContent.trim() ).toBe('Company1'); fixture.componentInstance.items[0].label = 'Company4'; fixture.detectChanges(); runOnPushChangeDetection(fixture); expect( - debugElement.query(By.css('si-tree-view-item .si-tree-view-item-object-data div')) - .nativeElement.textContent + debugElement + .query(By.css('si-tree-view-item .si-tree-view-item-object-data div')) + .nativeElement.textContent.trim() ).toBe('Company4'); }); @@ -246,8 +250,9 @@ describe('SiTreeViewComponentWithDragDrop', () => { await fixture.whenStable(); fixture.detectChanges(); expect( - debugElement.query(By.css('si-tree-view-item .si-tree-view-item-object-data div')) - .nativeElement.textContent + debugElement + .query(By.css('si-tree-view-item .si-tree-view-item-object-data div')) + .nativeElement.textContent.trim() ).toBe('Company1'); expect(debugElement.query(By.css('si-tree-view-item')).nativeElement.tabIndex).toBe(0); @@ -259,8 +264,9 @@ describe('SiTreeViewComponentWithDragDrop', () => { }); fixture.detectChanges(); expect( - debugElement.query(By.css('si-tree-view-item .si-tree-view-item-object-data div')) - .nativeElement.textContent + debugElement + .query(By.css('si-tree-view-item .si-tree-view-item-object-data div')) + .nativeElement.textContent.trim() ).toBe('Company2'); expect(debugElement.query(By.css('si-tree-view-item')).nativeElement.tabIndex).toBe(0); }); diff --git a/projects/element-ng/tree-view/si-tree-view-item/si-tree-view-item.component.ts b/projects/element-ng/tree-view/si-tree-view-item/si-tree-view-item.component.ts index 465e062a3..9da1edcce 100644 --- a/projects/element-ng/tree-view/si-tree-view-item/si-tree-view-item.component.ts +++ b/projects/element-ng/tree-view/si-tree-view-item/si-tree-view-item.component.ts @@ -105,6 +105,7 @@ export class SiTreeViewItemComponent private indentLevel = this.treeItem.level ?? 0; private nextSiblingElement!: HTMLElement; protected readonly menuTrigger = viewChild(CdkMenuTrigger); + readonly labelElement = viewChild>('labelElement'); @HostBinding('attr.aria-level') protected get ariaLevel(): number { diff --git a/projects/element-ng/tree-view/si-tree-view.component.html b/projects/element-ng/tree-view/si-tree-view.component.html index d29161100..6ff839537 100644 --- a/projects/element-ng/tree-view/si-tree-view.component.html +++ b/projects/element-ng/tree-view/si-tree-view.component.html @@ -60,7 +60,11 @@
@if (!treeItemContentTemplate()) { - + }
} diff --git a/projects/element-ng/tree-view/si-tree-view.component.spec.ts b/projects/element-ng/tree-view/si-tree-view.component.spec.ts index f27a68200..67af000a0 100644 --- a/projects/element-ng/tree-view/si-tree-view.component.spec.ts +++ b/projects/element-ng/tree-view/si-tree-view.component.spec.ts @@ -764,8 +764,12 @@ describe('SiTreeViewComponent', () => { component.treeViewComponent().scrollItemIntoView(component.items[99]); fixture.detectChanges(); expect( - element.querySelector(`.si-tree-view-root-ul - si-tree-view-item:last-child .si-tree-view-item-object-data`)?.textContent + element + .querySelector( + `.si-tree-view-root-ul + si-tree-view-item:last-child .si-tree-view-item-object-data` + ) + ?.textContent?.trim() ).toBe('Test100'); }); diff --git a/projects/element-ng/tree-view/si-tree-view.component.ts b/projects/element-ng/tree-view/si-tree-view.component.ts index c7eeaac98..5246de06d 100644 --- a/projects/element-ng/tree-view/si-tree-view.component.ts +++ b/projects/element-ng/tree-view/si-tree-view.component.ts @@ -35,6 +35,7 @@ import { import { MenuItem as MenuItemLegacy } from '@siemens/element-ng/common'; import { MenuItem } from '@siemens/element-ng/menu'; import { ElementDimensions, ResizeObserverService } from '@siemens/element-ng/resize-observer'; +import { SiTooltipOverlayDirective } from '@siemens/element-ng/tooltip'; import { SiTranslatePipe, t, TranslatableString } from '@siemens/element-translate-ng/translate'; import { asyncScheduler, defer, fromEvent, merge, Observable, Subject, Subscription } from 'rxjs'; import { map, withLatestFrom } from 'rxjs/operators'; @@ -102,7 +103,13 @@ const rootDefaults: TreeItem = { */ @Component({ selector: 'si-tree-view', - imports: [SiTranslatePipe, SiTreeViewItemComponent, CdkScrollableModule, SiTreeViewItemDirective], + imports: [ + SiTranslatePipe, + SiTreeViewItemComponent, + CdkScrollableModule, + SiTreeViewItemDirective, + SiTooltipOverlayDirective + ], templateUrl: './si-tree-view.component.html', styleUrl: './si-tree-view.component.scss', providers: [ From 1dec2f51b142501356005200bfdf014f4cd52195 Mon Sep 17 00:00:00 2001 From: Marco D'Auria Date: Mon, 2 Feb 2026 15:28:01 +0100 Subject: [PATCH 3/3] docs(tooltip): update examples --- .../e2e/element-examples/si-tooltip.spec.ts | 7 +- ...o-element-examples-chromium-dark-linux.png | 4 +- ...-element-examples-chromium-light-linux.png | 4 +- .../si-tooltip--si-tooltip--auto.yaml | 42 +- ...m-element-examples-chromium-dark-linux.png | 4 +- ...-element-examples-chromium-light-linux.png | 4 +- .../si-tooltip--si-tooltip--bottom.yaml | 42 +- ...d-element-examples-chromium-dark-linux.png | 4 +- ...-element-examples-chromium-light-linux.png | 4 +- .../si-tooltip--si-tooltip--end.yaml | 42 +- ...t-element-examples-chromium-dark-linux.png | 4 +- ...-element-examples-chromium-light-linux.png | 4 +- .../si-tooltip--si-tooltip--start.yaml | 42 +- ...p-element-examples-chromium-dark-linux.png | 4 +- ...-element-examples-chromium-light-linux.png | 4 +- .../si-tooltip--si-tooltip--top.yaml | 42 +- src/app/examples/si-tooltip/si-tooltip.html | 522 +++++++++++++----- src/app/examples/si-tooltip/si-tooltip.ts | 187 ++++++- 18 files changed, 793 insertions(+), 173 deletions(-) diff --git a/playwright/e2e/element-examples/si-tooltip.spec.ts b/playwright/e2e/element-examples/si-tooltip.spec.ts index 510fe0d7a..4cfef8122 100644 --- a/playwright/e2e/element-examples/si-tooltip.spec.ts +++ b/playwright/e2e/element-examples/si-tooltip.spec.ts @@ -11,9 +11,14 @@ test.describe('Tooltip', () => { test(direction, async ({ page, si }) => { await si.visitExample(example); - await page.locator(`[placement="${direction}"]`).focus(); + await page + .locator(`[aria-label="Tooltip placement"] button[placement="${direction}"]`) + .focus(); await expect(page.locator('.tooltip')).toHaveCount(1); + await si.waitForAllAnimationsToComplete(); + await page.waitForTimeout(100); + await si.runVisualAndA11yTests(direction); }); }); 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..bff565e57 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:e6b43fb40c661a2f5b68855884a402ae5cb7429c462063a9d5e588e9e83a89f6 +size 50107 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..4f035a867 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:f59fbc5a90674fb6db46d47fa863e525cc910ece737f469ee245f74187663397 +size 49812 diff --git a/playwright/snapshots/si-tooltip.spec.ts-snapshots/si-tooltip--si-tooltip--auto.yaml b/playwright/snapshots/si-tooltip.spec.ts-snapshots/si-tooltip--si-tooltip--auto.yaml index a9fc5900a..5a80838bc 100644 --- a/playwright/snapshots/si-tooltip.spec.ts-snapshots/si-tooltip--si-tooltip--auto.yaml +++ b/playwright/snapshots/si-tooltip.spec.ts-snapshots/si-tooltip--si-tooltip--auto.yaml @@ -1,26 +1,64 @@ +- button "Toggle" +- button "Settings" +- button "Documents" +- button "Notifications" +- button "Reports" - group "File operations": - button "Open file" - button "Save" - - button "Download" - button "Share" +- group "Split button primary icon only": + - button "Download" + - button "Dropdown toggle" - group "Basic actions": - button "Edit" - button "Copy" - button "Delete" +- button "Open side panel" - group "Template examples": - button "Template HTML example" - button "Template example" -- heading "Tooltip placement" [level=4] +- heading "Placement" [level=4] - group "Tooltip placement": - button "Auto placement" - button "Top" - button "Bottom" - button "Start" - button "End" +- heading "Truncated text" [level=4] +- textbox "Search..." +- tree "Company locations": + - treeitem "This is a really really long tree item label" [level=1] + - treeitem "Tree item label" [level=1] + - treeitem "This is a really really long tree item label" [level=1] + - treeitem "Tree item label" [level=1] +- heading "Charts" [level=4] - heading "Other examples" [level=4] - button "A long time ago in a galaxy far, far away..." +- group "Layout selection toggle": + - radio "Map view" [checked] + - radio "List view" + - radio "Grid view" +- menubar: + - menuitem "Download" + - menuitem "Share" + - menuitem "Copy" +- group "Social actions": + - button "Like" + - button "Dislike" + - button "Share" - tablist: - tab - tab - tab + - tab + - tab + - tab + - tab +- banner: + - heading "Tooltip" [level=1] + - button "Support Center" + - button "Messages" + - button "User Preferences" + - button "Lars Vegas" - tooltip "Auto placement" \ No newline at end of file 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..0b386e0f3 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:ae1c834368cddb42c8163c1c5a598f24e550f6236b2793294b27de6a8300d42f +size 49579 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..d83be03c6 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:4c3238c8cd5e8d6ed759b440d927576161e79ab67af340974ef9f81dddc21ae7 +size 49401 diff --git a/playwright/snapshots/si-tooltip.spec.ts-snapshots/si-tooltip--si-tooltip--bottom.yaml b/playwright/snapshots/si-tooltip.spec.ts-snapshots/si-tooltip--si-tooltip--bottom.yaml index 4411aceee..50555ffc2 100644 --- a/playwright/snapshots/si-tooltip.spec.ts-snapshots/si-tooltip--si-tooltip--bottom.yaml +++ b/playwright/snapshots/si-tooltip.spec.ts-snapshots/si-tooltip--si-tooltip--bottom.yaml @@ -1,26 +1,64 @@ +- button "Toggle" +- button "Settings" +- button "Documents" +- button "Notifications" +- button "Reports" - group "File operations": - button "Open file" - button "Save" - - button "Download" - button "Share" +- group "Split button primary icon only": + - button "Download" + - button "Dropdown toggle" - group "Basic actions": - button "Edit" - button "Copy" - button "Delete" +- button "Open side panel" - group "Template examples": - button "Template HTML example" - button "Template example" -- heading "Tooltip placement" [level=4] +- heading "Placement" [level=4] - group "Tooltip placement": - button "Auto placement" - button "Top" - button "Bottom" - button "Start" - button "End" +- heading "Truncated text" [level=4] +- textbox "Search..." +- tree "Company locations": + - treeitem "This is a really really long tree item label" [level=1] + - treeitem "Tree item label" [level=1] + - treeitem "This is a really really long tree item label" [level=1] + - treeitem "Tree item label" [level=1] +- heading "Charts" [level=4] - heading "Other examples" [level=4] - button "A long time ago in a galaxy far, far away..." +- group "Layout selection toggle": + - radio "Map view" [checked] + - radio "List view" + - radio "Grid view" +- menubar: + - menuitem "Download" + - menuitem "Share" + - menuitem "Copy" +- group "Social actions": + - button "Like" + - button "Dislike" + - button "Share" - tablist: - tab - tab - tab + - tab + - tab + - tab + - tab +- banner: + - heading "Tooltip" [level=1] + - button "Support Center" + - button "Messages" + - button "User Preferences" + - button "Lars Vegas" - tooltip "Bottom" \ No newline at end of file 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..b43faa3cb 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:4c765eee8f4d37e00c0c8ef4b64cef2a7bbeedaffda0887e72cdff69d850217e +size 49018 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..0df00d807 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:f38eb0e3fd64c290a0f374724e87c6b42ae739126da0a723df564eb8f90d5a95 +size 48814 diff --git a/playwright/snapshots/si-tooltip.spec.ts-snapshots/si-tooltip--si-tooltip--end.yaml b/playwright/snapshots/si-tooltip.spec.ts-snapshots/si-tooltip--si-tooltip--end.yaml index 746bc23b2..976105aa3 100644 --- a/playwright/snapshots/si-tooltip.spec.ts-snapshots/si-tooltip--si-tooltip--end.yaml +++ b/playwright/snapshots/si-tooltip.spec.ts-snapshots/si-tooltip--si-tooltip--end.yaml @@ -1,26 +1,64 @@ +- button "Toggle" +- button "Settings" +- button "Documents" +- button "Notifications" +- button "Reports" - group "File operations": - button "Open file" - button "Save" - - button "Download" - button "Share" +- group "Split button primary icon only": + - button "Download" + - button "Dropdown toggle" - group "Basic actions": - button "Edit" - button "Copy" - button "Delete" +- button "Open side panel" - group "Template examples": - button "Template HTML example" - button "Template example" -- heading "Tooltip placement" [level=4] +- heading "Placement" [level=4] - group "Tooltip placement": - button "Auto placement" - button "Top" - button "Bottom" - button "Start" - button "End" +- heading "Truncated text" [level=4] +- textbox "Search..." +- tree "Company locations": + - treeitem "This is a really really long tree item label" [level=1] + - treeitem "Tree item label" [level=1] + - treeitem "This is a really really long tree item label" [level=1] + - treeitem "Tree item label" [level=1] +- heading "Charts" [level=4] - heading "Other examples" [level=4] - button "A long time ago in a galaxy far, far away..." +- group "Layout selection toggle": + - radio "Map view" [checked] + - radio "List view" + - radio "Grid view" +- menubar: + - menuitem "Download" + - menuitem "Share" + - menuitem "Copy" +- group "Social actions": + - button "Like" + - button "Dislike" + - button "Share" - tablist: - tab - tab - tab + - tab + - tab + - tab + - tab +- banner: + - heading "Tooltip" [level=1] + - button "Support Center" + - button "Messages" + - button "User Preferences" + - button "Lars Vegas" - tooltip "End" \ No newline at end of file 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..9a7e78286 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:d59c3b433f89517f8c9e59d790eb331c1153cff28c720870fbcd46d06b935225 +size 49006 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..1953f96b4 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:2d5011ee567bee370aa4c7dc2132ebb68389e478071262dd1562dca9b3e5d63e +size 48781 diff --git a/playwright/snapshots/si-tooltip.spec.ts-snapshots/si-tooltip--si-tooltip--start.yaml b/playwright/snapshots/si-tooltip.spec.ts-snapshots/si-tooltip--si-tooltip--start.yaml index 8b45881f3..588acf9a7 100644 --- a/playwright/snapshots/si-tooltip.spec.ts-snapshots/si-tooltip--si-tooltip--start.yaml +++ b/playwright/snapshots/si-tooltip.spec.ts-snapshots/si-tooltip--si-tooltip--start.yaml @@ -1,26 +1,64 @@ +- button "Toggle" +- button "Settings" +- button "Documents" +- button "Notifications" +- button "Reports" - group "File operations": - button "Open file" - button "Save" - - button "Download" - button "Share" +- group "Split button primary icon only": + - button "Download" + - button "Dropdown toggle" - group "Basic actions": - button "Edit" - button "Copy" - button "Delete" +- button "Open side panel" - group "Template examples": - button "Template HTML example" - button "Template example" -- heading "Tooltip placement" [level=4] +- heading "Placement" [level=4] - group "Tooltip placement": - button "Auto placement" - button "Top" - button "Bottom" - button "Start" - button "End" +- heading "Truncated text" [level=4] +- textbox "Search..." +- tree "Company locations": + - treeitem "This is a really really long tree item label" [level=1] + - treeitem "Tree item label" [level=1] + - treeitem "This is a really really long tree item label" [level=1] + - treeitem "Tree item label" [level=1] +- heading "Charts" [level=4] - heading "Other examples" [level=4] - button "A long time ago in a galaxy far, far away..." +- group "Layout selection toggle": + - radio "Map view" [checked] + - radio "List view" + - radio "Grid view" +- menubar: + - menuitem "Download" + - menuitem "Share" + - menuitem "Copy" +- group "Social actions": + - button "Like" + - button "Dislike" + - button "Share" - tablist: - tab - tab - tab + - tab + - tab + - tab + - tab +- banner: + - heading "Tooltip" [level=1] + - button "Support Center" + - button "Messages" + - button "User Preferences" + - button "Lars Vegas" - tooltip "Start" \ No newline at end of file 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..47c142435 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:eedaceee68a0005316dfa8fd47469bbea33b6f1f334d86532b0eddc08b84fd04 +size 48877 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..adb1b17d8 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:e5df64d489fc7570460fbbacfb6f56780fd75022936df111c705f25699e0a881 +size 48677 diff --git a/playwright/snapshots/si-tooltip.spec.ts-snapshots/si-tooltip--si-tooltip--top.yaml b/playwright/snapshots/si-tooltip.spec.ts-snapshots/si-tooltip--si-tooltip--top.yaml index 4b6dc3765..acdc3833c 100644 --- a/playwright/snapshots/si-tooltip.spec.ts-snapshots/si-tooltip--si-tooltip--top.yaml +++ b/playwright/snapshots/si-tooltip.spec.ts-snapshots/si-tooltip--si-tooltip--top.yaml @@ -1,26 +1,64 @@ +- button "Toggle" +- button "Settings" +- button "Documents" +- button "Notifications" +- button "Reports" - group "File operations": - button "Open file" - button "Save" - - button "Download" - button "Share" +- group "Split button primary icon only": + - button "Download" + - button "Dropdown toggle" - group "Basic actions": - button "Edit" - button "Copy" - button "Delete" +- button "Open side panel" - group "Template examples": - button "Template HTML example" - button "Template example" -- heading "Tooltip placement" [level=4] +- heading "Placement" [level=4] - group "Tooltip placement": - button "Auto placement" - button "Top" - button "Bottom" - button "Start" - button "End" +- heading "Truncated text" [level=4] +- textbox "Search..." +- tree "Company locations": + - treeitem "This is a really really long tree item label" [level=1] + - treeitem "Tree item label" [level=1] + - treeitem "This is a really really long tree item label" [level=1] + - treeitem "Tree item label" [level=1] +- heading "Charts" [level=4] - heading "Other examples" [level=4] - button "A long time ago in a galaxy far, far away..." +- group "Layout selection toggle": + - radio "Map view" [checked] + - radio "List view" + - radio "Grid view" +- menubar: + - menuitem "Download" + - menuitem "Share" + - menuitem "Copy" +- group "Social actions": + - button "Like" + - button "Dislike" + - button "Share" - tablist: - tab - tab - tab + - tab + - tab + - tab + - tab +- banner: + - heading "Tooltip" [level=1] + - button "Support Center" + - button "Messages" + - button "User Preferences" + - button "Lars Vegas" - tooltip "Top" \ No newline at end of file diff --git a/src/app/examples/si-tooltip/si-tooltip.html b/src/app/examples/si-tooltip/si-tooltip.html index e10843482..22291ee51 100644 --- a/src/app/examples/si-tooltip/si-tooltip.html +++ b/src/app/examples/si-tooltip/si-tooltip.html @@ -1,154 +1,396 @@ -
-
-
- - - - -
-
- - - -
-
- - -
-
+ +
+
+
+ + + + +
+ +
+ + +
+ + + + Download as PDF + Export as CSV + Share + + + +
+ + + +
-
-

Tooltip placement

-
- - - - -
-
-
-

Other examples

-
- - - -

Portfolio

- - + + +
+
+ +
+

Placement

+
+ + + + +
-
-
+ + +
+ + +
+
+
+

Truncated text

+
+
+ +
+ +
+
+ +
+

Charts

+
+ +
+
+
+
+ +
+

Other examples

+
+ + +
+ + + + + +
+ + + +
+ + + +
+
+ +
+ + +

Overview

+ + +

Sustainability

+ + +

Performance

+ + +

Analytics

+ + +

Security

+ + +

Reports

+ + +

Settings

+ + +
+
+ + + + +

Tooltip

+ + + + + + + + + + + + +
+ + + + +
Configuration and preferences
+ + +
File management and exports
+ + +
Alerts and updates
+ + +
Analytics and insights
+ + + + Hello, + -
- +
+ Tooltip template + Simple and informative
-
I'm the tooltip template
+ + + + + + diff --git a/src/app/examples/si-tooltip/si-tooltip.ts b/src/app/examples/si-tooltip/si-tooltip.ts index a57b98444..161b8b59e 100644 --- a/src/app/examples/si-tooltip/si-tooltip.ts +++ b/src/app/examples/si-tooltip/si-tooltip.ts @@ -2,20 +2,203 @@ * Copyright (c) Siemens 2016 - 2025 * SPDX-License-Identifier: MIT */ +import { CdkMenuTrigger } from '@angular/cdk/menu'; import { afterNextRender, Component, ElementRef, viewChild } from '@angular/core'; +import { + CartesianChartSeries, + ChartXAxis, + ChartYAxis, + SiChartCartesianComponent +} from '@siemens/charts-ng'; +import { SiAccordionComponent, SiCollapsiblePanelComponent } from '@siemens/element-ng/accordion'; +import { + SiApplicationHeaderComponent, + SiHeaderBrandDirective, + SiHeaderActionsDirective, + SiHeaderActionItemComponent, + SiHeaderLogoDirective, + SiHeaderCollapsibleActionsComponent, + SiAccountDetailsComponent, + SiHeaderAccountItemComponent +} from '@siemens/element-ng/application-header'; +import { + ContentActionBarMainItem, + SiContentActionBarComponent +} from '@siemens/element-ng/content-action-bar'; +import { + SiHeaderDropdownComponent, + SiHeaderDropdownTriggerDirective +} from '@siemens/element-ng/header-dropdown'; import { SiIconComponent } from '@siemens/element-ng/icon'; +import { SiMenuDirective, SiMenuItemComponent } from '@siemens/element-ng/menu'; +import { SiSearchBarComponent } from '@siemens/element-ng/search-bar'; +import { SiSidePanelComponent, SiSidePanelContentComponent } from '@siemens/element-ng/side-panel'; import { SiTabsetComponent, SiTabComponent } from '@siemens/element-ng/tabs'; -import { SiTooltipDirective } from '@siemens/element-ng/tooltip'; +import { SiTooltipDirective, SiTooltipOverlayDirective } from '@siemens/element-ng/tooltip'; +import { SiTreeViewComponent, TreeItem } from '@siemens/element-ng/tree-view'; + +import { ChartData } from '../si-charts/cartesian/chart-base'; @Component({ selector: 'app-sample', - imports: [SiIconComponent, SiTooltipDirective, SiTabsetComponent, SiTabComponent], + imports: [ + SiTooltipDirective, + SiTooltipOverlayDirective, + SiTabsetComponent, + SiTabComponent, + SiMenuDirective, + SiMenuItemComponent, + CdkMenuTrigger, + SiTreeViewComponent, + SiSearchBarComponent, + SiSidePanelComponent, + SiSidePanelContentComponent, + SiApplicationHeaderComponent, + SiHeaderBrandDirective, + SiHeaderActionsDirective, + SiHeaderActionItemComponent, + SiHeaderLogoDirective, + SiAccordionComponent, + SiCollapsiblePanelComponent, + SiContentActionBarComponent, + SiChartCartesianComponent, + SiHeaderCollapsibleActionsComponent, + SiHeaderDropdownComponent, + SiHeaderAccountItemComponent, + SiAccountDetailsComponent, + SiHeaderDropdownTriggerDirective, + SiIconComponent + ], templateUrl: './si-tooltip.html' }) export class SampleComponent { readonly focusButton = viewChild.required>('focusButton'); html = `I'm a microwave`; + splitOpen = false; + collapsed = true; + + treeItems: TreeItem[] = [ + { + label: 'This is a really really long tree item label', + icon: 'element-special-object', + children: [ + { + label: 'New York', + dataField1: 'NYC', + state: 'leaf' + }, + { + label: 'London', + dataField1: 'LDN', + state: 'leaf' + } + ] + }, + { + label: 'Tree item label', + icon: 'element-special-object', + children: [ + { + label: 'Tokyo', + dataField1: 'TYO', + state: 'leaf' + } + ] + }, + { + label: 'This is a really really long tree item label', + icon: 'element-special-object', + children: [ + { + label: 'Paris', + dataField1: 'PAR', + state: 'leaf' + }, + { + label: 'This is a really really long leaf tree item label', + dataField1: 'ZRH', + state: 'leaf' + } + ] + }, + { + label: 'Tree item label', + icon: 'element-special-object', + state: 'leaf' + } + ]; + + chartData: ChartData = { + title: 'Bar Chart', + xAxis: { type: 'category' } as ChartXAxis, + yAxis: { type: 'value' } as ChartYAxis, + series: [ + { + type: 'bar', + name: 'Series 1', + data: [ + ['Value 1', 8], + ['Value 2', 10], + ['Value 3', 1], + ['Value 4', 7], + ['Value 5', 2] + ] + }, + { + type: 'bar', + name: 'Series 2', + data: [ + ['Value 1', 3], + ['Value 2', 10], + ['Value 3', 8], + ['Value 4', 11], + ['Value 5', 5] + ] + }, + { + type: 'bar', + name: 'Series 3', + data: [ + ['Value 1', 5], + ['Value 2', 7], + ['Value 3', 5], + ['Value 4', 4], + ['Value 5', 6] + ] + } + ] as CartesianChartSeries[], + showLegend: true, + zoomSlider: true + }; + + primaryActionsIcons: ContentActionBarMainItem[] = [ + { + type: 'action', + label: 'Download', + iconOnly: true, + action: () => alert('Download'), + icon: 'element-download' + }, + { + type: 'action', + label: 'Share', + iconOnly: true, + action: () => alert('Share'), + icon: 'element-share' + }, + { + type: 'action', + label: 'Copy', + iconOnly: true, + action: () => alert('Copy'), + icon: 'element-copy' + } + ]; + + toggle(): void { + this.collapsed = !this.collapsed; + } constructor() { afterNextRender(() => {