@taiga-ui/kit 3.29.1 → 3.29.2-dev.main-1674f69
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/bundles/taiga-ui-kit-components-input-tag.umd.js +25 -49
- package/bundles/taiga-ui-kit-components-input-tag.umd.js.map +1 -1
- package/bundles/taiga-ui-kit-components-pdf-viewer.umd.js +8 -11
- package/bundles/taiga-ui-kit-components-pdf-viewer.umd.js.map +1 -1
- package/bundles/taiga-ui-kit-components-push.umd.js +10 -15
- package/bundles/taiga-ui-kit-components-push.umd.js.map +1 -1
- package/bundles/taiga-ui-kit-components-radio.umd.js +2 -3
- package/bundles/taiga-ui-kit-components-radio.umd.js.map +1 -1
- package/bundles/taiga-ui-kit-components-tabs.umd.js +2 -2
- package/bundles/taiga-ui-kit-components-tabs.umd.js.map +1 -1
- package/bundles/taiga-ui-kit-internal-primitive-calendar-range.umd.js +1 -1
- package/bundles/taiga-ui-kit-internal-primitive-calendar-range.umd.js.map +1 -1
- package/components/input-tag/input-tag.component.d.ts +5 -10
- package/components/pdf-viewer/pdf-viewer.component.d.ts +2 -9
- package/components/push/push-alert.component.d.ts +2 -9
- package/components/radio/radio.component.d.ts +2 -9
- package/esm2015/components/input-tag/input-tag.component.js +20 -39
- package/esm2015/components/pdf-viewer/pdf-viewer.component.js +10 -13
- package/esm2015/components/push/push-alert.component.js +12 -17
- package/esm2015/components/radio/radio.component.js +3 -4
- package/esm2015/components/tabs/tab/tab.component.js +1 -1
- package/esm2015/components/tabs/tabs-with-more/tabs-with-more.component.js +1 -1
- package/esm2015/internal/primitive-calendar-range/primitive-calendar-range.component.js +2 -2
- package/fesm2015/taiga-ui-kit-components-input-tag.js +20 -39
- package/fesm2015/taiga-ui-kit-components-input-tag.js.map +1 -1
- package/fesm2015/taiga-ui-kit-components-pdf-viewer.js +9 -12
- package/fesm2015/taiga-ui-kit-components-pdf-viewer.js.map +1 -1
- package/fesm2015/taiga-ui-kit-components-push.js +11 -16
- package/fesm2015/taiga-ui-kit-components-push.js.map +1 -1
- package/fesm2015/taiga-ui-kit-components-radio.js +2 -3
- package/fesm2015/taiga-ui-kit-components-radio.js.map +1 -1
- package/fesm2015/taiga-ui-kit-components-tabs.js +2 -2
- package/fesm2015/taiga-ui-kit-components-tabs.js.map +1 -1
- package/fesm2015/taiga-ui-kit-internal-primitive-calendar-range.js +1 -1
- package/fesm2015/taiga-ui-kit-internal-primitive-calendar-range.js.map +1 -1
- package/package.json +4 -4
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
(function (global, factory) {
|
|
2
|
-
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/providers'), require('rxjs
|
|
3
|
-
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/providers', 'rxjs
|
|
4
|
-
(global = typeof globalThis !== 'undefined' ? globalThis : 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.i4, global.i1, global["taiga-ui"].kit.providers, global.rxjs
|
|
5
|
-
})(this, (function (exports, i0, i6, i4, i1, providers,
|
|
2
|
+
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/providers'), require('rxjs/operators'), require('@taiga-ui/kit/components/tag'), require('@angular/common'), require('@tinkoff/ng-polymorpheus'), require('rxjs')) :
|
|
3
|
+
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/providers', 'rxjs/operators', '@taiga-ui/kit/components/tag', '@angular/common', '@tinkoff/ng-polymorpheus', 'rxjs'], factory) :
|
|
4
|
+
(global = typeof globalThis !== 'undefined' ? globalThis : 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.i4, global.i1, global["taiga-ui"].kit.providers, global.rxjs.operators, global["taiga-ui"].kit.components.tag, global.ng.common, global.i5, global.rxjs));
|
|
5
|
+
})(this, (function (exports, i0, i6, i4, i1, providers, operators, i2, i3, i5, i7) { 'use strict';
|
|
6
6
|
|
|
7
7
|
function _interopNamespace(e) {
|
|
8
8
|
if (e && e.__esModule) return e;
|
|
@@ -26,10 +26,10 @@
|
|
|
26
26
|
var i6__namespace = /*#__PURE__*/_interopNamespace(i6);
|
|
27
27
|
var i4__namespace = /*#__PURE__*/_interopNamespace(i4);
|
|
28
28
|
var i1__namespace = /*#__PURE__*/_interopNamespace(i1);
|
|
29
|
-
var i7__namespace = /*#__PURE__*/_interopNamespace(i7);
|
|
30
29
|
var i2__namespace = /*#__PURE__*/_interopNamespace(i2);
|
|
31
30
|
var i3__namespace = /*#__PURE__*/_interopNamespace(i3);
|
|
32
31
|
var i5__namespace = /*#__PURE__*/_interopNamespace(i5);
|
|
32
|
+
var i7__namespace = /*#__PURE__*/_interopNamespace(i7);
|
|
33
33
|
|
|
34
34
|
/*! *****************************************************************************
|
|
35
35
|
Copyright (c) Microsoft Corporation.
|
|
@@ -367,7 +367,6 @@
|
|
|
367
367
|
};
|
|
368
368
|
}
|
|
369
369
|
|
|
370
|
-
var EVENT_Y_TO_X_COEFFICIENT = 3;
|
|
371
370
|
var TAG_SIZE_REM = {
|
|
372
371
|
s: 1.25,
|
|
373
372
|
m: 1.5,
|
|
@@ -381,9 +380,8 @@
|
|
|
381
380
|
var TAG_VERTICAL_SPACE_REM = 0.125;
|
|
382
381
|
var TuiInputTagComponent = /** @class */ (function (_super) {
|
|
383
382
|
__extends(TuiInputTagComponent, _super);
|
|
384
|
-
function TuiInputTagComponent(control, cdr,
|
|
383
|
+
function TuiInputTagComponent(control, cdr, el, modeDirective, mode$, hintOptions, controller, options, parentHostedDropdown) {
|
|
385
384
|
var _this = _super.call(this, control, cdr) || this;
|
|
386
|
-
_this.tuiScrollService = tuiScrollService;
|
|
387
385
|
_this.el = el;
|
|
388
386
|
_this.modeDirective = modeDirective;
|
|
389
387
|
_this.mode$ = mode$;
|
|
@@ -392,8 +390,6 @@
|
|
|
392
390
|
_this.options = options;
|
|
393
391
|
_this.parentHostedDropdown = parentHostedDropdown;
|
|
394
392
|
_this.tags = i4.EMPTY_QUERY;
|
|
395
|
-
_this.scrollToStart$ = new i7.Subject();
|
|
396
|
-
_this.scrollToEnd$ = new i7.Subject();
|
|
397
393
|
_this.separator = _this.options.separator;
|
|
398
394
|
_this.search = '';
|
|
399
395
|
_this.editable = true;
|
|
@@ -415,20 +411,13 @@
|
|
|
415
411
|
Object.defineProperty(TuiInputTagComponent.prototype, "pseudoFocusedSetter", {
|
|
416
412
|
set: function (value) {
|
|
417
413
|
if (!value && !this.focused) {
|
|
418
|
-
this.
|
|
414
|
+
this.scrollTo(0);
|
|
419
415
|
}
|
|
420
416
|
this.pseudoFocus = value;
|
|
421
417
|
},
|
|
422
418
|
enumerable: false,
|
|
423
419
|
configurable: true
|
|
424
420
|
});
|
|
425
|
-
Object.defineProperty(TuiInputTagComponent.prototype, "scrollerSetter", {
|
|
426
|
-
set: function (scroller) {
|
|
427
|
-
this.initScrollerSubscription(scroller);
|
|
428
|
-
},
|
|
429
|
-
enumerable: false,
|
|
430
|
-
configurable: true
|
|
431
|
-
});
|
|
432
421
|
Object.defineProperty(TuiInputTagComponent.prototype, "nativeFocusableElement", {
|
|
433
422
|
get: function () {
|
|
434
423
|
return !this.focusableElement || this.computedDisabled
|
|
@@ -595,7 +584,7 @@
|
|
|
595
584
|
this.addTag();
|
|
596
585
|
this.updateFocused(active);
|
|
597
586
|
if (!active && !this.computedFocused) {
|
|
598
|
-
this.
|
|
587
|
+
this.scrollTo(0);
|
|
599
588
|
}
|
|
600
589
|
};
|
|
601
590
|
TuiInputTagComponent.prototype.onMouseDown = function (event) {
|
|
@@ -630,7 +619,7 @@
|
|
|
630
619
|
};
|
|
631
620
|
TuiInputTagComponent.prototype.onFieldKeyDownEnter = function () {
|
|
632
621
|
this.addTag();
|
|
633
|
-
this.
|
|
622
|
+
this.scrollTo();
|
|
634
623
|
};
|
|
635
624
|
TuiInputTagComponent.prototype.onTagKeyDownArrowLeft = function (currentIndex) {
|
|
636
625
|
if (currentIndex > 0) {
|
|
@@ -662,7 +651,7 @@
|
|
|
662
651
|
this.updateSearch('');
|
|
663
652
|
this.value = this.filterValue(this.value.concat(item));
|
|
664
653
|
this.open = false;
|
|
665
|
-
this.
|
|
654
|
+
this.scrollTo();
|
|
666
655
|
};
|
|
667
656
|
TuiInputTagComponent.prototype.onInput = function (value) {
|
|
668
657
|
var _this = this;
|
|
@@ -701,6 +690,19 @@
|
|
|
701
690
|
// Actually tag has TuiStringifiableItem type not string
|
|
702
691
|
return tag.toString();
|
|
703
692
|
};
|
|
693
|
+
TuiInputTagComponent.prototype.scrollTo = function (scrollLeft) {
|
|
694
|
+
var _this = this;
|
|
695
|
+
var _a;
|
|
696
|
+
if (scrollLeft === void 0) {
|
|
697
|
+
scrollLeft = (_a = this.scrollBar) === null || _a === void 0 ? void 0 : _a.nativeElement.scrollWidth;
|
|
698
|
+
}
|
|
699
|
+
// Allow change detection to run and add new tag to DOM
|
|
700
|
+
setTimeout(function () {
|
|
701
|
+
if (_this.scrollBar) {
|
|
702
|
+
_this.scrollBar.nativeElement.scrollLeft = scrollLeft || 0;
|
|
703
|
+
}
|
|
704
|
+
});
|
|
705
|
+
};
|
|
704
706
|
TuiInputTagComponent.prototype.filterValue = function (value) {
|
|
705
707
|
var _this = this;
|
|
706
708
|
var seen = new Set();
|
|
@@ -723,22 +725,6 @@
|
|
|
723
725
|
flag * tag.nativeElement.clientWidth;
|
|
724
726
|
}
|
|
725
727
|
};
|
|
726
|
-
TuiInputTagComponent.prototype.initScrollerSubscription = function (scroller) {
|
|
727
|
-
var _this = this;
|
|
728
|
-
if (!(scroller === null || scroller === void 0 ? void 0 : scroller.browserScrollRef)) {
|
|
729
|
-
return;
|
|
730
|
-
}
|
|
731
|
-
var nativeElement = scroller.browserScrollRef.nativeElement;
|
|
732
|
-
var wheel$ = i4.tuiTypedFromEvent(nativeElement, 'wheel', { passive: false }).pipe(operators.filter(function (event) { return event.deltaX === 0 && _this.shouldScroll(nativeElement); }), i4.tuiPreventDefault(), operators.map(function (_b) {
|
|
733
|
-
var deltaY = _b.deltaY;
|
|
734
|
-
return Math.max(nativeElement.scrollLeft + deltaY * EVENT_Y_TO_X_COEFFICIENT, 0);
|
|
735
|
-
}));
|
|
736
|
-
var start$ = this.scrollToStart$.pipe(operators.map(function () { return 0; }));
|
|
737
|
-
var end$ = this.scrollToEnd$.pipe(operators.map(function () { return nativeElement.scrollWidth; }));
|
|
738
|
-
i7.merge(wheel$, start$, end$)
|
|
739
|
-
.pipe(operators.switchMap(function (left) { return _this.tuiScrollService.scroll$(nativeElement, nativeElement.scrollHeight, left); }), operators.takeUntil(this.destroy$))
|
|
740
|
-
.subscribe();
|
|
741
|
-
};
|
|
742
728
|
TuiInputTagComponent.prototype.updateSearch = function (value) {
|
|
743
729
|
if (this.focusableElement) {
|
|
744
730
|
this.focusableElement.nativeElement.value = value;
|
|
@@ -746,10 +732,6 @@
|
|
|
746
732
|
this.search = value;
|
|
747
733
|
this.searchChange.emit(value);
|
|
748
734
|
};
|
|
749
|
-
TuiInputTagComponent.prototype.shouldScroll = function (_b) {
|
|
750
|
-
var scrollWidth = _b.scrollWidth, offsetWidth = _b.offsetWidth;
|
|
751
|
-
return scrollWidth > offsetWidth;
|
|
752
|
-
};
|
|
753
735
|
TuiInputTagComponent.prototype.addTag = function () {
|
|
754
736
|
var inputValue = this.search.trim();
|
|
755
737
|
if (!inputValue || this.disabledItemHandler(inputValue)) {
|
|
@@ -786,14 +768,14 @@
|
|
|
786
768
|
});
|
|
787
769
|
return TuiInputTagComponent;
|
|
788
770
|
}(i4.AbstractTuiMultipleControl));
|
|
789
|
-
TuiInputTagComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TuiInputTagComponent, deps: [{ token: i6.NgControl, optional: true, self: true }, { token: i0.ChangeDetectorRef }, { token:
|
|
771
|
+
TuiInputTagComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TuiInputTagComponent, deps: [{ token: i6.NgControl, optional: true, self: true }, { token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i1.TuiModeDirective, optional: true }, { token: i1.TUI_MODE }, { token: i1.TuiHintOptionsDirective, optional: true }, { token: i1.TUI_TEXTFIELD_WATCHED_CONTROLLER }, { token: TUI_INPUT_TAG_OPTIONS }, { token: i1.TuiHostedDropdownComponent, optional: true }], target: i0__namespace.ɵɵFactoryTarget.Component });
|
|
790
772
|
TuiInputTagComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: TuiInputTagComponent, selector: "tui-input-tag", inputs: { separator: "separator", search: "search", editable: "editable", tagValidator: "tagValidator", expandable: "expandable", rows: "rows", inputHidden: "inputHidden", uniqueTags: "uniqueTags", maxLength: "maxLength", placeholder: "placeholder", removable: "removable", disabledItemHandler: "disabledItemHandler", pseudoFocusedSetter: ["pseudoFocused", "pseudoFocusedSetter"] }, outputs: { searchChange: "searchChange" }, host: { properties: { "class._expandable": "this.expandable", "attr.data-size": "this.size", "class._label-outside": "this.labelOutside" } }, providers: [
|
|
791
773
|
i4.tuiAsFocusableItemAccessor(TuiInputTagComponent),
|
|
792
774
|
i4.tuiAsControl(TuiInputTagComponent),
|
|
793
775
|
i1.tuiAsDataListHost(TuiInputTagComponent),
|
|
794
776
|
i1.TEXTFIELD_CONTROLLER_PROVIDER,
|
|
795
777
|
i1.MODE_PROVIDER,
|
|
796
|
-
], queries: [{ propertyName: "datalist", first: true, predicate: i1.TuiDataListDirective, descendants: true, read: i0.TemplateRef }], viewQueries: [{ propertyName: "hostedDropdown", first: true, predicate: i1.TuiHostedDropdownComponent, descendants: true }, { propertyName: "focusableElement", first: true, predicate: ["focusableElement"], descendants: true }, { propertyName: "tagsContainer", first: true, predicate: ["tagsContainer"], descendants: true }, { propertyName: "cleanerSvg", first: true, predicate: ["cleaner"], descendants: true, read: i0.ElementRef }, { propertyName: "scrollBar", first: true, predicate: i1.TuiScrollbarComponent, descendants: true, read: i0.ElementRef }, { propertyName: "errorIconTemplate", first: true, predicate: ["errorIcon"], descendants: true }, { propertyName: "scrollerSetter", first: true, predicate: i1.TuiScrollbarComponent, descendants: true }, { propertyName: "tags", predicate: ["tag"], descendants: true, read: i0.ElementRef }], usesInheritance: true, ngImport: i0__namespace, template: "<ng-container *ngIf=\"hintOptions?.change$ | async\"></ng-container>\n<tui-hosted-dropdown\n class=\"t-hosted\"\n [canOpen]=\"canOpen\"\n [content]=\"datalist || ''\"\n [(open)]=\"open\"\n (tuiActiveZoneChange)=\"onActiveZone($event)\"\n>\n <div\n tuiWrapper\n [appearance]=\"appearance\"\n [readOnly]=\"readOnly\"\n [focus]=\"computedFocused\"\n [hover]=\"pseudoHover\"\n [disabled]=\"computedDisabled\"\n [invalid]=\"computedInvalid\"\n (mousedown)=\"onMouseDown($event)\"\n >\n <div class=\"t-content\">\n <div\n *ngIf=\"iconLeft\"\n class=\"t-icons t-icons_left t-textfield-icon\"\n >\n <tui-svg\n *polymorpheusOutlet=\"iconLeft as src; context: {$implicit: size}\"\n tuiWrapper\n appearance=\"icon\"\n class=\"t-icon\"\n [src]=\"src\"\n ></tui-svg>\n </div>\n <div class=\"t-wrapper\">\n <div class=\"t-absolute-wrapper\">\n <div\n *ngIf=\"hasPlaceholder\"\n automation-id=\"tui-input-tag__placeholder\"\n class=\"t-placeholder\"\n [class.t-placeholder_raised]=\"placeholderRaised\"\n >\n <ng-content></ng-content>\n </div>\n </div>\n <tui-scrollbar\n class=\"t-scrollbar\"\n [hidden]=\"!expandable\"\n [style.maxHeight.rem]=\"computeMaxHeight\"\n >\n <div\n class=\"t-tags\"\n [class.t-tags_expandable]=\"expandable\"\n >\n <ng-container *ngIf=\"labelOutside; else text\">\n <tui-tag\n *ngFor=\"let item of value; index as index; trackBy: trackByFn\"\n #tag\n automation-id=\"tui-input-tag__tag\"\n class=\"t-tag\"\n [status]=\"(status$ | async)!\"\n [leftContent]=\"getLeftContent(item)\"\n [tuiFocusable]=\"false\"\n [disabled]=\"computedDisabled || disabledItemHandler(item)\"\n [editable]=\"editable && !readOnly\"\n [hoverable]=\"!readOnly\"\n [removable]=\"!readOnly && removable\"\n [separator]=\"separator\"\n [maxLength]=\"maxLength\"\n [size]=\"controller.size\"\n [value]=\"item.toString()\"\n (edited)=\"onTagEdited($event, index)\"\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=\"t-text\"\n [class.t-text_comma]=\"computedFocused && !inputHidden\"\n [class.t-text_disabled]=\"disabledItemHandler(item)\"\n [class.t-text_error]=\"!tagValidator(item)\"\n [textContent]=\"item\"\n ></span>\n </ng-template>\n <div\n class=\"t-input-wrapper\"\n [class.t-input-wrapper_collapsed]=\"computedDisabled || readOnly || inputHidden\"\n >\n <div class=\"t-ghost\">{{ search }}</div>\n <input\n #focusableElement\n type=\"text\"\n automation-id=\"tui-input-tag__native\"\n class=\"t-native\"\n [placeholder]=\"placeholder\"\n [class.t-native_hidden]=\"inputHidden\"\n [attr.maxLength]=\"maxLength\"\n [id]=\"id\"\n [disabled]=\"computedDisabled\"\n [readOnly]=\"readOnly || inputHidden\"\n [tuiFocusable]=\"computedFocusable\"\n [ngModel]=\"search\"\n (ngModelChange)=\"onInput($event)\"\n (paste.prevent)=\"onPaste($event)\"\n (drop.prevent)=\"onDrop($any($event))\"\n (keydown.arrowLeft)=\"onFieldKeyDownArrowLeft($event)\"\n (keydown.backspace)=\"onFieldKeyDownBackspace($event)\"\n (keydown.enter.prevent)=\"onFieldKeyDownEnter()\"\n />\n </div>\n </div>\n </tui-scrollbar>\n </div>\n <ng-content select=\"select\"></ng-content>\n <div\n *ngIf=\"hasRightIcons\"\n class=\"t-icons t-icons_right\"\n >\n <ng-container *ngIf=\"hasCleaner\">\n <tui-svg\n *polymorpheusOutlet=\"iconCleaner as src; context: {$implicit: size}\"\n #cleaner\n tuiWrapper\n appearance=\"icon\"\n automation-id=\"tui-input-tag__cleaner\"\n class=\"t-cleaner\"\n [src]=\"src\"\n (click.stop)=\"onCleanerClick()\"\n ></tui-svg>\n </ng-container>\n <tui-tooltip\n *ngIf=\"showHint\"\n automation-id=\"tui-input-tag__tooltip\"\n class=\"t-tooltip\"\n [describeId]=\"id\"\n [content]=\"hintOptions?.content\"\n ></tui-tooltip>\n <div\n *ngIf=\"icon\"\n class=\"t-icon t-textfield-icon\"\n >\n <tui-svg\n *polymorpheusOutlet=\"icon as src; context: {$implicit: size}\"\n tuiWrapper\n appearance=\"icon\"\n [src]=\"src\"\n ></tui-svg>\n </div>\n </div>\n </div>\n <ng-template #errorIcon>\n <tui-svg\n src=\"tuiIconAlertCircle\"\n class=\"t-error-icon\"\n ></tui-svg>\n </ng-template>\n </div>\n</tui-hosted-dropdown>\n", styles: [":host{font:var(--tui-font-text-s);color:var(--tui-text-01);position:relative;display:block;border-radius:var(--tui-radius-m);text-align:left;height:var(--tui-height);min-height:var(--tui-height);max-height:var(--tui-height)}:host[data-size=s]{--tui-height: var(--tui-height-s)}:host[data-size=m]{--tui-height: var(--tui-height-m)}:host[data-size=l]{--tui-height: var(--tui-height-l);font:var(--tui-font-text-m);line-height:1.25rem}.t-input{font:var(--tui-font-text-s);color:var(--tui-text-01);padding:0;margin:0;border:0;border-radius:inherit;background:none;font-size:inherit;line-height:inherit;font-weight:inherit;color:inherit;caret-color:currentColor;outline:none;-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%;padding:0 var(--tui-padding-m);border:solid transparent;border-width:0 var(--border-end, 0) 0 var(--border-start, 0);border-inline-start-width:var(--border-start, 0);border-inline-end-width:var(--border-end, 0);text-indent:var(--text-indent);text-align:inherit;box-sizing:border-box;white-space:nowrap;overflow:hidden;text-transform:inherit;resize:none}.t-input:-webkit-autofill,.t-input:-webkit-autofill:hover,.t-input:-webkit-autofill:focus{caret-color:var(--tui-base-09);border-radius:inherit;color:inherit!important;background-color:transparent!important;-webkit-text-fill-color:var(--tui-text-01)!important;border-color:var(--tui-autofill);-webkit-box-shadow:0 0 0 100rem var(--tui-autofill) inset!important}.t-input:-webkit-autofill,.t-input:-webkit-autofill:first-line{font-size:inherit;line-height:inherit}.t-input::-webkit-caps-lock-indicator,.t-input::-webkit-contacts-auto-fill-button,.t-input::-webkit-credit-card-auto-fill-button,.t-input::-webkit-credentials-auto-fill-button,.t-input::-webkit-strong-password-auto-fill-button{content:none!important;position:absolute;left:-62.4375rem;top:-62.4375rem;z-index:-999;display:none!important;background:transparent!important;pointer-events:none!important}.t-input::placeholder{color:var(--tui-text-03);opacity:0}:host._focused:not(._readonly) .t-input::placeholder,:host-context(tui-primitive-textfield._focused:not(._readonly)) .t-input::placeholder,:host-context(tui-text-area._focused:not(._readonly)) .t-input::placeholder{opacity:1}[tuiWrapper][data-mode=onDark] .t-input:-webkit-autofill,.t-input :host-context([tuiWrapper][data-mode=\"onDark\"]):-webkit-autofill,[tuiWrapper][data-mode=onDark] .t-input:-webkit-autofill:hover,.t-input :host-context([tuiWrapper][data-mode=\"onDark\"]):-webkit-autofill:hover,[tuiWrapper][data-mode=onDark] .t-input:-webkit-autofill:focus,.t-input :host-context([tuiWrapper][data-mode=\"onDark\"]):-webkit-autofill:focus{caret-color:var(--tui-base-09);border-radius:inherit;color:inherit!important;background-color:transparent!important;-webkit-text-fill-color:var(--tui-text-01-night)!important;border-color:var(--tui-autofill-night);-webkit-box-shadow:0 0 0 100rem var(--tui-autofill-night) inset!important}[tuiWrapper][data-mode=onDark] .t-input::placeholder,.t-input :host-context([tuiWrapper][data-mode=\"onDark\"])::placeholder{color:var(--tui-text-03-night)}:host[data-size=s] .t-input,.t-input :host-context(tui-primitive-textfield[data-size=\"s\"]):not(tui-primitive-textfield),.t-input :host-context(tui-text-area[data-size=\"s\"]):not(tui-text-area){padding:0 var(--tui-padding-s)}:host[data-size=l] .t-input,.t-input :host-context(tui-primitive-textfield[data-size=\"l\"]):not(tui-primitive-textfield),.t-input :host-context(tui-text-area[data-size=\"l\"]):not(tui-text-area){padding:0 var(--tui-padding-l)}:host._disabled .t-input,.t-input :host-context(tui-primitive-textfield._disabled),.t-input :host-context(tui-text-area._disabled){pointer-events:none}:host[data-size=l]:not(._label-outside) .t-input,.t-input :host-context(tui-primitive-textfield[data-size=\"l\"]:not(._label-outside)):not(tui-primitive-textfield){padding-top:1.25rem}:host[data-size=l]:not(._label-outside) .t-input:-webkit-autofill+.t-content .t-placeholder,.t-input :host-context(tui-primitive-textfield[data-size=\"l\"]:not(._label-outside)):not(tui-primitive-textfield):-webkit-autofill+.t-content .t-placeholder{font-size:.8156rem;transform:translateY(-.625rem)}:host[data-size=m]:not(._label-outside) .t-input,.t-input :host-context(tui-primitive-textfield[data-size=\"m\"]:not(._label-outside)):not(tui-primitive-textfield){padding-top:1rem}:host[data-size=m]:not(._label-outside) .t-input:-webkit-autofill+.t-content .t-placeholder,.t-input :host-context(tui-primitive-textfield[data-size=\"m\"]:not(._label-outside)):not(tui-primitive-textfield):-webkit-autofill+.t-content .t-placeholder{font-size:.69rem;transform:translateY(-.5rem)}:host._hidden input.t-input,.t-input :host-context(tui-primitive-textfield._hidden){opacity:0;text-indent:-10em;-webkit-user-select:none}.t-content{display:flex;height:100%;width:100%;padding:0 var(--tui-padding-m);box-sizing:border-box;align-items:center;overflow:hidden}:host[data-size=s] .t-content{padding:0 var(--tui-padding-s)}:host[data-size=l] .t-content{padding:0 var(--tui-padding-l)}.t-content:after{content:\"\";margin-right:-.25rem}:host[data-size=m] .t-content:after{display:none}.t-wrapper{flex:1;min-width:0;padding-right:.25rem;-webkit-padding-end:.25rem;padding-inline-end:.25rem;-webkit-padding-start:0;padding-inline-start:0}.t-wrapper+*{margin:0}.t-placeholder{transition-property:transform,font-size,color,letter-spacing;transition-duration:var(--tui-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%;-webkit-user-select:none;-moz-user-select:none;user-select:none;color:var(--tui-text-02);pointer-events:none;will-change:transform;transform:translateY(0)}.t-placeholder_raised{transform:translateY(-.625rem)}:host[data-size=m] .t-placeholder_raised{font:var(--tui-font-text-xs);line-height:1.25rem;transform:translateY(-.5rem);letter-spacing:.025rem}:host._invalid:not(._focused) .t-placeholder_raised,:host._invalid:not(._focused):hover .t-placeholder_raised{color:var(--tui-error-fill)}:host._invalid:not(._focused) [tuiWrapper][data-mode=onDark] .t-placeholder_raised,:host._invalid:not(._focused):hover [tuiWrapper][data-mode=onDark] .t-placeholder_raised{color:var(--tui-error-fill-night)}:host._focused .t-placeholder,:host[data-size=m]._focused._label-outside .t-placeholder,:host[data-size=l]._focused._label-outside .t-placeholder{color:var(--tui-text-03)}:host[data-size=l] .t-placeholder{font-size:.9375rem}:host[data-size=l] .t-placeholder_raised{font-size:.8156rem}:host[data-size=m]._focused:not(._label-outside) .t-placeholder,:host[data-size=l]._focused:not(._label-outside) .t-placeholder{color:var(--tui-text-01)}[tuiWrapper][data-mode=onDark] .t-placeholder{color:var(--tui-text-02-night)}:host[data-size=m]._focused:not(._label-outside) [tuiWrapper][data-mode=onDark] .t-placeholder,:host[data-size=l]._focused:not(._label-outside) [tuiWrapper][data-mode=onDark] .t-placeholder{color:var(--tui-text-01-night)}:host._focused [tuiWrapper][data-mode=onDark] .t-placeholder,:host[data-size=m]._focused._label-outside [tuiWrapper][data-mode=onDark] .t-placeholder,:host[data-size=l]._focused._label-outside [tuiWrapper][data-mode=onDark] .t-placeholder{color:var(--tui-text-02-night)}@supports (-webkit-hyphens: none){.t-placeholder{will-change:unset;transition-property:transform,color,letter-spacing}}.t-cleaner{position:relative;display:flex;width:1.5rem;height:1.5rem;margin:0 0 0 .25rem;-webkit-margin-start:.25rem;margin-inline-start:.25rem;-webkit-margin-end:0;margin-inline-end:0;align-items:center;justify-content:center;box-sizing:border-box;cursor:pointer}:host._readonly .t-cleaner,:host._disabled .t-cleaner{pointer-events:none}.t-icon{position:relative;display:flex;width:1.5rem;height:1.5rem;margin:0 0 0 .25rem;-webkit-margin-start:.25rem;margin-inline-start:.25rem;-webkit-margin-end:0;margin-inline-end:0;align-items:center;justify-content:center;box-sizing:border-box;cursor:pointer;pointer-events:none}.t-icon_left{margin:0 .375rem 0 -.25rem;-webkit-margin-start:-.25rem;margin-inline-start:-.25rem;-webkit-margin-end:.375rem;margin-inline-end:.375rem}:host[data-size=l] .t-icon_left{margin:0 .5rem 0 -.25rem;-webkit-margin-start:-.25rem;margin-inline-start:-.25rem;-webkit-margin-end:.5rem;margin-inline-end:.5rem}:host{cursor:text}:host._expandable{height:auto;max-height:none}:host._disabled{pointer-events:none}:host._readonly{cursor:default}:host[data-size=m]{line-height:1rem}.t-hosted{display:block;border-radius:inherit}.t-scrollbar{margin:0 -.25rem;min-width:100%}:host[data-size=m]:not(._label-outside) .t-scrollbar{border-top:1rem solid transparent}:host[data-size=l]:not(._label-outside) .t-scrollbar{border-top:1.25rem solid transparent}.t-tags{display:flex;padding-left:.25rem;-webkit-padding-start:.25rem;padding-inline-start:.25rem;padding-right:.5rem;-webkit-padding-end:.5rem;padding-inline-end:.5rem}.t-tags_expandable{overflow:hidden}:host._expandable .t-tags{flex-wrap:wrap;white-space:normal}:host._readonly .t-tags{pointer-events:none}.t-tags :host[data-size]{-webkit-padding-start:0;padding-inline-start:0;-webkit-padding-end:.25rem;padding-inline-end:.25rem}:host[data-size]:not(._label-outside) .t-tags{-webkit-padding-end:1rem;padding-inline-end:1rem}.t-content{align-items:flex-start}:host[data-size=s] .t-content{min-height:var(--tui-height-s)}:host[data-size=m] .t-content{min-height:var(--tui-height-m)}:host[data-size=l] .t-content{min-height:var(--tui-height-l)}.t-icons{display:flex;align-items:center;padding:0 0 0 .75rem;-webkit-padding-start:.75rem;padding-inline-start:.75rem;-webkit-padding-end:0;padding-inline-end:0}.t-icons_left{padding:0;margin:0 .75rem 0 -.5rem;-webkit-margin-start:-.5rem;margin-inline-start:-.5rem;-webkit-margin-end:.75rem;margin-inline-end:.75rem}:host._expandable .t-icons_right{margin:0 0 0 -.625rem;-webkit-margin-start:-.625rem;margin-inline-start:-.625rem;-webkit-margin-end:0;margin-inline-end:0}:host[data-size=s] .t-icons{height:var(--tui-height-s)}:host[data-size=m] .t-icons{height:var(--tui-height-m)}:host[data-size=l] .t-icons{height:var(--tui-height-l)}.t-tooltip{margin:0 0 0 .25rem;-webkit-margin-start:.25rem;margin-inline-start:.25rem;-webkit-margin-end:0;margin-inline-end:0}.t-absolute-wrapper{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;flex-direction:column;justify-content:center}:host[data-size=m] .t-absolute-wrapper{height:var(--tui-height-m)}:host[data-size=l] .t-absolute-wrapper{height:var(--tui-height-l)}.t-wrapper{position:relative;display:flex;align-items:center;padding:0;box-sizing:border-box}:host[data-size=s] .t-wrapper{min-height:var(--tui-height-s);padding:calc((var(--tui-height-s) - 1.5rem) / 2) 0}:host[data-size=m] .t-wrapper{min-height:var(--tui-height-m);padding:calc((var(--tui-height-m) - var(--tui-height-xs) - .25rem) / 2) 0}:host[data-size=l] .t-wrapper{padding:calc((var(--tui-height-l) - var(--tui-height-s) - .25rem) / 2) 0}:host[data-size=m]:not(._label-outside) .t-wrapper{padding:calc((var(--tui-height-m) - 2rem) / 2) 0}:host[data-size=l]:not(._label-outside) .t-wrapper{padding:calc((var(--tui-height-l) - 2.5rem) / 2) 0}.t-tag{margin:.125rem .5rem .125rem -.25rem;-webkit-margin-start:-.25rem;margin-inline-start:-.25rem;-webkit-margin-end:.5rem;margin-inline-end:.5rem;max-width:100%;flex-shrink:0}.t-text:after{content:\",\\a0\"}.t-text_disabled{color:var(--tui-text-03)}.t-text_error{color:var(--tui-negative)}.t-text:not(.t-text_comma):last-of-type:after{content:\"\"}:host:not(._expandable) .t-text{white-space:nowrap}.t-input-wrapper{position:relative;flex:1;max-width:100%}.t-input-wrapper_collapsed{flex:0;margin:0 0 0 -.5rem;-webkit-margin-start:-.5rem;margin-inline-start:-.5rem;-webkit-margin-end:0;margin-inline-end:0}:host[data-size=s] .t-input-wrapper{min-height:1.5rem}:host[data-size=m] .t-input-wrapper{min-height:calc(var(--tui-height-xs) + 2 * .125rem)}:host[data-size=l] .t-input-wrapper{min-height:calc(var(--tui-height-s) + 2 * .125rem)}:host:not(._label-outside) .t-input-wrapper{min-height:1rem}.t-ghost{visibility:hidden;white-space:pre;text-overflow:clip;min-width:.125rem}:host:not(._expandable) .t-ghost{min-width:2rem}.t-native{margin:0;border:0;border-radius:inherit;background:none;font-size:inherit;line-height:inherit;font-weight:inherit;color:inherit;caret-color:currentColor;outline:none;-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}.t-native:-webkit-autofill,.t-native:-webkit-autofill:hover,.t-native:-webkit-autofill:focus{caret-color:var(--tui-base-09);border-radius:inherit;color:inherit!important;background-color:transparent!important;-webkit-text-fill-color:var(--tui-text-01)!important;border-color:var(--tui-autofill);-webkit-box-shadow:0 0 0 100rem var(--tui-autofill) inset!important}.t-native_hidden{opacity:0;text-indent:-10em}.t-native::placeholder{color:var(--tui-text-03);opacity:0}[tuiWrapper][data-mode=onDark] .t-native::placeholder{color:var(--tui-text-03-night)}:host._focused .t-native:not(:-moz-read-only)::placeholder{opacity:1}:host._focused .t-native:not(:read-only)::placeholder{opacity:1}.t-error-icon{display:block;color:var(--tui-error-fill);width:1rem;height:1rem}\n"], components: [{ type: i1__namespace.TuiHostedDropdownComponent, selector: "tui-hosted-dropdown", inputs: ["content", "sided", "canOpen", "open"], outputs: ["openChange", "focusedChange"] }, { type: i1__namespace.TuiSvgComponent, selector: "tui-svg", inputs: ["src"] }, { type: i1__namespace.TuiScrollbarComponent, selector: "tui-scrollbar", inputs: ["hidden"] }, { type: i2__namespace.TuiTagComponent, selector: "tui-tag, a[tuiTag], button[tuiTag]", inputs: ["value", "editable", "separator", "maxLength", "size", "showLoader", "status", "hoverable", "removable", "disabled", "autoColor", "leftContent"], outputs: ["edited"] }, { type: i1__namespace.TuiTooltipComponent, selector: "tui-tooltip", inputs: ["content", "direction", "appearance", "showDelay", "hideDelay", "describeId"] }], directives: [{ type: i3__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4__namespace.TuiActiveZoneDirective, selector: "[tuiActiveZone]:not(ng-container), [tuiActiveZoneChange]:not(ng-container), [tuiActiveZoneParent]:not(ng-container)", inputs: ["tuiActiveZoneParent"], outputs: ["tuiActiveZoneChange"], exportAs: ["tuiActiveZone"] }, { type: i1__namespace.TuiWrapperDirective, selector: "[tuiWrapper]", inputs: ["disabled", "readOnly", "hover", "active", "focus", "invalid", "appearance"] }, { type: i5__namespace.PolymorpheusOutletDirective, selector: "[polymorpheusOutlet]", inputs: ["polymorpheusOutlet", "polymorpheusOutletContext"] }, { type: i3__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4__namespace.TuiFocusableDirective, selector: "[tuiFocusable]", inputs: ["tuiFocusable"] }, { type: i6__namespace.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i6__namespace.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i6__namespace.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], pipes: { "async": i3__namespace.AsyncPipe }, viewProviders: [providers.FIXED_DROPDOWN_CONTROLLER_PROVIDER], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
|
|
778
|
+
], queries: [{ propertyName: "datalist", first: true, predicate: i1.TuiDataListDirective, descendants: true, read: i0.TemplateRef }], viewQueries: [{ propertyName: "hostedDropdown", first: true, predicate: i1.TuiHostedDropdownComponent, descendants: true }, { propertyName: "focusableElement", first: true, predicate: ["focusableElement"], descendants: true }, { propertyName: "tagsContainer", first: true, predicate: ["tagsContainer"], descendants: true }, { propertyName: "cleanerSvg", first: true, predicate: ["cleaner"], descendants: true, read: i0.ElementRef }, { propertyName: "scrollBar", first: true, predicate: i1.TuiScrollbarComponent, descendants: true, read: i0.ElementRef }, { propertyName: "errorIconTemplate", first: true, predicate: ["errorIcon"], descendants: true }, { propertyName: "tags", predicate: ["tag"], descendants: true, read: i0.ElementRef }], usesInheritance: true, ngImport: i0__namespace, template: "<ng-container *ngIf=\"hintOptions?.change$ | async\"></ng-container>\n<tui-hosted-dropdown\n class=\"t-hosted\"\n [canOpen]=\"canOpen\"\n [content]=\"datalist || ''\"\n [(open)]=\"open\"\n (tuiActiveZoneChange)=\"onActiveZone($event)\"\n>\n <div\n tuiWrapper\n [appearance]=\"appearance\"\n [readOnly]=\"readOnly\"\n [focus]=\"computedFocused\"\n [hover]=\"pseudoHover\"\n [disabled]=\"computedDisabled\"\n [invalid]=\"computedInvalid\"\n (mousedown)=\"onMouseDown($event)\"\n >\n <div class=\"t-content\">\n <div\n *ngIf=\"iconLeft\"\n class=\"t-icons t-icons_left t-textfield-icon\"\n >\n <tui-svg\n *polymorpheusOutlet=\"iconLeft as src; context: {$implicit: size}\"\n tuiWrapper\n appearance=\"icon\"\n class=\"t-icon\"\n [src]=\"src\"\n ></tui-svg>\n </div>\n <div class=\"t-wrapper\">\n <div class=\"t-absolute-wrapper\">\n <div\n *ngIf=\"hasPlaceholder\"\n automation-id=\"tui-input-tag__placeholder\"\n class=\"t-placeholder\"\n [class.t-placeholder_raised]=\"placeholderRaised\"\n >\n <ng-content></ng-content>\n </div>\n </div>\n <tui-scrollbar\n class=\"t-scrollbar\"\n [hidden]=\"!expandable\"\n [style.maxHeight.rem]=\"computeMaxHeight\"\n >\n <div\n class=\"t-tags\"\n [class.t-tags_expandable]=\"expandable\"\n >\n <ng-container *ngIf=\"labelOutside; else text\">\n <tui-tag\n *ngFor=\"let item of value; index as index; trackBy: trackByFn\"\n #tag\n automation-id=\"tui-input-tag__tag\"\n class=\"t-tag\"\n [status]=\"(status$ | async)!\"\n [leftContent]=\"getLeftContent(item)\"\n [tuiFocusable]=\"false\"\n [disabled]=\"computedDisabled || disabledItemHandler(item)\"\n [editable]=\"editable && !readOnly\"\n [hoverable]=\"!readOnly\"\n [removable]=\"!readOnly && removable\"\n [separator]=\"separator\"\n [maxLength]=\"maxLength\"\n [size]=\"controller.size\"\n [value]=\"item.toString()\"\n (edited)=\"onTagEdited($event, index)\"\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=\"t-text\"\n [class.t-text_comma]=\"computedFocused && !inputHidden\"\n [class.t-text_disabled]=\"disabledItemHandler(item)\"\n [class.t-text_error]=\"!tagValidator(item)\"\n [textContent]=\"item\"\n ></span>\n </ng-template>\n <div\n class=\"t-input-wrapper\"\n [class.t-input-wrapper_collapsed]=\"computedDisabled || readOnly || inputHidden\"\n >\n <div class=\"t-ghost\">{{ search }}</div>\n <input\n #focusableElement\n type=\"text\"\n automation-id=\"tui-input-tag__native\"\n class=\"t-native\"\n [placeholder]=\"placeholder\"\n [class.t-native_hidden]=\"inputHidden\"\n [attr.maxLength]=\"maxLength\"\n [id]=\"id\"\n [disabled]=\"computedDisabled\"\n [readOnly]=\"readOnly || inputHidden\"\n [tuiFocusable]=\"computedFocusable\"\n [ngModel]=\"search\"\n (ngModelChange)=\"onInput($event)\"\n (paste.prevent)=\"onPaste($event)\"\n (drop.prevent)=\"onDrop($any($event))\"\n (keydown.arrowLeft)=\"onFieldKeyDownArrowLeft($event)\"\n (keydown.backspace)=\"onFieldKeyDownBackspace($event)\"\n (keydown.enter.prevent)=\"onFieldKeyDownEnter()\"\n />\n </div>\n </div>\n </tui-scrollbar>\n </div>\n <ng-content select=\"select\"></ng-content>\n <div\n *ngIf=\"hasRightIcons\"\n class=\"t-icons t-icons_right\"\n >\n <ng-container *ngIf=\"hasCleaner\">\n <tui-svg\n *polymorpheusOutlet=\"iconCleaner as src; context: {$implicit: size}\"\n #cleaner\n tuiWrapper\n appearance=\"icon\"\n automation-id=\"tui-input-tag__cleaner\"\n class=\"t-cleaner\"\n [src]=\"src\"\n (click.stop)=\"onCleanerClick()\"\n ></tui-svg>\n </ng-container>\n <tui-tooltip\n *ngIf=\"showHint\"\n automation-id=\"tui-input-tag__tooltip\"\n class=\"t-tooltip\"\n [describeId]=\"id\"\n [content]=\"hintOptions?.content\"\n ></tui-tooltip>\n <div\n *ngIf=\"icon\"\n class=\"t-icon t-textfield-icon\"\n >\n <tui-svg\n *polymorpheusOutlet=\"icon as src; context: {$implicit: size}\"\n tuiWrapper\n appearance=\"icon\"\n [src]=\"src\"\n ></tui-svg>\n </div>\n </div>\n </div>\n <ng-template #errorIcon>\n <tui-svg\n src=\"tuiIconAlertCircle\"\n class=\"t-error-icon\"\n ></tui-svg>\n </ng-template>\n </div>\n</tui-hosted-dropdown>\n", styles: [":host{font:var(--tui-font-text-s);color:var(--tui-text-01);position:relative;display:block;border-radius:var(--tui-radius-m);text-align:left;height:var(--tui-height);min-height:var(--tui-height);max-height:var(--tui-height)}:host[data-size=s]{--tui-height: var(--tui-height-s)}:host[data-size=m]{--tui-height: var(--tui-height-m)}:host[data-size=l]{--tui-height: var(--tui-height-l);font:var(--tui-font-text-m);line-height:1.25rem}.t-input{font:var(--tui-font-text-s);color:var(--tui-text-01);padding:0;margin:0;border:0;border-radius:inherit;background:none;font-size:inherit;line-height:inherit;font-weight:inherit;color:inherit;caret-color:currentColor;outline:none;-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%;padding:0 var(--tui-padding-m);border:solid transparent;border-width:0 var(--border-end, 0) 0 var(--border-start, 0);border-inline-start-width:var(--border-start, 0);border-inline-end-width:var(--border-end, 0);text-indent:var(--text-indent);text-align:inherit;box-sizing:border-box;white-space:nowrap;overflow:hidden;text-transform:inherit;resize:none}.t-input:-webkit-autofill,.t-input:-webkit-autofill:hover,.t-input:-webkit-autofill:focus{caret-color:var(--tui-base-09);border-radius:inherit;color:inherit!important;background-color:transparent!important;-webkit-text-fill-color:var(--tui-text-01)!important;border-color:var(--tui-autofill);-webkit-box-shadow:0 0 0 100rem var(--tui-autofill) inset!important}.t-input:-webkit-autofill,.t-input:-webkit-autofill:first-line{font-size:inherit;line-height:inherit}.t-input::-webkit-caps-lock-indicator,.t-input::-webkit-contacts-auto-fill-button,.t-input::-webkit-credit-card-auto-fill-button,.t-input::-webkit-credentials-auto-fill-button,.t-input::-webkit-strong-password-auto-fill-button{content:none!important;position:absolute;left:-62.4375rem;top:-62.4375rem;z-index:-999;display:none!important;background:transparent!important;pointer-events:none!important}.t-input::placeholder{color:var(--tui-text-03);opacity:0}:host._focused:not(._readonly) .t-input::placeholder,:host-context(tui-primitive-textfield._focused:not(._readonly)) .t-input::placeholder,:host-context(tui-text-area._focused:not(._readonly)) .t-input::placeholder{opacity:1}[tuiWrapper][data-mode=onDark] .t-input:-webkit-autofill,.t-input :host-context([tuiWrapper][data-mode=\"onDark\"]):-webkit-autofill,[tuiWrapper][data-mode=onDark] .t-input:-webkit-autofill:hover,.t-input :host-context([tuiWrapper][data-mode=\"onDark\"]):-webkit-autofill:hover,[tuiWrapper][data-mode=onDark] .t-input:-webkit-autofill:focus,.t-input :host-context([tuiWrapper][data-mode=\"onDark\"]):-webkit-autofill:focus{caret-color:var(--tui-base-09);border-radius:inherit;color:inherit!important;background-color:transparent!important;-webkit-text-fill-color:var(--tui-text-01-night)!important;border-color:var(--tui-autofill-night);-webkit-box-shadow:0 0 0 100rem var(--tui-autofill-night) inset!important}[tuiWrapper][data-mode=onDark] .t-input::placeholder,.t-input :host-context([tuiWrapper][data-mode=\"onDark\"])::placeholder{color:var(--tui-text-03-night)}:host[data-size=s] .t-input,.t-input :host-context(tui-primitive-textfield[data-size=\"s\"]):not(tui-primitive-textfield),.t-input :host-context(tui-text-area[data-size=\"s\"]):not(tui-text-area){padding:0 var(--tui-padding-s)}:host[data-size=l] .t-input,.t-input :host-context(tui-primitive-textfield[data-size=\"l\"]):not(tui-primitive-textfield),.t-input :host-context(tui-text-area[data-size=\"l\"]):not(tui-text-area){padding:0 var(--tui-padding-l)}:host._disabled .t-input,.t-input :host-context(tui-primitive-textfield._disabled),.t-input :host-context(tui-text-area._disabled){pointer-events:none}:host[data-size=l]:not(._label-outside) .t-input,.t-input :host-context(tui-primitive-textfield[data-size=\"l\"]:not(._label-outside)):not(tui-primitive-textfield){padding-top:1.25rem}:host[data-size=l]:not(._label-outside) .t-input:-webkit-autofill+.t-content .t-placeholder,.t-input :host-context(tui-primitive-textfield[data-size=\"l\"]:not(._label-outside)):not(tui-primitive-textfield):-webkit-autofill+.t-content .t-placeholder{font-size:.8156rem;transform:translateY(-.625rem)}:host[data-size=m]:not(._label-outside) .t-input,.t-input :host-context(tui-primitive-textfield[data-size=\"m\"]:not(._label-outside)):not(tui-primitive-textfield){padding-top:1rem}:host[data-size=m]:not(._label-outside) .t-input:-webkit-autofill+.t-content .t-placeholder,.t-input :host-context(tui-primitive-textfield[data-size=\"m\"]:not(._label-outside)):not(tui-primitive-textfield):-webkit-autofill+.t-content .t-placeholder{font-size:.69rem;transform:translateY(-.5rem)}:host._hidden input.t-input,.t-input :host-context(tui-primitive-textfield._hidden){opacity:0;text-indent:-10em;-webkit-user-select:none}.t-content{display:flex;height:100%;width:100%;padding:0 var(--tui-padding-m);box-sizing:border-box;align-items:center;overflow:hidden}:host[data-size=s] .t-content{padding:0 var(--tui-padding-s)}:host[data-size=l] .t-content{padding:0 var(--tui-padding-l)}.t-content:after{content:\"\";margin-right:-.25rem}:host[data-size=m] .t-content:after{display:none}.t-wrapper{flex:1;min-width:0;padding-right:.25rem;-webkit-padding-end:.25rem;padding-inline-end:.25rem;-webkit-padding-start:0;padding-inline-start:0}.t-wrapper+*{margin:0}.t-placeholder{transition-property:transform,font-size,color,letter-spacing;transition-duration:var(--tui-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%;-webkit-user-select:none;-moz-user-select:none;user-select:none;color:var(--tui-text-02);pointer-events:none;will-change:transform;transform:translateY(0)}.t-placeholder_raised{transform:translateY(-.625rem)}:host[data-size=m] .t-placeholder_raised{font:var(--tui-font-text-xs);line-height:1.25rem;transform:translateY(-.5rem);letter-spacing:.025rem}:host._invalid:not(._focused) .t-placeholder_raised,:host._invalid:not(._focused):hover .t-placeholder_raised{color:var(--tui-error-fill)}:host._invalid:not(._focused) [tuiWrapper][data-mode=onDark] .t-placeholder_raised,:host._invalid:not(._focused):hover [tuiWrapper][data-mode=onDark] .t-placeholder_raised{color:var(--tui-error-fill-night)}:host._focused .t-placeholder,:host[data-size=m]._focused._label-outside .t-placeholder,:host[data-size=l]._focused._label-outside .t-placeholder{color:var(--tui-text-03)}:host[data-size=l] .t-placeholder{font-size:.9375rem}:host[data-size=l] .t-placeholder_raised{font-size:.8156rem}:host[data-size=m]._focused:not(._label-outside) .t-placeholder,:host[data-size=l]._focused:not(._label-outside) .t-placeholder{color:var(--tui-text-01)}[tuiWrapper][data-mode=onDark] .t-placeholder{color:var(--tui-text-02-night)}:host[data-size=m]._focused:not(._label-outside) [tuiWrapper][data-mode=onDark] .t-placeholder,:host[data-size=l]._focused:not(._label-outside) [tuiWrapper][data-mode=onDark] .t-placeholder{color:var(--tui-text-01-night)}:host._focused [tuiWrapper][data-mode=onDark] .t-placeholder,:host[data-size=m]._focused._label-outside [tuiWrapper][data-mode=onDark] .t-placeholder,:host[data-size=l]._focused._label-outside [tuiWrapper][data-mode=onDark] .t-placeholder{color:var(--tui-text-02-night)}@supports (-webkit-hyphens: none){.t-placeholder{will-change:unset;transition-property:transform,color,letter-spacing}}.t-cleaner{position:relative;display:flex;width:1.5rem;height:1.5rem;margin:0 0 0 .25rem;-webkit-margin-start:.25rem;margin-inline-start:.25rem;-webkit-margin-end:0;margin-inline-end:0;align-items:center;justify-content:center;box-sizing:border-box;cursor:pointer}:host._readonly .t-cleaner,:host._disabled .t-cleaner{pointer-events:none}.t-icon{position:relative;display:flex;width:1.5rem;height:1.5rem;margin:0 0 0 .25rem;-webkit-margin-start:.25rem;margin-inline-start:.25rem;-webkit-margin-end:0;margin-inline-end:0;align-items:center;justify-content:center;box-sizing:border-box;cursor:pointer;pointer-events:none}.t-icon_left{margin:0 .375rem 0 -.25rem;-webkit-margin-start:-.25rem;margin-inline-start:-.25rem;-webkit-margin-end:.375rem;margin-inline-end:.375rem}:host[data-size=l] .t-icon_left{margin:0 .5rem 0 -.25rem;-webkit-margin-start:-.25rem;margin-inline-start:-.25rem;-webkit-margin-end:.5rem;margin-inline-end:.5rem}:host{cursor:text}:host._expandable{height:auto;max-height:none}:host._disabled{pointer-events:none}:host._readonly{cursor:default}:host[data-size=m]{line-height:1rem}.t-hosted{display:block;border-radius:inherit}.t-scrollbar{margin:0 -.25rem;min-width:100%;scroll-behavior:smooth}:host[data-size=m]:not(._label-outside) .t-scrollbar{border-top:1rem solid transparent}:host[data-size=l]:not(._label-outside) .t-scrollbar{border-top:1.25rem solid transparent}.t-tags{display:flex;padding-left:.25rem;-webkit-padding-start:.25rem;padding-inline-start:.25rem;padding-right:.5rem;-webkit-padding-end:.5rem;padding-inline-end:.5rem}.t-tags_expandable{overflow:hidden}:host._expandable .t-tags{flex-wrap:wrap;white-space:normal}:host._readonly .t-tags{pointer-events:none}.t-tags :host[data-size]{-webkit-padding-start:0;padding-inline-start:0;-webkit-padding-end:.25rem;padding-inline-end:.25rem}:host[data-size]:not(._label-outside) .t-tags{-webkit-padding-end:1rem;padding-inline-end:1rem}.t-content{align-items:flex-start}:host[data-size=s] .t-content{min-height:var(--tui-height-s)}:host[data-size=m] .t-content{min-height:var(--tui-height-m)}:host[data-size=l] .t-content{min-height:var(--tui-height-l)}.t-icons{display:flex;align-items:center;padding:0 0 0 .75rem;-webkit-padding-start:.75rem;padding-inline-start:.75rem;-webkit-padding-end:0;padding-inline-end:0}.t-icons_left{padding:0;margin:0 .75rem 0 -.5rem;-webkit-margin-start:-.5rem;margin-inline-start:-.5rem;-webkit-margin-end:.75rem;margin-inline-end:.75rem}:host._expandable .t-icons_right{margin:0 0 0 -.625rem;-webkit-margin-start:-.625rem;margin-inline-start:-.625rem;-webkit-margin-end:0;margin-inline-end:0}:host[data-size=s] .t-icons{height:var(--tui-height-s)}:host[data-size=m] .t-icons{height:var(--tui-height-m)}:host[data-size=l] .t-icons{height:var(--tui-height-l)}.t-tooltip{margin:0 0 0 .25rem;-webkit-margin-start:.25rem;margin-inline-start:.25rem;-webkit-margin-end:0;margin-inline-end:0}.t-absolute-wrapper{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;flex-direction:column;justify-content:center}:host[data-size=m] .t-absolute-wrapper{height:var(--tui-height-m)}:host[data-size=l] .t-absolute-wrapper{height:var(--tui-height-l)}.t-wrapper{position:relative;display:flex;align-items:center;padding:0;box-sizing:border-box}:host[data-size=s] .t-wrapper{min-height:var(--tui-height-s);padding:calc((var(--tui-height-s) - 1.5rem) / 2) 0}:host[data-size=m] .t-wrapper{min-height:var(--tui-height-m);padding:calc((var(--tui-height-m) - var(--tui-height-xs) - .25rem) / 2) 0}:host[data-size=l] .t-wrapper{padding:calc((var(--tui-height-l) - var(--tui-height-s) - .25rem) / 2) 0}:host[data-size=m]:not(._label-outside) .t-wrapper{padding:calc((var(--tui-height-m) - 2rem) / 2) 0}:host[data-size=l]:not(._label-outside) .t-wrapper{padding:calc((var(--tui-height-l) - 2.5rem) / 2) 0}.t-tag{margin:.125rem .5rem .125rem -.25rem;-webkit-margin-start:-.25rem;margin-inline-start:-.25rem;-webkit-margin-end:.5rem;margin-inline-end:.5rem;max-width:100%;flex-shrink:0}.t-text:after{content:\",\\a0\"}.t-text_disabled{color:var(--tui-text-03)}.t-text_error{color:var(--tui-negative)}.t-text:not(.t-text_comma):last-of-type:after{content:\"\"}:host:not(._expandable) .t-text{white-space:nowrap}.t-input-wrapper{position:relative;flex:1;max-width:100%}.t-input-wrapper_collapsed{flex:0;margin:0 0 0 -.5rem;-webkit-margin-start:-.5rem;margin-inline-start:-.5rem;-webkit-margin-end:0;margin-inline-end:0}:host[data-size=s] .t-input-wrapper{min-height:1.5rem}:host[data-size=m] .t-input-wrapper{min-height:calc(var(--tui-height-xs) + 2 * .125rem)}:host[data-size=l] .t-input-wrapper{min-height:calc(var(--tui-height-s) + 2 * .125rem)}:host:not(._label-outside) .t-input-wrapper{min-height:1rem}.t-ghost{visibility:hidden;white-space:pre;text-overflow:clip;min-width:.125rem}:host:not(._expandable) .t-ghost{min-width:2rem}.t-native{margin:0;border:0;border-radius:inherit;background:none;font-size:inherit;line-height:inherit;font-weight:inherit;color:inherit;caret-color:currentColor;outline:none;-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}.t-native:-webkit-autofill,.t-native:-webkit-autofill:hover,.t-native:-webkit-autofill:focus{caret-color:var(--tui-base-09);border-radius:inherit;color:inherit!important;background-color:transparent!important;-webkit-text-fill-color:var(--tui-text-01)!important;border-color:var(--tui-autofill);-webkit-box-shadow:0 0 0 100rem var(--tui-autofill) inset!important}.t-native_hidden{opacity:0;text-indent:-10em}.t-native::placeholder{color:var(--tui-text-03);opacity:0}[tuiWrapper][data-mode=onDark] .t-native::placeholder{color:var(--tui-text-03-night)}:host._focused .t-native:not(:-moz-read-only)::placeholder{opacity:1}:host._focused .t-native:not(:read-only)::placeholder{opacity:1}.t-error-icon{display:block;color:var(--tui-error-fill);width:1rem;height:1rem}\n"], components: [{ type: i1__namespace.TuiHostedDropdownComponent, selector: "tui-hosted-dropdown", inputs: ["content", "sided", "canOpen", "open"], outputs: ["openChange", "focusedChange"] }, { type: i1__namespace.TuiSvgComponent, selector: "tui-svg", inputs: ["src"] }, { type: i1__namespace.TuiScrollbarComponent, selector: "tui-scrollbar", inputs: ["hidden"] }, { type: i2__namespace.TuiTagComponent, selector: "tui-tag, a[tuiTag], button[tuiTag]", inputs: ["value", "editable", "separator", "maxLength", "size", "showLoader", "status", "hoverable", "removable", "disabled", "autoColor", "leftContent"], outputs: ["edited"] }, { type: i1__namespace.TuiTooltipComponent, selector: "tui-tooltip", inputs: ["content", "direction", "appearance", "showDelay", "hideDelay", "describeId"] }], directives: [{ type: i3__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4__namespace.TuiActiveZoneDirective, selector: "[tuiActiveZone]:not(ng-container), [tuiActiveZoneChange]:not(ng-container), [tuiActiveZoneParent]:not(ng-container)", inputs: ["tuiActiveZoneParent"], outputs: ["tuiActiveZoneChange"], exportAs: ["tuiActiveZone"] }, { type: i1__namespace.TuiWrapperDirective, selector: "[tuiWrapper]", inputs: ["disabled", "readOnly", "hover", "active", "focus", "invalid", "appearance"] }, { type: i5__namespace.PolymorpheusOutletDirective, selector: "[polymorpheusOutlet]", inputs: ["polymorpheusOutlet", "polymorpheusOutletContext"] }, { type: i3__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4__namespace.TuiFocusableDirective, selector: "[tuiFocusable]", inputs: ["tuiFocusable"] }, { type: i6__namespace.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i6__namespace.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i6__namespace.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], pipes: { "async": i3__namespace.AsyncPipe }, viewProviders: [providers.FIXED_DROPDOWN_CONTROLLER_PROVIDER], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
|
|
797
779
|
__decorate([
|
|
798
780
|
i4.tuiDefaultProp()
|
|
799
781
|
], TuiInputTagComponent.prototype, "separator", void 0);
|
|
@@ -854,9 +836,6 @@
|
|
|
854
836
|
}] }, { type: i0__namespace.ChangeDetectorRef, decorators: [{
|
|
855
837
|
type: i0.Inject,
|
|
856
838
|
args: [i0.ChangeDetectorRef]
|
|
857
|
-
}] }, { type: i4__namespace.TuiScrollService, decorators: [{
|
|
858
|
-
type: i0.Inject,
|
|
859
|
-
args: [i4.TuiScrollService]
|
|
860
839
|
}] }, { type: i0__namespace.ElementRef, decorators: [{
|
|
861
840
|
type: i0.Inject,
|
|
862
841
|
args: [i0.ElementRef]
|
|
@@ -941,9 +920,6 @@
|
|
|
941
920
|
}], errorIconTemplate: [{
|
|
942
921
|
type: i0.ViewChild,
|
|
943
922
|
args: ['errorIcon']
|
|
944
|
-
}], scrollerSetter: [{
|
|
945
|
-
type: i0.ViewChild,
|
|
946
|
-
args: [i1.TuiScrollbarComponent]
|
|
947
923
|
}], size: [{
|
|
948
924
|
type: i0.HostBinding,
|
|
949
925
|
args: ['attr.data-size']
|