feat(select): Eva style

src/app/playground-components.ts

@@ -895,10 +895,10 @@ export const PLAYGROUND_COMPONENTS: ComponentLink[] = [
         name: 'Select Multiple',
       },
       {
-        path: 'select-outline.component',
-        link: '/select/select-outline.component',
-        component: 'SelectOutlineComponent',
-        name: 'Select Outline',
+        path: 'select-filled.component',
+        link: '/select/select-filled.component',
+        component: 'SelectFilledComponent',
+        name: 'Select Filled',
       },
       {
         path: 'select-placeholder.component',

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

@@ -108,7 +108,7 @@
     }
   }
 
-  @include select-outline;
+  @include select-outline();
   @include select-filled;
   @include select-hero;
 }

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

@@ -118,13 +118,13 @@ export class NbSelectLabelComponent {
  *
  * @stacked-example(Select statuses, select/select-status.component)
  *
- * There are four select sizes:
+ * There are five select sizes:
  *
  * @stacked-example(Select sizes, select/select-sizes.component)
  *
- * And two additional style types - `outline`:
+ * And two additional style types - `filled`:
  *
- * @stacked-example(Outline select, select/select-outline.component)
+ * @stacked-example(Filled select, select/select-filled.component)
  *
  * and `hero`:
  *
@@ -498,9 +498,10 @@ export class NbSelectComponent<T> implements OnInit, AfterViewInit, AfterContent
     return this.appearance === 'outline';
   }
   set outline(value: boolean) {
-    this._outline = convertToBoolProperty(value);
+    if (convertToBoolProperty(value)) {
+      this.appearance = 'outline';
+    }
   }
-  protected _outline: boolean = false;
 
   /**
    * Adds `filled` styles
@@ -511,9 +512,10 @@ export class NbSelectComponent<T> implements OnInit, AfterViewInit, AfterContent
     return this.appearance === 'filled';
   }
   set filled(value: boolean) {
-    this._filled = convertToBoolProperty(value);
+    if (convertToBoolProperty(value)) {
+      this.appearance = 'filled';
+    }
   }
-  protected _filled: boolean = false;
 
   /**
    * Adds `hero` styles
@@ -524,9 +526,10 @@ export class NbSelectComponent<T> implements OnInit, AfterViewInit, AfterContent
     return this.appearance === 'hero';
   }
   set hero(value: boolean) {
-    this._hero = convertToBoolProperty(value);
+    if (convertToBoolProperty(value)) {
+      this.appearance = 'hero';
+    }
   }
-  protected _hero: boolean = false;
 
   /**
    * Disables the select

src/playground/with-layout/select/select-clean.component.ts

@@ -9,5 +9,6 @@ import { Component } from '@angular/core';
 @Component({
   selector: 'nb-select-clean',
   templateUrl: './select-clean.component.html',
+  styleUrls: ['./select-example.scss'],
 })
 export class SelectCleanComponent {}

src/playground/with-layout/select/select-disabled.component.ts

@@ -9,11 +9,7 @@ import { Component } from '@angular/core';
 @Component({
   selector: 'nb-select-disabled',
   templateUrl: './select-disabled.component.html',
-  styles: [`
-    nb-select {
-      margin-bottom: 1rem;
-    }
-  `],
+  styleUrls: ['./select-example.scss'],
 })
 export class SelectDisabledComponent {
 }

src/playground/with-layout/select/select-example.scss

@@ -0,0 +1,9 @@
+nb-card-body {
+  display: flex;
+  flex-direction: column;
+  align-items: start;
+}
+
+nb-select:not(:only-child):not(:last-child) {
+  margin-bottom: 1rem;
+}

src/playground/with-layout/select/select-outline.component.html → src/playground/with-layout/select/select-filled.component.html

@@ -1,34 +1,34 @@
 <nb-card size="medium">
   <nb-card-body>
-    <nb-select placeholder="Primary" outline status="primary">
+    <nb-select placeholder="Primary" filled status="primary">
       <nb-option value="1">Option 1</nb-option>
       <nb-option value="2">Option 2</nb-option>
       <nb-option value="3">Option 3</nb-option>
       <nb-option value="4">Option 4</nb-option>
     </nb-select>
 
-    <nb-select placeholder="Info" outline status="info">
+    <nb-select placeholder="Info" filled status="info">
       <nb-option value="1">Option 1</nb-option>
       <nb-option value="2">Option 2</nb-option>
       <nb-option value="3">Option 3</nb-option>
       <nb-option value="4">Option 4</nb-option>
     </nb-select>
 
-    <nb-select placeholder="Danger" outline status="danger">
+    <nb-select placeholder="Danger" filled status="danger">
       <nb-option value="1">Option 1</nb-option>
       <nb-option value="2">Option 2</nb-option>
       <nb-option value="3">Option 3</nb-option>
       <nb-option value="4">Option 4</nb-option>
     </nb-select>
 
-    <nb-select placeholder="Success" outline status="success">
+    <nb-select placeholder="Success" filled status="success">
       <nb-option value="1">Option 1</nb-option>
       <nb-option value="2">Option 2</nb-option>
       <nb-option value="3">Option 3</nb-option>
       <nb-option value="4">Option 4</nb-option>
     </nb-select>
 
-    <nb-select placeholder="Warning" outline status="warning">
+    <nb-select placeholder="Warning" filled status="warning">
       <nb-option value="1">Option 1</nb-option>
       <nb-option value="2">Option 2</nb-option>
       <nb-option value="3">Option 3</nb-option>

src/playground/with-layout/select/select-outline.component.ts → src/playground/with-layout/select/select-filled.component.ts

@@ -7,13 +7,9 @@
 import { Component } from '@angular/core';
 
 @Component({
-  selector: 'nb-select-outline',
-  templateUrl: './select-outline.component.html',
-  styles: [`
-    nb-select {
-      margin-bottom: 1rem;
-    }
-  `],
+  selector: 'nb-select-filled',
+  templateUrl: './select-filled.component.html',
+  styleUrls: ['./select-example.scss'],
 })
-export class SelectOutlineComponent {
+export class SelectFilledComponent {
 }

src/playground/with-layout/select/select-form.component.ts

@@ -10,11 +10,7 @@ import { FormControl } from '@angular/forms';
 @Component({
   selector: 'nb-select-form',
   templateUrl: './select-form.component.html',
-  styles: [`
-    nb-select {
-      margin-bottom: 1rem;
-    }
-  `],
+  styleUrls: ['./select-example.scss'],
 })
 export class SelectFormComponent {
   selectedItemNgModel;

src/playground/with-layout/select/select-groups.component.ts

@@ -9,6 +9,7 @@ import { Component } from '@angular/core';
 @Component({
   selector: 'nb-select-groups',
   templateUrl: './select-groups.component.html',
+  styleUrls: ['./select-example.scss'],
 })
 export class SelectGroupsComponent {
 }

src/playground/with-layout/select/select-hero.component.ts

@@ -9,11 +9,7 @@ import { Component } from '@angular/core';
 @Component({
   selector: 'nb-select-hero',
   templateUrl: './select-hero.component.html',
-  styles: [`
-    nb-select {
-      margin-bottom: 1rem;
-    }
-  `],
+  styleUrls: ['./select-example.scss'],
 })
 export class SelectHeroComponent {
 }

src/playground/with-layout/select/select-label.component.ts

@@ -9,6 +9,7 @@ import { Component } from '@angular/core';
 @Component({
   selector: 'nb-select-label-showcase',
   templateUrl: './select-label.component.html',
+  styleUrls: ['./select-example.scss'],
 })
 export class SelectLabelShowcaseComponent {
   selectedItem;

src/playground/with-layout/select/select-multiple.component.ts

@@ -10,6 +10,5 @@ import { Component } from '@angular/core';
   selector: 'nb-select-multiple',
   templateUrl: './select-multiple.component.html',
 })
-
 export class SelectMultipleComponent {
 }

src/playground/with-layout/select/select-placeholder.component.html

@@ -1,6 +1,6 @@
 <nb-card size="small">
   <nb-card-body>
-    <nb-select placeholder="Placeholder" status="primary">
+    <nb-select placeholder="Placeholder">
       <nb-option value="1">Option 1</nb-option>
       <nb-option value="2">Option 2</nb-option>
       <nb-option value="3">Option 3</nb-option>

src/playground/with-layout/select/select-placeholder.component.ts

@@ -9,6 +9,7 @@ import { Component } from '@angular/core';
 @Component({
   selector: 'nb-select-placeholder',
   templateUrl: './select-placeholder.component.html',
+  styleUrls: ['./select-example.scss'],
 })
 export class SelectPlaceholderComponent {
 }

src/playground/with-layout/select/select-routing.module.ts

@@ -13,7 +13,7 @@ import { SelectGroupsComponent } from './select-groups.component';
 import { SelectHeroComponent } from './select-hero.component';
 import { SelectLabelShowcaseComponent } from './select-label.component';
 import { SelectMultipleComponent } from './select-multiple.component';
-import { SelectOutlineComponent } from './select-outline.component';
+import { SelectFilledComponent } from './select-filled.component';
 import { SelectPlaceholderComponent } from './select-placeholder.component';
 import { SelectShapeComponent } from './select-shapes.component';
 import { SelectShowcaseComponent } from './select-showcase.component';
@@ -51,8 +51,8 @@ const routes: Route[] = [
     component: SelectMultipleComponent,
   },
   {
-    path: 'select-outline.component',
-    component: SelectOutlineComponent,
+    path: 'select-filled.component',
+    component: SelectFilledComponent,
   },
   {
     path: 'select-placeholder.component',

src/playground/with-layout/select/select-shapes.component.ts

@@ -9,11 +9,7 @@ import { Component } from '@angular/core';
 @Component({
   selector: 'nb-select-shapes',
   templateUrl: './select-shapes.component.html',
-  styles: [`
-    nb-select {
-      margin-bottom: 1rem;
-    }
-  `],
+  styleUrls: ['./select-example.scss'],
 })
 export class SelectShapeComponent {
 }

src/playground/with-layout/select/select-showcase.component.ts

@@ -9,8 +9,8 @@ import { Component } from '@angular/core';
 @Component({
   selector: 'nb-select-showcase',
   templateUrl: './select-showcase.component.html',
+  styleUrls: ['./select-example.scss'],
 })
-
 export class SelectShowcaseComponent {
   selectedItem = '2';
 }

src/playground/with-layout/select/select-sizes.component.html

@@ -1,27 +1,6 @@
 <nb-card size="medium">
   <nb-card-body>
-    <nb-select placeholder="XSmall" size="xsmall">
-      <nb-option value="1">Option 1</nb-option>
-      <nb-option value="2">Option 2</nb-option>
-      <nb-option value="3">Option 3</nb-option>
-      <nb-option value="4">Option 4</nb-option>
-    </nb-select>
-
-    <nb-select placeholder="Small" size="small">
-      <nb-option value="1">Option 1</nb-option>
-      <nb-option value="2">Option 2</nb-option>
-      <nb-option value="3">Option 3</nb-option>
-      <nb-option value="4">Option 4</nb-option>
-    </nb-select>
-
-    <nb-select placeholder="Medium" size="medium">
-      <nb-option value="1">Option 1</nb-option>
-      <nb-option value="2">Option 2</nb-option>
-      <nb-option value="3">Option 3</nb-option>
-      <nb-option value="4">Option 4</nb-option>
-    </nb-select>
-
-    <nb-select placeholder="Large" size="large">
+    <nb-select [placeholder]="size" [size]="size" *ngFor="let size of sizes">
       <nb-option value="1">Option 1</nb-option>
       <nb-option value="2">Option 2</nb-option>
       <nb-option value="3">Option 3</nb-option>

src/playground/with-layout/select/select-sizes.component.ts

@@ -5,15 +5,13 @@
  */
 
 import { Component } from '@angular/core';
+import { NbComponentSize } from '@nebular/theme';
 
 @Component({
   selector: 'nb-select-sizes',
   templateUrl: './select-sizes.component.html',
-  styles: [`
-    nb-select {
-      margin-bottom: 1rem;
-    }
-  `],
+  styleUrls: ['./select-example.scss'],
 })
 export class SelectSizesComponent {
+  sizes: NbComponentSize[] = [ 'tiny', 'small', 'medium', 'large', 'giant' ];
 }

src/playground/with-layout/select/select-status.component.ts

@@ -9,11 +9,7 @@ import { Component } from '@angular/core';
 @Component({
   selector: 'nb-select-status',
   templateUrl: './select-status.component.html',
-  styles: [`
-    nb-select {
-      margin-bottom: 1rem;
-    }
-  `],
+  styleUrls: ['./select-example.scss'],
 })
 export class SelectStatusComponent {
 }

src/playground/with-layout/select/select.module.ts

@@ -16,7 +16,7 @@ import { SelectGroupsComponent } from './select-groups.component';
 import { SelectHeroComponent } from './select-hero.component';
 import { SelectLabelShowcaseComponent } from './select-label.component';
 import { SelectMultipleComponent } from './select-multiple.component';
-import { SelectOutlineComponent } from './select-outline.component';
+import { SelectFilledComponent } from './select-filled.component';
 import { SelectPlaceholderComponent } from './select-placeholder.component';
 import { SelectShapeComponent } from './select-shapes.component';
 import { SelectShowcaseComponent } from './select-showcase.component';
@@ -33,7 +33,7 @@ import { SelectInteractiveComponent } from './select-interactive.component';
     SelectHeroComponent,
     SelectLabelShowcaseComponent,
     SelectMultipleComponent,
-    SelectOutlineComponent,
+    SelectFilledComponent,
     SelectPlaceholderComponent,
     SelectShapeComponent,
     SelectShowcaseComponent,