feat: tooltips (#103)

BugSplat-Git · Sep 17, 2024 · 9f496af · 9f496af
1 parent a6210ab
commit 9f496af
Show file tree

Hide file tree

Showing 12 changed files with 152 additions and 75 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -73,6 +73,7 @@
     "karma-coverage-istanbul-reporter": "~3.0.2",
     "karma-jasmine": "~4.0.0",
     "karma-jasmine-html-reporter": "^1.5.0",
+    "ng-mocks": "^14.13.1",
     "ng-packagr": "^18.1.0",
     "semantic-release": "^22.0.5",
     "semantic-release-cli": "^5.4.4",

diff --git a/projects/ngb-filterable-dropdown-example/.eslintrc.json b/projects/ngb-filterable-dropdown-example/.eslintrc.json
@@ -1,7 +1,8 @@
 {
   "extends": "../../.eslintrc.json",
   "ignorePatterns": [
-    "!**/*"
+    "!**/*",
+    "environments/*"
   ],
   "overrides": [
     {

diff --git a/projects/ngb-filterable-dropdown-example/src/app/app.component.html b/projects/ngb-filterable-dropdown-example/src/app/app.component.html
@@ -2,39 +2,61 @@
   <div class="row">
     <div class="col-12 col-xl-4">
       <a href="https://www.bugsplat.com">
-        <img style="max-width:350px" src="./assets/logo-bugsplat-color.png">
+        <img style="max-width: 350px" src="./assets/logo-bugsplat-color.png" />
       </a>
     </div>
   </div>
   <div class="row mt-4">
     <div class="col-12">
       <h2>
-        <a href="https://github.com/BugSplat-Git/ngb-filterable-dropdown">{{title}}</a>
+        <a href="https://github.com/BugSplat-Git/ngb-filterable-dropdown">{{
+          title
+        }}</a>
       </h2>
     </div>
   </div>
   <div class="row mt-4">
     <div class="col-12 col-xl-6">
-      <input id="allow-create-item" (click)="allowCreateItemClick($event)" type="checkbox">
+      <input
+        id="allow-create-item"
+        (click)="allowCreateItemClick($event)"
+        type="checkbox"
+      />
       <label class="ms-4 mb-0" for="allow-create-item">Allow Create Item</label>
     </div>
   </div>
   <div class="row mt-2">
     <div class="col-12 col-xl-6">
-      <input id="custom-toggle-text" (click)="customToggleTextClick($event)" type="checkbox">
-      <label class="ms-4 mb-0" for="custom-toggle-text">Custom Toggle Text</label>
+      <input
+        id="custom-toggle-text"
+        (click)="customToggleTextClick($event)"
+        type="checkbox"
+      />
+      <label class="ms-4 mb-0" for="custom-toggle-text"
+        >Custom Toggle Text</label
+      >
     </div>
   </div>
   <div class="row mt-2">
     <div class="col-12 col-xl-6">
-      <input id="disabled" (click)="disabledClick($event)" type="checkbox">
+      <input id="disabled" (click)="tooltipsClick($event)" type="checkbox" />
+      <label class="ms-4 mb-0" for="disabled">Tooltips</label>
+    </div>
+  </div>
+  <div class="row mt-2">
+    <div class="col-12 col-xl-6">
+      <input id="disabled" (click)="disabledClick($event)" type="checkbox" />
       <label class="ms-4 mb-0" for="disabled">Disabled</label>
     </div>
   </div>
   <div class="row mt-4">
     <div class="col-12 col-xl-3">
       <label for="selection-mode">Selection Mode</label>
-      <select id="selection-mode" class="form-select" (change)="onSelectionModeChange($event.target.value)">
+      <select
+        id="selection-mode"
+        class="form-select"
+        (change)="onSelectionModeChange($event.target.value)"
+      >
         <option *ngFor="let mode of selectionModes" [value]="mode">
           {{ mode }}
         </option>
@@ -44,7 +66,11 @@ <h2>
   <div class="row mt-4">
     <div class="col-12 col-xl-3">
       <label for="auto-close-value">Auto Close</label>
-      <select id="auto-close-value" class="form-select" (change)="onAutoCloseValueChanged($event.target.value)">
+      <select
+        id="auto-close-value"
+        class="form-select"
+        (change)="onAutoCloseValueChanged($event.target.value)"
+      >
         <option *ngFor="let value of autoCloseValues" [value]="value">
           {{ value }}
         </option>
@@ -54,43 +80,86 @@ <h2>
   <div class="row mt-4">
     <div class="col-12 col-xl-6">
       <h3>Bugs</h3>
-      <ngb-filterable-dropdown *ngIf="customToggleText" [allowCreateItem]="allowCreateItem" [autoClose]="autoClose"
-        [items]="items" [disabled]="disabled" [searchInputPlaceholder]="searchInputPlaceholder" [selection]="selection"
-        [selectionMode]="selectionMode" (itemCreated)="onItemCreated($event)" (openChanged)="onOpenChanged($event)"
-        (selectionChanged)="onSelectionChanged($event)">
+      <ngb-filterable-dropdown
+        *ngIf="customToggleText"
+        [allowCreateItem]="allowCreateItem"
+        [autoClose]="autoClose"
+        [items]="items"
+        [disabled]="disabled"
+        [searchInputPlaceholder]="searchInputPlaceholder"
+        [selection]="selection"
+        [selectionMode]="selectionMode"
+        [tooltips]="tooltips"
+        [tooltipsOpenDelay]="tooltipsOpenDelay"
+        (itemCreated)="onItemCreated($event)"
+        (openChanged)="onOpenChanged($event)"
+        (selectionChanged)="onSelectionChanged($event)"
+      >
         Select a Bug 🐛
       </ngb-filterable-dropdown>
-      <ngb-filterable-dropdown *ngIf="!customToggleText" [allowCreateItem]="allowCreateItem" [autoClose]="autoClose"
-        [items]="items" [disabled]="disabled" [placeholder]="'No Bugs Selected'"
-        [searchInputPlaceholder]="searchInputPlaceholder" [selection]="selection" [selectionMode]="selectionMode"
-        (itemCreated)="onItemCreated($event)" (openChanged)="onOpenChanged($event)"
-        (selectionChanged)="onSelectionChanged($event)"></ngb-filterable-dropdown>
+      <ngb-filterable-dropdown
+        *ngIf="!customToggleText"
+        [allowCreateItem]="allowCreateItem"
+        [autoClose]="autoClose"
+        [items]="items"
+        [disabled]="disabled"
+        [placeholder]="'No Bugs Selected'"
+        [searchInputPlaceholder]="searchInputPlaceholder"
+        [selection]="selection"
+        [selectionMode]="selectionMode"
+        [tooltips]="tooltips"
+        [tooltipsOpenDelay]="tooltipsOpenDelay"
+        (itemCreated)="onItemCreated($event)"
+        (openChanged)="onOpenChanged($event)"
+        (selectionChanged)="onSelectionChanged($event)"
+      ></ngb-filterable-dropdown>
     </div>
   </div>
   <hr />
   <div class="row mt-4">
     <div class="col-12 col-xl-6">
       <h3>Custom Click Handle</h3>
-      <ngb-custom-filterable-dropdown [allowCreateItem]="allowCreateItem" [autoClose]="autoClose" [items]="items"
-        [searchInputPlaceholder]="searchInputPlaceholder" [selection]="genericHandleSelection"
-        [selectionMode]="selectionMode" (itemCreated)="onItemCreated($event)"
-        (openChanged)="genericHandleOpenChanged($event)" (selectionChanged)="genericHandlerOnSelectionChanged($event)">
-        <span>A generic click handle. -- Selected: {{ genericHandleSelection }} -- isOpen:
-          {{isGenericHandleDropdownOpen}}</span>
+      <ngb-custom-filterable-dropdown
+        [allowCreateItem]="allowCreateItem"
+        [autoClose]="autoClose"
+        [items]="items"
+        [searchInputPlaceholder]="searchInputPlaceholder"
+        [selection]="genericHandleSelection"
+        [selectionMode]="selectionMode"
+        [tooltips]="tooltips"
+        [tooltipsOpenDelay]="tooltipsOpenDelay"
+        (itemCreated)="onItemCreated($event)"
+        (openChanged)="genericHandleOpenChanged($event)"
+        (selectionChanged)="genericHandlerOnSelectionChanged($event)"
+      >
+        <span
+          >A generic click handle. -- Selected: {{ genericHandleSelection }} --
+          isOpen: {{ isGenericHandleDropdownOpen }}</span
+        >
       </ngb-custom-filterable-dropdown>
     </div>
   </div>
   <div class="row mt-4">
     <div class="col-12 col-xl-6">
       <h3>Styled Custom Click Handle</h3>
-      <ngb-custom-filterable-dropdown [allowCreateItem]="allowCreateItem" [autoClose]="autoClose" [items]="items"
-        [searchInputPlaceholder]="searchInputPlaceholder" [selection]="genericHandleSelection"
-        [selectionMode]="selectionMode" (itemCreated)="onItemCreated($event)"
-        (openChanged)="genericHandleOpenChanged($event)" (selectionChanged)="genericHandlerOnSelectionChanged($event)">
+      <ngb-custom-filterable-dropdown
+        [allowCreateItem]="allowCreateItem"
+        [autoClose]="autoClose"
+        [items]="items"
+        [searchInputPlaceholder]="searchInputPlaceholder"
+        [selection]="genericHandleSelection"
+        [selectionMode]="selectionMode"
+        [tooltips]="tooltips"
+        [tooltipsOpenDelay]="tooltipsOpenDelay"
+        (itemCreated)="onItemCreated($event)"
+        (openChanged)="genericHandleOpenChanged($event)"
+        (selectionChanged)="genericHandlerOnSelectionChanged($event)"
+      >
         <div class="alert alert-dark">
-          Heavily styled handle -- Selected: {{ genericHandleSelection }} -- isOpen: {{isGenericHandleDropdownOpen}}
+          Heavily styled handle -- Selected: {{ genericHandleSelection }} --
+          isOpen: {{ isGenericHandleDropdownOpen }}
         </div>
       </ngb-custom-filterable-dropdown>
     </div>
   </div>
-</div>
+</div>
diff --git a/projects/ngb-filterable-dropdown-example/src/app/app.component.spec.ts b/projects/ngb-filterable-dropdown-example/src/app/app.component.spec.ts
@@ -1,15 +1,17 @@
-import { Component, EventEmitter, Input, Output } from '@angular/core';
 import { TestBed } from '@angular/core/testing';
+import { NgbCustomFilterableDropdownModule, NgbFilterableDropdownModule } from 'projects/ngb-filterable-dropdown/src';
 import { AppComponent } from './app.component';
 
 describe('AppComponent', () => {
   beforeEach(() => {
     TestBed.configureTestingModule({
       declarations: [
         AppComponent,
-        MockFilterableDropdownComponent,
-        MockCustomFilterableDropdownComponent
       ],
+      imports: [
+        NgbCustomFilterableDropdownModule,
+        NgbFilterableDropdownModule
+      ]
     }).compileComponents();
   });
 
@@ -32,39 +34,3 @@ describe('AppComponent', () => {
     expect(compiled.querySelector('h2').textContent).toContain('ngb-filterable-dropdown-examples');
   });
 });
-
-@Component({
-  selector: 'ngb-filterable-dropdown', // eslint-disable-line  @angular-eslint/component-selector
-  template: ''
-})
-class MockFilterableDropdownComponent {
-  @Input() allowCreateItem: any;
-  @Input() autoClose: any;
-  @Input() items: any;
-  @Input() selection: any;
-  @Input() selectionMode: any;
-  @Input() disabled: any;
-  @Input() placeholder: any;
-  @Input() searchInputPlaceholder: any;
-  @Output() itemCreated = new EventEmitter<any>();
-  @Output() selectionChanged = new EventEmitter<any>();
-  @Output() openChanged = new EventEmitter<any>();
-}
-
-@Component({
-  selector: 'ngb-custom-filterable-dropdown', // eslint-disable-line  @angular-eslint/component-selector
-  template: ''
-})
-class MockCustomFilterableDropdownComponent {
-  @Input() allowCreateItem: any;
-  @Input() autoClose: any;
-  @Input() items: any;
-  @Input() selection: any;
-  @Input() selectionMode: any;
-  @Input() disabled: any;
-  @Input() placeholder: any;
-  @Input() searchInputPlaceholder: any;
-  @Output() itemCreated = new EventEmitter<any>();
-  @Output() selectionChanged = new EventEmitter<any>();
-  @Output() openChanged = new EventEmitter<any>();
-}
diff --git a/projects/ngb-filterable-dropdown-example/src/app/app.component.ts b/projects/ngb-filterable-dropdown-example/src/app/app.component.ts
@@ -12,7 +12,7 @@ export class AppComponent {
   selectionModes: Array<string> = Object.values(NgbFilterableDropdownSelectionMode);
   autoCloseValues = ['inside', 'outside', true, false];
 
-  items = ['Beetle', 'Ant', 'Moth', 'Fire Ant', 'Dung Beetle', 'Grass Ant'];
+  items = ['Beetle', 'Ant', 'Moth', 'Fire Ant', 'Dung Beetle', 'Grass Ant', 'A Really Long Made Up Bug Name For Testing Tooltips Etc Etc Yadda Yadda Yadda'];
 
   allowCreateItem = false;
   autoClose: boolean | 'inside' | 'outside' = false;
@@ -24,6 +24,8 @@ export class AppComponent {
   searchInputPlaceholder = 'Search Bugs';
   selection: string | Array<string> = 'Moth';
   selectionMode = NgbFilterableDropdownSelectionMode.SingleSelect;
+  tooltips = false;
+  tooltipsOpenDelay = 750;
 
   allowCreateItemClick(event: CheckboxClickEvent): void {
     this.allowCreateItem = event.target.checked;
@@ -69,6 +71,10 @@ export class AppComponent {
     this.selectionMode = value;
     this.selection = [];
   }
+
+  tooltipsClick(event: CheckboxClickEvent): void {
+    this.tooltips = event.target.checked;
+  }
 }
 
 interface CheckboxClickEvent {

diff --git a/...down/src/lib/ngb-custom-filterable-dropdown/ngb-custom-filterable-dropdown.component.html b/...down/src/lib/ngb-custom-filterable-dropdown/ngb-custom-filterable-dropdown.component.html
@@ -72,6 +72,9 @@
           <button
             class="dropdown-item filterable-dropdown-item px-2"
             type="button"
+            [ngbTooltip]="item"
+            [disableTooltip]="!tooltips"
+            [openDelay]="tooltipsOpenDelay"
             [hidden]="!isFiltered(item)"
             (click)="onItemSelect(item)"
           >

diff --git a/...n/src/lib/ngb-custom-filterable-dropdown/ngb-custom-filterable-dropdown.component.spec.ts b/...n/src/lib/ngb-custom-filterable-dropdown/ngb-custom-filterable-dropdown.component.spec.ts
@@ -401,9 +401,9 @@ describe('NgbCustomFilterableDropdownComponent', () => {
     });
 
     it('should clear filter text if dialog is being closed', () => {
-      component.searchForm.controls['searchInput'].setValue(filterItem); // eslint-disable-line  @typescript-eslint/dot-notation
+      component.searchForm.controls['searchInput'].setValue(filterItem); 
       component.onOpenChange(false);
-      expect(component.searchForm.controls['searchInput'].value).toEqual('');  // eslint-disable-line  @typescript-eslint/dot-notation
+      expect(component.searchForm.controls['searchInput'].value).toEqual('');
     });
   });
 

diff --git a/...opdown/src/lib/ngb-custom-filterable-dropdown/ngb-custom-filterable-dropdown.component.ts b/...opdown/src/lib/ngb-custom-filterable-dropdown/ngb-custom-filterable-dropdown.component.ts
@@ -19,6 +19,8 @@ export class NgbCustomFilterableDropdownComponent implements OnInit, OnDestroy {
   @Input() customClickHandle = false;
   @Input() disabled = false;
   @Input() searchInputPlaceholder = 'Search';
+  @Input() tooltips = false;
+  @Input() tooltipsOpenDelay = 0;
   @Input() set items(value: Array<string>) {
     this.setItems(value);
   }
@@ -125,7 +127,7 @@ export class NgbCustomFilterableDropdownComponent implements OnInit, OnDestroy {
   }
 
   get searchInput(): AbstractControl {
-    return this.searchForm.controls['searchInput']; // eslint-disable-line  @typescript-eslint/dot-notation
+    return this.searchForm.controls['searchInput'];
   }
 
   get searchInputValue(): string {