feat(filter-field): Adds navigation via arrow keys over current filte…

…r tags

apps/dev/src/filter-field/filter-field-demo.component.html

@@ -52,5 +52,11 @@
         _useCustomEditorParser ? 'enabled' : 'disabled'
       }})
     </button>
+    <button variant="secondary" dt-button (click)="setDeletableFirstTag()">
+      Toggle deletable on first tag
+    </button>
+    <button variant="secondary" dt-button (click)="toggleDeletableAll()">
+      Toggle deletable all
+    </button>
   </div>
 </div>

apps/dev/src/filter-field/filter-field-demo.component.ts

@@ -314,4 +314,18 @@ export class FilterFieldDemo implements AfterViewInit, OnDestroy {
         'no data')
     );
   }
+
+  setDeletableFirstTag(): void {
+    if (this._firstTag) {
+      this._firstTag.deletable = !this._firstTag.deletable;
+    }
+  }
+
+  toggleDeletableAll(): void {
+    this.filterField.currentTags.forEach((tags) => {
+      tags.forEach((tag) => {
+        tag.deletable = !tag.deletable;
+      });
+    });
+  }
 }

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

@@ -26,6 +26,8 @@
     class="dt-filter-field-tag-label"
     [disabled]="_temporarilyDisabled || !editable"
     (click)="_handleEdit($event)"
+    (keyup)="_handleKeyUp($event)"
+    #editButton
   >
     <ng-container *ngTemplateOutlet="tagContent"></ng-container>
   </button>
@@ -37,6 +39,8 @@
   class="dt-filter-field-tag-button"
   [disabled]="_temporarilyDisabled || !deletable"
   (click)="_handleRemove($event)"
+  (keyup)="_handleKeyUp($event)"
+  #deleteButton
 >
   <dt-icon name="abort" class="dt-filter-field-tag-icon"></dt-icon>
 </button>

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

@@ -34,6 +34,8 @@ import { DtOverlayConfig } from '@dynatrace/barista-components/overlay';
 import { Platform } from '@angular/cdk/platform';
 import { take, takeUntil, switchMap } from 'rxjs/operators';
 import { Subject } from 'rxjs';
+import { _readKeyCode } from '@dynatrace/barista-components/core';
+import { LEFT_ARROW, RIGHT_ARROW } from '@angular/cdk/keycodes';
 
 @Component({
   selector: 'dt-filter-field-tag',
@@ -76,6 +78,12 @@ export class DtFilterFieldTag implements OnDestroy {
   /** Emits when the filter should be made editable (usually by clicking the edit button). */
   @Output() readonly edit = new EventEmitter<DtFilterFieldTag>();
 
+  /** Emits when the left or right arrow key is pressed */
+  @Output() readonly navigateTags = new EventEmitter<{
+    currentTag: DtFilterFieldTag;
+    direction: 'left' | 'right';
+  }>();
+
   /** Whether the tag is disabled. */
   // Note: The disabled mixin can not be used here because the CD needs to be triggerd after it has been set
   // to reflect the state when programatically setting the property.
@@ -122,6 +130,14 @@ export class DtFilterFieldTag implements OnDestroy {
     }
   }
 
+  /** Element refrence to the edit button */
+  @ViewChild('editButton', { read: ElementRef })
+  editButton: ElementRef<HTMLButtonElement>;
+
+  /** Element refrence to the delete button */
+  @ViewChild('deleteButton', { read: ElementRef })
+  deleteButton: ElementRef<HTMLButtonElement>;
+
   /** @internal Element reference to the tag that holds the value. */
   @ViewChild('valueSpan', { read: ElementRef })
   _valueSpan: ElementRef<HTMLSpanElement>;
@@ -174,6 +190,19 @@ export class DtFilterFieldTag implements OnDestroy {
     }
   }
 
+  /** @internal Handles the arrowkey navigation */
+  _handleKeyUp(event: KeyboardEvent): void {
+    const keyCode = _readKeyCode(event);
+    if (keyCode === LEFT_ARROW || keyCode === RIGHT_ARROW) {
+      event.stopImmediatePropagation();
+
+      this.navigateTags.emit({
+        currentTag: this,
+        direction: keyCode === LEFT_ARROW ? 'left' : 'right',
+      });
+    }
+  }
+
   /**
    * Update the enabled state of the tooltip overlay. The overlay should be enabled
    * if the textvalue of the dt-filter-field-tag-value is being truncated.

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

@@ -18,6 +18,7 @@
     [_temporarilyDisabled]="disabled || _isInFilterEditMode"
     (remove)="_handleTagRemove($event)"
     (edit)="_handleTagEdit($event)"
+    (navigateTags)="_handleArrowKeyNavigation($event)"
   ></dt-filter-field-tag>
 
   <button
@@ -52,6 +53,7 @@
         !(_currentDef && !!_currentDef!.multiSelect) || loading
       "
       (keydown)="_handleInputKeyDown($event)"
+      (keyup)="_handleInputKeyUp($event)"
       [value]="_inputValue"
       [disabled]="disabled"
     />
@@ -143,6 +145,7 @@
     [_temporarilyDisabled]="disabled || _isInFilterEditMode"
     (remove)="_handleTagRemove($event)"
     (edit)="_handleTagEdit($event)"
+    (navigateTags)="_handleArrowKeyNavigation($event)"
   ></dt-filter-field-tag>
 </div>