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