├── .editorconfig
├── .github
    └── ISSUE_TEMPLATE.md
├── .gitignore
├── .travis.yml
├── CHANGELOG.md
├── LICENSE.md
├── README.md
├── angular.json
├── browserslist
├── demo
    ├── app.module.ts
    ├── home
    │   ├── home.html
    │   ├── home.scss
    │   └── home.ts
    ├── index.html
    ├── main.ts
    └── style.css
├── docs
    └── custom-themes.md
├── favicon.ico
├── karma.conf.js
├── modules
    ├── components
    │   ├── dropdown
    │   │   ├── index.ts
    │   │   ├── tag-input-dropdown.component.ts
    │   │   └── tag-input-dropdown.template.html
    │   ├── icon
    │   │   ├── icon.html
    │   │   ├── icon.scss
    │   │   ├── icon.ts
    │   │   └── index.ts
    │   ├── index.ts
    │   ├── tag-input-form
    │   │   ├── index.ts
    │   │   ├── tag-input-form.component.ts
    │   │   ├── tag-input-form.style.scss
    │   │   └── tag-input-form.template.html
    │   ├── tag-input
    │   │   ├── animations.ts
    │   │   ├── index.ts
    │   │   ├── tag-input.spec.ts
    │   │   ├── tag-input.style.scss
    │   │   ├── tag-input.template.html
    │   │   ├── tag-input.ts
    │   │   └── tests
    │   │   │   └── testing-helpers.spec.ts
    │   └── tag
    │   │   ├── index.ts
    │   │   ├── tag-component.style.scss
    │   │   ├── tag-ripple.component.ts
    │   │   ├── tag.component.ts
    │   │   └── tag.template.html
    ├── core
    │   ├── accessor.ts
    │   ├── constants
    │   │   └── index.ts
    │   ├── helpers
    │   │   ├── event-like.ts
    │   │   ├── index.ts
    │   │   └── listen.ts
    │   ├── index.ts
    │   ├── pipes
    │   │   ├── highlight.pipe.spec.ts
    │   │   ├── highlight.pipe.ts
    │   │   └── index.ts
    │   ├── providers
    │   │   ├── drag-provider.ts
    │   │   ├── index.ts
    │   │   └── options-provider.ts
    │   ├── styles
    │   │   ├── components
    │   │   │   ├── _components.scss
    │   │   │   ├── _progress-bar.scss
    │   │   │   └── _tag.scss
    │   │   ├── core
    │   │   │   ├── _colors.scss
    │   │   │   ├── _core.scss
    │   │   │   ├── _mixins.scss
    │   │   │   ├── _palette.scss
    │   │   │   └── _variables.scss
    │   │   └── themes
    │   │   │   ├── _bootstrap-theme.scss
    │   │   │   ├── _bootstrap3-info-theme.scss
    │   │   │   ├── _dark-theme.scss
    │   │   │   ├── _default-theme.scss
    │   │   │   ├── _minimal-theme.scss
    │   │   │   └── _themes.scss
    │   └── tag-model.ts
    ├── defaults.ts
    ├── index.ts
    └── tag-input.module.ts
├── package-lock.json
├── package.json
├── polyfills.ts
├── test.ts
├── tsconfig.app.json
├── tsconfig.json
├── tsconfig.spec.json
└── tslint.json


/.editorconfig:
--------------------------------------------------------------------------------
 1 | # Editor configuration, see https://editorconfig.org
 2 | root = true
 3 | 
 4 | [*]
 5 | charset = utf-8
 6 | indent_style = space
 7 | indent_size = 2
 8 | insert_final_newline = true
 9 | trim_trailing_whitespace = true
10 | 
11 | [*.md]
12 | max_line_length = off
13 | trim_trailing_whitespace = false
14 | 


--------------------------------------------------------------------------------
/.github/ISSUE_TEMPLATE.md:
--------------------------------------------------------------------------------
 1 | <!--
 2 | DON'T REMOVE THE TEMPLATE
 3 | IF YOU DON'T FILL OUT THE FOLLOWING INFORMATION WE WILL CLOSE YOUR ISSUE WITHOUT INVESTIGATING
 4 | -->
 5 | 
 6 | PLEASE MAKE SURE THAT:
 7 | - you searched similar issues online (9/10 issues in this repo are solved by googling, so please...do it)
 8 | - you provide an online demo I can see without having to replicate your environment
 9 | - you help me by debugging your issue, and if you can't, do go on filling out this form
10 | 
11 | **I'm submitting a ...**  (check one with "x")
12 | ```
13 | [ ] bug report => search github for a similar issue or PR before submitting
14 | [ ] support request/question
15 | 
16 | Notice: feature requests will be ignored, submit a PR if you'd like
17 | ```
18 | 
19 | 
20 | **Current behavior**
21 | <!-- Describe how the bug manifests. -->
22 | 
23 | 
24 | 
25 | **Expected behavior**
26 | <!-- Describe what the behavior would be without the bug. -->
27 | 
28 | 
29 | 
30 | **Minimal reproduction of the problem with instructions (if applicable)**
31 | <!--
32 | If the current behavior is a bug or you can illustrate your feature request better with an example,
33 | please provide the *STEPS TO REPRODUCE*.
34 | -->
35 | 
36 | 
37 | **What do you use to build your app?. Please specify the version**
38 | <!-- SystemJS, Webpack, angular-cli, etc... -->
39 | 
40 | 
41 | **Angular version:** 
42 | <!-- Check whether this is still an issue in the most recent Angular version -->
43 | 
44 | 
45 | 
46 | **ngx-chips version:**
47 | <!-- Check whether this is still an issue in the most recent ngx-chips version -->
48 | 
49 | 
50 | **Browser:** [all | Chrome XX | Firefox XX | IE XX | Safari XX | Mobile Chrome XX | Android X.X Web Browser | iOS XX Safari | iOS XX UIWebView | iOS XX WKWebView ]
51 | <!-- All browsers where this could be reproduced -->
52 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # See http://help.github.com/ignore-files/ for more about ignoring files.
 2 | 
 3 | # compiled output
 4 | /dist
 5 | /tmp
 6 | /out-tsc
 7 | # Only exists if Bazel was run
 8 | /bazel-out
 9 | 
10 | # dependencies
11 | /node_modules
12 | 
13 | # profiling files
14 | chrome-profiler-events.json
15 | speed-measure-plugin.json
16 | 
17 | # IDEs and editors
18 | /.idea
19 | .project
20 | .classpath
21 | .c9/
22 | *.launch
23 | .settings/
24 | *.sublime-workspace
25 | 
26 | # IDE - VSCode
27 | .vscode/*
28 | !.vscode/settings.json
29 | !.vscode/tasks.json
30 | !.vscode/launch.json
31 | !.vscode/extensions.json
32 | .history/*
33 | 
34 | # misc
35 | /.sass-cache
36 | /connect.lock
37 | /coverage
38 | /libpeerconnection.log
39 | npm-debug.log
40 | yarn-error.log
41 | testem.log
42 | /typings
43 | .angular
44 | 
45 | # System Files
46 | .DS_Store
47 | Thumbs.db
48 | 


--------------------------------------------------------------------------------
/.travis.yml:
--------------------------------------------------------------------------------
 1 | language: node_js
 2 | dist: trusty
 3 | sudo: required
 4 | node_js:
 5 |   - "10"
 6 |   - "12"
 7 | 
 8 | before_install:
 9 |  - export CHROME_BIN=/usr/bin/google-chrome
10 |  - export DISPLAY=:99.0
11 |  - sh -e /etc/init.d/xvfb start
12 | 
13 | addons:
14 |   chrome: stable
15 | 
16 | script:
17 |   - npm test
18 |   - npm run codecov
19 | 
20 | notifications:
21 |   email: false
22 | 


--------------------------------------------------------------------------------
/CHANGELOG.md:
--------------------------------------------------------------------------------
 1 | ## 1.2.9
 2 | 
 3 | ### Breaking Changes
 4 | - `readonly` is not part of the inputs, and is now a property that needs to be added to each tag in order to make it readonly
 5 | 
 6 | ### Bug fixes
 7 | - removing tag should not trigger `onSelect`
 8 | - OnRemoving does not trigger by backspace and drag remove
 9 | - Added max-width for very long tags, and ellipsis at the end
10 | 
11 | ## 1.2.3
12 | 
13 | ### Features
14 | - Added `onAdding` and `onRemoving` hooks
15 | 
16 | ### Maintenance
17 | - removed `Renderer`
18 | 
19 | ## 1.1.5-beta.0
20 | 
21 | ### Features
22 | - Added `dropZone` attribute to drag and drop tags
23 | 
24 | ### Demo
25 | - Fixed missing animations module
26 | 
27 | ## 0.7.0
28 | 
29 | ### Breaking changes
30 | - The autocomplete properties `autocompleteItems` and `showDropdownIfEmpty` are now part of the `tag-input-dropdown`
31 | component instead.
32 | 
33 | ### Refactoring
34 | - Lots of code moved around and refactored
35 | 
36 | ## 0.4.8
37 | 
38 | ### Bug Fixes
39 | - Custom theme's style is back
40 | 
41 | ### Improvements
42 | - Custom theme now uses <template> - lots of duplicate code removed as a result
43 | 


--------------------------------------------------------------------------------
/LICENSE.md:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2017 Giancarlo Buomprisco
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, 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,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # Tag Input Component for Angular [![Build Status](https://travis-ci.org/Gbuomprisco/ngx-chips.svg?branch=develop)](https://travis-ci.org/Gbuomprisco/ng2-tag-input) [![npm version](https://badge.fury.io/js/ngx-chips.svg)](https://badge.fury.io/js/ngx-chips)
  2 | 
  3 | This is a component for Angular >= 4. Design and API are blandly inspired by Angular Material's md-chips. Formerly called ng2-tag-input.
  4 | 
  5 | [![NPM](https://nodei.co/npm/ngx-chips.png?downloads=true&stars=true)](https://nodei.co/npm/ngx-chips/)
  6 | 
  7 | ## [Demo](https://angular-mfppay.stackblitz.io/)
  8 | 
  9 | Check out [the live demo](https://angular-mfppay.stackblitz.io/).
 10 | 
 11 | **NB**: This repository is currently unmaintained. Please fork or use Angular Material's chips module, it got better.
 12 | 
 13 | ## Getting Started
 14 | 
 15 |     npm i ngx-chips // OR
 16 |     yarn add ngx-chips
 17 | 
 18 | **Notice**: the latest version on NPM may not reflect the branch `master`. Open an issue and tag me if you need it to be published.
 19 | 
 20 | ## Configuration
 21 | 
 22 | Ensure you import the module and the dependencies:
 23 | 
 24 | ```javascript
 25 | import { TagInputModule } from 'ngx-chips';
 26 | import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; // this is needed!
 27 | import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 28 | 
 29 | @NgModule({
 30 |    imports: [
 31 |        TagInputModule, 
 32 |        BrowserAnimationsModule,
 33 |        FormsModule,
 34 |        ReactiveFormsModule
 35 |        ...OtherModules 
 36 |    ] // along with your other modules
 37 | })
 38 | export class AppModule {}
 39 | ```
 40 | 
 41 | ## API for TagInputComponent
 42 | 
 43 | #### Inputs
 44 | 
 45 | ##### ngModel OR use FormGroup/formControlName (required)
 46 | - **`ngModel`** - [**`string[] | TagModel[]`**] - Model of the component. Accepts an array of strings as input OR an array of objects.
 47 | 
 48 | If you do use an array of objects, make sure you:
 49 | - define two properties, `value` and `display`. `Value` will uniquely identify the items, `display` will be the value displayed.
 50 | - or, in alternative, provide the keys using the inputs `identifyBy` and `displayBy`
 51 | 
 52 | **Notice**: the items provided to the model won't change, but the items added to the model will have the format { display, value }. If you do provide `identifyBy` and `displayBy`, these will be used as format for the user-entered tags.
 53 | 
 54 | ---
 55 | 
 56 | #### Properties (optional)
 57 | **`placeholder`** - [**`?string`**]
 58 | 
 59 | String that sets the placeholder of the input for entering new terms.
 60 | 
 61 | 
 62 | **`secondaryPlaceholder`** - [**`?string`**]
 63 | 
 64 | String that sets the placeholder of the input for entering new terms when there are 0 items entered.
 65 | 
 66 | 
 67 | **`maxItems`** -  [**`?number`**]
 68 | 
 69 | Sets the maximum number of items it is possible to enter.
 70 | 
 71 | 
 72 | ~~**`readonly`**~~ - [**`?boolean`**] [REMOVED]
 73 | 
 74 | Please add a readonly attribute to each tag model as a truthy value instead.
 75 | 
 76 | Example:
 77 | ```
 78 | // TagModel
 79 | {
 80 |     display: 'display',
 81 |     value: 124242,
 82 |     readonly: true
 83 | }
 84 | ```
 85 | 
 86 | 
 87 | **`separatorKeyCodes`** - [**`?number[]`**]
 88 | 
 89 | Array of keyboard keys with which is possible to define the key for separating terms. By default, only Enter is the defined key.
 90 | 
 91 | 
 92 | **`separatorKeys`** - [**`?string[]`**]
 93 | 
 94 | Array of input characters with which is possible to define the key for separating terms. Default is empty. Can use with `separatorKeyCodes`, either one method matched will trigger tag separation.
 95 | 
 96 | 
 97 | ~~**`transform`**~~ - [**`?(item: string) => string`**] [REMOVED]
 98 | 
 99 | Please use `onAdding` instead. Just pass the value, transformed, to the Observable.
100 | 
101 | 
102 | **`inputId`** - [**`?string`**]
103 | 
104 | Custom ID assigned to the input
105 | 
106 | 
107 | **`inputClass`** - [**`?string`**]
108 | 
109 | Custom class assigned to the input
110 | 
111 | 
112 | **`clearOnBlur`** - [**`?boolean`**]
113 | 
114 | If set to true, it will clear the form's text on blur events
115 | 
116 | 
117 | **`hideForm`** - [**`?boolean`**]
118 | 
119 | If set to true, will remove the form from the component
120 | 
121 | 
122 | **`onTextChangeDebounce`** - [**`?number`**]
123 | 
124 | Number of ms for debouncing the `onTextChange` event (defaults to `250`)
125 | 
126 | 
127 | **`addOnBlur`** - [**`?boolean`**]
128 | 
129 | If set to `true`, will add an item when the form is blurred (defaults to `false`)
130 | 
131 | 
132 | **`addOnPaste`** - [**`?boolean`**]
133 | 
134 | If set to `true`, will add items pasted into the form's input  (defaults to `false`)
135 | 
136 | 
137 | **`pasteSplitPattern`** - [**`?string | RegExp`**]
138 | 
139 | Pattern used with the native method split() to separate patterns in the string pasted (defaults to `,`)
140 | 
141 | 
142 | **`blinkIfDupe`** - [**`?boolean`**]
143 | 
144 | If a duplicate item gets added, this will blink - giving the user a visual cue of where it is located (defaults to `true`)
145 | 
146 | 
147 | **`removable`** - [**`?boolean`**]
148 | 
149 | If set to `false`, it will not be possible to remove tags (defaults to `true`)
150 | 
151 | 
152 | **`editable`** (experimental) - [**`?boolean`**]
153 | 
154 | If set to `true`, it will be possible to edit the display value of the tags (defaults to `false`)
155 | 
156 | 
157 | **`allowDupes`** - [**`?boolean`**]
158 | 
159 | If set to `true`, it will be possible to add tags with the same value (defaults to `false`)
160 | 
161 | 
162 | **`modelAsStrings`** - [**`?boolean`**]
163 | 
164 | If set to `true`, all values added will be strings, and not objects (defaults to `false`)
165 | 
166 | 
167 | **`trimTags`** - [**`?boolean`**]
168 | 
169 | If set to `false`, the tags could contain leading and trailing spaces (defaults to `true`)
170 | 
171 | 
172 | **`inputText`** - [**`?string`**]
173 | 
174 | Property to bind text directly to the form's value.
175 | You can use it to change the text of the input at any time, or to just bind a value. Remember: use two-way data binding with this property.
176 | 
177 | 
178 | **`ripple`** - [**`?boolean`**]
179 | 
180 | Specifies whether the ripple effect should be visible or not (defaults to `true`)
181 | 
182 | 
183 | **`disable`** - [**`?boolean`**]
184 | 
185 | If set to `true`, the input will be disabled. Similar to `readonly` but with a visual effect.
186 | 
187 | *Notice**: this attribute was changed from 'disabled' to 'disable' in order to comply with Angular's compiler.
188 | 
189 | 
190 | **`tabindex`** - [**`?string`**]
191 | 
192 | If set, passes the specified tabindex to the form's input.
193 | 
194 | 
195 | **`dragZone`** - [**`?string`**]
196 | 
197 | If set, the input will be draggable. Also the input will be draggable to another form with the same dragZone value.
198 | 
199 | 
200 | **`animationDuration`** - [**`?{enter: string, leave: string}`**]
201 | 
202 | This option overwrites the default timing values for the animation. If you don't like the animation at all, just set both values to '0ms'.
203 | 
204 | The default value is `{enter: '250ms', leave: '150ms'}`
205 | 
206 | ---
207 | 
208 | ##### Validation (optional)
209 | **`validators`** - [**`?ValidatorFn[]`**]
210 | 
211 | An array of Validators (custom or Angular's) that will validate the tag before adding it to the list of items. It is possible to use multiple validators.
212 | 
213 | 
214 | **`asyncValidators`** - [**`?AsyncValidatorFn[]`**]
215 | 
216 | An array of AsyncValidators that will validate the tag before adding it to the list of items. It is possible to use multiple async validators.
217 | 
218 | 
219 | **`errorMessages`** - [**`?Object{error: message}`**]
220 | 
221 | An object whose key is the name of the error (ex. required) and the value is the message you want to display to your users
222 | 
223 | 
224 | **`onAdding`** - [**`?onAdding(tag: tagModel): Observable<TagModel>`**]
225 | 
226 | Hook to intercept when an item is being added. Needs to return an Observable.
227 | * You can modify the tag being added during the interception.
228 | 
229 | Example:
230 | ```javascript
231 |  public onAdding(tag: TagModel): Observable<TagModel> {
232 |     const confirm = window.confirm('Do you really want to add this tag?');
233 |     return Observable
234 |         .of(tag)
235 |         .filter(() => confirm);
236 | }
237 | ```
238 | 
239 | 
240 | **`onRemoving`** - [**`?onRemoving(tag: tagModel): Observable<TagModel>`**]
241 | 
242 | Hook to intercept when an item is being removed. Needs to return an Observable.
243 | Example:
244 | 
245 | ```javascript
246 | public onRemoving(tag: TagModel): Observable<TagModel> {
247 |         const confirm = window.confirm('Do you really want to remove this tag?');
248 |         return Observable
249 |             .of(tag)
250 |             .filter(() => confirm);
251 |     }
252 | ```
253 | 
254 | ---
255 | 
256 | ##### Autocomplete (optional)
257 | **`onlyFromAutocomplete`** - [**`?boolean`**]
258 | 
259 | If set to `true`, it will be possible to add new items only from the autocomplete dropdown
260 | 
261 | 
262 | ##### Tags as Objects (optional)
263 | **`identifyBy`** - [**`?any`**]
264 | 
265 | Any value you want your tag object to be defined by (defaults to `value`)
266 | 
267 | 
268 | **`displayBy`** - [**`?string`**]
269 | 
270 | The string displayed in a tag object (defaults to `display`)
271 | 
272 | 
273 | ---
274 | 
275 | #### Outputs (optional)
276 | **`onAdd`** - [**`?onAdd($event: string)`**]
277 | 
278 | Event fired when an item has been added
279 | 
280 | 
281 | **`onRemove`** - [**`?onRemove($event: string)`**]
282 | 
283 | Event fired when an item has been removed
284 | 
285 | 
286 | **`onSelect`** - [**`?onSelect($event: string)`**]
287 | 
288 | Event fired when an item has been selected
289 | 
290 | 
291 | **`onFocus`** - [**`?onFocus($event: string)`**]
292 | 
293 | Event fired when the input is focused - will return current input value
294 | 
295 | 
296 | **`onBlur`** - [**`?onBlur($event: string)`**]
297 | 
298 | Event fired when the input is blurred - will return current input value
299 | 
300 | 
301 | **`onTextChange`** - [**`?onTextChange($event: string)`**]
302 | 
303 | Event fired when the input value changes
304 | 
305 | 
306 | **`onPaste`** - [**`?onPaste($event: string)`**]
307 | 
308 | Event fired when the text is pasted into the input (only if `addOnPaste` is set to `true`)
309 | 
310 | 
311 | **`onValidationError`** - [**`?onValidationError($event: string)`**]
312 | 
313 | Event fired when the validation fails
314 | 
315 | 
316 | **`onTagEdited`** - [**`?onTagEdited($event: TagModel)`**]
317 | 
318 | Event fired when a tag is edited
319 | 
320 | 
321 | ## API for TagInputDropdownComponent
322 | TagInputDropdownComponent is a proxy between `ngx-chips` and `ng2-material-dropdown`.
323 | 
324 | **`autocompleteObservable`** - [**`(text: string) => Observable<Response>`**]
325 | 
326 | A function that takes a string (current input value) and returns an Observable (ex. `http.get()`) with an array of items wit the same structure as `autocompleteItems` (see below). Make sure you retain the scope of your class or function when using this property.
327 | It can be used to populate the autocomplete with items coming from an async request.
328 | 
329 | 
330 | **`showDropdownIfEmpty`** - [**`?boolean`**]
331 | 
332 | If set to `true`, the dropdown of the autocomplete will be shown as soon as the user focuses on the form
333 | 
334 | 
335 | **`keepOpen`** - [**`?boolean`**]
336 | 
337 | To use in conjunction with `showDropdownIfEmpty`. If set to `false`, the dropdown will not reopen automatically after adding a new tag. (defaults to `true`).
338 | 
339 | 
340 | **`autocompleteItems`** - [**`?string[] | AutoCompleteModel[]`**]
341 | 
342 | An array of items to populate the autocomplete dropdown
343 | 
344 | 
345 | **`offset`** - [**`?string`**]
346 | 
347 | Offset to adjust the position of the dropdown with absolute values (defaults to `'50 0'`)
348 | 
349 | 
350 | **`focusFirstElement`** - [**`?boolean`**]
351 | 
352 | If set to `true`, the first item of the dropdown will be automatically focused (defaults to `false`)
353 | 
354 | 
355 | **`minimumTextLength`** - [**`?number`**]
356 | 
357 | Minimum text length in order to display the autocomplete dropdown (defaults to `1`)
358 | 
359 | 
360 | **`limitItemsTo`** - [**`?number`**]
361 | 
362 | Number of items to display in the autocomplete dropdown
363 | 
364 | 
365 | **`identifyBy`** - [**`?string`**]
366 | 
367 | Just like for `tag-input`, this property defines the property of the value displayed of the object passed to the autocomplete
368 | 
369 | 
370 | **`displayBy`** - [**`?string`**]
371 | 
372 | Just like for `tag-input`, this property defines the property of the unique value of the object passed to the autocomplete
373 | 
374 | 
375 | **`matchingFn`** - [**`?matchingFn(value: string, target: TagModel): boolean`**]
376 | 
377 | Use this property if you are not happy with the default matching and want to provide your own implementation. The first value is the value
378 | of the input text, the second value corresponds to the value of each autocomplete item passed to the component
379 | 
380 | 
381 | **`appendToBody`** - [**`?boolean`**]
382 | 
383 | If set to `false`, the dropdown will not be appended to the body, but will remain in its parent element. Useful when using the components inside popups or dropdowns. Defaults to `true`.
384 | 
385 | **`dynamicUpdate`** - [**`?boolean`**]
386 | 
387 | If set to `false`, the dropdown will not try to set the position according to its position in the page, but will be fixed. Defaults to `true`.
388 | 
389 | **`zIndex`** - [**`?number`**]
390 | 
391 | Manually set the zIndex of the dropdown. Defaults to `100`.
392 | 
393 | ---
394 | 
395 | 
396 | The property `autocompleteItems` can be an array of strings or objects. Interface for `AutoCompleteModel` (just like `TagModel)` is:
397 | 
398 | ```javascript
399 | interface AutoCompleteModel {
400 |    value: any;
401 |    display: string;
402 | }
403 | ```
404 | 
405 | The input text will be matched against both the properties.
406 | 
407 | More options to customise the dropdown will follow.
408 | 
409 | ### Basic Example
410 | 
411 | ```javascript
412 | @Component({
413 |     selector: 'app',
414 |     template: `<tag-input [(ngModel)]='items'></tag-input>`
415 | });
416 | export class App {
417 |     items = ['Pizza', 'Pasta', 'Parmesan'];
418 | }
419 | ```
420 | 
421 | ```html
422 | <tag-input [(ngModel)]='items'></tag-input>
423 | ```
424 | 
425 | ### Advanced usage
426 | 
427 | #### Using an array of objects
428 | 
429 | ```html
430 | // itemsAsObjects = [{value: 0, display: 'Angular'}, {value: 1, display: 'React'}];
431 | <tag-input [ngModel]="itemsAsObjects"></tag-input>
432 | ```
433 | 
434 | 
435 | #### Using an array of with custom `identifyBy` and `displayBy`
436 | ```html
437 | // itemsAsObjects = [{id: 0, name: 'Angular'}, {id: 1, name: 'React'}];
438 | <tag-input [ngModel]="itemsAsObjects" [identifyBy]="'id'" [displayBy]="'name'"></tag-input>
439 | ```
440 | 
441 | 
442 | #### Editable tags
443 | ```html
444 | <tag-input [(ngModel)]='items' [editable]='true' (onTagEdited)="onTagEdited($event)"></tag-input>
445 | ```
446 | 
447 | 
448 | #### Static Tags (not removable)
449 | ```html
450 | <tag-input [(ngModel)]='items' [removable]='false'></tag-input>
451 | ```
452 | 
453 | 
454 | #### Max number of items
455 | ```html
456 | <tag-input [(ngModel)]='items' [maxItems]='5'></tag-input>
457 | ```
458 | 
459 | If the value of the model will contain more tags than `maxItems`, `maxItems` will be replaced with the current size of the model.
460 | 
461 | 
462 | #### Autocomplete
463 | ```html
464 | <tag-input [ngModel]="['@item']">
465 |        <tag-input-dropdown [autocompleteItems]="[{display: 'Item1', value: 0}, 'item2', 'item3']">
466 |        </tag-input-dropdown>
467 | </tag-input>
468 | ```
469 | 
470 | This will accept items only from the autocomplete dropdown:
471 | 
472 | ```html
473 | <tag-input [ngModel]="['@item']"
474 |            [onlyFromAutocomplete]="true">
475 |     <tag-input-dropdown [showDropdownIfEmpty]="true"
476 |                         [autocompleteItems]="['iTem1', 'item2', 'item3']">
477 |     </tag-input-dropdown>
478 | </tag-input>
479 | ```
480 | 
481 | 
482 | ##### Define a template for your menu items
483 | ```html
484 | <tag-input [ngModel]="['@item']"
485 |            [onlyFromAutocomplete]="true">
486 |     <tag-input-dropdown [showDropdownIfEmpty]="true"
487 |                         [autocompleteItems]="['iTem1', 'item2', 'item3']">
488 |         <ng-template let-item="item" let-index="index">
489 |             {{ index }}: {{ item.display }}
490 |         </ng-template>
491 |     </tag-input-dropdown>
492 | </tag-input>
493 | ```
494 | 
495 | 
496 | ##### Populate items using an Observable
497 | ```javascript
498 | public requestAutocompleteItems = (text: string): Observable<Response> => {
499 |     const url = `https://my.api.com/search?q=${text}`;
500 |     return this.http
501 |         .get(url)
502 |         .map(data => data.json());
503 | };
504 | ```
505 | 
506 | ```html
507 | <tag-input [ngModel]="['@item']">
508 |     <tag-input-dropdown [autocompleteObservable]='requestAutocompleteItems'></tag-input-dropdown>
509 | </tag-input>
510 | ```
511 | 
512 | 
513 | #### Additional keys to separate tags
514 | If you want to use more keys to separate items, add them to separatorKeys as an array of keyboard key codes.
515 | 
516 | ```html
517 | <tag-input [(ngModel)]='items' [separatorKeyCodes]="[32]"></tag-input>
518 | ```
519 | 
520 | 
521 | #### Validation
522 | 
523 | Create some validation methods in your component:
524 | 
525 | ```javascript
526 | class MyComponent {
527 |     private startsWithAt(control: FormControl) {
528 |         if (control.value.charAt(0) !== '@') {
529 |             return {
530 |                 'startsWithAt@': true
531 |             };
532 |         }
533 | 
534 |         return null;
535 |     }
536 | 
537 |     private endsWith$(control: FormControl) {
538 |         if (control.value.charAt(control.value.length - 1) !== '$') {
539 |             return {
540 |                 'endsWith$': true
541 |             };
542 |         }
543 | 
544 |         return null;
545 |     }
546 | 
547 |     public validators = [this.startsWithAt, this.endsWith$];
548 | 
549 |     public errorMessages = {
550 |         'startsWithAt@': 'Your items need to start with "@"',
551 |         'endsWith$': 'Your items need to end with "$"'
552 |     };
553 | }
554 | ```
555 | 
556 | Pass them to the tag-input component:
557 | 
558 | ```html
559 | <tag-input [ngModel]="['@item']"
560 |            [errorMessages]="errorMessages"
561 |            [validators]="validators">
562 | </tag-input>
563 | ```
564 | 
565 | 
566 | #### Events
567 | Set up some methods that will run when its relative event is fired.
568 | 
569 | ```html
570 | <tag-input [(ngModel)]='items'
571 |            (onBlur)="onInputBlurred($event)"
572 |            (onFocus)="onInputFocused($event)"
573 |            (onSelect)="onSelected($event)"
574 |            (onRemove)="onItemRemoved($event)"
575 |            (onTextChange)="onTextChange($event)"
576 |            (onAdd)="onItemAdded($event)">
577 | </tag-input>
578 | ```
579 | 
580 | 
581 | ~~#### Readonly
582 | If readonly is passed to the tag-input, it won't be possible to select, add and remove items.~~ [REMOVED]
583 | 
584 | ```html
585 | <tag-input [ngModel]="['Javascript', 'Typescript']" [readonly]="true"></tag-input>
586 | ```
587 | 
588 | 
589 | #### Custom items template
590 | Define your own template, but remember to set up the needed events using the `input` reference.
591 | 
592 | ```html
593 | <tag-input [ngModel]="['@item']" [modelAsStrings]="true" #input>
594 |     <ng-template let-item="item" let-index="index"> <!-- DEFINE HERE YOUR TEMPLATE -->
595 |         <span>
596 |             <!-- YOU MAY ACTUALLY DISPLAY WHATEVER YOU WANT IF YOU PASS AN OBJECT AS ITEM -->
597 |             <!-- ex. item.myDisplayValue -->
598 | 
599 |             item: {{ item }}
600 |         </span>
601 |         <delete-icon (click)="input.removeItem(item, index)"></delete-icon>
602 |     </ng-template>
603 | </tag-input>
604 | ```
605 | 
606 | #### Add default values
607 | If you use many instances of the component and want to set some values by default for all of them, import the module and use `withDefaults`:
608 | 
609 | ```javascript
610 | import { TagInputModule } from 'ngx-chips';
611 | 
612 | TagInputModule.withDefaults({
613 |     tagInput: {
614 |         placeholder: 'Add a new tag',
615 |         // add here other default values for tag-input
616 |     },
617 |     dropdown: {
618 |         displayBy: 'my-display-value',
619 |         // add here other default values for tag-input-dropdown
620 |     }
621 | });
622 | ```
623 | 
624 | #### Built-in Themes
625 | If you don't like how the default theme looks, or you just need it to fit in a different design, you can choose 4 new themes: `bootstrap3-info`, `bootstrap`, `dark` and `minimal`.
626 | 
627 | ```html
628 | <tag-input [(ngModel)]='items' theme='bootstrap3-info'></tag-input>
629 | <tag-input [(ngModel)]='items' theme='bootstrap'></tag-input>
630 | <tag-input [(ngModel)]='items' theme='minimal'></tag-input>
631 | <tag-input [(ngModel)]='items' theme='dark'></tag-input>
632 | ```
633 | 
634 | If you do not like these themes, [define your own theme](https://github.com/gbuomprisco/ngx-chips/blob/master/docs/custom-themes.md).
635 | 
636 | 
637 | ## FAQ
638 | 
639 | ### Does it work with Angular Universal?
640 | Yes.
641 | 
642 | 
643 | ### Does it work with Angular's Ahead of time compilation (AOT)?
644 | Yes.
645 | 
646 | 
647 | ### Does it work with Ionic 2?
648 | Yes.
649 | 
650 | 
651 | ### What version does it support?
652 | This component is supposed to work with the latest Angular versions.
653 | 
654 | If you have any issues, please do make sure you're not running a different version (or check this repo's package.json). Otherwise, please do open a new issue.
655 | 
656 | 
657 | ### Can I change the style?
658 | Yes - check out [how to create custom themes](https://github.com/gbuomprisco/ngx-chips/blob/master/docs/custom-themes.md).
659 | 
660 | 
661 | ### Something's broken?
662 | Please do open a new issue, but please check first that the same issue has not already been raised and that you are using the latest version :)
663 | 
664 | Please **do not** send private emails - Github Issues are supposed to help whoever might have your same issue, so it is the right place to help each other.
665 | 
666 | Issues not filled out with the provided templates are going to be closed. Please provide as much information as possible: do include a plunkr so that I can see what the problem is without having to replicate your environment on my laptop. The time I can spend on this is very limited.
667 | 
668 | No features requests will be considered, unless they are Pull Requests. I feel the component is already quite bloated, and I'd like on solving bugs and making this more reliable for everyone.
669 | 
670 | ## Contributing/Pull Requests
671 | Contributions are highly welcome! No, there is no guideline on how to do it. Just make sure to lint and unit test your changes. We'll figure out the rest with a couple of messages...
672 | 
673 | 
674 | ### Ok - cool stuff. But when will you fix the issue I created?
675 | Do please read this great post by Micheal Bromley: http://www.michaelbromley.co.uk/blog/529/why-i-havent-fixed-your-issue-yet. No, I don't have babies, but am not 24/7 coding :)
676 | 


--------------------------------------------------------------------------------
/angular.json:
--------------------------------------------------------------------------------
  1 | {
  2 |   "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  3 |   "version": 1,
  4 |   "newProjectRoot": "projects",
  5 |   "projects": {
  6 |     "demoApp": {
  7 |       "projectType": "application",
  8 |       "schematics": {
  9 |         "@schematics/angular:component": {
 10 |           "style": "css"
 11 |         }
 12 |       },
 13 |       "root": "",
 14 |       "sourceRoot": "demo",
 15 |       "prefix": "app",
 16 |       "architect": {
 17 |         "build": {
 18 |           "builder": "@angular-devkit/build-angular:browser",
 19 |           "options": {
 20 |             "aot": true,
 21 |             "outputPath": "dist",
 22 |             "index": "demo/index.html",
 23 |             "main": "demo/main.ts",
 24 |             "polyfills": "polyfills.ts",
 25 |             "tsConfig": "tsconfig.app.json",
 26 |             "assets": [
 27 |               "demo/favicon.ico"
 28 |             ],
 29 |             "styles": [
 30 |               "demo/style.css"
 31 |             ],
 32 |             "scripts": []
 33 |           },
 34 |           "configurations": {
 35 |             "production": {
 36 |               "optimization": true,
 37 |               "outputHashing": "all",
 38 |               "sourceMap": true,
 39 |               "extractCss": true,
 40 |               "namedChunks": false,
 41 |               "aot": true,
 42 |               "extractLicenses": true,
 43 |               "vendorChunk": false,
 44 |               "buildOptimizer": true,
 45 |               "budgets": [
 46 |                 {
 47 |                   "type": "initial",
 48 |                   "maximumWarning": "2mb",
 49 |                   "maximumError": "5mb"
 50 |                 },
 51 |                 {
 52 |                   "type": "anyComponentStyle",
 53 |                   "maximumWarning": "6kb"
 54 |                 }
 55 |               ]
 56 |             }
 57 |           }
 58 |         },
 59 |         "serve": {
 60 |           "builder": "@angular-devkit/build-angular:dev-server",
 61 |           "options": {
 62 |             "browserTarget": "demoApp:build"
 63 |           }
 64 |         },
 65 |         "test": {
 66 |           "builder": "@angular-devkit/build-angular:karma",
 67 |           "options": {
 68 |             "main": "test.ts",
 69 |             "tsConfig": "tsconfig.spec.json",
 70 |             "karmaConfig": "karma.conf.js",
 71 |             "assets": [],
 72 |             "styles": [],
 73 |             "scripts": [],
 74 |             "codeCoverageExclude": [
 75 |               "!/modules/"
 76 |             ]
 77 |           }
 78 |         },
 79 |         "lint": {
 80 |           "builder": "@angular-devkit/build-angular:tslint",
 81 |           "options": {
 82 |             "tsConfig": [
 83 |               "tsconfig.app.json",
 84 |               "tsconfig.spec.json"
 85 |             ],
 86 |             "exclude": [
 87 |               "**/node_modules/**"
 88 |             ]
 89 |           }
 90 |         }
 91 |       }
 92 |     },
 93 |     "modules": {
 94 |       "projectType": "application",
 95 |       "schematics": {
 96 |         "@schematics/angular:component": {
 97 |           "style": "css"
 98 |         }
 99 |       },
100 |       "root": "",
101 |       "sourceRoot": "modules",
102 |       "prefix": "app",
103 |       "architect": {
104 |         "build": {
105 |           "builder": "@angular-devkit/build-angular:browser",
106 |           "options": {
107 |             "aot": true,
108 |             "outputPath": "dist",
109 |             "index": "modules/index.ts",
110 |             "main": "modules/index.ts",
111 |             "polyfills": "polyfills.ts",
112 |             "tsConfig": "tsconfig.app.json",
113 |             "assets": [
114 |               "demo/favicon.ico"
115 |             ],
116 |             "styles": [
117 |               "demo/style.css"
118 |             ],
119 |             "scripts": []
120 |           },
121 |           "configurations": {
122 |             "production": {
123 |               "optimization": true,
124 |               "outputHashing": "all",
125 |               "sourceMap": true,
126 |               "extractCss": true,
127 |               "namedChunks": false,
128 |               "aot": true,
129 |               "extractLicenses": true,
130 |               "vendorChunk": false,
131 |               "buildOptimizer": true,
132 |               "budgets": [
133 |                 {
134 |                   "type": "initial",
135 |                   "maximumWarning": "2mb",
136 |                   "maximumError": "5mb"
137 |                 },
138 |                 {
139 |                   "type": "anyComponentStyle",
140 |                   "maximumWarning": "6kb"
141 |                 }
142 |               ]
143 |             }
144 |           }
145 |         },
146 |         "serve": {
147 |           "builder": "@angular-devkit/build-angular:dev-server",
148 |           "options": {
149 |             "browserTarget": "demoApp:build"
150 |           }
151 |         },
152 |         "test": {
153 |           "builder": "@angular-devkit/build-angular:karma",
154 |           "options": {
155 |             "main": "test.ts",
156 |             "tsConfig": "tsconfig.spec.json",
157 |             "karmaConfig": "karma.conf.js",
158 |             "assets": [],
159 |             "styles": [],
160 |             "scripts": []
161 |           }
162 |         },
163 |         "lint": {
164 |           "builder": "@angular-devkit/build-angular:tslint",
165 |           "options": {
166 |             "tsConfig": [
167 |               "tsconfig.app.json",
168 |               "tsconfig.spec.json"
169 |             ],
170 |             "exclude": [
171 |               "**/node_modules/**"
172 |             ]
173 |           }
174 |         }
175 |       }
176 |     }
177 |   },
178 |   "defaultProject": "demoApp"
179 | }


--------------------------------------------------------------------------------
/browserslist:
--------------------------------------------------------------------------------
 1 | # This file is used by the build system to adjust CSS and JS output to support the specified browsers below.
 2 | # For additional information regarding the format and rule options, please see:
 3 | # https://github.com/browserslist/browserslist#queries
 4 | 
 5 | # You can see what browsers were selected by your queries by running:
 6 | #   npx browserslist
 7 | 
 8 | > 0.5%
 9 | last 2 versions
10 | Firefox ESR
11 | not dead
12 | not IE 9-11 # For IE 9-11 support, remove 'not'.


--------------------------------------------------------------------------------
/demo/app.module.ts:
--------------------------------------------------------------------------------
 1 | 
 2 | import { NgModule } from '@angular/core';
 3 | import { BrowserModule } from '@angular/platform-browser';
 4 | import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 5 | import { TagInputModule } from '../modules';
 6 | import { Home } from './home/home';
 7 | import { CommonModule } from '@angular/common';
 8 | import { HttpClientModule } from '@angular/common/http';
 9 | import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
10 | 
11 | TagInputModule.withDefaults({
12 |     tagInput: {
13 |         placeholder: 'Add new tag'
14 |     }
15 | });
16 | 
17 | @NgModule({
18 |     imports: [
19 |         BrowserModule,
20 |         BrowserAnimationsModule,
21 |         CommonModule,
22 |         HttpClientModule,
23 |         FormsModule,
24 |         ReactiveFormsModule,
25 |         TagInputModule
26 |     ],
27 |     declarations: [Home],
28 |     bootstrap: [Home],
29 |     entryComponents: [Home]
30 | })
31 | export class AppModule { }
32 | 


--------------------------------------------------------------------------------
/demo/home/home.html:
--------------------------------------------------------------------------------
  1 | <main>
  2 |     <div class="home-container">
  3 |         <div>
  4 |             <h3>Simple Input with two items</h3>
  5 |             <tag-input [(ngModel)]="items"
  6 |                        (onSelect)="onSelect($event)"
  7 |                        [modelAsStrings]="true">
  8 |             </tag-input>
  9 |         </div>
 10 | 
 11 |         <div>
 12 |             <h3>Partially editable input with two items as objects</h3>
 13 |             <tag-input [(ngModel)]="itemsAsObjects"
 14 |                        [identifyBy]="'id'"
 15 |                        [displayBy]="'name'"></tag-input>
 16 |         </div>
 17 | 
 18 |         <div>
 19 |             <h3>Simple Input with not removable items</h3>
 20 |             <tag-input [ngModel]="items" [removable]="false"></tag-input>
 21 |         </div>
 22 | 
 23 |         <div>
 24 |             <h3>Simple Input with editable items</h3>
 25 |             <tag-input [(ngModel)]="items"
 26 |                        [editable]="true"
 27 |                        (onTagEdited)="onTagEdited($event)">
 28 |             </tag-input>
 29 |         </div>
 30 | 
 31 |         <div>
 32 |             <h3>Simple Input with editable items as objects</h3>
 33 |             {{itemsAsObjects|json}}
 34 |             <tag-input [(ngModel)]="itemsAsObjects"
 35 |                        [editable]="true"
 36 |                        [identifyBy]="'id'"
 37 |                        [displayBy]="'name'">
 38 |             </tag-input>
 39 |         </div>
 40 | 
 41 |         <div>
 42 |             <h3>Input tag that allows max 3 tags</h3>
 43 |             <tag-input [ngModel]="['Javascript', 'Typescript']"
 44 |                        [maxItems]="3"
 45 |                        [ripple]="false"
 46 |                        placeholder="Insert a new item">
 47 |             </tag-input>
 48 |         </div>
 49 | 
 50 |         <div>
 51 |             <h3>An input which requires all tags to start with '@' and end with '$'</h3>
 52 |             <tag-input [ngModel]="['@item']"
 53 |                        [errorMessages]="errorMessages"
 54 |                        [validators]="validators">
 55 |                 <tag-input-dropdown [autocompleteItems]="['@item$', 'item']">
 56 |                 </tag-input-dropdown>
 57 |             </tag-input>
 58 |         </div>
 59 | 
 60 |         <div>
 61 |             <h3>An input which will transform the value of all added tags prepending '@' to the tag</h3>
 62 |             <tag-input [ngModel]="['@item']" [onAdding]="transform">
 63 |             </tag-input>
 64 |         </div>
 65 | 
 66 |         <div>
 67 |             <h3>Tags within an autocomplete component (clear on blur events)</h3>
 68 |             <tag-input [ngModel]="['@item']"
 69 |                        [clearOnBlur]="true">
 70 |                 <tag-input-dropdown [focusFirstElement]="true" [autocompleteItems]="autocompleteItems">
 71 |                 </tag-input-dropdown>
 72 |             </tag-input>
 73 |         </div>
 74 | 
 75 |         <div>
 76 |             <h3>Tags accepting only items from an autocomplete</h3>
 77 |             <tag-input [ngModel]="['@item']"
 78 |                        [onlyFromAutocomplete]="true">
 79 |                 <tag-input-dropdown [showDropdownIfEmpty]="true"
 80 |                                     [dynamicUpdate]="false"
 81 |                                     [focusFirstElement]="true"
 82 |                                     [displayBy]="'value'"
 83 |                                     [identifyBy]="'id'"
 84 |                                     [autocompleteItems]="autocompleteItemsAsObjects">
 85 |                     <ng-template let-item="item" let-index="index">
 86 |                         ({{ index }}) {{ item.id }}: {{ item.value }}
 87 |                     </ng-template>
 88 |                 </tag-input-dropdown>
 89 |             </tag-input>
 90 |         </div>
 91 | 
 92 |         <div>
 93 |             <h3>Tags accepting only items from an autocomplete using a remote endpoint</h3>
 94 |             <tag-input [ngModel]="[]"
 95 |                        [placeholder]="'Enter a new repo'"
 96 |                        [onTextChangeDebounce]="500"
 97 |                        [secondaryPlaceholder]="'Search in Github'"
 98 |                        [onlyFromAutocomplete]="true">
 99 |                 <tag-input-dropdown
100 |                     [autocompleteObservable]="requestAutocompleteItems"
101 |                     [minimumTextLength]="0">
102 |                     <ng-template let-item="item" let-index="index">
103 |                         {{ item.display }}
104 |                     </ng-template>
105 |                 </tag-input-dropdown>
106 |             </tag-input>
107 |         </div>
108 | 
109 |         <div>
110 |             <h3>Tags accepting only items from an autocomplete using an observable and showing dropdown without entering text</h3>
111 |             <tag-input [ngModel]="items" [onlyFromAutocomplete]="true">
112 |                 <tag-input-dropdown
113 |                     [showDropdownIfEmpty]="true"
114 |                     [autocompleteObservable]="requestAutocompleteItemsFake">
115 |                 </tag-input-dropdown>
116 |             </tag-input>
117 |         </div>
118 | 
119 |         <div>
120 |             <h3>Tags dropdown with last provided</h3>
121 |             <tag-input [ngModel]="[]"
122 |                        [placeholder]="'Enter a new repo'"
123 |                        [secondaryPlaceholder]="'Search in Github'"
124 |                        [onlyFromAutocomplete]="true">
125 |                 <tag-input-dropdown [autocompleteObservable]="requestAutocompleteItems">
126 |                     <ng-template let-item="item" let-index="index" let-last="last">
127 |                         ({{ index }}) {{ item.id }}: {{ item.value }} # {{ last }}
128 |                     </ng-template>
129 |                 </tag-input-dropdown>
130 |             </tag-input>
131 |         </div>
132 | 
133 |         <div>
134 |             <h3>An input which allows adding items by pressing the key "space" of your keyboard</h3>
135 |             <tag-input [ngModel]="['@item']"
136 |                        [inputClass]="'myinput'"
137 |                        [inputId]="'myinputId'"
138 |                        [separatorKeyCodes]="[32, 188]"
139 |             >
140 |             </tag-input>
141 |         </div>
142 | 
143 |         <div>
144 |             <h3>Tags custom template</h3>
145 |             <tag-input [ngModel]="['@item']"
146 |                        [modelAsStrings]="true"
147 |                        #input
148 |                        (onTextChange)="onTextChange($event)">
149 |                 <ng-template item-template let-item="item" let-index="index">
150 |                     <span>
151 |                         item: {{ item }}
152 |                     </span>
153 | 
154 |                     <span (click)="input.removeItem(item, index)" class="ng2-tag__remove-button">
155 |                         x
156 |                     </span>
157 |                 </ng-template>
158 |             </tag-input>
159 |         </div>
160 | 
161 |         <div style="z-index: 1100; background: #fafafa">
162 |             <h3>Input with custom item template and custom dropdown item template</h3>
163 |             {{ itemsAsObjects | json }}
164 |             <tag-input [(ngModel)]="itemsAsObjects"
165 |                        [displayBy]="'name'"
166 |                        [identifyBy]="'id'">
167 |                 <ng-template let-item="item">
168 |                     tag: {{ item.name }}
169 |                 </ng-template>
170 |                 <tag-input-dropdown
171 |                     [autocompleteItems]="autocompleteItemsAsObjects"
172 |                     [dynamicUpdate]="false"
173 |                     [zIndex]="10000"
174 |                     [displayBy]="'value'"
175 |                     [identifyBy]="'id'">
176 |                     <ng-template let-item="item" let-index="index">
177 |                         dropdown: {{ item.value }}
178 |                     </ng-template>
179 |                 </tag-input-dropdown>
180 |             </tag-input>
181 |         </div>
182 | 
183 |         <div>
184 |             <h3>Tags within a form element with outputs</h3>
185 |             <form>
186 |                 <tag-input
187 |                     (onBlur)="onBlur($event)"
188 |                     (onFocus)="onFocus($event)"
189 |                     (onTextChange)="onTextChange($event)"
190 |                     (onValidationError)="onValidationError($event)"
191 |                     [ngModel]="['@item']"
192 |                     name="items"></tag-input>
193 |             </form>
194 |         </div>
195 | 
196 |         <div>
197 |             <h3>Tags within a form group</h3>
198 |             <form [formGroup]="form">
199 |                 <tag-input
200 |                     [disable]="true"
201 |                     [formControlName]="'chips'"
202 |                     name="items">
203 |                 </tag-input>
204 |             </form>
205 |         </div>
206 | 
207 |         <div>
208 |             <h3>Tags with theme minimal</h3>
209 |             <form>
210 |                 <tag-input
211 |                     [theme]="'minimal'"
212 |                     [ngModel]="['@item']"
213 |                     name="items"></tag-input>
214 |             </form>
215 |         </div>
216 | 
217 |         <div>
218 |             <h3>Tags with theme dark and pasteable items</h3>
219 |             <form>
220 |                 <tag-input
221 |                     [addOnPaste]="true"
222 |                     [pasteSplitPattern]="'-'"
223 |                     [theme]="'dark'"
224 |                     [ngModel]="['@item']"
225 |                     name="items"></tag-input>
226 |             </form>
227 |         </div>
228 | 
229 |         <div>
230 |             <h3>Tags with Bootstrap theme</h3>
231 |             <form>
232 |                 <tag-input
233 |                     [theme]="'bootstrap'"
234 |                     [ngModel]="['@item']"
235 |                     name="items">
236 |                 </tag-input>
237 |             </form>
238 |         </div>
239 | 
240 |         <div>
241 |             <h3>Tags with user-defined Foundation theme</h3>
242 |             <tag-input [ngModel]="items"
243 |                        [theme]="'foundation-theme'"
244 |                        [modelAsStrings]="true">
245 |             </tag-input>
246 |         </div>
247 | 
248 |         <div>
249 |             <h3>Tags with Bootstrap 3 (info) theme</h3>
250 |             <form>
251 |                 <tag-input
252 |                     [theme]="'bootstrap3-info'"
253 |                     [ngModel]="['@item']"
254 |                     name="items">
255 |                 </tag-input>
256 |             </form>
257 |         </div>
258 | 
259 |         <div>
260 |             <h3>Simple Input that allows dupes</h3>
261 |             <tag-input [(ngModel)]="items" [allowDupes]="true"></tag-input>
262 |         </div>
263 | 
264 |         <div>
265 |             <h3>Input with two-way data binding for its input text</h3>
266 | 
267 |             <input [(ngModel)]="inputText" (keyup.enter)="insertInputTag()"/>
268 | 
269 |             <tag-input [(ngModel)]="items" [(inputText)]="inputText"></tag-input>
270 |         </div>
271 | 
272 |         <div>
273 |             <h3>Disabled tag input</h3>
274 | 
275 |             Disable: <input type="checkbox" [(ngModel)]="disabled" />
276 | 
277 |             <tag-input [ngModel]="items"
278 |                        [disable]="disabled">
279 |                 <tag-input-dropdown [autocompleteItems]="autocompleteItems">
280 |                 </tag-input-dropdown>
281 |             </tag-input>
282 |         </div>
283 | 
284 |         <div>
285 |             <h3>Drag and drop</h3>
286 |             <tag-input  [(ngModel)]="dragAndDropExample"
287 |                         [modelAsStrings]="true"
288 |                         [dragZone]="'zone1'"
289 |                         [editable]="true">
290 |             </tag-input>
291 |         </div>
292 | 
293 |         <div>
294 |             <h3>Drag and drop (as string) can be moved to another tag-input (to the next)</h3>
295 |             <tag-input  [(ngModel)]="dragAndDropStrings"
296 |                         [modelAsStrings]="true"
297 |                         [dragZone]="'zone1'"
298 |                         [editable]="true">
299 |             </tag-input>
300 |         </div>
301 | 
302 |         <div>
303 |             <h3>Drag and drop (as object) can be moved to another tag-input (to the previous)</h3>
304 |             <tag-input  [(ngModel)]="dragAndDropObjects"
305 |                         [dragZone]="'zone1'"
306 |                         [editable]="true">
307 |             </tag-input>
308 |         </div>
309 | 
310 |         <div>
311 |             <h3>Confirm adding and removing tags with Observables</h3>
312 |             <tag-input [ngModel]="['item1']"
313 |                        [dragZone]="'zone1'"
314 |                        [modelAsStrings]="true"
315 |                        [onRemoving]="onRemoving"
316 |                        [onAdding]="onAdding">
317 |             </tag-input>
318 |         </div>
319 | 
320 |         <div>
321 |             <h3>Form using an async validator</h3>
322 |             <tag-input [ngModel]="['item1']"
323 |                        [errorMessages]="asyncErrorMessages"
324 |                        [addOnPaste]="true"
325 |                        [asyncValidators]="asyncValidators">
326 |                 <tag-input-dropdown [autocompleteItems]="['1','2']"></tag-input-dropdown>
327 |             </tag-input>
328 |         </div>
329 | 
330 |         <div>
331 |             {{ items | json }}
332 |             <h3>Autocomplete items using onAdding</h3>
333 |             <tag-input [(ngModel)]="items" [onlyFromAutocomplete]="true" [onAdding]="asyncOnAdding">
334 |                 <tag-input-dropdown
335 |                     [autocompleteItems]="autocompleteItemsAsObjects"
336 |                     [displayBy]="'value'"
337 |                     [identifyBy]="'id'">
338 |                 </tag-input-dropdown>
339 |             </tag-input>
340 |         </div>
341 |     </div>
342 | </main>
343 | 


--------------------------------------------------------------------------------
/demo/home/home.scss:
--------------------------------------------------------------------------------
 1 | @import "../../modules/core/styles/core/_core.scss";
 2 | 
 3 | $foundation-primary: #1779ba;
 4 | $foundation-primary-dark: darken($foundation-primary, 10%);
 5 | 
 6 | $foundation-theme: (
 7 |     container-border-bottom: 1px solid $foundation-primary
 8 | );
 9 | 
10 | $foundation-tag-theme: (
11 |     background: $foundation-primary,
12 |     background-focused: $foundation-primary-dark,
13 |     background-active: $foundation-primary-dark,
14 |     background-hover: $foundation-primary-dark,
15 |     color: #fff,
16 |     color-hover: #fff,
17 |     border-radius: 2px
18 | );
19 | 
20 | $foundation-icon-theme: (
21 |     fill: #fff,
22 |     fill-focus: #eee,
23 |     transition: all 0.35s
24 | );
25 | 
26 | :ng-deep .ng2-tag-input.foundation-theme {
27 |     @include tag-input-theme($foundation-theme);
28 | }
29 | 
30 | :ng-deep .ng2-tag-input.foundation-theme tag {
31 |     @include tag-theme($foundation-tag-theme);
32 | }
33 | 
34 | :ng-deep .ng2-tag-input.foundation-theme tag delete-icon {
35 |     @include icon-theme($foundation-icon-theme);
36 | }
37 | 
38 | 


--------------------------------------------------------------------------------
/demo/home/home.ts:
--------------------------------------------------------------------------------
  1 | import {Component} from '@angular/core';
  2 | import { HttpClient } from '@angular/common/http';
  3 | import {FormBuilder, FormControl, FormGroup} from '@angular/forms';
  4 | import {filter, map} from 'rxjs/operators';
  5 | import {Observable, of} from 'rxjs';
  6 | 
  7 | @Component({
  8 |     selector: 'app',
  9 |     styleUrls: ['./home.scss'],
 10 |     templateUrl: './home.html'
 11 | })
 12 | export class Home {
 13 |     form: FormGroup;
 14 | 
 15 |     constructor(private http: HttpClient) {
 16 |         this.form = new FormBuilder().group({
 17 |             chips: [['chip'], []]
 18 |         });
 19 |     }
 20 | 
 21 |     disabled = true;
 22 | 
 23 |     items = ['Javascript', 'Typescript'];
 24 | 
 25 |     inputText = 'text';
 26 | 
 27 |     itemsAsObjects = [{id: 0, name: 'Angular', readonly: true}, {id: 1, name: 'React'}];
 28 | 
 29 |     autocompleteItems = ['Javascript', 'Typescript', 'Rust', 'Go'];
 30 | 
 31 |     autocompleteItemsAsObjects = [
 32 |         {value: 'Item1', id: 0, extra: 0},
 33 |         {value: 'item2', id: 1, extra: 1},
 34 |         'item3'
 35 |     ];
 36 | 
 37 |     dragAndDropExample = ['C#', 'Java'];
 38 | 
 39 |     dragAndDropObjects = [{display: 'Javascript', value: 'Javascript'}, {display: 'Typescript', value: 'Typescript'}];
 40 |     dragAndDropStrings = ['CoffeScript', 'Scala.js'];
 41 | 
 42 |     public requestAutocompleteItems = (text: string): Observable<any> => {
 43 |         const url = `https://api.github.com/search/repositories?q=${text}`;
 44 |         return this.http
 45 |             .get<any>(url)
 46 |             .pipe(map(items => items.map(item => item.full_name)));
 47 |     }
 48 | 
 49 |     public requestAutocompleteItemsFake = (text: string): Observable<string[]> => {
 50 |         return of([
 51 |             'item1', 'item2', 'item3'
 52 |         ]);
 53 |     }
 54 | 
 55 |     public options = {
 56 |         readonly: undefined,
 57 |         placeholder: '+ Tag'
 58 |     };
 59 | 
 60 |     public onAdd(item) {
 61 |         console.log('tag added: value is ' + item);
 62 |     }
 63 | 
 64 |     public onRemove(item) {
 65 |         console.log('tag removed: value is ' + item);
 66 |     }
 67 | 
 68 |     public onSelect(item) {
 69 |         console.log('tag selected: value is ' + item);
 70 |     }
 71 | 
 72 |     public onFocus(item) {
 73 |         console.log('input focused: current value is ' + item);
 74 |     }
 75 | 
 76 |     public onTextChange(text) {
 77 |         console.log('text changed: value is ' + text);
 78 |     }
 79 | 
 80 |     public onBlur(item) {
 81 |         console.log('input blurred: current value is ' + item);
 82 |     }
 83 | 
 84 |     public onTagEdited(item) {
 85 |         console.log('tag edited: current value is ' + item);
 86 |     }
 87 | 
 88 |     public onValidationError(item) {
 89 |         console.log('invalid tag ' + item);
 90 |     }
 91 | 
 92 |     public transform(value: string): Observable<object> {
 93 |         const item = {display: `@${value}`, value: `@${value}`};
 94 |         return of(item);
 95 |     }
 96 | 
 97 |     private startsWithAt(control: FormControl) {
 98 |         if (control.value.charAt(0) !== '@') {
 99 |             return {
100 |                 'startsWithAt@': true
101 |             };
102 |         }
103 | 
104 |         return null;
105 |     }
106 | 
107 |     private endsWith$(control: FormControl) {
108 |         if (control.value.charAt(control.value.length - 1) !== '$') {
109 |             return {
110 |                 'endsWith$': true
111 |             };
112 |         }
113 | 
114 |         return null;
115 |     }
116 | 
117 |     private validateAsync(control: FormControl): Promise<any> {
118 |         return new Promise(resolve => {
119 |             const value = control.value;
120 |             const result: any = isNaN(value) ? {
121 |                 isNan: true
122 |             } : null;
123 | 
124 |             setTimeout(() => {
125 |                 resolve(result);
126 |             }, 400);
127 |         });
128 |     }
129 | 
130 |     public asyncErrorMessages = {
131 |         isNan: 'Please only add numbers'
132 |     };
133 | 
134 |     public validators = [this.startsWithAt, this.endsWith$];
135 | 
136 |     public asyncValidators = [this.validateAsync];
137 | 
138 |     public errorMessages = {
139 |         'startsWithAt@': 'Your items need to start with \'@\'',
140 |         'endsWith$': 'Your items need to end with \'$\''
141 |     };
142 | 
143 |     public onAdding(tag): Observable<any> {
144 |         const confirm = window.confirm('Do you really want to add this tag?');
145 |         return of(tag)
146 |             .pipe(filter(() => confirm));
147 |     }
148 | 
149 |     public onRemoving(tag): Observable<any> {
150 |         const confirm = window.confirm('Do you really want to remove this tag?');
151 |         return of(tag)
152 |             .pipe(filter(() => confirm));
153 |     }
154 | 
155 |     public asyncOnAdding(tag): Observable<any> {
156 |         const confirm = window.confirm('Do you really want to add this tag?');
157 |         return of(tag)
158 |             .pipe(filter(() => confirm));
159 |     }
160 | 
161 |     public insertInputTag(): void {
162 |         if (this.inputText) {
163 |             this.items.push(this.inputText);
164 | 
165 |             this.inputText = '';
166 |         }
167 |     }
168 | }
169 | 


--------------------------------------------------------------------------------
/demo/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <meta charset=UTF-8>
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1">
 6 |     <title>Ngx Chips Demo</title>
 7 |     <link href='https://fonts.googleapis.com/css?family=Roboto:400,500,700,300' rel='stylesheet' type='text/css'>
 8 | 
 9 |     <base href="/">
10 |   </head>
11 |   <body>
12 | 
13 |     <app>
14 |       Loading...
15 |     </app>
16 |   </body>
17 | </html>
18 | 


--------------------------------------------------------------------------------
/demo/main.ts:
--------------------------------------------------------------------------------
1 | import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
2 | import { AppModule } from './app.module';
3 | 
4 | 
5 | platformBrowserDynamic().bootstrapModule(AppModule)
6 |   .catch(err => console.error(err));
7 | 


--------------------------------------------------------------------------------
/demo/style.css:
--------------------------------------------------------------------------------
 1 | html, body, h1, h2, h3 {
 2 |   font-family: "Roboto";
 3 | }
 4 | 
 5 | .tag-input-container {
 6 |     width: 50%;
 7 | }
 8 | 
 9 | .options {
10 |     display: flex;
11 |     flex-direction: row;
12 |     margin: 2em 0;
13 | }
14 | 
15 | .options label {
16 |     margin-right: 1em;
17 | }
18 | 
19 | .home-container {
20 |     padding: 2em;
21 | }
22 | 
23 | .flex {
24 |     display: flex;
25 | }


--------------------------------------------------------------------------------
/docs/custom-themes.md:
--------------------------------------------------------------------------------
 1 | # Creating Custom Themes
 2 | 
 3 | ### Define the name of your theme
 4 | 
 5 | We will be calling this new theme `foundation-theme`, inspired by Zurb's Foundation:
 6 | 
 7 | ```html
 8 | <tag-input [ngModel]="items"
 9 |            [theme]="'foundation-theme'">
10 | </tag-input>
11 | ```
12 | 
13 | ### Define the style for the new theme
14 | 
15 | Let's say we created the file `foundation-themes.scss`. We will need to:
16 | - import the core styles from the `ng2-tag-input` package
17 | - define our themes for container, tag and icon (if you want)
18 | - apply the new themes
19 | 
20 | #### Importing the core styles
21 | In order to get the mixins to style the component, you should first import them:
22 | 
23 | ```scss
24 | @import "~node_modules/ngx-chips/core/styles/core/_core.scss";
25 | ```
26 | 
27 | In order to understand what to define in your theme - [check out the sass mixins](https://github.com/gbuomprisco/ng2-tag-input/blob/master/modules/core/styles/core/_mixins.scss)
28 | 
29 | #### Defining a theme
30 | 
31 | Once the mixins are imported, you can use them to define new themes:
32 | 
33 | ```scss
34 | $foundation-theme: (
35 |     container-border-bottom: 1px solid $foundation-primary
36 | );
37 | ```
38 | 
39 | You can find all the mixin's possible values here.
40 | 
41 | #### Applying the mixins
42 | The theme's name will be attached to the .ng2-tag-input class. In this way, we can combine the selectors, and define the new theme:
43 | 
44 | ```scss
45 | :ng-deep .ng2-tag-input.foundation-theme {
46 |     @include tag-input-theme($foundation-theme);
47 | }
48 | ```
49 | 
50 | #### Example theme
51 | 
52 | ```scss
53 | @import "~node_modules/ngx-chips/core/styles/core/_core.scss";
54 | 
55 | $foundation-primary: #1779ba;
56 | $foundation-primary-dark: darken($foundation-primary, 10%);
57 | 
58 | // this is the container's theme
59 | $foundation-theme: (
60 |     container-border-bottom: 1px solid $foundation-primary
61 | );
62 | 
63 | // this is the tag's theme
64 | $foundation-tag-theme: (
65 |     background: $foundation-primary,
66 |     background-focused: $foundation-primary-dark,
67 |     background-active: $foundation-primary-dark,
68 |     background-hover: $foundation-primary-dark,
69 |     color: #fff,
70 |     color-hover: #fff,
71 |     border-radius: 2px
72 | );
73 | 
74 | // this is the delete icon's theme
75 | $foundation-icon-theme: (
76 |     fill: #fff,
77 |     fill-focus: #eee,
78 |     transition: all 0.35s
79 | );
80 | 
81 | // apply theme to the container
82 | ::ng-deep tag-input .ng2-tag-input.foundation-theme {
83 |     @include tag-input-theme($foundation-theme);
84 | }
85 | 
86 | // apply theme to the tags
87 | ::ng-deep tag-input .ng2-tag-input.foundation-theme tag {
88 |     @include tag-theme($foundation-tag-theme);
89 | }
90 | 
91 | // apply theme to the delete icon
92 | ::ng-deep tag-input .ng2-tag-input.foundation-theme tag delete-icon {
93 |     @include icon-theme($foundation-icon-theme);
94 | }
95 | ```
96 | 


--------------------------------------------------------------------------------
/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Gbuomprisco/ngx-chips/8e34983e49b0e595336a3c84a0e50946c98f1bdf/favicon.ico


--------------------------------------------------------------------------------
/karma.conf.js:
--------------------------------------------------------------------------------
 1 | // Karma configuration file, see link for more information
 2 | // https://karma-runner.github.io/1.0/config/configuration-file.html
 3 | 
 4 | module.exports = function (config) {
 5 |   config.set({
 6 |     basePath: '',
 7 |     frameworks: ['jasmine', '@angular-devkit/build-angular'],
 8 |     plugins: [
 9 |       require('karma-jasmine'),
10 |       require('karma-chrome-launcher'),
11 |       require('karma-jasmine-html-reporter'),
12 |       require('karma-coverage-istanbul-reporter'),
13 |       require('@angular-devkit/build-angular/plugins/karma')
14 |     ],
15 |     client: {
16 |       clearContext: false // leave Jasmine Spec Runner output visible in browser
17 |     },
18 |     coverageIstanbulReporter: {
19 |       dir: require('path').join(__dirname, './coverage'),
20 |       reports: ['html', 'lcovonly', 'text-summary'],
21 |       fixWebpackSourcePaths: true
22 |     },
23 |     reporters: ['progress', 'kjhtml'],
24 |     port: 9876,
25 |     colors: true,
26 |     logLevel: config.LOG_INFO,
27 |     autoWatch: true,
28 |     browsers: ['Chrome'],
29 |     singleRun: false,
30 |     restartOnFileChange: true
31 |   });
32 | };
33 | 


--------------------------------------------------------------------------------
/modules/components/dropdown/index.ts:
--------------------------------------------------------------------------------
1 | export { TagInputDropdown } from './tag-input-dropdown.component';
2 | 


--------------------------------------------------------------------------------
/modules/components/dropdown/tag-input-dropdown.component.ts:
--------------------------------------------------------------------------------
  1 | import {
  2 |   Component,
  3 |   ContentChildren,
  4 |   EventEmitter,
  5 |   HostListener,
  6 |   Injector,
  7 |   Input,
  8 |   QueryList,
  9 |   TemplateRef,
 10 |   ViewChild,
 11 |   AfterViewInit
 12 | } from '@angular/core';
 13 | 
 14 | // rx
 15 | import { Observable } from 'rxjs';
 16 | import { filter, first, debounceTime, distinctUntilChanged } from 'rxjs/operators';
 17 | 
 18 | import { Ng2Dropdown, Ng2MenuItem } from 'ng2-material-dropdown';
 19 | import { defaults } from '../../defaults';
 20 | import { TagInputComponent } from '../tag-input/tag-input';
 21 | import {TagModel} from '../../core/tag-model';
 22 | 
 23 | @Component({
 24 |   selector: 'tag-input-dropdown',
 25 |   templateUrl: './tag-input-dropdown.template.html'
 26 | })
 27 | export class TagInputDropdown implements AfterViewInit {
 28 |   /**
 29 |    * @name dropdown
 30 |    */
 31 |   @ViewChild(Ng2Dropdown) public dropdown: Ng2Dropdown;
 32 | 
 33 |   /**
 34 |    * @name menuTemplate
 35 |    * @desc reference to the template if provided by the user
 36 |    */
 37 |   @ContentChildren(TemplateRef) public templates: QueryList<TemplateRef<any>>;
 38 | 
 39 |   /**
 40 |    * @name offset
 41 |    */
 42 |   @Input() public offset: string = defaults.dropdown.offset;
 43 | 
 44 |   /**
 45 |    * @name focusFirstElement
 46 |    */
 47 |   @Input() public focusFirstElement = defaults.dropdown.focusFirstElement;
 48 | 
 49 |   /**
 50 |    * - show autocomplete dropdown if the value of input is empty
 51 |    * @name showDropdownIfEmpty
 52 |    */
 53 |   @Input() public showDropdownIfEmpty = defaults.dropdown.showDropdownIfEmpty;
 54 | 
 55 |   /**
 56 |    * @description observable passed as input which populates the autocomplete items
 57 |    * @name autocompleteObservable
 58 |    */
 59 |   @Input() public autocompleteObservable: (text: string) => Observable<any>;
 60 | 
 61 |   /**
 62 |    * - desc minimum text length in order to display the autocomplete dropdown
 63 |    * @name minimumTextLength
 64 |    */
 65 |   @Input() public minimumTextLength = defaults.dropdown.minimumTextLength;
 66 | 
 67 |   /**
 68 |    * - number of items to display in the autocomplete dropdown
 69 |    * @name limitItemsTo
 70 |    */
 71 |   @Input() public limitItemsTo: number = defaults.dropdown.limitItemsTo;
 72 | 
 73 |   /**
 74 |    * @name displayBy
 75 |    */
 76 |   @Input() public displayBy = defaults.dropdown.displayBy;
 77 | 
 78 |   /**
 79 |    * @name identifyBy
 80 |    */
 81 |   @Input() public identifyBy = defaults.dropdown.identifyBy;
 82 | 
 83 |   /**
 84 |    * @description a function a developer can use to implement custom matching for the autocomplete
 85 |    * @name matchingFn
 86 |    */
 87 |   @Input() public matchingFn: (value: string, target: TagModel) => boolean =
 88 |     defaults.dropdown.matchingFn;
 89 | 
 90 |   /**
 91 |    * @name appendToBody
 92 |    */
 93 |   @Input() public appendToBody = defaults.dropdown.appendToBody;
 94 | 
 95 |   /**
 96 |    * @name keepOpen
 97 |    * @description option to leave dropdown open when adding a new item
 98 |    */
 99 |   @Input() public keepOpen = defaults.dropdown.keepOpen;
100 | 
101 |   /**
102 |    * @name dynamicUpdate
103 |    */
104 |   @Input() public dynamicUpdate = defaults.dropdown.dynamicUpdate;
105 | 
106 |   /**
107 |    * @name zIndex
108 |    */
109 |   @Input() public zIndex = defaults.dropdown.zIndex;
110 | 
111 |   /**
112 |    * list of items that match the current value of the input (for autocomplete)
113 |    * @name items
114 |    */
115 |   public items: TagModel[] = [];
116 | 
117 |   /**
118 |    * @name tagInput
119 |    */
120 |   public tagInput: TagInputComponent = this.injector.get(TagInputComponent);
121 | 
122 |   /**
123 |    * @name _autocompleteItems
124 |    */
125 |   private _autocompleteItems: TagModel[] = [];
126 | 
127 |   /**
128 |    * @name autocompleteItems
129 |    * @param items
130 |    */
131 |   public set autocompleteItems(items: TagModel[]) {
132 |     this._autocompleteItems = items;
133 |   }
134 | 
135 |   /**
136 |    * @name autocompleteItems
137 |    * @desc array of items that will populate the autocomplete
138 |    */
139 |   @Input() public get autocompleteItems(): TagModel[] {
140 |     const items = this._autocompleteItems;
141 | 
142 |     if (!items) {
143 |       return [];
144 |     }
145 | 
146 |     return items.map((item: TagModel) => {
147 |       return typeof item === 'string'
148 |         ? {
149 |             [this.displayBy]: item,
150 |             [this.identifyBy]: item
151 |           }
152 |         : item;
153 |     });
154 |   }
155 | 
156 |   constructor(private readonly injector: Injector) {}
157 | 
158 |   /**
159 |    * @name ngAfterviewInit
160 |    */
161 |   ngAfterViewInit(): void {
162 |     this.onItemClicked().subscribe((item: Ng2MenuItem) => {
163 |       this.requestAdding(item);
164 |     });
165 | 
166 |     // reset itemsMatching array when the dropdown is hidden
167 |     this.onHide().subscribe(this.resetItems);
168 | 
169 |     const DEBOUNCE_TIME = 200;
170 |     const KEEP_OPEN = this.keepOpen;
171 | 
172 |     this.tagInput.onTextChange
173 |       .asObservable()
174 |       .pipe(
175 |         distinctUntilChanged(),
176 |         debounceTime(DEBOUNCE_TIME),
177 |         filter((value: string) => {
178 |           if (KEEP_OPEN === false) {
179 |             return value.length > 0;
180 |           }
181 | 
182 |           return true;
183 |         })
184 |       )
185 |       .subscribe(this.show);
186 |   }
187 | 
188 |   /**
189 |    * @name updatePosition
190 |    */
191 |   public updatePosition(): void {
192 |     const position = this.tagInput.inputForm.getElementPosition();
193 | 
194 |     this.dropdown.menu.updatePosition(position, this.dynamicUpdate);
195 |   }
196 | 
197 |   /**
198 |    * @name isVisible
199 |    */
200 |   public get isVisible(): boolean {
201 |     return this.dropdown.menu.dropdownState.menuState.isVisible;
202 |   }
203 | 
204 |   /**
205 |    * @name onHide
206 |    */
207 |   public onHide(): EventEmitter<Ng2Dropdown> {
208 |     return this.dropdown.onHide;
209 |   }
210 | 
211 |   /**
212 |    * @name onItemClicked
213 |    */
214 |   public onItemClicked() {
215 |     return this.dropdown.onItemClicked;
216 |   }
217 | 
218 |   /**
219 |    * @name selectedItem
220 |    */
221 |   public get selectedItem(): Ng2MenuItem {
222 |     return this.dropdown.menu.dropdownState.dropdownState.selectedItem;
223 |   }
224 | 
225 |   /**
226 |    * @name state
227 |    */
228 |   public get state(): any {
229 |     return this.dropdown.menu.dropdownState;
230 |   }
231 | 
232 |   /**
233 |    *
234 |    * @name show
235 |    */
236 |   public show = (): void => {
237 |     const maxItemsReached =
238 |       this.tagInput.items.length === this.tagInput.maxItems;
239 |     const value = this.getFormValue();
240 |     const hasMinimumText = value.trim().length >= this.minimumTextLength;
241 |     const position = this.calculatePosition();
242 |     const items = this.getMatchingItems(value);
243 |     const hasItems = items.length > 0;
244 |     const isHidden = this.isVisible === false;
245 |     const showDropdownIfEmpty = this.showDropdownIfEmpty && hasItems && !value;
246 |     const isDisabled = this.tagInput.disable;
247 | 
248 |     const shouldShow =
249 |       isHidden && ((hasItems && hasMinimumText) || showDropdownIfEmpty);
250 |     const shouldHide = this.isVisible && !hasItems;
251 | 
252 |     if (this.autocompleteObservable && hasMinimumText) {
253 |       return this.getItemsFromObservable(value);
254 |     }
255 | 
256 |     if (
257 |       (!this.showDropdownIfEmpty && !value) ||
258 |       maxItemsReached ||
259 |       isDisabled
260 |     ) {
261 |       return this.dropdown.hide();
262 |     }
263 | 
264 |     this.setItems(items);
265 | 
266 |     if (shouldShow) {
267 |       this.dropdown.show(position);
268 |     } else if (shouldHide) {
269 |       this.hide();
270 |     }
271 |   };
272 | 
273 |   /**
274 |    * @name hide
275 |    */
276 |   public hide(): void {
277 |     this.resetItems();
278 |     this.dropdown.hide();
279 |   }
280 | 
281 |   /**
282 |    * @name scrollListener
283 |    */
284 |   @HostListener('window:scroll')
285 |   public scrollListener(): void {
286 |     if (!this.isVisible || !this.dynamicUpdate) {
287 |       return;
288 |     }
289 | 
290 |     this.updatePosition();
291 |   }
292 | 
293 |   /**
294 |    * @name onWindowBlur
295 |    */
296 |   @HostListener('window:blur')
297 |   public onWindowBlur(): void {
298 |     this.dropdown.hide();
299 |   }
300 | 
301 |   /**
302 |    * @name getFormValue
303 |    */
304 |   private getFormValue(): string {
305 |     const formValue = this.tagInput.formValue;
306 |     return formValue ? formValue.toString().trim() : '';
307 |   }
308 | 
309 |   /**
310 |    * @name calculatePosition
311 |    */
312 |   private calculatePosition(): ClientRect {
313 |     return this.tagInput.inputForm.getElementPosition();
314 |   }
315 | 
316 |   /**
317 |    * @name requestAdding
318 |    * @param item {Ng2MenuItem}
319 |    */
320 |   private requestAdding = async (item: Ng2MenuItem) => {
321 |     const tag = this.createTagModel(item);
322 |     await this.tagInput.onAddingRequested(true, tag).catch(() => {});
323 |   };
324 | 
325 |   /**
326 |    * @name createTagModel
327 |    * @param item
328 |    */
329 |   private createTagModel(item: Ng2MenuItem): TagModel {
330 |     const display =
331 |       typeof item.value === 'string' ? item.value : item.value[this.displayBy];
332 |     const value =
333 |       typeof item.value === 'string' ? item.value : item.value[this.identifyBy];
334 | 
335 |     return {
336 |       ...item.value,
337 |       [this.tagInput.displayBy]: display,
338 |       [this.tagInput.identifyBy]: value
339 |     };
340 |   }
341 | 
342 |   /**
343 |    *
344 |    * @param value {string}
345 |    */
346 |   private getMatchingItems(value: string): TagModel[] {
347 |     if (!value && !this.showDropdownIfEmpty) {
348 |       return [];
349 |     }
350 | 
351 |     const dupesAllowed = this.tagInput.allowDupes;
352 | 
353 |     return this.autocompleteItems.filter((item: TagModel) => {
354 |       const hasValue = dupesAllowed
355 |         ? false
356 |         : this.tagInput.tags.some(tag => {
357 |             const identifyBy = this.tagInput.identifyBy;
358 |             const model =
359 |               typeof tag.model === 'string' ? tag.model : tag.model[identifyBy];
360 | 
361 |             return model === item[this.identifyBy];
362 |           });
363 | 
364 |       return this.matchingFn(value, item) && hasValue === false;
365 |     });
366 |   }
367 | 
368 |   /**
369 |    * @name setItems
370 |    */
371 |   private setItems(items: TagModel[]): void {
372 |     this.items = items.slice(0, this.limitItemsTo || items.length);
373 |   }
374 | 
375 |   /**
376 |    * @name resetItems
377 |    */
378 |   private resetItems = (): void => {
379 |     this.items = [];
380 |   };
381 | 
382 |   /**
383 |    * @name populateItems
384 |    * @param data
385 |    */
386 |   private populateItems(data: any): TagInputDropdown {
387 |     this.autocompleteItems = data.map(item => {
388 |       return typeof item === 'string'
389 |         ? {
390 |             [this.displayBy]: item,
391 |             [this.identifyBy]: item
392 |           }
393 |         : item;
394 |     });
395 | 
396 |     return this;
397 |   }
398 | 
399 |   /**
400 |    * @name getItemsFromObservable
401 |    * @param text
402 |    */
403 |   private getItemsFromObservable = (text: string): void => {
404 |     this.setLoadingState(true);
405 | 
406 |     const subscribeFn = (data: any[]) => {
407 |       // hide loading animation
408 |       this.setLoadingState(false)
409 |         // add items
410 |         .populateItems(data);
411 | 
412 |       this.setItems(this.getMatchingItems(text));
413 | 
414 |       if (this.items.length) {
415 |         this.dropdown.show(this.calculatePosition());
416 |       } else {
417 |         this.dropdown.hide();
418 |       }
419 |     };
420 | 
421 |     this.autocompleteObservable(text)
422 |       .pipe(first())
423 |       .subscribe(subscribeFn, () => this.setLoadingState(false));
424 |   };
425 | 
426 |   /**
427 |    * @name setLoadingState
428 |    * @param state
429 |    */
430 |   private setLoadingState(state: boolean): TagInputDropdown {
431 |     this.tagInput.isLoading = state;
432 | 
433 |     return this;
434 |   }
435 | }
436 | 


--------------------------------------------------------------------------------
/modules/components/dropdown/tag-input-dropdown.template.html:
--------------------------------------------------------------------------------
 1 | <ng2-dropdown [dynamicUpdate]="dynamicUpdate">
 2 |     <ng2-dropdown-menu [focusFirstElement]="focusFirstElement"
 3 |                        [zIndex]="zIndex"
 4 |                        [appendToBody]="appendToBody"
 5 |                        [offset]="offset">
 6 |         <ng2-menu-item *ngFor="let item of items; let index = index; let last = last"
 7 |                        [value]="item"
 8 |                        [ngSwitch]="!!templates.length">
 9 | 
10 |             <span *ngSwitchCase="false"
11 |                   [innerHTML]="item[displayBy] | highlight : tagInput.inputForm.value.value">
12 |             </span>
13 | 
14 |             <ng-template *ngSwitchDefault
15 |                       [ngTemplateOutlet]="templates.first"
16 |                       [ngTemplateOutletContext]="{ item: item, index: index, last: last }">
17 |             </ng-template>
18 |         </ng2-menu-item>
19 |     </ng2-dropdown-menu>
20 | </ng2-dropdown>
21 | 


--------------------------------------------------------------------------------
/modules/components/icon/icon.html:
--------------------------------------------------------------------------------
 1 | <span>
 2 |     <svg
 3 |         height="16px"
 4 |         viewBox="0 0 32 32"
 5 |         width="16px"
 6 |     >
 7 |         <path
 8 |             d="M17.459,16.014l8.239-8.194c0.395-0.391,0.395-1.024,0-1.414c-0.394-0.391-1.034-0.391-1.428,0  l-8.232,8.187L7.73,6.284c-0.394-0.395-1.034-0.395-1.428,0c-0.394,0.396-0.394,1.037,0,1.432l8.302,8.303l-8.332,8.286  c-0.394,0.391-0.394,1.024,0,1.414c0.394,0.391,1.034,0.391,1.428,0l8.325-8.279l8.275,8.276c0.394,0.395,1.034,0.395,1.428,0  c0.394-0.396,0.394-1.037,0-1.432L17.459,16.014z"
 9 |             fill="#121313"
10 |         />
11 |     </svg>
12 | </span>


--------------------------------------------------------------------------------
/modules/components/icon/icon.scss:
--------------------------------------------------------------------------------
 1 | @import "../../core/styles/themes/_themes.scss";
 2 | 
 3 | :host(delete-icon) {
 4 |     @include icon-theme($default-icon-theme);
 5 | }
 6 | 
 7 | :host(delete-icon):hover {
 8 |     transform: scale(1.5) translateY(-3px);
 9 | }
10 | 
11 | :host-context(.dark) {
12 |     @include icon-theme($dark-icon-theme);
13 | }
14 | 
15 | :host-context(.minimal) {
16 |     @include icon-theme($minimal-icon-theme);
17 | }
18 | 
19 | :host-context(.bootstrap) {
20 |     @include icon-theme($bootstrap-icon-theme);
21 | }
22 | 
23 | :host-context(tag:focus),
24 | :host-context(tag:active) {
25 |     @include icon-theme-focused($default-icon-theme);
26 | }
27 | 
28 | :host-context(.dark tag:focus),
29 | :host-context(.dark tag:active) {
30 |     @include icon-theme-focused($dark-icon-theme);
31 | }
32 | 
33 | :host-context(.minimal tag:focus),
34 | :host-context(.minimal tag:active) {
35 |     @include icon-theme-focused($minimal-icon-theme);
36 | }
37 | 
38 | :host-context(.bootstrap tag:focus),
39 | :host-context(.bootstrap tag:active) {
40 |     @include icon-theme-focused($bootstrap-icon-theme);
41 | }
42 | 
43 | :host-context(.bootstrap3-info) {
44 |     @include icon-theme-focused($bootstrap3-info-icon-theme);
45 |     height: inherit;
46 | }
47 | 


--------------------------------------------------------------------------------
/modules/components/icon/icon.ts:
--------------------------------------------------------------------------------
1 | import { Component } from '@angular/core';
2 | 
3 | @Component({
4 |     selector: 'delete-icon',
5 |     templateUrl: './icon.html',
6 |     styleUrls: ['./icon.scss']
7 | })
8 | export class DeleteIconComponent {}
9 | 


--------------------------------------------------------------------------------
/modules/components/icon/index.ts:
--------------------------------------------------------------------------------
1 | export { DeleteIconComponent } from './icon';
2 | 


--------------------------------------------------------------------------------
/modules/components/index.ts:
--------------------------------------------------------------------------------
1 | export { TagInputDropdown } from './dropdown/index';
2 | export { DeleteIconComponent } from './icon/index';
3 | export { TagInputForm } from './tag-input-form/index';
4 | export { TagRipple, TagComponent } from './tag/index';
5 | export { TagInputComponent } from './tag-input/index';
6 | 


--------------------------------------------------------------------------------
/modules/components/tag-input-form/index.ts:
--------------------------------------------------------------------------------
1 | export { TagInputForm } from './tag-input-form.component';
2 | 


--------------------------------------------------------------------------------
/modules/components/tag-input-form/tag-input-form.component.ts:
--------------------------------------------------------------------------------
  1 | import { Component, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges, ViewChild } from '@angular/core';
  2 | import { AsyncValidatorFn, FormControl, FormGroup, ValidatorFn } from '@angular/forms';
  3 | 
  4 | @Component({
  5 |     selector: 'tag-input-form',
  6 |     styleUrls: ['./tag-input-form.style.scss'],
  7 |     templateUrl: './tag-input-form.template.html'
  8 | })
  9 | export class TagInputForm implements OnInit, OnChanges {
 10 |     /**
 11 |      * @name onSubmit
 12 |      */
 13 |     @Output() public onSubmit: EventEmitter<any> = new EventEmitter();
 14 | 
 15 |     /**
 16 |      * @name onBlur
 17 |      */
 18 |     @Output() public onBlur: EventEmitter<any> = new EventEmitter();
 19 | 
 20 |     /**
 21 |      * @name onFocus
 22 |      */
 23 |     @Output() public onFocus: EventEmitter<any> = new EventEmitter();
 24 | 
 25 |     /**
 26 |      * @name onKeyup
 27 |      */
 28 |     @Output() public onKeyup: EventEmitter<any> = new EventEmitter();
 29 | 
 30 |     /**
 31 |      * @name onKeydown
 32 |      */
 33 |     @Output() public onKeydown: EventEmitter<any> = new EventEmitter();
 34 | 
 35 |     /**
 36 |      * @name inputTextChange
 37 |      */
 38 |     @Output() public inputTextChange: EventEmitter<string> = new EventEmitter();
 39 | 
 40 |     // inputs
 41 | 
 42 |     /**
 43 |      * @name placeholder
 44 |      */
 45 |     @Input() public placeholder: string;
 46 | 
 47 |     /**
 48 |      * @name validators
 49 |      */
 50 |     @Input() public validators: ValidatorFn[] = [];
 51 | 
 52 |     /**
 53 |      * @name asyncValidators
 54 |      * @desc array of AsyncValidator that are used to validate the tag before it gets appended to the list
 55 |      */
 56 |     @Input() public asyncValidators: AsyncValidatorFn[] = [];
 57 | 
 58 |     /**
 59 |      * @name inputId
 60 |      */
 61 |     @Input() public inputId: string;
 62 | 
 63 |     /**
 64 |      * @name inputClass
 65 |      */
 66 |     @Input() public inputClass: string;
 67 | 
 68 |     /**
 69 |      * @name tabindex
 70 |      * @desc pass through the specified tabindex to the input
 71 |      */
 72 |     @Input() public tabindex = '';
 73 | 
 74 |     /**
 75 |      * @name disabled
 76 |      */
 77 |     @Input() public disabled = false;
 78 | 
 79 |     /**
 80 |      * @name input
 81 |      */
 82 |     @ViewChild('input') public input;
 83 | 
 84 |     /**
 85 |      * @name form
 86 |      */
 87 |     public form: FormGroup;
 88 | 
 89 |     /**
 90 |      * @name inputText
 91 |      */
 92 |     @Input()
 93 |     public get inputText(): string {
 94 |         return this.item.value;
 95 |     }
 96 | 
 97 |     /**
 98 |      * @name inputText
 99 |      * @param text {string}
100 |      */
101 |     public set inputText(text: string) {
102 |         this.item.setValue(text);
103 | 
104 |         this.inputTextChange.emit(text);
105 |     }
106 | 
107 |     private readonly item: FormControl = new FormControl({ value: '', disabled: this.disabled });
108 | 
109 |     ngOnInit() {
110 |         this.item.setValidators(this.validators);
111 |         this.item.setAsyncValidators(this.asyncValidators);
112 | 
113 |         // creating form
114 |         this.form = new FormGroup({
115 |             item: this.item
116 |         });
117 |     }
118 | 
119 |     ngOnChanges(changes: SimpleChanges): void {
120 |         if (changes.disabled && !changes.disabled.firstChange) {
121 |             if (changes.disabled.currentValue) {
122 |                 this.form.controls['item'].disable();
123 |             } else {
124 |                 this.form.controls['item'].enable();
125 |             }
126 |         }
127 |     }
128 | 
129 |     /**
130 |      * @name value
131 |      */
132 |     public get value(): FormControl {
133 |         return this.form.get('item') as FormControl;
134 |     }
135 | 
136 |     /**
137 |      * @name isInputFocused
138 |      */
139 |     public isInputFocused(): boolean {
140 |         const doc = typeof document !== 'undefined' ? document : undefined;
141 |         return doc ? doc.activeElement === this.input.nativeElement : false;
142 |     }
143 | 
144 |     /**
145 |      * @name getErrorMessages
146 |      * @param messages
147 |      */
148 |     public getErrorMessages(messages: { [key: string]: string }): string[] {
149 |         return Object.keys(messages)
150 |             .filter(err => this.value.hasError(err))
151 |             .map(err => messages[err]);
152 |     }
153 | 
154 |     /**
155 |      * @name hasErrors
156 |      */
157 |     public hasErrors(): boolean {
158 |         const { dirty, value, valid } = this.form;
159 |         return dirty && value.item && !valid;
160 |     }
161 | 
162 |     /**
163 |      * @name focus
164 |      */
165 |     public focus(): void {
166 |         this.input.nativeElement.focus();
167 |     }
168 | 
169 |     /**
170 |      * @name blur
171 |      */
172 |     public blur(): void {
173 |         this.input.nativeElement.blur();
174 |     }
175 | 
176 |     /**
177 |      * @name getElementPosition
178 |      */
179 |     public getElementPosition(): ClientRect {
180 |         return this.input.nativeElement.getBoundingClientRect();
181 |     }
182 | 
183 |     /**
184 |      * - removes input from the component
185 |      * @name destroy
186 |      */
187 |     public destroy(): void {
188 |         const input = this.input.nativeElement;
189 |         input.parentElement.removeChild(input);
190 |     }
191 | 
192 |     /**
193 |      * @name onKeyDown
194 |      * @param $event
195 |      */
196 |     public onKeyDown($event) {
197 |         this.inputText = this.value.value;
198 |         if ($event.key === 'Enter') {
199 |             this.submit($event);
200 |         } else {
201 |           return this.onKeydown.emit($event);
202 |         }
203 |     }
204 | 
205 |     /**
206 |      * @name onKeyUp
207 |      * @param $event
208 |      */
209 |     public onKeyUp($event) {
210 |         this.inputText = this.value.value;
211 |         return this.onKeyup.emit($event);
212 |     }
213 | 
214 |     /**
215 |      * @name submit
216 |      */
217 |     public submit($event: any): void {
218 |         $event.preventDefault();
219 |         this.onSubmit.emit($event);
220 |     }
221 | }
222 | 


--------------------------------------------------------------------------------
/modules/components/tag-input-form/tag-input-form.style.scss:
--------------------------------------------------------------------------------
1 | @import "../../core/styles/themes/_themes.scss";
2 | 
3 | .ng2-tag-input__text-input {
4 |     @include tag-input-form-theme($default-theme);
5 | }
6 | 


--------------------------------------------------------------------------------
/modules/components/tag-input-form/tag-input-form.template.html:
--------------------------------------------------------------------------------
 1 | <!-- form -->
 2 | <form (ngSubmit)="submit($event)" [formGroup]="form">
 3 |     <input #input
 4 | 
 5 |            type="text"
 6 |            class="ng2-tag-input__text-input"
 7 |            autocomplete="off"
 8 |            tabindex="{{ disabled ? -1 : tabindex ? tabindex : 0 }}"
 9 |            minlength="1"
10 |            formControlName="item"
11 | 
12 |            [ngClass]="inputClass"
13 |            [attr.id]="inputId"
14 |            [attr.placeholder]="placeholder"
15 |            [attr.aria-label]="placeholder"
16 |            [attr.tabindex]="tabindex"
17 |            [attr.disabled]="disabled ? disabled : null"
18 | 
19 |            (focus)="onFocus.emit($event)"
20 |            (blur)="onBlur.emit($event)"
21 |            (keydown)="onKeyDown($event)"
22 |            (keyup)="onKeyUp($event)"
23 |     />
24 | </form>
25 | 


--------------------------------------------------------------------------------
/modules/components/tag-input/animations.ts:
--------------------------------------------------------------------------------
 1 | import {
 2 |     animate,
 3 |     trigger,
 4 |     style,
 5 |     transition,
 6 |     keyframes,
 7 |     state,
 8 |     AnimationTriggerMetadata
 9 | } from '@angular/animations';
10 | 
11 | /**
12 |  * @name animations
13 |  */
14 | export const animations = [
15 |     trigger('animation', [
16 |         state('in', style({
17 |             opacity: 1
18 |         })),
19 |         state('out', style({
20 |             opacity: 0
21 |         })),
22 |         transition(':enter', [
23 |             animate('{{ enter }}', keyframes([
24 |                 style({opacity: 0, offset: 0, transform: 'translate(0px, 20px)'}),
25 |                 style({opacity: 0.3, offset: 0.3, transform: 'translate(0px, -10px)'}),
26 |                 style({opacity: 0.5, offset: 0.5, transform: 'translate(0px, 0px)'}),
27 |                 style({opacity: 0.75, offset: 0.75, transform: 'translate(0px, 5px)'}),
28 |                 style({opacity: 1, offset: 1, transform: 'translate(0px, 0px)'})
29 |             ]))
30 |         ]),
31 |         transition(':leave', [
32 |             animate('{{ leave }}', keyframes([
33 |                 style({opacity: 1, transform: 'translateX(0)', offset: 0}),
34 |                 style({opacity: 1, transform: 'translateX(-15px)', offset: 0.7}),
35 |                 style({opacity: 0, transform: 'translateX(100%)', offset: 1.0})
36 |             ]))
37 |         ])
38 |     ])
39 | ];
40 | 


--------------------------------------------------------------------------------
/modules/components/tag-input/index.ts:
--------------------------------------------------------------------------------
1 | export { TagInputComponent } from './tag-input';
2 | 


--------------------------------------------------------------------------------
/modules/components/tag-input/tag-input.spec.ts:
--------------------------------------------------------------------------------
  1 | import { FormControl } from '@angular/forms';
  2 | import {
  3 |   async,
  4 |   ComponentFixture,
  5 |   discardPeriodicTasks,
  6 |   fakeAsync,
  7 |   TestBed,
  8 |   tick
  9 | } from '@angular/core/testing';
 10 | 
 11 | import { By } from '@angular/platform-browser';
 12 | import { Subject } from 'rxjs';
 13 | import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 14 | 
 15 | import { TagModel } from '../../core';
 16 | import { TagInputComponent } from './tag-input';
 17 | 
 18 | import {
 19 |   BasicTagInputComponent,
 20 |   TagInputComponentWithAddOnBlur,
 21 |   TagInputComponentWithAutocomplete,
 22 |   TagInputComponentWithHooks,
 23 |   TagInputComponentWithMaxItems,
 24 |   TagInputComponentWithModelAsStrings,
 25 |   TagInputComponentWithOnlyAutocomplete,
 26 |   TagInputComponentWithOutputs,
 27 |   TagInputComponentWithPlaceholder,
 28 |   TagInputComponentWithTemplate,
 29 |   TagInputComponentWithTransformer,
 30 |   TagInputComponentWithValidation,
 31 |   TagInputComponentEditable,
 32 |   TestModule
 33 | } from './tests/testing-helpers.spec';
 34 | 
 35 | describe('TagInputComponent', () => {
 36 |   const match = jasmine.objectContaining;
 37 | 
 38 |   beforeEach(() => {
 39 |     TestBed.configureTestingModule({
 40 |       declarations: [],
 41 |       imports: [BrowserAnimationsModule, TestModule]
 42 |     });
 43 |   });
 44 | 
 45 |   beforeEach(async(() => {
 46 |     TestBed.compileComponents();
 47 |   }));
 48 | 
 49 |   function getComponent(fixture): TagInputComponent {
 50 |     fixture.detectChanges();
 51 |     tick();
 52 | 
 53 |     fixture.detectChanges();
 54 |     tick();
 55 | 
 56 |     const component = fixture.debugElement.query(
 57 |       By.directive(TagInputComponent)
 58 |     ).componentInstance as TagInputComponent;
 59 |     component.ngAfterViewInit();
 60 | 
 61 |     fixture.detectChanges();
 62 |     tick();
 63 |     return component;
 64 |   }
 65 | 
 66 |   describe('Basic behaviours', () => {
 67 |     it('should have 2 tags set by ngModel', fakeAsync(() => {
 68 |       const fixture: ComponentFixture<
 69 |         BasicTagInputComponent
 70 |       > = TestBed.createComponent(BasicTagInputComponent);
 71 |       const component = getComponent(fixture);
 72 | 
 73 |       expect(component.items.length).toEqual(2);
 74 |     }));
 75 | 
 76 |     it('should override the default placeholder of the input', fakeAsync(() => {
 77 |       const fixture: ComponentFixture<
 78 |         TagInputComponentWithPlaceholder
 79 |       > = TestBed.createComponent(TagInputComponentWithPlaceholder);
 80 |       const component = getComponent(fixture);
 81 | 
 82 |       expect(component.items.length).toEqual(2);
 83 |       expect(
 84 |         component.inputForm.input.nativeElement.getAttribute('placeholder')
 85 |       ).toEqual('New Tag');
 86 |     }));
 87 | 
 88 |     it('should be "touched" on blur', fakeAsync(() => {
 89 |       const fixture: ComponentFixture<
 90 |         BasicTagInputComponent
 91 |       > = TestBed.createComponent(BasicTagInputComponent);
 92 |       const component = <TagInputComponent>getComponent(fixture);
 93 |       const onTouched = jasmine.createSpy('onTouched');
 94 | 
 95 |       component.registerOnTouched(onTouched);
 96 |       component.blur();
 97 | 
 98 |       expect(onTouched).toHaveBeenCalled();
 99 |     }));
100 |   });
101 | 
102 |   describe('when a new item is added', () => {
103 |     it("should be added to the list of items and update its parent's model", fakeAsync(async () => {
104 |       const fixture: ComponentFixture<
105 |         BasicTagInputComponent
106 |       > = TestBed.createComponent(BasicTagInputComponent);
107 |       const component = getComponent(fixture);
108 |       const value = 'New Item';
109 | 
110 |       component.setInputValue(value);
111 |       expect(component.inputForm.form.valid).toEqual(true);
112 | 
113 |       await component.onAddingRequested(false, value).catch();
114 | 
115 |       tick();
116 |       fixture.detectChanges();
117 | 
118 |       expect(component.inputForm.form.controls.item.value).toEqual('');
119 |       expect(fixture.componentInstance.items.length).toEqual(3);
120 |       expect(component.items.length).toEqual(3);
121 |     }));
122 | 
123 |     it('should not be allowed if max-items is set up', fakeAsync(async () => {
124 |       const fixture: ComponentFixture<
125 |         TagInputComponentWithMaxItems
126 |       > = TestBed.createComponent(TagInputComponentWithMaxItems);
127 |       const component = getComponent(fixture);
128 | 
129 |       const value = 'New Item';
130 |       component.setInputValue(value);
131 | 
132 |       await component.onAddingRequested(false, value).catch(() => {});
133 | 
134 |       fixture.detectChanges();
135 | 
136 |       expect(fixture.componentInstance.items.length).toEqual(2);
137 |       expect(component.items.length).toEqual(2);
138 | 
139 |       discardPeriodicTasks();
140 |     }));
141 | 
142 |     it('emits the event onAdd', () => {
143 |       const fixture: ComponentFixture<
144 |         TagInputComponentWithOutputs
145 |       > = TestBed.createComponent(TagInputComponentWithOutputs);
146 |       const itemName = 'New Item';
147 | 
148 |       fakeAsync(async (done: DoneFn) => {
149 |         const component = getComponent(fixture);
150 |         const control = component.inputForm.form.get('item') as FormControl;
151 | 
152 |         control.setValue(itemName);
153 | 
154 |         component.onAdd.subscribe(item => {
155 |           expect(item).toEqual(itemName);
156 |           done();
157 |         });
158 | 
159 |         await component.onAddingRequested(false, itemName);
160 |         tick();
161 |         discardPeriodicTasks();
162 |       });
163 |     });
164 | 
165 |     it('does not allow dupes', () => {
166 |       const fixture: ComponentFixture<
167 |         BasicTagInputComponent
168 |       > = TestBed.createComponent(BasicTagInputComponent);
169 |       return fakeAsync(async () => {
170 |         const component = getComponent(fixture);
171 |         const item = 'Javascript';
172 | 
173 |         component.setInputValue(item);
174 |         await component.onAddingRequested(false, item);
175 | 
176 |         tick();
177 |         fixture.detectChanges();
178 | 
179 |         expect(component.items.length).toEqual(2);
180 |         discardPeriodicTasks();
181 |       });
182 |     });
183 |   });
184 | 
185 |   describe('when an item is removed', () => {
186 |     let fixture: ComponentFixture<BasicTagInputComponent>;
187 |     let tagName: string;
188 |     let item: TagModel;
189 |     let component;
190 | 
191 |     beforeEach(() => {
192 |       fixture = TestBed.createComponent(BasicTagInputComponent);
193 |       tagName = 'Typescript';
194 |     });
195 | 
196 |     it('is removed from the list', fakeAsync(() => {
197 |       component = getComponent(fixture);
198 |       component.removeItem(tagName, 1);
199 | 
200 |       fixture.detectChanges();
201 | 
202 |       expect(component.items.length).toEqual(1);
203 |       expect(component.inputForm.isInputFocused()).toEqual(true);
204 |     }));
205 | 
206 |     it('emits the event onRemove', fakeAsync(() => {
207 |       component = getComponent(fixture);
208 |       component.onRemove.subscribe(tag => {
209 |         expect(tag).toEqual(tagName);
210 |       });
211 | 
212 |       component.removeItem(tagName);
213 |       tick();
214 | 
215 |       discardPeriodicTasks();
216 |     }));
217 | 
218 |     it('is sets current selected item as undefined', fakeAsync(() => {
219 |       component = getComponent(fixture);
220 |       component.removeItem(tagName, 0);
221 | 
222 |       expect(component.selectedTag).toBe(undefined);
223 |     }));
224 |   });
225 | 
226 |   describe('testing validators', () => {
227 |     it('injects minLength validator and validates correctly', fakeAsync(async () => {
228 |       const fixture: ComponentFixture<
229 |         TagInputComponentWithValidation
230 |       > = TestBed.createComponent(TagInputComponentWithValidation);
231 |       const component = getComponent(fixture);
232 |       const value = 'Ab';
233 | 
234 |       component.setInputValue(value);
235 |       expect(component.inputForm.form.valid).toBe(false);
236 | 
237 |       await component.onAddingRequested(false, value).catch(() => {});
238 |       fixture.detectChanges();
239 |       tick();
240 | 
241 |       expect(component.items.length).toEqual(2);
242 | 
243 |       const invalid = 'Abcde';
244 | 
245 |       // addItem element with > 3 chars without @
246 |       component.setInputValue('Abcde');
247 |       await component.onAddingRequested(false, invalid).catch(() => {});
248 | 
249 |       fixture.detectChanges();
250 |       tick();
251 | 
252 |       expect(component.inputForm.form.valid).toBe(false);
253 | 
254 |       const valid = '@Abcde';
255 | 
256 |       // addItem element with > 3 chars with @
257 |       component.setInputValue(valid);
258 | 
259 |       expect(component.inputForm.form.valid).toBe(true);
260 | 
261 |       await component.onAddingRequested(false, valid);
262 |       fixture.detectChanges();
263 |       tick();
264 | 
265 |       expect(component.items.length).toEqual(3);
266 | 
267 |       discardPeriodicTasks();
268 |     }));
269 | 
270 |     it('injects minLength validator and custom validator and validates correctly', fakeAsync(() => {
271 |       const fixture: ComponentFixture<
272 |         TagInputComponentWithValidation
273 |       > = TestBed.createComponent(TagInputComponentWithValidation);
274 |       const component = getComponent(fixture);
275 |       const value = 'Javascript';
276 | 
277 |       component.setInputValue(value);
278 |       expect(component.inputForm.form.valid).toBe(false);
279 | 
280 |       const invalid = '@J';
281 | 
282 |       component.setInputValue(invalid);
283 |       expect(component.inputForm.form.valid).toBe(false);
284 | 
285 |       const valid = '@Javascript';
286 | 
287 |       // addItem element with > 3 chars AND @
288 |       component.setInputValue(valid);
289 |       expect(component.inputForm.form.valid).toBe(true);
290 | 
291 |       discardPeriodicTasks();
292 |     }));
293 | 
294 |     it('validates transformed values', fakeAsync(async () => {
295 |       const fixture: ComponentFixture<
296 |         TagInputComponentWithTransformer
297 |       > = TestBed.createComponent(TagInputComponentWithTransformer);
298 |       const component = getComponent(fixture);
299 | 
300 |       component.setInputValue('@');
301 |       await component.onAddingRequested(false, '@');
302 | 
303 |       fixture.detectChanges();
304 |       tick();
305 | 
306 |       expect(component.items[2]).toEqual(
307 |         match({ display: 'prefix: @', value: 'prefix: @' })
308 |       );
309 |       expect(component.items.length).toEqual(3);
310 | 
311 |       discardPeriodicTasks();
312 |     }));
313 |   });
314 | 
315 |   describe('when user navigates tags with keypress event', () => {
316 |     let keyUp: Event = new Event('keyup'),
317 |       keyDown: Event = new Event('keydown'),
318 |       fixture: ComponentFixture<BasicTagInputComponent>,
319 |       component;
320 | 
321 |     keyDown['keyCode'] = 37;
322 | 
323 |     beforeEach(() => {
324 |       fixture = TestBed.createComponent(BasicTagInputComponent);
325 |     });
326 | 
327 |     it('it handles navigation/deletion of tags', fakeAsync(() => {
328 |       component = getComponent(fixture);
329 | 
330 |       // selected tag is undefined
331 |       expect(component.selectedTag).toEqual(undefined);
332 | 
333 |       keyDown['keyCode'] = 8;
334 |       // press backspace
335 |       component.inputForm.input.nativeElement.dispatchEvent(keyDown);
336 | 
337 |       // selected tag is the last one
338 |       expect(component.selectedTag).toEqual('Typescript');
339 | 
340 |       // press tab and focus input again
341 |       keyDown['keyCode'] = 9;
342 |       component.tags.last.element.nativeElement.dispatchEvent(keyDown);
343 | 
344 |       expect(component.selectedTag).toEqual(undefined);
345 |       expect(component.inputForm.isInputFocused()).toEqual(true);
346 | 
347 |       keyDown['keyCode'] = 8;
348 |       // then starts from back again
349 |       component.inputForm.input.nativeElement.dispatchEvent(keyDown);
350 | 
351 |       expect(component.selectedTag).toEqual('Typescript');
352 | 
353 |       // it removes current selected tag when pressing delete
354 |       component.tags.last.element.nativeElement.dispatchEvent(keyDown);
355 | 
356 |       expect(component.items.length).toEqual(1);
357 |       expect(component.selectedTag).toBe(undefined);
358 | 
359 |       discardPeriodicTasks();
360 |     }));
361 | 
362 |     it('it navigates back and forth between tags', fakeAsync(() => {
363 |       component = getComponent(fixture);
364 |       keyDown['keyCode'] = 37;
365 | 
366 |       // press left arrow
367 |       component.inputForm.input.nativeElement.dispatchEvent(keyDown);
368 | 
369 |       // selected tag is the last one
370 |       expect(component.selectedTag).toEqual('Typescript');
371 | 
372 |       // press left arrow
373 |       component.tags.last.element.nativeElement.dispatchEvent(keyDown);
374 |       expect(component.selectedTag).toEqual('Javascript');
375 | 
376 |       // press right arrow
377 |       keyDown['keyCode'] = 39;
378 |       component.tags.first.element.nativeElement.dispatchEvent(keyDown);
379 |       expect(component.selectedTag).toEqual('Typescript');
380 | 
381 |       // press tab -> focuses input
382 |       keyDown['keyCode'] = 9;
383 |       component.tags.last.element.nativeElement.dispatchEvent(keyDown);
384 | 
385 |       expect(component.selectedTag).toEqual(undefined);
386 |       expect(component.inputForm.isInputFocused()).toEqual(true);
387 | 
388 |       discardPeriodicTasks();
389 |     }));
390 | 
391 |     it('it focuses input when pressing tab', fakeAsync(() => {
392 |       component = getComponent(fixture);
393 |       keyDown['keyCode'] = 37;
394 | 
395 |       // press left arrow
396 |       component.inputForm.input.nativeElement.dispatchEvent(keyDown);
397 | 
398 |       // selected tag is the last one
399 |       expect(component.selectedTag).toEqual('Typescript');
400 | 
401 |       keyDown['keyCode'] = 9;
402 |       // press tab -> focuses input
403 |       component.tags.last.element.nativeElement.dispatchEvent(keyDown);
404 |       expect(component.selectedTag).toEqual(undefined);
405 | 
406 |       expect(component.inputForm.isInputFocused()).toEqual(true);
407 | 
408 |       discardPeriodicTasks();
409 |     }));
410 |   });
411 | 
412 |   describe('when using a custom template', () => {
413 |     it('replaced template with the custom one', fakeAsync(() => {
414 |       const fixture: ComponentFixture<
415 |         TagInputComponentWithTemplate
416 |       > = TestBed.createComponent(TagInputComponentWithTemplate);
417 | 
418 |       const component = getComponent(fixture);
419 | 
420 |       expect(component.items.length).toEqual(2);
421 |       expect(document.querySelectorAll('.custom-class').length).toEqual(2);
422 | 
423 |       discardPeriodicTasks();
424 |     }));
425 |   });
426 | 
427 |   describe('when using the autocomplete', () => {
428 |     let keyUp: Event = new Event('keyUp');
429 |     keyUp['keyCode'] = 73;
430 | 
431 |     it('adds an autocomplete to the template', fakeAsync(() => {
432 |       const fixture: ComponentFixture<
433 |         TagInputComponentWithAutocomplete
434 |       > = TestBed.createComponent(TagInputComponentWithAutocomplete);
435 | 
436 |       const component = getComponent(fixture);
437 | 
438 |       expect(component.dropdown.autocompleteItems.length).toEqual(3);
439 |       expect(document.querySelector('ng2-dropdown-menu')).toBeTruthy();
440 | 
441 |       discardPeriodicTasks();
442 |     }));
443 | 
444 |     it('shows a dropdown when entering a matching value', fakeAsync(() => {
445 |       const fixture: ComponentFixture<
446 |         TagInputComponentWithAutocomplete
447 |       > = TestBed.createComponent(TagInputComponentWithAutocomplete);
448 | 
449 |       const component = getComponent(fixture);
450 | 
451 |       // press 'i'
452 |       component.setInputValue('i');
453 |       component.dropdown.show();
454 |       fixture.detectChanges();
455 |       tick();
456 | 
457 |       const dropdown = document.querySelector('.ng2-dropdown-menu-container');
458 |       const items = document.querySelectorAll('ng2-menu-item');
459 | 
460 |       expect(dropdown).toBeDefined();
461 |       expect(component.dropdown.items.length).toEqual(3);
462 |       expect(items.length).toEqual(3);
463 | 
464 |       discardPeriodicTasks();
465 |     }));
466 | 
467 |     it('filters matching values', fakeAsync(() => {
468 |       const fixture: ComponentFixture<
469 |         TagInputComponentWithAutocomplete
470 |       > = TestBed.createComponent(TagInputComponentWithAutocomplete);
471 |       const component = getComponent(fixture);
472 | 
473 |       // press 'i'
474 |       component.setInputValue('i');
475 |       component.dropdown.show();
476 | 
477 |       fixture.detectChanges();
478 |       tick();
479 | 
480 |       expect(component.dropdown.items.length).toEqual(3);
481 |       component.dropdown.dropdown.hide();
482 | 
483 |       component.setInputValue('ite');
484 |       component.dropdown.show();
485 | 
486 |       fixture.detectChanges();
487 |       tick();
488 | 
489 |       expect(component.dropdown.items.length).toEqual(2);
490 |       component.dropdown.dropdown.hide();
491 | 
492 |       component.setInputValue('ita');
493 |       component.dropdown.show();
494 | 
495 |       fixture.detectChanges();
496 |       tick();
497 | 
498 |       expect(component.dropdown.items.length).toEqual(1);
499 | 
500 |       discardPeriodicTasks();
501 |     }));
502 | 
503 |     it('adds items to tag input from autocomplete', fakeAsync(() => {
504 |       const fixture: ComponentFixture<
505 |         TagInputComponentWithAutocomplete
506 |       > = TestBed.createComponent(TagInputComponentWithAutocomplete);
507 |       const component = getComponent(fixture);
508 | 
509 |       expect(component.dropdown).toBeDefined();
510 |       component.dropdown.ngAfterViewInit();
511 |       // press 'i'
512 |       component.setInputValue('i');
513 |       component.dropdown.show();
514 |       fixture.detectChanges();
515 | 
516 |       const dropdown = component.dropdown.dropdown;
517 |       tick();
518 |       const item = dropdown.menu.items.first;
519 |       dropdown.menu.dropdownState.dropdownState.onItemClicked.emit(item);
520 | 
521 |       tick();
522 | 
523 |       expect(component.items.length).toEqual(3);
524 |       discardPeriodicTasks();
525 |     }));
526 | 
527 |     it('does not let add item if onlyFromAutocomplete is set to true', () => {
528 |       const fixture: ComponentFixture<
529 |         TagInputComponentWithOnlyAutocomplete
530 |       > = TestBed.createComponent(TagInputComponentWithOnlyAutocomplete);
531 | 
532 |       return fakeAsync(async () => {
533 |         const component = getComponent(fixture);
534 |         const value = 'item';
535 | 
536 |         component.setInputValue(value);
537 |         await component.onAddingRequested(false, value);
538 |         expect(component.items.length).toEqual(2);
539 | 
540 |         tick();
541 | 
542 |         component.setInputValue(value);
543 | 
544 |         await component.onAddingRequested(true, value);
545 |         expect(component.items.length).toEqual(3);
546 |       });
547 |     });
548 |   });
549 | 
550 |   describe('model as strings', () => {
551 |     it('adds item to the model as a string', fakeAsync(() => {
552 |       const fixture: ComponentFixture<
553 |         TagInputComponentWithModelAsStrings
554 |       > = TestBed.createComponent(TagInputComponentWithModelAsStrings);
555 | 
556 |       const component: TagInputComponent = getComponent(fixture);
557 |       component.appendTag({ display: 'Tag', value: 'Tag' });
558 | 
559 |       expect(component.items[2]).toEqual('Tag');
560 | 
561 |       discardPeriodicTasks();
562 |     }));
563 |   });
564 | 
565 |   describe('when addOnBlur is true', () => {
566 |     it('should add an item on blur', fakeAsync(() => {
567 |       const fixture: ComponentFixture<
568 |         TagInputComponentWithAddOnBlur
569 |       > = TestBed.createComponent(TagInputComponentWithAddOnBlur);
570 | 
571 |       const component: TagInputComponent = getComponent(fixture);
572 | 
573 |       component.setInputValue('New Item');
574 |       component.inputForm.onBlur.emit();
575 | 
576 |       tick(100);
577 | 
578 |       expect(component.items.length).toEqual(3);
579 | 
580 |       discardPeriodicTasks();
581 |     }));
582 | 
583 |     it('should not add an item on blur if the dropdown is visible', fakeAsync(() => {
584 |       let keyUp: Event = new Event('keyUp');
585 |       keyUp['keyCode'] = 73;
586 | 
587 |       const fixture: ComponentFixture<
588 |         TagInputComponentWithAddOnBlur
589 |       > = TestBed.createComponent(TagInputComponentWithAddOnBlur);
590 | 
591 |       const component: TagInputComponent = getComponent(fixture);
592 | 
593 |       component.setInputValue('i');
594 |       component.dropdown.show();
595 | 
596 |       fixture.detectChanges();
597 |       tick();
598 | 
599 |       expect(component.dropdown.isVisible).toEqual(true);
600 | 
601 |       component.inputForm.onBlur.emit();
602 | 
603 |       expect(component.items.length).toEqual(2);
604 | 
605 |       discardPeriodicTasks();
606 |     }));
607 |   });
608 | 
609 |   describe('when using hooks onAdding and onRemoving', () => {
610 |     let fixture: ComponentFixture<TagInputComponentWithHooks>;
611 | 
612 |     beforeEach(() => {
613 |       fixture = TestBed.createComponent(TagInputComponentWithHooks);
614 |     });
615 | 
616 |     it('intercepts hook onAdding and returns an observable', () => {
617 |       fakeAsync(async () => {
618 |         const component: TagInputComponent = getComponent(fixture);
619 |         const subject = new Subject();
620 |         const tag = component.createTag('tag');
621 | 
622 |         component.onAdding = () => {
623 |           return subject;
624 |         };
625 | 
626 |         await component.onAddingRequested(false, tag);
627 | 
628 |         expect(component.items.length).toBe(2);
629 | 
630 |         subject.next(tag);
631 | 
632 |         expect(component.items.length).toBe(3);
633 |       });
634 |     });
635 | 
636 |     it('intercepts hook onRemoving and returns an observable', () => {
637 |       fakeAsync(async () => {
638 |         const component: TagInputComponent = getComponent(fixture);
639 |         const subject = new Subject();
640 | 
641 |         component.onRemoving = () => {
642 |           return subject;
643 |         };
644 | 
645 |         const tag = component.items[0];
646 | 
647 |         await component.onRemoveRequested(tag, 0);
648 | 
649 |         expect(component.items.length).toBe(2);
650 | 
651 |         subject.next(tag);
652 | 
653 |         expect(component.items.length).toBe(1);
654 |       });
655 |     });
656 |   });
657 | 
658 |   describe('when editing an editable tag', () => {
659 |     let keyDown: Event = new Event('keydown'),
660 |       fixture: ComponentFixture<TagInputComponentEditable>,
661 |       component;
662 | 
663 |     beforeEach(() => {
664 |       fixture = TestBed.createComponent(TagInputComponentEditable);
665 |     });
666 | 
667 |     it('does not switch tags upon arrow or backspace keydown events', fakeAsync(() => {
668 |       component = getComponent(fixture);
669 | 
670 |       // selected tag is undefined
671 |       expect(component.selectedTag).toEqual(undefined);
672 | 
673 |       // enable editing mode
674 |       component.tags.first.toggleEditMode();
675 | 
676 |       // when in editing mode, Left/right arrow keys and backspace should not be passed to the tag-input.
677 |       component.tags.first.onKeyDown.subscribe(event =>
678 |         fail('Key event: ' + event.event.keyCode + ' passed to tag-input')
679 |       );
680 | 
681 |       // press left arrow key
682 |       keyDown['keyCode'] = 37;
683 |       component.tags.first.element.nativeElement.dispatchEvent(keyDown);
684 | 
685 |       // press right arrow key
686 |       keyDown['keyCode'] = 39;
687 |       component.tags.first.element.nativeElement.dispatchEvent(keyDown);
688 | 
689 |       // press backspace
690 |       keyDown['keyCode'] = 8;
691 |       component.tags.first.element.nativeElement.dispatchEvent(keyDown);
692 | 
693 |       expect(component.tags.first.editing).toEqual(true);
694 | 
695 |       expect(component.items.length).toEqual(2);
696 | 
697 |       discardPeriodicTasks();
698 |     }));
699 | 
700 |     it('disables edit mode upon enter keydown event', fakeAsync(() => {
701 |       component = getComponent(fixture);
702 | 
703 |       // selected tag is undefined
704 |       expect(component.selectedTag).toEqual(undefined);
705 | 
706 |       // enable editing mode
707 |       component.tags.first.toggleEditMode();
708 | 
709 |       // press enter
710 |       keyDown['keyCode'] = 13;
711 |       component.tags.first.element.nativeElement.dispatchEvent(keyDown);
712 | 
713 |       expect(component.tags.first.editing).toEqual(false);
714 | 
715 |       expect(component.items.length).toEqual(2);
716 | 
717 |       discardPeriodicTasks();
718 |     }));
719 |   });
720 | });
721 | 


--------------------------------------------------------------------------------
/modules/components/tag-input/tag-input.style.scss:
--------------------------------------------------------------------------------
1 | @import "../../core/styles/themes/_themes.scss";
2 | @import "../../core/styles/components/_components.scss";
3 | 
4 | :host {
5 |   display: block;
6 | }
7 | 


--------------------------------------------------------------------------------
/modules/components/tag-input/tag-input.template.html:
--------------------------------------------------------------------------------
 1 | <div
 2 |     [ngClass]="theme"
 3 |     class="ng2-tag-input"
 4 |     (click)="focus(true, false)"
 5 |     [attr.tabindex]="-1"
 6 |     (drop)="dragZone ? onTagDropped($event, undefined) : undefined"
 7 |     (dragenter)="dragZone ? onDragOver($event) : undefined"
 8 |     (dragover)="dragZone ? onDragOver($event) : undefined"
 9 |     (dragend)="dragZone ? dragProvider.onDragEnd() : undefined"
10 |     [class.ng2-tag-input--dropping]="isDropping()"
11 |     [class.ng2-tag-input--disabled]="disable"
12 |     [class.ng2-tag-input--loading]="isLoading"
13 |     [class.ng2-tag-input--invalid]="hasErrors()"
14 |     [class.ng2-tag-input--focused]="isInputFocused()"
15 | >
16 | 
17 |     <!-- TAGS -->
18 |     <div class="ng2-tags-container">
19 |         <tag
20 |             *ngFor="let item of items; let i = index; trackBy: trackBy"
21 |             (onSelect)="selectItem(item)"
22 |             (onRemove)="onRemoveRequested(item, i)"
23 |             (onKeyDown)="handleKeydown($event)"
24 |             (onTagEdited)="updateEditedTag($event)"
25 |             (onBlur)="onTagBlurred($event, i)"
26 |             draggable="{{ editable }}"
27 |             (dragstart)="dragZone ? onDragStarted($event, item, i) : undefined"
28 |             (drop)="dragZone ? onTagDropped($event, i) : undefined"
29 |             (dragenter)="dragZone ? onDragOver($event) : undefined"
30 |             (dragover)="dragZone ? onDragOver($event, i) : undefined"
31 |             (dragleave)="dragZone ? dragProvider.onDragEnd() : undefined"
32 |             [canAddTag]="isTagValid"
33 |             [attr.tabindex]="0"
34 |             [disabled]="disable"
35 |             [@animation]="animationMetadata"
36 |             [hasRipple]="ripple"
37 |             [index]="i"
38 |             [removable]="removable"
39 |             [editable]="editable"
40 |             [displayBy]="displayBy"
41 |             [identifyBy]="identifyBy"
42 |             [template]="!!hasCustomTemplate() ? templates.first : undefined"
43 |             [draggable]="dragZone"
44 |             [model]="item"
45 |         >
46 |         </tag>
47 | 
48 |         <tag-input-form
49 |             (onSubmit)="onFormSubmit()"
50 |             (onBlur)="blur()"
51 |             (click)="dropdown ? dropdown.show() : undefined"
52 |             (onKeydown)="fireEvents('keydown', $event)"
53 |             (onKeyup)="fireEvents('keyup', $event)"
54 |             [inputText]="inputText"
55 |             [disabled]="disable"
56 |             [validators]="validators"
57 |             [asyncValidators]="asyncValidators"
58 |             [hidden]="maxItemsReached"
59 |             [placeholder]="items.length ? placeholder : secondaryPlaceholder"
60 |             [inputClass]="inputClass"
61 |             [inputId]="inputId"
62 |             [tabindex]="tabindex"
63 |         >
64 |         </tag-input-form>
65 |     </div>
66 | 
67 |     <div
68 |         class="progress-bar"
69 |         *ngIf="isProgressBarVisible$ | async"
70 |     ></div>
71 | </div>
72 | 
73 | <!-- ERRORS -->
74 | <div
75 |     *ngIf="hasErrors()"
76 |     [ngClass]="theme"
77 |     class="error-messages"
78 | >
79 |     <p
80 |         *ngFor="let error of errors"
81 |         class="error-message"
82 |     >
83 |         <span>{{ error }}</span>
84 |     </p>
85 | </div>
86 | <ng-content></ng-content>
87 | 


--------------------------------------------------------------------------------
/modules/components/tag-input/tag-input.ts:
--------------------------------------------------------------------------------
   1 | // angular
   2 | import {
   3 |     Component,
   4 |     forwardRef,
   5 |     HostBinding,
   6 |     Input,
   7 |     Output,
   8 |     EventEmitter,
   9 |     Renderer2,
  10 |     ViewChild,
  11 |     ViewChildren,
  12 |     ContentChildren,
  13 |     ContentChild,
  14 |     OnInit,
  15 |     TemplateRef,
  16 |     QueryList,
  17 |     AfterViewInit
  18 | } from '@angular/core';
  19 | 
  20 | import {
  21 |     AsyncValidatorFn,
  22 |     FormControl,
  23 |     NG_VALUE_ACCESSOR,
  24 |     ValidatorFn
  25 | } from '@angular/forms';
  26 | 
  27 | // rx
  28 | import { Observable, debounceTime, filter, map, first } from 'rxjs';
  29 | 
  30 | // ng2-tag-input
  31 | import { TagInputAccessor } from '../../core/accessor';
  32 | import { TagModel } from '../../core/tag-model';
  33 | 
  34 | import { listen } from '../../core/helpers/listen';
  35 | import * as constants from '../../core/constants';
  36 | 
  37 | import { DragProvider, DraggedTag } from '../../core/providers/drag-provider';
  38 | 
  39 | import { TagInputForm } from '../tag-input-form/tag-input-form.component';
  40 | import { TagComponent } from '../tag/tag.component';
  41 | 
  42 | import { animations } from './animations';
  43 | import { defaults } from '../../defaults';
  44 | import { TagInputDropdown } from '../dropdown/tag-input-dropdown.component';
  45 | 
  46 | const CUSTOM_ACCESSOR = {
  47 |     provide: NG_VALUE_ACCESSOR,
  48 |     useExisting: forwardRef(() => TagInputComponent),
  49 |     multi: true
  50 | };
  51 | 
  52 | @Component({
  53 |     selector: 'tag-input',
  54 |     providers: [CUSTOM_ACCESSOR],
  55 |     styleUrls: ['./tag-input.style.scss'],
  56 |     templateUrl: './tag-input.template.html',
  57 |     animations
  58 | })
  59 | export class TagInputComponent extends TagInputAccessor implements OnInit, AfterViewInit {
  60 |     /**
  61 |      * @name separatorKeys
  62 |      * @desc keyboard keys with which a user can separate items
  63 |      */
  64 |     @Input() public separatorKeys: string[] = defaults.tagInput.separatorKeys;
  65 | 
  66 |     /**
  67 |      * @name separatorKeyCodes
  68 |      * @desc keyboard key codes with which a user can separate items
  69 |      */
  70 |     @Input() public separatorKeyCodes: number[] = defaults.tagInput.separatorKeyCodes;
  71 | 
  72 |     /**
  73 |      * @name placeholder
  74 |      * @desc the placeholder of the input text
  75 |      */
  76 |     @Input() public placeholder: string = defaults.tagInput.placeholder;
  77 | 
  78 |     /**
  79 |      * @name secondaryPlaceholder
  80 |      * @desc placeholder to appear when the input is empty
  81 |      */
  82 |     @Input() public secondaryPlaceholder: string = defaults.tagInput.secondaryPlaceholder;
  83 | 
  84 |     /**
  85 |      * @name maxItems
  86 |      * @desc maximum number of items that can be added
  87 |      */
  88 |     @Input() public maxItems: number = defaults.tagInput.maxItems;
  89 | 
  90 |     /**
  91 |      * @name validators
  92 |      * @desc array of Validators that are used to validate the tag before it gets appended to the list
  93 |      */
  94 |     @Input() public validators: ValidatorFn[] = defaults.tagInput.validators;
  95 | 
  96 |     /**
  97 |      * @name asyncValidators
  98 |      * @desc array of AsyncValidator that are used to validate the tag before it gets appended to the list
  99 |      */
 100 |     @Input() public asyncValidators: AsyncValidatorFn[] = defaults.tagInput.asyncValidators;
 101 | 
 102 |     /**
 103 |     * - if set to true, it will only possible to add items from the autocomplete
 104 |     * @name onlyFromAutocomplete
 105 |     */
 106 |     @Input() public onlyFromAutocomplete = defaults.tagInput.onlyFromAutocomplete;
 107 | 
 108 |     /**
 109 |      * @name errorMessages
 110 |      */
 111 |     @Input() public errorMessages: { [key: string]: string } = defaults.tagInput.errorMessages;
 112 | 
 113 |     /**
 114 |      * @name theme
 115 |      */
 116 |     @Input() public theme: string = defaults.tagInput.theme;
 117 | 
 118 |     /**
 119 |      * @name onTextChangeDebounce
 120 |      */
 121 |     @Input() public onTextChangeDebounce = defaults.tagInput.onTextChangeDebounce;
 122 | 
 123 |     /**
 124 |      * - custom id assigned to the input
 125 |      * @name id
 126 |      */
 127 |     @Input() public inputId = defaults.tagInput.inputId;
 128 | 
 129 |     /**
 130 |      * - custom class assigned to the input
 131 |      */
 132 |     @Input() public inputClass: string = defaults.tagInput.inputClass;
 133 | 
 134 |     /**
 135 |      * - option to clear text input when the form is blurred
 136 |      * @name clearOnBlur
 137 |      */
 138 |     @Input() public clearOnBlur: boolean = defaults.tagInput.clearOnBlur;
 139 | 
 140 |     /**
 141 |      * - hideForm
 142 |      * @name clearOnBlur
 143 |      */
 144 |     @Input() public hideForm: boolean = defaults.tagInput.hideForm;
 145 | 
 146 |     /**
 147 |      * @name addOnBlur
 148 |      */
 149 |     @Input() public addOnBlur: boolean = defaults.tagInput.addOnBlur;
 150 | 
 151 |     /**
 152 |      * @name addOnPaste
 153 |      */
 154 |     @Input() public addOnPaste: boolean = defaults.tagInput.addOnPaste;
 155 | 
 156 |     /**
 157 |      * - pattern used with the native method split() to separate patterns in the string pasted
 158 |      * @name pasteSplitPattern
 159 |      */
 160 |     @Input() public pasteSplitPattern = defaults.tagInput.pasteSplitPattern;
 161 | 
 162 |     /**
 163 |      * @name blinkIfDupe
 164 |      */
 165 |     @Input() public blinkIfDupe = defaults.tagInput.blinkIfDupe;
 166 | 
 167 |     /**
 168 |      * @name removable
 169 |      */
 170 |     @Input() public removable = defaults.tagInput.removable;
 171 | 
 172 |     /**
 173 |      * @name editable
 174 |      */
 175 |     @Input() public editable: boolean = defaults.tagInput.editable;
 176 | 
 177 |     /**
 178 |      * @name allowDupes
 179 |      */
 180 |     @Input() public allowDupes = defaults.tagInput.allowDupes;
 181 | 
 182 |     /**
 183 |      * @description if set to true, the newly added tags will be added as strings, and not objects
 184 |      * @name modelAsStrings
 185 |      */
 186 |     @Input() public modelAsStrings = defaults.tagInput.modelAsStrings;
 187 | 
 188 |     /**
 189 |      * @name trimTags
 190 |      */
 191 |     @Input() public trimTags = defaults.tagInput.trimTags;
 192 | 
 193 |     /**
 194 |      * @name inputText
 195 |      */
 196 |     @Input() public get inputText(): string {
 197 |         return this.inputTextValue;
 198 |     }
 199 | 
 200 |     /**
 201 |      * @name ripple
 202 |      */
 203 |     @Input() public ripple: boolean = defaults.tagInput.ripple;
 204 | 
 205 |     /**
 206 |      * @name tabindex
 207 |      * @desc pass through the specified tabindex to the input
 208 |      */
 209 |     @Input() public tabindex: string = defaults.tagInput.tabIndex;
 210 | 
 211 |     /**
 212 |      * @name disable
 213 |      */
 214 |     @Input() public disable: boolean = defaults.tagInput.disable;
 215 | 
 216 |     /**
 217 |      * @name dragZone
 218 |      */
 219 |     @Input() public dragZone: string = defaults.tagInput.dragZone;
 220 | 
 221 |     /**
 222 |      * @name onRemoving
 223 |      */
 224 |     @Input() public onRemoving = defaults.tagInput.onRemoving;
 225 | 
 226 |     /**
 227 |      * @name onAdding
 228 |      */
 229 |     @Input() public onAdding = defaults.tagInput.onAdding;
 230 | 
 231 |     /**
 232 |      * @name animationDuration
 233 |      */
 234 |     @Input() public animationDuration = defaults.tagInput.animationDuration;
 235 | 
 236 |     /**
 237 |      * @name onAdd
 238 |      * @desc event emitted when adding a new item
 239 |      */
 240 |     @Output() public onAdd = new EventEmitter<TagModel>();
 241 | 
 242 |     /**
 243 |      * @name onRemove
 244 |      * @desc event emitted when removing an existing item
 245 |      */
 246 |     @Output() public onRemove = new EventEmitter<TagModel>();
 247 | 
 248 |     /**
 249 |      * @name onSelect
 250 |      * @desc event emitted when selecting an item
 251 |      */
 252 |     @Output() public onSelect = new EventEmitter<TagModel>();
 253 | 
 254 |     /**
 255 |      * @name onFocus
 256 |      * @desc event emitted when the input is focused
 257 |      */
 258 |     @Output() public onFocus = new EventEmitter<string>();
 259 | 
 260 |     /**
 261 |      * @name onFocus
 262 |      * @desc event emitted when the input is blurred
 263 |      */
 264 |     @Output() public onBlur = new EventEmitter<string>();
 265 | 
 266 |     /**
 267 |      * @name onTextChange
 268 |      * @desc event emitted when the input value changes
 269 |      */
 270 |     @Output() public onTextChange = new EventEmitter<TagModel>();
 271 | 
 272 |     /**
 273 |      * - output triggered when text is pasted in the form
 274 |      * @name onPaste
 275 |      */
 276 |     @Output() public onPaste = new EventEmitter<string>();
 277 | 
 278 |     /**
 279 |      * - output triggered when tag entered is not valid
 280 |      * @name onValidationError
 281 |      */
 282 |     @Output() public onValidationError = new EventEmitter<TagModel>();
 283 | 
 284 |     /**
 285 |      * - output triggered when tag is edited
 286 |      * @name onTagEdited
 287 |      */
 288 |     @Output() public onTagEdited = new EventEmitter<TagModel>();
 289 | 
 290 |     /**
 291 |      * @name dropdown
 292 |      */
 293 |     // @ContentChild(forwardRef(() => TagInputDropdown), {static: true}) dropdown: TagInputDropdown;
 294 |     @ContentChild(TagInputDropdown) public dropdown: TagInputDropdown;
 295 |     /**
 296 |      * @name template
 297 |      * @desc reference to the template if provided by the user
 298 |      */
 299 |     @ContentChildren(TemplateRef, { descendants: false }) public templates: QueryList<TemplateRef<any>>;
 300 | 
 301 |     /**
 302 |      * @name inputForm
 303 |      */
 304 |     @ViewChild(TagInputForm) public inputForm: TagInputForm;
 305 | 
 306 |     /**
 307 |      * @name selectedTag
 308 |      * @desc reference to the current selected tag
 309 |      */
 310 |     public selectedTag: TagModel | undefined;
 311 | 
 312 |     /**
 313 |      * @name isLoading
 314 |      */
 315 |     public isLoading = false;
 316 | 
 317 |     /**
 318 |      * @name inputText
 319 |      * @param text
 320 |      */
 321 |     public set inputText(text: string) {
 322 |         this.inputTextValue = text;
 323 |         this.inputTextChange.emit(text);
 324 |     }
 325 | 
 326 |     /**
 327 |      * @name tags
 328 |      * @desc list of Element items
 329 |      */
 330 |     @ViewChildren(TagComponent) public tags: QueryList<TagComponent>;
 331 | 
 332 |     /**
 333 |      * @name listeners
 334 |      * @desc array of events that get fired using @fireEvents
 335 |      */
 336 |     private listeners = {
 337 |         [constants.KEYDOWN]: <{ (fun): any }[]>[],
 338 |         [constants.KEYUP]: <{ (fun): any }[]>[]
 339 |     };
 340 | 
 341 |     /**
 342 |      * @description emitter for the 2-way data binding inputText value
 343 |      * @name inputTextChange
 344 |      */
 345 |     @Output() public inputTextChange: EventEmitter<string> = new EventEmitter();
 346 | 
 347 |     /**
 348 |      * @description private variable to bind get/set
 349 |      * @name inputTextValue
 350 |      */
 351 |     public inputTextValue = '';
 352 | 
 353 |     /**
 354 |      * @desc removes the tab index if it is set - it will be passed through to the input
 355 |      * @name tabindexAttr
 356 |      */
 357 |     @HostBinding('attr.tabindex')
 358 |     public get tabindexAttr(): string {
 359 |         return this.tabindex !== '' ? '-1' : '';
 360 |     }
 361 | 
 362 |     /**
 363 |      * @name animationMetadata
 364 |      */
 365 |     public animationMetadata: { value: string, params: object };
 366 | 
 367 |     public errors: string[] = [];
 368 | 
 369 |     public isProgressBarVisible$: Observable<boolean>;
 370 | 
 371 |     constructor(private readonly renderer: Renderer2,
 372 |         public readonly dragProvider: DragProvider) {
 373 |         super();
 374 |     }
 375 | 
 376 |     /**
 377 |      * @name ngAfterViewInit
 378 |      */
 379 |     public ngAfterViewInit(): void {
 380 |         // set up listeners
 381 | 
 382 |         this.setUpKeypressListeners();
 383 |         this.setupSeparatorKeysListener();
 384 |         this.setUpInputKeydownListeners();
 385 | 
 386 |         if (this.onTextChange.observers.length) {
 387 |             this.setUpTextChangeSubscriber();
 388 |         }
 389 | 
 390 |         // if clear on blur is set to true, subscribe to the event and clear the text's form
 391 |         if (this.clearOnBlur || this.addOnBlur) {
 392 |             this.setUpOnBlurSubscriber();
 393 |         }
 394 | 
 395 |         // if addOnPaste is set to true, register the handler and add items
 396 |         if (this.addOnPaste) {
 397 |             this.setUpOnPasteListener();
 398 |         }
 399 | 
 400 |         const statusChanges$ = this.inputForm.form.statusChanges;
 401 | 
 402 |         statusChanges$.pipe(
 403 |             filter((status: string) => status !== 'PENDING')
 404 |         ).subscribe(() => {
 405 |             this.errors = this.inputForm.getErrorMessages(this.errorMessages);
 406 |         });
 407 | 
 408 |         this.isProgressBarVisible$ = statusChanges$.pipe(
 409 |             map((status: string) => {
 410 |                 return status === 'PENDING' || this.isLoading;
 411 |             })
 412 |         );
 413 | 
 414 |         // if hideForm is set to true, remove the input
 415 |         if (this.hideForm) {
 416 |             this.inputForm.destroy();
 417 |         }
 418 |     }
 419 | 
 420 |     /**
 421 |      * @name ngOnInit
 422 |      */
 423 |     public ngOnInit(): void {
 424 |         // if the number of items specified in the model is > of the value of maxItems
 425 |         // degrade gracefully and let the max number of items to be the number of items in the model
 426 |         // though, warn the user.
 427 |         const hasReachedMaxItems = this.maxItems !== undefined &&
 428 |             this.items &&
 429 |             this.items.length > this.maxItems;
 430 | 
 431 |         if (hasReachedMaxItems) {
 432 |             this.maxItems = this.items.length;
 433 |             console.warn(constants.MAX_ITEMS_WARNING);
 434 |         }
 435 | 
 436 |         // Setting editable to false to fix problem with tags in IE still being editable when
 437 |         // onlyFromAutocomplete is true
 438 |         this.editable = this.onlyFromAutocomplete ? false : this.editable;
 439 | 
 440 |         this.setAnimationMetadata();
 441 |     }
 442 | 
 443 |     /**
 444 |      * @name onRemoveRequested
 445 |      * @param tag
 446 |      * @param index
 447 |      */
 448 |     public onRemoveRequested(tag: TagModel, index: number): Promise<TagModel> {
 449 |         return new Promise(resolve => {
 450 |             const subscribeFn = (model: TagModel) => {
 451 |                 this.removeItem(model, index);
 452 |                 resolve(tag);
 453 |             };
 454 | 
 455 |             this.onRemoving ?
 456 |                 this.onRemoving(tag)
 457 |                     .pipe(first())
 458 |                     .subscribe(subscribeFn) : subscribeFn(tag);
 459 |         });
 460 |     }
 461 | 
 462 |     /**
 463 |      * @name onAddingRequested
 464 |      * @param fromAutocomplete {boolean}
 465 |      * @param tag {TagModel}
 466 |      * @param index? {number}
 467 |      * @param giveupFocus? {boolean}
 468 |      */
 469 |     public onAddingRequested(fromAutocomplete: boolean, tag: TagModel,
 470 |         index?: number, giveupFocus?: boolean): Promise<TagModel> {
 471 |         return new Promise((resolve, reject) => {
 472 |             const subscribeFn = (model: TagModel) => {
 473 |                 return this
 474 |                     .addItem(fromAutocomplete, model, index, giveupFocus)
 475 |                     .then(resolve)
 476 |                     .catch(reject);
 477 |             };
 478 | 
 479 |             return this.onAdding ?
 480 |                 this.onAdding(tag)
 481 |                     .pipe(first())
 482 |                     .subscribe(subscribeFn, reject) : subscribeFn(tag);
 483 |         });
 484 |     }
 485 | 
 486 |     /**
 487 |      * @name appendTag
 488 |      * @param tag {TagModel}
 489 |      */
 490 |     public appendTag = (tag: TagModel, index = this.items.length): void => {
 491 |         const items = this.items;
 492 |         const model = this.modelAsStrings ? tag[this.identifyBy] : tag;
 493 | 
 494 |         this.items = [
 495 |             ...items.slice(0, index),
 496 |             model,
 497 |             ...items.slice(index, items.length)
 498 |         ];
 499 |     }
 500 | 
 501 |     /**
 502 |      * @name createTag
 503 |      * @param model
 504 |      */
 505 |     public createTag = (model: TagModel): TagModel => {
 506 |         const trim = (val: TagModel, key: string): TagModel => {
 507 |             return typeof val === 'string' ? val.trim() : val[key];
 508 |         };
 509 | 
 510 |         return {
 511 |             ...typeof model !== 'string' ? model : {},
 512 |             [this.displayBy]: this.trimTags ? trim(model, this.displayBy) : model,
 513 |             [this.identifyBy]: this.trimTags ? trim(model, this.identifyBy) : model
 514 |         };
 515 |     }
 516 | 
 517 |     /**
 518 |      * @name selectItem
 519 |      * @desc selects item passed as parameter as the selected tag
 520 |      * @param item
 521 |      * @param emit
 522 |      */
 523 |     public selectItem(item: TagModel | undefined, emit = true): void {
 524 |         const isReadonly = item && typeof item !== 'string' && item.readonly;
 525 | 
 526 |         if (isReadonly || this.selectedTag === item) {
 527 |             return;
 528 |         }
 529 | 
 530 |         this.selectedTag = item;
 531 | 
 532 |         if (emit) {
 533 |             this.onSelect.emit(item);
 534 |         }
 535 |     }
 536 | 
 537 |     /**
 538 |      * @name fireEvents
 539 |      * @desc goes through the list of the events for a given eventName, and fires each of them
 540 |      * @param eventName
 541 |      * @param $event
 542 |      */
 543 |     public fireEvents(eventName: string, $event?): void {
 544 |         this.listeners[eventName].forEach(listener => listener.call(this, $event));
 545 |     }
 546 | 
 547 |     /**
 548 |      * @name handleKeydown
 549 |      * @desc handles action when the user hits a keyboard key
 550 |      * @param data
 551 |      */
 552 |     public handleKeydown(data: any): void {
 553 |         const event = data.event;
 554 |         const key = event.keyCode || event.which;
 555 |         const shiftKey = event.shiftKey || false;
 556 | 
 557 |         switch (constants.KEY_PRESS_ACTIONS[key]) {
 558 |             case constants.ACTIONS_KEYS.DELETE:
 559 |                 if (this.selectedTag && this.removable) {
 560 |                     const index = this.items.indexOf(this.selectedTag);
 561 |                     this.onRemoveRequested(this.selectedTag, index);
 562 |                 }
 563 |                 break;
 564 | 
 565 |             case constants.ACTIONS_KEYS.SWITCH_PREV:
 566 |                 this.moveToTag(data.model, constants.PREV);
 567 |                 break;
 568 | 
 569 |             case constants.ACTIONS_KEYS.SWITCH_NEXT:
 570 |                 this.moveToTag(data.model, constants.NEXT);
 571 |                 break;
 572 | 
 573 |             case constants.ACTIONS_KEYS.TAB:
 574 |                 if (shiftKey) {
 575 |                     if (this.isFirstTag(data.model)) {
 576 |                         return;
 577 |                     }
 578 | 
 579 |                     this.moveToTag(data.model, constants.PREV);
 580 |                 } else {
 581 |                     if (this.isLastTag(data.model) && (this.disable || this.maxItemsReached)) {
 582 |                         return;
 583 |                     }
 584 | 
 585 |                     this.moveToTag(data.model, constants.NEXT);
 586 |                 }
 587 |                 break;
 588 | 
 589 |             default:
 590 |                 return;
 591 |         }
 592 | 
 593 |         // prevent default behaviour
 594 |         event.preventDefault();
 595 |     }
 596 | 
 597 |     public async onFormSubmit() {
 598 |         try {
 599 |             await this.onAddingRequested(false, this.formValue);
 600 |         } catch {
 601 |             return;
 602 |         }
 603 |     }
 604 | 
 605 |     /**
 606 |      * @name setInputValue
 607 |      * @param value
 608 |      */
 609 |     public setInputValue(value: string, emitEvent = true): void {
 610 |         const control = this.getControl();
 611 | 
 612 |         // update form value with the transformed item
 613 |         control.setValue(value, { emitEvent });
 614 |     }
 615 | 
 616 |     /**
 617 |      * @name getControl
 618 |      */
 619 |     private getControl(): FormControl {
 620 |         return this.inputForm.value as FormControl;
 621 |     }
 622 | 
 623 |     /**
 624 |      * @name focus
 625 |      * @param applyFocus
 626 |      * @param displayAutocomplete
 627 |      */
 628 |     public focus(applyFocus = false, displayAutocomplete = false): void {
 629 |         if (this.dragProvider.getState('dragging')) {
 630 |             return;
 631 |         }
 632 | 
 633 |         this.selectItem(undefined, false);
 634 | 
 635 |         if (applyFocus) {
 636 |             this.inputForm.focus();
 637 |             this.onFocus.emit(this.formValue);
 638 |         }
 639 |     }
 640 | 
 641 |     /**
 642 |      * @name blur
 643 |      */
 644 |     public blur(): void {
 645 |         this.onTouched();
 646 | 
 647 |         this.onBlur.emit(this.formValue);
 648 |     }
 649 | 
 650 |     /**
 651 |      * @name hasErrors
 652 |      */
 653 |     public hasErrors(): boolean {
 654 |         return !!this.inputForm && this.inputForm.hasErrors();
 655 |     }
 656 | 
 657 |     /**
 658 |      * @name isInputFocused
 659 |      */
 660 |     public isInputFocused(): boolean {
 661 |         return !!this.inputForm && this.inputForm.isInputFocused();
 662 |     }
 663 | 
 664 |     /**
 665 |      * - this is the one way I found to tell if the template has been passed and it is not
 666 |      * the template for the menu item
 667 |      * @name hasCustomTemplate
 668 |      */
 669 |     public hasCustomTemplate(): boolean {
 670 |         const template = this.templates ? this.templates.first : undefined;
 671 |         const menuTemplate = this.dropdown && this.dropdown.templates ?
 672 |             this.dropdown.templates.first : undefined;
 673 | 
 674 |         return Boolean(template && template !== menuTemplate);
 675 |     }
 676 | 
 677 |     /**
 678 |      * @name maxItemsReached
 679 |      */
 680 |     public get maxItemsReached(): boolean {
 681 |         return this.maxItems !== undefined &&
 682 |             this.items.length >= this.maxItems;
 683 |     }
 684 | 
 685 |     /**
 686 |      * @name formValue
 687 |      */
 688 |     public get formValue(): string {
 689 |         const form = this.inputForm.value;
 690 | 
 691 |         return form ? form.value : '';
 692 |     }
 693 | 
 694 |     /**3
 695 |      * @name onDragStarted
 696 |      * @param event
 697 |      * @param index
 698 |      */
 699 |     public onDragStarted(event: DragEvent, tag: TagModel, index: number): void {
 700 |         event.stopPropagation();
 701 | 
 702 |         const item = { zone: this.dragZone, tag, index } as DraggedTag;
 703 | 
 704 |         this.dragProvider.setSender(this);
 705 |         this.dragProvider.setDraggedItem(event, item);
 706 |         this.dragProvider.setState({ dragging: true, index });
 707 |     }
 708 | 
 709 |     /**
 710 |      * @name onDragOver
 711 |      * @param event
 712 |      */
 713 |     public onDragOver(event: DragEvent, index?: number): void {
 714 |         this.dragProvider.setState({ dropping: true });
 715 |         this.dragProvider.setReceiver(this);
 716 | 
 717 |         event.preventDefault();
 718 |     }
 719 | 
 720 |     /**
 721 |      * @name onTagDropped
 722 |      * @param event
 723 |      * @param index
 724 |      */
 725 |     public onTagDropped(event: DragEvent, index?: number): void {
 726 |         const item = this.dragProvider.getDraggedItem(event);
 727 | 
 728 |         if (!item || item.zone !== this.dragZone) {
 729 |             return;
 730 |         }
 731 | 
 732 |         this.dragProvider.onTagDropped(item.tag, item.index, index);
 733 | 
 734 |         event.preventDefault();
 735 |         event.stopPropagation();
 736 |     }
 737 | 
 738 |     /**
 739 |      * @name isDropping
 740 |      */
 741 |     public isDropping(): boolean {
 742 |         const isReceiver = this.dragProvider.receiver === this;
 743 |         const isDropping = this.dragProvider.getState('dropping');
 744 | 
 745 |         return Boolean(isReceiver && isDropping);
 746 |     }
 747 | 
 748 |     /**
 749 |      * @name onTagBlurred
 750 |      * @param changedElement {TagModel}
 751 |      * @param index {number}
 752 |      */
 753 |     public onTagBlurred(changedElement: TagModel, index: number): void {
 754 |         this.items[index] = changedElement;
 755 |         this.blur();
 756 |     }
 757 | 
 758 |     /**
 759 |      * @name trackBy
 760 |      * @param items
 761 |      */
 762 |     public trackBy(index: number, item: TagModel): string {
 763 |         return item[this.identifyBy];
 764 |     }
 765 | 
 766 |     /**
 767 |      * @name updateEditedTag
 768 |      * @param tag
 769 |      */
 770 |     public updateEditedTag(tag: TagModel): void {
 771 |         this.onTagEdited.emit(tag);
 772 |     }
 773 | 
 774 |     /**
 775 |      *
 776 |      * @param tag
 777 |      * @param isFromAutocomplete
 778 |      */
 779 |     public isTagValid = (tag: TagModel, fromAutocomplete = false): boolean => {
 780 |         const selectedItem = this.dropdown ? this.dropdown.selectedItem : undefined;
 781 |         const value = this.getItemDisplay(tag).trim();
 782 | 
 783 |         if (selectedItem && !fromAutocomplete || !value) {
 784 |             return false;
 785 |         }
 786 | 
 787 |         const dupe = this.findDupe(tag, fromAutocomplete);
 788 | 
 789 |         // if so, give a visual cue and return false
 790 |         if (!this.allowDupes && dupe && this.blinkIfDupe) {
 791 |             const model = this.tags.find(item => {
 792 |                 return this.getItemValue(item.model) === this.getItemValue(dupe);
 793 |             });
 794 | 
 795 |             if (model) {
 796 |                 model.blink();
 797 |             }
 798 |         }
 799 | 
 800 |         const isFromAutocomplete = fromAutocomplete && this.onlyFromAutocomplete;
 801 | 
 802 |         const assertions = [
 803 |             // 1. there must be no dupe OR dupes are allowed
 804 |             !dupe || this.allowDupes,
 805 | 
 806 |             // 2. check max items has not been reached
 807 |             !this.maxItemsReached,
 808 | 
 809 |             // 3. check item comes from autocomplete or onlyFromAutocomplete is false
 810 |             ((isFromAutocomplete) || !this.onlyFromAutocomplete)
 811 |         ];
 812 | 
 813 |         return assertions.filter(Boolean).length === assertions.length;
 814 |     }
 815 | 
 816 |     /**
 817 |      * @name moveToTag
 818 |      * @param item
 819 |      * @param direction
 820 |      */
 821 |     private moveToTag(item: TagModel, direction: string): void {
 822 |         const isLast = this.isLastTag(item);
 823 |         const isFirst = this.isFirstTag(item);
 824 |         const stopSwitch = (direction === constants.NEXT && isLast) ||
 825 |             (direction === constants.PREV && isFirst);
 826 | 
 827 |         if (stopSwitch) {
 828 |             this.focus(true);
 829 |             return;
 830 |         }
 831 | 
 832 |         const offset = direction === constants.NEXT ? 1 : -1;
 833 |         const index = this.getTagIndex(item) + offset;
 834 |         const tag = this.getTagAtIndex(index);
 835 | 
 836 |         return tag.select.call(tag);
 837 |     }
 838 | 
 839 |     /**
 840 |      * @name isFirstTag
 841 |      * @param item {TagModel}
 842 |      */
 843 |     private isFirstTag(item: TagModel): boolean {
 844 |         return this.tags.first.model === item;
 845 |     }
 846 | 
 847 |     /**
 848 |      * @name isLastTag
 849 |      * @param item {TagModel}
 850 |      */
 851 |     private isLastTag(item: TagModel): boolean {
 852 |         return this.tags.last.model === item;
 853 |     }
 854 | 
 855 |     /**
 856 |      * @name getTagIndex
 857 |      * @param item
 858 |      */
 859 |     private getTagIndex(item: TagModel): number {
 860 |         const tags = this.tags.toArray();
 861 | 
 862 |         return tags.findIndex(tag => tag.model === item);
 863 |     }
 864 | 
 865 |     /**
 866 |      * @name getTagAtIndex
 867 |      * @param index
 868 |      */
 869 |     private getTagAtIndex(index: number) {
 870 |         const tags = this.tags.toArray();
 871 | 
 872 |         return tags[index];
 873 |     }
 874 | 
 875 |     /**
 876 |      * @name removeItem
 877 |      * @desc removes an item from the array of the model
 878 |      * @param tag {TagModel}
 879 |      * @param index {number}
 880 |      */
 881 |     public removeItem(tag: TagModel, index: number): void {
 882 |         this.items = this.getItemsWithout(index);
 883 | 
 884 |         // if the removed tag was selected, set it as undefined
 885 |         if (this.selectedTag === tag) {
 886 |             this.selectItem(undefined, false);
 887 |         }
 888 | 
 889 |         // focus input
 890 |         this.focus(true, false);
 891 | 
 892 |         // emit remove event
 893 |         this.onRemove.emit(tag);
 894 |     }
 895 | 
 896 |     /**
 897 |      * @name addItem
 898 |      * @desc adds the current text model to the items array
 899 |      * @param fromAutocomplete {boolean}
 900 |      * @param item {TagModel}
 901 |      * @param index? {number}
 902 |      * @param giveupFocus? {boolean}
 903 |      */
 904 |     private addItem(fromAutocomplete = false, item: TagModel, index?: number, giveupFocus?: boolean):
 905 |         Promise<TagModel> {
 906 |         const display = this.getItemDisplay(item);
 907 |         const tag = this.createTag(item);
 908 | 
 909 |         if (fromAutocomplete) {
 910 |             this.setInputValue(this.getItemValue(item, true));
 911 |         }
 912 | 
 913 |         return new Promise((resolve, reject) => {
 914 |             /**
 915 |              * @name reset
 916 |              */
 917 |             const reset = (): void => {
 918 |                 // reset control and focus input
 919 |                 this.setInputValue('');
 920 | 
 921 |                 if (giveupFocus) {
 922 |                     this.focus(false, false);
 923 |                 } else {
 924 |                     // focus input
 925 |                     this.focus(true, false);
 926 |                 }
 927 | 
 928 |                 resolve(display);
 929 |             };
 930 | 
 931 |             const appendItem = (): void => {
 932 |                 this.appendTag(tag, index);
 933 | 
 934 |                 // emit event
 935 |                 this.onAdd.emit(tag);
 936 | 
 937 |                 if (!this.dropdown) {
 938 |                     return;
 939 |                 }
 940 | 
 941 |                 this.dropdown.hide();
 942 | 
 943 |                 if (this.dropdown.showDropdownIfEmpty) {
 944 |                     this.dropdown.show();
 945 |                 }
 946 |             };
 947 | 
 948 |             const status = this.inputForm.form.status;
 949 |             const isTagValid = this.isTagValid(tag, fromAutocomplete);
 950 | 
 951 |             const onValidationError = () => {
 952 |                 this.onValidationError.emit(tag);
 953 |                 return reject();
 954 |             };
 955 | 
 956 |             if (status === 'VALID' && isTagValid) {
 957 |                 appendItem();
 958 |                 return reset();
 959 |             }
 960 | 
 961 |             if (status === 'INVALID' || !isTagValid) {
 962 |                 reset();
 963 |                 return onValidationError();
 964 |             }
 965 | 
 966 |             if (status === 'PENDING') {
 967 |                 const statusUpdate$ = this.inputForm.form.statusChanges;
 968 | 
 969 |                 return statusUpdate$
 970 |                     .pipe(
 971 |                         filter(statusUpdate => statusUpdate !== 'PENDING'),
 972 |                         first()
 973 |                     )
 974 |                     .subscribe((statusUpdate) => {
 975 |                         if (statusUpdate === 'VALID' && isTagValid) {
 976 |                             appendItem();
 977 |                             return reset();
 978 |                         } else {
 979 |                             reset();
 980 |                             return onValidationError();
 981 |                         }
 982 |                     });
 983 |             }
 984 |         });
 985 |     }
 986 | 
 987 |     /**
 988 |      * @name setupSeparatorKeysListener
 989 |      */
 990 |     private setupSeparatorKeysListener(): void {
 991 |         const useSeparatorKeys = this.separatorKeyCodes.length > 0 || this.separatorKeys.length > 0;
 992 |         const listener = ($event) => {
 993 |             const hasKeyCode = this.separatorKeyCodes.indexOf($event.keyCode) >= 0;
 994 |             const hasKey = this.separatorKeys.indexOf($event.key) >= 0;
 995 |             // the keyCode of keydown event is 229 when IME is processing the key event.
 996 |             const isIMEProcessing = $event.keyCode === 229;
 997 | 
 998 |             if (hasKeyCode || (hasKey && !isIMEProcessing)) {
 999 |                 $event.preventDefault();
1000 |                 this.onAddingRequested(false, this.formValue)
1001 |                     .catch(() => { });
1002 |             }
1003 |         };
1004 | 
1005 |         listen.call(this, constants.KEYDOWN, listener, useSeparatorKeys);
1006 |     }
1007 | 
1008 |     /**
1009 |      * @name setUpKeypressListeners
1010 |      */
1011 |     private setUpKeypressListeners(): void {
1012 |         const listener = ($event) => {
1013 |             const isCorrectKey = $event.keyCode === 37 || $event.keyCode === 8;
1014 | 
1015 |             if (isCorrectKey &&
1016 |                 !this.formValue &&
1017 |                 this.items.length) {
1018 |                 this.tags.last.select.call(this.tags.last);
1019 |             }
1020 |         };
1021 | 
1022 |         // setting up the keypress listeners
1023 |         listen.call(this, constants.KEYDOWN, listener);
1024 |     }
1025 | 
1026 |     /**
1027 |      * @name setUpKeydownListeners
1028 |      */
1029 |     private setUpInputKeydownListeners(): void {
1030 |         this.inputForm.onKeydown.subscribe(event => {
1031 |             if (event.key === 'Backspace' && this.formValue.trim() === '') {
1032 |                 event.preventDefault();
1033 |             }
1034 |         });
1035 |     }
1036 | 
1037 |     /**
1038 |      * @name setUpOnPasteListener
1039 |      */
1040 |     private setUpOnPasteListener() {
1041 |         const input = this.inputForm.input.nativeElement;
1042 | 
1043 |         // attach listener to input
1044 |         this.renderer.listen(input, 'paste', (event) => {
1045 |             this.onPasteCallback(event);
1046 | 
1047 |             event.preventDefault();
1048 |             return true;
1049 |         });
1050 |     }
1051 | 
1052 |     /**
1053 |      * @name setUpTextChangeSubscriber
1054 |      */
1055 |     private setUpTextChangeSubscriber(): void {
1056 |         this.inputForm.form
1057 |             .valueChanges
1058 |             .pipe(
1059 |                 debounceTime(this.onTextChangeDebounce)
1060 |             )
1061 |             .subscribe((value: { item: string }) => {
1062 |                 this.onTextChange.emit(value.item);
1063 |             });
1064 |     }
1065 | 
1066 |     /**
1067 |      * @name setUpOnBlurSubscriber
1068 |      */
1069 |     private setUpOnBlurSubscriber(): void {
1070 |         const filterFn = (): boolean => {
1071 |             const isVisible = this.dropdown && this.dropdown.isVisible;
1072 |             return !isVisible && !!this.formValue;
1073 |         };
1074 | 
1075 |         this.inputForm
1076 |             .onBlur
1077 |             .pipe(
1078 |                 debounceTime(100),
1079 |                 filter(filterFn)
1080 |             )
1081 |             .subscribe(() => {
1082 |                 const reset = () => this.setInputValue('');
1083 | 
1084 |                 if (this.addOnBlur) {
1085 |                     return this
1086 |                         .onAddingRequested(false, this.formValue, undefined, true)
1087 |                         .then(reset)
1088 |                         .catch(reset);
1089 |                 }
1090 | 
1091 |                 reset();
1092 |             });
1093 |     }
1094 | 
1095 |     /**
1096 |      * @name findDupe
1097 |      * @param tag
1098 |      * @param isFromAutocomplete
1099 |      */
1100 |     private findDupe(tag: TagModel, isFromAutocomplete: boolean): TagModel | undefined {
1101 |         const identifyBy = isFromAutocomplete ? this.dropdown.identifyBy : this.identifyBy;
1102 |         const id = tag[identifyBy];
1103 | 
1104 |         return this.items.find(item => this.getItemValue(item) === id);
1105 |     }
1106 | 
1107 |     /**
1108 |      * @name onPasteCallback
1109 |      * @param data
1110 |      */
1111 |     private onPasteCallback = async (data: ClipboardEvent) => {
1112 |         interface IEWindow extends Window {
1113 |             clipboardData: DataTransfer;
1114 |         }
1115 | 
1116 |         const getText = (): string => {
1117 |             const isIE = Boolean((window as IEWindow & typeof globalThis).clipboardData);
1118 |             const clipboardData = isIE ? (
1119 |                 (window as IEWindow & typeof globalThis).clipboardData
1120 |             ) : data.clipboardData;
1121 |             const type = isIE ? 'Text' : 'text/plain';
1122 |             return clipboardData === null ? '' : clipboardData.getData(type) || '';
1123 |         };
1124 | 
1125 |         const text = getText();
1126 | 
1127 |         const requests = text
1128 |             .split(this.pasteSplitPattern)
1129 |             .map(item => {
1130 |                 const tag = this.createTag(item);
1131 |                 this.setInputValue(tag[this.displayBy]);
1132 |                 return this.onAddingRequested(false, tag);
1133 |             });
1134 | 
1135 |         const resetInput = () => setTimeout(() => this.setInputValue(''), 50);
1136 | 
1137 |         Promise.all(requests).then(() => {
1138 |             this.onPaste.emit(text);
1139 |             resetInput();
1140 |         })
1141 |             .catch(resetInput);
1142 |     }
1143 | 
1144 |     /**
1145 |      * @name setAnimationMetadata
1146 |      */
1147 |     private setAnimationMetadata(): void {
1148 |         this.animationMetadata = {
1149 |             value: 'in',
1150 |             params: { ...this.animationDuration }
1151 |         };
1152 |     }
1153 | }
1154 | 


--------------------------------------------------------------------------------
/modules/components/tag-input/tests/testing-helpers.spec.ts:
--------------------------------------------------------------------------------
  1 | import { Component } from '@angular/core';
  2 | import { NgModule } from '@angular/core';
  3 | import { FormsModule } from '@angular/forms';
  4 | import { CommonModule } from '@angular/common';
  5 | 
  6 | import {
  7 |     Validators,
  8 |     FormControl
  9 | } from '@angular/forms';
 10 | 
 11 | import { Observable } from 'rxjs';
 12 | import { of } from 'rxjs';
 13 | 
 14 | import { TagInputModule } from '../../../tag-input.module';
 15 | 
 16 | function getItems() {
 17 |     return ['Javascript', 'Typescript'];
 18 | }
 19 | 
 20 | const validators = [Validators.minLength(3), (control: FormControl) => {
 21 |     if (control.value.charAt(0) !== '@') {
 22 |         return {
 23 |             'startsWithAt@': true
 24 |         };
 25 |     }
 26 |     return null;
 27 | }];
 28 | 
 29 | @Component({
 30 |     selector: 'test-app',
 31 |     template: `<tag-input [(ngModel)]="items"></tag-input>`
 32 | })
 33 | export class BasicTagInputComponent {
 34 |     public items = getItems();
 35 | }
 36 | 
 37 | @Component({
 38 |     selector: 'test-app',
 39 |     template: `<tag-input
 40 |                   [(ngModel)]="items"
 41 |                   (onRemove)="onRemove($event)"
 42 |                   (onAdd)="onAdd($event)">
 43 |               </tag-input>`
 44 | })
 45 | export class TagInputComponentWithOutputs {
 46 |     public items = getItems();
 47 | 
 48 |     onAdd() {}
 49 |     onRemove() {}
 50 | 
 51 |     public validators: any = validators;
 52 | }
 53 | 
 54 | @Component({
 55 |     selector: 'test-app',
 56 |     template: `<tag-input [(ngModel)]="items"></tag-input>`
 57 | })
 58 | export class TagInputComponentTagsAsObjects {
 59 |     public items = [{value: 0, display: 'React'}, {value: 1, display: 'Angular'}];
 60 | }
 61 | 
 62 | @Component({
 63 |     selector: 'test-app',
 64 |     template: `<tag-input [(ngModel)]="items"></tag-input>`
 65 | })
 66 | export class TagInputComponentCustomTagsAsObjects {
 67 |     public items = [{id: 0, name: 'React'}, {id: 1, name: 'Angular'}];
 68 | }
 69 | 
 70 | @Component({
 71 |     selector: 'test-app',
 72 |     template: `<tag-input
 73 |                   [(ngModel)]="items"
 74 |                   [validators]="validators">
 75 |               </tag-input>`
 76 | })
 77 | export class TagInputComponentWithValidation {
 78 |     public items = getItems();
 79 |     validators: any = validators;
 80 | }
 81 | 
 82 | @Component({
 83 |     selector: 'test-app',
 84 |     template: `<tag-input [(ngModel)]="items"
 85 |                           [onAdding]="onAdding">
 86 |                          </tag-input>`
 87 | })
 88 | export class TagInputComponentWithTransformer {
 89 |     public items = getItems();
 90 | 
 91 |     onAdding(value: string): Observable<object> {
 92 |         const item = {display: `prefix: ${value}`, value: `prefix: ${value}`};
 93 |         return of(item);
 94 |     }
 95 | }
 96 | 
 97 | @Component({
 98 |     selector: 'test-app',
 99 |     template: `<tag-input [(ngModel)]="items" [placeholder]="'New Tag'"></tag-input>`
100 | })
101 | export class TagInputComponentWithPlaceholder {
102 |     public items = getItems();
103 | }
104 | 
105 | @Component({
106 |     selector: 'test-app',
107 |     template: `<tag-input [(ngModel)]="items" [maxItems]="2"></tag-input>`
108 | })
109 | export class TagInputComponentWithMaxItems {
110 |     public items = getItems();
111 | }
112 | 
113 | @Component({
114 |     selector: 'test-app',
115 |     template: `<tag-input [(ngModel)]="items">
116 |                     <tag-input-dropdown [autocompleteItems]="['item1', 'item2', 'itam3']"></tag-input-dropdown>
117 |                </tag-input>`
118 | })
119 | export class TagInputComponentWithAutocomplete {
120 |     public items = getItems();
121 | }
122 | 
123 | @Component({
124 |     selector: 'test-app',
125 |     template: `<tag-input [(ngModel)]="items">
126 |                     <ng-template let-item="item">
127 |                         <span class="custom-class">
128 |                             item: {{ item }}
129 |                         </span>
130 | 
131 |                         <span (click)="input.removeItem(item)" class="ng2-tag__remove-button">
132 |                             x
133 |                         </span>
134 |                     </ng-template>
135 |                 </tag-input>`
136 | })
137 | export class TagInputComponentWithTemplate {
138 |     public items = getItems();
139 | }
140 | 
141 | @Component({
142 |     selector: 'test-app',
143 |     template: `<tag-input [(ngModel)]="items"
144 |                            [onlyFromAutocomplete]="true">
145 |                    <tag-input-dropdown [autocompleteItems]="['item1', 'item2', 'itam3']"></tag-input-dropdown>
146 |                </tag-input>`
147 | })
148 | export class TagInputComponentWithOnlyAutocomplete {
149 |     public items = getItems();
150 | }
151 | 
152 | @Component({
153 |     selector: 'test-app',
154 |     template: `<tag-input [(ngModel)]="items" [modelAsStrings]="true"></tag-input>`
155 | })
156 | export class TagInputComponentWithModelAsStrings {
157 |     public items = getItems();
158 | }
159 | 
160 | @Component({
161 |     selector: 'test-app',
162 |     template: `<tag-input [(ngModel)]="items" [addOnBlur]="true">
163 |                    <tag-input-dropdown [autocompleteItems]="['item1', 'item2', 'itam3']"></tag-input-dropdown>
164 |                </tag-input>`
165 | })
166 | export class TagInputComponentWithAddOnBlur {
167 |     public items = getItems();
168 | }
169 | 
170 | @Component({
171 |     selector: 'test-app',
172 |     template: `<tag-input [(ngModel)]="items"
173 |                           [onRemoving]="onRemoving"
174 |                           [onAdding]="onAdding"></tag-input>`
175 | })
176 | export class TagInputComponentWithHooks {
177 |     public items = getItems();
178 | 
179 |     public onAdding(tag): Observable<any> {
180 |         return of({});
181 |     }
182 | 
183 |     public onRemoving(tag): Observable<any> {
184 |         return of({});
185 |     }
186 | }
187 | 
188 | @Component({
189 |     selector: 'test-app',
190 |     template: `<tag-input [(ngModel)]="items"
191 |                           [editable]="true"></tag-input>`
192 | })
193 | export class TagInputComponentEditable {
194 |     public items = getItems();
195 | }
196 | 
197 | const COMPONENTS = [
198 |     BasicTagInputComponent,
199 |     TagInputComponentWithPlaceholder,
200 |     TagInputComponentWithOutputs,
201 |     TagInputComponentWithTransformer,
202 |     TagInputComponentWithValidation,
203 |     TagInputComponentWithMaxItems,
204 |     TagInputComponentWithTemplate,
205 |     TagInputComponentWithAutocomplete,
206 |     TagInputComponentWithOnlyAutocomplete,
207 |     TagInputComponentTagsAsObjects,
208 |     TagInputComponentCustomTagsAsObjects,
209 |     TagInputComponentWithModelAsStrings,
210 |     TagInputComponentWithAddOnBlur,
211 |     TagInputComponentWithHooks,
212 |     TagInputComponentEditable
213 | ];
214 | 
215 | @NgModule({
216 |     imports: [CommonModule, FormsModule, TagInputModule],
217 |     declarations: COMPONENTS,
218 |     exports: COMPONENTS
219 | })
220 | export class TestModule {}
221 | 


--------------------------------------------------------------------------------
/modules/components/tag/index.ts:
--------------------------------------------------------------------------------
1 | export { TagRipple } from './tag-ripple.component';
2 | export { TagComponent } from './tag.component';
3 | 


--------------------------------------------------------------------------------
/modules/components/tag/tag-component.style.scss:
--------------------------------------------------------------------------------
 1 | :host,
 2 | :host > div,
 3 | :host > div:focus {
 4 |     outline: 0;
 5 |     overflow: hidden;
 6 |     transition: opacity 1s;
 7 |     z-index: 1;
 8 | }
 9 | 
10 | :host {
11 |     max-width: 400px;
12 | }
13 | 
14 | :host.blink {
15 |     -webkit-animation: blink 0.3s normal forwards ease-in-out;
16 |     animation: blink 0.3s normal forwards ease-in-out;
17 | }
18 | 
19 | @keyframes blink {
20 |     0% {
21 |         opacity: 0.3;
22 |     }
23 | }
24 | 
25 | :host .disabled {
26 |     cursor: not-allowed;
27 | }
28 | 
29 | :host [contenteditable='true'] {
30 |     outline: 0;
31 | }
32 | 
33 | .tag-wrapper {
34 |     flex-direction: row;
35 |     display: flex;
36 | }
37 | 
38 | .tag__text {
39 |     overflow: hidden;
40 |     text-overflow: ellipsis;
41 |     white-space: nowrap;
42 | }
43 | 


--------------------------------------------------------------------------------
/modules/components/tag/tag-ripple.component.ts:
--------------------------------------------------------------------------------
 1 | import {
 2 |     Component,
 3 |     Input
 4 | } from '@angular/core';
 5 | 
 6 | 
 7 | import {
 8 |     animate,
 9 |     trigger,
10 |     style,
11 |     transition,
12 |     keyframes,
13 |     state
14 | } from '@angular/animations';
15 | 
16 | @Component({
17 |     selector: 'tag-ripple',
18 |     styles: [`
19 |         :host {
20 |             width: 100%;
21 |             height: 100%;
22 |             left: 0;
23 |             overflow: hidden;
24 |             position: absolute;
25 |         }
26 | 
27 |         .tag-ripple {
28 |             background: rgba(0, 0, 0, 0.1);
29 |             top: 50%;
30 |             left: 50%;
31 |             height: 100%;
32 |             transform: translate(-50%, -50%);
33 |             position: absolute;
34 |         }
35 |     `],
36 |     template: `
37 |         <div class="tag-ripple" [@ink]="state"></div>
38 |     `,
39 |     animations: [
40 |         trigger('ink', [
41 |             state('none', style({width: 0, opacity: 0})),
42 |             transition('none => clicked', [
43 |                 animate(300, keyframes([
44 |                     style({opacity: 1, offset: 0, width: '30%', borderRadius: '100%'}),
45 |                     style({opacity: 1, offset: 0.5, width: '50%'}),
46 |                     style({opacity: 0.5, offset: 1, width: '100%', borderRadius: '16px'})
47 |                 ]))
48 |             ])
49 |         ])
50 |     ]
51 | })
52 | export class TagRipple {
53 |     @Input() public state = 'none';
54 | }
55 | 


--------------------------------------------------------------------------------
/modules/components/tag/tag.component.ts:
--------------------------------------------------------------------------------
  1 | import {
  2 |     Component,
  3 |     Input,
  4 |     Output,
  5 |     EventEmitter,
  6 |     TemplateRef,
  7 |     ElementRef,
  8 |     HostListener,
  9 |     HostBinding,
 10 |     ViewChild,
 11 |     ChangeDetectorRef,
 12 |     Renderer2
 13 | } from '@angular/core';
 14 | 
 15 | import { TagModel } from '../../core/tag-model';
 16 | import { TagRipple } from '../tag/tag-ripple.component';
 17 | 
 18 | // mocking navigator
 19 | const navigator = typeof window !== 'undefined' ? window.navigator : {
 20 |     userAgent: 'Chrome',
 21 |     vendor: 'Google Inc'
 22 | };
 23 | 
 24 | const isChrome = /Chrome/.test(navigator.userAgent) && /Google Inc/.test(navigator.vendor);
 25 | 
 26 | @Component({
 27 |     selector: 'tag',
 28 |     templateUrl: './tag.template.html',
 29 |     styleUrls: ['./tag-component.style.scss']
 30 | })
 31 | export class TagComponent {
 32 |     /**
 33 |      * @name model {TagModel}
 34 |      */
 35 |     @Input()
 36 |     public model: TagModel;
 37 | 
 38 |     /**
 39 |      * @name removable {boolean}
 40 |      */
 41 |     @Input()
 42 |     public removable: boolean;
 43 | 
 44 |     /**
 45 |      * @name editable {boolean}
 46 |      */
 47 |     @Input()
 48 |     public editable: boolean;
 49 | 
 50 |     /**
 51 |      * @name template {TemplateRef<any>}
 52 |      */
 53 |     @Input()
 54 |     public template: TemplateRef<any>;
 55 | 
 56 |     /**
 57 |      * @name displayBy {string}
 58 |      */
 59 |     @Input()
 60 |     public displayBy: string;
 61 | 
 62 |     /**
 63 |      * @name identifyBy {string}
 64 |      */
 65 |     @Input()
 66 |     public identifyBy: string;
 67 | 
 68 |     /**
 69 |      * @name index {number}
 70 |      */
 71 |     @Input()
 72 |     public index: number;
 73 | 
 74 |     /**
 75 |      * @name hasRipple
 76 |      */
 77 |     @Input()
 78 |     public hasRipple: boolean;
 79 | 
 80 |     /**
 81 |      * @name disabled
 82 |      */
 83 |     @Input()
 84 |     public disabled = false;
 85 | 
 86 |     /**
 87 |      * @name canAddTag
 88 |      */
 89 |     @Input()
 90 |     public canAddTag: (tag: TagModel) => boolean;
 91 | 
 92 |     /**
 93 |      * @name onSelect
 94 |      */
 95 |     @Output()
 96 |     public onSelect: EventEmitter<TagModel> = new EventEmitter<TagModel>();
 97 | 
 98 |     /**
 99 |      * @name onRemove
100 |      */
101 |     @Output()
102 |     public onRemove: EventEmitter<TagModel> = new EventEmitter<TagModel>();
103 | 
104 |     /**
105 |      * @name onBlur
106 |      */
107 |     @Output()
108 |     public onBlur: EventEmitter<TagModel> = new EventEmitter<TagModel>();
109 | 
110 |     /**
111 |      * @name onKeyDown
112 |      */
113 |     @Output()
114 |     public onKeyDown: EventEmitter<any> = new EventEmitter<any>();
115 | 
116 |     /**
117 |      * @name onTagEdited
118 |      */
119 |     @Output()
120 |     public onTagEdited: EventEmitter<TagModel> = new EventEmitter<TagModel>();
121 | 
122 |     /**
123 |      * @name readonly {boolean}
124 |      */
125 |     public get readonly(): boolean {
126 |         return typeof this.model !== 'string' && this.model.readonly === true;
127 |     }
128 | 
129 |     /**
130 |      * @name editing
131 |      */
132 |     public editing = false;
133 | 
134 |     /**
135 |      * @name moving
136 |      */
137 |     @HostBinding('class.moving')
138 |     public moving: boolean;
139 | 
140 |     /**
141 |      * @name rippleState
142 |      */
143 |     public rippleState = 'none';
144 | 
145 |     /**
146 |      * @name ripple {TagRipple}
147 |      */
148 |     @ViewChild(TagRipple)
149 |     public ripple: TagRipple;
150 | 
151 |     constructor(
152 |         public element: ElementRef,
153 |         public renderer: Renderer2,
154 |         private cdRef: ChangeDetectorRef
155 |     ) {}
156 | 
157 |     /**
158 |      * @name select
159 |      */
160 |     public select($event?: MouseEvent): void {
161 |         if (this.readonly || this.disabled) {
162 |             return;
163 |         }
164 | 
165 |         if ($event) {
166 |             $event.stopPropagation();
167 |         }
168 | 
169 |         this.focus();
170 | 
171 |         this.onSelect.emit(this.model);
172 |     }
173 | 
174 |     /**
175 |      * @name remove
176 |      */
177 |     public remove($event: MouseEvent): void {
178 |         $event.stopPropagation();
179 |         this.onRemove.emit(this);
180 |     }
181 | 
182 |     /**
183 |      * @name focus
184 |      */
185 |     public focus(): void {
186 |         this.element.nativeElement.focus();
187 |     }
188 | 
189 |     public move(): void {
190 |         this.moving = true;
191 |     }
192 | 
193 |     /**
194 |      * @name keydown
195 |      * @param event
196 |      */
197 |     @HostListener('keydown', ['$event'])
198 |     public keydown(event: KeyboardEvent): void {
199 |         if (this.editing) {
200 |             if (event.keyCode === 13) {
201 |                 return this.disableEditMode(event);
202 |             }
203 |         } else {
204 |             this.onKeyDown.emit({ event, model: this.model });
205 |         }
206 |     }
207 | 
208 |     /**
209 |      * @name blink
210 |      */
211 |     public blink(): void {
212 |         const classList = this.element.nativeElement.classList;
213 |         classList.add('blink');
214 | 
215 |         setTimeout(() => classList.remove('blink'), 50);
216 |     }
217 | 
218 |     /**
219 |      * @name toggleEditMode
220 |      */
221 |     public toggleEditMode(): void {
222 |         if (this.editable) {
223 |             return this.editing ? undefined : this.activateEditMode();
224 |         }
225 |     }
226 | 
227 |     /**
228 |      * @name onBlurred
229 |      * @param event
230 |      */
231 |     public onBlurred(event: any): void {
232 |         // Checks if it is editable first before handeling the onBlurred event in order to prevent
233 |         // a bug in IE where tags are still editable with onlyFromAutocomplete set to true
234 |         if (!this.editable) {
235 |             return;
236 |         }
237 | 
238 |         this.disableEditMode();
239 | 
240 |         const value: string = event.target.innerText;
241 |         const result =
242 |             typeof this.model === 'string'
243 |                 ? value
244 |                 : { ...this.model, [this.displayBy]: value };
245 | 
246 |         this.onBlur.emit(result);
247 |     }
248 | 
249 |     /**
250 |      * @name getDisplayValue
251 |      * @param item
252 |      */
253 |     public getDisplayValue(item: TagModel): string {
254 |         return typeof item === 'string' ? item : item[this.displayBy];
255 |     }
256 | 
257 |     /**
258 |      * @desc returns whether the ripple is visible or not
259 |      * only works in Chrome
260 |      * @name isRippleVisible
261 |      */
262 |     public get isRippleVisible(): boolean {
263 |         return !this.readonly && !this.editing && isChrome && this.hasRipple;
264 |     }
265 | 
266 |     /**
267 |      * @name disableEditMode
268 |      * @param $event
269 |      */
270 |     public disableEditMode($event?: Event): void {
271 |         const classList = this.element.nativeElement.classList;
272 |         const input = this.getContentEditableText();
273 | 
274 |         this.editing = false;
275 |         classList.remove('tag--editing');
276 | 
277 |         if (!input) {
278 |             this.setContentEditableText(this.model);
279 |             return;
280 |         }
281 | 
282 |         this.storeNewValue(input);
283 |         this.cdRef.detectChanges();
284 | 
285 |         if ($event) {
286 |             $event.preventDefault();
287 |         }
288 |     }
289 | 
290 |     /**
291 |      * @name isDeleteIconVisible
292 |      */
293 |     public isDeleteIconVisible(): boolean {
294 |         return (
295 |             !this.readonly && !this.disabled && this.removable && !this.editing
296 |         );
297 |     }
298 | 
299 |     /**
300 |      * @name getContentEditableText
301 |      */
302 |     private getContentEditableText(): string {
303 |         const input = this.getContentEditable();
304 | 
305 |         return input ? input.innerText.trim() : '';
306 |     }
307 | 
308 |     /**
309 |      * @name setContentEditableText
310 |      * @param model
311 |      */
312 |     private setContentEditableText(model: TagModel) {
313 |         const input = this.getContentEditable();
314 |         const value = this.getDisplayValue(model);
315 | 
316 |         input.innerText = value;
317 |     }
318 | 
319 |     /**
320 |      * @name
321 |      */
322 |     private activateEditMode(): void {
323 |         const classList = this.element.nativeElement.classList;
324 |         classList.add('tag--editing');
325 | 
326 |         this.editing = true;
327 |     }
328 | 
329 |     /**
330 |      * @name storeNewValue
331 |      * @param input
332 |      */
333 |     private storeNewValue(input: string): void {
334 |         const exists = (tag: TagModel) => {
335 |             return typeof tag === 'string'
336 |                 ? tag === input
337 |                 : tag[this.displayBy] === input;
338 |         };
339 | 
340 |         const hasId = () => {
341 |             return this.model[this.identifyBy] !== this.model[this.displayBy];
342 |         };
343 | 
344 |         // if the value changed, replace the value in the model
345 |         if (exists(this.model)) {
346 |             return;
347 |         }
348 | 
349 |         const model =
350 |             typeof this.model === 'string'
351 |                 ? input
352 |                 : {
353 |                       index: this.index,
354 |                       [this.identifyBy]: hasId()
355 |                           ? this.model[this.identifyBy]
356 |                           : input,
357 |                       [this.displayBy]: input
358 |                   };
359 | 
360 |         if (this.canAddTag(model)) {
361 |             this.onTagEdited.emit({ tag: model, index: this.index });
362 |         } else {
363 |             this.setContentEditableText(this.model);
364 |         }
365 |     }
366 | 
367 |     /**
368 |      * @name getContentEditable
369 |      */
370 |     private getContentEditable(): HTMLInputElement {
371 |         return this.element.nativeElement.querySelector('[contenteditable]');
372 |     }
373 | }
374 | 


--------------------------------------------------------------------------------
/modules/components/tag/tag.template.html:
--------------------------------------------------------------------------------
 1 | <div (click)="select($event)"
 2 |      (dblclick)="toggleEditMode()"
 3 |      (mousedown)="rippleState='clicked'"
 4 |      (mouseup)="rippleState='none'"
 5 |      [ngSwitch]="!!template"
 6 |      [class.disabled]="disabled"
 7 |      [attr.tabindex]="-1"
 8 |      [attr.aria-label]="getDisplayValue(model)">
 9 | 
10 |     <div *ngSwitchCase="true" [attr.contenteditable]="editing">
11 |         <!-- CUSTOM TEMPLATE -->
12 |         <ng-template
13 |             [ngTemplateOutletContext]="{ item: model, index: index }"
14 |             [ngTemplateOutlet]="template">
15 |         </ng-template>
16 |     </div>
17 | 
18 |     <div *ngSwitchCase="false" class="tag-wrapper">
19 |         <!-- TAG NAME -->
20 |         <div [attr.contenteditable]="editing"
21 |              [attr.title]="getDisplayValue(model)"
22 |              class="tag__text inline"
23 |              spellcheck="false"
24 |              (keydown.enter)="disableEditMode($event)"
25 |              (keydown.escape)="disableEditMode($event)"
26 |              (click)="editing ? $event.stopPropagation() : undefined"
27 |              (blur)="onBlurred($event)">
28 |             {{ getDisplayValue(model) }}
29 |         </div>
30 | 
31 |         <!-- 'X' BUTTON -->
32 |         <delete-icon
33 |             aria-label="Remove tag"
34 |             role="button"
35 |             (click)="remove($event)"
36 |             *ngIf="isDeleteIconVisible()">
37 |         </delete-icon>
38 |     </div>
39 | </div>
40 | 
41 | <tag-ripple [state]="rippleState"
42 |             [attr.tabindex]="-1"
43 |             *ngIf="isRippleVisible">
44 | </tag-ripple>
45 | 


--------------------------------------------------------------------------------
/modules/core/accessor.ts:
--------------------------------------------------------------------------------
 1 | import { ControlValueAccessor } from '@angular/forms';
 2 | import { Input, Directive } from '@angular/core';
 3 | import { OptionsProvider } from './providers/options-provider';
 4 | import { TagInputDropdown } from '../components/dropdown/tag-input-dropdown.component';
 5 | import { TagModel } from './tag-model';
 6 | 
 7 | export function isObject(obj: any): boolean {
 8 |     return obj === Object(obj);
 9 | }
10 | 
11 | @Directive()
12 | export class TagInputAccessor implements ControlValueAccessor {
13 |     private _items: TagModel[] = [];
14 |     private _onTouchedCallback: () => void;
15 |     private _onChangeCallback: (items: TagModel[]) => void;
16 | 
17 |     public dropdown: TagInputDropdown;
18 | 
19 |     /**
20 |      * @name displayBy
21 |      */
22 |     @Input() public displayBy: string = OptionsProvider.defaults.tagInput.displayBy;
23 | 
24 |     /**
25 |      * @name identifyBy
26 |      */
27 |     @Input() public identifyBy: string = OptionsProvider.defaults.tagInput.identifyBy;
28 | 
29 |     public get items(): TagModel[] {
30 |         return this._items;
31 |     }
32 | 
33 |     public set items(items: TagModel[]) {
34 |         this._items = items;
35 |         this._onChangeCallback(this._items);
36 |     }
37 | 
38 |     public onTouched() {
39 |         this._onTouchedCallback();
40 |     }
41 | 
42 |     public writeValue(items: any[]) {
43 |         this._items = items || [];
44 |     }
45 | 
46 |     public registerOnChange(fn: any) {
47 |         this._onChangeCallback = fn;
48 |     }
49 | 
50 |     public registerOnTouched(fn: any) {
51 |         this._onTouchedCallback = fn;
52 |     }
53 | 
54 |     /**
55 |      * @name getItemValue
56 |      * @param item
57 |      * @param fromDropdown
58 |      */
59 |     public getItemValue(item: TagModel, fromDropdown = false): string {
60 |         const property = fromDropdown && this.dropdown ? this.dropdown.identifyBy : this.identifyBy;
61 |         return isObject(item) ? item[property] : item;
62 |     }
63 | 
64 |     /**
65 |      * @name getItemDisplay
66 |      * @param item
67 |      * @param fromDropdown
68 |      */
69 |     public getItemDisplay(item: TagModel, fromDropdown = false): string {
70 |         const property = fromDropdown && this.dropdown ? this.dropdown.displayBy : this.displayBy;
71 |         return isObject(item) ? item[property] : item;
72 |     }
73 | 
74 |     /**
75 |      * @name getItemsWithout
76 |      * @param index
77 |      */
78 |     protected getItemsWithout(index: number): TagModel[] {
79 |         return this.items.filter((item, position) => position !== index);
80 |     }
81 | }
82 | 


--------------------------------------------------------------------------------
/modules/core/constants/index.ts:
--------------------------------------------------------------------------------
 1 | /*
 2 | ** constants and default values for <tag-input>
 3 |  */
 4 | 
 5 | export const PLACEHOLDER = '+ Tag';
 6 | export const SECONDARY_PLACEHOLDER = 'Enter a new tag';
 7 | export const KEYDOWN = 'keydown';
 8 | export const KEYUP = 'keyup';
 9 | export const FOCUS = 'focus';
10 | export const MAX_ITEMS_WARNING = 'The number of items specified was greater than the property max-items.';
11 | 
12 | export const ACTIONS_KEYS = {
13 |     DELETE: 'DELETE',
14 |     SWITCH_PREV: 'SWITCH_PREV',
15 |     SWITCH_NEXT: 'SWITCH_NEXT',
16 |     TAB: 'TAB'
17 | };
18 | 
19 | export const KEY_PRESS_ACTIONS = {
20 |     8: ACTIONS_KEYS.DELETE,
21 |     46: ACTIONS_KEYS.DELETE,
22 |     37: ACTIONS_KEYS.SWITCH_PREV,
23 |     39: ACTIONS_KEYS.SWITCH_NEXT,
24 |     9: ACTIONS_KEYS.TAB
25 | };
26 | 
27 | export const DRAG_AND_DROP_KEY = 'Text';
28 | export const NEXT = 'NEXT';
29 | export const PREV = 'PREV';
30 | 
31 | 


--------------------------------------------------------------------------------
/modules/core/helpers/event-like.ts:
--------------------------------------------------------------------------------
1 | export interface EventLike {
2 |     preventDefault(): void;
3 |     keyCode: number;
4 | }
5 | 


--------------------------------------------------------------------------------
/modules/core/helpers/index.ts:
--------------------------------------------------------------------------------
1 | export { listen } from './listen';
2 | 


--------------------------------------------------------------------------------
/modules/core/helpers/listen.ts:
--------------------------------------------------------------------------------
 1 | 
 2 | /**
 3 |  * @name listen
 4 |  * @param listenerType
 5 |  * @param action
 6 |  * @param condition
 7 |  */
 8 | export function listen(listenerType: string, action: () => any, condition = true): void {
 9 |     // if the event provided does not exist, throw an error
10 |     if (!this.listeners.hasOwnProperty(listenerType)) {
11 |         throw new Error('The event entered may be wrong');
12 |     }
13 | 
14 |     // if a condition is present and is false, exit early
15 |     if (!condition) {
16 |         return;
17 |     }
18 | 
19 |     // fire listener
20 |     this.listeners[listenerType].push(action);
21 | }
22 | 


--------------------------------------------------------------------------------
/modules/core/index.ts:
--------------------------------------------------------------------------------
1 | import * as constants from './constants/index';
2 | export { constants };
3 | 
4 | export { listen } from './helpers/index';
5 | export { HighlightPipe } from './pipes/index';
6 | export { TagModel, isObject, TagInputAccessor } from './accessor';
7 | export { DraggedTag, State, StateProperty, DragProvider, Options, OptionsProvider } from './providers/index';
8 | export * from './pipes';
9 | 


--------------------------------------------------------------------------------
/modules/core/pipes/highlight.pipe.spec.ts:
--------------------------------------------------------------------------------
 1 | import { HighlightPipe } from './highlight.pipe';
 2 | 
 3 | describe('Highlight pipe', () => {
 4 |     let pipe: HighlightPipe;
 5 | 
 6 |     beforeEach(() => {
 7 |         pipe = new HighlightPipe();
 8 |     });
 9 | 
10 |     it('returns empty string', () => {
11 |         expect(pipe.transform('', '')).toEqual('');
12 |     });
13 | 
14 |     it('transform string', () => {
15 |         expect(pipe.transform('item1', 'ite')).toEqual('<b>ite</b>m1');
16 |     });
17 | 
18 |     it('fails gracefully when input is invalid', () => {
19 |         const str = '////?..----dfs';
20 |         expect(pipe.transform(str, 'ite')).toEqual(str);
21 |     });
22 | });
23 | 


--------------------------------------------------------------------------------
/modules/core/pipes/highlight.pipe.ts:
--------------------------------------------------------------------------------
 1 | import {Pipe, PipeTransform} from '@angular/core';
 2 | 
 3 | const escape = s => s.replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&');
 4 | 
 5 | @Pipe({
 6 |     name: 'highlight'
 7 | })
 8 | export class HighlightPipe implements PipeTransform {
 9 |     /**
10 |      * @name transform
11 |      * @param value {string}
12 |      * @param arg {string}
13 |      */
14 |     public transform(value: string, arg: string): string {
15 |         if (!arg.trim()) {
16 |             return value;
17 |         }
18 | 
19 |         try {
20 |             const regex = new RegExp(`(${escape(arg)})`, 'i');
21 |             return value.replace(regex, '<b>$1</b>');
22 |         } catch (e) {
23 |             return value;
24 |         }
25 |     }
26 | }
27 | 


--------------------------------------------------------------------------------
/modules/core/pipes/index.ts:
--------------------------------------------------------------------------------
1 | export { HighlightPipe } from './highlight.pipe';
2 | 


--------------------------------------------------------------------------------
/modules/core/providers/drag-provider.ts:
--------------------------------------------------------------------------------
  1 | import { TagInputComponent } from '../../components/tag-input/tag-input';
  2 | import { TagModel } from '../tag-model';
  3 | 
  4 | import { Injectable } from '@angular/core';
  5 | 
  6 | export declare interface DraggedTag {
  7 |     index: number;
  8 |     tag: TagModel;
  9 |     zone: string;
 10 | }
 11 | 
 12 | import { DRAG_AND_DROP_KEY } from '../../core/constants';
 13 | 
 14 | export declare interface State {
 15 |     dragging: boolean;
 16 |     dropping: boolean;
 17 |     index: number | undefined;
 18 | }
 19 | 
 20 | export declare type StateProperty = keyof State;
 21 | 
 22 | @Injectable()
 23 | export class DragProvider {
 24 |     public sender: TagInputComponent;
 25 |     public receiver: TagInputComponent;
 26 | 
 27 |     public state: State = {
 28 |         dragging: false,
 29 |         dropping: false,
 30 |         index: undefined
 31 |     };
 32 | 
 33 |     /**
 34 |      * @name setDraggedItem
 35 |      * @param event
 36 |      * @param tag
 37 |      */
 38 |     public setDraggedItem(event: DragEvent, tag: DraggedTag): void {
 39 |         if (event && event.dataTransfer) {
 40 |             event.dataTransfer.setData(DRAG_AND_DROP_KEY, JSON.stringify(tag));
 41 |         }
 42 |     }
 43 | 
 44 |     /**
 45 |      * @name getDraggedItem
 46 |      * @param event
 47 |      */
 48 |     public getDraggedItem(event: DragEvent): DraggedTag | undefined {
 49 |         if (event && event.dataTransfer) {
 50 |             const data = event.dataTransfer.getData(DRAG_AND_DROP_KEY);
 51 |             try {
 52 |                 return JSON.parse(data) as DraggedTag;
 53 |             } catch {
 54 |                 return;
 55 |             }
 56 |         }
 57 |     }
 58 | 
 59 |     /**
 60 |      * @name setSender
 61 |      * @param sender
 62 |      */
 63 |     public setSender(sender: TagInputComponent): void {
 64 |         this.sender = sender;
 65 |     }
 66 | 
 67 |     /**
 68 |      * @name setReceiver
 69 |      * @param receiver
 70 |      */
 71 |     public setReceiver(receiver: TagInputComponent): void {
 72 |         this.receiver = receiver;
 73 |     }
 74 | 
 75 |     /**
 76 |      * @name onTagDropped
 77 |      * @param tag
 78 |      * @param indexDragged
 79 |      * @param indexDropped
 80 |      */
 81 |     public onTagDropped(tag: TagModel, indexDragged: number, indexDropped?: number): void {
 82 |         this.onDragEnd();
 83 | 
 84 |         this.sender.onRemoveRequested(tag, indexDragged);
 85 |         this.receiver.onAddingRequested(false, tag, indexDropped);
 86 |     }
 87 | 
 88 |     /**
 89 |      * @name setState
 90 |      * @param state
 91 |      */
 92 |     public setState(state: { [K in StateProperty]?: State[K] }): void {
 93 |         this.state = { ...this.state, ...state };
 94 |     }
 95 | 
 96 |     /**
 97 |      * @name getState
 98 |      * @param key
 99 |      */
100 |     public getState(key?: StateProperty): State | State[StateProperty] {
101 |         return key ? this.state[key] : this.state;
102 |     }
103 | 
104 |     /**
105 |      * @name onDragEnd
106 |      */
107 |     public onDragEnd(): void {
108 |         this.setState({
109 |             dragging: false,
110 |             dropping: false,
111 |             index: undefined
112 |         });
113 |     }
114 | }
115 | 


--------------------------------------------------------------------------------
/modules/core/providers/index.ts:
--------------------------------------------------------------------------------
1 | export { DraggedTag, State, StateProperty, DragProvider } from './drag-provider';
2 | export { Options, OptionsProvider } from './options-provider';
3 | 


--------------------------------------------------------------------------------
/modules/core/providers/options-provider.ts:
--------------------------------------------------------------------------------
 1 | import { defaults, TagInputOptions, TagInputDropdownOptions } from '../../defaults';
 2 | 
 3 | export type Options = {
 4 |     tagInput?: {
 5 |         [P in keyof TagInputOptions]?: TagInputOptions[P];
 6 |     };
 7 |     dropdown?: {
 8 |         [P in keyof TagInputDropdownOptions]?: TagInputDropdownOptions[P];
 9 |     }
10 | };
11 | 
12 | export class OptionsProvider {
13 |     public static defaults = defaults;
14 | 
15 |     public setOptions(options: Options): void {
16 |         OptionsProvider.defaults.tagInput = {...defaults.tagInput, ...options.tagInput};
17 |         OptionsProvider.defaults.dropdown = {...defaults.dropdown, ...options.dropdown};
18 |     }
19 | }
20 | 
21 | export { TagInputDropdownOptions, TagInputOptions };
22 | 


--------------------------------------------------------------------------------
/modules/core/styles/components/_components.scss:
--------------------------------------------------------------------------------
1 | @import "_progress-bar.scss";
2 | @import "_tag.scss";
3 | 


--------------------------------------------------------------------------------
/modules/core/styles/components/_progress-bar.scss:
--------------------------------------------------------------------------------
 1 | .progress-bar, .progress-bar:before {
 2 |     height: 2px;
 3 |     width: 100%;
 4 |     margin: 0;
 5 | }
 6 | 
 7 | .progress-bar {
 8 |     background-color: map_get($color-focused, 'default');
 9 |     display: flex;
10 |     position: absolute;
11 |     bottom: 0;
12 | }
13 | 
14 | .progress-bar:before {
15 |     background-color: lighten(map_get($color-focused, 'default'), 20%);
16 |     content: '';
17 |     -webkit-animation: running-progress 2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
18 |     animation: running-progress 2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
19 | }
20 | 
21 | @-webkit-keyframes running-progress {
22 |     0% { margin-left: 0; margin-right: 100%; }
23 |     50% { margin-left: 25%; margin-right: 0; }
24 |     100% { margin-left: 100%; margin-right: 0; }
25 | }
26 | 
27 | @keyframes running-progress {
28 |     0% { margin-left: 0; margin-right: 100%; }
29 |     50% { margin-left: 25%; margin-right: 0; }
30 |     100% { margin-left: 100%; margin-right: 0; }
31 | }
32 | 


--------------------------------------------------------------------------------
/modules/core/styles/components/_tag.scss:
--------------------------------------------------------------------------------
 1 | tag {
 2 |     @include tag-theme($default-tag-theme);
 3 | }
 4 | 
 5 | .minimal tag {
 6 |     @include tag-theme($minimal-tag-theme);
 7 | }
 8 | 
 9 | .dark tag {
10 |     @include tag-theme($dark-tag-theme);
11 | }
12 | 
13 | .bootstrap tag {
14 |     @include tag-theme($bootstrap-tag-theme);
15 | }
16 | 
17 | .bootstrap3-info tag {
18 |     @include tag-theme($bootstrap3-info-tag-theme);
19 | 
20 |     padding: .25em .6em;
21 | 
22 |     text-align: center;
23 |     white-space: nowrap;
24 | }
25 | 


--------------------------------------------------------------------------------
/modules/core/styles/core/_colors.scss:
--------------------------------------------------------------------------------
 1 | $color-primary-default: #efefef !default;
 2 | $color-primary-minimal: #f9f9f9 !default;
 3 | $color-primary-dark: #444 !default;
 4 | 
 5 | $color-focused-default: #2196F3 !default;
 6 | $color-focused-minimal: #d0d0d0 !default;
 7 | $color-focused-dark: #efefef !default;
 8 | 
 9 | $color-error-default: #f44336 !default;
10 | $color-error-minimal: $color-error-default !default;
11 | $color-error-dark: $color-error-default !default;
12 | $color-error-bootstrap: #d9534f !default;
13 | $color-error-bootstrap3-info: #d9534f !default;
14 | 
15 | $color-arrow-default: #444 !default;
16 | $color-arrow-minimal: $color-arrow-default !default;
17 | $color-arrow-dark: #fff !default;
18 | $color-arrow-bootstrap: #fff !default;
19 | 
20 | $color-arrow-default-focused: #fff !default;
21 | $color-arrow-minimal-focused: #000 !default;
22 | $color-arrow-dark-focused: #000 !default;
23 | 
24 | $color-bootstrap-default: #0275d8 !default;
25 | $color-bootstrap-focused: #025aa5 !default;
26 | 
27 | $color-bootstrap3-info-default: #5bc0de !default;
28 | $color-bootstrap3-info-focused: darken(#5bc0de, 15%) !default;
29 | 


--------------------------------------------------------------------------------
/modules/core/styles/core/_core.scss:
--------------------------------------------------------------------------------
1 | // CORE
2 | 
3 | @import "_colors.scss";
4 | @import "_variables.scss";
5 | @import "_palette.scss";
6 | @import "_mixins.scss";


--------------------------------------------------------------------------------
/modules/core/styles/core/_mixins.scss:
--------------------------------------------------------------------------------
  1 | @mixin tag-input-theme($theme) {
  2 |     display: block;
  3 |     flex-direction: row;
  4 |     flex-wrap: wrap;
  5 |     position: relative;
  6 | 
  7 |     transition: map-get($theme, transition);
  8 | 
  9 |     padding: map-get($theme, 'container-padding');
 10 |     min-height: map-get($theme, 'container-height');
 11 | 
 12 |     cursor: text;
 13 | 
 14 |     border-bottom: map-get($theme, 'container-border-bottom');
 15 |     box-shadow: map-get($theme, 'box-shadow');
 16 |     border-radius: map-get($theme, 'border-radius');
 17 | 
 18 |     &:focus {
 19 |         outline: 0;
 20 |     }
 21 | 
 22 |     &.ng2-tag-input--dropping {
 23 |         opacity: 0.7;
 24 |     }
 25 | 
 26 |     &.ng2-tag-input--focused {
 27 |         border-bottom: map-get($theme, 'container-border-bottom-focused');
 28 |     }
 29 | 
 30 |     &.ng2-tag-input--invalid {
 31 |         border-bottom: map-get($theme, 'container-border-bottom-invalid');
 32 |     }
 33 | 
 34 |     &.ng2-tag-input--loading {
 35 |         border: none;
 36 |     }
 37 | 
 38 |     &.ng2-tag-input--disabled {
 39 |         opacity: 0.5;
 40 |         cursor: not-allowed;
 41 |     }
 42 | 
 43 |     form {
 44 |         margin: map-get($theme, 'container-margin');
 45 |     }
 46 | 
 47 |     .ng2-tags-container {
 48 |         flex-wrap: wrap;
 49 |         display: flex;
 50 |     }
 51 | }
 52 | 
 53 | @mixin error-message($theme) {
 54 |     font-size: map-get($theme, 'error-message-font-size');
 55 |     color: map-get($theme, 'error-message-color');
 56 |     margin: map-get($theme, 'error-message-margin');
 57 | }
 58 | 
 59 | @mixin tag-theme($theme) {
 60 |     display: flex;
 61 |     flex-direction: row;
 62 |     flex-wrap: wrap;
 63 | 
 64 |     font-family: map-get($theme, 'font-family');
 65 |     font-weight: map-get($theme, 'font-weight');
 66 |     font-size: map-get($theme, 'font-size');
 67 |     letter-spacing: map-get($theme, 'letter-spacing');
 68 | 
 69 |     color: map-get($theme, 'color');
 70 |     border-radius: map-get($theme, 'border-radius');
 71 | 
 72 |     transition: map-get($theme, 'transition');
 73 | 
 74 |     margin: map-get($theme, 'margin');
 75 |     padding: map-get($theme, 'padding');
 76 | 
 77 |     height: map-get($theme, 'height');
 78 |     line-height: map-get($theme, 'line-height');
 79 | 
 80 |     background: map-get($theme, 'background');
 81 | 
 82 |     user-select: none;
 83 |     overflow: hidden;
 84 |     outline: 0;
 85 |     cursor: pointer;
 86 |     position: relative;
 87 | 
 88 |     &:not(.readonly):not(.tag--editing):focus {
 89 |         background: map-get($theme, 'background-focused');
 90 |         color: map-get($theme, 'color-focused');
 91 |         box-shadow: map-get($theme, 'box-shadow');
 92 |     }
 93 | 
 94 |     &:not(.readonly):not(.tag--editing):active {
 95 |         background: map-get($theme, 'background-active');
 96 |         color: map-get($theme, 'color-active');
 97 |         box-shadow: map-get($theme, 'box-shadow');
 98 |     }
 99 | 
100 |     &:not(:focus):not(.tag--editing):not(:active):not(.readonly):hover {
101 |         background: map-get($theme, 'background-hover');
102 |         color: map-get($theme, 'color-hover');
103 |         box-shadow: map-get($theme, 'box-shadow');
104 |     }
105 | 
106 |     &.readonly {
107 |         cursor: default;
108 |     }
109 | 
110 |     &.readonly:focus,
111 |     &:focus {
112 |         outline: 0;
113 |     }
114 | 
115 |     &.tag--editing {
116 |         background-color: map-get($theme, 'background-editing');
117 |         border: map-get($theme, 'border-editing');
118 |         cursor: text;
119 |     }
120 | }
121 | 
122 | @mixin tag-input-form-theme($theme) {
123 |     display: inline;
124 |     vertical-align: middle;
125 | 
126 |     border: map-get($theme, 'input-border');
127 |     padding: map-get($theme, 'input-padding');
128 |     height: map-get($theme, 'input-height');
129 | 
130 |     font-size: map-get($theme, 'input-font-size');
131 |     font-family: map-get($theme, 'font-family');
132 | 
133 |     &:focus {
134 |         outline: 0;
135 |     }
136 | 
137 |     &[disabled=true] {
138 |         opacity: 0.5;
139 |         background: #fff;
140 |     }
141 | }
142 | 
143 | @mixin icon-theme($theme) {
144 |     width: map-get($theme, 'width');
145 |     height: map-get($theme, 'height');
146 |     transition: map-get($theme, 'transition');
147 |     display: map-get($theme, 'display');
148 |     text-align: right;
149 | 
150 |     path {
151 |         fill: map-get($theme, 'fill');
152 |     }
153 | 
154 |     svg {
155 |         vertical-align: bottom;
156 |         height: 34px;
157 |     }
158 | }
159 | 
160 | @mixin icon-theme-focused($theme) {
161 |     path {
162 |         fill: map-get($theme, 'fill-focus');
163 |     }
164 | }
165 | 


--------------------------------------------------------------------------------
/modules/core/styles/core/_palette.scss:
--------------------------------------------------------------------------------
 1 | $color-focused: (
 2 |     default: $color-focused-default,
 3 |     minimal: $color-focused-minimal,
 4 |     dark: $color-focused-dark,
 5 |     bootstrap: $color-bootstrap-focused,
 6 |     bootstrap3-info: $color-bootstrap3-info-focused
 7 | );
 8 | 
 9 | $color-primary: (
10 |     default: $color-primary-default,
11 |     minimal: $color-primary-minimal,
12 |     dark: $color-primary-dark,
13 |     bootstrap: $color-bootstrap-default,
14 |     bootstrap3-info: $color-bootstrap3-info-default
15 | );
16 | 
17 | $color-error: (
18 |     default: $color-error-default,
19 |     minimal: $color-error-minimal,
20 |     dark: $color-error-dark,
21 |     bootstrap: $color-error-bootstrap,
22 |     bootstrap3-info: $color-error-bootstrap3-info
23 | );
24 | 
25 | $color-arrow: (
26 |     default: $color-arrow-default,
27 |     minimal: $color-arrow-minimal,
28 |     dark: $color-arrow-dark,
29 |     bootstrap: $color-arrow-bootstrap,
30 |     bootstrap3-info: $color-arrow-default-focused
31 | );
32 | 
33 | $color-arrow-focused: (
34 |     default: $color-arrow-default-focused,
35 |     minimal: $color-arrow-minimal-focused,
36 |     dark: $color-arrow-dark-focused,
37 |     bootstrap: $color-arrow-bootstrap,
38 |     bootstrap3-info: $color-arrow-default-focused
39 | );
40 | 


--------------------------------------------------------------------------------
/modules/core/styles/core/_variables.scss:
--------------------------------------------------------------------------------
 1 | $font-family: "Roboto", "Helvetica Neue", sans-serif !default;
 2 | 
 3 | $tag-color: #444 !default;
 4 | $tag-border-radius: 16px !default;
 5 | $tag-font-size: 1em !default;
 6 | $tag-font-weight: 400 !default;
 7 | $tag-letter-spacing: 0.05rem !default;
 8 | $tag-margin: 0.1rem 0.3rem 0.1rem 0 !default;
 9 | $tag-padding: 0.08rem 0.45rem !default;
10 | $tag-height: 32px !default;
11 | $tag-line-height: 34px !default;
12 | 
13 | $input-font-size: 1em;
14 | $input-padding: 0 0.5rem;
15 | $input-border: none;
16 | $input-height: 38px;
17 | 
18 | $container-padding: 0.25rem 0 !default;
19 | $container-height: 32px !default;
20 | $container-margin: 0.1em 0 !default;
21 | 
22 | $error-message-font-size: 0.8em !default;
23 | $error-message-margin: 0.5em 0 0 0 !default;
24 | $error-message-color: $color-error-default !default;
25 | 


--------------------------------------------------------------------------------
/modules/core/styles/themes/_bootstrap-theme.scss:
--------------------------------------------------------------------------------
 1 | $bootstrap-theme: (
 2 |     container-border-bottom: 2px solid map-get($color-primary, 'default'),
 3 |     container-border-bottom-focused: 2px solid map-get($color-primary, 'bootstrap'),
 4 |     container-border-bottom-invalid: 2px solid map-get($color-error, 'bootstrap'),
 5 |     error-message-color: map-get($color-error, 'bootstrap')
 6 | );
 7 | 
 8 | $bootstrap-tag-theme: (
 9 |     border-radius: 0.25rem,
10 |     background: map-get($color-primary, 'bootstrap'),
11 |     color: #f9f9f9,
12 |     color-hover: #f9f9f9,
13 |     background-focused: map-get($color-focused, 'bootstrap'),
14 |     background-active: map-get($color-focused, 'bootstrap'),
15 |     background-hover: darken(map-get($color-primary, 'bootstrap'), 5%)
16 | );
17 | 
18 | $bootstrap-icon-theme: (
19 |     fill: map-get($color-arrow, 'bootstrap'),
20 |     fill-focus: map-get($color-arrow-focused, 'bootstrap')
21 | );
22 | 


--------------------------------------------------------------------------------
/modules/core/styles/themes/_bootstrap3-info-theme.scss:
--------------------------------------------------------------------------------
 1 | $bootstrap3-info-theme: (
 2 |     container-padding: 4px,
 3 |     container-margin: $container-margin,
 4 |     container-border-bottom-invalid: 1px solid map-get($color-error, 'bootstrap3-info'),
 5 |     input-border: 1px solid #ccc,
 6 |     input-padding: $input-padding,
 7 |     input-font-size: 95%,
 8 |     font-family: inherit,
 9 |     box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075),
10 |     border-radius: 4px
11 | );
12 | 
13 | $bootstrap3-info-tag-theme: (
14 |     background: map-get($color-primary, 'bootstrap3-info'),
15 |     font-size: 95%,
16 |     color: #fff,
17 |     color-hover: #fff,
18 |     font-weight: 400,
19 |     border-radius: .25em,
20 |     font-family: inherit,
21 |     background-focused: map-get($color-focused, 'bootstrap3-info'),
22 |     background-active: map-get($color-focused, 'bootstrap3-info'),
23 |     background-hover: darken(map-get($color-primary, 'bootstrap3-info'), 5%)
24 | );
25 | 
26 | $bootstrap3-info-icon-theme: (
27 |     fill: map-get($color-arrow, 'bootstrap3-info'),
28 |     fill-focus: map-get($color-arrow, 'bootstrap3-info')
29 | );
30 | 
31 | .ng2-tag-input.bootstrap3-info {
32 |     background-color: #fff;
33 |     display: inline-block;
34 |     color: #555;
35 |     vertical-align: middle;
36 |     max-width: 100%;
37 | 
38 |     height: 42px;
39 |     line-height: 44px;
40 | }
41 | 
42 | .ng2-tag-input.bootstrap3-info input {
43 |     border: none;
44 |     box-shadow: none;
45 |     outline: none;
46 |     background-color: transparent;
47 |     padding: 0 6px;
48 |     margin: 0;
49 |     width: auto;
50 |     max-width: inherit;
51 | }
52 | 
53 | .ng2-tag-input.bootstrap3-info .form-control input::-moz-placeholder {
54 |     color: #777;
55 |     opacity: 1;
56 | }
57 | 
58 | .ng2-tag-input.bootstrap3-info .form-control input:-ms-input-placeholder {
59 |     color: #777;
60 | }
61 | 
62 | .ng2-tag-input.bootstrap3-info .form-control input::-webkit-input-placeholder {
63 |     color: #777;
64 | }
65 | 
66 | .ng2-tag-input.bootstrap3-info input:focus {
67 |     border: none;
68 |     box-shadow: none;
69 | }
70 | 
71 | .bootstrap3-info.ng2-tag-input.ng2-tag-input--focused {
72 |     box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.4);
73 |     border: 1px solid #ccc;
74 | }
75 | 
76 | .bootstrap3-info.ng2-tag-input.ng2-tag-input--invalid {
77 |     box-shadow: inset 0 1px 1px map-get($color-error, 'bootstrap');
78 | }
79 | 


--------------------------------------------------------------------------------
/modules/core/styles/themes/_dark-theme.scss:
--------------------------------------------------------------------------------
 1 | $dark-theme: (
 2 |     container-border-bottom: 2px solid map-get($color-primary, 'dark')
 3 | );
 4 | 
 5 | $dark-tag-theme: (
 6 |     background: map-get($color-primary, 'dark'),
 7 |     color: #f9f9f9,
 8 |     background-focused: map-get($color-focused, 'dark'),
 9 |     background-hover: darken(map-get($color-primary, 'dark'), 10%),
10 |     color-focused: map-get($color-primary, 'dark'),
11 |     color-hover: #f9f9f9,
12 |     border-radius: 3px
13 | );
14 | 
15 | $dark-icon-theme: (
16 |     fill: map-get($color-arrow, 'dark'),
17 |     fill-focus: map-get($color-arrow-focused, 'dark')
18 | );
19 | 
20 | .dark tag:focus {
21 |     box-shadow: 0 0 0 1px #323232;
22 | }
23 | 


--------------------------------------------------------------------------------
/modules/core/styles/themes/_default-theme.scss:
--------------------------------------------------------------------------------
 1 | $default-theme: (
 2 |     transition: all 0.25s,
 3 |     container-padding: $container-padding,
 4 |     container-margin: $container-margin,
 5 |     container-height: $container-height,
 6 |     container-border-bottom: 2px solid map-get($color-primary, 'default'),
 7 |     container-border-bottom-focused: 2px solid map-get($color-focused, 'default'),
 8 |     container-border-bottom-invalid: 2px solid map-get($color-error, 'default'),
 9 | 
10 |     input-border: $input-border,
11 |     input-padding: $input-padding,
12 |     input-font-size: $input-font-size,
13 |     input-height: $input-height,
14 |     font-family: $font-family,
15 | 
16 |     error-message-font-size: $error-message-font-size,
17 |     error-message-color: $error-message-color,
18 |     error-message-margin: $error-message-margin
19 | );
20 | 
21 | $default-tag-theme: (
22 |     flex: true,
23 | 
24 |     font-family: $font-family,
25 |     font-weight: $tag-font-weight,
26 |     font-size: $tag-font-size,
27 |     letter-spacing: $tag-letter-spacing,
28 | 
29 |     border-radius: $tag-border-radius,
30 | 
31 |     margin: $tag-margin,
32 |     padding: $tag-padding,
33 |     height: $tag-height,
34 |     line-height: $tag-line-height,
35 | 
36 |     background: map-get($color-primary, 'default'),
37 |     background-focused: map-get($color-focused, 'default'),
38 |     background-active: darken(map-get($color-focused, 'default'), 5%),
39 |     background-hover: darken(map-get($color-primary, 'default'), 5%),
40 |     background-editing: #fff,
41 |     
42 |     border-editing: 1px solid #ccc,
43 |     box-shadow: 0 2px 3px 1px #d4d1d1,
44 |     color: $tag-color,
45 |     color-focused: #fff,
46 |     color-active: #fff,
47 |     color-hover: initial,
48 | 
49 |     transition: all 0.3s
50 | );
51 | 
52 | $default-icon-theme: (
53 |     width: 20px,
54 |     height: 16px,
55 | 
56 |     transition: all 0.15s,
57 |     display: inline-block,
58 | 
59 |     fill: map-get($color-arrow, 'default'),
60 |     fill-focus: $color-arrow-default-focused
61 | );
62 | 


--------------------------------------------------------------------------------
/modules/core/styles/themes/_minimal-theme.scss:
--------------------------------------------------------------------------------
 1 | $minimal-theme: (
 2 |     container-border-bottom: 1px solid transparent
 3 | );
 4 | 
 5 | $minimal-tag-theme: (
 6 |     background: map-get($color-primary, 'minimal'),
 7 |     background-hover: darken(map-get($color-primary, 'minimal'), 5%),
 8 |     background-focused: map-get($color-focused, 'minimal'),
 9 |     background-active: map-get($color-focused, 'minimal'),
10 |     border-radius: 0,
11 |     color-active: initial,
12 |     color-focused: initial
13 | );
14 | 
15 | $minimal-icon-theme: (
16 |     fill: map-get($color-arrow, 'minimal'),
17 |     fill-focus: map-get($color-arrow-focused, 'minimal')
18 | );


--------------------------------------------------------------------------------
/modules/core/styles/themes/_themes.scss:
--------------------------------------------------------------------------------
 1 | // THEMES
 2 | 
 3 | @import "../core/_core.scss";
 4 | @import "_default-theme.scss";
 5 | @import "_minimal-theme.scss";
 6 | @import "_dark-theme.scss";
 7 | @import "_bootstrap-theme.scss";
 8 | @import "_bootstrap3-info-theme.scss";
 9 | 
10 | .ng2-tag-input {
11 |     @include tag-input-theme($default-theme);
12 | }
13 | 
14 | .minimal.ng2-tag-input {
15 |     @include tag-input-theme($minimal-theme);
16 | }
17 | 
18 | .dark.ng2-tag-input {
19 |     @include tag-input-theme($dark-theme);
20 | }
21 | 
22 | .bootstrap.ng2-tag-input {
23 |     @include tag-input-theme($bootstrap-theme);
24 | }
25 | 
26 | .bootstrap3-info.ng2-tag-input {
27 |     @include tag-input-theme($bootstrap3-info-theme);
28 | }
29 | 
30 | .error-message {
31 |     @include error-message($default-theme);
32 | }
33 | 
34 | .bootstrap .error-message {
35 |     @include error-message($bootstrap-theme);
36 | }
37 | 


--------------------------------------------------------------------------------
/modules/core/tag-model.ts:
--------------------------------------------------------------------------------
1 | 
2 | export type TagModel = string | TagModelClass;
3 | 
4 | export class TagModelClass {
5 |   [key: string]: any;
6 | }
7 | 


--------------------------------------------------------------------------------
/modules/defaults.ts:
--------------------------------------------------------------------------------
  1 | import { Observable } from 'rxjs';
  2 | import { ValidatorFn, AsyncValidatorFn } from '@angular/forms';
  3 | 
  4 | import { SECONDARY_PLACEHOLDER, PLACEHOLDER } from './core/constants/index';
  5 | import { TagInputDropdown } from './components/dropdown/tag-input-dropdown.component';
  6 | import { TagModel } from './core/tag-model';
  7 | 
  8 | export interface TagInputOptions {
  9 |     separatorKeys: string[];
 10 |     separatorKeyCodes: number[];
 11 |     maxItems: number;
 12 |     placeholder: string;
 13 |     secondaryPlaceholder: string;
 14 |     validators: ValidatorFn[];
 15 |     asyncValidators: AsyncValidatorFn[];
 16 |     onlyFromAutocomplete: boolean;
 17 |     errorMessages: { [key: string]: string; };
 18 |     theme: '';
 19 |     onTextChangeDebounce: number;
 20 |     inputId: string | null;
 21 |     inputClass: string;
 22 |     clearOnBlur: boolean;
 23 |     hideForm: boolean;
 24 |     addOnBlur: boolean;
 25 |     addOnPaste: boolean;
 26 |     pasteSplitPattern: string | RegExp;
 27 |     blinkIfDupe: boolean;
 28 |     removable: boolean;
 29 |     editable: boolean;
 30 |     allowDupes: boolean;
 31 |     modelAsStrings: boolean;
 32 |     trimTags: boolean;
 33 |     ripple: boolean;
 34 |     tabIndex: string;
 35 |     disable: boolean;
 36 |     dragZone: string;
 37 |     onRemoving?: (tag: TagModel) => Observable<TagModel>;
 38 |     onAdding?: (tag: TagModel) => Observable<TagModel>;
 39 |     displayBy: string;
 40 |     identifyBy: string;
 41 |     animationDuration: {
 42 |         enter: string,
 43 |         leave: string
 44 |     };
 45 | }
 46 | 
 47 | export interface TagInputDropdownOptions {
 48 |     displayBy: string;
 49 |     identifyBy: string;
 50 |     appendToBody: boolean;
 51 |     offset: string;
 52 |     focusFirstElement: boolean;
 53 |     showDropdownIfEmpty: boolean;
 54 |     minimumTextLength: number;
 55 |     limitItemsTo: number;
 56 |     keepOpen: boolean;
 57 |     zIndex: number;
 58 |     dynamicUpdate: boolean;
 59 |     matchingFn: (value: string, target: TagModel) => boolean;
 60 | }
 61 | 
 62 | export const defaults = {
 63 |     tagInput: <TagInputOptions>{
 64 |         separatorKeys: [],
 65 |         separatorKeyCodes: [],
 66 |         maxItems: Infinity,
 67 |         placeholder: PLACEHOLDER,
 68 |         secondaryPlaceholder: SECONDARY_PLACEHOLDER,
 69 |         validators: [],
 70 |         asyncValidators: [],
 71 |         onlyFromAutocomplete: false,
 72 |         errorMessages: {},
 73 |         theme: '',
 74 |         onTextChangeDebounce: 250,
 75 |         inputId: null,
 76 |         inputClass: '',
 77 |         clearOnBlur: false,
 78 |         hideForm: false,
 79 |         addOnBlur: false,
 80 |         addOnPaste: false,
 81 |         pasteSplitPattern: ',',
 82 |         blinkIfDupe: true,
 83 |         removable: true,
 84 |         editable: false,
 85 |         allowDupes: false,
 86 |         modelAsStrings: false,
 87 |         trimTags: true,
 88 |         ripple: true,
 89 |         tabIndex: '',
 90 |         disable: false,
 91 |         dragZone: '',
 92 |         onRemoving: undefined,
 93 |         onAdding: undefined,
 94 |         displayBy: 'display',
 95 |         identifyBy: 'value',
 96 |         animationDuration: {
 97 |             enter: '250ms',
 98 |             leave: '150ms'
 99 |         }
100 |     },
101 |     dropdown: <TagInputDropdownOptions>{
102 |         displayBy: 'display',
103 |         identifyBy: 'value',
104 |         appendToBody: true,
105 |         offset: '50 0',
106 |         focusFirstElement: false,
107 |         showDropdownIfEmpty: false,
108 |         minimumTextLength: 1,
109 |         limitItemsTo: Infinity,
110 |         keepOpen: true,
111 |         dynamicUpdate: true,
112 |         zIndex: 1000,
113 |         matchingFn
114 |     }
115 | };
116 | 
117 | /**
118 |  * @name matchingFn
119 |  * @param this
120 |  * @param value
121 |  * @param target
122 |  */
123 | function matchingFn(this: TagInputDropdown, value: string, target: TagModel): boolean {
124 |     const targetValue = target[this.displayBy].toString();
125 | 
126 |     return targetValue && targetValue
127 |         .toLowerCase()
128 |         .indexOf(value.toLowerCase()) >= 0;
129 | }
130 | 


--------------------------------------------------------------------------------
/modules/index.ts:
--------------------------------------------------------------------------------
1 | export { TagInputModule } from './tag-input.module';
2 | 
3 | export {
4 |     TagInputDropdown, DeleteIconComponent, TagInputForm, TagRipple, TagComponent, TagInputComponent
5 | } from './components/index';
6 | 
7 | 
8 | export * from './core/pipes';
9 | 


--------------------------------------------------------------------------------
/modules/tag-input.module.ts:
--------------------------------------------------------------------------------
 1 | import { NgModule } from '@angular/core';
 2 | import { ReactiveFormsModule, FormsModule, COMPOSITION_BUFFER_MODE } from '@angular/forms';
 3 | import { CommonModule } from '@angular/common';
 4 | import { Ng2DropdownModule } from 'ng2-material-dropdown';
 5 | import { HighlightPipe } from './core/pipes/highlight.pipe';
 6 | import { DragProvider } from './core/providers/drag-provider';
 7 | import { OptionsProvider, Options } from './core/providers/options-provider';
 8 | import { TagInputComponent } from './components/tag-input/tag-input';
 9 | import { DeleteIconComponent } from './components/icon/icon';
10 | import { TagInputForm } from './components/tag-input-form/tag-input-form.component';
11 | import { TagComponent } from './components/tag/tag.component';
12 | import { TagInputDropdown } from './components/dropdown/tag-input-dropdown.component';
13 | import { TagRipple } from './components/tag/tag-ripple.component';
14 | 
15 | const optionsProvider = new OptionsProvider();
16 | 
17 | @NgModule({
18 |     imports: [
19 |         CommonModule,
20 |         ReactiveFormsModule,
21 |         FormsModule,
22 |         Ng2DropdownModule
23 |     ],
24 |     declarations: [
25 |         TagInputComponent,
26 |         DeleteIconComponent,
27 |         TagInputForm,
28 |         TagComponent,
29 |         HighlightPipe,
30 |         TagInputDropdown,
31 |         TagRipple
32 |     ],
33 |     exports: [
34 |         TagInputComponent,
35 |         DeleteIconComponent,
36 |         TagInputForm,
37 |         TagComponent,
38 |         HighlightPipe,
39 |         TagInputDropdown,
40 |         TagRipple
41 |     ],
42 |     providers: [
43 |         DragProvider,
44 |         { provide: COMPOSITION_BUFFER_MODE, useValue: false },
45 |     ]
46 | })
47 | export class TagInputModule {
48 |     /**
49 |      * @name withDefaults
50 |      * @param options {Options}
51 |      */
52 |     public static withDefaults(options: Options): void {
53 |         optionsProvider.setOptions(options);
54 |     }
55 | }
56 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "ngx-chips",
 3 |   "version": "3.0.0",
 4 |   "description": "Tag Input component for Angular",
 5 |   "scripts": {
 6 |     "release": "npm run build && npm publish dist",
 7 |     "postrelease": "rm -rf dist",
 8 |     "build": "ng-packagr -p package.json && mkdirp ./dist/dist && ncp ./modules/core/styles ./dist/core/styles",
 9 |     "server": "ng serve --port 3010",
10 |     "start": "npm run server",
11 |     "test": "ng test modules --browsers=ChromeHeadless --watch=false",
12 |     "codecov": "ng test modules --code-coverage --browsers=ChromeHeadless --watch=false",
13 |     "ng": "ng"
14 |   },
15 |   "author": {
16 |     "name": "Giancarlo Buomprisco",
17 |     "email": "giancarlopsk@gmail.com"
18 |   },
19 |   "contributors": [],
20 |   "license": "MIT",
21 |   "devDependencies": {
22 |     "@angular-devkit/build-angular": "^13.0.4",
23 |     "@angular/animations": "^13.0.3",
24 |     "@angular/cli": "^13.0.4",
25 |     "@angular/common": "^13.0.3",
26 |     "@angular/compiler": "^13.0.3",
27 |     "@angular/compiler-cli": "^13.0.3",
28 |     "@angular/core": "^13.0.3",
29 |     "@angular/forms": "^13.0.3",
30 |     "@angular/language-service": "^13.0.3",
31 |     "@angular/platform-browser": "^13.0.3",
32 |     "@angular/platform-browser-dynamic": "^13.0.3",
33 |     "@types/jasmine": "~3.3.8",
34 |     "@types/jasminewd2": "^2.0.10",
35 |     "@types/node": "^12.20.37",
36 |     "jasmine-core": "~3.4.0",
37 |     "jasmine-spec-reporter": "~4.2.1",
38 |     "karma": "^5.2.3",
39 |     "karma-chrome-launcher": "~2.2.0",
40 |     "karma-coverage-istanbul-reporter": "~2.0.1",
41 |     "karma-jasmine": "~2.0.1",
42 |     "karma-jasmine-html-reporter": "^1.7.0",
43 |     "mkdirp": "^0.5.1",
44 |     "ncp": "^2.0.0",
45 |     "ng-packagr": "^13.0.8",
46 |     "protractor": "~7.0.0",
47 |     "rxjs": "7.4.0",
48 |     "tslint": "~6.1.3",
49 |     "typescript": "4.4.2",
50 |     "zone.js": "~0.11.4"
51 |   },
52 |   "dependencies": {
53 |     "ng2-material-dropdown": ">=1.0.0"
54 |   },
55 |   "peerDependencies": {
56 |     "@angular/animations": ">=10.1.5",
57 |     "@angular/common": ">=10.1.5",
58 |     "@angular/core": ">=10.1.5",
59 |     "@angular/forms": ">=10.1.5",
60 |     "@angular/compiler": ">=10.1.5"
61 |   },
62 |   "keywords": [
63 |     "angular tag input",
64 |     "tag input component",
65 |     "material tag input",
66 |     "angular chips component",
67 |     "material chips"
68 |   ],
69 |   "repository": {
70 |     "type": "git",
71 |     "url": "https://github.com/Gbuomprisco/ngx-chips"
72 |   },
73 |   "bugs": {
74 |     "url": "https://github.com/Gbuomprisco/ngx-chips/issues"
75 |   },
76 |   "homepage": "https://github.com/Gbuomprisco/ngx-chips",
77 |   "$schema": "./node_modules/ng-packagr/package.schema.json",
78 |   "ngPackage": {
79 |     "$schema": "./node_modules/ng-packagr/ng-package.schema.json",
80 |     "lib": {
81 |       "entryFile": "modules/index.ts"
82 |     },
83 |     "allowedNonPeerDependencies": [
84 |       "ng2-material-dropdown"
85 |     ]
86 |   },
87 |   "bit": {
88 |     "env": {
89 |       "compiler": "bit.envs/compilers/angular@0.2.0"
90 |     },
91 |     "componentsDefaultDirectory": "components/{name}",
92 |     "packageManager": "npm"
93 |   }
94 | }
95 | 


--------------------------------------------------------------------------------
/polyfills.ts:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * This file includes polyfills needed by Angular and is loaded before the app.
 3 |  * You can add your own extra polyfills to this file.
 4 |  *
 5 |  * This file is divided into 2 sections:
 6 |  *   1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers.
 7 |  *   2. Application imports. Files imported after ZoneJS that should be loaded before your main
 8 |  *      file.
 9 |  *
10 |  * The current setup is for so-called "evergreen" browsers; the last versions of browsers that
11 |  * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera),
12 |  * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile.
13 |  *
14 |  * Learn more in https://angular.io/guide/browser-support
15 |  */
16 | 
17 | /***************************************************************************************************
18 |  * BROWSER POLYFILLS
19 |  */
20 | 
21 | /** IE10 and IE11 requires the following for NgClass support on SVG elements */
22 | // import 'classlist.js';  // Run `npm install --save classlist.js`.
23 | 
24 | /**
25 |  * Web Animations `@angular/platform-browser/animations`
26 |  * Only required if AnimationBuilder is used within the application and using IE/Edge or Safari.
27 |  * Standard animation support in Angular DOES NOT require any polyfills (as of Angular 6.0).
28 |  */
29 | // import 'web-animations-js';  // Run `npm install --save web-animations-js`.
30 | 
31 | /**
32 |  * By default, zone.js will patch all possible macroTask and DomEvents
33 |  * user can disable parts of macroTask/DomEvents patch by setting following flags
34 |  * because those flags need to be set before `zone.js` being loaded, and webpack
35 |  * will put import in the top of bundle, so user need to create a separate file
36 |  * in this directory (for example: zone-flags.ts), and put the following flags
37 |  * into that file, and then add the following code before importing zone.js.
38 |  * import './zone-flags.ts';
39 |  *
40 |  * The flags allowed in zone-flags.ts are listed here.
41 |  *
42 |  * The following flags will work for all browsers.
43 |  *
44 |  * (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame
45 |  * (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick
46 |  * (window as any).__zone_symbol__UNPATCHED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames
47 |  *
48 |  *  in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js
49 |  *  with the following flag, it will bypass `zone.js` patch for IE/Edge
50 |  *
51 |  *  (window as any).__Zone_enable_cross_context_check = true;
52 |  *
53 |  */
54 | 
55 | /***************************************************************************************************
56 |  * Zone JS is required by default for Angular itself.
57 |  */
58 | import 'zone.js/dist/zone';  // Included with Angular CLI.
59 | 
60 | 
61 | /***************************************************************************************************
62 |  * APPLICATION IMPORTS
63 |  */
64 | 


--------------------------------------------------------------------------------
/test.ts:
--------------------------------------------------------------------------------
 1 | // This file is required by karma.conf.js and loads recursively all the .spec and framework files
 2 | import 'zone.js/dist/zone';
 3 | import 'zone.js/dist/zone-testing';
 4 | import { getTestBed } from '@angular/core/testing';
 5 | import {
 6 |   BrowserDynamicTestingModule,
 7 |   platformBrowserDynamicTesting
 8 | } from '@angular/platform-browser-dynamic/testing';
 9 | 
10 | declare const require: any;
11 | 
12 | // First, initialize the Angular testing environment.
13 | getTestBed().initTestEnvironment(
14 |   BrowserDynamicTestingModule,
15 |   platformBrowserDynamicTesting()
16 | );
17 | // Then we find all the tests.
18 | const context = require.context('./', true, /\.spec\.ts$/);
19 | // And load the modules.
20 | context.keys().map(context);
21 | 


--------------------------------------------------------------------------------
/tsconfig.app.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "extends": "./tsconfig.json",
 3 |   "compilerOptions": {
 4 |     "outDir": "./out-tsc/app",
 5 |     "types": []
 6 |   },
 7 |   "files": [
 8 |     "demo/main.ts",
 9 |     "polyfills.ts"
10 |   ],
11 |   "include": [
12 |     "**/**/*.d.ts"
13 |   ]
14 | }
15 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compileOnSave": false,
 3 |   "compilerOptions": {
 4 |     "baseUrl": "./",
 5 |     "outDir": "./dist/out-tsc",
 6 |     "sourceMap": true,
 7 |     "declaration": false,
 8 |     "module": "esnext",
 9 |     "moduleResolution": "node",
10 |     "emitDecoratorMetadata": true,
11 |     "experimentalDecorators": true,
12 |     "importHelpers": true,
13 |     "target": "es2020",
14 |     "typeRoots": [
15 |       "node_modules/@types"
16 |     ],
17 |     "lib": [
18 |       "es2020",
19 |       "dom"
20 |     ]
21 |   },
22 |   "angularCompilerVersion": {
23 |     "disableTypeScriptVersionCheck": true
24 |   }
25 | }
26 | 


--------------------------------------------------------------------------------
/tsconfig.spec.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "extends": "./tsconfig.json",
 3 |   "compilerOptions": {
 4 |     "outDir": "./out-tsc/spec",
 5 |     "types": [
 6 |       "jasmine",
 7 |       "node"
 8 |     ]
 9 |   },
10 |   "files": [
11 |     "test.ts",
12 |     "polyfills.ts"
13 |   ],
14 |   "include": [
15 |     "modules/**/*.spec.ts",
16 |     "modules/**/*.d.ts"
17 |   ]
18 | }
19 | 


--------------------------------------------------------------------------------
/tslint.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "rules": {
 3 |     "max-line-length": [true, 120],
 4 |     "no-inferrable-types": true,
 5 |     "class-name": true,
 6 |     "comment-format": [
 7 |       true,
 8 |       "check-space"
 9 |     ],
10 |     "indent": [
11 |       true,
12 |       "spaces"
13 |     ],
14 |     "eofline": true,
15 |     "no-duplicate-variable": true,
16 |     "no-eval": true,
17 |     "no-arg": true,
18 |     "no-internal-module": true,
19 |     "no-trailing-whitespace": true,
20 |     "no-bitwise": true,
21 |     "no-unused-expression": true,
22 |     "no-shadowed-variable": true,
23 |     "one-line": [
24 |       true,
25 |       "check-catch",
26 |       "check-else",
27 |       "check-open-brace",
28 |       "check-whitespace"
29 |     ],
30 |     "quotemark": [
31 |       true,
32 |       "single",
33 |       "avoid-escape"
34 |     ],
35 |     "semicolon": true,
36 |     "typedef-whitespace": [
37 |       true,
38 |       {
39 |         "call-signature": "nospace",
40 |         "index-signature": "nospace",
41 |         "parameter": "nospace",
42 |         "property-declaration": "nospace",
43 |         "variable-declaration": "nospace"
44 |       }
45 |     ],
46 |     "curly": true,
47 |     "variable-name": [
48 |       true,
49 |       "ban-keywords",
50 |       "check-format",
51 |       "allow-leading-underscore"
52 |     ],
53 |     "whitespace": [
54 |       true,
55 |       "check-branch",
56 |       "check-decl",
57 |       "check-operator",
58 |       "check-separator",
59 |       "check-type"
60 |     ]
61 |   }
62 | }
63 | 


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