Icard/angular-clarity-master(work.../node_modules/ngx-chips/fesm2015/ngx-chips.mjs

2315 lines
126 KiB
JavaScript

import * as i0 from '@angular/core';
import { Pipe, Injectable, Directive, Input, EventEmitter, Component, Output, ViewChild, HostBinding, HostListener, TemplateRef, ContentChildren, forwardRef, ContentChild, ViewChildren, NgModule } from '@angular/core';
import * as i1 from '@angular/forms';
import { FormControl, FormGroup, NG_VALUE_ACCESSOR, ReactiveFormsModule, FormsModule, COMPOSITION_BUFFER_MODE } from '@angular/forms';
import * as i2 from '@angular/common';
import { CommonModule } from '@angular/common';
import * as i1$1 from 'ng2-material-dropdown';
import { Ng2Dropdown, Ng2DropdownModule } from 'ng2-material-dropdown';
import { __awaiter } from 'tslib';
import { filter as filter$1, map, first as first$1, debounceTime as debounceTime$1 } from 'rxjs';
import { trigger, state, style, transition, animate, keyframes } from '@angular/animations';
import { first, distinctUntilChanged, debounceTime, filter } from 'rxjs/operators';
const escape = s => s.replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&');
class HighlightPipe {
/**
* @name transform
* @param value {string}
* @param arg {string}
*/
transform(value, arg) {
if (!arg.trim()) {
return value;
}
try {
const regex = new RegExp(`(${escape(arg)})`, 'i');
return value.replace(regex, '<b>$1</b>');
}
catch (e) {
return value;
}
}
}
HighlightPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: HighlightPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
HighlightPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: HighlightPipe, name: "highlight" });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: HighlightPipe, decorators: [{
type: Pipe,
args: [{
name: 'highlight'
}]
}] });
/*
** constants and default values for <tag-input>
*/
const PLACEHOLDER = '+ Tag';
const SECONDARY_PLACEHOLDER = 'Enter a new tag';
const KEYDOWN = 'keydown';
const KEYUP = 'keyup';
const FOCUS = 'focus';
const MAX_ITEMS_WARNING = 'The number of items specified was greater than the property max-items.';
const ACTIONS_KEYS = {
DELETE: 'DELETE',
SWITCH_PREV: 'SWITCH_PREV',
SWITCH_NEXT: 'SWITCH_NEXT',
TAB: 'TAB'
};
const KEY_PRESS_ACTIONS = {
8: ACTIONS_KEYS.DELETE,
46: ACTIONS_KEYS.DELETE,
37: ACTIONS_KEYS.SWITCH_PREV,
39: ACTIONS_KEYS.SWITCH_NEXT,
9: ACTIONS_KEYS.TAB
};
const DRAG_AND_DROP_KEY = 'Text';
const NEXT = 'NEXT';
const PREV = 'PREV';
class DragProvider {
constructor() {
this.state = {
dragging: false,
dropping: false,
index: undefined
};
}
/**
* @name setDraggedItem
* @param event
* @param tag
*/
setDraggedItem(event, tag) {
if (event && event.dataTransfer) {
event.dataTransfer.setData(DRAG_AND_DROP_KEY, JSON.stringify(tag));
}
}
/**
* @name getDraggedItem
* @param event
*/
getDraggedItem(event) {
if (event && event.dataTransfer) {
const data = event.dataTransfer.getData(DRAG_AND_DROP_KEY);
try {
return JSON.parse(data);
}
catch (_a) {
return;
}
}
}
/**
* @name setSender
* @param sender
*/
setSender(sender) {
this.sender = sender;
}
/**
* @name setReceiver
* @param receiver
*/
setReceiver(receiver) {
this.receiver = receiver;
}
/**
* @name onTagDropped
* @param tag
* @param indexDragged
* @param indexDropped
*/
onTagDropped(tag, indexDragged, indexDropped) {
this.onDragEnd();
this.sender.onRemoveRequested(tag, indexDragged);
this.receiver.onAddingRequested(false, tag, indexDropped);
}
/**
* @name setState
* @param state
*/
setState(state) {
this.state = Object.assign(Object.assign({}, this.state), state);
}
/**
* @name getState
* @param key
*/
getState(key) {
return key ? this.state[key] : this.state;
}
/**
* @name onDragEnd
*/
onDragEnd() {
this.setState({
dragging: false,
dropping: false,
index: undefined
});
}
}
DragProvider.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: DragProvider, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
DragProvider.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: DragProvider });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: DragProvider, decorators: [{
type: Injectable
}] });
const defaults = {
tagInput: {
separatorKeys: [],
separatorKeyCodes: [],
maxItems: Infinity,
placeholder: PLACEHOLDER,
secondaryPlaceholder: SECONDARY_PLACEHOLDER,
validators: [],
asyncValidators: [],
onlyFromAutocomplete: false,
errorMessages: {},
theme: '',
onTextChangeDebounce: 250,
inputId: null,
inputClass: '',
clearOnBlur: false,
hideForm: false,
addOnBlur: false,
addOnPaste: false,
pasteSplitPattern: ',',
blinkIfDupe: true,
removable: true,
editable: false,
allowDupes: false,
modelAsStrings: false,
trimTags: true,
ripple: true,
tabIndex: '',
disable: false,
dragZone: '',
onRemoving: undefined,
onAdding: undefined,
displayBy: 'display',
identifyBy: 'value',
animationDuration: {
enter: '250ms',
leave: '150ms'
}
},
dropdown: {
displayBy: 'display',
identifyBy: 'value',
appendToBody: true,
offset: '50 0',
focusFirstElement: false,
showDropdownIfEmpty: false,
minimumTextLength: 1,
limitItemsTo: Infinity,
keepOpen: true,
dynamicUpdate: true,
zIndex: 1000,
matchingFn
}
};
/**
* @name matchingFn
* @param this
* @param value
* @param target
*/
function matchingFn(value, target) {
const targetValue = target[this.displayBy].toString();
return targetValue && targetValue
.toLowerCase()
.indexOf(value.toLowerCase()) >= 0;
}
class OptionsProvider {
setOptions(options) {
OptionsProvider.defaults.tagInput = Object.assign(Object.assign({}, defaults.tagInput), options.tagInput);
OptionsProvider.defaults.dropdown = Object.assign(Object.assign({}, defaults.dropdown), options.dropdown);
}
}
OptionsProvider.defaults = defaults;
function isObject(obj) {
return obj === Object(obj);
}
class TagInputAccessor {
constructor() {
this._items = [];
/**
* @name displayBy
*/
this.displayBy = OptionsProvider.defaults.tagInput.displayBy;
/**
* @name identifyBy
*/
this.identifyBy = OptionsProvider.defaults.tagInput.identifyBy;
}
get items() {
return this._items;
}
set items(items) {
this._items = items;
this._onChangeCallback(this._items);
}
onTouched() {
this._onTouchedCallback();
}
writeValue(items) {
this._items = items || [];
}
registerOnChange(fn) {
this._onChangeCallback = fn;
}
registerOnTouched(fn) {
this._onTouchedCallback = fn;
}
/**
* @name getItemValue
* @param item
* @param fromDropdown
*/
getItemValue(item, fromDropdown = false) {
const property = fromDropdown && this.dropdown ? this.dropdown.identifyBy : this.identifyBy;
return isObject(item) ? item[property] : item;
}
/**
* @name getItemDisplay
* @param item
* @param fromDropdown
*/
getItemDisplay(item, fromDropdown = false) {
const property = fromDropdown && this.dropdown ? this.dropdown.displayBy : this.displayBy;
return isObject(item) ? item[property] : item;
}
/**
* @name getItemsWithout
* @param index
*/
getItemsWithout(index) {
return this.items.filter((item, position) => position !== index);
}
}
TagInputAccessor.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: TagInputAccessor, deps: [], target: i0.ɵɵFactoryTarget.Directive });
TagInputAccessor.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.0.3", type: TagInputAccessor, inputs: { displayBy: "displayBy", identifyBy: "identifyBy" }, ngImport: i0 });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: TagInputAccessor, decorators: [{
type: Directive
}], propDecorators: { displayBy: [{
type: Input
}], identifyBy: [{
type: Input
}] } });
/**
* @name listen
* @param listenerType
* @param action
* @param condition
*/
function listen(listenerType, action, condition = true) {
// if the event provided does not exist, throw an error
if (!this.listeners.hasOwnProperty(listenerType)) {
throw new Error('The event entered may be wrong');
}
// if a condition is present and is false, exit early
if (!condition) {
return;
}
// fire listener
this.listeners[listenerType].push(action);
}
class TagInputForm {
constructor() {
/**
* @name onSubmit
*/
this.onSubmit = new EventEmitter();
/**
* @name onBlur
*/
this.onBlur = new EventEmitter();
/**
* @name onFocus
*/
this.onFocus = new EventEmitter();
/**
* @name onKeyup
*/
this.onKeyup = new EventEmitter();
/**
* @name onKeydown
*/
this.onKeydown = new EventEmitter();
/**
* @name inputTextChange
*/
this.inputTextChange = new EventEmitter();
/**
* @name validators
*/
this.validators = [];
/**
* @name asyncValidators
* @desc array of AsyncValidator that are used to validate the tag before it gets appended to the list
*/
this.asyncValidators = [];
/**
* @name tabindex
* @desc pass through the specified tabindex to the input
*/
this.tabindex = '';
/**
* @name disabled
*/
this.disabled = false;
this.item = new FormControl({ value: '', disabled: this.disabled });
}
/**
* @name inputText
*/
get inputText() {
return this.item.value;
}
/**
* @name inputText
* @param text {string}
*/
set inputText(text) {
this.item.setValue(text);
this.inputTextChange.emit(text);
}
ngOnInit() {
this.item.setValidators(this.validators);
this.item.setAsyncValidators(this.asyncValidators);
// creating form
this.form = new FormGroup({
item: this.item
});
}
ngOnChanges(changes) {
if (changes.disabled && !changes.disabled.firstChange) {
if (changes.disabled.currentValue) {
this.form.controls['item'].disable();
}
else {
this.form.controls['item'].enable();
}
}
}
/**
* @name value
*/
get value() {
return this.form.get('item');
}
/**
* @name isInputFocused
*/
isInputFocused() {
const doc = typeof document !== 'undefined' ? document : undefined;
return doc ? doc.activeElement === this.input.nativeElement : false;
}
/**
* @name getErrorMessages
* @param messages
*/
getErrorMessages(messages) {
return Object.keys(messages)
.filter(err => this.value.hasError(err))
.map(err => messages[err]);
}
/**
* @name hasErrors
*/
hasErrors() {
const { dirty, value, valid } = this.form;
return dirty && value.item && !valid;
}
/**
* @name focus
*/
focus() {
this.input.nativeElement.focus();
}
/**
* @name blur
*/
blur() {
this.input.nativeElement.blur();
}
/**
* @name getElementPosition
*/
getElementPosition() {
return this.input.nativeElement.getBoundingClientRect();
}
/**
* - removes input from the component
* @name destroy
*/
destroy() {
const input = this.input.nativeElement;
input.parentElement.removeChild(input);
}
/**
* @name onKeyDown
* @param $event
*/
onKeyDown($event) {
this.inputText = this.value.value;
if ($event.key === 'Enter') {
this.submit($event);
}
else {
return this.onKeydown.emit($event);
}
}
/**
* @name onKeyUp
* @param $event
*/
onKeyUp($event) {
this.inputText = this.value.value;
return this.onKeyup.emit($event);
}
/**
* @name submit
*/
submit($event) {
$event.preventDefault();
this.onSubmit.emit($event);
}
}
TagInputForm.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: TagInputForm, deps: [], target: i0.ɵɵFactoryTarget.Component });
TagInputForm.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: TagInputForm, selector: "tag-input-form", inputs: { placeholder: "placeholder", validators: "validators", asyncValidators: "asyncValidators", inputId: "inputId", inputClass: "inputClass", tabindex: "tabindex", disabled: "disabled", inputText: "inputText" }, outputs: { onSubmit: "onSubmit", onBlur: "onBlur", onFocus: "onFocus", onKeyup: "onKeyup", onKeydown: "onKeydown", inputTextChange: "inputTextChange" }, viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<!-- form -->\n<form (ngSubmit)=\"submit($event)\" [formGroup]=\"form\">\n <input #input\n\n type=\"text\"\n class=\"ng2-tag-input__text-input\"\n autocomplete=\"off\"\n tabindex=\"{{ disabled ? -1 : tabindex ? tabindex : 0 }}\"\n minlength=\"1\"\n formControlName=\"item\"\n\n [ngClass]=\"inputClass\"\n [attr.id]=\"inputId\"\n [attr.placeholder]=\"placeholder\"\n [attr.aria-label]=\"placeholder\"\n [attr.tabindex]=\"tabindex\"\n [attr.disabled]=\"disabled ? disabled : null\"\n\n (focus)=\"onFocus.emit($event)\"\n (blur)=\"onBlur.emit($event)\"\n (keydown)=\"onKeyDown($event)\"\n (keyup)=\"onKeyUp($event)\"\n />\n</form>\n", styles: [".dark tag:focus{box-shadow:0 0 0 1px #323232}.ng2-tag-input.bootstrap3-info{background-color:#fff;display:inline-block;color:#555;vertical-align:middle;max-width:100%;height:42px;line-height:44px}.ng2-tag-input.bootstrap3-info input{border:none;box-shadow:none;outline:none;background-color:transparent;padding:0 6px;margin:0;width:auto;max-width:inherit}.ng2-tag-input.bootstrap3-info .form-control input::-moz-placeholder{color:#777;opacity:1}.ng2-tag-input.bootstrap3-info .form-control input:-ms-input-placeholder{color:#777}.ng2-tag-input.bootstrap3-info .form-control input::-webkit-input-placeholder{color:#777}.ng2-tag-input.bootstrap3-info input:focus{border:none;box-shadow:none}.bootstrap3-info.ng2-tag-input.ng2-tag-input--focused{box-shadow:inset 0 1px 1px #0006;border:1px solid #ccc}.bootstrap3-info.ng2-tag-input.ng2-tag-input--invalid{box-shadow:inset 0 1px 1px #d9534f}.ng2-tag-input{display:block;flex-direction:row;flex-wrap:wrap;position:relative;transition:all .25s;padding:.25rem 0;min-height:32px;cursor:text;border-bottom:2px solid #efefef}.ng2-tag-input:focus{outline:0}.ng2-tag-input.ng2-tag-input--dropping{opacity:.7}.ng2-tag-input.ng2-tag-input--focused{border-bottom:2px solid #2196F3}.ng2-tag-input.ng2-tag-input--invalid{border-bottom:2px solid #f44336}.ng2-tag-input.ng2-tag-input--loading{border:none}.ng2-tag-input.ng2-tag-input--disabled{opacity:.5;cursor:not-allowed}.ng2-tag-input form{margin:.1em 0}.ng2-tag-input .ng2-tags-container{flex-wrap:wrap;display:flex}.minimal.ng2-tag-input{display:block;flex-direction:row;flex-wrap:wrap;position:relative;cursor:text;border-bottom:1px solid transparent}.minimal.ng2-tag-input:focus{outline:0}.minimal.ng2-tag-input.ng2-tag-input--dropping{opacity:.7}.minimal.ng2-tag-input.ng2-tag-input--loading{border:none}.minimal.ng2-tag-input.ng2-tag-input--disabled{opacity:.5;cursor:not-allowed}.minimal.ng2-tag-input .ng2-tags-container{flex-wrap:wrap;display:flex}.dark.ng2-tag-input{display:block;flex-direction:row;flex-wrap:wrap;position:relative;cursor:text;border-bottom:2px solid #444}.dark.ng2-tag-input:focus{outline:0}.dark.ng2-tag-input.ng2-tag-input--dropping{opacity:.7}.dark.ng2-tag-input.ng2-tag-input--loading{border:none}.dark.ng2-tag-input.ng2-tag-input--disabled{opacity:.5;cursor:not-allowed}.dark.ng2-tag-input .ng2-tags-container{flex-wrap:wrap;display:flex}.bootstrap.ng2-tag-input{display:block;flex-direction:row;flex-wrap:wrap;position:relative;cursor:text;border-bottom:2px solid #efefef}.bootstrap.ng2-tag-input:focus{outline:0}.bootstrap.ng2-tag-input.ng2-tag-input--dropping{opacity:.7}.bootstrap.ng2-tag-input.ng2-tag-input--focused{border-bottom:2px solid #0275d8}.bootstrap.ng2-tag-input.ng2-tag-input--invalid{border-bottom:2px solid #d9534f}.bootstrap.ng2-tag-input.ng2-tag-input--loading{border:none}.bootstrap.ng2-tag-input.ng2-tag-input--disabled{opacity:.5;cursor:not-allowed}.bootstrap.ng2-tag-input .ng2-tags-container{flex-wrap:wrap;display:flex}.bootstrap3-info.ng2-tag-input{display:block;flex-direction:row;flex-wrap:wrap;position:relative;padding:4px;cursor:text;box-shadow:inset 0 1px 1px #00000013;border-radius:4px}.bootstrap3-info.ng2-tag-input:focus{outline:0}.bootstrap3-info.ng2-tag-input.ng2-tag-input--dropping{opacity:.7}.bootstrap3-info.ng2-tag-input.ng2-tag-input--invalid{border-bottom:1px solid #d9534f}.bootstrap3-info.ng2-tag-input.ng2-tag-input--loading{border:none}.bootstrap3-info.ng2-tag-input.ng2-tag-input--disabled{opacity:.5;cursor:not-allowed}.bootstrap3-info.ng2-tag-input form{margin:.1em 0}.bootstrap3-info.ng2-tag-input .ng2-tags-container{flex-wrap:wrap;display:flex}.error-message{font-size:.8em;color:#f44336;margin:.5em 0 0}.bootstrap .error-message{color:#d9534f}.ng2-tag-input__text-input{display:inline;vertical-align:middle;border:none;padding:0 .5rem;height:38px;font-size:1em;font-family:Roboto,Helvetica Neue,sans-serif}.ng2-tag-input__text-input:focus{outline:0}.ng2-tag-input__text-input[disabled=true]{opacity:.5;background:#fff}\n"], directives: [{ type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i1.MinLengthValidator, selector: "[minlength][formControlName],[minlength][formControl],[minlength][ngModel]", inputs: ["minlength"] }, { type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: TagInputForm, decorators: [{
type: Component,
args: [{ selector: 'tag-input-form', template: "<!-- form -->\n<form (ngSubmit)=\"submit($event)\" [formGroup]=\"form\">\n <input #input\n\n type=\"text\"\n class=\"ng2-tag-input__text-input\"\n autocomplete=\"off\"\n tabindex=\"{{ disabled ? -1 : tabindex ? tabindex : 0 }}\"\n minlength=\"1\"\n formControlName=\"item\"\n\n [ngClass]=\"inputClass\"\n [attr.id]=\"inputId\"\n [attr.placeholder]=\"placeholder\"\n [attr.aria-label]=\"placeholder\"\n [attr.tabindex]=\"tabindex\"\n [attr.disabled]=\"disabled ? disabled : null\"\n\n (focus)=\"onFocus.emit($event)\"\n (blur)=\"onBlur.emit($event)\"\n (keydown)=\"onKeyDown($event)\"\n (keyup)=\"onKeyUp($event)\"\n />\n</form>\n", styles: [".dark tag:focus{box-shadow:0 0 0 1px #323232}.ng2-tag-input.bootstrap3-info{background-color:#fff;display:inline-block;color:#555;vertical-align:middle;max-width:100%;height:42px;line-height:44px}.ng2-tag-input.bootstrap3-info input{border:none;box-shadow:none;outline:none;background-color:transparent;padding:0 6px;margin:0;width:auto;max-width:inherit}.ng2-tag-input.bootstrap3-info .form-control input::-moz-placeholder{color:#777;opacity:1}.ng2-tag-input.bootstrap3-info .form-control input:-ms-input-placeholder{color:#777}.ng2-tag-input.bootstrap3-info .form-control input::-webkit-input-placeholder{color:#777}.ng2-tag-input.bootstrap3-info input:focus{border:none;box-shadow:none}.bootstrap3-info.ng2-tag-input.ng2-tag-input--focused{box-shadow:inset 0 1px 1px #0006;border:1px solid #ccc}.bootstrap3-info.ng2-tag-input.ng2-tag-input--invalid{box-shadow:inset 0 1px 1px #d9534f}.ng2-tag-input{display:block;flex-direction:row;flex-wrap:wrap;position:relative;transition:all .25s;padding:.25rem 0;min-height:32px;cursor:text;border-bottom:2px solid #efefef}.ng2-tag-input:focus{outline:0}.ng2-tag-input.ng2-tag-input--dropping{opacity:.7}.ng2-tag-input.ng2-tag-input--focused{border-bottom:2px solid #2196F3}.ng2-tag-input.ng2-tag-input--invalid{border-bottom:2px solid #f44336}.ng2-tag-input.ng2-tag-input--loading{border:none}.ng2-tag-input.ng2-tag-input--disabled{opacity:.5;cursor:not-allowed}.ng2-tag-input form{margin:.1em 0}.ng2-tag-input .ng2-tags-container{flex-wrap:wrap;display:flex}.minimal.ng2-tag-input{display:block;flex-direction:row;flex-wrap:wrap;position:relative;cursor:text;border-bottom:1px solid transparent}.minimal.ng2-tag-input:focus{outline:0}.minimal.ng2-tag-input.ng2-tag-input--dropping{opacity:.7}.minimal.ng2-tag-input.ng2-tag-input--loading{border:none}.minimal.ng2-tag-input.ng2-tag-input--disabled{opacity:.5;cursor:not-allowed}.minimal.ng2-tag-input .ng2-tags-container{flex-wrap:wrap;display:flex}.dark.ng2-tag-input{display:block;flex-direction:row;flex-wrap:wrap;position:relative;cursor:text;border-bottom:2px solid #444}.dark.ng2-tag-input:focus{outline:0}.dark.ng2-tag-input.ng2-tag-input--dropping{opacity:.7}.dark.ng2-tag-input.ng2-tag-input--loading{border:none}.dark.ng2-tag-input.ng2-tag-input--disabled{opacity:.5;cursor:not-allowed}.dark.ng2-tag-input .ng2-tags-container{flex-wrap:wrap;display:flex}.bootstrap.ng2-tag-input{display:block;flex-direction:row;flex-wrap:wrap;position:relative;cursor:text;border-bottom:2px solid #efefef}.bootstrap.ng2-tag-input:focus{outline:0}.bootstrap.ng2-tag-input.ng2-tag-input--dropping{opacity:.7}.bootstrap.ng2-tag-input.ng2-tag-input--focused{border-bottom:2px solid #0275d8}.bootstrap.ng2-tag-input.ng2-tag-input--invalid{border-bottom:2px solid #d9534f}.bootstrap.ng2-tag-input.ng2-tag-input--loading{border:none}.bootstrap.ng2-tag-input.ng2-tag-input--disabled{opacity:.5;cursor:not-allowed}.bootstrap.ng2-tag-input .ng2-tags-container{flex-wrap:wrap;display:flex}.bootstrap3-info.ng2-tag-input{display:block;flex-direction:row;flex-wrap:wrap;position:relative;padding:4px;cursor:text;box-shadow:inset 0 1px 1px #00000013;border-radius:4px}.bootstrap3-info.ng2-tag-input:focus{outline:0}.bootstrap3-info.ng2-tag-input.ng2-tag-input--dropping{opacity:.7}.bootstrap3-info.ng2-tag-input.ng2-tag-input--invalid{border-bottom:1px solid #d9534f}.bootstrap3-info.ng2-tag-input.ng2-tag-input--loading{border:none}.bootstrap3-info.ng2-tag-input.ng2-tag-input--disabled{opacity:.5;cursor:not-allowed}.bootstrap3-info.ng2-tag-input form{margin:.1em 0}.bootstrap3-info.ng2-tag-input .ng2-tags-container{flex-wrap:wrap;display:flex}.error-message{font-size:.8em;color:#f44336;margin:.5em 0 0}.bootstrap .error-message{color:#d9534f}.ng2-tag-input__text-input{display:inline;vertical-align:middle;border:none;padding:0 .5rem;height:38px;font-size:1em;font-family:Roboto,Helvetica Neue,sans-serif}.ng2-tag-input__text-input:focus{outline:0}.ng2-tag-input__text-input[disabled=true]{opacity:.5;background:#fff}\n"] }]
}], propDecorators: { onSubmit: [{
type: Output
}], onBlur: [{
type: Output
}], onFocus: [{
type: Output
}], onKeyup: [{
type: Output
}], onKeydown: [{
type: Output
}], inputTextChange: [{
type: Output
}], placeholder: [{
type: Input
}], validators: [{
type: Input
}], asyncValidators: [{
type: Input
}], inputId: [{
type: Input
}], inputClass: [{
type: Input
}], tabindex: [{
type: Input
}], disabled: [{
type: Input
}], input: [{
type: ViewChild,
args: ['input']
}], inputText: [{
type: Input
}] } });
class TagRipple {
constructor() {
this.state = 'none';
}
}
TagRipple.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: TagRipple, deps: [], target: i0.ɵɵFactoryTarget.Component });
TagRipple.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: TagRipple, selector: "tag-ripple", inputs: { state: "state" }, ngImport: i0, template: `
<div class="tag-ripple" [@ink]="state"></div>
`, isInline: true, styles: [":host{width:100%;height:100%;left:0;overflow:hidden;position:absolute}.tag-ripple{background:rgba(0,0,0,.1);top:50%;left:50%;height:100%;transform:translate(-50%,-50%);position:absolute}\n"], animations: [
trigger('ink', [
state('none', style({ width: 0, opacity: 0 })),
transition('none => clicked', [
animate(300, keyframes([
style({ opacity: 1, offset: 0, width: '30%', borderRadius: '100%' }),
style({ opacity: 1, offset: 0.5, width: '50%' }),
style({ opacity: 0.5, offset: 1, width: '100%', borderRadius: '16px' })
]))
])
])
] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: TagRipple, decorators: [{
type: Component,
args: [{
selector: 'tag-ripple',
styles: [`
:host {
width: 100%;
height: 100%;
left: 0;
overflow: hidden;
position: absolute;
}
.tag-ripple {
background: rgba(0, 0, 0, 0.1);
top: 50%;
left: 50%;
height: 100%;
transform: translate(-50%, -50%);
position: absolute;
}
`],
template: `
<div class="tag-ripple" [@ink]="state"></div>
`,
animations: [
trigger('ink', [
state('none', style({ width: 0, opacity: 0 })),
transition('none => clicked', [
animate(300, keyframes([
style({ opacity: 1, offset: 0, width: '30%', borderRadius: '100%' }),
style({ opacity: 1, offset: 0.5, width: '50%' }),
style({ opacity: 0.5, offset: 1, width: '100%', borderRadius: '16px' })
]))
])
])
]
}]
}], propDecorators: { state: [{
type: Input
}] } });
class DeleteIconComponent {
}
DeleteIconComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: DeleteIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
DeleteIconComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: DeleteIconComponent, selector: "delete-icon", ngImport: i0, template: "<span>\n <svg\n height=\"16px\"\n viewBox=\"0 0 32 32\"\n width=\"16px\"\n >\n <path\n 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\"\n fill=\"#121313\"\n />\n </svg>\n</span>", styles: [".dark tag:focus{box-shadow:0 0 0 1px #323232}.ng2-tag-input.bootstrap3-info{background-color:#fff;display:inline-block;color:#555;vertical-align:middle;max-width:100%;height:42px;line-height:44px}.ng2-tag-input.bootstrap3-info input{border:none;box-shadow:none;outline:none;background-color:transparent;padding:0 6px;margin:0;width:auto;max-width:inherit}.ng2-tag-input.bootstrap3-info .form-control input::-moz-placeholder{color:#777;opacity:1}.ng2-tag-input.bootstrap3-info .form-control input:-ms-input-placeholder{color:#777}.ng2-tag-input.bootstrap3-info .form-control input::-webkit-input-placeholder{color:#777}.ng2-tag-input.bootstrap3-info input:focus{border:none;box-shadow:none}.bootstrap3-info.ng2-tag-input.ng2-tag-input--focused{box-shadow:inset 0 1px 1px #0006;border:1px solid #ccc}.bootstrap3-info.ng2-tag-input.ng2-tag-input--invalid{box-shadow:inset 0 1px 1px #d9534f}.ng2-tag-input{display:block;flex-direction:row;flex-wrap:wrap;position:relative;transition:all .25s;padding:.25rem 0;min-height:32px;cursor:text;border-bottom:2px solid #efefef}.ng2-tag-input:focus{outline:0}.ng2-tag-input.ng2-tag-input--dropping{opacity:.7}.ng2-tag-input.ng2-tag-input--focused{border-bottom:2px solid #2196F3}.ng2-tag-input.ng2-tag-input--invalid{border-bottom:2px solid #f44336}.ng2-tag-input.ng2-tag-input--loading{border:none}.ng2-tag-input.ng2-tag-input--disabled{opacity:.5;cursor:not-allowed}.ng2-tag-input form{margin:.1em 0}.ng2-tag-input .ng2-tags-container{flex-wrap:wrap;display:flex}.minimal.ng2-tag-input{display:block;flex-direction:row;flex-wrap:wrap;position:relative;cursor:text;border-bottom:1px solid transparent}.minimal.ng2-tag-input:focus{outline:0}.minimal.ng2-tag-input.ng2-tag-input--dropping{opacity:.7}.minimal.ng2-tag-input.ng2-tag-input--loading{border:none}.minimal.ng2-tag-input.ng2-tag-input--disabled{opacity:.5;cursor:not-allowed}.minimal.ng2-tag-input .ng2-tags-container{flex-wrap:wrap;display:flex}.dark.ng2-tag-input{display:block;flex-direction:row;flex-wrap:wrap;position:relative;cursor:text;border-bottom:2px solid #444}.dark.ng2-tag-input:focus{outline:0}.dark.ng2-tag-input.ng2-tag-input--dropping{opacity:.7}.dark.ng2-tag-input.ng2-tag-input--loading{border:none}.dark.ng2-tag-input.ng2-tag-input--disabled{opacity:.5;cursor:not-allowed}.dark.ng2-tag-input .ng2-tags-container{flex-wrap:wrap;display:flex}.bootstrap.ng2-tag-input{display:block;flex-direction:row;flex-wrap:wrap;position:relative;cursor:text;border-bottom:2px solid #efefef}.bootstrap.ng2-tag-input:focus{outline:0}.bootstrap.ng2-tag-input.ng2-tag-input--dropping{opacity:.7}.bootstrap.ng2-tag-input.ng2-tag-input--focused{border-bottom:2px solid #0275d8}.bootstrap.ng2-tag-input.ng2-tag-input--invalid{border-bottom:2px solid #d9534f}.bootstrap.ng2-tag-input.ng2-tag-input--loading{border:none}.bootstrap.ng2-tag-input.ng2-tag-input--disabled{opacity:.5;cursor:not-allowed}.bootstrap.ng2-tag-input .ng2-tags-container{flex-wrap:wrap;display:flex}.bootstrap3-info.ng2-tag-input{display:block;flex-direction:row;flex-wrap:wrap;position:relative;padding:4px;cursor:text;box-shadow:inset 0 1px 1px #00000013;border-radius:4px}.bootstrap3-info.ng2-tag-input:focus{outline:0}.bootstrap3-info.ng2-tag-input.ng2-tag-input--dropping{opacity:.7}.bootstrap3-info.ng2-tag-input.ng2-tag-input--invalid{border-bottom:1px solid #d9534f}.bootstrap3-info.ng2-tag-input.ng2-tag-input--loading{border:none}.bootstrap3-info.ng2-tag-input.ng2-tag-input--disabled{opacity:.5;cursor:not-allowed}.bootstrap3-info.ng2-tag-input form{margin:.1em 0}.bootstrap3-info.ng2-tag-input .ng2-tags-container{flex-wrap:wrap;display:flex}.error-message{font-size:.8em;color:#f44336;margin:.5em 0 0}.bootstrap .error-message{color:#d9534f}:host(delete-icon){width:20px;height:16px;transition:all .15s;display:inline-block;text-align:right}:host(delete-icon) path{fill:#444}:host(delete-icon) svg{vertical-align:bottom;height:34px}:host(delete-icon):hover{transform:scale(1.5) translateY(-3px)}:host-context(.dark){text-align:right}:host-context(.dark) path{fill:#fff}:host-context(.dark) svg{vertical-align:bottom;height:34px}:host-context(.minimal){text-align:right}:host-context(.minimal) path{fill:#444}:host-context(.minimal) svg{vertical-align:bottom;height:34px}:host-context(.bootstrap){text-align:right}:host-context(.bootstrap) path{fill:#fff}:host-context(.bootstrap) svg{vertical-align:bottom;height:34px}:host-context(tag:focus) path,:host-context(tag:active) path{fill:#fff}:host-context(.dark tag:focus) path,:host-context(.dark tag:active) path{fill:#000}:host-context(.minimal tag:focus) path,:host-context(.minimal tag:active) path{fill:#000}:host-context(.bootstrap tag:focus) path,:host-context(.bootstrap tag:active) path{fill:#fff}:host-context(.bootstrap3-info){height:inherit}:host-context(.bootstrap3-info) path{fill:#fff}\n"] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: DeleteIconComponent, decorators: [{
type: Component,
args: [{ selector: 'delete-icon', template: "<span>\n <svg\n height=\"16px\"\n viewBox=\"0 0 32 32\"\n width=\"16px\"\n >\n <path\n 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\"\n fill=\"#121313\"\n />\n </svg>\n</span>", styles: [".dark tag:focus{box-shadow:0 0 0 1px #323232}.ng2-tag-input.bootstrap3-info{background-color:#fff;display:inline-block;color:#555;vertical-align:middle;max-width:100%;height:42px;line-height:44px}.ng2-tag-input.bootstrap3-info input{border:none;box-shadow:none;outline:none;background-color:transparent;padding:0 6px;margin:0;width:auto;max-width:inherit}.ng2-tag-input.bootstrap3-info .form-control input::-moz-placeholder{color:#777;opacity:1}.ng2-tag-input.bootstrap3-info .form-control input:-ms-input-placeholder{color:#777}.ng2-tag-input.bootstrap3-info .form-control input::-webkit-input-placeholder{color:#777}.ng2-tag-input.bootstrap3-info input:focus{border:none;box-shadow:none}.bootstrap3-info.ng2-tag-input.ng2-tag-input--focused{box-shadow:inset 0 1px 1px #0006;border:1px solid #ccc}.bootstrap3-info.ng2-tag-input.ng2-tag-input--invalid{box-shadow:inset 0 1px 1px #d9534f}.ng2-tag-input{display:block;flex-direction:row;flex-wrap:wrap;position:relative;transition:all .25s;padding:.25rem 0;min-height:32px;cursor:text;border-bottom:2px solid #efefef}.ng2-tag-input:focus{outline:0}.ng2-tag-input.ng2-tag-input--dropping{opacity:.7}.ng2-tag-input.ng2-tag-input--focused{border-bottom:2px solid #2196F3}.ng2-tag-input.ng2-tag-input--invalid{border-bottom:2px solid #f44336}.ng2-tag-input.ng2-tag-input--loading{border:none}.ng2-tag-input.ng2-tag-input--disabled{opacity:.5;cursor:not-allowed}.ng2-tag-input form{margin:.1em 0}.ng2-tag-input .ng2-tags-container{flex-wrap:wrap;display:flex}.minimal.ng2-tag-input{display:block;flex-direction:row;flex-wrap:wrap;position:relative;cursor:text;border-bottom:1px solid transparent}.minimal.ng2-tag-input:focus{outline:0}.minimal.ng2-tag-input.ng2-tag-input--dropping{opacity:.7}.minimal.ng2-tag-input.ng2-tag-input--loading{border:none}.minimal.ng2-tag-input.ng2-tag-input--disabled{opacity:.5;cursor:not-allowed}.minimal.ng2-tag-input .ng2-tags-container{flex-wrap:wrap;display:flex}.dark.ng2-tag-input{display:block;flex-direction:row;flex-wrap:wrap;position:relative;cursor:text;border-bottom:2px solid #444}.dark.ng2-tag-input:focus{outline:0}.dark.ng2-tag-input.ng2-tag-input--dropping{opacity:.7}.dark.ng2-tag-input.ng2-tag-input--loading{border:none}.dark.ng2-tag-input.ng2-tag-input--disabled{opacity:.5;cursor:not-allowed}.dark.ng2-tag-input .ng2-tags-container{flex-wrap:wrap;display:flex}.bootstrap.ng2-tag-input{display:block;flex-direction:row;flex-wrap:wrap;position:relative;cursor:text;border-bottom:2px solid #efefef}.bootstrap.ng2-tag-input:focus{outline:0}.bootstrap.ng2-tag-input.ng2-tag-input--dropping{opacity:.7}.bootstrap.ng2-tag-input.ng2-tag-input--focused{border-bottom:2px solid #0275d8}.bootstrap.ng2-tag-input.ng2-tag-input--invalid{border-bottom:2px solid #d9534f}.bootstrap.ng2-tag-input.ng2-tag-input--loading{border:none}.bootstrap.ng2-tag-input.ng2-tag-input--disabled{opacity:.5;cursor:not-allowed}.bootstrap.ng2-tag-input .ng2-tags-container{flex-wrap:wrap;display:flex}.bootstrap3-info.ng2-tag-input{display:block;flex-direction:row;flex-wrap:wrap;position:relative;padding:4px;cursor:text;box-shadow:inset 0 1px 1px #00000013;border-radius:4px}.bootstrap3-info.ng2-tag-input:focus{outline:0}.bootstrap3-info.ng2-tag-input.ng2-tag-input--dropping{opacity:.7}.bootstrap3-info.ng2-tag-input.ng2-tag-input--invalid{border-bottom:1px solid #d9534f}.bootstrap3-info.ng2-tag-input.ng2-tag-input--loading{border:none}.bootstrap3-info.ng2-tag-input.ng2-tag-input--disabled{opacity:.5;cursor:not-allowed}.bootstrap3-info.ng2-tag-input form{margin:.1em 0}.bootstrap3-info.ng2-tag-input .ng2-tags-container{flex-wrap:wrap;display:flex}.error-message{font-size:.8em;color:#f44336;margin:.5em 0 0}.bootstrap .error-message{color:#d9534f}:host(delete-icon){width:20px;height:16px;transition:all .15s;display:inline-block;text-align:right}:host(delete-icon) path{fill:#444}:host(delete-icon) svg{vertical-align:bottom;height:34px}:host(delete-icon):hover{transform:scale(1.5) translateY(-3px)}:host-context(.dark){text-align:right}:host-context(.dark) path{fill:#fff}:host-context(.dark) svg{vertical-align:bottom;height:34px}:host-context(.minimal){text-align:right}:host-context(.minimal) path{fill:#444}:host-context(.minimal) svg{vertical-align:bottom;height:34px}:host-context(.bootstrap){text-align:right}:host-context(.bootstrap) path{fill:#fff}:host-context(.bootstrap) svg{vertical-align:bottom;height:34px}:host-context(tag:focus) path,:host-context(tag:active) path{fill:#fff}:host-context(.dark tag:focus) path,:host-context(.dark tag:active) path{fill:#000}:host-context(.minimal tag:focus) path,:host-context(.minimal tag:active) path{fill:#000}:host-context(.bootstrap tag:focus) path,:host-context(.bootstrap tag:active) path{fill:#fff}:host-context(.bootstrap3-info){height:inherit}:host-context(.bootstrap3-info) path{fill:#fff}\n"] }]
}] });
// mocking navigator
const navigator = typeof window !== 'undefined' ? window.navigator : {
userAgent: 'Chrome',
vendor: 'Google Inc'
};
const isChrome = /Chrome/.test(navigator.userAgent) && /Google Inc/.test(navigator.vendor);
class TagComponent {
constructor(element, renderer, cdRef) {
this.element = element;
this.renderer = renderer;
this.cdRef = cdRef;
/**
* @name disabled
*/
this.disabled = false;
/**
* @name onSelect
*/
this.onSelect = new EventEmitter();
/**
* @name onRemove
*/
this.onRemove = new EventEmitter();
/**
* @name onBlur
*/
this.onBlur = new EventEmitter();
/**
* @name onKeyDown
*/
this.onKeyDown = new EventEmitter();
/**
* @name onTagEdited
*/
this.onTagEdited = new EventEmitter();
/**
* @name editing
*/
this.editing = false;
/**
* @name rippleState
*/
this.rippleState = 'none';
}
/**
* @name readonly {boolean}
*/
get readonly() {
return typeof this.model !== 'string' && this.model.readonly === true;
}
/**
* @name select
*/
select($event) {
if (this.readonly || this.disabled) {
return;
}
if ($event) {
$event.stopPropagation();
}
this.focus();
this.onSelect.emit(this.model);
}
/**
* @name remove
*/
remove($event) {
$event.stopPropagation();
this.onRemove.emit(this);
}
/**
* @name focus
*/
focus() {
this.element.nativeElement.focus();
}
move() {
this.moving = true;
}
/**
* @name keydown
* @param event
*/
keydown(event) {
if (this.editing) {
if (event.keyCode === 13) {
return this.disableEditMode(event);
}
}
else {
this.onKeyDown.emit({ event, model: this.model });
}
}
/**
* @name blink
*/
blink() {
const classList = this.element.nativeElement.classList;
classList.add('blink');
setTimeout(() => classList.remove('blink'), 50);
}
/**
* @name toggleEditMode
*/
toggleEditMode() {
if (this.editable) {
return this.editing ? undefined : this.activateEditMode();
}
}
/**
* @name onBlurred
* @param event
*/
onBlurred(event) {
// Checks if it is editable first before handeling the onBlurred event in order to prevent
// a bug in IE where tags are still editable with onlyFromAutocomplete set to true
if (!this.editable) {
return;
}
this.disableEditMode();
const value = event.target.innerText;
const result = typeof this.model === 'string'
? value
: Object.assign(Object.assign({}, this.model), { [this.displayBy]: value });
this.onBlur.emit(result);
}
/**
* @name getDisplayValue
* @param item
*/
getDisplayValue(item) {
return typeof item === 'string' ? item : item[this.displayBy];
}
/**
* @desc returns whether the ripple is visible or not
* only works in Chrome
* @name isRippleVisible
*/
get isRippleVisible() {
return !this.readonly && !this.editing && isChrome && this.hasRipple;
}
/**
* @name disableEditMode
* @param $event
*/
disableEditMode($event) {
const classList = this.element.nativeElement.classList;
const input = this.getContentEditableText();
this.editing = false;
classList.remove('tag--editing');
if (!input) {
this.setContentEditableText(this.model);
return;
}
this.storeNewValue(input);
this.cdRef.detectChanges();
if ($event) {
$event.preventDefault();
}
}
/**
* @name isDeleteIconVisible
*/
isDeleteIconVisible() {
return (!this.readonly && !this.disabled && this.removable && !this.editing);
}
/**
* @name getContentEditableText
*/
getContentEditableText() {
const input = this.getContentEditable();
return input ? input.innerText.trim() : '';
}
/**
* @name setContentEditableText
* @param model
*/
setContentEditableText(model) {
const input = this.getContentEditable();
const value = this.getDisplayValue(model);
input.innerText = value;
}
/**
* @name
*/
activateEditMode() {
const classList = this.element.nativeElement.classList;
classList.add('tag--editing');
this.editing = true;
}
/**
* @name storeNewValue
* @param input
*/
storeNewValue(input) {
const exists = (tag) => {
return typeof tag === 'string'
? tag === input
: tag[this.displayBy] === input;
};
const hasId = () => {
return this.model[this.identifyBy] !== this.model[this.displayBy];
};
// if the value changed, replace the value in the model
if (exists(this.model)) {
return;
}
const model = typeof this.model === 'string'
? input
: {
index: this.index,
[this.identifyBy]: hasId()
? this.model[this.identifyBy]
: input,
[this.displayBy]: input
};
if (this.canAddTag(model)) {
this.onTagEdited.emit({ tag: model, index: this.index });
}
else {
this.setContentEditableText(this.model);
}
}
/**
* @name getContentEditable
*/
getContentEditable() {
return this.element.nativeElement.querySelector('[contenteditable]');
}
}
TagComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: TagComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
TagComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: TagComponent, selector: "tag", inputs: { model: "model", removable: "removable", editable: "editable", template: "template", displayBy: "displayBy", identifyBy: "identifyBy", index: "index", hasRipple: "hasRipple", disabled: "disabled", canAddTag: "canAddTag" }, outputs: { onSelect: "onSelect", onRemove: "onRemove", onBlur: "onBlur", onKeyDown: "onKeyDown", onTagEdited: "onTagEdited" }, host: { listeners: { "keydown": "keydown($event)" }, properties: { "class.moving": "this.moving" } }, viewQueries: [{ propertyName: "ripple", first: true, predicate: TagRipple, descendants: true }], ngImport: i0, template: "<div (click)=\"select($event)\"\n (dblclick)=\"toggleEditMode()\"\n (mousedown)=\"rippleState='clicked'\"\n (mouseup)=\"rippleState='none'\"\n [ngSwitch]=\"!!template\"\n [class.disabled]=\"disabled\"\n [attr.tabindex]=\"-1\"\n [attr.aria-label]=\"getDisplayValue(model)\">\n\n <div *ngSwitchCase=\"true\" [attr.contenteditable]=\"editing\">\n <!-- CUSTOM TEMPLATE -->\n <ng-template\n [ngTemplateOutletContext]=\"{ item: model, index: index }\"\n [ngTemplateOutlet]=\"template\">\n </ng-template>\n </div>\n\n <div *ngSwitchCase=\"false\" class=\"tag-wrapper\">\n <!-- TAG NAME -->\n <div [attr.contenteditable]=\"editing\"\n [attr.title]=\"getDisplayValue(model)\"\n class=\"tag__text inline\"\n spellcheck=\"false\"\n (keydown.enter)=\"disableEditMode($event)\"\n (keydown.escape)=\"disableEditMode($event)\"\n (click)=\"editing ? $event.stopPropagation() : undefined\"\n (blur)=\"onBlurred($event)\">\n {{ getDisplayValue(model) }}\n </div>\n\n <!-- 'X' BUTTON -->\n <delete-icon\n aria-label=\"Remove tag\"\n role=\"button\"\n (click)=\"remove($event)\"\n *ngIf=\"isDeleteIconVisible()\">\n </delete-icon>\n </div>\n</div>\n\n<tag-ripple [state]=\"rippleState\"\n [attr.tabindex]=\"-1\"\n *ngIf=\"isRippleVisible\">\n</tag-ripple>\n", styles: [":host,:host>div,:host>div:focus{outline:0;overflow:hidden;transition:opacity 1s;z-index:1}:host{max-width:400px}:host.blink{-webkit-animation:blink .3s normal forwards ease-in-out;animation:blink .3s normal forwards ease-in-out}@-webkit-keyframes blink{0%{opacity:.3}}@keyframes blink{0%{opacity:.3}}:host .disabled{cursor:not-allowed}:host [contenteditable=true]{outline:0}.tag-wrapper{flex-direction:row;display:flex}.tag__text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}\n"], components: [{ type: DeleteIconComponent, selector: "delete-icon" }, { type: TagRipple, selector: "tag-ripple", inputs: ["state"] }], directives: [{ type: i2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: TagComponent, decorators: [{
type: Component,
args: [{ selector: 'tag', template: "<div (click)=\"select($event)\"\n (dblclick)=\"toggleEditMode()\"\n (mousedown)=\"rippleState='clicked'\"\n (mouseup)=\"rippleState='none'\"\n [ngSwitch]=\"!!template\"\n [class.disabled]=\"disabled\"\n [attr.tabindex]=\"-1\"\n [attr.aria-label]=\"getDisplayValue(model)\">\n\n <div *ngSwitchCase=\"true\" [attr.contenteditable]=\"editing\">\n <!-- CUSTOM TEMPLATE -->\n <ng-template\n [ngTemplateOutletContext]=\"{ item: model, index: index }\"\n [ngTemplateOutlet]=\"template\">\n </ng-template>\n </div>\n\n <div *ngSwitchCase=\"false\" class=\"tag-wrapper\">\n <!-- TAG NAME -->\n <div [attr.contenteditable]=\"editing\"\n [attr.title]=\"getDisplayValue(model)\"\n class=\"tag__text inline\"\n spellcheck=\"false\"\n (keydown.enter)=\"disableEditMode($event)\"\n (keydown.escape)=\"disableEditMode($event)\"\n (click)=\"editing ? $event.stopPropagation() : undefined\"\n (blur)=\"onBlurred($event)\">\n {{ getDisplayValue(model) }}\n </div>\n\n <!-- 'X' BUTTON -->\n <delete-icon\n aria-label=\"Remove tag\"\n role=\"button\"\n (click)=\"remove($event)\"\n *ngIf=\"isDeleteIconVisible()\">\n </delete-icon>\n </div>\n</div>\n\n<tag-ripple [state]=\"rippleState\"\n [attr.tabindex]=\"-1\"\n *ngIf=\"isRippleVisible\">\n</tag-ripple>\n", styles: [":host,:host>div,:host>div:focus{outline:0;overflow:hidden;transition:opacity 1s;z-index:1}:host{max-width:400px}:host.blink{-webkit-animation:blink .3s normal forwards ease-in-out;animation:blink .3s normal forwards ease-in-out}@-webkit-keyframes blink{0%{opacity:.3}}@keyframes blink{0%{opacity:.3}}:host .disabled{cursor:not-allowed}:host [contenteditable=true]{outline:0}.tag-wrapper{flex-direction:row;display:flex}.tag__text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}\n"] }]
}], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { model: [{
type: Input
}], removable: [{
type: Input
}], editable: [{
type: Input
}], template: [{
type: Input
}], displayBy: [{
type: Input
}], identifyBy: [{
type: Input
}], index: [{
type: Input
}], hasRipple: [{
type: Input
}], disabled: [{
type: Input
}], canAddTag: [{
type: Input
}], onSelect: [{
type: Output
}], onRemove: [{
type: Output
}], onBlur: [{
type: Output
}], onKeyDown: [{
type: Output
}], onTagEdited: [{
type: Output
}], moving: [{
type: HostBinding,
args: ['class.moving']
}], ripple: [{
type: ViewChild,
args: [TagRipple]
}], keydown: [{
type: HostListener,
args: ['keydown', ['$event']]
}] } });
/**
* @name animations
*/
const animations = [
trigger('animation', [
state('in', style({
opacity: 1
})),
state('out', style({
opacity: 0
})),
transition(':enter', [
animate('{{ enter }}', keyframes([
style({ opacity: 0, offset: 0, transform: 'translate(0px, 20px)' }),
style({ opacity: 0.3, offset: 0.3, transform: 'translate(0px, -10px)' }),
style({ opacity: 0.5, offset: 0.5, transform: 'translate(0px, 0px)' }),
style({ opacity: 0.75, offset: 0.75, transform: 'translate(0px, 5px)' }),
style({ opacity: 1, offset: 1, transform: 'translate(0px, 0px)' })
]))
]),
transition(':leave', [
animate('{{ leave }}', keyframes([
style({ opacity: 1, transform: 'translateX(0)', offset: 0 }),
style({ opacity: 1, transform: 'translateX(-15px)', offset: 0.7 }),
style({ opacity: 0, transform: 'translateX(100%)', offset: 1.0 })
]))
])
])
];
class TagInputDropdown {
constructor(injector) {
this.injector = injector;
/**
* @name offset
*/
this.offset = defaults.dropdown.offset;
/**
* @name focusFirstElement
*/
this.focusFirstElement = defaults.dropdown.focusFirstElement;
/**
* - show autocomplete dropdown if the value of input is empty
* @name showDropdownIfEmpty
*/
this.showDropdownIfEmpty = defaults.dropdown.showDropdownIfEmpty;
/**
* - desc minimum text length in order to display the autocomplete dropdown
* @name minimumTextLength
*/
this.minimumTextLength = defaults.dropdown.minimumTextLength;
/**
* - number of items to display in the autocomplete dropdown
* @name limitItemsTo
*/
this.limitItemsTo = defaults.dropdown.limitItemsTo;
/**
* @name displayBy
*/
this.displayBy = defaults.dropdown.displayBy;
/**
* @name identifyBy
*/
this.identifyBy = defaults.dropdown.identifyBy;
/**
* @description a function a developer can use to implement custom matching for the autocomplete
* @name matchingFn
*/
this.matchingFn = defaults.dropdown.matchingFn;
/**
* @name appendToBody
*/
this.appendToBody = defaults.dropdown.appendToBody;
/**
* @name keepOpen
* @description option to leave dropdown open when adding a new item
*/
this.keepOpen = defaults.dropdown.keepOpen;
/**
* @name dynamicUpdate
*/
this.dynamicUpdate = defaults.dropdown.dynamicUpdate;
/**
* @name zIndex
*/
this.zIndex = defaults.dropdown.zIndex;
/**
* list of items that match the current value of the input (for autocomplete)
* @name items
*/
this.items = [];
/**
* @name tagInput
*/
this.tagInput = this.injector.get(TagInputComponent);
/**
* @name _autocompleteItems
*/
this._autocompleteItems = [];
/**
*
* @name show
*/
this.show = () => {
const maxItemsReached = this.tagInput.items.length === this.tagInput.maxItems;
const value = this.getFormValue();
const hasMinimumText = value.trim().length >= this.minimumTextLength;
const position = this.calculatePosition();
const items = this.getMatchingItems(value);
const hasItems = items.length > 0;
const isHidden = this.isVisible === false;
const showDropdownIfEmpty = this.showDropdownIfEmpty && hasItems && !value;
const isDisabled = this.tagInput.disable;
const shouldShow = isHidden && ((hasItems && hasMinimumText) || showDropdownIfEmpty);
const shouldHide = this.isVisible && !hasItems;
if (this.autocompleteObservable && hasMinimumText) {
return this.getItemsFromObservable(value);
}
if ((!this.showDropdownIfEmpty && !value) ||
maxItemsReached ||
isDisabled) {
return this.dropdown.hide();
}
this.setItems(items);
if (shouldShow) {
this.dropdown.show(position);
}
else if (shouldHide) {
this.hide();
}
};
/**
* @name requestAdding
* @param item {Ng2MenuItem}
*/
this.requestAdding = (item) => __awaiter(this, void 0, void 0, function* () {
const tag = this.createTagModel(item);
yield this.tagInput.onAddingRequested(true, tag).catch(() => { });
});
/**
* @name resetItems
*/
this.resetItems = () => {
this.items = [];
};
/**
* @name getItemsFromObservable
* @param text
*/
this.getItemsFromObservable = (text) => {
this.setLoadingState(true);
const subscribeFn = (data) => {
// hide loading animation
this.setLoadingState(false)
// add items
.populateItems(data);
this.setItems(this.getMatchingItems(text));
if (this.items.length) {
this.dropdown.show(this.calculatePosition());
}
else {
this.dropdown.hide();
}
};
this.autocompleteObservable(text)
.pipe(first())
.subscribe(subscribeFn, () => this.setLoadingState(false));
};
}
/**
* @name autocompleteItems
* @param items
*/
set autocompleteItems(items) {
this._autocompleteItems = items;
}
/**
* @name autocompleteItems
* @desc array of items that will populate the autocomplete
*/
get autocompleteItems() {
const items = this._autocompleteItems;
if (!items) {
return [];
}
return items.map((item) => {
return typeof item === 'string'
? {
[this.displayBy]: item,
[this.identifyBy]: item
}
: item;
});
}
/**
* @name ngAfterviewInit
*/
ngAfterViewInit() {
this.onItemClicked().subscribe((item) => {
this.requestAdding(item);
});
// reset itemsMatching array when the dropdown is hidden
this.onHide().subscribe(this.resetItems);
const DEBOUNCE_TIME = 200;
const KEEP_OPEN = this.keepOpen;
this.tagInput.onTextChange
.asObservable()
.pipe(distinctUntilChanged(), debounceTime(DEBOUNCE_TIME), filter((value) => {
if (KEEP_OPEN === false) {
return value.length > 0;
}
return true;
}))
.subscribe(this.show);
}
/**
* @name updatePosition
*/
updatePosition() {
const position = this.tagInput.inputForm.getElementPosition();
this.dropdown.menu.updatePosition(position, this.dynamicUpdate);
}
/**
* @name isVisible
*/
get isVisible() {
return this.dropdown.menu.dropdownState.menuState.isVisible;
}
/**
* @name onHide
*/
onHide() {
return this.dropdown.onHide;
}
/**
* @name onItemClicked
*/
onItemClicked() {
return this.dropdown.onItemClicked;
}
/**
* @name selectedItem
*/
get selectedItem() {
return this.dropdown.menu.dropdownState.dropdownState.selectedItem;
}
/**
* @name state
*/
get state() {
return this.dropdown.menu.dropdownState;
}
/**
* @name hide
*/
hide() {
this.resetItems();
this.dropdown.hide();
}
/**
* @name scrollListener
*/
scrollListener() {
if (!this.isVisible || !this.dynamicUpdate) {
return;
}
this.updatePosition();
}
/**
* @name onWindowBlur
*/
onWindowBlur() {
this.dropdown.hide();
}
/**
* @name getFormValue
*/
getFormValue() {
const formValue = this.tagInput.formValue;
return formValue ? formValue.toString().trim() : '';
}
/**
* @name calculatePosition
*/
calculatePosition() {
return this.tagInput.inputForm.getElementPosition();
}
/**
* @name createTagModel
* @param item
*/
createTagModel(item) {
const display = typeof item.value === 'string' ? item.value : item.value[this.displayBy];
const value = typeof item.value === 'string' ? item.value : item.value[this.identifyBy];
return Object.assign(Object.assign({}, item.value), { [this.tagInput.displayBy]: display, [this.tagInput.identifyBy]: value });
}
/**
*
* @param value {string}
*/
getMatchingItems(value) {
if (!value && !this.showDropdownIfEmpty) {
return [];
}
const dupesAllowed = this.tagInput.allowDupes;
return this.autocompleteItems.filter((item) => {
const hasValue = dupesAllowed
? false
: this.tagInput.tags.some(tag => {
const identifyBy = this.tagInput.identifyBy;
const model = typeof tag.model === 'string' ? tag.model : tag.model[identifyBy];
return model === item[this.identifyBy];
});
return this.matchingFn(value, item) && hasValue === false;
});
}
/**
* @name setItems
*/
setItems(items) {
this.items = items.slice(0, this.limitItemsTo || items.length);
}
/**
* @name populateItems
* @param data
*/
populateItems(data) {
this.autocompleteItems = data.map(item => {
return typeof item === 'string'
? {
[this.displayBy]: item,
[this.identifyBy]: item
}
: item;
});
return this;
}
/**
* @name setLoadingState
* @param state
*/
setLoadingState(state) {
this.tagInput.isLoading = state;
return this;
}
}
TagInputDropdown.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: TagInputDropdown, deps: [{ token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
TagInputDropdown.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: TagInputDropdown, selector: "tag-input-dropdown", inputs: { offset: "offset", focusFirstElement: "focusFirstElement", showDropdownIfEmpty: "showDropdownIfEmpty", autocompleteObservable: "autocompleteObservable", minimumTextLength: "minimumTextLength", limitItemsTo: "limitItemsTo", displayBy: "displayBy", identifyBy: "identifyBy", matchingFn: "matchingFn", appendToBody: "appendToBody", keepOpen: "keepOpen", dynamicUpdate: "dynamicUpdate", zIndex: "zIndex", autocompleteItems: "autocompleteItems" }, host: { listeners: { "window:scroll": "scrollListener()", "window:blur": "onWindowBlur()" } }, queries: [{ propertyName: "templates", predicate: TemplateRef }], viewQueries: [{ propertyName: "dropdown", first: true, predicate: Ng2Dropdown, descendants: true }], ngImport: i0, template: "<ng2-dropdown [dynamicUpdate]=\"dynamicUpdate\">\n <ng2-dropdown-menu [focusFirstElement]=\"focusFirstElement\"\n [zIndex]=\"zIndex\"\n [appendToBody]=\"appendToBody\"\n [offset]=\"offset\">\n <ng2-menu-item *ngFor=\"let item of items; let index = index; let last = last\"\n [value]=\"item\"\n [ngSwitch]=\"!!templates.length\">\n\n <span *ngSwitchCase=\"false\"\n [innerHTML]=\"item[displayBy] | highlight : tagInput.inputForm.value.value\">\n </span>\n\n <ng-template *ngSwitchDefault\n [ngTemplateOutlet]=\"templates.first\"\n [ngTemplateOutletContext]=\"{ item: item, index: index, last: last }\">\n </ng-template>\n </ng2-menu-item>\n </ng2-dropdown-menu>\n</ng2-dropdown>\n", components: [{ type: i1$1.Ng2Dropdown, selector: "ng2-dropdown", inputs: ["dynamicUpdate"], outputs: ["onItemClicked", "onItemSelected", "onShow", "onHide"] }, { type: i1$1.Ng2DropdownMenu, selector: "ng2-dropdown-menu", inputs: ["width", "focusFirstElement", "offset", "appendToBody", "zIndex"] }, { type: i1$1.Ng2MenuItem, selector: "ng2-menu-item", inputs: ["preventClose", "value"] }], directives: [{ type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i2.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], pipes: { "highlight": HighlightPipe } });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: TagInputDropdown, decorators: [{
type: Component,
args: [{ selector: 'tag-input-dropdown', template: "<ng2-dropdown [dynamicUpdate]=\"dynamicUpdate\">\n <ng2-dropdown-menu [focusFirstElement]=\"focusFirstElement\"\n [zIndex]=\"zIndex\"\n [appendToBody]=\"appendToBody\"\n [offset]=\"offset\">\n <ng2-menu-item *ngFor=\"let item of items; let index = index; let last = last\"\n [value]=\"item\"\n [ngSwitch]=\"!!templates.length\">\n\n <span *ngSwitchCase=\"false\"\n [innerHTML]=\"item[displayBy] | highlight : tagInput.inputForm.value.value\">\n </span>\n\n <ng-template *ngSwitchDefault\n [ngTemplateOutlet]=\"templates.first\"\n [ngTemplateOutletContext]=\"{ item: item, index: index, last: last }\">\n </ng-template>\n </ng2-menu-item>\n </ng2-dropdown-menu>\n</ng2-dropdown>\n" }]
}], ctorParameters: function () { return [{ type: i0.Injector }]; }, propDecorators: { dropdown: [{
type: ViewChild,
args: [Ng2Dropdown]
}], templates: [{
type: ContentChildren,
args: [TemplateRef]
}], offset: [{
type: Input
}], focusFirstElement: [{
type: Input
}], showDropdownIfEmpty: [{
type: Input
}], autocompleteObservable: [{
type: Input
}], minimumTextLength: [{
type: Input
}], limitItemsTo: [{
type: Input
}], displayBy: [{
type: Input
}], identifyBy: [{
type: Input
}], matchingFn: [{
type: Input
}], appendToBody: [{
type: Input
}], keepOpen: [{
type: Input
}], dynamicUpdate: [{
type: Input
}], zIndex: [{
type: Input
}], autocompleteItems: [{
type: Input
}], scrollListener: [{
type: HostListener,
args: ['window:scroll']
}], onWindowBlur: [{
type: HostListener,
args: ['window:blur']
}] } });
const CUSTOM_ACCESSOR = {
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => TagInputComponent),
multi: true
};
class TagInputComponent extends TagInputAccessor {
constructor(renderer, dragProvider) {
super();
this.renderer = renderer;
this.dragProvider = dragProvider;
/**
* @name separatorKeys
* @desc keyboard keys with which a user can separate items
*/
this.separatorKeys = defaults.tagInput.separatorKeys;
/**
* @name separatorKeyCodes
* @desc keyboard key codes with which a user can separate items
*/
this.separatorKeyCodes = defaults.tagInput.separatorKeyCodes;
/**
* @name placeholder
* @desc the placeholder of the input text
*/
this.placeholder = defaults.tagInput.placeholder;
/**
* @name secondaryPlaceholder
* @desc placeholder to appear when the input is empty
*/
this.secondaryPlaceholder = defaults.tagInput.secondaryPlaceholder;
/**
* @name maxItems
* @desc maximum number of items that can be added
*/
this.maxItems = defaults.tagInput.maxItems;
/**
* @name validators
* @desc array of Validators that are used to validate the tag before it gets appended to the list
*/
this.validators = defaults.tagInput.validators;
/**
* @name asyncValidators
* @desc array of AsyncValidator that are used to validate the tag before it gets appended to the list
*/
this.asyncValidators = defaults.tagInput.asyncValidators;
/**
* - if set to true, it will only possible to add items from the autocomplete
* @name onlyFromAutocomplete
*/
this.onlyFromAutocomplete = defaults.tagInput.onlyFromAutocomplete;
/**
* @name errorMessages
*/
this.errorMessages = defaults.tagInput.errorMessages;
/**
* @name theme
*/
this.theme = defaults.tagInput.theme;
/**
* @name onTextChangeDebounce
*/
this.onTextChangeDebounce = defaults.tagInput.onTextChangeDebounce;
/**
* - custom id assigned to the input
* @name id
*/
this.inputId = defaults.tagInput.inputId;
/**
* - custom class assigned to the input
*/
this.inputClass = defaults.tagInput.inputClass;
/**
* - option to clear text input when the form is blurred
* @name clearOnBlur
*/
this.clearOnBlur = defaults.tagInput.clearOnBlur;
/**
* - hideForm
* @name clearOnBlur
*/
this.hideForm = defaults.tagInput.hideForm;
/**
* @name addOnBlur
*/
this.addOnBlur = defaults.tagInput.addOnBlur;
/**
* @name addOnPaste
*/
this.addOnPaste = defaults.tagInput.addOnPaste;
/**
* - pattern used with the native method split() to separate patterns in the string pasted
* @name pasteSplitPattern
*/
this.pasteSplitPattern = defaults.tagInput.pasteSplitPattern;
/**
* @name blinkIfDupe
*/
this.blinkIfDupe = defaults.tagInput.blinkIfDupe;
/**
* @name removable
*/
this.removable = defaults.tagInput.removable;
/**
* @name editable
*/
this.editable = defaults.tagInput.editable;
/**
* @name allowDupes
*/
this.allowDupes = defaults.tagInput.allowDupes;
/**
* @description if set to true, the newly added tags will be added as strings, and not objects
* @name modelAsStrings
*/
this.modelAsStrings = defaults.tagInput.modelAsStrings;
/**
* @name trimTags
*/
this.trimTags = defaults.tagInput.trimTags;
/**
* @name ripple
*/
this.ripple = defaults.tagInput.ripple;
/**
* @name tabindex
* @desc pass through the specified tabindex to the input
*/
this.tabindex = defaults.tagInput.tabIndex;
/**
* @name disable
*/
this.disable = defaults.tagInput.disable;
/**
* @name dragZone
*/
this.dragZone = defaults.tagInput.dragZone;
/**
* @name onRemoving
*/
this.onRemoving = defaults.tagInput.onRemoving;
/**
* @name onAdding
*/
this.onAdding = defaults.tagInput.onAdding;
/**
* @name animationDuration
*/
this.animationDuration = defaults.tagInput.animationDuration;
/**
* @name onAdd
* @desc event emitted when adding a new item
*/
this.onAdd = new EventEmitter();
/**
* @name onRemove
* @desc event emitted when removing an existing item
*/
this.onRemove = new EventEmitter();
/**
* @name onSelect
* @desc event emitted when selecting an item
*/
this.onSelect = new EventEmitter();
/**
* @name onFocus
* @desc event emitted when the input is focused
*/
this.onFocus = new EventEmitter();
/**
* @name onFocus
* @desc event emitted when the input is blurred
*/
this.onBlur = new EventEmitter();
/**
* @name onTextChange
* @desc event emitted when the input value changes
*/
this.onTextChange = new EventEmitter();
/**
* - output triggered when text is pasted in the form
* @name onPaste
*/
this.onPaste = new EventEmitter();
/**
* - output triggered when tag entered is not valid
* @name onValidationError
*/
this.onValidationError = new EventEmitter();
/**
* - output triggered when tag is edited
* @name onTagEdited
*/
this.onTagEdited = new EventEmitter();
/**
* @name isLoading
*/
this.isLoading = false;
/**
* @name listeners
* @desc array of events that get fired using @fireEvents
*/
this.listeners = {
[KEYDOWN]: [],
[KEYUP]: []
};
/**
* @description emitter for the 2-way data binding inputText value
* @name inputTextChange
*/
this.inputTextChange = new EventEmitter();
/**
* @description private variable to bind get/set
* @name inputTextValue
*/
this.inputTextValue = '';
this.errors = [];
/**
* @name appendTag
* @param tag {TagModel}
*/
this.appendTag = (tag, index = this.items.length) => {
const items = this.items;
const model = this.modelAsStrings ? tag[this.identifyBy] : tag;
this.items = [
...items.slice(0, index),
model,
...items.slice(index, items.length)
];
};
/**
* @name createTag
* @param model
*/
this.createTag = (model) => {
const trim = (val, key) => {
return typeof val === 'string' ? val.trim() : val[key];
};
return Object.assign(Object.assign({}, typeof model !== 'string' ? model : {}), { [this.displayBy]: this.trimTags ? trim(model, this.displayBy) : model, [this.identifyBy]: this.trimTags ? trim(model, this.identifyBy) : model });
};
/**
*
* @param tag
* @param isFromAutocomplete
*/
this.isTagValid = (tag, fromAutocomplete = false) => {
const selectedItem = this.dropdown ? this.dropdown.selectedItem : undefined;
const value = this.getItemDisplay(tag).trim();
if (selectedItem && !fromAutocomplete || !value) {
return false;
}
const dupe = this.findDupe(tag, fromAutocomplete);
// if so, give a visual cue and return false
if (!this.allowDupes && dupe && this.blinkIfDupe) {
const model = this.tags.find(item => {
return this.getItemValue(item.model) === this.getItemValue(dupe);
});
if (model) {
model.blink();
}
}
const isFromAutocomplete = fromAutocomplete && this.onlyFromAutocomplete;
const assertions = [
// 1. there must be no dupe OR dupes are allowed
!dupe || this.allowDupes,
// 2. check max items has not been reached
!this.maxItemsReached,
// 3. check item comes from autocomplete or onlyFromAutocomplete is false
((isFromAutocomplete) || !this.onlyFromAutocomplete)
];
return assertions.filter(Boolean).length === assertions.length;
};
/**
* @name onPasteCallback
* @param data
*/
this.onPasteCallback = (data) => __awaiter(this, void 0, void 0, function* () {
const getText = () => {
const isIE = Boolean(window.clipboardData);
const clipboardData = isIE ? (window.clipboardData) : data.clipboardData;
const type = isIE ? 'Text' : 'text/plain';
return clipboardData === null ? '' : clipboardData.getData(type) || '';
};
const text = getText();
const requests = text
.split(this.pasteSplitPattern)
.map(item => {
const tag = this.createTag(item);
this.setInputValue(tag[this.displayBy]);
return this.onAddingRequested(false, tag);
});
const resetInput = () => setTimeout(() => this.setInputValue(''), 50);
Promise.all(requests).then(() => {
this.onPaste.emit(text);
resetInput();
})
.catch(resetInput);
});
}
/**
* @name inputText
*/
get inputText() {
return this.inputTextValue;
}
/**
* @name inputText
* @param text
*/
set inputText(text) {
this.inputTextValue = text;
this.inputTextChange.emit(text);
}
/**
* @desc removes the tab index if it is set - it will be passed through to the input
* @name tabindexAttr
*/
get tabindexAttr() {
return this.tabindex !== '' ? '-1' : '';
}
/**
* @name ngAfterViewInit
*/
ngAfterViewInit() {
// set up listeners
this.setUpKeypressListeners();
this.setupSeparatorKeysListener();
this.setUpInputKeydownListeners();
if (this.onTextChange.observers.length) {
this.setUpTextChangeSubscriber();
}
// if clear on blur is set to true, subscribe to the event and clear the text's form
if (this.clearOnBlur || this.addOnBlur) {
this.setUpOnBlurSubscriber();
}
// if addOnPaste is set to true, register the handler and add items
if (this.addOnPaste) {
this.setUpOnPasteListener();
}
const statusChanges$ = this.inputForm.form.statusChanges;
statusChanges$.pipe(filter$1((status) => status !== 'PENDING')).subscribe(() => {
this.errors = this.inputForm.getErrorMessages(this.errorMessages);
});
this.isProgressBarVisible$ = statusChanges$.pipe(map((status) => {
return status === 'PENDING' || this.isLoading;
}));
// if hideForm is set to true, remove the input
if (this.hideForm) {
this.inputForm.destroy();
}
}
/**
* @name ngOnInit
*/
ngOnInit() {
// if the number of items specified in the model is > of the value of maxItems
// degrade gracefully and let the max number of items to be the number of items in the model
// though, warn the user.
const hasReachedMaxItems = this.maxItems !== undefined &&
this.items &&
this.items.length > this.maxItems;
if (hasReachedMaxItems) {
this.maxItems = this.items.length;
console.warn(MAX_ITEMS_WARNING);
}
// Setting editable to false to fix problem with tags in IE still being editable when
// onlyFromAutocomplete is true
this.editable = this.onlyFromAutocomplete ? false : this.editable;
this.setAnimationMetadata();
}
/**
* @name onRemoveRequested
* @param tag
* @param index
*/
onRemoveRequested(tag, index) {
return new Promise(resolve => {
const subscribeFn = (model) => {
this.removeItem(model, index);
resolve(tag);
};
this.onRemoving ?
this.onRemoving(tag)
.pipe(first$1())
.subscribe(subscribeFn) : subscribeFn(tag);
});
}
/**
* @name onAddingRequested
* @param fromAutocomplete {boolean}
* @param tag {TagModel}
* @param index? {number}
* @param giveupFocus? {boolean}
*/
onAddingRequested(fromAutocomplete, tag, index, giveupFocus) {
return new Promise((resolve, reject) => {
const subscribeFn = (model) => {
return this
.addItem(fromAutocomplete, model, index, giveupFocus)
.then(resolve)
.catch(reject);
};
return this.onAdding ?
this.onAdding(tag)
.pipe(first$1())
.subscribe(subscribeFn, reject) : subscribeFn(tag);
});
}
/**
* @name selectItem
* @desc selects item passed as parameter as the selected tag
* @param item
* @param emit
*/
selectItem(item, emit = true) {
const isReadonly = item && typeof item !== 'string' && item.readonly;
if (isReadonly || this.selectedTag === item) {
return;
}
this.selectedTag = item;
if (emit) {
this.onSelect.emit(item);
}
}
/**
* @name fireEvents
* @desc goes through the list of the events for a given eventName, and fires each of them
* @param eventName
* @param $event
*/
fireEvents(eventName, $event) {
this.listeners[eventName].forEach(listener => listener.call(this, $event));
}
/**
* @name handleKeydown
* @desc handles action when the user hits a keyboard key
* @param data
*/
handleKeydown(data) {
const event = data.event;
const key = event.keyCode || event.which;
const shiftKey = event.shiftKey || false;
switch (KEY_PRESS_ACTIONS[key]) {
case ACTIONS_KEYS.DELETE:
if (this.selectedTag && this.removable) {
const index = this.items.indexOf(this.selectedTag);
this.onRemoveRequested(this.selectedTag, index);
}
break;
case ACTIONS_KEYS.SWITCH_PREV:
this.moveToTag(data.model, PREV);
break;
case ACTIONS_KEYS.SWITCH_NEXT:
this.moveToTag(data.model, NEXT);
break;
case ACTIONS_KEYS.TAB:
if (shiftKey) {
if (this.isFirstTag(data.model)) {
return;
}
this.moveToTag(data.model, PREV);
}
else {
if (this.isLastTag(data.model) && (this.disable || this.maxItemsReached)) {
return;
}
this.moveToTag(data.model, NEXT);
}
break;
default:
return;
}
// prevent default behaviour
event.preventDefault();
}
onFormSubmit() {
return __awaiter(this, void 0, void 0, function* () {
try {
yield this.onAddingRequested(false, this.formValue);
}
catch (_a) {
return;
}
});
}
/**
* @name setInputValue
* @param value
*/
setInputValue(value, emitEvent = true) {
const control = this.getControl();
// update form value with the transformed item
control.setValue(value, { emitEvent });
}
/**
* @name getControl
*/
getControl() {
return this.inputForm.value;
}
/**
* @name focus
* @param applyFocus
* @param displayAutocomplete
*/
focus(applyFocus = false, displayAutocomplete = false) {
if (this.dragProvider.getState('dragging')) {
return;
}
this.selectItem(undefined, false);
if (applyFocus) {
this.inputForm.focus();
this.onFocus.emit(this.formValue);
}
}
/**
* @name blur
*/
blur() {
this.onTouched();
this.onBlur.emit(this.formValue);
}
/**
* @name hasErrors
*/
hasErrors() {
return !!this.inputForm && this.inputForm.hasErrors();
}
/**
* @name isInputFocused
*/
isInputFocused() {
return !!this.inputForm && this.inputForm.isInputFocused();
}
/**
* - this is the one way I found to tell if the template has been passed and it is not
* the template for the menu item
* @name hasCustomTemplate
*/
hasCustomTemplate() {
const template = this.templates ? this.templates.first : undefined;
const menuTemplate = this.dropdown && this.dropdown.templates ?
this.dropdown.templates.first : undefined;
return Boolean(template && template !== menuTemplate);
}
/**
* @name maxItemsReached
*/
get maxItemsReached() {
return this.maxItems !== undefined &&
this.items.length >= this.maxItems;
}
/**
* @name formValue
*/
get formValue() {
const form = this.inputForm.value;
return form ? form.value : '';
}
/**3
* @name onDragStarted
* @param event
* @param index
*/
onDragStarted(event, tag, index) {
event.stopPropagation();
const item = { zone: this.dragZone, tag, index };
this.dragProvider.setSender(this);
this.dragProvider.setDraggedItem(event, item);
this.dragProvider.setState({ dragging: true, index });
}
/**
* @name onDragOver
* @param event
*/
onDragOver(event, index) {
this.dragProvider.setState({ dropping: true });
this.dragProvider.setReceiver(this);
event.preventDefault();
}
/**
* @name onTagDropped
* @param event
* @param index
*/
onTagDropped(event, index) {
const item = this.dragProvider.getDraggedItem(event);
if (!item || item.zone !== this.dragZone) {
return;
}
this.dragProvider.onTagDropped(item.tag, item.index, index);
event.preventDefault();
event.stopPropagation();
}
/**
* @name isDropping
*/
isDropping() {
const isReceiver = this.dragProvider.receiver === this;
const isDropping = this.dragProvider.getState('dropping');
return Boolean(isReceiver && isDropping);
}
/**
* @name onTagBlurred
* @param changedElement {TagModel}
* @param index {number}
*/
onTagBlurred(changedElement, index) {
this.items[index] = changedElement;
this.blur();
}
/**
* @name trackBy
* @param items
*/
trackBy(index, item) {
return item[this.identifyBy];
}
/**
* @name updateEditedTag
* @param tag
*/
updateEditedTag(tag) {
this.onTagEdited.emit(tag);
}
/**
* @name moveToTag
* @param item
* @param direction
*/
moveToTag(item, direction) {
const isLast = this.isLastTag(item);
const isFirst = this.isFirstTag(item);
const stopSwitch = (direction === NEXT && isLast) ||
(direction === PREV && isFirst);
if (stopSwitch) {
this.focus(true);
return;
}
const offset = direction === NEXT ? 1 : -1;
const index = this.getTagIndex(item) + offset;
const tag = this.getTagAtIndex(index);
return tag.select.call(tag);
}
/**
* @name isFirstTag
* @param item {TagModel}
*/
isFirstTag(item) {
return this.tags.first.model === item;
}
/**
* @name isLastTag
* @param item {TagModel}
*/
isLastTag(item) {
return this.tags.last.model === item;
}
/**
* @name getTagIndex
* @param item
*/
getTagIndex(item) {
const tags = this.tags.toArray();
return tags.findIndex(tag => tag.model === item);
}
/**
* @name getTagAtIndex
* @param index
*/
getTagAtIndex(index) {
const tags = this.tags.toArray();
return tags[index];
}
/**
* @name removeItem
* @desc removes an item from the array of the model
* @param tag {TagModel}
* @param index {number}
*/
removeItem(tag, index) {
this.items = this.getItemsWithout(index);
// if the removed tag was selected, set it as undefined
if (this.selectedTag === tag) {
this.selectItem(undefined, false);
}
// focus input
this.focus(true, false);
// emit remove event
this.onRemove.emit(tag);
}
/**
* @name addItem
* @desc adds the current text model to the items array
* @param fromAutocomplete {boolean}
* @param item {TagModel}
* @param index? {number}
* @param giveupFocus? {boolean}
*/
addItem(fromAutocomplete = false, item, index, giveupFocus) {
const display = this.getItemDisplay(item);
const tag = this.createTag(item);
if (fromAutocomplete) {
this.setInputValue(this.getItemValue(item, true));
}
return new Promise((resolve, reject) => {
/**
* @name reset
*/
const reset = () => {
// reset control and focus input
this.setInputValue('');
if (giveupFocus) {
this.focus(false, false);
}
else {
// focus input
this.focus(true, false);
}
resolve(display);
};
const appendItem = () => {
this.appendTag(tag, index);
// emit event
this.onAdd.emit(tag);
if (!this.dropdown) {
return;
}
this.dropdown.hide();
if (this.dropdown.showDropdownIfEmpty) {
this.dropdown.show();
}
};
const status = this.inputForm.form.status;
const isTagValid = this.isTagValid(tag, fromAutocomplete);
const onValidationError = () => {
this.onValidationError.emit(tag);
return reject();
};
if (status === 'VALID' && isTagValid) {
appendItem();
return reset();
}
if (status === 'INVALID' || !isTagValid) {
reset();
return onValidationError();
}
if (status === 'PENDING') {
const statusUpdate$ = this.inputForm.form.statusChanges;
return statusUpdate$
.pipe(filter$1(statusUpdate => statusUpdate !== 'PENDING'), first$1())
.subscribe((statusUpdate) => {
if (statusUpdate === 'VALID' && isTagValid) {
appendItem();
return reset();
}
else {
reset();
return onValidationError();
}
});
}
});
}
/**
* @name setupSeparatorKeysListener
*/
setupSeparatorKeysListener() {
const useSeparatorKeys = this.separatorKeyCodes.length > 0 || this.separatorKeys.length > 0;
const listener = ($event) => {
const hasKeyCode = this.separatorKeyCodes.indexOf($event.keyCode) >= 0;
const hasKey = this.separatorKeys.indexOf($event.key) >= 0;
// the keyCode of keydown event is 229 when IME is processing the key event.
const isIMEProcessing = $event.keyCode === 229;
if (hasKeyCode || (hasKey && !isIMEProcessing)) {
$event.preventDefault();
this.onAddingRequested(false, this.formValue)
.catch(() => { });
}
};
listen.call(this, KEYDOWN, listener, useSeparatorKeys);
}
/**
* @name setUpKeypressListeners
*/
setUpKeypressListeners() {
const listener = ($event) => {
const isCorrectKey = $event.keyCode === 37 || $event.keyCode === 8;
if (isCorrectKey &&
!this.formValue &&
this.items.length) {
this.tags.last.select.call(this.tags.last);
}
};
// setting up the keypress listeners
listen.call(this, KEYDOWN, listener);
}
/**
* @name setUpKeydownListeners
*/
setUpInputKeydownListeners() {
this.inputForm.onKeydown.subscribe(event => {
if (event.key === 'Backspace' && this.formValue.trim() === '') {
event.preventDefault();
}
});
}
/**
* @name setUpOnPasteListener
*/
setUpOnPasteListener() {
const input = this.inputForm.input.nativeElement;
// attach listener to input
this.renderer.listen(input, 'paste', (event) => {
this.onPasteCallback(event);
event.preventDefault();
return true;
});
}
/**
* @name setUpTextChangeSubscriber
*/
setUpTextChangeSubscriber() {
this.inputForm.form
.valueChanges
.pipe(debounceTime$1(this.onTextChangeDebounce))
.subscribe((value) => {
this.onTextChange.emit(value.item);
});
}
/**
* @name setUpOnBlurSubscriber
*/
setUpOnBlurSubscriber() {
const filterFn = () => {
const isVisible = this.dropdown && this.dropdown.isVisible;
return !isVisible && !!this.formValue;
};
this.inputForm
.onBlur
.pipe(debounceTime$1(100), filter$1(filterFn))
.subscribe(() => {
const reset = () => this.setInputValue('');
if (this.addOnBlur) {
return this
.onAddingRequested(false, this.formValue, undefined, true)
.then(reset)
.catch(reset);
}
reset();
});
}
/**
* @name findDupe
* @param tag
* @param isFromAutocomplete
*/
findDupe(tag, isFromAutocomplete) {
const identifyBy = isFromAutocomplete ? this.dropdown.identifyBy : this.identifyBy;
const id = tag[identifyBy];
return this.items.find(item => this.getItemValue(item) === id);
}
/**
* @name setAnimationMetadata
*/
setAnimationMetadata() {
this.animationMetadata = {
value: 'in',
params: Object.assign({}, this.animationDuration)
};
}
}
TagInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: TagInputComponent, deps: [{ token: i0.Renderer2 }, { token: DragProvider }], target: i0.ɵɵFactoryTarget.Component });
TagInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: TagInputComponent, selector: "tag-input", inputs: { separatorKeys: "separatorKeys", separatorKeyCodes: "separatorKeyCodes", placeholder: "placeholder", secondaryPlaceholder: "secondaryPlaceholder", maxItems: "maxItems", validators: "validators", asyncValidators: "asyncValidators", onlyFromAutocomplete: "onlyFromAutocomplete", errorMessages: "errorMessages", theme: "theme", onTextChangeDebounce: "onTextChangeDebounce", inputId: "inputId", inputClass: "inputClass", clearOnBlur: "clearOnBlur", hideForm: "hideForm", addOnBlur: "addOnBlur", addOnPaste: "addOnPaste", pasteSplitPattern: "pasteSplitPattern", blinkIfDupe: "blinkIfDupe", removable: "removable", editable: "editable", allowDupes: "allowDupes", modelAsStrings: "modelAsStrings", trimTags: "trimTags", inputText: "inputText", ripple: "ripple", tabindex: "tabindex", disable: "disable", dragZone: "dragZone", onRemoving: "onRemoving", onAdding: "onAdding", animationDuration: "animationDuration" }, outputs: { onAdd: "onAdd", onRemove: "onRemove", onSelect: "onSelect", onFocus: "onFocus", onBlur: "onBlur", onTextChange: "onTextChange", onPaste: "onPaste", onValidationError: "onValidationError", onTagEdited: "onTagEdited", inputTextChange: "inputTextChange" }, host: { properties: { "attr.tabindex": "this.tabindexAttr" } }, providers: [CUSTOM_ACCESSOR], queries: [{ propertyName: "dropdown", first: true, predicate: TagInputDropdown, descendants: true }, { propertyName: "templates", predicate: TemplateRef }], viewQueries: [{ propertyName: "inputForm", first: true, predicate: TagInputForm, descendants: true }, { propertyName: "tags", predicate: TagComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "<div\n [ngClass]=\"theme\"\n class=\"ng2-tag-input\"\n (click)=\"focus(true, false)\"\n [attr.tabindex]=\"-1\"\n (drop)=\"dragZone ? onTagDropped($event, undefined) : undefined\"\n (dragenter)=\"dragZone ? onDragOver($event) : undefined\"\n (dragover)=\"dragZone ? onDragOver($event) : undefined\"\n (dragend)=\"dragZone ? dragProvider.onDragEnd() : undefined\"\n [class.ng2-tag-input--dropping]=\"isDropping()\"\n [class.ng2-tag-input--disabled]=\"disable\"\n [class.ng2-tag-input--loading]=\"isLoading\"\n [class.ng2-tag-input--invalid]=\"hasErrors()\"\n [class.ng2-tag-input--focused]=\"isInputFocused()\"\n>\n\n <!-- TAGS -->\n <div class=\"ng2-tags-container\">\n <tag\n *ngFor=\"let item of items; let i = index; trackBy: trackBy\"\n (onSelect)=\"selectItem(item)\"\n (onRemove)=\"onRemoveRequested(item, i)\"\n (onKeyDown)=\"handleKeydown($event)\"\n (onTagEdited)=\"updateEditedTag($event)\"\n (onBlur)=\"onTagBlurred($event, i)\"\n draggable=\"{{ editable }}\"\n (dragstart)=\"dragZone ? onDragStarted($event, item, i) : undefined\"\n (drop)=\"dragZone ? onTagDropped($event, i) : undefined\"\n (dragenter)=\"dragZone ? onDragOver($event) : undefined\"\n (dragover)=\"dragZone ? onDragOver($event, i) : undefined\"\n (dragleave)=\"dragZone ? dragProvider.onDragEnd() : undefined\"\n [canAddTag]=\"isTagValid\"\n [attr.tabindex]=\"0\"\n [disabled]=\"disable\"\n [@animation]=\"animationMetadata\"\n [hasRipple]=\"ripple\"\n [index]=\"i\"\n [removable]=\"removable\"\n [editable]=\"editable\"\n [displayBy]=\"displayBy\"\n [identifyBy]=\"identifyBy\"\n [template]=\"!!hasCustomTemplate() ? templates.first : undefined\"\n [draggable]=\"dragZone\"\n [model]=\"item\"\n >\n </tag>\n\n <tag-input-form\n (onSubmit)=\"onFormSubmit()\"\n (onBlur)=\"blur()\"\n (click)=\"dropdown ? dropdown.show() : undefined\"\n (onKeydown)=\"fireEvents('keydown', $event)\"\n (onKeyup)=\"fireEvents('keyup', $event)\"\n [inputText]=\"inputText\"\n [disabled]=\"disable\"\n [validators]=\"validators\"\n [asyncValidators]=\"asyncValidators\"\n [hidden]=\"maxItemsReached\"\n [placeholder]=\"items.length ? placeholder : secondaryPlaceholder\"\n [inputClass]=\"inputClass\"\n [inputId]=\"inputId\"\n [tabindex]=\"tabindex\"\n >\n </tag-input-form>\n </div>\n\n <div\n class=\"progress-bar\"\n *ngIf=\"isProgressBarVisible$ | async\"\n ></div>\n</div>\n\n<!-- ERRORS -->\n<div\n *ngIf=\"hasErrors()\"\n [ngClass]=\"theme\"\n class=\"error-messages\"\n>\n <p\n *ngFor=\"let error of errors\"\n class=\"error-message\"\n >\n <span>{{ error }}</span>\n </p>\n</div>\n<ng-content></ng-content>\n", styles: [".dark tag:focus{box-shadow:0 0 0 1px #323232}.ng2-tag-input.bootstrap3-info{background-color:#fff;display:inline-block;color:#555;vertical-align:middle;max-width:100%;height:42px;line-height:44px}.ng2-tag-input.bootstrap3-info input{border:none;box-shadow:none;outline:none;background-color:transparent;padding:0 6px;margin:0;width:auto;max-width:inherit}.ng2-tag-input.bootstrap3-info .form-control input::-moz-placeholder{color:#777;opacity:1}.ng2-tag-input.bootstrap3-info .form-control input:-ms-input-placeholder{color:#777}.ng2-tag-input.bootstrap3-info .form-control input::-webkit-input-placeholder{color:#777}.ng2-tag-input.bootstrap3-info input:focus{border:none;box-shadow:none}.bootstrap3-info.ng2-tag-input.ng2-tag-input--focused{box-shadow:inset 0 1px 1px #0006;border:1px solid #ccc}.bootstrap3-info.ng2-tag-input.ng2-tag-input--invalid{box-shadow:inset 0 1px 1px #d9534f}.ng2-tag-input{display:block;flex-direction:row;flex-wrap:wrap;position:relative;transition:all .25s;padding:.25rem 0;min-height:32px;cursor:text;border-bottom:2px solid #efefef}.ng2-tag-input:focus{outline:0}.ng2-tag-input.ng2-tag-input--dropping{opacity:.7}.ng2-tag-input.ng2-tag-input--focused{border-bottom:2px solid #2196F3}.ng2-tag-input.ng2-tag-input--invalid{border-bottom:2px solid #f44336}.ng2-tag-input.ng2-tag-input--loading{border:none}.ng2-tag-input.ng2-tag-input--disabled{opacity:.5;cursor:not-allowed}.ng2-tag-input form{margin:.1em 0}.ng2-tag-input .ng2-tags-container{flex-wrap:wrap;display:flex}.minimal.ng2-tag-input{display:block;flex-direction:row;flex-wrap:wrap;position:relative;cursor:text;border-bottom:1px solid transparent}.minimal.ng2-tag-input:focus{outline:0}.minimal.ng2-tag-input.ng2-tag-input--dropping{opacity:.7}.minimal.ng2-tag-input.ng2-tag-input--loading{border:none}.minimal.ng2-tag-input.ng2-tag-input--disabled{opacity:.5;cursor:not-allowed}.minimal.ng2-tag-input .ng2-tags-container{flex-wrap:wrap;display:flex}.dark.ng2-tag-input{display:block;flex-direction:row;flex-wrap:wrap;position:relative;cursor:text;border-bottom:2px solid #444}.dark.ng2-tag-input:focus{outline:0}.dark.ng2-tag-input.ng2-tag-input--dropping{opacity:.7}.dark.ng2-tag-input.ng2-tag-input--loading{border:none}.dark.ng2-tag-input.ng2-tag-input--disabled{opacity:.5;cursor:not-allowed}.dark.ng2-tag-input .ng2-tags-container{flex-wrap:wrap;display:flex}.bootstrap.ng2-tag-input{display:block;flex-direction:row;flex-wrap:wrap;position:relative;cursor:text;border-bottom:2px solid #efefef}.bootstrap.ng2-tag-input:focus{outline:0}.bootstrap.ng2-tag-input.ng2-tag-input--dropping{opacity:.7}.bootstrap.ng2-tag-input.ng2-tag-input--focused{border-bottom:2px solid #0275d8}.bootstrap.ng2-tag-input.ng2-tag-input--invalid{border-bottom:2px solid #d9534f}.bootstrap.ng2-tag-input.ng2-tag-input--loading{border:none}.bootstrap.ng2-tag-input.ng2-tag-input--disabled{opacity:.5;cursor:not-allowed}.bootstrap.ng2-tag-input .ng2-tags-container{flex-wrap:wrap;display:flex}.bootstrap3-info.ng2-tag-input{display:block;flex-direction:row;flex-wrap:wrap;position:relative;padding:4px;cursor:text;box-shadow:inset 0 1px 1px #00000013;border-radius:4px}.bootstrap3-info.ng2-tag-input:focus{outline:0}.bootstrap3-info.ng2-tag-input.ng2-tag-input--dropping{opacity:.7}.bootstrap3-info.ng2-tag-input.ng2-tag-input--invalid{border-bottom:1px solid #d9534f}.bootstrap3-info.ng2-tag-input.ng2-tag-input--loading{border:none}.bootstrap3-info.ng2-tag-input.ng2-tag-input--disabled{opacity:.5;cursor:not-allowed}.bootstrap3-info.ng2-tag-input form{margin:.1em 0}.bootstrap3-info.ng2-tag-input .ng2-tags-container{flex-wrap:wrap;display:flex}.error-message{font-size:.8em;color:#f44336;margin:.5em 0 0}.bootstrap .error-message{color:#d9534f}.progress-bar,.progress-bar:before{height:2px;width:100%;margin:0}.progress-bar{background-color:#2196f3;display:flex;position:absolute;bottom:0}.progress-bar:before{background-color:#82c4f8;content:\"\";-webkit-animation:running-progress 2s cubic-bezier(.4,0,.2,1) infinite;animation:running-progress 2s cubic-bezier(.4,0,.2,1) infinite}@-webkit-keyframes running-progress{0%{margin-left:0;margin-right:100%}50%{margin-left:25%;margin-right:0}to{margin-left:100%;margin-right:0}}@keyframes running-progress{0%{margin-left:0;margin-right:100%}50%{margin-left:25%;margin-right:0}to{margin-left:100%;margin-right:0}}tag{display:flex;flex-direction:row;flex-wrap:wrap;font-family:Roboto,Helvetica Neue,sans-serif;font-weight:400;font-size:1em;letter-spacing:.05rem;color:#444;border-radius:16px;transition:all .3s;margin:.1rem .3rem .1rem 0;padding:.08rem .45rem;height:32px;line-height:34px;background:#efefef;-webkit-user-select:none;-moz-user-select:none;user-select:none;overflow:hidden;outline:0;cursor:pointer;position:relative}tag:not(.readonly):not(.tag--editing):focus{background:#2196F3;color:#fff;box-shadow:0 2px 3px 1px #d4d1d1}tag:not(.readonly):not(.tag--editing):active{background:#0d8aee;color:#fff;box-shadow:0 2px 3px 1px #d4d1d1}tag:not(:focus):not(.tag--editing):not(:active):not(.readonly):hover{background:#e2e2e2;color:#000;color:initial;box-shadow:0 2px 3px 1px #d4d1d1}tag.readonly{cursor:default}tag.readonly:focus,tag:focus{outline:0}tag.tag--editing{background-color:#fff;border:1px solid #ccc;cursor:text}.minimal tag{display:flex;flex-direction:row;flex-wrap:wrap;border-radius:0;background:#f9f9f9;-webkit-user-select:none;-moz-user-select:none;user-select:none;overflow:hidden;outline:0;cursor:pointer;position:relative}.minimal tag:not(.readonly):not(.tag--editing):focus{background:#d0d0d0;color:#000;color:initial}.minimal tag:not(.readonly):not(.tag--editing):active{background:#d0d0d0;color:#000;color:initial}.minimal tag:not(:focus):not(.tag--editing):not(:active):not(.readonly):hover{background:#ececec}.minimal tag.readonly{cursor:default}.minimal tag.readonly:focus,.minimal tag:focus{outline:0}.minimal tag.tag--editing{cursor:text}.dark tag{display:flex;flex-direction:row;flex-wrap:wrap;color:#f9f9f9;border-radius:3px;background:#444;-webkit-user-select:none;-moz-user-select:none;user-select:none;overflow:hidden;outline:0;cursor:pointer;position:relative}.dark tag:not(.readonly):not(.tag--editing):focus{background:#efefef;color:#444}.dark tag:not(:focus):not(.tag--editing):not(:active):not(.readonly):hover{background:#2b2b2b;color:#f9f9f9}.dark tag.readonly{cursor:default}.dark tag.readonly:focus,.dark tag:focus{outline:0}.dark tag.tag--editing{cursor:text}.bootstrap tag{display:flex;flex-direction:row;flex-wrap:wrap;color:#f9f9f9;border-radius:.25rem;background:#0275d8;-webkit-user-select:none;-moz-user-select:none;user-select:none;overflow:hidden;outline:0;cursor:pointer;position:relative}.bootstrap tag:not(.readonly):not(.tag--editing):focus{background:#025aa5}.bootstrap tag:not(.readonly):not(.tag--editing):active{background:#025aa5}.bootstrap tag:not(:focus):not(.tag--editing):not(:active):not(.readonly):hover{background:#0267bf;color:#f9f9f9}.bootstrap tag.readonly{cursor:default}.bootstrap tag.readonly:focus,.bootstrap tag:focus{outline:0}.bootstrap tag.tag--editing{cursor:text}.bootstrap3-info tag{display:flex;flex-direction:row;flex-wrap:wrap;font-family:inherit;font-weight:400;font-size:95%;color:#fff;border-radius:.25em;background:#5bc0de;-webkit-user-select:none;-moz-user-select:none;user-select:none;overflow:hidden;outline:0;cursor:pointer;position:relative;padding:.25em .6em;text-align:center;white-space:nowrap}.bootstrap3-info tag:not(.readonly):not(.tag--editing):focus{background:#28a1c5}.bootstrap3-info tag:not(.readonly):not(.tag--editing):active{background:#28a1c5}.bootstrap3-info tag:not(:focus):not(.tag--editing):not(:active):not(.readonly):hover{background:#46b8da;color:#fff}.bootstrap3-info tag.readonly{cursor:default}.bootstrap3-info tag.readonly:focus,.bootstrap3-info tag:focus{outline:0}.bootstrap3-info tag.tag--editing{cursor:text}:host{display:block}\n"], components: [{ type: TagComponent, selector: "tag", inputs: ["model", "removable", "editable", "template", "displayBy", "identifyBy", "index", "hasRipple", "disabled", "canAddTag"], outputs: ["onSelect", "onRemove", "onBlur", "onKeyDown", "onTagEdited"] }, { type: TagInputForm, selector: "tag-input-form", inputs: ["placeholder", "validators", "asyncValidators", "inputId", "inputClass", "tabindex", "disabled", "inputText"], outputs: ["onSubmit", "onBlur", "onFocus", "onKeyup", "onKeydown", "inputTextChange"] }], directives: [{ type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "async": i2.AsyncPipe }, animations: animations });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: TagInputComponent, decorators: [{
type: Component,
args: [{ selector: 'tag-input', providers: [CUSTOM_ACCESSOR], animations: animations, template: "<div\n [ngClass]=\"theme\"\n class=\"ng2-tag-input\"\n (click)=\"focus(true, false)\"\n [attr.tabindex]=\"-1\"\n (drop)=\"dragZone ? onTagDropped($event, undefined) : undefined\"\n (dragenter)=\"dragZone ? onDragOver($event) : undefined\"\n (dragover)=\"dragZone ? onDragOver($event) : undefined\"\n (dragend)=\"dragZone ? dragProvider.onDragEnd() : undefined\"\n [class.ng2-tag-input--dropping]=\"isDropping()\"\n [class.ng2-tag-input--disabled]=\"disable\"\n [class.ng2-tag-input--loading]=\"isLoading\"\n [class.ng2-tag-input--invalid]=\"hasErrors()\"\n [class.ng2-tag-input--focused]=\"isInputFocused()\"\n>\n\n <!-- TAGS -->\n <div class=\"ng2-tags-container\">\n <tag\n *ngFor=\"let item of items; let i = index; trackBy: trackBy\"\n (onSelect)=\"selectItem(item)\"\n (onRemove)=\"onRemoveRequested(item, i)\"\n (onKeyDown)=\"handleKeydown($event)\"\n (onTagEdited)=\"updateEditedTag($event)\"\n (onBlur)=\"onTagBlurred($event, i)\"\n draggable=\"{{ editable }}\"\n (dragstart)=\"dragZone ? onDragStarted($event, item, i) : undefined\"\n (drop)=\"dragZone ? onTagDropped($event, i) : undefined\"\n (dragenter)=\"dragZone ? onDragOver($event) : undefined\"\n (dragover)=\"dragZone ? onDragOver($event, i) : undefined\"\n (dragleave)=\"dragZone ? dragProvider.onDragEnd() : undefined\"\n [canAddTag]=\"isTagValid\"\n [attr.tabindex]=\"0\"\n [disabled]=\"disable\"\n [@animation]=\"animationMetadata\"\n [hasRipple]=\"ripple\"\n [index]=\"i\"\n [removable]=\"removable\"\n [editable]=\"editable\"\n [displayBy]=\"displayBy\"\n [identifyBy]=\"identifyBy\"\n [template]=\"!!hasCustomTemplate() ? templates.first : undefined\"\n [draggable]=\"dragZone\"\n [model]=\"item\"\n >\n </tag>\n\n <tag-input-form\n (onSubmit)=\"onFormSubmit()\"\n (onBlur)=\"blur()\"\n (click)=\"dropdown ? dropdown.show() : undefined\"\n (onKeydown)=\"fireEvents('keydown', $event)\"\n (onKeyup)=\"fireEvents('keyup', $event)\"\n [inputText]=\"inputText\"\n [disabled]=\"disable\"\n [validators]=\"validators\"\n [asyncValidators]=\"asyncValidators\"\n [hidden]=\"maxItemsReached\"\n [placeholder]=\"items.length ? placeholder : secondaryPlaceholder\"\n [inputClass]=\"inputClass\"\n [inputId]=\"inputId\"\n [tabindex]=\"tabindex\"\n >\n </tag-input-form>\n </div>\n\n <div\n class=\"progress-bar\"\n *ngIf=\"isProgressBarVisible$ | async\"\n ></div>\n</div>\n\n<!-- ERRORS -->\n<div\n *ngIf=\"hasErrors()\"\n [ngClass]=\"theme\"\n class=\"error-messages\"\n>\n <p\n *ngFor=\"let error of errors\"\n class=\"error-message\"\n >\n <span>{{ error }}</span>\n </p>\n</div>\n<ng-content></ng-content>\n", styles: [".dark tag:focus{box-shadow:0 0 0 1px #323232}.ng2-tag-input.bootstrap3-info{background-color:#fff;display:inline-block;color:#555;vertical-align:middle;max-width:100%;height:42px;line-height:44px}.ng2-tag-input.bootstrap3-info input{border:none;box-shadow:none;outline:none;background-color:transparent;padding:0 6px;margin:0;width:auto;max-width:inherit}.ng2-tag-input.bootstrap3-info .form-control input::-moz-placeholder{color:#777;opacity:1}.ng2-tag-input.bootstrap3-info .form-control input:-ms-input-placeholder{color:#777}.ng2-tag-input.bootstrap3-info .form-control input::-webkit-input-placeholder{color:#777}.ng2-tag-input.bootstrap3-info input:focus{border:none;box-shadow:none}.bootstrap3-info.ng2-tag-input.ng2-tag-input--focused{box-shadow:inset 0 1px 1px #0006;border:1px solid #ccc}.bootstrap3-info.ng2-tag-input.ng2-tag-input--invalid{box-shadow:inset 0 1px 1px #d9534f}.ng2-tag-input{display:block;flex-direction:row;flex-wrap:wrap;position:relative;transition:all .25s;padding:.25rem 0;min-height:32px;cursor:text;border-bottom:2px solid #efefef}.ng2-tag-input:focus{outline:0}.ng2-tag-input.ng2-tag-input--dropping{opacity:.7}.ng2-tag-input.ng2-tag-input--focused{border-bottom:2px solid #2196F3}.ng2-tag-input.ng2-tag-input--invalid{border-bottom:2px solid #f44336}.ng2-tag-input.ng2-tag-input--loading{border:none}.ng2-tag-input.ng2-tag-input--disabled{opacity:.5;cursor:not-allowed}.ng2-tag-input form{margin:.1em 0}.ng2-tag-input .ng2-tags-container{flex-wrap:wrap;display:flex}.minimal.ng2-tag-input{display:block;flex-direction:row;flex-wrap:wrap;position:relative;cursor:text;border-bottom:1px solid transparent}.minimal.ng2-tag-input:focus{outline:0}.minimal.ng2-tag-input.ng2-tag-input--dropping{opacity:.7}.minimal.ng2-tag-input.ng2-tag-input--loading{border:none}.minimal.ng2-tag-input.ng2-tag-input--disabled{opacity:.5;cursor:not-allowed}.minimal.ng2-tag-input .ng2-tags-container{flex-wrap:wrap;display:flex}.dark.ng2-tag-input{display:block;flex-direction:row;flex-wrap:wrap;position:relative;cursor:text;border-bottom:2px solid #444}.dark.ng2-tag-input:focus{outline:0}.dark.ng2-tag-input.ng2-tag-input--dropping{opacity:.7}.dark.ng2-tag-input.ng2-tag-input--loading{border:none}.dark.ng2-tag-input.ng2-tag-input--disabled{opacity:.5;cursor:not-allowed}.dark.ng2-tag-input .ng2-tags-container{flex-wrap:wrap;display:flex}.bootstrap.ng2-tag-input{display:block;flex-direction:row;flex-wrap:wrap;position:relative;cursor:text;border-bottom:2px solid #efefef}.bootstrap.ng2-tag-input:focus{outline:0}.bootstrap.ng2-tag-input.ng2-tag-input--dropping{opacity:.7}.bootstrap.ng2-tag-input.ng2-tag-input--focused{border-bottom:2px solid #0275d8}.bootstrap.ng2-tag-input.ng2-tag-input--invalid{border-bottom:2px solid #d9534f}.bootstrap.ng2-tag-input.ng2-tag-input--loading{border:none}.bootstrap.ng2-tag-input.ng2-tag-input--disabled{opacity:.5;cursor:not-allowed}.bootstrap.ng2-tag-input .ng2-tags-container{flex-wrap:wrap;display:flex}.bootstrap3-info.ng2-tag-input{display:block;flex-direction:row;flex-wrap:wrap;position:relative;padding:4px;cursor:text;box-shadow:inset 0 1px 1px #00000013;border-radius:4px}.bootstrap3-info.ng2-tag-input:focus{outline:0}.bootstrap3-info.ng2-tag-input.ng2-tag-input--dropping{opacity:.7}.bootstrap3-info.ng2-tag-input.ng2-tag-input--invalid{border-bottom:1px solid #d9534f}.bootstrap3-info.ng2-tag-input.ng2-tag-input--loading{border:none}.bootstrap3-info.ng2-tag-input.ng2-tag-input--disabled{opacity:.5;cursor:not-allowed}.bootstrap3-info.ng2-tag-input form{margin:.1em 0}.bootstrap3-info.ng2-tag-input .ng2-tags-container{flex-wrap:wrap;display:flex}.error-message{font-size:.8em;color:#f44336;margin:.5em 0 0}.bootstrap .error-message{color:#d9534f}.progress-bar,.progress-bar:before{height:2px;width:100%;margin:0}.progress-bar{background-color:#2196f3;display:flex;position:absolute;bottom:0}.progress-bar:before{background-color:#82c4f8;content:\"\";-webkit-animation:running-progress 2s cubic-bezier(.4,0,.2,1) infinite;animation:running-progress 2s cubic-bezier(.4,0,.2,1) infinite}@-webkit-keyframes running-progress{0%{margin-left:0;margin-right:100%}50%{margin-left:25%;margin-right:0}to{margin-left:100%;margin-right:0}}@keyframes running-progress{0%{margin-left:0;margin-right:100%}50%{margin-left:25%;margin-right:0}to{margin-left:100%;margin-right:0}}tag{display:flex;flex-direction:row;flex-wrap:wrap;font-family:Roboto,Helvetica Neue,sans-serif;font-weight:400;font-size:1em;letter-spacing:.05rem;color:#444;border-radius:16px;transition:all .3s;margin:.1rem .3rem .1rem 0;padding:.08rem .45rem;height:32px;line-height:34px;background:#efefef;-webkit-user-select:none;-moz-user-select:none;user-select:none;overflow:hidden;outline:0;cursor:pointer;position:relative}tag:not(.readonly):not(.tag--editing):focus{background:#2196F3;color:#fff;box-shadow:0 2px 3px 1px #d4d1d1}tag:not(.readonly):not(.tag--editing):active{background:#0d8aee;color:#fff;box-shadow:0 2px 3px 1px #d4d1d1}tag:not(:focus):not(.tag--editing):not(:active):not(.readonly):hover{background:#e2e2e2;color:#000;color:initial;box-shadow:0 2px 3px 1px #d4d1d1}tag.readonly{cursor:default}tag.readonly:focus,tag:focus{outline:0}tag.tag--editing{background-color:#fff;border:1px solid #ccc;cursor:text}.minimal tag{display:flex;flex-direction:row;flex-wrap:wrap;border-radius:0;background:#f9f9f9;-webkit-user-select:none;-moz-user-select:none;user-select:none;overflow:hidden;outline:0;cursor:pointer;position:relative}.minimal tag:not(.readonly):not(.tag--editing):focus{background:#d0d0d0;color:#000;color:initial}.minimal tag:not(.readonly):not(.tag--editing):active{background:#d0d0d0;color:#000;color:initial}.minimal tag:not(:focus):not(.tag--editing):not(:active):not(.readonly):hover{background:#ececec}.minimal tag.readonly{cursor:default}.minimal tag.readonly:focus,.minimal tag:focus{outline:0}.minimal tag.tag--editing{cursor:text}.dark tag{display:flex;flex-direction:row;flex-wrap:wrap;color:#f9f9f9;border-radius:3px;background:#444;-webkit-user-select:none;-moz-user-select:none;user-select:none;overflow:hidden;outline:0;cursor:pointer;position:relative}.dark tag:not(.readonly):not(.tag--editing):focus{background:#efefef;color:#444}.dark tag:not(:focus):not(.tag--editing):not(:active):not(.readonly):hover{background:#2b2b2b;color:#f9f9f9}.dark tag.readonly{cursor:default}.dark tag.readonly:focus,.dark tag:focus{outline:0}.dark tag.tag--editing{cursor:text}.bootstrap tag{display:flex;flex-direction:row;flex-wrap:wrap;color:#f9f9f9;border-radius:.25rem;background:#0275d8;-webkit-user-select:none;-moz-user-select:none;user-select:none;overflow:hidden;outline:0;cursor:pointer;position:relative}.bootstrap tag:not(.readonly):not(.tag--editing):focus{background:#025aa5}.bootstrap tag:not(.readonly):not(.tag--editing):active{background:#025aa5}.bootstrap tag:not(:focus):not(.tag--editing):not(:active):not(.readonly):hover{background:#0267bf;color:#f9f9f9}.bootstrap tag.readonly{cursor:default}.bootstrap tag.readonly:focus,.bootstrap tag:focus{outline:0}.bootstrap tag.tag--editing{cursor:text}.bootstrap3-info tag{display:flex;flex-direction:row;flex-wrap:wrap;font-family:inherit;font-weight:400;font-size:95%;color:#fff;border-radius:.25em;background:#5bc0de;-webkit-user-select:none;-moz-user-select:none;user-select:none;overflow:hidden;outline:0;cursor:pointer;position:relative;padding:.25em .6em;text-align:center;white-space:nowrap}.bootstrap3-info tag:not(.readonly):not(.tag--editing):focus{background:#28a1c5}.bootstrap3-info tag:not(.readonly):not(.tag--editing):active{background:#28a1c5}.bootstrap3-info tag:not(:focus):not(.tag--editing):not(:active):not(.readonly):hover{background:#46b8da;color:#fff}.bootstrap3-info tag.readonly{cursor:default}.bootstrap3-info tag.readonly:focus,.bootstrap3-info tag:focus{outline:0}.bootstrap3-info tag.tag--editing{cursor:text}:host{display:block}\n"] }]
}], ctorParameters: function () { return [{ type: i0.Renderer2 }, { type: DragProvider }]; }, propDecorators: { separatorKeys: [{
type: Input
}], separatorKeyCodes: [{
type: Input
}], placeholder: [{
type: Input
}], secondaryPlaceholder: [{
type: Input
}], maxItems: [{
type: Input
}], validators: [{
type: Input
}], asyncValidators: [{
type: Input
}], onlyFromAutocomplete: [{
type: Input
}], errorMessages: [{
type: Input
}], theme: [{
type: Input
}], onTextChangeDebounce: [{
type: Input
}], inputId: [{
type: Input
}], inputClass: [{
type: Input
}], clearOnBlur: [{
type: Input
}], hideForm: [{
type: Input
}], addOnBlur: [{
type: Input
}], addOnPaste: [{
type: Input
}], pasteSplitPattern: [{
type: Input
}], blinkIfDupe: [{
type: Input
}], removable: [{
type: Input
}], editable: [{
type: Input
}], allowDupes: [{
type: Input
}], modelAsStrings: [{
type: Input
}], trimTags: [{
type: Input
}], inputText: [{
type: Input
}], ripple: [{
type: Input
}], tabindex: [{
type: Input
}], disable: [{
type: Input
}], dragZone: [{
type: Input
}], onRemoving: [{
type: Input
}], onAdding: [{
type: Input
}], animationDuration: [{
type: Input
}], onAdd: [{
type: Output
}], onRemove: [{
type: Output
}], onSelect: [{
type: Output
}], onFocus: [{
type: Output
}], onBlur: [{
type: Output
}], onTextChange: [{
type: Output
}], onPaste: [{
type: Output
}], onValidationError: [{
type: Output
}], onTagEdited: [{
type: Output
}], dropdown: [{
type: ContentChild,
args: [TagInputDropdown]
}], templates: [{
type: ContentChildren,
args: [TemplateRef, { descendants: false }]
}], inputForm: [{
type: ViewChild,
args: [TagInputForm]
}], tags: [{
type: ViewChildren,
args: [TagComponent]
}], inputTextChange: [{
type: Output
}], tabindexAttr: [{
type: HostBinding,
args: ['attr.tabindex']
}] } });
const optionsProvider = new OptionsProvider();
class TagInputModule {
/**
* @name withDefaults
* @param options {Options}
*/
static withDefaults(options) {
optionsProvider.setOptions(options);
}
}
TagInputModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: TagInputModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
TagInputModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: TagInputModule, declarations: [TagInputComponent,
DeleteIconComponent,
TagInputForm,
TagComponent,
HighlightPipe,
TagInputDropdown,
TagRipple], imports: [CommonModule,
ReactiveFormsModule,
FormsModule,
Ng2DropdownModule], exports: [TagInputComponent,
DeleteIconComponent,
TagInputForm,
TagComponent,
HighlightPipe,
TagInputDropdown,
TagRipple] });
TagInputModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: TagInputModule, providers: [
DragProvider,
{ provide: COMPOSITION_BUFFER_MODE, useValue: false },
], imports: [[
CommonModule,
ReactiveFormsModule,
FormsModule,
Ng2DropdownModule
]] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: TagInputModule, decorators: [{
type: NgModule,
args: [{
imports: [
CommonModule,
ReactiveFormsModule,
FormsModule,
Ng2DropdownModule
],
declarations: [
TagInputComponent,
DeleteIconComponent,
TagInputForm,
TagComponent,
HighlightPipe,
TagInputDropdown,
TagRipple
],
exports: [
TagInputComponent,
DeleteIconComponent,
TagInputForm,
TagComponent,
HighlightPipe,
TagInputDropdown,
TagRipple
],
providers: [
DragProvider,
{ provide: COMPOSITION_BUFFER_MODE, useValue: false },
]
}]
}] });
/**
* Generated bundle index. Do not edit.
*/
export { DeleteIconComponent, HighlightPipe, TagComponent, TagInputComponent, TagInputDropdown, TagInputForm, TagInputModule, TagRipple };
//# sourceMappingURL=ngx-chips.mjs.map