From eff78faa56cafa38f606b867556e5179bf6256a7 Mon Sep 17 00:00:00 2001
From: Dan Bucholtz <dan.bucholtz@gmail.com>
Date: Mon, 19 Feb 2018 22:00:03 -0600
Subject: [PATCH] feature(hide-when): initial implementation of hide-when

---
 packages/core/src/components.d.ts             | 68 +++++++++++++
 .../src/components/hide-when/hide-when.scss   |  7 ++
 .../src/components/hide-when/hide-when.tsx    | 46 +++++++++
 .../core/src/components/hide-when/readme.md   | 65 +++++++++++++
 .../hide-when/test/basic/index.html           | 96 +++++++++++++++++++
 packages/core/stencil.config.js               |  1 +
 6 files changed, 283 insertions(+)
 create mode 100644 packages/core/src/components/hide-when/hide-when.scss
 create mode 100644 packages/core/src/components/hide-when/hide-when.tsx
 create mode 100644 packages/core/src/components/hide-when/readme.md
 create mode 100644 packages/core/src/components/hide-when/test/basic/index.html

diff --git a/packages/core/src/components.d.ts b/packages/core/src/components.d.ts
index 82d5ae1c3b..52cf434d10 100644
--- a/packages/core/src/components.d.ts
+++ b/packages/core/src/components.d.ts
@@ -1108,6 +1108,40 @@ declare global {
 }
 
 
+import {
+  HideWhen as IonHideWhen
+} from './components/hide-when/hide-when';
+
+declare global {
+  interface HTMLIonHideWhenElement extends IonHideWhen, HTMLStencilElement {
+  }
+  var HTMLIonHideWhenElement: {
+    prototype: HTMLIonHideWhenElement;
+    new (): HTMLIonHideWhenElement;
+  };
+  interface HTMLElementTagNameMap {
+    "ion-hide-when": HTMLIonHideWhenElement;
+  }
+  interface ElementTagNameMap {
+    "ion-hide-when": HTMLIonHideWhenElement;
+  }
+  namespace JSX {
+    interface IntrinsicElements {
+      "ion-hide-when": JSXElements.IonHideWhenAttributes;
+    }
+  }
+  namespace JSXElements {
+    export interface IonHideWhenAttributes extends HTMLAttributes {
+      mediaQuery?: string;
+      mode?: string;
+      or?: boolean;
+      platform?: string;
+      size?: string;
+    }
+  }
+}
+
+
 import {
   InfiniteScrollContent as IonInfiniteScrollContent
 } from './components/infinite-scroll-content/infinite-scroll-content';
@@ -2845,6 +2879,40 @@ declare global {
 }
 
 
+import {
+  ShowWhen as IonShowWhen
+} from './components/show-when/show-when';
+
+declare global {
+  interface HTMLIonShowWhenElement extends IonShowWhen, HTMLStencilElement {
+  }
+  var HTMLIonShowWhenElement: {
+    prototype: HTMLIonShowWhenElement;
+    new (): HTMLIonShowWhenElement;
+  };
+  interface HTMLElementTagNameMap {
+    "ion-show-when": HTMLIonShowWhenElement;
+  }
+  interface ElementTagNameMap {
+    "ion-show-when": HTMLIonShowWhenElement;
+  }
+  namespace JSX {
+    interface IntrinsicElements {
+      "ion-show-when": JSXElements.IonShowWhenAttributes;
+    }
+  }
+  namespace JSXElements {
+    export interface IonShowWhenAttributes extends HTMLAttributes {
+      mediaQuery?: string;
+      mode?: string;
+      or?: boolean;
+      platform?: string;
+      size?: string;
+    }
+  }
+}
+
+
 import {
   SkeletonText as IonSkeletonText
 } from './components/skeleton-text/skeleton-text';
diff --git a/packages/core/src/components/hide-when/hide-when.scss b/packages/core/src/components/hide-when/hide-when.scss
new file mode 100644
index 0000000000..d5106903af
--- /dev/null
+++ b/packages/core/src/components/hide-when/hide-when.scss
@@ -0,0 +1,7 @@
+ion-hide-when.show-content {
+  display: block;
+}
+
+ion-hide-when.hide-content {
+  display: none !important;
+}
\ No newline at end of file
diff --git a/packages/core/src/components/hide-when/hide-when.tsx b/packages/core/src/components/hide-when/hide-when.tsx
new file mode 100644
index 0000000000..eb71153f19
--- /dev/null
+++ b/packages/core/src/components/hide-when/hide-when.tsx
@@ -0,0 +1,46 @@
+import { Component, Element, Prop } from '@stencil/core';
+import { Config, PlatformConfig } from '../../index';
+
+import {
+  DisplayWhen,
+  componentWillLoadImpl,
+} from '../../utils/show-hide-when-utils';
+
+@Component({
+  tag: 'ion-hide-when',
+  styleUrl: './hide-when.scss'
+})
+export class HideWhen implements DisplayWhen {
+
+  @Element() element: HTMLElement;
+  @Prop({ context: 'config' }) config: Config;
+  @Prop({ context: 'platforms' }) calculatedPlatforms: PlatformConfig[];
+
+  @Prop() mediaQuery: string = null;
+  @Prop() size: string = null;
+  @Prop() mode: string = null;
+  @Prop() platform: string = null;
+  @Prop() or = false;
+
+  passesTest = false;
+
+  componentWillLoad() {
+    return componentWillLoadImpl(this);
+  }
+
+  hostData() {
+    return {
+      class: {
+        'show-content': !this.passesTest,
+        'hide-content': this.passesTest
+      }
+    };
+  }
+
+  render() {
+    return <slot></slot>
+  }
+}
+
+
+
diff --git a/packages/core/src/components/hide-when/readme.md b/packages/core/src/components/hide-when/readme.md
new file mode 100644
index 0000000000..4b5c863b87
--- /dev/null
+++ b/packages/core/src/components/hide-when/readme.md
@@ -0,0 +1,65 @@
+# ion-hide-when
+
+
+
+<!-- Auto Generated Below -->
+
+
+## Properties
+
+#### mediaQuery
+
+string
+
+
+#### mode
+
+string
+
+
+#### or
+
+boolean
+
+
+#### platform
+
+string
+
+
+#### size
+
+string
+
+
+## Attributes
+
+#### media-query
+
+string
+
+
+#### mode
+
+string
+
+
+#### or
+
+boolean
+
+
+#### platform
+
+string
+
+
+#### size
+
+string
+
+
+
+----------------------------------------------
+
+*Built with [StencilJS](https://stenciljs.com/)*
diff --git a/packages/core/src/components/hide-when/test/basic/index.html b/packages/core/src/components/hide-when/test/basic/index.html
new file mode 100644
index 0000000000..a1e1abe919
--- /dev/null
+++ b/packages/core/src/components/hide-when/test/basic/index.html
@@ -0,0 +1,96 @@
+<!DOCTYPE html>
+<html dir="ltr">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Hide When - Basic</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
+  <script src="/dist/ionic.js"></script>
+</head>
+
+<body>
+  <ion-app>
+    <ion-page>
+      <ion-header>
+        <ion-toolbar>
+          <ion-title>Hide when - Basic</ion-title>
+        </ion-toolbar>
+      </ion-header>
+
+      <ion-content padding>
+
+        <h2>Mode Tests</h2>
+        <ion-hide-when mode="md, ios">
+          <div>Hides on MD, iOS</div>
+        </ion-hide-when>
+
+        <ion-hide-when mode="md">
+          <div>Hides on MD only</div>
+        </ion-hide-when>
+
+        <ion-hide-when mode="ios">
+          <div>Hides on iOS only</div>
+        </ion-hide-when>
+
+        <h2>Platform Tests</h2>
+
+        <ion-hide-when platform="android,ios">
+          <div>Hides on Android and iOS</div>
+        </ion-hide-when>
+
+        <ion-hide-when platform="ios">
+          <div>Only hide on iOS</div>
+        </ion-hide-when>
+
+        <ion-hide-when platform="android">
+          <div>Only hide on Android</div>
+        </ion-hide-when>
+
+        <ion-hide-when platform="ipad">
+          <div>Only hide on ipad</div>
+        </ion-hide-when>
+
+        <ion-hide-when platform="phablet">
+          <div>Only hide on phablet</div>
+        </ion-hide-when>
+
+        <ion-hide-when platform="iphone">
+          <div>Only hide on phone</div>
+        </ion-hide-when>
+
+        <h2>Size Tests</h2>
+        <ion-hide-when size="xs">
+          <div>Only hide on xs</div>
+        </ion-hide-when>
+
+        <ion-hide-when size="sm">
+          <div>Only hide on sm</div>
+        </ion-hide-when>
+
+        <ion-hide-when size="md">
+          <div>Only hide on md</div>
+        </ion-hide-when>
+
+        <ion-hide-when size="lg">
+          <div>Only hide on lg</div>
+        </ion-hide-when>
+
+        <ion-hide-when size="xl">
+          <div>Only hide on xl</div>
+        </ion-hide-when>
+
+        <ion-hide-when size="xs, m">
+          <div>Only hide on XS or m</div>
+        </ion-hide-when>
+
+      </ion-content>
+
+    </ion-page>
+  </ion-app>
+
+  <script>
+
+  </script>
+</body>
+
+</html>
diff --git a/packages/core/stencil.config.js b/packages/core/stencil.config.js
index 86b9361719..9a40e76782 100644
--- a/packages/core/stencil.config.js
+++ b/packages/core/stencil.config.js
@@ -48,6 +48,7 @@ exports.config = {
     { components: ['ion-tap-click', 'ion-status-tap'] },
     { components: ['ion-platform', 'ion-cordova-platform'] },
     { components: ['ion-nav-pop'] },
+    { components: ['ion-hide-when', 'ion-show-when'] },
   ],
   plugins: [
     sass(),