feat(platform:search-input): Adding disabled state to search input co…

…mponent (#1647)
SAP · Dec 4, 2019 · 307869f · 307869f
1 parent a9d5247
commit 307869f
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 3 deletions.
diff --git a/libs/platform/src/lib/components/search-input/search-input.component.html b/libs/platform/src/lib/components/search-input/search-input.component.html
@@ -1,7 +1,7 @@
 <div class="search-input"
     [ngClass]="{'with-categories': showCategoryDropdown, 'is-loading': isLoading, 'hide-category-label': hideCategoryLabel}">
-    <fd-popover *ngIf="showCategoryDropdown" class="search-input__category-dropdown" [disabled]="isLoading">
-        <fd-dropdown-control [toolbar]="true" [disabled]="isLoading" [compact]="compact">
+    <fd-popover *ngIf="showCategoryDropdown" class="search-input__category-dropdown" [disabled]="isLoading || disabled">
+        <fd-dropdown-control [toolbar]="true" [disabled]="isLoading || disabled" [compact]="compact">
             <span class="search-input__category-label"
                 *ngIf="!hideCategoryLabel">{{currentCategory ? currentCategory.label : categoryLabel}}</span>
         </fd-dropdown-control>
@@ -16,6 +16,7 @@
     </fd-popover>
     <fd-combobox #combobox [glyph]="isLoading ? 'synchronize' : 'search'" [placeholder]="placeholder"
         [dropdownValues]="dropdownValues$ | async" [compact]="compact" [triggers]="[]" [(ngModel)]="inputText"
-        (ngModelChange)="onValueChange($event)" (itemClicked)="onItemClick($event)" [searchFunction]="onSearchSubmit">
+        (ngModelChange)="onValueChange($event)" (itemClicked)="onItemClick($event)" [searchFunction]="onSearchSubmit"
+        [disabled]="disabled">
     </fd-combobox>
 </div>
diff --git a/libs/platform/src/lib/components/search-input/search-input.component.spec.ts b/libs/platform/src/lib/components/search-input/search-input.component.spec.ts
@@ -18,6 +18,7 @@ import { Observable, of } from 'rxjs';
             [hideCategoryLabel]="hideCategoryLabel"
             [size]="size"
             [isLoading]="isLoading"
+            [disabled]="disabled"
             (inputChange)="onInputChange($event)"
             (searchSubmit)="onSearchSubmit($event)"
             (cancelSearch)="onCancelSearch($event)"> </fdp-search-input>
@@ -32,6 +33,7 @@ class TestComponent {
     public hideCategoryLabel = false;
     public size: SearchInputSize;
     public isLoading = false;
+    public disabled = false;
 
     public inputValue: SearchInput;
     public submitValue: SearchInput;
@@ -342,4 +344,16 @@ describe('SearchInputComponent', () => {
         expect(host.isSearchCanceled).toBeTruthy();
     });
 
+    it('should have a disabled state', () => {
+        // set up component
+        host.placeholder = 'Search';
+        host.suggestions = [{ value: 'Apple' }, { value: 'Banana' }, { value: 'Carrot' }];
+        host.disabled = true;
+        fixture.detectChanges();
+
+        const combobox: ComboboxComponent = fixture.debugElement.query(By.css('fd-combobox')).componentInstance;
+        expect(combobox.disabled).toBeTruthy();
+
+    });
+
 });
diff --git a/libs/platform/src/lib/components/search-input/search-input.component.ts b/libs/platform/src/lib/components/search-input/search-input.component.ts
@@ -68,6 +68,11 @@ export class SearchInputComponent implements OnInit, OnChanges, AfterViewInit {
      */
     @Input() isLoading = false;
 
+    /**
+     * Toggle "disabled" mode.
+     */
+    @Input() disabled = false;
+
     /**
      * Input change event.
      */