ng2-tag-input - npm Package Compare versions

Comparing version 0.1.5 to 0.1.6

dist/ng2-tag-input.bundle.js

@@ -81,2 +81,3 @@ (function webpackUniversalModuleDefinition(root, factory) {
 	var styles = [__webpack_require__(5).toString()], template = __webpack_require__(9);
+	var icon_1 = __webpack_require__(10);
 	var TagInput = (function (_super) {
@@ -104,3 +105,3 @@ __extends(TagInput, _super);
 	            isVisible: function () {
-	                var maxItemsReached = _this.maxItems !== undefined && _this.value.length === _this.maxItems;
+	                var maxItemsReached = _this.maxItems !== undefined && _this.items.length === _this.maxItems;
 	                return !_this.readonly && !maxItemsReached;
@@ -124,3 +125,3 @@ },
 	    TagInput.prototype.remove = function (item) {
-	        this.value = this.value.filter(function (_item) { return _item !== item; });
+	        this.items = this.items.filter(function (_item) { return _item !== item; });
 	        if (this.selectedTag === item) {
@@ -135,3 +136,3 @@ this.select(undefined);
 	        control.updateValue(item);
-	        var isDupe = vm.value.indexOf(item) !== -1;
+	        var isDupe = vm.items.indexOf(item) !== -1;
 	        if (!vm.input.isVisible() || !vm.form.valid || isDupe) {
@@ -141,3 +142,3 @@ control.updateValue('');
 	        }
-	        vm.value.push(item);
+	        vm.items.push(item);
 	        control.updateValue('');
@@ -169,3 +170,3 @@ vm.onAdd.emit(item);
 	    TagInput.prototype.handleKeydown = function ($event, item) {
-	        var vm = this, KEY = $event.keyCode, ACTION = constants_1.KEY_PRESS_ACTIONS[KEY], itemIndex = this.value.indexOf(item);
+	        var vm = this, KEY = $event.keyCode, ACTION = constants_1.KEY_PRESS_ACTIONS[KEY], itemIndex = this.items.indexOf(item);
 	        function deleteSelectedTag() {
@@ -178,3 +179,3 @@ if (vm.selectedTag) {
 	            if (itemIndex > 0) {
-	                vm.select(vm.value[itemIndex - 1]);
+	                vm.select(vm.items[itemIndex - 1]);
 	                vm.renderer.invokeElementMethod(vm.tagElements[itemIndex - 1], 'focus', []);
@@ -187,4 +188,4 @@ }
 	        function switchNext() {
-	            if (itemIndex < vm.value.length - 1) {
-	                vm.select(vm.value[itemIndex + 1]);
+	            if (itemIndex < vm.items.length - 1) {
+	                vm.select(vm.items[itemIndex + 1]);
 	                vm.renderer.invokeElementMethod(vm.tagElements[itemIndex + 1], 'focus', []);
@@ -220,5 +221,5 @@ }
 	        var backSpaceListener = function ($event) {
-	            var itemsLength = vm.value.length, inputValue = vm.form.find('item').value, isCorrectKey = $event.keyCode === 37 || $event.keyCode === 8;
+	            var itemsLength = vm.items.length, inputValue = vm.form.find('item').value, isCorrectKey = $event.keyCode === 37 || $event.keyCode === 8;
 	            if (isCorrectKey && !inputValue && itemsLength) {
-	                vm.select(vm.value[itemsLength - 1]);
+	                vm.select(vm.items[itemsLength - 1]);
 	                vm.renderer.invokeElementMethod(vm.tagElements[itemsLength - 1], 'focus', []);
@@ -234,4 +235,4 @@ }
 	        this.setupAdditionalKeysEvents();
-	        if (this.maxItems !== undefined && this.value.length > this.maxItems) {
-	            this.maxItems = this.value.length;
+	        if (this.maxItems !== undefined && this.items.length > this.maxItems) {
+	            this.maxItems = this.items.length;
 	            console.warn('The number of items specified was greater than the property max-items.');
@@ -305,3 +306,3 @@ }
 	            selector: 'tag-input',
-	            directives: [],
+	            directives: [icon_1.DeleteIcon],
 	            providers: [CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR],
@@ -331,10 +332,10 @@ styles: styles,
 	    function TagInputAccessor() {
-	        this._value = [];
+	        this._items = [];
 	    }
-	    Object.defineProperty(TagInputAccessor.prototype, "value", {
+	    Object.defineProperty(TagInputAccessor.prototype, "items", {
 	        get: function () {
-	            return this._value;
+	            return this._items;
 	        },
 	        set: function (items) {
-	            this._value = items;
+	            this._items = items;
 	            this._onChangeCallback(items);
@@ -350,3 +351,3 @@ },
 	    TagInputAccessor.prototype.writeValue = function (items) {
-	        this._value = items;
+	        this._items = items;
 	    };
@@ -426,3 +427,3 @@ TagInputAccessor.prototype.registerOnChange = function (fn) {
 	// module
-	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.tags-container {\n  -ms-flex-wrap: wrap;\n      flex-wrap: wrap; }\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  -ms-flex-wrap: wrap;\n      flex-wrap: wrap;\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", ""]);
+	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.tags-container {\n  -ms-flex-wrap: wrap;\n      flex-wrap: wrap; }\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  -ms-flex-wrap: wrap;\n      flex-wrap: wrap;\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.15rem 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:focus path {\n  fill: #fff; }\n\n.tag__remove-button {\n  margin-left: 6px;\n  width: 16px;\n  height: 26px;\n  -ms-flex-item-align: center;\n      align-self: center;\n  -webkit-transition: all 0.15s;\n  transition: all 0.15s; }\n\n.tag__remove-button:hover {\n  -webkit-transform: scale(1.3);\n          transform: scale(1.3); }\n", ""]);
 
@@ -742,11 +743,41 @@ // exports
 /* 9 */
+/***/ function(module, exports) {
+
+	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    <!-- tags [custom] -->\n    <div #template class=\"tags-container tags-container--custom flex\">\n        <ng-content></ng-content>\n    </div>\n\n    <!-- tags [default] -->\n    <div class=\"tags-container tags-container--default flex\">\n        <div *ngFor=\"let item of items; 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            <delete-icon class=\"tag__remove-button\"\n                  aria-label=\"Remove tag\"\n                  (click)=\"remove(item)\"\n                  *ngIf=\"!readonly\">\n            </delete-icon>\n        </div>\n\n        <!-- form -->\n        <form (ngSubmit)=\"add()\" *ngIf=\"items && input.isVisible.call(this)\" [formGroup]=\"form\">\n            <input type=\"text\"\n                   required\n                   class=\"tag-input__text-input\"\n                   placeholder=\"{{ items.length ? placeholder : secondaryPlaceholder }}\"\n                   (focus)=\"input.focus()\"\n                   (blur)=\"input.isFocused = false\"\n                   (keyup)=\"fireEvents('keyup', $event)\"\n                   formControlName=\"item\"\n                   tabindex=\"0\"\n                   [attr.aria-label]=\"placeholder\"\n            />\n        </form>\n    </div>\n</div>\n";
+
+/***/ },
+/* 10 */
 /***/ function(module, exports, __webpack_require__) {
 
-	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    <!-- tags [custom] -->\n    <div #template class=\"tags-container tags-container--custom flex\">\n        <ng-content></ng-content>\n    </div>\n\n    <!-- tags [default] -->\n    <div class=\"tags-container tags-container--default 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\n        <!-- form -->\n        <form (ngSubmit)=\"add()\" *ngIf=\"value && input.isVisible.call(this)\" [formGroup]=\"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                   formControlName=\"item\"\n                   tabindex=\"0\"\n                   [attr.aria-label]=\"placeholder\"\n            />\n        </form>\n    </div>\n</div>\n";
+	"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 DeleteIcon = (function () {
+	    function DeleteIcon() {
+	    }
+	    DeleteIcon = __decorate([
+	        core_1.Component({
+	            selector: 'delete-icon',
+	            template: __webpack_require__(11)
+	        }), 
+	        __metadata('design:paramtypes', [])
+	    ], DeleteIcon);
+	    return DeleteIcon;
+	}());
+	exports.DeleteIcon = DeleteIcon;
+	
 
 /***/ },
-/* 10 */
+/* 11 */
 /***/ function(module, exports) {
 
-	module.exports = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAABl0lEQVRoQ+2Y0VEDMQxENx3QCSkBOkg6gMqgA+gASkg6oQRGTDzjudydV9YqcIPv17K9Tyv7PNph499u4/oxAH7bweHAcCCYgX9VQncAHgC8B5PWmn4A8AngqxVo46wDJv4DwB7AM4BXZvGOmCcALwBOAB4ZCAagFl80ZUAU8WUPCoIBMEvfZrKphJiKL9sdWyXLANhiSxsoIEJrswBZECHxnkNcLA1vWJWiZC2PA0oIifgeBxQQMvERgN4zIRUfBfBCyMUrAFiIFPEqgBaEjdvzYPop/iH0W4h51ixleW6uRLzSgdbtVEPIxGcArJWTjUnFD4CZ4mbOgdSFnqfE0oFmxJe5MggVwNo9/+evUeYnxcQwV/VVTNQBjzBPLA0TAegR1DNnFaYXICIkMldSQgoBijV+YLwOyDZWNQo8AErxrbcT/Z9gATLESyAYgM03tqy1aM3W++oKoC2mL/Tr5tn50kxebfIyDpiGGiJD/LScKPHeW2jT7XVHJdw2lC2h26py7DYAHMlKCR0OpKTVsehwwJGslNBvypV0Mel0u1AAAAAASUVORK5CYII="
+	module.exports = "<svg enable-background=\"new 0 0 32 32\" height=\"16px\" id=\"Слой_1\" version=\"1.1\" viewBox=\"0 0 32 32\" width=\"16px\" xml:space=\"preserve\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\"><path d=\"M17.459,16.014l8.239-8.194c0.395-0.391,0.395-1.024,0-1.414c-0.394-0.391-1.034-0.391-1.428,0  l-8.232,8.187L7.73,6.284c-0.394-0.395-1.034-0.395-1.428,0c-0.394,0.396-0.394,1.037,0,1.432l8.302,8.303l-8.332,8.286  c-0.394,0.391-0.394,1.024,0,1.414c0.394,0.391,1.034,0.391,1.428,0l8.325-8.279l8.275,8.276c0.394,0.395,1.034,0.395,1.428,0  c0.394-0.396,0.394-1.037,0-1.432L17.459,16.014z\" fill=\"#121313\" id=\"Close\"/><g/><g/><g/><g/><g/><g/></svg>\n";
 
@@ -753,0 +784,0 @@ /***/ }

dist/vendor.bundle.js

@@ -10,3 +10,3 @@ (function webpackUniversalModuleDefinition(root, factory) {
 		root["ng2-tag-input"] = factory(root["@angular/core"], root["@angular/forms"], root["@angular/common"]);
-})(this, function(__WEBPACK_EXTERNAL_MODULE_1__, __WEBPACK_EXTERNAL_MODULE_3__, __WEBPACK_EXTERNAL_MODULE_11__) {
+})(this, function(__WEBPACK_EXTERNAL_MODULE_1__, __WEBPACK_EXTERNAL_MODULE_3__, __WEBPACK_EXTERNAL_MODULE_12__) {
 return /******/ (function(modules) { // webpackBootstrap
@@ -54,8 +54,9 @@ /******/ 	// The module cache
 /************************************************************************/
-/******/ ([
-/* 0 */
+/******/ ({
+
+/***/ 0:
 /***/ function(module, exports, __webpack_require__) {
 
 	__webpack_require__(1);
-	__webpack_require__(11);
+	__webpack_require__(12);
 	module.exports = __webpack_require__(3);
@@ -65,3 +66,4 @@
 /***/ },
-/* 1 */
+
+/***/ 1:
 /***/ function(module, exports) {
@@ -72,4 +74,4 @@
 /***/ },
-/* 2 */,
-/* 3 */
+
+/***/ 3:
 /***/ function(module, exports) {
@@ -80,18 +82,13 @@
 /***/ },
-/* 4 */,
-/* 5 */,
-/* 6 */,
-/* 7 */,
-/* 8 */,
-/* 9 */,
-/* 10 */,
-/* 11 */
+
+/***/ 12:
 /***/ function(module, exports) {
 
-	module.exports = __WEBPACK_EXTERNAL_MODULE_11__;
+	module.exports = __WEBPACK_EXTERNAL_MODULE_12__;
 
 /***/ }
-/******/ ])
+
+/******/ })
 });
 ;
 //# sourceMappingURL=vendor.map

package.json

 {
   "name": "ng2-tag-input",
-  "version": "0.1.5",
+  "version": "0.1.6",
   "description": "Ng2TagInput: simple tag input component for Angular 2",
@@ -13,3 +13,3 @@ "scripts": {
     "start": "npm run server",
-    "test": "karma start karma.conf.js --single-run"
+    "test": "karma start karma.conf.js"
   },
@@ -23,12 +23,12 @@ "author": {
   "devDependencies": {
-    "@angular/common": "2.0.0-rc.4",
-    "@angular/compiler": "2.0.0-rc.4",
-    "@angular/core": "2.0.0-rc.4",
-    "@angular/forms": "^0.1.1",
-    "@angular/http": "2.0.0-rc.4",
-    "@angular/platform-browser": "2.0.0-rc.4",
-    "@angular/platform-browser-dynamic": "2.0.0-rc.4",
-    "@angular/platform-server": "2.0.0-rc.4",
-    "@angular/router": "2.0.0-rc.2",
-    "autoprefixer": "^6.3.6",
+    "@angular/common": "^2.0.0-rc.4",
+    "@angular/compiler": "^2.0.0-rc.4",
+    "@angular/core": "^2.0.0-rc.4",
+    "@angular/forms": "^0.2.0",
+    "@angular/http": "^2.0.0-rc.4",
+    "@angular/platform-browser": "^2.0.0-rc.4",
+    "@angular/platform-browser-dynamic": "^2.0.0-rc.4",
+    "@angular/platform-server": "^2.0.0-rc.4",
+    "@angular/router": "^2.0.0-rc.2",
+    "autoprefixer": "^6.3.7",
     "awesome-typescript-loader": "~0.16.2",
@@ -44,3 +44,3 @@ "core-js": "^2.2.0",
     "karma-chrome-launcher": "^0.2.3",
-    "karma-coverage": "^1.0.0",
+    "karma-coverage": "^1.1.0",
     "karma-jasmine": "^0.3.8",
@@ -55,3 +55,3 @@ "karma-sourcemap-loader": "^0.3.7",
     "rxjs": "5.0.0-beta.6",
-    "sass-loader": "^3.2.1",
+    "sass-loader": "^3.2.3",
     "source-map-loader": "^0.1.5",
@@ -61,3 +61,3 @@ "style-loader": "^0.13.1",
     "ts-node": "^0.7.3",
-    "tslint": "^3.5.0",
+    "tslint": "^3.13.0",
     "typescript": "~1.8.9",
@@ -64,0 +64,0 @@ "typings": "~1.0.3",

README.md

@@ -26,3 +26,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)
     import {App} from './home/home';
-    
+
     bootstrap(App, [
@@ -60,2 +60,3 @@ disableDeprecatedForms(),
 **@Input**
+- **`ngModel`** - [**`string[]`**] - Model of the component. Accepts an array of strings as input.
 - **`placeholder`** - [**`?string`**] - String that sets the placeholder of the input for entering new terms.
@@ -62,0 +63,0 @@ - **`secondaryPlaceholder`** - [**`?string`**] - String that sets the placeholder of the input for entering new terms when there are 0 items entered.

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

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

Improved metrics

Total package byte prevSize

81686

increased by2.71%

Lines of code

780

increased by2.77%

Number of lines in readme file

130

increased by0.78%

No dependency changes