Merge pull request #111 from ionic-team/master

Pull master

.scripts/common.js

@@ -158,7 +158,7 @@ function preparePackage(tasks, package, version, install) {
       });
       projectTasks.push({
         title: `${pkg.name}: test`,
-        task: () => execa('npm', ['test'], { cwd: projectRoot })
+        task: async () => await execa('npm', ['test'], { cwd: projectRoot })
       });
     }
 

CHANGELOG.md

@@ -1,4 +1,33 @@
-## [4.11.2](https://github.com/ionic-team/ionic/compare/v4.11.1...v4.11.2) (2019-10-21)
+## [4.11.4](https://github.com/ionic-team/ionic/compare/v4.11.1...v4.11.4) (2019-11-07)
+
+
+### Bug Fixes
+
+* **react:** check for component unmount, fixes [#19859](https://github.com/ionic-team/ionic/issues/19859) ([7356c40](https://github.com/ionic-team/ionic/commit/7356c401742ce2b3241d6ab05fce0fa65d2f1f8a))
+* **react:** adding multiple subscriptions to lifecycle events, fixes [#19792](https://github.com/ionic-team/ionic/issues/19792) ([#19858](https://github.com/ionic-team/ionic/issues/19858)) ([0a3014d](https://github.com/ionic-team/ionic/commit/0a3014d35e2102570fd3d8c5ada29eb01aab18e9))
+* **react:** add check to warn if no ionpage is found, fixes [#19832](https://github.com/ionic-team/ionic/issues/19832) ([#19857](https://github.com/ionic-team/ionic/issues/19857)) ([628e766](https://github.com/ionic-team/ionic/commit/628e76668ea72baebdb02b9dcfe24c0da837fb08))
+* **react:** expand the location stack to better support back button, fixes [#19748](https://github.com/ionic-team/ionic/issues/19748) ([#19856](https://github.com/ionic-team/ionic/issues/19856)) ([d89508b](https://github.com/ionic-team/ionic/commit/d89508b1b58481d518b89362a8792d05f3f451c9))
+* **react:** adding hardware back button support, fixes(19819) ([#19851](https://github.com/ionic-team/ionic/issues/19851)) ([fd9745d](https://github.com/ionic-team/ionic/commit/fd9745ddcddded76d64220838aef0f599bf4352f))
+* **react:** adding swipe back functionality and routerOutlet ready improvements, fixes [#19818](https://github.com/ionic-team/ionic/issues/19818) ([#19849](https://github.com/ionic-team/ionic/issues/19849)) ([bcc40c8](https://github.com/ionic-team/ionic/commit/bcc40c8d59b723bbdb1dfd318bfb2219eb8df3cf))
+* **react:** create a new overlay each time component is presented, fixes [#19841](https://github.com/ionic-team/ionic/issues/19841), [#19823](https://github.com/ionic-team/ionic/issues/19823) ([#19842](https://github.com/ionic-team/ionic/issues/19842)) ([9fad416](https://github.com/ionic-team/ionic/commit/9fad4161be4859969e14d4d33169ef022052d6bf))
+
+
+## [4.11.3](https://github.com/ionic-team/ionic/compare/v4.11.1...v4.11.3) (2019-10-30)
+
+
+### Bug Fixes
+
+* **react:** adding change events to iontabs, fixes [#19665](https://github.com/ionic-team/ionic/issues/19665) ([#19711](https://github.com/ionic-team/ionic/issues/19711)) ([b7baf24](https://github.com/ionic-team/ionic/commit/b7baf24e5053a379156e6c3d82c2b5d3afa999f1))
+* **react:** adding HashRouter to available ion routers, fixes [#19621](https://github.com/ionic-team/ionic/issues/19621) ([#19683](https://github.com/ionic-team/ionic/issues/19683)) ([fcdbb3c](https://github.com/ionic-team/ionic/commit/fcdbb3ce98747d3b37107904ca110daad95e48bc))
+* **react:** checking if node is actually an element before treating it like one, fixes [#19769](https://github.com/ionic-team/ionic/issues/19769) ([#19783](https://github.com/ionic-team/ionic/issues/19783)) ([9d0caf6](https://github.com/ionic-team/ionic/commit/9d0caf6de070145c4af618847b27e24c49027b8e))
+* **react:** checking isOpen again after async call before opening overlay, fixes [#19755](https://github.com/ionic-team/ionic/issues/19755) ([f70e71a](https://github.com/ionic-team/ionic/commit/f70e71a3d461cdab65626a5a7e1b6f4d03b852b1))
+* **react:** don't remove current view, provide a better method to determine showGoBack fixes [#19731](https://github.com/ionic-team/ionic/issues/19731) and [#19732](https://github.com/ionic-team/ionic/issues/19732) ([31c754d](https://github.com/ionic-team/ionic/commit/31c754dab7ada494ff5f0026d5cf3f7f65198eff))
+* **react:** removing pages from DOM on nav, fixes [#19701](https://github.com/ionic-team/ionic/issues/19701) ([#19712](https://github.com/ionic-team/ionic/issues/19712)) ([ee21d3a](https://github.com/ionic-team/ionic/commit/ee21d3ae43d8c6b076387a58bca655a56c920bcd))
+* **react:** unmount leaving view when using browser back button, fixes [#19749](https://github.com/ionic-team/ionic/issues/19749) ([#19781](https://github.com/ionic-team/ionic/issues/19781)) ([2dc5540](https://github.com/ionic-team/ionic/commit/2dc554091056612f1bcd2751d6eeb41cae488751))
+
+
+
+## [4.11.2](https://github.com/ionic-team/ionic/compare/v4.11.0...v4.11.2) (2019-10-21)
 
 
 ### Bug Fixes

angular/src/directives/navigation/nav-params.ts

@@ -38,7 +38,7 @@ export class NavParams {
    *
    * @param param Which param you want to look up
    */
-  get(param: string): any {
+  get<T = any>(param: string): T {
     return this.data[param];
   }
 }

angular/src/index.ts

@@ -30,6 +30,8 @@ export { ToastController } from './providers/toast-controller';
 export { NavController } from './providers/nav-controller';
 export { DomController } from './providers/dom-controller';
 export { Config } from './providers/config';
+export { AnimationController } from './providers/animation-controller';
+export { GestureController } from './providers/gesture-controller';
 
 // ROUTER STRATEGY
 export { IonicRouteStrategy } from './util/ionic-router-reuse-strategy';

angular/src/providers/animation-controller.ts

@@ -0,0 +1,32 @@
+import { Injectable } from '@angular/core';
+import { Animation, createAnimation, getTimeGivenProgression } from '@ionic/core';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class AnimationController {
+  /**
+   * Create a new animation
+   */
+  create(animationId?: string): Animation {
+    return createAnimation(animationId);
+  }
+
+  /**
+   * EXPERIMENTAL
+   *
+   * Given a progression and a cubic bezier function,
+   * this utility returns the time value(s) at which the
+   * cubic bezier reaches the given time progression.
+   *
+   * If the cubic bezier never reaches the progression
+   * the result will be an empty array.
+   *
+   * This is most useful for switching between easing curves
+   * when doing a gesture animation (i.e. going from linear easing
+   * during a drag, to another easing when `progressEnd` is called)
+   */
+  easingTime(p0: number[], p1: number[], p2: number[], p3: number[], progression: number): number[] {
+    return getTimeGivenProgression(p0, p1, p2, p3, progression);
+  }
+}

angular/src/providers/gesture-controller.ts

@@ -0,0 +1,14 @@
+import { Injectable } from '@angular/core';
+import { Gesture, GestureConfig, createGesture } from '@ionic/core';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class GestureController {
+  /**
+   * Create a new gesture
+   */
+  create(opts: GestureConfig): Gesture {
+    return createGesture(opts);
+  }
+}

core/api.txt

@@ -965,6 +965,7 @@ ion-searchbar,event,ionClear,void,true
 ion-searchbar,event,ionFocus,void,true
 ion-searchbar,event,ionInput,KeyboardEvent,true
 ion-searchbar,css-prop,--background
+ion-searchbar,css-prop,--box-shadow
 ion-searchbar,css-prop,--cancel-button-color
 ion-searchbar,css-prop,--clear-button-color
 ion-searchbar,css-prop,--color
@@ -1037,6 +1038,8 @@ ion-select,css-prop,--padding-bottom
 ion-select,css-prop,--padding-end
 ion-select,css-prop,--padding-start
 ion-select,css-prop,--padding-top
+ion-select,css-prop,--placeholder-color
+ion-select,css-prop,--placeholder-opacity
 
 ion-select-option,shadow
 ion-select-option,prop,disabled,boolean,false,false,false
@@ -1090,6 +1093,10 @@ ion-slides,event,ionSlideTransitionStart,void,true
 ion-slides,event,ionSlideWillChange,void,true
 ion-slides,css-prop,--bullet-background
 ion-slides,css-prop,--bullet-background-active
+ion-slides,css-prop,--progress-bar-background
+ion-slides,css-prop,--progress-bar-background-active
+ion-slides,css-prop,--scroll-bar-background
+ion-slides,css-prop,--scroll-bar-background-active
 
 ion-spinner,shadow
 ion-spinner,prop,color,string | undefined,undefined,false,false
@@ -1098,12 +1105,15 @@ ion-spinner,prop,name,"bubbles" | "circles" | "circular" | "crescent" | "dots" |
 ion-spinner,prop,paused,boolean,false,false,false
 ion-spinner,css-prop,--color
 
-ion-split-pane,none
+ion-split-pane,shadow
 ion-split-pane,prop,contentId,string | undefined,undefined,false,false
 ion-split-pane,prop,disabled,boolean,false,false,false
 ion-split-pane,prop,when,boolean | string,QUERY['lg'],false,false
 ion-split-pane,event,ionSplitPaneVisible,{ visible: boolean; },true
 ion-split-pane,css-prop,--border
+ion-split-pane,css-prop,--side-max-width
+ion-split-pane,css-prop,--side-min-width
+ion-split-pane,css-prop,--side-width
 
 ion-tab,shadow
 ion-tab,prop,component,Function | HTMLElement | null | string | undefined,undefined,false,false

core/package.json

@@ -34,18 +34,18 @@
     "tslib": "^1.10.0"
   },
   "devDependencies": {
-    "@stencil/core": "1.6.1",
+    "@stencil/core": "1.7.5",
     "@stencil/sass": "1.0.1",
-    "@types/jest": "24.0.17",
-    "@types/node": "12.7.1",
+    "@types/jest": "24.0.21",
+    "@types/node": "12.12.3",
     "@types/puppeteer": "1.19.1",
     "@types/swiper": "4.4.4",
     "aws-sdk": "^2.497.0",
     "clean-css-cli": "^4.1.11",
     "domino": "^2.1.3",
     "fs-extra": "^8.0.1",
-    "jest": "24.8.0",
-    "jest-cli": "24.8.0",
+    "jest": "24.9.0",
+    "jest-cli": "24.9.0",
     "np": "^5.0.3",
     "pixelmatch": "4.0.2",
     "puppeteer": "1.20.0",
@@ -79,10 +79,10 @@
     "prerelease": "npm run validate && np prerelease --yolo --any-branch --tag next",
     "prerender.e2e": "node scripts/testing/prerender.js",
     "start": "npm run build.css && stencil build --dev --watch --serve",
-    "test": "stencil test --spec --e2e",
-    "test.spec": "stencil test --spec",
+    "test": "stencil test --spec --e2e --max-workers=2",
+    "test.spec": "stencil test --spec --max-workers=2",
     "test.spec.debug": "npx --node-arg=\"--inspect-brk\" stencil test --spec",
-    "test.e2e": "stencil test --e2e",
+    "test.e2e": "stencil test --e2e --max-workers=2",
     "test.screenshot": "stencil test --e2e --screenshot --screenshot-connector=scripts/screenshot/dev.js",
     "test.screenshot.ci": "stencil test --e2e --screenshot --screenshot-connector=scripts/screenshot/ci.js --ci",
     "test.watch": "jest --watch --no-cache",

core/src/components.d.ts

@@ -1,3 +1,4 @@
+/* eslint-disable */
 /* tslint:disable */
 /**
  * This is an autogenerated file created by the Stencil compiler.

core/src/components/alert/alert-interface.ts

@@ -20,7 +20,7 @@ export interface AlertOptions {
 }
 
 export interface AlertInput {
-  type?: TextFieldTypes | 'checkbox' | 'radio';
+  type?: TextFieldTypes | 'checkbox' | 'radio' | 'textarea';
   name?: string;
   placeholder?: string;
   value?: any;

core/src/components/alert/alert.scss

@@ -197,3 +197,8 @@
 .alert-checkbox-inner {
   box-sizing: border-box;
 }
+
+textarea.alert-input {
+  min-height: $alert-input-min-height;
+  resize: none;
+}

core/src/components/alert/alert.tsx

@@ -373,25 +373,46 @@ export class Alert implements ComponentInterface, OverlayInterface {
     }
     return (
       <div class="alert-input-group" aria-labelledby={labelledby}>
-        { inputs.map(i => (
-          <div class="alert-input-wrapper">
-            <input
-              placeholder={i.placeholder}
-              value={i.value}
-              type={i.type}
-              min={i.min}
-              max={i.max}
-              onInput={e => i.value = (e.target as any).value}
-              id={i.id}
-              disabled={i.disabled}
-              tabIndex={0}
-              class={{
-                'alert-input': true,
-                'alert-input-disabled': i.disabled || false
-              }}
-            />
-          </div>
-        ))}
+        { inputs.map(i => {
+          if (i.type === 'textarea') {
+            return (
+              <div class="alert-input-wrapper">
+                <textarea
+                  placeholder={i.placeholder}
+                  value={i.value}
+                  onInput={e => i.value = (e.target as any).value}
+                  id={i.id}
+                  disabled={i.disabled}
+                  tabIndex={0}
+                  class={{
+                    'alert-input': true,
+                    'alert-input-disabled': i.disabled || false
+                  }}
+                />
+              </div>
+            );
+          } else {
+            return (
+              <div class="alert-input-wrapper">
+                <input
+                  placeholder={i.placeholder}
+                  value={i.value}
+                  type={i.type}
+                  min={i.min}
+                  max={i.max}
+                  onInput={e => i.value = (e.target as any).value}
+                  id={i.id}
+                  disabled={i.disabled}
+                  tabIndex={0}
+                  class={{
+                    'alert-input': true,
+                    'alert-input-disabled': i.disabled || false
+                  }}
+                />
+              </div>
+            );
+          }
+        })}
       </div>
     );
   }

core/src/components/alert/alert.vars.scss

@@ -14,3 +14,6 @@ $alert-button-line-height:        20px !default;
 
 /// @prop - Font size of the alert button
 $alert-button-font-size:          14px !default;
+
+/// @prop - Minimum height of a textarea in the alert
+$alert-input-min-height:          37px !default;

core/src/components/alert/readme.md

@@ -17,7 +17,7 @@ Optionally, a `role` property can be added to a button, such as `cancel`. If a `
 
 ### Inputs
 
-Alerts can also include several different inputs whose data can be passed back to the app. Inputs can be used as a simple way to prompt users for information. Radios, checkboxes and text inputs are all accepted, but they cannot be mixed. For example, an alert could have all radio button inputs, or all checkbox inputs, but the same alert cannot mix radio and checkbox inputs. Do note however, different types of "text" inputs can be mixed, such as `url`, `email`, `text`, etc. If you require a complex form UI which doesn't fit within the guidelines of an alert then we recommend building the form within a modal instead.
+Alerts can also include several different inputs whose data can be passed back to the app. Inputs can be used as a simple way to prompt users for information. Radios, checkboxes and text inputs are all accepted, but they cannot be mixed. For example, an alert could have all radio button inputs, or all checkbox inputs, but the same alert cannot mix radio and checkbox inputs. Do note however, different types of "text" inputs can be mixed, such as `url`, `email`, `text`, `textarea` etc. If you require a complex form UI which doesn't fit within the guidelines of an alert then we recommend building the form within a modal instead.
 
 
 <!-- Auto Generated Below -->
@@ -102,6 +102,13 @@ export class AlertExample {
           value: 'hello',
           placeholder: 'Placeholder 2'
         },
+        // multiline input.
+        {
+          name: 'paragraph',
+          id: 'paragraph',
+          type: 'textarea',
+          placeholder: 'Placeholder 3'
+        },
         {
           name: 'name3',
           value: 'http://ionicframework.com',
@@ -346,6 +353,13 @@ function presentAlertPrompt() {
       value: 'hello',
       placeholder: 'Placeholder 2'
     },
+    // multiline input.
+    {
+      name: 'paragraph',
+      id: 'paragraph',
+      type: 'textarea',
+      placeholder: 'Placeholder 3'
+    },
     {
       name: 'name3',
       value: 'http://ionicframework.com',

core/src/components/alert/test/basic/index.html

@@ -131,6 +131,11 @@
             placeholder: 'Placeholder 3',
             disabled: true
           },
+          {
+              type: 'textarea',
+              placeholder: 'Placeholder 4',
+              value: 'Textarea hello'
+          },
           {
             name: 'name3',
             type: 'text',

core/src/components/alert/usage/angular.md

@@ -73,6 +73,13 @@ export class AlertExample {
           value: 'hello',
           placeholder: 'Placeholder 2'
         },
+        // multiline input.
+        {
+          name: 'paragraph',
+          id: 'paragraph',
+          type: 'textarea',
+          placeholder: 'Placeholder 3'
+        },
         {
           name: 'name3',
           value: 'http://ionicframework.com',

core/src/components/alert/usage/javascript.md

@@ -58,6 +58,13 @@ function presentAlertPrompt() {
       value: 'hello',
       placeholder: 'Placeholder 2'
     },
+    // multiline input.
+    {
+      name: 'paragraph',
+      id: 'paragraph',
+      type: 'textarea',
+      placeholder: 'Placeholder 3'
+    },
     {
       name: 'name3',
       value: 'http://ionicframework.com',

core/src/components/card/card.ios.scss

@@ -5,7 +5,7 @@
 // --------------------------------------------------
 
 :host {
-  --background: var(--ion-item-background, transparent);
+  --background: #{$item-ios-background};
   --color: #{$card-ios-text-color};
 
   @include margin($card-ios-margin-top, $card-ios-margin-end, $card-ios-margin-bottom, $card-ios-margin-start);

core/src/components/card/card.md.scss

@@ -5,7 +5,7 @@
 // --------------------------------------------------
 
 :host {
-  --background: var(--ion-item-background, transparent);
+  --background: #{$item-md-background};
   --color: #{$card-md-text-color};
 
   @include margin($card-md-margin-top, $card-md-margin-end, $card-md-margin-bottom, $card-md-margin-start);