@cuby-ui/core 0.0.12 → 0.0.14

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 (48) hide show
  1. package/components/input-number/input-number.component.d.ts +9 -4
  2. package/components/input-number/input-number.module.d.ts +4 -3
  3. package/components/input-password/input-password.component.d.ts +8 -4
  4. package/components/input-password/input-password.module.d.ts +2 -1
  5. package/components/input-text/input-text.component.d.ts +9 -6
  6. package/components/input-text/input-text.module.d.ts +2 -1
  7. package/components/textarea/textarea.component.d.ts +3 -2
  8. package/directives/index.d.ts +1 -0
  9. package/directives/text-field-controller/index.d.ts +8 -0
  10. package/directives/text-field-controller/text-field-controller.module.d.ts +11 -0
  11. package/directives/text-field-controller/text-field-controller.provider.d.ts +4 -0
  12. package/directives/text-field-controller/text-field-icon-left.directive.d.ts +9 -0
  13. package/directives/text-field-controller/text-field-id.directive.d.ts +8 -0
  14. package/directives/text-field-controller/text-field-is-error.directive.d.ts +8 -0
  15. package/directives/text-field-controller/text-field-placeholder.directive.d.ts +8 -0
  16. package/directives/text-field-controller/text-field-size.directive.d.ts +9 -0
  17. package/directives/text-field-controller/text-field.controller.d.ts +20 -0
  18. package/esm2020/components/button/button.component.mjs +2 -2
  19. package/esm2020/components/context-menu/context-menu.component.mjs +3 -3
  20. package/esm2020/components/icon-button/icon-button.component.mjs +2 -2
  21. package/esm2020/components/input-number/input-number.component.mjs +35 -14
  22. package/esm2020/components/input-number/input-number.module.mjs +19 -6
  23. package/esm2020/components/input-password/input-password.component.mjs +34 -15
  24. package/esm2020/components/input-password/input-password.module.mjs +9 -4
  25. package/esm2020/components/input-text/input-text.component.mjs +34 -17
  26. package/esm2020/components/input-text/input-text.module.mjs +9 -4
  27. package/esm2020/components/textarea/textarea.component.mjs +13 -11
  28. package/esm2020/directives/index.mjs +2 -0
  29. package/esm2020/directives/text-field-controller/index.mjs +9 -0
  30. package/esm2020/directives/text-field-controller/text-field-controller.module.mjs +40 -0
  31. package/esm2020/directives/text-field-controller/text-field-controller.provider.mjs +24 -0
  32. package/esm2020/directives/text-field-controller/text-field-icon-left.directive.mjs +21 -0
  33. package/esm2020/directives/text-field-controller/text-field-id.directive.mjs +21 -0
  34. package/esm2020/directives/text-field-controller/text-field-is-error.directive.mjs +24 -0
  35. package/esm2020/directives/text-field-controller/text-field-placeholder.directive.mjs +21 -0
  36. package/esm2020/directives/text-field-controller/text-field-size.directive.mjs +24 -0
  37. package/esm2020/directives/text-field-controller/text-field.controller.mjs +25 -0
  38. package/esm2020/index.mjs +3 -2
  39. package/esm2020/interfaces/context-menu-item.mjs +1 -1
  40. package/fesm2015/cuby-ui-core.mjs +312 -68
  41. package/fesm2015/cuby-ui-core.mjs.map +1 -1
  42. package/fesm2020/cuby-ui-core.mjs +312 -68
  43. package/fesm2020/cuby-ui-core.mjs.map +1 -1
  44. package/index.d.ts +2 -1
  45. package/interfaces/context-menu-item.d.ts +1 -0
  46. package/package.json +3 -3
  47. package/styles/mixins/buttons.scss +2 -0
  48. package/styles/mixins/inputs.scss +8 -1
@@ -1,5 +1,5 @@
1
1
  import * as i0 from '@angular/core';
2
- import { Component, ChangeDetectionStrategy, InjectionToken, inject, Input, HostBinding, ChangeDetectorRef, ViewChild, NgModule, ElementRef, HostListener, forwardRef } from '@angular/core';
2
+ import { Component, ChangeDetectionStrategy, InjectionToken, inject, Input, HostBinding, ChangeDetectorRef, ViewChild, NgModule, ElementRef, HostListener, Directive, forwardRef } from '@angular/core';
3
3
  import * as i1 from '@angular/common';
4
4
  import { CommonModule, DOCUMENT } from '@angular/common';
5
5
  import { DomSanitizer } from '@angular/platform-browser';
@@ -7,7 +7,7 @@ import { cuiIsIcon, CUI_ICONS } from '@cuby-ui/icons';
7
7
  import * as i2 from '@angular/forms';
8
8
  import { NG_VALUE_ACCESSOR, FormsModule } from '@angular/forms';
9
9
  import * as i1$1 from '@cuby-ui/cdk';
10
- import { CuiAutoResizingDirective } from '@cuby-ui/cdk';
10
+ import { cuiProvide, CuiAutoResizingDirective } from '@cuby-ui/cdk';
11
11
 
12
12
  class CuiAccordionComponent {
13
13
  }
@@ -138,10 +138,10 @@ class CuiButtonComponent {
138
138
  }
139
139
  }
140
140
  CuiButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CuiButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
141
- CuiButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: CuiButtonComponent, selector: "button[cuiButton], a[cuiButton]", inputs: { shape: "shape", disabled: "disabled", isLoaderShown: "isLoaderShown", icon: "icon", iconRight: "iconRight", appearance: "appearance", size: "size" }, host: { properties: { "attr.data-shape": "this.shape", "class._disabled": "this.disabled", "class._loading": "this.isLoaderShown", "attr.data-appearance": "this.appearance", "attr.data-size": "this.size", "class._only-icon": "this.containsOnlyIcon", "disabled": "this.isDisabled" } }, viewQueries: [{ propertyName: "content", first: true, predicate: ["content"], descendants: true }], ngImport: i0, template: "<span\n class=\"c-wrapper\"\n [class.c-wrapper_invisible]=\"isLoaderShown\"\n>\n <cui-svg\n *ngIf=\"icon\"\n [icon]=\"icon\"\n [width]=\"iconDimensions.width\"\n [height]=\"iconDimensions.height\"\n [color]=\"iconColor\"\n ></cui-svg>\n <span\n #content\n *ngIf=\"!containsOnlyIcon\"\n >\n <ng-content></ng-content>\n </span>\n <cui-svg\n *ngIf=\"iconRight\"\n [icon]=\"iconRight\"\n [width]=\"iconDimensions.width\"\n [height]=\"iconDimensions.height\"\n [color]=\"iconColor\"\n ></cui-svg>\n</span>\n<cui-svg\n *ngIf=\"isLoaderShown\"\n icon=\"cuiIconLoading\"\n class=\"c-loader\"\n></cui-svg>\n", styles: [":host{padding:0;border:0;outline:none;cursor:pointer;appearance:none;background:inherit;text-decoration:none;-webkit-tap-highlight-color:transparent;font-weight:500;font-size:14px;line-height:20px;display:inline-block;position:relative;box-sizing:border-box;border-radius:8px;font-family:var(--cui-main-font)}:host:disabled{cursor:not-allowed}:host[data-shape=rounded]{border-radius:20px}:host[data-appearance=accent]{background:var(--cui-accent-800);color:var(--cui-base-0)}@media (hover: hover){:host[data-appearance=accent]:hover{background:var(--cui-accent-900)}}:host[data-appearance=accent]:active{background:var(--cui-accent-900)}:host[data-appearance=accent]:disabled{background:var(--cui-accent-800)}:host[data-appearance=secondary]{background:var(--cui-base-100);color:var(--cui-base-900)}@media (hover: hover){:host[data-appearance=secondary]:hover{background:var(--cui-base-200)}}:host[data-appearance=secondary]:active{background:var(--cui-base-200)}:host[data-appearance=secondary]:disabled{background:var(--cui-base-100)}:host[data-appearance=outlined]{border:1px solid var(--cui-base-200);background:var(--cui-base-0);color:var(--cui-base-900)}@media (hover: hover){:host[data-appearance=outlined]:hover{background:var(--cui-base-50)}}:host[data-appearance=outlined]:active{background:var(--cui-base-50)}:host[data-appearance=outlined]:disabled{background:var(--cui-base-0)}:host[data-appearance=outlined-gray]{border:1px solid var(--cui-base-200);background:var(--cui-base-10);color:var(--cui-base-900)}@media (hover: hover){:host[data-appearance=outlined-gray]:hover{background:var(--cui-base-50)}}:host[data-appearance=outlined-gray]:active{background:var(--cui-base-50)}:host[data-appearance=outlined-gray]:disabled{background:var(--cui-base-10)}:host[data-appearance=ghost]{color:var(--cui-base-900)}@media (hover: hover){:host[data-appearance=ghost]:hover{background:var(--cui-base-50)}}:host[data-appearance=ghost]:active{background:var(--cui-base-50)}:host[data-appearance=ghost]:disabled{background:inherit}:host[data-appearance=destructive]{background:var(--cui-error-500);color:var(--cui-base-0)}@media (hover: hover){:host[data-appearance=destructive]:hover{background:var(--cui-error-600)}}:host[data-appearance=destructive]:active{background:var(--cui-error-600)}:host[data-appearance=destructive]:disabled{background:var(--cui-error-500)}:host[data-appearance=link]{height:24px!important;padding:0 4px!important;color:var(--cui-info-600)}@media (hover: hover){:host[data-appearance=link]:hover{color:var(--cui-info-900)}}:host[data-appearance=link]:active{color:var(--cui-info-900)}:host[data-appearance=link]:disabled{color:var(--cui-info-600)}:host[data-size=xxs]{font-size:12px;line-height:14px;height:28px;padding:0 8px}:host[data-size=xxs][data-appearance=outlined],:host[data-size=xxs][data-appearance=outlined-gray]{padding:0 7px}:host[data-size=xxs]._only-icon{width:28px}:host[data-size=xxs] .c-wrapper{gap:6px}:host[data-size=xs]{font-size:13px;line-height:16px;height:32px;padding:0 12px}:host[data-size=xs][data-appearance=outlined],:host[data-size=xs][data-appearance=outlined-gray]{padding:0 11px}:host[data-size=xs]._only-icon{width:32px}:host[data-size=sm]{height:36px;padding:0 14px}:host[data-size=sm][data-appearance=outlined],:host[data-size=sm][data-appearance=outlined-gray]{padding:0 13px}:host[data-size=sm]._only-icon{width:36px}:host[data-size=md]{height:40px;padding:0 16px}:host[data-size=md][data-appearance=outlined],:host[data-size=md][data-appearance=outlined-gray]{padding:0 15px}:host[data-size=md]._only-icon{width:40px}:host._disabled{opacity:.5}.c-wrapper{display:flex;justify-content:center;align-items:center;gap:8px;height:100%}.c-wrapper_invisible{opacity:0}.c-loader{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: CuiSvgComponent, selector: "cui-svg[icon]", inputs: ["width", "height", "strokeWidth", "color", "icon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
141
+ CuiButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: CuiButtonComponent, selector: "button[cuiButton], a[cuiButton]", inputs: { shape: "shape", disabled: "disabled", isLoaderShown: "isLoaderShown", icon: "icon", iconRight: "iconRight", appearance: "appearance", size: "size" }, host: { properties: { "attr.data-shape": "this.shape", "class._disabled": "this.disabled", "class._loading": "this.isLoaderShown", "attr.data-appearance": "this.appearance", "attr.data-size": "this.size", "class._only-icon": "this.containsOnlyIcon", "disabled": "this.isDisabled" } }, viewQueries: [{ propertyName: "content", first: true, predicate: ["content"], descendants: true }], ngImport: i0, template: "<span\n class=\"c-wrapper\"\n [class.c-wrapper_invisible]=\"isLoaderShown\"\n>\n <cui-svg\n *ngIf=\"icon\"\n [icon]=\"icon\"\n [width]=\"iconDimensions.width\"\n [height]=\"iconDimensions.height\"\n [color]=\"iconColor\"\n ></cui-svg>\n <span\n #content\n *ngIf=\"!containsOnlyIcon\"\n >\n <ng-content></ng-content>\n </span>\n <cui-svg\n *ngIf=\"iconRight\"\n [icon]=\"iconRight\"\n [width]=\"iconDimensions.width\"\n [height]=\"iconDimensions.height\"\n [color]=\"iconColor\"\n ></cui-svg>\n</span>\n<cui-svg\n *ngIf=\"isLoaderShown\"\n icon=\"cuiIconLoading\"\n class=\"c-loader\"\n></cui-svg>\n", styles: [":host{padding:0;border:0;outline:none;cursor:pointer;appearance:none;color:inherit;font:inherit;background:inherit;text-decoration:none;-webkit-tap-highlight-color:transparent;font-weight:500;font-size:14px;line-height:20px;display:inline-block;position:relative;box-sizing:border-box;border-radius:8px;font-family:var(--cui-main-font)}:host:disabled{cursor:not-allowed}:host[data-shape=rounded]{border-radius:20px}:host[data-appearance=accent]{background:var(--cui-accent-800);color:var(--cui-base-0)}@media (hover: hover){:host[data-appearance=accent]:hover{background:var(--cui-accent-900)}}:host[data-appearance=accent]:active{background:var(--cui-accent-900)}:host[data-appearance=accent]:disabled{background:var(--cui-accent-800)}:host[data-appearance=secondary]{background:var(--cui-base-100);color:var(--cui-base-900)}@media (hover: hover){:host[data-appearance=secondary]:hover{background:var(--cui-base-200)}}:host[data-appearance=secondary]:active{background:var(--cui-base-200)}:host[data-appearance=secondary]:disabled{background:var(--cui-base-100)}:host[data-appearance=outlined]{border:1px solid var(--cui-base-200);background:var(--cui-base-0);color:var(--cui-base-900)}@media (hover: hover){:host[data-appearance=outlined]:hover{background:var(--cui-base-50)}}:host[data-appearance=outlined]:active{background:var(--cui-base-50)}:host[data-appearance=outlined]:disabled{background:var(--cui-base-0)}:host[data-appearance=outlined-gray]{border:1px solid var(--cui-base-200);background:var(--cui-base-10);color:var(--cui-base-900)}@media (hover: hover){:host[data-appearance=outlined-gray]:hover{background:var(--cui-base-50)}}:host[data-appearance=outlined-gray]:active{background:var(--cui-base-50)}:host[data-appearance=outlined-gray]:disabled{background:var(--cui-base-10)}:host[data-appearance=ghost]{color:var(--cui-base-900)}@media (hover: hover){:host[data-appearance=ghost]:hover{background:var(--cui-base-50)}}:host[data-appearance=ghost]:active{background:var(--cui-base-50)}:host[data-appearance=ghost]:disabled{background:inherit}:host[data-appearance=destructive]{background:var(--cui-error-500);color:var(--cui-base-0)}@media (hover: hover){:host[data-appearance=destructive]:hover{background:var(--cui-error-600)}}:host[data-appearance=destructive]:active{background:var(--cui-error-600)}:host[data-appearance=destructive]:disabled{background:var(--cui-error-500)}:host[data-appearance=link]{height:24px!important;padding:0 4px!important;color:var(--cui-info-600)}@media (hover: hover){:host[data-appearance=link]:hover{color:var(--cui-info-900)}}:host[data-appearance=link]:active{color:var(--cui-info-900)}:host[data-appearance=link]:disabled{color:var(--cui-info-600)}:host[data-size=xxs]{font-size:12px;line-height:14px;height:28px;padding:0 8px}:host[data-size=xxs][data-appearance=outlined],:host[data-size=xxs][data-appearance=outlined-gray]{padding:0 7px}:host[data-size=xxs]._only-icon{width:28px}:host[data-size=xxs] .c-wrapper{gap:6px}:host[data-size=xs]{font-size:13px;line-height:16px;height:32px;padding:0 12px}:host[data-size=xs][data-appearance=outlined],:host[data-size=xs][data-appearance=outlined-gray]{padding:0 11px}:host[data-size=xs]._only-icon{width:32px}:host[data-size=sm]{height:36px;padding:0 14px}:host[data-size=sm][data-appearance=outlined],:host[data-size=sm][data-appearance=outlined-gray]{padding:0 13px}:host[data-size=sm]._only-icon{width:36px}:host[data-size=md]{height:40px;padding:0 16px}:host[data-size=md][data-appearance=outlined],:host[data-size=md][data-appearance=outlined-gray]{padding:0 15px}:host[data-size=md]._only-icon{width:40px}:host._disabled{opacity:.5}.c-wrapper{display:flex;justify-content:center;align-items:center;gap:8px;height:100%}.c-wrapper_invisible{opacity:0}.c-loader{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: CuiSvgComponent, selector: "cui-svg[icon]", inputs: ["width", "height", "strokeWidth", "color", "icon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
142
142
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CuiButtonComponent, decorators: [{
143
143
  type: Component,
144
- args: [{ selector: 'button[cuiButton], a[cuiButton]', changeDetection: ChangeDetectionStrategy.OnPush, template: "<span\n class=\"c-wrapper\"\n [class.c-wrapper_invisible]=\"isLoaderShown\"\n>\n <cui-svg\n *ngIf=\"icon\"\n [icon]=\"icon\"\n [width]=\"iconDimensions.width\"\n [height]=\"iconDimensions.height\"\n [color]=\"iconColor\"\n ></cui-svg>\n <span\n #content\n *ngIf=\"!containsOnlyIcon\"\n >\n <ng-content></ng-content>\n </span>\n <cui-svg\n *ngIf=\"iconRight\"\n [icon]=\"iconRight\"\n [width]=\"iconDimensions.width\"\n [height]=\"iconDimensions.height\"\n [color]=\"iconColor\"\n ></cui-svg>\n</span>\n<cui-svg\n *ngIf=\"isLoaderShown\"\n icon=\"cuiIconLoading\"\n class=\"c-loader\"\n></cui-svg>\n", styles: [":host{padding:0;border:0;outline:none;cursor:pointer;appearance:none;background:inherit;text-decoration:none;-webkit-tap-highlight-color:transparent;font-weight:500;font-size:14px;line-height:20px;display:inline-block;position:relative;box-sizing:border-box;border-radius:8px;font-family:var(--cui-main-font)}:host:disabled{cursor:not-allowed}:host[data-shape=rounded]{border-radius:20px}:host[data-appearance=accent]{background:var(--cui-accent-800);color:var(--cui-base-0)}@media (hover: hover){:host[data-appearance=accent]:hover{background:var(--cui-accent-900)}}:host[data-appearance=accent]:active{background:var(--cui-accent-900)}:host[data-appearance=accent]:disabled{background:var(--cui-accent-800)}:host[data-appearance=secondary]{background:var(--cui-base-100);color:var(--cui-base-900)}@media (hover: hover){:host[data-appearance=secondary]:hover{background:var(--cui-base-200)}}:host[data-appearance=secondary]:active{background:var(--cui-base-200)}:host[data-appearance=secondary]:disabled{background:var(--cui-base-100)}:host[data-appearance=outlined]{border:1px solid var(--cui-base-200);background:var(--cui-base-0);color:var(--cui-base-900)}@media (hover: hover){:host[data-appearance=outlined]:hover{background:var(--cui-base-50)}}:host[data-appearance=outlined]:active{background:var(--cui-base-50)}:host[data-appearance=outlined]:disabled{background:var(--cui-base-0)}:host[data-appearance=outlined-gray]{border:1px solid var(--cui-base-200);background:var(--cui-base-10);color:var(--cui-base-900)}@media (hover: hover){:host[data-appearance=outlined-gray]:hover{background:var(--cui-base-50)}}:host[data-appearance=outlined-gray]:active{background:var(--cui-base-50)}:host[data-appearance=outlined-gray]:disabled{background:var(--cui-base-10)}:host[data-appearance=ghost]{color:var(--cui-base-900)}@media (hover: hover){:host[data-appearance=ghost]:hover{background:var(--cui-base-50)}}:host[data-appearance=ghost]:active{background:var(--cui-base-50)}:host[data-appearance=ghost]:disabled{background:inherit}:host[data-appearance=destructive]{background:var(--cui-error-500);color:var(--cui-base-0)}@media (hover: hover){:host[data-appearance=destructive]:hover{background:var(--cui-error-600)}}:host[data-appearance=destructive]:active{background:var(--cui-error-600)}:host[data-appearance=destructive]:disabled{background:var(--cui-error-500)}:host[data-appearance=link]{height:24px!important;padding:0 4px!important;color:var(--cui-info-600)}@media (hover: hover){:host[data-appearance=link]:hover{color:var(--cui-info-900)}}:host[data-appearance=link]:active{color:var(--cui-info-900)}:host[data-appearance=link]:disabled{color:var(--cui-info-600)}:host[data-size=xxs]{font-size:12px;line-height:14px;height:28px;padding:0 8px}:host[data-size=xxs][data-appearance=outlined],:host[data-size=xxs][data-appearance=outlined-gray]{padding:0 7px}:host[data-size=xxs]._only-icon{width:28px}:host[data-size=xxs] .c-wrapper{gap:6px}:host[data-size=xs]{font-size:13px;line-height:16px;height:32px;padding:0 12px}:host[data-size=xs][data-appearance=outlined],:host[data-size=xs][data-appearance=outlined-gray]{padding:0 11px}:host[data-size=xs]._only-icon{width:32px}:host[data-size=sm]{height:36px;padding:0 14px}:host[data-size=sm][data-appearance=outlined],:host[data-size=sm][data-appearance=outlined-gray]{padding:0 13px}:host[data-size=sm]._only-icon{width:36px}:host[data-size=md]{height:40px;padding:0 16px}:host[data-size=md][data-appearance=outlined],:host[data-size=md][data-appearance=outlined-gray]{padding:0 15px}:host[data-size=md]._only-icon{width:40px}:host._disabled{opacity:.5}.c-wrapper{display:flex;justify-content:center;align-items:center;gap:8px;height:100%}.c-wrapper_invisible{opacity:0}.c-loader{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}\n"] }]
144
+ args: [{ selector: 'button[cuiButton], a[cuiButton]', changeDetection: ChangeDetectionStrategy.OnPush, template: "<span\n class=\"c-wrapper\"\n [class.c-wrapper_invisible]=\"isLoaderShown\"\n>\n <cui-svg\n *ngIf=\"icon\"\n [icon]=\"icon\"\n [width]=\"iconDimensions.width\"\n [height]=\"iconDimensions.height\"\n [color]=\"iconColor\"\n ></cui-svg>\n <span\n #content\n *ngIf=\"!containsOnlyIcon\"\n >\n <ng-content></ng-content>\n </span>\n <cui-svg\n *ngIf=\"iconRight\"\n [icon]=\"iconRight\"\n [width]=\"iconDimensions.width\"\n [height]=\"iconDimensions.height\"\n [color]=\"iconColor\"\n ></cui-svg>\n</span>\n<cui-svg\n *ngIf=\"isLoaderShown\"\n icon=\"cuiIconLoading\"\n class=\"c-loader\"\n></cui-svg>\n", styles: [":host{padding:0;border:0;outline:none;cursor:pointer;appearance:none;color:inherit;font:inherit;background:inherit;text-decoration:none;-webkit-tap-highlight-color:transparent;font-weight:500;font-size:14px;line-height:20px;display:inline-block;position:relative;box-sizing:border-box;border-radius:8px;font-family:var(--cui-main-font)}:host:disabled{cursor:not-allowed}:host[data-shape=rounded]{border-radius:20px}:host[data-appearance=accent]{background:var(--cui-accent-800);color:var(--cui-base-0)}@media (hover: hover){:host[data-appearance=accent]:hover{background:var(--cui-accent-900)}}:host[data-appearance=accent]:active{background:var(--cui-accent-900)}:host[data-appearance=accent]:disabled{background:var(--cui-accent-800)}:host[data-appearance=secondary]{background:var(--cui-base-100);color:var(--cui-base-900)}@media (hover: hover){:host[data-appearance=secondary]:hover{background:var(--cui-base-200)}}:host[data-appearance=secondary]:active{background:var(--cui-base-200)}:host[data-appearance=secondary]:disabled{background:var(--cui-base-100)}:host[data-appearance=outlined]{border:1px solid var(--cui-base-200);background:var(--cui-base-0);color:var(--cui-base-900)}@media (hover: hover){:host[data-appearance=outlined]:hover{background:var(--cui-base-50)}}:host[data-appearance=outlined]:active{background:var(--cui-base-50)}:host[data-appearance=outlined]:disabled{background:var(--cui-base-0)}:host[data-appearance=outlined-gray]{border:1px solid var(--cui-base-200);background:var(--cui-base-10);color:var(--cui-base-900)}@media (hover: hover){:host[data-appearance=outlined-gray]:hover{background:var(--cui-base-50)}}:host[data-appearance=outlined-gray]:active{background:var(--cui-base-50)}:host[data-appearance=outlined-gray]:disabled{background:var(--cui-base-10)}:host[data-appearance=ghost]{color:var(--cui-base-900)}@media (hover: hover){:host[data-appearance=ghost]:hover{background:var(--cui-base-50)}}:host[data-appearance=ghost]:active{background:var(--cui-base-50)}:host[data-appearance=ghost]:disabled{background:inherit}:host[data-appearance=destructive]{background:var(--cui-error-500);color:var(--cui-base-0)}@media (hover: hover){:host[data-appearance=destructive]:hover{background:var(--cui-error-600)}}:host[data-appearance=destructive]:active{background:var(--cui-error-600)}:host[data-appearance=destructive]:disabled{background:var(--cui-error-500)}:host[data-appearance=link]{height:24px!important;padding:0 4px!important;color:var(--cui-info-600)}@media (hover: hover){:host[data-appearance=link]:hover{color:var(--cui-info-900)}}:host[data-appearance=link]:active{color:var(--cui-info-900)}:host[data-appearance=link]:disabled{color:var(--cui-info-600)}:host[data-size=xxs]{font-size:12px;line-height:14px;height:28px;padding:0 8px}:host[data-size=xxs][data-appearance=outlined],:host[data-size=xxs][data-appearance=outlined-gray]{padding:0 7px}:host[data-size=xxs]._only-icon{width:28px}:host[data-size=xxs] .c-wrapper{gap:6px}:host[data-size=xs]{font-size:13px;line-height:16px;height:32px;padding:0 12px}:host[data-size=xs][data-appearance=outlined],:host[data-size=xs][data-appearance=outlined-gray]{padding:0 11px}:host[data-size=xs]._only-icon{width:32px}:host[data-size=sm]{height:36px;padding:0 14px}:host[data-size=sm][data-appearance=outlined],:host[data-size=sm][data-appearance=outlined-gray]{padding:0 13px}:host[data-size=sm]._only-icon{width:36px}:host[data-size=md]{height:40px;padding:0 16px}:host[data-size=md][data-appearance=outlined],:host[data-size=md][data-appearance=outlined-gray]{padding:0 15px}:host[data-size=md]._only-icon{width:40px}:host._disabled{opacity:.5}.c-wrapper{display:flex;justify-content:center;align-items:center;gap:8px;height:100%}.c-wrapper_invisible{opacity:0}.c-loader{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}\n"] }]
145
145
  }], propDecorators: { shape: [{
146
146
  type: Input
147
147
  }, {
@@ -350,10 +350,10 @@ class CuiContextMenuComponent {
350
350
  }
351
351
  }
352
352
  CuiContextMenuComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CuiContextMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
353
- CuiContextMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: CuiContextMenuComponent, selector: "cui-context-menu[items][target]", inputs: { items: "items", target: "target" }, host: { listeners: { "document:click": "onClickOutside($event.target)" }, properties: { "class._hidden": "this.isHidden", "style.left.px": "this.pageX", "style.top.px": "this.pageY" } }, ngImport: i0, template: "<ul\n *ngIf=\"isVisible\"\n class=\"c-ul\"\n>\n <li *ngFor=\"let item of items; trackBy: trackByFn\">\n <button\n class=\"c-button\"\n (click)=\"onSelect(item)\"\n >\n <cui-svg\n *ngIf=\"item.icon\"\n [icon]=\"item.icon\"\n ></cui-svg>\n <span>{{ item.label }}</span>\n </button>\n </li>\n</ul>\n", styles: [":host{position:absolute;display:block;width:268px;border-radius:8px}:host._hidden{visibility:hidden}.c-ul{padding:7px 0;margin:0;list-style:none;font-weight:400;font-size:14px;line-height:20px;box-shadow:0 1px 4px #0000000a,0 1px 4px #0000000a;border:1px solid var(--cui-base-200);border-radius:inherit;background:var(--cui-base-0);color:var(--cui-base-900);font-family:var(--cui-main-font)}.c-button{padding:8px 11px 8px 0;border:0;outline:none;cursor:pointer;appearance:none;background:inherit;text-decoration:none;-webkit-tap-highlight-color:transparent;padding:8px 11px;width:100%;display:flex;gap:12px}.c-button:active{background:var(--cui-base-50)}@media (hover: hover){.c-button:hover{background:var(--cui-base-50)}}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: CuiSvgComponent, selector: "cui-svg[icon]", inputs: ["width", "height", "strokeWidth", "color", "icon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
353
+ CuiContextMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: CuiContextMenuComponent, selector: "cui-context-menu[items][target]", inputs: { items: "items", target: "target" }, host: { listeners: { "document:click": "onClickOutside($event.target)" }, properties: { "class._hidden": "this.isHidden", "style.left.px": "this.pageX", "style.top.px": "this.pageY" } }, ngImport: i0, template: "<ul\n *ngIf=\"isVisible\"\n class=\"c-ul\"\n>\n <li\n *ngFor=\"let item of items; trackBy: trackByFn\"\n [style.color]=\"item.color\"\n >\n <button\n class=\"c-button\"\n (click)=\"onSelect(item)\"\n >\n <cui-svg\n *ngIf=\"item.icon\"\n [icon]=\"item.icon\"\n [color]=\"item.color\"\n ></cui-svg>\n <span>{{ item.label }}</span>\n </button>\n </li>\n</ul>\n", styles: [":host{position:absolute;display:block;width:268px;border-radius:8px}:host._hidden{visibility:hidden}.c-ul{padding:7px 0;margin:0;list-style:none;font-weight:400;font-size:14px;line-height:20px;box-shadow:0 1px 4px #0000000a,0 1px 4px #0000000a;border:1px solid var(--cui-base-200);border-radius:inherit;background:var(--cui-base-0);color:var(--cui-base-900);font-family:var(--cui-main-font)}.c-button{padding:8px 11px 8px 0;border:0;outline:none;cursor:pointer;appearance:none;color:inherit;font:inherit;background:inherit;text-decoration:none;-webkit-tap-highlight-color:transparent;padding:8px 11px;width:100%;display:flex;align-items:center;gap:12px}.c-button:active{background:var(--cui-base-50)}@media (hover: hover){.c-button:hover{background:var(--cui-base-50)}}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: CuiSvgComponent, selector: "cui-svg[icon]", inputs: ["width", "height", "strokeWidth", "color", "icon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
354
354
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CuiContextMenuComponent, decorators: [{
355
355
  type: Component,
356
- args: [{ selector: 'cui-context-menu[items][target]', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ul\n *ngIf=\"isVisible\"\n class=\"c-ul\"\n>\n <li *ngFor=\"let item of items; trackBy: trackByFn\">\n <button\n class=\"c-button\"\n (click)=\"onSelect(item)\"\n >\n <cui-svg\n *ngIf=\"item.icon\"\n [icon]=\"item.icon\"\n ></cui-svg>\n <span>{{ item.label }}</span>\n </button>\n </li>\n</ul>\n", styles: [":host{position:absolute;display:block;width:268px;border-radius:8px}:host._hidden{visibility:hidden}.c-ul{padding:7px 0;margin:0;list-style:none;font-weight:400;font-size:14px;line-height:20px;box-shadow:0 1px 4px #0000000a,0 1px 4px #0000000a;border:1px solid var(--cui-base-200);border-radius:inherit;background:var(--cui-base-0);color:var(--cui-base-900);font-family:var(--cui-main-font)}.c-button{padding:8px 11px 8px 0;border:0;outline:none;cursor:pointer;appearance:none;background:inherit;text-decoration:none;-webkit-tap-highlight-color:transparent;padding:8px 11px;width:100%;display:flex;gap:12px}.c-button:active{background:var(--cui-base-50)}@media (hover: hover){.c-button:hover{background:var(--cui-base-50)}}\n"] }]
356
+ args: [{ selector: 'cui-context-menu[items][target]', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ul\n *ngIf=\"isVisible\"\n class=\"c-ul\"\n>\n <li\n *ngFor=\"let item of items; trackBy: trackByFn\"\n [style.color]=\"item.color\"\n >\n <button\n class=\"c-button\"\n (click)=\"onSelect(item)\"\n >\n <cui-svg\n *ngIf=\"item.icon\"\n [icon]=\"item.icon\"\n [color]=\"item.color\"\n ></cui-svg>\n <span>{{ item.label }}</span>\n </button>\n </li>\n</ul>\n", styles: [":host{position:absolute;display:block;width:268px;border-radius:8px}:host._hidden{visibility:hidden}.c-ul{padding:7px 0;margin:0;list-style:none;font-weight:400;font-size:14px;line-height:20px;box-shadow:0 1px 4px #0000000a,0 1px 4px #0000000a;border:1px solid var(--cui-base-200);border-radius:inherit;background:var(--cui-base-0);color:var(--cui-base-900);font-family:var(--cui-main-font)}.c-button{padding:8px 11px 8px 0;border:0;outline:none;cursor:pointer;appearance:none;color:inherit;font:inherit;background:inherit;text-decoration:none;-webkit-tap-highlight-color:transparent;padding:8px 11px;width:100%;display:flex;align-items:center;gap:12px}.c-button:active{background:var(--cui-base-50)}@media (hover: hover){.c-button:hover{background:var(--cui-base-50)}}\n"] }]
357
357
  }], propDecorators: { items: [{
358
358
  type: Input
359
359
  }], target: [{
@@ -432,10 +432,10 @@ class CuiIconButtonComponent {
432
432
  }
433
433
  }
434
434
  CuiIconButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CuiIconButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
435
- CuiIconButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: CuiIconButtonComponent, selector: "button[cuiIconButton][icon], a[cuiIconButton][icon]", inputs: { icon: "icon", color: "color", hoverColor: "hoverColor" }, host: { properties: { "style.--icon-hover-color": "this.hoverColor", "class._with-hover-color": "this.isWithHoverColor" } }, ngImport: i0, template: "<cui-svg\n [icon]=\"icon\"\n [width]=\"ICON_WIDTH\"\n [height]=\"ICON_HEIGHT\"\n [color]=\"color\"\n [strokeWidth]=\"ICON_STROKE_WIDTH\"\n class=\"c-icon\"\n></cui-svg>\n", styles: [":host{padding:0;border:0;outline:none;cursor:pointer;appearance:none;background:inherit;text-decoration:none;-webkit-tap-highlight-color:transparent;display:flex;justify-content:center;align-items:center;width:24px;height:24px}:host._with-hover-color:active .c-icon ::ng-deep [stroke]{stroke:var(--icon-hover-color)}:host._with-hover-color:active .c-icon ::ng-deep [fill]:not([fill=none]){fill:var(--icon-hover-color)}@media (hover: hover){:host._with-hover-color:hover .c-icon ::ng-deep [stroke]{stroke:var(--icon-hover-color)}:host._with-hover-color:hover .c-icon ::ng-deep [fill]:not([fill=none]){fill:var(--icon-hover-color)}}\n"], dependencies: [{ kind: "component", type: CuiSvgComponent, selector: "cui-svg[icon]", inputs: ["width", "height", "strokeWidth", "color", "icon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
435
+ CuiIconButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: CuiIconButtonComponent, selector: "button[cuiIconButton][icon], a[cuiIconButton][icon]", inputs: { icon: "icon", color: "color", hoverColor: "hoverColor" }, host: { properties: { "style.--icon-hover-color": "this.hoverColor", "class._with-hover-color": "this.isWithHoverColor" } }, ngImport: i0, template: "<cui-svg\n [icon]=\"icon\"\n [width]=\"ICON_WIDTH\"\n [height]=\"ICON_HEIGHT\"\n [color]=\"color\"\n [strokeWidth]=\"ICON_STROKE_WIDTH\"\n class=\"c-icon\"\n></cui-svg>\n", styles: [":host{padding:0;border:0;outline:none;cursor:pointer;appearance:none;color:inherit;font:inherit;background:inherit;text-decoration:none;-webkit-tap-highlight-color:transparent;display:flex;justify-content:center;align-items:center;width:24px;height:24px}:host._with-hover-color:active .c-icon ::ng-deep [stroke]{stroke:var(--icon-hover-color)}:host._with-hover-color:active .c-icon ::ng-deep [fill]:not([fill=none]){fill:var(--icon-hover-color)}@media (hover: hover){:host._with-hover-color:hover .c-icon ::ng-deep [stroke]{stroke:var(--icon-hover-color)}:host._with-hover-color:hover .c-icon ::ng-deep [fill]:not([fill=none]){fill:var(--icon-hover-color)}}\n"], dependencies: [{ kind: "component", type: CuiSvgComponent, selector: "cui-svg[icon]", inputs: ["width", "height", "strokeWidth", "color", "icon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
436
436
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CuiIconButtonComponent, decorators: [{
437
437
  type: Component,
438
- args: [{ selector: 'button[cuiIconButton][icon], a[cuiIconButton][icon]', changeDetection: ChangeDetectionStrategy.OnPush, template: "<cui-svg\n [icon]=\"icon\"\n [width]=\"ICON_WIDTH\"\n [height]=\"ICON_HEIGHT\"\n [color]=\"color\"\n [strokeWidth]=\"ICON_STROKE_WIDTH\"\n class=\"c-icon\"\n></cui-svg>\n", styles: [":host{padding:0;border:0;outline:none;cursor:pointer;appearance:none;background:inherit;text-decoration:none;-webkit-tap-highlight-color:transparent;display:flex;justify-content:center;align-items:center;width:24px;height:24px}:host._with-hover-color:active .c-icon ::ng-deep [stroke]{stroke:var(--icon-hover-color)}:host._with-hover-color:active .c-icon ::ng-deep [fill]:not([fill=none]){fill:var(--icon-hover-color)}@media (hover: hover){:host._with-hover-color:hover .c-icon ::ng-deep [stroke]{stroke:var(--icon-hover-color)}:host._with-hover-color:hover .c-icon ::ng-deep [fill]:not([fill=none]){fill:var(--icon-hover-color)}}\n"] }]
438
+ args: [{ selector: 'button[cuiIconButton][icon], a[cuiIconButton][icon]', changeDetection: ChangeDetectionStrategy.OnPush, template: "<cui-svg\n [icon]=\"icon\"\n [width]=\"ICON_WIDTH\"\n [height]=\"ICON_HEIGHT\"\n [color]=\"color\"\n [strokeWidth]=\"ICON_STROKE_WIDTH\"\n class=\"c-icon\"\n></cui-svg>\n", styles: [":host{padding:0;border:0;outline:none;cursor:pointer;appearance:none;color:inherit;font:inherit;background:inherit;text-decoration:none;-webkit-tap-highlight-color:transparent;display:flex;justify-content:center;align-items:center;width:24px;height:24px}:host._with-hover-color:active .c-icon ::ng-deep [stroke]{stroke:var(--icon-hover-color)}:host._with-hover-color:active .c-icon ::ng-deep [fill]:not([fill=none]){fill:var(--icon-hover-color)}@media (hover: hover){:host._with-hover-color:hover .c-icon ::ng-deep [stroke]{stroke:var(--icon-hover-color)}:host._with-hover-color:hover .c-icon ::ng-deep [fill]:not([fill=none]){fill:var(--icon-hover-color)}}\n"] }]
439
439
  }], propDecorators: { icon: [{
440
440
  type: Input
441
441
  }], color: [{
@@ -488,6 +488,177 @@ function cuiReplace(value, search, replace) {
488
488
  return value.replace(regex, replace);
489
489
  }
490
490
 
491
+ class CuiTextFieldController {
492
+ constructor(iconLeftDirective, idDirective, isErrorDirective, placeholderDirective, sizeDirective) {
493
+ this.iconLeftDirective = iconLeftDirective;
494
+ this.idDirective = idDirective;
495
+ this.isErrorDirective = isErrorDirective;
496
+ this.placeholderDirective = placeholderDirective;
497
+ this.sizeDirective = sizeDirective;
498
+ }
499
+ get iconLeft() {
500
+ return this.iconLeftDirective.iconLeft;
501
+ }
502
+ get id() {
503
+ return this.idDirective.id;
504
+ }
505
+ get isError() {
506
+ return this.isErrorDirective.isError;
507
+ }
508
+ get placeholder() {
509
+ return this.placeholderDirective.placeholder;
510
+ }
511
+ get size() {
512
+ return this.sizeDirective.size;
513
+ }
514
+ }
515
+
516
+ const CUI_TEXT_FIELD_ICON_LEFT = new InjectionToken('', {
517
+ factory: () => new CuiTextFieldIconLeftDirective()
518
+ });
519
+ class CuiTextFieldIconLeftDirective {
520
+ }
521
+ CuiTextFieldIconLeftDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CuiTextFieldIconLeftDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
522
+ CuiTextFieldIconLeftDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: CuiTextFieldIconLeftDirective, selector: "[cuiTextFieldIconLeft]", inputs: { iconLeft: ["cuiTextFieldIconLeft", "iconLeft"] }, providers: [cuiProvide(CUI_TEXT_FIELD_ICON_LEFT, CuiTextFieldIconLeftDirective)], ngImport: i0 });
523
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CuiTextFieldIconLeftDirective, decorators: [{
524
+ type: Directive,
525
+ args: [{
526
+ selector: '[cuiTextFieldIconLeft]',
527
+ providers: [cuiProvide(CUI_TEXT_FIELD_ICON_LEFT, CuiTextFieldIconLeftDirective)]
528
+ }]
529
+ }], propDecorators: { iconLeft: [{
530
+ type: Input,
531
+ args: ['cuiTextFieldIconLeft']
532
+ }] } });
533
+
534
+ const CUI_TEXT_FIELD_ID = new InjectionToken('', {
535
+ factory: () => new CuiTextFieldIdDirective()
536
+ });
537
+ class CuiTextFieldIdDirective {
538
+ }
539
+ CuiTextFieldIdDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CuiTextFieldIdDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
540
+ CuiTextFieldIdDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: CuiTextFieldIdDirective, selector: "[cuiTextFieldId]", inputs: { id: ["cuiTextFieldId", "id"] }, providers: [cuiProvide(CUI_TEXT_FIELD_ID, CuiTextFieldIdDirective)], ngImport: i0 });
541
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CuiTextFieldIdDirective, decorators: [{
542
+ type: Directive,
543
+ args: [{
544
+ selector: '[cuiTextFieldId]',
545
+ providers: [cuiProvide(CUI_TEXT_FIELD_ID, CuiTextFieldIdDirective)]
546
+ }]
547
+ }], propDecorators: { id: [{
548
+ type: Input,
549
+ args: ['cuiTextFieldId']
550
+ }] } });
551
+
552
+ const CUI_TEXT_FIELD_IS_ERROR = new InjectionToken('', {
553
+ factory: () => new CuiTextFieldIsErrorDirective()
554
+ });
555
+ class CuiTextFieldIsErrorDirective {
556
+ constructor() {
557
+ this.isError = false;
558
+ }
559
+ }
560
+ CuiTextFieldIsErrorDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CuiTextFieldIsErrorDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
561
+ CuiTextFieldIsErrorDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: CuiTextFieldIsErrorDirective, selector: "[cuiTextFieldIsError]", inputs: { isError: ["cuiTextFieldIsError", "isError"] }, providers: [cuiProvide(CUI_TEXT_FIELD_IS_ERROR, CuiTextFieldIsErrorDirective)], ngImport: i0 });
562
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CuiTextFieldIsErrorDirective, decorators: [{
563
+ type: Directive,
564
+ args: [{
565
+ selector: '[cuiTextFieldIsError]',
566
+ providers: [cuiProvide(CUI_TEXT_FIELD_IS_ERROR, CuiTextFieldIsErrorDirective)]
567
+ }]
568
+ }], propDecorators: { isError: [{
569
+ type: Input,
570
+ args: ['cuiTextFieldIsError']
571
+ }] } });
572
+
573
+ const CUI_TEXT_FIELD_PLACEHOLDER = new InjectionToken('', {
574
+ factory: () => new CuiTextFieldPlaceholderDirective()
575
+ });
576
+ class CuiTextFieldPlaceholderDirective {
577
+ }
578
+ CuiTextFieldPlaceholderDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CuiTextFieldPlaceholderDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
579
+ CuiTextFieldPlaceholderDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: CuiTextFieldPlaceholderDirective, selector: "[cuiTextFieldPlaceholder]", inputs: { placeholder: ["cuiTextFieldPlaceholder", "placeholder"] }, providers: [cuiProvide(CUI_TEXT_FIELD_PLACEHOLDER, CuiTextFieldPlaceholderDirective)], ngImport: i0 });
580
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CuiTextFieldPlaceholderDirective, decorators: [{
581
+ type: Directive,
582
+ args: [{
583
+ selector: '[cuiTextFieldPlaceholder]',
584
+ providers: [cuiProvide(CUI_TEXT_FIELD_PLACEHOLDER, CuiTextFieldPlaceholderDirective)]
585
+ }]
586
+ }], propDecorators: { placeholder: [{
587
+ type: Input,
588
+ args: ['cuiTextFieldPlaceholder']
589
+ }] } });
590
+
591
+ const CUI_TEXT_FIELD_SIZE = new InjectionToken('', {
592
+ factory: () => new CuiTextFieldSizeDirective()
593
+ });
594
+ class CuiTextFieldSizeDirective {
595
+ constructor() {
596
+ this.size = 'sm';
597
+ }
598
+ }
599
+ CuiTextFieldSizeDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CuiTextFieldSizeDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
600
+ CuiTextFieldSizeDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: CuiTextFieldSizeDirective, selector: "[cuiTextFieldSize]", inputs: { size: ["cuiTextFieldSize", "size"] }, providers: [cuiProvide(CUI_TEXT_FIELD_SIZE, CuiTextFieldSizeDirective)], ngImport: i0 });
601
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CuiTextFieldSizeDirective, decorators: [{
602
+ type: Directive,
603
+ args: [{
604
+ selector: '[cuiTextFieldSize]',
605
+ providers: [cuiProvide(CUI_TEXT_FIELD_SIZE, CuiTextFieldSizeDirective)]
606
+ }]
607
+ }], propDecorators: { size: [{
608
+ type: Input,
609
+ args: ['cuiTextFieldSize']
610
+ }] } });
611
+
612
+ class CuiTextFieldControllerModule {
613
+ }
614
+ CuiTextFieldControllerModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CuiTextFieldControllerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
615
+ CuiTextFieldControllerModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: CuiTextFieldControllerModule, declarations: [CuiTextFieldIconLeftDirective,
616
+ CuiTextFieldIdDirective,
617
+ CuiTextFieldPlaceholderDirective,
618
+ CuiTextFieldIsErrorDirective,
619
+ CuiTextFieldSizeDirective], exports: [CuiTextFieldIconLeftDirective,
620
+ CuiTextFieldIdDirective,
621
+ CuiTextFieldPlaceholderDirective,
622
+ CuiTextFieldIsErrorDirective,
623
+ CuiTextFieldSizeDirective] });
624
+ CuiTextFieldControllerModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CuiTextFieldControllerModule });
625
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CuiTextFieldControllerModule, decorators: [{
626
+ type: NgModule,
627
+ args: [{
628
+ declarations: [
629
+ CuiTextFieldIconLeftDirective,
630
+ CuiTextFieldIdDirective,
631
+ CuiTextFieldPlaceholderDirective,
632
+ CuiTextFieldIsErrorDirective,
633
+ CuiTextFieldSizeDirective
634
+ ],
635
+ exports: [
636
+ CuiTextFieldIconLeftDirective,
637
+ CuiTextFieldIdDirective,
638
+ CuiTextFieldPlaceholderDirective,
639
+ CuiTextFieldIsErrorDirective,
640
+ CuiTextFieldSizeDirective
641
+ ]
642
+ }]
643
+ }] });
644
+
645
+ const CUI_TEXT_FIELD_CONTROLLER = new InjectionToken('');
646
+ const CUI_TEXT_FILED_CONTROLLER_PROVIDER = [
647
+ {
648
+ provide: CUI_TEXT_FIELD_CONTROLLER,
649
+ useFactory: (...controllers) => {
650
+ return new CuiTextFieldController(...controllers);
651
+ },
652
+ deps: [
653
+ CUI_TEXT_FIELD_ICON_LEFT,
654
+ CUI_TEXT_FIELD_ID,
655
+ CUI_TEXT_FIELD_IS_ERROR,
656
+ CUI_TEXT_FIELD_PLACEHOLDER,
657
+ CUI_TEXT_FIELD_SIZE
658
+ ]
659
+ }
660
+ ];
661
+
491
662
  const INPUT_NUMBER_VALUE_ACCESSOR = {
492
663
  provide: NG_VALUE_ACCESSOR,
493
664
  useExisting: forwardRef(() => CuiInputNumberComponent),
@@ -496,6 +667,7 @@ const INPUT_NUMBER_VALUE_ACCESSOR = {
496
667
  class CuiInputNumberComponent {
497
668
  constructor() {
498
669
  this.changeDetectorRef = inject(ChangeDetectorRef);
670
+ this.cuiTextFieldController = inject(CUI_TEXT_FIELD_CONTROLLER);
499
671
  this.cuiInputNumberOptions = inject(CUI_INPUT_NUMBER_OPTIONS);
500
672
  this.MIN_JS_NUMBER = -(Math.pow(2, 53));
501
673
  this.MAX_JS_NUMBER = Math.pow(2, 53);
@@ -506,7 +678,6 @@ class CuiInputNumberComponent {
506
678
  this._max = this.calculateValidMaxValue(this.cuiInputNumberOptions.max);
507
679
  this.step = this.cuiInputNumberOptions.step;
508
680
  this.precision = this.cuiInputNumberOptions.precision;
509
- this.isError = false;
510
681
  }
511
682
  set min(min) {
512
683
  this._min = this.calculateValidMinValue(min);
@@ -514,6 +685,21 @@ class CuiInputNumberComponent {
514
685
  set max(max) {
515
686
  this._max = this.calculateValidMaxValue(max);
516
687
  }
688
+ get id() {
689
+ return this.cuiTextFieldController.id;
690
+ }
691
+ get placeholder() {
692
+ return this.cuiTextFieldController.placeholder;
693
+ }
694
+ get iconLeft() {
695
+ return this.cuiTextFieldController.iconLeft;
696
+ }
697
+ get size() {
698
+ return this.cuiTextFieldController.size;
699
+ }
700
+ get isError() {
701
+ return this.cuiTextFieldController.isError;
702
+ }
517
703
  writeValue(value) {
518
704
  var _a;
519
705
  this.value = (_a = value === null || value === void 0 ? void 0 : value.toString()) !== null && _a !== void 0 ? _a : null;
@@ -639,23 +825,20 @@ class CuiInputNumberComponent {
639
825
  }
640
826
  }
641
827
  CuiInputNumberComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CuiInputNumberComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
642
- CuiInputNumberComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: CuiInputNumberComponent, selector: "cui-input-number", inputs: { step: "step", precision: "precision", isError: "isError", inputId: "inputId", inputPlaceholder: "inputPlaceholder", min: "min", max: "max" }, host: { listeners: { "click": "onFocus()" }, properties: { "class._with-error": "this.isError", "class._disabled": "this.isDisabled" } }, providers: [INPUT_NUMBER_VALUE_ACCESSOR], viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true }], ngImport: i0, template: "<input\n #input\n [ngModel]=\"formattedValue\"\n [attr.id]=\"inputId\"\n [attr.placeholder]=\"inputPlaceholder\"\n type=\"text\"\n [disabled]=\"isDisabled\"\n class=\"c-input\"\n (input)=\"onInput($event)\"\n (focus)=\"onTouched()\"\n (keydown.arrowUp)=\"onArrowUp()\"\n (keydown.arrowDown)=\"onArrowDown()\"\n>\n", styles: [":host{padding:8px 13px;font-weight:400;font-size:14px;line-height:20px;display:flex;align-items:center;gap:8px;border:1px solid var(--cui-base-200);border-radius:8px;cursor:text;background:var(--cui-base-10);color:var(--cui-base-900);font-family:var(--cui-main-font)}:host:hover{border-color:var(--cui-base-300)}:host:focus-within{box-shadow:0 0 0 2px #e5ecff;border-color:var(--cui-info-600)}:host._disabled{cursor:not-allowed;opacity:.5;background:var(--cui-base-50);border-color:var(--cui-base-200)}:host._with-error{border-color:var(--cui-error-500)}:host._with-error:focus-within{box-shadow:0 0 0 2px #d92d2040}.c-input{padding:0;outline:none;margin:0;border-width:0;appearance:none;caret-color:currentColor;background:none;color:inherit;font:inherit;line-height:inherit;width:100%}.c-input:disabled{cursor:not-allowed}.c-input::placeholder{color:var(--cui-base-400)}\n"], dependencies: [{ kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
828
+ CuiInputNumberComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: CuiInputNumberComponent, selector: "cui-input-number", inputs: { step: "step", precision: "precision", min: "min", max: "max" }, host: { listeners: { "click": "onFocus()" }, properties: { "class._disabled": "this.isDisabled", "attr.data-size": "this.size", "class._with-error": "this.isError" } }, providers: [
829
+ CUI_TEXT_FILED_CONTROLLER_PROVIDER,
830
+ INPUT_NUMBER_VALUE_ACCESSOR
831
+ ], viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true }], ngImport: i0, template: "<cui-svg\n *ngIf=\"iconLeft\"\n [icon]=\"iconLeft\"\n></cui-svg>\n<input\n #input\n [ngModel]=\"formattedValue\"\n [attr.id]=\"id\"\n [attr.placeholder]=\"placeholder\"\n type=\"text\"\n [disabled]=\"isDisabled\"\n class=\"c-input\"\n (input)=\"onInput($event)\"\n (focus)=\"onTouched()\"\n (keydown.arrowUp)=\"onArrowUp()\"\n (keydown.arrowDown)=\"onArrowDown()\"\n>\n", styles: [":host{padding-right:13px;padding-left:13px;font-weight:400;font-size:14px;line-height:20px;display:flex;align-items:center;gap:8px;border:1px solid var(--cui-base-200);border-radius:8px;cursor:text;background:var(--cui-base-10);color:var(--cui-base-900);font-family:var(--cui-main-font)}:host:hover{border-color:var(--cui-base-300)}:host:focus-within{box-shadow:0 0 0 2px #e5ecff;border-color:var(--cui-info-600)}:host[data-size=sm]{padding-top:7px;padding-bottom:7px}:host[data-size=md]{padding-top:8px;padding-bottom:8px}:host._disabled{cursor:not-allowed;opacity:.5;background:var(--cui-base-50);border-color:var(--cui-base-200)}:host._with-error{border-color:var(--cui-error-500)}:host._with-error:focus-within{box-shadow:0 0 0 2px #d92d2040}.c-input{padding:0;outline:none;margin:0;border-width:0;appearance:none;caret-color:currentColor;background:none;color:inherit;font:inherit;line-height:inherit;width:100%}.c-input:disabled{cursor:not-allowed}.c-input::placeholder{color:var(--cui-base-400)}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: CuiSvgComponent, selector: "cui-svg[icon]", inputs: ["width", "height", "strokeWidth", "color", "icon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
643
832
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CuiInputNumberComponent, decorators: [{
644
833
  type: Component,
645
- args: [{ selector: 'cui-input-number', changeDetection: ChangeDetectionStrategy.OnPush, providers: [INPUT_NUMBER_VALUE_ACCESSOR], template: "<input\n #input\n [ngModel]=\"formattedValue\"\n [attr.id]=\"inputId\"\n [attr.placeholder]=\"inputPlaceholder\"\n type=\"text\"\n [disabled]=\"isDisabled\"\n class=\"c-input\"\n (input)=\"onInput($event)\"\n (focus)=\"onTouched()\"\n (keydown.arrowUp)=\"onArrowUp()\"\n (keydown.arrowDown)=\"onArrowDown()\"\n>\n", styles: [":host{padding:8px 13px;font-weight:400;font-size:14px;line-height:20px;display:flex;align-items:center;gap:8px;border:1px solid var(--cui-base-200);border-radius:8px;cursor:text;background:var(--cui-base-10);color:var(--cui-base-900);font-family:var(--cui-main-font)}:host:hover{border-color:var(--cui-base-300)}:host:focus-within{box-shadow:0 0 0 2px #e5ecff;border-color:var(--cui-info-600)}:host._disabled{cursor:not-allowed;opacity:.5;background:var(--cui-base-50);border-color:var(--cui-base-200)}:host._with-error{border-color:var(--cui-error-500)}:host._with-error:focus-within{box-shadow:0 0 0 2px #d92d2040}.c-input{padding:0;outline:none;margin:0;border-width:0;appearance:none;caret-color:currentColor;background:none;color:inherit;font:inherit;line-height:inherit;width:100%}.c-input:disabled{cursor:not-allowed}.c-input::placeholder{color:var(--cui-base-400)}\n"] }]
834
+ args: [{ selector: 'cui-input-number', changeDetection: ChangeDetectionStrategy.OnPush, providers: [
835
+ CUI_TEXT_FILED_CONTROLLER_PROVIDER,
836
+ INPUT_NUMBER_VALUE_ACCESSOR
837
+ ], template: "<cui-svg\n *ngIf=\"iconLeft\"\n [icon]=\"iconLeft\"\n></cui-svg>\n<input\n #input\n [ngModel]=\"formattedValue\"\n [attr.id]=\"id\"\n [attr.placeholder]=\"placeholder\"\n type=\"text\"\n [disabled]=\"isDisabled\"\n class=\"c-input\"\n (input)=\"onInput($event)\"\n (focus)=\"onTouched()\"\n (keydown.arrowUp)=\"onArrowUp()\"\n (keydown.arrowDown)=\"onArrowDown()\"\n>\n", styles: [":host{padding-right:13px;padding-left:13px;font-weight:400;font-size:14px;line-height:20px;display:flex;align-items:center;gap:8px;border:1px solid var(--cui-base-200);border-radius:8px;cursor:text;background:var(--cui-base-10);color:var(--cui-base-900);font-family:var(--cui-main-font)}:host:hover{border-color:var(--cui-base-300)}:host:focus-within{box-shadow:0 0 0 2px #e5ecff;border-color:var(--cui-info-600)}:host[data-size=sm]{padding-top:7px;padding-bottom:7px}:host[data-size=md]{padding-top:8px;padding-bottom:8px}:host._disabled{cursor:not-allowed;opacity:.5;background:var(--cui-base-50);border-color:var(--cui-base-200)}:host._with-error{border-color:var(--cui-error-500)}:host._with-error:focus-within{box-shadow:0 0 0 2px #d92d2040}.c-input{padding:0;outline:none;margin:0;border-width:0;appearance:none;caret-color:currentColor;background:none;color:inherit;font:inherit;line-height:inherit;width:100%}.c-input:disabled{cursor:not-allowed}.c-input::placeholder{color:var(--cui-base-400)}\n"] }]
646
838
  }], propDecorators: { step: [{
647
839
  type: Input
648
840
  }], precision: [{
649
841
  type: Input
650
- }], isError: [{
651
- type: Input
652
- }, {
653
- type: HostBinding,
654
- args: ['class._with-error']
655
- }], inputId: [{
656
- type: Input
657
- }], inputPlaceholder: [{
658
- type: Input
659
842
  }], min: [{
660
843
  type: Input
661
844
  }], max: [{
@@ -666,6 +849,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
666
849
  }], input: [{
667
850
  type: ViewChild,
668
851
  args: ['input']
852
+ }], size: [{
853
+ type: HostBinding,
854
+ args: ['attr.data-size']
855
+ }], isError: [{
856
+ type: HostBinding,
857
+ args: ['class._with-error']
669
858
  }], onFocus: [{
670
859
  type: HostListener,
671
860
  args: ['click']
@@ -674,14 +863,26 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
674
863
  class CuiInputNumberModule {
675
864
  }
676
865
  CuiInputNumberModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CuiInputNumberModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
677
- CuiInputNumberModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: CuiInputNumberModule, declarations: [CuiInputNumberComponent], imports: [CommonModule, CuiSvgModule, FormsModule], exports: [CuiInputNumberComponent] });
678
- CuiInputNumberModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CuiInputNumberModule, imports: [CommonModule, CuiSvgModule, FormsModule] });
866
+ CuiInputNumberModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: CuiInputNumberModule, declarations: [CuiInputNumberComponent], imports: [CommonModule,
867
+ FormsModule,
868
+ CuiSvgModule], exports: [CuiInputNumberComponent,
869
+ CuiTextFieldControllerModule] });
870
+ CuiInputNumberModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CuiInputNumberModule, imports: [CommonModule,
871
+ FormsModule,
872
+ CuiSvgModule, CuiTextFieldControllerModule] });
679
873
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CuiInputNumberModule, decorators: [{
680
874
  type: NgModule,
681
875
  args: [{
682
- imports: [CommonModule, CuiSvgModule, FormsModule],
876
+ imports: [
877
+ CommonModule,
878
+ FormsModule,
879
+ CuiSvgModule
880
+ ],
683
881
  declarations: [CuiInputNumberComponent],
684
- exports: [CuiInputNumberComponent]
882
+ exports: [
883
+ CuiInputNumberComponent,
884
+ CuiTextFieldControllerModule
885
+ ]
685
886
  }]
686
887
  }] });
687
888
 
@@ -693,8 +894,17 @@ const INPUT_PASSWORD_VALUE_ACCESSOR = {
693
894
  class CuiInputPasswordComponent {
694
895
  constructor() {
695
896
  this.changeDetectorRef = inject(ChangeDetectorRef);
897
+ this.cuiTextFieldController = inject(CUI_TEXT_FIELD_CONTROLLER);
696
898
  this.isPasswordHidden = true;
697
- this.isError = false;
899
+ }
900
+ get id() {
901
+ return this.cuiTextFieldController.id;
902
+ }
903
+ get placeholder() {
904
+ return this.cuiTextFieldController.placeholder;
905
+ }
906
+ get iconLeft() {
907
+ return this.cuiTextFieldController.iconLeft;
698
908
  }
699
909
  get isToggleButtonShown() {
700
910
  return !this.isDisabled;
@@ -708,6 +918,12 @@ class CuiInputPasswordComponent {
708
918
  get buttonTitle() {
709
919
  return this.isPasswordHidden ? 'Reveal password' : 'Hide password';
710
920
  }
921
+ get size() {
922
+ return this.cuiTextFieldController.size;
923
+ }
924
+ get isError() {
925
+ return this.cuiTextFieldController.isError;
926
+ }
711
927
  writeValue(value) {
712
928
  this.value = value;
713
929
  this.changeDetectorRef.markForCheck();
@@ -735,22 +951,25 @@ class CuiInputPasswordComponent {
735
951
  }
736
952
  }
737
953
  CuiInputPasswordComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CuiInputPasswordComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
738
- CuiInputPasswordComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: CuiInputPasswordComponent, selector: "cui-input-password", inputs: { isError: "isError", inputId: "inputId", inputPlaceholder: "inputPlaceholder" }, host: { properties: { "class._with-error": "this.isError", "class._disabled": "this.isDisabled" } }, providers: [INPUT_PASSWORD_VALUE_ACCESSOR], ngImport: i0, template: "<input\n [ngModel]=\"value\"\n [attr.id]=\"inputId\"\n [attr.placeholder]=\"inputPlaceholder\"\n [type]=\"type\"\n [disabled]=\"isDisabled\"\n class=\"c-input\"\n (input)=\"onInput($event)\"\n (focus)=\"onTouched()\"\n>\n<button\n *ngIf=\"isToggleButtonShown\"\n [title]=\"buttonTitle\"\n class=\"c-button\"\n (click)=\"onTogglePasswordVisibility()\"\n>\n <cui-svg\n [icon]=\"icon\"\n [width]=\"16\"\n [height]=\"16\"\n ></cui-svg>\n</button>\n", styles: [":host{padding:8px 13px;font-weight:400;font-size:14px;line-height:20px;display:flex;align-items:center;gap:8px;border:1px solid var(--cui-base-200);border-radius:8px;cursor:text;background:var(--cui-base-10);color:var(--cui-base-900);font-family:var(--cui-main-font)}:host:hover{border-color:var(--cui-base-300)}:host:focus-within{box-shadow:0 0 0 2px #e5ecff;border-color:var(--cui-info-600)}:host._disabled{cursor:not-allowed;opacity:.5;background:var(--cui-base-50);border-color:var(--cui-base-200)}:host._with-error{border-color:var(--cui-error-500)}:host._with-error:focus-within{box-shadow:0 0 0 2px #d92d2040}.c-input{padding:0;outline:none;margin:0;border-width:0;appearance:none;caret-color:currentColor;background:none;color:inherit;font:inherit;line-height:inherit;width:100%}.c-input:disabled{cursor:not-allowed}.c-input::placeholder{color:var(--cui-base-400)}.c-input::-ms-reveal{display:none}.c-input[type=password]{color:var(--cui-base-400)}.c-button{padding:0;border:0;outline:none;cursor:pointer;appearance:none;background:inherit;text-decoration:none;-webkit-tap-highlight-color:transparent}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: CuiSvgComponent, selector: "cui-svg[icon]", inputs: ["width", "height", "strokeWidth", "color", "icon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
954
+ CuiInputPasswordComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: CuiInputPasswordComponent, selector: "cui-input-password", host: { properties: { "class._disabled": "this.isDisabled", "attr.data-size": "this.size", "class._with-error": "this.isError" } }, providers: [
955
+ CUI_TEXT_FILED_CONTROLLER_PROVIDER,
956
+ INPUT_PASSWORD_VALUE_ACCESSOR
957
+ ], ngImport: i0, template: "<cui-svg\n *ngIf=\"iconLeft\"\n [icon]=\"iconLeft\"\n></cui-svg>\n<input\n [ngModel]=\"value\"\n [attr.id]=\"id\"\n [attr.placeholder]=\"placeholder\"\n [type]=\"type\"\n [disabled]=\"isDisabled\"\n class=\"c-input\"\n (input)=\"onInput($event)\"\n (focus)=\"onTouched()\"\n>\n<button\n *ngIf=\"isToggleButtonShown\"\n [title]=\"buttonTitle\"\n class=\"c-button\"\n (click)=\"onTogglePasswordVisibility()\"\n>\n <cui-svg\n [icon]=\"icon\"\n [width]=\"16\"\n [height]=\"16\"\n ></cui-svg>\n</button>\n", styles: [":host{padding-right:13px;padding-left:13px;font-weight:400;font-size:14px;line-height:20px;display:flex;align-items:center;gap:8px;border:1px solid var(--cui-base-200);border-radius:8px;cursor:text;background:var(--cui-base-10);color:var(--cui-base-900);font-family:var(--cui-main-font)}:host:hover{border-color:var(--cui-base-300)}:host:focus-within{box-shadow:0 0 0 2px #e5ecff;border-color:var(--cui-info-600)}:host[data-size=sm]{padding-top:7px;padding-bottom:7px}:host[data-size=md]{padding-top:8px;padding-bottom:8px}:host._disabled{cursor:not-allowed;opacity:.5;background:var(--cui-base-50);border-color:var(--cui-base-200)}:host._with-error{border-color:var(--cui-error-500)}:host._with-error:focus-within{box-shadow:0 0 0 2px #d92d2040}.c-input{padding:0;outline:none;margin:0;border-width:0;appearance:none;caret-color:currentColor;background:none;color:inherit;font:inherit;line-height:inherit;width:100%}.c-input:disabled{cursor:not-allowed}.c-input::placeholder{color:var(--cui-base-400)}.c-input::-ms-reveal{display:none}.c-input[type=password]{color:var(--cui-base-400)}.c-button{padding:0;border:0;outline:none;cursor:pointer;appearance:none;color:inherit;font:inherit;background:inherit;text-decoration:none;-webkit-tap-highlight-color:transparent}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: CuiSvgComponent, selector: "cui-svg[icon]", inputs: ["width", "height", "strokeWidth", "color", "icon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
739
958
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CuiInputPasswordComponent, decorators: [{
740
959
  type: Component,
741
- args: [{ selector: 'cui-input-password', changeDetection: ChangeDetectionStrategy.OnPush, providers: [INPUT_PASSWORD_VALUE_ACCESSOR], template: "<input\n [ngModel]=\"value\"\n [attr.id]=\"inputId\"\n [attr.placeholder]=\"inputPlaceholder\"\n [type]=\"type\"\n [disabled]=\"isDisabled\"\n class=\"c-input\"\n (input)=\"onInput($event)\"\n (focus)=\"onTouched()\"\n>\n<button\n *ngIf=\"isToggleButtonShown\"\n [title]=\"buttonTitle\"\n class=\"c-button\"\n (click)=\"onTogglePasswordVisibility()\"\n>\n <cui-svg\n [icon]=\"icon\"\n [width]=\"16\"\n [height]=\"16\"\n ></cui-svg>\n</button>\n", styles: [":host{padding:8px 13px;font-weight:400;font-size:14px;line-height:20px;display:flex;align-items:center;gap:8px;border:1px solid var(--cui-base-200);border-radius:8px;cursor:text;background:var(--cui-base-10);color:var(--cui-base-900);font-family:var(--cui-main-font)}:host:hover{border-color:var(--cui-base-300)}:host:focus-within{box-shadow:0 0 0 2px #e5ecff;border-color:var(--cui-info-600)}:host._disabled{cursor:not-allowed;opacity:.5;background:var(--cui-base-50);border-color:var(--cui-base-200)}:host._with-error{border-color:var(--cui-error-500)}:host._with-error:focus-within{box-shadow:0 0 0 2px #d92d2040}.c-input{padding:0;outline:none;margin:0;border-width:0;appearance:none;caret-color:currentColor;background:none;color:inherit;font:inherit;line-height:inherit;width:100%}.c-input:disabled{cursor:not-allowed}.c-input::placeholder{color:var(--cui-base-400)}.c-input::-ms-reveal{display:none}.c-input[type=password]{color:var(--cui-base-400)}.c-button{padding:0;border:0;outline:none;cursor:pointer;appearance:none;background:inherit;text-decoration:none;-webkit-tap-highlight-color:transparent}\n"] }]
742
- }], propDecorators: { isError: [{
743
- type: Input
744
- }, {
745
- type: HostBinding,
746
- args: ['class._with-error']
747
- }], inputId: [{
748
- type: Input
749
- }], inputPlaceholder: [{
750
- type: Input
751
- }], isDisabled: [{
960
+ args: [{ selector: 'cui-input-password', changeDetection: ChangeDetectionStrategy.OnPush, providers: [
961
+ CUI_TEXT_FILED_CONTROLLER_PROVIDER,
962
+ INPUT_PASSWORD_VALUE_ACCESSOR
963
+ ], template: "<cui-svg\n *ngIf=\"iconLeft\"\n [icon]=\"iconLeft\"\n></cui-svg>\n<input\n [ngModel]=\"value\"\n [attr.id]=\"id\"\n [attr.placeholder]=\"placeholder\"\n [type]=\"type\"\n [disabled]=\"isDisabled\"\n class=\"c-input\"\n (input)=\"onInput($event)\"\n (focus)=\"onTouched()\"\n>\n<button\n *ngIf=\"isToggleButtonShown\"\n [title]=\"buttonTitle\"\n class=\"c-button\"\n (click)=\"onTogglePasswordVisibility()\"\n>\n <cui-svg\n [icon]=\"icon\"\n [width]=\"16\"\n [height]=\"16\"\n ></cui-svg>\n</button>\n", styles: [":host{padding-right:13px;padding-left:13px;font-weight:400;font-size:14px;line-height:20px;display:flex;align-items:center;gap:8px;border:1px solid var(--cui-base-200);border-radius:8px;cursor:text;background:var(--cui-base-10);color:var(--cui-base-900);font-family:var(--cui-main-font)}:host:hover{border-color:var(--cui-base-300)}:host:focus-within{box-shadow:0 0 0 2px #e5ecff;border-color:var(--cui-info-600)}:host[data-size=sm]{padding-top:7px;padding-bottom:7px}:host[data-size=md]{padding-top:8px;padding-bottom:8px}:host._disabled{cursor:not-allowed;opacity:.5;background:var(--cui-base-50);border-color:var(--cui-base-200)}:host._with-error{border-color:var(--cui-error-500)}:host._with-error:focus-within{box-shadow:0 0 0 2px #d92d2040}.c-input{padding:0;outline:none;margin:0;border-width:0;appearance:none;caret-color:currentColor;background:none;color:inherit;font:inherit;line-height:inherit;width:100%}.c-input:disabled{cursor:not-allowed}.c-input::placeholder{color:var(--cui-base-400)}.c-input::-ms-reveal{display:none}.c-input[type=password]{color:var(--cui-base-400)}.c-button{padding:0;border:0;outline:none;cursor:pointer;appearance:none;color:inherit;font:inherit;background:inherit;text-decoration:none;-webkit-tap-highlight-color:transparent}\n"] }]
964
+ }], propDecorators: { isDisabled: [{
752
965
  type: HostBinding,
753
966
  args: ['class._disabled']
967
+ }], size: [{
968
+ type: HostBinding,
969
+ args: ['attr.data-size']
970
+ }], isError: [{
971
+ type: HostBinding,
972
+ args: ['class._with-error']
754
973
  }] } });
755
974
 
756
975
  class CuiInputPasswordModule {
@@ -758,10 +977,11 @@ class CuiInputPasswordModule {
758
977
  CuiInputPasswordModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CuiInputPasswordModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
759
978
  CuiInputPasswordModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: CuiInputPasswordModule, declarations: [CuiInputPasswordComponent], imports: [CommonModule,
760
979
  FormsModule,
761
- CuiSvgModule], exports: [CuiInputPasswordComponent] });
980
+ CuiSvgModule], exports: [CuiInputPasswordComponent,
981
+ CuiTextFieldControllerModule] });
762
982
  CuiInputPasswordModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CuiInputPasswordModule, imports: [CommonModule,
763
983
  FormsModule,
764
- CuiSvgModule] });
984
+ CuiSvgModule, CuiTextFieldControllerModule] });
765
985
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CuiInputPasswordModule, decorators: [{
766
986
  type: NgModule,
767
987
  args: [{
@@ -771,7 +991,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
771
991
  CuiSvgModule
772
992
  ],
773
993
  declarations: [CuiInputPasswordComponent],
774
- exports: [CuiInputPasswordComponent]
994
+ exports: [
995
+ CuiInputPasswordComponent,
996
+ CuiTextFieldControllerModule
997
+ ]
775
998
  }]
776
999
  }] });
777
1000
 
@@ -783,11 +1006,26 @@ const INPUT_TEXT_VALUE_ACCESSOR = {
783
1006
  class CuiInputTextComponent {
784
1007
  constructor() {
785
1008
  this.changeDetectorRef = inject(ChangeDetectorRef);
786
- this.isError = false;
1009
+ this.cuiTextFieldController = inject(CUI_TEXT_FIELD_CONTROLLER);
1010
+ }
1011
+ get id() {
1012
+ return this.cuiTextFieldController.id;
1013
+ }
1014
+ get placeholder() {
1015
+ return this.cuiTextFieldController.placeholder;
1016
+ }
1017
+ get iconLeft() {
1018
+ return this.cuiTextFieldController.iconLeft;
787
1019
  }
788
1020
  get isClearButtonShown() {
789
1021
  return !!(this.value && !this.isDisabled);
790
1022
  }
1023
+ get size() {
1024
+ return this.cuiTextFieldController.size;
1025
+ }
1026
+ get isError() {
1027
+ return this.cuiTextFieldController.isError;
1028
+ }
791
1029
  writeValue(value) {
792
1030
  this.value = value;
793
1031
  this.changeDetectorRef.markForCheck();
@@ -817,27 +1055,28 @@ class CuiInputTextComponent {
817
1055
  }
818
1056
  }
819
1057
  CuiInputTextComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CuiInputTextComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
820
- CuiInputTextComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: CuiInputTextComponent, selector: "cui-input-text", inputs: { isError: "isError", inputId: "inputId", inputPlaceholder: "inputPlaceholder", iconLeft: "iconLeft" }, host: { listeners: { "click": "onFocus()" }, properties: { "class._with-error": "this.isError", "class._disabled": "this.isDisabled" } }, providers: [INPUT_TEXT_VALUE_ACCESSOR], viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true }], ngImport: i0, template: "<cui-svg\n *ngIf=\"iconLeft\"\n [icon]=\"iconLeft\"\n></cui-svg>\n<input\n #input\n [ngModel]=\"value\"\n [attr.id]=\"inputId\"\n [attr.placeholder]=\"inputPlaceholder\"\n type=\"text\"\n [disabled]=\"isDisabled\"\n class=\"c-input\"\n (input)=\"onInput($event)\"\n (focus)=\"onTouched()\"\n>\n<button\n *ngIf=\"isClearButtonShown\"\n class=\"c-button\"\n (click)=\"onClear()\"\n>\n <cui-svg icon=\"cuiIconClear\"></cui-svg>\n</button>\n", styles: [":host{padding:8px 13px;font-weight:400;font-size:14px;line-height:20px;display:flex;align-items:center;gap:8px;border:1px solid var(--cui-base-200);border-radius:8px;cursor:text;background:var(--cui-base-10);color:var(--cui-base-900);font-family:var(--cui-main-font)}:host:hover{border-color:var(--cui-base-300)}:host:focus-within{box-shadow:0 0 0 2px #e5ecff;border-color:var(--cui-info-600)}:host._disabled{cursor:not-allowed;opacity:.5;background:var(--cui-base-50);border-color:var(--cui-base-200)}:host._with-error{border-color:var(--cui-error-500)}:host._with-error:focus-within{box-shadow:0 0 0 2px #d92d2040}.c-input{padding:0;outline:none;margin:0;border-width:0;appearance:none;caret-color:currentColor;background:none;color:inherit;font:inherit;line-height:inherit;width:100%}.c-input:disabled{cursor:not-allowed}.c-input::placeholder{color:var(--cui-base-400)}.c-button{padding:0;border:0;outline:none;cursor:pointer;appearance:none;background:inherit;text-decoration:none;-webkit-tap-highlight-color:transparent}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: CuiSvgComponent, selector: "cui-svg[icon]", inputs: ["width", "height", "strokeWidth", "color", "icon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
1058
+ CuiInputTextComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: CuiInputTextComponent, selector: "cui-input-text", host: { listeners: { "click": "onFocus()" }, properties: { "class._disabled": "this.isDisabled", "attr.data-size": "this.size", "class._with-error": "this.isError" } }, providers: [
1059
+ CUI_TEXT_FILED_CONTROLLER_PROVIDER,
1060
+ INPUT_TEXT_VALUE_ACCESSOR
1061
+ ], viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true }], ngImport: i0, template: "<cui-svg\n *ngIf=\"iconLeft\"\n [icon]=\"iconLeft\"\n></cui-svg>\n<input\n #input\n [ngModel]=\"value\"\n [attr.id]=\"id\"\n [attr.placeholder]=\"placeholder\"\n type=\"text\"\n [disabled]=\"isDisabled\"\n class=\"c-input\"\n (input)=\"onInput($event)\"\n (focus)=\"onTouched()\"\n>\n<button\n *ngIf=\"isClearButtonShown\"\n class=\"c-button\"\n (click)=\"onClear()\"\n>\n <cui-svg icon=\"cuiIconClear\"></cui-svg>\n</button>\n", styles: [":host{padding-right:13px;padding-left:13px;font-weight:400;font-size:14px;line-height:20px;display:flex;align-items:center;gap:8px;border:1px solid var(--cui-base-200);border-radius:8px;cursor:text;background:var(--cui-base-10);color:var(--cui-base-900);font-family:var(--cui-main-font)}:host:hover{border-color:var(--cui-base-300)}:host:focus-within{box-shadow:0 0 0 2px #e5ecff;border-color:var(--cui-info-600)}:host[data-size=sm]{padding-top:7px;padding-bottom:7px}:host[data-size=md]{padding-top:8px;padding-bottom:8px}:host._disabled{cursor:not-allowed;opacity:.5;background:var(--cui-base-50);border-color:var(--cui-base-200)}:host._with-error{border-color:var(--cui-error-500)}:host._with-error:focus-within{box-shadow:0 0 0 2px #d92d2040}.c-input{padding:0;outline:none;margin:0;border-width:0;appearance:none;caret-color:currentColor;background:none;color:inherit;font:inherit;line-height:inherit;width:100%}.c-input:disabled{cursor:not-allowed}.c-input::placeholder{color:var(--cui-base-400)}.c-button{padding:0;border:0;outline:none;cursor:pointer;appearance:none;color:inherit;font:inherit;background:inherit;text-decoration:none;-webkit-tap-highlight-color:transparent}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: CuiSvgComponent, selector: "cui-svg[icon]", inputs: ["width", "height", "strokeWidth", "color", "icon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
821
1062
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CuiInputTextComponent, decorators: [{
822
1063
  type: Component,
823
- args: [{ selector: 'cui-input-text', changeDetection: ChangeDetectionStrategy.OnPush, providers: [INPUT_TEXT_VALUE_ACCESSOR], template: "<cui-svg\n *ngIf=\"iconLeft\"\n [icon]=\"iconLeft\"\n></cui-svg>\n<input\n #input\n [ngModel]=\"value\"\n [attr.id]=\"inputId\"\n [attr.placeholder]=\"inputPlaceholder\"\n type=\"text\"\n [disabled]=\"isDisabled\"\n class=\"c-input\"\n (input)=\"onInput($event)\"\n (focus)=\"onTouched()\"\n>\n<button\n *ngIf=\"isClearButtonShown\"\n class=\"c-button\"\n (click)=\"onClear()\"\n>\n <cui-svg icon=\"cuiIconClear\"></cui-svg>\n</button>\n", styles: [":host{padding:8px 13px;font-weight:400;font-size:14px;line-height:20px;display:flex;align-items:center;gap:8px;border:1px solid var(--cui-base-200);border-radius:8px;cursor:text;background:var(--cui-base-10);color:var(--cui-base-900);font-family:var(--cui-main-font)}:host:hover{border-color:var(--cui-base-300)}:host:focus-within{box-shadow:0 0 0 2px #e5ecff;border-color:var(--cui-info-600)}:host._disabled{cursor:not-allowed;opacity:.5;background:var(--cui-base-50);border-color:var(--cui-base-200)}:host._with-error{border-color:var(--cui-error-500)}:host._with-error:focus-within{box-shadow:0 0 0 2px #d92d2040}.c-input{padding:0;outline:none;margin:0;border-width:0;appearance:none;caret-color:currentColor;background:none;color:inherit;font:inherit;line-height:inherit;width:100%}.c-input:disabled{cursor:not-allowed}.c-input::placeholder{color:var(--cui-base-400)}.c-button{padding:0;border:0;outline:none;cursor:pointer;appearance:none;background:inherit;text-decoration:none;-webkit-tap-highlight-color:transparent}\n"] }]
824
- }], propDecorators: { isError: [{
825
- type: Input
826
- }, {
827
- type: HostBinding,
828
- args: ['class._with-error']
829
- }], inputId: [{
830
- type: Input
831
- }], inputPlaceholder: [{
832
- type: Input
833
- }], iconLeft: [{
834
- type: Input
835
- }], isDisabled: [{
1064
+ args: [{ selector: 'cui-input-text', changeDetection: ChangeDetectionStrategy.OnPush, providers: [
1065
+ CUI_TEXT_FILED_CONTROLLER_PROVIDER,
1066
+ INPUT_TEXT_VALUE_ACCESSOR
1067
+ ], template: "<cui-svg\n *ngIf=\"iconLeft\"\n [icon]=\"iconLeft\"\n></cui-svg>\n<input\n #input\n [ngModel]=\"value\"\n [attr.id]=\"id\"\n [attr.placeholder]=\"placeholder\"\n type=\"text\"\n [disabled]=\"isDisabled\"\n class=\"c-input\"\n (input)=\"onInput($event)\"\n (focus)=\"onTouched()\"\n>\n<button\n *ngIf=\"isClearButtonShown\"\n class=\"c-button\"\n (click)=\"onClear()\"\n>\n <cui-svg icon=\"cuiIconClear\"></cui-svg>\n</button>\n", styles: [":host{padding-right:13px;padding-left:13px;font-weight:400;font-size:14px;line-height:20px;display:flex;align-items:center;gap:8px;border:1px solid var(--cui-base-200);border-radius:8px;cursor:text;background:var(--cui-base-10);color:var(--cui-base-900);font-family:var(--cui-main-font)}:host:hover{border-color:var(--cui-base-300)}:host:focus-within{box-shadow:0 0 0 2px #e5ecff;border-color:var(--cui-info-600)}:host[data-size=sm]{padding-top:7px;padding-bottom:7px}:host[data-size=md]{padding-top:8px;padding-bottom:8px}:host._disabled{cursor:not-allowed;opacity:.5;background:var(--cui-base-50);border-color:var(--cui-base-200)}:host._with-error{border-color:var(--cui-error-500)}:host._with-error:focus-within{box-shadow:0 0 0 2px #d92d2040}.c-input{padding:0;outline:none;margin:0;border-width:0;appearance:none;caret-color:currentColor;background:none;color:inherit;font:inherit;line-height:inherit;width:100%}.c-input:disabled{cursor:not-allowed}.c-input::placeholder{color:var(--cui-base-400)}.c-button{padding:0;border:0;outline:none;cursor:pointer;appearance:none;color:inherit;font:inherit;background:inherit;text-decoration:none;-webkit-tap-highlight-color:transparent}\n"] }]
1068
+ }], propDecorators: { isDisabled: [{
836
1069
  type: HostBinding,
837
1070
  args: ['class._disabled']
838
1071
  }], input: [{
839
1072
  type: ViewChild,
840
1073
  args: ['input']
1074
+ }], size: [{
1075
+ type: HostBinding,
1076
+ args: ['attr.data-size']
1077
+ }], isError: [{
1078
+ type: HostBinding,
1079
+ args: ['class._with-error']
841
1080
  }], onFocus: [{
842
1081
  type: HostListener,
843
1082
  args: ['click']
@@ -848,10 +1087,11 @@ class CuiInputModule {
848
1087
  CuiInputModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CuiInputModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
849
1088
  CuiInputModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: CuiInputModule, declarations: [CuiInputTextComponent], imports: [CommonModule,
850
1089
  FormsModule,
851
- CuiSvgModule], exports: [CuiInputTextComponent] });
1090
+ CuiSvgModule], exports: [CuiInputTextComponent,
1091
+ CuiTextFieldControllerModule] });
852
1092
  CuiInputModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CuiInputModule, imports: [CommonModule,
853
1093
  FormsModule,
854
- CuiSvgModule] });
1094
+ CuiSvgModule, CuiTextFieldControllerModule] });
855
1095
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CuiInputModule, decorators: [{
856
1096
  type: NgModule,
857
1097
  args: [{
@@ -861,7 +1101,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
861
1101
  CuiSvgModule
862
1102
  ],
863
1103
  declarations: [CuiInputTextComponent],
864
- exports: [CuiInputTextComponent]
1104
+ exports: [
1105
+ CuiInputTextComponent,
1106
+ CuiTextFieldControllerModule
1107
+ ]
865
1108
  }]
866
1109
  }] });
867
1110
 
@@ -895,25 +1138,26 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
895
1138
 
896
1139
  class CuiTextareaComponent {
897
1140
  constructor() {
898
- this.isError = false;
1141
+ this.cuiTextFieldController = inject(CUI_TEXT_FIELD_CONTROLLER);
899
1142
  this.rows = 4;
900
1143
  }
1144
+ get isError() {
1145
+ return this.cuiTextFieldController.isError;
1146
+ }
901
1147
  }
902
1148
  CuiTextareaComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CuiTextareaComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
903
- CuiTextareaComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: CuiTextareaComponent, selector: "textarea[cuiTextarea]", inputs: { isError: "isError", rows: "rows" }, host: { properties: { "class._with-error": "this.isError", "rows": "this.rows" } }, hostDirectives: [{ directive: i1$1.CuiAutoResizingDirective }], ngImport: i0, template: '', isInline: true, styles: [":host{padding:11px 13px 11px 0;outline:none;margin:0;border-width:0;appearance:none;caret-color:currentColor;color:inherit;font:inherit;line-height:inherit;padding:11px 13px;font-weight:400;font-size:14px;line-height:20px;box-sizing:border-box;width:100%;border:1px solid var(--cui-base-200);border-radius:8px;resize:none;background:none;color:var(--cui-base-900);font-family:var(--cui-main-font)}:host:hover{border-color:var(--cui-base-300)}:host:focus-within{box-shadow:0 0 0 2px #e5ecff;border-color:var(--cui-info-600)}:host:disabled{cursor:not-allowed;opacity:.5;background:var(--cui-base-50);border-color:var(--cui-base-200)}:host::placeholder{color:var(--cui-base-400)}:host._with-error{border-color:var(--cui-error-500)}:host._with-error:focus-within{box-shadow:0 0 0 2px #d92d2040}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
1149
+ CuiTextareaComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: CuiTextareaComponent, selector: "textarea[cuiTextarea]", inputs: { rows: "rows" }, host: { properties: { "rows": "this.rows", "class._with-error": "this.isError" } }, providers: [CUI_TEXT_FILED_CONTROLLER_PROVIDER], hostDirectives: [{ directive: i1$1.CuiAutoResizingDirective }], ngImport: i0, template: '', isInline: true, styles: [":host{padding:11px 13px 11px 0;outline:none;margin:0;border-width:0;appearance:none;caret-color:currentColor;color:inherit;font:inherit;line-height:inherit;padding:11px 13px;font-weight:400;font-size:14px;line-height:20px;box-sizing:border-box;width:100%;border:1px solid var(--cui-base-200);border-radius:8px;resize:none;background:none;color:var(--cui-base-900);font-family:var(--cui-main-font)}:host:hover{border-color:var(--cui-base-300)}:host:focus-within{box-shadow:0 0 0 2px #e5ecff;border-color:var(--cui-info-600)}:host:disabled{cursor:not-allowed;opacity:.5;background:var(--cui-base-50);border-color:var(--cui-base-200)}:host::placeholder{color:var(--cui-base-400)}:host._with-error{border-color:var(--cui-error-500)}:host._with-error:focus-within{box-shadow:0 0 0 2px #d92d2040}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
904
1150
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CuiTextareaComponent, decorators: [{
905
1151
  type: Component,
906
- args: [{ selector: 'textarea[cuiTextarea]', template: '', changeDetection: ChangeDetectionStrategy.OnPush, hostDirectives: [CuiAutoResizingDirective], styles: [":host{padding:11px 13px 11px 0;outline:none;margin:0;border-width:0;appearance:none;caret-color:currentColor;color:inherit;font:inherit;line-height:inherit;padding:11px 13px;font-weight:400;font-size:14px;line-height:20px;box-sizing:border-box;width:100%;border:1px solid var(--cui-base-200);border-radius:8px;resize:none;background:none;color:var(--cui-base-900);font-family:var(--cui-main-font)}:host:hover{border-color:var(--cui-base-300)}:host:focus-within{box-shadow:0 0 0 2px #e5ecff;border-color:var(--cui-info-600)}:host:disabled{cursor:not-allowed;opacity:.5;background:var(--cui-base-50);border-color:var(--cui-base-200)}:host::placeholder{color:var(--cui-base-400)}:host._with-error{border-color:var(--cui-error-500)}:host._with-error:focus-within{box-shadow:0 0 0 2px #d92d2040}\n"] }]
907
- }], propDecorators: { isError: [{
908
- type: Input
909
- }, {
910
- type: HostBinding,
911
- args: ['class._with-error']
912
- }], rows: [{
1152
+ args: [{ selector: 'textarea[cuiTextarea]', template: '', changeDetection: ChangeDetectionStrategy.OnPush, providers: [CUI_TEXT_FILED_CONTROLLER_PROVIDER], hostDirectives: [CuiAutoResizingDirective], styles: [":host{padding:11px 13px 11px 0;outline:none;margin:0;border-width:0;appearance:none;caret-color:currentColor;color:inherit;font:inherit;line-height:inherit;padding:11px 13px;font-weight:400;font-size:14px;line-height:20px;box-sizing:border-box;width:100%;border:1px solid var(--cui-base-200);border-radius:8px;resize:none;background:none;color:var(--cui-base-900);font-family:var(--cui-main-font)}:host:hover{border-color:var(--cui-base-300)}:host:focus-within{box-shadow:0 0 0 2px #e5ecff;border-color:var(--cui-info-600)}:host:disabled{cursor:not-allowed;opacity:.5;background:var(--cui-base-50);border-color:var(--cui-base-200)}:host::placeholder{color:var(--cui-base-400)}:host._with-error{border-color:var(--cui-error-500)}:host._with-error:focus-within{box-shadow:0 0 0 2px #d92d2040}\n"] }]
1153
+ }], propDecorators: { rows: [{
913
1154
  type: Input
914
1155
  }, {
915
1156
  type: HostBinding,
916
1157
  args: ['rows']
1158
+ }], isError: [{
1159
+ type: HostBinding,
1160
+ args: ['class._with-error']
917
1161
  }] } });
918
1162
 
919
1163
  class CuiTextareaModule {
@@ -933,5 +1177,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
933
1177
  * Generated bundle index. Do not edit.
934
1178
  */
935
1179
 
936
- export { CUI_BUTTON_DEFAULT_OPTIONS, CUI_BUTTON_OPTIONS, CuiAccordionComponent, CuiAccordionItemComponent, CuiAccordionModule, CuiButtonComponent, CuiButtonGroupComponent, CuiButtonGroupModule, CuiButtonModule, CuiContextMenuComponent, CuiContextMenuModule, CuiHintComponent, CuiHintModule, CuiIconButtonComponent, CuiIconButtonModule, CuiInputModule, CuiInputNumberComponent, CuiInputNumberModule, CuiInputPasswordComponent, CuiInputPasswordModule, CuiInputTextComponent, CuiLabelComponent, CuiLabelModule, CuiSvgComponent, CuiSvgModule, CuiTextareaComponent, CuiTextareaModule, cuiRemoveSpaces, cuiReplace };
1180
+ export { CUI_BUTTON_DEFAULT_OPTIONS, CUI_BUTTON_OPTIONS, CUI_TEXT_FIELD_CONTROLLER, CUI_TEXT_FIELD_ICON_LEFT, CUI_TEXT_FIELD_ID, CUI_TEXT_FIELD_IS_ERROR, CUI_TEXT_FIELD_PLACEHOLDER, CUI_TEXT_FIELD_SIZE, CUI_TEXT_FILED_CONTROLLER_PROVIDER, CuiAccordionComponent, CuiAccordionItemComponent, CuiAccordionModule, CuiButtonComponent, CuiButtonGroupComponent, CuiButtonGroupModule, CuiButtonModule, CuiContextMenuComponent, CuiContextMenuModule, CuiHintComponent, CuiHintModule, CuiIconButtonComponent, CuiIconButtonModule, CuiInputModule, CuiInputNumberComponent, CuiInputNumberModule, CuiInputPasswordComponent, CuiInputPasswordModule, CuiInputTextComponent, CuiLabelComponent, CuiLabelModule, CuiSvgComponent, CuiSvgModule, CuiTextFieldController, CuiTextFieldControllerModule, CuiTextFieldIconLeftDirective, CuiTextFieldIdDirective, CuiTextFieldIsErrorDirective, CuiTextFieldPlaceholderDirective, CuiTextFieldSizeDirective, CuiTextareaComponent, CuiTextareaModule, cuiRemoveSpaces, cuiReplace };
937
1181
  //# sourceMappingURL=cuby-ui-core.mjs.map