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 | }
|