ng2-materialize/dist/chip/chip-input/chip-input.component.js

An Angular 2+ wrap around Materialize library

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var core_1 = require("@angular/core");
var forms_1 = require("@angular/forms");
var MzChipInputComponent = (function () {
    function MzChipInputComponent(elementRef, zone) {
        this.elementRef = elementRef;
        this.zone = zone;
        this.add = new core_1.EventEmitter();
        this.delete = new core_1.EventEmitter();
        this.select = new core_1.EventEmitter();
        //#endregion ControlValueAccessor
        this.onChangeCallback = function (data) { };
    }
    Object.defineProperty(MzChipInputComponent.prototype, "value", {
        get: function () {
            return this.chipInputElement.material_chip('data');
        },
        enumerable: true,
        configurable: true
    });
    MzChipInputComponent.prototype.ngOnInit = function () {
        this.initElements();
        this.initMaterializeChip();
    };
    MzChipInputComponent.prototype.ngOnDestroy = function () {
        this.chipInputElement.off('chip.add');
        this.chipInputElement.off('chip.delete');
        this.chipInputElement.off('chip.select');
    };
    MzChipInputComponent.prototype.initElements = function () {
        this.chipInputElement = $(this.elementRef.nativeElement);
    };
    MzChipInputComponent.prototype.initMaterializeChip = function (value) {
        var _this = this;
        // fix issue autocomplete is not a function
        // https://github.com/Dogfalo/materialize/issues/4401
        this.zone.runOutsideAngular(function () {
            setTimeout(function () {
                _this.chipInputElement.material_chip({
                    autocompleteOptions: _this.autocompleteOptions,
                    data: value || _this.value,
                    placeholder: _this.placeholder,
                    secondaryPlaceholder: _this.secondaryPlaceholder,
                });
            });
        });
        this.chipInputElement.on('chip.add', function (event, chip) {
            _this.onChangeCallback(_this.value);
            _this.add.emit(chip);
        });
        this.chipInputElement.on('chip.delete', function (event, chip) {
            _this.onChangeCallback(_this.value);
            _this.delete.emit(chip);
        });
        this.chipInputElement.on('chip.select', function (event, chip) {
            _this.select.emit(chip);
        });
    };
    //#region ControlValueAccessor
    MzChipInputComponent.prototype.registerOnChange = function (fn) {
        this.onChangeCallback = fn;
    };
    MzChipInputComponent.prototype.registerOnTouched = function (fn) { };
    MzChipInputComponent.prototype.setDisabledState = function (isDisabled) { };
    MzChipInputComponent.prototype.writeValue = function (value) {
        if (value && value !== this.value) {
            this.initMaterializeChip(value);
        }
    };
    return MzChipInputComponent;
}());
MzChipInputComponent.decorators = [
    { type: core_1.Component, args: [{
                selector: 'mz-chip-input',
                template: "",
                styles: [":host{display:block}"],
                providers: [
                    {
                        provide: forms_1.NG_VALUE_ACCESSOR,
                        useExisting: core_1.forwardRef(function () { return MzChipInputComponent; }),
                        multi: true,
                    },
                ],
            },] },
];
/** @nocollapse */
MzChipInputComponent.ctorParameters = function () { return [
    { type: core_1.ElementRef, },
    { type: core_1.NgZone, },
]; };
MzChipInputComponent.propDecorators = {
    'autocompleteOptions': [{ type: core_1.Input },],
    'placeholder': [{ type: core_1.Input },],
    'secondaryPlaceholder': [{ type: core_1.Input },],
    'add': [{ type: core_1.Output },],
    'delete': [{ type: core_1.Output },],
    'select': [{ type: core_1.Output },],
};
exports.MzChipInputComponent = MzChipInputComponent;