UNPKG

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