feat: add keyboad navigation to select with autocomplete (#3097)

* feat: add possibility to know if option hidden

* feat: add keyboard navigation

* fix: fix opening select when multiple and search enabled

* feat: add select on enter

* refactor: remove unused import

* refactor: move select autocomplete feature to separate component

* refactor: rename search to autocomplete

* refactor: rename autocomplete show case

* fix: fix dynamic change of withOptionsAutocomplete

* feat: add to showcase possibility to enable/disable autocomplete

* fix: fix button focus after closing options

src/app/playground-components.ts

@@ -1162,10 +1162,10 @@ export const PLAYGROUND_COMPONENTS: ComponentLink[] = [
  name: 'Select Icon',
  },
  {
- path: 'select-search-showcase.component',
- link: '/select/select-search-showcase.component',
- component: 'SelectSearchShowcaseComponent',
- name: 'Select Search Showcase',
+ path: 'select-autocomplete-showcase.component',
+ link: '/select/select-autocomplete-showcase.component',
+ component: 'SelectAutocompleteShowcaseComponent',
+ name: 'Select Autocomplete Showcase',
  },
  ],
  },

src/framework/theme/components/option/option.component.ts

@@ -82,16 +82,11 @@ import { NbSelectComponent } from '../select/select.component';
  styleUrls: ['./option.component.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `
- <nb-checkbox *ngIf="withCheckbox"
- [checked]="selected"
- [disabled]="disabled"
- aria-hidden="true">
- </nb-checkbox>
+ <nb-checkbox *ngIf="withCheckbox" [checked]="selected" [disabled]="disabled" aria-hidden="true"> </nb-checkbox>
  <ng-content></ng-content>
  `,
 })
 export class NbOptionComponent<T = any> implements OnDestroy, AfterViewInit, NbFocusableOption, NbHighlightableOption {
-
  protected disabledByGroup = false;
 
  /**
@@ -132,11 +127,13 @@ export class NbOptionComponent<T = any> implements OnDestroy, AfterViewInit, NbF
  @HostBinding('attr.id')
  id: string = `nb-option-${lastOptionId++}`;
 
- constructor(@Optional() @Inject(NB_SELECT_INJECTION_TOKEN) parent,
- protected elementRef: ElementRef,
- protected cd: ChangeDetectorRef,
- protected zone: NgZone,
- protected renderer: Renderer2) {
+ constructor(
+ @Optional() @Inject(NB_SELECT_INJECTION_TOKEN) parent,
+ protected elementRef: ElementRef,
+ protected cd: ChangeDetectorRef,
+ protected zone: NgZone,
+ protected renderer: Renderer2,
+ ) {
  this.parent = parent;
  }
 
@@ -146,9 +143,11 @@ export class NbOptionComponent<T = any> implements OnDestroy, AfterViewInit, NbF
 
  ngAfterViewInit() {
  // TODO: #2254
- this.zone.runOutsideAngular(() => setTimeout(() => {
- this.renderer.addClass(this.elementRef.nativeElement, 'nb-transition');
- }));
+ this.zone.runOutsideAngular(() =>
+ setTimeout(() => {
+ this.renderer.addClass(this.elementRef.nativeElement, 'nb-transition');
+ }),
+ );
  }
 
  /**
@@ -162,6 +161,10 @@ export class NbOptionComponent<T = any> implements OnDestroy, AfterViewInit, NbF
  return this.elementRef.nativeElement.textContent;
  }
 
+ get hidden() {
+ return this.elementRef.nativeElement.hidden;
+ }
+
  // TODO: replace with isShowCheckbox property to control this behaviour outside, issues/1965
  @HostBinding('class.multiple')
  get multiple() {
@@ -188,7 +191,7 @@ export class NbOptionComponent<T = any> implements OnDestroy, AfterViewInit, NbF
  @HostBinding('class.active')
  get activeClass() {
  return this._active;
- };
+ }
  protected _active: boolean = false;
 
  @HostListener('click', ['$event'])
@@ -252,5 +255,4 @@ export class NbOptionComponent<T = any> implements OnDestroy, AfterViewInit, NbF
  this._active = false;
  this.cd.markForCheck();
  }
-
 }

src/framework/theme/components/select-with-autocomplete/_select-with-autocomplete-filled.scss

@@ -0,0 +1,57 @@
+@use '../../styles/theming' as *;
+@use '../form-field/form-field.component.theme' as form-field-theme;
+
+@mixin select-with-autocomplete-filled {
+ nb-select-with-autocomplete.appearance-filled .select-button {
+ border-style: nb-theme(select-filled-border-style);
+ border-width: nb-theme(select-filled-border-width);
+ }
+
+ @each $size in nb-get-sizes() {
+ nb-select-with-autocomplete.appearance-filled.size-#{$size} .select-button {
+ padding: nb-theme(select-filled-#{$size}-padding);
+ @include nb-ltr(padding-right, nb-theme(select-icon-offset));
+ @include nb-rtl(padding-left, nb-theme(select-icon-offset));
+ }
+
+ @include form-field-theme.nb-form-field-with-prefix(
+ 'nb-select-with-autocomplete.appearance-filled.size-#{$size} .select-button',
+ $size
+ );
+ }
+
+ @each $status in nb-get-statuses() {
+ nb-select-with-autocomplete.appearance-filled.status-#{$status} .select-button {
+ background-color: nb-theme(select-filled-#{$status}-background-color);
+ border-color: nb-theme(select-filled-#{$status}-border-color);
+ color: nb-theme(select-filled-#{$status}-text-color);
+
+ &.placeholder {
+ color: nb-theme(select-filled-#{$status}-placeholder-text-color);
+ }
+
+ &:focus {
+ background-color: nb-theme(select-filled-#{$status}-focus-background-color);
+ border-color: nb-theme(select-filled-#{$status}-focus-border-color);
+ }
+ &:hover {
+ background-color: nb-theme(select-filled-#{$status}-hover-background-color);
+ border-color: nb-theme(select-filled-#{$status}-hover-border-color);
+ }
+
+ &[disabled] {
+ background-color: nb-theme(select-filled-#{$status}-disabled-background-color);
+ border-color: nb-theme(select-filled-#{$status}-disabled-border-color);
+ color: nb-theme(select-filled-#{$status}-disabled-text-color);
+
+ nb-icon {
+ color: nb-theme(select-filled-#{$status}-disabled-icon-color);
+ }
+ }
+
+ nb-icon {
+ color: nb-theme(select-filled-#{$status}-icon-color);
+ }
+ }
+ }
+}

src/framework/theme/components/select-with-autocomplete/_select-with-autocomplete-hero.scss

@@ -0,0 +1,57 @@
+@use '../../styles/theming' as *;
+@use '../form-field/form-field.component.theme' as form-field-theme;
+
+@mixin select-with-autocomplete-hero {
+ nb-select-with-autocomplete.appearance-hero .select-button {
+ border: none;
+ }
+
+ @each $size in nb-get-sizes() {
+ nb-select-with-autocomplete.appearance-hero.size-#{$size} .select-button {
+ padding: nb-theme(select-hero-#{$size}-padding);
+ @include nb-ltr(padding-right, nb-theme(select-icon-offset));
+ @include nb-rtl(padding-left, nb-theme(select-icon-offset));
+ }
+ @include form-field-theme.nb-form-field-with-prefix(
+ 'nb-select-with-autocomplete.appearance-hero.size-#{$size} .select-button',
+ $size
+ );
+ }
+
+ @each $status in nb-get-statuses() {
+ nb-select-with-autocomplete.appearance-hero.status-#{$status} .select-button {
+ $left-color: nb-theme(select-hero-#{$status}-left-background-color);
+ $right-color: nb-theme(select-hero-#{$status}-right-background-color);
+ background-image: linear-gradient(to right, $left-color, $right-color);
+ color: nb-theme(select-hero-#{$status}-text-color);
+
+ &.placeholder {
+ color: nb-theme(select-hero-#{$status}-placeholder-text-color);
+ }
+
+ &:focus {
+ $left-color: nb-theme(select-hero-#{$status}-focus-left-background-color);
+ $right-color: nb-theme(select-hero-#{$status}-focus-right-background-color);
+ background-image: linear-gradient(to right, $left-color, $right-color);
+ }
+ &:hover {
+ $left-color: nb-theme(select-hero-#{$status}-hover-left-background-color);
+ $right-color: nb-theme(select-hero-#{$status}-hover-right-background-color);
+ background-image: linear-gradient(to right, $left-color, $right-color);
+ }
+ &[disabled] {
+ color: nb-theme(select-hero-#{$status}-disabled-text-color);
+ background-color: nb-theme(select-hero-#{$status}-disabled-background-color);
+ background-image: none;
+
+ nb-icon {
+ color: nb-theme(select-hero-#{$status}-disabled-icon-color);
+ }
+ }
+
+ nb-icon {
+ color: nb-theme(select-hero-#{$status}-icon-color);
+ }
+ }
+ }
+}

src/framework/theme/components/select-with-autocomplete/_select-with-autocomplete-outline.scss

@@ -0,0 +1,77 @@
+@use '../../styles/theming' as *;
+@use '../form-field/form-field.component.theme' as form-field-theme;
+
+@mixin select-with-autocomplete-outline {
+ nb-select-with-autocomplete.appearance-outline .select-button {
+ border-style: nb-theme(select-outline-border-style);
+ border-width: nb-theme(select-outline-border-width);
+
+ &.top {
+ border-top-style: nb-theme(select-outline-adjacent-border-style);
+ border-top-width: nb-theme(select-outline-adjacent-border-width);
+ }
+ &.bottom {
+ border-bottom-style: nb-theme(select-outline-adjacent-border-style);
+ border-bottom-width: nb-theme(select-outline-adjacent-border-width);
+ }
+ }
+
+ @each $status in nb-get-statuses() {
+ nb-select-with-autocomplete.appearance-outline.status-#{$status} .select-button {
+ background-color: nb-theme(select-outline-#{$status}-background-color);
+ border-color: nb-theme(select-outline-#{$status}-border-color);
+ color: nb-theme(select-outline-#{$status}-text-color);
+
+ &.placeholder {
+ color: nb-theme(select-outline-#{$status}-placeholder-text-color);
+ }
+ nb-icon {
+ color: nb-theme(select-outline-#{$status}-icon-color);
+ }
+
+ &:focus {
+ background-color: nb-theme(select-outline-#{$status}-focus-background-color);
+ border-color: nb-theme(select-outline-#{$status}-focus-border-color);
+ }
+ &:hover {
+ background-color: nb-theme(select-outline-#{$status}-hover-background-color);
+ border-color: nb-theme(select-outline-#{$status}-hover-border-color);
+ }
+
+ &[disabled] {
+ color: nb-theme(select-outline-#{$status}-disabled-text-color);
+ background-color: nb-theme(select-outline-#{$status}-disabled-background-color);
+ border-color: nb-theme(select-outline-#{$status}-disabled-border-color);
+
+ nb-icon {
+ color: nb-theme(select-outline-#{$status}-disabled-icon-color);
+ }
+ }
+
+ &.bottom,
+ &.top {
+ border-color: nb-theme(select-outline-#{$status}-open-border-color);
+ }
+
+ &.top {
+ border-top-color: nb-theme(select-outline-#{$status}-adjacent-border-color);
+ }
+ &.bottom {
+ border-bottom-color: nb-theme(select-outline-#{$status}-adjacent-border-color);
+ }
+ }
+ }
+
+ @each $size in nb-get-sizes() {
+ nb-select-with-autocomplete.appearance-outline.size-#{$size} .select-button {
+ padding: nb-theme(select-outline-#{$size}-padding);
+ @include nb-ltr(padding-right, nb-theme(select-icon-offset));
+ @include nb-rtl(padding-left, nb-theme(select-icon-offset));
+ }
+
+ @include form-field-theme.nb-form-field-with-prefix(
+ 'nb-select-with-autocomplete.appearance-outline.size-#{$size} .select-button',
+ $size
+ );
+ }
+}

src/framework/theme/components/select-with-autocomplete/_select-with-autocomplete.component.theme.scss

@@ -0,0 +1,66 @@
+/*
+ * @license
+ * Copyright Akveo. All Rights Reserved.
+ * Licensed under the MIT License. See License.txt in the project root for license information.
+ */
+
+@use '../../styles/theming' as *;
+@use '../form-field/form-field.component.theme' as form-field-theme;
+@use 'select-with-autocomplete-outline';
+@use 'select-with-autocomplete-filled';
+@use 'select-with-autocomplete-hero';
+
+@mixin nb-select-with-autocomplete-theme() {
+ nb-select-with-autocomplete .select-button {
+ min-width: nb-theme(select-min-width);
+ cursor: nb-theme(select-cursor);
+ font-family: nb-theme(select-text-font-family);
+
+ &.placeholder {
+ font-family: nb-theme(select-placeholder-text-font-family);
+ }
+ &:focus {
+ outline: none;
+ }
+ &[disabled] {
+ cursor: nb-theme(select-disabled-cursor);
+ }
+ }
+
+ @each $size in nb-get-sizes() {
+ nb-select-with-autocomplete.size-#{$size} {
+ .select-button {
+ font-size: nb-theme(select-#{$size}-text-font-size);
+ font-weight: nb-theme(select-#{$size}-text-font-weight);
+ line-height: nb-theme(select-#{$size}-text-line-height);
+
+ &.placeholder {
+ font-size: nb-theme(select-#{$size}-placeholder-text-font-size);
+ font-weight: nb-theme(select-#{$size}-placeholder-text-font-weight);
+ }
+
+ &.empty::before {
+ content: ' ';
+ display: block;
+ height: nb-theme(select-#{$size}-text-line-height);
+ }
+ }
+
+ &:not(.full-width) {
+ max-width: nb-theme(select-#{$size}-max-width);
+ }
+ }
+ }
+
+ @each $shape in nb-get-shapes() {
+ nb-select-with-autocomplete.shape-#{$shape} .select-button {
+ border-radius: nb-theme(select-#{$shape}-border-radius);
+ }
+ }
+
+ @include select-with-autocomplete-outline.select-with-autocomplete-outline();
+ @include select-with-autocomplete-filled.select-with-autocomplete-filled();
+ @include select-with-autocomplete-hero.select-with-autocomplete-hero();
+
+ @include form-field-theme.nb-form-field-root-component('nb-select-with-autocomplete');
+}