feature(hide-when): add orientation support, recalc on resize event

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

@@ -1,9 +1,9 @@
-import { Component, Element, Prop } from '@stencil/core';
+import { Component, Element, Listen, Prop, State } from '@stencil/core';
 import { Config, PlatformConfig } from '../../index';
 
 import {
   DisplayWhen,
-  componentWillLoadImpl,
+  updateTestResults,
 } from '../../utils/show-hide-when-utils';
 
 @Component({
@@ -16,16 +16,18 @@ export class HideWhen implements DisplayWhen {
   @Prop({ context: 'config' }) config: Config;
   @Prop({ context: 'platforms' }) calculatedPlatforms: PlatformConfig[];
 
+  @Prop() orientation: string = null;
   @Prop() mediaQuery: string = null;
   @Prop() size: string = null;
   @Prop() mode: string = null;
   @Prop() platform: string = null;
   @Prop() or = false;
 
-  passesTest = false;
+  @State() passesTest = false;
 
+  @Listen('window:resize')
   componentWillLoad() {
-    return componentWillLoadImpl(this);
+    return updateTestResults(this);
   }
 
   hostData() {

packages/core/src/components/hide-when/readme.md

@@ -22,6 +22,11 @@ string
 boolean
 
 
+#### orientation
+
+string
+
+
 #### platform
 
 string
@@ -49,6 +54,11 @@ string
 boolean
 
 
+#### orientation
+
+string
+
+
 #### platform
 
 string

packages/core/src/components/hide-when/test/basic/index.html

@@ -32,6 +32,15 @@
           <div>Hides on iOS only</div>
         </ion-hide-when>
 
+        <h2>Orientation Tests</h2>
+        <ion-hide-when orientation="portrait">
+          <div>Hides on portrait orientation</div>
+        </ion-hide-when>
+
+        <ion-hide-when orientation="landscape">
+          <div>Hides on landscape orientation</div>
+        </ion-hide-when>
+
         <h2>Platform Tests</h2>
 
         <ion-hide-when platform="android,ios">