@_mehrad/ngx-chips
Version:
Tag Input component for Angular
804 lines (793 loc) • 128 kB
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 i2 from '@angular/forms';
import { UntypedFormControl, UntypedFormGroup, NG_VALUE_ACCESSOR, ReactiveFormsModule, FormsModule, COMPOSITION_BUFFER_MODE } from '@angular/forms';
import * as i1 from '@angular/common';
import { CommonModule } from '@angular/common';
import * as i2$1 from 'ng2-material-dropdown';
import { Ng2Dropdown, Ng2DropdownModule } from 'ng2-material-dropdown';
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: "15.2.10", ngImport: i0, type: HighlightPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
HighlightPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: HighlightPipe, name: "highlight" });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", 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 {
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 = { ...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: "15.2.10", ngImport: i0, type: DragProvider, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
DragProvider.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DragProvider });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", 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 = { ...defaults.tagInput, ...options.tagInput };
OptionsProvider.defaults.dropdown = { ...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: "15.2.10", ngImport: i0, type: TagInputAccessor, deps: [], target: i0.ɵɵFactoryTarget.Directive });
TagInputAccessor.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: TagInputAccessor, inputs: { displayBy: "displayBy", identifyBy: "identifyBy" }, ngImport: i0 });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", 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 UntypedFormControl({ 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 UntypedFormGroup({
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: "15.2.10", ngImport: i0, type: TagInputForm, deps: [], target: i0.ɵɵFactoryTarget.Component });
TagInputForm.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", 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"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.MinLengthValidator, selector: "[minlength][formControlName],[minlength][formControl],[minlength][ngModel]", inputs: ["minlength"] }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", 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: "15.2.10", ngImport: i0, type: TagRipple, deps: [], target: i0.ɵɵFactoryTarget.Component });
TagRipple.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", 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: "15.2.10", ngImport: i0, type: TagRipple, decorators: [{
type: Component,
args: [{ selector: 'tag-ripple', 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' })
]))
])
])
], 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"] }]
}], propDecorators: { state: [{
type: Input
}] } });
class DeleteIconComponent {
}
DeleteIconComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DeleteIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
DeleteIconComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", 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: "15.2.10", 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
: { ...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: "15.2.10", ngImport: i0, type: TagComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
TagComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", 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{animation:blink .3s normal forwards ease-in-out}@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"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: DeleteIconComponent, selector: "delete-icon" }, { kind: "component", type: TagRipple, selector: "tag-ripple", inputs: ["state"] }] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TagComponent, decorators: [{
type: Component,
args: [{ selector: 'tag', template: "<div (click)=\"select($event)\"\n