From 5c3ba9e01b74705630bc63d319b3333b93058332 Mon Sep 17 00:00:00 2001 From: Thomas Pourchel Date: Mon, 22 Jan 2024 17:01:56 +0100 Subject: [PATCH] modifs autocomplete --- .../autocomplete/autocomplete.component.css | 18 ++++++++++ .../autocomplete/autocomplete.component.html | 35 +++++++++++++++++++ .../autocomplete.component.spec.ts | 23 ++++++++++++ .../autocomplete/autocomplete.component.ts | 34 ++++++++++++++++++ .../src/lib/ngx-cream-lib.module.ts | 2 ++ projects/ngx-cream-lib/src/public-api.ts | 1 + src/app/app-routing.module.ts | 6 ++++ src/app/app.module.ts | 2 ++ .../autocomplete-page.component.css | 0 .../autocomplete-page.component.html | 12 +++++++ .../autocomplete-page.component.ts | 32 +++++++++++++++++ 11 files changed, 165 insertions(+) create mode 100644 projects/ngx-cream-lib/src/lib/autocomplete/autocomplete.component.css create mode 100644 projects/ngx-cream-lib/src/lib/autocomplete/autocomplete.component.html create mode 100644 projects/ngx-cream-lib/src/lib/autocomplete/autocomplete.component.spec.ts create mode 100644 projects/ngx-cream-lib/src/lib/autocomplete/autocomplete.component.ts create mode 100644 src/app/pages/autocomplete-page/autocomplete-page.component.css create mode 100644 src/app/pages/autocomplete-page/autocomplete-page.component.html create mode 100644 src/app/pages/autocomplete-page/autocomplete-page.component.ts diff --git a/projects/ngx-cream-lib/src/lib/autocomplete/autocomplete.component.css b/projects/ngx-cream-lib/src/lib/autocomplete/autocomplete.component.css new file mode 100644 index 0000000..bf14aa1 --- /dev/null +++ b/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; +} + diff --git a/projects/ngx-cream-lib/src/lib/autocomplete/autocomplete.component.html b/projects/ngx-cream-lib/src/lib/autocomplete/autocomplete.component.html new file mode 100644 index 0000000..4c12c2d --- /dev/null +++ b/projects/ngx-cream-lib/src/lib/autocomplete/autocomplete.component.html @@ -0,0 +1,35 @@ + +
+
+ + + +
    +

    +

  • {{ li }}
    • +

    +
+
+
diff --git a/projects/ngx-cream-lib/src/lib/autocomplete/autocomplete.component.spec.ts b/projects/ngx-cream-lib/src/lib/autocomplete/autocomplete.component.spec.ts new file mode 100644 index 0000000..c8df2b8 --- /dev/null +++ b/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; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ AutocompleteComponent ] + }) + .compileComponents(); + + fixture = TestBed.createComponent(AutocompleteComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/projects/ngx-cream-lib/src/lib/autocomplete/autocomplete.component.ts b/projects/ngx-cream-lib/src/lib/autocomplete/autocomplete.component.ts new file mode 100644 index 0000000..c63c017 --- /dev/null +++ b/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 = []; + @Input() acValue = ''; + @Input() filteredCountriesList: Array = []; + + 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())); + } +} diff --git a/projects/ngx-cream-lib/src/lib/ngx-cream-lib.module.ts b/projects/ngx-cream-lib/src/lib/ngx-cream-lib.module.ts index e40a9f5..0e81461 100644 --- a/projects/ngx-cream-lib/src/lib/ngx-cream-lib.module.ts +++ b/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({ diff --git a/projects/ngx-cream-lib/src/public-api.ts b/projects/ngx-cream-lib/src/public-api.ts index 0eda52a..9aedc24 100644 --- a/projects/ngx-cream-lib/src/public-api.ts +++ b/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'; diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts index c19b6a3..230c35e 100644 --- a/src/app/app-routing.module.ts +++ b/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, diff --git a/src/app/app.module.ts b/src/app/app.module.ts index e012d3c..1631ff3 100644 --- a/src/app/app.module.ts +++ b/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: [], diff --git a/src/app/pages/autocomplete-page/autocomplete-page.component.css b/src/app/pages/autocomplete-page/autocomplete-page.component.css new file mode 100644 index 0000000..e69de29 diff --git a/src/app/pages/autocomplete-page/autocomplete-page.component.html b/src/app/pages/autocomplete-page/autocomplete-page.component.html new file mode 100644 index 0000000..83ecb62 --- /dev/null +++ b/src/app/pages/autocomplete-page/autocomplete-page.component.html @@ -0,0 +1,12 @@ +
+

Autocomplete

+ + + + + + + 

+    
+  
+

diff --git a/src/app/pages/autocomplete-page/autocomplete-page.component.ts b/src/app/pages/autocomplete-page/autocomplete-page.component.ts
new file mode 100644
index 0000000..4950659
--- /dev/null
+++ b/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',
+  ];
+}