autocomplete modifs

projects/ngx-cream-lib/src/lib/autocomplete/autocomplete.component.css

@@ -1,10 +1,10 @@
 #b1-listbox {
-  padding: 0.4rem;
   position: absolute;
   list-style: none;
   background-color: white;
   border: 1px solid grey;
-  min-width: 14.6rem;
+  min-width: 13rem;
+  max-width: 13rem;
   max-height: 14rem;
   overflow: scroll;
   overflow-x: hidden;
@@ -13,6 +13,10 @@
 }
 
 #b1-listbox li {
-  padding: 10px;
+  padding: 0.5rem;
+}
+
+#b1-listbox li:hover {
+  background-color: grey;
 }
 

projects/ngx-cream-lib/src/lib/autocomplete/autocomplete.component.html

@@ -1,35 +1,24 @@
 <label for="b1-input">{{ label }}</label>
-<div class="box box-list" (focusout)="close()" (keydown)="escClose($event)">
+<div class="box box-list" (keydown)="escClose($event)" (focusout)="close()">
   <div class="group">
     <input
       #acInput
       id="b1-input"
       class="b_edit"
       type="text"
       role="combobox"
-      (focus)="toggleOpen()"
+      (keypress.escape)="close()"
+      (focus)="open()"
       (click)="onChange($event)"
       (keyup)="onChange($event)"
-      aria-autocomplete="countries"
+      aria-autocomplete="values"
       [attr.aria-expanded]="isOpen"
       aria-controls="b1-listbox" />
-    <button
-      id="b1-button"
-      tabindex="-1"
-      aria-label="Regions"
-      [attr.aria-expanded]="isOpen"
-      (click)="toggleOpen()"
-      (close)="close()"
-      aria-controls="b1-listbox">
-      <svg width="18" height="16" aria-hidden="true" focusable="false" style="forced-color-adjust: auto">
-        <polygon class="arrow" stroke-width="0" fill-opacity="0.75" fill="currentcolor" points="3,6 15,6 9,14"></polygon>
-      </svg>
-    </button>
 
-    <ul id="b1-listbox" role="listbox" [hidden]="!isOpen" aria-label="Regions">
-      <p>
-        <li *ngFor="let li of filteredCountriesList">{{ li }}</li>
-      </p>
+    <ul id="b1-listbox" role="listbox" [hidden]="!isOpen" aria-label="Values">
+      <li *ngFor="let li of filteredList" (click)="getSelectedValue(li)">
+        {{ li }}
+      </li>
     </ul>
   </div>
 </div>

projects/ngx-cream-lib/src/lib/autocomplete/autocomplete.component.ts

@@ -1,4 +1,4 @@
-import { Component, Input } from '@angular/core';
+import { Component, ElementRef, Input, ViewChild } from '@angular/core';
 
 @Component({
   selector: 'c3m-autocomplete',
@@ -8,17 +8,21 @@ import { Component, Input } from '@angular/core';
 export class AutocompleteComponent {
   @Input() isOpen = false;
   @Input() label = '';
-  @Input() countries: Array<string> = [];
+  @Input() values: Array<string> = [];
   @Input() acValue = '';
-  @Input() filteredCountriesList: Array<string> = [];
+  @Input() filteredList: Array<string> = [];
+  @Input() selectedValue = false;
+  @ViewChild('acInput') acInput!: ElementRef;
 
-  toggleOpen(): void {
+  open(): void {
     this.isOpen = !this.isOpen;
     this.onChange;
   }
 
   close(): void {
-    this.isOpen = false;
+    setTimeout(() => {
+      this.isOpen = false;
+    }, 300);
   }
 
   escClose(event: KeyboardEvent): void {
@@ -29,6 +33,12 @@ export class AutocompleteComponent {
 
   onChange(e: any) {
     this.acValue = e.target.value;
-    this.filteredCountriesList = this.countries.filter(country => country.toLowerCase().startsWith(this.acValue.toLowerCase()));
+    this.filteredList = this.values.filter(value => value.toLowerCase().startsWith(this.acValue.toLowerCase()));
+  }
+
+  getSelectedValue(val: string) {
+    this.acInput.nativeElement.value = val;
+    this.selectedValue = true;
+    this.close();
   }
 }

src/app/pages/autocomplete-page/autocomplete-page.component.html

@@ -3,7 +3,7 @@ <h3>Autocomplete</h3>
 
   <c3m-tabs class="block-style" label="Demo and Code">
     <c3m-tab-panel class="block-style" tabTitle="Demo" [isActive]="true">
-      <c3m-autocomplete label="Label of autocomplete" [countries]="countries"></c3m-autocomplete>
+      <c3m-autocomplete label="Label of autocomplete" [values]="values"></c3m-autocomplete>
     </c3m-tab-panel>
     <c3m-tab-panel class="block-style" tabTitle="Application">
       <pre></pre>

src/app/pages/autocomplete-page/autocomplete-page.component.ts

@@ -10,7 +10,7 @@ export class AutocompletePageComponent {
   componentName = 'c3m-autocomplete';
   resourceType = 'Component';
 
-  countries = [
+  values = [
     'Hauts-de-France',
     'Normandie',
     'Grand Est',