Merge pull request #1228 from HealthCatalyst/dev

Release for ng-select

package.json

@@ -50,6 +50,7 @@
         "@angular/platform-server": "6.1.7",
         "@angular/router": "6.1.7",
         "@microsoft/applicationinsights-web": "^2.3.1",
+        "@ng-select/ng-select": "^2.20.5",
         "@stackblitz/sdk": "^1.2.0",
         "change-case": "^3.0.2",
         "core-js": "^2.4.1",

projects/cashmere-examples/package.json

@@ -9,6 +9,7 @@
     "peerDependencies": {
         "@angular/common": "^6.0.0-rc.0 || ^6.0.0",
         "@angular/core": "^6.0.0-rc.0 || ^6.0.0",
+        "@ng-select/ng-select": "^2.20.5",
         "sugar": "^2.0.6"
     },
     "devDependencies": {

projects/cashmere-examples/src/lib/button-anchor/button-anchor-example.component.html

@@ -1,3 +1,3 @@
 <a hc-button title="Primary Anchor Button" buttonStyle="primary">Primary</a>
 <a hc-button title="Destructive Anchor Button" buttonStyle="destructive">Destructive</a>
-<a hc-button title="Disabled Anchor Button" buttonStyle="primary" disabled>Diasabled</a>
+<a hc-button title="Disabled Anchor Button" buttonStyle="primary" disabled>Disabled</a>

projects/cashmere-examples/src/lib/multiselect-overview/multiselect-overview-example.component.html

@@ -0,0 +1,22 @@
+<p>
+    For multiselects, typeaheads, and other selectbox needs, we recommend using a 3rd-party component,
+    <code>ng-select</code>. We've created a Cashmere theme for the component to give it the proper look
+    and feel. See usage tab for setup instructions.
+</p>
+
+<ng-select [items]="cities"
+    [addTag]="true"
+    [multiple]="true"
+    dropdownPosition="bottom"
+    addTagText="Add city"
+    placeholder="Search for cities..."
+    [(ngModel)]="selectedCities">
+</ng-select>
+<p>Selected: <code>{{selectedCities | json}}</code></p>
+
+<strong>API & other documentation:</strong>
+<ul>
+    <li><a href="https://ng-select.github.io/ng-select" target="_blank">Examples</a></li>
+    <li><a href="https://github.com/ng-select/ng-select#api" target="_blank">API</a></li>
+    <li><a href="https://github.com/ng-select/ng-select" target="_blank">Github</a></li>
+</ul>

projects/cashmere-examples/src/lib/multiselect-overview/multiselect-overview-example.component.scss

@@ -0,0 +1,8 @@
+p, ul {
+    font-size: 14px;
+    margin-bottom: 35px;
+}
+
+ul {
+    margin: 5px 20px 100px 20px;
+}

projects/cashmere-examples/src/lib/multiselect-overview/multiselect-overview-example.component.ts

@@ -0,0 +1,14 @@
+import {Component} from '@angular/core';
+
+/**
+ * @title Multiselect overview
+ */
+@Component({
+    selector: 'hc-multiselect-overview-example',
+    templateUrl: 'multiselect-overview-example.component.html',
+    styleUrls: ['multiselect-overview-example.component.scss']
+})
+export class MultiselectOverviewExampleComponent {
+    cities = ["Philadelphia", "Atlanta", "Salt Lake City", "Chicago", "Orlando"];
+    selectedCities = [];
+}

projects/cashmere-examples/src/lib/multiselect-overview/multiselect-overview-example.module.ts

@@ -0,0 +1,13 @@
+import {NgModule} from '@angular/core';
+import {MultiselectOverviewExampleComponent} from './multiselect-overview-example.component';
+import {CashmereModule} from '../cashmere.module';
+import {CommonModule} from '@angular/common';
+import {NgSelectModule} from '@ng-select/ng-select';
+import {FormsModule} from '@angular/forms';
+
+@NgModule({
+    imports: [CommonModule, CashmereModule, FormsModule, NgSelectModule],
+    declarations: [MultiselectOverviewExampleComponent],
+    entryComponents: [MultiselectOverviewExampleComponent]
+})
+export class MultiselectOverviewExampleModule {}

projects/cashmere-examples/src/project-template/package.json

@@ -20,6 +20,7 @@
     "@angular/platform-browser": "6.1.7",
     "@angular/platform-browser-dynamic": "6.1.7",
     "@angular/router": "6.1.7",
+    "@ng-select/ng-select": "^2.20.5",
     "core-js": "^2.5.4",
     "rxjs": "~6.3.3",
     "zone.js": "~0.8.26",

projects/cashmere-examples/src/project-template/src/app/app.module.ts

@@ -7,6 +7,7 @@ import {AppComponent} from './app.component';
 import {ExampleContainerComponent} from './example-container.component';
 import {CashmereModule} from './cashmere.module';
 import {FormsModule, ReactiveFormsModule} from '@angular/forms';
+import {NgSelectModule} from '@ng-select/ng-select';
 /* example-module-import */
 /* example-component-import */
 

projects/cashmere/src/lib/app-switcher/app-switcher-application-link/app-switcher-links.component.ts

@@ -1,10 +1,11 @@
-import {Component, Inject} from '@angular/core';
+import {Component, Inject, ViewEncapsulation} from '@angular/core';
 import {IAppSwitcherService, APP_SWITCHER_SERVICE} from '../app-switcher-interfaces';
 
 @Component({
     selector: 'hc-app-switcher-links',
     templateUrl: './app-switcher-links.component.html',
-    styleUrls: ['./app-switcher-links.component.scss']
+    styleUrls: ['./app-switcher-links.component.scss'],
+    encapsulation: ViewEncapsulation.None
 })
 export class AppSwitcherLinksComponent {
     constructor(@Inject(APP_SWITCHER_SERVICE) public _appSwitcherService: IAppSwitcherService) {}

projects/cashmere/src/lib/app-switcher/app-switcher.component.scss

@@ -1,6 +1,6 @@
 @import '../sass/app-switcher.scss';
 
-:host {
+.hc-app-switcher-container {
     @include hc-app-switcher-outer();
 }
 

projects/cashmere/src/lib/app-switcher/app-switcher.component.ts

@@ -1,5 +1,5 @@
 import {takeUntil} from 'rxjs/operators';
-import {Component, Inject, OnDestroy, OnInit, Input} from '@angular/core';
+import {Component, Inject, OnDestroy, OnInit, Input, ViewEncapsulation} from '@angular/core';
 import {Subject, Subscription, Observable} from 'rxjs';
 
 import {IAppSwitcherService, IDiscoveryApplication, APP_SWITCHER_SERVICE} from './app-switcher-interfaces';
@@ -8,7 +8,9 @@ import {WorkTrackerService} from '../shared/work-tracker.service';
 @Component({
     selector: 'hc-app-switcher',
     templateUrl: './app-switcher.component.html',
-    styleUrls: ['./app-switcher.component.scss']
+    styleUrls: ['./app-switcher.component.scss'],
+    host: {class: 'hc-app-switcher-container'},
+    encapsulation: ViewEncapsulation.None
 })
 export class AppSwitcherComponent implements OnInit, OnDestroy {
     public applications: IDiscoveryApplication[];

projects/cashmere/src/lib/breadcrumbs/breadcrumbs.component.ts

@@ -1,4 +1,4 @@
-import {Component, OnDestroy, OnInit, Input} from '@angular/core';
+import {Component, OnDestroy, OnInit, Input, ViewEncapsulation} from '@angular/core';
 import {ActivatedRoute, Event, NavigationEnd, Params, PRIMARY_OUTLET, Router} from '@angular/router';
 
 /**
@@ -20,7 +20,8 @@ export type QueryParamsHandling = 'merge' | 'preserve' | '';
 /** A navigational aid that allows users to keep track of their location within the current application  */
 @Component({
     selector: 'hc-breadcrumbs',
-    templateUrl: './breadcrumbs.component.html'
+    templateUrl: './breadcrumbs.component.html',
+    encapsulation: ViewEncapsulation.None
 })
 export class BreadcrumbsComponent implements OnInit, OnDestroy {
     public _breadcrumbs: IBreadcrumb[] = [];