From db5313e45b8b261e1af9bb515c968db97d889613 Mon Sep 17 00:00:00 2001 From: "Manu Mtz.-Almeida" Date: Thu, 12 Apr 2018 17:16:33 +0200 Subject: [PATCH] fix(angular): icon proxy --- angular/src/directives/icon.ts | 2 +- angular/src/directives/proxies.ts | 182 +++++++++++++++--------------- angular/src/util/util.ts | 11 ++ 3 files changed, 103 insertions(+), 92 deletions(-) diff --git a/angular/src/directives/icon.ts b/angular/src/directives/icon.ts index 5b3c5236ab..7890276a3c 100644 --- a/angular/src/directives/icon.ts +++ b/angular/src/directives/icon.ts @@ -1,5 +1,5 @@ import { Directive, ElementRef, Input } from '@angular/core'; -import { inputs } from './proxies'; +import { inputs } from '../util/util'; @Directive({ selector: 'ion-icon' }) diff --git a/angular/src/directives/proxies.ts b/angular/src/directives/proxies.ts index b22453358d..f2b551beb5 100644 --- a/angular/src/directives/proxies.ts +++ b/angular/src/directives/proxies.ts @@ -1,14 +1,21 @@ /* angular directive proxies */ -import { Directive, ElementRef, EventEmitter, Output } from '@angular/core'; +import { Directive, ElementRef, EventEmitter } from '@angular/core'; +function inputs(instance: any, el: ElementRef, props: string[]) { + props.forEach(propName => { + Object.defineProperty(instance, propName, { + get: () => el.nativeElement[propName], set: (val: any) => el.nativeElement[propName] = val + }); + }); +} -export function outputs(instance: any, events: string[]) { +function outputs(instance: any, events: string[]) { events.forEach(eventName => { instance[eventName] = new EventEmitter(); }); } -export function methods(instance: any, ref: ElementRef, methods: string[]) { +function methods(instance: any, ref: ElementRef, methods: string[]) { const el = ref.nativeElement; methods.forEach(methodName => { Object.defineProperty(instance, methodName, { @@ -21,13 +28,6 @@ export function methods(instance: any, ref: ElementRef, methods: string[]) { }); } -export function inputs(instance: any, el: ElementRef, props: string[]) { - props.forEach(propName => { - Object.defineProperty(instance, propName, { - get: () => el.nativeElement[propName], set: (val: any) => el.nativeElement[propName] = val - }); - }); -} const accept = 'accept', activated = 'activated', active = 'active', addRipple = 'addRipple', allowEmptySelection = 'allowEmptySelection', animated = 'animated', autoHide = 'autoHide', autocapitalize = 'autocapitalize', autocomplete = 'autocomplete', autocorrect = 'autocorrect', autofocus = 'autofocus', badge = 'badge', badgeStyle = 'badgeStyle', btnId = 'btnId', button = 'button', buttonType = 'buttonType', canGoBack = 'canGoBack', cancel = 'cancel', cancelButtonText = 'cancelButtonText', cancelText = 'cancelText', checked = 'checked', clearInput = 'clearInput', clearOnEdit = 'clearOnEdit', close = 'close', closeDuration = 'closeDuration', closeOpened = 'closeOpened', closeSlidingItems = 'closeSlidingItems', color = 'color', cols = 'cols', complete = 'complete', component = 'component', componentProps = 'componentProps', contentId = 'contentId', dayNames = 'dayNames', dayShortNames = 'dayShortNames', dayValues = 'dayValues', debounce = 'debounce', defaultHref = 'defaultHref', delegate = 'delegate', detail = 'detail', disabled = 'disabled', displayFormat = 'displayFormat', doneText = 'doneText', dualKnobs = 'dualKnobs', duration = 'duration', edge = 'edge', expand = 'expand', expandable = 'expandable', fill = 'fill', fireSwipeEvent = 'fireSwipeEvent', fixed = 'fixed', floating = 'floating', forceOverscroll = 'forceOverscroll', fullscreen = 'fullscreen', getActive = 'getActive', getActiveIndex = 'getActiveIndex', getByIndex = 'getByIndex', getOpenAmount = 'getOpenAmount', getOpenItem = 'getOpenItem', getPrevious = 'getPrevious', getPreviousIndex = 'getPreviousIndex', getProgress = 'getProgress', getRouteId = 'getRouteId', getSelected = 'getSelected', getSlidingRatio = 'getSlidingRatio', getTab = 'getTab', getTabId = 'getTabId', getText = 'getText', header = 'header', horizontal = 'horizontal', hourValues = 'hourValues', href = 'href', icon = 'icon', inputmode = 'inputmode', insert = 'insert', insertPages = 'insertPages', interfaceOptions = 'interfaceOptions', ionBlur = 'ionBlur', ionCancel = 'ionCancel', ionChange = 'ionChange', ionClear = 'ionClear', ionClick = 'ionClick', ionClose = 'ionClose', ionDrag = 'ionDrag', ionFocus = 'ionFocus', ionInfinite = 'ionInfinite', ionInput = 'ionInput', ionInputDidLoad = 'ionInputDidLoad', ionInputDidUnload = 'ionInputDidUnload', ionMenuChange = 'ionMenuChange', ionNavDidChange = 'ionNavDidChange', ionNavWillChange = 'ionNavWillChange', ionOpen = 'ionOpen', ionPull = 'ionPull', ionRadioDidLoad = 'ionRadioDidLoad', ionRadioDidUnload = 'ionRadioDidUnload', ionRefresh = 'ionRefresh', ionScroll = 'ionScroll', ionScrollEnd = 'ionScrollEnd', ionScrollStart = 'ionScrollStart', ionSelect = 'ionSelect', ionSelectOptionDidLoad = 'ionSelectOptionDidLoad', ionSelectOptionDidUnload = 'ionSelectOptionDidUnload', ionSlideDidChange = 'ionSlideDidChange', ionSlideDrag = 'ionSlideDrag', ionSlideNextEnd = 'ionSlideNextEnd', ionSlideNextStart = 'ionSlideNextStart', ionSlidePrevEnd = 'ionSlidePrevEnd', ionSlidePrevStart = 'ionSlidePrevStart', ionSlideReachEnd = 'ionSlideReachEnd', ionSlideReachStart = 'ionSlideReachStart', ionSlideTouchEnd = 'ionSlideTouchEnd', ionSlideTouchStart = 'ionSlideTouchStart', ionSlideTransitionEnd = 'ionSlideTransitionEnd', ionSlideTransitionStart = 'ionSlideTransitionStart', ionSlideWillChange = 'ionSlideWillChange', ionSplitPaneVisible = 'ionSplitPaneVisible', ionStart = 'ionStart', ionStyle = 'ionStyle', ionSwipe = 'ionSwipe', isActive = 'isActive', isBeginning = 'isBeginning', isEnd = 'isEnd', isOpen = 'isOpen', isPane = 'isPane', isRightSide = 'isRightSide', isVisible = 'isVisible', label = 'label', length = 'length', loadingSpinner = 'loadingSpinner', loadingText = 'loadingText', lockSwipeToNext = 'lockSwipeToNext', lockSwipeToPrev = 'lockSwipeToPrev', lockSwipes = 'lockSwipes', max = 'max', maxEdgeStart = 'maxEdgeStart', maxlength = 'maxlength', mediaQuery = 'mediaQuery', menu = 'menu', menuId = 'menuId', message = 'message', min = 'min', minlength = 'minlength', minuteValues = 'minuteValues', mode = 'mode', monthNames = 'monthNames', monthShortNames = 'monthShortNames', monthValues = 'monthValues', multiple = 'multiple', name = 'name', okText = 'okText', open = 'open', options = 'options', or = 'or', orientation = 'orientation', pager = 'pager', pattern = 'pattern', paused = 'paused', persistent = 'persistent', pickerFormat = 'pickerFormat', pickerOptions = 'pickerOptions', pin = 'pin', placeholder = 'placeholder', platform = 'platform', pop = 'pop', popTo = 'popTo', popToRoot = 'popToRoot', position = 'position', pullMax = 'pullMax', pullMin = 'pullMin', pullingIcon = 'pullingIcon', pullingText = 'pullingText', push = 'push', ratio = 'ratio', ratioUpper = 'ratioUpper', readonly = 'readonly', refreshingSpinner = 'refreshingSpinner', refreshingText = 'refreshingText', removeIndex = 'removeIndex', required = 'required', results = 'results', root = 'root', rootParams = 'rootParams', round = 'round', routerDirection = 'routerDirection', rows = 'rows', scrollByPoint = 'scrollByPoint', scrollEnabled = 'scrollEnabled', scrollEvents = 'scrollEvents', scrollToBottom = 'scrollToBottom', scrollToPoint = 'scrollToPoint', scrollToTop = 'scrollToTop', scrollable = 'scrollable', select = 'select', selected = 'selected', selectedText = 'selectedText', setActive = 'setActive', setOpen = 'setOpen', setOpenItem = 'setOpenItem', setPages = 'setPages', setRoot = 'setRoot', setRouteId = 'setRouteId', show = 'show', showCancelButton = 'showCancelButton', side = 'side', size = 'size', slideNext = 'slideNext', slidePrev = 'slidePrev', slideTo = 'slideTo', snapbackDuration = 'snapbackDuration', snaps = 'snaps', spellcheck = 'spellcheck', stacked = 'stacked', startAutoplay = 'startAutoplay', step = 'step', stopAutoplay = 'stopAutoplay', strong = 'strong', subHeader = 'subHeader', swipeBackEnabled = 'swipeBackEnabled', swipeEnabled = 'swipeEnabled', tabbarHidden = 'tabbarHidden', tabbarHighlight = 'tabbarHighlight', tabbarLayout = 'tabbarLayout', tabbarPlacement = 'tabbarPlacement', tabsHideOnSubPages = 'tabsHideOnSubPages', tapClick = 'tapClick', text = 'text', threshold = 'threshold', toggle = 'toggle', translucent = 'translucent', type = 'type', update = 'update', url = 'url', useRouter = 'useRouter', value = 'value', vertical = 'vertical', waitFor = 'waitFor', when = 'when', width = 'width', wrap = 'wrap', yearValues = 'yearValues'; export declare interface App extends StencilComponents.IonApp {} @@ -59,8 +59,8 @@ export class Badge { export declare interface Button extends StencilComponents.IonButton {} @Directive({selector: 'ion-button', inputs: [color, mode, buttonType, disabled, expand, fill, routerDirection, href, round, size, strong, type], outputs: [ionFocus, ionBlur]}) export class Button { - @Output() ionFocus: EventEmitter; - @Output() ionBlur: EventEmitter; + ionFocus: EventEmitter; + ionBlur: EventEmitter; constructor(r: ElementRef) { inputs(this, r, [color, mode, buttonType, disabled, expand, fill, routerDirection, href, round, size, strong, type]); outputs(this, [ionFocus, ionBlur]); @@ -115,10 +115,10 @@ export class CardTitle { export declare interface Checkbox extends StencilComponents.IonCheckbox {} @Directive({selector: 'ion-checkbox', inputs: [color, mode, name, checked, disabled, value], outputs: [ionChange, ionFocus, ionBlur, ionStyle]}) export class Checkbox { - @Output() ionChange: EventEmitter; - @Output() ionFocus: EventEmitter; - @Output() ionBlur: EventEmitter; - @Output() ionStyle: EventEmitter; + ionChange: EventEmitter; + ionFocus: EventEmitter; + ionBlur: EventEmitter; + ionStyle: EventEmitter; constructor(r: ElementRef) { inputs(this, r, [color, mode, name, checked, disabled, value]); outputs(this, [ionChange, ionFocus, ionBlur, ionStyle]); @@ -158,8 +158,8 @@ export class Content { export declare interface Datetime extends StencilComponents.IonDatetime {} @Directive({selector: 'ion-datetime', inputs: [disabled, min, max, displayFormat, pickerFormat, cancelText, doneText, yearValues, monthValues, dayValues, hourValues, minuteValues, monthNames, monthShortNames, dayNames, dayShortNames, pickerOptions, placeholder, value], outputs: [ionCancel, ionStyle]}) export class Datetime { - @Output() ionCancel: EventEmitter; - @Output() ionStyle: EventEmitter; + ionCancel: EventEmitter; + ionStyle: EventEmitter; constructor(r: ElementRef) { inputs(this, r, [disabled, min, max, displayFormat, pickerFormat, cancelText, doneText, yearValues, monthValues, dayValues, hourValues, minuteValues, monthNames, monthShortNames, dayNames, dayShortNames, pickerOptions, placeholder, value]); outputs(this, [ionCancel, ionStyle]); @@ -223,7 +223,7 @@ export class HideWhen { export declare interface InfiniteScroll extends StencilComponents.IonInfiniteScroll {} @Directive({selector: 'ion-infinite-scroll', inputs: [threshold, disabled, position], outputs: [ionInfinite]}) export class InfiniteScroll { - @Output() ionInfinite: EventEmitter; + ionInfinite: EventEmitter; constructor(r: ElementRef) { methods(this, r, [complete, waitFor]); inputs(this, r, [threshold, disabled, position]); @@ -242,12 +242,12 @@ export class InfiniteScrollContent { export declare interface Input extends StencilComponents.IonInput {} @Directive({selector: 'ion-input', inputs: [accept, autocapitalize, autocomplete, autocorrect, autofocus, checked, clearInput, clearOnEdit, debounce, disabled, inputmode, max, maxlength, min, minlength, multiple, name, pattern, placeholder, readonly, required, results, spellcheck, step, size, type, value], outputs: [ionInput, ionStyle, ionBlur, ionFocus, ionInputDidLoad, ionInputDidUnload]}) export class Input { - @Output() ionInput: EventEmitter; - @Output() ionStyle: EventEmitter; - @Output() ionBlur: EventEmitter; - @Output() ionFocus: EventEmitter; - @Output() ionInputDidLoad: EventEmitter; - @Output() ionInputDidUnload: EventEmitter; + ionInput: EventEmitter; + ionStyle: EventEmitter; + ionBlur: EventEmitter; + ionFocus: EventEmitter; + ionInputDidLoad: EventEmitter; + ionInputDidUnload: EventEmitter; constructor(r: ElementRef) { inputs(this, r, [accept, autocapitalize, autocomplete, autocorrect, autofocus, checked, clearInput, clearOnEdit, debounce, disabled, inputmode, max, maxlength, min, minlength, multiple, name, pattern, placeholder, readonly, required, results, spellcheck, step, size, type, value]); outputs(this, [ionInput, ionStyle, ionBlur, ionFocus, ionInputDidLoad, ionInputDidUnload]); @@ -286,7 +286,7 @@ export class ItemOption { export declare interface ItemOptions extends StencilComponents.IonItemOptions {} @Directive({selector: 'ion-item-options', inputs: [side], outputs: [ionSwipe]}) export class ItemOptions { - @Output() ionSwipe: EventEmitter; + ionSwipe: EventEmitter; constructor(r: ElementRef) { methods(this, r, [isRightSide, width, fireSwipeEvent]); inputs(this, r, [side]); @@ -297,7 +297,7 @@ export class ItemOptions { export declare interface ItemSliding extends StencilComponents.IonItemSliding {} @Directive({selector: 'ion-item-sliding', outputs: [ionDrag]}) export class ItemSliding { - @Output() ionDrag: EventEmitter; + ionDrag: EventEmitter; constructor(r: ElementRef) { methods(this, r, [getOpenAmount, getSlidingRatio, close, closeOpened]); outputs(this, [ionDrag]); @@ -307,7 +307,7 @@ export class ItemSliding { export declare interface Label extends StencilComponents.IonLabel {} @Directive({selector: 'ion-label', inputs: [color, mode, fixed, floating, stacked], outputs: [ionStyle]}) export class Label { - @Output() ionStyle: EventEmitter; + ionStyle: EventEmitter; constructor(r: ElementRef) { methods(this, r, [getText]); inputs(this, r, [color, mode, fixed, floating, stacked]); @@ -334,9 +334,9 @@ export class ListHeader { export declare interface Menu extends StencilComponents.IonMenu {} @Directive({selector: 'ion-menu', inputs: [contentId, menuId, type, disabled, side, swipeEnabled, persistent, maxEdgeStart], outputs: [ionOpen, ionClose, ionMenuChange]}) export class Menu { - @Output() ionOpen: EventEmitter; - @Output() ionClose: EventEmitter; - @Output() ionMenuChange: EventEmitter; + ionOpen: EventEmitter; + ionClose: EventEmitter; + ionMenuChange: EventEmitter; constructor(r: ElementRef) { methods(this, r, [isOpen, open, close, toggle, setOpen, isActive]); inputs(this, r, [contentId, menuId, type, disabled, side, swipeEnabled, persistent, maxEdgeStart]); @@ -363,8 +363,8 @@ export class MenuToggle { export declare interface Nav extends StencilComponents.IonNav {} @Directive({selector: 'ion-nav', inputs: [swipeBackEnabled, animated, delegate, rootParams, root], outputs: [ionNavWillChange, ionNavDidChange]}) export class Nav { - @Output() ionNavWillChange: EventEmitter; - @Output() ionNavDidChange: EventEmitter; + ionNavWillChange: EventEmitter; + ionNavDidChange: EventEmitter; constructor(r: ElementRef) { methods(this, r, [push, insert, insertPages, pop, popTo, popToRoot, removeIndex, setRoot, setPages, setRouteId, getRouteId, canGoBack, getActive, getByIndex, getPrevious, length]); inputs(this, r, [swipeBackEnabled, animated, delegate, rootParams, root]); @@ -404,12 +404,12 @@ export class Note { export declare interface Radio extends StencilComponents.IonRadio {} @Directive({selector: 'ion-radio', inputs: [color, mode, name, disabled, checked, value], outputs: [ionRadioDidLoad, ionRadioDidUnload, ionStyle, ionSelect, ionFocus, ionBlur]}) export class Radio { - @Output() ionRadioDidLoad: EventEmitter; - @Output() ionRadioDidUnload: EventEmitter; - @Output() ionStyle: EventEmitter; - @Output() ionSelect: EventEmitter; - @Output() ionFocus: EventEmitter; - @Output() ionBlur: EventEmitter; + ionRadioDidLoad: EventEmitter; + ionRadioDidUnload: EventEmitter; + ionStyle: EventEmitter; + ionSelect: EventEmitter; + ionFocus: EventEmitter; + ionBlur: EventEmitter; constructor(r: ElementRef) { inputs(this, r, [color, mode, name, disabled, checked, value]); outputs(this, [ionRadioDidLoad, ionRadioDidUnload, ionStyle, ionSelect, ionFocus, ionBlur]); @@ -419,7 +419,7 @@ export class Radio { export declare interface RadioGroup extends StencilComponents.IonRadioGroup {} @Directive({selector: 'ion-radio-group', inputs: [allowEmptySelection, disabled, name, value], outputs: [ionChange]}) export class RadioGroup { - @Output() ionChange: EventEmitter; + ionChange: EventEmitter; constructor(r: ElementRef) { inputs(this, r, [allowEmptySelection, disabled, name, value]); outputs(this, [ionChange]); @@ -429,10 +429,10 @@ export class RadioGroup { export declare interface Range extends StencilComponents.IonRange {} @Directive({selector: 'ion-range', inputs: [color, mode, debounce, disabled, dualKnobs, max, min, pin, snaps, step, value], outputs: [ionChange, ionStyle, ionFocus, ionBlur]}) export class Range { - @Output() ionChange: EventEmitter; - @Output() ionStyle: EventEmitter; - @Output() ionFocus: EventEmitter; - @Output() ionBlur: EventEmitter; + ionChange: EventEmitter; + ionStyle: EventEmitter; + ionFocus: EventEmitter; + ionBlur: EventEmitter; constructor(r: ElementRef) { methods(this, r, [ratio, ratioUpper]); inputs(this, r, [color, mode, debounce, disabled, dualKnobs, max, min, pin, snaps, step, value]); @@ -443,9 +443,9 @@ export class Range { export declare interface Refresher extends StencilComponents.IonRefresher {} @Directive({selector: 'ion-refresher', inputs: [pullMin, pullMax, closeDuration, snapbackDuration, disabled], outputs: [ionRefresh, ionPull, ionStart]}) export class Refresher { - @Output() ionRefresh: EventEmitter; - @Output() ionPull: EventEmitter; - @Output() ionStart: EventEmitter; + ionRefresh: EventEmitter; + ionPull: EventEmitter; + ionStart: EventEmitter; constructor(r: ElementRef) { methods(this, r, [complete, cancel, getProgress]); inputs(this, r, [pullMin, pullMax, closeDuration, snapbackDuration, disabled]); @@ -491,9 +491,9 @@ export class Row { export declare interface Scroll extends StencilComponents.IonScroll {} @Directive({selector: 'ion-scroll', inputs: [mode, forceOverscroll, scrollEvents], outputs: [ionScrollStart, ionScroll, ionScrollEnd]}) export class Scroll { - @Output() ionScrollStart: EventEmitter; - @Output() ionScroll: EventEmitter; - @Output() ionScrollEnd: EventEmitter; + ionScrollStart: EventEmitter; + ionScroll: EventEmitter; + ionScrollEnd: EventEmitter; constructor(r: ElementRef) { methods(this, r, [scrollToTop, scrollToBottom, scrollByPoint, scrollToPoint]); inputs(this, r, [mode, forceOverscroll, scrollEvents]); @@ -504,11 +504,11 @@ export class Scroll { export declare interface Searchbar extends StencilComponents.IonSearchbar {} @Directive({selector: 'ion-searchbar', inputs: [color, mode, animated, autocomplete, autocorrect, cancelButtonText, debounce, placeholder, showCancelButton, spellcheck, type, value], outputs: [ionInput, ionCancel, ionClear, ionBlur, ionFocus]}) export class Searchbar { - @Output() ionInput: EventEmitter; - @Output() ionCancel: EventEmitter; - @Output() ionClear: EventEmitter; - @Output() ionBlur: EventEmitter; - @Output() ionFocus: EventEmitter; + ionInput: EventEmitter; + ionCancel: EventEmitter; + ionClear: EventEmitter; + ionBlur: EventEmitter; + ionFocus: EventEmitter; constructor(r: ElementRef) { inputs(this, r, [color, mode, animated, autocomplete, autocorrect, cancelButtonText, debounce, placeholder, showCancelButton, spellcheck, type, value]); outputs(this, [ionInput, ionCancel, ionClear, ionBlur, ionFocus]); @@ -518,7 +518,7 @@ export class Searchbar { export declare interface Segment extends StencilComponents.IonSegment {} @Directive({selector: 'ion-segment', inputs: [color, mode, disabled, value], outputs: [ionChange]}) export class Segment { - @Output() ionChange: EventEmitter; + ionChange: EventEmitter; constructor(r: ElementRef) { inputs(this, r, [color, mode, disabled, value]); outputs(this, [ionChange]); @@ -528,7 +528,7 @@ export class Segment { export declare interface SegmentButton extends StencilComponents.IonSegmentButton {} @Directive({selector: 'ion-segment-button', inputs: [activated, color, mode, checked, disabled, href, value], outputs: [ionClick]}) export class SegmentButton { - @Output() ionClick: EventEmitter; + ionClick: EventEmitter; constructor(r: ElementRef) { inputs(this, r, [activated, color, mode, checked, disabled, href, value]); outputs(this, [ionClick]); @@ -538,11 +538,11 @@ export class SegmentButton { export declare interface Select extends StencilComponents.IonSelect {} @Directive({selector: 'ion-select', inputs: [disabled, cancelText, okText, placeholder, name, selectedText, multiple, 'interface', interfaceOptions, value], outputs: [ionChange, ionCancel, ionFocus, ionBlur, ionStyle]}) export class Select { - @Output() ionChange: EventEmitter; - @Output() ionCancel: EventEmitter; - @Output() ionFocus: EventEmitter; - @Output() ionBlur: EventEmitter; - @Output() ionStyle: EventEmitter; + ionChange: EventEmitter; + ionCancel: EventEmitter; + ionFocus: EventEmitter; + ionBlur: EventEmitter; + ionStyle: EventEmitter; constructor(r: ElementRef) { inputs(this, r, [disabled, cancelText, okText, placeholder, name, selectedText, multiple, 'interface', interfaceOptions, value]); outputs(this, [ionChange, ionCancel, ionFocus, ionBlur, ionStyle]); @@ -552,8 +552,8 @@ export class Select { export declare interface SelectOption extends StencilComponents.IonSelectOption {} @Directive({selector: 'ion-select-option', inputs: [disabled, selected, value], outputs: [ionSelectOptionDidLoad, ionSelectOptionDidUnload]}) export class SelectOption { - @Output() ionSelectOptionDidLoad: EventEmitter; - @Output() ionSelectOptionDidUnload: EventEmitter; + ionSelectOptionDidLoad: EventEmitter; + ionSelectOptionDidUnload: EventEmitter; constructor(r: ElementRef) { inputs(this, r, [disabled, selected, value]); outputs(this, [ionSelectOptionDidLoad, ionSelectOptionDidUnload]); @@ -592,19 +592,19 @@ export class Slide { export declare interface Slides extends StencilComponents.IonSlides {} @Directive({selector: 'ion-slides', inputs: [options, pager], outputs: [ionSlideWillChange, ionSlideDidChange, ionSlideNextStart, ionSlidePrevStart, ionSlideNextEnd, ionSlidePrevEnd, ionSlideTransitionStart, ionSlideTransitionEnd, ionSlideDrag, ionSlideReachStart, ionSlideReachEnd, ionSlideTouchStart, ionSlideTouchEnd]}) export class Slides { - @Output() ionSlideWillChange: EventEmitter; - @Output() ionSlideDidChange: EventEmitter; - @Output() ionSlideNextStart: EventEmitter; - @Output() ionSlidePrevStart: EventEmitter; - @Output() ionSlideNextEnd: EventEmitter; - @Output() ionSlidePrevEnd: EventEmitter; - @Output() ionSlideTransitionStart: EventEmitter; - @Output() ionSlideTransitionEnd: EventEmitter; - @Output() ionSlideDrag: EventEmitter; - @Output() ionSlideReachStart: EventEmitter; - @Output() ionSlideReachEnd: EventEmitter; - @Output() ionSlideTouchStart: EventEmitter; - @Output() ionSlideTouchEnd: 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; constructor(r: ElementRef) { methods(this, r, [update, slideTo, slideNext, slidePrev, getActiveIndex, getPreviousIndex, length, isEnd, isBeginning, startAutoplay, stopAutoplay, lockSwipeToNext, lockSwipeToPrev, lockSwipes]); inputs(this, r, [options, pager]); @@ -623,8 +623,8 @@ export class Spinner { export declare interface SplitPane extends StencilComponents.IonSplitPane {} @Directive({selector: 'ion-split-pane', inputs: [disabled, when], outputs: [ionChange, ionSplitPaneVisible]}) export class SplitPane { - @Output() ionChange: EventEmitter; - @Output() ionSplitPaneVisible: EventEmitter; + ionChange: EventEmitter; + ionSplitPaneVisible: EventEmitter; constructor(r: ElementRef) { methods(this, r, [isVisible, isPane]); inputs(this, r, [disabled, when]); @@ -635,7 +635,7 @@ export class SplitPane { export declare interface Tab extends StencilComponents.IonTab {} @Directive({selector: 'ion-tab', inputs: [active, btnId, delegate, label, href, icon, badge, badgeStyle, component, name, disabled, selected, show, tabsHideOnSubPages], outputs: [ionSelect]}) export class Tab { - @Output() ionSelect: EventEmitter; + ionSelect: EventEmitter; constructor(r: ElementRef) { methods(this, r, [getTabId, setActive]); inputs(this, r, [active, btnId, delegate, label, href, icon, badge, badgeStyle, component, name, disabled, selected, show, tabsHideOnSubPages]); @@ -646,9 +646,9 @@ export class Tab { export declare interface Tabs extends StencilComponents.IonTabs {} @Directive({selector: 'ion-tabs', inputs: [color, name, tabbarHidden, tabbarLayout, tabbarPlacement, tabbarHighlight, translucent, scrollable, useRouter], outputs: [ionChange, ionNavWillChange, ionNavDidChange]}) export class Tabs { - @Output() ionChange: EventEmitter; - @Output() ionNavWillChange: EventEmitter; - @Output() ionNavDidChange: EventEmitter; + ionChange: EventEmitter; + ionNavWillChange: EventEmitter; + ionNavDidChange: EventEmitter; constructor(r: ElementRef) { methods(this, r, [select, setRouteId, getRouteId, getTab, getSelected]); inputs(this, r, [color, name, tabbarHidden, tabbarLayout, tabbarPlacement, tabbarHighlight, translucent, scrollable, useRouter]); @@ -667,10 +667,10 @@ export class Text { export declare interface Textarea extends StencilComponents.IonTextarea {} @Directive({selector: 'ion-textarea', inputs: [autocapitalize, autocomplete, autofocus, clearOnEdit, debounce, disabled, maxlength, minlength, name, placeholder, readonly, required, spellcheck, cols, rows, wrap, value], outputs: [ionInput, ionStyle, ionBlur, ionFocus]}) export class Textarea { - @Output() ionInput: EventEmitter; - @Output() ionStyle: EventEmitter; - @Output() ionBlur: EventEmitter; - @Output() ionFocus: EventEmitter; + ionInput: EventEmitter; + ionStyle: EventEmitter; + ionBlur: EventEmitter; + ionFocus: EventEmitter; constructor(r: ElementRef) { inputs(this, r, [autocapitalize, autocomplete, autofocus, clearOnEdit, debounce, disabled, maxlength, minlength, name, placeholder, readonly, required, spellcheck, cols, rows, wrap, value]); outputs(this, [ionInput, ionStyle, ionBlur, ionFocus]); @@ -685,10 +685,10 @@ export class Thumbnail { export declare interface Toggle extends StencilComponents.IonToggle {} @Directive({selector: 'ion-toggle', inputs: [color, mode, name, checked, disabled, value], outputs: [ionChange, ionFocus, ionBlur, ionStyle]}) export class Toggle { - @Output() ionChange: EventEmitter; - @Output() ionFocus: EventEmitter; - @Output() ionBlur: EventEmitter; - @Output() ionStyle: EventEmitter; + ionChange: EventEmitter; + ionFocus: EventEmitter; + ionBlur: EventEmitter; + ionStyle: EventEmitter; constructor(r: ElementRef) { inputs(this, r, [color, mode, name, checked, disabled, value]); outputs(this, [ionChange, ionFocus, ionBlur, ionStyle]); diff --git a/angular/src/util/util.ts b/angular/src/util/util.ts index d6dd904db4..a0eecf59e2 100644 --- a/angular/src/util/util.ts +++ b/angular/src/util/util.ts @@ -1,3 +1,14 @@ +import { ElementRef } from '@angular/core'; + +export function inputs(instance: any, el: ElementRef, props: string[]) { + props.forEach(propName => { + Object.defineProperty(instance, propName, { + get: () => el.nativeElement[propName], set: (val: any) => el.nativeElement[propName] = val + }); + }); +} + + export function proxyMethod(ctrlName: string, methodName: string, ...args: any[]) { const controller = ensureElementInBody(ctrlName); return controller.componentOnReady()