ngx-chips.fixed
Version:
Tag Input component for Angular
1,009 lines (999 loc) • 92.4 kB
JavaScript
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/forms'), require('rxjs/operators'), require('ng2-material-dropdown'), require('@angular/animations'), require('@angular/common')) :
typeof define === 'function' && define.amd ? define('ngx-chips.fixed', ['exports', '@angular/core', '@angular/forms', 'rxjs/operators', 'ng2-material-dropdown', '@angular/animations', '@angular/common'], factory) :
(factory((global['ngx-chips.fixed'] = {}),global.ng.core,global.ng.forms,global.Rx.Observable.prototype,global.ng2MaterialDropdown,global.ng.animations,global.ng.common));
}(this, (function (exports,core,forms,operators,ng2MaterialDropdown,animations,common) { 'use strict';
/*! *****************************************************************************
Copyright (c) Microsoft Corporation. All rights reserved.
Licensed under the Apache License, Version 2.0 (the "License"); you may not use
this file except in compliance with the License. You may obtain a copy of the
License at http://www.apache.org/licenses/LICENSE-2.0
THIS CODE IS PROVIDED ON AN *AS IS* BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
KIND, EITHER EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION ANY IMPLIED
WARRANTIES OR CONDITIONS OF TITLE, FITNESS FOR A PARTICULAR PURPOSE,
MERCHANTABLITY OR NON-INFRINGEMENT.
See the Apache Version 2.0 License for specific language governing permissions
and limitations under the License.
***************************************************************************** */
/* global Reflect, Promise */
var extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
function __extends(d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
}
function __awaiter(thisArg, _arguments, P, generator) {
return new (P || (P = Promise))(function (resolve, reject) {
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
function step(result) { result.done ? resolve(result.value) : new P(function (resolve) { resolve(result.value); }).then(fulfilled, rejected); }
step((generator = generator.apply(thisArg, _arguments || [])).next());
});
}
function __generator(thisArg, body) {
var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
function verb(n) { return function (v) { return step([n, v]); }; }
function step(op) {
if (f) throw new TypeError("Generator is already executing.");
while (_) try {
if (f = 1, y && (t = y[op[0] & 2 ? "return" : op[0] ? "throw" : "next"]) && !(t = t.call(y, op[1])).done) return t;
if (y = 0, t) op = [0, t.value];
switch (op[0]) {
case 0: case 1: t = op; break;
case 4: _.label++; return { value: op[1], done: false };
case 5: _.label++; y = op[1]; op = [0]; continue;
case 7: op = _.ops.pop(); _.trys.pop(); continue;
default:
if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
if (t[2]) _.ops.pop();
_.trys.pop(); continue;
}
op = body.call(thisArg, _);
} catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
}
}
function __read(o, n) {
var m = typeof Symbol === "function" && o[Symbol.iterator];
if (!m) return o;
var i = m.call(o), r, ar = [], e;
try {
while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
}
catch (error) { e = { error: error }; }
finally {
try {
if (r && !r.done && (m = i["return"])) m.call(i);
}
finally { if (e) throw e.error; }
}
return ar;
}
function __spread() {
for (var ar = [], i = 0; i < arguments.length; i++)
ar = ar.concat(__read(arguments[i]));
return ar;
}
var escape = function (s) { return s.replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&'); };
var HighlightPipe = /** @class */ (function () {
function HighlightPipe() {
}
HighlightPipe.prototype.transform = function (value, arg) {
if (!arg.trim()) {
return value;
}
try {
var regex = new RegExp("(" + escape(arg) + ")", 'i');
return value.replace(regex, '<b>$1</b>');
}
catch (e) {
return value;
}
};
return HighlightPipe;
}());
HighlightPipe.decorators = [
{ type: core.Pipe, args: [{
name: 'highlight'
},] },
];
var PLACEHOLDER = '+ Tag';
var SECONDARY_PLACEHOLDER = 'Enter a new tag';
var KEYDOWN = 'keydown';
var KEYUP = 'keyup';
var MAX_ITEMS_WARNING = 'The number of items specified was greater than the property max-items.';
var ACTIONS_KEYS = {
DELETE: 'DELETE',
SWITCH_PREV: 'SWITCH_PREV',
SWITCH_NEXT: 'SWITCH_NEXT',
TAB: 'TAB'
};
var KEY_PRESS_ACTIONS = {
8: ACTIONS_KEYS.DELETE,
37: ACTIONS_KEYS.SWITCH_PREV,
39: ACTIONS_KEYS.SWITCH_NEXT,
9: ACTIONS_KEYS.TAB
};
var DRAG_AND_DROP_KEY = 'Text';
var NEXT = 'NEXT';
var PREV = 'PREV';
var DragProvider = /** @class */ (function () {
function DragProvider() {
this.state = {
dragging: false,
dropping: false,
index: undefined
};
}
DragProvider.prototype.setDraggedItem = function (event, tag) {
event.dataTransfer.setData(DRAG_AND_DROP_KEY, JSON.stringify(tag));
};
DragProvider.prototype.getDraggedItem = function (event) {
var data = event.dataTransfer.getData(DRAG_AND_DROP_KEY);
try {
return (JSON.parse(data));
}
catch (_a) {
return;
}
};
DragProvider.prototype.setSender = function (sender) {
this.sender = sender;
};
DragProvider.prototype.setReceiver = function (receiver) {
this.receiver = receiver;
};
DragProvider.prototype.onTagDropped = function (tag, indexDragged, indexDropped) {
this.onDragEnd();
this.sender.onRemoveRequested(tag, indexDragged);
this.receiver.onAddingRequested(false, tag, indexDropped);
};
DragProvider.prototype.setState = function (state$$1) {
this.state = Object.assign({}, this.state, state$$1);
};
DragProvider.prototype.getState = function (key) {
return key ? this.state[key] : this.state;
};
DragProvider.prototype.onDragEnd = function () {
this.setState({
dragging: false,
dropping: false,
index: undefined
});
};
return DragProvider;
}());
DragProvider.decorators = [
{ type: core.Injectable },
];
var 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: matchingFn
})
};
function matchingFn(value, target) {
var targetValue = target[this.displayBy].toString();
return targetValue && targetValue
.toLowerCase()
.indexOf(value.toLowerCase()) >= 0;
}
var OptionsProvider = /** @class */ (function () {
function OptionsProvider() {
}
OptionsProvider.prototype.setOptions = function (options) {
OptionsProvider.defaults.tagInput = Object.assign({}, defaults.tagInput, options.tagInput);
OptionsProvider.defaults.dropdown = Object.assign({}, defaults.dropdown, options.dropdown);
};
return OptionsProvider;
}());
OptionsProvider.defaults = defaults;
function isObject(obj) {
return obj === Object(obj);
}
var TagInputAccessor = /** @class */ (function () {
function TagInputAccessor() {
this._items = [];
this.displayBy = OptionsProvider.defaults.tagInput.displayBy;
this.identifyBy = OptionsProvider.defaults.tagInput.identifyBy;
}
Object.defineProperty(TagInputAccessor.prototype, "items", {
get: function () {
return this._items;
},
set: function (items) {
this._items = items;
this._onChangeCallback(this._items);
},
enumerable: true,
configurable: true
});
TagInputAccessor.prototype.onTouched = function () {
this._onTouchedCallback();
};
TagInputAccessor.prototype.writeValue = function (items) {
this._items = items || [];
};
TagInputAccessor.prototype.registerOnChange = function (fn) {
this._onChangeCallback = fn;
};
TagInputAccessor.prototype.registerOnTouched = function (fn) {
this._onTouchedCallback = fn;
};
TagInputAccessor.prototype.getItemValue = function (item, fromDropdown) {
if (fromDropdown === void 0) { fromDropdown = false; }
var property = fromDropdown && this.dropdown ? this.dropdown.identifyBy : this.identifyBy;
return isObject(item) ? item[property] : item;
};
TagInputAccessor.prototype.getItemDisplay = function (item, fromDropdown) {
if (fromDropdown === void 0) { fromDropdown = false; }
var property = fromDropdown && this.dropdown ? this.dropdown.displayBy : this.displayBy;
return isObject(item) ? item[property] : item;
};
TagInputAccessor.prototype.getItemsWithout = function (index) {
return this.items.filter(function (item, position) { return position !== index; });
};
return TagInputAccessor;
}());
TagInputAccessor.propDecorators = {
"displayBy": [{ type: core.Input },],
"identifyBy": [{ type: core.Input },],
};
function listen(listenerType, action, condition) {
if (condition === void 0) { condition = true; }
if (!this.listeners.hasOwnProperty(listenerType)) {
throw new Error('The event entered may be wrong');
}
if (!condition) {
return;
}
this.listeners[listenerType].push(action);
}
var TagInputForm = /** @class */ (function () {
function TagInputForm() {
this.onSubmit = new core.EventEmitter();
this.onBlur = new core.EventEmitter();
this.onFocus = new core.EventEmitter();
this.onKeyup = new core.EventEmitter();
this.onKeydown = new core.EventEmitter();
this.inputTextChange = new core.EventEmitter();
this.validators = [];
this.asyncValidators = [];
this.tabindex = '';
this.disabled = false;
this.item = new forms.FormControl({ value: '', disabled: this.disabled });
}
Object.defineProperty(TagInputForm.prototype, "inputText", {
get: function () {
return this.item.value;
},
set: function (text) {
this.item.setValue(text);
this.inputTextChange.emit(text);
},
enumerable: true,
configurable: true
});
TagInputForm.prototype.ngOnInit = function () {
this.item.setValidators(this.validators);
this.item.setAsyncValidators(this.asyncValidators);
this.form = new forms.FormGroup({
item: this.item
});
};
TagInputForm.prototype.ngOnChanges = function (changes) {
if (changes["disabled"] && !changes["disabled"].firstChange) {
if (changes["disabled"].currentValue) {
this.form.controls['item'].disable();
}
else {
this.form.controls['item'].enable();
}
}
};
Object.defineProperty(TagInputForm.prototype, "value", {
get: function () {
return (this.form.get('item'));
},
enumerable: true,
configurable: true
});
TagInputForm.prototype.isInputFocused = function () {
var doc = typeof document !== 'undefined' ? document : undefined;
return doc ? doc.activeElement === this.input.nativeElement : false;
};
TagInputForm.prototype.getErrorMessages = function (messages) {
var _this = this;
return Object.keys(messages)
.filter(function (err) { return _this.value.hasError(err); })
.map(function (err) { return messages[err]; });
};
TagInputForm.prototype.hasErrors = function () {
var _b = this.form, dirty = _b.dirty, value = _b.value, valid = _b.valid;
return dirty && value.item && !valid;
};
TagInputForm.prototype.focus = function () {
this.input.nativeElement.focus();
};
TagInputForm.prototype.blur = function () {
this.input.nativeElement.blur();
};
TagInputForm.prototype.getElementPosition = function () {
return this.input.nativeElement.getBoundingClientRect();
};
TagInputForm.prototype.destroy = function () {
var input = this.input.nativeElement;
input.parentElement.removeChild(input);
};
TagInputForm.prototype.onKeyDown = function ($event) {
this.inputText = this.value.value;
if ($event.key === 'Enter') {
this.submit($event);
this.inputText = '';
}
return this.onKeydown.emit($event);
};
TagInputForm.prototype.onKeyUp = function ($event) {
this.inputText = this.value.value;
return this.onKeyup.emit($event);
};
TagInputForm.prototype.submit = function ($event) {
$event.preventDefault();
if (this.form.valid) {
this.onSubmit.emit($event);
}
};
return TagInputForm;
}());
TagInputForm.decorators = [
{ type: core.Component, args: [{
selector: 'tag-input-form',
styles: [".dark tag:focus{-webkit-box-shadow:0 0 0 1px #323232;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;-webkit-box-shadow:none;box-shadow:none;outline:0;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;-webkit-box-shadow:none;box-shadow:none}.bootstrap3-info.ng2-tag-input.ng2-tag-input--focused{-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.4);box-shadow:inset 0 1px 1px rgba(0,0,0,.4);border:1px solid #ccc}.bootstrap3-info.ng2-tag-input.ng2-tag-input--invalid{-webkit-box-shadow:inset 0 1px 1px #d9534f;box-shadow:inset 0 1px 1px #d9534f}.ng2-tag-input{display:block;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-ms-flex-wrap:wrap;flex-wrap:wrap;position:relative;-webkit-transition:all .25s;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{-ms-flex-wrap:wrap;flex-wrap:wrap;display:-webkit-box;display:-ms-flexbox;display:flex}.minimal.ng2-tag-input{display:block;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-ms-flex-wrap:wrap;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{-ms-flex-wrap:wrap;flex-wrap:wrap;display:-webkit-box;display:-ms-flexbox;display:flex}.dark.ng2-tag-input{display:block;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-ms-flex-wrap:wrap;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{-ms-flex-wrap:wrap;flex-wrap:wrap;display:-webkit-box;display:-ms-flexbox;display:flex}.bootstrap.ng2-tag-input{display:block;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-ms-flex-wrap:wrap;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{-ms-flex-wrap:wrap;flex-wrap:wrap;display:-webkit-box;display:-ms-flexbox;display:flex}.bootstrap3-info.ng2-tag-input{display:block;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-ms-flex-wrap:wrap;flex-wrap:wrap;position:relative;padding:4px;cursor:text;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.075);box-shadow:inset 0 1px 1px rgba(0,0,0,.075);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{-ms-flex-wrap:wrap;flex-wrap:wrap;display:-webkit-box;display:-ms-flexbox;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}"],
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"
},] },
];
TagInputForm.propDecorators = {
"onSubmit": [{ type: core.Output },],
"onBlur": [{ type: core.Output },],
"onFocus": [{ type: core.Output },],
"onKeyup": [{ type: core.Output },],
"onKeydown": [{ type: core.Output },],
"inputTextChange": [{ type: core.Output },],
"placeholder": [{ type: core.Input },],
"validators": [{ type: core.Input },],
"asyncValidators": [{ type: core.Input },],
"inputId": [{ type: core.Input },],
"inputClass": [{ type: core.Input },],
"tabindex": [{ type: core.Input },],
"disabled": [{ type: core.Input },],
"input": [{ type: core.ViewChild, args: ['input',] },],
"inputText": [{ type: core.Input },],
};
var defaults$1 = core.forwardRef(function () { return OptionsProvider.defaults.dropdown; });
var TagInputDropdown = /** @class */ (function () {
function TagInputDropdown(injector) {
var _this = this;
this.injector = injector;
this.offset = new defaults$1().offset;
this.focusFirstElement = new defaults$1().focusFirstElement;
this.showDropdownIfEmpty = new defaults$1().showDropdownIfEmpty;
this.minimumTextLength = new defaults$1().minimumTextLength;
this.limitItemsTo = new defaults$1().limitItemsTo;
this.displayBy = new defaults$1().displayBy;
this.identifyBy = new defaults$1().identifyBy;
this.matchingFn = new defaults$1().matchingFn;
this.appendToBody = new defaults$1().appendToBody;
this.keepOpen = new defaults$1().keepOpen;
this.dynamicUpdate = new defaults$1().dynamicUpdate;
this.zIndex = new defaults$1().zIndex;
this.items = [];
this.tagInput = this.injector.get(TagInputComponent);
this._autocompleteItems = [];
this.show = function () {
var maxItemsReached = _this.tagInput.items.length === _this.tagInput.maxItems;
var value = _this.getFormValue();
var hasMinimumText = value.trim().length >= _this.minimumTextLength;
var position = _this.calculatePosition();
var items = _this.getMatchingItems(value);
var hasItems = items.length > 0;
var isHidden = _this.isVisible === false;
var showDropdownIfEmpty = _this.showDropdownIfEmpty && hasItems && !value;
var isDisabled = _this.tagInput.disable;
var shouldShow = isHidden && ((hasItems && hasMinimumText) || showDropdownIfEmpty);
var 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();
}
};
this.requestAdding = function (item) { return __awaiter(_this, void 0, void 0, function () {
var tag;
return __generator(this, function (_b) {
switch (_b.label) {
case 0:
tag = this.createTagModel(item);
return [4 /*yield*/, this.tagInput.onAddingRequested(true, tag).catch(function () { })];
case 1:
_b.sent();
return [2 /*return*/];
}
});
}); };
this.resetItems = function () {
_this.items = [];
};
this.getItemsFromObservable = function (text) {
_this.setLoadingState(true);
var subscribeFn = function (data) {
_this.setLoadingState(false)
.populateItems(data);
_this.setItems(_this.getMatchingItems(text));
if (_this.items.length) {
_this.dropdown.show(_this.calculatePosition());
}
else {
_this.dropdown.hide();
}
};
_this.autocompleteObservable(text)
.pipe(operators.first())
.subscribe(subscribeFn, function () { return _this.setLoadingState(false); });
};
}
Object.defineProperty(TagInputDropdown.prototype, "autocompleteItems", {
get: function () {
var _this = this;
var items = this._autocompleteItems;
if (!items) {
return [];
}
return items.map(function (item) {
return typeof item === 'string' ? (_b = {}, _b[_this.displayBy] = item, _b[_this.identifyBy] = item, _b) : item;
var _b;
});
},
set: function (items) {
this._autocompleteItems = items;
},
enumerable: true,
configurable: true
});
TagInputDropdown.prototype.ngOnInit = function () {
var _this = this;
this.onItemClicked().subscribe(function (item) {
_this.requestAdding(item);
});
this.onHide().subscribe(this.resetItems);
var DEBOUNCE_TIME = 200;
var KEEP_OPEN = this.keepOpen;
this.tagInput
.onTextChange
.asObservable()
.pipe(operators.debounceTime(DEBOUNCE_TIME), operators.filter(function (value) {
if (KEEP_OPEN === false) {
return value.length > 0;
}
return true;
}))
.subscribe(this.show);
};
TagInputDropdown.prototype.updatePosition = function () {
var position = this.tagInput.inputForm.getElementPosition();
this.dropdown.menu.updatePosition(position, this.dynamicUpdate);
};
Object.defineProperty(TagInputDropdown.prototype, "isVisible", {
get: function () {
return this.dropdown.menu.state.menuState.isVisible;
},
enumerable: true,
configurable: true
});
TagInputDropdown.prototype.onHide = function () {
return this.dropdown.onHide;
};
TagInputDropdown.prototype.onItemClicked = function () {
return this.dropdown.onItemClicked;
};
Object.defineProperty(TagInputDropdown.prototype, "selectedItem", {
get: function () {
return this.dropdown.menu.state.dropdownState.selectedItem;
},
enumerable: true,
configurable: true
});
Object.defineProperty(TagInputDropdown.prototype, "state", {
get: function () {
return this.dropdown.menu.state;
},
enumerable: true,
configurable: true
});
TagInputDropdown.prototype.hide = function () {
this.resetItems();
this.dropdown.hide();
};
TagInputDropdown.prototype.scrollListener = function () {
if (!this.isVisible || !this.dynamicUpdate) {
return;
}
this.updatePosition();
};
TagInputDropdown.prototype.onWindowBlur = function () {
this.dropdown.hide();
};
TagInputDropdown.prototype.getFormValue = function () {
var formValue = this.tagInput.formValue;
return formValue ? formValue.toString().trim() : '';
};
TagInputDropdown.prototype.calculatePosition = function () {
return this.tagInput.inputForm.getElementPosition();
};
TagInputDropdown.prototype.createTagModel = function (item) {
var display = typeof item.value === 'string' ? item.value : item.value[this.displayBy];
var value = typeof item.value === 'string' ? item.value : item.value[this.identifyBy];
return Object.assign({}, item.value, (_b = {}, _b[this.tagInput.displayBy] = display, _b[this.tagInput.identifyBy] = value, _b));
var _b;
};
TagInputDropdown.prototype.getMatchingItems = function (value) {
var _this = this;
if (!value && !this.showDropdownIfEmpty) {
return [];
}
var dupesAllowed = this.tagInput.allowDupes;
return this.autocompleteItems.filter(function (item) {
var hasValue = dupesAllowed ? false : _this.tagInput.tags.some(function (tag) {
var identifyBy = _this.tagInput.identifyBy;
var model = typeof tag.model === 'string' ? tag.model : tag.model[identifyBy];
return model === item[_this.identifyBy];
});
return _this.matchingFn(value, item) && (hasValue === false);
});
};
TagInputDropdown.prototype.setItems = function (items) {
this.items = items.slice(0, this.limitItemsTo || items.length);
};
TagInputDropdown.prototype.populateItems = function (data) {
var _this = this;
this.autocompleteItems = data.map(function (item) {
return typeof item === 'string' ? (_b = {}, _b[_this.displayBy] = item, _b[_this.identifyBy] = item, _b) : item;
var _b;
});
return this;
};
TagInputDropdown.prototype.setLoadingState = function (state$$1) {
this.tagInput.isLoading = state$$1;
return this;
};
return TagInputDropdown;
}());
TagInputDropdown.decorators = [
{ type: core.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"
},] },
];
TagInputDropdown.ctorParameters = function () { return [
{ type: core.Injector, },
]; };
TagInputDropdown.propDecorators = {
"dropdown": [{ type: core.ViewChild, args: [ng2MaterialDropdown.Ng2Dropdown,] },],
"templates": [{ type: core.ContentChildren, args: [core.TemplateRef,] },],
"offset": [{ type: core.Input },],
"focusFirstElement": [{ type: core.Input },],
"showDropdownIfEmpty": [{ type: core.Input },],
"autocompleteObservable": [{ type: core.Input },],
"minimumTextLength": [{ type: core.Input },],
"limitItemsTo": [{ type: core.Input },],
"displayBy": [{ type: core.Input },],
"identifyBy": [{ type: core.Input },],
"matchingFn": [{ type: core.Input },],
"appendToBody": [{ type: core.Input },],
"keepOpen": [{ type: core.Input },],
"dynamicUpdate": [{ type: core.Input },],
"zIndex": [{ type: core.Input },],
"autocompleteItems": [{ type: core.Input },],
"scrollListener": [{ type: core.HostListener, args: ['window:scroll',] },],
"onWindowBlur": [{ type: core.HostListener, args: ['window:blur',] },],
};
var TagRipple = /** @class */ (function () {
function TagRipple() {
this.state = 'none';
}
return TagRipple;
}());
TagRipple.decorators = [
{ type: core.Component, args: [{
selector: 'tag-ripple',
styles: ["\n :host {\n width: 100%;\n height: 100%;\n left: 0;\n overflow: hidden;\n position: absolute;\n }\n \n .tag-ripple {\n background: rgba(0, 0, 0, 0.1);\n top: 50%;\n left: 50%;\n height: 100%;\n transform: translate(-50%, -50%);\n position: absolute;\n }\n "],
template: "\n <div class=\"tag-ripple\" [@ink]=\"state\"></div>\n ",
animations: [
animations.trigger('ink', [
animations.state('none', animations.style({ width: 0, opacity: 0 })),
animations.transition('none => clicked', [
animations.animate(300, animations.keyframes([
animations.style({ opacity: 1, offset: 0, width: '30%', borderRadius: '100%' }),
animations.style({ opacity: 1, offset: 0.5, width: '50%' }),
animations.style({ opacity: 0.5, offset: 1, width: '100%', borderRadius: '16px' })
]))
])
])
]
},] },
];
TagRipple.propDecorators = {
"state": [{ type: core.Input },],
};
var navigator = typeof window !== 'undefined' ? window.navigator : {
userAgent: 'Chrome',
vendor: 'Google Inc'
};
var isChrome = /Chrome/.test(navigator.userAgent) && /Google Inc/.test(navigator.vendor);
var TagComponent = /** @class */ (function () {
function TagComponent(element, renderer, cdRef) {
this.element = element;
this.renderer = renderer;
this.cdRef = cdRef;
this.disabled = false;
this.onSelect = new core.EventEmitter();
this.onRemove = new core.EventEmitter();
this.onBlur = new core.EventEmitter();
this.onKeyDown = new core.EventEmitter();
this.onTagEdited = new core.EventEmitter();
this.editing = false;
this.rippleState = "none";
}
Object.defineProperty(TagComponent.prototype, "readonly", {
get: function () {
return typeof this.model !== "string" && this.model["readonly"] === true;
},
enumerable: true,
configurable: true
});
TagComponent.prototype.select = function ($event) {
if (this.readonly || this.disabled) {
return;
}
if ($event) {
$event.stopPropagation();
}
this.focus();
this.onSelect.emit(this.model);
};
TagComponent.prototype.remove = function ($event) {
$event.stopPropagation();
this.onRemove.emit(this);
};
TagComponent.prototype.focus = function () {
this.element.nativeElement.focus();
};
TagComponent.prototype.move = function () {
this.moving = true;
};
TagComponent.prototype.keydown = function (event) {
if (this.editing) {
if (event.keyCode === 13) {
return this.disableEditMode(event);
}
}
else {
this.onKeyDown.emit({ event: event, model: this.model });
}
};
TagComponent.prototype.blink = function () {
var classList = this.element.nativeElement.classList;
classList.add("blink");
setTimeout(function () { return classList.remove("blink"); }, 50);
};
TagComponent.prototype.toggleEditMode = function () {
if (this.editable) {
return this.editing ? undefined : this.activateEditMode();
}
};
TagComponent.prototype.onBlurred = function (event) {
if (!this.editable) {
return;
}
this.disableEditMode();
var value = event.target.innerText;
var result = typeof this.model === "string"
? value
: Object.assign({}, this.model, (_b = {}, _b[this.displayBy] = value, _b));
this.onBlur.emit(result);
var _b;
};
TagComponent.prototype.getDisplayValue = function (item) {
return typeof item === "string" ? item : item[this.displayBy];
};
Object.defineProperty(TagComponent.prototype, "isRippleVisible", {
get: function () {
return !this.readonly && !this.editing && isChrome && this.hasRipple;
},
enumerable: true,
configurable: true
});
TagComponent.prototype.disableEditMode = function ($event) {
var classList = this.element.nativeElement.classList;
var 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();
}
};
TagComponent.prototype.isDeleteIconVisible = function () {
return (!this.readonly && !this.disabled && this.removable && !this.editing);
};
TagComponent.prototype.getContentEditableText = function () {
var input = this.getContentEditable();
return input ? input.innerText.trim() : "";
};
TagComponent.prototype.setContentEditableText = function (model) {
var input = this.getContentEditable();
var value = this.getDisplayValue(model);
input.innerText = value;
};
TagComponent.prototype.activateEditMode = function () {
var classList = this.element.nativeElement.classList;
classList.add('tag--editing');
this.editing = true;
};
TagComponent.prototype.storeNewValue = function (input) {
var _this = this;
var exists = function (tag) {
return typeof tag === 'string'
? tag === input
: tag[_this.displayBy] === input;
};
var hasId = function () {
return _this.model[_this.identifyBy] !== _this.model[_this.displayBy];
};
if (exists(this.model)) {
return;
}
var model = typeof this.model === 'string'
? input
: (_b = {
index: this.index
}, _b[this.identifyBy] = hasId()
? this.model[this.identifyBy]
: input, _b[this.displayBy] = input, _b);
if (this.canAddTag(model)) {
this.onTagEdited.emit({ tag: model, index: this.index });
}
else {
this.setContentEditableText(this.model);
}
var _b;
};
TagComponent.prototype.getContentEditable = function () {
return this.element.nativeElement.querySelector('[contenteditable]');
};
return TagComponent;
}());
TagComponent.decorators = [
{ type: core.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;-webkit-transition:opacity 1s;transition:opacity 1s;z-index:1}:host{max-width:400px}:host.blink{-webkit-animation:.3s ease-in-out forwards blink;animation:.3s ease-in-out forwards blink}@-webkit-keyframes blink{0%{opacity:.3}}@keyframes blink{0%{opacity:.3}}:host .disabled{cursor:not-allowed}:host [contenteditable=true]{outline:0}.tag-wrapper{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;display:-webkit-box;display:-ms-flexbox;display:flex}.tag__text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}"]
},] },
];
TagComponent.ctorParameters = function () { return [
{ type: core.ElementRef, },
{ type: core.Renderer2, },
{ type: core.ChangeDetectorRef, },
]; };
TagComponent.propDecorators = {
"model": [{ type: core.Input },],
"removable": [{ type: core.Input },],
"editable": [{ type: core.Input },],
"template": [{ type: core.Input },],
"displayBy": [{ type: core.Input },],
"identifyBy": [{ type: core.Input },],
"index": [{ type: core.Input },],
"hasRipple": [{ type: core.Input },],
"disabled": [{ type: core.Input },],
"canAddTag": [{ type: core.Input },],
"onSelect": [{ type: core.Output },],
"onRemove": [{ type: core.Output },],
"onBlur": [{ type: core.Output },],
"onKeyDown": [{ type: core.Output },],
"onTagEdited": [{ type: core.Output },],
"moving": [{ type: core.HostBinding, args: ["class.moving",] },],
"ripple": [{ type: core.ViewChild, args: [TagRipple,] },],
"keydown": [{ type: core.HostListener, args: ["keydown", ["$event"],] },],
};
var animations$1 = [
animations.trigger('animation', [
animations.state('in', animations.style({
opacity: 1
})),
animations.state('out', animations.style({
opacity: 0
})),
animations.transition(':enter', [
animations.animate("{{ enter }}", animations.keyframes([
animations.style({ opacity: 0, offset: 0, transform: 'translate(0px, 20px)' }),
animations.style({ opacity: 0.3, offset: 0.3, transform: 'translate(0px, -10px)' }),
animations.style({ opacity: 0.5, offset: 0.5, transform: 'translate(0px, 0px)' }),
animations.style({ opacity: 0.75, offset: 0.75, transform: 'translate(0px, 5px)' }),
animations.style({ opacity: 1, offset: 1, transform: 'translate(0px, 0px)' })
]))
]),
animations.transition(':leave', [
animations.animate("{{ leave }}", animations.keyframes([
animations.style({ opacity: 1, transform: 'translateX(0)', offset: 0 }),
animations.style({ opacity: 1, transform: 'translateX(-15px)', offset: 0.7 }),
animations.style({ opacity: 0, transform: 'translateX(100%)', offset: 1.0 })
]))
])
])
];
var DragEvent = ((window)).DragEvent;
var CUSTOM_ACCESSOR = {
provide: forms.NG_VALUE_ACCESSOR,
useExisting: core.forwardRef(function () { return TagInputComponent; }),
multi: true
};
var defaults$2 = core.forwardRef(function () { return OptionsProvider.defaults.tagInput; });
var TagInputComponent = /** @class */ (function (_super) {
__extends(TagInputComponent, _super);
function TagInputComponent(renderer, dragProvider) {
var _this = _super.call(this) || this;
_this.renderer = renderer;
_this.dragProvider = dragProvider;
_this.separatorKeys = new defaults$2().separatorKeys;
_this.separatorKeyCodes = new defaults$2().separatorKeyCodes;
_this.placeholder = new defaults$2().placeholder;
_this.secondaryPlaceholder = new defaults$2().secondaryPlaceholder;
_this.maxItems = new defaults$2().maxItems;
_this.validators = new defaults$2().validators;
_this.asyncValidators = new defaults$2().asyncValidators;
_this.onlyFromAutocomplete = new defaults$2().onlyFromAutocomplete;
_this.errorMessages = new defaults$2().errorMessages;
_this.theme = new defaults$2().theme;
_this.onTextChangeDebounce = new defaults$2().onTextChangeDebounce;
_this.inputId = new defaults$2().inputId;
_this.inputClass = new defaults$2().inputClass;
_this.clearOnBlur = new defaults$2().clearOnBlur;
_this.hideForm = new defaults$2().hideForm;
_this.addOnBlur = new defaults$2().addOnBlur;
_this.addOnPaste = new defaults$2().addOnPaste;
_this.pasteSplitPattern = new defaults$2().pasteSplitPattern;
_this.blinkIfDupe = new defaults$2().blinkIfDupe;
_this.removable = new defaults$2().removable;
_this.editable = new defaults$2().editable;
_this.allowDupes = new defaults$2().allowDupes;
_this.modelAsStrings = new defaults$2().modelAsStrings;
_this.trimTags = new defaults$2().trimTags;
_this.ripple = new defaults$2().ripple;
_this.tabindex = new defaults$2().tabIndex;
_this.disable = new defaults$2().disable;
_this.dragZone = new defaults$2().dragZone;
_this.onRemoving = new defaults$2().onRemoving;
_this.onAdding = new defaults$2().onAdding;
_this.animationDuration = new defaults$2().animationDuration;
_this.onAdd = new core.EventEmitter();
_this.onRemove = new core.EventEmitter();
_this.onSelect = new core.EventEmitter();
_this.onFocus = new core.EventEmitter();
_this.onBlur = new core.EventEmitter();
_this.onTextChange = new core.EventEmitter();
_this.onPaste = new core.EventEmitter();
_this.onValidationError = new core.EventEmitter();
_this.onTagEdited = new core.EventEmitter();
_this.isLoading = false;
_this.listeners = (_b = {}, _b[KEYDOWN] = ([]), _b[KEYUP] = ([]), _b);
_this.inputTextChange = new core.EventEmitter();
_this.inputTextValue = '';
_this.errors = [];
_this.appendTag = function (tag, index) {
if (index === void 0) { index = _this.items.length; }
var items = _this.items;
var model = _this.modelAsStrings ? tag[_this.identifyBy] : tag;
_this.items = __spread(items.slice(0, index), [
model
], items.slice(index, items.length));
};
_this.createTag = function (model) {
var trim = function (val, key) {
return typeof val === 'string' ? val.trim() : val[key];
};
return Object.assign({}, typeof model !== 'string' ? model : {}, (_b = {}, _b[_this.displayBy] = _this.trimTags ? trim(model, _this.displayBy) : model, _b[_this.identifyBy] = _this.trimTags ? trim(model, _this.identifyBy) : model, _b));
var _b;
};
_this.isTagValid = function (tag, fromAutocomplete) {
if (fromAutocomplete === void 0) { fromAutocomplete = false; }
var selectedItem = _this.dropdown ? _this.dropdown.selectedItem : undefined;
var value = _this.getItemDisplay(tag).trim();
if (selectedItem && !fromAutocomplete || !value) {
return false;
}
var dupe = _this.findDupe(tag, fromAutocomplete);
if (!_this.allowDupes && dupe && _this.blinkIfDupe) {
var model = _this.tags.find(function (item) {
return _this.getItemValue(item.model) === _this.getItemValue(dupe);
});
if (model) {
model.blink();
}
}
var isFromAutocomplete = fromAutocomplete && _this.onlyFromAutocomplete;
var assertions = [
!dupe || _this.allowDupes,
!_this.maxItemsReached,
((isFromAutocomplete) || !_this.onlyFromAutocomplete)
];
return assertions.filter(Boolean).length === assertions.length;
};
_this.onPasteCallback = function (data) { return __awaiter(_this, void 0, void 0, function () {
var _this = this;
var getText, text, requests, resetInput;