refactor(show-hide-when): restructure show-when, hide-when component to separate modules

restructure show-when, hide-when component to separate modules

src/components/show-hide-when/hide-when.ts

@@ -0,0 +1,64 @@
+import { Attribute, Directive, NgZone } from '@angular/core';
+
+import { Platform } from '../../platform/platform';
+
+import { DisplayWhen } from './show-hide-when';
+
+/**
+ * @name HideWhen
+ * @description
+ * The `hideWhen` attribute takes a string that represents a plaform or screen orientation.
+ * The element the attribute is added to will only be hidden when that platform or screen orientation is active.
+ *
+ * Complements the [showWhen attribute](../ShowWhen). If the `hideWhen` attribute is used on an
+ * element that also has the `showWhen` attribute, the element will not show if `hideWhen` evaluates
+ * to `true` or `showWhen` evaluates to `false`. If the `hidden` attribute is also added, the element
+ * will not show if `hidden` evaluates to `true`.
+ *
+ * View the [Platform API docs](../../../platform/Platform) for more information on the different
+ * platforms you can use.
+ *
+ * @usage
+ * ```html
+ * <div hideWhen="android">
+ *  I am hidden on Android!
+ * </div>
+ *
+ * <div hideWhen="ios">
+ *  I am hidden on iOS!
+ * </div>
+ *
+ * <div hideWhen="android,ios">
+ *  I am hidden on Android and iOS!
+ * </div>
+ *
+ * <div hideWhen="portrait">
+ *  I am hidden on Portrait!
+ * </div>
+ *
+ * <div hideWhen="landscape">
+ *  I am hidden on Landscape!
+ * </div>
+ * ```
+ *
+ * @demo /docs/v2/demos/src/hide-when/
+ * @see {@link ../ShowWhen ShowWhen API Docs}
+ * @see {@link ../../../platform/Platform Platform API Docs}
+*/
+@Directive({
+  selector: '[hideWhen]',
+  host: {
+    '[class.hidden-hide-when]': 'isMatch'
+  }
+})
+export class HideWhen extends DisplayWhen {
+
+  constructor(
+    @Attribute('hideWhen') hideWhen: string,
+    plt: Platform,
+    zone: NgZone
+  ) {
+    super(hideWhen, plt, zone);
+  }
+
+}