@nbxx/nb-input/dist/nbinput/nbinput-option.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 NbinputOptionComponent {
    constructor() {
        this.onTouchedCallback = () => { };
        this.onChangeCallback = (_) => { };
        this.multiple = false;
        this._items = [];
        this._selectedCss = [];
        this._selectedTexts = [];
        this.readonly = false;
        this.placeholder = '';
        this.disabled = false;
        this.onAdded = new EventEmitter();
        this.onRemoved = new EventEmitter();
        this.onCleared = new EventEmitter();
        this.onChange = new EventEmitter();
    }
    set type(t) {
        this.multiple = (t && t == NbFieldType.Multiple);
    }
    get type() {
        return this.multiple ? NbFieldType.Multiple : NbFieldType.Massive;
    }
    set options(val) {
        // console.log('opts:',val);
        if (val) {
            this._items = val;
            if (!!this._data && this._data.length > 0) {
                this.setSelected();
            }
        }
    }
    onBlur() {
        this.onTouchedCallback();
    }
    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._items && this._items.length > 0) {
                this.setSelected();
            }
            this.onChangeCallback(this._data);
        }
        else {
            this._data = null;
        }
    }
    get value() {
        return this.data;
    }
    ;
    set value(v) {
        if (v !== this.data) {
            this.data = v;
            this.onChangeCallback(v);
        }
    }
    setSelected() {
        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.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);
            }
        }
    }
    registerOnChange(fn) { if (fn) {
        this.onChangeCallback = fn;
    } }
    registerOnTouched(fn) { if (fn) {
        this.onTouchedCallback = fn;
    } }
    setDisabledState(isDisabled) { this.disabled = isDisabled; }
    writeValue(obj) {
        this.value = obj;
    }
    added(e) {
        // console.log('added: ',e);
        this.onAdded.emit(e.value);
    }
    removed(e) {
        // console.log('removed: ',e);
        this.onRemoved.emit(e.value);
    }
    cleared(e) {
        this.onCleared.emit(e.value);
    }
    changed(e) {
        // console.log('changed: ',e);
        if (Array.isArray(e)) {
            // console.log('isarr');
            this.onChange.emit(e.map(s => s.value));
            this.onChangeCallback(e.map(s => s.value));
        }
        else {
            this.onChange.emit(e ? e.value : null);
            this.onChangeCallback(e ? e.value : null);
        }
    }
}
NbinputOptionComponent.decorators = [
    { type: Component, args: [{
                selector: 'nbinput-option',
                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"
                 (changeEvent)="changed($event)" (addEvent)="added($event)" (removeEvent)="removed($event)" (clearEvent)="cleared($event)"
      ></ng-select>
    </ng-template>
  `,
                styles: [`
    ng-select{min-width:80px}
  `],
                providers: [
                    {
                        provide: NG_VALUE_ACCESSOR,
                        useExisting: forwardRef(() => NbinputOptionComponent),
                        multi: true
                    }
                ]
            },] },
];
NbinputOptionComponent.propDecorators = {
    type: [{ type: Input }],
    options: [{ type: Input }],
    data: [{ type: Input }],
    readonly: [{ type: Input }],
    placeholder: [{ type: Input }],
    onAdded: [{ type: Output }],
    onRemoved: [{ type: Output }],
    onCleared: [{ type: Output }],
    onChange: [{ type: Output }]
};
//# sourceMappingURL=nbinput-option.component.js.map