fix: add typeahead css class binding on host (#92)

* fix: add typeahead css class binding on host
ng-select · Oct 20, 2017 · 51d7036 · 51d7036
1 parent 6a1ede6
commit 51d7036
Show file tree

Hide file tree

Showing 5 changed files with 21 additions and 9 deletions.
diff --git a/src/demo/app/layout/header.component.ts b/src/demo/app/layout/header.component.ts
@@ -8,7 +8,7 @@ import { Component, EventEmitter } from '@angular/core';
             <img src="https://angular.io/assets/images/logos/angular/angular.svg" width="32px" height="32px" />
             @ng-select/ng-select
         </a>
-        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
+        <button class="navbar-toggler" type="button" data-toggle="collapse"  aria-expanded="false" aria-label="Toggle navigation">
         <span class="navbar-toggler-icon"></span>
         </button>
 
@@ -24,7 +24,6 @@ import { Component, EventEmitter } from '@angular/core';
             <a class="nav-link disabled" href="#">Disabled</a>
             </li>
             <li class="nav-item dropdown">
-            <a class="nav-link dropdown-toggle" href="http://example.com" id="dropdown01" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>
             <div class="dropdown-menu" aria-labelledby="dropdown01">
                 <a class="dropdown-item" href="#">Action</a>
                 <a class="dropdown-item" href="#">Another action</a>
@@ -33,7 +32,13 @@ import { Component, EventEmitter } from '@angular/core';
             </li>-->
         </ul>
         <form class="form-inline my-2 my-lg-0">
-            <a class="github-button" data-size="large" href="https://github.com/ng-select/ng-select" aria-label="Follow @ng-select on GitHub">Follow @ng-select</a>
+            <!-- Place this tag where you want the button to render. -->
+            <a class="github-button"
+               href="https://github.com/ng-select/ng-select"
+               data-icon="octicon-star"
+               data-size="large"
+               data-show-count="true"
+               aria-label="Star ng-select/ng-select on GitHub">Star</a>
         </form>
         </div>
     </nav>

diff --git a/src/lib/src/ng-select.component.html b/src/lib/src/ng-select.component.html
@@ -1,6 +1,6 @@
 <div (click)="handleSelectClick($event)" class="ng-control">
     <div class="ng-value-container">
-        <div class="ng-placeholder" *ngIf="showPlaceholder()">{{placeholder}}</div>
+        <div class="ng-placeholder" [hidden]="!showPlaceholder()">{{placeholder}}</div>
         <ng-template #defaultLabelTemplate let-item="item">
             <div class="ng-value-wrapper default">
                 <span class="ng-value-icon left" (click)="unselect(item); $event.stopPropagation()" aria-hidden="true">×</span>

diff --git a/src/lib/src/ng-select.component.scss b/src/lib/src/ng-select.component.scss
@@ -15,16 +15,23 @@ ng-select {
     position: relative;
     display: block;
     @include box-sizing;
+
     div,
     input,
-    span,
-    virtual-scroll {
+    span {
         @include box-sizing;
     }
+
     virtual-scroll {
         display: block;
         height: auto;
+        @include box-sizing;
     }
+
+    [hidden] {
+        display: none;
+    }
+
     &.opened {
         >.ng-control {
             border-bottom-right-radius: 0;

diff --git a/src/lib/src/ng-select.component.spec.ts b/src/lib/src/ng-select.component.spec.ts
@@ -544,7 +544,7 @@ describe('NgSelectComponent', function () {
             fixture.detectChanges();
             fixture.whenStable().then(() => {
                 const el = fixture.debugElement.query(By.css('.ng-placeholder'));
-                expect(el).toBeNull();
+                expect(el.nativeElement.hasAttribute('hidden')).toBe(true);
             });
         }));
     });

diff --git a/src/lib/src/ng-select.component.ts b/src/lib/src/ng-select.component.ts
@@ -62,6 +62,8 @@ export class NgSelectComponent implements OnInit, OnDestroy, OnChanges, ControlV
     @Input() placeholder: string;
     @Input() notFoundText = 'No items found';
     @Input() typeToSearchText = 'Type to search';
+
+    @HostBinding('class.typeahead')
     @Input() typeahead: Subject<string>;
 
     @Input()
@@ -75,8 +77,6 @@ export class NgSelectComponent implements OnInit, OnDestroy, OnChanges, ControlV
     @Output('close') closeEvent = new EventEmitter();
     @Output('search') searchEvent = new EventEmitter();
 
-    clearEvent = new EventEmitter<NgOption>();
-
     @HostBinding('class.ng-single')
     get single() {
         return !this.multiple;