fix(segment): add disabled property to segment and segment button

rename Sass variables for opacity for consistency

references #5639
This commit is contained in:
Brandy Carney
2016-04-27 16:09:07 -04:00
parent 5030246c5d
commit 4fca31ec36
7 changed files with 126 additions and 39 deletions

View File

@ -1,7 +1,7 @@
import {Directive, Component, ElementRef, Renderer, Optional, EventEmitter, Input, Output, HostListener, ContentChildren, QueryList, ViewEncapsulation} from 'angular2/core';
import {NgControl} from 'angular2/common';
import {isPresent} from '../../util/util';
import {isTrueProperty, isPresent} from '../../util/util';
/**
@ -56,6 +56,7 @@ import {isPresent} from '../../util/util';
encapsulation: ViewEncapsulation.None,
})
export class SegmentButton {
private _disabled: boolean = false;
/**
* @input {string} the value of the segment button. Required.
@ -69,6 +70,26 @@ export class SegmentButton {
constructor(private _renderer: Renderer, private _elementRef: ElementRef) {}
/**
* @private
*/
@Input()
get disabled(): boolean {
return this._disabled;
}
set disabled(val: boolean) {
this._disabled = isTrueProperty(val);
this.setCssClass('segment-button-disabled', this._disabled);
}
/**
* @private
*/
setCssClass(cssClass: string, shouldAdd: boolean) {
this._renderer.setElementClass(this._elementRef.nativeElement, cssClass, shouldAdd);
}
/**
* @private
* On click of a SegmentButton
@ -146,6 +167,7 @@ export class SegmentButton {
selector: 'ion-segment'
})
export class Segment {
private _disabled: boolean = false;
/**
* @private
@ -170,6 +192,25 @@ export class Segment {
}
}
/**
* @private
*/
@Input()
get disabled(): boolean {
return this._disabled;
}
set disabled(val: boolean) {
this._disabled = isTrueProperty(val);
if (this._buttons) {
let buttons = this._buttons.toArray();
for (let button of buttons) {
button.setCssClass('segment-button-disabled', this._disabled);
}
}
}
/**
* @private
* Write a new value to the element.
@ -199,6 +240,11 @@ export class Segment {
if (isPresent(this.value)) {
button.isActive = (button.value === this.value);
}
if (isTrueProperty(this._disabled)) {
button.setCssClass('segment-button-disabled', this._disabled);
}
}
}