@cuby-ui/core 0.0.13 → 0.0.16

package/fesm2020/cuby-ui-core.mjs

@@ -1,13 +1,15 @@
 import * as i0 from '@angular/core';
-import { Component, ChangeDetectionStrategy, InjectionToken, inject, Input, HostBinding, ChangeDetectorRef, ViewChild, NgModule, ElementRef, HostListener, Directive, forwardRef } from '@angular/core';
+import { Component, ChangeDetectionStrategy, InjectionToken, inject, Input, HostBinding, ChangeDetectorRef, ViewChild, NgModule, EventEmitter, Output, Injector, Injectable, ElementRef, HostListener, TemplateRef, Directive } from '@angular/core';
 import * as i1 from '@angular/common';
 import { CommonModule, DOCUMENT } from '@angular/common';
 import { DomSanitizer } from '@angular/platform-browser';
 import { cuiIsIcon, CUI_ICONS } from '@cuby-ui/icons';
-import * as i2 from '@angular/forms';
+import * as i2 from '@cuby-ui/cdk';
+import { cuiCreateToken, cuiCreateTokenFromFactory, CuiDestroyService, CuiFilterPipe, CuiPopoverService, cuiProvide, CuiAutoResizingDirective } from '@cuby-ui/cdk';
+import { BehaviorSubject, takeUntil } from 'rxjs';
+import * as i2$1 from '@angular/forms';
 import { NG_VALUE_ACCESSOR, FormsModule } from '@angular/forms';
-import * as i1$1 from '@cuby-ui/cdk';
-import { cuiProvide, CuiAutoResizingDirective } from '@cuby-ui/cdk';
+import Quill from 'quill';
 
 class CuiAccordionComponent {
 }
@@ -260,13 +262,200 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                 }]
         }] });
 
+const CUI_NOTIFICATION_DEFAULT_OPTIONS = {
+    status: 'info'
+};
+const CUI_NOTIFICATION_OPTIONS = cuiCreateToken(CUI_NOTIFICATION_DEFAULT_OPTIONS);
+
+const CUI_ALERTS = cuiCreateToken(new BehaviorSubject([]));
+const CUI_ALERT_DEFAULT_OPTIONS = {
+    label: '',
+    needAutoClose: true,
+    isCloseable: true,
+    position: 'right',
+    resizing: 'fixed'
+};
+const CUI_ALERT_OPTIONS = cuiCreateTokenFromFactory(() => ({
+    ...CUI_ALERT_DEFAULT_OPTIONS,
+    ...inject(CUI_NOTIFICATION_OPTIONS)
+}));
+const CUI_ALERT_CONTEXT = new InjectionToken('');
+
+class CuiNotificationComponent {
+    constructor() {
+        this.cuiNotificationOptions = inject(CUI_NOTIFICATION_OPTIONS);
+        this.ICON_OPTIONS = {
+            info: {
+                icon: 'cuiIconInfo',
+                color: 'var(--cui-blue-500)'
+            },
+            success: {
+                icon: 'cuiIconCheckCircle',
+                color: 'var(--cui-green-500)'
+            },
+            alert: {
+                icon: 'cuiIconAlertTriangle',
+                color: 'var(--cui-yellow-400)'
+            },
+            error: {
+                icon: 'cuiIconXCircle',
+                color: 'var(--cui-red-500)'
+            },
+        };
+        this.status = this.cuiNotificationOptions.status;
+        this.isCloseable = false;
+        this.closed = new EventEmitter();
+    }
+    onClose() {
+        this.closed.next();
+    }
+}
+CuiNotificationComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CuiNotificationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+CuiNotificationComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: CuiNotificationComponent, selector: "cui-notification", inputs: { status: "status", isCloseable: "isCloseable" }, outputs: { closed: "closed" }, host: { properties: { "attr.data-status": "this.status" } }, ngImport: i0, template: "<cui-svg\n  *ngIf=\"ICON_OPTIONS[status] as iconOption\"\n  [icon]=\"iconOption.icon\"\n  [color]=\"iconOption.color\"\n></cui-svg>\n<div class=\"c-content\">\n  <ng-content></ng-content>\n</div>\n<button\n  *ngIf=\"isCloseable\"\n  cuiButton\n  appearance=\"ghost\"\n  size=\"xxs\"\n  icon=\"cuiIconX\"\n  (click)=\"onClose()\"\n></button>\n", styles: [":host{padding:16px;font-weight:400;font-size:14px;line-height:20px;display:flex;align-items:flex-start;border-radius:12px;background:var(--dark-gray-30);color:var(--cui-gray-0);font-family:var(--cui-main-font)}:host-context([cuiTheme=dark])[data-status=info]{background:var(--cui-blue-900)}:host-context([cuiTheme=dark])[data-status=success]{background:var(--cui-green-900)}:host-context([cuiTheme=dark])[data-status=alert]{background:var(--cui-yellow-900)}:host-context([cuiTheme=dark])[data-status=error]{background:var(--cui-red-900)}.c-content{flex:1;margin-left:12px;margin-right:16px}\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"] }, { kind: "component", type: CuiButtonComponent, selector: "button[cuiButton], a[cuiButton]", inputs: ["shape", "disabled", "isLoaderShown", "icon", "iconRight", "appearance", "size"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CuiNotificationComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'cui-notification', changeDetection: ChangeDetectionStrategy.OnPush, template: "<cui-svg\n  *ngIf=\"ICON_OPTIONS[status] as iconOption\"\n  [icon]=\"iconOption.icon\"\n  [color]=\"iconOption.color\"\n></cui-svg>\n<div class=\"c-content\">\n  <ng-content></ng-content>\n</div>\n<button\n  *ngIf=\"isCloseable\"\n  cuiButton\n  appearance=\"ghost\"\n  size=\"xxs\"\n  icon=\"cuiIconX\"\n  (click)=\"onClose()\"\n></button>\n", styles: [":host{padding:16px;font-weight:400;font-size:14px;line-height:20px;display:flex;align-items:flex-start;border-radius:12px;background:var(--dark-gray-30);color:var(--cui-gray-0);font-family:var(--cui-main-font)}:host-context([cuiTheme=dark])[data-status=info]{background:var(--cui-blue-900)}:host-context([cuiTheme=dark])[data-status=success]{background:var(--cui-green-900)}:host-context([cuiTheme=dark])[data-status=alert]{background:var(--cui-yellow-900)}:host-context([cuiTheme=dark])[data-status=error]{background:var(--cui-red-900)}.c-content{flex:1;margin-left:12px;margin-right:16px}\n"] }]
+        }], propDecorators: { status: [{
+                type: Input
+            }, {
+                type: HostBinding,
+                args: ['attr.data-status']
+            }], isCloseable: [{
+                type: Input
+            }], closed: [{
+                type: Output
+            }] } });
+
+class CuiAlertComponent {
+    constructor() {
+        this.context = inject(CUI_ALERT_CONTEXT);
+        this.AUTO_CLOSE_DURATION_IN_MILLISECONDS = 3000;
+    }
+    get resizing() {
+        return this.context.resizing;
+    }
+    ngOnInit() {
+        this.initAutoClose();
+    }
+    onClosed() {
+        this.context.$implicit.complete();
+    }
+    initAutoClose() {
+        if (!this.context.needAutoClose) {
+            return;
+        }
+        setTimeout(this.onClosed.bind(this), this.AUTO_CLOSE_DURATION_IN_MILLISECONDS);
+    }
+}
+CuiAlertComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CuiAlertComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+CuiAlertComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: CuiAlertComponent, selector: "cui-alert", host: { properties: { "attr.data-resizing": "this.resizing" } }, ngImport: i0, template: "<cui-notification\n  [status]=\"context.status\"\n  [isCloseable]=\"context.isCloseable\"\n  (closed)=\"onClosed()\"\n>\n  <h2 class=\"c-heading\">Title</h2>\n  {{ this.context.content }}\n</cui-notification>\n", styles: [":host{max-width:470px}:host[data-resizing=hug]{width:-moz-fit-content;width:fit-content}:host[data-resizing=fixed]{width:470px}.c-heading{font-weight:500;font-size:14px;line-height:20px;margin:0 0 8px}\n"], dependencies: [{ kind: "component", type: CuiNotificationComponent, selector: "cui-notification", inputs: ["status", "isCloseable"], outputs: ["closed"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CuiAlertComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'cui-alert', changeDetection: ChangeDetectionStrategy.OnPush, template: "<cui-notification\n  [status]=\"context.status\"\n  [isCloseable]=\"context.isCloseable\"\n  (closed)=\"onClosed()\"\n>\n  <h2 class=\"c-heading\">Title</h2>\n  {{ this.context.content }}\n</cui-notification>\n", styles: [":host{max-width:470px}:host[data-resizing=hug]{width:-moz-fit-content;width:fit-content}:host[data-resizing=fixed]{width:470px}.c-heading{font-weight:500;font-size:14px;line-height:20px;margin:0 0 8px}\n"] }]
+        }], propDecorators: { resizing: [{
+                type: HostBinding,
+                args: ['attr.data-resizing']
+            }] } });
+
+class CuiAlertsComponent {
+    constructor() {
+        this.destroy$ = inject(CuiDestroyService, { self: true });
+        this.alerts$ = inject(CUI_ALERTS);
+    }
+    ngOnInit() {
+        this.initAlertInjectorsSubscription();
+    }
+    trackByFn(_, alert) {
+        return alert.id;
+    }
+    alertsMatcher(alert, position) {
+        return alert.position === position;
+    }
+    initAlertInjectorsSubscription() {
+        this.alerts$
+            .pipe(takeUntil(this.destroy$))
+            .subscribe(dialogs => this.alertInjectors = dialogs.map(useValue => Injector.create({
+            providers: [{ provide: CUI_ALERT_CONTEXT, useValue }]
+        })));
+    }
+}
+CuiAlertsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CuiAlertsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+CuiAlertsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: CuiAlertsComponent, selector: "cui-alerts", providers: [CuiDestroyService], ngImport: i0, template: "<ng-container *ngIf=\"alerts$ | async as alerts\">\n  <div class=\"c-wrapper c-wrapper_position_center\">\n    <ng-container *ngFor=\"let alert of alerts | cuiFilter: alertsMatcher: 'center'; let i = index; trackBy: trackByFn\">\n      <ng-container *ngComponentOutlet=\"alert.component; injector: alertInjectors[i]\"></ng-container>\n    </ng-container>\n  </div>\n  <div class=\"c-wrapper c-wrapper_position_right\">\n    <ng-container *ngFor=\"let alert of alerts | cuiFilter: alertsMatcher: 'right'; let i = index; trackBy: trackByFn\">\n      <ng-container *ngComponentOutlet=\"alert.component; injector: alertInjectors[i]\"></ng-container>\n    </ng-container>\n  </div>\n</ng-container>\n", styles: [":host{display:flex;flex-direction:column;position:fixed;right:20px;bottom:20px}.c-wrapper{position:fixed;bottom:20px;display:flex;flex-direction:column;gap:16px}.c-wrapper_position_center{left:50%;transform:translate(-50%)}.c-wrapper_position_right{right:20px}\n"], dependencies: [{ kind: "directive", type: i1.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.CuiFilterPipe, name: "cuiFilter" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CuiAlertsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'cui-alerts', changeDetection: ChangeDetectionStrategy.OnPush, providers: [CuiDestroyService], template: "<ng-container *ngIf=\"alerts$ | async as alerts\">\n  <div class=\"c-wrapper c-wrapper_position_center\">\n    <ng-container *ngFor=\"let alert of alerts | cuiFilter: alertsMatcher: 'center'; let i = index; trackBy: trackByFn\">\n      <ng-container *ngComponentOutlet=\"alert.component; injector: alertInjectors[i]\"></ng-container>\n    </ng-container>\n  </div>\n  <div class=\"c-wrapper c-wrapper_position_right\">\n    <ng-container *ngFor=\"let alert of alerts | cuiFilter: alertsMatcher: 'right'; let i = index; trackBy: trackByFn\">\n      <ng-container *ngComponentOutlet=\"alert.component; injector: alertInjectors[i]\"></ng-container>\n    </ng-container>\n  </div>\n</ng-container>\n", styles: [":host{display:flex;flex-direction:column;position:fixed;right:20px;bottom:20px}.c-wrapper{position:fixed;bottom:20px;display:flex;flex-direction:column;gap:16px}.c-wrapper_position_center{left:50%;transform:translate(-50%)}.c-wrapper_position_right{right:20px}\n"] }]
+        }] });
+
+class CuiNotificationModule {
+}
+CuiNotificationModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CuiNotificationModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+CuiNotificationModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: CuiNotificationModule, declarations: [CuiNotificationComponent], imports: [CommonModule,
+        CuiSvgModule,
+        CuiButtonModule], exports: [CuiNotificationComponent] });
+CuiNotificationModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CuiNotificationModule, imports: [CommonModule,
+        CuiSvgModule,
+        CuiButtonModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CuiNotificationModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        CommonModule,
+                        CuiSvgModule,
+                        CuiButtonModule
+                    ],
+                    declarations: [CuiNotificationComponent],
+                    exports: [CuiNotificationComponent]
+                }]
+        }] });
+
+class CuiAlertModule {
+}
+CuiAlertModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CuiAlertModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+CuiAlertModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: CuiAlertModule, declarations: [CuiAlertComponent,
+        CuiAlertsComponent], imports: [CommonModule,
+        CuiFilterPipe,
+        CuiNotificationModule], exports: [CuiAlertComponent,
+        CuiAlertsComponent] });
+CuiAlertModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CuiAlertModule, imports: [CommonModule,
+        CuiNotificationModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CuiAlertModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        CommonModule,
+                        CuiFilterPipe,
+                        CuiNotificationModule
+                    ],
+                    declarations: [
+                        CuiAlertComponent,
+                        CuiAlertsComponent
+                    ],
+                    exports: [
+                        CuiAlertComponent,
+                        CuiAlertsComponent
+                    ]
+                }]
+        }] });
+
+class CuiAlertService extends CuiPopoverService {
+}
+CuiAlertService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CuiAlertService, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
+CuiAlertService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CuiAlertService, providedIn: 'root', useFactory: () => new CuiAlertService(CUI_ALERTS, CuiAlertComponent, inject(CUI_ALERT_OPTIONS)) });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CuiAlertService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                    useFactory: () => new CuiAlertService(CUI_ALERTS, CuiAlertComponent, inject(CUI_ALERT_OPTIONS))
+                }]
+        }] });
+
 class CuiButtonGroupComponent {
 }
 CuiButtonGroupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CuiButtonGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-CuiButtonGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: CuiButtonGroupComponent, selector: "cui-button-group", ngImport: i0, template: "<ng-content select=\"button[cuiButton], a[cuiButton]\"></ng-content>\n", styles: [":host{display:inline-flex}:host ::ng-deep [cuiButton]:after{content:\"\";position:absolute;top:50%;right:-.5px;z-index:1;height:80%;width:1px;border-radius:.5px;transform:translateY(-50%);background:currentColor;opacity:.5}:host ::ng-deep [cuiButton]:first-child{border-right:none;border-top-right-radius:0;border-bottom-right-radius:0}:host ::ng-deep [cuiButton]:last-child{border-left:none;border-top-left-radius:0;border-bottom-left-radius:0}:host ::ng-deep [cuiButton]:last-child:after{content:none}:host ::ng-deep [cuiButton]:not(:first-child):not(:last-child){border-left:none;border-right:none;border-radius:0}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+CuiButtonGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: CuiButtonGroupComponent, selector: "cui-button-group", ngImport: i0, template: "<ng-content select=\"button[cuiButton], a[cuiButton]\"></ng-content>\n", styles: [":host{display:inline-flex}:host ::ng-deep [cuiButton]:after{z-index:1;content:\"\";position:absolute;top:50%;right:-.5px;height:80%;width:1px;border-radius:.5px;transform:translateY(-50%);background:currentColor;opacity:.5}:host ::ng-deep [cuiButton]:first-child{border-right:none;border-top-right-radius:0;border-bottom-right-radius:0}:host ::ng-deep [cuiButton]:last-child{border-left:none;border-top-left-radius:0;border-bottom-left-radius:0}:host ::ng-deep [cuiButton]:last-child:after{content:none}:host ::ng-deep [cuiButton]:not(:first-child):not(:last-child){border-left:none;border-right:none;border-radius:0}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CuiButtonGroupComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'cui-button-group', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content select=\"button[cuiButton], a[cuiButton]\"></ng-content>\n", styles: [":host{display:inline-flex}:host ::ng-deep [cuiButton]:after{content:\"\";position:absolute;top:50%;right:-.5px;z-index:1;height:80%;width:1px;border-radius:.5px;transform:translateY(-50%);background:currentColor;opacity:.5}:host ::ng-deep [cuiButton]:first-child{border-right:none;border-top-right-radius:0;border-bottom-right-radius:0}:host ::ng-deep [cuiButton]:last-child{border-left:none;border-top-left-radius:0;border-bottom-left-radius:0}:host ::ng-deep [cuiButton]:last-child:after{content:none}:host ::ng-deep [cuiButton]:not(:first-child):not(:last-child){border-left:none;border-right:none;border-radius:0}\n"] }]
+            args: [{ selector: 'cui-button-group', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content select=\"button[cuiButton], a[cuiButton]\"></ng-content>\n", styles: [":host{display:inline-flex}:host ::ng-deep [cuiButton]:after{z-index:1;content:\"\";position:absolute;top:50%;right:-.5px;height:80%;width:1px;border-radius:.5px;transform:translateY(-50%);background:currentColor;opacity:.5}:host ::ng-deep [cuiButton]:first-child{border-right:none;border-top-right-radius:0;border-bottom-right-radius:0}:host ::ng-deep [cuiButton]:last-child{border-left:none;border-top-left-radius:0;border-bottom-left-radius:0}:host ::ng-deep [cuiButton]:last-child:after{content:none}:host ::ng-deep [cuiButton]:not(:first-child):not(:last-child){border-left:none;border-right:none;border-radius:0}\n"] }]
         }] });
 
 class CuiButtonGroupModule {
@@ -349,10 +538,10 @@ class CuiContextMenuComponent {
     }
 }
 CuiContextMenuComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CuiContextMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-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;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 });
+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;z-index:2;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 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CuiContextMenuComponent, decorators: [{
             type: Component,
-            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;gap:12px}.c-button:active{background:var(--cui-base-50)}@media (hover: hover){.c-button:hover{background:var(--cui-base-50)}}\n"] }]
+            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;z-index:2;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"] }]
         }], propDecorators: { items: [{
                 type: Input
             }], target: [{
@@ -390,102 +579,101 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                 }]
         }] });
 
-class CuiHintComponent {
+const CUI_DIALOGS = cuiCreateToken(new BehaviorSubject([]));
+const CUI_DIALOG_DEFAULT_OPTIONS = {
+    label: ''
+};
+const CUI_DIALOG_OPTIONS = cuiCreateToken(CUI_DIALOG_DEFAULT_OPTIONS);
+const CUI_DIALOG_CONTEXT = new InjectionToken('');
+
+class CuiDialogComponent {
     constructor() {
-        this.hintType = 'info';
+        this.context = inject(CUI_DIALOG_CONTEXT);
+    }
+    get isContentTemplateRef() {
+        return this.context.content instanceof TemplateRef;
+    }
+    get contentTemplateRef() {
+        return this.context.content;
+    }
+    get contentType() {
+        return this.context.content;
+    }
+    onClose() {
+        this.context.$implicit.complete();
     }
 }
-CuiHintComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CuiHintComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-CuiHintComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: CuiHintComponent, selector: "cui-hint", inputs: { hintType: "hintType" }, host: { properties: { "attr.data-hint-type": "this.hintType" } }, ngImport: i0, template: "<ng-content></ng-content>\n", styles: [":host{font-weight:400;font-size:14px;line-height:20px;font-family:var(--cui-main-font)}:host[data-hint-type=info]{color:var(--cui-base-600)}:host[data-hint-type=error]{color:var(--cui-error-500)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CuiHintComponent, decorators: [{
+CuiDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CuiDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+CuiDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: CuiDialogComponent, selector: "cui-dialog", ngImport: i0, template: "<header *ngIf=\"context.label\" class=\"c-header\">\n  <h2 class=\"c-heading\">{{ context.label }}</h2>\n  <button\n    cuiButton\n    appearance=\"ghost\"\n    icon=\"cuiIconX\"\n    (click)=\"onClose()\"\n  ></button>\n</header>\n<div class=\"\u0441-content\">\n  <ng-container *ngIf=\"isContentTemplateRef; else contentComponent\">\n    <ng-container *ngTemplateOutlet=\"contentTemplateRef\"></ng-container>\n  </ng-container>\n  <ng-template #contentComponent>\n    <ng-container *ngComponentOutlet=\"contentType\"></ng-container>\n  </ng-template>\n</div>\n<footer class=\"c-footer\">\n  Footer\n</footer>\n", styles: ["@charset \"UTF-8\";:host{box-shadow:0 2px 4px -1px #0000000f,0 4px 6px -1px #0000001a;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);border-radius:12px;background:var(--cui-base-0);font-family:var(--cui-main-font)}.c-header{padding:24px 24px 16px;display:flex;justify-content:space-between;gap:8px}.c-heading{font-weight:500;font-size:20px;line-height:30px;min-height:36px;margin:0;overflow-wrap:anywhere}.\\441-content{padding:16px 24px}.c-footer{padding:16px 24px 24px}\n"], dependencies: [{ kind: "directive", type: i1.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: CuiButtonComponent, selector: "button[cuiButton], a[cuiButton]", inputs: ["shape", "disabled", "isLoaderShown", "icon", "iconRight", "appearance", "size"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CuiDialogComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'cui-hint', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content></ng-content>\n", styles: [":host{font-weight:400;font-size:14px;line-height:20px;font-family:var(--cui-main-font)}:host[data-hint-type=info]{color:var(--cui-base-600)}:host[data-hint-type=error]{color:var(--cui-error-500)}\n"] }]
-        }], propDecorators: { hintType: [{
-                type: Input
-            }, {
-                type: HostBinding,
-                args: ['attr.data-hint-type']
-            }] } });
-
-class CuiHintModule {
-}
-CuiHintModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CuiHintModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-CuiHintModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: CuiHintModule, declarations: [CuiHintComponent], exports: [CuiHintComponent] });
-CuiHintModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CuiHintModule });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CuiHintModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [CuiHintComponent],
-                    exports: [CuiHintComponent]
-                }]
+            args: [{ selector: 'cui-dialog', changeDetection: ChangeDetectionStrategy.OnPush, template: "<header *ngIf=\"context.label\" class=\"c-header\">\n  <h2 class=\"c-heading\">{{ context.label }}</h2>\n  <button\n    cuiButton\n    appearance=\"ghost\"\n    icon=\"cuiIconX\"\n    (click)=\"onClose()\"\n  ></button>\n</header>\n<div class=\"\u0441-content\">\n  <ng-container *ngIf=\"isContentTemplateRef; else contentComponent\">\n    <ng-container *ngTemplateOutlet=\"contentTemplateRef\"></ng-container>\n  </ng-container>\n  <ng-template #contentComponent>\n    <ng-container *ngComponentOutlet=\"contentType\"></ng-container>\n  </ng-template>\n</div>\n<footer class=\"c-footer\">\n  Footer\n</footer>\n", styles: ["@charset \"UTF-8\";:host{box-shadow:0 2px 4px -1px #0000000f,0 4px 6px -1px #0000001a;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);border-radius:12px;background:var(--cui-base-0);font-family:var(--cui-main-font)}.c-header{padding:24px 24px 16px;display:flex;justify-content:space-between;gap:8px}.c-heading{font-weight:500;font-size:20px;line-height:30px;min-height:36px;margin:0;overflow-wrap:anywhere}.\\441-content{padding:16px 24px}.c-footer{padding:16px 24px 24px}\n"] }]
         }] });
 
-class CuiIconButtonComponent {
+class CuiDialogsComponent {
     constructor() {
-        this.ICON_WIDTH = 16;
-        this.ICON_HEIGHT = 16;
-        this.ICON_STROKE_WIDTH = 1.5;
+        this.destroy$ = inject(CuiDestroyService, { self: true });
+        this.dialogs$ = inject(CUI_DIALOGS);
     }
-    get isWithHoverColor() {
-        return !!this.hoverColor;
+    ngOnInit() {
+        this.initDialogInjectorsSubscription();
+    }
+    trackByFn(_, dialog) {
+        return dialog.id;
+    }
+    initDialogInjectorsSubscription() {
+        this.dialogs$
+            .pipe(takeUntil(this.destroy$))
+            .subscribe(dialogs => this.dialogInjectors = dialogs.map(useValue => Injector.create({
+            providers: [{ provide: CUI_DIALOG_CONTEXT, useValue }]
+        })));
     }
 }
-CuiIconButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CuiIconButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-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 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CuiIconButtonComponent, decorators: [{
+CuiDialogsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CuiDialogsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+CuiDialogsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: CuiDialogsComponent, selector: "cui-dialogs", providers: [CuiDestroyService], ngImport: i0, template: "<ng-container *ngIf=\"dialogs$ | async as dialogs\">\n  <div\n    *ngIf=\"dialogs.length\"\n    class=\"c-overlay\"\n  ></div>\n  <ng-container *ngFor=\"let dialog of dialogs; let i = index; trackBy: trackByFn\">\n    <ng-container *ngComponentOutlet=\"dialog.component; injector: dialogInjectors[i]\"></ng-container>\n  </ng-container>\n</ng-container>\n", styles: [".c-overlay{position:fixed;inset:0;background:var(--cui-base-900);opacity:.3}\n"], dependencies: [{ kind: "directive", type: i1.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CuiDialogsComponent, decorators: [{
             type: Component,
-            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"] }]
-        }], propDecorators: { icon: [{
-                type: Input
-            }], color: [{
-                type: Input
-            }], hoverColor: [{
-                type: Input
-            }, {
-                type: HostBinding,
-                args: ['style.--icon-hover-color']
-            }], isWithHoverColor: [{
-                type: HostBinding,
-                args: ['class._with-hover-color']
-            }] } });
+            args: [{ selector: 'cui-dialogs', changeDetection: ChangeDetectionStrategy.OnPush, providers: [CuiDestroyService], template: "<ng-container *ngIf=\"dialogs$ | async as dialogs\">\n  <div\n    *ngIf=\"dialogs.length\"\n    class=\"c-overlay\"\n  ></div>\n  <ng-container *ngFor=\"let dialog of dialogs; let i = index; trackBy: trackByFn\">\n    <ng-container *ngComponentOutlet=\"dialog.component; injector: dialogInjectors[i]\"></ng-container>\n  </ng-container>\n</ng-container>\n", styles: [".c-overlay{position:fixed;inset:0;background:var(--cui-base-900);opacity:.3}\n"] }]
+        }] });
 
-class CuiIconButtonModule {
+class CuiDialogModule {
 }
-CuiIconButtonModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CuiIconButtonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-CuiIconButtonModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: CuiIconButtonModule, declarations: [CuiIconButtonComponent], imports: [CommonModule,
-        CuiSvgModule], exports: [CuiIconButtonComponent] });
-CuiIconButtonModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CuiIconButtonModule, imports: [CommonModule,
-        CuiSvgModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CuiIconButtonModule, decorators: [{
+CuiDialogModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CuiDialogModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+CuiDialogModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: CuiDialogModule, declarations: [CuiDialogComponent,
+        CuiDialogsComponent], imports: [CommonModule,
+        CuiButtonModule], exports: [CuiDialogComponent,
+        CuiDialogsComponent] });
+CuiDialogModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CuiDialogModule, imports: [CommonModule,
+        CuiButtonModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CuiDialogModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [
                         CommonModule,
-                        CuiSvgModule
+                        CuiButtonModule
                     ],
-                    declarations: [CuiIconButtonComponent],
-                    exports: [CuiIconButtonComponent]
+                    declarations: [
+                        CuiDialogComponent,
+                        CuiDialogsComponent
+                    ],
+                    exports: [
+                        CuiDialogComponent,
+                        CuiDialogsComponent
+                    ]
                 }]
         }] });
 
-const CUI_INPUT_NUMBER_DEFAULT_OPTIONS = {
-    min: -Infinity,
-    max: Infinity,
-    step: 1,
-    precision: 3
-};
-const CUI_INPUT_NUMBER_OPTIONS = new InjectionToken('', {
-    factory: () => CUI_INPUT_NUMBER_DEFAULT_OPTIONS
-});
-
-function cuiRemoveSpaces(value) {
-    return value.replace(/\s+/g, '');
-}
-
-function cuiReplace(value, search, replace) {
-    const regex = new RegExp(search.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'), 'g');
-    return value.replace(regex, replace);
+class CuiDialogService extends CuiPopoverService {
 }
+CuiDialogService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CuiDialogService, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
+CuiDialogService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CuiDialogService, providedIn: 'root', useFactory: () => new CuiDialogService(CUI_DIALOGS, CuiDialogComponent, inject(CUI_DIALOG_OPTIONS)) });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CuiDialogService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                    useFactory: () => new CuiDialogService(CUI_DIALOGS, CuiDialogComponent, inject(CUI_DIALOG_OPTIONS))
+                }]
+        }] });
 
 class CuiTextFieldController {
     constructor(iconLeftDirective, idDirective, isErrorDirective, placeholderDirective, sizeDirective) {
@@ -658,11 +846,279 @@ const CUI_TEXT_FILED_CONTROLLER_PROVIDER = [
     }
 ];
 
-const INPUT_NUMBER_VALUE_ACCESSOR = {
-    provide: NG_VALUE_ACCESSOR,
-    useExisting: forwardRef(() => CuiInputNumberComponent),
-    multi: true
+class CuiEditorComponent {
+    constructor() {
+        this.ICONS = {
+            align: {
+                '': `
+        <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+          <path d="M7.5 3.75H16.25V5H7.5V3.75ZM7.5 7.5H13.75V8.75H7.5V7.5ZM7.5 11.25H16.25V12.5H7.5V11.25ZM7.5 15H13.75V16.25H7.5V15ZM3.75 2.5H5V17.5H3.75V2.5Z" fill="currentColor"/>
+        </svg>
+      `,
+                center: `
+        <svg width="20" height="20" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+          <path d="M6 6H26V8H6V6ZM10 12H22V14H10V12ZM6 18H26V20H6V18ZM10 24H22V26H10V24Z" fill="currentColor"/>
+        </svg>
+      `,
+                justify: `
+        <svg width="20" height="20" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+          <path d="M6 6H26V8H6V6ZM6 12H26V14H6V12ZM6 18H26V20H6V18ZM6 24H26V26H6V24Z" fill="currentColor"/>
+        </svg>
+      `,
+                right: `
+        <svg width="20" height="20" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+          <path d="M6 6H20V8H6V6ZM10 12H20V14H10V12ZM6 18H20V20H6V18ZM10 24H20V26H10V24ZM24 4H26V28H24V4Z" fill="currentColor"/>
+        </svg>
+      `
+            },
+            bold: `
+      <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path d="M11.4062 15.625H5.625V4.375H10.9375C11.5639 4.37504 12.1771 4.55435 12.7048 4.89174C13.2325 5.22914 13.6526 5.71052 13.9155 6.27903C14.1784 6.84754 14.2731 7.47942 14.1884 8.10001C14.1037 8.72061 13.8431 9.30399 13.4375 9.78125C13.9673 10.205 14.3528 10.7825 14.5408 11.4344C14.7289 12.0862 14.7102 12.7803 14.4875 13.4211C14.2647 14.0619 13.8488 14.6179 13.297 15.0126C12.7452 15.4073 12.0847 15.6213 11.4062 15.625ZM7.5 13.75H11.3937C11.5784 13.75 11.7613 13.7136 11.9319 13.643C12.1025 13.5723 12.2575 13.4687 12.3881 13.3381C12.5187 13.2075 12.6223 13.0525 12.693 12.8819C12.7636 12.7113 12.8 12.5284 12.8 12.3438C12.8 12.1591 12.7636 11.9762 12.693 11.8056C12.6223 11.635 12.5187 11.48 12.3881 11.3494C12.2575 11.2188 12.1025 11.1152 11.9319 11.0445C11.7613 10.9739 11.5784 10.9375 11.3937 10.9375H7.5V13.75ZM7.5 9.0625H10.9375C11.1222 9.0625 11.305 9.02613 11.4756 8.95546C11.6463 8.88478 11.8013 8.7812 11.9319 8.65062C12.0625 8.52004 12.166 8.36501 12.2367 8.1944C12.3074 8.02378 12.3438 7.84092 12.3438 7.65625C12.3438 7.47158 12.3074 7.28872 12.2367 7.1181C12.166 6.94749 12.0625 6.79246 11.9319 6.66188C11.8013 6.5313 11.6463 6.42772 11.4756 6.35704C11.305 6.28637 11.1222 6.25 10.9375 6.25H7.5V9.0625Z" fill="currentColor"/>
+      </svg>
+    `,
+            italic: `
+      <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path d="M15.625 5.625V4.375H7.5V5.625H10.7125L7.98125 14.375H4.375V15.625H12.5V14.375H9.2875L12.0187 5.625H15.625Z" fill="currentColor"/>
+      </svg>
+    `,
+            underline: `
+      <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path d="M2.5 16.25H17.5V17.5H2.5V16.25ZM10 14.375C8.83968 14.375 7.72688 13.9141 6.90641 13.0936C6.08594 12.2731 5.625 11.1603 5.625 10V3.125H6.875V10C6.875 10.8288 7.20424 11.6237 7.79029 12.2097C8.37634 12.7958 9.1712 13.125 10 13.125C10.8288 13.125 11.6237 12.7958 12.2097 12.2097C12.7958 11.6237 13.125 10.8288 13.125 10V3.125H14.375V10C14.375 11.1603 13.9141 12.2731 13.0936 13.0936C12.2731 13.9141 11.1603 14.375 10 14.375Z" fill="currentColor"/>
+      </svg>
+    `,
+            strike: `
+      <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path d="M17.5 9.37538H11.2225C10.945 9.30076 10.6662 9.23096 10.3863 9.16601C8.63125 8.75101 7.63875 8.44726 7.63875 7.02663C7.6245 6.78139 7.66081 6.53584 7.74542 6.30522C7.83004 6.0746 7.96115 5.86384 8.13062 5.68601C8.6615 5.24944 9.32644 5.00889 10.0137 5.00476C11.7825 4.96101 12.5981 5.56101 13.265 6.47351L14.2744 5.73601C13.8019 5.05748 13.1578 4.51654 12.4078 4.16845C11.6578 3.82036 10.8288 3.6776 10.0056 3.75476C8.99439 3.76121 8.01887 4.12947 7.25563 4.79288C6.96634 5.08632 6.74024 5.4359 6.59125 5.82008C6.44227 6.20426 6.37356 6.61488 6.38937 7.02663C6.36197 7.47718 6.4466 7.92751 6.63572 8.33737C6.82483 8.74723 7.11254 9.10385 7.47312 9.37538H2.5V10.6254H11.0325C12.2619 10.9816 12.9969 11.4454 13.0156 12.7241C13.0359 12.9973 12.9985 13.2717 12.9056 13.5294C12.8128 13.7871 12.6667 14.0223 12.4769 14.2198C11.8155 14.7411 10.9938 15.017 10.1519 15.0004C9.52345 14.9822 8.90738 14.8213 8.35029 14.5299C7.7932 14.2385 7.30966 13.8243 6.93625 13.3185L5.97812 14.121C6.46358 14.768 7.08994 15.2959 7.80972 15.6648C8.52951 16.0338 9.32384 16.234 10.1325 16.2504H10.195C11.3492 16.2636 12.4695 15.86 13.35 15.1135C13.6625 14.7984 13.9054 14.4213 14.0632 14.0065C14.2209 13.5917 14.2898 13.1485 14.2656 12.7054C14.289 11.9474 14.0332 11.2072 13.5469 10.6254H17.5V9.37538Z" fill="currentColor"/>
+      </svg>
+    `,
+            'code-block': `
+      <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path d="M19.375 10L15 14.375L14.1187 13.4938L17.6063 10L14.1187 6.50625L15 5.625L19.375 10ZM0.625 10L5 5.625L5.88125 6.50625L2.39375 10L5.88125 13.4938L5 14.375L0.625 10Z" fill="currentColor"/>
+      </svg>
+    `,
+            list: {
+                bullet: `
+        <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+          <path d="M4.375 7.5C5.41053 7.5 6.25 6.66053 6.25 5.625C6.25 4.58947 5.41053 3.75 4.375 3.75C3.33947 3.75 2.5 4.58947 2.5 5.625C2.5 6.66053 3.33947 7.5 4.375 7.5Z" fill="currentColor"/>
+          <path d="M4.375 16.25C5.41053 16.25 6.25 15.4105 6.25 14.375C6.25 13.3395 5.41053 12.5 4.375 12.5C3.33947 12.5 2.5 13.3395 2.5 14.375C2.5 15.4105 3.33947 16.25 4.375 16.25Z" fill="currentColor"/>
+          <path d="M10 13.75H18.75V15H10V13.75ZM10 5H18.75V6.25H10V5Z" fill="currentColor"/>
+        </svg>
+      `,
+                ordered: `
+        <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+          <path d="M10 13.75H18.75V15H10V13.75ZM10 5H18.75V6.25H10V5ZM5 7.5V2.5H3.75V3.125H2.5V4.375H3.75V7.5H2.5V8.75H6.25V7.5H5ZM6.25 17.5H2.5V15C2.5 14.6685 2.6317 14.3505 2.86612 14.1161C3.10054 13.8817 3.41848 13.75 3.75 13.75H5V12.5H2.5V11.25H5C5.33152 11.25 5.64946 11.3817 5.88388 11.6161C6.1183 11.8505 6.25 12.1685 6.25 12.5V13.75C6.25 14.0815 6.1183 14.3995 5.88388 14.6339C5.64946 14.8683 5.33152 15 5 15H3.75V16.25H6.25V17.5Z" fill="currentColor"/>
+        </svg>
+      `,
+            },
+            link: `
+      <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path d="M18.2813 4.22796C17.9329 3.87836 17.5189 3.60097 17.0631 3.4117C16.6073 3.22243 16.1186 3.125 15.625 3.125C15.1315 3.125 14.6428 3.22243 14.187 3.4117C13.7312 3.60097 13.3172 3.87836 12.9688 4.22796L13.8563 5.11546C14.089 4.88277 14.3652 4.69819 14.6692 4.57227C14.9733 4.44634 15.2991 4.38152 15.6282 4.38152C15.9572 4.38152 16.2831 4.44634 16.5871 4.57227C16.8911 4.69819 17.1674 4.88277 17.4 5.11546C17.6327 5.34814 17.8173 5.62438 17.9432 5.9284C18.0692 6.23242 18.134 6.55826 18.134 6.88733C18.134 7.2164 18.0692 7.54224 17.9432 7.84626C17.8173 8.15028 17.6327 8.42652 17.4 8.65921L12.4 13.6592C11.9309 14.1291 11.2944 14.3935 10.6304 14.3941C9.96638 14.3946 9.32935 14.1314 8.85942 13.6623C8.38949 13.1932 8.12515 12.5567 8.12457 11.8927C8.12398 11.2287 8.38719 10.5916 8.85629 10.1217L9.73754 9.23421L8.85629 8.34671L7.96879 9.23421C7.61919 9.58259 7.3418 9.99657 7.15253 10.4524C6.96326 10.9082 6.86583 11.3969 6.86583 11.8905C6.86583 12.384 6.96326 12.8727 7.15253 13.3285C7.3418 13.7843 7.61919 14.1983 7.96879 14.5467C8.67597 15.2448 9.63134 15.6337 10.625 15.628C11.1205 15.63 11.6114 15.5338 12.0695 15.345C12.5276 15.1562 12.9437 14.8785 13.2938 14.528L18.2938 9.52796C18.9944 8.82317 19.3866 7.86912 19.3842 6.87537C19.3819 5.88162 18.9852 4.92943 18.2813 4.22796Z" fill="currentColor"/>
+        <path d="M2.61879 15.5155C2.38541 15.2832 2.20022 15.007 2.07386 14.703C1.94749 14.3989 1.88244 14.0729 1.88244 13.7436C1.88244 13.4143 1.94749 13.0883 2.07386 12.7842C2.20022 12.4801 2.38541 12.204 2.61879 11.9717L7.61879 6.97171C7.85109 6.73833 8.1272 6.55314 8.43127 6.42677C8.73534 6.30041 9.06138 6.23536 9.39067 6.23536C9.71995 6.23536 10.046 6.30041 10.3501 6.42677C10.6541 6.55314 10.9302 6.73833 11.1625 6.97171C11.3944 7.20583 11.577 7.48412 11.6994 7.79009C11.8218 8.09606 11.8815 8.42348 11.875 8.75296C11.8769 9.08346 11.8133 9.41106 11.6878 9.71681C11.5623 10.0226 11.3774 10.3004 11.1438 10.5342L9.81879 11.878L10.7063 12.7655L12.0313 11.4405C12.7366 10.7351 13.1328 9.77854 13.1328 8.78108C13.1328 7.78362 12.7366 6.82702 12.0313 6.12171C11.326 5.4164 10.3694 5.02016 9.37192 5.02016C8.37446 5.02016 7.41785 5.4164 6.71254 6.12171L1.71254 11.1217C1.362 11.4702 1.08382 11.8846 0.893994 12.341C0.704168 12.7974 0.606445 13.2868 0.606445 13.7811C0.606445 14.2754 0.704168 14.7648 0.893994 15.2212C1.08382 15.6776 1.362 16.092 1.71254 16.4405C2.42431 17.1333 3.38185 17.5154 4.37504 17.503C5.37698 17.5039 6.33862 17.1085 7.05004 16.403L6.16254 15.5155C5.93025 15.7488 5.65413 15.934 5.35006 16.0604C5.04599 16.1868 4.71995 16.2518 4.39067 16.2518C4.06138 16.2518 3.73534 16.1868 3.43127 16.0604C3.1272 15.934 2.85109 15.7488 2.61879 15.5155Z" fill="currentColor"/>
+      </svg>
+    `,
+            image: `
+      <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path d="M11.875 8.75C12.2458 8.75 12.6084 8.64003 12.9167 8.43401C13.225 8.22798 13.4654 7.93514 13.6073 7.59253C13.7492 7.24992 13.7863 6.87292 13.714 6.50921C13.6416 6.14549 13.463 5.8114 13.2008 5.54917C12.9386 5.28695 12.6045 5.10837 12.2408 5.03603C11.8771 4.96368 11.5001 5.00081 11.1575 5.14273C10.8149 5.28464 10.522 5.52496 10.316 5.83331C10.11 6.14165 10 6.50416 10 6.875C10 7.37228 10.1975 7.84919 10.5492 8.20083C10.9008 8.55246 11.3777 8.75 11.875 8.75ZM11.875 6.25C11.9986 6.25 12.1195 6.28666 12.2222 6.35533C12.325 6.42401 12.4051 6.52162 12.4524 6.63582C12.4997 6.75003 12.5121 6.87569 12.488 6.99693C12.4639 7.11817 12.4044 7.22953 12.3169 7.31694C12.2295 7.40435 12.1182 7.46388 11.9969 7.48799C11.8757 7.51211 11.75 7.49973 11.6358 7.45243C11.5216 7.40512 11.424 7.32501 11.3553 7.22223C11.2867 7.11945 11.25 6.99861 11.25 6.875C11.25 6.70924 11.3158 6.55027 11.4331 6.43306C11.5503 6.31585 11.7092 6.25 11.875 6.25Z" fill="currentColor"/>
+        <path d="M16.25 2.5H3.75C3.41848 2.5 3.10054 2.6317 2.86612 2.86612C2.6317 3.10054 2.5 3.41848 2.5 3.75V16.25C2.5 16.5815 2.6317 16.8995 2.86612 17.1339C3.10054 17.3683 3.41848 17.5 3.75 17.5H16.25C16.5815 17.5 16.8995 17.3683 17.1339 17.1339C17.3683 16.8995 17.5 16.5815 17.5 16.25V3.75C17.5 3.41848 17.3683 3.10054 17.1339 2.86612C16.8995 2.6317 16.5815 2.5 16.25 2.5ZM16.25 16.25H3.75V12.5L6.875 9.375L10.3688 12.8687C10.603 13.1016 10.9198 13.2322 11.25 13.2322C11.5802 13.2322 11.897 13.1016 12.1313 12.8687L13.125 11.875L16.25 15V16.25ZM16.25 13.2312L14.0063 10.9875C13.772 10.7547 13.4552 10.624 13.125 10.624C12.7948 10.624 12.478 10.7547 12.2437 10.9875L11.25 11.9812L7.75625 8.4875C7.52205 8.25469 7.20523 8.12401 6.875 8.12401C6.54477 8.12401 6.22795 8.25469 5.99375 8.4875L3.75 10.7312V3.75H16.25V13.2312Z" fill="currentColor"/>
+      </svg>
+    `
+        };
+        this._readonly = false;
+    }
+    set readonly(value) {
+        // this._readonly = value;
+        //
+        // if (!this.quill) {
+        //   return;
+        // }
+        //
+        // if (this._readonly) {
+        //   this.quill.disable();
+        //
+        //   return;
+        // }
+        //
+        // this.quill.enable();
+    }
+    writeValue(obj) {
+    }
+    registerOnChange(fn) {
+    }
+    registerOnTouched(fn) {
+    }
+    setDisabledState(isDisabled) {
+    }
+    ngOnInit() {
+        this.initIcons();
+        this.initQuill();
+        this.initInputListener();
+        this.initFocusListener();
+    }
+    ngOnDestroy() {
+        this.destroyFocusListener();
+    }
+    initIcons() {
+        const icons = Quill.import('ui/icons');
+        Object.entries(this.ICONS).forEach(([key, value]) => icons[key] = value);
+    }
+    initQuill() {
+        this.quill = new Quill(this.editor.nativeElement, {
+            theme: 'snow',
+            modules: {
+                toolbar: [
+                    [{ 'header': [false, 1, 2, 3] }],
+                    [{ align: [] }],
+                    ['bold', 'italic', 'underline', 'strike', 'code-block'],
+                    [{ list: 'bullet' }, { list: 'ordered' }],
+                    ['link', 'image']
+                ]
+            },
+            readOnly: this._readonly,
+            placeholder: 'Write a description'
+        });
+    }
+    initInputListener() {
+        this.quill.on('text-change', () => {
+            console.log(this.quill.getText());
+            console.log(this.quill?.getContents());
+        });
+    }
+    initFocusListener() {
+        this.focusListener = () => this.quill.focus();
+        this.editor.nativeElement.addEventListener('click', this.focusListener);
+    }
+    destroyFocusListener() {
+        this.editor.nativeElement.removeEventListener('click', this.focusListener);
+    }
+}
+CuiEditorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CuiEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+CuiEditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: CuiEditorComponent, selector: "cui-editor", inputs: { readonly: "readonly" }, providers: [
+        CUI_TEXT_FILED_CONTROLLER_PROVIDER,
+        cuiProvide(NG_VALUE_ACCESSOR, CuiEditorComponent, true),
+    ], viewQueries: [{ propertyName: "editor", first: true, predicate: ["editor"], descendants: true, static: true }], ngImport: i0, template: "<div #editor></div>\n", styles: [":host ::ng-deep .ql-editor{padding:12px 11px}:host ::ng-deep .ql-editor.ql-blank:before{left:11px;color:var(--cui-base-400);font-style:normal}:host ::ng-deep .ql-toolbar{border-top-right-radius:8px;border-top-left-radius:8px;background:var(--cui-gray-50)}:host ::ng-deep .ql-toolbar.ql-snow{padding:7px 7px 8px;display:flex;flex-wrap:wrap;gap:8px;border-color:var(--cui-base-200);border-bottom:none;font-family:var(--cui-main-font)}:host ::ng-deep .ql-toolbar.ql-snow button{height:28px;padding:4px;color:var(--cui-base-900)}:host ::ng-deep .ql-toolbar.ql-snow button:active{color:var(--cui-info-600)}@media (hover: hover){:host ::ng-deep .ql-toolbar.ql-snow button:hover{color:var(--cui-info-600)}}:host ::ng-deep .ql-toolbar.ql-snow .ql-formats{display:inline-flex;flex-wrap:wrap;gap:2px;margin:0}:host ::ng-deep .ql-toolbar.ql-snow .ql-header{width:80px}:host ::ng-deep .ql-toolbar.ql-snow .ql-header .ql-picker-label{padding-left:8px;padding-right:4px}:host ::ng-deep .ql-toolbar.ql-snow .ql-header .ql-picker-label svg{display:none}:host ::ng-deep .ql-toolbar.ql-snow .ql-picker{height:28px;color:var(--cui-base-900);font-weight:400}:host ::ng-deep .ql-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options{border:none}:host ::ng-deep .ql-toolbar.ql-snow .ql-picker-label{display:flex;align-items:center;gap:2px;border:none}:host ::ng-deep .ql-toolbar.ql-snow .ql-picker-label:active{color:var(--cui-info-600)}@media (hover: hover){:host ::ng-deep .ql-toolbar.ql-snow .ql-picker-label:hover{color:var(--cui-info-600)}}:host ::ng-deep .ql-toolbar.ql-snow .ql-picker-options{padding-right:0;padding-left:0;box-shadow:0 4px 8px #0000001f}:host ::ng-deep .ql-toolbar.ql-snow .ql-picker-options .ql-picker-item{padding-right:8px;padding-left:8px}:host ::ng-deep .ql-toolbar.ql-snow .ql-picker-options .ql-picker-item:hover{color:unset}:host ::ng-deep .ql-toolbar.ql-snow .ql-picker-options .ql-picker-item:active{background:var(--cui-info-50)}@media (hover: hover){:host ::ng-deep .ql-toolbar.ql-snow .ql-picker-options .ql-picker-item:hover{background:var(--cui-info-50)}}:host ::ng-deep .ql-toolbar.ql-snow .ql-picker-options .ql-picker-item.ql-selected{color:unset}:host ::ng-deep .ql-toolbar.ql-snow .ql-icon-picker .ql-picker-item{width:28px;height:28px;padding:4px}:host ::ng-deep .ql-toolbar.ql-snow .ql-icon-picker .ql-picker-label{padding:4px}:host ::ng-deep .ql-container{min-height:110px;border-bottom-right-radius:8px;border-bottom-left-radius:8px;cursor:text;font-family:var(--cui-main-font)}:host ::ng-deep .ql-container.ql-snow{border-color:var(--cui-base-200)}:host ::ng-deep .ql-picker-options{border-radius:4px}:host ::ng-deep .ql-active{color:var(--cui-info-600)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CuiEditorComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'cui-editor', changeDetection: ChangeDetectionStrategy.OnPush, providers: [
+                        CUI_TEXT_FILED_CONTROLLER_PROVIDER,
+                        cuiProvide(NG_VALUE_ACCESSOR, CuiEditorComponent, true),
+                    ], template: "<div #editor></div>\n", styles: [":host ::ng-deep .ql-editor{padding:12px 11px}:host ::ng-deep .ql-editor.ql-blank:before{left:11px;color:var(--cui-base-400);font-style:normal}:host ::ng-deep .ql-toolbar{border-top-right-radius:8px;border-top-left-radius:8px;background:var(--cui-gray-50)}:host ::ng-deep .ql-toolbar.ql-snow{padding:7px 7px 8px;display:flex;flex-wrap:wrap;gap:8px;border-color:var(--cui-base-200);border-bottom:none;font-family:var(--cui-main-font)}:host ::ng-deep .ql-toolbar.ql-snow button{height:28px;padding:4px;color:var(--cui-base-900)}:host ::ng-deep .ql-toolbar.ql-snow button:active{color:var(--cui-info-600)}@media (hover: hover){:host ::ng-deep .ql-toolbar.ql-snow button:hover{color:var(--cui-info-600)}}:host ::ng-deep .ql-toolbar.ql-snow .ql-formats{display:inline-flex;flex-wrap:wrap;gap:2px;margin:0}:host ::ng-deep .ql-toolbar.ql-snow .ql-header{width:80px}:host ::ng-deep .ql-toolbar.ql-snow .ql-header .ql-picker-label{padding-left:8px;padding-right:4px}:host ::ng-deep .ql-toolbar.ql-snow .ql-header .ql-picker-label svg{display:none}:host ::ng-deep .ql-toolbar.ql-snow .ql-picker{height:28px;color:var(--cui-base-900);font-weight:400}:host ::ng-deep .ql-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options{border:none}:host ::ng-deep .ql-toolbar.ql-snow .ql-picker-label{display:flex;align-items:center;gap:2px;border:none}:host ::ng-deep .ql-toolbar.ql-snow .ql-picker-label:active{color:var(--cui-info-600)}@media (hover: hover){:host ::ng-deep .ql-toolbar.ql-snow .ql-picker-label:hover{color:var(--cui-info-600)}}:host ::ng-deep .ql-toolbar.ql-snow .ql-picker-options{padding-right:0;padding-left:0;box-shadow:0 4px 8px #0000001f}:host ::ng-deep .ql-toolbar.ql-snow .ql-picker-options .ql-picker-item{padding-right:8px;padding-left:8px}:host ::ng-deep .ql-toolbar.ql-snow .ql-picker-options .ql-picker-item:hover{color:unset}:host ::ng-deep .ql-toolbar.ql-snow .ql-picker-options .ql-picker-item:active{background:var(--cui-info-50)}@media (hover: hover){:host ::ng-deep .ql-toolbar.ql-snow .ql-picker-options .ql-picker-item:hover{background:var(--cui-info-50)}}:host ::ng-deep .ql-toolbar.ql-snow .ql-picker-options .ql-picker-item.ql-selected{color:unset}:host ::ng-deep .ql-toolbar.ql-snow .ql-icon-picker .ql-picker-item{width:28px;height:28px;padding:4px}:host ::ng-deep .ql-toolbar.ql-snow .ql-icon-picker .ql-picker-label{padding:4px}:host ::ng-deep .ql-container{min-height:110px;border-bottom-right-radius:8px;border-bottom-left-radius:8px;cursor:text;font-family:var(--cui-main-font)}:host ::ng-deep .ql-container.ql-snow{border-color:var(--cui-base-200)}:host ::ng-deep .ql-picker-options{border-radius:4px}:host ::ng-deep .ql-active{color:var(--cui-info-600)}\n"] }]
+        }], propDecorators: { readonly: [{
+                type: Input
+            }], editor: [{
+                type: ViewChild,
+                args: ['editor', { static: true }]
+            }] } });
+
+class CuiEditorModule {
+}
+CuiEditorModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CuiEditorModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+CuiEditorModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: CuiEditorModule, declarations: [CuiEditorComponent], exports: [CuiEditorComponent] });
+CuiEditorModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CuiEditorModule });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CuiEditorModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [CuiEditorComponent],
+                    exports: [CuiEditorComponent]
+                }]
+        }] });
+
+class CuiHintComponent {
+    constructor() {
+        this.hintType = 'info';
+    }
+}
+CuiHintComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CuiHintComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+CuiHintComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: CuiHintComponent, selector: "cui-hint", inputs: { hintType: "hintType" }, host: { properties: { "attr.data-hint-type": "this.hintType" } }, ngImport: i0, template: "<ng-content></ng-content>\n", styles: [":host{font-weight:400;font-size:14px;line-height:20px;font-family:var(--cui-main-font)}:host[data-hint-type=info]{color:var(--cui-base-600)}:host[data-hint-type=error]{color:var(--cui-error-500)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CuiHintComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'cui-hint', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content></ng-content>\n", styles: [":host{font-weight:400;font-size:14px;line-height:20px;font-family:var(--cui-main-font)}:host[data-hint-type=info]{color:var(--cui-base-600)}:host[data-hint-type=error]{color:var(--cui-error-500)}\n"] }]
+        }], propDecorators: { hintType: [{
+                type: Input
+            }, {
+                type: HostBinding,
+                args: ['attr.data-hint-type']
+            }] } });
+
+class CuiHintModule {
+}
+CuiHintModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CuiHintModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+CuiHintModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: CuiHintModule, declarations: [CuiHintComponent], exports: [CuiHintComponent] });
+CuiHintModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CuiHintModule });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CuiHintModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [CuiHintComponent],
+                    exports: [CuiHintComponent]
+                }]
+        }] });
+
+class CuiIconButtonComponent {
+    constructor() {
+        this.ICON_WIDTH = 16;
+        this.ICON_HEIGHT = 16;
+        this.ICON_STROKE_WIDTH = 1.5;
+    }
+    get isWithHoverColor() {
+        return !!this.hoverColor;
+    }
+}
+CuiIconButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CuiIconButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+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 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CuiIconButtonComponent, decorators: [{
+            type: Component,
+            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"] }]
+        }], propDecorators: { icon: [{
+                type: Input
+            }], color: [{
+                type: Input
+            }], hoverColor: [{
+                type: Input
+            }, {
+                type: HostBinding,
+                args: ['style.--icon-hover-color']
+            }], isWithHoverColor: [{
+                type: HostBinding,
+                args: ['class._with-hover-color']
+            }] } });
+
+class CuiIconButtonModule {
+}
+CuiIconButtonModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CuiIconButtonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+CuiIconButtonModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: CuiIconButtonModule, declarations: [CuiIconButtonComponent], imports: [CommonModule,
+        CuiSvgModule], exports: [CuiIconButtonComponent] });
+CuiIconButtonModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CuiIconButtonModule, imports: [CommonModule,
+        CuiSvgModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CuiIconButtonModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        CommonModule,
+                        CuiSvgModule
+                    ],
+                    declarations: [CuiIconButtonComponent],
+                    exports: [CuiIconButtonComponent]
+                }]
+        }] });
+
+const CUI_INPUT_NUMBER_DEFAULT_OPTIONS = {
+    min: -Infinity,
+    max: Infinity,
+    step: 1,
+    precision: 3
 };
+const CUI_INPUT_NUMBER_OPTIONS = new InjectionToken('', {
+    factory: () => CUI_INPUT_NUMBER_DEFAULT_OPTIONS
+});
+
+function cuiRemoveSpaces(value) {
+    return value.replace(/\s+/g, '');
+}
+
+function cuiReplace(value, search, replace) {
+    const regex = new RegExp(search.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'), 'g');
+    return value.replace(regex, replace);
+}
+
 class CuiInputNumberComponent {
     constructor() {
         this.changeDetectorRef = inject(ChangeDetectorRef);
@@ -824,14 +1280,14 @@ class CuiInputNumberComponent {
 CuiInputNumberComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CuiInputNumberComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
 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: [
         CUI_TEXT_FILED_CONTROLLER_PROVIDER,
-        INPUT_NUMBER_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]=\"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 });
+        cuiProvide(NG_VALUE_ACCESSOR, CuiInputNumberComponent, true),
+    ], 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)}.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;display:flex}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.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$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.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 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CuiInputNumberComponent, decorators: [{
             type: Component,
             args: [{ selector: 'cui-input-number', changeDetection: ChangeDetectionStrategy.OnPush, providers: [
                         CUI_TEXT_FILED_CONTROLLER_PROVIDER,
-                        INPUT_NUMBER_VALUE_ACCESSOR
-                    ], 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"] }]
+                        cuiProvide(NG_VALUE_ACCESSOR, CuiInputNumberComponent, true),
+                    ], 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)}.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;display:flex}\n"] }]
         }], propDecorators: { step: [{
                 type: Input
             }], precision: [{
@@ -883,11 +1339,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                 }]
         }] });
 
-const INPUT_PASSWORD_VALUE_ACCESSOR = {
-    provide: NG_VALUE_ACCESSOR,
-    useExisting: forwardRef(() => CuiInputPasswordComponent),
-    multi: true
-};
 class CuiInputPasswordComponent {
     constructor() {
         this.changeDetectorRef = inject(ChangeDetectorRef);
@@ -950,14 +1401,14 @@ class CuiInputPasswordComponent {
 CuiInputPasswordComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CuiInputPasswordComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
 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: [
         CUI_TEXT_FILED_CONTROLLER_PROVIDER,
-        INPUT_PASSWORD_VALUE_ACCESSOR
-    ], 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 });
+        cuiProvide(NG_VALUE_ACCESSOR, CuiInputPasswordComponent, true)
+    ], 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-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;display:flex}.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$1.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$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.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 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CuiInputPasswordComponent, decorators: [{
             type: Component,
             args: [{ selector: 'cui-input-password', changeDetection: ChangeDetectionStrategy.OnPush, providers: [
                         CUI_TEXT_FILED_CONTROLLER_PROVIDER,
-                        INPUT_PASSWORD_VALUE_ACCESSOR
-                    ], 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"] }]
+                        cuiProvide(NG_VALUE_ACCESSOR, CuiInputPasswordComponent, true)
+                    ], 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-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;display:flex}.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"] }]
         }], propDecorators: { isDisabled: [{
                 type: HostBinding,
                 args: ['class._disabled']
@@ -995,11 +1446,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                 }]
         }] });
 
-const INPUT_TEXT_VALUE_ACCESSOR = {
-    provide: NG_VALUE_ACCESSOR,
-    useExisting: forwardRef(() => CuiInputTextComponent),
-    multi: true
-};
 class CuiInputTextComponent {
     constructor() {
         this.changeDetectorRef = inject(ChangeDetectorRef);
@@ -1054,14 +1500,14 @@ class CuiInputTextComponent {
 CuiInputTextComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CuiInputTextComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
 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: [
         CUI_TEXT_FILED_CONTROLLER_PROVIDER,
-        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]=\"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 });
+        cuiProvide(NG_VALUE_ACCESSOR, CuiInputTextComponent, true)
+    ], 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;display:flex}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.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$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.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 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CuiInputTextComponent, decorators: [{
             type: Component,
             args: [{ selector: 'cui-input-text', changeDetection: ChangeDetectionStrategy.OnPush, providers: [
                         CUI_TEXT_FILED_CONTROLLER_PROVIDER,
-                        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]=\"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"] }]
+                        cuiProvide(NG_VALUE_ACCESSOR, CuiInputTextComponent, true)
+                    ], 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;display:flex}\n"] }]
         }], propDecorators: { isDisabled: [{
                 type: HostBinding,
                 args: ['class._disabled']
@@ -1143,7 +1589,7 @@ class CuiTextareaComponent {
     }
 }
 CuiTextareaComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CuiTextareaComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-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 });
+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: i2.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 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CuiTextareaComponent, decorators: [{
             type: Component,
             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"] }]
@@ -1174,5 +1620,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-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 };
+export { CUI_ALERTS, CUI_ALERT_CONTEXT, CUI_ALERT_DEFAULT_OPTIONS, CUI_ALERT_OPTIONS, CUI_BUTTON_DEFAULT_OPTIONS, CUI_BUTTON_OPTIONS, CUI_NOTIFICATION_DEFAULT_OPTIONS, CUI_NOTIFICATION_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, CuiAlertComponent, CuiAlertModule, CuiAlertService, CuiAlertsComponent, CuiButtonComponent, CuiButtonGroupComponent, CuiButtonGroupModule, CuiButtonModule, CuiContextMenuComponent, CuiContextMenuModule, CuiDialogComponent, CuiDialogModule, CuiDialogService, CuiDialogsComponent, CuiEditorComponent, CuiEditorModule, CuiHintComponent, CuiHintModule, CuiIconButtonComponent, CuiIconButtonModule, CuiInputModule, CuiInputNumberComponent, CuiInputNumberModule, CuiInputPasswordComponent, CuiInputPasswordModule, CuiInputTextComponent, CuiLabelComponent, CuiLabelModule, CuiNotificationComponent, CuiNotificationModule, CuiSvgComponent, CuiSvgModule, CuiTextFieldController, CuiTextFieldControllerModule, CuiTextFieldIconLeftDirective, CuiTextFieldIdDirective, CuiTextFieldIsErrorDirective, CuiTextFieldPlaceholderDirective, CuiTextFieldSizeDirective, CuiTextareaComponent, CuiTextareaModule, cuiRemoveSpaces, cuiReplace };
 //# sourceMappingURL=cuby-ui-core.mjs.map