@nbxx/nb-input/dist/nbinput/nbinput-select.component.js

Angular - nbinput

import { Component, EventEmitter, forwardRef, Input, Output } from '@angular/core';
import { NG_VALUE_ACCESSOR } from '@angular/forms';
import { NbFieldType } from './nbinput.entity';
export class NbinputSelectComponent {
    constructor() {
        this.onTouchedCallback = () => { };
        this.onChangeCallback = (_) => { };
        this.multiple = false;
        this._items = [];
        this._selectedCss = [];
        this._selectedTexts = [];
        this.readonly = false;
        this.placeholder = '';
        this.disabled = false;
        this.open = new EventEmitter();
        this.close = new EventEmitter();
        this.focus = new EventEmitter();
        this.search = new EventEmitter();
        this.blur = new EventEmitter();
        this.clear = new EventEmitter();
        this.add = new EventEmitter();
        this.scrollToEnd = new EventEmitter();
        this.remove = new EventEmitter();
        this.change = new EventEmitter();
    }
    registerOnChange(fn) { if (fn) {
        this.onChangeCallback = fn;
    } }
    registerOnTouched(fn) { if (fn) {
        this.onTouchedCallback = fn;
    } }
    setDisabledState(isDisabled) { this.disabled = isDisabled; }
    writeValue(obj) { this.data = obj; }
    set type(t) {
        this.multiple = (t && t == NbFieldType.Multiple);
    }
    get type() {
        return this.multiple ? NbFieldType.Multiple : NbFieldType.Massive;
    }
    set options(val) {
        if (val) {
            // console.log('opts:', val);
            this._items = val;
            if (this.readonly && (this._data != undefined && this._data != null)) {
                this.setSelected();
            }
        }
    }
    get data() {
        return this._data;
    }
    ;
    set data(val) {
        this._selectedTexts = [];
        if (val != null && val != undefined) {
            if (this.multiple && (typeof val === 'string' || !Array.isArray(val))) {
                this._data = [val];
            }
            else {
                this._data = val;
            }
            if (this.readonly && !!this._items && this._items.length > 0) {
                this.setSelected();
            }
        }
        else {
            this._data = null;
        }
    }
    setSelected() {
        // console.log('set selected text: ',this._data);
        this._selectedTexts = [];
        if (this.multiple) {
            this._data.forEach(d => {
                const item = this._items.find(f => f.value == d);
                if (item) {
                    this._selectedTexts.push(item.text);
                    let selc = '';
                    if (item.css) {
                        if (typeof item.css == 'string') {
                            selc = item.css;
                        }
                        else if (typeof item.css == 'object' && typeof item.css.length == 'number') {
                            selc = item.css.join(' ');
                        }
                    }
                    this._selectedCss.push(selc);
                }
            });
        }
        else {
            const item = this._items.find(f => f.value == this._data);
            if (item) {
                this._selectedTexts = [item.text];
                let selc = '';
                if (item.css) {
                    if (typeof item.css == 'string') {
                        selc = item.css;
                    }
                    else if (typeof item.css == 'object' && typeof item.css.length == 'number') {
                        selc = item.css.join(' ');
                    }
                }
                this._selectedCss = [selc];
            }
        }
    }
    onOpen(e) {
        // console.log('onOpen: ', e);
        this.open.emit(e);
    }
    onClose(e) {
        // console.log('onClose: ', e);
        this.close.emit(e);
    }
    onFocus(e) {
        // console.log('onFocus: ', e);
        this.focus.emit(e);
    }
    onSearch(e) {
        // console.log('onSearch: ', e);
        this.search.emit(e.value);
    }
    onBlur(e) {
        // console.log('onBlur: ', e);
        this.blur.emit(e.value);
    }
    onClear(e) {
        // console.log('onClear: ', e);
        this.clear.emit(e.value);
    }
    onAdd(e) {
        // console.log('onAdd: ', e);
        this.add.emit(e.value);
    }
    onScrollToEnd(e) {
        // console.log('scrollToEnd: ', e);
        this.scrollToEnd.emit(e.value);
    }
    onRemove(e) {
        // console.log('onRemove: ', e);
        this.remove.emit(e.value);
    }
    onChange(e) {
        // console.log('onChange: ', e);
        if (Array.isArray(e)) {
            this.change.emit(e.map(s => s.value));
            this.onChangeCallback(e.map(s => s.value));
        }
        else {
            this.change.emit(e ? e.value : null);
            this.onChangeCallback(e.value);
        }
    }
}
NbinputSelectComponent.decorators = [
    { type: Component, args: [{
                selector: 'nbinput-select',
                template: `
    <ng-container *ngIf="readonly;else ELSEBLOCK">
      <span [ngClass]="_selectedCss[0]">{{_selectedTexts.length>0?_selectedTexts[0]:'-'}}</span>
      <ng-container *ngIf="_selectedCss.length>1">
        <ng-container *ngFor="let opt of _selectedTexts;let idx = index">
          <span [ngClass]="_selectedCss[idx]">,{{opt}}</span>
        </ng-container>
      </ng-container>
    </ng-container>
    <ng-template #ELSEBLOCK>
      <ng-select class="nbinput-select"
                 [items]="_items" [bindLabel]="'text'" [bindValue]="'value'"
                 [(ngModel)]="data"
                 [attr.disabled]="disabled?true:null"
                 [markFirst]="false" [multiple]="multiple" [placeholder]="placeholder"
                 (open)="onOpen()"
                 (close)="onClose()"
                 (focus)="onFocus($event)"
                 (search)="onSearch($event)"
                 (blur)="onBlur($event)"
                 (clear)="onClear()"
                 (add)="onAdd($event)"
                 (scrollToEnd)="onScrollToEnd($event)"
                 (remove)="onRemove($event)"
                 (change)="onChange($event)"
      ></ng-select>
    </ng-template>
  `,
                providers: [{
                        provide: NG_VALUE_ACCESSOR,
                        useExisting: forwardRef(() => NbinputSelectComponent),
                        multi: true,
                    }]
            },] },
];
NbinputSelectComponent.propDecorators = {
    type: [{ type: Input }],
    options: [{ type: Input }],
    data: [{ type: Input }],
    readonly: [{ type: Input }],
    placeholder: [{ type: Input }],
    open: [{ type: Output }],
    close: [{ type: Output }],
    focus: [{ type: Output }],
    search: [{ type: Output }],
    blur: [{ type: Output }],
    clear: [{ type: Output }],
    add: [{ type: Output }],
    scrollToEnd: [{ type: Output }],
    remove: [{ type: Output }],
    change: [{ type: Output }],
    formControlName: [{ type: Input }]
};
//# sourceMappingURL=nbinput-select.component.js.map