fix(select): fixes

akveo · Sep 11, 2018 · 949a708 · 949a708
1 parent 0417897
commit 949a708
Show file tree

Hide file tree

Showing 8 changed files with 37 additions and 39 deletions.
diff --git a/docs/structure.ts b/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',
@@ -331,14 +339,6 @@ export const structure = [
           'NbTooltipComponent',
         ],
       },
-      {
-        type: 'tabs',
-        name: 'Select',
-        icon: 'select.svg',
-        source: [
-          'NbSelectComponent',
-        ],
-      },
       {
         type: 'group',
         name: 'Extra',

diff --git a/src/framework/theme/components/select/_select.component.theme.scss b/src/framework/theme/components/select/_select.component.theme.scss
@@ -4,7 +4,7 @@
  * Licensed under the MIT License. See License.txt in the project root for license information.
  */
 
-@mixin nb-card-status($status) {
+@mixin nb-select-status($status) {
   border: nb-theme(select-border-width) solid nb-theme(color-#{$status});
 
   nb-option {
@@ -52,23 +52,23 @@
     }
 
     &.primary {
-      @include nb-card-status(primary);
+      @include nb-select-status(primary);
     }
 
     &.danger {
-      @include nb-card-status(danger);
+      @include nb-select-status(danger);
     }
 
     &.warning {
-      @include nb-card-status(warning);
+      @include nb-select-status(warning);
     }
 
     &.info {
-      @include nb-card-status(info);
+      @include nb-select-status(info);
     }
 
     &.success {
-      @include nb-card-status(success);
+      @include nb-select-status(success);
     }
 
     &.bottom {

diff --git a/src/framework/theme/components/select/option-group.component.ts b/src/framework/theme/components/select/option-group.component.ts
@@ -21,7 +21,7 @@ export class NbOptionGroupComponent {
   @Input() title: string;
 
   @Input('disabled')
-  set _disabled(disabled: boolean) {
+  set setDisabled(disabled: boolean) {
     this.disabled = convertToBoolProperty(disabled);
   }
 

diff --git a/src/framework/theme/components/select/option.component.ts b/src/framework/theme/components/select/option.component.ts
@@ -10,21 +10,17 @@ import {
   Component,
   ElementRef,
   EventEmitter,
+  forwardRef,
   HostBinding,
   HostListener,
   Inject,
-  InjectionToken,
   Input,
   Output,
 } from '@angular/core';
 import { convertToBoolProperty } from '../helpers';
+import { NbSelectComponent } from './select.component';
 
 
-/**
- * Token that provides `NbSelectComponent` for child options.
- * */
-export const NB_SELECT = new InjectionToken('select');
-
 @Component({
   selector: 'nb-option',
   styleUrls: ['./option.component.scss'],
@@ -50,7 +46,7 @@ export class NbOptionComponent<T> {
   @Input() value: T;
 
   @Input('disabled')
-  set _disabled(disabled: boolean) {
+  set setDisabled(disabled: boolean) {
     this.disabled = convertToBoolProperty(disabled);
   }
 
@@ -62,8 +58,8 @@ export class NbOptionComponent<T> {
   selected: boolean = false;
   disabled: boolean = false;
 
-  constructor(protected elementRef: ElementRef,
-              @Inject(NB_SELECT) protected parent,
+  constructor(@Inject(forwardRef(() => NbSelectComponent)) protected parent,
+              protected elementRef: ElementRef,
               protected cd: ChangeDetectorRef) {
   }
 

diff --git a/src/framework/theme/components/select/select.component.ts b/src/framework/theme/components/select/select.component.ts
@@ -40,7 +40,7 @@ import {
   NbTriggerStrategy,
   NbTriggerStrategyBuilder,
 } from '../cdk';
-import { NB_SELECT, NbOptionComponent } from './option.component';
+import { NbOptionComponent } from './option.component';
 import { NB_DOCUMENT } from '../../theme.options';
 import { convertToBoolProperty } from '../helpers';
 
@@ -132,7 +132,6 @@ export class NbSelectLabelComponent {
   styleUrls: ['./select.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
   providers: [
-    { provide: NB_SELECT, useExisting: NbSelectComponent },
     {
       provide: NG_VALUE_ACCESSOR,
       useExisting: forwardRef(() => NbSelectComponent),
@@ -192,15 +191,15 @@ export class NbSelectComponent<T> implements OnInit, AfterViewInit, AfterContent
    * Accepts selected item or array of selected items.
    * */
   @Input('selected')
-  set _selected(value: T | T[]) {
+  set setSelected(value: T | T[]) {
     this.writeValue(value);
   }
 
   /**
    * Gives capability just write `multiple` over the element.
    * */
   @Input('multiple')
-  set _multiple(multiple: boolean) {
+  set setMultiple(multiple: boolean) {
     this.multiple = convertToBoolProperty(multiple);
   }
 

diff --git a/src/framework/theme/styles/global/_components.scss b/src/framework/theme/styles/global/_components.scss
@@ -54,7 +54,6 @@
   @include nb-checkbox-theme();
   @include nb-progress-bar-theme();
   @include nb-badge-theme();
-  @include nb-popover-theme();
   @include nb-stepper-theme();
   @include nb-context-menu-theme();
   @include nb-alert-theme();

diff --git a/src/playground/select/select-multiple.component.ts b/src/playground/select/select-multiple.component.ts
@@ -9,11 +9,13 @@ import { Component } from '@angular/core';
 @Component({
   selector: 'nb-select-multiple',
   templateUrl: './select-multiple.component.html',
-  styles: [` :host {
-    display: block;
-    width: 15rem;
-    height: 40rem;
-  } `],
+  styles: [`
+    :host {
+      display: block;
+      width: 15rem;
+      height: 40rem;
+    }
+  `],
 })
 
 export class NbSelectMultipleComponent {

diff --git a/src/playground/select/select-showcase.component.ts b/src/playground/select/select-showcase.component.ts
@@ -9,11 +9,13 @@ import { Component } from '@angular/core';
 @Component({
   selector: 'nb-select-showcase',
   templateUrl: './select-showcase.component.html',
-  styles: [` :host {
-    display: block;
-    width: 15rem;
-    height: 40rem;
-  } `],
+  styles: [`
+    :host {
+      display: block;
+      width: 15rem;
+      height: 40rem;
+    }
+  `],
 })
 
 export class NbSelectShowcaseComponent {