@taiga-ui/core 4.52.0-canary.6043e8f → 4.52.0-canary.61fea47

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.
Files changed (289) hide show
  1. package/README.md +1 -1
  2. package/classes/accessors.d.ts +1 -1
  3. package/components/button/button.directive.d.ts +2 -2
  4. package/components/calendar/calendar-sheet.options.d.ts +1 -3
  5. package/{pipes/calendar-sheet → components/calendar}/calendar-sheet.pipe.d.ts +1 -1
  6. package/components/calendar/calendar-spin.component.d.ts +1 -0
  7. package/components/calendar/calendar-year.component.d.ts +1 -1
  8. package/components/calendar/index.d.ts +2 -0
  9. package/components/cell/cell.directive.d.ts +9 -0
  10. package/components/cell/cell.options.d.ts +6 -0
  11. package/components/cell/index.d.ts +2 -0
  12. package/components/data-list/data-list.component.d.ts +8 -12
  13. package/components/data-list/data-list.d.ts +2 -4
  14. package/components/data-list/data-list.tokens.d.ts +1 -5
  15. package/components/data-list/index.d.ts +0 -2
  16. package/components/data-list/opt-group.directive.d.ts +2 -2
  17. package/components/data-list/option/option-content.d.ts +6 -8
  18. package/components/data-list/option/option.directive.d.ts +7 -8
  19. package/components/error/error.component.d.ts +1 -1
  20. package/components/expand/expand.component.d.ts +9 -28
  21. package/components/expand/index.d.ts +0 -2
  22. package/components/index.d.ts +2 -3
  23. package/components/link/link.directive.d.ts +2 -2
  24. package/components/link/link.options.d.ts +1 -3
  25. package/components/loader/loader.component.d.ts +7 -7
  26. package/components/loader/loader.options.d.ts +1 -3
  27. package/components/notification/index.d.ts +3 -0
  28. package/components/notification/notification.component.d.ts +14 -0
  29. package/components/notification/notification.d.ts +3 -0
  30. package/components/notification/notification.directive.d.ts +7 -12
  31. package/components/notification/notification.options.d.ts +10 -7
  32. package/components/notification/notification.service.d.ts +17 -0
  33. package/components/root/root.component.d.ts +2 -3
  34. package/components/scrollbar/scroll-into-view.directive.d.ts +3 -2
  35. package/components/scrollbar/scrollbar.component.d.ts +2 -2
  36. package/components/scrollbar/scrollbar.directive.d.ts +2 -2
  37. package/components/spin-button/spin-button.component.d.ts +8 -9
  38. package/components/textfield/index.d.ts +1 -3
  39. package/components/textfield/textfield-multi/textfield-item.component.d.ts +3 -2
  40. package/components/textfield/textfield-multi/textfield-multi.component.d.ts +9 -14
  41. package/components/textfield/textfield.component.d.ts +23 -37
  42. package/components/textfield/textfield.d.ts +2 -3
  43. package/components/textfield/textfield.directive.d.ts +13 -20
  44. package/components/textfield/textfield.options.d.ts +8 -11
  45. package/{directives → components}/title/title.directive.d.ts +2 -3
  46. package/directives/appearance/appearance.directive.d.ts +1 -1
  47. package/directives/appearance/appearance.options.d.ts +1 -1
  48. package/directives/date-format/date-format.directive.d.ts +3 -7
  49. package/directives/group/group.directive.d.ts +7 -7
  50. package/directives/group/group.options.d.ts +1 -3
  51. package/directives/index.d.ts +0 -5
  52. package/directives/number-format/number-format.directive.d.ts +3 -7
  53. package/fesm2022/taiga-ui-core-classes.mjs +6 -8
  54. package/fesm2022/taiga-ui-core-classes.mjs.map +1 -1
  55. package/fesm2022/taiga-ui-core-components-button.mjs +11 -18
  56. package/fesm2022/taiga-ui-core-components-button.mjs.map +1 -1
  57. package/fesm2022/taiga-ui-core-components-calendar.mjs +124 -26
  58. package/fesm2022/taiga-ui-core-components-calendar.mjs.map +1 -1
  59. package/fesm2022/taiga-ui-core-components-cell.mjs +45 -0
  60. package/fesm2022/taiga-ui-core-components-cell.mjs.map +1 -0
  61. package/fesm2022/taiga-ui-core-components-data-list.mjs +46 -206
  62. package/fesm2022/taiga-ui-core-components-data-list.mjs.map +1 -1
  63. package/fesm2022/taiga-ui-core-components-error.mjs +4 -3
  64. package/fesm2022/taiga-ui-core-components-error.mjs.map +1 -1
  65. package/fesm2022/taiga-ui-core-components-expand.mjs +33 -131
  66. package/fesm2022/taiga-ui-core-components-expand.mjs.map +1 -1
  67. package/fesm2022/taiga-ui-core-components-icon.mjs +1 -2
  68. package/fesm2022/taiga-ui-core-components-icon.mjs.map +1 -1
  69. package/fesm2022/taiga-ui-core-components-label.mjs +6 -9
  70. package/fesm2022/taiga-ui-core-components-label.mjs.map +1 -1
  71. package/fesm2022/taiga-ui-core-components-link.mjs +14 -23
  72. package/fesm2022/taiga-ui-core-components-link.mjs.map +1 -1
  73. package/fesm2022/taiga-ui-core-components-loader.mjs +14 -32
  74. package/fesm2022/taiga-ui-core-components-loader.mjs.map +1 -1
  75. package/fesm2022/taiga-ui-core-components-notification.mjs +108 -66
  76. package/fesm2022/taiga-ui-core-components-notification.mjs.map +1 -1
  77. package/fesm2022/taiga-ui-core-components-root.mjs +6 -20
  78. package/fesm2022/taiga-ui-core-components-root.mjs.map +1 -1
  79. package/fesm2022/taiga-ui-core-components-scrollbar.mjs +36 -45
  80. package/fesm2022/taiga-ui-core-components-scrollbar.mjs.map +1 -1
  81. package/fesm2022/taiga-ui-core-components-spin-button.mjs +14 -27
  82. package/fesm2022/taiga-ui-core-components-spin-button.mjs.map +1 -1
  83. package/fesm2022/taiga-ui-core-components-textfield.mjs +171 -388
  84. package/fesm2022/taiga-ui-core-components-textfield.mjs.map +1 -1
  85. package/fesm2022/taiga-ui-core-components-title.mjs +37 -0
  86. package/fesm2022/taiga-ui-core-components-title.mjs.map +1 -0
  87. package/fesm2022/taiga-ui-core-components.mjs +2 -3
  88. package/fesm2022/taiga-ui-core-components.mjs.map +1 -1
  89. package/fesm2022/taiga-ui-core-directives-appearance.mjs +12 -15
  90. package/fesm2022/taiga-ui-core-directives-appearance.mjs.map +1 -1
  91. package/fesm2022/taiga-ui-core-directives-date-format.mjs +24 -18
  92. package/fesm2022/taiga-ui-core-directives-date-format.mjs.map +1 -1
  93. package/fesm2022/taiga-ui-core-directives-group.mjs +23 -38
  94. package/fesm2022/taiga-ui-core-directives-group.mjs.map +1 -1
  95. package/fesm2022/taiga-ui-core-directives-icons.mjs +8 -11
  96. package/fesm2022/taiga-ui-core-directives-icons.mjs.map +1 -1
  97. package/fesm2022/taiga-ui-core-directives-items-handlers.mjs +3 -6
  98. package/fesm2022/taiga-ui-core-directives-items-handlers.mjs.map +1 -1
  99. package/fesm2022/taiga-ui-core-directives-number-format.mjs +30 -18
  100. package/fesm2022/taiga-ui-core-directives-number-format.mjs.map +1 -1
  101. package/fesm2022/taiga-ui-core-directives.mjs +0 -5
  102. package/fesm2022/taiga-ui-core-directives.mjs.map +1 -1
  103. package/fesm2022/taiga-ui-core-pipes-format-number.mjs +19 -13
  104. package/fesm2022/taiga-ui-core-pipes-format-number.mjs.map +1 -1
  105. package/fesm2022/taiga-ui-core-pipes.mjs +0 -7
  106. package/fesm2022/taiga-ui-core-pipes.mjs.map +1 -1
  107. package/fesm2022/taiga-ui-core-portals-alert.mjs +73 -0
  108. package/fesm2022/taiga-ui-core-portals-alert.mjs.map +1 -0
  109. package/fesm2022/taiga-ui-core-portals-dialog.mjs +158 -0
  110. package/fesm2022/taiga-ui-core-portals-dialog.mjs.map +1 -0
  111. package/fesm2022/{taiga-ui-core-directives-dropdown.mjs → taiga-ui-core-portals-dropdown.mjs} +135 -287
  112. package/fesm2022/taiga-ui-core-portals-dropdown.mjs.map +1 -0
  113. package/fesm2022/{taiga-ui-core-directives-hint.mjs → taiga-ui-core-portals-hint.mjs} +118 -218
  114. package/fesm2022/taiga-ui-core-portals-hint.mjs.map +1 -0
  115. package/fesm2022/taiga-ui-core-portals-modal.mjs +89 -0
  116. package/fesm2022/taiga-ui-core-portals-modal.mjs.map +1 -0
  117. package/fesm2022/taiga-ui-core-portals-popup.mjs +56 -0
  118. package/fesm2022/taiga-ui-core-portals-popup.mjs.map +1 -0
  119. package/fesm2022/taiga-ui-core-portals.mjs +11 -0
  120. package/fesm2022/taiga-ui-core-portals.mjs.map +1 -0
  121. package/fesm2022/taiga-ui-core-services.mjs +3 -23
  122. package/fesm2022/taiga-ui-core-services.mjs.map +1 -1
  123. package/fesm2022/taiga-ui-core-tokens.mjs +22 -25
  124. package/fesm2022/taiga-ui-core-tokens.mjs.map +1 -1
  125. package/fesm2022/taiga-ui-core-utils-format.mjs +1 -22
  126. package/fesm2022/taiga-ui-core-utils-format.mjs.map +1 -1
  127. package/fesm2022/taiga-ui-core-utils-miscellaneous.mjs +8 -17
  128. package/fesm2022/taiga-ui-core-utils-miscellaneous.mjs.map +1 -1
  129. package/fesm2022/taiga-ui-core.mjs +1 -0
  130. package/fesm2022/taiga-ui-core.mjs.map +1 -1
  131. package/index.d.ts +1 -0
  132. package/package.json +77 -98
  133. package/pipes/format-number/format-number.pipe.d.ts +6 -4
  134. package/pipes/index.d.ts +0 -7
  135. package/portals/alert/alert.directive.d.ts +11 -0
  136. package/portals/alert/alert.service.d.ts +12 -0
  137. package/portals/alert/index.d.ts +2 -0
  138. package/portals/dialog/dialog.component.d.ts +14 -0
  139. package/portals/dialog/dialog.directive.d.ts +8 -0
  140. package/{components → portals}/dialog/dialog.factory.d.ts +1 -1
  141. package/portals/dialog/dialog.options.d.ts +25 -0
  142. package/{components/dialog/dialog-close.service.d.ts → portals/dialog/dialog.providers.d.ts} +2 -0
  143. package/portals/dialog/dialog.service.d.ts +10 -0
  144. package/portals/dialog/index.d.ts +6 -0
  145. package/portals/dropdown/dropdown-content.directive.d.ts +9 -0
  146. package/{directives → portals}/dropdown/dropdown-hover.directive.d.ts +5 -10
  147. package/{directives → portals}/dropdown/dropdown-hover.options.d.ts +1 -3
  148. package/{directives → portals}/dropdown/dropdown-manual.directive.d.ts +2 -2
  149. package/portals/dropdown/dropdown-open.directive.d.ts +30 -0
  150. package/{directives → portals}/dropdown/dropdown-position-sided.directive.d.ts +3 -3
  151. package/{directives → portals}/dropdown/dropdown-position.directive.d.ts +5 -5
  152. package/{directives → portals}/dropdown/dropdown-selection.directive.d.ts +4 -5
  153. package/{directives → portals}/dropdown/dropdown.bindings.d.ts +0 -1
  154. package/{directives → portals}/dropdown/dropdown.d.ts +2 -3
  155. package/{directives → portals}/dropdown/dropdown.directive.d.ts +6 -8
  156. package/{directives → portals}/dropdown/index.d.ts +1 -4
  157. package/{directives → portals}/hint/hint-describe.directive.d.ts +4 -6
  158. package/{directives → portals}/hint/hint-host.directive.d.ts +2 -2
  159. package/{directives → portals}/hint/hint-hover.directive.d.ts +3 -4
  160. package/{directives → portals}/hint/hint-manual.directive.d.ts +2 -2
  161. package/{directives → portals}/hint/hint-options.directive.d.ts +3 -3
  162. package/{directives → portals}/hint/hint-overflow.directive.d.ts +2 -2
  163. package/{directives → portals}/hint/hint-position.directive.d.ts +4 -5
  164. package/{directives → portals}/hint/hint-unstyled.component.d.ts +2 -7
  165. package/portals/hint/hint.component.d.ts +29 -0
  166. package/portals/hint/hint.directive.d.ts +24 -0
  167. package/{directives → portals}/hint/index.d.ts +0 -2
  168. package/portals/index.d.ts +6 -0
  169. package/portals/modal/index.d.ts +2 -0
  170. package/portals/modal/modal.component.d.ts +17 -0
  171. package/portals/modal/modal.service.d.ts +13 -0
  172. package/portals/popup/popup.directive.d.ts +12 -0
  173. package/{directives → portals}/popup/popup.service.d.ts +1 -1
  174. package/{directives → portals}/popup/popups.component.d.ts +2 -2
  175. package/services/index.d.ts +0 -1
  176. package/styles/components/link.less +1 -0
  177. package/styles/mixins/appearance.less +1 -1
  178. package/styles/mixins/mixins.less +0 -5
  179. package/styles/mixins/mixins.scss +0 -5
  180. package/styles/mixins/slider.less +21 -16
  181. package/styles/mixins/slider.scss +1 -2
  182. package/styles/theme/variables.less +2 -4
  183. package/tokens/common-icons.d.ts +1 -3
  184. package/tokens/date-format.d.ts +2 -3
  185. package/tokens/i18n.d.ts +7 -7
  186. package/tokens/icon-resolver.d.ts +0 -4
  187. package/tokens/icons.d.ts +0 -4
  188. package/tokens/number-format.d.ts +2 -3
  189. package/types/index.d.ts +0 -3
  190. package/types/size.d.ts +0 -11
  191. package/utils/format/index.d.ts +0 -1
  192. package/utils/miscellaneous/get-duration.d.ts +2 -0
  193. package/utils/miscellaneous/index.d.ts +1 -1
  194. package/components/alert/alert.component.d.ts +0 -15
  195. package/components/alert/alert.directive.d.ts +0 -7
  196. package/components/alert/alert.interfaces.d.ts +0 -12
  197. package/components/alert/alert.service.d.ts +0 -7
  198. package/components/alert/alert.tokens.d.ts +0 -12
  199. package/components/alert/alerts.component.d.ts +0 -12
  200. package/components/alert/index.d.ts +0 -6
  201. package/components/data-list/data-list.directive.d.ts +0 -7
  202. package/components/data-list/option/option-legacy.component.d.ts +0 -24
  203. package/components/dialog/active-zone-adapter.directive.d.ts +0 -11
  204. package/components/dialog/dialog.component.d.ts +0 -20
  205. package/components/dialog/dialog.directive.d.ts +0 -7
  206. package/components/dialog/dialog.interfaces.d.ts +0 -34
  207. package/components/dialog/dialog.service.d.ts +0 -7
  208. package/components/dialog/dialog.tokens.d.ts +0 -15
  209. package/components/dialog/dialogs.component.d.ts +0 -8
  210. package/components/dialog/index.d.ts +0 -8
  211. package/components/expand/expand-content.directive.d.ts +0 -8
  212. package/components/expand/expand.d.ts +0 -6
  213. package/components/fullscreen/fullscreen.component.d.ts +0 -14
  214. package/components/fullscreen/index.d.ts +0 -1
  215. package/components/textfield/select.directive.d.ts +0 -19
  216. package/components/textfield/textfield-dropdown.directive.d.ts +0 -16
  217. package/directives/dropdown/dropdown-open-legacy.directive.d.ts +0 -12
  218. package/directives/dropdown/dropdown-open.directive.d.ts +0 -33
  219. package/directives/dropdown/dropdown-portal.directive.d.ts +0 -14
  220. package/directives/dropdown/dropdown.service.d.ts +0 -6
  221. package/directives/dropdown/dropdowns.component.d.ts +0 -9
  222. package/directives/hint/hint.component.d.ts +0 -30
  223. package/directives/hint/hint.directive.d.ts +0 -26
  224. package/directives/hint/hint.service.d.ts +0 -13
  225. package/directives/hint/hints.component.d.ts +0 -12
  226. package/directives/popup/popup.directive.d.ts +0 -11
  227. package/directives/surface/index.d.ts +0 -1
  228. package/directives/surface/surface.directive.d.ts +0 -8
  229. package/fesm2022/taiga-ui-core-components-alert.mjs +0 -149
  230. package/fesm2022/taiga-ui-core-components-alert.mjs.map +0 -1
  231. package/fesm2022/taiga-ui-core-components-dialog.mjs +0 -229
  232. package/fesm2022/taiga-ui-core-components-dialog.mjs.map +0 -1
  233. package/fesm2022/taiga-ui-core-components-fullscreen.mjs +0 -77
  234. package/fesm2022/taiga-ui-core-components-fullscreen.mjs.map +0 -1
  235. package/fesm2022/taiga-ui-core-directives-dropdown.mjs.map +0 -1
  236. package/fesm2022/taiga-ui-core-directives-hint.mjs.map +0 -1
  237. package/fesm2022/taiga-ui-core-directives-popup.mjs +0 -63
  238. package/fesm2022/taiga-ui-core-directives-popup.mjs.map +0 -1
  239. package/fesm2022/taiga-ui-core-directives-surface.mjs +0 -50
  240. package/fesm2022/taiga-ui-core-directives-surface.mjs.map +0 -1
  241. package/fesm2022/taiga-ui-core-directives-title.mjs +0 -43
  242. package/fesm2022/taiga-ui-core-directives-title.mjs.map +0 -1
  243. package/fesm2022/taiga-ui-core-pipes-auto-color.mjs +0 -25
  244. package/fesm2022/taiga-ui-core-pipes-auto-color.mjs.map +0 -1
  245. package/fesm2022/taiga-ui-core-pipes-calendar-sheet.mjs +0 -94
  246. package/fesm2022/taiga-ui-core-pipes-calendar-sheet.mjs.map +0 -1
  247. package/fesm2022/taiga-ui-core-pipes-flag.mjs +0 -32
  248. package/fesm2022/taiga-ui-core-pipes-flag.mjs.map +0 -1
  249. package/fesm2022/taiga-ui-core-pipes-format-date.mjs +0 -28
  250. package/fesm2022/taiga-ui-core-pipes-format-date.mjs.map +0 -1
  251. package/fesm2022/taiga-ui-core-pipes-initials.mjs +0 -29
  252. package/fesm2022/taiga-ui-core-pipes-initials.mjs.map +0 -1
  253. package/fesm2022/taiga-ui-core-pipes-month.mjs +0 -29
  254. package/fesm2022/taiga-ui-core-pipes-month.mjs.map +0 -1
  255. package/fesm2022/taiga-ui-core-pipes-order-week-days.mjs +0 -36
  256. package/fesm2022/taiga-ui-core-pipes-order-week-days.mjs.map +0 -1
  257. package/pipes/auto-color/auto-color.pipe.d.ts +0 -7
  258. package/pipes/auto-color/index.d.ts +0 -1
  259. package/pipes/calendar-sheet/index.d.ts +0 -1
  260. package/pipes/calendar-sheet/utils.d.ts +0 -20
  261. package/pipes/flag/flag.pipe.d.ts +0 -14
  262. package/pipes/flag/index.d.ts +0 -1
  263. package/pipes/format-date/format-date.pipe.d.ts +0 -9
  264. package/pipes/format-date/index.d.ts +0 -1
  265. package/pipes/initials/index.d.ts +0 -1
  266. package/pipes/initials/initials.pipe.d.ts +0 -7
  267. package/pipes/month/index.d.ts +0 -1
  268. package/pipes/month/month.pipe.d.ts +0 -10
  269. package/pipes/order-week-days/index.d.ts +0 -1
  270. package/services/format-date.service.d.ts +0 -8
  271. package/types/portal-item.d.ts +0 -9
  272. package/types/range-state.d.ts +0 -4
  273. package/types/value-content-context.d.ts +0 -4
  274. package/utils/format/string-hash-to-hsl.d.ts +0 -6
  275. package/utils/miscellaneous/to-animation-options.d.ts +0 -4
  276. /package/{pipes/order-week-days → components/calendar}/order-week-days.pipe.d.ts +0 -0
  277. /package/{directives → components}/title/index.d.ts +0 -0
  278. /package/{directives → portals}/dropdown/dropdown-context.directive.d.ts +0 -0
  279. /package/{directives → portals}/dropdown/dropdown-limit-width.d.ts +0 -0
  280. /package/{directives → portals}/dropdown/dropdown-options.directive.d.ts +0 -0
  281. /package/{directives → portals}/dropdown/dropdown.component.d.ts +0 -0
  282. /package/{directives → portals}/dropdown/dropdown.driver.d.ts +0 -0
  283. /package/{directives → portals}/dropdown/dropdown.providers.d.ts +0 -0
  284. /package/{directives → portals}/dropdown/with-dropdown-open.directive.d.ts +0 -0
  285. /package/{directives → portals}/hint/hint-driver.directive.d.ts +0 -0
  286. /package/{directives → portals}/hint/hint-pointer.directive.d.ts +0 -0
  287. /package/{directives → portals}/hint/hint.d.ts +0 -0
  288. /package/{directives → portals}/hint/hint.providers.d.ts +0 -0
  289. /package/{directives → portals}/popup/index.d.ts +0 -0
@@ -1,41 +1,37 @@
1
1
  import * as i0 from '@angular/core';
2
- import { inject, Directive, InjectionToken, signal, Optional, SkipSelf, Input, TemplateRef, PLATFORM_ID, computed, ViewContainerRef, ElementRef, forwardRef, ContentChild, ViewChild, ContentChildren, ChangeDetectionStrategy, ViewEncapsulation, Component } from '@angular/core';
2
+ import { inject, Directive, InjectionToken, signal, Optional, SkipSelf, input, computed, viewChild, contentChild, forwardRef, ElementRef, ViewContainerRef, contentChildren, afterNextRender, ChangeDetectionStrategy, ViewEncapsulation, Component, TemplateRef } from '@angular/core';
3
3
  import { TUI_IS_ANDROID } from '@taiga-ui/cdk/tokens';
4
4
  import { tuiInjectElement, tuiValue, tuiIsElement } from '@taiga-ui/cdk/utils/dom';
5
5
  import { TuiItem } from '@taiga-ui/cdk/directives/item';
6
6
  import { TuiLabel } from '@taiga-ui/core/components/label';
7
- import { isPlatformBrowser, AsyncPipe, DOCUMENT } from '@angular/common';
8
- import { WA_NAVIGATOR } from '@ng-web-apis/common';
9
- import * as i1$1 from '@taiga-ui/cdk/directives/native-validator';
10
- import { TuiNativeValidator } from '@taiga-ui/cdk/directives/native-validator';
11
- import * as i2$1 from '@taiga-ui/core/directives/appearance';
12
- import { tuiAppearance, tuiAppearanceState, tuiAppearanceMode, tuiAppearanceFocus, TuiAppearance } from '@taiga-ui/core/directives/appearance';
7
+ import * as i1$1 from '@taiga-ui/core/portals/dropdown';
8
+ import { TuiDropdownDirective, TuiDropdownOpen, TuiDropdownFixed, TuiWithDropdownOpen, TuiDropdownContent } from '@taiga-ui/core/portals/dropdown';
9
+ import { AsyncPipe } from '@angular/common';
13
10
  import { NgControl } from '@angular/forms';
14
- import { tuiProvide, tuiPx, tuiArrayToggle } from '@taiga-ui/cdk/utils/miscellaneous';
15
- import * as i4 from '@taiga-ui/core/directives/items-handlers';
16
- import { TuiWithItemsHandlers, TUI_ITEMS_HANDLERS } from '@taiga-ui/core/directives/items-handlers';
17
- import { toSignal, takeUntilDestroyed } from '@angular/core/rxjs-interop';
18
11
  import { WaResizeObserver } from '@ng-web-apis/resize-observer';
19
- import { TuiControl } from '@taiga-ui/cdk/classes';
20
- import { EMPTY_QUERY } from '@taiga-ui/cdk/constants';
21
- import * as i2 from '@taiga-ui/cdk/directives/transitioned';
22
- import { TuiTransitioned } from '@taiga-ui/cdk/directives/transitioned';
23
- import { tuiQueryListChanges, tuiZonefree } from '@taiga-ui/cdk/observables';
24
- import { tuiInjectId } from '@taiga-ui/cdk/services';
25
12
  import { tuiFocusedIn } from '@taiga-ui/cdk/utils/focus';
13
+ import { tuiGenerateId, tuiPx, tuiArrayToggle } from '@taiga-ui/cdk/utils/miscellaneous';
26
14
  import { TuiButton, tuiButtonOptionsProvider } from '@taiga-ui/core/components/button';
27
- import * as i5 from '@taiga-ui/core/components/data-list';
15
+ import * as i4 from '@taiga-ui/core/components/data-list';
28
16
  import { tuiAsDataListHost, TuiWithOptionContent } from '@taiga-ui/core/components/data-list';
29
- import * as i1 from '@taiga-ui/core/directives/dropdown';
30
- import { TuiDropdownDirective, tuiDropdownOpen, TuiDropdownOpen, TuiDropdownFixed, TuiWithDropdownOpen } from '@taiga-ui/core/directives/dropdown';
31
- import * as i3 from '@taiga-ui/core/directives/icons';
17
+ import * as i2$1 from '@taiga-ui/core/directives/icons';
32
18
  import { TuiWithIcons, tuiIconEnd } from '@taiga-ui/core/directives/icons';
19
+ import * as i3 from '@taiga-ui/core/directives/items-handlers';
20
+ import { TUI_ITEMS_HANDLERS, TuiWithItemsHandlers } from '@taiga-ui/core/directives/items-handlers';
33
21
  import { TUI_COMMON_ICONS, TUI_CLEAR_WORD, TUI_AUXILIARY, TUI_SCROLL_REF } from '@taiga-ui/core/tokens';
34
22
  import { PolymorpheusOutlet, injectContext, PolymorpheusComponent } from '@taiga-ui/polymorpheus';
35
- import { ReplaySubject, take, switchMap, startWith, fromEvent, filter } from 'rxjs';
23
+ import * as i1 from '@taiga-ui/cdk/directives/native-validator';
24
+ import { TuiNativeValidator } from '@taiga-ui/cdk/directives/native-validator';
25
+ import * as i2 from '@taiga-ui/core/directives/appearance';
26
+ import { tuiAppearance, tuiAppearanceState, tuiAppearanceMode, tuiAppearanceFocus, TuiAppearance } from '@taiga-ui/core/directives/appearance';
27
+ import { tuiProvide } from '@taiga-ui/cdk/utils/di';
28
+ import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
29
+ import { TuiControl } from '@taiga-ui/cdk/classes';
30
+ import { tuiZonefree } from '@taiga-ui/cdk/observables';
36
31
  import { TuiScrollControls } from '@taiga-ui/core/components/scrollbar';
37
- import * as i4$1 from '@taiga-ui/core/directives';
38
- import { TUI_ITEMS_HANDLERS as TUI_ITEMS_HANDLERS$1, TuiWithItemsHandlers as TuiWithItemsHandlers$1, TuiWithAppearance } from '@taiga-ui/core/directives';
32
+ import * as i1$2 from '@taiga-ui/core/directives';
33
+ import { TUI_ITEMS_HANDLERS as TUI_ITEMS_HANDLERS$1, TuiWithAppearance } from '@taiga-ui/core/directives';
34
+ import { fromEvent, filter } from 'rxjs';
39
35
 
40
36
  class TuiSelectLike {
41
37
  constructor() {
@@ -58,7 +54,6 @@ class TuiSelectLike {
58
54
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiSelectLike, decorators: [{
59
55
  type: Directive,
60
56
  args: [{
61
- standalone: true,
62
57
  selector: '[tuiSelectLike]',
63
58
  host: {
64
59
  tuiSelectLike: '',
@@ -74,11 +69,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
74
69
  }]
75
70
  }] });
76
71
 
77
- const DEFAULT = {
78
- appearance: 'textfield',
79
- size: 'l',
80
- cleaner: true,
81
- };
72
+ const DEFAULT = { appearance: 'textfield', size: 'l', cleaner: true };
82
73
  const TUI_TEXTFIELD_OPTIONS = new InjectionToken(ngDevMode ? 'TUI_TEXTFIELD_OPTIONS' : '', {
83
74
  factory: () => ({
84
75
  appearance: signal(DEFAULT.appearance),
@@ -101,201 +92,185 @@ function tuiTextfieldOptionsProvider(options) {
101
92
  class TuiTextfieldOptionsDirective {
102
93
  constructor() {
103
94
  this.options = inject(TUI_TEXTFIELD_OPTIONS, { skipSelf: true });
104
- // TODO: refactor to signal inputs after Angular update
105
- this.appearance = signal(this.options.appearance());
106
- this.size = signal(this.options.size());
107
- this.cleaner = signal(this.options.cleaner());
108
- }
109
- set tuiTextfieldAppearance(appearance) {
110
- this.appearance.set(appearance);
111
- }
112
- set tuiTextfieldSize(size) {
113
- this.size.set(size);
114
- }
115
- set tuiTextfieldCleaner(enabled) {
116
- this.cleaner.set(enabled);
95
+ this.appearance = input(this.options.appearance(), {
96
+ alias: 'tuiTextfieldAppearance',
97
+ });
98
+ this.size = input(this.options.size(), {
99
+ alias: 'tuiTextfieldSize',
100
+ transform: (size) => size || DEFAULT.size,
101
+ });
102
+ this.cleaner = input(this.options.cleaner(), {
103
+ alias: 'tuiTextfieldCleaner',
104
+ });
117
105
  }
118
106
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiTextfieldOptionsDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
119
- static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.15", type: TuiTextfieldOptionsDirective, isStandalone: true, selector: "[tuiTextfieldAppearance],[tuiTextfieldSize],[tuiTextfieldCleaner]", inputs: { tuiTextfieldAppearance: "tuiTextfieldAppearance", tuiTextfieldSize: "tuiTextfieldSize", tuiTextfieldCleaner: "tuiTextfieldCleaner" }, providers: [tuiProvide(TUI_TEXTFIELD_OPTIONS, TuiTextfieldOptionsDirective)], ngImport: i0 }); }
107
+ 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 }); }
120
108
  }
121
109
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiTextfieldOptionsDirective, decorators: [{
122
110
  type: Directive,
123
111
  args: [{
124
- standalone: true,
125
112
  selector: '[tuiTextfieldAppearance],[tuiTextfieldSize],[tuiTextfieldCleaner]',
126
113
  providers: [tuiProvide(TUI_TEXTFIELD_OPTIONS, TuiTextfieldOptionsDirective)],
127
114
  }]
128
- }], propDecorators: { tuiTextfieldAppearance: [{
129
- type: Input
130
- }], tuiTextfieldSize: [{
131
- type: Input
132
- }], tuiTextfieldCleaner: [{
133
- type: Input
134
- }] } });
115
+ }] });
135
116
 
136
117
  const TUI_TEXTFIELD_ACCESSOR = new InjectionToken(ngDevMode ? 'TUI_TEXTFIELD_ACCESSOR' : '');
137
118
  function tuiAsTextfieldAccessor(accessor) {
138
119
  return tuiProvide(TUI_TEXTFIELD_ACCESSOR, accessor);
139
120
  }
140
121
 
141
- // TODO: Change selector to tuiDropdown in v5 and move to TuiDropdown
142
- class TuiTextfieldDropdownDirective {
122
+ class TuiTextfieldDirective {
143
123
  constructor() {
144
- this.directive = inject(TuiDropdownDirective);
145
- this.directive.tuiDropdown = inject(TemplateRef);
146
- if (isPlatformBrowser(inject(PLATFORM_ID)) &&
147
- this.directive.el.matches(':focus-within')) {
148
- this.directive.toggle(true);
149
- }
124
+ this.el = tuiInjectElement();
125
+ this.control = inject(NgControl, { optional: true });
126
+ this.handlers = inject(TUI_ITEMS_HANDLERS);
127
+ this.textfield = inject(TuiTextfieldComponent);
128
+ this.a = tuiAppearance(inject(TUI_TEXTFIELD_OPTIONS).appearance);
129
+ this.s = tuiAppearanceState(computed(() => this.state()));
130
+ this.m = tuiAppearanceMode(computed(() => this.mode()));
131
+ this.f = tuiAppearanceFocus(computed(() => this.focused() ?? this.textfield.focused()));
132
+ this.readOnly = input(false);
133
+ this.invalid = input(null);
134
+ this.focused = input(null);
135
+ this.state = input(null);
136
+ this.value = tuiValue(this.el);
137
+ this.mode = computed(() => {
138
+ if (this.readOnly()) {
139
+ return 'readonly';
140
+ }
141
+ if (this.invalid() === false) {
142
+ return 'valid';
143
+ }
144
+ if (this.invalid()) {
145
+ return 'invalid';
146
+ }
147
+ return null;
148
+ });
150
149
  }
151
- ngOnDestroy() {
152
- this.directive.tuiDropdown = null;
150
+ setValue(value) {
151
+ this.el.focus();
152
+ this.el.select();
153
+ if (value == null) {
154
+ this.el.ownerDocument.execCommand('delete');
155
+ // see https://github.com/taiga-family/taiga-ui/issues/11634
156
+ // ensure non-erasable affixes actually deleted
157
+ this.el.value = '';
158
+ }
159
+ else {
160
+ this.el.ownerDocument.execCommand('insertText', false, this.handlers.stringify()(value));
161
+ }
153
162
  }
154
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiTextfieldDropdownDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
155
- static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.15", type: TuiTextfieldDropdownDirective, isStandalone: true, selector: "ng-template[tuiTextfieldDropdown]", ngImport: i0 }); }
163
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiTextfieldDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
164
+ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.15", type: TuiTextfieldDirective, isStandalone: true, selector: "input[tuiTextfield]", 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(TuiTextfieldDirective)], hostDirectives: [{ directive: i1.TuiNativeValidator }, { directive: i2.TuiAppearance }], ngImport: i0 }); }
156
165
  }
157
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiTextfieldDropdownDirective, decorators: [{
166
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiTextfieldDirective, decorators: [{
158
167
  type: Directive,
159
168
  args: [{
160
- standalone: true,
161
- selector: 'ng-template[tuiTextfieldDropdown]',
169
+ selector: 'input[tuiTextfield]',
170
+ providers: [tuiAsTextfieldAccessor(TuiTextfieldDirective)],
171
+ hostDirectives: [TuiNativeValidator, TuiAppearance],
172
+ host: {
173
+ tuiTextfield: '',
174
+ '[id]': 'textfield.id',
175
+ '[readOnly]': 'readOnly()',
176
+ '[class._empty]': 'value() === ""',
177
+ '(input)': '0',
178
+ '(focusin)': '0',
179
+ '(focusout)': '0',
180
+ },
162
181
  }]
163
- }], ctorParameters: () => [] });
164
- /**
165
- * @deprecated remove in v5
166
- */
167
- class TuiWithTextfieldDropdown {
168
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiWithTextfieldDropdown, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
169
- static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.15", type: TuiWithTextfieldDropdown, isStandalone: true, ngImport: i0 }); }
182
+ }] });
183
+ class TuiWithTextfield {
184
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiWithTextfield, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
185
+ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.15", type: TuiWithTextfield, isStandalone: true, hostDirectives: [{ directive: TuiTextfieldDirective, inputs: ["invalid", "invalid", "focused", "focused", "readOnly", "readOnly", "state", "state"] }], ngImport: i0 }); }
170
186
  }
171
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiWithTextfieldDropdown, decorators: [{
187
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiWithTextfield, decorators: [{
172
188
  type: Directive,
173
189
  args: [{
174
- standalone: true,
190
+ hostDirectives: [
191
+ {
192
+ directive: TuiTextfieldDirective,
193
+ inputs: ['invalid', 'focused', 'readOnly', 'state'],
194
+ },
195
+ ],
175
196
  }]
176
197
  }] });
177
198
 
178
- // TODO: Remove base class in v5
179
- class TuiTextfieldBaseComponent {
199
+ class TuiTextfieldComponent {
180
200
  constructor() {
181
- // TODO: refactor to signal inputs after Angular update
182
- this.filler = signal('');
183
- this.autoId = tuiInjectId();
201
+ this.autoId = tuiGenerateId();
184
202
  this.focusedIn = tuiFocusedIn(tuiInjectElement());
185
- this.contentReady$ = new ReplaySubject(1);
186
- this.inputQuery = signal(undefined);
187
- this.auxiliaryQuery = EMPTY_QUERY;
188
- this.open = tuiDropdownOpen();
203
+ this.ghost = viewChild('ghost');
189
204
  this.dropdown = inject(TuiDropdownDirective);
190
- this.dropdownOpen = inject(TuiDropdownOpen);
205
+ this.open = inject(TuiDropdownOpen);
191
206
  this.icons = inject(TUI_COMMON_ICONS);
192
- this.clear = toSignal(inject(TUI_CLEAR_WORD));
207
+ this.clear = inject(TUI_CLEAR_WORD);
208
+ this.label = contentChild(forwardRef(() => TuiLabel), { read: ElementRef });
193
209
  this.computedFiller = computed((value = this.value()) => {
194
210
  const filler = value + this.filler().slice(value.length);
195
211
  return filler.length > value.length ? filler : '';
196
212
  });
197
213
  this.showFiller = computed(() => this.focused() &&
198
214
  !!this.computedFiller() &&
199
- (!!this.value() || !this.input?.nativeElement.placeholder));
200
- this.focused = computed(() => this.open() || this.focusedIn());
215
+ (!!this.value() || !this.input()?.nativeElement.placeholder));
216
+ this.accessor = contentChild(TUI_TEXTFIELD_ACCESSOR, { descendants: true });
217
+ this.vcr = viewChild('vcr', { read: ViewContainerRef });
218
+ this.control = contentChild(NgControl);
219
+ this.auxiliaries = contentChildren(TUI_AUXILIARY, { descendants: true });
220
+ this.focused = computed(() => this.open.open() || this.focusedIn());
201
221
  this.options = inject(TUI_TEXTFIELD_OPTIONS);
202
222
  this.el = tuiInjectElement();
203
- this.value = tuiValue(this.inputQuery);
204
- // TODO: Refactor to signal queries when Angular is updated
205
- this.auxiliaries = toSignal(this.contentReady$.pipe(take(1), switchMap(() => tuiQueryListChanges(this.auxiliaryQuery)), startWith([])), { requireSync: true });
206
- }
207
- set fillerSetter(filler) {
208
- this.filler.set(filler);
223
+ this.input = contentChild(forwardRef(() => TuiTextfieldDirective), { read: ElementRef });
224
+ this.content = input();
225
+ this.filler = input('');
226
+ this.value = tuiValue(this.input);
227
+ // TODO: Replace with TuiTransitioned when fixed:
228
+ // https://github.com/angular/angular/issues/57846
229
+ afterNextRender(() => this.el.style.setProperty('transition', ''));
209
230
  }
210
231
  get id() {
211
- return this.input?.nativeElement.id || this.autoId;
232
+ return this.input()?.nativeElement.id || this.autoId;
212
233
  }
213
234
  get size() {
214
235
  return this.options.size();
215
236
  }
216
- ngAfterContentChecked() {
217
- this.contentReady$.next(true);
218
- this.inputQuery.set(this._input);
219
- }
220
237
  handleOption(option) {
221
- this.accessor?.setValue(option);
222
- this.open.set(false);
238
+ this.accessor()?.setValue(option);
239
+ this.open.open.set(false);
223
240
  }
224
241
  get hasLabel() {
225
- return Boolean(this.label?.nativeElement?.childNodes.length);
242
+ return Boolean(this.label()?.nativeElement?.childNodes.length);
226
243
  }
227
244
  onResize({ contentRect }) {
228
245
  this.el.style.setProperty('--t-side', tuiPx(contentRect.width));
229
246
  }
230
247
  // Click on ::before,::after pseudo-elements ([iconStart] / [iconEnd])
231
248
  onIconClick() {
232
- this.input?.nativeElement.focus();
233
- if (!this.dropdownOpen.tuiDropdownEnabled ||
234
- this.input?.nativeElement.matches('input:read-only,textarea:read-only')) {
249
+ this.input()?.nativeElement.focus();
250
+ if (!this.open.enabled() ||
251
+ this.input()?.nativeElement.matches('input:read-only,textarea:read-only')) {
235
252
  return;
236
253
  }
237
- this.open.update((open) => !open);
254
+ this.open.open.update((open) => !open);
238
255
  try {
239
- this.input?.nativeElement.showPicker?.();
256
+ this.input()?.nativeElement.showPicker?.();
240
257
  }
241
258
  catch {
242
259
  // Empty catch block - silently ignore showPicker errors
243
260
  }
244
261
  }
245
262
  onScroll(element) {
246
- if (this.input?.nativeElement === element) {
247
- this.ghost?.nativeElement.scrollTo({
248
- left: this.input.nativeElement.scrollLeft,
263
+ if (this.input()?.nativeElement === element) {
264
+ this.ghost()?.nativeElement.scrollTo({
265
+ left: this.input()?.nativeElement.scrollLeft,
249
266
  });
250
267
  }
251
268
  }
252
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiTextfieldBaseComponent, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
253
- static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.15", type: TuiTextfieldBaseComponent, isStandalone: true, inputs: { content: "content", fillerSetter: ["filler", "fillerSetter"] }, 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 }); }
254
- }
255
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiTextfieldBaseComponent, decorators: [{
256
- type: Directive
257
- }], propDecorators: { ghost: [{
258
- type: ViewChild,
259
- args: ['ghost']
260
- }], label: [{
261
- type: ContentChild,
262
- args: [forwardRef(() => TuiLabel), { read: ElementRef }]
263
- }], auxiliaryQuery: [{
264
- type: ContentChildren,
265
- args: [TUI_AUXILIARY, { descendants: true }]
266
- }], _input: [{
267
- type: ContentChild,
268
- args: [forwardRef(() => TuiTextfieldBase), { read: ElementRef }]
269
- }], vcr: [{
270
- type: ViewChild,
271
- args: ['vcr', { read: ViewContainerRef, static: true }]
272
- }], accessor: [{
273
- type: ContentChild,
274
- args: [TUI_TEXTFIELD_ACCESSOR, { descendants: true }]
275
- }], control: [{
276
- type: ContentChild,
277
- args: [NgControl]
278
- }], cva: [{
279
- type: ContentChild,
280
- args: [TuiControl]
281
- }], input: [{
282
- type: ContentChild,
283
- args: [forwardRef(() => TuiTextfieldBase), {
284
- read: ElementRef,
285
- static: true,
286
- }]
287
- }], content: [{
288
- type: Input
289
- }], fillerSetter: [{
290
- type: Input,
291
- args: ['filler']
292
- }] } });
293
- class TuiTextfieldComponent extends TuiTextfieldBaseComponent {
294
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiTextfieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
295
- 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: [
269
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiTextfieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
270
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: TuiTextfieldComponent, isStandalone: true, selector: "tui-textfield:not([multi])", inputs: { content: { classPropertyName: "content", publicName: "content", isSignal: true, isRequired: false, transformFunction: null }, filler: { classPropertyName: "filler", publicName: "filler", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "click.self.prevent": "0", "pointerdown.self.prevent": "onIconClick()", "scroll.capture.zoneless": "onScroll($event.target)", "tuiActiveZoneChange": "!$event && control()?.valueAccessor?.onTouched?.()" }, properties: { "attr.data-size": "options.size()", "class._with-label": "hasLabel", "class._with-template": "content() && control()?.value != null", "class._disabled": "input()?.nativeElement?.disabled", "style.transition": "\"none\"" } }, providers: [
296
271
  tuiButtonOptionsProvider({ size: 'xs', appearance: 'icon' }),
297
272
  tuiAsDataListHost(TuiTextfieldComponent),
298
- ], usesInheritance: true, hostDirectives: [{ directive: i1.TuiDropdownDirective }, { directive: i1.TuiDropdownFixed }, { directive: i2.TuiTransitioned }, { directive: i1.TuiWithDropdownOpen }, { directive: i3.TuiWithIcons }, { directive: i4.TuiWithItemsHandlers }, { directive: i5.TuiWithOptionContent }, { directive: TuiWithTextfieldDropdown }], 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 }); }
273
+ ], queries: [{ propertyName: "label", first: true, predicate: i0.forwardRef(() => TuiLabel), descendants: true, read: ElementRef, isSignal: true }, { propertyName: "accessor", first: true, predicate: TUI_TEXTFIELD_ACCESSOR, descendants: true, isSignal: true }, { propertyName: "control", first: true, predicate: NgControl, descendants: true, isSignal: true }, { propertyName: "auxiliaries", predicate: TUI_AUXILIARY, descendants: true, isSignal: true }, { propertyName: "input", first: true, predicate: i0.forwardRef(() => TuiTextfieldDirective), descendants: true, read: ElementRef, isSignal: true }], viewQueries: [{ propertyName: "ghost", first: true, predicate: ["ghost"], descendants: true, isSignal: true }, { propertyName: "vcr", first: true, predicate: ["vcr"], descendants: true, read: ViewContainerRef, isSignal: true }], hostDirectives: [{ directive: i1$1.TuiDropdownDirective }, { directive: i1$1.TuiDropdownFixed }, { directive: i1$1.TuiWithDropdownOpen }, { directive: i2$1.TuiWithIcons }, { directive: i3.TuiWithItemsHandlers }, { directive: i4.TuiWithOptionContent }], ngImport: i0, template: "@if (control()?.control?.valueChanges | async) {}\n<ng-content select=\"input\" />\n<ng-content select=\"select\" />\n<ng-content select=\"textarea\" />\n<ng-content select=\"label\" />\n<span\n class=\"t-content\"\n (pointerdown)=\"input()?.nativeElement?.focus()\"\n (waResizeObserver)=\"$event[0] && onResize($event[0])\"\n>\n <ng-content />\n <ng-container #vcr />\n @if (options.cleaner()) {\n <button\n appearance=\"icon\"\n size=\"xs\"\n tabindex=\"-1\"\n tuiIconButton\n type=\"button\"\n class=\"t-clear\"\n [iconStart]=\"icons.close\"\n (click)=\"accessor()?.setValue(null)\"\n (pointerdown.zoneless.prevent)=\"input()?.nativeElement?.focus()\"\n >\n {{ clear() }}\n </button>\n }\n <ng-content select=\"tui-icon\" />\n</span>\n@if (control()?.value != null) {\n <span class=\"t-template\">\n <ng-container *polymorpheusOutlet=\"content() as text; context: {$implicit: control()?.value}\">\n {{ text }}\n </ng-container>\n </span>\n}\n@if (showFiller()) {\n <input\n #ghost\n aria-hidden=\"true\"\n disabled\n class=\"t-filler\"\n [value]=\"computedFiller()\"\n />\n}\n", styles: ["tui-textfield{scrollbar-width:none;-ms-overflow-style:none;transition-property:color;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out;--t-height: var(--tui-height-l);--t-padding: var(--tui-padding-l);--t-label: -.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 }); }
299
274
  }
300
275
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiTextfieldComponent, decorators: [{
301
276
  type: Component,
@@ -305,193 +280,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
305
280
  ], hostDirectives: [
306
281
  TuiDropdownDirective,
307
282
  TuiDropdownFixed,
308
- TuiTransitioned,
309
283
  TuiWithDropdownOpen,
310
284
  TuiWithIcons,
311
285
  TuiWithItemsHandlers,
312
286
  TuiWithOptionContent,
313
- TuiWithTextfieldDropdown,
314
287
  ], host: {
315
288
  '[attr.data-size]': 'options.size()',
316
289
  '[class._with-label]': 'hasLabel',
317
- '[class._with-template]': 'content && control?.value != null',
318
- '[class._disabled]': 'input?.nativeElement?.disabled',
290
+ '[class._with-template]': 'content() && control()?.value != null',
291
+ '[class._disabled]': 'input()?.nativeElement?.disabled',
292
+ '[style.transition]': '"none"',
319
293
  '(click.self.prevent)': '0',
320
294
  '(pointerdown.self.prevent)': 'onIconClick()',
321
295
  '(scroll.capture.zoneless)': 'onScroll($event.target)',
322
- '(tuiActiveZoneChange)': '!$event && cva?.onTouched()',
323
- }, 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"] }]
324
- }] });
325
-
326
- // TODO: Drop in v5 after updated Angular and hostDirectives inherit
327
- class TuiTextfieldBase {
328
- constructor() {
329
- // TODO: refactor to signal inputs after Angular update
330
- this.focused = signal(null);
331
- this.control = inject(NgControl, { optional: true });
332
- this.a = tuiAppearance(inject(TUI_TEXTFIELD_OPTIONS).appearance, {});
333
- this.s = tuiAppearanceState(null, {});
334
- this.m = tuiAppearanceMode(this.mode, {});
335
- this.f = tuiAppearanceFocus(computed(() => this.focused() ?? this.textfield.focused()), {});
336
- this.el = tuiInjectElement();
337
- this.handlers = inject(TUI_ITEMS_HANDLERS);
338
- this.textfield = inject(TuiTextfieldComponent);
339
- this.readOnly = false;
340
- this.invalid = null;
341
- this.value = tuiValue(this.el);
342
- }
343
- set focusedSetter(focused) {
344
- this.focused.set(focused);
345
- }
346
- set stateSetter(state) {
347
- this.s.set(state);
348
- }
349
- get mode() {
350
- if (this.readOnly) {
351
- return 'readonly';
352
- }
353
- if (this.invalid === false) {
354
- return 'valid';
355
- }
356
- if (this.invalid) {
357
- return 'invalid';
358
- }
359
- return null;
360
- }
361
- // TODO: refactor to signal inputs after Angular update
362
- ngOnChanges() {
363
- this.m.set(this.mode);
364
- }
365
- setValue(value) {
366
- this.el.focus();
367
- this.el.select();
368
- if (value == null) {
369
- this.el.ownerDocument.execCommand('delete');
370
- // see https://github.com/taiga-family/taiga-ui/issues/11634
371
- // ensure non-erasable affixes actually deleted
372
- this.el.value = '';
373
- }
374
- else {
375
- this.el.ownerDocument.execCommand('insertText', false, this.handlers.stringify()(value));
376
- }
377
- }
378
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiTextfieldBase, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
379
- static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.15", type: TuiTextfieldBase, isStandalone: true, inputs: { readOnly: "readOnly", invalid: "invalid", focusedSetter: ["focused", "focusedSetter"], stateSetter: ["state", "stateSetter"] }, host: { attributes: { "tuiTextfield": "" }, listeners: { "input": "0", "focusin": "0", "focusout": "0" }, properties: { "id": "textfield.id", "readOnly": "readOnly", "class._empty": "value() === \"\"" } }, providers: [tuiAsTextfieldAccessor(TuiTextfieldBase)], usesOnChanges: true, ngImport: i0 }); }
380
- }
381
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiTextfieldBase, decorators: [{
382
- type: Directive,
383
- args: [{
384
- standalone: true,
385
- providers: [tuiAsTextfieldAccessor(TuiTextfieldBase)],
386
- host: {
387
- tuiTextfield: '',
388
- '[id]': 'textfield.id',
389
- '[readOnly]': 'readOnly',
390
- '[class._empty]': 'value() === ""',
391
- '(input)': '0',
392
- '(focusin)': '0',
393
- '(focusout)': '0',
394
- },
395
- }]
396
- }], propDecorators: { readOnly: [{
397
- type: Input
398
- }], invalid: [{
399
- type: Input
400
- }], focusedSetter: [{
401
- type: Input,
402
- args: ['focused']
403
- }], stateSetter: [{
404
- type: Input,
405
- args: ['state']
406
- }] } });
407
- class TuiTextfieldDirective extends TuiTextfieldBase {
408
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiTextfieldDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
409
- static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.15", type: TuiTextfieldDirective, isStandalone: true, selector: "input[tuiTextfield]", providers: [
410
- tuiAsTextfieldAccessor(TuiTextfieldDirective),
411
- tuiProvide(TuiTextfieldBase, TuiTextfieldDirective),
412
- ], usesInheritance: true, hostDirectives: [{ directive: i1$1.TuiNativeValidator }, { directive: i2$1.TuiAppearance }], ngImport: i0 }); }
413
- }
414
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiTextfieldDirective, decorators: [{
415
- type: Directive,
416
- args: [{
417
- standalone: true,
418
- selector: 'input[tuiTextfield]',
419
- providers: [
420
- tuiAsTextfieldAccessor(TuiTextfieldDirective),
421
- tuiProvide(TuiTextfieldBase, TuiTextfieldDirective),
422
- ],
423
- hostDirectives: [TuiNativeValidator, TuiAppearance],
424
- }]
425
- }] });
426
- class TuiWithTextfield {
427
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiWithTextfield, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
428
- static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.15", type: TuiWithTextfield, isStandalone: true, hostDirectives: [{ directive: TuiTextfieldDirective, inputs: ["invalid", "invalid", "focused", "focused", "readOnly", "readOnly", "state", "state"] }], ngImport: i0 }); }
429
- }
430
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiWithTextfield, decorators: [{
431
- type: Directive,
432
- args: [{
433
- standalone: true,
434
- hostDirectives: [
435
- {
436
- directive: TuiTextfieldDirective,
437
- inputs: ['invalid', 'focused', 'readOnly', 'state'],
438
- },
439
- ],
440
- }]
441
- }] });
442
-
443
- /**
444
- * @deprecated use {@link TuiSelect} from @taiga-ui/kit instead, drop in v5
445
- */
446
- class TuiSelect extends TuiTextfieldBase {
447
- constructor() {
448
- super(...arguments);
449
- this.nav = inject(WA_NAVIGATOR);
450
- this.doc = inject(DOCUMENT);
451
- this.placeholder = '';
452
- }
453
- setValue(value) {
454
- this.control?.control?.setValue(value);
455
- this.el.dispatchEvent(new Event('input', { bubbles: true }));
456
- }
457
- focus() {
458
- this.el.classList.add('_ios-fix');
459
- this.el.focus();
460
- this.el.classList.remove('_ios-fix');
461
- }
462
- get ariaLabel() {
463
- return this.doc.querySelector(`label[for="${this.el.id}"]`)
464
- ? null
465
- : this.el.getAttribute('aria-label') || this.placeholder;
466
- }
467
- get stringified() {
468
- return this.handlers.stringify()(this.control?.value ?? '');
469
- }
470
- async onCopy() {
471
- await this.nav.clipboard.writeText(this.stringified);
472
- }
473
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiSelect, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
474
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: TuiSelect, isStandalone: true, selector: "select[tuiTextfield]", inputs: { placeholder: "placeholder" }, host: { listeners: { "input": "0", "focusin": "0", "focusout": "0", "keydown.space.prevent": "0", "keydown.enter.prevent": "0", "keydown.backspace": "setValue(\"\")", "mousedown.prevent": "focus()", "keydown.control.c": "onCopy()", "keydown.meta.c": "onCopy()" }, properties: { "id": "textfield.id", "class._empty": "stringified === \"\"", "attr.aria-label": "ariaLabel" } }, providers: [tuiAsTextfieldAccessor(TuiSelect)], usesInheritance: true, hostDirectives: [{ directive: i1$1.TuiNativeValidator }, { directive: i2$1.TuiAppearance }], ngImport: i0, template: "@if (placeholder && !stringified) {\n <option\n disabled\n selected\n value=\"\"\n >\n {{ placeholder }}\n </option>\n} @else {\n @for (item of [stringified]; track item) {\n <option\n selected\n [value]=\"item\"\n >\n {{ item }}\n </option>\n }\n}\n", changeDetection: i0.ChangeDetectionStrategy.Default }); }
475
- }
476
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiSelect, decorators: [{
477
- type: Component,
478
- args: [{ selector: 'select[tuiTextfield]', changeDetection: ChangeDetectionStrategy.Default, providers: [tuiAsTextfieldAccessor(TuiSelect)], hostDirectives: [TuiNativeValidator, TuiAppearance], host: {
479
- '[id]': 'textfield.id',
480
- '[class._empty]': 'stringified === ""',
481
- '[attr.aria-label]': 'ariaLabel',
482
- '(input)': '0',
483
- '(focusin)': '0',
484
- '(focusout)': '0',
485
- '(keydown.space.prevent)': '0',
486
- '(keydown.enter.prevent)': '0',
487
- '(keydown.backspace)': 'setValue("")',
488
- '(mousedown.prevent)': 'focus()',
489
- '(keydown.control.c)': 'onCopy()',
490
- '(keydown.meta.c)': 'onCopy()',
491
- }, template: "@if (placeholder && !stringified) {\n <option\n disabled\n selected\n value=\"\"\n >\n {{ placeholder }}\n </option>\n} @else {\n @for (item of [stringified]; track item) {\n <option\n selected\n [value]=\"item\"\n >\n {{ item }}\n </option>\n }\n}\n" }]
492
- }], propDecorators: { placeholder: [{
493
- type: Input
494
- }] } });
296
+ '(tuiActiveZoneChange)': '!$event && control()?.valueAccessor?.onTouched?.()',
297
+ }, 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"] }]
298
+ }], ctorParameters: () => [] });
495
299
 
496
300
  /*
497
301
  * Internal wrapper for polymorpheus-context
@@ -502,50 +306,51 @@ class TuiTextfieldItemComponent {
502
306
  this.handlers = inject(TUI_ITEMS_HANDLERS);
503
307
  this.context = injectContext();
504
308
  this.textfield = inject(TuiTextfieldMultiComponent);
505
- }
506
- get content() {
507
- return (this.textfield.item ?? this.handlers.stringify()(this.context.$implicit.item));
309
+ this.content = computed(() => this.textfield.item() ??
310
+ this.handlers.stringify()(this.context.$implicit.item));
508
311
  }
509
312
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiTextfieldItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
510
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: TuiTextfieldItemComponent, isStandalone: true, selector: "tui-textfield-item", host: { listeners: { "pointerdown.self.prevent": "0", "keydown.arrowLeft.prevent": "el.previousElementSibling?.firstChild?.focus()", "keydown.arrowRight.prevent": "el.nextElementSibling?.firstChild?.focus()" }, properties: { "class._string": "!textfield.item", "class._disabled": "handlers.disabledItemHandler()(context.$implicit.item)" } }, ngImport: i0, template: '<ng-container *polymorpheusOutlet="content as text; context: context">{{ text }}</ng-container>', isInline: true, styles: [":host{max-inline-size:100%;flex-shrink:0;white-space:nowrap;text-overflow:ellipsis;color:var(--tui-text-primary)}:host._string{overflow:hidden}:host._string._disabled{opacity:var(--tui-disabled-opacity)}:host._string:after{content:\",\\a0\"}:host:last-of-type{max-inline-size:80%}:host-context(tui-textfield:not([data-focus=\"true\"])):last-of-type:after{display:none}:host-context(tui-textfield:has([tuiSelectLike])):last-of-type:after,:host-context(tui-textfield[data-mode~=\"readonly\"]):last-of-type:after{content:\"\\a0\"}\n"], dependencies: [{ kind: "directive", type: PolymorpheusOutlet, selector: "[polymorpheusOutlet]", inputs: ["polymorpheusOutlet", "polymorpheusOutletContext"] }], changeDetection: i0.ChangeDetectionStrategy.Default }); }
313
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: TuiTextfieldItemComponent, isStandalone: true, selector: "tui-textfield-item", host: { listeners: { "pointerdown.self.prevent": "0", "keydown.arrowLeft.prevent": "el.previousElementSibling?.firstChild?.focus()", "keydown.arrowRight.prevent": "el.nextElementSibling?.firstChild?.focus()" }, properties: { "class._string": "!textfield.item()", "class._disabled": "handlers.disabledItemHandler()(context.$implicit.item)" } }, ngImport: i0, template: '<ng-container *polymorpheusOutlet="content() as text; context: context">{{ text }}</ng-container>', isInline: true, styles: [":host{max-inline-size:100%;flex-shrink:0;white-space:nowrap;text-overflow:ellipsis;color:var(--tui-text-primary)}:host._string{overflow:hidden}:host._string._disabled{opacity:var(--tui-disabled-opacity)}:host._string:after{content:\",\\a0\"}:host:last-of-type{max-inline-size:80%}:host-context(tui-textfield:not([data-focus=\"true\"])):last-of-type:after{display:none}:host-context(tui-textfield:has([tuiSelectLike])):last-of-type:after,:host-context(tui-textfield[data-mode~=\"readonly\"]):last-of-type:after{content:\"\\a0\"}\n"], dependencies: [{ kind: "directive", type: PolymorpheusOutlet, selector: "[polymorpheusOutlet]", inputs: ["polymorpheusOutlet", "polymorpheusOutletContext"] }], changeDetection: i0.ChangeDetectionStrategy.Default }); }
511
314
  }
512
315
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiTextfieldItemComponent, decorators: [{
513
316
  type: Component,
514
- args: [{ selector: 'tui-textfield-item', imports: [PolymorpheusOutlet], template: '<ng-container *polymorpheusOutlet="content as text; context: context">{{ text }}</ng-container>', changeDetection: ChangeDetectionStrategy.Default, host: {
515
- '[class._string]': '!textfield.item',
317
+ args: [{ selector: 'tui-textfield-item', imports: [PolymorpheusOutlet], template: '<ng-container *polymorpheusOutlet="content() as text; context: context">{{ text }}</ng-container>', changeDetection: ChangeDetectionStrategy.Default, host: {
318
+ '[class._string]': '!textfield.item()',
516
319
  '[class._disabled]': 'handlers.disabledItemHandler()(context.$implicit.item)',
517
320
  '(pointerdown.self.prevent)': '0',
518
321
  '(keydown.arrowLeft.prevent)': 'el.previousElementSibling?.firstChild?.focus()',
519
322
  '(keydown.arrowRight.prevent)': 'el.nextElementSibling?.firstChild?.focus()',
520
323
  }, styles: [":host{max-inline-size:100%;flex-shrink:0;white-space:nowrap;text-overflow:ellipsis;color:var(--tui-text-primary)}:host._string{overflow:hidden}:host._string._disabled{opacity:var(--tui-disabled-opacity)}:host._string:after{content:\",\\a0\"}:host:last-of-type{max-inline-size:80%}:host-context(tui-textfield:not([data-focus=\"true\"])):last-of-type:after{display:none}:host-context(tui-textfield:has([tuiSelectLike])):last-of-type:after,:host-context(tui-textfield[data-mode~=\"readonly\"]):last-of-type:after{content:\"\\a0\"}\n"] }]
521
324
  }] });
325
+ const TUI_TEXTFIELD_ITEM = new PolymorpheusComponent(TuiTextfieldItemComponent);
522
326
 
523
- class TuiTextfieldMultiComponent extends TuiTextfieldBaseComponent {
327
+ class TuiTextfieldMultiComponent extends TuiTextfieldComponent {
524
328
  constructor() {
525
329
  super(...arguments);
526
330
  this.height = signal(null);
527
331
  this.handlers = inject(TUI_ITEMS_HANDLERS$1);
528
- this.component = new PolymorpheusComponent(TuiTextfieldItemComponent);
332
+ this.component = TUI_TEXTFIELD_ITEM;
529
333
  this.sub = fromEvent(this.el, 'scroll')
530
- .pipe(filter(() => this.rows === 1), tuiZonefree(), takeUntilDestroyed())
334
+ .pipe(filter(() => this.rows() === 1), tuiZonefree(), takeUntilDestroyed())
531
335
  .subscribe(() => {
532
336
  this.el.style.setProperty('--t-scroll', tuiPx(-1 * this.el.scrollLeft));
533
337
  });
534
- this.rows = 100;
338
+ this.cva = contentChild(TuiControl);
339
+ this.item = contentChild(TuiItem, { read: TemplateRef, descendants: true });
340
+ this.rows = input(100);
535
341
  }
536
342
  handleOption(option) {
537
- this.accessor?.setValue(tuiArrayToggle(this.control?.value ?? [], option, this.handlers.identityMatcher()));
343
+ this.accessor()?.setValue(tuiArrayToggle(this.control()?.value ?? [], option, this.handlers.identityMatcher()));
538
344
  }
539
345
  get placeholder() {
540
- const placeholder = this.input?.nativeElement.matches('input')
541
- ? this.input.nativeElement.placeholder
542
- : this.computedFiller();
346
+ const el = this.input()?.nativeElement;
347
+ const placeholder = el?.matches('input') ? el.placeholder : this.computedFiller();
543
348
  const value = this.computedFiller() || this.value();
544
349
  const longer = value.length > placeholder.length ? value : placeholder;
545
350
  return this.focused() ? longer : '';
546
351
  }
547
352
  onItems({ target }) {
548
- const height = this.rows > 1 && this.control?.value?.length
353
+ const height = this.rows() > 1 && this.control()?.value?.length
549
354
  ? (target.querySelector('tui-textfield-item')?.clientHeight ?? 0)
550
355
  : null;
551
356
  if (height !== 0) {
@@ -561,27 +366,27 @@ class TuiTextfieldMultiComponent extends TuiTextfieldBaseComponent {
561
366
  }
562
367
  onClick(target) {
563
368
  if (target === this.el ||
564
- !this.cva?.interactive() ||
369
+ !this.cva()?.interactive() ||
565
370
  (!this.el.matches('[tuiChevron]') &&
566
371
  !this.el.querySelector('select, [tuiInputDateMulti]')) ||
567
372
  target.matches('input:read-only,input[inputmode="none"]')) {
568
373
  return;
569
374
  }
570
- this.open.update((open) => !open);
375
+ this.open.open.update((open) => !open);
571
376
  try {
572
- this.input?.nativeElement.showPicker?.();
377
+ this.input()?.nativeElement.showPicker?.();
573
378
  }
574
379
  catch {
575
380
  // Empty catch block - silently ignore showPicker errors
576
381
  }
577
382
  }
578
383
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiTextfieldMultiComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
579
- 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: [
384
+ 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})" }, properties: { "attr.data-state": "control()?.disabled ? \"disabled\" : null", "class._empty": "!control()?.value?.length", "style.--t-item-height.px": "height()", "style.--t-rows": "rows()" }, classAttribute: "tui-interactive" }, providers: [
580
385
  tuiButtonOptionsProvider({ size: 'xs', appearance: 'icon' }),
581
386
  tuiAsDataListHost(TuiTextfieldMultiComponent),
582
387
  tuiProvide(TuiTextfieldComponent, TuiTextfieldMultiComponent),
583
388
  tuiProvide(TUI_SCROLL_REF, ElementRef),
584
- ], queries: [{ propertyName: "item", first: true, predicate: TuiItem, descendants: true, read: TemplateRef }], usesInheritance: true, hostDirectives: [{ directive: i1.TuiDropdownFixed }, { directive: i1.TuiDropdownDirective }, { directive: i1.TuiWithDropdownOpen }, { directive: TuiWithTextfieldDropdown }, { directive: i3.TuiWithIcons }, { directive: i4$1.TuiWithItemsHandlers }, { directive: i5.TuiWithOptionContent }, { directive: i4$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 }); }
389
+ ], queries: [{ propertyName: "cva", first: true, predicate: TuiControl, descendants: true, isSignal: true }, { propertyName: "item", first: true, predicate: TuiItem, descendants: true, read: TemplateRef, isSignal: true }], usesInheritance: true, hostDirectives: [{ directive: i1$2.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 }); }
585
390
  }
586
391
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiTextfieldMultiComponent, decorators: [{
587
392
  type: Component,
@@ -596,47 +401,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
596
401
  tuiAsDataListHost(TuiTextfieldMultiComponent),
597
402
  tuiProvide(TuiTextfieldComponent, TuiTextfieldMultiComponent),
598
403
  tuiProvide(TUI_SCROLL_REF, ElementRef),
599
- ], hostDirectives: [
600
- TuiDropdownFixed,
601
- TuiDropdownDirective,
602
- TuiWithDropdownOpen,
603
- TuiWithTextfieldDropdown,
604
- TuiWithIcons,
605
- TuiWithItemsHandlers$1,
606
- TuiWithOptionContent,
607
- TuiWithAppearance,
608
- ], host: {
404
+ ], hostDirectives: [TuiWithAppearance], host: {
609
405
  class: 'tui-interactive',
610
- '[attr.data-state]': 'control?.disabled ? "disabled" : null',
611
- '[class._empty]': '!control?.value?.length',
406
+ '[attr.data-state]': 'control()?.disabled ? "disabled" : null',
407
+ '[class._empty]': '!control()?.value?.length',
612
408
  '[style.--t-item-height.px]': 'height()',
613
- '[style.--t-rows]': 'rows',
409
+ '[style.--t-rows]': 'rows()',
614
410
  '(click.prevent)': 'onClick($event.target)',
615
- '(tuiActiveZoneChange)': '!$event && (el.scrollTo({left: 0}) || cva?.onTouched())',
616
- // TODO: Remove in v5
617
- '[attr.data-size]': 'options.size()',
618
- '[class._with-label]': 'hasLabel',
619
- '[class._with-template]': 'content && control?.value != null',
620
- '[class._disabled]': 'input?.nativeElement?.disabled',
621
- '(pointerdown.self.prevent)': 'onIconClick()',
622
- '(scroll.capture.zoneless)': 'onScroll($event.target)',
623
- }, 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"] }]
624
- }], propDecorators: { item: [{
625
- type: ContentChild,
626
- args: [TuiItem, { read: TemplateRef, descendants: true }]
627
- }], rows: [{
628
- type: Input
629
- }] } });
411
+ '(tuiActiveZoneChange)': '!$event && el.scrollTo({left: 0})',
412
+ }, 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"] }]
413
+ }] });
630
414
 
631
415
  const TuiTextfield = [
632
416
  TuiItem,
633
417
  TuiLabel,
634
- TuiSelect,
635
418
  TuiTextfieldComponent,
636
419
  TuiTextfieldDirective,
637
420
  TuiTextfieldOptionsDirective,
638
- TuiTextfieldDropdownDirective,
639
421
  TuiTextfieldMultiComponent,
422
+ TuiDropdownContent,
640
423
  ];
641
424
 
642
425
  function tuiInjectAuxiliary(predicate) {
@@ -646,7 +429,9 @@ function tuiInjectAuxiliary(predicate) {
646
429
 
647
430
  class TuiTextfieldContent {
648
431
  constructor() {
649
- this.ref = inject(TuiTextfieldComponent).vcr?.createEmbeddedView(inject(TemplateRef));
432
+ this.ref = inject(TuiTextfieldComponent)
433
+ .vcr()
434
+ ?.createEmbeddedView(inject(TemplateRef));
650
435
  }
651
436
  ngDoCheck() {
652
437
  this.ref?.detectChanges();
@@ -660,7 +445,6 @@ class TuiTextfieldContent {
660
445
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiTextfieldContent, decorators: [{
661
446
  type: Directive,
662
447
  args: [{
663
- standalone: true,
664
448
  selector: 'ng-template[tuiTextfieldContent]',
665
449
  }]
666
450
  }] });
@@ -687,13 +471,12 @@ class TuiWithNativePicker {
687
471
  static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.15", type: TuiWithNativePicker, isStandalone: true, ngImport: i0 }); }
688
472
  }
689
473
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiWithNativePicker, decorators: [{
690
- type: Directive,
691
- args: [{ standalone: true }]
474
+ type: Directive
692
475
  }], ctorParameters: () => [] });
693
476
 
694
477
  /**
695
478
  * Generated bundle index. Do not edit.
696
479
  */
697
480
 
698
- export { TUI_TEXTFIELD_ACCESSOR, TUI_TEXTFIELD_OPTIONS, TuiSelect, TuiSelectLike, TuiTextfield, TuiTextfieldBase, TuiTextfieldBaseComponent, TuiTextfieldComponent, TuiTextfieldContent, TuiTextfieldDirective, TuiTextfieldDropdownDirective, TuiTextfieldItemComponent, TuiTextfieldMultiComponent, TuiTextfieldOptionsDirective, TuiWithNativePicker, TuiWithTextfield, TuiWithTextfieldDropdown, tuiAsTextfieldAccessor, tuiInjectAuxiliary, tuiTextfieldIcon, tuiTextfieldOptionsProvider };
481
+ export { TUI_TEXTFIELD_ACCESSOR, TUI_TEXTFIELD_ITEM, TUI_TEXTFIELD_OPTIONS, TuiSelectLike, TuiTextfield, TuiTextfieldComponent, TuiTextfieldContent, TuiTextfieldDirective, TuiTextfieldItemComponent, TuiTextfieldMultiComponent, TuiTextfieldOptionsDirective, TuiWithNativePicker, TuiWithTextfield, tuiAsTextfieldAccessor, tuiInjectAuxiliary, tuiTextfieldIcon, tuiTextfieldOptionsProvider };
699
482
  //# sourceMappingURL=taiga-ui-core-components-textfield.mjs.map