chore(build): rename ionic directory to src and update all references in the build process.

src/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 !important;
+}
+
+// Applied by the hideWhen directive
+.hidden-hide-when {
+  display: none !important;
+}

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

@@ -0,0 +1,175 @@
+import {Directive, Attribute, NgZone} from '@angular/core';
+
+import {Platform} from '../../platform/platform';
+
+
+/**
+ * @private
+ */
+export class DisplayWhen {
+  protected isMatch: boolean = false;
+  private platform: Platform;
+  private conditions: string[];
+
+  constructor(conditions: string, platform: Platform, ngZone: NgZone) {
+    this.platform = platform;
+
+    if (!conditions) return;
+
+    this.conditions = conditions.split(',');
+
+    // check if its one of the matching platforms first
+    // a platform does not change during the life of an app
+    for (let i = 0; i < this.conditions.length; i++) {
+      if (this.conditions[i] && platform.is(this.conditions[i])) {
+        this.isMatch = true;
+        return;
+      }
+    }
+
+    if ( this.orientation() ) {
+      // add window resize listener
+      platform.onResize(() => {
+        ngZone.run(() => {
+          this.orientation();
+        });
+      });
+      return;
+    }
+
+  }
+
+  orientation(): boolean {
+    for (let i = 0; i < this.conditions.length; i++) {
+
+      if (this.conditions[i] === 'portrait') {
+        this.isMatch = this.platform.isPortrait();
+        return true;
+      }
+
+      if (this.conditions[i] === 'landscape') {
+        this.isMatch = this.platform.isLandscape();
+        return true;
+      }
+    }
+  }
+
+}
+
+/**
+ *
+ * @name ShowWhen
+ * @description
+ * The `showWhen` attribute takes a string that represents a platform or screen orientation.
+ * The element the attribute is added to will only be shown when that platform or screen orientation is active.
+ *
+ * Complements the [hideWhen attribute](../HideWhen). If the `showWhen` attribute is used on an
+ * element that also has the `hideWhen` 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 showWhen="android">
+ *  I am visible on Android!
+ * </div>
+ *
+ * <div showWhen="ios">
+ *  I am visible on iOS!
+ * </div>
+ *
+ * <div showWhen="android,ios">
+ *  I am visible on Android and iOS!
+ * </div>
+ *
+ * <div showWhen="portrait">
+ *  I am visible on Portrait!
+ * </div>
+ *
+ * <div showWhen="landscape">
+ *  I am visible on Landscape!
+ * </div>
+ * ```
+ * @demo /docs/v2/demos/show-when/
+ * @see {@link ../HideWhen HideWhen API Docs}
+ * @see {@link ../../../platform/Platform Platform API Docs}
+ */
+@Directive({
+  selector: '[showWhen]',
+  host: {
+    '[class.hidden-show-when]': '!isMatch'
+  }
+})
+export class ShowWhen extends DisplayWhen {
+
+  constructor(
+    @Attribute('showWhen') showWhen: string,
+    platform: Platform,
+    ngZone: NgZone
+  ) {
+    super(showWhen, platform, ngZone);
+  }
+
+}
+
+/**
+ * @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/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,
+    platform: Platform,
+    ngZone: NgZone
+  ) {
+    super(hideWhen, platform, ngZone);
+  }
+
+}

src/components/show-hide-when/test/basic/index.ts

@@ -0,0 +1,43 @@
+import {App} from '../../../../../ionic';
+import {
+  Control,
+  ControlGroup,
+  NgForm,
+  Validators,
+  NgControl,
+  ControlValueAccessor,
+  NgControlName,
+  NgFormModel,
+  FormBuilder
+} from '@angular/common';
+
+@App({
+  templateUrl: 'main.html'
+})
+class E2EApp {
+  constructor() {
+    this.fruitsForm = new ControlGroup({
+      "appleCtrl": new Control(),
+      "bananaCtrl": new Control(true),
+      "cherryCtrl": new Control(false),
+      "grapeCtrl": new Control(true)
+    });
+
+    this.grapeDisabled = true;
+    this.grapeChecked = true;
+  }
+
+  toggleGrapeChecked() {
+    this.grapeChecked = !this.grapeChecked;
+  }
+
+  toggleGrapeDisabled() {
+    this.grapeDisabled = !this.grapeDisabled;
+  }
+
+  doSubmit(ev) {
+    console.log('Submitting form', this.fruitsForm.value);
+    this.formResults = JSON.stringify(this.fruitsForm.value);
+    ev.preventDefault();
+  }
+}

src/components/show-hide-when/test/basic/main.html

@@ -0,0 +1,79 @@
+
+<ion-toolbar>
+  <ion-title>Show/Hide When</ion-title>
+  <ion-buttons end>
+    <button showWhen="ios">iOS</button>
+    <button showWhen="windows">Windows</button>
+    <button showWhen="android">Android</button>
+  </ion-buttons>
+</ion-toolbar>
+
+
+<ion-content padding>
+  <button showWhen="ios">iOS</button>
+  <button showWhen="windows">Windows</button>
+  <button showWhen="android">Android</button>
+
+  <p showWhen="ios" style="background:blue; color:white">
+    showWhen="ios"
+  </p>
+
+  <p showWhen="android" style="background:green; color:white">
+    showWhen="android"
+  </p>
+
+  <p showWhen="android,ios" style="background:yellow;">
+    showWhen="android,ios"
+  </p>
+
+  <p showWhen="core" style="background:#ddd;">
+    showWhen="core"
+  </p>
+
+  <p showWhen="mobile" style="background:orange;">
+    showWhen="mobile"
+  </p>
+
+  <p showWhen="phablet" style="background:red;">
+    showWhen="phablet"
+  </p>
+
+  <p showWhen="tablet" style="background:black;color:white">
+    showWhen="tablet"
+  </p>
+
+  <p showWhen="iphone" style="background:purple; color:white;">
+    showWhen="iphone"
+  </p>
+
+  <p showWhen="landscape" style="background:pink;">
+    showWhen="landscape"
+  </p>
+
+  <p showWhen="portrait" style="background:maroon; color:white;">
+    showWhen="portrait"
+  </p>
+
+  <p hideWhen="ios" style="background:blue; color:white">
+    hideWhen="ios"
+  </p>
+
+  <p hideWhen="android" style="background:green; color:white">
+    hideWhen="android"
+  </p>
+
+  <p hideWhen="android,ios" style="background:yellow;">
+    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>