@taiga-ui/core 4.52.0-canary.05c3268 → 4.52.0-canary.0ec45da
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/alert/alert.component.d.ts +5 -6
- package/components/alert/alert.directive.d.ts +4 -3
- package/components/alert/alert.interfaces.d.ts +2 -1
- package/components/alert/alert.service.d.ts +6 -2
- package/components/alert/alert.tokens.d.ts +1 -7
- package/components/alert/index.d.ts +0 -1
- package/components/data-list/data-list.component.d.ts +1 -1
- package/components/dialog/dialog.component.d.ts +1 -1
- package/components/dialog/dialog.directive.d.ts +4 -3
- package/components/dialog/dialog.service.d.ts +5 -2
- package/components/error/error.component.d.ts +1 -1
- package/components/index.d.ts +1 -0
- package/components/link/link.directive.d.ts +2 -2
- package/components/loader/loader.component.d.ts +7 -7
- package/components/modal/index.d.ts +2 -0
- package/components/modal/modal.component.d.ts +17 -0
- package/components/modal/modal.service.d.ts +13 -0
- package/components/notification/notification.directive.d.ts +7 -11
- package/components/root/root.component.d.ts +1 -1
- package/components/spin-button/spin-button.component.d.ts +8 -9
- package/components/textfield/textfield-multi/textfield-multi.component.d.ts +2 -2
- package/components/textfield/textfield.component.d.ts +4 -5
- package/components/textfield/textfield.directive.d.ts +10 -13
- package/components/textfield/textfield.options.d.ts +8 -11
- package/directives/appearance/appearance.directive.d.ts +1 -1
- package/directives/appearance/appearance.options.d.ts +1 -1
- package/directives/dropdown/dropdown.directive.d.ts +1 -2
- package/directives/dropdown/index.d.ts +0 -2
- package/directives/hint/hint-describe.directive.d.ts +4 -6
- package/directives/hint/hint-host.directive.d.ts +2 -2
- package/directives/hint/hint-hover.directive.d.ts +3 -4
- package/directives/hint/hint-manual.directive.d.ts +2 -2
- package/directives/hint/hint-options.directive.d.ts +1 -1
- package/directives/hint/hint-overflow.directive.d.ts +2 -2
- package/directives/hint/hint-position.directive.d.ts +4 -5
- package/directives/hint/hint-unstyled.component.d.ts +2 -7
- package/directives/hint/hint.component.d.ts +7 -6
- package/directives/hint/hint.directive.d.ts +9 -11
- package/directives/hint/index.d.ts +0 -2
- package/directives/index.d.ts +1 -0
- package/directives/notification/index.d.ts +2 -0
- package/directives/notification/notification.directive.d.ts +11 -0
- package/directives/notification/notification.service.d.ts +12 -0
- package/directives/popup/popup.directive.d.ts +6 -5
- package/directives/popup/popup.service.d.ts +1 -1
- package/directives/popup/popups.component.d.ts +2 -2
- package/fesm2022/taiga-ui-core-components-alert.mjs +57 -96
- package/fesm2022/taiga-ui-core-components-alert.mjs.map +1 -1
- package/fesm2022/taiga-ui-core-components-button.mjs.map +1 -1
- package/fesm2022/taiga-ui-core-components-calendar.mjs +7 -8
- package/fesm2022/taiga-ui-core-components-calendar.mjs.map +1 -1
- package/fesm2022/taiga-ui-core-components-cell.mjs.map +1 -1
- package/fesm2022/taiga-ui-core-components-data-list.mjs +3 -3
- package/fesm2022/taiga-ui-core-components-data-list.mjs.map +1 -1
- package/fesm2022/taiga-ui-core-components-dialog.mjs +31 -19
- package/fesm2022/taiga-ui-core-components-dialog.mjs.map +1 -1
- package/fesm2022/taiga-ui-core-components-error.mjs +2 -2
- package/fesm2022/taiga-ui-core-components-error.mjs.map +1 -1
- package/fesm2022/taiga-ui-core-components-expand.mjs.map +1 -1
- package/fesm2022/taiga-ui-core-components-header.mjs.map +1 -1
- package/fesm2022/taiga-ui-core-components-label.mjs.map +1 -1
- package/fesm2022/taiga-ui-core-components-link.mjs +5 -7
- package/fesm2022/taiga-ui-core-components-link.mjs.map +1 -1
- package/fesm2022/taiga-ui-core-components-loader.mjs +12 -25
- package/fesm2022/taiga-ui-core-components-loader.mjs.map +1 -1
- package/fesm2022/taiga-ui-core-components-modal.mjs +89 -0
- package/fesm2022/taiga-ui-core-components-modal.mjs.map +1 -0
- package/fesm2022/taiga-ui-core-components-notification.mjs +12 -27
- package/fesm2022/taiga-ui-core-components-notification.mjs.map +1 -1
- package/fesm2022/taiga-ui-core-components-root.mjs +3 -13
- package/fesm2022/taiga-ui-core-components-root.mjs.map +1 -1
- package/fesm2022/taiga-ui-core-components-scrollbar.mjs.map +1 -1
- package/fesm2022/taiga-ui-core-components-spin-button.mjs +14 -27
- package/fesm2022/taiga-ui-core-components-spin-button.mjs.map +1 -1
- package/fesm2022/taiga-ui-core-components-textfield.mjs +51 -94
- package/fesm2022/taiga-ui-core-components-textfield.mjs.map +1 -1
- package/fesm2022/taiga-ui-core-components.mjs +1 -0
- package/fesm2022/taiga-ui-core-components.mjs.map +1 -1
- package/fesm2022/taiga-ui-core-directives-appearance.mjs.map +1 -1
- package/fesm2022/taiga-ui-core-directives-dropdown.mjs +4 -34
- package/fesm2022/taiga-ui-core-directives-dropdown.mjs.map +1 -1
- package/fesm2022/taiga-ui-core-directives-group.mjs.map +1 -1
- package/fesm2022/taiga-ui-core-directives-hint.mjs +94 -182
- package/fesm2022/taiga-ui-core-directives-hint.mjs.map +1 -1
- package/fesm2022/taiga-ui-core-directives-icons.mjs.map +1 -1
- package/fesm2022/taiga-ui-core-directives-items-handlers.mjs +2 -2
- package/fesm2022/taiga-ui-core-directives-items-handlers.mjs.map +1 -1
- package/fesm2022/taiga-ui-core-directives-notification.mjs +73 -0
- package/fesm2022/taiga-ui-core-directives-notification.mjs.map +1 -0
- package/fesm2022/taiga-ui-core-directives-popup.mjs +13 -20
- package/fesm2022/taiga-ui-core-directives-popup.mjs.map +1 -1
- package/fesm2022/taiga-ui-core-directives-title.mjs.map +1 -1
- 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-month.mjs +2 -1
- package/fesm2022/taiga-ui-core-pipes-month.mjs.map +1 -1
- package/fesm2022/taiga-ui-core-utils-miscellaneous.mjs +1 -1
- package/fesm2022/taiga-ui-core-utils-miscellaneous.mjs.map +1 -1
- package/package.json +9 -1
- package/tokens/i18n.d.ts +7 -7
- package/types/index.d.ts +0 -1
- package/components/alert/alerts.component.d.ts +0 -12
- package/directives/dropdown/dropdown.service.d.ts +0 -6
- package/directives/dropdown/dropdowns.component.d.ts +0 -9
- package/directives/hint/hint.service.d.ts +0 -13
- package/directives/hint/hints.component.d.ts +0 -12
- package/types/portal-item.d.ts +0 -9
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { inject, Directive, InjectionToken, signal, Optional, SkipSelf,
|
|
2
|
+
import { inject, Directive, InjectionToken, signal, Optional, SkipSelf, input, computed, ViewContainerRef, ElementRef, forwardRef, ContentChild, ViewChild, 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';
|
|
@@ -73,11 +73,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
|
|
|
73
73
|
}]
|
|
74
74
|
}] });
|
|
75
75
|
|
|
76
|
-
const DEFAULT = {
|
|
77
|
-
appearance: 'textfield',
|
|
78
|
-
size: 'l',
|
|
79
|
-
cleaner: true,
|
|
80
|
-
};
|
|
76
|
+
const DEFAULT = { appearance: 'textfield', size: 'l', cleaner: true };
|
|
81
77
|
const TUI_TEXTFIELD_OPTIONS = new InjectionToken(ngDevMode ? 'TUI_TEXTFIELD_OPTIONS' : '', {
|
|
82
78
|
factory: () => ({
|
|
83
79
|
appearance: signal(DEFAULT.appearance),
|
|
@@ -100,22 +96,19 @@ function tuiTextfieldOptionsProvider(options) {
|
|
|
100
96
|
class TuiTextfieldOptionsDirective {
|
|
101
97
|
constructor() {
|
|
102
98
|
this.options = inject(TUI_TEXTFIELD_OPTIONS, { skipSelf: true });
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
this.
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
}
|
|
114
|
-
set tuiTextfieldCleaner(enabled) {
|
|
115
|
-
this.cleaner.set(enabled);
|
|
99
|
+
this.appearance = input(this.options.appearance(), {
|
|
100
|
+
alias: 'tuiTextfieldAppearance',
|
|
101
|
+
});
|
|
102
|
+
this.size = input(this.options.size(), {
|
|
103
|
+
alias: 'tuiTextfieldSize',
|
|
104
|
+
transform: (size) => size || DEFAULT.size,
|
|
105
|
+
});
|
|
106
|
+
this.cleaner = input(this.options.cleaner(), {
|
|
107
|
+
alias: 'tuiTextfieldCleaner',
|
|
108
|
+
});
|
|
116
109
|
}
|
|
117
110
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiTextfieldOptionsDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
118
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "
|
|
111
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.15", 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 }); }
|
|
119
112
|
}
|
|
120
113
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiTextfieldOptionsDirective, decorators: [{
|
|
121
114
|
type: Directive,
|
|
@@ -124,13 +117,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
|
|
|
124
117
|
selector: '[tuiTextfieldAppearance],[tuiTextfieldSize],[tuiTextfieldCleaner]',
|
|
125
118
|
providers: [tuiProvide(TUI_TEXTFIELD_OPTIONS, TuiTextfieldOptionsDirective)],
|
|
126
119
|
}]
|
|
127
|
-
}]
|
|
128
|
-
type: Input
|
|
129
|
-
}], tuiTextfieldSize: [{
|
|
130
|
-
type: Input
|
|
131
|
-
}], tuiTextfieldCleaner: [{
|
|
132
|
-
type: Input
|
|
133
|
-
}] } });
|
|
120
|
+
}] });
|
|
134
121
|
|
|
135
122
|
const TUI_TEXTFIELD_ACCESSOR = new InjectionToken(ngDevMode ? 'TUI_TEXTFIELD_ACCESSOR' : '');
|
|
136
123
|
function tuiAsTextfieldAccessor(accessor) {
|
|
@@ -140,41 +127,31 @@ function tuiAsTextfieldAccessor(accessor) {
|
|
|
140
127
|
// TODO: Drop in v5 after updated Angular and hostDirectives inherit
|
|
141
128
|
class TuiTextfieldBase {
|
|
142
129
|
constructor() {
|
|
143
|
-
// TODO: refactor to signal inputs after Angular update
|
|
144
|
-
this.focused = signal(null);
|
|
145
130
|
this.control = inject(NgControl, { optional: true });
|
|
146
131
|
this.a = tuiAppearance(inject(TUI_TEXTFIELD_OPTIONS).appearance, {});
|
|
147
|
-
this.s = tuiAppearanceState(
|
|
148
|
-
this.m = tuiAppearanceMode(this.mode, {});
|
|
132
|
+
this.s = tuiAppearanceState(computed(() => this.state()), {});
|
|
133
|
+
this.m = tuiAppearanceMode(computed(() => this.mode()), {});
|
|
149
134
|
this.f = tuiAppearanceFocus(computed(() => this.focused() ?? this.textfield.focused()), {});
|
|
150
135
|
this.el = tuiInjectElement();
|
|
151
136
|
this.handlers = inject(TUI_ITEMS_HANDLERS);
|
|
152
137
|
this.textfield = inject(TuiTextfieldComponent);
|
|
153
|
-
this.readOnly = false;
|
|
154
|
-
this.invalid = null;
|
|
138
|
+
this.readOnly = input(false);
|
|
139
|
+
this.invalid = input(null);
|
|
155
140
|
this.value = tuiValue(this.el);
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
this.
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
return
|
|
169
|
-
}
|
|
170
|
-
if (this.invalid) {
|
|
171
|
-
return 'invalid';
|
|
172
|
-
}
|
|
173
|
-
return null;
|
|
174
|
-
}
|
|
175
|
-
// TODO: refactor to signal inputs after Angular update
|
|
176
|
-
ngOnChanges() {
|
|
177
|
-
this.m.set(this.mode);
|
|
141
|
+
this.focused = input(null);
|
|
142
|
+
this.state = input(null);
|
|
143
|
+
this.mode = computed(() => {
|
|
144
|
+
if (this.readOnly()) {
|
|
145
|
+
return 'readonly';
|
|
146
|
+
}
|
|
147
|
+
if (this.invalid() === false) {
|
|
148
|
+
return 'valid';
|
|
149
|
+
}
|
|
150
|
+
if (this.invalid()) {
|
|
151
|
+
return 'invalid';
|
|
152
|
+
}
|
|
153
|
+
return null;
|
|
154
|
+
});
|
|
178
155
|
}
|
|
179
156
|
setValue(value) {
|
|
180
157
|
this.el.focus();
|
|
@@ -190,7 +167,7 @@ class TuiTextfieldBase {
|
|
|
190
167
|
}
|
|
191
168
|
}
|
|
192
169
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiTextfieldBase, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
193
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "
|
|
170
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.15", type: TuiTextfieldBase, isStandalone: true, inputs: { readOnly: { classPropertyName: "readOnly", publicName: "readOnly", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, focused: { classPropertyName: "focused", publicName: "focused", isSignal: true, isRequired: false, transformFunction: null }, state: { classPropertyName: "state", publicName: "state", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "tuiTextfield": "" }, listeners: { "input": "0", "focusin": "0", "focusout": "0" }, properties: { "id": "textfield.id", "readOnly": "readOnly()", "class._empty": "value() === \"\"" } }, providers: [tuiAsTextfieldAccessor(TuiTextfieldBase)], ngImport: i0 }); }
|
|
194
171
|
}
|
|
195
172
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiTextfieldBase, decorators: [{
|
|
196
173
|
type: Directive,
|
|
@@ -200,24 +177,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
|
|
|
200
177
|
host: {
|
|
201
178
|
tuiTextfield: '',
|
|
202
179
|
'[id]': 'textfield.id',
|
|
203
|
-
'[readOnly]': 'readOnly',
|
|
180
|
+
'[readOnly]': 'readOnly()',
|
|
204
181
|
'[class._empty]': 'value() === ""',
|
|
205
182
|
'(input)': '0',
|
|
206
183
|
'(focusin)': '0',
|
|
207
184
|
'(focusout)': '0',
|
|
208
185
|
},
|
|
209
186
|
}]
|
|
210
|
-
}]
|
|
211
|
-
type: Input
|
|
212
|
-
}], invalid: [{
|
|
213
|
-
type: Input
|
|
214
|
-
}], focusedSetter: [{
|
|
215
|
-
type: Input,
|
|
216
|
-
args: ['focused']
|
|
217
|
-
}], stateSetter: [{
|
|
218
|
-
type: Input,
|
|
219
|
-
args: ['state']
|
|
220
|
-
}] } });
|
|
187
|
+
}] });
|
|
221
188
|
class TuiTextfieldDirective extends TuiTextfieldBase {
|
|
222
189
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiTextfieldDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
|
|
223
190
|
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.15", type: TuiTextfieldDirective, isStandalone: true, selector: "input[tuiTextfield]", providers: [
|
|
@@ -257,8 +224,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
|
|
|
257
224
|
// TODO: Remove base class in v5
|
|
258
225
|
class TuiTextfieldBaseComponent {
|
|
259
226
|
constructor() {
|
|
260
|
-
// TODO: refactor to signal inputs after Angular update
|
|
261
|
-
this.filler = signal('');
|
|
262
227
|
this.autoId = tuiInjectId();
|
|
263
228
|
this.focusedIn = tuiFocusedIn(tuiInjectElement());
|
|
264
229
|
this.contentReady$ = new ReplaySubject(1);
|
|
@@ -268,7 +233,7 @@ class TuiTextfieldBaseComponent {
|
|
|
268
233
|
this.dropdown = inject(TuiDropdownDirective);
|
|
269
234
|
this.dropdownOpen = inject(TuiDropdownOpen);
|
|
270
235
|
this.icons = inject(TUI_COMMON_ICONS);
|
|
271
|
-
this.clear =
|
|
236
|
+
this.clear = inject(TUI_CLEAR_WORD);
|
|
272
237
|
this.computedFiller = computed((value = this.value()) => {
|
|
273
238
|
const filler = value + this.filler().slice(value.length);
|
|
274
239
|
return filler.length > value.length ? filler : '';
|
|
@@ -276,15 +241,14 @@ class TuiTextfieldBaseComponent {
|
|
|
276
241
|
this.showFiller = computed(() => this.focused() &&
|
|
277
242
|
!!this.computedFiller() &&
|
|
278
243
|
(!!this.value() || !this.input?.nativeElement.placeholder));
|
|
244
|
+
this.content = input();
|
|
279
245
|
this.focused = computed(() => this.open() || this.focusedIn());
|
|
280
246
|
this.options = inject(TUI_TEXTFIELD_OPTIONS);
|
|
281
247
|
this.el = tuiInjectElement();
|
|
282
248
|
this.value = tuiValue(this.inputQuery);
|
|
283
249
|
// TODO: Refactor to signal queries when Angular is updated
|
|
284
250
|
this.auxiliaries = toSignal(this.contentReady$.pipe(take(1), switchMap(() => tuiQueryListChanges(this.auxiliaryQuery)), startWith([])), { requireSync: true });
|
|
285
|
-
|
|
286
|
-
set fillerSetter(filler) {
|
|
287
|
-
this.filler.set(filler);
|
|
251
|
+
this.filler = input('');
|
|
288
252
|
}
|
|
289
253
|
get id() {
|
|
290
254
|
return this.input?.nativeElement.id || this.autoId;
|
|
@@ -329,7 +293,7 @@ class TuiTextfieldBaseComponent {
|
|
|
329
293
|
}
|
|
330
294
|
}
|
|
331
295
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiTextfieldBaseComponent, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
332
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "
|
|
296
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.15", type: TuiTextfieldBaseComponent, isStandalone: true, inputs: { content: { classPropertyName: "content", publicName: "content", isSignal: true, isRequired: false, transformFunction: null }, filler: { classPropertyName: "filler", publicName: "filler", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "label", first: true, predicate: i0.forwardRef(() => TuiLabel), descendants: true, read: ElementRef }, { propertyName: "_input", first: true, predicate: i0.forwardRef(() => TuiTextfieldBase), descendants: true, read: ElementRef }, { propertyName: "accessor", first: true, predicate: TUI_TEXTFIELD_ACCESSOR, descendants: true }, { propertyName: "control", first: true, predicate: NgControl, descendants: true }, { propertyName: "cva", first: true, predicate: TuiControl, descendants: true }, { propertyName: "input", first: true, predicate: i0.forwardRef(() => TuiTextfieldBase), descendants: true, read: ElementRef, static: true }, { propertyName: "auxiliaryQuery", predicate: TUI_AUXILIARY, descendants: true }], viewQueries: [{ propertyName: "ghost", first: true, predicate: ["ghost"], descendants: true }, { propertyName: "vcr", first: true, predicate: ["vcr"], descendants: true, read: ViewContainerRef, static: true }], ngImport: i0 }); }
|
|
333
297
|
}
|
|
334
298
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiTextfieldBaseComponent, decorators: [{
|
|
335
299
|
type: Directive
|
|
@@ -363,18 +327,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
|
|
|
363
327
|
read: ElementRef,
|
|
364
328
|
static: true,
|
|
365
329
|
}]
|
|
366
|
-
}], content: [{
|
|
367
|
-
type: Input
|
|
368
|
-
}], fillerSetter: [{
|
|
369
|
-
type: Input,
|
|
370
|
-
args: ['filler']
|
|
371
330
|
}] } });
|
|
372
331
|
class TuiTextfieldComponent extends TuiTextfieldBaseComponent {
|
|
373
332
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiTextfieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
374
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: TuiTextfieldComponent, isStandalone: true, selector: "tui-textfield:not([multi])", host: { listeners: { "click.self.prevent": "0", "pointerdown.self.prevent": "onIconClick()", "scroll.capture.zoneless": "onScroll($event.target)", "tuiActiveZoneChange": "!$event && cva?.onTouched()" }, properties: { "attr.data-size": "options.size()", "class._with-label": "hasLabel", "class._with-template": "content && control?.value != null", "class._disabled": "input?.nativeElement?.disabled" } }, providers: [
|
|
333
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: TuiTextfieldComponent, isStandalone: true, selector: "tui-textfield:not([multi])", host: { listeners: { "click.self.prevent": "0", "pointerdown.self.prevent": "onIconClick()", "scroll.capture.zoneless": "onScroll($event.target)", "tuiActiveZoneChange": "!$event && cva?.onTouched()" }, properties: { "attr.data-size": "options.size()", "class._with-label": "hasLabel", "class._with-template": "content() && control?.value != null", "class._disabled": "input?.nativeElement?.disabled" } }, providers: [
|
|
375
334
|
tuiButtonOptionsProvider({ size: 'xs', appearance: 'icon' }),
|
|
376
335
|
tuiAsDataListHost(TuiTextfieldComponent),
|
|
377
|
-
], usesInheritance: true, hostDirectives: [{ directive: i1$1.TuiDropdownDirective }, { directive: i1$1.TuiDropdownFixed }, { directive: i2$1.TuiTransitioned }, { directive: i1$1.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.prevent)=\"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: -.7em;--t-label-size: .83em;--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);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-size:var(--t-label-size);transform:translateY(var(--t-label))}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-size:var(--t-label-size);transform:translateY(var(--t-label))}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-size:var(--t-label-size);transform:translateY(var(--t-label))}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-size:var(--t-label-size);transform:translateY(var(--t-label))}@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 }); }
|
|
336
|
+
], usesInheritance: true, hostDirectives: [{ directive: i1$1.TuiDropdownDirective }, { directive: i1$1.TuiDropdownFixed }, { directive: i2$1.TuiTransitioned }, { directive: i1$1.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 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: -.7em;--t-label-size: .83em;--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);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-size:var(--t-label-size);transform:translateY(var(--t-label))}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-size:var(--t-label-size);transform:translateY(var(--t-label))}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-size:var(--t-label-size);transform:translateY(var(--t-label))}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-size:var(--t-label-size);transform:translateY(var(--t-label))}@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 }); }
|
|
378
337
|
}
|
|
379
338
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiTextfieldComponent, decorators: [{
|
|
380
339
|
type: Component,
|
|
@@ -392,13 +351,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
|
|
|
392
351
|
], host: {
|
|
393
352
|
'[attr.data-size]': 'options.size()',
|
|
394
353
|
'[class._with-label]': 'hasLabel',
|
|
395
|
-
'[class._with-template]': 'content && control?.value != null',
|
|
354
|
+
'[class._with-template]': 'content() && control?.value != null',
|
|
396
355
|
'[class._disabled]': 'input?.nativeElement?.disabled',
|
|
397
356
|
'(click.self.prevent)': '0',
|
|
398
357
|
'(pointerdown.self.prevent)': 'onIconClick()',
|
|
399
358
|
'(scroll.capture.zoneless)': 'onScroll($event.target)',
|
|
400
359
|
'(tuiActiveZoneChange)': '!$event && cva?.onTouched()',
|
|
401
|
-
}, 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.prevent)=\"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: -.7em;--t-label-size: .83em;--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);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-size:var(--t-label-size);transform:translateY(var(--t-label))}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-size:var(--t-label-size);transform:translateY(var(--t-label))}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-size:var(--t-label-size);transform:translateY(var(--t-label))}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-size:var(--t-label-size);transform:translateY(var(--t-label))}@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"] }]
|
|
360
|
+
}, 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: -.7em;--t-label-size: .83em;--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);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-size:var(--t-label-size);transform:translateY(var(--t-label))}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-size:var(--t-label-size);transform:translateY(var(--t-label))}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-size:var(--t-label-size);transform:translateY(var(--t-label))}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-size:var(--t-label-size);transform:translateY(var(--t-label))}@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"] }]
|
|
402
361
|
}] });
|
|
403
362
|
|
|
404
363
|
/*
|
|
@@ -435,11 +394,11 @@ class TuiTextfieldMultiComponent extends TuiTextfieldBaseComponent {
|
|
|
435
394
|
this.handlers = inject(TUI_ITEMS_HANDLERS$1);
|
|
436
395
|
this.component = new PolymorpheusComponent(TuiTextfieldItemComponent);
|
|
437
396
|
this.sub = fromEvent(this.el, 'scroll')
|
|
438
|
-
.pipe(filter(() => this.rows === 1), tuiZonefree(), takeUntilDestroyed())
|
|
397
|
+
.pipe(filter(() => this.rows() === 1), tuiZonefree(), takeUntilDestroyed())
|
|
439
398
|
.subscribe(() => {
|
|
440
399
|
this.el.style.setProperty('--t-scroll', tuiPx(-1 * this.el.scrollLeft));
|
|
441
400
|
});
|
|
442
|
-
this.rows = 100;
|
|
401
|
+
this.rows = input(100);
|
|
443
402
|
}
|
|
444
403
|
handleOption(option) {
|
|
445
404
|
this.accessor?.setValue(tuiArrayToggle(this.control?.value ?? [], option, this.handlers.identityMatcher()));
|
|
@@ -453,7 +412,7 @@ class TuiTextfieldMultiComponent extends TuiTextfieldBaseComponent {
|
|
|
453
412
|
return this.focused() ? longer : '';
|
|
454
413
|
}
|
|
455
414
|
onItems({ target }) {
|
|
456
|
-
const height = this.rows > 1 && this.control?.value?.length
|
|
415
|
+
const height = this.rows() > 1 && this.control?.value?.length
|
|
457
416
|
? (target.querySelector('tui-textfield-item')?.clientHeight ?? 0)
|
|
458
417
|
: null;
|
|
459
418
|
if (height !== 0) {
|
|
@@ -484,12 +443,12 @@ class TuiTextfieldMultiComponent extends TuiTextfieldBaseComponent {
|
|
|
484
443
|
}
|
|
485
444
|
}
|
|
486
445
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiTextfieldMultiComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
487
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: TuiTextfieldMultiComponent, isStandalone: true, selector: "tui-textfield[multi]", inputs: { rows: "rows" }, host: { listeners: { "click.prevent": "onClick($event.target)", "tuiActiveZoneChange": "!$event && (el.scrollTo({left: 0}) || cva?.onTouched())", "pointerdown.self.prevent": "onIconClick()", "scroll.capture.zoneless": "onScroll($event.target)" }, properties: { "attr.data-state": "control?.disabled ? \"disabled\" : null", "class._empty": "!control?.value?.length", "style.--t-item-height.px": "height()", "style.--t-rows": "rows", "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: [
|
|
446
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", 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}) || cva?.onTouched())", "pointerdown.self.prevent": "onIconClick()", "scroll.capture.zoneless": "onScroll($event.target)" }, properties: { "attr.data-state": "control?.disabled ? \"disabled\" : null", "class._empty": "!control?.value?.length", "style.--t-item-height.px": "height()", "style.--t-rows": "rows()", "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: [
|
|
488
447
|
tuiButtonOptionsProvider({ size: 'xs', appearance: 'icon' }),
|
|
489
448
|
tuiAsDataListHost(TuiTextfieldMultiComponent),
|
|
490
449
|
tuiProvide(TuiTextfieldComponent, TuiTextfieldMultiComponent),
|
|
491
450
|
tuiProvide(TUI_SCROLL_REF, ElementRef),
|
|
492
|
-
], queries: [{ propertyName: "item", first: true, predicate: TuiItem, descendants: true, read: TemplateRef }], usesInheritance: true, hostDirectives: [{ directive: i1$1.TuiDropdownFixed }, { directive: i1$1.TuiDropdownDirective }, { directive: i1$1.TuiWithDropdownOpen }, { directive: i3.TuiWithIcons }, { directive: i3$1.TuiWithItemsHandlers }, { directive: i5.TuiWithOptionContent }, { directive: i3$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; let index = $index) {\n <ng-template\n [polymorpheusOutlet]=\"component\"\n [polymorpheusOutletContext]=\"{$implicit: {item, 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: -.7em;--t-label-size: .83em;--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);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-size:var(--t-label-size);transform:translateY(var(--t-label))}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-size:var(--t-label-size);transform:translateY(var(--t-label))}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-size:var(--t-label-size);transform:translateY(var(--t-label))}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-size:var(--t-label-size);transform:translateY(var(--t-label))}@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-size:var(--t-label-size);transform:translateY(var(--t-label))}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 }); }
|
|
451
|
+
], queries: [{ propertyName: "item", first: true, predicate: TuiItem, descendants: true, read: TemplateRef }], usesInheritance: true, hostDirectives: [{ directive: i1$1.TuiDropdownFixed }, { directive: i1$1.TuiDropdownDirective }, { directive: i1$1.TuiWithDropdownOpen }, { directive: i3.TuiWithIcons }, { directive: i3$1.TuiWithItemsHandlers }, { directive: i5.TuiWithOptionContent }, { directive: i3$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: -.7em;--t-label-size: .83em;--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);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-size:var(--t-label-size);transform:translateY(var(--t-label))}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-size:var(--t-label-size);transform:translateY(var(--t-label))}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-size:var(--t-label-size);transform:translateY(var(--t-label))}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-size:var(--t-label-size);transform:translateY(var(--t-label))}@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-size:var(--t-label-size);transform:translateY(var(--t-label))}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 }); }
|
|
493
452
|
}
|
|
494
453
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiTextfieldMultiComponent, decorators: [{
|
|
495
454
|
type: Component,
|
|
@@ -517,22 +476,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
|
|
|
517
476
|
'[attr.data-state]': 'control?.disabled ? "disabled" : null',
|
|
518
477
|
'[class._empty]': '!control?.value?.length',
|
|
519
478
|
'[style.--t-item-height.px]': 'height()',
|
|
520
|
-
'[style.--t-rows]': 'rows',
|
|
479
|
+
'[style.--t-rows]': 'rows()',
|
|
521
480
|
'(click.prevent)': 'onClick($event.target)',
|
|
522
481
|
'(tuiActiveZoneChange)': '!$event && (el.scrollTo({left: 0}) || cva?.onTouched())',
|
|
523
482
|
// TODO: Remove in v5
|
|
524
483
|
'[attr.data-size]': 'options.size()',
|
|
525
484
|
'[class._with-label]': 'hasLabel',
|
|
526
|
-
'[class._with-template]': 'content && control?.value != null',
|
|
485
|
+
'[class._with-template]': 'content() && control?.value != null',
|
|
527
486
|
'[class._disabled]': 'input?.nativeElement?.disabled',
|
|
528
487
|
'(pointerdown.self.prevent)': 'onIconClick()',
|
|
529
488
|
'(scroll.capture.zoneless)': 'onScroll($event.target)',
|
|
530
|
-
}, 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; let index = $index) {\n <ng-template\n [polymorpheusOutlet]=\"component\"\n [polymorpheusOutletContext]=\"{$implicit: {item, 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: -.7em;--t-label-size: .83em;--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);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-size:var(--t-label-size);transform:translateY(var(--t-label))}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-size:var(--t-label-size);transform:translateY(var(--t-label))}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-size:var(--t-label-size);transform:translateY(var(--t-label))}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-size:var(--t-label-size);transform:translateY(var(--t-label))}@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-size:var(--t-label-size);transform:translateY(var(--t-label))}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"] }]
|
|
489
|
+
}, 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: -.7em;--t-label-size: .83em;--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);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-size:var(--t-label-size);transform:translateY(var(--t-label))}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-size:var(--t-label-size);transform:translateY(var(--t-label))}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-size:var(--t-label-size);transform:translateY(var(--t-label))}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-size:var(--t-label-size);transform:translateY(var(--t-label))}@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-size:var(--t-label-size);transform:translateY(var(--t-label))}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"] }]
|
|
531
490
|
}], propDecorators: { item: [{
|
|
532
491
|
type: ContentChild,
|
|
533
492
|
args: [TuiItem, { read: TemplateRef, descendants: true }]
|
|
534
|
-
}], rows: [{
|
|
535
|
-
type: Input
|
|
536
493
|
}] } });
|
|
537
494
|
|
|
538
495
|
const TuiTextfield = [
|