| 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 declare type NbSelectCompareFunction<T = any> = (v1: any, v2: any) => boolean;
|
| 21 | export declare 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, ["*"]>;
|
| 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": "size"; "status": "status"; "shape": "shape"; "appearance": "appearance"; "optionsListClass": "optionsListClass"; "optionsPanelClass": "optionsPanelClass"; "optionsWidth": "optionsWidth"; "outline": "outline"; "filled": "filled"; "hero": "hero"; "disabled": "disabled"; "fullWidth": "fullWidth"; "placeholder": "placeholder"; "compareWith": "compareWith"; "selected": "selected"; "multiple": "multiple"; "optionsOverlayOffset": "optionsOverlayOffset"; "scrollStrategy": "scrollStrategy"; }, { "selectedChange": "selectedChange"; }, ["customLabel", "options"], ["nb-select-label", "nb-option, nb-option-group"]>;
|
| 713 | }
|