UNPKG

27.6 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 * @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 * */
452export 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}