@taiga-ui/kit
Version:
Taiga UI Angular main components kit
432 lines (427 loc) • 31.3 kB
JavaScript
import { __decorate, __param } from 'tslib';
import { EventEmitter, Optional, Self, Inject, ChangeDetectorRef, ElementRef, Input, HostBinding, Output, ViewChild, ContentChild, TemplateRef, ViewChildren, Component, ChangeDetectionStrategy, forwardRef, NgModule } from '@angular/core';
import { NgControl, FormsModule } from '@angular/forms';
import { AbstractTuiMultipleControl, ALWAYS_TRUE_HANDLER, ALWAYS_FALSE_HANDLER, EMPTY_QUERY, isNativeFocusedIn, getActualTarget, setNativeFocused, typedFromEvent, preventDefault, TuiScrollService, tuiDefaultProp, TUI_FOCUSABLE_ITEM_ACCESSOR, TuiFocusableModule, TuiHoveredModule, TuiActiveZoneModule } from '@taiga-ui/cdk';
import { TUI_TEXTFIELD_APPEARANCE, TuiModeDirective, TuiHintControllerDirective, TUI_HINT_WATCHED_CONTROLLER, TuiTextfieldController, TUI_TEXTIFELD_WATCHED_CONTROLLER, TuiScrollbarComponent, TuiDataListDirective, TuiHostedDropdownComponent, TUI_DATA_LIST_HOST, TEXTFIELD_CONTROLLER_PROVIDER, HINT_CONTROLLER_PROVIDER, TuiSvgModule, TuiScrollbarModule, TuiTooltipModule, TuiHostedDropdownModule, TuiWrapperModule } from '@taiga-ui/core';
import { ALLOWED_SPACE_REGEXP, TuiTagModule } from '@taiga-ui/kit/components/tag';
import { FIXED_DROPDOWN_CONTROLLER_PROVIDER } from '@taiga-ui/kit/providers';
import { TUI_TAG_STATUS } from '@taiga-ui/kit/tokens';
import { Subject, merge } from 'rxjs';
import { filter, map, mapTo, switchMap, takeUntil } from 'rxjs/operators';
import { CommonModule } from '@angular/common';
import { PolymorpheusModule } from '@tinkoff/ng-polymorpheus';
var TuiInputTagComponent_1;
const EVENT_Y_TO_X_COEFFICENT = 3;
let TuiInputTagComponent = TuiInputTagComponent_1 = class TuiInputTagComponent extends AbstractTuiMultipleControl {
constructor(control, changeDetectorRef, tuiScrollService, elementRef, appearance, modeDirective, tagStatus, hintController, controller) {
super(control, changeDetectorRef);
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 = ALWAYS_TRUE_HANDLER;
this.expandable = true;
this.inputHidden = false;
this.disabledItemHandler = ALWAYS_FALSE_HANDLER;
this.searchChange = new EventEmitter();
this.open = false;
this.tags = EMPTY_QUERY;
this.scrollToStart$ = new Subject();
this.scrollToEnd$ = new Subject();
}
set pseudoFocusedSetter(value) {
if (!value && !this.focused) {
this.scrollToStart$.next();
}
this.pseudoFocused = value;
}
set scrollerSetter(scroller) {
this.initScrollerSubscrition(scroller);
}
get nativeFocusableElement() {
return !this.focusableElement || this.computedDisabled
? null
: this.focusableElement.nativeElement;
}
get focused() {
return (isNativeFocusedIn(this.elementRef.nativeElement) ||
(!!this.dropdown && this.dropdown.focused));
}
get size() {
return this.controller.size;
}
get labelOutside() {
return this.controller.labelOutside;
}
get hasCleaner() {
return (this.controller.cleaner && this.hasValue && !this.disabled && !this.readOnly);
}
get hasNativeValue() {
return !!this.search;
}
get hasValue() {
return !!this.value.length || this.hasNativeValue;
}
get hasPlaceholder() {
return !this.labelOutside || (!this.hasValue && !this.hasExampleText);
}
get placeholderRaised() {
return (!this.labelOutside &&
((this.computedFocused && !this.readOnly) || this.hasValue));
}
get hasExampleText() {
return (!!this.controller.exampleText &&
this.computedFocused &&
!this.hasValue &&
!this.readOnly);
}
get hasTooltip() {
return !!this.hintController.content && !this.disabled;
}
get iconAlignLeft() {
return !!this.icon && this.iconAlign === 'left';
}
get iconAlignRight() {
return !!this.icon && this.iconAlign === 'right';
}
get hasRightIcons() {
return this.hasCleaner || this.hasTooltip || this.iconAlignRight;
}
get status() {
return this.modeDirective && this.modeDirective.mode
? "default" /* Default */
: this.tagStatus;
}
getLeftContent(tag) {
return !this.tagValidator(tag) && this.errorIconTemplate
? this.errorIconTemplate
: null;
}
onCleanerClick() {
this.updateSearch('');
this.clear();
this.focusInput();
}
onActiveZone(active) {
this.updateFocused(active);
if (active) {
return;
}
this.open = false;
this.addTag();
if (!this.pseudoFocused) {
this.scrollToStart$.next();
}
}
onMouseDown(event) {
const actualTarget = 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();
}
onFieldKeyDownBackspace(event) {
if (!this.labelOutside && !this.hasNativeValue && this.value.length) {
this.deleteLastEnabledItem();
}
else {
this.onFieldKeyDownArrowLeft(event);
}
}
onFieldKeyDownArrowLeft(event) {
if (!this.labelOutside || this.hasNativeValue || !this.value.length) {
return;
}
event.preventDefault();
setNativeFocused(this.tags.last.nativeElement);
}
onFieldKeyDownEnter() {
this.addTag();
this.scrollToEnd$.next();
}
onTagKeyDownArrowLeft(currentIndex) {
if (currentIndex <= 0) {
return;
}
this.onScrollKeyDown(currentIndex, -1);
}
onTagKeyDownArrowRight(currentIndex) {
if (currentIndex === this.value.length - 1) {
this.focusInput();
return;
}
this.onScrollKeyDown(currentIndex, 1);
}
onTagEdited(value, editedTag) {
this.focusInput();
this.updateValue(this.value
.map(tag => tag !== editedTag
? tag
: value
.split(',')
.map(tag => tag.trim())
.filter(Boolean))
.reduce((result, item) => result.concat(item), []));
}
handleOption(item) {
this.focusInput();
this.updateSearch('');
this.updateValue(this.value.concat(item));
this.open = false;
this.scrollToEnd$.next();
}
onInput(value) {
const array = this.allowSpaces
? value.split(',')
: value.split(ALLOWED_SPACE_REGEXP);
const tags = array
.map(item => item.trim())
.filter((item, index, { length }) => item.length > 0 && index !== length - 1);
const validated = tags.filter(tag => !this.disabledItemHandler(tag));
if (array.length > 1) {
this.updateSearch(array[array.length - 1].trim());
this.updateValue([...this.value, ...validated]);
}
else {
this.updateSearch(value);
}
this.open = this.hasNativeValue;
}
onHoveredChange(hovered) {
this.updateHovered(hovered);
}
setDisabledState() {
super.setDisabledState();
this.open = false;
}
onScrollKeyDown(currentIndex, flag) {
const tag = this.tags.find((_item, index) => index === currentIndex + flag);
if (!tag || !this.scrollBar) {
return;
}
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;
}
}
initScrollerSubscrition(scroller) {
if (!scroller || !scroller.browserScrollRef) {
return;
}
const { nativeElement } = scroller.browserScrollRef;
const wheel$ = typedFromEvent(nativeElement, 'wheel', { passive: false }).pipe(filter(event => event.deltaX === 0 && this.shouldScroll(nativeElement)), preventDefault(), map(({ deltaY }) => Math.max(nativeElement.scrollLeft + deltaY * EVENT_Y_TO_X_COEFFICENT, 0)));
const start$ = this.scrollToStart$.pipe(mapTo(0));
const end$ = this.scrollToEnd$.pipe(map(() => nativeElement.scrollWidth));
merge(wheel$, start$, end$)
.pipe(switchMap(left => this.tuiScrollService.scroll$(nativeElement, 0, left)), takeUntil(this.destroy$))
.subscribe();
}
updateValue(value) {
const seen = new Set();
super.updateValue(value
.reverse()
.filter(item => !!item && !seen.has(item) && seen.add(item))
.reverse());
}
updateSearch(value) {
if (this.focusableElement) {
this.focusableElement.nativeElement.value = value;
}
this.search = value;
this.searchChange.emit(value);
}
shouldScroll({ scrollWidth, offsetWidth }) {
return scrollWidth > offsetWidth;
}
addTag() {
const inputValue = this.search.trim();
if (!inputValue || this.disabledItemHandler(inputValue)) {
return;
}
this.updateSearch('');
this.updateValue(this.value.concat(inputValue));
}
deleteLastEnabledItem() {
for (let index = this.value.length - 1; index >= 0; index--) {
if (!this.disabledItemHandler(this.value[index])) {
this.updateValue([
...this.value.slice(0, index),
...this.value.slice(index + 1, this.value.length),
]);
break;
}
}
}
focusInput(preventScroll = false) {
if (this.nativeFocusableElement) {
setNativeFocused(this.nativeFocusableElement, true, preventScroll);
}
}
};
TuiInputTagComponent.ctorParameters = () => [
{ type: NgControl, decorators: [{ type: Optional }, { type: Self }, { type: Inject, args: [NgControl,] }] },
{ type: ChangeDetectorRef, decorators: [{ type: Inject, args: [ChangeDetectorRef,] }] },
{ type: TuiScrollService, decorators: [{ type: Inject, args: [TuiScrollService,] }] },
{ type: ElementRef, decorators: [{ type: Inject, args: [ElementRef,] }] },
{ type: String, decorators: [{ type: Inject, args: [TUI_TEXTFIELD_APPEARANCE,] }] },
{ type: TuiModeDirective, decorators: [{ type: Optional }, { type: Inject, args: [TuiModeDirective,] }] },
{ type: undefined, decorators: [{ type: Inject, args: [TUI_TAG_STATUS,] }] },
{ type: TuiHintControllerDirective, decorators: [{ type: Inject, args: [TUI_HINT_WATCHED_CONTROLLER,] }] },
{ type: TuiTextfieldController, decorators: [{ type: Inject, args: [TUI_TEXTIFELD_WATCHED_CONTROLLER,] }] }
];
__decorate([
Input(),
tuiDefaultProp()
], TuiInputTagComponent.prototype, "allowSpaces", void 0);
__decorate([
Input(),
tuiDefaultProp()
], TuiInputTagComponent.prototype, "icon", void 0);
__decorate([
Input(),
tuiDefaultProp()
], TuiInputTagComponent.prototype, "iconAlign", void 0);
__decorate([
Input(),
tuiDefaultProp()
], TuiInputTagComponent.prototype, "search", void 0);
__decorate([
Input(),
tuiDefaultProp()
], TuiInputTagComponent.prototype, "editable", void 0);
__decorate([
Input(),
tuiDefaultProp()
], TuiInputTagComponent.prototype, "tagValidator", void 0);
__decorate([
Input(),
HostBinding('class._expandable'),
tuiDefaultProp()
], TuiInputTagComponent.prototype, "expandable", void 0);
__decorate([
Input(),
tuiDefaultProp()
], TuiInputTagComponent.prototype, "inputHidden", void 0);
__decorate([
Input(),
tuiDefaultProp()
], TuiInputTagComponent.prototype, "disabledItemHandler", void 0);
__decorate([
Input('pseudoFocused')
], TuiInputTagComponent.prototype, "pseudoFocusedSetter", null);
__decorate([
Output()
], TuiInputTagComponent.prototype, "searchChange", void 0);
__decorate([
ViewChild(TuiScrollbarComponent)
], TuiInputTagComponent.prototype, "scrollerSetter", null);
__decorate([
ContentChild(TuiDataListDirective, { read: TemplateRef })
], TuiInputTagComponent.prototype, "datalist", void 0);
__decorate([
ViewChild('errorIcon')
], TuiInputTagComponent.prototype, "errorIconTemplate", void 0);
__decorate([
ViewChild(TuiHostedDropdownComponent)
], TuiInputTagComponent.prototype, "dropdown", void 0);
__decorate([
ViewChild('focusableElement')
], TuiInputTagComponent.prototype, "focusableElement", void 0);
__decorate([
ViewChild('tagsContainer')
], TuiInputTagComponent.prototype, "tagsContainer", void 0);
__decorate([
ViewChildren('tag', { read: ElementRef })
], TuiInputTagComponent.prototype, "tags", void 0);
__decorate([
ViewChild('cleaner', { read: ElementRef })
], TuiInputTagComponent.prototype, "cleanerSvg", void 0);
__decorate([
ViewChild(TuiScrollbarComponent, { read: ElementRef })
], TuiInputTagComponent.prototype, "scrollBar", void 0);
__decorate([
HostBinding('attr.data-tui-host-size')
], TuiInputTagComponent.prototype, "size", null);
__decorate([
HostBinding('class._label-outside')
], TuiInputTagComponent.prototype, "labelOutside", null);
TuiInputTagComponent = TuiInputTagComponent_1 = __decorate([
Component({
selector: 'tui-input-tag',
changeDetection: 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: TUI_FOCUSABLE_ITEM_ACCESSOR,
useExisting: forwardRef(() => TuiInputTagComponent_1),
},
{
provide: TUI_DATA_LIST_HOST,
useExisting: forwardRef(() => TuiInputTagComponent_1),
},
FIXED_DROPDOWN_CONTROLLER_PROVIDER,
TEXTFIELD_CONTROLLER_PROVIDER,
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, Optional()),
__param(0, Self()),
__param(0, Inject(NgControl)),
__param(1, Inject(ChangeDetectorRef)),
__param(2, Inject(TuiScrollService)),
__param(3, Inject(ElementRef)),
__param(4, Inject(TUI_TEXTFIELD_APPEARANCE)),
__param(5, Optional()),
__param(5, Inject(TuiModeDirective)),
__param(6, Inject(TUI_TAG_STATUS)),
__param(7, Inject(TUI_HINT_WATCHED_CONTROLLER)),
__param(8, Inject(TUI_TEXTIFELD_WATCHED_CONTROLLER))
], TuiInputTagComponent);
let TuiInputTagModule = class TuiInputTagModule {
};
TuiInputTagModule = __decorate([
NgModule({
imports: [
CommonModule,
FormsModule,
PolymorpheusModule,
TuiFocusableModule,
TuiHoveredModule,
TuiActiveZoneModule,
TuiSvgModule,
TuiScrollbarModule,
TuiTooltipModule,
TuiHostedDropdownModule,
TuiTagModule,
TuiWrapperModule,
],
providers: [TuiScrollService],
declarations: [TuiInputTagComponent],
exports: [TuiInputTagComponent],
})
], TuiInputTagModule);
/**
* Generated bundle index. Do not edit.
*/
export { TuiInputTagComponent, TuiInputTagModule };
//# sourceMappingURL=taiga-ui-kit-components-input-tag.js.map