nexheal-lib 0.0.3 → 0.0.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (56) hide show
  1. package/README.md +19 -15
  2. package/fesm2022/nexheal-lib.mjs +2852 -0
  3. package/fesm2022/nexheal-lib.mjs.map +1 -0
  4. package/index.d.ts +501 -0
  5. package/package.json +23 -47
  6. package/{projects/nexheal-lib/src → src}/styles/_formcontrols.scss +13 -0
  7. package/.editorconfig +0 -17
  8. package/.vscode/extensions.json +0 -4
  9. package/.vscode/launch.json +0 -20
  10. package/.vscode/tasks.json +0 -42
  11. package/angular.json +0 -36
  12. package/projects/nexheal-lib/README.md +0 -63
  13. package/projects/nexheal-lib/ng-package.json +0 -9
  14. package/projects/nexheal-lib/package.json +0 -12
  15. package/projects/nexheal-lib/src/directives/clickoutside.directive.ts +0 -34
  16. package/projects/nexheal-lib/src/lib/controls/autocomplete-control/autocomplete-control.component.html +0 -52
  17. package/projects/nexheal-lib/src/lib/controls/autocomplete-control/autocomplete-control.component.scss +0 -22
  18. package/projects/nexheal-lib/src/lib/controls/autocomplete-control/autocomplete-control.component.spec.ts +0 -22
  19. package/projects/nexheal-lib/src/lib/controls/autocomplete-control/autocomplete-control.component.ts +0 -367
  20. package/projects/nexheal-lib/src/lib/controls/calendar-control/calendar-control.component.html +0 -152
  21. package/projects/nexheal-lib/src/lib/controls/calendar-control/calendar-control.component.scss +0 -194
  22. package/projects/nexheal-lib/src/lib/controls/calendar-control/calendar-control.component.spec.ts +0 -22
  23. package/projects/nexheal-lib/src/lib/controls/calendar-control/calendar-control.component.ts +0 -759
  24. package/projects/nexheal-lib/src/lib/controls/checkbox-control/checkbox-control.component.html +0 -4
  25. package/projects/nexheal-lib/src/lib/controls/checkbox-control/checkbox-control.component.spec.ts +0 -22
  26. package/projects/nexheal-lib/src/lib/controls/checkbox-control/checkbox-control.component.ts +0 -94
  27. package/projects/nexheal-lib/src/lib/controls/input-control/input-control.component.html +0 -61
  28. package/projects/nexheal-lib/src/lib/controls/input-control/input-control.component.scss +0 -132
  29. package/projects/nexheal-lib/src/lib/controls/input-control/input-control.component.spec.ts +0 -22
  30. package/projects/nexheal-lib/src/lib/controls/input-control/input-control.component.ts +0 -202
  31. package/projects/nexheal-lib/src/lib/controls/multiselect-control/multiselect-control.component.html +0 -72
  32. package/projects/nexheal-lib/src/lib/controls/multiselect-control/multiselect-control.component.scss +0 -90
  33. package/projects/nexheal-lib/src/lib/controls/multiselect-control/multiselect-control.component.spec.ts +0 -22
  34. package/projects/nexheal-lib/src/lib/controls/multiselect-control/multiselect-control.component.ts +0 -482
  35. package/projects/nexheal-lib/src/lib/controls/select-control/select-control.component.html +0 -53
  36. package/projects/nexheal-lib/src/lib/controls/select-control/select-control.component.scss +0 -19
  37. package/projects/nexheal-lib/src/lib/controls/select-control/select-control.component.spec.ts +0 -22
  38. package/projects/nexheal-lib/src/lib/controls/select-control/select-control.component.ts +0 -375
  39. package/projects/nexheal-lib/src/lib/controls/switch-control/switch-control.component.html +0 -4
  40. package/projects/nexheal-lib/src/lib/controls/switch-control/switch-control.component.scss +0 -53
  41. package/projects/nexheal-lib/src/lib/controls/switch-control/switch-control.component.spec.ts +0 -22
  42. package/projects/nexheal-lib/src/lib/controls/switch-control/switch-control.component.ts +0 -93
  43. package/projects/nexheal-lib/src/lib/controls/text-editor/text-editor.component.html +0 -88
  44. package/projects/nexheal-lib/src/lib/controls/text-editor/text-editor.component.scss +0 -122
  45. package/projects/nexheal-lib/src/lib/controls/text-editor/text-editor.component.spec.ts +0 -22
  46. package/projects/nexheal-lib/src/lib/controls/text-editor/text-editor.component.ts +0 -314
  47. package/projects/nexheal-lib/src/lib/controls/textarea-control/textarea-control.component.html +0 -19
  48. package/projects/nexheal-lib/src/lib/controls/textarea-control/textarea-control.component.scss +0 -15
  49. package/projects/nexheal-lib/src/lib/controls/textarea-control/textarea-control.component.spec.ts +0 -22
  50. package/projects/nexheal-lib/src/lib/controls/textarea-control/textarea-control.component.ts +0 -83
  51. package/projects/nexheal-lib/src/public-api.ts +0 -13
  52. package/projects/nexheal-lib/tsconfig.lib.json +0 -18
  53. package/projects/nexheal-lib/tsconfig.lib.prod.json +0 -11
  54. package/projects/nexheal-lib/tsconfig.spec.json +0 -14
  55. package/tsconfig.json +0 -39
  56. /package/{projects/nexheal-lib/src → src}/styles/nexheal.scss +0 -0
@@ -1,42 +0,0 @@
1
- {
2
- // For more information, visit: https://go.microsoft.com/fwlink/?LinkId=733558
3
- "version": "2.0.0",
4
- "tasks": [
5
- {
6
- "type": "npm",
7
- "script": "start",
8
- "isBackground": true,
9
- "problemMatcher": {
10
- "owner": "typescript",
11
- "pattern": "$tsc",
12
- "background": {
13
- "activeOnStart": true,
14
- "beginsPattern": {
15
- "regexp": "(.*?)"
16
- },
17
- "endsPattern": {
18
- "regexp": "bundle generation complete"
19
- }
20
- }
21
- }
22
- },
23
- {
24
- "type": "npm",
25
- "script": "test",
26
- "isBackground": true,
27
- "problemMatcher": {
28
- "owner": "typescript",
29
- "pattern": "$tsc",
30
- "background": {
31
- "activeOnStart": true,
32
- "beginsPattern": {
33
- "regexp": "(.*?)"
34
- },
35
- "endsPattern": {
36
- "regexp": "bundle generation complete"
37
- }
38
- }
39
- }
40
- }
41
- ]
42
- }
package/angular.json DELETED
@@ -1,36 +0,0 @@
1
- {
2
- "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
3
- "version": 1,
4
- "newProjectRoot": "projects",
5
- "projects": {
6
- "nexheal-lib": {
7
- "projectType": "library",
8
- "root": "projects/nexheal-lib",
9
- "sourceRoot": "projects/nexheal-lib/src",
10
- "prefix": "lib",
11
- "architect": {
12
- "build": {
13
- "builder": "@angular/build:ng-packagr",
14
- "configurations": {
15
- "production": {
16
- "tsConfig": "projects/nexheal-lib/tsconfig.lib.prod.json"
17
- },
18
- "development": {
19
- "tsConfig": "projects/nexheal-lib/tsconfig.lib.json"
20
- }
21
- },
22
- "defaultConfiguration": "production"
23
- },
24
- "test": {
25
- "builder": "@angular/build:karma",
26
- "options": {
27
- "tsConfig": "projects/nexheal-lib/tsconfig.spec.json"
28
- }
29
- }
30
- }
31
- }
32
- },
33
- "cli": {
34
- "analytics": "fb79a96b-c8e6-48b5-b3da-6b972d806f12"
35
- }
36
- }
@@ -1,63 +0,0 @@
1
- # NexhealLib
2
-
3
- This project was generated using [Angular CLI](https://github.com/angular/angular-cli) version 20.1.0.
4
-
5
- ## Code scaffolding
6
-
7
- Angular CLI includes powerful code scaffolding tools. To generate a new component, run:
8
-
9
- ```bash
10
- ng generate component component-name
11
- ```
12
-
13
- For a complete list of available schematics (such as `components`, `directives`, or `pipes`), run:
14
-
15
- ```bash
16
- ng generate --help
17
- ```
18
-
19
- ## Building
20
-
21
- To build the library, run:
22
-
23
- ```bash
24
- ng build nexheal-lib
25
- ```
26
-
27
- This command will compile your project, and the build artifacts will be placed in the `dist/` directory.
28
-
29
- ### Publishing the Library
30
-
31
- Once the project is built, you can publish your library by following these steps:
32
-
33
- 1. Navigate to the `dist` directory:
34
- ```bash
35
- cd dist/nexheal-lib
36
- ```
37
-
38
- 2. Run the `npm publish` command to publish your library to the npm registry:
39
- ```bash
40
- npm publish
41
- ```
42
-
43
- ## Running unit tests
44
-
45
- To execute unit tests with the [Karma](https://karma-runner.github.io) test runner, use the following command:
46
-
47
- ```bash
48
- ng test
49
- ```
50
-
51
- ## Running end-to-end tests
52
-
53
- For end-to-end (e2e) testing, run:
54
-
55
- ```bash
56
- ng e2e
57
- ```
58
-
59
- Angular CLI does not come with an end-to-end testing framework by default. You can choose one that suits your needs.
60
-
61
- ## Additional Resources
62
-
63
- For more information on using the Angular CLI, including detailed command references, visit the [Angular CLI Overview and Command Reference](https://angular.dev/tools/cli) page.
@@ -1,9 +0,0 @@
1
- {
2
- "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
3
- "dest": "../../dist/nexheal-lib",
4
- "lib": {
5
- "entryFile": "src/public-api.ts",
6
- "styleIncludePaths": ["src/styles"]
7
- },
8
- "assets": ["src/styles"]
9
- }
@@ -1,12 +0,0 @@
1
- {
2
- "name": "nexheal-lib",
3
- "version": "0.0.3",
4
- "peerDependencies": {
5
- "@angular/common": "^20.1.0",
6
- "@angular/core": "^20.1.0"
7
- },
8
- "dependencies": {
9
- "tslib": "^2.3.0"
10
- },
11
- "sideEffects": false
12
- }
@@ -1,34 +0,0 @@
1
- import {
2
- Directive,
3
- ElementRef,
4
- EventEmitter,
5
- Output,
6
- inject,
7
- DestroyRef,
8
- } from '@angular/core';
9
- import { DOCUMENT } from '@angular/common';
10
- import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
11
- import { fromEvent } from 'rxjs';
12
-
13
- @Directive({
14
- selector: '[clickOutside]',
15
- standalone: true,
16
- })
17
- export class ClickOutsideDirective {
18
- @Output() clickOutside = new EventEmitter<MouseEvent>();
19
-
20
- private host = inject(ElementRef);
21
- private document = inject(DOCUMENT);
22
- private destroyRef = inject(DestroyRef);
23
-
24
- constructor() {
25
- fromEvent<MouseEvent>(this.document, 'click')
26
- .pipe(takeUntilDestroyed(this.destroyRef))
27
- .subscribe((event: MouseEvent) => {
28
- const clickedInside = this.host.nativeElement.contains(event.target);
29
- if (!clickedInside) {
30
- this.clickOutside.emit(event);
31
- }
32
- });
33
- }
34
- }
@@ -1,52 +0,0 @@
1
- <div class="form-group auto-complete" [ngClass]="customClass">
2
- @if (title) {
3
- <label class="inp-label" [ngClass]="{ 'required': required }">{{ title }}</label>
4
- }
5
-
6
- <input #inputElement type="text" class="form-control" [placeholder]="placeholder" [formControl]="inputControl"
7
- (blur)="onBlur()" (keydown)="onKeyDown($event)" (focus)="onFocus()" [ngClass]="{'is-invalid': error}"
8
- [attr.autocomplete]="autocomplete || null" />
9
-
10
- <span class="focus-border"></span>
11
-
12
- @if (!inputLoader && inputControl.value && clearVal && hasFocus) {
13
- <label class="clear" (click)="resetInput()">
14
- <i class="he he-close"></i>
15
- </label>
16
- }
17
- @if (isDropdownOpen) {
18
- <div #dropdownElement class="option-list">
19
- @if (filteredSuggestions.length === 0) {
20
- <div class="no-results">
21
- <div>No results found</div>
22
- @if (isAddNewItem) {
23
- <div (click)="onAddNewItemClick()" class="btn-new">
24
- Add New Item
25
- </div>
26
- }
27
- </div>
28
- } @else {
29
- @for (suggestion of filteredSuggestions; track suggestion[optionDisplayProperty]; let i = $index) {
30
- <div class="list-item" [ngClass]="{
31
- 'active': suggestion === selectedItems,
32
- 'highlighted': highlightedIndex === i
33
- }" (mousedown)="onOptionMouseDown()" (click)="selectSuggestion(suggestion)" (mouseover)="onMouseOver(i)">
34
- @if (suggestion.countryCode) {
35
- <img src="https://flagcdn.com/w80/{{ suggestion.countryCode }}.png" width="20"
36
- alt="{{ suggestion.countryCode }} flag" loading="lazy" />
37
- }
38
- {{ suggestion[optionDisplayProperty] }}
39
- </div>
40
- }
41
- }
42
- </div>
43
- }
44
-
45
- @if (inputLoader) {
46
- <label class="loader input-loader"></label>
47
- }
48
-
49
- @if (error) {
50
- <div class="val-msg">{{ errorMessage }}</div>
51
- }
52
- </div>
@@ -1,22 +0,0 @@
1
- .form-group {
2
- &.auto-complete {
3
- .form-control {
4
- padding-right: unset;
5
- }
6
- .clear {
7
- right: 7px;
8
- }
9
- .option-list {
10
- .no-results {
11
- padding: 10px;
12
- color: #9b9b9b;
13
- text-align: center;
14
- .btn-new {
15
- padding: 5px 0;
16
- cursor: pointer;
17
- color: #0d6efd;
18
- }
19
- }
20
- }
21
- }
22
- }
@@ -1,22 +0,0 @@
1
- import { ComponentFixture, TestBed } from '@angular/core/testing';
2
- import { AutocompleteControl } from './autocomplete-control.component';
3
-
4
- describe('AutocompleteControl', () => {
5
- let component: AutocompleteControl;
6
- let fixture: ComponentFixture<AutocompleteControl>;
7
-
8
- beforeEach(async () => {
9
- await TestBed.configureTestingModule({
10
- imports: [AutocompleteControl]
11
- })
12
- .compileComponents();
13
-
14
- fixture = TestBed.createComponent(AutocompleteControl);
15
- component = fixture.componentInstance;
16
- fixture.detectChanges();
17
- });
18
-
19
- it('should create', () => {
20
- expect(component).toBeTruthy();
21
- });
22
- });
@@ -1,367 +0,0 @@
1
- import { CommonModule } from "@angular/common";
2
- import {
3
- Component,
4
- EventEmitter,
5
- Input,
6
- OnDestroy,
7
- OnInit,
8
- Output,
9
- ViewChild,
10
- ElementRef,
11
- AfterViewInit,
12
- } from "@angular/core";
13
- import {
14
- ControlValueAccessor,
15
- FormControl,
16
- ReactiveFormsModule,
17
- NG_VALUE_ACCESSOR,
18
- NG_VALIDATORS,
19
- } from "@angular/forms";
20
- import { debounceTime, distinctUntilChanged, Subscription } from "rxjs";
21
- import { createPopper, Instance as PopperInstance } from "@popperjs/core";
22
-
23
- @Component({
24
- selector: "autocomplete-control",
25
- standalone: true,
26
- imports: [CommonModule, ReactiveFormsModule],
27
- templateUrl: "./autocomplete-control.component.html",
28
- styleUrls: ["./autocomplete-control.component.scss"],
29
- providers: [
30
- {
31
- provide: NG_VALUE_ACCESSOR,
32
- useExisting: AutocompleteControl,
33
- multi: true,
34
- },
35
- ],
36
- })
37
- export class AutocompleteControl
38
- implements ControlValueAccessor, OnInit, OnDestroy, AfterViewInit {
39
-
40
- private subscription: Subscription = new Subscription();
41
-
42
- @Input() title!: string;
43
- @Input() required: boolean = false;
44
- @Input() placeholder: string = "";
45
- @Input() customClass!: string;
46
- @Input() clearVal: boolean = true;
47
- @Input() field: string = "";
48
- @Input() error: boolean = false;
49
- @Input() errorMessage: string = "";
50
- @Input() autocomplete: string = "";
51
- @Input() inputLoader: boolean = false;
52
- @Input() isAddNewItem: boolean = false;
53
- @Input() optionDisplayProperty: string = "displayname";
54
- @Output() optionSelected = new EventEmitter<any>();
55
- @Output() search = new EventEmitter<string>();
56
- @Output() selectionCleared = new EventEmitter<void>();
57
- @Output() addNewItemClicked: EventEmitter<void> = new EventEmitter<void>();
58
- @Output() blurEvent = new EventEmitter<void>();
59
- @Output() optionPatched = new EventEmitter<any>();
60
-
61
- private _disabled: boolean = false;
62
- private _options: any[] = [];
63
- @Input() set options(value: any[]) {
64
- this._options = value || [];
65
- this.processValueBuffer();
66
- }
67
- get options(): any[] {
68
- return this._options;
69
- }
70
- @Input() get disabled(): boolean {
71
- return this._disabled;
72
- }
73
- set disabled(value: boolean) {
74
- this._disabled = value;
75
- if (this.inputControl) {
76
- if (value) {
77
- this.inputControl.disable();
78
- } else {
79
- this.inputControl.enable();
80
- }
81
- }
82
- }
83
- private valueBuffer: any = null;
84
- private popperInstance!: PopperInstance;
85
- private preventDropdownReopen: boolean = false;
86
- private preventClearOnBlur: boolean = false;
87
- private onChange: any = () => { };
88
- private onTouched: any = () => { };
89
-
90
- @ViewChild("inputElement") inputElement!: ElementRef;
91
- @ViewChild("dropdownElement") dropdownElement!: ElementRef;
92
-
93
- inputControl = new FormControl("");
94
- isDropdownOpen: boolean = false;
95
- hasFocus: boolean = false;
96
- selectedItems: any;
97
- filteredSuggestions: any[] = [];
98
- highlightedIndex: number | null = null;
99
-
100
- constructor() {
101
- this.inputControl.valueChanges
102
- .pipe(debounceTime(10), distinctUntilChanged())
103
- .subscribe((value) => {
104
- if (this.preventDropdownReopen) {
105
- this.preventDropdownReopen = false;
106
- return;
107
- }
108
- if (value && value.trim().length > 0) {
109
- const filterValue = value;
110
- this.filterSuggestions(filterValue);
111
- this.search.emit(filterValue);
112
- } else {
113
- this.isDropdownOpen = false;
114
- }
115
- });
116
- }
117
-
118
- ngOnInit() {
119
- this.inputControl.markAsPristine();
120
- }
121
-
122
- ngAfterViewInit() {
123
- this.createPopperInstance();
124
- }
125
-
126
- ngOnDestroy() {
127
- this.subscription.unsubscribe();
128
- if (this.popperInstance) {
129
- this.popperInstance.destroy();
130
- }
131
- }
132
-
133
- writeValue(value: any): void {
134
- this.preventDropdownReopen = true;
135
- if (value == null) {
136
- // Clear everything if we get null
137
- this.valueBuffer = null;
138
- this.selectedItems = null;
139
- this.preventDropdownReopen = true;
140
- this.inputControl.setValue("", { emitEvent: false });
141
- } else {
142
- // Otherwise, treat as normal
143
- this.valueBuffer = value;
144
- this.processValueBuffer();
145
- }
146
- }
147
- private processValueBuffer() {
148
- if (this.valueBuffer == null) {
149
- this.selectedItems = null;
150
- this.preventDropdownReopen = true;
151
- // this.inputControl.setValue("", { emitEvent: false });
152
- return;
153
- }
154
- if (this._options && this._options.length > 0) {
155
- const matchedSuggestion = this._options.find(
156
- (s) => s.id === this.valueBuffer
157
- );
158
- if (matchedSuggestion) {
159
- this.preventDropdownReopen = true;
160
- this.inputControl.setValue(
161
- matchedSuggestion[this.optionDisplayProperty],
162
- { emitEvent: false }
163
- );
164
- this.selectedItems = matchedSuggestion;
165
- this.onChange(matchedSuggestion.id);
166
- this.optionPatched.emit(matchedSuggestion);
167
- this.valueBuffer = null;
168
- return;
169
- }
170
- }
171
- this.inputControl.setValue("", { emitEvent: false });
172
- this.selectedItems = null;
173
- }
174
-
175
- registerOnChange(fn: any): void {
176
- this.onChange = fn;
177
- }
178
- registerOnTouched(fn: any): void {
179
- this.onTouched = fn;
180
- }
181
-
182
- setDisabledState?(isDisabled: boolean): void {
183
- if (isDisabled) {
184
- this.inputControl.disable();
185
- } else {
186
- this.inputControl.enable();
187
- }
188
- }
189
-
190
- filterSuggestions(value: string) {
191
- if (this.preventDropdownReopen || !this.hasFocus) {
192
- this.preventDropdownReopen = false;
193
- return;
194
- }
195
- if (value === "") {
196
- this.filteredSuggestions = [];
197
- this.isDropdownOpen = false;
198
- return;
199
- }
200
- const filterValue = value.toString().toLowerCase();
201
- this.filteredSuggestions = this.options.filter((suggestion) =>
202
- suggestion[this.optionDisplayProperty]
203
- ?.toLowerCase()
204
- .includes(filterValue)
205
- );
206
- this.highlightedIndex = this.filteredSuggestions.length > 0 ? 0 : null;
207
- this.isDropdownOpen = true;
208
- setTimeout(() => {
209
- this.createPopperInstance();
210
- }, 0);
211
- }
212
- selectSuggestion(suggestion: any) {
213
- this.preventDropdownReopen = true;
214
- this.inputControl.setValue(suggestion[this.optionDisplayProperty], {
215
- emitEvent: false,
216
- });
217
- this.onChange(suggestion.id);
218
- this.inputControl.markAsTouched();
219
- this.inputControl.updateValueAndValidity(); // Trigger validation update
220
- this.isDropdownOpen = false;
221
- if (this.selectedItems?.id !== suggestion.id) {
222
- this.selectedItems = suggestion;
223
- this.optionSelected.emit(suggestion);
224
- }
225
- }
226
-
227
- // events
228
- onFocus() {
229
- this.hasFocus = true;
230
- }
231
- onBlur() {
232
- this.blurEvent.emit();
233
- this.onTouched();
234
- // Delay onBlur handling so that mousedown and click can occur first.
235
- setTimeout(() => {
236
- this.hasFocus = false;
237
- this.isDropdownOpen = false;
238
-
239
- // If an option click is in progress, do not clear the input.
240
- if (!this.preventClearOnBlur) {
241
- // Optionally: check if the current value is valid against options.
242
- // If not found, clear the input.
243
- const currentValue = this.inputControl.value;
244
- const found = this._options.find(
245
- (opt) =>
246
- String(opt[this.optionDisplayProperty]).toLowerCase() ===
247
- String(currentValue).toLowerCase()
248
- );
249
- if (!found) {
250
- this.inputControl.setValue("");
251
- this.selectedItems = null;
252
- this.onChange(null);
253
- }
254
- }
255
-
256
- // Reset the flag after handling blur.
257
- this.preventClearOnBlur = false;
258
- }, 300);
259
- }
260
- onKeyDown(event: KeyboardEvent) {
261
- if (!this.isDropdownOpen) {
262
- return;
263
- }
264
- switch (event.key) {
265
- case "ArrowDown":
266
- this.highlightedIndex =
267
- this.highlightedIndex === null ||
268
- this.highlightedIndex === this.filteredSuggestions.length - 1
269
- ? 0
270
- : this.highlightedIndex + 1;
271
- event.preventDefault();
272
- this.scrollHighlightedItemIntoView();
273
- break;
274
- case "ArrowUp":
275
- this.highlightedIndex =
276
- this.highlightedIndex === null || this.highlightedIndex === 0
277
- ? this.filteredSuggestions.length - 1
278
- : this.highlightedIndex - 1;
279
- event.preventDefault();
280
- this.scrollHighlightedItemIntoView();
281
- break;
282
- case "Enter":
283
- if (
284
- this.highlightedIndex !== null &&
285
- this.filteredSuggestions.length > 0
286
- ) {
287
- this.selectSuggestion(
288
- this.filteredSuggestions[this.highlightedIndex]
289
- );
290
- } else {
291
- this.isDropdownOpen = false;
292
- }
293
- event.preventDefault();
294
- break;
295
- case "Escape":
296
- this.isDropdownOpen = false;
297
- break;
298
- default:
299
- break;
300
- }
301
- }
302
- onOptionMouseDown(): void {
303
- this.preventClearOnBlur = true;
304
- }
305
- onMouseOver(index: number) {
306
- this.highlightedIndex = index;
307
- }
308
-
309
- // actions
310
- onAddNewItemClick(): void {
311
- this.addNewItemClicked.emit();
312
- }
313
-
314
- // popper
315
- private createPopperInstance() {
316
- if (this.popperInstance) {
317
- this.popperInstance.destroy();
318
- }
319
- if (this.inputElement && this.dropdownElement) {
320
- this.popperInstance = createPopper(
321
- this.inputElement.nativeElement,
322
- this.dropdownElement.nativeElement,
323
- {
324
- placement: "bottom-start",
325
- modifiers: [
326
- {
327
- name: "offset",
328
- options: {
329
- offset: [0, 1],
330
- },
331
- },
332
- {
333
- name: "flip",
334
- options: {
335
- fallbackPlacements: ["top-start", "bottom-start"],
336
- },
337
- },
338
- ],
339
- }
340
- );
341
- }
342
- }
343
- private scrollHighlightedItemIntoView() {
344
- if (this.highlightedIndex !== null) {
345
- const highlightedItem =
346
- this.dropdownElement.nativeElement.querySelectorAll(".list-item")[
347
- this.highlightedIndex
348
- ];
349
- if (highlightedItem) {
350
- highlightedItem.scrollIntoView({ block: "nearest" });
351
- }
352
- }
353
- }
354
-
355
- // clear
356
- resetInput() {
357
- this.inputControl.setValue("");
358
- this.selectionCleared.emit();
359
- this.selectedItems = null;
360
- this.valueBuffer = null;
361
- }
362
- removeItem(item: any) {
363
- this.selectedItems = this.selectedItems.filter((i: any) => i !== item);
364
- this.onChange(this.selectedItems);
365
- this.optionSelected.emit(this.selectedItems);
366
- }
367
- }