ng2-tag-input - npm Package Compare versions

Comparing version 0.0.7 to 0.1.0

dist/ng2-tag-input.bundle.js

@@ -74,5 +74,4 @@ (function webpackUniversalModuleDefinition(root, factory) {
 	var common_1 = __webpack_require__(2);
-	var tag_input_constants_1 = __webpack_require__(3);
-	var tag_component_1 = __webpack_require__(4);
-	var tag_input_accessor_1 = __webpack_require__(11);
+	var constants_1 = __webpack_require__(3);
+	var accessor_1 = __webpack_require__(4);
 	var CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR = new core_1.Provider(common_1.NG_VALUE_ACCESSOR, {
@@ -82,3 +81,3 @@ useExisting: core_1.forwardRef(function () { return TagInput; }),
 	});
-	var styles = [__webpack_require__(12).toString()], template = __webpack_require__(14);
+	var styles = [__webpack_require__(5).toString()], template = __webpack_require__(9);
 	var TagInput = (function (_super) {
@@ -93,4 +92,4 @@ __extends(TagInput, _super);
 	        this.separatorKeys = [];
-	        this.placeholder = tag_input_constants_1.PLACEHOLDER;
-	        this.secondaryPlaceholder = tag_input_constants_1.SECONDARY_PLACEHOLDER;
+	        this.placeholder = constants_1.PLACEHOLDER;
+	        this.secondaryPlaceholder = constants_1.SECONDARY_PLACEHOLDER;
 	        this.maxItems = undefined;
@@ -110,11 +109,10 @@ this.readonly = undefined;
 	            },
-	            focus: function () {
+	            focus: function (keepTagSelected) {
+	                if (keepTagSelected === void 0) { keepTagSelected = false; }
 	                if (!_this.input.isVisible()) {
 	                    return;
 	                }
+	                _this.renderer.invokeElementMethod(_this.input.element, 'focus', []);
 	                _this.input.isFocused = true;
-	                _this.renderer.invokeElementMethod(_this.input.element, 'focus', []);
-	                if (_this.selectedTag) {
-	                    _this.selectedTag.unselect();
-	                }
+	                _this.select(undefined);
 	            }
@@ -127,9 +125,9 @@ };
 	    }
-	    TagInput.prototype.remove = function (tag) {
-	        this.value = this.value.filter(function (_item) { return _item !== tag.item; });
-	        if (this.selectedTag && this.selectedTag.item === tag.item) {
-	            this.selectedTag.unselect();
+	    TagInput.prototype.remove = function (item) {
+	        this.value = this.value.filter(function (_item) { return _item !== item; });
+	        if (this.selectedTag === item) {
+	            this.select(undefined);
 	        }
 	        this.input.focus.call(this);
-	        this.onRemove.emit(tag.item);
+	        this.onRemove.emit(item);
 	    };
@@ -148,9 +146,19 @@ TagInput.prototype.add = function () {
 	    TagInput.prototype.select = function (item) {
-	        var tags = this.tags.toArray();
-	        if (this.selectedTag) {
-	            this.selectedTag.unselect();
+	        if (this.readonly) {
+	            this.renderer.invokeElementMethod(this.element.nativeElement, 'focus', []);
+	            return;
 	        }
-	        tags.filter(function (_tag) { return _tag.item === item; })[0].select();
+	        this._selectedTag = item;
 	        this.onSelect.emit(item);
 	    };
+	    Object.defineProperty(TagInput.prototype, "selectedTag", {
+	        get: function () {
+	            return this._selectedTag;
+	        },
+	        set: function (tag) {
+	            this._selectedTag = tag;
+	        },
+	        enumerable: true,
+	        configurable: true
+	    });
 	    TagInput.prototype.fireEvents = function (eventName, $event) {
@@ -161,3 +169,3 @@ var _this = this;
 	    TagInput.prototype.handleKeydown = function ($event, item) {
-	        var vm = this, KEY = $event.keyCode, ACTION = tag_input_constants_1.KEY_PRESS_ACTIONS[KEY], itemIndex = this.value.indexOf(item), tags = this.tags.toArray();
+	        var vm = this, KEY = $event.keyCode, ACTION = constants_1.KEY_PRESS_ACTIONS[KEY], itemIndex = this.value.indexOf(item);
 	        function deleteSelectedTag() {
@@ -171,3 +179,3 @@ if (vm.selectedTag) {
 	                vm.select(vm.value[itemIndex - 1]);
-	                tags[itemIndex - 1].focus();
+	                vm.renderer.invokeElementMethod(vm.tagElements[itemIndex - 1], 'focus', []);
 	            }
@@ -181,3 +189,3 @@ else {
 	                vm.select(vm.value[itemIndex + 1]);
-	                tags[itemIndex + 1].focus();
+	                vm.renderer.invokeElementMethod(vm.tagElements[itemIndex + 1], 'focus', []);
 	            }
@@ -189,26 +197,17 @@ else {
 	        switch (ACTION) {
-	            case tag_input_constants_1.ACTIONS.DELETE:
+	            case constants_1.ACTIONS.DELETE:
 	                deleteSelectedTag();
 	                break;
-	            case tag_input_constants_1.ACTIONS.SWITCH_PREV:
+	            case constants_1.ACTIONS.SWITCH_PREV:
 	                switchPrev();
 	                break;
-	            case tag_input_constants_1.ACTIONS.SWITCH_NEXT:
+	            case constants_1.ACTIONS.SWITCH_NEXT:
 	                switchNext();
 	                break;
-	            case tag_input_constants_1.ACTIONS.TAB:
+	            case constants_1.ACTIONS.TAB:
 	                switchNext();
 	                break;
 	        }
-	        $event.preventDefault();
 	    };
-	    Object.defineProperty(TagInput.prototype, "selectedTag", {
-	        get: function () {
-	            return this.tags.toArray().filter(function (_tag) { return _tag.isSelected; })[0];
-	        },
-	        enumerable: true,
-	        configurable: true
-	    });
 	    TagInput.prototype.setupAdditionalKeysEvents = function () {
-	        var _this = this;
 	        var vm = this;
@@ -222,6 +221,6 @@ var listener = function ($event) {
 	        var backSpaceListener = function ($event) {
-	            var itemsLength = vm.value.length, inputValue = vm.form.find('item').value, index = vm.value.indexOf(inputValue), isCorrectKey = $event.keyCode === 37 || $event.keyCode === 8;
-	            if (isCorrectKey && itemsLength && !inputValue) {
+	            var itemsLength = vm.value.length, inputValue = vm.form.find('item').value, isCorrectKey = $event.keyCode === 37 || $event.keyCode === 8;
+	            if (isCorrectKey && !inputValue && itemsLength) {
 	                vm.select(vm.value[itemsLength - 1]);
-	                _this.tags.last.focus();
+	                vm.renderer.invokeElementMethod(vm.tagElements[itemsLength - 1], 'focus', []);
 	            }
@@ -244,4 +243,11 @@ };
 	    };
+	    TagInput.prototype.ngAfterContentInit = function () {
+	        this.hasTemplate = this.template && this.template.nativeElement.childElementCount > 0;
+	        if (this.hasTemplate) {
+	            this.element.nativeElement.querySelector('.tags-container').remove();
+	        }
+	    };
 	    TagInput.prototype.ngAfterViewChecked = function () {
 	        this.input.element = this.element.nativeElement.querySelector('input');
+	        this.tagElements = this.element.nativeElement.querySelectorAll('.tag');
 	    };
@@ -289,5 +295,5 @@ __decorate([
 	    __decorate([
-	        core_1.ViewChildren(tag_component_1.Tag), 
-	        __metadata('design:type', core_1.QueryList)
-	    ], TagInput.prototype, "tags", void 0);
+	        core_1.ViewChild('template'), 
+	        __metadata('design:type', core_1.ElementRef)
+	    ], TagInput.prototype, "template", void 0);
 	    TagInput = __decorate([
@@ -297,3 +303,3 @@ core_1.Component({
 	            selector: 'tag-input',
-	            directives: [tag_component_1.Tag],
+	            directives: [],
 	            providers: [CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR],
@@ -307,6 +313,6 @@ styles: styles,
 	    return TagInput;
-	}(tag_input_accessor_1.TagInputAccessor));
+	}(accessor_1.TagInputAccessor));
 	exports.TagInput = TagInput;
+	
 
-
 /***/ },
@@ -343,65 +349,42 @@ /* 1 */
 	};
+	
 
-
 /***/ },
 /* 4 */
-/***/ function(module, exports, __webpack_require__) {
+/***/ function(module, exports) {
 
 	"use strict";
-	var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
-	    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-	    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-	    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-	    return c > 3 && r && Object.defineProperty(target, key, r), r;
-	};
-	var __metadata = (this && this.__metadata) || function (k, v) {
-	    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
-	};
-	var core_1 = __webpack_require__(1);
-	var template = __webpack_require__(5), styles = [__webpack_require__(7).toString()];
-	var Tag = (function () {
-	    function Tag(element, renderer) {
-	        this.element = element;
-	        this.renderer = renderer;
-	        this.onRemove = new core_1.EventEmitter();
+	var TagInputAccessor = (function () {
+	    function TagInputAccessor() {
+	        this._value = [];
 	    }
-	    Tag.prototype.focus = function () {
-	        this.renderer.invokeElementMethod(this.element.nativeElement, 'focus', []);
+	    Object.defineProperty(TagInputAccessor.prototype, "value", {
+	        get: function () {
+	            return this._value;
+	        },
+	        set: function (items) {
+	            this._value = items;
+	            this._onChangeCallback(items);
+	        },
+	        enumerable: true,
+	        configurable: true
+	    });
+	    ;
+	    TagInputAccessor.prototype.onTouched = function (items) {
+	        this._onTouchedCallback(items);
 	    };
-	    Tag.prototype.select = function () {
-	        this.isSelected = true;
+	    TagInputAccessor.prototype.writeValue = function (items) {
+	        this._value = items;
 	    };
-	    Tag.prototype.unselect = function () {
-	        this.isSelected = false;
+	    TagInputAccessor.prototype.registerOnChange = function (fn) {
+	        this._onChangeCallback = fn;
 	    };
-	    Tag.prototype.remove = function () {
-	        this.onRemove.emit(this);
+	    TagInputAccessor.prototype.registerOnTouched = function (fn) {
+	        this._onTouchedCallback = fn;
 	    };
-	    Tag.prototype.ngOnInit = function () { };
-	    __decorate([
-	        core_1.Input(), 
-	        __metadata('design:type', String)
-	    ], Tag.prototype, "item", void 0);
-	    __decorate([
-	        core_1.Input(), 
-	        __metadata('design:type', Boolean)
-	    ], Tag.prototype, "readonly", void 0);
-	    __decorate([
-	        core_1.Output(), 
-	        __metadata('design:type', Object)
-	    ], Tag.prototype, "onRemove", void 0);
-	    Tag = __decorate([
-	        core_1.Component({
-	            moduleId: module.id,
-	            selector: 'tag',
-	            styles: styles,
-	            template: template
-	        }), 
-	        __metadata('design:paramtypes', [core_1.ElementRef, core_1.Renderer])
-	    ], Tag);
-	    return Tag;
+	    return TagInputAccessor;
 	}());
-	exports.Tag = Tag;
+	exports.TagInputAccessor = TagInputAccessor;
+	
 
-
 /***/ },
@@ -411,21 +394,9 @@ /* 5 */
 
-	module.exports = "<div class=\"tag\" *ngIf=\"item\">\n    <span class=\"tag__name\">\n        {{ item }}\n    </span>\n    <span class=\"tag__remove-button\" (click)=\"remove()\" *ngIf=\"!readonly\">\n        <img src=\"" + __webpack_require__(6) + "\" />\n    </span>\n</div>";
-
-/***/ },
-/* 6 */
-/***/ function(module, exports) {
-
-	module.exports = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAABl0lEQVRoQ+2Y0VEDMQxENx3QCSkBOkg6gMqgA+gASkg6oQRGTDzjudydV9YqcIPv17K9Tyv7PNph499u4/oxAH7bweHAcCCYgX9VQncAHgC8B5PWmn4A8AngqxVo46wDJv4DwB7AM4BXZvGOmCcALwBOAB4ZCAagFl80ZUAU8WUPCoIBMEvfZrKphJiKL9sdWyXLANhiSxsoIEJrswBZECHxnkNcLA1vWJWiZC2PA0oIifgeBxQQMvERgN4zIRUfBfBCyMUrAFiIFPEqgBaEjdvzYPop/iH0W4h51ixleW6uRLzSgdbtVEPIxGcArJWTjUnFD4CZ4mbOgdSFnqfE0oFmxJe5MggVwNo9/+evUeYnxcQwV/VVTNQBjzBPLA0TAegR1DNnFaYXICIkMldSQgoBijV+YLwOyDZWNQo8AErxrbcT/Z9gATLESyAYgM03tqy1aM3W++oKoC2mL/Tr5tn50kxebfIyDpiGGiJD/LScKPHeW2jT7XVHJdw2lC2h26py7DYAHMlKCR0OpKTVsehwwJGslNBvypV0Mel0u1AAAAAASUVORK5CYII="
-
-/***/ },
-/* 7 */
-/***/ function(module, exports, __webpack_require__) {
-
 	// style-loader: Adds some css to the DOM by adding a <style> tag
 
 	// load the styles
-	var content = __webpack_require__(8);
+	var content = __webpack_require__(6);
 	if(typeof content === 'string') content = [[module.id, content, '']];
 	// add the styles to the DOM
-	var update = __webpack_require__(10)(content, {});
+	var update = __webpack_require__(8)(content, {});
 	if(content.locals) module.exports = content.locals;
@@ -436,4 +407,4 @@ // Hot Module Replacement
 		if(!content.locals) {
-			module.hot.accept("!!./../../node_modules/css-loader/index.js!./../../node_modules/postcss-loader/index.js!./../../node_modules/sass-loader/index.js!./tag.style.scss", function() {
-				var newContent = require("!!./../../node_modules/css-loader/index.js!./../../node_modules/postcss-loader/index.js!./../../node_modules/sass-loader/index.js!./tag.style.scss");
+			module.hot.accept("!!./../node_modules/css-loader/index.js!./../node_modules/postcss-loader/index.js!./../node_modules/sass-loader/index.js!./style.scss", function() {
+				var newContent = require("!!./../node_modules/css-loader/index.js!./../node_modules/postcss-loader/index.js!./../node_modules/sass-loader/index.js!./style.scss");
 				if(typeof newContent === 'string') newContent = [[module.id, newContent, '']];
@@ -448,6 +419,6 @@ update(newContent);
 /***/ },
-/* 8 */
+/* 6 */
 /***/ function(module, exports, __webpack_require__) {
 
-	exports = module.exports = __webpack_require__(9)();
+	exports = module.exports = __webpack_require__(7)();
 	// imports
@@ -457,3 +428,3 @@
 	// module
-	exports.push([module.id, "tag {\n  display: -webkit-box;\n  display: -ms-flexbox;\n  display: flex;\n  -webkit-box-orient: horizontal;\n  -webkit-box-direction: normal;\n      -ms-flex-direction: row;\n          flex-direction: row;\n  font-family: \"Helvetica Neue\", Helvetica, Arial, sans-serif;\n  letter-spacing: 0.05rem;\n  background: #efefef;\n  color: #222;\n  cursor: pointer;\n  border-radius: 16px;\n  -webkit-transition: all 0.25s;\n  transition: all 0.25s;\n  margin: 0.1rem 0.2rem;\n  padding: 0.1rem 0.6rem;\n  height: 32px;\n  line-height: 30px;\n  font-weight: 300; }\n\ntag:focus {\n  background: #2196F3;\n  color: #fff;\n  outline: 0; }\n\ntag:not(:focus):hover {\n  background: #e6e6e6; }\n\n.tag__remove-button {\n  cursor: pointer; }\n\n.tag__remove-button img {\n  width: 16px;\n  vertical-align: sub; }\n", ""]);
+	exports.push([module.id, ".flex, .tag-input, .tag {\n  display: -webkit-box;\n  display: -ms-flexbox;\n  display: flex; }\n\n.tag-input {\n  -webkit-box-orient: horizontal;\n  -webkit-box-direction: normal;\n      -ms-flex-direction: row;\n          flex-direction: row;\n  -ms-flex-wrap: wrap;\n      flex-wrap: wrap;\n  -webkit-transition: all 0.15s;\n  transition: all 0.15s;\n  padding: 0.5rem 0.2rem;\n  min-height: 32px;\n  cursor: text;\n  border-bottom: 2px solid #efefef; }\n\n.tag-input:focus {\n  outline: 0; }\n\n.tag-input--focused {\n  border-bottom: 2px solid #2196F3; }\n\n.tag-input--invalid {\n  border-bottom: 2px solid red; }\n\n.tag-input form {\n  margin: 0.1em 0; }\n\n.tag-input__text-input {\n  border: none;\n  display: inline;\n  padding: 0 0.5rem;\n  vertical-align: middle;\n  font-size: 17px;\n  font-weight: 300;\n  height: 35px;\n  font-family: \"Helvetica Neue\", Helvetica, Arial, sans-serif; }\n\n.tag-input__text-input:focus {\n  outline: 0; }\n\n.tag {\n  -webkit-box-orient: horizontal;\n  -webkit-box-direction: normal;\n      -ms-flex-direction: row;\n          flex-direction: row;\n  font-family: \"Helvetica Neue\", Helvetica, Arial, sans-serif;\n  font-weight: 300;\n  letter-spacing: 0.05rem;\n  background: #efefef;\n  color: #222;\n  cursor: pointer;\n  border-radius: 16px;\n  -webkit-transition: all 0.25s;\n  transition: all 0.25s;\n  margin: 0.1rem 0.2rem;\n  padding: 0.1rem 0.8rem;\n  height: 32px;\n  line-height: 32px; }\n\n.tag--readonly {\n  cursor: default; }\n\n.tag--readonly:focus {\n  outline: 0; }\n\n.tag:not(.tag--readonly):focus {\n  background: #2196F3;\n  color: #fff;\n  outline: 0; }\n\n.tag:not(:focus):not(.tag--readonly):hover {\n  background: #e6e6e6; }\n\n.tag__remove-button {\n  margin-left: 6px;\n  line-height: 28px; }\n  .tag__remove-button img {\n    width: 15px;\n    vertical-align: sub; }\n", ""]);
 
@@ -464,3 +435,3 @@ // exports
 /***/ },
-/* 9 */
+/* 7 */
 /***/ function(module, exports) {
@@ -521,3 +492,3 @@
 /***/ },
-/* 10 */
+/* 8 */
 /***/ function(module, exports, __webpack_require__) {
@@ -774,84 +745,12 @@
 /***/ },
-/* 11 */
-/***/ function(module, exports) {
-
-	"use strict";
-	var TagInputAccessor = (function () {
-	    function TagInputAccessor() {
-	        this._value = [];
-	    }
-	    Object.defineProperty(TagInputAccessor.prototype, "value", {
-	        get: function () {
-	            return this._value;
-	        },
-	        set: function (items) {
-	            this._value = items;
-	            this._onChangeCallback(items);
-	        },
-	        enumerable: true,
-	        configurable: true
-	    });
-	    ;
-	    TagInputAccessor.prototype.onTouched = function (items) {
-	        this._onTouchedCallback(items);
-	    };
-	    TagInputAccessor.prototype.writeValue = function (items) {
-	        this._value = items;
-	    };
-	    TagInputAccessor.prototype.registerOnChange = function (fn) {
-	        this._onChangeCallback = fn;
-	    };
-	    TagInputAccessor.prototype.registerOnTouched = function (fn) {
-	        this._onTouchedCallback = fn;
-	    };
-	    return TagInputAccessor;
-	}());
-	exports.TagInputAccessor = TagInputAccessor;
-
-
-/***/ },
-/* 12 */
+/* 9 */
 /***/ function(module, exports, __webpack_require__) {
 
-	// style-loader: Adds some css to the DOM by adding a <style> tag
+	module.exports = "\n<!-- input tag container -->\n<div class=\"tag-input\"\n     tabindex=\"0\"\n     (click)=\"input.focus()\"\n     [class.tag-input--invalid]=\"!form.valid && form.controls.item.value\"\n     [class.tag-input--focused]=\"input.isFocused\">\n\n\n    <!-- tags [custom] -->\n    <div #template class=\"flex\">\n        <ng-content></ng-content>\n    </div>\n\n\n    <!-- tags [default] -->\n    <div class=\"tags-container flex\">\n        <div *ngFor=\"let item of value; trackBy: item; let i = index\"\n             (click)=\"select(item);$event.stopPropagation();\"\n             (keydown)=\"handleKeydown($event, item)\"\n             tabindex=\"0\"\n             class=\"tag\"\n             [class.tag--readonly]=\"readonly\"\n             [attr.aria-label]=\"item\">\n\n            <!-- tag name -->\n            <span class=\"tag__name\">\n                {{ item }}\n            </span>\n\n            <!-- remove 'x' button -->\n            <span class=\"tag__remove-button\"\n                  aria-label=\"Remove tag\"\n                  (click)=\"remove(item)\"\n                  *ngIf=\"!readonly\">\n                <img src=\"" + __webpack_require__(10) + "\" />\n            </span>\n        </div>\n    </div>\n\n\n    <!-- form -->\n    <form (ngSubmit)=\"add()\" *ngIf=\"input.isVisible.call(this)\" [ngFormModel]=\"form\">\n        <input type=\"text\"\n               required\n               class=\"tag-input__text-input\"\n               placeholder=\"{{ value.length ? placeholder : secondaryPlaceholder }}\"\n               (focus)=\"input.focus()\"\n               (blur)=\"input.isFocused = false\"\n               (keyup)=\"fireEvents('keyup', $event)\"\n               ngControl=\"item\"\n               tabindex=\"0\"\n               [attr.aria-label]=\"placeholder\"\n        />\n    </form>\n</div>\n";
 
-	// load the styles
-	var content = __webpack_require__(13);
-	if(typeof content === 'string') content = [[module.id, content, '']];
-	// add the styles to the DOM
-	var update = __webpack_require__(10)(content, {});
-	if(content.locals) module.exports = content.locals;
-	// Hot Module Replacement
-	if(false) {
-		// When the styles change, update the <style> tags
-		if(!content.locals) {
-			module.hot.accept("!!./../../node_modules/css-loader/index.js!./../../node_modules/postcss-loader/index.js!./../../node_modules/sass-loader/index.js!./tag-input.style.scss", function() {
-				var newContent = require("!!./../../node_modules/css-loader/index.js!./../../node_modules/postcss-loader/index.js!./../../node_modules/sass-loader/index.js!./tag-input.style.scss");
-				if(typeof newContent === 'string') newContent = [[module.id, newContent, '']];
-				update(newContent);
-			});
-		}
-		// When the module is disposed, remove the <style> tags
-		module.hot.dispose(function() { update(); });
-	}
-
 /***/ },
-/* 13 */
-/***/ function(module, exports, __webpack_require__) {
-
-	exports = module.exports = __webpack_require__(9)();
-	// imports
-
-
-	// module
-	exports.push([module.id, ".tag-input {\n  display: -webkit-box;\n  display: -ms-flexbox;\n  display: flex;\n  -webkit-box-orient: horizontal;\n  -webkit-box-direction: normal;\n      -ms-flex-direction: row;\n          flex-direction: row;\n  -ms-flex-wrap: wrap;\n      flex-wrap: wrap;\n  -webkit-transition: all 0.15s;\n  transition: all 0.15s;\n  padding: 0.5rem 0.2rem;\n  min-height: 32px;\n  cursor: text;\n  border-bottom: 2px solid #efefef; }\n\n.tag-input--focused {\n  border-bottom: 2px solid #2196F3; }\n\n.tag-input--invalid {\n  border-bottom: 2px solid red; }\n\n.tag-input form {\n  margin: 0.1em 0; }\n\n.tag-input__text-input {\n  border: none;\n  display: inline;\n  padding: 0 0.5rem;\n  vertical-align: middle;\n  font-size: 17px;\n  font-weight: 300;\n  height: 35px;\n  font-family: \"Helvetica Neue\", Helvetica, Arial, sans-serif; }\n\n.tag-input__text-input:focus {\n  outline: 0; }\n", ""]);
-
-	// exports
-
-
-/***/ },
-/* 14 */
+/* 10 */
 /***/ function(module, exports) {
 
-	module.exports = "<div class=\"tag-input\"\n     (click)=\"input.focus()\"\n     [class.tag-input--invalid]=\"!form.valid && form.controls.item.value\"\n     [class.tag-input--focused]=\"input.isFocused\">\n\n    <tag *ngFor=\"let item of value; trackBy: item; let i = index\"\n         (onRemove)=\"remove($event)\"\n         (click)=\"select(item);$event.stopPropagation();\"\n         (keydown)=\"handleKeydown($event, item)\"\n         [tabindex]=\"i\"\n         [readonly]=\"readonly\"\n         [item]=\"item\">\n    </tag>\n\n    <form (ngSubmit)=\"add()\" *ngIf=\"input.isVisible.call(this)\" [ngFormModel]=\"form\">\n        <input type=\"text\"\n               required\n               class=\"tag-input__text-input\"\n               placeholder=\"{{ value.length ? placeholder : secondaryPlaceholder }}\"\n               (focus)=\"input.focus()\"\n               (blur)=\"input.isFocused = false\"\n               (keyup)=\"fireEvents('keyup', $event)\"\n               ngControl=\"item\"\n               [tabindex]=\"value.length\"\n        />\n    </form>\n</div>\n";
+	module.exports = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAABl0lEQVRoQ+2Y0VEDMQxENx3QCSkBOkg6gMqgA+gASkg6oQRGTDzjudydV9YqcIPv17K9Tyv7PNph499u4/oxAH7bweHAcCCYgX9VQncAHgC8B5PWmn4A8AngqxVo46wDJv4DwB7AM4BXZvGOmCcALwBOAB4ZCAagFl80ZUAU8WUPCoIBMEvfZrKphJiKL9sdWyXLANhiSxsoIEJrswBZECHxnkNcLA1vWJWiZC2PA0oIifgeBxQQMvERgN4zIRUfBfBCyMUrAFiIFPEqgBaEjdvzYPop/iH0W4h51ixleW6uRLzSgdbtVEPIxGcArJWTjUnFD4CZ4mbOgdSFnqfE0oFmxJe5MggVwNo9/+evUeYnxcQwV/VVTNQBjzBPLA0TAegR1DNnFaYXICIkMldSQgoBijV+YLwOyDZWNQo8AErxrbcT/Z9gATLESyAYgM03tqy1aM3W++oKoC2mL/Tr5tn50kxebfIyDpiGGiJD/LScKPHeW2jT7XVHJdw2lC2h26py7DYAHMlKCR0OpKTVsehwwJGslNBvypV0Mel0u1AAAAAASUVORK5CYII="
 
@@ -858,0 +757,0 @@ /***/ }

index.js

@@ -5,1 +5,2 @@ "use strict";
 exports.TagInput = TagInput;
+//# sourceMappingURL=index.js.map

package.json

 {
   "name": "ng2-tag-input",
-  "version": "0.0.7",
+  "version": "0.1.0",
   "description": "Ng2TagInput: simple tag input component for Angular 2",
@@ -5,0 +5,0 @@ "scripts": {

README.md

@@ -8,3 +8,3 @@ # Angular2 Tag Input [![Build Status](https://travis-ci.org/Gbuomprisco/ng2-tag-input.svg?branch=develop)](https://travis-ci.org/Gbuomprisco/ng2-tag-input) [![codecov](https://codecov.io/gh/Gbuomprisco/ng2-tag-input/branch/develop/graph/badge.svg)](https://codecov.io/gh/Gbuomprisco/ng2-tag-input)
 
-Check out the live dem (with source code) here [http://www.webpackbin.com/VkRLliDHW](http://www.webpackbin.com/VkRLliDHW).
+Check out the live demo (with source code) here [http://www.webpackbin.com/VkRLliDHW](http://www.webpackbin.com/VkRLliDHW).
 
@@ -39,14 +39,14 @@ ## Quick start. Install the component from NPM by running:
 **@Input**
-- **`placeholder`** - (**`?string`**) - String that sets the placeholder of the input for entering new terms.
-- **`secondaryPlaceholder`** - (**`?string`**) - String that sets the placeholder of the input for entering new terms when there are 0 items entered.
-- **`maxItems`** -  (**`?number`**) - Sets the maximum number of items it is possible to enter.
-- **`readonly`** - (**`?boolean`**) - Sets the tag input static, not allowing deletion/addition of the items entered.
-- **`separatorKeys`** - (**`?string[]`**) - Array of keyboard keys with which is possible to define the key for separating terms. By default. only Enter is the defined key.
-- **`transform`** - (**`?(item: string) => string`**) - a function that takes as argument the value of an item, and returns a string with the new value when appended. If the method returns null/undefined/false, the item gets rejected.
-- **`validators`** - (**`?Validators[]`**) - an array of Validators (custom or Angular's) that will validate the tag before adding it to the list of items. It is possible to use multiple validators.
+- **`placeholder`** - [**`?string`**] - String that sets the placeholder of the input for entering new terms.
+- **`secondaryPlaceholder`** - [**`?string`**] - String that sets the placeholder of the input for entering new terms when there are 0 items entered.
+- **`maxItems`** -  [**`?number`**] - Sets the maximum number of items it is possible to enter.
+- **`readonly`** - [**`?boolean`**] - Sets the tag input static, not allowing deletion/addition of the items entered.
+- **`separatorKeys`** - [**`?number[]`**] - Array of keyboard keys with which is possible to define the key for separating terms. By default, only Enter is the defined key.
+- **`transform`** - [**`?(item: string) => string`**] - a function that takes as argument the value of an item, and returns a string with the new value when appended. If the method returns null/undefined/false, the item gets rejected.
+- **`validators`** - [**`?Validators[]`**] - an array of Validators (custom or Angular's) that will validate the tag before adding it to the list of items. It is possible to use multiple validators.
 
 **@Output**
-- **`onAdd`** - (**`onAdd(item: string)`**) - event fired when an item has been added
-- **`onRemove`** - (**`onRemove(item: string)`**) - event fired when an item has been removed
-- **`onSelect`** - (**`onSelect(item: string)`**) - event fired when an item has been selected
+- **`onAdd`** - [**`?onAdd(item: string)`**] - event fired when an item has been added
+- **`onRemove`** - [**`?onRemove(item: string)`**] - event fired when an item has been removed
+- **`onSelect`** - [**`?onSelect(item: string)`**] - event fired when an item has been selected
 
@@ -78,3 +78,4 @@ Basic examples:
     }
-
+    
+    // PROPERTIES
     <tag-input [(ngModel)]='items'
@@ -86,3 +87,4 @@ [placeholder]="options.placeholder"
     </tag-input>
-
+        
+    // EVENTS
     <tag-input [(ngModel)]='items'
@@ -92,3 +94,19 @@ (onRemove)="onItemRemoved($event)"
     </tag-input>
+    
+    
+    // CUSTOM TEMPLATES
+    // Input tag with a custom template
+    
+    <tag-input [(ngModel)]='items' #input> // create a reference #input to the controller in order to use its API
+        <div class='tag' *ngFor='let item of input.value'> // loop over the items
+            <div class='tag__name'> {{ item }} </span> // display its values
+            <span (click)="input.remove(item)">
+                Remove me
+            </span>
+        </div>
+    </tag-input>
 
 If you want to see more advanced examples, please have a look at [http://www.webpackbin.com/VkRLliDHW](http://www.webpackbin.com/VkRLliDHW).
+
+## What's next?
+- Autocomplete

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Number of lines in readme file

108

increased by20%

Worsened metrics

Total package byte prevSize

77016

decreased by-7.64%

Lines of code

742

decreased by-10.17%

Number of low supply chain risk alerts

2

increased byInfinity%

No dependency changes