items-text-box/bundles/items-text-box.umd.js

This is an Angular component of a textbox which allows users to input an array of text, and is compatible with Angular Reactive Forms. This component is exactly like the Chips component in Angular Material, as such this component is created for demonstrat

(function (global, factory) {
    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/common'), require('@angular/forms')) :
    typeof define === 'function' && define.amd ? define('items-text-box', ['exports', '@angular/core', '@angular/common', '@angular/forms'], factory) :
    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global['items-text-box'] = {}, global.ng.core, global.ng.common, global.ng.forms));
}(this, (function (exports, core, common, forms) { 'use strict';

    var ItemTextBoxComponent = /** @class */ (function () {
        function ItemTextBoxComponent() {
            var _this = this;
            this.items = [];
            this.text = '';
            this.touched = false;
            this.disabled = false;
            this.onChange = function (items) { };
            this.onTouched = function () { _this.touched = true; };
        }
        ItemTextBoxComponent.prototype.removeItem = function (item) {
            if (this.disabled) {
                return;
            }
            this.items.splice(item, 1);
            this.copyAndEmit();
        };
        ItemTextBoxComponent.prototype.ngOnInit = function () {
        };
        ItemTextBoxComponent.prototype.onEnter = function (value) {
            if (this.disabled) {
                return;
            }
            this.items.push(value);
            this.text = '';
            this.copyAndEmit();
        };
        ItemTextBoxComponent.prototype.removeLast = function () {
            if (this.disabled) {
                return;
            }
            if (this.text.length === 0) {
                this.items.pop();
                this.copyAndEmit();
            }
        };
        ItemTextBoxComponent.prototype.registerOnChange = function (onChange) {
            this.onChange = onChange;
        };
        ItemTextBoxComponent.prototype.registerOnTouched = function (onTouched) {
            this.onTouched = onTouched;
        };
        ItemTextBoxComponent.prototype.setDisabledState = function (isDisabled) {
            this.disabled = isDisabled;
        };
        ItemTextBoxComponent.prototype.writeValue = function (items) {
            if (!this.disabled) {
                this.onTouched();
                this.items = items ? items : [];
                this.copyAndEmit();
            }
        };
        ItemTextBoxComponent.prototype.registerOnValidatorChange = function (fn) {
        };
        ItemTextBoxComponent.prototype.validate = function (control) {
            return null;
        };
        ItemTextBoxComponent.prototype.copyAndEmit = function () {
            this.items = this.items.slice(0);
            this.onChange(this.items);
            this.onTouched();
        };
        return ItemTextBoxComponent;
    }());
    ItemTextBoxComponent.decorators = [
        { type: core.Component, args: [{
                    selector: 'item-text-box',
                    template: "<div>\n  <ul>\n    <li *ngFor=\"let item of items; let i = index\" (click)=\"removeItem(i)\">\n      {{item}}\n    </li>\n  </ul>\n  <input type='text' value=\"hi\" #input (keyup.enter)=\"onEnter(input.value)\" (keydown)=\"onTouched()\" (keydown.backspace)=\"removeLast()\" [(ngModel)]=\"text\" />\n</div>\n",
                    providers: [{
                            provide: forms.NG_VALUE_ACCESSOR,
                            multi: true,
                            useExisting: core.forwardRef(function () { return ItemTextBoxComponent; })
                        }, {
                            provide: forms.NG_VALIDATORS,
                            multi: true,
                            useExisting: core.forwardRef(function () { return ItemTextBoxComponent; })
                        }],
                    styles: ["div{cursor:text;display:flex;padding:1px;position:relative;overflow:hidden;border:1px inset #767676;border-radius:3px;line-height:1em}input{flex-grow:1;outline:0;border:0;margin:1px}ul{padding:0;margin:0}li,ul{display:flex}li{list-style:none;border-radius:3px;border:1px solid #000;margin:0 3px;padding:0 3px;align-items:center}li:after{content:\"\u00D7\";background-color:#303030;color:#fff;font-family:sans-serif;border-radius:50%;margin-left:3px;cursor:pointer;font-size:x-small;box-sizing:border-box;width:1.2em;height:1.2em;text-align:center;line-height:1.1}"]
                },] }
    ];

    var ItemTextBoxModule = /** @class */ (function () {
        function ItemTextBoxModule() {
        }
        return ItemTextBoxModule;
    }());
    ItemTextBoxModule.decorators = [
        { type: core.NgModule, args: [{
                    declarations: [
                        ItemTextBoxComponent
                    ],
                    imports: [
                        common.CommonModule,
                        forms.FormsModule
                    ],
                    exports: [
                        ItemTextBoxComponent
                    ]
                },] }
    ];

    /**
     * Generated bundle index. Do not edit.
     */

    exports.ItemTextBoxModule = ItemTextBoxModule;
    exports.ɵa = ItemTextBoxComponent;

    Object.defineProperty(exports, '__esModule', { value: true });

})));
//# sourceMappingURL=items-text-box.umd.js.map