@nepwork/dashboards
Version:
Dashboards for emergencies and monitoring
1,292 lines • 51 kB
JavaScript
/*
* @license
* Copyright Akveo. All Rights Reserved.
* Licensed under the MIT License. See License.txt in the project root for license information.
*/
import { __decorate, __metadata, __param } from "tslib";
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ContentChild, ContentChildren, ElementRef, EventEmitter, forwardRef, HostBinding, Inject, Input, Output, QueryList, ViewChild, Renderer2, NgZone, } from '@angular/core';
import { NG_VALUE_ACCESSOR } from '@angular/forms';
import { merge, Subject, BehaviorSubject } from 'rxjs';
import { startWith, switchMap, takeUntil, filter, map, finalize } from 'rxjs/operators';
import { NbAdjustment, NbPosition, NbPositionBuilderService, } from '../cdk/overlay/overlay-position';
import { NbPortalDirective } from '../cdk/overlay/mapping';
import { NbOverlayService } from '../cdk/overlay/overlay-service';
import { NbTrigger, NbTriggerStrategyBuilderService } from '../cdk/overlay/overlay-trigger';
import { NbFocusKeyManagerFactoryService } from '../cdk/a11y/focus-key-manager';
import { ESCAPE } from '../cdk/keycodes/keycodes';
import { NB_DOCUMENT } from '../../theme.options';
import { NbOptionComponent } from '../option/option.component';
import { convertToBoolProperty } from '../helpers';
import { NB_SELECT_INJECTION_TOKEN } from './select-injection-tokens';
import { NbFormFieldControl, NbFormFieldControlConfig } from '../form-field/form-field-control';
import { NbFocusMonitor } from '../cdk/a11y/a11y.module';
var NbSelectLabelComponent = /** @class */ (function () {
function NbSelectLabelComponent() {
}
NbSelectLabelComponent = __decorate([
Component({
selector: 'nb-select-label',
template: '<ng-content></ng-content>'
})
], NbSelectLabelComponent);
return NbSelectLabelComponent;
}());
export { NbSelectLabelComponent };
export function nbSelectFormFieldControlConfigFactory() {
var config = new NbFormFieldControlConfig();
config.supportsSuffix = false;
return config;
}
/**
* The `NbSelectComponent` provides a capability to select one of the passed items.
*
* @stacked-example(Showcase, select/select-showcase.component)
*
* ### Installation
*
* Import `NbSelectModule` to your feature module.
* ```ts
* @NgModule({
* imports: [
* // ...
* NbSelectModule,
* ],
* })
* export class PageModule { }
* ```
* ### Usage
*
* If you want to use it as the multi-select control you have to mark it as `multiple`.
* In this case, `nb-select` will work only with arrays - accept arrays and propagate arrays.
*
* @stacked-example(Multiple, select/select-multiple.component)
*
* Items without values will clean the selection. Both `null` and `undefined` values will also clean the selection.
*
* @stacked-example(Clean selection, select/select-clean.component)
*
* Select may be bounded using `selected` input:
*
* ```html
* <nb-select [(selected)]="selected"></nb-selected>
* ```
*
* Or you can bind control with form controls or ngModel:
*
* @stacked-example(Select form binding, select/select-form.component)
*
* Options in the select may be grouped using `nb-option-group` component.
*
* @stacked-example(Grouping, select/select-groups.component)
*
* Select may have a placeholder that will be shown when nothing selected:
*
* @stacked-example(Placeholder, select/select-placeholder.component)
*
* You can disable select, options and whole groups.
*
* @stacked-example(Disabled select, select/select-disabled.component)
*
* Also, the custom label may be provided in select.
* This custom label will be used for instead placeholder when something selected.
*
* @stacked-example(Custom label, select/select-label.component)
*
* Default `nb-select` size is `medium` and status is `basic`.
* Select is available in multiple colors using `status` property:
*
* @stacked-example(Select statuses, select/select-status.component)
*
* There are five select sizes:
*
* @stacked-example(Select sizes, select/select-sizes.component)
*
* And two additional style types - `filled`:
*
* @stacked-example(Filled select, select/select-filled.component)
*
* and `hero`:
*
* @stacked-example(Select colors, select/select-hero.component)
*
* Select is available in different shapes, that could be combined with the other properties:
*
* @stacked-example(Select shapes, select/select-shapes.component)
*
* @additional-example(Interactive, select/select-interactive.component)
*
* @styles
*
* select-cursor:
* select-disabled-cursor:
* select-min-width:
* select-outline-width:
* select-outline-color:
* select-icon-offset:
* select-text-font-family:
* select-placeholder-text-font-family:
* select-tiny-text-font-size:
* select-tiny-text-font-weight:
* select-tiny-text-line-height:
* select-tiny-placeholder-text-font-size:
* select-tiny-placeholder-text-font-weight:
* select-tiny-max-width:
* select-small-text-font-size:
* select-small-text-font-weight:
* select-small-text-line-height:
* select-small-placeholder-text-font-size:
* select-small-placeholder-text-font-weight:
* select-small-max-width:
* select-medium-text-font-size:
* select-medium-text-font-weight:
* select-medium-text-line-height:
* select-medium-placeholder-text-font-size:
* select-medium-placeholder-text-font-weight:
* select-medium-max-width:
* select-large-text-font-size:
* select-large-text-font-weight:
* select-large-text-line-height:
* select-large-placeholder-text-font-size:
* select-large-placeholder-text-font-weight:
* select-large-max-width:
* select-giant-text-font-size:
* select-giant-text-font-weight:
* select-giant-text-line-height:
* select-giant-placeholder-text-font-size:
* select-giant-placeholder-text-font-weight:
* select-giant-max-width:
* select-rectangle-border-radius:
* select-semi-round-border-radius:
* select-round-border-radius:
* select-outline-border-style:
* select-outline-border-width:
* select-outline-tiny-padding:
* select-outline-small-padding:
* select-outline-medium-padding:
* select-outline-large-padding:
* select-outline-giant-padding:
* select-outline-basic-icon-color:
* select-outline-basic-text-color:
* select-outline-basic-placeholder-text-color:
* select-outline-basic-background-color:
* select-outline-basic-border-color:
* select-outline-basic-focus-background-color:
* select-outline-basic-focus-border-color:
* select-outline-basic-hover-background-color:
* select-outline-basic-hover-border-color:
* select-outline-basic-disabled-background-color:
* select-outline-basic-disabled-border-color:
* select-outline-basic-disabled-icon-color:
* select-outline-basic-disabled-text-color:
* select-outline-primary-icon-color:
* select-outline-primary-text-color:
* select-outline-primary-placeholder-text-color:
* select-outline-primary-background-color:
* select-outline-primary-border-color:
* select-outline-primary-focus-background-color:
* select-outline-primary-focus-border-color:
* select-outline-primary-hover-background-color:
* select-outline-primary-hover-border-color:
* select-outline-primary-disabled-background-color:
* select-outline-primary-disabled-border-color:
* select-outline-primary-disabled-icon-color:
* select-outline-primary-disabled-text-color:
* select-outline-success-icon-color:
* select-outline-success-text-color:
* select-outline-success-placeholder-text-color:
* select-outline-success-background-color:
* select-outline-success-border-color:
* select-outline-success-focus-background-color:
* select-outline-success-focus-border-color:
* select-outline-success-hover-background-color:
* select-outline-success-hover-border-color:
* select-outline-success-disabled-background-color:
* select-outline-success-disabled-border-color:
* select-outline-success-disabled-icon-color:
* select-outline-success-disabled-text-color:
* select-outline-info-icon-color:
* select-outline-info-text-color:
* select-outline-info-placeholder-text-color:
* select-outline-info-background-color:
* select-outline-info-border-color:
* select-outline-info-focus-background-color:
* select-outline-info-focus-border-color:
* select-outline-info-hover-background-color:
* select-outline-info-hover-border-color:
* select-outline-info-disabled-background-color:
* select-outline-info-disabled-border-color:
* select-outline-info-disabled-icon-color:
* select-outline-info-disabled-text-color:
* select-outline-warning-icon-color:
* select-outline-warning-text-color:
* select-outline-warning-placeholder-text-color:
* select-outline-warning-background-color:
* select-outline-warning-border-color:
* select-outline-warning-focus-background-color:
* select-outline-warning-focus-border-color:
* select-outline-warning-hover-background-color:
* select-outline-warning-hover-border-color:
* select-outline-warning-disabled-background-color:
* select-outline-warning-disabled-border-color:
* select-outline-warning-disabled-icon-color:
* select-outline-warning-disabled-text-color:
* select-outline-danger-icon-color:
* select-outline-danger-text-color:
* select-outline-danger-placeholder-text-color:
* select-outline-danger-background-color:
* select-outline-danger-border-color:
* select-outline-danger-focus-background-color:
* select-outline-danger-focus-border-color:
* select-outline-danger-hover-background-color:
* select-outline-danger-hover-border-color:
* select-outline-danger-disabled-background-color:
* select-outline-danger-disabled-border-color:
* select-outline-danger-disabled-icon-color:
* select-outline-danger-disabled-text-color:
* select-outline-control-icon-color:
* select-outline-control-text-color:
* select-outline-control-placeholder-text-color:
* select-outline-control-background-color:
* select-outline-control-border-color:
* select-outline-control-focus-background-color:
* select-outline-control-focus-border-color:
* select-outline-control-hover-background-color:
* select-outline-control-hover-border-color:
* select-outline-control-disabled-background-color:
* select-outline-control-disabled-border-color:
* select-outline-control-disabled-icon-color:
* select-outline-control-disabled-text-color:
* select-outline-adjacent-border-style:
* select-outline-adjacent-border-width:
* select-outline-basic-open-border-color:
* select-outline-basic-adjacent-border-color:
* select-outline-primary-open-border-color:
* select-outline-primary-adjacent-border-color:
* select-outline-success-open-border-color:
* select-outline-success-adjacent-border-color:
* select-outline-info-open-border-color:
* select-outline-info-adjacent-border-color:
* select-outline-warning-open-border-color:
* select-outline-warning-adjacent-border-color:
* select-outline-danger-open-border-color:
* select-outline-danger-adjacent-border-color:
* select-outline-control-open-border-color:
* select-outline-control-adjacent-border-color:
* select-filled-border-style:
* select-filled-border-width:
* select-filled-tiny-padding:
* select-filled-small-padding:
* select-filled-medium-padding:
* select-filled-large-padding:
* select-filled-giant-padding:
* select-filled-basic-background-color:
* select-filled-basic-border-color:
* select-filled-basic-icon-color:
* select-filled-basic-text-color:
* select-filled-basic-placeholder-text-color:
* select-filled-basic-focus-background-color:
* select-filled-basic-focus-border-color:
* select-filled-basic-hover-background-color:
* select-filled-basic-hover-border-color:
* select-filled-basic-disabled-background-color:
* select-filled-basic-disabled-border-color:
* select-filled-basic-disabled-icon-color:
* select-filled-basic-disabled-text-color:
* select-filled-primary-background-color:
* select-filled-primary-border-color:
* select-filled-primary-icon-color:
* select-filled-primary-text-color:
* select-filled-primary-placeholder-text-color:
* select-filled-primary-focus-background-color:
* select-filled-primary-focus-border-color:
* select-filled-primary-hover-background-color:
* select-filled-primary-hover-border-color:
* select-filled-primary-disabled-background-color:
* select-filled-primary-disabled-border-color:
* select-filled-primary-disabled-icon-color:
* select-filled-primary-disabled-text-color:
* select-filled-success-background-color:
* select-filled-success-border-color:
* select-filled-success-icon-color:
* select-filled-success-text-color:
* select-filled-success-placeholder-text-color:
* select-filled-success-focus-background-color:
* select-filled-success-focus-border-color:
* select-filled-success-hover-background-color:
* select-filled-success-hover-border-color:
* select-filled-success-disabled-background-color:
* select-filled-success-disabled-border-color:
* select-filled-success-disabled-icon-color:
* select-filled-success-disabled-text-color:
* select-filled-info-background-color:
* select-filled-info-border-color:
* select-filled-info-icon-color:
* select-filled-info-text-color:
* select-filled-info-placeholder-text-color:
* select-filled-info-focus-background-color:
* select-filled-info-focus-border-color:
* select-filled-info-hover-background-color:
* select-filled-info-hover-border-color:
* select-filled-info-disabled-background-color:
* select-filled-info-disabled-border-color:
* select-filled-info-disabled-icon-color:
* select-filled-info-disabled-text-color:
* select-filled-warning-background-color:
* select-filled-warning-border-color:
* select-filled-warning-icon-color:
* select-filled-warning-text-color:
* select-filled-warning-placeholder-text-color:
* select-filled-warning-focus-background-color:
* select-filled-warning-focus-border-color:
* select-filled-warning-hover-background-color:
* select-filled-warning-hover-border-color:
* select-filled-warning-disabled-background-color:
* select-filled-warning-disabled-border-color:
* select-filled-warning-disabled-icon-color:
* select-filled-warning-disabled-text-color:
* select-filled-danger-background-color:
* select-filled-danger-border-color:
* select-filled-danger-icon-color:
* select-filled-danger-text-color:
* select-filled-danger-placeholder-text-color:
* select-filled-danger-focus-background-color:
* select-filled-danger-focus-border-color:
* select-filled-danger-hover-background-color:
* select-filled-danger-hover-border-color:
* select-filled-danger-disabled-background-color:
* select-filled-danger-disabled-border-color:
* select-filled-danger-disabled-icon-color:
* select-filled-danger-disabled-text-color:
* select-filled-control-background-color:
* select-filled-control-border-color:
* select-filled-control-icon-color:
* select-filled-control-text-color:
* select-filled-control-placeholder-text-color:
* select-filled-control-focus-background-color:
* select-filled-control-focus-border-color:
* select-filled-control-hover-background-color:
* select-filled-control-hover-border-color:
* select-filled-control-disabled-background-color:
* select-filled-control-disabled-border-color:
* select-filled-control-disabled-icon-color:
* select-filled-control-disabled-text-color:
* select-hero-tiny-padding:
* select-hero-small-padding:
* select-hero-medium-padding:
* select-hero-large-padding:
* select-hero-giant-padding:
* select-hero-basic-left-background-color:
* select-hero-basic-right-background-color:
* select-hero-basic-icon-color:
* select-hero-basic-text-color:
* select-hero-basic-placeholder-text-color:
* select-hero-basic-focus-left-background-color:
* select-hero-basic-focus-right-background-color:
* select-hero-basic-hover-left-background-color:
* select-hero-basic-hover-right-background-color:
* select-hero-basic-disabled-background-color:
* select-hero-basic-disabled-icon-color:
* select-hero-basic-disabled-text-color:
* select-hero-primary-left-background-color:
* select-hero-primary-right-background-color:
* select-hero-primary-icon-color:
* select-hero-primary-text-color:
* select-hero-primary-placeholder-text-color:
* select-hero-primary-focus-left-background-color:
* select-hero-primary-focus-right-background-color:
* select-hero-primary-hover-left-background-color:
* select-hero-primary-hover-right-background-color:
* select-hero-primary-disabled-background-color:
* select-hero-primary-disabled-icon-color:
* select-hero-primary-disabled-text-color:
* select-hero-success-left-background-color:
* select-hero-success-right-background-color:
* select-hero-success-icon-color:
* select-hero-success-text-color:
* select-hero-success-placeholder-text-color:
* select-hero-success-focus-left-background-color:
* select-hero-success-focus-right-background-color:
* select-hero-success-hover-left-background-color:
* select-hero-success-hover-right-background-color:
* select-hero-success-disabled-background-color:
* select-hero-success-disabled-icon-color:
* select-hero-success-disabled-text-color:
* select-hero-info-left-background-color:
* select-hero-info-right-background-color:
* select-hero-info-icon-color:
* select-hero-info-text-color:
* select-hero-info-placeholder-text-color:
* select-hero-info-focus-left-background-color:
* select-hero-info-focus-right-background-color:
* select-hero-info-hover-left-background-color:
* select-hero-info-hover-right-background-color:
* select-hero-info-disabled-background-color:
* select-hero-info-disabled-icon-color:
* select-hero-info-disabled-text-color:
* select-hero-warning-left-background-color:
* select-hero-warning-right-background-color:
* select-hero-warning-icon-color:
* select-hero-warning-text-color:
* select-hero-warning-placeholder-text-color:
* select-hero-warning-focus-left-background-color:
* select-hero-warning-focus-right-background-color:
* select-hero-warning-hover-left-background-color:
* select-hero-warning-hover-right-background-color:
* select-hero-warning-disabled-background-color:
* select-hero-warning-disabled-icon-color:
* select-hero-warning-disabled-text-color:
* select-hero-danger-left-background-color:
* select-hero-danger-right-background-color:
* select-hero-danger-icon-color:
* select-hero-danger-text-color:
* select-hero-danger-placeholder-text-color:
* select-hero-danger-focus-left-background-color:
* select-hero-danger-focus-right-background-color:
* select-hero-danger-hover-left-background-color:
* select-hero-danger-hover-right-background-color:
* select-hero-danger-disabled-background-color:
* select-hero-danger-disabled-icon-color:
* select-hero-danger-disabled-text-color:
* select-hero-control-left-background-color:
* select-hero-control-right-background-color:
* select-hero-control-icon-color:
* select-hero-control-text-color:
* select-hero-control-placeholder-text-color:
* select-hero-control-focus-left-background-color:
* select-hero-control-focus-right-background-color:
* select-hero-control-hover-left-background-color:
* select-hero-control-hover-right-background-color:
* select-hero-control-disabled-background-color:
* select-hero-control-disabled-icon-color:
* select-hero-control-disabled-text-color:
* */
var NbSelectComponent = /** @class */ (function () {
function NbSelectComponent(document, overlay, hostRef, positionBuilder, triggerStrategyBuilder, cd, focusKeyManagerFactoryService, focusMonitor, renderer, zone) {
this.document = document;
this.overlay = overlay;
this.hostRef = hostRef;
this.positionBuilder = positionBuilder;
this.triggerStrategyBuilder = triggerStrategyBuilder;
this.cd = cd;
this.focusKeyManagerFactoryService = focusKeyManagerFactoryService;
this.focusMonitor = focusMonitor;
this.renderer = renderer;
this.zone = zone;
/**
* Select size, available sizes:
* `tiny`, `small`, `medium` (default), `large`, `giant`
*/
this.size = 'medium';
/**
* Select status (adds specific styles):
* `basic`, `primary`, `info`, `success`, `warning`, `danger`, `control`
*/
this.status = 'basic';
/**
* Select shapes: `rectangle` (default), `round`, `semi-round`
*/
this.shape = 'rectangle';
/**
* Select appearances: `outline` (default), `filled`, `hero`
*/
this.appearance = 'outline';
this._fullWidth = false;
/**
* Renders select placeholder if nothing selected.
* */
this.placeholder = '';
this._multiple = false;
/**
* Will be emitted when selected value changes.
* */
this.selectedChange = new EventEmitter();
/**
* List of selected options.
* */
this.selectionModel = [];
/**
* Current overlay position because of we have to toggle overlayPosition
* in [ngClass] direction and this directive can use only string.
*/
this.overlayPosition = '';
this.optionsOverlayOffset = 8;
this.alive = true;
this.destroy$ = new Subject();
/**
* Function passed through control value accessor to propagate changes.
* */
this.onChange = function () { };
this.onTouched = function () { };
/*
* @docs-private
**/
this.status$ = new BehaviorSubject(this.status);
/*
* @docs-private
**/
this.size$ = new BehaviorSubject(this.size);
/*
* @docs-private
**/
this.focused$ = new BehaviorSubject(false);
/*
* @docs-private
**/
this.disabled$ = new BehaviorSubject(this.disabled);
}
NbSelectComponent_1 = NbSelectComponent;
Object.defineProperty(NbSelectComponent.prototype, "outline", {
/**
* Adds `outline` styles
*/
get: function () {
return this.appearance === 'outline';
},
set: function (value) {
if (convertToBoolProperty(value)) {
this.appearance = 'outline';
}
},
enumerable: true,
configurable: true
});
Object.defineProperty(NbSelectComponent.prototype, "filled", {
/**
* Adds `filled` styles
*/
get: function () {
return this.appearance === 'filled';
},
set: function (value) {
if (convertToBoolProperty(value)) {
this.appearance = 'filled';
}
},
enumerable: true,
configurable: true
});
Object.defineProperty(NbSelectComponent.prototype, "hero", {
/**
* Adds `hero` styles
*/
get: function () {
return this.appearance === 'hero';
},
set: function (value) {
if (convertToBoolProperty(value)) {
this.appearance = 'hero';
}
},
enumerable: true,
configurable: true
});
Object.defineProperty(NbSelectComponent.prototype, "disabled", {
/**
* Disables the select
*/
get: function () {
return !!this._disabled;
},
set: function (value) {
this._disabled = convertToBoolProperty(value);
},
enumerable: true,
configurable: true
});
Object.defineProperty(NbSelectComponent.prototype, "fullWidth", {
/**
* If set element will fill its container
*/
get: function () {
return this._fullWidth;
},
set: function (value) {
this._fullWidth = convertToBoolProperty(value);
},
enumerable: true,
configurable: true
});
Object.defineProperty(NbSelectComponent.prototype, "selected", {
get: function () {
return this.multiple
? this.selectionModel.map(function (o) { return o.value; })
: this.selectionModel[0].value;
},
/**
* Accepts selected item or array of selected items.
* */
set: function (value) {
this.writeValue(value);
},
enumerable: true,
configurable: true
});
Object.defineProperty(NbSelectComponent.prototype, "multiple", {
/**
* Gives capability just write `multiple` over the element.
* */
get: function () {
return this._multiple;
},
set: function (value) {
this._multiple = convertToBoolProperty(value);
},
enumerable: true,
configurable: true
});
Object.defineProperty(NbSelectComponent.prototype, "isOpen", {
/**
* Determines is select opened.
* */
get: function () {
return this.ref && this.ref.hasAttached();
},
enumerable: true,
configurable: true
});
Object.defineProperty(NbSelectComponent.prototype, "isHidden", {
/**
* Determines is select hidden.
* */
get: function () {
return !this.isOpen;
},
enumerable: true,
configurable: true
});
Object.defineProperty(NbSelectComponent.prototype, "hostWidth", {
/**
* Returns width of the select button.
* */
get: function () {
return this.button.nativeElement.getBoundingClientRect().width;
},
enumerable: true,
configurable: true
});
Object.defineProperty(NbSelectComponent.prototype, "selectButtonClasses", {
get: function () {
var classes = [];
if (!this.selectionModel.length) {
classes.push('placeholder');
}
if (!this.selectionModel.length && !this.placeholder) {
classes.push('empty');
}
if (this.isOpen) {
classes.push(this.overlayPosition);
}
return classes;
},
enumerable: true,
configurable: true
});
Object.defineProperty(NbSelectComponent.prototype, "selectionView", {
/**
* Content rendered in the label.
* */
get: function () {
if (this.selectionModel.length > 1) {
return this.selectionModel.map(function (option) { return option.content; }).join(', ');
}
return this.selectionModel[0].content;
},
enumerable: true,
configurable: true
});
NbSelectComponent.prototype.ngOnChanges = function (_a) {
var disabled = _a.disabled, status = _a.status, size = _a.size;
if (disabled) {
this.disabled$.next(disabled.currentValue);
}
if (status) {
this.status$.next(status.currentValue);
}
if (size) {
this.size$.next(size.currentValue);
}
};
NbSelectComponent.prototype.ngAfterContentInit = function () {
var _this = this;
this.options.changes
.pipe(startWith(this.options), filter(function () { return _this.queue != null && _this.canSelectValue(); }), takeUntil(this.destroy$))
.subscribe(function () {
// Call 'writeValue' when current change detection run is finished.
// When writing is finished, change detection starts again, since
// microtasks queue is empty.
// Prevents ExpressionChangedAfterItHasBeenCheckedError.
Promise.resolve().then(function () {
_this.writeValue(_this.queue);
});
});
};
NbSelectComponent.prototype.ngAfterViewInit = function () {
var _this = this;
this.triggerStrategy = this.createTriggerStrategy();
this.subscribeOnButtonFocus();
this.subscribeOnTriggers();
this.subscribeOnOptionClick();
// TODO: #2254
this.zone.runOutsideAngular(function () { return setTimeout(function () {
_this.renderer.addClass(_this.hostRef.nativeElement, 'nb-transition');
}); });
};
NbSelectComponent.prototype.ngOnDestroy = function () {
this.alive = false;
this.destroy$.next();
this.destroy$.complete();
if (this.ref) {
this.ref.dispose();
}
if (this.triggerStrategy) {
this.triggerStrategy.destroy();
}
};
NbSelectComponent.prototype.show = function () {
if (this.isHidden) {
this.attachToOverlay();
this.setActiveOption();
this.cd.markForCheck();
}
};
NbSelectComponent.prototype.hide = function () {
if (this.isOpen) {
this.ref.detach();
this.cd.markForCheck();
}
};
NbSelectComponent.prototype.registerOnChange = function (fn) {
this.onChange = fn;
};
NbSelectComponent.prototype.registerOnTouched = function (fn) {
this.onTouched = fn;
};
NbSelectComponent.prototype.setDisabledState = function (isDisabled) {
this.disabled = isDisabled;
this.cd.markForCheck();
};
NbSelectComponent.prototype.writeValue = function (value) {
if (!this.alive) {
return;
}
if (this.canSelectValue()) {
this.setSelection(value);
if (this.selectionModel.length) {
this.queue = null;
}
}
else {
this.queue = value;
}
};
/**
* Selects option or clear all selected options if value is null.
* */
NbSelectComponent.prototype.handleOptionClick = function (option) {
this.queue = null;
if (option.value == null) {
this.reset();
}
else {
this.selectOption(option);
}
this.cd.markForCheck();
};
/**
* Deselect all selected options.
* */
NbSelectComponent.prototype.reset = function () {
this.selectionModel.forEach(function (option) { return option.deselect(); });
this.selectionModel = [];
this.hide();
this.button.nativeElement.focus();
this.emitSelected(this.multiple ? [] : null);
};
/**
* Determines how to select option as multiple or single.
* */
NbSelectComponent.prototype.selectOption = function (option) {
if (this.multiple) {
this.handleMultipleSelect(option);
}
else {
this.handleSingleSelect(option);
}
};
/**
* Select single option.
* */
NbSelectComponent.prototype.handleSingleSelect = function (option) {
var selected = this.selectionModel.pop();
if (selected && selected !== option) {
selected.deselect();
}
this.selectionModel = [option];
option.select();
this.hide();
this.button.nativeElement.focus();
this.emitSelected(option.value);
};
/**
* Select for multiple options.
* */
NbSelectComponent.prototype.handleMultipleSelect = function (option) {
if (option.selected) {
this.selectionModel = this.selectionModel.filter(function (s) { return s.value !== option.value; });
option.deselect();
}
else {
this.selectionModel.push(option);
option.select();
}
this.emitSelected(this.selectionModel.map(function (opt) { return opt.value; }));
};
NbSelectComponent.prototype.attachToOverlay = function () {
if (!this.ref) {
this.createOverlay();
this.subscribeOnPositionChange();
this.createKeyManager();
this.subscribeOnOverlayKeys();
}
this.ref.attach(this.portal);
};
NbSelectComponent.prototype.setActiveOption = function () {
if (this.selectionModel.length) {
this.keyManager.setActiveItem(this.selectionModel[0]);
}
else {
this.keyManager.setFirstItemActive();
}
};
NbSelectComponent.prototype.createOverlay = function () {
var scrollStrategy = this.createScrollStrategy();
this.positionStrategy = this.createPositionStrategy();
this.ref = this.overlay.create({ positionStrategy: this.positionStrategy, scrollStrategy: scrollStrategy });
};
NbSelectComponent.prototype.createKeyManager = function () {
this.keyManager = this.focusKeyManagerFactoryService.create(this.options).withTypeAhead(200);
};
NbSelectComponent.prototype.createPositionStrategy = function () {
return this.positionBuilder
.connectedTo(this.button)
.position(NbPosition.BOTTOM)
.offset(this.optionsOverlayOffset)
.adjustment(NbAdjustment.VERTICAL);
};
NbSelectComponent.prototype.createScrollStrategy = function () {
return this.overlay.scrollStrategies.block();
};
NbSelectComponent.prototype.createTriggerStrategy = function () {
var _this = this;
return this.triggerStrategyBuilder
.trigger(NbTrigger.CLICK)
.host(this.hostRef.nativeElement)
.container(function () { return _this.getContainer(); })
.build();
};
NbSelectComponent.prototype.subscribeOnTriggers = function () {
var _this = this;
this.triggerStrategy.show$.subscribe(function () { return _this.show(); });
this.triggerStrategy.hide$
.pipe(filter(function () { return _this.isOpen; }))
.subscribe(function ($event) {
_this.hide();
if (!_this.isClickedWithinComponent($event)) {
_this.onTouched();
}
});
};
NbSelectComponent.prototype.subscribeOnPositionChange = function () {
var _this = this;
this.positionStrategy.positionChange
.pipe(takeUntil(this.destroy$))
.subscribe(function (position) {
_this.overlayPosition = position;
_this.cd.detectChanges();
});
};
NbSelectComponent.prototype.subscribeOnOptionClick = function () {
var _this = this;
/**
* If the user changes provided options list in the runtime we have to handle this
* and resubscribe on options selection changes event.
* Otherwise, the user will not be able to select new options.
* */
this.options.changes
.pipe(startWith(this.options), switchMap(function (options) {
return merge.apply(void 0, options.map(function (option) { return option.click; }));
}), takeUntil(this.destroy$))
.subscribe(function (clickedOption) { return _this.handleOptionClick(clickedOption); });
};
NbSelectComponent.prototype.subscribeOnOverlayKeys = function () {
var _this = this;
this.ref.keydownEvents()
.pipe(filter(function () { return _this.isOpen; }), takeUntil(this.destroy$))
.subscribe(function (event) {
if (event.keyCode === ESCAPE) {
_this.button.nativeElement.focus();
_this.hide();
}
else {
_this.keyManager.onKeydown(event);
}
});
this.keyManager.tabOut
.pipe(takeUntil(this.destroy$))
.subscribe(function () {
_this.hide();
_this.onTouched();
});
};
NbSelectComponent.prototype.subscribeOnButtonFocus = function () {
var _this = this;
this.focusMonitor.monitor(this.button)
.pipe(map(function (origin) { return !!origin; }), finalize(function () { return _this.focusMonitor.stopMonitoring(_this.button); }), takeUntil(this.destroy$))
.subscribe(this.focused$);
};
NbSelectComponent.prototype.getContainer = function () {
return this.ref && this.ref.hasAttached() && {
location: {
nativeElement: this.ref.overlayElement,
},
};
};
/**
* Propagate selected value.
* */
NbSelectComponent.prototype.emitSelected = function (selected) {
this.onChange(selected);
this.selectedChange.emit(selected);
};
/**
* Set selected value in model.
* */
NbSelectComponent.prototype.setSelection = function (value) {
var _this = this;
var isArray = Array.isArray(value);
if (this.multiple && !isArray) {
throw new Error('Can\'t assign single value if select is marked as multiple');
}
if (!this.multiple && isArray) {
throw new Error('Can\'t assign array if select is not marked as multiple');
}
var previouslySelectedOptions = this.selectionModel;
this.selectionModel = [];
if (isArray) {
value.forEach(function (option) { return _this.selectValue(option); });
}
else {
this.selectValue(value);
}
// find options which were selected before and trigger deselect
previouslySelectedOptions
.filter(function (option) { return !_this.selectionModel.includes(option); })
.forEach(function (option) { return option.deselect(); });
this.cd.markForCheck();
};
/**
* Selects value.
* */
NbSelectComponent.prototype.selectValue = function (value) {
var corresponding = this.options.find(function (option) { return option.value === value; });
if (corresponding) {
corresponding.select();
this.selectionModel.push(corresponding);
}
};
/**
* Sets touched if focus moved outside of button and overlay,
* ignoring the case when focus moved to options overlay.
*/
NbSelectComponent.prototype.trySetTouched = function () {
if (this.isHidden) {
this.onTouched();
}
};
NbSelectComponent.prototype.isClickedWithinComponent = function ($event) {
return this.hostRef.nativeElement === $event.target || this.hostRef.nativeElement.contains($event.target);
};
NbSelectComponent.prototype.canSelectValue = function () {
return !!(this.options && this.options.length);
};
Object.defineProperty(NbSelectComponent.prototype, "tiny", {
get: function () {
return this.size === 'tiny';
},
enumerable: true,
configurable: true
});
Object.defineProperty(NbSelectComponent.prototype, "small", {
get: function () {
return this.size === 'small';
},
enumerable: true,
configurable: true
});
Object.defineProperty(NbSelectComponent.prototype, "medium", {
get: function () {
return this.size === 'medium';
},
enumerable: true,
configurable: true
});
Object.defineProperty(NbSelectComponent.prototype, "large", {
get: function () {
return this.size === 'large';
},
enumerable: true,
configurable: true
});
Object.defineProperty(NbSelectComponent.prototype, "giant", {
get: function () {
return this.size === 'giant';
},
enumerable: true,
configurable: true
});
Object.defineProperty(NbSelectComponent.prototype, "primary", {
get: function () {
return this.status === 'primary';
},
enumerable: true,
configurable: true
});
Object.defineProperty(NbSelectComponent.prototype, "info", {
get: function () {
return this.status === 'info';
},
enumerable: true,
configurable: true
});
Object.defineProperty(NbSelectComponent.prototype, "success", {
get: function () {
return this.status === 'success';
},
enumerable: true,
configurable: true
});
Object.defineProperty(NbSelectComponent.prototype, "warning", {
get: function () {
return this.status === 'warning';
},
enumerable: true,
configurable: true
});
Object.defineProperty(NbSelectComponent.prototype, "danger", {
get: function () {
return this.status === 'danger';
},
enumerable: true,
configurable: true
});
Object.defineProperty(NbSelectComponent.prototype, "basic", {
get: function () {
return this.status === 'basic';
},
enumerable: true,
configurable: true
});
Object.defineProperty(NbSelectComponent.prototype, "control", {
get: function () {
return this.status === 'control';
},
enumerable: true,
configurable: true
});
Object.defineProperty(NbSelectComponent.prototype, "rectangle", {
get: function () {
return this.shape === 'rectangle';
},
enumerable: true,
configurable: true
});
Object.defineProperty(NbSelectComponent.prototype, "round", {
get: function () {
return this.shape === 'round';
},
enumerable: true,
configurable: true
});
Object.defineProperty(NbSelectComponent.prototype, "semiRound", {
get: function () {
return this.shape === 'semi-round';
},
enumerable: true,
configurable: true
});
var NbSelectComponent_1;
__decorate([
Input(),
__metadata("design:type", String)
], NbSelectComponent.prototype, "size", void 0);
__decorate([
Input(),
__metadata("design:type", String)
], NbSelectComponent.prototype, "status", void 0);
__decorate([
Input(),
__metadata("design:type", String)
], NbSelectComponent.prototype, "shape", void 0);
__decorate([
Input(),
__metadata("design:type", String)
], NbSelectComponent.prototype, "appearance", void 0);
__decorate([
Input(),
HostBinding('class.appearance-outline'),
__metadata("design:type", Boolean),
__metadata("design:paramtypes", [Boolean])
], NbSelectComponent.prototype, "outline", null);
__decorate([
Input(),
HostBinding('class.appearance-filled'),
__metadata("design:type", Boolean),
__metadata("design:paramtypes", [Boolean])
], NbSelectComponent.prototype, "filled", null);
__decorate([
Input(),
HostBinding('class.appearance-hero'),
__metadata("design:type", Boolean),
__metadata("design:paramtypes", [Boolean])
], NbSelectComponent.prototype, "hero", null);
__decorate([
Input(),
__metadata("design:type", Boolean),
__metadata("design:paramtypes", [Boolean])
], NbSelectComponent.prototype, "disabled", null);
__decorate([
Input(),
HostBinding('class.full-width'),
__metadata("design:type", Boolean),
__metadata("design:paramtypes", [Boolean])
], NbSelectComponent.prototype, "fullWidth", null);
__decorate([
Input(),
__metadata("design:type", String)
], NbSelectComponent.prototype, "placeholder", void 0);
__decorate([
Input(),
__metadata("design:type", Object),
__metadata("design:paramtypes", [Object])
], NbSelectComponent.prototype, "selected", null);
__decorate([
Input(),
__metadata("design:type", Boolean),
__metadata("design:paramtypes", [Boolean])
], NbSelectComponent.prototype, "multiple", null);
__decorate([
Output(),
__metadata("design:type", EventEmitter)
], NbSelectComponent.prototype, "selectedChange", void 0);
__decorate([
ContentChildren(NbOptionComponent, { descendants: true }),
__metadata("design:type", QueryList)
], NbSelectComponent.prototype, "options", void 0);
__decorate([
ContentChild(NbSelectLabelComponent),
__metadata("design:type", Object)
], NbSelectComponent.prototype, "customLabel", void 0);
__decorate([
ViewChild(NbPortalDirective),
__metadata("design:type", NbPortalDirective)
], NbSelectComponent.prototype, "portal", void 0);
__decorate([
ViewChild('selectButton', { read: ElementRef }),
__metadata("design:type", ElementRef)
], NbSelectComponent.prototype, "button", void 0);
__decorate([
HostBinding('class.open'),
__metadata("design:type", Boolean),
__metadata("design:paramtypes", [])
], NbSelectComponent.prototype, "isOpen", null);
__decorate([
HostBinding('class.size-tiny'),
__metadata("design:type", Boolean),
__metadata("design:paramtypes", [])
], NbSelectComponent.prototype, "tiny", null);
__decorate([
HostBinding('class.size-small'),
__metadata("design:type", Boolean),
__metadata("design:paramtypes", [])
], NbSelectComponent.prototype, "small", null);
__decorate([
HostBinding('class.size-medium'),
__metadata("design:type", Boolean),
__metadata("design:paramtypes", [])
], NbSelectComponent.prototype, "medium", null);
__decorate([
HostBinding('class.size-large'),
__metadata("design:type", Boolean),
__metadata("design:paramtypes", [])
], NbSelectComponent.prototype, "large", null);
__decorate([
HostBinding('class.size-giant'),
__metadata("design:type", Boolean),
__metadata("design:paramtypes", [])
], NbSelectComponent.prototype, "giant", null);
__decorate([
HostBinding('class.status-primary'),
__metadata("design:type", Boolean),
__metadata("design:paramtypes", [])
], NbSelectComponent.prototype, "primary", null);
__decorate([
HostBinding('class.status-info'),
__metadata("design:type", Boolean),
__metadata("design:paramtypes", [])
], NbSelectComponent.prototype, "info", null);
__decorate([
HostBinding('class.status-success'),
__metadata("design:type", Boolean),
__metadata("design:paramtypes", [])
], NbSelectComponent.prototype, "success", null);
__decorate([
HostBinding('class.status-warning'),
__metadata("design:type", Boolean),
__metadata("design:paramtypes", [])
], NbSelectComponent.prototype, "warning", null);
__decorate([
HostBinding('class.status-danger'),
__metadata("design:type", Boolean),
__metadata("design:paramtypes", [])
], NbSelectComponent.prototype, "danger", null);
__decorate([
HostBinding('class.status-basic'),
__metadata("design:type", Boolean),
__metadata("design:paramtypes", [])
], NbSelectComponent.prototype, "basic", null);
__decorate([
HostBinding('class.status-control'),
__metadata("design:type", Boolean),
__metadata("design:paramtypes", [])
], NbSelectComponent.prototype, "control", null);
__decorate([
HostBinding('class.shape-rectangle'),
__metadata("design:type", Boolean),
__metadata("design:paramtypes", [])
], NbSelectComponent.prototype, "rectangle", null);
__decorate([
HostBinding('class.shape-round'),
__metadata("design:type", Boolean),
__metadata("design:paramtypes", [])
], NbSelectComponent.prototype, "round", null);
__decorate([
HostBinding('class.shape-semi-round'),
__metadata("design:type", Boolean),
__metadata("design:paramtypes", [])
], NbSelectComponent.prototype, "semiRound", null);
NbSelectComponent = NbSelectComponent_1 = __decorate([
Component({
selector: 'nb-select',
template: "<button [disabled]=\"disabled\"\n [ngClass]=\"selectButtonClasses\"\n (blur)=\"trySetTouched()\"\n (keydown.arrowDown)=\"show()\"\n (keydown.arrowUp)=\"show()\"\n class=\"select-button\"\n type=\"button\"\n #selectButton>\n\n <ng-container *ngIf=\"selectionModel.length; else placeholderTemplate\">\n <ng-container *ngIf=\"customLabel; else defaultSelectionTemplate\">\n <ng-content select=\"nb-select-label\"></ng-content>\n </ng-container>\n\n <ng-template #defaultSelectionTemplate>{{ selectionView }}</ng-template>\n </ng-container>\n\n <ng-template #placeholderTemplate>{{ placeholder }}</ng-template>\n\n <nb-icon icon=\"chevron-down-outline\" pack=\"nebular-essentials\" (click)=\"disabled && $event.stopPropagation()\" aria-hidden=\"true\">\n </nb-icon>\n</button>\n\n<nb-option-list *nbPortal [size]=\"size\" [position]=\"overlayPosition\" [style.width.px]=\"hostWidth\">\n <ng-content select=\"nb-option, nb-option-group\"></ng-content>\n</nb-option-list>\n",
changeDetection: ChangeDetectionStrategy.OnPush,
providers: [
{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(function () { return NbSelectComponent_1; }),
multi: true,
},
{ provide: NB_SELECT_INJECTION_TOKEN, useExisting: NbSelectComponent_1 },
{ provide: NbFormFieldControl, useExisting: NbSelectComponent_1 },
{ provide: NbFormFieldControlConfig, useFactory: nbSelectFormFieldControlConfigFactory },
],
styles: ["/*!\n * @license\n * Copyright Akveo. All Rights Reserved.\n * Licensed under the MIT License. See License.txt in the project root for license information.\n */:host{display:inline-block;max-width:100%}[dir=ltr] :host .select-button{text-align:left}[dir=ltr] :host .select-button nb-icon{right:0.2em}[dir=rtl] :host .select-button{text-align:right}[dir=rtl] :host .select-button nb-icon{left:0.2em}:host(.full-width){width:100%}:host(.nb-transition) .select-button{transition-duration:0.15s;transition-p