feat(filter): add disabled property for filter dropdown. (#440)

This is good when a user wants to disable an option within the filter dropdown. It can be done by setting FilterField disabled property to true

src/app/filter/example/filter-basic-example.component.ts

@@ -142,6 +142,12 @@ export class FilterBasicExampleComponent implements OnInit {
           id: 'day7',
           value: 'Saturday'
         }]
+      }, {
+        id: 'apples',
+        title: 'Apples',
+        placeholder: 'Filter by apples...',
+        type: FilterType.TEXT,
+        disabled: true
       }] as FilterField[],
       resultsCount: this.items.length,
       appliedFilters: []

src/app/filter/filter-field.ts

@@ -33,4 +33,9 @@ export class FilterField {
    * Set to true when a separator should be shown instead of a menu option
    */
   separator?: boolean;
+
+  /**
+   * A flag indicating the field is disabled
+   */
+  disabled?: boolean;
 }

src/app/filter/filter-fields.component.ts

@@ -220,6 +220,9 @@ export class FilterFieldsComponent implements DoCheck, OnInit {
   }
 
   private isFieldDisabled(field: FilterField): boolean {
+    if (field.disabled) {
+      return true;
+    }
     if (field.type === undefined || field.type === 'text') {
       return false;
     }

src/app/filter/filter.component.spec.ts

@@ -114,6 +114,12 @@ describe('Filter component - ', () => {
           id: 'day7',
           value: 'Saturday'
         }]
+      }, {
+        id: 'apples',
+        title: 'Apples',
+        placeholder: 'Filter by apples...',
+        type: FilterType.TEXT,
+        disabled: true
       }] as FilterField[],
       appliedFilters: [],
       resultsCount: 5
@@ -152,7 +158,19 @@ describe('Filter component - ', () => {
     fixture.detectChanges(); // Workaround to fix dropdown tests
 
     let fields = element.querySelectorAll('.filter-field');
-    expect(fields.length).toBe(5);
+    expect(fields.length).toBe(6);
+  }));
+
+  it('should have correct number of disabled filter fields', fakeAsync(function() {
+    const element = fixture.nativeElement;
+
+    let button = element.querySelector('.filter-pf button');
+    button.click();
+    tick();
+    fixture.detectChanges(); // Workaround to fix dropdown tests
+
+    let fields = element.querySelectorAll('.filter-pf .disabled');
+    expect(fields.length).toBe(1);
   }));
 
   it('should have correct number of results', function() {