diff --git a/CHANGELOG.md b/CHANGELOG.md index e33a501d05..091d30a898 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,5 @@ - -# 2.0.0-alpha.41 (2015-12-8) + +# 2.0.0-alpha.42 (2015-12-11) ### Breaking Changes @@ -24,17 +24,22 @@ * searchbar: class `focused` has become `searchbar-focused` - ##### `` renamed to `` * `primary` attribute `` now `` * `secondary` attribute `` now `` -##### `` should now be `' + - '' + '' + - '
' + + '
' + '' + '
' + diff --git a/ionic/components/app/app.ts b/ionic/components/app/app.ts index 2c2fdbab73..952de73a14 100644 --- a/ionic/components/app/app.ts +++ b/ionic/components/app/app.ts @@ -1,4 +1,5 @@ -import {Injectable, NgZone, Title} from 'angular2/angular2'; +import {Injectable, NgZone} from 'angular2/core'; +import {Title} from 'angular2/platform/browser'; import {Config} from '../../config/config'; import {ClickBlock} from '../../util/click-block'; @@ -7,6 +8,7 @@ import {ScrollTo} from '../../animations/scroll-to'; /** + * @private * Component registry service. For more information on registering * components see the [IdRef API reference](../id/IdRef/). */ @@ -26,6 +28,7 @@ export class IonicApp { } /** + * @private * Sets the document title. * @param {string} val Value to set the document title to. */ @@ -43,6 +46,7 @@ export class IonicApp { } /** + * @private * Sets if the app is currently enabled or not, meaning if it's * available to accept new user commands. For example, this is set to `false` * while views transition, a modal slides up, an action-sheet @@ -63,6 +67,7 @@ export class IonicApp { } /** + * @private * Boolean if the app is actively enabled or not. * @return {bool} */ @@ -71,6 +76,7 @@ export class IonicApp { } /** + * @private * Register a known component with a key, for easy lookups later. * @param {TODO} id The id to use to register the component * @param {TODO} component The component to register @@ -83,6 +89,7 @@ export class IonicApp { } /** + * @private * Unregister a known component with a key. * @param {TODO} id The id to use to unregister */ @@ -91,6 +98,7 @@ export class IonicApp { } /** + * @private * Get a registered component with the given type (returns the first) * @param {Object} cls the type to search for * @return the matching component, or undefined if none was found @@ -104,6 +112,7 @@ export class IonicApp { } /** + * @private * Get the component for the given key. * @param {TODO} key TODO * @return {TODO} TODO diff --git a/ionic/components/app/id.ts b/ionic/components/app/id.ts index 9e67276f57..f8bda41715 100644 --- a/ionic/components/app/id.ts +++ b/ionic/components/app/id.ts @@ -1,8 +1,10 @@ -import {AppViewManager, ElementRef, Directive, Renderer} from 'angular2/angular2'; +import {AppViewManager, ElementRef, Directive, Renderer} from 'angular2/core'; import {IonicApp} from './app'; /** + * @name Id + * @description * IdRef is an easy way to identify unique components in an app and access them * no matter where in the UI heirarchy you are. For example, this makes toggling * a global side menu feasible from any place in the application. @@ -10,6 +12,7 @@ import {IonicApp} from './app'; * See the [Menu section](http://ionicframework.com/docs/v2/components/#menus) of * the Component docs for an example of how Menus rely on ID's. * + * @usage * To give any component an ID, simply set its `id` property: * ```html * @@ -19,8 +22,13 @@ import {IonicApp} from './app'; * service: * ```ts * constructor(app: IonicApp) { - * var checkbox = app.getComponent("myCheckbox"); - * if (checkbox.checked) console.log('checkbox is checked'); + * this.app = app + * } + * ngAfterViewInit{ + * var checkbox = this.app.getComponent("myCheckbox"); + * if (checkbox.checked) { + * console.log('checkbox is checked'); + * } * } * ``` * @@ -70,12 +78,13 @@ export class IdRef { selector: '[attr]', inputs: ['attr'] }) + export class Attr { constructor(private renderer: Renderer, private elementRef: ElementRef) {} - /** - * @private - */ +/** + * @private + */ ngOnInit() { this.renderer.setElementAttribute(this.elementRef, this.attr, ''); } diff --git a/ionic/components/app/normalize.scss b/ionic/components/app/normalize.scss index 1e2ac8e403..bcc2795f75 100644 --- a/ionic/components/app/normalize.scss +++ b/ionic/components/app/normalize.scss @@ -36,6 +36,7 @@ strong { // Remove border when inside `a` element in IE 8/9/10. img { border: 0; + max-width: 100%; } // Correct overflow not hidden in IE 9/10/11. @@ -126,7 +127,8 @@ button { } // Re-set default cursor for disabled elements. -button[disabled], +a[disabled], +button[disabled] html input[disabled] { cursor: default; } diff --git a/ionic/components/app/test/storage/index.ts b/ionic/components/app/test/storage/index.ts index 1f34536d9c..0c60345a83 100644 --- a/ionic/components/app/test/storage/index.ts +++ b/ionic/components/app/test/storage/index.ts @@ -1,4 +1,5 @@ -import {Component, Control, ControlGroup} from 'angular2/angular2'; +import {Component} from 'angular2/core'; +import {Control, ControlGroup} from 'angular2/common'; import {App, Storage, LocalStorage, SqlStorage} from 'ionic/ionic'; diff --git a/ionic/components/app/test/typography/index.ts b/ionic/components/app/test/typography/index.ts new file mode 100644 index 0000000000..ff6f299c59 --- /dev/null +++ b/ionic/components/app/test/typography/index.ts @@ -0,0 +1,11 @@ +import {App, IonicApp} from 'ionic/ionic'; + + +@App({ + templateUrl: 'main.html' +}) +class E2EApp { + constructor(app: IonicApp) { + app.setTitle('Basic Buttons'); + } +} diff --git a/ionic/components/app/test/typography/main.html b/ionic/components/app/test/typography/main.html new file mode 100644 index 0000000000..ac073f04a1 --- /dev/null +++ b/ionic/components/app/test/typography/main.html @@ -0,0 +1,32 @@ + + + Typography + + + + +

H1: The quick brown fox jumps over the lazy dog

+ +

H2: The quick brown fox jumps over the lazy dog

+ +

H3: The quick brown fox jumps over the lazy dog

+ +

H4: The quick brown fox jumps over the lazy dog

+ +
H5: The quick brown fox jumps over the lazy dog
+ +
H6: The quick brown fox jumps over the lazy dog
+ +

+ p: The quick brown fox jumps over the lazy dog. + The quick brown fox jumps over the lazy dog. + The quick brown fox jumps over the lazy dog. + The quick brown fox jumps over the lazy dog. + The quick brown fox jumps over the lazy dog. + The quick brown fox jumps over the lazy dog. + The quick brown fox jumps over the lazy dog. + The quick brown fox jumps over the lazy dog. + The quick brown fox jumps over the lazy dog. +

+ + diff --git a/ionic/components/app/typography.scss b/ionic/components/app/typography.scss index b6ef131a17..e4843e315d 100644 --- a/ionic/components/app/typography.scss +++ b/ionic/components/app/typography.scss @@ -11,6 +11,13 @@ $font-size-root: 62.5% !default; $headings-font-weight: 500 !default; $headings-line-height: 1.2 !default; +$h1-font-size: 2.6rem !default; +$h2-font-size: 2.4rem !default; +$h3-font-size: 2.2rem !default; +$h4-font-size: 2.0rem !default; +$h5-font-size: 1.8rem !default; +$h6-font-size: 1.6rem !default; + html { font-size: $font-size-root; @@ -42,29 +49,29 @@ h2 + h3 { } h1 { - font-size: 3.6rem; + font-size: $h1-font-size; margin-top: 2rem; } h2 { - font-size: 3rem; + font-size: $h2-font-size; margin-top: 1.8rem; } h3 { - font-size: 2.4rem; + font-size: $h3-font-size; } h4 { - font-size: 2rem; + font-size: $h4-font-size; } h5 { - font-size: 1.6rem; + font-size: $h5-font-size; } h6 { - font-size: 1.4rem; + font-size: $h6-font-size; } small { diff --git a/ionic/components/blur/blur.ts b/ionic/components/blur/blur.ts index 928a62142f..d70e3cccce 100644 --- a/ionic/components/blur/blur.ts +++ b/ionic/components/blur/blur.ts @@ -1,14 +1,23 @@ -import {Directive, Renderer, ElementRef} from 'angular2/angular2'; +import {Directive, Renderer, ElementRef} from 'angular2/core'; /** + * @name Blur + * @description * The blur attribute applies the CSS blur attribute to an element. If the CSS attribute is not supported, * it will fall back to applying a semi-transparent background color to the element. * + * @usage + * ```html + * + * This card will blur the content behind it. + * + * ``` + * * @demo /docs/v2/demos/blur/ */ @Directive({ - selector: '[ion-blur]' + selector: '[blur]' }) export class Blur { constructor(private elementRef: ElementRef, private renderer: Renderer) { diff --git a/ionic/components/button/button.scss b/ionic/components/button/button.scss index 3a30935ded..02297c4072 100644 --- a/ionic/components/button/button.scss +++ b/ionic/components/button/button.scss @@ -35,7 +35,7 @@ a.button { text-decoration: none; } -.button-disabled { +.button[disabled] { opacity: 0.4; cursor: default !important; pointer-events: none; diff --git a/ionic/components/button/button.ts b/ionic/components/button/button.ts index 37adca5541..9c270c49c3 100644 --- a/ionic/components/button/button.ts +++ b/ionic/components/button/button.ts @@ -1,4 +1,4 @@ -import {Directive, ElementRef, Renderer, Attribute, Optional} from 'angular2/angular2'; +import {Directive, ElementRef, Renderer, Attribute, Optional} from 'angular2/core'; import {Config} from '../../config/config'; import {Toolbar} from '../toolbar/toolbar'; @@ -14,6 +14,7 @@ import {Toolbar} from '../toolbar/toolbar'; * @property [full] - for a full width button * @property [small] - sets button size to small * @property [large] - sets button size to large + * @property [disabled] - disables the button * @property [fab] - for a floating action button * @property [fab-left] - position a fab button to the left * @property [fab-right] - position a fab button to the right @@ -43,6 +44,7 @@ export class Button { this._display = null; // block/full this._colors = []; // primary/secondary this._icon = null; // left/right/only + this._disabled = false; // disabled let element = elementRef.nativeElement; @@ -56,14 +58,24 @@ export class Button { return; } + if (element.hasAttribute('disabled')) { + this._disabled = true; + } + this._readAttrs(element); this._readIcon(element); } +/** + * @private + */ ngAfterContentInit() { this._assignCss(true); } +/** + * @private + */ setRole(val) { this._role = val; } @@ -156,6 +168,9 @@ export class Button { } } +/** + * @private + */ static setRoles(contentButtonChildren, role) { let buttons = contentButtonChildren.toArray(); buttons.forEach(button => { diff --git a/ionic/components/button/test/basic/main.html b/ionic/components/button/test/basic/main.html index 28341090bb..634fabca7b 100644 --- a/ionic/components/button/test/basic/main.html +++ b/ionic/components/button/test/basic/main.html @@ -35,4 +35,8 @@

+

+ +

+ diff --git a/ionic/components/card/test/list/main.html b/ionic/components/card/test/list/main.html index 75d7978682..83f89ea809 100644 --- a/ionic/components/card/test/list/main.html +++ b/ionic/components/card/test/list/main.html @@ -11,10 +11,10 @@ Card List - + Wifi - + @@ -44,10 +44,10 @@ Card List Without Lines - + Wifi - + @@ -75,10 +75,10 @@ Card With Items (No List) - + Wifi - + diff --git a/ionic/components/checkbox/checkbox.ts b/ionic/components/checkbox/checkbox.ts index b752798aed..6e99e700d2 100644 --- a/ionic/components/checkbox/checkbox.ts +++ b/ionic/components/checkbox/checkbox.ts @@ -1,4 +1,5 @@ -import {Component, Directive, Optional, NgControl, ElementRef} from 'angular2/angular2'; +import {Component, Directive, Optional, ElementRef} from 'angular2/core'; +import {NgControl} from 'angular2/common'; import {Ion} from '../ion'; import {Form} from '../../util/form'; @@ -10,10 +11,11 @@ import {Form} from '../../util/form'; * * @property [checked] - whether or not the checkbox is checked (defaults to false) * @property [value] - the value of the checkbox component + * @property [disabled] - whether or not the checkbox is disabled or not. * * @usage * ```html - * + * * HTML5 * * ``` @@ -31,6 +33,7 @@ import {Form} from '../../util/form'; host: { 'role': 'checkbox', 'tappable': 'true', + '[attr.id]': 'id', '[attr.tab-index]': 'tabIndex', '[attr.aria-checked]': 'checked', '[attr.aria-disabled]': 'disabled', @@ -51,7 +54,7 @@ import {Form} from '../../util/form'; export class Checkbox { constructor( - form: Form, + private form: Form, @Optional() ngControl: NgControl, elementRef: ElementRef ) { @@ -66,8 +69,15 @@ export class Checkbox { if (ngControl) ngControl.valueAccessor = this; } + /** + * @private + */ ngOnInit() { - this.labelId = 'label-' + this.inputId; + if (!this.id) { + this.id = 'chk-' + this.form.nextId(); + } + + this.labelId = 'lbl-' + this.id; } /** diff --git a/ionic/components/checkbox/test/basic/e2e.ts b/ionic/components/checkbox/test/basic/e2e.ts index 38ebef5a81..713c06fa10 100644 --- a/ionic/components/checkbox/test/basic/e2e.ts +++ b/ionic/components/checkbox/test/basic/e2e.ts @@ -1,6 +1,6 @@ it('should check apple, enable/check grape, submit form', function() { - element(by.css('[ng-control=appleCtrl] .checkbox-media')).click(); + element(by.css('[ngControl=appleCtrl] .checkbox-media')).click(); element(by.css('.e2eGrapeDisabled')).click(); element(by.css('.e2eGrapeChecked')).click(); element(by.css('.e2eSubmit')).click(); diff --git a/ionic/components/checkbox/test/basic/index.ts b/ionic/components/checkbox/test/basic/index.ts index 49e605090c..751eba08ea 100644 --- a/ionic/components/checkbox/test/basic/index.ts +++ b/ionic/components/checkbox/test/basic/index.ts @@ -9,7 +9,8 @@ import { NgControlName, NgFormModel, FormBuilder -} from 'angular2/angular2'; +} from 'angular2/common'; + @App({ templateUrl: 'main.html' diff --git a/ionic/components/checkbox/test/basic/main.html b/ionic/components/checkbox/test/basic/main.html index 775e4af06a..570ee0c08e 100644 --- a/ionic/components/checkbox/test/basic/main.html +++ b/ionic/components/checkbox/test/basic/main.html @@ -4,23 +4,23 @@ -
+ - + Apple, value=apple, init checked - + Banana, init no checked/value attributes - + Cherry, value=cherry, init disabled - + Grape, value=grape, init checked, disabled diff --git a/ionic/components/content/content.ts b/ionic/components/content/content.ts index 4f3cc7c4bb..3c866fac26 100644 --- a/ionic/components/content/content.ts +++ b/ionic/components/content/content.ts @@ -1,4 +1,4 @@ -import {Component, ElementRef, Optional, NgZone} from 'angular2/angular2'; +import {Component, ElementRef, Optional, NgZone} from 'angular2/core'; import {Ion} from '../ion'; import {Config} from '../../config/config'; @@ -9,6 +9,8 @@ import {Animation} from '../../animations/animation'; import {ScrollTo} from '../../animations/scroll-to'; /** + * @name Content + * @description * The Content component provides an easy to use content area that can be configured to use Ionic's custom Scroll View, or the built in overflow scrolling of the browser. * * While we recommend using the custom Scroll features in Ionic in most cases, sometimes (for performance reasons) only the browser's native overflow scrolling will suffice, and so we've made it easy to toggle between the Ionic scroll implementation and overflow scrolling. @@ -17,7 +19,7 @@ import {ScrollTo} from '../../animations/scroll-to'; * * @usage * ```html - * + * * Add your content here! * * ``` @@ -56,7 +58,27 @@ export class Content extends Ion { /** * Adds the specified scroll handler to the content' scroll element. - * @param {Function} handler The scroll event handler. + * + * ```ts + * @Page({ + * template: `` + * )} + * export class MyPage{ + * constructor(app: IonicApp){ + * this.app = app; + * } + * // Need to wait until the component has been initialized + * ngAfterViewInit() { + * // Here 'my-content' is the ID of my ion-content + * this.content = this.app.getComponent('my-content'); + * this.content.addScrollEventListener(this.myScroll); + * } + * myScroll() { + * console.info('They see me scrolling...'); + * } + * } + * ``` + * @param {Function} handler The method you want perform when scrolling * @returns {Function} A function that removes the scroll handler. */ addScrollEventListener(handler) { @@ -104,7 +126,27 @@ export class Content extends Ion { /** * Adds the specified touchmove handler to the content's scroll element. - * @param {Function} handler The touchmove handler. + * + * ```ts + * @Page({ + * template: `` + * )} + * export class MyPage{ + * constructor(app: IonicApp){ + * this.app = app; + * } + * // Need to wait until the component has been initialized + * ngAfterViewInit() { + * // Here 'my-content' is the ID of my ion-content + * this.content = this.app.getComponent('my-content'); + * this.content.addTouchMoveListener(this.touchHandler); + * } + * touchHandler() { + * console.log("I'm touching all the magazines!!"); + * } + * } + * ``` + * @param {Function} handler The method you want to perform when touchmove is firing * @returns {Function} A function that removes the touchmove handler. */ addTouchMoveListener(handler) { @@ -122,11 +164,32 @@ export class Content extends Ion { /** * Scroll to the specified position. - * @param {TODO} x The x-value to scroll to. - * @param {TODO} y The y-value to scroll to. - * @param {Number} duration Duration of the scroll animation. + * + * ```ts + * @Page({ + * template: ` + * + * ` + * )} + * export class MyPage{ + * constructor(app: IonicApp){ + * this.app = app; + * } + * // Need to wait until the component has been initialized + * ngAfterViewInit() { + * // Here 'my-content' is the ID of my ion-content + * this.content = this.app.getComponent('my-content'); + * } + * scrollTo() { + * this.content.scrollTo(0, 500, 200); + * } + * } + * ``` + * @param {Number} x The x-value to scroll to. + * @param {Number} y The y-value to scroll to. + * @param {Number} duration Duration of the scroll animation in ms. * @param {TODO} tolerance TODO - * @returns {TODO} TODO + * @returns {Promise} Returns a promise when done */ scrollTo(x, y, duration, tolerance) { if (this._scrollTo) { @@ -138,6 +201,31 @@ export class Content extends Ion { return this._scrollTo.start(x, y, duration, tolerance); } + /** + * Scroll to the specified position. + * + * ```ts + * @Page({ + * template: ` + * + * ` + * )} + * export class MyPage{ + * constructor(app: IonicApp){ + * this.app = app; + * } + * // Need to wait until the component has been initialized + * ngAfterViewInit() { + * // Here 'my-content' is the ID of my ion-content + * this.content = this.app.getComponent('my-content'); + * } + * scrollTop() { + * this.content.scrollTop(); + * } + * } + * ``` + * @returns {Promise} Returns a promise when done + */ scrollToTop() { if (this._scrollTo) { this._scrollTo.dispose(); diff --git a/ionic/components/icon/icon.ts b/ionic/components/icon/icon.ts index 44543c5c3b..d1f1a4abde 100644 --- a/ionic/components/icon/icon.ts +++ b/ionic/components/icon/icon.ts @@ -1,4 +1,4 @@ -import {Directive, ElementRef, Attribute, Renderer} from 'angular2/angular2'; +import {Directive, ElementRef, Attribute, Renderer} from 'angular2/core'; import {Config} from '../../config/config'; @@ -7,9 +7,18 @@ import {Config} from '../../config/config'; * @name Icon * @description * Icons can be used on their own, or inside of a number of Ionic components. For a full list of available icons, - * check out the [Ionicons resource docs](../../../../../resources/ionicons). + * check out the [Ionicons resource docs](../../../../resources/ionicons). * - * @property {boolean} [is-active] - Whether or not the icon is active. Icons that are not active will use an outlined version of the icon. + * @usage + * ```html + * + * + * + * + * + * ``` + * + * @property {boolean} [isActive] - Whether or not the icon is active. Icons that are not active will use an outlined version of the icon. * If there is not an outlined version for the particular icon, it will use the default (full) version. * @property {string} [ios] - Explicitly set the icon to use on iOS. * @property {string} [md] - Explicitly set the icon to use on Android. @@ -55,7 +64,7 @@ export class Icon { // looping through native dom attributes, eww // https://github.com/angular/angular/issues/1818 for (let i = 0, l = ele.attributes.length; i < l; i++) { - if (ele.attributes[i].value === '' && /_|item-|is-active|large|small|class/.test(ele.attributes[i].name) !== true) { + if (ele.attributes[i].value === '' && /_|item-|isActive|large|small|class/.test(ele.attributes[i].name) !== true) { this.name = ele.attributes[i].name; break; } diff --git a/ionic/components/icon/test/basic/main.html b/ionic/components/icon/test/basic/main.html index d674a97f18..370c8cf947 100644 --- a/ionic/components/icon/test/basic/main.html +++ b/ionic/components/icon/test/basic/main.html @@ -15,16 +15,16 @@ - + - <icon home is-active="true"></icon> + <icon home isActive="true"></icon> - + - <icon home is-active="false"></icon> + <icon home isActive="false"></icon> @@ -57,9 +57,9 @@ - + - <icon [is-active]="isActive" ios="ion-social-apple" md="ion-social-android"></icon> + <icon [isActive]="isActive" ios="ion-social-apple" md="ion-social-android"></icon> diff --git a/ionic/components/ion.ts b/ionic/components/ion.ts index fc67620d11..a92669b75b 100644 --- a/ionic/components/ion.ts +++ b/ionic/components/ion.ts @@ -1,6 +1,7 @@ +import {ElementRef} from 'angular2/core'; import {Config} from '../config/config'; -import {isArray} from 'ionic/util'; -import * as dom from 'ionic/util/dom'; +import {isArray} from '../util'; +import * as dom from '../util/dom'; /** diff --git a/ionic/components/item/item-sliding-gesture.ts b/ionic/components/item/item-sliding-gesture.ts index 06abc5aefa..502038fe0c 100644 --- a/ionic/components/item/item-sliding-gesture.ts +++ b/ionic/components/item/item-sliding-gesture.ts @@ -1,8 +1,8 @@ -import {Hammer} from 'ionic/gestures/hammer'; -import {DragGesture} from 'ionic/gestures/drag-gesture'; +import {Hammer} from '../../gestures/hammer'; +import {DragGesture} from '../../gestures/drag-gesture'; import {List} from '../list/list'; -import {CSS, raf, closest} from 'ionic/util/dom'; +import {CSS, raf, closest} from '../../util/dom'; export class ItemSlidingGesture extends DragGesture { diff --git a/ionic/components/item/item-sliding.ts b/ionic/components/item/item-sliding.ts index 66d294d1df..ecdf8cd837 100644 --- a/ionic/components/item/item-sliding.ts +++ b/ionic/components/item/item-sliding.ts @@ -1,17 +1,18 @@ -import {Component, ElementRef, Optional} from 'angular2/angular2'; +import {Component, ElementRef, Optional} from 'angular2/core'; import {List} from '../list/list'; /** + * @name ItemSliding + * * @description - * Creates a list-item that can easily be swiped, - * deleted, reordered, edited, and more. + * Creates a list-item that can easily be swiped, deleted, reordered, edited, and more. * * @usage * ```html * - * + * * * {{item.title}} * diff --git a/ionic/components/item/item.scss b/ionic/components/item/item.scss index 4a77ca8f68..9e97a098f4 100644 --- a/ionic/components/item/item.scss +++ b/ionic/components/item/item.scss @@ -88,5 +88,12 @@ ion-item-content + ion-item-content[cnt] { display: none; } +@each $color-name, $color-value in $colors { + ion-item-divider[#{$color-name}] { + background-color: $color-value; + color: inverse($color-value); + } +} + @import "item-media"; @import "item-sliding"; diff --git a/ionic/components/item/item.ts b/ionic/components/item/item.ts index d89d9e181d..b7bf7f32b9 100644 --- a/ionic/components/item/item.ts +++ b/ionic/components/item/item.ts @@ -1,7 +1,9 @@ -import {Component} from 'angular2/angular2'; +import {Component} from 'angular2/core'; /** + * @name Item + * @description * Creates a list-item that can easily be swiped, deleted, reordered, edited, and more. * * There are three common ways to use an item: diff --git a/ionic/components/item/test/dividers/main.html b/ionic/components/item/test/dividers/main.html index 597d066165..487ccfc9fa 100644 --- a/ionic/components/item/test/dividers/main.html +++ b/ionic/components/item/test/dividers/main.html @@ -1,59 +1,76 @@ Item Divider + + + Plain Ol' div with some text + - - Plain Ol' div with some text - + + Single line text that should have ellipses when it doesn't all fit in the item + + - - Single line text that should have ellipses when it doesn't all fit in the item - + + + Item Divider + - - Item Divider - + + Multiline text that should wrap when it is too long + to fit on one line in the item. Attribute on .item + + - - Multiline text that should wrap when it is too long - to fit on one line in the item. Attribute on .item - + + Dark - -

H1 Title Text

-

Paragraph line 1

- + +

H1 Title Text

+

Paragraph line 1

+ - -

H2 Title Text

-

Paragraph line 1

- + +

H2 Title Text

+

Paragraph line 1

+ + - + + Light - -

H3 Title Text

-

Paragraph line 1

-

Paragraph line 2

- + +

H3 Title Text

+

Paragraph line 1

+

Paragraph line 2

+ + - -

H4 Title Text

-

Paragraph line 1

-

Paragraph line 2

-

Paragraph line 3

- + + Primary - - - Column 1 - - - Column 2 - - - Column 3 - - + +

H4 Title Text

+

Paragraph line 1

+

Paragraph line 2

+

Paragraph line 3

+ + + + + Secondary + + + + Column 1 + + + Column 2 + + + Column 3 + + + diff --git a/ionic/components/item/test/groups/session-list.html b/ionic/components/item/test/groups/session-list.html index f32ba3a922..c565ca8bf1 100644 --- a/ionic/components/item/test/groups/session-list.html +++ b/ionic/components/item/test/groups/session-list.html @@ -8,13 +8,13 @@ - + {{timeSlot.time}} - + - @@ -32,11 +32,11 @@ - - diff --git a/ionic/components/menu/test/basic/page1.html b/ionic/components/menu/test/basic/page1.html index f8f5b40f8a..4f83c16b60 100644 --- a/ionic/components/menu/test/basic/page1.html +++ b/ionic/components/menu/test/basic/page1.html @@ -1,7 +1,7 @@ - @@ -21,7 +21,7 @@ - @@ -33,11 +33,11 @@

Page 1

- +

- +

diff --git a/ionic/components/menu/test/basic/page2.html b/ionic/components/menu/test/basic/page2.html index 66415e066b..95d2059180 100644 --- a/ionic/components/menu/test/basic/page2.html +++ b/ionic/components/menu/test/basic/page2.html @@ -1,7 +1,7 @@ - @@ -16,7 +16,7 @@

Page 2

- +

diff --git a/ionic/components/menu/test/basic/page3.html b/ionic/components/menu/test/basic/page3.html index cfcda473c2..d243f7b761 100644 --- a/ionic/components/menu/test/basic/page3.html +++ b/ionic/components/menu/test/basic/page3.html @@ -5,7 +5,7 @@ Menu - @@ -17,7 +17,7 @@

Page 3

- +

diff --git a/ionic/components/menu/test/multiple/main.html b/ionic/components/menu/test/multiple/main.html index 07beb0315e..60cc884048 100644 --- a/ionic/components/menu/test/multiple/main.html +++ b/ionic/components/menu/test/multiple/main.html @@ -7,7 +7,7 @@ - @@ -24,7 +24,7 @@ - diff --git a/ionic/components/menu/test/multiple/page1.html b/ionic/components/menu/test/multiple/page1.html index d6cb252a13..c81521a0af 100644 --- a/ionic/components/menu/test/multiple/page1.html +++ b/ionic/components/menu/test/multiple/page1.html @@ -1,6 +1,6 @@ - @@ -22,7 +22,7 @@

- +

This page has two left menus, but only one is active at a time.

diff --git a/ionic/components/menu/test/overlay/main.html b/ionic/components/menu/test/overlay/main.html index c63832c9dd..5c25565b6b 100644 --- a/ionic/components/menu/test/overlay/main.html +++ b/ionic/components/menu/test/overlay/main.html @@ -8,7 +8,7 @@ - @@ -18,24 +18,4 @@ - - - diff --git a/ionic/components/menu/test/overlay/page1.html b/ionic/components/menu/test/overlay/page1.html index 99eb7dacf7..e2970ea621 100644 --- a/ionic/components/menu/test/overlay/page1.html +++ b/ionic/components/menu/test/overlay/page1.html @@ -1,7 +1,7 @@ - @@ -17,11 +17,11 @@

Content

- +

- +

diff --git a/ionic/components/menu/test/push/main.html b/ionic/components/menu/test/push/main.html index 9cfcdf9387..82f96ae76e 100644 --- a/ionic/components/menu/test/push/main.html +++ b/ionic/components/menu/test/push/main.html @@ -8,7 +8,7 @@ - @@ -18,24 +18,4 @@ - - - diff --git a/ionic/components/menu/test/push/page1.html b/ionic/components/menu/test/push/page1.html index cbac02c561..7ffd124cb4 100644 --- a/ionic/components/menu/test/push/page1.html +++ b/ionic/components/menu/test/push/page1.html @@ -1,7 +1,7 @@ - @@ -17,11 +17,11 @@

Content

- +

- +

diff --git a/ionic/components/menu/test/reveal/main.html b/ionic/components/menu/test/reveal/main.html index 3d90be8de0..bb6faf5e81 100644 --- a/ionic/components/menu/test/reveal/main.html +++ b/ionic/components/menu/test/reveal/main.html @@ -8,7 +8,7 @@ - @@ -18,24 +18,4 @@ - - - diff --git a/ionic/components/menu/test/reveal/page1.html b/ionic/components/menu/test/reveal/page1.html index fb6bab465a..547a5035ca 100644 --- a/ionic/components/menu/test/reveal/page1.html +++ b/ionic/components/menu/test/reveal/page1.html @@ -1,7 +1,7 @@ - @@ -17,11 +17,11 @@

Content

- +

- +

diff --git a/ionic/components/modal/modal.ts b/ionic/components/modal/modal.ts index 83f611447f..dc527d3902 100644 --- a/ionic/components/modal/modal.ts +++ b/ionic/components/modal/modal.ts @@ -1,9 +1,9 @@ -import {Injectable} from 'angular2/angular2'; +import {Injectable, Type} from 'angular2/core'; import {OverlayController} from '../overlay/overlay-controller'; import {Config} from '../../config/config'; import {Animation} from '../../animations/animation'; -import {extend} from 'ionic/util'; +import {extend} from '../../util'; /** * The Modal is a content pane that can go over the user's current page. diff --git a/ionic/components/modal/test/basic/index.ts b/ionic/components/modal/test/basic/index.ts index 820832e1eb..0fdab060a2 100644 --- a/ionic/components/modal/test/basic/index.ts +++ b/ionic/components/modal/test/basic/index.ts @@ -174,7 +174,7 @@ class ModalFirstPage { push() { let page = ModalSecondPage; let params = { id: 8675309, myData: [1,2,3,4] }; - let opts = { animation: 'ios' }; + let opts = { animation: 'ios-transition' }; this.nav.push(page, params, opts); } diff --git a/ionic/components/nav/nav-controller.ts b/ionic/components/nav/nav-controller.ts index 6081d33e8e..11cdd621b5 100644 --- a/ionic/components/nav/nav-controller.ts +++ b/ionic/components/nav/nav-controller.ts @@ -1,5 +1,5 @@ -import {ChangeDetectorRef, Compiler, ElementRef, Injector, provide, NgZone, AppViewManager, Renderer} from 'angular2/angular2'; -import {wtfLeave, wtfCreateScope, WtfScopeFn, wtfStartTimeRange, wtfEndTimeRange} from 'angular2/angular2'; +import {ChangeDetectorRef, Compiler, ElementRef, Injector, provide, NgZone, AppViewManager, Renderer} from 'angular2/core'; +import {wtfLeave, wtfCreateScope, WtfScopeFn, wtfStartTimeRange, wtfEndTimeRange} from 'angular2/instrumentation'; import {Ion} from '../ion'; import {IonicApp} from '../app/app'; @@ -56,7 +56,7 @@ import {raf, rafFrames} from '../../util/dom'; * *

Page creation

* _For more information on the `@Page` decorator see the [@Page API - * reference](../../../config/Page/)._ + * reference](../../../config/decorators/Page/)._ * * Pages are created when they are added to the navigation stack. For methods * like [push()](#push), the NavController takes any component class that is @@ -232,7 +232,9 @@ export class NavController extends Ion { */ push(componentType, params = {}, opts = {}, callback) { if (!componentType) { - return Promise.reject('invalid componentType to push'); + let errMsg = 'invalid componentType to push'; + console.error(errMsg) + return Promise.reject(errMsg); } if (typeof componentType !== 'function') { @@ -849,6 +851,7 @@ export class NavController extends Ion { if (this.keyboard.isOpen()) { // the keyboard is still open! // no problem, let's just close for them + this.keyboard.close(); this.keyboard.onClose(() => { // keyboard has finished closing, transition complete this._transComplete(); diff --git a/ionic/components/nav/nav-push.ts b/ionic/components/nav/nav-push.ts index 0a1cbaeef9..d295064c9c 100644 --- a/ionic/components/nav/nav-push.ts +++ b/ionic/components/nav/nav-push.ts @@ -1,4 +1,4 @@ -import {Directive, Optional} from 'angular2/angular2'; +import {Directive, Optional} from 'angular2/core'; import {NavController} from './nav-controller'; import {NavRegistry} from './nav-registry'; @@ -8,11 +8,11 @@ import {NavRegistry} from './nav-registry'; * * Basic usage: * ```html - * + * * ``` * To specify parameters you can use array syntax or the `nav-params` property: * ```html - * + * * ``` * Where `pushPage` and `params` are specified in your component, and `pushPage` * contains a reference to a [@Page component](../../../config/Page/): @@ -20,7 +20,7 @@ import {NavRegistry} from './nav-registry'; * ```ts * import {LoginPage} from 'login'; * @Page({ - * template: `` + * template: `` * }) * class MyPage { * constructor(){ @@ -34,14 +34,14 @@ import {NavRegistry} from './nav-registry'; * You can also use syntax similar to Angular2's router, passing an array to * NavPush: * ```html - * + * * ``` * @demo /docs/v2/demos/nav-push-pop/ * @see {@link /docs/v2/components#navigation Navigation Component Docs} * @see {@link ../NavPop NavPop API Docs} */ @Directive({ - selector: '[nav-push]', + selector: '[navPush]', inputs: [ 'instruction: navPush', 'params: navParams' @@ -69,7 +69,7 @@ export class NavPush { if (this.instruction instanceof Array) { if (this.instruction.length > 2) { - throw 'Too many [nav-push] arguments, expects [View, { params }]' + throw 'Too many [navPush] arguments, expects [View, { params }]' } destination = this.instruction[0]; params = this.instruction[1] || this.params; diff --git a/ionic/components/nav/nav-router.ts b/ionic/components/nav/nav-router.ts index a7c17beac1..72f1382792 100644 --- a/ionic/components/nav/nav-router.ts +++ b/ionic/components/nav/nav-router.ts @@ -1,4 +1,4 @@ -import {Directive, ElementRef, DynamicComponentLoader, Attribute} from 'angular2/angular2'; +import {Directive, ElementRef, DynamicComponentLoader, Attribute} from 'angular2/core'; import { RouterOutlet, Router, diff --git a/ionic/components/nav/nav.ts b/ionic/components/nav/nav.ts index 94ae9a877d..51a4996435 100644 --- a/ionic/components/nav/nav.ts +++ b/ionic/components/nav/nav.ts @@ -1,4 +1,4 @@ -import {ChangeDetectorRef, Component, Directive, ElementRef, Host, Optional, forwardRef, Inject, NgZone, Compiler, AppViewManager, Renderer, ViewContainerRef} from 'angular2/angular2'; +import {ChangeDetectorRef, Component, Directive, ElementRef, Host, Optional, forwardRef, Inject, NgZone, Compiler, AppViewManager, Renderer, ViewContainerRef} from 'angular2/core'; import {IonicApp} from '../app/app'; import {Config} from '../../config/config'; @@ -103,9 +103,9 @@ import {ViewController} from './view-controller'; inputs: [ 'root' ], - defaultInputs: { - 'swipeBackEnabled': true - }, + // defaultInputs: { + // 'swipeBackEnabled': true + // }, template: '' }) export class Nav extends NavController { diff --git a/ionic/components/nav/swipe-back.ts b/ionic/components/nav/swipe-back.ts index 96b59168cd..3f1b29c15b 100644 --- a/ionic/components/nav/swipe-back.ts +++ b/ionic/components/nav/swipe-back.ts @@ -1,4 +1,4 @@ -import {SlideEdgeGesture} from 'ionic/gestures/slide-edge-gesture'; +import {SlideEdgeGesture} from '../../gestures/slide-edge-gesture'; export class SwipeBackGesture extends SlideEdgeGesture { diff --git a/ionic/components/nav/test/basic/index.ts b/ionic/components/nav/test/basic/index.ts index 4352bc6bc0..16410a095a 100644 --- a/ionic/components/nav/test/basic/index.ts +++ b/ionic/components/nav/test/basic/index.ts @@ -1,4 +1,4 @@ -import {Component} from 'angular2/angular2'; +import {Component} from 'angular2/core'; import {App, NavController} from 'ionic/ionic'; import {Page, Config, IonicApp} from 'ionic/ionic'; import {NavParams, NavController, ViewController, IONIC_DIRECTIVES} from 'ionic/ionic'; @@ -32,16 +32,22 @@ class MyCmpTest{} - - - - + + + Text Input + + + + + + + - + `, @@ -195,18 +201,26 @@ class PrimaryHeaderPage { @Page({ template: ` - + Another Page Header - -

Back button hidden w/ ion-navbar hide-back-button

-

-

-

-

-

-

-

+ + + + + Text Input + + + + Back button hidden w/ ion-navbar hideBackButton + + + + + + + + ` }) diff --git a/ionic/components/nav/test/nested/index.ts b/ionic/components/nav/test/nested/index.ts index 935897f4b2..2a0fdc885e 100644 --- a/ionic/components/nav/test/nested/index.ts +++ b/ionic/components/nav/test/nested/index.ts @@ -75,7 +75,7 @@ export class Account { @Page({ template: ` - Account Dashboard @@ -106,7 +106,7 @@ export class Dashboard { @Page({ template: ` - Account Profile diff --git a/ionic/components/nav/test/routing/view1.html b/ionic/components/nav/test/routing/view1.html index 39789c8de6..f6f36fec09 100644 --- a/ionic/components/nav/test/routing/view1.html +++ b/ionic/components/nav/test/routing/view1.html @@ -1,6 +1,6 @@ - First View diff --git a/ionic/components/navbar/navbar.ts b/ionic/components/navbar/navbar.ts index 9bf016529b..0566266e9f 100644 --- a/ionic/components/navbar/navbar.ts +++ b/ionic/components/navbar/navbar.ts @@ -1,4 +1,4 @@ -import {Component, Directive, Optional, ElementRef, Renderer, TemplateRef, forwardRef, Inject, ViewContainerRef} from 'angular2/angular2'; +import {Component, Directive, Optional, ElementRef, Renderer, TemplateRef, forwardRef, Inject, ViewContainerRef} from 'angular2/core'; import {Ion} from '../ion'; import {Icon} from '../icon/icon'; @@ -74,7 +74,7 @@ class ToolbarBackground { '{{bbText}}' + '' + '' + - '' + + '' + '' + '' + '
' + diff --git a/ionic/components/overlay/overlay-controller.ts b/ionic/components/overlay/overlay-controller.ts index dc8289efd5..4435381af8 100644 --- a/ionic/components/overlay/overlay-controller.ts +++ b/ionic/components/overlay/overlay-controller.ts @@ -1,5 +1,5 @@ import {Animation} from '../../animations/animation'; -import {extend} from 'ionic/util'; +import {extend} from '../../util'; /** @@ -43,7 +43,9 @@ export class OverlayController { } else { reject(); } - }) + }, rejectReason => { + console.error(rejectReason); + }); return promise; } diff --git a/ionic/components/overlay/overlay.ts b/ionic/components/overlay/overlay.ts index bb708d182f..f21f461fd4 100644 --- a/ionic/components/overlay/overlay.ts +++ b/ionic/components/overlay/overlay.ts @@ -1,4 +1,4 @@ -import {ChangeDetectorRef, Component, ElementRef, Compiler, AppViewManager, NgZone, Renderer} from 'angular2/angular2'; +import {ChangeDetectorRef, Component, ElementRef, Compiler, AppViewManager, NgZone, Renderer} from 'angular2/core'; import {IonicApp} from '../app/app'; import {Config} from '../../config/config'; diff --git a/ionic/components/popup/popup.ts b/ionic/components/popup/popup.ts index f2cd107d60..18445fcdf2 100644 --- a/ionic/components/popup/popup.ts +++ b/ionic/components/popup/popup.ts @@ -1,5 +1,5 @@ -import {FORM_DIRECTIVES, NgControl, NgControlGroup, - Component, ElementRef, Injectable, NgClass, NgIf, NgFor, Renderer} from 'angular2/angular2'; +import {Component, ElementRef, Injectable, Renderer} from 'angular2/core'; +import {NgClass, NgIf, NgFor, FORM_DIRECTIVES} from 'angular2/common'; import {OverlayController} from '../overlay/overlay-controller'; import {Config} from '../../config/config'; @@ -274,15 +274,15 @@ const OVERLAY_TYPE = 'popup'; '
' + '
' + '
' + - '

' + - '

' + + '

' + + '

' + '
' + '
' + - '
' + - '' + + '
' + + '' + '
' + - '
' + - '' + + '
' + + '' + '
' + '
', host: { diff --git a/ionic/components/radio/radio.ts b/ionic/components/radio/radio.ts index 458371924d..58c29c1ab2 100644 --- a/ionic/components/radio/radio.ts +++ b/ionic/components/radio/radio.ts @@ -1,8 +1,10 @@ -import {Component, Directive, ElementRef, Host, Optional, NgControl, Query, QueryList} from 'angular2/angular2'; +import {Component, Directive, ElementRef, Host, Optional, Query, QueryList} from 'angular2/core'; +import {NgControl} from 'angular2/common'; import {Config} from '../../config/config'; import {Ion} from '../ion'; import {ListHeader} from '../list/list'; +import {Form} from '../../util/form'; /** @@ -16,7 +18,7 @@ import {ListHeader} from '../list/list'; * * @usage * ```html - * + * * * * Clientside @@ -200,7 +202,8 @@ export class RadioButton extends Ion { constructor( @Host() @Optional() group: RadioGroup, elementRef: ElementRef, - config: Config + config: Config, + private form: Form ) { super(elementRef, config); @@ -213,16 +216,24 @@ export class RadioButton extends Ion { */ ngOnInit() { super.ngOnInit(); - this.group.registerRadio(this); - this.labelId = 'label-' + this.id; + if (!this.id) { + this.id = 'rb-' + this.form.nextId(); + } + this.labelId = 'lbl-' + this.id; + + if (this.group) { + this.group.registerRadio(this); + } else { + console.error(' must be within a '); + } } /** * @private */ - click(event) { - event.preventDefault(); - event.stopPropagation(); + click(ev) { + ev.preventDefault(); + ev.stopPropagation(); this.check(); } diff --git a/ionic/components/radio/test/basic/index.ts b/ionic/components/radio/test/basic/index.ts index a14701f71b..566d380a24 100644 --- a/ionic/components/radio/test/basic/index.ts +++ b/ionic/components/radio/test/basic/index.ts @@ -9,7 +9,7 @@ import { NgControlName, NgFormModel, FormBuilder -} from 'angular2/angular2'; +} from 'angular2/common'; @App({ diff --git a/ionic/components/radio/test/basic/main.html b/ionic/components/radio/test/basic/main.html index d66ef12603..0bc6ee37ba 100644 --- a/ionic/components/radio/test/basic/main.html +++ b/ionic/components/radio/test/basic/main.html @@ -4,9 +4,9 @@ - + - + Fruits @@ -43,12 +43,12 @@ fruits.value: {{fruitsForm.controls.fruits.value}}
- - + + Currencies - {{currency}} + {{currency}} @@ -56,7 +56,7 @@ currenciesControl.value: {{currencyForm.controls.currenciesControl.value}}
- + Friends Enemies diff --git a/ionic/components/scroll/pull-to-refresh.ts b/ionic/components/scroll/pull-to-refresh.ts index 91f621c272..3e6a3a9f6c 100644 --- a/ionic/components/scroll/pull-to-refresh.ts +++ b/ionic/components/scroll/pull-to-refresh.ts @@ -1,40 +1,62 @@ -import {Component, NgIf, NgClass, ElementRef, EventEmitter, Host} from 'angular2/angular2' +import {Component, ElementRef, EventEmitter, Host} from 'angular2/core' +import {NgIf, NgClass} from 'angular2/common'; import {Content} from '../content/content'; -import * as util from 'ionic/util'; -import {raf, ready, CSS} from 'ionic/util/dom'; +import * as util from '../../util'; +import {raf, ready, CSS} from '../../util/dom'; /** + * @name Refresher + * @description * Allows you to add pull-to-refresh to an Content component. - * * Place it as the first child of your Content or Scroll element. * * When refreshing is complete, call `refresher.complete()` from your controller. * * @usage + * ```html + * + * + * + * + * + + * ``` + * * ```ts - * + * export class MyClass { + * constructor(){} + * doRefresh(refresher) { + * console.log('Refreshing!', refresher); * + * setTimeout(() => { + * console.log('Pull to refresh complete!', refresher); + * refresher.complete(); + * }) + * } * - * doRefresh(refresher) { - * console.log('Refreshing!', refresher); + * doStarting() { + * console.log('Pull started!'); + * } * - * setTimeout(() => { - * console.log('Pull to refresh complete!', refresher); - * refresher.complete(); - * }) - * } - * - * doStarting() { - * console.log('Pull started!'); - * } - * - * doPulling(amt) { - * console.log('You have pulled', amt); + * doPulling(amt) { + * console.log('You have pulled', amt); + * } * } * ``` - * @demo /docs/v2/demos/refresher/ + * @demo /docs/v2/demos/refresher/ + * + * @property {string} [pullingIcon] - the icon you want to display when you begin to pull down + * @property {string} [pullingText] - the text you want to display when you begin to pull down + * @property {string} [refreshingIcon] - the icon you want to display when performing a refresh + * @property {string} [refreshingText] - the text you want to display when performing a refresh + * + * @property {any} (refresh) - the methond on your class you want to perform when you refreshing + * @property {any} (starting) - the methond on your class you want to perform when you start pulling down + * @property {any} (pulling) - the methond on your class you want to perform when you are pulling down * */ @Component({ @@ -56,19 +78,19 @@ import {raf, ready, CSS} from 'ionic/util/dom'; template: '
' + '
' + - '' + + '' + '
' + - '
' + + '
' + '
' + - '' + + '' + '
' + - '
' + + '
' + '
', directives: [NgIf, NgClass] }) export class Refresher { /** - * TODO + * @private * @param {Content} content TODO * @param {ElementRef} elementRef TODO */ @@ -86,11 +108,15 @@ export class Refresher { this.pulling = new EventEmitter('pulling'); } + /** + * @private + */ ngOnInit() { this.initEvents(); } /** + * @private * Initialize touch and scroll event listeners. */ initEvents() { @@ -129,6 +155,9 @@ export class Refresher { sc.addEventListener('scroll', this._handleScrollListener); } + /** + * @private + */ onDehydrate() { console.log('DEHYDRATION'); let sc = this.content.scrollElement; @@ -138,7 +167,7 @@ export class Refresher { } /** - * TODO + * @private * @param {TODO} val TODO */ overscroll(val) { @@ -147,7 +176,7 @@ export class Refresher { } /** - * TODO + * @private * @param {TODO} target TODO * @param {TODO} newScrollTop TODO */ @@ -161,7 +190,7 @@ export class Refresher { } /** - * TODO + * @private * @param {TODO} enabled TODO */ setScrollLock(enabled) { @@ -183,7 +212,7 @@ export class Refresher { } /** - * TODO + * @private */ activate() { //this.ele.classList.add('active'); @@ -192,7 +221,7 @@ export class Refresher { } /** - * TODO + * @private */ deactivate() { // give tail 150ms to finish @@ -205,6 +234,9 @@ export class Refresher { }, 150); } + /** + * @private + */ start() { // startCallback this.isRefreshing = true; @@ -213,7 +245,7 @@ export class Refresher { } /** - * TODO + * @private */ show() { // showCallback @@ -221,7 +253,7 @@ export class Refresher { } /** - * TODO + * @private */ hide() { // showCallback @@ -229,7 +261,7 @@ export class Refresher { } /** - * TODO + * @private */ tail() { // tailCallback @@ -237,7 +269,7 @@ export class Refresher { } /** - * TODO + * @private */ complete() { setTimeout(() => { @@ -258,7 +290,7 @@ export class Refresher { } /** - * TODO + * @private * @param {TODO} Y TODO * @param {TODO} duration TODO * @param {Function} callback TODO diff --git a/ionic/components/scroll/scroll.ts b/ionic/components/scroll/scroll.ts index 65a26740d0..10e63fdce7 100644 --- a/ionic/components/scroll/scroll.ts +++ b/ionic/components/scroll/scroll.ts @@ -1,4 +1,4 @@ -import {Component, ElementRef, onInit} from 'angular2/angular2'; +import {Component, ElementRef, onInit} from 'angular2/core'; import {Ion} from '../ion'; import {Config} from '../../config/config'; @@ -6,7 +6,7 @@ import {Gesture} from '../../gestures/gesture'; import {CSS} from '../../util/dom'; import {Animation} from '../../animations/animation'; -import * as util from 'ionic/util'; +import * as util from '../../util'; /** * @name Scroll diff --git a/ionic/components/searchbar/searchbar.ios.scss b/ionic/components/searchbar/searchbar.ios.scss index 34b9e549a6..71e146e473 100644 --- a/ionic/components/searchbar/searchbar.ios.scss +++ b/ionic/components/searchbar/searchbar.ios.scss @@ -32,6 +32,7 @@ $searchbar-ios-input-clear-icon-size: 18px !default; ion-searchbar { padding: $searchbar-ios-padding-top-bottom $searchbar-ios-padding-left-right; background: $searchbar-ios-background-color; + border-top: 1px solid transparent; border-bottom: 1px solid $searchbar-ios-border-color; min-height: $searchbar-ios-min-height; } @@ -103,6 +104,7 @@ ion-searchbar { min-height: 30px; margin-left: 0; + margin-right: 0; padding: 0; visibility: hidden; @@ -121,6 +123,12 @@ ion-searchbar { .searchbar-input { padding-left: 30px; } +} + +// Searchbar Focused +// ----------------------------------------- + +.searchbar-focused { .searchbar-ios-cancel { transform: translateX(0); flex: 0 0 auto; @@ -129,7 +137,6 @@ ion-searchbar { } } - // Searchbar in Toolbar // ----------------------------------------- @@ -148,7 +155,7 @@ ion-searchbar { } } - .searchbar-left-aligned .searchbar-ios-cancel { + .searchbar-focused .searchbar-ios-cancel { padding-left: 8px; } diff --git a/ionic/components/searchbar/searchbar.ts b/ionic/components/searchbar/searchbar.ts index 29f63d85fc..40543f3084 100644 --- a/ionic/components/searchbar/searchbar.ts +++ b/ionic/components/searchbar/searchbar.ts @@ -1,4 +1,5 @@ -import {ElementRef, Pipe, NgControl, Renderer, FORM_DIRECTIVES, NgIf, NgClass} from 'angular2/angular2'; +import {ElementRef, Renderer, Directive, Host, forwardRef, ViewChild, Output, EventEmitter} from 'angular2/core'; +import {NgIf, NgClass, NgControl, FORM_DIRECTIVES} from 'angular2/common'; import {Ion} from '../ion'; import {Config} from '../../config/config'; @@ -10,48 +11,49 @@ import {Button} from '../button/button'; * @name Searchbar * @module ionic * @description - * Manages the display of a search bar which can be used to search or filter items. + * Manages the display of a Searchbar which can be used to search or filter items. * * @usage * ```html - * + * * ``` * - * @property [placeholder] - sets input placeholder to value passed in - * @property [show-cancel] - shows the cancel button based on boolean value passed in - * @property [cancel-text] - sets the cancel button text to the value passed in - * @property [cancel-action] - the function that gets called by clicking the cancel button + * @property {function} [cancelButtonAction] - the function that gets called by clicking the cancel button + * @property {string} [cancelButtonText=Cancel] - sets the cancel button text to the value passed in + * @property {boolean} [hideCancelButton=false] - Hides the cancel button + * @property {string} [placeholder=Search] - Sets input placeholder to the value passed in + * * @see {@link /docs/v2/components#search Search Component Docs} */ @ConfigComponent({ selector: 'ion-searchbar', - defaultInputs: { - 'showCancel': false, - 'cancelText': 'Cancel', - 'placeholder': 'Search' - }, - inputs: ['cancelAction'], + inputs: [ + 'cancelButtonAction', + 'cancelButtonText', + 'hideCancelButton', + 'placeholder' + ], + outputs: ['input'], host: { '[class.searchbar-left-aligned]': 'shouldLeftAlign', '[class.searchbar-focused]': 'isFocused', }, template: '
' + - '' + + '' + '
' + - '' + - '' + + '' + + '' + '
' + - '', - directives: [FORM_DIRECTIVES, NgIf, NgClass, Icon, Button] + '', + directives: [FORM_DIRECTIVES, NgIf, NgClass, Icon, Button, forwardRef(() => SearchbarInput)] }) export class Searchbar extends Ion { - /** - * @private - * This holds the searchbar input value used for querying - */ + @ViewChild(forwardRef(() => SearchbarInput)) searchbarInput; query: string; + blurInput = true; constructor( elementRef: ElementRef, @@ -63,22 +65,124 @@ export class Searchbar extends Ion { this.renderer = renderer; this.elementRef = elementRef; + this.input = new EventEmitter('input'); + // If there is no control then we shouldn't do anything if (!ngControl) return; this.ngControl = ngControl; this.ngControl.valueAccessor = this; + + this.query = ''; } /** * @private - * After the view has initialized check if the searchbar has a value - * and then store that value in query + * On Initialization check for attributes + */ + ngOnInit() { + let hideCancelButton = this.hideCancelButton; + if (typeof hideCancelButton === 'string') { + this.hideCancelButton = (hideCancelButton === '' || hideCancelButton === 'true'); + } + + this.cancelButtonText = this.cancelButtonText || 'Cancel'; + this.placeholder = this.placeholder || 'Search'; + } + + /** + * @private + * After the view has initialized check if the Searchbar has a value */ ngAfterViewInit() { - // If the user passes in a value to the model we should left align - this.shouldLeftAlign = this.ngControl.value && this.ngControl.value.trim() != ''; - this.query = this.ngControl.value || ''; + this.shouldLeftAlign = this.searchbarInput.value && this.searchbarInput.value.trim() != ''; + } + + /** + * @private + * Sets the Searchbar to focused and aligned left on input focus. + */ + inputFocused() { + this.isFocused = true; + this.shouldLeftAlign = true; + } + + /** + * @private + * Sets the Searchbar to not focused and checks if it should align left + * based on whether there is a value in the searchbar or not. + */ + inputBlurred() { + // blurInput determines if it should blur + // if we are clearing the input we still want to stay focused in the input + if (this.blurInput == false) { + this.searchbarInput.elementRef.nativeElement.focus(); + this.blurInput = true; + return; + } + //console.log("Blurring input"); + this.isFocused = false; + this.shouldLeftAlign = this.searchbarInput.value && this.searchbarInput.value.trim() != ''; + } + + /** + * @private + * Clears the input field and triggers the control change. + */ + clearInput() { + //console.log("Clearing input"); + this.searchbarInput.writeValue(''); + this.searchbarInput.onChange(''); + this.blurInput = false; + } + + /** + * @private + * Clears the input field and tells the input to blur since + * the clearInput function doesn't want the input to blur + * then calls the custom cancel function if the user passed one in. + */ + cancelSearchbar(event, value) { + //console.log("Cancel searchbar"); + this.clearInput(); + this.blurInput = true; + + this.cancelButtonAction && this.cancelButtonAction(event, value); + } + + /** + * @private + * Updates the value of query + */ + updateQuery(value) { + this.query = value; + this.input.next(value); + } +} + +@Directive({ + selector: '.searchbar-input', + host: { + '(keyup)': 'inputChanged($event)' + } +}) +export class SearchbarInput { + constructor( + @Host() searchbar: Searchbar, + elementRef: ElementRef, + renderer: Renderer + ) { + this.searchbar = searchbar; + this.renderer = renderer; + this.elementRef = elementRef; + + if (!searchbar.ngControl) return; + + this.onChange = (_) => {}; + this.onTouched = (_) => {}; + + this.ngControl = searchbar.ngControl; + this.ngControl.valueAccessor = this; } /** @@ -86,7 +190,10 @@ export class Searchbar extends Ion { * Write a new value to the element. */ writeValue(value) { - this.query = value; + this.value = value; + if (typeof value === 'string') { + this.searchbar.updateQuery(value); + } } /** @@ -107,52 +214,11 @@ export class Searchbar extends Ion { /** * @private - * Updates the value of the control when the searchbar input changes. + * Update the Searchbar input value when the input changes */ inputChanged(event) { this.writeValue(event.target.value); this.onChange(event.target.value); } - /** - * @private - * Sets the searchbar to focused and aligned left on input focus. - */ - inputFocused() { - this.isFocused = true; - this.shouldLeftAlign = true; - } - - /** - * @private - * Sets the searchbar to not focused and checks if it should align left - * based on whether there is a value in the searchbar or not on input blur. - */ - inputBlurred() { - this.isFocused = false; - this.shouldLeftAlign = this.ngControl.value && this.ngControl.value.trim() != ''; - } - - /** - * @private - * Clears the input field and triggers the control change. - */ - clearInput(event) { - this.writeValue(''); - this.onChange(''); - } - - /** - * @private - * Blurs the input field, clears the input field and removes the left align - * then calls the custom cancel function if the user passed one in. - */ - cancelSearchbar(event, query) { - this.element = this.elementRef.nativeElement.querySelector('input'); - this.element.blur(); - this.clearInput(); - this.shouldLeftAlign = false; - - this.cancelAction && this.cancelAction(event, query); - } } diff --git a/ionic/components/searchbar/test/basic/index.ts b/ionic/components/searchbar/test/basic/index.ts deleted file mode 100644 index fe6524bd8f..0000000000 --- a/ionic/components/searchbar/test/basic/index.ts +++ /dev/null @@ -1,47 +0,0 @@ -import {NgControl, FORM_DIRECTIVES, FormBuilder, Validators, Control, ControlGroup} from 'angular2/angular2'; - -import {App} from 'ionic/ionic'; -import {SearchPipe} from 'ionic/components/searchbar/searchbar'; - - -function randomTitle() { - var items = ['Soylent', 'Pizza', 'Pumpkin', 'Apple', 'Bologna', 'Turkey', 'Kabob', 'Salad', 'Fruit bowl', 'Fish Tacos', 'Chimichongas', 'Meatloaf']; - return items[Math.floor(Math.random() * items.length)]; -} - -@App({ - templateUrl: 'main.html', - providers: [NgControl], - directives: [FORM_DIRECTIVES] -}) -class E2EApp { - constructor() { - var fb = new FormBuilder(); - this.searchQuery = ''; - - this.items = [] - for(let i = 0; i < 100; i++) { - this.items.push({ - title: randomTitle() - }) - } - } - - doThis() { - console.log('Doing this'); - } - - getItems() { - var q = this.searchQuery; - console.log('Its changing'); - if(q.trim() == '') { - return this.items; - } - return this.items.filter((v) => { - if(v.title.toLowerCase().indexOf(q.toLowerCase()) >= 0) { - return true; - } - return false; - }) - } -} diff --git a/ionic/components/searchbar/test/basic/main.html b/ionic/components/searchbar/test/basic/main.html deleted file mode 100644 index eccbaa96bf..0000000000 --- a/ionic/components/searchbar/test/basic/main.html +++ /dev/null @@ -1,16 +0,0 @@ - - - - - - - - - - {{item.title}} - - - - - - diff --git a/ionic/components/searchbar/test/floating/index.ts b/ionic/components/searchbar/test/floating/index.ts index e375587be2..3f2606d06d 100644 --- a/ionic/components/searchbar/test/floating/index.ts +++ b/ionic/components/searchbar/test/floating/index.ts @@ -1,4 +1,4 @@ -import {FORM_DIRECTIVES, FormBuilder, Validators, Control, ControlGroup} from 'angular2/angular2'; +import {FORM_DIRECTIVES, FormBuilder, Validators, Control, ControlGroup} from 'angular2/common'; import {App} from 'ionic/ionic'; import {SearchPipe} from 'ionic/components/searchbar/searchbar'; @@ -8,7 +8,7 @@ import {SearchPipe} from 'ionic/components/searchbar/searchbar'; directives: [FORM_DIRECTIVES] }) class E2EApp { - defaultSearch: string; + defaultSearch: string = 'filter'; customPlaceholder: string; defaultCancel: string; customCancel: string; @@ -25,11 +25,11 @@ class E2EApp { this.clickedCustomAction = true; } - triggerInput() { + triggerInput(ev) { // The defaultSearch doesn't get updated before this function is called // so we have to wrap it in a timeout setTimeout(() => { - console.log(this.defaultSearch); + console.log("Triggered input", this.defaultSearch); }); } } diff --git a/ionic/components/searchbar/test/floating/main.html b/ionic/components/searchbar/test/floating/main.html index ad7b9c4be8..54a5199fef 100644 --- a/ionic/components/searchbar/test/floating/main.html +++ b/ionic/components/searchbar/test/floating/main.html @@ -1,20 +1,24 @@
Search - Default
- + + +

+ Default Search: {{ defaultSearch }} +

Search - Custom Placeholder
- + -
Search - Default Cancel Button
- +
Search - Hide Cancel Button
+
Search - Custom Cancel Button Danger
- +
Search - Custom Cancel Action
- + -
+
Clicked custom action with input = {{customCancelAction}}
diff --git a/ionic/components/searchbar/test/model/index.ts b/ionic/components/searchbar/test/model/index.ts index a240add794..9aeda952f4 100644 --- a/ionic/components/searchbar/test/model/index.ts +++ b/ionic/components/searchbar/test/model/index.ts @@ -1,4 +1,4 @@ -import {NgControl, FORM_DIRECTIVES, FormBuilder, Validators, Control, ControlGroup} from 'angular2/angular2'; +import {NgControl, FORM_DIRECTIVES, FormBuilder, Validators, Control, ControlGroup} from 'angular2/common'; import {App} from 'ionic/ionic'; import {SearchPipe} from 'ionic/components/searchbar/searchbar'; diff --git a/ionic/components/searchbar/test/model/main.html b/ionic/components/searchbar/test/model/main.html index cb97ef4658..275be607c9 100644 --- a/ionic/components/searchbar/test/model/main.html +++ b/ionic/components/searchbar/test/model/main.html @@ -2,11 +2,11 @@ - + - + - + {{item.title}} diff --git a/ionic/components/searchbar/test/toolbar/main.html b/ionic/components/searchbar/test/toolbar/main.html index b50f292116..30683770b0 100644 --- a/ionic/components/searchbar/test/toolbar/main.html +++ b/ionic/components/searchbar/test/toolbar/main.html @@ -5,22 +5,22 @@
Search - Default Toolbar
- +
Search - Primary Toolbar
- +
Search - Danger Toolbar
- +
Search - Light Toolbar
- + diff --git a/ionic/components/segment/segment.ts b/ionic/components/segment/segment.ts index d482a837f6..715b35069f 100644 --- a/ionic/components/segment/segment.ts +++ b/ionic/components/segment/segment.ts @@ -1,4 +1,5 @@ -import {Directive, Renderer, ElementRef, Host, Optional, NgControl} from 'angular2/angular2'; +import {Directive, Renderer, ElementRef, Host, Optional} from 'angular2/core'; +import {NgControl} from 'angular2/common'; import {Ion} from '../ion'; import {Config} from '../../config/config'; @@ -9,12 +10,12 @@ import {Config} from '../../config/config'; * @description * A Segment is a group of buttons, sometimes known as Segmented Controls, that allow the user to interact with a compact group of a number of controls. * Segments provide functionality similar to tabs, selecting one will unselect all others. You should use a tab bar instead of a segmented control when you want to let the user move back and forth between distinct pages in your app. - * You could use Angular 2's `ng-model` or `FormBuilder` API. For an overview on how `FormBuilder` works, checkout [Angular 2 Forms](http://learnangular2.com/forms/), or [Angular FormBuilder](https://angular.io/docs/ts/latest/api/common/FormBuilder-class.html) + * You could use Angular 2's `ngModel` or `FormBuilder` API. For an overview on how `FormBuilder` works, checkout [Angular 2 Forms](http://learnangular2.com/forms/), or [Angular FormBuilder](https://angular.io/docs/ts/latest/api/common/FormBuilder-class.html) * * * @usage * ```html - * + * * * Friends * @@ -27,8 +28,8 @@ import {Config} from '../../config/config'; * Or with `FormBuilder` * *```html - *
- * + * + * * * Standard * @@ -141,7 +142,7 @@ export class Segment extends Ion { * @property {string} [value] - the value of the segment-button. * @usage * ```html - * + * * * Friends * @@ -154,8 +155,8 @@ export class Segment extends Ion { * Or with `FormBuilder` * *```html - * - * + * + * * * Standard * diff --git a/ionic/components/segment/test/basic/index.ts b/ionic/components/segment/test/basic/index.ts index 635578c552..ae4873cca8 100644 --- a/ionic/components/segment/test/basic/index.ts +++ b/ionic/components/segment/test/basic/index.ts @@ -1,4 +1,4 @@ -import {FORM_DIRECTIVES, FormBuilder, Validators, Control, ControlGroup} from 'angular2/angular2'; +import {FORM_DIRECTIVES, FormBuilder, Validators, Control, ControlGroup} from 'angular2/common'; import {App} from 'ionic/ionic'; diff --git a/ionic/components/segment/test/basic/main.html b/ionic/components/segment/test/basic/main.html index 6e6af81ecb..3af229fe21 100644 --- a/ionic/components/segment/test/basic/main.html +++ b/ionic/components/segment/test/basic/main.html @@ -1,5 +1,5 @@ - + Friends @@ -30,8 +30,8 @@

Map mode: NgControl

- - + + Standard @@ -47,14 +47,14 @@

Map mode: {{myForm.controls.mapStyle.value}} - - - + + Standard - + Hybrid - + Satellite @@ -64,7 +64,7 @@

Model style: NgModel

- + Model A @@ -83,7 +83,7 @@ - + Primary @@ -97,7 +97,7 @@ - + Light @@ -111,7 +111,7 @@ - + Light diff --git a/ionic/components/segment/test/nav/index.ts b/ionic/components/segment/test/nav/index.ts index e5474d8a48..6722218006 100644 --- a/ionic/components/segment/test/nav/index.ts +++ b/ionic/components/segment/test/nav/index.ts @@ -1,4 +1,4 @@ -import {FORM_DIRECTIVES, FormBuilder, Validators, Control, ControlGroup} from 'angular2/angular2'; +import {FORM_DIRECTIVES, FormBuilder, Validators, Control, ControlGroup} from 'angular2/common'; import {App, Page} from 'ionic/ionic'; diff --git a/ionic/components/segment/test/nav/main.html b/ionic/components/segment/test/nav/main.html index db14d34dae..8d94a1db3a 100644 --- a/ionic/components/segment/test/nav/main.html +++ b/ionic/components/segment/test/nav/main.html @@ -5,7 +5,7 @@ - + New @@ -32,14 +32,14 @@ -
-
+
+
Signing up as an Existing User.
-
+
Signing up as a New User.
-
+
Signing up as a Test User.
diff --git a/ionic/components/show-hide-when/show-hide-when.ts b/ionic/components/show-hide-when/show-hide-when.ts index 3c150bdf25..418487e302 100644 --- a/ionic/components/show-hide-when/show-hide-when.ts +++ b/ionic/components/show-hide-when/show-hide-when.ts @@ -1,9 +1,12 @@ -import {Directive, Attribute, NgZone} from 'angular2/angular2' +import {Directive, Attribute, NgZone} from 'angular2/core' import {Platform} from '../../platform/platform'; -class DisplayWhen { +/** + * @private + */ +export class DisplayWhen { constructor(conditions, platform, ngZone) { this.isMatch = false; @@ -58,13 +61,13 @@ class DisplayWhen { * Complements the [hide-when attribute](../HideWhen). * @usage * ```html - *
I am only visible on iOS!
+ *
I am only visible on iOS!
* ``` * @demo /docs/v2/demos/show-when/ * @see {@link ../HideWhen HideWhen API Docs} */ @Directive({ - selector: '[show-when]', + selector: '[showWhen]', host: { '[hidden]': 'hidden' } @@ -72,7 +75,7 @@ class DisplayWhen { export class ShowWhen extends DisplayWhen { constructor( - @Attribute('show-when') showWhen: string, + @Attribute('showWhen') showWhen: string, platform: Platform, ngZone: NgZone ) { @@ -95,13 +98,13 @@ export class ShowWhen extends DisplayWhen { * Complements the [show-when attribute](../ShowWhen). * @usage * ```html - *
I am hidden on Android!
+ *
I am hidden on Android!
* ``` * @demo /docs/v2/demos/hide-when/ * @see {@link ../ShowWhen ShowWhen API Docs} */ @Directive({ - selector: '[hide-when]', + selector: '[hideWhen]', host: { '[hidden]': 'hidden' } @@ -109,7 +112,7 @@ export class ShowWhen extends DisplayWhen { export class HideWhen extends DisplayWhen { constructor( - @Attribute('hide-when') hideWhen: string, + @Attribute('hideWhen') hideWhen: string, platform: Platform, ngZone: NgZone ) { diff --git a/ionic/components/show-hide-when/test/basic/index.ts b/ionic/components/show-hide-when/test/basic/index.ts index 49e605090c..611ee2dc2a 100644 --- a/ionic/components/show-hide-when/test/basic/index.ts +++ b/ionic/components/show-hide-when/test/basic/index.ts @@ -9,7 +9,7 @@ import { NgControlName, NgFormModel, FormBuilder -} from 'angular2/angular2'; +} from 'angular2/common'; @App({ templateUrl: 'main.html' diff --git a/ionic/components/show-hide-when/test/basic/main.html b/ionic/components/show-hide-when/test/basic/main.html index 1d2105148a..d4c5b39349 100644 --- a/ionic/components/show-hide-when/test/basic/main.html +++ b/ionic/components/show-hide-when/test/basic/main.html @@ -4,56 +4,56 @@ -

- show-when="ios" +

+ showWhen="ios"

-

- show-when="android" +

+ showWhen="android"

-

- show-when="android,ios" +

+ showWhen="android,ios"

-

- show-when="core" +

+ showWhen="core"

-

- show-when="mobile" +

+ showWhen="mobile"

-

- show-when="phablet" +

+ showWhen="phablet"

-

- show-when="tablet" +

+ showWhen="tablet"

-

- show-when="iphone" +

+ showWhen="iphone"

-

- show-when="landscape" +

+ showWhen="landscape"

-

- show-when="portrait" +

+ showWhen="portrait"

-

- hide-when="ios" +

+ hideWhen="ios"

-

- hide-when="android" +

+ hideWhen="android"

-

- hide-when="android,ios" +

+ hideWhen="android,ios"

diff --git a/ionic/components/slides/slides.scss b/ionic/components/slides/slides.scss index a1987c8185..06bb305471 100644 --- a/ionic/components/slides/slides.scss +++ b/ionic/components/slides/slides.scss @@ -251,7 +251,7 @@ button.swiper-pagination-bullet { .swiper-container-3d .swiper-slide-shadow-bottom { position: absolute; left: 0; - bottom: 0; + bottom: 0; width: 100%; height: 100%; pointer-events: none; @@ -485,11 +485,6 @@ ion-slides { display: flex; } -.swiper-container { - width: 100%; - height: 100%; -} - .swiper-slide { width: 100%; height: 100%; diff --git a/ionic/components/slides/slides.ts b/ionic/components/slides/slides.ts index 5ec9763846..c69296464d 100644 --- a/ionic/components/slides/slides.ts +++ b/ionic/components/slides/slides.ts @@ -1,13 +1,14 @@ -import {Directive, Component, ElementRef, Host, NgClass, EventEmitter} from 'angular2/angular2'; +import {Directive, Component, ElementRef, Host, EventEmitter} from 'angular2/core'; +import {NgClass} from 'angular2/common'; import {Ion} from '../ion'; -import {Animation} from 'ionic/animations/animation'; -import {Gesture} from 'ionic/gestures/gesture'; -import {DragGesture} from 'ionic/gestures/drag-gesture'; +import {Animation} from '../../animations/animation'; +import {Gesture} from '../../gestures/gesture'; +import {DragGesture} from '../../gestures/drag-gesture'; import {Config} from '../../config/config'; -import {dom} from 'ionic/util'; +import {dom} from '../../util'; import {CSS} from '../../util/dom'; -import * as util from 'ionic/util'; +import * as util from '../../util'; import {Swiper} from './swiper-widget'; import {Scroll} from '../scroll/scroll'; @@ -33,7 +34,7 @@ import {Scroll} from '../scroll/scroll'; * ```ts * @Page({ * template: ` - * + * * *

Thank you for choosing the Awesome App!

*

diff --git a/ionic/components/slides/test/basic/main.html b/ionic/components/slides/test/basic/main.html index d93835abfe..e9cad308ac 100644 --- a/ionic/components/slides/test/basic/main.html +++ b/ionic/components/slides/test/basic/main.html @@ -1,5 +1,5 @@ - + diff --git a/ionic/components/slides/test/intro/main.html b/ionic/components/slides/test/intro/main.html index 00caad1bb2..53baf00e2c 100644 --- a/ionic/components/slides/test/intro/main.html +++ b/ionic/components/slides/test/intro/main.html @@ -42,7 +42,7 @@ Grid Icons - +

Thank you for choosing the Awesome App!

- diff --git a/ionic/components/switch/switch.ios.scss b/ionic/components/switch/switch.ios.scss deleted file mode 100644 index 81e783bb9f..0000000000 --- a/ionic/components/switch/switch.ios.scss +++ /dev/null @@ -1,184 +0,0 @@ -@import "../../globals.ios"; - -// iOS Switch -// -------------------------------------------------- - -$switch-ios-width: 51px !default; -$switch-ios-height: 32px !default; -$switch-ios-border-width: 2px !default; -$switch-ios-border-radius: $switch-ios-height / 2 !default; - -$switch-ios-background-color-off: $list-ios-background-color !default; -$switch-ios-border-color-off: grayscale(lighten($list-ios-border-color, 11%)) !default; - -$switch-ios-background-color-on: map-get($colors-ios, primary) !default; - -$switch-ios-handle-width: $switch-ios-height - ($switch-ios-border-width * 2) !default; -$switch-ios-handle-height: $switch-ios-handle-width !default; -$switch-ios-handle-border-radius: $switch-ios-handle-height / 2 !default; -$switch-ios-handle-box-shadow: 0 3px 12px rgba(0, 0, 0, 0.16), 0 3px 1px rgba(0, 0, 0, 0.1) !default; - -$switch-ios-handle-background-color: $switch-ios-background-color-off !default; - -$switch-ios-media-margin: 0 !default; -$switch-ios-media-padding: 6px ($item-ios-padding-right / 2) 5px ($item-ios-padding-left) !default; - -$switch-ios-transition-duration: 300ms !default; - -$switch-ios-disabled-opacity: 0.5 !default; -$switch-ios-disabled-text-color: $subdued-text-ios-color !default; - - -// Switch -// ----------------------------------------- - -ion-switch { - display: block; - @include user-select-none(); - - &.item.activated { - background: $list-ios-background-color; - } -} - - -// Switch Wrapper -// ----------------------------------------- - -.switch-media { - margin: $switch-ios-media-margin; - padding: $switch-ios-media-padding; - cursor: pointer; -} - - -// Switch Background Track -// ----------------------------------------- - -.switch-icon { - // bg track, when not checked - position: relative; - display: block; - width: $switch-ios-width; - height: $switch-ios-height; - border-radius: $switch-ios-border-radius; - pointer-events: none; - - background-color: $switch-ios-border-color-off; - transition: background-color $switch-ios-transition-duration; -} - - -// Switch Background Track, Inner Oval -// ----------------------------------------- - -.switch-icon:before { - // inner bg track's oval, when not checked - content: ''; - position: absolute; - top: $switch-ios-border-width; - right: $switch-ios-border-width; - left: $switch-ios-border-width; - bottom: $switch-ios-border-width; - - border-radius: $switch-ios-border-radius; - background-color: $switch-ios-background-color-off; - - transform: scale3d(1, 1, 1); - transition: transform $switch-ios-transition-duration; -} - - -// Switch Knob -// ----------------------------------------- - -.switch-icon:after { - // knob, when not checked - content: ''; - position: absolute; - top: $switch-ios-border-width; - left: $switch-ios-border-width; - - width: $switch-ios-handle-width; - height: $switch-ios-handle-height; - - border-radius: $switch-ios-handle-border-radius; - background-color: $switch-ios-handle-background-color; - box-shadow: $switch-ios-handle-box-shadow; - - transition: transform $switch-ios-transition-duration, width 120ms ease-in-out 80ms, left 110ms ease-in-out 80ms; -} - - -// Switch Checked -// ----------------------------------------- - -ion-switch[aria-checked=true] { - .switch-icon { - // bg track, when checked - background-color: $switch-ios-background-color-on; - - &:before { - // inner bg track's oval, when checked - transform: scale3d(0, 0, 0); - } - - &:after { - // knob, when checked - transform: translate3d($switch-ios-width - $switch-ios-handle-width - ($switch-ios-border-width * 2), 0, 0); - } - } - - .switch-activated .switch-icon { - &:before { - // inner bg track's oval, when checked - transform: scale3d(0, 0, 0); - } - - &:after { - // when pressing down on the switch and IS checked - // make the knob wider and move it left a bit - left: $switch-ios-border-width - 6; - - // when pressing down on the switch and NOT checked - // then make the knob wider - width: $switch-ios-handle-width + 6; - } - } -} - - -// Switch Disabled -// ----------------------------------------- - -ion-switch[aria-disabled=true] { - opacity: $switch-ios-disabled-opacity; - color: $switch-ios-disabled-text-color; - pointer-events: none; -} - - -// iOS Switch Color Mixin -// -------------------------------------------------- - -@mixin switch-theme-ios($color-name, $bg-on) { - - ion-switch[#{$color-name}] { - - &[aria-checked=true] .switch-icon { - background-color: $bg-on; - } - - } - -} - - -// Generate iOS Switch Auxiliary Colors -// -------------------------------------------------- - -@each $color-name, $value in $colors-ios { - - @include switch-theme-ios($color-name, $value); - -} diff --git a/ionic/components/switch/switch.md.scss b/ionic/components/switch/switch.md.scss deleted file mode 100644 index 4200de3b3c..0000000000 --- a/ionic/components/switch/switch.md.scss +++ /dev/null @@ -1,140 +0,0 @@ -@import "../../globals.md"; - -// Material Design Switch -// -------------------------------------------------- - -$switch-md-active-color: map-get($colors-md, primary) !default; - -$switch-md-track-width: 36px !default; -$switch-md-track-height: 14px !default; -$switch-md-track-background-color-off: $list-md-border-color !default; -$switch-md-track-background-color-on: lighten($switch-md-active-color, 25%) !default; - -$switch-md-handle-width: 20px !default; -$switch-md-handle-height: 20px !default; -$switch-md-handle-background-color-off: $background-md-color !default; -$switch-md-handle-background-color-on: $switch-md-active-color !default; -$switch-md-handle-box-shadow: 0 2px 2px 0 rgba(0,0,0,.14), 0 3px 1px -2px rgba(0,0,0,.2), 0 1px 5px 0 rgba(0,0,0,.12) !default; -$switch-md-handle-border-radius: 50% !default; - -$switch-md-media-margin: 0 !default; -$switch-md-media-padding: 12px ($item-md-padding-right / 2) 12px $item-md-padding-left !default; - -$switch-md-transition-duration: 300ms !default; - -$switch-md-disabled-opacity: 0.5 !default; -$switch-md-disabled-text-color: $subdued-text-md-color !default; - - -// Switch -// ----------------------------------------- - -ion-switch { - display: block; - @include user-select-none(); -} - - -// Switch Wrapper -// ----------------------------------------- - -.switch-media { - margin: $switch-md-media-margin; - padding: $switch-md-media-padding; - cursor: pointer; -} - - -// Switch Background Track -// ----------------------------------------- - -.switch-icon { - // bg track, when not checked - position: relative; - display: block; - width: $switch-md-track-width; - height: $switch-md-track-height; - pointer-events: none; - border-radius: $switch-md-track-height; - - background-color: $switch-md-track-background-color-off; - transition: background-color $switch-md-transition-duration -} - - -// Switch Knob -// ----------------------------------------- - -.switch-icon:after { - // knob, when not checked - content: ''; - position: absolute; - top: ($switch-md-handle-height - $switch-md-track-height) / -2; - left: 0; - - width: $switch-md-handle-width; - height: $switch-md-handle-height; - - border-radius: $switch-md-handle-border-radius; - box-shadow: $switch-md-handle-box-shadow; - - background-color: $switch-md-handle-background-color-off; - - transition-property: transform, background-color; - transition-duration: $switch-md-transition-duration; -} - - -// Switch Checked -// ----------------------------------------- - -ion-switch[aria-checked=true] .switch-icon { - // bg track, when not checked - background-color: $switch-md-track-background-color-on; - - &:after { - // knob, when not checked - background-color: $switch-md-handle-background-color-on; - transform: translate3d($switch-md-track-width - $switch-md-handle-width, 0, 0); - } -} - - -// Switch Disabled -// ----------------------------------------- - -ion-switch[aria-disabled=true] { - opacity: $switch-md-disabled-opacity; - color: $switch-md-disabled-text-color; - pointer-events: none; -} - - -// Material Design Color Mixin -// -------------------------------------------------- - -@mixin switch-theme-md($color-name, $bg-on) { - - ion-switch[#{$color-name}] { - - &[aria-checked=true] .switch-icon { - background-color: lighten($bg-on, 25%); - } - - &[aria-checked=true] .switch-icon:after { - background-color: $bg-on; - } - - } - -} - - -// Generate Material Design Switch Auxiliary Colors -// -------------------------------------------------- - -@each $color-name, $value in $colors-md { - - @include switch-theme-md($color-name, $value); - -} diff --git a/ionic/components/tabs/tab.ts b/ionic/components/tabs/tab.ts index 131f6e7005..aa56dbbd91 100644 --- a/ionic/components/tabs/tab.ts +++ b/ionic/components/tabs/tab.ts @@ -1,4 +1,4 @@ -import {ChangeDetectorRef, Component, Directive, Host, ElementRef, Compiler, AppViewManager, NgZone, Renderer} from 'angular2/angular2'; +import {ChangeDetectorRef, Component, Directive, Host, ElementRef, Compiler, AppViewManager, NgZone, Renderer} from 'angular2/core'; import {IonicApp} from '../app/app'; import {Config} from '../../config/config'; @@ -13,8 +13,8 @@ import {Tabs} from './tabs'; * @usage * ```html * - * - * + * + * * * ``` * @@ -34,8 +34,8 @@ import {Tabs} from './tabs'; * * @property {any} [root] - set the root page for this tab - * @property {any} [tab-title] - set the title of this tab - * @property {any} [tab-icon] - set the icon for this tab + * @property {any} [tabTitle] - set the title of this tab + * @property {any} [tabIcon] - set the icon for this tab */ @Component({ diff --git a/ionic/components/tabs/tabs.ios.scss b/ionic/components/tabs/tabs.ios.scss index 968f8db08c..a33c7c636b 100644 --- a/ionic/components/tabs/tabs.ios.scss +++ b/ionic/components/tabs/tabs.ios.scss @@ -21,7 +21,7 @@ tabbar { background: $tabbar-ios-background; } -ion-tabs[tabbar-placement=top] tabbar { +ion-tabs[tabbarPlacement=top] tabbar { border-top: none; border-bottom: 1px solid $toolbar-ios-border-color; } @@ -60,8 +60,8 @@ ion-tabs[tabbar-placement=top] tabbar { } } -[tabbar-icons=right] .tab-button, -[tabbar-icons=left] .tab-button { +[tabbarIcons=right] .tab-button, +[tabbarIcons=left] .tab-button { .tab-button-text { font-size: 1.4rem; @@ -77,7 +77,7 @@ ion-tabs[tabbar-placement=top] tabbar { } } -[tabbar-icons=hide] .tab-button-text { +[tabbarIcons=hide] .tab-button-text { font-size: 1.4rem; line-height: 1.1; } @@ -101,7 +101,7 @@ ion-tabs[tabbar-placement=top] tabbar { border-top-width: 0.55px; } - &[tabbar-placement="top"] tabbar { + &[tabbarPlacement="top"] tabbar { border-bottom-width: 0.55px; } diff --git a/ionic/components/tabs/tabs.md.scss b/ionic/components/tabs/tabs.md.scss index 3273111a2e..5fe0766c7d 100644 --- a/ionic/components/tabs/tabs.md.scss +++ b/ionic/components/tabs/tabs.md.scss @@ -49,13 +49,13 @@ tabbar { min-width: $tabbar-md-item-icon-size + 5; } -[tabbar-icons=bottom] .tab-button { +[tabbarIcons=bottom] .tab-button { padding-top: 8px; padding-bottom: 8px; } -[tabbar-icons=right] .tab-button, -[tabbar-icons=left] .tab-button { +[tabbarIcons=right] .tab-button, +[tabbarIcons=left] .tab-button { padding-bottom: 10px; icon { @@ -84,7 +84,7 @@ tab-highlight { } } -[tabbar-placement=bottom] tab-highlight { +[tabbarPlacement=bottom] tab-highlight { top: 0; } diff --git a/ionic/components/tabs/tabs.scss b/ionic/components/tabs/tabs.scss index 4da71363b6..2da72784a4 100644 --- a/ionic/components/tabs/tabs.scss +++ b/ionic/components/tabs/tabs.scss @@ -43,7 +43,7 @@ ion-tabbar-section { order: $flex-order-tabbar-bottom; } -[tabbar-placement=top] ion-tabbar-section { +[tabbarPlacement=top] ion-tabbar-section { order: $flex-order-tabbar-top; } @@ -108,13 +108,13 @@ tab-highlight { display: none; } -[tabbar-icons=bottom] .tab-button { +[tabbarIcons=bottom] .tab-button { .tab-button-icon { order: 10; } } -[tabbar-icons=left] .tab-button { +[tabbarIcons=left] .tab-button { flex-direction: row; .tab-button-icon { @@ -123,7 +123,7 @@ tab-highlight { } } -[tabbar-icons=right] .tab-button { +[tabbarIcons=right] .tab-button { flex-direction: row; .tab-button-icon { @@ -133,6 +133,6 @@ tab-highlight { } } -[tabbar-icons=hide] .tab-button-icon { +[tabbarIcons=hide] .tab-button-icon { display: none; } diff --git a/ionic/components/tabs/tabs.ts b/ionic/components/tabs/tabs.ts index fa160401ff..c30838214f 100644 --- a/ionic/components/tabs/tabs.ts +++ b/ionic/components/tabs/tabs.ts @@ -1,4 +1,5 @@ -import {Directive, ElementRef, Optional, Host, NgFor, NgIf, forwardRef, ViewContainerRef} from 'angular2/angular2'; +import {Directive, ElementRef, Optional, Host, forwardRef, ViewContainerRef} from 'angular2/core'; +import {NgFor, NgIf} from 'angular2/common'; import {Ion} from '../ion'; import {Attr} from '../app/id'; @@ -13,10 +14,10 @@ import {rafFrames} from '../../util/dom'; /** * @name Tabs - * @property {any} [tabbar-placement] - set position of the tabbar, top or bottom - * @property {any} [tabbar-icons] - set the position of the tabbar's icons: top, bottom, left, right, hide + * @property {any} [tabbarPlacement] - set position of the tabbar, top or bottom + * @property {any} [tabbarIcons] - set the position of the tabbar's icons: top, bottom, left, right, hide * @property {any} [tabbar-style] - sets tabbar's style (primary, secondary, etc) - * @property {any} [preload-tabs] - sets whether to preload all the tabs, true or false + * @property {any} [preloadTabs] - sets whether to preload all the tabs, true or false * @usage * ```html * @@ -47,8 +48,8 @@ import {rafFrames} from '../../util/dom'; '' + '' + '' + - '' + - '' + + '' + + '' + '{{t.tabTitle}}' + '' + '' + diff --git a/ionic/components/tabs/test/advanced/tabs.html b/ionic/components/tabs/test/advanced/tabs.html index 9a686c91c9..60675d722b 100644 --- a/ionic/components/tabs/test/advanced/tabs.html +++ b/ionic/components/tabs/test/advanced/tabs.html @@ -1,6 +1,6 @@ - - - - + + + + diff --git a/ionic/components/tabs/test/basic/index.ts b/ionic/components/tabs/test/basic/index.ts index 6648d682c1..bf296a3ac4 100644 --- a/ionic/components/tabs/test/basic/index.ts +++ b/ionic/components/tabs/test/basic/index.ts @@ -13,7 +13,7 @@ Tab 1 - Item {{i}} {{i}} {{i}} {{i}} + Item {{i}} {{i}} {{i}} {{i}} ` @@ -39,7 +39,7 @@ class Tab1 { - +

{{session.name}} {{session.name}} {{session.name}}

{{session.location}} {{session.location}} {{session.location}}

@@ -71,7 +71,7 @@ class Tab2 { @Page({ template: ` - Stopwatch @@ -92,7 +92,7 @@ class Tab3 {} - @@ -100,9 +100,9 @@ class Tab3 {} - - - + + + ` }) diff --git a/ionic/components/tabs/test/ghost/index.ts b/ionic/components/tabs/test/ghost/index.ts index cb31731976..d71b3cf5db 100644 --- a/ionic/components/tabs/test/ghost/index.ts +++ b/ionic/components/tabs/test/ghost/index.ts @@ -1,6 +1,6 @@ import {App, Page, NavController, Tab} from 'ionic/ionic'; -import {ContentChild, QueryList, ViewChildren} from 'angular2/angular2'; +import {ContentChild, QueryList, ViewChildren} from 'angular2/core'; // // Tab 1 @@ -46,7 +46,7 @@ class Tab2 { @Page({ template: ` - Stopwatch @@ -68,7 +68,7 @@ class Tab3 { @Page({ template: ` - Quesarito @@ -92,7 +92,7 @@ class QuesaritoPage { - @@ -100,9 +100,9 @@ class QuesaritoPage { - - - + + + ` }) diff --git a/ionic/components/tabs/test/tab-bar-scenarios/main.html b/ionic/components/tabs/test/tab-bar-scenarios/main.html index 222687e048..3414bd47a7 100644 --- a/ionic/components/tabs/test/tab-bar-scenarios/main.html +++ b/ionic/components/tabs/test/tab-bar-scenarios/main.html @@ -1,69 +1,69 @@ - - - + + + - - - + + + - - - + + + - - - - + + + + - - - - + + + + - - - - + + + + - - - - + + + + - - - + + + - - - + + + diff --git a/ionic/components/tap-click/tap-click.ts b/ionic/components/tap-click/tap-click.ts index 6b85bc268e..03155645fd 100644 --- a/ionic/components/tap-click/tap-click.ts +++ b/ionic/components/tap-click/tap-click.ts @@ -1,4 +1,4 @@ -import {Injectable, NgZone} from 'angular2/angular2'; +import {Injectable, NgZone} from 'angular2/core'; import {IonicApp} from '../app/app'; import {Config} from '../../config/config'; diff --git a/ionic/components/text-input/label.ts b/ionic/components/text-input/label.ts index 3adea59ca1..24ef7c886c 100644 --- a/ionic/components/text-input/label.ts +++ b/ionic/components/text-input/label.ts @@ -1,8 +1,11 @@ -import {Directive, Optional, ElementRef, Renderer} from 'angular2/angular2'; +import {Directive, Optional, ElementRef, Renderer} from 'angular2/core'; import {Config} from '../../config/config'; import {TextInput} from './text-input'; import {pointerCoord, hasPointerMoved} from '../../util/dom'; +import {Form} from '../../util/form'; + + /** * @name Label * @description @@ -39,15 +42,19 @@ export class Label { constructor( config: Config, @Optional() container: TextInput, + private form: Form, private elementRef: ElementRef, private renderer: Renderer ) { this.scrollAssist = config.get('scrollAssist'); - if (!this.id) { - this.id = 'lbl-' + (++labelIds); - } this.container = container; - container && container.registerLabel(this); + } + + ngOnInit() { + if (!this.id) { + this.id = 'lbl-' + this.form.nextId(); + } + this.container && this.container.registerLabel(this); } /** @@ -88,5 +95,3 @@ export class Label { } } - -let labelIds = -1; diff --git a/ionic/components/text-input/test/floating-labels/index.ts b/ionic/components/text-input/test/floating-labels/index.ts index 43aed36502..79de5a9b12 100644 --- a/ionic/components/text-input/test/floating-labels/index.ts +++ b/ionic/components/text-input/test/floating-labels/index.ts @@ -4,4 +4,12 @@ import {App} from 'ionic/ionic'; @App({ templateUrl: 'main.html' }) -class E2EApp {} +class E2EApp { + constructor() { + this.myValues = { + value1: 'Dynamic Input', + value2: 'Dynamic Textarea' + }; + } + +} diff --git a/ionic/components/text-input/test/floating-labels/main.html b/ionic/components/text-input/test/floating-labels/main.html index ca011371cc..93fe74fe49 100644 --- a/ionic/components/text-input/test/floating-labels/main.html +++ b/ionic/components/text-input/test/floating-labels/main.html @@ -8,10 +8,11 @@ Floating Label 1 - + + Value: {{ myValues.value1 }} - + Floating Label 2 @@ -23,8 +24,9 @@ Floating Label 4 - + + Value: {{ myValues.value2 }} Floating Label 5 diff --git a/ionic/components/text-input/test/form-inputs/index.ts b/ionic/components/text-input/test/form-inputs/index.ts index 1eb3f9b37f..9d55a29d72 100644 --- a/ionic/components/text-input/test/form-inputs/index.ts +++ b/ionic/components/text-input/test/form-inputs/index.ts @@ -1,5 +1,5 @@ import {App} from 'ionic/ionic'; -import {FormBuilder, Validators} from 'angular2/angular2'; +import {FormBuilder, Validators} from 'angular2/common'; @App({ diff --git a/ionic/components/text-input/test/form-inputs/main.html b/ionic/components/text-input/test/form-inputs/main.html index 545ed7758b..73cf6f005b 100644 --- a/ionic/components/text-input/test/form-inputs/main.html +++ b/ionic/components/text-input/test/form-inputs/main.html @@ -4,12 +4,12 @@ - + Email: - + @@ -17,7 +17,7 @@ Username: - + @@ -25,7 +25,7 @@ Password: - + @@ -33,7 +33,7 @@ Comments: - + diff --git a/ionic/components/text-input/test/inline-labels/index.ts b/ionic/components/text-input/test/inline-labels/index.ts index 261c4ab4ca..a9bdbc8a78 100644 --- a/ionic/components/text-input/test/inline-labels/index.ts +++ b/ionic/components/text-input/test/inline-labels/index.ts @@ -7,7 +7,6 @@ import {App} from 'ionic/ionic'; class E2EApp { submit(ev) { - debugger } } diff --git a/ionic/components/text-input/test/inline-labels/main.html b/ionic/components/text-input/test/inline-labels/main.html index bdd43cd9b1..38668016bb 100644 --- a/ionic/components/text-input/test/inline-labels/main.html +++ b/ionic/components/text-input/test/inline-labels/main.html @@ -76,6 +76,16 @@ + + Beginning: + + + + + Time: + + + diff --git a/ionic/components/text-input/test/input-focus/main.html b/ionic/components/text-input/test/input-focus/main.html index 6098a24aee..0fb2fa1569 100644 --- a/ionic/components/text-input/test/input-focus/main.html +++ b/ionic/components/text-input/test/input-focus/main.html @@ -65,12 +65,20 @@ + + Toggle + + More Info: + + Checkbox + + Score: @@ -100,95 +108,21 @@ Item + - + + Radio 2 + diff --git a/ionic/components/text-input/text-input.scss b/ionic/components/text-input/text-input.scss index 618f19c1dd..4ddcc82d3e 100644 --- a/ionic/components/text-input/text-input.scss +++ b/ionic/components/text-input/text-input.scss @@ -17,6 +17,10 @@ $text-input-textarea-resize: none !default; pointer-events: none; } +input.item-input:-webkit-autofill { + background-color: transparent; +} + // Scroll Assist // -------------------------------------------------- diff --git a/ionic/components/text-input/text-input.ts b/ionic/components/text-input/text-input.ts index a4ae10c534..66507c478d 100644 --- a/ionic/components/text-input/text-input.ts +++ b/ionic/components/text-input/text-input.ts @@ -1,4 +1,5 @@ -import {Component, Directive, Attribute, NgIf, forwardRef, Host, Optional, ElementRef, Renderer, Attribute} from 'angular2/angular2'; +import {Component, Directive, Attribute, forwardRef, Host, Optional, ElementRef, Renderer} from 'angular2/core'; +import {NgIf, NgControl} from 'angular2/common'; import {NavController} from '../nav/nav-controller'; import {Config} from '../../config/config'; @@ -59,7 +60,7 @@ import {Platform} from '../../platform/platform'; template: '
' + '' + - '' + + '' + '
', directives: [NgIf, forwardRef(() => InputScrollAssist)] }) @@ -105,7 +106,7 @@ export class TextInput { * This function is used to add the Angular css classes associated with inputs in forms */ addNgClass(className) { - return this.input.elementRef.nativeElement.classList.contains(className); + this.input && this.input.elementRef.nativeElement.classList.contains(className); } /** @@ -132,7 +133,7 @@ export class TextInput { /** * @private */ - ngOnInit() { + ngAfterViewInit() { if (this.input && this.label) { // if there is an input and an label // then give the label an ID @@ -455,7 +456,7 @@ export class TextInput { * @private */ @Directive({ - selector: 'textarea,input[type=text],input[type=password],input[type=number],input[type=search],input[type=email],input[type=url],input[type=tel]', + selector: 'textarea,input[type=text],input[type=password],input[type=number],input[type=search],input[type=email],input[type=url],input[type=tel],input[type=date],input[type=datetime],input[type=datetime-local],input[type=week],input[type=time]', inputs: ['value'], host: { '(focus)': 'focusChange(true)', @@ -469,7 +470,8 @@ export class TextInputElement { @Attribute('type') type: string, elementRef: ElementRef, renderer: Renderer, - @Optional() wrapper: TextInput + @Optional() wrapper: TextInput, + @Optional() ngControl: NgControl ) { this.type = type; this.elementRef = elementRef; @@ -484,9 +486,12 @@ export class TextInputElement { renderer.setElementClass(elementRef, 'item-input', true); wrapper.registerInput(this); } + + if (ngControl) this.ngControl = ngControl; } ngOnInit() { + if (this.ngControl) this.value = this.ngControl.value; this.wrapper && this.wrapper.hasValue(this.value); } diff --git a/ionic/components/switch/test/basic/e2e.ts b/ionic/components/toggle/test/basic/e2e.ts similarity index 80% rename from ionic/components/switch/test/basic/e2e.ts rename to ionic/components/toggle/test/basic/e2e.ts index 6c4ea1b431..efb5b33089 100644 --- a/ionic/components/switch/test/basic/e2e.ts +++ b/ionic/components/toggle/test/basic/e2e.ts @@ -1,6 +1,6 @@ it('should check apple via switch element click', function() { - element(by.css('[ng-control=appleCtrl] .switch-media')).click(); + element(by.css('[ngControl=appleCtrl] .toggle-media')).click(); }); diff --git a/ionic/components/switch/test/basic/index.ts b/ionic/components/toggle/test/basic/index.ts similarity index 96% rename from ionic/components/switch/test/basic/index.ts rename to ionic/components/toggle/test/basic/index.ts index dde96c875f..1d8c6a59c3 100644 --- a/ionic/components/switch/test/basic/index.ts +++ b/ionic/components/toggle/test/basic/index.ts @@ -9,7 +9,7 @@ import { NgControlName, NgFormModel, FormBuilder -} from 'angular2/angular2'; +} from 'angular2/common'; @App({ templateUrl: 'main.html' diff --git a/ionic/components/switch/test/basic/main.html b/ionic/components/toggle/test/basic/main.html similarity index 68% rename from ionic/components/switch/test/basic/main.html rename to ionic/components/toggle/test/basic/main.html index c640bfeb06..569215b24e 100644 --- a/ionic/components/switch/test/basic/main.html +++ b/ionic/components/toggle/test/basic/main.html @@ -1,36 +1,36 @@ -Switches +Toggles - + - + Apple, value=apple, init checked - + - + Banana, init no checked/value attributes - + - + Cherry, value=cherry, init disabled - + - + Grape, value=grape, init checked, disabled - + - + Secondary color - + - + I'm an NgModel - + diff --git a/ionic/components/toggle/toggle.ios.scss b/ionic/components/toggle/toggle.ios.scss new file mode 100644 index 0000000000..e222eae2f4 --- /dev/null +++ b/ionic/components/toggle/toggle.ios.scss @@ -0,0 +1,182 @@ +@import "../../globals.ios"; + +// iOS Toggle +// -------------------------------------------------- + +$toggle-ios-width: 51px !default; +$toggle-ios-height: 32px !default; +$toggle-ios-border-width: 2px !default; +$toggle-ios-border-radius: $toggle-ios-height / 2 !default; + +$toggle-ios-background-color-off: $list-ios-background-color !default; +$toggle-ios-border-color-off: grayscale(lighten($list-ios-border-color, 11%)) !default; + +$toggle-ios-background-color-on: map-get($colors-ios, primary) !default; + +$toggle-ios-handle-width: $toggle-ios-height - ($toggle-ios-border-width * 2) !default; +$toggle-ios-handle-height: $toggle-ios-handle-width !default; +$toggle-ios-handle-border-radius: $toggle-ios-handle-height / 2 !default; +$toggle-ios-handle-box-shadow: 0 3px 12px rgba(0, 0, 0, 0.16), 0 3px 1px rgba(0, 0, 0, 0.1) !default; + +$toggle-ios-handle-background-color: $toggle-ios-background-color-off !default; + +$toggle-ios-media-margin: 0 !default; +$toggle-ios-media-padding: 6px ($item-ios-padding-right / 2) 5px ($item-ios-padding-left) !default; + +$toggle-ios-transition-duration: 300ms !default; + +$toggle-ios-disabled-opacity: 0.5 !default; +$toggle-ios-disabled-text-color: $subdued-text-ios-color !default; + + +// Toggle +// ----------------------------------------- + +ion-toggle { + display: block; + @include user-select-none(); + + &.item.activated { + background: $list-ios-background-color; + } +} + + +// Toggle Wrapper +// ----------------------------------------- + +.toggle-media { + margin: $toggle-ios-media-margin; + padding: $toggle-ios-media-padding; + cursor: pointer; +} + + +// Toggle Background Track +// ----------------------------------------- + +.toggle-icon { + // bg track, when not checked + position: relative; + display: block; + width: $toggle-ios-width; + height: $toggle-ios-height; + border-radius: $toggle-ios-border-radius; + pointer-events: none; + + background-color: $toggle-ios-border-color-off; + transition: background-color $toggle-ios-transition-duration; +} + + +// Toggle Background Track, Inner Oval +// ----------------------------------------- + +.toggle-icon:before { + // inner bg track's oval, when not checked + content: ''; + position: absolute; + top: $toggle-ios-border-width; + right: $toggle-ios-border-width; + left: $toggle-ios-border-width; + bottom: $toggle-ios-border-width; + + border-radius: $toggle-ios-border-radius; + background-color: $toggle-ios-background-color-off; + + transform: scale3d(1, 1, 1); + transition: transform $toggle-ios-transition-duration; +} + + +// Toggle Knob +// ----------------------------------------- + +.toggle-icon:after { + // knob, when not checked + content: ''; + position: absolute; + top: $toggle-ios-border-width; + left: $toggle-ios-border-width; + + width: $toggle-ios-handle-width; + height: $toggle-ios-handle-height; + + border-radius: $toggle-ios-handle-border-radius; + background-color: $toggle-ios-handle-background-color; + box-shadow: $toggle-ios-handle-box-shadow; + + transition: transform $toggle-ios-transition-duration, width 120ms ease-in-out 80ms, left 110ms ease-in-out 80ms; +} + + +// Toggle Checked +// ----------------------------------------- + +ion-toggle[aria-checked=true] { + .toggle-icon { + // bg track, when checked + background-color: $toggle-ios-background-color-on; + + &:before { + // inner bg track's oval, when checked + transform: scale3d(0, 0, 0); + } + + &:after { + // knob, when checked + transform: translate3d($toggle-ios-width - $toggle-ios-handle-width - ($toggle-ios-border-width * 2), 0, 0); + } + } + + .toggle-activated .toggle-icon { + &:before { + // inner bg track's oval, when checked + transform: scale3d(0, 0, 0); + } + + &:after { + // when pressing down on the toggle and IS checked + // make the knob wider and move it left a bit + left: $toggle-ios-border-width - 6; + + // when pressing down on the toggle and NOT checked + // then make the knob wider + width: $toggle-ios-handle-width + 6; + } + } +} + + +// Toggle Disabled +// ----------------------------------------- + +ion-toggle[aria-disabled=true] { + opacity: $toggle-ios-disabled-opacity; + color: $toggle-ios-disabled-text-color; + pointer-events: none; +} + + +// iOS Toggle Color Mixin +// -------------------------------------------------- + +@mixin ios-toggle-theme($color-name, $bg-on) { + + ion-toggle[#{$color-name}] { + + &[aria-checked=true] .toggle-icon { + background-color: $bg-on; + } + + } + +} + + +// Generate iOS Toggle Colors +// -------------------------------------------------- + +@each $color-name, $value in $colors-ios { + @include ios-toggle-theme($color-name, $value); +} diff --git a/ionic/components/toggle/toggle.md.scss b/ionic/components/toggle/toggle.md.scss new file mode 100644 index 0000000000..230dbb6476 --- /dev/null +++ b/ionic/components/toggle/toggle.md.scss @@ -0,0 +1,140 @@ +@import "../../globals.md"; + +// Material Design Toggle +// -------------------------------------------------- + +$toggle-md-active-color: map-get($colors-md, primary) !default; + +$toggle-md-track-width: 36px !default; +$toggle-md-track-height: 14px !default; +$toggle-md-track-background-color-off: $list-md-border-color !default; +$toggle-md-track-background-color-on: lighten($toggle-md-active-color, 25%) !default; + +$toggle-md-handle-width: 20px !default; +$toggle-md-handle-height: 20px !default; +$toggle-md-handle-background-color-off: $background-md-color !default; +$toggle-md-handle-background-color-on: $toggle-md-active-color !default; +$toggle-md-handle-box-shadow: 0 2px 2px 0 rgba(0,0,0,.14), 0 3px 1px -2px rgba(0,0,0,.2), 0 1px 5px 0 rgba(0,0,0,.12) !default; +$toggle-md-handle-border-radius: 50% !default; + +$toggle-md-media-margin: 0 !default; +$toggle-md-media-padding: 12px ($item-md-padding-right / 2) 12px $item-md-padding-left !default; + +$toggle-md-transition-duration: 300ms !default; + +$toggle-md-disabled-opacity: 0.5 !default; +$toggle-md-disabled-text-color: $subdued-text-md-color !default; + + +// Toggle +// ----------------------------------------- + +ion-toggle { + display: block; + @include user-select-none(); +} + + +// Toggle Wrapper +// ----------------------------------------- + +.toggle-media { + margin: $toggle-md-media-margin; + padding: $toggle-md-media-padding; + cursor: pointer; +} + + +// Toggle Background Track +// ----------------------------------------- + +.toggle-icon { + // bg track, when not checked + position: relative; + display: block; + width: $toggle-md-track-width; + height: $toggle-md-track-height; + pointer-events: none; + border-radius: $toggle-md-track-height; + + background-color: $toggle-md-track-background-color-off; + transition: background-color $toggle-md-transition-duration +} + + +// Toggle Knob +// ----------------------------------------- + +.toggle-icon:after { + // knob, when not checked + content: ''; + position: absolute; + top: ($toggle-md-handle-height - $toggle-md-track-height) / -2; + left: 0; + + width: $toggle-md-handle-width; + height: $toggle-md-handle-height; + + border-radius: $toggle-md-handle-border-radius; + box-shadow: $toggle-md-handle-box-shadow; + + background-color: $toggle-md-handle-background-color-off; + + transition-property: transform, background-color; + transition-duration: $toggle-md-transition-duration; +} + + +// Toggle Checked +// ----------------------------------------- + +ion-toggle[aria-checked=true] .toggle-icon { + // bg track, when not checked + background-color: $toggle-md-track-background-color-on; + + &:after { + // knob, when not checked + background-color: $toggle-md-handle-background-color-on; + transform: translate3d($toggle-md-track-width - $toggle-md-handle-width, 0, 0); + } +} + + +// Toggle Disabled +// ----------------------------------------- + +ion-toggle[aria-disabled=true] { + opacity: $toggle-md-disabled-opacity; + color: $toggle-md-disabled-text-color; + pointer-events: none; +} + + +// Material Design Color Mixin +// -------------------------------------------------- + +@mixin toggle-theme-md($color-name, $bg-on) { + + ion-toggle[#{$color-name}] { + + &[aria-checked=true] .toggle-icon { + background-color: lighten($bg-on, 25%); + } + + &[aria-checked=true] .toggle-icon:after { + background-color: $bg-on; + } + + } + +} + + +// Generate Material Design Toggle Auxiliary Colors +// -------------------------------------------------- + +@each $color-name, $value in $colors-md { + + @include toggle-theme-md($color-name, $value); + +} diff --git a/ionic/components/switch/switch.ts b/ionic/components/toggle/toggle.ts similarity index 62% rename from ionic/components/switch/switch.ts rename to ionic/components/toggle/toggle.ts index bdbce9c3cf..79c42f884a 100644 --- a/ionic/components/switch/switch.ts +++ b/ionic/components/toggle/toggle.ts @@ -1,4 +1,5 @@ -import {Component, Directive, ElementRef, Host, Optional, NgControl, Inject, forwardRef} from 'angular2/angular2'; +import {Component, Directive, ElementRef, Host, Optional, Inject, forwardRef} from 'angular2/core'; +import {NgControl} from 'angular2/common'; import {Form} from '../../util/form'; import {Config} from '../../config/config'; @@ -9,69 +10,69 @@ import {pointerCoord} from '../../util/dom'; * @private */ @Directive({ - selector: '.switch-media', + selector: '.toggle-media', host: { - '[class.switch-activated]': 'swtch.isActivated' + '[class.toggle-activated]': 'toggle.isActivated' } }) -class MediaSwitch { +class MediaToggle { /** * TODO - * @param {Switch} swtch TODO + * @param {Toggle} toggle TODO * @param {} elementRef TODO * @param {Config} config TODO */ constructor( - @Host() @Inject(forwardRef(() => Switch)) swtch: Switch, + @Host() @Inject(forwardRef(() => Toggle)) toggle: Toggle, elementRef: ElementRef ) { - swtch.switchEle = elementRef.nativeElement; - this.swtch = swtch; + toggle.toggleEle = elementRef.nativeElement; + this.toggle = toggle; } } /** - * @name Switch + * @name Toggle * @description - * A switch technically is the same thing as an HTML checkbox input, except it looks different and is easier to use on a touch device. Ionic prefers to wrap the checkbox input with the `