123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233
  1. import { ElementRef, EventEmitter, OnDestroy, QueryList, Renderer } from '@angular/core';
  2. import { App } from '../app/app';
  3. import { Config } from '../../config/config';
  4. import { DeepLinker } from '../../navigation/deep-linker';
  5. import { Overlay } from '../../navigation/overlay';
  6. import { Form } from '../../util/form';
  7. import { BaseInput } from '../../util/base-input';
  8. import { Item } from '../item/item';
  9. import { Option } from '../option/option';
  10. /**
  11. * @name Select
  12. * @description
  13. * The `ion-select` component is similar to an HTML `<select>` element, however,
  14. * Ionic's select component makes it easier for users to sort through and select
  15. * the preferred option or options. When users tap the select component, a
  16. * dialog will appear with all of the options in a large, easy to select list
  17. * for users.
  18. *
  19. * The select component takes child `ion-option` components. If `ion-option` is not
  20. * given a `value` attribute then it will use its text as the value.
  21. *
  22. * If `ngModel` is bound to `ion-select`, the selected value will be based on the
  23. * bound value of the model. Otherwise, the `selected` attribute can be used on
  24. * `ion-option` components.
  25. *
  26. * ### Interfaces
  27. *
  28. * By default, the `ion-select` uses the {@link ../../alert/AlertController AlertController API}
  29. * to open up the overlay of options in an alert. The interface can be changed to use the
  30. * {@link ../../action-sheet/ActionSheetController ActionSheetController API} or
  31. * {@link ../../popover/PopoverController PopoverController API} by passing `action-sheet` or `popover`,
  32. * respectively, to the `interface` property. Read on to the other sections for the limitations
  33. * of the different interfaces.
  34. *
  35. * ### Single Value: Radio Buttons
  36. *
  37. * The standard `ion-select` component allows the user to select only one
  38. * option. When selecting only one option the alert interface presents users with
  39. * a radio button styled list of options. The action sheet interface can only be
  40. * used with a single value select. If the number of options exceed 6, it will
  41. * use the `alert` interface even if `action-sheet` is passed. The `ion-select`
  42. * component's value receives the value of the selected option's value.
  43. *
  44. * ```html
  45. * <ion-item>
  46. * <ion-label>Gender</ion-label>
  47. * <ion-select [(ngModel)]="gender">
  48. * <ion-option value="f">Female</ion-option>
  49. * <ion-option value="m">Male</ion-option>
  50. * </ion-select>
  51. * </ion-item>
  52. * ```
  53. *
  54. * ### Multiple Value: Checkboxes
  55. *
  56. * By adding the `multiple="true"` attribute to `ion-select`, users are able
  57. * to select multiple options. When multiple options can be selected, the alert
  58. * overlay presents users with a checkbox styled list of options. The
  59. * `ion-select multiple="true"` component's value receives an array of all the
  60. * selected option values. In the example below, because each option is not given
  61. * a `value`, then it'll use its text as the value instead.
  62. *
  63. * Note: the `action-sheet` and `popover` interfaces will not work with a multi-value select.
  64. *
  65. * ```html
  66. * <ion-item>
  67. * <ion-label>Toppings</ion-label>
  68. * <ion-select [(ngModel)]="toppings" multiple="true">
  69. * <ion-option>Bacon</ion-option>
  70. * <ion-option>Black Olives</ion-option>
  71. * <ion-option>Extra Cheese</ion-option>
  72. * <ion-option>Mushrooms</ion-option>
  73. * <ion-option>Pepperoni</ion-option>
  74. * <ion-option>Sausage</ion-option>
  75. * </ion-select>
  76. * </ion-item>
  77. * ```
  78. *
  79. * ### Select Buttons
  80. * By default, the two buttons read `Cancel` and `OK`. Each button's text
  81. * can be customized using the `cancelText` and `okText` attributes:
  82. *
  83. * ```html
  84. * <ion-select okText="Okay" cancelText="Dismiss">
  85. * ...
  86. * </ion-select>
  87. * ```
  88. *
  89. * The `action-sheet` and `popover` interfaces do not have an `OK` button, clicking
  90. * on any of the options will automatically close the overlay and select
  91. * that value.
  92. *
  93. * ### Select Options
  94. *
  95. * Since `ion-select` uses the `Alert`, `Action Sheet` and `Popover` interfaces, options can be
  96. * passed to these components through the `selectOptions` property. This can be used
  97. * to pass a custom title, subtitle, css class, and more. See the
  98. * {@link ../../alert/AlertController/#create AlertController API docs},
  99. * {@link ../../action-sheet/ActionSheetController/#create ActionSheetController API docs}, and
  100. * {@link ../../popover/PopoverController/#create PopoverController API docs}
  101. * for the properties that each interface accepts.
  102. *
  103. * For example, to change the `mode` of the overlay, pass it into `selectOptions`.
  104. *
  105. * ```html
  106. * <ion-select [selectOptions]="selectOptions">
  107. * ...
  108. * </ion-select>
  109. * ```
  110. *
  111. * ```ts
  112. * this.selectOptions = {
  113. * title: 'Pizza Toppings',
  114. * subTitle: 'Select your toppings',
  115. * mode: 'md'
  116. * };
  117. * ```
  118. *
  119. * ### Object Value References
  120. *
  121. * When using objects for select values, it is possible for the identities of these objects to
  122. * change if they are coming from a server or database, while the selected value's identity
  123. * remains the same. For example, this can occur when an existing record with the desired object value
  124. * is loaded into the select, but the newly retrieved select options now have different identities. This will
  125. * result in the select appearing to have no value at all, even though the original selection in still intact.
  126. *
  127. * Using the `compareWith` `Input` is the solution to this problem
  128. *
  129. * ```html
  130. * <ion-item>
  131. * <ion-label>Employee</ion-label>
  132. * <ion-select [(ngModel)]="employee" [compareWith]="compareFn">
  133. * <ion-option *ngFor="let employee of employees" [value]="employee">{{employee.name}}</ion-option>
  134. * </ion-select>
  135. * </ion-item>
  136. * ```
  137. *
  138. * ```ts
  139. * compareFn(e1: Employee, e2: Employee): boolean {
  140. * return e1 && e2 ? e1.id === e2.id : e1 === e2;
  141. * }
  142. * ```
  143. *
  144. * @demo /docs/demos/src/select/
  145. */
  146. export declare class Select extends BaseInput<any> implements OnDestroy {
  147. private _app;
  148. config: Config;
  149. deepLinker: DeepLinker;
  150. _multi: boolean;
  151. _options: QueryList<Option>;
  152. _overlay: Overlay;
  153. _texts: string[];
  154. _text: string;
  155. _compareWith: (o1: any, o2: any) => boolean;
  156. /**
  157. * @input {string} The text to display on the cancel button. Default: `Cancel`.
  158. */
  159. cancelText: string;
  160. /**
  161. * @input {string} The text to display on the ok button. Default: `OK`.
  162. */
  163. okText: string;
  164. /**
  165. * @input {string} The text to display when the select is empty.
  166. */
  167. placeholder: string;
  168. /**
  169. * @input {any} Any additional options that the `alert` or `action-sheet` interface can take.
  170. * See the [AlertController API docs](../../alert/AlertController/#create) and the
  171. * [ActionSheetController API docs](../../action-sheet/ActionSheetController/#create) for the
  172. * create options for each interface.
  173. */
  174. selectOptions: any;
  175. /**
  176. * @input {string} The interface the select should use: `action-sheet`, `popover` or `alert`. Default: `alert`.
  177. */
  178. interface: string;
  179. /**
  180. * @input {string} The text to display instead of the selected option's value.
  181. */
  182. selectedText: string;
  183. /**
  184. * @input {Function} The function that will be called to compare object values
  185. */
  186. compareWith: (o1: any, o2: any) => boolean;
  187. /**
  188. * @output {any} Emitted when the selection was cancelled.
  189. */
  190. ionCancel: EventEmitter<Select>;
  191. constructor(_app: App, form: Form, config: Config, elementRef: ElementRef, renderer: Renderer, item: Item, deepLinker: DeepLinker);
  192. _click(ev: UIEvent): void;
  193. _keyup(): void;
  194. /**
  195. * @hidden
  196. */
  197. getValues(): any[];
  198. /**
  199. * Open the select interface.
  200. */
  201. open(ev?: UIEvent): void;
  202. /**
  203. * Close the select interface.
  204. */
  205. close(): Promise<any>;
  206. /**
  207. * @input {boolean} If true, the element can accept multiple values.
  208. */
  209. multiple: any;
  210. /**
  211. * @hidden
  212. */
  213. readonly text: string | string[];
  214. /**
  215. * @private
  216. */
  217. options: QueryList<Option>;
  218. _inputShouldChange(val: string[] | string): boolean;
  219. /**
  220. * TODO: REMOVE THIS
  221. * @hidden
  222. */
  223. _inputChangeEvent(): any;
  224. /**
  225. * @hidden
  226. */
  227. _updateText(): void;
  228. /**
  229. * @hidden
  230. */
  231. _inputUpdated(): void;
  232. }