ng2-tag-input - npm Package Compare versions

Comparing version 0.0.6 to 0.0.7

dist/ng2-tag-input.bundle.js

@@ -419,4 +419,4 @@ (function webpackUniversalModuleDefinition(root, factory) {
 		if(!content.locals) {
-			module.hot.accept("!!./../../node_modules/css-loader/index.js!./../../node_modules/sass-loader/index.js!./tag.style.scss", function() {
-				var newContent = require("!!./../../node_modules/css-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!./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");
 				if(typeof newContent === 'string') newContent = [[module.id, newContent, '']];
@@ -439,3 +439,3 @@ update(newContent);
 	// module
-	exports.push([module.id, "tag {\n  display: flex;\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  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, "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", ""]);
 
@@ -807,4 +807,4 @@ // exports
 		if(!content.locals) {
-			module.hot.accept("!!./../../node_modules/css-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/sass-loader/index.js!./tag-input.style.scss");
+			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, '']];
@@ -827,3 +827,3 @@ update(newContent);
 	// module
-	exports.push([module.id, ".tag-input {\n  display: flex;\n  flex-direction: row;\n  flex-wrap: wrap;\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.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", ""]);
 
@@ -830,0 +830,0 @@ // exports

package.json

 {
   "name": "ng2-tag-input",
-  "version": "0.0.6",
+  "version": "0.0.7",
   "description": "Ng2TagInput: simple tag input component for Angular 2",
@@ -22,3 +22,13 @@ "scripts": {
   "devDependencies": {
+    "@angular/common": "2.0.0-rc.3",
+    "@angular/compiler": "2.0.0-rc.3",
+    "@angular/core": "2.0.0-rc.3",
+    "@angular/http": "2.0.0-rc.3",
+    "@angular/platform-browser": "2.0.0-rc.3",
+    "@angular/platform-browser-dynamic": "2.0.0-rc.3",
+    "@angular/platform-server": "2.0.0-rc.3",
+    "@angular/router": "2.0.0-rc.2",
+    "autoprefixer": "^6.3.6",
     "awesome-typescript-loader": "~0.16.2",
+    "core-js": "^2.2.0",
     "css-loader": "^0.23.1",
@@ -37,4 +47,7 @@ "es6-promise": "3.0.2",
     "node-sass": "^3.8.0",
+    "postcss-loader": "^0.9.1",
+    "precss": "^1.4.0",
     "protractor": "^3.3.0",
     "reflect-metadata": "0.1.2",
+    "rxjs": "5.0.0-beta.6",
     "sass-loader": "^3.2.1",
@@ -52,17 +65,5 @@ "source-map-loader": "^0.1.5",
     "webpack-merge": "^0.8.4",
-    "@angular/http": "2.0.0-rc.3",
-    "@angular/common": "2.0.0-rc.3",
-    "@angular/compiler": "2.0.0-rc.3",
-    "@angular/core": "2.0.0-rc.3",
-    "@angular/platform-browser": "2.0.0-rc.3",
-    "@angular/platform-browser-dynamic": "2.0.0-rc.3",
-    "@angular/platform-server": "2.0.0-rc.3",
-    "@angular/router": "2.0.0-rc.2",
-    "core-js": "^2.2.0",
-    "rxjs": "5.0.0-beta.6",
     "zone.js": "~0.6.12"
   },
-  "dependencies": {
-
-  },
+  "dependencies": {},
   "keywords": [
@@ -69,0 +70,0 @@ "angular 2",

README.md

@@ -1,13 +0,15 @@
-# ng2 Tag Input
-Tag Input component for Angular 2. Blandly inspired by Angular Material's md-chips.
+# 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)
 
-[![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)
+This is a component for Angular 2. Design and API are blandly inspired by Angular Material's md-chips.
 
-### [DEMO](https://gbuomprisco.github.io/ng2-tag-input/)
 
-## Install the component
+## Demo
 
+Check out the live dem (with source code) here [http://www.webpackbin.com/VkRLliDHW](http://www.webpackbin.com/VkRLliDHW).
+
+## Quick start. Install the component from NPM by running:
+
     npm install ng2-tag-input --save
     
-## Run the tests
+## If you want to run the tests, run the command:
 
@@ -20,4 +22,4 @@ npm test
 
-    import TagInput from 'ng2-tag-input';
-    import {Component} from '@angular2/core';
+    import { TagInput } from 'ng2-tag-input';
+    import { Component } from '@angular2/core';
 
@@ -36,17 +38,17 @@ @Component({
 
-@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.
+**@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.
 
-@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
+**@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
 
-Examples:
+Basic examples:
 
@@ -89,1 +91,2 @@ // example app
 
+If you want to see more advanced examples, please have a look at [http://www.webpackbin.com/VkRLliDHW](http://www.webpackbin.com/VkRLliDHW).

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

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

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

83388

increased by2.23%

Lines of code

826

increased by0.12%

Number of lines in readme file

90

increased by3.45%

Number of medium supply chain risk alerts

0

decreased by-100%

Worsened metrics

Dev dependency count

42

increased by7.69%

No dependency changes