feat(filter-bar): provide translatable remove button label

Author: spliffone

api-goldens/element-ng/filter-bar/index.api.md

@@ -29,6 +29,7 @@ export class SiFilterBarComponent {
     readonly disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
     readonly filterDefaultText: _angular_core.InputSignal<_siemens_element_translate_ng_translate.TranslatableString>;
     readonly filters: _angular_core.ModelSignal<Filter[]>;
+    readonly removeButtonLabel: _angular_core.InputSignal<_siemens_element_translate_ng_translate.TranslatableString>;
     readonly resetFilters: _angular_core.OutputEmitterRef<void>;
     readonly resetText: _angular_core.InputSignal<_siemens_element_translate_ng_translate.TranslatableString>;
 }
@@ -43,6 +44,7 @@ export class SiFilterPillComponent {
     // (undocumented)
     readonly disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
     readonly filter: _angular_core.InputSignal<Filter>;
+    readonly removeButtonLabel: _angular_core.InputSignal<_siemens_element_translate_ng_translate.TranslatableString>;
     // (undocumented)
     readonly totalPills: _angular_core.InputSignal<number>;
 }

api-goldens/element-ng/translate/index.api.md

@@ -220,6 +220,8 @@ export interface SiTranslatableKeys {
     // (undocumented)
     'SI_FILTER_BAR.NO_FILTERS'?: string;
     // (undocumented)
+    'SI_FILTER_BAR.REMOVE_LABEL'?: string;
+    // (undocumented)
     'SI_FILTER_BAR.RESET_FILTERS'?: string;
     // (undocumented)
     'SI_FILTERED_SEARCH.CLEAR'?: string;

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

@@ -6,6 +6,7 @@
         [totalPills]="$count"
         [filter]="filter"
         [disabled]="disabled()"
+        [removeButtonLabel]="removeButtonLabel()"
         (deleteFilters)="deleteFilters($event)"
       />
     </div>
@@ -27,6 +28,7 @@
       title: '',
       filterName: ''
     }"
+    [removeButtonLabel]="removeButtonLabel()"
     (deleteFilters)="deleteOverflowFilter()"
   />
   @if (allowReset() && this.filters().length) {

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

@@ -89,6 +89,16 @@ export class SiFilterBarComponent {
     t(() => $localize`:@@SI_FILTER_BAR.COLLAPSED_FILTERS_DESCRIPTION:+ {{count}} filters`)
   );
 
+  /**
+   * Pill remove button label.
+   *
+   * @defaultValue
+   * ```
+   * t(() => $localize`:@@SI_FILTER_BAR.REMOVE_LABEL:Remove`)
+   * ```
+   */
+  readonly removeButtonLabel = input(t(() => $localize`:@@SI_FILTER_BAR.REMOVE_LABEL:Remove`));
+
   /**
    * Output callback to be executed when the reset filter is clicked
    */

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

@@ -22,7 +22,7 @@
     type="button"
     class="btn-remove element-cancel btn btn-circle btn-ghost focus-inside ms-0 btn-sm"
     role="button"
-    aria-label="Remove"
+    [attr.aria-label]="removeButtonLabel() | translate"
     [disabled]="disabled()"
     (keydown.enter)="deleteClicked()"
     (click)="deleteClicked()"

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

@@ -4,7 +4,7 @@
  */
 import { NgTemplateOutlet } from '@angular/common';
 import { booleanAttribute, Component, input, output } from '@angular/core';
-import { SiTranslatePipe } from '@siemens/element-translate-ng/translate';
+import { SiTranslatePipe, t } from '@siemens/element-translate-ng/translate';
 
 import { Filter } from './filter';
 
@@ -26,6 +26,15 @@ export class SiFilterPillComponent {
   /** @defaultValue 0 */
   readonly totalPills = input(0);
 
+  /**
+   * Remove button label.
+   *
+   * @defaultValue
+   * ```
+   * t(() => $localize`:@@SI_FILTER_BAR.REMOVE_LABEL:Remove`)
+   * ```
+   */
+  readonly removeButtonLabel = input(t(() => $localize`:@@SI_FILTER_BAR.REMOVE_LABEL:Remove`));
   /**
    * Output callback event which will provide you the name of the deleted filter
    * pill if a filter was deleted.

projects/element-ng/translate/si-translatable-keys.interface.ts

@@ -113,6 +113,7 @@ export interface SiTranslatableKeys {
   'SI_FILTERED_SEARCH.SUBMIT_BUTTON'?: string;
   'SI_FILTER_BAR.COLLAPSED_FILTERS_DESCRIPTION'?: string;
   'SI_FILTER_BAR.NO_FILTERS'?: string;
+  'SI_FILTER_BAR.REMOVE_LABEL'?: string;
   'SI_FILTER_BAR.RESET_FILTERS'?: string;
   'SI_FORM_CONTAINER.ERROR.DATE_FORMAT'?: string;
   'SI_FORM_CONTAINER.ERROR.DATE_FORMAT_END'?: string;