new design implement for login screen, organization onboarding form changes, new filter implement in all screens, remove icons from validation,

src/app/shared/components/data-table/data-table.ts

@@ -1,5 +1,5 @@
 import { NgTemplateOutlet } from '@angular/common';
-import { Component, DestroyRef, HostListener, computed, contentChildren, effect, inject, input, output, signal } from '@angular/core';
+import { Component, DestroyRef, ElementRef, HostListener, computed, contentChildren, effect, inject, input, output, signal, viewChild, contentChild } from '@angular/core';
 import { MatPaginatorModule, PageEvent } from '@angular/material/paginator';
 import { Subject } from 'rxjs';
 import { debounceTime, distinctUntilChanged } from 'rxjs/operators';
@@ -10,9 +10,9 @@ import { CdkConnectedOverlay, CdkOverlayOrigin, ConnectedPosition } from '@angul
 import { DataTableAction, DataTableActionEvent, DataTableCellContext, DataTableColumn, DataTablePageEvent, DataTableRecord, DataTableSortEvent } from './data-table.types';
 
 import { Button } from '../button/button';
-import { contentChild } from '@angular/core';
 
 import { DataTableToolbarDirective } from '../../directives/data-table-toolbar/data-table-toolbar.directive';
+import { DataTableFilterActionsDirective } from '../../directives/data-table-filter-actions/data-table-filter-actions.directive';
 
 @Component({
   selector: 'app-data-table',
@@ -34,6 +34,34 @@ export class DataTable<T extends DataTableRecord = DataTableRecord> {
   readonly cellTemplates = contentChildren(DataTableCellDirective);
   readonly toolbarTemplate = contentChild(DataTableToolbarDirective);
 
+   readonly filterActionsTemplate = contentChild(DataTableFilterActionsDirective);
+
+  readonly filterRowContent = viewChild<ElementRef<HTMLElement>>('filterRowContent');
+  readonly filterRowOverflowing = signal(false);
+  private filterRowResizeObserver?: ResizeObserver;
+
+  private readonly filterRowContentEffect = effect(onCleanup => {
+    const element = this.filterRowContent()?.nativeElement;
+
+    this.filterRowResizeObserver?.disconnect();
+
+    if (!element) {
+      this.filterRowOverflowing.set(false);
+      return;
+    }
+
+    const checkOverflow = () => {
+      this.filterRowOverflowing.set(element.scrollWidth > element.clientWidth + 1);
+    };
+
+    checkOverflow();
+
+    this.filterRowResizeObserver = new ResizeObserver(checkOverflow);
+    this.filterRowResizeObserver.observe(element);
+
+    onCleanup(() => this.filterRowResizeObserver?.disconnect());
+  });
+
   private readonly defaultRowClasses = [
     'table-primary',
     'table-secondary',
@@ -110,6 +138,8 @@ export class DataTable<T extends DataTableRecord = DataTableRecord> {
   searchDebounceTime = input(300);
   emptyMessage = input('No records found');
   emptyDescription = input('There is currently no data to display.');
+  showFilterButton = input<boolean>(false);
+  filterActive = input<boolean>(false);
   /*---------------------------*/
 
   /* --------- Permission inputs ---- */
@@ -141,6 +171,7 @@ export class DataTable<T extends DataTableRecord = DataTableRecord> {
   actionHeaderClass = input<string>('!text-center');
   actionCellClass = input<string>('!text-center');
   addClicked = output<void>();
+ filterClicked = output<void>();
 
   totalVisibleColumns = computed(() => this.columns().length + (this.actions().length > 0 ? 1 : 0));
 
@@ -563,6 +594,16 @@ export class DataTable<T extends DataTableRecord = DataTableRecord> {
     return this.composeClass(baseClass, '');
   }
 
+  onFilterClick(event: MouseEvent): void {
+    event.preventDefault();
+    event.stopPropagation();
+
+    this.closeActionMenu();
+    this.filterClicked.emit();
+  }
+
 }
 
 export { DataTableCellDirective } from '../../directives/data-table-cell.directive';
+export { DataTableToolbarDirective } from '../../directives/data-table-toolbar/data-table-toolbar.directive';
+export { DataTableFilterActionsDirective } from '../../directives/data-table-filter-actions/data-table-filter-actions.directive';