import * as tslib_1 from "tslib";
import { Component, Input, Output, EventEmitter, ElementRef, ViewEncapsulation, ChangeDetectionStrategy, forwardRef, ChangeDetectorRef, ViewChild, ViewChildren, QueryList, Renderer2 } from '@angular/core';
import { NG_VALUE_ACCESSOR } from '@angular/forms';
import { ENTER, BACKSPACE } from '../core/keycodes';
import { ListItemDirective } from './chips.directive';
/*
 * Provider Expression that allows component to register as a ControlValueAccessor.
 * This allows it to support [(ngModel)].
 * @docs-private
 */
var CHIPS_VALUE_ACCESSOR = {
    provide: NG_VALUE_ACCESSOR,
    useExisting: forwardRef(function () { return ChipsComponent; }),
    multi: true
};
var ChipsComponent = /** @class */ (function () {
    function ChipsComponent(el, _cd, render) {
        this.el = el;
        this._cd = _cd;
        this.render = render;
        /**
         * The event emitted when chips value changes
         */
        this.change = new EventEmitter();
        /**
         * Default chips value
         * @default []
         */
        this.value = [];
        /**
         * Whether the chips is disabled
         * @default false
         */
        this.disabled = false;
        /**
         * placeholder
         * @default '请输入'
         */
        this.placeholder = '请输入';
    }
    /**
     * Input event
     * @param {number} k event type
     * @param {string} v input value
     * @docs-private
     */
    ChipsComponent.prototype.onInputValue = function (k, v) {
        if (this.disabled) {
            return;
        }
        try {
            var codeEl = this.liInput.nativeElement;
            switch (k) {
                case ENTER:
                    if (!v) {
                        this.render.setProperty(codeEl, 'value', '');
                        break;
                    }
                    this.render.setProperty(codeEl, 'value', '');
                    this.value = this.value.concat(v);
                    this.change.emit(this.value);
                    this._markForCheck();
                    break;
                case BACKSPACE:
                    if (!v.length && this.chipsLi.length) {
                        this.value = this.value.slice(0, -1);
                        this.change.emit(this.value);
                        this._markForCheck();
                    }
                    break;
            }
        }
        catch (error) {
            throw new Error('only work in browser, see error: ' + error);
        }
    };
    /**
     * Delete chip event
     * @param {string} v to delete value
     * @docs-private
     */
    ChipsComponent.prototype.onDelChip = function (i) {
        if (this.disabled) {
            return;
        }
        this.value = this.value.slice(0, i).concat(this.value.slice(i + 1));
        this.change.emit(this.value);
        this._markForCheck();
    };
    /**
     * Imitate input focus event
     * @param {object} input input element
     * @docs-private
     */
    ChipsComponent.prototype.inputFocus = function () {
        var codeEl = this.liInput.nativeElement;
        codeEl.focus();
    };
    /**
     * Registers a callback that will be triggered when the value has changed.
     * Implemented as part of ControlValueAccessor.
     * @param fn On change callback function.
     */
    ChipsComponent.prototype.registerOnChange = function (fn) {
        this._onModelChange = fn;
    };
    /**
     * Registers a callback that will be triggered when the control has been touched.
     * Implemented as part of ControlValueAccessor.
     * @param fn On touch callback function.
     */
    ChipsComponent.prototype.registerOnTouched = function (fn) {
        this._onTouch = fn;
    };
    /**
     * Sets the model value. Implemented as part of ControlValueAccessor.
     * @param {any} value - value to be set to the model.
     */
    ChipsComponent.prototype.writeValue = function (value) {
        if (value) {
            this.value = value;
            this._cd.markForCheck();
        }
    };
    /**
     * Toggles the disabled state of the component. Implemented as part of ControlValueAccessor.
     * @param {boolean} isDisabled - Whether the component should be disabled.
     */
    ChipsComponent.prototype.setDisabledState = function (isDisabled) {
        this.disabled = isDisabled;
    };
    /**
     * update form model value and mark for check
     * @docs-private
     */
    ChipsComponent.prototype._markForCheck = function () {
        if (this._onModelChange) {
            this._onModelChange(this.value);
        }
        if (this._onTouch) {
            this._onTouch(this.value);
        }
        // this._cd.markForCheck();
    };
    tslib_1.__decorate([
        Output(),
        tslib_1.__metadata("design:type", EventEmitter)
    ], ChipsComponent.prototype, "change", void 0);
    tslib_1.__decorate([
        Input(),
        tslib_1.__metadata("design:type", Array)
    ], ChipsComponent.prototype, "value", void 0);
    tslib_1.__decorate([
        Input(),
        tslib_1.__metadata("design:type", Boolean)
    ], ChipsComponent.prototype, "disabled", void 0);
    tslib_1.__decorate([
        Input(),
        tslib_1.__metadata("design:type", String)
    ], ChipsComponent.prototype, "placeholder", void 0);
    tslib_1.__decorate([
        ViewChild('input', { static: false }),
        tslib_1.__metadata("design:type", ElementRef)
    ], ChipsComponent.prototype, "liInput", void 0);
    tslib_1.__decorate([
        ViewChildren(ListItemDirective),
        tslib_1.__metadata("design:type", QueryList)
    ], ChipsComponent.prototype, "chipsLi", void 0);
    ChipsComponent = tslib_1.__decorate([
        Component({
            selector: 'nb-chips',
            template: "<div class=\"nb-chips\"><div class=\"nb-chips-wrap\" [class.nb-chips-disabled]=\"disabled\" (click)=\"inputFocus()\"><ul><li *ngFor=\"let chip of value; let i=index\" class=\"nb-chips-label\">{{ chip }} <i class=\"iconfont icon-close\" (click)=\"onDelChip(i)\"></i></li><li><input #input [placeholder]=\"placeholder\" (keydown)=\"onInputValue($event.keyCode, $event.target.value.trim())\" [disabled]=\"disabled\"></li></ul></div></div>",
            encapsulation: ViewEncapsulation.None,
            changeDetection: ChangeDetectionStrategy.OnPush,
            providers: [CHIPS_VALUE_ACCESSOR, ListItemDirective],
            preserveWhitespaces: false,
            host: {
                'class': 'nb-widget nb-chips'
            },
            exportAs: 'nbChips'
        }),
        tslib_1.__metadata("design:paramtypes", [ElementRef,
            ChangeDetectorRef,
            Renderer2])
    ], ChipsComponent);
    return ChipsComponent;
}());
export { ChipsComponent };
//# sourceMappingURL=chips.js.map