Adding ability to disable the dropdowns

instance-oom · Jul 3, 2017 · 0a5afdd · 0a5afdd
1 parent a78c36d
commit 0a5afdd
Showing 1 changed file with 27 additions and 24 deletions.
diff --git a/components/dropdown/dropdown.ts b/components/dropdown/dropdown.ts
@@ -9,30 +9,30 @@ import { NG_VALUE_ACCESSOR, ControlValueAccessor } from '@angular/forms';
     '(document:click)': 'onDocumentClick($event)'
   },
   template: `
-    <div class="ui fluid selection dropdown" [attr.id]="id" 
-      [ngClass]="{'active':active,'visible':active,'multiple':multiple}" 
-      (click)="toggleSelectPanel($event)">
-      <i class="dropdown icon"></i>
-      <div class="default text" *ngIf="!selectedItem || selectedItem.length == 0">
-        {{ placeHolder }}
+      <div class="ui fluid selection dropdown" [attr.id]="id"
+           [ngClass]="{'active':active,'visible':active,'multiple':multiple,'disabled':disabled}"
+           (click)="toggleSelectPanel($event)">
+          <i class="dropdown icon"></i>
+          <div class="default text" *ngIf="!selectedItem || selectedItem.length == 0">
+              {{ placeHolder }}
+          </div>
+          <div class="text" *ngIf="selectedItem && !multiple">
+              {{ selectedItem[textField] || selectedItem }}
+          </div>
+          <div *ngIf="selectedItem && multiple">
+              <a class="ui label transition visible" style="display: inline-block !important;" *ngFor="let item of selectedItem">
+                  {{ item[textField] || item }}
+                  <i class="delete icon" (click)="removeItem(item, $event)"></i>
+              </a>
+          </div>
+          <div class="menu visible" #menuPanel [@menuPanelState]="menuPanelState"
+               (@menuPanelState.start)="menuPanel.style.overflowY = 'hidden'"
+               (@menuPanelState.done)="menuPanel.style.overflowY = 'auto'">
+              <div class="item" [class.active]="isSelected(item)" [class.filtered]="isSelected(item) && multiple" (click)="itemClick(item, $event)" *ngFor="let item of data">
+                  {{ item[textField] || item }}
+              </div>
+          </div>
       </div>
-      <div class="text" *ngIf="selectedItem && !multiple">
-        {{ selectedItem[textField] || selectedItem }}
-      </div>
-      <div *ngIf="selectedItem && multiple">
-        <a class="ui label transition visible" style="display: inline-block !important;" *ngFor="let item of selectedItem">
-          {{ item[textField] || item }}
-          <i class="delete icon" (click)="removeItem(item, $event)"></i>
-        </a>
-      </div>
-      <div class="menu visible" #menuPanel [@menuPanelState]="menuPanelState"
-        (@menuPanelState.start)="menuPanel.style.overflowY = 'hidden'"
-        (@menuPanelState.done)="menuPanel.style.overflowY = 'auto'">
-        <div class="item" [class.active]="isSelected(item)" [class.filtered]="isSelected(item) && multiple" (click)="itemClick(item, $event)" *ngFor="let item of data">
-          {{ item[textField] || item }}
-        </div>
-      </div>
-    </div>
   `,
   animations: [
     trigger('menuPanelState', [
@@ -61,6 +61,9 @@ export class DropdownComponent implements ControlValueAccessor {
   @Input()
   public textField: string;
 
+  @Input()
+  public disabled: boolean = false;
+
   @Input()
   public placeHolder: string = '';
 
@@ -173,4 +176,4 @@ export class DropdownComponent implements ControlValueAccessor {
     this.writeValue(value);
     event.stopPropagation();
   }
-}
+}