refactor(example): move style import to angular.json

Ghislain Beaulac · Ghislain Beaulac · commit f75fd8175a15 · 2019-02-21T12:48:48.000-05:00
- also use appendTo="body" with ng-select all the time
diff --git a/angular.json b/angular.json
@@ -25,6 +25,7 @@
               "node_modules/flatpickr/dist/flatpickr.min.css",
               "node_modules/font-awesome/css/font-awesome.css",
               "src/assets/lib/multiple-select/multiple-select.css",
+              "node_modules/@ng-select/ng-select/themes/default.theme.css",
               "src/app/slickgrid-custom-variables.scss",
               "src/styles.scss"
             ],
@@ -92,6 +93,7 @@
               "node_modules/flatpickr/dist/flatpickr.min.css",
               "node_modules/font-awesome/css/font-awesome.css",
               "src/assets/lib/multiple-select/multiple-select.css",
+              "node_modules/@ng-select/ng-select/themes/default.theme.css",
               "src/app/slickgrid-custom-variables.scss",
               "src/styles.scss"
             ],
@@ -151,4 +153,4 @@
       "prefix": "app"
     }
   }
-}
+}
diff --git a/src/app/examples/editor-ng-select.component.ts b/src/app/examples/editor-ng-select.component.ts
@@ -1,13 +1,16 @@
 import { Component } from '@angular/core';
 import { Subject } from 'rxjs';
 
+// the appendTo="body" (necessary for SlickGrid filter) requires the body to be position relative like so
+// <body style="position: relative">
 @Component({
   template: `
   <ng-select class="no-style-select"
       [items]="collection"
       autofocus
       bindValue="id"
       bindLabel="name"
+      appendTo="body"
       [clearable]="false"
       (change)="onChange($event)"
       [(ngModel)]="selectedId"
diff --git a/src/app/examples/filter-ng-select.component.ts b/src/app/examples/filter-ng-select.component.ts
@@ -9,8 +9,8 @@ import { Subject } from 'rxjs';
       [items]="collection"
       bindValue="id"
       bindLabel="name"
-      [clearable]="false"
       appendTo="body"
+      [clearable]="false"
       (change)="onChange($event)"
       [(ngModel)]="selectedId"
 		>
diff --git a/src/app/examples/grid-angular.component.scss b/src/app/examples/grid-angular.component.scss
@@ -5,12 +5,9 @@ h3 {
 .subtitle {
   font-size: 18px;
 }
-.ng-select.custom {
-  border:0px;
-  max-height: 27px;
-  border-radius: 0;
-}
-.ng-input {
-  padding-top: -4px !important;
-  padding-left: 4px !important;
+.slick-headerrow-column {
+  .ng-input {
+    padding-top: -4px !important;
+    padding-left: 4px !important;
+  }
 }
diff --git a/src/app/examples/grid-angular.component.ts b/src/app/examples/grid-angular.component.ts
@@ -1,4 +1,3 @@
-import { CustomAngularComponentFilter } from './custom-angularComponentFilter';
 import { Component, Injectable, OnInit, ViewEncapsulation } from '@angular/core';
 import { TranslateService } from '@ngx-translate/core';
 import {
@@ -11,10 +10,10 @@ import {
   Formatters,
   GridOption,
   OnEventArgs,
-  OperatorType,
 } from './../modules/angular-slickgrid';
 import { EditorNgSelectComponent } from './editor-ng-select.component';
 import { CustomAngularComponentEditor } from './custom-angularComponentEditor';
+import { CustomAngularComponentFilter } from './custom-angularComponentFilter';
 import { CustomTitleFormatterComponent } from './custom-titleFormatter.component';
 import { FilterNgSelectComponent } from './filter-ng-select.component';
 
diff --git a/src/styles.scss b/src/styles.scss
@@ -20,5 +20,3 @@
 .faded:hover {
     opacity: 0.5;
 }
-
-@import "~@ng-select/ng-select/themes/default.theme.css";

Original file line number	Diff line number	Diff line change
`@@ -20,5 +20,3 @@`
`20`	`20`	`.faded:hover {`
`21`	`21`	`opacity: 0.5;`
`22`	`22`	`}`
`23`		`-`
`24`		`-@import "~@ng-select/ng-select/themes/default.theme.css";`