chore(): Updated import references and included utils.

packages/ionic/package.json

@@ -10,6 +10,9 @@
     "type": "git",
     "url": "git+https://github.com/ionic-team/ionic.git"
   },
+  "dependencies": {
+    "@stencil/core": "^0.0.1"
+  },
   "author": "Ionic Team",
   "license": "MIT",
   "bugs": {

packages/ionic/src/components/app/app.tsx

@@ -1,4 +1,4 @@
-import { Component, h } from '../index';
+import { Component, h } from '@stencil/core';
 
 
 @Component({

packages/ionic/src/components/avatar/avatar.tsx

@@ -1,4 +1,4 @@
-import { Component, h } from '../index';
+import { Component, h } from '@stencil/core';
 
 
 /**

packages/ionic/src/components/badge/badge.tsx

@@ -1,4 +1,4 @@
-import { Component, h } from '../index';
+import { Component, h } from '@stencil/core';
 
 @Component({
   tag: 'ion-badge',

packages/ionic/src/components/button/button.tsx

@@ -1,5 +1,4 @@
-import { Component, h, Prop } from '../index';
+import { Component, h, Prop, CssClassObject } from '@stencil/core';
-import { CssClassObject } from '../../util/interfaces';
 
 /**
   * @name Button

packages/ionic/src/components/buttons/buttons.tsx

@@ -1,4 +1,4 @@
-import { Component, h } from '../index';
+import { Component, h } from '@stencil/core';
 
 
 @Component({

packages/ionic/src/components/card-content/card-content.tsx

@@ -1,4 +1,4 @@
-import { Component, h } from '../index';
+import { Component, h } from '@stencil/core';
 
 @Component({
   tag: 'ion-card-content',

packages/ionic/src/components/card-header/card-header.tsx

@@ -1,4 +1,4 @@
-import { Component, h } from '../index';
+import { Component, h } from '@stencil/core';
 
 
 @Component({

packages/ionic/src/components/card-title/card-title.tsx

@@ -1,4 +1,4 @@
-import { Component, h } from '../index';
+import { Component, h } from '@stencil/core';
 
 
 @Component({

packages/ionic/src/components/card/card.tsx

@@ -1,4 +1,4 @@
-import { Component, h } from '../index';
+import { Component, h } from '@stencil/core';
 
 @Component({
   tag: 'ion-card',

packages/ionic/src/components/content/content.tsx

@@ -1,8 +1,8 @@
-import { Component, h, Ionic, Prop } from '../index';
+import { Component, h, Ionic, Prop } from '@stencil/core';
-import { createThemedClasses } from '../../util/theme';
+import { createThemedClasses } from '../../utils/theme';
-import { getParentElement } from '../../util/helpers';
+import { getParentElement } from '../../utils/helpers';
 import { Scroll } from '../scroll/scroll-interface';
-import { ScrollDetail } from '../../util/interfaces';
+import { ScrollDetail } from '../../utils/interfaces';
 
 
 @Component({

packages/ionic/src/components/core-hn/comments-list.tsx

@@ -1,4 +1,4 @@
-import { Component, h, Prop } from '../index';
+import { Component, h, Prop } from '@stencil/core';
 
 
 @Component({

packages/ionic/src/components/core-hn/comments-page.tsx

@@ -1,4 +1,5 @@
-import { Component, h, Ionic, Prop } from '../index';
+import { Component, h, Prop } from '@stencil/core';
+import { Ionic } from '../../utils/interfaces';
 
 
 @Component({

packages/ionic/src/components/core-hn/container.tsx

@@ -1,4 +1,5 @@
-import { Component, h, Ionic, State } from '../index';
+import { Component, h, State } from '@stencil/core';
+import { Ionic } from '../../utils/interfaces';
 
 
 @Component({

packages/ionic/src/components/core-hn/news-list.tsx

@@ -1,4 +1,5 @@
-import { Component, h, Ionic, Prop, State } from '../index';
+import { Component, h, Prop, State } from '@stencil/core';
+import { Ionic } from '../../utils/interfaces';
 
 
 @Component({

packages/ionic/src/components/fiber-demo/app.tsx

@@ -1,5 +1,4 @@
-import { Component, Prop, h } from '../index';
+import { Component, Prop, h, VNodeData } from '@stencil/core';
-import { VNodeData } from '../../util/interfaces';
 
 @Component({
   tag: 'fiber-demo'

packages/ionic/src/components/fiber-demo/dot.tsx

@@ -1,5 +1,5 @@
-import { Component, Prop, h, State } from '../index';
+import { Component, Prop, h, State } from '@stencil/core';
-import { VNodeData } from '../../util/interfaces';
+import { VNodeData } from '../../utils/interfaces';
 
 @Component({
   tag: 'fiber-dot'

packages/ionic/src/components/fiber-demo/triangle.tsx

@@ -1,4 +1,4 @@
-import { Component, Prop, h } from '../index';
+import { Component, Prop, h } from '@stencil/core';
 
 var targetSize = 25;
 

packages/ionic/src/components/footer/footer.tsx

@@ -1,4 +1,4 @@
-import { Component, h } from '../index';
+import { Component, h } from '@stencil/core';
 
 
 @Component({

packages/ionic/src/components/gesture/gesture.ts

@@ -1,7 +1,8 @@
-import { applyStyles, getElementReference, pointerCoordX, pointerCoordY } from '../../util/helpers';
 import { BlockerDelegate } from './gesture-controller';
-import { Component, Ionic, Listen, Prop, Watch } from '../index';
+import { Component, Listen, Prop, Watch } from '@stencil/core';
-import { GestureCallback, GestureDetail, GlobalNamespace } from '../../util/interfaces';
+import { Ionic } from '../../utils/interfaces';
+import { GestureCallback, GestureDetail, GlobalNamespace } from '../../utils/interfaces';
+import { applyStyles, getElementReference, pointerCoordX, pointerCoordY } from '../../utils/helpers';
 import { GestureController, GestureDelegate, BLOCK_ALL } from './gesture-controller';
 import { PanRecognizer } from './recognizers';
 

packages/ionic/src/components/header/header.tsx

@@ -1,4 +1,4 @@
-import { Component, h } from '../index';
+import { Component, h } from '@stencil/core';
 
 
 @Component({

packages/ionic/src/components/icon/icon.tsx

@@ -1,5 +1,6 @@
-import { Component, h, Ionic, Prop, State } from '../index';
+import { Component, h, Prop, State, VNodeData } from '@stencil/core';
-import { CssClassObject, VNodeData } from '../../util/interfaces';
+import { Ionic } from '../../utils/interfaces';
+import { CssClassObject } from '../../utils/interfaces';
 
 @Component({
   tag: 'ion-icon',

packages/ionic/src/components/index.ts

@@ -1,19 +0,0 @@
-
-import * as interfaces from '../util/interfaces';
-
-
-export declare const Component: interfaces.ComponentDecorator;
-
-export declare const h: interfaces.Hyperscript;
-
-export declare const Ionic: interfaces.Ionic;
-
-export declare const Listen: interfaces.ListenDecorator;
-
-export declare const Method: interfaces.MethodDecorator;
-
-export declare const Prop: interfaces.PropDecorator;
-
-export declare const State: interfaces.StateDecorator;
-
-export declare const Watch: interfaces.WatchDecorator;

packages/ionic/src/components/item-divider/item-divider.tsx

@@ -1,4 +1,4 @@
-import { Component, h } from '../index';
+import { Component, h } from '@stencil/core';
 
 
 @Component({

packages/ionic/src/components/item/item.tsx

@@ -1,6 +1,6 @@
-import { Component, Prop, h, Listen } from '../index';
+import { Component, Prop, h, Listen } from '@stencil/core';
-import { CssClassObject } from '../../util/interfaces';
+import { CssClassObject } from '../../utils/interfaces';
-import { createThemedClasses } from '../../util/theme';
+import { createThemedClasses } from '../../utils/theme';
 
 
 @Component({

packages/ionic/src/components/label/label.tsx

@@ -1,4 +1,4 @@
-import { Component, h } from '../index';
+import { Component, h } from '@stencil/core';
 
 @Component({
   tag: 'ion-label',

packages/ionic/src/components/list-header/list-header.tsx

@@ -1,4 +1,4 @@
-import { Component, h } from '../index';
+import { Component, h } from '@stencil/core';
 
 @Component({
   tag: 'ion-list-header',

packages/ionic/src/components/list/list.tsx

@@ -1,4 +1,4 @@
-import { Component, h } from '../index';
+import { Component, h } from '@stencil/core';
 
 @Component({
   tag: 'ion-list',

packages/ionic/src/components/loading-controller/loading-controller.ts

@@ -1,5 +1,6 @@
-import { Component, Ionic, Listen } from '../index';
+import { Component, Listen } from '@stencil/core';
-import { GlobalNamespace, LoadingEvent, LoadingOptions, Loading, IonicControllerApi } from '../../util/interfaces';
+import { Ionic } from '../../utils/interfaces';
+import { GlobalNamespace, LoadingEvent, LoadingOptions, Loading, IonicControllerApi } from '../../utils/interfaces';
 
 
 @Component({

packages/ionic/src/components/loading/loading.tsx

@@ -1,5 +1,6 @@
-import { Component, h, Ionic, Listen, Prop, State } from '../index';
+import { Component, h, Listen, Prop, State } from '@stencil/core';
-import { AnimationBuilder, Animation, Loading as ILoading, LoadingEvent } from '../../util/interfaces';
+import { Ionic } from '../../utils/interfaces';
+import { AnimationBuilder, Animation, Loading as ILoading, LoadingEvent } from '../../utils/interfaces';
 
 import iOSEnterAnimation from './animations/ios.enter';
 import iOSLeaveAnimation from './animations/ios.leave';

packages/ionic/src/components/menu/menu-types.ts

@@ -1,5 +1,5 @@
-import { Animation, Menu, MenuType as IMenuType } from '../../util/interfaces';
+import { Animation, Menu, MenuType as IMenuType } from '../../utils/interfaces';
-import { Ionic } from '../index';
+import { Ionic } from '../../utils/interfaces';
 
 
 /**

packages/ionic/src/components/menu/menu.tsx

@@ -1,5 +1,6 @@
-import { Component, h, Ionic, Prop, Watch } from '../index';
+import { Component, h, Prop, Watch } from '@stencil/core';
-import { VNodeData, GlobalNamespace, Menu as IMenu } from '../../util/interfaces';
+import { Ionic } from '../../utils/interfaces';
+import { VNodeData, GlobalNamespace, Menu as IMenu } from '../../utils/interfaces';
 import { MenuController } from './menu-controller';
 import { MenuType } from './menu-types';
 

packages/ionic/src/components/modal-controller/modal-controller.ts

@@ -1,5 +1,6 @@
-import { Component, Ionic, Listen } from '../index';
+import { Component, Listen } from '@stencil/core';
-import { GlobalNamespace, ModalEvent, ModalOptions, Modal, IonicControllerApi } from '../../util/interfaces';
+import { Ionic } from '../../utils/interfaces';
+import { GlobalNamespace, ModalEvent, ModalOptions, Modal, IonicControllerApi } from '../../utils/interfaces';
 
 
 @Component({

packages/ionic/src/components/modal/modal.tsx

@@ -1,6 +1,7 @@
-import { Component, h, Ionic, Listen, Prop } from '../index';
+import { Component, h, Listen, Prop } from '@stencil/core';
-import { AnimationBuilder, Animation, Modal as IModal, ModalEvent } from '../../util/interfaces';
+import { Ionic } from '../../utils/interfaces';
-import { createThemedClasses } from '../../util/theme';
+import { AnimationBuilder, Animation, Modal as IModal, ModalEvent } from '../../utils/interfaces';
+import { createThemedClasses } from '../../utils/theme';
 
 import iOSEnterAnimation from './animations/ios.enter';
 import iOSLeaveAnimation from './animations/ios.leave';

packages/ionic/src/components/page/page.tsx

@@ -1,4 +1,4 @@
-import { Component, h } from '../index';
+import { Component, h } from '@stencil/core';
 
 
 @Component({

packages/ionic/src/components/scroll/scroll.ts

@@ -1,6 +1,7 @@
-import { Component, Listen, Ionic, Prop } from '../index';
+import { Component, Listen, Prop } from '@stencil/core';
+import { Ionic } from '../../utils/interfaces';
 import { GestureController, GestureDelegate } from '../gesture/gesture-controller';
-import { GlobalNamespace, ScrollCallback, ScrollDetail } from '../../util/interfaces';
+import { GlobalNamespace, ScrollCallback, ScrollDetail } from '../../utils/interfaces';
 import { Scroll as IScroll } from './scroll-interface';
 
 

packages/ionic/src/components/skeleton-text/skeleton-text.tsx

@@ -1,4 +1,4 @@
-import { Component, h, Prop } from '../index';
+import { Component, h, Prop } from '@stencil/core';
 
 
 @Component({

packages/ionic/src/components/slides/slide.tsx

@@ -1,5 +1,4 @@
-import { Component, h } from '../index';
+import { Component, h, VNodeData } from '@stencil/core';
-import { VNodeData } from '../../util/interfaces';
 
  /**
   * @name Slide

packages/ionic/src/components/slides/slides.tsx

@@ -1,4 +1,5 @@
-import { Component, h, Ionic, Prop } from '../index';
+import { Component, h, Prop } from '@stencil/core';
+import { Ionic } from '../../utils/interfaces';
 import { Swiper } from '../../vendor/swiper';
 
 /**

packages/ionic/src/components/spinner/spinner.tsx

@@ -1,7 +1,7 @@
-import { Component, h, Ionic, Prop } from '../index';
+import { Component, h, Prop, VNodeData } from '@stencil/core';
+import { Ionic } from '../../utils/interfaces';
 import { SPINNERS, SpinnerConfig } from './spinner-configs';
-import { createThemedClasses } from '../../util/theme';
+import { createThemedClasses } from '../../utils/theme';
-import { VNodeData } from '../../util/interfaces';
 
 
 @Component({

packages/ionic/src/components/thumbnail/thumbnail.tsx

@@ -1,4 +1,4 @@
-import { Component, h } from '../index';
+import { Component, h } from '@stencil/core';
 
 
 @Component({

packages/ionic/src/components/title/title.tsx

@@ -1,5 +1,5 @@
-import { Component, Prop, h } from '../index';
+import { Component, Prop, h } from '@stencil/core';
-import { createThemedClasses } from '../../util/theme';
+import { createThemedClasses } from '../../utils/theme';
 
 /**
  * @name Title

packages/ionic/src/components/toggle/toggle.tsx

@@ -1,5 +1,6 @@
-import { BooleanInputComponent, GestureDetail, VNodeData } from '../../util/interfaces';
+import { Component, h, Listen, Prop, Watch, VNodeData } from '@stencil/core';
-import { Component, h, Ionic, Listen, Prop, Watch } from '../index';
+import { Ionic } from '../../utils/interfaces';
+import { BooleanInputComponent, GestureDetail } from '../../utils/interfaces';
 
 
 @Component({

packages/ionic/src/components/toolbar/navbar.tsx

@@ -1,6 +1,6 @@
-import { Component, h, Ionic, Prop } from '../index';
+import { Component, h, Prop, VNodeData } from '@stencil/core';
-import { createThemedClasses } from '../../util/theme';
+import { Ionic } from '../../utils/interfaces';
-import { VNodeData } from '../../util/interfaces';
+import { createThemedClasses } from '../../utils/theme';
 
 
 /**

packages/ionic/src/components/toolbar/toolbar.tsx

@@ -1,6 +1,5 @@
-import { Component, h, Ionic } from '../index';
+import { Component, h, Ionic, VNodeData } from '@stencil/core';
-import { createThemedClasses } from '../../util/theme';
+import { createThemedClasses } from '../../utils/theme';
-import { VNodeData } from '../../util/interfaces';
 
 
 /**

packages/ionic/src/utils/helpers.ts

@@ -0,0 +1,95 @@
+
+export function isDef(v: any): boolean { return v !== undefined && v !== null; }
+
+export function isUndef(v: any): boolean { return v === undefined || v === null; }
+
+export function isArray(v: any): v is Array<any> { return Array.isArray(v); }
+
+export function isObject(v: any): v is Object { return v !== null && typeof v === 'object'; }
+
+export function isBoolean(v: any): v is (boolean) { return typeof v === 'boolean'; }
+
+export function isString(v: any): v is (string) { return typeof v === 'string'; }
+
+export function isNumber(v: any): v is (number) { return typeof v === 'number'; }
+
+export function isFunction(v: any): v is (Function) { return typeof v === 'function'; }
+
+export function isStringOrNumber(v: any): v is (string | number) { return isString(v) || isNumber(v); }
+
+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
+  if (ev) {
+    var changedTouches = ev.changedTouches;
+    if (changedTouches && changedTouches.length > 0) {
+      return changedTouches[0].clientX;
+    }
+    if (ev.pageX !== undefined) {
+      return ev.pageX;
+    }
+  }
+  return 0;
+}
+
+export function pointerCoordY(ev: any): number {
+  // get Y coordinates for either a mouse click
+  // or a touch depending on the given event
+  if (ev) {
+    var changedTouches = ev.changedTouches;
+    if (changedTouches && changedTouches.length > 0) {
+      return changedTouches[0].clientY;
+    }
+    if (ev.pageY !== undefined) {
+      return ev.pageY;
+    }
+  }
+  return 0;
+}
+
+export function getElementReference(elm: any, ref: string) {
+  if (ref === 'child') {
+    return elm.firstElementChild;
+  }
+  if (ref === 'parent') {
+    return getParentElement(elm) || elm;
+  }
+  if (ref === 'body') {
+    return elm.ownerDocument.body;
+  }
+  if (ref === 'document') {
+    return elm.ownerDocument;
+  }
+  if (ref === 'window') {
+    return elm.ownerDocument.defaultView;
+  }
+  return elm;
+}
+
+export function getParentElement(elm: any) {
+  if (elm.parentElement ) {
+    // normal element with a parent element
+    return elm.parentElement;
+  }
+  if (elm.parentNode && elm.parentNode.host) {
+    // shadow dom's document fragment
+    return elm.parentNode.host;
+  }
+  return null;
+}
+
+export function applyStyles(elm: HTMLElement, styles: {[styleProp: string]: string|number}) {
+  const styleProps = Object.keys(styles);
+
+  if (elm) {
+    for (var i = 0; i < styleProps.length; i++) {
+      (<any>elm.style)[styleProps[i]] = styles[styleProps[i]];
+    }
+  }
+}

packages/ionic/src/utils/interfaces.ts

@@ -0,0 +1,943 @@
+
+export interface Ionic {
+  emit: EventEmit;
+  listener: {
+    enable: EventListenerEnable;
+    add: AddEventListenerApi;
+  };
+  theme: IonicTheme;
+  controller?: IonicController;
+  dom: DomControllerApi;
+  config: ConfigApi;
+  Animation?: Animation;
+  isServer: boolean;
+  isClient: boolean;
+}
+
+
+export interface IonicController {
+  <LoadingController>(ctrlName: 'loading', opts: LoadingOptions): Promise<Loading>;
+  <MenuController>(ctrlName: 'menu'): Promise<MenuController>;
+  <ModalController>(ctrlName: 'modal', opts: ModalOptions): Promise<Modal>;
+  (ctrlName: string, opts?: any): Promise<IonicControllerApi>;
+}
+
+
+export interface IonicControllerApi {
+  load?: (opts?: any) => Promise<any>;
+}
+
+
+export interface GlobalNamespace {
+  staticDir?: string;
+  components?: LoadComponentMeta[];
+  defineComponents?: (coreVersion: number, bundleId: string, modulesImporterFn: ModulesImporterFn, cmp0?: LoadComponentMeta, cmp1?: LoadComponentMeta, cmp2?: LoadComponentMeta) => void;
+  eventNameFn?: (eventName: string) => string;
+  config?: Object;
+  loadController?: (ctrlName: string, ctrl: any) => any;
+  controllers?: {[ctrlName: string]: any};
+  ConfigCtrl?: ConfigApi;
+  DomCtrl?: DomControllerApi;
+  QueueCtrl?: QueueApi;
+  Animation?: any;
+}
+
+
+export interface Menu {
+  setOpen(shouldOpen: boolean, animated?: boolean): Promise<boolean>;
+  open(): Promise<boolean>;
+  close(): Promise<boolean>;
+  toggle(): Promise<boolean>;
+  enable(shouldEnable: boolean): Menu;
+  swipeEnable(shouldEnable: boolean): Menu;
+  isAnimating: boolean;
+  isOpen: boolean;
+  isRightSide: boolean;
+  enabled: boolean;
+  side: string;
+  id: string;
+  maxEdgeStart: number;
+  persistent: boolean;
+  swipeEnabled: boolean;
+  type: string;
+  width(): number;
+  getMenuElement(): HTMLElement;
+  getContentElement(): HTMLElement;
+  getBackdropElement(): HTMLElement;
+}
+
+
+export interface MenuType {
+  ani: any;
+  isOpening: boolean;
+  setOpen(shouldOpen: boolean, animated: boolean, done: Function): void;
+  setProgressStart(isOpen: boolean): void;
+  setProgessStep(stepValue: number): void;
+  setProgressEnd(shouldComplete: boolean, currentStepValue: number, velocity: number, done: Function): void;
+  destroy(): void;
+}
+
+
+export interface MenuController {
+  open(menuId?: string): Promise<boolean>;
+  close(menuId?: string): Promise<boolean>;
+  toggle(menuId?: string): Promise<boolean>;
+  enable(shouldEnable: boolean, menuId?: string): void;
+  swipeEnable(shouldEnable: boolean, menuId?: string): void;
+  isOpen(menuId?: string): boolean;
+  isEnabled(menuId?: string): boolean;
+  get(menuId?: string): Menu;
+  getOpen(): Menu;
+  getMenus(): Menu[];
+}
+
+
+export interface Modal {
+  component: string;
+  componentProps?: any;
+  id: string;
+  style?: {
+    zIndex: number;
+  };
+  showBackdrop: boolean;
+  enableBackdropDismiss: boolean;
+  enterAnimation: AnimationBuilder;
+  exitAnimation: AnimationBuilder;
+  cssClass: string;
+  present: () => Promise<void>;
+  dismiss: () => Promise<void>;
+}
+
+
+export interface ModalOptions {
+  component: string;
+  componentProps?: any;
+  showBackdrop?: boolean;
+  enableBackdropDismiss?: boolean;
+  enterAnimation?: AnimationBuilder;
+  exitAnimation?: AnimationBuilder;
+  cssClass?: string;
+}
+
+
+export interface ModalEvent {
+  detail: {
+    modal: Modal;
+  };
+}
+
+
+export interface Loading {
+  id: string;
+  style?: {
+    zIndex: number;
+  };
+  showBackdrop: boolean;
+  enterAnimation: AnimationBuilder;
+  exitAnimation: AnimationBuilder;
+  cssClass: string;
+  present: () => Promise<void>;
+  dismiss: () => Promise<void>;
+}
+
+
+export interface LoadingOptions {
+  spinner?: string;
+  content?: string;
+  cssClass?: string;
+  showBackdrop?: boolean;
+  dismissOnPageChange?: boolean;
+  duration?: number;
+}
+
+
+export interface LoadingEvent {
+  detail: {
+    loading: Loading;
+  };
+}
+
+
+export interface AddEventListenerApi {
+  (elm: HTMLElement|HTMLDocument|Window, eventName: string, cb: (ev?: any) => void, opts?: ListenOptions): Function;
+}
+
+
+export interface EventEmit {
+  (instance: any, eventName: string, data?: CustomEventOptions): void;
+}
+
+
+export interface CustomEventOptions {
+  bubbles?: boolean;
+  cancelable?: boolean;
+  composed?: boolean;
+  detail?: any;
+}
+
+
+export interface EventListenerEnable {
+  (instance: any, eventName: string, enabled: boolean, attachTo?: string): void;
+}
+
+
+export interface EventListenerCallback {
+  (ev?: any): void;
+}
+
+
+export interface GestureDetail {
+  type?: string;
+  event?: UIEvent;
+  startX?: number;
+  startY?: number;
+  startTimeStamp?: number;
+  currentX?: number;
+  currentY?: number;
+  velocityX?: number;
+  velocityY?: number;
+  deltaX?: number;
+  deltaY?: number;
+  directionX?: 'left'|'right';
+  directionY?: 'up'|'down';
+  velocityDirectionX?: 'left'|'right';
+  velocityDirectionY?: 'up'|'down';
+  timeStamp?: number;
+}
+
+
+export interface GestureCallback {
+  (detail?: GestureDetail): boolean|void;
+}
+
+
+export interface ScrollDetail extends GestureDetail {
+  scrollTop?: number;
+  scrollLeft?: number;
+  scrollHeight?: number;
+  scrollWidth?: number;
+  contentHeight?: number;
+  contentWidth?: number;
+  contentTop?: number;
+  contentBottom?: number;
+  domWrite?: DomControllerCallback;
+  contentElement?: HTMLElement;
+  fixedElement?: HTMLElement;
+  scrollElement?: HTMLElement;
+  headerElement?: HTMLElement;
+  footerElement?: HTMLElement;
+}
+
+
+export interface ScrollCallback {
+  (detail?: ScrollDetail): boolean|void;
+}
+
+
+export interface ContentDimensions {
+  contentHeight: number;
+  contentTop: number;
+  contentBottom: number;
+
+  contentWidth: number;
+  contentLeft: number;
+
+  scrollHeight: number;
+  scrollTop: number;
+
+  scrollWidth: number;
+  scrollLeft: number;
+}
+
+
+export interface QueueApi {
+  add: (cb: Function, priority?: number) => void;
+  flush: (cb?: Function) => void;
+}
+
+
+export interface DomControllerApi {
+  read: DomControllerCallback;
+  write: DomControllerCallback;
+  raf: DomControllerCallback;
+  now(): number;
+}
+
+export interface RafCallback {
+  (timeStamp?: number): void;
+}
+
+
+export interface DomControllerCallback {
+  (cb: RafCallback): void;
+}
+
+
+export interface LoadComponentMeta {
+  /**
+   * tag name (ion-badge)
+   */
+  [0]: string;
+
+  /**
+   * map of the modes and bundle ids
+   */
+  [1]: {
+    [modeName: string]: {
+      /**
+       * bundleId
+       */
+      [0]: string;
+
+      /**
+       * styles
+       */
+      [1]: string;
+    }
+  };
+
+  /**
+   * props
+   */
+  [2]: any[];
+
+  /**
+   * slot
+   */
+  [3]: number;
+
+  /**
+   * host
+   */
+  [4]: any;
+
+  /**
+   * listeners
+   */
+  [5]: ComponentListenersData[];
+
+  /**
+   * states
+   */
+  [6]: StateMeta[];
+
+  /**
+   * watchers
+   */
+  [7]: ComponentWatchersData[];
+
+  /**
+   * methods
+   */
+  [8]: MethodMeta[];
+
+  /**
+   * shadow
+   */
+  [9]: boolean;
+}
+
+
+export interface Bundle {
+  id?: string;
+  components?: ComponentMeta[];
+  modeName?: string;
+  bundledJsModules?: string;
+  content?: string;
+  fileName?: string;
+  filePath?: string;
+}
+
+
+export interface FormatComponentDataOptions {
+  defaultAttrCase?: number;
+  minimumData?: boolean;
+  onlyIncludeModeName?: string;
+  includeStyles?: boolean;
+}
+
+
+export interface ComponentListenersData {
+  /**
+   * methodName
+   */
+  [0]: string;
+
+  /**
+   * eventName
+   */
+  [1]: string;
+
+  /**
+   * capture
+   */
+  [2]: number;
+
+  /**
+   * passive
+   */
+  [3]: number;
+
+  /**
+   * enabled
+   */
+  [4]: number;
+}
+
+
+export interface ComponentWatchersData {
+  [methodName: string]: any;
+}
+
+
+export interface ModulesImporterFn {
+  (importer: any, h: Function, t: Function, Ionic: Ionic): void;
+}
+
+
+export interface ComponentDecorator {
+  (opts?: ComponentOptions): any;
+}
+
+
+export interface ComponentOptions {
+  tag: string;
+  styleUrls?: string | string[] | ModeStyles;
+  styles?: string | string[];
+  shadow?: boolean;
+  host?: HostMeta;
+}
+
+export interface ModeStyles {
+  [modeName: string]: string | string[];
+}
+
+
+export interface PropDecorator {
+  (opts?: PropOptions): any;
+}
+
+
+export interface PropOptions {
+  type?: string;
+  twoWay?: boolean;
+}
+
+
+export interface PropMeta {
+  propName?: string;
+  propType?: number;
+  attribName?: string;
+  attribCase?: number;
+  isTwoWay?: boolean;
+}
+
+
+export type MethodMeta = string;
+
+
+export interface MethodDecorator {
+  (opts?: MethodOptions): any;
+}
+
+
+export interface MethodOptions {}
+
+
+export interface ListenDecorator {
+  (eventName: string, opts?: ListenOptions): any;
+}
+
+
+export interface ListenOptions {
+  eventName?: string;
+  capture?: boolean;
+  passive?: boolean;
+  enabled?: boolean;
+}
+
+
+export interface ListenMeta {
+  eventMethod?: string;
+  eventName?: string;
+  eventCapture?: boolean;
+  eventPassive?: boolean;
+  eventEnabled?: boolean;
+}
+
+
+export interface StateDecorator {
+  (): any;
+}
+
+
+export type StateMeta = string;
+
+
+export interface WatchDecorator {
+  (propName: string): any;
+}
+
+
+export interface WatchOpts {
+  fn: string;
+}
+
+
+export interface WatchMeta extends WatchOpts {
+  propName?: string;
+}
+
+
+export interface IonicTheme {
+  (instance: any, cssClassName: string, vnodeData?: VNodeData): VNodeData;
+}
+
+
+export interface ConfigApi {
+  get: (key: string, fallback?: any) => any;
+  getBoolean: (key: string, fallback?: boolean) => boolean;
+  getNumber: (key: string, fallback?: number) => number;
+}
+
+
+export interface ComponentMeta {
+  // "Meta" suffix to ensure property renaming
+  tagNameMeta?: string;
+  methodsMeta?: MethodMeta[];
+  propsMeta?: PropMeta[];
+  listenersMeta?: ListenMeta[];
+  watchersMeta?: WatchMeta[];
+  statesMeta?: StateMeta[];
+  modesMeta?: ModesMeta;
+  modesStyleMeta?: ModesStyleMeta;
+  isShadowMeta?: boolean;
+  hostMeta?: HostMeta;
+  slotMeta?: number;
+  componentModuleMeta?: any;
+  componentClass?: string;
+  componentUrl?: string;
+}
+
+
+export interface ModesMeta {
+  [modeName: string]: ModeMeta;
+}
+
+
+export interface ModesStyleMeta {
+  [modeName: string]: ModeStyleMeta;
+}
+
+
+export interface ModeStyleMeta {
+  styleUrls?: string[];
+  styles?: string[];
+}
+
+
+export interface ModeMeta {
+  /**
+   * bundleId
+   */
+  [0]?: string;
+
+  /**
+   * styles
+   */
+  [1]?: string;
+}
+
+
+export interface HostMeta {
+  [key: string]: any;
+}
+
+
+export interface Component {
+  ionViewWillLoad?: () => void;
+  ionViewDidLoad?: () => void;
+  ionViewWillUpdate?: () => void;
+  ionViewDidUpdate?: () => void;
+  ionViewDidUnload?: () => void;
+
+  render?: () => any;
+  hostData?: () => VNodeData;
+
+  mode?: string;
+  color?: string;
+
+  // public properties
+  $el?: HostElement;
+
+  // private properties
+  __values?: ComponentActiveValues;
+
+  [memberName: string]: any;
+}
+
+
+export interface ComponentActiveListeners {
+  [eventName: string]: Function;
+}
+
+
+export interface ComponentActiveWatchers {
+  [propName: string]: Function;
+}
+
+
+export interface ComponentActiveValues {
+  [propName: string]: any;
+}
+
+
+export interface BaseInputComponent extends Component {
+  disabled: boolean;
+  hasFocus: boolean;
+  value: string;
+
+  fireFocus: () => void;
+  fireBlur: () => void;
+}
+
+
+export interface BooleanInputComponent extends BaseInputComponent {
+  checked: boolean;
+  toggle: (ev: UIEvent) => void;
+}
+
+
+export interface ComponentModule {
+  new (): Component;
+}
+
+
+export interface ComponentRegistry {
+  [tag: string]: ComponentMeta;
+}
+
+
+export interface HostElement extends HTMLElement {
+  // web component APIs
+  connectedCallback: () => void;
+  attributeChangedCallback?: (attribName: string, oldVal: string, newVal: string, namespace: string) => void;
+  disconnectedCallback?: () => void;
+
+  // public properties
+  $instance?: Component;
+
+  // private methods
+  _render: (isUpdateRender?: boolean) => void;
+  _initLoad: () => void;
+  _queueUpdate: () => void;
+
+  // private properties
+  _activelyLoadingChildren?: HostElement[];
+  _ancestorHostElement?: HostElement;
+  _hasConnected?: boolean;
+  _hasDestroyed?: boolean;
+  _hasLoaded?: boolean;
+  _hostContentNodes?: HostContentNodes;
+  _isQueuedForUpdate?: boolean;
+  _listeners?: ComponentActiveListeners;
+  _root?: HTMLElement | ShadowRoot;
+  _vnode: VNode;
+  _watchers?: ComponentActiveWatchers;
+}
+
+
+export interface RendererApi {
+  (oldVNode: VNode | Element, newVNode: VNode, isUpdate?: boolean, hostContentNodes?: HostContentNodes): VNode;
+}
+
+
+export interface DomApi {
+  $head: HTMLHeadElement;
+  $body: HTMLElement;
+  $nodeType(node: any): number;
+  $createEvent(): CustomEvent;
+  $createElement<K extends keyof HTMLElementTagNameMap>(tagName: K): HTMLElementTagNameMap[K];
+  $createElement(tagName: string): HTMLElement;
+  $createElementNS(namespace: string, tagName: string): any;
+  $createTextNode(text: string): Text;
+  $insertBefore(parentNode: Node, newNode: Node, referenceNode: Node): void;
+  $removeChild(node: Node, child: Node): void;
+  $appendChild(node: Node, child: Node): void;
+  $childNodes(node: Node): NodeList;
+  $parentNode(node: Node): Node;
+  $nextSibling(node: Node): Node;
+  $tagName(elm: any): string;
+  $getTextContent(node: any): string;
+  $setTextContent(node: Node, text: string): void;
+  $getAttribute(elm: any, key: string): string;
+  $setAttribute(elm: any, key: string, val: any): void;
+  $setAttributeNS(elm: any, namespaceURI: string, qualifiedName: string, value: string): void;
+  $removeAttribute(elm: any, key: string): void;
+}
+
+export type Key = string | number;
+
+
+export interface Hyperscript {
+  (sel: any): VNode;
+  (sel: Node, data: VNodeData): VNode;
+  (sel: any, data: VNodeData): VNode;
+  (sel: any, text: string): VNode;
+  (sel: any, children: Array<VNode | undefined | null>): VNode;
+  (sel: any, data: VNodeData, text: string): VNode;
+  (sel: any, data: VNodeData, children: Array<VNode | undefined | null>): VNode;
+  (sel: any, data: VNodeData, children: VNode): VNode;
+}
+
+
+export interface HostContentNodes {
+  defaultSlot?: Node[];
+  namedSlots?: {[slotName: string]: Node[]};
+}
+
+
+export type CssClassObject = { [className: string]: boolean };
+
+
+
+export interface VNode {
+  // using v prefixes largely so closure has no issue property renaming
+  vtag: string;
+  vtext: string;
+  vchildren: VNode[];
+  vprops: any;
+  vattrs: any;
+  vclass: CssClassObject;
+  vstyle: any;
+  vlisteners: any;
+  vkey: Key;
+  elm: Element|Node;
+  vnamespace: any;
+  assignedListener: any;
+  skipDataOnUpdate: boolean;
+  skipChildrenOnUpdate: boolean;
+}
+
+export interface VNodeData {
+  props?: any;
+  attrs?: any;
+  class?: CssClassObject;
+  style?: any;
+  on?: any;
+  key?: Key;
+  ns?: any; // for SVGs
+}
+
+/**
+ * used by production compiler
+ */
+export interface VNodeProdData {
+  /**
+   * props
+   */
+  p?: any;
+  /**
+   * attrs
+   */
+  a?: any;
+  /**
+   * css classes
+   */
+  c?: CssClassObject;
+  /**
+   * styles
+   */
+  s?: any;
+  /**
+   * on (event listeners)
+   */
+  o?: any;
+  /**
+   * key
+   */
+  k?: Key;
+  /**
+   * namespace
+   */
+  n?: any;
+  /**
+   * check once
+   */
+  x?: number;
+}
+
+
+export interface PlatformApi {
+  registerComponents?: (components?: LoadComponentMeta[]) => ComponentMeta[];
+  defineComponent: (cmpMeta: ComponentMeta, HostElementConstructor?: any) => void;
+  getComponentMeta: (elm: Element) => ComponentMeta;
+  loadBundle: (bundleId: string, cb: Function) => void;
+  render?: RendererApi;
+  config: ConfigApi;
+  connectHostElement: (elm: HostElement, slotMeta: number) => void;
+  queue: QueueApi;
+  isServer?: boolean;
+  attachStyles: (cmpMeta: ComponentMeta, elm: HostElement, instance: Component) => void;
+  getMode: (elm: Element) => string;
+  appRoot?: HostElement;
+  appLoaded?: () => void;
+  onAppLoad?: (rootElm: HostElement, css: string) => void;
+  hasAppLoaded?: boolean;
+  tmpDisconnected?: boolean;
+}
+
+
+export interface PlatformConfig {
+  name: string;
+  isMatch?: {(url: string, userAgent: string): boolean};
+  settings?: any;
+}
+
+
+export interface Animation {
+  new(elm?: Node|Node[]|NodeList): Animation;
+  add: (childAnimation: Animation) => Animation;
+  addElement: (elm: Node|Node[]|NodeList) => Animation;
+  afterAddClass: (className: string) => Animation;
+  afterClearStyles: (propertyNames: string[]) => Animation;
+  afterRemoveClass: (className: string) => Animation;
+  afterStyles: (styles: { [property: string]: any; }) => Animation;
+  beforeAddClass: (className: string) => Animation;
+  beforeClearStyles: (propertyNames: string[]) => Animation;
+  beforeRemoveClass: (className: string) => Animation;
+  beforeStyles: (styles: { [property: string]: any; }) => Animation;
+  destroy: () => void;
+  duration: (milliseconds: number) => Animation;
+  getDuration(opts?: PlayOptions): number;
+  easing: (name: string) => Animation;
+  easingReverse: (name: string) => Animation;
+  from: (prop: string, val: any) => Animation;
+  fromTo: (prop: string, fromVal: any, toVal: any, clearProperyAfterTransition?: boolean) => Animation;
+  hasCompleted: boolean;
+  isPlaying: boolean;
+  onFinish: (callback: (animation: Animation) => void, opts?: {oneTimeCallback?: boolean, clearExistingCallacks?: boolean}) => Animation;
+  play: (opts?: PlayOptions) => void;
+  syncPlay: () => void;
+  progressEnd: (shouldComplete: boolean, currentStepValue: number, dur: number) => void;
+  progressStep: (stepValue: number) => void;
+  progressStart: () => void;
+  reverse: (shouldReverse?: boolean) => Animation;
+  stop: (stepValue?: number) => void;
+  to: (prop: string, val: any, clearProperyAfterTransition?: boolean) => Animation;
+}
+
+
+export interface AnimationBuilder {
+  (elm?: HTMLElement): Animation;
+}
+
+
+export interface AnimationOptions {
+  animation?: string;
+  duration?: number;
+  easing?: string;
+  direction?: string;
+  isRTL?: boolean;
+  ev?: any;
+}
+
+
+export interface PlayOptions {
+  duration?: number;
+  promise?: boolean;
+}
+
+
+export interface EffectProperty {
+  effectName: string;
+  trans: boolean;
+  wc?: string;
+  to?: EffectState;
+  from?: EffectState;
+  [state: string]: any;
+}
+
+
+export interface EffectState {
+  val: any;
+  num: number;
+  effectUnit: string;
+}
+
+
+export interface RequestIdleCallback {
+  (callback: IdleCallback, options?: { timeout?: number }): number;
+}
+
+
+export interface IdleCallback {
+  (deadline: IdleDeadline, options?: IdleOptions): void;
+}
+
+
+export interface IdleDeadline {
+  didTimeout: boolean;
+  timeRemaining: () => number;
+}
+
+
+export interface IdleOptions {
+  timeout?: number;
+}
+
+
+export interface BundleCallbacks {
+  [bundleId: string]: Function[];
+}
+
+
+export interface StencilSystem {
+  fs?: {
+    readFile(filename: string, encoding: string, callback: (err: NodeJS.ErrnoException, data: string) => void): void;
+    readFileSync(filename: string, encoding: string): string;
+    readdirSync(path: string | Buffer, options?: string | {}): string[];
+    statSync(path: string | Buffer): {
+      isFile(): boolean;
+      isDirectory(): boolean;
+    };
+  };
+  path?: {
+    join(...paths: string[]): string;
+  };
+  vm?: {
+    createContext(sandbox?: any): any;
+    runInContext(code: string, contextifiedSandbox: any, options?: any): any;
+  };
+  createDom?(): {
+    parse(hydrateOptions: HydrateOptions): Window;
+    serialize(): string;
+  };
+}
+
+
+export interface RendererOptions {
+  registry?: ComponentRegistry;
+  staticDir?: string;
+  debug?: boolean;
+  sys?: StencilSystem;
+}
+
+
+export interface HydrateOptions {
+  req?: {
+    protocol: string;
+    get: (key: string) => string;
+    originalUrl: string;
+    url: string;
+  };
+  html?: string;
+  url?: string;
+  referrer?: string;
+  userAgent?: string;
+  cookie?: string;
+  dir?: string;
+  lang?: string;
+  config?: Object;
+  removeUnusedCss?: boolean;
+}

packages/ionic/src/utils/theme.ts

@@ -0,0 +1,21 @@
+import { CssClassObject } from '../util/interfaces';
+
+export function createThemedClasses(mode: string, color: string, classList: string): CssClassObject {
+  let allClassObj: CssClassObject = {};
+
+  return classList.split(' ')
+    .reduce((classObj: CssClassObject, classString: string): CssClassObject => {
+      classObj[classString] = true;
+
+      if (mode) {
+        classObj[`${classString}-${mode}`] = true;
+
+        if (color) {
+          classObj[`${classString}-${color}`] = true;
+          classObj[`${classString}-${mode}-${color}`] = true;
+        }
+      }
+
+      return classObj;
+    }, allClassObj);
+}

packages/ionic/src/vendor/swiper.d.ts

@@ -0,0 +1,324 @@
+// Type definitions for Swiper 3.4
+// Project: https://github.com/nolimits4web/Swiper
+// Definitions by: Sebastián Galiano <https://github.com/sgaliano/>, Luca Trazzi <https://github.com/lucax88x/>
+// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
+
+interface SwiperOptions {
+    initialSlide?: number;
+    direction?: string;
+    speed?: number;
+    setWrapperSize?: boolean;
+    virtualTranslate?: boolean;
+    width?: number;
+    height?: number;
+    autoHeight?: boolean;
+    roundLengths?: boolean;
+    nested?: boolean;
+
+    // Autoplay
+    autoplay?: number;
+    autoplayStopOnLast?: boolean;
+    autoplayDisableOnInteraction?: boolean;
+
+    // Progress
+    watchSlidesProgress?: boolean;
+    watchSlidesVisibility?: boolean;
+
+    // Freemode
+    freeMode?: boolean;
+    freeModeMomentum?: boolean;
+    freeModeMomentumRatio?: number;
+    freeModeMomentumVelocityRatio?: number;
+    freeModeMomentumBounce?: boolean;
+    freeModeMomentumBounceRatio?: number;
+    freeModeMinimumVelocity?: number;
+    freeModeSticky?: boolean;
+
+    // Effects
+    effect?: string;
+    fade?: {};
+    cube?: {};
+    coverflow?: {};
+    flip?: {};
+
+    // Parallax
+    parallax?: boolean;
+
+    // Slides grid
+    spaceBetween?: number;
+    slidesPerView?: number | string;
+    slidesPerColumn?: number;
+    slidesPerColumnFill?: string;
+    slidesPerGroup?: number;
+    centeredSlides?: boolean;
+    slidesOffsetBefore?: number;
+    slidesOffsetAfter?: number;
+
+    // Grab Cursor
+    grabCursor?: boolean;
+
+    // Touches
+    touchEventsTarget?: string;
+    touchRatio?: number;
+    touchAngle?: number;
+    simulateTouch?: boolean;
+    shortSwipes?: boolean;
+    longSwipes?: boolean;
+    longSwipesRatio?: number;
+    longSwipesMs?: number;
+    followFinger?: boolean;
+    onlyExternal?: boolean;
+    threshold?: number;
+    touchMoveStopPropagation?: boolean;
+    iOSEdgeSwipeDetection?: boolean;
+    iOSEdgeSwipeThreshold?: number;
+
+    // Touch Resistance
+    resistance?: boolean;
+    resistanceRatio?: number;
+
+    // Clicks
+    preventClicks?: boolean;
+    preventClicksPropagation?: boolean;
+    slideToClickedSlide?: boolean;
+
+    // Swiping / No swiping
+    allowSwipeToPrev?: boolean;
+    allowSwipeToNext?: boolean;
+    noSwiping?: boolean;
+    noSwipingClass?: string;
+    swipeHandler?: string | Element;
+
+    // Navigation Controls
+    uniqueNavElements?: boolean;
+
+    // Pagination
+    pagination?: string | Element;
+    paginationType?: string;
+    paginationHide?: boolean;
+    paginationClickable?: boolean;
+    paginationElement?: string;
+    paginationBulletRender?(swiper: Swiper, index: number, className: string): void;
+    paginationFractionRender?(swiper: Swiper, currentClassName: string, totalClassName: string): void;
+    paginationProgressRender?(swiper: Swiper, progressbarClass: string): void;
+    paginationCustomRender?(swiper: Swiper, current: number, total: number): void;
+
+    // Navigation Buttons
+    nextButton?: string | Element;
+    prevButton?: string | Element;
+
+    // Scollbar
+    scrollbar?: string | Element | SwiperScrollbarOptions;
+    scrollbarHide?: boolean;
+    scrollbarDraggable?: boolean;
+    scrollbarSnapOnRelease?: boolean;
+
+    // Accessibility
+    a11y?: boolean;
+    prevSlideMessage?: string;
+    nextSlideMessage?: string;
+    firstSlideMessage?: string;
+    lastSlideMessage?: string;
+    paginationBulletMessage?: string;
+
+    // Keyboard / Mousewheel
+    keyboardControl?: boolean;
+    mousewheelControl?: boolean;
+    mousewheelForceToAxis?: boolean;
+    mousewheelReleaseOnEdges?: boolean;
+    mousewheelInvert?: boolean;
+    mousewheelSensitivity?: number;
+
+    // Hash Navigation
+    hashnav?: boolean;
+    hashnavWatchState?: boolean;
+    history?: string;
+
+    // Images
+    preloadImages?: boolean;
+    updateOnImagesReady?: boolean;
+    lazyLoading?: boolean;
+    lazyLoadingInPrevNext?: boolean;
+    lazyLoadingInPrevNextAmount?: number;
+    lazyLoadingOnTransitionStart?: boolean;
+
+    // Loop
+    loop?: boolean;
+    loopAdditionalSlides?: number;
+    loopedSlides?: number;
+
+    zoom?: boolean;
+
+    // Controller
+    control?: Swiper;
+    controlInverse?: boolean;
+    controlBy?: string;
+
+    // Observer
+    observer?: boolean;
+    observeParents?: boolean;
+
+    // Breakpoints
+    breakpoints?: {};
+
+    // Callbacks
+    runCallbacksOnInit?: boolean;
+    onInit?(swiper: Swiper): void;
+    onSlideChangeStart?(swiper: Swiper): void;
+    onSlideChangeEnd?(swiper: Swiper): void;
+    onSlideNextStart?(swiper: Swiper): void;
+    onSlideNextEnd?(swiper: Swiper): void;
+    onSlidePrevStart?(swiper: Swiper): void;
+    onSlidePrevEnd?(swiper: Swiper): void;
+    onTransitionStart?(swiper: Swiper): void;
+    onTransitionEnd?(swiper: Swiper): void;
+    onTouchStart?(swiper: Swiper, event: Event): void;
+    onTouchMove?(swiper: Swiper, event: Event): void;
+    onTouchMoveOpposite?(swiper: Swiper, event: Event): void;
+    onSliderMove?(swiper: Swiper, event: Event): void;
+    onTouchEnd?(swiper: Swiper, event: Event): void;
+    onClick?(swiper: Swiper, event: Event): void;
+    onTap?(swiper: Swiper, event: Event): void;
+    onDoubleTap?(swiper: Swiper, event: Event): void;
+    onImagesReady?(swiper: Swiper): void;
+    onProgress?(swiper: Swiper, progress: number): void;
+    onReachBeginning?(swiper: Swiper): void;
+    onReachEnd?(swiper: Swiper): void;
+    onDestroy?(swiper: Swiper): void;
+    onSetTranslate?(swiper: Swiper, translate: any): void;
+    onSetTransition?(swiper: Swiper, transition: any): void;
+    onAutoplay?(swiper: Swiper): void;
+    onAutoplayStart?(swiper: Swiper): void;
+    onAutoplayStop?(swiper: Swiper): void;
+    onLazyImageLoad?(swiper: Swiper, slide: any, image: any): void;
+    onLazyImageReady?(swiper: Swiper, slide: any, image: any): void;
+    onPaginationRendered?(swiper: Swiper, paginationContainer: any): void;
+
+    // Namespace
+    slideClass?: string;
+    slideActiveClass?: string;
+    slideVisibleClass?: string;
+    slideDuplicateClass?: string;
+    slideNextClass?: string;
+    slidePrevClass?: string;
+    wrapperClass?: string;
+    bulletClass?: string;
+    bulletActiveClass?: string;
+    paginationHiddenClass?: string;
+    paginationCurrentClass?: string;
+    paginationTotalClass?: string;
+    paginationProgressbarClass?: string;
+    buttonDisabledClass?: string;
+}
+
+interface SwiperScrollbarOptions {
+    container: string;          // Default: '.swiper-scrollbar'
+    draggable?: boolean;        // Default: true
+    hide?: boolean;             // Default: true
+    snapOnRelease?: boolean;    // Default: false
+}
+
+declare class SwiperSlide {
+    append(): SwiperSlide;
+    clone(): SwiperSlide;
+    getWidth(): number;
+    getHeight(): number;
+    getOffset(): { top: number; left: number; };
+    insertAfter(index: number): SwiperSlide;
+    prepend(): SwiperSlide;
+    remove(): void;
+}
+
+export declare class Swiper {
+    constructor(container: string | Element, options?: SwiperOptions);
+
+    // Properties
+    width: number;
+    height: number;
+    params: any;
+    positions: any;
+
+    // Feature detection
+    support: {
+        touch: boolean;
+        transforms: boolean;
+        transforms3d: boolean;
+        transitions: boolean;
+    };
+
+    // Browser detection
+    browser: {
+        ie8: boolean;
+        ie10: boolean;
+    };
+
+    // Navigation
+    activeIndex: number;
+    activeLoopIndex: number;
+    activeLoaderIndex: number;
+    previousIndex: number;
+    swipeNext(internal?: boolean): boolean;
+    swipePrev(internal?: boolean): boolean;
+    swipeReset(): boolean;
+    swipeTo(index: number, speed?: number, runCallbacks?: boolean): boolean;
+    activeSlide(): SwiperSlide;
+    updateActiveSlide(index: number): void;
+
+    // Events
+    touches: any;
+    isTouched: boolean;
+    clickedSlideIndex: number;
+    clickedSlide: SwiperSlide;
+    wrapperTransitionEnd(callback: () => void, permanent: boolean): void;
+
+    // Init/reset
+    destroy(deleteInstance: boolean, cleanupStyles: boolean): void;
+    reInit(forceCalcSlides?: boolean): void;
+    resizeFix(reInit?: boolean): void;
+
+    // Autoplaying
+    autoplay: boolean;
+    startAutoplay(): void;
+    stopAutoplay(): void;
+
+    // Other methods
+    getWrapperTranslate(axis: string): number;  // 'x' or 'y'
+    setWrapperTranslate(x: number, y: number, z: number): void;
+    setWrapperTransition(duration: any): void;
+
+    // Slides API
+
+    slides: SwiperSlide[];
+
+    slidePrev(runCallbacks?: boolean, speed?: number): void;
+    slideNext(runCallbacks?: boolean, speed?: number): void;
+    slideTo(index: number, speed?: number, runCallbacks?: boolean): void;
+    update(updateTranslate?: boolean): void;
+    onResize(): void;
+    detachEvents(): void;
+    attachEvents(): void;
+
+    appendSlide(slides: HTMLElement | string | string[]): void;
+    prependSlide(slides: HTMLElement | string | string[]): void;
+    removeSlide(slideIndex: number): void;
+    removeAllSlides(): void;
+
+    lockSwipeToNext(): void;
+    unlockSwipeToNext(): void;
+    lockSwipeToPrev(): void;
+    unlockSwipeToPrev(): void;
+    lockSwipes(): void;
+    unlockSwipes(): void;
+    disableMousewheelControl(): void;
+    enableMousewheelControl(): void;
+    disableKeyboardControl(): void;
+    enableKeyboardControl(): void;
+    disableTouchContro(): void;
+    enableTouchContro(): void;
+    unsetGrabCursor(): void;
+    setGrabCursor(): void;
+
+    plugins?: {
+        debugger?(swiper: any, params: any): void;
+    };
+}