@taiga-ui/core 3.36.2 → 3.37.0-dev.main.89945b8

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 (65) hide show
  1. package/bundles/taiga-ui-core-components-alert.umd.js +1 -1
  2. package/bundles/taiga-ui-core-components-alert.umd.js.map +1 -1
  3. package/bundles/taiga-ui-core-components-button.umd.js +1 -1
  4. package/bundles/taiga-ui-core-components-button.umd.js.map +1 -1
  5. package/bundles/taiga-ui-core-components-notification.umd.js +21 -21
  6. package/bundles/taiga-ui-core-components-notification.umd.js.map +1 -1
  7. package/bundles/taiga-ui-core-components-primitive-textfield.umd.js +10 -6
  8. package/bundles/taiga-ui-core-components-primitive-textfield.umd.js.map +1 -1
  9. package/bundles/taiga-ui-core-components-root.umd.js +1 -1
  10. package/bundles/taiga-ui-core-components-scroll-controls.umd.js +1 -1
  11. package/bundles/taiga-ui-core-components-scroll-controls.umd.js.map +1 -1
  12. package/bundles/taiga-ui-core-constants.umd.js +9 -0
  13. package/bundles/taiga-ui-core-constants.umd.js.map +1 -1
  14. package/bundles/taiga-ui-core-directives-dropdown.umd.js +1 -1
  15. package/bundles/taiga-ui-core-directives-hint.umd.js +1 -1
  16. package/bundles/taiga-ui-core-tokens.umd.js +8 -4
  17. package/bundles/taiga-ui-core-tokens.umd.js.map +1 -1
  18. package/bundles/taiga-ui-core-utils-miscellaneous.umd.js +7 -5
  19. package/bundles/taiga-ui-core-utils-miscellaneous.umd.js.map +1 -1
  20. package/components/notification/notification.component.d.ts +9 -8
  21. package/components/notification/notification.module.d.ts +2 -1
  22. package/components/primitive-textfield/primitive-textfield.component.d.ts +1 -0
  23. package/constants/cache-basting-payload.d.ts +1 -1
  24. package/constants/index.d.ts +1 -0
  25. package/constants/notification-status-icons.d.ts +7 -0
  26. package/esm2015/components/alert/alert.component.js +2 -2
  27. package/esm2015/components/button/button.component.js +1 -1
  28. package/esm2015/components/notification/notification.component.js +17 -16
  29. package/esm2015/components/notification/notification.module.js +5 -4
  30. package/esm2015/components/primitive-textfield/primitive-textfield.component.js +9 -6
  31. package/esm2015/components/primitive-textfield/textfield/textfield.component.js +1 -1
  32. package/esm2015/components/root/root.component.js +1 -1
  33. package/esm2015/components/scroll-controls/scroll-controls.component.js +2 -2
  34. package/esm2015/constants/index.js +2 -1
  35. package/esm2015/constants/notification-status-icons.js +8 -0
  36. package/esm2015/directives/dropdown/dropdown.component.js +1 -1
  37. package/esm2015/directives/hint/hint.component.js +1 -1
  38. package/esm2015/interfaces/alert-options.js +1 -1
  39. package/esm2015/tokens/notification-options.js +3 -1
  40. package/esm2015/utils/miscellaneous/get-border.js +7 -6
  41. package/fesm2015/taiga-ui-core-components-alert.js +1 -1
  42. package/fesm2015/taiga-ui-core-components-alert.js.map +1 -1
  43. package/fesm2015/taiga-ui-core-components-button.js +1 -1
  44. package/fesm2015/taiga-ui-core-components-button.js.map +1 -1
  45. package/fesm2015/taiga-ui-core-components-notification.js +21 -19
  46. package/fesm2015/taiga-ui-core-components-notification.js.map +1 -1
  47. package/fesm2015/taiga-ui-core-components-primitive-textfield.js +10 -7
  48. package/fesm2015/taiga-ui-core-components-primitive-textfield.js.map +1 -1
  49. package/fesm2015/taiga-ui-core-components-root.js +1 -1
  50. package/fesm2015/taiga-ui-core-components-scroll-controls.js +1 -1
  51. package/fesm2015/taiga-ui-core-components-scroll-controls.js.map +1 -1
  52. package/fesm2015/taiga-ui-core-constants.js +9 -1
  53. package/fesm2015/taiga-ui-core-constants.js.map +1 -1
  54. package/fesm2015/taiga-ui-core-directives-dropdown.js +1 -1
  55. package/fesm2015/taiga-ui-core-directives-hint.js +1 -1
  56. package/fesm2015/taiga-ui-core-tokens.js +2 -1
  57. package/fesm2015/taiga-ui-core-tokens.js.map +1 -1
  58. package/fesm2015/taiga-ui-core-utils-miscellaneous.js +6 -5
  59. package/fesm2015/taiga-ui-core-utils-miscellaneous.js.map +1 -1
  60. package/interfaces/alert-options.d.ts +2 -2
  61. package/package.json +4 -4
  62. package/styles/mixins/textfield.less +46 -34
  63. package/styles/mixins/textfield.scss +85 -36
  64. package/tokens/notification-options.d.ts +6 -0
  65. package/utils/miscellaneous/get-border.d.ts +2 -1
@@ -1,8 +1,8 @@
1
1
  (function (global, factory) {
2
- typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@taiga-ui/cdk'), require('@taiga-ui/core/tokens'), require('@taiga-ui/core/components/svg'), require('@taiga-ui/core/components/button'), require('@angular/common'), require('rxjs')) :
3
- typeof define === 'function' && define.amd ? define('@taiga-ui/core/components/notification', ['exports', '@angular/core', '@taiga-ui/cdk', '@taiga-ui/core/tokens', '@taiga-ui/core/components/svg', '@taiga-ui/core/components/button', '@angular/common', 'rxjs'], factory) :
4
- (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global["taiga-ui"] = global["taiga-ui"] || {}, global["taiga-ui"].core = global["taiga-ui"].core || {}, global["taiga-ui"].core.components = global["taiga-ui"].core.components || {}, global["taiga-ui"].core.components.notification = {}), global.ng.core, global.cdk, global["taiga-ui"].core.tokens, global["taiga-ui"].core.components.svg, global["taiga-ui"].core.components.button, global.ng.common, global.rxjs));
5
- })(this, (function (exports, i0, cdk, tokens, i1, i2, i3, i4) { 'use strict';
2
+ typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@taiga-ui/cdk'), require('@taiga-ui/core/tokens'), require('@taiga-ui/core/components/svg'), require('@taiga-ui/core/components/button'), require('@angular/common'), require('@tinkoff/ng-polymorpheus'), require('rxjs')) :
3
+ typeof define === 'function' && define.amd ? define('@taiga-ui/core/components/notification', ['exports', '@angular/core', '@taiga-ui/cdk', '@taiga-ui/core/tokens', '@taiga-ui/core/components/svg', '@taiga-ui/core/components/button', '@angular/common', '@tinkoff/ng-polymorpheus', 'rxjs'], factory) :
4
+ (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global["taiga-ui"] = global["taiga-ui"] || {}, global["taiga-ui"].core = global["taiga-ui"].core || {}, global["taiga-ui"].core.components = global["taiga-ui"].core.components || {}, global["taiga-ui"].core.components.notification = {}), global.ng.core, global.cdk, global["taiga-ui"].core.tokens, global["taiga-ui"].core.components.svg, global["taiga-ui"].core.components.button, global.ng.common, global.i4, global.rxjs));
5
+ })(this, (function (exports, i0, cdk, tokens, i1, i2, i3, i4, i5) { 'use strict';
6
6
 
7
7
  function _interopNamespace(e) {
8
8
  if (e && e.__esModule) return e;
@@ -27,25 +27,24 @@
27
27
  var i2__namespace = /*#__PURE__*/_interopNamespace(i2);
28
28
  var i3__namespace = /*#__PURE__*/_interopNamespace(i3);
29
29
  var i4__namespace = /*#__PURE__*/_interopNamespace(i4);
30
+ var i5__namespace = /*#__PURE__*/_interopNamespace(i5);
30
31
 
31
- var STATUS_ICON = {
32
- info: 'tuiIconInfo',
33
- success: 'tuiIconCheckCircle',
34
- error: 'tuiIconXCircle',
35
- warning: 'tuiIconAlertCircle',
36
- };
37
32
  var TuiNotificationComponent = /** @class */ (function () {
38
33
  function TuiNotificationComponent(closeWord$, options) {
39
34
  this.closeWord$ = closeWord$;
40
35
  this.options = options;
36
+ /**
37
+ * @deprecated Use {@link TuiNotificationComponent.icon} input or TUI_NOTIFICATION_OPTIONS instead
38
+ */
41
39
  this.hasIcon = this.options.hasIcon;
40
+ this.icon = this.options.icon;
42
41
  this.status = this.options.status;
43
42
  this.hideClose = false;
44
43
  this.close = new i0.EventEmitter();
45
44
  }
46
- Object.defineProperty(TuiNotificationComponent.prototype, "icon", {
45
+ Object.defineProperty(TuiNotificationComponent.prototype, "isIconExists", {
47
46
  get: function () {
48
- return STATUS_ICON[this.status];
47
+ return cdk.tuiIsPresent(this.icon) && this.hasIcon;
49
48
  },
50
49
  enumerable: false,
51
50
  configurable: true
@@ -60,7 +59,7 @@
60
59
  return TuiNotificationComponent;
61
60
  }());
62
61
  TuiNotificationComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TuiNotificationComponent, deps: [{ token: tokens.TUI_CLOSE_WORD }, { token: tokens.TUI_NOTIFICATION_OPTIONS }], target: i0__namespace.ɵɵFactoryTarget.Component });
63
- TuiNotificationComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: TuiNotificationComponent, selector: "tui-notification", inputs: { hasIcon: "hasIcon", status: "status", hideClose: "hideClose" }, outputs: { close: "close" }, host: { properties: { "class._has-icon": "this.hasIcon", "attr.data-status": "this.status", "class._has-close-button": "this.hasClose" } }, ngImport: i0__namespace, template: "<tui-svg\n *ngIf=\"hasIcon\"\n automation-id=\"tui-notification__icon\"\n class=\"t-icon\"\n [src]=\"icon\"\n></tui-svg>\n<div class=\"t-content\">\n <ng-content></ng-content>\n</div>\n<button\n *ngIf=\"hasClose\"\n tuiIconButton\n type=\"button\"\n automation-id=\"tui-notification__close\"\n size=\"xs\"\n icon=\"tuiIconCloseLarge\"\n appearance=\"icon\"\n class=\"t-close\"\n [title]=\"closeWord$ | async\"\n (click)=\"close.emit()\"\n></button>\n", styles: [":host{font:var(--tui-font-text-s);color:var(--tui-text-01);position:relative;display:block;padding:.75rem 1rem;border-radius:var(--tui-radius-m);background:#fff;background:var(--tui-base-01);box-sizing:border-box;overflow:hidden}:host:after{position:absolute;top:0;left:0;width:100%;height:100%;content:\"\";pointer-events:none}:host._has-close-button{padding-right:2rem}:host._has-icon{padding-left:2.75rem}:host[data-status=info]{color:var(--tui-info-fill);background:linear-gradient(var(--tui-info-bg),var(--tui-info-bg)),var(--tui-base-01)}:host[data-status=success]{color:var(--tui-success-fill);background:linear-gradient(var(--tui-success-bg),var(--tui-success-bg)),var(--tui-base-01)}:host[data-status=error]{color:var(--tui-error-fill);background:linear-gradient(var(--tui-error-bg),var(--tui-error-bg)),var(--tui-base-01)}:host[data-status=warning]{color:var(--tui-warning-fill);background:linear-gradient(var(--tui-warning-bg),var(--tui-warning-bg)),var(--tui-base-01)}.t-content{word-wrap:break-word;color:var(--tui-text-01)}.t-icon{position:absolute;top:0;left:1rem;display:flex;width:1rem;height:100%;max-height:3rem;align-items:center}.t-close{position:absolute;top:.625rem;right:.5rem}\n"], components: [{ type: i1__namespace.TuiSvgComponent, selector: "tui-svg", inputs: ["src"] }, { type: i2__namespace.TuiButtonComponent, selector: "button[tuiButton], button[tuiIconButton], a[tuiButton], a[tuiIconButton]", inputs: ["appearance", "disabled", "icon", "iconRight", "shape", "showLoader", "size"] }], directives: [{ type: i3__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "async": i3__namespace.AsyncPipe }, changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
62
+ TuiNotificationComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: TuiNotificationComponent, selector: "tui-notification", inputs: { hasIcon: "hasIcon", icon: "icon", status: "status", hideClose: "hideClose" }, outputs: { close: "close" }, host: { properties: { "attr.data-status": "this.status", "class._has-icon": "this.isIconExists", "class._has-close-button": "this.hasClose" } }, ngImport: i0__namespace, template: "<ng-container *ngIf=\"isIconExists\">\n <!-- FIX: types of status input -->\n <tui-svg\n *polymorpheusOutlet=\"icon as iconName; context: {$implicit: $any(status)}\"\n automation-id=\"tui-notification__icon\"\n class=\"t-icon\"\n [src]=\"iconName\"\n ></tui-svg>\n</ng-container>\n\n<div class=\"t-content\">\n <ng-content></ng-content>\n</div>\n<button\n *ngIf=\"hasClose\"\n appearance=\"icon\"\n automation-id=\"tui-notification__close\"\n icon=\"tuiIconCloseLarge\"\n size=\"xs\"\n tuiIconButton\n type=\"button\"\n class=\"t-close\"\n [title]=\"closeWord$ | async\"\n (click)=\"close.emit()\"\n></button>\n", styles: [":host{font:var(--tui-font-text-s);color:var(--tui-text-01);position:relative;display:block;padding:.75rem 1rem;border-radius:var(--tui-radius-m);background:#fff;background:var(--tui-base-01);box-sizing:border-box;overflow:hidden}:host:after{position:absolute;top:0;left:0;width:100%;height:100%;content:\"\";pointer-events:none}:host._has-close-button{padding-right:2rem}:host._has-icon{padding-left:2.75rem}:host[data-status=info]{color:var(--tui-info-fill);background:linear-gradient(var(--tui-info-bg),var(--tui-info-bg)),var(--tui-base-01)}:host[data-status=success]{color:var(--tui-success-fill);background:linear-gradient(var(--tui-success-bg),var(--tui-success-bg)),var(--tui-base-01)}:host[data-status=error]{color:var(--tui-error-fill);background:linear-gradient(var(--tui-error-bg),var(--tui-error-bg)),var(--tui-base-01)}:host[data-status=warning]{color:var(--tui-warning-fill);background:linear-gradient(var(--tui-warning-bg),var(--tui-warning-bg)),var(--tui-base-01)}.t-content{word-wrap:break-word;color:var(--tui-text-01)}.t-icon{position:absolute;top:0;left:1rem;display:flex;width:1rem;height:100%;max-height:3rem;align-items:center}.t-close{position:absolute;top:.625rem;right:.5rem}\n"], components: [{ type: i1__namespace.TuiSvgComponent, selector: "tui-svg", inputs: ["src"] }, { type: i2__namespace.TuiButtonComponent, selector: "button[tuiButton], button[tuiIconButton], a[tuiButton], a[tuiIconButton]", inputs: ["appearance", "disabled", "icon", "iconRight", "shape", "showLoader", "size"] }], directives: [{ type: i3__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4__namespace.PolymorpheusOutletDirective, selector: "[polymorpheusOutlet]", inputs: ["polymorpheusOutlet", "polymorpheusOutletContext"] }], pipes: { "async": i3__namespace.AsyncPipe }, changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
64
63
  i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TuiNotificationComponent, decorators: [{
65
64
  type: i0.Component,
66
65
  args: [{
@@ -70,7 +69,7 @@
70
69
  changeDetection: i0.ChangeDetectionStrategy.OnPush,
71
70
  }]
72
71
  }], ctorParameters: function () {
73
- return [{ type: i4__namespace.Observable, decorators: [{
72
+ return [{ type: i5__namespace.Observable, decorators: [{
74
73
  type: i0.Inject,
75
74
  args: [tokens.TUI_CLOSE_WORD]
76
75
  }] }, { type: undefined, decorators: [{
@@ -79,9 +78,8 @@
79
78
  }] }];
80
79
  }, propDecorators: { hasIcon: [{
81
80
  type: i0.Input
82
- }, {
83
- type: i0.HostBinding,
84
- args: ['class._has-icon']
81
+ }], icon: [{
82
+ type: i0.Input
85
83
  }], status: [{
86
84
  type: i0.Input
87
85
  }, {
@@ -91,6 +89,9 @@
91
89
  type: i0.Input
92
90
  }], close: [{
93
91
  type: i0.Output
92
+ }], isIconExists: [{
93
+ type: i0.HostBinding,
94
+ args: ['class._has-icon']
94
95
  }], hasClose: [{
95
96
  type: i0.HostBinding,
96
97
  args: ['class._has-close-button']
@@ -102,12 +103,12 @@
102
103
  return TuiNotificationModule;
103
104
  }());
104
105
  TuiNotificationModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TuiNotificationModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
105
- TuiNotificationModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TuiNotificationModule, declarations: [TuiNotificationComponent], imports: [i3.CommonModule, i1.TuiSvgModule, i2.TuiButtonModule], exports: [TuiNotificationComponent] });
106
- TuiNotificationModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TuiNotificationModule, imports: [[i3.CommonModule, i1.TuiSvgModule, i2.TuiButtonModule]] });
106
+ TuiNotificationModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TuiNotificationModule, declarations: [TuiNotificationComponent], imports: [i3.CommonModule, i1.TuiSvgModule, i2.TuiButtonModule, i4.PolymorpheusModule], exports: [TuiNotificationComponent] });
107
+ TuiNotificationModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TuiNotificationModule, imports: [[i3.CommonModule, i1.TuiSvgModule, i2.TuiButtonModule, i4.PolymorpheusModule]] });
107
108
  i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TuiNotificationModule, decorators: [{
108
109
  type: i0.NgModule,
109
110
  args: [{
110
- imports: [i3.CommonModule, i1.TuiSvgModule, i2.TuiButtonModule],
111
+ imports: [i3.CommonModule, i1.TuiSvgModule, i2.TuiButtonModule, i4.PolymorpheusModule],
111
112
  declarations: [TuiNotificationComponent],
112
113
  exports: [TuiNotificationComponent],
113
114
  }]
@@ -117,7 +118,6 @@
117
118
  * Generated bundle index. Do not edit.
118
119
  */
119
120
 
120
- exports.STATUS_ICON = STATUS_ICON;
121
121
  exports.TuiNotificationComponent = TuiNotificationComponent;
122
122
  exports.TuiNotificationModule = TuiNotificationModule;
123
123
 
@@ -1 +1 @@
1
- {"version":3,"file":"taiga-ui-core-components-notification.umd.js","sources":["../../../projects/core/components/notification/notification.component.ts","../../../projects/core/components/notification/notification.template.html","../../../projects/core/components/notification/notification.module.ts","../../../projects/core/components/notification/taiga-ui-core-components-notification.ts"],"sourcesContent":["import {\n ChangeDetectionStrategy,\n Component,\n EventEmitter,\n HostBinding,\n Inject,\n Input,\n Output,\n} from '@angular/core';\nimport {tuiIsObserved} from '@taiga-ui/cdk';\nimport {\n TUI_CLOSE_WORD,\n TUI_NOTIFICATION_OPTIONS,\n TuiNotificationDefaultOptions,\n} from '@taiga-ui/core/tokens';\nimport {Observable} from 'rxjs';\n\nexport const STATUS_ICON = {\n info: 'tuiIconInfo',\n success: 'tuiIconCheckCircle',\n error: 'tuiIconXCircle',\n warning: 'tuiIconAlertCircle',\n} as const;\n\n@Component({\n selector: 'tui-notification',\n templateUrl: './notification.template.html',\n styleUrls: ['./notification.style.less'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class TuiNotificationComponent {\n @Input()\n @HostBinding('class._has-icon')\n hasIcon = this.options.hasIcon;\n\n @Input()\n @HostBinding('attr.data-status')\n status: 'error' | 'info' | 'success' | 'warning' = this.options.status;\n\n @Input()\n hideClose = false;\n\n @Output()\n // eslint-disable-next-line @angular-eslint/no-output-native\n readonly close = new EventEmitter<void>();\n\n constructor(\n @Inject(TUI_CLOSE_WORD) readonly closeWord$: Observable<string>,\n @Inject(TUI_NOTIFICATION_OPTIONS)\n readonly options: TuiNotificationDefaultOptions,\n ) {}\n\n get icon(): string {\n return STATUS_ICON[this.status];\n }\n\n @HostBinding('class._has-close-button')\n get hasClose(): boolean {\n return !this.hideClose && tuiIsObserved(this.close);\n }\n}\n","<tui-svg\n *ngIf=\"hasIcon\"\n automation-id=\"tui-notification__icon\"\n class=\"t-icon\"\n [src]=\"icon\"\n></tui-svg>\n<div class=\"t-content\">\n <ng-content></ng-content>\n</div>\n<button\n *ngIf=\"hasClose\"\n tuiIconButton\n type=\"button\"\n automation-id=\"tui-notification__close\"\n size=\"xs\"\n icon=\"tuiIconCloseLarge\"\n appearance=\"icon\"\n class=\"t-close\"\n [title]=\"closeWord$ | async\"\n (click)=\"close.emit()\"\n></button>\n","import {CommonModule} from '@angular/common';\nimport {NgModule} from '@angular/core';\nimport {TuiButtonModule} from '@taiga-ui/core/components/button';\nimport {TuiSvgModule} from '@taiga-ui/core/components/svg';\n\nimport {TuiNotificationComponent} from './notification.component';\n\n@NgModule({\n imports: [CommonModule, TuiSvgModule, TuiButtonModule],\n declarations: [TuiNotificationComponent],\n exports: [TuiNotificationComponent],\n})\nexport class TuiNotificationModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":["EventEmitter","tuiIsObserved","TUI_CLOSE_WORD","TUI_NOTIFICATION_OPTIONS","i0","i1","i2","i3","Component","ChangeDetectionStrategy","Inject","Input","HostBinding","Output","CommonModule","TuiSvgModule","TuiButtonModule","NgModule"],"mappings":"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"}
1
+ {"version":3,"file":"taiga-ui-core-components-notification.umd.js","sources":["../../../projects/core/components/notification/notification.component.ts","../../../projects/core/components/notification/notification.template.html","../../../projects/core/components/notification/notification.module.ts","../../../projects/core/components/notification/taiga-ui-core-components-notification.ts"],"sourcesContent":["import {\n ChangeDetectionStrategy,\n Component,\n EventEmitter,\n HostBinding,\n Inject,\n Input,\n Output,\n} from '@angular/core';\nimport {TuiContextWithImplicit, tuiIsObserved, tuiIsPresent} from '@taiga-ui/cdk';\nimport {TuiNotification} from '@taiga-ui/core/enums';\nimport {\n TUI_CLOSE_WORD,\n TUI_NOTIFICATION_OPTIONS,\n TuiNotificationDefaultOptions,\n} from '@taiga-ui/core/tokens';\nimport {PolymorpheusContent} from '@tinkoff/ng-polymorpheus';\nimport {Observable} from 'rxjs';\n\n@Component({\n selector: 'tui-notification',\n templateUrl: './notification.template.html',\n styleUrls: ['./notification.style.less'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class TuiNotificationComponent {\n /**\n * @deprecated Use {@link TuiNotificationComponent.icon} input or TUI_NOTIFICATION_OPTIONS instead\n */\n @Input()\n hasIcon = this.options.hasIcon;\n\n @Input()\n icon: PolymorpheusContent<TuiContextWithImplicit<TuiNotification>> | null =\n this.options.icon;\n\n @Input()\n @HostBinding('attr.data-status')\n status: 'error' | 'info' | 'success' | 'warning' = this.options.status;\n\n @Input()\n hideClose = false;\n\n @Output()\n // eslint-disable-next-line @angular-eslint/no-output-native\n readonly close = new EventEmitter<void>();\n\n constructor(\n @Inject(TUI_CLOSE_WORD) readonly closeWord$: Observable<string>,\n @Inject(TUI_NOTIFICATION_OPTIONS)\n readonly options: TuiNotificationDefaultOptions,\n ) {}\n\n @HostBinding('class._has-icon')\n get isIconExists(): boolean {\n return tuiIsPresent(this.icon) && this.hasIcon;\n }\n\n @HostBinding('class._has-close-button')\n get hasClose(): boolean {\n return !this.hideClose && tuiIsObserved(this.close);\n }\n}\n","<ng-container *ngIf=\"isIconExists\">\n <!-- FIX: types of status input -->\n <tui-svg\n *polymorpheusOutlet=\"icon as iconName; context: {$implicit: $any(status)}\"\n automation-id=\"tui-notification__icon\"\n class=\"t-icon\"\n [src]=\"iconName\"\n ></tui-svg>\n</ng-container>\n\n<div class=\"t-content\">\n <ng-content></ng-content>\n</div>\n<button\n *ngIf=\"hasClose\"\n appearance=\"icon\"\n automation-id=\"tui-notification__close\"\n icon=\"tuiIconCloseLarge\"\n size=\"xs\"\n tuiIconButton\n type=\"button\"\n class=\"t-close\"\n [title]=\"closeWord$ | async\"\n (click)=\"close.emit()\"\n></button>\n","import {CommonModule} from '@angular/common';\nimport {NgModule} from '@angular/core';\nimport {TuiButtonModule} from '@taiga-ui/core/components/button';\nimport {TuiSvgModule} from '@taiga-ui/core/components/svg';\nimport {PolymorpheusModule} from '@tinkoff/ng-polymorpheus';\n\nimport {TuiNotificationComponent} from './notification.component';\n\n@NgModule({\n imports: [CommonModule, TuiSvgModule, TuiButtonModule, PolymorpheusModule],\n declarations: [TuiNotificationComponent],\n exports: [TuiNotificationComponent],\n})\nexport class TuiNotificationModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":["EventEmitter","tuiIsPresent","tuiIsObserved","TUI_CLOSE_WORD","TUI_NOTIFICATION_OPTIONS","i0","i1","i2","i3","i4","Component","ChangeDetectionStrategy","Inject","Input","HostBinding","Output","CommonModule","TuiSvgModule","TuiButtonModule","PolymorpheusModule","NgModule"],"mappings":"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"}
@@ -473,8 +473,11 @@
473
473
  args: ['animationstart']
474
474
  }] } });
475
475
 
476
- var ICON_PADDING_L = 1.75;
477
- var ICON_PADDING = 1.625;
476
+ var TUI_ICON_PADDINGS = {
477
+ s: 1.25,
478
+ m: 1.75,
479
+ l: 2.25,
480
+ };
478
481
  var TuiPrimitiveTextfieldComponent = /** @class */ (function (_super) {
479
482
  __extends(TuiPrimitiveTextfieldComponent, _super);
480
483
  function TuiPrimitiveTextfieldComponent(controller, hintOptions, options, el) {
@@ -641,7 +644,7 @@
641
644
  });
642
645
  Object.defineProperty(TuiPrimitiveTextfieldComponent.prototype, "borderEnd", {
643
646
  get: function () {
644
- return miscellaneous.tuiGetBorder(!!this.iconContent, this.hasCleaner, this.hasTooltip, this.hasCustomContent);
647
+ return miscellaneous.tuiGetBorder(!!this.iconContent, this.hasCleaner, this.hasTooltip, this.hasCustomContent, this.size);
645
648
  },
646
649
  enumerable: false,
647
650
  configurable: true
@@ -716,7 +719,7 @@
716
719
  };
717
720
  Object.defineProperty(TuiPrimitiveTextfieldComponent.prototype, "iconPaddingLeft", {
718
721
  get: function () {
719
- return this.size === 'l' ? ICON_PADDING_L : ICON_PADDING;
722
+ return TUI_ICON_PADDINGS[this.size];
720
723
  },
721
724
  enumerable: false,
722
725
  configurable: true
@@ -744,7 +747,7 @@
744
747
  TuiPrimitiveTextfieldComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: TuiPrimitiveTextfieldComponent, selector: "tui-primitive-textfield", inputs: { editable: "editable", textfieldFiller: ["filler", "textfieldFiller"], iconCleaner: "iconCleaner", readOnly: "readOnly", invalid: "invalid", disabled: "disabled", textfieldPrefix: ["prefix", "textfieldPrefix"], textfieldPostfix: ["postfix", "textfieldPostfix"], value: "value" }, outputs: { valueChange: "valueChange" }, host: { listeners: { "focusin": "onFocused(true)", "focusout": "onFocused(false)" }, properties: { "class._autofilled": "autofilled", "class._label-outside": "controller.labelOutside", "class._readonly": "this.readOnly", "attr.data-size": "this.size", "class._invalid": "this.computedInvalid", "class._hidden": "this.inputHidden", "style.--border-start.rem": "this.borderStart", "style.--border-end.rem": "this.borderEnd" } }, providers: [
745
748
  i6.tuiAsFocusableItemAccessor(TuiPrimitiveTextfieldComponent),
746
749
  i10.TEXTFIELD_CONTROLLER_PROVIDER,
747
- ], queries: [{ propertyName: "content", predicate: i9.PolymorpheusOutletDirective, descendants: true }], viewQueries: [{ propertyName: "focusableElement", first: true, predicate: ["focusableElement"], descendants: true }], usesInheritance: true, ngImport: i0__namespace, template: "<ng-container *ngIf=\"content?.changes | async\"></ng-container>\n<ng-container *ngIf=\"hintOptions?.change$ | async\"></ng-container>\n<div\n tuiWrapper\n automation-id=\"tui-primitive-textfield__wrapper\"\n [appearance]=\"appearance\"\n [readOnly]=\"readOnly\"\n [disabled]=\"disabled\"\n [focus]=\"computedFocused\"\n [hover]=\"pseudoHover\"\n [active]=\"pseudoActive\"\n [invalid]=\"computedInvalid\"\n [style.--text-indent.px]=\"decor.pre$ | async\"\n (mousedown)=\"onMouseDown($event)\"\n (click.prevent.silent)=\"(0)\"\n (tuiAutofilledChange)=\"onAutofilled($event)\"\n>\n <ng-content select=\"input\"></ng-content>\n <ng-content select=\"select\"></ng-content>\n <input\n #focusableElement\n tuiMaskAccessor\n automation-id=\"tui-primitive-textfield__native-input\"\n class=\"t-input\"\n [disabled]=\"computedDisabled\"\n [attr.name]=\"name\"\n [attr.aria-invalid]=\"computedInvalid\"\n [id]=\"id\"\n [readOnly]=\"readOnly || !editable\"\n [tuiFocusable]=\"computedFocusable\"\n [ngModel]=\"value\"\n (ngModelChange)=\"onModelChange($event)\"\n />\n <div\n *ngIf=\"inputHidden\"\n automation-id=\"tui-primitive-textfield__value\"\n class=\"t-input t-input_template\"\n >\n <ng-content select=\"tuiContent\"></ng-content>\n </div>\n <div class=\"t-content\">\n <div\n *ngIf=\"iconLeftContent\"\n class=\"t-icon t-icon_left t-textfield-icon\"\n >\n <tui-svg\n *polymorpheusOutlet=\"iconLeftContent as src; context: {$implicit: size}\"\n tuiWrapper\n appearance=\"icon\"\n [src]=\"src\"\n ></tui-svg>\n </div>\n <div class=\"t-wrapper\">\n <label\n *ngIf=\"hasPlaceholder\"\n automation-id=\"tui-primitive-textfield__placeholder\"\n class=\"t-placeholder\"\n [class.t-placeholder_raised]=\"placeholderRaised\"\n [for]=\"computedId\"\n >\n <ng-content></ng-content>\n </label>\n <div class=\"t-wrapper-value-decoration\">\n <tui-value-decoration\n #decor\n automation-id=\"tui-primitive-textfield__value-decoration\"\n aria-hidden=\"true\"\n class=\"t-value-decoration\"\n [class.t-has-value]=\"value\"\n [style.textIndent.px]=\"getIndent$(focusableElement) | async\"\n ></tui-value-decoration>\n </div>\n </div>\n <div\n *ngIf=\"hasCustomContent\"\n automation-id=\"tui-primitive-textfield__custom-content\"\n class=\"t-custom-content\"\n >\n <tui-svg\n *polymorpheusOutlet=\"controller.customContent as src\"\n class=\"t-custom-icon\"\n [src]=\"src\"\n ></tui-svg>\n </div>\n <span\n *ngIf=\"hasCleaner\"\n tuiWrapper\n appearance=\"icon\"\n automation-id=\"tui-primitive-textfield__cleaner\"\n class=\"t-cleaner\"\n (click.stop)=\"clear()\"\n >\n <tui-svg\n *polymorpheusOutlet=\"iconCleaner || controller.options.iconCleaner as src; context: {$implicit: size}\"\n [src]=\"src\"\n ></tui-svg>\n </span>\n <tui-tooltip\n *ngIf=\"showHint\"\n automation-id=\"tui-primitive-textfield__tooltip\"\n class=\"t-tooltip\"\n [describeId]=\"computedId\"\n [content]=\"hintOptions?.content\"\n ></tui-tooltip>\n <div\n *ngIf=\"iconContent\"\n class=\"t-icon t-textfield-icon\"\n >\n <tui-svg\n *polymorpheusOutlet=\"iconContent as src; context: {$implicit: size}\"\n tuiWrapper\n appearance=\"icon\"\n [src]=\"src\"\n ></tui-svg>\n </div>\n </div>\n</div>\n", styles: [":host{font:var(--tui-font-text-s);color:var(--tui-text-01);position:relative;display:block;border-radius:var(--tui-radius-m);text-align:left;height:var(--tui-height);min-height:var(--tui-height);max-height:var(--tui-height)}:host[data-size=s]{--tui-height: var(--tui-height-s)}:host[data-size=m]{--tui-height: var(--tui-height-m)}:host[data-size=l]{--tui-height: var(--tui-height-l);font:var(--tui-font-text-m);line-height:1.25rem}.t-input{font:var(--tui-font-text-s);color:var(--tui-text-01);padding:0;margin:0;border:0;border-radius:inherit;background:none;font-size:inherit;line-height:inherit;font-weight:inherit;color:inherit;caret-color:currentColor;outline:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;word-break:keep-all;-webkit-text-fill-color:currentColor;position:absolute;top:0;left:0;width:100%;height:100%;padding:0 var(--tui-padding-m);border:solid transparent;border-width:0 var(--border-end, 0) 0 var(--border-start, 0);border-inline-start-width:var(--border-start, 0);border-inline-end-width:var(--border-end, 0);text-indent:var(--text-indent);text-align:inherit;box-sizing:border-box;white-space:nowrap;overflow:hidden;text-transform:inherit;resize:none}.t-input:-webkit-autofill,.t-input:-webkit-autofill:hover,.t-input:-webkit-autofill:focus{caret-color:var(--tui-base-09);border-radius:inherit;color:inherit!important;background-color:transparent!important;-webkit-text-fill-color:var(--tui-text-01)!important;border-color:var(--tui-autofill);-webkit-box-shadow:0 0 0 100rem var(--tui-autofill) inset!important}.t-input:-webkit-autofill,.t-input:-webkit-autofill:first-line{font-size:inherit;line-height:inherit}.t-input::-webkit-caps-lock-indicator,.t-input::-webkit-contacts-auto-fill-button,.t-input::-webkit-credit-card-auto-fill-button,.t-input::-webkit-credentials-auto-fill-button,.t-input::-webkit-strong-password-auto-fill-button{content:none!important;position:absolute;left:-62.4375rem;top:-62.4375rem;z-index:-999;display:none!important;background:transparent!important;pointer-events:none!important}.t-input::placeholder{color:var(--tui-text-03);opacity:0}:host._focused:not(._readonly) .t-input::placeholder,:host-context(tui-primitive-textfield._focused:not(._readonly)) .t-input::placeholder,:host-context(tui-text-area._focused:not(._readonly)) .t-input::placeholder{opacity:1}[tuiWrapper][data-mode=onDark] .t-input:-webkit-autofill,.t-input :host-context([tuiWrapper][data-mode=\"onDark\"]):-webkit-autofill,[tuiWrapper][data-mode=onDark] .t-input:-webkit-autofill:hover,.t-input :host-context([tuiWrapper][data-mode=\"onDark\"]):-webkit-autofill:hover,[tuiWrapper][data-mode=onDark] .t-input:-webkit-autofill:focus,.t-input :host-context([tuiWrapper][data-mode=\"onDark\"]):-webkit-autofill:focus{caret-color:var(--tui-base-09);border-radius:inherit;color:inherit!important;background-color:transparent!important;-webkit-text-fill-color:var(--tui-text-01-night)!important;border-color:var(--tui-autofill-night);-webkit-box-shadow:0 0 0 100rem var(--tui-autofill-night) inset!important}[tuiWrapper][data-mode=onDark] .t-input::placeholder,.t-input :host-context([tuiWrapper][data-mode=\"onDark\"])::placeholder{color:var(--tui-text-03-night)}:host[data-size=s] .t-input,.t-input :host-context(tui-primitive-textfield[data-size=\"s\"]):not(tui-primitive-textfield),.t-input :host-context(tui-text-area[data-size=\"s\"]):not(tui-text-area){padding:0 var(--tui-padding-s)}:host[data-size=l] .t-input,.t-input :host-context(tui-primitive-textfield[data-size=\"l\"]):not(tui-primitive-textfield),.t-input :host-context(tui-text-area[data-size=\"l\"]):not(tui-text-area){padding:0 var(--tui-padding-l)}:host._disabled .t-input,.t-input :host-context(tui-primitive-textfield._disabled),.t-input :host-context(tui-text-area._disabled){pointer-events:none}:host[data-size=l]:not(._label-outside) .t-input,.t-input :host-context(tui-primitive-textfield[data-size=\"l\"]:not(._label-outside)):not(tui-primitive-textfield){padding-top:1.25rem}:host[data-size=l]:not(._label-outside) .t-input:-webkit-autofill+.t-content .t-placeholder,.t-input :host-context(tui-primitive-textfield[data-size=\"l\"]:not(._label-outside)):not(tui-primitive-textfield):-webkit-autofill+.t-content .t-placeholder{font-size:.8156rem;transform:translateY(-.625rem)}:host[data-size=m]:not(._label-outside) .t-input,.t-input :host-context(tui-primitive-textfield[data-size=\"m\"]:not(._label-outside)):not(tui-primitive-textfield){padding-top:1rem}:host[data-size=m]:not(._label-outside) .t-input:-webkit-autofill+.t-content .t-placeholder,.t-input :host-context(tui-primitive-textfield[data-size=\"m\"]:not(._label-outside)):not(tui-primitive-textfield):-webkit-autofill+.t-content .t-placeholder{font-size:.69rem;transform:translateY(-.5rem)}:host._hidden input.t-input,.t-input :host-context(tui-primitive-textfield._hidden){opacity:0;text-indent:-10em;-webkit-user-select:none}.t-content{display:flex;height:100%;width:100%;padding:0 var(--tui-padding-m);box-sizing:border-box;align-items:center;overflow:hidden}:host[data-size=s] .t-content{padding:0 var(--tui-padding-s)}:host[data-size=l] .t-content{padding:0 var(--tui-padding-l)}.t-content:after{content:\"\";margin-right:-.25rem}:host[data-size=m] .t-content:after{display:none}.t-wrapper{flex:1;min-width:0;padding-right:.25rem;-webkit-padding-end:.25rem;padding-inline-end:.25rem;-webkit-padding-start:0;padding-inline-start:0}.t-wrapper+*{margin:0}.t-placeholder{transition-property:transform,font-size,color,letter-spacing;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;width:100%;-webkit-user-select:none;-moz-user-select:none;user-select:none;font:var(--tui-font-text-s);color:var(--tui-text-02);pointer-events:none;will-change:transform;transform:translateY(0)}.t-placeholder_raised{transform:translateY(-.625rem)}:host[data-size=m] .t-placeholder_raised{font:var(--tui-font-text-xs);line-height:1.25rem;transform:translateY(-.5rem);letter-spacing:.025rem}:host._invalid:not(._focused) .t-placeholder_raised,:host._invalid:not(._focused):hover .t-placeholder_raised{color:var(--tui-error-fill)}:host._invalid:not(._focused) [tuiWrapper][data-mode=onDark] .t-placeholder_raised,:host._invalid:not(._focused):hover [tuiWrapper][data-mode=onDark] .t-placeholder_raised{color:var(--tui-error-fill-night)}:host._focused .t-placeholder,:host[data-size=m]._focused._label-outside .t-placeholder,:host[data-size=l]._focused._label-outside .t-placeholder{color:var(--tui-text-03)}:host[data-size=l] .t-placeholder{font:var(--tui-font-text-m);line-height:1.25rem}:host[data-size=l] .t-placeholder_raised{font-size:.8156rem}:host[data-size=m]._focused:not(._label-outside) .t-placeholder,:host[data-size=l]._focused:not(._label-outside) .t-placeholder{color:var(--tui-text-01)}[tuiWrapper][data-mode=onDark] .t-placeholder{color:var(--tui-text-02-night)}:host[data-size=m]._focused:not(._label-outside) [tuiWrapper][data-mode=onDark] .t-placeholder,:host[data-size=l]._focused:not(._label-outside) [tuiWrapper][data-mode=onDark] .t-placeholder{color:var(--tui-text-01-night)}:host._focused [tuiWrapper][data-mode=onDark] .t-placeholder,:host[data-size=m]._focused._label-outside [tuiWrapper][data-mode=onDark] .t-placeholder,:host[data-size=l]._focused._label-outside [tuiWrapper][data-mode=onDark] .t-placeholder{color:var(--tui-text-02-night)}@supports (-webkit-hyphens: none){.t-placeholder{will-change:unset;transition-property:transform,color,letter-spacing}}.t-cleaner{position:relative;display:flex;width:1.5rem;height:1.5rem;margin:0 0 0 .25rem;-webkit-margin-start:.25rem;margin-inline-start:.25rem;-webkit-margin-end:0;margin-inline-end:0;align-items:center;justify-content:center;box-sizing:border-box;cursor:pointer}:host._readonly .t-cleaner,:host._disabled .t-cleaner{pointer-events:none}.t-icon{position:relative;display:flex;width:1.5rem;height:1.5rem;margin:0 0 0 .25rem;-webkit-margin-start:.25rem;margin-inline-start:.25rem;-webkit-margin-end:0;margin-inline-end:0;align-items:center;justify-content:center;box-sizing:border-box;cursor:pointer;pointer-events:none}.t-icon_left{margin:0 .375rem 0 -.25rem;-webkit-margin-start:-.25rem;margin-inline-start:-.25rem;-webkit-margin-end:.375rem;margin-inline-end:.375rem}:host[data-size=l] .t-icon_left{margin:0 .5rem 0 -.25rem;-webkit-margin-start:-.25rem;margin-inline-start:-.25rem;-webkit-margin-end:.5rem;margin-inline-end:.5rem}:host._autofilled .t-value-decoration:not(.t-has-value){visibility:hidden}:host._autofilled[data-size=s]:not(._focused) .t-placeholder,:host._autofilled[data-size=m]:not(._focused) .t-placeholder{visibility:hidden}.t-custom-content{position:relative;display:flex;align-items:center;justify-content:center;min-width:2rem;height:2rem;pointer-events:none}.t-custom-icon{width:2rem;height:100%}.t-tooltip{margin:0 0 0 .25rem;-webkit-margin-start:.25rem;margin-inline-start:.25rem;-webkit-margin-end:0;margin-inline-end:0}.t-input:not(:first-child){display:none}:host[data-size] .t-input_template{display:flex;width:calc(100% - 1rem);max-width:calc(100% - 1rem);align-items:center;pointer-events:none;-webkit-padding-end:0;padding-inline-end:0}.t-text-template{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.t-wrapper-value-decoration{position:relative;pointer-events:none}\n"], components: [{ type: i1__namespace.TuiSvgComponent, selector: "tui-svg", inputs: ["src"] }, { type: TuiValueDecorationComponent, selector: "tui-value-decoration" }, { type: i3__namespace.TuiTooltipComponent, selector: "tui-tooltip", inputs: ["content", "direction", "appearance", "showDelay", "hideDelay", "describeId"] }], directives: [{ type: i4__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5__namespace.TuiWrapperDirective, selector: "[tuiWrapper]", inputs: ["disabled", "readOnly", "hover", "active", "focus", "invalid", "appearance"] }, { type: i6__namespace.TuiAutofilledDirective, selector: "[tuiAutofilledChange]", outputs: ["tuiAutofilledChange"] }, { type: i7__namespace.TuiMaskAccessorDirective, selector: "input[tuiMaskAccessor]" }, { type: i8__namespace.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i6__namespace.TuiFocusableDirective, selector: "[tuiFocusable]", inputs: ["tuiFocusable"] }, { type: i8__namespace.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i8__namespace.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i9__namespace.PolymorpheusOutletDirective, selector: "[polymorpheusOutlet]", inputs: ["polymorpheusOutlet", "polymorpheusOutletContext"] }], pipes: { "async": i4__namespace.AsyncPipe }, changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
750
+ ], queries: [{ propertyName: "content", predicate: i9.PolymorpheusOutletDirective, descendants: true }], viewQueries: [{ propertyName: "focusableElement", first: true, predicate: ["focusableElement"], descendants: true }], usesInheritance: true, ngImport: i0__namespace, template: "<ng-container *ngIf=\"content?.changes | async\"></ng-container>\n<ng-container *ngIf=\"hintOptions?.change$ | async\"></ng-container>\n<div\n tuiWrapper\n automation-id=\"tui-primitive-textfield__wrapper\"\n [appearance]=\"appearance\"\n [readOnly]=\"readOnly\"\n [disabled]=\"disabled\"\n [focus]=\"computedFocused\"\n [hover]=\"pseudoHover\"\n [active]=\"pseudoActive\"\n [invalid]=\"computedInvalid\"\n [style.--text-indent.px]=\"decor.pre$ | async\"\n (mousedown)=\"onMouseDown($event)\"\n (click.prevent.silent)=\"(0)\"\n (tuiAutofilledChange)=\"onAutofilled($event)\"\n>\n <ng-content select=\"input\"></ng-content>\n <ng-content select=\"select\"></ng-content>\n <input\n #focusableElement\n tuiMaskAccessor\n automation-id=\"tui-primitive-textfield__native-input\"\n class=\"t-input\"\n [disabled]=\"computedDisabled\"\n [attr.name]=\"name\"\n [attr.aria-invalid]=\"computedInvalid\"\n [id]=\"id\"\n [readOnly]=\"readOnly || !editable\"\n [tuiFocusable]=\"computedFocusable\"\n [ngModel]=\"value\"\n (ngModelChange)=\"onModelChange($event)\"\n />\n <div\n *ngIf=\"inputHidden\"\n automation-id=\"tui-primitive-textfield__value\"\n class=\"t-input t-input_template\"\n >\n <ng-content select=\"tuiContent\"></ng-content>\n </div>\n <div class=\"t-content\">\n <div\n *ngIf=\"iconLeftContent\"\n class=\"t-icon t-icon_left t-textfield-icon\"\n >\n <tui-svg\n *polymorpheusOutlet=\"iconLeftContent as src; context: {$implicit: size}\"\n tuiWrapper\n appearance=\"icon\"\n [src]=\"src\"\n ></tui-svg>\n </div>\n <div class=\"t-wrapper\">\n <label\n *ngIf=\"hasPlaceholder\"\n automation-id=\"tui-primitive-textfield__placeholder\"\n class=\"t-placeholder\"\n [class.t-placeholder_raised]=\"placeholderRaised\"\n [for]=\"computedId\"\n >\n <ng-content></ng-content>\n </label>\n <div class=\"t-wrapper-value-decoration\">\n <tui-value-decoration\n #decor\n automation-id=\"tui-primitive-textfield__value-decoration\"\n aria-hidden=\"true\"\n class=\"t-value-decoration\"\n [class.t-has-value]=\"value\"\n [style.textIndent.px]=\"getIndent$(focusableElement) | async\"\n ></tui-value-decoration>\n </div>\n </div>\n <div class=\"t-icons\">\n <div\n *ngIf=\"hasCustomContent\"\n automation-id=\"tui-primitive-textfield__custom-content\"\n class=\"t-custom-content\"\n >\n <tui-svg\n *polymorpheusOutlet=\"controller.customContent as src\"\n class=\"t-custom-icon\"\n [src]=\"src\"\n ></tui-svg>\n </div>\n <span\n *ngIf=\"hasCleaner\"\n tuiWrapper\n appearance=\"icon\"\n automation-id=\"tui-primitive-textfield__cleaner\"\n class=\"t-cleaner\"\n (click.stop)=\"clear()\"\n >\n <tui-svg\n *polymorpheusOutlet=\"\n iconCleaner || controller.options.iconCleaner as src;\n context: {$implicit: size}\n \"\n [src]=\"src\"\n ></tui-svg>\n </span>\n <tui-tooltip\n *ngIf=\"showHint\"\n automation-id=\"tui-primitive-textfield__tooltip\"\n class=\"t-tooltip\"\n [describeId]=\"computedId\"\n [content]=\"hintOptions?.content\"\n ></tui-tooltip>\n <div\n *ngIf=\"iconContent\"\n class=\"t-icon t-textfield-icon\"\n >\n <tui-svg\n *polymorpheusOutlet=\"iconContent as src; context: {$implicit: size}\"\n tuiWrapper\n appearance=\"icon\"\n [src]=\"src\"\n ></tui-svg>\n </div>\n </div>\n </div>\n</div>\n", styles: [":host{font:var(--tui-font-text-s);color:var(--tui-text-01);position:relative;display:block;text-align:left;border-radius:var(--tui-radius-m);height:var(--tui-height);min-height:var(--tui-height);max-height:var(--tui-height)}:host[data-size=s]{--tui-height: var(--tui-height-s)}:host[data-size=m]{--tui-height: var(--tui-height-m)}:host[data-size=l]{--tui-height: var(--tui-height-l);font:var(--tui-font-text-m);line-height:1.25rem}.t-input{font:var(--tui-font-text-s);color:var(--tui-text-01);padding:0;margin:0;border:0;border-radius:inherit;background:none;font-size:inherit;line-height:inherit;font-weight:inherit;color:inherit;caret-color:currentColor;outline:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;word-break:keep-all;-webkit-text-fill-color:currentColor;position:absolute;top:0;left:0;width:100%;height:100%;border:solid transparent;border-inline-start-width:var(--border-start, 0);border-inline-end-width:var(--border-end, 0);text-indent:var(--text-indent);text-align:inherit;box-sizing:border-box;white-space:nowrap;overflow:hidden;text-transform:inherit;resize:none}.t-input:-webkit-autofill,.t-input:-webkit-autofill:hover,.t-input:-webkit-autofill:focus{caret-color:var(--tui-base-09);border-radius:inherit;color:inherit!important;background-color:transparent!important;-webkit-text-fill-color:var(--tui-text-01)!important;border-color:var(--tui-autofill);-webkit-box-shadow:0 0 0 100rem var(--tui-autofill) inset!important}.t-input:-webkit-autofill,.t-input:-webkit-autofill:first-line{font-size:inherit;line-height:inherit}.t-input::-webkit-caps-lock-indicator,.t-input::-webkit-contacts-auto-fill-button,.t-input::-webkit-credit-card-auto-fill-button,.t-input::-webkit-credentials-auto-fill-button,.t-input::-webkit-strong-password-auto-fill-button{content:none!important;position:absolute;left:-62.4375rem;top:-62.4375rem;z-index:-999;display:none!important;background:transparent!important;pointer-events:none!important}.t-input::placeholder{color:var(--tui-text-03);opacity:0}:host._focused:not(._readonly) .t-input::placeholder,:host-context(tui-primitive-textfield._focused:not(._readonly)) .t-input::placeholder,:host-context(tui-text-area._focused:not(._readonly)) .t-input::placeholder{opacity:1}[tuiWrapper][data-mode=onDark] .t-input:-webkit-autofill,.t-input :host-context([tuiWrapper][data-mode=\"onDark\"]):-webkit-autofill,[tuiWrapper][data-mode=onDark] .t-input:-webkit-autofill:hover,.t-input :host-context([tuiWrapper][data-mode=\"onDark\"]):-webkit-autofill:hover,[tuiWrapper][data-mode=onDark] .t-input:-webkit-autofill:focus,.t-input :host-context([tuiWrapper][data-mode=\"onDark\"]):-webkit-autofill:focus{caret-color:var(--tui-base-09);border-radius:inherit;color:inherit!important;background-color:transparent!important;-webkit-text-fill-color:var(--tui-text-01-night)!important;border-color:var(--tui-autofill-night);-webkit-box-shadow:0 0 0 100rem var(--tui-autofill-night) inset!important}[tuiWrapper][data-mode=onDark] .t-input::placeholder,.t-input :host-context([tuiWrapper][data-mode=\"onDark\"])::placeholder{color:var(--tui-text-03-night)}:host[data-size=s] .t-input,.t-input :host-context(tui-primitive-textfield[data-size=\"s\"]):not(tui-primitive-textfield),.t-input :host-context(tui-text-area[data-size=\"s\"]):not(tui-text-area){padding:0 var(--tui-padding-s)}:host[data-size=m] .t-input,.t-input :host-context(tui-primitive-textfield[data-size=\"m\"]):not(tui-primitive-textfield),.t-input :host-context(tui-text-area[data-size=\"m\"]):not(tui-text-area){padding:0 var(--tui-padding-m)}:host[data-size=l] .t-input,.t-input :host-context(tui-primitive-textfield[data-size=\"l\"]):not(tui-primitive-textfield),.t-input :host-context(tui-text-area[data-size=\"l\"]):not(tui-text-area){padding:0 var(--tui-padding-l)}:host._disabled .t-input,.t-input :host-context(tui-primitive-textfield._disabled),.t-input :host-context(tui-text-area._disabled){pointer-events:none}:host[data-size=l]:not(._label-outside) .t-input,.t-input :host-context(tui-primitive-textfield[data-size=\"l\"]:not(._label-outside)):not(tui-primitive-textfield){padding-top:1.25rem}:host[data-size=l]:not(._label-outside) .t-input:-webkit-autofill+.t-content .t-placeholder,.t-input :host-context(tui-primitive-textfield[data-size=\"l\"]:not(._label-outside)):not(tui-primitive-textfield):-webkit-autofill+.t-content .t-placeholder{font-size:.8156rem;transform:translateY(-.625rem)}:host[data-size=m]:not(._label-outside) .t-input,.t-input :host-context(tui-primitive-textfield[data-size=\"m\"]:not(._label-outside)):not(tui-primitive-textfield){padding-top:1rem}:host[data-size=m]:not(._label-outside) .t-input:-webkit-autofill+.t-content .t-placeholder,.t-input :host-context(tui-primitive-textfield[data-size=\"m\"]:not(._label-outside)):not(tui-primitive-textfield):-webkit-autofill+.t-content .t-placeholder{font-size:.69rem;transform:translateY(-.5rem)}:host._hidden input.t-input,.t-input :host-context(tui-primitive-textfield._hidden){opacity:0;text-indent:-10em;-webkit-user-select:none}.t-content{display:flex;height:100%;width:100%;box-sizing:border-box;align-items:center;overflow:hidden}:host[data-size=s] .t-content{padding:0 var(--tui-padding-s)}:host[data-size=m] .t-content{padding:0 var(--tui-padding-m)}:host[data-size=l] .t-content{padding:0 var(--tui-padding-l)}.t-wrapper{flex:1;min-width:0;-webkit-padding-end:.25rem;padding-inline-end:.25rem}.t-placeholder{transition-property:transform,font-size,color,letter-spacing;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;width:100%;-webkit-user-select:none;-moz-user-select:none;user-select:none;font:var(--tui-font-text-s);color:var(--tui-text-02);pointer-events:none;will-change:transform;transform:translateY(0)}.t-placeholder_raised{transform:translateY(-.625rem)}:host[data-size=m] .t-placeholder_raised{font:var(--tui-font-text-xs);line-height:1.25rem;transform:translateY(-.5rem);letter-spacing:.025rem}:host._invalid:not(._focused) .t-placeholder_raised,:host._invalid:not(._focused):hover .t-placeholder_raised{color:var(--tui-error-fill)}:host._invalid:not(._focused) [tuiWrapper][data-mode=onDark] .t-placeholder_raised,:host._invalid:not(._focused):hover [tuiWrapper][data-mode=onDark] .t-placeholder_raised{color:var(--tui-error-fill-night)}:host._focused .t-placeholder,:host[data-size=m]._focused._label-outside .t-placeholder,:host[data-size=l]._focused._label-outside .t-placeholder{color:var(--tui-text-03)}:host[data-size=l] .t-placeholder{font:var(--tui-font-text-m);line-height:1.25rem}:host[data-size=l] .t-placeholder_raised{font-size:.8156rem}:host[data-size=m]._focused:not(._label-outside) .t-placeholder,:host[data-size=l]._focused:not(._label-outside) .t-placeholder{color:var(--tui-text-01)}[tuiWrapper][data-mode=onDark] .t-placeholder{color:var(--tui-text-02-night)}:host[data-size=m]._focused:not(._label-outside) [tuiWrapper][data-mode=onDark] .t-placeholder,:host[data-size=l]._focused:not(._label-outside) [tuiWrapper][data-mode=onDark] .t-placeholder{color:var(--tui-text-01-night)}:host._focused [tuiWrapper][data-mode=onDark] .t-placeholder,:host[data-size=m]._focused._label-outside [tuiWrapper][data-mode=onDark] .t-placeholder,:host[data-size=l]._focused._label-outside [tuiWrapper][data-mode=onDark] .t-placeholder{color:var(--tui-text-02-night)}@supports (-webkit-hyphens: none){.t-placeholder{will-change:unset;transition-property:transform,color,letter-spacing}}.t-cleaner{position:relative;display:flex;width:1.5rem;height:1.5rem;align-items:center;justify-content:center;box-sizing:border-box;cursor:pointer;pointer-events:none;pointer-events:auto}:host._readonly .t-cleaner,:host._disabled .t-cleaner{pointer-events:none}.t-icon{position:relative;display:flex;width:1.5rem;height:1.5rem;align-items:center;justify-content:center;box-sizing:border-box;cursor:pointer;pointer-events:none}:host[data-size=s] .t-icon_left{-webkit-margin-start:-.375rem;margin-inline-start:-.375rem}:host[data-size=m] .t-icon_left{-webkit-margin-start:-.125rem;margin-inline-start:-.125rem;-webkit-margin-end:.375rem;margin-inline-end:.375rem}:host[data-size=l] .t-icon_left{-webkit-margin-end:.75rem;margin-inline-end:.75rem}.t-icons{display:flex;align-items:center}:host[data-size=m] .t-icons{-webkit-margin-end:-.125rem;margin-inline-end:-.125rem}:host[data-size=s] .t-icons{-webkit-margin-end:-.375rem;margin-inline-end:-.375rem}:host:not([data-size=\"s\"]) .t-icons>:not(:first-child){-webkit-margin-start:.25rem;margin-inline-start:.25rem}:host._autofilled .t-value-decoration:not(.t-has-value){visibility:hidden}:host._autofilled[data-size=s]:not(._focused) .t-placeholder,:host._autofilled[data-size=m]:not(._focused) .t-placeholder{visibility:hidden}.t-custom-content{position:relative;display:flex;align-items:center;justify-content:center;min-width:2rem;height:2rem;pointer-events:none}.t-custom-icon{width:2rem;height:100%}.t-input:not(:first-child){display:none}:host[data-size] .t-input_template{display:flex;width:calc(100% - 1rem);max-width:calc(100% - 1rem);align-items:center;pointer-events:none;-webkit-padding-end:0;padding-inline-end:0}.t-text-template{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.t-wrapper-value-decoration{position:relative;pointer-events:none}\n"], components: [{ type: i1__namespace.TuiSvgComponent, selector: "tui-svg", inputs: ["src"] }, { type: TuiValueDecorationComponent, selector: "tui-value-decoration" }, { type: i3__namespace.TuiTooltipComponent, selector: "tui-tooltip", inputs: ["content", "direction", "appearance", "showDelay", "hideDelay", "describeId"] }], directives: [{ type: i4__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5__namespace.TuiWrapperDirective, selector: "[tuiWrapper]", inputs: ["disabled", "readOnly", "hover", "active", "focus", "invalid", "appearance"] }, { type: i6__namespace.TuiAutofilledDirective, selector: "[tuiAutofilledChange]", outputs: ["tuiAutofilledChange"] }, { type: i7__namespace.TuiMaskAccessorDirective, selector: "input[tuiMaskAccessor]" }, { type: i8__namespace.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i6__namespace.TuiFocusableDirective, selector: "[tuiFocusable]", inputs: ["tuiFocusable"] }, { type: i8__namespace.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i8__namespace.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i9__namespace.PolymorpheusOutletDirective, selector: "[polymorpheusOutlet]", inputs: ["polymorpheusOutlet", "polymorpheusOutletContext"] }], pipes: { "async": i4__namespace.AsyncPipe }, changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
748
751
  __decorate([
749
752
  i6.tuiPure
750
753
  ], TuiPrimitiveTextfieldComponent.prototype, "getIndent$", null);
@@ -901,7 +904,7 @@
901
904
  return TuiTextfieldComponent;
902
905
  }());
903
906
  TuiTextfieldComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TuiTextfieldComponent, deps: [{ token: tokens.TUI_TEXTFIELD_HOST }, { token: i1$1.TUI_TEXTFIELD_WATCHED_CONTROLLER }, { token: i0.ElementRef }, { token: i6.TuiIdService }, { token: tokens.TUI_LEGACY_MASK, optional: true }], target: i0__namespace.ɵɵFactoryTarget.Component });
904
- TuiTextfieldComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: TuiTextfieldComponent, selector: "input[tuiTextfield], textarea[tuiTextfield]", host: { attributes: { "type": "text" }, listeners: { "input": "!legacyMask && host.onValueChange($event.target.value)" }, properties: { "attr.id": "id", "attr.inputMode": "inputMode", "attr.aria-invalid": "host.invalid", "attr.disabled": "host.disabled || null", "tabIndex": "host.focusable ? 0 : -1", "readOnly": "host.readOnly", "value": "host.value" } }, providers: [i1$1.TEXTFIELD_CONTROLLER_PROVIDER], ngImport: i0__namespace, template: '', isInline: true, styles: [":host{font:var(--tui-font-text-s);color:var(--tui-text-01);padding:0;margin:0;border:0;border-radius:inherit;background:none;font-size:inherit;line-height:inherit;font-weight:inherit;color:inherit;caret-color:currentColor;outline:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;word-break:keep-all;-webkit-text-fill-color:currentColor;position:absolute;top:0;left:0;width:100%;height:100%;padding:0 var(--tui-padding-m);border:solid transparent;border-width:0 var(--border-end, 0) 0 var(--border-start, 0);border-inline-start-width:var(--border-start, 0);border-inline-end-width:var(--border-end, 0);text-indent:var(--text-indent);text-align:inherit;box-sizing:border-box;white-space:nowrap;overflow:hidden;text-transform:inherit;resize:none}:host:-webkit-autofill,:host:-webkit-autofill:hover,:host:-webkit-autofill:focus{caret-color:var(--tui-base-09);border-radius:inherit;color:inherit!important;background-color:transparent!important;-webkit-text-fill-color:var(--tui-text-01)!important;border-color:var(--tui-autofill);-webkit-box-shadow:0 0 0 100rem var(--tui-autofill) inset!important}:host:-webkit-autofill,:host:-webkit-autofill:first-line{font-size:inherit;line-height:inherit}:host::-webkit-caps-lock-indicator,:host::-webkit-contacts-auto-fill-button,:host::-webkit-credit-card-auto-fill-button,:host::-webkit-credentials-auto-fill-button,:host::-webkit-strong-password-auto-fill-button{content:none!important;position:absolute;left:-62.4375rem;top:-62.4375rem;z-index:-999;display:none!important;background:transparent!important;pointer-events:none!important}:host::placeholder{color:var(--tui-text-03);opacity:0}:host._focused:not(._readonly) :host::placeholder,:host-context(tui-primitive-textfield._focused:not(._readonly)) :host::placeholder,:host-context(tui-text-area._focused:not(._readonly)) :host::placeholder{opacity:1}[tuiWrapper][data-mode=onDark] :host:-webkit-autofill,:host :host-context([tuiWrapper][data-mode=\"onDark\"]):-webkit-autofill,[tuiWrapper][data-mode=onDark] :host:-webkit-autofill:hover,:host :host-context([tuiWrapper][data-mode=\"onDark\"]):-webkit-autofill:hover,[tuiWrapper][data-mode=onDark] :host:-webkit-autofill:focus,:host :host-context([tuiWrapper][data-mode=\"onDark\"]):-webkit-autofill:focus{caret-color:var(--tui-base-09);border-radius:inherit;color:inherit!important;background-color:transparent!important;-webkit-text-fill-color:var(--tui-text-01-night)!important;border-color:var(--tui-autofill-night);-webkit-box-shadow:0 0 0 100rem var(--tui-autofill-night) inset!important}[tuiWrapper][data-mode=onDark] :host::placeholder,:host :host-context([tuiWrapper][data-mode=\"onDark\"])::placeholder{color:var(--tui-text-03-night)}:host[data-size=s] :host,:host :host-context(tui-primitive-textfield[data-size=\"s\"]):not(tui-primitive-textfield),:host :host-context(tui-text-area[data-size=\"s\"]):not(tui-text-area){padding:0 var(--tui-padding-s)}:host[data-size=l] :host,:host :host-context(tui-primitive-textfield[data-size=\"l\"]):not(tui-primitive-textfield),:host :host-context(tui-text-area[data-size=\"l\"]):not(tui-text-area){padding:0 var(--tui-padding-l)}:host._disabled :host,:host :host-context(tui-primitive-textfield._disabled),:host :host-context(tui-text-area._disabled){pointer-events:none}:host[data-size=l]:not(._label-outside) :host,:host :host-context(tui-primitive-textfield[data-size=\"l\"]:not(._label-outside)):not(tui-primitive-textfield){padding-top:1.25rem}:host[data-size=l]:not(._label-outside) :host:-webkit-autofill+.t-content .t-placeholder,:host :host-context(tui-primitive-textfield[data-size=\"l\"]:not(._label-outside)):not(tui-primitive-textfield):-webkit-autofill+.t-content .t-placeholder{font-size:.8156rem;transform:translateY(-.625rem)}:host[data-size=m]:not(._label-outside) :host,:host :host-context(tui-primitive-textfield[data-size=\"m\"]:not(._label-outside)):not(tui-primitive-textfield){padding-top:1rem}:host[data-size=m]:not(._label-outside) :host:-webkit-autofill+.t-content .t-placeholder,:host :host-context(tui-primitive-textfield[data-size=\"m\"]:not(._label-outside)):not(tui-primitive-textfield):-webkit-autofill+.t-content .t-placeholder{font-size:.69rem;transform:translateY(-.5rem)}:host._hidden input:host,:host :host-context(tui-primitive-textfield._hidden){opacity:0;text-indent:-10em;-webkit-user-select:none}textarea:host{white-space:pre-wrap}textarea:host :host-context(tui-text-area._ios){padding-left:.8125rem}\n"], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
907
+ TuiTextfieldComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: TuiTextfieldComponent, selector: "input[tuiTextfield], textarea[tuiTextfield]", host: { attributes: { "type": "text" }, listeners: { "input": "!legacyMask && host.onValueChange($event.target.value)" }, properties: { "attr.id": "id", "attr.inputMode": "inputMode", "attr.aria-invalid": "host.invalid", "attr.disabled": "host.disabled || null", "tabIndex": "host.focusable ? 0 : -1", "readOnly": "host.readOnly", "value": "host.value" } }, providers: [i1$1.TEXTFIELD_CONTROLLER_PROVIDER], ngImport: i0__namespace, template: '', isInline: true, styles: [":host{font:var(--tui-font-text-s);color:var(--tui-text-01);padding:0;margin:0;border:0;border-radius:inherit;background:none;font-size:inherit;line-height:inherit;font-weight:inherit;color:inherit;caret-color:currentColor;outline:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;word-break:keep-all;-webkit-text-fill-color:currentColor;position:absolute;top:0;left:0;width:100%;height:100%;border:solid transparent;border-inline-start-width:var(--border-start, 0);border-inline-end-width:var(--border-end, 0);text-indent:var(--text-indent);text-align:inherit;box-sizing:border-box;white-space:nowrap;overflow:hidden;text-transform:inherit;resize:none}:host:-webkit-autofill,:host:-webkit-autofill:hover,:host:-webkit-autofill:focus{caret-color:var(--tui-base-09);border-radius:inherit;color:inherit!important;background-color:transparent!important;-webkit-text-fill-color:var(--tui-text-01)!important;border-color:var(--tui-autofill);-webkit-box-shadow:0 0 0 100rem var(--tui-autofill) inset!important}:host:-webkit-autofill,:host:-webkit-autofill:first-line{font-size:inherit;line-height:inherit}:host::-webkit-caps-lock-indicator,:host::-webkit-contacts-auto-fill-button,:host::-webkit-credit-card-auto-fill-button,:host::-webkit-credentials-auto-fill-button,:host::-webkit-strong-password-auto-fill-button{content:none!important;position:absolute;left:-62.4375rem;top:-62.4375rem;z-index:-999;display:none!important;background:transparent!important;pointer-events:none!important}:host::placeholder{color:var(--tui-text-03);opacity:0}:host._focused:not(._readonly) :host::placeholder,:host-context(tui-primitive-textfield._focused:not(._readonly)) :host::placeholder,:host-context(tui-text-area._focused:not(._readonly)) :host::placeholder{opacity:1}[tuiWrapper][data-mode=onDark] :host:-webkit-autofill,:host :host-context([tuiWrapper][data-mode=\"onDark\"]):-webkit-autofill,[tuiWrapper][data-mode=onDark] :host:-webkit-autofill:hover,:host :host-context([tuiWrapper][data-mode=\"onDark\"]):-webkit-autofill:hover,[tuiWrapper][data-mode=onDark] :host:-webkit-autofill:focus,:host :host-context([tuiWrapper][data-mode=\"onDark\"]):-webkit-autofill:focus{caret-color:var(--tui-base-09);border-radius:inherit;color:inherit!important;background-color:transparent!important;-webkit-text-fill-color:var(--tui-text-01-night)!important;border-color:var(--tui-autofill-night);-webkit-box-shadow:0 0 0 100rem var(--tui-autofill-night) inset!important}[tuiWrapper][data-mode=onDark] :host::placeholder,:host :host-context([tuiWrapper][data-mode=\"onDark\"])::placeholder{color:var(--tui-text-03-night)}:host[data-size=s] :host,:host :host-context(tui-primitive-textfield[data-size=\"s\"]):not(tui-primitive-textfield),:host :host-context(tui-text-area[data-size=\"s\"]):not(tui-text-area){padding:0 var(--tui-padding-s)}:host[data-size=m] :host,:host :host-context(tui-primitive-textfield[data-size=\"m\"]):not(tui-primitive-textfield),:host :host-context(tui-text-area[data-size=\"m\"]):not(tui-text-area){padding:0 var(--tui-padding-m)}:host[data-size=l] :host,:host :host-context(tui-primitive-textfield[data-size=\"l\"]):not(tui-primitive-textfield),:host :host-context(tui-text-area[data-size=\"l\"]):not(tui-text-area){padding:0 var(--tui-padding-l)}:host._disabled :host,:host :host-context(tui-primitive-textfield._disabled),:host :host-context(tui-text-area._disabled){pointer-events:none}:host[data-size=l]:not(._label-outside) :host,:host :host-context(tui-primitive-textfield[data-size=\"l\"]:not(._label-outside)):not(tui-primitive-textfield){padding-top:1.25rem}:host[data-size=l]:not(._label-outside) :host:-webkit-autofill+.t-content .t-placeholder,:host :host-context(tui-primitive-textfield[data-size=\"l\"]:not(._label-outside)):not(tui-primitive-textfield):-webkit-autofill+.t-content .t-placeholder{font-size:.8156rem;transform:translateY(-.625rem)}:host[data-size=m]:not(._label-outside) :host,:host :host-context(tui-primitive-textfield[data-size=\"m\"]:not(._label-outside)):not(tui-primitive-textfield){padding-top:1rem}:host[data-size=m]:not(._label-outside) :host:-webkit-autofill+.t-content .t-placeholder,:host :host-context(tui-primitive-textfield[data-size=\"m\"]:not(._label-outside)):not(tui-primitive-textfield):-webkit-autofill+.t-content .t-placeholder{font-size:.69rem;transform:translateY(-.5rem)}:host._hidden input:host,:host :host-context(tui-primitive-textfield._hidden){opacity:0;text-indent:-10em;-webkit-user-select:none}textarea:host{white-space:pre-wrap}textarea:host :host-context(tui-text-area._ios){padding-left:.8125rem}\n"], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
905
908
  i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TuiTextfieldComponent, decorators: [{
906
909
  type: i0.Component,
907
910
  args: [{
@@ -1022,6 +1025,7 @@
1022
1025
  * Generated bundle index. Do not edit.
1023
1026
  */
1024
1027
 
1028
+ exports.TUI_ICON_PADDINGS = TUI_ICON_PADDINGS;
1025
1029
  exports.TUI_PRIMITIVE_TEXTFIELD_DEFAULT_OPTIONS = TUI_PRIMITIVE_TEXTFIELD_DEFAULT_OPTIONS;
1026
1030
  exports.TUI_PRIMITIVE_TEXTFIELD_OPTIONS = TUI_PRIMITIVE_TEXTFIELD_OPTIONS;
1027
1031
  exports.TuiPrimitiveTextfieldComponent = TuiPrimitiveTextfieldComponent;