style(core): fix lint errors and update el to consistent names

packages/core/scripts/theme-builder/src/components/app-preview/app-preview.tsx

@@ -45,7 +45,7 @@ export class AppPreview {
 
     return [
       <div>
-        <iframe src={url} ref={elm => this.iframe = elm as any} onLoad={this.onIframeLoad.bind(this)}></iframe>
+        <iframe src={url} ref={el => this.iframe = el as any} onLoad={this.onIframeLoad.bind(this)}></iframe>
       </div>
     ];
   }

packages/core/src/components/action-sheet/animations/ios.enter.ts

@@ -3,21 +3,21 @@ import { Animation } from '../../../index';
 /**
  * iOS Action Sheet Enter Animation
  */
-export default function iosEnterAnimation(Animation: Animation, baseElm: HTMLElement): Promise<Animation> {
+export default function iosEnterAnimation(Animation: Animation, baseEl: HTMLElement): Promise<Animation> {
   const baseAnimation = new Animation();
 
   const backdropAnimation = new Animation();
-  backdropAnimation.addElement(baseElm.querySelector('.action-sheet-backdrop'));
+  backdropAnimation.addElement(baseEl.querySelector('.action-sheet-backdrop'));
 
   const wrapperAnimation = new Animation();
-  wrapperAnimation.addElement(baseElm.querySelector('.action-sheet-wrapper'));
+  wrapperAnimation.addElement(baseEl.querySelector('.action-sheet-wrapper'));
 
   backdropAnimation.fromTo('opacity', 0.01, 0.4);
 
   wrapperAnimation.fromTo('translateY', '100%', '0%');
 
   const ani = baseAnimation
-    .addElement(baseElm)
+    .addElement(baseEl)
     .easing('cubic-bezier(.36,.66,.04,1)')
     .duration(400)
     .add(backdropAnimation)

packages/core/src/components/action-sheet/animations/ios.leave.ts

@@ -3,21 +3,21 @@ import { Animation } from '../../../index';
 /**
  * iOS Action Sheet Leave Animation
  */
-export default function iosLeaveAnimation(Animation: Animation, baseElm: HTMLElement): Promise<Animation> {
+export default function iosLeaveAnimation(Animation: Animation, baseEl: HTMLElement): Promise<Animation> {
   const baseAnimation = new Animation();
 
   const backdropAnimation = new Animation();
-  backdropAnimation.addElement(baseElm.querySelector('.action-sheet-backdrop'));
+  backdropAnimation.addElement(baseEl.querySelector('.action-sheet-backdrop'));
 
   const wrapperAnimation = new Animation();
-  wrapperAnimation.addElement(baseElm.querySelector('.action-sheet-wrapper'));
+  wrapperAnimation.addElement(baseEl.querySelector('.action-sheet-wrapper'));
 
   backdropAnimation.fromTo('opacity', 0.4, 0);
 
   wrapperAnimation.fromTo('translateY', '0%', '100%');
 
   const ani = baseAnimation
-    .addElement(baseElm)
+    .addElement(baseEl)
     .easing('cubic-bezier(.36,.66,.04,1)')
     .duration(450)
     .add(backdropAnimation)

packages/core/src/components/action-sheet/animations/md.enter.ts

@@ -4,20 +4,20 @@ import { Animation } from '../../../index';
 /**
  * MD Action Sheet Enter Animation
  */
-export default function mdEnterAnimation(Animation: Animation, baseElm: HTMLElement): Promise<Animation> {
+export default function mdEnterAnimation(Animation: Animation, baseEl: HTMLElement): Promise<Animation> {
   const baseAnimation = new Animation();
 
   const backdropAnimation = new Animation();
-  backdropAnimation.addElement(baseElm.querySelector('.action-sheet-backdrop'));
+  backdropAnimation.addElement(baseEl.querySelector('.action-sheet-backdrop'));
 
   const wrapperAnimation = new Animation();
-  wrapperAnimation.addElement(baseElm.querySelector('.action-sheet-wrapper'));
+  wrapperAnimation.addElement(baseEl.querySelector('.action-sheet-wrapper'));
 
   backdropAnimation.fromTo('opacity', 0.01, 0.26);
   wrapperAnimation.fromTo('translateY', '100%', '0%');
 
   const ani = baseAnimation
-    .addElement(baseElm)
+    .addElement(baseEl)
     .easing('cubic-bezier(.36,.66,.04,1)')
     .duration(400)
     .add(backdropAnimation)

packages/core/src/components/action-sheet/animations/md.leave.ts

@@ -3,20 +3,20 @@ import { Animation } from '../../../index';
 /**
  * MD Action Sheet Leave Animation
  */
-export default function mdLeaveAnimation(Animation: Animation, baseElm: HTMLElement): Promise<Animation> {
+export default function mdLeaveAnimation(Animation: Animation, baseEl: HTMLElement): Promise<Animation> {
   const baseAnimation = new Animation();
 
   const backdropAnimation = new Animation();
-  backdropAnimation.addElement(baseElm.querySelector('.action-sheet-backdrop'));
+  backdropAnimation.addElement(baseEl.querySelector('.action-sheet-backdrop'));
 
   const wrapperAnimation = new Animation();
-  wrapperAnimation.addElement(baseElm.querySelector('.action-sheet-wrapper'));
+  wrapperAnimation.addElement(baseEl.querySelector('.action-sheet-wrapper'));
 
   backdropAnimation.fromTo('opacity', 0.26, 0);
   wrapperAnimation.fromTo('translateY', '0%', '100%');
 
   const ani = baseAnimation
-    .addElement(baseElm)
+    .addElement(baseEl)
     .easing('cubic-bezier(.36,.66,.04,1)')
     .duration(450)
     .add(backdropAnimation)

packages/core/src/components/alert/animations/ios.enter.ts

@@ -3,21 +3,21 @@ import { Animation } from '../../../index';
 /**
  * iOS Alert Enter Animation
  */
-export default function iosEnterAnimation(Animation: Animation, baseElm: HTMLElement): Promise<Animation> {
+export default function iosEnterAnimation(Animation: Animation, baseEl: HTMLElement): Promise<Animation> {
   const baseAnimation = new Animation();
 
   const backdropAnimation = new Animation();
-  backdropAnimation.addElement(baseElm.querySelector('.alert-backdrop'));
+  backdropAnimation.addElement(baseEl.querySelector('.alert-backdrop'));
 
   const wrapperAnimation = new Animation();
-  wrapperAnimation.addElement(baseElm.querySelector('.alert-wrapper'));
+  wrapperAnimation.addElement(baseEl.querySelector('.alert-wrapper'));
 
   backdropAnimation.fromTo('opacity', 0.01, 0.3);
 
   wrapperAnimation.fromTo('opacity', 0.01, 1).fromTo('scale', 1.1, 1);
 
   const ani = baseAnimation
-    .addElement(baseElm)
+    .addElement(baseEl)
     .easing('ease-in-out')
     .duration(200)
     .add(backdropAnimation)

packages/core/src/components/alert/animations/ios.leave.ts

@@ -3,21 +3,21 @@ import { Animation } from '../../../index';
 /**
  * iOS Alert Leave Animation
  */
-export default function iosLeaveAnimation(Animation: Animation, baseElm: HTMLElement): Promise<Animation> {
+export default function iosLeaveAnimation(Animation: Animation, baseEl: HTMLElement): Promise<Animation> {
   const baseAnimation = new Animation();
 
   const backdropAnimation = new Animation();
-  backdropAnimation.addElement(baseElm.querySelector('.alert-backdrop'));
+  backdropAnimation.addElement(baseEl.querySelector('.alert-backdrop'));
 
   const wrapperAnimation = new Animation();
-  wrapperAnimation.addElement(baseElm.querySelector('.alert-wrapper'));
+  wrapperAnimation.addElement(baseEl.querySelector('.alert-wrapper'));
 
   backdropAnimation.fromTo('opacity', 0.3, 0);
 
   wrapperAnimation.fromTo('opacity', 0.99, 0).fromTo('scale', 1, 0.9);
 
   const ani = baseAnimation
-    .addElement(baseElm)
+    .addElement(baseEl)
     .easing('ease-in-out')
     .duration(200)
     .add(backdropAnimation)

packages/core/src/components/alert/animations/md.enter.ts

@@ -3,21 +3,21 @@ import { Animation } from '../../../index';
 /**
  * Md Alert Enter Animation
  */
-export default function mdEnterAnimation(Animation: Animation, baseElm: HTMLElement): Promise<Animation> {
+export default function mdEnterAnimation(Animation: Animation, baseEl: HTMLElement): Promise<Animation> {
   const baseAnimation = new Animation();
 
   const backdropAnimation = new Animation();
-  backdropAnimation.addElement(baseElm.querySelector('.alert-backdrop'));
+  backdropAnimation.addElement(baseEl.querySelector('.alert-backdrop'));
 
   const wrapperAnimation = new Animation();
-  wrapperAnimation.addElement(baseElm.querySelector('.alert-wrapper'));
+  wrapperAnimation.addElement(baseEl.querySelector('.alert-wrapper'));
 
   backdropAnimation.fromTo('opacity', 0.01, 0.5);
 
   wrapperAnimation.fromTo('opacity', 0.01, 1).fromTo('scale', 1.1, 1);
 
   return Promise.resolve(baseAnimation
-    .addElement(baseElm)
+    .addElement(baseEl)
     .easing('ease-in-out')
     .duration(200)
     .add(backdropAnimation)

packages/core/src/components/alert/animations/md.leave.ts

@@ -3,21 +3,21 @@ import { Animation } from '../../../index';
 /**
  * Md Alert Leave Animation
  */
-export default function mdLeaveAnimation(Animation: Animation, baseElm: HTMLElement): Promise<Animation> {
+export default function mdLeaveAnimation(Animation: Animation, baseEl: HTMLElement): Promise<Animation> {
   const baseAnimation = new Animation();
 
   const backdropAnimation = new Animation();
-  backdropAnimation.addElement(baseElm.querySelector('.alert-backdrop'));
+  backdropAnimation.addElement(baseEl.querySelector('.alert-backdrop'));
 
   const wrapperAnimation = new Animation();
-  wrapperAnimation.addElement(baseElm.querySelector('.alert-wrapper'));
+  wrapperAnimation.addElement(baseEl.querySelector('.alert-wrapper'));
 
   backdropAnimation.fromTo('opacity', 0.5, 0);
 
   wrapperAnimation.fromTo('opacity', 0.99, 0).fromTo('scale', 1, 0.9);
 
   return Promise.resolve(baseAnimation
-    .addElement(baseElm)
+    .addElement(baseEl)
     .easing('ease-in-out')
     .duration(200)
     .add(backdropAnimation)

packages/core/src/components/animation-controller/animation-controller.tsx

@@ -9,9 +9,9 @@ import { Animator } from './animator';
 export class AnimationControllerImpl implements AnimationController {
 
   @Method()
-  create(animationBuilder?: AnimationBuilder, baseElm?: any, opts?: any): Promise<Animation> {
+  create(animationBuilder?: AnimationBuilder, baseEl?: any, opts?: any): Promise<Animation> {
     if (animationBuilder) {
-      return animationBuilder(Animator as any, baseElm, opts);
+      return animationBuilder(Animator as any, baseEl, opts);
     }
     return Promise.resolve(new Animator() as any);
   }

packages/core/src/components/animation-controller/animation-interface.tsx

@@ -1,12 +1,12 @@
 export interface AnimationController {
-  create(animationBuilder?: AnimationBuilder, baseElm?: any, opts?: any): Promise<Animation>;
+  create(animationBuilder?: AnimationBuilder, baseEl?: any, opts?: any): Promise<Animation>;
 }
 
 export interface Animation {
-  new (): Animation;
+  new (): any;
   parent: Animation;
   hasChildren: boolean;
-  addElement(elm: Node|Node[]|NodeList): Animation;
+  addElement(el: Node|Node[]|NodeList): Animation;
   add(childAnimation: Animation): Animation;
   duration(milliseconds: number): Animation;
   easing(name: string): Animation;
@@ -42,7 +42,7 @@ export interface Animation {
 
 
 export interface AnimationBuilder {
-(Animation: Animation, baseElm?: HTMLElement, opts?: any): Promise<Animation>;
+(Animation: Animation, baseEl?: HTMLElement, opts?: any): Promise<Animation>;
 }
 
 

packages/core/src/components/animation-controller/animator.tsx

@@ -38,15 +38,15 @@ export class Animator {
   isPlaying = false;
   hasCompleted = false;
 
-  addElement(elm: Node|Node[]|NodeList): Animator {
+  addElement(el: Node|Node[]|NodeList): Animator {
-    if (elm) {
+    if (el) {
-      if ((elm as NodeList).length) {
+      if ((el as NodeList).length) {
-        for (let i = 0; i < (elm as NodeList).length; i++) {
+        for (let i = 0; i < (el as NodeList).length; i++) {
-          this._addElm((elm as any)[i]);
+          this._addEl((el as any)[i]);
         }
 
       } else {
-        this._addElm(elm);
+        this._addEl(el);
       }
     }
 
@@ -56,9 +56,9 @@ export class Animator {
   /**
    * NO DOM
    */
-  private _addElm(elm: any) {
+  private _addEl(el: any) {
-    if (elm.nodeType === 1) {
+    if (el.nodeType === 1) {
-      this._elementTotal = (this._elements = this._elements || []).push(elm);
+      this._elementTotal = (this._elements = this._elements || []).push(el);
     }
   }
 
@@ -774,12 +774,12 @@ export class Animator {
     const addClasses = this._beforeAddClasses;
     const removeClasses = this._beforeRemoveClasses;
 
-    let elm: HTMLElement;
+    let el: HTMLElement;
     let elementClassList: DOMTokenList;
     let prop: string;
     for (i = 0; i < this._elementTotal; i++) {
-      elm = this._elements[i];
+      el = this._elements[i];
-      elementClassList = elm.classList;
+      elementClassList = el.classList;
 
       // css classes to add before the animation
       if (addClasses) {
@@ -801,7 +801,7 @@ export class Animator {
       if (this._beforeStyles) {
         for (prop in this._beforeStyles) {
           // ******** DOM WRITE ****************
-          (elm as any).style[prop] = this._beforeStyles[prop];
+          (el as any).style[prop] = this._beforeStyles[prop];
         }
       }
     }
@@ -856,18 +856,18 @@ export class Animator {
    */
   _setAfterStyles() {
     let i: number, j: number;
-    let elm: HTMLElement;
+    let el: HTMLElement;
     let elementClassList: DOMTokenList;
     const elements = this._elements;
     let prop: string;
 
     for (i = 0; i < this._elementTotal; i++) {
-      elm = elements[i];
+      el = elements[i];
-      elementClassList = elm.classList;
+      elementClassList = el.classList;
 
       // remove the transition duration/easing
       // ******** DOM WRITE ****************
-      (elm as any).style[CSS_PROP.transitionDurationProp] = (elm as any).style[CSS_PROP.transitionTimingFnProp] = '';
+      (el as any).style[CSS_PROP.transitionDurationProp] = (el as any).style[CSS_PROP.transitionTimingFnProp] = '';
 
       if (this._isReverse) {
         // finished in reverse direction
@@ -892,7 +892,7 @@ export class Animator {
         if (this._beforeStyles) {
           for (prop in this._beforeStyles) {
             // ******** DOM WRITE ****************
-            (elm as any).style[prop] = '';
+            (el as any).style[prop] = '';
           }
         }
 
@@ -919,7 +919,7 @@ export class Animator {
         if (this._afterStyles) {
           for (prop in this._afterStyles) {
             // ******** DOM WRITE ****************
-            (elm as any).style[prop] = this._afterStyles[prop];
+            (el as any).style[prop] = this._afterStyles[prop];
           }
         }
       }

packages/core/src/components/animation-controller/transition-end.ts

@@ -1,6 +1,6 @@
 
 
-export function transitionEnd(elm: HTMLElement, callback: {(ev?: TransitionEvent): void}) {
+export function transitionEnd(el: HTMLElement, callback: {(ev?: TransitionEvent): void}) {
   let unRegTrans: Function;
   let unRegWKTrans: Function;
   const opts: any = { passive: true };
@@ -11,21 +11,21 @@ export function transitionEnd(elm: HTMLElement, callback: {(ev?: TransitionEvent
   }
 
   function onTransitionEnd(ev: TransitionEvent) {
-    if (elm === ev.target) {
+    if (el === ev.target) {
       unregister();
       callback(ev);
     }
   }
 
-  if (elm) {
+  if (el) {
-    elm.addEventListener('webkitTransitionEnd', onTransitionEnd, opts);
+    el.addEventListener('webkitTransitionEnd', onTransitionEnd, opts);
     unRegWKTrans = function() {
-      elm.removeEventListener('webkitTransitionEnd', onTransitionEnd, opts);
+      el.removeEventListener('webkitTransitionEnd', onTransitionEnd, opts);
     };
 
-    elm.addEventListener('transitionend', onTransitionEnd, opts);
+    el.addEventListener('transitionend', onTransitionEnd, opts);
     unRegTrans = function() {
-      elm.removeEventListener('transitionend', onTransitionEnd, opts);
+      el.removeEventListener('transitionend', onTransitionEnd, opts);
     };
   }
 

packages/core/src/components/datetime/datetime-util.ts

@@ -47,7 +47,9 @@ export function renderTextFormat(format: string, value: any, date: DatetimeData,
 
       return (locale.dayShortNames ? locale.dayShortNames : DAY_SHORT_NAMES)[value];
 
-    } catch (e) {}
+    } catch (e) {
+      // ignore
+    }
 
     return '';
   }
@@ -248,12 +250,9 @@ export function updateDate(existingData: DatetimeData, newData: any): boolean {
 
       // do some magic for 12-hour values
       if (newData.ampm && newData.hour) {
-        if (newData.ampm.value === 'pm') {
+        newData.hour.value = (newData.ampm.value === 'pm')
-          newData.hour.value = (newData.hour.value === 12 ? 12 : newData.hour.value + 12);
+          ? (newData.hour.value === 12 ? 12 : newData.hour.value + 12)
-
+          : (newData.hour.value === 12 ? 0 : newData.hour.value);
-        } else {
-          newData.hour.value = (newData.hour.value === 12 ? 0 : newData.hour.value);
-        }
       }
 
       // merge new values from the picker's selection

packages/core/src/components/datetime/datetime.tsx

@@ -314,14 +314,11 @@ export class Datetime {
         const key = convertFormatToKey(format);
         let values: any[];
 
-        // first see if they have exact values to use for this input
+        // check if they have exact values to use for this date part
-        if (this[key + 'Values']) {
+        // otherwise use the default date part values
-          // user provide exact values for this date part
+        values = this[key + 'Values']
-          values = convertToArrayOfNumbers(this[key + 'Values'], key);
+          ? convertToArrayOfNumbers(this[key + 'Values'], key)
-        } else {
+          : dateValueRange(format, this.datetimeMin, this.datetimeMax);
-          // use the default date part values
-          values = dateValueRange(format, this.datetimeMin, this.datetimeMax);
-        }
 
         const column: PickerColumn = {
           name: key,

packages/core/src/components/fab-button/fab-button.tsx

@@ -39,7 +39,7 @@ export class FabButton {
   @Prop() translucent = false;
 
   @Prop() activated = false;
-  @Prop() toggleActive: Function = () => {};
+  @Prop() toggleActive: Function;
 
   @Prop() show = false;
 

packages/core/src/components/gesture/gesture.tsx

@@ -273,7 +273,9 @@ export class Gesture {
     // move pointer to position measured 100ms ago
     for (;
       startPos > 0 && positions[startPos] > timeRange;
-      startPos -= 3) { }
+      startPos -= 3) {
+        // TODO why is this empty?
+    }
 
     if (startPos > 1) {
       // compute relative movement between these two points

packages/core/src/components/infinite-scroll/infinite-scroll.tsx

@@ -128,14 +128,9 @@ export class InfiniteScroll {
     const height = this.scrollEl.offsetHeight;
     const threshold = this.thrPc ? (height * this.thrPc) : this.thrPx;
 
-    let distanceFromInfinite: number;
+    const distanceFromInfinite = (this.position === Position.Bottom)
-
+      ? scrollHeight - infiniteHeight - scrollTop - threshold - height
-    if (this.position === Position.Bottom) {
+      : scrollTop - infiniteHeight - threshold;
-      distanceFromInfinite = scrollHeight - infiniteHeight - scrollTop - threshold - height;
-    } else {
-      // assert(this.position === Position.Top, '_position should be top');
-      distanceFromInfinite = scrollTop - infiniteHeight - threshold;
-    }
 
       if (distanceFromInfinite < 0) {
       if (!this.didFire) {
@@ -177,7 +172,8 @@ export class InfiniteScroll {
     this.isLoading = false;
 
     if (this.position === Position.Top) {
-      /** New content is being added at the top, but the scrollTop position stays the same,
+      /**
+       * New content is being added at the top, but the scrollTop position stays the same,
        * which causes a scroll jump visually. This algorithm makes sure to prevent this.
        * (Frame 1)
        *    - complete() is called, but the UI hasn't had time to update yet.

packages/core/src/components/loading/animations/ios.enter.ts

@@ -4,14 +4,14 @@ import { Animation } from '../../../index';
 /**
  * iOS Loading Enter Animation
  */
-export default function iosEnterAnimation(Animation: Animation, baseElm: HTMLElement): Promise<Animation> {
+export default function iosEnterAnimation(Animation: Animation, baseEl: HTMLElement): Promise<Animation> {
   const baseAnimation = new Animation();
 
   const backdropAnimation = new Animation();
-  backdropAnimation.addElement(baseElm.querySelector('.loading-backdrop'));
+  backdropAnimation.addElement(baseEl.querySelector('.loading-backdrop'));
 
   const wrapperAnimation = new Animation();
-  wrapperAnimation.addElement(baseElm.querySelector('.loading-wrapper'));
+  wrapperAnimation.addElement(baseEl.querySelector('.loading-wrapper'));
 
   backdropAnimation.fromTo('opacity', 0.01, 0.3);
 
@@ -19,7 +19,7 @@ export default function iosEnterAnimation(Animation: Animation, baseElm: HTMLEle
                   .fromTo('scale', 1.1, 1);
 
   return Promise.resolve(baseAnimation
-    .addElement(baseElm)
+    .addElement(baseEl)
     .easing('ease-in-out')
     .duration(200)
     .add(backdropAnimation)

packages/core/src/components/loading/animations/ios.leave.ts

@@ -4,14 +4,14 @@ import { Animation } from '../../../index';
 /**
  * iOS Loading Leave Animation
  */
-export default function iosLeaveAnimation(Animation: Animation, baseElm: HTMLElement): Promise<Animation> {
+export default function iosLeaveAnimation(Animation: Animation, baseEl: HTMLElement): Promise<Animation> {
   const baseAnimation = new Animation();
 
   const backdropAnimation = new Animation();
-  backdropAnimation.addElement(baseElm.querySelector('.loading-backdrop'));
+  backdropAnimation.addElement(baseEl.querySelector('.loading-backdrop'));
 
   const wrapperAnimation = new Animation();
-  wrapperAnimation.addElement(baseElm.querySelector('.loading-wrapper'));
+  wrapperAnimation.addElement(baseEl.querySelector('.loading-wrapper'));
 
   backdropAnimation.fromTo('opacity', 0.3, 0);
 
@@ -20,7 +20,7 @@ export default function iosLeaveAnimation(Animation: Animation, baseElm: HTMLEle
 
 
   return Promise.resolve(baseAnimation
-    .addElement(baseElm)
+    .addElement(baseEl)
     .easing('ease-in-out')
     .duration(200)
     .add(backdropAnimation)

packages/core/src/components/loading/animations/md.enter.ts

@@ -3,21 +3,21 @@ import { Animation } from '../../../index';
 /**
  * Md Loading Enter Animation
  */
-export default function mdEnterAnimation(Animation: Animation, baseElm: HTMLElement): Promise<Animation> {
+export default function mdEnterAnimation(Animation: Animation, baseEl: HTMLElement): Promise<Animation> {
   const baseAnimation = new Animation();
 
   const backdropAnimation = new Animation();
-  backdropAnimation.addElement(baseElm.querySelector('.loading-backdrop'));
+  backdropAnimation.addElement(baseEl.querySelector('.loading-backdrop'));
 
   const wrapperAnimation = new Animation();
-  wrapperAnimation.addElement(baseElm.querySelector('.loading-wrapper'));
+  wrapperAnimation.addElement(baseEl.querySelector('.loading-wrapper'));
 
   backdropAnimation.fromTo('opacity', 0.01, 0.5);
 
   wrapperAnimation.fromTo('opacity', 0.01, 1).fromTo('scale', 1.1, 1);
 
   return Promise.resolve(baseAnimation
-    .addElement(baseElm)
+    .addElement(baseEl)
     .easing('ease-in-out')
     .duration(200)
     .add(backdropAnimation)

packages/core/src/components/loading/animations/md.leave.ts

@@ -3,21 +3,21 @@ import { Animation } from '../../../index';
 /**
  * Md Loading Leave Animation
  */
-export default function mdLeaveAnimation(Animation: Animation, baseElm: HTMLElement): Promise<Animation> {
+export default function mdLeaveAnimation(Animation: Animation, baseEl: HTMLElement): Promise<Animation> {
   const baseAnimation = new Animation();
 
   const backdropAnimation = new Animation();
-  backdropAnimation.addElement(baseElm.querySelector('.loading-backdrop'));
+  backdropAnimation.addElement(baseEl.querySelector('.loading-backdrop'));
 
   const wrapperAnimation = new Animation();
-  wrapperAnimation.addElement(baseElm.querySelector('.loading-wrapper'));
+  wrapperAnimation.addElement(baseEl.querySelector('.loading-wrapper'));
 
   backdropAnimation.fromTo('opacity', 0.5, 0);
 
   wrapperAnimation.fromTo('opacity', 0.99, 0).fromTo('scale', 1, 0.9);
 
   return Promise.resolve(baseAnimation
-    .addElement(baseElm)
+    .addElement(baseEl)
     .easing('ease-in-out')
     .duration(200)
     .add(backdropAnimation)

packages/core/src/components/modal/animations/ios.enter.ts

@@ -4,14 +4,14 @@ import { Animation } from '../../../index';
 /**
  * iOS Modal Enter Animation
  */
-export default function iosEnterAnimation(Animation: Animation, baseElm: HTMLElement): Promise<Animation> {
+export default function iosEnterAnimation(Animation: Animation, baseEl: HTMLElement): Promise<Animation> {
   const baseAnimation = new Animation();
 
   const backdropAnimation = new Animation();
-  backdropAnimation.addElement(baseElm.querySelector('.modal-backdrop'));
+  backdropAnimation.addElement(baseEl.querySelector('.modal-backdrop'));
 
   const wrapperAnimation = new Animation();
-  wrapperAnimation.addElement(baseElm.querySelector('.modal-wrapper'));
+  wrapperAnimation.addElement(baseEl.querySelector('.modal-wrapper'));
 
   wrapperAnimation.beforeStyles({ 'opacity': 1 })
                   .fromTo('translateY', '100%', '0%');
@@ -19,7 +19,7 @@ export default function iosEnterAnimation(Animation: Animation, baseElm: HTMLEle
   backdropAnimation.fromTo('opacity', 0.01, 0.4);
 
   return Promise.resolve(baseAnimation
-    .addElement(baseElm)
+    .addElement(baseEl)
     .easing('cubic-bezier(0.36,0.66,0.04,1)')
     .duration(400)
     .beforeAddClass('show-modal')
@@ -30,7 +30,7 @@ export default function iosEnterAnimation(Animation: Animation, baseElm: HTMLEle
 /**
  * Animations for modals
  */
-// export function modalSlideIn(rootElm: HTMLElement) {
+// export function modalSlideIn(rootEl: HTMLElement) {
 
 // }
 

packages/core/src/components/modal/animations/ios.leave.ts

@@ -4,24 +4,24 @@ import { Animation } from '../../../index';
 /**
  * iOS Modal Leave Animation
  */
-export default function iosLeaveAnimation(Animation: Animation, baseElm: HTMLElement): Promise<Animation> {
+export default function iosLeaveAnimation(Animation: Animation, baseEl: HTMLElement): Promise<Animation> {
   const baseAnimation = new Animation();
 
   const backdropAnimation = new Animation();
-  backdropAnimation.addElement(baseElm.querySelector('.modal-backdrop'));
+  backdropAnimation.addElement(baseEl.querySelector('.modal-backdrop'));
 
   const wrapperAnimation = new Animation();
-  const wrapperElm = baseElm.querySelector('.modal-wrapper');
+  const wrapperEl = baseEl.querySelector('.modal-wrapper');
-  wrapperAnimation.addElement(wrapperElm);
+  wrapperAnimation.addElement(wrapperEl);
-  const wrapperElmRect = wrapperElm.getBoundingClientRect();
+  const wrapperElRect = wrapperEl.getBoundingClientRect();
 
   wrapperAnimation.beforeStyles({ 'opacity': 1 })
-                  .fromTo('translateY', '0%', `${window.innerHeight - wrapperElmRect.top}px`);
+                  .fromTo('translateY', '0%', `${window.innerHeight - wrapperElRect.top}px`);
 
   backdropAnimation.fromTo('opacity', 0.4, 0.0);
 
   return Promise.resolve(baseAnimation
-    .addElement(baseElm)
+    .addElement(baseEl)
     .easing('ease-out')
     .duration(250)
     .add(backdropAnimation)

packages/core/src/components/modal/animations/md.enter.ts

@@ -3,14 +3,14 @@ import { Animation } from '../../../index';
 /**
  * Md Modal Enter Animation
  */
-export default function mdEnterAnimation(Animation: Animation, baseElm: HTMLElement): Promise<Animation> {
+export default function mdEnterAnimation(Animation: Animation, baseEl: HTMLElement): Promise<Animation> {
   const baseAnimation = new Animation();
 
   const backdropAnimation = new Animation();
-  backdropAnimation.addElement(baseElm.querySelector('.modal-backdrop'));
+  backdropAnimation.addElement(baseEl.querySelector('.modal-backdrop'));
 
   const wrapperAnimation = new Animation();
-  wrapperAnimation.addElement(baseElm.querySelector('.modal-wrapper'));
+  wrapperAnimation.addElement(baseEl.querySelector('.modal-wrapper'));
 
   wrapperAnimation
     .fromTo('opacity', 0.01, 1)
@@ -19,7 +19,7 @@ export default function mdEnterAnimation(Animation: Animation, baseElm: HTMLElem
   backdropAnimation.fromTo('opacity', 0.01, 0.4);
 
   return Promise.resolve(baseAnimation
-    .addElement(baseElm)
+    .addElement(baseEl)
     .easing('cubic-bezier(0.36,0.66,0.04,1)')
     .duration(280)
     .beforeAddClass('show-modal')

packages/core/src/components/modal/animations/md.leave.ts

@@ -3,15 +3,15 @@ import { Animation } from '../../../index';
 /**
  * Md Modal Leave Animation
  */
-export default function mdLeaveAnimation(Animation: Animation, baseElm: HTMLElement): Promise<Animation> {
+export default function mdLeaveAnimation(Animation: Animation, baseEl: HTMLElement): Promise<Animation> {
   const baseAnimation = new Animation();
 
   const backdropAnimation = new Animation();
-  backdropAnimation.addElement(baseElm.querySelector('.modal-backdrop'));
+  backdropAnimation.addElement(baseEl.querySelector('.modal-backdrop'));
 
   const wrapperAnimation = new Animation();
-  const wrapperElm = baseElm.querySelector('.modal-wrapper');
+  const wrapperEl = baseEl.querySelector('.modal-wrapper');
-  wrapperAnimation.addElement(wrapperElm);
+  wrapperAnimation.addElement(wrapperEl);
 
   wrapperAnimation
     .fromTo('opacity', 0.99, 0)
@@ -20,7 +20,7 @@ export default function mdLeaveAnimation(Animation: Animation, baseElm: HTMLElem
   backdropAnimation.fromTo('opacity', 0.4, 0.0);
 
   return Promise.resolve(baseAnimation
-    .addElement(baseElm)
+    .addElement(baseEl)
     .easing('cubic-bezier(0.47,0,0.745,0.715)')
     .duration(200)
     .add(backdropAnimation)

packages/core/src/components/nav/nav.tsx

@@ -871,7 +871,9 @@ export function updateNavStacks(enteringView: ViewController, leavingView: ViewC
   }).then(() => {
     // set which animation it should use if it wasn't set yet
     if (ti.requiresTransition && !ti.opts.animation) {
-      ti.opts.animation = isDef(ti.removeStart) ? (leavingView || enteringView).getTransitionName(ti.opts.direction) : (enteringView || leavingView).getTransitionName(ti.opts.direction);
+      ti.opts.animation = isDef(ti.removeStart)
+        ? (leavingView || enteringView).getTransitionName(ti.opts.direction)
+        : (enteringView || leavingView).getTransitionName(ti.opts.direction);
     }
   });
 }

packages/core/src/components/picker-column/picker-column.tsx

@@ -48,10 +48,10 @@ export class PickerColumnCmp {
 
   componentDidLoad() {
     // get the scrollable element within the column
-    const colEle = this.el.querySelector('.picker-opts');
+    const colEl = this.el.querySelector('.picker-opts');
 
     // get the height of one option
-    this.optHeight = (colEle.firstElementChild ? colEle.firstElementChild.clientHeight : 0);
+    this.optHeight = (colEl.firstElementChild ? colEl.firstElementChild.clientHeight : 0);
 
     // TODO block goback-swipe and menu-swipe
     // this.activeBlock = 'goback-swipe menu-swipe';

packages/core/src/components/picker/animations/ios.enter.ts

@@ -4,21 +4,21 @@ import { Animation } from '../../../index';
 /**
  * iOS Picker Enter Animation
  */
-export default function iosEnterAnimation(Animation: Animation, baseElm: HTMLElement): Promise<Animation> {
+export default function iosEnterAnimation(Animation: Animation, baseEl: HTMLElement): Promise<Animation> {
   const baseAnimation = new Animation();
 
   const backdropAnimation = new Animation();
-  backdropAnimation.addElement(baseElm.querySelector('.picker-backdrop'));
+  backdropAnimation.addElement(baseEl.querySelector('.picker-backdrop'));
 
   const wrapperAnimation = new Animation();
-  wrapperAnimation.addElement(baseElm.querySelector('.picker-wrapper'));
+  wrapperAnimation.addElement(baseEl.querySelector('.picker-wrapper'));
 
   backdropAnimation.fromTo('opacity', 0.01, 0.26);
 
   wrapperAnimation.fromTo('translateY', '100%', '0%');
 
   return Promise.resolve(baseAnimation
-    .addElement(baseElm)
+    .addElement(baseEl)
     .easing('cubic-bezier(.36,.66,.04,1)')
     .duration(400)
     .add(backdropAnimation)

packages/core/src/components/picker/animations/ios.leave.ts

@@ -4,21 +4,21 @@ import { Animation } from '../../../index';
 /**
  * iOS Picker Leave Animation
  */
-export default function iosLeaveAnimation(Animation: Animation, baseElm: HTMLElement): Promise<Animation> {
+export default function iosLeaveAnimation(Animation: Animation, baseEl: HTMLElement): Promise<Animation> {
   const baseAnimation = new Animation();
 
   const backdropAnimation = new Animation();
-  backdropAnimation.addElement(baseElm.querySelector('.picker-backdrop'));
+  backdropAnimation.addElement(baseEl.querySelector('.picker-backdrop'));
 
   const wrapperAnimation = new Animation();
-  wrapperAnimation.addElement(baseElm.querySelector('.picker-wrapper'));
+  wrapperAnimation.addElement(baseEl.querySelector('.picker-wrapper'));
 
   backdropAnimation.fromTo('opacity', 0.26, 0.01);
 
   wrapperAnimation.fromTo('translateY', '0%', '100%');
 
   return Promise.resolve(baseAnimation
-    .addElement(baseElm)
+    .addElement(baseEl)
     .easing('cubic-bezier(.36,.66,.04,1)')
     .duration(400)
     .add(backdropAnimation)

packages/core/src/components/popover/animations/ios.enter.ts

@@ -3,11 +3,11 @@ import { Animation } from '../../../index';
 /**
  * iOS Popover Enter Animation
  */
-export default function iosEnterAnimation(Animation: Animation, baseElm: HTMLElement, ev?: Event): Promise<Animation> {
+export default function iosEnterAnimation(Animation: Animation, baseEl: HTMLElement, ev?: Event): Promise<Animation> {
   let originY = 'top';
   let originX = 'left';
 
-  const contentEl = baseElm.querySelector('.popover-content') as HTMLElement;
+  const contentEl = baseEl.querySelector('.popover-content') as HTMLElement;
   const contentDimentions = contentEl.getBoundingClientRect();
   const contentWidth = contentDimentions.width;
   const contentHeight = contentDimentions.height;
@@ -28,7 +28,7 @@ export default function iosEnterAnimation(Animation: Animation, baseElm: HTMLEle
   const targetWidth = (targetDim && targetDim.width) || 0;
   const targetHeight = (targetDim && targetDim.height) || 0;
 
-  const arrowEl = baseElm.querySelector('.popover-arrow') as HTMLElement;
+  const arrowEl = baseEl.querySelector('.popover-arrow') as HTMLElement;
 
   const arrowDim = arrowEl.getBoundingClientRect();
   const arrowWidth = arrowDim.width;
@@ -82,7 +82,7 @@ export default function iosEnterAnimation(Animation: Animation, baseElm: HTMLEle
   ) {
     arrowCSS.top = targetTop - (arrowHeight + 1);
     popoverCSS.top = targetTop - contentHeight - (arrowHeight - 1);
-    baseElm.className = baseElm.className + ' popover-bottom';
+    baseEl.className = baseEl.className + ' popover-bottom';
     originY = 'bottom';
     // If there isn't room for it to pop up above the target cut it off
   } else if (targetTop + targetHeight + contentHeight > bodyHeight) {
@@ -116,15 +116,15 @@ export default function iosEnterAnimation(Animation: Animation, baseElm: HTMLEle
   const baseAnimation = new Animation();
 
   const backdropAnimation = new Animation();
-  backdropAnimation.addElement(baseElm.querySelector('.popover-backdrop'));
+  backdropAnimation.addElement(baseEl.querySelector('.popover-backdrop'));
   backdropAnimation.fromTo('opacity', 0.01, 0.08);
 
   const wrapperAnimation = new Animation();
-  wrapperAnimation.addElement(baseElm.querySelector('.popover-wrapper'));
+  wrapperAnimation.addElement(baseEl.querySelector('.popover-wrapper'));
   wrapperAnimation.fromTo('opacity', 0.01, 1);
 
   return Promise.resolve(baseAnimation
-    .addElement(baseElm)
+    .addElement(baseEl)
     .easing('ease')
     .duration(100)
     .add(backdropAnimation)

packages/core/src/components/popover/animations/ios.leave.ts

@@ -3,20 +3,20 @@ import { Animation } from '../../../index';
 /**
  * iOS Popover Leave Animation
  */
-export default function iosLeaveAnimation(Animation: Animation, baseElm: HTMLElement): Promise<Animation> {
+export default function iosLeaveAnimation(Animation: Animation, baseEl: HTMLElement): Promise<Animation> {
   const baseAnimation = new Animation();
 
   const backdropAnimation = new Animation();
-  backdropAnimation.addElement(baseElm.querySelector('.popover-backdrop'));
+  backdropAnimation.addElement(baseEl.querySelector('.popover-backdrop'));
 
   const wrapperAnimation = new Animation();
-  wrapperAnimation.addElement(baseElm.querySelector('.popover-wrapper'));
+  wrapperAnimation.addElement(baseEl.querySelector('.popover-wrapper'));
 
   wrapperAnimation.fromTo('opacity', 0.99, 0);
   backdropAnimation.fromTo('opacity', 0.08, 0);
 
   return Promise.resolve(baseAnimation
-    .addElement(baseElm)
+    .addElement(baseEl)
     .easing('ease')
     .duration(500)
     .add(backdropAnimation)

packages/core/src/components/popover/animations/md.enter.ts

@@ -3,11 +3,11 @@ import { Animation } from '../../../index';
 /**
  * Md Popover Enter Animation
  */
-export default function mdEnterAnimation(Animation: Animation, baseElm: HTMLElement, ev?: Event): Promise<Animation> {
+export default function mdEnterAnimation(Animation: Animation, baseEl: HTMLElement, ev?: Event): Promise<Animation> {
   let originY = 'top';
   let originX = 'left';
 
-  const contentEl = baseElm.querySelector('.popover-content') as HTMLElement;
+  const contentEl = baseEl.querySelector('.popover-content') as HTMLElement;
   const contentDimentions = contentEl.getBoundingClientRect();
   const contentWidth = contentDimentions.width;
   const contentHeight = contentDimentions.height;
@@ -56,7 +56,7 @@ export default function mdEnterAnimation(Animation: Animation, baseElm: HTMLElem
     targetTop - contentHeight > 0
   ) {
     popoverCSS.top = targetTop - contentHeight;
-    baseElm.className = baseElm.className + ' popover-bottom';
+    baseEl.className = baseEl.className + ' popover-bottom';
     originY = 'bottom';
     // If there isn't room for it to pop up above the target cut it off
   } else if (targetTop + targetHeight + contentHeight > bodyHeight) {
@@ -70,23 +70,23 @@ export default function mdEnterAnimation(Animation: Animation, baseElm: HTMLElem
   const baseAnimation = new Animation();
 
   const backdropAnimation = new Animation();
-  backdropAnimation.addElement(baseElm.querySelector('.popover-backdrop'));
+  backdropAnimation.addElement(baseEl.querySelector('.popover-backdrop'));
   backdropAnimation.fromTo('opacity', 0.01, 0.08);
 
   const wrapperAnimation = new Animation();
-  wrapperAnimation.addElement(baseElm.querySelector('.popover-wrapper'));
+  wrapperAnimation.addElement(baseEl.querySelector('.popover-wrapper'));
   wrapperAnimation.fromTo('opacity', 0.01, 1);
 
   const contentAnimation = new Animation();
-  contentAnimation.addElement(baseElm.querySelector('.popover-content'));
+  contentAnimation.addElement(baseEl.querySelector('.popover-content'));
   contentAnimation.fromTo('scale', 0.001, 1);
 
   const viewportAnimation = new Animation();
-  viewportAnimation.addElement(baseElm.querySelector('.popover-viewport'));
+  viewportAnimation.addElement(baseEl.querySelector('.popover-viewport'));
   viewportAnimation.fromTo('opacity', 0.01, 1);
 
   return Promise.resolve(baseAnimation
-    .addElement(baseElm)
+    .addElement(baseEl)
     .easing('cubic-bezier(0.36,0.66,0.04,1)')
     .duration(300)
     .add(backdropAnimation)

packages/core/src/components/popover/animations/md.leave.ts

@@ -3,20 +3,20 @@ import { Animation } from '../../../index';
 /**
  * Md Popover Leave Animation
  */
-export default function mdLeaveAnimation(Animation: Animation, baseElm: HTMLElement): Promise<Animation> {
+export default function mdLeaveAnimation(Animation: Animation, baseEl: HTMLElement): Promise<Animation> {
   const baseAnimation = new Animation();
 
   const backdropAnimation = new Animation();
-  backdropAnimation.addElement(baseElm.querySelector('.popover-backdrop'));
+  backdropAnimation.addElement(baseEl.querySelector('.popover-backdrop'));
 
   const wrapperAnimation = new Animation();
-  wrapperAnimation.addElement(baseElm.querySelector('.popover-wrapper'));
+  wrapperAnimation.addElement(baseEl.querySelector('.popover-wrapper'));
 
   wrapperAnimation.fromTo('opacity', 0.99, 0);
   backdropAnimation.fromTo('opacity', 0.08, 0);
 
   return Promise.resolve(baseAnimation
-    .addElement(baseElm)
+    .addElement(baseEl)
     .easing('ease')
     .duration(500)
     .add(backdropAnimation)

packages/core/src/components/popover/popover.tsx

@@ -115,7 +115,7 @@ export class Popover {
     return this.delegate.attachViewToDom(userComponentParent, this.component, this.data, cssClasses)
       .then((mountingData) => {
         this.usersComponentElement = mountingData.element;
-        return domControllerAsync(this.dom.raf, () => { })
+        return domControllerAsync(this.dom.raf)
         .then(() => this.animationCtrl.create(animationBuilder, this.el, this.ev));
       })
       .then((animation) => {

packages/core/src/components/range/range.tsx

@@ -337,7 +337,7 @@ export class Range implements BaseInputComponent {
   keyChng(ev: RangeEvent) {
     const step = this.step;
     if (ev.detail.knob === 'knobB') {
-      if (!!ev.detail.isIncrease) {
+      if (ev.detail.isIncrease) {
         this.valB += step;
       } else {
         this.valB -= step;
@@ -345,7 +345,7 @@ export class Range implements BaseInputComponent {
       this.valB = clamp(this.min, this.valB, this.max);
       this.ratioB = this.valueToRatio(this.valB);
     } else {
-      if (!!ev.detail.isIncrease) {
+      if (ev.detail.isIncrease) {
         this.valA += step;
       } else {
         this.valA -= step;

packages/core/src/components/route/test/router-utils.spec.ts

@@ -234,8 +234,8 @@ describe('breadthFirstSearch', () => {
   });
 });
 
-describe('readNavState', () => {
+// describe('readNavState', () => {
-  it('should read state', () => {
+//   it('should read state', () => {
 
-  });
+//   });
-});
+// });

packages/core/src/components/searchbar/searchbar.tsx

@@ -167,13 +167,13 @@ export class Searchbar {
   }
 
   inputUpdated() {
-    // const inputEle = this.el.querySelector('.searchbar-input') as HTMLInputElement;
+    // const inputEl = this.el.querySelector('.searchbar-input') as HTMLInputElment;
 
     // It is important not to re-assign the value if it is the same, because,
     // otherwise, the caret is moved to the end of the input
-    // if (inputEle && inputEle.value !== this.value) {
+    // if (inputEl && inputEl.value !== this.value) {
-    //   // inputEle.value = this.value;
+    //   // inputEl.value = this.value;
-    //   this.value = inputEle.value;
+    //   this.value = inputEl.value;
     // }
 
     this.positionElements();
@@ -184,12 +184,12 @@ export class Searchbar {
    * based on whether there is a value in the searchbar or not.
    */
   inputBlurred() {
-    const inputEle = this.el.querySelector('.searchbar-input') as HTMLInputElement;
+    const inputEl = this.el.querySelector('.searchbar-input') as HTMLInputElement;
 
     // _shouldBlur determines if it should blur
     // if we are clearing the input we still want to stay focused in the input
     if (this._shouldBlur === false) {
-      inputEle.focus();
+      inputEl.focus();
       this._shouldBlur = true;
       this.ionBlur.emit({this: this});
       this.inputUpdated();
@@ -240,12 +240,12 @@ export class Searchbar {
    */
   positionPlaceholder() {
     const isRTL = document.dir === 'rtl';
-    const inputEle = this.el.querySelector('.searchbar-input') as HTMLInputElement;
+    const inputEl = this.el.querySelector('.searchbar-input') as HTMLInputElement;
-    const iconEle = this.el.querySelector('.searchbar-search-icon') as HTMLElement;
+    const iconEl = this.el.querySelector('.searchbar-search-icon') as HTMLElement;
 
     if (this._shouldAlignLeft) {
-      inputEle.removeAttribute('style');
+      inputEl.removeAttribute('style');
-      iconEle.removeAttribute('style');
+      iconEl.removeAttribute('style');
 
     } else {
       // Create a dummy span to get the placeholder width
@@ -265,11 +265,11 @@ export class Searchbar {
 
       // Set the input padding start and icon margin start
       if (isRTL) {
-        inputEle.style.paddingRight = inputLeft;
+        inputEl.style.paddingRight = inputLeft;
-        iconEle.style.marginRight = iconLeft;
+        iconEl.style.marginRight = iconLeft;
       } else {
-        inputEle.style.paddingLeft = inputLeft;
+        inputEl.style.paddingLeft = inputLeft;
-        iconEle.style.marginLeft = iconLeft;
+        iconEl.style.marginLeft = iconLeft;
       }
     }
   }

packages/core/src/components/spinner/spinner.tsx

@@ -91,17 +91,14 @@ export class Spinner {
 
     const svgs: any[] = [];
 
-    let i = 0;
-    let l = 0;
-
     if (spinner.circles) {
-      for (i = 0, l = spinner.circles; i < l; i++) {
+      for (let i = 0; i < spinner.circles; i++) {
-        svgs.push(buildCircle(spinner, duration, i, l));
+        svgs.push(buildCircle(spinner, duration, i, spinner.circles));
       }
 
     } else if (spinner.lines) {
-      for (i = 0, l = spinner.lines; i < l; i++) {
+      for (let i = 0; i < spinner.lines; i++) {
-        svgs.push(buildLine(spinner, duration, i, l));
+        svgs.push(buildLine(spinner, duration, i, spinner.lines));
       }
     }
 

packages/core/src/components/toast/animations/ios.enter.ts

@@ -3,11 +3,11 @@ import { Animation } from '../../../index';
 /**
  * iOS Toast Enter Animation
  */
-export default function iosEnterAnimation(Animation: Animation, baseElm: HTMLElement, position: string): Promise<Animation> {
+export default function iosEnterAnimation(Animation: Animation, baseEl: HTMLElement, position: string): Promise<Animation> {
   const baseAnimation = new Animation();
 
   const wrapperAnimation = new Animation();
-  const wrapperEle = baseElm.querySelector('.toast-wrapper') as HTMLElement;
+  const wrapperEle = baseEl.querySelector('.toast-wrapper') as HTMLElement;
   wrapperAnimation.addElement(wrapperEle);
 
   switch (position) {
@@ -16,7 +16,7 @@ export default function iosEnterAnimation(Animation: Animation, baseElm: HTMLEle
       break;
     case 'middle':
       const topPosition = Math.floor(
-        baseElm.clientHeight / 2 - wrapperEle.clientHeight / 2
+        baseEl.clientHeight / 2 - wrapperEle.clientHeight / 2
       );
       wrapperEle.style.top = `${topPosition}px`;
       wrapperAnimation.fromTo('opacity', 0.01, 1);
@@ -26,7 +26,7 @@ export default function iosEnterAnimation(Animation: Animation, baseElm: HTMLEle
       break;
   }
   return Promise.resolve(baseAnimation
-    .addElement(baseElm)
+    .addElement(baseEl)
     .easing('cubic-bezier(.155,1.105,.295,1.12)')
     .duration(400)
     .add(wrapperAnimation));

packages/core/src/components/toast/animations/ios.leave.ts

@@ -3,11 +3,11 @@ import { Animation } from '../../../index';
 /**
  * iOS Toast Leave Animation
  */
-export default function iosLeaveAnimation(Animation: Animation, baseElm: HTMLElement, position: string): Promise<Animation> {
+export default function iosLeaveAnimation(Animation: Animation, baseEl: HTMLElement, position: string): Promise<Animation> {
   const baseAnimation = new Animation();
 
   const wrapperAnimation = new Animation();
-  const wrapperEle = baseElm.querySelector('.toast-wrapper') as HTMLElement;
+  const wrapperEle = baseEl.querySelector('.toast-wrapper') as HTMLElement;
   wrapperAnimation.addElement(wrapperEle);
   switch (position) {
     case 'top':
@@ -21,7 +21,7 @@ export default function iosLeaveAnimation(Animation: Animation, baseElm: HTMLEle
       break;
   }
   return Promise.resolve(baseAnimation
-    .addElement(baseElm)
+    .addElement(baseEl)
     .easing('cubic-bezier(.36,.66,.04,1)')
     .duration(300)
     .add(wrapperAnimation));

packages/core/src/components/toast/animations/md.enter.ts

@@ -3,11 +3,11 @@ import { Animation } from '../../../index';
 /**
  * MD Toast Enter Animation
  */
-export default function mdEnterAnimation(Animation: Animation, baseElm: HTMLElement, position: string): Promise<Animation> {
+export default function mdEnterAnimation(Animation: Animation, baseEl: HTMLElement, position: string): Promise<Animation> {
   const baseAnimation = new Animation();
 
   const wrapperAnimation = new Animation();
-  const wrapperEle = baseElm.querySelector('.toast-wrapper') as HTMLElement;
+  const wrapperEle = baseEl.querySelector('.toast-wrapper') as HTMLElement;
   wrapperAnimation.addElement(wrapperEle);
 
   switch (position) {
@@ -16,7 +16,7 @@ export default function mdEnterAnimation(Animation: Animation, baseElm: HTMLElem
       break;
     case 'middle':
       const topPosition = Math.floor(
-        baseElm.clientHeight / 2 - wrapperEle.clientHeight / 2
+        baseEl.clientHeight / 2 - wrapperEle.clientHeight / 2
       );
       wrapperEle.style.top = `${topPosition}px`;
       wrapperAnimation.fromTo('opacity', 0.01, 1);
@@ -26,7 +26,7 @@ export default function mdEnterAnimation(Animation: Animation, baseElm: HTMLElem
       break;
   }
   return Promise.resolve(baseAnimation
-    .addElement(baseElm)
+    .addElement(baseEl)
     .easing('cubic-bezier(.36,.66,.04,1)')
     .duration(400)
     .add(wrapperAnimation));

packages/core/src/components/toast/animations/md.leave.ts

@@ -3,11 +3,11 @@ import { Animation } from '../../../index';
 /**
  * md Toast Leave Animation
  */
-export default function mdLeaveAnimation(Animation: Animation, baseElm: HTMLElement, position: string): Promise<Animation> {
+export default function mdLeaveAnimation(Animation: Animation, baseEl: HTMLElement, position: string): Promise<Animation> {
   const baseAnimation = new Animation();
 
   const wrapperAnimation = new Animation();
-  const wrapperEle = baseElm.querySelector('.toast-wrapper') as HTMLElement;
+  const wrapperEle = baseEl.querySelector('.toast-wrapper') as HTMLElement;
   wrapperAnimation.addElement(wrapperEle);
 
   switch (position) {
@@ -22,7 +22,7 @@ export default function mdLeaveAnimation(Animation: Animation, baseElm: HTMLElem
       break;
   }
   return Promise.resolve(baseAnimation
-    .addElement(baseElm)
+    .addElement(baseEl)
     .easing('cubic-bezier(.36,.66,.04,1)')
     .duration(300)
     .add(wrapperAnimation));

packages/core/src/components/toast/toast.tsx

@@ -180,9 +180,10 @@ export class Toast {
   }
 
   render() {
-    let userCssClass = 'toast-content';
     if (this.cssClass) {
-      userCssClass += ' ' + this.cssClass;
+      this.cssClass.split(' ').forEach(cssClass => {
+        if (cssClass.trim() !== '') this.el.classList.add(cssClass);
+      });
     }
 
     return (

packages/core/src/global/test/dom-controller.spec.ts

@@ -1,4 +1,4 @@
-import { DomController, createDomControllerClient } from '../dom-controller';
+// import { DomController, createDomControllerClient } from '../dom-controller';
 
 describe('DomController', () => {
   it('should schedule reads then writes', () => {
@@ -25,18 +25,18 @@ describe('DomController', () => {
     // expect(stack).toEqual(['r1', 'r2', 'r3', 'w1', 'w2', 'w3']);
   });
 
-  let win: any;
+  // let win: any;
-  let dom: DomController;
+  // let dom: DomController;
-  beforeEach(() => {
+  // beforeEach(() => {
-    win = {
+  //   win = {
-      requestAnimationFrame: (cb: any) => {
+  //     requestAnimationFrame: (cb: any) => {
-        this.cb = cb;
+  //       this.cb = cb;
-      },
+  //     },
-      doRAF: (time: number) => {
+  //     doRAF: (time: number) => {
-        this.cb(time);
+  //       this.cb(time);
-      }
+  //     }
-    } as any as Window;
+  //   } as any as Window;
-    const now = () => 1;
+  //   const now = () => 1;
-    dom = createDomControllerClient(win, now, false);
+  //   dom = createDomControllerClient(win, now, false);
-  });
+  // });
 });

packages/core/src/utils/helpers.ts

@@ -53,8 +53,6 @@ export function toDashCase(str: string) {
   return str.replace(/([A-Z])/g, (g) => '-' + g[0].toLowerCase());
 }
 
-export function noop() {}
-
 export function pointerCoordX(ev: any): number {
   // get X coordinates for either a mouse click
   // or a touch depending on the given event
@@ -107,33 +105,33 @@ export function pointerCoordY(ev: any): number {
 
 export type ElementRef = 'child' | 'parent' | 'body' | 'document' | 'window';
 
-export function getElementReference(elm: any, ref: ElementRef) {
+export function getElementReference(el: any, ref: ElementRef) {
   if (ref === 'child') {
-    return elm.firstElementChild;
+    return el.firstElementChild;
   }
   if (ref === 'parent') {
-    return getParentElement(elm) || elm;
+    return getParentElement(el) || el;
   }
   if (ref === 'body') {
-    return elm.ownerDocument.body;
+    return el.ownerDocument.body;
   }
   if (ref === 'document') {
-    return elm.ownerDocument;
+    return el.ownerDocument;
   }
   if (ref === 'window') {
-    return elm.ownerDocument.defaultView;
+    return el.ownerDocument.defaultView;
   }
-  return elm;
+  return el;
 }
 
-export function getParentElement(elm: any) {
+export function getParentElement(el: any) {
-  if (elm.parentElement ) {
+  if (el.parentElement ) {
     // normal element with a parent element
-    return elm.parentElement;
+    return el.parentElement;
   }
-  if (elm.parentNode && elm.parentNode.host) {
+  if (el.parentNode && el.parentNode.host) {
     // shadow dom's document fragment
-    return elm.parentNode.host;
+    return el.parentNode.host;
   }
   return null;
 }
@@ -150,12 +148,12 @@ export function getPageElement(el: HTMLElement) {
   return getParentElement(el);
 }
 
-export function applyStyles(elm: HTMLElement, styles: {[styleProp: string]: string|number}) {
+export function applyStyles(el: HTMLElement, styles: {[styleProp: string]: string|number}) {
   const styleProps = Object.keys(styles);
 
-  if (elm) {
+  if (el) {
     for (let i = 0; i < styleProps.length; i++) {
-      (elm.style as any)[styleProps[i]] = styles[styleProps[i]];
+      (el.style as any)[styleProps[i]] = styles[styleProps[i]];
     }
   }
 }

packages/core/tslint.json

@@ -1,3 +1,8 @@
 {
-  "extends": "tslint-ionic-rules"
+  "extends": "tslint-ionic-rules",
+  "rules": {
+    "no-conditional-assignment": false,
+    "no-unnecessary-type-assertion": false,
+    "prefer-for-of": false
+  }
 }