modifs autocomplete

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

@@ -0,0 +1,18 @@
+#b1-listbox {
+  padding: 0.4rem;
+  position: absolute;
+  list-style: none;
+  background-color: white;
+  border: 1px solid grey;
+  min-width: 14.6rem;
+  max-height: 14rem;
+  overflow: scroll;
+  overflow-x: hidden;
+  font-size: 95%;
+  cursor: pointer;
+}
+
+#b1-listbox li {
+  padding: 10px;
+}
+

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

@@ -0,0 +1,35 @@
+<label for="b1-input">{{ label }}</label>
+<div class="box box-list" (focusout)="close()" (keydown)="escClose($event)">
+  <div class="group">
+    <input
+      #acInput
+      id="b1-input"
+      class="b_edit"
+      type="text"
+      role="combobox"
+      (focus)="toggleOpen()"
+      (click)="onChange($event)"
+      (keyup)="onChange($event)"
+      aria-autocomplete="countries"
+      [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>
+  </div>
+</div>

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

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { AutocompleteComponent } from './autocomplete.component';
+
+describe('AutocompleteComponent', () => {
+  let component: AutocompleteComponent;
+  let fixture: ComponentFixture<AutocompleteComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ AutocompleteComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(AutocompleteComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,34 @@
+import { Component, Input } from '@angular/core';
+
+@Component({
+  selector: 'c3m-autocomplete',
+  templateUrl: './autocomplete.component.html',
+  styleUrls: ['./autocomplete.component.css'],
+})
+export class AutocompleteComponent {
+  @Input() isOpen = false;
+  @Input() label = '';
+  @Input() countries: Array<string> = [];
+  @Input() acValue = '';
+  @Input() filteredCountriesList: Array<string> = [];
+
+  toggleOpen(): void {
+    this.isOpen = !this.isOpen;
+    this.onChange;
+  }
+
+  close(): void {
+    this.isOpen = false;
+  }
+
+  escClose(event: KeyboardEvent): void {
+    if (event.code === 'Escape') {
+      this.isOpen = false;
+    }
+  }
+
+  onChange(e: any) {
+    this.acValue = e.target.value;
+    this.filteredCountriesList = this.countries.filter(country => country.toLowerCase().startsWith(this.acValue.toLowerCase()));
+  }
+}

projects/ngx-cream-lib/src/lib/ngx-cream-lib.module.ts

@@ -25,6 +25,7 @@ import { TextEllipsisComponent } from './text-ellipsis/text-ellipsis.component';
 import { IconButtonComponent } from './icon-button/icon-button.component';
 import { TooltipDirective } from './directives/tooltip.directive';
 import { CheckAllDirective } from './directives/check-all.directive';
+import { AutocompleteComponent } from './autocomplete/autocomplete.component';
 
 const components = [
   AccordionComponent,
@@ -48,6 +49,7 @@ const components = [
   IconButtonComponent,
   TooltipDirective,
   CheckAllDirective,
+  AutocompleteComponent,
 ];
 
 @NgModule({

projects/ngx-cream-lib/src/public-api.ts

@@ -21,6 +21,7 @@ export * from './lib/tabs/tabs.component';
 export * from './lib/tabs/tab-panel/tab-panel.component';
 export * from './lib/text-ellipsis/text-ellipsis.component';
 export * from './lib/toast/toast.component';
+export * from './lib/autocomplete/autocomplete.component';
 export * from './lib/directives/focus-on-page-change.directive';
 export * from './lib/directives/autofocus.directive';
 export * from './lib/directives/tooltip.directive';

src/app/app-routing.module.ts

@@ -22,6 +22,7 @@ import { DesignBasicsPageComponent } from './pages/design-basics-page/design-bas
 import { FormDesignPageComponent } from './pages/form-design-page/form-design-page.component';
 import { IconographyPageComponent } from './pages/iconography-page/iconography-page.component';
 import { FocusOnChangePageComponent } from './pages/focus-on-change-page/focus-on-change-page.component';
+import { AutocompletePageComponent } from './pages/autocomplete-page/autocomplete-page.component';
 
 const routes: Routes = [
   //Portal (doc) routes goes here
@@ -34,6 +35,11 @@ const routes: Routes = [
         component: AccordionPageComponent,
         data: { title: 'Accordion Component' },
       },
+      {
+        path: 'autocomplete',
+        component: AutocompletePageComponent,
+        data: { title: 'Autocomplete Component' },
+      },
       {
         path: 'tabs',
         component: TabsPageComponent,

src/app/app.module.ts

@@ -30,6 +30,7 @@ import { FormDesignPageComponent } from './pages/form-design-page/form-design-pa
 import { AutofocusPageComponent } from './pages/autofocus-page/autofocus-page.component';
 import { FocusOnChangePageComponent } from './pages/focus-on-change-page/focus-on-change-page.component';
 import { CheckAllPageComponent } from './pages/check-all-page/check-all-page.component';
+import { AutocompletePageComponent } from './pages/autocomplete-page/autocomplete-page.component';
 
 @NgModule({
   declarations: [
@@ -61,6 +62,7 @@ import { CheckAllPageComponent } from './pages/check-all-page/check-all-page.com
     AutofocusPageComponent,
     FocusOnChangePageComponent,
     CheckAllPageComponent,
+    AutocompletePageComponent,
   ],
   imports: [BrowserModule, AppRoutingModule, NgxCreamLibModule],
   providers: [],

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

@@ -0,0 +1,12 @@
+<section id="autocomp">
+  <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-tab-panel>
+    <c3m-tab-panel class="block-style" tabTitle="Application">
+      <pre></pre>
+    </c3m-tab-panel>
+  </c3m-tabs>
+</section>

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

@@ -0,0 +1,32 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-autocomplete-page',
+  templateUrl: './autocomplete-page.component.html',
+  styleUrls: ['./autocomplete-page.component.css'],
+})
+export class AutocompletePageComponent {
+  pageTitle = 'Autocomplete';
+  componentName = 'c3m-autocomplete';
+  resourceType = 'Component';
+
+  countries = [
+    'Hauts-de-France',
+    'Normandie',
+    'Grand Est',
+    'Bretagne',
+    'Ile-de-France',
+    'Pays de la Loire',
+    'Centre-Val de Loire',
+    'Bourgogne-Franche-Comte',
+    'Nouvelle Aquitaine',
+    'Auvergne-Rhone-Alpes',
+    'Occitanie',
+    'Corse',
+    'Mayotte',
+    'La Reunion',
+    'Guyane',
+    'Martinique',
+    'Guadeloupe',
+  ];
+}