123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238 |
- import { Injectable } from '@angular/core';
- import { Alert } from './alert';
- import { App } from '../app/app';
- import { Config } from '../../config/config';
- /**
- * @name AlertController
- * @description
- * An Alert is a dialog that presents users with information or collects
- * information from the user using inputs. An alert appears on top
- * of the app's content, and must be manually dismissed by the user before
- * they can resume interaction with the app. It can also optionally have a
- * `title`, `subTitle` and `message`.
- *
- * You can pass all of the alert's options in the first argument of
- * the create method: `create(opts)`. Otherwise the alert's instance
- * has methods to add options, such as `setTitle()` or `addButton()`.
- *
- *
- * ### Alert Buttons
- *
- * In the array of `buttons`, each button includes properties for its `text`,
- * and optionally a `handler`. If a handler returns `false` then the alert
- * will not automatically be dismissed when the button is clicked. All
- * buttons will show up in the order they have been added to the `buttons`
- * array, from left to right. Note: The right most button (the last one in
- * the array) is the main button.
- *
- * Optionally, a `role` property can be added to a button, such as `cancel`.
- * If a `cancel` role is on one of the buttons, then if the alert is
- * dismissed by tapping the backdrop, then it will fire the handler from
- * the button with a cancel role.
- *
- *
- * ### Alert Inputs
- *
- * Alerts can also include several different inputs whose data can be passed
- * back to the app. Inputs can be used as a simple way to prompt users for
- * information. Radios, checkboxes and text inputs are all accepted, but they
- * cannot be mixed. For example, an alert could have all radio button inputs,
- * or all checkbox inputs, but the same alert cannot mix radio and checkbox
- * inputs. Do note however, different types of "text"" inputs can be mixed,
- * such as `url`, `email`, `text`, etc. If you require a complex form UI
- * which doesn't fit within the guidelines of an alert then we recommend
- * building the form within a modal instead.
- *
- *
- * @usage
- * ```ts
- * import { AlertController } from 'ionic-angular';
- *
- * constructor(public alertCtrl: AlertController) { }
- *
- * presentAlert() {
- * const alert = this.alertCtrl.create({
- * title: 'Low battery',
- * subTitle: '10% of battery remaining',
- * buttons: ['Dismiss']
- * });
- * alert.present();
- * }
- *
- * presentConfirm() {
- * const alert = this.alertCtrl.create({
- * title: 'Confirm purchase',
- * message: 'Do you want to buy this book?',
- * buttons: [
- * {
- * text: 'Cancel',
- * role: 'cancel',
- * handler: () => {
- * console.log('Cancel clicked');
- * }
- * },
- * {
- * text: 'Buy',
- * handler: () => {
- * console.log('Buy clicked');
- * }
- * }
- * ]
- * });
- * alert.present();
- * }
- *
- * presentPrompt() {
- * const alert = this.alertCtrl.create({
- * title: 'Login',
- * inputs: [
- * {
- * name: 'username',
- * placeholder: 'Username'
- * },
- * {
- * name: 'password',
- * placeholder: 'Password',
- * type: 'password'
- * }
- * ],
- * buttons: [
- * {
- * text: 'Cancel',
- * role: 'cancel',
- * handler: data => {
- * console.log('Cancel clicked');
- * }
- * },
- * {
- * text: 'Login',
- * handler: data => {
- * if (User.isValid(data.username, data.password)) {
- * // logged in!
- * } else {
- * // invalid login
- * return false;
- * }
- * }
- * }
- * ]
- * });
- * alert.present();
- * }
- * ```
- * @advanced
- *
- *
- * Alert options
- *
- * | Property | Type | Description |
- * |-----------------------|-----------|------------------------------------------------------------------------------|
- * | title | `string` | The title for the alert. |
- * | subTitle | `string` | The subtitle for the alert. |
- * | message | `string` | The message for the alert. |
- * | cssClass | `string` | Additional classes for custom styles, separated by spaces. |
- * | inputs | `array` | An array of inputs for the alert. See input options. |
- * | buttons | `array` | An array of buttons for the alert. See buttons options. |
- * | enableBackdropDismiss | `boolean` | Whether the alert should be dismissed by tapping the backdrop. Default true. |
- *
- *
- * Input options
- *
- * | Property | Type | Description |
- * |-------------|-----------|-----------------------------------------------------------------|
- * | type | `string` | The type the input should be: text, tel, number, etc. |
- * | name | `string` | The name for the input. |
- * | placeholder | `string` | The input's placeholder (for textual/numeric inputs) |
- * | value | `string` | The input's value. |
- * | label | `string` | The input's label (only for radio/checkbox inputs) |
- * | checked | `boolean` | Whether or not the input is checked. |
- * | id | `string` | The input's id. |
- *
- * Button options
- *
- * | Property | Type | Description |
- * |----------|----------|-----------------------------------------------------------------|
- * | text | `string` | The buttons displayed text. |
- * | handler | `any` | Emitted when the button is pressed. |
- * | cssClass | `string` | An additional CSS class for the button. |
- * | role | `string` | The buttons role, null or `cancel`. |
- *
- * ### Dismissing And Async Navigation
- *
- * After an alert has been dismissed, the app may need to also transition
- * to another page depending on the handler's logic. However, because multiple
- * transitions were fired at roughly the same time, it's difficult for the
- * nav controller to cleanly animate multiple transitions that may
- * have been kicked off asynchronously. This is further described in the
- * [`Nav Transition Promises`](../../nav/NavController) section. For alerts,
- * this means it's best to wait for the alert to finish its transition
- * out before starting a new transition on the same nav controller.
- *
- * In the example below, after the alert button has been clicked, its handler
- * waits on async operation to complete, *then* it uses `pop` to navigate
- * back a page in the same stack. The potential problem is that the async operation
- * may have been completed before the alert has even finished its transition
- * out. In this case, it's best to ensure the alert has finished its transition
- * out first, *then* start the next transition.
- *
- * ```ts
- * const alert = this.alertCtrl.create({
- * title: 'Hello',
- * buttons: [{
- * text: 'Ok',
- * handler: () => {
- * // user has clicked the alert button
- * // begin the alert's dismiss transition
- * const navTransition = alert.dismiss();
- *
- * // start some async method
- * someAsyncOperation().then(() => {
- * // once the async operation has completed
- * // then run the next nav transition after the
- * // first transition has finished animating out
- *
- * navTransition.then(() => {
- * this.nav.pop();
- * });
- * });
- * return false;
- * }
- * }]
- * });
- *
- * alert.present();
- * ```
- *
- * It's important to note that the handler returns `false`. A feature of
- * button handlers is that they automatically dismiss the alert when their button
- * was clicked, however, we'll need more control regarding the transition. Because
- * the handler returns `false`, then the alert does not automatically dismiss
- * itself. Instead, you now have complete control of when the alert has finished
- * transitioning, and the ability to wait for the alert to finish transitioning
- * out before starting a new transition.
- *
- *
- * @demo /docs/demos/src/alert/
- */
- export class AlertController {
- constructor(_app, config) {
- this._app = _app;
- this.config = config;
- }
- /**
- * Display an alert with a title, inputs, and buttons
- * @param {AlertOptions} opts Alert. See the table below
- */
- create(opts = {}) {
- return new Alert(this._app, opts, this.config);
- }
- }
- AlertController.decorators = [
- { type: Injectable },
- ];
- /** @nocollapse */
- AlertController.ctorParameters = () => [
- { type: App, },
- { type: Config, },
- ];
- //# sourceMappingURL=alert-controller.js.map
|