From a79678625feb7f20517a825494231917d2729835 Mon Sep 17 00:00:00 2001 From: "Manu Mtz.-Almeida" Date: Tue, 29 Nov 2016 17:24:32 +0100 Subject: [PATCH] fix(all): boolean inputs fixes #9391 --- src/components/range/range.ts | 11 ++++++-- src/components/searchbar/searchbar.ts | 26 ++++++++++++++----- src/components/searchbar/test/basic/main.html | 2 +- src/components/spinner/spinner.ts | 17 ++++++++---- 4 files changed, 42 insertions(+), 14 deletions(-) diff --git a/src/components/range/range.ts b/src/components/range/range.ts index a8b3dc43f50..f43d4c08e3c 100644 --- a/src/components/range/range.ts +++ b/src/components/range/range.ts @@ -41,9 +41,16 @@ export class RangeKnob implements OnInit { _ratio: number; _val: number; _x: string; + _upper: boolean = false; pressed: boolean; - @Input() upper: boolean; + @Input() + get upper(): boolean { + return this._upper; + } + set upper(val: boolean) { + this._upper = isTrueProperty(val); + } constructor( @Inject(forwardRef(() => Range)) public range: Range) { } @@ -81,7 +88,7 @@ export class RangeKnob implements OnInit { // we already have a value if (this.range.dualKnobs) { // we have a value and there are two knobs - if (this.upper) { + if (this._upper) { // this is the upper knob this.value = this.range.value.upper; diff --git a/src/components/searchbar/searchbar.ts b/src/components/searchbar/searchbar.ts index 7d3240a4ed2..774cf4c8dee 100644 --- a/src/components/searchbar/searchbar.ts +++ b/src/components/searchbar/searchbar.ts @@ -44,10 +44,10 @@ import { TimeoutDebouncer } from '../../util/debouncer'; '' + '', host: { - '[class.searchbar-animated]': 'animated', + '[class.searchbar-animated]': '_animated', '[class.searchbar-has-value]': '_value', '[class.searchbar-active]': '_isActive', - '[class.searchbar-show-cancel]': 'showCancelButton', + '[class.searchbar-show-cancel]': '_showCancelButton', '[class.searchbar-left-aligned]': '_shouldAlignLeft' }, encapsulation: ViewEncapsulation.None @@ -62,6 +62,8 @@ export class Searchbar extends Ion { _autocorrect: string = 'off'; _isActive: boolean = false; _debouncer: TimeoutDebouncer = new TimeoutDebouncer(250); + _showCancelButton: boolean = false; + _animated: boolean = false; /** * @input {string} The predefined color to use. For example: `"primary"`, `"secondary"`, `"danger"`. @@ -87,7 +89,13 @@ export class Searchbar extends Ion { /** * @input {boolean} Whether to show the cancel button or not. Default: `"false"`. */ - @Input() showCancelButton: any = false; + @Input() + get showCancelButton(): boolean { + return this._showCancelButton; + } + set showCancelButton(val: boolean) { + this._showCancelButton = isTrueProperty(val); + } /** * @input {number} How long, in milliseconds, to wait to trigger the `ionInput` event after each keystroke. Default `250`. @@ -135,9 +143,15 @@ export class Searchbar extends Ion { @Input() type: string = 'search'; /** - * @input {string|boolean} Configures if the searchbar is animated or no. By default, animation is disabled. + * @input {boolean} Configures if the searchbar is animated or no. By default, animation is `false`. */ - @Input() animated: string | boolean = false; + @Input() + get animated(): boolean { + return this._animated; + } + set animated(val: boolean) { + this._animated = isTrueProperty(val); + } /** * @output {event} When the Searchbar input has changed including cleared. @@ -232,7 +246,7 @@ export class Searchbar extends Ion { * based on the input value and if it is focused. (ios only) */ positionElements() { - let isAnimated = isTrueProperty(this.animated); + let isAnimated = this._animated; let prevAlignLeft = this._shouldAlignLeft; let shouldAlignLeft = (!isAnimated || (this._value && this._value.toString().trim() !== '') || this._sbHasFocus === true); this._shouldAlignLeft = shouldAlignLeft; diff --git a/src/components/searchbar/test/basic/main.html b/src/components/searchbar/test/basic/main.html index be326b3452a..b3a7d88a7a5 100644 --- a/src/components/searchbar/test/basic/main.html +++ b/src/components/searchbar/test/basic/main.html @@ -17,7 +17,7 @@
Search - Custom Placeholder

Search - No Cancel Button
- +

defaultCancel: {{ defaultCancel }} diff --git a/src/components/spinner/spinner.ts b/src/components/spinner/spinner.ts index cfa373e8552..64e1df4b636 100644 --- a/src/components/spinner/spinner.ts +++ b/src/components/spinner/spinner.ts @@ -3,6 +3,8 @@ import { ChangeDetectionStrategy, Component, ElementRef, Input, Renderer, ViewEn import { Config } from '../../config/config'; import { Ion } from '../ion'; import { CSS } from '../../util/dom'; +import { isTrueProperty } from '../../util/util'; + /** * @name Spinner * @description @@ -106,7 +108,7 @@ import { CSS } from '../../util/dom'; '' + '', host: { - '[class.spinner-paused]': 'paused' + '[class.spinner-paused]': '_paused' }, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, @@ -118,6 +120,7 @@ export class Spinner extends Ion { _dur: number = null; _init: boolean; _applied: string; + _paused: boolean = false; /** * @input {string} The predefined color to use. For example: `"primary"`, `"secondary"`, `"danger"`. @@ -145,7 +148,6 @@ export class Spinner extends Ion { get name(): string { return this._name; } - set name(val: string) { this._name = val; this.load(); @@ -158,16 +160,21 @@ export class Spinner extends Ion { get duration(): number { return this._dur; } - set duration(val: number) { this._dur = val; this.load(); } /** - * @input {string} If the animation is paused or not. Defaults to `false`. + * @input {boolean} If the animation is paused or not. Defaults to `false`. */ - @Input() paused: boolean = false; + @Input() + get paused(): boolean { + return this._paused; + } + set paused(val: boolean) { + this._paused = isTrueProperty(val); + } constructor(config: Config, elementRef: ElementRef, renderer: Renderer) { super(config, elementRef, renderer, 'spinner');