feat: add styling to table filters with applied values (#1285)

Author: jake-bassett

projects/components/src/table/controls/table-controls.component.scss

@@ -9,6 +9,10 @@
     &:not(:first-child) {
       margin-left: 12px;
     }
+
+    &.applied {
+      background: $blue-1;
+    }
   }
 
   .table-controls-left {
@@ -21,6 +25,7 @@
 
   .table-controls-right {
     display: flex;
+    margin-left: 12px;
 
     .filter-multi-select {
       color: $gray-7;

projects/components/src/table/controls/table-controls.component.ts

@@ -49,6 +49,7 @@ import {
             [selected]="this.appliedFilters(selectControl)"
             [placeholder]="selectControl.placeholder"
             class="control select"
+            [ngClass]="{ applied: this.appliedFilters(selectControl).length > 0 }"
             showBorder="true"
             searchMode="${MultiSelectSearchMode.CaseInsensitive}"
             (selectedChange)="this.onMultiSelectChange(selectControl, $event)"
@@ -65,6 +66,7 @@ import {
             [selected]="this.appliedFilters(selectControl)"
             [placeholder]="selectControl.placeholder"
             class="control select"
+            [ngClass]="{ applied: this.appliedFilters(selectControl).length > 0 }"
             showBorder="true"
             searchMode="${MultiSelectSearchMode.CaseInsensitive}"
             (selectedChange)="this.onSelectChange(selectControl, $event)"
@@ -220,8 +222,8 @@ export class TableControlsComponent implements OnChanges {
     this.checkboxDiffer?.diff(this.checkboxSelections);
   }
 
-  public appliedFilters(selectControl: TableSelectControl): TableSelectControlOption[] | undefined {
-    return this.selectSelections.get(selectControl);
+  public appliedFilters(selectControl: TableSelectControl): TableSelectControlOption[] {
+    return this.selectSelections.get(selectControl) || [];
   }
 
   private setActiveViewItem(): void {
@@ -234,18 +236,20 @@ export class TableControlsComponent implements OnChanges {
     this.searchChange.emit(text);
   }
 
-  public onMultiSelectChange(select: TableSelectControl, selections: TableSelectControlOption[]): void {
+  public onMultiSelectChange(selectControl: TableSelectControl, selections: TableSelectControlOption[]): void {
     this.selectChange.emit({
-      select: select,
+      select: selectControl,
       values: selections
     });
+    this.diffSelections();
   }
 
-  public onSelectChange(select: TableSelectControl, selection: TableSelectControlOption): void {
+  public onSelectChange(selectControl: TableSelectControl, selection: TableSelectControlOption): void {
     this.selectChange.emit({
-      select: select,
+      select: selectControl,
       values: [selection]
     });
+    this.diffSelections();
   }
 
   public onCheckboxChange(checked: string[]): void {