feat(select): add disabled status in select options

Author: voliva

src/components/alert/alert-component.ts

@@ -26,7 +26,7 @@ import {ViewController} from '../nav/view-controller';
 
         <template ngSwitchCase="radio">
           <div class="alert-radio-group" role="radiogroup" [attr.aria-labelledby]="hdrId" [attr.aria-activedescendant]="activeId">
-            <button category="alert-radio-button" *ngFor="let i of d.inputs" (click)="rbClick(i)" [attr.aria-checked]="i.checked" [attr.id]="i.id" class="alert-tappable alert-radio" role="radio">
+            <button category="alert-radio-button" *ngFor="let i of d.inputs" (click)="rbClick(i)" [attr.aria-checked]="i.checked" [disabled]="i.disabled" [attr.id]="i.id" class="alert-tappable alert-radio" role="radio">
               <div class="alert-radio-icon"><div class="alert-radio-inner"></div></div>
               <div class="alert-radio-label">
                 {{i.label}}
@@ -37,7 +37,7 @@ import {ViewController} from '../nav/view-controller';
 
         <template ngSwitchCase="checkbox">
           <div class="alert-checkbox-group">
-            <button category="alert-checkbox-button" *ngFor="let i of d.inputs" (click)="cbClick(i)" [attr.aria-checked]="i.checked" class="alert-tappable alert-checkbox" role="checkbox">
+            <button category="alert-checkbox-button" *ngFor="let i of d.inputs" (click)="cbClick(i)" [attr.aria-checked]="i.checked" [disabled]="i.disabled" class="alert-tappable alert-checkbox" role="checkbox">
               <div class="alert-checkbox-icon"><div class="alert-checkbox-inner"></div></div>
               <div class="alert-checkbox-label">
                 {{i.label}}
@@ -142,6 +142,7 @@ export class AlertCmp {
         value: isPresent(input.value) ? input.value : '',
         label: input.label,
         checked: !!input.checked,
+        disabled: !!input.disabled,
         id: 'alert-input-' + this.id + '-' + index
       };
     });

src/components/alert/alert-options.ts

@@ -16,5 +16,6 @@ export interface AlertInputOptions {
   value?: string;
   label?: string;
   checked?: boolean;
+  disabled?: boolean;
   id?: string;
 }

src/components/option/option.ts

@@ -14,6 +14,7 @@ import { isPresent, isTrueProperty } from '../../util/util';
 })
 export class Option {
   private _checked: any = false;
+  private _disabled: any = false;
   private _value: any;
 
   /**
@@ -50,6 +51,18 @@ export class Option {
     this._value = val;
   }
 
+  /**
+   * @input {boolean} Whether or not the option is disabled
+   */
+  @Input()
+  get disabled() {
+    return this._disabled;
+  }
+
+  set disabled(val) {
+    this._disabled = isTrueProperty(val);
+  }
+
   /**
    * @private
    */

src/components/select/select.ts

@@ -290,7 +290,8 @@ export class Select {
           type: (this._multi ? 'checkbox' : 'radio'),
           label: input.text,
           value: input.value,
-          checked: input.checked
+          checked: input.checked,
+          disabled: input.disabled
         };
       });
 

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

@@ -12,6 +12,7 @@ class E2EPage {
   pets: Array<string>;
   petOptions: Array<{text: string, value: string}>;
   authForm: ControlGroup;
+  status: string;
 
   constructor() {
     this.toppings = ['bacon', 'xcheese'];
@@ -24,6 +25,7 @@ class E2EPage {
       { text: 'Honey Badger', value: 'honeybadger' },
       { text: 'Pig', value: 'pig' },
     ];
+    this.status = "checked";
 
     this.authForm = new ControlGroup({
       name: new Control(''),

src/components/select/test/multiple-value/main.html

@@ -51,6 +51,15 @@
     </ion-select>
   </ion-item>
 
+  <ion-item>
+    <ion-label>Statuses</ion-label>
+    <ion-select multiple [(ngModel)]="status">
+      <ion-option value="checked" checked="true">Checked</ion-option>
+      <ion-option value="default">Default</ion-option>
+      <ion-option value="disabled" disabled="true">Disabled</ion-option>
+    </ion-select>
+  </ion-item>
+
   <p aria-hidden="true" padding>
     <code>toppings: {{toppings}}</code><br>
     <code>carFeatures: {{carFeatures}}</code><br>

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

@@ -15,6 +15,7 @@ class E2EPage {
   year: string;
   years: Array<number>;
   notification: string;
+  status: string;
 
   constructor() {
     this.gaming = '';
@@ -23,6 +24,7 @@ class E2EPage {
     this.month = '12';
     this.year = '1994';
     this.notification = 'enable';
+    this.status = "checked";
 
     this.years = [1989, 1990, 1991, 1992, 1993, 1994, 1995, 1996, 1997, 1998, 1999];
 

src/components/select/test/single-value/main.html

@@ -86,6 +86,15 @@
     </ion-select>
   </ion-item>
 
+  <ion-item>
+    <ion-label>Statuses</ion-label>
+    <ion-select [(ngModel)]="status">
+      <ion-option value="checked" checked="true">Checked</ion-option>
+      <ion-option value="default">Default</ion-option>
+      <ion-option value="disabled" disabled="true">Disabled</ion-option>
+    </ion-select>
+  </ion-item>
+
   <button (click)="resetGender()">Reset Gender</button>
 
   <p aria-hidden="true" padding>