From fe9a3e4f605adb0132e1806d93984fdf17ea6fe8 Mon Sep 17 00:00:00 2001
From: Josh Thomas <jthoms1@gmail.com>
Date: Thu, 23 Aug 2018 14:18:40 -0500
Subject: [PATCH] chore(): update to latest stencil release.

---
 angular/src/directives/proxies.ts | 160 +++++++++++++++---------------
 core/package.json                 |   2 +-
 core/src/interface.d.ts           |   2 +-
 3 files changed, 84 insertions(+), 80 deletions(-)

diff --git a/angular/src/directives/proxies.ts b/angular/src/directives/proxies.ts
index 4fe26622b43..f68a32cd161 100644
--- a/angular/src/directives/proxies.ts
+++ b/angular/src/directives/proxies.ts
@@ -1,7 +1,8 @@
 /* auto-generated angular directive proxies */
 /* tslint:disable */
 import { Directive, ElementRef, EventEmitter } from '@angular/core';
-import { StencilComponents } from '@ionic/core';
+import { LocalElementInterfaces } from '@ionic/core';
+type StencilComponents<T extends keyof LocalElementInterfaces> = LocalElementInterfaces[T];
 
 export function proxyInputs(instance: any, el: ElementRef, props: string[]) {
   props.forEach(propName => {
@@ -30,17 +31,17 @@ export function proxyMethods(instance: any, ref: ElementRef, methods: string[])
 }
 
 
-export declare interface App extends StencilComponents.IonApp {}
+export declare interface App extends StencilComponents<'IonApp'> {}
 @Directive({ selector: 'ion-app' })
 export class App {
 }
 
-export declare interface Avatar extends StencilComponents.IonAvatar {}
+export declare interface Avatar extends StencilComponents<'IonAvatar'> {}
 @Directive({ selector: 'ion-avatar' })
 export class Avatar {
 }
 
-export declare interface BackButton extends StencilComponents.IonBackButton {}
+export declare interface BackButton extends StencilComponents<'IonBackButton'> {}
 @Directive({ selector: 'ion-back-button', inputs: ['color', 'mode', 'defaultHref', 'icon', 'text'] })
 export class BackButton {
   constructor(r: ElementRef) {
@@ -48,7 +49,7 @@ export class BackButton {
   }
 }
 
-export declare interface Backdrop extends StencilComponents.IonBackdrop {}
+export declare interface Backdrop extends StencilComponents<'IonBackdrop'> {}
 @Directive({ selector: 'ion-backdrop', inputs: ['visible', 'tappable', 'stopPropagation'], outputs: ['ionBackdropTap'] })
 export class Backdrop {
   ionBackdropTap: EventEmitter<any>;
@@ -58,7 +59,7 @@ export class Backdrop {
   }
 }
 
-export declare interface Badge extends StencilComponents.IonBadge {}
+export declare interface Badge extends StencilComponents<'IonBadge'> {}
 @Directive({ selector: 'ion-badge', inputs: ['color', 'mode'] })
 export class Badge {
   constructor(r: ElementRef) {
@@ -66,7 +67,7 @@ export class Badge {
   }
 }
 
-export declare interface Button extends StencilComponents.IonButton {}
+export declare interface Button extends StencilComponents<'IonButton'> {}
 @Directive({ selector: 'ion-button', inputs: ['color', 'mode', 'buttonType', 'disabled', 'expand', 'fill', 'routerDirection', 'href', 'shape', 'size', 'strong', 'type'], outputs: ['ionFocus', 'ionBlur'] })
 export class Button {
   ionFocus: EventEmitter<any>;
@@ -77,12 +78,12 @@ export class Button {
   }
 }
 
-export declare interface Buttons extends StencilComponents.IonButtons {}
+export declare interface Buttons extends StencilComponents<'IonButtons'> {}
 @Directive({ selector: 'ion-buttons' })
 export class Buttons {
 }
 
-export declare interface Card extends StencilComponents.IonCard {}
+export declare interface Card extends StencilComponents<'IonCard'> {}
 @Directive({ selector: 'ion-card', inputs: ['color', 'mode'] })
 export class Card {
   constructor(r: ElementRef) {
@@ -90,7 +91,7 @@ export class Card {
   }
 }
 
-export declare interface CardContent extends StencilComponents.IonCardContent {}
+export declare interface CardContent extends StencilComponents<'IonCardContent'> {}
 @Directive({ selector: 'ion-card-content', inputs: ['mode'] })
 export class CardContent {
   constructor(r: ElementRef) {
@@ -98,7 +99,7 @@ export class CardContent {
   }
 }
 
-export declare interface CardHeader extends StencilComponents.IonCardHeader {}
+export declare interface CardHeader extends StencilComponents<'IonCardHeader'> {}
 @Directive({ selector: 'ion-card-header', inputs: ['color', 'mode', 'translucent'] })
 export class CardHeader {
   constructor(r: ElementRef) {
@@ -106,7 +107,7 @@ export class CardHeader {
   }
 }
 
-export declare interface CardSubtitle extends StencilComponents.IonCardSubtitle {}
+export declare interface CardSubtitle extends StencilComponents<'IonCardSubtitle'> {}
 @Directive({ selector: 'ion-card-subtitle', inputs: ['color', 'mode'] })
 export class CardSubtitle {
   constructor(r: ElementRef) {
@@ -114,7 +115,7 @@ export class CardSubtitle {
   }
 }
 
-export declare interface CardTitle extends StencilComponents.IonCardTitle {}
+export declare interface CardTitle extends StencilComponents<'IonCardTitle'> {}
 @Directive({ selector: 'ion-card-title', inputs: ['color', 'mode'] })
 export class CardTitle {
   constructor(r: ElementRef) {
@@ -122,7 +123,7 @@ export class CardTitle {
   }
 }
 
-export declare interface Checkbox extends StencilComponents.IonCheckbox {}
+export declare interface Checkbox extends StencilComponents<'IonCheckbox'> {}
 @Directive({ selector: 'ion-checkbox', inputs: ['color', 'mode', 'name', 'checked', 'disabled', 'value'], outputs: ['ionChange', 'ionFocus', 'ionBlur', 'ionStyle'] })
 export class Checkbox {
   ionChange: EventEmitter<any>;
@@ -135,7 +136,7 @@ export class Checkbox {
   }
 }
 
-export declare interface Chip extends StencilComponents.IonChip {}
+export declare interface Chip extends StencilComponents<'IonChip'> {}
 @Directive({ selector: 'ion-chip', inputs: ['color', 'mode'] })
 export class Chip {
   constructor(r: ElementRef) {
@@ -143,7 +144,7 @@ export class Chip {
   }
 }
 
-export declare interface ChipButton extends StencilComponents.IonChipButton {}
+export declare interface ChipButton extends StencilComponents<'IonChipButton'> {}
 @Directive({ selector: 'ion-chip-button', inputs: ['color', 'mode', 'disabled', 'fill', 'href'] })
 export class ChipButton {
   constructor(r: ElementRef) {
@@ -151,7 +152,7 @@ export class ChipButton {
   }
 }
 
-export declare interface ChipIcon extends StencilComponents.IonChipIcon {}
+export declare interface ChipIcon extends StencilComponents<'IonChipIcon'> {}
 @Directive({ selector: 'ion-chip-icon', inputs: ['color', 'mode', 'fill', 'name', 'src'] })
 export class ChipIcon {
   constructor(r: ElementRef) {
@@ -159,7 +160,7 @@ export class ChipIcon {
   }
 }
 
-export declare interface Col extends StencilComponents.IonCol {}
+export declare interface Col extends StencilComponents<'IonCol'> {}
 @Directive({ selector: 'ion-col', inputs: ['offset', 'offsetXs', 'offsetSm', 'offsetMd', 'offsetLg', 'offsetXl', 'pull', 'pullXs', 'pullSm', 'pullMd', 'pullLg', 'pullXl', 'push', 'pushXs', 'pushSm', 'pushMd', 'pushLg', 'pushXl', 'size', 'sizeXs', 'sizeSm', 'sizeMd', 'sizeLg', 'sizeXl'] })
 export class Col {
   constructor(r: ElementRef) {
@@ -167,7 +168,7 @@ export class Col {
   }
 }
 
-export declare interface Content extends StencilComponents.IonContent {}
+export declare interface Content extends StencilComponents<'IonContent'> {}
 @Directive({ selector: 'ion-content', inputs: ['color', 'fullscreen', 'forceOverscroll', 'scrollX', 'scrollY', 'scrollEvents'], outputs: ['ionScrollStart', 'ionScroll', 'ionScrollEnd'] })
 export class Content {
   ionScrollStart: EventEmitter<any>;
@@ -180,7 +181,7 @@ export class Content {
   }
 }
 
-export declare interface Datetime extends StencilComponents.IonDatetime {}
+export declare interface Datetime extends StencilComponents<'IonDatetime'> {}
 @Directive({ selector: 'ion-datetime', inputs: ['disabled', 'min', 'max', 'displayFormat', 'pickerFormat', 'cancelText', 'doneText', 'yearValues', 'monthValues', 'dayValues', 'hourValues', 'minuteValues', 'monthNames', 'monthShortNames', 'dayNames', 'dayShortNames', 'pickerOptions', 'placeholder', 'value'], outputs: ['ionCancel', 'ionChange', 'ionStyle'] })
 export class Datetime {
   ionCancel: EventEmitter<any>;
@@ -193,7 +194,7 @@ export class Datetime {
   }
 }
 
-export declare interface Fab extends StencilComponents.IonFab {}
+export declare interface Fab extends StencilComponents<'IonFab'> {}
 @Directive({ selector: 'ion-fab', inputs: ['horizontal', 'vertical', 'edge', 'activated'] })
 export class Fab {
   constructor(r: ElementRef) {
@@ -202,7 +203,7 @@ export class Fab {
   }
 }
 
-export declare interface FabButton extends StencilComponents.IonFabButton {}
+export declare interface FabButton extends StencilComponents<'IonFabButton'> {}
 @Directive({ selector: 'ion-fab-button', inputs: ['color', 'mode', 'activated', 'disabled', 'href', 'translucent', 'show'] })
 export class FabButton {
   constructor(r: ElementRef) {
@@ -210,7 +211,7 @@ export class FabButton {
   }
 }
 
-export declare interface FabList extends StencilComponents.IonFabList {}
+export declare interface FabList extends StencilComponents<'IonFabList'> {}
 @Directive({ selector: 'ion-fab-list', inputs: ['activated', 'side'] })
 export class FabList {
   constructor(r: ElementRef) {
@@ -218,7 +219,7 @@ export class FabList {
   }
 }
 
-export declare interface Footer extends StencilComponents.IonFooter {}
+export declare interface Footer extends StencilComponents<'IonFooter'> {}
 @Directive({ selector: 'ion-footer', inputs: ['mode', 'translucent'] })
 export class Footer {
   constructor(r: ElementRef) {
@@ -226,7 +227,7 @@ export class Footer {
   }
 }
 
-export declare interface Grid extends StencilComponents.IonGrid {}
+export declare interface Grid extends StencilComponents<'IonGrid'> {}
 @Directive({ selector: 'ion-grid', inputs: ['fixed'] })
 export class Grid {
   constructor(r: ElementRef) {
@@ -234,7 +235,7 @@ export class Grid {
   }
 }
 
-export declare interface Header extends StencilComponents.IonHeader {}
+export declare interface Header extends StencilComponents<'IonHeader'> {}
 @Directive({ selector: 'ion-header', inputs: ['mode', 'translucent'] })
 export class Header {
   constructor(r: ElementRef) {
@@ -242,7 +243,7 @@ export class Header {
   }
 }
 
-export declare interface HideWhen extends StencilComponents.IonHideWhen {}
+export declare interface HideWhen extends StencilComponents<'IonHideWhen'> {}
 @Directive({ selector: 'ion-hide-when', inputs: ['mode', 'orientation', 'mediaQuery', 'size', 'platform', 'or'] })
 export class HideWhen {
   constructor(r: ElementRef) {
@@ -250,7 +251,7 @@ export class HideWhen {
   }
 }
 
-export declare interface Icon extends StencilComponents.IonIcon {}
+export declare interface Icon extends StencilComponents<'IonIcon'> {}
 @Directive({ selector: 'ion-icon', inputs: ['ariaLabel', 'color', 'icon', 'ios', 'lazy', 'md', 'mode', 'name', 'size', 'src'] })
 export class Icon {
   constructor(r: ElementRef) {
@@ -258,7 +259,7 @@ export class Icon {
   }
 }
 
-export declare interface Img extends StencilComponents.IonImg {}
+export declare interface Img extends StencilComponents<'IonImg'> {}
 @Directive({ selector: 'ion-img', inputs: ['alt', 'src'], outputs: ['ionImgDidLoad'] })
 export class Img {
   ionImgDidLoad: EventEmitter<any>;
@@ -268,7 +269,7 @@ export class Img {
   }
 }
 
-export declare interface InfiniteScroll extends StencilComponents.IonInfiniteScroll {}
+export declare interface InfiniteScroll extends StencilComponents<'IonInfiniteScroll'> {}
 @Directive({ selector: 'ion-infinite-scroll', inputs: ['threshold', 'disabled', 'position'], outputs: ['ionInfinite'] })
 export class InfiniteScroll {
   ionInfinite: EventEmitter<any>;
@@ -279,7 +280,7 @@ export class InfiniteScroll {
   }
 }
 
-export declare interface InfiniteScrollContent extends StencilComponents.IonInfiniteScrollContent {}
+export declare interface InfiniteScrollContent extends StencilComponents<'IonInfiniteScrollContent'> {}
 @Directive({ selector: 'ion-infinite-scroll-content', inputs: ['loadingSpinner', 'loadingText'] })
 export class InfiniteScrollContent {
   constructor(r: ElementRef) {
@@ -287,7 +288,7 @@ export class InfiniteScrollContent {
   }
 }
 
-export declare interface Input extends StencilComponents.IonInput {}
+export declare interface Input extends StencilComponents<'IonInput'> {}
 @Directive({ selector: 'ion-input', inputs: ['color', 'mode', 'accept', 'autocapitalize', 'autocomplete', 'autocorrect', 'autofocus', 'clearInput', 'clearOnEdit', 'debounce', 'disabled', 'inputmode', 'max', 'maxlength', 'min', 'minlength', 'multiple', 'name', 'pattern', 'placeholder', 'readonly', 'required', 'results', 'spellcheck', 'step', 'size', 'type', 'value'], outputs: ['ionInput', 'ionChange', 'ionStyle', 'ionBlur', 'ionFocus', 'ionInputDidLoad', 'ionInputDidUnload'] })
 export class Input {
   ionInput: EventEmitter<any>;
@@ -298,12 +299,13 @@ export class Input {
   ionInputDidLoad: EventEmitter<any>;
   ionInputDidUnload: EventEmitter<any>;
   constructor(r: ElementRef) {
+    proxyMethods(this, r, ['focus']);
     proxyInputs(this, r, ['color', 'mode', 'accept', 'autocapitalize', 'autocomplete', 'autocorrect', 'autofocus', 'clearInput', 'clearOnEdit', 'debounce', 'disabled', 'inputmode', 'max', 'maxlength', 'min', 'minlength', 'multiple', 'name', 'pattern', 'placeholder', 'readonly', 'required', 'results', 'spellcheck', 'step', 'size', 'type', 'value']);
     proxyOutputs(this, ['ionInput', 'ionChange', 'ionStyle', 'ionBlur', 'ionFocus', 'ionInputDidLoad', 'ionInputDidUnload']);
   }
 }
 
-export declare interface Item extends StencilComponents.IonItem {}
+export declare interface Item extends StencilComponents<'IonItem'> {}
 @Directive({ selector: 'ion-item', inputs: ['color', 'mode', 'button', 'detail', 'detailIcon', 'disabled', 'href', 'lines', 'routerDirection', 'state', 'type'] })
 export class Item {
   constructor(r: ElementRef) {
@@ -311,7 +313,7 @@ export class Item {
   }
 }
 
-export declare interface ItemDivider extends StencilComponents.IonItemDivider {}
+export declare interface ItemDivider extends StencilComponents<'IonItemDivider'> {}
 @Directive({ selector: 'ion-item-divider', inputs: ['color', 'mode'] })
 export class ItemDivider {
   constructor(r: ElementRef) {
@@ -319,12 +321,12 @@ export class ItemDivider {
   }
 }
 
-export declare interface ItemGroup extends StencilComponents.IonItemGroup {}
+export declare interface ItemGroup extends StencilComponents<'IonItemGroup'> {}
 @Directive({ selector: 'ion-item-group' })
 export class ItemGroup {
 }
 
-export declare interface ItemOption extends StencilComponents.IonItemOption {}
+export declare interface ItemOption extends StencilComponents<'IonItemOption'> {}
 @Directive({ selector: 'ion-item-option', inputs: ['color', 'mode', 'disabled', 'expandable', 'href'] })
 export class ItemOption {
   constructor(r: ElementRef) {
@@ -332,7 +334,7 @@ export class ItemOption {
   }
 }
 
-export declare interface ItemOptions extends StencilComponents.IonItemOptions {}
+export declare interface ItemOptions extends StencilComponents<'IonItemOptions'> {}
 @Directive({ selector: 'ion-item-options', inputs: ['side'], outputs: ['ionSwipe'] })
 export class ItemOptions {
   ionSwipe: EventEmitter<any>;
@@ -343,7 +345,7 @@ export class ItemOptions {
   }
 }
 
-export declare interface ItemSliding extends StencilComponents.IonItemSliding {}
+export declare interface ItemSliding extends StencilComponents<'IonItemSliding'> {}
 @Directive({ selector: 'ion-item-sliding', inputs: ['disabled'], outputs: ['ionDrag'] })
 export class ItemSliding {
   ionDrag: EventEmitter<any>;
@@ -354,7 +356,7 @@ export class ItemSliding {
   }
 }
 
-export declare interface Label extends StencilComponents.IonLabel {}
+export declare interface Label extends StencilComponents<'IonLabel'> {}
 @Directive({ selector: 'ion-label', inputs: ['color', 'mode', 'position'], outputs: ['ionStyle'] })
 export class Label {
   ionStyle: EventEmitter<any>;
@@ -365,7 +367,7 @@ export class Label {
   }
 }
 
-export declare interface List extends StencilComponents.IonList {}
+export declare interface List extends StencilComponents<'IonList'> {}
 @Directive({ selector: 'ion-list', inputs: ['lines', 'inset'] })
 export class List {
   constructor(r: ElementRef) {
@@ -374,7 +376,7 @@ export class List {
   }
 }
 
-export declare interface ListHeader extends StencilComponents.IonListHeader {}
+export declare interface ListHeader extends StencilComponents<'IonListHeader'> {}
 @Directive({ selector: 'ion-list-header', inputs: ['color', 'mode'] })
 export class ListHeader {
   constructor(r: ElementRef) {
@@ -382,7 +384,7 @@ export class ListHeader {
   }
 }
 
-export declare interface Menu extends StencilComponents.IonMenu {}
+export declare interface Menu extends StencilComponents<'IonMenu'> {}
 @Directive({ selector: 'ion-menu', inputs: ['contentId', 'menuId', 'type', 'disabled', 'side', 'swipeGesture', 'maxEdgeStart'], outputs: ['ionOpen', 'ionClose', 'ionMenuChange'] })
 export class Menu {
   ionOpen: EventEmitter<any>;
@@ -395,7 +397,7 @@ export class Menu {
   }
 }
 
-export declare interface MenuButton extends StencilComponents.IonMenuButton {}
+export declare interface MenuButton extends StencilComponents<'IonMenuButton'> {}
 @Directive({ selector: 'ion-menu-button', inputs: ['color', 'mode', 'menu', 'autoHide'] })
 export class MenuButton {
   constructor(r: ElementRef) {
@@ -403,7 +405,7 @@ export class MenuButton {
   }
 }
 
-export declare interface MenuToggle extends StencilComponents.IonMenuToggle {}
+export declare interface MenuToggle extends StencilComponents<'IonMenuToggle'> {}
 @Directive({ selector: 'ion-menu-toggle', inputs: ['menu', 'autoHide'] })
 export class MenuToggle {
   constructor(r: ElementRef) {
@@ -411,7 +413,7 @@ export class MenuToggle {
   }
 }
 
-export declare interface Nav extends StencilComponents.IonNav {}
+export declare interface Nav extends StencilComponents<'IonNav'> {}
 @Directive({ selector: 'ion-nav', inputs: ['swipeGesture', 'animated', 'delegate', 'rootParams', 'root'], outputs: ['ionNavWillLoad', 'ionNavWillChange', 'ionNavDidChange'] })
 export class Nav {
   ionNavWillLoad: EventEmitter<any>;
@@ -424,12 +426,12 @@ export class Nav {
   }
 }
 
-export declare interface NavPop extends StencilComponents.IonNavPop {}
+export declare interface NavPop extends StencilComponents<'IonNavPop'> {}
 @Directive({ selector: 'ion-nav-pop' })
 export class NavPop {
 }
 
-export declare interface NavPush extends StencilComponents.IonNavPush {}
+export declare interface NavPush extends StencilComponents<'IonNavPush'> {}
 @Directive({ selector: 'ion-nav-push', inputs: ['component', 'componentProps'] })
 export class NavPush {
   constructor(r: ElementRef) {
@@ -437,7 +439,7 @@ export class NavPush {
   }
 }
 
-export declare interface NavSetRoot extends StencilComponents.IonNavSetRoot {}
+export declare interface NavSetRoot extends StencilComponents<'IonNavSetRoot'> {}
 @Directive({ selector: 'ion-nav-set-root', inputs: ['component', 'componentProps'] })
 export class NavSetRoot {
   constructor(r: ElementRef) {
@@ -445,7 +447,7 @@ export class NavSetRoot {
   }
 }
 
-export declare interface Note extends StencilComponents.IonNote {}
+export declare interface Note extends StencilComponents<'IonNote'> {}
 @Directive({ selector: 'ion-note', inputs: ['color', 'mode'] })
 export class Note {
   constructor(r: ElementRef) {
@@ -453,7 +455,7 @@ export class Note {
   }
 }
 
-export declare interface Radio extends StencilComponents.IonRadio {}
+export declare interface Radio extends StencilComponents<'IonRadio'> {}
 @Directive({ selector: 'ion-radio', inputs: ['color', 'mode', 'name', 'disabled', 'checked', 'value'], outputs: ['ionRadioDidLoad', 'ionRadioDidUnload', 'ionStyle', 'ionSelect', 'ionFocus', 'ionBlur'] })
 export class Radio {
   ionRadioDidLoad: EventEmitter<any>;
@@ -468,7 +470,7 @@ export class Radio {
   }
 }
 
-export declare interface RadioGroup extends StencilComponents.IonRadioGroup {}
+export declare interface RadioGroup extends StencilComponents<'IonRadioGroup'> {}
 @Directive({ selector: 'ion-radio-group', inputs: ['allowEmptySelection', 'name', 'disabled', 'value'], outputs: ['ionChange'] })
 export class RadioGroup {
   ionChange: EventEmitter<any>;
@@ -478,7 +480,7 @@ export class RadioGroup {
   }
 }
 
-export declare interface Range extends StencilComponents.IonRange {}
+export declare interface Range extends StencilComponents<'IonRange'> {}
 @Directive({ selector: 'ion-range', inputs: ['color', 'mode', 'debounce', 'name', 'dualKnobs', 'min', 'max', 'pin', 'snaps', 'step', 'disabled', 'value'], outputs: ['ionChange', 'ionStyle', 'ionFocus', 'ionBlur'] })
 export class Range {
   ionChange: EventEmitter<any>;
@@ -491,7 +493,7 @@ export class Range {
   }
 }
 
-export declare interface Refresher extends StencilComponents.IonRefresher {}
+export declare interface Refresher extends StencilComponents<'IonRefresher'> {}
 @Directive({ selector: 'ion-refresher', inputs: ['pullMin', 'pullMax', 'closeDuration', 'snapbackDuration', 'disabled'], outputs: ['ionRefresh', 'ionPull', 'ionStart'] })
 export class Refresher {
   ionRefresh: EventEmitter<any>;
@@ -504,7 +506,7 @@ export class Refresher {
   }
 }
 
-export declare interface RefresherContent extends StencilComponents.IonRefresherContent {}
+export declare interface RefresherContent extends StencilComponents<'IonRefresherContent'> {}
 @Directive({ selector: 'ion-refresher-content', inputs: ['pullingIcon', 'pullingText', 'refreshingSpinner', 'refreshingText'] })
 export class RefresherContent {
   constructor(r: ElementRef) {
@@ -512,12 +514,12 @@ export class RefresherContent {
   }
 }
 
-export declare interface Reorder extends StencilComponents.IonReorder {}
+export declare interface Reorder extends StencilComponents<'IonReorder'> {}
 @Directive({ selector: 'ion-reorder' })
 export class Reorder {
 }
 
-export declare interface ReorderGroup extends StencilComponents.IonReorderGroup {}
+export declare interface ReorderGroup extends StencilComponents<'IonReorderGroup'> {}
 @Directive({ selector: 'ion-reorder-group', inputs: ['disabled'] })
 export class ReorderGroup {
   constructor(r: ElementRef) {
@@ -525,7 +527,7 @@ export class ReorderGroup {
   }
 }
 
-export declare interface RippleEffect extends StencilComponents.IonRippleEffect {}
+export declare interface RippleEffect extends StencilComponents<'IonRippleEffect'> {}
 @Directive({ selector: 'ion-ripple-effect', inputs: ['parent', 'tapClick'] })
 export class RippleEffect {
   constructor(r: ElementRef) {
@@ -534,12 +536,12 @@ export class RippleEffect {
   }
 }
 
-export declare interface Row extends StencilComponents.IonRow {}
+export declare interface Row extends StencilComponents<'IonRow'> {}
 @Directive({ selector: 'ion-row' })
 export class Row {
 }
 
-export declare interface Searchbar extends StencilComponents.IonSearchbar {}
+export declare interface Searchbar extends StencilComponents<'IonSearchbar'> {}
 @Directive({ selector: 'ion-searchbar', inputs: ['color', 'mode', 'animated', 'autocomplete', 'autocorrect', 'cancelButtonIcon', 'cancelButtonText', 'clearIcon', 'debounce', 'placeholder', 'searchIcon', 'showCancelButton', 'spellcheck', 'type', 'value'], outputs: ['ionInput', 'ionChange', 'ionCancel', 'ionClear', 'ionBlur', 'ionFocus'] })
 export class Searchbar {
   ionInput: EventEmitter<any>;
@@ -549,12 +551,13 @@ export class Searchbar {
   ionBlur: EventEmitter<any>;
   ionFocus: EventEmitter<any>;
   constructor(r: ElementRef) {
+    proxyMethods(this, r, ['focus']);
     proxyInputs(this, r, ['color', 'mode', 'animated', 'autocomplete', 'autocorrect', 'cancelButtonIcon', 'cancelButtonText', 'clearIcon', 'debounce', 'placeholder', 'searchIcon', 'showCancelButton', 'spellcheck', 'type', 'value']);
     proxyOutputs(this, ['ionInput', 'ionChange', 'ionCancel', 'ionClear', 'ionBlur', 'ionFocus']);
   }
 }
 
-export declare interface Segment extends StencilComponents.IonSegment {}
+export declare interface Segment extends StencilComponents<'IonSegment'> {}
 @Directive({ selector: 'ion-segment', inputs: ['color', 'mode', 'disabled', 'value'], outputs: ['ionChange'] })
 export class Segment {
   ionChange: EventEmitter<any>;
@@ -564,7 +567,7 @@ export class Segment {
   }
 }
 
-export declare interface SegmentButton extends StencilComponents.IonSegmentButton {}
+export declare interface SegmentButton extends StencilComponents<'IonSegmentButton'> {}
 @Directive({ selector: 'ion-segment-button', inputs: ['color', 'mode', 'checked', 'disabled', 'value'], outputs: ['ionSelect'] })
 export class SegmentButton {
   ionSelect: EventEmitter<any>;
@@ -574,7 +577,7 @@ export class SegmentButton {
   }
 }
 
-export declare interface Select extends StencilComponents.IonSelect {}
+export declare interface Select extends StencilComponents<'IonSelect'> {}
 @Directive({ selector: 'ion-select', inputs: ['disabled', 'cancelText', 'okText', 'placeholder', 'name', 'selectedText', 'multiple', 'interface', 'interfaceOptions', 'value'], outputs: ['ionChange', 'ionCancel', 'ionFocus', 'ionBlur', 'ionStyle'] })
 export class Select {
   ionChange: EventEmitter<any>;
@@ -589,7 +592,7 @@ export class Select {
   }
 }
 
-export declare interface SelectOption extends StencilComponents.IonSelectOption {}
+export declare interface SelectOption extends StencilComponents<'IonSelectOption'> {}
 @Directive({ selector: 'ion-select-option', inputs: ['disabled', 'selected', 'value'], outputs: ['ionSelectOptionDidLoad', 'ionSelectOptionDidUnload'] })
 export class SelectOption {
   ionSelectOptionDidLoad: EventEmitter<any>;
@@ -600,7 +603,7 @@ export class SelectOption {
   }
 }
 
-export declare interface SelectPopover extends StencilComponents.IonSelectPopover {}
+export declare interface SelectPopover extends StencilComponents<'IonSelectPopover'> {}
 @Directive({ selector: 'ion-select-popover', inputs: ['header', 'subHeader', 'message', 'options'] })
 export class SelectPopover {
   constructor(r: ElementRef) {
@@ -608,7 +611,7 @@ export class SelectPopover {
   }
 }
 
-export declare interface ShowWhen extends StencilComponents.IonShowWhen {}
+export declare interface ShowWhen extends StencilComponents<'IonShowWhen'> {}
 @Directive({ selector: 'ion-show-when', inputs: ['mode', 'orientation', 'mediaQuery', 'size', 'platform', 'or'] })
 export class ShowWhen {
   constructor(r: ElementRef) {
@@ -616,7 +619,7 @@ export class ShowWhen {
   }
 }
 
-export declare interface SkeletonText extends StencilComponents.IonSkeletonText {}
+export declare interface SkeletonText extends StencilComponents<'IonSkeletonText'> {}
 @Directive({ selector: 'ion-skeleton-text', inputs: ['width'] })
 export class SkeletonText {
   constructor(r: ElementRef) {
@@ -624,12 +627,12 @@ export class SkeletonText {
   }
 }
 
-export declare interface Slide extends StencilComponents.IonSlide {}
+export declare interface Slide extends StencilComponents<'IonSlide'> {}
 @Directive({ selector: 'ion-slide' })
 export class Slide {
 }
 
-export declare interface Slides extends StencilComponents.IonSlides {}
+export declare interface Slides extends StencilComponents<'IonSlides'> {}
 @Directive({ selector: 'ion-slides', inputs: ['options', 'pager', 'scrollbar'], outputs: ['ionSlidesDidLoad', 'ionSlideTap', 'ionSlideDoubleTap', 'ionSlideWillChange', 'ionSlideDidChange', 'ionSlideNextStart', 'ionSlidePrevStart', 'ionSlideNextEnd', 'ionSlidePrevEnd', 'ionSlideTransitionStart', 'ionSlideTransitionEnd', 'ionSlideDrag', 'ionSlideReachStart', 'ionSlideReachEnd', 'ionSlideTouchStart', 'ionSlideTouchEnd'] })
 export class Slides {
   ionSlidesDidLoad: EventEmitter<any>;
@@ -655,7 +658,7 @@ export class Slides {
   }
 }
 
-export declare interface Spinner extends StencilComponents.IonSpinner {}
+export declare interface Spinner extends StencilComponents<'IonSpinner'> {}
 @Directive({ selector: 'ion-spinner', inputs: ['color', 'mode', 'duration', 'name', 'paused'] })
 export class Spinner {
   constructor(r: ElementRef) {
@@ -663,7 +666,7 @@ export class Spinner {
   }
 }
 
-export declare interface SplitPane extends StencilComponents.IonSplitPane {}
+export declare interface SplitPane extends StencilComponents<'IonSplitPane'> {}
 @Directive({ selector: 'ion-split-pane', inputs: ['disabled', 'when'], outputs: ['ionChange', 'ionSplitPaneVisible'] })
 export class SplitPane {
   ionChange: EventEmitter<any>;
@@ -675,7 +678,7 @@ export class SplitPane {
   }
 }
 
-export declare interface Tab extends StencilComponents.IonTab {}
+export declare interface Tab extends StencilComponents<'IonTab'> {}
 @Directive({ selector: 'ion-tab', inputs: ['active', 'btnId', 'delegate', 'label', 'href', 'icon', 'badge', 'badgeColor', 'component', 'name', 'disabled', 'selected', 'show', 'tabsHideOnSubPages'], outputs: ['ionSelect', 'ionTabMutated'] })
 export class Tab {
   ionSelect: EventEmitter<any>;
@@ -687,7 +690,7 @@ export class Tab {
   }
 }
 
-export declare interface Tabs extends StencilComponents.IonTabs {}
+export declare interface Tabs extends StencilComponents<'IonTabs'> {}
 @Directive({ selector: 'ion-tabs', inputs: ['color', 'name', 'tabbarHidden', 'tabbarHighlight', 'tabbarLayout', 'tabbarPlacement', 'translucent', 'useRouter'], outputs: ['ionChange', 'ionNavWillLoad', 'ionNavWillChange', 'ionNavDidChange'] })
 export class Tabs {
   ionChange: EventEmitter<any>;
@@ -701,7 +704,7 @@ export class Tabs {
   }
 }
 
-export declare interface Text extends StencilComponents.IonText {}
+export declare interface Text extends StencilComponents<'IonText'> {}
 @Directive({ selector: 'ion-text', inputs: ['color', 'mode'] })
 export class Text {
   constructor(r: ElementRef) {
@@ -709,7 +712,7 @@ export class Text {
   }
 }
 
-export declare interface Textarea extends StencilComponents.IonTextarea {}
+export declare interface Textarea extends StencilComponents<'IonTextarea'> {}
 @Directive({ selector: 'ion-textarea', inputs: ['color', 'mode', 'autocapitalize', 'autofocus', 'clearOnEdit', 'debounce', 'disabled', 'maxlength', 'minlength', 'name', 'placeholder', 'readonly', 'required', 'spellcheck', 'cols', 'rows', 'wrap', 'value'], outputs: ['ionChange', 'ionInput', 'ionStyle', 'ionBlur', 'ionFocus'] })
 export class Textarea {
   ionChange: EventEmitter<any>;
@@ -718,17 +721,18 @@ export class Textarea {
   ionBlur: EventEmitter<any>;
   ionFocus: EventEmitter<any>;
   constructor(r: ElementRef) {
+    proxyMethods(this, r, ['focus']);
     proxyInputs(this, r, ['color', 'mode', 'autocapitalize', 'autofocus', 'clearOnEdit', 'debounce', 'disabled', 'maxlength', 'minlength', 'name', 'placeholder', 'readonly', 'required', 'spellcheck', 'cols', 'rows', 'wrap', 'value']);
     proxyOutputs(this, ['ionChange', 'ionInput', 'ionStyle', 'ionBlur', 'ionFocus']);
   }
 }
 
-export declare interface Thumbnail extends StencilComponents.IonThumbnail {}
+export declare interface Thumbnail extends StencilComponents<'IonThumbnail'> {}
 @Directive({ selector: 'ion-thumbnail' })
 export class Thumbnail {
 }
 
-export declare interface Toggle extends StencilComponents.IonToggle {}
+export declare interface Toggle extends StencilComponents<'IonToggle'> {}
 @Directive({ selector: 'ion-toggle', inputs: ['color', 'mode', 'name', 'checked', 'disabled', 'value'], outputs: ['ionChange', 'ionFocus', 'ionBlur', 'ionStyle'] })
 export class Toggle {
   ionChange: EventEmitter<any>;
@@ -741,7 +745,7 @@ export class Toggle {
   }
 }
 
-export declare interface Toolbar extends StencilComponents.IonToolbar {}
+export declare interface Toolbar extends StencilComponents<'IonToolbar'> {}
 @Directive({ selector: 'ion-toolbar', inputs: ['color', 'mode'] })
 export class Toolbar {
   constructor(r: ElementRef) {
@@ -749,7 +753,7 @@ export class Toolbar {
   }
 }
 
-export declare interface ToolbarTitle extends StencilComponents.IonTitle {}
+export declare interface ToolbarTitle extends StencilComponents<'IonTitle'> {}
 @Directive({ selector: 'ion-title', inputs: ['color'] })
 export class ToolbarTitle {
   constructor(r: ElementRef) {
diff --git a/core/package.json b/core/package.json
index 099e027c60f..91a62f55a1b 100644
--- a/core/package.json
+++ b/core/package.json
@@ -27,7 +27,7 @@
     "ionicons": "4.4.1"
   },
   "devDependencies": {
-    "@stencil/core": "^0.12.0-5",
+    "@stencil/core": "^0.12.0-7",
     "@stencil/dev-server": "latest",
     "@stencil/sass": "0.1.0",
     "@stencil/utils": "latest",
diff --git a/core/src/interface.d.ts b/core/src/interface.d.ts
index 9348404675c..e1289d23f3c 100644
--- a/core/src/interface.d.ts
+++ b/core/src/interface.d.ts
@@ -47,7 +47,7 @@ export interface FrameworkDelegate {
 
 
 declare global {
-  interface HTMLAttributes {
+  interface StencilAttributeEscapeHatch {
     // for ion-menu and ion-split-pane
     main?: boolean;
     tappable?: boolean;