feat(theme): autocomplete component (#1947)

akveo · Dec 19, 2019 · d67dd6b · d67dd6b
1 parent 0f03fb5
commit d67dd6b
Show file tree

Hide file tree

Showing 44 changed files with 1,918 additions and 362 deletions.
diff --git a/docs/assets/images/components/autocomplete.svg b/docs/assets/images/components/autocomplete.svg
diff --git a/docs/structure.ts b/docs/structure.ts
@@ -509,6 +509,19 @@ export const structure = [
         icon: 'select.svg',
         source: [
           'NbSelectComponent',
+          'NbOptionListComponent',
+          'NbOptionGroupComponent',
+        ],
+      },
+      {
+        type: 'tabs',
+        name: 'Autocomplete',
+        icon: 'autocomplete.svg',
+        source: [
+          'NbAutocompleteDirective',
+          'NbAutocompleteComponent',
+          'NbOptionListComponent',
+          'NbOptionGroupComponent',
         ],
       },
       {

diff --git a/src/app/playground-components.ts b/src/app/playground-components.ts
@@ -112,6 +112,41 @@ export const PLAYGROUND_COMPONENTS: ComponentLink[] = [
       },
     ],
   },
+  {
+    path: 'autocomplete',
+    children: [
+      {
+        path: 'autocomplete-showcase.component',
+        link: '/autocomplete/autocomplete-showcase.component',
+        component: 'AutocompleteShowcaseComponent',
+        name: 'Autocomplete Showcase',
+      },
+      {
+        path: 'autocomplete-form.component',
+        link: '/autocomplete/autocomplete-form.component',
+        component: 'AutocompleteFormComponent',
+        name: 'Autocomplete Form',
+      },
+      {
+        path: 'autocomplete-group.component',
+        link: '/autocomplete/autocomplete-group.component',
+        component: 'AutocompleteGroupComponent',
+        name: 'Autocomplete Group',
+      },
+      {
+        path: 'autocomplete-custom-display.component',
+        link: '/autocomplete/autocomplete-custom-display.component',
+        component: 'AutocompleteCustomDisplayComponent',
+        name: 'Autocomplete Custom Display',
+      },
+      {
+        path: 'autocomplete-active-first.component',
+        link: '/autocomplete/autocomplete-active-first.component',
+        component: 'AutocompleteActiveFirstComponent',
+        name: 'Autocomplete Active First',
+      },
+    ],
+  },
   {
     path: 'badge',
     children: [

diff --git a/src/framework/bootstrap/styles/_dropdowns.scss b/src/framework/bootstrap/styles/_dropdowns.scss
@@ -8,43 +8,43 @@
 
 @mixin nb-b-dropdowns-theme() {
   .dropdown-menu {
-    box-shadow: nb-theme(select-options-list-shadow);
-    max-height: nb-theme(select-options-list-max-height);
+    box-shadow: nb-theme(option-list-shadow);
+    max-height: nb-theme(option-list-max-height);
     overflow: auto;
     border: none;
   }
 
   .dropdown-item {
     user-select: none;
-    background-color: nb-theme(select-option-background-color);
-    color: nb-theme(select-option-text-color);
-    font-family: nb-theme(select-text-font-family);
-    font-weight: nb-theme(select-medium-text-font-weight);
-    font-size: nb-theme(select-medium-text-font-size);
-    line-height: nb-theme(select-medium-text-line-height);
+    background-color: nb-theme(option-background-color);
+    color: nb-theme(option-text-color);
+    font-family: nb-theme(option-text-font-family);
+    font-weight: nb-theme(option-medium-text-font-weight);
+    font-size: nb-theme(option-medium-text-font-size);
+    line-height: nb-theme(option-medium-text-line-height);
 
     &[disabled] {
-      background-color: nb-theme(select-option-disabled-background-color);
-      color: nb-theme(select-option-disabled-text-color);
+      background-color: nb-theme(option-disabled-background-color);
+      color: nb-theme(option-disabled-text-color);
     }
 
     &:focus {
       outline: none;
     }
 
     &.selected {
-      background-color: nb-theme(select-option-selected-background-color);
-      color: nb-theme(select-option-selected-text-color);
+      background-color: nb-theme(option-selected-background-color);
+      color: nb-theme(option-selected-text-color);
     }
 
     &:focus {
-      background-color: nb-theme(select-option-focus-background-color);
-      color: nb-theme(select-option-focus-text-color);
+      background-color: nb-theme(option-focus-background-color);
+      color: nb-theme(option-focus-text-color);
     }
 
     &:hover {
-      background-color: nb-theme(select-option-hover-background-color);
-      color: nb-theme(select-option-hover-text-color);
+      background-color: nb-theme(option-hover-background-color);
+      color: nb-theme(option-hover-text-color);
     }
   }
 }
diff --git a/src/framework/theme/components/autocomplete/autocomplete.component.html b/src/framework/theme/components/autocomplete/autocomplete.component.html
@@ -0,0 +1,9 @@
+<nb-option-list *nbPortal
+                [size]="size"
+                [position]="overlayPosition"
+                [style.width.px]="hostWidth"
+                role="listbox"
+                [id]="id"
+                [class.empty]="!options?.length">
+  <ng-content select="nb-option, nb-option-group"></ng-content>
+</nb-option-list>
diff --git a/src/framework/theme/components/autocomplete/autocomplete.component.scss b/src/framework/theme/components/autocomplete/autocomplete.component.scss
@@ -0,0 +1,13 @@
+/*
+ * @license
+ * Copyright Akveo. All Rights Reserved.
+ * Licensed under the MIT License. See License.txt in the project root for license information.
+ */
+
+:host(:hover) {
+  cursor: pointer;
+}
+
+nb-option-list.empty {
+  border: none;
+}