1 | import { AfterContentInit, AfterViewInit, ChangeDetectorRef, ComponentRef, ElementRef, EventEmitter, OnDestroy, QueryList, SimpleChanges, OnChanges, Renderer2, NgZone } from '@angular/core';
|
2 | import { NgClass } from '@angular/common';
|
3 | import { ControlValueAccessor } from '@angular/forms';
|
4 | import { Subject, BehaviorSubject } from 'rxjs';
|
5 | import { NbStatusService } from '../../services/status.service';
|
6 | import { NbAdjustableConnectedPositionStrategy, NbPosition, NbPositionBuilderService } from '../cdk/overlay/overlay-position';
|
7 | import { NbOverlayRef, NbPortalDirective, NbScrollStrategy } from '../cdk/overlay/mapping';
|
8 | import { NbOverlayService } from '../cdk/overlay/overlay-service';
|
9 | import { NbTriggerStrategy, NbTriggerStrategyBuilderService } from '../cdk/overlay/overlay-trigger';
|
10 | import { NbFocusKeyManager, NbFocusKeyManagerFactoryService } from '../cdk/a11y/focus-key-manager';
|
11 | import { NbComponentSize } from '../component-size';
|
12 | import { NbComponentShape } from '../component-shape';
|
13 | import { NbComponentOrCustomStatus } from '../component-status';
|
14 | import { NbOptionComponent } from '../option/option.component';
|
15 | import { NbBooleanInput } from '../helpers';
|
16 | import { NbFormFieldControl, NbFormFieldControlConfig } from '../form-field/form-field-control';
|
17 | import { NbFocusMonitor } from '../cdk/a11y/a11y.module';
|
18 | import { NbScrollStrategies } from '../cdk/adapter/block-scroll-strategy-adapter';
|
19 | export declare type NbSelectCompareFunction<T = any> = (v1: any, v2: any) => boolean;
|
20 | export declare type NbSelectAppearance = 'outline' | 'filled' | 'hero';
|
21 | export declare class NbSelectLabelComponent {
|
22 | }
|
23 | export declare function nbSelectFormFieldControlConfigFactory(): NbFormFieldControlConfig;
|
24 | /**
|
25 | * The `NbSelectComponent` provides a capability to select one of the passed items.
|
26 | *
|
27 | * @stacked-example(Showcase, select/select-showcase.component)
|
28 | *
|
29 | * ### Installation
|
30 | *
|
31 | * Import `NbSelectModule` to your feature module.
|
32 | * ```ts
|
33 | * @NgModule({
|
34 | * imports: [
|
35 | * // ...
|
36 | * NbSelectModule,
|
37 | * ],
|
38 | * })
|
39 | * export class PageModule { }
|
40 | * ```
|
41 | * ### Usage
|
42 | *
|
43 | * If you want to use it as the multi-select control you have to mark it as `multiple`.
|
44 | * In this case, `nb-select` will work only with arrays - accept arrays and propagate arrays.
|
45 | *
|
46 | * @stacked-example(Multiple, select/select-multiple.component)
|
47 | *
|
48 | * Items without values will clean the selection. Both `null` and `undefined` values will also clean the selection.
|
49 | *
|
50 | * @stacked-example(Clean selection, select/select-clean.component)
|
51 | *
|
52 | * Select may be bounded using `selected` input:
|
53 | *
|
54 | * ```html
|
55 | * <nb-select [(selected)]="selected"></nb-selected>
|
56 | * ```
|
57 | *
|
58 | * Or you can bind control with form controls or ngModel:
|
59 | *
|
60 | * @stacked-example(Select form binding, select/select-form.component)
|
61 | *
|
62 | * Options in the select may be grouped using `nb-option-group` component.
|
63 | *
|
64 | * @stacked-example(Grouping, select/select-groups.component)
|
65 | *
|
66 | * Select may have a placeholder that will be shown when nothing selected:
|
67 | *
|
68 | * @stacked-example(Placeholder, select/select-placeholder.component)
|
69 | *
|
70 | * You can disable select, options and whole groups.
|
71 | *
|
72 | * @stacked-example(Disabled select, select/select-disabled.component)
|
73 | *
|
74 | * Also, the custom label may be provided in select.
|
75 | * This custom label will be used for instead placeholder when something selected.
|
76 | *
|
77 | * @stacked-example(Custom label, select/select-label.component)
|
78 | *
|
79 | * Default `nb-select` size is `medium` and status is `basic`.
|
80 | * Select is available in multiple colors using `status` property:
|
81 | *
|
82 | * @stacked-example(Select statuses, select/select-status.component)
|
83 | *
|
84 | * There are five select sizes:
|
85 | *
|
86 | * @stacked-example(Select sizes, select/select-sizes.component)
|
87 | *
|
88 | * And two additional style types - `filled`:
|
89 | *
|
90 | * @stacked-example(Filled select, select/select-filled.component)
|
91 | *
|
92 | * and `hero`:
|
93 | *
|
94 | * @stacked-example(Select colors, select/select-hero.component)
|
95 | *
|
96 | * Select is available in different shapes, that could be combined with the other properties:
|
97 | *
|
98 | * @stacked-example(Select shapes, select/select-shapes.component)
|
99 | *
|
100 | * By default, the component selects options whose values are strictly equal (`===`) with the select value.
|
101 | * To change such behavior, pass a custom comparator function to the `compareWith` attribute.
|
102 | *
|
103 | * @stacked-example(Select custom comparator, select/select-compare-with.component)
|
104 | *
|
105 | * @additional-example(Interactive, select/select-interactive.component)
|
106 | *
|
107 | * @styles
|
108 | *
|
109 | * select-cursor:
|
110 | * select-disabled-cursor:
|
111 | * select-min-width:
|
112 | * select-outline-width:
|
113 | * select-outline-color:
|
114 | * select-icon-offset:
|
115 | * select-text-font-family:
|
116 | * select-placeholder-text-font-family:
|
117 | * select-tiny-text-font-size:
|
118 | * select-tiny-text-font-weight:
|
119 | * select-tiny-text-line-height:
|
120 | * select-tiny-placeholder-text-font-size:
|
121 | * select-tiny-placeholder-text-font-weight:
|
122 | * select-tiny-max-width:
|
123 | * select-small-text-font-size:
|
124 | * select-small-text-font-weight:
|
125 | * select-small-text-line-height:
|
126 | * select-small-placeholder-text-font-size:
|
127 | * select-small-placeholder-text-font-weight:
|
128 | * select-small-max-width:
|
129 | * select-medium-text-font-size:
|
130 | * select-medium-text-font-weight:
|
131 | * select-medium-text-line-height:
|
132 | * select-medium-placeholder-text-font-size:
|
133 | * select-medium-placeholder-text-font-weight:
|
134 | * select-medium-max-width:
|
135 | * select-large-text-font-size:
|
136 | * select-large-text-font-weight:
|
137 | * select-large-text-line-height:
|
138 | * select-large-placeholder-text-font-size:
|
139 | * select-large-placeholder-text-font-weight:
|
140 | * select-large-max-width:
|
141 | * select-giant-text-font-size:
|
142 | * select-giant-text-font-weight:
|
143 | * select-giant-text-line-height:
|
144 | * select-giant-placeholder-text-font-size:
|
145 | * select-giant-placeholder-text-font-weight:
|
146 | * select-giant-max-width:
|
147 | * select-rectangle-border-radius:
|
148 | * select-semi-round-border-radius:
|
149 | * select-round-border-radius:
|
150 | * select-outline-border-style:
|
151 | * select-outline-border-width:
|
152 | * select-outline-tiny-padding:
|
153 | * select-outline-small-padding:
|
154 | * select-outline-medium-padding:
|
155 | * select-outline-large-padding:
|
156 | * select-outline-giant-padding:
|
157 | * select-outline-basic-icon-color:
|
158 | * select-outline-basic-text-color:
|
159 | * select-outline-basic-placeholder-text-color:
|
160 | * select-outline-basic-background-color:
|
161 | * select-outline-basic-border-color:
|
162 | * select-outline-basic-focus-background-color:
|
163 | * select-outline-basic-focus-border-color:
|
164 | * select-outline-basic-hover-background-color:
|
165 | * select-outline-basic-hover-border-color:
|
166 | * select-outline-basic-disabled-background-color:
|
167 | * select-outline-basic-disabled-border-color:
|
168 | * select-outline-basic-disabled-icon-color:
|
169 | * select-outline-basic-disabled-text-color:
|
170 | * select-outline-primary-icon-color:
|
171 | * select-outline-primary-text-color:
|
172 | * select-outline-primary-placeholder-text-color:
|
173 | * select-outline-primary-background-color:
|
174 | * select-outline-primary-border-color:
|
175 | * select-outline-primary-focus-background-color:
|
176 | * select-outline-primary-focus-border-color:
|
177 | * select-outline-primary-hover-background-color:
|
178 | * select-outline-primary-hover-border-color:
|
179 | * select-outline-primary-disabled-background-color:
|
180 | * select-outline-primary-disabled-border-color:
|
181 | * select-outline-primary-disabled-icon-color:
|
182 | * select-outline-primary-disabled-text-color:
|
183 | * select-outline-success-icon-color:
|
184 | * select-outline-success-text-color:
|
185 | * select-outline-success-placeholder-text-color:
|
186 | * select-outline-success-background-color:
|
187 | * select-outline-success-border-color:
|
188 | * select-outline-success-focus-background-color:
|
189 | * select-outline-success-focus-border-color:
|
190 | * select-outline-success-hover-background-color:
|
191 | * select-outline-success-hover-border-color:
|
192 | * select-outline-success-disabled-background-color:
|
193 | * select-outline-success-disabled-border-color:
|
194 | * select-outline-success-disabled-icon-color:
|
195 | * select-outline-success-disabled-text-color:
|
196 | * select-outline-info-icon-color:
|
197 | * select-outline-info-text-color:
|
198 | * select-outline-info-placeholder-text-color:
|
199 | * select-outline-info-background-color:
|
200 | * select-outline-info-border-color:
|
201 | * select-outline-info-focus-background-color:
|
202 | * select-outline-info-focus-border-color:
|
203 | * select-outline-info-hover-background-color:
|
204 | * select-outline-info-hover-border-color:
|
205 | * select-outline-info-disabled-background-color:
|
206 | * select-outline-info-disabled-border-color:
|
207 | * select-outline-info-disabled-icon-color:
|
208 | * select-outline-info-disabled-text-color:
|
209 | * select-outline-warning-icon-color:
|
210 | * select-outline-warning-text-color:
|
211 | * select-outline-warning-placeholder-text-color:
|
212 | * select-outline-warning-background-color:
|
213 | * select-outline-warning-border-color:
|
214 | * select-outline-warning-focus-background-color:
|
215 | * select-outline-warning-focus-border-color:
|
216 | * select-outline-warning-hover-background-color:
|
217 | * select-outline-warning-hover-border-color:
|
218 | * select-outline-warning-disabled-background-color:
|
219 | * select-outline-warning-disabled-border-color:
|
220 | * select-outline-warning-disabled-icon-color:
|
221 | * select-outline-warning-disabled-text-color:
|
222 | * select-outline-danger-icon-color:
|
223 | * select-outline-danger-text-color:
|
224 | * select-outline-danger-placeholder-text-color:
|
225 | * select-outline-danger-background-color:
|
226 | * select-outline-danger-border-color:
|
227 | * select-outline-danger-focus-background-color:
|
228 | * select-outline-danger-focus-border-color:
|
229 | * select-outline-danger-hover-background-color:
|
230 | * select-outline-danger-hover-border-color:
|
231 | * select-outline-danger-disabled-background-color:
|
232 | * select-outline-danger-disabled-border-color:
|
233 | * select-outline-danger-disabled-icon-color:
|
234 | * select-outline-danger-disabled-text-color:
|
235 | * select-outline-control-icon-color:
|
236 | * select-outline-control-text-color:
|
237 | * select-outline-control-placeholder-text-color:
|
238 | * select-outline-control-background-color:
|
239 | * select-outline-control-border-color:
|
240 | * select-outline-control-focus-background-color:
|
241 | * select-outline-control-focus-border-color:
|
242 | * select-outline-control-hover-background-color:
|
243 | * select-outline-control-hover-border-color:
|
244 | * select-outline-control-disabled-background-color:
|
245 | * select-outline-control-disabled-border-color:
|
246 | * select-outline-control-disabled-icon-color:
|
247 | * select-outline-control-disabled-text-color:
|
248 | * select-outline-adjacent-border-style:
|
249 | * select-outline-adjacent-border-width:
|
250 | * select-outline-basic-open-border-color:
|
251 | * select-outline-basic-adjacent-border-color:
|
252 | * select-outline-primary-open-border-color:
|
253 | * select-outline-primary-adjacent-border-color:
|
254 | * select-outline-success-open-border-color:
|
255 | * select-outline-success-adjacent-border-color:
|
256 | * select-outline-info-open-border-color:
|
257 | * select-outline-info-adjacent-border-color:
|
258 | * select-outline-warning-open-border-color:
|
259 | * select-outline-warning-adjacent-border-color:
|
260 | * select-outline-danger-open-border-color:
|
261 | * select-outline-danger-adjacent-border-color:
|
262 | * select-outline-control-open-border-color:
|
263 | * select-outline-control-adjacent-border-color:
|
264 | * select-filled-border-style:
|
265 | * select-filled-border-width:
|
266 | * select-filled-tiny-padding:
|
267 | * select-filled-small-padding:
|
268 | * select-filled-medium-padding:
|
269 | * select-filled-large-padding:
|
270 | * select-filled-giant-padding:
|
271 | * select-filled-basic-background-color:
|
272 | * select-filled-basic-border-color:
|
273 | * select-filled-basic-icon-color:
|
274 | * select-filled-basic-text-color:
|
275 | * select-filled-basic-placeholder-text-color:
|
276 | * select-filled-basic-focus-background-color:
|
277 | * select-filled-basic-focus-border-color:
|
278 | * select-filled-basic-hover-background-color:
|
279 | * select-filled-basic-hover-border-color:
|
280 | * select-filled-basic-disabled-background-color:
|
281 | * select-filled-basic-disabled-border-color:
|
282 | * select-filled-basic-disabled-icon-color:
|
283 | * select-filled-basic-disabled-text-color:
|
284 | * select-filled-primary-background-color:
|
285 | * select-filled-primary-border-color:
|
286 | * select-filled-primary-icon-color:
|
287 | * select-filled-primary-text-color:
|
288 | * select-filled-primary-placeholder-text-color:
|
289 | * select-filled-primary-focus-background-color:
|
290 | * select-filled-primary-focus-border-color:
|
291 | * select-filled-primary-hover-background-color:
|
292 | * select-filled-primary-hover-border-color:
|
293 | * select-filled-primary-disabled-background-color:
|
294 | * select-filled-primary-disabled-border-color:
|
295 | * select-filled-primary-disabled-icon-color:
|
296 | * select-filled-primary-disabled-text-color:
|
297 | * select-filled-success-background-color:
|
298 | * select-filled-success-border-color:
|
299 | * select-filled-success-icon-color:
|
300 | * select-filled-success-text-color:
|
301 | * select-filled-success-placeholder-text-color:
|
302 | * select-filled-success-focus-background-color:
|
303 | * select-filled-success-focus-border-color:
|
304 | * select-filled-success-hover-background-color:
|
305 | * select-filled-success-hover-border-color:
|
306 | * select-filled-success-disabled-background-color:
|
307 | * select-filled-success-disabled-border-color:
|
308 | * select-filled-success-disabled-icon-color:
|
309 | * select-filled-success-disabled-text-color:
|
310 | * select-filled-info-background-color:
|
311 | * select-filled-info-border-color:
|
312 | * select-filled-info-icon-color:
|
313 | * select-filled-info-text-color:
|
314 | * select-filled-info-placeholder-text-color:
|
315 | * select-filled-info-focus-background-color:
|
316 | * select-filled-info-focus-border-color:
|
317 | * select-filled-info-hover-background-color:
|
318 | * select-filled-info-hover-border-color:
|
319 | * select-filled-info-disabled-background-color:
|
320 | * select-filled-info-disabled-border-color:
|
321 | * select-filled-info-disabled-icon-color:
|
322 | * select-filled-info-disabled-text-color:
|
323 | * select-filled-warning-background-color:
|
324 | * select-filled-warning-border-color:
|
325 | * select-filled-warning-icon-color:
|
326 | * select-filled-warning-text-color:
|
327 | * select-filled-warning-placeholder-text-color:
|
328 | * select-filled-warning-focus-background-color:
|
329 | * select-filled-warning-focus-border-color:
|
330 | * select-filled-warning-hover-background-color:
|
331 | * select-filled-warning-hover-border-color:
|
332 | * select-filled-warning-disabled-background-color:
|
333 | * select-filled-warning-disabled-border-color:
|
334 | * select-filled-warning-disabled-icon-color:
|
335 | * select-filled-warning-disabled-text-color:
|
336 | * select-filled-danger-background-color:
|
337 | * select-filled-danger-border-color:
|
338 | * select-filled-danger-icon-color:
|
339 | * select-filled-danger-text-color:
|
340 | * select-filled-danger-placeholder-text-color:
|
341 | * select-filled-danger-focus-background-color:
|
342 | * select-filled-danger-focus-border-color:
|
343 | * select-filled-danger-hover-background-color:
|
344 | * select-filled-danger-hover-border-color:
|
345 | * select-filled-danger-disabled-background-color:
|
346 | * select-filled-danger-disabled-border-color:
|
347 | * select-filled-danger-disabled-icon-color:
|
348 | * select-filled-danger-disabled-text-color:
|
349 | * select-filled-control-background-color:
|
350 | * select-filled-control-border-color:
|
351 | * select-filled-control-icon-color:
|
352 | * select-filled-control-text-color:
|
353 | * select-filled-control-placeholder-text-color:
|
354 | * select-filled-control-focus-background-color:
|
355 | * select-filled-control-focus-border-color:
|
356 | * select-filled-control-hover-background-color:
|
357 | * select-filled-control-hover-border-color:
|
358 | * select-filled-control-disabled-background-color:
|
359 | * select-filled-control-disabled-border-color:
|
360 | * select-filled-control-disabled-icon-color:
|
361 | * select-filled-control-disabled-text-color:
|
362 | * select-hero-tiny-padding:
|
363 | * select-hero-small-padding:
|
364 | * select-hero-medium-padding:
|
365 | * select-hero-large-padding:
|
366 | * select-hero-giant-padding:
|
367 | * select-hero-basic-left-background-color:
|
368 | * select-hero-basic-right-background-color:
|
369 | * select-hero-basic-icon-color:
|
370 | * select-hero-basic-text-color:
|
371 | * select-hero-basic-placeholder-text-color:
|
372 | * select-hero-basic-focus-left-background-color:
|
373 | * select-hero-basic-focus-right-background-color:
|
374 | * select-hero-basic-hover-left-background-color:
|
375 | * select-hero-basic-hover-right-background-color:
|
376 | * select-hero-basic-disabled-background-color:
|
377 | * select-hero-basic-disabled-icon-color:
|
378 | * select-hero-basic-disabled-text-color:
|
379 | * select-hero-primary-left-background-color:
|
380 | * select-hero-primary-right-background-color:
|
381 | * select-hero-primary-icon-color:
|
382 | * select-hero-primary-text-color:
|
383 | * select-hero-primary-placeholder-text-color:
|
384 | * select-hero-primary-focus-left-background-color:
|
385 | * select-hero-primary-focus-right-background-color:
|
386 | * select-hero-primary-hover-left-background-color:
|
387 | * select-hero-primary-hover-right-background-color:
|
388 | * select-hero-primary-disabled-background-color:
|
389 | * select-hero-primary-disabled-icon-color:
|
390 | * select-hero-primary-disabled-text-color:
|
391 | * select-hero-success-left-background-color:
|
392 | * select-hero-success-right-background-color:
|
393 | * select-hero-success-icon-color:
|
394 | * select-hero-success-text-color:
|
395 | * select-hero-success-placeholder-text-color:
|
396 | * select-hero-success-focus-left-background-color:
|
397 | * select-hero-success-focus-right-background-color:
|
398 | * select-hero-success-hover-left-background-color:
|
399 | * select-hero-success-hover-right-background-color:
|
400 | * select-hero-success-disabled-background-color:
|
401 | * select-hero-success-disabled-icon-color:
|
402 | * select-hero-success-disabled-text-color:
|
403 | * select-hero-info-left-background-color:
|
404 | * select-hero-info-right-background-color:
|
405 | * select-hero-info-icon-color:
|
406 | * select-hero-info-text-color:
|
407 | * select-hero-info-placeholder-text-color:
|
408 | * select-hero-info-focus-left-background-color:
|
409 | * select-hero-info-focus-right-background-color:
|
410 | * select-hero-info-hover-left-background-color:
|
411 | * select-hero-info-hover-right-background-color:
|
412 | * select-hero-info-disabled-background-color:
|
413 | * select-hero-info-disabled-icon-color:
|
414 | * select-hero-info-disabled-text-color:
|
415 | * select-hero-warning-left-background-color:
|
416 | * select-hero-warning-right-background-color:
|
417 | * select-hero-warning-icon-color:
|
418 | * select-hero-warning-text-color:
|
419 | * select-hero-warning-placeholder-text-color:
|
420 | * select-hero-warning-focus-left-background-color:
|
421 | * select-hero-warning-focus-right-background-color:
|
422 | * select-hero-warning-hover-left-background-color:
|
423 | * select-hero-warning-hover-right-background-color:
|
424 | * select-hero-warning-disabled-background-color:
|
425 | * select-hero-warning-disabled-icon-color:
|
426 | * select-hero-warning-disabled-text-color:
|
427 | * select-hero-danger-left-background-color:
|
428 | * select-hero-danger-right-background-color:
|
429 | * select-hero-danger-icon-color:
|
430 | * select-hero-danger-text-color:
|
431 | * select-hero-danger-placeholder-text-color:
|
432 | * select-hero-danger-focus-left-background-color:
|
433 | * select-hero-danger-focus-right-background-color:
|
434 | * select-hero-danger-hover-left-background-color:
|
435 | * select-hero-danger-hover-right-background-color:
|
436 | * select-hero-danger-disabled-background-color:
|
437 | * select-hero-danger-disabled-icon-color:
|
438 | * select-hero-danger-disabled-text-color:
|
439 | * select-hero-control-left-background-color:
|
440 | * select-hero-control-right-background-color:
|
441 | * select-hero-control-icon-color:
|
442 | * select-hero-control-text-color:
|
443 | * select-hero-control-placeholder-text-color:
|
444 | * select-hero-control-focus-left-background-color:
|
445 | * select-hero-control-focus-right-background-color:
|
446 | * select-hero-control-hover-left-background-color:
|
447 | * select-hero-control-hover-right-background-color:
|
448 | * select-hero-control-disabled-background-color:
|
449 | * select-hero-control-disabled-icon-color:
|
450 | * select-hero-control-disabled-text-color:
|
451 | * */
|
452 | export declare class NbSelectComponent implements OnChanges, AfterViewInit, AfterContentInit, OnDestroy, ControlValueAccessor, NbFormFieldControl {
|
453 | protected document: any;
|
454 | protected overlay: NbOverlayService;
|
455 | protected hostRef: ElementRef<HTMLElement>;
|
456 | protected positionBuilder: NbPositionBuilderService;
|
457 | protected triggerStrategyBuilder: NbTriggerStrategyBuilderService;
|
458 | protected cd: ChangeDetectorRef;
|
459 | protected focusKeyManagerFactoryService: NbFocusKeyManagerFactoryService<NbOptionComponent>;
|
460 | protected focusMonitor: NbFocusMonitor;
|
461 | protected renderer: Renderer2;
|
462 | protected zone: NgZone;
|
463 | protected statusService: NbStatusService;
|
464 | /**
|
465 | * Select size, available sizes:
|
466 | * `tiny`, `small`, `medium` (default), `large`, `giant`
|
467 | */
|
468 | size: NbComponentSize;
|
469 | /**
|
470 | * Select status (adds specific styles):
|
471 | * `basic`, `primary`, `info`, `success`, `warning`, `danger`, `control`
|
472 | */
|
473 | status: NbComponentOrCustomStatus;
|
474 | /**
|
475 | * Select shapes: `rectangle` (default), `round`, `semi-round`
|
476 | */
|
477 | shape: NbComponentShape;
|
478 | /**
|
479 | * Select appearances: `outline` (default), `filled`, `hero`
|
480 | */
|
481 | appearance: NbSelectAppearance;
|
482 | /**
|
483 | * Specifies class to be set on `nb-option`s container (`nb-option-list`)
|
484 | * */
|
485 | optionsListClass: NgClass['ngClass'];
|
486 | /**
|
487 | * Specifies class for the overlay panel with options
|
488 | * */
|
489 | optionsPanelClass: string | string[];
|
490 | /**
|
491 | * Adds `outline` styles
|
492 | */
|
493 | get outline(): boolean;
|
494 | set outline(value: boolean);
|
495 | static ngAcceptInputType_outline: NbBooleanInput;
|
496 | /**
|
497 | * Adds `filled` styles
|
498 | */
|
499 | get filled(): boolean;
|
500 | set filled(value: boolean);
|
501 | static ngAcceptInputType_filled: NbBooleanInput;
|
502 | /**
|
503 | * Adds `hero` styles
|
504 | */
|
505 | get hero(): boolean;
|
506 | set hero(value: boolean);
|
507 | static ngAcceptInputType_hero: NbBooleanInput;
|
508 | /**
|
509 | * Disables the select
|
510 | */
|
511 | get disabled(): boolean;
|
512 | set disabled(value: boolean);
|
513 | protected _disabled: boolean;
|
514 | static ngAcceptInputType_disabled: NbBooleanInput;
|
515 | /**
|
516 | * If set element will fill its container
|
517 | */
|
518 | get fullWidth(): boolean;
|
519 | set fullWidth(value: boolean);
|
520 | protected _fullWidth: boolean;
|
521 | static ngAcceptInputType_fullWidth: NbBooleanInput;
|
522 | /**
|
523 | * Renders select placeholder if nothing selected.
|
524 | * */
|
525 | placeholder: string;
|
526 | /**
|
527 | * A function to compare option value with selected value.
|
528 | * By default, values are compared with strict equality (`===`).
|
529 | */
|
530 | get compareWith(): NbSelectCompareFunction;
|
531 | set compareWith(fn: NbSelectCompareFunction);
|
532 | protected _compareWith: NbSelectCompareFunction;
|
533 | /**
|
534 | * Accepts selected item or array of selected items.
|
535 | * */
|
536 | set selected(value: any);
|
537 | get selected(): any;
|
538 | /**
|
539 | * Gives capability just write `multiple` over the element.
|
540 | * */
|
541 | get multiple(): boolean;
|
542 | set multiple(value: boolean);
|
543 | protected _multiple: boolean;
|
544 | static ngAcceptInputType_multiple: NbBooleanInput;
|
545 | /**
|
546 | * Determines options overlay offset (in pixels).
|
547 | **/
|
548 | optionsOverlayOffset: number;
|
549 | /**
|
550 | * Determines options overlay scroll strategy.
|
551 | **/
|
552 | scrollStrategy: NbScrollStrategies;
|
553 | get additionalClasses(): string[];
|
554 | /**
|
555 | * Will be emitted when selected value changes.
|
556 | * */
|
557 | selectedChange: EventEmitter<any>;
|
558 | /**
|
559 | * List of `NbOptionComponent`'s components passed as content.
|
560 | * TODO maybe it would be better provide wrapper
|
561 | * */
|
562 | options: QueryList<NbOptionComponent>;
|
563 | /**
|
564 | * Custom select label, will be rendered instead of default enumeration with coma.
|
565 | * */
|
566 | customLabel: any;
|
567 | /**
|
568 | * NbCard with options content.
|
569 | * */
|
570 | portal: NbPortalDirective;
|
571 | button: ElementRef<HTMLButtonElement>;
|
572 | /**
|
573 | * Determines is select opened.
|
574 | * */
|
575 | get isOpen(): boolean;
|
576 | /**
|
577 | * List of selected options.
|
578 | * */
|
579 | selectionModel: NbOptionComponent[];
|
580 | positionStrategy: NbAdjustableConnectedPositionStrategy;
|
581 | /**
|
582 | * Current overlay position because of we have to toggle overlayPosition
|
583 | * in [ngClass] direction and this directive can use only string.
|
584 | */
|
585 | overlayPosition: NbPosition;
|
586 | protected ref: NbOverlayRef;
|
587 | protected triggerStrategy: NbTriggerStrategy;
|
588 | protected alive: boolean;
|
589 | protected destroy$: Subject<void>;
|
590 | protected keyManager: NbFocusKeyManager<NbOptionComponent>;
|
591 | /**
|
592 | * If a user assigns value before content nb-options's rendered the value will be putted in this variable.
|
593 | * And then applied after content rendered.
|
594 | * Only the last value will be applied.
|
595 | * */
|
596 | protected queue: any;
|
597 | /**
|
598 | * Function passed through control value accessor to propagate changes.
|
599 | * */
|
600 | protected onChange: Function;
|
601 | protected onTouched: Function;
|
602 | status$: BehaviorSubject<string>;
|
603 | size$: BehaviorSubject<NbComponentSize>;
|
604 | focused$: BehaviorSubject<boolean>;
|
605 | disabled$: BehaviorSubject<boolean>;
|
606 | fullWidth$: BehaviorSubject<boolean>;
|
607 | constructor(document: any, overlay: NbOverlayService, hostRef: ElementRef<HTMLElement>, positionBuilder: NbPositionBuilderService, triggerStrategyBuilder: NbTriggerStrategyBuilderService, cd: ChangeDetectorRef, focusKeyManagerFactoryService: NbFocusKeyManagerFactoryService<NbOptionComponent>, focusMonitor: NbFocusMonitor, renderer: Renderer2, zone: NgZone, statusService: NbStatusService);
|
608 | /**
|
609 | * Determines is select hidden.
|
610 | * */
|
611 | get isHidden(): boolean;
|
612 | /**
|
613 | * Returns width of the select button.
|
614 | * */
|
615 | get hostWidth(): number;
|
616 | get selectButtonClasses(): string[];
|
617 | /**
|
618 | * Content rendered in the label.
|
619 | * */
|
620 | get selectionView(): any;
|
621 | ngOnChanges({ disabled, status, size, fullWidth }: SimpleChanges): void;
|
622 | ngAfterContentInit(): void;
|
623 | ngAfterViewInit(): void;
|
624 | ngOnDestroy(): void;
|
625 | show(): void;
|
626 | hide(): void;
|
627 | registerOnChange(fn: any): void;
|
628 | registerOnTouched(fn: any): void;
|
629 | setDisabledState(isDisabled: boolean): void;
|
630 | writeValue(value: any): void;
|
631 | /**
|
632 | * Selects option or clear all selected options if value is null.
|
633 | * */
|
634 | protected handleOptionClick(option: NbOptionComponent): void;
|
635 | /**
|
636 | * Deselect all selected options.
|
637 | * */
|
638 | protected reset(): void;
|
639 | /**
|
640 | * Determines how to select option as multiple or single.
|
641 | * */
|
642 | protected selectOption(option: NbOptionComponent): void;
|
643 | /**
|
644 | * Select single option.
|
645 | * */
|
646 | protected handleSingleSelect(option: NbOptionComponent): void;
|
647 | /**
|
648 | * Select for multiple options.
|
649 | * */
|
650 | protected handleMultipleSelect(option: NbOptionComponent): void;
|
651 | protected attachToOverlay(): void;
|
652 | protected setActiveOption(): void;
|
653 | protected createOverlay(): void;
|
654 | protected createKeyManager(): void;
|
655 | protected createPositionStrategy(): NbAdjustableConnectedPositionStrategy;
|
656 | protected createScrollStrategy(): NbScrollStrategy;
|
657 | protected createTriggerStrategy(): NbTriggerStrategy;
|
658 | protected subscribeOnTriggers(): void;
|
659 | protected subscribeOnPositionChange(): void;
|
660 | protected subscribeOnOptionClick(): void;
|
661 | protected subscribeOnOverlayKeys(): void;
|
662 | protected subscribeOnButtonFocus(): void;
|
663 | protected getContainer(): ComponentRef<any>;
|
664 | /**
|
665 | * Propagate selected value.
|
666 | * */
|
667 | protected emitSelected(selected: any): void;
|
668 | /**
|
669 | * Set selected value in model.
|
670 | * */
|
671 | protected setSelection(value: any): void;
|
672 | /**
|
673 | * Selects value.
|
674 | * */
|
675 | protected selectValue(value: any): void;
|
676 | /**
|
677 | * Sets touched if focus moved outside of button and overlay,
|
678 | * ignoring the case when focus moved to options overlay.
|
679 | */
|
680 | trySetTouched(): void;
|
681 | protected isClickedWithinComponent($event: Event): boolean;
|
682 | protected canSelectValue(): boolean;
|
683 | get tiny(): boolean;
|
684 | get small(): boolean;
|
685 | get medium(): boolean;
|
686 | get large(): boolean;
|
687 | get giant(): boolean;
|
688 | get primary(): boolean;
|
689 | get info(): boolean;
|
690 | get success(): boolean;
|
691 | get warning(): boolean;
|
692 | get danger(): boolean;
|
693 | get basic(): boolean;
|
694 | get control(): boolean;
|
695 | get rectangle(): boolean;
|
696 | get round(): boolean;
|
697 | get semiRound(): boolean;
|
698 | }
|