From 5692abe3fd834947bbe7e94a3e3214ff63b503a1 Mon Sep 17 00:00:00 2001
From: Brandy Carney <brandyscarney@gmail.com>
Date: Fri, 15 Apr 2016 15:01:52 -0400
Subject: [PATCH] fix(showHideWhen): remove hidden attribute on directives and
 use classes
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Each directive applies a different class so they won’t remove each
other if they’re on the same element. If either class is applied the
element won’t display.

closes #5836
---
 ionic/components.core.scss                     |  1 +
 .../show-hide-when/show-hide-when.scss         | 14 ++++++++++++++
 .../show-hide-when/show-hide-when.ts           | 18 ++----------------
 .../show-hide-when/test/basic/main.html        | 10 ++++++++++
 4 files changed, 27 insertions(+), 16 deletions(-)
 create mode 100644 ionic/components/show-hide-when/show-hide-when.scss

diff --git a/ionic/components.core.scss b/ionic/components.core.scss
index 84e1a766f5..7252f4a8ad 100644
--- a/ionic/components.core.scss
+++ b/ionic/components.core.scss
@@ -23,6 +23,7 @@
   "components/modal/modal",
   "components/refresher/refresher",
   "components/scroll/scroll",
+  "components/show-hide-when/show-hide-when",
   "components/slides/slides",
   "components/spinner/spinner",
   "components/virtual-scroll/virtual-scroll";
diff --git a/ionic/components/show-hide-when/show-hide-when.scss b/ionic/components/show-hide-when/show-hide-when.scss
new file mode 100644
index 0000000000..d47865bf23
--- /dev/null
+++ b/ionic/components/show-hide-when/show-hide-when.scss
@@ -0,0 +1,14 @@
+@import "../../globals.core";
+
+// Show / Hide When
+// --------------------------------------------------
+
+// Applied by the showWhen directive
+.hidden-show-when {
+  display: none;
+}
+
+// Applied by the hideWhen directive
+.hidden-hide-when {
+  display: none;
+}
diff --git a/ionic/components/show-hide-when/show-hide-when.ts b/ionic/components/show-hide-when/show-hide-when.ts
index 3e396b3374..28b88b779d 100644
--- a/ionic/components/show-hide-when/show-hide-when.ts
+++ b/ionic/components/show-hide-when/show-hide-when.ts
@@ -91,7 +91,7 @@ export class DisplayWhen {
 @Directive({
   selector: '[showWhen]',
   host: {
-    '[hidden]': 'hidden'
+    '[class.hidden-show-when]': '!isMatch'
   }
 })
 export class ShowWhen extends DisplayWhen {
@@ -104,13 +104,6 @@ export class ShowWhen extends DisplayWhen {
     super(showWhen, platform, ngZone);
   }
 
-  /**
-   * @private
-   */
-  get hidden(): boolean {
-    return !this.isMatch;
-  }
-
 }
 
 /**
@@ -148,7 +141,7 @@ export class ShowWhen extends DisplayWhen {
 @Directive({
   selector: '[hideWhen]',
   host: {
-    '[hidden]': 'hidden'
+    '[class.hidden-hide-when]': 'isMatch'
   }
 })
 export class HideWhen extends DisplayWhen {
@@ -161,11 +154,4 @@ export class HideWhen extends DisplayWhen {
     super(hideWhen, platform, ngZone);
   }
 
-  /**
-   * @private
-   */
-  get hidden(): boolean {
-    return this.isMatch;
-  }
-
 }
diff --git a/ionic/components/show-hide-when/test/basic/main.html b/ionic/components/show-hide-when/test/basic/main.html
index d4c5b39349..07ac5d9aac 100644
--- a/ionic/components/show-hide-when/test/basic/main.html
+++ b/ionic/components/show-hide-when/test/basic/main.html
@@ -56,4 +56,14 @@
     hideWhen="android,ios"
   </p>
 
+  <p hideWhen="ios" [hidden]="toggle" style="background:magenta; color:white">
+    hideWhen="ios" [hidden]=toggle
+  </p>
+
+  <p showWhen="android" hideWhen="landscape" style="background:black; color:white">
+    showWhen="android" hideWhen="landscape"
+  </p>
+
+  <button (click)="toggle = !toggle">Toggle Hide When</button>
+
 </ion-content>