Merge pull request #1194 from scheduleonce/staging-app2

Merging staging-app2 in to master.

package.json

@@ -1,6 +1,6 @@
 {
   "name": "oncehub-ui",
-  "version": "8.0.14",
+  "version": "8.0.16",
   "scripts": {
     "ng": "ng",
     "build": "ng build ui",

ui/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oncehub/ui",
-  "version": "8.0.14",
+  "version": "8.0.16",
   "description": "Oncehub UI",
   "peerDependencies": {},
   "repository": {

ui/src/components/select/select.component.ts

@@ -236,9 +236,18 @@ export class OuiSelect
   /** The placeholder displayed in the trigger of the select. */
   private _placeholder: string;
 
+  /** The label displayed on the cancel button of the select in case of multi-select. */
+  private _cancelLabel = 'Cancel';
+
+  /** The label displayed on the done button of the select in case of multi-select. */
+  private _doneLabel = 'Done';
+
   /** Whether the component is in multiple selection mode. */
   private _multiple = false;
 
+  /** In multiple selection mode, enable Done button even in case of no option selected */
+  private _allowNoSelection = false;
+
   /** Search input field **/
   isSearchFieldPresent: boolean;
 
@@ -461,6 +470,26 @@ export class OuiSelect
     this.stateChanges.next();
   }
 
+  /** In case of multiple the cancelLabel to be shown on cancel action button. */
+  @Input()
+  get cancelLabel(): string {
+    return this._cancelLabel;
+  }
+  set cancelLabel(value: string) {
+    this._cancelLabel = value;
+    this.stateChanges.next();
+  }
+
+  /** In case of multiple the doneLabel to be shown on apply action button. */
+  @Input()
+  get doneLabel(): string {
+    return this._doneLabel;
+  }
+  set doneLabel(value: string) {
+    this._doneLabel = value;
+    this.stateChanges.next();
+  }
+
   /** Whether the component is required. */
   @Input()
   get required(): boolean {
@@ -484,6 +513,15 @@ export class OuiSelect
     this._multiple = coerceBooleanProperty(value);
   }
 
+  /** Whether the user should be allowed to select no option in case of multiple options. */
+  @Input()
+  get allowNoSelection(): boolean {
+    return this._allowNoSelection;
+  }
+  set allowNoSelection(value: boolean) {
+    this._allowNoSelection = coerceBooleanProperty(value);
+  }
+
   /** Whether the action items are required and use saveSelectionChange instead of selectionChange. */
   @Input()
   get actionItems(): boolean {
@@ -1193,7 +1231,9 @@ export class OuiSelect
     if (wasSelected !== this._selectionModel.isSelected(option)) {
       this._propagateChanges();
     }
-    this.disableDoneButton = false;
+    if (this.multiple) {
+      this.disableDoneButton = this._isDoneButtonDisabled();
+    }
     this.stateChanges.next();
   }
   discardRecentChanges() {
@@ -1208,6 +1248,18 @@ export class OuiSelect
     this.saveSelectionChange.emit(new OuiSelectChange(this, this.value));
     this.close();
   }
+
+  /** Determine whether the "Done" button should be enabled or disabled based on the selection state */
+  private _isDoneButtonDisabled(): boolean {
+    const selectedItems = (this.selected as OuiOption[]).map(
+      (option) => option.value
+    );
+    if (this.allowNoSelection) {
+      return false;
+    }
+    return selectedItems.length === 0;
+  }
+
   /** Sorts the selected values in the selected based on their order in the panel. */
   private _sortValues() {
     if (this.multiple) {

ui/src/components/select/select.html

@@ -58,15 +58,15 @@
           color="primary"
           (click)="discardRecentChanges()"
         >
-          Cancel</button
+          {{cancelLabel}}</button
         ><button
           #ddDoneButton
           oui-button
           color="primary"
           [disabled]="disableDoneButton"
           (click)="doneRecentChanges()"
         >
-          Done
+          {{doneLabel}}
         </button>
       </div>
     </div>

ui/src/stories/select/select.stories.mdx

@@ -137,6 +137,9 @@ Multi select:
         'Biryani',
         'Sweets',
       ],
+      cancelLabel: 'Discard',
+      doneLabel: 'Apply',
+      allowNoSelection: false
     }}
     argTypes={{
       theme: {
@@ -156,7 +159,7 @@ Multi select:
       template: `
     <div style="width: 213px;">
     <oui-form-field [appearance]="appearance">
-        <oui-select (saveSelectionChange)="onChange($event)" ngClass="{{theme}}" [large]="large" [placeholder]="placeholder" multiple actionItems [disabled]="disabled">
+        <oui-select (saveSelectionChange)="onChange($event)" ngClass="{{theme}}" [large]="large" [placeholder]="placeholder" multiple actionItems [allowNoSelection]="allowNoSelection" [disabled]="disabled" [cancelLabel]="cancelLabel" [doneLabel]="doneLabel">
           <oui-option *ngFor="let option of options" [value]="option">
             {{option}}
           </oui-option>