feat(datagrid): add string filter label

projects/angular/clarity.api.md

@@ -953,6 +953,7 @@ export interface ClrCommonStrings {
     datagridExpandableRowsHelperText: string;
     datagridFilterAriaLabel: string;
     datagridFilterDialogAriaLabel: string;
+    datagridFilterTitle: string;
     // (undocumented)
     datepickerCurrentDecade: string;
     // (undocumented)
@@ -1510,7 +1511,7 @@ export class ClrDatagridDetailHeader implements AfterViewInit {
 //
 // @public
 export class ClrDatagridFilter<T = any> extends DatagridFilterRegistrar<T, ClrDatagridFilterInterface<T>> implements CustomFilter, OnChanges, OnDestroy {
-    constructor(_filters: FiltersProvider<T>, commonStrings: ClrCommonStringsService, smartToggleService: ClrPopoverToggleService, platformId: any, elementRef: ElementRef<HTMLElement>, keyNavigation: KeyNavigationGridController);
+    constructor(_filters: FiltersProvider<T>, commonStrings: ClrCommonStringsService, smartToggleService: ClrPopoverToggleService, platformId: any, elementRef: ElementRef<HTMLElement>, keyNavigation: KeyNavigationGridController, cdr: ChangeDetectorRef);
     get active(): boolean;
     // (undocumented)
     anchor: ElementRef<HTMLButtonElement>;
@@ -1523,6 +1524,8 @@ export class ClrDatagridFilter<T = any> extends DatagridFilterRegistrar<T, ClrDa
     // (undocumented)
     set customFilter(filter: ClrDatagridFilterInterface<T> | RegisteredFilter<T, ClrDatagridFilterInterface<T>>);
     // (undocumented)
+    filterTitle: string;
+    // (undocumented)
     ngOnChanges(): void;
     // (undocumented)
     ngOnDestroy(): void;
@@ -1540,7 +1543,7 @@ export class ClrDatagridFilter<T = any> extends DatagridFilterRegistrar<T, ClrDa
     // (undocumented)
     static ɵcmp: i0.ɵɵComponentDeclaration<ClrDatagridFilter<any>, "clr-dg-filter", never, { "open": "clrDgFilterOpen"; "customFilter": "clrDgFilter"; }, { "openChange": "clrDgFilterOpenChange"; }, never, ["*"], false, never>;
     // (undocumented)
-    static ɵfac: i0.ɵɵFactoryDeclaration<ClrDatagridFilter<any>, [null, null, null, null, null, { optional: true; }]>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ClrDatagridFilter<any>, [null, null, null, null, null, { optional: true; }, null]>;
 }
 
 // @public (undocumented)

projects/angular/src/data/datagrid/_datagrid.clarity.scss

@@ -1411,10 +1411,20 @@
     font-weight: normal;
 
     .datagrid-filter-close-wrapper {
-      text-align: right;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      gap: #{tokens.$cds-global-space-3};
+      margin-bottom: #{tokens.$cds-global-space-3};
+      @include mixins.generate-typography-token('TableHeaders-11-SB-CPT');
+
+      .datagrid-filter-title {
+        display: inline-flex;
+      }
 
       .close {
         float: none;
+        font-size: unset;
       }
     }
 

projects/angular/src/data/datagrid/datagrid-filter.spec.ts

@@ -45,6 +45,7 @@ export default function (): void {
           toggleService,
           'browser' as any,
           undefined,
+          undefined,
           undefined
         );
       });

projects/angular/src/data/datagrid/datagrid-filter.ts

@@ -7,6 +7,7 @@
 
 import { isPlatformBrowser } from '@angular/common';
 import {
+  ChangeDetectorRef,
   Component,
   ElementRef,
   EventEmitter,
@@ -72,6 +73,7 @@ import { KeyNavigationGridController } from './utils/key-navigation-grid.control
       [attr.aria-label]="commonStrings.keys.datagridFilterDialogAriaLabel"
     >
       <div class="datagrid-filter-close-wrapper">
+        <span class="datagrid-filter-title">{{ filterTitle }}</span>
         <button type="button" class="close" clrPopoverCloseButton>
           <cds-icon shape="window-close" [attr.title]="commonStrings.keys.close"></cds-icon>
         </button>
@@ -90,6 +92,7 @@ export class ClrDatagridFilter<T = any>
   ariaExpanded = false;
   popoverId = uniqueIdFactory();
   toggleButtonAriaLabel: string;
+  filterTitle: string;
 
   // Smart Popover
   smartPosition: ClrPopoverPosition = {
@@ -110,7 +113,8 @@ export class ClrDatagridFilter<T = any>
     private smartToggleService: ClrPopoverToggleService,
     @Inject(PLATFORM_ID) private platformId: any,
     private elementRef: ElementRef<HTMLElement>,
-    @Optional() private keyNavigation: KeyNavigationGridController
+    @Optional() private keyNavigation: KeyNavigationGridController,
+    private cdr: ChangeDetectorRef
   ) {
     super(_filters);
     this.subs.push(
@@ -155,7 +159,11 @@ export class ClrDatagridFilter<T = any>
 
   ngOnChanges() {
     setTimeout(() => {
-      this.setToggleButtonAriaLabel();
+      const columnTitle = this.getColumnTitle();
+
+      this.setToggleButtonAriaLabel(columnTitle);
+      this.setTitle(columnTitle);
+      this.cdr.markForCheck();
     });
   }
 
@@ -168,14 +176,27 @@ export class ClrDatagridFilter<T = any>
    * This is not in a getter to prevent "expression has changed after it was checked" errors.
    * And it's more performant this way since it only runs on change.
    */
-  private setToggleButtonAriaLabel() {
-    const columnElement = this.elementRef.nativeElement?.closest('clr-dg-column');
-    const columnTitleElement = columnElement?.querySelector('.datagrid-column-title');
-
-    const columnTitle = columnTitleElement?.textContent.trim().toLocaleLowerCase();
+  private setToggleButtonAriaLabel(columnTitle: string) {
+    columnTitle = columnTitle?.toLocaleLowerCase();
 
     this.toggleButtonAriaLabel = this.commonStrings.parse(this.commonStrings.keys.datagridFilterAriaLabel, {
       COLUMN: columnTitle || '',
     });
   }
+
+  /**
+   * This is not in a getter to prevent "expression has changed after it was checked" errors.
+   */
+  private setTitle(columnTitle: string) {
+    this.filterTitle = this.commonStrings.parse(this.commonStrings.keys.datagridFilterTitle, {
+      COLUMN: columnTitle || '',
+    });
+  }
+
+  private getColumnTitle() {
+    const columnElement = this.elementRef.nativeElement?.closest('clr-dg-column');
+    const columnTitleElement = columnElement?.querySelector('.datagrid-column-title');
+
+    return columnTitleElement?.textContent.trim();
+  }
 }

projects/angular/src/utils/i18n/common-strings.default.ts

@@ -53,6 +53,7 @@ export const commonStringsDefault: ClrCommonStrings = {
   singleActionableAriaLabel: 'Single actionable header',
   detailExpandableAriaLabel: 'Toggle more row content',
   datagridFilterAriaLabel: '{COLUMN} filter',
+  datagridFilterTitle: '{COLUMN} filter',
   datagridFilterDialogAriaLabel: 'Filter dialog',
   columnSeparatorAriaLabel: 'Column resize handle',
   columnSeparatorDescription: 'Use left or right key to resize the column',

projects/angular/src/utils/i18n/common-strings.interface.ts

@@ -134,6 +134,10 @@ export interface ClrCommonStrings {
    * Datagrid filter toggle button
    */
   datagridFilterAriaLabel: string;
+  /**
+   * Datagrid filter toggle button
+   */
+  datagridFilterTitle: string;
   /**
    * Datagrid filter dialog
    */