fix(hide-when): mode is a reserved property

core/src/components.d.ts

@@ -1539,7 +1539,7 @@ export namespace Components {
     /**
     * If the current platform matches the given value, the element will hide. Accepts a comma separated list of modes to match against.
     */
-    'mode': Mode;
+    'modes': string;
     /**
     * If false, and two or more conditions are set, the element will hide when all are true. If true, and two or more conditions are set, the element will hide when at least one is true.
     */
@@ -1549,7 +1549,7 @@ export namespace Components {
     */
     'orientation': string;
     /**
-    * If the current platform matches the given value, the element will hide. Accepts a comma separated list of platform to match against.
+    * If the current platform matches the given value, the element will hide. Accepts a comma separated list of platforms to match against.
     */
     'platform': string;
     /**
@@ -1565,7 +1565,7 @@ export namespace Components {
     /**
     * If the current platform matches the given value, the element will hide. Accepts a comma separated list of modes to match against.
     */
-    'mode'?: Mode;
+    'modes'?: string;
     /**
     * If false, and two or more conditions are set, the element will hide when all are true. If true, and two or more conditions are set, the element will hide when at least one is true.
     */
@@ -1575,7 +1575,7 @@ export namespace Components {
     */
     'orientation'?: string;
     /**
-    * If the current platform matches the given value, the element will hide. Accepts a comma separated list of platform to match against.
+    * If the current platform matches the given value, the element will hide. Accepts a comma separated list of platforms to match against.
     */
     'platform'?: string;
     /**
@@ -4065,7 +4065,7 @@ export namespace Components {
     /**
     * If the current platform matches the given value, the element will show. Accepts a comma separated list of modes to match against.
     */
-    'mode': Mode;
+    'modes': string;
     /**
     * If false, and two or more conditions are set, the element will show when all are true. If true, and two or more conditions are set, the element will show when at least one is true.
     */
@@ -4091,7 +4091,7 @@ export namespace Components {
     /**
     * If the current platform matches the given value, the element will show. Accepts a comma separated list of modes to match against.
     */
-    'mode'?: Mode;
+    'modes'?: string;
     /**
     * If false, and two or more conditions are set, the element will show when all are true. If true, and two or more conditions are set, the element will show when at least one is true.
     */

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

@@ -1,7 +1,7 @@
 import { Component, Element, Listen, Prop, State } from '@stencil/core';
 
-import { Config, Mode } from '../../interface';
+import { Config } from '../../interface';
-import { DisplayWhen, updateTestResults } from '../../utils/show-hide-when-utils';
+import { DisplayWhen, getTestResult } from '../../utils/show-hide-when-utils';
 
 @Component({
   tag: 'ion-hide-when',
@@ -17,7 +17,7 @@ export class HideWhen implements DisplayWhen {
    * If the current platform matches the given value, the element will hide.
    * Accepts a comma separated list of modes to match against.
    */
-  @Prop() mode!: Mode;
+  @Prop() modes!: string;
 
   /**
    * If the current orientation matches this value, the element will hide.
@@ -37,7 +37,7 @@ export class HideWhen implements DisplayWhen {
 
   /**
    * If the current platform matches the given value, the element will hide.
-   * Accepts a comma separated list of platform to match against.
+   * Accepts a comma separated list of platforms to match against.
    */
   @Prop() platform?: string;
 
@@ -55,7 +55,7 @@ export class HideWhen implements DisplayWhen {
 
   @Listen('window:resize')
   onResize() {
-    this.passesTest = updateTestResults(this);
+    this.passesTest = getTestResult(this);
   }
 
   hostData() {

core/src/components/input/input-base.tsx

@@ -1,51 +0,0 @@
-// Shared Interfaces
-
-import { EventEmitter } from '@stencil/core';
-
-import { StyleEvent } from '../../interface';
-
-export interface InputBaseComponent {
-  ionStyle: EventEmitter<StyleEvent>;
-  ionBlur: EventEmitter<void>;
-  ionFocus: EventEmitter<void>;
-
-  clearOnEdit: boolean;
-  didBlurAfterEdit: boolean;
-
-  // Shared Attributes
-  autocapitalize?: string;
-  autocomplete?: string;
-  autofocus?: boolean;
-  disabled?: boolean;
-  minlength?: number;
-  maxlength?: number;
-  name?: string;
-  placeholder?: string;
-  readonly?: boolean;
-  required?: boolean;
-  spellcheck?: boolean;
-  value?: string;
-}
-
-export interface InputComponent extends InputBaseComponent {
-  clearInput: boolean;
-
-  // Input Attributes
-  accept?: string;
-  autocorrect?: string;
-  min?: string;
-  max?: string;
-  multiple?: boolean;
-  pattern?: string;
-  results?: number;
-  step?: string;
-  size?: number;
-  type?: string;
-}
-
-export interface TextareaComponent extends InputBaseComponent {
-  // Textarea Attributes
-  cols?: number;
-  rows?: number;
-  wrap?: string;
-}

core/src/components/input/input.tsx

@@ -4,8 +4,6 @@ import { Color, Mode, StyleEvent, TextFieldTypes, TextInputChangeEvent } from '.
 import { debounceEvent, deferEvent, renderHiddenInput } from '../../utils/helpers';
 import { createColorClasses, hostContext } from '../../utils/theme';
 
-import { InputComponent } from './input-base';
-
 @Component({
   tag: 'ion-input',
   styleUrls: {
@@ -14,51 +12,16 @@ import { InputComponent } from './input-base';
   },
   shadow: true
 })
-export class Input implements InputComponent {
+export class Input {
 
   private nativeInput?: HTMLInputElement;
   private inputId = `ion-input-${inputIds++}`;
-  didBlurAfterEdit = false;
+  private didBlurAfterEdit = false;
 
   @State() hasFocus = false;
 
   @Element() el!: HTMLElement;
 
-  /**
-   * Emitted when a keyboard input ocurred.
-   */
-  @Event() ionInput!: EventEmitter<KeyboardEvent>;
-
-  /**
-   * Emitted when the value has changed.
-   */
-  @Event() ionChange!: EventEmitter<TextInputChangeEvent>;
-
-  /**
-   * Emitted when the styles change.
-   */
-  @Event() ionStyle!: EventEmitter<StyleEvent>;
-
-  /**
-   * Emitted when the input loses focus.
-   */
-  @Event() ionBlur!: EventEmitter<void>;
-
-  /**
-   * Emitted when the input has focus.
-   */
-  @Event() ionFocus!: EventEmitter<void>;
-
-  /**
-   * Emitted when the input has been created.
-   */
-  @Event() ionInputDidLoad!: EventEmitter<void>;
-
-  /**
-   * Emitted when the input has been removed.
-   */
-  @Event() ionInputDidUnload!: EventEmitter<void>;
-
   /**
    * The color to use from your application's color palette.
    * Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
@@ -226,6 +189,41 @@ export class Input implements InputComponent {
     this.ionChange.emit({ value });
   }
 
+  /**
+   * Emitted when a keyboard input ocurred.
+   */
+  @Event() ionInput!: EventEmitter<KeyboardEvent>;
+
+  /**
+   * Emitted when the value has changed.
+   */
+  @Event() ionChange!: EventEmitter<TextInputChangeEvent>;
+
+  /**
+   * Emitted when the styles change.
+   */
+  @Event() ionStyle!: EventEmitter<StyleEvent>;
+
+  /**
+   * Emitted when the input loses focus.
+   */
+  @Event() ionBlur!: EventEmitter<void>;
+
+  /**
+   * Emitted when the input has focus.
+   */
+  @Event() ionFocus!: EventEmitter<void>;
+
+  /**
+   * Emitted when the input has been created.
+   */
+  @Event() ionInputDidLoad!: EventEmitter<void>;
+
+  /**
+   * Emitted when the input has been removed.
+   */
+  @Event() ionInputDidUnload!: EventEmitter<void>;
+
   componentWillLoad() {
     // By default, password inputs clear after focus when they have content
     if (this.clearOnEdit === undefined && this.type === 'password') {

core/src/components/show-when/show-when.tsx

@@ -1,7 +1,7 @@
 import { Component, Element, Listen, Prop, State } from '@stencil/core';
 
-import { Config, Mode } from '../../interface';
+import { Config } from '../../interface';
-import { DisplayWhen, updateTestResults } from '../../utils/show-hide-when-utils';
+import { DisplayWhen, getTestResult } from '../../utils/show-hide-when-utils';
 
 @Component({
   tag: 'ion-show-when',
@@ -18,7 +18,7 @@ export class ShowWhen implements DisplayWhen {
    * If the current platform matches the given value, the element will show.
    * Accepts a comma separated list of modes to match against.
    */
-  @Prop() mode!: Mode;
+  @Prop() modes!: string;
 
   /**
    * If the current orientation matches this value, the element will show.
@@ -56,7 +56,7 @@ export class ShowWhen implements DisplayWhen {
 
   @Listen('window:resize')
   onResize() {
-    this.passesTest = updateTestResults(this);
+    this.passesTest = getTestResult(this);
   }
 
   hostData() {

core/src/components/textarea/textarea.tsx

@@ -3,7 +3,6 @@ import { Component, Element, Event, EventEmitter, Method, Prop, State, Watch } f
 import { Color, Mode, StyleEvent, TextInputChangeEvent } from '../../interface';
 import { debounceEvent, deferEvent, renderHiddenInput } from '../../utils/helpers';
 import { createColorClasses } from '../../utils/theme';
-import { TextareaComponent } from '../input/input-base';
 
 @Component({
   tag: 'ion-textarea',
@@ -13,41 +12,21 @@ import { TextareaComponent } from '../input/input-base';
   },
   shadow: true
 })
-export class Textarea implements TextareaComponent {
+export class Textarea {
 
   private nativeInput?: HTMLTextAreaElement;
   private inputId = `ion-input-${textareaIds++}`;
-
+  private didBlurAfterEdit = false;
-  didBlurAfterEdit = false;
 
   @Element() el!: HTMLElement;
 
   @State() hasFocus = false;
 
   /**
-   * Emitted when the input value has changed.
+   * The mode determines which platform styles to use.
+   * Possible values are: `"ios"` or `"md"`.
    */
-  @Event() ionChange!: EventEmitter<TextInputChangeEvent>;
+  @Prop() mode!: Mode;
-
-  /**
-   * Emitted when a keyboard input ocurred.
-   */
-  @Event() ionInput!: EventEmitter<KeyboardEvent>;
-
-  /**
-   * Emitted when the styles change.
-   */
-  @Event() ionStyle!: EventEmitter<StyleEvent>;
-
-  /**
-   * Emitted when the input loses focus.
-   */
-  @Event() ionBlur!: EventEmitter<void>;
-
-  /**
-   * Emitted when the input has focus.
-   */
-  @Event() ionFocus!: EventEmitter<void>;
 
   /**
    * The color to use from your application's color palette.
@@ -56,12 +35,6 @@ export class Textarea implements TextareaComponent {
    */
   @Prop() color?: Color;
 
-  /**
-   * The mode determines which platform styles to use.
-   * Possible values are: `"ios"` or `"md"`.
-   */
-  @Prop() mode!: Mode;
-
   /**
    * Indicates whether and how the text value should be automatically capitalized as it is entered/edited by the user. Defaults to `"none"`.
    */
@@ -164,6 +137,31 @@ export class Textarea implements TextareaComponent {
     this.ionChange.emit({ value });
   }
 
+  /**
+   * Emitted when the input value has changed.
+   */
+  @Event() ionChange!: EventEmitter<TextInputChangeEvent>;
+
+  /**
+   * Emitted when a keyboard input ocurred.
+   */
+  @Event() ionInput!: EventEmitter<KeyboardEvent>;
+
+  /**
+   * Emitted when the styles change.
+   */
+  @Event() ionStyle!: EventEmitter<StyleEvent>;
+
+  /**
+   * Emitted when the input loses focus.
+   */
+  @Event() ionBlur!: EventEmitter<void>;
+
+  /**
+   * Emitted when the input has focus.
+   */
+  @Event() ionFocus!: EventEmitter<void>;
+
   componentDidLoad() {
     this.ionStyle = deferEvent(this.ionStyle);
     this.debounceChanged();

core/src/utils/show-hide-when-utils.ts

@@ -1,4 +1,4 @@
-import { Config, Mode } from '../interface';
+import { Config } from '../interface';
 
 import { matchBreakpoint } from './media';
 import { isPlatform } from './platform';
@@ -7,17 +7,13 @@ export interface DisplayWhen {
   config: Config;
   win: Window;
   mediaQuery?: string;
-  mode: Mode;
+  modes?: string;
   or: boolean;
   orientation?: string;
   platform?: string;
   size?: string;
 }
 
-export function updateTestResults(displayWhen: DisplayWhen) {
-  return getTestResult(displayWhen);
-}
-
 function isPlatformMatch(win: Window, multiPlatformString: string) {
   const platforms = split(multiPlatformString);
   return platforms.some(p => isPlatform(win, p as any));
@@ -38,7 +34,7 @@ function split(multiOptions: string): string[] {
   return multiOptions.replace(/\s/g, '').split(',');
 }
 
-function getTestResult(displayWhen: DisplayWhen) {
+export function getTestResult(displayWhen: DisplayWhen) {
   const results: boolean[] = [];
   if (displayWhen.mediaQuery) {
     results.push(matchMedia(displayWhen.win, displayWhen.mediaQuery));
@@ -46,8 +42,8 @@ function getTestResult(displayWhen: DisplayWhen) {
   if (displayWhen.size) {
     results.push(isSizeMatch(displayWhen.win, displayWhen.size));
   }
-  if (displayWhen.mode) {
+  if (displayWhen.modes) {
-    results.push(isModeMatch(displayWhen.config, displayWhen.mode));
+    results.push(isModeMatch(displayWhen.config, displayWhen.modes));
   }
   if (displayWhen.platform) {
     results.push(isPlatformMatch(displayWhen.win, displayWhen.platform));