├── templates
    ├── auto-complete-match.html
    ├── tag-item.html
    ├── auto-complete.html
    └── tags-input.html
├── .gitignore
├── grunt
    ├── options
    │   ├── changelog.js
    │   ├── clean.js
    │   ├── coveralls.js
    │   ├── open.js
    │   ├── bump.js
    │   ├── cssmin.js
    │   ├── uglify.js
    │   ├── replace.js
    │   ├── eslint.js
    │   ├── sass.js
    │   ├── remapIstanbul.js
    │   ├── ngtemplates.js
    │   ├── karma.js
    │   ├── rollup.js
    │   ├── shell.js
    │   ├── copy.js
    │   └── compress.js
    └── tasks
    │   ├── dgeni.js
    │   ├── update-bower-version.js
    │   ├── pack.js
    │   ├── update-website-version.js
    │   └── sauce.js
├── test
    ├── init.js
    ├── matchers.js
    ├── helpers.js
    ├── bind-attrs.spec.js
    ├── transclude-append.spec.js
    ├── autosize.spec.js
    ├── lib
    │   └── ng-stats.min.js
    ├── test-page.html
    ├── configuration.spec.js
    ├── util.spec.js
    └── auto-complete.spec.js
├── src
    ├── constants.js
    ├── transclude-append.js
    ├── bind-attrs.js
    ├── tag-item.js
    ├── auto-complete-match.js
    ├── init.js
    ├── autosize.js
    ├── util.js
    ├── configuration.js
    ├── auto-complete.js
    └── tags-input.js
├── scss
    ├── main.scss
    ├── mixins.scss
    ├── bootstrap
    │   ├── input-groups.scss
    │   ├── forms.scss
    │   ├── main.scss
    │   └── variables.scss
    ├── bootstrap.scss
    ├── auto-complete.scss
    ├── variables.scss
    └── tags-input.scss
├── docs
    ├── templates
    │   ├── macros.html
    │   ├── service.html
    │   └── directive.html
    └── dgeni-config.js
├── .travis.yml
├── sauce.launchers.json
├── .eslintrc.js
├── LICENSE
├── karma.conf.js
├── package.json
├── Gruntfile.js
├── README.md
├── CONTRIBUTING.md
└── CHANGELOG.md


/templates/auto-complete-match.html:
--------------------------------------------------------------------------------
1 | <span ng-bind-html="$highlight($getDisplayText())"></span>


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | .idea/
2 | .project
3 | .settings/
4 | node_modules/
5 | coverage/
6 | *.log
7 | build/
8 | sauce.json


--------------------------------------------------------------------------------
/grunt/options/changelog.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   options: {
3 |     github: 'mbenford/ngTagsInput'
4 |   }
5 | };


--------------------------------------------------------------------------------
/grunt/options/clean.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   build: ['build/'],
3 |   tmp: ['build/tmp/'],
4 |   coverage: ['coverage/']
5 | };


--------------------------------------------------------------------------------
/templates/tag-item.html:
--------------------------------------------------------------------------------
1 | <span ng-bind="$getDisplayText()"></span>
2 | <a class="remove-button" ng-click="$removeTag()" ng-bind="::$$removeTagSymbol"></a>


--------------------------------------------------------------------------------
/grunt/options/coveralls.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   options: {
3 |     debug: true,
4 |     coverageDir: 'coverage/lcov',
5 |     force: true
6 |   }
7 | };


--------------------------------------------------------------------------------
/grunt/options/open.js:
--------------------------------------------------------------------------------
1 | module.exports = grunt => ({
2 |   coverage: {
3 |     path: grunt.file.expand('coverage/**/html-report/index.html')[0]
4 |   }
5 | });


--------------------------------------------------------------------------------
/grunt/options/bump.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   options: {
3 |     files: ['package.json'],
4 |     commit: false,
5 |     createTag: false,
6 |     push: false
7 |   }
8 | };


--------------------------------------------------------------------------------
/grunt/options/cssmin.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   build: {
3 |     files: {
4 |       '<%= files.css.main.outMin %>': ['<%= files.css.main.out %>'],
5 |       '<%= files.css.bootstrap.outMin %>': ['<%= files.css.bootstrap.out %>']
6 |     }
7 |   }
8 | };


--------------------------------------------------------------------------------
/grunt/options/uglify.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   build: {
 3 |     options: {
 4 |       banner: '<%= banners.minified %>',
 5 |       sourceMap: true,
 6 |     },
 7 |     files: {
 8 |       '<%= files.js.outMin %>': ['<%= files.js.out %>']
 9 |     }
10 |   }
11 | };


--------------------------------------------------------------------------------
/grunt/options/replace.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   changelog: {
 3 |     src: ['CHANGELOG.md'],
 4 |     overwrite: true,
 5 |     replacements: [
 6 |       { from: ', closes [', to: ', [' },
 7 |       { from: /\n\n\s*\n/g, to: '\n\n' },
 8 |       { from: /<a.*\/a>\n/g, to: '' }
 9 |     ]
10 |   }
11 | };


--------------------------------------------------------------------------------
/test/init.js:
--------------------------------------------------------------------------------
1 | // Patches the inject function so that all tests run with the strict dependency injection flag on.
2 | let originalInject = window.inject;
3 | window.inject = (...args) => {
4 |   if (module.$$currentSpec) {
5 |     originalInject.strictDi(true);
6 |   }
7 |   originalInject.call(window, ...args);
8 | };


--------------------------------------------------------------------------------
/grunt/options/eslint.js:
--------------------------------------------------------------------------------
 1 | module.exports = grunt => ({
 2 |   options: {
 3 |     configFile: '.eslintrc.js',
 4 |     format: 'codeframe'
 5 |   },
 6 |   build: [
 7 |     grunt.file.expand('./grunt/*'),
 8 |     'Gruntfile.js',
 9 |     'karma.conf.js',
10 |     ['<%= files.js.src %>'],
11 |     ['<%= files.spec.src %>']
12 |   ]
13 | });
14 | 


--------------------------------------------------------------------------------
/grunt/tasks/dgeni.js:
--------------------------------------------------------------------------------
 1 | /* global require, process */
 2 | 
 3 | const Dgeni = require('dgeni');
 4 | 
 5 | module.exports = grunt => {
 6 |   grunt.registerTask('dgeni', () => {
 7 |     let done = this.async();
 8 |     let dgeni = new Dgeni([require(process.cwd() + '/docs/dgeni-config.js')]);
 9 | 
10 |     dgeni.generate().then(done);
11 |   });
12 | };
13 | 


--------------------------------------------------------------------------------
/grunt/options/sass.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   build: {
 3 |     options: {
 4 |       style: 'expanded',
 5 |       noCache: true,
 6 |       sourcemap: 'none'
 7 |     },
 8 |     files: {
 9 |       '<%= files.css.main.out %>': ['<%= files.css.main.src %>'],
10 |       '<%= files.css.bootstrap.out %>': ['<%= files.css.bootstrap.src %>']
11 |     }
12 |   }
13 | };


--------------------------------------------------------------------------------
/src/constants.js:
--------------------------------------------------------------------------------
 1 | export default {
 2 |   KEYS: {
 3 |     backspace: 8,
 4 |     tab: 9,
 5 |     enter: 13,
 6 |     escape: 27,
 7 |     space: 32,
 8 |     up: 38,
 9 |     down: 40,
10 |     left: 37,
11 |     right: 39,
12 |     delete: 46,
13 |     comma: 188
14 |   },
15 |   MAX_SAFE_INTEGER: 9007199254740991,
16 |   SUPPORTED_INPUT_TYPES: ['text', 'email', 'url']
17 | };
18 | 
19 | 


--------------------------------------------------------------------------------
/grunt/options/remapIstanbul.js:
--------------------------------------------------------------------------------
 1 | module.exports = grunt => {
 2 |   let coverageFile = grunt.file.expand('coverage/json/coverage-final.json')[0];
 3 |   return {
 4 |     build: {
 5 |       src: coverageFile,
 6 |       options: {
 7 |         reports: {
 8 |           html: 'coverage/html-report',
 9 |           json: coverageFile
10 |         }
11 |       }
12 |     }
13 |   };
14 | };
15 | 


--------------------------------------------------------------------------------
/grunt/tasks/update-bower-version.js:
--------------------------------------------------------------------------------
 1 | module.exports = grunt => {
 2 |   grunt.registerTask('update-bower-version', () => {
 3 |     let pkg = grunt.config('pkg');
 4 |     let filename = grunt.config('bowerFile');
 5 |     let file = grunt.file.readJSON(filename);
 6 | 
 7 |     file.version = pkg.version;
 8 |     grunt.file.write(filename, JSON.stringify(file, null, '  '));
 9 |   });
10 | };
11 | 


--------------------------------------------------------------------------------
/grunt/tasks/pack.js:
--------------------------------------------------------------------------------
 1 | module.exports = grunt => {
 2 |   grunt.registerTask('pack', output => {
 3 |     let tasks = [];
 4 | 
 5 |     if (!output || output === 'js') {
 6 |       tasks.push('javascript-only');
 7 |     }
 8 |     if (!output || output === 'css') {
 9 |       tasks.push('css-only');
10 |     }
11 | 
12 |     tasks.push('clean:tmp');
13 | 
14 |     grunt.task.run(tasks);
15 |   });
16 | };
17 | 


--------------------------------------------------------------------------------
/test/matchers.js:
--------------------------------------------------------------------------------
 1 | const customMatchers = {
 2 |   toHaveClass() {
 3 |     return {
 4 |       compare(actual, expected) {
 5 |         let result = {};
 6 |         result.pass = actual.hasClass(expected);
 7 |         result.message = `Expected element ${result.pass ? ' not ' : ' '} to have class '${expected}' but found '${actual.attr('class')}'`;
 8 |         return result;
 9 |       }
10 |     };
11 |   }
12 | };
13 | 


--------------------------------------------------------------------------------
/grunt/tasks/update-website-version.js:
--------------------------------------------------------------------------------
 1 | module.exports = grunt => {
 2 |   grunt.registerTask('update-website-version', () => {
 3 |     let pkg = grunt.config('pkg');
 4 |     let filename = grunt.config('websiteConfigFile');
 5 |     let file = grunt.file.read(filename);
 6 | 
 7 |     file = file.replace(/stable_version:.*/, 'stable_version: ' + pkg.version);
 8 |     grunt.file.write(filename, file);
 9 |   });
10 | };
11 | 


--------------------------------------------------------------------------------
/src/transclude-append.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * @ngdoc directive
 3 |  * @name tiTranscludeAppend
 4 |  * @module ngTagsInput
 5 |  *
 6 |  * @description
 7 |  * Re-creates the old behavior of ng-transclude. Used internally by tagsInput directive.
 8 |  */
 9 | export default function TranscludeAppendDirective() {
10 |   return (scope, element, attrs, ctrl, transcludeFn) => {
11 |     transcludeFn(clone => {
12 |       element.append(clone);
13 |     });
14 |   };
15 | }


--------------------------------------------------------------------------------
/scss/main.scss:
--------------------------------------------------------------------------------
 1 | tags-input {
 2 |   display: block;
 3 | 
 4 |   *, *:before, *:after {
 5 |     -moz-box-sizing: border-box;
 6 |     -webkit-box-sizing: border-box;
 7 |     box-sizing: border-box;
 8 |   }
 9 | 
10 |   .host {
11 |     position: relative;
12 |     margin-top: 5px;
13 |     margin-bottom: 5px;
14 |     height: 100%;
15 | 
16 |     &:active {
17 |       outline: none;
18 |     }
19 |   }
20 | }
21 | 
22 | @import "tags-input";
23 | @import "auto-complete";


--------------------------------------------------------------------------------
/test/helpers.js:
--------------------------------------------------------------------------------
 1 | function range(count, callback) {
 2 |   let array = [];
 3 |   for (let i = 0; i < count; i++) {
 4 |     array.push(callback ? callback(i) : i);
 5 |   }
 6 |   return array;
 7 | }
 8 | 
 9 | function changeElementValue(input, value) {
10 |   input.val(value);
11 |   if ('oninput' in input) {
12 |     input.trigger('input');
13 |   }
14 |   else {
15 |         // 'input' doesn't work in Opera, so 'change' is used instead
16 |     input.trigger('change');
17 |   }
18 | }


--------------------------------------------------------------------------------
/src/bind-attrs.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * @ngdoc directive
 3 |  * @name tiBindAttrs
 4 |  * @module ngTagsInput
 5 |  *
 6 |  * @description
 7 |  * Binds attributes to expressions. Used internally by tagsInput directive.
 8 |  */
 9 | export default function BindAttributesDirective() {
10 |   return (scope, element, attrs) => {
11 |     scope.$watch(attrs.tiBindAttrs, value => {
12 |       angular.forEach(value, (value, key) => {
13 |         attrs.$set(key, value);
14 |       });
15 |     }, true);
16 |   };
17 | }


--------------------------------------------------------------------------------
/templates/auto-complete.html:
--------------------------------------------------------------------------------
 1 | <div class="autocomplete" ng-if="suggestionList.visible">
 2 |   <ul class="suggestion-list">
 3 |     <li class="suggestion-item"
 4 |         ng-repeat="item in suggestionList.items track by track(item)"
 5 |         ng-class="getSuggestionClass(item, $index)"
 6 |         ng-click="addSuggestionByIndex($index)"
 7 |         ng-mouseenter="suggestionList.select($index)">
 8 |       <ti-autocomplete-match scope="templateScope" data="::item"></ti-autocomplete-match>
 9 |     </li>
10 |   </ul>
11 | </div>


--------------------------------------------------------------------------------
/docs/templates/macros.html:
--------------------------------------------------------------------------------
 1 | {%- macro directiveParam(name, type, join, sep) %}
 2 | {%- if type.optional %}[{% endif -%}
 3 | {$ name | dashCase $}{$ join $}{$ type.name $}{$ sep $}
 4 | {%- if type.optional %}]{% endif -%}
 5 | {% endmacro -%}
 6 | 
 7 | {%- macro functionSignature(fn) %}
 8 | {%- set sep = joiner(', ') -%}
 9 | {$ fn.name $}({%- for param in fn.params %}{$ sep() $}
10 | {%- if param.type.optional %}[{% endif -%}
11 | {$ param.name $}
12 | {%- if param.type.optional %}]{% endif -%}
13 | {% endfor -%})
14 | {%- endmacro -%}


--------------------------------------------------------------------------------
/.travis.yml:
--------------------------------------------------------------------------------
 1 | language: node_js
 2 | node_js:
 3 |   - '6'
 4 | before_install:
 5 |   - rvm install 2.3.0
 6 |   - gem install sass
 7 | script: npm run travis
 8 | sudo: false
 9 | cache:
10 |   directories:
11 |     - node_modules
12 | deploy:
13 |   provider: s3
14 |   access_key_id: AKIAI55AELZBPQKVIAXQ
15 |   secret_access_key:
16 |     secure: fDp97fUYc19sXmMnnp4OZL8MQYyTXRkxTVJj9NSdFI4xFCu34igwlcJXwHt9uuzV2wVIQ3R9GsAVfSwZxD+XWz1qrzWRt3PIsR5J7I9ZiqE0DaCK9IBVepsz5BR/A/q9v3VWGW7o+wy419EKVuXGHCJMAUoHeQCGeb8gOKYpI3g=
17 |   bucket: ng-tags-input
18 |   local-dir: build/travis
19 |   skip_cleanup: true
20 |   on:
21 |     repo: mbenford/ngTagsInput
22 |     branch: master
23 | 


--------------------------------------------------------------------------------
/grunt/options/ngtemplates.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   build: {
 3 |     files: {
 4 |       '<%= files.html.out %>': ['<%= files.html.src %>']
 5 |     },
 6 |     options: {
 7 |       url(url) {
 8 |         return `ngTagsInput/${url.replace('templates/', '')}`;
 9 |       },
10 |       bootstrap(module, script) {
11 |         script = script.replace(/'use strict';\n\n/g, '').replace(/\n\n\s*\n/g, '\n');
12 |         return `/*@ngInject*/\nexport default function TemplateCacheRegister($templateCache) {\n${script}}`;
13 |       },
14 |       htmlmin: {
15 |         collapseWhitespace: true,
16 |         removeRedundantAttributes: true
17 |       }
18 |     }
19 |   }
20 | };


--------------------------------------------------------------------------------
/grunt/options/karma.js:
--------------------------------------------------------------------------------
 1 | /* global process: false */
 2 | 
 3 | module.exports = grunt => ({
 4 |   options: {
 5 |     configFile: 'karma.conf.js'
 6 |   },
 7 |   local: {
 8 |     singleRun: true,
 9 |     browsers: ['PhantomJS'],
10 |     reporters: ['mocha', 'coverage'],
11 |     mochaReporter: {
12 |       output: process.env.TRAVIS ? 'full' : 'minimal'
13 |     }
14 |   },
15 |   remote: {
16 |     singleRun: true,
17 |     captureTimeout: 120000,
18 |     sauceLabs: {
19 |       testName: 'ngTagsInput'
20 |     },
21 |     recordVideo: false,
22 |     recordScreenshots: false,
23 |     customLaunchers: grunt.file.readJSON('sauce.launchers.json'),
24 |     reporters: ['mocha', 'saucelabs']
25 |   }
26 | });


--------------------------------------------------------------------------------
/scss/mixins.scss:
--------------------------------------------------------------------------------
 1 | @mixin gradient($steps...) {
 2 |   background: -webkit-linear-gradient(top, $steps);
 3 |   background: linear-gradient(to bottom, $steps);
 4 | }
 5 | 
 6 | @mixin box-shadow($args...) {
 7 |   -webkit-box-shadow: $args;
 8 |   -moz-box-shadow: $args;
 9 |   box-shadow: $args;
10 | }
11 | 
12 | @mixin transition($args...) {
13 |   -webkit-transition: $args;
14 |   -moz-transition: $args;
15 |   transition: $args;
16 | }
17 | 
18 | @mixin border-left-radius($radius) {
19 |   border-top-left-radius: $radius;
20 |   border-bottom-left-radius: $radius;
21 | }
22 | 
23 | @mixin border-right-radius($radius) {
24 |   border-top-right-radius: $radius;
25 |   border-bottom-right-radius: $radius;
26 | }


--------------------------------------------------------------------------------
/grunt/tasks/sauce.js:
--------------------------------------------------------------------------------
 1 | /* global process: false */
 2 | 
 3 | module.exports = grunt => {
 4 |   grunt.registerTask('sauce', browsers => {
 5 |     let sauce, config;
 6 | 
 7 |     if (!process.env.SAUCE_USERNAME) {
 8 |       if (!grunt.file.exists('sauce.json')) {
 9 |         grunt.fail.fatal('sauce.json not found', 3);
10 |       }
11 |       else {
12 |         sauce = grunt.file.readJSON('sauce.json');
13 |         process.env.SAUCE_USERNAME = sauce.username;
14 |         process.env.SAUCE_ACCESS_KEY = sauce.accessKey;
15 |       }
16 |     }
17 | 
18 |     config = grunt.config.get('karma.remote');
19 |     config.browsers = browsers ? browsers.split(',') : Object.keys(config.customLaunchers);
20 |     grunt.config.set('karma.remote', config);
21 |     grunt.task.run('karma:remote');
22 |   });
23 | };
24 | 


--------------------------------------------------------------------------------
/grunt/options/rollup.js:
--------------------------------------------------------------------------------
 1 | const includePaths = require('rollup-plugin-includepaths');
 2 | const babel = require('rollup-plugin-babel');
 3 | 
 4 | module.exports = {
 5 |   options: {
 6 |     format: 'iife',
 7 |     globals: {
 8 |       angular: 'angular'
 9 |     },
10 |     indent: false,
11 |     sourceMap: true,
12 |     banner: '<%= banners.unminified %>',
13 |     plugins: [
14 |       includePaths({
15 |         paths: ['build/tmp']
16 |       }),
17 |       babel({
18 |         presets: [['es2015', { modules: false }]],
19 |         plugins: [
20 |           'external-helpers',
21 |           ['angularjs-annotate', { explicitOnly: true }]
22 |         ]
23 |       }),
24 |     ]
25 |   },
26 |   build: {
27 |     files: {
28 |       '<%= files.js.out %>': ['<%= files.js.src %>']
29 |     }
30 |   }
31 | };
32 | 


--------------------------------------------------------------------------------
/scss/bootstrap/input-groups.scss:
--------------------------------------------------------------------------------
 1 | @import "../mixins";
 2 | @import "variables";
 3 | 
 4 | .input-group tags-input {
 5 |   padding: 0;
 6 |   display: table-cell;
 7 | 
 8 |   &:not(:first-child) .tags {
 9 |     @include border-left-radius(0)
10 |   }
11 | 
12 |   &:not(:last-child) .tags {
13 |     @include border-right-radius(0)
14 |   }
15 | }
16 | 
17 | .input-group-lg tags-input {
18 |   @extend .ti-input-lg;
19 | 
20 |   &:first-child .tags {
21 |     @include border-left-radius($tag-border-radius-lg);
22 |   }
23 | 
24 |   &:last-child .tags {
25 |     @include border-right-radius($tag-border-radius-lg);
26 |   }
27 | }
28 | 
29 | .input-group-sm tags-input {
30 |   @extend .ti-input-sm;
31 | 
32 |   &:first-child .tags {
33 |     @include border-left-radius($tag-border-radius-sm);
34 |   }
35 | 
36 |   &:last-child .tags {
37 |     @include border-right-radius($tag-border-radius-sm);
38 |   }
39 | }
40 | 


--------------------------------------------------------------------------------
/grunt/options/shell.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   git: {
 3 |     command: [
 4 |       'git add .',
 5 |       'git commit -m "chore(release): Release v<%= pkg.version %>"',
 6 |       'git tag -a v<%= pkg.version %> -m "v<%= pkg.version %>"',
 7 |     ].join('&&'),
 8 |     options: {
 9 |       stdout: true
10 |     }
11 |   },
12 |   git_bower: {
13 |     command: [
14 |       'git add .',
15 |       'git commit -m "Updated to v<%= pkg.version %>"',
16 |       'git tag -a v<%= pkg.version %> -m "v<%= pkg.version %>"'
17 |     ].join('&&'),
18 |     options: {
19 |       stdout: true,
20 |       execOptions: { cwd: '<%= bowerDirectory %>' }
21 |     }
22 |   },
23 |   git_website: {
24 |     command: [
25 |       'git add .',
26 |       'git commit -m "Updated to v<%= pkg.version %>"'
27 |     ].join('&&'),
28 |     options: {
29 |       stdout: true,
30 |       execOptions: { cwd: '<%= websiteDirectory %>' }
31 |     }
32 |   }
33 | };


--------------------------------------------------------------------------------
/sauce.launchers.json:
--------------------------------------------------------------------------------
 1 | {
 2 |     "SL_Chrome": {
 3 |         "base": "SauceLabs",
 4 |         "browserName": "Chrome",
 5 |         "version": "31"
 6 |     },
 7 |     "SL_Firefox": {
 8 |         "base": "SauceLabs",
 9 |         "browserName": "Firefox",
10 |         "version": "29"
11 |     },
12 |     "SL_Safari": {
13 |         "base": "SauceLabs",
14 |         "browserName": "Safari",
15 |         "platform": "OS X 10.9",
16 |         "version": "7"
17 |     },
18 |     "SL_Opera": {
19 |         "base": "SauceLabs",
20 |         "browserName": "Opera",
21 |         "version": "12"
22 |     },
23 |     "SL_IE_10": {
24 |         "base": "SauceLabs",
25 |         "browserName": "Internet Explorer",
26 |         "platform": "Windows 8",
27 |         "version": "10"
28 |     },
29 |     "SL_IE_11": {
30 |         "base": "SauceLabs",
31 |         "browserName": "Internet explorer",
32 |         "platform": "Windows 8.1",
33 |         "version": "11"
34 |     }
35 | }


--------------------------------------------------------------------------------
/docs/dgeni-config.js:
--------------------------------------------------------------------------------
 1 | const Package = require('dgeni').Package;
 2 | 
 3 | module.exports = new Package('dgeni-example', [
 4 |   require('dgeni-packages/ngdoc'),
 5 |   require('dgeni-packages/nunjucks')
 6 | ])
 7 | .config(function(log, readFilesProcessor, writeFilesProcessor, templateFinder, templateEngine) {
 8 |   const basePath = process.cwd();
 9 | 
10 |   log.level = 'error';
11 | 
12 |   readFilesProcessor.basePath = basePath;
13 |   readFilesProcessor.sourceFiles = [{
14 |     include: [
15 |       'src/tags-input.js',
16 |       'src/auto-complete.js',
17 |       'src/configuration.js'
18 |     ],
19 |     basePath: 'src'
20 |   }];
21 | 
22 |     // Nunjucks and Angular conflict in their template bindings so change the Nunjucks
23 |   templateEngine.config.tags = {
24 |     variableStart: '{$',
25 |     variableEnd: '$}'
26 |   };
27 | 
28 |   templateFinder.templateFolders.unshift(basePath + '/docs/templates');
29 |   templateFinder.templatePatterns.unshift('${ doc.docType }.html');
30 | 
31 |   writeFilesProcessor.outputFolder  = 'build/docs';
32 | });
33 | 


--------------------------------------------------------------------------------
/src/tag-item.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * @ngdoc directive
 3 |  * @name tiTagItem
 4 |  * @module ngTagsInput
 5 |  *
 6 |  * @description
 7 |  * Represents a tag item. Used internally by the tagsInput directive.
 8 |  */
 9 | export default function TagItemDirective(tiUtil) {
10 |   'ngInject';
11 | 
12 |   return {
13 |     restrict: 'E',
14 |     require: '^tagsInput',
15 |     template: '<ng-include src="$$template"></ng-include>',
16 |     scope: {
17 |       $scope: '=scope',
18 |       data: '='
19 |     },
20 |     link(scope, element, attrs, tagsInputCtrl) {
21 |       let tagsInput = tagsInputCtrl.registerTagItem();
22 |       let options = tagsInput.getOptions();
23 | 
24 |       scope.$$template = options.template;
25 |       scope.$$removeTagSymbol = options.removeTagSymbol;
26 | 
27 |       scope.$getDisplayText = () => tiUtil.safeToString(scope.data[options.displayProperty]);
28 |       scope.$removeTag = () => {
29 |         tagsInput.removeTag(scope.$index);
30 |       };
31 | 
32 |       scope.$watch('$parent.$index', value => {
33 |         scope.$index = value;
34 |       });
35 |     }
36 |   };
37 | }
38 | 


--------------------------------------------------------------------------------
/grunt/options/copy.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   bower: {
 3 |     files: [{
 4 |       expand: true,
 5 |       flatten: true,
 6 |       src: ['build/*.js', 'build/*.css'],
 7 |       dest: '<%= bowerDirectory %>',
 8 |       filter: 'isFile'
 9 |     }]
10 |   },
11 |   travis: {
12 |     files: [{
13 |       expand: true,
14 |       flatten: true,
15 |       src: ['build/*.zip'],
16 |       dest: 'build/travis',
17 |       filter: 'isFile'
18 |     }]
19 |   },
20 |   website: {
21 |     files: [
22 |       {
23 |         expand: true,
24 |         flatten: true,
25 |         src: ['build/docs/**/*.html'],
26 |         dest: '<%= websiteDirectory %>/_includes/api',
27 |         filter: 'isFile'
28 |       },
29 |       {
30 |         expand: true,
31 |         flatten: true,
32 |         src: ['build/*.min.js'],
33 |         dest: '<%= websiteDirectory %>/js',
34 |         filter: 'isFile'
35 |       },
36 |       {
37 |         expand: true,
38 |         flatten: true,
39 |         src: ['build/*.min.css'],
40 |         dest: '<%= websiteDirectory %>/css',
41 |         filter: 'isFile'
42 |       }
43 |     ]
44 |   }
45 | };


--------------------------------------------------------------------------------
/.eslintrc.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |     env: {
 3 |         browser: true,
 4 |         node: true,
 5 |         es6: true,
 6 |         mocha: true,
 7 |         jasmine: true,
 8 |         jquery: true,
 9 |     },
10 |     extends: 'eslint:recommended',
11 |     parserOptions: {
12 |         sourceType: 'module',
13 |         impliedStrict: true
14 |     },
15 |     rules: {
16 |         'indent': ['error', 2],
17 |         'linebreak-style': ['error', 'unix'],
18 |         'quotes': ['error', 'single'],
19 |         'semi': ['error', 'always'],
20 |         'curly': 'error',
21 |         'eqeqeq': ['error', 'always'],
22 |         'no-empty': 'error',
23 |         'no-undef': 'error',
24 |         'no-eq-null': 'error',
25 |         'no-extend-native': 'error',
26 |         'no-caller': 'error',
27 |         'new-cap': ['error', { capIsNew: false }]
28 |     },
29 |     globals: {
30 |         angular: true,
31 |         module: true,
32 |         inject: true,
33 |         tagsInput: true,
34 |         range: true,
35 |         changeElementValue: true,
36 |         customMatchers: true,
37 |         KEYS: true,
38 |         MAX_SAFE_INTEGER: true,
39 |         SUPPORTED_INPUT_TYPES: true
40 |     }
41 | };


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | The MIT License (MIT)
 2 | 
 3 | Copyright (c) 2013 - 2016,  Michael Benford and ngTagsInput contributors.
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy of
 6 | this software and associated documentation files (the "Software"), to deal in
 7 | the Software without restriction, including without limitation the rights to
 8 | use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
 9 | the Software, and to permit persons to whom the Software is furnished to do so,
10 | subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
17 | FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
18 | COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
19 | IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
20 | CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
21 | 


--------------------------------------------------------------------------------
/templates/tags-input.html:
--------------------------------------------------------------------------------
 1 | <div class="host" tabindex="-1" ng-click="eventHandlers.host.click()" ti-transclude-append>
 2 |   <div class="tags" ng-class="{focused: hasFocus}">
 3 |     <ul class="tag-list">
 4 |       <li class="tag-item"
 5 |           ng-repeat="tag in tagList.items track by track(tag)"
 6 |           ng-class="getTagClass(tag, $index)"
 7 |           ng-click="eventHandlers.tag.click(tag)">
 8 |         <ti-tag-item scope="templateScope" data="::tag"></ti-tag-item>
 9 |       </li>
10 |     </ul>
11 |     <input class="input"
12 |            autocomplete="off"
13 |            ng-model="newTag.text"
14 |            ng-model-options="{getterSetter: true}"
15 |            ng-keydown="eventHandlers.input.keydown($event)"
16 |            ng-focus="eventHandlers.input.focus($event)"
17 |            ng-blur="eventHandlers.input.blur($event)"
18 |            ng-paste="eventHandlers.input.paste($event)"
19 |            ng-trim="false"
20 |            ng-class="{'invalid-tag': newTag.invalid}"
21 |            ng-disabled="disabled"
22 |            ti-bind-attrs="{type: options.type, placeholder: options.placeholder, tabindex: options.tabindex, spellcheck: options.spellcheck}"
23 |            ti-autosize>
24 |   </div>
25 | </div>


--------------------------------------------------------------------------------
/src/auto-complete-match.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * @ngdoc directive
 3 |  * @name tiAutocompleteMatch
 4 |  * @module ngTagsInput
 5 |  *
 6 |  * @description
 7 |  * Represents an autocomplete match. Used internally by the autoComplete directive.
 8 |  */
 9 | export default function AutocompleteMatchDirective($sce, tiUtil) {
10 |   'ngInject';
11 | 
12 |   return {
13 |     restrict: 'E',
14 |     require: '^autoComplete',
15 |     template: '<ng-include src="$$template"></ng-include>',
16 |     scope: {
17 |       $scope: '=scope',
18 |       data: '='
19 |     },
20 |     link(scope, element, attrs, autoCompleteCtrl) {
21 |       let autoComplete = autoCompleteCtrl.registerAutocompleteMatch();
22 |       let options = autoComplete.getOptions();
23 | 
24 |       scope.$$template = options.template;
25 |       scope.$index = scope.$parent.$index;
26 | 
27 |       scope.$highlight = text => {
28 |         if (options.highlightMatchedText) {
29 |           text = tiUtil.safeHighlight(text, autoComplete.getQuery());
30 |         }
31 |         return $sce.trustAsHtml(text);
32 |       };
33 | 
34 |       scope.$getDisplayText = () => tiUtil.safeToString(scope.data[options.displayProperty || options.tagsInput.displayProperty]);
35 |     }
36 |   };
37 | }
38 | 


--------------------------------------------------------------------------------
/src/init.js:
--------------------------------------------------------------------------------
 1 | import * as angular from 'angular';
 2 | import Constants from './constants';
 3 | import TagsInputDirective from './tags-input';
 4 | import TagItemDirective from './tag-item';
 5 | import AutocompleteDirective from './auto-complete';
 6 | import AutocompleteMatchDirective from './auto-complete-match';
 7 | import AutosizeDirective from './autosize';
 8 | import BindAttributesDirective from './bind-attrs';
 9 | import TranscludeAppendDirective from './transclude-append';
10 | import TagsInputConfigurationProvider from './configuration';
11 | import UtilService from './util';
12 | import TemplateCacheRegister from 'compiled-templates';
13 | 
14 | angular.module('ngTagsInput', [])
15 |     .directive('tagsInput', TagsInputDirective)
16 |     .directive('tiTagItem', TagItemDirective)
17 |     .directive('autoComplete', AutocompleteDirective)
18 |     .directive('tiAutocompleteMatch', AutocompleteMatchDirective)
19 |     .directive('tiAutosize', AutosizeDirective)
20 |     .directive('tiBindAttrs', BindAttributesDirective)
21 |     .directive('tiTranscludeAppend', TranscludeAppendDirective)
22 |     .factory('tiUtil', UtilService)
23 |     .constant('tiConstants', Constants)
24 |     .provider('tagsInputConfig', TagsInputConfigurationProvider)
25 |     .run(TemplateCacheRegister);


--------------------------------------------------------------------------------
/scss/bootstrap.scss:
--------------------------------------------------------------------------------
 1 | @import "main";
 2 | 
 3 | tags-input  {
 4 |   .tags {
 5 |     background-color: #fff;
 6 |     border: 1px solid #ccc;
 7 |     border-radius: 4px;
 8 |     box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
 9 |     transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
10 |     &.focused {
11 |       border-color: #66afe9;
12 |       box-shadow: inset 0 1px 1px rgba(0,0,0,0.075),0 0 8px rgba(102,175,233,0.6);
13 |     }
14 |     .tag-item {
15 |       background: #428bca;
16 |       border: 1px solid #357ebd;
17 |       border-radius: 4px;
18 |       color: #fff;
19 |       &.selected {
20 |         background: #d9534f;
21 |         border: 1px solid #d43f3a;
22 |         border-radius: 4px;
23 |         color: #fff;
24 |       }
25 |       button {
26 |         background: transparent;
27 |         color: #000;
28 |         opacity: .4;
29 |       }
30 |     }
31 |   }
32 |   .autocomplete {
33 |     border-radius: 4px;
34 |     .suggestion-item {
35 |       &.selected {
36 |         color: #262626;
37 |         background-color: #e9e9e9;
38 |         em {
39 |           color: #262626;
40 |           background-color: #ffff00;
41 |         }
42 |       }
43 |       em {
44 |         font-weight: normal;
45 |         background-color: #ffff00;
46 |       }
47 |     }
48 |   }
49 | }


--------------------------------------------------------------------------------
/test/bind-attrs.spec.js:
--------------------------------------------------------------------------------
 1 | describe('bind-attrs directive', () => {
 2 |   let $scope, $compile,
 3 |     element;
 4 | 
 5 |   beforeEach(() => {
 6 |     module('ngTagsInput');
 7 | 
 8 |     inject(($rootScope, _$compile_) => {
 9 |       $scope = $rootScope;
10 |       $compile = _$compile_;
11 |     });
12 |   });
13 | 
14 |   function compile(value) {
15 |     element = $compile('<span ti-bind-attrs="' + value + '">')($scope);
16 |     $scope.$digest();
17 |   }
18 | 
19 |   it('sets the element attributes according to the provided parameters', () => {
20 |     // Arrange
21 |     $scope.prop1 = 'Foobar';
22 |     $scope.prop2 = 42;
23 | 
24 |     // Act
25 |     compile('{attr1: prop1, attr2: prop2}');
26 | 
27 |     // Assert
28 |     expect(element.attr('attr1')).toBe('Foobar');
29 |     expect(element.attr('attr2')).toBe('42');
30 |   });
31 | 
32 |   it('updates the element attributes when provided parameters change', () => {
33 |     // Arrange
34 |     $scope.prop1 = 'Foobar';
35 |     $scope.prop2 = 42;
36 |     compile('{attr1: prop1, attr2: prop2}');
37 | 
38 |     // Act
39 |     $scope.prop1 = 'Barfoo';
40 |     $scope.prop2 = 24;
41 |     $scope.$digest();
42 | 
43 |     // Assert
44 |     expect(element.attr('attr1')).toBe('Barfoo');
45 |     expect(element.attr('attr2')).toBe('24');
46 |   });
47 | });
48 | 


--------------------------------------------------------------------------------
/scss/auto-complete.scss:
--------------------------------------------------------------------------------
 1 | @import "mixins";
 2 | @import "variables";
 3 | 
 4 | tags-input .autocomplete {
 5 |   margin-top: 5px;
 6 |   position: absolute;
 7 |   padding: 5px 0;
 8 |   z-index: $suggestions-z-index;
 9 |   width: $suggestions-width;
10 |   background-color: $suggestions-bgcolor;
11 |   border: $suggestions-border;
12 |   @include box-shadow($suggestions-border-shadow);
13 | 
14 |   .suggestion-list {
15 |     margin: 0;
16 |     padding: 0;
17 |     list-style-type: none;
18 |     max-height: 280px;
19 |     overflow-y: auto;
20 |     position: relative;
21 |   }
22 | 
23 |   .suggestion-item {
24 |     padding: 5px 10px;
25 |     cursor: pointer;
26 |     white-space: nowrap;
27 |     overflow: hidden;
28 |     text-overflow: ellipsis;
29 |     font: $suggestion-font;
30 |     color: $suggestion-color;
31 |     background-color: $suggestion-bgcolor;
32 | 
33 |     &.selected {
34 |       color: $suggestion-color-selected;
35 |       background-color: $suggestion-bgcolor-selected;
36 | 
37 |       em {
38 |         color: $suggestion-highlight-color-selected;
39 |         background-color: $suggestion-highlight-bgcolor-selected;
40 |       }
41 |     }
42 | 
43 |     em {
44 |       font: $suggestion-highlight-font;
45 |       color: $suggestion-highlight-color;
46 |       background-color: $suggestion-highlight-bgcolor;
47 |     }
48 |   }
49 | }


--------------------------------------------------------------------------------
/docs/templates/service.html:
--------------------------------------------------------------------------------
 1 | {% include "macros.html" -%}
 2 | <section>
 3 |   <h1 id="{$ doc.name $}"><code>{$ doc.name $} <small>(directive in module <strong>{$ doc.module $}</strong>)</small></code></h1>
 4 |   <section>
 5 |     <h2>Description</h2>
 6 |     <p>{$ doc.description | replace("\n", "") | replace("  ", " ") $}</p>
 7 |   </section>
 8 | 
 9 |   <section>
10 |     <h2>Methods</h2>
11 |     <ul class="methods">
12 |       {%- for method in doc.methods %}
13 |       <li>
14 |         <h3>{$ functionSignature(method) $}</h3>
15 |         <div>
16 |           <p>{$ method.description $}</p>
17 |           <h5>Parameters</h5>
18 |           <table class="table table-bordered table-striped table-hover">
19 |             <thead>
20 |             <tr>
21 |               <th class="col-sm-2">Name</th>
22 |               <th class="col-sm-1">Type</th>
23 |               <th class="col-sm-9">Description</th>
24 |             </tr>
25 |             </thead>
26 |             <tbody>
27 |             {%- for param in method.params %}
28 |             <tr>
29 |               <td>{$ param.name $}</td>
30 |               <td><span class="label type type-{$ param.type.name $}">{$ param.type.name $}</span></td>
31 |               <td>{$ param.description $}</td>
32 |             </tr>
33 |             {%- endfor %}
34 |             </tbody>
35 |           </table>
36 |           <h5>Returns</h5>
37 |           <p>{$ method.returns.description $}</p>
38 |         </div>
39 |       </li>
40 |       {%- endfor %}
41 |       </ul>
42 |     </section>
43 | </section>


--------------------------------------------------------------------------------
/test/transclude-append.spec.js:
--------------------------------------------------------------------------------
 1 | describe('transclude-append-directive', () => {
 2 |   let $scope, $compile, directive, element;
 3 | 
 4 |   beforeEach(() => {
 5 |     module('ngTagsInput');
 6 | 
 7 |     module($compileProvider => {
 8 |       directive = $compileProvider.directive;
 9 |     });
10 | 
11 |     inject(($rootScope, _$compile_) => {
12 |       $scope = $rootScope;
13 |       $compile = _$compile_;
14 |     });
15 |   });
16 | 
17 |   function compile(template) {
18 |     element = $compile(template)($scope);
19 |   }
20 | 
21 |   function createDirective(template) {
22 |     directive('foobar', () => ({
23 |       restrict: 'E',
24 |       transclude: true,
25 |       template: template
26 |     }));
27 |   }
28 | 
29 |   it('appends the transcluded content to the end of an empty target element', () => {
30 |     // Arrange
31 |     createDirective('<div ti-transclude-append></div>');
32 | 
33 |     // Act
34 |     compile('<foobar><p>transcluded content</p></foobar>');
35 | 
36 |     // Assert
37 |     expect(element.find('p').html()).toBe('transcluded content');
38 |   });
39 | 
40 |   it('appends the transcluded content to the end of a non-empty target element', () => {
41 |     // Arrange
42 |     createDirective('<div ti-transclude-append><p>existing content</p></div>');
43 | 
44 |     // Act
45 |     compile('<foobar><p>transcluded content</p></foobar>');
46 | 
47 |     // Assert
48 |     let content = $.map(element.find('p'), e => $(e).html());
49 |     expect(content).toEqual(['existing content', 'transcluded content']);
50 |   });
51 | });


--------------------------------------------------------------------------------
/docs/templates/directive.html:
--------------------------------------------------------------------------------
 1 | {% include "macros.html" -%}
 2 | <section>
 3 |   <h1 id="{$ doc.name $}"><code>{$ doc.name $} <small>(directive in module <strong>{$ doc.module $}</strong>)</small></code></h1>
 4 |   <section>
 5 |     <h2>Description</h2>
 6 |     <p>{$ doc.description $}</p>
 7 |   </section>
 8 | 
 9 |   <section>
10 |     <h2>Usage</h2>
11 | {% raw %}{% highlight html %}{% endraw %}
12 | <{$ doc.name | dashCase $}
13 |   {%- for param in doc.params %}
14 |   {$ directiveParam(param.name, param.type, '="{', '}"') $}
15 |   {%- endfor %}>
16 | </{$ doc.name | dashCase $}>
17 | {% raw %}{% endhighlight %}{% endraw %}
18 |   </section>
19 | 
20 |   <section>
21 |     <h2>Parameters</h2>
22 |     <table class="table table-bordered table-striped table-hover">
23 |       <thead>
24 |       <tr>
25 |         <th class="col-sm-2">Name</th>
26 |         <th class="col-sm-1">Type</th>
27 |         <th class="col-sm-7">Description</th>
28 |         <th class="col-sm-2">Defaults to</th>
29 |       </tr>
30 |       </thead>
31 |       <tbody>
32 |       {%- for param in doc.params %}
33 |         <tr>
34 |           <td>{$ param.name $}{$ " <em>(required)</em>" if not param.type.optional $}</td>
35 |           <td><span class="label type type-{$ param.type.name $}">{$ param.type.name $}</span></td>
36 |           <td>{$ param.description | replace("\n", "") | replace("  ", " ") $}</td>
37 |           <td>{$ param.defaultValue if param.defaultValue and param.defaultValue != "NA" else "&ndash;" $}</td>
38 |         </tr>
39 |       {%- endfor %}
40 |       </tbody>
41 |     </table>
42 |   </section>
43 | </section>


--------------------------------------------------------------------------------
/src/autosize.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * @ngdoc directive
 3 |  * @name tiAutosize
 4 |  * @module ngTagsInput
 5 |  *
 6 |  * @description
 7 |  * Automatically sets the input's width so its content is always visible. Used internally by tagsInput directive.
 8 |  */
 9 | export default function AutosizeDirective(tagsInputConfig) {
10 |   'ngInject';
11 | 
12 |   return {
13 |     restrict: 'A',
14 |     require: 'ngModel',
15 |     link(scope, element, attrs, ctrl) {
16 |       let threshold = tagsInputConfig.getTextAutosizeThreshold();
17 |       let span = angular.element('<span class="input"></span>');
18 | 
19 |       span.css('display', 'none')
20 |           .css('visibility', 'hidden')
21 |           .css('width', 'auto')
22 |           .css('white-space', 'pre');
23 | 
24 |       element.parent().append(span);
25 | 
26 |       let resize = originalValue => {
27 |         let value = originalValue;
28 |         let width;
29 | 
30 |         if (angular.isString(value) && value.length === 0) {
31 |           value = attrs.placeholder;
32 |         }
33 | 
34 |         if (value) {
35 |           span.text(value);
36 |           span.css('display', '');
37 |           width = span.prop('offsetWidth');
38 |           span.css('display', 'none');
39 |         }
40 | 
41 |         element.css('width', width ? width + threshold + 'px' : '');
42 | 
43 |         return originalValue;
44 |       };
45 | 
46 |       ctrl.$parsers.unshift(resize);
47 |       ctrl.$formatters.unshift(resize);
48 | 
49 |       attrs.$observe('placeholder', value => {
50 |         if (!ctrl.$modelValue) {
51 |           resize(value);
52 |         }
53 |       });
54 |     }
55 |   };
56 | }


--------------------------------------------------------------------------------
/grunt/options/compress.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   options: {
 3 |     mode: 'zip'
 4 |   },
 5 |   minified: {
 6 |     options: {
 7 |       archive: '<%= files.zip.minified %>'
 8 |     },
 9 |     files : [
10 |       {
11 |         expand: true,
12 |         src : [
13 |           '<%= files.js.outMin %>',
14 |           '<%= files.js.outMin %>.map',
15 |           '<%= files.css.main.outMin %>',
16 |           '<%= files.css.bootstrap.outMin %>'
17 |         ],
18 |         flatten: true
19 |       }
20 |     ]
21 |   },
22 |   unminified: {
23 |     options: {
24 |       archive: '<%= files.zip.unminified %>'
25 |     },
26 |     files : [
27 |       {
28 |         expand: true,
29 |         src : [
30 |           '<%= files.js.out %>',
31 |           '<%= files.js.out %>.map',
32 |           '<%= files.css.main.out %>',
33 |           '<%= files.css.bootstrap.out %>'
34 |         ],
35 |         flatten: true
36 |       }
37 |     ]
38 |   },
39 |   npm: {
40 |     options: {
41 |       archive: '<%= files.tgz.npm %>',
42 |       mode: 'tgz'
43 |     },
44 |     files : [
45 |       {
46 |         expand: true,
47 |         src : [
48 |           '<%= files.js.out %>',
49 |           '<%= files.js.out %>.map',
50 |           '<%= files.css.main.out %>',
51 |           '<%= files.css.bootstrap.out %>',
52 |           '<%= files.js.outMin %>.map',
53 |           '<%= files.css.main.outMin %>',
54 |           '<%= files.css.bootstrap.outMin %>',
55 |         ],
56 |         dest: 'package/build',
57 |         flatten: true
58 |       },
59 |       {
60 |         expand: true,
61 |         src: [
62 |           'README.md',
63 |           'package.json'
64 |         ],
65 |         dest: 'package/',
66 |         flatten: true
67 |       },
68 | 
69 |     ]
70 |   }
71 | };


--------------------------------------------------------------------------------
/karma.conf.js:
--------------------------------------------------------------------------------
 1 | module.exports = config => {
 2 |   config.set({
 3 |     // base path, that will be used to resolve files and exclude
 4 |     basePath: '',
 5 | 
 6 |     // frameworks to use
 7 |     frameworks: ['jasmine'],
 8 | 
 9 |     // list of files / patterns to load in the browser
10 |     files: [
11 |       'test/lib/jquery-1.10.2.min.js',
12 |       'test/lib/angular.js',
13 |       'test/lib/angular-mocks.js',
14 |       'test/helpers.js',
15 |       'test/matchers.js',
16 |       'test/init.js',
17 |       'test/*.spec.js',
18 |       'build/ng-tags-input.js'
19 |     ],
20 | 
21 |     preprocessors: {
22 |       'build/ng-tags-input.js': ['coverage'],
23 |       'test/*.js': ['babel']
24 |     },
25 | 
26 |     coverageReporter: {
27 |       dir: 'coverage/',
28 |       reporters: [
29 |         { type: 'json', subdir: 'json', file: 'coverage-final.json' },
30 |         { type: 'lcov', subdir: 'lcov' }
31 |       ]
32 |     },
33 | 
34 |     babelPreprocessor: {
35 |       options: {
36 |         presets: ['es2015'],
37 |         sourceMap: 'inline'
38 |       }
39 |     },
40 | 
41 |     // list of files to exclude
42 |     exclude: [],
43 | 
44 |     // test results reporter to use
45 |     reporters: ['mocha'],
46 | 
47 |     // web server port
48 |     port: 9876,
49 | 
50 |     // enable / disable colors in the output (reporters and logs)
51 |     colors: true,
52 | 
53 |     // level of logging
54 |     // possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
55 |     logLevel: config.LOG_WARN,
56 | 
57 |     // enable / disable watching file and executing tests whenever any file changes
58 |     autoWatch: true,
59 | 
60 |     // Start these browsers, currently available:
61 |     // - Chrome
62 |     // - ChromeCanary
63 |     // - Firefox
64 |     // - Opera
65 |     // - Safari (only Mac)
66 |     // - PhantomJS
67 |     // - IE (only Windows)
68 |     browsers: ['PhantomJS'],
69 | 
70 |     // If browser does not capture in given timeout [ms], kill it
71 |     captureTimeout: 60000,
72 | 
73 |     // Continuous Integration mode
74 |     // if true, it capture browsers, run tests and exit
75 |     singleRun: false
76 |   });
77 | };
78 | 


--------------------------------------------------------------------------------
/scss/bootstrap/forms.scss:
--------------------------------------------------------------------------------
 1 | @import "../mixins";
 2 | @import "variables";
 3 | 
 4 | tags-input {
 5 |   &.ti-input-lg {
 6 |     min-height: $tags-height-lg;
 7 | 
 8 |     .tags {
 9 |       border-radius: $tag-border-radius-lg;
10 | 
11 |       .tag-item {
12 |         height: $tag-height-lg;
13 |         line-height: $tag-height-lg - 1px;
14 |         font-size: $tag-font-size-lg;
15 |         border-radius: $tag-border-radius-lg;
16 | 
17 |         .remove-button {
18 |           font-size: $remove-button-font-size-lg;
19 |         }
20 |       }
21 | 
22 |       .input {
23 |         height: $tag-height-lg;
24 |         font-size: $input-font-size-lg;
25 |       }
26 |     }
27 |   }
28 | 
29 |   &.ti-input-sm {
30 |     min-height: $tags-height-sm;
31 | 
32 |     .tags {
33 |       border-radius: $tag-border-radius-sm;
34 | 
35 |       .tag-item {
36 |         height: $tag-height-sm;
37 |         line-height: $tag-height-sm - 1px;
38 |         font-size: $tag-font-size-sm;
39 |         border-radius: $tag-border-radius-sm;
40 | 
41 |         .remove-button {
42 |           font-size: $remove-button-font-size-sm;
43 |         }
44 |       }
45 | 
46 |       .input {
47 |         height: $tag-height-sm;
48 |         font-size: $input-font-size-sm;
49 |       }
50 |     }
51 |   }
52 | }
53 | 
54 | .has-feedback tags-input {
55 |   .tags {
56 |     padding-right: 30px;
57 |   }
58 | }
59 | 
60 | .has-success tags-input {
61 |   .tags {
62 |     border-color: $tags-border-color-success;
63 | 
64 |     &.focused {
65 |       border-color: $tags-outline-border-color-success;
66 |       @include box-shadow($tags-outline-border-shadow-success)
67 |     }
68 |   }
69 | }
70 | 
71 | .has-error tags-input {
72 |   .tags {
73 |     border-color: $tags-border-color-error;
74 | 
75 |     &.focused {
76 |       border-color: $tags-outline-border-color-error;
77 |       @include box-shadow($tags-outline-border-shadow-error)
78 |     }
79 |   }
80 | }
81 | 
82 | .has-warning tags-input {
83 |   .tags {
84 |     border-color: $tags-border-color-warning;
85 | 
86 |     &.focused {
87 |       border-color: $tags-outline-border-color-warning;
88 |       @include box-shadow($tags-outline-border-shadow-warning)
89 |     }
90 |   }
91 | }


--------------------------------------------------------------------------------
/scss/bootstrap/main.scss:
--------------------------------------------------------------------------------
 1 | @import "../mixins";
 2 | @import "variables";
 3 | 
 4 | tags-input {
 5 |   box-shadow: none;
 6 |   border: none;
 7 |   padding: 0;
 8 |   min-height: $tags-height;
 9 | 
10 |   .host {
11 |     margin: 0;
12 |   }
13 | 
14 |   .tags {
15 |     -moz-appearance: none;
16 |     -webkit-appearance: none;
17 |     border: $tags-border;
18 |     border-radius: $tags-border-radius;
19 |     @include box-shadow($tags-border-shadow);
20 |     @include transition($tags-transition);
21 | 
22 |     .tag-item {
23 |       color: $tag-color;
24 |       background: $tag-bgcolor;
25 |       border: $tag-border;
26 |       border-radius: $tag-border-radius;
27 | 
28 |       &.selected {
29 |         color: $tag-color-selected;
30 |         background: $tag-bgcolor-selected;
31 |         border: $tag-border-selected;
32 |       }
33 | 
34 |       .remove-button:hover {
35 |         text-decoration: none;
36 |       }
37 |     }
38 |   }
39 | 
40 |   .tags.focused {
41 |     border: $tags-outline-border;
42 |     @include box-shadow($tags-outline-border-shadow);
43 |   }
44 | 
45 |   .autocomplete {
46 |     border-radius: $suggestions-border-radius;
47 | 
48 |     .suggestion-item {
49 |       &.selected {
50 |         color: $suggestion-color-selected;
51 |         background-color: $suggestion-bgcolor-selected;
52 | 
53 |         em {
54 |           color: $suggestion-highlight-color-selected;
55 |           background-color: $suggestion-highlight-bgcolor-selected;
56 |         }
57 |       }
58 | 
59 |       em {
60 |         color: $suggestion-highlight-color;
61 |         background-color: $suggestion-highlight-bgcolor;
62 |       }
63 |     }
64 |   }
65 | 
66 |   &.ng-invalid .tags {
67 |     border-color: #843534;
68 |     @include box-shadow(inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 6px #ce8483)
69 |   }
70 | 
71 |   &[disabled] {
72 |     .tags {
73 |       background-color: $tags-bgcolor-disabled;
74 | 
75 |       .tag-item {
76 |         background: $tag-bgcolor-disabled;
77 |         opacity: $tag-opacity-disabled;
78 |       }
79 | 
80 |       .input {
81 |         background-color: $tags-bgcolor-disabled;
82 |       }
83 |     }
84 |   }
85 | }
86 | 
87 | @import "input-groups";
88 | @import "forms";


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "author": {
 3 |     "name": "Michael Benford",
 4 |     "email": "michael@michaelbenford.net"
 5 |   },
 6 |   "name": "ng-tags-input",
 7 |   "prettyName": "ngTagsInput",
 8 |   "version": "3.2.0",
 9 |   "description": "Tags input directive for AngularJS",
10 |   "license": "MIT",
11 |   "homepage": "http://mbenford.github.io/ngTagsInput",
12 |   "repository": {
13 |     "type": "git",
14 |     "url": "https://github.com/mbenford/ngTagsInput.git"
15 |   },
16 |   "bugs": {
17 |     "url": "https://github.com/mbenford/ngTagsInput/issues"
18 |   },
19 |   "keywords": [
20 |     "angular",
21 |     "tags",
22 |     "tags-input"
23 |   ],
24 |   "scripts": {
25 |     "test": "grunt test",
26 |     "travis": "grunt travis"
27 |   },
28 |   "main": "build/ng-tags-input.min.js",
29 |   "dependencies": {},
30 |   "devDependencies": {
31 |     "babel-plugin-angularjs-annotate": "0.7.0",
32 |     "babel-plugin-external-helpers": "6.22.0",
33 |     "babel-preset-es2015": "6.24.1",
34 |     "dgeni": "0.4.7",
35 |     "dgeni-packages": "0.17.1",
36 |     "glob": "7.1.1",
37 |     "grunt": "1.0.1",
38 |     "grunt-angular-templates": "1.1.0",
39 |     "grunt-bump": "0.8.0",
40 |     "grunt-contrib-clean": "1.1.0",
41 |     "grunt-contrib-compress": "1.4.1",
42 |     "grunt-contrib-copy": "1.0.0",
43 |     "grunt-contrib-cssmin": "2.1.0",
44 |     "grunt-contrib-sass": "1.0.0",
45 |     "grunt-contrib-uglify": "2.3.0",
46 |     "grunt-conventional-changelog": "6.1.0",
47 |     "grunt-eslint": "19.0.0",
48 |     "grunt-karma": "2.0.0",
49 |     "grunt-karma-coveralls": "2.5.4",
50 |     "grunt-open": "0.2.3",
51 |     "grunt-rollup": "1.0.1",
52 |     "grunt-shell": "2.1.0",
53 |     "grunt-text-replace": "0.4.0",
54 |     "jasmine-core": "2.5.2",
55 |     "karma": "1.6.0",
56 |     "karma-babel-preprocessor": "6.0.1",
57 |     "karma-chrome-launcher": "2.0.0",
58 |     "karma-coverage": "1.1.1",
59 |     "karma-firefox-launcher": "1.0.1",
60 |     "karma-jasmine": "1.1.0",
61 |     "karma-mocha-reporter": "2.2.3",
62 |     "karma-ng-html2js-preprocessor": "1.0.0",
63 |     "karma-opera-launcher": "1.0.0",
64 |     "karma-phantomjs-launcher": "1.0.0",
65 |     "karma-sauce-launcher": "1.1.0",
66 |     "load-grunt-tasks": "3.5.2",
67 |     "phantomjs-prebuilt": "2.1.7",
68 |     "remap-istanbul": "^0.9.5",
69 |     "rollup-plugin-babel": "2.7.1",
70 |     "rollup-plugin-includepaths": "0.2.2"
71 |   }
72 | }
73 | 


--------------------------------------------------------------------------------
/scss/variables.scss:
--------------------------------------------------------------------------------
 1 | // general
 2 | $base-font-family:                      'Helvetica Neue', Helvetica, Arial, sans-serif;
 3 | 
 4 | // tagsInput
 5 | $tags-bgcolor:                          #fff;
 6 | $tags-border:                           1px solid darkgray;
 7 | $tags-border-shadow:                    1px 1px 1px 0 lightgray inset;
 8 | $tags-outline-box-shadow:               0 0 3px 1px rgba(5, 139, 242, 0.6);
 9 | $tags-outline-box-shadow-invalid:       0 0 3px 1px rgba(255, 0, 0, 0.6);
10 | $tags-bgcolor-disabled:					#eee;
11 | 
12 | $tag-height:                            26px;
13 | $tag-font:                              14px $base-font-family;
14 | $tag-color:                             rgba(240, 249, 255, 1) 0%, rgba(203, 235, 255, 1) 47%, rgba(161, 219, 255, 1) 100%;
15 | $tag-border:                            1px solid rgb(172, 172, 172);
16 | $tag-border-radius:                     3px;
17 | $tag-color-selected:                    rgba(254, 187, 187, 1) 0%, rgba(254, 144, 144, 1) 45%, rgba(255, 92, 92, 1) 100%;
18 | $tag-color-invalid:                     #ff0000;
19 | $tag-color-disabled:                    rgba(240, 249, 255, 1) 0%, rgba(203, 235, 255, 0.75) 47%, rgba(161, 219, 255, 0.62) 100%;
20 | $tag-opacity-disabled:                  0.65;
21 | 
22 | $remove-button-color:                   #585858;
23 | $remove-button-color-active:            #ff0000;
24 | $remove-button-font:                    bold 16px Arial, sans-serif;
25 | 
26 | $input-font:                            $tag-font;
27 | 
28 | // autoComplete
29 | $suggestions-z-index:                   999;
30 | $suggestions-width:                     100%;
31 | $suggestions-bgcolor:                   #fff;
32 | $suggestions-border:                    1px solid rgba(0, 0, 0, 0.2);
33 | $suggestions-border-shadow:             0 5px 10px rgba(0, 0, 0, 0.2);
34 | 
35 | $suggestion-font:                       16px $base-font-family;
36 | $suggestion-color:                      #000;
37 | $suggestion-bgcolor:                    #fff;
38 | $suggestion-color-selected:             #fff;
39 | $suggestion-bgcolor-selected:           #0097cf;
40 | 
41 | $suggestion-highlight-font:             normal bold $suggestion-font;
42 | $suggestion-highlight-color:            $suggestion-color;
43 | $suggestion-highlight-bgcolor:          $suggestion-bgcolor;
44 | $suggestion-highlight-color-selected:   $suggestion-color-selected;
45 | $suggestion-highlight-bgcolor-selected: $suggestion-bgcolor-selected;


--------------------------------------------------------------------------------
/scss/bootstrap/variables.scss:
--------------------------------------------------------------------------------
 1 | // tagsInput
 2 | $tags-border:                           1px solid #ccc;
 3 | $tags-border-radius:                    4px;
 4 | $tags-border-shadow:                    inset 0 1px 1px rgba(0, 0, 0, .075);
 5 | $tags-transition:                       border-color ease-in-out .15s, box-shadow ease-in-out .15s;
 6 | $tags-outline-border:                   1px solid #66afe9;
 7 | $tags-outline-border-shadow:            inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6);
 8 | $tags-bgcolor-disabled:					#eee;
 9 | 
10 | $tag-color:                             #fff;
11 | $tag-bgcolor:                           #428bca;
12 | $tag-border:                            1px solid #357ebd;
13 | $tag-border-radius:                     4px;
14 | $tag-bgcolor-disabled:                  #337ab7;
15 | $tag-opacity-disabled:                  0.65;
16 | 
17 | $tag-color-selected:                    #fff;
18 | $tag-bgcolor-selected:                  #d9534f;
19 | $tag-border-selected:                   1px solid #d43f3a;
20 | 
21 | $tags-height:                           34px;
22 | 
23 | $tags-height-lg:                        46px;
24 | $tag-height-lg:                         38px;
25 | $tag-font-size-lg:                      18px;
26 | $tag-border-radius-lg:                  6px;
27 | $remove-button-font-size-lg:            20px;
28 | $input-font-size-lg:                    18px;
29 | 
30 | $tags-height-sm:                        30px;
31 | $tag-height-sm:                         22px;
32 | $tag-font-size-sm:                      12px;
33 | $tag-border-radius-sm:                  3px;
34 | $remove-button-font-size-sm:            16px;
35 | $input-font-size-sm:                    12px;
36 | 
37 | $tags-border-color-success:             #3c763d;
38 | $tags-outline-border-color-success:     #2b542c;
39 | $tags-outline-border-shadow-success:    inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 6px #67b168;
40 | 
41 | $tags-border-color-error:               #a94442;
42 | $tags-outline-border-color-error:       #843534;
43 | $tags-outline-border-shadow-error:      inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 6px #ce8483;
44 | 
45 | $tags-border-color-warning:             #8a6d3b;
46 | $tags-outline-border-color-warning:     #66512c;
47 | $tags-outline-border-shadow-warning:    inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 6px #c0a16b;
48 | 
49 | // autoComplete
50 | $suggestions-border-radius:             4px;
51 | 
52 | $suggestion-color-selected:             #262626;
53 | $suggestion-bgcolor-selected:           #f5f5f5;
54 | 
55 | $suggestion-highlight-color:            #000;
56 | $suggestion-highlight-bgcolor:          #fff;
57 | $suggestion-highlight-color-selected:   $suggestion-color-selected;
58 | $suggestion-highlight-bgcolor-selected: $suggestion-bgcolor-selected;
59 | 


--------------------------------------------------------------------------------
/scss/tags-input.scss:
--------------------------------------------------------------------------------
  1 | @import "mixins";
  2 | @import "variables";
  3 | 
  4 | tags-input {
  5 |   .tags {
  6 |     -moz-appearance: textfield;
  7 |     -webkit-appearance: textfield;
  8 |     padding: 1px;
  9 |     overflow: hidden;
 10 |     word-wrap: break-word;
 11 |     cursor: text;
 12 |     background-color: $tags-bgcolor;
 13 |     border: $tags-border;
 14 |     box-shadow: $tags-border-shadow;
 15 |     height: 100%;
 16 | 
 17 |     &.focused {
 18 |       outline: none;
 19 |       @include box-shadow($tags-outline-box-shadow);
 20 |     }
 21 | 
 22 |     .tag-list {
 23 |       margin: 0;
 24 |       padding: 0;
 25 |       list-style-type: none;
 26 |     }
 27 | 
 28 |     .tag-item {
 29 |       margin: 2px;
 30 |       padding: 0 5px;
 31 |       display: inline-block;
 32 |       float: left;
 33 |       font: $tag-font;
 34 |       height: $tag-height;
 35 |       line-height: $tag-height - 1px;
 36 |       border: $tag-border;
 37 |       border-radius: $tag-border-radius;
 38 |       @include gradient($tag-color);
 39 | 
 40 |       &.selected {
 41 |         @include gradient($tag-color-selected);
 42 |       }
 43 | 
 44 |       .remove-button {
 45 |         margin: 0 0 0 5px;
 46 |         padding: 0;
 47 |         border: none;
 48 |         background: none;
 49 |         cursor: pointer;
 50 |         vertical-align: middle;
 51 |         font: $remove-button-font;
 52 |         color: $remove-button-color;
 53 | 
 54 |         &:active {
 55 |           color: $remove-button-color-active;
 56 |         }
 57 |       }
 58 |     }
 59 | 
 60 |     .input {
 61 |       border: 0;
 62 |       outline: none;
 63 |       margin: 2px;
 64 |       padding: 0;
 65 |       padding-left: 5px;
 66 |       float: left;
 67 |       height: $tag-height;
 68 |       font: $input-font;
 69 | 
 70 |       &.invalid-tag {
 71 |         color: $tag-color-invalid;
 72 |       }
 73 | 
 74 |       &::-ms-clear {
 75 |         display: none;
 76 |       }
 77 |     }
 78 | 
 79 |   }
 80 | 
 81 |   &.ng-invalid .tags {
 82 |     @include box-shadow($tags-outline-box-shadow-invalid);
 83 |   }
 84 | 
 85 |   &[disabled] {
 86 |     .host:focus {
 87 |       outline: none;
 88 |     }
 89 | 
 90 |     .tags {
 91 |       background-color: $tags-bgcolor-disabled;
 92 |       cursor: default;
 93 | 
 94 |       .tag-item {
 95 |         opacity: $tag-opacity-disabled;
 96 |         @include gradient($tag-color-disabled);
 97 | 
 98 |         .remove-button {
 99 |           cursor: default;
100 | 
101 |           &:active {
102 |             color: $remove-button-color;
103 |           }
104 |         }
105 |       }
106 | 
107 |       .input {
108 |         background-color: $tags-bgcolor-disabled;
109 |         cursor: default;
110 |       }
111 |     }
112 |   }
113 | }


--------------------------------------------------------------------------------
/Gruntfile.js:
--------------------------------------------------------------------------------
  1 | module.exports = grunt => {
  2 |   function loadConfig(path) {
  3 |     let glob = require('glob');
  4 |     let object = {};
  5 | 
  6 |     glob.sync('*', { cwd: path }).forEach(option => {
  7 |       let key = option.replace(/\.js$/, '');
  8 |       let data = require(path + option);
  9 |       object[key] = typeof data === 'function' ? data(grunt) : data;
 10 |     });
 11 | 
 12 |     return object;
 13 |   }
 14 | 
 15 |   const config = {
 16 |     pkg: grunt.file.readJSON('package.json'),
 17 |     bowerDirectory: '../ngTagsInput-bower',
 18 |     bowerFile: '<%= bowerDirectory %>/bower.json',
 19 |     websiteDirectory: '../ngTagsInput-website',
 20 |     websiteConfigFile: '<%= websiteDirectory %>/_config.yml',
 21 | 
 22 |     files: {
 23 |       js: {
 24 |         src: 'src/init.js',
 25 |         out: 'build/<%= pkg.name %>.js',
 26 |         outMin: 'build/<%= pkg.name %>.min.js'
 27 |       },
 28 |       css: {
 29 |         main: {
 30 |           src: 'scss/main.scss',
 31 |           out: 'build/<%= pkg.name %>.css',
 32 |           outMin: 'build/<%= pkg.name %>.min.css'
 33 |         },
 34 |         bootstrap: {
 35 |           src: 'scss/bootstrap/main.scss',
 36 |           out: 'build/<%= pkg.name %>.bootstrap.css',
 37 |           outMin: 'build/<%= pkg.name %>.bootstrap.min.css'
 38 |         }
 39 |       },
 40 |       html: {
 41 |         src: 'templates/*.html',
 42 |         out: 'build/tmp/compiled-templates.js'
 43 |       },
 44 |       zip: {
 45 |         unminified: 'build/<%= pkg.name %>.zip',
 46 |         minified: 'build/<%= pkg.name %>.min.zip'
 47 |       },
 48 |       tgz: {
 49 |         npm: 'build/<%= pkg.name %>.tgz'
 50 |       },
 51 |       spec: {
 52 |         src: 'test/*.spec.js'
 53 |       }
 54 |     },
 55 |     banners: {
 56 |       unminified:
 57 | `/*!
 58 |  * <%= pkg.prettyName %> v<%= pkg.version %>
 59 |  * <%= pkg.homepage %>
 60 |  *
 61 |  * Copyright (c) 2013-<%= grunt.template.today("yyyy") %> <%= pkg.author.name %>
 62 |  * License: <%= pkg.license %>
 63 |  *
 64 |  * Generated at <%= grunt.template.today("yyyy-mm-dd HH:MM:ss o") %>
 65 |  */`,
 66 |       minified: '/*! <%= pkg.prettyName %> v<%= pkg.version %> License: <%= pkg.license %> */'
 67 |     }
 68 |   };
 69 | 
 70 |   grunt.util._.extend(config, loadConfig('./grunt/options/'));
 71 |   grunt.initConfig(config);
 72 | 
 73 |   require('load-grunt-tasks')(grunt);
 74 |   grunt.loadTasks('grunt/tasks');
 75 |   grunt.loadNpmTasks('remap-istanbul');
 76 | 
 77 |   grunt.registerTask('lint', ['eslint']);
 78 |   grunt.registerTask('test', ['lint', 'clean', 'ngtemplates', 'rollup', 'karma:local']);
 79 |   grunt.registerTask('coverage', ['test', 'remapIstanbul', 'open:coverage']);
 80 |   grunt.registerTask('docs', ['clean:build', 'dgeni']);
 81 |   grunt.registerTask('travis', ['pack', 'compress', 'copy:travis', 'coveralls']);
 82 |   grunt.registerTask('javascript-only', ['test', 'uglify']);
 83 |   grunt.registerTask('css-only', ['sass', 'cssmin']);
 84 |   grunt.registerTask('release', [
 85 |     'pack',
 86 |     'compress',
 87 |     'changelog',
 88 |     'replace:changelog',
 89 |     'shell:git',
 90 |     'copy:bower',
 91 |     'update-bower-version',
 92 |     'shell:git_bower',
 93 |     'dgeni',
 94 |     'copy:website',
 95 |     'update-website-version',
 96 |     'shell:git_website'
 97 |   ]);
 98 |   grunt.registerTask('default', ['pack']);
 99 | };
100 | 


--------------------------------------------------------------------------------
/src/util.js:
--------------------------------------------------------------------------------
  1 | /***
  2 |  * @ngdoc service
  3 |  * @name tiUtil
  4 |  * @module ngTagsInput
  5 |  *
  6 |  * @description
  7 |  * Helper methods used internally by the directive. Should not be called directly from user code.
  8 |  */
  9 | export default function UtilService($timeout, $q) {
 10 |   'ngInject';
 11 | 
 12 |   let self = {};
 13 | 
 14 |   self.debounce = (fn, delay) => {
 15 |     let timeoutId;
 16 |     return function(...args) {
 17 |       $timeout.cancel(timeoutId);
 18 |       timeoutId = $timeout(function() { fn.apply(null, args); }, delay);
 19 |     };
 20 |   };
 21 | 
 22 |   self.makeObjectArray = (array, key) => {
 23 |     if (!angular.isArray(array) || array.length === 0 || angular.isObject(array[0])) {
 24 |       return array;
 25 |     }
 26 | 
 27 |     return array.map(item => ({ [key]: item }));
 28 |   };
 29 | 
 30 |   self.findInObjectArray = (array, obj, key, comparer) => {
 31 |     let item = null;
 32 |     comparer = comparer || self.defaultComparer;
 33 | 
 34 |     array.some(element => {
 35 |       if (comparer(element[key], obj[key])) {
 36 |         item = element;
 37 |         return true;
 38 |       }
 39 |     });
 40 | 
 41 |     return item;
 42 |   };
 43 | 
 44 |   self.defaultComparer = (a, b) => {
 45 |     // I'm aware of the internationalization issues regarding toLowerCase()
 46 |     // but I couldn't come up with a better solution right now
 47 |     return self.safeToString(a).toLowerCase() === self.safeToString(b).toLowerCase();
 48 |   };
 49 | 
 50 |   self.safeHighlight = (str, value) => {
 51 |     str = self.encodeHTML(str);
 52 |     value = self.encodeHTML(value);
 53 | 
 54 |     if (!value) {
 55 |       return str;
 56 |     }
 57 | 
 58 |     let escapeRegexChars = str => str.replace(/([.?*+^$[\]\\(){}|-])/g, '\\$1');
 59 |     let expression = new RegExp('&[^;]+;|' + escapeRegexChars(value), 'gi');
 60 | 
 61 |     return str.replace(expression, match => match.toLowerCase() === value.toLowerCase() ? '<em>' + match + '</em>' : match);
 62 |   };
 63 | 
 64 |   self.safeToString = value => angular.isUndefined(value) || value === null ? '' : value.toString().trim();
 65 | 
 66 |   self.encodeHTML = value => self.safeToString(value).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
 67 | 
 68 |   self.handleUndefinedResult = (fn, valueIfUndefined) => {
 69 |     return function () {
 70 |       let result = fn.apply(null, arguments);
 71 |       return angular.isUndefined(result) ? valueIfUndefined : result;
 72 |     };
 73 |   };
 74 | 
 75 |   self.replaceSpacesWithDashes = str => self.safeToString(str).replace(/\s/g, '-');
 76 | 
 77 |   self.isModifierOn = event => event.shiftKey || event.ctrlKey || event.altKey || event.metaKey;
 78 | 
 79 |   self.promisifyValue = value => {
 80 |     value = angular.isUndefined(value) ? true : value;
 81 |     return $q[value ? 'when' : 'reject']();
 82 |   };
 83 | 
 84 |   self.simplePubSub = function() {
 85 |     let events = {};
 86 |     return {
 87 |       on(names, handler, first) {
 88 |         names.split(' ').forEach(name => {
 89 |           if (!events[name]) {
 90 |             events[name] = [];
 91 |           }
 92 |           let method = first ? [].unshift : [].push;
 93 |           method.call(events[name], handler);
 94 |         });
 95 |         return this;
 96 |       },
 97 |       trigger(name, args) {
 98 |         let handlers = events[name] || [];
 99 |         handlers.every(handler => self.handleUndefinedResult(handler, true)(args));
100 |         return this;
101 |       }
102 |     };
103 |   };
104 | 
105 |   return self;
106 | }
107 | 


--------------------------------------------------------------------------------
/test/autosize.spec.js:
--------------------------------------------------------------------------------
  1 | describe('autosize directive', () => {
  2 |   let $scope, $compile, tagsInputConfigMock,
  3 |     element, style, container;
  4 | 
  5 |   beforeEach(() => {
  6 |     module('ngTagsInput');
  7 | 
  8 |     tagsInputConfigMock = jasmine.createSpyObj('tagsInputConfig', ['getTextAutosizeThreshold']);
  9 |     tagsInputConfigMock.getTextAutosizeThreshold.and.returnValue(3);
 10 | 
 11 |     module($provide => {
 12 |       $provide.value('tagsInputConfig', tagsInputConfigMock);
 13 |     });
 14 | 
 15 |     inject(($rootScope, _$compile_) => {
 16 |       $scope = $rootScope;
 17 |       $compile = _$compile_;
 18 |     });
 19 | 
 20 |     style = angular.element('<style> .input { box-sizing: border-box; border: 1px; padding: 2px; font: Arial 18px; }</style>').appendTo('head');
 21 |     container = angular.element('<div></div>').appendTo('body');
 22 |   });
 23 | 
 24 |   afterEach(() => {
 25 |     style.remove();
 26 |     container.remove();
 27 |   });
 28 | 
 29 |   function compile(...args) {
 30 |     let attributes = args.join(' ');
 31 |     element = angular.element('<input class="input" ng-model="model" ng-trim="false" ti-autosize ' + attributes + '>');
 32 |     container.append(element);
 33 | 
 34 |     $compile(element)($scope);
 35 |     $scope.$digest();
 36 |   }
 37 | 
 38 |   function getTextWidth(text, threshold) {
 39 |     let width, span = angular.element('<span class="input"></span>');
 40 |     threshold = threshold || 3;
 41 | 
 42 |     span.css('white-space', 'pre');
 43 |     span.text(text);
 44 |     container.append(span);
 45 |     width = parseInt(span.prop('offsetWidth'), 10) + threshold;
 46 | 
 47 |     span.remove();
 48 | 
 49 |     return width + 'px';
 50 |   }
 51 | 
 52 |   it('re-sizes the input width when its view content changes', () => {
 53 |     // Arrange
 54 |     let text = 'AAAAAAAAAA';
 55 |     compile();
 56 | 
 57 |     // Act
 58 |     changeElementValue(element, text);
 59 | 
 60 |     // Arrange
 61 |     expect(element.css('width')).toBe(getTextWidth(text));
 62 |   });
 63 | 
 64 |   it('re-sizes the input width when its model value changes', () => {
 65 |     // Arrange
 66 |     let text = 'AAAAAAAAAAAAAAAAAAAA';
 67 |     compile();
 68 | 
 69 |     // Act
 70 |     $scope.model = text;
 71 |     $scope.$digest();
 72 | 
 73 |     // Arrange
 74 |     expect(element.css('width')).toBe(getTextWidth(text));
 75 |   });
 76 | 
 77 |   it('sets the input width as the placeholder width when the input is empty', () => {
 78 |     // Arrange
 79 |     $scope.placeholder = 'Some placeholder';
 80 |     compile('placeholder="{{placeholder}}"');
 81 | 
 82 |     // Act
 83 |     $scope.model = '';
 84 |     $scope.$digest();
 85 | 
 86 |     // Assert
 87 |     expect(element.css('width')).toBe(getTextWidth('Some placeholder'));
 88 |   });
 89 | 
 90 |   it('sets the input width as the placeholder width when the input is empty and the placeholder changes', () => {
 91 |     // Arrange
 92 |     $scope.placeholder = 'Some placeholder';
 93 |     compile('placeholder="{{placeholder}}"');
 94 |     $scope.model = '';
 95 |     $scope.$digest();
 96 | 
 97 |     // Act
 98 |     $scope.placeholder = 'Some very lengthy placeholder';
 99 |     $scope.$digest();
100 | 
101 |     // Assert
102 |     expect(element.css('width')).toBe(getTextWidth('Some very lengthy placeholder'));
103 |   });
104 | 
105 |   it('clears the input width when it cannot be calculated', () => {
106 |     // Arrange
107 |     container.hide();
108 |     compile();
109 | 
110 |     // Act
111 |     changeElementValue(element, 'AAAAAAAAAAAAAA');
112 | 
113 |     // Assert
114 |     expect(element.prop('style').width).toBe('');
115 |   });
116 | 
117 |   it('overrides the threshold', () => {
118 |     // Arrange
119 |     let text = 'AAAAAAAAAAAAAA';
120 |     tagsInputConfigMock.getTextAutosizeThreshold.and.returnValue(20);
121 |     compile();
122 | 
123 |     // Act
124 |     changeElementValue(element, text);
125 | 
126 |     // Assert
127 |     expect(element.css('width')).toBe(getTextWidth(text, 20));
128 |   });
129 | });


--------------------------------------------------------------------------------
/src/configuration.js:
--------------------------------------------------------------------------------
  1 | /**
  2 |  * @ngdoc service
  3 |  * @name tagsInputConfig
  4 |  * @module ngTagsInput
  5 |  *
  6 |  * @description
  7 |  * Sets global configuration settings for both tagsInput and autoComplete directives. It's also used internally to parse and
  8 |  *  initialize options from HTML attributes.
  9 |  */
 10 | export default function TagsInputConfigurationProvider() {
 11 |   'ngInject';
 12 | 
 13 |   let globalDefaults = {};
 14 |   let interpolationStatus = {};
 15 |   let autosizeThreshold = 3;
 16 | 
 17 |   /**
 18 |    * @ngdoc method
 19 |    * @name tagsInputConfig#setDefaults
 20 |    * @description Sets the default configuration option for a directive.
 21 |    *
 22 |    * @param {string} directive Name of the directive to be configured. Must be either 'tagsInput' or 'autoComplete'.
 23 |    * @param {object} defaults Object containing options and their values.
 24 |    *
 25 |    * @returns {object} The service itself for chaining purposes.
 26 |    */
 27 |   this.setDefaults = (directive, defaults) => {
 28 |     globalDefaults[directive] = defaults;
 29 |     return this;
 30 |   };
 31 | 
 32 |   /**
 33 |    * @ngdoc method
 34 |    * @name tagsInputConfig#setActiveInterpolation
 35 |    * @description Sets active interpolation for a set of options.
 36 |    *
 37 |    * @param {string} directive Name of the directive to be configured. Must be either 'tagsInput' or 'autoComplete'.
 38 |    * @param {object} options Object containing which options should have interpolation turned on at all times.
 39 |    *
 40 |    * @returns {object} The service itself for chaining purposes.
 41 |    */
 42 |   this.setActiveInterpolation = (directive, options) => {
 43 |     interpolationStatus[directive] = options;
 44 |     return this;
 45 |   };
 46 | 
 47 |   /**
 48 |    * @ngdoc method
 49 |    * @name tagsInputConfig#setTextAutosizeThreshold
 50 |    * @description Sets the threshold used by the tagsInput directive to re-size the inner input field element based on its contents.
 51 |    *
 52 |    * @param {number} threshold Threshold value, in pixels.
 53 |    *
 54 |    * @returns {object} The service itself for chaining purposes.
 55 |    */
 56 |   this.setTextAutosizeThreshold = threshold => {
 57 |     autosizeThreshold = threshold;
 58 |     return this;
 59 |   };
 60 | 
 61 |   this.$get = $interpolate => {
 62 |     'ngInject';
 63 | 
 64 |     let converters = {
 65 |       [String]: value => value.toString(),
 66 |       [Number]: value => parseInt(value, 10),
 67 |       [Boolean]: value => value.toLowerCase() === 'true',
 68 |       [RegExp]: value => new RegExp(value)
 69 |     };
 70 | 
 71 |     return {
 72 |       load(directive, element, attrs, events, optionDefinitions) {
 73 |         let defaultValidator = () => true;
 74 |         let options = {};
 75 | 
 76 |         angular.forEach(optionDefinitions, (value, key) => {
 77 |           let type = value[0];
 78 |           let localDefault = value[1];
 79 |           let validator = value[2] || defaultValidator;
 80 |           let converter = converters[type];
 81 | 
 82 |           let getDefault = () => {
 83 |             let globalValue = globalDefaults[directive] && globalDefaults[directive][key];
 84 |             return angular.isDefined(globalValue) ? globalValue : localDefault;
 85 |           };
 86 | 
 87 |           let updateValue = value => {
 88 |             options[key] = value && validator(value) ? converter(value) : getDefault();
 89 |           };
 90 | 
 91 |           if (interpolationStatus[directive] && interpolationStatus[directive][key]) {
 92 |             attrs.$observe(key, value => {
 93 |               updateValue(value);
 94 |               events.trigger('option-change', { name: key, newValue: value });
 95 |             });
 96 |           }
 97 |           else {
 98 |             updateValue(attrs[key] && $interpolate(attrs[key])(element.scope()));
 99 |           }
100 |         });
101 | 
102 |         return options;
103 |       },
104 |       getTextAutosizeThreshold() {
105 |         return autosizeThreshold;
106 |       }
107 |     };
108 |   };
109 | }
110 | 


--------------------------------------------------------------------------------
/test/lib/ng-stats.min.js:
--------------------------------------------------------------------------------
1 | /*! ng-stats 2.1.3 created by Kent C. Dodds | 2015-03-03 */
2 | !function(a,b){"use strict";"function"==typeof define&&define.amd?define(b):"undefined"!=typeof module&&module.exports?module.exports=b:a.showAngularStats=b()}(window,function(){"use strict";function a(){if(!z){z=!0;var a=d(),b=Object.getPrototypeOf(a),c=b.$digest;b.$digest=function(){var a=u();c.apply(this,arguments);var b=u()-a;i(e(),b)}}}function b(a){window.angular&&d()?c(a):window.setTimeout(function(){b(a)},200)}function c(b){function c(a,c,d){var e=a.charAt(0).toUpperCase()+a.slice(1);b["track"+e]&&(h[a]=[],c["track + capThingToTrack"]=function(b){d&&h[a][h.length-1]===b||(h[a][h.length-1]=b,h[a].push(b))})}function d(a,c,d){var f=a.charAt(0).toUpperCase()+a.slice(1);if(b["log"+f]){var g;c["log"+f]=function(b){if(!d||g!==b){g=b;var c=e(a,b);c?console.log("%c"+a+":",c,b):console.log(a+":",b)}}}}function e(a,c){var d;return"digest"===a&&(d=c>b.digestTimeThreshold?"color:red":"color:green"),d}function f(a,c){var d=c||y,e=d>b.digestTimeThreshold?"red":"green";if(x=j(a)?x:a,y=j(c)?y:c,m.text(x+" | "+y.toFixed(2)).css({color:e}),c){var f=o.getContext("2d");l>0&&(l=0,f.fillStyle="#333",f.fillRect(n.width-1,0,1,n.height)),f.fillStyle=e,f.fillRect(n.width-1,Math.max(0,n.height-d),2,2)}}function g(){if(i.active){window.setTimeout(g,250);var a=o.getContext("2d"),b=a.getImageData(1,0,n.width-1,n.height);a.putImageData(b,0,0),a.fillStyle=l++>2?"black":"#333",a.fillRect(n.width-1,0,1,n.height)}}b=b||{};var h={listeners:A};if(t&&(t.$el&&t.$el.remove(),t.active=!1,t=null),b===!1)return void sessionStorage.removeItem(s);b.position=b.position||"top-left",b=angular.extend({digestTimeThreshold:16,autoload:!1,trackDigest:!1,trackWatches:!1,logDigest:!1,logWatches:!1,styles:{position:"fixed",background:"black",borderBottom:"1px solid #666",borderRight:"1px solid #666",color:"red",fontFamily:"Courier",width:130,zIndex:9999,textAlign:"right",top:-1==b.position.indexOf("top")?null:0,bottom:-1==b.position.indexOf("bottom")?null:0,right:-1==b.position.indexOf("right")?null:0,left:-1==b.position.indexOf("left")?null:0}},b||{}),a();var i=t={active:!0};b.autoload?sessionStorage.setItem(s,JSON.stringify(b)):sessionStorage.removeItem(s);var k=angular.element(document.body),l=0;i.$el=angular.element("<div><canvas></canvas><div></div></div>").css(b.styles),k.append(i.$el);var m=i.$el.find("div"),n={width:130,height:40},o=i.$el.find("canvas").attr(n)[0];return A.digestLength.ngStatsAddToCanvas=function(a){f(null,a)},A.watchCount.ngStatsAddToCanvas=function(a){f(a)},c("digest",A.digestLength),c("watches",A.watchCount,!0),d("digest",A.digestLength),d("watches",A.watchCount,!0),g(),r.$$phase||r.$digest(),h}function d(){if(r)return r;var a=document.querySelector(".ng-scope");return a?r=angular.element(a).scope().$root:null}function e(){window.clearTimeout(w);var a=u();return a-v>300?(v=a,x=k()):w=window.setTimeout(function(){i(e())},350),x}function f(a){var b=g(a);return k(b)}function g(a){a=angular.element(a);var b=a.scope();return b||(a=angular.element(a.querySelector(".ng-scope")),b=a.scope()),b}function h(a){return a&&a.$$watchers?a.$$watchers:[]}function i(a,b){j(a)||angular.forEach(A.watchCount,function(b){b(a)}),j(b)||angular.forEach(A.digestLength,function(a){a(b)})}function j(a){return null===a||void 0===a}function k(a){var b=0;return l(a,function(a){b+=h(a).length}),b}function l(a,b){if("function"==typeof a&&(b=a,a=null),a=a||d(),a=p(a)){var c=b(a);return c===!1?c:n(a,b)}}function m(a,b){for(var c;(a=a.$$nextSibling)&&(c=b(a),c!==!1)&&(c=n(a,b),c!==!1););return c}function n(a,b){for(var c;(a=a.$$childHead)&&(c=b(a),c!==!1)&&(c=m(a,b),c!==!1););return c}function o(a){var b=null;return l(function(c){return c.$id===a?(b=c,!1):void 0}),b}function p(a){return q(a)&&(a=o(a)),a}function q(a){return"string"==typeof a||"number"==typeof a}var r,s="showAngularStats_autoload",t=null,u=window.performance&&window.performance.now?function(){return window.performance.now()}:function(){return Date.now()},v=u(),w=null,x=e()||0,y=0,z=!1,A={watchCount:{},digestLength:{}},B=sessionStorage[s];return B&&b(JSON.parse(B)),angular.module("angularStats",[]).directive("angularStats",function(){function b(a){for(var b=a[0];b.parentElement;)b=b.parentElement;return b}var c=1;return{scope:{digestLength:"@",watchCount:"@",watchCountRoot:"@",onDigestLengthUpdate:"&?",onWatchCountUpdate:"&?"},link:function(d,e,g){a();var h=c++;if(g.hasOwnProperty("digestLength")){var i=e;g.digestLength&&(i=angular.element(e[0].querySelector(g.digestLength))),A.digestLength["ngStatsDirective"+h]=function(a){i.text((a||0).toFixed(2))}}if(g.hasOwnProperty("watchCount")){var j,k=e;if(d.watchCount&&(k=angular.element(e[0].querySelector(g.watchCount))),d.watchCountRoot)if("this"===d.watchCountRoot)j=e;else{var l;if(l=g.hasOwnProperty("watchCountOfChild")?e[0]:b(e),j=angular.element(l.querySelector(d.watchCountRoot)),!j.length)throw new Error("no element at selector: "+d.watchCountRoot)}A.watchCount["ngStatsDirective"+h]=function(a){var b=a;j&&(b=f(j)),k.text(b)}}d.onWatchCountUpdate&&(A.watchCount["ngStatsDirectiveUpdate"+h]=function(a){d.onWatchCountUpdate({watchCount:a})}),d.onDigestLengthUpdate&&(A.digestLength["ngStatsDirectiveUpdate"+h]=function(a){d.onDigestLengthUpdate({digestLength:a})}),d.$on("$destroy",function(){delete A.digestLength["ngStatsDirectiveUpdate"+h],delete A.watchCount["ngStatsDirectiveUpdate"+h],delete A.digestLength["ngStatsDirective"+h],delete A.watchCount["ngStatsDirective"+h]})}}}),c});


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # ⚠ This project is no longer maintained
  2 | 
  3 | # ngTagsInput 
  4 | 
  5 | [![Travis](https://img.shields.io/travis/mbenford/ngTagsInput.svg?style=flat)](https://travis-ci.org/mbenford/ngTagsInput)
  6 | [![Coveralls](https://img.shields.io/coveralls/mbenford/ngTagsInput.svg?style=flat)](https://coveralls.io/r/mbenford/ngTagsInput?branch=master)
  7 | [![David](https://img.shields.io/david/dev/mbenford/ngTagsInput.svg?style=flat)](https://david-dm.org/mbenford/ngTagsInput#info=devDependencies)
  8 | [![GitHub release](https://img.shields.io/github/release/mbenford/ngTagsInput.svg)](https://github.com/mbenford/ngTagsInput/releases)
  9 | 
 10 | Tags input directive for AngularJS. Check out the [ngTagsInput website](http://mbenford.github.io/ngTagsInput) for more information.
 11 | 
 12 | ## Requirements
 13 | 
 14 |  - AngularJS 1.3+
 15 |  - A modern browser (Chrome 31+, Firefox 29+, Safari 7+, Opera 12+, IE 10+)
 16 | 
 17 | ## Installing
 18 | 
 19 | All files are available from a variety of sources. Choose the one that best fits your needs:
 20 | 
 21 | - Direct download (https://github.com/mbenford/ngTagsInput/releases)
 22 | - NPM (`npm install ng-tags-input --save`)
 23 | - Bower (`bower install ng-tags-input --save`)
 24 | - CDNJS (http://cdnjs.com/libraries/ng-tags-input)
 25 | 
 26 | You can also grab the [latest build](#latest-build) generated by Travis. It's fully functional and may contain new features and bugfixes not yet published to the services listed above.
 27 | 
 28 | Now all you have to do is add the scripts to your application. Just make sure the `ng-tags-input.js` file is inserted **after** the `angular.js` script:
 29 | 
 30 | ```html
 31 | <script src="angular.js"></script>
 32 | <script src="ng-tags-input.js"></script>
 33 | <link rel="stylesheet" type="text/css" href="ng-tags-input.css">
 34 | ```
 35 | 
 36 | ## Usage
 37 | 
 38 |  1. Add the `ngTagsInput` module as a dependency in your AngularJS app;
 39 |  2. Add the custom element `<tags-input>` to the HTML file where you want to use an input tag control and bind it to a property of your model. That property, if it exists, must be an array of objects and each object must have a property named `text` containing the tag text;
 40 |  3. Set up the options that make sense to your application;
 41 |  4. Enable autocomplete, if you want to use it, by adding the directive `<auto-complete>` inside the `<tags-input>` tag, and bind it to a function of your model. That function must return either an array of objects or a promise that eventually resolves to an array of objects (same rule from step 2 applies here);
 42 |  5. Customize the CSS classes, if you want to.
 43 |  6. You're done!
 44 | 
 45 | **Note:** There's a more detailed [getting started](http://mbenford.github.io/ngTagsInput/gettingstarted) guide on the ngTagsInput website.
 46 | 
 47 | ## Example
 48 | 
 49 | ```html
 50 | <html>
 51 | <head>
 52 |     <script src="angular.min.js"></script>
 53 |     <script src="ng-tags-input.min.js"></script>
 54 |     <link rel="stylesheet" type="text/css" href="ng-tags-input.min.css">
 55 |     <script>
 56 |         angular.module('myApp', ['ngTagsInput'])
 57 |             .controller('MyCtrl', function($scope, $http) {
 58 |                 $scope.tags = [
 59 |                     { text: 'just' },
 60 |                     { text: 'some' },
 61 |                     { text: 'cool' },
 62 |                     { text: 'tags' }
 63 |                 ];
 64 |                 $scope.loadTags = function(query) {
 65 |                      return $http.get('/tags?query=' + query);
 66 |                 };
 67 |             });
 68 |     </script>
 69 | </head>
 70 | <body ng-app="myApp" ng-controller="MyCtrl">
 71 |     <tags-input ng-model="tags">
 72 |         <auto-complete source="loadTags($query)"></auto-complete>
 73 |     </tags-input>
 74 | </body>
 75 | </html>
 76 | ```
 77 | 
 78 | ## Options
 79 | 
 80 | Check out the [documentation](http://mbenford.github.io/ngTagsInput/documentation/api) page for a detailed view of all available options.
 81 | 
 82 | ## Demo
 83 | 
 84 | You can see the directive in action in the [demo page](http://mbenford.github.io/ngTagsInput/demos).
 85 | 
 86 | ## Contributing
 87 | 
 88 | Before posting an issue or sending a pull request, make sure to read the [CONTRIBUTING](https://github.com/mbenford/ngTagsInput/blob/master/CONTRIBUTING.md) file.
 89 | 
 90 | ## License
 91 | 
 92 | See the [LICENSE](https://github.com/mbenford/ngTagsInput/blob/master/LICENSE) file.
 93 | 
 94 | ## Changelog
 95 | 
 96 | See the [CHANGELOG](https://github.com/mbenford/ngTagsInput/blob/master/CHANGELOG.md) page.
 97 | 
 98 | ## Alternatives
 99 | 
100 | The following are some alternatives to ngTagsInput you may want to check out:
101 | 
102 | - [angular-tags](http://decipherinc.github.io/angular-tags): Pure AngularJS tagging widget with typeahead support courtesy of ui-bootstrap
103 | - [angular-tagger](https://github.com/monterail/angular-tagger): Pure Angular autocomplete with tags, no jQuery
104 | - [jsTag](https://github.com/eranhirs/jstag): Open source project for editing tags (aka tokenizer) based on AngularJS
105 | - [bootstrap-tagsinput](http://timschlechter.github.io/bootstrap-tagsinput/examples): jQuery plugin providing a Twitter Bootstrap user interface for managing tags (provides Angular support)
106 | 
107 | ## Latest build
108 | 
109 | - Compressed: [ng-tags-input.min.zip](https://s3.amazonaws.com/ng-tags-input/ng-tags-input.min.zip)
110 | - Uncompressed: [ng-tags-input.zip](https://s3.amazonaws.com/ng-tags-input/ng-tags-input.zip)
111 | 


--------------------------------------------------------------------------------
/test/test-page.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html ng-app="app" ng-strict-di>
  3 | <head>
  4 |   <title>ngTagsInput Test Page</title>
  5 |   <script type="text/javascript" src="lib/angular.js"></script>
  6 |   <script type="text/javascript" src="lib/ng-stats.min.js"></script>
  7 |   <script type="text/javascript" src="../build/ng-tags-input.min.js"></script>
  8 |   <link rel="stylesheet" href="../build/ng-tags-input.min.css"/>
  9 | 
 10 |   <style>
 11 |     .stats {
 12 |       position: fixed;
 13 |       bottom: 0;
 14 |       right: 0;
 15 |       padding: 10px;
 16 |       margin: 10px;
 17 |       z-index: 9999;
 18 |       background-color: #000;
 19 |       color: lime;
 20 |       font: 15px "Lucida Console", Monaco, monospace;
 21 |     }
 22 |   </style>
 23 | </head>
 24 | 
 25 | <body ng-controller="Ctrl">
 26 |   <tags-input ng-model="tags" add-on-blur="false" ng-focus="focus()" ng-blur="blur()" add-on-paste="true" paste-split-pattern="[,;|]" spellcheck="false" display-property="name" template="tag-template">
 27 |       <auto-complete source="loadItems($query)" min-length="1" load-on-down-arrow="true" load-on-focus="true" load-on-empty="true" template="autocomplete-template"></auto-complete>
 28 |   </tags-input>
 29 | 
 30 |   <script type="text/ng-template" id="tag-template">
 31 |     <div style="float: left;">
 32 |       <img ng-src="{{data.picture}}" width="20" height="20" style="vertical-align: middle"/>
 33 |     </div>
 34 |     <div style="float: left; padding-left: 2px">
 35 |       <span>{{$getDisplayText()}}</span>
 36 |       <a class="remove-button" ng-click="$removeTag()">&times;</a>
 37 |     </div>
 38 |   </script>
 39 | 
 40 |   <script type="text/ng-template" id="autocomplete-template">
 41 |     <div>
 42 |       <div style="float: left">
 43 |         <img ng-src="{{data.picture}}" width="64" height="64"/>
 44 |       </div>
 45 |       <div style="float:left; margin-left: 5px">
 46 |         <div><span ng-bind-html="$highlight(data.name)"></span></div>
 47 |         <div style="margin-top: 5px">
 48 |           <div><span style="font-style: italic; font-size: 14px">{{data.realname}}</span></div>
 49 |           <div><span style="font-style: italic; font-size: 14px">{{data.city}}</span></div>
 50 |         </div>
 51 |       </div>
 52 |     </div>
 53 |   </script>
 54 | 
 55 |   <div class="stats" angular-stats watch-count=".watch-count" digest-length=".digest-length">
 56 |     $watch : <span class="watch-count"></span><br />
 57 |     $digest: <span class="digest-length"></span>ms
 58 |   </div>
 59 | 
 60 |   <script type="text/javascript">
 61 |     angular.module('app', ['ngTagsInput', 'angularStats'])
 62 |         .controller('Ctrl', ['$scope', function($scope) {
 63 |             var superheroes = [
 64 |               {
 65 |                 name: 'Batman',
 66 |                 realname: 'Bruce Wayne',
 67 |                 city: 'Gotham City',
 68 |                 picture: 'http://www.xboxachievements.com/forum/customavatars/avatar393936_1.gif'
 69 |               },
 70 |               {
 71 |                 name: 'Superman',
 72 |                 realname: 'Clark Kent',
 73 |                 city: 'Metropolis',
 74 |                 picture: 'http://s6047.storage.proboards.com/3246047/a/N03FIKtlEA7eli2Bighw.jpg'
 75 |               },
 76 |               {
 77 |                 name: 'Iron Man',
 78 |                 realname: 'Tony Stark',
 79 |                 city: 'New York',
 80 |                 picture: 'http://static.planetminecraft.com/files/avatar/1641115_0.jpg'
 81 |               },
 82 |               {
 83 |                 name: 'Spiderman',
 84 |                 realname: 'Peter Park',
 85 |                 city: 'New York',
 86 |                 picture: 'http://avatarbox.net/avatars/img30/spider_m_a_n_avatar_picture_39548.jpg'
 87 |               },
 88 |               {
 89 |                 name: 'Green Lantern',
 90 |                 realname: 'Hal Jordan',
 91 |                 city: 'Coast City',
 92 |                 picture: 'http://www.hcrealms.com/forum/image.php?u=23873&dateline=1332599251'
 93 |               },
 94 |             ];
 95 | 
 96 |             $scope.tags = [];
 97 |             $scope.placeholder = 'New tag';
 98 |             $scope.loadItems = function(query) {
 99 |               return superheroes.filter(function(superhero) {
100 |                 return superhero.name.toLowerCase().indexOf(query.toLowerCase()) > -1;
101 |               });
102 |             };
103 | 
104 |             $scope.focus = function() {
105 |                 console.log('focus');
106 |             };
107 | 
108 |             $scope.blur = function() {
109 |               console.log('blur');
110 |             };
111 |         }])
112 |         .directive('limitTags', function() {
113 |           return {
114 |             require: 'ngModel',
115 |             link: function(scope, elem, attrs, ngModel) {
116 |                 var max = parseInt(attrs.limitTags, 10);
117 |                 ngModel.$parsers.unshift(function(value) {
118 |                     if (value && value.length > max) {
119 |                       value.splice(value.length - 1, 1);
120 |                     }
121 |                     return value;
122 |                 });
123 |             }
124 |           };
125 |         })
126 |         .config(['tagsInputConfigProvider', function(tagsInputConfigProvider) {
127 |             tagsInputConfigProvider
128 |               .setDefaults('tagsInput', {
129 |                 placeholder: 'New tag'
130 |               })
131 |               .setDefaults('autoComplete', {
132 |                 highlightMatchedText: true
133 |               });
134 |         }]);
135 |   </script>
136 | </body>
137 | </html>


--------------------------------------------------------------------------------
/test/configuration.spec.js:
--------------------------------------------------------------------------------
  1 | describe('configuration service', () => {
  2 |   let element, attrs, events, provider, service;
  3 | 
  4 |   beforeEach(() => {
  5 |     module('ngTagsInput', tagsInputConfigProvider => {
  6 |       provider = tagsInputConfigProvider;
  7 |     });
  8 | 
  9 |     inject(($rootScope, $compile, tagsInputConfig) => {
 10 |       element = $compile('<span></span>')($rootScope.$new());
 11 |       service = tagsInputConfig;
 12 |     });
 13 | 
 14 |     attrs = {};
 15 |     events = { trigger: angular.noop };
 16 |   });
 17 | 
 18 |   it('loads literal values from attributes', () => {
 19 |     // Arrange
 20 |     attrs.prop1 = 'foobar';
 21 |     attrs.prop2 = '42';
 22 |     attrs.prop3 = 'true';
 23 |     attrs.prop4 = '.*';
 24 | 
 25 |     // Act
 26 |     let options = service.load('foo', element, attrs, events, {
 27 |       prop1: [String],
 28 |       prop2: [Number],
 29 |       prop3: [Boolean],
 30 |       prop4: [RegExp]
 31 |     });
 32 | 
 33 |     // Assert
 34 |     expect(options).toEqual({
 35 |       prop1: 'foobar',
 36 |       prop2: 42,
 37 |       prop3: true,
 38 |       prop4: /.*/
 39 |     });
 40 |   });
 41 | 
 42 |   it('loads interpolated values from attributes', () => {
 43 |     // Arrange
 44 |     let scope = element.scope();
 45 |     scope.prop1 = 'barfoo';
 46 |     scope.prop2 = 24;
 47 |     scope.prop3 = false;
 48 |     scope.prop4 = '.+';
 49 | 
 50 |     attrs.prop1 = '{{ prop1 }}';
 51 |     attrs.prop2 = '{{ prop2 }}';
 52 |     attrs.prop3 = '{{ prop3 }}';
 53 |     attrs.prop4 = '{{ prop4 }}';
 54 | 
 55 |     // Act
 56 |     let options = service.load('foo', element, attrs, events, {
 57 |       prop1: [String],
 58 |       prop2: [Number],
 59 |       prop3: [Boolean],
 60 |       prop4: [RegExp]
 61 |     });
 62 | 
 63 |     // Assert
 64 |     expect(options).toEqual({
 65 |       prop1: 'barfoo',
 66 |       prop2: 24,
 67 |       prop3: false,
 68 |       prop4: /.+/
 69 |     });
 70 |   });
 71 | 
 72 |   it('loads interpolated values from attributes as they change', () => {
 73 |     // Arrange
 74 |     let scope = element.scope();
 75 |     scope.$parent.prop1 = 'barfoo';
 76 |     scope.$parent.prop3 = false;
 77 | 
 78 |     attrs.prop1 = '{{ prop1 }}';
 79 |     attrs.prop3 = '{{ prop3 }}';
 80 | 
 81 |     let callbacks = [];
 82 |     attrs.$observe = jasmine.createSpy().and.callFake(function(name, cb) {
 83 |       callbacks.push(cb);
 84 |     });
 85 | 
 86 |     provider.setActiveInterpolation('foo', { prop2: true, prop4: true });
 87 | 
 88 |     // Act
 89 |     let options = service.load('foo', element, attrs, events, {
 90 |       prop1: [String],
 91 |       prop2: [Number],
 92 |       prop3: [Boolean],
 93 |       prop4: [RegExp, /.*/]
 94 |     });
 95 | 
 96 |     callbacks[0](42);
 97 |     callbacks[1](null);
 98 | 
 99 |     // Assert
100 |     expect(options).toEqual({
101 |       prop1: 'barfoo',
102 |       prop2: 42,
103 |       prop3: false,
104 |       prop4: /.*/
105 |     });
106 |   });
107 | 
108 |   it('triggers an event when an interpolated value change', function() {
109 |     // Arrange
110 |     let scope = element.scope();
111 |     scope.prop1 = 'foobar';
112 |     attrs.prop1 = '{{ prop1 }}';
113 | 
114 |     events = jasmine.createSpyObj('events', ['trigger']);
115 | 
116 |     let callback;
117 |     attrs.$observe = jasmine.createSpy().and.callFake(function(name, cb) {
118 |       callback = cb;
119 |     });
120 | 
121 |     provider.setActiveInterpolation('foo', { prop1: true });
122 | 
123 |     // Act
124 |     service.load('foo', scope, attrs, events, {
125 |       prop1: [String]
126 |     });
127 | 
128 |     callback('barfoo');
129 | 
130 |     // Assert
131 |     expect(events.trigger).toHaveBeenCalledWith('option-change', { name: 'prop1', newValue: 'barfoo' });
132 |   });
133 | 
134 |   it('loads default values when attributes are missing', function() {
135 |     // Act
136 |     let options = service.load('foo', element, attrs, events, {
137 |       prop1: [String, 'foobaz'],
138 |       prop2: [Number, 84],
139 |       prop3: [Boolean, true],
140 |       prop4: [RegExp, /.?/]
141 |     });
142 | 
143 |     // Assert
144 |     expect(options).toEqual({
145 |       prop1: 'foobaz',
146 |       prop2: 84,
147 |       prop3: true,
148 |       prop4: /.?/
149 |     });
150 |   });
151 | 
152 |   it('overrides default values with global ones', function() {
153 |     // Arrange
154 |     provider.setDefaults('foo', {
155 |       prop1: 'foobar',
156 |       prop3: false
157 |     });
158 | 
159 |     // Act
160 |     let options = service.load('foo', element, attrs, events, {
161 |       prop1: [String, 'foobaz'],
162 |       prop2: [Number, 84],
163 |       prop3: [Boolean, true],
164 |       prop4: [RegExp, /.?/]
165 |     });
166 | 
167 |     // Assert
168 |     expect(options).toEqual({
169 |       prop1: 'foobar',
170 |       prop2: 84,
171 |       prop3: false,
172 |       prop4: /.?/
173 |     });
174 |   });
175 | 
176 |   it('overrides global configuration with local values', function() {
177 |     // Arrange
178 |     provider.setDefaults('foo', {
179 |       prop1: 'foobar',
180 |       prop2: 42,
181 |       prop3: true,
182 |       prop4: /.*/
183 |     });
184 | 
185 |     attrs.prop1 = 'foobaz';
186 |     attrs.prop2 = '84';
187 |     attrs.prop3 = 'false';
188 |     attrs.prop4 = '.?';
189 | 
190 |     // Act
191 |     let options = service.load('foo', element, attrs, events, {
192 |       prop1: [String],
193 |       prop2: [Number],
194 |       prop3: [Boolean],
195 |       prop4: [RegExp]
196 |     });
197 | 
198 |     // Assert
199 |     expect(options).toEqual({
200 |       prop1: 'foobaz',
201 |       prop2: 84,
202 |       prop3: false,
203 |       prop4: /.?/
204 |     });
205 |   });
206 | 
207 |   it('falls back to default values when invalid values are provided', function() {
208 |     // Arrange
209 |     provider.setDefaults('foo', {
210 |       prop1: 'foobar'
211 |     });
212 | 
213 |     attrs.prop1 = 'foo-bar';
214 |     attrs.prop2 = 'foo-bar';
215 |     attrs.prop3 = 'foo-bar';
216 |     attrs.prop4 = 'foo-bar';
217 | 
218 |     // Act
219 |     let options = service.load('foo', element, attrs, events, {
220 |       prop1: [String, 'barfoo', function(value) { return !value; }],
221 |       prop2: [String, 'foobar', function(value) { return !value; }],
222 |       prop3: [String, 'foobaz', function(value) { return value; }],
223 |       prop4: [String, 'bazfoo']
224 |     });
225 | 
226 |     // Assert
227 |     expect(options).toEqual({
228 |       prop1: 'foobar',
229 |       prop2: 'foobar',
230 |       prop3: 'foo-bar',
231 |       prop4: 'foo-bar'
232 |     });
233 |   });
234 | 
235 |   it('returns the same object so calls can be chained', function() {
236 |     expect(provider.setDefaults('foo', {})).toBe(provider);
237 |     expect(provider.setActiveInterpolation('foo', {})).toBe(provider);
238 |     expect(provider.setTextAutosizeThreshold(10)).toBe(provider);
239 |   });
240 | 
241 |   it('sets the threshold used to calculate the size of the input element', function() {
242 |     // Act
243 |     provider.setTextAutosizeThreshold(10);
244 | 
245 |     // Assert
246 |     expect(service.getTextAutosizeThreshold()).toBe(10);
247 |   });
248 | 
249 |   it('defaults the threshold used to calculate the size of the input element to 3', function() {
250 |     expect(service.getTextAutosizeThreshold()).toBe(3);
251 |   });
252 | });
253 | 


--------------------------------------------------------------------------------
/CONTRIBUTING.md:
--------------------------------------------------------------------------------
  1 | # Contributing to ngTagsInput
  2 | 
  3 | So you want to contribute to ngTagsInput... that's awesome! I really appreciate the help in making this project better. Here you will find everything you need to know in order to solve problems, report bugs, request features and implement your contribution and send it as a pull request.
  4 | 
  5 | ## Asking a question
  6 | 
  7 | If you have any questions on how to use ngTagsInput or how to solve a problem involving the directive, please create a question on [Stackoverflow](http://www.stackoverflow.com) using the `ng-tags-input` tag. **DO NOT** post a question as an issue on GitHub. The issue tracker should be used for reporting bugs only.
  8 | 
  9 | ## Reporting a bug
 10 | 
 11 | If you find a bug in the code or an error in the documentation and want to report it, check whether it's already been reported by searching the issue tracker. In case it hasn't yet, create a new issue and describe the problem you've found. Please be sure to include the following information along with your message:
 12 | 
 13 | - Version of ngTagsInput you are using.
 14 | - Version of Angular you are using.
 15 | - Browser (name and version) on which the bug occurs.
 16 | - Plunker showing the bug. You can use [this template](plnkr.co/edit/tpl:93P2qxOjYmlcYSqDmo39).
 17 | 
 18 | ## Setting up your environment
 19 | 
 20 | Here's what you need to do before start working on the code:
 21 | 
 22 | 1. Install Node.js (0.10.22 or higher)
 23 | 2. Install `grunt-cli` and `karma-cli` globally
 24 | 
 25 |         npm install -g grunt-cli karma-cli
 26 | 
 27 | 3. Install Ruby and the `sass` gem if you want to compile the SCSS files
 28 | 4. Clone your repository
 29 | 
 30 |         git clone https://github.com/<your_github_username>/ngTagsInput
 31 | 
 32 | 5. Go to the ngTagsInput directory
 33 | 
 34 |         cd ngTagsInput
 35 | 
 36 | 6. Add the main ngTagsInput repo as an upstream remote
 37 | 
 38 |         git remote add upstream https://github.com/mbenford/ngTagsInput
 39 | 
 40 | 7. Install the development dependencies
 41 | 
 42 |         npm install
 43 | 
 44 | ## Building from the source code
 45 | 
 46 | You can build ngTagsInput with a single command:
 47 | 
 48 |     grunt pack
 49 |     
 50 | That performs all tasks needed to produce the final JavaScript and CSS files. After the build completes, a folder named `build` will be generated containing the following files:
 51 | 
 52 |     ng-tags-input.js
 53 |     ng-tags-input.css
 54 |     ng-tags-input.min.js
 55 |     ng-tags-input.min.css
 56 | 
 57 | In addition to `pack` there are other useful tasks you might want to use:
 58 | 
 59 | - `pack:js`: Generates only the Javascript files.
 60 | - `test`: Runs all tests using PhantomJS (you can use `karma start` as well, of course).
 61 | - `watch`: Runs all tests automatically every time the source code files change.
 62 | - `coverage`: Generates the code coverage report. This may help you be sure nothing is left untested.
 63 | 
 64 | # Guidelines
 65 | 
 66 | Even though ngTagsInput isn't a big project, there are a few guidelines I'd like you to follow so everything remains organized and consistent. I can't stress enough how important following theses guidelines is. Failing to do so will slow down the review process of your pull request and might prevent it from being accepted.
 67 | 
 68 | ## TL;DR
 69 | 
 70 | The following checklist should help you be sure you have covered all the bases. You should answer *yes* to all questions
 71 | before sending your pull request:
 72 | 
 73 | - Have you written tests for all changes you made?
 74 | - Have you updated the docs? (in case you have changed the directive's public API)
 75 | - Have you built the directive by running `grunt pack`?
 76 | - Have you squashed multiple commits into one?
 77 | - Does your commit message comply with the [commit message guidelines](#commit-message-guidelines)?
 78 | - Have you rebased your branch on top of the master branch?
 79 | 
 80 | ## Coding guidelines
 81 | 
 82 | No endless list of conventions and standards here; just three simple guidelines:
 83 | 
 84 | - All code **must** follow the rules defined in the [.jshintrc](/jshintrc) file (Grunt gets you covered here. Just run `grunt jshint`).
 85 | - All features or bug fixes **must** be covered by one or more tests.
 86 | - All public API changes (e.g. new options for directives) **must** be documented with ngdoc-like tags.
 87 | 
 88 | ## Commit message guidelines*
 89 | 
 90 | <small>\* Heavily inspired on AngularJS commit guidelines</small>
 91 | 
 92 | Good, neat commit messages are very important to keep the project history organized. In addition to that, each release changelog is generated out of the commits messages, so they should be readable and concise.
 93 | 
 94 | ### Message Format
 95 | 
 96 | Each commit consists of a **header**, a **body** and a **footer**. The header has a special format that includes a **type**, a **scope** and a **subject**:
 97 | 
 98 |     <type>(<scope>): <subject>
 99 |     <BLANK LINE>
100 |     <body>
101 |     <BLANK LINE>
102 |     <footer>
103 | 
104 | The subject line has a soft limit of 50 characters, and all remaining lines have a soft limit of 75 characters.
105 | 
106 | #### Type
107 | 
108 | Must be one of the following:
109 | 
110 | - **feat**: A new feature
111 | - **fix**: A bug fix
112 | - **docs**: Documentation only changes
113 | - **style**: Changes that do not affect the meaning of the code (white-space, formatting, missing semi-colons, etc)
114 | - **refactor**: A code change that neither fixes a bug or adds a feature
115 | - **test**: Adding missing tests
116 | - **chore**: Changes to the build process or auxiliary tools and libraries such as documentation generation
117 | 
118 | #### Scope
119 | 
120 | The scope could be anything specifying the place of the commit change. For example `tagsInput`, `autocomplete`, `release`, `build`, etc...
121 | 
122 | #### Subject
123 | 
124 | The subject contains succinct description of the change:
125 | 
126 | - use the imperative, present tense: "change" not "changed" nor "changes"
127 | - don't capitalize first letter
128 | - no dot (.) at the end
129 | 
130 | #### Body
131 | 
132 | Just as in the subject, use the imperative, present tense: "change" not "changed" nor "changes" The body should include the motivation for the change and contrast this with previous behavior.
133 | 
134 | #### Footer
135 | 
136 | The footer should contain any information about Breaking Changes and it's also the place to reference GitHub issues that this commit Closes.
137 | 
138 | #### Example
139 | 
140 |     feat(tagsInput): Add addOnBlur option
141 | 
142 |     Add an option for the user to set if a tag should be created when the
143 |     input field loses focus and there is some text left in it. This feature
144 |     is important because it prevents a tag from being accidentally lost when
145 |     it's not explicitly added.
146 | 
147 |     Closes #29.
148 | 
149 | ## Pull Request guidelines
150 | 
151 | Before submitting your pull request, consider the following:
152 | 
153 | - Make your changes in a new branch (this will help you rebase your code if/when needed)
154 | 
155 |         git checkout -b my-feature-branch
156 | 
157 |     **Important**:
158 |     Each feature/bugfix should reside in its own branch, and each branch should be based on the master branch. Avoid implementing a new feature/bugfix on top of another one because that makes code reviews harder and prevents pull requests from being selectively merged.
159 | 
160 | - Make sure all tests pass
161 | 
162 |         grunt test
163 | 
164 | - Use the `test/test-page.html` file to test your changes in the browser, if you want to
165 | - Commit your changes by following the commit guidelines
166 | - Squash multiples related commits into one
167 | 
168 | You may need to rebase your branch on top of the latest version of the master branch. To do so is simple:
169 | 
170 | 1. Switch to `master` branch
171 | 
172 |         git checkout master
173 | 
174 | 2. Pull the latest changes from the server
175 | 
176 |         git pull upstream master
177 | 
178 |     **Note:** That command should **always** result in a fast-forward merge.
179 | 
180 | 3. Switch back to your feature branch
181 | 
182 |         git checkout my-feature-branch
183 | 
184 | 4. Rebase it on top of the master branch (there might be conflicts you'll need to resolve)
185 | 
186 |         git rebase master -i
187 | 
188 | 5. Push the changes into your remote repository
189 | 
190 |         git push
191 | 
192 | 6. In GitHub, send a pull request to `ngTagsInput:master`
193 | 
194 | That's it! Thank you for contributing!
195 | 
196 | In case you need to do changes after creating a pull request, repeat steps 1 though 4 and force a push into your remote repository
197 | 
198 |     git push --force
199 | 
200 | That will update your pull request. You might want to update the PR page explaining the changes you have done.
201 | 
202 | 


--------------------------------------------------------------------------------
/src/auto-complete.js:
--------------------------------------------------------------------------------
  1 | /**
  2 |  * @ngdoc directive
  3 |  * @name autoComplete
  4 |  * @module ngTagsInput
  5 |  *
  6 |  * @description
  7 |  * Provides autocomplete support for the tagsInput directive.
  8 |  *
  9 |  * @param {expression} source Expression to evaluate upon changing the input content. The input value is available as
 10 |  *    $query. The result of the expression must be a promise that eventually resolves to an array of strings.
 11 |  * @param {string=} [template=NA] URL or id of a custom template for rendering each element of the autocomplete list.
 12 |  * @param {string=} [displayProperty=tagsInput.displayText] Property to be rendered as the autocomplete label.
 13 |  * @param {number=} [debounceDelay=100] Amount of time, in milliseconds, to wait before evaluating the expression in
 14 |  *    the source option after the last keystroke.
 15 |  * @param {number=} [minLength=3] Minimum number of characters that must be entered before evaluating the expression
 16 |  *    in the source option.
 17 |  * @param {boolean=} [highlightMatchedText=true] Flag indicating that the matched text will be highlighted in the
 18 |  *    suggestions list.
 19 |  * @param {number=} [maxResultsToShow=10] Maximum number of results to be displayed at a time.
 20 |  * @param {boolean=} [loadOnDownArrow=false] Flag indicating that the source option will be evaluated when the down arrow
 21 |  *    key is pressed and the suggestion list is closed. The current input value is available as $query.
 22 |  * @param {boolean=} [loadOnEmpty=false] Flag indicating that the source option will be evaluated when the input content
 23 |  *    becomes empty. The $query variable will be passed to the expression as an empty string.
 24 |  * @param {boolean=} [loadOnFocus=false] Flag indicating that the source option will be evaluated when the input element
 25 |  *    gains focus. The current input value is available as $query.
 26 |  * @param {boolean=} [selectFirstMatch=true] Flag indicating that the first match will be automatically selected once
 27 |  *    the suggestion list is shown.
 28 |  * @param {expression=} [matchClass=NA] Expression to evaluate for each match in order to get the CSS classes to be used.
 29 |  *    The expression is provided with the current match as $match, its index as $index and its state as $selected. The result
 30 |  *    of the evaluation must be one of the values supported by the ngClass directive (either a string, an array or an object).
 31 |  *    See https://docs.angularjs.org/api/ng/directive/ngClass for more information.
 32 |  */
 33 | export default function AutocompleteDirective($document, $timeout, $sce, $q, tagsInputConfig, tiUtil, tiConstants) {
 34 |   'ngInject';
 35 | 
 36 |   function SuggestionList(loadFn, options, events) {
 37 |     let self = {};
 38 |     let lastPromise = null;
 39 | 
 40 |     let getTagId = () => options.tagsInput.keyProperty || options.tagsInput.displayProperty;
 41 | 
 42 |     let getDifference = function(array1, array2) {
 43 |       return array1.filter(item => !tiUtil.findInObjectArray(array2, item, getTagId(), (a, b) =>{
 44 |         if (options.tagsInput.replaceSpacesWithDashes) {
 45 |           a = tiUtil.replaceSpacesWithDashes(a);
 46 |           b = tiUtil.replaceSpacesWithDashes(b);
 47 |         }
 48 |         return tiUtil.defaultComparer(a, b);
 49 |       }));
 50 |     };
 51 | 
 52 |     self.reset = () => {
 53 |       lastPromise = null;
 54 | 
 55 |       self.items = [];
 56 |       self.visible = false;
 57 |       self.index = -1;
 58 |       self.selected = null;
 59 |       self.query = null;
 60 |     };
 61 | 
 62 |     self.show = () => {
 63 |       if (options.selectFirstMatch) {
 64 |         self.select(0);
 65 |       }
 66 |       else {
 67 |         self.selected = null;
 68 |       }
 69 |       self.visible = true;
 70 |     };
 71 | 
 72 |     self.load = tiUtil.debounce((query, tags) => {
 73 |       self.query = query;
 74 | 
 75 |       let promise = $q.when(loadFn({ $query: query }));
 76 |       lastPromise = promise;
 77 | 
 78 |       promise.then(items => {
 79 |         if (promise !== lastPromise) {
 80 |           return;
 81 |         }
 82 | 
 83 |         items = tiUtil.makeObjectArray(items.data || items, getTagId());
 84 |         items = getDifference(items, tags);
 85 |         self.items = items.slice(0, options.maxResultsToShow);
 86 | 
 87 |         if (self.items.length > 0) {
 88 |           self.show();
 89 |         }
 90 |         else {
 91 |           self.reset();
 92 |         }
 93 |       });
 94 |     }, options.debounceDelay);
 95 | 
 96 |     self.selectNext = () => {
 97 |       self.select(++self.index);
 98 |     };
 99 | 
100 |     self.selectPrior = () => {
101 |       self.select(--self.index);
102 |     };
103 | 
104 |     self.select = index => {
105 |       if (index < 0) {
106 |         index = self.items.length - 1;
107 |       }
108 |       else if (index >= self.items.length) {
109 |         index = 0;
110 |       }
111 |       self.index = index;
112 |       self.selected = self.items[index];
113 |       events.trigger('suggestion-selected', index);
114 |     };
115 | 
116 |     self.reset();
117 | 
118 |     return self;
119 |   }
120 | 
121 |   function scrollToElement(root, index) {
122 |     let element = root.find('li').eq(index);
123 |     let parent = element.parent();
124 |     let elementTop = element.prop('offsetTop');
125 |     let elementHeight = element.prop('offsetHeight');
126 |     let parentHeight = parent.prop('clientHeight');
127 |     let parentScrollTop = parent.prop('scrollTop');
128 | 
129 |     if (elementTop < parentScrollTop) {
130 |       parent.prop('scrollTop', elementTop);
131 |     }
132 |     else if (elementTop + elementHeight > parentHeight + parentScrollTop) {
133 |       parent.prop('scrollTop', elementTop + elementHeight - parentHeight);
134 |     }
135 |   }
136 | 
137 |   return {
138 |     restrict: 'E',
139 |     require: '^tagsInput',
140 |     scope: {
141 |       source: '&',
142 |       matchClass: '&'
143 |     },
144 |     templateUrl: 'ngTagsInput/auto-complete.html',
145 |     controller($scope, $element, $attrs) {
146 |       'ngInject';
147 | 
148 |       $scope.events = tiUtil.simplePubSub();
149 | 
150 |       $scope.options = tagsInputConfig.load('autoComplete', $element, $attrs, $scope.events, {
151 |         template: [String, 'ngTagsInput/auto-complete-match.html'],
152 |         debounceDelay: [Number, 100],
153 |         minLength: [Number, 3],
154 |         highlightMatchedText: [Boolean, true],
155 |         maxResultsToShow: [Number, 10],
156 |         loadOnDownArrow: [Boolean, false],
157 |         loadOnEmpty: [Boolean, false],
158 |         loadOnFocus: [Boolean, false],
159 |         selectFirstMatch: [Boolean, true],
160 |         displayProperty: [String, '']
161 |       });
162 | 
163 |       $scope.suggestionList = new SuggestionList($scope.source, $scope.options, $scope.events);
164 | 
165 |       this.registerAutocompleteMatch = () => ({
166 |         getOptions: function () {
167 |           return $scope.options;
168 |         },
169 |         getQuery: function () {
170 |           return $scope.suggestionList.query;
171 |         }
172 |       });
173 |     },
174 |     link(scope, element, attrs, tagsInputCtrl) {
175 |       let hotkeys = [tiConstants.KEYS.enter, tiConstants.KEYS.tab, tiConstants.KEYS.escape, tiConstants.KEYS.up, tiConstants.KEYS.down];
176 |       let suggestionList = scope.suggestionList;
177 |       let tagsInput = tagsInputCtrl.registerAutocomplete();
178 |       let options = scope.options;
179 |       let events = scope.events;
180 | 
181 |       options.tagsInput = tagsInput.getOptions();
182 | 
183 |       let shouldLoadSuggestions = value => value && value.length >= options.minLength || !value && options.loadOnEmpty;
184 | 
185 |       scope.templateScope = tagsInput.getTemplateScope();
186 | 
187 |       scope.addSuggestionByIndex = index => {
188 |         suggestionList.select(index);
189 |         scope.addSuggestion();
190 |       };
191 | 
192 |       scope.addSuggestion = () => {
193 |         let added = false;
194 | 
195 |         if (suggestionList.selected) {
196 |           tagsInput.addTag(angular.copy(suggestionList.selected));
197 |           suggestionList.reset();
198 |           added = true;
199 |         }
200 |         return added;
201 |       };
202 | 
203 |       scope.track = item => item[options.tagsInput.keyProperty || options.tagsInput.displayProperty];
204 | 
205 |       scope.getSuggestionClass = (item, index) => {
206 |         let selected = item === suggestionList.selected;
207 |         return [
208 |           scope.matchClass({$match: item, $index: index, $selected: selected}),
209 |                     { selected: selected }
210 |         ];
211 |       };
212 | 
213 |       tagsInput
214 |         .on('tag-added tag-removed invalid-tag input-blur', () => {
215 |           suggestionList.reset();
216 |         })
217 |         .on('input-change', value => {
218 |           if (shouldLoadSuggestions(value)) {
219 |             suggestionList.load(value, tagsInput.getTags());
220 |           }
221 |           else {
222 |             suggestionList.reset();
223 |           }
224 |         })
225 |         .on('input-focus', () => {
226 |           let value = tagsInput.getCurrentTagText();
227 |           if (options.loadOnFocus && shouldLoadSuggestions(value)) {
228 |             suggestionList.load(value, tagsInput.getTags());
229 |           }
230 |         })
231 |         .on('input-keydown', event => {
232 |           let key = event.keyCode;
233 |           let handled = false;
234 | 
235 |           if (tiUtil.isModifierOn(event) || hotkeys.indexOf(key) === -1) {
236 |             return;
237 |           }
238 | 
239 |           if (suggestionList.visible) {
240 | 
241 |             if (key === tiConstants.KEYS.down) {
242 |               suggestionList.selectNext();
243 |               handled = true;
244 |             }
245 |             else if (key === tiConstants.KEYS.up) {
246 |               suggestionList.selectPrior();
247 |               handled = true;
248 |             }
249 |             else if (key === tiConstants.KEYS.escape) {
250 |               suggestionList.reset();
251 |               handled = true;
252 |             }
253 |             else if (key === tiConstants.KEYS.enter || key === tiConstants.KEYS.tab) {
254 |               handled = scope.addSuggestion();
255 |             }
256 |           }
257 |           else {
258 |             if (key === tiConstants.KEYS.down && scope.options.loadOnDownArrow) {
259 |               suggestionList.load(tagsInput.getCurrentTagText(), tagsInput.getTags());
260 |               handled = true;
261 |             }
262 |           }
263 | 
264 |           if (handled) {
265 |             event.preventDefault();
266 |             event.stopImmediatePropagation();
267 |             return false;
268 |           }
269 |         });
270 | 
271 |       events.on('suggestion-selected', index => {
272 |         scrollToElement(element, index);
273 |       });
274 |     }
275 |   };
276 | }
277 | 


--------------------------------------------------------------------------------
/test/util.spec.js:
--------------------------------------------------------------------------------
  1 | describe('tiUtil factory', () => {
  2 |   let tiUtil;
  3 | 
  4 |   beforeEach(() => {
  5 |     module('ngTagsInput');
  6 | 
  7 |     inject(_tiUtil_ => {
  8 |       tiUtil = _tiUtil_;
  9 |     });
 10 |   });
 11 | 
 12 |   describe('simplePubSub', () => {
 13 |     let sut;
 14 | 
 15 |     beforeEach(() => {
 16 |       sut = tiUtil.simplePubSub();
 17 |     });
 18 | 
 19 |     it('subscribes to an event', () => {
 20 |       // Arrange
 21 |       let callback = jasmine.createSpy();
 22 | 
 23 |       // Act
 24 |       sut.on('foo', callback);
 25 |       sut.trigger('foo', 'some data');
 26 | 
 27 |       // Assert
 28 |       expect(callback).toHaveBeenCalledWith('some data');
 29 |     });
 30 | 
 31 |     it('subscribes to an event in reverse order', () => {
 32 |       // Arrange
 33 |       let callback = jasmine.createSpy();
 34 | 
 35 |       // Act
 36 |       sut.on('foo', callback, true);
 37 |       sut.trigger('foo', 'some data');
 38 | 
 39 |       // Assert
 40 |       expect(callback).toHaveBeenCalledWith('some data');
 41 |     });
 42 | 
 43 |     it('subscribes to multiple events', () => {
 44 |       // Arrange
 45 |       let callback = jasmine.createSpy();
 46 | 
 47 |       // Act
 48 |       sut.on('foo bar', callback);
 49 |       sut.trigger('foo', 'some data');
 50 |       sut.trigger('bar', 'some other data');
 51 | 
 52 |       // Assert
 53 |       expect(callback.calls.count()).toBe(2);
 54 |       expect(callback.calls.argsFor(0)).toEqual(['some data']);
 55 |       expect(callback.calls.argsFor(1)).toEqual(['some other data']);
 56 |     });
 57 | 
 58 |     it('subscribes multiple times to the same event', () => {
 59 |       // Arrange
 60 |       let callback1 = jasmine.createSpy(),
 61 |         callback2 = jasmine.createSpy();
 62 | 
 63 |       // Act
 64 |       sut.on('foo', callback1);
 65 |       sut.on('foo', callback2);
 66 |       sut.trigger('foo', 'some data');
 67 | 
 68 |       // Assert
 69 |       expect(callback1).toHaveBeenCalledWith('some data');
 70 |       expect(callback2).toHaveBeenCalledWith('some data');
 71 |     });
 72 | 
 73 |     it('subscribes multiple times to the same event in reverse order', () => {
 74 |       // Arrange
 75 |       let callback1 = jasmine.createSpy(),
 76 |         callback2 = jasmine.createSpy();
 77 | 
 78 |       // Act
 79 |       sut.on('foo', callback1);
 80 |       sut.on('foo', callback2, true);
 81 |       sut.trigger('foo', 'some data');
 82 | 
 83 |       // Assert
 84 |       expect(callback1).toHaveBeenCalledWith('some data');
 85 |       expect(callback2).toHaveBeenCalledWith('some data');
 86 |     });
 87 | 
 88 |     it('guarantees the order of invocation is correct (regular order)', () => {
 89 |       // Arrange
 90 |       let calls = [],
 91 |         callback1 = () => { calls.push('callback1'); },
 92 |         callback2 = () => { calls.push('callback2'); };
 93 | 
 94 |       // Act
 95 |       sut.on('foo', callback1);
 96 |       sut.on('foo', callback2);
 97 |       sut.trigger('foo', 'some data');
 98 | 
 99 |       // Assert
100 |       expect(calls).toEqual(['callback1', 'callback2']);
101 |     });
102 | 
103 |     it('guarantees the order of invocation is correct (reverse order)', () => {
104 |       // Arrange
105 |       let calls = [],
106 |         callback1 = () => { calls.push('callback1'); },
107 |         callback2 = () => { calls.push('callback2'); };
108 | 
109 |       // Act
110 |       sut.on('foo', callback1);
111 |       sut.on('foo', callback2, true);
112 |       sut.trigger('foo', 'some data');
113 | 
114 |       // Assert
115 |       expect(calls).toEqual(['callback2', 'callback1']);
116 |     });
117 | 
118 |     it('stops the propagation of an event (regular order)', () => {
119 |       // Arrange
120 |       let callback1 = jasmine.createSpy().and.returnValue(false),
121 |         callback2 = jasmine.createSpy();
122 | 
123 |       // Act
124 |       sut.on('foo', callback1);
125 |       sut.on('foo', callback2);
126 |       sut.trigger('foo', 'some data');
127 | 
128 |       // Assert
129 |       expect(callback1).toHaveBeenCalledWith('some data');
130 |       expect(callback2).not.toHaveBeenCalled();
131 |     });
132 | 
133 |     it('stops the propagation of an event (reverse order)', () => {
134 |       // Arrange
135 |       let callback1 = jasmine.createSpy(),
136 |         callback2 = jasmine.createSpy().and.returnValue(false);
137 | 
138 |       // Act
139 |       sut.on('foo', callback1);
140 |       sut.on('foo', callback2, true);
141 |       sut.trigger('foo', 'some data');
142 | 
143 |       // Assert
144 |       expect(callback1).not.toHaveBeenCalled();
145 |       expect(callback2).toHaveBeenCalledWith('some data');
146 |     });
147 | 
148 |     it('returns the object instance so calls can be chained', () => {
149 |       // Arrange
150 |       let callback1 = jasmine.createSpy(),
151 |         callback2 = jasmine.createSpy();
152 | 
153 |       // Act
154 |       sut.on('foo', callback1)
155 |        .on('bar', callback2)
156 |        .trigger('foo', 'some data')
157 |        .trigger('bar', 'some other data');
158 | 
159 |       // Assert
160 |       expect(callback1).toHaveBeenCalledWith('some data');
161 |       expect(callback2).toHaveBeenCalledWith('some other data');
162 |     });
163 |   });
164 | 
165 |   describe('makeObjectArray', () => {
166 |     it('converts a non-object array into an object array using the provided key', () => {
167 |       let array = ['a', 'b', 'c'],
168 |         result = tiUtil.makeObjectArray(array, 'prop');
169 | 
170 |       expect(result).not.toBe(array);
171 |       expect(result).toEqual([
172 |         { prop: 'a' },
173 |         { prop: 'b' },
174 |         { prop: 'c' }
175 |       ]);
176 |     });
177 | 
178 |     [
179 |       { desc: 'an empty array', value: [] },
180 |       { desc: 'an array of objects', value: [{}] },
181 |       { desc: 'null', value: null },
182 |       { desc: 'a number', value: 1 },
183 |       { desc: 'a string', value: 'a' }
184 |     ].forEach(item => {
185 |       it('returns the provided argument itself if it is ' + item.desc, () => {
186 |         expect(tiUtil.makeObjectArray(item.value, 'prop')).toBe(item.value);
187 |       });
188 |     });
189 |   });
190 | 
191 |   describe('findInObjectArray', () => {
192 |     let array = [
193 |       { prop: 'foo' },
194 |       { prop: 'bar' },
195 |       { prop: 'baz' }
196 |     ];
197 | 
198 |     it('finds an object within an array by using the provided key', () => {
199 |       expect(tiUtil.findInObjectArray(array, { prop: 'bar' }, 'prop')).toBe(array[1]);
200 |     });
201 | 
202 |     it('finds an object within an array by using the provided key regardless of the text case', () => {
203 |       expect(tiUtil.findInObjectArray(array, { prop: 'BAR' }, 'prop')).toBe(array[1]);
204 |     });
205 | 
206 |     it('returns null when the provided object is not found', () => {
207 |       expect(tiUtil.findInObjectArray(array, { prop: 'foobar' }, 'prop')).toBe(null);
208 |     });
209 | 
210 |     it('returns null when the provided array is empty', () => {
211 |       expect(tiUtil.findInObjectArray([], { prop: 'foo' }, 'prop')).toBe(null);
212 |     });
213 | 
214 |     it('uses a custom comparer to find an item within an array', () => {
215 |       // Arrange
216 |       let caseSensitiveComparer = (a, b) => a === b;
217 | 
218 |       // Act/Assert
219 |       expect(tiUtil.findInObjectArray(array, { prop: 'BAR' }, 'prop', caseSensitiveComparer)).toBe(null);
220 |     });
221 |   });
222 | 
223 |   describe('safeHighlight', () => {
224 |     it('highlights the provided text', () => {
225 |       expect(tiUtil.safeHighlight('abc', 'b')).toBe('a<em>b</em>c');
226 |       expect(tiUtil.safeHighlight('aBc', 'b')).toBe('a<em>B</em>c');
227 |       expect(tiUtil.safeHighlight('abc', 'B')).toBe('a<em>b</em>c');
228 |       expect(tiUtil.safeHighlight('abcB', 'B')).toBe('a<em>b</em>c<em>B</em>');
229 |       expect(tiUtil.safeHighlight('abc', '')).toBe('abc');
230 |     });
231 | 
232 |     it('highlights HTML entities', () => {
233 |       expect(tiUtil.safeHighlight('a&a', '&')).toBe('a<em>&amp;</em>a');
234 |       expect(tiUtil.safeHighlight('a>a', '>')).toBe('a<em>&gt;</em>a');
235 |       expect(tiUtil.safeHighlight('a<a', '<')).toBe('a<em>&lt;</em>a');
236 |       expect(tiUtil.safeHighlight('<script>alert("XSS")</script>', '<')).toBe('<em>&lt;</em>script&gt;alert("XSS")<em>&lt;</em>/script&gt;');
237 |       expect(tiUtil.safeHighlight('<script>alert("XSS")</script>', '')).toBe('&lt;script&gt;alert("XSS")&lt;/script&gt;');
238 |     });
239 |   });
240 | 
241 |   describe('safeToString', () => {
242 |     it('returns an empty string when the provide value is either null or undefined', () => {
243 |       expect(tiUtil.safeToString(null)).toBe('');
244 |       expect(tiUtil.safeToString()).toBe('');
245 |     });
246 | 
247 |     it('returns the trimmed string representation of the provided value', () => {
248 |       expect(tiUtil.safeToString(1)).toBe('1');
249 |       expect(tiUtil.safeToString(1.5)).toBe('1.5');
250 |       expect(tiUtil.safeToString(true)).toBe('true');
251 |       expect(tiUtil.safeToString(false)).toBe('false');
252 |       expect(tiUtil.safeToString('foo')).toBe('foo');
253 |     });
254 |   });
255 | 
256 |   describe('encodeHTML', () => {
257 |     it('encodes <, > and & as HTML entities', () => {
258 |       expect(tiUtil.encodeHTML('<foo>&</foo>')).toBe('&lt;foo&gt;&amp;&lt;/foo&gt;');
259 |     });
260 |   });
261 | 
262 |   describe('debounce', () => {
263 |     let $timeout;
264 | 
265 |     beforeEach(() => {
266 |       inject(_$timeout_ => {
267 |         $timeout = _$timeout_;
268 |       });
269 |     });
270 | 
271 |     it('returns a debounced function', () => {
272 |       // Arrange
273 |       let callback = jasmine.createSpy();
274 | 
275 |       // Act
276 |       let debounced = tiUtil.debounce(callback, 100);
277 | 
278 |       // Assert
279 |       debounced('foo', 'bar');
280 |       debounced('bar', 'foo');
281 |       debounced('foobar');
282 | 
283 |       expect(callback).not.toHaveBeenCalled();
284 | 
285 |       $timeout.flush(100);
286 | 
287 |       expect(callback).toHaveBeenCalledWith('foobar');
288 |     });
289 |   });
290 | 
291 |   describe('handleUndefinedResult', () => {
292 |     it('wraps the provided function and change its return value if it\'s undefined', () => {
293 |       // Arrange
294 |       let fn = () => {};
295 | 
296 |       // Act
297 |       let result = tiUtil.handleUndefinedResult(fn, 'foobar')();
298 | 
299 |       // Act/Assert
300 |       expect(result).toBe('foobar');
301 |     });
302 | 
303 |     it('wraps the provided function and does not change its return value if it\'s defined', () => {
304 |       // Arrange
305 |       let fn = () => 1;
306 | 
307 |       // Act
308 |       let result = tiUtil.handleUndefinedResult(fn, 'foobar')();
309 | 
310 |       // Act/Assert
311 |       expect(result).toBe(1);
312 |     });
313 | 
314 |     it('re-passes the provided arguments to the wrapped function', () => {
315 |       // Arrange
316 |       let fn = (a, b) => a + b;
317 | 
318 |       // Act
319 |       let result = tiUtil.handleUndefinedResult(fn)(1, 2);
320 | 
321 |       // Assert
322 |       expect(result).toBe(3);
323 |     });
324 |   });
325 | 
326 |   describe('replaceSpacesWithDashes', () => {
327 |     it('replaces spaces with dashes within the provided string', () => {
328 |       expect(tiUtil.replaceSpacesWithDashes('a b c')).toBe('a-b-c');
329 |       expect(tiUtil.replaceSpacesWithDashes('a     b     c')).toBe('a-----b-----c');
330 |       expect(tiUtil.replaceSpacesWithDashes('a b c ')).toBe('a-b-c');
331 |       expect(tiUtil.replaceSpacesWithDashes(' a b c')).toBe('a-b-c');
332 |       expect(tiUtil.replaceSpacesWithDashes(' a b c ')).toBe('a-b-c');
333 |       expect(tiUtil.replaceSpacesWithDashes('')).toBe('');
334 |       expect(tiUtil.replaceSpacesWithDashes(null)).toBe('');
335 |       expect(tiUtil.replaceSpacesWithDashes()).toBe('');
336 |     });
337 |   });
338 | 
339 |   describe('isModifierOn', () => {
340 |     it('returns true if a modifier is on', () => {
341 |       expect(tiUtil.isModifierOn({ shiftKey: true })).toBe(true);
342 |       expect(tiUtil.isModifierOn({ ctrlKey: true })).toBe(true);
343 |       expect(tiUtil.isModifierOn({ altKey: true })).toBe(true);
344 |       expect(tiUtil.isModifierOn({ metaKey: true })).toBe(true);
345 |     });
346 | 
347 |     it('returns false if all modifiers are off', () => {
348 |       expect(tiUtil.isModifierOn({
349 |         shiftKey: false,
350 |         ctrlKey: false,
351 |         altKey: false,
352 |         metaKey: false
353 |       })).toBe(false);
354 | 
355 |       expect(tiUtil.isModifierOn({
356 |         shiftKey: false,
357 |         ctrlKey: false,
358 |         altKey: true,
359 |         metaKey: false
360 |       })).toBe(true);
361 |     });
362 |   });
363 | });
364 | 


--------------------------------------------------------------------------------
/src/tags-input.js:
--------------------------------------------------------------------------------
  1 | /**
  2 |  * @ngdoc directive
  3 |  * @name tagsInput
  4 |  * @module ngTagsInput
  5 |  *
  6 |  * @description
  7 |  * Renders an input box with tag editing support.
  8 |  *
  9 |  * @param {string} ngModel Assignable Angular expression to data-bind to.
 10 |  * @param {boolean=} [useStrings=false] Flag indicating that the model is an array of strings (EXPERIMENTAL).
 11 |  * @param {string=} [template=NA] URL or id of a custom template for rendering each tag.
 12 |  * @param {string=} [templateScope=NA] Scope to be passed to custom templates - of both tagsInput and
 13 |  *    autoComplete directives - as $scope.
 14 |  * @param {string=} [displayProperty=text] Property to be rendered as the tag label.
 15 |  * @param {string=} [keyProperty=text] Property to be used as a unique identifier for the tag.
 16 |  * @param {string=} [type=text] Type of the input element. Only 'text', 'email' and 'url' are supported values.
 17 |  * @param {string=} [text=NA] Assignable Angular expression for data-binding to the element's text.
 18 |  * @param {number=} tabindex Tab order of the control.
 19 |  * @param {string=} [placeholder=Add a tag] Placeholder text for the control.
 20 |  * @param {number=} [minLength=3] Minimum length for a new tag.
 21 |  * @param {number=} [maxLength=MAX_SAFE_INTEGER] Maximum length allowed for a new tag.
 22 |  * @param {number=} [minTags=0] Sets minTags validation error key if the number of tags added is less than minTags.
 23 |  * @param {number=} [maxTags=MAX_SAFE_INTEGER] Sets maxTags validation error key if the number of tags added is greater
 24 |  *    than maxTags.
 25 |  * @param {boolean=} [allowLeftoverText=false] Sets leftoverText validation error key if there is any leftover text in
 26 |  *    the input element when the directive loses focus.
 27 |  * @param {string=} [removeTagSymbol=×] (Obsolete) Symbol character for the remove tag button.
 28 |  * @param {boolean=} [addOnEnter=true] Flag indicating that a new tag will be added on pressing the ENTER key.
 29 |  * @param {boolean=} [addOnSpace=false] Flag indicating that a new tag will be added on pressing the SPACE key.
 30 |  * @param {boolean=} [addOnComma=true] Flag indicating that a new tag will be added on pressing the COMMA key.
 31 |  * @param {boolean=} [addOnBlur=true] Flag indicating that a new tag will be added when the input field loses focus.
 32 |  * @param {boolean=} [addOnPaste=false] Flag indicating that the text pasted into the input field will be split into tags.
 33 |  * @param {string=} [pasteSplitPattern=,] Regular expression used to split the pasted text into tags.
 34 |  * @param {boolean=} [replaceSpacesWithDashes=true] Flag indicating that spaces will be replaced with dashes.
 35 |  * @param {string=} [allowedTagsPattern=.+] Regular expression that determines whether a new tag is valid.
 36 |  * @param {boolean=} [enableEditingLastTag=false] Flag indicating that the last tag will be moved back into the new tag
 37 |  *    input box instead of being removed when the backspace key is pressed and the input box is empty.
 38 |  * @param {boolean=} [addFromAutocompleteOnly=false] Flag indicating that only tags coming from the autocomplete list
 39 |  *    will be allowed. When this flag is true, addOnEnter, addOnComma, addOnSpace and addOnBlur values are ignored.
 40 |  * @param {boolean=} [spellcheck=true] Flag indicating whether the browser's spellcheck is enabled for the input field or not.
 41 |  * @param {expression=} [tagClass=NA] Expression to evaluate for each existing tag in order to get the CSS classes to be used.
 42 |  *    The expression is provided with the current tag as $tag, its index as $index and its state as $selected. The result
 43 |  *    of the evaluation must be one of the values supported by the ngClass directive (either a string, an array or an object).
 44 |  *    See https://docs.angularjs.org/api/ng/directive/ngClass for more information.
 45 |  * @param {expression=} [onTagAdding=NA] Expression to evaluate that will be invoked before adding a new tag. The new
 46 |  *    tag is available as $tag. This method must return either a boolean value or a promise. If either a false value or a rejected
 47 |  *    promise is returned, the tag will not be added.
 48 |  * @param {expression=} [onTagAdded=NA] Expression to evaluate upon adding a new tag. The new tag is available as $tag.
 49 |  * @param {expression=} [onInvalidTag=NA] Expression to evaluate when a tag is invalid. The invalid tag is available as $tag.
 50 |  * @param {expression=} [onTagRemoving=NA] Expression to evaluate that will be invoked before removing a tag. The tag
 51 |  *    is available as $tag. This method must return either a boolean value or a promise. If either a false value or a rejected
 52 |  *    promise is returned, the tag will not be removed.
 53 |  * @param {expression=} [onTagRemoved=NA] Expression to evaluate upon removing an existing tag. The removed tag is available as $tag.
 54 |  * @param {expression=} [onTagClicked=NA] Expression to evaluate upon clicking an existing tag. The clicked tag is available as $tag.
 55 |  */
 56 | export default function TagsInputDirective($timeout, $document, $window, $q, tagsInputConfig, tiUtil, tiConstants) {
 57 |   'ngInject';
 58 | 
 59 |   function TagList(options, events, onTagAdding, onTagRemoving) {
 60 |     let self = {};
 61 | 
 62 |     let getTagText = tag =>tiUtil.safeToString(tag[options.displayProperty]);
 63 |     let setTagText = (tag, text) => {
 64 |       tag[options.displayProperty] = text;
 65 |     };
 66 | 
 67 |     let canAddTag = tag => {
 68 |       let tagText = getTagText(tag);
 69 |       let valid = tagText &&
 70 |                   tagText.length >= options.minLength &&
 71 |                   tagText.length <= options.maxLength &&
 72 |                   options.allowedTagsPattern.test(tagText) &&
 73 |                   !tiUtil.findInObjectArray(self.items, tag, options.keyProperty || options.displayProperty);
 74 | 
 75 |       return $q.when(valid && onTagAdding({ $tag: tag })).then(tiUtil.promisifyValue);
 76 |     };
 77 | 
 78 |     let canRemoveTag = tag => $q.when(onTagRemoving({ $tag: tag })).then(tiUtil.promisifyValue);
 79 | 
 80 |     self.items = [];
 81 | 
 82 |     self.addText = text => {
 83 |       let tag = {};
 84 |       setTagText(tag, text);
 85 |       return self.add(tag);
 86 |     };
 87 | 
 88 |     self.add = tag => {
 89 |       let tagText = getTagText(tag);
 90 | 
 91 |       if (options.replaceSpacesWithDashes) {
 92 |         tagText = tiUtil.replaceSpacesWithDashes(tagText);
 93 |       }
 94 | 
 95 |       setTagText(tag, tagText);
 96 | 
 97 |       return canAddTag(tag)
 98 |         .then(() =>{
 99 |           self.items.push(tag);
100 |           events.trigger('tag-added', { $tag: tag });
101 |         })
102 |         .catch(() => {
103 |           if (tagText) {
104 |             events.trigger('invalid-tag', { $tag: tag });
105 |           }
106 |         });
107 |     };
108 | 
109 |     self.remove = index => {
110 |       let tag = self.items[index];
111 |       return canRemoveTag(tag).then(() => {
112 |         self.items.splice(index, 1);
113 |         self.clearSelection();
114 |         events.trigger('tag-removed', { $tag: tag });
115 |         return tag;
116 |       });
117 |     };
118 | 
119 |     self.select = index => {
120 |       if (index < 0) {
121 |         index = self.items.length - 1;
122 |       }
123 |       else if (index >= self.items.length) {
124 |         index = 0;
125 |       }
126 | 
127 |       self.index = index;
128 |       self.selected = self.items[index];
129 |     };
130 | 
131 |     self.selectPrior = () => {
132 |       self.select(--self.index);
133 |     };
134 | 
135 |     self.selectNext = () => {
136 |       self.select(++self.index);
137 |     };
138 | 
139 |     self.removeSelected = () => self.remove(self.index);
140 | 
141 |     self.clearSelection = () => {
142 |       self.selected = null;
143 |       self.index = -1;
144 |     };
145 | 
146 |     self.getItems = () => options.useStrings ? self.items.map(getTagText) : self.items;
147 | 
148 |     self.clearSelection();
149 | 
150 |     return self;
151 |   }
152 | 
153 |   function validateType(type) {
154 |     return tiConstants.SUPPORTED_INPUT_TYPES.indexOf(type) !== -1;
155 |   }
156 | 
157 |   return {
158 |     restrict: 'E',
159 |     require: 'ngModel',
160 |     scope: {
161 |       tags: '=ngModel',
162 |       text: '=?',
163 |       templateScope: '=?',
164 |       tagClass: '&',
165 |       onTagAdding: '&',
166 |       onTagAdded: '&',
167 |       onInvalidTag: '&',
168 |       onTagRemoving: '&',
169 |       onTagRemoved: '&',
170 |       onTagClicked: '&',
171 |     },
172 |     replace: false,
173 |     transclude: true,
174 |     templateUrl: 'ngTagsInput/tags-input.html',
175 |     controller($scope, $element, $attrs) {
176 |       'ngInject';
177 | 
178 |       $scope.events = tiUtil.simplePubSub();
179 | 
180 |       $scope.options = tagsInputConfig.load('tagsInput', $element, $attrs, $scope.events, {
181 |         template: [String, 'ngTagsInput/tag-item.html'],
182 |         type: [String, 'text', validateType],
183 |         placeholder: [String, 'Add a tag'],
184 |         tabindex: [Number, null],
185 |         removeTagSymbol: [String, String.fromCharCode(215)],
186 |         replaceSpacesWithDashes: [Boolean, true],
187 |         minLength: [Number, 3],
188 |         maxLength: [Number, tiConstants.MAX_SAFE_INTEGER],
189 |         addOnEnter: [Boolean, true],
190 |         addOnSpace: [Boolean, false],
191 |         addOnComma: [Boolean, true],
192 |         addOnBlur: [Boolean, true],
193 |         addOnPaste: [Boolean, false],
194 |         pasteSplitPattern: [RegExp, /,/],
195 |         allowedTagsPattern: [RegExp, /.+/],
196 |         enableEditingLastTag: [Boolean, false],
197 |         minTags: [Number, 0],
198 |         maxTags: [Number, tiConstants.MAX_SAFE_INTEGER],
199 |         displayProperty: [String, 'text'],
200 |         keyProperty: [String, ''],
201 |         allowLeftoverText: [Boolean, false],
202 |         addFromAutocompleteOnly: [Boolean, false],
203 |         spellcheck: [Boolean, true],
204 |         useStrings: [Boolean, false]
205 |       });
206 | 
207 |       $scope.tagList = new TagList($scope.options, $scope.events,
208 |         tiUtil.handleUndefinedResult($scope.onTagAdding, true),
209 |         tiUtil.handleUndefinedResult($scope.onTagRemoving, true));
210 | 
211 |       this.registerAutocomplete = () => ({
212 |         addTag: function(tag) {
213 |           return $scope.tagList.add(tag);
214 |         },
215 |         getTags: function() {
216 |           return $scope.tagList.items;
217 |         },
218 |         getCurrentTagText: function() {
219 |           return $scope.newTag.text();
220 |         },
221 |         getOptions: function() {
222 |           return $scope.options;
223 |         },
224 |         getTemplateScope: function() {
225 |           return $scope.templateScope;
226 |         },
227 |         on: function(name, handler) {
228 |           $scope.events.on(name, handler, true);
229 |           return this;
230 |         }
231 |       });
232 | 
233 |       this.registerTagItem = () => ({
234 |         getOptions: function () {
235 |           return $scope.options;
236 |         },
237 |         removeTag: function (index) {
238 |           if ($scope.disabled) {
239 |             return;
240 |           }
241 |           $scope.tagList.remove(index);
242 |         }
243 |       });
244 |     },
245 |     link(scope, element, attrs, ngModelCtrl) {
246 |       let hotkeys = [tiConstants.KEYS.enter, tiConstants.KEYS.comma, tiConstants.KEYS.space, tiConstants.KEYS.backspace,
247 |         tiConstants.KEYS.delete, tiConstants.KEYS.left, tiConstants.KEYS.right];
248 |       let tagList = scope.tagList;
249 |       let events = scope.events;
250 |       let options = scope.options;
251 |       let input = element.find('input');
252 |       let validationOptions = ['minTags', 'maxTags', 'allowLeftoverText'];
253 | 
254 |       let setElementValidity = () => {
255 |         ngModelCtrl.$setValidity('maxTags', tagList.items.length <= options.maxTags);
256 |         ngModelCtrl.$setValidity('minTags', tagList.items.length >= options.minTags);
257 |         ngModelCtrl.$setValidity('leftoverText', scope.hasFocus || options.allowLeftoverText ? true : !scope.newTag.text());
258 |       };
259 | 
260 |       let focusInput = () => {
261 |         $timeout(() => { input[0].focus(); });
262 |       };
263 | 
264 |       ngModelCtrl.$isEmpty = value => !value || !value.length;
265 | 
266 |       scope.newTag = {
267 |         text(value) {
268 |           if (angular.isDefined(value)) {
269 |             scope.text = value;
270 |             events.trigger('input-change', value);
271 |           }
272 |           else {
273 |             return scope.text || '';
274 |           }
275 |         },
276 |         invalid: null
277 |       };
278 | 
279 |       scope.track = tag => tag[options.keyProperty || options.displayProperty];
280 | 
281 |       scope.getTagClass = (tag, index) => {
282 |         let selected = tag === tagList.selected;
283 |         return [
284 |           scope.tagClass({$tag: tag, $index: index, $selected: selected}),
285 |                     { selected: selected }
286 |         ];
287 |       };
288 | 
289 |       scope.$watch('tags', value => {
290 |         if (value) {
291 |           tagList.items = tiUtil.makeObjectArray(value, options.displayProperty);
292 |           if (options.useStrings) {
293 |             return;
294 |           }
295 | 
296 |           scope.tags = tagList.items;
297 |         }
298 |         else {
299 |           tagList.items = [];
300 |         }
301 |       });
302 | 
303 |       scope.$watch('tags.length', () => {
304 |         setElementValidity();
305 | 
306 |         // ngModelController won't trigger validators when the model changes (because it's an array),
307 |         // so we need to do it ourselves. Unfortunately this won't trigger any registered formatter.
308 |         ngModelCtrl.$validate();
309 |       });
310 | 
311 |       attrs.$observe('disabled', value => {
312 |         scope.disabled = value;
313 |       });
314 | 
315 |       scope.eventHandlers = {
316 |         input: {
317 |           keydown($event) {
318 |             events.trigger('input-keydown', $event);
319 |           },
320 |           focus() {
321 |             if (scope.hasFocus) {
322 |               return;
323 |             }
324 | 
325 |             scope.hasFocus = true;
326 |             events.trigger('input-focus');
327 |           },
328 |           blur() {
329 |             $timeout(() => {
330 |               let activeElement = $document.prop('activeElement');
331 |               let lostFocusToBrowserWindow = activeElement === input[0];
332 |               let lostFocusToChildElement = element[0].contains(activeElement);
333 | 
334 |               if (lostFocusToBrowserWindow || !lostFocusToChildElement) {
335 |                 scope.hasFocus = false;
336 |                 events.trigger('input-blur');
337 |               }
338 |             });
339 |           },
340 |           paste($event) {
341 |             $event.getTextData = () => {
342 |               let clipboardData = $event.clipboardData || ($event.originalEvent && $event.originalEvent.clipboardData);
343 |               return clipboardData ? clipboardData.getData('text/plain') : $window.clipboardData.getData('Text');
344 |             };
345 |             events.trigger('input-paste', $event);
346 |           }
347 |         },
348 |         host: {
349 |           click() {
350 |             if (scope.disabled) {
351 |               return;
352 |             }
353 |             focusInput();
354 |           }
355 |         },
356 |         tag: {
357 |           click(tag) {
358 |             events.trigger('tag-clicked', { $tag: tag });
359 |           }
360 |         }
361 |       };
362 | 
363 |       events
364 |         .on('tag-added', scope.onTagAdded)
365 |         .on('invalid-tag', scope.onInvalidTag)
366 |         .on('tag-removed', scope.onTagRemoved)
367 |         .on('tag-clicked', scope.onTagClicked)
368 |         .on('tag-added', () => {
369 |           scope.newTag.text('');
370 |         })
371 |         .on('tag-added tag-removed', () => {
372 |           scope.tags = tagList.getItems();
373 |           // Ideally we should be able call $setViewValue here and let it in turn call $setDirty and $validate
374 |           // automatically, but since the model is an array, $setViewValue does nothing and it's up to us to do it.
375 |           // Unfortunately this won't trigger any registered $parser and there's no safe way to do it.
376 |           ngModelCtrl.$setDirty();
377 |           focusInput();
378 |         })
379 |         .on('invalid-tag', () => {
380 |           scope.newTag.invalid = true;
381 |         })
382 |         .on('option-change', e => {
383 |           if (validationOptions.indexOf(e.name) !== -1) {
384 |             setElementValidity();
385 |           }
386 |         })
387 |         .on('input-change', () => {
388 |           tagList.clearSelection();
389 |           scope.newTag.invalid = null;
390 |         })
391 |         .on('input-focus', () => {
392 |           element.triggerHandler('focus');
393 |           ngModelCtrl.$setValidity('leftoverText', true);
394 |         })
395 |         .on('input-blur', () => {
396 |           if (options.addOnBlur && !options.addFromAutocompleteOnly) {
397 |             tagList.addText(scope.newTag.text());
398 |           }
399 |           element.triggerHandler('blur');
400 |           setElementValidity();
401 |         })
402 |         .on('input-keydown', event => {
403 |           let key = event.keyCode;
404 | 
405 |           if (tiUtil.isModifierOn(event) || hotkeys.indexOf(key) === -1) {
406 |             return;
407 |           }
408 | 
409 |           let addKeys = {
410 |             [tiConstants.KEYS.enter]: options.addOnEnter,
411 |             [tiConstants.KEYS.comma]: options.addOnComma,
412 |             [tiConstants.KEYS.space]: options.addOnSpace
413 |           };
414 | 
415 |           let shouldAdd = !options.addFromAutocompleteOnly && addKeys[key];
416 |           let shouldRemove = (key === tiConstants.KEYS.backspace || key === tiConstants.KEYS.delete) && tagList.selected;
417 |           let shouldEditLastTag = key === tiConstants.KEYS.backspace && scope.newTag.text().length === 0 && options.enableEditingLastTag;
418 |           let shouldSelect = (key === tiConstants.KEYS.backspace || key === tiConstants.KEYS.left || key === tiConstants.KEYS.right) &&
419 |             scope.newTag.text().length === 0 && !options.enableEditingLastTag;
420 | 
421 |           if (shouldAdd) {
422 |             tagList.addText(scope.newTag.text());
423 |           }
424 |           else if (shouldEditLastTag) {
425 |             tagList.selectPrior();
426 |             tagList.removeSelected().then(tag => {
427 |               if (tag) {
428 |                 scope.newTag.text(tag[options.displayProperty]);
429 |               }
430 |             });
431 |           }
432 |           else if (shouldRemove) {
433 |             tagList.removeSelected();
434 |           }
435 |           else if (shouldSelect) {
436 |             if (key === tiConstants.KEYS.left || key === tiConstants.KEYS.backspace) {
437 |               tagList.selectPrior();
438 |             }
439 |             else if (key === tiConstants.KEYS.right) {
440 |               tagList.selectNext();
441 |             }
442 |           }
443 | 
444 |           if (shouldAdd || shouldSelect || shouldRemove || shouldEditLastTag) {
445 |             event.preventDefault();
446 |           }
447 |         })
448 |         .on('input-paste', event => {
449 |           if (options.addOnPaste) {
450 |             let data = event.getTextData();
451 |             let tags = data.split(options.pasteSplitPattern);
452 | 
453 |             if (tags.length > 1) {
454 |               tags.forEach(tag => {
455 |                 tagList.addText(tag);
456 |               });
457 |               event.preventDefault();
458 |             }
459 |           }
460 |         });
461 |     }
462 |   };
463 | }
464 | 


--------------------------------------------------------------------------------
/CHANGELOG.md:
--------------------------------------------------------------------------------
  1 | ## 3.2.0 (2017-04-15)
  2 | 
  3 | #### Features
  4 | 
  5 | * **tagsInput:** Add experimental support for array of strings ([8104ddc3](https://github.com/mbenford/ngTagsInput/commit/8104ddc3e4e3c439d19e0b4a271610b0f0a0a884))
  6 | 
  7 | ## 3.1.2 (2017-03-31)
  8 | 
  9 | #### Bug Fixes
 10 | 
 11 | * **util:** Fix XSS vulnerability in safeHighlight ([bbc1f584](https://github.com/mbenford/ngTagsInput/commit/bbc1f584acc8e154c04969180baddbd8f11f9c8c), [#491](https://github.com/mbenford/ngTagsInput/issues/491))
 12 | 
 13 | ## 3.1.1 (2016-05-27)
 14 | 
 15 | #### Bug Fixes
 16 | 
 17 | * **util:** Fix the order that event handlers are registered so the directive can work again with Angular 1.4-. ([0e3eff44](https://github.com/mbenford/ngTagsInput/commit/0e3eff44bc4b4903c746cce7cf3cf87c0224204f))
 18 | 
 19 | ## 3.1.0 (2016-05-26)
 20 | 
 21 | #### Bug Fixes
 22 | 
 23 | * **util:** Reverse the order that events are triggered so the directive works with Angular 1.5.x ([7bc37a62](https://github.com/mbenford/ngTagsInput/commit/7bc37a62d61c2903ec5dc091eb6fc315c0bfbc3d), [#638](https://github.com/mbenford/ngTagsInput/issues/638))
 24 | 
 25 | #### Features
 26 | 
 27 | * **autocomplete:** Add support for custom CSS classes for matches ([8d177469](https://github.com/mbenford/ngTagsInput/commit/8d17746998fc35dfd9d2252ed525dd851837f0d0))
 28 | * **tagsInput:**
 29 |   * Add templateScope option ([8d26e3bb](https://github.com/mbenford/ngTagsInput/commit/8d26e3bbf8d24d6fc02073a888c3e51ed29123c3), [#486](https://github.com/mbenford/ngTagsInput/issues/486))
 30 |   * Add support for custom CSS classes for tags ([5cc0144b](https://github.com/mbenford/ngTagsInput/commit/5cc0144b699552e5b57f2f7b86b04118c74dbfc1), [#273](https://github.com/mbenford/ngTagsInput/issues/273))
 31 |   * Allow onTagAdding/onTagRemoving to return a promise ([4cc2f5c3](https://github.com/mbenford/ngTagsInput/commit/4cc2f5c3cf25c4276b82273c9d6e45b1d4553ec6), [#463](https://github.com/mbenford/ngTagsInput/issues/463))
 32 | 
 33 | ## 3.0.0 (2015-07-13)
 34 | 
 35 | #### Bug Fixes
 36 | 
 37 | * **autocomplete:**
 38 |   * Stop preventing keys from being propagated ([b0db7633](https://github.com/mbenford/ngTagsInput/commit/b0db763301d483960cbb72bc0c3338a196eb8ef2), [#384](https://github.com/mbenford/ngTagsInput/issues/384))
 39 |   * Hide the suggestion list after a tag is removed ([731ef9eb](https://github.com/mbenford/ngTagsInput/commit/731ef9eb0874ae083cba47c942034cb9109e6cf9))
 40 | * **tagsInput:**
 41 |   * Fix makeObjectArray function ([b5dc57f5](https://github.com/mbenford/ngTagsInput/commit/b5dc57f542c11351ad881e45cc238f75b9adc24a))
 42 |   * Remove model auto-initialization ([f9fcb12d](https://github.com/mbenford/ngTagsInput/commit/f9fcb12dc1c71a77e52ba573cd4505e663131625), [#320](https://github.com/mbenford/ngTagsInput/issues/320), [#204](https://github.com/mbenford/ngTagsInput/issues/204))
 43 | 
 44 | #### Features
 45 | 
 46 | * **tagsInput:**
 47 |   * Add newTagText option ([215fe923](https://github.com/mbenford/ngTagsInput/commit/215fe923b68e0e6034ae34c9b06ea89dff7d1110), [#197](https://github.com/mbenford/ngTagsInput/issues/197))
 48 |   * Add onTagClicked callback ([aa8d190b](https://github.com/mbenford/ngTagsInput/commit/aa8d190b6edc705f89d407cf65a8ca6266238616))
 49 |   * Add support for Angular 1.3 ([3355f3fa](https://github.com/mbenford/ngTagsInput/commit/3355f3fa7451dc0b4ca183875ba183a89c543be4), [#318](https://github.com/mbenford/ngTagsInput/issues/318), [#341](https://github.com/mbenford/ngTagsInput/issues/341), [#373](https://github.com/mbenford/ngTagsInput/issues/373))
 50 | 
 51 | #### Breaking Changes
 52 | 
 53 | * Code that relies on auto-initialization of the model may stop working. ([f9fcb12d](https://github.com/mbenford/ngTagsInput/commit/f9fcb12dc1c71a77e52ba573cd4505e663131625))
 54 | * This uses new API methods of Angular 1.3 and therefore the directive will no longer work with previous versions of the framework. ([3355f3fa](https://github.com/mbenford/ngTagsInput/commit/3355f3fa7451dc0b4ca183875ba183a89c543be4))
 55 | 
 56 | ## 2.3.0 (2015-03-23)
 57 | 
 58 | #### Bug Fixes
 59 | 
 60 | * **autocomplete:**
 61 |   * Make match highlighting case insensitive ([42ca7e46](https://github.com/mbenford/ngTagsInput/commit/42ca7e46ea37d5dd213a62bbb0706b2073f592de), [#388](https://github.com/mbenford/ngTagsInput/issues/388))
 62 |   * Make a copy of the suggestion before adding ([b12f5074](https://github.com/mbenford/ngTagsInput/commit/b12f50744e0b60371c134bbec3a54d2a474bfacd))
 63 |   * Fix existing tags diff algorithm ([913e95a2](https://github.com/mbenford/ngTagsInput/commit/913e95a2caf6c21736650798d6d1cb25f6619f2f), [#232](https://github.com/mbenford/ngTagsInput/issues/232))
 64 | * **tagsInput:**
 65 |   * Fix addOnPaste issue with jQuery ([664dfc70](https://github.com/mbenford/ngTagsInput/commit/664dfc70942ece06b0b97d85cbc52d1954398696))
 66 |   * Fix add-on-paste issue in IE ([e752682d](https://github.com/mbenford/ngTagsInput/commit/e752682d067cf48a2969820fb4f383bcbf807fa9), [#325](https://github.com/mbenford/ngTagsInput/issues/325))
 67 |   * Ensure autocomplete attribute is off ([8359e608](https://github.com/mbenford/ngTagsInput/commit/8359e608e2cf1c83e61828f456081f5a33f374ab), [#368](https://github.com/mbenford/ngTagsInput/issues/368))
 68 |   * Fix element validity on tag removal ([0bfc7ee3](https://github.com/mbenford/ngTagsInput/commit/0bfc7ee3f40399fee5e8dfa6562dbbc3574cdbf1), [#381](https://github.com/mbenford/ngTagsInput/issues/381))
 69 | 
 70 | #### Features
 71 | 
 72 | * **autocomplete:**
 73 |   * Add custom template support ([b550b119](https://github.com/mbenford/ngTagsInput/commit/b550b1190509e399742f32abb6299c179fe7bae1), [#99](https://github.com/mbenford/ngTagsInput/issues/99))
 74 |   * Make $index available to custom templates ([8611877e](https://github.com/mbenford/ngTagsInput/commit/8611877ef43581fe493fd3195726f027af2ae3cc))
 75 |   * Add autoscroll support ([13796600](https://github.com/mbenford/ngTagsInput/commit/13796600cb81d0ef111c5c55ac76d98bf0832fa9), [#216](https://github.com/mbenford/ngTagsInput/issues/216))
 76 | * **tagsInput:**
 77 |   * Add custom template support ([45e5d998](https://github.com/mbenford/ngTagsInput/commit/45e5d99809f66ea52e2206a476eb546867bbe4a8))
 78 |   * Add ng-required support ([8f17b9f1](https://github.com/mbenford/ngTagsInput/commit/8f17b9f11bd359fe0066133af8b93914611150ea), [#157](https://github.com/mbenford/ngTagsInput/issues/157))
 79 |   * Add support for tag navigation ([18760b24](https://github.com/mbenford/ngTagsInput/commit/18760b249978203bd4aaa798aa07b72199c73aed), [#350](https://github.com/mbenford/ngTagsInput/issues/350))
 80 |   * Add ng-disabled support ([870caba6](https://github.com/mbenford/ngTagsInput/commit/870caba653c4874b952b65893e4de07cf605d2b8), [#102](https://github.com/mbenford/ngTagsInput/issues/102))
 81 |   * Add keyProperty and displayProperty options ([2c780f9a](https://github.com/mbenford/ngTagsInput/commit/2c780f9a53711317f75a7141c6965f1568b9daae), [#265](https://github.com/mbenford/ngTagsInput/issues/265))
 82 |   * Add onTagAdding/onTagRemoving callbacks ([c4ceed54](https://github.com/mbenford/ngTagsInput/commit/c4ceed546b30cb6f2052de6b5edcf0f759803ef7), [#100](https://github.com/mbenford/ngTagsInput/issues/100))
 83 | 
 84 | ## 2.2.0 (2015-03-02)
 85 | 
 86 | #### Bug Fixes
 87 | 
 88 | * **autocomplete:**
 89 |   * Fix loadOnEmpty behavior ([c63eb05e](https://github.com/mbenford/ngTagsInput/commit/c63eb05e2e78698299eed1537995ea149c9a5b6a), [#205](https://github.com/mbenford/ngTagsInput/issues/205))
 90 |   * Correctly highlight HTML entities ([315f3a2b](https://github.com/mbenford/ngTagsInput/commit/315f3a2b0f9a34a98a203162d452a3c7520bb6f4), [#200](https://github.com/mbenford/ngTagsInput/issues/200))
 91 | * **tagsInput:**
 92 |   * Add spellcheck option ([166f8358](https://github.com/mbenford/ngTagsInput/commit/166f8358ce1f8c42b54390d3b52a71f5803c1e5a))
 93 |   * Ignore addFromAutocompleteOnly on input-blur ([e4767c2d](https://github.com/mbenford/ngTagsInput/commit/e4767c2da75ee8d197c804f15620d107495a91a4))
 94 | 
 95 | #### Features
 96 | 
 97 | * **autocomplete:** 
 98 |  * Add autoSelectFirstSuggestion option ([0993bbdf](https://github.com/mbenford/ngTagsInput/commit/0993bbdf5ac85f0af5e62c5fa76c13a2aecfa0c7), [#136](https://github.com/mbenford/ngTagsInput/issues/136))
 99 |   * Remove requirement for the source option to return a promise ([10932fbb](https://github.com/mbenford/ngTagsInput/commit/10932fbb18b0887927ae71bb1f9e1d1d0f0f4e26), [#237](https://github.com/mbenford/ngTagsInput/issues/237))
100 | * **tagsInput:**
101 |   * Add addOnPaste and pasteSplitPattern options ([9ad32fbd](https://github.com/mbenford/ngTagsInput/commit/9ad32fbd5c3f1d7237bccd73c44796c0eaa91e0d))
102 |   * Add onInvalidTag option ([e5c57b8e](https://github.com/mbenford/ngTagsInput/commit/e5c57b8ec77b4840e6f383e0bee9a0ce2f6ff0dc))
103 |   * Enable ngFocus and ngBlur native directives ([210b86f7](https://github.com/mbenford/ngTagsInput/commit/210b86f74538564adcabd0ab22522866888acad8))
104 | 
105 | ## 2.1.1 (2014-09-04)
106 | 
107 | #### Bug Fixes
108 | 
109 | * **tagsInput:** Fix has-success, has-warning and has-error classes ([2a098736](https://github.com/mbenford/ngTagsInput/commit/2a0987367db2d28106936fa39393964e35b61de7))
110 | 
111 | ## 2.1.0 (2014-08-22)
112 | 
113 | #### Bug Fixes
114 | 
115 | * **autocomplete:** Fix suggestion selection on touch devices ([ef25a555](https://github.com/mbenford/ngTagsInput/commit/ef25a5555f358e9986635826788c2475c9f417ee))
116 | * **tagsInput:**
117 |   * Prevent an empty tag from being added ([c104c2b2](https://github.com/mbenford/ngTagsInput/commit/c104c2b2cdd19fe891c76e4a2b1f20d13e27369f), [#172](https://github.com/mbenford/ngTagsInput/issues/172))
118 |   * Set element's validity when options change ([e89f2682](https://github.com/mbenford/ngTagsInput/commit/e89f268218d75f23c6c14c426b7b7c7686fd8898), [#154](https://github.com/mbenford/ngTagsInput/issues/154))
119 |   * Replace interpolation with ngBind ([cadf8327](https://github.com/mbenford/ngTagsInput/commit/cadf83279c194b0135a5b5960987028c91c04e74))
120 |   * Remove dependency on interpolation symbols ([6598b556](https://github.com/mbenford/ngTagsInput/commit/6598b5562169c506e7645acbdac360e8d20c1054), [#151](https://github.com/mbenford/ngTagsInput/issues/151))
121 |   * Fix display of non-string items ([49734921](https://github.com/mbenford/ngTagsInput/commit/497349211ff17505208268fade98ed93e13fa082), [#150](https://github.com/mbenford/ngTagsInput/issues/150))
122 | 
123 | #### Features
124 | 
125 | * **autocomplete:**
126 |   * Add loadOnFocus option ([fe711f56](https://github.com/mbenford/ngTagsInput/commit/fe711f56eaa3fe4293527955e653b3f6bbd235a0))
127 |   * Add loadOnEmpty option ([28c615fa](https://github.com/mbenford/ngTagsInput/commit/28c615fa543cdcfa79107e3d9bddfdb73f85c87a))
128 |   * Add loadOnDownArrow option ([c44f110a](https://github.com/mbenford/ngTagsInput/commit/c44f110a539fe44f2255d51ee7e011b3d84bc38a), [#54](https://github.com/mbenford/ngTagsInput/issues/54))
129 | * **configuration:**
130 |   * Add setTextAutosizeThreshold method ([a1702e63](https://github.com/mbenford/ngTagsInput/commit/a1702e636128c8ec7fd14c9f0e7a235157696986), [#181](https://github.com/mbenford/ngTagsInput/issues/181))
131 |   * Add support for validation ([445877a1](https://github.com/mbenford/ngTagsInput/commit/445877a1325c31708f9bf7ea6a85e51647ce6a94))
132 | * **tagsInput:**
133 |   * Add support for some Bootstrap classes ([d6360655](https://github.com/mbenford/ngTagsInput/commit/d6360655d7444e4979ccfb6092f79ba0a82edfc6), [#78](https://github.com/mbenford/ngTagsInput/issues/78))
134 |   * Add type option ([3afe564d](https://github.com/mbenford/ngTagsInput/commit/3afe564d4be4f5726638132bb6329a259c9422fd), [#140](https://github.com/mbenford/ngTagsInput/issues/140))
135 | 
136 | ## v2.0.1 (2014-04-13)
137 | 
138 | #### Bug Fixes
139 | 
140 | * **autocomplete:**
141 |   * Escape regex metachars when highlighting ([e3c695f2](https://github.com/mbenford/ngTagsInput/commit/e3c695f26f96ab642a4a1f1129638e763b84b231), [#124](https://github.com/mbenford/ngTagsInput/issues/124))
142 |   * Fix autocomplete navigation when maxResultsToShow is set ([d95d35e8](https://github.com/mbenford/ngTagsInput/commit/d95d35e814099d74355ed431e85a957d39ec4745), [#109](https://github.com/mbenford/ngTagsInput/issues/109))
143 |   * Fix memory leak ([ba3a1a56](https://github.com/mbenford/ngTagsInput/commit/ba3a1a563d99894f381e4a29f3a1753a540ff453), [#118](https://github.com/mbenford/ngTagsInput/issues/118))
144 | * **autosize:** Re-size input when placeholder changes ([0eacc964](https://github.com/mbenford/ngTagsInput/commit/0eacc9647ed7b12fac8db23cb711bb6c38a8c31a), [#110](https://github.com/mbenford/ngTagsInput/issues/110))
145 | 
146 | ## v2.0.0 (2014-03-26)
147 | 
148 | #### Bug Fixes
149 | 
150 | * **tagsInput:**
151 |   * Fix blur handling ([f4fe7b87](https://github.com/mbenford/ngTagsInput/commit/f4fe7b87985e123d688595cd14aa22d549143de6), [#91](https://github.com/mbenford/ngTagsInput/issues/91))
152 |   * Fix autosize directive ([e9a723c9](https://github.com/mbenford/ngTagsInput/commit/e9a723c911a8d32964ad771c333f09fc78157172), [#84](https://github.com/mbenford/ngTagsInput/issues/84)) ([12b5beba](https://github.com/mbenford/ngTagsInput/commit/12b5beba230304fd22b6fef8eb613f6133860c0a), [#75](https://github.com/mbenford/ngTagsInput/issues/75))
153 | 
154 | #### Features
155 | 
156 | * **tagsInput:**
157 |   * Add addFromAutocompleteOnly option ([90f075c9](https://github.com/mbenford/ngTagsInput/commit/90f075c991866b99bd830529913483ea5e32a63f), [#60](https://github.com/mbenford/ngTagsInput/issues/60))
158 |   * Make maxLength consistent with minLength ([1458ba62](https://github.com/mbenford/ngTagsInput/commit/1458ba624a876a25ac0d8776388ecf4a16cc6aa7), [#53](https://github.com/mbenford/ngTagsInput/issues/53))
159 |   * Add visual feedback for invalid tags ([f469c274](https://github.com/mbenford/ngTagsInput/commit/f469c274b09397ca88004da78670dc090bf693e0), [#77](https://github.com/mbenford/ngTagsInput/issues/77))
160 |   * Change allowedTagsPattern's default value ([87029090](https://github.com/mbenford/ngTagsInput/commit/8702909009f998114765b6673c565dda4b038b43), [#76](https://github.com/mbenford/ngTagsInput/issues/76))
161 |   * Add support for validation CSS classes ([7f9e8bba](https://github.com/mbenford/ngTagsInput/commit/7f9e8bba7defca2c0f7c75b933b2e9c336f72b47), [#55](https://github.com/mbenford/ngTagsInput/issues/55))
162 |   * Add support for array of objects ([5c036806](https://github.com/mbenford/ngTagsInput/commit/5c036806a41d425e194d0496d9f091fb927b42c3), [#46](https://github.com/mbenford/ngTagsInput/issues/46))
163 | * **configProvider:** Make options optionally data-bound ([390380bf](https://github.com/mbenford/ngTagsInput/commit/390380bffd4cac03ca71cb780e20898b2a6b07ad), [#73](https://github.com/mbenford/ngTagsInput/issues/73))
164 | 
165 | #### Breaking Changes
166 | 
167 | * Stylesheets were changed and .ngTagsInput class selector was replaced by tags-input type selector. ([7f9e8bba](https://github.com/mbenford/ngTagsInput/commit/7f9e8bba7defca2c0f7c75b933b2e9c336f72b47))
168 | * From now on, arrays of strings are no longer supported. In order to keep some backward compatibility a one-time conversion from an array of strings into an array of objects is available. ([5c036806](https://github.com/mbenford/ngTagsInput/commit/5c036806a41d425e194d0496d9f091fb927b42c3))
169 | 
170 | ## v1.1.1 (2014-01-23)
171 | 
172 | #### Bug Fixes
173 | 
174 | * **tagsInput:** Fix input-change event name ([47b40e13](http://github.com/mbenford/ngTagsInput/commit/47b40e1394bb3dfe7eabaf932a77d92539fb065e), [#57](http://github.com/mbenford/ngTagsInput/issues/57))
175 | 
176 | ## v1.1.0 (2014-01-14)
177 | 
178 | #### Bug Fixes
179 | 
180 | * **tagsInput:** 
181 |   * Change input width accordingly to its content ([8abdf79b](http://github.com/mbenford/ngTagsInput/commit/8abdf79bcd6871cd7c7064838020ea2b6c7b2fa2), [#6](http://github.com/mbenford/ngTagsInput/issues/6))
182 | * **autocomplete:**
183 |   * Fix require property ([231f275c](http://github.com/mbenford/ngTagsInput/commit/231f275c9f254370cb821648f71860a51e67a935))
184 |   * Close suggestion list when input loses focus ([d73d1567](http://github.com/mbenford/ngTagsInput/commit/d73d1567f3e01e45096ae50ca34b01424841214c), [#52](http://github.com/mbenford/ngTagsInput/issues/52))
185 |   * Hide suggestion list when there's nothing to show ([5a58a927](http://github.com/mbenford/ngTagsInput/commit/5a58a9274d38d8914a107c0108e6f2e4b1fd62e8), [#39](http://github.com/mbenford/ngTagsInput/issues/39))
186 | 
187 | #### Features
188 | 
189 | * **tagsInput:**
190 |   * Add support for ngModelController ([49c07608](http://github.com/mbenford/ngTagsInput/commit/49c076089b93f41decf751b662437a29fa28c7ea), [#45](http://github.com/mbenford/ngTagsInput/issues/45))
191 |   * Add min-tags option ([49c07608](http://github.com/mbenford/ngTagsInput/commit/49c076089b93f41decf751b662437a29fa28c7ea), [#47](http://github.com/mbenford/ngTagsInput/issues/47))
192 |   * Add max-tags option ([2bc02ec9](http://github.com/mbenford/ngTagsInput/commit/2bc02ec9f9c04fab5ef715efbc40914f7301fc22), [#24](http://github.com/mbenford/ngTagsInput/issues/24))
193 | * **autocomplete:** 
194 |   * Add support for $http promises ([adaf6580](http://github.com/mbenford/ngTagsInput/commit/adaf6580320a47b962cb769407ae19abd8e6317c), [#38](http://github.com/mbenford/ngTagsInput/issues/38))
195 | * **configProvider:** 
196 |   * Add support for global configuration ([e48be112](http://github.com/mbenford/ngTagsInput/commit/e48be112b65ca5bbf9513fdaa4618bb949ae7640), [#48](http://github.com/mbenford/ngTagsInput/issues/48))
197 | 
198 | #### Breaking Changes
199 | 
200 | * Some CSS selectors must be changed, and therefore custom stylesheets based on the old selectors will conflict with this fix. They'll have to be updated to use class selectors.  ([8abdf79b](http://github.com/mbenford/ngTagsInput/commit/8abdf79bcd6871cd7c7064838020ea2b6c7b2fa2), [#6](http://github.com/mbenford/ngTagsInput/issues/6))
201 | 
202 | ## v1.0.1 (2013-12-16)
203 | 
204 | - **tagsInput**
205 |     - Ignore modifier keys when processing keystrokes ([820014e][], [#35][])
206 | - **autocomplete**
207 |     - Encode HTML chars in suggestion list ([6e4f7c7][], [#34][])
208 |     - Prevent pending promises from executing ([710d33a][], [#36][])
209 |     
210 | [820014e]: https://github.com/mbenford/ngTagsInput/commit/820014e
211 | [710d33a]: https://github.com/mbenford/ngTagsInput/commit/710d33a
212 | [6e4f7c7]: https://github.com/mbenford/ngTagsInput/commit/6e4f7c7
213 | [#34]: https://github.com/mbenford/ngTagsInput/issues/34
214 | [#35]: https://github.com/mbenford/ngTagsInput/issues/35
215 | [#36]: https://github.com/mbenford/ngTagsInput/issues/36
216 | 
217 | ## v1.0.0 (2013-12-07)
218 | 
219 | - **tagsInput**
220 |     - Added support for Angular 1.2 ([1a0b256][], [#17][])
221 |     - Added addOnBlur option ([69415a2][], [#29][])
222 |     - Fixed focus outline ([7d3c51a][], [#32][])
223 |     - Renamed ng-class option as custom-class ([298bf11][])
224 |     - Renamed tags-input module as ngTagsInput ([1db08aa][])
225 | - **autocomplete**
226 |     - Added debounce-delay option ([1a6527f][], [#19][])
227 |     - Added min-length option ([c17d7a4][], [#21][])
228 |     - Added match highlighting ([ce73779][], [#22][])
229 |     - Added maxResultsToShow option ([b2ae61b][], [#23][])
230 |     - Added tag filtering support ([a27363d][], [#25][])
231 |     - Changed tag addition behavior ([4f868e0][], [#30][])
232 |     - Fixed suggestions box visibility ([84bb916][], [c2b43c6][], [#26][])
233 |     - Changed source option to comply with Angular guidelines ([00b8e71][], [#18][])
234 | - **general**
235 |     - Improved minification ([5e2bf29][], [503d380][], [#27][])
236 | 
237 | [1a0b256]: https://github.com/mbenford/ngTagsInput/commit/1a0b256
238 | [7d3c51a]: https://github.com/mbenford/ngTagsInput/commit/7d3c51a
239 | [69415a2]: https://github.com/mbenford/ngTagsInput/commit/69415a2
240 | [298bf11]: https://github.com/mbenford/ngTagsInput/commit/298bf11
241 | [1a6527f]: https://github.com/mbenford/ngTagsInput/commit/1a6527f
242 | [c17d7a4]: https://github.com/mbenford/ngTagsInput/commit/c17d7a4
243 | [ce73779]: https://github.com/mbenford/ngTagsInput/commit/ce73779
244 | [b2ae61b]: https://github.com/mbenford/ngTagsInput/commit/b2ae61b
245 | [a27363d]: https://github.com/mbenford/ngTagsInput/commit/a27363d
246 | [4f868e0]: https://github.com/mbenford/ngTagsInput/commit/4f868e0
247 | [c2b43c6]: https://github.com/mbenford/ngTagsInput/commit/c2b43c6
248 | [00b8e71]: https://github.com/mbenford/ngTagsInput/commit/00b8e71
249 | [5e2bf29]: https://github.com/mbenford/ngTagsInput/commit/5e2bf29
250 | [503d380]: https://github.com/mbenford/ngTagsInput/commit/503d380
251 | [84bb916]: https://github.com/mbenford/ngTagsInput/commit/84bb916
252 | [1db08aa]: https://github.com/mbenford/ngTagsInput/commit/1db08aa
253 | [#17]: https://github.com/mbenford/ngTagsInput/issues/17
254 | [#18]: https://github.com/mbenford/ngTagsInput/issues/18
255 | [#19]: https://github.com/mbenford/ngTagsInput/issues/19
256 | [#21]: https://github.com/mbenford/ngTagsInput/issues/21
257 | [#22]: https://github.com/mbenford/ngTagsInput/issues/22
258 | [#23]: https://github.com/mbenford/ngTagsInput/issues/23
259 | [#25]: https://github.com/mbenford/ngTagsInput/issues/25
260 | [#26]: https://github.com/mbenford/ngTagsInput/issues/26
261 | [#27]: https://github.com/mbenford/ngTagsInput/issues/27
262 | [#29]: https://github.com/mbenford/ngTagsInput/issues/29
263 | [#30]: https://github.com/mbenford/ngTagsInput/issues/30
264 | [#32]: https://github.com/mbenford/ngTagsInput/issues/32
265 | 
266 | ## v0.1.5 (2013-11-23)
267 | 
268 | - Renamed autocomplete directive as auto-complete so it doesn't conflict with input's autocomplete attribute
269 | - Changed 'restrict' property of both tags-input and auto-complete directives to 'E'
270 | 
271 | ## v0.1.4 (2013-11-21)
272 | 
273 | - Added basic autocomplete support
274 | - Added onTagAdded and onTagRemoved callbacks
275 | 
276 | ## v0.1.3 (2013-10-02)
277 | 
278 | - Added support for one-time string interpolation to all options
279 | 
280 | ## v0.1.2 (2013-09-08)
281 | 
282 | - Fixed the CSS classes so the directive gets rendered consistently across different browsers
283 | 
284 | ## v0.1.1 (2013-08-17)
285 | 
286 | - Removed allowed-chars-pattern option since it wouldn't prevent invalid chars from being inserted by pasting data from the clipboard. The allowed-tags-pattern option is the correct way to validate input from now on
287 | 


--------------------------------------------------------------------------------
/test/auto-complete.spec.js:
--------------------------------------------------------------------------------
   1 | describe('autoComplete directive', () => {
   2 |   let $compile, $scope, $q, $timeout, constants,
   3 |     parentCtrl, element, isolateScope, suggestionList, deferred, tagsInput, eventHandlers;
   4 | 
   5 |   beforeEach(() => {
   6 |     jasmine.addMatchers(customMatchers);
   7 | 
   8 |     module('ngTagsInput');
   9 | 
  10 |     inject(($rootScope, _$compile_, _$q_, _$timeout_, tiConstants) => {
  11 |       $scope = $rootScope;
  12 |       $compile = _$compile_;
  13 |       $q = _$q_;
  14 |       $timeout = _$timeout_;
  15 |       constants = tiConstants;
  16 |     });
  17 | 
  18 |     deferred = $q.defer();
  19 |     eventHandlers = {
  20 |       call(name, args) {
  21 |         if (this[name]) {
  22 |           this[name].call(null, args);
  23 |         }
  24 |       }
  25 |     };
  26 |     $scope.loadItems = jasmine.createSpy().and.returnValue(deferred.promise);
  27 | 
  28 |     tagsInput = {
  29 |       changeInputValue: jasmine.createSpy(),
  30 |       addTag: jasmine.createSpy().and.callFake(() => $q.when()),
  31 |       on: jasmine.createSpy().and.callFake(function(names, handler) {
  32 |         names.split(' ').forEach(name =>{ eventHandlers[name] = handler; });
  33 |         return this;
  34 |       }),
  35 |       getTags: jasmine.createSpy().and.returnValue([]),
  36 |       getCurrentTagText: jasmine.createSpy(),
  37 |       getOptions: jasmine.createSpy().and.returnValue({
  38 |         displayProperty: 'text'
  39 |       }),
  40 |       getTemplateScope: jasmine.createSpy()
  41 |     };
  42 | 
  43 |     compile();
  44 |   });
  45 | 
  46 |   function compile(...args) {
  47 |     let parent = $compile('<tags-input ng-model="whatever"></tags-input>')($scope);
  48 |     $scope.$digest();
  49 | 
  50 |     parentCtrl = parent.controller('tagsInput');
  51 |     spyOn(parentCtrl, 'registerAutocomplete').and.returnValue(tagsInput);
  52 | 
  53 |     let options = args.join(' ');
  54 |     element = angular.element('<auto-complete source="loadItems($query)" ' + options + '></auto-complete>');
  55 |     parent.append(element);
  56 | 
  57 |     $compile(element)($scope);
  58 |     $scope.$digest();
  59 | 
  60 |     isolateScope = element.isolateScope();
  61 |     suggestionList = isolateScope.suggestionList;
  62 |   }
  63 | 
  64 |   function resolve(items) {
  65 |     deferred.resolve(items);
  66 |     $scope.$digest();
  67 |   }
  68 | 
  69 |   function sendKeyDown(keyCode, properties) {
  70 |     let event = jQuery.Event('keydown', angular.extend({keyCode: keyCode}, properties || {}));
  71 |     eventHandlers.call('input-keydown', event);
  72 | 
  73 |     return event;
  74 |   }
  75 | 
  76 |   function changeInputValue(value) {
  77 |     eventHandlers.call('input-change', value);
  78 |     $scope.$digest();
  79 |   }
  80 | 
  81 |   function getSuggestionsBox() {
  82 |     return element.find('div');
  83 |   }
  84 | 
  85 |   function getSuggestions() {
  86 |     return getSuggestionsBox().find('li');
  87 |   }
  88 | 
  89 |   function getSuggestion(index) {
  90 |     return getSuggestions().eq(index);
  91 |   }
  92 | 
  93 |   function getSuggestionText(index) {
  94 |     return getSuggestion(index).find('ti-autocomplete-match > ng-include > span').html();
  95 |   }
  96 | 
  97 |   function isSuggestionsBoxVisible() {
  98 |     return !!getSuggestionsBox().length;
  99 |   }
 100 | 
 101 |   function generateSuggestions(count) {
 102 |     return range(count, index => ({text: 'Item' + (index + 1)}));
 103 |   }
 104 | 
 105 |   function loadSuggestions(countOrItems, text) {
 106 |     let items = angular.isNumber(countOrItems) ? generateSuggestions(countOrItems) : countOrItems;
 107 |     text = angular.isUndefined(text) ? 'foobar' : text;
 108 | 
 109 |     suggestionList.load(text, tagsInput.getTags());
 110 |     $timeout.flush();
 111 |     resolve(items);
 112 |   }
 113 | 
 114 |   describe('basic features', () => {
 115 |     it('ensures that the suggestions list is hidden by default', () => {
 116 |       expect(isSuggestionsBoxVisible()).toBe(false);
 117 |     });
 118 | 
 119 |     it('renders all elements returned by the load function that aren\'t already added', () => {
 120 |       // Act
 121 |       tagsInput.getTags.and.returnValue([{ text: 'Item3' }]);
 122 |       loadSuggestions(3);
 123 | 
 124 |       // Assert
 125 |       expect(getSuggestions().length).toBe(2);
 126 |       expect(getSuggestionText(0)).toBe('Item1');
 127 |       expect(getSuggestionText(1)).toBe('Item2');
 128 |     });
 129 | 
 130 |     it('renders all elements returned by the load function that aren\'t already added (replaceSpaceWithDashes on)', () => {
 131 |       // Act
 132 |       tagsInput.getOptions.and.returnValue({ displayProperty: 'text', replaceSpacesWithDashes: true });
 133 |       compile();
 134 | 
 135 |       tagsInput.getTags.and.returnValue([{ text: 'Item-3' }]);
 136 |       loadSuggestions([
 137 |         { text: 'Item 1'},
 138 |         { text: 'Item 2'},
 139 |         { text: 'Item 3'},
 140 |       ]);
 141 | 
 142 |       // Assert
 143 |       expect(getSuggestions().length).toBe(2);
 144 |       expect(getSuggestionText(0)).toBe('Item 1');
 145 |       expect(getSuggestionText(1)).toBe('Item 2');
 146 |     });
 147 | 
 148 |     it('renders all elements returned by the load function that aren\'t already added ($http promise)', () => {
 149 |       // Act
 150 |       tagsInput.getTags.and.returnValue([{ text: 'Item3' }]);
 151 |       loadSuggestions({ data: generateSuggestions(3)});
 152 | 
 153 |       // Assert
 154 |       expect(getSuggestions().length).toBe(2);
 155 |       expect(getSuggestionText(0)).toBe('Item1');
 156 |       expect(getSuggestionText(1)).toBe('Item2');
 157 |     });
 158 | 
 159 |     it('renders all elements returned by the load function that aren\'t already added (non-string items)', () => {
 160 |       // Act
 161 |       tagsInput.getTags.and.returnValue([{ text: '1' }]);
 162 |       loadSuggestions({
 163 |         data: [
 164 |           { text: 1 },
 165 |           { text: 1.5 },
 166 |           { text: true },
 167 |           { text: {} },
 168 |           { text: null },
 169 |           { text: undefined }
 170 |         ]
 171 |       });
 172 | 
 173 |       // Assert
 174 |       expect(getSuggestions().length).toBe(5);
 175 |       expect(getSuggestionText(0)).toBe('1.5');
 176 |       expect(getSuggestionText(1)).toBe('true');
 177 |       expect(getSuggestionText(2)).toBe('[object Object]');
 178 |       expect(getSuggestionText(3)).toBe('');
 179 |       expect(getSuggestionText(4)).toBe('');
 180 |     });
 181 | 
 182 |     it('renders all elements returned by the load function that aren\'t already added (non-promise)', () => {
 183 |       // Arrange
 184 |       tagsInput.getTags.and.returnValue([{ text: 'Item3' }]);
 185 |       $scope.loadItems = jasmine.createSpy().and.returnValue(generateSuggestions(3));
 186 | 
 187 |       // Act
 188 |       suggestionList.load('', tagsInput.getTags());
 189 |       $timeout.flush();
 190 | 
 191 |       // Assert
 192 |       expect(getSuggestions().length).toBe(2);
 193 |       expect(getSuggestionText(0)).toBe('Item1');
 194 |       expect(getSuggestionText(1)).toBe('Item2');
 195 |     });
 196 | 
 197 |     it('renders all elements returned by the load function using the provided display-property option', () => {
 198 |       // Arrange
 199 |       tagsInput.getOptions.and.returnValue({ displayProperty: 'label' });
 200 |       compile();
 201 | 
 202 |       // Act
 203 |       loadSuggestions([
 204 |         { label: 'Item1' },
 205 |         { label: 'Item2' },
 206 |         { label: 'Item3' },
 207 |       ]);
 208 | 
 209 |       // Assert
 210 |       expect(getSuggestions().length).toBe(3);
 211 |       expect(getSuggestionText(0)).toBe('Item1');
 212 |       expect(getSuggestionText(1)).toBe('Item2');
 213 |       expect(getSuggestionText(2)).toBe('Item3');
 214 |     });
 215 | 
 216 |     it('shows the suggestions list when there are items to show', () => {
 217 |       // Act
 218 |       loadSuggestions(1);
 219 | 
 220 |       // Assert
 221 |       expect(isSuggestionsBoxVisible()).toBe(true);
 222 |     });
 223 | 
 224 |     it('hides the suggestions list when there is no items to show', () => {
 225 |       // Arrange
 226 |       suggestionList.visible = true;
 227 | 
 228 |       // Act
 229 |       loadSuggestions([]);
 230 | 
 231 |       // Assert
 232 |       expect(isSuggestionsBoxVisible()).toBe(false);
 233 |     });
 234 | 
 235 |     it('hides the suggestions list when there is no items left to show', () => {
 236 |       // Act
 237 |       tagsInput.getTags.and.returnValue([{ text: 'Item1' }, { text: 'Item2' }]);
 238 |       loadSuggestions(2);
 239 | 
 240 |       // Assert
 241 |       expect(isSuggestionsBoxVisible()).toBe(false);
 242 |     });
 243 | 
 244 |     it('hides the suggestion box when the input field becomes empty', () => {
 245 |       // Arrange
 246 |       changeInputValue('foobar');
 247 |       suggestionList.show();
 248 |       $scope.$digest();
 249 | 
 250 |       // Act
 251 |       changeInputValue('');
 252 | 
 253 |       // Assert
 254 |       expect(isSuggestionsBoxVisible()).toBe(false);
 255 |     });
 256 | 
 257 |     it('hides the suggestion box when the escape key is pressed', () => {
 258 |       // Arrange
 259 |       suggestionList.show();
 260 |       $scope.$digest();
 261 | 
 262 |       // Act
 263 |       sendKeyDown(constants.KEYS.escape);
 264 |       $scope.$digest();
 265 | 
 266 |       // Assert
 267 |       expect(isSuggestionsBoxVisible()).toBe(false);
 268 |     });
 269 | 
 270 |     it('hides the suggestion box when a tag is removed', () => {
 271 |       // Arrange
 272 |       suggestionList.show();
 273 |       $scope.$digest();
 274 | 
 275 |       // Act
 276 |       eventHandlers.call('tag-removed');
 277 |       $scope.$digest();
 278 | 
 279 |       // Assert
 280 |       expect(isSuggestionsBoxVisible()).toBe(false);
 281 |     });
 282 | 
 283 |     it('hides the suggestion box after adding the selected suggestion to the input field', () => {
 284 |       // Arrange
 285 |       loadSuggestions(2);
 286 |       suggestionList.select(0);
 287 | 
 288 |       // Act
 289 |       sendKeyDown(constants.KEYS.enter);
 290 |       $scope.$digest();
 291 | 
 292 |       // Assert
 293 |       expect(isSuggestionsBoxVisible()).toBe(false);
 294 |     });
 295 | 
 296 |     it('hides the suggestion box when the input field loses focus', () => {
 297 |       // Arrange
 298 |       suggestionList.visible = true;
 299 | 
 300 |       // Act
 301 |       eventHandlers.call('input-blur');
 302 | 
 303 |       // Assert
 304 |       expect(isSuggestionsBoxVisible()).toBe(false);
 305 |     });
 306 | 
 307 |     it('hides the suggestion box when a tag is added', () => {
 308 |       // Arrange
 309 |       suggestionList.visible = true;
 310 | 
 311 |       // Act
 312 |       eventHandlers.call('tag-added');
 313 | 
 314 |       // Assert
 315 |       expect(isSuggestionsBoxVisible()).toBe(false);
 316 |     });
 317 | 
 318 |     it('hides the suggestion box when an invalid tag is tried to be added', () => {
 319 |       // Arrange
 320 |       suggestionList.visible = true;
 321 | 
 322 |       // Act
 323 |       eventHandlers.call('invalid-tag');
 324 | 
 325 |       // Assert
 326 |       expect(isSuggestionsBoxVisible()).toBe(false);
 327 |     });
 328 | 
 329 |     it('adds the selected suggestion when the enter key is pressed and the suggestions box is visible', () => {
 330 |       // Arrange
 331 |       loadSuggestions(2);
 332 |       suggestionList.select(0);
 333 | 
 334 |       // Act
 335 |       sendKeyDown(constants.KEYS.enter);
 336 | 
 337 |       // Assert
 338 |       expect(tagsInput.addTag).toHaveBeenCalledWith({ text: 'Item1' });
 339 |     });
 340 | 
 341 |     it('adds the selected suggestion when the tab key is pressed and there is a suggestion selected', () => {
 342 |       // Arrange
 343 |       loadSuggestions(2);
 344 |       suggestionList.select(0);
 345 | 
 346 |       // Act
 347 |       sendKeyDown(constants.KEYS.tab);
 348 | 
 349 |       // Assert
 350 |       expect(tagsInput.addTag).toHaveBeenCalledWith({ text: 'Item1' });
 351 |     });
 352 | 
 353 |     it('adds a copy of the selected suggestion', () => {
 354 |       // Arrange
 355 |       loadSuggestions(2);
 356 |       suggestionList.select(0);
 357 |       let item = suggestionList.items[0];
 358 | 
 359 |       // Act
 360 |       isolateScope.addSuggestion();
 361 | 
 362 |       // Assert
 363 |       expect(tagsInput.addTag.calls.argsFor(0)[0]).not.toBe(item);
 364 |     });
 365 | 
 366 |     it('does not change the input value when the enter key is pressed and there is nothing selected', () => {
 367 |       // Arrange
 368 |       loadSuggestions(2);
 369 |       suggestionList.selected = null;
 370 | 
 371 |       // Act
 372 |       sendKeyDown(constants.KEYS.enter);
 373 | 
 374 |       // Assert
 375 |       expect(tagsInput.addTag).not.toHaveBeenCalled();
 376 |     });
 377 | 
 378 |     it('sets the selected suggestion to null after adding it to the input field', () => {
 379 |       // Arrange
 380 |       loadSuggestions(2);
 381 |       suggestionList.select(0);
 382 | 
 383 |       // Act
 384 |       isolateScope.addSuggestion();
 385 |       $scope.$digest();
 386 | 
 387 |       // Assert
 388 |       expect(suggestionList.selected).toBeNull();
 389 |     });
 390 | 
 391 |     it('does not call the load function after adding the selected suggestion to the input field', () => {
 392 |       // Arrange
 393 |       loadSuggestions(2);
 394 |       suggestionList.select(0);
 395 | 
 396 |       // Act
 397 |       sendKeyDown(constants.KEYS.enter);
 398 | 
 399 |       // Assert
 400 |       expect($scope.loadItems.calls.count()).toBe(1);
 401 |     });
 402 | 
 403 |     it('highlights the selected suggestion only', () => {
 404 |       // Arrange
 405 |       loadSuggestions(3);
 406 | 
 407 |       // Act
 408 |       suggestionList.select(1);
 409 |       $scope.$digest();
 410 | 
 411 |       // Assert
 412 |       expect(getSuggestion(0).hasClass('selected')).toBe(false);
 413 |       expect(getSuggestion(1).hasClass('selected')).toBe(true);
 414 |       expect(getSuggestion(2).hasClass('selected')).toBe(false);
 415 |     });
 416 | 
 417 |     it('discards all load calls but the last one', () => {
 418 |       // Arrange
 419 |       let deferred1 = $q.defer(), deferred2 = $q.defer(), deferred3 = $q.defer();
 420 |       let promises = [deferred1.promise, deferred2.promise, deferred3.promise];
 421 | 
 422 |       $scope.loadItems = jasmine.createSpy().and.callFake(() => {
 423 |         return promises.shift();
 424 |       });
 425 |       spyOn(suggestionList, 'show');
 426 | 
 427 |       // Act
 428 |       // First we need to register all promises
 429 |       suggestionList.load('foobar', tagsInput.getTags());
 430 |       $timeout.flush();
 431 | 
 432 |       suggestionList.load('foobar', tagsInput.getTags());
 433 |       $timeout.flush();
 434 | 
 435 |       suggestionList.load('foobar', tagsInput.getTags());
 436 |       $timeout.flush();
 437 | 
 438 |       // Now we resolve each promise which was previously created
 439 |       deferred1.resolve([{ text: 'Item1' }]);
 440 |       deferred2.resolve([{ text: 'Item2' }]);
 441 |       deferred3.resolve([{ text: 'Item3' }]);
 442 | 
 443 |       $scope.$digest();
 444 | 
 445 |       // Assert
 446 |       expect(suggestionList.show.calls.count()).toBe(1);
 447 |     });
 448 | 
 449 |     it('discards all load calls after the suggestion list is reset', () => {
 450 |       // Arrange
 451 |       spyOn(suggestionList, 'show');
 452 |       suggestionList.load('foobar', tagsInput.getTags());
 453 |       $timeout.flush();
 454 | 
 455 |       // Act
 456 |       suggestionList.reset();
 457 | 
 458 |       resolve([{ text: 'Item3'}]);
 459 | 
 460 |       // Assert
 461 |       expect(suggestionList.show).not.toHaveBeenCalled();
 462 |     });
 463 | 
 464 |     it('converts an array of strings into an array of objects', () => {
 465 |       // Arrange/Act
 466 |       loadSuggestions(['Item1', 'Item2', 'Item3']);
 467 | 
 468 |       // Assert
 469 |       expect(suggestionList.items).toEqual([
 470 |         { text: 'Item1' },
 471 |         { text: 'Item2' },
 472 |         { text: 'Item3' }
 473 |       ]);
 474 |     });
 475 | 
 476 |     describe('auto scrolling', () => {
 477 |       let style;
 478 | 
 479 |       beforeEach(() => {
 480 |         style = angular.element('<style> .suggestion-list { position: relative; overflow-y: auto; max-height: 100px }</style>').appendTo('head');
 481 |         element.appendTo('body');
 482 |       });
 483 | 
 484 |       afterEach(() => {
 485 |         style.remove();
 486 |         element.remove();
 487 |       });
 488 | 
 489 |       function isVisible(index) {
 490 |         let suggestion = getSuggestion(index);
 491 |         let container = suggestion.parent();
 492 | 
 493 |         return suggestion.prop('offsetTop') + suggestion.prop('offsetHeight') <= container.prop('clientHeight') + container.scrollTop() &&
 494 |                     suggestion.prop('offsetTop') >= container.scrollTop();
 495 |       }
 496 | 
 497 |       range(5).forEach(index => {
 498 |         index += 5;
 499 | 
 500 |         it('scrolls the container down so the selected suggestion is visible #' + index, () => {
 501 |           // Arrange
 502 |           loadSuggestions(10);
 503 | 
 504 |           // Act
 505 |           suggestionList.select(index);
 506 | 
 507 |           // Assert
 508 |           expect(isVisible(index)).toBe(true);
 509 |         });
 510 |       });
 511 | 
 512 |       range(5).forEach(index => {
 513 |         it('scrolls the container up so the selected suggestion is visible #' + index, () => {
 514 |           // Arrange
 515 |           loadSuggestions(10);
 516 |           getSuggestionsBox().find('ul').scrollTop(100);
 517 | 
 518 |           // Act
 519 |           suggestionList.select(index);
 520 | 
 521 |           // Assert
 522 |           expect(isVisible(index)).toBe(true);
 523 |         });
 524 |       });
 525 |     });
 526 |   });
 527 | 
 528 |   describe('navigation through suggestions', () => {
 529 |     beforeEach(() => {
 530 |       loadSuggestions(3);
 531 |     });
 532 | 
 533 |     describe('downward', () => {
 534 |       it('selects the next suggestion when the down arrow key is pressed and there\'s something selected', () => {
 535 |         // Arrange
 536 |         suggestionList.select(0);
 537 | 
 538 |         // Act
 539 |         sendKeyDown(constants.KEYS.down);
 540 | 
 541 |         // Assert
 542 |         expect(suggestionList.selected).toEqual({ text: 'Item2' });
 543 |       });
 544 | 
 545 |       it('selects the first suggestion when the down arrow key is pressed and the last item is selected', () => {
 546 |         // Arrange
 547 |         suggestionList.select(2);
 548 | 
 549 |         // Act
 550 |         sendKeyDown(constants.KEYS.down);
 551 | 
 552 |         // Assert
 553 |         expect(suggestionList.selected).toEqual({ text: 'Item1' });
 554 |       });
 555 |     });
 556 | 
 557 |     describe('upward', () => {
 558 |       it('selects the prior suggestion when the down up key is pressed and there\'s something selected', () => {
 559 |         // Arrange
 560 |         suggestionList.select(1);
 561 | 
 562 |         // Act
 563 |         sendKeyDown(constants.KEYS.up);
 564 | 
 565 |         // Assert
 566 |         expect(suggestionList.selected).toEqual({ text: 'Item1' });
 567 |       });
 568 | 
 569 |       it('selects the last suggestion when the up arrow key is pressed and the first item is selected', () => {
 570 |         // Arrange
 571 |         suggestionList.select(0);
 572 | 
 573 |         // Act
 574 |         sendKeyDown(constants.KEYS.up);
 575 | 
 576 |         // Assert
 577 |         expect(suggestionList.selected).toEqual({ text: 'Item3' });
 578 |       });
 579 |     });
 580 | 
 581 |     describe('mouse', () => {
 582 |       it('selects the suggestion under the mouse pointer', () => {
 583 |         // Act
 584 |         getSuggestion(1).mouseenter();
 585 | 
 586 |         // Assert
 587 |         expect(suggestionList.selected).toEqual({ text: 'Item2' });
 588 |       });
 589 | 
 590 |       it('adds the selected suggestion when a mouse click is triggered', () => {
 591 |         // Arrange
 592 |         suggestionList.selected = null;
 593 | 
 594 |         // Act
 595 |         getSuggestion(0).click();
 596 | 
 597 |         // Assert
 598 |         expect(tagsInput.addTag).toHaveBeenCalledWith({ text: 'Item1' });
 599 |       });
 600 |     });
 601 |   });
 602 | 
 603 |   describe('load-on-down-arrow option', () => {
 604 |     it('initializes the option to false', () => {
 605 |       // Arrange
 606 |       compile();
 607 | 
 608 |       // Assert
 609 |       expect(isolateScope.options.loadOnDownArrow).toBe(false);
 610 |     });
 611 | 
 612 |     describe('suggestion box is hidden', () => {
 613 |       beforeEach(() => {
 614 |         suggestionList.visible = false;
 615 |       });
 616 | 
 617 |       it('calls the load function passing the current tag text when the down arrow key is pressed and the option is true', () => {
 618 |         // Arrange
 619 |         compile('load-on-down-arrow="true"');
 620 |         tagsInput.getCurrentTagText.and.returnValue('ABC');
 621 | 
 622 |         // Act
 623 |         sendKeyDown(constants.KEYS.down);
 624 |         $timeout.flush();
 625 | 
 626 |         // Assert
 627 |         expect($scope.loadItems).toHaveBeenCalledWith('ABC');
 628 |       });
 629 | 
 630 |       it('doesn\'t call the load function when the down arrow key is pressed and the option is false', () => {
 631 |         // Arrange
 632 |         compile('load-on-down-arrow="false"');
 633 | 
 634 |         // Act
 635 |         sendKeyDown(constants.KEYS.down);
 636 |         $timeout.flush();
 637 | 
 638 |         // Assert
 639 |         expect($scope.loadItems).not.toHaveBeenCalled();
 640 |       });
 641 |     });
 642 | 
 643 |     describe('suggestion box is visible', () => {
 644 |       it('doesn\'t call the load function when the down arrow key is pressed', () => {
 645 |         // Arrange
 646 |         compile('load-on-down-arrow="true"');
 647 |         suggestionList.visible = true;
 648 | 
 649 |         // Act
 650 |         sendKeyDown(constants.KEYS.down);
 651 |         $timeout.flush();
 652 | 
 653 |         // Assert
 654 |         expect($scope.loadItems).not.toHaveBeenCalled();
 655 |       });
 656 |     });
 657 |   });
 658 | 
 659 |   describe('load-on-empty option', () => {
 660 |     it('initialize the option to false', () => {
 661 |       // Arrange/Act
 662 |       compile();
 663 | 
 664 |       // Assert
 665 |       expect(isolateScope.options.loadOnEmpty).toBe(false);
 666 |     });
 667 | 
 668 |     it('calls the load function when the input field becomes empty and the option is true', () => {
 669 |       // Arrange
 670 |       compile('load-on-empty="true"');
 671 | 
 672 |       // Act
 673 |       changeInputValue('');
 674 |       $timeout.flush();
 675 | 
 676 |       // Assert
 677 |       expect($scope.loadItems).toHaveBeenCalledWith('');
 678 |     });
 679 | 
 680 |     it('doesn\'t call the load function when the input field becomes empty and the option is false', () => {
 681 |       // Arrange
 682 |       compile('load-on-empty="false"');
 683 | 
 684 |       // Act
 685 |       changeInputValue('');
 686 |       $timeout.flush();
 687 | 
 688 |       // Assert
 689 |       expect($scope.loadItems).not.toHaveBeenCalled();
 690 |     });
 691 |   });
 692 | 
 693 |   describe('load-on-focus option', () => {
 694 |     it('initializes the option to false', () => {
 695 |       // Arrange/Act
 696 |       compile();
 697 | 
 698 |       // Assert
 699 |       expect(isolateScope.options.loadOnFocus).toBe(false);
 700 |     });
 701 | 
 702 |     it('calls the load function when the input element gains focus and the option is true', () => {
 703 |       // Arrange
 704 |       compile('load-on-focus="true"');
 705 |       tagsInput.getCurrentTagText.and.returnValue('ABC');
 706 | 
 707 |       // Act
 708 |       eventHandlers.call('input-focus');
 709 |       $timeout.flush();
 710 | 
 711 |       // Assert
 712 |       expect($scope.loadItems).toHaveBeenCalledWith('ABC');
 713 |     });
 714 | 
 715 |     it('doesn\' call the load function when the input element gains focus and the option is false', () => {
 716 |       // Arrange
 717 |       compile('load-on-focus="false"');
 718 |       tagsInput.getCurrentTagText.and.returnValue('ABC');
 719 | 
 720 |       // Act
 721 |       eventHandlers.call('input-focus');
 722 |       $timeout.flush();
 723 | 
 724 |       // Assert
 725 |       expect($scope.loadItems).not.toHaveBeenCalled();
 726 |     });
 727 |   });
 728 | 
 729 |   describe('debounce-delay option', () => {
 730 |     it('initializes the option to 100 milliseconds', () => {
 731 |       // Arrange/Act
 732 |       compile();
 733 | 
 734 |       // Assert
 735 |       expect(isolateScope.options.debounceDelay).toBe(100);
 736 |     });
 737 | 
 738 |     it('doesn\'t call the load function immediately', () => {
 739 |       // Arrange
 740 |       compile('debounce-delay="100"');
 741 | 
 742 |       // Act
 743 |       changeInputValue('A');
 744 |       changeInputValue('AB');
 745 |       changeInputValue('ABC');
 746 | 
 747 |       // Assert
 748 |       expect($scope.loadItems).not.toHaveBeenCalled();
 749 |     });
 750 | 
 751 |     it('calls the load function only after a delay has passed', () => {
 752 |       // Arrange
 753 |       compile('debounce-delay="100"');
 754 | 
 755 |       // Act
 756 |       changeInputValue('A');
 757 |       changeInputValue('AB');
 758 |       changeInputValue('ABC');
 759 | 
 760 |       $timeout.flush(100);
 761 | 
 762 |       // Assert
 763 |       expect($scope.loadItems).toHaveBeenCalledWith('ABC');
 764 |     });
 765 | 
 766 |     it('doesn\'t call the load function when the reset method is called', () => {
 767 |       // Arrange
 768 |       compile();
 769 |       changeInputValue('A');
 770 | 
 771 |       // Act
 772 |       suggestionList.reset();
 773 |       $timeout.flush();
 774 | 
 775 |       // Assert
 776 |       expect($scope.loadItems).not.toHaveBeenCalled();
 777 |     });
 778 |   });
 779 | 
 780 |   describe('min-length option', () => {
 781 |     it('initializes the option to 3', () => {
 782 |       // Arrange/Act
 783 |       compile();
 784 | 
 785 |       // Assert
 786 |       expect(isolateScope.options.minLength).toBe(3);
 787 |     });
 788 | 
 789 |     it('calls the load function only after the minimum amount of characters has been entered', () => {
 790 |       // Arrange
 791 |       compile('min-length="3"');
 792 | 
 793 |       // Act
 794 |       changeInputValue('A');
 795 |       changeInputValue('AB');
 796 |       changeInputValue('ABC');
 797 | 
 798 |       $timeout.flush();
 799 | 
 800 |       // Assert
 801 |       expect($scope.loadItems.calls.count()).toBe(1);
 802 |       expect($scope.loadItems.calls.argsFor(0)).toEqual(['ABC']);
 803 |     });
 804 | 
 805 |     it('doesn\'t call the load function when the minimum amount of characters isn\'t entered', () => {
 806 |       // Arrange
 807 |       compile('min-length="3"');
 808 | 
 809 |       // Act
 810 |       changeInputValue('A');
 811 |       changeInputValue('AB');
 812 | 
 813 |       $timeout.flush();
 814 | 
 815 |       // Assert
 816 |       expect($scope.loadItems).not.toHaveBeenCalled();
 817 |     });
 818 | 
 819 |     it('hides the suggestion box when the number of entered characters is less than the option value', () => {
 820 |       // Arrange
 821 |       compile('min-length="5"');
 822 |       suggestionList.show();
 823 | 
 824 |       // Act
 825 |       changeInputValue('ABCD');
 826 | 
 827 |       // Assert
 828 |       expect(isSuggestionsBoxVisible()).toBe(false);
 829 |     });
 830 |   });
 831 | 
 832 |   describe('highlight-matched-text option', () => {
 833 |     it('initializes the option to true', () => {
 834 |       // Arrange/Act
 835 |       compile();
 836 | 
 837 |       // Assert
 838 |       expect(isolateScope.options.highlightMatchedText).toBe(true);
 839 |     });
 840 | 
 841 |     it('highlights the matched text in the suggestions list', () => {
 842 |       // Arrange
 843 |       compile('highlight-matched-text="true"', 'min-length="1"');
 844 | 
 845 |       // Act
 846 |       loadSuggestions([
 847 |         { text: 'a' },
 848 |         { text: 'ab' },
 849 |         { text: 'ba' },
 850 |         { text: 'aba' },
 851 |         { text: 'bab' }
 852 |       ], 'a');
 853 | 
 854 |       // Assert
 855 |       expect(getSuggestionText(0)).toBe('<em>a</em>');
 856 |       expect(getSuggestionText(1)).toBe('<em>a</em>b');
 857 |       expect(getSuggestionText(2)).toBe('b<em>a</em>');
 858 |       expect(getSuggestionText(3)).toBe('<em>a</em>b<em>a</em>');
 859 |       expect(getSuggestionText(4)).toBe('b<em>a</em>b');
 860 |     });
 861 | 
 862 |     it('highlights the matched text in the suggestions list when it contains special chars', () => {
 863 |       // Arrange
 864 |       compile('highlight-matched-text="true"', 'min-length="1"');
 865 | 
 866 |       // Act
 867 |       loadSuggestions([{ text: 'a**b++c..' }], 'a**b++c..');
 868 | 
 869 |       // Assert
 870 |       expect(getSuggestionText(0)).toBe('<em>a**b++c..</em>');
 871 |     });
 872 | 
 873 |     it('doesn\'t highlight anything when the matching text is empty', () => {
 874 |       // Arrange
 875 |       compile('highlight-matched-text="true"', 'min-length="0"');
 876 | 
 877 |       // Act
 878 |       loadSuggestions([
 879 |         { text: 'a' },
 880 |         { text: 'ab' },
 881 |         { text: 'ba' },
 882 |         { text: 'aba' },
 883 |         { text: 'bab' }
 884 |       ], '');
 885 | 
 886 |       // Assert
 887 |       expect(getSuggestionText(0)).toBe('a');
 888 |       expect(getSuggestionText(1)).toBe('ab');
 889 |       expect(getSuggestionText(2)).toBe('ba');
 890 |       expect(getSuggestionText(3)).toBe('aba');
 891 |       expect(getSuggestionText(4)).toBe('bab');
 892 |     });
 893 | 
 894 |     it('doesn\'t highlight the matched text in the suggestions list when the option is false', () => {
 895 |       // Arrange
 896 |       compile('highlight-matched-text="false"', 'min-length="1"');
 897 | 
 898 |       // Act
 899 |       loadSuggestions([
 900 |         { text: 'a' },
 901 |         { text: 'ab' },
 902 |         { text: 'ba' },
 903 |         { text: 'aba' },
 904 |         { text: 'bab' }
 905 |       ], 'a');
 906 | 
 907 |       // Assert
 908 |       expect(getSuggestionText(0)).toBe('a');
 909 |       expect(getSuggestionText(1)).toBe('ab');
 910 |       expect(getSuggestionText(2)).toBe('ba');
 911 |       expect(getSuggestionText(3)).toBe('aba');
 912 |       expect(getSuggestionText(4)).toBe('bab');
 913 |     });
 914 | 
 915 |     it('encodes HTML characters in suggestions list', () => {
 916 |       // Act
 917 |       loadSuggestions([
 918 |         { text: '<Item 1>' },
 919 |         { text: 'Item <2>' },
 920 |         { text: 'Item &3' }
 921 |       ]);
 922 | 
 923 |       // Assert
 924 |       expect(getSuggestionText(0)).toBe('&lt;Item 1&gt;');
 925 |       expect(getSuggestionText(1)).toBe('Item &lt;2&gt;');
 926 |       expect(getSuggestionText(2)).toBe('Item &amp;3');
 927 |     });
 928 | 
 929 |     it('highlights encoded HTML characters in suggestions list', () => {
 930 |       // Arrange
 931 |       compile('highlight-matched-text="true"', 'min-length="1"');
 932 | 
 933 |       // Act
 934 |       loadSuggestions([
 935 |         { text: '<Item 1>' },
 936 |         { text: 'Item <2>' },
 937 |         { text: 'Item &3' }
 938 |       ], '>');
 939 | 
 940 |       // Assert
 941 |       expect(getSuggestionText(0)).toBe('&lt;Item 1<em>&gt;</em>');
 942 |       expect(getSuggestionText(1)).toBe('Item &lt;2<em>&gt;</em>');
 943 |       expect(getSuggestionText(2)).toBe('Item &amp;3');
 944 |     });
 945 | 
 946 |     it('doesn\'t highlight HTML entities in suggestions list', () => {
 947 |       // Arrange
 948 |       compile('highlight-matched-text="true"', 'min-length="1"');
 949 | 
 950 |       // Act
 951 |       loadSuggestions([
 952 |         { text: 'a&a' },
 953 |         { text: '&a' },
 954 |         { text: 'a&' }
 955 |       ], 'a');
 956 | 
 957 |       // Assert
 958 |       expect(getSuggestionText(0)).toBe('<em>a</em>&amp;<em>a</em>');
 959 |       expect(getSuggestionText(1)).toBe('&amp;<em>a</em>');
 960 |       expect(getSuggestionText(2)).toBe('<em>a</em>&amp;');
 961 |     });
 962 |   });
 963 | 
 964 |   describe('max-results-to-show option', () => {
 965 |     it('initializes the option to 10', () => {
 966 |       // Arrange/Act
 967 |       compile();
 968 | 
 969 |       // Assert
 970 |       expect(isolateScope.options.maxResultsToShow).toBe(10);
 971 |     });
 972 | 
 973 |     it('limits the number of results to be displayed at a time', () => {
 974 |       // Arrange
 975 |       compile('max-results-to-show="3"');
 976 | 
 977 |       // Act
 978 |       loadSuggestions(5);
 979 | 
 980 |       // Assert
 981 |       expect(getSuggestions().length).toBe(3);
 982 |       expect(getSuggestionText(0)).toBe('Item1');
 983 |       expect(getSuggestionText(1)).toBe('Item2');
 984 |       expect(getSuggestionText(2)).toBe('Item3');
 985 |     });
 986 |   });
 987 | 
 988 |   describe('select-first-match option', () => {
 989 |     it('initializes the option to true', () => {
 990 |       // Arrange/Act
 991 |       compile();
 992 | 
 993 |       // Assert
 994 |       expect(isolateScope.options.selectFirstMatch).toBe(true);
 995 |     });
 996 | 
 997 |     it('selects the first suggestion after the suggestion box is shown if the option is true', () => {
 998 |       // Arrange
 999 |       compile('select-first-match="true"');
1000 | 
1001 |       //Act
1002 |       loadSuggestions(3);
1003 | 
1004 |       // Assert
1005 |       expect(getSuggestion(0)).toHaveClass('selected');
1006 |       expect(getSuggestion(1)).not.toHaveClass('selected');
1007 |       expect(getSuggestion(2)).not.toHaveClass('selected');
1008 | 
1009 |     });
1010 | 
1011 |     it('doesn\'t select any suggestion after the suggestion box is shown if the option is false', () => {
1012 |       // Arrange
1013 |       compile('select-first-match="false"');
1014 | 
1015 |       //Act
1016 |       loadSuggestions(3);
1017 | 
1018 |       // Assert
1019 |       expect(getSuggestion(0)).not.toHaveClass('selected');
1020 |       expect(getSuggestion(1)).not.toHaveClass('selected');
1021 |       expect(getSuggestion(2)).not.toHaveClass('selected');
1022 | 
1023 |     });
1024 |   });
1025 | 
1026 |   describe('display-property option', () => {
1027 |     it('initializes the option to an empty string', () => {
1028 |       // Arrange/Act
1029 |       compile();
1030 | 
1031 |       // Assert
1032 |       expect(isolateScope.options.displayProperty).toBe('');
1033 |     });
1034 | 
1035 |     it('renders the correct display text', () => {
1036 |       // Arrange
1037 |       compile('display-property="label"');
1038 | 
1039 |       // Act
1040 |       loadSuggestions([
1041 |         { text: '1', label: 'Item1' },
1042 |         { text: '2', label: 'Item2' },
1043 |         { text: '3', label: 'Item3' }
1044 |       ]);
1045 | 
1046 |       // Assert
1047 |       expect(getSuggestions().length).toBe(3);
1048 |       expect(getSuggestionText(0)).toBe('Item1');
1049 |       expect(getSuggestionText(1)).toBe('Item2');
1050 |       expect(getSuggestionText(2)).toBe('Item3');
1051 |     });
1052 |   });
1053 | 
1054 |   describe('template option', () => {
1055 |     let $templateCache;
1056 | 
1057 |     function getSuggestionContent(index) {
1058 |       return getSuggestion(index)
1059 |         .find('ti-autocomplete-match > ng-include')
1060 |         .children()
1061 |         .removeAttr('class')
1062 |         .parent()
1063 |         .html();
1064 |     }
1065 | 
1066 |     function getSuggestionScope(index) {
1067 |       return getSuggestion(index)
1068 |         .find('ti-autocomplete-match > ng-include')
1069 |         .children()
1070 |         .scope();
1071 |     }
1072 | 
1073 |     beforeEach(() => {
1074 |       inject(_$templateCache_ => {
1075 |         $templateCache = _$templateCache_;
1076 |       });
1077 |     });
1078 | 
1079 |     it('initializes the option to the default template file', () => {
1080 |       expect(isolateScope.options.template).toBe('ngTagsInput/auto-complete-match.html');
1081 |     });
1082 | 
1083 |     it('loads and uses the provided template', () => {
1084 |       // Arrange
1085 |       $templateCache.put('customTemplate', '<span>{{data.id}}</span><span>{{data.text}}</span>');
1086 |       compile('template="customTemplate"');
1087 | 
1088 |       // Act
1089 |       loadSuggestions([
1090 |         { id: 1, text: 'Item1' },
1091 |         { id: 2, text: 'Item2' },
1092 |         { id: 3, text: 'Item3' }
1093 |       ]);
1094 | 
1095 |       // Assert
1096 |       expect(getSuggestionContent(0)).toBe('<span>1</span><span>Item1</span>');
1097 |       expect(getSuggestionContent(1)).toBe('<span>2</span><span>Item2</span>');
1098 |       expect(getSuggestionContent(2)).toBe('<span>3</span><span>Item3</span>');
1099 |     });
1100 | 
1101 |     it('makes the match data available to the template', () => {
1102 |       // Arrange
1103 |       compile();
1104 | 
1105 |       // Act
1106 |       loadSuggestions([
1107 |         { id: 1, text: 'Item1', image: 'item1.jpg' },
1108 |         { id: 2, text: 'Item2', image: 'item2.jpg' },
1109 |         { id: 3, text: 'Item3', image: 'item3.jpg' }
1110 |       ]);
1111 | 
1112 |       // Assert
1113 |       expect(getSuggestionScope(0).data).toEqual({ id: 1, text: 'Item1', image: 'item1.jpg' });
1114 |       expect(getSuggestionScope(1).data).toEqual({ id: 2, text: 'Item2', image: 'item2.jpg' });
1115 |       expect(getSuggestionScope(2).data).toEqual({ id: 3, text: 'Item3', image: 'item3.jpg' });
1116 |     });
1117 | 
1118 |     it('makes suggestions\' indexes available to the template', () => {
1119 |       // Arrange
1120 |       compile();
1121 | 
1122 |       // Act
1123 |       loadSuggestions(3);
1124 | 
1125 |       // Assert
1126 |       expect(getSuggestionScope(0).$index).toBe(0);
1127 |       expect(getSuggestionScope(1).$index).toBe(1);
1128 |       expect(getSuggestionScope(2).$index).toBe(2);
1129 |     });
1130 | 
1131 |     it('makes helper functions available to the template', () => {
1132 |       // Arrange
1133 |       compile();
1134 | 
1135 |       // Act
1136 |       loadSuggestions(1);
1137 | 
1138 |       // Assert
1139 |       let scope = getSuggestionScope(0);
1140 |       expect(scope.$highlight).not.toBeUndefined();
1141 |       expect(scope.$getDisplayText).not.toBeUndefined();
1142 |     });
1143 | 
1144 |     it('makes the provided scope available to the template', () => {
1145 |       // Arrange
1146 |       tagsInput.getTemplateScope.and.returnValue({ prop: 'foobar', method: jasmine.createSpy().and.returnValue(42) });
1147 |       compile();
1148 | 
1149 |       // Act
1150 |       loadSuggestions(1);
1151 | 
1152 |       // Assert
1153 |       expect(getSuggestionScope(0).$scope).toBeDefined();
1154 |       expect(getSuggestionScope(0).$scope.prop).toBe('foobar');
1155 |       expect(getSuggestionScope(0).$scope.method()).toBe(42);
1156 |     });
1157 |   });
1158 | 
1159 |   describe('match-class option', () => {
1160 |     it('allows custom CSS classes to be set for each match (object expression)', () => {
1161 |       // Arrange
1162 |       compile('match-class="{foo: $match.text == \'Item1\', bar: $match.text != \'Item1\'}"');
1163 | 
1164 |       // Act
1165 |       loadSuggestions(3);
1166 |       suggestionList.select(2);
1167 |       $scope.$digest();
1168 | 
1169 |       // Assert
1170 |       expect(getSuggestion(0)).toHaveClass('foo');
1171 |       expect(getSuggestion(1)).toHaveClass('bar');
1172 |       expect(getSuggestion(2)).toHaveClass('bar selected');
1173 |     });
1174 | 
1175 |     it('allows custom CSS classes to be set for each match (array expression)', () => {
1176 |       // Arrange
1177 |       compile('match-class="[\'foo\', \'bar\']"');
1178 | 
1179 |       // Act
1180 |       loadSuggestions(3);
1181 |       suggestionList.select(2);
1182 |       $scope.$digest();
1183 | 
1184 |       // Assert
1185 |       expect(getSuggestion(0)).toHaveClass('foo bar');
1186 |       expect(getSuggestion(1)).toHaveClass('foo bar');
1187 |       expect(getSuggestion(2)).toHaveClass('foo bar selected');
1188 |     });
1189 | 
1190 |     it('allows custom CSS classes to be set for each match (string expression)', () => {
1191 |       // Arrange
1192 |       compile('match-class="\'foo bar\'"');
1193 | 
1194 |       // Act
1195 |       loadSuggestions(3);
1196 |       suggestionList.select(2);
1197 |       $scope.$digest();
1198 | 
1199 |       // Assert
1200 |       expect(getSuggestion(0)).toHaveClass('foo bar');
1201 |       expect(getSuggestion(1)).toHaveClass('foo bar');
1202 |       expect(getSuggestion(2)).toHaveClass('foo bar selected');
1203 |     });
1204 | 
1205 |     it('provides the expression with the current match, its index and its state', () => {
1206 |       // Arrange
1207 |       $scope.callback = jasmine.createSpy();
1208 |       compile('match-class="callback($match, $index, $selected)"');
1209 | 
1210 |       // Act
1211 |       loadSuggestions(3);
1212 |       suggestionList.select(2);
1213 |       $scope.$digest();
1214 | 
1215 |       // Assert
1216 |       let calls = $scope.callback.calls;
1217 |       expect(calls.argsFor(calls.count() - 3)).toEqual([suggestionList.items[0], 0, false]);
1218 |       expect(calls.argsFor(calls.count() - 2)).toEqual([suggestionList.items[1], 1, false]);
1219 |       expect(calls.argsFor(calls.count() - 1)).toEqual([suggestionList.items[2], 2, true]);
1220 |     });
1221 |   });
1222 | 
1223 |   describe('keys propagation handling', () => {
1224 |     describe('hotkeys', () => {
1225 |       describe('suggestion box is visible', () => {
1226 |         beforeEach(() => {
1227 |           suggestionList.show();
1228 |         });
1229 | 
1230 |         it('prevents the down arrow keydown event from being propagated', () => {
1231 |           // Act
1232 |           let event = sendKeyDown(constants.KEYS.down);
1233 | 
1234 |           // Assert
1235 |           expect(event.isDefaultPrevented()).toBe(true);
1236 |           expect(event.isPropagationStopped()).toBe(true);
1237 |         });
1238 | 
1239 |         it('prevents the up arrow keydown event from being propagated', () => {
1240 |           // Act
1241 |           let event = sendKeyDown(constants.KEYS.up);
1242 | 
1243 |           // Assert
1244 |           expect(event.isDefaultPrevented()).toBe(true);
1245 |           expect(event.isPropagationStopped()).toBe(true);
1246 |         });
1247 | 
1248 |         it('prevents the enter keydown event from being propagated if there is a suggestion selected', () => {
1249 |           // Arrange
1250 |           suggestionList.selected = 'suggestion';
1251 | 
1252 |           // Act
1253 |           let event = sendKeyDown(constants.KEYS.enter);
1254 | 
1255 |           // Assert
1256 |           expect(event.isDefaultPrevented()).toBe(true);
1257 |           expect(event.isPropagationStopped()).toBe(true);
1258 |         });
1259 | 
1260 |         it('does not prevent the enter keydown event from begin propagated if there is no suggestion selected', () => {
1261 |           // Arrange
1262 |           suggestionList.selected = null;
1263 | 
1264 |           // Act
1265 |           let event = sendKeyDown(constants.KEYS.enter);
1266 | 
1267 |           // Assert
1268 |           expect(event.isDefaultPrevented()).toBe(false);
1269 |           expect(event.isPropagationStopped()).toBe(false);
1270 |         });
1271 | 
1272 |         it('prevents the tab keydown event from being propagated if there is a suggestion selected', () => {
1273 |           // Arrange
1274 |           suggestionList.selected = 'suggestion';
1275 | 
1276 |           // Act
1277 |           let event = sendKeyDown(constants.KEYS.tab);
1278 | 
1279 |           // Assert
1280 |           expect(event.isDefaultPrevented()).toBe(true);
1281 |           expect(event.isPropagationStopped()).toBe(true);
1282 |         });
1283 | 
1284 |         it('does not prevent the tab keydown event from being propagated if there is no suggestion selected', () => {
1285 |           // Arrange
1286 |           suggestionList.selected = null;
1287 | 
1288 |           // Act
1289 |           let event = sendKeyDown(constants.KEYS.tab);
1290 | 
1291 |           // Assert
1292 |           expect(event.isDefaultPrevented()).toBe(false);
1293 |           expect(event.isPropagationStopped()).toBe(false);
1294 |         });
1295 | 
1296 |         it('prevents the escape keydown event from being propagated', () => {
1297 |           // Act
1298 |           let event = sendKeyDown(constants.KEYS.escape);
1299 | 
1300 |           // Assert
1301 |           expect(event.isDefaultPrevented()).toBe(true);
1302 |           expect(event.isPropagationStopped()).toBe(true);
1303 |         });
1304 |       });
1305 | 
1306 |       describe('suggestion box is hidden', () => {
1307 |         it('does not prevent the keydown event from being propagated when a hotkey is pressed', () => {
1308 |           // Act
1309 |           let hotkeys = [constants.KEYS.enter, constants.KEYS.tab, constants.KEYS.escape, constants.KEYS.up, constants.KEYS.down];
1310 |           suggestionList.reset();
1311 | 
1312 |           // Act/Assert
1313 |           hotkeys.forEach(hotkey => {
1314 |             let event = sendKeyDown(hotkey);
1315 |             expect(event.isDefaultPrevented()).toBe(false);
1316 |             expect(event.isPropagationStopped()).toBe(false);
1317 |           });
1318 |         });
1319 |       });
1320 | 
1321 |       describe('modifier key is on', () => {
1322 |         it('does not prevent a hotkey from being propagated when a modifier is down', () => {
1323 |           // Arrange
1324 |           let hotkeys = [constants.KEYS.enter, constants.KEYS.tab, constants.KEYS.escape, constants.KEYS.up, constants.KEYS.down];
1325 |           suggestionList.show();
1326 | 
1327 |           // Act/Assert
1328 |           hotkeys.forEach(hotkey => {
1329 |             expect(sendKeyDown(hotkey, { shiftKey: true }).isDefaultPrevented()).toBe(false);
1330 |             expect(sendKeyDown(hotkey, { altKey: true }).isDefaultPrevented()).toBe(false);
1331 |             expect(sendKeyDown(hotkey, { ctrlKey: true }).isDefaultPrevented()).toBe(false);
1332 |             expect(sendKeyDown(hotkey, { metaKey: true }).isDefaultPrevented()).toBe(false);
1333 |           });
1334 |         });
1335 |       });
1336 |     });
1337 | 
1338 |     describe('non-hotkeys', () => {
1339 |       it('does not prevent non-hotkeys keystrokes from being propagated', () => {
1340 |         // Act
1341 |         let events = [sendKeyDown(65), sendKeyDown(66), sendKeyDown(67)];
1342 | 
1343 |         // Assert
1344 |         expect(events[0].isDefaultPrevented()).toBe(false);
1345 |         expect(events[0].isPropagationStopped()).toBe(false);
1346 | 
1347 |         expect(events[1].isDefaultPrevented()).toBe(false);
1348 |         expect(events[1].isPropagationStopped()).toBe(false);
1349 | 
1350 |         expect(events[2].isDefaultPrevented()).toBe(false);
1351 |         expect(events[2].isPropagationStopped()).toBe(false);
1352 |       });
1353 |     });
1354 |   });
1355 | });
1356 | 


--------------------------------------------------------------------------------