diff --git a/angular/src/directives/proxies-utils.ts b/angular/src/directives/angular-component-lib/utils.ts similarity index 51% rename from angular/src/directives/proxies-utils.ts rename to angular/src/directives/angular-component-lib/utils.ts index c1f72601f4..5c5ac108ae 100644 --- a/angular/src/directives/proxies-utils.ts +++ b/angular/src/directives/angular-component-lib/utils.ts @@ -5,26 +5,26 @@ import { fromEvent } from 'rxjs'; export const proxyInputs = (Cmp: any, inputs: string[]) => { const Prototype = Cmp.prototype; inputs.forEach(item => { - Object.defineProperty(Prototype, item, { - get() { - return this.el[item]; - }, - set(val: any) { - this.z.runOutsideAngular(() => (this.el[item] = val)); - } - }); + Object.defineProperty(Prototype, item, { + get() { + return this.el[item]; + }, + set(val: any) { + this.z.runOutsideAngular(() => (this.el[item] = val)); + } + }); }); }; export const proxyMethods = (Cmp: any, methods: string[]) => { const Prototype = Cmp.prototype; methods.forEach(methodName => { - Prototype[methodName] = function () { - const args = arguments; - return this.z.runOutsideAngular(() => - this.el[methodName].apply(this.el, args) - ); - }; + Prototype[methodName] = function () { + const args = arguments; + return this.z.runOutsideAngular(() => + this.el[methodName].apply(this.el, args) + ); + }; }); }; @@ -33,14 +33,14 @@ export const proxyOutputs = (instance: any, el: any, events: string[]) => { } export function ProxyCmp(opts: { inputs?: any; methods?: any }) { - const decorator = function(cls: any){ - if (opts.inputs) { - proxyInputs(cls, opts.inputs); - } - if (opts.methods) { - proxyMethods(cls, opts.methods); - } - return cls; + const decorator = function(cls: any) { + if (opts.inputs) { + proxyInputs(cls, opts.inputs); + } + if (opts.methods) { + proxyMethods(cls, opts.methods); + } + return cls; }; return decorator; } diff --git a/angular/src/directives/navigation/nav-delegate.ts b/angular/src/directives/navigation/nav-delegate.ts index e12964f10d..98e1d0f293 100644 --- a/angular/src/directives/navigation/nav-delegate.ts +++ b/angular/src/directives/navigation/nav-delegate.ts @@ -1,7 +1,7 @@ import { ComponentFactoryResolver, Directive, ElementRef, Injector, ViewContainerRef } from '@angular/core'; import { AngularDelegate } from '../../providers/angular-delegate'; -import { ProxyCmp, proxyOutputs } from '../proxies-utils'; +import { ProxyCmp, proxyOutputs } from '../angular-component-lib/utils'; @ProxyCmp({ inputs: ['animated', 'animation', 'root', 'rootParams', 'swipeGesture'], diff --git a/angular/src/directives/overlays/modal.ts b/angular/src/directives/overlays/modal.ts index 81cedf9662..695326387f 100644 --- a/angular/src/directives/overlays/modal.ts +++ b/angular/src/directives/overlays/modal.ts @@ -1,7 +1,7 @@ /* eslint-disable */ /* tslint:disable */ import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ContentChild, ElementRef, EventEmitter, NgZone, TemplateRef } from "@angular/core"; -import { ProxyCmp, proxyOutputs } from "../proxies-utils"; +import { ProxyCmp, proxyOutputs } from "../angular-component-lib/utils"; import { Components } from "@ionic/core"; export declare interface IonModal extends Components.IonModal { } diff --git a/angular/src/directives/overlays/popover.ts b/angular/src/directives/overlays/popover.ts index e6352ff076..773107d0fd 100644 --- a/angular/src/directives/overlays/popover.ts +++ b/angular/src/directives/overlays/popover.ts @@ -1,7 +1,7 @@ /* eslint-disable */ /* tslint:disable */ import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ContentChild, ElementRef, EventEmitter, NgZone, TemplateRef } from "@angular/core"; -import { ProxyCmp, proxyOutputs } from "../proxies-utils"; +import { ProxyCmp, proxyOutputs } from "../angular-component-lib/utils"; import { Components } from "@ionic/core"; export declare interface IonPopover extends Components.IonPopover { } diff --git a/angular/src/directives/proxies-list.txt b/angular/src/directives/proxies-list.txt index 8ff7d89c8b..1ec13c5c85 100644 --- a/angular/src/directives/proxies-list.txt +++ b/angular/src/directives/proxies-list.txt @@ -1,5 +1,5 @@ -import type * as d from './proxies'; +import * as d from './proxies'; export const DIRECTIVES = [ d.IonAccordion, diff --git a/angular/src/directives/proxies.ts b/angular/src/directives/proxies.ts index df5cf7f816..4642e4101a 100644 --- a/angular/src/directives/proxies.ts +++ b/angular/src/directives/proxies.ts @@ -1,13 +1,21 @@ -/* eslint-disable */ /* tslint:disable */ /* auto-generated angular directive proxies */ -import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, EventEmitter, NgZone } from "@angular/core"; -import { ProxyCmp, proxyOutputs } from "./proxies-utils"; -import { Components } from "@ionic/core"; -export declare interface IonAccordion extends Components.IonAccordion { -} -@ProxyCmp({ inputs: ["disabled", "mode", "readonly", "toggleIcon", "toggleIconSlot", "value"] }) -@Component({ selector: "ion-accordion", changeDetection: ChangeDetectionStrategy.OnPush, template: "", inputs: ["disabled", "mode", "readonly", "toggleIcon", "toggleIconSlot", "value"] }) +import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, EventEmitter, NgZone } from '@angular/core'; +import { ProxyCmp, proxyOutputs } from './angular-component-lib/utils'; + +import { Components } from '@ionic/core'; + + +export declare interface IonAccordion extends Components.IonAccordion {} +@ProxyCmp({ + inputs: ['disabled', 'mode', 'readonly', 'toggleIcon', 'toggleIconSlot', 'value'] +}) +@Component({ + selector: 'ion-accordion', + changeDetection: ChangeDetectionStrategy.OnPush, + template: '', + inputs: ['disabled', 'mode', 'readonly', 'toggleIcon', 'toggleIconSlot', 'value'] +}) export class IonAccordion { protected el: HTMLElement; constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) { @@ -15,22 +23,38 @@ export class IonAccordion { this.el = r.nativeElement; } } -export declare interface IonAccordionGroup extends Components.IonAccordionGroup { -} -@ProxyCmp({ inputs: ["animated", "disabled", "expand", "mode", "multiple", "readonly", "value"] }) -@Component({ selector: "ion-accordion-group", changeDetection: ChangeDetectionStrategy.OnPush, template: "", inputs: ["animated", "disabled", "expand", "mode", "multiple", "readonly", "value"] }) + +import { AccordionGroupChangeEventDetail as IAccordionGroupAccordionGroupChangeEventDetail } from '@ionic/core'; +export declare interface IonAccordionGroup extends Components.IonAccordionGroup {} +@ProxyCmp({ + inputs: ['animated', 'disabled', 'expand', 'mode', 'multiple', 'readonly', 'value'] +}) +@Component({ + selector: 'ion-accordion-group', + changeDetection: ChangeDetectionStrategy.OnPush, + template: '', + inputs: ['animated', 'disabled', 'expand', 'mode', 'multiple', 'readonly', 'value'], + outputs: ['ionChange'] +}) export class IonAccordionGroup { - ionChange!: EventEmitter; + /** Emitted when the value property has changed. */ + ionChange!: EventEmitter>; protected el: HTMLElement; constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) { c.detach(); this.el = r.nativeElement; - proxyOutputs(this, this.el, ["ionChange"]); + proxyOutputs(this, this.el, ['ionChange']); } } -export declare interface IonApp extends Components.IonApp { -} -@Component({ selector: "ion-app", changeDetection: ChangeDetectionStrategy.OnPush, template: "" }) + + +export declare interface IonApp extends Components.IonApp {} + +@Component({ + selector: 'ion-app', + changeDetection: ChangeDetectionStrategy.OnPush, + template: '' +}) export class IonApp { protected el: HTMLElement; constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) { @@ -38,9 +62,15 @@ export class IonApp { this.el = r.nativeElement; } } -export declare interface IonAvatar extends Components.IonAvatar { -} -@Component({ selector: "ion-avatar", changeDetection: ChangeDetectionStrategy.OnPush, template: "" }) + + +export declare interface IonAvatar extends Components.IonAvatar {} + +@Component({ + selector: 'ion-avatar', + changeDetection: ChangeDetectionStrategy.OnPush, + template: '' +}) export class IonAvatar { protected el: HTMLElement; constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) { @@ -48,10 +78,18 @@ export class IonAvatar { this.el = r.nativeElement; } } -export declare interface IonBackButton extends Components.IonBackButton { -} -@ProxyCmp({ inputs: ["color", "defaultHref", "disabled", "icon", "mode", "routerAnimation", "text", "type"] }) -@Component({ selector: "ion-back-button", changeDetection: ChangeDetectionStrategy.OnPush, template: "", inputs: ["color", "defaultHref", "disabled", "icon", "mode", "routerAnimation", "text", "type"] }) + + +export declare interface IonBackButton extends Components.IonBackButton {} +@ProxyCmp({ + inputs: ['color', 'defaultHref', 'disabled', 'icon', 'mode', 'routerAnimation', 'text', 'type'] +}) +@Component({ + selector: 'ion-back-button', + changeDetection: ChangeDetectionStrategy.OnPush, + template: '', + inputs: ['color', 'defaultHref', 'disabled', 'icon', 'mode', 'routerAnimation', 'text', 'type'] +}) export class IonBackButton { protected el: HTMLElement; constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) { @@ -59,23 +97,41 @@ export class IonBackButton { this.el = r.nativeElement; } } -export declare interface IonBackdrop extends Components.IonBackdrop { -} -@ProxyCmp({ inputs: ["stopPropagation", "tappable", "visible"] }) -@Component({ selector: "ion-backdrop", changeDetection: ChangeDetectionStrategy.OnPush, template: "", inputs: ["stopPropagation", "tappable", "visible"] }) + + +export declare interface IonBackdrop extends Components.IonBackdrop {} +@ProxyCmp({ + inputs: ['stopPropagation', 'tappable', 'visible'] +}) +@Component({ + selector: 'ion-backdrop', + changeDetection: ChangeDetectionStrategy.OnPush, + template: '', + inputs: ['stopPropagation', 'tappable', 'visible'], + outputs: ['ionBackdropTap'] +}) export class IonBackdrop { - ionBackdropTap!: EventEmitter; + /** Emitted when the backdrop is tapped. */ + ionBackdropTap!: EventEmitter>; protected el: HTMLElement; constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) { c.detach(); this.el = r.nativeElement; - proxyOutputs(this, this.el, ["ionBackdropTap"]); + proxyOutputs(this, this.el, ['ionBackdropTap']); } } -export declare interface IonBadge extends Components.IonBadge { -} -@ProxyCmp({ inputs: ["color", "mode"] }) -@Component({ selector: "ion-badge", changeDetection: ChangeDetectionStrategy.OnPush, template: "", inputs: ["color", "mode"] }) + + +export declare interface IonBadge extends Components.IonBadge {} +@ProxyCmp({ + inputs: ['color', 'mode'] +}) +@Component({ + selector: 'ion-badge', + changeDetection: ChangeDetectionStrategy.OnPush, + template: '', + inputs: ['color', 'mode'] +}) export class IonBadge { protected el: HTMLElement; constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) { @@ -83,51 +139,91 @@ export class IonBadge { this.el = r.nativeElement; } } -export declare interface IonBreadcrumb extends Components.IonBreadcrumb { -} -@ProxyCmp({ inputs: ["active", "color", "disabled", "download", "href", "mode", "rel", "routerAnimation", "routerDirection", "separator", "target"] }) -@Component({ selector: "ion-breadcrumb", changeDetection: ChangeDetectionStrategy.OnPush, template: "", inputs: ["active", "color", "disabled", "download", "href", "mode", "rel", "routerAnimation", "routerDirection", "separator", "target"] }) + + +export declare interface IonBreadcrumb extends Components.IonBreadcrumb {} +@ProxyCmp({ + inputs: ['active', 'color', 'disabled', 'download', 'href', 'mode', 'rel', 'routerAnimation', 'routerDirection', 'separator', 'target'] +}) +@Component({ + selector: 'ion-breadcrumb', + changeDetection: ChangeDetectionStrategy.OnPush, + template: '', + inputs: ['active', 'color', 'disabled', 'download', 'href', 'mode', 'rel', 'routerAnimation', 'routerDirection', 'separator', 'target'], + outputs: ['ionFocus', 'ionBlur'] +}) export class IonBreadcrumb { - ionFocus!: EventEmitter; - ionBlur!: EventEmitter; + /** Emitted when the breadcrumb has focus. */ + ionFocus!: EventEmitter>; + /** Emitted when the breadcrumb loses focus. */ + ionBlur!: EventEmitter>; protected el: HTMLElement; constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) { c.detach(); this.el = r.nativeElement; - proxyOutputs(this, this.el, ["ionFocus", "ionBlur"]); + proxyOutputs(this, this.el, ['ionFocus', 'ionBlur']); } } -export declare interface IonBreadcrumbs extends Components.IonBreadcrumbs { -} -@ProxyCmp({ inputs: ["color", "itemsAfterCollapse", "itemsBeforeCollapse", "maxItems", "mode"] }) -@Component({ selector: "ion-breadcrumbs", changeDetection: ChangeDetectionStrategy.OnPush, template: "", inputs: ["color", "itemsAfterCollapse", "itemsBeforeCollapse", "maxItems", "mode"] }) + +import { BreadcrumbCollapsedClickEventDetail as IBreadcrumbsBreadcrumbCollapsedClickEventDetail } from '@ionic/core'; +export declare interface IonBreadcrumbs extends Components.IonBreadcrumbs {} +@ProxyCmp({ + inputs: ['color', 'itemsAfterCollapse', 'itemsBeforeCollapse', 'maxItems', 'mode'] +}) +@Component({ + selector: 'ion-breadcrumbs', + changeDetection: ChangeDetectionStrategy.OnPush, + template: '', + inputs: ['color', 'itemsAfterCollapse', 'itemsBeforeCollapse', 'maxItems', 'mode'], + outputs: ['ionCollapsedClick'] +}) export class IonBreadcrumbs { - ionCollapsedClick!: EventEmitter; + /** Emitted when the collapsed indicator is clicked on. */ + ionCollapsedClick!: EventEmitter>; protected el: HTMLElement; constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) { c.detach(); this.el = r.nativeElement; - proxyOutputs(this, this.el, ["ionCollapsedClick"]); + proxyOutputs(this, this.el, ['ionCollapsedClick']); } } -export declare interface IonButton extends Components.IonButton { -} -@ProxyCmp({ inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }) -@Component({ selector: "ion-button", changeDetection: ChangeDetectionStrategy.OnPush, template: "", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }) + + +export declare interface IonButton extends Components.IonButton {} +@ProxyCmp({ + inputs: ['buttonType', 'color', 'disabled', 'download', 'expand', 'fill', 'href', 'mode', 'rel', 'routerAnimation', 'routerDirection', 'shape', 'size', 'strong', 'target', 'type'] +}) +@Component({ + selector: 'ion-button', + changeDetection: ChangeDetectionStrategy.OnPush, + template: '', + inputs: ['buttonType', 'color', 'disabled', 'download', 'expand', 'fill', 'href', 'mode', 'rel', 'routerAnimation', 'routerDirection', 'shape', 'size', 'strong', 'target', 'type'], + outputs: ['ionFocus', 'ionBlur'] +}) export class IonButton { - ionFocus!: EventEmitter; - ionBlur!: EventEmitter; + /** Emitted when the button has focus. */ + ionFocus!: EventEmitter>; + /** Emitted when the button loses focus. */ + ionBlur!: EventEmitter>; protected el: HTMLElement; constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) { c.detach(); this.el = r.nativeElement; - proxyOutputs(this, this.el, ["ionFocus", "ionBlur"]); + proxyOutputs(this, this.el, ['ionFocus', 'ionBlur']); } } -export declare interface IonButtons extends Components.IonButtons { -} -@ProxyCmp({ inputs: ["collapse"] }) -@Component({ selector: "ion-buttons", changeDetection: ChangeDetectionStrategy.OnPush, template: "", inputs: ["collapse"] }) + + +export declare interface IonButtons extends Components.IonButtons {} +@ProxyCmp({ + inputs: ['collapse'] +}) +@Component({ + selector: 'ion-buttons', + changeDetection: ChangeDetectionStrategy.OnPush, + template: '', + inputs: ['collapse'] +}) export class IonButtons { protected el: HTMLElement; constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) { @@ -135,10 +231,18 @@ export class IonButtons { this.el = r.nativeElement; } } -export declare interface IonCard extends Components.IonCard { -} -@ProxyCmp({ inputs: ["button", "color", "disabled", "download", "href", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }) -@Component({ selector: "ion-card", changeDetection: ChangeDetectionStrategy.OnPush, template: "", inputs: ["button", "color", "disabled", "download", "href", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }) + + +export declare interface IonCard extends Components.IonCard {} +@ProxyCmp({ + inputs: ['button', 'color', 'disabled', 'download', 'href', 'mode', 'rel', 'routerAnimation', 'routerDirection', 'target', 'type'] +}) +@Component({ + selector: 'ion-card', + changeDetection: ChangeDetectionStrategy.OnPush, + template: '', + inputs: ['button', 'color', 'disabled', 'download', 'href', 'mode', 'rel', 'routerAnimation', 'routerDirection', 'target', 'type'] +}) export class IonCard { protected el: HTMLElement; constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) { @@ -146,10 +250,18 @@ export class IonCard { this.el = r.nativeElement; } } -export declare interface IonCardContent extends Components.IonCardContent { -} -@ProxyCmp({ inputs: ["mode"] }) -@Component({ selector: "ion-card-content", changeDetection: ChangeDetectionStrategy.OnPush, template: "", inputs: ["mode"] }) + + +export declare interface IonCardContent extends Components.IonCardContent {} +@ProxyCmp({ + inputs: ['mode'] +}) +@Component({ + selector: 'ion-card-content', + changeDetection: ChangeDetectionStrategy.OnPush, + template: '', + inputs: ['mode'] +}) export class IonCardContent { protected el: HTMLElement; constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) { @@ -157,10 +269,18 @@ export class IonCardContent { this.el = r.nativeElement; } } -export declare interface IonCardHeader extends Components.IonCardHeader { -} -@ProxyCmp({ inputs: ["color", "mode", "translucent"] }) -@Component({ selector: "ion-card-header", changeDetection: ChangeDetectionStrategy.OnPush, template: "", inputs: ["color", "mode", "translucent"] }) + + +export declare interface IonCardHeader extends Components.IonCardHeader {} +@ProxyCmp({ + inputs: ['color', 'mode', 'translucent'] +}) +@Component({ + selector: 'ion-card-header', + changeDetection: ChangeDetectionStrategy.OnPush, + template: '', + inputs: ['color', 'mode', 'translucent'] +}) export class IonCardHeader { protected el: HTMLElement; constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) { @@ -168,10 +288,18 @@ export class IonCardHeader { this.el = r.nativeElement; } } -export declare interface IonCardSubtitle extends Components.IonCardSubtitle { -} -@ProxyCmp({ inputs: ["color", "mode"] }) -@Component({ selector: "ion-card-subtitle", changeDetection: ChangeDetectionStrategy.OnPush, template: "", inputs: ["color", "mode"] }) + + +export declare interface IonCardSubtitle extends Components.IonCardSubtitle {} +@ProxyCmp({ + inputs: ['color', 'mode'] +}) +@Component({ + selector: 'ion-card-subtitle', + changeDetection: ChangeDetectionStrategy.OnPush, + template: '', + inputs: ['color', 'mode'] +}) export class IonCardSubtitle { protected el: HTMLElement; constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) { @@ -179,10 +307,18 @@ export class IonCardSubtitle { this.el = r.nativeElement; } } -export declare interface IonCardTitle extends Components.IonCardTitle { -} -@ProxyCmp({ inputs: ["color", "mode"] }) -@Component({ selector: "ion-card-title", changeDetection: ChangeDetectionStrategy.OnPush, template: "", inputs: ["color", "mode"] }) + + +export declare interface IonCardTitle extends Components.IonCardTitle {} +@ProxyCmp({ + inputs: ['color', 'mode'] +}) +@Component({ + selector: 'ion-card-title', + changeDetection: ChangeDetectionStrategy.OnPush, + template: '', + inputs: ['color', 'mode'] +}) export class IonCardTitle { protected el: HTMLElement; constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) { @@ -190,25 +326,45 @@ export class IonCardTitle { this.el = r.nativeElement; } } -export declare interface IonCheckbox extends Components.IonCheckbox { -} -@ProxyCmp({ inputs: ["checked", "color", "disabled", "indeterminate", "mode", "name", "value"] }) -@Component({ selector: "ion-checkbox", changeDetection: ChangeDetectionStrategy.OnPush, template: "", inputs: ["checked", "color", "disabled", "indeterminate", "mode", "name", "value"] }) + +import { CheckboxChangeEventDetail as ICheckboxCheckboxChangeEventDetail } from '@ionic/core'; +export declare interface IonCheckbox extends Components.IonCheckbox {} +@ProxyCmp({ + inputs: ['checked', 'color', 'disabled', 'indeterminate', 'mode', 'name', 'value'] +}) +@Component({ + selector: 'ion-checkbox', + changeDetection: ChangeDetectionStrategy.OnPush, + template: '', + inputs: ['checked', 'color', 'disabled', 'indeterminate', 'mode', 'name', 'value'], + outputs: ['ionChange', 'ionFocus', 'ionBlur'] +}) export class IonCheckbox { - ionChange!: EventEmitter; - ionFocus!: EventEmitter; - ionBlur!: EventEmitter; + /** Emitted when the checked property has changed. */ + ionChange!: EventEmitter>; + /** Emitted when the checkbox has focus. */ + ionFocus!: EventEmitter>; + /** Emitted when the checkbox loses focus. */ + ionBlur!: EventEmitter>; protected el: HTMLElement; constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) { c.detach(); this.el = r.nativeElement; - proxyOutputs(this, this.el, ["ionChange", "ionFocus", "ionBlur"]); + proxyOutputs(this, this.el, ['ionChange', 'ionFocus', 'ionBlur']); } } -export declare interface IonChip extends Components.IonChip { -} -@ProxyCmp({ inputs: ["color", "disabled", "mode", "outline"] }) -@Component({ selector: "ion-chip", changeDetection: ChangeDetectionStrategy.OnPush, template: "", inputs: ["color", "disabled", "mode", "outline"] }) + + +export declare interface IonChip extends Components.IonChip {} +@ProxyCmp({ + inputs: ['color', 'disabled', 'mode', 'outline'] +}) +@Component({ + selector: 'ion-chip', + changeDetection: ChangeDetectionStrategy.OnPush, + template: '', + inputs: ['color', 'disabled', 'mode', 'outline'] +}) export class IonChip { protected el: HTMLElement; constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) { @@ -216,10 +372,18 @@ export class IonChip { this.el = r.nativeElement; } } -export declare interface IonCol extends Components.IonCol { -} -@ProxyCmp({ inputs: ["offset", "offsetLg", "offsetMd", "offsetSm", "offsetXl", "offsetXs", "pull", "pullLg", "pullMd", "pullSm", "pullXl", "pullXs", "push", "pushLg", "pushMd", "pushSm", "pushXl", "pushXs", "size", "sizeLg", "sizeMd", "sizeSm", "sizeXl", "sizeXs"] }) -@Component({ selector: "ion-col", changeDetection: ChangeDetectionStrategy.OnPush, template: "", inputs: ["offset", "offsetLg", "offsetMd", "offsetSm", "offsetXl", "offsetXs", "pull", "pullLg", "pullMd", "pullSm", "pullXl", "pullXs", "push", "pushLg", "pushMd", "pushSm", "pushXl", "pushXs", "size", "sizeLg", "sizeMd", "sizeSm", "sizeXl", "sizeXs"] }) + + +export declare interface IonCol extends Components.IonCol {} +@ProxyCmp({ + inputs: ['offset', 'offsetLg', 'offsetMd', 'offsetSm', 'offsetXl', 'offsetXs', 'pull', 'pullLg', 'pullMd', 'pullSm', 'pullXl', 'pullXs', 'push', 'pushLg', 'pushMd', 'pushSm', 'pushXl', 'pushXs', 'size', 'sizeLg', 'sizeMd', 'sizeSm', 'sizeXl', 'sizeXs'] +}) +@Component({ + selector: 'ion-col', + changeDetection: ChangeDetectionStrategy.OnPush, + template: '', + inputs: ['offset', 'offsetLg', 'offsetMd', 'offsetSm', 'offsetXl', 'offsetXs', 'pull', 'pullLg', 'pullMd', 'pullSm', 'pullXl', 'pullXs', 'push', 'pushLg', 'pushMd', 'pushSm', 'pushXl', 'pushXs', 'size', 'sizeLg', 'sizeMd', 'sizeSm', 'sizeXl', 'sizeXs'] +}) export class IonCol { protected el: HTMLElement; constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) { @@ -227,41 +391,79 @@ export class IonCol { this.el = r.nativeElement; } } -export declare interface IonContent extends Components.IonContent { -} -@ProxyCmp({ inputs: ["color", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"], "methods": ["getScrollElement", "scrollToTop", "scrollToBottom", "scrollByPoint", "scrollToPoint"] }) -@Component({ selector: "ion-content", changeDetection: ChangeDetectionStrategy.OnPush, template: "", inputs: ["color", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }) + +import { ScrollBaseDetail as IContentScrollBaseDetail } from '@ionic/core'; +import { ScrollDetail as IContentScrollDetail } from '@ionic/core'; +export declare interface IonContent extends Components.IonContent {} +@ProxyCmp({ + inputs: ['color', 'forceOverscroll', 'fullscreen', 'scrollEvents', 'scrollX', 'scrollY'], + methods: ['getScrollElement', 'scrollToTop', 'scrollToBottom', 'scrollByPoint', 'scrollToPoint'] +}) +@Component({ + selector: 'ion-content', + changeDetection: ChangeDetectionStrategy.OnPush, + template: '', + inputs: ['color', 'forceOverscroll', 'fullscreen', 'scrollEvents', 'scrollX', 'scrollY'], + outputs: ['ionScrollStart', 'ionScroll', 'ionScrollEnd'] +}) export class IonContent { - ionScrollStart!: EventEmitter; - ionScroll!: EventEmitter; - ionScrollEnd!: EventEmitter; + /** Emitted when the scroll has started. */ + ionScrollStart!: EventEmitter>; + /** Emitted while scrolling. This event is disabled by default. +Look at the property: `scrollEvents` */ + ionScroll!: EventEmitter>; + /** Emitted when the scroll has ended. */ + ionScrollEnd!: EventEmitter>; protected el: HTMLElement; constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) { c.detach(); this.el = r.nativeElement; - proxyOutputs(this, this.el, ["ionScrollStart", "ionScroll", "ionScrollEnd"]); + proxyOutputs(this, this.el, ['ionScrollStart', 'ionScroll', 'ionScrollEnd']); } } -export declare interface IonDatetime extends Components.IonDatetime { -} -@ProxyCmp({ inputs: ["cancelText", "clearText", "color", "dayValues", "disabled", "doneText", "firstDayOfWeek", "hourCycle", "hourValues", "locale", "max", "min", "minuteValues", "mode", "monthValues", "name", "presentation", "readonly", "showClearButton", "showDefaultButtons", "showDefaultTimeLabel", "showDefaultTitle", "size", "value", "yearValues"], "methods": ["confirm", "reset", "cancel"] }) -@Component({ selector: "ion-datetime", changeDetection: ChangeDetectionStrategy.OnPush, template: "", inputs: ["cancelText", "clearText", "color", "dayValues", "disabled", "doneText", "firstDayOfWeek", "hourCycle", "hourValues", "locale", "max", "min", "minuteValues", "mode", "monthValues", "name", "presentation", "readonly", "showClearButton", "showDefaultButtons", "showDefaultTimeLabel", "showDefaultTitle", "size", "value", "yearValues"] }) + +import { DatetimeChangeEventDetail as IDatetimeDatetimeChangeEventDetail } from '@ionic/core'; +export declare interface IonDatetime extends Components.IonDatetime {} +@ProxyCmp({ + inputs: ['cancelText', 'clearText', 'color', 'dayValues', 'disabled', 'doneText', 'firstDayOfWeek', 'hourCycle', 'hourValues', 'locale', 'max', 'min', 'minuteValues', 'mode', 'monthValues', 'name', 'presentation', 'readonly', 'showClearButton', 'showDefaultButtons', 'showDefaultTimeLabel', 'showDefaultTitle', 'size', 'value', 'yearValues'], + methods: ['confirm', 'reset', 'cancel'] +}) +@Component({ + selector: 'ion-datetime', + changeDetection: ChangeDetectionStrategy.OnPush, + template: '', + inputs: ['cancelText', 'clearText', 'color', 'dayValues', 'disabled', 'doneText', 'firstDayOfWeek', 'hourCycle', 'hourValues', 'locale', 'max', 'min', 'minuteValues', 'mode', 'monthValues', 'name', 'presentation', 'readonly', 'showClearButton', 'showDefaultButtons', 'showDefaultTimeLabel', 'showDefaultTitle', 'size', 'value', 'yearValues'], + outputs: ['ionCancel', 'ionChange', 'ionFocus', 'ionBlur'] +}) export class IonDatetime { - ionCancel!: EventEmitter; - ionChange!: EventEmitter; - ionFocus!: EventEmitter; - ionBlur!: EventEmitter; + /** Emitted when the datetime selection was cancelled. */ + ionCancel!: EventEmitter>; + /** Emitted when the value (selected date) has changed. */ + ionChange!: EventEmitter>; + /** Emitted when the datetime has focus. */ + ionFocus!: EventEmitter>; + /** Emitted when the datetime loses focus. */ + ionBlur!: EventEmitter>; protected el: HTMLElement; constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) { c.detach(); this.el = r.nativeElement; - proxyOutputs(this, this.el, ["ionCancel", "ionChange", "ionFocus", "ionBlur"]); + proxyOutputs(this, this.el, ['ionCancel', 'ionChange', 'ionFocus', 'ionBlur']); } } -export declare interface IonFab extends Components.IonFab { -} -@ProxyCmp({ inputs: ["activated", "edge", "horizontal", "vertical"], "methods": ["close"] }) -@Component({ selector: "ion-fab", changeDetection: ChangeDetectionStrategy.OnPush, template: "", inputs: ["activated", "edge", "horizontal", "vertical"] }) + + +export declare interface IonFab extends Components.IonFab {} +@ProxyCmp({ + inputs: ['activated', 'edge', 'horizontal', 'vertical'], + methods: ['close'] +}) +@Component({ + selector: 'ion-fab', + changeDetection: ChangeDetectionStrategy.OnPush, + template: '', + inputs: ['activated', 'edge', 'horizontal', 'vertical'] +}) export class IonFab { protected el: HTMLElement; constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) { @@ -269,24 +471,43 @@ export class IonFab { this.el = r.nativeElement; } } -export declare interface IonFabButton extends Components.IonFabButton { -} -@ProxyCmp({ inputs: ["activated", "closeIcon", "color", "disabled", "download", "href", "mode", "rel", "routerAnimation", "routerDirection", "show", "size", "target", "translucent", "type"] }) -@Component({ selector: "ion-fab-button", changeDetection: ChangeDetectionStrategy.OnPush, template: "", inputs: ["activated", "closeIcon", "color", "disabled", "download", "href", "mode", "rel", "routerAnimation", "routerDirection", "show", "size", "target", "translucent", "type"] }) + + +export declare interface IonFabButton extends Components.IonFabButton {} +@ProxyCmp({ + inputs: ['activated', 'closeIcon', 'color', 'disabled', 'download', 'href', 'mode', 'rel', 'routerAnimation', 'routerDirection', 'show', 'size', 'target', 'translucent', 'type'] +}) +@Component({ + selector: 'ion-fab-button', + changeDetection: ChangeDetectionStrategy.OnPush, + template: '', + inputs: ['activated', 'closeIcon', 'color', 'disabled', 'download', 'href', 'mode', 'rel', 'routerAnimation', 'routerDirection', 'show', 'size', 'target', 'translucent', 'type'], + outputs: ['ionFocus', 'ionBlur'] +}) export class IonFabButton { - ionFocus!: EventEmitter; - ionBlur!: EventEmitter; + /** Emitted when the button has focus. */ + ionFocus!: EventEmitter>; + /** Emitted when the button loses focus. */ + ionBlur!: EventEmitter>; protected el: HTMLElement; constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) { c.detach(); this.el = r.nativeElement; - proxyOutputs(this, this.el, ["ionFocus", "ionBlur"]); + proxyOutputs(this, this.el, ['ionFocus', 'ionBlur']); } } -export declare interface IonFabList extends Components.IonFabList { -} -@ProxyCmp({ inputs: ["activated", "side"] }) -@Component({ selector: "ion-fab-list", changeDetection: ChangeDetectionStrategy.OnPush, template: "", inputs: ["activated", "side"] }) + + +export declare interface IonFabList extends Components.IonFabList {} +@ProxyCmp({ + inputs: ['activated', 'side'] +}) +@Component({ + selector: 'ion-fab-list', + changeDetection: ChangeDetectionStrategy.OnPush, + template: '', + inputs: ['activated', 'side'] +}) export class IonFabList { protected el: HTMLElement; constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) { @@ -294,10 +515,18 @@ export class IonFabList { this.el = r.nativeElement; } } -export declare interface IonFooter extends Components.IonFooter { -} -@ProxyCmp({ inputs: ["mode", "translucent"] }) -@Component({ selector: "ion-footer", changeDetection: ChangeDetectionStrategy.OnPush, template: "", inputs: ["mode", "translucent"] }) + + +export declare interface IonFooter extends Components.IonFooter {} +@ProxyCmp({ + inputs: ['mode', 'translucent'] +}) +@Component({ + selector: 'ion-footer', + changeDetection: ChangeDetectionStrategy.OnPush, + template: '', + inputs: ['mode', 'translucent'] +}) export class IonFooter { protected el: HTMLElement; constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) { @@ -305,10 +534,18 @@ export class IonFooter { this.el = r.nativeElement; } } -export declare interface IonGrid extends Components.IonGrid { -} -@ProxyCmp({ inputs: ["fixed"] }) -@Component({ selector: "ion-grid", changeDetection: ChangeDetectionStrategy.OnPush, template: "", inputs: ["fixed"] }) + + +export declare interface IonGrid extends Components.IonGrid {} +@ProxyCmp({ + inputs: ['fixed'] +}) +@Component({ + selector: 'ion-grid', + changeDetection: ChangeDetectionStrategy.OnPush, + template: '', + inputs: ['fixed'] +}) export class IonGrid { protected el: HTMLElement; constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) { @@ -316,10 +553,18 @@ export class IonGrid { this.el = r.nativeElement; } } -export declare interface IonHeader extends Components.IonHeader { -} -@ProxyCmp({ inputs: ["collapse", "mode", "translucent"] }) -@Component({ selector: "ion-header", changeDetection: ChangeDetectionStrategy.OnPush, template: "", inputs: ["collapse", "mode", "translucent"] }) + + +export declare interface IonHeader extends Components.IonHeader {} +@ProxyCmp({ + inputs: ['collapse', 'mode', 'translucent'] +}) +@Component({ + selector: 'ion-header', + changeDetection: ChangeDetectionStrategy.OnPush, + template: '', + inputs: ['collapse', 'mode', 'translucent'] +}) export class IonHeader { protected el: HTMLElement; constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) { @@ -327,10 +572,18 @@ export class IonHeader { this.el = r.nativeElement; } } -export declare interface IonIcon extends Components.IonIcon { -} -@ProxyCmp({ inputs: ["ariaHidden", "ariaLabel", "color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }) -@Component({ selector: "ion-icon", changeDetection: ChangeDetectionStrategy.OnPush, template: "", inputs: ["ariaHidden", "ariaLabel", "color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }) + + +export declare interface IonIcon extends Components.IonIcon {} +@ProxyCmp({ + inputs: ['ariaHidden', 'ariaLabel', 'color', 'flipRtl', 'icon', 'ios', 'lazy', 'md', 'mode', 'name', 'sanitize', 'size', 'src'] +}) +@Component({ + selector: 'ion-icon', + changeDetection: ChangeDetectionStrategy.OnPush, + template: '', + inputs: ['ariaHidden', 'ariaLabel', 'color', 'flipRtl', 'icon', 'ios', 'lazy', 'md', 'mode', 'name', 'sanitize', 'size', 'src'] +}) export class IonIcon { protected el: HTMLElement; constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) { @@ -338,38 +591,72 @@ export class IonIcon { this.el = r.nativeElement; } } -export declare interface IonImg extends Components.IonImg { -} -@ProxyCmp({ inputs: ["alt", "src"] }) -@Component({ selector: "ion-img", changeDetection: ChangeDetectionStrategy.OnPush, template: "", inputs: ["alt", "src"] }) + + +export declare interface IonImg extends Components.IonImg {} +@ProxyCmp({ + inputs: ['alt', 'src'] +}) +@Component({ + selector: 'ion-img', + changeDetection: ChangeDetectionStrategy.OnPush, + template: '', + inputs: ['alt', 'src'], + outputs: ['ionImgWillLoad', 'ionImgDidLoad', 'ionError'] +}) export class IonImg { - ionImgWillLoad!: EventEmitter; - ionImgDidLoad!: EventEmitter; - ionError!: EventEmitter; + /** Emitted when the img src has been set */ + ionImgWillLoad!: EventEmitter>; + /** Emitted when the image has finished loading */ + ionImgDidLoad!: EventEmitter>; + /** Emitted when the img fails to load */ + ionError!: EventEmitter>; protected el: HTMLElement; constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) { c.detach(); this.el = r.nativeElement; - proxyOutputs(this, this.el, ["ionImgWillLoad", "ionImgDidLoad", "ionError"]); + proxyOutputs(this, this.el, ['ionImgWillLoad', 'ionImgDidLoad', 'ionError']); } } -export declare interface IonInfiniteScroll extends Components.IonInfiniteScroll { -} -@ProxyCmp({ inputs: ["disabled", "position", "threshold"], "methods": ["complete"] }) -@Component({ selector: "ion-infinite-scroll", changeDetection: ChangeDetectionStrategy.OnPush, template: "", inputs: ["disabled", "position", "threshold"] }) + + +export declare interface IonInfiniteScroll extends Components.IonInfiniteScroll {} +@ProxyCmp({ + inputs: ['disabled', 'position', 'threshold'], + methods: ['complete'] +}) +@Component({ + selector: 'ion-infinite-scroll', + changeDetection: ChangeDetectionStrategy.OnPush, + template: '', + inputs: ['disabled', 'position', 'threshold'], + outputs: ['ionInfinite'] +}) export class IonInfiniteScroll { - ionInfinite!: EventEmitter; + /** Emitted when the scroll reaches +the threshold distance. From within your infinite handler, +you must call the infinite scroll's `complete()` method when +your async operation has completed. */ + ionInfinite!: EventEmitter>; protected el: HTMLElement; constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) { c.detach(); this.el = r.nativeElement; - proxyOutputs(this, this.el, ["ionInfinite"]); + proxyOutputs(this, this.el, ['ionInfinite']); } } -export declare interface IonInfiniteScrollContent extends Components.IonInfiniteScrollContent { -} -@ProxyCmp({ inputs: ["loadingSpinner", "loadingText"] }) -@Component({ selector: "ion-infinite-scroll-content", changeDetection: ChangeDetectionStrategy.OnPush, template: "", inputs: ["loadingSpinner", "loadingText"] }) + + +export declare interface IonInfiniteScrollContent extends Components.IonInfiniteScrollContent {} +@ProxyCmp({ + inputs: ['loadingSpinner', 'loadingText'] +}) +@Component({ + selector: 'ion-infinite-scroll-content', + changeDetection: ChangeDetectionStrategy.OnPush, + template: '', + inputs: ['loadingSpinner', 'loadingText'] +}) export class IonInfiniteScrollContent { protected el: HTMLElement; constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) { @@ -377,26 +664,48 @@ export class IonInfiniteScrollContent { this.el = r.nativeElement; } } -export declare interface IonInput extends Components.IonInput { -} -@ProxyCmp({ inputs: ["accept", "autocapitalize", "autocomplete", "autocorrect", "autofocus", "clearInput", "clearOnEdit", "color", "debounce", "disabled", "enterkeyhint", "inputmode", "max", "maxlength", "min", "minlength", "mode", "multiple", "name", "pattern", "placeholder", "readonly", "required", "size", "spellcheck", "step", "type", "value"], "methods": ["setFocus", "getInputElement"] }) -@Component({ selector: "ion-input", changeDetection: ChangeDetectionStrategy.OnPush, template: "", inputs: ["accept", "autocapitalize", "autocomplete", "autocorrect", "autofocus", "clearInput", "clearOnEdit", "color", "debounce", "disabled", "enterkeyhint", "inputmode", "max", "maxlength", "min", "minlength", "mode", "multiple", "name", "pattern", "placeholder", "readonly", "required", "size", "spellcheck", "step", "type", "value"] }) + +import { InputChangeEventDetail as IInputInputChangeEventDetail } from '@ionic/core'; +export declare interface IonInput extends Components.IonInput {} +@ProxyCmp({ + inputs: ['accept', 'autocapitalize', 'autocomplete', 'autocorrect', 'autofocus', 'clearInput', 'clearOnEdit', 'color', 'debounce', 'disabled', 'enterkeyhint', 'inputmode', 'max', 'maxlength', 'min', 'minlength', 'mode', 'multiple', 'name', 'pattern', 'placeholder', 'readonly', 'required', 'size', 'spellcheck', 'step', 'type', 'value'], + methods: ['setFocus', 'getInputElement'] +}) +@Component({ + selector: 'ion-input', + changeDetection: ChangeDetectionStrategy.OnPush, + template: '', + inputs: ['accept', 'autocapitalize', 'autocomplete', 'autocorrect', 'autofocus', 'clearInput', 'clearOnEdit', 'color', 'debounce', 'disabled', 'enterkeyhint', 'inputmode', 'max', 'maxlength', 'min', 'minlength', 'mode', 'multiple', 'name', 'pattern', 'placeholder', 'readonly', 'required', 'size', 'spellcheck', 'step', 'type', 'value'], + outputs: ['ionInput', 'ionChange', 'ionBlur', 'ionFocus'] +}) export class IonInput { - ionInput!: EventEmitter; - ionChange!: EventEmitter; - ionBlur!: EventEmitter; - ionFocus!: EventEmitter; + /** Emitted when a keyboard input occurred. */ + ionInput!: EventEmitter>; + /** Emitted when the value has changed. */ + ionChange!: EventEmitter>; + /** Emitted when the input loses focus. */ + ionBlur!: EventEmitter>; + /** Emitted when the input has focus. */ + ionFocus!: EventEmitter>; protected el: HTMLElement; constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) { c.detach(); this.el = r.nativeElement; - proxyOutputs(this, this.el, ["ionInput", "ionChange", "ionBlur", "ionFocus"]); + proxyOutputs(this, this.el, ['ionInput', 'ionChange', 'ionBlur', 'ionFocus']); } } -export declare interface IonItem extends Components.IonItem { -} -@ProxyCmp({ inputs: ["button", "color", "counter", "detail", "detailIcon", "disabled", "download", "fill", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "shape", "target", "type"] }) -@Component({ selector: "ion-item", changeDetection: ChangeDetectionStrategy.OnPush, template: "", inputs: ["button", "color", "counter", "detail", "detailIcon", "disabled", "download", "fill", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "shape", "target", "type"] }) + + +export declare interface IonItem extends Components.IonItem {} +@ProxyCmp({ + inputs: ['button', 'color', 'counter', 'detail', 'detailIcon', 'disabled', 'download', 'fill', 'href', 'lines', 'mode', 'rel', 'routerAnimation', 'routerDirection', 'shape', 'target', 'type'] +}) +@Component({ + selector: 'ion-item', + changeDetection: ChangeDetectionStrategy.OnPush, + template: '', + inputs: ['button', 'color', 'counter', 'detail', 'detailIcon', 'disabled', 'download', 'fill', 'href', 'lines', 'mode', 'rel', 'routerAnimation', 'routerDirection', 'shape', 'target', 'type'] +}) export class IonItem { protected el: HTMLElement; constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) { @@ -404,10 +713,18 @@ export class IonItem { this.el = r.nativeElement; } } -export declare interface IonItemDivider extends Components.IonItemDivider { -} -@ProxyCmp({ inputs: ["color", "mode", "sticky"] }) -@Component({ selector: "ion-item-divider", changeDetection: ChangeDetectionStrategy.OnPush, template: "", inputs: ["color", "mode", "sticky"] }) + + +export declare interface IonItemDivider extends Components.IonItemDivider {} +@ProxyCmp({ + inputs: ['color', 'mode', 'sticky'] +}) +@Component({ + selector: 'ion-item-divider', + changeDetection: ChangeDetectionStrategy.OnPush, + template: '', + inputs: ['color', 'mode', 'sticky'] +}) export class IonItemDivider { protected el: HTMLElement; constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) { @@ -415,9 +732,15 @@ export class IonItemDivider { this.el = r.nativeElement; } } -export declare interface IonItemGroup extends Components.IonItemGroup { -} -@Component({ selector: "ion-item-group", changeDetection: ChangeDetectionStrategy.OnPush, template: "" }) + + +export declare interface IonItemGroup extends Components.IonItemGroup {} + +@Component({ + selector: 'ion-item-group', + changeDetection: ChangeDetectionStrategy.OnPush, + template: '' +}) export class IonItemGroup { protected el: HTMLElement; constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) { @@ -425,10 +748,18 @@ export class IonItemGroup { this.el = r.nativeElement; } } -export declare interface IonItemOption extends Components.IonItemOption { -} -@ProxyCmp({ inputs: ["color", "disabled", "download", "expandable", "href", "mode", "rel", "target", "type"] }) -@Component({ selector: "ion-item-option", changeDetection: ChangeDetectionStrategy.OnPush, template: "", inputs: ["color", "disabled", "download", "expandable", "href", "mode", "rel", "target", "type"] }) + + +export declare interface IonItemOption extends Components.IonItemOption {} +@ProxyCmp({ + inputs: ['color', 'disabled', 'download', 'expandable', 'href', 'mode', 'rel', 'target', 'type'] +}) +@Component({ + selector: 'ion-item-option', + changeDetection: ChangeDetectionStrategy.OnPush, + template: '', + inputs: ['color', 'disabled', 'download', 'expandable', 'href', 'mode', 'rel', 'target', 'type'] +}) export class IonItemOption { protected el: HTMLElement; constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) { @@ -436,36 +767,65 @@ export class IonItemOption { this.el = r.nativeElement; } } -export declare interface IonItemOptions extends Components.IonItemOptions { -} -@ProxyCmp({ inputs: ["side"] }) -@Component({ selector: "ion-item-options", changeDetection: ChangeDetectionStrategy.OnPush, template: "", inputs: ["side"] }) + + +export declare interface IonItemOptions extends Components.IonItemOptions {} +@ProxyCmp({ + inputs: ['side'] +}) +@Component({ + selector: 'ion-item-options', + changeDetection: ChangeDetectionStrategy.OnPush, + template: '', + inputs: ['side'], + outputs: ['ionSwipe'] +}) export class IonItemOptions { - ionSwipe!: EventEmitter; + /** Emitted when the item has been fully swiped. */ + ionSwipe!: EventEmitter>; protected el: HTMLElement; constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) { c.detach(); this.el = r.nativeElement; - proxyOutputs(this, this.el, ["ionSwipe"]); + proxyOutputs(this, this.el, ['ionSwipe']); } } -export declare interface IonItemSliding extends Components.IonItemSliding { -} -@ProxyCmp({ inputs: ["disabled"], "methods": ["getOpenAmount", "getSlidingRatio", "open", "close", "closeOpened"] }) -@Component({ selector: "ion-item-sliding", changeDetection: ChangeDetectionStrategy.OnPush, template: "", inputs: ["disabled"] }) + + +export declare interface IonItemSliding extends Components.IonItemSliding {} +@ProxyCmp({ + inputs: ['disabled'], + methods: ['getOpenAmount', 'getSlidingRatio', 'open', 'close', 'closeOpened'] +}) +@Component({ + selector: 'ion-item-sliding', + changeDetection: ChangeDetectionStrategy.OnPush, + template: '', + inputs: ['disabled'], + outputs: ['ionDrag'] +}) export class IonItemSliding { - ionDrag!: EventEmitter; + /** Emitted when the sliding position changes. */ + ionDrag!: EventEmitter>; protected el: HTMLElement; constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) { c.detach(); this.el = r.nativeElement; - proxyOutputs(this, this.el, ["ionDrag"]); + proxyOutputs(this, this.el, ['ionDrag']); } } -export declare interface IonLabel extends Components.IonLabel { -} -@ProxyCmp({ inputs: ["color", "mode", "position"] }) -@Component({ selector: "ion-label", changeDetection: ChangeDetectionStrategy.OnPush, template: "", inputs: ["color", "mode", "position"] }) + + +export declare interface IonLabel extends Components.IonLabel {} +@ProxyCmp({ + inputs: ['color', 'mode', 'position'] +}) +@Component({ + selector: 'ion-label', + changeDetection: ChangeDetectionStrategy.OnPush, + template: '', + inputs: ['color', 'mode', 'position'] +}) export class IonLabel { protected el: HTMLElement; constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) { @@ -473,10 +833,19 @@ export class IonLabel { this.el = r.nativeElement; } } -export declare interface IonList extends Components.IonList { -} -@ProxyCmp({ inputs: ["inset", "lines", "mode"], "methods": ["closeSlidingItems"] }) -@Component({ selector: "ion-list", changeDetection: ChangeDetectionStrategy.OnPush, template: "", inputs: ["inset", "lines", "mode"] }) + + +export declare interface IonList extends Components.IonList {} +@ProxyCmp({ + inputs: ['inset', 'lines', 'mode'], + methods: ['closeSlidingItems'] +}) +@Component({ + selector: 'ion-list', + changeDetection: ChangeDetectionStrategy.OnPush, + template: '', + inputs: ['inset', 'lines', 'mode'] +}) export class IonList { protected el: HTMLElement; constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) { @@ -484,10 +853,18 @@ export class IonList { this.el = r.nativeElement; } } -export declare interface IonListHeader extends Components.IonListHeader { -} -@ProxyCmp({ inputs: ["color", "lines", "mode"] }) -@Component({ selector: "ion-list-header", changeDetection: ChangeDetectionStrategy.OnPush, template: "", inputs: ["color", "lines", "mode"] }) + + +export declare interface IonListHeader extends Components.IonListHeader {} +@ProxyCmp({ + inputs: ['color', 'lines', 'mode'] +}) +@Component({ + selector: 'ion-list-header', + changeDetection: ChangeDetectionStrategy.OnPush, + template: '', + inputs: ['color', 'lines', 'mode'] +}) export class IonListHeader { protected el: HTMLElement; constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) { @@ -495,26 +872,48 @@ export class IonListHeader { this.el = r.nativeElement; } } -export declare interface IonMenu extends Components.IonMenu { -} -@ProxyCmp({ inputs: ["contentId", "disabled", "maxEdgeStart", "menuId", "side", "swipeGesture", "type"], "methods": ["isOpen", "isActive", "open", "close", "toggle", "setOpen"] }) -@Component({ selector: "ion-menu", changeDetection: ChangeDetectionStrategy.OnPush, template: "", inputs: ["contentId", "disabled", "maxEdgeStart", "menuId", "side", "swipeGesture", "type"] }) + + +export declare interface IonMenu extends Components.IonMenu {} +@ProxyCmp({ + inputs: ['contentId', 'disabled', 'maxEdgeStart', 'menuId', 'side', 'swipeGesture', 'type'], + methods: ['isOpen', 'isActive', 'open', 'close', 'toggle', 'setOpen'] +}) +@Component({ + selector: 'ion-menu', + changeDetection: ChangeDetectionStrategy.OnPush, + template: '', + inputs: ['contentId', 'disabled', 'maxEdgeStart', 'menuId', 'side', 'swipeGesture', 'type'], + outputs: ['ionWillOpen', 'ionWillClose', 'ionDidOpen', 'ionDidClose'] +}) export class IonMenu { - ionWillOpen!: EventEmitter; - ionWillClose!: EventEmitter; - ionDidOpen!: EventEmitter; - ionDidClose!: EventEmitter; + /** Emitted when the menu is about to be opened. */ + ionWillOpen!: EventEmitter>; + /** Emitted when the menu is about to be closed. */ + ionWillClose!: EventEmitter>; + /** Emitted when the menu is open. */ + ionDidOpen!: EventEmitter>; + /** Emitted when the menu is closed. */ + ionDidClose!: EventEmitter>; protected el: HTMLElement; constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) { c.detach(); this.el = r.nativeElement; - proxyOutputs(this, this.el, ["ionWillOpen", "ionWillClose", "ionDidOpen", "ionDidClose"]); + proxyOutputs(this, this.el, ['ionWillOpen', 'ionWillClose', 'ionDidOpen', 'ionDidClose']); } } -export declare interface IonMenuButton extends Components.IonMenuButton { -} -@ProxyCmp({ inputs: ["autoHide", "color", "disabled", "menu", "mode", "type"] }) -@Component({ selector: "ion-menu-button", changeDetection: ChangeDetectionStrategy.OnPush, template: "", inputs: ["autoHide", "color", "disabled", "menu", "mode", "type"] }) + + +export declare interface IonMenuButton extends Components.IonMenuButton {} +@ProxyCmp({ + inputs: ['autoHide', 'color', 'disabled', 'menu', 'mode', 'type'] +}) +@Component({ + selector: 'ion-menu-button', + changeDetection: ChangeDetectionStrategy.OnPush, + template: '', + inputs: ['autoHide', 'color', 'disabled', 'menu', 'mode', 'type'] +}) export class IonMenuButton { protected el: HTMLElement; constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) { @@ -522,10 +921,18 @@ export class IonMenuButton { this.el = r.nativeElement; } } -export declare interface IonMenuToggle extends Components.IonMenuToggle { -} -@ProxyCmp({ inputs: ["autoHide", "menu"] }) -@Component({ selector: "ion-menu-toggle", changeDetection: ChangeDetectionStrategy.OnPush, template: "", inputs: ["autoHide", "menu"] }) + + +export declare interface IonMenuToggle extends Components.IonMenuToggle {} +@ProxyCmp({ + inputs: ['autoHide', 'menu'] +}) +@Component({ + selector: 'ion-menu-toggle', + changeDetection: ChangeDetectionStrategy.OnPush, + template: '', + inputs: ['autoHide', 'menu'] +}) export class IonMenuToggle { protected el: HTMLElement; constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) { @@ -533,24 +940,44 @@ export class IonMenuToggle { this.el = r.nativeElement; } } -export declare interface IonNav extends Components.IonNav { -} -@ProxyCmp({ inputs: ["animated", "animation", "root", "rootParams", "swipeGesture"], "methods": ["push", "insert", "insertPages", "pop", "popTo", "popToRoot", "removeIndex", "setRoot", "setPages", "getActive", "getByIndex", "canGoBack", "getPrevious"] }) -@Component({ selector: "ion-nav", changeDetection: ChangeDetectionStrategy.OnPush, template: "", inputs: ["animated", "animation", "root", "rootParams", "swipeGesture"] }) + + +export declare interface IonNav extends Components.IonNav {} +@ProxyCmp({ + inputs: ['animated', 'animation', 'root', 'rootParams', 'swipeGesture'], + methods: ['push', 'insert', 'insertPages', 'pop', 'popTo', 'popToRoot', 'removeIndex', 'setRoot', 'setPages', 'getActive', 'getByIndex', 'canGoBack', 'getPrevious'] +}) +@Component({ + selector: 'ion-nav', + changeDetection: ChangeDetectionStrategy.OnPush, + template: '', + inputs: ['animated', 'animation', 'root', 'rootParams', 'swipeGesture'], + outputs: ['ionNavWillChange', 'ionNavDidChange'] +}) export class IonNav { - ionNavWillChange!: EventEmitter; - ionNavDidChange!: EventEmitter; + /** Event fired when the nav will change components */ + ionNavWillChange!: EventEmitter>; + /** Event fired when the nav has changed components */ + ionNavDidChange!: EventEmitter>; protected el: HTMLElement; constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) { c.detach(); this.el = r.nativeElement; - proxyOutputs(this, this.el, ["ionNavWillChange", "ionNavDidChange"]); + proxyOutputs(this, this.el, ['ionNavWillChange', 'ionNavDidChange']); } } -export declare interface IonNavLink extends Components.IonNavLink { -} -@ProxyCmp({ inputs: ["component", "componentProps", "routerAnimation", "routerDirection"] }) -@Component({ selector: "ion-nav-link", changeDetection: ChangeDetectionStrategy.OnPush, template: "", inputs: ["component", "componentProps", "routerAnimation", "routerDirection"] }) + + +export declare interface IonNavLink extends Components.IonNavLink {} +@ProxyCmp({ + inputs: ['component', 'componentProps', 'routerAnimation', 'routerDirection'] +}) +@Component({ + selector: 'ion-nav-link', + changeDetection: ChangeDetectionStrategy.OnPush, + template: '', + inputs: ['component', 'componentProps', 'routerAnimation', 'routerDirection'] +}) export class IonNavLink { protected el: HTMLElement; constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) { @@ -558,10 +985,18 @@ export class IonNavLink { this.el = r.nativeElement; } } -export declare interface IonNote extends Components.IonNote { -} -@ProxyCmp({ inputs: ["color", "mode"] }) -@Component({ selector: "ion-note", changeDetection: ChangeDetectionStrategy.OnPush, template: "", inputs: ["color", "mode"] }) + + +export declare interface IonNote extends Components.IonNote {} +@ProxyCmp({ + inputs: ['color', 'mode'] +}) +@Component({ + selector: 'ion-note', + changeDetection: ChangeDetectionStrategy.OnPush, + template: '', + inputs: ['color', 'mode'] +}) export class IonNote { protected el: HTMLElement; constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) { @@ -569,10 +1004,18 @@ export class IonNote { this.el = r.nativeElement; } } -export declare interface IonProgressBar extends Components.IonProgressBar { -} -@ProxyCmp({ inputs: ["buffer", "color", "mode", "reversed", "type", "value"] }) -@Component({ selector: "ion-progress-bar", changeDetection: ChangeDetectionStrategy.OnPush, template: "", inputs: ["buffer", "color", "mode", "reversed", "type", "value"] }) + + +export declare interface IonProgressBar extends Components.IonProgressBar {} +@ProxyCmp({ + inputs: ['buffer', 'color', 'mode', 'reversed', 'type', 'value'] +}) +@Component({ + selector: 'ion-progress-bar', + changeDetection: ChangeDetectionStrategy.OnPush, + template: '', + inputs: ['buffer', 'color', 'mode', 'reversed', 'type', 'value'] +}) export class IonProgressBar { protected el: HTMLElement; constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) { @@ -580,67 +1023,124 @@ export class IonProgressBar { this.el = r.nativeElement; } } -export declare interface IonRadio extends Components.IonRadio { -} -@ProxyCmp({ inputs: ["color", "disabled", "mode", "name", "value"] }) -@Component({ selector: "ion-radio", changeDetection: ChangeDetectionStrategy.OnPush, template: "", inputs: ["color", "disabled", "mode", "name", "value"] }) + + +export declare interface IonRadio extends Components.IonRadio {} +@ProxyCmp({ + inputs: ['color', 'disabled', 'mode', 'name', 'value'] +}) +@Component({ + selector: 'ion-radio', + changeDetection: ChangeDetectionStrategy.OnPush, + template: '', + inputs: ['color', 'disabled', 'mode', 'name', 'value'], + outputs: ['ionFocus', 'ionBlur'] +}) export class IonRadio { - ionFocus!: EventEmitter; - ionBlur!: EventEmitter; + /** Emitted when the radio button has focus. */ + ionFocus!: EventEmitter>; + /** Emitted when the radio button loses focus. */ + ionBlur!: EventEmitter>; protected el: HTMLElement; constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) { c.detach(); this.el = r.nativeElement; - proxyOutputs(this, this.el, ["ionFocus", "ionBlur"]); + proxyOutputs(this, this.el, ['ionFocus', 'ionBlur']); } } -export declare interface IonRadioGroup extends Components.IonRadioGroup { -} -@ProxyCmp({ inputs: ["allowEmptySelection", "name", "value"] }) -@Component({ selector: "ion-radio-group", changeDetection: ChangeDetectionStrategy.OnPush, template: "", inputs: ["allowEmptySelection", "name", "value"] }) + +import { RadioGroupChangeEventDetail as IRadioGroupRadioGroupChangeEventDetail } from '@ionic/core'; +export declare interface IonRadioGroup extends Components.IonRadioGroup {} +@ProxyCmp({ + inputs: ['allowEmptySelection', 'name', 'value'] +}) +@Component({ + selector: 'ion-radio-group', + changeDetection: ChangeDetectionStrategy.OnPush, + template: '', + inputs: ['allowEmptySelection', 'name', 'value'], + outputs: ['ionChange'] +}) export class IonRadioGroup { - ionChange!: EventEmitter; + /** Emitted when the value has changed. */ + ionChange!: EventEmitter>; protected el: HTMLElement; constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) { c.detach(); this.el = r.nativeElement; - proxyOutputs(this, this.el, ["ionChange"]); + proxyOutputs(this, this.el, ['ionChange']); } } -export declare interface IonRange extends Components.IonRange { -} -@ProxyCmp({ inputs: ["color", "debounce", "disabled", "dualKnobs", "max", "min", "mode", "name", "pin", "pinFormatter", "snaps", "step", "ticks", "value"] }) -@Component({ selector: "ion-range", changeDetection: ChangeDetectionStrategy.OnPush, template: "", inputs: ["color", "debounce", "disabled", "dualKnobs", "max", "min", "mode", "name", "pin", "pinFormatter", "snaps", "step", "ticks", "value"] }) + +import { RangeChangeEventDetail as IRangeRangeChangeEventDetail } from '@ionic/core'; +export declare interface IonRange extends Components.IonRange {} +@ProxyCmp({ + inputs: ['color', 'debounce', 'disabled', 'dualKnobs', 'max', 'min', 'mode', 'name', 'pin', 'pinFormatter', 'snaps', 'step', 'ticks', 'value'] +}) +@Component({ + selector: 'ion-range', + changeDetection: ChangeDetectionStrategy.OnPush, + template: '', + inputs: ['color', 'debounce', 'disabled', 'dualKnobs', 'max', 'min', 'mode', 'name', 'pin', 'pinFormatter', 'snaps', 'step', 'ticks', 'value'], + outputs: ['ionChange', 'ionFocus', 'ionBlur'] +}) export class IonRange { - ionChange!: EventEmitter; - ionFocus!: EventEmitter; - ionBlur!: EventEmitter; + /** Emitted when the value property has changed. */ + ionChange!: EventEmitter>; + /** Emitted when the range has focus. */ + ionFocus!: EventEmitter>; + /** Emitted when the range loses focus. */ + ionBlur!: EventEmitter>; protected el: HTMLElement; constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) { c.detach(); this.el = r.nativeElement; - proxyOutputs(this, this.el, ["ionChange", "ionFocus", "ionBlur"]); + proxyOutputs(this, this.el, ['ionChange', 'ionFocus', 'ionBlur']); } } -export declare interface IonRefresher extends Components.IonRefresher { -} -@ProxyCmp({ inputs: ["closeDuration", "disabled", "pullFactor", "pullMax", "pullMin", "snapbackDuration"], "methods": ["complete", "cancel", "getProgress"] }) -@Component({ selector: "ion-refresher", changeDetection: ChangeDetectionStrategy.OnPush, template: "", inputs: ["closeDuration", "disabled", "pullFactor", "pullMax", "pullMin", "snapbackDuration"] }) + +import { RefresherEventDetail as IRefresherRefresherEventDetail } from '@ionic/core'; +export declare interface IonRefresher extends Components.IonRefresher {} +@ProxyCmp({ + inputs: ['closeDuration', 'disabled', 'pullFactor', 'pullMax', 'pullMin', 'snapbackDuration'], + methods: ['complete', 'cancel', 'getProgress'] +}) +@Component({ + selector: 'ion-refresher', + changeDetection: ChangeDetectionStrategy.OnPush, + template: '', + inputs: ['closeDuration', 'disabled', 'pullFactor', 'pullMax', 'pullMin', 'snapbackDuration'], + outputs: ['ionRefresh', 'ionPull', 'ionStart'] +}) export class IonRefresher { - ionRefresh!: EventEmitter; - ionPull!: EventEmitter; - ionStart!: EventEmitter; + /** Emitted when the user lets go of the content and has pulled down +further than the `pullMin` or pulls the content down and exceeds the pullMax. +Updates the refresher state to `refreshing`. The `complete()` method should be +called when the async operation has completed. */ + ionRefresh!: EventEmitter>; + /** Emitted while the user is pulling down the content and exposing the refresher. */ + ionPull!: EventEmitter>; + /** Emitted when the user begins to start pulling down. */ + ionStart!: EventEmitter>; protected el: HTMLElement; constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) { c.detach(); this.el = r.nativeElement; - proxyOutputs(this, this.el, ["ionRefresh", "ionPull", "ionStart"]); + proxyOutputs(this, this.el, ['ionRefresh', 'ionPull', 'ionStart']); } } -export declare interface IonRefresherContent extends Components.IonRefresherContent { -} -@ProxyCmp({ inputs: ["pullingIcon", "pullingText", "refreshingSpinner", "refreshingText"] }) -@Component({ selector: "ion-refresher-content", changeDetection: ChangeDetectionStrategy.OnPush, template: "", inputs: ["pullingIcon", "pullingText", "refreshingSpinner", "refreshingText"] }) + + +export declare interface IonRefresherContent extends Components.IonRefresherContent {} +@ProxyCmp({ + inputs: ['pullingIcon', 'pullingText', 'refreshingSpinner', 'refreshingText'] +}) +@Component({ + selector: 'ion-refresher-content', + changeDetection: ChangeDetectionStrategy.OnPush, + template: '', + inputs: ['pullingIcon', 'pullingText', 'refreshingSpinner', 'refreshingText'] +}) export class IonRefresherContent { protected el: HTMLElement; constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) { @@ -648,9 +1148,15 @@ export class IonRefresherContent { this.el = r.nativeElement; } } -export declare interface IonReorder extends Components.IonReorder { -} -@Component({ selector: "ion-reorder", changeDetection: ChangeDetectionStrategy.OnPush, template: "" }) + + +export declare interface IonReorder extends Components.IonReorder {} + +@Component({ + selector: 'ion-reorder', + changeDetection: ChangeDetectionStrategy.OnPush, + template: '' +}) export class IonReorder { protected el: HTMLElement; constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) { @@ -658,23 +1164,45 @@ export class IonReorder { this.el = r.nativeElement; } } -export declare interface IonReorderGroup extends Components.IonReorderGroup { -} -@ProxyCmp({ inputs: ["disabled"], "methods": ["complete"] }) -@Component({ selector: "ion-reorder-group", changeDetection: ChangeDetectionStrategy.OnPush, template: "", inputs: ["disabled"] }) + +import { ItemReorderEventDetail as IReorderGroupItemReorderEventDetail } from '@ionic/core'; +export declare interface IonReorderGroup extends Components.IonReorderGroup {} +@ProxyCmp({ + inputs: ['disabled'], + methods: ['complete'] +}) +@Component({ + selector: 'ion-reorder-group', + changeDetection: ChangeDetectionStrategy.OnPush, + template: '', + inputs: ['disabled'], + outputs: ['ionItemReorder'] +}) export class IonReorderGroup { - ionItemReorder!: EventEmitter; + /** Event that needs to be listened to in order to complete the reorder action. +Once the event has been emitted, the `complete()` method then needs +to be called in order to finalize the reorder action. */ + ionItemReorder!: EventEmitter>; protected el: HTMLElement; constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) { c.detach(); this.el = r.nativeElement; - proxyOutputs(this, this.el, ["ionItemReorder"]); + proxyOutputs(this, this.el, ['ionItemReorder']); } } -export declare interface IonRippleEffect extends Components.IonRippleEffect { -} -@ProxyCmp({ inputs: ["type"], "methods": ["addRipple"] }) -@Component({ selector: "ion-ripple-effect", changeDetection: ChangeDetectionStrategy.OnPush, template: "", inputs: ["type"] }) + + +export declare interface IonRippleEffect extends Components.IonRippleEffect {} +@ProxyCmp({ + inputs: ['type'], + methods: ['addRipple'] +}) +@Component({ + selector: 'ion-ripple-effect', + changeDetection: ChangeDetectionStrategy.OnPush, + template: '', + inputs: ['type'] +}) export class IonRippleEffect { protected el: HTMLElement; constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) { @@ -682,9 +1210,15 @@ export class IonRippleEffect { this.el = r.nativeElement; } } -export declare interface IonRow extends Components.IonRow { -} -@Component({ selector: "ion-row", changeDetection: ChangeDetectionStrategy.OnPush, template: "" }) + + +export declare interface IonRow extends Components.IonRow {} + +@Component({ + selector: 'ion-row', + changeDetection: ChangeDetectionStrategy.OnPush, + template: '' +}) export class IonRow { protected el: HTMLElement; constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) { @@ -692,41 +1226,76 @@ export class IonRow { this.el = r.nativeElement; } } -export declare interface IonSearchbar extends Components.IonSearchbar { -} -@ProxyCmp({ inputs: ["animated", "autocomplete", "autocorrect", "cancelButtonIcon", "cancelButtonText", "clearIcon", "color", "debounce", "disabled", "enterkeyhint", "inputmode", "mode", "placeholder", "searchIcon", "showCancelButton", "showClearButton", "spellcheck", "type", "value"], "methods": ["setFocus", "getInputElement"] }) -@Component({ selector: "ion-searchbar", changeDetection: ChangeDetectionStrategy.OnPush, template: "", inputs: ["animated", "autocomplete", "autocorrect", "cancelButtonIcon", "cancelButtonText", "clearIcon", "color", "debounce", "disabled", "enterkeyhint", "inputmode", "mode", "placeholder", "searchIcon", "showCancelButton", "showClearButton", "spellcheck", "type", "value"] }) + +import { SearchbarChangeEventDetail as ISearchbarSearchbarChangeEventDetail } from '@ionic/core'; +export declare interface IonSearchbar extends Components.IonSearchbar {} +@ProxyCmp({ + inputs: ['animated', 'autocomplete', 'autocorrect', 'cancelButtonIcon', 'cancelButtonText', 'clearIcon', 'color', 'debounce', 'disabled', 'enterkeyhint', 'inputmode', 'mode', 'placeholder', 'searchIcon', 'showCancelButton', 'showClearButton', 'spellcheck', 'type', 'value'], + methods: ['setFocus', 'getInputElement'] +}) +@Component({ + selector: 'ion-searchbar', + changeDetection: ChangeDetectionStrategy.OnPush, + template: '', + inputs: ['animated', 'autocomplete', 'autocorrect', 'cancelButtonIcon', 'cancelButtonText', 'clearIcon', 'color', 'debounce', 'disabled', 'enterkeyhint', 'inputmode', 'mode', 'placeholder', 'searchIcon', 'showCancelButton', 'showClearButton', 'spellcheck', 'type', 'value'], + outputs: ['ionInput', 'ionChange', 'ionCancel', 'ionClear', 'ionBlur', 'ionFocus'] +}) export class IonSearchbar { - ionInput!: EventEmitter; - ionChange!: EventEmitter; - ionCancel!: EventEmitter; - ionClear!: EventEmitter; - ionBlur!: EventEmitter; - ionFocus!: EventEmitter; + /** Emitted when a keyboard input occurred. */ + ionInput!: EventEmitter>; + /** Emitted when the value has changed. */ + ionChange!: EventEmitter>; + /** Emitted when the cancel button is clicked. */ + ionCancel!: EventEmitter>; + /** Emitted when the clear input button is clicked. */ + ionClear!: EventEmitter>; + /** Emitted when the input loses focus. */ + ionBlur!: EventEmitter>; + /** Emitted when the input has focus. */ + ionFocus!: EventEmitter>; protected el: HTMLElement; constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) { c.detach(); this.el = r.nativeElement; - proxyOutputs(this, this.el, ["ionInput", "ionChange", "ionCancel", "ionClear", "ionBlur", "ionFocus"]); + proxyOutputs(this, this.el, ['ionInput', 'ionChange', 'ionCancel', 'ionClear', 'ionBlur', 'ionFocus']); } } -export declare interface IonSegment extends Components.IonSegment { -} -@ProxyCmp({ inputs: ["color", "disabled", "mode", "scrollable", "selectOnFocus", "swipeGesture", "value"] }) -@Component({ selector: "ion-segment", changeDetection: ChangeDetectionStrategy.OnPush, template: "", inputs: ["color", "disabled", "mode", "scrollable", "selectOnFocus", "swipeGesture", "value"] }) + +import { SegmentChangeEventDetail as ISegmentSegmentChangeEventDetail } from '@ionic/core'; +export declare interface IonSegment extends Components.IonSegment {} +@ProxyCmp({ + inputs: ['color', 'disabled', 'mode', 'scrollable', 'selectOnFocus', 'swipeGesture', 'value'] +}) +@Component({ + selector: 'ion-segment', + changeDetection: ChangeDetectionStrategy.OnPush, + template: '', + inputs: ['color', 'disabled', 'mode', 'scrollable', 'selectOnFocus', 'swipeGesture', 'value'], + outputs: ['ionChange'] +}) export class IonSegment { - ionChange!: EventEmitter; + /** Emitted when the value property has changed and any +dragging pointer has been released from `ion-segment`. */ + ionChange!: EventEmitter>; protected el: HTMLElement; constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) { c.detach(); this.el = r.nativeElement; - proxyOutputs(this, this.el, ["ionChange"]); + proxyOutputs(this, this.el, ['ionChange']); } } -export declare interface IonSegmentButton extends Components.IonSegmentButton { -} -@ProxyCmp({ inputs: ["disabled", "layout", "mode", "type", "value"] }) -@Component({ selector: "ion-segment-button", changeDetection: ChangeDetectionStrategy.OnPush, template: "", inputs: ["disabled", "layout", "mode", "type", "value"] }) + + +export declare interface IonSegmentButton extends Components.IonSegmentButton {} +@ProxyCmp({ + inputs: ['disabled', 'layout', 'mode', 'type', 'value'] +}) +@Component({ + selector: 'ion-segment-button', + changeDetection: ChangeDetectionStrategy.OnPush, + template: '', + inputs: ['disabled', 'layout', 'mode', 'type', 'value'] +}) export class IonSegmentButton { protected el: HTMLElement; constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) { @@ -734,26 +1303,48 @@ export class IonSegmentButton { this.el = r.nativeElement; } } -export declare interface IonSelect extends Components.IonSelect { -} -@ProxyCmp({ inputs: ["cancelText", "compareWith", "disabled", "interface", "interfaceOptions", "mode", "multiple", "name", "okText", "placeholder", "selectedText", "value"], "methods": ["open"] }) -@Component({ selector: "ion-select", changeDetection: ChangeDetectionStrategy.OnPush, template: "", inputs: ["cancelText", "compareWith", "disabled", "interface", "interfaceOptions", "mode", "multiple", "name", "okText", "placeholder", "selectedText", "value"] }) + +import { SelectChangeEventDetail as ISelectSelectChangeEventDetail } from '@ionic/core'; +export declare interface IonSelect extends Components.IonSelect {} +@ProxyCmp({ + inputs: ['cancelText', 'compareWith', 'disabled', 'interface', 'interfaceOptions', 'mode', 'multiple', 'name', 'okText', 'placeholder', 'selectedText', 'value'], + methods: ['open'] +}) +@Component({ + selector: 'ion-select', + changeDetection: ChangeDetectionStrategy.OnPush, + template: '', + inputs: ['cancelText', 'compareWith', 'disabled', 'interface', 'interfaceOptions', 'mode', 'multiple', 'name', 'okText', 'placeholder', 'selectedText', 'value'], + outputs: ['ionChange', 'ionCancel', 'ionFocus', 'ionBlur'] +}) export class IonSelect { - ionChange!: EventEmitter; - ionCancel!: EventEmitter; - ionFocus!: EventEmitter; - ionBlur!: EventEmitter; + /** Emitted when the value has changed. */ + ionChange!: EventEmitter>; + /** Emitted when the selection is cancelled. */ + ionCancel!: EventEmitter>; + /** Emitted when the select has focus. */ + ionFocus!: EventEmitter>; + /** Emitted when the select loses focus. */ + ionBlur!: EventEmitter>; protected el: HTMLElement; constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) { c.detach(); this.el = r.nativeElement; - proxyOutputs(this, this.el, ["ionChange", "ionCancel", "ionFocus", "ionBlur"]); + proxyOutputs(this, this.el, ['ionChange', 'ionCancel', 'ionFocus', 'ionBlur']); } } -export declare interface IonSelectOption extends Components.IonSelectOption { -} -@ProxyCmp({ inputs: ["disabled", "value"] }) -@Component({ selector: "ion-select-option", changeDetection: ChangeDetectionStrategy.OnPush, template: "", inputs: ["disabled", "value"] }) + + +export declare interface IonSelectOption extends Components.IonSelectOption {} +@ProxyCmp({ + inputs: ['disabled', 'value'] +}) +@Component({ + selector: 'ion-select-option', + changeDetection: ChangeDetectionStrategy.OnPush, + template: '', + inputs: ['disabled', 'value'] +}) export class IonSelectOption { protected el: HTMLElement; constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) { @@ -761,10 +1352,18 @@ export class IonSelectOption { this.el = r.nativeElement; } } -export declare interface IonSkeletonText extends Components.IonSkeletonText { -} -@ProxyCmp({ inputs: ["animated"] }) -@Component({ selector: "ion-skeleton-text", changeDetection: ChangeDetectionStrategy.OnPush, template: "", inputs: ["animated"] }) + + +export declare interface IonSkeletonText extends Components.IonSkeletonText {} +@ProxyCmp({ + inputs: ['animated'] +}) +@Component({ + selector: 'ion-skeleton-text', + changeDetection: ChangeDetectionStrategy.OnPush, + template: '', + inputs: ['animated'] +}) export class IonSkeletonText { protected el: HTMLElement; constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) { @@ -772,9 +1371,15 @@ export class IonSkeletonText { this.el = r.nativeElement; } } -export declare interface IonSlide extends Components.IonSlide { -} -@Component({ selector: "ion-slide", changeDetection: ChangeDetectionStrategy.OnPush, template: "" }) + + +export declare interface IonSlide extends Components.IonSlide {} + +@Component({ + selector: 'ion-slide', + changeDetection: ChangeDetectionStrategy.OnPush, + template: '' +}) export class IonSlide { protected el: HTMLElement; constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) { @@ -782,38 +1387,72 @@ export class IonSlide { this.el = r.nativeElement; } } -export declare interface IonSlides extends Components.IonSlides { -} -@ProxyCmp({ inputs: ["mode", "options", "pager", "scrollbar"], "methods": ["update", "updateAutoHeight", "slideTo", "slideNext", "slidePrev", "getActiveIndex", "getPreviousIndex", "length", "isEnd", "isBeginning", "startAutoplay", "stopAutoplay", "lockSwipeToNext", "lockSwipeToPrev", "lockSwipes", "getSwiper"] }) -@Component({ selector: "ion-slides", changeDetection: ChangeDetectionStrategy.OnPush, template: "", inputs: ["mode", "options", "pager", "scrollbar"] }) + + +export declare interface IonSlides extends Components.IonSlides {} +@ProxyCmp({ + inputs: ['mode', 'options', 'pager', 'scrollbar'], + methods: ['update', 'updateAutoHeight', 'slideTo', 'slideNext', 'slidePrev', 'getActiveIndex', 'getPreviousIndex', 'length', 'isEnd', 'isBeginning', 'startAutoplay', 'stopAutoplay', 'lockSwipeToNext', 'lockSwipeToPrev', 'lockSwipes', 'getSwiper'] +}) +@Component({ + selector: 'ion-slides', + changeDetection: ChangeDetectionStrategy.OnPush, + template: '', + inputs: ['mode', 'options', 'pager', 'scrollbar'], + outputs: ['ionSlidesDidLoad', 'ionSlideTap', 'ionSlideDoubleTap', 'ionSlideWillChange', 'ionSlideDidChange', 'ionSlideNextStart', 'ionSlidePrevStart', 'ionSlideNextEnd', 'ionSlidePrevEnd', 'ionSlideTransitionStart', 'ionSlideTransitionEnd', 'ionSlideDrag', 'ionSlideReachStart', 'ionSlideReachEnd', 'ionSlideTouchStart', 'ionSlideTouchEnd'] +}) export class IonSlides { - ionSlidesDidLoad!: EventEmitter; - ionSlideTap!: EventEmitter; - ionSlideDoubleTap!: EventEmitter; - ionSlideWillChange!: EventEmitter; - ionSlideDidChange!: EventEmitter; - ionSlideNextStart!: EventEmitter; - ionSlidePrevStart!: EventEmitter; - ionSlideNextEnd!: EventEmitter; - ionSlidePrevEnd!: EventEmitter; - ionSlideTransitionStart!: EventEmitter; - ionSlideTransitionEnd!: EventEmitter; - ionSlideDrag!: EventEmitter; - ionSlideReachStart!: EventEmitter; - ionSlideReachEnd!: EventEmitter; - ionSlideTouchStart!: EventEmitter; - ionSlideTouchEnd!: EventEmitter; + /** Emitted after Swiper initialization */ + ionSlidesDidLoad!: EventEmitter>; + /** Emitted when the user taps/clicks on the slide's container. */ + ionSlideTap!: EventEmitter>; + /** Emitted when the user double taps on the slide's container. */ + ionSlideDoubleTap!: EventEmitter>; + /** Emitted before the active slide has changed. */ + ionSlideWillChange!: EventEmitter>; + /** Emitted after the active slide has changed. */ + ionSlideDidChange!: EventEmitter>; + /** Emitted when the next slide has started. */ + ionSlideNextStart!: EventEmitter>; + /** Emitted when the previous slide has started. */ + ionSlidePrevStart!: EventEmitter>; + /** Emitted when the next slide has ended. */ + ionSlideNextEnd!: EventEmitter>; + /** Emitted when the previous slide has ended. */ + ionSlidePrevEnd!: EventEmitter>; + /** Emitted when the slide transition has started. */ + ionSlideTransitionStart!: EventEmitter>; + /** Emitted when the slide transition has ended. */ + ionSlideTransitionEnd!: EventEmitter>; + /** Emitted when the slider is actively being moved. */ + ionSlideDrag!: EventEmitter>; + /** Emitted when the slider is at its initial position. */ + ionSlideReachStart!: EventEmitter>; + /** Emitted when the slider is at the last slide. */ + ionSlideReachEnd!: EventEmitter>; + /** Emitted when the user first touches the slider. */ + ionSlideTouchStart!: EventEmitter>; + /** Emitted when the user releases the touch. */ + ionSlideTouchEnd!: EventEmitter>; protected el: HTMLElement; constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) { c.detach(); this.el = r.nativeElement; - proxyOutputs(this, this.el, ["ionSlidesDidLoad", "ionSlideTap", "ionSlideDoubleTap", "ionSlideWillChange", "ionSlideDidChange", "ionSlideNextStart", "ionSlidePrevStart", "ionSlideNextEnd", "ionSlidePrevEnd", "ionSlideTransitionStart", "ionSlideTransitionEnd", "ionSlideDrag", "ionSlideReachStart", "ionSlideReachEnd", "ionSlideTouchStart", "ionSlideTouchEnd"]); + proxyOutputs(this, this.el, ['ionSlidesDidLoad', 'ionSlideTap', 'ionSlideDoubleTap', 'ionSlideWillChange', 'ionSlideDidChange', 'ionSlideNextStart', 'ionSlidePrevStart', 'ionSlideNextEnd', 'ionSlidePrevEnd', 'ionSlideTransitionStart', 'ionSlideTransitionEnd', 'ionSlideDrag', 'ionSlideReachStart', 'ionSlideReachEnd', 'ionSlideTouchStart', 'ionSlideTouchEnd']); } } -export declare interface IonSpinner extends Components.IonSpinner { -} -@ProxyCmp({ inputs: ["color", "duration", "name", "paused"] }) -@Component({ selector: "ion-spinner", changeDetection: ChangeDetectionStrategy.OnPush, template: "", inputs: ["color", "duration", "name", "paused"] }) + + +export declare interface IonSpinner extends Components.IonSpinner {} +@ProxyCmp({ + inputs: ['color', 'duration', 'name', 'paused'] +}) +@Component({ + selector: 'ion-spinner', + changeDetection: ChangeDetectionStrategy.OnPush, + template: '', + inputs: ['color', 'duration', 'name', 'paused'] +}) export class IonSpinner { protected el: HTMLElement; constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) { @@ -821,23 +1460,41 @@ export class IonSpinner { this.el = r.nativeElement; } } -export declare interface IonSplitPane extends Components.IonSplitPane { -} -@ProxyCmp({ inputs: ["contentId", "disabled", "when"] }) -@Component({ selector: "ion-split-pane", changeDetection: ChangeDetectionStrategy.OnPush, template: "", inputs: ["contentId", "disabled", "when"] }) + + +export declare interface IonSplitPane extends Components.IonSplitPane {} +@ProxyCmp({ + inputs: ['contentId', 'disabled', 'when'] +}) +@Component({ + selector: 'ion-split-pane', + changeDetection: ChangeDetectionStrategy.OnPush, + template: '', + inputs: ['contentId', 'disabled', 'when'], + outputs: ['ionSplitPaneVisible'] +}) export class IonSplitPane { - ionSplitPaneVisible!: EventEmitter; + /** Expression to be called when the split-pane visibility has changed */ + ionSplitPaneVisible!: EventEmitter>; protected el: HTMLElement; constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) { c.detach(); this.el = r.nativeElement; - proxyOutputs(this, this.el, ["ionSplitPaneVisible"]); + proxyOutputs(this, this.el, ['ionSplitPaneVisible']); } } -export declare interface IonTabBar extends Components.IonTabBar { -} -@ProxyCmp({ inputs: ["color", "mode", "selectedTab", "translucent"] }) -@Component({ selector: "ion-tab-bar", changeDetection: ChangeDetectionStrategy.OnPush, template: "", inputs: ["color", "mode", "selectedTab", "translucent"] }) + + +export declare interface IonTabBar extends Components.IonTabBar {} +@ProxyCmp({ + inputs: ['color', 'mode', 'selectedTab', 'translucent'] +}) +@Component({ + selector: 'ion-tab-bar', + changeDetection: ChangeDetectionStrategy.OnPush, + template: '', + inputs: ['color', 'mode', 'selectedTab', 'translucent'] +}) export class IonTabBar { protected el: HTMLElement; constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) { @@ -845,10 +1502,18 @@ export class IonTabBar { this.el = r.nativeElement; } } -export declare interface IonTabButton extends Components.IonTabButton { -} -@ProxyCmp({ inputs: ["disabled", "download", "href", "layout", "mode", "rel", "selected", "tab", "target"] }) -@Component({ selector: "ion-tab-button", changeDetection: ChangeDetectionStrategy.OnPush, template: "", inputs: ["disabled", "download", "href", "layout", "mode", "rel", "selected", "tab", "target"] }) + + +export declare interface IonTabButton extends Components.IonTabButton {} +@ProxyCmp({ + inputs: ['disabled', 'download', 'href', 'layout', 'mode', 'rel', 'selected', 'tab', 'target'] +}) +@Component({ + selector: 'ion-tab-button', + changeDetection: ChangeDetectionStrategy.OnPush, + template: '', + inputs: ['disabled', 'download', 'href', 'layout', 'mode', 'rel', 'selected', 'tab', 'target'] +}) export class IonTabButton { protected el: HTMLElement; constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) { @@ -856,10 +1521,18 @@ export class IonTabButton { this.el = r.nativeElement; } } -export declare interface IonText extends Components.IonText { -} -@ProxyCmp({ inputs: ["color", "mode"] }) -@Component({ selector: "ion-text", changeDetection: ChangeDetectionStrategy.OnPush, template: "", inputs: ["color", "mode"] }) + + +export declare interface IonText extends Components.IonText {} +@ProxyCmp({ + inputs: ['color', 'mode'] +}) +@Component({ + selector: 'ion-text', + changeDetection: ChangeDetectionStrategy.OnPush, + template: '', + inputs: ['color', 'mode'] +}) export class IonText { protected el: HTMLElement; constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) { @@ -867,25 +1540,45 @@ export class IonText { this.el = r.nativeElement; } } -export declare interface IonTextarea extends Components.IonTextarea { -} -@ProxyCmp({ inputs: ["autoGrow", "autocapitalize", "autofocus", "clearOnEdit", "color", "cols", "debounce", "disabled", "enterkeyhint", "inputmode", "maxlength", "minlength", "mode", "name", "placeholder", "readonly", "required", "rows", "spellcheck", "value", "wrap"], "methods": ["setFocus", "getInputElement"] }) -@Component({ selector: "ion-textarea", changeDetection: ChangeDetectionStrategy.OnPush, template: "", inputs: ["autoGrow", "autocapitalize", "autofocus", "clearOnEdit", "color", "cols", "debounce", "disabled", "enterkeyhint", "inputmode", "maxlength", "minlength", "mode", "name", "placeholder", "readonly", "required", "rows", "spellcheck", "value", "wrap"] }) + +import { TextareaChangeEventDetail as ITextareaTextareaChangeEventDetail } from '@ionic/core'; +export declare interface IonTextarea extends Components.IonTextarea {} +@ProxyCmp({ + inputs: ['autoGrow', 'autocapitalize', 'autofocus', 'clearOnEdit', 'color', 'cols', 'debounce', 'disabled', 'enterkeyhint', 'inputmode', 'maxlength', 'minlength', 'mode', 'name', 'placeholder', 'readonly', 'required', 'rows', 'spellcheck', 'value', 'wrap'], + methods: ['setFocus', 'getInputElement'] +}) +@Component({ + selector: 'ion-textarea', + changeDetection: ChangeDetectionStrategy.OnPush, + template: '', + inputs: ['autoGrow', 'autocapitalize', 'autofocus', 'clearOnEdit', 'color', 'cols', 'debounce', 'disabled', 'enterkeyhint', 'inputmode', 'maxlength', 'minlength', 'mode', 'name', 'placeholder', 'readonly', 'required', 'rows', 'spellcheck', 'value', 'wrap'], + outputs: ['ionChange', 'ionInput', 'ionBlur', 'ionFocus'] +}) export class IonTextarea { - ionChange!: EventEmitter; - ionInput!: EventEmitter; - ionBlur!: EventEmitter; - ionFocus!: EventEmitter; + /** Emitted when the input value has changed. */ + ionChange!: EventEmitter>; + /** Emitted when a keyboard input occurred. */ + ionInput!: EventEmitter>; + /** Emitted when the input loses focus. */ + ionBlur!: EventEmitter>; + /** Emitted when the input has focus. */ + ionFocus!: EventEmitter>; protected el: HTMLElement; constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) { c.detach(); this.el = r.nativeElement; - proxyOutputs(this, this.el, ["ionChange", "ionInput", "ionBlur", "ionFocus"]); + proxyOutputs(this, this.el, ['ionChange', 'ionInput', 'ionBlur', 'ionFocus']); } } -export declare interface IonThumbnail extends Components.IonThumbnail { -} -@Component({ selector: "ion-thumbnail", changeDetection: ChangeDetectionStrategy.OnPush, template: "" }) + + +export declare interface IonThumbnail extends Components.IonThumbnail {} + +@Component({ + selector: 'ion-thumbnail', + changeDetection: ChangeDetectionStrategy.OnPush, + template: '' +}) export class IonThumbnail { protected el: HTMLElement; constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) { @@ -893,10 +1586,18 @@ export class IonThumbnail { this.el = r.nativeElement; } } -export declare interface IonTitle extends Components.IonTitle { -} -@ProxyCmp({ inputs: ["color", "size"] }) -@Component({ selector: "ion-title", changeDetection: ChangeDetectionStrategy.OnPush, template: "", inputs: ["color", "size"] }) + + +export declare interface IonTitle extends Components.IonTitle {} +@ProxyCmp({ + inputs: ['color', 'size'] +}) +@Component({ + selector: 'ion-title', + changeDetection: ChangeDetectionStrategy.OnPush, + template: '', + inputs: ['color', 'size'] +}) export class IonTitle { protected el: HTMLElement; constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) { @@ -904,25 +1605,45 @@ export class IonTitle { this.el = r.nativeElement; } } -export declare interface IonToggle extends Components.IonToggle { -} -@ProxyCmp({ inputs: ["checked", "color", "disabled", "mode", "name", "value"] }) -@Component({ selector: "ion-toggle", changeDetection: ChangeDetectionStrategy.OnPush, template: "", inputs: ["checked", "color", "disabled", "mode", "name", "value"] }) + +import { ToggleChangeEventDetail as IToggleToggleChangeEventDetail } from '@ionic/core'; +export declare interface IonToggle extends Components.IonToggle {} +@ProxyCmp({ + inputs: ['checked', 'color', 'disabled', 'mode', 'name', 'value'] +}) +@Component({ + selector: 'ion-toggle', + changeDetection: ChangeDetectionStrategy.OnPush, + template: '', + inputs: ['checked', 'color', 'disabled', 'mode', 'name', 'value'], + outputs: ['ionChange', 'ionFocus', 'ionBlur'] +}) export class IonToggle { - ionChange!: EventEmitter; - ionFocus!: EventEmitter; - ionBlur!: EventEmitter; + /** Emitted when the value property has changed. */ + ionChange!: EventEmitter>; + /** Emitted when the toggle has focus. */ + ionFocus!: EventEmitter>; + /** Emitted when the toggle loses focus. */ + ionBlur!: EventEmitter>; protected el: HTMLElement; constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) { c.detach(); this.el = r.nativeElement; - proxyOutputs(this, this.el, ["ionChange", "ionFocus", "ionBlur"]); + proxyOutputs(this, this.el, ['ionChange', 'ionFocus', 'ionBlur']); } } -export declare interface IonToolbar extends Components.IonToolbar { -} -@ProxyCmp({ inputs: ["color", "mode"] }) -@Component({ selector: "ion-toolbar", changeDetection: ChangeDetectionStrategy.OnPush, template: "", inputs: ["color", "mode"] }) + + +export declare interface IonToolbar extends Components.IonToolbar {} +@ProxyCmp({ + inputs: ['color', 'mode'] +}) +@Component({ + selector: 'ion-toolbar', + changeDetection: ChangeDetectionStrategy.OnPush, + template: '', + inputs: ['color', 'mode'] +}) export class IonToolbar { protected el: HTMLElement; constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) { diff --git a/angular/src/directives/virtual-scroll/virtual-scroll.ts b/angular/src/directives/virtual-scroll/virtual-scroll.ts index 02b08617ce..1ab6ac6eef 100644 --- a/angular/src/directives/virtual-scroll/virtual-scroll.ts +++ b/angular/src/directives/virtual-scroll/virtual-scroll.ts @@ -1,7 +1,7 @@ import { ChangeDetectionStrategy, Component, ContentChild, ElementRef, EmbeddedViewRef, IterableDiffer, IterableDiffers, NgZone, SimpleChanges, TrackByFunction } from '@angular/core'; import { Cell, CellType, FooterHeightFn, HeaderFn, HeaderHeightFn, ItemHeightFn } from '@ionic/core'; -import { ProxyCmp } from '../proxies-utils'; +import { ProxyCmp } from '../angular-component-lib/utils'; import { VirtualFooter } from './virtual-footer'; import { VirtualHeader } from './virtual-header'; diff --git a/core/package-lock.json b/core/package-lock.json index 257f937c85..b8ae5f57bb 100644 --- a/core/package-lock.json +++ b/core/package-lock.json @@ -18,6 +18,7 @@ "@jest/core": "^26.6.3", "@rollup/plugin-node-resolve": "^8.4.0", "@rollup/plugin-virtual": "^2.0.3", + "@stencil/angular-output-target": "^0.2.0", "@stencil/react-output-target": "^0.1.0", "@stencil/sass": "1.3.2", "@stencil/vue-output-target": "^0.5.1", @@ -1356,6 +1357,12 @@ "@sinonjs/commons": "^1.7.0" } }, + "node_modules/@stencil/angular-output-target": { + "version": "0.2.0", + "resolved": "https://registry.npmjs.org/@stencil/angular-output-target/-/angular-output-target-0.2.0.tgz", + "integrity": "sha512-Ptr5vigf8v+EnF9Y9LXTKimcVPfB9arC5FnSuKt5ZdNQ8IATWGLx4fhoD2/LThhkPwG9QtjDj9A4GPidu0Fomg==", + "dev": true + }, "node_modules/@stencil/core": { "version": "2.6.0", "resolved": "https://registry.npmjs.org/@stencil/core/-/core-2.6.0.tgz", @@ -15015,6 +15022,12 @@ "@sinonjs/commons": "^1.7.0" } }, + "@stencil/angular-output-target": { + "version": "0.2.0", + "resolved": "https://registry.npmjs.org/@stencil/angular-output-target/-/angular-output-target-0.2.0.tgz", + "integrity": "sha512-Ptr5vigf8v+EnF9Y9LXTKimcVPfB9arC5FnSuKt5ZdNQ8IATWGLx4fhoD2/LThhkPwG9QtjDj9A4GPidu0Fomg==", + "dev": true + }, "@stencil/core": { "version": "2.6.0", "resolved": "https://registry.npmjs.org/@stencil/core/-/core-2.6.0.tgz", diff --git a/core/package.json b/core/package.json index 23fd29995f..c26a60fe83 100644 --- a/core/package.json +++ b/core/package.json @@ -40,6 +40,7 @@ "@jest/core": "^26.6.3", "@rollup/plugin-node-resolve": "^8.4.0", "@rollup/plugin-virtual": "^2.0.3", + "@stencil/angular-output-target": "^0.2.0", "@stencil/react-output-target": "^0.1.0", "@stencil/sass": "1.3.2", "@stencil/vue-output-target": "^0.5.1", diff --git a/core/stencil.config.ts b/core/stencil.config.ts index 4fa5b37aeb..e865be78eb 100644 --- a/core/stencil.config.ts +++ b/core/stencil.config.ts @@ -1,5 +1,6 @@ import { Config } from '@stencil/core'; import { sass } from '@stencil/sass'; +import { angularOutputTarget } from '@stencil/angular-output-target'; import { vueOutputTarget } from '@stencil/vue-output-target'; import { reactOutputTarget } from '@stencil/react-output-target'; @@ -180,11 +181,9 @@ export const config: Config = { // type: 'stats', // file: 'stats.json' // }, - { - type: 'angular', + angularOutputTarget({ componentCorePackage: '@ionic/core', directivesProxyFile: '../angular/src/directives/proxies.ts', - directivesUtilsFile: '../angular/src/directives/proxies-utils.ts', directivesArrayFile: '../angular/src/directives/proxies-list.txt', excludeComponents: [ // overlays @@ -211,8 +210,44 @@ export const config: Config = { // auxiliar 'ion-picker-column', 'ion-virtual-scroll' - ] - } + ], + /** + * TODO: Abstract custom Ionic value accessor functionality + * to be configurable with Stencil generated value accessors. + */ + // valueAccessorConfigs: [ + // { + // elementSelectors: ['ion-input:not([type=number])', 'ion-textarea', 'ion-searchbar'], + // event: 'ionChange', + // targetAttr: 'value', + // type: 'text', + // }, + // { + // elementSelectors: ['ion-input[type=number]'], + // event: 'ionChange', + // targetAttr: 'value', + // type: 'number', + // }, + // { + // elementSelectors: ['ion-checkbox', 'ion-toggle'], + // event: 'ionChange', + // targetAttr: 'checked', + // type: 'boolean', + // }, + // { + // elementSelectors: ['ion-range', 'ion-select', 'ion-radio-group', 'ion-segment', 'ion-datetime'], + // event: 'ionChange', + // targetAttr: 'value', + // type: 'select', + // }, + // { + // elementSelectors: ['ion-radio'], + // event: 'ionSelect', + // targetAttr: 'checked', + // type: 'radio', + // }, + // ] + }), ], buildEs5: 'prod', extras: {