feat(TabbedGroupPicker): tabbed-group-picker styling updates and bug …

…fixes (#1536)

* feat(TabbedGroupPicker): updating selector for getting pixel height and reducing maxWidth

* removing unused title inputs from demo

* passing key events to dropdown and clearing filter on toggle

* adding keydown handler to search box too

projects/novo-elements/src/elements/dropdown/Dropdown.ts

@@ -56,7 +56,7 @@ export class NovoDropDownTrigger {
 class NovoDropdownBase {
   constructor() {}
 }
-const NovoDropdowMixins: HasOverlayCtor & CanDisableCtor & HasTabIndexCtor & typeof NovoDropdownBase = mixinOverlay(
+const NovoDropdownMixins: HasOverlayCtor & CanDisableCtor & HasTabIndexCtor & typeof NovoDropdownBase = mixinOverlay(
   mixinTabIndex(mixinDisabled(NovoDropdownBase), 1),
 );
 
@@ -75,7 +75,7 @@ const NovoDropdowMixins: HasOverlayCtor & CanDisableCtor & HasTabIndexCtor & typ
     '[attr.tabIndex]': 'disabled ? -1 : 0',
   },
 })
-export class NovoDropdownElement extends NovoDropdowMixins implements OnInit, AfterContentInit, AfterViewInit, OnDestroy {
+export class NovoDropdownElement extends NovoDropdownMixins implements OnInit, AfterContentInit, AfterViewInit, OnDestroy {
   @Input()
   parentScrollSelector: string;
   @Input()
@@ -227,15 +227,15 @@ export class NovoDropdownElement extends NovoDropdowMixins implements OnInit, Af
     // });
   }
 
-  /** Handles all keydown events on the select. */
+  /** Handles all keydown events on the dropdown. */
   @HostListener('keydown', ['$event'])
   _handleKeydown(event: KeyboardEvent): void {
     if (!this.disabled) {
       this.panelOpen ? this._handleOpenKeydown(event) : this._handleClosedKeydown(event);
     }
   }
 
-  /** Handles keyboard events while the select is closed. */
+  /** Handles keyboard events while the dropdown is closed. */
   private _handleClosedKeydown(event: KeyboardEvent): void {
     const key = event.key;
     const isArrowKey = key === Key.ArrowDown || key === Key.ArrowUp || key === Key.ArrowLeft || key === Key.ArrowRight;
@@ -248,15 +248,15 @@ export class NovoDropdownElement extends NovoDropdowMixins implements OnInit, Af
     }
   }
 
-  /** Handles keyboard events when the selected is open. */
+  /** Handles keyboard events when the dropdown is open. */
   private _handleOpenKeydown(event: KeyboardEvent): void {
     const manager = this._keyManager;
     const key = event.key;
     const isArrowKey = key === Key.ArrowDown || key === Key.ArrowUp;
     const isTyping = manager.isTyping();
     const isInputField = event.target;
     if (isArrowKey && event.altKey) {
-      // Close the select on ALT + arrow key to match the native <select>
+      // Close the dropdown on ALT + arrow key to match the native <select>
       event.preventDefault();
       this.closePanel();
       // Don't do anything in this case if the user is typing,

projects/novo-elements/src/elements/tabbed-group-picker/TabbedGroupPicker.html

@@ -1,4 +1,4 @@
-<novo-dropdown (toggled)="onDropdownToggle($event)" multiple>
+<novo-dropdown (toggled)="onDropdownToggle($event)" multiple #dropdown>
   <novo-button
     class="tabbed-group-picker-button"
     [theme]="buttonConfig.theme"
@@ -7,12 +7,12 @@
     [loading]="loading">
     <div class="tabbed-group-picker-button-label">{{ buttonConfig.label }}</div>
   </novo-button>
-  <div class="tabbed-group-picker-search" data-automation-id="tabbed-group-picker-search">
+  <div class="tabbed-group-picker-search" data-automation-id="tabbed-group-picker-search" (keydown)="dropdown._handleKeydown($event)">
     <input type="text" [placeholder]="labelService.search" [value]="filterText | async" (input)="onFilter($event)" />
     <i class="bhi-search" *ngIf="!(filterText | async)"></i>
     <i class="bhi-times" *ngIf="(filterText | async)" (click)="onClearFilter($event)"></i>
   </div>
-  <div class="tabbed-group-picker-column-container">
+  <div class="tabbed-group-picker-column-container" (keydown)="dropdown._handleKeydown($event)">
     <div class="tabbed-group-picker-column left">
       <novo-nav theme="white" direction="vertical">
         <novo-tab *ngFor="let tab of displayTabs" [attr.data-automation-id]="tab.typeName"
@@ -25,7 +25,6 @@
     </div>
     <div class="tabbed-group-picker-column right">
       <div class="quick-select" *ngIf="quickSelectConfig && !(filterText | async)">
-        <!-- <div class="quick-select-label">{{ quickSelectConfig.label }}</div> -->
         <novo-optgroup class="quick-select-list" [label]="quickSelectConfig.label">
           <novo-option
             class="quick-select-item"
@@ -35,11 +34,6 @@
             (click)="quickSelect.selected = !quickSelect.selected; onItemToggled(quickSelect)"
             novoInert>
             {{quickSelect.label}}
-            <!-- <novo-checkbox
-              [label]="quickSelect.label"
-              [name]="'selected'"
-              [(ngModel)]="quickSelect.selected"
-              (ngModelChange)="onItemToggled(quickSelect)"></novo-checkbox> -->
           </novo-option>
         </novo-optgroup>
       </div>
@@ -56,14 +50,6 @@
             (click)="item.selected = !item.selected; onItemToggled(item)"
             novoInert>
             {{item[displayTab.labelField]}}
-
-            <!-- <novo-checkbox
-              [label]="item[displayTab.labelField]"
-              [name]="'selected'"
-              [indeterminate]="item.indeterminate"
-              [(ngModel)]="item.selected"
-              (ngModelChange)="onItemToggled(item)">
-            </novo-checkbox> -->
           </novo-option>
         </cdk-virtual-scroll-viewport>
       </novo-optgroup>

projects/novo-elements/src/elements/tabbed-group-picker/TabbedGroupPicker.scss

@@ -6,7 +6,7 @@
       overflow: hidden;
       text-overflow: ellipsis;
       white-space: nowrap;
-      min-width: 100px;
+      min-width: 40px;
       width: 100%;
     }
   }

projects/novo-elements/src/elements/tabbed-group-picker/TabbedGroupPicker.ts

@@ -218,11 +218,10 @@ export class NovoTabbedGroupPickerElement implements OnDestroy, OnInit {
   }
 
   onDropdownToggle(event) {
+    this.filterText.next('');
     if (event) {
       this.scrollViewportHeight = this.getPixelHeight(this.scrollableInstance.getElementRef().nativeElement);
-      this.virtualScrollItemSize = this.getPixelHeight(
-        this.scrollableInstance.getElementRef().nativeElement.querySelector('novo-list-item'),
-      );
+      this.virtualScrollItemSize = this.getPixelHeight(this.scrollableInstance.getElementRef().nativeElement.querySelector('novo-option'));
     }
   }
 

projects/novo-examples/src/components/tabbed-group-picker/tabbed-group-picker-basic/tabbed-group-picker-basic-example.html

@@ -1,7 +1,6 @@
 <div class="tabbed-group-picker-example">
   <novo-tabbed-group-picker
     [tabs]="example_tab"
-    title="basic-example"
     [buttonConfig]="example_buttonConfig"
     (selectionChange)="onSelectionChange($event)"
   ></novo-tabbed-group-picker>

projects/novo-examples/src/components/tabbed-group-picker/tabbed-group-picker-big-groups-example/tabbed-group-picker-big-groups-example.html

@@ -1,7 +1,6 @@
 <div class="tabbed-group-picker-example">
   <novo-tabbed-group-picker
     [tabs]="example_tab"
-    title="big-groups-example"
     [buttonConfig]="example_buttonConfig"
     (selectionChange)="onSelectionChange($event)"
   ></novo-tabbed-group-picker>

projects/novo-examples/src/components/tabbed-group-picker/tabbed-group-picker-groups-example/tabbed-group-picker-groups-example.html

@@ -1,7 +1,6 @@
 <div class="tabbed-group-picker-example">
   <novo-tabbed-group-picker
     [tabs]="example_tab"
-    title="groups-example"
     [quickSelectConfig]="example_quickSelectConfig"
     [buttonConfig]="example_buttonConfig"
     (selectionChange)="onSelectionChange($event)"

projects/novo-examples/src/components/tabbed-group-picker/tabbed-group-picker-quick-select-example/tabbed-group-picker-quick-select-example.html

@@ -1,7 +1,6 @@
 <div class="tabbed-group-picker-example">
   <novo-tabbed-group-picker
     [tabs]="example_tab"
-    title="quick-select-example"
     [quickSelectConfig]="example_quickSelectConfig"
     [buttonConfig]="example_buttonConfig"
     (selectionChange)="onSelectionChange($event)"