diff --git a/src/components/range/range.ts b/src/components/range/range.ts index a8b3dc43f5..f43d4c08e3 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 7d3240a4ed..774cf4c8de 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 be326b3452..b3a7d88a7a 100644 --- a/src/components/searchbar/test/basic/main.html +++ b/src/components/searchbar/test/basic/main.html @@ -17,7 +17,7 @@
defaultCancel: {{ defaultCancel }}
diff --git a/src/components/spinner/spinner.ts b/src/components/spinner/spinner.ts
index cfa373e855..64e1df4b63 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';
'