Issue edcarroll#386 fix: Adding attribute if there is 0 selection in multiselect

Author: Sourav

demo/src/app/pages/modules/select/select.page.ts

@@ -26,6 +26,7 @@ const exampleStandardTemplate = `
                           [isSearchable]="searchable"
                           [isDisabled]="disabled"
                           [hasLabels]="!hideLabels"
+                          [showCountText]="'Select'"
                           #multiSelect>
             <sui-select-option *ngFor="let option of multiSelect.filteredOptions"
                                [value]="option">
@@ -351,6 +352,13 @@ export class SelectPage {
                     description: "Sets whether the multi select uses labels.",
                     defaultValue: "true"
                 },
+                {
+                    name: "showCountText",
+                    type: "string",
+                    description: "Display text when no value is selected. " +
+                                 "Eg:- If we pass a value 'Select', it will display Select selections instead of " +
+                                 "0 selections"
+                },
                 {
                     name: "maxSelected",
                     type: "number",

src/modules/select/components/multi-select.ts

@@ -5,8 +5,8 @@ import { SuiSelectBase } from "../classes/select-base";
 import { SuiSelectOption } from "./select-option";
 
 @Component({
-               selector: "sui-multi-select",
-               template: `
+    selector: "sui-multi-select",
+    template: `
 <!-- Dropdown icon -->
 <i class="{{ icon }} icon" (click)="onCaretClick($event)"></i>
 
@@ -51,24 +51,24 @@ import { SuiSelectOption } from "./select-option";
     </ng-container>
 </div>
 `,
-               styles: [`
+    styles: [`
 :host input.search {
     width: 12em !important;
 }
 `]
-           })
+})
 export class SuiMultiSelect<T, U> extends SuiSelectBase<T, U> implements ICustomValueAccessorHost<U[]> {
-    public selectedOptions: T[];
+    public selectedOptions:T[];
     @Output()
-    public selectedOptionsChange: EventEmitter<U[]>;
+    public selectedOptionsChange:EventEmitter<U[]>;
     @Input()
-    public maxSelected: number;
+    public maxSelected:number;
     @HostBinding("class.multiple")
-    public readonly hasClasses: boolean;
+    public readonly hasClasses:boolean;
     // Stores the values written by ngModel before it can be matched to an option from `options`.
-    private _writtenOptions?: U[];
+    private _writtenOptions?:U[];
 
-    constructor(element: ElementRef, localizationService: SuiLocalizationService) {
+    constructor(element:ElementRef, localizationService:SuiLocalizationService) {
         super(element, localizationService);
 
         this.selectedOptions = [];
@@ -78,13 +78,13 @@ export class SuiMultiSelect<T, U> extends SuiSelectBase<T, U> implements ICustom
         this.hasClasses = true;
     }
 
-    public get filteredOptions(): T[] {
+    public get filteredOptions():T[] {
         if (this.maxSelectedReached) {
             // If we have reached the maximum number of selections, then empty the results completely.
             return [];
         }
 
-        const searchResults: T[] = this.searchService.results;
+        const searchResults:T[] = this.searchService.results;
 
         if (!this.hasLabels) {
             return searchResults;
@@ -95,53 +95,66 @@ export class SuiMultiSelect<T, U> extends SuiSelectBase<T, U> implements ICustom
         }
     }
 
-    public get availableOptions(): T[] {
+    public get availableOptions():T[] {
         return this.filteredOptions;
     }
 
-    private _hasLabels: boolean;
+    private _hasLabels:boolean;
 
     @Input()
-    public get hasLabels(): boolean {
+    public get hasLabels():boolean {
         return this._hasLabels;
     }
 
-    public set hasLabels(hasLabels: boolean) {
+    public set hasLabels(hasLabels:boolean) {
         this._hasLabels = hasLabels;
     }
 
-    private _placeholder: string;
+    private _showCountText:string;
 
     @Input()
-    public get placeholder(): string {
+    public get showCountText():string {
+        return this._showCountText;
+    }
+
+    public set showCountText(showCountText:string) {
+        this._showCountText = showCountText;
+    }
+
+
+    private _placeholder:string;
+
+    @Input()
+    public get placeholder():string {
         return this._placeholder || this.localeValues.multi.placeholder;
     }
 
-    public set placeholder(placeholder: string) {
+    public set placeholder(placeholder:string) {
         this._placeholder = placeholder;
     }
 
-    public get maxSelectedReached(): boolean {
+    public get maxSelectedReached():boolean {
         if (this.maxSelected == undefined) {
             // If there is no maximum then we can immediately return.
             return false;
         }
         return this.selectedOptions.length === this.maxSelected;
     }
 
-    public get maxSelectedMessage(): string {
+    public get maxSelectedMessage():string {
         return this._localizationService.interpolate(
             this.localeValues.multi.maxSelectedMessage,
             [["max", this.maxSelected.toString()]]);
     }
 
-    public get selectedMessage(): string {
+    public get selectedMessage():string {
         return this._localizationService.interpolate(
             this.localeValues.multi.selectedMessage,
-            [["count", this.selectedOptions.length.toString()]]);
+            [["count", this.selectedOptions.length.toString() === "0" && this._showCountText ?
+                this._showCountText : this.selectedOptions.length.toString()]]);
     }
 
-    public selectOption(option: T): void {
+    public selectOption(option:T):void {
         if (this.selectedOptions.indexOf(option) !== -1) {
             this.deselectOption(option);
             return;
@@ -159,7 +172,7 @@ export class SuiMultiSelect<T, U> extends SuiSelectBase<T, U> implements ICustom
         }
     }
 
-    public writeValue(values: U[]): void {
+    public writeValue(values:U[]):void {
         if (values instanceof Array) {
             if (this.searchService.options.length > 0) {
                 // If the options have already been loaded, we can immediately match the ngModel values to options.
@@ -187,7 +200,7 @@ export class SuiMultiSelect<T, U> extends SuiSelectBase<T, U> implements ICustom
         }
     }
 
-    public deselectOption(option: T): void {
+    public deselectOption(option:T):void {
         // Update selected options to the previously selected options \ {option}.
         this.selectedOptions = this.selectedOptions.filter(so => so !== option);
         this.selectedOptionsChange.emit(this.selectedOptions.map(o => this.valueGetter(o)));
@@ -200,14 +213,14 @@ export class SuiMultiSelect<T, U> extends SuiSelectBase<T, U> implements ICustom
         }
     }
 
-    public onQueryInputKeydown(event: KeyboardEvent): void {
+    public onQueryInputKeydown(event:KeyboardEvent):void {
         if (event.keyCode === KeyCode.Backspace && this.query === "" && this.selectedOptions.length > 0) {
             // Deselect the rightmost option when the user presses backspace in the search input.
             this.deselectOption(this.selectedOptions[this.selectedOptions.length - 1]);
         }
     }
 
-    protected optionsUpdateHook(): void {
+    protected optionsUpdateHook():void {
         if (!this._writtenOptions && this.selectedOptions.length > 0) {
             // We need to check the options still exist.
             this.writeValue(this.selectedOptions.map(o => this.valueGetter(o)));
@@ -226,7 +239,7 @@ export class SuiMultiSelect<T, U> extends SuiSelectBase<T, U> implements ICustom
         }
     }
 
-    protected initialiseRenderedOption(option: SuiSelectOption<T>): void {
+    protected initialiseRenderedOption(option:SuiSelectOption<T>):void {
         super.initialiseRenderedOption(option);
 
         // Boldens the item so it appears selected in the dropdown.
@@ -236,15 +249,15 @@ export class SuiMultiSelect<T, U> extends SuiSelectBase<T, U> implements ICustom
 
 // Value accessor directive for the select to support ngModel.
 @Directive({
-               selector: "sui-multi-select",
-               host: {
+    selector: "sui-multi-select",
+    host: {
                    "(selectedOptionsChange)": "onChange($event)",
                    "(touched)": "onTouched()"
                },
-               providers: [customValueAccessorFactory(SuiMultiSelectValueAccessor)]
-           })
+    providers: [customValueAccessorFactory(SuiMultiSelectValueAccessor)]
+})
 export class SuiMultiSelectValueAccessor<T, U> extends CustomValueAccessor<U[], SuiMultiSelect<T, U>> {
-    constructor(host: SuiMultiSelect<T, U>) {
+    constructor(host:SuiMultiSelect<T, U>) {
         super(host);
     }
 }