4.0.0-beta.11

CHANGELOG.md

@@ -1,3 +1,26 @@
+<a name="4.0.0-beta.11"></a>
+# [4.0.0-beta.11](https://github.com/ionic-team/ionic/compare/v4.0.0-beta.10...v4.0.0-beta.11) (2018-09-14)
+
+
+### Bug Fixes
+
+* **slides:** swiper must be a vendor ([3435473](https://github.com/ionic-team/ionic/commit/3435473))
+
+
+
+<a name="4.0.0-beta.10"></a>
+# [4.0.0-beta.10](https://github.com/ionic-team/ionic/compare/v4.0.0-beta.9...v4.0.0-beta.10) (2018-09-14)
+
+
+### Bug Fixes
+
+* **animation:** always call onFinish() ([c23c5a4](https://github.com/ionic-team/ionic/commit/c23c5a4))
+* **button:** vanilla color is usable ([b8b9b83](https://github.com/ionic-team/ionic/commit/b8b9b83))
+* **segment:** unselected color ([b9e42eb](https://github.com/ionic-team/ionic/commit/b9e42eb))
+* **slides:** swiper is not required as dependency ([29f324b](https://github.com/ionic-team/ionic/commit/29f324b))
+
+
+
 <a name="4.0.0-beta.9"></a>
 # [4.0.0-beta.9](https://github.com/ionic-team/ionic/compare/v4.0.0-beta.7...v4.0.0-beta.9) (2018-09-14)
 

angular/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ionic/angular",
-  "version": "4.0.0-beta.9",
+  "version": "4.0.0-beta.11",
   "description": "Angular specific wrappers for @ionic/core",
   "keywords": [
     "ionic",
@@ -43,7 +43,7 @@
     "css/"
   ],
   "dependencies": {
-    "@ionic/core": "4.0.0-beta.9"
+    "@ionic/core": "4.0.0-beta.11"
   },
   "devDependencies": {
     "@angular/common": "^6.1.0",

core/README.md

@@ -23,8 +23,8 @@ The Ionic Core package contains the Web Components that make up the reusable UI
 Easiest way to start using Ionic Core is by adding a script tag to the CDN:
 
 ```html
-<link href="https://unpkg.com/@ionic/core@4.0.0-beta.9/css/ionic.bundle.css" rel="stylesheet">
-<script src="https://unpkg.com/@ionic/core@4.0.0-beta.9/dist/ionic.js"></script>
+<link href="https://unpkg.com/@ionic/core@4.0.0-beta.11/css/ionic.bundle.css" rel="stylesheet">
+<script src="https://unpkg.com/@ionic/core@4.0.0-beta.11/dist/ionic.js"></script>
 ```
 
 Any Ionic component added to the webpage will automatically load. This includes writing the component tag directly in HTML, or using JavaScript such as `document.createElement('ion-toggle')`.

core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ionic/core",
-  "version": "4.0.0-beta.9",
+  "version": "4.0.0-beta.11",
   "description": "Base components for Ionic",
   "keywords": [
     "ionic",
@@ -28,7 +28,7 @@
     "ionicons": "4.4.3"
   },
   "devDependencies": {
-    "@stencil/core": "0.13.0-10",
+    "@stencil/core": "0.13.0-11",
     "@stencil/dev-server": "latest",
     "@stencil/sass": "0.1.0",
     "@stencil/utils": "latest",
@@ -38,6 +38,7 @@
     "autoprefixer": "^9.0.2",
     "chromedriver": "^2.38.3",
     "clean-css-cli": "^4.1.11",
+    "fs-extra": "^7.0.0",
     "jest": "23.5.0",
     "mocha": "^4.0.1",
     "np": "^3.0.4",
@@ -54,6 +55,7 @@
   },
   "scripts": {
     "build": "npm run clean && npm run build.css && stencil build --docs",
+    "build.vendor": "rollup --config ./scripts/swiper.rollup.config.js",
     "build.css": "npm run css.sass && npm run css.minify",
     "build.debug": "npm run clean && stencil build --debug",
     "build.docs.json": "stencil build --docs-json dist/docs.json",

core/scripts/swiper.rollup.config.js

@@ -0,0 +1,14 @@
+import resolve from 'rollup-plugin-node-resolve';
+
+export default {
+  input: 'src/components/slides/swiper/swiper.js',
+  output: {
+    file: 'src/components/slides/swiper/swiper.bundle.js',
+    format: 'es'
+  },
+  plugins: [
+    resolve({
+      module: true
+    })
+  ]
+};

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

@@ -1152,9 +1152,6 @@ export class Animator {
    * NO RECURSION
    */
   _didFinish(hasCompleted: boolean) {
-    if (!this.isPlaying) {
-      return;
-    }
     this.isPlaying = false;
     this.hasCompleted = hasCompleted;
 

core/src/components/button/button.scss

@@ -43,6 +43,8 @@
 
   display: inline-block;
 
+  color: var(--color);
+
   font-family: $font-family-base;
 
   text-align: center;
@@ -212,7 +214,6 @@
   outline: none;
 
   background: var(--background);
-  color: var(--color);
 
   line-height: 1;
 

core/src/components/buttons/buttons.md.scss

@@ -45,11 +45,11 @@
 // --------------------------------------------------
 
 ::slotted(*) .button-outline {
-  --color: #{$toolbar-md-text-color};
-  --color-activated: #{$toolbar-md-text-color};
+  --color: currentColor;
+  --color-activated: currentColor;
   --background: transparent;
   --background-activated: transparent;
-  --border-color: #{$toolbar-md-text-color};
+  --border-color: currentColor;
 }
 
 
@@ -57,8 +57,8 @@
 // --------------------------------------------------
 
 ::slotted(*) .button-clear {
-  --color: #{$toolbar-md-text-color};
-  --color-activated: #{$toolbar-md-text-color};
+  --color: currentColor;
+  --color-activated: currentColor;
   --background: transparent;
 }
 

core/src/components/menu-controller/menu-controller.ts

@@ -182,8 +182,8 @@ export class MenuController implements MenuControllerI {
    * Returns true if any menu is currently animating.
    */
   @Method()
-  async isAnimating(): Promise<boolean> {
-    return this.menus.some(menu => menu.isAnimating);
+  isAnimating(): Promise<boolean> {
+    return Promise.resolve(this.isAnimatingSync());
   }
 
   @Method()
@@ -214,7 +214,7 @@ export class MenuController implements MenuControllerI {
 
   @Method()
   async _setOpen(menu: MenuI, shouldOpen: boolean, animated: boolean): Promise<boolean> {
-    if (await this.isAnimating()) {
+    if (this.isAnimatingSync()) {
       return false;
     }
     if (shouldOpen) {
@@ -248,6 +248,10 @@ export class MenuController implements MenuControllerI {
     return this.menus.map(menu => menu.el);
   }
 
+  isAnimatingSync(): boolean {
+    return this.menus.some(menu => menu.isAnimating);
+  }
+
   private registerAnimation(name: string, animation: AnimationBuilder) {
     this.menuAnimations.set(name, animation);
   }

core/src/components/segment/segment.md.scss

@@ -20,8 +20,12 @@
 // --------------------------------------------------
 
 :host-context(ion-toolbar.ion-color):not(.ion-color) {
-  --color: currentColor;
-  --color-checked: currentColor;
+  --color: #{current-color(contrast)};
+  --color-checked: #{current-color(contrast)};
+}
+
+:host(.ion-color)::slotted(ion-segment-button) {
+  --color: #{current-color(base)};
 }
 
 :host(.ion-color)::slotted(.segment-button-checked) {

core/src/components/slides/slides.tsx

@@ -11,7 +11,8 @@ import { SwiperInterface, SwiperOptions } from './swiper/swiper-interface';
   styleUrls: {
     ios: 'slides.ios.scss',
     md: 'slides.md.scss'
-  }
+  },
+  assetsDir: 'swiper',
 })
 export class Slides implements ComponentInterface {
 
@@ -287,7 +288,8 @@ export class Slides implements ComponentInterface {
     const finalOptions = this.normalizeOptions();
 
     // init swiper core
-    const { Swiper } = await import('./swiper/swiper');
+    // @ts-ignore
+    const { Swiper } = await import('./swiper/swiper.bundle.js');
     const swiper = new Swiper(this.el, finalOptions);
     this.didInit = true;
     this.readySwiper(swiper);

core/src/components/toolbar/test/colors/index.html

@@ -6,6 +6,13 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
   <script src="/dist/ionic.js"></script>
   <link rel="stylesheet" type="text/css" href="/css/ionic.bundle.css">
+
+  <style>
+    .custom-toolbar {
+      --background: black;
+      --color: white;
+    }
+  </style>
 </head>
 <body>
   <ion-app>
@@ -150,6 +157,20 @@
               </ion-buttons>
           <ion-title>Dark</ion-title>
         </ion-toolbar>
+
+        <ion-toolbar class="custom-toolbar">
+          <ion-buttons slot="start">
+              <ion-button color="danger">
+                <ion-icon slot="icon-only" name="add"></ion-icon>
+              </ion-button>
+            </ion-buttons>
+          <ion-buttons slot="primary">
+              <ion-button>
+                <ion-icon slot="icon-only" name="more"></ion-icon>
+              </ion-button>
+            </ion-buttons>
+        <ion-title>Dark</ion-title>
+      </ion-toolbar>
       </ion-content>
 
   </ion-app>