fix(select): add the cssClass passed by the user to the alert for a select

fixes #6835

Author: brandyscarney

src/components/alert/alert-component.ts

@@ -103,7 +103,8 @@ export class AlertCmp {
 
     if (this.d.cssClass) {
       this.d.cssClass.split(' ').forEach(cssClass => {
-        renderer.setElementClass(_elementRef.nativeElement, cssClass, true);
+        // Make sure the class isn't whitespace, otherwise it throws exceptions
+        if (cssClass.trim() !== '') renderer.setElementClass(_elementRef.nativeElement, cssClass, true);
       });
     }
 

src/components/select/select.ts

@@ -301,18 +301,23 @@ export class Select implements AfterContentInit, ControlValueAccessor, OnDestroy
         };
       });
 
+      var selectCssClass = 'select-alert';
+
       // create the alert instance from our built up alertOptions
       overlay = new Alert(this._app, alertOptions);
 
       if (this._multi) {
         // use checkboxes
-        overlay.setCssClass('select-alert multiple-select-alert');
-
+        selectCssClass += ' multiple-select-alert';
       } else {
         // use radio buttons
-        overlay.setCssClass('select-alert single-select-alert');
+        selectCssClass += ' single-select-alert';
       }
 
+      // If the user passed a cssClass for the select, add it
+      selectCssClass += alertOptions.cssClass ? ' ' + alertOptions.cssClass : '';
+      overlay.setCssClass(selectCssClass);
+
       overlay.addButton({
         text: this.okText,
         handler: (selectedValues: any) => {

src/components/select/test/single-value/index.ts

@@ -30,7 +30,8 @@ class E2EPage {
 
     this.musicAlertOpts = {
       title: '1994 Music',
-      subTitle: 'Select your favorite'
+      subTitle: 'Select your favorite',
+      cssClass: 'music-select'
     };
   }