@cuby-ui/core 0.0.132 → 0.0.134

package/fesm2015/cuby-ui-core.mjs

@@ -12,2208 +12,2208 @@ import { PolymorpheusModule } from '@tinkoff/ng-polymorpheus';
 import * as i2$2 from '@angular/forms';
 import { NG_VALUE_ACCESSOR, FormsModule } from '@angular/forms';
 
-class CuiAccordionComponent {
-}
-CuiAccordionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CuiAccordionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-CuiAccordionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: CuiAccordionComponent, selector: "cui-accordion", ngImport: i0, template: "<ng-content select=\"cui-accordion-item\"></ng-content>\r\n", styles: [":host{display:flex;flex-direction:column;gap:16px}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CuiAccordionComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'cui-accordion', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content select=\"cui-accordion-item\"></ng-content>\r\n", styles: [":host{display:flex;flex-direction:column;gap:16px}\n"] }]
+class CuiAccordionComponent {
+}
+CuiAccordionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CuiAccordionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+CuiAccordionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: CuiAccordionComponent, selector: "cui-accordion", ngImport: i0, template: "<ng-content select=\"cui-accordion-item\"></ng-content>\n", styles: [":host{display:flex;flex-direction:column;gap:16px}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CuiAccordionComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'cui-accordion', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content select=\"cui-accordion-item\"></ng-content>\n", styles: [":host{display:flex;flex-direction:column;gap:16px}\n"] }]
         }] });
 
-const CUI_BUTTON_DEFAULT_OPTIONS = {
-    appearance: 'action',
-    shape: null,
-    size: 'sm'
-};
-const CUI_BUTTON_OPTIONS = new InjectionToken('', {
-    factory: () => CUI_BUTTON_DEFAULT_OPTIONS
+const CUI_BUTTON_DEFAULT_OPTIONS = {
+    appearance: 'action',
+    shape: null,
+    size: 'sm'
+};
+const CUI_BUTTON_OPTIONS = new InjectionToken('', {
+    factory: () => CUI_BUTTON_DEFAULT_OPTIONS
 });
 
-class CuiSvgComponent {
-    constructor() {
-        this.domSanitizer = inject(DomSanitizer);
-    }
-    set icon(icon) {
-        // TODO: В данном случае подключаются все иконки (вероятно, можно как-то оптимизировано их подключать)
-        this.safeSvgContent = this.domSanitizer.bypassSecurityTrustHtml(cuiIsIcon(icon)
-            ? CUI_ICONS[icon]
-            : icon);
-    }
-    get isWithStrokeWidth() {
-        return !!this.strokeWidth;
-    }
-    get isWithColor() {
-        return !!this.color;
-    }
-}
-CuiSvgComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CuiSvgComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-CuiSvgComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: CuiSvgComponent, selector: "cui-svg[icon]", inputs: { width: "width", height: "height", strokeWidth: "strokeWidth", color: "color", icon: "icon" }, host: { properties: { "style.--stroke-width": "this.strokeWidth", "style.--color": "this.color", "class._with-stroke-width": "this.isWithStrokeWidth", "class._with-color": "this.isWithColor" } }, ngImport: i0, template: "<span\r\n  [innerHTML]=\"safeSvgContent\"\r\n  [style.width.px]=\"width\"\r\n  [style.height.px]=\"height\"\r\n></span>", styles: [":host{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;vertical-align:middle;line-height:0}:host ::ng-deep svg{width:100%;height:100%}:host._with-stroke-width ::ng-deep [stroke-width]{stroke-width:var(--stroke-width)}:host._with-color ::ng-deep [stroke]{stroke:var(--color)}:host._with-color ::ng-deep [fill]:not([fill=none]){fill:var(--color)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CuiSvgComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'cui-svg[icon]', changeDetection: ChangeDetectionStrategy.OnPush, template: "<span\r\n  [innerHTML]=\"safeSvgContent\"\r\n  [style.width.px]=\"width\"\r\n  [style.height.px]=\"height\"\r\n></span>", styles: [":host{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;vertical-align:middle;line-height:0}:host ::ng-deep svg{width:100%;height:100%}:host._with-stroke-width ::ng-deep [stroke-width]{stroke-width:var(--stroke-width)}:host._with-color ::ng-deep [stroke]{stroke:var(--color)}:host._with-color ::ng-deep [fill]:not([fill=none]){fill:var(--color)}\n"] }]
-        }], propDecorators: { width: [{
-                type: Input
-            }], height: [{
-                type: Input
-            }], strokeWidth: [{
-                type: Input
-            }, {
-                type: HostBinding,
-                args: ['style.--stroke-width']
-            }], color: [{
-                type: Input
-            }, {
-                type: HostBinding,
-                args: ['style.--color']
-            }], icon: [{
-                type: Input
-            }], isWithStrokeWidth: [{
-                type: HostBinding,
-                args: ['class._with-stroke-width']
-            }], isWithColor: [{
-                type: HostBinding,
-                args: ['class._with-color']
+class CuiSvgComponent {
+    constructor() {
+        this.domSanitizer = inject(DomSanitizer);
+    }
+    set icon(icon) {
+        // TODO: В данном случае подключаются все иконки (вероятно, можно как-то оптимизировано их подключать)
+        this.safeSvgContent = this.domSanitizer.bypassSecurityTrustHtml(cuiIsIcon(icon)
+            ? CUI_ICONS[icon]
+            : icon);
+    }
+    get isWithStrokeWidth() {
+        return !!this.strokeWidth;
+    }
+    get isWithColor() {
+        return !!this.color;
+    }
+}
+CuiSvgComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CuiSvgComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+CuiSvgComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: CuiSvgComponent, selector: "cui-svg[icon]", inputs: { width: "width", height: "height", strokeWidth: "strokeWidth", color: "color", icon: "icon" }, host: { properties: { "style.--stroke-width": "this.strokeWidth", "style.--color": "this.color", "class._with-stroke-width": "this.isWithStrokeWidth", "class._with-color": "this.isWithColor" } }, ngImport: i0, template: "<span\n  [innerHTML]=\"safeSvgContent\"\n  [style.width.px]=\"width\"\n  [style.height.px]=\"height\"\n></span>", styles: [":host{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;vertical-align:middle;line-height:0}:host ::ng-deep svg{width:100%;height:100%}:host._with-stroke-width ::ng-deep [stroke-width]{stroke-width:var(--stroke-width)}:host._with-color ::ng-deep [stroke]{stroke:var(--color)}:host._with-color ::ng-deep [fill]:not([fill=none]){fill:var(--color)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CuiSvgComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'cui-svg[icon]', changeDetection: ChangeDetectionStrategy.OnPush, template: "<span\n  [innerHTML]=\"safeSvgContent\"\n  [style.width.px]=\"width\"\n  [style.height.px]=\"height\"\n></span>", styles: [":host{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;vertical-align:middle;line-height:0}:host ::ng-deep svg{width:100%;height:100%}:host._with-stroke-width ::ng-deep [stroke-width]{stroke-width:var(--stroke-width)}:host._with-color ::ng-deep [stroke]{stroke:var(--color)}:host._with-color ::ng-deep [fill]:not([fill=none]){fill:var(--color)}\n"] }]
+        }], propDecorators: { width: [{
+                type: Input
+            }], height: [{
+                type: Input
+            }], strokeWidth: [{
+                type: Input
+            }, {
+                type: HostBinding,
+                args: ['style.--stroke-width']
+            }], color: [{
+                type: Input
+            }, {
+                type: HostBinding,
+                args: ['style.--color']
+            }], icon: [{
+                type: Input
+            }], isWithStrokeWidth: [{
+                type: HostBinding,
+                args: ['class._with-stroke-width']
+            }], isWithColor: [{
+                type: HostBinding,
+                args: ['class._with-color']
             }] } });
 
-class CuiButtonComponent {
-    constructor() {
-        this.cuiButtonOptions = inject(CUI_BUTTON_OPTIONS);
-        this.COLOR_BASE_500 = 'var(--cui-base-500)';
-        this.BUTTON_ICONS_COLOR_BASE_500 = [
-            'secondary',
-            'outlined',
-            'outlined-gray',
-            'ghost'
-        ];
-        this._appearance = this.cuiButtonOptions.appearance;
-        this.iconColor = 'currentColor';
-        this._size = this.cuiButtonOptions.size;
-        this.iconDimensions = {
-            width: 20,
-            height: 20
-        };
-        this.shape = this.cuiButtonOptions.shape;
-        this.disabled = false;
-        this.isLoaderShown = false;
-        this.containsOnlyIcon = false;
-    }
-    get appearance() {
-        return this._appearance;
-    }
-    set appearance(appearance) {
-        this._appearance = appearance;
-        if (this.BUTTON_ICONS_COLOR_BASE_500.includes(appearance)) {
-            this.iconColor = this.COLOR_BASE_500;
-            return;
-        }
-        this.iconColor = 'currentColor';
-    }
-    get size() {
-        return this._size;
-    }
-    set size(size) {
-        this._size = size;
-        if (size === 'xxs') {
-            this.iconDimensions = {
-                width: 16,
-                height: 16
-            };
-            return;
-        }
-        this.iconDimensions = {
-            width: 20,
-            height: 20
-        };
-    }
-    get isDisabled() {
-        return this.disabled || this.isLoaderShown;
-    }
-}
-CuiButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CuiButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-CuiButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: CuiButtonComponent, selector: "button[cuiButton], a[cuiButton]", inputs: { shape: "shape", disabled: "disabled", isLoaderShown: "isLoaderShown", icon: "icon", iconRight: "iconRight", appearance: "appearance", size: "size" }, host: { properties: { "attr.data-shape": "this.shape", "class._disabled": "this.disabled", "class._loading": "this.isLoaderShown", "attr.data-appearance": "this.appearance", "attr.data-size": "this.size", "class._only-icon": "this.containsOnlyIcon", "disabled": "this.isDisabled" } }, viewQueries: [{ propertyName: "content", first: true, predicate: ["content"], descendants: true }], ngImport: i0, template: "<span\r\n  class=\"c-wrapper\"\r\n  [class.c-wrapper_invisible]=\"isLoaderShown\"\r\n>\r\n  <cui-svg\r\n    *ngIf=\"icon\"\r\n    [icon]=\"icon\"\r\n    [width]=\"iconDimensions.width\"\r\n    [height]=\"iconDimensions.height\"\r\n    [color]=\"iconColor\"\r\n  ></cui-svg>\r\n  <span\r\n    #content\r\n    class=\"c-content\"\r\n  ><ng-content></ng-content></span>\r\n  <cui-svg\r\n    *ngIf=\"iconRight\"\r\n    [icon]=\"iconRight\"\r\n    [width]=\"iconDimensions.width\"\r\n    [height]=\"iconDimensions.height\"\r\n    [color]=\"iconColor\"\r\n  ></cui-svg>\r\n</span>\r\n<cui-svg\r\n  *ngIf=\"isLoaderShown\"\r\n  icon=\"cuiIconLoading\"\r\n  class=\"c-loader\"\r\n></cui-svg>\r\n", styles: [":host{padding:0;border:0;flex-shrink:0;outline:none;cursor:pointer;appearance:none;color:inherit;font:inherit;background:inherit;text-decoration:none;-webkit-tap-highlight-color:transparent;font-weight:500;font-size:14px;line-height:20px;display:inline-block;position:relative;box-sizing:border-box;border-radius:8px;font-family:var(--cui-main-font)}:host:disabled{cursor:not-allowed}:host[data-shape=rounded]{border-radius:20px}:host[data-appearance=action]{background:var(--cui-light-blue-500);color:var(--cui-gray-0);border:1px solid var(--cui-light-blue-500)}@media (hover: hover){:host[data-appearance=action]:hover{background:var(--cui-light-blue-600);border-color:var(--cui-light-blue-600)}}:host[data-appearance=action]:active{background:var(--cui-light-blue-600);border-color:var(--cui-light-blue-600)}:host[data-appearance=action]:disabled{background:var(--cui-light-blue-500);border-color:var(--cui-light-blue-500)}:host[data-appearance=secondary]{background:var(--cui-base-100);color:var(--cui-base-900)}@media (hover: hover){:host[data-appearance=secondary]:hover{background:var(--cui-base-200)}}:host[data-appearance=secondary]:active{background:var(--cui-base-200)}:host[data-appearance=secondary]:disabled{background:var(--cui-base-100)}:host[data-appearance=outlined]{border:1px solid var(--cui-base-200);background:var(--cui-base-0);color:var(--cui-base-900)}@media (hover: hover){:host[data-appearance=outlined]:hover{background:var(--cui-base-50)}}:host[data-appearance=outlined]:active{background:var(--cui-base-50)}:host[data-appearance=outlined]:disabled{background:var(--cui-base-0)}:host[data-appearance=outlined-gray]{border:1px solid var(--cui-base-200);background:var(--cui-base-10);color:var(--cui-base-900)}@media (hover: hover){:host[data-appearance=outlined-gray]:hover{background:var(--cui-base-50)}}:host[data-appearance=outlined-gray]:active{background:var(--cui-base-50)}:host[data-appearance=outlined-gray]:disabled{background:var(--cui-base-10)}:host[data-appearance=ghost]{color:var(--cui-base-900)}@media (hover: hover){:host[data-appearance=ghost]:hover{background:var(--cui-base-50)}}:host[data-appearance=ghost]:active{background:var(--cui-base-50)}:host[data-appearance=ghost]:disabled{background:inherit}:host[data-appearance=flat]{color:var(--cui-light-blue-600)}@media (hover: hover){:host[data-appearance=flat]:hover{background:var(--cui-base-50)}}:host[data-appearance=flat]:active{background:var(--cui-base-50)}:host[data-appearance=flat]:disabled{background:inherit}:host[data-appearance=destructive]{background:var(--cui-danger);color:var(--cui-gray-0)}@media (hover: hover){:host[data-appearance=destructive]:hover{background:var(--cui-red-600)}}:host[data-appearance=destructive]:active{background:var(--cui-red-600)}:host[data-appearance=destructive]:disabled{background:var(--cui-danger)}:host[data-appearance=link]{height:24px!important;padding:0 4px!important;color:var(--cui-info)}@media (hover: hover){:host[data-appearance=link]:hover{color:var(--cui-blue-800)}}:host[data-appearance=link]:active{color:var(--cui-blue-800)}:host[data-appearance=link]:disabled{color:var(--cui-info)}:host[data-size=xxs]{font-size:12px;line-height:14px;height:28px;padding:0 8px}:host[data-size=xxs][data-appearance=action],:host[data-size=xxs][data-appearance=outlined],:host[data-size=xxs][data-appearance=outlined-gray]{padding:0 7px}:host[data-size=xxs]:has(.c-content:empty){width:28px}:host[data-size=xxs] .c-wrapper{gap:6px}:host[data-size=xs]{font-size:13px;line-height:16px;height:32px;padding:0 12px}:host[data-size=xs][data-appearance=action],:host[data-size=xs][data-appearance=outlined],:host[data-size=xs][data-appearance=outlined-gray]{padding:0 11px}:host[data-size=xs]:has(.c-content:empty){width:32px}:host[data-size=sm]{height:36px;padding:0 14px}:host[data-size=sm][data-appearance=action],:host[data-size=sm][data-appearance=outlined],:host[data-size=sm][data-appearance=outlined-gray]{padding:0 13px}:host[data-size=sm]:has(.c-content:empty){width:36px}:host[data-size=md]{height:40px;padding:0 16px}:host[data-size=md][data-appearance=action],:host[data-size=md][data-appearance=outlined],:host[data-size=md][data-appearance=outlined-gray]{padding:0 15px}:host[data-size=md]:has(.c-content:empty){width:40px}:host._disabled{opacity:.5}:host-context([cuiTheme=dark])[data-appearance=action]{background:var(--cui-light-blue-700)}@media (hover: hover){:host-context([cuiTheme=dark])[data-appearance=action]:hover{background:var(--cui-light-blue-600)}}:host-context([cuiTheme=dark])[data-appearance=action]:active{background:var(--cui-light-blue-600)}:host-context([cuiTheme=dark])[data-appearance=action]:disabled{background:var(--cui-light-blue-700)}@media (hover: hover){:host-context([cuiTheme=dark])[data-appearance=destructive]:hover{background:var(--cui-red-300)}}:host-context([cuiTheme=dark])[data-appearance=destructive]:active{background:var(--cui-red-300)}:host-context([cuiTheme=dark])[data-appearance=destructive]:disabled{background:var(--cui-danger)}.c-content:empty{display:contents}.c-wrapper{display:flex;justify-content:center;align-items:center;gap:8px;height:100%}.c-wrapper_invisible{opacity:0}.c-loader{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: CuiSvgComponent, selector: "cui-svg[icon]", inputs: ["width", "height", "strokeWidth", "color", "icon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CuiButtonComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'button[cuiButton], a[cuiButton]', changeDetection: ChangeDetectionStrategy.OnPush, template: "<span\r\n  class=\"c-wrapper\"\r\n  [class.c-wrapper_invisible]=\"isLoaderShown\"\r\n>\r\n  <cui-svg\r\n    *ngIf=\"icon\"\r\n    [icon]=\"icon\"\r\n    [width]=\"iconDimensions.width\"\r\n    [height]=\"iconDimensions.height\"\r\n    [color]=\"iconColor\"\r\n  ></cui-svg>\r\n  <span\r\n    #content\r\n    class=\"c-content\"\r\n  ><ng-content></ng-content></span>\r\n  <cui-svg\r\n    *ngIf=\"iconRight\"\r\n    [icon]=\"iconRight\"\r\n    [width]=\"iconDimensions.width\"\r\n    [height]=\"iconDimensions.height\"\r\n    [color]=\"iconColor\"\r\n  ></cui-svg>\r\n</span>\r\n<cui-svg\r\n  *ngIf=\"isLoaderShown\"\r\n  icon=\"cuiIconLoading\"\r\n  class=\"c-loader\"\r\n></cui-svg>\r\n", styles: [":host{padding:0;border:0;flex-shrink:0;outline:none;cursor:pointer;appearance:none;color:inherit;font:inherit;background:inherit;text-decoration:none;-webkit-tap-highlight-color:transparent;font-weight:500;font-size:14px;line-height:20px;display:inline-block;position:relative;box-sizing:border-box;border-radius:8px;font-family:var(--cui-main-font)}:host:disabled{cursor:not-allowed}:host[data-shape=rounded]{border-radius:20px}:host[data-appearance=action]{background:var(--cui-light-blue-500);color:var(--cui-gray-0);border:1px solid var(--cui-light-blue-500)}@media (hover: hover){:host[data-appearance=action]:hover{background:var(--cui-light-blue-600);border-color:var(--cui-light-blue-600)}}:host[data-appearance=action]:active{background:var(--cui-light-blue-600);border-color:var(--cui-light-blue-600)}:host[data-appearance=action]:disabled{background:var(--cui-light-blue-500);border-color:var(--cui-light-blue-500)}:host[data-appearance=secondary]{background:var(--cui-base-100);color:var(--cui-base-900)}@media (hover: hover){:host[data-appearance=secondary]:hover{background:var(--cui-base-200)}}:host[data-appearance=secondary]:active{background:var(--cui-base-200)}:host[data-appearance=secondary]:disabled{background:var(--cui-base-100)}:host[data-appearance=outlined]{border:1px solid var(--cui-base-200);background:var(--cui-base-0);color:var(--cui-base-900)}@media (hover: hover){:host[data-appearance=outlined]:hover{background:var(--cui-base-50)}}:host[data-appearance=outlined]:active{background:var(--cui-base-50)}:host[data-appearance=outlined]:disabled{background:var(--cui-base-0)}:host[data-appearance=outlined-gray]{border:1px solid var(--cui-base-200);background:var(--cui-base-10);color:var(--cui-base-900)}@media (hover: hover){:host[data-appearance=outlined-gray]:hover{background:var(--cui-base-50)}}:host[data-appearance=outlined-gray]:active{background:var(--cui-base-50)}:host[data-appearance=outlined-gray]:disabled{background:var(--cui-base-10)}:host[data-appearance=ghost]{color:var(--cui-base-900)}@media (hover: hover){:host[data-appearance=ghost]:hover{background:var(--cui-base-50)}}:host[data-appearance=ghost]:active{background:var(--cui-base-50)}:host[data-appearance=ghost]:disabled{background:inherit}:host[data-appearance=flat]{color:var(--cui-light-blue-600)}@media (hover: hover){:host[data-appearance=flat]:hover{background:var(--cui-base-50)}}:host[data-appearance=flat]:active{background:var(--cui-base-50)}:host[data-appearance=flat]:disabled{background:inherit}:host[data-appearance=destructive]{background:var(--cui-danger);color:var(--cui-gray-0)}@media (hover: hover){:host[data-appearance=destructive]:hover{background:var(--cui-red-600)}}:host[data-appearance=destructive]:active{background:var(--cui-red-600)}:host[data-appearance=destructive]:disabled{background:var(--cui-danger)}:host[data-appearance=link]{height:24px!important;padding:0 4px!important;color:var(--cui-info)}@media (hover: hover){:host[data-appearance=link]:hover{color:var(--cui-blue-800)}}:host[data-appearance=link]:active{color:var(--cui-blue-800)}:host[data-appearance=link]:disabled{color:var(--cui-info)}:host[data-size=xxs]{font-size:12px;line-height:14px;height:28px;padding:0 8px}:host[data-size=xxs][data-appearance=action],:host[data-size=xxs][data-appearance=outlined],:host[data-size=xxs][data-appearance=outlined-gray]{padding:0 7px}:host[data-size=xxs]:has(.c-content:empty){width:28px}:host[data-size=xxs] .c-wrapper{gap:6px}:host[data-size=xs]{font-size:13px;line-height:16px;height:32px;padding:0 12px}:host[data-size=xs][data-appearance=action],:host[data-size=xs][data-appearance=outlined],:host[data-size=xs][data-appearance=outlined-gray]{padding:0 11px}:host[data-size=xs]:has(.c-content:empty){width:32px}:host[data-size=sm]{height:36px;padding:0 14px}:host[data-size=sm][data-appearance=action],:host[data-size=sm][data-appearance=outlined],:host[data-size=sm][data-appearance=outlined-gray]{padding:0 13px}:host[data-size=sm]:has(.c-content:empty){width:36px}:host[data-size=md]{height:40px;padding:0 16px}:host[data-size=md][data-appearance=action],:host[data-size=md][data-appearance=outlined],:host[data-size=md][data-appearance=outlined-gray]{padding:0 15px}:host[data-size=md]:has(.c-content:empty){width:40px}:host._disabled{opacity:.5}:host-context([cuiTheme=dark])[data-appearance=action]{background:var(--cui-light-blue-700)}@media (hover: hover){:host-context([cuiTheme=dark])[data-appearance=action]:hover{background:var(--cui-light-blue-600)}}:host-context([cuiTheme=dark])[data-appearance=action]:active{background:var(--cui-light-blue-600)}:host-context([cuiTheme=dark])[data-appearance=action]:disabled{background:var(--cui-light-blue-700)}@media (hover: hover){:host-context([cuiTheme=dark])[data-appearance=destructive]:hover{background:var(--cui-red-300)}}:host-context([cuiTheme=dark])[data-appearance=destructive]:active{background:var(--cui-red-300)}:host-context([cuiTheme=dark])[data-appearance=destructive]:disabled{background:var(--cui-danger)}.c-content:empty{display:contents}.c-wrapper{display:flex;justify-content:center;align-items:center;gap:8px;height:100%}.c-wrapper_invisible{opacity:0}.c-loader{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}\n"] }]
-        }], propDecorators: { shape: [{
-                type: Input
-            }, {
-                type: HostBinding,
-                args: ['attr.data-shape']
-            }], disabled: [{
-                type: Input
-            }, {
-                type: HostBinding,
-                args: ['class._disabled']
-            }], isLoaderShown: [{
-                type: Input
-            }, {
-                type: HostBinding,
-                args: ['class._loading']
-            }], icon: [{
-                type: Input
-            }], iconRight: [{
-                type: Input
-            }], appearance: [{
-                type: Input
-            }, {
-                type: HostBinding,
-                args: ['attr.data-appearance']
-            }], size: [{
-                type: Input
-            }, {
-                type: HostBinding,
-                args: ['attr.data-size']
-            }], containsOnlyIcon: [{
-                type: HostBinding,
-                args: ['class._only-icon']
-            }], isDisabled: [{
-                type: HostBinding,
-                args: ['disabled']
-            }], content: [{
-                type: ViewChild,
-                args: ['content']
+class CuiButtonComponent {
+    constructor() {
+        this.cuiButtonOptions = inject(CUI_BUTTON_OPTIONS);
+        this.COLOR_BASE_500 = 'var(--cui-base-500)';
+        this.BUTTON_ICONS_COLOR_BASE_500 = [
+            'secondary',
+            'outlined',
+            'outlined-gray',
+            'ghost'
+        ];
+        this._appearance = this.cuiButtonOptions.appearance;
+        this.iconColor = 'currentColor';
+        this._size = this.cuiButtonOptions.size;
+        this.iconDimensions = {
+            width: 20,
+            height: 20
+        };
+        this.shape = this.cuiButtonOptions.shape;
+        this.disabled = false;
+        this.isLoaderShown = false;
+        this.containsOnlyIcon = false;
+    }
+    get appearance() {
+        return this._appearance;
+    }
+    set appearance(appearance) {
+        this._appearance = appearance;
+        if (this.BUTTON_ICONS_COLOR_BASE_500.includes(appearance)) {
+            this.iconColor = this.COLOR_BASE_500;
+            return;
+        }
+        this.iconColor = 'currentColor';
+    }
+    get size() {
+        return this._size;
+    }
+    set size(size) {
+        this._size = size;
+        if (size === 'xxs') {
+            this.iconDimensions = {
+                width: 16,
+                height: 16
+            };
+            return;
+        }
+        this.iconDimensions = {
+            width: 20,
+            height: 20
+        };
+    }
+    get isDisabled() {
+        return this.disabled || this.isLoaderShown;
+    }
+}
+CuiButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CuiButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+CuiButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: CuiButtonComponent, selector: "button[cuiButton], a[cuiButton]", inputs: { shape: "shape", disabled: "disabled", isLoaderShown: "isLoaderShown", icon: "icon", iconRight: "iconRight", appearance: "appearance", size: "size" }, host: { properties: { "attr.data-shape": "this.shape", "class._disabled": "this.disabled", "class._loading": "this.isLoaderShown", "attr.data-appearance": "this.appearance", "attr.data-size": "this.size", "class._only-icon": "this.containsOnlyIcon", "disabled": "this.isDisabled" } }, viewQueries: [{ propertyName: "content", first: true, predicate: ["content"], descendants: true }], ngImport: i0, template: "<span\n  class=\"c-wrapper\"\n  [class.c-wrapper_invisible]=\"isLoaderShown\"\n>\n  <cui-svg\n    *ngIf=\"icon\"\n    [icon]=\"icon\"\n    [width]=\"iconDimensions.width\"\n    [height]=\"iconDimensions.height\"\n    [color]=\"iconColor\"\n  ></cui-svg>\n  <span\n    #content\n    class=\"c-content\"\n  ><ng-content></ng-content></span>\n  <cui-svg\n    *ngIf=\"iconRight\"\n    [icon]=\"iconRight\"\n    [width]=\"iconDimensions.width\"\n    [height]=\"iconDimensions.height\"\n    [color]=\"iconColor\"\n  ></cui-svg>\n</span>\n<cui-svg\n  *ngIf=\"isLoaderShown\"\n  icon=\"cuiIconLoading\"\n  class=\"c-loader\"\n></cui-svg>\n", styles: [":host{padding:0;border:0;flex-shrink:0;outline:none;cursor:pointer;appearance:none;color:inherit;font:inherit;background:inherit;text-decoration:none;-webkit-tap-highlight-color:transparent;font-weight:500;font-size:14px;line-height:20px;display:inline-block;position:relative;box-sizing:border-box;border-radius:8px;font-family:var(--cui-main-font)}:host:disabled{cursor:not-allowed}:host[data-shape=rounded]{border-radius:20px}:host[data-appearance=action]{background:var(--cui-light-blue-500);color:var(--cui-gray-0);border:1px solid var(--cui-light-blue-500)}@media (hover: hover){:host[data-appearance=action]:hover{background:var(--cui-light-blue-600);border-color:var(--cui-light-blue-600)}}:host[data-appearance=action]:active{background:var(--cui-light-blue-600);border-color:var(--cui-light-blue-600)}:host[data-appearance=action]:disabled{background:var(--cui-light-blue-500);border-color:var(--cui-light-blue-500)}:host[data-appearance=secondary]{background:var(--cui-base-100);color:var(--cui-base-900)}@media (hover: hover){:host[data-appearance=secondary]:hover{background:var(--cui-base-200)}}:host[data-appearance=secondary]:active{background:var(--cui-base-200)}:host[data-appearance=secondary]:disabled{background:var(--cui-base-100)}:host[data-appearance=outlined]{border:1px solid var(--cui-base-200);background:var(--cui-base-0);color:var(--cui-base-900)}@media (hover: hover){:host[data-appearance=outlined]:hover{background:var(--cui-base-50)}}:host[data-appearance=outlined]:active{background:var(--cui-base-50)}:host[data-appearance=outlined]:disabled{background:var(--cui-base-0)}:host[data-appearance=outlined-gray]{border:1px solid var(--cui-base-200);background:var(--cui-base-10);color:var(--cui-base-900)}@media (hover: hover){:host[data-appearance=outlined-gray]:hover{background:var(--cui-base-50)}}:host[data-appearance=outlined-gray]:active{background:var(--cui-base-50)}:host[data-appearance=outlined-gray]:disabled{background:var(--cui-base-10)}:host[data-appearance=ghost]{color:var(--cui-base-900)}@media (hover: hover){:host[data-appearance=ghost]:hover{background:var(--cui-base-50)}}:host[data-appearance=ghost]:active{background:var(--cui-base-50)}:host[data-appearance=ghost]:disabled{background:inherit}:host[data-appearance=flat]{color:var(--cui-light-blue-600)}@media (hover: hover){:host[data-appearance=flat]:hover{background:var(--cui-base-50)}}:host[data-appearance=flat]:active{background:var(--cui-base-50)}:host[data-appearance=flat]:disabled{background:inherit}:host[data-appearance=destructive]{background:var(--cui-danger);color:var(--cui-gray-0)}@media (hover: hover){:host[data-appearance=destructive]:hover{background:var(--cui-red-600)}}:host[data-appearance=destructive]:active{background:var(--cui-red-600)}:host[data-appearance=destructive]:disabled{background:var(--cui-danger)}:host[data-appearance=link]{height:24px!important;padding:0 4px!important;color:var(--cui-info)}@media (hover: hover){:host[data-appearance=link]:hover{color:var(--cui-blue-800)}}:host[data-appearance=link]:active{color:var(--cui-blue-800)}:host[data-appearance=link]:disabled{color:var(--cui-info)}:host[data-size=xxs]{font-size:12px;line-height:14px;height:28px;padding:0 8px}:host[data-size=xxs][data-appearance=action],:host[data-size=xxs][data-appearance=outlined],:host[data-size=xxs][data-appearance=outlined-gray]{padding:0 7px}:host[data-size=xxs]:has(.c-content:empty){width:28px}:host[data-size=xxs] .c-wrapper{gap:6px}:host[data-size=xs]{font-size:13px;line-height:16px;height:32px;padding:0 12px}:host[data-size=xs][data-appearance=action],:host[data-size=xs][data-appearance=outlined],:host[data-size=xs][data-appearance=outlined-gray]{padding:0 11px}:host[data-size=xs]:has(.c-content:empty){width:32px}:host[data-size=sm]{height:36px;padding:0 14px}:host[data-size=sm][data-appearance=action],:host[data-size=sm][data-appearance=outlined],:host[data-size=sm][data-appearance=outlined-gray]{padding:0 13px}:host[data-size=sm]:has(.c-content:empty){width:36px}:host[data-size=md]{height:40px;padding:0 16px}:host[data-size=md][data-appearance=action],:host[data-size=md][data-appearance=outlined],:host[data-size=md][data-appearance=outlined-gray]{padding:0 15px}:host[data-size=md]:has(.c-content:empty){width:40px}:host._disabled{opacity:.5}:host-context([cuiTheme=dark])[data-appearance=action]{background:var(--cui-light-blue-700)}@media (hover: hover){:host-context([cuiTheme=dark])[data-appearance=action]:hover{background:var(--cui-light-blue-600)}}:host-context([cuiTheme=dark])[data-appearance=action]:active{background:var(--cui-light-blue-600)}:host-context([cuiTheme=dark])[data-appearance=action]:disabled{background:var(--cui-light-blue-700)}@media (hover: hover){:host-context([cuiTheme=dark])[data-appearance=destructive]:hover{background:var(--cui-red-300)}}:host-context([cuiTheme=dark])[data-appearance=destructive]:active{background:var(--cui-red-300)}:host-context([cuiTheme=dark])[data-appearance=destructive]:disabled{background:var(--cui-danger)}.c-content:empty{display:contents}.c-wrapper{display:flex;justify-content:center;align-items:center;gap:8px;height:100%}.c-wrapper_invisible{opacity:0}.c-loader{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: CuiSvgComponent, selector: "cui-svg[icon]", inputs: ["width", "height", "strokeWidth", "color", "icon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CuiButtonComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'button[cuiButton], a[cuiButton]', changeDetection: ChangeDetectionStrategy.OnPush, template: "<span\n  class=\"c-wrapper\"\n  [class.c-wrapper_invisible]=\"isLoaderShown\"\n>\n  <cui-svg\n    *ngIf=\"icon\"\n    [icon]=\"icon\"\n    [width]=\"iconDimensions.width\"\n    [height]=\"iconDimensions.height\"\n    [color]=\"iconColor\"\n  ></cui-svg>\n  <span\n    #content\n    class=\"c-content\"\n  ><ng-content></ng-content></span>\n  <cui-svg\n    *ngIf=\"iconRight\"\n    [icon]=\"iconRight\"\n    [width]=\"iconDimensions.width\"\n    [height]=\"iconDimensions.height\"\n    [color]=\"iconColor\"\n  ></cui-svg>\n</span>\n<cui-svg\n  *ngIf=\"isLoaderShown\"\n  icon=\"cuiIconLoading\"\n  class=\"c-loader\"\n></cui-svg>\n", styles: [":host{padding:0;border:0;flex-shrink:0;outline:none;cursor:pointer;appearance:none;color:inherit;font:inherit;background:inherit;text-decoration:none;-webkit-tap-highlight-color:transparent;font-weight:500;font-size:14px;line-height:20px;display:inline-block;position:relative;box-sizing:border-box;border-radius:8px;font-family:var(--cui-main-font)}:host:disabled{cursor:not-allowed}:host[data-shape=rounded]{border-radius:20px}:host[data-appearance=action]{background:var(--cui-light-blue-500);color:var(--cui-gray-0);border:1px solid var(--cui-light-blue-500)}@media (hover: hover){:host[data-appearance=action]:hover{background:var(--cui-light-blue-600);border-color:var(--cui-light-blue-600)}}:host[data-appearance=action]:active{background:var(--cui-light-blue-600);border-color:var(--cui-light-blue-600)}:host[data-appearance=action]:disabled{background:var(--cui-light-blue-500);border-color:var(--cui-light-blue-500)}:host[data-appearance=secondary]{background:var(--cui-base-100);color:var(--cui-base-900)}@media (hover: hover){:host[data-appearance=secondary]:hover{background:var(--cui-base-200)}}:host[data-appearance=secondary]:active{background:var(--cui-base-200)}:host[data-appearance=secondary]:disabled{background:var(--cui-base-100)}:host[data-appearance=outlined]{border:1px solid var(--cui-base-200);background:var(--cui-base-0);color:var(--cui-base-900)}@media (hover: hover){:host[data-appearance=outlined]:hover{background:var(--cui-base-50)}}:host[data-appearance=outlined]:active{background:var(--cui-base-50)}:host[data-appearance=outlined]:disabled{background:var(--cui-base-0)}:host[data-appearance=outlined-gray]{border:1px solid var(--cui-base-200);background:var(--cui-base-10);color:var(--cui-base-900)}@media (hover: hover){:host[data-appearance=outlined-gray]:hover{background:var(--cui-base-50)}}:host[data-appearance=outlined-gray]:active{background:var(--cui-base-50)}:host[data-appearance=outlined-gray]:disabled{background:var(--cui-base-10)}:host[data-appearance=ghost]{color:var(--cui-base-900)}@media (hover: hover){:host[data-appearance=ghost]:hover{background:var(--cui-base-50)}}:host[data-appearance=ghost]:active{background:var(--cui-base-50)}:host[data-appearance=ghost]:disabled{background:inherit}:host[data-appearance=flat]{color:var(--cui-light-blue-600)}@media (hover: hover){:host[data-appearance=flat]:hover{background:var(--cui-base-50)}}:host[data-appearance=flat]:active{background:var(--cui-base-50)}:host[data-appearance=flat]:disabled{background:inherit}:host[data-appearance=destructive]{background:var(--cui-danger);color:var(--cui-gray-0)}@media (hover: hover){:host[data-appearance=destructive]:hover{background:var(--cui-red-600)}}:host[data-appearance=destructive]:active{background:var(--cui-red-600)}:host[data-appearance=destructive]:disabled{background:var(--cui-danger)}:host[data-appearance=link]{height:24px!important;padding:0 4px!important;color:var(--cui-info)}@media (hover: hover){:host[data-appearance=link]:hover{color:var(--cui-blue-800)}}:host[data-appearance=link]:active{color:var(--cui-blue-800)}:host[data-appearance=link]:disabled{color:var(--cui-info)}:host[data-size=xxs]{font-size:12px;line-height:14px;height:28px;padding:0 8px}:host[data-size=xxs][data-appearance=action],:host[data-size=xxs][data-appearance=outlined],:host[data-size=xxs][data-appearance=outlined-gray]{padding:0 7px}:host[data-size=xxs]:has(.c-content:empty){width:28px}:host[data-size=xxs] .c-wrapper{gap:6px}:host[data-size=xs]{font-size:13px;line-height:16px;height:32px;padding:0 12px}:host[data-size=xs][data-appearance=action],:host[data-size=xs][data-appearance=outlined],:host[data-size=xs][data-appearance=outlined-gray]{padding:0 11px}:host[data-size=xs]:has(.c-content:empty){width:32px}:host[data-size=sm]{height:36px;padding:0 14px}:host[data-size=sm][data-appearance=action],:host[data-size=sm][data-appearance=outlined],:host[data-size=sm][data-appearance=outlined-gray]{padding:0 13px}:host[data-size=sm]:has(.c-content:empty){width:36px}:host[data-size=md]{height:40px;padding:0 16px}:host[data-size=md][data-appearance=action],:host[data-size=md][data-appearance=outlined],:host[data-size=md][data-appearance=outlined-gray]{padding:0 15px}:host[data-size=md]:has(.c-content:empty){width:40px}:host._disabled{opacity:.5}:host-context([cuiTheme=dark])[data-appearance=action]{background:var(--cui-light-blue-700)}@media (hover: hover){:host-context([cuiTheme=dark])[data-appearance=action]:hover{background:var(--cui-light-blue-600)}}:host-context([cuiTheme=dark])[data-appearance=action]:active{background:var(--cui-light-blue-600)}:host-context([cuiTheme=dark])[data-appearance=action]:disabled{background:var(--cui-light-blue-700)}@media (hover: hover){:host-context([cuiTheme=dark])[data-appearance=destructive]:hover{background:var(--cui-red-300)}}:host-context([cuiTheme=dark])[data-appearance=destructive]:active{background:var(--cui-red-300)}:host-context([cuiTheme=dark])[data-appearance=destructive]:disabled{background:var(--cui-danger)}.c-content:empty{display:contents}.c-wrapper{display:flex;justify-content:center;align-items:center;gap:8px;height:100%}.c-wrapper_invisible{opacity:0}.c-loader{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}\n"] }]
+        }], propDecorators: { shape: [{
+                type: Input
+            }, {
+                type: HostBinding,
+                args: ['attr.data-shape']
+            }], disabled: [{
+                type: Input
+            }, {
+                type: HostBinding,
+                args: ['class._disabled']
+            }], isLoaderShown: [{
+                type: Input
+            }, {
+                type: HostBinding,
+                args: ['class._loading']
+            }], icon: [{
+                type: Input
+            }], iconRight: [{
+                type: Input
+            }], appearance: [{
+                type: Input
+            }, {
+                type: HostBinding,
+                args: ['attr.data-appearance']
+            }], size: [{
+                type: Input
+            }, {
+                type: HostBinding,
+                args: ['attr.data-size']
+            }], containsOnlyIcon: [{
+                type: HostBinding,
+                args: ['class._only-icon']
+            }], isDisabled: [{
+                type: HostBinding,
+                args: ['disabled']
+            }], content: [{
+                type: ViewChild,
+                args: ['content']
             }] } });
 
-class CuiAccordionItemComponent {
-    constructor() {
-        this.isOpen = true;
-        this.isOpenChange = new EventEmitter();
-    }
-    get buttonIcon() {
-        return this.isOpen ? 'cuiIconChevronDown' : 'cuiIconChevronRight';
-    }
-    onRowToggle() {
-        this.isOpen = !this.isOpen;
-        this.isOpenChange.emit(this.isOpen);
-    }
-}
-CuiAccordionItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CuiAccordionItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-CuiAccordionItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: CuiAccordionItemComponent, selector: "cui-accordion-item", inputs: { isOpen: "isOpen" }, outputs: { isOpenChange: "isOpenChange" }, ngImport: i0, template: "<header class=\"c-header\">\r\n  <button\r\n    cuiButton\r\n    appearance=\"ghost\"\r\n    size=\"xxs\"\r\n    [icon]=\"buttonIcon\"\r\n    (click)=\"onRowToggle()\"\r\n  ></button>\r\n  <div class=\"c-header__wrapper\">\r\n    <ng-content></ng-content>\r\n  </div>\r\n</header>\r\n<div *ngIf=\"isOpen\">\r\n  <ng-content select=\"[cuiAccordionItemContent]\"></ng-content>\r\n</div>\r\n", styles: [":host{padding:16px;display:flex;flex-direction:column;gap:8px;background:var(--cui-base-10);border-radius:8px}.c-header{font-weight:400;font-size:12px;line-height:14px;display:flex;align-items:center;gap:8px;color:var(--cui-base-900);font-family:var(--cui-main-font);text-transform:uppercase}.c-header__wrapper{width:100%}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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: CuiAccordionItemComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'cui-accordion-item', changeDetection: ChangeDetectionStrategy.OnPush, template: "<header class=\"c-header\">\r\n  <button\r\n    cuiButton\r\n    appearance=\"ghost\"\r\n    size=\"xxs\"\r\n    [icon]=\"buttonIcon\"\r\n    (click)=\"onRowToggle()\"\r\n  ></button>\r\n  <div class=\"c-header__wrapper\">\r\n    <ng-content></ng-content>\r\n  </div>\r\n</header>\r\n<div *ngIf=\"isOpen\">\r\n  <ng-content select=\"[cuiAccordionItemContent]\"></ng-content>\r\n</div>\r\n", styles: [":host{padding:16px;display:flex;flex-direction:column;gap:8px;background:var(--cui-base-10);border-radius:8px}.c-header{font-weight:400;font-size:12px;line-height:14px;display:flex;align-items:center;gap:8px;color:var(--cui-base-900);font-family:var(--cui-main-font);text-transform:uppercase}.c-header__wrapper{width:100%}\n"] }]
-        }], propDecorators: { isOpen: [{
-                type: Input
-            }], isOpenChange: [{
-                type: Output
+class CuiAccordionItemComponent {
+    constructor() {
+        this.isOpen = true;
+        this.isOpenChange = new EventEmitter();
+    }
+    get buttonIcon() {
+        return this.isOpen ? 'cuiIconChevronDown' : 'cuiIconChevronRight';
+    }
+    onRowToggle() {
+        this.isOpen = !this.isOpen;
+        this.isOpenChange.emit(this.isOpen);
+    }
+}
+CuiAccordionItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CuiAccordionItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+CuiAccordionItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: CuiAccordionItemComponent, selector: "cui-accordion-item", inputs: { isOpen: "isOpen" }, outputs: { isOpenChange: "isOpenChange" }, ngImport: i0, template: "<header class=\"c-header\">\n  <button\n    cuiButton\n    appearance=\"ghost\"\n    size=\"xxs\"\n    [icon]=\"buttonIcon\"\n    (click)=\"onRowToggle()\"\n  ></button>\n  <div class=\"c-header__wrapper\">\n    <ng-content></ng-content>\n  </div>\n</header>\n<div *ngIf=\"isOpen\">\n  <ng-content select=\"[cuiAccordionItemContent]\"></ng-content>\n</div>\n", styles: [":host{padding:16px;display:flex;flex-direction:column;gap:8px;background:var(--cui-base-10);border-radius:8px}.c-header{font-weight:400;font-size:12px;line-height:14px;display:flex;align-items:center;gap:8px;color:var(--cui-base-900);font-family:var(--cui-main-font);text-transform:uppercase}.c-header__wrapper{width:100%}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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: CuiAccordionItemComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'cui-accordion-item', changeDetection: ChangeDetectionStrategy.OnPush, template: "<header class=\"c-header\">\n  <button\n    cuiButton\n    appearance=\"ghost\"\n    size=\"xxs\"\n    [icon]=\"buttonIcon\"\n    (click)=\"onRowToggle()\"\n  ></button>\n  <div class=\"c-header__wrapper\">\n    <ng-content></ng-content>\n  </div>\n</header>\n<div *ngIf=\"isOpen\">\n  <ng-content select=\"[cuiAccordionItemContent]\"></ng-content>\n</div>\n", styles: [":host{padding:16px;display:flex;flex-direction:column;gap:8px;background:var(--cui-base-10);border-radius:8px}.c-header{font-weight:400;font-size:12px;line-height:14px;display:flex;align-items:center;gap:8px;color:var(--cui-base-900);font-family:var(--cui-main-font);text-transform:uppercase}.c-header__wrapper{width:100%}\n"] }]
+        }], propDecorators: { isOpen: [{
+                type: Input
+            }], isOpenChange: [{
+                type: Output
             }] } });
 
-class CuiSvgModule {
-}
-CuiSvgModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CuiSvgModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-CuiSvgModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: CuiSvgModule, declarations: [CuiSvgComponent], imports: [CommonModule], exports: [CuiSvgComponent] });
-CuiSvgModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CuiSvgModule, imports: [CommonModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CuiSvgModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [CommonModule],
-                    declarations: [CuiSvgComponent],
-                    exports: [CuiSvgComponent]
-                }]
+class CuiSvgModule {
+}
+CuiSvgModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CuiSvgModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+CuiSvgModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: CuiSvgModule, declarations: [CuiSvgComponent], imports: [CommonModule], exports: [CuiSvgComponent] });
+CuiSvgModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CuiSvgModule, imports: [CommonModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CuiSvgModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [CommonModule],
+                    declarations: [CuiSvgComponent],
+                    exports: [CuiSvgComponent]
+                }]
         }] });
 
-class CuiButtonModule {
-}
-CuiButtonModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CuiButtonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-CuiButtonModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: CuiButtonModule, declarations: [CuiButtonComponent], imports: [CommonModule,
-        CuiSvgModule], exports: [CuiButtonComponent] });
-CuiButtonModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CuiButtonModule, imports: [CommonModule,
-        CuiSvgModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CuiButtonModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [
-                        CommonModule,
-                        CuiSvgModule
-                    ],
-                    declarations: [CuiButtonComponent],
-                    exports: [CuiButtonComponent]
-                }]
+class CuiButtonModule {
+}
+CuiButtonModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CuiButtonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+CuiButtonModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: CuiButtonModule, declarations: [CuiButtonComponent], imports: [CommonModule,
+        CuiSvgModule], exports: [CuiButtonComponent] });
+CuiButtonModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CuiButtonModule, imports: [CommonModule,
+        CuiSvgModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CuiButtonModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        CommonModule,
+                        CuiSvgModule
+                    ],
+                    declarations: [CuiButtonComponent],
+                    exports: [CuiButtonComponent]
+                }]
         }] });
 
-class CuiAccordionModule {
-}
-CuiAccordionModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CuiAccordionModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-CuiAccordionModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: CuiAccordionModule, declarations: [CuiAccordionComponent,
-        CuiAccordionItemComponent], imports: [CommonModule,
-        CuiSvgModule,
-        CuiButtonModule], exports: [CuiAccordionComponent,
-        CuiAccordionItemComponent] });
-CuiAccordionModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CuiAccordionModule, imports: [CommonModule,
-        CuiSvgModule,
-        CuiButtonModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CuiAccordionModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [
-                        CommonModule,
-                        CuiSvgModule,
-                        CuiButtonModule,
-                    ],
-                    declarations: [
-                        CuiAccordionComponent,
-                        CuiAccordionItemComponent
-                    ],
-                    exports: [
-                        CuiAccordionComponent,
-                        CuiAccordionItemComponent
-                    ]
-                }]
+class CuiAccordionModule {
+}
+CuiAccordionModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CuiAccordionModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+CuiAccordionModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: CuiAccordionModule, declarations: [CuiAccordionComponent,
+        CuiAccordionItemComponent], imports: [CommonModule,
+        CuiSvgModule,
+        CuiButtonModule], exports: [CuiAccordionComponent,
+        CuiAccordionItemComponent] });
+CuiAccordionModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CuiAccordionModule, imports: [CommonModule,
+        CuiSvgModule,
+        CuiButtonModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CuiAccordionModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        CommonModule,
+                        CuiSvgModule,
+                        CuiButtonModule,
+                    ],
+                    declarations: [
+                        CuiAccordionComponent,
+                        CuiAccordionItemComponent
+                    ],
+                    exports: [
+                        CuiAccordionComponent,
+                        CuiAccordionItemComponent
+                    ]
+                }]
         }] });
 
-const CUI_NOTIFICATION_DEFAULT_OPTIONS = {
-    status: 'info'
-};
+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(() => (Object.assign(Object.assign({}, CUI_ALERT_DEFAULT_OPTIONS), inject(CUI_NOTIFICATION_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(() => (Object.assign(Object.assign({}, 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(--c-info-icon-color)'
-            },
-            success: {
-                icon: 'cuiIconCheckCircle',
-                color: 'var(--cui-green-500)'
-            },
-            alert: {
-                icon: 'cuiIconAlertTriangle',
-                color: 'var(--cui-yellow-400)'
-            },
-            error: {
-                icon: 'cuiIconXCircle',
-                color: 'var(--cui-danger)'
-            },
-        };
-        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\r\n  *cuiLet=\"ICON_OPTIONS[status] as iconOption\"\r\n  [icon]=\"iconOption.icon\"\r\n  [color]=\"iconOption.color\"\r\n></cui-svg>\r\n<div class=\"c-content\">\r\n  <ng-content></ng-content>\r\n</div>\r\n<button\r\n  *ngIf=\"isCloseable\"\r\n  class=\"c-button\"\r\n  (click)=\"onClose()\"\r\n>\r\n  <cui-svg\r\n    icon=\"cuiIconX\"\r\n    color=\"var(--cui-gray-0)\"\r\n  />\r\n</button>\r\n", styles: [":host{--c-info-icon-color: var(--cui-blue-600);padding:16px;font-weight:400;font-size:14px;line-height:20px;display:flex;align-items:flex-start;border-radius:12px;background:var(--cui-gray-800);color:var(--cui-gray-0);font-family:var(--cui-main-font)}:host-context([cuiTheme=dark]){--c-info-icon-color: var(--cui-light-blue-400)}: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;overflow-wrap:anywhere}.c-button{display:flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:8px;padding:0;border:0;flex-shrink:0;outline:none;cursor:pointer;appearance:none;color:inherit;font:inherit;background:inherit;text-decoration:none;-webkit-tap-highlight-color:transparent}.c-button:hover{background:rgba(255,255,255,.2)}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.CuiLetDirective, selector: "[cuiLet]", inputs: ["cuiLet"] }, { 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: CuiNotificationComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'cui-notification', changeDetection: ChangeDetectionStrategy.OnPush, template: "<cui-svg\r\n  *cuiLet=\"ICON_OPTIONS[status] as iconOption\"\r\n  [icon]=\"iconOption.icon\"\r\n  [color]=\"iconOption.color\"\r\n></cui-svg>\r\n<div class=\"c-content\">\r\n  <ng-content></ng-content>\r\n</div>\r\n<button\r\n  *ngIf=\"isCloseable\"\r\n  class=\"c-button\"\r\n  (click)=\"onClose()\"\r\n>\r\n  <cui-svg\r\n    icon=\"cuiIconX\"\r\n    color=\"var(--cui-gray-0)\"\r\n  />\r\n</button>\r\n", styles: [":host{--c-info-icon-color: var(--cui-blue-600);padding:16px;font-weight:400;font-size:14px;line-height:20px;display:flex;align-items:flex-start;border-radius:12px;background:var(--cui-gray-800);color:var(--cui-gray-0);font-family:var(--cui-main-font)}:host-context([cuiTheme=dark]){--c-info-icon-color: var(--cui-light-blue-400)}: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;overflow-wrap:anywhere}.c-button{display:flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:8px;padding:0;border:0;flex-shrink:0;outline:none;cursor:pointer;appearance:none;color:inherit;font:inherit;background:inherit;text-decoration:none;-webkit-tap-highlight-color:transparent}.c-button:hover{background:rgba(255,255,255,.2)}\n"] }]
-        }], propDecorators: { status: [{
-                type: Input
-            }, {
-                type: HostBinding,
-                args: ['attr.data-status']
-            }], isCloseable: [{
-                type: Input
-            }], closed: [{
-                type: Output
+class CuiNotificationComponent {
+    constructor() {
+        this.cuiNotificationOptions = inject(CUI_NOTIFICATION_OPTIONS);
+        this.ICON_OPTIONS = {
+            info: {
+                icon: 'cuiIconInfo',
+                color: 'var(--c-info-icon-color)'
+            },
+            success: {
+                icon: 'cuiIconCheckCircle',
+                color: 'var(--cui-green-500)'
+            },
+            alert: {
+                icon: 'cuiIconAlertTriangle',
+                color: 'var(--cui-yellow-400)'
+            },
+            error: {
+                icon: 'cuiIconXCircle',
+                color: 'var(--cui-danger)'
+            },
+        };
+        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  *cuiLet=\"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  class=\"c-button\"\n  (click)=\"onClose()\"\n>\n  <cui-svg\n    icon=\"cuiIconX\"\n    color=\"var(--cui-gray-0)\"\n  />\n</button>\n", styles: [":host{--c-info-icon-color: var(--cui-blue-600);padding:16px;font-weight:400;font-size:14px;line-height:20px;display:flex;align-items:flex-start;border-radius:12px;background:var(--cui-gray-800);color:var(--cui-gray-0);font-family:var(--cui-main-font)}:host-context([cuiTheme=dark]){--c-info-icon-color: var(--cui-light-blue-400)}: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;overflow-wrap:anywhere}.c-button{display:flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:8px;padding:0;border:0;flex-shrink:0;outline:none;cursor:pointer;appearance:none;color:inherit;font:inherit;background:inherit;text-decoration:none;-webkit-tap-highlight-color:transparent}.c-button:hover{background:rgba(255,255,255,.2)}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.CuiLetDirective, selector: "[cuiLet]", inputs: ["cuiLet"] }, { 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: CuiNotificationComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'cui-notification', changeDetection: ChangeDetectionStrategy.OnPush, template: "<cui-svg\n  *cuiLet=\"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  class=\"c-button\"\n  (click)=\"onClose()\"\n>\n  <cui-svg\n    icon=\"cuiIconX\"\n    color=\"var(--cui-gray-0)\"\n  />\n</button>\n", styles: [":host{--c-info-icon-color: var(--cui-blue-600);padding:16px;font-weight:400;font-size:14px;line-height:20px;display:flex;align-items:flex-start;border-radius:12px;background:var(--cui-gray-800);color:var(--cui-gray-0);font-family:var(--cui-main-font)}:host-context([cuiTheme=dark]){--c-info-icon-color: var(--cui-light-blue-400)}: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;overflow-wrap:anywhere}.c-button{display:flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:8px;padding:0;border:0;flex-shrink:0;outline:none;cursor:pointer;appearance:none;color:inherit;font:inherit;background:inherit;text-decoration:none;-webkit-tap-highlight-color:transparent}.c-button:hover{background:rgba(255,255,255,.2)}\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\r\n  [status]=\"context.status\"\r\n  [isCloseable]=\"context.isCloseable\"\r\n  (closed)=\"onClosed()\"\r\n>\r\n  <h2\r\n    *ngIf=\"context.label\"\r\n    class=\"c-heading\"\r\n  >\r\n    {{ context.label }}\r\n  </h2>\r\n  {{ context.content }}\r\n</cui-notification>\r\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: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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\r\n  [status]=\"context.status\"\r\n  [isCloseable]=\"context.isCloseable\"\r\n  (closed)=\"onClosed()\"\r\n>\r\n  <h2\r\n    *ngIf=\"context.label\"\r\n    class=\"c-heading\"\r\n  >\r\n    {{ context.label }}\r\n  </h2>\r\n  {{ context.content }}\r\n</cui-notification>\r\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 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\n    *ngIf=\"context.label\"\n    class=\"c-heading\"\n  >\n    {{ context.label }}\n  </h2>\n  {{ 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: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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\n    *ngIf=\"context.label\"\n    class=\"c-heading\"\n  >\n    {{ context.label }}\n  </h2>\n  {{ 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 *cuiLet=\"alerts$ | async as alerts\">\r\n  <div class=\"c-wrapper c-wrapper_position_center\">\r\n    <ng-container *ngFor=\"let alert of alerts! | cuiFilter: alertsMatcher: 'center'; let i = index; trackBy: trackByFn\">\r\n      <ng-container *ngComponentOutlet=\"alert.component; injector: alertInjectors[i]\" />\r\n    </ng-container>\r\n  </div>\r\n  <div class=\"c-wrapper c-wrapper_position_right\">\r\n    <ng-container *ngFor=\"let alert of alerts! | cuiFilter: alertsMatcher: 'right'; let i = index; trackBy: trackByFn\">\r\n      <ng-container *ngComponentOutlet=\"alert.component; injector: alertInjectors[i]\" />\r\n    </ng-container>\r\n  </div>\r\n</ng-container>\r\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;pointer-events:none}.c-wrapper_position_center{align-items:center;left:50%;transform:translate(-50%)}.c-wrapper_position_right{align-items:flex-end;right:20px}.c-wrapper ::ng-deep>*{pointer-events:auto}\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: i2.CuiLetDirective, selector: "[cuiLet]", inputs: ["cuiLet"] }, { 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 *cuiLet=\"alerts$ | async as alerts\">\r\n  <div class=\"c-wrapper c-wrapper_position_center\">\r\n    <ng-container *ngFor=\"let alert of alerts! | cuiFilter: alertsMatcher: 'center'; let i = index; trackBy: trackByFn\">\r\n      <ng-container *ngComponentOutlet=\"alert.component; injector: alertInjectors[i]\" />\r\n    </ng-container>\r\n  </div>\r\n  <div class=\"c-wrapper c-wrapper_position_right\">\r\n    <ng-container *ngFor=\"let alert of alerts! | cuiFilter: alertsMatcher: 'right'; let i = index; trackBy: trackByFn\">\r\n      <ng-container *ngComponentOutlet=\"alert.component; injector: alertInjectors[i]\" />\r\n    </ng-container>\r\n  </div>\r\n</ng-container>\r\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;pointer-events:none}.c-wrapper_position_center{align-items:center;left:50%;transform:translate(-50%)}.c-wrapper_position_right{align-items:flex-end;right:20px}.c-wrapper ::ng-deep>*{pointer-events:auto}\n"] }]
+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 *cuiLet=\"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]\" />\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]\" />\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;pointer-events:none}.c-wrapper_position_center{align-items:center;left:50%;transform:translate(-50%)}.c-wrapper_position_right{align-items:flex-end;right:20px}.c-wrapper ::ng-deep>*{pointer-events:auto}\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: i2.CuiLetDirective, selector: "[cuiLet]", inputs: ["cuiLet"] }, { 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 *cuiLet=\"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]\" />\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]\" />\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;pointer-events:none}.c-wrapper_position_center{align-items:center;left:50%;transform:translate(-50%)}.c-wrapper_position_right{align-items:flex-end;right:20px}.c-wrapper ::ng-deep>*{pointer-events:auto}\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,
-        CuiLetDirective,
-        CuiSvgModule], exports: [CuiNotificationComponent] });
-CuiNotificationModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CuiNotificationModule, imports: [CommonModule,
-        CuiSvgModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CuiNotificationModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [
-                        CommonModule,
-                        CuiLetDirective,
-                        CuiSvgModule
-                    ],
-                    declarations: [CuiNotificationComponent],
-                    exports: [CuiNotificationComponent]
-                }]
+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,
+        CuiLetDirective,
+        CuiSvgModule], exports: [CuiNotificationComponent] });
+CuiNotificationModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CuiNotificationModule, imports: [CommonModule,
+        CuiSvgModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CuiNotificationModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        CommonModule,
+                        CuiLetDirective,
+                        CuiSvgModule
+                    ],
+                    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,
-        CuiLetDirective], exports: [CuiAlertComponent,
-        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,
-                        CuiLetDirective
-                    ],
-                    declarations: [
-                        CuiAlertComponent,
-                        CuiAlertsComponent
-                    ],
-                    exports: [
-                        CuiAlertComponent,
-                        CuiAlertComponent,
-                        CuiAlertsComponent
-                    ]
-                }]
+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,
+        CuiLetDirective], exports: [CuiAlertComponent,
+        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,
+                        CuiLetDirective
+                    ],
+                    declarations: [
+                        CuiAlertComponent,
+                        CuiAlertsComponent
+                    ],
+                    exports: [
+                        CuiAlertComponent,
+                        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 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))
+                }]
         }] });
 
-const CUI_BADGE_DEFAULT_OPTIONS = {
-    status: 'info',
-    size: 'sm',
-    isWithDot: false
-};
+const CUI_BADGE_DEFAULT_OPTIONS = {
+    color: 'light-blue',
+    size: 'sm',
+    isWithDot: false
+};
 const CUI_BADGE_OPTIONS = cuiCreateToken(CUI_BADGE_DEFAULT_OPTIONS);
 
-class CuiBadgeComponent {
-    constructor() {
-        this.options = inject(CUI_BADGE_OPTIONS);
-        this.status = this.options.status;
-        this.size = this.options.size;
-        this.isWithDot = this.options.isWithDot;
-    }
-}
-CuiBadgeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CuiBadgeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-CuiBadgeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: CuiBadgeComponent, selector: "cui-badge", inputs: { status: "status", size: "size", isWithDot: "isWithDot" }, host: { properties: { "attr.data-status": "this.status", "attr.data-size": "this.size" } }, ngImport: i0, template: "<span\r\n  *ngIf=\"isWithDot\"\r\n  class=\"c-dots\"\r\n></span>\r\n<ng-content />", styles: [":host{padding-top:2px;padding-bottom:2px;display:inline-flex;align-items:center;gap:4px;border-radius:25px;color:var(--cui-gray-900);font-family:var(--cui-main-font)}:host[data-status=info]{background:var(--cui-light-blue-50)}:host[data-status=info] .c-dots{background:var(--cui-info)}:host[data-status=success]{background:var(--cui-green-50)}:host[data-status=success] .c-dots{background:var(--cui-success)}:host[data-status=alert]{background:var(--cui-yellow-50)}:host[data-status=alert] .c-dots{background:var(--cui-warning)}:host[data-status=error]{background:var(--cui-red-50)}:host[data-status=error] .c-dots{background:var(--cui-danger)}:host[data-size=sm]{font-size:12px;line-height:14px;padding-right:6px;padding-left:6px}:host[data-size=md]{font-size:14px;line-height:20px;padding-right:8px;padding-left:8px}:host-context([cuiTheme=dark])[data-status=info]{color:var(--cui-light-blue-600);background:var(--cui-blue-900)}:host-context([cuiTheme=dark])[data-status=success]{color:var(--cui-green-600);background:var(--cui-green-900)}:host-context([cuiTheme=dark])[data-status=alert]{color:var(--cui-yellow-400);background:var(--cui-yellow-900)}:host-context([cuiTheme=dark])[data-status=error]{color:var(--cui-red-400);background:var(--cui-red-900)}.c-dots{width:6px;height:6px;border-radius:50%}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CuiBadgeComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'cui-badge', changeDetection: ChangeDetectionStrategy.OnPush, template: "<span\r\n  *ngIf=\"isWithDot\"\r\n  class=\"c-dots\"\r\n></span>\r\n<ng-content />", styles: [":host{padding-top:2px;padding-bottom:2px;display:inline-flex;align-items:center;gap:4px;border-radius:25px;color:var(--cui-gray-900);font-family:var(--cui-main-font)}:host[data-status=info]{background:var(--cui-light-blue-50)}:host[data-status=info] .c-dots{background:var(--cui-info)}:host[data-status=success]{background:var(--cui-green-50)}:host[data-status=success] .c-dots{background:var(--cui-success)}:host[data-status=alert]{background:var(--cui-yellow-50)}:host[data-status=alert] .c-dots{background:var(--cui-warning)}:host[data-status=error]{background:var(--cui-red-50)}:host[data-status=error] .c-dots{background:var(--cui-danger)}:host[data-size=sm]{font-size:12px;line-height:14px;padding-right:6px;padding-left:6px}:host[data-size=md]{font-size:14px;line-height:20px;padding-right:8px;padding-left:8px}:host-context([cuiTheme=dark])[data-status=info]{color:var(--cui-light-blue-600);background:var(--cui-blue-900)}:host-context([cuiTheme=dark])[data-status=success]{color:var(--cui-green-600);background:var(--cui-green-900)}:host-context([cuiTheme=dark])[data-status=alert]{color:var(--cui-yellow-400);background:var(--cui-yellow-900)}:host-context([cuiTheme=dark])[data-status=error]{color:var(--cui-red-400);background:var(--cui-red-900)}.c-dots{width:6px;height:6px;border-radius:50%}\n"] }]
-        }], propDecorators: { status: [{
-                type: Input
-            }, {
-                type: HostBinding,
-                args: ['attr.data-status']
-            }], size: [{
-                type: Input
-            }, {
-                type: HostBinding,
-                args: ['attr.data-size']
-            }], isWithDot: [{
-                type: Input
+class CuiBadgeComponent {
+    constructor() {
+        this.options = inject(CUI_BADGE_OPTIONS);
+        this.color = this.options.color;
+        this.size = this.options.size;
+        this.isWithDot = this.options.isWithDot;
+    }
+}
+CuiBadgeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CuiBadgeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+CuiBadgeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: CuiBadgeComponent, selector: "cui-badge", inputs: { color: "color", size: "size", isWithDot: "isWithDot" }, host: { properties: { "attr.data-color": "this.color", "attr.data-size": "this.size" } }, ngImport: i0, template: "<span\n  *ngIf=\"isWithDot\"\n  class=\"c-dots\"\n></span>\n<ng-content />", styles: [":host{padding-top:2px;padding-bottom:2px;display:inline-flex;align-items:center;gap:4px;border-radius:25px;color:var(--cui-gray-900);font-family:var(--cui-main-font)}:host[data-color=light-blue]{color:var(--cui-badge-info-label);background:var(--cui-badge-info-bg)}:host[data-color=light-blue] .c-dots{background:var(--cui-info)}:host[data-color=yellow]{color:var(--cui-badge-warning-label);background:var(--cui-badge-warning-bg)}:host[data-color=yellow] .c-dots{background:var(--cui-warning)}:host[data-color=green]{color:var(--cui-badge-success-label);background:var(--cui-badge-success-bg)}:host[data-color=green] .c-dots{background:var(--cui-success)}:host[data-color=gray]{color:var(--cui-badge-gray-label);background:var(--cui-badge-gray-bg)}:host[data-color=gray] .c-dots{background:var(--cui-base-500)}:host[data-color=dark-gray]{color:var(--cui-base-900);background:var(--cui-base-200)}:host[data-color=dark-gray] .c-dots{background:var(--cui-base-500)}:host[data-color=red]{color:var(--cui-badge-danger-label);background:var(--cui-badge-danger-bg)}:host[data-color=red] .c-dots{background:var(--cui-danger)}:host[data-color=violet]{color:var(--cui-badge-violet-label);background:var(--cui-badge-violet-bg)}:host[data-color=violet] .c-dots{background:var(--cui-violet-400)}:host[data-size=sm]{font-size:12px;line-height:14px;padding-right:6px;padding-left:6px}:host[data-size=md]{font-size:14px;line-height:20px;padding-right:8px;padding-left:8px}.c-dots{width:6px;height:6px;border-radius:50%}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CuiBadgeComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'cui-badge', changeDetection: ChangeDetectionStrategy.OnPush, template: "<span\n  *ngIf=\"isWithDot\"\n  class=\"c-dots\"\n></span>\n<ng-content />", styles: [":host{padding-top:2px;padding-bottom:2px;display:inline-flex;align-items:center;gap:4px;border-radius:25px;color:var(--cui-gray-900);font-family:var(--cui-main-font)}:host[data-color=light-blue]{color:var(--cui-badge-info-label);background:var(--cui-badge-info-bg)}:host[data-color=light-blue] .c-dots{background:var(--cui-info)}:host[data-color=yellow]{color:var(--cui-badge-warning-label);background:var(--cui-badge-warning-bg)}:host[data-color=yellow] .c-dots{background:var(--cui-warning)}:host[data-color=green]{color:var(--cui-badge-success-label);background:var(--cui-badge-success-bg)}:host[data-color=green] .c-dots{background:var(--cui-success)}:host[data-color=gray]{color:var(--cui-badge-gray-label);background:var(--cui-badge-gray-bg)}:host[data-color=gray] .c-dots{background:var(--cui-base-500)}:host[data-color=dark-gray]{color:var(--cui-base-900);background:var(--cui-base-200)}:host[data-color=dark-gray] .c-dots{background:var(--cui-base-500)}:host[data-color=red]{color:var(--cui-badge-danger-label);background:var(--cui-badge-danger-bg)}:host[data-color=red] .c-dots{background:var(--cui-danger)}:host[data-color=violet]{color:var(--cui-badge-violet-label);background:var(--cui-badge-violet-bg)}:host[data-color=violet] .c-dots{background:var(--cui-violet-400)}:host[data-size=sm]{font-size:12px;line-height:14px;padding-right:6px;padding-left:6px}:host[data-size=md]{font-size:14px;line-height:20px;padding-right:8px;padding-left:8px}.c-dots{width:6px;height:6px;border-radius:50%}\n"] }]
+        }], propDecorators: { color: [{
+                type: Input
+            }, {
+                type: HostBinding,
+                args: ['attr.data-color']
+            }], size: [{
+                type: Input
+            }, {
+                type: HostBinding,
+                args: ['attr.data-size']
+            }], isWithDot: [{
+                type: Input
             }] } });
 
-class CuiBadgeModule {
-}
-CuiBadgeModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CuiBadgeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-CuiBadgeModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: CuiBadgeModule, declarations: [CuiBadgeComponent], imports: [CommonModule], exports: [CuiBadgeComponent] });
-CuiBadgeModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CuiBadgeModule, imports: [CommonModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CuiBadgeModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [CommonModule],
-                    declarations: [CuiBadgeComponent],
-                    exports: [CuiBadgeComponent]
-                }]
+class CuiBadgeModule {
+}
+CuiBadgeModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CuiBadgeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+CuiBadgeModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: CuiBadgeModule, declarations: [CuiBadgeComponent], imports: [CommonModule], exports: [CuiBadgeComponent] });
+CuiBadgeModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CuiBadgeModule, imports: [CommonModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CuiBadgeModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [CommonModule],
+                    declarations: [CuiBadgeComponent],
+                    exports: [CuiBadgeComponent]
+                }]
         }] });
 
-const CUI_BANNER_DEFAULT_OPTIONS = {
-    status: 'info'
-};
+const CUI_BANNER_DEFAULT_OPTIONS = {
+    status: 'info'
+};
 const CUI_BANNER_OPTIONS = cuiCreateToken(CUI_BANNER_DEFAULT_OPTIONS);
 
-const CUI_THEME_STORAGE_DEFAULT_KEY = 'cuiTheme';
-const CUI_DEFAULT_THEME = 'light';
-const CUI_THEME_STORAGE_KEY = cuiCreateToken(CUI_THEME_STORAGE_DEFAULT_KEY);
+const CUI_THEME_STORAGE_DEFAULT_KEY = 'cuiTheme';
+const CUI_DEFAULT_THEME = 'light';
+const CUI_THEME_STORAGE_KEY = cuiCreateToken(CUI_THEME_STORAGE_DEFAULT_KEY);
 const CUI_THEME = cuiCreateToken(CUI_DEFAULT_THEME);
 
-class CuiThemeService extends BehaviorSubject {
-    constructor() {
-        var _a;
-        super((_a = inject(CUI_LOCAL_STORAGE).getItem(inject(CUI_THEME_STORAGE_KEY))) !== null && _a !== void 0 ? _a : inject(CUI_THEME));
-        this.localStorage = inject(CUI_LOCAL_STORAGE);
-        this.key = inject(CUI_THEME_STORAGE_KEY);
-    }
-    next(theme) {
-        this.localStorage.setItem(this.key, theme);
-        super.next(theme);
-    }
-    // При работе только двух тем
-    switch() {
-        this.next(this.value === 'light' ? 'dark' : 'light');
-    }
-}
-CuiThemeService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CuiThemeService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-CuiThemeService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CuiThemeService, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CuiThemeService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root'
-                }]
+class CuiThemeService extends BehaviorSubject {
+    constructor() {
+        var _a;
+        super((_a = inject(CUI_LOCAL_STORAGE).getItem(inject(CUI_THEME_STORAGE_KEY))) !== null && _a !== void 0 ? _a : inject(CUI_THEME));
+        this.localStorage = inject(CUI_LOCAL_STORAGE);
+        this.key = inject(CUI_THEME_STORAGE_KEY);
+    }
+    next(theme) {
+        this.localStorage.setItem(this.key, theme);
+        super.next(theme);
+    }
+    // При работе только двух тем
+    switch() {
+        this.next(this.value === 'light' ? 'dark' : 'light');
+    }
+}
+CuiThemeService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CuiThemeService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+CuiThemeService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CuiThemeService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CuiThemeService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
         }], ctorParameters: function () { return []; } });
 
-class CuiBannerComponent {
-    constructor() {
-        this.options = inject(CUI_BANNER_OPTIONS);
-        this.theme$ = inject(CuiThemeService);
-        this.ICON_OPTIONS = {
-            info: {
-                icon: 'cuiIconInfo',
-                color: 'var(--c-info-icon-color)'
-            },
-            success: {
-                icon: 'cuiIconCheckCircle',
-                color: 'var(--cui-success)'
-            },
-            alert: {
-                icon: 'cuiIconAlertTriangle',
-                color: 'var(--c-alert-icon-color)'
-            },
-            error: {
-                icon: 'cuiIconXCircle',
-                color: 'var(--cui-danger)'
-            },
-        };
-        this.THEME_CLOSE_BUTTON_ICON_COLORS = {
-            light: 'var(--cui-gray-500)',
-            dark: 'var(--cui-gray-0)'
-        };
-        this.status = this.options.status;
-        this.isCloseable = true;
-        this.actionButtonClicked = new EventEmitter();
-        this.closed = new EventEmitter();
-    }
-    onAction() {
-        this.actionButtonClicked.emit();
-    }
-    onClose() {
-        this.closed.emit();
-    }
-}
-CuiBannerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CuiBannerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-CuiBannerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: CuiBannerComponent, selector: "cui-banner", inputs: { status: "status", isCloseable: "isCloseable", label: "label", actionButtonText: "actionButtonText" }, outputs: { actionButtonClicked: "actionButtonClicked", closed: "closed" }, host: { properties: { "attr.data-status": "this.status" } }, ngImport: i0, template: "<cui-svg\r\n  *cuiLet=\"ICON_OPTIONS[status] as iconOption\"\r\n  [icon]=\"iconOption.icon\"\r\n  [color]=\"iconOption.color\"\r\n  class=\"c-icon\"\r\n></cui-svg>\r\n<div class=\"c-wrapper\">\r\n  <h2\r\n    *ngIf=\"label\"\r\n    class=\"c-heading\"\r\n  >\r\n    {{ label }}\r\n  </h2>\r\n  <ng-content></ng-content>\r\n  <button\r\n    cuiButton\r\n    *ngIf=\"actionButtonText\"\r\n    appearance=\"link\"\r\n    class=\"c-action\"\r\n    (click)=\"onAction()\"\r\n  >\r\n    {{ actionButtonText }}\r\n  </button>\r\n</div>\r\n<button\r\n  *ngIf=\"isCloseable\"\r\n  class=\"c-button\"\r\n  (click)=\"onClose()\"\r\n>\r\n  <cui-svg\r\n    *cuiLet=\"theme$ | async as theme\"\r\n    icon=\"cuiIconX\"\r\n    [color]=\"THEME_CLOSE_BUTTON_ICON_COLORS[theme!]\"\r\n  />\r\n</button>\r\n", styles: [":host{--c-info-icon-color: var(--cui-light-blue-800);--c-alert-icon-color: var(--cui-orange-800);padding:12px 16px;font-weight:400;font-size:14px;line-height:20px;display:flex;color:var(--cui-base-900);font-family:var(--cui-main-font)}:host[data-status=info]{color:var(--cui-light-blue-800);background:var(--cui-blue-50)}:host[data-status=success]{background:var(--cui-green-50)}:host[data-status=alert]{color:var(--cui-orange-800);background:var(--cui-yellow-100)}:host[data-status=error]{background:var(--cui-red-50)}:host-context([cuiTheme=dark]){--c-info-icon-color: var(--cui-light-blue-400);--c-alert-icon-color: var(--cui-yellow-300);color:var(--cui-gray-0)}:host-context([cuiTheme=dark])[data-status=info]{color:var(--cui-light-blue-400);background:var(--cui-blue-900)}:host-context([cuiTheme=dark])[data-status=info] .c-action:hover{color:var(--cui-blue-500)}:host-context([cuiTheme=dark])[data-status=success]{background:var(--cui-green-900)}:host-context([cuiTheme=dark])[data-status=success] .c-action{color:var(--cui-green-500)}:host-context([cuiTheme=dark])[data-status=alert]{background:var(--cui-yellow-900)}:host-context([cuiTheme=dark])[data-status=alert] .c-action{color:var(--cui-yellow-300)}:host-context([cuiTheme=dark])[data-status=error]{background:var(--cui-red-900)}:host-context([cuiTheme=dark])[data-status=error] .c-action{color:var(--cui-red-400)}.c-icon{height:28px}.c-wrapper{flex:1;display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-left:12px;margin-right:16px;overflow-wrap:anywhere}.c-heading{font-weight:500;font-size:14px;line-height:20px;margin:0}.c-button{display:flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:8px;padding:0;border:0;flex-shrink:0;outline:none;cursor:pointer;appearance:none;color:inherit;font:inherit;background:inherit;text-decoration:none;-webkit-tap-highlight-color:transparent}.c-button:hover{background:rgba(255,255,255,.2)}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.CuiLetDirective, selector: "[cuiLet]", inputs: ["cuiLet"] }, { 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"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CuiBannerComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'cui-banner', changeDetection: ChangeDetectionStrategy.OnPush, template: "<cui-svg\r\n  *cuiLet=\"ICON_OPTIONS[status] as iconOption\"\r\n  [icon]=\"iconOption.icon\"\r\n  [color]=\"iconOption.color\"\r\n  class=\"c-icon\"\r\n></cui-svg>\r\n<div class=\"c-wrapper\">\r\n  <h2\r\n    *ngIf=\"label\"\r\n    class=\"c-heading\"\r\n  >\r\n    {{ label }}\r\n  </h2>\r\n  <ng-content></ng-content>\r\n  <button\r\n    cuiButton\r\n    *ngIf=\"actionButtonText\"\r\n    appearance=\"link\"\r\n    class=\"c-action\"\r\n    (click)=\"onAction()\"\r\n  >\r\n    {{ actionButtonText }}\r\n  </button>\r\n</div>\r\n<button\r\n  *ngIf=\"isCloseable\"\r\n  class=\"c-button\"\r\n  (click)=\"onClose()\"\r\n>\r\n  <cui-svg\r\n    *cuiLet=\"theme$ | async as theme\"\r\n    icon=\"cuiIconX\"\r\n    [color]=\"THEME_CLOSE_BUTTON_ICON_COLORS[theme!]\"\r\n  />\r\n</button>\r\n", styles: [":host{--c-info-icon-color: var(--cui-light-blue-800);--c-alert-icon-color: var(--cui-orange-800);padding:12px 16px;font-weight:400;font-size:14px;line-height:20px;display:flex;color:var(--cui-base-900);font-family:var(--cui-main-font)}:host[data-status=info]{color:var(--cui-light-blue-800);background:var(--cui-blue-50)}:host[data-status=success]{background:var(--cui-green-50)}:host[data-status=alert]{color:var(--cui-orange-800);background:var(--cui-yellow-100)}:host[data-status=error]{background:var(--cui-red-50)}:host-context([cuiTheme=dark]){--c-info-icon-color: var(--cui-light-blue-400);--c-alert-icon-color: var(--cui-yellow-300);color:var(--cui-gray-0)}:host-context([cuiTheme=dark])[data-status=info]{color:var(--cui-light-blue-400);background:var(--cui-blue-900)}:host-context([cuiTheme=dark])[data-status=info] .c-action:hover{color:var(--cui-blue-500)}:host-context([cuiTheme=dark])[data-status=success]{background:var(--cui-green-900)}:host-context([cuiTheme=dark])[data-status=success] .c-action{color:var(--cui-green-500)}:host-context([cuiTheme=dark])[data-status=alert]{background:var(--cui-yellow-900)}:host-context([cuiTheme=dark])[data-status=alert] .c-action{color:var(--cui-yellow-300)}:host-context([cuiTheme=dark])[data-status=error]{background:var(--cui-red-900)}:host-context([cuiTheme=dark])[data-status=error] .c-action{color:var(--cui-red-400)}.c-icon{height:28px}.c-wrapper{flex:1;display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-left:12px;margin-right:16px;overflow-wrap:anywhere}.c-heading{font-weight:500;font-size:14px;line-height:20px;margin:0}.c-button{display:flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:8px;padding:0;border:0;flex-shrink:0;outline:none;cursor:pointer;appearance:none;color:inherit;font:inherit;background:inherit;text-decoration:none;-webkit-tap-highlight-color:transparent}.c-button:hover{background:rgba(255,255,255,.2)}\n"] }]
-        }], propDecorators: { status: [{
-                type: Input
-            }, {
-                type: HostBinding,
-                args: ['attr.data-status']
-            }], isCloseable: [{
-                type: Input
-            }], label: [{
-                type: Input
-            }], actionButtonText: [{
-                type: Input
-            }], actionButtonClicked: [{
-                type: Output
-            }], closed: [{
-                type: Output
+class CuiBannerComponent {
+    constructor() {
+        this.options = inject(CUI_BANNER_OPTIONS);
+        this.theme$ = inject(CuiThemeService);
+        this.ICON_OPTIONS = {
+            info: {
+                icon: 'cuiIconInfo',
+                color: 'var(--c-info-icon-color)'
+            },
+            success: {
+                icon: 'cuiIconCheckCircle',
+                color: 'var(--cui-success)'
+            },
+            alert: {
+                icon: 'cuiIconAlertTriangle',
+                color: 'var(--c-alert-icon-color)'
+            },
+            error: {
+                icon: 'cuiIconXCircle',
+                color: 'var(--cui-danger)'
+            },
+        };
+        this.THEME_CLOSE_BUTTON_ICON_COLORS = {
+            light: 'var(--cui-gray-500)',
+            dark: 'var(--cui-gray-0)'
+        };
+        this.status = this.options.status;
+        this.isCloseable = true;
+        this.actionButtonClicked = new EventEmitter();
+        this.closed = new EventEmitter();
+    }
+    onAction() {
+        this.actionButtonClicked.emit();
+    }
+    onClose() {
+        this.closed.emit();
+    }
+}
+CuiBannerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CuiBannerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+CuiBannerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: CuiBannerComponent, selector: "cui-banner", inputs: { status: "status", isCloseable: "isCloseable", label: "label", actionButtonText: "actionButtonText" }, outputs: { actionButtonClicked: "actionButtonClicked", closed: "closed" }, host: { properties: { "attr.data-status": "this.status" } }, ngImport: i0, template: "<cui-svg\n  *cuiLet=\"ICON_OPTIONS[status] as iconOption\"\n  [icon]=\"iconOption.icon\"\n  [color]=\"iconOption.color\"\n  class=\"c-icon\"\n></cui-svg>\n<div class=\"c-wrapper\">\n  <h2\n    *ngIf=\"label\"\n    class=\"c-heading\"\n  >\n    {{ label }}\n  </h2>\n  <ng-content></ng-content>\n  <button\n    cuiButton\n    *ngIf=\"actionButtonText\"\n    appearance=\"link\"\n    class=\"c-action\"\n    (click)=\"onAction()\"\n  >\n    {{ actionButtonText }}\n  </button>\n</div>\n<button\n  *ngIf=\"isCloseable\"\n  class=\"c-button\"\n  (click)=\"onClose()\"\n>\n  <cui-svg\n    *cuiLet=\"theme$ | async as theme\"\n    icon=\"cuiIconX\"\n    [color]=\"THEME_CLOSE_BUTTON_ICON_COLORS[theme!]\"\n  />\n</button>\n", styles: [":host{--c-info-icon-color: var(--cui-light-blue-800);--c-alert-icon-color: var(--cui-orange-800);padding:12px 16px;font-weight:400;font-size:14px;line-height:20px;display:flex;color:var(--cui-base-900);font-family:var(--cui-main-font)}:host[data-status=info]{color:var(--cui-light-blue-800);background:var(--cui-blue-50)}:host[data-status=success]{background:var(--cui-green-50)}:host[data-status=alert]{color:var(--cui-orange-800);background:var(--cui-yellow-100)}:host[data-status=error]{background:var(--cui-red-50)}:host-context([cuiTheme=dark]){--c-info-icon-color: var(--cui-light-blue-400);--c-alert-icon-color: var(--cui-yellow-300);color:var(--cui-gray-0)}:host-context([cuiTheme=dark])[data-status=info]{color:var(--cui-light-blue-400);background:var(--cui-blue-900)}:host-context([cuiTheme=dark])[data-status=info] .c-action:hover{color:var(--cui-blue-500)}:host-context([cuiTheme=dark])[data-status=success]{background:var(--cui-green-900)}:host-context([cuiTheme=dark])[data-status=success] .c-action{color:var(--cui-green-500)}:host-context([cuiTheme=dark])[data-status=alert]{background:var(--cui-yellow-900)}:host-context([cuiTheme=dark])[data-status=alert] .c-action{color:var(--cui-yellow-300)}:host-context([cuiTheme=dark])[data-status=error]{background:var(--cui-red-900)}:host-context([cuiTheme=dark])[data-status=error] .c-action{color:var(--cui-red-400)}.c-icon{height:28px}.c-wrapper{flex:1;display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-left:12px;margin-right:16px;overflow-wrap:anywhere}.c-heading{font-weight:500;font-size:14px;line-height:20px;margin:0}.c-button{display:flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:8px;padding:0;border:0;flex-shrink:0;outline:none;cursor:pointer;appearance:none;color:inherit;font:inherit;background:inherit;text-decoration:none;-webkit-tap-highlight-color:transparent}.c-button:hover{background:rgba(255,255,255,.2)}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.CuiLetDirective, selector: "[cuiLet]", inputs: ["cuiLet"] }, { 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"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CuiBannerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'cui-banner', changeDetection: ChangeDetectionStrategy.OnPush, template: "<cui-svg\n  *cuiLet=\"ICON_OPTIONS[status] as iconOption\"\n  [icon]=\"iconOption.icon\"\n  [color]=\"iconOption.color\"\n  class=\"c-icon\"\n></cui-svg>\n<div class=\"c-wrapper\">\n  <h2\n    *ngIf=\"label\"\n    class=\"c-heading\"\n  >\n    {{ label }}\n  </h2>\n  <ng-content></ng-content>\n  <button\n    cuiButton\n    *ngIf=\"actionButtonText\"\n    appearance=\"link\"\n    class=\"c-action\"\n    (click)=\"onAction()\"\n  >\n    {{ actionButtonText }}\n  </button>\n</div>\n<button\n  *ngIf=\"isCloseable\"\n  class=\"c-button\"\n  (click)=\"onClose()\"\n>\n  <cui-svg\n    *cuiLet=\"theme$ | async as theme\"\n    icon=\"cuiIconX\"\n    [color]=\"THEME_CLOSE_BUTTON_ICON_COLORS[theme!]\"\n  />\n</button>\n", styles: [":host{--c-info-icon-color: var(--cui-light-blue-800);--c-alert-icon-color: var(--cui-orange-800);padding:12px 16px;font-weight:400;font-size:14px;line-height:20px;display:flex;color:var(--cui-base-900);font-family:var(--cui-main-font)}:host[data-status=info]{color:var(--cui-light-blue-800);background:var(--cui-blue-50)}:host[data-status=success]{background:var(--cui-green-50)}:host[data-status=alert]{color:var(--cui-orange-800);background:var(--cui-yellow-100)}:host[data-status=error]{background:var(--cui-red-50)}:host-context([cuiTheme=dark]){--c-info-icon-color: var(--cui-light-blue-400);--c-alert-icon-color: var(--cui-yellow-300);color:var(--cui-gray-0)}:host-context([cuiTheme=dark])[data-status=info]{color:var(--cui-light-blue-400);background:var(--cui-blue-900)}:host-context([cuiTheme=dark])[data-status=info] .c-action:hover{color:var(--cui-blue-500)}:host-context([cuiTheme=dark])[data-status=success]{background:var(--cui-green-900)}:host-context([cuiTheme=dark])[data-status=success] .c-action{color:var(--cui-green-500)}:host-context([cuiTheme=dark])[data-status=alert]{background:var(--cui-yellow-900)}:host-context([cuiTheme=dark])[data-status=alert] .c-action{color:var(--cui-yellow-300)}:host-context([cuiTheme=dark])[data-status=error]{background:var(--cui-red-900)}:host-context([cuiTheme=dark])[data-status=error] .c-action{color:var(--cui-red-400)}.c-icon{height:28px}.c-wrapper{flex:1;display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-left:12px;margin-right:16px;overflow-wrap:anywhere}.c-heading{font-weight:500;font-size:14px;line-height:20px;margin:0}.c-button{display:flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:8px;padding:0;border:0;flex-shrink:0;outline:none;cursor:pointer;appearance:none;color:inherit;font:inherit;background:inherit;text-decoration:none;-webkit-tap-highlight-color:transparent}.c-button:hover{background:rgba(255,255,255,.2)}\n"] }]
+        }], propDecorators: { status: [{
+                type: Input
+            }, {
+                type: HostBinding,
+                args: ['attr.data-status']
+            }], isCloseable: [{
+                type: Input
+            }], label: [{
+                type: Input
+            }], actionButtonText: [{
+                type: Input
+            }], actionButtonClicked: [{
+                type: Output
+            }], closed: [{
+                type: Output
             }] } });
 
-class CuiBannerModule {
-}
-CuiBannerModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CuiBannerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-CuiBannerModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: CuiBannerModule, declarations: [CuiBannerComponent], imports: [CommonModule,
-        CuiLetDirective,
-        CuiSvgModule,
-        CuiButtonModule], exports: [CuiBannerComponent] });
-CuiBannerModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CuiBannerModule, imports: [CommonModule,
-        CuiSvgModule,
-        CuiButtonModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CuiBannerModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [
-                        CommonModule,
-                        CuiLetDirective,
-                        CuiSvgModule,
-                        CuiButtonModule
-                    ],
-                    declarations: [CuiBannerComponent],
-                    exports: [CuiBannerComponent]
-                }]
+class CuiBannerModule {
+}
+CuiBannerModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CuiBannerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+CuiBannerModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: CuiBannerModule, declarations: [CuiBannerComponent], imports: [CommonModule,
+        CuiLetDirective,
+        CuiSvgModule,
+        CuiButtonModule], exports: [CuiBannerComponent] });
+CuiBannerModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CuiBannerModule, imports: [CommonModule,
+        CuiSvgModule,
+        CuiButtonModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CuiBannerModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        CommonModule,
+                        CuiLetDirective,
+                        CuiSvgModule,
+                        CuiButtonModule
+                    ],
+                    declarations: [CuiBannerComponent],
+                    exports: [CuiBannerComponent]
+                }]
         }] });
 
-class CuiBreadcrumbsComponent {
-}
-CuiBreadcrumbsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CuiBreadcrumbsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-CuiBreadcrumbsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: CuiBreadcrumbsComponent, selector: "cui-breadcrumbs", queries: [{ propertyName: "breadcrumbs", predicate: CuiItemDirective, read: TemplateRef }], ngImport: i0, template: "<ng-container *ngIf=\"breadcrumbs.changes | async\"/>\r\n<ng-container *ngFor=\"let breadcrumb of breadcrumbs; let isLast = last\">\r\n  <ng-container *ngTemplateOutlet=\"breadcrumb\" />\r\n  <cui-svg\r\n    *ngIf=\"!isLast\"\r\n    icon=\"cuiIconSlashDivider\"\r\n    color=\"var(--cui-base-500)\"\r\n  />\r\n</ng-container>\r\n", styles: [":host{display:flex;flex-wrap:wrap;gap:2px}\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: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: CuiSvgComponent, selector: "cui-svg[icon]", inputs: ["width", "height", "strokeWidth", "color", "icon"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CuiBreadcrumbsComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'cui-breadcrumbs', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"breadcrumbs.changes | async\"/>\r\n<ng-container *ngFor=\"let breadcrumb of breadcrumbs; let isLast = last\">\r\n  <ng-container *ngTemplateOutlet=\"breadcrumb\" />\r\n  <cui-svg\r\n    *ngIf=\"!isLast\"\r\n    icon=\"cuiIconSlashDivider\"\r\n    color=\"var(--cui-base-500)\"\r\n  />\r\n</ng-container>\r\n", styles: [":host{display:flex;flex-wrap:wrap;gap:2px}\n"] }]
-        }], propDecorators: { breadcrumbs: [{
-                type: ContentChildren,
-                args: [CuiItemDirective, { read: TemplateRef }]
+class CuiBreadcrumbsComponent {
+}
+CuiBreadcrumbsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CuiBreadcrumbsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+CuiBreadcrumbsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: CuiBreadcrumbsComponent, selector: "cui-breadcrumbs", queries: [{ propertyName: "breadcrumbs", predicate: CuiItemDirective, read: TemplateRef }], ngImport: i0, template: "<ng-container *ngIf=\"breadcrumbs.changes | async\"/>\n<ng-container *ngFor=\"let breadcrumb of breadcrumbs; let isLast = last\">\n  <ng-container *ngTemplateOutlet=\"breadcrumb\" />\n  <cui-svg\n    *ngIf=\"!isLast\"\n    icon=\"cuiIconSlashDivider\"\n    color=\"var(--cui-base-500)\"\n  />\n</ng-container>\n", styles: [":host{display:flex;flex-wrap:wrap;gap:2px}\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: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: CuiSvgComponent, selector: "cui-svg[icon]", inputs: ["width", "height", "strokeWidth", "color", "icon"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CuiBreadcrumbsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'cui-breadcrumbs', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"breadcrumbs.changes | async\"/>\n<ng-container *ngFor=\"let breadcrumb of breadcrumbs; let isLast = last\">\n  <ng-container *ngTemplateOutlet=\"breadcrumb\" />\n  <cui-svg\n    *ngIf=\"!isLast\"\n    icon=\"cuiIconSlashDivider\"\n    color=\"var(--cui-base-500)\"\n  />\n</ng-container>\n", styles: [":host{display:flex;flex-wrap:wrap;gap:2px}\n"] }]
+        }], propDecorators: { breadcrumbs: [{
+                type: ContentChildren,
+                args: [CuiItemDirective, { read: TemplateRef }]
             }] } });
 
-class CuiBreadcrumbComponent {
-    constructor() {
-        this.isLast = false;
-    }
-}
-CuiBreadcrumbComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CuiBreadcrumbComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-CuiBreadcrumbComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: CuiBreadcrumbComponent, selector: "[cuiBreadcrumb]", inputs: { isLast: "isLast" }, ngImport: i0, template: "<ng-content />\r\n", styles: [":host{font-weight:400;font-size:12px;line-height:14px;cursor:pointer;color:var(--cui-base-500);font-family:var(--cui-main-font)}:host:hover{color:var(--cui-base-900);text-decoration:underline}:host:last-of-type{cursor:default;color:var(--cui-base-900);text-decoration:none}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CuiBreadcrumbComponent, decorators: [{
-            type: Component,
-            args: [{ selector: '[cuiBreadcrumb]', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content />\r\n", styles: [":host{font-weight:400;font-size:12px;line-height:14px;cursor:pointer;color:var(--cui-base-500);font-family:var(--cui-main-font)}:host:hover{color:var(--cui-base-900);text-decoration:underline}:host:last-of-type{cursor:default;color:var(--cui-base-900);text-decoration:none}\n"] }]
-        }], propDecorators: { isLast: [{
-                type: Input
+class CuiBreadcrumbComponent {
+    constructor() {
+        this.isLast = false;
+    }
+}
+CuiBreadcrumbComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CuiBreadcrumbComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+CuiBreadcrumbComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: CuiBreadcrumbComponent, selector: "[cuiBreadcrumb]", inputs: { isLast: "isLast" }, ngImport: i0, template: "<ng-content />\n", styles: [":host{font-weight:400;font-size:12px;line-height:14px;cursor:pointer;color:var(--cui-base-500);font-family:var(--cui-main-font)}:host:hover{color:var(--cui-base-900);text-decoration:underline}:host:last-of-type{cursor:default;color:var(--cui-base-900);text-decoration:none}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CuiBreadcrumbComponent, decorators: [{
+            type: Component,
+            args: [{ selector: '[cuiBreadcrumb]', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content />\n", styles: [":host{font-weight:400;font-size:12px;line-height:14px;cursor:pointer;color:var(--cui-base-500);font-family:var(--cui-main-font)}:host:hover{color:var(--cui-base-900);text-decoration:underline}:host:last-of-type{cursor:default;color:var(--cui-base-900);text-decoration:none}\n"] }]
+        }], propDecorators: { isLast: [{
+                type: Input
             }] } });
 
-class CuiBreadcrumbsModule {
-}
-CuiBreadcrumbsModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CuiBreadcrumbsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-CuiBreadcrumbsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: CuiBreadcrumbsModule, declarations: [CuiBreadcrumbsComponent,
-        CuiBreadcrumbComponent], imports: [CommonModule,
-        CuiSvgModule], exports: [CuiBreadcrumbsComponent,
-        CuiBreadcrumbComponent] });
-CuiBreadcrumbsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CuiBreadcrumbsModule, imports: [CommonModule,
-        CuiSvgModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CuiBreadcrumbsModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [
-                        CommonModule,
-                        CuiSvgModule
-                    ],
-                    declarations: [
-                        CuiBreadcrumbsComponent,
-                        CuiBreadcrumbComponent
-                    ],
-                    exports: [
-                        CuiBreadcrumbsComponent,
-                        CuiBreadcrumbComponent
-                    ]
-                }]
+class CuiBreadcrumbsModule {
+}
+CuiBreadcrumbsModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CuiBreadcrumbsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+CuiBreadcrumbsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: CuiBreadcrumbsModule, declarations: [CuiBreadcrumbsComponent,
+        CuiBreadcrumbComponent], imports: [CommonModule,
+        CuiSvgModule], exports: [CuiBreadcrumbsComponent,
+        CuiBreadcrumbComponent] });
+CuiBreadcrumbsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CuiBreadcrumbsModule, imports: [CommonModule,
+        CuiSvgModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CuiBreadcrumbsModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        CommonModule,
+                        CuiSvgModule
+                    ],
+                    declarations: [
+                        CuiBreadcrumbsComponent,
+                        CuiBreadcrumbComponent
+                    ],
+                    exports: [
+                        CuiBreadcrumbsComponent,
+                        CuiBreadcrumbComponent
+                    ]
+                }]
         }] });
 
-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>\r\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>\r\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 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{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{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 {
-}
-CuiButtonGroupModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CuiButtonGroupModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-CuiButtonGroupModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: CuiButtonGroupModule, declarations: [CuiButtonGroupComponent], exports: [CuiButtonGroupComponent] });
-CuiButtonGroupModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CuiButtonGroupModule });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CuiButtonGroupModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [CuiButtonGroupComponent],
-                    exports: [CuiButtonGroupComponent]
-                }]
+class CuiButtonGroupModule {
+}
+CuiButtonGroupModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CuiButtonGroupModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+CuiButtonGroupModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: CuiButtonGroupModule, declarations: [CuiButtonGroupComponent], exports: [CuiButtonGroupComponent] });
+CuiButtonGroupModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CuiButtonGroupModule });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CuiButtonGroupModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [CuiButtonGroupComponent],
+                    exports: [CuiButtonGroupComponent]
+                }]
         }] });
 
-class CuiCheckboxComponent {
-}
-CuiCheckboxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CuiCheckboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-CuiCheckboxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: CuiCheckboxComponent, selector: "input[type=\"checkbox\"][cuiCheckbox]", ngImport: i0, template: '', isInline: true, styles: [":host{position:relative;width:16px;height:16px;border:1px solid var(--cui-base-200);border-radius:4px;outline:none;margin:0;appearance:none;cursor:pointer;background:var(--cui-base-0)}:host:before{content:\"\";position:absolute;transform:translate(-50%,-50%);top:50%;left:50%;width:12px;height:12px;mask-image:url('data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\"><path d=\"M10 3L4.5 8.5L2 6\" stroke=\"white\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>')}:host:checked{border:none;background:var(--cui-info)}:host:checked:before{background:var(--cui-base-0)}:host:focus{box-shadow:0 0 0 2px var(--cui-focus)}@media (hover: hover){:host:hover{border-color:var(--cui-base-400)}}:host:active{border-color:var(--cui-base-400);box-shadow:none}:host:disabled{cursor:not-allowed;border:1px solid var(--cui-base-200);background:var(--cui-base-100)}:host:disabled:checked:before{background:var(--cui-gray-500)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CuiCheckboxComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'input[type="checkbox"][cuiCheckbox]', template: '', changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{position:relative;width:16px;height:16px;border:1px solid var(--cui-base-200);border-radius:4px;outline:none;margin:0;appearance:none;cursor:pointer;background:var(--cui-base-0)}:host:before{content:\"\";position:absolute;transform:translate(-50%,-50%);top:50%;left:50%;width:12px;height:12px;mask-image:url('data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\"><path d=\"M10 3L4.5 8.5L2 6\" stroke=\"white\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>')}:host:checked{border:none;background:var(--cui-info)}:host:checked:before{background:var(--cui-base-0)}:host:focus{box-shadow:0 0 0 2px var(--cui-focus)}@media (hover: hover){:host:hover{border-color:var(--cui-base-400)}}:host:active{border-color:var(--cui-base-400);box-shadow:none}:host:disabled{cursor:not-allowed;border:1px solid var(--cui-base-200);background:var(--cui-base-100)}:host:disabled:checked:before{background:var(--cui-gray-500)}\n"] }]
+class CuiCheckboxComponent {
+}
+CuiCheckboxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CuiCheckboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+CuiCheckboxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: CuiCheckboxComponent, selector: "input[type=\"checkbox\"][cuiCheckbox]", ngImport: i0, template: '', isInline: true, styles: [":host{position:relative;width:16px;height:16px;border:1px solid var(--cui-base-200);border-radius:4px;outline:none;margin:0;appearance:none;cursor:pointer;background:var(--cui-base-0)}:host:before{content:\"\";position:absolute;transform:translate(-50%,-50%);top:50%;left:50%;width:12px;height:12px;mask-image:url('data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\"><path d=\"M10 3L4.5 8.5L2 6\" stroke=\"white\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>')}:host:checked{border:none;background:var(--cui-info)}:host:checked:before{background:var(--cui-base-0)}:host:focus{box-shadow:0 0 0 2px var(--cui-focus)}@media (hover: hover){:host:hover{border-color:var(--cui-base-400)}}:host:active{border-color:var(--cui-base-400);box-shadow:none}:host:disabled{cursor:not-allowed;border:1px solid var(--cui-base-200);background:var(--cui-base-100)}:host:disabled:checked:before{background:var(--cui-gray-500)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CuiCheckboxComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'input[type="checkbox"][cuiCheckbox]', template: '', changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{position:relative;width:16px;height:16px;border:1px solid var(--cui-base-200);border-radius:4px;outline:none;margin:0;appearance:none;cursor:pointer;background:var(--cui-base-0)}:host:before{content:\"\";position:absolute;transform:translate(-50%,-50%);top:50%;left:50%;width:12px;height:12px;mask-image:url('data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\"><path d=\"M10 3L4.5 8.5L2 6\" stroke=\"white\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>')}:host:checked{border:none;background:var(--cui-info)}:host:checked:before{background:var(--cui-base-0)}:host:focus{box-shadow:0 0 0 2px var(--cui-focus)}@media (hover: hover){:host:hover{border-color:var(--cui-base-400)}}:host:active{border-color:var(--cui-base-400);box-shadow:none}:host:disabled{cursor:not-allowed;border:1px solid var(--cui-base-200);background:var(--cui-base-100)}:host:disabled:checked:before{background:var(--cui-gray-500)}\n"] }]
         }] });
 
-class CuiCheckboxModule {
-}
-CuiCheckboxModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CuiCheckboxModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-CuiCheckboxModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: CuiCheckboxModule, declarations: [CuiCheckboxComponent], exports: [CuiCheckboxComponent] });
-CuiCheckboxModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CuiCheckboxModule });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CuiCheckboxModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [CuiCheckboxComponent],
-                    exports: [CuiCheckboxComponent]
-                }]
+class CuiCheckboxModule {
+}
+CuiCheckboxModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CuiCheckboxModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+CuiCheckboxModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: CuiCheckboxModule, declarations: [CuiCheckboxComponent], exports: [CuiCheckboxComponent] });
+CuiCheckboxModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CuiCheckboxModule });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CuiCheckboxModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [CuiCheckboxComponent],
+                    exports: [CuiCheckboxComponent]
+                }]
         }] });
 
 const CUI_ROOT_SELECTOR = 'cui-root';
 
-const CUI_DIALOGS = cuiCreateToken(new BehaviorSubject([]));
-const CUI_DIALOG_DEFAULT_OPTIONS = {
-    size: 'auto',
-    data: undefined
-};
-const CUI_DIALOG_OPTIONS = cuiCreateToken(CUI_DIALOG_DEFAULT_OPTIONS);
+const CUI_DIALOGS = cuiCreateToken(new BehaviorSubject([]));
+const CUI_DIALOG_DEFAULT_OPTIONS = {
+    size: 'auto',
+    data: undefined
+};
+const CUI_DIALOG_OPTIONS = cuiCreateToken(CUI_DIALOG_DEFAULT_OPTIONS);
 const CUI_DIALOG_CONTEXT = new InjectionToken('');
 
-class CuiDialogsComponent {
-    constructor() {
-        this.destroy$ = inject(CuiDestroyService, { self: true });
-        this.dialogs$ = inject(CUI_DIALOGS);
-        this.dialogInjectorCache = new Map();
-    }
-    ngOnInit() {
-        this.initDialogInjectorsSubscription();
-    }
-    trackByFn(_, dialog) {
-        return dialog.id;
-    }
-    initDialogInjectorsSubscription() {
-        this.dialogs$
-            .pipe(takeUntil(this.destroy$))
-            .subscribe(dialogs => {
-            this.dialogInjectors = dialogs.map(dialog => {
-                if (!this.dialogInjectorCache.has(dialog.id)) {
-                    this.dialogInjectorCache.set(dialog.id, Injector.create({
-                        providers: [{ provide: CUI_DIALOG_CONTEXT, useValue: dialog }],
-                        parent: dialog.injector
-                    }));
-                }
-                return this.dialogInjectorCache.get(dialog.id);
-            });
-            this.dialogInjectorCache.forEach((_, dialogId) => {
-                if (dialogs.find(dialog => dialog.id === dialogId)) {
-                    return;
-                }
-                this.dialogInjectorCache.delete(dialogId);
-            });
-        });
-    }
-}
-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 *cuiLet=\"dialogs$ | async as dialogs\">\r\n  <ng-container *ngFor=\"let dialog of dialogs; let i = index; trackBy: trackByFn\">\r\n    <ng-container *ngComponentOutlet=\"dialog.component; injector: dialogInjectors[i]\"></ng-container>\r\n  </ng-container>\r\n  <div\r\n    *ngIf=\"dialogs!.length\"\r\n    class=\"c-overlay\"\r\n  ></div>\r\n</ng-container>\r\n", styles: [":host{isolation:isolate}.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: "directive", type: i2.CuiLetDirective, selector: "[cuiLet]", inputs: ["cuiLet"] }, { 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: 'cui-dialogs', changeDetection: ChangeDetectionStrategy.OnPush, providers: [CuiDestroyService], template: "<ng-container *cuiLet=\"dialogs$ | async as dialogs\">\r\n  <ng-container *ngFor=\"let dialog of dialogs; let i = index; trackBy: trackByFn\">\r\n    <ng-container *ngComponentOutlet=\"dialog.component; injector: dialogInjectors[i]\"></ng-container>\r\n  </ng-container>\r\n  <div\r\n    *ngIf=\"dialogs!.length\"\r\n    class=\"c-overlay\"\r\n  ></div>\r\n</ng-container>\r\n", styles: [":host{isolation:isolate}.c-overlay{position:fixed;inset:0;background:var(--cui-base-900);opacity:.3}\n"] }]
+class CuiDialogsComponent {
+    constructor() {
+        this.destroy$ = inject(CuiDestroyService, { self: true });
+        this.dialogs$ = inject(CUI_DIALOGS);
+        this.dialogInjectorCache = new Map();
+    }
+    ngOnInit() {
+        this.initDialogInjectorsSubscription();
+    }
+    trackByFn(_, dialog) {
+        return dialog.id;
+    }
+    initDialogInjectorsSubscription() {
+        this.dialogs$
+            .pipe(takeUntil(this.destroy$))
+            .subscribe(dialogs => {
+            this.dialogInjectors = dialogs.map(dialog => {
+                if (!this.dialogInjectorCache.has(dialog.id)) {
+                    this.dialogInjectorCache.set(dialog.id, Injector.create({
+                        providers: [{ provide: CUI_DIALOG_CONTEXT, useValue: dialog }],
+                        parent: dialog.injector
+                    }));
+                }
+                return this.dialogInjectorCache.get(dialog.id);
+            });
+            this.dialogInjectorCache.forEach((_, dialogId) => {
+                if (dialogs.find(dialog => dialog.id === dialogId)) {
+                    return;
+                }
+                this.dialogInjectorCache.delete(dialogId);
+            });
+        });
+    }
+}
+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 *cuiLet=\"dialogs$ | async as dialogs\">\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  <div\n    *ngIf=\"dialogs!.length\"\n    class=\"c-overlay\"\n  ></div>\n</ng-container>\n", styles: [":host{isolation:isolate}.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: "directive", type: i2.CuiLetDirective, selector: "[cuiLet]", inputs: ["cuiLet"] }, { 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: 'cui-dialogs', changeDetection: ChangeDetectionStrategy.OnPush, providers: [CuiDestroyService], template: "<ng-container *cuiLet=\"dialogs$ | async as dialogs\">\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  <div\n    *ngIf=\"dialogs!.length\"\n    class=\"c-overlay\"\n  ></div>\n</ng-container>\n", styles: [":host{isolation:isolate}.c-overlay{position:fixed;inset:0;background:var(--cui-base-900);opacity:.3}\n"] }]
         }] });
 
-class CuiRootComponent {
-    constructor() {
-        this.document = inject(DOCUMENT);
-        this.theme$ = inject(CuiThemeService);
-        this.destroy$ = inject(CuiDestroyService);
-    }
-    ngOnInit() {
-        this.initThemeSubscription();
-    }
-    initThemeSubscription() {
-        this.theme$
-            .pipe(takeUntil(this.destroy$))
-            .subscribe(theme => this.document.documentElement.setAttribute('cuiTheme', theme));
-    }
-}
-CuiRootComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CuiRootComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-CuiRootComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: CuiRootComponent, selector: "cui-root", providers: [CuiDestroyService], ngImport: i0, template: "<div class=\"c-content\">\r\n  <ng-content />\r\n</div>\r\n<cui-dialogs />\r\n<cui-alerts />\r\n", styles: [".c-content{isolation:isolate}\n"], dependencies: [{ kind: "component", type: CuiDialogsComponent, selector: "cui-dialogs" }, { kind: "component", type: CuiAlertsComponent, selector: "cui-alerts" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CuiRootComponent, decorators: [{
-            type: Component,
-            args: [{ selector: CUI_ROOT_SELECTOR, changeDetection: ChangeDetectionStrategy.OnPush, providers: [CuiDestroyService], template: "<div class=\"c-content\">\r\n  <ng-content />\r\n</div>\r\n<cui-dialogs />\r\n<cui-alerts />\r\n", styles: [".c-content{isolation:isolate}\n"] }]
+class CuiRootComponent {
+    constructor() {
+        this.document = inject(DOCUMENT);
+        this.theme$ = inject(CuiThemeService);
+        this.destroy$ = inject(CuiDestroyService);
+    }
+    ngOnInit() {
+        this.initThemeSubscription();
+    }
+    initThemeSubscription() {
+        this.theme$
+            .pipe(takeUntil(this.destroy$))
+            .subscribe(theme => this.document.documentElement.setAttribute('cuiTheme', theme));
+    }
+}
+CuiRootComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CuiRootComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+CuiRootComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: CuiRootComponent, selector: "cui-root", providers: [CuiDestroyService], ngImport: i0, template: "<div class=\"c-content\">\n  <ng-content />\n</div>\n<cui-dialogs />\n<cui-alerts />\n", styles: [".c-content{isolation:isolate}\n"], dependencies: [{ kind: "component", type: CuiDialogsComponent, selector: "cui-dialogs" }, { kind: "component", type: CuiAlertsComponent, selector: "cui-alerts" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CuiRootComponent, decorators: [{
+            type: Component,
+            args: [{ selector: CUI_ROOT_SELECTOR, changeDetection: ChangeDetectionStrategy.OnPush, providers: [CuiDestroyService], template: "<div class=\"c-content\">\n  <ng-content />\n</div>\n<cui-dialogs />\n<cui-alerts />\n", styles: [".c-content{isolation:isolate}\n"] }]
         }] });
 
-// TODO: сделать структурную директиву
-const ContentType = {
-    String: 'string',
-    Template: 'template',
-    Component: 'component'
-};
-class CuiDialogComponent {
-    constructor() {
-        this.document = inject(DOCUMENT);
-        this.element = inject(ElementRef).nativeElement;
-        this.context = inject(CUI_DIALOG_CONTEXT);
-        this.LAST_OF_TYPE_SELECTOR = ':last-of-type';
-        this.ContentType = ContentType;
-        this.contentType = ContentType.Component;
-    }
-    get size() {
-        return this.context.size;
-    }
-    ngOnInit() {
-        this.initBodyScrollHiding();
-        this.initContentType();
-    }
-    ngOnDestroy() {
-        this.destroyBodyScrollHiding();
-    }
-    get contentTemplateRef() {
-        return this.context.content;
-    }
-    get componentType() {
-        return this.context.content;
-    }
-    onEscape() {
-        if (!this.element.matches(this.LAST_OF_TYPE_SELECTOR)) {
-            return;
-        }
-        this.context.completeWith();
-    }
-    initContentType() {
-        const content = this.context.content;
-        switch (true) {
-            case (typeof content === 'string'):
-                this.contentType = ContentType.String;
-                return;
-            case (content instanceof TemplateRef):
-                this.contentType = ContentType.Template;
-                return;
-        }
-    }
-    initBodyScrollHiding() {
-        this.document.body.style.overflow = 'hidden';
-    }
-    destroyBodyScrollHiding() {
-        this.document.body.style.overflow = '';
-    }
-}
-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", host: { listeners: { "document:keydown.escape": "onEscape($event)" }, properties: { "attr.data-size": "this.size" } }, hostDirectives: [{ directive: i2.CuiFocusTrapDirective }], ngImport: i0, template: "<ng-container [ngSwitch]=\"contentType\">\r\n  <ng-container *ngSwitchCase=\"ContentType.String\">\r\n    {{ context.content }}\r\n  </ng-container>\r\n  <ng-container *ngSwitchCase=\"ContentType.Template\">\r\n    <ng-container *ngTemplateOutlet=\"contentTemplateRef; context: context\"></ng-container>\r\n  </ng-container>\r\n  <ng-container *ngSwitchCase=\"ContentType.Component\">\r\n    <div class=\"c-component-container\">\r\n      <ng-container *ngComponentOutlet=\"componentType\"></ng-container>\r\n    </div>\r\n  </ng-container>\r\n</ng-container>\r\n", styles: [":host{box-shadow:0 2px 4px -1px #0000000f,0 4px 6px -1px #0000001a;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);display:flex;flex-direction:column;box-sizing:border-box;max-height:calc(100vh - 40px);width:100%;border-radius:12px;outline:none;background:var(--cui-base-0);font-family:var(--cui-main-font)}:host:last-of-type{z-index:1}:host[data-size=auto]{width:auto}:host[data-size=xl]{max-width:1080px}.c-component-container{display:contents}.c-component-container ::ng-deep>*{display:contents}\n"], dependencies: [{ kind: "directive", type: i1.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CuiDialogComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'cui-dialog', changeDetection: ChangeDetectionStrategy.OnPush, hostDirectives: [CuiFocusTrapDirective], template: "<ng-container [ngSwitch]=\"contentType\">\r\n  <ng-container *ngSwitchCase=\"ContentType.String\">\r\n    {{ context.content }}\r\n  </ng-container>\r\n  <ng-container *ngSwitchCase=\"ContentType.Template\">\r\n    <ng-container *ngTemplateOutlet=\"contentTemplateRef; context: context\"></ng-container>\r\n  </ng-container>\r\n  <ng-container *ngSwitchCase=\"ContentType.Component\">\r\n    <div class=\"c-component-container\">\r\n      <ng-container *ngComponentOutlet=\"componentType\"></ng-container>\r\n    </div>\r\n  </ng-container>\r\n</ng-container>\r\n", styles: [":host{box-shadow:0 2px 4px -1px #0000000f,0 4px 6px -1px #0000001a;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);display:flex;flex-direction:column;box-sizing:border-box;max-height:calc(100vh - 40px);width:100%;border-radius:12px;outline:none;background:var(--cui-base-0);font-family:var(--cui-main-font)}:host:last-of-type{z-index:1}:host[data-size=auto]{width:auto}:host[data-size=xl]{max-width:1080px}.c-component-container{display:contents}.c-component-container ::ng-deep>*{display:contents}\n"] }]
-        }], propDecorators: { size: [{
-                type: HostBinding,
-                args: ['attr.data-size']
-            }], onEscape: [{
-                type: HostListener,
-                args: ['document:keydown.escape', ['$event']]
+// TODO: сделать структурную директиву
+const ContentType = {
+    String: 'string',
+    Template: 'template',
+    Component: 'component'
+};
+class CuiDialogComponent {
+    constructor() {
+        this.document = inject(DOCUMENT);
+        this.element = inject(ElementRef).nativeElement;
+        this.context = inject(CUI_DIALOG_CONTEXT);
+        this.LAST_OF_TYPE_SELECTOR = ':last-of-type';
+        this.ContentType = ContentType;
+        this.contentType = ContentType.Component;
+    }
+    get size() {
+        return this.context.size;
+    }
+    ngOnInit() {
+        this.initBodyScrollHiding();
+        this.initContentType();
+    }
+    ngOnDestroy() {
+        this.destroyBodyScrollHiding();
+    }
+    get contentTemplateRef() {
+        return this.context.content;
+    }
+    get componentType() {
+        return this.context.content;
+    }
+    onEscape() {
+        if (!this.element.matches(this.LAST_OF_TYPE_SELECTOR)) {
+            return;
+        }
+        this.context.completeWith();
+    }
+    initContentType() {
+        const content = this.context.content;
+        switch (true) {
+            case (typeof content === 'string'):
+                this.contentType = ContentType.String;
+                return;
+            case (content instanceof TemplateRef):
+                this.contentType = ContentType.Template;
+                return;
+        }
+    }
+    initBodyScrollHiding() {
+        this.document.body.style.overflow = 'hidden';
+    }
+    destroyBodyScrollHiding() {
+        this.document.body.style.overflow = '';
+    }
+}
+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", host: { listeners: { "document:keydown.escape": "onEscape($event)" }, properties: { "attr.data-size": "this.size" } }, hostDirectives: [{ directive: i2.CuiFocusTrapDirective }], ngImport: i0, template: "<ng-container [ngSwitch]=\"contentType\">\n  <ng-container *ngSwitchCase=\"ContentType.String\">\n    {{ context.content }}\n  </ng-container>\n  <ng-container *ngSwitchCase=\"ContentType.Template\">\n    <ng-container *ngTemplateOutlet=\"contentTemplateRef; context: context\"></ng-container>\n  </ng-container>\n  <ng-container *ngSwitchCase=\"ContentType.Component\">\n    <div class=\"c-component-container\">\n      <ng-container *ngComponentOutlet=\"componentType\"></ng-container>\n    </div>\n  </ng-container>\n</ng-container>\n", styles: [":host{box-shadow:0 2px 4px -1px #0000000f,0 4px 6px -1px #0000001a;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);display:flex;flex-direction:column;box-sizing:border-box;max-height:calc(100vh - 40px);width:100%;border-radius:12px;outline:none;background:var(--cui-base-0);font-family:var(--cui-main-font)}:host:last-of-type{z-index:1}:host[data-size=auto]{width:auto}:host[data-size=xl]{max-width:1080px}.c-component-container{display:contents}.c-component-container ::ng-deep>*{display:contents}\n"], dependencies: [{ kind: "directive", type: i1.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CuiDialogComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'cui-dialog', changeDetection: ChangeDetectionStrategy.OnPush, hostDirectives: [CuiFocusTrapDirective], template: "<ng-container [ngSwitch]=\"contentType\">\n  <ng-container *ngSwitchCase=\"ContentType.String\">\n    {{ context.content }}\n  </ng-container>\n  <ng-container *ngSwitchCase=\"ContentType.Template\">\n    <ng-container *ngTemplateOutlet=\"contentTemplateRef; context: context\"></ng-container>\n  </ng-container>\n  <ng-container *ngSwitchCase=\"ContentType.Component\">\n    <div class=\"c-component-container\">\n      <ng-container *ngComponentOutlet=\"componentType\"></ng-container>\n    </div>\n  </ng-container>\n</ng-container>\n", styles: [":host{box-shadow:0 2px 4px -1px #0000000f,0 4px 6px -1px #0000001a;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);display:flex;flex-direction:column;box-sizing:border-box;max-height:calc(100vh - 40px);width:100%;border-radius:12px;outline:none;background:var(--cui-base-0);font-family:var(--cui-main-font)}:host:last-of-type{z-index:1}:host[data-size=auto]{width:auto}:host[data-size=xl]{max-width:1080px}.c-component-container{display:contents}.c-component-container ::ng-deep>*{display:contents}\n"] }]
+        }], propDecorators: { size: [{
+                type: HostBinding,
+                args: ['attr.data-size']
+            }], onEscape: [{
+                type: HostListener,
+                args: ['document:keydown.escape', ['$event']]
             }] } });
 
-class CuiDialogActionsComponent {
-}
-CuiDialogActionsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CuiDialogActionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-CuiDialogActionsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: CuiDialogActionsComponent, selector: "cui-dialog-actions", ngImport: i0, template: "<div class=\"c-divider\"></div>\r\n<div class=\"c-content\">\r\n  <ng-content />\r\n</div>\r\n", styles: [":host{padding-right:24px;padding-left:24px;padding-bottom:16px;display:block}.c-divider{position:relative;left:-24px;width:calc(100% + 48px);height:1px;margin-bottom:15px;background:var(--cui-base-200)}.c-content{display:flex;align-items:center;justify-content:flex-end;gap:12px}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CuiDialogActionsComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'cui-dialog-actions', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"c-divider\"></div>\r\n<div class=\"c-content\">\r\n  <ng-content />\r\n</div>\r\n", styles: [":host{padding-right:24px;padding-left:24px;padding-bottom:16px;display:block}.c-divider{position:relative;left:-24px;width:calc(100% + 48px);height:1px;margin-bottom:15px;background:var(--cui-base-200)}.c-content{display:flex;align-items:center;justify-content:flex-end;gap:12px}\n"] }]
+class CuiDialogActionsComponent {
+}
+CuiDialogActionsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CuiDialogActionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+CuiDialogActionsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: CuiDialogActionsComponent, selector: "cui-dialog-actions", ngImport: i0, template: "<div class=\"c-divider\"></div>\n<div class=\"c-content\">\n  <ng-content />\n</div>\n", styles: [":host{padding-right:24px;padding-left:24px;padding-bottom:16px;display:block}.c-divider{position:relative;left:-24px;width:calc(100% + 48px);height:1px;margin-bottom:15px;background:var(--cui-base-200)}.c-content{display:flex;align-items:center;justify-content:flex-end;gap:12px}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CuiDialogActionsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'cui-dialog-actions', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"c-divider\"></div>\n<div class=\"c-content\">\n  <ng-content />\n</div>\n", styles: [":host{padding-right:24px;padding-left:24px;padding-bottom:16px;display:block}.c-divider{position:relative;left:-24px;width:calc(100% + 48px);height:1px;margin-bottom:15px;background:var(--cui-base-200)}.c-content{display:flex;align-items:center;justify-content:flex-end;gap:12px}\n"] }]
         }] });
 
-class CuiDialogHeaderComponent {
-    constructor() {
-        this.closed = new EventEmitter();
-    }
-    onClose(event) {
-        this.closed.emit(event);
-    }
-}
-CuiDialogHeaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CuiDialogHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-CuiDialogHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: CuiDialogHeaderComponent, selector: "header[cuiDialogHeader][heading]", inputs: { heading: "heading", headingContext: "headingContext", subheading: "subheading" }, outputs: { closed: "closed" }, ngImport: i0, template: "<div class=\"c-heading\">\r\n  <ng-container *polymorpheusOutlet=\"heading as heading; context: headingContext\">{{ heading }}</ng-container>\r\n</div>\r\n<button\r\n  cuiButton\r\n  type=\"button\"\r\n  appearance=\"ghost\"\r\n  icon=\"cuiIconClearSm\"\r\n  class=\"c-button\"\r\n  (click)=\"onClose($event)\"\r\n></button>\r\n<span *ngIf=\"subheading\">{{ subheading }}</span>\r\n<ng-content />\r\n", styles: [":host{padding:16px 24px;font-weight:500;font-size:14px;line-height:20px;position:relative;display:flex;flex-direction:column;gap:4px;font-family:var(--cui-main-font);color:var(--cui-base-500)}.c-heading{font-weight:500;font-size:16px;line-height:24px;width:calc(100% - 36px);color:var(--cui-base-900)}.c-button{position:absolute;top:12px;right:12px}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.PolymorpheusOutletDirective, selector: "[polymorpheusOutlet]", inputs: ["polymorpheusOutlet", "polymorpheusOutletContext"] }, { 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: CuiDialogHeaderComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'header[cuiDialogHeader][heading]', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"c-heading\">\r\n  <ng-container *polymorpheusOutlet=\"heading as heading; context: headingContext\">{{ heading }}</ng-container>\r\n</div>\r\n<button\r\n  cuiButton\r\n  type=\"button\"\r\n  appearance=\"ghost\"\r\n  icon=\"cuiIconClearSm\"\r\n  class=\"c-button\"\r\n  (click)=\"onClose($event)\"\r\n></button>\r\n<span *ngIf=\"subheading\">{{ subheading }}</span>\r\n<ng-content />\r\n", styles: [":host{padding:16px 24px;font-weight:500;font-size:14px;line-height:20px;position:relative;display:flex;flex-direction:column;gap:4px;font-family:var(--cui-main-font);color:var(--cui-base-500)}.c-heading{font-weight:500;font-size:16px;line-height:24px;width:calc(100% - 36px);color:var(--cui-base-900)}.c-button{position:absolute;top:12px;right:12px}\n"] }]
-        }], propDecorators: { heading: [{
-                type: Input
-            }], headingContext: [{
-                type: Input
-            }], subheading: [{
-                type: Input
-            }], closed: [{
-                type: Output
+class CuiDialogHeaderComponent {
+    constructor() {
+        this.closed = new EventEmitter();
+    }
+    onClose(event) {
+        this.closed.emit(event);
+    }
+}
+CuiDialogHeaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CuiDialogHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+CuiDialogHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: CuiDialogHeaderComponent, selector: "header[cuiDialogHeader][heading]", inputs: { heading: "heading", headingContext: "headingContext", subheading: "subheading" }, outputs: { closed: "closed" }, ngImport: i0, template: "<div class=\"c-heading\">\n  <ng-container *polymorpheusOutlet=\"heading as heading; context: headingContext\">{{ heading }}</ng-container>\n</div>\n<button\n  cuiButton\n  type=\"button\"\n  appearance=\"ghost\"\n  icon=\"cuiIconClearSm\"\n  class=\"c-button\"\n  (click)=\"onClose($event)\"\n></button>\n<span *ngIf=\"subheading\">{{ subheading }}</span>\n<ng-content />\n", styles: [":host{padding:16px 24px;font-weight:500;font-size:14px;line-height:20px;position:relative;display:flex;flex-direction:column;gap:4px;font-family:var(--cui-main-font);color:var(--cui-base-500)}.c-heading{font-weight:500;font-size:16px;line-height:24px;width:calc(100% - 36px);color:var(--cui-base-900)}.c-button{position:absolute;top:12px;right:12px}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.PolymorpheusOutletDirective, selector: "[polymorpheusOutlet]", inputs: ["polymorpheusOutlet", "polymorpheusOutletContext"] }, { 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: CuiDialogHeaderComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'header[cuiDialogHeader][heading]', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"c-heading\">\n  <ng-container *polymorpheusOutlet=\"heading as heading; context: headingContext\">{{ heading }}</ng-container>\n</div>\n<button\n  cuiButton\n  type=\"button\"\n  appearance=\"ghost\"\n  icon=\"cuiIconClearSm\"\n  class=\"c-button\"\n  (click)=\"onClose($event)\"\n></button>\n<span *ngIf=\"subheading\">{{ subheading }}</span>\n<ng-content />\n", styles: [":host{padding:16px 24px;font-weight:500;font-size:14px;line-height:20px;position:relative;display:flex;flex-direction:column;gap:4px;font-family:var(--cui-main-font);color:var(--cui-base-500)}.c-heading{font-weight:500;font-size:16px;line-height:24px;width:calc(100% - 36px);color:var(--cui-base-900)}.c-button{position:absolute;top:12px;right:12px}\n"] }]
+        }], propDecorators: { heading: [{
+                type: Input
+            }], headingContext: [{
+                type: Input
+            }], subheading: [{
+                type: Input
+            }], closed: [{
+                type: Output
             }] } });
 
-class CuiDialogModule {
-}
-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,
-        CuiDialogActionsComponent,
-        CuiDialogHeaderComponent], imports: [CommonModule,
-        PolymorpheusModule,
-        CuiLetDirective,
-        CuiButtonModule], exports: [CuiDialogComponent,
-        CuiDialogsComponent,
-        CuiDialogActionsComponent,
-        CuiDialogHeaderComponent] });
-CuiDialogModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CuiDialogModule, imports: [CommonModule,
-        PolymorpheusModule,
-        CuiButtonModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CuiDialogModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [
-                        CommonModule,
-                        PolymorpheusModule,
-                        CuiLetDirective,
-                        CuiButtonModule
-                    ],
-                    declarations: [
-                        CuiDialogComponent,
-                        CuiDialogsComponent,
-                        CuiDialogActionsComponent,
-                        CuiDialogHeaderComponent
-                    ],
-                    exports: [
-                        CuiDialogComponent,
-                        CuiDialogsComponent,
-                        CuiDialogActionsComponent,
-                        CuiDialogHeaderComponent
-                    ]
-                }]
+class CuiDialogModule {
+}
+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,
+        CuiDialogActionsComponent,
+        CuiDialogHeaderComponent], imports: [CommonModule,
+        PolymorpheusModule,
+        CuiLetDirective,
+        CuiButtonModule], exports: [CuiDialogComponent,
+        CuiDialogsComponent,
+        CuiDialogActionsComponent,
+        CuiDialogHeaderComponent] });
+CuiDialogModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CuiDialogModule, imports: [CommonModule,
+        PolymorpheusModule,
+        CuiButtonModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CuiDialogModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        CommonModule,
+                        PolymorpheusModule,
+                        CuiLetDirective,
+                        CuiButtonModule
+                    ],
+                    declarations: [
+                        CuiDialogComponent,
+                        CuiDialogsComponent,
+                        CuiDialogActionsComponent,
+                        CuiDialogHeaderComponent
+                    ],
+                    exports: [
+                        CuiDialogComponent,
+                        CuiDialogsComponent,
+                        CuiDialogActionsComponent,
+                        CuiDialogHeaderComponent
+                    ]
+                }]
         }] });
 
-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 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 CuiRootModule {
-}
-CuiRootModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CuiRootModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-CuiRootModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: CuiRootModule, declarations: [CuiRootComponent], imports: [CommonModule,
-        CuiDialogModule,
-        CuiAlertModule], exports: [CuiRootComponent] });
-CuiRootModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CuiRootModule, imports: [CommonModule,
-        CuiDialogModule,
-        CuiAlertModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CuiRootModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [
-                        CommonModule,
-                        CuiDialogModule,
-                        CuiAlertModule
-                    ],
-                    declarations: [CuiRootComponent],
-                    exports: [CuiRootComponent]
-                }]
+class CuiRootModule {
+}
+CuiRootModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CuiRootModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+CuiRootModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: CuiRootModule, declarations: [CuiRootComponent], imports: [CommonModule,
+        CuiDialogModule,
+        CuiAlertModule], exports: [CuiRootComponent] });
+CuiRootModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CuiRootModule, imports: [CommonModule,
+        CuiDialogModule,
+        CuiAlertModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CuiRootModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        CommonModule,
+                        CuiDialogModule,
+                        CuiAlertModule
+                    ],
+                    declarations: [CuiRootComponent],
+                    exports: [CuiRootComponent]
+                }]
         }] });
 
-class CuiContextMenuComponent {
-    constructor() {
-        this.changeDetectorRef = inject(ChangeDetectorRef);
-        this.viewContainerRef = inject(ViewContainerRef);
-        this.document = inject(DOCUMENT);
-        this.documentElement = this.document.documentElement;
-        this.window = inject(CUI_WINDOW);
-        this.destroy$ = inject(CuiDestroyService, { self: true });
-        this.cuiClickOutsideDirective = inject(CuiClickOutsideDirective, { self: true });
-        this.cuiTargetDirective = inject(CuiTargetDirective, { self: true });
-        this.EXTRA_OFFSET_LEFT = 0;
-        this.EXTRA_OFFSET_TOP = 0;
-        this.isVisible = false;
-    }
-    ngOnInit() {
-        this.initClickOutsideSubscription();
-    }
-    ngOnDestroy() {
-        this.clearViewContainerRef();
-    }
-    ngAfterViewInit() {
-        this.initTargetElementListener();
-    }
-    onSelect(item) {
-        var _a;
-        this.close();
-        (_a = item.command) === null || _a === void 0 ? void 0 : _a.call(item);
-    }
-    onClose() {
-        this.close();
-    }
-    onStopClickPropagation(event) {
-        event.stopPropagation();
-    }
-    trackByFn(_, item) {
-        return item.label;
-    }
-    initClickOutsideSubscription() {
-        this.cuiClickOutsideDirective.cuiClickOutside
-            .pipe(takeUntil(this.destroy$))
-            .subscribe((target) => {
-            if (this.target.contains(target)) {
-                return;
-            }
-            this.close();
-        });
-    }
-    initTargetElementListener() {
-        this.targetEventListener = (event) => {
-            event.stopPropagation();
-            this.document.body.click();
-            this.isVisible = !this.isVisible;
-            this.clearViewContainerRef();
-            if (this.isVisible) {
-                this.renderList();
-                this.changePosition(event.clientX, event.clientY);
-                this.initHidingSubscription();
-            }
-            this.changeDetectorRef.markForCheck();
-        };
-        this.cuiTargetDirective.clicked
-            .pipe(takeUntil(this.destroy$))
-            .subscribe(this.targetEventListener);
-    }
-    initHidingSubscription() {
-        this.initHidingFromWindowEvent('scroll');
-        this.initHidingFromWindowEvent('resize');
-    }
-    initHidingFromWindowEvent(eventName) {
-        fromEvent(this.window, eventName)
-            .pipe(take(1))
-            .subscribe(() => {
-            this.close();
-            this.changeDetectorRef.markForCheck();
-        });
-    }
-    close() {
-        this.isVisible = false;
-        this.clearViewContainerRef();
-    }
-    renderList() {
-        const embeddedViewRef = this.viewContainerRef.createEmbeddedView(this.list);
-        this.node = embeddedViewRef.rootNodes[0];
-        embeddedViewRef.detectChanges();
-        this.document.querySelector(CUI_ROOT_SELECTOR).appendChild(this.node);
-    }
-    changePosition(x, y) {
-        this.node.style.visibility = 'hidden';
-        setTimeout(() => {
-            const { clientWidth, clientHeight } = this.documentElement;
-            const width = this.node.offsetWidth;
-            const height = this.node.offsetHeight;
-            let left = x;
-            let top = y;
-            if (left + width > clientWidth) {
-                left -= width;
-            }
-            if (top + height > clientHeight) {
-                top -= height;
-            }
-            left = Math.max(left, this.EXTRA_OFFSET_LEFT);
-            top = Math.max(top, this.EXTRA_OFFSET_TOP);
-            this.node.style.left = left + 'px';
-            this.node.style.top = top + 'px';
-            this.node.style.visibility = '';
-            this.changeDetectorRef.markForCheck();
-        });
-    }
-    clearViewContainerRef() {
-        this.viewContainerRef.clear();
-    }
-}
-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: { "window:resize": "onClose()", "click": "onStopClickPropagation($event)" } }, providers: [CuiDestroyService], viewQueries: [{ propertyName: "list", first: true, predicate: ["list"], descendants: true }], hostDirectives: [{ directive: i2.CuiClickOutsideDirective }, { directive: i2.CuiTargetDirective, inputs: ["ccTarget", "target"] }], ngImport: i0, template: "<ng-template #list>\r\n  <div class=\"c-container\">\r\n    <ul\r\n      *ngIf=\"isVisible\"\r\n      class=\"c-ul\"\r\n    >\r\n      <li\r\n        *ngFor=\"let item of items; trackBy: trackByFn\"\r\n        [style.color]=\"item.color\"\r\n      >\r\n        <button\r\n          type=\"button\"\r\n          class=\"c-button\"\r\n          (click)=\"onSelect(item)\"\r\n        >\r\n          <cui-svg\r\n            *ngIf=\"item.icon\"\r\n            [icon]=\"item.icon\"\r\n            [color]=\"item.color\"\r\n          ></cui-svg>\r\n          <span>{{ item.label }}</span>\r\n        </button>\r\n      </li>\r\n    </ul>\r\n  </div>\r\n</ng-template>\r\n", styles: [":host{display:none}.c-container{position:fixed;width:268px;border-radius:8px;z-index:1}.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;flex-shrink: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, providers: [CuiDestroyService], hostDirectives: [
-                        CuiClickOutsideDirective,
-                        {
-                            directive: CuiTargetDirective,
-                            inputs: ['ccTarget: target']
-                        }
-                    ], template: "<ng-template #list>\r\n  <div class=\"c-container\">\r\n    <ul\r\n      *ngIf=\"isVisible\"\r\n      class=\"c-ul\"\r\n    >\r\n      <li\r\n        *ngFor=\"let item of items; trackBy: trackByFn\"\r\n        [style.color]=\"item.color\"\r\n      >\r\n        <button\r\n          type=\"button\"\r\n          class=\"c-button\"\r\n          (click)=\"onSelect(item)\"\r\n        >\r\n          <cui-svg\r\n            *ngIf=\"item.icon\"\r\n            [icon]=\"item.icon\"\r\n            [color]=\"item.color\"\r\n          ></cui-svg>\r\n          <span>{{ item.label }}</span>\r\n        </button>\r\n      </li>\r\n    </ul>\r\n  </div>\r\n</ng-template>\r\n", styles: [":host{display:none}.c-container{position:fixed;width:268px;border-radius:8px;z-index:1}.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;flex-shrink: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: [{
-                type: Input
-            }], list: [{
-                type: ViewChild,
-                args: ['list']
-            }], onClose: [{
-                type: HostListener,
-                args: ['window:resize']
-            }], onStopClickPropagation: [{
-                type: HostListener,
-                args: ['click', ['$event']]
+class CuiContextMenuComponent {
+    constructor() {
+        this.changeDetectorRef = inject(ChangeDetectorRef);
+        this.viewContainerRef = inject(ViewContainerRef);
+        this.document = inject(DOCUMENT);
+        this.documentElement = this.document.documentElement;
+        this.window = inject(CUI_WINDOW);
+        this.destroy$ = inject(CuiDestroyService, { self: true });
+        this.cuiClickOutsideDirective = inject(CuiClickOutsideDirective, { self: true });
+        this.cuiTargetDirective = inject(CuiTargetDirective, { self: true });
+        this.EXTRA_OFFSET_LEFT = 0;
+        this.EXTRA_OFFSET_TOP = 0;
+        this.isVisible = false;
+    }
+    ngOnInit() {
+        this.initClickOutsideSubscription();
+    }
+    ngOnDestroy() {
+        this.clearViewContainerRef();
+    }
+    ngAfterViewInit() {
+        this.initTargetElementListener();
+    }
+    onSelect(item) {
+        var _a;
+        this.close();
+        (_a = item.command) === null || _a === void 0 ? void 0 : _a.call(item);
+    }
+    onClose() {
+        this.close();
+    }
+    onStopClickPropagation(event) {
+        event.stopPropagation();
+    }
+    trackByFn(_, item) {
+        return item.label;
+    }
+    initClickOutsideSubscription() {
+        this.cuiClickOutsideDirective.cuiClickOutside
+            .pipe(takeUntil(this.destroy$))
+            .subscribe((target) => {
+            if (this.target.contains(target)) {
+                return;
+            }
+            this.close();
+        });
+    }
+    initTargetElementListener() {
+        this.targetEventListener = (event) => {
+            event.stopPropagation();
+            this.document.body.click();
+            this.isVisible = !this.isVisible;
+            this.clearViewContainerRef();
+            if (this.isVisible) {
+                this.renderList();
+                this.changePosition(event.clientX, event.clientY);
+                this.initHidingSubscription();
+            }
+            this.changeDetectorRef.markForCheck();
+        };
+        this.cuiTargetDirective.clicked
+            .pipe(takeUntil(this.destroy$))
+            .subscribe(this.targetEventListener);
+    }
+    initHidingSubscription() {
+        this.initHidingFromWindowEvent('scroll');
+        this.initHidingFromWindowEvent('resize');
+    }
+    initHidingFromWindowEvent(eventName) {
+        fromEvent(this.window, eventName)
+            .pipe(take(1))
+            .subscribe(() => {
+            this.close();
+            this.changeDetectorRef.markForCheck();
+        });
+    }
+    close() {
+        this.isVisible = false;
+        this.clearViewContainerRef();
+    }
+    renderList() {
+        const embeddedViewRef = this.viewContainerRef.createEmbeddedView(this.list);
+        this.node = embeddedViewRef.rootNodes[0];
+        embeddedViewRef.detectChanges();
+        this.document.querySelector(CUI_ROOT_SELECTOR).appendChild(this.node);
+    }
+    changePosition(x, y) {
+        this.node.style.visibility = 'hidden';
+        setTimeout(() => {
+            const { clientWidth, clientHeight } = this.documentElement;
+            const width = this.node.offsetWidth;
+            const height = this.node.offsetHeight;
+            let left = x;
+            let top = y;
+            if (left + width > clientWidth) {
+                left -= width;
+            }
+            if (top + height > clientHeight) {
+                top -= height;
+            }
+            left = Math.max(left, this.EXTRA_OFFSET_LEFT);
+            top = Math.max(top, this.EXTRA_OFFSET_TOP);
+            this.node.style.left = left + 'px';
+            this.node.style.top = top + 'px';
+            this.node.style.visibility = '';
+            this.changeDetectorRef.markForCheck();
+        });
+    }
+    clearViewContainerRef() {
+        this.viewContainerRef.clear();
+    }
+}
+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: { "window:resize": "onClose()", "click": "onStopClickPropagation($event)" } }, providers: [CuiDestroyService], viewQueries: [{ propertyName: "list", first: true, predicate: ["list"], descendants: true }], hostDirectives: [{ directive: i2.CuiClickOutsideDirective }, { directive: i2.CuiTargetDirective, inputs: ["ccTarget", "target"] }], ngImport: i0, template: "<ng-template #list>\n  <div class=\"c-container\">\n    <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          type=\"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  </div>\n</ng-template>\n", styles: [":host{display:none}.c-container{position:fixed;width:268px;border-radius:8px;z-index:1}.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;flex-shrink: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, providers: [CuiDestroyService], hostDirectives: [
+                        CuiClickOutsideDirective,
+                        {
+                            directive: CuiTargetDirective,
+                            inputs: ['ccTarget: target']
+                        }
+                    ], template: "<ng-template #list>\n  <div class=\"c-container\">\n    <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          type=\"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  </div>\n</ng-template>\n", styles: [":host{display:none}.c-container{position:fixed;width:268px;border-radius:8px;z-index:1}.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;flex-shrink: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: [{
+                type: Input
+            }], list: [{
+                type: ViewChild,
+                args: ['list']
+            }], onClose: [{
+                type: HostListener,
+                args: ['window:resize']
+            }], onStopClickPropagation: [{
+                type: HostListener,
+                args: ['click', ['$event']]
             }] } });
 
-class CuiContextMenuModule {
-}
-CuiContextMenuModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CuiContextMenuModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-CuiContextMenuModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: CuiContextMenuModule, declarations: [CuiContextMenuComponent], imports: [CommonModule,
-        CuiSvgModule], exports: [CuiContextMenuComponent] });
-CuiContextMenuModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CuiContextMenuModule, imports: [CommonModule,
-        CuiSvgModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CuiContextMenuModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [
-                        CommonModule,
-                        CuiSvgModule
-                    ],
-                    declarations: [CuiContextMenuComponent],
-                    exports: [CuiContextMenuComponent]
-                }]
+class CuiContextMenuModule {
+}
+CuiContextMenuModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CuiContextMenuModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+CuiContextMenuModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: CuiContextMenuModule, declarations: [CuiContextMenuComponent], imports: [CommonModule,
+        CuiSvgModule], exports: [CuiContextMenuComponent] });
+CuiContextMenuModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CuiContextMenuModule, imports: [CommonModule,
+        CuiSvgModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CuiContextMenuModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        CommonModule,
+                        CuiSvgModule
+                    ],
+                    declarations: [CuiContextMenuComponent],
+                    exports: [CuiContextMenuComponent]
+                }]
         }] });
 
-class CuiFormFieldComponent {
-}
-CuiFormFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CuiFormFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-CuiFormFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: CuiFormFieldComponent, selector: "cui-form-field", ngImport: i0, template: "<ng-content select=\"label[cuiLabel]\" />\r\n<ng-content />\r\n<div class=\"c-hint-container\">\r\n    <ng-content select=\"cui-hint\" />\r\n</div>\r\n", styles: [":host{display:flex;flex-direction:column;gap:4px}.c-hint-container{margin-top:2px}.c-hint-container:empty{display:contents}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CuiFormFieldComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'cui-form-field', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content select=\"label[cuiLabel]\" />\r\n<ng-content />\r\n<div class=\"c-hint-container\">\r\n    <ng-content select=\"cui-hint\" />\r\n</div>\r\n", styles: [":host{display:flex;flex-direction:column;gap:4px}.c-hint-container{margin-top:2px}.c-hint-container:empty{display:contents}\n"] }]
+class CuiFormFieldComponent {
+}
+CuiFormFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CuiFormFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+CuiFormFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: CuiFormFieldComponent, selector: "cui-form-field", ngImport: i0, template: "<ng-content select=\"label[cuiLabel]\" />\n<ng-content />\n<div class=\"c-hint-container\">\n    <ng-content select=\"cui-hint\" />\n</div>\n", styles: [":host{display:flex;flex-direction:column;gap:4px}.c-hint-container{margin-top:2px}.c-hint-container:empty{display:contents}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CuiFormFieldComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'cui-form-field', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content select=\"label[cuiLabel]\" />\n<ng-content />\n<div class=\"c-hint-container\">\n    <ng-content select=\"cui-hint\" />\n</div>\n", styles: [":host{display:flex;flex-direction:column;gap:4px}.c-hint-container{margin-top:2px}.c-hint-container:empty{display:contents}\n"] }]
         }] });
 
-class CuiFormFieldModule {
-}
-CuiFormFieldModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CuiFormFieldModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-CuiFormFieldModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: CuiFormFieldModule, declarations: [CuiFormFieldComponent], exports: [CuiFormFieldComponent] });
-CuiFormFieldModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CuiFormFieldModule });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CuiFormFieldModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [CuiFormFieldComponent],
-                    exports: [CuiFormFieldComponent]
-                }]
+class CuiFormFieldModule {
+}
+CuiFormFieldModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CuiFormFieldModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+CuiFormFieldModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: CuiFormFieldModule, declarations: [CuiFormFieldComponent], exports: [CuiFormFieldComponent] });
+CuiFormFieldModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CuiFormFieldModule });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CuiFormFieldModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [CuiFormFieldComponent],
+                    exports: [CuiFormFieldComponent]
+                }]
         }] });
 
-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>\r\n", styles: [":host{font-weight:400;font-size:14px;line-height:20px;display:inline-block;font-family:var(--cui-main-font)}:host[data-hint-type=info]{color:var(--cui-base-500)}:host[data-hint-type=error]{color:var(--cui-danger)}\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>\r\n", styles: [":host{font-weight:400;font-size:14px;line-height:20px;display:inline-block;font-family:var(--cui-main-font)}:host[data-hint-type=info]{color:var(--cui-base-500)}:host[data-hint-type=error]{color:var(--cui-danger)}\n"] }]
-        }], propDecorators: { hintType: [{
-                type: Input
-            }, {
-                type: HostBinding,
-                args: ['attr.data-hint-type']
+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;display:inline-block;font-family:var(--cui-main-font)}:host[data-hint-type=info]{color:var(--cui-base-500)}:host[data-hint-type=error]{color:var(--cui-danger)}\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;display:inline-block;font-family:var(--cui-main-font)}:host[data-hint-type=info]{color:var(--cui-base-500)}:host[data-hint-type=error]{color:var(--cui-danger)}\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 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\r\n  [icon]=\"icon\"\r\n  [width]=\"ICON_WIDTH\"\r\n  [height]=\"ICON_HEIGHT\"\r\n  [color]=\"color\"\r\n  [strokeWidth]=\"ICON_STROKE_WIDTH\"\r\n  class=\"c-icon\"\r\n></cui-svg>\r\n", styles: [":host{padding:0;border:0;flex-shrink: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\r\n  [icon]=\"icon\"\r\n  [width]=\"ICON_WIDTH\"\r\n  [height]=\"ICON_HEIGHT\"\r\n  [color]=\"color\"\r\n  [strokeWidth]=\"ICON_STROKE_WIDTH\"\r\n  class=\"c-icon\"\r\n></cui-svg>\r\n", styles: [":host{padding:0;border:0;flex-shrink: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 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;flex-shrink: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;flex-shrink: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]
-                }]
+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
+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 CuiTextFieldController {
-    constructor(iconLeftDirective, idDirective, isErrorDirective, placeholderDirective, sizeDirective) {
-        this.iconLeftDirective = iconLeftDirective;
-        this.idDirective = idDirective;
-        this.isErrorDirective = isErrorDirective;
-        this.placeholderDirective = placeholderDirective;
-        this.sizeDirective = sizeDirective;
-    }
-    get iconLeft() {
-        return this.iconLeftDirective.iconLeft;
-    }
-    get id() {
-        return this.idDirective.id;
-    }
-    get isError() {
-        return this.isErrorDirective.isError;
-    }
-    get placeholder() {
-        return this.placeholderDirective.placeholder;
-    }
-    get size() {
-        return this.sizeDirective.size;
-    }
-}
-
-const CUI_TEXT_FIELD_ICON_LEFT = new InjectionToken('', {
-    factory: () => new CuiTextFieldIconLeftDirective()
-});
-class CuiTextFieldIconLeftDirective {
-}
-CuiTextFieldIconLeftDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CuiTextFieldIconLeftDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-CuiTextFieldIconLeftDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: CuiTextFieldIconLeftDirective, selector: "[cuiTextFieldIconLeft]", inputs: { iconLeft: ["cuiTextFieldIconLeft", "iconLeft"] }, providers: [cuiProvide(CUI_TEXT_FIELD_ICON_LEFT, CuiTextFieldIconLeftDirective)], ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CuiTextFieldIconLeftDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[cuiTextFieldIconLeft]',
-                    providers: [cuiProvide(CUI_TEXT_FIELD_ICON_LEFT, CuiTextFieldIconLeftDirective)]
-                }]
-        }], propDecorators: { iconLeft: [{
-                type: Input,
-                args: ['cuiTextFieldIconLeft']
+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 CuiTextFieldController {
+    constructor(iconLeftDirective, idDirective, isErrorDirective, placeholderDirective, sizeDirective) {
+        this.iconLeftDirective = iconLeftDirective;
+        this.idDirective = idDirective;
+        this.isErrorDirective = isErrorDirective;
+        this.placeholderDirective = placeholderDirective;
+        this.sizeDirective = sizeDirective;
+    }
+    get iconLeft() {
+        return this.iconLeftDirective.iconLeft;
+    }
+    get id() {
+        return this.idDirective.id;
+    }
+    get isError() {
+        return this.isErrorDirective.isError;
+    }
+    get placeholder() {
+        return this.placeholderDirective.placeholder;
+    }
+    get size() {
+        return this.sizeDirective.size;
+    }
+}
+
+const CUI_TEXT_FIELD_ICON_LEFT = new InjectionToken('', {
+    factory: () => new CuiTextFieldIconLeftDirective()
+});
+class CuiTextFieldIconLeftDirective {
+}
+CuiTextFieldIconLeftDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CuiTextFieldIconLeftDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+CuiTextFieldIconLeftDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: CuiTextFieldIconLeftDirective, selector: "[cuiTextFieldIconLeft]", inputs: { iconLeft: ["cuiTextFieldIconLeft", "iconLeft"] }, providers: [cuiProvide(CUI_TEXT_FIELD_ICON_LEFT, CuiTextFieldIconLeftDirective)], ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CuiTextFieldIconLeftDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[cuiTextFieldIconLeft]',
+                    providers: [cuiProvide(CUI_TEXT_FIELD_ICON_LEFT, CuiTextFieldIconLeftDirective)]
+                }]
+        }], propDecorators: { iconLeft: [{
+                type: Input,
+                args: ['cuiTextFieldIconLeft']
             }] } });
 
-const CUI_TEXT_FIELD_ID = new InjectionToken('', {
-    factory: () => new CuiTextFieldIdDirective()
-});
-class CuiTextFieldIdDirective {
-}
-CuiTextFieldIdDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CuiTextFieldIdDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-CuiTextFieldIdDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: CuiTextFieldIdDirective, selector: "[cuiTextFieldId]", inputs: { id: ["cuiTextFieldId", "id"] }, providers: [cuiProvide(CUI_TEXT_FIELD_ID, CuiTextFieldIdDirective)], ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CuiTextFieldIdDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[cuiTextFieldId]',
-                    providers: [cuiProvide(CUI_TEXT_FIELD_ID, CuiTextFieldIdDirective)]
-                }]
-        }], propDecorators: { id: [{
-                type: Input,
-                args: ['cuiTextFieldId']
+const CUI_TEXT_FIELD_ID = new InjectionToken('', {
+    factory: () => new CuiTextFieldIdDirective()
+});
+class CuiTextFieldIdDirective {
+}
+CuiTextFieldIdDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CuiTextFieldIdDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+CuiTextFieldIdDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: CuiTextFieldIdDirective, selector: "[cuiTextFieldId]", inputs: { id: ["cuiTextFieldId", "id"] }, providers: [cuiProvide(CUI_TEXT_FIELD_ID, CuiTextFieldIdDirective)], ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CuiTextFieldIdDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[cuiTextFieldId]',
+                    providers: [cuiProvide(CUI_TEXT_FIELD_ID, CuiTextFieldIdDirective)]
+                }]
+        }], propDecorators: { id: [{
+                type: Input,
+                args: ['cuiTextFieldId']
             }] } });
 
-const CUI_TEXT_FIELD_IS_ERROR = new InjectionToken('', {
-    factory: () => new CuiTextFieldIsErrorDirective()
-});
-class CuiTextFieldIsErrorDirective {
-    constructor() {
-        this.isError = false;
-    }
-}
-CuiTextFieldIsErrorDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CuiTextFieldIsErrorDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-CuiTextFieldIsErrorDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: CuiTextFieldIsErrorDirective, selector: "[cuiTextFieldIsError]", inputs: { isError: ["cuiTextFieldIsError", "isError"] }, providers: [cuiProvide(CUI_TEXT_FIELD_IS_ERROR, CuiTextFieldIsErrorDirective)], ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CuiTextFieldIsErrorDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[cuiTextFieldIsError]',
-                    providers: [cuiProvide(CUI_TEXT_FIELD_IS_ERROR, CuiTextFieldIsErrorDirective)]
-                }]
-        }], propDecorators: { isError: [{
-                type: Input,
-                args: ['cuiTextFieldIsError']
+const CUI_TEXT_FIELD_IS_ERROR = new InjectionToken('', {
+    factory: () => new CuiTextFieldIsErrorDirective()
+});
+class CuiTextFieldIsErrorDirective {
+    constructor() {
+        this.isError = false;
+    }
+}
+CuiTextFieldIsErrorDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CuiTextFieldIsErrorDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+CuiTextFieldIsErrorDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: CuiTextFieldIsErrorDirective, selector: "[cuiTextFieldIsError]", inputs: { isError: ["cuiTextFieldIsError", "isError"] }, providers: [cuiProvide(CUI_TEXT_FIELD_IS_ERROR, CuiTextFieldIsErrorDirective)], ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CuiTextFieldIsErrorDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[cuiTextFieldIsError]',
+                    providers: [cuiProvide(CUI_TEXT_FIELD_IS_ERROR, CuiTextFieldIsErrorDirective)]
+                }]
+        }], propDecorators: { isError: [{
+                type: Input,
+                args: ['cuiTextFieldIsError']
             }] } });
 
-const CUI_TEXT_FIELD_PLACEHOLDER = new InjectionToken('', {
-    factory: () => new CuiTextFieldPlaceholderDirective()
-});
-class CuiTextFieldPlaceholderDirective {
-}
-CuiTextFieldPlaceholderDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CuiTextFieldPlaceholderDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-CuiTextFieldPlaceholderDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: CuiTextFieldPlaceholderDirective, selector: "[cuiTextFieldPlaceholder]", inputs: { placeholder: ["cuiTextFieldPlaceholder", "placeholder"] }, providers: [cuiProvide(CUI_TEXT_FIELD_PLACEHOLDER, CuiTextFieldPlaceholderDirective)], ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CuiTextFieldPlaceholderDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[cuiTextFieldPlaceholder]',
-                    providers: [cuiProvide(CUI_TEXT_FIELD_PLACEHOLDER, CuiTextFieldPlaceholderDirective)]
-                }]
-        }], propDecorators: { placeholder: [{
-                type: Input,
-                args: ['cuiTextFieldPlaceholder']
+const CUI_TEXT_FIELD_PLACEHOLDER = new InjectionToken('', {
+    factory: () => new CuiTextFieldPlaceholderDirective()
+});
+class CuiTextFieldPlaceholderDirective {
+}
+CuiTextFieldPlaceholderDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CuiTextFieldPlaceholderDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+CuiTextFieldPlaceholderDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: CuiTextFieldPlaceholderDirective, selector: "[cuiTextFieldPlaceholder]", inputs: { placeholder: ["cuiTextFieldPlaceholder", "placeholder"] }, providers: [cuiProvide(CUI_TEXT_FIELD_PLACEHOLDER, CuiTextFieldPlaceholderDirective)], ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CuiTextFieldPlaceholderDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[cuiTextFieldPlaceholder]',
+                    providers: [cuiProvide(CUI_TEXT_FIELD_PLACEHOLDER, CuiTextFieldPlaceholderDirective)]
+                }]
+        }], propDecorators: { placeholder: [{
+                type: Input,
+                args: ['cuiTextFieldPlaceholder']
             }] } });
 
-const CUI_TEXT_FIELD_SIZE = new InjectionToken('', {
-    factory: () => new CuiTextFieldSizeDirective()
-});
-class CuiTextFieldSizeDirective {
-    constructor() {
-        this.size = 'sm';
-    }
-}
-CuiTextFieldSizeDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CuiTextFieldSizeDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-CuiTextFieldSizeDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: CuiTextFieldSizeDirective, selector: "[cuiTextFieldSize]", inputs: { size: ["cuiTextFieldSize", "size"] }, providers: [cuiProvide(CUI_TEXT_FIELD_SIZE, CuiTextFieldSizeDirective)], ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CuiTextFieldSizeDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[cuiTextFieldSize]',
-                    providers: [cuiProvide(CUI_TEXT_FIELD_SIZE, CuiTextFieldSizeDirective)]
-                }]
-        }], propDecorators: { size: [{
-                type: Input,
-                args: ['cuiTextFieldSize']
+const CUI_TEXT_FIELD_SIZE = new InjectionToken('', {
+    factory: () => new CuiTextFieldSizeDirective()
+});
+class CuiTextFieldSizeDirective {
+    constructor() {
+        this.size = 'sm';
+    }
+}
+CuiTextFieldSizeDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CuiTextFieldSizeDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+CuiTextFieldSizeDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: CuiTextFieldSizeDirective, selector: "[cuiTextFieldSize]", inputs: { size: ["cuiTextFieldSize", "size"] }, providers: [cuiProvide(CUI_TEXT_FIELD_SIZE, CuiTextFieldSizeDirective)], ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CuiTextFieldSizeDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[cuiTextFieldSize]',
+                    providers: [cuiProvide(CUI_TEXT_FIELD_SIZE, CuiTextFieldSizeDirective)]
+                }]
+        }], propDecorators: { size: [{
+                type: Input,
+                args: ['cuiTextFieldSize']
             }] } });
 
-class CuiTextFieldControllerModule {
-}
-CuiTextFieldControllerModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CuiTextFieldControllerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-CuiTextFieldControllerModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: CuiTextFieldControllerModule, declarations: [CuiTextFieldIconLeftDirective,
-        CuiTextFieldIdDirective,
-        CuiTextFieldPlaceholderDirective,
-        CuiTextFieldIsErrorDirective,
-        CuiTextFieldSizeDirective], exports: [CuiTextFieldIconLeftDirective,
-        CuiTextFieldIdDirective,
-        CuiTextFieldPlaceholderDirective,
-        CuiTextFieldIsErrorDirective,
-        CuiTextFieldSizeDirective] });
-CuiTextFieldControllerModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CuiTextFieldControllerModule });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CuiTextFieldControllerModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [
-                        CuiTextFieldIconLeftDirective,
-                        CuiTextFieldIdDirective,
-                        CuiTextFieldPlaceholderDirective,
-                        CuiTextFieldIsErrorDirective,
-                        CuiTextFieldSizeDirective
-                    ],
-                    exports: [
-                        CuiTextFieldIconLeftDirective,
-                        CuiTextFieldIdDirective,
-                        CuiTextFieldPlaceholderDirective,
-                        CuiTextFieldIsErrorDirective,
-                        CuiTextFieldSizeDirective
-                    ]
-                }]
+class CuiTextFieldControllerModule {
+}
+CuiTextFieldControllerModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CuiTextFieldControllerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+CuiTextFieldControllerModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: CuiTextFieldControllerModule, declarations: [CuiTextFieldIconLeftDirective,
+        CuiTextFieldIdDirective,
+        CuiTextFieldPlaceholderDirective,
+        CuiTextFieldIsErrorDirective,
+        CuiTextFieldSizeDirective], exports: [CuiTextFieldIconLeftDirective,
+        CuiTextFieldIdDirective,
+        CuiTextFieldPlaceholderDirective,
+        CuiTextFieldIsErrorDirective,
+        CuiTextFieldSizeDirective] });
+CuiTextFieldControllerModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CuiTextFieldControllerModule });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CuiTextFieldControllerModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        CuiTextFieldIconLeftDirective,
+                        CuiTextFieldIdDirective,
+                        CuiTextFieldPlaceholderDirective,
+                        CuiTextFieldIsErrorDirective,
+                        CuiTextFieldSizeDirective
+                    ],
+                    exports: [
+                        CuiTextFieldIconLeftDirective,
+                        CuiTextFieldIdDirective,
+                        CuiTextFieldPlaceholderDirective,
+                        CuiTextFieldIsErrorDirective,
+                        CuiTextFieldSizeDirective
+                    ]
+                }]
         }] });
 
-const CUI_TEXT_FIELD_CONTROLLER = new InjectionToken('');
-const CUI_TEXT_FILED_CONTROLLER_PROVIDER = [
-    {
-        provide: CUI_TEXT_FIELD_CONTROLLER,
-        useFactory: (...controllers) => {
-            return new CuiTextFieldController(...controllers);
-        },
-        deps: [
-            CUI_TEXT_FIELD_ICON_LEFT,
-            CUI_TEXT_FIELD_ID,
-            CUI_TEXT_FIELD_IS_ERROR,
-            CUI_TEXT_FIELD_PLACEHOLDER,
-            CUI_TEXT_FIELD_SIZE
-        ]
-    }
+const CUI_TEXT_FIELD_CONTROLLER = new InjectionToken('');
+const CUI_TEXT_FILED_CONTROLLER_PROVIDER = [
+    {
+        provide: CUI_TEXT_FIELD_CONTROLLER,
+        useFactory: (...controllers) => {
+            return new CuiTextFieldController(...controllers);
+        },
+        deps: [
+            CUI_TEXT_FIELD_ICON_LEFT,
+            CUI_TEXT_FIELD_ID,
+            CUI_TEXT_FIELD_IS_ERROR,
+            CUI_TEXT_FIELD_PLACEHOLDER,
+            CUI_TEXT_FIELD_SIZE
+        ]
+    }
 ];
 
-class CuiInputNumberComponent {
-    constructor() {
-        this.changeDetectorRef = inject(ChangeDetectorRef);
-        this.cuiTextFieldController = inject(CUI_TEXT_FIELD_CONTROLLER);
-        this.cuiInputNumberOptions = inject(CUI_INPUT_NUMBER_OPTIONS);
-        this.MIN_JS_NUMBER = -(Math.pow(2, 53));
-        this.MAX_JS_NUMBER = Math.pow(2, 53);
-        this.INPUT_VALUE_REGEX = /^-?[\d\s]*(,\d*)?$/;
-        this.INTERVAL_BETWEEN_SPACES = 3;
-        this.formattedValue = '';
-        this._min = this.calculateValidMinValue(this.cuiInputNumberOptions.min);
-        this._max = this.calculateValidMaxValue(this.cuiInputNumberOptions.max);
-        this.step = this.cuiInputNumberOptions.step;
-        this.precision = this.cuiInputNumberOptions.precision;
-    }
-    set min(min) {
-        this._min = this.calculateValidMinValue(min);
-    }
-    set max(max) {
-        this._max = this.calculateValidMaxValue(max);
-    }
-    get id() {
-        return this.cuiTextFieldController.id;
-    }
-    get placeholder() {
-        return this.cuiTextFieldController.placeholder;
-    }
-    get iconLeft() {
-        return this.cuiTextFieldController.iconLeft;
-    }
-    get size() {
-        return this.cuiTextFieldController.size;
-    }
-    get isError() {
-        return this.cuiTextFieldController.isError;
-    }
-    writeValue(value) {
-        var _a;
-        this.value = (_a = value === null || value === void 0 ? void 0 : value.toString()) !== null && _a !== void 0 ? _a : null;
-        this.formattedValue = this.formatValue(this.value);
-        this.changeDetectorRef.markForCheck();
-    }
-    registerOnChange(fn) {
-        this.onChange = fn;
-    }
-    registerOnTouched(fn) {
-        this.onTouched = fn;
-    }
-    setDisabledState(isDisabled) {
-        this.isDisabled = isDisabled;
-        this.changeDetectorRef.markForCheck();
-    }
-    onInput(event) {
-        var _a;
-        const eventTarget = event.target;
-        const targetValue = eventTarget.value;
-        const selectionStart = (_a = this.input.nativeElement.selectionStart) !== null && _a !== void 0 ? _a : 0;
-        const previousFormattedValue = this.formattedValue;
-        if (this.isInputValueCorrect(targetValue)) {
-            const parsedValue = this.parseValue(targetValue);
-            this.changeModel(parsedValue);
-        }
-        this.formattedValue = this.formatValue(this.value);
-        eventTarget.value = this.formattedValue;
-        const currentCaretPosition = selectionStart
-            + (this.formattedValue.length - previousFormattedValue.length === 2 ? 1 : 0);
-        this.input.nativeElement.setSelectionRange(currentCaretPosition, currentCaretPosition);
-    }
-    onArrowUp() {
-        this.increaseByStep();
-    }
-    onArrowDown() {
-        this.decreaseByStep();
-    }
-    onFocus() {
-        this.input.nativeElement.focus();
-    }
-    isInputValueCorrect(inputValue) {
-        return this.INPUT_VALUE_REGEX.test(inputValue) && this.isInputValueValid(inputValue);
-    }
-    isInputValueValid(inputValue) {
-        const [, fractionPart = ''] = inputValue.split(',');
-        return this.isNumberValid(inputValue) && this.isPrecisionCountCorrect(fractionPart);
-    }
-    isNumberValid(inputValue) {
-        if (inputValue === '-' && this._min > 0) {
-            return false;
-        }
-        if (inputValue === ',' || inputValue === '-' || inputValue === '-,' || inputValue === '') {
-            return true;
-        }
-        const convertedValue = +cuiReplace(cuiRemoveSpaces(inputValue), ',', '.');
-        return convertedValue <= this._max && convertedValue >= this._min;
-    }
-    isPrecisionCountCorrect(fractionPart = '') {
-        return fractionPart.length <= this.precision;
-    }
-    parseValue(inputValue) {
-        const valueWithoutSpaces = cuiRemoveSpaces(inputValue);
-        switch (valueWithoutSpaces) {
-            case ',':
-                return '0.';
-            case '-,':
-                return '-0.';
-            default:
-                return cuiReplace(valueWithoutSpaces, ',', '.');
-        }
-    }
-    formatValue(value) {
-        if (!value) {
-            return '';
-        }
-        const [integerPart, fractionPart] = value.split('.');
-        let formattedInteger = this.insertSpacesWithInterval(integerPart) || '0';
-        if (fractionPart !== undefined && integerPart.startsWith('-') && !formattedInteger.slice(1)) {
-            formattedInteger = '-0';
-        }
-        return fractionPart !== undefined ? `${formattedInteger},${fractionPart}` : formattedInteger;
-    }
-    insertSpacesWithInterval(value) {
-        const regex = new RegExp(`\\B(?=(\\d{${this.INTERVAL_BETWEEN_SPACES}})+(?!\\d))`, 'g');
-        return value.replace(regex, ' ');
-    }
-    changeModel(value) {
-        this.value = value;
-        this.onChange(value === '-' ? 0 : +value);
-    }
-    increaseByStep() {
-        const value = this.value === '-'
-            ? this.step
-            : (+(Number(this.value) + this.step).toFixed(this.precision));
-        if (value > this._max) {
-            return;
-        }
-        const convertedValue = value.toString();
-        this.formattedValue = this.formatValue(convertedValue);
-        this.changeModel(convertedValue);
-    }
-    decreaseByStep() {
-        const value = this.value === '-'
-            ? -this.step
-            : (+(Number(this.value) - this.step).toFixed(this.precision));
-        if (value < this._min) {
-            return;
-        }
-        const convertedValue = value.toString();
-        this.formattedValue = this.formatValue(convertedValue);
-        this.changeModel(convertedValue);
-    }
-    calculateValidMinValue(initialValue) {
-        return initialValue >= this.MIN_JS_NUMBER
-            ? initialValue
-            : this.MIN_JS_NUMBER;
-    }
-    calculateValidMaxValue(initialValue) {
-        return initialValue <= this.MAX_JS_NUMBER
-            ? initialValue
-            : this.MAX_JS_NUMBER;
-    }
-}
-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,
-        cuiProvide(NG_VALUE_ACCESSOR, CuiInputNumberComponent, true),
-    ], viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true }], ngImport: i0, template: "<cui-svg\r\n  *ngIf=\"iconLeft\"\r\n  [icon]=\"iconLeft\"\r\n  color=\"var(--cui-base-500)\"\r\n></cui-svg>\r\n<input\r\n  #input\r\n  [ngModel]=\"formattedValue\"\r\n  [attr.id]=\"id\"\r\n  [attr.placeholder]=\"placeholder\"\r\n  type=\"text\"\r\n  [disabled]=\"isDisabled\"\r\n  class=\"c-input\"\r\n  (input)=\"onInput($event)\"\r\n  (focus)=\"onTouched()\"\r\n  (keydown.arrowUp)=\"onArrowUp()\"\r\n  (keydown.arrowDown)=\"onArrowDown()\"\r\n>\r\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-input);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 var(--cui-focus);border-color:var(--cui-info)}: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-danger)}: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;flex-shrink: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$2.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$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.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,
-                        cuiProvide(NG_VALUE_ACCESSOR, CuiInputNumberComponent, true),
-                    ], template: "<cui-svg\r\n  *ngIf=\"iconLeft\"\r\n  [icon]=\"iconLeft\"\r\n  color=\"var(--cui-base-500)\"\r\n></cui-svg>\r\n<input\r\n  #input\r\n  [ngModel]=\"formattedValue\"\r\n  [attr.id]=\"id\"\r\n  [attr.placeholder]=\"placeholder\"\r\n  type=\"text\"\r\n  [disabled]=\"isDisabled\"\r\n  class=\"c-input\"\r\n  (input)=\"onInput($event)\"\r\n  (focus)=\"onTouched()\"\r\n  (keydown.arrowUp)=\"onArrowUp()\"\r\n  (keydown.arrowDown)=\"onArrowDown()\"\r\n>\r\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-input);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 var(--cui-focus);border-color:var(--cui-info)}: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-danger)}: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;flex-shrink: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: [{
-                type: Input
-            }], min: [{
-                type: Input
-            }], max: [{
-                type: Input
-            }], isDisabled: [{
-                type: HostBinding,
-                args: ['class._disabled']
-            }], input: [{
-                type: ViewChild,
-                args: ['input']
-            }], size: [{
-                type: HostBinding,
-                args: ['attr.data-size']
-            }], isError: [{
-                type: HostBinding,
-                args: ['class._with-error']
-            }], onFocus: [{
-                type: HostListener,
-                args: ['click']
+class CuiInputNumberComponent {
+    constructor() {
+        this.changeDetectorRef = inject(ChangeDetectorRef);
+        this.cuiTextFieldController = inject(CUI_TEXT_FIELD_CONTROLLER);
+        this.cuiInputNumberOptions = inject(CUI_INPUT_NUMBER_OPTIONS);
+        this.MIN_JS_NUMBER = -(Math.pow(2, 53));
+        this.MAX_JS_NUMBER = Math.pow(2, 53);
+        this.INPUT_VALUE_REGEX = /^-?[\d\s]*(,\d*)?$/;
+        this.INTERVAL_BETWEEN_SPACES = 3;
+        this.formattedValue = '';
+        this._min = this.calculateValidMinValue(this.cuiInputNumberOptions.min);
+        this._max = this.calculateValidMaxValue(this.cuiInputNumberOptions.max);
+        this.step = this.cuiInputNumberOptions.step;
+        this.precision = this.cuiInputNumberOptions.precision;
+    }
+    set min(min) {
+        this._min = this.calculateValidMinValue(min);
+    }
+    set max(max) {
+        this._max = this.calculateValidMaxValue(max);
+    }
+    get id() {
+        return this.cuiTextFieldController.id;
+    }
+    get placeholder() {
+        return this.cuiTextFieldController.placeholder;
+    }
+    get iconLeft() {
+        return this.cuiTextFieldController.iconLeft;
+    }
+    get size() {
+        return this.cuiTextFieldController.size;
+    }
+    get isError() {
+        return this.cuiTextFieldController.isError;
+    }
+    writeValue(value) {
+        var _a;
+        this.value = (_a = value === null || value === void 0 ? void 0 : value.toString()) !== null && _a !== void 0 ? _a : null;
+        this.formattedValue = this.formatValue(this.value);
+        this.changeDetectorRef.markForCheck();
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.isDisabled = isDisabled;
+        this.changeDetectorRef.markForCheck();
+    }
+    onInput(event) {
+        var _a;
+        const eventTarget = event.target;
+        const targetValue = eventTarget.value;
+        const selectionStart = (_a = this.input.nativeElement.selectionStart) !== null && _a !== void 0 ? _a : 0;
+        const previousFormattedValue = this.formattedValue;
+        if (this.isInputValueCorrect(targetValue)) {
+            const parsedValue = this.parseValue(targetValue);
+            this.changeModel(parsedValue);
+        }
+        this.formattedValue = this.formatValue(this.value);
+        eventTarget.value = this.formattedValue;
+        const currentCaretPosition = selectionStart
+            + (this.formattedValue.length - previousFormattedValue.length === 2 ? 1 : 0);
+        this.input.nativeElement.setSelectionRange(currentCaretPosition, currentCaretPosition);
+    }
+    onArrowUp() {
+        this.increaseByStep();
+    }
+    onArrowDown() {
+        this.decreaseByStep();
+    }
+    onFocus() {
+        this.input.nativeElement.focus();
+    }
+    isInputValueCorrect(inputValue) {
+        return this.INPUT_VALUE_REGEX.test(inputValue) && this.isInputValueValid(inputValue);
+    }
+    isInputValueValid(inputValue) {
+        const [, fractionPart = ''] = inputValue.split(',');
+        return this.isNumberValid(inputValue) && this.isPrecisionCountCorrect(fractionPart);
+    }
+    isNumberValid(inputValue) {
+        if (inputValue === '-' && this._min > 0) {
+            return false;
+        }
+        if (inputValue === ',' || inputValue === '-' || inputValue === '-,' || inputValue === '') {
+            return true;
+        }
+        const convertedValue = +cuiReplace(cuiRemoveSpaces(inputValue), ',', '.');
+        return convertedValue <= this._max && convertedValue >= this._min;
+    }
+    isPrecisionCountCorrect(fractionPart = '') {
+        return fractionPart.length <= this.precision;
+    }
+    parseValue(inputValue) {
+        const valueWithoutSpaces = cuiRemoveSpaces(inputValue);
+        switch (valueWithoutSpaces) {
+            case ',':
+                return '0.';
+            case '-,':
+                return '-0.';
+            default:
+                return cuiReplace(valueWithoutSpaces, ',', '.');
+        }
+    }
+    formatValue(value) {
+        if (!value) {
+            return '';
+        }
+        const [integerPart, fractionPart] = value.split('.');
+        let formattedInteger = this.insertSpacesWithInterval(integerPart) || '0';
+        if (fractionPart !== undefined && integerPart.startsWith('-') && !formattedInteger.slice(1)) {
+            formattedInteger = '-0';
+        }
+        return fractionPart !== undefined ? `${formattedInteger},${fractionPart}` : formattedInteger;
+    }
+    insertSpacesWithInterval(value) {
+        const regex = new RegExp(`\\B(?=(\\d{${this.INTERVAL_BETWEEN_SPACES}})+(?!\\d))`, 'g');
+        return value.replace(regex, ' ');
+    }
+    changeModel(value) {
+        this.value = value;
+        this.onChange(value === '-' ? 0 : +value);
+    }
+    increaseByStep() {
+        const value = this.value === '-'
+            ? this.step
+            : (+(Number(this.value) + this.step).toFixed(this.precision));
+        if (value > this._max) {
+            return;
+        }
+        const convertedValue = value.toString();
+        this.formattedValue = this.formatValue(convertedValue);
+        this.changeModel(convertedValue);
+    }
+    decreaseByStep() {
+        const value = this.value === '-'
+            ? -this.step
+            : (+(Number(this.value) - this.step).toFixed(this.precision));
+        if (value < this._min) {
+            return;
+        }
+        const convertedValue = value.toString();
+        this.formattedValue = this.formatValue(convertedValue);
+        this.changeModel(convertedValue);
+    }
+    calculateValidMinValue(initialValue) {
+        return initialValue >= this.MIN_JS_NUMBER
+            ? initialValue
+            : this.MIN_JS_NUMBER;
+    }
+    calculateValidMaxValue(initialValue) {
+        return initialValue <= this.MAX_JS_NUMBER
+            ? initialValue
+            : this.MAX_JS_NUMBER;
+    }
+}
+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,
+        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  color=\"var(--cui-base-500)\"\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-input);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 var(--cui-focus);border-color:var(--cui-info)}: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-danger)}: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;flex-shrink: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$2.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$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.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,
+                        cuiProvide(NG_VALUE_ACCESSOR, CuiInputNumberComponent, true),
+                    ], template: "<cui-svg\n  *ngIf=\"iconLeft\"\n  [icon]=\"iconLeft\"\n  color=\"var(--cui-base-500)\"\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-input);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 var(--cui-focus);border-color:var(--cui-info)}: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-danger)}: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;flex-shrink: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: [{
+                type: Input
+            }], min: [{
+                type: Input
+            }], max: [{
+                type: Input
+            }], isDisabled: [{
+                type: HostBinding,
+                args: ['class._disabled']
+            }], input: [{
+                type: ViewChild,
+                args: ['input']
+            }], size: [{
+                type: HostBinding,
+                args: ['attr.data-size']
+            }], isError: [{
+                type: HostBinding,
+                args: ['class._with-error']
+            }], onFocus: [{
+                type: HostListener,
+                args: ['click']
             }] } });
 
-class CuiInputNumberModule {
-}
-CuiInputNumberModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CuiInputNumberModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-CuiInputNumberModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: CuiInputNumberModule, declarations: [CuiInputNumberComponent], imports: [CommonModule,
-        FormsModule,
-        CuiSvgModule], exports: [CuiInputNumberComponent,
-        CuiTextFieldControllerModule] });
-CuiInputNumberModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CuiInputNumberModule, imports: [CommonModule,
-        FormsModule,
-        CuiSvgModule, CuiTextFieldControllerModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CuiInputNumberModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [
-                        CommonModule,
-                        FormsModule,
-                        CuiSvgModule
-                    ],
-                    declarations: [CuiInputNumberComponent],
-                    exports: [
-                        CuiInputNumberComponent,
-                        CuiTextFieldControllerModule
-                    ]
-                }]
+class CuiInputNumberModule {
+}
+CuiInputNumberModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CuiInputNumberModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+CuiInputNumberModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: CuiInputNumberModule, declarations: [CuiInputNumberComponent], imports: [CommonModule,
+        FormsModule,
+        CuiSvgModule], exports: [CuiInputNumberComponent,
+        CuiTextFieldControllerModule] });
+CuiInputNumberModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CuiInputNumberModule, imports: [CommonModule,
+        FormsModule,
+        CuiSvgModule, CuiTextFieldControllerModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CuiInputNumberModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        CommonModule,
+                        FormsModule,
+                        CuiSvgModule
+                    ],
+                    declarations: [CuiInputNumberComponent],
+                    exports: [
+                        CuiInputNumberComponent,
+                        CuiTextFieldControllerModule
+                    ]
+                }]
         }] });
 
-class CuiInputPasswordComponent {
-    constructor() {
-        this.changeDetectorRef = inject(ChangeDetectorRef);
-        this.cuiTextFieldController = inject(CUI_TEXT_FIELD_CONTROLLER);
-        this.isPasswordHidden = true;
-    }
-    get id() {
-        return this.cuiTextFieldController.id;
-    }
-    get placeholder() {
-        return this.cuiTextFieldController.placeholder;
-    }
-    get iconLeft() {
-        return this.cuiTextFieldController.iconLeft;
-    }
-    get isToggleButtonShown() {
-        return !this.isDisabled;
-    }
-    get icon() {
-        return this.isPasswordHidden ? 'cuiIconEye' : 'cuiIconEyeOff';
-    }
-    get type() {
-        return this.isPasswordHidden ? 'password' : 'text';
-    }
-    get buttonTitle() {
-        return this.isPasswordHidden ? 'Reveal password' : 'Hide password';
-    }
-    get size() {
-        return this.cuiTextFieldController.size;
-    }
-    get isError() {
-        return this.cuiTextFieldController.isError;
-    }
-    writeValue(value) {
-        this.value = value;
-        this.changeDetectorRef.markForCheck();
-    }
-    registerOnChange(fn) {
-        this.onChange = fn;
-    }
-    registerOnTouched(fn) {
-        this.onTouched = fn;
-    }
-    setDisabledState(isDisabled) {
-        this.isDisabled = isDisabled;
-        if (this.isDisabled) {
-            this.isPasswordHidden = true;
-        }
-        this.changeDetectorRef.markForCheck();
-    }
-    onInput({ target }) {
-        const value = target.value;
-        this.value = value;
-        this.onChange(value);
-    }
-    onTogglePasswordVisibility() {
-        this.isPasswordHidden = !this.isPasswordHidden;
-    }
-}
-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,
-        cuiProvide(NG_VALUE_ACCESSOR, CuiInputPasswordComponent, true)
-    ], ngImport: i0, template: "<cui-svg\r\n  *ngIf=\"iconLeft\"\r\n  [icon]=\"iconLeft\"\r\n  color=\"var(--cui-base-500)\"\r\n></cui-svg>\r\n<input\r\n  [ngModel]=\"value\"\r\n  [attr.id]=\"id\"\r\n  [attr.placeholder]=\"placeholder\"\r\n  [type]=\"type\"\r\n  [disabled]=\"isDisabled\"\r\n  class=\"c-input\"\r\n  (input)=\"onInput($event)\"\r\n  (focus)=\"onTouched()\"\r\n>\r\n<button\r\n  *ngIf=\"isToggleButtonShown\"\r\n  [title]=\"buttonTitle\"\r\n  class=\"c-button\"\r\n  (click)=\"onTogglePasswordVisibility()\"\r\n>\r\n  <cui-svg\r\n    [icon]=\"icon\"\r\n    [width]=\"16\"\r\n    [height]=\"16\"\r\n    color=\"var(--cui-base-500)\"\r\n  ></cui-svg>\r\n</button>\r\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-input);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 var(--cui-focus);border-color:var(--cui-info)}: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-danger)}: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;flex-shrink: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;flex-shrink: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$2.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$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.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,
-                        cuiProvide(NG_VALUE_ACCESSOR, CuiInputPasswordComponent, true)
-                    ], template: "<cui-svg\r\n  *ngIf=\"iconLeft\"\r\n  [icon]=\"iconLeft\"\r\n  color=\"var(--cui-base-500)\"\r\n></cui-svg>\r\n<input\r\n  [ngModel]=\"value\"\r\n  [attr.id]=\"id\"\r\n  [attr.placeholder]=\"placeholder\"\r\n  [type]=\"type\"\r\n  [disabled]=\"isDisabled\"\r\n  class=\"c-input\"\r\n  (input)=\"onInput($event)\"\r\n  (focus)=\"onTouched()\"\r\n>\r\n<button\r\n  *ngIf=\"isToggleButtonShown\"\r\n  [title]=\"buttonTitle\"\r\n  class=\"c-button\"\r\n  (click)=\"onTogglePasswordVisibility()\"\r\n>\r\n  <cui-svg\r\n    [icon]=\"icon\"\r\n    [width]=\"16\"\r\n    [height]=\"16\"\r\n    color=\"var(--cui-base-500)\"\r\n  ></cui-svg>\r\n</button>\r\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-input);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 var(--cui-focus);border-color:var(--cui-info)}: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-danger)}: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;flex-shrink: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;flex-shrink: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']
-            }], size: [{
-                type: HostBinding,
-                args: ['attr.data-size']
-            }], isError: [{
-                type: HostBinding,
-                args: ['class._with-error']
+class CuiInputPasswordComponent {
+    constructor() {
+        this.changeDetectorRef = inject(ChangeDetectorRef);
+        this.cuiTextFieldController = inject(CUI_TEXT_FIELD_CONTROLLER);
+        this.isPasswordHidden = true;
+    }
+    get id() {
+        return this.cuiTextFieldController.id;
+    }
+    get placeholder() {
+        return this.cuiTextFieldController.placeholder;
+    }
+    get iconLeft() {
+        return this.cuiTextFieldController.iconLeft;
+    }
+    get isToggleButtonShown() {
+        return !this.isDisabled;
+    }
+    get icon() {
+        return this.isPasswordHidden ? 'cuiIconEye' : 'cuiIconEyeOff';
+    }
+    get type() {
+        return this.isPasswordHidden ? 'password' : 'text';
+    }
+    get buttonTitle() {
+        return this.isPasswordHidden ? 'Reveal password' : 'Hide password';
+    }
+    get size() {
+        return this.cuiTextFieldController.size;
+    }
+    get isError() {
+        return this.cuiTextFieldController.isError;
+    }
+    writeValue(value) {
+        this.value = value;
+        this.changeDetectorRef.markForCheck();
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.isDisabled = isDisabled;
+        if (this.isDisabled) {
+            this.isPasswordHidden = true;
+        }
+        this.changeDetectorRef.markForCheck();
+    }
+    onInput({ target }) {
+        const value = target.value;
+        this.value = value;
+        this.onChange(value);
+    }
+    onTogglePasswordVisibility() {
+        this.isPasswordHidden = !this.isPasswordHidden;
+    }
+}
+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,
+        cuiProvide(NG_VALUE_ACCESSOR, CuiInputPasswordComponent, true)
+    ], ngImport: i0, template: "<cui-svg\n  *ngIf=\"iconLeft\"\n  [icon]=\"iconLeft\"\n  color=\"var(--cui-base-500)\"\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    color=\"var(--cui-base-500)\"\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-input);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 var(--cui-focus);border-color:var(--cui-info)}: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-danger)}: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;flex-shrink: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;flex-shrink: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$2.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$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.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,
+                        cuiProvide(NG_VALUE_ACCESSOR, CuiInputPasswordComponent, true)
+                    ], template: "<cui-svg\n  *ngIf=\"iconLeft\"\n  [icon]=\"iconLeft\"\n  color=\"var(--cui-base-500)\"\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    color=\"var(--cui-base-500)\"\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-input);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 var(--cui-focus);border-color:var(--cui-info)}: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-danger)}: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;flex-shrink: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;flex-shrink: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']
+            }], size: [{
+                type: HostBinding,
+                args: ['attr.data-size']
+            }], isError: [{
+                type: HostBinding,
+                args: ['class._with-error']
             }] } });
 
-class CuiInputPasswordModule {
-}
-CuiInputPasswordModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CuiInputPasswordModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-CuiInputPasswordModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: CuiInputPasswordModule, declarations: [CuiInputPasswordComponent], imports: [CommonModule,
-        FormsModule,
-        CuiSvgModule], exports: [CuiInputPasswordComponent,
-        CuiTextFieldControllerModule] });
-CuiInputPasswordModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CuiInputPasswordModule, imports: [CommonModule,
-        FormsModule,
-        CuiSvgModule, CuiTextFieldControllerModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CuiInputPasswordModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [
-                        CommonModule,
-                        FormsModule,
-                        CuiSvgModule
-                    ],
-                    declarations: [CuiInputPasswordComponent],
-                    exports: [
-                        CuiInputPasswordComponent,
-                        CuiTextFieldControllerModule
-                    ]
-                }]
+class CuiInputPasswordModule {
+}
+CuiInputPasswordModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CuiInputPasswordModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+CuiInputPasswordModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: CuiInputPasswordModule, declarations: [CuiInputPasswordComponent], imports: [CommonModule,
+        FormsModule,
+        CuiSvgModule], exports: [CuiInputPasswordComponent,
+        CuiTextFieldControllerModule] });
+CuiInputPasswordModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CuiInputPasswordModule, imports: [CommonModule,
+        FormsModule,
+        CuiSvgModule, CuiTextFieldControllerModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CuiInputPasswordModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        CommonModule,
+                        FormsModule,
+                        CuiSvgModule
+                    ],
+                    declarations: [CuiInputPasswordComponent],
+                    exports: [
+                        CuiInputPasswordComponent,
+                        CuiTextFieldControllerModule
+                    ]
+                }]
         }] });
 
-class CuiInputTextComponent {
-    constructor() {
-        this.changeDetectorRef = inject(ChangeDetectorRef);
-        this.cuiTextFieldController = inject(CUI_TEXT_FIELD_CONTROLLER);
-    }
-    get id() {
-        return this.cuiTextFieldController.id;
-    }
-    get placeholder() {
-        return this.cuiTextFieldController.placeholder;
-    }
-    get iconLeft() {
-        return this.cuiTextFieldController.iconLeft;
-    }
-    get isClearButtonHidden() {
-        return !(this.value && !this.isDisabled);
-    }
-    get size() {
-        return this.cuiTextFieldController.size;
-    }
-    get isError() {
-        return this.cuiTextFieldController.isError;
-    }
-    writeValue(value) {
-        this.value = value;
-        this.changeDetectorRef.markForCheck();
-    }
-    registerOnChange(fn) {
-        this.onChange = fn;
-    }
-    registerOnTouched(fn) {
-        this.onTouched = fn;
-    }
-    setDisabledState(isDisabled) {
-        this.isDisabled = isDisabled;
-        this.changeDetectorRef.markForCheck();
-    }
-    onInput({ target }) {
-        this.changeModel(target.value);
-    }
-    onClear() {
-        this.changeModel('');
-    }
-    onFocus() {
-        this.input.nativeElement.focus();
-    }
-    changeModel(value) {
-        this.value = value;
-        this.onChange(value);
-    }
-}
-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,
-        cuiProvide(NG_VALUE_ACCESSOR, CuiInputTextComponent, true)
-    ], viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true }], ngImport: i0, template: "<cui-svg\r\n  *ngIf=\"iconLeft\"\r\n  [icon]=\"iconLeft\"\r\n  color=\"var(--cui-base-500)\"\r\n></cui-svg>\r\n<input\r\n  #input\r\n  [ngModel]=\"value\"\r\n  [attr.id]=\"id\"\r\n  [attr.placeholder]=\"placeholder\"\r\n  type=\"text\"\r\n  [disabled]=\"isDisabled\"\r\n  class=\"c-input\"\r\n  (input)=\"onInput($event)\"\r\n  (focus)=\"onTouched()\"\r\n>\r\n<button\r\n  type=\"button\"\r\n  class=\"c-button\"\r\n  [class.c-button_hidden]=\"isClearButtonHidden\"\r\n  (click)=\"onClear()\"\r\n>\r\n  <cui-svg\r\n    icon=\"cuiIconClear\"\r\n    color=\"var(--cui-base-300)\"\r\n    class=\"c-close-icon\"\r\n  />\r\n</button>\r\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-input);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 var(--cui-focus);border-color:var(--cui-info)}: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-danger)}: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;flex-shrink:0;outline:none;cursor:pointer;appearance:none;color:inherit;font:inherit;background:inherit;text-decoration:none;-webkit-tap-highlight-color:transparent;display:flex}.c-close-icon ::ng-deep path{stroke:var(--cui-base-0)!important}.c-button_hidden{visibility:hidden}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$2.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$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.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,
-                        cuiProvide(NG_VALUE_ACCESSOR, CuiInputTextComponent, true)
-                    ], template: "<cui-svg\r\n  *ngIf=\"iconLeft\"\r\n  [icon]=\"iconLeft\"\r\n  color=\"var(--cui-base-500)\"\r\n></cui-svg>\r\n<input\r\n  #input\r\n  [ngModel]=\"value\"\r\n  [attr.id]=\"id\"\r\n  [attr.placeholder]=\"placeholder\"\r\n  type=\"text\"\r\n  [disabled]=\"isDisabled\"\r\n  class=\"c-input\"\r\n  (input)=\"onInput($event)\"\r\n  (focus)=\"onTouched()\"\r\n>\r\n<button\r\n  type=\"button\"\r\n  class=\"c-button\"\r\n  [class.c-button_hidden]=\"isClearButtonHidden\"\r\n  (click)=\"onClear()\"\r\n>\r\n  <cui-svg\r\n    icon=\"cuiIconClear\"\r\n    color=\"var(--cui-base-300)\"\r\n    class=\"c-close-icon\"\r\n  />\r\n</button>\r\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-input);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 var(--cui-focus);border-color:var(--cui-info)}: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-danger)}: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;flex-shrink:0;outline:none;cursor:pointer;appearance:none;color:inherit;font:inherit;background:inherit;text-decoration:none;-webkit-tap-highlight-color:transparent;display:flex}.c-close-icon ::ng-deep path{stroke:var(--cui-base-0)!important}.c-button_hidden{visibility:hidden}\n"] }]
-        }], propDecorators: { isDisabled: [{
-                type: HostBinding,
-                args: ['class._disabled']
-            }], input: [{
-                type: ViewChild,
-                args: ['input']
-            }], size: [{
-                type: HostBinding,
-                args: ['attr.data-size']
-            }], isError: [{
-                type: HostBinding,
-                args: ['class._with-error']
-            }], onFocus: [{
-                type: HostListener,
-                args: ['click']
+class CuiInputTextComponent {
+    constructor() {
+        this.changeDetectorRef = inject(ChangeDetectorRef);
+        this.cuiTextFieldController = inject(CUI_TEXT_FIELD_CONTROLLER);
+    }
+    get id() {
+        return this.cuiTextFieldController.id;
+    }
+    get placeholder() {
+        return this.cuiTextFieldController.placeholder;
+    }
+    get iconLeft() {
+        return this.cuiTextFieldController.iconLeft;
+    }
+    get isClearButtonHidden() {
+        return !(this.value && !this.isDisabled);
+    }
+    get size() {
+        return this.cuiTextFieldController.size;
+    }
+    get isError() {
+        return this.cuiTextFieldController.isError;
+    }
+    writeValue(value) {
+        this.value = value;
+        this.changeDetectorRef.markForCheck();
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.isDisabled = isDisabled;
+        this.changeDetectorRef.markForCheck();
+    }
+    onInput({ target }) {
+        this.changeModel(target.value);
+    }
+    onClear() {
+        this.changeModel('');
+    }
+    onFocus() {
+        this.input.nativeElement.focus();
+    }
+    changeModel(value) {
+        this.value = value;
+        this.onChange(value);
+    }
+}
+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,
+        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  color=\"var(--cui-base-500)\"\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  type=\"button\"\n  class=\"c-button\"\n  [class.c-button_hidden]=\"isClearButtonHidden\"\n  (click)=\"onClear()\"\n>\n  <cui-svg\n    icon=\"cuiIconClear\"\n    color=\"var(--cui-base-300)\"\n    class=\"c-close-icon\"\n  />\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-input);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 var(--cui-focus);border-color:var(--cui-info)}: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-danger)}: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;flex-shrink:0;outline:none;cursor:pointer;appearance:none;color:inherit;font:inherit;background:inherit;text-decoration:none;-webkit-tap-highlight-color:transparent;display:flex}.c-close-icon ::ng-deep path{stroke:var(--cui-base-0)!important}.c-button_hidden{visibility:hidden}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$2.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$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.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,
+                        cuiProvide(NG_VALUE_ACCESSOR, CuiInputTextComponent, true)
+                    ], template: "<cui-svg\n  *ngIf=\"iconLeft\"\n  [icon]=\"iconLeft\"\n  color=\"var(--cui-base-500)\"\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  type=\"button\"\n  class=\"c-button\"\n  [class.c-button_hidden]=\"isClearButtonHidden\"\n  (click)=\"onClear()\"\n>\n  <cui-svg\n    icon=\"cuiIconClear\"\n    color=\"var(--cui-base-300)\"\n    class=\"c-close-icon\"\n  />\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-input);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 var(--cui-focus);border-color:var(--cui-info)}: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-danger)}: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;flex-shrink:0;outline:none;cursor:pointer;appearance:none;color:inherit;font:inherit;background:inherit;text-decoration:none;-webkit-tap-highlight-color:transparent;display:flex}.c-close-icon ::ng-deep path{stroke:var(--cui-base-0)!important}.c-button_hidden{visibility:hidden}\n"] }]
+        }], propDecorators: { isDisabled: [{
+                type: HostBinding,
+                args: ['class._disabled']
+            }], input: [{
+                type: ViewChild,
+                args: ['input']
+            }], size: [{
+                type: HostBinding,
+                args: ['attr.data-size']
+            }], isError: [{
+                type: HostBinding,
+                args: ['class._with-error']
+            }], onFocus: [{
+                type: HostListener,
+                args: ['click']
             }] } });
 
-class CuiInputModule {
-}
-CuiInputModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CuiInputModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-CuiInputModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: CuiInputModule, declarations: [CuiInputTextComponent], imports: [CommonModule,
-        FormsModule,
-        CuiSvgModule], exports: [CuiInputTextComponent,
-        CuiTextFieldControllerModule] });
-CuiInputModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CuiInputModule, imports: [CommonModule,
-        FormsModule,
-        CuiSvgModule, CuiTextFieldControllerModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CuiInputModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [
-                        CommonModule,
-                        FormsModule,
-                        CuiSvgModule
-                    ],
-                    declarations: [CuiInputTextComponent],
-                    exports: [
-                        CuiInputTextComponent,
-                        CuiTextFieldControllerModule
-                    ]
-                }]
+class CuiInputModule {
+}
+CuiInputModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CuiInputModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+CuiInputModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: CuiInputModule, declarations: [CuiInputTextComponent], imports: [CommonModule,
+        FormsModule,
+        CuiSvgModule], exports: [CuiInputTextComponent,
+        CuiTextFieldControllerModule] });
+CuiInputModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CuiInputModule, imports: [CommonModule,
+        FormsModule,
+        CuiSvgModule, CuiTextFieldControllerModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CuiInputModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        CommonModule,
+                        FormsModule,
+                        CuiSvgModule
+                    ],
+                    declarations: [CuiInputTextComponent],
+                    exports: [
+                        CuiInputTextComponent,
+                        CuiTextFieldControllerModule
+                    ]
+                }]
         }] });
 
-class CuiLabelComponent {
-    constructor() {
-        this.isRequired = false;
-    }
-}
-CuiLabelComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CuiLabelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-CuiLabelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: CuiLabelComponent, selector: "label[cuiLabel]", inputs: { isRequired: "isRequired" }, ngImport: i0, template: "<span class=\"c-wrapper\">\r\n  <ng-content></ng-content>\r\n</span>\r\n<span\r\n  *ngIf=\"isRequired\"\r\n  class=\"c-star\"\r\n>\r\n  *\r\n</span>\r\n", styles: [":host{font-weight:500;font-size:14px;line-height:20px;display:inline-flex;gap:2px;cursor:pointer;width:-moz-fit-content;width:fit-content;color:var(--cui-base-900);font-family:var(--cui-main-font)}.c-wrapper{display:inline-flex;align-items:center;gap:8px}.c-star{color:var(--cui-danger)}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CuiLabelComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'label[cuiLabel]', changeDetection: ChangeDetectionStrategy.OnPush, template: "<span class=\"c-wrapper\">\r\n  <ng-content></ng-content>\r\n</span>\r\n<span\r\n  *ngIf=\"isRequired\"\r\n  class=\"c-star\"\r\n>\r\n  *\r\n</span>\r\n", styles: [":host{font-weight:500;font-size:14px;line-height:20px;display:inline-flex;gap:2px;cursor:pointer;width:-moz-fit-content;width:fit-content;color:var(--cui-base-900);font-family:var(--cui-main-font)}.c-wrapper{display:inline-flex;align-items:center;gap:8px}.c-star{color:var(--cui-danger)}\n"] }]
-        }], propDecorators: { isRequired: [{
-                type: Input
+class CuiLabelComponent {
+    constructor() {
+        this.isRequired = false;
+    }
+}
+CuiLabelComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CuiLabelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+CuiLabelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: CuiLabelComponent, selector: "label[cuiLabel]", inputs: { isRequired: "isRequired" }, ngImport: i0, template: "<span class=\"c-wrapper\">\n  <ng-content></ng-content>\n</span>\n<span\n  *ngIf=\"isRequired\"\n  class=\"c-star\"\n>\n  *\n</span>\n", styles: [":host{font-weight:500;font-size:14px;line-height:20px;display:inline-flex;gap:2px;cursor:pointer;width:-moz-fit-content;width:fit-content;color:var(--cui-base-900);font-family:var(--cui-main-font)}.c-wrapper{display:inline-flex;align-items:center;gap:8px}.c-star{color:var(--cui-danger)}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CuiLabelComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'label[cuiLabel]', changeDetection: ChangeDetectionStrategy.OnPush, template: "<span class=\"c-wrapper\">\n  <ng-content></ng-content>\n</span>\n<span\n  *ngIf=\"isRequired\"\n  class=\"c-star\"\n>\n  *\n</span>\n", styles: [":host{font-weight:500;font-size:14px;line-height:20px;display:inline-flex;gap:2px;cursor:pointer;width:-moz-fit-content;width:fit-content;color:var(--cui-base-900);font-family:var(--cui-main-font)}.c-wrapper{display:inline-flex;align-items:center;gap:8px}.c-star{color:var(--cui-danger)}\n"] }]
+        }], propDecorators: { isRequired: [{
+                type: Input
             }] } });
 
-class CuiLabelModule {
-}
-CuiLabelModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CuiLabelModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-CuiLabelModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: CuiLabelModule, declarations: [CuiLabelComponent], imports: [CommonModule], exports: [CuiLabelComponent] });
-CuiLabelModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CuiLabelModule, imports: [CommonModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CuiLabelModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [CommonModule],
-                    declarations: [CuiLabelComponent],
-                    exports: [CuiLabelComponent]
-                }]
+class CuiLabelModule {
+}
+CuiLabelModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CuiLabelModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+CuiLabelModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: CuiLabelModule, declarations: [CuiLabelComponent], imports: [CommonModule], exports: [CuiLabelComponent] });
+CuiLabelModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CuiLabelModule, imports: [CommonModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CuiLabelModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [CommonModule],
+                    declarations: [CuiLabelComponent],
+                    exports: [CuiLabelComponent]
+                }]
         }] });
 
-class CuiRadioComponent {
-}
-CuiRadioComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CuiRadioComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-CuiRadioComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: CuiRadioComponent, selector: "input[type=\"radio\"][cuiRadio]", ngImport: i0, template: '', isInline: true, styles: [":host{position:relative;width:16px;height:16px;border:1px solid var(--cui-base-200);border-radius:50%;outline:none;margin:0;appearance:none;cursor:pointer;background:var(--cui-base-0)}:host:before{content:\"\";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:10px;height:10px;border-radius:50%}:host:focus{box-shadow:0 0 0 2px var(--cui-focus)}@media (hover: hover){:host:hover{border-color:var(--cui-base-400)}}:host:active{border-color:var(--cui-base-400);box-shadow:none}:host:checked{border:2px solid var(--cui-info)}:host:checked:before{background:var(--cui-info)}:host:disabled{cursor:not-allowed;border:1px solid var(--cui-base-200);background:var(--cui-base-100)}:host:disabled:checked{border-width:2px}:host:disabled:checked:before{background:var(--cui-base-200)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CuiRadioComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'input[type="radio"][cuiRadio]', template: '', changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{position:relative;width:16px;height:16px;border:1px solid var(--cui-base-200);border-radius:50%;outline:none;margin:0;appearance:none;cursor:pointer;background:var(--cui-base-0)}:host:before{content:\"\";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:10px;height:10px;border-radius:50%}:host:focus{box-shadow:0 0 0 2px var(--cui-focus)}@media (hover: hover){:host:hover{border-color:var(--cui-base-400)}}:host:active{border-color:var(--cui-base-400);box-shadow:none}:host:checked{border:2px solid var(--cui-info)}:host:checked:before{background:var(--cui-info)}:host:disabled{cursor:not-allowed;border:1px solid var(--cui-base-200);background:var(--cui-base-100)}:host:disabled:checked{border-width:2px}:host:disabled:checked:before{background:var(--cui-base-200)}\n"] }]
+class CuiRadioComponent {
+}
+CuiRadioComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CuiRadioComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+CuiRadioComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: CuiRadioComponent, selector: "input[type=\"radio\"][cuiRadio]", ngImport: i0, template: '', isInline: true, styles: [":host{position:relative;width:16px;height:16px;border:1px solid var(--cui-base-200);border-radius:50%;outline:none;margin:0;appearance:none;cursor:pointer;background:var(--cui-base-0)}:host:before{content:\"\";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:10px;height:10px;border-radius:50%}:host:focus{box-shadow:0 0 0 2px var(--cui-focus)}@media (hover: hover){:host:hover{border-color:var(--cui-base-400)}}:host:active{border-color:var(--cui-base-400);box-shadow:none}:host:checked{border:2px solid var(--cui-info)}:host:checked:before{background:var(--cui-info)}:host:disabled{cursor:not-allowed;border:1px solid var(--cui-base-200);background:var(--cui-base-100)}:host:disabled:checked{border-width:2px}:host:disabled:checked:before{background:var(--cui-base-200)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CuiRadioComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'input[type="radio"][cuiRadio]', template: '', changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{position:relative;width:16px;height:16px;border:1px solid var(--cui-base-200);border-radius:50%;outline:none;margin:0;appearance:none;cursor:pointer;background:var(--cui-base-0)}:host:before{content:\"\";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:10px;height:10px;border-radius:50%}:host:focus{box-shadow:0 0 0 2px var(--cui-focus)}@media (hover: hover){:host:hover{border-color:var(--cui-base-400)}}:host:active{border-color:var(--cui-base-400);box-shadow:none}:host:checked{border:2px solid var(--cui-info)}:host:checked:before{background:var(--cui-info)}:host:disabled{cursor:not-allowed;border:1px solid var(--cui-base-200);background:var(--cui-base-100)}:host:disabled:checked{border-width:2px}:host:disabled:checked:before{background:var(--cui-base-200)}\n"] }]
         }] });
 
-class CuiRadioModule {
-}
-CuiRadioModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CuiRadioModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-CuiRadioModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: CuiRadioModule, declarations: [CuiRadioComponent], exports: [CuiRadioComponent] });
-CuiRadioModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CuiRadioModule });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CuiRadioModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [CuiRadioComponent],
-                    exports: [CuiRadioComponent]
-                }]
+class CuiRadioModule {
+}
+CuiRadioModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CuiRadioModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+CuiRadioModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: CuiRadioModule, declarations: [CuiRadioComponent], exports: [CuiRadioComponent] });
+CuiRadioModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CuiRadioModule });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CuiRadioModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [CuiRadioComponent],
+                    exports: [CuiRadioComponent]
+                }]
         }] });
 
-class CuiSelectComponent {
-    constructor() {
-        this.element = inject(ElementRef).nativeElement;
-        this.document = inject(DOCUMENT);
-        this.changeDetectorRef = inject(ChangeDetectorRef);
-        this.viewContainerRef = inject(ViewContainerRef);
-        this.destroy$ = inject(CuiDestroyService, { self: true });
-        this.cuiTextFieldController = inject(CUI_TEXT_FIELD_CONTROLLER);
-        this.cuiClickOutsideDirective = inject(CuiClickOutsideDirective, { self: true });
-        this.SPACE_BETWEEN_BUTTON_AND_OPTIONS = 3;
-        this.isOpened = false;
-        this.isOptionsListAbove = false;
-        this.gap = `${this.SPACE_BETWEEN_BUTTON_AND_OPTIONS}px`;
-    }
-    get id() {
-        return this.cuiTextFieldController.id;
-    }
-    get size() {
-        return this.cuiTextFieldController.size;
-    }
-    get placeholder() {
-        return this.cuiTextFieldController.placeholder;
-    }
-    get isError() {
-        return this.cuiTextFieldController.isError;
-    }
-    trackByFn(_, item) {
-        return item.label;
-    }
-    writeValue(value) {
-        var _a;
-        this.value = value;
-        // TODO: Непонятно, зачем нужно в construction вторая часть выражения
-        this.selectedOption = (_a = this.options.find(option => option.value === value)) !== null && _a !== void 0 ? _a : value;
-        this.changeDetectorRef.markForCheck();
-    }
-    registerOnChange(fn) {
-        this.onChange = fn;
-    }
-    registerOnTouched(fn) {
-        this.onTouched = fn;
-    }
-    ngOnInit() {
-        this.initClickOutsideSubscription();
-    }
-    ngOnDestroy() {
-        this.clearViewContainerRef();
-    }
-    setDisabledState(isDisabled) {
-        this.isDisabled = isDisabled;
-        this.changeDetectorRef.markForCheck();
-    }
-    onSelect(option) {
-        if (option.isDisabled) {
-            return;
-        }
-        this.value = option.value;
-        this.selectedOption = option;
-        this.onChange(this.value);
-        this.onSwitch();
-        this.onTouched();
-    }
-    onSwitch() {
-        if (!this.options.length && !this.defaultOptionText) {
-            return;
-        }
-        if (!this.isOpened) {
-            this.open();
-            return;
-        }
-        this.close();
-    }
-    onClose() {
-        this.close();
-    }
-    onWindowResize() {
-        this.button.nativeElement.blur();
-        this.close();
-    }
-    initClickOutsideSubscription() {
-        this.cuiClickOutsideDirective.cuiClickOutside
-            .pipe(takeUntil(this.destroy$))
-            .subscribe(() => {
-            if (this.isOpened) {
-                this.onTouched();
-            }
-            this.close();
-        });
-    }
-    open() {
-        this.isOpened = true;
-        const { top: elementRectTop, left: elementRectLeft, bottom: elementRectBottom } = this.element.getBoundingClientRect();
-        const distanceToBottom = this.document.documentElement.clientHeight
-            - (elementRectBottom + this.SPACE_BETWEEN_BUTTON_AND_OPTIONS);
-        const embeddedViewRef = this.viewContainerRef.createEmbeddedView(this.optionsWrapper);
-        const node = embeddedViewRef.rootNodes[0];
-        const nodeStyles = node.style;
-        this.isOptionsListAbove = distanceToBottom < this.getOptionsListHeightContainer.nativeElement.offsetHeight;
-        embeddedViewRef.detectChanges();
-        nodeStyles.width = this.element.offsetWidth + 'px';
-        nodeStyles.left = window.scrollX + elementRectLeft + 'px';
-        if (this.isOptionsListAbove) {
-            nodeStyles.top = window.scrollY + elementRectTop
-                - this.getOptionsListHeightContainer.nativeElement.offsetHeight
-                - this.SPACE_BETWEEN_BUTTON_AND_OPTIONS
-                + 'px';
-        }
-        else {
-            nodeStyles.top = window.scrollY + elementRectBottom + this.SPACE_BETWEEN_BUTTON_AND_OPTIONS + 'px';
-        }
-        this.document.querySelector(CUI_ROOT_SELECTOR).appendChild(embeddedViewRef.rootNodes[0]);
-    }
-    close() {
-        this.isOpened = false;
-        this.clearViewContainerRef();
-    }
-    clearViewContainerRef() {
-        this.viewContainerRef.clear();
-    }
-}
-CuiSelectComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CuiSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-CuiSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: CuiSelectComponent, selector: "cui-select[options]", inputs: { options: "options", defaultOptionText: "defaultOptionText" }, host: { listeners: { "window:resize": "onWindowResize()" }, properties: { "style.--c-gap": "this.gap" } }, providers: [
-        CUI_TEXT_FILED_CONTROLLER_PROVIDER,
-        cuiProvide(NG_VALUE_ACCESSOR, CuiSelectComponent, true),
-        CuiDestroyService
-    ], viewQueries: [{ propertyName: "button", first: true, predicate: ["button"], descendants: true }, { propertyName: "getOptionsListHeightContainer", first: true, predicate: ["getOptionsListHeightContainer"], descendants: true }, { propertyName: "optionsWrapper", first: true, predicate: ["optionsWrapper"], descendants: true }], hostDirectives: [{ directive: i2.CuiClickOutsideDirective }], ngImport: i0, template: "<button\r\n  #button\r\n  type=\"button\"\r\n  [attr.id]=\"id\"\r\n  [attr.data-size]=\"size\"\r\n  [disabled]=\"isDisabled\"\r\n  class=\"c-button\"\r\n  [class.c-button_active]=\"isOpened\"\r\n  [class.c-button_with-error]=\"isError\"\r\n  (click)=\"onSwitch()\"\r\n>\r\n  <ng-container *ngIf=\"selectedOption; else placeholderTemplate\">\r\n    {{ selectedOption.label }}\r\n  </ng-container>\r\n  <ng-template #placeholderTemplate>\r\n    <span class=\"c-placeholder\">{{ placeholder }}</span>\r\n  </ng-template>\r\n  <cui-svg\r\n    icon=\"cuiIconChevronDown\"\r\n    color=\"var(--cui-base-500)\"\r\n  />\r\n</button>\r\n<ng-template #optionsWrapper>\r\n  <div\r\n      class=\"c-options__wrapper\"\r\n      [class.c-options__wrapper_top]=\"isOptionsListAbove\"\r\n  >\r\n    <ng-container *ngTemplateOutlet=\"optionsList\"/>\r\n  </div>\r\n</ng-template>\r\n<div\r\n  #getOptionsListHeightContainer\r\n  class=\"c-get-options-list-height-container\"\r\n>\r\n  <ng-container *ngTemplateOutlet=\"optionsList\"/>\r\n</div>\r\n<ng-template #optionsList>\r\n  <ul\r\n    class=\"c-options\"\r\n    [class.c-options_top]=\"isOptionsListAbove\"\r\n  >\r\n    <ng-container *ngIf=\"options.length; else empty\">\r\n      <li *ngFor=\"let option of options; trackBy: trackByFn\">\r\n        <button\r\n          type=\"button\"\r\n          class=\"c-option-button\"\r\n          [class.c-option-button_selected]=\"selectedOption === option\"\r\n          [disabled]=\"option.isDisabled\"\r\n          (click)=\"onSelect(option)\"\r\n        >\r\n          <span>{{ option.label }}</span>\r\n          <cui-svg\r\n            *ngIf=\"selectedOption === option\"\r\n            icon=\"cuiIconCheckSm\"\r\n            color=\"var(--cui-info)\"\r\n            class=\"c-option-button__icon\"\r\n          />\r\n        </button>\r\n      </li>\r\n    </ng-container>\r\n    <ng-template #empty>\r\n      <li *ngIf=\"defaultOptionText\">\r\n        <button\r\n          type=\"button\"\r\n          class=\"c-option-button\"\r\n          (click)=\"onClose()\"\r\n        >\r\n          {{ defaultOptionText }}\r\n        </button>\r\n      </li>\r\n    </ng-template>\r\n  </ul>\r\n</ng-template>\r\n", styles: [":host{display:block;font-family:var(--cui-main-font);position:relative}.c-button{border:0;flex-shrink:0;outline:none;appearance:none;color:inherit;font:inherit;background:inherit;text-decoration:none;-webkit-tap-highlight-color:transparent;padding:0 13px;font-weight:400;font-size:14px;line-height:20px;display:flex;justify-content:space-between;align-items:center;gap:8px;width:100%;border:1px solid var(--cui-base-200);border-radius:8px;cursor:pointer;background:var(--cui-input);color:var(--cui-base-900);font-family:var(--cui-main-font)}.c-button:hover{border-color:var(--cui-base-300)}.c-button_active.c-button_active,.c-button:focus{box-shadow:0 0 0 2px var(--cui-focus);border-color:var(--cui-info)}.c-button:disabled{cursor:not-allowed;opacity:.5;background:var(--cui-base-50);border-color:var(--cui-base-200)}.c-button[data-size=sm]{padding-top:7px;padding-bottom:7px}.c-button[data-size=md]{padding-top:8px;padding-bottom:8px}.c-button_with-error{border-color:var(--cui-danger)}.c-button_with-error:focus{box-shadow:0 0 0 2px #d92d2040;border-color:var(--cui-danger)}.c-placeholder{color:var(--cui-base-400)}.c-options__wrapper{position:absolute;font-family:var(--cui-main-font);z-index:1}.c-get-options-list-height-container{position:fixed;visibility:hidden}.c-options{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;overflow:auto;max-height:180px;border:1px solid var(--cui-base-200);border-radius:8px;background:var(--cui-base-0);color:var(--cui-base-900)}.c-option-button{padding:8px 11px 8px 0;border:0;flex-shrink: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-option-button:active{background:var(--cui-base-50)}@media (hover: hover){.c-option-button:hover{background:var(--cui-base-50)}}.c-option-button_selected{background:var(--cui-base-50)}.c-option-button:disabled{background:unset;opacity:50%}.c-option-button__icon{margin-left:auto}\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: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { 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: CuiSelectComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'cui-select[options]', changeDetection: ChangeDetectionStrategy.OnPush, providers: [
-                        CUI_TEXT_FILED_CONTROLLER_PROVIDER,
-                        cuiProvide(NG_VALUE_ACCESSOR, CuiSelectComponent, true),
-                        CuiDestroyService
-                    ], hostDirectives: [CuiClickOutsideDirective], template: "<button\r\n  #button\r\n  type=\"button\"\r\n  [attr.id]=\"id\"\r\n  [attr.data-size]=\"size\"\r\n  [disabled]=\"isDisabled\"\r\n  class=\"c-button\"\r\n  [class.c-button_active]=\"isOpened\"\r\n  [class.c-button_with-error]=\"isError\"\r\n  (click)=\"onSwitch()\"\r\n>\r\n  <ng-container *ngIf=\"selectedOption; else placeholderTemplate\">\r\n    {{ selectedOption.label }}\r\n  </ng-container>\r\n  <ng-template #placeholderTemplate>\r\n    <span class=\"c-placeholder\">{{ placeholder }}</span>\r\n  </ng-template>\r\n  <cui-svg\r\n    icon=\"cuiIconChevronDown\"\r\n    color=\"var(--cui-base-500)\"\r\n  />\r\n</button>\r\n<ng-template #optionsWrapper>\r\n  <div\r\n      class=\"c-options__wrapper\"\r\n      [class.c-options__wrapper_top]=\"isOptionsListAbove\"\r\n  >\r\n    <ng-container *ngTemplateOutlet=\"optionsList\"/>\r\n  </div>\r\n</ng-template>\r\n<div\r\n  #getOptionsListHeightContainer\r\n  class=\"c-get-options-list-height-container\"\r\n>\r\n  <ng-container *ngTemplateOutlet=\"optionsList\"/>\r\n</div>\r\n<ng-template #optionsList>\r\n  <ul\r\n    class=\"c-options\"\r\n    [class.c-options_top]=\"isOptionsListAbove\"\r\n  >\r\n    <ng-container *ngIf=\"options.length; else empty\">\r\n      <li *ngFor=\"let option of options; trackBy: trackByFn\">\r\n        <button\r\n          type=\"button\"\r\n          class=\"c-option-button\"\r\n          [class.c-option-button_selected]=\"selectedOption === option\"\r\n          [disabled]=\"option.isDisabled\"\r\n          (click)=\"onSelect(option)\"\r\n        >\r\n          <span>{{ option.label }}</span>\r\n          <cui-svg\r\n            *ngIf=\"selectedOption === option\"\r\n            icon=\"cuiIconCheckSm\"\r\n            color=\"var(--cui-info)\"\r\n            class=\"c-option-button__icon\"\r\n          />\r\n        </button>\r\n      </li>\r\n    </ng-container>\r\n    <ng-template #empty>\r\n      <li *ngIf=\"defaultOptionText\">\r\n        <button\r\n          type=\"button\"\r\n          class=\"c-option-button\"\r\n          (click)=\"onClose()\"\r\n        >\r\n          {{ defaultOptionText }}\r\n        </button>\r\n      </li>\r\n    </ng-template>\r\n  </ul>\r\n</ng-template>\r\n", styles: [":host{display:block;font-family:var(--cui-main-font);position:relative}.c-button{border:0;flex-shrink:0;outline:none;appearance:none;color:inherit;font:inherit;background:inherit;text-decoration:none;-webkit-tap-highlight-color:transparent;padding:0 13px;font-weight:400;font-size:14px;line-height:20px;display:flex;justify-content:space-between;align-items:center;gap:8px;width:100%;border:1px solid var(--cui-base-200);border-radius:8px;cursor:pointer;background:var(--cui-input);color:var(--cui-base-900);font-family:var(--cui-main-font)}.c-button:hover{border-color:var(--cui-base-300)}.c-button_active.c-button_active,.c-button:focus{box-shadow:0 0 0 2px var(--cui-focus);border-color:var(--cui-info)}.c-button:disabled{cursor:not-allowed;opacity:.5;background:var(--cui-base-50);border-color:var(--cui-base-200)}.c-button[data-size=sm]{padding-top:7px;padding-bottom:7px}.c-button[data-size=md]{padding-top:8px;padding-bottom:8px}.c-button_with-error{border-color:var(--cui-danger)}.c-button_with-error:focus{box-shadow:0 0 0 2px #d92d2040;border-color:var(--cui-danger)}.c-placeholder{color:var(--cui-base-400)}.c-options__wrapper{position:absolute;font-family:var(--cui-main-font);z-index:1}.c-get-options-list-height-container{position:fixed;visibility:hidden}.c-options{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;overflow:auto;max-height:180px;border:1px solid var(--cui-base-200);border-radius:8px;background:var(--cui-base-0);color:var(--cui-base-900)}.c-option-button{padding:8px 11px 8px 0;border:0;flex-shrink: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-option-button:active{background:var(--cui-base-50)}@media (hover: hover){.c-option-button:hover{background:var(--cui-base-50)}}.c-option-button_selected{background:var(--cui-base-50)}.c-option-button:disabled{background:unset;opacity:50%}.c-option-button__icon{margin-left:auto}\n"] }]
-        }], propDecorators: { options: [{
-                type: Input
-            }], defaultOptionText: [{
-                type: Input
-            }], button: [{
-                type: ViewChild,
-                args: ['button']
-            }], getOptionsListHeightContainer: [{
-                type: ViewChild,
-                args: ['getOptionsListHeightContainer']
-            }], optionsWrapper: [{
-                type: ViewChild,
-                args: ['optionsWrapper']
-            }], gap: [{
-                type: HostBinding,
-                args: ['style.--c-gap']
-            }], onWindowResize: [{
-                type: HostListener,
-                args: ['window:resize']
+class CuiSelectComponent {
+    constructor() {
+        this.element = inject(ElementRef).nativeElement;
+        this.document = inject(DOCUMENT);
+        this.changeDetectorRef = inject(ChangeDetectorRef);
+        this.viewContainerRef = inject(ViewContainerRef);
+        this.destroy$ = inject(CuiDestroyService, { self: true });
+        this.cuiTextFieldController = inject(CUI_TEXT_FIELD_CONTROLLER);
+        this.cuiClickOutsideDirective = inject(CuiClickOutsideDirective, { self: true });
+        this.SPACE_BETWEEN_BUTTON_AND_OPTIONS = 3;
+        this.isOpened = false;
+        this.isOptionsListAbove = false;
+        this.gap = `${this.SPACE_BETWEEN_BUTTON_AND_OPTIONS}px`;
+    }
+    get id() {
+        return this.cuiTextFieldController.id;
+    }
+    get size() {
+        return this.cuiTextFieldController.size;
+    }
+    get placeholder() {
+        return this.cuiTextFieldController.placeholder;
+    }
+    get isError() {
+        return this.cuiTextFieldController.isError;
+    }
+    trackByFn(_, item) {
+        return item.label;
+    }
+    writeValue(value) {
+        var _a;
+        this.value = value;
+        // TODO: Непонятно, зачем нужно в construction вторая часть выражения
+        this.selectedOption = (_a = this.options.find(option => option.value === value)) !== null && _a !== void 0 ? _a : value;
+        this.changeDetectorRef.markForCheck();
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    ngOnInit() {
+        this.initClickOutsideSubscription();
+    }
+    ngOnDestroy() {
+        this.clearViewContainerRef();
+    }
+    setDisabledState(isDisabled) {
+        this.isDisabled = isDisabled;
+        this.changeDetectorRef.markForCheck();
+    }
+    onSelect(option) {
+        if (option.isDisabled) {
+            return;
+        }
+        this.value = option.value;
+        this.selectedOption = option;
+        this.onChange(this.value);
+        this.onSwitch();
+        this.onTouched();
+    }
+    onSwitch() {
+        if (!this.options.length && !this.defaultOptionText) {
+            return;
+        }
+        if (!this.isOpened) {
+            this.open();
+            return;
+        }
+        this.close();
+    }
+    onClose() {
+        this.close();
+    }
+    onWindowResize() {
+        this.button.nativeElement.blur();
+        this.close();
+    }
+    initClickOutsideSubscription() {
+        this.cuiClickOutsideDirective.cuiClickOutside
+            .pipe(takeUntil(this.destroy$))
+            .subscribe(() => {
+            if (this.isOpened) {
+                this.onTouched();
+            }
+            this.close();
+        });
+    }
+    open() {
+        this.isOpened = true;
+        const { top: elementRectTop, left: elementRectLeft, bottom: elementRectBottom } = this.element.getBoundingClientRect();
+        const distanceToBottom = this.document.documentElement.clientHeight
+            - (elementRectBottom + this.SPACE_BETWEEN_BUTTON_AND_OPTIONS);
+        const embeddedViewRef = this.viewContainerRef.createEmbeddedView(this.optionsWrapper);
+        const node = embeddedViewRef.rootNodes[0];
+        const nodeStyles = node.style;
+        this.isOptionsListAbove = distanceToBottom < this.getOptionsListHeightContainer.nativeElement.offsetHeight;
+        embeddedViewRef.detectChanges();
+        nodeStyles.width = this.element.offsetWidth + 'px';
+        nodeStyles.left = window.scrollX + elementRectLeft + 'px';
+        if (this.isOptionsListAbove) {
+            nodeStyles.top = window.scrollY + elementRectTop
+                - this.getOptionsListHeightContainer.nativeElement.offsetHeight
+                - this.SPACE_BETWEEN_BUTTON_AND_OPTIONS
+                + 'px';
+        }
+        else {
+            nodeStyles.top = window.scrollY + elementRectBottom + this.SPACE_BETWEEN_BUTTON_AND_OPTIONS + 'px';
+        }
+        this.document.querySelector(CUI_ROOT_SELECTOR).appendChild(embeddedViewRef.rootNodes[0]);
+    }
+    close() {
+        this.isOpened = false;
+        this.clearViewContainerRef();
+    }
+    clearViewContainerRef() {
+        this.viewContainerRef.clear();
+    }
+}
+CuiSelectComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CuiSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+CuiSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: CuiSelectComponent, selector: "cui-select[options]", inputs: { options: "options", defaultOptionText: "defaultOptionText" }, host: { listeners: { "window:resize": "onWindowResize()" }, properties: { "style.--c-gap": "this.gap" } }, providers: [
+        CUI_TEXT_FILED_CONTROLLER_PROVIDER,
+        cuiProvide(NG_VALUE_ACCESSOR, CuiSelectComponent, true),
+        CuiDestroyService
+    ], viewQueries: [{ propertyName: "button", first: true, predicate: ["button"], descendants: true }, { propertyName: "getOptionsListHeightContainer", first: true, predicate: ["getOptionsListHeightContainer"], descendants: true }, { propertyName: "optionsWrapper", first: true, predicate: ["optionsWrapper"], descendants: true }], hostDirectives: [{ directive: i2.CuiClickOutsideDirective }], ngImport: i0, template: "<button\n  #button\n  type=\"button\"\n  [attr.id]=\"id\"\n  [attr.data-size]=\"size\"\n  [disabled]=\"isDisabled\"\n  class=\"c-button\"\n  [class.c-button_active]=\"isOpened\"\n  [class.c-button_with-error]=\"isError\"\n  (click)=\"onSwitch()\"\n>\n  <ng-container *ngIf=\"selectedOption; else placeholderTemplate\">\n    {{ selectedOption.label }}\n  </ng-container>\n  <ng-template #placeholderTemplate>\n    <span class=\"c-placeholder\">{{ placeholder }}</span>\n  </ng-template>\n  <cui-svg\n    icon=\"cuiIconChevronDown\"\n    color=\"var(--cui-base-500)\"\n  />\n</button>\n<ng-template #optionsWrapper>\n  <div\n      class=\"c-options__wrapper\"\n      [class.c-options__wrapper_top]=\"isOptionsListAbove\"\n  >\n    <ng-container *ngTemplateOutlet=\"optionsList\"/>\n  </div>\n</ng-template>\n<div\n  #getOptionsListHeightContainer\n  class=\"c-get-options-list-height-container\"\n>\n  <ng-container *ngTemplateOutlet=\"optionsList\"/>\n</div>\n<ng-template #optionsList>\n  <ul\n    class=\"c-options\"\n    [class.c-options_top]=\"isOptionsListAbove\"\n  >\n    <ng-container *ngIf=\"options.length; else empty\">\n      <li *ngFor=\"let option of options; trackBy: trackByFn\">\n        <button\n          type=\"button\"\n          class=\"c-option-button\"\n          [class.c-option-button_selected]=\"selectedOption === option\"\n          [disabled]=\"option.isDisabled\"\n          (click)=\"onSelect(option)\"\n        >\n          <span>{{ option.label }}</span>\n          <cui-svg\n            *ngIf=\"selectedOption === option\"\n            icon=\"cuiIconCheckSm\"\n            color=\"var(--cui-info)\"\n            class=\"c-option-button__icon\"\n          />\n        </button>\n      </li>\n    </ng-container>\n    <ng-template #empty>\n      <li *ngIf=\"defaultOptionText\">\n        <button\n          type=\"button\"\n          class=\"c-option-button\"\n          (click)=\"onClose()\"\n        >\n          {{ defaultOptionText }}\n        </button>\n      </li>\n    </ng-template>\n  </ul>\n</ng-template>\n", styles: [":host{display:block;font-family:var(--cui-main-font);position:relative}.c-button{border:0;flex-shrink:0;outline:none;appearance:none;color:inherit;font:inherit;background:inherit;text-decoration:none;-webkit-tap-highlight-color:transparent;padding:0 13px;font-weight:400;font-size:14px;line-height:20px;display:flex;justify-content:space-between;align-items:center;gap:8px;width:100%;border:1px solid var(--cui-base-200);border-radius:8px;cursor:pointer;background:var(--cui-input);color:var(--cui-base-900);font-family:var(--cui-main-font)}.c-button:hover{border-color:var(--cui-base-300)}.c-button_active.c-button_active,.c-button:focus{box-shadow:0 0 0 2px var(--cui-focus);border-color:var(--cui-info)}.c-button:disabled{cursor:not-allowed;opacity:.5;background:var(--cui-base-50);border-color:var(--cui-base-200)}.c-button[data-size=sm]{padding-top:7px;padding-bottom:7px}.c-button[data-size=md]{padding-top:8px;padding-bottom:8px}.c-button_with-error{border-color:var(--cui-danger)}.c-button_with-error:focus{box-shadow:0 0 0 2px #d92d2040;border-color:var(--cui-danger)}.c-placeholder{color:var(--cui-base-400)}.c-options__wrapper{position:absolute;font-family:var(--cui-main-font);z-index:1}.c-get-options-list-height-container{position:fixed;visibility:hidden}.c-options{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;overflow:auto;max-height:180px;border:1px solid var(--cui-base-200);border-radius:8px;background:var(--cui-base-0);color:var(--cui-base-900)}.c-option-button{padding:8px 11px 8px 0;border:0;flex-shrink: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-option-button:active{background:var(--cui-base-50)}@media (hover: hover){.c-option-button:hover{background:var(--cui-base-50)}}.c-option-button_selected{background:var(--cui-base-50)}.c-option-button:disabled{background:unset;opacity:50%}.c-option-button__icon{margin-left:auto}\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: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { 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: CuiSelectComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'cui-select[options]', changeDetection: ChangeDetectionStrategy.OnPush, providers: [
+                        CUI_TEXT_FILED_CONTROLLER_PROVIDER,
+                        cuiProvide(NG_VALUE_ACCESSOR, CuiSelectComponent, true),
+                        CuiDestroyService
+                    ], hostDirectives: [CuiClickOutsideDirective], template: "<button\n  #button\n  type=\"button\"\n  [attr.id]=\"id\"\n  [attr.data-size]=\"size\"\n  [disabled]=\"isDisabled\"\n  class=\"c-button\"\n  [class.c-button_active]=\"isOpened\"\n  [class.c-button_with-error]=\"isError\"\n  (click)=\"onSwitch()\"\n>\n  <ng-container *ngIf=\"selectedOption; else placeholderTemplate\">\n    {{ selectedOption.label }}\n  </ng-container>\n  <ng-template #placeholderTemplate>\n    <span class=\"c-placeholder\">{{ placeholder }}</span>\n  </ng-template>\n  <cui-svg\n    icon=\"cuiIconChevronDown\"\n    color=\"var(--cui-base-500)\"\n  />\n</button>\n<ng-template #optionsWrapper>\n  <div\n      class=\"c-options__wrapper\"\n      [class.c-options__wrapper_top]=\"isOptionsListAbove\"\n  >\n    <ng-container *ngTemplateOutlet=\"optionsList\"/>\n  </div>\n</ng-template>\n<div\n  #getOptionsListHeightContainer\n  class=\"c-get-options-list-height-container\"\n>\n  <ng-container *ngTemplateOutlet=\"optionsList\"/>\n</div>\n<ng-template #optionsList>\n  <ul\n    class=\"c-options\"\n    [class.c-options_top]=\"isOptionsListAbove\"\n  >\n    <ng-container *ngIf=\"options.length; else empty\">\n      <li *ngFor=\"let option of options; trackBy: trackByFn\">\n        <button\n          type=\"button\"\n          class=\"c-option-button\"\n          [class.c-option-button_selected]=\"selectedOption === option\"\n          [disabled]=\"option.isDisabled\"\n          (click)=\"onSelect(option)\"\n        >\n          <span>{{ option.label }}</span>\n          <cui-svg\n            *ngIf=\"selectedOption === option\"\n            icon=\"cuiIconCheckSm\"\n            color=\"var(--cui-info)\"\n            class=\"c-option-button__icon\"\n          />\n        </button>\n      </li>\n    </ng-container>\n    <ng-template #empty>\n      <li *ngIf=\"defaultOptionText\">\n        <button\n          type=\"button\"\n          class=\"c-option-button\"\n          (click)=\"onClose()\"\n        >\n          {{ defaultOptionText }}\n        </button>\n      </li>\n    </ng-template>\n  </ul>\n</ng-template>\n", styles: [":host{display:block;font-family:var(--cui-main-font);position:relative}.c-button{border:0;flex-shrink:0;outline:none;appearance:none;color:inherit;font:inherit;background:inherit;text-decoration:none;-webkit-tap-highlight-color:transparent;padding:0 13px;font-weight:400;font-size:14px;line-height:20px;display:flex;justify-content:space-between;align-items:center;gap:8px;width:100%;border:1px solid var(--cui-base-200);border-radius:8px;cursor:pointer;background:var(--cui-input);color:var(--cui-base-900);font-family:var(--cui-main-font)}.c-button:hover{border-color:var(--cui-base-300)}.c-button_active.c-button_active,.c-button:focus{box-shadow:0 0 0 2px var(--cui-focus);border-color:var(--cui-info)}.c-button:disabled{cursor:not-allowed;opacity:.5;background:var(--cui-base-50);border-color:var(--cui-base-200)}.c-button[data-size=sm]{padding-top:7px;padding-bottom:7px}.c-button[data-size=md]{padding-top:8px;padding-bottom:8px}.c-button_with-error{border-color:var(--cui-danger)}.c-button_with-error:focus{box-shadow:0 0 0 2px #d92d2040;border-color:var(--cui-danger)}.c-placeholder{color:var(--cui-base-400)}.c-options__wrapper{position:absolute;font-family:var(--cui-main-font);z-index:1}.c-get-options-list-height-container{position:fixed;visibility:hidden}.c-options{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;overflow:auto;max-height:180px;border:1px solid var(--cui-base-200);border-radius:8px;background:var(--cui-base-0);color:var(--cui-base-900)}.c-option-button{padding:8px 11px 8px 0;border:0;flex-shrink: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-option-button:active{background:var(--cui-base-50)}@media (hover: hover){.c-option-button:hover{background:var(--cui-base-50)}}.c-option-button_selected{background:var(--cui-base-50)}.c-option-button:disabled{background:unset;opacity:50%}.c-option-button__icon{margin-left:auto}\n"] }]
+        }], propDecorators: { options: [{
+                type: Input
+            }], defaultOptionText: [{
+                type: Input
+            }], button: [{
+                type: ViewChild,
+                args: ['button']
+            }], getOptionsListHeightContainer: [{
+                type: ViewChild,
+                args: ['getOptionsListHeightContainer']
+            }], optionsWrapper: [{
+                type: ViewChild,
+                args: ['optionsWrapper']
+            }], gap: [{
+                type: HostBinding,
+                args: ['style.--c-gap']
+            }], onWindowResize: [{
+                type: HostListener,
+                args: ['window:resize']
             }] } });
 
-class CuiSelectModule {
-}
-CuiSelectModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CuiSelectModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-CuiSelectModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: CuiSelectModule, declarations: [CuiSelectComponent], imports: [CommonModule,
-        CuiSvgModule], exports: [CuiSelectComponent,
-        CuiTextFieldControllerModule] });
-CuiSelectModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CuiSelectModule, imports: [CommonModule,
-        CuiSvgModule, CuiTextFieldControllerModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CuiSelectModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [
-                        CommonModule,
-                        CuiSvgModule
-                    ],
-                    declarations: [CuiSelectComponent],
-                    exports: [
-                        CuiSelectComponent,
-                        CuiTextFieldControllerModule
-                    ]
-                }]
+class CuiSelectModule {
+}
+CuiSelectModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CuiSelectModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+CuiSelectModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: CuiSelectModule, declarations: [CuiSelectComponent], imports: [CommonModule,
+        CuiSvgModule], exports: [CuiSelectComponent,
+        CuiTextFieldControllerModule] });
+CuiSelectModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CuiSelectModule, imports: [CommonModule,
+        CuiSvgModule, CuiTextFieldControllerModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CuiSelectModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        CommonModule,
+                        CuiSvgModule
+                    ],
+                    declarations: [CuiSelectComponent],
+                    exports: [
+                        CuiSelectComponent,
+                        CuiTextFieldControllerModule
+                    ]
+                }]
         }] });
 
-const CUI_TAB_ACTIVATE = 'cui-tab-activate';
-class CuiTabComponent {
-    constructor() {
-        this.element = inject(ElementRef).nativeElement;
-    }
-    onClick() {
-        this.element.dispatchEvent(new CustomEvent(CUI_TAB_ACTIVATE, { bubbles: true }));
-    }
-}
-CuiTabComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CuiTabComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-CuiTabComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: CuiTabComponent, selector: "button[cuiTab]", host: { listeners: { "click": "onClick()" } }, ngImport: i0, template: "<ng-content />\r\n", styles: [":host{padding:0;border:0;flex-shrink:0;outline:none;cursor:pointer;appearance:none;color:inherit;font:inherit;background:inherit;text-decoration:none;-webkit-tap-highlight-color:transparent;font-family:var(--cui-main-font)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CuiTabComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'button[cuiTab]', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content />\r\n", styles: [":host{padding:0;border:0;flex-shrink:0;outline:none;cursor:pointer;appearance:none;color:inherit;font:inherit;background:inherit;text-decoration:none;-webkit-tap-highlight-color:transparent;font-family:var(--cui-main-font)}\n"] }]
-        }], propDecorators: { onClick: [{
-                type: HostListener,
-                args: ['click']
+const CUI_TAB_ACTIVATE = 'cui-tab-activate';
+class CuiTabComponent {
+    constructor() {
+        this.element = inject(ElementRef).nativeElement;
+    }
+    onClick() {
+        this.element.dispatchEvent(new CustomEvent(CUI_TAB_ACTIVATE, { bubbles: true }));
+    }
+}
+CuiTabComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CuiTabComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+CuiTabComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: CuiTabComponent, selector: "button[cuiTab]", host: { listeners: { "click": "onClick()" } }, ngImport: i0, template: "<ng-content />\n", styles: [":host{padding:0;border:0;flex-shrink:0;outline:none;cursor:pointer;appearance:none;color:inherit;font:inherit;background:inherit;text-decoration:none;-webkit-tap-highlight-color:transparent;font-family:var(--cui-main-font)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CuiTabComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'button[cuiTab]', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content />\n", styles: [":host{padding:0;border:0;flex-shrink:0;outline:none;cursor:pointer;appearance:none;color:inherit;font:inherit;background:inherit;text-decoration:none;-webkit-tap-highlight-color:transparent;font-family:var(--cui-main-font)}\n"] }]
+        }], propDecorators: { onClick: [{
+                type: HostListener,
+                args: ['click']
             }] } });
 
-class CuiTabsComponent {
-    constructor() {
-        this.element = inject(ElementRef).nativeElement;
-        this.activeElementClass = '_active';
-        this.activeItemIndex = 0;
-        this.activeItemIndexChange = new EventEmitter();
-    }
-    get tabs() {
-        return Array.from(this.element.querySelectorAll('[cuiTab]'));
-    }
-    get activeElement() {
-        return this.tabs[this.activeItemIndex] || null;
-    }
-    ngAfterViewChecked() {
-        this.changeActiveItem();
-    }
-    onActivate(event) {
-        event.stopPropagation();
-        const index = this.tabs.findIndex((tab) => tab === event.target);
-        if (index === this.activeItemIndex) {
-            return;
-        }
-        this.activeItemIndexChange.emit(index);
-        this.activeItemIndex = index;
-    }
-    changeActiveItem() {
-        this.tabs.forEach(nativeElement => {
-            const active = nativeElement === this.activeElement;
-            nativeElement.classList.toggle(this.activeElementClass, active);
-        });
-    }
-}
-CuiTabsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CuiTabsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-CuiTabsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: CuiTabsComponent, selector: "cui-tabs", inputs: { activeItemIndex: "activeItemIndex" }, outputs: { activeItemIndexChange: "activeItemIndexChange" }, host: { listeners: { "cui-tab-activate": "onActivate($event)" } }, ngImport: i0, template: "<ng-content select=\"[cuiTab]\" />\r\n", styles: [":host{display:flex;border-radius:8px;gap:32px}:host ::ng-deep>[cuiTab]{padding:8px 12px;font-weight:500;font-size:14px;line-height:20px;color:var(--cui-base-500);border-radius:6px}@media (hover: hover){:host ::ng-deep>[cuiTab]:hover{color:var(--cui-base-900);background:var(--cui-base-50)}}:host ::ng-deep>[cuiTab]:active{color:var(--cui-base-900);background:var(--cui-base-50)}:host ::ng-deep>[cuiTab]._active{color:var(--cui-light-blue-600);background:var(--cui-base-50)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CuiTabsComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'cui-tabs', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content select=\"[cuiTab]\" />\r\n", styles: [":host{display:flex;border-radius:8px;gap:32px}:host ::ng-deep>[cuiTab]{padding:8px 12px;font-weight:500;font-size:14px;line-height:20px;color:var(--cui-base-500);border-radius:6px}@media (hover: hover){:host ::ng-deep>[cuiTab]:hover{color:var(--cui-base-900);background:var(--cui-base-50)}}:host ::ng-deep>[cuiTab]:active{color:var(--cui-base-900);background:var(--cui-base-50)}:host ::ng-deep>[cuiTab]._active{color:var(--cui-light-blue-600);background:var(--cui-base-50)}\n"] }]
-        }], propDecorators: { activeItemIndex: [{
-                type: Input
-            }], activeItemIndexChange: [{
-                type: Output
-            }], onActivate: [{
-                type: HostListener,
-                args: [CUI_TAB_ACTIVATE, ['$event']]
+class CuiTabsComponent {
+    constructor() {
+        this.element = inject(ElementRef).nativeElement;
+        this.activeElementClass = '_active';
+        this.activeItemIndex = 0;
+        this.activeItemIndexChange = new EventEmitter();
+    }
+    get tabs() {
+        return Array.from(this.element.querySelectorAll('[cuiTab]'));
+    }
+    get activeElement() {
+        return this.tabs[this.activeItemIndex] || null;
+    }
+    ngAfterViewChecked() {
+        this.changeActiveItem();
+    }
+    onActivate(event) {
+        event.stopPropagation();
+        const index = this.tabs.findIndex((tab) => tab === event.target);
+        if (index === this.activeItemIndex) {
+            return;
+        }
+        this.activeItemIndexChange.emit(index);
+        this.activeItemIndex = index;
+    }
+    changeActiveItem() {
+        this.tabs.forEach(nativeElement => {
+            const active = nativeElement === this.activeElement;
+            nativeElement.classList.toggle(this.activeElementClass, active);
+        });
+    }
+}
+CuiTabsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CuiTabsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+CuiTabsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: CuiTabsComponent, selector: "cui-tabs", inputs: { activeItemIndex: "activeItemIndex" }, outputs: { activeItemIndexChange: "activeItemIndexChange" }, host: { listeners: { "cui-tab-activate": "onActivate($event)" } }, ngImport: i0, template: "<ng-content select=\"[cuiTab]\" />\n", styles: [":host{display:flex;border-radius:8px;gap:32px}:host ::ng-deep>[cuiTab]{padding:8px 12px;font-weight:500;font-size:14px;line-height:20px;color:var(--cui-base-500);border-radius:6px}@media (hover: hover){:host ::ng-deep>[cuiTab]:hover{color:var(--cui-base-900);background:var(--cui-base-50)}}:host ::ng-deep>[cuiTab]:active{color:var(--cui-base-900);background:var(--cui-base-50)}:host ::ng-deep>[cuiTab]._active{color:var(--cui-light-blue-600);background:var(--cui-base-50)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CuiTabsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'cui-tabs', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content select=\"[cuiTab]\" />\n", styles: [":host{display:flex;border-radius:8px;gap:32px}:host ::ng-deep>[cuiTab]{padding:8px 12px;font-weight:500;font-size:14px;line-height:20px;color:var(--cui-base-500);border-radius:6px}@media (hover: hover){:host ::ng-deep>[cuiTab]:hover{color:var(--cui-base-900);background:var(--cui-base-50)}}:host ::ng-deep>[cuiTab]:active{color:var(--cui-base-900);background:var(--cui-base-50)}:host ::ng-deep>[cuiTab]._active{color:var(--cui-light-blue-600);background:var(--cui-base-50)}\n"] }]
+        }], propDecorators: { activeItemIndex: [{
+                type: Input
+            }], activeItemIndexChange: [{
+                type: Output
+            }], onActivate: [{
+                type: HostListener,
+                args: [CUI_TAB_ACTIVATE, ['$event']]
             }] } });
 
-class CuiTabsModule {
-}
-CuiTabsModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CuiTabsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-CuiTabsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: CuiTabsModule, declarations: [CuiTabsComponent, CuiTabComponent], exports: [CuiTabsComponent, CuiTabComponent] });
-CuiTabsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CuiTabsModule });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CuiTabsModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [],
-                    declarations: [CuiTabsComponent, CuiTabComponent],
-                    exports: [CuiTabsComponent, CuiTabComponent]
-                }]
+class CuiTabsModule {
+}
+CuiTabsModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CuiTabsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+CuiTabsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: CuiTabsModule, declarations: [CuiTabsComponent, CuiTabComponent], exports: [CuiTabsComponent, CuiTabComponent] });
+CuiTabsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CuiTabsModule });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CuiTabsModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [],
+                    declarations: [CuiTabsComponent, CuiTabComponent],
+                    exports: [CuiTabsComponent, CuiTabComponent]
+                }]
         }] });
 
-class CuiTextareaComponent {
-    constructor() {
-        this.cuiTextFieldController = inject(CUI_TEXT_FIELD_CONTROLLER);
-        this.rows = 4;
-        this.noBordersAndPaddings = false;
-    }
-    get isError() {
-        return this.cuiTextFieldController.isError;
-    }
-}
-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", noBordersAndPaddings: "noBordersAndPaddings" }, host: { properties: { "rows": "this.rows", "class._no-borders-and-paddings": "this.noBordersAndPaddings", "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;max-height:320px;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,:host:focus-visible{box-shadow:0 0 0 2px var(--cui-focus);border-color:var(--cui-info)}: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._no-borders-and-paddings{border:none;border-radius:0;padding:0;box-shadow:none}:host._no-borders-and-paddings:disabled{background:none}:host._with-error{border-color:var(--cui-danger)}:host._with-error:focus{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;max-height:320px;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,:host:focus-visible{box-shadow:0 0 0 2px var(--cui-focus);border-color:var(--cui-info)}: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._no-borders-and-paddings{border:none;border-radius:0;padding:0;box-shadow:none}:host._no-borders-and-paddings:disabled{background:none}:host._with-error{border-color:var(--cui-danger)}:host._with-error:focus{box-shadow:0 0 0 2px #d92d2040}\n"] }]
-        }], propDecorators: { rows: [{
-                type: Input
-            }, {
-                type: HostBinding,
-                args: ['rows']
-            }], noBordersAndPaddings: [{
-                type: Input
-            }, {
-                type: HostBinding,
-                args: ['class._no-borders-and-paddings']
-            }], isError: [{
-                type: HostBinding,
-                args: ['class._with-error']
+class CuiTextareaComponent {
+    constructor() {
+        this.cuiTextFieldController = inject(CUI_TEXT_FIELD_CONTROLLER);
+        this.rows = 4;
+        this.noBordersAndPaddings = false;
+    }
+    get isError() {
+        return this.cuiTextFieldController.isError;
+    }
+}
+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", noBordersAndPaddings: "noBordersAndPaddings" }, host: { properties: { "rows": "this.rows", "class._no-borders-and-paddings": "this.noBordersAndPaddings", "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;max-height:320px;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,:host:focus-visible{box-shadow:0 0 0 2px var(--cui-focus);border-color:var(--cui-info)}: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._no-borders-and-paddings{border:none;border-radius:0;padding:0;box-shadow:none}:host._no-borders-and-paddings:disabled{background:none}:host._with-error{border-color:var(--cui-danger)}:host._with-error:focus{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;max-height:320px;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,:host:focus-visible{box-shadow:0 0 0 2px var(--cui-focus);border-color:var(--cui-info)}: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._no-borders-and-paddings{border:none;border-radius:0;padding:0;box-shadow:none}:host._no-borders-and-paddings:disabled{background:none}:host._with-error{border-color:var(--cui-danger)}:host._with-error:focus{box-shadow:0 0 0 2px #d92d2040}\n"] }]
+        }], propDecorators: { rows: [{
+                type: Input
+            }, {
+                type: HostBinding,
+                args: ['rows']
+            }], noBordersAndPaddings: [{
+                type: Input
+            }, {
+                type: HostBinding,
+                args: ['class._no-borders-and-paddings']
+            }], isError: [{
+                type: HostBinding,
+                args: ['class._with-error']
             }] } });
 
-class CuiTextareaModule {
-}
-CuiTextareaModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CuiTextareaModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-CuiTextareaModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: CuiTextareaModule, declarations: [CuiTextareaComponent], exports: [CuiTextareaComponent] });
-CuiTextareaModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CuiTextareaModule });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CuiTextareaModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [CuiTextareaComponent],
-                    exports: [CuiTextareaComponent]
-                }]
+class CuiTextareaModule {
+}
+CuiTextareaModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CuiTextareaModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+CuiTextareaModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: CuiTextareaModule, declarations: [CuiTextareaComponent], exports: [CuiTextareaComponent] });
+CuiTextareaModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CuiTextareaModule });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CuiTextareaModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [CuiTextareaComponent],
+                    exports: [CuiTextareaComponent]
+                }]
         }] });
 
-class CuiToggleComponent {
-}
-CuiToggleComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CuiToggleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-CuiToggleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: CuiToggleComponent, selector: "input[type=\"checkbox\"][cuiToggle]", ngImport: i0, template: '', isInline: true, styles: [":host{position:relative;width:30px;height:18px;border-radius:9px;margin:0;appearance:none;cursor:pointer;background:var(--cui-base-300);transition:background .5s ease}:host:before{content:\"\";position:absolute;top:50%;left:2px;transform:translateY(-50%);width:14px;height:14px;border-radius:50%;background:var(--cui-gray-0);transition:left .5s ease}:host:checked{background:var(--cui-info);transition:background .5s ease}:host:checked:before{left:14px;transition:left .5s ease}:host:disabled{cursor:not-allowed;background:var(--cui-base-300)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CuiToggleComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'input[type="checkbox"][cuiToggle]', template: '', changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{position:relative;width:30px;height:18px;border-radius:9px;margin:0;appearance:none;cursor:pointer;background:var(--cui-base-300);transition:background .5s ease}:host:before{content:\"\";position:absolute;top:50%;left:2px;transform:translateY(-50%);width:14px;height:14px;border-radius:50%;background:var(--cui-gray-0);transition:left .5s ease}:host:checked{background:var(--cui-info);transition:background .5s ease}:host:checked:before{left:14px;transition:left .5s ease}:host:disabled{cursor:not-allowed;background:var(--cui-base-300)}\n"] }]
+class CuiToggleComponent {
+}
+CuiToggleComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CuiToggleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+CuiToggleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: CuiToggleComponent, selector: "input[type=\"checkbox\"][cuiToggle]", ngImport: i0, template: '', isInline: true, styles: [":host{position:relative;width:30px;height:18px;border-radius:9px;margin:0;appearance:none;cursor:pointer;background:var(--cui-base-300);transition:background .5s ease}:host:before{content:\"\";position:absolute;top:50%;left:2px;transform:translateY(-50%);width:14px;height:14px;border-radius:50%;background:var(--cui-gray-0);transition:left .5s ease}:host:checked{background:var(--cui-info);transition:background .5s ease}:host:checked:before{left:14px;transition:left .5s ease}:host:disabled{cursor:not-allowed;background:var(--cui-base-300)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CuiToggleComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'input[type="checkbox"][cuiToggle]', template: '', changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{position:relative;width:30px;height:18px;border-radius:9px;margin:0;appearance:none;cursor:pointer;background:var(--cui-base-300);transition:background .5s ease}:host:before{content:\"\";position:absolute;top:50%;left:2px;transform:translateY(-50%);width:14px;height:14px;border-radius:50%;background:var(--cui-gray-0);transition:left .5s ease}:host:checked{background:var(--cui-info);transition:background .5s ease}:host:checked:before{left:14px;transition:left .5s ease}:host:disabled{cursor:not-allowed;background:var(--cui-base-300)}\n"] }]
         }] });
 
-class CuiToggleModule {
-}
-CuiToggleModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CuiToggleModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-CuiToggleModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: CuiToggleModule, declarations: [CuiToggleComponent], exports: [CuiToggleComponent] });
-CuiToggleModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CuiToggleModule });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CuiToggleModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [CuiToggleComponent],
-                    exports: [CuiToggleComponent]
-                }]
+class CuiToggleModule {
+}
+CuiToggleModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CuiToggleModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+CuiToggleModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: CuiToggleModule, declarations: [CuiToggleComponent], exports: [CuiToggleComponent] });
+CuiToggleModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CuiToggleModule });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CuiToggleModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [CuiToggleComponent],
+                    exports: [CuiToggleComponent]
+                }]
         }] });
 
-/**
- * Generated bundle index. Do not edit.
+/**
+ * Generated bundle index. Do not edit.
  */
 
 export { CUI_ALERTS, CUI_ALERT_CONTEXT, CUI_ALERT_DEFAULT_OPTIONS, CUI_ALERT_OPTIONS, CUI_BANNER_DEFAULT_OPTIONS, CUI_BANNER_OPTIONS, CUI_BUTTON_DEFAULT_OPTIONS, CUI_BUTTON_OPTIONS, CUI_DEFAULT_THEME, CUI_DIALOGS, CUI_DIALOG_CONTEXT, CUI_DIALOG_DEFAULT_OPTIONS, CUI_DIALOG_OPTIONS, CUI_NOTIFICATION_DEFAULT_OPTIONS, CUI_NOTIFICATION_OPTIONS, CUI_ROOT_SELECTOR, CUI_TAB_ACTIVATE, 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, CUI_THEME, CUI_THEME_STORAGE_DEFAULT_KEY, CUI_THEME_STORAGE_KEY, CuiAccordionComponent, CuiAccordionItemComponent, CuiAccordionModule, CuiAlertComponent, CuiAlertModule, CuiAlertService, CuiAlertsComponent, CuiBadgeComponent, CuiBadgeModule, CuiBannerComponent, CuiBannerModule, CuiBreadcrumbComponent, CuiBreadcrumbsComponent, CuiBreadcrumbsModule, CuiButtonComponent, CuiButtonGroupComponent, CuiButtonGroupModule, CuiButtonModule, CuiCheckboxComponent, CuiCheckboxModule, CuiContextMenuComponent, CuiContextMenuModule, CuiDialogActionsComponent, CuiDialogComponent, CuiDialogHeaderComponent, CuiDialogModule, CuiDialogService, CuiDialogsComponent, CuiFormFieldComponent, CuiFormFieldModule, CuiHintComponent, CuiHintModule, CuiIconButtonComponent, CuiIconButtonModule, CuiInputModule, CuiInputNumberComponent, CuiInputNumberModule, CuiInputPasswordComponent, CuiInputPasswordModule, CuiInputTextComponent, CuiLabelComponent, CuiLabelModule, CuiNotificationComponent, CuiNotificationModule, CuiRadioComponent, CuiRadioModule, CuiRootComponent, CuiRootModule, CuiSelectComponent, CuiSelectModule, CuiSvgComponent, CuiSvgModule, CuiTabComponent, CuiTabsComponent, CuiTabsModule, CuiTextFieldController, CuiTextFieldControllerModule, CuiTextFieldIconLeftDirective, CuiTextFieldIdDirective, CuiTextFieldIsErrorDirective, CuiTextFieldPlaceholderDirective, CuiTextFieldSizeDirective, CuiTextareaComponent, CuiTextareaModule, CuiThemeService, CuiToggleComponent, CuiToggleModule, cuiRemoveSpaces, cuiReplace };