fix(segment): fix disabled segment

src/components/searchbar/test/basic/pages/root-page/root-page.html

@@ -3,7 +3,7 @@
   <ion-searchbar [(ngModel)]="defaultSearch" type="tel" showCancelButton debounce="500" (ionChange)="changedInput($event)" (ionInput)="triggerInput($event)" (ionBlur)="inputBlurred($event)" (ionFocus)="inputFocused($event)" (ionCancel)="onCancelSearchbar($event)" (ionClear)="onClearSearchbar($event)"></ion-searchbar>
 
   <h5 padding-left> Search - Animated </h5>
-  <ion-searchbar animated="true" showCancelButton debounce="500" (ionChange)="changedInput($event)" (ionInput)="triggerInput($event)" (ionBlur)="inputBlurred($event)" (ionFocus)="inputFocused($event)" (ionCancel)="onCancelSearchbar($event)" (ionClear)="onClearSearchbar($event)"></ion-searchbar>
+  <ion-searchbar [(ngModel)]="defaultSearch" animated="true" showCancelButton debounce="500" (ionChange)="changedInput($event)" (ionInput)="triggerInput($event)" (ionBlur)="inputBlurred($event)" (ionFocus)="inputFocused($event)" (ionCancel)="onCancelSearchbar($event)" (ionClear)="onClearSearchbar($event)"></ion-searchbar>
 
   <p padding-left>
     defaultSearch: <b>{{ defaultSearch }}</b>

src/components/segment/segment-button.ts

@@ -46,11 +46,16 @@ import { isPresent, isTrueProperty } from '../../util/util';
   host: {
     'tappable': '',
     'class': 'segment-button',
-    'role': 'button'
+    'role': 'button',
+    '[class.segment-button-disabled]': '_disabled',
+    '[class.segment-activated]': 'isActive',
+    '[attr.aria-pressed]': 'isActive'
   },
   encapsulation: ViewEncapsulation.None,
 })
 export class SegmentButton {
+
+  isActive: boolean = false;
   _disabled: boolean = false;
 
   /**
@@ -63,8 +68,6 @@ export class SegmentButton {
    */
   @Output() ionSelect: EventEmitter<SegmentButton> = new EventEmitter<SegmentButton>();
 
-  constructor(private _renderer: Renderer, private _elementRef: ElementRef) {}
-
   /**
    * @input {boolean} If true, the user cannot interact with this element.
    */
@@ -75,15 +78,9 @@ export class SegmentButton {
 
   set disabled(val: boolean) {
     this._disabled = isTrueProperty(val);
-    this._setElementClass('segment-button-disabled', this._disabled);
   }
 
-  /**
+  constructor(private _renderer: Renderer, private _elementRef: ElementRef) {}
-   * @hidden
-   */
-  _setElementClass(cssClass: string, shouldAdd: boolean) {
-    this._renderer.setElementClass(this._elementRef.nativeElement, cssClass, shouldAdd);
-  }
 
   /**
    * @hidden
@@ -104,12 +101,4 @@ export class SegmentButton {
     }
   }
 
-  /**
-   * @hidden
-   */
-  set isActive(isActive: any) {
-    this._renderer.setElementClass(this._elementRef.nativeElement, 'segment-activated', isActive);
-    this._renderer.setElementAttribute(this._elementRef.nativeElement, 'aria-pressed', isActive);
-  }
-
 }

src/components/segment/segment.ios.scss

@@ -129,6 +129,11 @@ $segment-button-ios-toolbar-icon-line-height:   2.4rem !default;
     border-radius: 0 $segment-button-ios-border-radius $segment-button-ios-border-radius 0;
   }
 }
+.segment-ios.segment-disabled {
+  opacity: .4;
+
+  pointer-events: none;
+}
 
 .segment-ios .segment-button-disabled {
   color: rgba($segment-button-ios-background-color-activated, $segment-button-ios-opacity-disabled);

src/components/segment/segment.md.scss

@@ -77,6 +77,7 @@ $segment-button-md-icon-line-height:           $segment-button-md-line-height !d
   }
 }
 
+.segment-md.segment-disabled,
 .segment-md .segment-button-disabled {
   opacity: $segment-button-md-opacity-disabled;
 

src/components/segment/segment.ts

@@ -62,7 +62,10 @@ import { SegmentButton } from './segment-button';
  * @see [Angular 2 Forms](http://learnangular2.com/forms/)
  */
 @Directive({
-  selector: 'ion-segment'
+  selector: 'ion-segment',
+  host: {
+    '[class.segment-disabled]': '_disabled'
+  }
 })
 export class Segment extends BaseInput<string> {
 

src/components/segment/segment.wp.scss

@@ -75,6 +75,7 @@ $segment-button-wp-buttons-justify-content:    flex-start !default;
   }
 }
 
+.segment-wp.segment-disabled,
 .segment-wp .segment-button-disabled {
   opacity: $segment-button-wp-opacity-disabled;
 

src/components/segment/test/basic/pages/home-page/home-page.html

@@ -33,7 +33,7 @@
       <ion-segment-button value="active" class="e2eSegmentStandard">
         Active
       </ion-segment-button>
-      <ion-segment-button value="disabled" [disabled]="isDisabled">
+      <ion-segment-button value="disabled" [disabled]="isDisabledB">
         Disabled
       </ion-segment-button>
       <ion-segment-button value="inactive" disabled="false">
@@ -44,20 +44,20 @@
   <p>
     Map mode: <b>{{myForm.controls.mapStyle.value}}</b> -
     <span [ngSwitch]="myForm.controls.mapStyle.value">
-      <span *ngSwitchCase="'standard'">
+      <span *ngSwitchCase="'active'">
         <b>Standard</b>
       </span>
-      <span *ngSwitchCase="'hybrid'">
+      <span *ngSwitchCase="'disabled'">
         <b>Hybrid</b>
       </span>
-      <span *ngSwitchCase="'sat'">
+      <span *ngSwitchCase="'inactive'">
         <b>Satellite</b>
       </span>
     </span>
   </p>
   <hr>
   <h4>Model style: NgModel</h4>
-  <ion-segment [(ngModel)]="modelStyle" color="dark">
+  <ion-segment [(ngModel)]="modelStyle" color="dark" [disabled]="isDisabledS">
     <ion-segment-button value="A">
       Model A
     </ion-segment-button>
@@ -67,12 +67,12 @@
     <ion-segment-button value="C" class="e2eSegmentModelC">
       Model C
     </ion-segment-button>
-    <ion-segment-button value="D" [disabled]="isDisabled">
+    <ion-segment-button value="D" [disabled]="isDisabledB">
       Model D
     </ion-segment-button>
   </ion-segment>
   <p>Model Style: <b>Model {{ modelStyle }}</b></p>
-  <ion-segment [(ngModel)]="icons">
+  <ion-segment [(ngModel)]="icons" >
     <ion-segment-button value="camera">
       <ion-icon name="camera"></ion-icon>
     </ion-segment-button>
@@ -80,7 +80,9 @@
       <ion-icon name="bookmark"></ion-icon>
     </ion-segment-button>
   </ion-segment>
-  <button ion-button block color="dark" (click)="toggleDisabled()">Toggle Disabled</button>
+  <button ion-button color="dark" (click)="toggleBDisabled()">Toggle Button Disabled</button>
+  <button ion-button color="dark" (click)="toggleSDisabled()">Toggle Segment Disabled</button>
+
 </ion-content>
 
 
@@ -112,7 +114,7 @@
     </ion-segment>
   </ion-toolbar>
   <ion-toolbar>
-    <ion-segment [(ngModel)]="appType" color="dark" [disabled]="isDisabled">
+    <ion-segment [(ngModel)]="appType" color="dark" [disabled]="isDisabledS">
       <ion-segment-button value="paid">
         Default
       </ion-segment-button>

src/components/segment/test/basic/pages/home-page/home-page.ts

@@ -11,7 +11,9 @@ export class HomePage {
   modelStyle: string = 'B';
   appType: string = 'free';
   icons: string = 'camera';
-  isDisabled: boolean = true;
+  isDisabledB: boolean = true;
+  isDisabledS: boolean = false;
+
   myForm: any;
 
   constructor(fb: FormBuilder) {
@@ -20,8 +22,12 @@ export class HomePage {
     });
   }
 
-  toggleDisabled() {
+  toggleBDisabled() {
-    this.isDisabled = !this.isDisabled;
+    this.isDisabledB = !this.isDisabledB;
+  }
+
+  toggleSDisabled() {
+    this.isDisabledS = !this.isDisabledS;
   }
 
   onSegmentChanged(segmentButton: SegmentButton) {