diff --git a/gulpfile.js b/gulpfile.js index 665ae21e68..94f0c2d624 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -18,7 +18,9 @@ function getBabelOptions(moduleName, moduleType) { modules: moduleType || "system", moduleIds: true, getModuleId: function(name) { - if (moduleName === "index") return moduleName; + if (moduleName == "e2e"){ + return name.replace(/\S*\/test\/[^\/]*\//, ''); + } return moduleName + '/' + name.split('/test').join(''); } @@ -204,7 +206,7 @@ gulp.task('e2e', function() { var buildTest = lazypipe() //.pipe(traceur, traceurOptions) .pipe(tsc, tscOptions, null, tscReporter) - .pipe(babel, getBabelOptions('index')) + .pipe(babel, getBabelOptions('e2e')) var buildE2ETest = lazypipe() //.pipe(traceur, traceurOptions) diff --git a/ionic/components/action-menu/action-menu.ts b/ionic/components/action-menu/action-menu.ts index 257b27f05a..11a50eb9a5 100644 --- a/ionic/components/action-menu/action-menu.ts +++ b/ionic/components/action-menu/action-menu.ts @@ -16,12 +16,12 @@ import * as util from 'ionic/util'; /** * @name ActionMenu - * @classdesc + * @description * The Action Menu is a slide-up pane that lets the user choose from a set of options. Dangerous options are made obvious. * * There are easy ways to cancel out of the action sheet, such as tapping the backdrop or even hitting escape on the keyboard for desktop testing. * - * @example + * @usage * ```ts * openMenu() { * diff --git a/ionic/components/app/app.ts b/ionic/components/app/app.ts index 61283f11d9..388b152c5a 100644 --- a/ionic/components/app/app.ts +++ b/ionic/components/app/app.ts @@ -13,7 +13,24 @@ import {Popup} from '../popup/popup'; import {FocusHolder} from '../form/focus-holder'; /** - * TODO + * @name IonicApp + * @description + * The base Ionic class that your app inherits from. By inheriting from this class, you will have access to the Ionic API. + * + * @usage + * ```js + * @App({ + * templateUrl: '/app/app.html', + * }) + * class MyApp { + * + * constructor(app: IonicApp) { + * this.app = app; + * } + * } + * ``` + * Note: Ionic sets `ion-app` as the selector for the app. Setting a custom selector will override this and cause CSS problems. + * */ export class IonicApp { diff --git a/ionic/components/app/test/native/index.ts b/ionic/components/app/test/native/index.ts index 474d23e509..e2bbea6418 100644 --- a/ionic/components/app/test/native/index.ts +++ b/ionic/components/app/test/native/index.ts @@ -3,56 +3,31 @@ import {Control, ControlGroup} from 'angular2/forms'; import {App, Http} from 'ionic/ionic'; -import {Camera, Geolocation, Vibration, Battery} from 'ionic/ionic'; - -let testUrl = 'https://ionic-api-tester.herokuapp.com/json'; -let testUrl404 = 'https://ionic-api-tester.herokuapp.com/404'; +import {Camera, Geolocation, Vibration, Battery, Device} from 'ionic/ionic'; +import {CameraPage} from 'pages/camera'; +import {BatteryPage} from 'pages/battery'; +import {ContactsPage} from 'pages/contacts'; +import {DevicePage} from 'pages/device'; +import {DeviceMotionPage} from 'pages/device-motion'; +import {GeolocationPage} from 'pages/geolocation'; +import {VibrationPage} from 'pages/vibration'; @App({ templateUrl: 'main.html' }) class IonicApp { constructor() { - } - doGetLocation() { - console.log('Getting location'); - this.gettingLocation = true; - Geolocation.getCurrentPosition().then((pos) => { - this.gettingLocation = false; - console.log('Got location', pos); - this.location = pos; - }, (err) => { - this.gettingLocation = false; - console.error('Unable to get location', err); - }); - } - doTrackLocation() { - this.gettingTrackLocation = true; - Geolocation.watchPosition().source.subscribe((pos) => { - this.gettingTrackLocation = false; - console.log('Got location', pos); - this.trackLocation = pos; - }, (err) => { - this.gettingTrackLocation = false; - console.error('Unable to get location', pos); - }); - } - getPicture() { - Camera.getPicture({ - - }).then(data => { - console.log('Data', data); - }, err => { - alert('Unable to take picture') - }) - } - doVibrate() { - Vibration.vibrate(1000); - } - doBatteryStatus() { - Battery.getStatus().then((battery) => { - this.battery = battery; - }); + this.firstPage = CameraPage; + console.log('First page', CameraPage); + this.plugins = [ + {title: 'Camera', page: CameraPage}, + {title: 'Device', page: DevicePage}, + {title: 'Device Motion', page: DeviceMotionPage}, + {title: 'Geolocation', page: GeolocationPage}, + {title: 'Contacts', page: ContactsPage}, + {title: 'Battery', page: BatteryPage}, + {title: 'Vibration', page: VibrationPage}, + ] } } diff --git a/ionic/components/app/test/native/main.html b/ionic/components/app/test/native/main.html index 48c2948f6b..4543760755 100644 --- a/ionic/components/app/test/native/main.html +++ b/ionic/components/app/test/native/main.html @@ -1,32 +1,12 @@ - - -

Camera

- -

Geolocation

- -
- Fetching location... - {{location.coords.latitude}}, {{location.coords.longitude}} -
- -
- Fetching location... - {{trackLocation.coords.latitude}}, {{trackLocation.coords.longitude}} -
-

Vibration

- -

Battery

- -
- Battery charging: {{battery.charging}}
- Battery level: {{battery.level * 100}}%
- Battery charging time: {{battery.chargingTime}}s
- Battery discharging time: {{battery.dischargingTime}}s
-
-

Contacts

-
- -
- + + Plugins + + + + {{p.title}} + + - + + + diff --git a/ionic/components/app/test/native/pages/battery.ts b/ionic/components/app/test/native/pages/battery.ts new file mode 100644 index 0000000000..50632e5cd1 --- /dev/null +++ b/ionic/components/app/test/native/pages/battery.ts @@ -0,0 +1,31 @@ +import {IonicView} from 'ionic/ionic'; + + +@IonicView({ + template: ` + + + Battery + + +

Battery

+ +
+ Battery charging: {{battery.charging}}
+ Battery level: {{battery.level * 100}}%
+ Battery charging time: {{battery.chargingTime}}s
+ Battery discharging time: {{battery.dischargingTime}}s
+
+ + + ` +}) +export class BatteryPage { + doBatteryStatus() { + Battery.getStatus().then((battery) => { + this.battery = battery; + }); + } +} diff --git a/ionic/components/app/test/native/pages/camera.ts b/ionic/components/app/test/native/pages/camera.ts new file mode 100644 index 0000000000..2ec0970cac --- /dev/null +++ b/ionic/components/app/test/native/pages/camera.ts @@ -0,0 +1,32 @@ +import {IonicView} from 'ionic/ionic'; + +import {Camera} from 'ionic/ionic'; + +@IonicView({ + template: ` + + + Camera + + +

Camera

+ + + ` +}) +export class CameraPage { + constructor() { + + } + getPicture() { + Camera.getPicture({ + + }).then(data => { + console.log('Data', data); + }, err => { + alert('Unable to take picture') + }) + } +} diff --git a/ionic/components/app/test/native/pages/contacts.ts b/ionic/components/app/test/native/pages/contacts.ts new file mode 100644 index 0000000000..ac3215b544 --- /dev/null +++ b/ionic/components/app/test/native/pages/contacts.ts @@ -0,0 +1,22 @@ +import {IonicView} from 'ionic/ionic'; + +import {Contacts} from 'ionic/ionic'; + +@IonicView({ + template: ` + + + Contacts + + +

Contacts

+
+
+ + ` +}) +export class ContactsPage { + +} diff --git a/ionic/components/app/test/native/pages/device-motion.ts b/ionic/components/app/test/native/pages/device-motion.ts new file mode 100644 index 0000000000..87ca4e2f95 --- /dev/null +++ b/ionic/components/app/test/native/pages/device-motion.ts @@ -0,0 +1,18 @@ +import {IonicView} from 'ionic/ionic'; + + +@IonicView({ + template: ` + + + Device Motion + + + + ` +}) +export class DeviceMotionPage { + +} diff --git a/ionic/components/app/test/native/pages/device.ts b/ionic/components/app/test/native/pages/device.ts new file mode 100644 index 0000000000..518f2f2b49 --- /dev/null +++ b/ionic/components/app/test/native/pages/device.ts @@ -0,0 +1,26 @@ +import {IonicView} from 'ionic/ionic'; + + +@IonicView({ + template: ` + + + Vibration + + +

Device

+ +
+
+ + ` +}) +export class DevicePage { + + doDevice() { + let device = Device.getDevice(); + console.log('Got device', device); + } +} diff --git a/ionic/components/app/test/native/pages/geolocation.ts b/ionic/components/app/test/native/pages/geolocation.ts new file mode 100644 index 0000000000..7a55a74686 --- /dev/null +++ b/ionic/components/app/test/native/pages/geolocation.ts @@ -0,0 +1,52 @@ +import {IonicView} from 'ionic/ionic'; + +import {Geolocation} from 'ionic/ionic'; + +@IonicView({ + template: ` + + + Vibration + + +

Geolocation

+ +
+ Fetching location... + {{location.coords.latitude}}, {{location.coords.longitude}} +
+ +
+ Fetching location... + {{trackLocation.coords.latitude}}, {{trackLocation.coords.longitude}} +
+ + ` +}) +export class GeolocationPage { + doGetLocation() { + console.log('Getting location'); + this.gettingLocation = true; + Geolocation.getCurrentPosition().then((pos) => { + this.gettingLocation = false; + console.log('Got location', pos); + this.location = pos; + }, (err) => { + this.gettingLocation = false; + console.error('Unable to get location', err); + }); + } + doTrackLocation() { + this.gettingTrackLocation = true; + Geolocation.watchPosition().source.subscribe((pos) => { + this.gettingTrackLocation = false; + console.log('Got location', pos); + this.trackLocation = pos; + }, (err) => { + this.gettingTrackLocation = false; + console.error('Unable to get location', pos); + }); + } +} diff --git a/ionic/components/app/test/native/pages/vibration.ts b/ionic/components/app/test/native/pages/vibration.ts new file mode 100644 index 0000000000..7747bfe8f8 --- /dev/null +++ b/ionic/components/app/test/native/pages/vibration.ts @@ -0,0 +1,23 @@ +import {IonicView} from 'ionic/ionic'; + +import {Vibration} from 'ionic/ionic'; + +@IonicView({ + template: ` + + + Vibration + + +

Vibration

+ + + ` +}) +export class VibrationPage { + doVibrate() { + Vibration.vibrate(1000); + } +} diff --git a/ionic/components/checkbox/checkbox.ts b/ionic/components/checkbox/checkbox.ts index 1893946d40..b59e05cf0d 100644 --- a/ionic/components/checkbox/checkbox.ts +++ b/ionic/components/checkbox/checkbox.ts @@ -13,12 +13,12 @@ import {IonicComponent, IonicView} from '../../config/annotations'; /** * @name ionCheckbox - * @classdesc + * @description * The checkbox is no different than the HTML checkbox input, except it's styled differently * * See the [Angular 2 Docs](https://angular.io/docs/js/latest/api/forms/) for more info on forms and input. * - * @example + * @usage * ```html * * HTML5 diff --git a/ionic/components/content/content.ts b/ionic/components/content/content.ts index 3e93ae6c46..63d3b4f75e 100644 --- a/ionic/components/content/content.ts +++ b/ionic/components/content/content.ts @@ -8,8 +8,19 @@ import {hasFocusedTextInput} from '../../util/dom'; /** * @name ionContent - * @classdesc - * TODO + * @description + * The ionContent 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. + * + * You can implement pull-to-refresh with the ionRefresher component. + * + * @usage + * ```html + * + * Add your content here! + * + * ``` * */ @Component({ @@ -23,9 +34,8 @@ import {hasFocusedTextInput} from '../../util/dom'; }) export class Content extends Ion { /** - * TODO - * @param {ElementRef} elementRef TODO - * @param {IonicConfig} config TODO + * @param {ElementRef} elementRef A reference to the component's DOM element. + * @param {IonicConfig} config The config object to change content's default settings. */ constructor(elementRef: ElementRef, config: IonicConfig) { super(elementRef, config); @@ -34,6 +44,7 @@ export class Content extends Ion { /** * TODO + * @private */ onInit() { super.onInit(); @@ -78,8 +89,8 @@ export class Content extends Ion { /** * Scroll to the specified position. - * @param {TODO} x TODO - * @param {TODO} y TODO + * @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. * @param {TODO} tolerance TODO * @returns {TODO} TODO diff --git a/ionic/components/form/input.ts b/ionic/components/form/input.ts index 07d52a04a4..746526b931 100644 --- a/ionic/components/form/input.ts +++ b/ionic/components/form/input.ts @@ -11,11 +11,22 @@ let activeInput = null; let lastInput = null; /** - * TODO + * @name ionInput + * @description + * The ionInput component is used to focus text input elements. + * + * The `focusNext()` and `focusPrevious()` methods make it easy to focus input elements across all devices. + * + * @usage + * ```html + * + * Name + * + * + * ``` */ export class IonInput extends Ion { /** - * TODO * @param {TODO} input TODO */ static registerInput(input) { @@ -31,22 +42,21 @@ export class IonInput extends Ion { } /** - * TODO + * Focuses the previous input element, if it exists. */ static focusPrevious() { this.focusMove(-1); } /** - * TODO + * Focuses the next input element, if it exists. */ static focusNext() { this.focusMove(1); } /** - * TODO - * @param {TODO} inc TODO + * @param {Number} inc TODO */ static focusMove(inc) { let input = activeInput || lastInput; @@ -61,8 +71,7 @@ export class IonInput extends Ion { } /** - * TODO - * @returns {TODO} TODO + * @returns {Number} The ID of the next input element. */ static nextId() { return ++inputItemIds; diff --git a/ionic/components/item/item-swipe-buttons.ts b/ionic/components/item/item-swipe-buttons.ts index c2199a87bf..911b1808dd 100644 --- a/ionic/components/item/item-swipe-buttons.ts +++ b/ionic/components/item/item-swipe-buttons.ts @@ -5,10 +5,10 @@ import {SlideGesture} from 'ionic/gestures/slide-gesture'; /** * @name ionPrimarySwipeButtons - * @classdesc + * @description * Creates a swipeable button inside a list item, that is visible when the item is swiped to the left by the user. Swiped open buttons can be hidden with `setOpen(false)`. * - * @example + * @usage * TODO */ @Directive({ diff --git a/ionic/components/item/item.ts b/ionic/components/item/item.ts index 8d4d6847b2..5e10ab75e4 100644 --- a/ionic/components/item/item.ts +++ b/ionic/components/item/item.ts @@ -6,11 +6,11 @@ import {dom} from 'ionic/util'; /** * @name ionItem - * @classdesc + * @description * Creates a list-item that can easily be swiped, * deleted, reordered, edited, and more. * - * @example + * @usage * ```html * * diff --git a/ionic/components/list/list.ts b/ionic/components/list/list.ts index 6eb8f2ee2e..0e33dad135 100644 --- a/ionic/components/list/list.ts +++ b/ionic/components/list/list.ts @@ -8,7 +8,7 @@ import * as util from 'ionic/util'; /** * @name ionList - * @classdesc + * @description * The List is a widely used interface element in almost any mobile app, and can include * content ranging from basic text all the way to buttons, toggles, icons, and thumbnails. * diff --git a/ionic/components/modal/modal.ts b/ionic/components/modal/modal.ts index 30459cb6a7..680dbc899e 100644 --- a/ionic/components/modal/modal.ts +++ b/ionic/components/modal/modal.ts @@ -6,10 +6,10 @@ import * as util from 'ionic/util'; /** * @name ionModal - * @classdesc + * @description * The Modal is a content pane that can go over the user's main view temporarily. Usually used for making a choice or editing an item. * - * @example + * @usage * ```ts * class MyApp { * diff --git a/ionic/components/popup/popup.ts b/ionic/components/popup/popup.ts index 72ea5e0472..337658db56 100644 --- a/ionic/components/popup/popup.ts +++ b/ionic/components/popup/popup.ts @@ -8,12 +8,12 @@ import * as util from 'ionic/util'; /** * @name ionPopup - * @classdesc + * @description * The Ionic Popup service allows programmatically creating and showing popup windows that require the user to respond in order to continue. * * The popup system has support for more flexible versions of the built in `alert()`, `prompt()`, and `confirm()` functions that users are used to, in addition to allowing popups with completely custom content and look. * - * @example + * @usage * ```ts * class myApp { * diff --git a/ionic/components/radio/radio.ts b/ionic/components/radio/radio.ts index 70f5ecab50..4ea0a49376 100644 --- a/ionic/components/radio/radio.ts +++ b/ionic/components/radio/radio.ts @@ -8,7 +8,7 @@ import {ListHeader} from '../list/list'; /** * @name ionRadioGroup - * @classdesc + * @description * A radio group is a group of radio components. * * Selecting a radio button in the group unselects all others in the group. @@ -16,8 +16,8 @@ import {ListHeader} from '../list/list'; * New radios can be registered dynamically. * * See the [Angular 2 Docs](https://angular.io/docs/js/latest/api/forms/) for more info on forms and input. - * - * @example + * + * @usage * ```html * * @@ -151,12 +151,12 @@ export class RadioGroup extends Ion { /** * @name ionRadio - * @classdesc - * A single radio component. + * @description + * A single radio component. * * See the [Angular 2 Docs](https://angular.io/docs/js/latest/api/forms/) for more info on forms and input. * - * @example + * @usage * ```html * * Radio Label diff --git a/ionic/components/radio/radio.ts.orig b/ionic/components/radio/radio.ts.orig new file mode 100644 index 0000000000..44095487aa --- /dev/null +++ b/ionic/components/radio/radio.ts.orig @@ -0,0 +1,246 @@ +import {ElementRef, Host, Optional, NgControl, Query, QueryList} from 'angular2/angular2'; + +import {IonicDirective, IonicComponent, IonicView} from '../../config/annotations'; +import {IonicConfig} from '../../config/config'; +import {Ion} from '../ion'; +import {ListHeader} from '../list/list'; + + +/** + * @name ionRadioGroup + * @description + * A radio group is a group of radio components. + * + * Selecting a radio button in the group unselects all others in the group. + * + * New radios can be registered dynamically. + * + * See the [Angular 2 Docs](https://angular.io/docs/js/latest/api/forms/) for more info on forms and input. +<<<<<<< HEAD + * + * @example +======= + * + * @usage +>>>>>>> origin/master + * ```html + * + * + * + * Clientside + * + * + * + * Ember + * + * + * + * Angular 1 + * + * + * + * Angular 2 + * + * + * + * React + * + * + * + * ``` +*/ + +@IonicDirective({ + selector: 'ion-radio-group', + host: { + 'class': 'list', + 'role': 'radiogroup', + '[attr.aria-activedescendant]': 'activeId', + '[attr.aria-describedby]': 'describedById' + } +}) +export class RadioGroup extends Ion { + radios: Array = []; + + /** + * TODO + * @param {ElementRef} elementRef TODO + * @param {IonicConfig} config TODO + * @param {NgControl=} ngControl TODO + * @param {QueryList} headerQuery TODO + */ + constructor( + elementRef: ElementRef, + config: IonicConfig, + @Optional() ngControl: NgControl, + @Query(ListHeader) private headerQuery: QueryList + ) { + super(elementRef, config); + this.id = ++radioGroupIds; + this.radioIds = -1; + this.onChange = (_) => {}; + this.onTouched = (_) => {}; + + if (ngControl) ngControl.valueAccessor = this; + } + + onInit() { + let header = this.headerQuery.first; + if (header) { + if (!header.id) { + header.id = 'radio-header-' + this.id; + } + this.describedById = header.id; + } + } + + /** + * Register the specified radio button with the radio group. + * @param {RadioButton} radio The radio button to register. + */ + registerRadio(radio) { + radio.id = radio.id || ('radio-' + this.id + '-' + (++this.radioIds)); + this.radios.push(radio); + + if (radio.checked) { + this.value = radio.value; + this.activeId = radio.id; + } + } + + /** + * Update which radio button in the group is checked, unchecking all others. + * @param {RadioButton} checkedRadio The radio button to check. + */ + update(checkedRadio) { + this.value = checkedRadio.value; + this.activeId = checkedRadio.id; + + for (let radio of this.radios) { + radio.checked = (radio === checkedRadio); + } + + this.onChange(this.value); + } + + /** + * @private + * Angular2 Forms API method called by the model (Control) on change to update + * the checked value. + * https://github.com/angular/angular/blob/master/modules/angular2/src/forms/directives/shared.ts#L34 + */ + writeValue(value) { + this.value = value; + for (let radio of this.radios) { + radio.checked = (radio.value == value); + } + } + + /** + * @private + * Angular2 Forms API method called by the view (NgControl) to register the + * onChange event handler that updates the model (Control). + * https://github.com/angular/angular/blob/master/modules/angular2/src/forms/directives/shared.ts#L27 + * @param {Function} fn the onChange event handler. + */ + registerOnChange(fn) { this.onChange = fn; } + + /** + * @private + * Angular2 Forms API method called by the the view (NgControl) to register + * the onTouched event handler that marks the model (Control) as touched. + * @param {Function} fn onTouched event handler. + */ + registerOnTouched(fn) { this.onTouched = fn; } +} + +/** + * @name ionRadio +<<<<<<< HEAD + * @classdesc + * A single radio component. +======= + * @description + * A single radio component. +>>>>>>> origin/master + * + * See the [Angular 2 Docs](https://angular.io/docs/js/latest/api/forms/) for more info on forms and input. + * + * @usage + * ```html + * + * Radio Label + * + * ``` + * + */ +@IonicComponent({ + selector: 'ion-radio', + properties: [ + 'value', + 'checked', + 'disabled', + 'id' + ], + host: { + 'class': 'item', + 'role': 'radio', + 'tappable': 'true', + '[attr.id]': 'id', + '[attr.tab-index]': 'tabIndex', + '[attr.aria-checked]': 'checked', + '[attr.aria-disabled]': 'disabled', + '[attr.aria-labelledby]': 'labelId', + '(^click)': 'click($event)' + } +}) +@IonicView({ + template: + '' + + '' + + '' + + '
' + + '
' + + '
' +}) +export class RadioButton extends Ion { + /** + * Radio button constructor. + * @param {RadioGroup=} group The parent radio group, if any. + * @param {ElementRef} elementRef TODO + * @param {IonicConfig} config TODO + */ + constructor( + @Host() @Optional() group: RadioGroup, + elementRef: ElementRef, + config: IonicConfig + ) { + super(elementRef, config) + this.group = group; + this.tabIndex = 0; + } + + onInit() { + super.onInit(); + this.group.registerRadio(this); + this.labelId = 'label-' + this.id; + } + + click(ev) { + ev.preventDefault(); + ev.stopPropagation(); + this.check(); + } + + /** + * Update the checked state of this radio button. + * TODO: Call this toggle? Since unchecks as well + */ + check() { + this.checked = !this.checked; + this.group.update(this); + } + +} + +let radioGroupIds = -1; diff --git a/ionic/components/scroll/pull-to-refresh.ts b/ionic/components/scroll/pull-to-refresh.ts index 46e91714db..637389776b 100644 --- a/ionic/components/scroll/pull-to-refresh.ts +++ b/ionic/components/scroll/pull-to-refresh.ts @@ -7,20 +7,18 @@ import {raf, ready, CSS} from 'ionic/util/dom'; /** * @name ionRefresher - * @classdesc + * @description * Allows you to add pull-to-refresh to an ionContent component. * * Place it as the first child of your ionContent or ionScroll element. * * When refreshing is complete, call `refresher.complete()` from your controller. * - * @example - * ```html - * - * ``` - * - * @example + * @usage * ```ts + * + * + * * doRefresh(refresher) { * console.log('Refreshing!', refresher); * diff --git a/ionic/components/switch/switch.ts b/ionic/components/switch/switch.ts index 0d6efeb9f0..cf0ec38ea0 100644 --- a/ionic/components/switch/switch.ts +++ b/ionic/components/switch/switch.ts @@ -49,23 +49,21 @@ class MediaSwitch { /** * @name ionSwitch - * @classdesc + * @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