perf(slides): tree-shake dependency

core/package.json

@@ -33,6 +33,7 @@
     "@stencil/sass": "0.1.0",
     "@stencil/utils": "latest",
     "@types/jest": "^23.3.1",
+    "@types/swiper": "4.2.1",
     "agadoo": "^1.0.0",
     "autoprefixer": "^9.0.2",
     "chromedriver": "^2.38.3",
@@ -44,6 +45,7 @@
     "selenium-webdriver": "^3.6.0",
     "stylelint": "^9.4.0",
     "stylelint-order": "^0.8.1",
+    "swiper": "4.3.5",
     "tslint": "^5.10.0",
     "tslint-ionic-rules": "0.0.19",
     "tslint-react": "^3.6.0",

core/src/components.d.ts

@@ -4167,7 +4167,9 @@ export namespace Components {
   }
 
   interface IonSlide {}
-  interface IonSlideAttributes extends StencilHTMLAttributes {}
+  interface IonSlideAttributes extends StencilHTMLAttributes {
+    'onIonSlideChanged'?: (event: CustomEvent<void>) => void;
+  }
 
   interface IonSlides {
     /**
@@ -4193,15 +4195,19 @@ export namespace Components {
     /**
     * Lock or unlock the ability to slide to the next slides.
     */
-    'lockSwipeToNext': (shouldLockSwipeToNext: boolean) => void;
+    'lockSwipeToNext': (shouldLockSwipeToNext: boolean) => Promise<void>;
     /**
     * Lock or unlock the ability to slide to the previous slides.
     */
-    'lockSwipeToPrev': (shouldLockSwipeToPrev: boolean) => void;
+    'lockSwipeToPrev': (shouldLockSwipeToPrev: boolean) => Promise<void>;
     /**
     * Lock or unlock the ability to slide to change slides.
     */
-    'lockSwipes': (shouldLockSwipes: boolean) => void;
+    'lockSwipes': (shouldLockSwipes: boolean) => Promise<void>;
+    /**
+    * The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`.
+    */
+    'mode': Mode;
     /**
     * Options to pass to the swiper instance. See http://idangero.us/swiper/api/ for valid options
     */
@@ -4217,93 +4223,97 @@ export namespace Components {
     /**
     * Transition to the next slide.
     */
-    'slideNext': (speed?: number | undefined, runCallbacks?: boolean | undefined) => void;
+    'slideNext': (speed: number, runCallbacks: boolean) => Promise<void>;
     /**
     * Transition to the previous slide.
     */
-    'slidePrev': (speed?: number | undefined, runCallbacks?: boolean | undefined) => void;
+    'slidePrev': (speed?: number | undefined, runCallbacks?: boolean | undefined) => Promise<void>;
     /**
     * Transition to the specified slide.
     */
-    'slideTo': (index: number, speed?: number | undefined, runCallbacks?: boolean | undefined) => void;
+    'slideTo': (index: number, speed?: number | undefined, runCallbacks?: boolean | undefined) => Promise<void>;
     /**
     * Start auto play.
     */
-    'startAutoplay': () => void;
+    'startAutoplay': () => Promise<void>;
     /**
     * Stop auto play.
     */
-    'stopAutoplay': () => void;
+    'stopAutoplay': () => Promise<void>;
     /**
     * Update the underlying slider implementation. Call this if you've added or removed child slides.
     */
-    'update': () => void;
+    'update': () => Promise<void>;
   }
   interface IonSlidesAttributes extends StencilHTMLAttributes {
+    /**
+    * The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`.
+    */
+    'mode'?: Mode;
     /**
     * Emitted after the active slide has changed.
     */
-    'onIonSlideDidChange'?: (event: CustomEvent) => void;
+    'onIonSlideDidChange'?: (event: CustomEvent<void>) => void;
     /**
     * Emitted when the user double taps on the slide's container.
     */
-    'onIonSlideDoubleTap'?: (event: CustomEvent) => void;
+    'onIonSlideDoubleTap'?: (event: CustomEvent<void>) => void;
     /**
     * Emitted when the slider is actively being moved.
     */
-    'onIonSlideDrag'?: (event: CustomEvent) => void;
+    'onIonSlideDrag'?: (event: CustomEvent<void>) => void;
     /**
     * Emitted when the next slide has ended.
     */
-    'onIonSlideNextEnd'?: (event: CustomEvent) => void;
+    'onIonSlideNextEnd'?: (event: CustomEvent<void>) => void;
     /**
     * Emitted when the next slide has started.
     */
-    'onIonSlideNextStart'?: (event: CustomEvent) => void;
+    'onIonSlideNextStart'?: (event: CustomEvent<void>) => void;
     /**
     * Emitted when the previous slide has ended.
     */
-    'onIonSlidePrevEnd'?: (event: CustomEvent) => void;
+    'onIonSlidePrevEnd'?: (event: CustomEvent<void>) => void;
     /**
     * Emitted when the previous slide has started.
     */
-    'onIonSlidePrevStart'?: (event: CustomEvent) => void;
+    'onIonSlidePrevStart'?: (event: CustomEvent<void>) => void;
     /**
     * Emitted when the slider is at the last slide.
     */
-    'onIonSlideReachEnd'?: (event: CustomEvent) => void;
+    'onIonSlideReachEnd'?: (event: CustomEvent<void>) => void;
     /**
     * Emitted when the slider is at its initial position.
     */
-    'onIonSlideReachStart'?: (event: CustomEvent) => void;
+    'onIonSlideReachStart'?: (event: CustomEvent<void>) => void;
     /**
     * Emitted when the user taps/clicks on the slide's container.
     */
-    'onIonSlideTap'?: (event: CustomEvent) => void;
+    'onIonSlideTap'?: (event: CustomEvent<void>) => void;
     /**
     * Emitted when the user releases the touch.
     */
-    'onIonSlideTouchEnd'?: (event: CustomEvent) => void;
+    'onIonSlideTouchEnd'?: (event: CustomEvent<void>) => void;
     /**
     * Emitted when the user first touches the slider.
     */
-    'onIonSlideTouchStart'?: (event: CustomEvent) => void;
+    'onIonSlideTouchStart'?: (event: CustomEvent<void>) => void;
     /**
     * Emitted when the slide transition has ended.
     */
-    'onIonSlideTransitionEnd'?: (event: CustomEvent) => void;
+    'onIonSlideTransitionEnd'?: (event: CustomEvent<void>) => void;
     /**
     * Emitted when the slide transition has started.
     */
-    'onIonSlideTransitionStart'?: (event: CustomEvent) => void;
+    'onIonSlideTransitionStart'?: (event: CustomEvent<void>) => void;
     /**
     * Emitted before the active slide has changed.
     */
-    'onIonSlideWillChange'?: (event: CustomEvent) => void;
+    'onIonSlideWillChange'?: (event: CustomEvent<void>) => void;
     /**
     * Emitted after Swiper initialization
     */
-    'onIonSlidesDidLoad'?: (event: CustomEvent) => void;
+    'onIonSlidesDidLoad'?: (event: CustomEvent<void>) => void;
     /**
     * Options to pass to the swiper instance. See http://idangero.us/swiper/api/ for valid options
     */

core/src/components/slide/readme.md

@@ -10,6 +10,13 @@ See the [Slides API Docs](../slides) for more usage information.
 <!-- Auto Generated Below -->
 
 
+## Events
+
+| Event             | Description |
+| ----------------- | ----------- |
+| `ionSlideChanged` |             |
+
+
 ----------------------------------------------
 
 *Built with [StencilJS](https://stenciljs.com/)*

core/src/components/slide/slide.tsx

@@ -1,18 +1,27 @@
-import { Component } from '@stencil/core';
+import { Component, Event } from '@stencil/core';
+import { EventEmitter } from 'ionicons/dist/types/stencil.core';
 
 @Component({
   tag: 'ion-slide',
   styleUrl: 'slide.scss'
 })
 export class Slide {
 
+  @Event() ionSlideChanged!: EventEmitter<void>;
+
+  componentDidLoad() {
+    this.ionSlideChanged.emit();
+  }
+
+  componentDidUnload() {
+    this.ionSlideChanged.emit();
+  }
+
   hostData() {
     return {
       class: {
-        'slide-zoom': true,
         'swiper-slide': true
       }
     };
   }
-
 }

core/src/components/slides/readme.md

@@ -23,6 +23,7 @@ Licensed under MIT
 
 | Property    | Attribute   | Description                                                                                  | Type      |
 | ----------- | ----------- | -------------------------------------------------------------------------------------------- | --------- |
+| `mode`      | `mode`      | The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`.    | `Mode`    |
 | `options`   | --          | Options to pass to the swiper instance. See http://idangero.us/swiper/api/ for valid options | `any`     |
 | `pager`     | `pager`     | If true, show the pagination. Defaults to `false`.                                           | `boolean` |
 | `scrollbar` | `scrollbar` | If true, show the scrollbar. Defaults to `false`.                                            | `boolean` |

core/src/components/slides/slides-vendor.scss

@@ -1,13 +1,13 @@
 /**
- * Swiper 4.2.6
+ * Swiper 4.3.5
  * Most modern mobile touch slider and framework with hardware accelerated transitions
  * http://www.idangero.us/swiper/
  *
  * Copyright 2014-2018 Vladimir Kharlampidi
  *
  * Released under the MIT License
  *
- * Released on: May 1, 2018
+ * Released on: July 31, 2018
  */
 .swiper-container {
   margin: 0 auto;
@@ -272,7 +272,8 @@
   height: 8px;
   display: inline-block;
   border-radius: 100%;
-  background: rgba(0, 0, 0, .2);
+  background: #000;
+  opacity: 0.2;
 }
 button.swiper-pagination-bullet {
   border: none;
@@ -288,6 +289,7 @@ button.swiper-pagination-bullet {
   cursor: pointer;
 }
 .swiper-pagination-bullet-active {
+  opacity: 1;
   background: #007aff;
 }
 .swiper-container-vertical > .swiper-pagination-bullets {
@@ -613,4 +615,4 @@ button.swiper-pagination-bullet {
 .swiper-container-coverflow .swiper-wrapper {
   /* Windows 8 IE 10 fix */
   -ms-perspective: 1200px;
-}
+}

core/src/components/slides/slides.ios.scss

@@ -4,7 +4,7 @@
 // iOS Slides
 // --------------------------------------------------
 
-:host {
+.slides-ios {
   --bullet-background: #{$slides-ios-bullet-background};
   --bullet-background-active: #{$slides-ios-bullet-background-active};
   --progress-bar-background: #{$slides-ios-progress-bar-background};

core/src/components/slides/slides.md.scss

@@ -4,7 +4,7 @@
 // Material Design Slides
 // --------------------------------------------------
 
-:host {
+.slides-md {
   --bullet-background: #{$slides-md-bullet-background};
   --bullet-background-active: #{$slides-md-bullet-background-active};
   --progress-bar-background: #{$slides-md-progress-bar-background};

core/src/components/slides/slides.scss

@@ -4,23 +4,16 @@
 // Slides
 // --------------------------------------------------
 
-:host {
+.slides {
   /**
    * @prop --bullet-background: Background of the pagination bullets
    * @prop --bullet-background-active: Background of the active pagination bullet
    */
-
-  // TODO: document progress and scroll bar properties once they're working
-
   display: block;
 
   user-select: none;
 }
 
-.swiper-container {
-  height: 100%;
-}
-
 
 // Pagination Bullets
 // --------------------------------------------------