fix(platform): better detect platforms + css API

fixes #15165
fixes #15116

angular/src/providers/platform.ts

@@ -1,12 +1,11 @@
 import { EventEmitter, Injectable } from '@angular/core';
-import { PlatformConfig, detectPlatforms } from '@ionic/core';
+import { Platforms, getPlatforms, isPlatform } from '@ionic/core';
 import { proxyEvent } from '../util/util';
 
 
 @Injectable()
 export class Platform {
 
-  private _platforms = detectPlatforms(window);
   private _readyPromise: Promise<string>;
 
   /**
@@ -94,20 +93,8 @@ export class Platform {
    * | electron        | in Electron on a desktop device.   |
    *
    */
-  is(platformName: string): boolean {
-    return this._platforms.some(p => p.name === platformName);
-  }
-
-  /**
-   * @param win the window object
-   * @param platforms an array of platforms (platform configs)
-   * to get the appropriate platforms according to the configs provided.
-   * @description
-   * Detects the platforms using window and the platforms config provided.
-   * Populates the platforms array so they can be used later on for platform detection.
-   */
-  detectPlatforms(platforms: PlatformConfig[]) {
-    return detectPlatforms(window, platforms);
+  is(platformName: Platforms): boolean {
+    return isPlatform(window, platformName);
   }
 
   /**
@@ -130,32 +117,9 @@ export class Platform {
    * ```
    */
   platforms(): string[] {
-    return this._platforms.map(platform => platform.name);
-  }
-
-  /**
-   * Returns an object containing version information about all of the platforms.
-   *
-   * ```
-   * import { Platform } from 'ionic-angular';
-   *
-   * @Component({...})
-   * export MyPage {
-   *   constructor(public platform: Platform) {
-   *     // This will print an object containing
-   *     // all of the platforms and their versions
-   *     console.log(platform.versions());
-   *   }
-   * }
-   * ```
-   *
-   * @returns An object containing all of the platforms and their versions.
-   */
-  versions(): PlatformConfig[] {
-    return this._platforms.slice();
+    return getPlatforms(window);
   }
 
-
   ready(): Promise<string> {
     return this._readyPromise;
   }
@@ -164,7 +128,6 @@ export class Platform {
     return document.dir === 'rtl';
   }
 
-
   /**
    * Get the query string parameter
    */

core/src/components/action-sheet/action-sheet.ios.scss

@@ -9,7 +9,7 @@
 }
 
 .action-sheet-wrapper {
-  @include margin(var(--ion-safe-area-top), auto, var(--ion-safe-area-bottom), auto);
+  @include margin(var(--ion-safe-area-top, 0), auto, var(--ion-safe-area-bottom, 0), auto);
 }
 
 

core/src/components/app/app.scss

@@ -1,27 +1,4 @@
 
-ion-app.is-device {
+html.plt-mobile ion-app {
   user-select: none;
 }
-
-ion-app.statusbar-padding {
-  --ion-safe-area-top: 20px;
-}
-
-// TODO: remove once Safari 11.2 dies
-@supports (padding-top: constant(safe-area-inset-top)) {
-  ion-app.statusbar-padding {
-    --ion-safe-area-top: constant(safe-area-inset-top);
-    --ion-safe-area-bottom: constant(safe-area-inset-bottom);
-    --ion-safe-area-left: constant(safe-area-inset-left);
-    --ion-safe-area-right: constant(safe-area-inset-right);
-  }
-}
-
-@supports (padding-top: env(safe-area-inset-top)) {
-  ion-app.statusbar-padding {
-    --ion-safe-area-top: env(safe-area-inset-top);
-    --ion-safe-area-bottom: env(safe-area-inset-bottom);
-    --ion-safe-area-left: env(safe-area-inset-left);
-    --ion-safe-area-right: env(safe-area-inset-right);
-  }
-}

core/src/components/app/app.tsx

@@ -1,53 +1,39 @@
 import { Component, Element, Prop, QueueApi } from '@stencil/core';
 
 import { Config } from '../../interface';
-import { isDevice, isHybrid, isStandaloneMode, needInputShims } from '../../utils/platform';
+import { isPlatform } from '../../utils/platform';
 
 @Component({
   tag: 'ion-app',
   styleUrl: 'app.scss'
 })
 export class App {
 
-  private isDevice = false;
-
   @Element() el!: HTMLElement;
 
   @Prop({ context: 'window' }) win!: Window;
   @Prop({ context: 'config' }) config!: Config;
   @Prop({ context: 'queue' }) queue!: QueueApi;
 
-  componentWillLoad() {
-    this.isDevice = this.config.getBoolean('isDevice', isDevice(this.win));
-  }
-
   componentDidLoad() {
     setTimeout(() => {
       importTapClick(this.win);
       importInputShims(this.win, this.config);
-      importStatusTap(this.win, this.isDevice, this.queue);
+      importStatusTap(this.win, this.queue);
     }, 32);
   }
 
   hostData() {
-    const hybrid = isHybrid(this.win);
-    const isStandalone = isStandaloneMode(this.win);
-    const statusbarPadding = this.config.getBoolean('statusbarPadding', hybrid || isStandalone);
-
     return {
       class: {
         'ion-page': true,
-        'is-device': this.isDevice,
-        'is-hydrid': hybrid,
-        'is-standalone': isStandalone,
-        'statusbar-padding': statusbarPadding
       }
     };
   }
 }
 
-async function importStatusTap(win: Window, device: boolean, queue: QueueApi) {
-  if (device) {
+async function importStatusTap(win: Window, queue: QueueApi) {
+  if (isPlatform(win, 'hybrid')) {
     (await import('../../utils/status-tap')).startStatusTap(win, queue);
   }
 }
@@ -62,3 +48,7 @@ async function importInputShims(win: Window, config: Config) {
     (await import('../../utils/input-shims/input-shims')).startInputShims(win.document, config);
   }
 }
+
+function needInputShims(win: Window) {
+  return isPlatform(win, 'ios') && isPlatform(win, 'mobile');
+}

core/src/components/col/col.tsx

@@ -1,6 +1,6 @@
 import { Component, Element, Listen, Prop } from '@stencil/core';
 
-import { isMatch } from '../../utils/media';
+import { matchBreakpoint } from '../../utils/media';
 
 const SUPPORTS_VARS = !!(CSS && CSS.supports && CSS.supports('--a', '0'));
 const BREAKPOINTS = ['', 'xs', 'sm', 'md', 'lg', 'xl'];
@@ -11,7 +11,7 @@ const BREAKPOINTS = ['', 'xs', 'sm', 'md', 'lg', 'xl'];
   shadow: true
 })
 export class Col {
-  [key: string]: any;
+  @Prop({ context: 'window' }) win!: Window;
 
   @Element() el!: HTMLStencilElement;
 
@@ -166,11 +166,11 @@ export class Col {
     let matched;
 
     for (const breakpoint of BREAKPOINTS) {
-      const matches = isMatch(breakpoint);
+      const matches = matchBreakpoint(this.win, breakpoint);
 
       // Grab the value of the property, if it exists and our
       // media query matches we return the value
-      const columns = this[property + breakpoint.charAt(0).toUpperCase() + breakpoint.slice(1)];
+      const columns = (this as any)[property + breakpoint.charAt(0).toUpperCase() + breakpoint.slice(1)];
 
       if (matches && columns !== undefined) {
         matched = columns;

core/src/components/footer/footer.scss

@@ -15,5 +15,5 @@ ion-footer {
 }
 
 ion-footer ion-toolbar:last-child {
-  padding-bottom: var(--ion-safe-area-bottom);
+  padding-bottom: var(--ion-safe-area-bottom, 0);
 }

core/src/components/hide-when/hide-when.tsx

@@ -1,16 +1,14 @@
 import { Component, Element, Listen, Prop, State } from '@stencil/core';
 
 import { Config, Mode } from '../../interface';
-import { DisplayWhen, PLATFORM_CONFIGS, PlatformConfig, detectPlatforms, updateTestResults } from '../../utils/show-hide-when-utils';
+import { DisplayWhen, updateTestResults } from '../../utils/show-hide-when-utils';
 
 @Component({
   tag: 'ion-hide-when',
   styleUrl: './hide-when.scss'
 })
 export class HideWhen implements DisplayWhen {
 
-  calculatedPlatforms!: PlatformConfig[];
-
   @Element() element!: HTMLElement;
   @Prop({ context: 'config' }) config!: Config;
   @Prop({ context: 'window' }) win!: Window;
@@ -52,13 +50,12 @@ export class HideWhen implements DisplayWhen {
   @State() passesTest = false;
 
   componentWillLoad() {
-    this.calculatedPlatforms = detectPlatforms(this.win, PLATFORM_CONFIGS);
     this.onResize();
   }
 
   @Listen('window:resize')
   onResize() {
-    updateTestResults(this);
+    this.passesTest = updateTestResults(this);
   }
 
   hostData() {

core/src/components/nav/nav.tsx

@@ -797,29 +797,21 @@ export class Nav implements NavOutlet {
 
       ...opts
     };
-    const trns = await transition(animationOpts);
-    return this.transitionFinish(trns, enteringView, leavingView, opts);
+    const { hasCompleted } = await transition(animationOpts);
+    return this.transitionFinish(hasCompleted, enteringView, leavingView, opts);
   }
 
   private transitionFinish(
-    trans: Animation | null,
+    hasCompleted: boolean,
     enteringView: ViewController,
     leavingView: ViewController | undefined,
     opts: NavOptions
   ): NavResult {
-    const hasCompleted = trans ? trans.hasCompleted : true;
-
     const cleanupView = hasCompleted ? enteringView : leavingView;
     if (cleanupView) {
       this.cleanup(cleanupView);
     }
 
-    // this is the root transition
-    // it's safe to destroy this transition
-    if (trans) {
-      trans.destroy();
-    }
-
     return {
       hasCompleted,
       requiresTransition: true,

core/src/components/picker/picker.scss

@@ -56,7 +56,7 @@ ion-picker {
 
   justify-content: center;
 
-  margin-bottom: var(--ion-safe-area-bottom);
+  margin-bottom: var(--ion-safe-area-bottom, 0);
 
   contain: strict;
   overflow: hidden;

core/src/components/show-when/show-when.tsx

@@ -1,7 +1,7 @@
 import { Component, Element, Listen, Prop, State } from '@stencil/core';
 
 import { Config, Mode } from '../../interface';
-import { DisplayWhen, PLATFORM_CONFIGS, PlatformConfig, detectPlatforms, updateTestResults } from '../../utils/show-hide-when-utils';
+import { DisplayWhen, updateTestResults } from '../../utils/show-hide-when-utils';
 
 @Component({
   tag: 'ion-show-when',
@@ -12,7 +12,6 @@ export class ShowWhen implements DisplayWhen {
   @Element() element?: HTMLElement;
 
   @Prop({ context: 'config' }) config!: Config;
-  @Prop({ context: 'platforms' }) calculatedPlatforms!: PlatformConfig[];
   @Prop({ context: 'window' }) win!: Window;
 
   /**
@@ -52,13 +51,12 @@ export class ShowWhen implements DisplayWhen {
   @State() passesTest = false;
 
   componentWillLoad() {
-    this.calculatedPlatforms = detectPlatforms(this.win, PLATFORM_CONFIGS);
     this.onResize();
   }
 
   @Listen('window:resize')
   onResize() {
-    updateTestResults(this);
+    this.passesTest = updateTestResults(this);
   }
 
   hostData() {

core/src/components/tabbar/tabbar.scss

@@ -34,7 +34,7 @@
 }
 
 :host(.placement-bottom) {
-  padding-bottom: var(--ion-safe-area-bottom);
+  padding-bottom: var(--ion-safe-area-bottom, 0);
 }
 
 

core/src/components/toast/toast.md.scss

@@ -25,11 +25,11 @@
 }
 
 .toast-md .toast-wrapper.toast-top {
-  padding-top: var(--ion-safe-area-top);
+  padding-top: var(--ion-safe-area-top, 0);
 }
 
 .toast-md .toast-wrapper.toast-bottom {
-  padding-bottom: var(--ion-safe-area-bottom);
+  padding-bottom: var(--ion-safe-area-bottom, 0);
 }
 
 .toast-md .toast-wrapper.toast-middle {

core/src/css/structure.scss

@@ -90,3 +90,29 @@ ion-toast-controller,
 .ion-page-invisible {
   opacity: 0;
 }
+
+html.plt-ios.plt-hybrid, html.plt-ios.plt-pwa {
+  --ion-statusbar-padding: 20px;
+}
+html {
+  --ion-safe-area-top: var(--ion-statusbar-padding);
+}
+
+// TODO: remove once Safari 11.2 dies
+@supports (padding-top: constant(safe-area-inset-top)) {
+  html {
+    --ion-safe-area-top: constant(safe-area-inset-top);
+    --ion-safe-area-bottom: constant(safe-area-inset-bottom);
+    --ion-safe-area-left: constant(safe-area-inset-left);
+    --ion-safe-area-right: constant(safe-area-inset-right);
+  }
+}
+
+@supports (padding-top: env(safe-area-inset-top)) {
+  html {
+    --ion-safe-area-top: env(safe-area-inset-top);
+    --ion-safe-area-bottom: env(safe-area-inset-bottom);
+    --ion-safe-area-left: env(safe-area-inset-left);
+    --ion-safe-area-right: env(safe-area-inset-right);
+  }
+}

core/src/global/config.ts

@@ -8,8 +8,6 @@ export interface IonicConfig {
   mode?: Mode;
   persistConfig?: boolean;
 
-  isDevice?: boolean;
-  statusbarPadding?: boolean;
   inputShims?: boolean;
   backButtonIcon?: string;
   backButtonText?: string;