fix(filter-field): Fixes an issue where tags where not disabled when …

…the filter-field was.

There was an issue, when setting the filters programatically, that the disabled state of the
filter-field was not applied correctly to all tags.
The solution here was to add an additional input to the tag and logically combine the filter-field
disabled state and the tags own disabled state to reflect this one correctly.

Fixes #1097

libs/barista-components/filter-field/src/filter-field-tag/filter-field-tag.html

@@ -24,7 +24,7 @@
     dt-button
     variant="nested"
     class="dt-filter-field-tag-label"
-    [disabled]="!editable"
+    [disabled]="_filterFieldDisabled || !editable"
     (click)="_handleEdit($event)"
   >
     <ng-container *ngTemplateOutlet="tagContent"></ng-container>
@@ -34,7 +34,7 @@
   dt-icon-button
   variant="nested"
   class="dt-filter-field-tag-button"
-  [disabled]="!deletable"
+  [disabled]="_filterFieldDisabled || !deletable"
   (click)="_handleRemove($event)"
 >
   <dt-icon name="abort" class="dt-filter-field-tag-icon"></dt-icon>

libs/barista-components/filter-field/src/filter-field-tag/filter-field-tag.ts

@@ -43,7 +43,7 @@ import { Subject } from 'rxjs';
   host: {
     '[attr.role]': `'option'`,
     class: 'dt-filter-field-tag',
-    '[class.dt-filter-field-tag-disabled]': 'disabled',
+    '[class.dt-filter-field-tag-disabled]': '_filterFieldDisabled || disabled',
   },
   encapsulation: ViewEncapsulation.Emulated,
   preserveWhitespaces: false,
@@ -89,6 +89,16 @@ export class DtFilterFieldTag implements OnDestroy {
     this._changeDetectorRef.markForCheck();
   }
 
+  @Input()
+  get _filterFieldDisabled(): boolean {
+    return this._parentFilterFieldDisabled;
+  }
+  set _filterFieldDisabled(value: boolean) {
+    this._parentFilterFieldDisabled = value;
+    this._changeDetectorRef.markForCheck();
+  }
+  private _parentFilterFieldDisabled: boolean = false;
+
   /** Whether the tag is editable. */
   get editable(): boolean {
     return this.data && this.data.editable;

libs/barista-components/filter-field/src/filter-field.html

@@ -15,6 +15,7 @@
   <dt-filter-field-tag
     *ngFor="let tagData of _prefixTagData"
     [data]="tagData"
+    [_filterFieldDisabled]="disabled"
     (remove)="_handleTagRemove($event)"
     (edit)="_handleTagEdit($event)"
   ></dt-filter-field-tag>
@@ -94,6 +95,7 @@
   <dt-filter-field-tag
     *ngFor="let tagData of _suffixTagData"
     [data]="tagData"
+    [_filterFieldDisabled]="disabled"
     (remove)="_handleTagRemove($event)"
     (edit)="_handleTagEdit($event)"
   ></dt-filter-field-tag>

libs/barista-components/filter-field/src/filter-field.spec.ts

@@ -325,6 +325,29 @@ describe('DtFilterField', () => {
       tick();
       sub2.unsubscribe();
     }));
+
+    it('should disable programmatically set tags when they are set during a disabled state', fakeAsync(() => {
+      // given
+      fixture.componentInstance.dataSource.data = FILTER_FIELD_TEST_DATA_SINGLE_DISTINCT;
+      fixture.detectChanges();
+
+      // when
+      filterField.disabled = true;
+      const filters = [
+        [
+          FILTER_FIELD_TEST_DATA_SINGLE_DISTINCT.autocomplete[0],
+          FILTER_FIELD_TEST_DATA_SINGLE_DISTINCT.autocomplete[0]
+            .autocomplete[0],
+        ],
+      ];
+      filterField.filters = filters;
+      fixture.detectChanges();
+      advanceFilterfieldCycle(true, true);
+      const tags = getFilterTags(fixture);
+      expect(tags[0].ele.nativeElement.getAttribute('class')).toContain(
+        'dt-filter-field-tag-disabled',
+      );
+    }));
   });
 
   describe('labeling', () => {

libs/barista-components/filter-field/src/filter-field.ts

@@ -249,7 +249,6 @@ export class DtFilterField<T = any>
     return this._disabled;
   }
   set disabled(value: boolean) {
-    // tslint:disable: deprecation
     const coerced = coerceBooleanProperty(value);
     if (coerced !== this._disabled) {
       this._disabled = coerced;
@@ -274,8 +273,6 @@ export class DtFilterField<T = any>
 
       this._changeDetectorRef.markForCheck();
     }
-
-    // tslint:enable: deprecation
   }
   private _disabled = false;
   private _previousTagDisabledState: Map<DtFilterFieldTag, boolean> = new Map<
@@ -394,8 +391,10 @@ export class DtFilterField<T = any>
   /** @internal Whether the clear all button is shown. */
   get _showClearAll(): boolean {
     return Boolean(
-      // Show button only if we are not in the edit mode
-      this._rootDef === this._currentDef &&
+      // If the filterfield itself is disabled, don't show the clear all
+      !this._disabled &&
+        // Show button only if we are not in the edit mode
+        this._rootDef === this._currentDef &&
         // and only if there are actual filters that can be cleared
         this._filters.length &&
         // The button should also only be visible if the filter field is not focused
@@ -533,11 +532,9 @@ export class DtFilterField<T = any>
       .subscribe(() => {
         this._handleInputChange();
       });
-    // tslint:disable-next-line: deprecation
     this._tags.changes
       .pipe(startWith(null), takeUntil(this._destroy$))
       .subscribe(() => {
-        // tslint:disable-next-line: deprecation
         this._currentTags.next(this._tags.toArray());
       });
   }
@@ -581,7 +578,6 @@ export class DtFilterField<T = any>
 
       if (needleFilterValueArr) {
         const filterIndex = this._findIndexForFilter(needleFilterValueArr);
-        // tslint:disable-next-line: deprecation
         return filterIndex !== -1 ? this._tags.toArray()[filterIndex] : null;
       }
     }