Skip to content

Commit 9f496af

Browse files
bobbyg603bobbyg603
authored
feat: tooltips (#103)
1 parent a6210ab commit 9f496af

12 files changed

+152
-75
lines changed

‎package-lock.json

Lines changed: 24 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -73,6 +73,7 @@
7373
"karma-coverage-istanbul-reporter": "~3.0.2",
7474
"karma-jasmine": "~4.0.0",
7575
"karma-jasmine-html-reporter": "^1.5.0",
76+
"ng-mocks": "^14.13.1",
7677
"ng-packagr": "^18.1.0",
7778
"semantic-release": "^22.0.5",
7879
"semantic-release-cli": "^5.4.4",

‎projects/ngb-filterable-dropdown-example/.eslintrc.json

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
11
{
22
"extends": "../../.eslintrc.json",
33
"ignorePatterns": [
4-
"!**/*"
4+
"!**/*",
5+
"environments/*"
56
],
67
"overrides": [
78
{

‎projects/ngb-filterable-dropdown-example/src/app/app.component.html

Lines changed: 98 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -2,39 +2,61 @@
22
<div class="row">
33
<div class="col-12 col-xl-4">
44
<a href="https://www.bugsplat.com">
5-
<img style="max-width:350px" src="./assets/logo-bugsplat-color.png">
5+
<img style="max-width: 350px" src="./assets/logo-bugsplat-color.png" />
66
</a>
77
</div>
88
</div>
99
<div class="row mt-4">
1010
<div class="col-12">
1111
<h2>
12-
<a href="https://github.com/BugSplat-Git/ngb-filterable-dropdown">{{title}}</a>
12+
<a href="https://github.com/BugSplat-Git/ngb-filterable-dropdown">{{
13+
title
14+
}}</a>
1315
</h2>
1416
</div>
1517
</div>
1618
<div class="row mt-4">
1719
<div class="col-12 col-xl-6">
18-
<input id="allow-create-item" (click)="allowCreateItemClick($event)" type="checkbox">
20+
<input
21+
id="allow-create-item"
22+
(click)="allowCreateItemClick($event)"
23+
type="checkbox"
24+
/>
1925
<label class="ms-4 mb-0" for="allow-create-item">Allow Create Item</label>
2026
</div>
2127
</div>
2228
<div class="row mt-2">
2329
<div class="col-12 col-xl-6">
24-
<input id="custom-toggle-text" (click)="customToggleTextClick($event)" type="checkbox">
25-
<label class="ms-4 mb-0" for="custom-toggle-text">Custom Toggle Text</label>
30+
<input
31+
id="custom-toggle-text"
32+
(click)="customToggleTextClick($event)"
33+
type="checkbox"
34+
/>
35+
<label class="ms-4 mb-0" for="custom-toggle-text"
36+
>Custom Toggle Text</label
37+
>
2638
</div>
2739
</div>
2840
<div class="row mt-2">
2941
<div class="col-12 col-xl-6">
30-
<input id="disabled" (click)="disabledClick($event)" type="checkbox">
42+
<input id="disabled" (click)="tooltipsClick($event)" type="checkbox" />
43+
<label class="ms-4 mb-0" for="disabled">Tooltips</label>
44+
</div>
45+
</div>
46+
<div class="row mt-2">
47+
<div class="col-12 col-xl-6">
48+
<input id="disabled" (click)="disabledClick($event)" type="checkbox" />
3149
<label class="ms-4 mb-0" for="disabled">Disabled</label>
3250
</div>
3351
</div>
3452
<div class="row mt-4">
3553
<div class="col-12 col-xl-3">
3654
<label for="selection-mode">Selection Mode</label>
37-
<select id="selection-mode" class="form-select" (change)="onSelectionModeChange($event.target.value)">
55+
<select
56+
id="selection-mode"
57+
class="form-select"
58+
(change)="onSelectionModeChange($event.target.value)"
59+
>
3860
<option *ngFor="let mode of selectionModes" [value]="mode">
3961
{{ mode }}
4062
</option>
@@ -44,7 +66,11 @@ <h2>
4466
<div class="row mt-4">
4567
<div class="col-12 col-xl-3">
4668
<label for="auto-close-value">Auto Close</label>
47-
<select id="auto-close-value" class="form-select" (change)="onAutoCloseValueChanged($event.target.value)">
69+
<select
70+
id="auto-close-value"
71+
class="form-select"
72+
(change)="onAutoCloseValueChanged($event.target.value)"
73+
>
4874
<option *ngFor="let value of autoCloseValues" [value]="value">
4975
{{ value }}
5076
</option>
@@ -54,43 +80,86 @@ <h2>
5480
<div class="row mt-4">
5581
<div class="col-12 col-xl-6">
5682
<h3>Bugs</h3>
57-
<ngb-filterable-dropdown *ngIf="customToggleText" [allowCreateItem]="allowCreateItem" [autoClose]="autoClose"
58-
[items]="items" [disabled]="disabled" [searchInputPlaceholder]="searchInputPlaceholder" [selection]="selection"
59-
[selectionMode]="selectionMode" (itemCreated)="onItemCreated($event)" (openChanged)="onOpenChanged($event)"
60-
(selectionChanged)="onSelectionChanged($event)">
83+
<ngb-filterable-dropdown
84+
*ngIf="customToggleText"
85+
[allowCreateItem]="allowCreateItem"
86+
[autoClose]="autoClose"
87+
[items]="items"
88+
[disabled]="disabled"
89+
[searchInputPlaceholder]="searchInputPlaceholder"
90+
[selection]="selection"
91+
[selectionMode]="selectionMode"
92+
[tooltips]="tooltips"
93+
[tooltipsOpenDelay]="tooltipsOpenDelay"
94+
(itemCreated)="onItemCreated($event)"
95+
(openChanged)="onOpenChanged($event)"
96+
(selectionChanged)="onSelectionChanged($event)"
97+
>
6198
Select a Bug 🐛
6299
</ngb-filterable-dropdown>
63-
<ngb-filterable-dropdown *ngIf="!customToggleText" [allowCreateItem]="allowCreateItem" [autoClose]="autoClose"
64-
[items]="items" [disabled]="disabled" [placeholder]="'No Bugs Selected'"
65-
[searchInputPlaceholder]="searchInputPlaceholder" [selection]="selection" [selectionMode]="selectionMode"
66-
(itemCreated)="onItemCreated($event)" (openChanged)="onOpenChanged($event)"
67-
(selectionChanged)="onSelectionChanged($event)"></ngb-filterable-dropdown>
100+
<ngb-filterable-dropdown
101+
*ngIf="!customToggleText"
102+
[allowCreateItem]="allowCreateItem"
103+
[autoClose]="autoClose"
104+
[items]="items"
105+
[disabled]="disabled"
106+
[placeholder]="'No Bugs Selected'"
107+
[searchInputPlaceholder]="searchInputPlaceholder"
108+
[selection]="selection"
109+
[selectionMode]="selectionMode"
110+
[tooltips]="tooltips"
111+
[tooltipsOpenDelay]="tooltipsOpenDelay"
112+
(itemCreated)="onItemCreated($event)"
113+
(openChanged)="onOpenChanged($event)"
114+
(selectionChanged)="onSelectionChanged($event)"
115+
></ngb-filterable-dropdown>
68116
</div>
69117
</div>
70118
<hr />
71119
<div class="row mt-4">
72120
<div class="col-12 col-xl-6">
73121
<h3>Custom Click Handle</h3>
74-
<ngb-custom-filterable-dropdown [allowCreateItem]="allowCreateItem" [autoClose]="autoClose" [items]="items"
75-
[searchInputPlaceholder]="searchInputPlaceholder" [selection]="genericHandleSelection"
76-
[selectionMode]="selectionMode" (itemCreated)="onItemCreated($event)"
77-
(openChanged)="genericHandleOpenChanged($event)" (selectionChanged)="genericHandlerOnSelectionChanged($event)">
78-
<span>A generic click handle. -- Selected: {{ genericHandleSelection }} -- isOpen:
79-
{{isGenericHandleDropdownOpen}}</span>
122+
<ngb-custom-filterable-dropdown
123+
[allowCreateItem]="allowCreateItem"
124+
[autoClose]="autoClose"
125+
[items]="items"
126+
[searchInputPlaceholder]="searchInputPlaceholder"
127+
[selection]="genericHandleSelection"
128+
[selectionMode]="selectionMode"
129+
[tooltips]="tooltips"
130+
[tooltipsOpenDelay]="tooltipsOpenDelay"
131+
(itemCreated)="onItemCreated($event)"
132+
(openChanged)="genericHandleOpenChanged($event)"
133+
(selectionChanged)="genericHandlerOnSelectionChanged($event)"
134+
>
135+
<span
136+
>A generic click handle. -- Selected: {{ genericHandleSelection }} --
137+
isOpen: {{ isGenericHandleDropdownOpen }}</span
138+
>
80139
</ngb-custom-filterable-dropdown>
81140
</div>
82141
</div>
83142
<div class="row mt-4">
84143
<div class="col-12 col-xl-6">
85144
<h3>Styled Custom Click Handle</h3>
86-
<ngb-custom-filterable-dropdown [allowCreateItem]="allowCreateItem" [autoClose]="autoClose" [items]="items"
87-
[searchInputPlaceholder]="searchInputPlaceholder" [selection]="genericHandleSelection"
88-
[selectionMode]="selectionMode" (itemCreated)="onItemCreated($event)"
89-
(openChanged)="genericHandleOpenChanged($event)" (selectionChanged)="genericHandlerOnSelectionChanged($event)">
145+
<ngb-custom-filterable-dropdown
146+
[allowCreateItem]="allowCreateItem"
147+
[autoClose]="autoClose"
148+
[items]="items"
149+
[searchInputPlaceholder]="searchInputPlaceholder"
150+
[selection]="genericHandleSelection"
151+
[selectionMode]="selectionMode"
152+
[tooltips]="tooltips"
153+
[tooltipsOpenDelay]="tooltipsOpenDelay"
154+
(itemCreated)="onItemCreated($event)"
155+
(openChanged)="genericHandleOpenChanged($event)"
156+
(selectionChanged)="genericHandlerOnSelectionChanged($event)"
157+
>
90158
<div class="alert alert-dark">
91-
Heavily styled handle -- Selected: {{ genericHandleSelection }} -- isOpen: {{isGenericHandleDropdownOpen}}
159+
Heavily styled handle -- Selected: {{ genericHandleSelection }} --
160+
isOpen: {{ isGenericHandleDropdownOpen }}
92161
</div>
93162
</ngb-custom-filterable-dropdown>
94163
</div>
95164
</div>
96-
</div>
165+
</div>

‎projects/ngb-filterable-dropdown-example/src/app/app.component.spec.ts

Lines changed: 5 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,17 @@
1-
import { Component, EventEmitter, Input, Output } from '@angular/core';
21
import { TestBed } from '@angular/core/testing';
2+
import { NgbCustomFilterableDropdownModule, NgbFilterableDropdownModule } from 'projects/ngb-filterable-dropdown/src';
33
import { AppComponent } from './app.component';
44

55
describe('AppComponent', () => {
66
beforeEach(() => {
77
TestBed.configureTestingModule({
88
declarations: [
99
AppComponent,
10-
MockFilterableDropdownComponent,
11-
MockCustomFilterableDropdownComponent
1210
],
11+
imports: [
12+
NgbCustomFilterableDropdownModule,
13+
NgbFilterableDropdownModule
14+
]
1315
}).compileComponents();
1416
});
1517

@@ -32,39 +34,3 @@ describe('AppComponent', () => {
3234
expect(compiled.querySelector('h2').textContent).toContain('ngb-filterable-dropdown-examples');
3335
});
3436
});
35-
36-
@Component({
37-
selector: 'ngb-filterable-dropdown', // eslint-disable-line @angular-eslint/component-selector
38-
template: ''
39-
})
40-
class MockFilterableDropdownComponent {
41-
@Input() allowCreateItem: any;
42-
@Input() autoClose: any;
43-
@Input() items: any;
44-
@Input() selection: any;
45-
@Input() selectionMode: any;
46-
@Input() disabled: any;
47-
@Input() placeholder: any;
48-
@Input() searchInputPlaceholder: any;
49-
@Output() itemCreated = new EventEmitter<any>();
50-
@Output() selectionChanged = new EventEmitter<any>();
51-
@Output() openChanged = new EventEmitter<any>();
52-
}
53-
54-
@Component({
55-
selector: 'ngb-custom-filterable-dropdown', // eslint-disable-line @angular-eslint/component-selector
56-
template: ''
57-
})
58-
class MockCustomFilterableDropdownComponent {
59-
@Input() allowCreateItem: any;
60-
@Input() autoClose: any;
61-
@Input() items: any;
62-
@Input() selection: any;
63-
@Input() selectionMode: any;
64-
@Input() disabled: any;
65-
@Input() placeholder: any;
66-
@Input() searchInputPlaceholder: any;
67-
@Output() itemCreated = new EventEmitter<any>();
68-
@Output() selectionChanged = new EventEmitter<any>();
69-
@Output() openChanged = new EventEmitter<any>();
70-
}

‎projects/ngb-filterable-dropdown-example/src/app/app.component.ts

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ export class AppComponent {
1212
selectionModes: Array<string> = Object.values(NgbFilterableDropdownSelectionMode);
1313
autoCloseValues = ['inside', 'outside', true, false];
1414

15-
items = ['Beetle', 'Ant', 'Moth', 'Fire Ant', 'Dung Beetle', 'Grass Ant'];
15+
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'];
1616

1717
allowCreateItem = false;
1818
autoClose: boolean | 'inside' | 'outside' = false;
@@ -24,6 +24,8 @@ export class AppComponent {
2424
searchInputPlaceholder = 'Search Bugs';
2525
selection: string | Array<string> = 'Moth';
2626
selectionMode = NgbFilterableDropdownSelectionMode.SingleSelect;
27+
tooltips = false;
28+
tooltipsOpenDelay = 750;
2729

2830
allowCreateItemClick(event: CheckboxClickEvent): void {
2931
this.allowCreateItem = event.target.checked;
@@ -69,6 +71,10 @@ export class AppComponent {
6971
this.selectionMode = value;
7072
this.selection = [];
7173
}
74+
75+
tooltipsClick(event: CheckboxClickEvent): void {
76+
this.tooltips = event.target.checked;
77+
}
7278
}
7379

7480
interface CheckboxClickEvent {

‎projects/ngb-filterable-dropdown/src/lib/ngb-custom-filterable-dropdown/ngb-custom-filterable-dropdown.component.html

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -72,6 +72,9 @@
7272
<button
7373
class="dropdown-item filterable-dropdown-item px-2"
7474
type="button"
75+
[ngbTooltip]="item"
76+
[disableTooltip]="!tooltips"
77+
[openDelay]="tooltipsOpenDelay"
7578
[hidden]="!isFiltered(item)"
7679
(click)="onItemSelect(item)"
7780
>

‎projects/ngb-filterable-dropdown/src/lib/ngb-custom-filterable-dropdown/ngb-custom-filterable-dropdown.component.spec.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -401,9 +401,9 @@ describe('NgbCustomFilterableDropdownComponent', () => {
401401
});
402402

403403
it('should clear filter text if dialog is being closed', () => {
404-
component.searchForm.controls['searchInput'].setValue(filterItem); // eslint-disable-line @typescript-eslint/dot-notation
404+
component.searchForm.controls['searchInput'].setValue(filterItem);
405405
component.onOpenChange(false);
406-
expect(component.searchForm.controls['searchInput'].value).toEqual(''); // eslint-disable-line @typescript-eslint/dot-notation
406+
expect(component.searchForm.controls['searchInput'].value).toEqual('');
407407
});
408408
});
409409

‎projects/ngb-filterable-dropdown/src/lib/ngb-custom-filterable-dropdown/ngb-custom-filterable-dropdown.component.ts

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,8 @@ export class NgbCustomFilterableDropdownComponent implements OnInit, OnDestroy {
1919
@Input() customClickHandle = false;
2020
@Input() disabled = false;
2121
@Input() searchInputPlaceholder = 'Search';
22+
@Input() tooltips = false;
23+
@Input() tooltipsOpenDelay = 0;
2224
@Input() set items(value: Array<string>) {
2325
this.setItems(value);
2426
}
@@ -125,7 +127,7 @@ export class NgbCustomFilterableDropdownComponent implements OnInit, OnDestroy {
125127
}
126128

127129
get searchInput(): AbstractControl {
128-
return this.searchForm.controls['searchInput']; // eslint-disable-line @typescript-eslint/dot-notation
130+
return this.searchForm.controls['searchInput'];
129131
}
130132

131133
get searchInputValue(): string {

0 commit comments

Comments
 (0)