feat(theme): add new Select component (#698)

Closes #671

docs/structure.ts

@@ -282,6 +282,14 @@ export const structure = [
           'NbCheckboxComponent',
         ],
       },
+      {
+        type: 'tabs',
+        name: 'Select',
+        icon: 'select.svg',
+        source: [
+          'NbSelectComponent',
+        ],
+      },
       {
         type: 'group',
         name: 'Modals & Overlays',

src/framework/theme/components/cdk/overlay/overlay-position.ts

@@ -23,6 +23,8 @@ export enum NbAdjustment {
   NOOP = 'noop',
   CLOCKWISE = 'clockwise',
   COUNTERCLOCKWISE = 'counterclockwise',
+  VERTICAL = 'vertical',
+  HORIZONTAL = 'horizontal',
 }
 
 export enum NbPosition {
@@ -52,6 +54,8 @@ const POSITIONS = {
 const COUNTER_CLOCKWISE_POSITIONS = [NbPosition.TOP, NbPosition.LEFT, NbPosition.BOTTOM, NbPosition.RIGHT];
 const NOOP_POSITIONS = [NbPosition.TOP, NbPosition.BOTTOM, NbPosition.LEFT, NbPosition.RIGHT];
 const CLOCKWISE_POSITIONS = [NbPosition.TOP, NbPosition.RIGHT, NbPosition.BOTTOM, NbPosition.LEFT];
+const VERTICAL_POSITIONS = [NbPosition.BOTTOM, NbPosition.TOP];
+const HORIZONTAL_POSITIONS = [NbPosition.START, NbPosition.END];
 
 
 function comparePositions(p1: NbConnectedPosition, p2: NbConnectedPosition): boolean {
@@ -126,6 +130,10 @@ export class NbAdjustableConnectedPositionStrategy
         return this.reorderPreferredPositions(CLOCKWISE_POSITIONS);
       case NbAdjustment.COUNTERCLOCKWISE:
         return this.reorderPreferredPositions(COUNTER_CLOCKWISE_POSITIONS);
+      case NbAdjustment.HORIZONTAL:
+        return this.reorderPreferredPositions(HORIZONTAL_POSITIONS);
+      case NbAdjustment.VERTICAL:
+        return this.reorderPreferredPositions(VERTICAL_POSITIONS);
     }
   }
 

src/framework/theme/components/select/_select.component.theme.scss

@@ -0,0 +1,105 @@
+/*
+ * @license
+ * Copyright Akveo. All Rights Reserved.
+ * Licensed under the MIT License. See License.txt in the project root for license information.
+ */
+
+@mixin nb-select-status($status) {
+  border: nb-theme(select-border-width) solid nb-theme(color-#{$status});
+
+  nb-option {
+    &:hover, &.selected {
+      background-color: nb-theme(color-#{$status});
+      color: nb-theme(color-white);
+    }
+  }
+}
+
+@mixin nb-select-theme() {
+  nb-select > button[nbButton] {
+    transition: all 0.1s;
+
+    &::after {
+      @include nb-rtl(left, 0.75rem);
+      @include nb-rtl(right, auto);
+    }
+
+    &.opened {
+      &.top {
+        border-top-left-radius: 0;
+        border-top-right-radius: 0;
+      }
+
+      &.bottom {
+        border-bottom-left-radius: 0;
+        border-bottom-right-radius: 0;
+      }
+    }
+  }
+
+  nb-card.select {
+    background-color: nb-theme(select-bg);
+    max-height: nb-theme(select-max-height);
+    margin-bottom: 0;
+    box-shadow: none;
+
+    nb-card-body {
+      padding: 0;
+    }
+
+    nb-option {
+      padding: nb-theme(select-option-padding);
+    }
+
+    &.primary {
+      @include nb-select-status(primary);
+    }
+
+    &.danger {
+      @include nb-select-status(danger);
+    }
+
+    &.warning {
+      @include nb-select-status(warning);
+    }
+
+    &.info {
+      @include nb-select-status(info);
+    }
+
+    &.success {
+      @include nb-select-status(success);
+    }
+
+    &.bottom {
+      border-top-left-radius: 0;
+      border-top-right-radius: 0;
+    }
+
+    &.top {
+      border-bottom-left-radius: 0;
+      border-bottom-right-radius: 0;
+    }
+
+    nb-checkbox {
+      .customised-control-description {
+        color: inherit;
+      }
+
+      .customised-control-input:checked ~ .customised-control-indicator {
+        border-color: nb-theme(select-checkbox-color);
+
+        &::before {
+          border-color: nb-theme(select-checkmark-color);
+        }
+      }
+    }
+
+    nb-option, nb-option-group {
+      &.disabled {
+        background-color: nb-theme(select-option-disabled-bg);
+        opacity: nb-theme(select-option-disabled-opacity);
+      }
+    }
+  }
+}

src/framework/theme/components/select/option-group.component.scss

@@ -0,0 +1,22 @@
+/*
+ * @license
+ * Copyright Akveo. All Rights Reserved.
+ * Licensed under the MIT License. See License.txt in the project root for license information.
+ */
+
+:host {
+  display: block;
+
+  span {
+    padding: 1.125rem 0.5rem;
+    display: block;
+  }
+
+  &.disabled {
+    pointer-events: none;
+  }
+
+  /deep/ nb-option {
+    padding: 0.75rem 0.75rem 0.75rem 2.5rem;
+  }
+}

src/framework/theme/components/select/option-group.component.ts

@@ -0,0 +1,36 @@
+/*
+ * @license
+ * Copyright Akveo. All Rights Reserved.
+ * Licensed under the MIT License. See License.txt in the project root for license information.
+ */
+
+import { ChangeDetectionStrategy, Component, HostBinding, Input } from '@angular/core';
+import { convertToBoolProperty } from '../helpers';
+
+
+@Component({
+  selector: 'nb-option-group',
+  styleUrls: ['./option-group.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `
+    <span>{{ title }}</span>
+    <ng-content select="nb-option, ng-container"></ng-content>
+  `,
+})
+export class NbOptionGroupComponent {
+  @Input() title: string;
+
+  @Input('disabled')
+  set setDisabled(disabled: boolean) {
+    this.disabled = convertToBoolProperty(disabled);
+  }
+
+  disabled: boolean = false;
+
+  @HostBinding('class.disabled')
+  get disabledClass(): boolean {
+    return this.disabled;
+  }
+}
+
+

src/framework/theme/components/select/option.component.scss

@@ -0,0 +1,22 @@
+/*!
+ * @license
+ * Copyright Akveo. All Rights Reserved.
+ * Licensed under the MIT License. See License.txt in the project root for license information.
+ */
+
+:host {
+  display: block;
+
+  &.disabled {
+    pointer-events: none;
+  }
+
+  &:hover {
+    cursor: pointer;
+  }
+
+  nb-checkbox {
+    pointer-events: none;
+  }
+}
+

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

@@ -0,0 +1,108 @@
+/*
+ * @license
+ * Copyright Akveo. All Rights Reserved.
+ * Licensed under the MIT License. See License.txt in the project root for license information.
+ */
+
+import {
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+  ElementRef,
+  EventEmitter,
+  forwardRef,
+  HostBinding,
+  HostListener,
+  Inject,
+  Input,
+  Output,
+} from '@angular/core';
+import { convertToBoolProperty } from '../helpers';
+import { NbSelectComponent } from './select.component';
+
+
+@Component({
+  selector: 'nb-option',
+  styleUrls: ['./option.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `
+    <nb-checkbox *ngIf="withCheckbox" [(ngModel)]="selected">
+      <ng-container *ngTemplateOutlet="content"></ng-container>
+    </nb-checkbox>
+
+    <ng-container *ngIf="!withCheckbox">
+      <ng-container *ngTemplateOutlet="content"></ng-container>
+    </ng-container>
+
+    <ng-template #content>
+      <ng-content></ng-content>
+    </ng-template>
+  `,
+})
+export class NbOptionComponent<T> {
+  /**
+   * Option value that will be fired on selection.
+   * */
+  @Input() value: T;
+
+  @Input('disabled')
+  set setDisabled(disabled: boolean) {
+    this.disabled = convertToBoolProperty(disabled);
+  }
+
+  /**
+   * Fires value on click.
+   * */
+  @Output() selectionChange: EventEmitter<NbOptionComponent<T>> = new EventEmitter();
+
+  selected: boolean = false;
+  disabled: boolean = false;
+
+  constructor(@Inject(forwardRef(() => NbSelectComponent)) protected parent,
+              protected elementRef: ElementRef,
+              protected cd: ChangeDetectorRef) {
+  }
+
+  /**
+   * Determines should we render checkbox.
+   * */
+  get withCheckbox(): boolean {
+    return this.multiple && !!this.value;
+  }
+
+  get content() {
+    return this.elementRef.nativeElement.textContent;
+  }
+
+  get multiple() {
+    return this.parent.multiple;
+  }
+
+  @HostBinding('class.selected')
+  get selectedClass(): boolean {
+    return this.selected;
+  }
+
+  @HostBinding('class.disabled')
+  get disabledClass(): boolean {
+    return this.disabled;
+  }
+
+  @HostListener('click')
+  onClick() {
+    this.selectionChange.emit(this);
+  }
+
+  select() {
+    this.selected = true;
+    this.cd.markForCheck();
+    this.cd.detectChanges();
+  }
+
+  deselect() {
+    this.selected = false;
+    this.cd.markForCheck();
+    this.cd.detectChanges();
+  }
+}
+