feat: introduce disabled token and fix disabled multi input (#1205)

* #1204 fix disabled multi input and introduce disabled token * #1204 remove unused import
SAP · Sep 2, 2019 · fc35e9c · fc35e9c
1 parent 9b9ccf5
commit fc35e9c
Show file tree

Hide file tree

Showing 5 changed files with 26 additions and 5 deletions.
diff --git a/...omponent-docs/multi-input/examples/multi-input-example/multi-input-example.component.html b/...omponent-docs/multi-input/examples/multi-input-example/multi-input-example.component.html
@@ -3,3 +3,12 @@
                 [(ngModel)]="selected"></fd-multi-input>
 
 Selected: [{{selected.toLocaleString()}}]
+<br />
+<label fd-label for="disabledMultiInput1">Disabled Multi Input</label>
+<fd-multi-input [dropdownValues]="['Apple', 'Banana', 'Pineapple', 'Tomato']"
+                [placeholder]="'Search here...'"
+                [disabled]="true"
+                id="disabledMultiInput1"
+                [(ngModel)]="secondSelected"></fd-multi-input>
+
+Selected: [{{secondSelected.toLocaleString()}}]
diff --git a/.../component-docs/multi-input/examples/multi-input-example/multi-input-example.component.ts b/.../component-docs/multi-input/examples/multi-input-example/multi-input-example.component.ts
@@ -8,5 +8,6 @@ import { Component } from '@angular/core';
 export class MultiInputExampleComponent {
 
     selected = [];
+    secondSelected = ['Pineapple'];
 
 }
diff --git a/library/src/lib/multi-input/multi-input.component.html b/library/src/lib/multi-input/multi-input.component.html
@@ -47,9 +47,11 @@
     </fd-popover>
 </div>
 <div class="fd-multi-input-tags">
-    <fd-token *ngFor="let token of selected"
-              (onCloseClick)="handleSelect(false, token)"
-              class="fd-multi-input-token-spacing">
+    <fd-token 
+            *ngFor="let token of selected"
+            [disabled]=this.disabled
+            (onCloseClick)="handleSelect(false, token)"
+            class="fd-multi-input-token-spacing">
         {{token | displayFnPipe:displayFn}}
     </fd-token>
 </div>

diff --git a/library/src/lib/token/token.component.scss b/library/src/lib/token/token.component.scss
@@ -1,3 +1,7 @@
 .fd-token-content {
     display: inline-block;
 }
+//temporary fix until fundamental styles introduces a disabled token
+.fd-token__disabled::after{
+    cursor: not-allowed;
+}
diff --git a/library/src/lib/token/token.component.ts b/library/src/lib/token/token.component.ts
@@ -1,4 +1,4 @@
-import { Component, ElementRef, EventEmitter, HostListener, Output, ViewChild, ViewEncapsulation } from '@angular/core';
+import { Component, ElementRef, EventEmitter, HostListener, Output, ViewChild, ViewEncapsulation, Input } from '@angular/core';
 
 /**
  * A token is used to represent contextualizing information.
@@ -10,6 +10,7 @@ import { Component, ElementRef, EventEmitter, HostListener, Output, ViewChild, V
     styleUrls: ['./token.component.scss'],
     host: {
         class: 'fd-token',
+        '[class.fd-token__disabled]': 'disabled',
         'role': 'button'
     },
     encapsulation: ViewEncapsulation.None
@@ -20,6 +21,10 @@ export class TokenComponent {
     @ViewChild('contentContainer')
     contentContainer: ElementRef;
 
+    /** Whether the token is disabled. */
+    @Input()
+    disabled: boolean = false;
+
     /** Emitted when the *x* icon is clicked. Specifically, any pseudo-element. */
     @Output()
     readonly onCloseClick: EventEmitter<void> = new EventEmitter<void>();
@@ -31,7 +36,7 @@ export class TokenComponent {
     /** @hidden */
     @HostListener('click', ['$event'])
     clickHandler(event): void {
-        if (this.contentContainer) {
+        if (this.contentContainer && !this.disabled) {
             if (this.elRef.nativeElement.contains(event.target) && !this.contentContainer.nativeElement.contains(event.target)) {
                 this.onCloseClick.emit();
             }