Bug/general fixes (#9)

* 🔧 palette arrow navigation

* 🔧 fix browser module error

README.md

@@ -9,7 +9,7 @@
 
 | Angular Version | NPM Version |
 |-----------------|-------------|
-| 13.2.3          | 13.0.2      |
+| 13.2.3          | 13.0.3      |
 | < 13.0.0        | 0.0.77      |
 
 ## Reference

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mprisma/components",
-  "version": "13.0.2",
+  "version": "13.0.3",
   "repository": {
     "type": "git",
     "url": "https://github.com/gabriel-gn/prisma-components.git"
@@ -37,11 +37,11 @@
     "@storybook/components": "^6.4.19",
     "@types/lodash": "^4.14.178",
     "angular2-hotkeys": "^13.1.0",
+    "autoprefixer": "^10.3.7",
     "bootstrap": "^5.1.3",
     "lodash": "^4.17.21",
     "ngx-cookie-service": "^13.1.2",
     "popper.js": "^1.16.1",
-    "autoprefixer": "^10.3.7",
     "postcss-flexbugs-fixes": "^5.0.2",
     "react": "^16.14.0",
     "react-dom": "^16.14.0",

src/components/inputs/multi-select/multi-select.component.ts

@@ -66,13 +66,14 @@ export class MultiSelectComponent implements OnInit, AfterViewInit {
    */
   @Input() selectedOptions: MultiSelectOption[] = [];
 
-  public myControl: FormControl = new FormControl();
+  public readonly myControl: FormControl;
   public inputValue: string = '';
   public filteredOptions: Observable<MultiSelectOption[]>;
 
   constructor(
     private cdr: ChangeDetectorRef
   ) {
+    this.myControl = new FormControl();
   }
 
   ngOnInit(): void {
@@ -87,9 +88,13 @@ export class MultiSelectComponent implements OnInit, AfterViewInit {
     this.clearInput();
   }
 
-  displayFn(user: MultiSelectOption): string {
+  /**
+   * Função utilizada para colocar texto na caixa de input ao selecionar uma opção
+   * @param user
+   */
+  displayFn(option: MultiSelectOption): string {
     return '';
-    // return user && user.label ? user.label : '';
+    // return option && option.label ? option.label : '';
   }
 
   private _filter(label: string): MultiSelectOption[] {
@@ -124,9 +129,10 @@ export class MultiSelectComponent implements OnInit, AfterViewInit {
   }
 
   public openSelect(): void {
-    setTimeout(() => {
-      try { this.inputBoxEl.nativeElement.focus(); } catch (e) {}
-    }, 0);
+    // setTimeout(() => {
+    //   try { this.inputBoxEl.nativeElement.focus(); } catch (e) {}
+    // }, 0);
+    this.trigger.openPanel();
   }
 
   public clearSelected(): void {

src/components/inputs/multi-select/multi-select.module.ts

@@ -5,8 +5,6 @@ import {FormsModule, ReactiveFormsModule} from '@angular/forms';
 import {MatAutocompleteModule} from '@angular/material/autocomplete';
 import {MatInputModule} from '@angular/material/input';
 import {CommonModule} from '@angular/common';
-import {BrowserModule} from "@angular/platform-browser";
-
 
 @NgModule({
   declarations: [
@@ -17,7 +15,6 @@ import {BrowserModule} from "@angular/platform-browser";
   ],
   imports: [
     CommonModule,
-    BrowserModule,
     FormsModule,
     ReactiveFormsModule,
     MatAutocompleteModule,

src/services/command-palette/dialog/dialog.component.html

@@ -43,6 +43,7 @@
                  (keydown.arrowLeft)="$event.preventDefault(); goBackOneLevel()"
                  (keydown.arrowRight)="$event.preventDefault(); paletteEntryAction(childEntry)"
                  (keydown.enter)="$event.preventDefault(); paletteEntryAction(childEntry)"
+                 (keydown.backspace)="$event.preventDefault(); focusSearchInput()"
                  class="palette-result-entry"
             >
               <p>{{childEntry.label}}{{hasChildEntries(childEntry) ? '...' : ''}}</p>

src/services/command-palette/dialog/dialog.component.ts

@@ -71,7 +71,7 @@ export class DialogComponent implements AfterViewInit, OnDestroy {
     this.componentInjectorService.removeComponentFromBody(this.itself);
   }
 
-  private focusSearchInput(): void {
+  public focusSearchInput(): void {
     setTimeout(() => {
       this.currentFocusedElement = this.rootPanelComponent;
       this.rootPanelComponent.nativeElement.children[0].children[1].focus();
@@ -89,7 +89,7 @@ export class DialogComponent implements AfterViewInit, OnDestroy {
     if (focusNextIndex >= arrayResultEntryElements.length) {
       this.focusSearchInput();
     }
-    else if (isNaN(focusNextIndex)) {
+    else if (!isNaN(focusNextIndex)) {
       this.currentFocusedElement = arrayResultEntryElements[focusNextIndex];
       this.currentFocusedElement.nativeElement.focus();
     } else {
@@ -104,7 +104,7 @@ export class DialogComponent implements AfterViewInit, OnDestroy {
     if (focusPreviousIndex < 0) {
       this.focusSearchInput();
     }
-    else if (isNaN(focusPreviousIndex)) {
+    else if (!isNaN(focusPreviousIndex)) {
       this.currentFocusedElement = arrayResultEntryElements[focusPreviousIndex];
       this.currentFocusedElement.nativeElement.focus();
     } else {