From ee106377fccfd72b01333db9decff3a54d92e072 Mon Sep 17 00:00:00 2001 From: Adam Bradley Date: Wed, 20 Jan 2016 11:15:01 -0600 Subject: [PATCH] chore(angular): upgrade to angular 2.0.0-beta.1 Biggest change was that renderer takes and not just . --- gulpfile.js | 2 + ionic/components/action-sheet/action-sheet.ts | 2 +- ionic/components/alert/alert.ts | 9 +-- ionic/components/app/id.ts | 4 +- ionic/components/button/button.ts | 34 ++++++--- ionic/components/checkbox/checkbox.ts | 17 ++--- ionic/components/icon/icon.ts | 10 +-- ionic/components/input/input.ts | 4 +- ionic/components/label/label.ts | 2 +- ionic/components/list/list.ts | 2 +- ionic/components/menu/menu.ts | 4 +- ionic/components/nav/nav-controller.ts | 8 +-- ionic/components/nav/nav.ts | 2 +- ionic/components/nav/view-controller.ts | 6 +- ionic/components/radio/radio.ts | 30 ++++---- ionic/components/segment/segment.ts | 12 +++- ionic/components/select/select.ts | 4 +- ionic/components/tabs/tab.ts | 2 +- ionic/components/tabs/tabs.ts | 19 ++--- ionic/components/text-input/text-input.ts | 69 +++++++++++++------ ionic/components/toggle/toggle.ts | 28 ++++---- 21 files changed, 163 insertions(+), 107 deletions(-) diff --git a/gulpfile.js b/gulpfile.js index feb562790e..89ad502a4a 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -159,6 +159,8 @@ gulp.task('transpile.no-typecheck', function(){ .pipe(gulp.dest('dist')); }); +gulp.task('typecheck', ['transpile.typecheck']); + gulp.task('transpile.typecheck', function(){ var merge = require('merge2'); var stripDebug = require('gulp-strip-debug'); diff --git a/ionic/components/action-sheet/action-sheet.ts b/ionic/components/action-sheet/action-sheet.ts index 07cac4059d..8812877a91 100644 --- a/ionic/components/action-sheet/action-sheet.ts +++ b/ionic/components/action-sheet/action-sheet.ts @@ -175,7 +175,7 @@ class ActionSheetCmp { this.d = params.data; if (this.d.cssClass) { - renderer.setElementClass(elementRef, this.d.cssClass, true); + renderer.setElementClass(elementRef.nativeElement, this.d.cssClass, true); } } diff --git a/ionic/components/alert/alert.ts b/ionic/components/alert/alert.ts index 1ebf9bae36..3b570eb713 100644 --- a/ionic/components/alert/alert.ts +++ b/ionic/components/alert/alert.ts @@ -279,14 +279,12 @@ export class Alert extends ViewController { host: { 'role': 'dialog', '[attr.aria-labelledby]': 'hdrId', - '[attr.aria-describedby]': 'descId', - '[class]': 'cssClass' + '[attr.aria-describedby]': 'descId' }, directives: [NgClass, NgSwitch, NgIf, NgFor] }) class AlertCmp { activeId: string; - cssClass: string; descId: string; d: any; hdrId: string; @@ -304,7 +302,10 @@ class AlertCmp { renderer: Renderer ) { this.d = params.data; - this.cssClass = this.d.cssClass || ''; + + if (this.d.cssClass) { + renderer.setElementClass(elementRef.nativeElement, this.d.cssClass, true); + } this.id = (++alertIds); this.descId = ''; diff --git a/ionic/components/app/id.ts b/ionic/components/app/id.ts index 9f732c7f23..54121f3218 100644 --- a/ionic/components/app/id.ts +++ b/ionic/components/app/id.ts @@ -41,7 +41,7 @@ import {IonicApp} from './app'; }) export class IdRef { private _component: any; - + @Input() id: string; constructor(private _app: IonicApp, elementRef: ElementRef, appViewManager: AppViewManager) { @@ -88,6 +88,6 @@ export class Attr { * @private */ ngOnInit() { - this._renderer.setElementAttribute(this._elementRef, this.attr, ''); + this._renderer.setElementAttribute(this._elementRef.nativeElement, this.attr, ''); } } diff --git a/ionic/components/button/button.ts b/ionic/components/button/button.ts index a239bf34e3..c80f9e3cd5 100644 --- a/ionic/components/button/button.ts +++ b/ionic/components/button/button.ts @@ -57,7 +57,7 @@ export class Button { let element = _elementRef.nativeElement; if (config.get('hoverCSS') === false) { - _renderer.setElementClass(_elementRef, 'disable-hover', true); + _renderer.setElementClass(_elementRef.nativeElement, 'disable-hover', true); } if (element.hasAttribute('ion-item')) { @@ -100,18 +100,21 @@ export class Button { /** * @private */ - addClass(className) { - this._renderer.setElementClass(this._elementRef, className, true); + addClass(className: string) { + this._renderer.setElementClass(this._elementRef.nativeElement, className, true); } /** * @private */ - setRole(val) { + setRole(val: string) { this._role = val; } - _readIcon(element) { + /** + * @private + */ + private _readIcon(element: HTMLElement) { // figure out if and where the icon lives in the button let childNodes = element.childNodes; let childNode; @@ -149,7 +152,10 @@ export class Button { } } - _readAttrs(element) { + /** + * @private + */ + private _readAttrs(element: HTMLElement) { let elementAttrs = element.attributes; let attrName; for (let i = 0, l = elementAttrs.length; i < l; i++) { @@ -175,10 +181,13 @@ export class Button { } } - _assignCss(assignCssClass) { + /** + * @private + */ + private _assignCss(assignCssClass: boolean) { let role = this._role; if (role) { - this._renderer.setElementClass(this._elementRef, role, assignCssClass); // button + this._renderer.setElementClass(this._elementRef.nativeElement, role, assignCssClass); // button this._setClass(this._style, assignCssClass); // button-clear this._setClass(this._shape, assignCssClass); // button-round @@ -193,16 +202,19 @@ export class Button { } } - _setClass(type, assignCssClass) { + /** + * @private + */ + private _setClass(type: string, assignCssClass: boolean) { if (type) { - this._renderer.setElementClass(this._elementRef, this._role + '-' + type, assignCssClass); + this._renderer.setElementClass(this._elementRef.nativeElement, this._role + '-' + type, assignCssClass); } } /** * @private */ - static setRoles(contentButtonChildren, role) { + static setRoles(contentButtonChildren, role: string) { let buttons = contentButtonChildren.toArray(); buttons.forEach(button => { button.setRole(role); diff --git a/ionic/components/checkbox/checkbox.ts b/ionic/components/checkbox/checkbox.ts index a80f54cde9..71c0cb1ac1 100644 --- a/ionic/components/checkbox/checkbox.ts +++ b/ionic/components/checkbox/checkbox.ts @@ -35,14 +35,15 @@ import {Form} from '../../util/form'; '
' + '
' + '
' + - '' + + '' + '' + '' + '' }) export class Checkbox { private _checked: boolean; - private labelId: string; + private _labelId: string; + @Input() value: string = ''; @Input() disabled: boolean = false; @Input() id: string; @@ -66,11 +67,11 @@ export class Checkbox { ngOnInit() { if (!this.id) { this.id = 'chk-' + this._form.nextId(); - this._renderer.setElementAttribute(this._elementRef, 'id', this.id); + this._renderer.setElementAttribute(this._elementRef.nativeElement, 'id', this.id); } - this.labelId = 'lbl-' + this.id; - this._renderer.setElementAttribute(this._elementRef, 'aria-labelledby', this.labelId); + this._labelId = 'lbl-' + this.id; + this._renderer.setElementAttribute(this._elementRef.nativeElement, 'aria-labelledby', this._labelId); } /** @@ -81,14 +82,14 @@ export class Checkbox { this.checked = !this.checked; } - @Input() - get checked() { + @Input() + get checked(): boolean { return !!this._checked; } set checked(val) { this._checked = !!val; - this._renderer.setElementAttribute(this._elementRef, 'aria-checked', this._checked.toString()); + this._renderer.setElementAttribute(this._elementRef.nativeElement, 'aria-checked', this._checked.toString()); this.onChange(this._checked); } diff --git a/ionic/components/icon/icon.ts b/ionic/components/icon/icon.ts index 758b81f0d0..d2d65e837a 100644 --- a/ionic/components/icon/icon.ts +++ b/ionic/components/icon/icon.ts @@ -75,7 +75,7 @@ export class Icon { */ ngOnDestroy() { if (this._css) { - this._renderer.setElementClass(this._elementRef, this._css, false); + this._renderer.setElementClass(this._elementRef.nativeElement, this._css, false); } } @@ -146,12 +146,12 @@ export class Icon { if (this._css !== css) { if (this._css) { - this._renderer.setElementClass(this._elementRef, this._css, false); + this._renderer.setElementClass(this._elementRef.nativeElement, this._css, false); } this._css = css; - this._renderer.setElementClass(this._elementRef, css, true); + this._renderer.setElementClass(this._elementRef.nativeElement, css, true); - this._renderer.setElementAttribute(this._elementRef, 'aria-label', + this._renderer.setElementAttribute(this._elementRef.nativeElement, 'aria-label', css.replace('ion-', '').replace('ios-', '').replace('md-', '').replace('-', ' ')); } } @@ -161,7 +161,7 @@ export class Icon { * @param {string} add class name */ addClass(className: string) { - this._renderer.setElementClass(this._elementRef, className, true); + this._renderer.setElementClass(this._elementRef.nativeElement, className, true); } } diff --git a/ionic/components/input/input.ts b/ionic/components/input/input.ts index 3a81f795e2..43020401f6 100644 --- a/ionic/components/input/input.ts +++ b/ionic/components/input/input.ts @@ -357,7 +357,7 @@ export class ItemInput { * @private */ focusChange(inputHasFocus) { - this._renderer.setElementClass(this._elementRef, 'input-focused', inputHasFocus); + this._renderer.setElementClass(this._elementRef.nativeElement, 'input-focused', inputHasFocus); if (!inputHasFocus) { this.deregMove(); } @@ -375,7 +375,7 @@ export class ItemInput { */ hasValue(inputValue) { let inputHasValue = !!(inputValue && inputValue !== ''); - this._renderer.setElementClass(this._elementRef, 'input-has-value', inputHasValue); + this._renderer.setElementClass(this._elementRef.nativeElement, 'input-has-value', inputHasValue); } /** diff --git a/ionic/components/label/label.ts b/ionic/components/label/label.ts index 26a0acbc45..894e735e21 100644 --- a/ionic/components/label/label.ts +++ b/ionic/components/label/label.ts @@ -54,7 +54,7 @@ export class Label { * @param {string} add class name */ addClass(className: string) { - this._renderer.setElementClass(this._elementRef, className, true); + this._renderer.setElementClass(this._elementRef.nativeElement, className, true); } } diff --git a/ionic/components/list/list.ts b/ionic/components/list/list.ts index cc8ace33d5..49fc718339 100644 --- a/ionic/components/list/list.ts +++ b/ionic/components/list/list.ts @@ -153,7 +153,7 @@ export class ListHeader { public set id(val: string) { this._id = val; - this._renderer.setElementAttribute(this._elementRef, 'id', val); + this._renderer.setElementAttribute(this._elementRef.nativeElement, 'id', val); } } diff --git a/ionic/components/menu/menu.ts b/ionic/components/menu/menu.ts index cb5f57615f..aed3e65fc0 100644 --- a/ionic/components/menu/menu.ts +++ b/ionic/components/menu/menu.ts @@ -151,7 +151,7 @@ export class Menu extends Ion { if (self.side !== 'left' && self.side !== 'right') { self.side = 'left'; } - self._renderer.setElementAttribute(self._elementRef, 'side', self.side); + self._renderer.setElementAttribute(self._elementRef.nativeElement, 'side', self.side); if (self.swipeEnabled === 'false') { self.isSwipeEnabled = false; @@ -209,7 +209,7 @@ export class Menu extends Ion { type = this._config.get('menuType'); } this.type = type; - this._renderer.setElementAttribute(this._elementRef, 'menuType', type); + this._renderer.setElementAttribute(this._elementRef.nativeElement, 'menuType', type); } /** diff --git a/ionic/components/nav/nav-controller.ts b/ionic/components/nav/nav-controller.ts index a63cdbfd9f..2ca22392ab 100644 --- a/ionic/components/nav/nav-controller.ts +++ b/ionic/components/nav/nav-controller.ts @@ -1102,7 +1102,7 @@ export class NavController extends Ion { // class to the nav when it's finished its first transition if (!this._init) { this._init = true; - this._renderer.setElementClass(this.elementRef, 'has-views', true); + this._renderer.setElementClass(this.elementRef.nativeElement, 'has-views', true); } // allow clicks and enable the app again @@ -1178,12 +1178,12 @@ export class NavController extends Ion { // auto-add page css className created from component JS class name let cssClassName = pascalCaseToDashCase(view.componentType['name']); - this._renderer.setElementClass(pageElementRef, cssClassName, true); + this._renderer.setElementClass(pageElementRef.nativeElement, cssClassName, true); view.addDestroy(() => { // ensure the element is cleaned up for when the view pool reuses this element - this._renderer.setElementAttribute(pageElementRef, 'class', null); - this._renderer.setElementAttribute(pageElementRef, 'style', null); + this._renderer.setElementAttribute(pageElementRef.nativeElement, 'class', null); + this._renderer.setElementAttribute(pageElementRef.nativeElement, 'style', null); // remove the page from its container let index = viewContainer.indexOf(hostViewRef); diff --git a/ionic/components/nav/nav.ts b/ionic/components/nav/nav.ts index 2ee0c999c6..23e59fecae 100644 --- a/ionic/components/nav/nav.ts +++ b/ionic/components/nav/nav.ts @@ -101,7 +101,7 @@ import {ViewController} from './view-controller'; */ @Component({ selector: 'ion-nav', - template: '' + template: '
' }) export class Nav extends NavController { @Input() root: Type; diff --git a/ionic/components/nav/view-controller.ts b/ionic/components/nav/view-controller.ts index 8956c3db7a..34062723d3 100644 --- a/ionic/components/nav/view-controller.ts +++ b/ionic/components/nav/view-controller.ts @@ -165,11 +165,11 @@ export class ViewController { this._hdAttr = (shouldShow ? null : ''); - renderer.setElementAttribute(this._pgRef, 'hidden', this._hdAttr); + renderer.setElementAttribute(this._pgRef.nativeElement, 'hidden', this._hdAttr); let navbarRef = this.navbarRef(); if (navbarRef) { - renderer.setElementAttribute(navbarRef, 'hidden', this._hdAttr); + renderer.setElementAttribute(navbarRef.nativeElement, 'hidden', this._hdAttr); } } } @@ -177,7 +177,7 @@ export class ViewController { setZIndex(zIndex: number, renderer: Renderer) { if (this._pgRef && zIndex !== this.zIndex) { this.zIndex = zIndex; - renderer.setElementStyle(this._pgRef, 'z-index', zIndex.toString()); + renderer.setElementStyle(this._pgRef.nativeElement, 'z-index', zIndex.toString()); } } diff --git a/ionic/components/radio/radio.ts b/ionic/components/radio/radio.ts index 402cfbe7f6..24023bf53c 100644 --- a/ionic/components/radio/radio.ts +++ b/ionic/components/radio/radio.ts @@ -44,12 +44,12 @@ import {isDefined} from '../../util/util'; }) export class RadioButton { labelId: any; - + @Input() checked: any = false; @Input() disabled: boolean = false; @Input() id: string; @Input() value: string = ''; - + @Output() select: EventEmitter = new EventEmitter(); constructor( @@ -66,17 +66,17 @@ export class RadioButton { ngOnInit() { if (!this.id) { this.id = 'rb-' + this._form.nextId(); - this._renderer.setElementAttribute(this._elementRef, 'id', this.id); + this._renderer.setElementAttribute(this._elementRef.nativeElement, 'id', this.id); } this.labelId = 'lbl-' + this.id; - this._renderer.setElementAttribute(this._elementRef, 'aria-labelledby', this.labelId); + this._renderer.setElementAttribute(this._elementRef.nativeElement, 'aria-labelledby', this.labelId); let checked = this.checked; if (typeof checked === 'string') { this.checked = (checked === '' || checked === 'true'); } this.isChecked = this.checked; - this._renderer.setElementAttribute(this._elementRef, 'checked', null); + this._renderer.setElementAttribute(this._elementRef.nativeElement, 'checked', null); } /** @@ -89,7 +89,7 @@ export class RadioButton { } public set isChecked(isChecked) { - this._renderer.setElementAttribute(this._elementRef, 'aria-checked', isChecked); + this._renderer.setElementAttribute(this._elementRef.nativeElement, 'aria-checked', isChecked); } /** @@ -155,13 +155,13 @@ export class RadioButton { } }) export class RadioGroup { + id; + value; + @Output() change: EventEmitter = new EventEmitter(); @ContentChildren(RadioButton) private _buttons; @ContentChild(ListHeader) private _header; - id: any; - value: any; - constructor( @Optional() ngControl: NgControl, private _renderer: Renderer, @@ -180,7 +180,7 @@ export class RadioGroup { * the checked value. * https://github.com/angular/angular/blob/master/modules/angular2/src/forms/directives/shared.ts#L34 */ - public writeValue(value) { + writeValue(value) { this.value = isDefined(value) ? value : ''; if (this._buttons) { let buttons = this._buttons.toArray(); @@ -188,7 +188,7 @@ export class RadioGroup { let isChecked = (button.value === this.value); button.isChecked = isChecked; if (isChecked) { - this._renderer.setElementAttribute(this._elementRef, 'aria-activedescendant', button.id); + this._renderer.setElementAttribute(this._elementRef.nativeElement, 'aria-activedescendant', button.id); } } } @@ -215,7 +215,7 @@ export class RadioGroup { * https://github.com/angular/angular/blob/master/modules/angular2/src/forms/directives/shared.ts#L27 * @param {Function} fn the onChange event handler. */ - public registerOnChange(fn) { this.onChange = fn; } + registerOnChange(fn) { this.onChange = fn; } /** * @private @@ -223,7 +223,7 @@ export class RadioGroup { * the onTouched event handler that marks the model (Control) as touched. * @param {Function} fn onTouched event handler. */ - public registerOnTouched(fn) { this.onTouched = fn; } + registerOnTouched(fn) { this.onTouched = fn; } /** * @private @@ -234,7 +234,7 @@ export class RadioGroup { if (!header.id) { header.id = 'rg-hdr-' + this.id; } - this._renderer.setElementAttribute(this._elementRef, 'aria-describedby', header.id); + this._renderer.setElementAttribute(this._elementRef.nativeElement, 'aria-describedby', header.id); } this._buttons.toArray().forEach(button => { @@ -250,7 +250,7 @@ export class RadioGroup { if (isChecked) { this.writeValue(button.value); //this.onChange(button.value); - this._renderer.setElementAttribute(this._elementRef, 'aria-activedescendant', button.id); + this._renderer.setElementAttribute(this._elementRef.nativeElement, 'aria-activedescendant', button.id); } } }); diff --git a/ionic/components/segment/segment.ts b/ionic/components/segment/segment.ts index 20128632a8..e683d245c9 100644 --- a/ionic/components/segment/segment.ts +++ b/ionic/components/segment/segment.ts @@ -69,15 +69,21 @@ export class SegmentButton { this.select.emit(this); } + /** + * @private + */ ngOnInit() { if (!isDefined(this.value)) { console.warn(' requires a "value" attribute'); } } - public set isActive(isActive) { - this._renderer.setElementClass(this._elementRef, 'segment-activated', isActive); - this._renderer.setElementAttribute(this._elementRef, 'aria-pressed', isActive); + /** + * @private + */ + set isActive(isActive) { + this._renderer.setElementClass(this._elementRef.nativeElement, 'segment-activated', isActive); + this._renderer.setElementAttribute(this._elementRef.nativeElement, 'aria-pressed', isActive); } } diff --git a/ionic/components/select/select.ts b/ionic/components/select/select.ts index 73ee70f51a..e43fba9005 100644 --- a/ionic/components/select/select.ts +++ b/ionic/components/select/select.ts @@ -147,11 +147,11 @@ export class Select { ngOnInit() { if (!this.id) { this.id = 'sel-' + this.form.nextId(); - this.renderer.setElementAttribute(this.elementRef, 'id', this.id); + this.renderer.setElementAttribute(this.elementRef.nativeElement, 'id', this.id); } this.labelId = 'lbl-' + this.id; - this.renderer.setElementAttribute(this.elementRef, 'aria-labelledby', this.labelId); + this.renderer.setElementAttribute(this.elementRef.nativeElement, 'aria-labelledby', this.labelId); } /** diff --git a/ionic/components/tabs/tab.ts b/ionic/components/tabs/tab.ts index f6a08d5ea6..8dd0f131ea 100644 --- a/ionic/components/tabs/tab.ts +++ b/ionic/components/tabs/tab.ts @@ -90,7 +90,7 @@ import {TabButton} from './tab-button'; '[attr.aria-labelledby]': '_btnId', 'role': 'tabpanel' }, - template: '' + template: '
' }) export class Tab extends NavController { public isSelected: boolean; diff --git a/ionic/components/tabs/tabs.ts b/ionic/components/tabs/tabs.ts index 9e53c668b1..5e03a74a8d 100644 --- a/ionic/components/tabs/tabs.ts +++ b/ionic/components/tabs/tabs.ts @@ -69,16 +69,16 @@ export class Tabs extends Ion { private _tabs: Array = []; private _onReady = null; private _useHighlight: boolean; - + id: number; navbarContainerRef: ViewContainerRef; subPages: boolean; - + @Input() preloadTabs: any; @Input() tabbarIcons: string; @Input() tabbarPlacement: string; @Output() change: EventEmitter = new EventEmitter(); - + @ViewChild(TabHighlight) private _highlight: TabHighlight; @ViewChildren(TabButton) private _btns; @@ -92,7 +92,7 @@ export class Tabs extends Ion { private _renderer: Renderer ) { super(_elementRef); - + this.id = ++tabIds; this.subPages = _config.getBoolean('tabSubPages'); this._useHighlight = _config.getBoolean('tabbarHighlight'); @@ -125,7 +125,7 @@ export class Tabs extends Ion { this._highlight.select(this.getSelected()); }); } - + this._btns.toArray().forEach((tabButton: TabButton) => { tabButton.select.subscribe((tab: Tab) => { this.select(tab); @@ -133,12 +133,15 @@ export class Tabs extends Ion { }); } - _setConfig(attrKey, fallback) { + /** + * @private + */ + private _setConfig(attrKey, fallback) { var val = this[attrKey]; if (isUndefined(val)) { val = this._config.get(attrKey); } - this._renderer.setElementAttribute(this._elementRef, attrKey, val); + this._renderer.setElementAttribute(this._elementRef.nativeElement, attrKey, val); } /** @@ -248,7 +251,7 @@ export class Tabs extends Ion { * "Touch" the active tab, going back to the root view of the tab * or optionally letting the tab handle the event */ - _touchActive(tab) { + private _touchActive(tab) { let active = tab.getActive(); if (!active) { diff --git a/ionic/components/text-input/text-input.ts b/ionic/components/text-input/text-input.ts index b014269053..899eafe5c2 100644 --- a/ionic/components/text-input/text-input.ts +++ b/ionic/components/text-input/text-input.ts @@ -13,13 +13,15 @@ import {CSS, hasFocus} from '../../util/dom'; } }) export class TextInput { - @Input() value: string; - @Input() ngModel: any; - @Output() valueChange: EventEmitter = new EventEmitter(); - @Output() focusChange: EventEmitter = new EventEmitter(); - public type: string; private _relocated: boolean; + type: string; + + @Input() ngModel; + @Input() value: string; + @Output() focusChange: EventEmitter = new EventEmitter(); + @Output() valueChange: EventEmitter = new EventEmitter(); + constructor( @Attribute('type') type: string, private _elementRef: ElementRef, @@ -28,6 +30,9 @@ export class TextInput { this.type = type || 'text'; } + /** + * @private + */ ngOnInit() { if (this.ngModel) { this.value = this.ngModel; @@ -36,30 +41,45 @@ export class TextInput { } } + /** + * @private + */ @HostListener('keyup', ['$event']) - _keyup(ev) { + private _keyup(ev) { this.valueChange.emit(ev.target.value); } + /** + * @private + */ @HostListener('focus') - _focus() { + private _focus() { this.focusChange.emit(true); } + /** + * @private + */ @HostListener('blur') - _blur() { + private _blur() { this.focusChange.emit(false); this.hideFocus(false); } - labelledBy(val) { - this._renderer.setElementAttribute(this._elementRef, 'aria-labelledby', val); + labelledBy(val: string) { + this._renderer.setElementAttribute(this._elementRef.nativeElement, 'aria-labelledby', val); } + /** + * @private + */ setFocus() { this.element().focus(); } + /** + * @private + */ relocate(shouldRelocate: boolean, inputRelativeY?) { if (this._relocated !== shouldRelocate) { @@ -76,7 +96,7 @@ export class TextInput { } else { focusedInputEle.classList.remove('hide-focused-input'); focusedInputEle.style[CSS.transform] = ''; - let clonedInputEle = focusedInputEle.parentNode.querySelector('.cloned-input'); + let clonedInputEle = focusedInputEle.parentElement.querySelector('.cloned-input'); if (clonedInputEle) { clonedInputEle.parentNode.removeChild(clonedInputEle); } @@ -86,7 +106,10 @@ export class TextInput { } } - hideFocus(shouldHideFocus) { + /** + * @private + */ + hideFocus(shouldHideFocus: boolean) { let focusedInputEle = this.element(); if (shouldHideFocus) { @@ -99,32 +122,38 @@ export class TextInput { } else { focusedInputEle.classList.remove('hide-focused-input'); focusedInputEle.style[CSS.transform] = ''; - let clonedInputEle = focusedInputEle.parentNode.querySelector('.cloned-hidden'); + let clonedInputEle = focusedInputEle.parentElement.querySelector('.cloned-hidden'); if (clonedInputEle) { clonedInputEle.parentNode.removeChild(clonedInputEle); } } } - hasFocus() { + hasFocus(): boolean { return hasFocus(this.element()); } - addClass(className) { - this._renderer.setElementClass(this._elementRef, className, true); + /** + * @private + */ + addClass(className: string) { + this._renderer.setElementClass(this._elementRef.nativeElement, className, true); } - hasClass(className) { - this._elementRef.nativeElement.classList.contains(className); + hasClass(className): boolean { + return this._elementRef.nativeElement.classList.contains(className); } - element() { + /** + * @private + */ + element(): HTMLElement { return this._elementRef.nativeElement; } } -function cloneInput(srcInput, addCssClass) { +function cloneInput(srcInput, addCssClass: string) { let clonedInputEle = srcInput.cloneNode(true); clonedInputEle.classList.add(addCssClass); clonedInputEle.classList.remove('hide-focused-input'); diff --git a/ionic/components/toggle/toggle.ts b/ionic/components/toggle/toggle.ts index 43c2ef21d3..22346a282b 100644 --- a/ionic/components/toggle/toggle.ts +++ b/ionic/components/toggle/toggle.ts @@ -69,17 +69,19 @@ import {pointerCoord} from '../../util/dom'; `` }) export class Toggle { + private _checked: boolean; + private _mode: string; + private _startX; + private _touched: number = 0; + private addMoveListener; + private removeMoveListener; + + public isActivated: boolean; + public labelId: string; + @Input() value: string = ''; @Input() disabled: boolean = false; @Input() id: string; - private _checked: boolean; - private _touched: number = 0; - private _mode: string; - private _startX: any; - private addMoveListener: any; - private removeMoveListener: any; - public labelId: string; - public isActivated: boolean; constructor( private _form: Form, @@ -143,11 +145,11 @@ export class Toggle { ngOnInit() { if (!this.id) { this.id = 'tgl-' + this._form.nextId(); - this._renderer.setElementAttribute(this._elementRef, 'id', this.id); + this._renderer.setElementAttribute(this._elementRef.nativeElement, 'id', this.id); } this.labelId = 'lbl-' + this.id; - this._renderer.setElementAttribute(this._elementRef, 'aria-labelledby', this.labelId); + this._renderer.setElementAttribute(this._elementRef.nativeElement, 'aria-labelledby', this.labelId); } /** @@ -164,14 +166,14 @@ export class Toggle { set checked(val: boolean) { this._checked = !!val; - this._renderer.setElementAttribute(this._elementRef, 'aria-checked', this._checked.toString()); + this._renderer.setElementAttribute(this._elementRef.nativeElement, 'aria-checked', this._checked.toString()); this.onChange(this._checked); } /** * @private */ - pointerDown(ev) { + private pointerDown(ev) { if (/touch/.test(ev.type)) { this._touched = Date.now(); } @@ -189,7 +191,7 @@ export class Toggle { /** * @private */ - pointerUp(ev) { + private pointerUp(ev) { if (this.isDisabled(ev)) return; let endX = pointerCoord(ev).x;