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