feat(filter-bar): add disableAutoTranslation option to avoid unwanted translation

playwright/snapshots/si-filter-bar.spec.ts-snapshots/si-filter-bar--si-filter-bar--l.yaml

@@ -7,7 +7,7 @@
 - button "Remove"
 - text: "Company : Siemens"
 - button "Remove"
-- text: + 3 filters
+- text: + 4 filters
 - button "Remove"
 - button "Reset filters"
 - heading "Variant Dark" [level=4]
@@ -19,12 +19,12 @@
 - button "Remove"
 - text: "Company : Siemens"
 - button "Remove"
-- text: + 3 filters
+- text: + 4 filters
 - button "Remove"
 - button "Reset filters"
 - heading "Variant Light Disabled" [level=4]
-- text: "/Temperature : \\d+° Time : \\d+:\\d+ AM Date : \\d+-\\d+-\\d+ Company : Siemens Location : Zug Only Key Only Value/"
+- text: "/Temperature : \\d+° Time : \\d+:\\d+ AM Date : \\d+-\\d+-\\d+ Company : Siemens Location : Zug \\+ 3 filters/"
 - button "Reset filters" [disabled]
 - heading "Variant Dark Disabled" [level=4]
-- text: "/Temperature : \\d+° Time : \\d+:\\d+ AM Date : \\d+-\\d+-\\d+ Company : Siemens Location : Zug Only Key Only Value/"
+- text: "/Temperature : \\d+° Time : \\d+:\\d+ AM Date : \\d+-\\d+-\\d+ Company : Siemens Location : Zug \\+ 3 filters/"
 - button "Reset filters" [disabled]

playwright/snapshots/si-filter-bar.spec.ts-snapshots/si-filter-bar--si-filter-bar--s.yaml

@@ -5,7 +5,7 @@
 - button "Remove"
 - text: "/Date : \\d+-\\d+-\\d+/"
 - button "Remove"
-- text: + 4 filters
+- text: + 5 filters
 - button "Remove"
 - button "Reset filters"
 - heading "Variant Dark" [level=4]
@@ -15,12 +15,12 @@
 - button "Remove"
 - text: "/Date : \\d+-\\d+-\\d+/"
 - button "Remove"
-- text: + 4 filters
+- text: + 5 filters
 - button "Remove"
 - button "Reset filters"
 - heading "Variant Light Disabled" [level=4]
-- text: "/Temperature : \\d+° Time : \\d+:\\d+ AM Date : \\d+-\\d+-\\d+ \\+ 4 filters/"
+- text: "/Temperature : \\d+° Time : \\d+:\\d+ AM Date : \\d+-\\d+-\\d+ \\+ 5 filters/"
 - button "Reset filters" [disabled]
 - heading "Variant Dark Disabled" [level=4]
-- text: "/Temperature : \\d+° Time : \\d+:\\d+ AM Date : \\d+-\\d+-\\d+ \\+ 4 filters/"
+- text: "/Temperature : \\d+° Time : \\d+:\\d+ AM Date : \\d+-\\d+-\\d+ \\+ 5 filters/"
 - button "Reset filters" [disabled]

playwright/snapshots/si-filter-bar.spec.ts-snapshots/si-filter-bar--si-filter-bar--xs.yaml

@@ -1,18 +1,18 @@
 - heading "Variant Light" [level=4]
 - text: "/Temperature : \\d+°/"
 - button "Remove"
-- text: + 6 filters
+- text: + 7 filters
 - button "Remove"
 - button "Reset filters"
 - heading "Variant Dark" [level=4]
 - text: "/Temperature : \\d+°/"
 - button "Remove"
-- text: + 6 filters
+- text: + 7 filters
 - button "Remove"
 - button "Reset filters"
 - heading "Variant Light Disabled" [level=4]
-- text: "/Temperature : \\d+° Time : \\d+:\\d+ AM \\+ 5 filters/"
+- text: "/Temperature : \\d+° Time : \\d+:\\d+ AM \\+ 6 filters/"
 - button "Reset filters" [disabled]
 - heading "Variant Dark Disabled" [level=4]
-- text: "/Temperature : \\d+° Time : \\d+:\\d+ AM \\+ 5 filters/"
+- text: "/Temperature : \\d+° Time : \\d+:\\d+ AM \\+ 6 filters/"
 - button "Reset filters" [disabled]

projects/element-ng/filter-bar/filter.ts

@@ -25,4 +25,10 @@ export interface Filter {
    * Status of filter pill
    */
   status: FilterStatusType;
+  /**
+   * Disables automatic translation of title and description text.
+   * When set to true, the title and description will be displayed as-is without
+   * attempting translation.
+   */
+  disableAutoTranslation?: boolean;
 }

projects/element-ng/filter-bar/si-filter-bar.component.spec.ts

@@ -349,6 +349,6 @@ describe('SiFilterBarComponent', () => {
     await timeout(200);
     fixture.detectChanges();
     const values = element.querySelectorAll<HTMLElement>('si-filter-pill .value');
-    expect(values[values.length - 1].innerHTML).toBe('+ 2 filters');
+    expect(values[values.length - 1].innerHTML.trim()).toBe('+ 2 filters');
   });
 });

projects/element-ng/filter-bar/si-filter-pill.component.html

@@ -1,18 +1,23 @@
+@let filter = this.filter();
 <div
   class="pill responsive"
   [class.pe-0]="!disabled()"
   [class.disabled]="disabled()"
-  [ngClass]="filter().status ? 'pill-' + filter().status : ''"
+  [ngClass]="filter.status ? 'pill-' + filter.status : ''"
   [attr.aria-disabled]="disabled()"
 >
   <div class="wrapper">
-    @if (filter().title) {
-      <div class="name">{{ filter().title | translate }}</div>
+    @if (filter.title) {
+      <div class="name">
+        {{ filter.disableAutoTranslation ? filter.title : (filter.title | translate) }}
+      </div>
     }
-    @if (filter().title && filter().description) {
+    @if (filter.title && filter.description) {
       <span class="name pe-4">:</span>
     }
-    <div class="value">{{ filter().description | translate }}</div>
+    <div class="value">
+      {{ filter.disableAutoTranslation ? filter.description : (filter.description | translate) }}
+    </div>
   </div>
   @if (!disabled()) {
     <ng-container *ngTemplateOutlet="remove" />

projects/element-ng/filter-bar/si-filter-pill.component.spec.ts

@@ -4,6 +4,11 @@
  */
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { ComponentFixture, fakeAsync, flush, TestBed } from '@angular/core/testing';
+import {
+  provideMockTranslateServiceBuilder,
+  SiTranslateService
+} from '@siemens/element-translate-ng/translate';
+import { of } from 'rxjs';
 
 import { Filter } from './filter';
 import { SiFilterPillComponent } from './index';
@@ -27,7 +32,16 @@ describe('SiFilterPillComponent', () => {
 
   beforeEach(() =>
     TestBed.configureTestingModule({
-      imports: [SiFilterPillComponent, TestHostComponent]
+      imports: [SiFilterPillComponent, TestHostComponent],
+      providers: [
+        provideMockTranslateServiceBuilder(
+          () =>
+            ({
+              translate: (key: string) => `translated:${key}`,
+              translateAsync: (key: string) => of(`translated:${key}`)
+            }) as SiTranslateService
+        )
+      ]
     })
   );
 
@@ -45,8 +59,8 @@ describe('SiFilterPillComponent', () => {
       status: 'warning'
     };
     fixture.detectChanges();
-    expect(element.querySelector('div.name')!.innerHTML).toBe('Current Location');
-    expect(element.querySelector('div.value')!.innerHTML).toBe('Florida');
+    expect(element.querySelector('div.name')!.innerHTML.trim()).toBe('translated:Current Location');
+    expect(element.querySelector('div.value')!.innerHTML.trim()).toBe('translated:Florida');
     expect(element.querySelector('.pill.pill-warning')!.innerHTML).toBeDefined();
   }));
 
@@ -64,4 +78,19 @@ describe('SiFilterPillComponent', () => {
     fixture.detectChanges();
     expect(spyEvent).toHaveBeenCalled();
   }));
+
+  it('should not translate the title and description if disableAutoTranslation is true', fakeAsync(() => {
+    component.filter = {
+      filterName: 'language',
+      title: 'LANGUAGE',
+      description: 'LANGUAGE',
+      status: 'default',
+      disableAutoTranslation: true
+    };
+    fixture.detectChanges();
+    flush();
+
+    expect(element.querySelector('div.name')!.innerHTML.trim()).toBe('LANGUAGE');
+    expect(element.querySelector('div.value')!.innerHTML.trim()).toBe('LANGUAGE');
+  }));
 });

src/app/examples/si-filter-bar/si-filter-bar.ts

@@ -47,6 +47,13 @@ export class SampleComponent {
       description: 'Zug',
       status: 'default'
     },
+    {
+      filterName: 'language',
+      title: 'LANGUAGE',
+      description: 'LANGUAGE',
+      status: 'default',
+      disableAutoTranslation: true
+    },
     {
       filterName: 'only-key',
       title: 'Only Key',