fix(all): boolean inputs

fixes #9391

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;
 

src/components/searchbar/searchbar.ts

@@ -44,10 +44,10 @@ import { TimeoutDebouncer } from '../../util/debouncer';
     '</div>' +
     '<button ion-button #cancelButton mode="ios" [tabindex]="_isActive ? 1 : -1" clear (click)="cancelSearchbar($event)" (mousedown)="cancelSearchbar($event)" class="searchbar-ios-cancel" type="button">{{cancelButtonText}}</button>',
   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;

src/components/searchbar/test/basic/main.html

@@ -17,7 +17,7 @@
   </p>
 
   <h5 padding-left> Search - No Cancel Button </h5>
-  <ion-searchbar autocorrect="off" autocomplete="off" spellcheck="true" type="text" [(ngModel)]="defaultCancel" (ionInput)="triggerInput($event)" (ionCancel)="onCancelSearchbar($event)" (ionClear)="onClearSearchbar($event)"></ion-searchbar>
+  <ion-searchbar autocorrect="off" autocomplete="off" spellcheck="true" type="text" [(ngModel)]="defaultCancel" (ionInput)="triggerInput($event)" (ionCancel)="onCancelSearchbar($event)" (ionClear)="onClearSearchbar($event)" showCancelButton="false"></ion-searchbar>
 
   <p padding-left>
     defaultCancel: <b>{{ defaultCancel }}</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';
       '<line [attr.y1]="i.y1" [attr.y2]="i.y2" transform="translate(32,32)"></line>' +
     '</svg>',
   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');