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;
+}