@taiga-ui/core 4.52.0-canary.abf3e8c → 4.52.0-canary.ae38a1e
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/components/calendar/calendar-sheet.component.d.ts +1 -1
- package/components/calendar/calendar-sheet.pipe.d.ts +1 -1
- package/components/calendar/calendar.options.d.ts +9 -0
- package/components/calendar/index.d.ts +1 -0
- package/components/calendar/order-week-days.pipe.d.ts +1 -1
- package/components/input/input.d.ts +1 -1
- package/components/input/input.directive.d.ts +1 -2
- package/components/label/label.directive.d.ts +1 -1
- package/components/link/index.d.ts +0 -1
- package/components/link/link.directive.d.ts +8 -6
- package/components/notification/notification.directive.d.ts +2 -2
- package/components/root/root.component.d.ts +1 -1
- package/components/scrollbar/scroll-ref.directive.d.ts +2 -0
- package/components/scrollbar/scrollbar.component.d.ts +1 -5
- package/components/spin-button/spin-button.component.d.ts +1 -1
- package/components/textfield/textfield-multi/textfield-multi.component.d.ts +1 -2
- package/components/textfield/textfield.component.d.ts +6 -7
- package/directives/appearance/appearance.directive.d.ts +1 -1
- package/directives/appearance/appearance.options.d.ts +1 -2
- package/directives/button-x/button-x.directive.d.ts +6 -0
- package/directives/button-x/index.d.ts +1 -0
- package/directives/index.d.ts +1 -0
- package/directives/items-handlers/items-handlers.directive.d.ts +5 -9
- package/directives/items-handlers/items-handlers.tokens.d.ts +4 -4
- package/fesm2022/taiga-ui-core-classes.mjs +3 -3
- package/fesm2022/taiga-ui-core-components-button.mjs +7 -7
- package/fesm2022/taiga-ui-core-components-button.mjs.map +1 -1
- package/fesm2022/taiga-ui-core-components-calendar.mjs +38 -36
- package/fesm2022/taiga-ui-core-components-calendar.mjs.map +1 -1
- package/fesm2022/taiga-ui-core-components-cell.mjs +7 -7
- package/fesm2022/taiga-ui-core-components-cell.mjs.map +1 -1
- package/fesm2022/taiga-ui-core-components-data-list.mjs +17 -17
- package/fesm2022/taiga-ui-core-components-data-list.mjs.map +1 -1
- package/fesm2022/taiga-ui-core-components-error.mjs +10 -10
- package/fesm2022/taiga-ui-core-components-expand.mjs +3 -3
- package/fesm2022/taiga-ui-core-components-icon.mjs +7 -7
- package/fesm2022/taiga-ui-core-components-icon.mjs.map +1 -1
- package/fesm2022/taiga-ui-core-components-input.mjs +10 -10
- package/fesm2022/taiga-ui-core-components-input.mjs.map +1 -1
- package/fesm2022/taiga-ui-core-components-label.mjs +11 -13
- package/fesm2022/taiga-ui-core-components-label.mjs.map +1 -1
- package/fesm2022/taiga-ui-core-components-link.mjs +13 -24
- package/fesm2022/taiga-ui-core-components-link.mjs.map +1 -1
- package/fesm2022/taiga-ui-core-components-loader.mjs +4 -4
- package/fesm2022/taiga-ui-core-components-loader.mjs.map +1 -1
- package/fesm2022/taiga-ui-core-components-notification.mjs +21 -23
- package/fesm2022/taiga-ui-core-components-notification.mjs.map +1 -1
- package/fesm2022/taiga-ui-core-components-root.mjs +6 -8
- package/fesm2022/taiga-ui-core-components-root.mjs.map +1 -1
- package/fesm2022/taiga-ui-core-components-scrollbar.mjs +43 -48
- package/fesm2022/taiga-ui-core-components-scrollbar.mjs.map +1 -1
- package/fesm2022/taiga-ui-core-components-spin-button.mjs +6 -6
- package/fesm2022/taiga-ui-core-components-spin-button.mjs.map +1 -1
- package/fesm2022/taiga-ui-core-components-textfield.mjs +47 -47
- package/fesm2022/taiga-ui-core-components-textfield.mjs.map +1 -1
- package/fesm2022/taiga-ui-core-components-title.mjs +7 -7
- package/fesm2022/taiga-ui-core-components-title.mjs.map +1 -1
- package/fesm2022/taiga-ui-core-directives-appearance.mjs +10 -10
- package/fesm2022/taiga-ui-core-directives-appearance.mjs.map +1 -1
- package/fesm2022/taiga-ui-core-directives-button-x.mjs +51 -0
- package/fesm2022/taiga-ui-core-directives-button-x.mjs.map +1 -0
- package/fesm2022/taiga-ui-core-directives-date-format.mjs +3 -3
- package/fesm2022/taiga-ui-core-directives-group.mjs +7 -7
- package/fesm2022/taiga-ui-core-directives-group.mjs.map +1 -1
- package/fesm2022/taiga-ui-core-directives-icons.mjs +10 -10
- package/fesm2022/taiga-ui-core-directives-icons.mjs.map +1 -1
- package/fesm2022/taiga-ui-core-directives-items-handlers.mjs +15 -36
- package/fesm2022/taiga-ui-core-directives-items-handlers.mjs.map +1 -1
- package/fesm2022/taiga-ui-core-directives-number-format.mjs +3 -3
- package/fesm2022/taiga-ui-core-directives.mjs +1 -0
- package/fesm2022/taiga-ui-core-directives.mjs.map +1 -1
- package/fesm2022/taiga-ui-core-pipes-format-number.mjs +3 -3
- package/fesm2022/taiga-ui-core-portals-alert.mjs +9 -9
- package/fesm2022/taiga-ui-core-portals-dialog.mjs +16 -15
- package/fesm2022/taiga-ui-core-portals-dialog.mjs.map +1 -1
- package/fesm2022/taiga-ui-core-portals-dropdown.mjs +119 -138
- package/fesm2022/taiga-ui-core-portals-dropdown.mjs.map +1 -1
- package/fesm2022/taiga-ui-core-portals-hint.mjs +61 -116
- package/fesm2022/taiga-ui-core-portals-hint.mjs.map +1 -1
- package/fesm2022/taiga-ui-core-portals-modal.mjs +8 -8
- package/fesm2022/taiga-ui-core-portals-modal.mjs.map +1 -1
- package/fesm2022/taiga-ui-core-portals-popup.mjs +9 -9
- package/fesm2022/taiga-ui-core-services.mjs +12 -56
- package/fesm2022/taiga-ui-core-services.mjs.map +1 -1
- package/fesm2022/taiga-ui-core-tokens.mjs +32 -42
- package/fesm2022/taiga-ui-core-tokens.mjs.map +1 -1
- package/fesm2022/taiga-ui-core-utils-miscellaneous.mjs +13 -4
- package/fesm2022/taiga-ui-core-utils-miscellaneous.mjs.map +1 -1
- package/fesm2022/taiga-ui-core.mjs +0 -1
- package/fesm2022/taiga-ui-core.mjs.map +1 -1
- package/index.d.ts +0 -1
- package/package.json +63 -64
- package/portals/dropdown/dropdown-close.directive.d.ts +15 -0
- package/portals/dropdown/dropdown-context.directive.d.ts +0 -1
- package/portals/dropdown/dropdown-open.directive.d.ts +6 -7
- package/portals/dropdown/dropdown-options.directive.d.ts +0 -4
- package/portals/dropdown/index.d.ts +1 -0
- package/portals/hint/hint-options.directive.d.ts +1 -20
- package/portals/hint/hint-position.directive.d.ts +4 -4
- package/portals/hint/hint.d.ts +1 -2
- package/portals/hint/hint.directive.d.ts +2 -2
- package/services/index.d.ts +0 -2
- package/styles/components/appearance.less +5 -0
- package/styles/components/button.less +10 -20
- package/styles/components/icon.less +11 -0
- package/styles/components/icons.less +2 -1
- package/styles/components/label.less +3 -12
- package/styles/components/link.less +8 -24
- package/styles/components/notification.less +31 -65
- package/styles/components/textfield.less +127 -212
- package/styles/components/title.less +8 -8
- package/styles/mixins/appearance.less +8 -24
- package/styles/mixins/appearance.scss +8 -24
- package/styles/mixins/date-picker.less +1 -1
- package/styles/mixins/picker.less +1 -1
- package/styles/mixins/picker.scss +1 -1
- package/styles/mixins/slider.less +4 -10
- package/styles/mixins/slider.scss +23 -21
- package/styles/taiga-ui-local.less +0 -1
- package/styles/taiga-ui-local.scss +0 -1
- package/styles/taiga-ui-theme.less +0 -1
- package/styles/theme/appearance/outline.less +9 -18
- package/styles/theme/appearance/primary.less +2 -4
- package/styles/theme/appearance/secondary.less +6 -14
- package/styles/theme/appearance/status.less +0 -4
- package/styles/theme/appearance/table.less +36 -35
- package/styles/theme/appearance/textfield.less +30 -27
- package/styles/theme/appearance.less +0 -1
- package/styles/theme/variables.less +16 -17
- package/styles/variables/media.less +13 -18
- package/styles/variables/media.scss +13 -13
- package/tokens/breakpoint.d.ts +4 -0
- package/tokens/common-icons.d.ts +2 -0
- package/tokens/index.d.ts +1 -4
- package/utils/miscellaneous/font-scaling.d.ts +2 -1
- package/animations/animations.d.ts +0 -109
- package/animations/index.d.ts +0 -1
- package/components/link/link.options.d.ts +0 -10
- package/fesm2022/taiga-ui-core-animations.mjs +0 -370
- package/fesm2022/taiga-ui-core-animations.mjs.map +0 -1
- package/services/breakpoint.service.d.ts +0 -16
- package/services/dark-theme.service.d.ts +0 -10
- package/styles/mixins/wrapper.less +0 -64
- package/styles/mixins/wrapper.scss +0 -61
- package/styles/theme/appearance/opposite.less +0 -17
- package/styles/theme/wrapper.less +0 -211
- package/tokens/day-type-handler.d.ts +0 -7
- package/tokens/first-day-of-week.d.ts +0 -5
- package/tokens/scroll-ref.d.ts +0 -2
- package/tokens/spin-icons.d.ts +0 -6
|
@@ -1,32 +1,33 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { inject, Directive, InjectionToken, signal, Optional, SkipSelf, input, viewChild, contentChild, forwardRef, ElementRef, computed, ViewContainerRef, contentChildren,
|
|
2
|
+
import { inject, Directive, InjectionToken, signal, Optional, SkipSelf, input, viewChild, contentChild, forwardRef, ElementRef, computed, ViewContainerRef, contentChildren, ChangeDetectionStrategy, ViewEncapsulation, Component, TemplateRef } from '@angular/core';
|
|
3
3
|
import { TUI_IS_ANDROID } from '@taiga-ui/cdk/tokens';
|
|
4
4
|
import { tuiInjectElement, tuiValue, tuiIsElement } from '@taiga-ui/cdk/utils/dom';
|
|
5
5
|
import { TuiItem } from '@taiga-ui/cdk/directives/item';
|
|
6
6
|
import { TuiLabel } from '@taiga-ui/core/components/label';
|
|
7
|
-
import * as
|
|
7
|
+
import * as i2 from '@taiga-ui/core/portals/dropdown';
|
|
8
8
|
import { TuiDropdownDirective, TuiDropdownOpen, TuiDropdownFixed, TuiWithDropdownOpen, TuiDropdownContent } from '@taiga-ui/core/portals/dropdown';
|
|
9
9
|
import { AsyncPipe } from '@angular/common';
|
|
10
10
|
import { NgControl } from '@angular/forms';
|
|
11
11
|
import { WaResizeObserver } from '@ng-web-apis/resize-observer';
|
|
12
12
|
import { tuiFocusedIn } from '@taiga-ui/cdk/utils/focus';
|
|
13
13
|
import { tuiGenerateId, tuiPx, tuiArrayToggle } from '@taiga-ui/cdk/utils/miscellaneous';
|
|
14
|
-
import {
|
|
15
|
-
import * as
|
|
14
|
+
import { tuiButtonOptionsProvider } from '@taiga-ui/core/components/button';
|
|
15
|
+
import * as i5 from '@taiga-ui/core/components/data-list';
|
|
16
16
|
import { tuiAsDataListHost, TuiWithOptionContent } from '@taiga-ui/core/components/data-list';
|
|
17
|
-
import * as
|
|
17
|
+
import * as i1 from '@taiga-ui/core/directives/appearance';
|
|
18
|
+
import { TuiAppearance } from '@taiga-ui/core/directives/appearance';
|
|
19
|
+
import { TuiButtonX } from '@taiga-ui/core/directives/button-x';
|
|
20
|
+
import * as i3 from '@taiga-ui/core/directives/icons';
|
|
18
21
|
import { TuiWithIcons, tuiIconEnd } from '@taiga-ui/core/directives/icons';
|
|
19
|
-
import * as
|
|
22
|
+
import * as i4 from '@taiga-ui/core/directives/items-handlers';
|
|
20
23
|
import { TuiWithItemsHandlers, TUI_ITEMS_HANDLERS } from '@taiga-ui/core/directives/items-handlers';
|
|
21
|
-
import {
|
|
24
|
+
import { TUI_CLEAR_WORD, TUI_AUXILIARY } from '@taiga-ui/core/tokens';
|
|
22
25
|
import { PolymorpheusOutlet, injectContext, PolymorpheusComponent } from '@taiga-ui/polymorpheus';
|
|
23
26
|
import { tuiProvide } from '@taiga-ui/cdk/utils/di';
|
|
24
27
|
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
|
|
25
28
|
import { TuiControl } from '@taiga-ui/cdk/classes';
|
|
26
29
|
import { tuiZonefree } from '@taiga-ui/cdk/observables';
|
|
27
|
-
import { TuiScrollControls } from '@taiga-ui/core/components/scrollbar';
|
|
28
|
-
import * as i1$1 from '@taiga-ui/core/directives/appearance';
|
|
29
|
-
import { TuiWithAppearance } from '@taiga-ui/core/directives/appearance';
|
|
30
|
+
import { TuiScrollControls, TUI_SCROLL_REF } from '@taiga-ui/core/components/scrollbar';
|
|
30
31
|
import { fromEvent, filter } from 'rxjs';
|
|
31
32
|
|
|
32
33
|
class TuiSelectLike {
|
|
@@ -44,10 +45,10 @@ class TuiSelectLike {
|
|
|
44
45
|
event.preventDefault();
|
|
45
46
|
this.el.focus();
|
|
46
47
|
}
|
|
47
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
48
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.
|
|
48
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TuiSelectLike, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
49
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.17", type: TuiSelectLike, isStandalone: true, selector: "[tuiSelectLike]", host: { attributes: { "tuiSelectLike": "", "inputmode": "none", "spellcheck": "false", "autocomplete": "off" }, listeners: { "beforeinput": "$event.inputType.includes(\"delete\") || $event.preventDefault()", "input.capture": "$event.inputType?.includes(\"delete\") && clear()", "mousedown": "prevent($event)" } }, ngImport: i0 }); }
|
|
49
50
|
}
|
|
50
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
51
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TuiSelectLike, decorators: [{
|
|
51
52
|
type: Directive,
|
|
52
53
|
args: [{
|
|
53
54
|
selector: '[tuiSelectLike]',
|
|
@@ -99,10 +100,10 @@ class TuiTextfieldOptionsDirective {
|
|
|
99
100
|
alias: 'tuiTextfieldCleaner',
|
|
100
101
|
});
|
|
101
102
|
}
|
|
102
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
103
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.
|
|
103
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TuiTextfieldOptionsDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
104
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.17", type: TuiTextfieldOptionsDirective, isStandalone: true, selector: "[tuiTextfieldAppearance],[tuiTextfieldSize],[tuiTextfieldCleaner]", inputs: { appearance: { classPropertyName: "appearance", publicName: "tuiTextfieldAppearance", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "tuiTextfieldSize", isSignal: true, isRequired: false, transformFunction: null }, cleaner: { classPropertyName: "cleaner", publicName: "tuiTextfieldCleaner", isSignal: true, isRequired: false, transformFunction: null } }, providers: [tuiProvide(TUI_TEXTFIELD_OPTIONS, TuiTextfieldOptionsDirective)], ngImport: i0 }); }
|
|
104
105
|
}
|
|
105
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
106
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TuiTextfieldOptionsDirective, decorators: [{
|
|
106
107
|
type: Directive,
|
|
107
108
|
args: [{
|
|
108
109
|
selector: '[tuiTextfieldAppearance],[tuiTextfieldSize],[tuiTextfieldCleaner]',
|
|
@@ -122,7 +123,6 @@ class TuiTextfieldComponent {
|
|
|
122
123
|
this.ghost = viewChild('ghost');
|
|
123
124
|
this.dropdown = inject(TuiDropdownDirective);
|
|
124
125
|
this.open = inject(TuiDropdownOpen);
|
|
125
|
-
this.icons = inject(TUI_COMMON_ICONS);
|
|
126
126
|
this.clear = inject(TUI_CLEAR_WORD);
|
|
127
127
|
this.label = contentChild(forwardRef(() => TuiLabel), { read: ElementRef });
|
|
128
128
|
this.computedFiller = computed((value = this.value()) => {
|
|
@@ -143,9 +143,6 @@ class TuiTextfieldComponent {
|
|
|
143
143
|
this.content = input();
|
|
144
144
|
this.filler = input('');
|
|
145
145
|
this.value = tuiValue(this.input);
|
|
146
|
-
// TODO: Replace with TuiTransitioned when fixed:
|
|
147
|
-
// https://github.com/angular/angular/issues/57846
|
|
148
|
-
afterNextRender(() => this.el.style.setProperty('transition', ''));
|
|
149
146
|
}
|
|
150
147
|
get id() {
|
|
151
148
|
return this.input()?.nativeElement.id || this.autoId;
|
|
@@ -185,18 +182,19 @@ class TuiTextfieldComponent {
|
|
|
185
182
|
});
|
|
186
183
|
}
|
|
187
184
|
}
|
|
188
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
189
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.
|
|
185
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TuiTextfieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
186
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: TuiTextfieldComponent, isStandalone: true, selector: "tui-textfield:not([multi])", inputs: { content: { classPropertyName: "content", publicName: "content", isSignal: true, isRequired: false, transformFunction: null }, filler: { classPropertyName: "filler", publicName: "filler", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "animationstart": "0", "animationcancel": "0", "click.self.prevent": "0", "pointerdown.self.prevent": "onIconClick()", "scroll.capture.zoneless": "onScroll($event.target)", "tuiActiveZoneChange": "!$event && control()?.valueAccessor?.onTouched?.()" }, properties: { "attr.data-size": "options.size()", "class._with-label": "hasLabel", "class._with-template": "content() && control()?.value != null", "class._disabled": "input()?.nativeElement?.disabled" }, classAttribute: "tui-interactive" }, providers: [
|
|
190
187
|
tuiButtonOptionsProvider({ size: 'xs', appearance: 'icon' }),
|
|
191
188
|
tuiAsDataListHost(TuiTextfieldComponent),
|
|
192
|
-
], queries: [{ propertyName: "label", first: true, predicate: i0.forwardRef(() => TuiLabel), descendants: true, read: ElementRef, isSignal: true }, { propertyName: "accessor", first: true, predicate: TUI_TEXTFIELD_ACCESSOR, descendants: true, isSignal: true }, { propertyName: "control", first: true, predicate: NgControl, descendants: true, isSignal: true }, { propertyName: "auxiliaries", predicate: TUI_AUXILIARY, descendants: true, isSignal: true }, { propertyName: "input", first: true, predicate: TUI_TEXTFIELD_ACCESSOR, descendants: true, read: ElementRef, isSignal: true }], viewQueries: [{ propertyName: "ghost", first: true, predicate: ["ghost"], descendants: true, isSignal: true }, { propertyName: "vcr", first: true, predicate: ["vcr"], descendants: true, read: ViewContainerRef, isSignal: true }], hostDirectives: [{ directive: i1.TuiDropdownDirective }, { directive: i1.TuiDropdownFixed }, { directive: i1.TuiWithDropdownOpen }, { directive: i2.TuiWithIcons }, { directive: i3.TuiWithItemsHandlers }, { directive: i4.TuiWithOptionContent }], ngImport: i0, template: "@if (control()?.control?.valueChanges | async) {}\n<ng-content select=\"input\" />\n<ng-content select=\"select\" />\n<ng-content select=\"textarea\" />\n<ng-content select=\"label\" />\n<span\n class=\"t-content\"\n (pointerdown)=\"input()?.nativeElement?.focus()\"\n (waResizeObserver)=\"$event[0] && onResize($event[0])\"\n>\n <ng-content />\n <ng-container #vcr />\n @if (options.cleaner()) {\n <button\n appearance=\"icon\"\n size=\"xs\"\n tabindex=\"-1\"\n tuiIconButton\n type=\"button\"\n class=\"t-clear\"\n [iconStart]=\"icons.close\"\n (click)=\"accessor()?.setValue(null)\"\n (pointerdown.zoneless.prevent)=\"input()?.nativeElement?.focus()\"\n >\n {{ clear() }}\n </button>\n }\n <ng-content select=\"tui-icon\" />\n</span>\n@if (control()?.value != null) {\n <span class=\"t-template\">\n <ng-container *polymorpheusOutlet=\"content() as text; context: {$implicit: control()?.value}\">\n {{ text }}\n </ng-container>\n </span>\n}\n@if (showFiller()) {\n <input\n #ghost\n aria-hidden=\"true\"\n disabled\n class=\"t-filler\"\n [value]=\"computedFiller()\"\n />\n}\n", styles: ["tui-textfield{scrollbar-width:none;-ms-overflow-style:none;transition-property:color;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out;--t-height: var(--tui-height-l);--t-padding: var(--tui-padding-l);--t-label-y: -.75rem;--t-label-font: var(--tui-font-text-s);--t-end: 0rem;--t-start: 0rem;position:relative;display:flex;flex-wrap:wrap;align-items:center;cursor:pointer;min-block-size:var(--t-height);padding:0 var(--t-padding);border-radius:var(--tui-radius-l);font:var(--tui-font-text-ui-m);line-height:1.25rem;box-sizing:border-box;gap:0 .25rem;isolation:isolate}tui-textfield::-webkit-scrollbar,tui-textfield::-webkit-scrollbar-thumb{display:none}tui-textfield[tuiIcons]:read-only{color:var(--tui-text-tertiary)}tui-textfield[style*=\"--t-icon-start:\"]{--t-start: 2.25rem}tui-textfield[style*=\"--t-icon-end:\"]{--t-end: 2.25rem}tui-textfield[tuiIcons]:after{position:relative;block-size:auto;align-self:stretch;border-inline-start:var(--t-padding) solid transparent;border-inline-end:var(--t-padding) solid transparent;margin:0 calc(-1 * var(--t-padding))}tui-textfield::-webkit-resizer{border:.25rem solid transparent;inline-size:.5rem;block-size:.5rem;box-sizing:content-box;color:var(--tui-text-tertiary);background:linear-gradient(-45deg,transparent,transparent .125rem,currentColor .125rem,currentColor .1875rem,transparent .1875rem,transparent .25rem,currentColor .25rem,currentColor .3125rem,transparent .35rem);background-clip:content-box}tui-textfield label,tui-textfield>.t-content,tui-textfield>.t-template{pointer-events:none}tui-textfield input,tui-textfield select,tui-textfield textarea{font:inherit;resize:none;outline:none;padding-block-start:1.125rem;padding-block-end:1.125rem;color:var(--tui-text-primary)}tui-textfield input[inputmode=none],tui-textfield select[inputmode=none],tui-textfield textarea[inputmode=none]{caret-color:transparent}tui-textfield[data-size=s]{--t-height: var(--tui-height-s);--t-padding: var(--tui-padding-s);border-radius:var(--tui-radius-m);gap:0;font:var(--tui-font-text-ui-s);line-height:1rem}tui-textfield[data-size=s][style*=\"--t-icon-start:\"]{--t-start: 1.25rem}tui-textfield[data-size=s][style*=\"--t-icon-end:\"]{--t-end: 1.25rem}tui-textfield[data-size=s]:before{margin-inline-end:.5rem;margin-inline-start:-.125rem;font-size:1rem}tui-textfield[data-size=s]:after{margin-inline-end:calc(-.125rem - var(--t-padding));margin-inline-start:calc(.625rem - var(--t-padding));font-size:1rem}tui-textfield[data-size=s] input,tui-textfield[data-size=s] select,tui-textfield[data-size=s] textarea{padding-block-start:.5rem;padding-block-end:.5rem}tui-textfield[data-size=s]>.t-content{margin-inline-end:-.375rem}tui-textfield[data-size=m]{--t-height: var(--tui-height-m);--t-padding: var(--tui-padding-m);--t-label-font: var(--tui-font-text-xs);--t-label-y: -.5625rem;border-radius:var(--tui-radius-m);font:var(--tui-font-text-ui-s);line-height:1rem}tui-textfield[data-size=m][style*=\"--t-icon-start:\"]{--t-start: 1.75rem}tui-textfield[data-size=m][style*=\"--t-icon-end:\"]{--t-end: 1.75rem}tui-textfield[data-size=m]:before{margin-inline-start:-.125rem;margin-inline-end:.125rem}tui-textfield[data-size=m]:after{margin-inline-start:calc(.25rem - var(--t-padding));margin-inline-end:calc(-.125rem - var(--t-padding))}tui-textfield[data-size=m] input,tui-textfield[data-size=m] select,tui-textfield[data-size=m] textarea{padding-block-start:.875rem;padding-block-end:.875rem}tui-textfield[data-size=m]>.t-content{margin-inline-end:-.125rem}tui-textfield[data-size=l]{--t-label: -.7rem}tui-textfield[tuiIcons]:hover{color:var(--tui-text-secondary)}tui-textfield[tuiIcons]:hover:has(input:read-only):not([multi]),tui-textfield[tuiIcons]:hover:has(textarea:read-only),tui-textfield[tuiIcons]:hover:has(select[data-mode~=readonly]){color:var(--tui-text-tertiary)}tui-textfield:before{z-index:1;margin-inline-end:.5rem;pointer-events:none}tui-textfield:has(:disabled:not(.t-filler,button,option,[tuiChip])):before,tui-textfield:has(:disabled:not(.t-filler,button,option,[tuiChip])):after,tui-textfield:has(:disabled:not(.t-filler,button,option,[tuiChip]))>.t-template{opacity:var(--tui-disabled-opacity)}tui-textfield._disabled:before,tui-textfield._disabled:after,tui-textfield._disabled>.t-template{opacity:var(--tui-disabled-opacity)}tui-textfield:has(label:not(:empty))>.t-template,tui-textfield:has(label:not(:empty)) input:not([type=range]),tui-textfield:has(label:not(:empty)) select:defined,tui-textfield:has(label:not(:empty)) textarea:defined{padding-block-start:calc(var(--t-height) / 3);padding-block-end:0}tui-textfield:not([data-focus=true]):has(label:not(:empty))>.t-template::placeholder,tui-textfield:not([data-focus=true]):has(label:not(:empty)) input:not([type=range])::placeholder,tui-textfield:not([data-focus=true]):has(label:not(:empty)) select:defined::placeholder,tui-textfield:not([data-focus=true]):has(label:not(:empty)) textarea:defined::placeholder,tui-textfield:not([data-focus=true]):has(label:not(:empty))>.t-template._empty,tui-textfield:not([data-focus=true]):has(label:not(:empty)) input:not([type=range])._empty,tui-textfield:not([data-focus=true]):has(label:not(:empty)) select:defined._empty,tui-textfield:not([data-focus=true]):has(label:not(:empty)) textarea:defined._empty{color:transparent}tui-textfield._with-label>.t-template,tui-textfield._with-label input:not([type=range]),tui-textfield._with-label select:defined,tui-textfield._with-label textarea:defined{padding-block-start:calc(var(--t-height) / 3);padding-block-end:0}tui-textfield:not([data-focus=true])._with-label>.t-template::placeholder,tui-textfield:not([data-focus=true])._with-label input:not([type=range])::placeholder,tui-textfield:not([data-focus=true])._with-label select:defined::placeholder,tui-textfield:not([data-focus=true])._with-label textarea:defined::placeholder,tui-textfield:not([data-focus=true])._with-label>.t-template._empty,tui-textfield:not([data-focus=true])._with-label input:not([type=range])._empty,tui-textfield:not([data-focus=true])._with-label select:defined._empty,tui-textfield:not([data-focus=true])._with-label textarea:defined._empty{color:transparent}tui-textfield>.t-template,tui-textfield input:defined,tui-textfield select:defined,tui-textfield textarea:defined{position:absolute;top:0;left:0;inline-size:100%;block-size:100%;-webkit-appearance:none;appearance:none;box-sizing:border-box;border-radius:inherit;border-width:0;overscroll-behavior:none;padding-inline-start:calc(var(--t-start, 0rem) + var(--t-padding));padding-inline-end:calc(var(--t-end, 0rem) + var(--t-side) + var(--t-padding))}tui-textfield>.t-template{display:flex;align-items:center;color:var(--tui-text-primary)}tui-textfield._with-template input:first-of-type,tui-textfield._with-template select,tui-textfield._with-template textarea{color:transparent!important}tui-textfield input:not([type=range]),tui-textfield select:defined,tui-textfield textarea:defined{pointer-events:auto;background:none}tui-textfield input:not([type=range]):not(select):read-only~.t-filler,tui-textfield select:defined:not(select):read-only~.t-filler,tui-textfield textarea:defined:not(select):read-only~.t-filler{display:none}tui-textfield input:not([type=range]):disabled~label,tui-textfield select:defined:disabled~label,tui-textfield textarea:defined:disabled~label,tui-textfield input:not([type=range]):disabled~.t-content,tui-textfield select:defined:disabled~.t-content,tui-textfield textarea:defined:disabled~.t-content{opacity:var(--tui-disabled-opacity)}tui-textfield input:not([type=range]):disabled~label>tui-icon,tui-textfield select:defined:disabled~label>tui-icon,tui-textfield textarea:defined:disabled~label>tui-icon,tui-textfield input:not([type=range]):disabled~.t-content>tui-icon,tui-textfield select:defined:disabled~.t-content>tui-icon,tui-textfield textarea:defined:disabled~.t-content>tui-icon{display:none}tui-textfield input:not([type=range]):-webkit-autofill~label,tui-textfield select:defined:-webkit-autofill~label,tui-textfield textarea:defined:-webkit-autofill~label,tui-textfield input:not([type=range]):not(._empty):not(:placeholder-shown)~label,tui-textfield select:defined:not(._empty):not(:placeholder-shown)~label,tui-textfield textarea:defined:not(._empty):not(:placeholder-shown)~label{font:var(--t-label-font);line-height:var(--t-height);transform:translateY(var(--t-label-y))}tui-textfield input:not([type=range]):-webkit-autofill:not(:disabled)[data-mode~=invalid]~label,tui-textfield select:defined:-webkit-autofill:not(:disabled)[data-mode~=invalid]~label,tui-textfield textarea:defined:-webkit-autofill:not(:disabled)[data-mode~=invalid]~label,tui-textfield input:not([type=range]):not(._empty):not(:placeholder-shown):not(:disabled)[data-mode~=invalid]~label,tui-textfield select:defined:not(._empty):not(:placeholder-shown):not(:disabled)[data-mode~=invalid]~label,tui-textfield textarea:defined:not(._empty):not(:placeholder-shown):not(:disabled)[data-mode~=invalid]~label,tui-textfield input:not([type=range]):-webkit-autofill:invalid:not(:disabled):not([data-mode])~label,tui-textfield select:defined:-webkit-autofill:invalid:not(:disabled):not([data-mode])~label,tui-textfield textarea:defined:-webkit-autofill:invalid:not(:disabled):not([data-mode])~label,tui-textfield input:not([type=range]):not(._empty):not(:placeholder-shown):invalid:not(:disabled):not([data-mode])~label,tui-textfield select:defined:not(._empty):not(:placeholder-shown):invalid:not(:disabled):not([data-mode])~label,tui-textfield textarea:defined:not(._empty):not(:placeholder-shown):invalid:not(:disabled):not([data-mode])~label{color:var(--tui-text-negative)}tui-textfield input:not([type=range]):-webkit-autofill:not(:disabled):not([data-mode~=readonly])~.t-content .t-clear,tui-textfield select:defined:-webkit-autofill:not(:disabled):not([data-mode~=readonly])~.t-content .t-clear,tui-textfield textarea:defined:-webkit-autofill:not(:disabled):not([data-mode~=readonly])~.t-content .t-clear,tui-textfield input:not([type=range]):not(._empty):not(:placeholder-shown):not(:disabled):not([data-mode~=readonly])~.t-content .t-clear,tui-textfield select:defined:not(._empty):not(:placeholder-shown):not(:disabled):not([data-mode~=readonly])~.t-content .t-clear,tui-textfield textarea:defined:not(._empty):not(:placeholder-shown):not(:disabled):not([data-mode~=readonly])~.t-content .t-clear{display:flex}tui-textfield input:not([type=range]):not([data-mode~=readonly]):focus-visible:not([data-focus=false])::placeholder,tui-textfield select:defined:not([data-mode~=readonly]):focus-visible:not([data-focus=false])::placeholder,tui-textfield textarea:defined:not([data-mode~=readonly]):focus-visible:not([data-focus=false])::placeholder,tui-textfield input:not([type=range]):not([data-mode~=readonly]):focus-visible:not([data-focus=false])._empty,tui-textfield select:defined:not([data-mode~=readonly]):focus-visible:not([data-focus=false])._empty,tui-textfield textarea:defined:not([data-mode~=readonly]):focus-visible:not([data-focus=false])._empty{color:var(--tui-text-tertiary)}tui-textfield input:not([type=range]):not([data-mode~=readonly]):focus-visible:not([data-focus=false])~label,tui-textfield select:defined:not([data-mode~=readonly]):focus-visible:not([data-focus=false])~label,tui-textfield textarea:defined:not([data-mode~=readonly]):focus-visible:not([data-focus=false])~label{color:var(--tui-text-primary)!important;font:var(--t-label-font);line-height:var(--t-height);transform:translateY(var(--t-label-y))}tui-textfield input:not([type=range]):not([data-mode~=readonly])[data-focus=true]::placeholder,tui-textfield select:defined:not([data-mode~=readonly])[data-focus=true]::placeholder,tui-textfield textarea:defined:not([data-mode~=readonly])[data-focus=true]::placeholder,tui-textfield input:not([type=range]):not([data-mode~=readonly])[data-focus=true]._empty,tui-textfield select:defined:not([data-mode~=readonly])[data-focus=true]._empty,tui-textfield textarea:defined:not([data-mode~=readonly])[data-focus=true]._empty{color:var(--tui-text-tertiary)}tui-textfield input:not([type=range]):not([data-mode~=readonly])[data-focus=true]~label,tui-textfield select:defined:not([data-mode~=readonly])[data-focus=true]~label,tui-textfield textarea:defined:not([data-mode~=readonly])[data-focus=true]~label{color:var(--tui-text-primary)!important;font:var(--t-label-font);line-height:var(--t-height);transform:translateY(var(--t-label-y))}tui-textfield input:not([type=range]):not([data-mode~=readonly])[tuiWrapper]:not(._focused):has(:focus-visible)::placeholder,tui-textfield select:defined:not([data-mode~=readonly])[tuiWrapper]:not(._focused):has(:focus-visible)::placeholder,tui-textfield textarea:defined:not([data-mode~=readonly])[tuiWrapper]:not(._focused):has(:focus-visible)::placeholder,tui-textfield input:not([type=range]):not([data-mode~=readonly])[tuiWrapper]._focused::placeholder,tui-textfield select:defined:not([data-mode~=readonly])[tuiWrapper]._focused::placeholder,tui-textfield textarea:defined:not([data-mode~=readonly])[tuiWrapper]._focused::placeholder,tui-textfield input:not([type=range]):not([data-mode~=readonly])[tuiWrapper]:not(._focused):has(:focus-visible)._empty,tui-textfield select:defined:not([data-mode~=readonly])[tuiWrapper]:not(._focused):has(:focus-visible)._empty,tui-textfield textarea:defined:not([data-mode~=readonly])[tuiWrapper]:not(._focused):has(:focus-visible)._empty,tui-textfield input:not([type=range]):not([data-mode~=readonly])[tuiWrapper]._focused._empty,tui-textfield select:defined:not([data-mode~=readonly])[tuiWrapper]._focused._empty,tui-textfield textarea:defined:not([data-mode~=readonly])[tuiWrapper]._focused._empty{color:var(--tui-text-tertiary)}tui-textfield input:not([type=range]):not([data-mode~=readonly])[tuiWrapper]:not(._focused):has(:focus-visible)~label,tui-textfield select:defined:not([data-mode~=readonly])[tuiWrapper]:not(._focused):has(:focus-visible)~label,tui-textfield textarea:defined:not([data-mode~=readonly])[tuiWrapper]:not(._focused):has(:focus-visible)~label,tui-textfield input:not([type=range]):not([data-mode~=readonly])[tuiWrapper]._focused~label,tui-textfield select:defined:not([data-mode~=readonly])[tuiWrapper]._focused~label,tui-textfield textarea:defined:not([data-mode~=readonly])[tuiWrapper]._focused~label{color:var(--tui-text-primary)!important;font:var(--t-label-font);line-height:var(--t-height);transform:translateY(var(--t-label-y))}@supports (-webkit-touch-callout: none){tui-textfield input:not([type=range])._ios-fix,tui-textfield select:defined._ios-fix,tui-textfield textarea:defined._ios-fix{position:fixed;left:1000rem}}tui-textfield [tuiLabel][tuiLabel][tuiLabel]{transition-property:all;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;position:relative;display:block;flex:1;align-self:flex-start;font-size:inherit;line-height:var(--t-height);transition-duration:inherit}tui-textfield label:defined,tui-textfield input:defined::placeholder,tui-textfield textarea:defined::placeholder,tui-textfield select:defined._empty{color:var(--tui-text-secondary)}tui-textfield select:not([data-mode~=readonly]){cursor:pointer}tui-textfield select option[value=\"\"]:disabled{color:transparent}tui-textfield select optgroup,tui-textfield select option{background-color:var(--tui-background-elevation-3)}tui-textfield select optgroup,tui-textfield select option:not(:disabled){color:var(--tui-text-primary)}tui-textfield button,tui-textfield a{pointer-events:auto}tui-textfield>.t-content{z-index:1;display:flex;block-size:var(--t-height);align-items:center;gap:inherit;margin-inline-start:auto;isolation:isolate;border-radius:inherit}tui-textfield>.t-content>tui-icon{pointer-events:auto}tui-textfield textarea~.t-content{min-inline-size:.5rem}tui-textfield .t-clear{z-index:1;display:none;pointer-events:auto}tui-textfield>.t-filler:defined{pointer-events:none;color:var(--tui-text-tertiary);opacity:1}tui-textfield [tuiFluidTypography]{font-weight:700}tui-textfield [tuiSelectLike]:not(:read-only){cursor:pointer}tui-textfield:has(input[type=tel]){direction:ltr}\n"], dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "directive", type: PolymorpheusOutlet, selector: "[polymorpheusOutlet]", inputs: ["polymorpheusOutlet", "polymorpheusOutletContext"] }, { kind: "directive", type: TuiButton, selector: "a[tuiButton],button[tuiButton],a[tuiIconButton],button[tuiIconButton]", inputs: ["size"] }, { kind: "directive", type: WaResizeObserver, selector: "[waResizeObserver]", inputs: ["box"], outputs: ["waResizeObserver"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
189
|
+
], queries: [{ propertyName: "label", first: true, predicate: i0.forwardRef(() => TuiLabel), descendants: true, read: ElementRef, isSignal: true }, { propertyName: "accessor", first: true, predicate: TUI_TEXTFIELD_ACCESSOR, descendants: true, isSignal: true }, { propertyName: "control", first: true, predicate: NgControl, descendants: true, isSignal: true }, { propertyName: "auxiliaries", predicate: TUI_AUXILIARY, descendants: true, isSignal: true }, { propertyName: "input", first: true, predicate: TUI_TEXTFIELD_ACCESSOR, descendants: true, read: ElementRef, isSignal: true }], viewQueries: [{ propertyName: "ghost", first: true, predicate: ["ghost"], descendants: true, isSignal: true }, { propertyName: "vcr", first: true, predicate: ["vcr"], descendants: true, read: ViewContainerRef, isSignal: true }], hostDirectives: [{ directive: i1.TuiAppearance }, { directive: i2.TuiDropdownDirective }, { directive: i2.TuiDropdownFixed }, { directive: i2.TuiWithDropdownOpen }, { directive: i3.TuiWithIcons }, { directive: i4.TuiWithItemsHandlers }, { directive: i5.TuiWithOptionContent }], ngImport: i0, template: "@if (control()?.control?.valueChanges | async) {}\n<ng-content select=\"input\" />\n<ng-content select=\"select\" />\n<ng-content select=\"textarea\" />\n<ng-content select=\"label\" />\n<span\n class=\"t-content\"\n (pointerdown)=\"input()?.nativeElement?.focus()\"\n (waResizeObserver)=\"$event[0] && onResize($event[0])\"\n>\n <ng-content />\n <ng-container #vcr />\n @if (options.cleaner()) {\n <button\n tuiButtonX\n (click)=\"accessor()?.setValue(null)\"\n >\n {{ clear() }}\n </button>\n }\n <ng-content select=\"tui-icon\" />\n</span>\n@if (control()?.value != null) {\n <span class=\"t-template\">\n <ng-container *polymorpheusOutlet=\"content() as text; context: {$implicit: control()?.value}\">\n {{ text }}\n </ng-container>\n </span>\n}\n@if (showFiller()) {\n <input\n #ghost\n aria-hidden=\"true\"\n disabled\n class=\"t-filler\"\n [value]=\"computedFiller()\"\n />\n}\n", styles: ["tui-textfield{scrollbar-width:none;-ms-overflow-style:none;transition-property:color;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out;--t-height: var(--tui-height-l);--t-padding: var(--tui-padding-l);--t-label-y: -.75rem;--t-label-font: var(--tui-font-body-s);--t-end: 0rem;--t-start: 0rem;position:relative;display:flex;flex-wrap:wrap;align-items:flex-start;min-block-size:var(--t-height);padding:0 var(--t-padding);border-radius:var(--tui-radius-l);font:var(--tui-font-ui-m);line-height:1.25rem;box-sizing:border-box;gap:0 .25rem;isolation:isolate}tui-textfield::-webkit-scrollbar,tui-textfield::-webkit-scrollbar-thumb{display:none}tui-textfield[tuiAppearance]{outline:none}tui-textfield[tuiAppearance][data-appearance=\"\"]{color:var(--tui-text-tertiary)}@media (hover: hover) and (pointer: fine){tui-textfield[tuiAppearance][data-appearance=\"\"]:not([data-mode~=readonly]):is(a,button,select,textarea,input,label,.tui-interactive):not(:disabled):hover:not([data-state]){color:var(--tui-text-secondary)}}tui-textfield[tuiAppearance][data-appearance=\"\"]:not([data-mode~=readonly])[data-state=hover]{color:var(--tui-text-secondary)}tui-textfield[data-icon-start]{--t-start: 2.25rem}tui-textfield[data-icon-end]{--t-end: 2.25rem}tui-textfield[tuiIcons]:before{z-index:1;block-size:var(--t-height);margin-inline-end:.5rem;pointer-events:none}tui-textfield[tuiIcons]:after{position:relative;block-size:var(--t-height);cursor:pointer;border-inline:var(--t-padding) solid transparent;margin:0 calc(-1 * var(--t-padding))}tui-textfield::-webkit-resizer{border:.25rem solid transparent;inline-size:.5rem;block-size:.5rem;box-sizing:content-box;color:var(--tui-text-tertiary);background:linear-gradient(-45deg,transparent,transparent .125rem,currentColor .125rem,currentColor .1875rem,transparent .1875rem,transparent .25rem,currentColor .25rem,currentColor .3125rem,transparent .35rem);background-clip:content-box}tui-textfield [tuiLabel],tui-textfield>.t-content,tui-textfield>.t-template{pointer-events:none}tui-textfield[data-size=s]{--t-height: var(--tui-height-s);--t-padding: var(--tui-padding-s);border-radius:var(--tui-radius-m);gap:0;font:var(--tui-font-ui-s);line-height:1rem}tui-textfield[data-size=s][data-icon-start]{--t-start: 1.25rem}tui-textfield[data-size=s][data-icon-end]{--t-end: 1.25rem}tui-textfield[data-size=s]:before{margin-inline:-.125rem .5rem;font-size:1rem}tui-textfield[data-size=s]:after{margin-inline-start:calc(.625rem - var(--t-padding));margin-inline-end:calc(-.125rem - var(--t-padding));font-size:1rem}tui-textfield[data-size=s]>.t-content{margin-inline-end:-.375rem}tui-textfield[data-size=m]{--t-height: var(--tui-height-m);--t-padding: var(--tui-padding-m);--t-label-font: var(--tui-font-body-xs);--t-label-y: -.5625rem;border-radius:var(--tui-radius-m);font:var(--tui-font-ui-s);line-height:1rem}tui-textfield[data-size=m][data-icon-start]{--t-start: 1.75rem}tui-textfield[data-size=m][data-icon-end]{--t-end: 1.75rem}tui-textfield[data-size=m]:before{margin-inline:-.125rem .125rem}tui-textfield[data-size=m]:after{margin-inline-start:calc(.25rem - var(--t-padding));margin-inline-end:calc(-.125rem - var(--t-padding))}tui-textfield[data-size=m]>.t-content{margin-inline-end:-.125rem}tui-textfield[data-size=l]{--t-label: -.7rem}tui-textfield:is(._disabled,[data-state=disabled]){pointer-events:none;opacity:var(--tui-disabled-opacity)}tui-textfield:is(._disabled,[data-state=disabled]) [tuiAppearance]:is(._disabled,:disabled,[data-state=disabled]){opacity:1}tui-textfield:is(._disabled,[data-state=disabled]) tui-icon{display:none}tui-textfield._with-label>.t-template,tui-textfield._with-label .t-filler,tui-textfield._with-label [tuiInput]{padding-block-start:calc(var(--t-height) / 3);padding-block-end:0}tui-textfield._with-label:is(:not([data-focus=true]),[data-mode~=readonly])>.t-template::placeholder,tui-textfield._with-label:is(:not([data-focus=true]),[data-mode~=readonly]) [tuiInput]::placeholder,tui-textfield._with-label:is(:not([data-focus=true]),[data-mode~=readonly])>.t-template._empty,tui-textfield._with-label:is(:not([data-focus=true]),[data-mode~=readonly]) [tuiInput]._empty{color:transparent}tui-textfield>.t-template,tui-textfield .t-filler,tui-textfield [tuiInput]{position:absolute;inset:0 auto auto 0;inline-size:stretch;block-size:100%;-webkit-appearance:none;appearance:none;background:none;font:inherit;resize:none;outline:none;color:var(--tui-text-primary);box-sizing:border-box;border-radius:inherit;border-width:0;overscroll-behavior:none;padding-inline-start:calc(var(--t-start, 0rem) + var(--t-padding));padding-inline-end:calc(var(--t-end, 0rem) + var(--t-side, 0rem) + var(--t-padding))}tui-textfield>.t-template:is(input,textarea):read-only~.t-filler,tui-textfield .t-filler:is(input,textarea):read-only~.t-filler,tui-textfield [tuiInput]:is(input,textarea):read-only~.t-filler{display:none}tui-textfield>.t-template:disabled,tui-textfield .t-filler:disabled,tui-textfield [tuiInput]:disabled{animation:tuiPresent 1s infinite;opacity:1}tui-textfield>.t-template[inputmode=none],tui-textfield .t-filler[inputmode=none],tui-textfield [tuiInput][inputmode=none]{caret-color:transparent}tui-textfield>.t-template{display:flex;block-size:100%;align-items:center}tui-textfield._with-template [tuiInput]:first-of-type{color:transparent!important}tui-textfield [tuiInput]:-webkit-autofill [tuiLabel],tui-textfield [tuiInput][chrome-autofilled] [tuiLabel],tui-textfield [tuiInput]:not(._empty,:placeholder-shown) [tuiLabel],tui-textfield[multi][multi]:not(._empty) [tuiLabel],tui-textfield [tuiInput]:-webkit-autofill:not(tui-textfield)~[tuiLabel],tui-textfield [tuiInput][chrome-autofilled]:not(tui-textfield)~[tuiLabel],tui-textfield [tuiInput]:not(._empty,:placeholder-shown):not(tui-textfield)~[tuiLabel],tui-textfield[multi][multi]:not(._empty):not(tui-textfield)~[tuiLabel]{font:var(--t-label-font);line-height:var(--t-height);transform:translateY(var(--t-label-y))}tui-textfield [tuiLabel][tuiLabel][tuiLabel]{transition-property:all;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;position:relative;display:block;flex:1;align-self:flex-start;font-size:inherit;-webkit-user-select:none;user-select:none;line-height:var(--t-height);transition-duration:inherit}tui-textfield [tuiLabel],tui-textfield [tuiInput]::placeholder,tui-textfield [tuiInput]._empty{color:var(--tui-text-secondary)}tui-textfield select option[value=\"\"]:disabled{color:transparent}tui-textfield select optgroup,tui-textfield select option{background-color:var(--tui-background-elevation-3)}tui-textfield select optgroup,tui-textfield select option:not(:disabled){color:var(--tui-text-primary)}tui-textfield button,tui-textfield a,tui-textfield tui-icon{pointer-events:auto}tui-textfield>.t-content{z-index:1;display:flex;block-size:var(--t-height);align-items:center;gap:inherit;margin-inline-start:auto;isolation:isolate;border-radius:inherit}tui-textfield textarea~.t-content{min-inline-size:.5rem}tui-textfield:is([data-mode~=readonly],[data-state=disabled],._empty) [tuiButtonX],tui-textfield [tuiInput]._empty~.t-content [tuiButtonX],tui-textfield [tuiInput]:disabled~.t-content [tuiButtonX]{display:none}tui-textfield .t-filler{pointer-events:none!important;color:var(--tui-text-tertiary)}tui-textfield [tuiFluidTypography]{font-weight:700}tui-textfield [tuiSelectLike]:not(:read-only){cursor:pointer}tui-textfield:has(input[type=tel]){direction:ltr}tui-textfield:is([data-mode~=invalid],.tui-invalid,:invalid):not([data-mode~=readonly],[data-mode~=valid],[data-state=disabled],:disabled) [tuiInput]:not(._empty)~[tuiLabel],tui-textfield:is([data-mode~=invalid],.tui-invalid,:invalid):not([data-mode~=readonly],[data-mode~=valid],[data-state=disabled],:disabled)[multi]:not(._empty) [tuiLabel]{color:var(--tui-text-negative)}tui-textfield:not([data-mode~=readonly]):focus-visible:not([data-focus=false]) [tuiInput]::placeholder,tui-textfield:not([data-mode~=readonly]):focus-visible:not([data-focus=false]) [tuiInput]._empty{color:var(--tui-text-tertiary)}tui-textfield:not([data-mode~=readonly]):focus-visible:not([data-focus=false]) [tuiLabel]{color:var(--tui-text-primary)!important;font:var(--t-label-font);line-height:var(--t-height);transform:translateY(var(--t-label-y))}tui-textfield:not([data-mode~=readonly])[data-focus=true] [tuiInput]::placeholder,tui-textfield:not([data-mode~=readonly])[data-focus=true] [tuiInput]._empty{color:var(--tui-text-tertiary)}tui-textfield:not([data-mode~=readonly])[data-focus=true] [tuiLabel]{color:var(--tui-text-primary)!important;font:var(--t-label-font);line-height:var(--t-height);transform:translateY(var(--t-label-y))}\n"], dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "directive", type: PolymorpheusOutlet, selector: "[polymorpheusOutlet]", inputs: ["polymorpheusOutlet", "polymorpheusOutletContext"] }, { kind: "directive", type: TuiButtonX, selector: "[tuiButtonX]" }, { kind: "directive", type: WaResizeObserver, selector: "[waResizeObserver]", inputs: ["box"], outputs: ["waResizeObserver"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
193
190
|
}
|
|
194
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
191
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TuiTextfieldComponent, decorators: [{
|
|
195
192
|
type: Component,
|
|
196
|
-
args: [{ selector: 'tui-textfield:not([multi])', imports: [AsyncPipe, PolymorpheusOutlet,
|
|
193
|
+
args: [{ selector: 'tui-textfield:not([multi])', imports: [AsyncPipe, PolymorpheusOutlet, TuiButtonX, WaResizeObserver], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
|
|
197
194
|
tuiButtonOptionsProvider({ size: 'xs', appearance: 'icon' }),
|
|
198
195
|
tuiAsDataListHost(TuiTextfieldComponent),
|
|
199
196
|
], hostDirectives: [
|
|
197
|
+
TuiAppearance,
|
|
200
198
|
TuiDropdownDirective,
|
|
201
199
|
TuiDropdownFixed,
|
|
202
200
|
TuiWithDropdownOpen,
|
|
@@ -204,17 +202,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.16", ngImpo
|
|
|
204
202
|
TuiWithItemsHandlers,
|
|
205
203
|
TuiWithOptionContent,
|
|
206
204
|
], host: {
|
|
205
|
+
class: 'tui-interactive',
|
|
207
206
|
'[attr.data-size]': 'options.size()',
|
|
208
|
-
'[class._with-label]': 'hasLabel',
|
|
207
|
+
'[class._with-label]': 'hasLabel', // TODO :has([tuiLabel]
|
|
209
208
|
'[class._with-template]': 'content() && control()?.value != null',
|
|
210
|
-
'[class._disabled]': 'input()?.nativeElement?.disabled',
|
|
211
|
-
'
|
|
209
|
+
'[class._disabled]': 'input()?.nativeElement?.disabled', // TODO :has([tuiInput]:disabled)
|
|
210
|
+
'(animationstart)': '0', // TODO :has([tuiInput]:disabled)
|
|
211
|
+
'(animationcancel)': '0', // TODO :has([tuiInput]:disabled)
|
|
212
212
|
'(click.self.prevent)': '0',
|
|
213
|
+
// TODO preventing breaks resize: both, but not preventing breaks focus, fix
|
|
213
214
|
'(pointerdown.self.prevent)': 'onIconClick()',
|
|
214
215
|
'(scroll.capture.zoneless)': 'onScroll($event.target)',
|
|
215
216
|
'(tuiActiveZoneChange)': '!$event && control()?.valueAccessor?.onTouched?.()',
|
|
216
|
-
}, template: "@if (control()?.control?.valueChanges | async) {}\n<ng-content select=\"input\" />\n<ng-content select=\"select\" />\n<ng-content select=\"textarea\" />\n<ng-content select=\"label\" />\n<span\n class=\"t-content\"\n (pointerdown)=\"input()?.nativeElement?.focus()\"\n (waResizeObserver)=\"$event[0] && onResize($event[0])\"\n>\n <ng-content />\n <ng-container #vcr />\n @if (options.cleaner()) {\n <button\n appearance=\"icon\"\n size=\"xs\"\n tabindex=\"-1\"\n tuiIconButton\n type=\"button\"\n class=\"t-clear\"\n [iconStart]=\"icons.close\"\n (click)=\"accessor()?.setValue(null)\"\n (pointerdown.zoneless.prevent)=\"input()?.nativeElement?.focus()\"\n >\n {{ clear() }}\n </button>\n }\n <ng-content select=\"tui-icon\" />\n</span>\n@if (control()?.value != null) {\n <span class=\"t-template\">\n <ng-container *polymorpheusOutlet=\"content() as text; context: {$implicit: control()?.value}\">\n {{ text }}\n </ng-container>\n </span>\n}\n@if (showFiller()) {\n <input\n #ghost\n aria-hidden=\"true\"\n disabled\n class=\"t-filler\"\n [value]=\"computedFiller()\"\n />\n}\n", styles: ["tui-textfield{scrollbar-width:none;-ms-overflow-style:none;transition-property:color;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out;--t-height: var(--tui-height-l);--t-padding: var(--tui-padding-l);--t-label-y: -.75rem;--t-label-font: var(--tui-font-text-s);--t-end: 0rem;--t-start: 0rem;position:relative;display:flex;flex-wrap:wrap;align-items:center;cursor:pointer;min-block-size:var(--t-height);padding:0 var(--t-padding);border-radius:var(--tui-radius-l);font:var(--tui-font-text-ui-m);line-height:1.25rem;box-sizing:border-box;gap:0 .25rem;isolation:isolate}tui-textfield::-webkit-scrollbar,tui-textfield::-webkit-scrollbar-thumb{display:none}tui-textfield[tuiIcons]:read-only{color:var(--tui-text-tertiary)}tui-textfield[style*=\"--t-icon-start:\"]{--t-start: 2.25rem}tui-textfield[style*=\"--t-icon-end:\"]{--t-end: 2.25rem}tui-textfield[tuiIcons]:after{position:relative;block-size:auto;align-self:stretch;border-inline-start:var(--t-padding) solid transparent;border-inline-end:var(--t-padding) solid transparent;margin:0 calc(-1 * var(--t-padding))}tui-textfield::-webkit-resizer{border:.25rem solid transparent;inline-size:.5rem;block-size:.5rem;box-sizing:content-box;color:var(--tui-text-tertiary);background:linear-gradient(-45deg,transparent,transparent .125rem,currentColor .125rem,currentColor .1875rem,transparent .1875rem,transparent .25rem,currentColor .25rem,currentColor .3125rem,transparent .35rem);background-clip:content-box}tui-textfield label,tui-textfield>.t-content,tui-textfield>.t-template{pointer-events:none}tui-textfield input,tui-textfield select,tui-textfield textarea{font:inherit;resize:none;outline:none;padding-block-start:1.125rem;padding-block-end:1.125rem;color:var(--tui-text-primary)}tui-textfield input[inputmode=none],tui-textfield select[inputmode=none],tui-textfield textarea[inputmode=none]{caret-color:transparent}tui-textfield[data-size=s]{--t-height: var(--tui-height-s);--t-padding: var(--tui-padding-s);border-radius:var(--tui-radius-m);gap:0;font:var(--tui-font-text-ui-s);line-height:1rem}tui-textfield[data-size=s][style*=\"--t-icon-start:\"]{--t-start: 1.25rem}tui-textfield[data-size=s][style*=\"--t-icon-end:\"]{--t-end: 1.25rem}tui-textfield[data-size=s]:before{margin-inline-end:.5rem;margin-inline-start:-.125rem;font-size:1rem}tui-textfield[data-size=s]:after{margin-inline-end:calc(-.125rem - var(--t-padding));margin-inline-start:calc(.625rem - var(--t-padding));font-size:1rem}tui-textfield[data-size=s] input,tui-textfield[data-size=s] select,tui-textfield[data-size=s] textarea{padding-block-start:.5rem;padding-block-end:.5rem}tui-textfield[data-size=s]>.t-content{margin-inline-end:-.375rem}tui-textfield[data-size=m]{--t-height: var(--tui-height-m);--t-padding: var(--tui-padding-m);--t-label-font: var(--tui-font-text-xs);--t-label-y: -.5625rem;border-radius:var(--tui-radius-m);font:var(--tui-font-text-ui-s);line-height:1rem}tui-textfield[data-size=m][style*=\"--t-icon-start:\"]{--t-start: 1.75rem}tui-textfield[data-size=m][style*=\"--t-icon-end:\"]{--t-end: 1.75rem}tui-textfield[data-size=m]:before{margin-inline-start:-.125rem;margin-inline-end:.125rem}tui-textfield[data-size=m]:after{margin-inline-start:calc(.25rem - var(--t-padding));margin-inline-end:calc(-.125rem - var(--t-padding))}tui-textfield[data-size=m] input,tui-textfield[data-size=m] select,tui-textfield[data-size=m] textarea{padding-block-start:.875rem;padding-block-end:.875rem}tui-textfield[data-size=m]>.t-content{margin-inline-end:-.125rem}tui-textfield[data-size=l]{--t-label: -.7rem}tui-textfield[tuiIcons]:hover{color:var(--tui-text-secondary)}tui-textfield[tuiIcons]:hover:has(input:read-only):not([multi]),tui-textfield[tuiIcons]:hover:has(textarea:read-only),tui-textfield[tuiIcons]:hover:has(select[data-mode~=readonly]){color:var(--tui-text-tertiary)}tui-textfield:before{z-index:1;margin-inline-end:.5rem;pointer-events:none}tui-textfield:has(:disabled:not(.t-filler,button,option,[tuiChip])):before,tui-textfield:has(:disabled:not(.t-filler,button,option,[tuiChip])):after,tui-textfield:has(:disabled:not(.t-filler,button,option,[tuiChip]))>.t-template{opacity:var(--tui-disabled-opacity)}tui-textfield._disabled:before,tui-textfield._disabled:after,tui-textfield._disabled>.t-template{opacity:var(--tui-disabled-opacity)}tui-textfield:has(label:not(:empty))>.t-template,tui-textfield:has(label:not(:empty)) input:not([type=range]),tui-textfield:has(label:not(:empty)) select:defined,tui-textfield:has(label:not(:empty)) textarea:defined{padding-block-start:calc(var(--t-height) / 3);padding-block-end:0}tui-textfield:not([data-focus=true]):has(label:not(:empty))>.t-template::placeholder,tui-textfield:not([data-focus=true]):has(label:not(:empty)) input:not([type=range])::placeholder,tui-textfield:not([data-focus=true]):has(label:not(:empty)) select:defined::placeholder,tui-textfield:not([data-focus=true]):has(label:not(:empty)) textarea:defined::placeholder,tui-textfield:not([data-focus=true]):has(label:not(:empty))>.t-template._empty,tui-textfield:not([data-focus=true]):has(label:not(:empty)) input:not([type=range])._empty,tui-textfield:not([data-focus=true]):has(label:not(:empty)) select:defined._empty,tui-textfield:not([data-focus=true]):has(label:not(:empty)) textarea:defined._empty{color:transparent}tui-textfield._with-label>.t-template,tui-textfield._with-label input:not([type=range]),tui-textfield._with-label select:defined,tui-textfield._with-label textarea:defined{padding-block-start:calc(var(--t-height) / 3);padding-block-end:0}tui-textfield:not([data-focus=true])._with-label>.t-template::placeholder,tui-textfield:not([data-focus=true])._with-label input:not([type=range])::placeholder,tui-textfield:not([data-focus=true])._with-label select:defined::placeholder,tui-textfield:not([data-focus=true])._with-label textarea:defined::placeholder,tui-textfield:not([data-focus=true])._with-label>.t-template._empty,tui-textfield:not([data-focus=true])._with-label input:not([type=range])._empty,tui-textfield:not([data-focus=true])._with-label select:defined._empty,tui-textfield:not([data-focus=true])._with-label textarea:defined._empty{color:transparent}tui-textfield>.t-template,tui-textfield input:defined,tui-textfield select:defined,tui-textfield textarea:defined{position:absolute;top:0;left:0;inline-size:100%;block-size:100%;-webkit-appearance:none;appearance:none;box-sizing:border-box;border-radius:inherit;border-width:0;overscroll-behavior:none;padding-inline-start:calc(var(--t-start, 0rem) + var(--t-padding));padding-inline-end:calc(var(--t-end, 0rem) + var(--t-side) + var(--t-padding))}tui-textfield>.t-template{display:flex;align-items:center;color:var(--tui-text-primary)}tui-textfield._with-template input:first-of-type,tui-textfield._with-template select,tui-textfield._with-template textarea{color:transparent!important}tui-textfield input:not([type=range]),tui-textfield select:defined,tui-textfield textarea:defined{pointer-events:auto;background:none}tui-textfield input:not([type=range]):not(select):read-only~.t-filler,tui-textfield select:defined:not(select):read-only~.t-filler,tui-textfield textarea:defined:not(select):read-only~.t-filler{display:none}tui-textfield input:not([type=range]):disabled~label,tui-textfield select:defined:disabled~label,tui-textfield textarea:defined:disabled~label,tui-textfield input:not([type=range]):disabled~.t-content,tui-textfield select:defined:disabled~.t-content,tui-textfield textarea:defined:disabled~.t-content{opacity:var(--tui-disabled-opacity)}tui-textfield input:not([type=range]):disabled~label>tui-icon,tui-textfield select:defined:disabled~label>tui-icon,tui-textfield textarea:defined:disabled~label>tui-icon,tui-textfield input:not([type=range]):disabled~.t-content>tui-icon,tui-textfield select:defined:disabled~.t-content>tui-icon,tui-textfield textarea:defined:disabled~.t-content>tui-icon{display:none}tui-textfield input:not([type=range]):-webkit-autofill~label,tui-textfield select:defined:-webkit-autofill~label,tui-textfield textarea:defined:-webkit-autofill~label,tui-textfield input:not([type=range]):not(._empty):not(:placeholder-shown)~label,tui-textfield select:defined:not(._empty):not(:placeholder-shown)~label,tui-textfield textarea:defined:not(._empty):not(:placeholder-shown)~label{font:var(--t-label-font);line-height:var(--t-height);transform:translateY(var(--t-label-y))}tui-textfield input:not([type=range]):-webkit-autofill:not(:disabled)[data-mode~=invalid]~label,tui-textfield select:defined:-webkit-autofill:not(:disabled)[data-mode~=invalid]~label,tui-textfield textarea:defined:-webkit-autofill:not(:disabled)[data-mode~=invalid]~label,tui-textfield input:not([type=range]):not(._empty):not(:placeholder-shown):not(:disabled)[data-mode~=invalid]~label,tui-textfield select:defined:not(._empty):not(:placeholder-shown):not(:disabled)[data-mode~=invalid]~label,tui-textfield textarea:defined:not(._empty):not(:placeholder-shown):not(:disabled)[data-mode~=invalid]~label,tui-textfield input:not([type=range]):-webkit-autofill:invalid:not(:disabled):not([data-mode])~label,tui-textfield select:defined:-webkit-autofill:invalid:not(:disabled):not([data-mode])~label,tui-textfield textarea:defined:-webkit-autofill:invalid:not(:disabled):not([data-mode])~label,tui-textfield input:not([type=range]):not(._empty):not(:placeholder-shown):invalid:not(:disabled):not([data-mode])~label,tui-textfield select:defined:not(._empty):not(:placeholder-shown):invalid:not(:disabled):not([data-mode])~label,tui-textfield textarea:defined:not(._empty):not(:placeholder-shown):invalid:not(:disabled):not([data-mode])~label{color:var(--tui-text-negative)}tui-textfield input:not([type=range]):-webkit-autofill:not(:disabled):not([data-mode~=readonly])~.t-content .t-clear,tui-textfield select:defined:-webkit-autofill:not(:disabled):not([data-mode~=readonly])~.t-content .t-clear,tui-textfield textarea:defined:-webkit-autofill:not(:disabled):not([data-mode~=readonly])~.t-content .t-clear,tui-textfield input:not([type=range]):not(._empty):not(:placeholder-shown):not(:disabled):not([data-mode~=readonly])~.t-content .t-clear,tui-textfield select:defined:not(._empty):not(:placeholder-shown):not(:disabled):not([data-mode~=readonly])~.t-content .t-clear,tui-textfield textarea:defined:not(._empty):not(:placeholder-shown):not(:disabled):not([data-mode~=readonly])~.t-content .t-clear{display:flex}tui-textfield input:not([type=range]):not([data-mode~=readonly]):focus-visible:not([data-focus=false])::placeholder,tui-textfield select:defined:not([data-mode~=readonly]):focus-visible:not([data-focus=false])::placeholder,tui-textfield textarea:defined:not([data-mode~=readonly]):focus-visible:not([data-focus=false])::placeholder,tui-textfield input:not([type=range]):not([data-mode~=readonly]):focus-visible:not([data-focus=false])._empty,tui-textfield select:defined:not([data-mode~=readonly]):focus-visible:not([data-focus=false])._empty,tui-textfield textarea:defined:not([data-mode~=readonly]):focus-visible:not([data-focus=false])._empty{color:var(--tui-text-tertiary)}tui-textfield input:not([type=range]):not([data-mode~=readonly]):focus-visible:not([data-focus=false])~label,tui-textfield select:defined:not([data-mode~=readonly]):focus-visible:not([data-focus=false])~label,tui-textfield textarea:defined:not([data-mode~=readonly]):focus-visible:not([data-focus=false])~label{color:var(--tui-text-primary)!important;font:var(--t-label-font);line-height:var(--t-height);transform:translateY(var(--t-label-y))}tui-textfield input:not([type=range]):not([data-mode~=readonly])[data-focus=true]::placeholder,tui-textfield select:defined:not([data-mode~=readonly])[data-focus=true]::placeholder,tui-textfield textarea:defined:not([data-mode~=readonly])[data-focus=true]::placeholder,tui-textfield input:not([type=range]):not([data-mode~=readonly])[data-focus=true]._empty,tui-textfield select:defined:not([data-mode~=readonly])[data-focus=true]._empty,tui-textfield textarea:defined:not([data-mode~=readonly])[data-focus=true]._empty{color:var(--tui-text-tertiary)}tui-textfield input:not([type=range]):not([data-mode~=readonly])[data-focus=true]~label,tui-textfield select:defined:not([data-mode~=readonly])[data-focus=true]~label,tui-textfield textarea:defined:not([data-mode~=readonly])[data-focus=true]~label{color:var(--tui-text-primary)!important;font:var(--t-label-font);line-height:var(--t-height);transform:translateY(var(--t-label-y))}tui-textfield input:not([type=range]):not([data-mode~=readonly])[tuiWrapper]:not(._focused):has(:focus-visible)::placeholder,tui-textfield select:defined:not([data-mode~=readonly])[tuiWrapper]:not(._focused):has(:focus-visible)::placeholder,tui-textfield textarea:defined:not([data-mode~=readonly])[tuiWrapper]:not(._focused):has(:focus-visible)::placeholder,tui-textfield input:not([type=range]):not([data-mode~=readonly])[tuiWrapper]._focused::placeholder,tui-textfield select:defined:not([data-mode~=readonly])[tuiWrapper]._focused::placeholder,tui-textfield textarea:defined:not([data-mode~=readonly])[tuiWrapper]._focused::placeholder,tui-textfield input:not([type=range]):not([data-mode~=readonly])[tuiWrapper]:not(._focused):has(:focus-visible)._empty,tui-textfield select:defined:not([data-mode~=readonly])[tuiWrapper]:not(._focused):has(:focus-visible)._empty,tui-textfield textarea:defined:not([data-mode~=readonly])[tuiWrapper]:not(._focused):has(:focus-visible)._empty,tui-textfield input:not([type=range]):not([data-mode~=readonly])[tuiWrapper]._focused._empty,tui-textfield select:defined:not([data-mode~=readonly])[tuiWrapper]._focused._empty,tui-textfield textarea:defined:not([data-mode~=readonly])[tuiWrapper]._focused._empty{color:var(--tui-text-tertiary)}tui-textfield input:not([type=range]):not([data-mode~=readonly])[tuiWrapper]:not(._focused):has(:focus-visible)~label,tui-textfield select:defined:not([data-mode~=readonly])[tuiWrapper]:not(._focused):has(:focus-visible)~label,tui-textfield textarea:defined:not([data-mode~=readonly])[tuiWrapper]:not(._focused):has(:focus-visible)~label,tui-textfield input:not([type=range]):not([data-mode~=readonly])[tuiWrapper]._focused~label,tui-textfield select:defined:not([data-mode~=readonly])[tuiWrapper]._focused~label,tui-textfield textarea:defined:not([data-mode~=readonly])[tuiWrapper]._focused~label{color:var(--tui-text-primary)!important;font:var(--t-label-font);line-height:var(--t-height);transform:translateY(var(--t-label-y))}@supports (-webkit-touch-callout: none){tui-textfield input:not([type=range])._ios-fix,tui-textfield select:defined._ios-fix,tui-textfield textarea:defined._ios-fix{position:fixed;left:1000rem}}tui-textfield [tuiLabel][tuiLabel][tuiLabel]{transition-property:all;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;position:relative;display:block;flex:1;align-self:flex-start;font-size:inherit;line-height:var(--t-height);transition-duration:inherit}tui-textfield label:defined,tui-textfield input:defined::placeholder,tui-textfield textarea:defined::placeholder,tui-textfield select:defined._empty{color:var(--tui-text-secondary)}tui-textfield select:not([data-mode~=readonly]){cursor:pointer}tui-textfield select option[value=\"\"]:disabled{color:transparent}tui-textfield select optgroup,tui-textfield select option{background-color:var(--tui-background-elevation-3)}tui-textfield select optgroup,tui-textfield select option:not(:disabled){color:var(--tui-text-primary)}tui-textfield button,tui-textfield a{pointer-events:auto}tui-textfield>.t-content{z-index:1;display:flex;block-size:var(--t-height);align-items:center;gap:inherit;margin-inline-start:auto;isolation:isolate;border-radius:inherit}tui-textfield>.t-content>tui-icon{pointer-events:auto}tui-textfield textarea~.t-content{min-inline-size:.5rem}tui-textfield .t-clear{z-index:1;display:none;pointer-events:auto}tui-textfield>.t-filler:defined{pointer-events:none;color:var(--tui-text-tertiary);opacity:1}tui-textfield [tuiFluidTypography]{font-weight:700}tui-textfield [tuiSelectLike]:not(:read-only){cursor:pointer}tui-textfield:has(input[type=tel]){direction:ltr}\n"] }]
|
|
217
|
-
}]
|
|
217
|
+
}, template: "@if (control()?.control?.valueChanges | async) {}\n<ng-content select=\"input\" />\n<ng-content select=\"select\" />\n<ng-content select=\"textarea\" />\n<ng-content select=\"label\" />\n<span\n class=\"t-content\"\n (pointerdown)=\"input()?.nativeElement?.focus()\"\n (waResizeObserver)=\"$event[0] && onResize($event[0])\"\n>\n <ng-content />\n <ng-container #vcr />\n @if (options.cleaner()) {\n <button\n tuiButtonX\n (click)=\"accessor()?.setValue(null)\"\n >\n {{ clear() }}\n </button>\n }\n <ng-content select=\"tui-icon\" />\n</span>\n@if (control()?.value != null) {\n <span class=\"t-template\">\n <ng-container *polymorpheusOutlet=\"content() as text; context: {$implicit: control()?.value}\">\n {{ text }}\n </ng-container>\n </span>\n}\n@if (showFiller()) {\n <input\n #ghost\n aria-hidden=\"true\"\n disabled\n class=\"t-filler\"\n [value]=\"computedFiller()\"\n />\n}\n", styles: ["tui-textfield{scrollbar-width:none;-ms-overflow-style:none;transition-property:color;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out;--t-height: var(--tui-height-l);--t-padding: var(--tui-padding-l);--t-label-y: -.75rem;--t-label-font: var(--tui-font-body-s);--t-end: 0rem;--t-start: 0rem;position:relative;display:flex;flex-wrap:wrap;align-items:flex-start;min-block-size:var(--t-height);padding:0 var(--t-padding);border-radius:var(--tui-radius-l);font:var(--tui-font-ui-m);line-height:1.25rem;box-sizing:border-box;gap:0 .25rem;isolation:isolate}tui-textfield::-webkit-scrollbar,tui-textfield::-webkit-scrollbar-thumb{display:none}tui-textfield[tuiAppearance]{outline:none}tui-textfield[tuiAppearance][data-appearance=\"\"]{color:var(--tui-text-tertiary)}@media (hover: hover) and (pointer: fine){tui-textfield[tuiAppearance][data-appearance=\"\"]:not([data-mode~=readonly]):is(a,button,select,textarea,input,label,.tui-interactive):not(:disabled):hover:not([data-state]){color:var(--tui-text-secondary)}}tui-textfield[tuiAppearance][data-appearance=\"\"]:not([data-mode~=readonly])[data-state=hover]{color:var(--tui-text-secondary)}tui-textfield[data-icon-start]{--t-start: 2.25rem}tui-textfield[data-icon-end]{--t-end: 2.25rem}tui-textfield[tuiIcons]:before{z-index:1;block-size:var(--t-height);margin-inline-end:.5rem;pointer-events:none}tui-textfield[tuiIcons]:after{position:relative;block-size:var(--t-height);cursor:pointer;border-inline:var(--t-padding) solid transparent;margin:0 calc(-1 * var(--t-padding))}tui-textfield::-webkit-resizer{border:.25rem solid transparent;inline-size:.5rem;block-size:.5rem;box-sizing:content-box;color:var(--tui-text-tertiary);background:linear-gradient(-45deg,transparent,transparent .125rem,currentColor .125rem,currentColor .1875rem,transparent .1875rem,transparent .25rem,currentColor .25rem,currentColor .3125rem,transparent .35rem);background-clip:content-box}tui-textfield [tuiLabel],tui-textfield>.t-content,tui-textfield>.t-template{pointer-events:none}tui-textfield[data-size=s]{--t-height: var(--tui-height-s);--t-padding: var(--tui-padding-s);border-radius:var(--tui-radius-m);gap:0;font:var(--tui-font-ui-s);line-height:1rem}tui-textfield[data-size=s][data-icon-start]{--t-start: 1.25rem}tui-textfield[data-size=s][data-icon-end]{--t-end: 1.25rem}tui-textfield[data-size=s]:before{margin-inline:-.125rem .5rem;font-size:1rem}tui-textfield[data-size=s]:after{margin-inline-start:calc(.625rem - var(--t-padding));margin-inline-end:calc(-.125rem - var(--t-padding));font-size:1rem}tui-textfield[data-size=s]>.t-content{margin-inline-end:-.375rem}tui-textfield[data-size=m]{--t-height: var(--tui-height-m);--t-padding: var(--tui-padding-m);--t-label-font: var(--tui-font-body-xs);--t-label-y: -.5625rem;border-radius:var(--tui-radius-m);font:var(--tui-font-ui-s);line-height:1rem}tui-textfield[data-size=m][data-icon-start]{--t-start: 1.75rem}tui-textfield[data-size=m][data-icon-end]{--t-end: 1.75rem}tui-textfield[data-size=m]:before{margin-inline:-.125rem .125rem}tui-textfield[data-size=m]:after{margin-inline-start:calc(.25rem - var(--t-padding));margin-inline-end:calc(-.125rem - var(--t-padding))}tui-textfield[data-size=m]>.t-content{margin-inline-end:-.125rem}tui-textfield[data-size=l]{--t-label: -.7rem}tui-textfield:is(._disabled,[data-state=disabled]){pointer-events:none;opacity:var(--tui-disabled-opacity)}tui-textfield:is(._disabled,[data-state=disabled]) [tuiAppearance]:is(._disabled,:disabled,[data-state=disabled]){opacity:1}tui-textfield:is(._disabled,[data-state=disabled]) tui-icon{display:none}tui-textfield._with-label>.t-template,tui-textfield._with-label .t-filler,tui-textfield._with-label [tuiInput]{padding-block-start:calc(var(--t-height) / 3);padding-block-end:0}tui-textfield._with-label:is(:not([data-focus=true]),[data-mode~=readonly])>.t-template::placeholder,tui-textfield._with-label:is(:not([data-focus=true]),[data-mode~=readonly]) [tuiInput]::placeholder,tui-textfield._with-label:is(:not([data-focus=true]),[data-mode~=readonly])>.t-template._empty,tui-textfield._with-label:is(:not([data-focus=true]),[data-mode~=readonly]) [tuiInput]._empty{color:transparent}tui-textfield>.t-template,tui-textfield .t-filler,tui-textfield [tuiInput]{position:absolute;inset:0 auto auto 0;inline-size:stretch;block-size:100%;-webkit-appearance:none;appearance:none;background:none;font:inherit;resize:none;outline:none;color:var(--tui-text-primary);box-sizing:border-box;border-radius:inherit;border-width:0;overscroll-behavior:none;padding-inline-start:calc(var(--t-start, 0rem) + var(--t-padding));padding-inline-end:calc(var(--t-end, 0rem) + var(--t-side, 0rem) + var(--t-padding))}tui-textfield>.t-template:is(input,textarea):read-only~.t-filler,tui-textfield .t-filler:is(input,textarea):read-only~.t-filler,tui-textfield [tuiInput]:is(input,textarea):read-only~.t-filler{display:none}tui-textfield>.t-template:disabled,tui-textfield .t-filler:disabled,tui-textfield [tuiInput]:disabled{animation:tuiPresent 1s infinite;opacity:1}tui-textfield>.t-template[inputmode=none],tui-textfield .t-filler[inputmode=none],tui-textfield [tuiInput][inputmode=none]{caret-color:transparent}tui-textfield>.t-template{display:flex;block-size:100%;align-items:center}tui-textfield._with-template [tuiInput]:first-of-type{color:transparent!important}tui-textfield [tuiInput]:-webkit-autofill [tuiLabel],tui-textfield [tuiInput][chrome-autofilled] [tuiLabel],tui-textfield [tuiInput]:not(._empty,:placeholder-shown) [tuiLabel],tui-textfield[multi][multi]:not(._empty) [tuiLabel],tui-textfield [tuiInput]:-webkit-autofill:not(tui-textfield)~[tuiLabel],tui-textfield [tuiInput][chrome-autofilled]:not(tui-textfield)~[tuiLabel],tui-textfield [tuiInput]:not(._empty,:placeholder-shown):not(tui-textfield)~[tuiLabel],tui-textfield[multi][multi]:not(._empty):not(tui-textfield)~[tuiLabel]{font:var(--t-label-font);line-height:var(--t-height);transform:translateY(var(--t-label-y))}tui-textfield [tuiLabel][tuiLabel][tuiLabel]{transition-property:all;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;position:relative;display:block;flex:1;align-self:flex-start;font-size:inherit;-webkit-user-select:none;user-select:none;line-height:var(--t-height);transition-duration:inherit}tui-textfield [tuiLabel],tui-textfield [tuiInput]::placeholder,tui-textfield [tuiInput]._empty{color:var(--tui-text-secondary)}tui-textfield select option[value=\"\"]:disabled{color:transparent}tui-textfield select optgroup,tui-textfield select option{background-color:var(--tui-background-elevation-3)}tui-textfield select optgroup,tui-textfield select option:not(:disabled){color:var(--tui-text-primary)}tui-textfield button,tui-textfield a,tui-textfield tui-icon{pointer-events:auto}tui-textfield>.t-content{z-index:1;display:flex;block-size:var(--t-height);align-items:center;gap:inherit;margin-inline-start:auto;isolation:isolate;border-radius:inherit}tui-textfield textarea~.t-content{min-inline-size:.5rem}tui-textfield:is([data-mode~=readonly],[data-state=disabled],._empty) [tuiButtonX],tui-textfield [tuiInput]._empty~.t-content [tuiButtonX],tui-textfield [tuiInput]:disabled~.t-content [tuiButtonX]{display:none}tui-textfield .t-filler{pointer-events:none!important;color:var(--tui-text-tertiary)}tui-textfield [tuiFluidTypography]{font-weight:700}tui-textfield [tuiSelectLike]:not(:read-only){cursor:pointer}tui-textfield:has(input[type=tel]){direction:ltr}tui-textfield:is([data-mode~=invalid],.tui-invalid,:invalid):not([data-mode~=readonly],[data-mode~=valid],[data-state=disabled],:disabled) [tuiInput]:not(._empty)~[tuiLabel],tui-textfield:is([data-mode~=invalid],.tui-invalid,:invalid):not([data-mode~=readonly],[data-mode~=valid],[data-state=disabled],:disabled)[multi]:not(._empty) [tuiLabel]{color:var(--tui-text-negative)}tui-textfield:not([data-mode~=readonly]):focus-visible:not([data-focus=false]) [tuiInput]::placeholder,tui-textfield:not([data-mode~=readonly]):focus-visible:not([data-focus=false]) [tuiInput]._empty{color:var(--tui-text-tertiary)}tui-textfield:not([data-mode~=readonly]):focus-visible:not([data-focus=false]) [tuiLabel]{color:var(--tui-text-primary)!important;font:var(--t-label-font);line-height:var(--t-height);transform:translateY(var(--t-label-y))}tui-textfield:not([data-mode~=readonly])[data-focus=true] [tuiInput]::placeholder,tui-textfield:not([data-mode~=readonly])[data-focus=true] [tuiInput]._empty{color:var(--tui-text-tertiary)}tui-textfield:not([data-mode~=readonly])[data-focus=true] [tuiLabel]{color:var(--tui-text-primary)!important;font:var(--t-label-font);line-height:var(--t-height);transform:translateY(var(--t-label-y))}\n"] }]
|
|
218
|
+
}] });
|
|
218
219
|
|
|
219
220
|
/*
|
|
220
221
|
* Internal wrapper for polymorpheus-context
|
|
@@ -228,10 +229,10 @@ class TuiTextfieldItemComponent {
|
|
|
228
229
|
this.content = computed(() => this.textfield.item() ??
|
|
229
230
|
this.handlers.stringify()(this.context.$implicit.item));
|
|
230
231
|
}
|
|
231
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
232
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.
|
|
232
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TuiTextfieldItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
233
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.17", type: TuiTextfieldItemComponent, isStandalone: true, selector: "tui-textfield-item", host: { listeners: { "pointerdown.self.prevent": "0", "keydown.arrowLeft.prevent": "el.previousElementSibling?.firstChild?.focus()", "keydown.arrowRight.prevent": "el.nextElementSibling?.firstChild?.focus()" }, properties: { "class._string": "!textfield.item()", "class._disabled": "handlers.disabledItemHandler()(context.$implicit.item)" } }, ngImport: i0, template: '<ng-container *polymorpheusOutlet="content() as text; context: context">{{ text }}</ng-container>', isInline: true, styles: [":host{max-inline-size:100%;flex-shrink:0;white-space:nowrap;text-overflow:ellipsis;color:var(--tui-text-primary)}:host._string{overflow:hidden}:host._string._disabled{opacity:var(--tui-disabled-opacity)}:host._string:after{content:\",\\a0\"}:host:last-of-type{max-inline-size:80%}:host-context(tui-textfield:not([data-focus=\"true\"])):last-of-type:after{display:none}:host-context(tui-textfield:has([tuiSelectLike])):last-of-type:after,:host-context(tui-textfield[data-mode~=\"readonly\"]):last-of-type:after{content:\"\\a0\"}\n"], dependencies: [{ kind: "directive", type: PolymorpheusOutlet, selector: "[polymorpheusOutlet]", inputs: ["polymorpheusOutlet", "polymorpheusOutletContext"] }], changeDetection: i0.ChangeDetectionStrategy.Default }); }
|
|
233
234
|
}
|
|
234
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
235
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TuiTextfieldItemComponent, decorators: [{
|
|
235
236
|
type: Component,
|
|
236
237
|
args: [{ selector: 'tui-textfield-item', imports: [PolymorpheusOutlet], template: '<ng-container *polymorpheusOutlet="content() as text; context: context">{{ text }}</ng-container>', changeDetection: ChangeDetectionStrategy.Default, host: {
|
|
237
238
|
'[class._string]': '!textfield.item()',
|
|
@@ -299,20 +300,20 @@ class TuiTextfieldMultiComponent extends TuiTextfieldComponent {
|
|
|
299
300
|
// Empty catch block - silently ignore showPicker errors
|
|
300
301
|
}
|
|
301
302
|
}
|
|
302
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
303
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.
|
|
303
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TuiTextfieldMultiComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
304
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: TuiTextfieldMultiComponent, isStandalone: true, selector: "tui-textfield[multi]", inputs: { rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "click.prevent": "onClick($event.target)", "tuiActiveZoneChange": "!$event && el.scrollTo({left: 0})" }, properties: { "attr.data-state": "control()?.disabled ? \"disabled\" : null", "class._empty": "!control()?.value?.length", "style.--t-item-height.px": "height()", "style.--t-rows": "rows()" } }, providers: [
|
|
304
305
|
tuiButtonOptionsProvider({ size: 'xs', appearance: 'icon' }),
|
|
305
306
|
tuiAsDataListHost(TuiTextfieldMultiComponent),
|
|
306
307
|
tuiProvide(TuiTextfieldComponent, TuiTextfieldMultiComponent),
|
|
307
308
|
tuiProvide(TUI_SCROLL_REF, ElementRef),
|
|
308
|
-
], queries: [{ propertyName: "cva", first: true, predicate: TuiControl, descendants: true, isSignal: true }, { propertyName: "item", first: true, predicate: TuiItem, descendants: true, read: TemplateRef, isSignal: true }], usesInheritance: true, hostDirectives: [{ directive: i1$1.TuiWithAppearance }], ngImport: i0, template: "@if (control()?.control?.valueChanges | async) {}\n@if (rows() > 1) {\n <tui-scroll-controls class=\"t-scrollbar\" />\n}\n\n<div\n class=\"t-items\"\n [class.t-items_horizontal]=\"rows() === 1\"\n (click)=\"input()?.nativeElement?.focus()\"\n (pointerdown.self.zoneless.prevent)=\"(0)\"\n (waResizeObserver)=\"$event[0] && onItems($event[0])\"\n>\n <ng-content select=\"label\" />\n @for (item of control()?.value; track item) {\n <ng-template\n [polymorpheusOutlet]=\"component\"\n [polymorpheusOutletContext]=\"{$implicit: {item, index: $index}}\"\n />\n }\n <span\n class=\"t-input\"\n (keydown.arrowLeft)=\"onLeft($event)\"\n >\n <ng-content select=\"input\" />\n <ng-content select=\"select\" />\n <span class=\"t-ghost\">{{ placeholder }}</span>\n <input\n aria-hidden=\"true\"\n disabled\n class=\"t-filler\"\n [class.t-filler_hidden]=\"!showFiller()\"\n [value]=\"computedFiller()\"\n />\n </span>\n</div>\n\n<span\n class=\"t-content\"\n (click.stop)=\"input()?.nativeElement?.focus()\"\n (pointerdown.zoneless.prevent)=\"(0)\"\n (waResizeObserver)=\"$event[0] && onResize($event[0])\"\n>\n <ng-content />\n @if (options.cleaner()) {\n <button\n appearance=\"icon\"\n size=\"xs\"\n tabindex=\"-1\"\n tuiIconButton\n type=\"button\"\n class=\"t-clear\"\n [iconStart]=\"icons.close\"\n (click)=\"accessor()?.setValue([])\"\n >\n {{ clear() }}\n </button>\n }\n <ng-container #vcr />\n <ng-content select=\"tui-icon\" />\n</span>\n\n@if (control()?.value != null) {\n <span class=\"t-template\">\n <ng-container *polymorpheusOutlet=\"content() as text; context: {$implicit: control()?.value}\">\n {{ text }}\n </ng-container>\n </span>\n}\n", styles: ["tui-textfield{scrollbar-width:none;-ms-overflow-style:none;transition-property:color;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out;--t-height: var(--tui-height-l);--t-padding: var(--tui-padding-l);--t-label-y: -.75rem;--t-label-font: var(--tui-font-text-s);--t-end: 0rem;--t-start: 0rem;position:relative;display:flex;flex-wrap:wrap;align-items:center;cursor:pointer;min-block-size:var(--t-height);padding:0 var(--t-padding);border-radius:var(--tui-radius-l);font:var(--tui-font-text-ui-m);line-height:1.25rem;box-sizing:border-box;gap:0 .25rem;isolation:isolate}tui-textfield::-webkit-scrollbar,tui-textfield::-webkit-scrollbar-thumb{display:none}tui-textfield[tuiIcons]:read-only{color:var(--tui-text-tertiary)}tui-textfield[style*=\"--t-icon-start:\"]{--t-start: 2.25rem}tui-textfield[style*=\"--t-icon-end:\"]{--t-end: 2.25rem}tui-textfield[tuiIcons]:after{position:relative;block-size:auto;align-self:stretch;border-inline-start:var(--t-padding) solid transparent;border-inline-end:var(--t-padding) solid transparent;margin:0 calc(-1 * var(--t-padding))}tui-textfield::-webkit-resizer{border:.25rem solid transparent;inline-size:.5rem;block-size:.5rem;box-sizing:content-box;color:var(--tui-text-tertiary);background:linear-gradient(-45deg,transparent,transparent .125rem,currentColor .125rem,currentColor .1875rem,transparent .1875rem,transparent .25rem,currentColor .25rem,currentColor .3125rem,transparent .35rem);background-clip:content-box}tui-textfield label,tui-textfield>.t-content,tui-textfield>.t-template{pointer-events:none}tui-textfield input,tui-textfield select,tui-textfield textarea{font:inherit;resize:none;outline:none;padding-block-start:1.125rem;padding-block-end:1.125rem;color:var(--tui-text-primary)}tui-textfield input[inputmode=none],tui-textfield select[inputmode=none],tui-textfield textarea[inputmode=none]{caret-color:transparent}tui-textfield[data-size=s]{--t-height: var(--tui-height-s);--t-padding: var(--tui-padding-s);border-radius:var(--tui-radius-m);gap:0;font:var(--tui-font-text-ui-s);line-height:1rem}tui-textfield[data-size=s][style*=\"--t-icon-start:\"]{--t-start: 1.25rem}tui-textfield[data-size=s][style*=\"--t-icon-end:\"]{--t-end: 1.25rem}tui-textfield[data-size=s]:before{margin-inline-end:.5rem;margin-inline-start:-.125rem;font-size:1rem}tui-textfield[data-size=s]:after{margin-inline-end:calc(-.125rem - var(--t-padding));margin-inline-start:calc(.625rem - var(--t-padding));font-size:1rem}tui-textfield[data-size=s] input,tui-textfield[data-size=s] select,tui-textfield[data-size=s] textarea{padding-block-start:.5rem;padding-block-end:.5rem}tui-textfield[data-size=s]>.t-content{margin-inline-end:-.375rem}tui-textfield[data-size=m]{--t-height: var(--tui-height-m);--t-padding: var(--tui-padding-m);--t-label-font: var(--tui-font-text-xs);--t-label-y: -.5625rem;border-radius:var(--tui-radius-m);font:var(--tui-font-text-ui-s);line-height:1rem}tui-textfield[data-size=m][style*=\"--t-icon-start:\"]{--t-start: 1.75rem}tui-textfield[data-size=m][style*=\"--t-icon-end:\"]{--t-end: 1.75rem}tui-textfield[data-size=m]:before{margin-inline-start:-.125rem;margin-inline-end:.125rem}tui-textfield[data-size=m]:after{margin-inline-start:calc(.25rem - var(--t-padding));margin-inline-end:calc(-.125rem - var(--t-padding))}tui-textfield[data-size=m] input,tui-textfield[data-size=m] select,tui-textfield[data-size=m] textarea{padding-block-start:.875rem;padding-block-end:.875rem}tui-textfield[data-size=m]>.t-content{margin-inline-end:-.125rem}tui-textfield[data-size=l]{--t-label: -.7rem}tui-textfield[tuiIcons]:hover{color:var(--tui-text-secondary)}tui-textfield[tuiIcons]:hover:has(input:read-only):not([multi]),tui-textfield[tuiIcons]:hover:has(textarea:read-only),tui-textfield[tuiIcons]:hover:has(select[data-mode~=readonly]){color:var(--tui-text-tertiary)}tui-textfield:before{z-index:1;margin-inline-end:.5rem;pointer-events:none}tui-textfield:has(:disabled:not(.t-filler,button,option,[tuiChip])):before,tui-textfield:has(:disabled:not(.t-filler,button,option,[tuiChip])):after,tui-textfield:has(:disabled:not(.t-filler,button,option,[tuiChip]))>.t-template{opacity:var(--tui-disabled-opacity)}tui-textfield._disabled:before,tui-textfield._disabled:after,tui-textfield._disabled>.t-template{opacity:var(--tui-disabled-opacity)}tui-textfield:has(label:not(:empty))>.t-template,tui-textfield:has(label:not(:empty)) input:not([type=range]),tui-textfield:has(label:not(:empty)) select:defined,tui-textfield:has(label:not(:empty)) textarea:defined{padding-block-start:calc(var(--t-height) / 3);padding-block-end:0}tui-textfield:not([data-focus=true]):has(label:not(:empty))>.t-template::placeholder,tui-textfield:not([data-focus=true]):has(label:not(:empty)) input:not([type=range])::placeholder,tui-textfield:not([data-focus=true]):has(label:not(:empty)) select:defined::placeholder,tui-textfield:not([data-focus=true]):has(label:not(:empty)) textarea:defined::placeholder,tui-textfield:not([data-focus=true]):has(label:not(:empty))>.t-template._empty,tui-textfield:not([data-focus=true]):has(label:not(:empty)) input:not([type=range])._empty,tui-textfield:not([data-focus=true]):has(label:not(:empty)) select:defined._empty,tui-textfield:not([data-focus=true]):has(label:not(:empty)) textarea:defined._empty{color:transparent}tui-textfield._with-label>.t-template,tui-textfield._with-label input:not([type=range]),tui-textfield._with-label select:defined,tui-textfield._with-label textarea:defined{padding-block-start:calc(var(--t-height) / 3);padding-block-end:0}tui-textfield:not([data-focus=true])._with-label>.t-template::placeholder,tui-textfield:not([data-focus=true])._with-label input:not([type=range])::placeholder,tui-textfield:not([data-focus=true])._with-label select:defined::placeholder,tui-textfield:not([data-focus=true])._with-label textarea:defined::placeholder,tui-textfield:not([data-focus=true])._with-label>.t-template._empty,tui-textfield:not([data-focus=true])._with-label input:not([type=range])._empty,tui-textfield:not([data-focus=true])._with-label select:defined._empty,tui-textfield:not([data-focus=true])._with-label textarea:defined._empty{color:transparent}tui-textfield>.t-template,tui-textfield input:defined,tui-textfield select:defined,tui-textfield textarea:defined{position:absolute;top:0;left:0;inline-size:100%;block-size:100%;-webkit-appearance:none;appearance:none;box-sizing:border-box;border-radius:inherit;border-width:0;overscroll-behavior:none;padding-inline-start:calc(var(--t-start, 0rem) + var(--t-padding));padding-inline-end:calc(var(--t-end, 0rem) + var(--t-side) + var(--t-padding))}tui-textfield>.t-template{display:flex;align-items:center;color:var(--tui-text-primary)}tui-textfield._with-template input:first-of-type,tui-textfield._with-template select,tui-textfield._with-template textarea{color:transparent!important}tui-textfield input:not([type=range]),tui-textfield select:defined,tui-textfield textarea:defined{pointer-events:auto;background:none}tui-textfield input:not([type=range]):not(select):read-only~.t-filler,tui-textfield select:defined:not(select):read-only~.t-filler,tui-textfield textarea:defined:not(select):read-only~.t-filler{display:none}tui-textfield input:not([type=range]):disabled~label,tui-textfield select:defined:disabled~label,tui-textfield textarea:defined:disabled~label,tui-textfield input:not([type=range]):disabled~.t-content,tui-textfield select:defined:disabled~.t-content,tui-textfield textarea:defined:disabled~.t-content{opacity:var(--tui-disabled-opacity)}tui-textfield input:not([type=range]):disabled~label>tui-icon,tui-textfield select:defined:disabled~label>tui-icon,tui-textfield textarea:defined:disabled~label>tui-icon,tui-textfield input:not([type=range]):disabled~.t-content>tui-icon,tui-textfield select:defined:disabled~.t-content>tui-icon,tui-textfield textarea:defined:disabled~.t-content>tui-icon{display:none}tui-textfield input:not([type=range]):-webkit-autofill~label,tui-textfield select:defined:-webkit-autofill~label,tui-textfield textarea:defined:-webkit-autofill~label,tui-textfield input:not([type=range]):not(._empty):not(:placeholder-shown)~label,tui-textfield select:defined:not(._empty):not(:placeholder-shown)~label,tui-textfield textarea:defined:not(._empty):not(:placeholder-shown)~label{font:var(--t-label-font);line-height:var(--t-height);transform:translateY(var(--t-label-y))}tui-textfield input:not([type=range]):-webkit-autofill:not(:disabled)[data-mode~=invalid]~label,tui-textfield select:defined:-webkit-autofill:not(:disabled)[data-mode~=invalid]~label,tui-textfield textarea:defined:-webkit-autofill:not(:disabled)[data-mode~=invalid]~label,tui-textfield input:not([type=range]):not(._empty):not(:placeholder-shown):not(:disabled)[data-mode~=invalid]~label,tui-textfield select:defined:not(._empty):not(:placeholder-shown):not(:disabled)[data-mode~=invalid]~label,tui-textfield textarea:defined:not(._empty):not(:placeholder-shown):not(:disabled)[data-mode~=invalid]~label,tui-textfield input:not([type=range]):-webkit-autofill:invalid:not(:disabled):not([data-mode])~label,tui-textfield select:defined:-webkit-autofill:invalid:not(:disabled):not([data-mode])~label,tui-textfield textarea:defined:-webkit-autofill:invalid:not(:disabled):not([data-mode])~label,tui-textfield input:not([type=range]):not(._empty):not(:placeholder-shown):invalid:not(:disabled):not([data-mode])~label,tui-textfield select:defined:not(._empty):not(:placeholder-shown):invalid:not(:disabled):not([data-mode])~label,tui-textfield textarea:defined:not(._empty):not(:placeholder-shown):invalid:not(:disabled):not([data-mode])~label{color:var(--tui-text-negative)}tui-textfield input:not([type=range]):-webkit-autofill:not(:disabled):not([data-mode~=readonly])~.t-content .t-clear,tui-textfield select:defined:-webkit-autofill:not(:disabled):not([data-mode~=readonly])~.t-content .t-clear,tui-textfield textarea:defined:-webkit-autofill:not(:disabled):not([data-mode~=readonly])~.t-content .t-clear,tui-textfield input:not([type=range]):not(._empty):not(:placeholder-shown):not(:disabled):not([data-mode~=readonly])~.t-content .t-clear,tui-textfield select:defined:not(._empty):not(:placeholder-shown):not(:disabled):not([data-mode~=readonly])~.t-content .t-clear,tui-textfield textarea:defined:not(._empty):not(:placeholder-shown):not(:disabled):not([data-mode~=readonly])~.t-content .t-clear{display:flex}tui-textfield input:not([type=range]):not([data-mode~=readonly]):focus-visible:not([data-focus=false])::placeholder,tui-textfield select:defined:not([data-mode~=readonly]):focus-visible:not([data-focus=false])::placeholder,tui-textfield textarea:defined:not([data-mode~=readonly]):focus-visible:not([data-focus=false])::placeholder,tui-textfield input:not([type=range]):not([data-mode~=readonly]):focus-visible:not([data-focus=false])._empty,tui-textfield select:defined:not([data-mode~=readonly]):focus-visible:not([data-focus=false])._empty,tui-textfield textarea:defined:not([data-mode~=readonly]):focus-visible:not([data-focus=false])._empty{color:var(--tui-text-tertiary)}tui-textfield input:not([type=range]):not([data-mode~=readonly]):focus-visible:not([data-focus=false])~label,tui-textfield select:defined:not([data-mode~=readonly]):focus-visible:not([data-focus=false])~label,tui-textfield textarea:defined:not([data-mode~=readonly]):focus-visible:not([data-focus=false])~label{color:var(--tui-text-primary)!important;font:var(--t-label-font);line-height:var(--t-height);transform:translateY(var(--t-label-y))}tui-textfield input:not([type=range]):not([data-mode~=readonly])[data-focus=true]::placeholder,tui-textfield select:defined:not([data-mode~=readonly])[data-focus=true]::placeholder,tui-textfield textarea:defined:not([data-mode~=readonly])[data-focus=true]::placeholder,tui-textfield input:not([type=range]):not([data-mode~=readonly])[data-focus=true]._empty,tui-textfield select:defined:not([data-mode~=readonly])[data-focus=true]._empty,tui-textfield textarea:defined:not([data-mode~=readonly])[data-focus=true]._empty{color:var(--tui-text-tertiary)}tui-textfield input:not([type=range]):not([data-mode~=readonly])[data-focus=true]~label,tui-textfield select:defined:not([data-mode~=readonly])[data-focus=true]~label,tui-textfield textarea:defined:not([data-mode~=readonly])[data-focus=true]~label{color:var(--tui-text-primary)!important;font:var(--t-label-font);line-height:var(--t-height);transform:translateY(var(--t-label-y))}tui-textfield input:not([type=range]):not([data-mode~=readonly])[tuiWrapper]:not(._focused):has(:focus-visible)::placeholder,tui-textfield select:defined:not([data-mode~=readonly])[tuiWrapper]:not(._focused):has(:focus-visible)::placeholder,tui-textfield textarea:defined:not([data-mode~=readonly])[tuiWrapper]:not(._focused):has(:focus-visible)::placeholder,tui-textfield input:not([type=range]):not([data-mode~=readonly])[tuiWrapper]._focused::placeholder,tui-textfield select:defined:not([data-mode~=readonly])[tuiWrapper]._focused::placeholder,tui-textfield textarea:defined:not([data-mode~=readonly])[tuiWrapper]._focused::placeholder,tui-textfield input:not([type=range]):not([data-mode~=readonly])[tuiWrapper]:not(._focused):has(:focus-visible)._empty,tui-textfield select:defined:not([data-mode~=readonly])[tuiWrapper]:not(._focused):has(:focus-visible)._empty,tui-textfield textarea:defined:not([data-mode~=readonly])[tuiWrapper]:not(._focused):has(:focus-visible)._empty,tui-textfield input:not([type=range]):not([data-mode~=readonly])[tuiWrapper]._focused._empty,tui-textfield select:defined:not([data-mode~=readonly])[tuiWrapper]._focused._empty,tui-textfield textarea:defined:not([data-mode~=readonly])[tuiWrapper]._focused._empty{color:var(--tui-text-tertiary)}tui-textfield input:not([type=range]):not([data-mode~=readonly])[tuiWrapper]:not(._focused):has(:focus-visible)~label,tui-textfield select:defined:not([data-mode~=readonly])[tuiWrapper]:not(._focused):has(:focus-visible)~label,tui-textfield textarea:defined:not([data-mode~=readonly])[tuiWrapper]:not(._focused):has(:focus-visible)~label,tui-textfield input:not([type=range]):not([data-mode~=readonly])[tuiWrapper]._focused~label,tui-textfield select:defined:not([data-mode~=readonly])[tuiWrapper]._focused~label,tui-textfield textarea:defined:not([data-mode~=readonly])[tuiWrapper]._focused~label{color:var(--tui-text-primary)!important;font:var(--t-label-font);line-height:var(--t-height);transform:translateY(var(--t-label-y))}@supports (-webkit-touch-callout: none){tui-textfield input:not([type=range])._ios-fix,tui-textfield select:defined._ios-fix,tui-textfield textarea:defined._ios-fix{position:fixed;left:1000rem}}tui-textfield [tuiLabel][tuiLabel][tuiLabel]{transition-property:all;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;position:relative;display:block;flex:1;align-self:flex-start;font-size:inherit;line-height:var(--t-height);transition-duration:inherit}tui-textfield label:defined,tui-textfield input:defined::placeholder,tui-textfield textarea:defined::placeholder,tui-textfield select:defined._empty{color:var(--tui-text-secondary)}tui-textfield select:not([data-mode~=readonly]){cursor:pointer}tui-textfield select option[value=\"\"]:disabled{color:transparent}tui-textfield select optgroup,tui-textfield select option{background-color:var(--tui-background-elevation-3)}tui-textfield select optgroup,tui-textfield select option:not(:disabled){color:var(--tui-text-primary)}tui-textfield button,tui-textfield a{pointer-events:auto}tui-textfield>.t-content{z-index:1;display:flex;block-size:var(--t-height);align-items:center;gap:inherit;margin-inline-start:auto;isolation:isolate;border-radius:inherit}tui-textfield>.t-content>tui-icon{pointer-events:auto}tui-textfield textarea~.t-content{min-inline-size:.5rem}tui-textfield .t-clear{z-index:1;display:none;pointer-events:auto}tui-textfield>.t-filler:defined{pointer-events:none;color:var(--tui-text-tertiary);opacity:1}tui-textfield [tuiFluidTypography]{font-weight:700}tui-textfield [tuiSelectLike]:not(:read-only){cursor:pointer}tui-textfield:has(input[type=tel]){direction:ltr}tui-textfield[multi][multi]{flex-wrap:nowrap;overflow:scroll;align-items:stretch;cursor:text;gap:0;max-block-size:calc(var(--t-vertical) * 2 + var(--t-item-height) * var(--t-rows));overscroll-behavior:none;scroll-behavior:var(--tui-scroll-behavior)}tui-textfield[multi][multi]:before,tui-textfield[multi][multi]:after{position:sticky;top:0;left:0;inset-inline-start:0;block-size:var(--t-height)}tui-textfield[multi][multi][tuiChevron]:after{top:.375rem;block-size:calc(var(--t-height) - .75rem)}tui-textfield[multi][multi]>.t-scrollbar{transform:translate(calc(var(--t-padding) * var(--tui-inline)));margin-inline-start:calc(-1 * var(--t-start));margin-inline-end:calc(1px - 100% + var(--t-start))}tui-textfield[multi][multi]>.t-scrollbar .t-bar_horizontal{display:none}tui-textfield[multi][multi]>.t-items{position:sticky;left:var(--t-start);display:flex;inset-inline-start:var(--t-start);min-inline-size:0;min-block-size:fit-content;flex:1;align-items:center;flex-wrap:wrap;padding:var(--t-vertical) 0;transition-duration:inherit}tui-textfield[multi][multi]>.t-items:after{content:\"\";min-inline-size:1px;min-block-size:1px}tui-textfield[multi][multi]>.t-items_horizontal{clip-path:inset(0 0 0 calc(var(--t-start) / 2 - var(--t-padding) - .25rem));flex-wrap:nowrap}[dir=rtl] tui-textfield[multi][multi]>.t-items_horizontal{clip-path:inset(0 calc(var(--t-start) / 2 - var(--t-padding) - .25rem) 0 0)}tui-textfield[multi][multi]>.t-items_horizontal>.t-input{padding-inline-end:calc(var(--t-side) + var(--t-end) + var(--t-padding))}tui-textfield[multi][multi]>.t-items:not(tui-textfield[multi][multi]>.t-items_horizontal){--t-scroll: 0}tui-textfield[multi][multi]>.t-items>label[tuiLabel]{position:absolute;top:0;inline-size:100%}tui-textfield[multi][multi]>.t-items>.t-input{position:relative;display:flex;align-items:center;flex:1;block-size:1.25em;max-block-size:1.25rem;max-inline-size:100%;pointer-events:none;transform:translate(var(--t-scroll))}tui-textfield[multi][multi]>.t-items>.t-input input{position:absolute;left:0;inset-inline-start:0;inline-size:100%;padding:0}tui-textfield[multi][multi]>.t-items>.t-input .t-ghost{visibility:hidden;white-space:pre;text-overflow:clip;padding-inline-end:.125rem;min-block-size:var(--t-item-height, 1em)}tui-textfield[multi][multi]>.t-items>.t-input .t-filler{position:absolute;left:0;inset-inline-start:0;color:var(--tui-text-tertiary);pointer-events:none}tui-textfield[multi][multi]>.t-items>.t-input .t-filler_hidden{display:none}tui-textfield[multi][multi]>.t-content{position:sticky;top:0;left:calc(100% - var(--t-side) - var(--t-end) + var(--t-padding) - var(--t-offset));inset-inline-start:calc(100% - var(--t-side) - var(--t-end) + var(--t-padding) - var(--t-offset));margin:0;gap:.25rem}tui-textfield[multi][multi]>.t-content .t-clear{display:flex}tui-textfield[multi][multi][data-mode~=invalid]:not([data-mode~=readonly])>.t-items>[tuiLabel]{color:var(--tui-text-negative)}tui-textfield[multi][multi][data-focus=true]:not([data-mode~=readonly])>.t-items>[tuiLabel]{color:var(--tui-text-primary)!important}tui-textfield[multi][multi][data-mode~=readonly]>.t-content .t-clear,tui-textfield[multi][multi]._disabled>.t-content .t-clear,tui-textfield[multi][multi]._empty>.t-content .t-clear{display:none}tui-textfield[multi][multi]>.t-items input:not(:focus)::placeholder,tui-textfield[multi][multi][data-mode~=readonly]>.t-items input::placeholder,tui-textfield[multi][multi][data-mode~=readonly]>.t-items label~.t-input input::placeholder{opacity:0}tui-textfield[multi][multi]._empty>.t-items input::placeholder,tui-textfield[multi][multi][data-focus=true]:not([data-mode~=readonly]):not(:focus-within)>.t-items input::placeholder{opacity:1}tui-textfield[multi][multi]:not(._empty)>.t-items [tuiLabel],tui-textfield[multi][multi][data-focus=true]:not([data-mode~=readonly])>.t-items [tuiLabel]{font:var(--t-label-font);line-height:var(--t-height);transform:translateY(var(--t-label-y))}tui-textfield[multi][multi][data-state=disabled],tui-textfield[multi][multi][data-mode~=readonly]{pointer-events:none}tui-textfield[multi][multi][data-state=disabled] select,tui-textfield[multi][multi][data-mode~=readonly] select{display:none}tui-textfield[multi][multi][data-size=l]{--t-vertical: .625rem;--t-offset: calc(1rem - var(--t-end) / 4.5)}tui-textfield[multi][multi][data-size=l]:before{margin-inline-end:.75rem}tui-textfield[multi][multi][data-size=l]:after{left:calc(100% - var(--t-end) - .375rem + .25 * (1em - 1rem));inset-inline-start:calc(100% - var(--t-end) - .375rem + .25 * (1em - 1rem));margin-inline-end:calc(.5 * (1.5rem - 1em) - var(--t-padding));margin-inline-start:-.75rem}tui-textfield[multi][multi][data-size=l]._with-label{--t-vertical: 1.125rem}tui-textfield[multi][multi][data-size=l]._with-label>.t-items{padding:1.75rem 0 .5rem}tui-textfield[multi][multi][data-size=m]{--t-vertical: .5rem;--t-offset: calc(.75rem + var(--t-end) / 14)}tui-textfield[multi][multi][data-size=m]:before{left:-.125rem;inset-inline-start:-.125rem;margin-inline-end:.375rem}tui-textfield[multi][multi][data-size=m]:after{left:calc(100% - var(--t-end) - .25rem);inset-inline-start:calc(100% - var(--t-end) - .25rem);margin-inline-start:-.125rem;border-width:.625rem;margin-inline-end:calc(.5 * (1.5rem - 1em) - var(--t-padding))}tui-textfield[multi][multi][data-size=m]._with-label{--t-vertical: .875rem}tui-textfield[multi][multi][data-size=m]._with-label>.t-items{padding:1.375rem 0 .375rem}tui-textfield[multi][multi][data-size=m]>.t-content{transform:translate(.125rem)}tui-textfield[multi][multi][data-size=s]{--t-vertical: .125rem;--t-offset: calc(.625rem + var(--t-end) / 10)}tui-textfield[multi][multi][data-size=s]:before{left:-.125rem;inset-inline-start:-.125rem;margin-inline-end:.375rem}tui-textfield[multi][multi][data-size=s]:after{left:calc(100% - var(--t-end) - .125rem);inset-inline-start:calc(100% - var(--t-end) - .125rem);border-width:.5rem;margin-inline-end:calc(-1 * var(--t-padding))}tui-textfield[multi][multi][data-size=s]>.t-content{gap:0;transform:translate(calc(.375rem - var(--t-end) / 10))}tui-textfield[multi][multi]:focus-visible:not([data-focus=false]) input::placeholder,tui-textfield[multi][multi]:focus-visible:not([data-focus=false]) input._empty{color:var(--tui-text-tertiary)}tui-textfield[multi][multi][data-focus=true] input::placeholder,tui-textfield[multi][multi][data-focus=true] input._empty{color:var(--tui-text-tertiary)}tui-textfield[multi][multi][tuiWrapper]:not(._focused):has(:focus-visible) input::placeholder,tui-textfield[multi][multi][tuiWrapper]._focused input::placeholder,tui-textfield[multi][multi][tuiWrapper]:not(._focused):has(:focus-visible) input._empty,tui-textfield[multi][multi][tuiWrapper]._focused input._empty{color:var(--tui-text-tertiary)}tui-textfield[multi][multi] tui-textfield-item{transform:translate(var(--t-scroll))}tui-textfield[multi][multi] input::placeholder{transition-property:color;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out}tui-textfield[multi][multi] select{opacity:0;padding:0;pointer-events:none}tui-textfield[multi][multi]._empty>.t-items select~.t-filler{display:block}tui-textfield[multi][multi]._empty:not([data-focus=true])>.t-items select~.t-filler{color:var(--tui-text-secondary)}tui-textfield[multi][multi]:has([tuiSelectLike]){cursor:pointer}\n"], dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "directive", type: PolymorpheusOutlet, selector: "[polymorpheusOutlet]", inputs: ["polymorpheusOutlet", "polymorpheusOutletContext"] }, { kind: "directive", type: TuiButton, selector: "a[tuiButton],button[tuiButton],a[tuiIconButton],button[tuiIconButton]", inputs: ["size"] }, { kind: "component", type: TuiScrollControls, selector: "tui-scroll-controls" }, { kind: "directive", type: WaResizeObserver, selector: "[waResizeObserver]", inputs: ["box"], outputs: ["waResizeObserver"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
309
|
+
], queries: [{ propertyName: "cva", first: true, predicate: TuiControl, descendants: true, isSignal: true }, { propertyName: "item", first: true, predicate: TuiItem, descendants: true, read: TemplateRef, isSignal: true }], usesInheritance: true, ngImport: i0, template: "@if (control()?.control?.valueChanges | async) {}\n@if (rows() > 1) {\n <tui-scroll-controls class=\"t-scrollbar\" />\n}\n\n<div\n class=\"t-items\"\n [class.t-items_horizontal]=\"rows() === 1\"\n (click)=\"input()?.nativeElement?.focus()\"\n (pointerdown.self.zoneless.prevent)=\"(0)\"\n (waResizeObserver)=\"$event[0] && onItems($event[0])\"\n>\n <ng-content select=\"label\" />\n @for (item of control()?.value; track item) {\n <ng-template\n [polymorpheusOutlet]=\"component\"\n [polymorpheusOutletContext]=\"{$implicit: {item, index: $index}}\"\n />\n }\n <span\n class=\"t-input\"\n (keydown.arrowLeft)=\"onLeft($event)\"\n >\n <ng-content select=\"input\" />\n <ng-content select=\"select\" />\n <span class=\"t-ghost\">{{ placeholder }}</span>\n <input\n aria-hidden=\"true\"\n disabled\n class=\"t-filler\"\n [class.t-filler_hidden]=\"!showFiller()\"\n [value]=\"computedFiller()\"\n />\n </span>\n</div>\n\n<span\n class=\"t-content\"\n (click.stop)=\"input()?.nativeElement?.focus()\"\n (pointerdown.zoneless.prevent)=\"(0)\"\n (waResizeObserver)=\"$event[0] && onResize($event[0])\"\n>\n <ng-content />\n @if (options.cleaner()) {\n <button\n tuiButtonX\n (click)=\"accessor()?.setValue([])\"\n >\n {{ clear() }}\n </button>\n }\n <ng-container #vcr />\n <ng-content select=\"tui-icon\" />\n</span>\n\n@if (control()?.value != null) {\n <span class=\"t-template\">\n <ng-container *polymorpheusOutlet=\"content() as text; context: {$implicit: control()?.value}\">\n {{ text }}\n </ng-container>\n </span>\n}\n", styles: ["tui-textfield{scrollbar-width:none;-ms-overflow-style:none;transition-property:color;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out;--t-height: var(--tui-height-l);--t-padding: var(--tui-padding-l);--t-label-y: -.75rem;--t-label-font: var(--tui-font-body-s);--t-end: 0rem;--t-start: 0rem;position:relative;display:flex;flex-wrap:wrap;align-items:flex-start;min-block-size:var(--t-height);padding:0 var(--t-padding);border-radius:var(--tui-radius-l);font:var(--tui-font-ui-m);line-height:1.25rem;box-sizing:border-box;gap:0 .25rem;isolation:isolate}tui-textfield::-webkit-scrollbar,tui-textfield::-webkit-scrollbar-thumb{display:none}tui-textfield[tuiAppearance]{outline:none}tui-textfield[tuiAppearance][data-appearance=\"\"]{color:var(--tui-text-tertiary)}@media (hover: hover) and (pointer: fine){tui-textfield[tuiAppearance][data-appearance=\"\"]:not([data-mode~=readonly]):is(a,button,select,textarea,input,label,.tui-interactive):not(:disabled):hover:not([data-state]){color:var(--tui-text-secondary)}}tui-textfield[tuiAppearance][data-appearance=\"\"]:not([data-mode~=readonly])[data-state=hover]{color:var(--tui-text-secondary)}tui-textfield[data-icon-start]{--t-start: 2.25rem}tui-textfield[data-icon-end]{--t-end: 2.25rem}tui-textfield[tuiIcons]:before{z-index:1;block-size:var(--t-height);margin-inline-end:.5rem;pointer-events:none}tui-textfield[tuiIcons]:after{position:relative;block-size:var(--t-height);cursor:pointer;border-inline:var(--t-padding) solid transparent;margin:0 calc(-1 * var(--t-padding))}tui-textfield::-webkit-resizer{border:.25rem solid transparent;inline-size:.5rem;block-size:.5rem;box-sizing:content-box;color:var(--tui-text-tertiary);background:linear-gradient(-45deg,transparent,transparent .125rem,currentColor .125rem,currentColor .1875rem,transparent .1875rem,transparent .25rem,currentColor .25rem,currentColor .3125rem,transparent .35rem);background-clip:content-box}tui-textfield [tuiLabel],tui-textfield>.t-content,tui-textfield>.t-template{pointer-events:none}tui-textfield[data-size=s]{--t-height: var(--tui-height-s);--t-padding: var(--tui-padding-s);border-radius:var(--tui-radius-m);gap:0;font:var(--tui-font-ui-s);line-height:1rem}tui-textfield[data-size=s][data-icon-start]{--t-start: 1.25rem}tui-textfield[data-size=s][data-icon-end]{--t-end: 1.25rem}tui-textfield[data-size=s]:before{margin-inline:-.125rem .5rem;font-size:1rem}tui-textfield[data-size=s]:after{margin-inline-start:calc(.625rem - var(--t-padding));margin-inline-end:calc(-.125rem - var(--t-padding));font-size:1rem}tui-textfield[data-size=s]>.t-content{margin-inline-end:-.375rem}tui-textfield[data-size=m]{--t-height: var(--tui-height-m);--t-padding: var(--tui-padding-m);--t-label-font: var(--tui-font-body-xs);--t-label-y: -.5625rem;border-radius:var(--tui-radius-m);font:var(--tui-font-ui-s);line-height:1rem}tui-textfield[data-size=m][data-icon-start]{--t-start: 1.75rem}tui-textfield[data-size=m][data-icon-end]{--t-end: 1.75rem}tui-textfield[data-size=m]:before{margin-inline:-.125rem .125rem}tui-textfield[data-size=m]:after{margin-inline-start:calc(.25rem - var(--t-padding));margin-inline-end:calc(-.125rem - var(--t-padding))}tui-textfield[data-size=m]>.t-content{margin-inline-end:-.125rem}tui-textfield[data-size=l]{--t-label: -.7rem}tui-textfield:is(._disabled,[data-state=disabled]){pointer-events:none;opacity:var(--tui-disabled-opacity)}tui-textfield:is(._disabled,[data-state=disabled]) [tuiAppearance]:is(._disabled,:disabled,[data-state=disabled]){opacity:1}tui-textfield:is(._disabled,[data-state=disabled]) tui-icon{display:none}tui-textfield._with-label>.t-template,tui-textfield._with-label .t-filler,tui-textfield._with-label [tuiInput]{padding-block-start:calc(var(--t-height) / 3);padding-block-end:0}tui-textfield._with-label:is(:not([data-focus=true]),[data-mode~=readonly])>.t-template::placeholder,tui-textfield._with-label:is(:not([data-focus=true]),[data-mode~=readonly]) [tuiInput]::placeholder,tui-textfield._with-label:is(:not([data-focus=true]),[data-mode~=readonly])>.t-template._empty,tui-textfield._with-label:is(:not([data-focus=true]),[data-mode~=readonly]) [tuiInput]._empty{color:transparent}tui-textfield>.t-template,tui-textfield .t-filler,tui-textfield [tuiInput]{position:absolute;inset:0 auto auto 0;inline-size:stretch;block-size:100%;-webkit-appearance:none;appearance:none;background:none;font:inherit;resize:none;outline:none;color:var(--tui-text-primary);box-sizing:border-box;border-radius:inherit;border-width:0;overscroll-behavior:none;padding-inline-start:calc(var(--t-start, 0rem) + var(--t-padding));padding-inline-end:calc(var(--t-end, 0rem) + var(--t-side, 0rem) + var(--t-padding))}tui-textfield>.t-template:is(input,textarea):read-only~.t-filler,tui-textfield .t-filler:is(input,textarea):read-only~.t-filler,tui-textfield [tuiInput]:is(input,textarea):read-only~.t-filler{display:none}tui-textfield>.t-template:disabled,tui-textfield .t-filler:disabled,tui-textfield [tuiInput]:disabled{animation:tuiPresent 1s infinite;opacity:1}tui-textfield>.t-template[inputmode=none],tui-textfield .t-filler[inputmode=none],tui-textfield [tuiInput][inputmode=none]{caret-color:transparent}tui-textfield>.t-template{display:flex;block-size:100%;align-items:center}tui-textfield._with-template [tuiInput]:first-of-type{color:transparent!important}tui-textfield [tuiInput]:-webkit-autofill [tuiLabel],tui-textfield [tuiInput][chrome-autofilled] [tuiLabel],tui-textfield [tuiInput]:not(._empty,:placeholder-shown) [tuiLabel],tui-textfield[multi][multi]:not(._empty) [tuiLabel],tui-textfield [tuiInput]:-webkit-autofill:not(tui-textfield)~[tuiLabel],tui-textfield [tuiInput][chrome-autofilled]:not(tui-textfield)~[tuiLabel],tui-textfield [tuiInput]:not(._empty,:placeholder-shown):not(tui-textfield)~[tuiLabel],tui-textfield[multi][multi]:not(._empty):not(tui-textfield)~[tuiLabel]{font:var(--t-label-font);line-height:var(--t-height);transform:translateY(var(--t-label-y))}tui-textfield [tuiLabel][tuiLabel][tuiLabel]{transition-property:all;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;position:relative;display:block;flex:1;align-self:flex-start;font-size:inherit;-webkit-user-select:none;user-select:none;line-height:var(--t-height);transition-duration:inherit}tui-textfield [tuiLabel],tui-textfield [tuiInput]::placeholder,tui-textfield [tuiInput]._empty{color:var(--tui-text-secondary)}tui-textfield select option[value=\"\"]:disabled{color:transparent}tui-textfield select optgroup,tui-textfield select option{background-color:var(--tui-background-elevation-3)}tui-textfield select optgroup,tui-textfield select option:not(:disabled){color:var(--tui-text-primary)}tui-textfield button,tui-textfield a,tui-textfield tui-icon{pointer-events:auto}tui-textfield>.t-content{z-index:1;display:flex;block-size:var(--t-height);align-items:center;gap:inherit;margin-inline-start:auto;isolation:isolate;border-radius:inherit}tui-textfield textarea~.t-content{min-inline-size:.5rem}tui-textfield:is([data-mode~=readonly],[data-state=disabled],._empty) [tuiButtonX],tui-textfield [tuiInput]._empty~.t-content [tuiButtonX],tui-textfield [tuiInput]:disabled~.t-content [tuiButtonX]{display:none}tui-textfield .t-filler{pointer-events:none!important;color:var(--tui-text-tertiary)}tui-textfield [tuiFluidTypography]{font-weight:700}tui-textfield [tuiSelectLike]:not(:read-only){cursor:pointer}tui-textfield:has(input[type=tel]){direction:ltr}tui-textfield:is([data-mode~=invalid],.tui-invalid,:invalid):not([data-mode~=readonly],[data-mode~=valid],[data-state=disabled],:disabled) [tuiInput]:not(._empty)~[tuiLabel],tui-textfield:is([data-mode~=invalid],.tui-invalid,:invalid):not([data-mode~=readonly],[data-mode~=valid],[data-state=disabled],:disabled)[multi]:not(._empty) [tuiLabel]{color:var(--tui-text-negative)}tui-textfield:not([data-mode~=readonly]):focus-visible:not([data-focus=false]) [tuiInput]::placeholder,tui-textfield:not([data-mode~=readonly]):focus-visible:not([data-focus=false]) [tuiInput]._empty{color:var(--tui-text-tertiary)}tui-textfield:not([data-mode~=readonly]):focus-visible:not([data-focus=false]) [tuiLabel]{color:var(--tui-text-primary)!important;font:var(--t-label-font);line-height:var(--t-height);transform:translateY(var(--t-label-y))}tui-textfield:not([data-mode~=readonly])[data-focus=true] [tuiInput]::placeholder,tui-textfield:not([data-mode~=readonly])[data-focus=true] [tuiInput]._empty{color:var(--tui-text-tertiary)}tui-textfield:not([data-mode~=readonly])[data-focus=true] [tuiLabel]{color:var(--tui-text-primary)!important;font:var(--t-label-font);line-height:var(--t-height);transform:translateY(var(--t-label-y))}tui-textfield[multi][multi]{flex-wrap:nowrap;overflow:scroll;align-items:stretch;cursor:text;gap:0;max-block-size:calc(var(--t-vertical) * 2 + var(--t-item-height) * var(--t-rows));overscroll-behavior:none;scroll-behavior:var(--tui-scroll-behavior)}tui-textfield[multi][multi]:before,tui-textfield[multi][multi]:after{position:sticky;inset-block-start:0;inset-inline-start:0;block-size:var(--t-height)}tui-textfield[multi][multi][tuiChevron]:after{inset-block-start:.375rem;block-size:calc(var(--t-height) - .75rem)}tui-textfield[multi][multi]>.t-scrollbar{transform:translate(calc(var(--t-padding) * var(--tui-inline)));margin-inline-start:calc(-1 * var(--t-start));margin-inline-end:calc(1px - 100% + var(--t-start))}tui-textfield[multi][multi]>.t-scrollbar .t-bar_horizontal{display:none}tui-textfield[multi][multi]>.t-items{position:sticky;display:flex;inset-inline-start:var(--t-start);min-inline-size:0;max-block-size:var(--t-height);min-block-size:fit-content;flex:1;align-items:center;flex-wrap:wrap;padding:var(--t-vertical) 0;transition-duration:inherit;box-sizing:border-box}tui-textfield[multi][multi]>.t-items:after{content:\"\";min-inline-size:1px;min-block-size:1px}tui-textfield[multi][multi]>.t-items_horizontal{clip-path:inset(0 0 0 calc(var(--t-start) / 2 - var(--t-padding) - .25rem));flex-wrap:nowrap}[dir=rtl] tui-textfield[multi][multi]>.t-items_horizontal{clip-path:inset(0 calc(var(--t-start) / 2 - var(--t-padding) - .25rem) 0 0)}tui-textfield[multi][multi]>.t-items_horizontal>.t-input{padding-inline-end:calc(var(--t-side, 0rem) + var(--t-end) + var(--t-padding))}tui-textfield[multi][multi]>.t-items:not(tui-textfield[multi][multi]>.t-items_horizontal){--t-scroll: 0}tui-textfield[multi][multi]>.t-items>label[tuiLabel]{position:absolute;inset-block-start:0;inline-size:100%}tui-textfield[multi][multi]>.t-items>.t-input{position:relative;display:flex;align-items:center;flex:1;block-size:1.25em;max-block-size:1.25rem;max-inline-size:100%;pointer-events:none;transform:translate(var(--t-scroll))}tui-textfield[multi][multi]>.t-items>.t-input .t-filler,tui-textfield[multi][multi]>.t-items>.t-input [tuiInput]{block-size:100%;padding:0;pointer-events:auto}tui-textfield[multi][multi]>.t-items>.t-input .t-ghost{visibility:hidden;white-space:pre;text-overflow:clip;padding-inline-end:.125rem;min-block-size:var(--t-item-height, 1em)}tui-textfield[multi][multi]>.t-items>.t-input .t-filler_hidden{display:none}tui-textfield[multi][multi]>.t-content{position:sticky;inset-block-start:0;inset-inline-start:calc(100% - var(--t-side, 0rem) - var(--t-end) + var(--t-padding) - var(--t-offset));margin:0;gap:.25rem}tui-textfield[multi][multi]>.t-items input:not(:focus)::placeholder,tui-textfield[multi][multi][data-mode~=readonly]>.t-items input::placeholder,tui-textfield[multi][multi][data-mode~=readonly]>.t-items label~.t-input input::placeholder{opacity:0}tui-textfield[multi][multi]._empty>.t-items input::placeholder,tui-textfield[multi][multi][data-focus=true]:not([data-mode~=readonly]):not(:focus-within)>.t-items input::placeholder{opacity:1}tui-textfield[multi][multi][data-state=disabled],tui-textfield[multi][multi][data-mode~=readonly]{pointer-events:none}tui-textfield[multi][multi][data-state=disabled] select,tui-textfield[multi][multi][data-mode~=readonly] select{display:none}tui-textfield[multi][multi][data-size=l]{--t-vertical: .625rem;--t-offset: calc(1rem - var(--t-end) / 4.5)}tui-textfield[multi][multi][data-size=l]:before{margin-inline-end:.75rem}tui-textfield[multi][multi][data-size=l]:after{inset-inline-start:calc(100% - var(--t-end) - .375rem + .25 * (1em - 1rem));margin-inline-start:-.75rem;margin-inline-end:calc(.5 * (1.5rem - 1em) - var(--t-padding))}tui-textfield[multi][multi][data-size=l]._with-label{--t-vertical: 1.125rem}tui-textfield[multi][multi][data-size=l]._with-label>.t-items{padding:1.75rem 0 .5rem}tui-textfield[multi][multi][data-size=m]{--t-vertical: .5rem;--t-offset: calc(.75rem + var(--t-end) / 14)}tui-textfield[multi][multi][data-size=m]:before{inset-inline-start:-.125rem;margin-inline-end:.375rem}tui-textfield[multi][multi][data-size=m]:after{inset-inline-start:calc(100% - var(--t-end) - .25rem);border-width:.625rem;margin-inline-start:-.125rem;margin-inline-end:calc(.5 * (1.5rem - 1em) - var(--t-padding))}tui-textfield[multi][multi][data-size=m]._with-label{--t-vertical: .875rem}tui-textfield[multi][multi][data-size=m]._with-label>.t-items{padding:1.375rem 0 .375rem}tui-textfield[multi][multi][data-size=m]>.t-content{transform:translate(.125rem)}tui-textfield[multi][multi][data-size=s]{--t-vertical: .125rem;--t-offset: calc(.625rem + var(--t-end) / 10)}tui-textfield[multi][multi][data-size=s]:before{inset-inline-start:-.125rem;margin-inline-end:.375rem}tui-textfield[multi][multi][data-size=s]:after{inset-inline-start:calc(100% - var(--t-end) - .125rem);border-width:.5rem;margin-inline-end:calc(-1 * var(--t-padding))}tui-textfield[multi][multi][data-size=s]>.t-content{gap:0;transform:translate(calc(.375rem - var(--t-end) / 10))}tui-textfield[multi][multi] tui-textfield-item{transform:translate(var(--t-scroll))}tui-textfield[multi][multi] input::placeholder{transition-property:color;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out}tui-textfield[multi][multi] select{opacity:0;pointer-events:none!important}tui-textfield[multi][multi]._empty>.t-items select~.t-filler{display:block}tui-textfield[multi][multi]._empty:not([data-focus=true])>.t-items select~.t-filler{color:var(--tui-text-secondary)}tui-textfield[multi][multi]:has([tuiSelectLike]){cursor:pointer}\n"], dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "directive", type: PolymorpheusOutlet, selector: "[polymorpheusOutlet]", inputs: ["polymorpheusOutlet", "polymorpheusOutletContext"] }, { kind: "directive", type: TuiButtonX, selector: "[tuiButtonX]" }, { kind: "component", type: TuiScrollControls, selector: "tui-scroll-controls" }, { kind: "directive", type: WaResizeObserver, selector: "[waResizeObserver]", inputs: ["box"], outputs: ["waResizeObserver"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
309
310
|
}
|
|
310
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
311
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TuiTextfieldMultiComponent, decorators: [{
|
|
311
312
|
type: Component,
|
|
312
313
|
args: [{ selector: 'tui-textfield[multi]', imports: [
|
|
313
314
|
AsyncPipe,
|
|
314
315
|
PolymorpheusOutlet,
|
|
315
|
-
|
|
316
|
+
TuiButtonX,
|
|
316
317
|
TuiScrollControls,
|
|
317
318
|
WaResizeObserver,
|
|
318
319
|
], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
|
|
@@ -320,15 +321,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.16", ngImpo
|
|
|
320
321
|
tuiAsDataListHost(TuiTextfieldMultiComponent),
|
|
321
322
|
tuiProvide(TuiTextfieldComponent, TuiTextfieldMultiComponent),
|
|
322
323
|
tuiProvide(TUI_SCROLL_REF, ElementRef),
|
|
323
|
-
],
|
|
324
|
-
class: 'tui-interactive',
|
|
324
|
+
], host: {
|
|
325
325
|
'[attr.data-state]': 'control()?.disabled ? "disabled" : null',
|
|
326
326
|
'[class._empty]': '!control()?.value?.length',
|
|
327
327
|
'[style.--t-item-height.px]': 'height()',
|
|
328
328
|
'[style.--t-rows]': 'rows()',
|
|
329
329
|
'(click.prevent)': 'onClick($event.target)',
|
|
330
330
|
'(tuiActiveZoneChange)': '!$event && el.scrollTo({left: 0})',
|
|
331
|
-
}, template: "@if (control()?.control?.valueChanges | async) {}\n@if (rows() > 1) {\n <tui-scroll-controls class=\"t-scrollbar\" />\n}\n\n<div\n class=\"t-items\"\n [class.t-items_horizontal]=\"rows() === 1\"\n (click)=\"input()?.nativeElement?.focus()\"\n (pointerdown.self.zoneless.prevent)=\"(0)\"\n (waResizeObserver)=\"$event[0] && onItems($event[0])\"\n>\n <ng-content select=\"label\" />\n @for (item of control()?.value; track item) {\n <ng-template\n [polymorpheusOutlet]=\"component\"\n [polymorpheusOutletContext]=\"{$implicit: {item, index: $index}}\"\n />\n }\n <span\n class=\"t-input\"\n (keydown.arrowLeft)=\"onLeft($event)\"\n >\n <ng-content select=\"input\" />\n <ng-content select=\"select\" />\n <span class=\"t-ghost\">{{ placeholder }}</span>\n <input\n aria-hidden=\"true\"\n disabled\n class=\"t-filler\"\n [class.t-filler_hidden]=\"!showFiller()\"\n [value]=\"computedFiller()\"\n />\n </span>\n</div>\n\n<span\n class=\"t-content\"\n (click.stop)=\"input()?.nativeElement?.focus()\"\n (pointerdown.zoneless.prevent)=\"(0)\"\n (waResizeObserver)=\"$event[0] && onResize($event[0])\"\n>\n <ng-content />\n @if (options.cleaner()) {\n <button\n appearance=\"icon\"\n size=\"xs\"\n tabindex=\"-1\"\n tuiIconButton\n type=\"button\"\n class=\"t-clear\"\n [iconStart]=\"icons.close\"\n (click)=\"accessor()?.setValue([])\"\n >\n {{ clear() }}\n </button>\n }\n <ng-container #vcr />\n <ng-content select=\"tui-icon\" />\n</span>\n\n@if (control()?.value != null) {\n <span class=\"t-template\">\n <ng-container *polymorpheusOutlet=\"content() as text; context: {$implicit: control()?.value}\">\n {{ text }}\n </ng-container>\n </span>\n}\n", styles: ["tui-textfield{scrollbar-width:none;-ms-overflow-style:none;transition-property:color;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out;--t-height: var(--tui-height-l);--t-padding: var(--tui-padding-l);--t-label-y: -.75rem;--t-label-font: var(--tui-font-text-s);--t-end: 0rem;--t-start: 0rem;position:relative;display:flex;flex-wrap:wrap;align-items:center;cursor:pointer;min-block-size:var(--t-height);padding:0 var(--t-padding);border-radius:var(--tui-radius-l);font:var(--tui-font-text-ui-m);line-height:1.25rem;box-sizing:border-box;gap:0 .25rem;isolation:isolate}tui-textfield::-webkit-scrollbar,tui-textfield::-webkit-scrollbar-thumb{display:none}tui-textfield[tuiIcons]:read-only{color:var(--tui-text-tertiary)}tui-textfield[style*=\"--t-icon-start:\"]{--t-start: 2.25rem}tui-textfield[style*=\"--t-icon-end:\"]{--t-end: 2.25rem}tui-textfield[tuiIcons]:after{position:relative;block-size:auto;align-self:stretch;border-inline-start:var(--t-padding) solid transparent;border-inline-end:var(--t-padding) solid transparent;margin:0 calc(-1 * var(--t-padding))}tui-textfield::-webkit-resizer{border:.25rem solid transparent;inline-size:.5rem;block-size:.5rem;box-sizing:content-box;color:var(--tui-text-tertiary);background:linear-gradient(-45deg,transparent,transparent .125rem,currentColor .125rem,currentColor .1875rem,transparent .1875rem,transparent .25rem,currentColor .25rem,currentColor .3125rem,transparent .35rem);background-clip:content-box}tui-textfield label,tui-textfield>.t-content,tui-textfield>.t-template{pointer-events:none}tui-textfield input,tui-textfield select,tui-textfield textarea{font:inherit;resize:none;outline:none;padding-block-start:1.125rem;padding-block-end:1.125rem;color:var(--tui-text-primary)}tui-textfield input[inputmode=none],tui-textfield select[inputmode=none],tui-textfield textarea[inputmode=none]{caret-color:transparent}tui-textfield[data-size=s]{--t-height: var(--tui-height-s);--t-padding: var(--tui-padding-s);border-radius:var(--tui-radius-m);gap:0;font:var(--tui-font-text-ui-s);line-height:1rem}tui-textfield[data-size=s][style*=\"--t-icon-start:\"]{--t-start: 1.25rem}tui-textfield[data-size=s][style*=\"--t-icon-end:\"]{--t-end: 1.25rem}tui-textfield[data-size=s]:before{margin-inline-end:.5rem;margin-inline-start:-.125rem;font-size:1rem}tui-textfield[data-size=s]:after{margin-inline-end:calc(-.125rem - var(--t-padding));margin-inline-start:calc(.625rem - var(--t-padding));font-size:1rem}tui-textfield[data-size=s] input,tui-textfield[data-size=s] select,tui-textfield[data-size=s] textarea{padding-block-start:.5rem;padding-block-end:.5rem}tui-textfield[data-size=s]>.t-content{margin-inline-end:-.375rem}tui-textfield[data-size=m]{--t-height: var(--tui-height-m);--t-padding: var(--tui-padding-m);--t-label-font: var(--tui-font-text-xs);--t-label-y: -.5625rem;border-radius:var(--tui-radius-m);font:var(--tui-font-text-ui-s);line-height:1rem}tui-textfield[data-size=m][style*=\"--t-icon-start:\"]{--t-start: 1.75rem}tui-textfield[data-size=m][style*=\"--t-icon-end:\"]{--t-end: 1.75rem}tui-textfield[data-size=m]:before{margin-inline-start:-.125rem;margin-inline-end:.125rem}tui-textfield[data-size=m]:after{margin-inline-start:calc(.25rem - var(--t-padding));margin-inline-end:calc(-.125rem - var(--t-padding))}tui-textfield[data-size=m] input,tui-textfield[data-size=m] select,tui-textfield[data-size=m] textarea{padding-block-start:.875rem;padding-block-end:.875rem}tui-textfield[data-size=m]>.t-content{margin-inline-end:-.125rem}tui-textfield[data-size=l]{--t-label: -.7rem}tui-textfield[tuiIcons]:hover{color:var(--tui-text-secondary)}tui-textfield[tuiIcons]:hover:has(input:read-only):not([multi]),tui-textfield[tuiIcons]:hover:has(textarea:read-only),tui-textfield[tuiIcons]:hover:has(select[data-mode~=readonly]){color:var(--tui-text-tertiary)}tui-textfield:before{z-index:1;margin-inline-end:.5rem;pointer-events:none}tui-textfield:has(:disabled:not(.t-filler,button,option,[tuiChip])):before,tui-textfield:has(:disabled:not(.t-filler,button,option,[tuiChip])):after,tui-textfield:has(:disabled:not(.t-filler,button,option,[tuiChip]))>.t-template{opacity:var(--tui-disabled-opacity)}tui-textfield._disabled:before,tui-textfield._disabled:after,tui-textfield._disabled>.t-template{opacity:var(--tui-disabled-opacity)}tui-textfield:has(label:not(:empty))>.t-template,tui-textfield:has(label:not(:empty)) input:not([type=range]),tui-textfield:has(label:not(:empty)) select:defined,tui-textfield:has(label:not(:empty)) textarea:defined{padding-block-start:calc(var(--t-height) / 3);padding-block-end:0}tui-textfield:not([data-focus=true]):has(label:not(:empty))>.t-template::placeholder,tui-textfield:not([data-focus=true]):has(label:not(:empty)) input:not([type=range])::placeholder,tui-textfield:not([data-focus=true]):has(label:not(:empty)) select:defined::placeholder,tui-textfield:not([data-focus=true]):has(label:not(:empty)) textarea:defined::placeholder,tui-textfield:not([data-focus=true]):has(label:not(:empty))>.t-template._empty,tui-textfield:not([data-focus=true]):has(label:not(:empty)) input:not([type=range])._empty,tui-textfield:not([data-focus=true]):has(label:not(:empty)) select:defined._empty,tui-textfield:not([data-focus=true]):has(label:not(:empty)) textarea:defined._empty{color:transparent}tui-textfield._with-label>.t-template,tui-textfield._with-label input:not([type=range]),tui-textfield._with-label select:defined,tui-textfield._with-label textarea:defined{padding-block-start:calc(var(--t-height) / 3);padding-block-end:0}tui-textfield:not([data-focus=true])._with-label>.t-template::placeholder,tui-textfield:not([data-focus=true])._with-label input:not([type=range])::placeholder,tui-textfield:not([data-focus=true])._with-label select:defined::placeholder,tui-textfield:not([data-focus=true])._with-label textarea:defined::placeholder,tui-textfield:not([data-focus=true])._with-label>.t-template._empty,tui-textfield:not([data-focus=true])._with-label input:not([type=range])._empty,tui-textfield:not([data-focus=true])._with-label select:defined._empty,tui-textfield:not([data-focus=true])._with-label textarea:defined._empty{color:transparent}tui-textfield>.t-template,tui-textfield input:defined,tui-textfield select:defined,tui-textfield textarea:defined{position:absolute;top:0;left:0;inline-size:100%;block-size:100%;-webkit-appearance:none;appearance:none;box-sizing:border-box;border-radius:inherit;border-width:0;overscroll-behavior:none;padding-inline-start:calc(var(--t-start, 0rem) + var(--t-padding));padding-inline-end:calc(var(--t-end, 0rem) + var(--t-side) + var(--t-padding))}tui-textfield>.t-template{display:flex;align-items:center;color:var(--tui-text-primary)}tui-textfield._with-template input:first-of-type,tui-textfield._with-template select,tui-textfield._with-template textarea{color:transparent!important}tui-textfield input:not([type=range]),tui-textfield select:defined,tui-textfield textarea:defined{pointer-events:auto;background:none}tui-textfield input:not([type=range]):not(select):read-only~.t-filler,tui-textfield select:defined:not(select):read-only~.t-filler,tui-textfield textarea:defined:not(select):read-only~.t-filler{display:none}tui-textfield input:not([type=range]):disabled~label,tui-textfield select:defined:disabled~label,tui-textfield textarea:defined:disabled~label,tui-textfield input:not([type=range]):disabled~.t-content,tui-textfield select:defined:disabled~.t-content,tui-textfield textarea:defined:disabled~.t-content{opacity:var(--tui-disabled-opacity)}tui-textfield input:not([type=range]):disabled~label>tui-icon,tui-textfield select:defined:disabled~label>tui-icon,tui-textfield textarea:defined:disabled~label>tui-icon,tui-textfield input:not([type=range]):disabled~.t-content>tui-icon,tui-textfield select:defined:disabled~.t-content>tui-icon,tui-textfield textarea:defined:disabled~.t-content>tui-icon{display:none}tui-textfield input:not([type=range]):-webkit-autofill~label,tui-textfield select:defined:-webkit-autofill~label,tui-textfield textarea:defined:-webkit-autofill~label,tui-textfield input:not([type=range]):not(._empty):not(:placeholder-shown)~label,tui-textfield select:defined:not(._empty):not(:placeholder-shown)~label,tui-textfield textarea:defined:not(._empty):not(:placeholder-shown)~label{font:var(--t-label-font);line-height:var(--t-height);transform:translateY(var(--t-label-y))}tui-textfield input:not([type=range]):-webkit-autofill:not(:disabled)[data-mode~=invalid]~label,tui-textfield select:defined:-webkit-autofill:not(:disabled)[data-mode~=invalid]~label,tui-textfield textarea:defined:-webkit-autofill:not(:disabled)[data-mode~=invalid]~label,tui-textfield input:not([type=range]):not(._empty):not(:placeholder-shown):not(:disabled)[data-mode~=invalid]~label,tui-textfield select:defined:not(._empty):not(:placeholder-shown):not(:disabled)[data-mode~=invalid]~label,tui-textfield textarea:defined:not(._empty):not(:placeholder-shown):not(:disabled)[data-mode~=invalid]~label,tui-textfield input:not([type=range]):-webkit-autofill:invalid:not(:disabled):not([data-mode])~label,tui-textfield select:defined:-webkit-autofill:invalid:not(:disabled):not([data-mode])~label,tui-textfield textarea:defined:-webkit-autofill:invalid:not(:disabled):not([data-mode])~label,tui-textfield input:not([type=range]):not(._empty):not(:placeholder-shown):invalid:not(:disabled):not([data-mode])~label,tui-textfield select:defined:not(._empty):not(:placeholder-shown):invalid:not(:disabled):not([data-mode])~label,tui-textfield textarea:defined:not(._empty):not(:placeholder-shown):invalid:not(:disabled):not([data-mode])~label{color:var(--tui-text-negative)}tui-textfield input:not([type=range]):-webkit-autofill:not(:disabled):not([data-mode~=readonly])~.t-content .t-clear,tui-textfield select:defined:-webkit-autofill:not(:disabled):not([data-mode~=readonly])~.t-content .t-clear,tui-textfield textarea:defined:-webkit-autofill:not(:disabled):not([data-mode~=readonly])~.t-content .t-clear,tui-textfield input:not([type=range]):not(._empty):not(:placeholder-shown):not(:disabled):not([data-mode~=readonly])~.t-content .t-clear,tui-textfield select:defined:not(._empty):not(:placeholder-shown):not(:disabled):not([data-mode~=readonly])~.t-content .t-clear,tui-textfield textarea:defined:not(._empty):not(:placeholder-shown):not(:disabled):not([data-mode~=readonly])~.t-content .t-clear{display:flex}tui-textfield input:not([type=range]):not([data-mode~=readonly]):focus-visible:not([data-focus=false])::placeholder,tui-textfield select:defined:not([data-mode~=readonly]):focus-visible:not([data-focus=false])::placeholder,tui-textfield textarea:defined:not([data-mode~=readonly]):focus-visible:not([data-focus=false])::placeholder,tui-textfield input:not([type=range]):not([data-mode~=readonly]):focus-visible:not([data-focus=false])._empty,tui-textfield select:defined:not([data-mode~=readonly]):focus-visible:not([data-focus=false])._empty,tui-textfield textarea:defined:not([data-mode~=readonly]):focus-visible:not([data-focus=false])._empty{color:var(--tui-text-tertiary)}tui-textfield input:not([type=range]):not([data-mode~=readonly]):focus-visible:not([data-focus=false])~label,tui-textfield select:defined:not([data-mode~=readonly]):focus-visible:not([data-focus=false])~label,tui-textfield textarea:defined:not([data-mode~=readonly]):focus-visible:not([data-focus=false])~label{color:var(--tui-text-primary)!important;font:var(--t-label-font);line-height:var(--t-height);transform:translateY(var(--t-label-y))}tui-textfield input:not([type=range]):not([data-mode~=readonly])[data-focus=true]::placeholder,tui-textfield select:defined:not([data-mode~=readonly])[data-focus=true]::placeholder,tui-textfield textarea:defined:not([data-mode~=readonly])[data-focus=true]::placeholder,tui-textfield input:not([type=range]):not([data-mode~=readonly])[data-focus=true]._empty,tui-textfield select:defined:not([data-mode~=readonly])[data-focus=true]._empty,tui-textfield textarea:defined:not([data-mode~=readonly])[data-focus=true]._empty{color:var(--tui-text-tertiary)}tui-textfield input:not([type=range]):not([data-mode~=readonly])[data-focus=true]~label,tui-textfield select:defined:not([data-mode~=readonly])[data-focus=true]~label,tui-textfield textarea:defined:not([data-mode~=readonly])[data-focus=true]~label{color:var(--tui-text-primary)!important;font:var(--t-label-font);line-height:var(--t-height);transform:translateY(var(--t-label-y))}tui-textfield input:not([type=range]):not([data-mode~=readonly])[tuiWrapper]:not(._focused):has(:focus-visible)::placeholder,tui-textfield select:defined:not([data-mode~=readonly])[tuiWrapper]:not(._focused):has(:focus-visible)::placeholder,tui-textfield textarea:defined:not([data-mode~=readonly])[tuiWrapper]:not(._focused):has(:focus-visible)::placeholder,tui-textfield input:not([type=range]):not([data-mode~=readonly])[tuiWrapper]._focused::placeholder,tui-textfield select:defined:not([data-mode~=readonly])[tuiWrapper]._focused::placeholder,tui-textfield textarea:defined:not([data-mode~=readonly])[tuiWrapper]._focused::placeholder,tui-textfield input:not([type=range]):not([data-mode~=readonly])[tuiWrapper]:not(._focused):has(:focus-visible)._empty,tui-textfield select:defined:not([data-mode~=readonly])[tuiWrapper]:not(._focused):has(:focus-visible)._empty,tui-textfield textarea:defined:not([data-mode~=readonly])[tuiWrapper]:not(._focused):has(:focus-visible)._empty,tui-textfield input:not([type=range]):not([data-mode~=readonly])[tuiWrapper]._focused._empty,tui-textfield select:defined:not([data-mode~=readonly])[tuiWrapper]._focused._empty,tui-textfield textarea:defined:not([data-mode~=readonly])[tuiWrapper]._focused._empty{color:var(--tui-text-tertiary)}tui-textfield input:not([type=range]):not([data-mode~=readonly])[tuiWrapper]:not(._focused):has(:focus-visible)~label,tui-textfield select:defined:not([data-mode~=readonly])[tuiWrapper]:not(._focused):has(:focus-visible)~label,tui-textfield textarea:defined:not([data-mode~=readonly])[tuiWrapper]:not(._focused):has(:focus-visible)~label,tui-textfield input:not([type=range]):not([data-mode~=readonly])[tuiWrapper]._focused~label,tui-textfield select:defined:not([data-mode~=readonly])[tuiWrapper]._focused~label,tui-textfield textarea:defined:not([data-mode~=readonly])[tuiWrapper]._focused~label{color:var(--tui-text-primary)!important;font:var(--t-label-font);line-height:var(--t-height);transform:translateY(var(--t-label-y))}@supports (-webkit-touch-callout: none){tui-textfield input:not([type=range])._ios-fix,tui-textfield select:defined._ios-fix,tui-textfield textarea:defined._ios-fix{position:fixed;left:1000rem}}tui-textfield [tuiLabel][tuiLabel][tuiLabel]{transition-property:all;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;position:relative;display:block;flex:1;align-self:flex-start;font-size:inherit;line-height:var(--t-height);transition-duration:inherit}tui-textfield label:defined,tui-textfield input:defined::placeholder,tui-textfield textarea:defined::placeholder,tui-textfield select:defined._empty{color:var(--tui-text-secondary)}tui-textfield select:not([data-mode~=readonly]){cursor:pointer}tui-textfield select option[value=\"\"]:disabled{color:transparent}tui-textfield select optgroup,tui-textfield select option{background-color:var(--tui-background-elevation-3)}tui-textfield select optgroup,tui-textfield select option:not(:disabled){color:var(--tui-text-primary)}tui-textfield button,tui-textfield a{pointer-events:auto}tui-textfield>.t-content{z-index:1;display:flex;block-size:var(--t-height);align-items:center;gap:inherit;margin-inline-start:auto;isolation:isolate;border-radius:inherit}tui-textfield>.t-content>tui-icon{pointer-events:auto}tui-textfield textarea~.t-content{min-inline-size:.5rem}tui-textfield .t-clear{z-index:1;display:none;pointer-events:auto}tui-textfield>.t-filler:defined{pointer-events:none;color:var(--tui-text-tertiary);opacity:1}tui-textfield [tuiFluidTypography]{font-weight:700}tui-textfield [tuiSelectLike]:not(:read-only){cursor:pointer}tui-textfield:has(input[type=tel]){direction:ltr}tui-textfield[multi][multi]{flex-wrap:nowrap;overflow:scroll;align-items:stretch;cursor:text;gap:0;max-block-size:calc(var(--t-vertical) * 2 + var(--t-item-height) * var(--t-rows));overscroll-behavior:none;scroll-behavior:var(--tui-scroll-behavior)}tui-textfield[multi][multi]:before,tui-textfield[multi][multi]:after{position:sticky;top:0;left:0;inset-inline-start:0;block-size:var(--t-height)}tui-textfield[multi][multi][tuiChevron]:after{top:.375rem;block-size:calc(var(--t-height) - .75rem)}tui-textfield[multi][multi]>.t-scrollbar{transform:translate(calc(var(--t-padding) * var(--tui-inline)));margin-inline-start:calc(-1 * var(--t-start));margin-inline-end:calc(1px - 100% + var(--t-start))}tui-textfield[multi][multi]>.t-scrollbar .t-bar_horizontal{display:none}tui-textfield[multi][multi]>.t-items{position:sticky;left:var(--t-start);display:flex;inset-inline-start:var(--t-start);min-inline-size:0;min-block-size:fit-content;flex:1;align-items:center;flex-wrap:wrap;padding:var(--t-vertical) 0;transition-duration:inherit}tui-textfield[multi][multi]>.t-items:after{content:\"\";min-inline-size:1px;min-block-size:1px}tui-textfield[multi][multi]>.t-items_horizontal{clip-path:inset(0 0 0 calc(var(--t-start) / 2 - var(--t-padding) - .25rem));flex-wrap:nowrap}[dir=rtl] tui-textfield[multi][multi]>.t-items_horizontal{clip-path:inset(0 calc(var(--t-start) / 2 - var(--t-padding) - .25rem) 0 0)}tui-textfield[multi][multi]>.t-items_horizontal>.t-input{padding-inline-end:calc(var(--t-side) + var(--t-end) + var(--t-padding))}tui-textfield[multi][multi]>.t-items:not(tui-textfield[multi][multi]>.t-items_horizontal){--t-scroll: 0}tui-textfield[multi][multi]>.t-items>label[tuiLabel]{position:absolute;top:0;inline-size:100%}tui-textfield[multi][multi]>.t-items>.t-input{position:relative;display:flex;align-items:center;flex:1;block-size:1.25em;max-block-size:1.25rem;max-inline-size:100%;pointer-events:none;transform:translate(var(--t-scroll))}tui-textfield[multi][multi]>.t-items>.t-input input{position:absolute;left:0;inset-inline-start:0;inline-size:100%;padding:0}tui-textfield[multi][multi]>.t-items>.t-input .t-ghost{visibility:hidden;white-space:pre;text-overflow:clip;padding-inline-end:.125rem;min-block-size:var(--t-item-height, 1em)}tui-textfield[multi][multi]>.t-items>.t-input .t-filler{position:absolute;left:0;inset-inline-start:0;color:var(--tui-text-tertiary);pointer-events:none}tui-textfield[multi][multi]>.t-items>.t-input .t-filler_hidden{display:none}tui-textfield[multi][multi]>.t-content{position:sticky;top:0;left:calc(100% - var(--t-side) - var(--t-end) + var(--t-padding) - var(--t-offset));inset-inline-start:calc(100% - var(--t-side) - var(--t-end) + var(--t-padding) - var(--t-offset));margin:0;gap:.25rem}tui-textfield[multi][multi]>.t-content .t-clear{display:flex}tui-textfield[multi][multi][data-mode~=invalid]:not([data-mode~=readonly])>.t-items>[tuiLabel]{color:var(--tui-text-negative)}tui-textfield[multi][multi][data-focus=true]:not([data-mode~=readonly])>.t-items>[tuiLabel]{color:var(--tui-text-primary)!important}tui-textfield[multi][multi][data-mode~=readonly]>.t-content .t-clear,tui-textfield[multi][multi]._disabled>.t-content .t-clear,tui-textfield[multi][multi]._empty>.t-content .t-clear{display:none}tui-textfield[multi][multi]>.t-items input:not(:focus)::placeholder,tui-textfield[multi][multi][data-mode~=readonly]>.t-items input::placeholder,tui-textfield[multi][multi][data-mode~=readonly]>.t-items label~.t-input input::placeholder{opacity:0}tui-textfield[multi][multi]._empty>.t-items input::placeholder,tui-textfield[multi][multi][data-focus=true]:not([data-mode~=readonly]):not(:focus-within)>.t-items input::placeholder{opacity:1}tui-textfield[multi][multi]:not(._empty)>.t-items [tuiLabel],tui-textfield[multi][multi][data-focus=true]:not([data-mode~=readonly])>.t-items [tuiLabel]{font:var(--t-label-font);line-height:var(--t-height);transform:translateY(var(--t-label-y))}tui-textfield[multi][multi][data-state=disabled],tui-textfield[multi][multi][data-mode~=readonly]{pointer-events:none}tui-textfield[multi][multi][data-state=disabled] select,tui-textfield[multi][multi][data-mode~=readonly] select{display:none}tui-textfield[multi][multi][data-size=l]{--t-vertical: .625rem;--t-offset: calc(1rem - var(--t-end) / 4.5)}tui-textfield[multi][multi][data-size=l]:before{margin-inline-end:.75rem}tui-textfield[multi][multi][data-size=l]:after{left:calc(100% - var(--t-end) - .375rem + .25 * (1em - 1rem));inset-inline-start:calc(100% - var(--t-end) - .375rem + .25 * (1em - 1rem));margin-inline-end:calc(.5 * (1.5rem - 1em) - var(--t-padding));margin-inline-start:-.75rem}tui-textfield[multi][multi][data-size=l]._with-label{--t-vertical: 1.125rem}tui-textfield[multi][multi][data-size=l]._with-label>.t-items{padding:1.75rem 0 .5rem}tui-textfield[multi][multi][data-size=m]{--t-vertical: .5rem;--t-offset: calc(.75rem + var(--t-end) / 14)}tui-textfield[multi][multi][data-size=m]:before{left:-.125rem;inset-inline-start:-.125rem;margin-inline-end:.375rem}tui-textfield[multi][multi][data-size=m]:after{left:calc(100% - var(--t-end) - .25rem);inset-inline-start:calc(100% - var(--t-end) - .25rem);margin-inline-start:-.125rem;border-width:.625rem;margin-inline-end:calc(.5 * (1.5rem - 1em) - var(--t-padding))}tui-textfield[multi][multi][data-size=m]._with-label{--t-vertical: .875rem}tui-textfield[multi][multi][data-size=m]._with-label>.t-items{padding:1.375rem 0 .375rem}tui-textfield[multi][multi][data-size=m]>.t-content{transform:translate(.125rem)}tui-textfield[multi][multi][data-size=s]{--t-vertical: .125rem;--t-offset: calc(.625rem + var(--t-end) / 10)}tui-textfield[multi][multi][data-size=s]:before{left:-.125rem;inset-inline-start:-.125rem;margin-inline-end:.375rem}tui-textfield[multi][multi][data-size=s]:after{left:calc(100% - var(--t-end) - .125rem);inset-inline-start:calc(100% - var(--t-end) - .125rem);border-width:.5rem;margin-inline-end:calc(-1 * var(--t-padding))}tui-textfield[multi][multi][data-size=s]>.t-content{gap:0;transform:translate(calc(.375rem - var(--t-end) / 10))}tui-textfield[multi][multi]:focus-visible:not([data-focus=false]) input::placeholder,tui-textfield[multi][multi]:focus-visible:not([data-focus=false]) input._empty{color:var(--tui-text-tertiary)}tui-textfield[multi][multi][data-focus=true] input::placeholder,tui-textfield[multi][multi][data-focus=true] input._empty{color:var(--tui-text-tertiary)}tui-textfield[multi][multi][tuiWrapper]:not(._focused):has(:focus-visible) input::placeholder,tui-textfield[multi][multi][tuiWrapper]._focused input::placeholder,tui-textfield[multi][multi][tuiWrapper]:not(._focused):has(:focus-visible) input._empty,tui-textfield[multi][multi][tuiWrapper]._focused input._empty{color:var(--tui-text-tertiary)}tui-textfield[multi][multi] tui-textfield-item{transform:translate(var(--t-scroll))}tui-textfield[multi][multi] input::placeholder{transition-property:color;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out}tui-textfield[multi][multi] select{opacity:0;padding:0;pointer-events:none}tui-textfield[multi][multi]._empty>.t-items select~.t-filler{display:block}tui-textfield[multi][multi]._empty:not([data-focus=true])>.t-items select~.t-filler{color:var(--tui-text-secondary)}tui-textfield[multi][multi]:has([tuiSelectLike]){cursor:pointer}\n"] }]
|
|
331
|
+
}, template: "@if (control()?.control?.valueChanges | async) {}\n@if (rows() > 1) {\n <tui-scroll-controls class=\"t-scrollbar\" />\n}\n\n<div\n class=\"t-items\"\n [class.t-items_horizontal]=\"rows() === 1\"\n (click)=\"input()?.nativeElement?.focus()\"\n (pointerdown.self.zoneless.prevent)=\"(0)\"\n (waResizeObserver)=\"$event[0] && onItems($event[0])\"\n>\n <ng-content select=\"label\" />\n @for (item of control()?.value; track item) {\n <ng-template\n [polymorpheusOutlet]=\"component\"\n [polymorpheusOutletContext]=\"{$implicit: {item, index: $index}}\"\n />\n }\n <span\n class=\"t-input\"\n (keydown.arrowLeft)=\"onLeft($event)\"\n >\n <ng-content select=\"input\" />\n <ng-content select=\"select\" />\n <span class=\"t-ghost\">{{ placeholder }}</span>\n <input\n aria-hidden=\"true\"\n disabled\n class=\"t-filler\"\n [class.t-filler_hidden]=\"!showFiller()\"\n [value]=\"computedFiller()\"\n />\n </span>\n</div>\n\n<span\n class=\"t-content\"\n (click.stop)=\"input()?.nativeElement?.focus()\"\n (pointerdown.zoneless.prevent)=\"(0)\"\n (waResizeObserver)=\"$event[0] && onResize($event[0])\"\n>\n <ng-content />\n @if (options.cleaner()) {\n <button\n tuiButtonX\n (click)=\"accessor()?.setValue([])\"\n >\n {{ clear() }}\n </button>\n }\n <ng-container #vcr />\n <ng-content select=\"tui-icon\" />\n</span>\n\n@if (control()?.value != null) {\n <span class=\"t-template\">\n <ng-container *polymorpheusOutlet=\"content() as text; context: {$implicit: control()?.value}\">\n {{ text }}\n </ng-container>\n </span>\n}\n", styles: ["tui-textfield{scrollbar-width:none;-ms-overflow-style:none;transition-property:color;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out;--t-height: var(--tui-height-l);--t-padding: var(--tui-padding-l);--t-label-y: -.75rem;--t-label-font: var(--tui-font-body-s);--t-end: 0rem;--t-start: 0rem;position:relative;display:flex;flex-wrap:wrap;align-items:flex-start;min-block-size:var(--t-height);padding:0 var(--t-padding);border-radius:var(--tui-radius-l);font:var(--tui-font-ui-m);line-height:1.25rem;box-sizing:border-box;gap:0 .25rem;isolation:isolate}tui-textfield::-webkit-scrollbar,tui-textfield::-webkit-scrollbar-thumb{display:none}tui-textfield[tuiAppearance]{outline:none}tui-textfield[tuiAppearance][data-appearance=\"\"]{color:var(--tui-text-tertiary)}@media (hover: hover) and (pointer: fine){tui-textfield[tuiAppearance][data-appearance=\"\"]:not([data-mode~=readonly]):is(a,button,select,textarea,input,label,.tui-interactive):not(:disabled):hover:not([data-state]){color:var(--tui-text-secondary)}}tui-textfield[tuiAppearance][data-appearance=\"\"]:not([data-mode~=readonly])[data-state=hover]{color:var(--tui-text-secondary)}tui-textfield[data-icon-start]{--t-start: 2.25rem}tui-textfield[data-icon-end]{--t-end: 2.25rem}tui-textfield[tuiIcons]:before{z-index:1;block-size:var(--t-height);margin-inline-end:.5rem;pointer-events:none}tui-textfield[tuiIcons]:after{position:relative;block-size:var(--t-height);cursor:pointer;border-inline:var(--t-padding) solid transparent;margin:0 calc(-1 * var(--t-padding))}tui-textfield::-webkit-resizer{border:.25rem solid transparent;inline-size:.5rem;block-size:.5rem;box-sizing:content-box;color:var(--tui-text-tertiary);background:linear-gradient(-45deg,transparent,transparent .125rem,currentColor .125rem,currentColor .1875rem,transparent .1875rem,transparent .25rem,currentColor .25rem,currentColor .3125rem,transparent .35rem);background-clip:content-box}tui-textfield [tuiLabel],tui-textfield>.t-content,tui-textfield>.t-template{pointer-events:none}tui-textfield[data-size=s]{--t-height: var(--tui-height-s);--t-padding: var(--tui-padding-s);border-radius:var(--tui-radius-m);gap:0;font:var(--tui-font-ui-s);line-height:1rem}tui-textfield[data-size=s][data-icon-start]{--t-start: 1.25rem}tui-textfield[data-size=s][data-icon-end]{--t-end: 1.25rem}tui-textfield[data-size=s]:before{margin-inline:-.125rem .5rem;font-size:1rem}tui-textfield[data-size=s]:after{margin-inline-start:calc(.625rem - var(--t-padding));margin-inline-end:calc(-.125rem - var(--t-padding));font-size:1rem}tui-textfield[data-size=s]>.t-content{margin-inline-end:-.375rem}tui-textfield[data-size=m]{--t-height: var(--tui-height-m);--t-padding: var(--tui-padding-m);--t-label-font: var(--tui-font-body-xs);--t-label-y: -.5625rem;border-radius:var(--tui-radius-m);font:var(--tui-font-ui-s);line-height:1rem}tui-textfield[data-size=m][data-icon-start]{--t-start: 1.75rem}tui-textfield[data-size=m][data-icon-end]{--t-end: 1.75rem}tui-textfield[data-size=m]:before{margin-inline:-.125rem .125rem}tui-textfield[data-size=m]:after{margin-inline-start:calc(.25rem - var(--t-padding));margin-inline-end:calc(-.125rem - var(--t-padding))}tui-textfield[data-size=m]>.t-content{margin-inline-end:-.125rem}tui-textfield[data-size=l]{--t-label: -.7rem}tui-textfield:is(._disabled,[data-state=disabled]){pointer-events:none;opacity:var(--tui-disabled-opacity)}tui-textfield:is(._disabled,[data-state=disabled]) [tuiAppearance]:is(._disabled,:disabled,[data-state=disabled]){opacity:1}tui-textfield:is(._disabled,[data-state=disabled]) tui-icon{display:none}tui-textfield._with-label>.t-template,tui-textfield._with-label .t-filler,tui-textfield._with-label [tuiInput]{padding-block-start:calc(var(--t-height) / 3);padding-block-end:0}tui-textfield._with-label:is(:not([data-focus=true]),[data-mode~=readonly])>.t-template::placeholder,tui-textfield._with-label:is(:not([data-focus=true]),[data-mode~=readonly]) [tuiInput]::placeholder,tui-textfield._with-label:is(:not([data-focus=true]),[data-mode~=readonly])>.t-template._empty,tui-textfield._with-label:is(:not([data-focus=true]),[data-mode~=readonly]) [tuiInput]._empty{color:transparent}tui-textfield>.t-template,tui-textfield .t-filler,tui-textfield [tuiInput]{position:absolute;inset:0 auto auto 0;inline-size:stretch;block-size:100%;-webkit-appearance:none;appearance:none;background:none;font:inherit;resize:none;outline:none;color:var(--tui-text-primary);box-sizing:border-box;border-radius:inherit;border-width:0;overscroll-behavior:none;padding-inline-start:calc(var(--t-start, 0rem) + var(--t-padding));padding-inline-end:calc(var(--t-end, 0rem) + var(--t-side, 0rem) + var(--t-padding))}tui-textfield>.t-template:is(input,textarea):read-only~.t-filler,tui-textfield .t-filler:is(input,textarea):read-only~.t-filler,tui-textfield [tuiInput]:is(input,textarea):read-only~.t-filler{display:none}tui-textfield>.t-template:disabled,tui-textfield .t-filler:disabled,tui-textfield [tuiInput]:disabled{animation:tuiPresent 1s infinite;opacity:1}tui-textfield>.t-template[inputmode=none],tui-textfield .t-filler[inputmode=none],tui-textfield [tuiInput][inputmode=none]{caret-color:transparent}tui-textfield>.t-template{display:flex;block-size:100%;align-items:center}tui-textfield._with-template [tuiInput]:first-of-type{color:transparent!important}tui-textfield [tuiInput]:-webkit-autofill [tuiLabel],tui-textfield [tuiInput][chrome-autofilled] [tuiLabel],tui-textfield [tuiInput]:not(._empty,:placeholder-shown) [tuiLabel],tui-textfield[multi][multi]:not(._empty) [tuiLabel],tui-textfield [tuiInput]:-webkit-autofill:not(tui-textfield)~[tuiLabel],tui-textfield [tuiInput][chrome-autofilled]:not(tui-textfield)~[tuiLabel],tui-textfield [tuiInput]:not(._empty,:placeholder-shown):not(tui-textfield)~[tuiLabel],tui-textfield[multi][multi]:not(._empty):not(tui-textfield)~[tuiLabel]{font:var(--t-label-font);line-height:var(--t-height);transform:translateY(var(--t-label-y))}tui-textfield [tuiLabel][tuiLabel][tuiLabel]{transition-property:all;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;position:relative;display:block;flex:1;align-self:flex-start;font-size:inherit;-webkit-user-select:none;user-select:none;line-height:var(--t-height);transition-duration:inherit}tui-textfield [tuiLabel],tui-textfield [tuiInput]::placeholder,tui-textfield [tuiInput]._empty{color:var(--tui-text-secondary)}tui-textfield select option[value=\"\"]:disabled{color:transparent}tui-textfield select optgroup,tui-textfield select option{background-color:var(--tui-background-elevation-3)}tui-textfield select optgroup,tui-textfield select option:not(:disabled){color:var(--tui-text-primary)}tui-textfield button,tui-textfield a,tui-textfield tui-icon{pointer-events:auto}tui-textfield>.t-content{z-index:1;display:flex;block-size:var(--t-height);align-items:center;gap:inherit;margin-inline-start:auto;isolation:isolate;border-radius:inherit}tui-textfield textarea~.t-content{min-inline-size:.5rem}tui-textfield:is([data-mode~=readonly],[data-state=disabled],._empty) [tuiButtonX],tui-textfield [tuiInput]._empty~.t-content [tuiButtonX],tui-textfield [tuiInput]:disabled~.t-content [tuiButtonX]{display:none}tui-textfield .t-filler{pointer-events:none!important;color:var(--tui-text-tertiary)}tui-textfield [tuiFluidTypography]{font-weight:700}tui-textfield [tuiSelectLike]:not(:read-only){cursor:pointer}tui-textfield:has(input[type=tel]){direction:ltr}tui-textfield:is([data-mode~=invalid],.tui-invalid,:invalid):not([data-mode~=readonly],[data-mode~=valid],[data-state=disabled],:disabled) [tuiInput]:not(._empty)~[tuiLabel],tui-textfield:is([data-mode~=invalid],.tui-invalid,:invalid):not([data-mode~=readonly],[data-mode~=valid],[data-state=disabled],:disabled)[multi]:not(._empty) [tuiLabel]{color:var(--tui-text-negative)}tui-textfield:not([data-mode~=readonly]):focus-visible:not([data-focus=false]) [tuiInput]::placeholder,tui-textfield:not([data-mode~=readonly]):focus-visible:not([data-focus=false]) [tuiInput]._empty{color:var(--tui-text-tertiary)}tui-textfield:not([data-mode~=readonly]):focus-visible:not([data-focus=false]) [tuiLabel]{color:var(--tui-text-primary)!important;font:var(--t-label-font);line-height:var(--t-height);transform:translateY(var(--t-label-y))}tui-textfield:not([data-mode~=readonly])[data-focus=true] [tuiInput]::placeholder,tui-textfield:not([data-mode~=readonly])[data-focus=true] [tuiInput]._empty{color:var(--tui-text-tertiary)}tui-textfield:not([data-mode~=readonly])[data-focus=true] [tuiLabel]{color:var(--tui-text-primary)!important;font:var(--t-label-font);line-height:var(--t-height);transform:translateY(var(--t-label-y))}tui-textfield[multi][multi]{flex-wrap:nowrap;overflow:scroll;align-items:stretch;cursor:text;gap:0;max-block-size:calc(var(--t-vertical) * 2 + var(--t-item-height) * var(--t-rows));overscroll-behavior:none;scroll-behavior:var(--tui-scroll-behavior)}tui-textfield[multi][multi]:before,tui-textfield[multi][multi]:after{position:sticky;inset-block-start:0;inset-inline-start:0;block-size:var(--t-height)}tui-textfield[multi][multi][tuiChevron]:after{inset-block-start:.375rem;block-size:calc(var(--t-height) - .75rem)}tui-textfield[multi][multi]>.t-scrollbar{transform:translate(calc(var(--t-padding) * var(--tui-inline)));margin-inline-start:calc(-1 * var(--t-start));margin-inline-end:calc(1px - 100% + var(--t-start))}tui-textfield[multi][multi]>.t-scrollbar .t-bar_horizontal{display:none}tui-textfield[multi][multi]>.t-items{position:sticky;display:flex;inset-inline-start:var(--t-start);min-inline-size:0;max-block-size:var(--t-height);min-block-size:fit-content;flex:1;align-items:center;flex-wrap:wrap;padding:var(--t-vertical) 0;transition-duration:inherit;box-sizing:border-box}tui-textfield[multi][multi]>.t-items:after{content:\"\";min-inline-size:1px;min-block-size:1px}tui-textfield[multi][multi]>.t-items_horizontal{clip-path:inset(0 0 0 calc(var(--t-start) / 2 - var(--t-padding) - .25rem));flex-wrap:nowrap}[dir=rtl] tui-textfield[multi][multi]>.t-items_horizontal{clip-path:inset(0 calc(var(--t-start) / 2 - var(--t-padding) - .25rem) 0 0)}tui-textfield[multi][multi]>.t-items_horizontal>.t-input{padding-inline-end:calc(var(--t-side, 0rem) + var(--t-end) + var(--t-padding))}tui-textfield[multi][multi]>.t-items:not(tui-textfield[multi][multi]>.t-items_horizontal){--t-scroll: 0}tui-textfield[multi][multi]>.t-items>label[tuiLabel]{position:absolute;inset-block-start:0;inline-size:100%}tui-textfield[multi][multi]>.t-items>.t-input{position:relative;display:flex;align-items:center;flex:1;block-size:1.25em;max-block-size:1.25rem;max-inline-size:100%;pointer-events:none;transform:translate(var(--t-scroll))}tui-textfield[multi][multi]>.t-items>.t-input .t-filler,tui-textfield[multi][multi]>.t-items>.t-input [tuiInput]{block-size:100%;padding:0;pointer-events:auto}tui-textfield[multi][multi]>.t-items>.t-input .t-ghost{visibility:hidden;white-space:pre;text-overflow:clip;padding-inline-end:.125rem;min-block-size:var(--t-item-height, 1em)}tui-textfield[multi][multi]>.t-items>.t-input .t-filler_hidden{display:none}tui-textfield[multi][multi]>.t-content{position:sticky;inset-block-start:0;inset-inline-start:calc(100% - var(--t-side, 0rem) - var(--t-end) + var(--t-padding) - var(--t-offset));margin:0;gap:.25rem}tui-textfield[multi][multi]>.t-items input:not(:focus)::placeholder,tui-textfield[multi][multi][data-mode~=readonly]>.t-items input::placeholder,tui-textfield[multi][multi][data-mode~=readonly]>.t-items label~.t-input input::placeholder{opacity:0}tui-textfield[multi][multi]._empty>.t-items input::placeholder,tui-textfield[multi][multi][data-focus=true]:not([data-mode~=readonly]):not(:focus-within)>.t-items input::placeholder{opacity:1}tui-textfield[multi][multi][data-state=disabled],tui-textfield[multi][multi][data-mode~=readonly]{pointer-events:none}tui-textfield[multi][multi][data-state=disabled] select,tui-textfield[multi][multi][data-mode~=readonly] select{display:none}tui-textfield[multi][multi][data-size=l]{--t-vertical: .625rem;--t-offset: calc(1rem - var(--t-end) / 4.5)}tui-textfield[multi][multi][data-size=l]:before{margin-inline-end:.75rem}tui-textfield[multi][multi][data-size=l]:after{inset-inline-start:calc(100% - var(--t-end) - .375rem + .25 * (1em - 1rem));margin-inline-start:-.75rem;margin-inline-end:calc(.5 * (1.5rem - 1em) - var(--t-padding))}tui-textfield[multi][multi][data-size=l]._with-label{--t-vertical: 1.125rem}tui-textfield[multi][multi][data-size=l]._with-label>.t-items{padding:1.75rem 0 .5rem}tui-textfield[multi][multi][data-size=m]{--t-vertical: .5rem;--t-offset: calc(.75rem + var(--t-end) / 14)}tui-textfield[multi][multi][data-size=m]:before{inset-inline-start:-.125rem;margin-inline-end:.375rem}tui-textfield[multi][multi][data-size=m]:after{inset-inline-start:calc(100% - var(--t-end) - .25rem);border-width:.625rem;margin-inline-start:-.125rem;margin-inline-end:calc(.5 * (1.5rem - 1em) - var(--t-padding))}tui-textfield[multi][multi][data-size=m]._with-label{--t-vertical: .875rem}tui-textfield[multi][multi][data-size=m]._with-label>.t-items{padding:1.375rem 0 .375rem}tui-textfield[multi][multi][data-size=m]>.t-content{transform:translate(.125rem)}tui-textfield[multi][multi][data-size=s]{--t-vertical: .125rem;--t-offset: calc(.625rem + var(--t-end) / 10)}tui-textfield[multi][multi][data-size=s]:before{inset-inline-start:-.125rem;margin-inline-end:.375rem}tui-textfield[multi][multi][data-size=s]:after{inset-inline-start:calc(100% - var(--t-end) - .125rem);border-width:.5rem;margin-inline-end:calc(-1 * var(--t-padding))}tui-textfield[multi][multi][data-size=s]>.t-content{gap:0;transform:translate(calc(.375rem - var(--t-end) / 10))}tui-textfield[multi][multi] tui-textfield-item{transform:translate(var(--t-scroll))}tui-textfield[multi][multi] input::placeholder{transition-property:color;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out}tui-textfield[multi][multi] select{opacity:0;pointer-events:none!important}tui-textfield[multi][multi]._empty>.t-items select~.t-filler{display:block}tui-textfield[multi][multi]._empty:not([data-focus=true])>.t-items select~.t-filler{color:var(--tui-text-secondary)}tui-textfield[multi][multi]:has([tuiSelectLike]){cursor:pointer}\n"] }]
|
|
332
332
|
}] });
|
|
333
333
|
|
|
334
334
|
const TuiTextfield = [
|
|
@@ -357,10 +357,10 @@ class TuiTextfieldContent {
|
|
|
357
357
|
ngOnDestroy() {
|
|
358
358
|
this.ref?.destroy();
|
|
359
359
|
}
|
|
360
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
361
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.
|
|
360
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TuiTextfieldContent, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
361
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.17", type: TuiTextfieldContent, isStandalone: true, selector: "ng-template[tuiTextfieldContent]", ngImport: i0 }); }
|
|
362
362
|
}
|
|
363
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
363
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TuiTextfieldContent, decorators: [{
|
|
364
364
|
type: Directive,
|
|
365
365
|
args: [{
|
|
366
366
|
selector: 'ng-template[tuiTextfieldContent]',
|
|
@@ -385,10 +385,10 @@ class TuiWithNativePicker {
|
|
|
385
385
|
constructor() {
|
|
386
386
|
tuiInjectElement().type = 'text';
|
|
387
387
|
}
|
|
388
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
389
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.
|
|
388
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TuiWithNativePicker, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
389
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.17", type: TuiWithNativePicker, isStandalone: true, ngImport: i0 }); }
|
|
390
390
|
}
|
|
391
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
391
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TuiWithNativePicker, decorators: [{
|
|
392
392
|
type: Directive
|
|
393
393
|
}], ctorParameters: () => [] });
|
|
394
394
|
|