@taiga-ui/kit
Version:
Taiga UI Angular main components kit
729 lines (696 loc) • 49.8 kB
JavaScript
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/forms'), require('@taiga-ui/cdk'), require('@taiga-ui/core'), require('@taiga-ui/kit/components/tag'), require('@taiga-ui/kit/providers'), require('@taiga-ui/kit/tokens'), require('rxjs'), require('rxjs/operators'), require('@angular/common'), require('@tinkoff/ng-polymorpheus')) :
typeof define === 'function' && define.amd ? define('@taiga-ui/kit/components/input-tag', ['exports', '@angular/core', '@angular/forms', '@taiga-ui/cdk', '@taiga-ui/core', '@taiga-ui/kit/components/tag', '@taiga-ui/kit/providers', '@taiga-ui/kit/tokens', 'rxjs', 'rxjs/operators', '@angular/common', '@tinkoff/ng-polymorpheus'], factory) :
(global = global || self, factory((global['taiga-ui'] = global['taiga-ui'] || {}, global['taiga-ui'].kit = global['taiga-ui'].kit || {}, global['taiga-ui'].kit.components = global['taiga-ui'].kit.components || {}, global['taiga-ui'].kit.components['input-tag'] = {}), global.ng.core, global.ng.forms, global.cdk, global.core$1, global['taiga-ui'].kit.components.tag, global['taiga-ui'].kit.providers, global['taiga-ui'].kit.tokens, global.rxjs, global.rxjs.operators, global.ng.common, global.ngPolymorpheus));
}(this, (function (exports, core, forms, cdk, core$1, tag, providers, tokens, rxjs, operators, common, ngPolymorpheus) { 'use strict';
/*! *****************************************************************************
Copyright (c) Microsoft Corporation.
Permission to use, copy, modify, and/or distribute this software for any
purpose with or without fee is hereby granted.
THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
PERFORMANCE OF THIS SOFTWARE.
***************************************************************************** */
/* global Reflect, Promise */
var extendStatics = function(d, b) {
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]; };
return extendStatics(d, b);
};
function __extends(d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
}
var __assign = function() {
__assign = Object.assign || function __assign(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
function __rest(s, e) {
var t = {};
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
t[p] = s[p];
if (s != null && typeof Object.getOwnPropertySymbols === "function")
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
t[p[i]] = s[p[i]];
}
return t;
}
function __decorate(decorators, target, key, desc) {
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
return c > 3 && r && Object.defineProperty(target, key, r), r;
}
function __param(paramIndex, decorator) {
return function (target, key) { decorator(target, key, paramIndex); }
}
function __metadata(metadataKey, metadataValue) {
if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(metadataKey, metadataValue);
}
function __awaiter(thisArg, _arguments, P, generator) {
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
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) : adopt(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 = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
if (y = 0, t) op = [op[0] & 2, 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 __createBinding(o, m, k, k2) {
if (k2 === undefined) k2 = k;
o[k2] = m[k];
}
function __exportStar(m, exports) {
for (var p in m) if (p !== "default" && !exports.hasOwnProperty(p)) exports[p] = m[p];
}
function __values(o) {
var s = typeof Symbol === "function" && Symbol.iterator, m = s && o[s], i = 0;
if (m) return m.call(o);
if (o && typeof o.length === "number") return {
next: function () {
if (o && i >= o.length) o = void 0;
return { value: o && o[i++], done: !o };
}
};
throw new TypeError(s ? "Object is not iterable." : "Symbol.iterator is not defined.");
}
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;
}
function __spreadArrays() {
for (var s = 0, i = 0, il = arguments.length; i < il; i++) s += arguments[i].length;
for (var r = Array(s), k = 0, i = 0; i < il; i++)
for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++)
r[k] = a[j];
return r;
};
function __await(v) {
return this instanceof __await ? (this.v = v, this) : new __await(v);
}
function __asyncGenerator(thisArg, _arguments, generator) {
if (!Symbol.asyncIterator) throw new TypeError("Symbol.asyncIterator is not defined.");
var g = generator.apply(thisArg, _arguments || []), i, q = [];
return i = {}, verb("next"), verb("throw"), verb("return"), i[Symbol.asyncIterator] = function () { return this; }, i;
function verb(n) { if (g[n]) i[n] = function (v) { return new Promise(function (a, b) { q.push([n, v, a, b]) > 1 || resume(n, v); }); }; }
function resume(n, v) { try { step(g[n](v)); } catch (e) { settle(q[0][3], e); } }
function step(r) { r.value instanceof __await ? Promise.resolve(r.value.v).then(fulfill, reject) : settle(q[0][2], r); }
function fulfill(value) { resume("next", value); }
function reject(value) { resume("throw", value); }
function settle(f, v) { if (f(v), q.shift(), q.length) resume(q[0][0], q[0][1]); }
}
function __asyncDelegator(o) {
var i, p;
return i = {}, verb("next"), verb("throw", function (e) { throw e; }), verb("return"), i[Symbol.iterator] = function () { return this; }, i;
function verb(n, f) { i[n] = o[n] ? function (v) { return (p = !p) ? { value: __await(o[n](v)), done: n === "return" } : f ? f(v) : v; } : f; }
}
function __asyncValues(o) {
if (!Symbol.asyncIterator) throw new TypeError("Symbol.asyncIterator is not defined.");
var m = o[Symbol.asyncIterator], i;
return m ? m.call(o) : (o = typeof __values === "function" ? __values(o) : o[Symbol.iterator](), i = {}, verb("next"), verb("throw"), verb("return"), i[Symbol.asyncIterator] = function () { return this; }, i);
function verb(n) { i[n] = o[n] && function (v) { return new Promise(function (resolve, reject) { v = o[n](v), settle(resolve, reject, v.done, v.value); }); }; }
function settle(resolve, reject, d, v) { Promise.resolve(v).then(function(v) { resolve({ value: v, done: d }); }, reject); }
}
function __makeTemplateObject(cooked, raw) {
if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
return cooked;
};
function __importStar(mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k in mod) if (Object.hasOwnProperty.call(mod, k)) result[k] = mod[k];
result.default = mod;
return result;
}
function __importDefault(mod) {
return (mod && mod.__esModule) ? mod : { default: mod };
}
function __classPrivateFieldGet(receiver, privateMap) {
if (!privateMap.has(receiver)) {
throw new TypeError("attempted to get private field on non-instance");
}
return privateMap.get(receiver);
}
function __classPrivateFieldSet(receiver, privateMap, value) {
if (!privateMap.has(receiver)) {
throw new TypeError("attempted to set private field on non-instance");
}
privateMap.set(receiver, value);
return value;
}
var EVENT_Y_TO_X_COEFFICENT = 3;
var TuiInputTagComponent = /** @class */ (function (_super) {
__extends(TuiInputTagComponent, _super);
function TuiInputTagComponent(control, changeDetectorRef, tuiScrollService, elementRef, appearance, modeDirective, tagStatus, hintController, controller) {
var _this = _super.call(this, control, changeDetectorRef) || this;
_this.tuiScrollService = tuiScrollService;
_this.elementRef = elementRef;
_this.appearance = appearance;
_this.modeDirective = modeDirective;
_this.tagStatus = tagStatus;
_this.hintController = hintController;
_this.controller = controller;
_this.allowSpaces = true;
_this.icon = '';
_this.iconAlign = 'right';
_this.search = '';
_this.editable = true;
_this.tagValidator = cdk.ALWAYS_TRUE_HANDLER;
_this.expandable = true;
_this.inputHidden = false;
_this.disabledItemHandler = cdk.ALWAYS_FALSE_HANDLER;
_this.searchChange = new core.EventEmitter();
_this.open = false;
_this.tags = cdk.EMPTY_QUERY;
_this.scrollToStart$ = new rxjs.Subject();
_this.scrollToEnd$ = new rxjs.Subject();
return _this;
}
TuiInputTagComponent_1 = TuiInputTagComponent;
Object.defineProperty(TuiInputTagComponent.prototype, "pseudoFocusedSetter", {
set: function (value) {
if (!value && !this.focused) {
this.scrollToStart$.next();
}
this.pseudoFocused = value;
},
enumerable: true,
configurable: true
});
Object.defineProperty(TuiInputTagComponent.prototype, "scrollerSetter", {
set: function (scroller) {
this.initScrollerSubscrition(scroller);
},
enumerable: true,
configurable: true
});
Object.defineProperty(TuiInputTagComponent.prototype, "nativeFocusableElement", {
get: function () {
return !this.focusableElement || this.computedDisabled
? null
: this.focusableElement.nativeElement;
},
enumerable: true,
configurable: true
});
Object.defineProperty(TuiInputTagComponent.prototype, "focused", {
get: function () {
return (cdk.isNativeFocusedIn(this.elementRef.nativeElement) ||
(!!this.dropdown && this.dropdown.focused));
},
enumerable: true,
configurable: true
});
Object.defineProperty(TuiInputTagComponent.prototype, "size", {
get: function () {
return this.controller.size;
},
enumerable: true,
configurable: true
});
Object.defineProperty(TuiInputTagComponent.prototype, "labelOutside", {
get: function () {
return this.controller.labelOutside;
},
enumerable: true,
configurable: true
});
Object.defineProperty(TuiInputTagComponent.prototype, "hasCleaner", {
get: function () {
return (this.controller.cleaner && this.hasValue && !this.disabled && !this.readOnly);
},
enumerable: true,
configurable: true
});
Object.defineProperty(TuiInputTagComponent.prototype, "hasNativeValue", {
get: function () {
return !!this.search;
},
enumerable: true,
configurable: true
});
Object.defineProperty(TuiInputTagComponent.prototype, "hasValue", {
get: function () {
return !!this.value.length || this.hasNativeValue;
},
enumerable: true,
configurable: true
});
Object.defineProperty(TuiInputTagComponent.prototype, "hasPlaceholder", {
get: function () {
return !this.labelOutside || (!this.hasValue && !this.hasExampleText);
},
enumerable: true,
configurable: true
});
Object.defineProperty(TuiInputTagComponent.prototype, "placeholderRaised", {
get: function () {
return (!this.labelOutside &&
((this.computedFocused && !this.readOnly) || this.hasValue));
},
enumerable: true,
configurable: true
});
Object.defineProperty(TuiInputTagComponent.prototype, "hasExampleText", {
get: function () {
return (!!this.controller.exampleText &&
this.computedFocused &&
!this.hasValue &&
!this.readOnly);
},
enumerable: true,
configurable: true
});
Object.defineProperty(TuiInputTagComponent.prototype, "hasTooltip", {
get: function () {
return !!this.hintController.content && !this.disabled;
},
enumerable: true,
configurable: true
});
Object.defineProperty(TuiInputTagComponent.prototype, "iconAlignLeft", {
get: function () {
return !!this.icon && this.iconAlign === 'left';
},
enumerable: true,
configurable: true
});
Object.defineProperty(TuiInputTagComponent.prototype, "iconAlignRight", {
get: function () {
return !!this.icon && this.iconAlign === 'right';
},
enumerable: true,
configurable: true
});
Object.defineProperty(TuiInputTagComponent.prototype, "hasRightIcons", {
get: function () {
return this.hasCleaner || this.hasTooltip || this.iconAlignRight;
},
enumerable: true,
configurable: true
});
Object.defineProperty(TuiInputTagComponent.prototype, "status", {
get: function () {
return this.modeDirective && this.modeDirective.mode
? "default" /* Default */
: this.tagStatus;
},
enumerable: true,
configurable: true
});
TuiInputTagComponent.prototype.getLeftContent = function (tag) {
return !this.tagValidator(tag) && this.errorIconTemplate
? this.errorIconTemplate
: null;
};
TuiInputTagComponent.prototype.onCleanerClick = function () {
this.updateSearch('');
this.clear();
this.focusInput();
};
TuiInputTagComponent.prototype.onActiveZone = function (active) {
this.updateFocused(active);
if (active) {
return;
}
this.open = false;
this.addTag();
if (!this.pseudoFocused) {
this.scrollToStart$.next();
}
};
TuiInputTagComponent.prototype.onMouseDown = function (event) {
var actualTarget = cdk.getActualTarget(event);
if (!this.focusableElement ||
actualTarget === this.focusableElement.nativeElement ||
!(event.target instanceof Element) ||
(this.cleanerSvg && this.cleanerSvg.nativeElement.contains(event.target)) ||
(this.tagsContainer &&
actualTarget !== this.tagsContainer.nativeElement &&
this.tagsContainer.nativeElement.contains(actualTarget))) {
return;
}
event.preventDefault();
this.focusInput();
};
TuiInputTagComponent.prototype.onFieldKeyDownBackspace = function (event) {
if (!this.labelOutside && !this.hasNativeValue && this.value.length) {
this.deleteLastEnabledItem();
}
else {
this.onFieldKeyDownArrowLeft(event);
}
};
TuiInputTagComponent.prototype.onFieldKeyDownArrowLeft = function (event) {
if (!this.labelOutside || this.hasNativeValue || !this.value.length) {
return;
}
event.preventDefault();
cdk.setNativeFocused(this.tags.last.nativeElement);
};
TuiInputTagComponent.prototype.onFieldKeyDownEnter = function () {
this.addTag();
this.scrollToEnd$.next();
};
TuiInputTagComponent.prototype.onTagKeyDownArrowLeft = function (currentIndex) {
if (currentIndex <= 0) {
return;
}
this.onScrollKeyDown(currentIndex, -1);
};
TuiInputTagComponent.prototype.onTagKeyDownArrowRight = function (currentIndex) {
if (currentIndex === this.value.length - 1) {
this.focusInput();
return;
}
this.onScrollKeyDown(currentIndex, 1);
};
TuiInputTagComponent.prototype.onTagEdited = function (value, editedTag) {
this.focusInput();
this.updateValue(this.value
.map(function (tag) {
return tag !== editedTag
? tag
: value
.split(',')
.map(function (tag) { return tag.trim(); })
.filter(Boolean);
})
.reduce(function (result, item) { return result.concat(item); }, []));
};
TuiInputTagComponent.prototype.handleOption = function (item) {
this.focusInput();
this.updateSearch('');
this.updateValue(this.value.concat(item));
this.open = false;
this.scrollToEnd$.next();
};
TuiInputTagComponent.prototype.onInput = function (value) {
var _this = this;
var array = this.allowSpaces
? value.split(',')
: value.split(tag.ALLOWED_SPACE_REGEXP);
var tags = array
.map(function (item) { return item.trim(); })
.filter(function (item, index, _a) {
var length = _a.length;
return item.length > 0 && index !== length - 1;
});
var validated = tags.filter(function (tag) { return !_this.disabledItemHandler(tag); });
if (array.length > 1) {
this.updateSearch(array[array.length - 1].trim());
this.updateValue(__spread(this.value, validated));
}
else {
this.updateSearch(value);
}
this.open = this.hasNativeValue;
};
TuiInputTagComponent.prototype.onHoveredChange = function (hovered) {
this.updateHovered(hovered);
};
TuiInputTagComponent.prototype.setDisabledState = function () {
_super.prototype.setDisabledState.call(this);
this.open = false;
};
TuiInputTagComponent.prototype.onScrollKeyDown = function (currentIndex, flag) {
var tag = this.tags.find(function (_item, index) { return index === currentIndex + flag; });
if (!tag || !this.scrollBar) {
return;
}
cdk.setNativeFocused(tag.nativeElement);
if (flag * this.scrollBar.nativeElement.clientWidth -
flag * tag.nativeElement.offsetLeft -
tag.nativeElement.clientWidth <
0) {
this.scrollBar.nativeElement.scrollLeft +=
flag * tag.nativeElement.clientWidth;
}
};
TuiInputTagComponent.prototype.initScrollerSubscrition = function (scroller) {
var _this = this;
if (!scroller || !scroller.browserScrollRef) {
return;
}
var nativeElement = scroller.browserScrollRef.nativeElement;
var wheel$ = cdk.typedFromEvent(nativeElement, 'wheel', { passive: false }).pipe(operators.filter(function (event) { return event.deltaX === 0 && _this.shouldScroll(nativeElement); }), cdk.preventDefault(), operators.map(function (_a) {
var deltaY = _a.deltaY;
return Math.max(nativeElement.scrollLeft + deltaY * EVENT_Y_TO_X_COEFFICENT, 0);
}));
var start$ = this.scrollToStart$.pipe(operators.mapTo(0));
var end$ = this.scrollToEnd$.pipe(operators.map(function () { return nativeElement.scrollWidth; }));
rxjs.merge(wheel$, start$, end$)
.pipe(operators.switchMap(function (left) { return _this.tuiScrollService.scroll$(nativeElement, 0, left); }), operators.takeUntil(this.destroy$))
.subscribe();
};
TuiInputTagComponent.prototype.updateValue = function (value) {
var seen = new Set();
_super.prototype.updateValue.call(this, value
.reverse()
.filter(function (item) { return !!item && !seen.has(item) && seen.add(item); })
.reverse());
};
TuiInputTagComponent.prototype.updateSearch = function (value) {
if (this.focusableElement) {
this.focusableElement.nativeElement.value = value;
}
this.search = value;
this.searchChange.emit(value);
};
TuiInputTagComponent.prototype.shouldScroll = function (_a) {
var scrollWidth = _a.scrollWidth, offsetWidth = _a.offsetWidth;
return scrollWidth > offsetWidth;
};
TuiInputTagComponent.prototype.addTag = function () {
var inputValue = this.search.trim();
if (!inputValue || this.disabledItemHandler(inputValue)) {
return;
}
this.updateSearch('');
this.updateValue(this.value.concat(inputValue));
};
TuiInputTagComponent.prototype.deleteLastEnabledItem = function () {
for (var index = this.value.length - 1; index >= 0; index--) {
if (!this.disabledItemHandler(this.value[index])) {
this.updateValue(__spread(this.value.slice(0, index), this.value.slice(index + 1, this.value.length)));
break;
}
}
};
TuiInputTagComponent.prototype.focusInput = function (preventScroll) {
if (preventScroll === void 0) { preventScroll = false; }
if (this.nativeFocusableElement) {
cdk.setNativeFocused(this.nativeFocusableElement, true, preventScroll);
}
};
var TuiInputTagComponent_1;
TuiInputTagComponent.ctorParameters = function () { return [
{ type: forms.NgControl, decorators: [{ type: core.Optional }, { type: core.Self }, { type: core.Inject, args: [forms.NgControl,] }] },
{ type: core.ChangeDetectorRef, decorators: [{ type: core.Inject, args: [core.ChangeDetectorRef,] }] },
{ type: cdk.TuiScrollService, decorators: [{ type: core.Inject, args: [cdk.TuiScrollService,] }] },
{ type: core.ElementRef, decorators: [{ type: core.Inject, args: [core.ElementRef,] }] },
{ type: String, decorators: [{ type: core.Inject, args: [core$1.TUI_TEXTFIELD_APPEARANCE,] }] },
{ type: core$1.TuiModeDirective, decorators: [{ type: core.Optional }, { type: core.Inject, args: [core$1.TuiModeDirective,] }] },
{ type: undefined, decorators: [{ type: core.Inject, args: [tokens.TUI_TAG_STATUS,] }] },
{ type: core$1.TuiHintControllerDirective, decorators: [{ type: core.Inject, args: [core$1.TUI_HINT_WATCHED_CONTROLLER,] }] },
{ type: core$1.TuiTextfieldController, decorators: [{ type: core.Inject, args: [core$1.TUI_TEXTIFELD_WATCHED_CONTROLLER,] }] }
]; };
__decorate([
core.Input(),
cdk.tuiDefaultProp()
], TuiInputTagComponent.prototype, "allowSpaces", void 0);
__decorate([
core.Input(),
cdk.tuiDefaultProp()
], TuiInputTagComponent.prototype, "icon", void 0);
__decorate([
core.Input(),
cdk.tuiDefaultProp()
], TuiInputTagComponent.prototype, "iconAlign", void 0);
__decorate([
core.Input(),
cdk.tuiDefaultProp()
], TuiInputTagComponent.prototype, "search", void 0);
__decorate([
core.Input(),
cdk.tuiDefaultProp()
], TuiInputTagComponent.prototype, "editable", void 0);
__decorate([
core.Input(),
cdk.tuiDefaultProp()
], TuiInputTagComponent.prototype, "tagValidator", void 0);
__decorate([
core.Input(),
core.HostBinding('class._expandable'),
cdk.tuiDefaultProp()
], TuiInputTagComponent.prototype, "expandable", void 0);
__decorate([
core.Input(),
cdk.tuiDefaultProp()
], TuiInputTagComponent.prototype, "inputHidden", void 0);
__decorate([
core.Input(),
cdk.tuiDefaultProp()
], TuiInputTagComponent.prototype, "disabledItemHandler", void 0);
__decorate([
core.Input('pseudoFocused')
], TuiInputTagComponent.prototype, "pseudoFocusedSetter", null);
__decorate([
core.Output()
], TuiInputTagComponent.prototype, "searchChange", void 0);
__decorate([
core.ViewChild(core$1.TuiScrollbarComponent)
], TuiInputTagComponent.prototype, "scrollerSetter", null);
__decorate([
core.ContentChild(core$1.TuiDataListDirective, { read: core.TemplateRef })
], TuiInputTagComponent.prototype, "datalist", void 0);
__decorate([
core.ViewChild('errorIcon')
], TuiInputTagComponent.prototype, "errorIconTemplate", void 0);
__decorate([
core.ViewChild(core$1.TuiHostedDropdownComponent)
], TuiInputTagComponent.prototype, "dropdown", void 0);
__decorate([
core.ViewChild('focusableElement')
], TuiInputTagComponent.prototype, "focusableElement", void 0);
__decorate([
core.ViewChild('tagsContainer')
], TuiInputTagComponent.prototype, "tagsContainer", void 0);
__decorate([
core.ViewChildren('tag', { read: core.ElementRef })
], TuiInputTagComponent.prototype, "tags", void 0);
__decorate([
core.ViewChild('cleaner', { read: core.ElementRef })
], TuiInputTagComponent.prototype, "cleanerSvg", void 0);
__decorate([
core.ViewChild(core$1.TuiScrollbarComponent, { read: core.ElementRef })
], TuiInputTagComponent.prototype, "scrollBar", void 0);
__decorate([
core.HostBinding('attr.data-tui-host-size')
], TuiInputTagComponent.prototype, "size", null);
__decorate([
core.HostBinding('class._label-outside')
], TuiInputTagComponent.prototype, "labelOutside", null);
TuiInputTagComponent = TuiInputTagComponent_1 = __decorate([
core.Component({
selector: 'tui-input-tag',
changeDetection: core.ChangeDetectionStrategy.OnPush,
template: "<!-- TODO: repair -->\n<tui-hosted-dropdown\n class=\"hosted\"\n [content]=\"datalist || ''\"\n [(open)]=\"open\"\n (tuiActiveZoneChange)=\"onActiveZone($event)\"\n>\n <tui-wrapper\n [appearance]=\"appearance\"\n [readOnly]=\"readOnly\"\n [focused]=\"computedFocused\"\n [hovered]=\"computedHovered\"\n [disabled]=\"computedDisabled\"\n [invalid]=\"computedInvalid\"\n (tuiHoveredChange)=\"onHoveredChange($event)\"\n (mousedown)=\"onMouseDown($event)\"\n >\n <div class=\"content\">\n <div *ngIf=\"iconAlignLeft\" class=\"icons icons_left\">\n <tui-svg class=\"icon\" [src]=\"icon\"></tui-svg>\n </div>\n <div class=\"wrapper\">\n <div class=\"absolute-wrapper\">\n <div\n *ngIf=\"hasPlaceholder\"\n automation-id=\"tui-input-tag__placeholder\"\n class=\"placeholder\"\n [class.placeholder_raised]=\"placeholderRaised\"\n >\n <ng-content></ng-content>\n </div>\n <div\n *ngIf=\"hasExampleText\"\n automation-id=\"tui-input-tag__example-text\"\n class=\"value-decoration\"\n >\n <span class=\"example-text-inner\">\n {{controller.exampleText}}\n </span>\n </div>\n </div>\n <tui-scrollbar\n *ngIf=\"!expandable; else items\"\n class=\"scrollbar\"\n [hidden]=\"true\"\n >\n <ng-container *ngTemplateOutlet=\"items\"></ng-container>\n </tui-scrollbar>\n <ng-template #items>\n <div #tagsContainer class=\"tags\">\n <ng-container\n *ngIf=\"controller.labelOutside; else text\"\n >\n <tui-tag\n *ngFor=\"let item of value; index as index\"\n #tag\n class=\"tag\"\n automation-id=\"tui-input-tag__tag\"\n [status]=\"status\"\n [leftContent]=\"getLeftContent(item)\"\n [allowSpaces]=\"allowSpaces\"\n [tuiFocusable]=\"false\"\n [disabled]=\"computedDisabled || disabledItemHandler(item)\"\n [editable]=\"editable && !readOnly\"\n [hoverable]=\"!readOnly\"\n [removable]=\"!readOnly\"\n [maxLength]=\"controller.maxLength\"\n [size]=\"controller.size\"\n [value]=\"item.toString()\"\n (edited)=\"onTagEdited($event, item)\"\n (keydown.arrowLeft.prevent)=\"onTagKeyDownArrowLeft(index)\"\n (keydown.arrowRight.prevent)=\"onTagKeyDownArrowRight(index)\"\n ></tui-tag>\n </ng-container>\n <ng-template #text>\n <span\n *ngFor=\"let item of value\"\n class=\"text\"\n [class.text_disabled]=\"disabledItemHandler(item)\"\n [class.text_error]=\"!tagValidator(item)\"\n >{{item}}</span\n >\n </ng-template>\n <div\n class=\"input-wrapper\"\n [class.input-wrapper_collapsed]=\"computedDisabled || readOnly || inputHidden\"\n >\n <div class=\"ghost\">{{search}}</div>\n <input\n #focusableElement\n type=\"text\"\n automation-id=\"tui-input-tag__native\"\n class=\"native\"\n [class.native_hidden]=\"inputHidden\"\n [attr.maxLength]=\"controller.maxLength\"\n [id]=\"id\"\n [disabled]=\"computedDisabled\"\n [readOnly]=\"readOnly || inputHidden\"\n [tuiFocusable]=\"computedFocusable\"\n [ngModel]=\"search\"\n (ngModelChange)=\"onInput($event)\"\n (keydown.arrowLeft)=\"onFieldKeyDownArrowLeft($event)\"\n (keydown.backspace)=\"onFieldKeyDownBackspace($event)\"\n (keydown.enter.prevent)=\"onFieldKeyDownEnter()\"\n />\n </div>\n </div>\n </ng-template>\n </div>\n <div *ngIf=\"hasRightIcons\" class=\"icons icons_right\">\n <tui-svg\n *ngIf=\"hasCleaner\"\n #cleaner\n class=\"cleaner\"\n automation-id=\"tui-input-tag__cleaner\"\n src=\"tuiIconCloseLarge\"\n (click.stop)=\"onCleanerClick()\"\n ></tui-svg>\n <tui-tooltip\n *ngIf=\"hasTooltip\"\n automation-id=\"tui-input-tag__tooltip\"\n class=\"tooltip\"\n describeId=\"placeholer_until_accesibility_is_added\"\n [direction]=\"hintController.direction\"\n [mode]=\"hintController.mode\"\n [content]=\"hintController.content\"\n ></tui-tooltip>\n <tui-svg\n *ngIf=\"iconAlignRight\"\n class=\"icon\"\n [src]=\"icon\"\n ></tui-svg>\n </div>\n </div>\n <ng-template #errorIcon>\n <tui-svg class=\"error-icon\" src=\"tuiIconAttention\"></tui-svg>\n </ng-template>\n </tui-wrapper>\n</tui-hosted-dropdown>\n",
providers: [
{
provide: cdk.TUI_FOCUSABLE_ITEM_ACCESSOR,
useExisting: core.forwardRef(function () { return TuiInputTagComponent_1; }),
},
{
provide: core$1.TUI_DATA_LIST_HOST,
useExisting: core.forwardRef(function () { return TuiInputTagComponent_1; }),
},
providers.FIXED_DROPDOWN_CONTROLLER_PROVIDER,
core$1.TEXTFIELD_CONTROLLER_PROVIDER,
core$1.HINT_CONTROLLER_PROVIDER,
],
styles: [":host{font:var(--tui-font-text-s);color:var(--tui-text-01);position:relative;display:block;border-radius:var(--tui-radius-m)}:host[data-tui-host-size='s']{height:var(--tui-height-s);min-height:var(--tui-height-s);max-height:var(--tui-height-s)}:host[data-tui-host-size='m']{height:var(--tui-height-m);min-height:var(--tui-height-m);max-height:var(--tui-height-m)}:host[data-tui-host-size='l']{height:var(--tui-height-l);min-height:var(--tui-height-l);max-height:var(--tui-height-l);font-size:15px}.input{font:var(--tui-font-text-s);color:var(--tui-text-01);padding:0 12px;border:0;border-radius:inherit;background:0 0;font-size:inherit;line-height:inherit;font-weight:inherit;color:inherit;caret-color:currentColor;outline:0;-webkit-appearance:none;-moz-appearance:none;appearance:none;word-break:keep-all;-webkit-text-fill-color:currentColor;position:absolute;top:0;left:0;width:100%;height:100%;box-sizing:border-box;white-space:nowrap;overflow:hidden;text-transform:inherit}.input:-webkit-autofill,.input:-webkit-autofill:focus,.input:-webkit-autofill:hover{border-radius:inherit;-webkit-text-fill-color:inherit!important;color:inherit!important;background-color:transparent!important;-webkit-box-shadow:0 0 0 1000px var(--tui-autofill) inset!important}:host[data-tui-host-size='s'] .input{padding:0 8px 0 12px}:host[data-tui-host-size='l'] .input{padding:0 16px}:host._disabled .input{pointer-events:none}:host._right-aligned .input{text-align:right}:host[data-tui-host-size='l']:not(._label-outside) .input{padding-top:20px}:host[data-tui-host-size='l']:not(._label-outside) .input:-webkit-autofill+.content .placeholder{width:114%;transform:translateY(-10px) scale(.87)}:host[data-tui-host-size='m']:not(._label-outside) .input{padding-top:18px}:host[data-tui-host-size='m']:not(._label-outside) .input:-webkit-autofill+.content .placeholder{width:118%;transform:translateY(-8px) scale(.85)}.ghost{visibility:hidden;white-space:pre;text-overflow:clip}.filler{vertical-align:middle}.content{display:flex;height:100%;width:100%;box-sizing:border-box;align-items:center;overflow:hidden}:host[data-tui-host-size='s'] .content{padding-right:8px}:host[data-tui-host-size='l'] .content{padding-left:16px}.wrapper{flex:1;min-width:0}.value-decoration{display:flex;align-items:center;height:20px;margin:-20px 0;padding:10px 0;box-sizing:content-box;color:var(--tui-text-03);letter-spacing:normal;text-transform:none}:host._right-aligned .value-decoration{flex-direction:row-reverse;margin-right:-4px}:host[data-tui-host-size='m']._label-outside .value-decoration{margin-top:-19px}:host[data-mode=onDark] .value-decoration{color:var(--tui-text-03-night)}.value-decoration-inner{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}.postfix{transition-property:color;transition-duration:.3s;transition-timing-function:ease-in-out;color:var(--tui-text-01)}.postfix_shifted{margin-left:.5ch}:host[data-mode=onDark] .postfix{color:var(--tui-text-01-night)}.placeholder{transition-property:transform,min-width,color,letter-spacing;transition-duration:.3s;transition-timing-function:ease-in-out;font:var(--tui-font-text-s);color:var(--tui-text-01);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;width:100%;height:20px;font-size:13px;box-sizing:border-box;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;pointer-events:none;color:var(--tui-text-02);transform-origin:left;letter-spacing:normal;text-transform:none}.placeholder_raised{width:114%;transform:translateY(-10px) scale(.87)}:host[data-tui-host-size='m'] .placeholder_raised{width:118%;transform:translateY(-8px) scale(.85);letter-spacing:.4px}:host._invalid:not(._focused) .placeholder_raised,:host._invalid:not(._focused)._hovered .placeholder_raised{color:var(--tui-error-fill)}:host[data-mode=onDark]._invalid:not(._focused) .placeholder_raised,:host[data-mode=onDark]._invalid:not(._focused)._hovered .placeholder_raised{color:var(--tui-error-fill-night)}:host._focused .placeholder,:host[data-tui-host-size='l']._focused._label-outside .placeholder,:host[data-tui-host-size='m']._focused._label-outside .placeholder{color:var(--tui-text-03)}:host[data-tui-host-size='l'] .placeholder{font-size:15px}:host[data-tui-host-size='l']._focused:not(._label-outside) .placeholder,:host[data-tui-host-size='m']._focused:not(._label-outside) .placeholder{color:var(--tui-text-01)}:host[data-mode=onDark] .placeholder{color:var(--tui-text-02-night)}:host[data-tui-host-size='l'][data-mode=onDark]._focused:not(._label-outside) .placeholder,:host[data-tui-host-size='m'][data-mode=onDark]._focused:not(._label-outside) .placeholder{color:var(--tui-text-01-night)}:host[data-mode=onDark]._focused .placeholder,:host[data-tui-host-size='l'][data-mode=onDark]._focused._label-outside .placeholder,:host[data-tui-host-size='m'][data-mode=onDark]._focused._label-outside .placeholder{color:var(--tui-text-02-night)}.cleaner{transition-duration:.3s;transition-timing-function:ease-in-out;display:flex;width:24px;height:24px;align-items:center;justify-content:center;color:var(--tui-text-03);position:relative;box-sizing:border-box;cursor:pointer;transition-property:color,transform}.cleaner:hover{color:var(--tui-text-02)}:host._disabled .cleaner,:host._readonly .cleaner{pointer-events:none}:host[data-mode=onDark] .cleaner{color:var(--tui-text-03-night)}:host[data-mode=onDark] .cleaner:hover{color:var(--tui-text-01-night)}.icon{display:flex;width:24px;height:24px;align-items:center;justify-content:center;color:var(--tui-text-03)}:host[data-mode=onDark] .icon{color:var(--tui-text-03-night)}.icon_left{margin:0 8px 0 -4px}:host[data-tui-host-size='s'] .icon_left{margin-right:4px}:host{cursor:text}:host._expandable{height:auto;max-height:none}:host._disabled{pointer-events:none}:host._readonly{cursor:default}.hosted{display:block;border-radius:inherit}.scrollbar{margin:0 -4px;padding:0 4px}.tags{display:flex;align-items:center;box-sizing:border-box}:host._expandable .tags{flex-wrap:wrap;white-space:normal}:host._readonly .tags{pointer-events:none}:host[data-tui-host-size='m'] .tags{min-height:var(--tui-height-m);padding:8px 4px 8px 0}:host[data-tui-host-size='l'] .tags{min-height:var(--tui-height-l);padding:10px 4px 10px 0}:host[data-tui-host-size='m']:not(._label-outside) .tags{padding:19px 16px 0 0}:host[data-tui-host-size='l']:not(._label-outside) .tags{padding:27px 16px 9px 0}.content{padding:0;align-items:flex-start}:host[data-tui-host-size='m'] .content{padding-left:12px}.icons{display:flex;align-items:center;padding:0 12px}.icons_left{padding:0;margin-right:8px;margin-left:-4px}:host._expandable .icons_right{margin-left:-10px}:host[data-tui-host-size='m'] .icons{height:var(--tui-height-m)}:host[data-tui-host-size='l'] .icons{height:var(--tui-height-l)}.absolute-wrapper{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;flex-direction:column;justify-content:center}:host[data-tui-host-size='m'] .absolute-wrapper{height:var(--tui-height-m)}:host[data-tui-host-size='l'] .absolute-wrapper{height:var(--tui-height-l)}.wrapper{position:relative;padding:0}.tag{margin:2px 8px 2px -4px;max-width:100%;flex-shrink:0}.text:after{content:',\\00a0'}.text_disabled{color:var(--tui-text-03)}.text_error{color:var(--tui-negative)}:host:not(._expandable) .text{white-space:nowrap}:host:not(:focus-within) .text:last-of-type:after{content:''}.input-wrapper{position:relative;flex:1;max-width:100%;min-height:28px}.input-wrapper_collapsed{flex:0;margin-left:-8px}:host[data-tui-host-size='l'] .input-wrapper{min-height:36px}:host:not(._label-outside) .input-wrapper{min-height:20px}.ghost{min-width:2px}:host:not(._expandable) .ghost{min-width:32px}.native{border:0;border-radius:inherit;background:0 0;font-size:inherit;line-height:inherit;font-weight:inherit;color:inherit;caret-color:currentColor;outline:0;-webkit-appearance:none;-moz-appearance:none;appearance:none;word-break:keep-all;-webkit-text-fill-color:currentColor;position:absolute;top:0;left:0;width:100%;height:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;box-sizing:border-box;padding:0;cursor:inherit}.native:-webkit-autofill,.native:-webkit-autofill:focus,.native:-webkit-autofill:hover{border-radius:inherit;-webkit-text-fill-color:inherit!important;color:inherit!important;background-color:transparent!important;-webkit-box-shadow:0 0 0 1000px var(--tui-autofill) inset!important}.native_hidden{opacity:0;text-indent:-10em}.error-icon{display:block;color:var(--tui-error-fill);width:16px;height:16px}"]
}),
__param(0, core.Optional()),
__param(0, core.Self()),
__param(0, core.Inject(forms.NgControl)),
__param(1, core.Inject(core.ChangeDetectorRef)),
__param(2, core.Inject(cdk.TuiScrollService)),
__param(3, core.Inject(core.ElementRef)),
__param(4, core.Inject(core$1.TUI_TEXTFIELD_APPEARANCE)),
__param(5, core.Optional()),
__param(5, core.Inject(core$1.TuiModeDirective)),
__param(6, core.Inject(tokens.TUI_TAG_STATUS)),
__param(7, core.Inject(core$1.TUI_HINT_WATCHED_CONTROLLER)),
__param(8, core.Inject(core$1.TUI_TEXTIFELD_WATCHED_CONTROLLER))
], TuiInputTagComponent);
return TuiInputTagComponent;
}(cdk.AbstractTuiMultipleControl));
var TuiInputTagModule = /** @class */ (function () {
function TuiInputTagModule() {
}
TuiInputTagModule = __decorate([
core.NgModule({
imports: [
common.CommonModule,
forms.FormsModule,
ngPolymorpheus.PolymorpheusModule,
cdk.TuiFocusableModule,
cdk.TuiHoveredModule,
cdk.TuiActiveZoneModule,
core$1.TuiSvgModule,
core$1.TuiScrollbarModule,
core$1.TuiTooltipModule,
core$1.TuiHostedDropdownModule,
tag.TuiTagModule,
core$1.TuiWrapperModule,
],
providers: [cdk.TuiScrollService],
declarations: [TuiInputTagComponent],
exports: [TuiInputTagComponent],
})
], TuiInputTagModule);
return TuiInputTagModule;
}());
exports.TuiInputTagComponent = TuiInputTagComponent;
exports.TuiInputTagModule = TuiInputTagModule;
Object.defineProperty(exports, '__esModule', { value: true });
})));
//# sourceMappingURL=taiga-ui-kit-components-input-tag.umd.js.map